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

package/dist/{data-list-top-DJh08vFA.cjs → data-list-4t6Ueon8.cjs}

@@ -2,16 +2,21 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
+const primitives_transitions = require('./primitives/transitions.cjs.js');
 const checkbox = require('./checkbox-8X8iYPf7.cjs');
 const utils_cn = require('./cn-DlOJCxrS.cjs');
 const utils_dateFormat = require('./utils/date-format.cjs.js');
 const utils_id = require('./utils/id.cjs.js');
+const hooks_useFluidHover = require('./hooks/use-fluid-hover.cjs.js');
+const Txt = require('./Txt-CIS2G5Jx.cjs');
+const lucideReact = require('lucide-react');
+const Button = require('./Button-C4I05uT4.cjs');
+const scrollArea = require('@base-ui/react/scroll-area');
 const v4 = require('zod/v4');
-const scrollArea = require('./scroll-area-CAY0DNQj.cjs');
+const scrollArea$1 = require('./scroll-area-CAY0DNQj.cjs');
 const primitives_fluidMenu = require('./primitives/fluid-menu.cjs.js');
 const primitives_raisedSurface = require('./primitives/raised-surface.cjs.js');
 const hooks_useLocalStorageState = require('./hooks/use-local-storage-state.cjs.js');
-const primitives_transitions = require('./primitives/transitions.cjs.js');
 const tooltip = require('./tooltip-BppwIf6Y.cjs');
 
 const dataListRowOuterStyles = [
@@ -195,6 +200,72 @@ function DataListTimeCell({ timestamp }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { className: "flex text-muted-foreground tabular-nums", children: utils_dateFormat.formatTimestampPrecise(timestamp, { withDate: false }) });
 }
 
