@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/dist/components/ui/data-table/data-table-body.js

@@ -3,17 +3,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useSyncExternalStore } from "react";
 import { useIsomorphicLayoutEffect } from "../../../hooks/ui/use-isomorphic-layout-effect.js";
 import { cn } from "../../../utils/cn.js";
+import { LoadingFallback } from "../../loading/loading-fallback.js";
 import { LoadingRegion } from "../../loading/loading-region.js";
-import { useLoadingScope } from "../loading-scope.js";
+import { LoadingItems, useLoadingScope } from "../loading-scope.js";
 import { useDataTableContext } from "./data-table.js";
 import { DataTableEmpty } from "./data-table-empty.js";
 import { useDataTableLoadMoreStore } from "./data-table-load-more.js";
+import { PlaceholderRows, ReservedEmptyState } from "./data-table-reserved-rows.js";
 import { DataTableRow } from "./data-table-row.js";
-import { DataTableSkeleton, PlaceholderRows, ReservedEmptyState, ROW_STACK_CLASSES } from "./data-table-skeleton.js";
+import { ROW_STACK_CLASSES } from "./data-table-row-classes.js";
 import { DATA_TABLE_SKELETON_ROWS, dataTablePageSize } from "./utils.js";
 const getNoRows = () => 0;
 function DataTableBody({
   loading: loadingProp,
+  loadingCells = false,
   emptyMessage,
   emptyState,
   skeletonRows: skeletonRowsProp,
@@ -34,9 +37,31 @@ function DataTableBody({
   const rows = table.getRowModel().rows;
   const hasRows = rows.length > 0;
   const loadMore = useDataTableLoadMoreStore();
-  const loadMoreRows = useSyncExternalStore(loadMore.subscribe, loadMore.getSkeletonRows, getNoRows);
+  const loadMorePageSize = useSyncExternalStore(loadMore.subscribe, loadMore.getSkeletonRows, getNoRows);
   useIsomorphicLayoutEffect(() => hasRows ? loadMore.registerRowsBody() : void 0, [loadMore, hasRows]);
   const skeletonRowClassName = typeof rowClassName === "string" ? rowClassName : void 0;
+  if (loading && loadingCells && hasRows) {
+    return /* @__PURE__ */ jsx(
+      LoadingFallback,
+      {
+        label: "Loading results",
+        status: loadingRegion && !inScope,
+        className: cn(ROW_STACK_CLASSES, className),
+        children: rows.map((row, index) => /* @__PURE__ */ jsx(
+          DataTableRow,
+          {
+            row,
+            drawsCells: true,
+            compact,
+            rowHeightClassName,
+            className: typeof rowClassName === "function" ? rowClassName(row.original, index) : rowClassName,
+            "data-loading-item": true
+          },
+          row.id
+        ))
+      }
+    );
+  }
   if (loading && !hasRows) {
     return /* @__PURE__ */ jsx(
       LoadingRegion,
@@ -44,14 +69,17 @@ function DataTableBody({
         label: "Loading results",
         announce: loadingRegion && !inScope,
         className: cn(ROW_STACK_CLASSES, className),
-        children: /* @__PURE__ */ jsx(
-          DataTableSkeleton,
+        children: /* @__PURE__ */ jsx(LoadingItems, { count: skeletonRows, children: (index) => /* @__PURE__ */ jsx(
+          DataTableRow,
           {
-            rows: skeletonRows,
+            row: null,
+            loadingIndex: index,
+            compact,
             className: skeletonRowClassName,
-            rowHeightClassName
+            rowHeightClassName,
+            "data-loading-item": true
           }
-        )
+        ) })
       }
     );
   }
@@ -70,7 +98,7 @@ function DataTableBody({
     }
     return /* @__PURE__ */ jsx("div", { className: cn(ROW_STACK_CLASSES, className), children: empty });
   }
-  const padCount = minRows ? Math.max(0, minRows - rows.length - loadMoreRows) : 0;
+  const padCount = minRows ? Math.max(0, minRows - rows.length - loadMorePageSize) : 0;
   return /* @__PURE__ */ jsxs("div", { className: cn(ROW_STACK_CLASSES, className), children: [
     rows.map((row, index) => {
       const item = row.original;
@@ -85,19 +113,23 @@ function DataTableBody({
           compact,
           rowHeightClassName,
           className: cls,
-          subRow: renderSubRow?.(item)
+          subRow: renderSubRow?.(item),
+          "data-loading-item": true
         },
         row.id
       );
     }),
-    loadMoreRows > 0 && /* @__PURE__ */ jsx(
-      DataTableSkeleton,
+    loadMorePageSize > 0 && /* @__PURE__ */ jsx(LoadingItems, { count: loadMorePageSize, children: (index) => /* @__PURE__ */ jsx(
+      DataTableRow,
       {
-        rows: loadMoreRows,
+        row: null,
+        loadingIndex: index,
+        compact,
         className: skeletonRowClassName,
-        rowHeightClassName
+        rowHeightClassName,
+        "data-loading-item": true
       }
-    ),
+    ) }),
     padCount > 0 && /* @__PURE__ */ jsx(PlaceholderRows, { count: padCount, rowHeightClassName })
   ] });
 }

package/dist/components/ui/data-table/data-table-cursor-footer.d.ts

@@ -8,7 +8,7 @@ export interface DataTableCursorFooterProps extends Omit<CursorPaginationProps,
 }
 /**
  * Cursor-based prev/next footer for a `DataTable`. Place after `<DataTable.Body>`.
- * Thin wrapper around `<CursorPagination>` with a border-top separator to match the legacy `Table` look.
+ * Thin wrapper around `<CursorPagination>` with a border-top separator above it.
  */
 export declare function DataTableCursorFooter({ className, currentCount, showInfo, ...rest }: DataTableCursorFooterProps): import("react").JSX.Element;
 //# sourceMappingURL=data-table-cursor-footer.d.ts.map

package/dist/components/ui/data-table/data-table-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-header.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,4DAA4D;AAC5D,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACjC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,YAAY,EACZ,kBAAkB,EAClB,SAAS,EACT,IAAW,EACX,YAAY,GACb,EAAE,oBAAoB,sCAmDtB;AA2MD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,6BAA6B,oIACyF,CAAC"}
+{"version":3,"file":"data-table-header.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,4DAA4D;AAC5D,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACjC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,YAAY,EACZ,kBAAkB,EAClB,SAAS,EACT,IAAW,EACX,YAAY,GACb,EAAE,oBAAoB,sCAmDtB;AA2MD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,6BAA6B,oIACyF,CAAC"}

package/dist/components/ui/data-table/data-table-header.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { flexRender } from "@tanstack/react-table";
 import { cn } from "../../../utils/cn.js";
 import { Arrow01DownIcon, Arrow01UpIcon, SwitchVrIcon } from "../../icons-v2-generated/index.js";
+import { TextLineSkeleton } from "../../loading/unified-skeleton.js";
 import { InfoHint } from "../info-hint.js";
 import { useDataTableContext } from "./data-table.js";
 import { DataTableColumnFilter } from "./data-table-column-filter.js";
@@ -179,8 +180,12 @@ function HeaderCell({ header, sort, onSortChange }) {
   );
 }
 const DATA_TABLE_HEADER_LABEL_CLASS = "min-w-0 text-balance uppercase text-ods-text-secondary transition-colors duration-200 text-h5 group-hover:text-ods-text-primary";
+const DATA_TABLE_HEADER_LABEL_BAR_CLASS = "w-40 max-w-full";
 function HeaderLabel({ header }) {
   const headerDef = header.column.columnDef.header;
+  if (header.column.columnDef.meta?.headerLoading) {
+    return /* @__PURE__ */ jsx("span", { className: DATA_TABLE_HEADER_LABEL_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: DATA_TABLE_HEADER_LABEL_BAR_CLASS }) });
+  }
   if (headerDef === void 0) return null;
   if (typeof headerDef === "string") {
     return /* @__PURE__ */ jsx("span", { className: DATA_TABLE_HEADER_LABEL_CLASS, children: headerDef });

package/dist/components/ui/data-table/data-table-infinite-footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-infinite-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-infinite-footer.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,4BAA4B;IAC3C,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAmCD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,YAAY,EAAE,gBAAgB,EAC9B,UAAgC,EAChC,WAAW,GACZ,EAAE,4BAA4B,+BA2F9B"}
+{"version":3,"file":"data-table-infinite-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-infinite-footer.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,4BAA4B;IAC3C,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAmCD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,YAAY,EAAE,gBAAgB,EAC9B,UAAgC,EAChC,WAAW,GACZ,EAAE,4BAA4B,+BA8F9B"}

package/dist/components/ui/data-table/data-table-infinite-footer.js

@@ -4,10 +4,12 @@ import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { useIsomorphicLayoutEffect } from "../../../hooks/ui/use-isomorphic-layout-effect.js";
 import { LoadingRegion } from "../../loading/loading-region.js";
 import { Button } from "../button/index.js";
+import { LoadingItems } from "../loading-scope.js";
 import { useOptionalDataTableContext } from "./data-table.js";
 import { useDataTableLoadMoreStore } from "./data-table-load-more.js";
-import { DataTableSkeleton, ROW_STACK_CLASSES } from "./data-table-skeleton.js";
-import { dataTablePageSize } from "./utils.js";
+import { DataTableRow } from "./data-table-row.js";
+import { ROW_STACK_CLASSES } from "./data-table-row-classes.js";
+import { DATA_TABLE_NEXT_PAGE_SKELETON_ROWS, dataTablePageSize } from "./utils.js";
 const DEFAULT_ROOT_MARGIN = "0px 0px 100% 0px";
 const getNoBody = () => false;
 function findScrollParent(element) {
@@ -32,10 +34,10 @@ function DataTableInfiniteFooter({
     onLoadMoreRef.current = onLoadMore;
   });
   const table = useOptionalDataTableContext();
-  const skeletonRows = skeletonRowsProp ?? (table ? dataTablePageSize(table) : void 0) ?? 3;
+  const pageSize = skeletonRowsProp ?? (table ? dataTablePageSize(table) : void 0) ?? DATA_TABLE_NEXT_PAGE_SKELETON_ROWS;
   const loadMore = useDataTableLoadMoreStore();
   const bodyDrawsRows = useSyncExternalStore(loadMore.subscribe, loadMore.getHasRowsBody, getNoBody);
-  const requestedRows = isFetchingNextPage ? skeletonRows : 0;
+  const requestedRows = isFetchingNextPage ? pageSize : 0;
   useIsomorphicLayoutEffect(() => {
     loadMore.setSkeletonRows(requestedRows);
     return () => loadMore.setSkeletonRows(0);
@@ -72,7 +74,7 @@ function DataTableInfiniteFooter({
   }, [hasNextPage, isFetchingNextPage, isStalled, rootMargin]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isFetchingNextPage && !bodyDrawsRows && // Busy, without a second status: the footer's own one below says "Loading more results".
-    /* @__PURE__ */ jsx(LoadingRegion, { status: false, className: ROW_STACK_CLASSES, children: /* @__PURE__ */ jsx(DataTableSkeleton, { rows: skeletonRows }) }),
+    /* @__PURE__ */ jsx(LoadingRegion, { status: false, className: ROW_STACK_CLASSES, children: /* @__PURE__ */ jsx(LoadingItems, { count: pageSize, children: (index) => /* @__PURE__ */ jsx(DataTableRow, { row: null, loadingIndex: index, "data-loading-item": true }) }) }),
     isStalled && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-[var(--spacing-system-mf)]", children: /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onLoadMore, children: "Load more" }) }),
     /* @__PURE__ */ jsx("div", { role: "status", className: "sr-only", children: isFetchingNextPage ? "Loading more results" : "" }),
     hasNextPage && /* @__PURE__ */ jsx("div", { ref: sentinelRef, className: "h-1", "aria-hidden": "true" })

package/dist/components/ui/data-table/data-table-reserved-rows.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+/**
+ * The empty state, floating centred over a full page's worth of reserved row
+ * slots. `DataTable.Body` renders this — an empty table is exactly when a
+ * collapsing one is most visible (the pagination and everything under it jump
+ * the moment a filter matches nothing), so the body reserves the page's slots.
+ */
+export declare function ReservedEmptyState({ count, gapClassName, rowHeightClassName, children, }: {
+    count: number;
+    gapClassName: string;
+    rowHeightClassName?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Invisible rows that occupy exactly one row slot each.
+ *
+ * THE height reservation for a table whose page is short or empty — every call
+ * site uses it (`DataTable.Body`'s pad and empty branches), so
+ * a padded page and an empty one are the same height by construction rather
+ * than by matching guesses in each component.
+ */
+export declare function PlaceholderRows({ count, rowHeightClassName, }: {
+    count: number;
+    /** Height on the CARD, as `DataTableRow` carries it. */
+    rowHeightClassName?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=data-table-reserved-rows.d.ts.map

package/dist/components/ui/data-table/data-table-reserved-rows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-reserved-rows.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-reserved-rows.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,YAAY,EACZ,kBAAkB,EAClB,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAsBA;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,kBAAkB,GACnB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,+BAyCA"}

package/dist/components/ui/data-table/data-table-reserved-rows.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { LoadingItems } from "../loading-scope.js";
+import {
+  DATA_TABLE_PAD_ROW_FRAME_CLASS,
+  ROW_DESKTOP_SHELL_CLASS,
+  ROW_HEIGHT_DESKTOP,
+  ROW_HEIGHT_MOBILE,
+  ROW_MOBILE_SHELL_CLASS,
+  ROW_SHELL_CLASSES
+} from "./data-table-row-classes.js";
+function ReservedEmptyState({
+  count,
+  gapClassName,
+  rowHeightClassName,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col [grid-area:1/1]", gapClassName), children: /* @__PURE__ */ jsx(PlaceholderRows, { count, rowHeightClassName }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center [grid-area:1/1]", children: /* @__PURE__ */ jsx("div", { className: "sticky left-0 flex w-screen max-w-full justify-center", children }) })
+  ] });
+}
+function PlaceholderRows({
+  count,
+  rowHeightClassName
+}) {
+  return (
+    // loading-standard-ok(ITEM_MARK): pad slots that reserve a short page's height in the LOADED table, not items
+    /* @__PURE__ */ jsx(LoadingItems, { count, children: () => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          DATA_TABLE_PAD_ROW_FRAME_CLASS,
+          // The stated slot height belongs on the CARD, exactly as a real
+          // row carries it — a real row with a sub-row is taller than its
+          // cells, so reserving the cells' height here left every pad row
+          // short by the sub-row.
+          rowHeightClassName
+        ),
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                ROW_DESKTOP_SHELL_CLASS,
+                "py-0",
+                ROW_SHELL_CLASSES,
+                rowHeightClassName ? "h-full" : ROW_HEIGHT_DESKTOP
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                ROW_MOBILE_SHELL_CLASS,
+                "py-0",
+                ROW_SHELL_CLASSES,
+                rowHeightClassName ? "h-full" : ROW_HEIGHT_MOBILE
+              )
+            }
+          )
+        ]
+      }
+    ) })
+  );
+}
+export {
+  PlaceholderRows,
+  ReservedEmptyState
+};

