fix: on click event on interactive elements (#4322)

.changeset/two-flies-design.md

@@ -0,0 +1,15 @@
+---
+"@nextui-org/use-aria-modal-overlay": patch
+"@nextui-org/use-aria-button": patch
+"@nextui-org/aria-utils": patch
+"@nextui-org/dropdown": patch
+"@nextui-org/use-aria-link": patch
+"@nextui-org/listbox": patch
+"@nextui-org/button": patch
+"@nextui-org/navbar": patch
+"@nextui-org/card": patch
+"@nextui-org/link": patch
+"@nextui-org/menu": patch
+---
+
+Fix #4292 interactive elements were not responding to "onClick" event

packages/components/button/__tests__/button.test.tsx

@@ -1,3 +1,4 @@
+import "@testing-library/jest-dom";
 import * as React from "react";
 import {render} from "@testing-library/react";
 import userEvent, {UserEvent} from "@testing-library/user-event";
@@ -35,6 +36,17 @@ describe("Button", () => {
     expect(onPress).toHaveBeenCalled();
   });
 
+  it("should trigger onClick function", async () => {
+    const onClick = jest.fn();
+    const {getByRole} = render(<Button disableRipple onClick={onClick} />);
+
+    const button = getByRole("button");
+
+    await user.click(button);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+
   it("should ignore events when disabled", async () => {
     const onPress = jest.fn();
     const {getByRole} = render(<Button disableRipple isDisabled onPress={onPress} />);

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

@@ -56,6 +56,7 @@ interface Props extends HTMLNextUIProps<"button"> {
   /**
    * The native button click event handler.
    * use `onPress` instead.
+   * @deprecated
    */
   onClick?: MouseEventHandler<HTMLButtonElement>;
 }
@@ -150,7 +151,7 @@ export function useButton(props: UseButtonProps) {
       elementType: as,
       isDisabled,
       onPress: chain(onPress, handlePress),
-      onClick: onClick,
+      onClick,
       ...otherProps,
     } as AriaButtonProps,
     domRef,

packages/components/button/stories/button.stories.tsx

@@ -71,14 +71,19 @@ const defaultProps = {
 const StateTemplate = (args: ButtonProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const handlePress = () => {
+  const handlePress = (e: any) => {
     // eslint-disable-next-line no-console
-    console.log("Pressed");
+    console.log("Pressed", e);
     setIsOpen((prev) => !prev);
   };
 
   return (
-    <Button {...args} aria-label="Open" aria-pressed={isOpen} onPress={handlePress}>
+    <Button
+      {...args}
+      aria-label={isOpen ? "Close" : "Open"}
+      aria-pressed={isOpen}
+      onClick={handlePress}
+    >
       {isOpen ? "Close" : "Open"}
     </Button>
   );

packages/components/card/__tests__/card.test.tsx

@@ -1,10 +1,16 @@
 import * as React from "react";
 import {render} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 
 import {Card} from "../src";
 
 describe("Card", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   it("should render correctly", () => {
     const wrapper = render(<Card />);
 
@@ -30,13 +36,22 @@ describe("Card", () => {
 
     const button = getByRole("button");
 
-    const user = userEvent.setup();
-
     await user.click(button);
 
     expect(onPress).toHaveBeenCalled();
   });
 
+  it("should trigger onClick function", async () => {
+    const onClick = jest.fn();
+    const {getByRole} = render(<Card disableRipple isPressable onClick={onClick} />);
+
+    const button = getByRole("button");
+
+    await user.click(button);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+
   it("should render correctly when nested", () => {
     const wrapper = render(
       <Card>

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

@@ -4,7 +4,7 @@ import type {AriaButtonProps} from "@nextui-org/use-aria-button";
 import type {RippleProps} from "@nextui-org/ripple";
 
 import {card} from "@nextui-org/theme";
-import {ReactNode, useCallback, useMemo} from "react";
+import {MouseEventHandler, ReactNode, useCallback, useMemo} from "react";
 import {chain, mergeProps} from "@react-aria/utils";
 import {useFocusRing} from "@react-aria/focus";
 import {PressEvent, useHover} from "@react-aria/interactions";
@@ -20,7 +20,7 @@ import {ReactRef, filterDOMProps} from "@nextui-org/react-utils";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {useRipple} from "@nextui-org/ripple";
 
-export interface Props extends HTMLNextUIProps<"div"> {
+export interface Props extends Omit<HTMLNextUIProps<"div">, "onClick"> {
   /**
    * Ref to the DOM node.
    */
@@ -34,12 +34,17 @@ export interface Props extends HTMLNextUIProps<"div"> {
    * @default false
    */
   disableRipple?: boolean;
-
   /**
    * Whether the card should allow text selection on press. (only for pressable cards)
    * @default true
    */
   allowTextSelectionOnPress?: boolean;
+  /**
+   * The native button click event handler.
+   * use `onPress` instead.
+   * @deprecated
+   */
+  onClick?: MouseEventHandler<HTMLButtonElement>;
   /**
    * Classname or List of classes to change the classNames of the element.
    * if `className` is passed, it will be added to the base slot.

packages/components/card/stories/card.stories.tsx

@@ -348,6 +348,28 @@ const PrimaryActionTemplate = (args: CardProps) => {
   );
 };
 
+const PressableTemplate = (args: CardProps) => {
+  // Both events should be fired when clicking on the card
+
+  const handlePress = () => {
+    // eslint-disable-next-line no-console
+    alert("card pressed");
+  };
+
+  const onClick = () => {
+    // eslint-disable-next-line no-console
+    alert("card clicked");
+  };
+
+  return (
+    <Card {...args} isPressable onClick={onClick} onPress={handlePress}>
+      <CardBody>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </CardBody>
+    </Card>
+  );
+};
+
 const CenterImgWithHeaderTemplate = (args: CardProps) => {
   const list = [
     {
@@ -414,6 +436,14 @@ export const Default = {
   },
 };
 
+export const Pressable = {
+  render: PressableTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
 export const WithDivider = {
   render: WithDividerTemplate,
 

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

@@ -148,7 +148,9 @@ const Template = ({
       <Button>{label}</Button>
     </DropdownTrigger>
     <DropdownMenu aria-label="Actions" color={color} variant={variant}>
-      <DropdownItem key="new">New file</DropdownItem>
+      <DropdownItem key="new" onClick={() => alert("New file")}>
+        New file
+      </DropdownItem>
       <DropdownItem key="copy">Copy link</DropdownItem>
       <DropdownItem key="edit">Edit file</DropdownItem>
       <DropdownItem key="delete" className="text-danger" color="danger">

packages/components/link/__tests__/link.test.tsx

@@ -1,9 +1,16 @@
 import * as React from "react";
 import {render} from "@testing-library/react";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 
 import {Link} from "../src";
 
 describe("Link", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   it("should render correctly", () => {
     const wrapper = render(<Link />);
 
@@ -33,6 +40,28 @@ describe("Link", () => {
     expect(container.querySelector("svg")).not.toBeNull();
   });
 
+  it("should trigger onPress function", async () => {
+    const onPress = jest.fn();
+    const {getByRole} = render(<Link onPress={onPress} />);
+
+    const link = getByRole("link");
+
+    await user.click(link);
+
+    expect(onPress).toHaveBeenCalled();
+  });
+
+  it("should trigger onClick function", async () => {
+    const onClick = jest.fn();
+    const {getByRole} = render(<Link onClick={onClick} />);
+
+    const link = getByRole("link");
+
+    await user.click(link);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+
   it('should have target="_blank" and rel="noopener noreferrer" when "isExternal" is true', () => {
     const {container} = render(
       <Link isExternal href="#">

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

@@ -1,5 +1,6 @@
 import type {AriaLinkProps} from "@react-types/link";
 import type {LinkVariantProps} from "@nextui-org/theme";
+import type {MouseEventHandler} from "react";
 
 import {link} from "@nextui-org/theme";
 import {useAriaLink} from "@nextui-org/use-aria-link";
@@ -36,6 +37,12 @@ interface Props extends HTMLNextUIProps<"a">, LinkVariantProps {
    * @default <LinkIcon />
    */
   anchorIcon?: React.ReactNode;
+  /**
+   * The native link click event handler.
+   * use `onPress` instead.
+   * @deprecated
+   */
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
 }
 
 export type UseLinkProps = Props & AriaLinkProps;

packages/components/link/stories/link.stories.tsx

@@ -1,7 +1,7 @@
 import type {VariantProps} from "@nextui-org/theme";
 
 import {Meta} from "@storybook/react";
-import React from "react";
+import React, {useState} from "react";
 import {tv} from "@nextui-org/theme";
 import {link} from "@nextui-org/theme";
 
@@ -48,6 +48,22 @@ const defaultProps = {
 
 const Template = (args: LinkProps) => <Link {...args} href="#" />;
 
+const PressableTemplate = (args: LinkProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const handlePress = (e: any) => {
+    // eslint-disable-next-line no-console
+    console.log("Pressed", e);
+
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <Link {...args} onClick={handlePress}>
+      {isOpen ? "Open" : "Close"}
+    </Link>
+  );
+};
+
 export const Default = {
   render: Template,
 
@@ -59,6 +75,17 @@ export const Default = {
   },
 };
 
+export const Pressable = {
+  render: PressableTemplate,
+
+  args: {
+    ...defaultProps,
+    isDisabled: false,
+    color: "foreground",
+    size: "md",
+  },
+};
+
 export const Underline = Template.bind({}) as any;
 Underline.args = {
   ...defaultProps,

packages/components/listbox/src/base/listbox-item-base.tsx

@@ -89,11 +89,18 @@ interface Props<T extends object = {}> extends Omit<ItemProps<"li", T>, "childre
   classNames?: SlotsToClasses<ListboxItemSlots>;
 }
 
-export type ListboxItemBaseProps<T extends object = {}> = Props<T> &
+export type ListboxItemBaseProps<T extends object = {}> = Omit<Props<T>, "onClick"> &
   Omit<ListboxItemVariantProps, "hasDescriptionTextChild" | "hasTitleTextChild"> &
   Omit<AriaOptionProps, "key"> &
   FocusableProps &
-  PressEvents;
+  PressEvents & {
+    /**
+     * The native click event handler.
+     * use `onPress` instead.
+     * @deprecated
+     */
+    onClick?: (e: React.MouseEvent<HTMLLIElement | HTMLAnchorElement>) => void;
+  };
 
 const ListboxItemBase = BaseItem as <T extends object>(
   props: ListboxItemBaseProps<T>,

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

@@ -12,7 +12,7 @@ import {
 import {useFocusRing} from "@react-aria/focus";
 import {Node} from "@react-types/shared";
 import {filterDOMProps} from "@nextui-org/react-utils";
-import {clsx, dataAttr, objectToDeps, removeEvents} from "@nextui-org/shared-utils";
+import {clsx, dataAttr, objectToDeps, removeEvents, warn} from "@nextui-org/shared-utils";
 import {useOption} from "@react-aria/listbox";
 import {mergeProps} from "@react-aria/utils";
 import {useHover, usePress} from "@react-aria/interactions";
@@ -46,7 +46,7 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
     classNames,
     autoFocus,
     onPress,
-    onClick,
+    onClick: deprecatedOnClick,
     shouldHighlightOnFocus,
     hideSelectedIcon = false,
     isReadOnly = false,
@@ -68,6 +68,13 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
 
   const isMobile = useIsMobile();
 
+  if (deprecatedOnClick && typeof deprecatedOnClick === "function") {
+    warn(
+      "onClick is deprecated, please use onPress instead. See: https://github.com/nextui-org/nextui/issues/4292",
+      "ListboxItem",
+    );
+  }
+
   const {pressProps, isPressed} = usePress({
     ref: domRef,
     isDisabled: isDisabled,
@@ -120,7 +127,9 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
   const getItemProps: PropGetter = (props = {}) => ({
     ref: domRef,
     ...mergeProps(
-      {onClick},
+      {
+        onClick: deprecatedOnClick,
+      },
       itemProps,
       isReadOnly ? {} : mergeProps(focusProps, pressProps),
       hoverProps,

packages/components/listbox/stories/listbox.stories.tsx

@@ -174,7 +174,9 @@ const Template = ({color, variant, ...args}: ListboxProps) => (
     onAction={(key: Key) => alert(key)}
     {...args}
   >
-    <ListboxItem key="new">New file</ListboxItem>
+    <ListboxItem key="new" onClick={() => alert("[onClick] New file")}>
+      New file
+    </ListboxItem>
     <ListboxItem key="copy">Copy link</ListboxItem>
     <ListboxItem key="edit">Edit file</ListboxItem>
     <ListboxItem key="delete" className="text-danger" color="danger">

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

@@ -347,7 +347,9 @@ describe("Menu", () => {
   it("should menuItem classNames work", () => {
     const wrapper = render(
       <Menu>
-        <MenuItem classNames={{title: "test"}}>New file</MenuItem>
+        <MenuItem key="new" classNames={{title: "test"}}>
+          New file
+        </MenuItem>
       </Menu>,
     );
     const menuItem = wrapper.getByText("New file");
@@ -358,7 +360,9 @@ describe("Menu", () => {
   it("should menuItem classNames override menu itemClasses", () => {
     const wrapper = render(
       <Menu itemClasses={{title: "test"}}>
-        <MenuItem classNames={{title: "test2"}}>New file</MenuItem>
+        <MenuItem key="new" classNames={{title: "test2"}}>
+          New file
+        </MenuItem>
       </Menu>,
     );
     const menuItem = wrapper.getByText("New file");
@@ -368,8 +372,10 @@ describe("Menu", () => {
   it("should merge menu item classNames with itemClasses", () => {
     const wrapper = render(
       <Menu itemClasses={{title: "test"}}>
-        <MenuItem classNames={{title: "test2"}}>New file</MenuItem>
-        <MenuItem>Delete file</MenuItem>
+        <MenuItem key="new" classNames={{title: "test2"}}>
+          New file
+        </MenuItem>
+        <MenuItem key="delete">Delete file</MenuItem>
       </Menu>,
     );
 

packages/components/menu/package.json

@@ -45,7 +45,6 @@
     "@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.19.0",
     "@react-aria/interactions": "3.22.5",
     "@react-aria/menu": "3.16.0",

packages/components/menu/src/base/menu-item-base.tsx

@@ -3,7 +3,7 @@ import type {AriaMenuItemProps} from "@react-aria/menu";
 import type {FocusableProps, PressEvents} from "@react-types/shared";
 
 import {BaseItem, ItemProps} from "@nextui-org/aria-utils";
-import {ReactNode} from "react";
+import {MouseEventHandler, ReactNode} from "react";
 
 export type MenuItemSelectedIconProps = {
   /**
@@ -88,11 +88,18 @@ interface Props<T extends object = {}> extends Omit<ItemProps<"li", T>, "childre
   classNames?: SlotsToClasses<MenuItemSlots>;
 }
 
-export type MenuItemBaseProps<T extends object = {}> = Props<T> &
+export type MenuItemBaseProps<T extends object = {}> = Omit<Props<T>, "onClick"> &
   Omit<MenuItemVariantProps, "hasDescriptionTextChild" | "hasTitleTextChild"> &
   AriaMenuItemProps &
   FocusableProps &
-  PressEvents;
+  PressEvents & {
+    /**
+     * The native click event handler.
+     * use `onPress` instead.
+     * @deprecated
+     */
+    onClick?: MouseEventHandler<HTMLLIElement | HTMLAnchorElement>;
+  };
 
 const MenuItemBase = BaseItem as <T extends object>(props: MenuItemBaseProps<T>) => JSX.Element;
 

packages/components/menu/src/menu.tsx

@@ -24,7 +24,6 @@ const Menu = forwardRef(function Menu<T extends object>(
     hideEmptyContent,
     variant,
     onClose,
-    onAction,
     topContent,
     bottomContent,
     itemClasses,
@@ -49,7 +48,6 @@ const Menu = forwardRef(function Menu<T extends object>(
           state,
           variant,
           onClose,
-          onAction,
           hideSelectedIcon,
           ...item.props,
         };

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

@@ -1,6 +1,6 @@
 import type {MenuItemBaseProps} from "./base/menu-item-base";
 import type {MenuItemVariantProps} from "@nextui-org/theme";
-import type {Node} from "@react-types/shared";
+import type {Node, PressEvent} from "@react-types/shared";
 
 import {useMemo, useRef, useCallback} from "react";
 import {menuItem} from "@nextui-org/theme";
@@ -12,7 +12,7 @@ import {
 } from "@nextui-org/system";
 import {useFocusRing} from "@react-aria/focus";
 import {TreeState} from "@react-stately/tree";
-import {clsx, dataAttr, objectToDeps, removeEvents} from "@nextui-org/shared-utils";
+import {clsx, dataAttr, objectToDeps, removeEvents, warn} from "@nextui-org/shared-utils";
 import {useMenuItem as useAriaMenuItem} from "@react-aria/menu";
 import {isFocusVisible as AriaIsFocusVisible, useHover} from "@react-aria/interactions";
 import {mergeProps} from "@react-aria/utils";
@@ -59,6 +59,7 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
     isReadOnly = false,
     closeOnSelect,
     onClose,
+    onClick: deprecatedOnClick,
     ...otherProps
   } = props;
 
@@ -81,6 +82,21 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
     autoFocus,
   });
 
+  if (deprecatedOnClick && typeof deprecatedOnClick === "function") {
+    warn(
+      "onClick is deprecated, please use onPress instead. See: https://github.com/nextui-org/nextui/issues/4292",
+      "MenuItem",
+    );
+  }
+
+  const handlePress = useCallback(
+    (e: PressEvent) => {
+      deprecatedOnClick?.(e as unknown as React.MouseEvent<HTMLLIElement | HTMLAnchorElement>);
+      onPress?.(e);
+    },
+    [deprecatedOnClick, onPress],
+  );
+
   const {
     isPressed,
     isFocused,
@@ -95,7 +111,7 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
       key,
       onClose,
       isDisabled: isDisabledProp,
-      onPress,
+      onPress: handlePress,
       onPressStart,
       onPressUp,
       onPressEnd,

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

@@ -129,7 +129,7 @@ export function useMenu<T extends object>(props: UseMenuProps<T>) {
 
   const state = propState || innerState;
 
-  const {menuProps} = useAriaMenu({...otherProps, ...userMenuProps}, state, domRef);
+  const {menuProps} = useAriaMenu({...otherProps, ...userMenuProps, onAction}, state, domRef);
 
   const slots = useMemo(() => menu({className}), [className]);
   const baseStyles = clsx(classNames?.base, className);
@@ -169,7 +169,6 @@ export function useMenu<T extends object>(props: UseMenuProps<T>) {
     variant,
     color,
     disableAnimation,
-    onAction,
     onClose,
     topContent,
     bottomContent,

packages/components/menu/stories/menu.stories.tsx

@@ -45,7 +45,9 @@ const defaultProps = {
 
 const Template = ({color, variant, ...args}: MenuProps) => (
   <Menu aria-label="Actions" color={color} variant={variant} onAction={alert} {...args}>
-    <MenuItem key="new">New file</MenuItem>
+    <MenuItem key="new" onClick={() => alert("[onClick] New file")}>
+      New file
+    </MenuItem>
     <MenuItem key="copy">Copy link</MenuItem>
     <MenuItem key="edit">Edit file</MenuItem>
     <MenuItem key="delete" className="text-danger" color="danger">

packages/components/navbar/package.json

@@ -44,11 +44,11 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/framer-utils": "workspace:*",
-    "@nextui-org/use-aria-toggle-button": "workspace:*",
     "@nextui-org/use-scroll-position": "workspace:*",
     "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/focus": "3.19.0",
     "@react-aria/interactions": "3.22.5",
+    "@react-aria/button": "3.11.0",
     "@react-aria/overlays": "3.24.0",
     "@react-aria/utils": "3.26.0",
     "@react-stately/toggle": "3.8.0",

packages/components/navbar/src/navbar-menu-toggle.tsx

@@ -1,4 +1,4 @@
-import {AriaToggleButtonProps, useAriaToggleButton} from "@nextui-org/use-aria-toggle-button";
+import {AriaToggleButtonProps, useToggleButton as useAriaToggleButton} from "@react-aria/button";
 import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";

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

@@ -37,6 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
+    "@nextui-org/shared-utils": "workspace:*",
     "@react-aria/focus": "3.19.0",
     "@react-aria/interactions": "3.22.5",
     "@react-aria/utils": "3.26.0",

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

@@ -10,8 +10,9 @@ import {
   RefObject,
 } from "react";
 import {AriaButtonProps as BaseAriaButtonProps} from "@react-types/button";
-import {DOMAttributes} from "@react-types/shared";
-import {filterDOMProps, mergeProps} from "@react-aria/utils";
+import {DOMAttributes, PressEvent} from "@react-types/shared";
+import {warn} from "@nextui-org/shared-utils";
+import {filterDOMProps, isAndroid, isIOS, mergeProps} from "@react-aria/utils";
 import {useFocusable} from "@react-aria/focus";
 import {usePress} from "@react-aria/interactions";
 
@@ -92,7 +93,7 @@ export function useAriaButton(
     additionalProps = {
       role: "button",
       tabIndex: isDisabled ? undefined : 0,
-      href: elementType === "a" && isDisabled ? undefined : href,
+      href: elementType === "a" && !isDisabled ? href : undefined,
       target: elementType === "a" ? target : undefined,
       type: elementType === "input" ? type : undefined,
       disabled: elementType === "input" ? isDisabled : undefined,
@@ -101,11 +102,31 @@ export function useAriaButton(
     };
   }
 
+  let isMobile = isIOS() || isAndroid();
+
+  if (deprecatedOnClick && typeof deprecatedOnClick === "function") {
+    warn(
+      "onClick is deprecated, please use onPress instead. See: https://github.com/nextui-org/nextui/issues/4292",
+      "useButton",
+    );
+  }
+
+  const handlePress = (e: PressEvent) => {
+    // On mobile devices, we need to call onClick directly since react-aria's usePress hook
+    // only supports onPress events as of https://github.com/adobe/react-spectrum/commit/1d5def8a
+    // This ensures backwards compatibility for onClick handlers on mobile
+    // See: https://github.com/nextui-org/nextui/issues/4292
+    if (isMobile) {
+      deprecatedOnClick?.(e as unknown as React.MouseEvent<HTMLButtonElement>);
+    }
+    onPress?.(e);
+  };
+
   let {pressProps, isPressed} = usePress({
     onPressStart,
     onPressEnd,
     onPressChange,
-    onPress,
+    onPress: handlePress,
     isDisabled,
     preventFocusOnPress,
     allowTextSelectionOnPress,
@@ -131,6 +152,11 @@ export function useAriaButton(
       "aria-controls": props["aria-controls"],
       "aria-pressed": props["aria-pressed"],
       onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (type === "button" && isMobile) {
+          // Avoid firing onClick event twice since it's handled in handlePress
+          return;
+        }
+
         deprecatedOnClick?.(e);
       },
     }),

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

@@ -37,6 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
+    "@nextui-org/shared-utils": "workspace:*",
     "@react-aria/focus": "3.19.0",
     "@react-aria/interactions": "3.22.5",
     "@react-aria/utils": "3.26.0",

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

@@ -1,13 +1,16 @@
 import {AriaLinkProps} from "@react-types/link";
-import {DOMAttributes, FocusableElement} from "@react-types/shared";
+import {DOMAttributes, FocusableElement, PressEvent} from "@react-types/shared";
 import {
   filterDOMProps,
   mergeProps,
   useRouter,
   shouldClientNavigate,
   useLinkProps,
+  isAndroid,
+  isIOS,
 } from "@react-aria/utils";
 import {RefObject} from "react";
+import {warn} from "@nextui-org/shared-utils";
 import {useFocusable} from "@react-aria/focus";
 import {usePress} from "@react-aria/interactions";
 
@@ -55,8 +58,35 @@ export function useAriaLink(props: AriaLinkOptions, ref: RefObject<FocusableElem
       tabIndex: !isDisabled ? 0 : undefined,
     };
   }
+
+  let isMobile = isIOS() || isAndroid();
+
+  if (deprecatedOnClick && typeof deprecatedOnClick === "function") {
+    warn(
+      "onClick is deprecated, please use onPress instead. See: https://github.com/nextui-org/nextui/issues/4292",
+      "useLink",
+    );
+  }
+
+  const handlePress = (e: PressEvent) => {
+    // On mobile devices, we need to call onClick directly since react-aria's usePress hook
+    // only supports onPress events as of https://github.com/adobe/react-spectrum/commit/1d5def8a
+    // This ensures backwards compatibility for onClick handlers on mobile
+    // See: https://github.com/nextui-org/nextui/issues/4292
+    if (isMobile) {
+      deprecatedOnClick?.(e as unknown as React.MouseEvent<HTMLAnchorElement>);
+    }
+    onPress?.(e);
+  };
+
   let {focusableProps} = useFocusable(props, ref);
-  let {pressProps, isPressed} = usePress({onPress, onPressStart, onPressEnd, isDisabled, ref});
+  let {pressProps, isPressed} = usePress({
+    onPress: handlePress,
+    onPressStart,
+    onPressEnd,
+    isDisabled,
+    ref,
+  });
   let domProps = filterDOMProps(otherProps, {labelable: true, isLink: elementType === "a"});
   let interactionHandlers = mergeProps(focusableProps, pressProps);
   let router = useRouter();
@@ -71,7 +101,9 @@ export function useAriaLink(props: AriaLinkOptions, ref: RefObject<FocusableElem
       "aria-current": props["aria-current"],
       onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
         pressProps.onClick?.(e);
-        if (deprecatedOnClick) {
+
+        // The `isMobile` check is to avoid firing onClick event twice since it's handled in handlePress
+        if (!isMobile && deprecatedOnClick) {
           deprecatedOnClick(e);
         }
 

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

@@ -1,145 +0,0 @@
-# @nextui-org/use-aria-menu
-
-## 2.2.2
-
-### Patch Changes
-
-- [#4258](https://github.com/nextui-org/nextui/pull/4258) [`1031e98`](https://github.com/nextui-org/nextui/commit/1031e985b71e69b8a7189ea049b9616257f820b3) Thanks [@wingkwong](https://github.com/wingkwong)! - sync with upstream RA versions
-
-## 2.2.1
-
-### Patch Changes
-
-- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
-
-## 2.2.0
-
-### Minor Changes
-
-- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
-
-  - Updated react-aria version across all components
-  - Improved Drawer styles and transitions
-  - Fixed missing peer dependencies for framer-motion
-  - Fixed menu item classNames functionality
-  - Added isClearable prop to Textarea component
-  - Fixed label placement issues in Input and Select components
-  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
-  - Fixed UI sliding issues with helper wrapper in Input and Select
-  - Updated use-image hook to avoid Next.js hydration issues
-  - Replaced RTL-specific styles with logical properties
-  - Fixed textarea label squish issue
-  - Bumped tailwind-merge version
-  - Applied tw nested group fixes
-  - Fixed fullWidth variant in input and select components
-  - Moved circular-progress tv to progress
-  - Changed ListboxItem key to optional
-  - Fixed autocomplete clear button behavior
-  - Updated Select label placement logic
-  - Added missing framer-motion peer dependencies
-  - Removed layoutNode prop from Table due to react-aria update
-  - Virtualization added to Autocomplete
-
-### Patch Changes
-
-- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
-
-## 2.1.0-beta.8
-
-### Patch Changes
-
-- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
-
-## 2.1.0-beta.7
-
-### Patch Changes
-
-- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
-
-## 2.1.0-beta.6
-
-### Patch Changes
-
-- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
-
-## 2.1.0-beta.5
-
-### Patch Changes
-
-- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
-
-## 2.1.0-beta.4
-
-### Patch Changes
-
-- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
-
-## 2.1.0-beta.3
-
-### Patch Changes
-
-- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
-
-## 2.1.0-beta.2
-
-### Patch Changes
-
-- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
-
-## 2.1.0-beta.1
-
-### Patch Changes
-
-- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
-
-## 2.1.0-beta.0
-
-### Minor Changes
-
-- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
-
-## 2.0.7
-
-### Patch Changes
-
-- [#3762](https://github.com/nextui-org/nextui/pull/3762) [`8fecb5afa`](https://github.com/nextui-org/nextui/commit/8fecb5afa9aabe73e32243ca313f97856da8aa08) Thanks [@wingkwong](https://github.com/wingkwong)! - fixed `_a2.find` is not a function (#3761)
-
-## 2.0.6
-
-### Patch Changes
-
-- [#3512](https://github.com/nextui-org/nextui/pull/3512) [`2d2d300a1`](https://github.com/nextui-org/nextui/commit/2d2d300a12dbe20ca7ebd125daf3dce74efcbf34) Thanks [@wingkwong](https://github.com/wingkwong)! - fix conflicting versions in npm
-
-## 2.0.5
-
-### Patch Changes
-
-- [#3229](https://github.com/nextui-org/nextui/pull/3229) [`5b9e317a8`](https://github.com/nextui-org/nextui/commit/5b9e317a80dacad09a3fc3c5b762729cd10b2bb3) Thanks [@wingkwong](https://github.com/wingkwong)! - fix link logic in useMenuItem (#2935)
-
-- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
-
-## 2.0.4
-
-### Patch Changes
-
-- [#3119](https://github.com/nextui-org/nextui/pull/3119) [`685995a12`](https://github.com/nextui-org/nextui/commit/685995a125cc3db26c6adb67ed9f7245b87e792a) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version to `3.24.1` and bump `@react-types/shared` to `3.23.1`
-
-- [#3119](https://github.com/nextui-org/nextui/pull/3119) [`685995a12`](https://github.com/nextui-org/nextui/commit/685995a125cc3db26c6adb67ed9f7245b87e792a) Thanks [@wingkwong](https://github.com/wingkwong)! - Add missing router.open parameters due to router change
-
-## 2.0.3
-
-### Patch Changes
-
-- [#3064](https://github.com/nextui-org/nextui/pull/3064) [`f24a97311`](https://github.com/nextui-org/nextui/commit/f24a97311ab4dd16dafb56d35fe7c6db81798129) Thanks [@Gaic4o](https://github.com/Gaic4o)! - Fixed a type error in the onKeyDown event handler for the menu component
-
-## 2.0.2
-
-### Patch Changes
-
-- [#2862](https://github.com/nextui-org/nextui/pull/2862) [`b8e6b2fe2`](https://github.com/nextui-org/nextui/commit/b8e6b2fe25bbbf52f656bbcac52fc00714f464bc) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Add react-dom as peerDependency to user-aria-menu hook
-
-## 2.0.1
-
-### Patch Changes
-
-- [#2746](https://github.com/nextui-org/nextui/pull/2746) [`6b56e43a3`](https://github.com/nextui-org/nextui/commit/6b56e43a350d045c36eb9983c7f48ba61db7cdd2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix #2743 #2751 internal react-aria use-menu hooks implemented to pass down the press events and control the pressUp one

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

@@ -1,24 +0,0 @@
-# @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

@@ -1,64 +0,0 @@
-{
-  "name": "@nextui-org/use-aria-menu",
-  "version": "2.2.2",
-  "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 || >=19.0.0-rc.0",
-    "react-dom": ">=18 || >=19.0.0-rc.0"
-  },
-  "dependencies": {
-    "@react-aria/utils": "3.26.0",
-    "@react-types/shared": "3.26.0",
-    "@react-aria/menu": "3.16.0",
-    "@react-aria/interactions": "3.22.5",
-    "@react-stately/tree": "3.8.6",
-    "@react-aria/i18n": "3.12.4",
-    "@react-aria/selection": "3.21.0",
-    "@react-stately/collections": "3.12.0",
-    "@react-types/menu": "3.9.13"
-  },
-  "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

@@ -1,5 +0,0 @@
-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";

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

@@ -1,369 +0,0 @@
-import {
-  DOMAttributes,
-  DOMProps,
-  FocusableElement,
-  FocusEvents,
-  HoverEvents,
-  Key,
-  KeyboardEvents,
-  PressEvent,
-  PressEvents,
-  RouterOptions,
-} from "@react-types/shared";
-import {
-  chain,
-  filterDOMProps,
-  mergeProps,
-  useLinkProps,
-  useRouter,
-  useSlotId,
-} from "@react-aria/utils";
-import {getItemCount} from "@react-stately/collections";
-import {isFocusVisible, useFocus, useHover, useKeyboard, usePress} from "@react-aria/interactions";
-import {RefObject} from "react";
-import {TreeState} from "@react-stately/tree";
-import {useSelectableItem} from "@react-aria/selection";
-
-import {menuData} from "./use-menu";
-
-export interface MenuItemAria {
-  /** Props for the menu item element. */
-  menuItemProps: DOMAttributes;
-
-  /** Props for the main text element inside the menu item. */
-  labelProps: DOMAttributes;
-
-  /** Props for the description text element inside the menu item, if any. */
-  descriptionProps: DOMAttributes;
-
-  /** Props for the keyboard shortcut text element inside the item, if any. */
-  keyboardShortcutProps: DOMAttributes;
-
-  /** Whether the item is currently hovered. */
-  isHovered: boolean;
-  /** Whether the item is currently focused. */
-  isFocused: boolean;
-  /** Whether the item is currently selected. */
-  isSelected: boolean;
-  /** Whether the item is currently in a pressed state. */
-  isPressed: boolean;
-  /** Whether the item is disabled. */
-  isDisabled: boolean;
-}
-
-export interface AriaMenuItemProps
-  extends DOMProps,
-    PressEvents,
-    HoverEvents,
-    KeyboardEvents,
-    FocusEvents {
-  /**
-   * Whether the menu item is disabled.
-   * @deprecated - pass disabledKeys to useTreeState instead.
-   */
-  isDisabled?: boolean;
-
-  /**
-   * Whether the menu item is selected.
-   * @deprecated - pass selectedKeys to useTreeState instead.
-   */
-  isSelected?: boolean;
-
-  /** A screen reader only label for the menu item. */
-  "aria-label"?: string;
-
-  /** The unique key for the menu item. */
-  key?: Key;
-
-  /**
-   * Handler that is called when the menu should close after selecting an item.
-   * @deprecated - pass to the menu instead.
-   */
-  onClose?: () => void;
-
-  /**
-   * Whether the menu should close when the menu item is selected.
-   * @default true
-   */
-  closeOnSelect?: boolean;
-
-  /** Whether the menu item is contained in a virtual scrolling menu. */
-  isVirtualized?: boolean;
-
-  /**
-   * Handler that is called when the user activates the item.
-   * @deprecated - pass to the menu instead.
-   */
-  onAction?: (key: Key, item: any) => void;
-
-  /**
-   * The native button click event handler
-   * @deprecated - use `onAction` instead.
-   */
-  onClick?: DOMAttributes["onClick"];
-
-  /** What kind of popup the item opens. */
-  "aria-haspopup"?: "menu" | "dialog";
-
-  /** Indicates whether the menu item's popup element is expanded or collapsed. */
-  "aria-expanded"?: boolean | "true" | "false";
-
-  /** Identifies the menu item's popup element whose contents or presence is controlled by the menu item. */
-  "aria-controls"?: string;
-}
-
-/**
- * Provides the behavior and accessibility implementation for an item in a menu.
- * See `useMenu` for more details about menus.
- * @param props - Props for the item.
- * @param state - State for the menu, as returned by `useTreeState`.
- */
-export function useMenuItem<T>(
-  props: AriaMenuItemProps,
-  state: TreeState<T>,
-  ref: RefObject<FocusableElement>,
-): MenuItemAria {
-  let {
-    key,
-    closeOnSelect,
-    isVirtualized,
-    "aria-haspopup": hasPopup,
-    onPressStart: pressStartProp,
-    onPressUp: pressUpProp,
-    onPress,
-    onPressChange,
-    onPressEnd,
-    onHoverStart: hoverStartProp,
-    onHoverChange,
-    onHoverEnd,
-    onKeyDown,
-    onKeyUp,
-    onFocus,
-    onFocusChange,
-    onBlur,
-    onClick,
-  } = props;
-
-  let isTrigger = !!hasPopup;
-  // @ts-ignore
-  let isDisabled = props.isDisabled ?? state.selectionManager.isDisabled(key);
-  // @ts-ignore
-  let isSelected = props.isSelected ?? state.selectionManager.isSelected(key);
-  let data = menuData.get(state);
-  // @ts-ignore
-  let item = state.collection.getItem(key);
-  // @ts-ignore
-  let onClose = props.onClose || data.onClose;
-  // @ts-ignore
-  let router = useRouter();
-  let performAction = (e: PressEvent) => {
-    if (isTrigger) {
-      return;
-    }
-
-    if (item?.props?.onAction) {
-      item.props.onAction();
-    }
-
-    if (props.onAction) {
-      // @ts-ignore
-      props.onAction(key, item);
-      // @ts-ignore
-    } else if (data.onAction) {
-      // @ts-ignore
-      data.onAction(key, item);
-    }
-
-    if (e.target instanceof HTMLAnchorElement) {
-      // @ts-ignore
-      router.open(e.target, e, item.props.href, item.props.routerOptions as RouterOptions);
-    }
-  };
-
-  let role = "menuitem";
-
-  if (!isTrigger) {
-    if (state.selectionManager.selectionMode === "single") {
-      role = "menuitemradio";
-    } else if (state.selectionManager.selectionMode === "multiple") {
-      role = "menuitemcheckbox";
-    }
-  }
-
-  let labelId = useSlotId();
-  let descriptionId = useSlotId();
-  let keyboardId = useSlotId();
-
-  let ariaProps = {
-    "aria-disabled": isDisabled || undefined,
-    role,
-    "aria-label": props["aria-label"],
-    "aria-labelledby": labelId,
-    "aria-describedby": [descriptionId, keyboardId].filter(Boolean).join(" ") || undefined,
-    "aria-controls": props["aria-controls"],
-    "aria-haspopup": hasPopup,
-    "aria-expanded": props["aria-expanded"],
-  };
-
-  if (state.selectionManager.selectionMode !== "none" && !isTrigger) {
-    // @ts-ignore
-    ariaProps["aria-checked"] = isSelected;
-  }
-
-  if (isVirtualized) {
-    // @ts-ignore
-    ariaProps["aria-posinset"] = item?.index;
-    // @ts-ignore
-    ariaProps["aria-setsize"] = getItemCount(state.collection);
-  }
-
-  let onPressStart = (e: PressEvent) => {
-    if (e.pointerType === "keyboard") {
-      performAction(e);
-    }
-
-    pressStartProp?.(e);
-  };
-
-  let onPressUp = (e: PressEvent) => {
-    if (e.pointerType !== "keyboard") {
-      setTimeout(() => {
-        performAction(e);
-      });
-      // // Pressing a menu item should close by default in single selection mode but not multiple
-      // // selection mode, except if overridden by the closeOnSelect prop.
-      if (
-        !isTrigger &&
-        onClose &&
-        (closeOnSelect ??
-          (state.selectionManager.selectionMode !== "multiple" ||
-            // @ts-ignore
-            state.selectionManager.isLink(key)))
-      ) {
-        setTimeout(() => {
-          onClose?.();
-        });
-      }
-    }
-
-    pressUpProp?.(e);
-  };
-
-  let {itemProps, isFocused} = useSelectableItem({
-    selectionManager: state.selectionManager,
-    // @ts-ignore
-    key,
-    ref,
-    shouldSelectOnPressUp: true,
-    allowsDifferentPressOrigin: true,
-    // Disable all handling of links in useSelectable item
-    // because we handle it ourselves. The behavior of menus
-    // is slightly different from other collections because
-    // actions are performed on key down rather than key up.
-    linkBehavior: "none",
-  });
-
-  let {pressProps, isPressed} = usePress({
-    onPressStart,
-    onPress,
-    onPressUp,
-    onPressChange,
-    onPressEnd,
-    isDisabled,
-  });
-
-  let {isHovered, hoverProps} = useHover({
-    isDisabled,
-    onHoverStart(e) {
-      if (!isFocusVisible()) {
-        state.selectionManager.setFocused(true);
-        // @ts-ignore
-        state.selectionManager.setFocusedKey(key);
-      }
-      hoverStartProp?.(e);
-    },
-    onHoverChange,
-    onHoverEnd,
-  });
-
-  let {keyboardProps} = useKeyboard({
-    onKeyDown: (e) => {
-      // Ignore repeating events, which may have started on the menu trigger before moving
-      // focus to the menu item. We want to wait for a second complete key press sequence.
-      if (e.repeat) {
-        e.continuePropagation();
-
-        return;
-      }
-
-      switch (e.key) {
-        case " ":
-          if (
-            !isDisabled &&
-            state.selectionManager.selectionMode === "none" &&
-            !isTrigger &&
-            closeOnSelect !== false &&
-            onClose
-          ) {
-            onClose();
-          }
-          break;
-        case "Enter":
-          // The Enter key should always close on select, except if overridden.
-          if (!isDisabled && closeOnSelect !== false && !isTrigger && onClose) {
-            onClose();
-          }
-          break;
-        default:
-          if (!isTrigger) {
-            e.continuePropagation();
-          }
-
-          onKeyDown?.(e);
-          break;
-      }
-    },
-    onKeyUp,
-  });
-
-  let {focusProps} = useFocus({onBlur, onFocus, onFocusChange});
-  // @ts-ignore
-  let domProps = filterDOMProps(item.props);
-
-  delete domProps.id;
-  // @ts-ignore
-  let linkProps = useLinkProps(item.props);
-
-  return {
-    menuItemProps: {
-      ...ariaProps,
-      ...mergeProps(
-        domProps,
-        linkProps,
-        isTrigger ? {onFocus: itemProps.onFocus} : itemProps,
-        pressProps,
-        hoverProps,
-        keyboardProps,
-        focusProps,
-        {
-          onClick: chain(onClick, pressProps.onClick),
-        },
-      ),
-      tabIndex: itemProps.tabIndex != null ? -1 : undefined,
-    },
-    labelProps: {
-      id: labelId,
-    },
-    descriptionProps: {
-      id: descriptionId,
-    },
-    keyboardShortcutProps: {
-      id: keyboardId,
-    },
-    isHovered,
-    isFocused,
-    isSelected,
-    isPressed,
-    isDisabled,
-  };
-}

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

@@ -1,83 +0,0 @@
-/* eslint-disable no-console */
-import {AriaMenuProps} from "@react-types/menu";
-import {DOMAttributes, Key, KeyboardDelegate, KeyboardEvents} from "@react-types/shared";
-import {filterDOMProps, mergeProps} from "@react-aria/utils";
-import {RefObject, KeyboardEvent as ReactKeyboardEvent} from "react";
-import {TreeState} from "@react-stately/tree";
-import {useSelectableList} from "@react-aria/selection";
-
-export interface MenuAria {
-  /** Props for the menu element. */
-  menuProps: DOMAttributes;
-}
-
-export interface AriaMenuOptions<T> extends Omit<AriaMenuProps<T>, "children">, KeyboardEvents {
-  /** Whether the menu uses virtual scrolling. */
-  isVirtualized?: boolean;
-
-  /**
-   * An optional keyboard delegate implementation for type to select,
-   * to override the default.
-   */
-  keyboardDelegate?: KeyboardDelegate;
-}
-
-interface MenuData {
-  onClose?: () => void;
-  onAction?: (key: Key, item: any) => void;
-}
-
-export const menuData = new WeakMap<TreeState<unknown>, MenuData>();
-
-/**
- * Provides the behavior and accessibility implementation for a menu component.
- * A menu displays a list of actions or options that a user can choose.
- * @param props - Props for the menu.
- * @param state - State for the menu, as returned by `useListState`.
- */
-export function useMenu<T>(
-  props: AriaMenuOptions<T>,
-  state: TreeState<T>,
-  ref: RefObject<HTMLElement>,
-): MenuAria {
-  let {shouldFocusWrap = true, onKeyDown, onKeyUp, ...otherProps} = props;
-
-  if (!props["aria-label"] && !props["aria-labelledby"]) {
-    console.warn("An aria-label or aria-labelledby prop is required for accessibility.");
-  }
-
-  let domProps = filterDOMProps(props, {labelable: true});
-  let {listProps} = useSelectableList({
-    ...otherProps,
-    ref,
-    selectionManager: state.selectionManager,
-    collection: state.collection,
-    disabledKeys: state.disabledKeys,
-    shouldFocusWrap,
-    linkBehavior: "override",
-  });
-
-  menuData.set(state, {
-    onClose: props.onClose,
-    onAction: props.onAction,
-  });
-
-  return {
-    menuProps: mergeProps(
-      domProps,
-      {onKeyDown, onKeyUp},
-      {
-        role: "menu",
-        ...listProps,
-        onKeyDown: (event: ReactKeyboardEvent<HTMLElement>) => {
-          // don't clear the menu selected keys if the user is presses escape since escape closes the menu
-          if (event.key !== "Escape") {
-            if (listProps.onKeyDown) {
-              listProps.onKeyDown(event);
-            }
-          }
-        },
-      },
-    ),
-  };
-}

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

@@ -1,4 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "include": ["src", "index.ts"]
-}

packages/hooks/use-aria-modal-overlay/src/index.ts

@@ -12,6 +12,14 @@ import {RefObject, useEffect} from "react";
 
 export interface UseAriaModalOverlayProps extends AriaModalOverlayProps {}
 
+/**
+ * Provides the behavior and accessibility implementation for a modal component.
+ * A modal is an overlay element which blocks interaction with elements outside it.
+ *
+ * This is a modified version from https://vscode.dev/github/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/useModalOverlay.ts#L46
+ *
+ * This implementation disables the prevent scroll when `shouldBlockScroll` prop is false.
+ */
 export function useAriaModalOverlay(
   props: UseAriaModalOverlayProps & {
     shouldBlockScroll?: boolean;

packages/hooks/use-aria-toggle-button/CHANGELOG.md

@@ -1,240 +0,0 @@
-# @nextui-org/use-aria-toggle-button
-
-## 2.2.2
-
-### Patch Changes
-
-- [#4258](https://github.com/nextui-org/nextui/pull/4258) [`1031e98`](https://github.com/nextui-org/nextui/commit/1031e985b71e69b8a7189ea049b9616257f820b3) Thanks [@wingkwong](https://github.com/wingkwong)! - sync with upstream RA versions
-
-- Updated dependencies [[`1031e98`](https://github.com/nextui-org/nextui/commit/1031e985b71e69b8a7189ea049b9616257f820b3)]:
-  - @nextui-org/use-aria-button@2.2.2
-
-## 2.2.1
-
-### Patch Changes
-
-- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
-
-- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
-  - @nextui-org/use-aria-button@2.2.1
-
-## 2.2.0
-
-### Minor Changes
-
-- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
-
-  - Updated react-aria version across all components
-  - Improved Drawer styles and transitions
-  - Fixed missing peer dependencies for framer-motion
-  - Fixed menu item classNames functionality
-  - Added isClearable prop to Textarea component
-  - Fixed label placement issues in Input and Select components
-  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
-  - Fixed UI sliding issues with helper wrapper in Input and Select
-  - Updated use-image hook to avoid Next.js hydration issues
-  - Replaced RTL-specific styles with logical properties
-  - Fixed textarea label squish issue
-  - Bumped tailwind-merge version
-  - Applied tw nested group fixes
-  - Fixed fullWidth variant in input and select components
-  - Moved circular-progress tv to progress
-  - Changed ListboxItem key to optional
-  - Fixed autocomplete clear button behavior
-  - Updated Select label placement logic
-  - Added missing framer-motion peer dependencies
-  - Removed layoutNode prop from Table due to react-aria update
-  - Virtualization added to Autocomplete
-
-### Patch Changes
-
-- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
-
-- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
-  - @nextui-org/use-aria-button@2.2.0
-
-## 2.1.0-beta.8
-
-### Patch Changes
-
-- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
-
-- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
-  - @nextui-org/use-aria-button@2.1.0-beta.8
-
-## 2.1.0-beta.7
-
-### Patch Changes
-
-- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
-
-- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
-  - @nextui-org/use-aria-button@2.1.0-beta.7
-
-## 2.1.0-beta.6
-
-### Patch Changes
-
-- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
-
-- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
-  - @nextui-org/use-aria-button@2.1.0-beta.6
-
-## 2.1.0-beta.5
-
-### Patch Changes
-
-- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
-
-- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
-  - @nextui-org/use-aria-button@2.1.0-beta.5
-
-## 2.1.0-beta.4
-
-### Patch Changes
-
-- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
-
-- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
-  - @nextui-org/use-aria-button@2.1.0-beta.4
-
-## 2.1.0-beta.3
-
-### Patch Changes
-
-- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
-
-- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
-  - @nextui-org/use-aria-button@2.1.0-beta.3
-
-## 2.1.0-beta.2
-
-### Patch Changes
-
-- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
-
-- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
-  - @nextui-org/use-aria-button@2.1.0-beta.2
-
-## 2.1.0-beta.1
-
-### Patch Changes
-
-- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
-
-- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
-  - @nextui-org/use-aria-button@2.1.0-beta.1
-
-## 2.1.0-beta.0
-
-### Minor Changes
-
-- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
-
-### Patch Changes
-
-- Updated dependencies [[`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d)]:
-  - @nextui-org/use-aria-button@2.1.0-beta.0
-
-## 2.0.10
-
-### Patch Changes
-
-- [#3512](https://github.com/nextui-org/nextui/pull/3512) [`2d2d300a1`](https://github.com/nextui-org/nextui/commit/2d2d300a12dbe20ca7ebd125daf3dce74efcbf34) Thanks [@wingkwong](https://github.com/wingkwong)! - fix conflicting versions in npm
-
-- Updated dependencies [[`2d2d300a1`](https://github.com/nextui-org/nextui/commit/2d2d300a12dbe20ca7ebd125daf3dce74efcbf34)]:
-  - @nextui-org/use-aria-button@2.0.10
-
-## 2.0.9
-
-### Patch Changes
-
-- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
-
-- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b)]:
-  - @nextui-org/use-aria-button@2.0.9
-
-## 2.0.8
-
-### Patch Changes
-
-- [#3119](https://github.com/nextui-org/nextui/pull/3119) [`685995a12`](https://github.com/nextui-org/nextui/commit/685995a125cc3db26c6adb67ed9f7245b87e792a) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version to `3.24.1` and bump `@react-types/shared` to `3.23.1`
-
-- Updated dependencies [[`685995a12`](https://github.com/nextui-org/nextui/commit/685995a125cc3db26c6adb67ed9f7245b87e792a)]:
-  - @nextui-org/use-aria-button@2.0.8
-
-## 2.0.7
-
-### Patch Changes
-
-- [#2618](https://github.com/nextui-org/nextui/pull/2618) [`dc0bcf13a`](https://github.com/nextui-org/nextui/commit/dc0bcf13a5e9aa0450938bcca47cd4c696066f14) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.3.0
-
-- [#2618](https://github.com/nextui-org/nextui/pull/2618) [`dc0bcf13a`](https://github.com/nextui-org/nextui/commit/dc0bcf13a5e9aa0450938bcca47cd4c696066f14) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - - Calendar component added
-  - objectToDeps function applied all across components
-  - `useMeasure` hook added
-  - `useIntersectionObserver` hook added
-  - `framer-transitions` renamed to `framer-utils`
-  - `ResizablePanel` component added to `framer-utils`
-  - `test-utils` updated
-- Updated dependencies [[`dc0bcf13a`](https://github.com/nextui-org/nextui/commit/dc0bcf13a5e9aa0450938bcca47cd4c696066f14), [`dc0bcf13a`](https://github.com/nextui-org/nextui/commit/dc0bcf13a5e9aa0450938bcca47cd4c696066f14)]:
-  - @nextui-org/use-aria-button@2.0.7
-
-## 2.0.6
-
-### Patch Changes
-
-- [`25e86fb41`](https://github.com/nextui-org/nextui/commit/25e86fb41770d3cdae6dfdb79306b78fa02d8187) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - New version v2.2.0
-
-- Updated dependencies [[`25e86fb41`](https://github.com/nextui-org/nextui/commit/25e86fb41770d3cdae6dfdb79306b78fa02d8187)]:
-  - @nextui-org/use-aria-button@2.0.6
-
-## 2.0.5
-
-### Patch Changes
-
-- [#1600](https://github.com/nextui-org/nextui/pull/1600) [`b1b30b797`](https://github.com/nextui-org/nextui/commit/b1b30b7976f1d6652808fbf12ffde044f0861572) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix npm deploy
-
-- Updated dependencies [[`b1b30b797`](https://github.com/nextui-org/nextui/commit/b1b30b7976f1d6652808fbf12ffde044f0861572)]:
-  - @nextui-org/use-aria-button@2.0.5
-
-## 2.0.4
-
-### Patch Changes
-
-- [#1589](https://github.com/nextui-org/nextui/pull/1589) [`1612532ee`](https://github.com/nextui-org/nextui/commit/1612532eeeabbc49165546b1a2e7aebf89e7a1c2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React aria packages upgraded
-
-- Updated dependencies [[`1612532ee`](https://github.com/nextui-org/nextui/commit/1612532eeeabbc49165546b1a2e7aebf89e7a1c2)]:
-  - @nextui-org/use-aria-button@2.0.4
-
-## 2.0.3
-
-### Patch Changes
-
-- [#1359](https://github.com/nextui-org/nextui/pull/1359) [`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - \n
-
-  - react-aria packages upgraded to the latest version
-  - image storybooks fixed
-  - other bug fixes..
-
-- Updated dependencies [[`a30cec48`](https://github.com/nextui-org/nextui/commit/a30cec4810988fb1962f3a61e0fc0362de08b171)]:
-  - @nextui-org/use-aria-button@2.0.3
-
-## 2.0.2
-
-### Patch Changes
-
-- [`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - New package created to exports system RSC-compatible functions
-  Component exports changed to named exports
-- Updated dependencies [[`e3e13a09`](https://github.com/nextui-org/nextui/commit/e3e13a095f2347ff279c85e6a5d3798f36c6533f)]:
-  - @nextui-org/use-aria-button@2.0.2
-
-## 2.0.1
-
-### Patch Changes
-
-- [`e940ec06`](https://github.com/nextui-org/nextui/commit/e940ec06ac5e46340d5956fb7c455a6ab3de3140) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Introducing NextUI v2.0
-
-- [`e940ec06`](https://github.com/nextui-org/nextui/commit/e940ec06ac5e46340d5956fb7c455a6ab3de3140) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Introducing v2 - Readmes updated
-
-- Updated dependencies [[`e940ec06`](https://github.com/nextui-org/nextui/commit/e940ec06ac5e46340d5956fb7c455a6ab3de3140), [`e940ec06`](https://github.com/nextui-org/nextui/commit/e940ec06ac5e46340d5956fb7c455a6ab3de3140)]:
-  - @nextui-org/use-aria-button@2.0.1

packages/hooks/use-aria-toggle-button/README.md

@@ -1,24 +0,0 @@
-# @nextui-org/use-aria-toggle-button
-
-A Quick description of the component
-
-> This is an internal utility, not intended for public usage.
-
-## Installation
-
-```sh
-yarn add @nextui-org/use-aria-toggle-button
-# or
-npm i @nextui-org/use-aria-toggle-button
-```
-
-## 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-toggle-button/package.json

@@ -1,59 +0,0 @@
-{
-  "name": "@nextui-org/use-aria-toggle-button",
-  "version": "2.2.2",
-  "description": "Internal hook to handle button a11y and events, this is based on react-aria button hook but without the onClick warning",
-  "keywords": [
-    "use-aria-toggle-button"
-  ],
-  "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-toggle-button"
-  },
-  "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 || >=19.0.0-rc.0"
-  },
-  "dependencies": {
-    "@nextui-org/use-aria-button": "workspace:*",
-    "@react-aria/utils": "3.26.0",
-    "@react-stately/toggle": "3.8.0",
-    "@react-types/button": "3.10.1",
-    "@react-types/shared": "3.26.0"
-  },
-  "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-toggle-button/src/index.ts

@@ -1,85 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  ElementType,
-  HTMLAttributes,
-  InputHTMLAttributes,
-  RefObject,
-} from "react";
-import {AriaToggleButtonProps} from "@react-types/button";
-import {chain} from "@react-aria/utils";
-import {DOMAttributes} from "@react-types/shared";
-import {mergeProps} from "@react-aria/utils";
-import {ToggleState} from "@react-stately/toggle";
-import {ButtonAria, useAriaButton} from "@nextui-org/use-aria-button";
-
-export type {AriaToggleButtonProps};
-
-// Order with overrides is important: 'button' should be default
-export function useAriaToggleButton(
-  props: AriaToggleButtonProps<"button">,
-  state: ToggleState,
-  ref: RefObject<HTMLButtonElement>,
-): ButtonAria<ButtonHTMLAttributes<HTMLButtonElement>>;
-export function useAriaToggleButton(
-  props: AriaToggleButtonProps<"a">,
-  state: ToggleState,
-  ref: RefObject<HTMLAnchorElement>,
-): ButtonAria<AnchorHTMLAttributes<HTMLAnchorElement>>;
-export function useAriaToggleButton(
-  props: AriaToggleButtonProps<"div">,
-  state: ToggleState,
-  ref: RefObject<HTMLDivElement>,
-): ButtonAria<HTMLAttributes<HTMLDivElement>>;
-export function useAriaToggleButton(
-  props: AriaToggleButtonProps<"input">,
-  state: ToggleState,
-  ref: RefObject<HTMLInputElement>,
-): ButtonAria<InputHTMLAttributes<HTMLInputElement>>;
-export function useAriaToggleButton(
-  props: AriaToggleButtonProps<"span">,
-  state: ToggleState,
-  ref: RefObject<HTMLSpanElement>,
-): ButtonAria<HTMLAttributes<HTMLSpanElement>>;
-export function useAriaToggleButton(
-  props: AriaToggleButtonProps<ElementType>,
-  state: ToggleState,
-  ref: RefObject<Element>,
-): ButtonAria<DOMAttributes>;
-/**
- * Provides the behavior and accessibility implementation for a toggle button component.
- * ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes.
- */
-export function useAriaToggleButton(
-  props: AriaToggleButtonProps<ElementType>,
-  state: ToggleState,
-  ref: RefObject<any>,
-): ButtonAria<HTMLAttributes<any>> {
-  const {isSelected} = state;
-  const {isPressed, buttonProps} = useAriaButton(
-    {
-      ...props,
-      onPress: chain(state.toggle, props.onPress),
-    },
-    ref,
-  );
-
-  return {
-    isPressed,
-    buttonProps: mergeProps(buttonProps, {
-      "aria-pressed": isSelected,
-    }),
-  };
-}

packages/hooks/use-aria-toggle-button/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "include": ["src", "index.ts"]
-}

packages/utilities/aria-utils/src/overlays/ariaHideOutside.ts

@@ -5,7 +5,13 @@
 // Keeps a ref count of all hidden elements. Added to when hiding an element, and
 // subtracted from when showing it again. When it reaches zero, aria-hidden is removed.
 let refCountMap = new WeakMap<Element, number>();
-let observerStack: any = [];
+
+interface ObserverWrapper {
+  observe: () => void;
+  disconnect: () => void;
+}
+
+let observerStack: Array<ObserverWrapper> = [];
 
 /**
  * Hides all elements in the DOM outside the given targets from screen readers using aria-hidden,
@@ -29,15 +35,15 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
     }
 
     let acceptNode = (node: Element) => {
-      const parentElement = node.parentElement as HTMLElement;
-
       // Skip this node and its children if it is one of the target nodes, or a live announcer.
       // Also skip children of already hidden nodes, as aria-hidden is recursive. An exception is
       // made for elements with role="row" since VoiceOver on iOS has issues hiding elements with role="row".
       // For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623).
       if (
         visibleNodes.has(node) ||
-        (hiddenNodes.has(parentElement) && parentElement.getAttribute("role") !== "row")
+        (node.parentElement &&
+          hiddenNodes.has(node.parentElement) &&
+          node.parentElement.getAttribute("role") !== "row")
       ) {
         return NodeFilter.FILTER_REJECT;
       }
@@ -51,7 +57,6 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
 
       return NodeFilter.FILTER_ACCEPT;
     };
-
     let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {acceptNode});
 
     // TreeWalker does not include the root.

pnpm-lock.yaml

@@ -1973,9 +1973,6 @@ importers:
       '@nextui-org/shared-utils':
         specifier: workspace:*
         version: link:../../utilities/shared-utils
-      '@nextui-org/use-aria-menu':
-        specifier: workspace:*
-        version: link:../../hooks/use-aria-menu
       '@nextui-org/use-is-mobile':
         specifier: workspace:*
         version: link:../../hooks/use-is-mobile
@@ -2128,12 +2125,12 @@ importers:
       '@nextui-org/shared-utils':
         specifier: workspace:*
         version: link:../../utilities/shared-utils
-      '@nextui-org/use-aria-toggle-button':
-        specifier: workspace:*
-        version: link:../../hooks/use-aria-toggle-button
       '@nextui-org/use-scroll-position':
         specifier: workspace:*
         version: link:../../hooks/use-scroll-position
+      '@react-aria/button':
+        specifier: 3.11.0
+        version: 3.11.0(react@18.2.0)
       '@react-aria/focus':
         specifier: 3.19.0
         version: 3.19.0(react@18.2.0)
@@ -3321,7 +3318,7 @@ importers:
         version: 18.2.0
       tailwind-variants:
         specifier: ^0.1.20
-        version: 0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3)))
+        version: 0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)))
 
   packages/core/theme:
     dependencies:
@@ -3348,7 +3345,7 @@ importers:
         version: 2.5.4
       tailwind-variants:
         specifier: ^0.1.20
-        version: 0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3)))
+        version: 0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)))
     devDependencies:
       '@types/color':
         specifier: ^3.0.3
@@ -3361,7 +3358,7 @@ importers:
         version: 2.2.0
       tailwindcss:
         specifier: ^3.4.0
-        version: 3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3))
+        version: 3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))
 
   packages/hooks/use-aria-accordion:
     dependencies:
@@ -3418,6 +3415,9 @@ importers:
 
   packages/hooks/use-aria-button:
     dependencies:
+      '@nextui-org/shared-utils':
+        specifier: workspace:*
+        version: link:../../utilities/shared-utils
       '@react-aria/focus':
         specifier: 3.19.0
         version: 3.19.0(react@18.2.0)
@@ -3443,6 +3443,9 @@ importers:
 
   packages/hooks/use-aria-link:
     dependencies:
+      '@nextui-org/shared-utils':
+        specifier: workspace:*
+        version: link:../../utilities/shared-utils
       '@react-aria/focus':
         specifier: 3.19.0
         version: 3.19.0(react@18.2.0)
@@ -3466,46 +3469,6 @@ importers:
         specifier: 18.2.0
         version: 18.2.0
 
-  packages/hooks/use-aria-menu:
-    dependencies:
-      '@react-aria/i18n':
-        specifier: 3.12.4
-        version: 3.12.4(react@18.2.0)
-      '@react-aria/interactions':
-        specifier: 3.22.5
-        version: 3.22.5(react@18.2.0)
-      '@react-aria/menu':
-        specifier: 3.16.0
-        version: 3.16.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/selection':
-        specifier: 3.21.0
-        version: 3.21.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/utils':
-        specifier: 3.26.0
-        version: 3.26.0(react@18.2.0)
-      '@react-stately/collections':
-        specifier: 3.12.0
-        version: 3.12.0(react@18.2.0)
-      '@react-stately/tree':
-        specifier: 3.8.6
-        version: 3.8.6(react@18.2.0)
-      '@react-types/menu':
-        specifier: 3.9.13
-        version: 3.9.13(react@18.2.0)
-      '@react-types/shared':
-        specifier: 3.26.0
-        version: 3.26.0(react@18.2.0)
-      react-dom:
-        specifier: 18.2.0
-        version: 18.2.0(react@18.2.0)
-    devDependencies:
-      clean-package:
-        specifier: 2.2.0
-        version: 2.2.0
-      react:
-        specifier: 18.2.0
-        version: 18.2.0
-
   packages/hooks/use-aria-modal-overlay:
     dependencies:
       '@react-aria/overlays':
@@ -3586,31 +3549,6 @@ importers:
         specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
-  packages/hooks/use-aria-toggle-button:
-    dependencies:
-      '@nextui-org/use-aria-button':
-        specifier: workspace:*
-        version: link:../use-aria-button
-      '@react-aria/utils':
-        specifier: 3.26.0
-        version: 3.26.0(react@18.2.0)
-      '@react-stately/toggle':
-        specifier: 3.8.0
-        version: 3.8.0(react@18.2.0)
-      '@react-types/button':
-        specifier: 3.10.1
-        version: 3.10.1(react@18.2.0)
-      '@react-types/shared':
-        specifier: 3.26.0
-        version: 3.26.0(react@18.2.0)
-    devDependencies:
-      clean-package:
-        specifier: 2.2.0
-        version: 2.2.0
-      react:
-        specifier: 18.2.0
-        version: 18.2.0
-
   packages/hooks/use-callback-ref:
     dependencies:
       '@nextui-org/use-safe-layout-effect':
@@ -26226,6 +26164,14 @@ snapshots:
       postcss: 8.4.49
       ts-node: 10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)
 
+  postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)):
+    dependencies:
+      lilconfig: 3.1.2
+      yaml: 2.6.1
+    optionalDependencies:
+      postcss: 8.4.49
+      ts-node: 10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)
+
   postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3)):
     dependencies:
       lilconfig: 3.1.2
@@ -27777,10 +27723,10 @@ snapshots:
       tailwind-merge: 1.14.0
       tailwindcss: 3.4.14(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3))
 
-  tailwind-variants@0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3))):
+  tailwind-variants@0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))):
     dependencies:
       tailwind-merge: 1.14.0
-      tailwindcss: 3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3))
+      tailwindcss: 3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))
 
   tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3)):
     dependencies:
@@ -27809,6 +27755,33 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
+  tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)):
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.2
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.6
+      lilconfig: 2.1.0
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.4.49
+      postcss-import: 15.1.0(postcss@8.4.49)
+      postcss-js: 4.0.1(postcss@8.4.49)
+      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))
+      postcss-nested: 6.2.0(postcss@8.4.49)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.8
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
   tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -27896,14 +27869,14 @@ snapshots:
       '@swc/core': 1.9.2(@swc/helpers@0.5.15)
       esbuild: 0.15.18
 
-  terser-webpack-plugin@5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12)):
+  terser-webpack-plugin@5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1))):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.2
       terser: 5.36.0
-      webpack: 5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12)
+      webpack: 5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1))
     optionalDependencies:
       '@swc/core': 1.9.2(@swc/helpers@0.5.15)
       esbuild: 0.21.5
@@ -28710,7 +28683,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12))
+      terser-webpack-plugin: 5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1)))
       watchpack: 2.4.2
       webpack-sources: 3.2.3
     optionalDependencies: