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

package/src/components/ui/data-table/data-table-row-classes.ts

@@ -0,0 +1,48 @@
+/**
+ * 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 const ROW_HEIGHT_DESKTOP = 'h-[66px] content-md:h-[78px]';
+export 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 const ROW_SHELL_CLASSES = 'items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]';
+
+/**
+ * The column every row slot stacks in, and the gap between two of them.
+ *
+ * One constant for the same reason as `ROW_SHELL_CLASSES`: the body's rows, its
+ * loading skeleton and the infinite footer's fallback skeleton all stack here,
+ * and the footer used to stack in nothing at all — its placeholder rows were
+ * bare children of the table root, touching each other.
+ */
+/** A row slot's box (its corners and its 1px border), shared by a row's card and a pad row, so both are one height. */
+const ROW_BOX_CLASS = 'overflow-hidden rounded-md border';
+/** A row's card (its frame and surface): read by `DataTableRow` and by the loading rows below, so both are one box. */
+export const DATA_TABLE_ROW_FRAME_CLASS = `${ROW_BOX_CLASS} 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 const DATA_TABLE_PAD_ROW_FRAME_CLASS = `pointer-events-none relative ${ROW_BOX_CLASS} 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 const ROW_DESKTOP_SHELL_CLASS = 'hidden content-md:flex';
+export const ROW_MOBILE_SHELL_CLASS = 'flex justify-start content-md:hidden';
+
+export const ROW_STACK_CLASSES = 'flex w-full flex-col gap-[var(--spacing-system-xsf)]';

package/src/components/ui/data-table/data-table-row-count.tsx

@@ -18,13 +18,15 @@ 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;
 }
 
 const ROW_COUNT_CLASS = 'whitespace-nowrap text-ods-text-secondary text-h6';
 
 /** The row count while the rows are read: the same line, the number a bar and the (plural) item name real. */