package/dist/components/ui/data-table/data-table-row-classes.d.ts

@@ -0,0 +1,34 @@
+/**
+ * THE table-row class set: the frame, heights and shells a data-table row is drawn with, loaded and loading. Read by
+ * `DataTableRow` (both forms), the pad rows, `TestRun` and the query-report table, so a
+ * loading row and a loaded one are one box by construction.
+ */
+/**
+ * Consistent INNER row heights. The row card wraps these in a 1px border on
+ * each side, so the outer block lands on the designed 68px / 80px total —
+ * hence the 66/78 values here.
+ */
+export declare const ROW_HEIGHT_DESKTOP = "h-[66px] content-md:h-[78px]";
+export declare const ROW_HEIGHT_MOBILE = "h-[66px]";
+/**
+ * The row shell's inset and column gap.
+ *
+ * Shared by the real row (`data-table-row`), the skeleton rows below and the
+ * pad rows in `data-table-body`, because a difference between them is a visible
+ * shift on load — and there WAS one: all three placeholders used
+ * `--spacing-system-sf` (12px) in their mobile variant while the real row uses
+ * `--spacing-system-mf` (16px) at every width, so a loading table sat 4px closer
+ * to the card edge than the loaded one and its content nudged over when data
+ * arrived. Kept as a constant rather than three copies so that cannot drift again.
+ */
+export declare const ROW_SHELL_CLASSES = "items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]";
+/** A row's card (its frame and surface): read by `DataTableRow` and by the loading rows below, so both are one box. */
+export declare const DATA_TABLE_ROW_FRAME_CLASS = "overflow-hidden rounded-md border border-ods-border bg-ods-card";
+/** A pad row (`PlaceholderRows`): the card's box with a transparent border, so it is the row's height and invisible. */
+export declare const DATA_TABLE_PAD_ROW_FRAME_CLASS = "pointer-events-none relative overflow-hidden rounded-md border border-transparent";
+/** The row's desktop shell (its cells in columns, from md) and its mobile shell (one stacked cell, below md): read by the
+ *  loading row and the pad rows, so a row's two layouts are one pair of boxes. */
+export declare const ROW_DESKTOP_SHELL_CLASS = "hidden content-md:flex";
+export declare const ROW_MOBILE_SHELL_CLASS = "flex justify-start content-md:hidden";
+export declare const ROW_STACK_CLASSES = "flex w-full flex-col gap-[var(--spacing-system-xsf)]";
+//# sourceMappingURL=data-table-row-classes.d.ts.map

