Merge branch 'canary' into pr/3000

.changeset/warm-planets-smile.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/dropdown": patch
+---
+
+fix(dropdown): respect closeOnSelect prop on DropdownItem (#2290)

.nvmrc

@@ -1 +1 @@
-16.x
+20.x

package.json

@@ -146,7 +146,7 @@
   },
   "engines": {
     "node": ">=16.x",
-    "pnpm": ">=8.x"
+    "pnpm": ">=9.x"
   },
-  "packageManager": "pnpm@8.7.0"
+  "packageManager": "pnpm@9.6.0"
 }

packages/components/dropdown/__tests__/dropdown.test.tsx

@@ -795,4 +795,40 @@ describe("Keyboard interactions", () => {
 
     logSpy.mockRestore();
   });
+
+  it("should respect closeOnSelect setting of DropdownItem", async () => {
+    const onOpenChange = jest.fn();
+    const wrapper = render(
+      <Dropdown onOpenChange={onOpenChange}>
+        <DropdownTrigger>
+          <Button data-testid="trigger-test">Trigger</Button>
+        </DropdownTrigger>
+        <DropdownMenu aria-label="Actions">
+          <DropdownItem key="new" closeOnSelect={false}>
+            New file
+          </DropdownItem>
+          <DropdownItem key="copy">Copy link</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>,
+    );
+
+    let triggerButton = wrapper.getByTestId("trigger-test");
+
+    act(() => {
+      triggerButton.click();
+    });
+    expect(onOpenChange).toBeCalledTimes(1);
+
+    let menuItems = wrapper.getAllByRole("menuitem");
+
+    await act(async () => {
+      await userEvent.click(menuItems[0]);
+      expect(onOpenChange).toBeCalledTimes(1);
+    });
+
+    await act(async () => {
+      await userEvent.click(menuItems[1]);
+      expect(onOpenChange).toBeCalledTimes(2);
+    });
+  });
 });

packages/components/dropdown/src/use-dropdown.ts

@@ -152,7 +152,17 @@ export function useDropdown(props: UseDropdownProps) {
       menuProps,
       closeOnSelect,
       ...mergeProps(props, {
-        onAction: () => onMenuAction(props?.closeOnSelect),
+        onAction: (key: any) => {
+          // @ts-ignore
+          const item = props?.children?.find((item) => item.key === key);
+
+          if (item?.props?.closeOnSelect === false) {
+            onMenuAction(false);
+
+            return;
+          }
+          onMenuAction(props?.closeOnSelect);
+        },
         onClose: state.close,
       }),
     } as MenuProps;

packages/components/dropdown/stories/dropdown.stories.tsx

@@ -153,6 +153,41 @@ const Template = ({color, variant, ...args}: DropdownProps & DropdownMenuProps)
   </Dropdown>
 );
 
+const ItemCloseOnSelectTemplate = ({
+  color,
+  variant,
+  ...args
+}: DropdownProps & DropdownMenuProps) => (
+  <>
+    <Dropdown {...args}>
+      <DropdownTrigger>
+        <Button>Trigger</Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Actions" color={color} variant={variant}>
+        <DropdownItem key="new">New file</DropdownItem>
+        <DropdownItem key="copy">Copy link</DropdownItem>
+        <DropdownItem key="edit">Edit file</DropdownItem>
+        <DropdownItem key="delete" className="text-danger" closeOnSelect={false} color="danger">
+          Delete file
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+    <Dropdown {...args}>
+      <DropdownTrigger>
+        <Button>Trigger</Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Actions" closeOnSelect={false} color={color} variant={variant}>
+        <DropdownItem key="new">New file</DropdownItem>
+        <DropdownItem key="copy">Copy link</DropdownItem>
+        <DropdownItem key="edit">Edit file</DropdownItem>
+        <DropdownItem key="delete" className="text-danger" color="danger">
+          Delete file
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  </>
+);
+
 const DynamicTemplate = ({color, variant, ...args}: DropdownProps & DropdownMenuProps) => (
   <Dropdown {...args}>
     <DropdownTrigger>
@@ -739,3 +774,11 @@ export const DisableAnimation = {
     disableAnimation: true,
   },
 };
+
+export const ItemCloseOnSelect = {
+  render: ItemCloseOnSelectTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};