@mirohq/design-system-dropdown-menu 3.3.2 → 3.3.4-use-press.2

package/dist/main.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var RadixDropdownMenu = require('@radix-ui/react-dropdown-menu');
 var designSystemIcons = require('@mirohq/design-system-icons');
@@ -9,8 +10,10 @@ var designSystemUtils = require('@mirohq/design-system-utils');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemStyles = require('@mirohq/design-system-styles');
+var designSystemUseLayoutEffect = require('@mirohq/design-system-use-layout-effect');
 var designSystemScrollArea = require('@mirohq/design-system-scroll-area');
 var designSystemBaseSwitch = require('@mirohq/design-system-base-switch');
+var utils = require('@react-aria/utils');
 var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -106,13 +109,17 @@ const ContentProvider = ({
       "--right-slot-max-width": `${Math.ceil(maxWidth)}px`
     }
   });
-  return /* @__PURE__ */ React__default["default"].createElement(Context$1.Provider, {
-    value: {
-      rightSlotMount,
-      rightSlotDestroy,
-      containerSpacing
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Context$1.Provider,
+    {
+      value: {
+        rightSlotMount,
+        rightSlotDestroy,
+        containerSpacing
+      },
+      children: formattedChildren
     }
-  }, formattedChildren);
+  );
 };
 const useContent = () => React.useContext(Context$1);
 
