@mirohq/design-system-dropdown-menu 4.3.1 → 4.3.3

package/dist/main.js

@@ -387,12 +387,16 @@ 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_PADDING_TOKENS = {
+  small: { y: 50, x: 150 },
+  medium: { y: 150, x: 150 },
+  large: { y: 150, x: 300 }
+};
 const CONTENT_PADDING = {
-  small: "$50 $150",
-  medium: "$150",
-  large: "$150 $300"
+  small: "$".concat(CONTENT_PADDING_TOKENS.small.y, " $").concat(CONTENT_PADDING_TOKENS.small.x),
+  medium: "$".concat(CONTENT_PADDING_TOKENS.medium.y, " $").concat(CONTENT_PADDING_TOKENS.medium.x),
+  large: "$".concat(CONTENT_PADDING_TOKENS.large.y, " $").concat(CONTENT_PADDING_TOKENS.large.x)
 };
 const contentDefaults = {
   maxWidth: "$125",
@@ -427,53 +431,47 @@ const contentDefaults = {
     }
   },
   position: "relative",
-  zIndex: "$dropdownMenu"
+  zIndex: "$dropdownMenu",
+  outline: "1px solid transparent !important"
+  // important because Radix overrides outline in element styles
 };
 
 const StyledItemsContainer = designSystemStitches.styled("div", {
   display: "grid",
-  gap: CONTENT_GAP
-});
-const StyledContent = designSystemStitches.styled(RadixDropdownMenu__namespace.Content, {
-  ...contentDefaults,
+  gap: CONTENT_GAP,
   variants: {
     containerSpacing: {
       small: {
-        '&, [role="menu"]': {
-          padding: CONTENT_PADDING.small
-        }
+        padding: CONTENT_PADDING.small
       },
       medium: {
-        '&, [role="menu"]': {
-          padding: CONTENT_PADDING.medium
-        }
+        padding: CONTENT_PADDING.medium
       },
       large: {
-        '&, [role="menu"]': {
-          padding: CONTENT_PADDING.large
-        }
+        padding: CONTENT_PADDING.large
       }
     }
   }
 });
+const StyledContent = designSystemStitches.styled(RadixDropdownMenu__namespace.Content, {
+  ...contentDefaults
+});
 
+const RADIX_CONTENT_AVAILABLE_HEIGHT = "var(--radix-dropdown-menu-content-available-height)";
 const ScrollableContent = ({
   children,
   maxHeight,
   overflow,
-  containerSpacing,
   direction
 }) => {
   if (overflow === "auto") {
-    const [top, , bottom] = CONTENT_PADDING[containerSpacing].split(" ").map((value) => value.replace("$", ""));
-    const gap = top !== void 0 && bottom !== void 0 ? "var(--space-".concat(top, ") + var(--space-").concat(bottom, ")") : "var(--space-".concat(top, ") * 2");
     return /* @__PURE__ */ jsxRuntime.jsxs(designSystemScrollArea.ScrollArea, { dir: direction, type: "always", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         designSystemScrollArea.ScrollArea.Viewport,
         {
-          availableHeight: "var(--radix-dropdown-menu-content-available-height)",
-          verticalGap: gap,
-          maxHeight,
+          css: {
+            maxHeight
+          },
           children
         }
       ),
@@ -530,12 +528,13 @@ const Content = React__default["default"].forwardRef(
         collisionPadding,
         sticky,
         hideWhenDetached,
-        containerSpacing,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           ScrollableContent,
           {
-            ...{ containerSpacing, maxHeight, overflow, direction },
-            children: /* @__PURE__ */ jsxRuntime.jsx(StyledItemsContainer, { children })
+            maxHeight: maxHeight !== void 0 ? "min(".concat(RADIX_CONTENT_AVAILABLE_HEIGHT, ", ").concat(typeof maxHeight === "number" ? "".concat(maxHeight, "px") : maxHeight, ")") : RADIX_CONTENT_AVAILABLE_HEIGHT,
+            overflow,
+            direction,
+            children: /* @__PURE__ */ jsxRuntime.jsx(StyledItemsContainer, { containerSpacing, children })
           }
         )
       }
@@ -827,38 +826,45 @@ const StyledSubContent = designSystemStitches.styled(
   contentDefaults
 );
 
-const SIDE_OFFSET = CONTENT_GUTTER + CONTENT_OFFSET;
 const SubContent = React__default["default"].forwardRef(
   ({
-    sideOffset = SIDE_OFFSET,
-    alignOffset = -CONTENT_GUTTER,
+    sideOffset,
+    alignOffset,
     collisionPadding = 0,
     loop = false,
     hideWhenDetached = true,
     sticky = "partial",
     overflow = "visible",
     maxHeight,
+    collisionBoundary,
     children,
     ...restProps
   }, forwardRef) => {
     const { containerSpacing } = useContent();
     const { direction } = useDropdownContext();
+    const paddingToken = CONTENT_PADDING_TOKENS[containerSpacing];
+    const contentSideOffset = CONTENT_OFFSET + parseInt(designSystemStitches.theme.space[paddingToken.x]);
+    const contentAlignOffset = -parseInt(designSystemStitches.theme.space[paddingToken.y]);
+    const availableHeight = collisionBoundary != null ? getComputedStyle(collisionBoundary).getPropertyValue("height") : RADIX_CONTENT_AVAILABLE_HEIGHT;
     return /* @__PURE__ */ jsxRuntime.jsx(ContentProvider, { containerSpacing, children: /* @__PURE__ */ jsxRuntime.jsx(
       StyledSubContent,
       {
         ...restProps,
         ref: forwardRef,
-        sideOffset,
-        alignOffset,
+        sideOffset: sideOffset != null ? sideOffset : contentSideOffset,
+        alignOffset: alignOffset != null ? alignOffset : contentAlignOffset,
         collisionPadding,
         loop,
         hideWhenDetached,
         sticky,
+        collisionBoundary,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           ScrollableContent,
           {
-            ...{ containerSpacing, maxHeight, overflow, direction },
-            children: /* @__PURE__ */ jsxRuntime.jsx(StyledItemsContainer, { children })
+            maxHeight: maxHeight !== void 0 ? "min(".concat(availableHeight, ", ").concat(typeof maxHeight === "number" ? "".concat(maxHeight, "px") : maxHeight, ")") : availableHeight,
+            overflow,
+            direction,
+            children: /* @__PURE__ */ jsxRuntime.jsx(StyledItemsContainer, { containerSpacing, children })
           }
         )
       }