@mirohq/design-system-dropdown-menu 4.4.7 → 4.4.9

package/dist/module.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { createContext, useState, useRef, useCallback, useContext, useMemo, useEffect } from 'react';
+import React, { createContext, useState, useRef, useCallback, useContext, useEffect } from 'react';
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Portal as Portal$1 } from '@radix-ui/react-dropdown-menu';
 import { BaseTooltipProvider, useBaseTooltipContext } from '@mirohq/design-system-base-tooltip';
@@ -11,6 +11,7 @@ import { styled, theme } from '@mirohq/design-system-stitches';
 import { focus, animations } from '@mirohq/design-system-styles';
 import { Hotkey as Hotkey$1 } from '@mirohq/design-system-base-hotkey';
 import { useLayoutEffect } from '@mirohq/design-system-use-layout-effect';
+import { useAriaDisabled as useAriaDisabled$1 } from '@mirohq/design-system-use-aria-disabled';
 import { ScrollArea } from '@mirohq/design-system-scroll-area';
 import { styles, Thumb } from '@mirohq/design-system-base-switch';
 import { isVirtualClick } from '@react-aria/utils';
@@ -247,29 +248,24 @@ const RightSlot = (props) => {
   return /* @__PURE__ */ jsx(StyledRightSlot, { ref, ...props });
 };
 