@@ -135,7 +142,7 @@ const StyledRightSlot = designSystemStitches.styled(designSystemPrimitive.Primit
 const RightSlot = (props) => {
   const { rightSlotMount, rightSlotDestroy } = useContent();
   const ref = React.useRef(null);
-  React.useEffect(() => {
+  designSystemUseLayoutEffect.useLayoutEffect(() => {
     if (ref.current !== null) {
       const width = ref.current.getBoundingClientRect().width;
       const index = rightSlotMount(width);
@@ -144,10 +151,7 @@ const RightSlot = (props) => {
     return () => {
     };
   }, [rightSlotMount, rightSlotDestroy, ref]);
-  return /* @__PURE__ */ React__default["default"].createElement(StyledRightSlot, {
-    ref,
-    ...props
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledRightSlot, { ref, ...props });
 };
 
 const HotkeySlot = designSystemStitches.styled(RightSlot, {
@@ -300,31 +304,46 @@ const ItemProvider = ({
   const formattedChildren = hasSlot ? children : designSystemUtils.addPropsToChildren(children, () => true, {
     "data-no-left-slot": ""
   });
-  return /* @__PURE__ */ React__default["default"].createElement(Context.Provider, {
-    value: {
-      leftSlotMount,
-      leftSlotDestroy
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Context.Provider,
+    {
+      value: {
+        leftSlotMount,
+        leftSlotDestroy
+      },
+      children: formattedChildren
     }
-  }, formattedChildren);
+  );
 };
 const useItem = () => React.useContext(Context);
 
 const CheckboxItem = React__default["default"].forwardRef(({ children, checked, onChange, disabled, ...restProps }, forwardRef) => {
   const ariaDisabledProps = useAriaDisabled(restProps, true);
   const { "aria-disabled": ariaDisabled } = ariaDisabledProps;
-  return /* @__PURE__ */ React__default["default"].createElement(ItemProvider, null, /* @__PURE__ */ React__default["default"].createElement(StyledCheckboxItem, {
-    ...restProps,
-    ...ariaDisabledProps,
-    ref: forwardRef,
-    checked,
-    disabled,
-    onCheckedChange: onChange
-  }, children, /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledIndicator, null, (disabled === true || designSystemUtils.booleanify(ariaDisabled)) && !checked && /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconProhibit, {
-    weight: "thin",
-    css: { square: "$3", display: "block" }
-  }), checked && /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconCheckMark, {
-    css: { square: "$3", display: "block" }
-  })))));
+  return /* @__PURE__ */ jsxRuntime.jsx(ItemProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    StyledCheckboxItem,
+    {
+      ...restProps,
+      ...ariaDisabledProps,
+      ref: forwardRef,
+      checked,
+      disabled,
+      onCheckedChange: onChange,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(RightSlot, { children: /* @__PURE__ */ jsxRuntime.jsxs(StyledIndicator, { children: [
+          (disabled === true || designSystemUtils.booleanify(ariaDisabled)) && !checked && /* @__PURE__ */ jsxRuntime.jsx(
+            designSystemIcons.IconProhibit,
+            {
+              weight: "thin",
+              css: { square: "$3", display: "block" }
+            }
+          ),
+          checked && /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCheckMark, { css: { square: "$3", display: "block" } })
+        ] }) })
+      ]
+    }
+  ) });
 });
 
 const CONTENT_GUTTER = parseInt(designSystemStitches.theme.space[150]);
@@ -414,16 +433,19 @@ const ScrollableContent = ({
     };
   }, [maxHeight, overflow, containerSpacing]);
   if (overflow === "auto") {
-    return /* @__PURE__ */ React__default["default"].createElement(designSystemScrollArea.ScrollArea, {
-      css: { margin: `-${CONTENT_BORDER_FOCUS_ITEM}` },
-      type: "always"
-    }, /* @__PURE__ */ React__default["default"].createElement(designSystemScrollArea.ScrollArea.Viewport, {
-      css: { ...getOverflowMaxHeight() }
-    }, children), /* @__PURE__ */ React__default["default"].createElement(designSystemScrollArea.ScrollArea.Scrollbar, {
-      orientation: "vertical"
-    }, /* @__PURE__ */ React__default["default"].createElement(designSystemScrollArea.ScrollArea.Thumb, null)));
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystemScrollArea.ScrollArea,
+      {
+        css: { margin: `-${CONTENT_BORDER_FOCUS_ITEM}` },
+        type: "always",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystemScrollArea.ScrollArea.Viewport, { css: { ...getOverflowMaxHeight() }, children }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystemScrollArea.ScrollArea.Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsxRuntime.jsx(designSystemScrollArea.ScrollArea.Thumb, {}) })
+        ]
+      }
+    );
   }
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 };
 
 const Content = React__default["default"].forwardRef(
@@ -442,29 +464,31 @@ const Content = React__default["default"].forwardRef(
     maxHeight,
     children,
     ...restProps
-  }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(ContentProvider, {
-    containerSpacing
-  }, /* @__PURE__ */ React__default["default"].createElement(StyledContent, {
-    ...restProps,
-    ref: forwardRef,
-    loop,
-    side,
-    sideOffset,
-    align,
-    alignOffset,
-    avoidCollisions,
-    collisionPadding,
-    sticky,
-    hideWhenDetached,
-    containerSpacing
-  }, /* @__PURE__ */ React__default["default"].createElement(ScrollableContent, {
-    ...{ containerSpacing, maxHeight, overflow }
-  }, children)))
+  }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(ContentProvider, { containerSpacing, children: /* @__PURE__ */ jsxRuntime.jsx(
+    StyledContent,
+    {
+      ...restProps,
+      ref: forwardRef,
+      loop,
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      avoidCollisions,
+      collisionPadding,
+      sticky,
+      hideWhenDetached,
+      containerSpacing,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ScrollableContent, { ...{ containerSpacing, maxHeight, overflow }, children })
+    }
+  ) })
 );
 
 const StyledItem = designSystemStitches.styled(RadixDropdownMenu__namespace.Item, {
   ...itemDefaults,
   variants: {
+    // This is a hack for the :has() selector
+    // Remove it after Firefox implements it
     hasRightSlot: {
       true: {
         paddingRight: "$600"
@@ -476,25 +500,21 @@ const StyledItem = designSystemStitches.styled(RadixDropdownMenu__namespace.Item
 const Item = React__default["default"].forwardRef(
   ({ disabled = false, ...restProps }, forwardRef) => {
     const ariaDisabledProps = useAriaDisabled(restProps);
-    return /* @__PURE__ */ React__default["default"].createElement(ItemProvider, null, /* @__PURE__ */ React__default["default"].createElement(StyledItem, {
-      ...restProps,
-      ...ariaDisabledProps,
-      disabled,
-      ref: forwardRef
-    }));
+    return /* @__PURE__ */ jsxRuntime.jsx(ItemProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      StyledItem,
+      {
+        ...restProps,
+        ...ariaDisabledProps,
+        disabled,
+        ref: forwardRef
+      }
+    ) });
   }
 );
 
 const LinkItem = React__default["default"].forwardRef(({ children, href, ...restProps }, forwardRef) => {
   const ariaDisabledProps = useAriaDisabled(restProps);
-  return /* @__PURE__ */ React__default["default"].createElement(Item, {
-    asChild: true,
-    ref: forwardRef,
-    ...restProps,
-    ...ariaDisabledProps
-  }, /* @__PURE__ */ React__default["default"].createElement("a", {
-    href
-  }, children));
+  return /* @__PURE__ */ jsxRuntime.jsx(Item, { asChild: true, ref: forwardRef, ...restProps, ...ariaDisabledProps, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href, children }) });
 });
 
 const StyledRadioGroup = designSystemStitches.styled(RadixDropdownMenu__namespace.RadioGroup, {
@@ -503,11 +523,14 @@ const StyledRadioGroup = designSystemStitches.styled(RadixDropdownMenu__namespac
 
 const RadioGroup = React__default["default"].forwardRef((props, forwardRef) => {
   const { onChange, ...restProps } = props;
-  return /* @__PURE__ */ React__default["default"].createElement(StyledRadioGroup, {
-    ...restProps,
-    ref: forwardRef,
-    onValueChange: onChange
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledRadioGroup,
+    {
+      ...restProps,
+      ref: forwardRef,
+      onValueChange: onChange
+    }
+  );
 });
 
 const StyledRadioContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
@@ -568,24 +591,29 @@ const StyledRadioItem = designSystemStitches.styled(RadixDropdownMenu__namespace
 
 const RadioItem = React__default["default"].forwardRef(({ disabled = false, children, ...restProps }, forwardRef) => {
   const ariaDisabledProps = useAriaDisabled(restProps, true);
-  return /* @__PURE__ */ React__default["default"].createElement(ItemProvider, null, /* @__PURE__ */ React__default["default"].createElement(StyledRadioItem, {
-    ...restProps,
-    ...ariaDisabledProps,
-    disabled,
-    ref: forwardRef
-  }, children, /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledRadioContainer, null, /* @__PURE__ */ React__default["default"].createElement(StyledPill, null), /* @__PURE__ */ React__default["default"].createElement(StyledProhibited, {
-    weight: "thin"
-  })))));
+  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 StyledSeparator = designSystemStitches.styled(RadixDropdownMenu__namespace.Separator, {
   borderTop: "1px solid $border-neutrals-subtle"
 });
 
-const Separator = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledSeparator, {
-  ...props,
-  ref: forwardRef
-}));
+const Separator = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, { ...props, ref: forwardRef }));
 
 const StyledSwitch = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
   ...designSystemBaseSwitch.styles.default,
@@ -606,14 +634,21 @@ const StyledSwitchItem = designSystemStitches.styled(RadixDropdownMenu__namespac
 const SwitchItem = React__default["default"].forwardRef(
   ({ disabled = false, checked, onChange, children, ...restProps }, forwardRef) => {
     const ariaDisabledProps = useAriaDisabled(restProps, true);
-    return /* @__PURE__ */ React__default["default"].createElement(ItemProvider, null, /* @__PURE__ */ React__default["default"].createElement(StyledSwitchItem, {
-      ...restProps,
-      ...ariaDisabledProps,
-      disabled,
-      checked,
-      onCheckedChange: onChange,
-      ref: forwardRef
-    }, children, /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledSwitch, null, /* @__PURE__ */ React__default["default"].createElement(designSystemBaseSwitch.Thumb, null)))));
+    return /* @__PURE__ */ jsxRuntime.jsx(ItemProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      StyledSwitchItem,
+      {
+        ...restProps,
+        ...ariaDisabledProps,
+        disabled,
+        checked,
+        onCheckedChange: onChange,
+        ref: forwardRef,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(RightSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledSwitch, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseSwitch.Thumb, {}) }) })
+        ]
+      }
+    ) });
   }
 );
 
