refactor: rename onPopupVisibleChange to onOpenChange across components

.gitignore

@@ -40,4 +40,5 @@ tsconfig.test.json
 .dumi/tmp
 .dumi/tmp-test
 .dumi/tmp-production
-.history
+.history
+pnpm-lock.yaml

docs/examples/controlled.tsx

@@ -43,7 +43,7 @@ class Controlled extends React.Component<{}, ControlledState> {
     console.log('onFocus');
   };
 
-  onPopupVisibleChange = (open) => {
+  onOpenChange = (open) => {
     this.setState({ open });
   };
 
@@ -68,7 +68,7 @@ class Controlled extends React.Component<{}, ControlledState> {
             optionLabelProp="children"
             optionFilterProp="text"
             onChange={this.onChange}
-            onPopupVisibleChange={this.onPopupVisibleChange}
+            onOpenChange={this.onOpenChange}
           >
             <Option value="01" text="jack" title="jack">
               <b

package.json

@@ -49,8 +49,8 @@
     "react-dom": "*"
   },
   "dependencies": {
-    "@rc-component/trigger": "^3.0.0",
     "@rc-component/motion": "^1.1.4",
+    "@rc-component/trigger": "^3.0.0",
     "@rc-component/util": "^1.2.1",
     "classnames": "2.x",
     "rc-overflow": "^1.4.0",
@@ -62,6 +62,7 @@
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.6",
     "@types/jest": "^29.5.12",
+    "@types/node": "^22.14.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "babel-jest": "^29.6.1",

src/BaseSelect/index.tsx

@@ -162,7 +162,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
   // >>> Open
   open?: boolean;
   defaultOpen?: boolean;
-  onPopupVisibleChange?: (open: boolean) => void;
+  onOpenChange?: (open: boolean) => void;
 
   // >>> Customize Input
   /** @private Internal usage. Do not use in your production. */
@@ -257,7 +257,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     // Open
     open,
     defaultOpen,
-    onPopupVisibleChange,
+    onOpenChange,
 
     // Active
     activeValue,
@@ -401,11 +401,11 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
         setInnerOpen(nextOpen);
 
         if (mergedOpen !== nextOpen) {
-          onPopupVisibleChange?.(nextOpen);
+          onOpenChange?.(nextOpen);
         }
       }
     },
-    [disabled, mergedOpen, setInnerOpen, onPopupVisibleChange],
+    [disabled, mergedOpen, setInnerOpen, onOpenChange],
   );
 
   // ============================= Search =============================
@@ -794,7 +794,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       ref={triggerRef}
       disabled={disabled}
       prefixCls={prefixCls}
-      visible={triggerOpen}
+      open={triggerOpen}
       popupElement={optionList}
       animation={animation}
       transitionName={transitionName}
@@ -814,7 +814,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
         // But we should update `rc-resize-observer` first.
         selectorDomRef.current || node
       }