-export function DataTableRowCountSkeleton({ label, className }: { label: string; className?: string }) {
+function DataTableRowCountSkeleton({ label, className }: { label: string; className?: string }) {
   return (
     <span className={cn(ROW_COUNT_CLASS, className)} aria-hidden>
       <TextLineSkeleton type="inherit" as="span" className="inline-block w-6 align-top" /> {label}
@@ -50,11 +52,12 @@ export function DataTableRowCount({
   totalCount,
   pluralize,
   hideWhenEmpty = true,
+  loading = false,
   className,
 }: DataTableRowCountProps) {
   const table = useDataTableContext();
   // While the page is read the count is not known: the number is a bar beside the item name.
-  const inScope = useLoadingScope();
+  const inScope = useLoadingScope() || loading;
   const count = totalCount ?? table.getRowModel().rows.length;
   if (inScope) {
     return <DataTableRowCountSkeleton label={pluralize?.(2, itemName) ?? `${itemName}s`} className={className} />;

package/src/components/ui/data-table/data-table-row.tsx

@@ -6,11 +6,23 @@ import { memo, useCallback, useRef, type ReactNode } from 'react';
 import Link from '../../../embed-shims/next-link';
 import { cn } from '../../../utils/cn';
 import { isOwnClick } from '../../../utils/own-click';
-import { ROW_HEIGHT_DESKTOP, ROW_SHELL_CLASSES } from './data-table-skeleton';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
+import { loadingItemProps, useLoadingScope } from '../loading-scope';
+import { useDataTableContext } from './data-table';
+import {
+  DATA_TABLE_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';
 import { alignJustify, getHideClasses } from './utils';
 
 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. */
@@ -30,6 +42,116 @@ 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;
+}
+
+/**
+ * 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.
+ */
+function DataTableRowSwitch<T>(props: DataTableRowProps<T>) {
+  const inScope = useLoadingScope();
+  if ((inScope || props.row === null) && !(props.drawsCells && props.row)) {
+    return (
+      <DataTableRowSkeleton
+        index={props.loadingIndex ?? 0}
+        compact={props.compact}
+        rowHeightClassName={props.rowHeightClassName}
+        className={typeof props.className === 'string' ? props.className : undefined}
+        cellsClassName={props.cellsClassName}
+        {...loadingItemProps(props)}
+      />
+    );
+  }
+  return <DataTableRowImpl {...props} row={props.row} />;
+}
+
+/**
+ * A row while it is read: the row's own card and shells (`data-table-row-classes`), each visible column's cell a
+ * `text-h4` bar (every other row a secondary `text-h6` line under the first cell), one stacked pair below `md`. One
+ * row of the read list (`data-loading-item`), like the loaded row.
+ */
+function DataTableRowSkeleton({
+  index,
+  compact,
+  rowHeightClassName,
+  className,
+  cellsClassName,
+  ...props
+}: {
+  index: number;
+  compact?: boolean;
+  rowHeightClassName?: string;
+  className?: string;
+  cellsClassName?: string;
+  [key: `data-${string}`]: unknown;
+}) {
+  const table = useDataTableContext();
+  const columns = table.getVisibleFlatColumns();
+  const firstColumnId = columns[0]?.id;
+  // The loaded row's height rule: a stated slot height, else a dense row's padding, else the design height.
+  const heightClass = (designHeight: string) =>
+    rowHeightClassName ? 'h-full' : compact ? 'py-[var(--spacing-system-xsf)]' : designHeight;
+  return (
+    <div
+      // Decoration: the table's own status line says it is loading.
+      aria-hidden="true"
+      {...loadingItemProps(props)}
+      className={cn(DATA_TABLE_ROW_FRAME_CLASS, rowHeightClassName, className)}
+    >
+      <div
+        className={cn(
+          ROW_DESKTOP_SHELL_CLASS,
+          !compact && 'py-0',
+          ROW_SHELL_CLASSES,
+          heightClass(ROW_HEIGHT_DESKTOP),
+          cellsClassName,
+        )}
+      >
+        {columns.map(column => {
+          const meta = column.columnDef.meta;
+          return (
+            <div
+              key={column.id}
+              className={cn(
+                'flex shrink-0 flex-col justify-center',
+                meta?.width || 'flex-1',
+                // Same responsive hiding the real header and row apply, so the columns are sized against one total.
+                getHideClasses(meta?.hideAt),
+              )}
+            >
+              <TextLineSkeleton type="h4" className="w-3/4" />
+              {index % 2 === 0 && column.id === firstColumnId && <TextLineSkeleton type="h6" className="w-1/2" />}
+            </div>
+          );
+        })}
+      </div>
+      <div
+        className={cn(
+          ROW_MOBILE_SHELL_CLASS,
+          !compact && 'py-0',
+          ROW_SHELL_CLASSES,
+          heightClass(ROW_HEIGHT_MOBILE),
+          cellsClassName,
+        )}
+      >
+        <div className="flex min-w-0 flex-1 flex-col justify-center py-[var(--spacing-system-sf)]">
+          <TextLineSkeleton type="h4" className="w-3/4" />
+          <TextLineSkeleton type="h6" className="w-1/2" />
+        </div>
+      </div>
+    </div>
+  );
 }
 
 /**
@@ -77,7 +199,10 @@ function DataTableRowImpl<T>({
   rowHeightClassName,
   className,
   subRow,
-}: DataTableRowProps<T>) {
+  drawsCells: _drawsCells,
+  ...props
+}: DataTableRowProps<T> & { row: Row<T> }) {
+  const markers = loadingItemProps(props);
   const hasSubRow = subRow != null && subRow !== false;
   // A sub-row carries its own interactive controls, so it must not live inside the
   // row-level <Link>; when present, the link wraps only the cells.
@@ -99,12 +224,10 @@ function DataTableRowImpl<T>({
   );
 
   const containerClassName = cn(
-    'overflow-hidden rounded-md border border-ods-border bg-ods-card text-inherit no-underline',
-    // A row fades in when it MOUNTS — so a loaded page eases in over the
-    // skeleton it replaces instead of snapping, and rows that were already on
-    // screen (keyed by id) do not replay it. Opacity only: nothing that moves
-    // or resizes the slot, which is the whole point of the fixed row height.
-    'duration-200 animate-in fade-in-0 motion-reduce:animate-none',
+    DATA_TABLE_ROW_FRAME_CLASS,
+    'text-inherit no-underline',
+    // No entrance fade: a loaded row replaces its loading row in place. A fade from transparent left the slot
+    // empty for a moment between the two (the loading row is gone at once), which read as loading twice.
     // A stated slot height goes HERE, on the card, with the cells flexing to
     // fill whatever the sub-row leaves. `border-box` sizing means the number a
     // caller writes is the number the row occupies, borders included.
@@ -160,6 +283,7 @@ function DataTableRowImpl<T>({
         ref={containerRef as React.RefObject<HTMLAnchorElement>}
         className={containerClassName}
         onClick={handleClick}
+        {...markers}
       >
         {cells}
       </Link>
@@ -171,6 +295,8 @@ function DataTableRowImpl<T>({
       ref={containerRef as React.RefObject<HTMLDivElement>}
       className={containerClassName}
       onClick={onClick ? handleClick : undefined}
+      // A row of a read list (the body marks it `data-loading-item`): how many there are is the record's.
+      {...markers}
     >
       {isLinkMode && href ? (
         <Link
@@ -192,7 +318,7 @@ function DataTableRowImpl<T>({
   );
 }
 
-export const DataTableRow = memo(DataTableRowImpl) as typeof DataTableRowImpl;
+export const DataTableRow = memo(DataTableRowSwitch) as typeof DataTableRowSwitch;
 
 /** Wraps primitive string/number cell values in the default text style. */
 function CellContent({ children }: { children: ReactNode }) {

package/src/components/ui/data-table/index.ts

@@ -7,8 +7,7 @@ import { DataTableEmpty } from './data-table-empty';
 import { DataTableHeader } from './data-table-header';
 import { DataTableInfiniteFooter } from './data-table-infinite-footer';
 import { DataTableRow } from './data-table-row';
-import { DataTableRowCount, DataTableRowCountSkeleton } from './data-table-row-count';
-import { DataTableSkeleton } from './data-table-skeleton';
+import { DataTableRowCount } from './data-table-row-count';
 
 /**
  * Compound table primitive. Use `useDataTable` to build the table instance,
@@ -27,7 +26,6 @@ export const DataTable = Object.assign(DataTableRoot, {
   Header: DataTableHeader,
   Body: DataTableBody,
   Row: DataTableRow,
-  Skeleton: DataTableSkeleton,
   Empty: DataTableEmpty,
   InfiniteFooter: DataTableInfiniteFooter,
   CursorFooter: DataTableCursorFooter,
@@ -40,26 +38,29 @@ export {
   DataTableHeader,
   DataTableBody,
   DataTableRow,
-  DataTableSkeleton,
   DataTableEmpty,
   DataTableInfiniteFooter,
   DataTableCursorFooter,
   DataTableRowCount,
-  DataTableRowCountSkeleton,
 };
 
 export { useDataTableContext } from './data-table';
 export { useDataTable } from './use-data-table';
-export { ROW_HEIGHT_DESKTOP, ROW_HEIGHT_MOBILE, ROW_SHELL_CLASSES } from './data-table-skeleton';
-export { alignJustify, getHideClasses, multiSelectFilterFn } from './utils';
+export {
+  DATA_TABLE_ROW_FRAME_CLASS,
+  ROW_HEIGHT_DESKTOP,
+  ROW_HEIGHT_MOBILE,
+  ROW_SHELL_CLASSES,
+  ROW_STACK_CLASSES,
+} from './data-table-row-classes';
+export { alignJustify, dataTableLoadingRows, getHideClasses, multiSelectFilterFn } from './utils';
 
-export type { DataTableFilterOption, TailwindBreakpoint } from './types';
+export type { DataTableFilterOption, DataTableFilters, TailwindBreakpoint } from './types';
 export type { DataTableProps } from './data-table';
 export { DATA_TABLE_HEADER_LABEL_CLASS } from './data-table-header';
 export type { DataTableHeaderProps, DataTableSortState } from './data-table-header';
 export type { DataTableBodyProps } from './data-table-body';
 export type { DataTableRowProps } from './data-table-row';
-export type { DataTableSkeletonProps } from './data-table-skeleton';
 export type { DataTableEmptyProps } from './data-table-empty';
 export type { DataTableInfiniteFooterProps } from './data-table-infinite-footer';
 export type { DataTableCursorFooterProps } from './data-table-cursor-footer';

package/src/components/ui/data-table/types.ts

@@ -22,6 +22,14 @@ export interface DataTableFilterOption {
   count?: number;
 }
 
+/**
+ * The options a filter UI has selected, per column: the option ids `FiltersDropdown` emits, keyed by column id. What
+ * `FilterModal` and `ListPageLayout`'s mobile filters take and hand back.
+ */
+export interface DataTableFilters {
+  [columnKey: string]: string[];
+}
+
 declare module '@tanstack/react-table' {
   interface ColumnMeta<TData extends RowData, TValue> {
     /** Tailwind width class, e.g. `'w-40'`, `'flex-1 min-w-0'`. */
@@ -70,5 +78,11 @@ declare module '@tanstack/react-table' {
      * header to fit one in.
      */
     hint?: ReactNode;
+    /**
+     * The header's text is still being read (it names whose data the table shows): the header draws an `h5` bar in
+     * its label's own box, so the header row and the column keep their size. A flag, not an empty header: `''` is a
+     * column with no label.
+     */
+    headerLoading?: boolean;
   }
 }

package/src/components/ui/data-table/utils.ts

@@ -111,6 +111,9 @@ export const multiSelectFilterFn: FilterFn<unknown> = (row, columnId, filterValu
 /** Skeleton rows of a table that knows no page size: a typical count for an UNPAGED table. */
 export const DATA_TABLE_SKELETON_ROWS = 10;
 
+/** The rows a next page's skeleton draws when neither the host nor the table states a page size. */
+export const DATA_TABLE_NEXT_PAGE_SKELETON_ROWS = 3;
+
 /**
  * The page size a host gave its table (`state.pagination.pageSize`, else `initialState.pagination.pageSize`), or
  * undefined when it gave none. Read from the OPTIONS, never `getState()`: TanStack fills in a page size of 10 for a
@@ -125,3 +128,12 @@ export function dataTablePageSize(table: {
   const size = table.options.state?.pagination?.pageSize ?? table.options.initialState?.pagination?.pageSize;
   return size && size > 0 ? size : undefined;
 }
+
+/**
+ * One page of rows still being read: the placeholders a table holds while it loads, which `DataTable.Body`'s
+ * `loadingCells` draws with the REAL cells (every part of a cell drawing its own loading form). Each row is `fill(id)`
+ * keyed `loading-<index>`: the fields a row requires, empty, so a cell reads nothing it could show.
+ */
+export function dataTableLoadingRows<T>(count: number, fill: (id: string) => T): T[] {
+  return Array.from({ length: count }, (_, index) => fill(`loading-${index}`));
+}

package/src/components/ui/date-picker.tsx

@@ -623,31 +623,6 @@ export function DatePickerCalendar({
   );
 }
 
-// ============================================================================
-// Trigger button styles (shared)
-// ============================================================================
-
-const triggerButtonStyles = cn(
-  // Layout
-  'flex w-full items-center gap-2',
-  'h-11 rounded-[6px] border px-3 md:h-12',
-  // Colors
-  'border-ods-border bg-ods-card',
-  // Typography
-  'text-h4',
-  // Hover & active (not disabled)
-  'enabled:hover:border-ods-border-hover enabled:hover:bg-ods-bg-hover enabled:active:border-ods-border-active enabled:active:bg-ods-bg-active',
-  'focus:outline-none',
-  // Disabled - match Input exactly. The value/placeholder span inside sets its
-  // own colour, so the child rule (higher specificity) greys it too. Scoped to
-  // DIRECT children like every other field, so nested content that owns its
-  // colour keeps it.
-  'disabled:!cursor-not-allowed disabled:bg-ods-bg',
-  'disabled:text-ods-text-disabled disabled:[&>span]:text-ods-text-disabled disabled:[&_svg]:text-ods-text-disabled',
-  // Animation
-  'transition-colors duration-200',
-);
-
 const timeSelectTriggerStyles = cn(
   'flex items-center justify-between gap-1',
   'h-11 min-h-0 rounded-[6px] border px-3 md:h-12',
@@ -723,30 +698,25 @@ export function DatePicker(props: DatePickerProps) {
   const picker = (
     <Popover.Root open={open} onOpenChange={setOpen}>
       <Popover.Trigger asChild>
-        <button
+        <Button
+          variant="field"
           type="button"
           disabled={disabled}
           // Same marker Input/Textarea/Select expose — it is how a form finds
           // (and scrolls to) the first field that failed validation.
           data-invalid={isInvalid || undefined}
-          className={cn(
-            triggerButtonStyles,
-            'group',
-            open && !isInvalid && 'border-ods-accent enabled:hover:border-ods-accent enabled:hover:bg-ods-card',
-            isInvalid && 'border-ods-error enabled:hover:border-ods-error enabled:hover:bg-ods-card',
-            className,
-          )}
+          className={className}
         >
           <Calendar className="size-6 shrink-0 text-ods-text-secondary" />
           <span
             className={cn(
               'flex-1 truncate text-left',
-              displayValue ? 'text-ods-text-primary' : 'text-ods-text-secondary',
+              disabled ? 'text-ods-text-disabled' : displayValue ? 'text-ods-text-primary' : 'text-ods-text-secondary',
             )}
           >
             {displayValue || placeholder}
           </span>
-        </button>
+        </Button>
       </Popover.Trigger>
 
       <Popover.Portal container={portalContainer ?? undefined}>
@@ -910,30 +880,29 @@ export function DatePickerInput(props: DatePickerInputProps) {
       {/* Date Picker */}
       <Popover.Root open={open} onOpenChange={setOpen}>
         <Popover.Trigger asChild>
-          <button
+          <Button
+            variant="field"
             type="button"
             disabled={disabled}
             // Same marker Input/Textarea/Select expose — it is how a form finds
             // (and scrolls to) the first field that failed validation.
             data-invalid={isInvalid || undefined}
-            className={cn(
-              triggerButtonStyles,
-              'group',
-              open && !isInvalid && 'border-ods-accent enabled:hover:border-ods-accent enabled:hover:bg-ods-card',
-              isInvalid && 'border-ods-error enabled:hover:border-ods-error enabled:hover:bg-ods-card',
-              'flex-1',
-            )}
+            className="flex-1"
           >
             <Calendar className="size-6 shrink-0 text-ods-text-secondary" />
             <span
               className={cn(
                 'flex-1 truncate text-left',
-                displayValue ? 'text-ods-text-primary' : 'text-ods-text-secondary',
+                disabled
+                  ? 'text-ods-text-disabled'
+                  : displayValue
+                    ? 'text-ods-text-primary'
+                    : 'text-ods-text-secondary',
               )}
             >
               {displayValue || placeholder}
             </span>
-          </button>
+          </Button>
         </Popover.Trigger>
 
         <Popover.Portal container={portalContainer ?? undefined}>
@@ -1140,30 +1109,29 @@ export function DatePickerInputSimple(props: DatePickerInputSimpleProps) {
       {/* Date Picker */}
       <Popover.Root open={open} onOpenChange={setOpen}>
         <Popover.Trigger asChild>
-          <button
+          <Button
+            variant="field"
             type="button"
             disabled={disabled}
             // Same marker Input/Textarea/Select expose — it is how a form finds
             // (and scrolls to) the first field that failed validation.
             data-invalid={isInvalid || undefined}
-            className={cn(
-              triggerButtonStyles,
-              'group',
-              open && !isInvalid && 'border-ods-accent enabled:hover:border-ods-accent enabled:hover:bg-ods-card',
-              isInvalid && 'border-ods-error enabled:hover:border-ods-error enabled:hover:bg-ods-card',
-              'flex-1',
-            )}
+            className="flex-1"
           >
             <Calendar className="size-6 shrink-0 text-ods-text-secondary" />
             <span
               className={cn(
                 'flex-1 truncate text-left',
-                displayValue ? 'text-ods-text-primary' : 'text-ods-text-secondary',
+                disabled
+                  ? 'text-ods-text-disabled'
+                  : displayValue
+                    ? 'text-ods-text-primary'
+                    : 'text-ods-text-secondary',
               )}
             >
               {displayValue || placeholder}
             </span>
-          </button>
+          </Button>
         </Popover.Trigger>
 
         <Popover.Portal container={portalContainer ?? undefined}>