@mirohq/design-system-dropdown-menu 3.3.2 → 3.4.0

package/dist/module.js

@@ -1,4 +1,5 @@
-import React, { createContext, useState, useRef, useCallback, useContext, useEffect, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { createContext, useState, useRef, useCallback, useContext, useMemo } from 'react';
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Portal as Portal$1 } from '@radix-ui/react-dropdown-menu';
 import { IconProhibit, IconCheckMark, IconChevronRight } from '@mirohq/design-system-icons';
@@ -6,6 +7,7 @@ import { addPropsToChildren, booleanify } from '@mirohq/design-system-utils';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { styled, theme } from '@mirohq/design-system-stitches';
 import { focus, animations } from '@mirohq/design-system-styles';
+import { useLayoutEffect } from '@mirohq/design-system-use-layout-effect';
 import { ScrollArea } from '@mirohq/design-system-scroll-area';
 import { styles, Thumb } from '@mirohq/design-system-base-switch';
 import { styles as styles$1, isIconComponent } from '@mirohq/design-system-base-icon';
@@ -80,13 +82,17 @@ const ContentProvider = ({
       "--right-slot-max-width": `${Math.ceil(maxWidth)}px`
     }
   });
-  return /* @__PURE__ */ React.createElement(Context$1.Provider, {
-    value: {
-      rightSlotMount,
-      rightSlotDestroy,
-      containerSpacing
+  return /* @__PURE__ */ jsx(
+    Context$1.Provider,
+    {
+      value: {
+        rightSlotMount,
+        rightSlotDestroy,
+        containerSpacing
+      },
+      children: formattedChildren
     }
-  }, formattedChildren);
+  );
 };
 const useContent = () => useContext(Context$1);
 
