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

package/dist/main.js

@@ -13,6 +13,7 @@ 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 }; }
@@ -105,7 +106,7 @@ const ContentProvider = ({
   );
   const formattedChildren = designSystemUtils.addPropsToChildren(children, () => true, {
     UNSAFE_style: {
-      "--right-slot-max-width": `${Math.ceil(maxWidth)}px`
+      "--right-slot-max-width": "".concat(Math.ceil(maxWidth), "px")
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -167,8 +168,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",
@@ -176,8 +176,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"
@@ -191,10 +190,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)"
     }
   },
@@ -225,16 +224,13 @@ const StyledIndicator = designSystemStitches.styled(designSystemPrimitive.Primit
 });
 const StyledCheckboxItem = designSystemStitches.styled(RadixDropdownMenu__namespace.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"
   }
 });
@@ -368,7 +364,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)": {
@@ -433,9 +429,9 @@ const ScrollableContent = ({
 }) => {
   const getOverflowMaxHeight = React.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
     };
@@ -444,7 +440,7 @@ const ScrollableContent = ({
     return /* @__PURE__ */ jsxRuntime.jsxs(
       designSystemScrollArea.ScrollArea,
       {
-        css: { margin: `-${CONTENT_BORDER_FOCUS_ITEM}` },
+        css: { margin: "-".concat(CONTENT_BORDER_FOCUS_ITEM) },
         type: "always",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystemScrollArea.ScrollArea.Viewport, { css: { ...getOverflowMaxHeight() }, children }),
@@ -563,35 +559,29 @@ const StyledProhibited = designSystemStitches.styled(designSystemIcons.IconProhi
 });
 const StyledRadioItem = designSystemStitches.styled(RadixDropdownMenu__namespace.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"
     }
   }
@@ -630,13 +620,10 @@ const StyledSwitch = designSystemStitches.styled(designSystemPrimitive.Primitive
 });
 const StyledSwitchItem = designSystemStitches.styled(RadixDropdownMenu__namespace.CheckboxItem, {
   ...itemDefaults,
-  [`&[data-state="checked"] ${StyledSwitch}`]: designSystemBaseSwitch.styles.checked,
-  [`&[data-state="checked"]:hover:not([aria-disabled="true"]) ${StyledSwitch}`]: designSystemBaseSwitch.styles.checkedHovered,
-  [`&:hover:not([aria-disabled="true"]) ${StyledSwitch}`]: designSystemBaseSwitch.styles.hovered,
-  [`
-    &[aria-disabled="true"] ${StyledSwitch},
-    &[data-disabled] ${StyledSwitch}
-  `]: designSystemBaseSwitch.styles.disabled
+  ['&[data-state="checked"] '.concat(StyledSwitch)]: designSystemBaseSwitch.styles.checked,
+  ['&[data-state="checked"]:hover:not([aria-disabled="true"]) '.concat(StyledSwitch)]: designSystemBaseSwitch.styles.checkedHovered,
+  ['&:hover:not([aria-disabled="true"]) '.concat(StyledSwitch)]: designSystemBaseSwitch.styles.hovered,
+  ['\n    &[aria-disabled="true"] '.concat(StyledSwitch, ",\n    &[data-disabled] ").concat(StyledSwitch, "\n  ")]: designSystemBaseSwitch.styles.disabled
 });
 
 const SwitchItem = React__default["default"].forwardRef(
@@ -686,16 +673,32 @@ const StyledTrigger = designSystemStitches.styled(RadixDropdownMenu__namespace.T
   }
 });
 
-const Trigger = React__default["default"].forwardRef(({ asChild = false, onPress, onClick, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
-  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",
@@ -705,7 +708,7 @@ const StyledIconContainer = designSystemStitches.styled(designSystemPrimitive.Pr
 const StyledSubTrigger = designSystemStitches.styled(RadixDropdownMenu__namespace.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"
   }
 });