@mirohq/design-system-dropdown-menu 4.4.8 → 4.4.10-dropdown-on-pointerup.0

package/dist/main.js

@@ -14,9 +14,11 @@ var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemStyles = require('@mirohq/design-system-styles');
 var designSystemBaseHotkey = require('@mirohq/design-system-base-hotkey');
 var designSystemUseLayoutEffect = require('@mirohq/design-system-use-layout-effect');
+var designSystemUseAriaDisabled = require('@mirohq/design-system-use-aria-disabled');
 var designSystemScrollArea = require('@mirohq/design-system-scroll-area');
 var designSystemBaseSwitch = require('@mirohq/design-system-base-switch');
 var utils = require('@react-aria/utils');
+var designSystemUsePress = require('@mirohq/design-system-use-press');
 var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -273,29 +275,24 @@ const RightSlot = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledRightSlot, { ref, ...props });
 };
 
-const useAriaDisabled = ({
-  "aria-disabled": ariaDisabled,
-  onKeyDown,
-  onSelect,
-  onPointerMove,
-  onClick
-}, closeOnCheck = true) => React.useMemo(
-  () => ({
-    "aria-disabled": designSystemUtils.booleanify(ariaDisabled) ? ariaDisabled : void 0,
-    onKeyDown: (e) => {
-      if (designSystemUtils.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 = designSystemUseAriaDisabled.useAriaDisabled(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 (designSystemUtils.booleanify(ariaDisabled)) {
         e.preventDefault();
         return;
       }
-      if (!closeOnCheck) {
+      if (!closeOnSelect) {
         e.preventDefault();
       }
       onSelect == null ? void 0 : onSelect(e);
@@ -314,9 +311,8 @@ const useAriaDisabled = ({
       }
       onClick == null ? void 0 : onClick(e);
     }
-  }),
-  [ariaDisabled, onKeyDown, onSelect, onPointerMove, onClick, closeOnCheck]
-);
+  };
+};
 
 const Context = React.createContext({
   leftSlotMount: () => {
@@ -360,16 +356,15 @@ const CheckboxItem = React__default["default"].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 = designSystemUtils.booleanify(ariaDisabled != null ? ariaDisabled : false);
     const disabledUnchecked = (disabled === true || isAriaDisabled) && checked === false;
     return /* @__PURE__ */ jsxRuntime.jsx(ItemProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
       StyledCheckboxItem,
       {
-        ...restProps,
-        ...ariaDisabledProps,
+        ...elementProps,
         ref: forwardRef,
         checked,
         disabled,
@@ -486,16 +481,25 @@ const ScrollableContent = ({
 const DropdownContext = React.createContext({});
 const DropdownProvider = ({
   children,
+  open: rootOpen,
   ...restProps
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownContext.Provider,
-  {
-    value: {
-      ...restProps
-    },
-    children
-  }
-);
+}) => {
+  const [open, setOpen] = React.useState(rootOpen);
+  const triggerRef = React.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownContext.Provider,
+    {
+      value: {
+        ...restProps,
+        rootOpen,
+        open,
+        setOpen,
+        triggerRef
+      },
+      children
+    }
+  );
+};
 const useDropdownContext = () => React.useContext(DropdownContext);
 
 const Content = React__default["default"].forwardRef(
@@ -512,10 +516,11 @@ const Content = React__default["default"].forwardRef(
     containerSpacing = "medium",
     overflow = "visible",
     maxHeight,
+    onInteractOutside,
     children,
     ...restProps
   }, forwardRef) => {
-    const { direction } = useDropdownContext();
+    const { direction, triggerRef } = useDropdownContext();
     return /* @__PURE__ */ jsxRuntime.jsx(ContentProvider, { containerSpacing, children: /* @__PURE__ */ jsxRuntime.jsx(
       StyledContent,
       {
@@ -530,6 +535,12 @@ const Content = React__default["default"].forwardRef(
         collisionPadding,
         sticky,
         hideWhenDetached,
+        onInteractOutside: (e) => {
+          if (e.target === triggerRef.current) {
+            e.preventDefault();
+          }
+          onInteractOutside == null ? void 0 : onInteractOutside(e);
+        },
         children: /* @__PURE__ */ jsxRuntime.jsx(
           ScrollableContent,
           {
@@ -575,12 +586,11 @@ const StyledItem = designSystemStitches.styled(RadixDropdownMenu__namespace.Item
 
 const Item = React__default["default"].forwardRef(
   ({ disabled = false, variant = "subtle", ...restProps }, forwardRef) => {
-    const ariaDisabledProps = useAriaDisabled(restProps);
+    const elementProps = useAriaDisabled(restProps);
     return /* @__PURE__ */ jsxRuntime.jsx(ItemProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
       StyledItem,
       {
-        ...restProps,
-        ...ariaDisabledProps,
+        ...elementProps,
         variant,
         disabled,
         ref: forwardRef
@@ -589,10 +599,7 @@ const Item = React__default["default"].forwardRef(
   }
 );
 
-const LinkItem = React__default["default"].forwardRef(({ children, href, ...restProps }, forwardRef) => {
-  const ariaDisabledProps = useAriaDisabled(restProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(Item, { asChild: true, ref: forwardRef, ...restProps, ...ariaDisabledProps, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href, children }) });
-});
+const LinkItem = React__default["default"].forwardRef(({ children, href, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(Item, { asChild: true, ref: forwardRef, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href, children }) }));
 
 const StyledRadioGroup = designSystemStitches.styled(RadixDropdownMenu__namespace.RadioGroup, {
   display: "grid",
@@ -662,23 +669,16 @@ const StyledRadioItem = designSystemStitches.styled(RadixDropdownMenu__namespace
 });
 
 const RadioItem = React__default["default"].forwardRef(({ disabled, children, closeOnSelect = false, ...restProps }, forwardRef) => {
-  const ariaDisabledProps = useAriaDisabled(restProps, closeOnSelect);
-  return /* @__PURE__ */ jsxRuntime.jsx(ItemProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    StyledRadioItem,
-    {
-      ...restProps,
-      ...ariaDisabledProps,
-      disabled,
-      ref: forwardRef,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(RightSlot, { children: /* @__PURE__ */ jsxRuntime.jsxs(StyledRadioContainer, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(StyledPill, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(StyledProhibited, { weight: "thin" })
-        ] }) })
-      ]
-    }
-  ) });
+  const elementProps = useAriaDisabled(restProps, {
+    closeOnSelect
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ItemProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(StyledRadioItem, { ...elementProps, disabled, ref: forwardRef, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(RightSlot, { children: /* @__PURE__ */ jsxRuntime.jsxs(StyledRadioContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(StyledPill, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(StyledProhibited, { weight: "thin" })
+    ] }) })
+  ] }) });
 });
 
 const StyledSeparator = designSystemStitches.styled(RadixDropdownMenu__namespace.Separator, {
@@ -705,16 +705,15 @@ const SwitchItem = React__default["default"].forwardRef(
     disabled,
     checked,
     onChange,
-    children,
     closeOnSelect = false,
+    children,
     ...restProps
   }, forwardRef) => {
-    const ariaDisabledProps = useAriaDisabled(restProps, closeOnSelect);
+    const elementProps = useAriaDisabled(restProps, { closeOnSelect });
     return /* @__PURE__ */ jsxRuntime.jsx(ItemProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
       StyledSwitchItem,
       {
-        ...restProps,
-        ...ariaDisabledProps,
+        ...elementProps,
         disabled,
         checked,
         onCheckedChange: onChange,
@@ -747,8 +746,9 @@ const StyledTrigger = designSystemStitches.styled(RadixDropdownMenu__namespace.T
   }
 });
 
-const Trigger = React__default["default"].forwardRef(({ asChild = false, onClick, ...restProps }, forwardRef) => {
+const Trigger = React__default["default"].forwardRef(({ asChild = false, ...restProps }, forwardRef) => {
   const ref = React.useRef(null);
+  const { setOpen, rootOpen, triggerRef } = useDropdownContext();
   const handleVirtualClick = (e) => {
     var _a;
     if ((e == null ? void 0 : e.nativeEvent) === void 0) {
@@ -769,15 +769,40 @@ const Trigger = React__default["default"].forwardRef(({ asChild = false, onClick
       (_a = ref.current) == null ? void 0 : _a.dispatchEvent(pointerDownEvent);
     }
   };
+  const { pressProps } = designSystemUsePress.usePress({
+    onPress: () => {
+      if (rootOpen === void 0) {
+        setOpen((open) => !designSystemUtils.booleanify(open));
+      }
+    }
+  });
+  const elementProps = utils.mergeProps(restProps, pressProps);
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledTrigger,
     {
-      ...restProps,
+      ...elementProps,
       onClick: (e) => {
+        var _a, _b;
         handleVirtualClick(e);
-        onClick == null ? void 0 : onClick(e);
+        if (e instanceof MouseEvent) {
+          e.preventDefault();
+          (_a = elementProps.onClick) == null ? void 0 : _a.call(elementProps, e);
+        } else {
+          (_b = restProps.onClick) == null ? void 0 : _b.call(restProps, e);
+        }
       },
-      ref: designSystemUtils.mergeRefs([ref, forwardRef]),
+      onKeyDown: (e) => {
+        var _a, _b;
+        if ((e == null ? void 0 : e.nativeEvent) instanceof KeyboardEvent) {
+          if (!/^(Arrow|Tab|Escape)/.test(e.key)) {
+            e.preventDefault();
+          }
+          (_a = elementProps.onKeyDown) == null ? void 0 : _a.call(elementProps, e);
+        } else {
+          (_b = restProps.onKeyDown) == null ? void 0 : _b.call(restProps, e);
+        }
+      },
+      ref: designSystemUtils.mergeRefs([ref, triggerRef, forwardRef]),
       unstyled: !asChild,
       asChild
     }
@@ -798,29 +823,18 @@ const StyledSubTrigger = designSystemStitches.styled(RadixDropdownMenu__namespac
 });
 
 const SubTrigger = React__default["default"].forwardRef(({ children, disabled = false, ...restProps }, forwardRef) => {
-  const { onSelect, ...ariaDisabledProps } = useAriaDisabled({
-    onKeyDown: restProps.onKeyDown,
-    "aria-disabled": restProps["aria-disabled"]
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    StyledSubTrigger,
-    {
-      ...restProps,
-      ...ariaDisabledProps,
-      disabled,
-      ref: forwardRef,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(RightSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          StyledIconContainer,
-          {
-            "data-testid": process.env.NODE_ENV === "test" ? "submenu-arrow-icon" : void 0,
-            children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronRight, { size: "small", weight: "thin" })
-          }
-        ) })
-      ]
-    }
-  );
+  let { onSelect, ...elementProps } = restProps;
+  elementProps = useAriaDisabled(elementProps);
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledSubTrigger, { ...elementProps, disabled, ref: forwardRef, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(RightSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      StyledIconContainer,
+      {
+        "data-testid": process.env.NODE_ENV === "test" ? "submenu-arrow-icon" : void 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronRight, { size: "small", weight: "thin" })
+      }
+    ) })
+  ] });
 });
 
 const StyledSubContent = designSystemStitches.styled(
@@ -939,39 +953,52 @@ const Root = ({
   defaultOpen = false,
   direction,
   interactOutside = false,
-  open,
   onOpen,
   onClose,
   ...restProps
 }) => {
   const { ignoreNextTooltip } = designSystemBaseTooltip.useBaseTooltipContext();
+  const { rootOpen, open, setOpen } = useDropdownContext();
   const prevOpen = designSystemUsePrevious.usePrevious(open);
   React.useEffect(() => {
-    if (prevOpen === true && open === false) {
-      ignoreNextTooltip();
+    if (prevOpen !== open) {
+      if (open === true) {
+        onOpen == null ? void 0 : onOpen();
+      } else {
+        if (prevOpen === true) {
+          ignoreNextTooltip();
+        }
+        onClose == null ? void 0 : onClose();
+      }
     }
-  }, [ignoreNextTooltip, open, prevOpen]);
+  }, [open, prevOpen, onOpen, onClose, ignoreNextTooltip]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadixDropdownMenu__namespace.Root,
     {
       ...restProps,
       dir: direction,
       modal: interactOutside,
-      open,
+      open: (
+        // use the root open state if it is defined
+        rootOpen != null ? rootOpen : defaultOpen && (prevOpen === void 0 || prevOpen === open) ? (
+          // only use defaultOpen in the first render then use the context open state
+          // if the open state is the same as the previous one, it is most likely a re-render and we should still use the defaultOpen
+          void 0
+        ) : (
+          // otherwise, use the user open state
+          open
+        )
+      ),
       defaultOpen,
-      onOpenChange: (newOpen) => {
-        if (!newOpen && open === void 0) {
-          ignoreNextTooltip();
-        }
-        newOpen ? onOpen == null ? void 0 : onOpen() : onClose == null ? void 0 : onClose();
-      }
+      onOpenChange: setOpen
     }
   );
 };
 const DropdownMenu = ({
   direction = "ltr",
+  open,
   ...restProps
-}) => /* @__PURE__ */ jsxRuntime.jsx(DropdownProvider, { direction, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseTooltip.BaseTooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(Root, { direction, ...restProps }) }) });
+}) => /* @__PURE__ */ jsxRuntime.jsx(DropdownProvider, { direction, open, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseTooltip.BaseTooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(Root, { direction, ...restProps }) }) });
 DropdownMenu.CheckboxItem = CheckboxItem;
 DropdownMenu.Content = Content;
 DropdownMenu.Hotkey = Hotkey;