basalt-ui 1.30.2 → 1.32.0

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

@@ -9,8 +9,13 @@
  * by name with rem fallbacks at their level-0 px value (36/28/6), same idiom as ChartCard's
  * `--mantine-spacing-*` fallbacks.
  *
- * Layout: the title row holds title/icon/info/count/actions only. `value` + `delta` render on
- * their own hero-metric row directly beneath it — for every tier, never inline with the title.
+ * Layout keys on the enclosing card's OWN width (`container: basalt-card`, declared by ChartCard /
+ * StatCard / Section — docs/DESIGN-CORE.md § Layout, elevation, shapes), never the viewport: below 480px the subtitle folds
+ * into the info glyph; from 480px (wave 8) `value` + `delta` move onto the title row. Wrapping and
+ * shrinking are unconditional. The subtitle ALSO folds (regardless of width) whenever the card's own
+ * height is under 280px — see the `[data-basalt-card-short]` block below (wave 8's header-economy
+ * law). No enclosing card, no container: the standard layout. Container conditions are px literals
+ * of CONTAINER_CLASSES.
  */
 
 .root {
@@ -18,73 +23,15 @@
   flex-direction: column;
 }
 
+/* The row WRAPS only when it does not fit (a lone kebab stays beside the title; a wide `actions` slot
+ * takes its own right-aligned line instead of squeezing the heading) — unconditional, so composers
+ * with no `basalt-card` container (`SettingsSection`, `BasaltDataTable`) keep the safety net. */
 .titleRow {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(--vx-space-control-gap, 0.375rem);
-}
-
-/*
- * Below `sm` the title row WRAPS, which is the safety net for an `actions` slot too wide to sit
- * beside the title. `flex-wrap` is the right tool precisely because it is conditional: a 30px kebab
- * fits and stays on the row, while a control whose hypothetical size does not fit takes its own line
- * instead of squeezing the heading to an ellipsis. No breakpoint arithmetic, no max-width fraction,
- * and no prop — the row measures the actual content.
- *
- * `row-gap` is the 8px rhythm step, so a wrapped slot reads as the line under the title rather than
- * as a second header. `.actions` keeps its `margin-inline-start: auto`, which on a wrapped line makes
- * it right-aligned — the same edge it holds when it is on the row.
- */
-@media (max-width: 47.99375em) {
-  .titleRow {
-    flex-wrap: wrap;
-    row-gap: var(--vx-space-stack-sm);
-  }
-
-  /*
-   * WRAP ONLY WHEN IT DOES NOT FIT (M4 follow-up) — `flex: 1 1 100%` forced EVERY actions slot onto
-   * its own row, even a single 24px icon that fit beside the title fine (a KPI card's lone `···`
-   * menu dropped under the title and pushed the value down with it). `flex: 0 1 auto` restores
-   * ordinary flex sizing: no grow, so a short slot stays put beside the title on the shared row;
-   * `min-width: 0` plus `flex-shrink: 1` (part of the same shorthand, overriding the base rule's
-   * `flex-shrink: 0`) let it shrink and, once `.titleRow`'s own `flex-wrap: wrap` decides it truly
-   * does not fit, drop to its own line. `max-width: 100%` is the cap once it IS alone on that line —
-   * without it a `.actions` still carrying unshrinkable content (the `visibleFrom="sm"` control plus
-   * a nowrap switch `Group`, see below) can overflow the card rather than shrink into it. The base
-   * rule's `margin-inline-start: auto` still applies in both states — right-aligned beside the title
-   * when it fits, right-aligned as the lone item on its own wrapped line when it does not.
-   *
-   * `.actions` keeps its OWN `flex-wrap: wrap` from the prior fix: `Section` can hand it a `tabs`
-   * control (`CtlSlot`-wrapped) AND an `actions` control (another `CtlSlot`) in the same slot, and
-   * without this a nowrap `Group` of switches beside a view-switch control gets squeezed into one
-   * shared line and overflows below its own min-content width — the exact regression this rule
-   * once fixed. It is orthogonal to the row-level "wrap only when it does not fit" law above: with
-   * one child, wrapping has nothing to do, so a lone `···` menu still stays on the title line.
-   *
-   * The real flex items get `flex: 1 1 auto; min-width: 0` so they can shrink or (via the `> * > *`
-   * twin) stack within whatever width `.actions` itself resolves to — a full-width phone `Select`
-   * still reads as its own full-width line because the CONTROL sets that itself (`ViewTabs`'
-   * `fullWidth`/`.phoneSelect`), not because `.actions` forces it.
-   *
-   * The `> * > *` twin exists because `CtlSlot` (`theme/ctl-theme.tsx`) wraps a home's actions in a
-   * `display: contents` box — invisible to the flex box tree, so its OWN children (not it) are the
-   * real flex items. `display: contents` elements still match `.actions > *` by DOM structure but
-   * carry no box to apply `flex`/`min-width` to, hence styling one level deeper as well; a call site
-   * that skips `CtlSlot` and hands `actions` a real element directly gets the same rule from the
-   * first selector.
-   */
-  .actions {
-    flex: 0 1 auto;
-    flex-wrap: wrap;
-    min-width: 0;
-    max-width: 100%;
-  }
-
-  .actions > *,
-  .actions > * > * {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
+  row-gap: var(--vx-space-stack-sm);
 }
 
 .root[data-tier='section'] .titleRow {
@@ -203,59 +150,28 @@
 }
 
 /*
- * The hero-metric row — value + delta, directly under the title row, for every tier. The delta rides
- * 4px off the value, not 8: it is a suffix ON the number (`$168,920 +47%`), and at 8px it read as a
- * second, unrelated chip in the row. `baseline` alignment is what keeps the mono numeral and the
- * badge's own smaller mono text sitting on one line.
- */
-/*
- * The hero-metric row: the value, then its `DeltaBadge`.
- *
- * The gap is the 8px vertical-rhythm step (`--vx-space-stack-sm`), not the 4px it shipped as. 4px is
- * the rhythm's SMALLEST step — the distance between a label and the thing it labels — and at that
- * distance the badge read as a superscript hanging off the numeral rather than as a second fact
- * beside it. It is a token and not a literal so it tracks the density knob with every other spacing
- * in the header (`deriveSpacing`, `tokens/palette.ts`); `theme/layout-rhythm-css.test.ts`'s sibling
- * assertion in `widget-header.test.tsx` pins it against exactly the literal it used to be.
- *
- * `align-items: center`, not `baseline`. The badge is a BOX with its own padding and a mono 11.5px
- * label, so aligning its text baseline to a 24px KPI numeral's baseline put the box itself low —
- * its top edge sat below the numeral's x-height and its bottom edge hung under the numeral's
- * baseline. A chip beside a numeral is centred on the numeral, the same law the `count` tag in the
- * title row above already follows.
+ * The hero-metric row: the value, then its `DeltaBadge`, 8px apart (`--vx-space-stack-sm`, tracks
+ * density). It always WRAPS — the badge drops under the value when they do not fit, the value never
+ * ellipsizes. `center`, not `baseline`: the badge is a padded box, so a chip beside a numeral is
+ * centred on it (same law as the `count` tag above).
  */
 .metrics {
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(--vx-space-stack-sm);
+  /* Tight when the badge wraps under the value. */
+  row-gap: 2px;
   margin-top: 2px;
   min-width: 0;
 }
 
-/*
- * Below `sm` the metric row WRAPS, so the badge drops under the value instead of ellipsizing it.
- * `nowrap` plus the `.value` clamp below is right on desktop — a `+18.9%` cannot ellipsize and read,
- * a numeral can — but a KPI's numeral IS the content, and in a 2-up card grid at 390px
- * `$1294.9k ▲18.9%` rendered as `$129… ▲18.9%`. Truncating the number to protect the delta about the
- * number is the wrong way round. Conditional like the title row above it: a short value keeps the
- * badge beside it, and only a value that would otherwise clip gives up the line.
- */
-@media (max-width: 47.99375em) {
-  .metrics {
-    flex-wrap: wrap;
-    row-gap: 2px;
-  }
-}
-
-/* The value is the row's shrinkable half and the delta badge is not: a pre-formatted numeral can
- * ellipsize and still read, a `+18.9%` cannot. Without the clamp the badge grew past the header box
- * and painted over `StatCard`'s 72px sparkline slot beside it. */
+/* NEVER truncated: the numeral IS the content. It shrinks with the card's own width instead —
+ * `cqi` against `basalt-card` (the clamp, at the end of this file), from the `kpi` step down to the
+ * `lg` step (16px), and `overflow-wrap` breaks a pathological string rather than clipping it. */
 .value {
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
   font-family: var(--basalt-font-mono);
   font-size: var(--vx-text-kpi);
   font-weight: 600;
@@ -266,8 +182,8 @@
 /*
  * The unit beside the hero value. Mono like the number it qualifies (so `412 TSS` sits on one
  * baseline grid), `--vx-text-sm` and `--vx-muted` so it never competes with the numeral — the whole
- * point is that a unit is the SMALL half of the pair. `flex-shrink: 0`: the value is the row's
- * shrinkable half (see `.value`), and a unit that ellipsized to `TS…` would state nothing.
+ * point is that a unit is the SMALL half of the pair. `flex-shrink: 0`: a unit clipped to `TS…`
+ * would state nothing.
  */
 .unit {
   flex-shrink: 0;
@@ -278,14 +194,28 @@
   color: var(--vx-muted);
 }
 
-/* The C1/C5 home for header actions — always pinned right, regardless of what else is present. */
+/* The C1/C5 home for header actions — always pinned right, regardless of what else is present.
+ * Law C15: adopts the shared hit overlay (`data-basalt-hit-scope`, `styles.css`); `--vx-hit-gap`
+ * caps the expansion at the control gap so neighbouring 24px icons never overlap. */
 .actions {
+  --vx-hit-gap: var(--vx-space-control-gap);
   display: inline-flex;
-  flex-shrink: 0;
+  /* No grow, but it may shrink and wrap once `.titleRow` decides it does not fit, capped at 100% once
+   * alone on its line. Its flex items shrink too; the `> * > *` twin reaches through `CtlSlot`'s
+   * `display: contents` wrapper, whose own children are the real items. */
+  flex: 0 1 auto;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(--vx-space-control-gap, 0.375rem);
   margin-inline-start: auto;
   min-width: 0;
+  max-width: 100%;
+}
+
+.actions > *,
+.actions > * > * {
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 /* Directly under the title row, 4px off it — 1px put it inside the title's own line box, so a
@@ -306,6 +236,7 @@
 /* ── info glyph ─────────────────────────────────────────────────────────────────────────────── */
 
 .info {
+  --vx-hit-gap: var(--vx-space-control-gap);
   position: relative;
   display: inline-flex;
   flex-shrink: 0;
@@ -330,6 +261,12 @@
   color: var(--vx-muted);
 }
 
+/* Folded-subtitle pieces: hidden until a `basalt-card` narrower than 480px shows them (below). */
+.foldGlyph,
+.foldNote {
+  display: none;
+}
+
 /*
  * The tooltip bubble reads like every other floating surface — panel bg + `shadow-card` + card
  * radius (docs/DESIGN-SPEC.md §5). It opens DOWNWARD by convention, into whatever sits below the
@@ -383,33 +320,108 @@
   opacity: 0.6;
 }
 
+/* Card narrower than 480px: the subtitle folds into the info glyph (`InfoGlyph`'s `note`, or
+ * `.foldGlyph` when there is no `info`) — exactly one of the two shows. */
+@container basalt-card (max-width: 479.9px) {
+  .subtitle {
+    display: none;
+  }
+
+  .foldGlyph {
+    display: inline-flex;
+  }
+
+  .foldNote {
+    display: block;
+  }
+}
+
 /*
- * Law C15 — the `actions` slot is the tier-2/tier-3 home, and its controls are 30px (`ctl`) or 24px
- * (`icon`). Below `sm` an `::after` overlay lifts the HIT area to
- * `--vx-space-touch-control-height` (36px at level 0) without moving the visible box, the same
- * overlay `shell/page-bar.module.css` draws for the bar. `overflow: visible` is load-bearing:
- * Mantine's Button/ActionIcon roots are `overflow: hidden`, which clips an overlay that by
- * definition extends past the box — the clipping only exists for their loading overlay, painted
- * under `[data-loading]`, which is excluded here.
+ * The same fold, triggered by the CARD'S OWN HEIGHT instead of its width (wave 8's header-economy
+ * law) — a short-but-wide chart card (a KPI-style plot with little vertical room) still needs the
+ * subtitle line back. Not a `@container basalt-card` SIZE query: `container-type: size` on an
+ * auto-height card collapses it to 0 (see `ChartCard`'s `CARD_SHORT_HEIGHT` doc), so `ChartCard`
+ * measures itself with a ResizeObserver instead and sets `data-basalt-card-short` under 280px.
  */
-@media (max-width: 47.99375em) {
-  .actions :is(button, a) {
-    position: relative;
+[data-basalt-card-short] .subtitle {
+  display: none;
+}
+
+[data-basalt-card-short] .foldGlyph {
+  display: inline-flex;
+}
+
+[data-basalt-card-short] .foldNote {
+  display: block;
+}
+
+/* A short card's KPI numeral is the header's own tallest line (the merged title row has no other
+ * source of height once the subtitle folds) — the same floor the width `cqi` clamp already uses,
+ * so a short card never introduces a THIRD value size. */
+[data-basalt-card-short] .value {
+  font-size: var(--vx-text-lg);
+}
+
+/* The KPI numeral shrinks with its card. `(width >= 0px)` is always true but only inside a
+ * `basalt-card` container, so `cqi` never resolves against an unrelated one (or the viewport) —
+ * with no card the numeral stays at the plain `kpi` step above. 8cqi reaches the 24px `kpi` step at
+ * a 300px card. */
+@container basalt-card (width >= 0px) {
+  .value {
+    font-size: clamp(var(--vx-text-lg), 8cqi, var(--vx-text-kpi));
+  }
+}
+
+/*
+ * From 480px (`CONTAINER_CLASSES.regular`, wave 8's header-economy law) `value` + `delta` ride the
+ * title row: the title row dissolves (`display: contents`) so heading, info, count, metrics and
+ * actions share the root's one flex line, and `order` puts the metrics before the actions. The
+ * metrics take the free space (`margin-inline-start: auto`), which pushes metrics AND actions
+ * right; with no metrics, `.actions` keeps its own auto margin. The heading keeps the tier's row
+ * height (`min-height` was on `.titleRow`), so a title-less header does not collapse.
+ *
+ * This threshold moved from `wide` (800px) in wave 5/7 — most cards sit in the 480-799px `regular`
+ * band, which never reached the merged row before, keeping the taller stacked layout on the
+ * majority of dashboard cards (wave 8, `docs/waves/PLAN.md`).
+ */
+@container basalt-card (min-width: 480px) {
+  .root {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--vx-space-control-gap, 0.375rem);
+  }
+
+  .titleRow {
+    display: contents;
+  }
+
+  .root[data-tier='section'] .heading {
+    min-height: var(--vx-space-section-header-height, 2.25rem);
+  }
+
+  .root[data-tier='widget'] .heading,
+  .root[data-tier='group'] .heading {
+    min-height: var(--vx-space-widget-header-height, 1.75rem);
+  }
+
+  .metrics {
+    order: 1;
+    margin-block: 0;
+    margin-inline-start: auto;
+  }
+
+  .actions {
+    order: 2;
   }
 
-  .actions :is(button, a):not([data-loading]) {
-    overflow: visible;
+  .root:has(.metrics) .actions {
+    margin-inline-start: 0;
   }
 
-  .actions :is(button, a)::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    translate: -50% -50%;
-    width: 100%;
-    height: 100%;
-    min-width: var(--vx-space-touch-control-height, 2.25rem);
-    min-height: var(--vx-space-touch-control-height, 2.25rem);
+  .subtitle,
+  .sparkline {
+    order: 3;
+    flex: 0 0 100%;
   }
 }

package/dist/dashboard/widget-header.module.css.d.ts

@@ -17,6 +17,8 @@ declare const classes: {
   readonly sparkline: string
   readonly info: string
   readonly infoTrigger: string
+  readonly foldGlyph: string
+  readonly foldNote: string
   readonly infoBubble: string
   readonly deltaBadge: string
   readonly deltaGlyph: string

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
+};