@mastra/playground-ui 31.0.0-alpha.8 → 31.0.0-alpha.9

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @mastra/playground-ui
 
+## 31.0.0-alpha.9
+
+### Patch Changes
+
+- Fixed dropdowns, menus, comboboxes, and popovers being unclickable when opened inside a SideDialog (for example the dataset selector in the "Save as Dataset Item" panel on the Traces tab). These popups now render inside the dialog so they stay interactive within the modal drawer. ([#17479](https://github.com/mastra-ai/mastra/pull/17479))
+
+- Updated dependencies [[`850af77`](https://github.com/mastra-ai/mastra/commit/850af7779cb87c350804488734544a5b1843de25), [`7b0d34c`](https://github.com/mastra-ai/mastra/commit/7b0d34cfe4a2fce22ac86ae17404685ff67a2ddb)]:
+  - @mastra/core@1.38.0-alpha.9
+  - @mastra/client-js@1.22.0-alpha.9
+  - @mastra/react@0.4.3-alpha.9
+
 ## 31.0.0-alpha.8
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -6505,6 +6505,17 @@ const comboboxStyles = {
   error: "text-ui-sm text-accent2"
 };
 
+const PortalContainerContext = React__namespace.createContext(null);
+function PortalContainerProvider({
+  container,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalContainerContext.Provider, { value: container, children });
+}
+function usePortalContainer() {
+  return React__namespace.useContext(PortalContainerContext);
+}
+
 const triggerVariantStyles = {
   default: comboboxStyles.triggerDefault,
   ghost: comboboxStyles.triggerGhost,
@@ -6527,6 +6538,8 @@ function Combobox({
   error
 }) {
   const selectedOption = options.find((option) => option.value === value) ?? null;
+  const portalContainer = usePortalContainer();
+  const resolvedContainer = container ?? portalContainer;
   const handleSelect = (item) => {
     if (item) {
       onValueChange?.(item.value);
@@ -6562,7 +6575,7 @@ function Combobox({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Positioner, { align: "start", sideOffset: 4, className: comboboxStyles.positioner, children: /* @__PURE__ */ jsxRuntime.jsxs(combobox.Combobox.Popup, { className: comboboxStyles.popup, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Positioner, { align: "start", sideOffset: 4, className: comboboxStyles.positioner, children: /* @__PURE__ */ jsxRuntime.jsxs(combobox.Combobox.Popup, { className: comboboxStyles.popup, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: comboboxStyles.searchContainer, children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: comboboxStyles.searchIcon }),
               /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Input, { className: comboboxStyles.searchInput, placeholder: searchPlaceholder })
@@ -7102,30 +7115,34 @@ const SelectTrigger = React__namespace.forwardRef(
 );
 SelectTrigger.displayName = "SelectTrigger";
 const SelectContent = React__namespace.forwardRef(
-  ({ className, children, position: _position, container, side = "bottom", align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(select.Select.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
-    select.Select.Positioner,
-    {
-      className: "z-50 outline-none",
-      side,
-      align,
-      sideOffset,
-      alignItemWithTrigger: false,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        select.Select.Popup,
-        {
-          ref,
-          className: cn(
-            "relative z-50 min-w-32 min-w-[var(--anchor-width)] max-h-dropdown-max-height max-h-[var(--available-height)] overflow-y-auto overflow-x-hidden rounded-xl border border-border1 bg-surface3 p-1 text-neutral4 shadow-dialog origin-[var(--transform-origin)]",
-            "data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95",
-            "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-            className
-          ),
-          ...props,
-          children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.List, { children })
-        }
-      )
-    }
-  ) })
+  ({ className, children, position: _position, container, side = "bottom", align = "start", sideOffset = 4, ...props }, ref) => {
+    const portalContainer = usePortalContainer();
+    const resolvedContainer = container ?? portalContainer;
+    return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Portal, { container: resolvedContainer ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+      select.Select.Positioner,
+      {
+        className: "z-50 outline-none",
+        side,
+        align,
+        sideOffset,
+        alignItemWithTrigger: false,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          select.Select.Popup,
+          {
+            ref,
+            className: cn(
+              "relative z-50 min-w-32 min-w-[var(--anchor-width)] max-h-dropdown-max-height max-h-[var(--available-height)] overflow-y-auto overflow-x-hidden rounded-xl border border-border1 bg-surface3 p-1 text-neutral4 shadow-dialog origin-[var(--transform-origin)]",
+              "data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95",
+              "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+              className
+            ),
+            ...props,
+            children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.List, { children })
+          }
+        )
+      }
+    ) });
+  }
 );
 SelectContent.displayName = "SelectContent";
 const SelectItem = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7548,47 +7565,54 @@ const DropdownMenuSubTrigger = React__namespace.forwardRef(
 );
 DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
 const DropdownMenuSubContent = React__namespace.forwardRef(
-  ({ className, align = "start", alignOffset = -4, side = "right", sideOffset = 0, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    menu.Menu.Positioner,
-    {
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      className: "z-50 outline-none",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        menu.Menu.Popup,
-        {
-          ref,
-          "data-slot": "dropdown-menu-sub-content",
-          className: cn(popupClass, className),
-          ...props
-        }
-      )
-    }
-  ) })
+  ({ className, align = "start", alignOffset = -4, side = "right", sideOffset = 0, ...props }, ref) => {
+    const portalContainer = usePortalContainer();
+    return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { container: portalContainer ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+      menu.Menu.Positioner,
+      {
+        align,
+        alignOffset,
+        side,
+        sideOffset,
+        className: "z-50 outline-none",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          menu.Menu.Popup,
+          {
+            ref,
+            "data-slot": "dropdown-menu-sub-content",
+            className: cn(popupClass, className),
+            ...props
+          }
+        )
+      }
+    ) });
+  }
 );
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
 const DropdownMenuContent = React__namespace.forwardRef(
-  ({ className, container, align = "start", alignOffset = 0, side = "bottom", sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
-    menu.Menu.Positioner,
-    {
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      className: "z-50 outline-none",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        menu.Menu.Popup,
-        {
-          ref,
-          "data-slot": "dropdown-menu-content",
-          className: cn(popupClass, className),
-          ...props
-        }
-      )
-    }
-  ) })
+  ({ className, container, align = "start", alignOffset = 0, side = "bottom", sideOffset = 8, ...props }, ref) => {
+    const portalContainer = usePortalContainer();
+    const resolvedContainer = container ?? portalContainer ?? void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      menu.Menu.Positioner,
+      {
+        align,
+        alignOffset,
+        side,
+        sideOffset,
+        className: "z-50 outline-none",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          menu.Menu.Popup,
+          {
+            ref,
+            "data-slot": "dropdown-menu-content",
+            className: cn(popupClass, className),
+            ...props
+          }
+        )
+      }
+    ) });
+  }
 );
 DropdownMenuContent.displayName = "DropdownMenuContent";
 const DropdownMenuItem = React__namespace.forwardRef(
@@ -8645,9 +8669,11 @@ const PopoverTrigger = React__namespace.forwardRef(
 );
 PopoverTrigger.displayName = "PopoverTrigger";
 const PopoverContent = React__namespace.forwardRef(
-  ({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }, ref) => {
+  ({ className, container, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }, ref) => {
     const classNameString = typeof className === "string" ? className : void 0;
-    return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    const portalContainer = usePortalContainer();
+    const resolvedContainer = container ?? portalContainer;
+    return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Portal, { container: resolvedContainer ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
       popover.Popover.Positioner,
       {
         align,
@@ -12279,6 +12305,7 @@ function SideDialogRoot({
   className
 }) {
   const isConfirmation = variant === "confirmation";
+  const [portalHost, setPortalHost] = React__namespace.useState(null);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Drawer,
     {
@@ -12323,7 +12350,8 @@ function SideDialogRoot({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(DrawerInteractive, { render: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setPortalHost, className: "absolute" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(PortalContainerProvider, { container: portalHost, children: /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   className: cn("grid h-full", {
@@ -12331,7 +12359,7 @@ function SideDialogRoot({
                   }),
                   children
                 }
-              )
+              ) })
             ]
           }
         ) })