@mastra/playground-ui 30.0.0-alpha.4 → 30.0.0-alpha.5

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @mastra/playground-ui
 
+## 30.0.0-alpha.5
+
+### Patch Changes
+
+- Improved the Select component by migrating it to Base UI for more reliable positioning and accessibility. The public API (`Select`, `SelectTrigger`, `SelectContent`, `SelectItem`, `SelectValue`, `SelectGroup`) is unchanged, so no consumer updates are needed. ([#16918](https://github.com/mastra-ai/mastra/pull/16918))
+
+- Added `DataList.RowStatic`, a non-interactive row primitive. It renders a row that looks identical to other list rows but does not respond to clicks and shows no hover/focus state — use it alongside `DataList.RowButton` / `DataList.RowLink` when only some rows are clickable (e.g. error or placeholder entries in an otherwise navigable list). ([#16970](https://github.com/mastra-ai/mastra/pull/16970))
+
+  ```tsx
+  {
+    rows.map(row =>
+      row.href ? (
+        <DataList.RowLink key={row.id} to={row.href} LinkComponent={Link}>
+          {row.cells}
+        </DataList.RowLink>
+      ) : (
+        <DataList.RowStatic key={row.id}>{row.cells}</DataList.RowStatic>
+      ),
+    );
+  }
+  ```
+
+- Fixed Studio Settings page (and other default-height `PageLayout` pages) clipping their content with no scrollbar on viewports shorter than the form. Users on short laptop screens (under ~991px tall) could not reach the Save button under the Mastra Connection headers form, making it impossible to apply changes. Default-height `PageLayout` pages now grow with their content and scroll through the studio chrome wrapper; `height="full"` pages (Logs, Traces, Metrics, etc.) are unchanged. ([#16999](https://github.com/mastra-ai/mastra/pull/16999))
+
+- Restyled scrollbars across the studio UI to match the design system — thin, themed thumb on a transparent track — replacing the default OS scrollbars that clashed with dark and light surfaces. ([#16918](https://github.com/mastra-ai/mastra/pull/16918))
+
+- Updated dependencies [[`6096445`](https://github.com/mastra-ai/mastra/commit/60964459733f0ab384584d95e19c36607ffdf7b0), [`91cf0e0`](https://github.com/mastra-ai/mastra/commit/91cf0e027e511b871481a8576b56b7af83b15afd)]:
+  - @mastra/core@1.37.0-alpha.5
+  - @mastra/client-js@1.21.0-alpha.5
+  - @mastra/react@0.4.1-alpha.5
+
 ## 30.0.0-alpha.4
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -25,7 +25,7 @@ const collapsible = require('@base-ui/react/collapsible');
 const combobox = require('@base-ui/react/combobox');
 const cmdk = require('cmdk');
 const dialog = require('@base-ui/react/dialog');
-const SelectPrimitive = require('@radix-ui/react-select');
+const select = require('@base-ui/react/select');
 const tabs = require('@base-ui/react/tabs');
 const drawer = require('@base-ui/react/drawer');
 const menu = require('@base-ui/react/menu');
@@ -75,7 +75,6 @@ function _interopNamespaceDefault(e) {
 }
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
 const VisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(VisuallyHidden);
 const Dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(Dialog$1);
 
@@ -6695,13 +6694,45 @@ const CommandShortcut = ({ className, ...props }) => {
 };
 CommandShortcut.displayName = "CommandShortcut";
 
-const Select = SelectPrimitive__namespace.Root;
-const SelectGroup = SelectPrimitive__namespace.Group;
-const SelectValue = SelectPrimitive__namespace.Value;
+function isSelectItem(node) {
+  return React__namespace.isValidElement(node) && node.type?.displayName === "SelectItem";
+}
+function collectItems(children, acc) {
+  React__namespace.Children.forEach(children, (child) => {
+    if (!React__namespace.isValidElement(child)) return;
+    if (isSelectItem(child)) {
+      acc.push({ value: child.props.value, label: child.props.children });
+      return;
+    }
+    const nested = child.props?.children;
+    if (nested != null) collectItems(nested, acc);
+  });
+}
+function Select({ children, items, onValueChange, ...props }) {
+  const derivedItems = React__namespace.useMemo(() => {
+    if (items != null) return items;
+    const acc = [];
+    collectItems(children, acc);
+    return acc.length > 0 ? acc : void 0;
+  }, [items, children]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    select.Select.Root,
+    {
+      items: derivedItems,
+      onValueChange: onValueChange ? (value, eventDetails) => onValueChange(value, eventDetails) : void 0,
+      ...props,
+      children
+    }
+  );
+}
+Select.displayName = "Select";
+const SelectGroup = select.Select.Group;
+const SelectValue = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(select.Select.Value, { ref, className: cn("truncate", className), ...props }));
+SelectValue.displayName = "SelectValue";
 const SelectTrigger = React__namespace.forwardRef(
-  ({ className, children, size = "default", ...props }, ref) => {
+  ({ className, children, size = "default", variant: _variant, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      SelectPrimitive__namespace.Trigger,
+      select.Select.Trigger,
       {
         ref,
         className: cn(
@@ -6711,7 +6742,7 @@ const SelectTrigger = React__namespace.forwardRef(
           "outline-none transition-colors duration-normal ease-out-custom",
           "hover:bg-surface3 hover:text-neutral6 hover:border-border2 active:bg-surface4",
           "focus:outline-none focus-visible:outline-none focus-visible:border-border2",
-          "data-[state=open]:bg-surface3 data-[state=open]:text-neutral6 data-[state=open]:border-border2",
+          "data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2",
           "data-[placeholder]:text-neutral3",
           "disabled:cursor-not-allowed disabled:opacity-50",
           "[&>span]:truncate",
@@ -6720,39 +6751,47 @@ const SelectTrigger = React__namespace.forwardRef(
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn("h-4 w-4 shrink-0 text-neutral3 opacity-70", transitions.colors) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            select.Select.Icon,
+            {
+              render: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn("h-4 w-4 shrink-0 text-neutral3 opacity-70", transitions.colors) })
+            }
+          )
         ]
       }
     );
   }
 );
-SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-const SelectContent = React__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  SelectPrimitive__namespace.Content,
-  {
-    ref,
-    className: cn(
-      "relative z-50 min-w-32 max-h-dropdown-max-height overflow-y-auto overflow-x-hidden rounded-xl border border-border1 bg-surface3 text-neutral4 shadow-dialog data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-      className
-    ),
-    position,
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      SelectPrimitive__namespace.Viewport,
-      {
-        className: cn(
-          "p-1",
-          position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
-        ),
-        children
-      }
-    )
-  }
-) }));
-SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
+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 })
+        }
+      )
+    }
+  ) })
+);
+SelectContent.displayName = "SelectContent";
 const SelectItem = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.Item,
