@mastra/playground-ui 32.0.2-alpha.0 → 32.0.2-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @mastra/playground-ui
 
+## 32.0.2-alpha.1
+
+### Patch Changes
+
+- Fixed dropdown, combobox, select, and popover popups silently failing to render when opened outside a side panel (most visibly the model and provider pickers in the chat composer). The shared portal-container resolver now always falls back to the document body instead of leaking an unrenderable value. ([#17560](https://github.com/mastra-ai/mastra/pull/17560))
+
 ## 32.0.2-alpha.0
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -6505,15 +6505,16 @@ const comboboxStyles = {
   error: "text-ui-sm text-accent2"
 };
 
-const PortalContainerContext = React__namespace.createContext(null);
+const PortalContainerContext = React__namespace.createContext(void 0);
 function PortalContainerProvider({
   container,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PortalContainerContext.Provider, { value: container, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalContainerContext.Provider, { value: container ?? void 0, children });
 }
-function usePortalContainer() {
-  return React__namespace.useContext(PortalContainerContext);
+function usePortalContainer(container) {
+  const fromContext = React__namespace.useContext(PortalContainerContext);
+  return container ?? fromContext ?? void 0;
 }
 
 const triggerVariantStyles = {
@@ -6538,8 +6539,7 @@ function Combobox({
   error
 }) {
   const selectedOption = options.find((option) => option.value === value) ?? null;
-  const portalContainer = usePortalContainer();
-  const resolvedContainer = container ?? portalContainer ?? void 0;
+  const resolvedContainer = usePortalContainer(container);
   const handleSelect = (item) => {
     if (item) {
       onValueChange?.(item.value);
@@ -7116,9 +7116,8 @@ 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) => {
-    const portalContainer = usePortalContainer();
-    const resolvedContainer = container ?? portalContainer;
-    return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Portal, { container: resolvedContainer ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+    const resolvedContainer = usePortalContainer(container);
+    return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
       select.Select.Positioner,
       {
         className: "z-50 outline-none",
@@ -7566,8 +7565,8 @@ const DropdownMenuSubTrigger = React__namespace.forwardRef(
 DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
 const DropdownMenuSubContent = React__namespace.forwardRef(
   ({ 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(
+    const resolvedContainer = usePortalContainer();
+    return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
       menu.Menu.Positioner,
       {
         align,
@@ -7591,8 +7590,7 @@ const DropdownMenuSubContent = React__namespace.forwardRef(
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
 const DropdownMenuContent = React__namespace.forwardRef(
   ({ className, container, align = "start", alignOffset = 0, side = "bottom", sideOffset = 8, ...props }, ref) => {
-    const portalContainer = usePortalContainer();
-    const resolvedContainer = container ?? portalContainer ?? void 0;
+    const resolvedContainer = usePortalContainer(container);
     return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
       menu.Menu.Positioner,
       {
@@ -8671,9 +8669,8 @@ PopoverTrigger.displayName = "PopoverTrigger";
 const PopoverContent = React__namespace.forwardRef(
   ({ className, container, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }, ref) => {
     const classNameString = typeof className === "string" ? className : void 0;
-    const portalContainer = usePortalContainer();
-    const resolvedContainer = container ?? portalContainer;
-    return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Portal, { container: resolvedContainer ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+    const resolvedContainer = usePortalContainer(container);
+    return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
       popover.Popover.Positioner,
       {
         align,