@@ -636,13 +671,32 @@ const StyledTrigger = designSystemStitches.styled(RadixDropdownMenu__namespace.T
   }
 });
 
-const Trigger = React__default["default"].forwardRef(({ asChild = false, onPress, onClick, ...restProps }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledTrigger, {
-  ...restProps,
-  onClick: onPress != null ? onPress : onClick,
-  ref: forwardRef,
-  unstyled: !asChild,
-  asChild
-}));
+const Trigger = React__default["default"].forwardRef(({ asChild = false, onPress, onClick, ...restProps }, forwardRef) => {
+  const ref = React.useRef(null);
+  const handleVirtualClick = (e) => {
+    var _a;
+    if (utils.isVirtualClick(e.nativeEvent) && ref.current !== null) {
+      const pointerDownEvent = new MouseEvent("pointerdown", {
+        bubbles: true,
+        cancelable: true
+      });
+      (_a = ref.current) == null ? void 0 : _a.dispatchEvent(pointerDownEvent);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledTrigger,
+    {
+      ...restProps,
+      onClick: (e) => {
+        handleVirtualClick(e);
+        onClick == null ? void 0 : onClick(e);
+      },
+      ref: designSystemUtils.mergeRefs([ref, forwardRef]),
+      unstyled: !asChild,
+      asChild
+    }
+  );
+});
 
 const StyledIconContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
   color: "$icon-neutrals-with-text",
@@ -662,17 +716,25 @@ const SubTrigger = React__default["default"].forwardRef(({ children, disabled =
     onKeyDown: restProps.onKeyDown,
     "aria-disabled": restProps["aria-disabled"]
   });
-  return /* @__PURE__ */ React__default["default"].createElement(StyledSubTrigger, {
-    ...restProps,
-    ...ariaDisabledProps,
-    disabled,
-    ref: forwardRef
-  }, children, /* @__PURE__ */ React__default["default"].createElement(RightSlot, null, /* @__PURE__ */ React__default["default"].createElement(StyledIconContainer, {
-    "data-testid": process.env.NODE_ENV === "test" ? "submenu-arrow-icon" : void 0
-  }, /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconChevronRight, {
-    size: "small",
-    weight: "thin"
-  }))));
+  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" })
+          }
+        ) })
+      ]
+    }
+  );
 });
 
 const StyledSubContent = designSystemStitches.styled(
@@ -695,20 +757,20 @@ const SubContent = React__default["default"].forwardRef(
     ...restProps
   }, forwardRef) => {
     const { containerSpacing } = useContent();
-    return /* @__PURE__ */ React__default["default"].createElement(ContentProvider, {
-      containerSpacing
-    }, /* @__PURE__ */ React__default["default"].createElement(StyledSubContent, {
-      ...restProps,
-      ref: forwardRef,
-      sideOffset,
-      alignOffset,
-      collisionPadding,
-      loop,
-      hideWhenDetached,
-      sticky
-    }, /* @__PURE__ */ React__default["default"].createElement(ScrollableContent, {
-      ...{ containerSpacing, maxHeight, overflow }
-    }, children)));
+    return /* @__PURE__ */ jsxRuntime.jsx(ContentProvider, { containerSpacing, children: /* @__PURE__ */ jsxRuntime.jsx(
+      StyledSubContent,
+      {
+        ...restProps,
+        ref: forwardRef,
+        sideOffset,
+        alignOffset,
+        collisionPadding,
+        loop,
+        hideWhenDetached,
+        sticky,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ScrollableContent, { ...{ containerSpacing, maxHeight, overflow }, children })
+      }
+    ) });
   }
 );
 
