basalt-ui 1.31.0 → 1.32.1

package/dist/charts/primitives/legend-disclosure.js

@@ -0,0 +1,153 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { alpha, VX } from "../../tokens/index.js";
+import { useDismissOnOutside } from "../cursor/touch-pin.js";
+import { LEGEND_ROW_GAP } from "./chart-frame-layout.js";
+const DISCLOSURE_PANEL = {
+  position: "fixed",
+  zIndex: VX.zIndexFloating,
+  display: "flex",
+  flexDirection: "column",
+  gap: LEGEND_ROW_GAP,
+  // theme-allow raw-scroll-container — a fixed floating panel of one legend, not app chrome
+  overflowY: "auto",
+  // `<dialog open>` brings UA chrome (centring margin, border, fit-content box) this resets.
+  margin: 0,
+  border: "none",
+  width: "auto",
+  height: "auto",
+  padding: 10,
+  boxSizing: "border-box",
+  backgroundColor: VX.surface.overlay,
+  boxShadow: VX.shadowOverlay,
+  color: VX.muted,
+  borderRadius: VX.radiusCard
+};
+const DISCLOSURE_MIN_HEIGHT = 96;
+function disclosurePlacement(chip, coarse) {
+  if (coarse) {
+    return {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      maxHeight: "60dvh",
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      padding: "12px 16px calc(12px + env(safe-area-inset-bottom, 0px))"
+    };
+  }
+  const below = window.innerHeight - chip.bottom;
+  const left = Math.max(8, Math.min(chip.left, window.innerWidth - 248));
+  const base = { left, right: "auto", minWidth: 200, maxWidth: "calc(100vw - 16px)" };
+  return below >= 200 || below >= chip.top ? { ...base, top: chip.bottom + 4, maxHeight: Math.max(below - 12, DISCLOSURE_MIN_HEIGHT) } : {
+    ...base,
+    bottom: window.innerHeight - chip.top + 4,
+    maxHeight: Math.max(chip.top - 12, DISCLOSURE_MIN_HEIGHT)
+  };
+}
+function useLegendDisclosure(coarse) {
+  const [placement, setPlacement] = useState(null);
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const panelId = useId();
+  const wasOpen = useRef(false);
+  const open = placement !== null;
+  const close = useCallback(() => setPlacement(null), []);
+  const openFrom = (trigger) => {
+    triggerRef.current = trigger;
+    setPlacement(disclosurePlacement(trigger.getBoundingClientRect(), coarse));
+  };
+  useEffect(() => {
+    if (open) panelRef.current?.focus();
+    else if (wasOpen.current) triggerRef.current?.focus();
+    wasOpen.current = open;
+  }, [open]);
+  const isInsidePanel = useCallback(
+    (target) => panelRef.current?.contains(target) === true || triggerRef.current?.contains(target) === true,
+    []
+  );
+  useDismissOnOutside({
+    enabled: open,
+    isInside: isInsidePanel,
+    onDismiss: close,
+    dismissOnResize: true,
+    scrollExemptInside: true
+  });
+  useEffect(() => {
+    if (!open || !coarse) return;
+    const panel = panelRef.current;
+    if (panel === null) return;
+    const onKeyDown = (e) => {
+      if (e.key !== "Tab") return;
+      const focusable = panel.querySelectorAll(
+        'button, [tabindex]:not([tabindex="-1"])'
+      );
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (first === void 0 || last === void 0) return;
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    panel.addEventListener("keydown", onKeyDown);
+    return () => panel.removeEventListener("keydown", onKeyDown);
+  }, [open, coarse]);
+  return { open, panelId, openFrom, close, panel: { panelRef, panelId, coarse, placement, close } };
+}
+function LegendDisclosure({
+  panelRef,
+  panelId,
+  coarse,
+  placement,
+  close,
+  fontSize,
+  children
+}) {
+  if (placement === null) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      coarse && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          onPointerDown: (e) => {
+            e.stopPropagation();
+            close();
+          },
+          style: {
+            position: "fixed",
+            inset: 0,
+            // One below the panel it sits behind — still `VX.zIndexFloating`-derived, never a
+            // second unrelated literal (B14).
+            zIndex: VX.zIndexFloating - 1,
+            backgroundColor: alpha(VX.neutral, 0.35)
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "dialog",
+        {
+          ref: panelRef,
+          id: panelId,
+          open: true,
+          tabIndex: -1,
+          "aria-label": "Legend",
+          ...coarse && { "aria-modal": true },
+          "data-basalt-legend-disclosure": coarse ? "sheet" : "popover",
+          style: { ...DISCLOSURE_PANEL, fontSize, ...placement },
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+export {
+  LegendDisclosure,
+  useLegendDisclosure
+};

package/dist/controls/controls.module.css

@@ -49,6 +49,11 @@
   flex-shrink: 0;
 }
 
+/* theme-allow-file raw-media-query — the ControlRow's own C9 swap (pills inline, the rest in a
+   sheet) keys on the SIZE CLASS by design: the sheet is compact-class chrome, the same axis the
+   shell's bottom bar reads. Every width query here is `SIZE_CLASSES.medium`, pinned by
+   `breakpoint-literals.test.ts`. */
+
 /* Below `sm` only the first `inline` slots are pills; the rest live in the sheet. */
 @media (max-width: 52.49375em) {
   .pillSlot:not([data-inline]) {

package/dist/controls/sync-button.module.css

@@ -45,6 +45,7 @@
  * width itself, pinned to the `ctl` height so the box is square. This module is unlayered, so it
  * outranks `@layer mantine` regardless of specificity.
  */
+/* theme-allow raw-media-query — the control's own C9 icon-only swap at the compact size class */
 @media (max-width: 52.49375em) {
   .label,
   .age {

package/dist/dashboard/stat-group.module.css

@@ -15,24 +15,24 @@
  * one: a query with no container resolves to false, so a shell-only context would have silently
  * pinned every non-shell consumer to the base count.
  *
- * The `@supports not` block below it is the pre-2023 fallback and the ONLY place the old viewport
- * law survives. It is written as an exclusive alternative rather than as a base the container
- * queries override, because the rail's `:nth-child` suppressors are MORE specific than the rule
- * that draws the border: two overlapping laws would each suppress a different set of leading cells
- * and the rail would lose hairlines in the middle of a row. One law at a time, chosen by support.
+ * The literals are the container-class law (`CONTAINER_CLASSES`, `tokens/size-classes.ts`): the
+ * `sm` count opens at `wide` (800px), not at the viewport-era 768. Two are StatGroup's own and say
+ * so: 260px (one column, below) and 1200px, where the full `cols` count opens. The class table
+ * stops at 800, and 800 is too early for a full KPI row — four cells of ~190px clamp a value a real
+ * dashboard prints (`tests/layout/page-aside.layout.test.ts` measures ~195px against the 844px row
+ * a claimed aside leaves). Conditions are px, never `em`: `em` inside a `@container` condition
+ * resolves against the CONTAINER's font-size, so a consumer panel with smaller text would silently
+ * move the boundary. A condition cannot read a custom property, so the numbers are written; the
+ * COUNTS are custom properties the component sets per instance.
  *
- * The literals: `@container` conditions are stated in px, `@media` ones in Mantine's own `em`
- * (`--mantine-breakpoint-sm` 48em, `--mantine-breakpoint-lg` 75em). Both spellings name the same
- * boundary at the 16px initial font size — 768px and 1200px — but `em` inside a `@container`
- * condition resolves against the CONTAINER's font-size rather than the root's, so a consumer panel
- * with smaller text would silently move the breakpoint. px is the only spelling that cannot drift.
- * (`47.99375em` → `767.9px`, `74.99375em` → `1199.9px`.) A condition still cannot read a custom property either way, so the numbers are written;
- * the COUNTS are custom properties the component sets per instance.
+ * No viewport fallback: basalt's own CSS already requires `color-mix()` (Safari 16.2, Chrome 111,
+ * Firefox 113), and every one of those parses `@container` — a `@supports not (container-type)`
+ * block is unreachable in any browser that renders basalt at all.
  */
 
 .container {
   container-type: inline-size;
-  container-name: basalt-stat-group;
+  container-name: basalt-grid;
 }
 
 .root {
@@ -45,7 +45,7 @@
 
 /* 260px is StatGroup's own literal (docs/DESIGN-CORE.md § Layout, elevation, shapes), not a container class: one column below it,
  * so every cell leads a row and the rail draws no leading hairline at all. */
-@container basalt-stat-group (max-width: 259.9px) {
+@container basalt-grid (max-width: 259.9px) {
   .root {
     grid-template-columns: minmax(0, 1fr);
   }
@@ -56,13 +56,13 @@
   }
 }
 
-@container basalt-stat-group (min-width: 768px) {
+@container basalt-grid (min-width: 800px) {
   .root {
     grid-template-columns: repeat(var(--basalt-stat-group-cols-sm), minmax(0, 1fr));
   }
 }
 
-@container basalt-stat-group (min-width: 1200px) {
+@container basalt-grid (min-width: 1200px) {
   .root {
     grid-template-columns: repeat(var(--basalt-stat-group-cols-lg), minmax(0, 1fr));
   }
@@ -83,14 +83,14 @@
   padding-inline-start: var(--vx-space-stack-md);
 }
 
-@container basalt-stat-group (max-width: 767.9px) {
+@container basalt-grid (max-width: 799.9px) {
   .root[data-divided] > *:nth-child(2n + 1) {
     border-inline-start: 0;
     padding-inline-start: 0;
   }
 }
 
-@container basalt-stat-group (min-width: 768px) and (max-width: 1199.9px) {
+@container basalt-grid (min-width: 800px) and (max-width: 1199.9px) {
   .root[data-divided][data-sm-cols='2'] > *:nth-child(2n + 1),
   .root[data-divided][data-sm-cols='3'] > *:nth-child(3n + 1) {
     border-inline-start: 0;
@@ -98,7 +98,7 @@
   }
 }
 
-@container basalt-stat-group (min-width: 1200px) {
+@container basalt-grid (min-width: 1200px) {
   .root[data-divided][data-cols='2'] > *:nth-child(2n + 1),
   .root[data-divided][data-cols='3'] > *:nth-child(3n + 1),
   .root[data-divided][data-cols='4'] > *:nth-child(4n + 1),
@@ -107,48 +107,3 @@
     padding-inline-start: 0;
   }
 }
-
-/*
- * The pre-container-query fallback — Safari < 16, Chrome < 106, Firefox < 110. Verbatim the law
- * this file shipped before, keyed on the viewport, and reachable ONLY where `@container` is not.
- * A browser that cannot parse `container-type` also cannot parse the `@container` blocks above, so
- * the two sets are never live at once.
- */
-@supports not (container-type: inline-size) {
-  @media (min-width: 48em) {
-    .root {
-      grid-template-columns: repeat(var(--basalt-stat-group-cols-sm), minmax(0, 1fr));
-    }
-  }
-
-  @media (min-width: 75em) {
-    .root {
-      grid-template-columns: repeat(var(--basalt-stat-group-cols-lg), minmax(0, 1fr));
-    }
-  }
-
-  @media (max-width: 47.99375em) {
-    .root[data-divided] > *:nth-child(2n + 1) {
-      border-inline-start: 0;
-      padding-inline-start: 0;
-    }
-  }
-
-  @media (min-width: 48em) and (max-width: 74.99375em) {
-    .root[data-divided][data-sm-cols='2'] > *:nth-child(2n + 1),
-    .root[data-divided][data-sm-cols='3'] > *:nth-child(3n + 1) {
-      border-inline-start: 0;
-      padding-inline-start: 0;
-    }
-  }
-
-  @media (min-width: 75em) {
-    .root[data-divided][data-cols='2'] > *:nth-child(2n + 1),
-    .root[data-divided][data-cols='3'] > *:nth-child(3n + 1),
-    .root[data-divided][data-cols='4'] > *:nth-child(4n + 1),
-    .root[data-divided][data-cols='5'] > *:nth-child(5n + 1) {
-      border-inline-start: 0;
-      padding-inline-start: 0;
-    }
-  }
-}

package/dist/dashboard/widget-grid.module.css

@@ -15,18 +15,19 @@
  * container. A span resolved against the viewport while the tracks follow the container is exactly
  * the phantom-track defect `WidgetGrid.Item`'s context clamp exists to prevent.
  *
- * The literals: px in `@container`, Mantine's own `em` in the `@supports not` fallback — same
- * boundary (768px / 1200px at the 16px initial font size), but `em` inside a `@container`
- * condition resolves against the CONTAINER's font-size, so px is the only spelling that cannot
- * drift. A condition cannot read a custom property either way, so the numbers are written; the
- * COUNTS are custom properties, set once per instance by the component — three hand-written
- * `repeat()` blocks would have to enumerate every `cols` value, and the whole point of this
- * primitive is that a consumer states one desktop number and basalt owns the rest.
+ * The literals are the container-class law, as in `stat-group.module.css`: the `sm` count opens
+ * at `wide` (800px); 1200px, where the full `cols` count opens, is the grid's own boundary above
+ * the class table's top step. px, never `em` (an `em` condition resolves against the container's
+ * font-size). A condition cannot read a custom property, so the numbers are written; the COUNTS
+ * are custom properties, set once per instance by the component — three hand-written `repeat()`
+ * blocks would have to enumerate every `cols` value, and the whole point of this primitive is that
+ * a consumer states one desktop number and basalt owns the rest. No viewport fallback, for the
+ * reason `stat-group.module.css` states: nothing that renders basalt lacks `@container`.
  */
 
 .container {
   container-type: inline-size;
-  container-name: basalt-widget-grid;
+  container-name: basalt-grid;
 }
 
 .root {
@@ -47,7 +48,7 @@
   min-width: 0;
 }
 
-@container basalt-widget-grid (min-width: 768px) {
+@container basalt-grid (min-width: 800px) {
   .root {
     grid-template-columns: repeat(var(--basalt-widget-grid-cols-sm), minmax(0, 1fr));
   }
@@ -57,7 +58,7 @@
   }
 }
 
-@container basalt-widget-grid (min-width: 1200px) {
+@container basalt-grid (min-width: 1200px) {
   .root {
     grid-template-columns: repeat(var(--basalt-widget-grid-cols-lg), minmax(0, 1fr));
   }
@@ -66,31 +67,3 @@
     grid-column: span var(--basalt-widget-grid-span-lg);
   }
 }
-
-/*
- * The pre-container-query fallback — Safari < 16, Chrome < 106, Firefox < 110. Verbatim the law
- * this file shipped before, keyed on the viewport, and reachable ONLY where `@container` is not: a
- * browser that cannot parse `container-type` cannot parse the blocks above either, so the two sets
- * are never live at once.
- */
-@supports not (container-type: inline-size) {
-  @media (min-width: 48em) {
-    .root {
-      grid-template-columns: repeat(var(--basalt-widget-grid-cols-sm), minmax(0, 1fr));
-    }
-
-    .item {
-      grid-column: span var(--basalt-widget-grid-span-sm);
-    }
-  }
-
-  @media (min-width: 75em) {
-    .root {
-      grid-template-columns: repeat(var(--basalt-widget-grid-cols-lg), minmax(0, 1fr));
-    }
-
-    .item {
-      grid-column: span var(--basalt-widget-grid-span-lg);
-    }
-  }
-}

package/dist/data/data-table-state.d.ts

@@ -0,0 +1,83 @@
+/**
+ * `BasaltDataTable`'s state hooks — the table's own interactive state, the fold row disclosure, the
+ * card projection and the row/card activation props. Internal to `./data/table`; nothing here is on a
+ * published subpath.
+ */
+import type { ColumnFiltersState, ColumnPinningState, PaginationState, RowSelectionState, SortingState, Updater } from '@tanstack/react-table';
+import type { KeyboardEvent as ReactKeyboardEvent, RefObject } from 'react';
+export declare const EMPTY_FOLD_SET: ReadonlySet<string>;
+/**
+ * Which rows have their fold disclosure open. `row.id` defaults to the row's index in `data` (no
+ * `getRowId`) — stable across a client-side sort/filter/pagination, which reorder or subset the SAME
+ * core rows. PRUNED rather than cleared on every `data` change: a non-memoized `data` prop (an inline
+ * `.map()`, an unstable query result) hands a brand-new array of the SAME rows on every parent
+ * re-render, and clearing on that reference alone collapsed every open disclosure the instant
+ * anything upstream re-rendered.
+ *
+ * Pruning by ID ALONE is only safe with `getRowId` — a caller-declared identity that genuinely
+ * survives a page turn or a refetch, so an id no longer present (a manual-pagination page turn, a
+ * delete) still has to go, or a differently-shaped record seated at a reused id would silently read
+ * as pre-expanded. Without `getRowId` the id IS the array index, and an index survives a refetch
+ * trivially — it is still "0", "1", … even when every object behind it is a different record.
+ * Keeping an expanded index across THAT would silently attach the old disclosure to a stranger's
+ * row. So the index-id lane keeps a `prevData` snapshot and asks the narrower, correct question: is
+ * the object AT this index still the same reference as last time? A non-memoized array of the SAME
+ * rows answers yes at every index (the case above); a page turn or a refetch answers no.
+ */
+export declare function useRowDisclosure<T>({ data, getRowId, }: {
+    data: readonly T[];
+    getRowId: ((row: T, index: number) => string) | undefined;
+}): {
+    expanded: ReadonlySet<string>;
+    toggle: (rowId: string) => void;
+};
+/** The `BasaltDataTableProps` fields `useDataTableState` reads — declared here rather than picked
+ * off the props type, so the hook owns its contract and this module never imports the component. */
+export type DataTableStateProps = {
+    initialSorting?: SortingState | undefined;
+    onSortingChange?: ((sorting: SortingState) => void) | undefined;
+    initialGlobalFilter?: string | undefined;
+    onGlobalFilterChange?: ((value: string) => void) | undefined;
+    onColumnFiltersChange?: ((filters: ColumnFiltersState) => void) | undefined;
+    initialPagination?: PaginationState | undefined;
+    onPaginationChange?: ((pagination: PaginationState) => void) | undefined;
+    initialColumnPinning?: ColumnPinningState | undefined;
+    rowSelection?: RowSelectionState | undefined;
+    onRowSelectionChange?: ((selection: RowSelectionState) => void) | undefined;
+};
+/** The table's own interactive state and the TanStack `on*Change` handlers that write it — every
+ * piece uncontrolled with an optional change callback, except row selection, which is controlled
+ * whenever `rowSelection` is passed. */
+export declare function useDataTableState(props: DataTableStateProps, defaultPageSize: number): {
+    sorting: SortingState;
+    onSortingChange: (updater: Updater<SortingState>) => void;
+    globalFilter: string;
+    onGlobalFilterChange: (updater: Updater<string>) => void;
+    columnFilters: ColumnFiltersState;
+    onColumnFiltersChange: (updater: Updater<ColumnFiltersState>) => void;
+    pagination: PaginationState;
+    onPaginationChange: (updater: Updater<PaginationState>) => void;
+    columnPinning: ColumnPinningState;
+    onColumnPinningChange: import("react").Dispatch<import("react").SetStateAction<ColumnPinningState>>;
+    rowSelection: RowSelectionState;
+    onRowSelectionChange: (updater: Updater<RowSelectionState>) => void;
+};
+/** Whether the table renders as `renderCard` projections: its own root measured below the `regular`
+ * container class. A zero width is an un-laid-out ancestor, not a narrow table, so it moves nothing
+ * — the default (and the SSR answer) is the table. The root's width never depends on which body it
+ * holds, so the swap cannot oscillate. */
+export declare function useCardProjection(enabled: boolean): {
+    rootRef: RefObject<HTMLDivElement | null>;
+    cards: boolean;
+};
+/** Click + Enter activation, shared by a row and its card. Enter only: Space is the browser's own
+ * page-scroll on a focused non-button, and stealing it from a keyboard reader moving down a long
+ * table costs more than the second activation key buys. */
+export declare function activationProps<T>(onRowActivate: ((row: T) => void) | undefined, row: T): {
+    className: string;
+    'data-activatable': boolean;
+    tabIndex: number;
+    onClick: () => void;
+    onKeyDown: (event: ReactKeyboardEvent<HTMLElement>) => void;
+} | undefined;
+//# sourceMappingURL=data-table-state.d.ts.map

package/dist/data/data-table-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-state.d.ts","sourceRoot":"","sources":["../../src/data/data-table-state.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,iBAAiB,EACjB,YAAY,EACZ,OAAO,EACR,MAAM,uBAAuB,CAAA;AAE9B,OAAO,KAAK,EAAE,aAAa,IAAI,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAM3E,eAAO,MAAM,cAAc,EAAE,WAAW,CAAC,MAAM,CAAa,CAAA;AAE5D;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAClC,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,SAAS,CAAC,EAAE,CAAA;IAClB,QAAQ,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAA;CAC1D,GAAG;IAAE,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAAC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,CA2BrE;AAuBD;oGACoG;AACpG,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;IACzC,eAAe,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAC/D,mBAAmB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACxC,oBAAoB,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAC5D,qBAAqB,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAC3E,iBAAiB,CAAC,EAAE,eAAe,GAAG,SAAS,CAAA;IAC/C,kBAAkB,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACxE,oBAAoB,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAA;IACrD,YAAY,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAA;IAC5C,oBAAoB,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CAC5E,CAAA;AAED;;wCAEwC;AACxC,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM;;yDAjCrD,IAAI;;wDAAJ,IAAI;;qEAAJ,IAAI;;+DAAJ,IAAI;;;;oCA2DtB,OAAO,CAAC,iBAAiB,CAAC;EAgCvC;AAED;;;0CAG0C;AAC1C,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG;IACnD,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACzC,KAAK,EAAE,OAAO,CAAA;CACf,CAcA;AAED;;2DAE2D;AAC3D,wBAAgB,eAAe,CAAC,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,EAAE,GAAG,EAAE,CAAC;;;;;uBAOjE,kBAAkB,CAAC,WAAW,CAAC;cAUrD"}

package/dist/data/data-table-state.js

@@ -0,0 +1,139 @@
+import { functionalUpdate } from "@tanstack/react-table";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useMeasuredWidths } from "../common/use-measured-widths.js";
+import { CONTAINER_CLASSES } from "../tokens/size-classes.js";
+import classes from "./data-table.module.css";
+const EMPTY_FOLD_SET = /* @__PURE__ */ new Set();
+function useRowDisclosure({
+  data,
+  getRowId
+}) {
+  const [expanded, setExpanded] = useState(EMPTY_FOLD_SET);
+  const toggle = useCallback((rowId) => {
+    setExpanded((current) => {
+      const next = new Set(current);
+      if (next.has(rowId)) next.delete(rowId);
+      else next.add(rowId);
+      return next;
+    });
+  }, []);
+  const prevDataRef = useRef(data);
+  useEffect(() => {
+    const prevData = prevDataRef.current;
+    prevDataRef.current = data;
+    setExpanded((current) => {
+      if (current.size === 0) return current;
+      const liveIds = getRowId && new Set(data.map((row, index) => getRowId(row, index)));
+      const isLive = (id) => {
+        if (liveIds) return liveIds.has(id);
+        const index = Number(id);
+        return data[index] !== void 0 && data[index] === prevData[index];
+      };
+      const next = new Set([...current].filter(isLive));
+      return next.size === current.size ? current : next;
+    });
+  }, [data, getRowId]);
+  return { expanded, toggle };
+}
+function useReportedState(initial, onChange) {
+  const [value, setValue] = useState(initial);
+  const update = useCallback(
+    (updater) => {
+      setValue((prev) => {
+        const next = functionalUpdate(updater, prev);
+        onChange?.(next);
+        return next;
+      });
+    },
+    [onChange]
+  );
+  return [value, update];
+}
+function useDataTableState(props, defaultPageSize) {
+  const { rowSelection, onRowSelectionChange } = props;
+  const [sorting, onSortingChange] = useReportedState(
+    props.initialSorting ?? [],
+    props.onSortingChange
+  );
+  const [globalFilter, onGlobalFilterChange] = useReportedState(
+    props.initialGlobalFilter ?? "",
+    props.onGlobalFilterChange
+  );
+  const [columnFilters, onColumnFiltersChange] = useReportedState(
+    [],
+    props.onColumnFiltersChange
+  );
+  const [pagination, onPaginationChange] = useReportedState(
+    props.initialPagination ?? { pageIndex: 0, pageSize: defaultPageSize },
+    props.onPaginationChange
+  );
+  const [columnPinning, setColumnPinning] = useState(
+    props.initialColumnPinning ?? {}
+  );
+  const [internalRowSelection, setInternalRowSelection] = useState({});
+  const handleRowSelectionChange = useCallback(
+    (updater) => {
+      if (rowSelection !== void 0) {
+        onRowSelectionChange?.(functionalUpdate(updater, rowSelection));
+        return;
+      }
+      setInternalRowSelection((prev) => {
+        const next = functionalUpdate(updater, prev);
+        onRowSelectionChange?.(next);
+        return next;
+      });
+    },
+    [rowSelection, onRowSelectionChange]
+  );
+  return {
+    sorting,
+    onSortingChange,
+    globalFilter,
+    onGlobalFilterChange,
+    columnFilters,
+    onColumnFiltersChange,
+    pagination,
+    onPaginationChange,
+    columnPinning,
+    onColumnPinningChange: setColumnPinning,
+    rowSelection: rowSelection ?? internalRowSelection,
+    onRowSelectionChange: handleRowSelectionChange
+  };
+}
+function useCardProjection(enabled) {
+  const rootRef = useRef(null);
+  const [narrow, setNarrow] = useState(false);
+  useMeasuredWidths({
+    resolveRoot: () => rootRef.current,
+    signature: "",
+    enabled,
+    onMeasure: (root) => {
+      if (root.clientWidth === 0) return;
+      const next = root.clientWidth < CONTAINER_CLASSES.regular;
+      setNarrow((current) => current === next ? current : next);
+    }
+  });
+  return { rootRef, cards: enabled && narrow };
+}
+function activationProps(onRowActivate, row) {
+  if (onRowActivate === void 0) return void 0;
+  return {
+    className: classes.activatable,
+    "data-activatable": true,
+    tabIndex: 0,
+    onClick: () => onRowActivate(row),
+    onKeyDown: (event) => {
+      if (event.key !== "Enter") return;
+      if (event.target !== event.currentTarget) return;
+      event.preventDefault();
+      onRowActivate(row);
+    }
+  };
+}
+export {
+  EMPTY_FOLD_SET,
+  activationProps,
+  useCardProjection,
+  useDataTableState,
+  useRowDisclosure
+};