package/dist/components/ui/data-table/data-table-row-classes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row-classes.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-row-classes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,iCAAiC,CAAC;AACjE,eAAO,MAAM,iBAAiB,aAAa,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,8EAA8E,CAAC;AAY7G,uHAAuH;AACvH,eAAO,MAAM,0BAA0B,oEAAmD,CAAC;AAC3F,wHAAwH;AACxH,eAAO,MAAM,8BAA8B,sFAAqE,CAAC;AAEjH;kFACkF;AAClF,eAAO,MAAM,uBAAuB,2BAA2B,CAAC;AAChE,eAAO,MAAM,sBAAsB,yCAAyC,CAAC;AAE7E,eAAO,MAAM,iBAAiB,yDAAyD,CAAC"}

package/dist/components/ui/data-table/data-table-row-classes.js

@@ -0,0 +1,20 @@
+"use client";
+const ROW_HEIGHT_DESKTOP = "h-[66px] content-md:h-[78px]";
+const ROW_HEIGHT_MOBILE = "h-[66px]";
+const ROW_SHELL_CLASSES = "items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]";
+const ROW_BOX_CLASS = "overflow-hidden rounded-md border";
+const DATA_TABLE_ROW_FRAME_CLASS = `${ROW_BOX_CLASS} border-ods-border bg-ods-card`;
+const DATA_TABLE_PAD_ROW_FRAME_CLASS = `pointer-events-none relative ${ROW_BOX_CLASS} border-transparent`;
+const ROW_DESKTOP_SHELL_CLASS = "hidden content-md:flex";
+const ROW_MOBILE_SHELL_CLASS = "flex justify-start content-md:hidden";
+const ROW_STACK_CLASSES = "flex w-full flex-col gap-[var(--spacing-system-xsf)]";
+export {
+  DATA_TABLE_PAD_ROW_FRAME_CLASS,
+  DATA_TABLE_ROW_FRAME_CLASS,
+  ROW_DESKTOP_SHELL_CLASS,
+  ROW_HEIGHT_DESKTOP,
+  ROW_HEIGHT_MOBILE,
+  ROW_MOBILE_SHELL_CLASS,
+  ROW_SHELL_CLASSES,
+  ROW_STACK_CLASSES
+};