@@ -717,23 +779,24 @@ const StyledSub = designSystemStitches.styled(RadixDropdownMenu__namespace.Sub,
 const Sub = React__default["default"].forwardRef(
   ({ defaultOpen, onOpen, onClose, open, ...restProps }, forwardRef) => {
     const [openState, setOpenState] = React.useState(defaultOpen);
-    return /* @__PURE__ */ React__default["default"].createElement(StyledSub, {
-      ...restProps,
-      open: open != null ? open : openState,
-      onOpenChange: (newOpen) => {
-        if (open == null) {
-          setOpenState(newOpen);
-        }
-        newOpen ? onOpen == null ? void 0 : onOpen() : onClose == null ? void 0 : onClose();
-      },
-      ref: forwardRef
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StyledSub,
+      {
+        ...restProps,
+        open: open != null ? open : openState,
+        onOpenChange: (newOpen) => {
+          if (open == null) {
+            setOpenState(newOpen);
+          }
+          newOpen ? onOpen == null ? void 0 : onOpen() : onClose == null ? void 0 : onClose();
+        },
+        ref: forwardRef
+      }
+    );
   }
 );
 
-const Portal = (props) => /* @__PURE__ */ React__default["default"].createElement(RadixDropdownMenu.Portal, {
-  ...props
-});
+const Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(RadixDropdownMenu.Portal, { ...props });
 
 const StyledIconSlot = designSystemStitches.styled(LeftSlot, {
   square: "$5",
@@ -754,29 +817,20 @@ const IconSlot = React__default["default"].forwardRef(({ children, ...restProps
       weight: "thin"
     }
   );
-  React.useEffect(() => {
+  designSystemUseLayoutEffect.useLayoutEffect(() => {
     leftSlotMount();
     return () => leftSlotDestroy();
   }, [leftSlotMount, leftSlotDestroy]);
-  return /* @__PURE__ */ React__default["default"].createElement(StyledIconSlot, {
-    ref: forwardRef,
-    ...restProps
-  }, /* @__PURE__ */ React__default["default"].createElement(designSystemPrimitive.Primitive.svg, {
-    asChild: true,
-    "aria-hidden": true
-  }, formattedChildren));
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledIconSlot, { ref: forwardRef, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemPrimitive.Primitive.svg, { asChild: true, "aria-hidden": true, children: formattedChildren }) });
 });
 
 const IllustrationSlot = React__default["default"].forwardRef((props, forwardRef) => {
   const { leftSlotMount, leftSlotDestroy } = useItem();
-  React.useEffect(() => {
+  designSystemUseLayoutEffect.useLayoutEffect(() => {
     leftSlotMount();
     return () => leftSlotDestroy();
   }, [leftSlotMount, leftSlotDestroy]);
-  return /* @__PURE__ */ React__default["default"].createElement(StyledIllustrationSlot, {
-    ref: forwardRef,
-    ...props
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledIllustrationSlot, { ref: forwardRef, ...props });
 });
 
 const DropdownMenu = ({
@@ -789,18 +843,21 @@ const DropdownMenu = ({
   ...restProps
 }) => {
   const [openState, setOpenState] = React.useState(defaultOpen);
-  return /* @__PURE__ */ React__default["default"].createElement(RadixDropdownMenu__namespace.Root, {
-    ...restProps,
-    dir: direction,
-    modal: interactOutside,
-    open: open != null ? open : openState,
-    onOpenChange: (newOpen) => {
-      if (open == null) {
-        setOpenState(newOpen);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadixDropdownMenu__namespace.Root,
+    {
+      ...restProps,
+      dir: direction,
+      modal: interactOutside,
+      open: open != null ? open : openState,
+      onOpenChange: (newOpen) => {
+        if (open == null) {
+          setOpenState(newOpen);
+        }
+        newOpen ? onOpen == null ? void 0 : onOpen() : onClose == null ? void 0 : onClose();
       }
-      newOpen ? onOpen == null ? void 0 : onOpen() : onClose == null ? void 0 : onClose();
     }
-  });
+  );
 };
 DropdownMenu.CheckboxItem = CheckboxItem;
 DropdownMenu.Content = Content;