-      onPopupVisibleChange={onTriggerVisibleChange}
+      onOpenChange={onTriggerVisibleChange}
       onPopupMouseEnter={onPopupMouseEnter}
     >
       {customizeRawInputElement ? (

src/SelectTrigger.tsx

@@ -57,7 +57,7 @@ export interface SelectTriggerProps {
   prefixCls: string;
   children: React.ReactElement;
   disabled: boolean;
-  visible: boolean;
+  open: boolean;
   popupElement: React.ReactElement;
 
   animation?: string;
@@ -74,7 +74,7 @@ export interface SelectTriggerProps {
   empty: boolean;
 
   getTriggerDOMNode: (node: HTMLElement) => HTMLElement;
-  onPopupVisibleChange?: (visible: boolean) => void;
+  onOpenChange?: (open: boolean) => void;
 
   onPopupMouseEnter: () => void;
 }
@@ -86,7 +86,7 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
   const {
     prefixCls,
     disabled,
-    visible,
+    open,
     children,
     popupElement,
     animation,
@@ -102,7 +102,7 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
     getPopupContainer,
     empty,
     getTriggerDOMNode,
-    onPopupVisibleChange,
+    onOpenChange,
     onPopupMouseEnter,
     ...restProps
   } = props;
@@ -158,8 +158,8 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
   return (
     <Trigger
       {...restProps}
-      showAction={onPopupVisibleChange ? ['click'] : []}
-      hideAction={onPopupVisibleChange ? ['click'] : []}
+      showAction={onOpenChange ? ['click'] : []}
+      hideAction={onOpenChange ? ['click'] : []}
       popupPlacement={placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft')}
       builtinPlacements={mergedBuiltinPlacements}
       prefixCls={popupPrefixCls}
@@ -168,14 +168,14 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
       ref={triggerPopupRef}
       stretch={stretch}
       popupAlign={popupAlign}
-      popupVisible={visible}
+      popupVisible={open}
       getPopupContainer={getPopupContainer}
       popupClassName={classNames(popupClassName, {
         [`${popupPrefixCls}-empty`]: empty,
       })}
       popupStyle={mergedPopupStyle}
       getTriggerDOMNode={getTriggerDOMNode}
-      onPopupVisibleChange={onPopupVisibleChange}
+      onOpenChange={onOpenChange}
     >
       {children}
     </Trigger>

tests/Combobox.test.tsx

@@ -455,16 +455,16 @@ describe('Select.Combobox', () => {
   // https://github.com/ant-design/ant-design/issues/16572
   it('close when enter press without active option', () => {
     jest.useFakeTimers();
-    const onPopupVisibleChange = jest.fn();
+    const onOpenChange = jest.fn();
     const { container } = render(
-      <Select mode="combobox" open onPopupVisibleChange={onPopupVisibleChange}>
+      <Select mode="combobox" open onOpenChange={onOpenChange}>
         <Option value="One">One</Option>
         <Option value="Two">Two</Option>
       </Select>,
     );
     keyDown(container.querySelector('input')!, KeyCode.ENTER);
     jest.runAllTimers();
-    expect(onPopupVisibleChange).toHaveBeenCalledWith(false);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
     jest.useRealTimers();
   });
 

tests/Custom.test.tsx

@@ -15,15 +15,12 @@ describe('Select.Custom', () => {
   });
 
   it('getRawInputElement', () => {
-    const onPopupVisibleChange = jest.fn();
+    const onOpenChange = jest.fn();
     const { container } = render(
-      <Select
-        getRawInputElement={() => <span className="custom" />}
-        onPopupVisibleChange={onPopupVisibleChange}
-      />,
+      <Select getRawInputElement={() => <span className="custom" />} onOpenChange={onOpenChange} />,
     );
     fireEvent.click(container.querySelector('.custom'));
 
-    expect(onPopupVisibleChange).toHaveBeenCalledWith(true);
+    expect(onOpenChange).toHaveBeenCalledWith(true);
   });
 });

tests/Popup.test.tsx

@@ -13,17 +13,17 @@ describe('Select.Popup', () => {
   injectRunAllTimers(jest);
 
   it('click popup should not trigger close', () => {
-    const onPopupVisibleChange = jest.fn();
+    const onOpenChange = jest.fn();
     render(
       <Select
         open
         options={[{ value: 'bamboo' }]}
-        onPopupVisibleChange={onPopupVisibleChange}
+        onOpenChange={onOpenChange}
         getPopupContainer={() => document.body}
       />,
     );
 
     fireEvent.mouseDown(document.querySelector('.rc-select-dropdown'));
-    expect(onPopupVisibleChange).not.toHaveBeenCalled();
+    expect(onOpenChange).not.toHaveBeenCalled();
   });
 });

tests/Select.test.tsx

@@ -894,13 +894,13 @@ describe('Select.Basic', () => {
         open: true,
       };
 
-      public onPopupVisibleChange = (open) => {
+      public onOpenChange = (open) => {
         this.setState({ open });
       };
 
       public render() {
         return (
-          <Select open={this.state.open} onPopupVisibleChange={this.onPopupVisibleChange}>
+          <Select open={this.state.open} onOpenChange={this.onOpenChange}>
             <Option value="1">1</Option>
           </Select>
         );