+  select.Select.Item,
   {
     ref,
     className: cn(
@@ -6762,18 +6801,18 @@ const SelectItem = React__namespace.forwardRef(({ className, children, ...props
       "hover:bg-surface4 hover:text-neutral6",
       "focus:bg-surface4 focus:text-neutral6",
       "data-[highlighted]:bg-surface4 data-[highlighted]:text-neutral6",
-      "data-[state=checked]:text-neutral6",
+      "data-[selected]:text-neutral6",
       "data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-neutral6" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-neutral6" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemText, { children })
     ]
   }
 ));
-SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
+SelectItem.displayName = "SelectItem";
 
 const Tabs = ({ children, defaultTab, value, onValueChange, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -13334,6 +13373,31 @@ function DataListRowLink({
   );
 }
 
+const DataListRowStatic = React.forwardRef(
+  ({ children, className, flushLeft, flushRight, colStart, colEnd, featured, style, ...rest }, ref) => {
+    const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
+    const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "mx-1 grid grid-cols-subgrid gap-8 px-5",
+          ...dataListRowOuterStyles,
+          flushLeft && "ml-0!",
+          flushRight && "mr-0!",
+          featured && "bg-surface4",
+          className
+        ),
+        style: resolvedStyle,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListRowStatic.displayName = "DataListRowStatic";
+
 function DataListSpacer({ height }) {
   if (height <= 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full", style: { height } });
@@ -13468,6 +13532,7 @@ const DataList = Object.assign(DataListRoot, {
   Row: DataListRow,
   RowButton: DataListRowButton,
   RowLink: DataListRowLink,
+  RowStatic: DataListRowStatic,
   Cell: DataListCell,
   TextCell: DataListTextCell,
   NameCell: DataListNameCell,
@@ -13958,10 +14023,10 @@ function PageLayoutRoot({
     "main",
     {
       className: cn(
-        "w-full h-full grid grid-rows-[auto_auto] p-6 content-start overflow-y-auto",
+        "w-full grid grid-rows-[auto_auto] p-6 content-start",
         {
           "max-w-screen-lg mx-auto pt-8": width === "narrow",
-          "grid-rows-[auto_1fr]": height === "full"
+          "h-full grid-rows-[auto_1fr] overflow-y-auto": height === "full"
         },
         className
         //   'LAYOUT_ROOT border border-dashed border-orange-400',