refactor: rename visibility change props for clarity

.gitignore

@@ -41,4 +41,5 @@ package-lock.json
 .dumi/tmp
 .dumi/tmp-production
 
-bun.lockb
+bun.lockb
+.vscode/

docs/examples/formError.tsx

@@ -4,13 +4,13 @@ import React, { Component } from 'react';
 import '../../assets/bootstrap.less';
 
 interface TestState {
-  visible: boolean;
+  open: boolean;
   destroy?: boolean;
 }
 
 class Test extends Component {
   state = {
-    visible: false,
+    open: false,
   } as TestState;
 
   handleDestroy = () => {
@@ -33,7 +33,7 @@ class Test extends Component {
       <div>
         <div style={{ marginTop: 100, marginLeft: 100, marginBottom: 100 }}>
           <Tooltip
-            visible={this.state.visible}
+            open={this.state.open}
             motion={{ motionName: 'rc-tooltip-zoom' }}
             trigger={[]}
             overlayStyle={{ zIndex: 1000 }}

docs/examples/onVisibleChange.tsx

@@ -7,16 +7,16 @@ function preventDefault(e) {
 }
 
 interface TestState {
-  visible: boolean;
+  open: boolean;
   destroy?: boolean;
 }
 
 class Test extends Component {
   state = {
-    visible: false,
+    open: false,
   } as TestState;
 
-  onVisibleChange = visible => {
+  onOpenChange = visible => {
     this.setState({
       visible,
     });
@@ -36,9 +36,9 @@ class Test extends Component {
       <div>
         <div style={{ marginTop: 300, marginLeft: 100, marginBottom: 100 }}>
           <Tooltip
-            visible={this.state.visible}
+            open={this.state.open}
             motion={{ motionName: 'rc-tooltip-zoom' }}
-            onVisibleChange={this.onVisibleChange}
+            onOpenChange={this.onOpenChange}
             trigger="click"
             overlay={<span>I am a tooltip</span>}
           >

docs/examples/simple.tsx

@@ -88,7 +88,7 @@ class Test extends Component<any, TestState> {
     });
   };
 
-  onVisibleChange = (visible) => {
+  onOpenChange = (visible) => {
     console.log('tooltip', visible); // eslint-disable-line no-console
   };
 
@@ -211,7 +211,7 @@ class Test extends Component<any, TestState> {
             mouseLeaveDelay={0.1}
             destroyTooltipOnHide={this.state.destroyTooltipOnHide}
             trigger={Object.keys(this.state.trigger) as ActionType[]}
-            onVisibleChange={this.onVisibleChange}
+            onOpenChange={this.onOpenChange}
             overlay={<div style={{ height: 50, width: 50 }}>i am a tooltip</div>}
             align={{
               offset: [this.state.offsetX, this.state.offsetY],

src/Tooltip.tsx

@@ -23,12 +23,12 @@ export interface TooltipProps
   > {
   trigger?: ActionType | ActionType[];
   defaultVisible?: boolean;
-  visible?: boolean;
+  open?: boolean;
   placement?: string;
   /** Config popup motion */
   motion?: TriggerProps['popupMotion'];
-  onVisibleChange?: (visible: boolean) => void;
-  afterVisibleChange?: (visible: boolean) => void;
+  onOpenChange?: (open: boolean) => void;
+  afterOpenChange?: (open: boolean) => void;
   overlay: (() => React.ReactNode) | React.ReactNode;
   /** @deprecated Please use `styles={{ root: {} }}` */
   overlayStyle?: React.CSSProperties;
@@ -68,8 +68,8 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
     overlayStyle,
     prefixCls = 'rc-tooltip',
     children,
-    onVisibleChange,
-    afterVisibleChange,
+    onOpenChange,
+    afterOpenChange,
     motion,
     placement = 'right',
     align = {},
@@ -83,6 +83,7 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
     showArrow = true,
     classNames: tooltipClassNames,
     styles: tooltipStyles,
+    open,
     ...restProps
   } = props;
 
@@ -91,11 +92,6 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
 
   useImperativeHandle(ref, () => triggerRef.current);
 
-  const extraProps: Partial<TooltipProps & TriggerProps> = { ...restProps };
-  if ('visible' in props) {
-    extraProps.popupVisible = props.visible;
-  }
-
   const getPopupElement = () => (
     <Popup
       key="content"
@@ -131,16 +127,17 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
       ref={triggerRef}
       popupAlign={align}
       getPopupContainer={getTooltipContainer}
-      onPopupVisibleChange={onVisibleChange}
-      afterPopupVisibleChange={afterVisibleChange}
+      onOpenChange={onOpenChange}
+      afterOpenChange={afterOpenChange}
       popupMotion={motion}
       defaultPopupVisible={defaultVisible}
       autoDestroy={destroyTooltipOnHide}
       mouseLeaveDelay={mouseLeaveDelay}
       popupStyle={{ ...overlayStyle, ...tooltipStyles?.root }}
       mouseEnterDelay={mouseEnterDelay}
       arrow={showArrow}
-      {...extraProps}
+      popupVisible={open}
+      {...restProps}
     >
       {getChildren()}
     </Trigger>

tests/index.test.tsx

@@ -222,7 +222,7 @@ describe('rc-tooltip', () => {
     const App = () => {
       const [open, setOpen] = React.useState(false);
       return (
-        <Tooltip overlay={<strong className="x-content">Tooltip content</strong>} visible={open}>
+        <Tooltip overlay={<strong className="x-content">Tooltip content</strong>} open={open}>
           <div
             className="target"
             onClick={() => {
@@ -263,7 +263,7 @@ describe('rc-tooltip', () => {
     };
 
     const { container } = render(
-      <Tooltip classNames={customClassNames} overlay={<div />} styles={customStyles} visible>
+      <Tooltip classNames={customClassNames} overlay={<div />} styles={customStyles} open>
         <button />
       </Tooltip>,
     );