Fix DropdownItem onPress

.changeset/healthy-parents-brake.md

@@ -0,0 +1,7 @@
+---
+"@nextui-org/dropdown": patch
+"@nextui-org/menu": patch
+"@nextui-org/use-aria-menu": patch
+---
+
+Fix #2743 #2751 internal react-aria use-menu hooks implemented to pass down the press events and control the pressUp one

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

@@ -139,7 +139,11 @@ export function useDropdown(props: UseDropdownProps) {
     return {
       ref: mergeRefs(_ref, menuRef),
       menuProps,
-      ...mergeProps(props, {onAction: () => onMenuAction(props?.closeOnSelect)}),
+      closeOnSelect,
+      ...mergeProps(props, {
+        onAction: () => onMenuAction(props?.closeOnSelect),
+        onClose: state.close,
+      }),
     } as MenuProps;
   };
 

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

@@ -137,7 +137,7 @@ const Template = ({color, variant, ...args}: DropdownProps & DropdownMenuProps)
     <DropdownTrigger>
       <Button>Trigger</Button>
     </DropdownTrigger>
-    <DropdownMenu aria-label="Actions" color={color} variant={variant} onAction={alert}>
+    <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>

packages/components/menu/__tests__/menu.test.tsx

@@ -109,6 +109,7 @@ describe("Menu", () => {
       <Menu aria-label="Actions" items={menuItems}>
         {(section: any) => (
           <MenuSection aria-label={section.title} items={section.children} title={section.title}>
+            {/* @ts-ignore */}
             {(item: any) => <MenuItem key={item.key}>{item.name}</MenuItem>}
           </MenuSection>
         )}
@@ -273,4 +274,81 @@ describe("Menu", () => {
 
     expect(checkmark1).toBeFalsy();
   });
+
+  it("should dispatch onAction events correctly", async () => {
+    let onAction = jest.fn();
+
+    const wrapper = render(
+      <Menu aria-label="Actions" onAction={onAction}>
+        <MenuItem key="new">New file</MenuItem>
+        <MenuItem key="copy">Copy link</MenuItem>
+        <MenuItem key="edit">Edit file</MenuItem>
+        <MenuItem key="delete" color="danger">
+          Delete file
+        </MenuItem>
+      </Menu>,
+    );
+
+    let menuItems = wrapper.getAllByRole("menuitem");
+
+    await act(async () => {
+      await userEvent.click(menuItems[1]);
+
+      expect(onAction).toBeCalledTimes(1);
+    });
+  });
+
+  it("should not dispatch onAction events if item is disabled", async () => {
+    let onAction = jest.fn();
+
+    const wrapper = render(
+      <Menu aria-label="Actions" onAction={onAction}>
+        <MenuItem key="new">New file</MenuItem>
+        <MenuItem key="copy" isDisabled>
+          Copy link
+        </MenuItem>
+        <MenuItem key="edit">Edit file</MenuItem>
+        <MenuItem key="delete" color="danger">
+          Delete file
+        </MenuItem>
+      </Menu>,
+    );
+
+    let menuItems = wrapper.getAllByRole("menuitem");
+
+    await act(async () => {
+      await userEvent.click(menuItems[1]);
+
+      expect(onAction).toBeCalledTimes(0);
+    });
+  });
+
+  it("should dispatch onPress, onAction and onClick events", async () => {
+    let onPress = jest.fn();
+    let onClick = jest.fn();
+    let onAction = jest.fn();
+
+    const wrapper = render(
+      <Menu aria-label="Actions" onAction={onAction}>
+        <MenuItem key="new" onClick={onClick} onPress={onPress}>
+          New file
+        </MenuItem>
+        <MenuItem key="copy">Copy link</MenuItem>
+        <MenuItem key="edit">Edit file</MenuItem>
+        <MenuItem key="delete" color="danger">
+          Delete file
+        </MenuItem>
+      </Menu>,
+    );
+
+    let menuItems = wrapper.getAllByRole("menuitem");
+
+    await act(async () => {
+      await userEvent.click(menuItems[0]);
+
+      expect(onAction).toBeCalledTimes(1);
+      expect(onPress).toBeCalledTimes(1);
+      expect(onClick).toBeCalledTimes(1);
+    });
+  });
 });

packages/components/menu/package.json

@@ -45,6 +45,7 @@
     "@nextui-org/use-is-mobile": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
+    "@nextui-org/use-aria-menu": "workspace:*",
     "@react-aria/focus": "^3.16.2",
     "@react-aria/interactions": "^3.21.1",
     "@react-aria/menu": "^3.13.1",
@@ -57,6 +58,7 @@
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/system": "workspace:*",
+    "@nextui-org/test-utils": "workspace:*",
     "clean-package": "2.2.0",
     "@nextui-org/shared-icons": "workspace:*",
     "react": "^18.0.0",

packages/components/menu/src/use-menu-item.ts

@@ -1,17 +1,16 @@
 import type {MenuItemBaseProps} from "./base/menu-item-base";