package/dist/components/ui/data-table/data-table-row-count.d.ts

@@ -11,13 +11,10 @@ export interface DataTableRowCountProps {
     pluralize?: (count: number, itemName: string) => string;
     /** Hide when the count is zero. Default `true`. */
     hideWhenEmpty?: boolean;
+    /** The rows are still being read (a table holding placeholder rows): the number is a bar, as in a loading scope. */
+    loading?: boolean;
     className?: string;
 }
-/** The row count while the rows are read: the same line, the number a bar and the (plural) item name real. */
-export declare function DataTableRowCountSkeleton({ label, className }: {
-    label: string;
-    className?: string;
-}): import("react").JSX.Element;
 /**
  * Renders "8 devices" (or your custom `itemName`) for the current row model.
  * Place wherever you want — above the table, in a toolbar, in a header right
@@ -31,5 +28,5 @@ export declare function DataTableRowCountSkeleton({ label, className }: {
  *   <DataTable.RowCount itemName="device" totalCount={pageInfo.total} />
  * } />
  */
-export declare function DataTableRowCount({ itemName, totalCount, pluralize, hideWhenEmpty, className, }: DataTableRowCountProps): import("react").JSX.Element | null;
+export declare function DataTableRowCount({ itemName, totalCount, pluralize, hideWhenEmpty, loading, className, }: DataTableRowCountProps): import("react").JSX.Element | null;
 //# sourceMappingURL=data-table-row-count.d.ts.map

