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

package/dist/main.js

@@ -11,7 +11,7 @@ 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 designSystem = require('@mirohq/design-system');
 var designSystemBaseSwitch = require('@mirohq/design-system-base-switch');
 var utils = require('@react-aria/utils');
 var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
@@ -106,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(
@@ -168,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",
@@ -177,14 +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'`
-  },
-  "&:not(:last-child)": {
-    marginBottom: "$50"
-  },
-  "&:not(:first-child)": {
-    marginTop: "$50"
+    gridTemplateAreas: "'item-text right-slot'\n    'item-description right-slot'"
   },
   ...designSystemStyles.focus.css({
     boxShadow: "$focus-small",
@@ -192,10 +184,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)"
     }
   },
@@ -226,16 +218,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"
   }
 });
@@ -355,6 +344,7 @@ const CheckboxItem = React__default["default"].forwardRef(
   }
 );
 
+const CONTENT_GAP = "$50";
 const CONTENT_GUTTER = parseInt(designSystemStitches.theme.space[150]);
 const CONTENT_OFFSET = parseInt(designSystemStitches.theme.space[50]);
 const CONTENT_BORDER_FOCUS_ITEM = "2px";
@@ -369,7 +359,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)": {
@@ -403,6 +393,10 @@ const contentDefaults = {
   zIndex: "$dropdownMenu"
 };
 
+const StyledItemsContainer = designSystemStitches.styled("div", {
+  display: "grid",
+  gap: CONTENT_GAP
+});
 const StyledContent = designSystemStitches.styled(RadixDropdownMenu__namespace.Content, {
   ...contentDefaults,
   variants: {
@@ -434,22 +428,22 @@ 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
     };
   }, [maxHeight, overflow, containerSpacing]);
   if (overflow === "auto") {
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      designSystemScrollArea.ScrollArea,
+      designSystem.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 }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystemScrollArea.ScrollArea.Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsxRuntime.jsx(designSystemScrollArea.ScrollArea.Thumb, {}) })
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.ScrollArea.Viewport, { css: { ...getOverflowMaxHeight() }, children }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.ScrollArea.Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.ScrollArea.Thumb, {}) })
         ]
       }
     );
@@ -488,7 +482,7 @@ const Content = React__default["default"].forwardRef(
       sticky,
       hideWhenDetached,
       containerSpacing,
-      children: /* @__PURE__ */ jsxRuntime.jsx(ScrollableContent, { ...{ containerSpacing, maxHeight, overflow }, children })
+      children: /* @__PURE__ */ jsxRuntime.jsx(ScrollableContent, { ...{ containerSpacing, maxHeight, overflow }, children: /* @__PURE__ */ jsxRuntime.jsx(StyledItemsContainer, { children }) })
     }
   ) })
 );
@@ -527,7 +521,8 @@ const LinkItem = React__default["default"].forwardRef(({ children, href, ...rest
 });
 
 const StyledRadioGroup = designSystemStitches.styled(RadixDropdownMenu__namespace.RadioGroup, {
-  marginY: "$50"
+  display: "grid",
+  gap: CONTENT_GAP
 });
 
 const RadioGroup = React__default["default"].forwardRef((props, forwardRef) => {
@@ -564,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"
     }
   }
@@ -631,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(
@@ -722,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"
   }
 });
@@ -784,7 +770,7 @@ const SubContent = React__default["default"].forwardRef(
         loop,
         hideWhenDetached,
         sticky,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ScrollableContent, { ...{ containerSpacing, maxHeight, overflow }, children })
+        children: /* @__PURE__ */ jsxRuntime.jsx(ScrollableContent, { ...{ containerSpacing, maxHeight, overflow }, children: /* @__PURE__ */ jsxRuntime.jsx(StyledItemsContainer, { children }) })
       }
     ) });
   }