-const useAriaDisabled = ({
-  "aria-disabled": ariaDisabled,
-  onKeyDown,
-  onSelect,
-  onPointerMove,
-  onClick
-}, closeOnCheck = true) => useMemo(
-  () => ({
-    "aria-disabled": booleanify(ariaDisabled) ? ariaDisabled : void 0,
-    onKeyDown: (e) => {
-      if (booleanify(ariaDisabled) && e.code !== "ArrowUp" && e.code !== "ArrowDown" && e.code !== "Escape") {
-        e.preventDefault();
-        e.stopPropagation();
-        return;
-      }
-      onKeyDown == null ? void 0 : onKeyDown(e);
-    },
+const useAriaDisabled = ({ onSelect, ...restProps }, { exceptions, closeOnSelect = true } = {}) => {
+  const elementProps = useAriaDisabled$1(restProps, {
+    ...exceptions,
+    allowArrows: true
+  });
+  const { "aria-disabled": ariaDisabled, onPointerMove, onClick } = elementProps;
+  return {
+    ...elementProps,
+    // these events need to be manually included
+    // bacause useAriaDisabled only removes the events from the props.
+    // Radix uses these events to handle the dropdown menu so we need to prevent
+    // it from being called when the item is aria-disabled.
     onSelect: (e) => {
       if (booleanify(ariaDisabled)) {
         e.preventDefault();
         return;
       }
-      if (!closeOnCheck) {
+      if (!closeOnSelect) {
         e.preventDefault();
       }
       onSelect == null ? void 0 : onSelect(e);
@@ -288,9 +284,8 @@ const useAriaDisabled = ({
       }
       onClick == null ? void 0 : onClick(e);
     }
-  }),
-  [ariaDisabled, onKeyDown, onSelect, onPointerMove, onClick, closeOnCheck]
-);
+  };
+};
 
 const Context = createContext({
   leftSlotMount: () => {
@@ -334,16 +329,15 @@ const CheckboxItem = React.forwardRef(
     variant = "ghost",
     ...restProps
   }, forwardRef) => {
-    const ariaDisabledProps = useAriaDisabled(restProps, closeOnSelect);
-    const { "aria-disabled": ariaDisabled } = ariaDisabledProps;
+    const elementProps = useAriaDisabled(restProps, { closeOnSelect });
+    const { "aria-disabled": ariaDisabled } = restProps;
     const iconCss = { square: "100%", display: "block" };
     const isAriaDisabled = booleanify(ariaDisabled != null ? ariaDisabled : false);
     const disabledUnchecked = (disabled === true || isAriaDisabled) && checked === false;
     return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsxs(
       StyledCheckboxItem,
       {
-        ...restProps,
-        ...ariaDisabledProps,
+        ...elementProps,
         ref: forwardRef,
         checked,
         disabled,
@@ -549,12 +543,11 @@ const StyledItem = styled(RadixDropdownMenu.Item, {
 
 const Item = React.forwardRef(
   ({ disabled = false, variant = "subtle", ...restProps }, forwardRef) => {
-    const ariaDisabledProps = useAriaDisabled(restProps);
+    const elementProps = useAriaDisabled(restProps);
     return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(
       StyledItem,
       {
-        ...restProps,
-        ...ariaDisabledProps,
+        ...elementProps,
         variant,
         disabled,
         ref: forwardRef
@@ -563,10 +556,7 @@ const Item = React.forwardRef(
   }
 );
 
-const LinkItem = React.forwardRef(({ children, href, ...restProps }, forwardRef) => {
-  const ariaDisabledProps = useAriaDisabled(restProps);
-  return /* @__PURE__ */ jsx(Item, { asChild: true, ref: forwardRef, ...restProps, ...ariaDisabledProps, children: /* @__PURE__ */ jsx("a", { href, children }) });
-});
+const LinkItem = React.forwardRef(({ children, href, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(Item, { asChild: true, ref: forwardRef, ...restProps, children: /* @__PURE__ */ jsx("a", { href, children }) }));
 
 const StyledRadioGroup = styled(RadixDropdownMenu.RadioGroup, {
   display: "grid",
@@ -636,23 +626,16 @@ const StyledRadioItem = styled(RadixDropdownMenu.RadioItem, {
 });
 
 const RadioItem = React.forwardRef(({ disabled, children, closeOnSelect = false, ...restProps }, forwardRef) => {
-  const ariaDisabledProps = useAriaDisabled(restProps, closeOnSelect);
-  return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsxs(
-    StyledRadioItem,
-    {
-      ...restProps,
-      ...ariaDisabledProps,
-      disabled,
-      ref: forwardRef,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(RightSlot, { children: /* @__PURE__ */ jsxs(StyledRadioContainer, { children: [
-          /* @__PURE__ */ jsx(StyledPill, {}),
-          /* @__PURE__ */ jsx(StyledProhibited, { weight: "thin" })
-        ] }) })
-      ]
-    }
-  ) });
+  const elementProps = useAriaDisabled(restProps, {
+    closeOnSelect
+  });
+  return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsxs(StyledRadioItem, { ...elementProps, disabled, ref: forwardRef, children: [
+    children,
+    /* @__PURE__ */ jsx(RightSlot, { children: /* @__PURE__ */ jsxs(StyledRadioContainer, { children: [
+      /* @__PURE__ */ jsx(StyledPill, {}),
+      /* @__PURE__ */ jsx(StyledProhibited, { weight: "thin" })
+    ] }) })
+  ] }) });
 });
 
 const StyledSeparator = styled(RadixDropdownMenu.Separator, {
@@ -679,16 +662,15 @@ const SwitchItem = React.forwardRef(
     disabled,
     checked,
     onChange,
-    children,
     closeOnSelect = false,
+    children,
     ...restProps
   }, forwardRef) => {
-    const ariaDisabledProps = useAriaDisabled(restProps, closeOnSelect);
+    const elementProps = useAriaDisabled(restProps, { closeOnSelect });
     return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsxs(
       StyledSwitchItem,
       {
-        ...restProps,
-        ...ariaDisabledProps,
+        ...elementProps,
         disabled,
         checked,
         onCheckedChange: onChange,
@@ -772,29 +754,18 @@ const StyledSubTrigger = styled(RadixDropdownMenu.SubTrigger, {
 });
 
 const SubTrigger = React.forwardRef(({ children, disabled = false, ...restProps }, forwardRef) => {
-  const { onSelect, ...ariaDisabledProps } = useAriaDisabled({
-    onKeyDown: restProps.onKeyDown,
-    "aria-disabled": restProps["aria-disabled"]
-  });
-  return /* @__PURE__ */ jsxs(
-    StyledSubTrigger,
-    {
-      ...restProps,
-      ...ariaDisabledProps,
-      disabled,
-      ref: forwardRef,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(RightSlot, { children: /* @__PURE__ */ jsx(
-          StyledIconContainer,
-          {
-            "data-testid": process.env.NODE_ENV === "test" ? "submenu-arrow-icon" : void 0,
-            children: /* @__PURE__ */ jsx(IconChevronRight, { size: "small", weight: "thin" })
-          }
-        ) })
-      ]
-    }
-  );
+  let { onSelect, ...elementProps } = restProps;
+  elementProps = useAriaDisabled(elementProps);
+  return /* @__PURE__ */ jsxs(StyledSubTrigger, { ...elementProps, disabled, ref: forwardRef, children: [
+    children,
+    /* @__PURE__ */ jsx(RightSlot, { children: /* @__PURE__ */ jsx(
+      StyledIconContainer,
+      {
+        "data-testid": process.env.NODE_ENV === "test" ? "submenu-arrow-icon" : void 0,
+        children: /* @__PURE__ */ jsx(IconChevronRight, { size: "small", weight: "thin" })
+      }
+    ) })
+  ] });
 });
 
 const StyledSubContent = styled(