refactor: rename onPopupVisibleChange to onOpenChange

Author: aojunhao123

docs/examples/body-overflow.tsx

@@ -41,7 +41,7 @@ export default () => {
       <Trigger
         arrow
         popupVisible={open}
-        onPopupVisibleChange={(next) => {
+        onOpenChange={(next) => {
           console.log('Visible Change:', next);
           setOpen(next);
         }}
@@ -100,7 +100,7 @@ export default () => {
         arrow
         action="click"
         popupVisible={open1}
-        onPopupVisibleChange={(next) => {
+        onOpenChange={(next) => {
           console.log('Visible Change:', next);
           setOpen1(next);
         }}
@@ -156,7 +156,7 @@ export default () => {
         arrow
         action="contextMenu"
         popupVisible={open2}
-        onPopupVisibleChange={(next) => {
+        onOpenChange={(next) => {
           console.log('Visible Change:', next);
           setOpen2(next);
         }}
@@ -205,7 +205,7 @@ export default () => {
         arrow
         action="contextMenu"
         popupVisible={open3}
-        onPopupVisibleChange={(next) => {
+        onOpenChange={(next) => {
           console.log('Visible Change:', next);
           setOpen3(next);
         }}

docs/examples/click-nested.tsx

@@ -45,7 +45,7 @@ const NestPopup = ({ open, setOpen }) => {
       builtinPlacements={builtinPlacements}
       popup={<div style={popupBorderStyle}>i am a click popup</div>}
       popupVisible={open}
-      onPopupVisibleChange={setOpen}
+      onOpenChange={setOpen}
     >
       <div style={popupBorderStyle}>
         i am a click popup{' '}
@@ -77,7 +77,7 @@ const Test = () => {
           action={['click']}
           builtinPlacements={builtinPlacements}
           popupVisible={open1}
-          onPopupVisibleChange={setOpen1}
+          onOpenChange={setOpen1}
           popup={
             // Level 2
             <NestPopup open={open2} setOpen={setOpen2} />

docs/examples/container.tsx

@@ -165,7 +165,7 @@ export default () => {
               }}
               popupStyle={{ boxShadow: '0 0 5px red' }}
               popupVisible={visible}
-              onPopupVisibleChange={(nextVisible) => {
+              onOpenChange={(nextVisible) => {
                 setVisible(nextVisible);
               }}
               // getPopupContainer={() => popHolderRef.current}

docs/examples/portal.tsx

@@ -86,7 +86,7 @@ const Test = () => {
             <PortalPopup />
           </div>
         }
-        onPopupVisibleChange={(visible) => {
+        onOpenChange={(visible) => {
           console.log('visible change:', visible);
         }}
       >

src/index.tsx

@@ -62,7 +62,7 @@ export interface TriggerProps {
   // ==================== Open =====================
   popupVisible?: boolean;
   defaultPopupVisible?: boolean;
-  onPopupVisibleChange?: (visible: boolean) => void;
+  onOpenChange?: (visible: boolean) => void;
   afterPopupVisibleChange?: (visible: boolean) => void;
 
   // =================== Portal ====================
@@ -138,7 +138,7 @@ export function generateTrigger(
       // Open
       popupVisible,
       defaultPopupVisible,
-      onPopupVisibleChange,
+      onOpenChange,
       afterPopupVisibleChange,
 
       // Delay
@@ -299,7 +299,7 @@ export function generateTrigger(
           mergedOpen) !== nextOpen
       ) {
         lastTriggerRef.current.push(nextOpen);
-        onPopupVisibleChange?.(nextOpen);
+        onOpenChange?.(nextOpen);
       }
     });
 

tests/basic.test.jsx

@@ -433,13 +433,13 @@ describe('Trigger.Basic', () => {
         },
       };
       let innerVisible = null;
-      function onInnerPopupVisibleChange(value) {
+      function onInnerOpenChange(value) {
         innerVisible = value;
       }
       const innerTrigger = (
         <div style={{ background: 'rgba(255, 0, 0, 0.3)' }}>
           <Trigger
-            onPopupVisibleChange={onInnerPopupVisibleChange}
+            onOpenChange={onInnerOpenChange}
             popupPlacement="right"
             action={['click']}
             builtinPlacements={builtinPlacements}
@@ -458,12 +458,12 @@ describe('Trigger.Basic', () => {
       );
 
       let visible = null;
-      function onPopupVisibleChange(value) {
+      function onOpenChange(value) {
         visible = value;
       }
       const { container } = render(
         <Trigger
-          onPopupVisibleChange={onPopupVisibleChange}
+          onOpenChange={onOpenChange}
           popupPlacement="right"
           action={['click']}
           builtinPlacements={builtinPlacements}
@@ -978,11 +978,11 @@ describe('Trigger.Basic', () => {
 
   describe('click window to hide', () => {
     it('should hide', async () => {
-      const onPopupVisibleChange = jest.fn();
+      const onOpenChange = jest.fn();
 
       const { container } = render(
         <Trigger
-          onPopupVisibleChange={onPopupVisibleChange}
+          onOpenChange={onOpenChange}
           action="click"
           popup={<strong>trigger</strong>}
         >
@@ -992,22 +992,22 @@ describe('Trigger.Basic', () => {
 
       fireEvent.click(container.querySelector('.target'));
       await awaitFakeTimer();
-      expect(onPopupVisibleChange).toHaveBeenCalledWith(true);
-      onPopupVisibleChange.mockReset();
+      expect(onOpenChange).toHaveBeenCalledWith(true);
+      onOpenChange.mockReset();
 
       // Click outside to close
       fireEvent.mouseDown(document.body);
       fireEvent.click(document.body);
       await awaitFakeTimer();
-      expect(onPopupVisibleChange).toHaveBeenCalledWith(false);
+      expect(onOpenChange).toHaveBeenCalledWith(false);
     });
 
     it('should not hide when mouseDown inside but mouseUp outside', async () => {
-      const onPopupVisibleChange = jest.fn();
+      const onOpenChange = jest.fn();
 
       const { container } = render(
         <Trigger
-          onPopupVisibleChange={onPopupVisibleChange}
+          onOpenChange={onOpenChange}
           action="click"
           popup={<strong>trigger</strong>}
         >
@@ -1017,14 +1017,14 @@ describe('Trigger.Basic', () => {
 
       fireEvent.click(container.querySelector('.target'));
       await awaitFakeTimer();
-      expect(onPopupVisibleChange).toHaveBeenCalledWith(true);
-      onPopupVisibleChange.mockReset();
+      expect(onOpenChange).toHaveBeenCalledWith(true);
+      onOpenChange.mockReset();
 
       // Click outside to close
       fireEvent.mouseDown(document.querySelector('strong'));
       fireEvent.click(document.body);
       await awaitFakeTimer();
-      expect(onPopupVisibleChange).not.toHaveBeenCalled();
+      expect(onOpenChange).not.toHaveBeenCalled();
     });
 
     // https://github.com/ant-design/ant-design/issues/42526
@@ -1039,7 +1039,7 @@ describe('Trigger.Basic', () => {
               }}
             />
             <Trigger
-              onPopupVisibleChange={setOpen}
+              onOpenChange={setOpen}
               action="click"
               popupVisible={open}
               popup={<strong>trigger</strong>}
@@ -1088,11 +1088,11 @@ describe('Trigger.Basic', () => {
   });
 
   it('not trigger open when hover hidden popup node', () => {
-    const onPopupVisibleChange = jest.fn();
+    const onOpenChange = jest.fn();
 
     const { container } = render(
       <Trigger
-        onPopupVisibleChange={onPopupVisibleChange}
+        onOpenChange={onOpenChange}
         action="hover"
         popup={<strong className="popup">trigger</strong>}
         getPopupContainer={() => container}
@@ -1102,15 +1102,15 @@ describe('Trigger.Basic', () => {
     );
 
     trigger(container, '.target', 'mouseEnter');
-    expect(onPopupVisibleChange).toHaveBeenCalledWith(true);
-    onPopupVisibleChange.mockReset();
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    onOpenChange.mockReset();
 
     trigger(container, '.target', 'mouseLeave');
-    expect(onPopupVisibleChange).toHaveBeenCalledWith(false);
-    onPopupVisibleChange.mockReset();
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    onOpenChange.mockReset();
 
     trigger(container, '.popup', 'mouseEnter');
-    expect(onPopupVisibleChange).not.toHaveBeenCalled();
+    expect(onOpenChange).not.toHaveBeenCalled();
   });
 
   // https://gith(ub.com/ant-design/ant-design/issues/44830
@@ -1121,7 +1121,7 @@ describe('Trigger.Basic', () => {
       return (
         <Trigger
           popupVisible={open}
-          onPopupVisibleChange={setOpen}
+          onOpenChange={setOpen}
           popup={<strong className="x-content">{String(open)}</strong>}
           action={['click']}
           popupAlign={placementAlignMap.left}

tests/portal.test.jsx

@@ -33,14 +33,14 @@ describe('Trigger.Portal', () => {
       );
     };
 
-    const onPopupVisibleChange = jest.fn();
+    const onOpenChange = jest.fn();
 
     const { container } = render(
       <div className="holder">
         <Trigger
           action={['hover']}
           popupAlign={placementAlignMap.left}
-          onPopupVisibleChange={onPopupVisibleChange}
+          onOpenChange={onOpenChange}
           popup={
             <strong className="x-content">
               tooltip2
@@ -55,7 +55,7 @@ describe('Trigger.Portal', () => {
 
     // Show the popup
     fireEvent.mouseEnter(container.querySelector('.target'));
-    expect(onPopupVisibleChange).toHaveBeenCalledWith(true);
+    expect(onOpenChange).toHaveBeenCalledWith(true);
     fireEvent.mouseLeave(container.querySelector('.target'));
 
     // Mouse enter popup
@@ -68,6 +68,6 @@ describe('Trigger.Portal', () => {
       jest.runAllTimers();
     });
 
-    expect(onPopupVisibleChange).toHaveBeenCalledWith(false);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
   });
 });