@mirohq/design-system-dropdown-menu 3.5.1 → 3.5.3

package/dist/module.js

@@ -8,7 +8,7 @@ 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 { ScrollArea } from '@mirohq/design-system';
 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';
@@ -80,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(
@@ -142,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",
@@ -151,14 +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'`
-  },
-  "&:not(:last-child)": {
-    marginBottom: "$50"
-  },
-  "&:not(:first-child)": {
-    marginTop: "$50"
+    gridTemplateAreas: "'item-text right-slot'\n    'item-description right-slot'"
   },
   ...focus.css({
     boxShadow: "$focus-small",
@@ -166,10 +158,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)"
     }
   },
@@ -200,16 +192,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"
   }
 });
@@ -329,6 +318,7 @@ const CheckboxItem = React.forwardRef(
   }
 );
 
+const CONTENT_GAP = "$50";
 const CONTENT_GUTTER = parseInt(theme.space[150]);
 const CONTENT_OFFSET = parseInt(theme.space[50]);
 const CONTENT_BORDER_FOCUS_ITEM = "2px";
@@ -343,7 +333,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)": {
@@ -377,6 +367,10 @@ const contentDefaults = {
   zIndex: "$dropdownMenu"
 };
 
+const StyledItemsContainer = styled("div", {
+  display: "grid",
+  gap: CONTENT_GAP
+});
 const StyledContent = styled(RadixDropdownMenu.Content, {
   ...contentDefaults,
   variants: {
@@ -408,9 +402,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
     };
@@ -419,7 +413,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 }),
@@ -462,7 +456,7 @@ const Content = React.forwardRef(
       sticky,
       hideWhenDetached,
       containerSpacing,
-      children: /* @__PURE__ */ jsx(ScrollableContent, { ...{ containerSpacing, maxHeight, overflow }, children })
+      children: /* @__PURE__ */ jsx(ScrollableContent, { ...{ containerSpacing, maxHeight, overflow }, children: /* @__PURE__ */ jsx(StyledItemsContainer, { children }) })
     }
   ) })
 );
@@ -501,7 +495,8 @@ const LinkItem = React.forwardRef(({ children, href, ...restProps }, forwardRef)
 });
 
 const StyledRadioGroup = styled(RadixDropdownMenu.RadioGroup, {
-  marginY: "$50"
+  display: "grid",
+  gap: CONTENT_GAP
 });
 
 const RadioGroup = React.forwardRef((props, forwardRef) => {
@@ -538,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"
     }
   }
@@ -605,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(
@@ -696,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"
   }
 });
@@ -758,7 +744,7 @@ const SubContent = React.forwardRef(
         loop,
         hideWhenDetached,
         sticky,
-        children: /* @__PURE__ */ jsx(ScrollableContent, { ...{ containerSpacing, maxHeight, overflow }, children })
+        children: /* @__PURE__ */ jsx(ScrollableContent, { ...{ containerSpacing, maxHeight, overflow }, children: /* @__PURE__ */ jsx(StyledItemsContainer, { children }) })
       }
     ) });
   }