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

package/dist/module.js

@@ -3,13 +3,14 @@ import React, { createContext, useState, useRef, useCallback, useContext, useMem
 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';
-import { addPropsToChildren, booleanify } from '@mirohq/design-system-utils';
+import { addPropsToChildren, booleanify, mergeRefs } 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 { isVirtualClick } from '@react-aria/utils';
 import { styles as styles$1, isIconComponent } from '@mirohq/design-system-base-icon';
 
 const ItemDescription = styled(Primitive.div, {
@@ -79,7 +80,7 @@ const ContentProvider = ({
   );
   const formattedChildren = addPropsToChildren(children, () => true, {
     UNSAFE_style: {
-      "--right-slot-max-width": `${Math.ceil(maxWidth)}px`
+      "--right-slot-max-width": "".concat(Math.ceil(maxWidth), "px")
     }
   });
   return /* @__PURE__ */ jsx(
@@ -141,8 +142,7 @@ const itemDefaults = {
   display: "grid",
   gridTemplateColumns: "auto 1fr minmax(min-content, var(--right-slot-max-width))",
   gridTemplateRows: "auto 1fr",
-  gridTemplateAreas: `'left-slot item-text right-slot'
-    'left-slot item-description right-slot'`,
+  gridTemplateAreas: "'left-slot item-text right-slot'\n    'left-slot item-description right-slot'",
   alignItems: "start",
   padding: "10px $100",
   position: "relative",
@@ -150,8 +150,7 @@ const itemDefaults = {
   cursor: "pointer",
   "&[data-no-left-slot]": {
     gridTemplateColumns: "1fr minmax(auto, var(--right-slot-max-width))",
-    gridTemplateAreas: `'item-text right-slot'
-    'item-description right-slot'`
+    gridTemplateAreas: "'item-text right-slot'\n    'item-description right-slot'"
   },
   "&:not(:last-child)": {
     marginBottom: "$50"
@@ -165,10 +164,10 @@ const itemDefaults = {
   }),
   '&:disabled, &[aria-disabled="true"], &[data-disabled]': {
     cursor: "default",
-    [`&, & ${ItemDescription}, & ${HotkeySlot}`]: {
+    ["&, & ".concat(ItemDescription, ", & ").concat(HotkeySlot)]: {
       color: "$text-neutrals-disabled"
     },
-    [`& ${StyledIllustrationSlot}`]: {
+    ["& ".concat(StyledIllustrationSlot)]: {
       filter: "grayscale(1)"
     }
   },
@@ -199,16 +198,13 @@ const StyledIndicator = styled(Primitive.span, {
 });
 const StyledCheckboxItem = styled(RadixDropdownMenu.CheckboxItem, {
   ...itemDefaults,
-  [`&[data-state="checked"] ${StyledIndicator}`]: {
+  ['&[data-state="checked"] '.concat(StyledIndicator)]: {
     color: "$icon-primary"
   },
-  [`&[data-state="checked"]:hover:not([aria-disabled="true"]) ${StyledIndicator}`]: {
+  ['&[data-state="checked"]:hover:not([aria-disabled="true"]) '.concat(StyledIndicator)]: {
     color: "$icon-primary-hover"
   },
-  [`
-    &[aria-disabled="true"] ${StyledIndicator},
-    &[data-disabled] ${StyledIndicator}
-  `]: {
+  ['\n    &[aria-disabled="true"] '.concat(StyledIndicator, ",\n    &[data-disabled] ").concat(StyledIndicator, "\n  ")]: {
     color: "$icon-neutrals-disabled"
   }
 });
@@ -342,7 +338,7 @@ const contentDefaults = {
   borderRadius: "$50",
   boxShadow: "$50",
   "& [data-radix-scroll-area-viewport]": {
-    padding: `${CONTENT_BORDER_FOCUS_ITEM} $50 ${CONTENT_BORDER_FOCUS_ITEM} ${CONTENT_BORDER_FOCUS_ITEM}`,
+    padding: "".concat(CONTENT_BORDER_FOCUS_ITEM, " $50 ").concat(CONTENT_BORDER_FOCUS_ITEM, " ").concat(CONTENT_BORDER_FOCUS_ITEM),
     boxSizing: "border-box"
   },
   "@media (prefers-reduced-motion: no-preference)": {
@@ -407,9 +403,9 @@ const ScrollableContent = ({
 }) => {
   const getOverflowMaxHeight = useCallback(() => {
     const [top, , bottom] = CONTENT_PADDING[containerSpacing].split(" ").map((value) => value.replace("$", ""));
-    const topBottom = top !== void 0 && bottom !== void 0 ? `var(--space-${top}) + var(--space-${bottom})` : `var(--space-${top}) + var(--space-${top})`;
-    const overflowMaxHeigh = overflow === "auto" ? `calc(var(--radix-dropdown-menu-content-available-height) - (${topBottom}))` : "auto";
-    const newMaxHeight = `calc(${maxHeight} - (${topBottom}))`;
+    const topBottom = top !== void 0 && bottom !== void 0 ? "var(--space-".concat(top, ") + var(--space-").concat(bottom, ")") : "var(--space-".concat(top, ") + var(--space-").concat(top, ")");
+    const overflowMaxHeigh = overflow === "auto" ? "calc(var(--radix-dropdown-menu-content-available-height) - (".concat(topBottom, "))") : "auto";
+    const newMaxHeight = "calc(".concat(maxHeight, " - (").concat(topBottom, "))");
     return {
       maxHeight: maxHeight === void 0 ? overflowMaxHeigh : newMaxHeight
     };
@@ -418,7 +414,7 @@ const ScrollableContent = ({
     return /* @__PURE__ */ jsxs(
       ScrollArea,
       {
-        css: { margin: `-${CONTENT_BORDER_FOCUS_ITEM}` },
+        css: { margin: "-".concat(CONTENT_BORDER_FOCUS_ITEM) },
         type: "always",
         children: [
           /* @__PURE__ */ jsx(ScrollArea.Viewport, { css: { ...getOverflowMaxHeight() }, children }),
@@ -537,35 +533,29 @@ const StyledProhibited = styled(IconProhibit, {
 });
 const StyledRadioItem = styled(RadixDropdownMenu.RadioItem, {
   ...itemDefaults,
-  [`&[data-state="checked"] ${StyledRadioContainer}`]: {
+  ['&[data-state="checked"] '.concat(StyledRadioContainer)]: {
     color: "$icon-primary",
     borderColor: "$border-primary",
-    [`& ${StyledPill}`]: {
+    ["& ".concat(StyledPill)]: {
       display: "block",
       backgroundColor: "$background-primary-prominent-selected"
     }
   },
-  [`&:hover:not([aria-disabled="true"]) ${StyledRadioContainer}`]: {
+  ['&:hover:not([aria-disabled="true"]) '.concat(StyledRadioContainer)]: {
     borderColor: "$border-primary-hover",
-    [`& ${StyledPill}`]: {
+    ["& ".concat(StyledPill)]: {
       backgroundColor: "$background-primary-prominent-hover"
     }
   },
-  [`
-    &[aria-disabled="true"] ${StyledRadioContainer},
-    &[data-disabled] ${StyledRadioContainer}
-  `]: {
+  ['\n    &[aria-disabled="true"] '.concat(StyledRadioContainer, ",\n    &[data-disabled] ").concat(StyledRadioContainer, "\n  ")]: {
     color: "$icon-neutrals-disabled",
     borderColor: "$border-neutrals-disabled",
-    [`& ${StyledPill}`]: {
+    ["& ".concat(StyledPill)]: {
       backgroundColor: "$icon-neutrals-disabled"
     }
   },
   '&[data-state="unchecked"]': {
-    [`
-      &[aria-disabled="true"] ${StyledProhibited},
-      &[data-disabled] ${StyledProhibited}
-    `]: {
+    ['\n      &[aria-disabled="true"] '.concat(StyledProhibited, ",\n      &[data-disabled] ").concat(StyledProhibited, "\n    ")]: {
       display: "flex"
     }
   }
@@ -604,13 +594,10 @@ const StyledSwitch = styled(Primitive.span, {
 });
 const StyledSwitchItem = styled(RadixDropdownMenu.CheckboxItem, {
   ...itemDefaults,
-  [`&[data-state="checked"] ${StyledSwitch}`]: styles.checked,
-  [`&[data-state="checked"]:hover:not([aria-disabled="true"]) ${StyledSwitch}`]: styles.checkedHovered,
-  [`&:hover:not([aria-disabled="true"]) ${StyledSwitch}`]: styles.hovered,
-  [`
-    &[aria-disabled="true"] ${StyledSwitch},
-    &[data-disabled] ${StyledSwitch}
-  `]: styles.disabled
+  ['&[data-state="checked"] '.concat(StyledSwitch)]: styles.checked,
+  ['&[data-state="checked"]:hover:not([aria-disabled="true"]) '.concat(StyledSwitch)]: styles.checkedHovered,
+  ['&:hover:not([aria-disabled="true"]) '.concat(StyledSwitch)]: styles.hovered,
+  ['\n    &[aria-disabled="true"] '.concat(StyledSwitch, ",\n    &[data-disabled] ").concat(StyledSwitch, "\n  ")]: styles.disabled
 });
 
 const SwitchItem = React.forwardRef(
@@ -660,16 +647,32 @@ const StyledTrigger = styled(RadixDropdownMenu.Trigger, {
   }
 });
 
-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 Trigger = React.forwardRef(({ asChild = false, onPress, onClick, ...restProps }, forwardRef) => {
+  const ref = useRef(null);
+  const handleVirtualClick = (e) => {
+    var _a;
+    if (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__ */ jsx(
+    StyledTrigger,
+    {
+      ...restProps,
+      onClick: (e) => {
+        handleVirtualClick(e);
+        onClick == null ? void 0 : onClick(e);
+      },
+      ref: mergeRefs([ref, forwardRef]),
+      unstyled: !asChild,
+      asChild
+    }
+  );
+});
 
 const StyledIconContainer = styled(Primitive.span, {
   color: "$icon-neutrals-with-text",
@@ -679,7 +682,7 @@ const StyledIconContainer = styled(Primitive.span, {
 const StyledSubTrigger = styled(RadixDropdownMenu.SubTrigger, {
   ...itemDefaults,
   '&[data-state="open"]': itemDefaults['&:hover:not([aria-disabled="true"])'],
-  [`&[data-state="open"] ${StyledIconContainer}, &:hover:not([aria-disabled="true"]) ${StyledIconContainer}`]: {
+  ['&[data-state="open"] '.concat(StyledIconContainer, ', &:hover:not([aria-disabled="true"]) ').concat(StyledIconContainer)]: {
     color: "$icon-primary-hover"
   }
 });