package/dist/components/ui/data-table/data-table-row-count.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-row-count.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-row-count.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,sBAAsB;IACrC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,8GAA8G;AAC9G,wBAAgB,yBAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAMpG;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAmB,EACnB,UAAU,EACV,SAAS,EACT,aAAoB,EACpB,SAAS,GACV,EAAE,sBAAsB,sCAkBxB"}
+{"version":3,"file":"data-table-row-count.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-row-count.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,sBAAsB;IACrC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oHAAoH;IACpH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAmB,EACnB,UAAU,EACV,SAAS,EACT,aAAoB,EACpB,OAAe,EACf,SAAS,GACV,EAAE,sBAAsB,sCAkBxB"}

package/dist/components/ui/data-table/data-table-row-count.js

@@ -17,10 +17,11 @@ function DataTableRowCount({
   totalCount,
   pluralize,
   hideWhenEmpty = true,
+  loading = false,
   className
 }) {
   const table = useDataTableContext();
-  const inScope = useLoadingScope();
+  const inScope = useLoadingScope() || loading;
   const count = totalCount ?? table.getRowModel().rows.length;
   if (inScope) {
     return /* @__PURE__ */ jsx(DataTableRowCountSkeleton, { label: pluralize?.(2, itemName) ?? `${itemName}s`, className });
@@ -34,6 +35,5 @@ function DataTableRowCount({
   ] });
 }
 export {
-  DataTableRowCount,
-  DataTableRowCountSkeleton
+  DataTableRowCount
 };