@@ -109,7 +115,7 @@ const StyledRightSlot = styled(Primitive.div, {
 const RightSlot = (props) => {
   const { rightSlotMount, rightSlotDestroy } = useContent();
   const ref = useRef(null);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (ref.current !== null) {
       const width = ref.current.getBoundingClientRect().width;
       const index = rightSlotMount(width);
@@ -118,10 +124,7 @@ const RightSlot = (props) => {
     return () => {
     };
   }, [rightSlotMount, rightSlotDestroy, ref]);
-  return /* @__PURE__ */ React.createElement(StyledRightSlot, {
-    ref,
-    ...props
-  });
+  return /* @__PURE__ */ jsx(StyledRightSlot, { ref, ...props });
 };
 
 const HotkeySlot = styled(RightSlot, {
@@ -216,7 +219,7 @@ const useAriaDisabled = ({
   onSelect,
   onPointerMove,
   onClick
-}, preventDefault = false) => useMemo(
+}, closeOnCheck = true) => useMemo(
   () => ({
     "aria-disabled": booleanify(ariaDisabled) ? ariaDisabled : void 0,
     onKeyDown: (e) => {
@@ -228,13 +231,13 @@ const useAriaDisabled = ({
       onKeyDown == null ? void 0 : onKeyDown(e);
     },
     onSelect: (e) => {
-      if (preventDefault) {
-        e.preventDefault();
-      }
       if (booleanify(ariaDisabled)) {
         e.preventDefault();
         return;
       }
+      if (!closeOnCheck) {
+        e.preventDefault();
+      }
       onSelect == null ? void 0 : onSelect(e);
     },
     onPointerMove: (e) => {
@@ -252,7 +255,7 @@ const useAriaDisabled = ({
       onClick == null ? void 0 : onClick(e);
     }
   }),
-  [ariaDisabled, onKeyDown, onSelect, onPointerMove, onClick, preventDefault]
+  [ariaDisabled, onKeyDown, onSelect, onPointerMove, onClick, closeOnCheck]
 );
 
 const Context = createContext({
@@ -274,32 +277,56 @@ const ItemProvider = ({
   const formattedChildren = hasSlot ? children : addPropsToChildren(children, () => true, {
     "data-no-left-slot": ""
   });
-  return /* @__PURE__ */ React.createElement(Context.Provider, {
-    value: {
-      leftSlotMount,
-      leftSlotDestroy
+  return /* @__PURE__ */ jsx(
+    Context.Provider,
+    {
+      value: {
+        leftSlotMount,
+        leftSlotDestroy
+      },
+      children: formattedChildren
     }
-  }, formattedChildren);
+  );
 };
 const useItem = () => useContext(Context);
 
-const CheckboxItem = React.forwardRef(({ children, checked, onChange, disabled, ...restProps }, forwardRef) => {
-  const ariaDisabledProps = useAriaDisabled(restProps, true);
-  const { "aria-disabled": ariaDisabled } = ariaDisabledProps;
-  return /* @__PURE__ */ React.createElement(ItemProvider, null, /* @__PURE__ */ React.createElement(StyledCheckboxItem, {
-    ...restProps,
-    ...ariaDisabledProps,
-    ref: forwardRef,
+const CheckboxItem = React.forwardRef(
+  ({
+    children,
     checked,
+    onChange,
     disabled,
-    onCheckedChange: onChange
-  }, children, /* @__PURE__ */ React.createElement(RightSlot, null, /* @__PURE__ */ React.createElement(StyledIndicator, null, (disabled === true || booleanify(ariaDisabled)) && !checked && /* @__PURE__ */ React.createElement(IconProhibit, {
-    weight: "thin",
-    css: { square: "$3", display: "block" }
-  }), checked && /* @__PURE__ */ React.createElement(IconCheckMark, {
-    css: { square: "$3", display: "block" }
-  })))));
-});
+    closeOnSelect = false,
+    ...restProps
+  }, forwardRef) => {
+    const ariaDisabledProps = useAriaDisabled(restProps, closeOnSelect);
+    const { "aria-disabled": ariaDisabled } = ariaDisabledProps;
+    return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsxs(
+      StyledCheckboxItem,
+      {
+        ...restProps,
+        ...ariaDisabledProps,
+        ref: forwardRef,
+        checked,
+        disabled,
+        onCheckedChange: onChange,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(RightSlot, { children: /* @__PURE__ */ jsxs(StyledIndicator, { children: [
+            (disabled === true || booleanify(ariaDisabled)) && !checked && /* @__PURE__ */ jsx(
+              IconProhibit,
+              {
+                weight: "thin",
+                css: { square: "$3", display: "block" }
+              }
+            ),
+            checked && /* @__PURE__ */ jsx(IconCheckMark, { css: { square: "$3", display: "block" } })
+          ] }) })
+        ]
+      }
+    ) });
+  }
+);
 
 const CONTENT_GUTTER = parseInt(theme.space[150]);
 const CONTENT_OFFSET = parseInt(theme.space[50]);
@@ -388,16 +415,19 @@ const ScrollableContent = ({
     };
   }, [maxHeight, overflow, containerSpacing]);
   if (overflow === "auto") {
-    return /* @__PURE__ */ React.createElement(ScrollArea, {
-      css: { margin: `-${CONTENT_BORDER_FOCUS_ITEM}` },
-      type: "always"
-    }, /* @__PURE__ */ React.createElement(ScrollArea.Viewport, {
-      css: { ...getOverflowMaxHeight() }
-    }, children), /* @__PURE__ */ React.createElement(ScrollArea.Scrollbar, {
-      orientation: "vertical"
-    }, /* @__PURE__ */ React.createElement(ScrollArea.Thumb, null)));
+    return /* @__PURE__ */ jsxs(
+      ScrollArea,
+      {
+        css: { margin: `-${CONTENT_BORDER_FOCUS_ITEM}` },
+        type: "always",
+        children: [
+          /* @__PURE__ */ jsx(ScrollArea.Viewport, { css: { ...getOverflowMaxHeight() }, children }),
+          /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {}) })
+        ]
+      }
+    );
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  return /* @__PURE__ */ jsx(Fragment, { children });
 };
 
 const Content = React.forwardRef(
@@ -416,29 +446,31 @@ const Content = React.forwardRef(
     maxHeight,
     children,
     ...restProps
-  }, forwardRef) => /* @__PURE__ */ React.createElement(ContentProvider, {
-    containerSpacing
-  }, /* @__PURE__ */ React.createElement(StyledContent, {
-    ...restProps,
-    ref: forwardRef,
-    loop,
-    side,
-    sideOffset,
-    align,
-    alignOffset,
-    avoidCollisions,
-    collisionPadding,
-    sticky,
-    hideWhenDetached,
-    containerSpacing
-  }, /* @__PURE__ */ React.createElement(ScrollableContent, {
-    ...{ containerSpacing, maxHeight, overflow }
-  }, children)))
+  }, forwardRef) => /* @__PURE__ */ jsx(ContentProvider, { containerSpacing, children: /* @__PURE__ */ jsx(
+    StyledContent,
+    {
+      ...restProps,
+      ref: forwardRef,
+      loop,
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      avoidCollisions,
+      collisionPadding,
+      sticky,
+      hideWhenDetached,
+      containerSpacing,
+      children: /* @__PURE__ */ jsx(ScrollableContent, { ...{ containerSpacing, maxHeight, overflow }, children })
+    }
+  ) })
 );
 
 const StyledItem = styled(RadixDropdownMenu.Item, {
   ...itemDefaults,
   variants: {
+    // This is a hack for the :has() selector
+    // Remove it after Firefox implements it
     hasRightSlot: {
       true: {
         paddingRight: "$600"
@@ -450,25 +482,21 @@ const StyledItem = styled(RadixDropdownMenu.Item, {
 const Item = React.forwardRef(
   ({ disabled = false, ...restProps }, forwardRef) => {
     const ariaDisabledProps = useAriaDisabled(restProps);
-    return /* @__PURE__ */ React.createElement(ItemProvider, null, /* @__PURE__ */ React.createElement(StyledItem, {
-      ...restProps,
-      ...ariaDisabledProps,
-      disabled,
-      ref: forwardRef
-    }));
+    return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(
+      StyledItem,
+      {
+        ...restProps,
+        ...ariaDisabledProps,
+        disabled,
+        ref: forwardRef
+      }
+    ) });
   }
 );
 
 const LinkItem = React.forwardRef(({ children, href, ...restProps }, forwardRef) => {
   const ariaDisabledProps = useAriaDisabled(restProps);
-  return /* @__PURE__ */ React.createElement(Item, {
-    asChild: true,
-    ref: forwardRef,
-    ...restProps,
-    ...ariaDisabledProps
-  }, /* @__PURE__ */ React.createElement("a", {
-    href
-  }, children));
+  return /* @__PURE__ */ jsx(Item, { asChild: true, ref: forwardRef, ...restProps, ...ariaDisabledProps, children: /* @__PURE__ */ jsx("a", { href, children }) });
 });
 
 const StyledRadioGroup = styled(RadixDropdownMenu.RadioGroup, {
@@ -477,11 +505,14 @@ const StyledRadioGroup = styled(RadixDropdownMenu.RadioGroup, {
 
 const RadioGroup = React.forwardRef((props, forwardRef) => {
   const { onChange, ...restProps } = props;
-  return /* @__PURE__ */ React.createElement(StyledRadioGroup, {
-    ...restProps,
-    ref: forwardRef,
-    onValueChange: onChange
-  });
+  return /* @__PURE__ */ jsx(
+    StyledRadioGroup,
+    {
+      ...restProps,
+      ref: forwardRef,
+      onValueChange: onChange
+    }
+  );
 });
 
 const StyledRadioContainer = styled(Primitive.div, {
@@ -540,26 +571,31 @@ const StyledRadioItem = styled(RadixDropdownMenu.RadioItem, {
   }
 });
 
-const RadioItem = React.forwardRef(({ disabled = false, children, ...restProps }, forwardRef) => {
-  const ariaDisabledProps = useAriaDisabled(restProps, true);
-  return /* @__PURE__ */ React.createElement(ItemProvider, null, /* @__PURE__ */ React.createElement(StyledRadioItem, {
-    ...restProps,
-    ...ariaDisabledProps,
-    disabled,
-    ref: forwardRef
-  }, children, /* @__PURE__ */ React.createElement(RightSlot, null, /* @__PURE__ */ React.createElement(StyledRadioContainer, null, /* @__PURE__ */ React.createElement(StyledPill, null), /* @__PURE__ */ React.createElement(StyledProhibited, {
-    weight: "thin"
-  })))));
+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 StyledSeparator = styled(RadixDropdownMenu.Separator, {
   borderTop: "1px solid $border-neutrals-subtle"
 });
 
-const Separator = React.forwardRef((props, forwardRef) => /* @__PURE__ */ React.createElement(StyledSeparator, {
-  ...props,
-  ref: forwardRef
-}));
+const Separator = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledSeparator, { ...props, ref: forwardRef }));
 
 const StyledSwitch = styled(Primitive.span, {
   ...styles.default,
@@ -578,16 +614,30 @@ const StyledSwitchItem = styled(RadixDropdownMenu.CheckboxItem, {
 });
 
 const SwitchItem = React.forwardRef(
-  ({ disabled = false, checked, onChange, children, ...restProps }, forwardRef) => {
-    const ariaDisabledProps = useAriaDisabled(restProps, true);
-    return /* @__PURE__ */ React.createElement(ItemProvider, null, /* @__PURE__ */ React.createElement(StyledSwitchItem, {
-      ...restProps,
-      ...ariaDisabledProps,
-      disabled,
-      checked,
-      onCheckedChange: onChange,
-      ref: forwardRef
-    }, children, /* @__PURE__ */ React.createElement(RightSlot, null, /* @__PURE__ */ React.createElement(StyledSwitch, null, /* @__PURE__ */ React.createElement(Thumb, null)))));
+  ({
+    disabled,
+    checked,
+    onChange,
+    children,
+    closeOnSelect = false,
+    ...restProps
+  }, forwardRef) => {
+    const ariaDisabledProps = useAriaDisabled(restProps, closeOnSelect);
+    return /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsxs(
+      StyledSwitchItem,
+      {
+        ...restProps,
+        ...ariaDisabledProps,
+        disabled,
+        checked,
+        onCheckedChange: onChange,
+        ref: forwardRef,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(RightSlot, { children: /* @__PURE__ */ jsx(StyledSwitch, { children: /* @__PURE__ */ jsx(Thumb, {}) }) })
+        ]
+      }
+    ) });
   }
 );
 
@@ -610,13 +660,16 @@ const StyledTrigger = styled(RadixDropdownMenu.Trigger, {
   }
 });
 
-const Trigger = React.forwardRef(({ asChild = false, onPress, onClick, ...restProps }, forwardRef) => /* @__PURE__ */ React.createElement(StyledTrigger, {
-  ...restProps,
-  onClick: onPress != null ? onPress : onClick,
-  ref: forwardRef,
-  unstyled: !asChild,
-  asChild
-}));
+const Trigger = React.forwardRef(({ asChild = false, onPress, onClick, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(
+  StyledTrigger,
+  {
+    ...restProps,
+    onClick: onPress != null ? onPress : onClick,
+    ref: forwardRef,
+    unstyled: !asChild,
+    asChild
+  }
+));
 
 const StyledIconContainer = styled(Primitive.span, {
   color: "$icon-neutrals-with-text",
@@ -636,17 +689,25 @@ const SubTrigger = React.forwardRef(({ children, disabled = false, ...restProps
     onKeyDown: restProps.onKeyDown,
     "aria-disabled": restProps["aria-disabled"]
   });
-  return /* @__PURE__ */ React.createElement(StyledSubTrigger, {
-    ...restProps,
-    ...ariaDisabledProps,
-    disabled,
-    ref: forwardRef
-  }, children, /* @__PURE__ */ React.createElement(RightSlot, null, /* @__PURE__ */ React.createElement(StyledIconContainer, {
-    "data-testid": process.env.NODE_ENV === "test" ? "submenu-arrow-icon" : void 0
-  }, /* @__PURE__ */ React.createElement(IconChevronRight, {
-    size: "small",
-    weight: "thin"
-  }))));
+  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" })
+          }
+        ) })
+      ]
+    }
+  );
 });
 
 const StyledSubContent = styled(
@@ -669,20 +730,20 @@ const SubContent = React.forwardRef(
     ...restProps
   }, forwardRef) => {
     const { containerSpacing } = useContent();
-    return /* @__PURE__ */ React.createElement(ContentProvider, {
-      containerSpacing
-    }, /* @__PURE__ */ React.createElement(StyledSubContent, {
-      ...restProps,
-      ref: forwardRef,
-      sideOffset,
-      alignOffset,
-      collisionPadding,
-      loop,
-      hideWhenDetached,
-      sticky
-    }, /* @__PURE__ */ React.createElement(ScrollableContent, {
-      ...{ containerSpacing, maxHeight, overflow }
-    }, children)));
+    return /* @__PURE__ */ jsx(ContentProvider, { containerSpacing, children: /* @__PURE__ */ jsx(
+      StyledSubContent,
+      {
+        ...restProps,
+        ref: forwardRef,
+        sideOffset,
+        alignOffset,
+        collisionPadding,
+        loop,
+        hideWhenDetached,
+        sticky,
+        children: /* @__PURE__ */ jsx(ScrollableContent, { ...{ containerSpacing, maxHeight, overflow }, children })
+      }
+    ) });
   }
 );
 
@@ -691,23 +752,24 @@ const StyledSub = styled(RadixDropdownMenu.Sub, {});
 const Sub = React.forwardRef(
   ({ defaultOpen, onOpen, onClose, open, ...restProps }, forwardRef) => {
     const [openState, setOpenState] = useState(defaultOpen);
-    return /* @__PURE__ */ React.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__ */ 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.createElement(Portal$1, {
-  ...props
-});
+const Portal = (props) => /* @__PURE__ */ jsx(Portal$1, { ...props });
 
 const StyledIconSlot = styled(LeftSlot, {
   square: "$5",
@@ -728,29 +790,20 @@ const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
       weight: "thin"
     }
   );
-  useEffect(() => {
+  useLayoutEffect(() => {
     leftSlotMount();
     return () => leftSlotDestroy();
   }, [leftSlotMount, leftSlotDestroy]);
-  return /* @__PURE__ */ React.createElement(StyledIconSlot, {
-    ref: forwardRef,
-    ...restProps
-  }, /* @__PURE__ */ React.createElement(Primitive.svg, {
-    asChild: true,
-    "aria-hidden": true
-  }, formattedChildren));
+  return /* @__PURE__ */ jsx(StyledIconSlot, { ref: forwardRef, ...restProps, children: /* @__PURE__ */ jsx(Primitive.svg, { asChild: true, "aria-hidden": true, children: formattedChildren }) });
 });
 
 const IllustrationSlot = React.forwardRef((props, forwardRef) => {
   const { leftSlotMount, leftSlotDestroy } = useItem();
-  useEffect(() => {
+  useLayoutEffect(() => {
     leftSlotMount();
     return () => leftSlotDestroy();
   }, [leftSlotMount, leftSlotDestroy]);
-  return /* @__PURE__ */ React.createElement(StyledIllustrationSlot, {
-    ref: forwardRef,
-    ...props
-  });
+  return /* @__PURE__ */ jsx(StyledIllustrationSlot, { ref: forwardRef, ...props });
 });
 
 const DropdownMenu = ({
@@ -763,18 +816,21 @@ const DropdownMenu = ({
   ...restProps
 }) => {
   const [openState, setOpenState] = useState(defaultOpen);
-  return /* @__PURE__ */ React.createElement(RadixDropdownMenu.Root, {
-    ...restProps,
-    dir: direction,
-    modal: interactOutside,
-    open: open != null ? open : openState,
-    onOpenChange: (newOpen) => {
-      if (open == null) {
-        setOpenState(newOpen);
+  return /* @__PURE__ */ jsx(
+    RadixDropdownMenu.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;