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

package/dist/index.es.js

@@ -6485,6 +6485,17 @@ const comboboxStyles = {
   error: "text-ui-sm text-accent2"
 };
 
+const PortalContainerContext = React.createContext(null);
+function PortalContainerProvider({
+  container,
+  children
+}) {
+  return /* @__PURE__ */ jsx(PortalContainerContext.Provider, { value: container, children });
+}
+function usePortalContainer() {
+  return React.useContext(PortalContainerContext);
+}
+
 const triggerVariantStyles = {
   default: comboboxStyles.triggerDefault,
   ghost: comboboxStyles.triggerGhost,
@@ -6507,6 +6518,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);
@@ -6542,7 +6555,7 @@ function Combobox({
               ]
             }
           ),
-          /* @__PURE__ */ jsx(Combobox$1.Portal, { container, children: /* @__PURE__ */ jsx(Combobox$1.Positioner, { align: "start", sideOffset: 4, className: comboboxStyles.positioner, children: /* @__PURE__ */ jsxs(Combobox$1.Popup, { className: comboboxStyles.popup, children: [
+          /* @__PURE__ */ jsx(Combobox$1.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsx(Combobox$1.Positioner, { align: "start", sideOffset: 4, className: comboboxStyles.positioner, children: /* @__PURE__ */ jsxs(Combobox$1.Popup, { className: comboboxStyles.popup, children: [
             /* @__PURE__ */ jsxs("div", { className: comboboxStyles.searchContainer, children: [
               /* @__PURE__ */ jsx(Search, { className: comboboxStyles.searchIcon }),
               /* @__PURE__ */ jsx(Combobox$1.Input, { className: comboboxStyles.searchInput, placeholder: searchPlaceholder })
@@ -7082,30 +7095,34 @@ const SelectTrigger = React.forwardRef(
 );
 SelectTrigger.displayName = "SelectTrigger";
 const SelectContent = React.forwardRef(
-  ({ className, children, position: _position, container, side = "bottom", align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Select$1.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
-    Select$1.Positioner,
-    {
-      className: "z-50 outline-none",
-      side,
-      align,
-      sideOffset,
-      alignItemWithTrigger: false,
-      children: /* @__PURE__ */ jsx(
-        Select$1.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__ */ jsx(Select$1.List, { children })
-        }
-      )
-    }
-  ) })
+  ({ className, children, position: _position, container, side = "bottom", align = "start", sideOffset = 4, ...props }, ref) => {
+    const portalContainer = usePortalContainer();
+    const resolvedContainer = container ?? portalContainer;
+    return /* @__PURE__ */ jsx(Select$1.Portal, { container: resolvedContainer ?? void 0, children: /* @__PURE__ */ jsx(
+      Select$1.Positioner,
+      {
+        className: "z-50 outline-none",
+        side,
+        align,
+        sideOffset,
+        alignItemWithTrigger: false,
+        children: /* @__PURE__ */ jsx(
+          Select$1.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__ */ jsx(Select$1.List, { children })
+          }
+        )
+      }
+    ) });
+  }
 );
 SelectContent.displayName = "SelectContent";
 const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
@@ -7528,47 +7545,54 @@ const DropdownMenuSubTrigger = React.forwardRef(
 );
 DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
 const DropdownMenuSubContent = React.forwardRef(
-  ({ className, align = "start", alignOffset = -4, side = "right", sideOffset = 0, ...props }, ref) => /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
-    Menu.Positioner,
-    {
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      className: "z-50 outline-none",
-      children: /* @__PURE__ */ jsx(
-        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__ */ jsx(Menu.Portal, { container: portalContainer ?? void 0, children: /* @__PURE__ */ jsx(
+      Menu.Positioner,
+      {
+        align,
+        alignOffset,
+        side,
+        sideOffset,
+        className: "z-50 outline-none",
+        children: /* @__PURE__ */ jsx(
+          Menu.Popup,
+          {
+            ref,
+            "data-slot": "dropdown-menu-sub-content",
+            className: cn(popupClass, className),
+            ...props
+          }
+        )
+      }
+    ) });
+  }
 );
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
 const DropdownMenuContent = React.forwardRef(
-  ({ className, container, align = "start", alignOffset = 0, side = "bottom", sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(Menu.Portal, { container, children: /* @__PURE__ */ jsx(
-    Menu.Positioner,
-    {
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      className: "z-50 outline-none",
-      children: /* @__PURE__ */ jsx(
-        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__ */ jsx(Menu.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsx(
+      Menu.Positioner,
+      {
+        align,
+        alignOffset,
+        side,
+        sideOffset,
+        className: "z-50 outline-none",
+        children: /* @__PURE__ */ jsx(
+          Menu.Popup,
+          {
+            ref,
+            "data-slot": "dropdown-menu-content",
+            className: cn(popupClass, className),
+            ...props
+          }
+        )
+      }
+    ) });
+  }
 );
 DropdownMenuContent.displayName = "DropdownMenuContent";
 const DropdownMenuItem = React.forwardRef(
@@ -8625,9 +8649,11 @@ const PopoverTrigger = React.forwardRef(
 );
 PopoverTrigger.displayName = "PopoverTrigger";
 const PopoverContent = React.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__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+    const portalContainer = usePortalContainer();
+    const resolvedContainer = container ?? portalContainer;
+    return /* @__PURE__ */ jsx(Popover$1.Portal, { container: resolvedContainer ?? void 0, children: /* @__PURE__ */ jsx(
       Popover$1.Positioner,
       {
         align,
@@ -12259,6 +12285,7 @@ function SideDialogRoot({
   className
 }) {
   const isConfirmation = variant === "confirmation";
+  const [portalHost, setPortalHost] = React.useState(null);
   return /* @__PURE__ */ jsx(
     Drawer,
     {
@@ -12303,7 +12330,8 @@ function SideDialogRoot({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(DrawerInteractive, { render: /* @__PURE__ */ jsx("div", { ref: setPortalHost, className: "absolute" }) }),
+              /* @__PURE__ */ jsx(PortalContainerProvider, { container: portalHost, children: /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: cn("grid h-full", {
@@ -12311,7 +12339,7 @@ function SideDialogRoot({
                   }),
                   children
                 }
-              )
+              ) })
             ]
           }
         ) })