+const DataListGroup = React.forwardRef(({ className, ...rest }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      ref,
+      ...{ [hooks_useFluidHover.GROUP_ATTR]: "" },
+      className: utils_cn.cn("col-span-full grid grid-cols-subgrid gap-y-px [&>:not(.data-list-row)]:col-span-full", className),
+      ...rest
+    }
+  );
+});
+DataListGroup.displayName = "DataListGroup";
+
+function DataListNextPageLoading({
+  isLoading,
+  setEndOfListElement,
+  hasMore,
+  loadingText = "Loading more data..."
+}) {
+  if (!setEndOfListElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: setEndOfListElement,
+      className: utils_cn.cn("col-span-full -mt-px flex justify-center text-body text-muted-foreground opacity-50", {
+        "py-4": isLoading
+      }),
+      children: isLoading && loadingText
+    }
+  );
+}
+
+function DataListNoMatch({
+  message = "Nothing matches your search",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils_cn.cn(
+        "col-span-full flex flex-col items-center justify-center gap-2 rounded-lg bg-background py-8 text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { children: message })
+    }
+  );
+}
+
+function DataListPagination({ currentPage, hasMore, onNextPage, onPrevPage }) {
+  const showNavigation = typeof currentPage === "number" && currentPage > 0 || hasMore;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-full flex items-center justify-center gap-4 py-3 text-body text-muted-foreground", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      "Page ",
+      /* @__PURE__ */ jsxRuntime.jsx("b", { children: currentPage ? currentPage + 1 : "1" })
+    ] }),
+    showNavigation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+      typeof currentPage === "number" && currentPage > 0 && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "button", size: "sm", onClick: onPrevPage, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, {}), children: "Previous" }),
+      hasMore && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "button", size: "sm", onClick: onNextPage, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {}), children: "Next" })
+    ] })
+  ] });
+}
+
 const columnOrderSchema = v4.z.array(v4.z.number().int().nonnegative());
 const getColumnOrderStorageKey = (id) => `mastra:data-list:column-order:${id}`;
 function splitGridTracks(columns) {
@@ -347,9 +418,14 @@ function DataListBase({
   className,
   fit = "content",
   variant = "default",
+  scrollable = true,
   mask,
   scrollRef,
   reorder,
+  maxHeight,
+  autoScroll,
+  scrollButtons,
+  revealScrollbarOnHover,
   ...props
 }) {
   const scopeId = React.useId();
@@ -374,10 +450,27 @@ function DataListBase({
       ]
     }
   );
+  if (!scrollable) {
+    return (
+      // Preserve Base UI's render/style/ref contract without adding a clipping viewport.
+      /* @__PURE__ */ jsxRuntime.jsx(
+        scrollArea.ScrollArea.Root,
+        {
+          ...props,
+          className: utils_cn.cn("w-full rounded-xl p-1", dataListVariantClasses[variant], className),
+          children: /* @__PURE__ */ jsxRuntime.jsx(DataListReorderContext.Provider, { value: reorder, children: grid })
+        }
+      )
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    scrollArea.ScrollArea,
+    scrollArea$1.ScrollArea,
     {
       ...props,
+      maxHeight,
+      autoScroll,
+      scrollButtons,
+      revealScrollbarOnHover,
       orientation: "both",
       mask: getDataListMask(mask),
       className: utils_cn.cn(
@@ -385,11 +478,130 @@ function DataListBase({
         dataListVariantClasses[variant],
         className
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollAreaViewport, { ref: scrollRef, className: "min-h-0 flex-1 basis-auto", children: /* @__PURE__ */ jsxRuntime.jsx(DataListReorderContext.Provider, { value: reorder, children: grid }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(scrollArea$1.ScrollAreaViewport, { ref: scrollRef, className: "min-h-0 flex-1 basis-auto", children: /* @__PURE__ */ jsxRuntime.jsx(DataListReorderContext.Provider, { value: reorder, children: grid }) })
     }
   );
 }
 
+const DataListRowWrapperContext = React.createContext(false);
+function useDataListRowWrapperContext() {
+  return React.useContext(DataListRowWrapperContext);
+}
+
+const DataListRowButton = React.forwardRef(
+  ({ children, className, type = "button", colStart, colEnd, featured, variant, style, ...rest }, ref) => {
+    const isWrapped = useDataListRowWrapperContext();
+    const fluidRef = primitives_fluidMenu.useFluidMenuItemRef(ref);
+    const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
+    const cellsClass = hasColumnOverride ? void 0 : "data-list-cells";
+    const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref: isWrapped ? ref : fluidRef,
+        type,
+        className: utils_cn.cn(
+          ...isWrapped ? dataListRowInteractiveStyles : dataListRowStyles,
+          cellsClass,
+          "text-left",
+          className
+        ),
+        style: resolvedStyle,
+        "data-featured": featured || void 0,
+        "data-variant": variant ?? "default",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListRowButton.displayName = "DataListRowButton";
+
+const DataListRowLink = React.forwardRef(
+  ({ children, to, className, style, LinkComponent: Link = "a", colStart, colEnd, featured, variant, ...rest }, ref) => {
+    const isWrapped = useDataListRowWrapperContext();
+    const fluidRef = primitives_fluidMenu.useFluidMenuItemRef(ref);
+    const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
+    const cellsClass = hasColumnOverride ? void 0 : "data-list-cells";
+    const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Link,
+      {
+        ref: isWrapped ? ref : fluidRef,
+        href: to,
+        className: utils_cn.cn(...isWrapped ? dataListRowInteractiveStyles : dataListRowStyles, cellsClass, className),
+        style: resolvedStyle,
+        "data-featured": featured || void 0,
+        "data-variant": variant ?? "default",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListRowLink.displayName = "DataListRowLink";
+
+const DataListRowStatic = React.forwardRef(
+  ({ children, className, colStart, colEnd, featured, variant, style, ...rest }, ref) => {
+    const isWrapped = useDataListRowWrapperContext();
+    const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
+    const cellsClass = hasColumnOverride ? void 0 : "data-list-cells";
+    const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: utils_cn.cn(isWrapped ? "grid grid-cols-subgrid gap-4 px-3" : dataListRowStaticStyles, cellsClass, className),
+        style: resolvedStyle,
+        "data-featured": featured || void 0,
+        "data-variant": variant ?? "default",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListRowStatic.displayName = "DataListRowStatic";
+
+const DataListRowWrapper = React.forwardRef(
+  ({ children, className, onSelectRow, onClick, onKeyDown, tabIndex, ...rest }, ref) => {
+    const isSelectable = onSelectRow !== void 0;
+    const rowRef = primitives_fluidMenu.useFluidMenuItemRef(ref);
+    const handleClick = (event) => {
+      onClick?.(event);
+      if (!isSelectable || event.defaultPrevented) return;
+      onSelectRow();
+    };
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (!isSelectable || event.defaultPrevented) return;
+      if (event.key === "Enter" && event.target === event.currentTarget) {
+        event.preventDefault();
+        onSelectRow();
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(DataListRowWrapperContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: rowRef,
+        tabIndex: tabIndex ?? (isSelectable ? 0 : void 0),
+        className: utils_cn.cn(
+          "grid grid-cols-subgrid gap-0",
+          ...dataListRowOuterStyles,
+          ...dataListRowStateStyles,
+          isSelectable && utils_cn.cn("cursor-pointer", primitives_transitions.focusRingInset),
+          className
+        ),
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+DataListRowWrapper.displayName = "DataListRowWrapper";
+
 const DataListTopCell = React.forwardRef(
   ({ children, className, as, sticky, ...rest }, ref) => {
     const Component = as || "span";
@@ -508,6 +720,90 @@ function DataListTopSelectCell({ checked, onToggle, ...rest }) {
   );
 }
 
+const sortIcons = {
+  asc: lucideReact.ArrowUp,
+  desc: lucideReact.ArrowDown,
+  none: lucideReact.ArrowUpDown
+};
+const sortLabels = {
+  asc: "ascending",
+  desc: "descending"
+};
+const sortAnimations = {
+  asc: "animate-sort-arrow-up",
+  desc: "animate-sort-arrow-down"
+};
+const sortTooltips = {
+  asc: "Asc",
+  desc: "Desc",
+  none: "Sort"
+};
+function DataListSortableTopCell({
+  children,
+  sortKey,
+  sort,
+  onSortChange,
+  align = "start",
+  className,
+  ...props
+}) {
+  const next = sort === "asc" ? "desc" : "asc";
+  const SortIcon = sortIcons[sort ?? "none"];
+  const label = typeof children === "string" ? children : sortKey;
+  const current = sort ? `sorted ${sortLabels[sort]}` : "not sorted";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DataListTopCell,
+    {
+      "data-sort": sort ?? "none",
+      className: utils_cn.cn("gap-1 overflow-visible", align === "end" && "flex-row-reverse", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            variant: "ghost",
+            size: "icon-sm",
+            "aria-label": `${label}, ${current}, sort ${sortLabels[next]}`,
+            tooltip: sortTooltips[sort ?? "none"],
+            onClick: () => onSortChange(next, sortKey),
+            className: utils_cn.cn("shrink-0", sort ? "text-foreground" : "text-muted-foreground"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(SortIcon, { className: sort && sortAnimations[sort] }, sort ?? "none")
+          }
+        )
+      ]
+    }
+  );
+}
+
+function DataListSpacer({ height }) {
+  if (height <= 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full", style: { height } });
+}
+
+const DataListSubheader = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: utils_cn.cn(
+          "data-list-subheader relative isolate col-span-full px-3 py-2 text-subheading text-muted-foreground",
+          "bg-(--data-list-background)",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListSubheader.displayName = "DataListSubheader";
+
+function DataListSubHeading({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", tone: "faint", className, children });
+}
+
 function DataListTop({ children, className, hasLeadingCell, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -523,28 +819,81 @@ function DataListTop({ children, className, hasLeadingCell, ...props }) {
   );
 }
 
-exports.DataListActionsCell = DataListActionsCell;
+const DataListTopCells = React.forwardRef(
+  ({ children, className, flushLeft, colStart, style, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: utils_cn.cn(
+          "pointer-events-none grid grid-cols-subgrid gap-4 px-3 [&>*]:pointer-events-auto",
+          !colStart && "data-list-cells col-span-full",
+          flushLeft && "pl-0!",
+          className
+        ),
+        style: colStart ? { ...style, gridColumn: `${colStart} / -1` } : style,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+DataListTopCells.displayName = "DataListTopCells";
+
+const DataList = Object.assign(DataListRoot, {
+  Top: DataListTop,
+  TopCells: DataListTopCells,
+  TopCell: DataListTopCell,
+  SortableTopCell: DataListSortableTopCell,
+  TopCellWithTooltip: DataListTopCellWithTooltip,
+  TopCellSmart: DataListTopCellSmart,
+  RowWrapper: DataListRowWrapper,
+  RowButton: DataListRowButton,
+  RowLink: DataListRowLink,
+  RowStatic: DataListRowStatic,
+  Cell: DataListCell,
+  ActionsCell: DataListActionsCell,
+  TextCell: DataListTextCell,
+  NameCell: DataListNameCell,
+  DescriptionCell: DataListDescriptionCell,
+  IdCell: DataListIdCell,
+  RowHeaderCell: DataListRowHeaderCell,
+  NumberCell: DataListNumberCell,
+  DateCell: DataListDateCell,
+  CreatedCell: DataListCreatedCell,
+  TimeCell: DataListTimeCell,
+  SelectCell: DataListSelectCell,
+  TopSelectCell: DataListTopSelectCell,
+  NoMatch: DataListNoMatch,
+  Group: DataListGroup,
+  Subheader: DataListSubheader,
+  SubHeading: DataListSubHeading,
+  Spacer: DataListSpacer,
+  NextPageLoading: DataListNextPageLoading,
+  Pagination: DataListPagination
+});
+
+exports.DataList = DataList;
 exports.DataListCell = DataListCell;
 exports.DataListCreatedCell = DataListCreatedCell;
 exports.DataListDateCell = DataListDateCell;
-exports.DataListDescriptionCell = DataListDescriptionCell;
 exports.DataListIdCell = DataListIdCell;
-exports.DataListNameCell = DataListNameCell;
-exports.DataListNumberCell = DataListNumberCell;
+exports.DataListNextPageLoading = DataListNextPageLoading;
+exports.DataListNoMatch = DataListNoMatch;
 exports.DataListRoot = DataListRoot;
-exports.DataListRowHeaderCell = DataListRowHeaderCell;
-exports.DataListSelectCell = DataListSelectCell;
+exports.DataListRowButton = DataListRowButton;
+exports.DataListRowLink = DataListRowLink;
+exports.DataListRowWrapper = DataListRowWrapper;
+exports.DataListSortableTopCell = DataListSortableTopCell;
+exports.DataListSpacer = DataListSpacer;
+exports.DataListSubHeading = DataListSubHeading;
+exports.DataListSubheader = DataListSubheader;
 exports.DataListTextCell = DataListTextCell;
 exports.DataListTimeCell = DataListTimeCell;
 exports.DataListTop = DataListTop;
 exports.DataListTopCell = DataListTopCell;
 exports.DataListTopCellSmart = DataListTopCellSmart;
 exports.DataListTopCellWithTooltip = DataListTopCellWithTooltip;
-exports.DataListTopSelectCell = DataListTopSelectCell;
-exports.dataListRowInteractiveStyles = dataListRowInteractiveStyles;
 exports.dataListRowOuterStyles = dataListRowOuterStyles;
-exports.dataListRowStateStyles = dataListRowStateStyles;
-exports.dataListRowStaticStyles = dataListRowStaticStyles;
-exports.dataListRowStyles = dataListRowStyles;
 exports.splitColumns = splitColumns;
-//# sourceMappingURL=data-list-top-DJh08vFA.cjs.map
+//# sourceMappingURL=data-list-4t6Ueon8.cjs.map