@crystallize/design-system 1.17.3 → 1.17.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @crystallize/design-system
 
+## 1.17.4
+
+### Patch Changes
+
+- 1e376d9: Since we added the `container` prop with a portal to the Dropdown and ActionMenu components all dropdowns are rendered in the `document.body` when container is not provided, a.k.a the container props is `undefined`. However sometimes we want to render the dropdown next to the trigger, which is possible if we provide a `ref` for a parent element. The problem is that sometimes the parent element ref is not set yet when the dropdown is rendered and thus the dropdown does not really show on the page. To fix this, the container prop now when set explicitly to `null` then we do not render the portal, which then render the dropdown next to the trigger (no need to custom ref to a parent element but render the dropdown in place).
+
 ## 1.17.3
 
 ### Patch Changes

package/dist/index.js

@@ -29126,6 +29126,13 @@ function DropdownMenuRoot({
   container,
   ...delegated
 }) {
+  const contentProps = {
+    align: alignContent,
+    sideOffset: 5,
+    className: "c-dropdown-menu-content",
+    children: content,
+    ...delegated
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DropdownMenuPrimitive3.Root, {
     onOpenChange,
     children: [
@@ -29134,14 +29141,12 @@ function DropdownMenuRoot({
         asChild: true,
         children
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive3.Portal, {
+      container === null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive3.Content, {
+        ...contentProps
+      }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive3.Portal, {
         container,
         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive3.Content, {
-          align: alignContent,
-          sideOffset: 5,
-          className: "c-dropdown-menu-content",
-          ...delegated,
-          children: content
+          ...contentProps
         })
       })
     ]

package/dist/index.mjs

@@ -238,6 +238,13 @@ function DropdownMenuRoot({
   container,
   ...delegated
 }) {
+  const contentProps = {
+    align: alignContent,
+    sideOffset: 5,
+    className: "c-dropdown-menu-content",
+    children: content,
+    ...delegated
+  };
   return /* @__PURE__ */ jsxs3(DropdownMenuPrimitive3.Root, {
     onOpenChange,
     children: [
@@ -246,14 +253,12 @@ function DropdownMenuRoot({
         asChild: true,
         children
       }),
-      /* @__PURE__ */ jsx6(DropdownMenuPrimitive3.Portal, {
+      container === null ? /* @__PURE__ */ jsx6(DropdownMenuPrimitive3.Content, {
+        ...contentProps
+      }) : /* @__PURE__ */ jsx6(DropdownMenuPrimitive3.Portal, {
         container,
         children: /* @__PURE__ */ jsx6(DropdownMenuPrimitive3.Content, {
-          align: alignContent,
-          sideOffset: 5,
-          className: "c-dropdown-menu-content",
-          ...delegated,
-          children: content
+          ...contentProps
         })
       })
     ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.17.3",
+  "version": "1.17.4",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/dropdown-menu/dropdown-menu-root.tsx

@@ -21,21 +21,26 @@ export function DropdownMenuRoot({
   container,
   ...delegated
 }: DropdownMenuRootProps) {
+  const contentProps = {
+    align: alignContent,
+    sideOffset: 5,
+    className: 'c-dropdown-menu-content',
+    children: content,
+    ...delegated,
+  };
+
   return (
     <DropdownMenuPrimitive.Root onOpenChange={onOpenChange}>
       <DropdownMenuPrimitive.Trigger disabled={disabled} asChild>
         {children}
       </DropdownMenuPrimitive.Trigger>
-      <DropdownMenuPrimitive.Portal container={container}>
-        <DropdownMenuPrimitive.Content
-          align={alignContent}
-          sideOffset={5}
-          className="c-dropdown-menu-content"
-          {...delegated}
-        >
-          {content}
-        </DropdownMenuPrimitive.Content>
-      </DropdownMenuPrimitive.Portal>
+      {container === null ? (
+        <DropdownMenuPrimitive.Content {...contentProps} />
+      ) : (
+        <DropdownMenuPrimitive.Portal container={container}>
+          <DropdownMenuPrimitive.Content {...contentProps} />
+        </DropdownMenuPrimitive.Portal>
+      )}
     </DropdownMenuPrimitive.Root>
   );
 }