+import type {Node} from "@react-types/shared";
 
 import {useMemo, useRef, useCallback} from "react";
 import {menuItem} from "@nextui-org/theme";
 import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system";
 import {useFocusRing} from "@react-aria/focus";
-import {Node} from "@react-types/shared";
-import {filterDOMProps} from "@nextui-org/react-utils";
 import {TreeState} from "@react-stately/tree";
 import {clsx, dataAttr, objectToDeps, removeEvents} from "@nextui-org/shared-utils";
-import {useMenuItem as useAriaMenuItem} from "@react-aria/menu";
-import {chain, mergeProps} from "@react-aria/utils";
-import {useHover, usePress} from "@react-aria/interactions";
+import {useAriaMenuItem} from "@nextui-org/use-aria-menu";
+import {mergeProps} from "@react-aria/utils";
 import {useIsMobile} from "@nextui-org/use-is-mobile";
+import {filterDOMProps} from "@nextui-org/react-utils";
 
 interface Props<T extends object> extends MenuItemBaseProps<T> {
   item: Node<T>;
@@ -38,8 +37,12 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
     classNames,
     onAction,
     autoFocus,
-    onPress,
     onClick,
+    onPress,
+    onPressStart,
+    onPressUp,
+    onPressEnd,
+    onPressChange,
     hideSelectedIcon = false,
     isReadOnly = false,
     closeOnSelect,
@@ -61,21 +64,13 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
 
   const isMobile = useIsMobile();
 
-  const {pressProps, isPressed} = usePress({
-    ref: domRef,
-    isDisabled: isDisabled,
-    onPress,
-  });
-
-  const {isHovered, hoverProps} = useHover({
-    isDisabled,
-  });
-
   const {isFocusVisible, focusProps} = useFocusRing({
     autoFocus,
   });
 
   const {
+    isHovered,
+    isPressed,
     isFocused,
     isSelected,
     menuItemProps,
@@ -87,6 +82,12 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
       key,
       onClose,
       isDisabled,
+      onPress,
+      onClick,
+      onPressStart,
+      onPressUp,
+      onPressEnd,
+      onPressChange,
       "aria-label": props["aria-label"],
       closeOnSelect,
       isVirtualized,
@@ -117,12 +118,11 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
   const getItemProps: PropGetter = (props = {}) => ({
     ref: domRef,
     ...mergeProps(
-      itemProps,
-      isReadOnly ? {} : mergeProps(focusProps, pressProps),
-      hoverProps,
+      isReadOnly ? {} : focusProps,
       filterDOMProps(otherProps, {
         enabled: shouldFilterDOMProps,
       }),
+      itemProps,
       props,
     ),
     "data-focus": dataAttr(isFocused),
@@ -133,7 +133,6 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
     "data-pressed": dataAttr(isPressed),
     "data-focus-visible": dataAttr(isFocusVisible),
     className: slots.base({class: clsx(baseStyles, props.className)}),
-    onClick: chain(pressProps.onClick, onClick),
   });
 
   const getLabelProps: PropGetter = (props = {}) => ({

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

@@ -1,7 +1,8 @@
 import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
-import type {AriaMenuProps} from "@react-types/menu";
 
-import {AriaMenuOptions, useMenu as useAriaMenu} from "@react-aria/menu";
+import {AriaMenuProps} from "@react-types/menu";
+import {AriaMenuOptions} from "@react-aria/menu";
+import {useAriaMenu} from "@nextui-org/use-aria-menu";
 import {menu, MenuVariantProps, SlotsToClasses, MenuSlots} from "@nextui-org/theme";
 import {TreeState, useTreeState} from "@react-stately/tree";
 import {ReactRef, filterDOMProps, useDOMRef} from "@nextui-org/react-utils";

packages/hooks/use-aria-menu/README.md

@@ -0,0 +1,24 @@
+# @nextui-org/use-aria-menu-item
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @nextui-org/use-aria-menu-item
+# or
+npm i @nextui-org/use-aria-menu-item
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).

packages/hooks/use-aria-menu/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@nextui-org/use-aria-menu",
+  "version": "2.0.0",
+  "description": "React-aria useMenu hooks with custom implementations",
+  "keywords": [
+    "use-aria-menu"
+  ],
+  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/hooks/use-aria-menu"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "@react-aria/utils": "^3.23.2",
+    "@react-types/shared": "^3.22.1",
+    "@react-aria/menu": "^3.13.1",
+    "@react-aria/interactions": "^3.21.1",
+    "@react-stately/tree": "^3.7.6",
+    "@react-aria/i18n": "^3.10.2",
+    "@react-aria/selection": "^3.17.5",
+    "@react-stately/collections": "^3.10.5",
+    "@react-types/menu": "^3.9.7"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0",
+    "react": "^18.0.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  }
+}

packages/hooks/use-aria-menu/src/index.ts

@@ -0,0 +1,5 @@
+export {menuData, useMenu as useAriaMenu} from "./use-menu";
+export {useMenuItem as useAriaMenuItem} from "./use-menu-item";
+
+export type {AriaMenuOptions, MenuAria} from "./use-menu";
+export type {AriaMenuItemProps, MenuItemAria} from "./use-menu-item";