package/dist/components/ui/data-table/data-table-row.d.ts

@@ -2,7 +2,9 @@ import { type Row } from '@tanstack/react-table';
 import type React from 'react';
 import { type ReactNode } from 'react';
 export interface DataTableRowProps<T> {
-    row: Row<T>;
+    /** The row. `null` is a row still being read (a body's loading rows): it draws its own skeleton, as it does in a
+     *  loading scope. */
+    row: Row<T> | null;
     onClick?: (item: T) => void;
     href?: string | null;
     /** Dense row height. */
@@ -22,45 +24,23 @@ export interface DataTableRowProps<T> {
     className?: string;
     /** Expandable content rendered below the cells, inside the same card. */
     subRow?: ReactNode;
+    /** A loading row's position in its list: every other row draws a second, secondary line under its first cell. */
+    loadingIndex?: number;
+    /** Classes on the loading row's cell shell (the skeleton's `rowClassName`). */
+    cellsClassName?: string;
+    /**
+     * A placeholder row the host put in the table while it loads (`DataTable.Body`'s `loadingCells`): in the loading
+     * scope it draws its REAL cells, each part drawing its own loading form, instead of the row's generic bars.
+     */
+    drawsCells?: boolean;
+    /** `data-*` markers (`data-loading-item`: the body marks every row it draws), on the row's root in both forms. */
+    [key: `data-${string}`]: unknown;
 }
 /**
- * Click-bubbling protocol: any element inside a cell that should NOT trigger
- * `onRowClick` / row navigation must carry the `data-no-row-click` attribute.
- * The row checks `target.closest('[data-no-row-click]')` and short-circuits:
- * in `onClick` mode it skips the consumer's handler; in link mode (when
- * `href` is set) it calls `e.preventDefault()` so `<Link>` does not navigate.
- *
- * Clicks originating from portaled descendants (e.g. `FloatingTooltip`,
- * dropdown menus rendered through `FloatingPortal`) bubble through React's
- * component tree and reach this handler, but their DOM target lives outside
- * the row subtree. The handler ignores any click whose target is not
- * physically contained within the row element — no `stopPropagation`
- * required at the source.
- *
- * In link mode the row IS the `<Link>` — content lives inside it, not under
- * an absolute overlay — so native browser link behaviour works: hover,
- * right-click "Open in new tab", middle-click, `Cmd+click`, focus outlines,
- * `:visited` styles, etc.
- *
- * Example column with action buttons:
- * ```tsx
- * {
- *   id: 'actions',
- *   cell: ({ row }) => (
- *     <div data-no-row-click className="flex gap-2 justify-end">
- *       <Button onClick={() => edit(row.original)}>Edit</Button>
- *     </div>
- *   ),
- *   enableSorting: false,
- *   meta: { width: 'w-[160px] shrink-0', align: 'right' },
- * }
- * ```
- *
- * Wrapped in `React.memo` — for best perf in long lists, pass stable references
- * for `onClick` and `className` (if function) via `useCallback` / `useMemo` in
- * the consumer. `href` and string `className` are compared by value.
+ * One row of the table, loaded and loading. ONE switch: in a loading scope, or with `row={null}` (a body's loading
+ * rows), it is its own {@link DataTableRowSkeleton}; the body never picks it.
  */
-declare function DataTableRowImpl<T>({ row, onClick, href, compact, rowHeightClassName, className, subRow, }: DataTableRowProps<T>): React.JSX.Element;
-export declare const DataTableRow: typeof DataTableRowImpl;
+declare function DataTableRowSwitch<T>(props: DataTableRowProps<T>): React.JSX.Element;
+export declare const DataTableRow: typeof DataTableRowSwitch;
 export {};
 //# sourceMappingURL=data-table-row.d.ts.map

package/dist/components/ui/data-table/data-table-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-row.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-row.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlE,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IACZ,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;OAUG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,iBAAS,gBAAgB,CAAC,CAAC,EAAE,EAC3B,GAAG,EACH,OAAO,EACP,IAAI,EACJ,OAAO,EACP,kBAAkB,EAClB,SAAS,EACT,MAAM,GACP,EAAE,iBAAiB,CAAC,CAAC,CAAC,qBAiHtB;AAED,eAAO,MAAM,YAAY,EAA6B,OAAO,gBAAgB,CAAC"}
+{"version":3,"file":"data-table-row.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-row.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBlE,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC;yBACqB;IACrB,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;OAUG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,iHAAiH;IACjH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kHAAkH;IAClH,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAClC;AAED;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,qBAezD;AAoPD,eAAO,MAAM,YAAY,EAA+B,OAAO,kBAAkB,CAAC"}