@planningcenter/tapestry 3.8.0-rc.0 → 3.8.1-qa-1046.0

package/dist/componentRegistration.js

@@ -1,10 +1,16 @@
-import { register as r } from './tapestry-render/dist/registry.js';
+import { register as r } from './packages/tapestry-render/dist/registry.js';
+import { DatePicker } from './components/date-picker/DatePicker.js';
+import { NumberStepper } from './components/number-stepper/NumberStepper.js';
 import { PageHeader } from './components/page-header/PageHeader.js';
+import { Select } from './components/select/Select.js';
 import { Sidenav } from './components/sidenav/Sidenav.js';
 import { SidenavItem } from './components/sidenav/SidenavItem.js';
 import { SidenavSection } from './components/sidenav/SidenavSection.js';
 
+r("DatePicker", DatePicker);
+r("NumberStepper", NumberStepper);
 r("PageHeader", PageHeader);
+r("Select", Select);
 r("Sidenav", Sidenav);
 r("SidenavItem", SidenavItem);
 r("SidenavSection", SidenavSection);

package/dist/componentRegistration.js.map

@@ -1 +1 @@
-{"version":3,"file":"componentRegistration.js","sources":["../src/componentRegistration.ts"],"sourcesContent":["import { register } from \"@planningcenter/tapestry-render/registry\"\n\nimport { PageHeader } from \"./components/page-header/PageHeader\"\nimport { Sidenav } from \"./components/sidenav/Sidenav\"\nimport { SidenavItem } from \"./components/sidenav/SidenavItem\"\nimport { SidenavSection } from \"./components/sidenav/SidenavSection\"\n\nregister(\"PageHeader\", PageHeader)\nregister(\"Sidenav\", Sidenav)\nregister(\"SidenavItem\", SidenavItem)\nregister(\"SidenavSection\", SidenavSection)\n"],"names":["register"],"mappings":";;;;;;AAOAA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC;AAClCA,CAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;AAC5BA,CAAQ,CAAC,aAAa,EAAE,WAAW,CAAC;AACpCA,CAAQ,CAAC,gBAAgB,EAAE,cAAc,CAAC"}
+{"version":3,"file":"componentRegistration.js","sources":["../src/componentRegistration.ts"],"sourcesContent":["import { register } from \"@planningcenter/tapestry-render/registry\"\n\nimport { DatePicker } from \"./components/date-picker/DatePicker\"\nimport { NumberStepper } from \"./components/number-stepper/NumberStepper\"\nimport { PageHeader } from \"./components/page-header/PageHeader\"\nimport { Select } from \"./components/select/Select\"\nimport { Sidenav } from \"./components/sidenav/Sidenav\"\nimport { SidenavItem } from \"./components/sidenav/SidenavItem\"\nimport { SidenavSection } from \"./components/sidenav/SidenavSection\"\n\nregister(\"DatePicker\", DatePicker)\nregister(\"NumberStepper\", NumberStepper)\nregister(\"PageHeader\", PageHeader)\nregister(\"Select\", Select)\nregister(\"Sidenav\", Sidenav)\nregister(\"SidenavItem\", SidenavItem)\nregister(\"SidenavSection\", SidenavSection)\n"],"names":["register"],"mappings":";;;;;;;;;AAUAA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC;AAClCA,CAAQ,CAAC,eAAe,EAAE,aAAa,CAAC;AACxCA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC;AAClCA,CAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;AAC1BA,CAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;AAC5BA,CAAQ,CAAC,aAAa,EAAE,WAAW,CAAC;AACpCA,CAAQ,CAAC,gBAAgB,EAAE,cAAc,CAAC"}

package/dist/components/DataTable/DataTable.d.ts

@@ -2,58 +2,46 @@ import "./index.css";
 import type { CombineAriaPropsWithCustomProps } from "../../utilities/reactAriaProps";
 import React, { type ReactNode } from "react";
 import { type TableProps as AriaTableProps } from "react-aria-components/Table";
-export type DataTableColumnType = "boolean" | "currency" | "custom" | "date" | "enum" | "number" | "string";
+import type { DataTableColumn } from "./DataTableColumn";
 export type Sort = {
     column: string;
     direction: "asc" | "desc";
 };
-interface BaseColumn {
-    /** Determines how items align in the table. */
-    align?: "center" | "end" | "start";
-    /** Human-readable column header label. */
-    headerLabel: string;
+export type DataTableLoadingState = "error" | "idle" | "loading";
+export interface DataTableProps {
     /**
-     * Visually hides the header label. The text is still rendered (visually
-     * hidden via CSS) so it remains announced to assistive tech.
+     * Columns define what data is displayed and how. Pass a stable reference
+     * (e.g. a module constant or memoized value); columns are prepared per array
+     * identity, so an inline array rebuilds each column's formatter every render.
      */
-    hideLabel?: boolean;
-    /** Key used to look up the value in each row by default. */
-    name: string;
-    /** Enables filtering on this column. See Filtering. */
-    queryable?: boolean;
-    /** Custom cell renderer. Defaults to `row[column.name]`. */
-    render?: (row: unknown) => ReactNode;
-    /** Enables the resizing of that column. */
-    resizable?: boolean;
-    /** Enables sorting on this column. */
-    sortable?: boolean;
-    /** Determines rendering and filter behavior. */
-    type: DataTableColumnType;
-}
-export interface EnumColumn extends BaseColumn {
-    enumValues: string[];
-    type: "enum";
-}
-export interface NumberColumn extends BaseColumn {
-    max?: number;
-    min?: number;
-    step?: number;
-    type: "number";
-}
-export type DataTableColumn = BaseColumn | EnumColumn | NumberColumn;
-export interface DataTableProps {
-    /** Columns define what data is displayed and how. */
     columns: DataTableColumn[];
     /** The array of rows to display. */
     data: unknown[];
     /** Rendered in place of the table body when there is no data. */
     emptyState?: ReactNode;
+    /** Rendered in place of the table body when `loadingState` is `"error"`. */
+    errorState?: ReactNode;
     /** Returns a stable identity for each row. Defaults to `row.id`. */
     getRowId?: (row: unknown) => number | string;
+    /**
+     * Async loading state for the table body.
+     * - `"loading"`: While `data` is empty, replaces the empty state with a
+     *   centered spinner.
+     * - `"error"`: While `data` is empty, replaces the empty state with
+     *   `errorState` (or a default error message).
+     * - `"idle"` (default): Normal rendering.
+     */
+    loadingState?: DataTableLoadingState;
     /** Callback invoked when the sort state changes. */
     onSortChange?: (sort: Sort) => void;
+    /** Ref to the scroll container the sticky header should track. Takes priority over `scrollContainerSelector`. Only used when `stickyHeader` is true. */
+    scrollContainerRef?: React.RefObject<HTMLElement>;
+    /** CSS selector for the scroll container the sticky header should track. Only used when `stickyHeader` is true. Defaults to ".content-wrap" */
+    scrollContainerSelector?: string;
     /** The current sort state for the table. */
     sortBy?: Sort;
+    /** Enables a sticky header that tracks an outer scroll container. Progressive enhancement: Relies on `animation-timeline: scroll()`, which isn't supported in all browsers (e.g. Firefox) — the header scrolls with the table body instead of sticking in those cases. */
+    stickyHeader?: boolean;
 }
 type AriaTablePropsToOmit = "children" | "slot";
 type AriaTablePropsToInclude = never;
@@ -61,14 +49,18 @@ export type DataTableElementProps = CombineAriaPropsWithCustomProps<AriaTablePro
 /**
  * A table for displaying tabular data. Built on React Aria's `Table`.
  *
- * This is an early skeleton: only column headers and string cell values are
- * rendered. Sorting, filtering, pagination, selection, and other RFC
- * features are not yet implemented.
+ * Each column declares a `type` that controls how its cell values are
+ * formatted: `string`, `number`, `currency`, `date`, `datetime`, `boolean`,
+ * `enum`, and `custom`. A column's `render` function always takes precedence
+ * over the built-in type formatting.
+ *
+ * Sorting, filtering, pagination, selection, and other RFC features are not yet
+ * implemented.
  *
  * @component
  */
 export declare const DataTable: {
-    ({ className, columns, data, emptyState, getRowId, sortBy, onSortChange, ...restProps }: DataTableElementProps): React.JSX.Element;
+    ({ className, columns, data, emptyState, errorState, getRowId, loadingState, scrollContainerRef, scrollContainerSelector, stickyHeader, sortBy, onSortChange, ...restProps }: DataTableElementProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/DataTable/DataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAA;AACtD,OAAO,EAQL,KAAK,UAAU,IAAI,cAAc,EAClC,MAAM,6BAA6B,CAAA;AAEpC,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,UAAU,GACV,QAAQ,GACR,MAAM,GACN,MAAM,GACN,QAAQ,GACR,QAAQ,CAAA;AAEZ,MAAM,MAAM,IAAI,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,CAAA;AAEhE,UAAU,UAAU;IAClB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA;IAClC,0CAA0C;IAC1C,WAAW,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4DAA4D;IAC5D,IAAI,EAAE,MAAM,CAAA;IACZ,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,SAAS,CAAA;IACpC,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gDAAgD;IAChD,IAAI,EAAE,mBAAmB,CAAA;CAC1B;AAED,MAAM,WAAW,UAAW,SAAQ,UAAU;IAC5C,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;CACf;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,UAAU,GAAG,YAAY,CAAA;AAEpE,MAAM,WAAW,cAAc;IAC7B,qDAAqD;IACrD,OAAO,EAAE,eAAe,EAAE,CAAA;IAC1B,oCAAoC;IACpC,IAAI,EAAE,OAAO,EAAE,CAAA;IACf,iEAAiE;IACjE,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,GAAG,MAAM,CAAA;IAC5C,oDAAoD;IACpD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACnC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,IAAI,CAAA;CACd;AAED,KAAK,oBAAoB,GAAG,UAAU,GAAG,MAAM,CAAA;AAE/C,KAAK,uBAAuB,GAAG,KAAK,CAAA;AAEpC,MAAM,MAAM,qBAAqB,GAAG,+BAA+B,CACjE,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,uBAAuB,CACxB,CAAA;AAkBD;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS;6FASnB,qBAAqB;;CAkEvB,CAAA"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAA;AAEhF,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AACd,OAAO,EAQL,KAAK,UAAU,IAAI,cAAc,EAClC,MAAM,6BAA6B,CAAA;AAEpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAIxD,MAAM,MAAM,IAAI,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,CAAA;AAEhE,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AAEhE,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,OAAO,EAAE,eAAe,EAAE,CAAA;IAC1B,oCAAoC;IACpC,IAAI,EAAE,OAAO,EAAE,CAAA;IACf,iEAAiE;IACjE,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,GAAG,MAAM,CAAA;IAC5C;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAA;IACpC,oDAAoD;IACpD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACnC,wJAAwJ;IACxJ,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IACjD,+IAA+I;IAC/I,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,IAAI,CAAA;IACb,0QAA0Q;IAC1Q,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAID,KAAK,oBAAoB,GAAG,UAAU,GAAG,MAAM,CAAA;AAE/C,KAAK,uBAAuB,GAAG,KAAK,CAAA;AAEpC,MAAM,MAAM,qBAAqB,GAAG,+BAA+B,CACjE,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,uBAAuB,CACxB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,SAAS;kLAcnB,qBAAqB;;CAuGvB,CAAA"}

package/dist/components/DataTable/DataTable.js

@@ -1,48 +1,86 @@
+import LoadingSpinner from '../internal/LoadingSpinner.js';
 import Icon from '../../utilities/Icon.js';
 import classNames from 'classnames';
-import React__default, { useMemo } from 'react';
+import React__default, { useMemo, useRef, useState, useLayoutEffect } from 'react';
 import { Table, TableHeader, Column, TableBody, Row, Cell } from 'react-aria-components/Table';
+import { prepareColumn } from './DataTableColumnTypes.js';
+import { getRowKey } from './DataTableRow.js';
 
-function getCellValue(row, column) {
-    if (column.render)
-        return column.render(row);
-    const value = row?.[column.name];
-    return value === undefined || value === null ? "" : String(value);
-}
-function getRowKey(row, index, getRowId) {
-    if (getRowId)
-        return getRowId(row);
-    const id = row?.id;
-    return typeof id === "number" || typeof id === "string" ? id : index;
-}
+const DEFAULT_ERROR_STATE = "Something went wrong.";
 /**
  * A table for displaying tabular data. Built on React Aria's `Table`.
  *
- * This is an early skeleton: only column headers and string cell values are
- * rendered. Sorting, filtering, pagination, selection, and other RFC
- * features are not yet implemented.
+ * Each column declares a `type` that controls how its cell values are
+ * formatted: `string`, `number`, `currency`, `date`, `datetime`, `boolean`,
+ * `enum`, and `custom`. A column's `render` function always takes precedence
+ * over the built-in type formatting.
+ *
+ * Sorting, filtering, pagination, selection, and other RFC features are not yet
+ * implemented.
  *
  * @component
  */
-const DataTable = ({ className, columns, data, emptyState, getRowId, sortBy, onSortChange, ...restProps }) => {
+const DataTable = ({ className, columns, data, emptyState, errorState, getRowId, loadingState = "idle", scrollContainerRef, scrollContainerSelector = ".content-wrap", stickyHeader, sortBy, onSortChange, ...restProps }) => {
     const combinedClassName = classNames("tds-data-table", className);
     const sortDescriptor = useSortDescriptor(sortBy);
-    return (React__default.createElement("div", { className: "tds-data-table-wrapper" },
+    const { hasScrollContainer, wrapperRef } = useStickyHeader(stickyHeader, scrollContainerRef, scrollContainerSelector);
+    // React Aria only invokes `renderEmptyState` when the collection is empty, so
+    // the loading spinner and error message only take over the body while `data`
+    // is empty; once rows exist they always render.
+    const emptyStateContent = getEmptyStateContent({
+        emptyState,
+        errorState,
+        loadingState,
+    });
+    const renderEmptyState = emptyStateContent
+        ? () => emptyStateContent
+        : undefined;
+    // Keyed on column names rather than the `columns` array identity so a fresh
+    // `columns` literal each render doesn't rebuild every formatter. `columns` is
+    // intentionally omitted from the deps.
+    const columnKey = columns.map((c) => `${c.name}/${c.type}`).join("|");
+    const preparedColumns = useMemo(() => columns.map(prepareColumn), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [columnKey]);
+    return (React__default.createElement("div", { ref: wrapperRef, className: classNames("tds-data-table-wrapper", {
+            "tds-data-table-wrapper--sticky-header": hasScrollContainer,
+        }) },
         React__default.createElement("div", { className: "tds-data-table-scroll" },
             React__default.createElement(Table, { ...restProps, className: combinedClassName, sortDescriptor: sortDescriptor, onSortChange: (sort) => {
                     onSortChange?.(serializeSort(sort));
                 } },
-                React__default.createElement(TableHeader, { className: "tds-data-table-header" }, columns.map((column, index) => (React__default.createElement(Column, { key: column.name, id: column.name, isRowHeader: index === 0, className: "tds-data-table-column", allowsSorting: column.sortable },
+                React__default.createElement(TableHeader, { className: "tds-data-table-header" }, preparedColumns.map(({ align, column }, index) => (React__default.createElement(Column, { key: column.name, id: column.name, isRowHeader: index === 0, className: classNames("tds-data-table-column", {
+                        [`tds-data-table-column--align-${align}`]: align !== "start",
+                    }), allowsSorting: column.sortable },
                     column.hideLabel ? (React__default.createElement("span", { className: "tds-data-table-column-label--hidden" }, column.headerLabel)) : (column.headerLabel),
                     column.sortable && (React__default.createElement(Icon, { className: "tds-data-table-column-icon tds-data-table-column-icon--sort", symbol: "general#up-caret", "aria-hidden": true })))))),
-                React__default.createElement(TableBody, { className: "tds-data-table-body", renderEmptyState: emptyState
-                        ? () => React__default.createElement("div", { className: "tds-data-table-empty" }, emptyState)
-                        : undefined }, data.map((row, rowIndex) => {
+                React__default.createElement(TableBody, { className: "tds-data-table-body", renderEmptyState: renderEmptyState }, data.map((row, rowIndex) => {
                     const rowKey = getRowKey(row, rowIndex, getRowId);
-                    return (React__default.createElement(Row, { key: rowKey, id: rowKey, className: "tds-data-table-row" }, columns.map((column) => (React__default.createElement(Cell, { key: column.name, className: "tds-data-table-cell" }, getCellValue(row, column))))));
+                    return (React__default.createElement(Row, { key: rowKey, id: rowKey, className: "tds-data-table-row" }, preparedColumns.map((prepared) => (React__default.createElement(Cell, { key: prepared.column.name, className: classNames("tds-data-table-cell", {
+                            [`tds-data-table-cell--align-${prepared.align}`]: prepared.align !== "start",
+                            "tds-data-table-cell--numeric": prepared.isNumeric,
+                        }) }, prepared.renderCell(row))))));
                 }))))));
 };
 DataTable.displayName = "DataTable";
+/**
+ * Resolves the content rendered in the table body's empty-state slot based on
+ * `loadingState`, falling back to `emptyState`. Returns `null` when nothing
+ * should render (idle with no `emptyState`).
+ */
+function getEmptyStateContent({ emptyState, errorState, loadingState, }) {
+    if (loadingState === "loading") {
+        return (React__default.createElement("div", { className: "tds-data-table-loading", role: "status" },
+            React__default.createElement("span", { className: "tds-data-table-cell-label--hidden" }, "Loading"),
+            React__default.createElement("span", { className: "tds-data-table-loading-spinner", "aria-hidden": "true" },
+                React__default.createElement(LoadingSpinner, null))));
+    }
+    // Error and empty share the same container; they differ only in content.
+    const content = loadingState === "error" ? (errorState ?? DEFAULT_ERROR_STATE) : emptyState;
+    if (content == null)
+        return null;
+    return React__default.createElement("div", { className: "tds-data-table-empty" }, content);
+}
 function useSortDescriptor(sortBy) {
     return useMemo(() => {
         if (!sortBy)
@@ -60,6 +98,63 @@ function serializeSort(sort) {
         return { column: sort.column, direction: "desc" };
     return { column: sort.column, direction: "asc" };
 }
+function useStickyHeader(stickyHeader, scrollContainerRef, scrollContainerSelector) {
+    const wrapperRef = useRef(null);
+    const [hasScrollContainer, setHasScrollContainer] = useState(false);
+    useLayoutEffect(() => {
+        setHasScrollContainer(false);
+        if (!stickyHeader)
+            return;
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const wrapper = wrapperRef.current;
+        if (!wrapper)
+            return;
+        const scrollContainer = getScrollContainer(scrollContainerRef, scrollContainerSelector, wrapper);
+        if (!scrollContainer)
+            return;
+        setHasScrollContainer(true);
+        let thead = null;
+        const resizeObserver = new ResizeObserver(() => {
+            if (!thead) {
+                thead = wrapper.querySelector(".tds-data-table-header");
+                if (!thead)
+                    return;
+                scrollContainer.style.setProperty("scroll-timeline-name", "--_sticky-header-scroll");
+            }
+            const { top: wrapperTop, bottom: wrapperBottom } = wrapper.getBoundingClientRect();
+            const { top: scrollContainerTop } = scrollContainer.getBoundingClientRect();
+            // Derive headerTop from the untransformed wrapper to avoid reading the
+            // scroll-driven translateY that getBoundingClientRect() includes on thead.
+            const headerTop = wrapperTop + wrapper.clientTop;
+            const start = scrollContainer.scrollTop + (headerTop - scrollContainerTop);
+            const max = Math.max(0, wrapperBottom - headerTop - thead.offsetHeight);
+            wrapper.style.setProperty("--_sticky-header-scroll-start", `${start}px`);
+            wrapper.style.setProperty("--_sticky-header-scroll-max", `${max}px`);
+        });
+        resizeObserver.observe(wrapper);
+        resizeObserver.observe(scrollContainer);
+        return () => {
+            resizeObserver.disconnect();
+            wrapper.style.removeProperty("--_sticky-header-scroll-start");
+            wrapper.style.removeProperty("--_sticky-header-scroll-max");
+        };
+    }, [stickyHeader, scrollContainerRef, scrollContainerSelector]);
+    return { hasScrollContainer, wrapperRef };
+}
+function getScrollContainer(scrollContainerRef, scrollContainerSelector, wrapper) {
+    const element = scrollContainerRef?.current ??
+        getScrollContainerFromSelector(scrollContainerSelector, wrapper);
+    if (element instanceof Window)
+        return;
+    return element;
+}
+function getScrollContainerFromSelector(scrollContainerSelector, wrapper) {
+    return scrollContainerSelector
+        ? (wrapper.parentElement?.closest(scrollContainerSelector) ??
+            undefined)
+        : undefined;
+}
 
 export { DataTable };
 //# sourceMappingURL=DataTable.js.map

package/dist/components/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, { type ReactNode, useMemo } from \"react\"\nimport {\n  Cell,\n  Column,\n  Row,\n  type SortDescriptor,\n  Table,\n  TableBody,\n  TableHeader,\n  type TableProps as AriaTableProps,\n} from \"react-aria-components/Table\"\n\nexport type DataTableColumnType =\n  | \"boolean\"\n  | \"currency\"\n  | \"custom\"\n  | \"date\"\n  | \"enum\"\n  | \"number\"\n  | \"string\"\n\nexport type Sort = { column: string; direction: \"asc\" | \"desc\" }\n\ninterface BaseColumn {\n  /** Determines how items align in the table. */\n  align?: \"center\" | \"end\" | \"start\"\n  /** Human-readable column header label. */\n  headerLabel: string\n  /**\n   * Visually hides the header label. The text is still rendered (visually\n   * hidden via CSS) so it remains announced to assistive tech.\n   */\n  hideLabel?: boolean\n  /** Key used to look up the value in each row by default. */\n  name: string\n  /** Enables filtering on this column. See Filtering. */\n  queryable?: boolean\n  /** Custom cell renderer. Defaults to `row[column.name]`. */\n  render?: (row: unknown) => ReactNode\n  /** Enables the resizing of that column. */\n  resizable?: boolean\n  /** Enables sorting on this column. */\n  sortable?: boolean\n  /** Determines rendering and filter behavior. */\n  type: DataTableColumnType\n}\n\nexport interface EnumColumn extends BaseColumn {\n  enumValues: string[]\n  type: \"enum\"\n}\n\nexport interface NumberColumn extends BaseColumn {\n  max?: number\n  min?: number\n  step?: number\n  type: \"number\"\n}\n\nexport type DataTableColumn = BaseColumn | EnumColumn | NumberColumn\n\nexport interface DataTableProps {\n  /** Columns define what data is displayed and how. */\n  columns: DataTableColumn[]\n  /** The array of rows to display. */\n  data: unknown[]\n  /** Rendered in place of the table body when there is no data. */\n  emptyState?: ReactNode\n  /** Returns a stable identity for each row. Defaults to `row.id`. */\n  getRowId?: (row: unknown) => number | string\n  /** Callback invoked when the sort state changes. */\n  onSortChange?: (sort: Sort) => void\n  /** The current sort state for the table. */\n  sortBy?: Sort\n}\n\ntype AriaTablePropsToOmit = \"children\" | \"slot\"\n\ntype AriaTablePropsToInclude = never\n\nexport type DataTableElementProps = CombineAriaPropsWithCustomProps<\n  AriaTableProps,\n  DataTableProps,\n  AriaTablePropsToOmit,\n  AriaTablePropsToInclude\n>\n\nfunction getCellValue(row: unknown, column: DataTableColumn): ReactNode {\n  if (column.render) return column.render(row)\n  const value = (row as Record<string, unknown>)?.[column.name]\n  return value === undefined || value === null ? \"\" : String(value)\n}\n\nfunction getRowKey(\n  row: unknown,\n  index: number,\n  getRowId?: (row: unknown) => number | string\n): number | string {\n  if (getRowId) return getRowId(row)\n  const id = (row as Record<string, unknown>)?.id\n  return typeof id === \"number\" || typeof id === \"string\" ? id : index\n}\n\n/**\n * A table for displaying tabular data. Built on React Aria's `Table`.\n *\n * This is an early skeleton: only column headers and string cell values are\n * rendered. Sorting, filtering, pagination, selection, and other RFC\n * features are not yet implemented.\n *\n * @component\n */\nexport const DataTable = ({\n  className,\n  columns,\n  data,\n  emptyState,\n  getRowId,\n  sortBy,\n  onSortChange,\n  ...restProps\n}: DataTableElementProps) => {\n  const combinedClassName = classNames(\"tds-data-table\", className)\n  const sortDescriptor = useSortDescriptor(sortBy)\n\n  return (\n    <div className=\"tds-data-table-wrapper\">\n      <div className=\"tds-data-table-scroll\">\n        <Table\n          {...restProps}\n          className={combinedClassName}\n          sortDescriptor={sortDescriptor}\n          onSortChange={(sort) => {\n            onSortChange?.(serializeSort(sort))\n          }}\n        >\n          <TableHeader className=\"tds-data-table-header\">\n            {columns.map((column, index) => (\n              <Column\n                key={column.name}\n                id={column.name}\n                isRowHeader={index === 0}\n                className=\"tds-data-table-column\"\n                allowsSorting={column.sortable}\n              >\n                {column.hideLabel ? (\n                  <span className=\"tds-data-table-column-label--hidden\">\n                    {column.headerLabel}\n                  </span>\n                ) : (\n                  column.headerLabel\n                )}\n                {column.sortable && (\n                  <Icon\n                    className=\"tds-data-table-column-icon tds-data-table-column-icon--sort\"\n                    symbol=\"general#up-caret\"\n                    aria-hidden={true}\n                  />\n                )}\n              </Column>\n            ))}\n          </TableHeader>\n          <TableBody\n            className=\"tds-data-table-body\"\n            renderEmptyState={\n              emptyState\n                ? () => <div className=\"tds-data-table-empty\">{emptyState}</div>\n                : undefined\n            }\n          >\n            {data.map((row, rowIndex) => {\n              const rowKey = getRowKey(row, rowIndex, getRowId)\n              return (\n                <Row key={rowKey} id={rowKey} className=\"tds-data-table-row\">\n                  {columns.map((column) => (\n                    <Cell key={column.name} className=\"tds-data-table-cell\">\n                      {getCellValue(row, column)}\n                    </Cell>\n                  ))}\n                </Row>\n              )\n            })}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n\nDataTable.displayName = \"DataTable\"\n\nfunction useSortDescriptor(\n  sortBy: Sort | undefined\n): SortDescriptor | undefined {\n  return useMemo(() => {\n    if (!sortBy) return undefined\n    return deserializeSort(sortBy)\n  }, [sortBy])\n}\n\nfunction deserializeSort(sort: Sort): SortDescriptor {\n  if (sort.direction === \"desc\")\n    return { column: sort.column, direction: \"descending\" }\n  return { column: sort.column, direction: \"ascending\" }\n}\n\nfunction serializeSort(sort: SortDescriptor): Sort {\n  if (sort.direction === \"descending\")\n    return { column: sort.column as string, direction: \"desc\" }\n  return { column: sort.column as string, direction: \"asc\" }\n}\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { LoadingSpinner } from \"@components/internal\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport classNames from \"classnames\"\nimport React, {\n  type ReactNode,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport {\n  Cell,\n  Column,\n  Row,\n  type SortDescriptor,\n  Table,\n  TableBody,\n  TableHeader,\n  type TableProps as AriaTableProps,\n} from \"react-aria-components/Table\"\n\nimport type { DataTableColumn } from \"./DataTableColumn\"\nimport { prepareColumn, type PreparedColumn } from \"./DataTableColumnTypes\"\nimport { getRowKey } from \"./DataTableRow\"\n\nexport type Sort = { column: string; direction: \"asc\" | \"desc\" }\n\nexport type DataTableLoadingState = \"error\" | \"idle\" | \"loading\"\n\nexport interface DataTableProps {\n  /**\n   * Columns define what data is displayed and how. Pass a stable reference\n   * (e.g. a module constant or memoized value); columns are prepared per array\n   * identity, so an inline array rebuilds each column's formatter every render.\n   */\n  columns: DataTableColumn[]\n  /** The array of rows to display. */\n  data: unknown[]\n  /** Rendered in place of the table body when there is no data. */\n  emptyState?: ReactNode\n  /** Rendered in place of the table body when `loadingState` is `\"error\"`. */\n  errorState?: ReactNode\n  /** Returns a stable identity for each row. Defaults to `row.id`. */\n  getRowId?: (row: unknown) => number | string\n  /**\n   * Async loading state for the table body.\n   * - `\"loading\"`: While `data` is empty, replaces the empty state with a\n   *   centered spinner.\n   * - `\"error\"`: While `data` is empty, replaces the empty state with\n   *   `errorState` (or a default error message).\n   * - `\"idle\"` (default): Normal rendering.\n   */\n  loadingState?: DataTableLoadingState\n  /** Callback invoked when the sort state changes. */\n  onSortChange?: (sort: Sort) => void\n  /** Ref to the scroll container the sticky header should track. Takes priority over `scrollContainerSelector`. Only used when `stickyHeader` is true. */\n  scrollContainerRef?: React.RefObject<HTMLElement>\n  /** CSS selector for the scroll container the sticky header should track. Only used when `stickyHeader` is true. Defaults to \".content-wrap\" */\n  scrollContainerSelector?: string\n  /** The current sort state for the table. */\n  sortBy?: Sort\n  /** Enables a sticky header that tracks an outer scroll container. Progressive enhancement: Relies on `animation-timeline: scroll()`, which isn't supported in all browsers (e.g. Firefox) — the header scrolls with the table body instead of sticking in those cases. */\n  stickyHeader?: boolean\n}\n\nconst DEFAULT_ERROR_STATE = \"Something went wrong.\"\n\ntype AriaTablePropsToOmit = \"children\" | \"slot\"\n\ntype AriaTablePropsToInclude = never\n\nexport type DataTableElementProps = CombineAriaPropsWithCustomProps<\n  AriaTableProps,\n  DataTableProps,\n  AriaTablePropsToOmit,\n  AriaTablePropsToInclude\n>\n\n/**\n * A table for displaying tabular data. Built on React Aria's `Table`.\n *\n * Each column declares a `type` that controls how its cell values are\n * formatted: `string`, `number`, `currency`, `date`, `datetime`, `boolean`,\n * `enum`, and `custom`. A column's `render` function always takes precedence\n * over the built-in type formatting.\n *\n * Sorting, filtering, pagination, selection, and other RFC features are not yet\n * implemented.\n *\n * @component\n */\nexport const DataTable = ({\n  className,\n  columns,\n  data,\n  emptyState,\n  errorState,\n  getRowId,\n  loadingState = \"idle\",\n  scrollContainerRef,\n  scrollContainerSelector = \".content-wrap\",\n  stickyHeader,\n  sortBy,\n  onSortChange,\n  ...restProps\n}: DataTableElementProps) => {\n  const combinedClassName = classNames(\"tds-data-table\", className)\n  const sortDescriptor = useSortDescriptor(sortBy)\n  const { hasScrollContainer, wrapperRef } = useStickyHeader(\n    stickyHeader,\n    scrollContainerRef,\n    scrollContainerSelector\n  )\n\n  // React Aria only invokes `renderEmptyState` when the collection is empty, so\n  // the loading spinner and error message only take over the body while `data`\n  // is empty; once rows exist they always render.\n  const emptyStateContent = getEmptyStateContent({\n    emptyState,\n    errorState,\n    loadingState,\n  })\n  const renderEmptyState = emptyStateContent\n    ? () => emptyStateContent\n    : undefined\n\n  // Keyed on column names rather than the `columns` array identity so a fresh\n  // `columns` literal each render doesn't rebuild every formatter. `columns` is\n  // intentionally omitted from the deps.\n  const columnKey = columns.map((c) => `${c.name}/${c.type}`).join(\"|\")\n  const preparedColumns = useMemo<PreparedColumn[]>(\n    () => columns.map(prepareColumn),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [columnKey]\n  )\n\n  return (\n    <div\n      ref={wrapperRef}\n      className={classNames(\"tds-data-table-wrapper\", {\n        \"tds-data-table-wrapper--sticky-header\": hasScrollContainer,\n      })}\n    >\n      <div className=\"tds-data-table-scroll\">\n        <Table\n          {...restProps}\n          className={combinedClassName}\n          sortDescriptor={sortDescriptor}\n          onSortChange={(sort) => {\n            onSortChange?.(serializeSort(sort))\n          }}\n        >\n          <TableHeader className=\"tds-data-table-header\">\n            {preparedColumns.map(({ align, column }, index) => (\n              <Column\n                key={column.name}\n                id={column.name}\n                isRowHeader={index === 0}\n                className={classNames(\"tds-data-table-column\", {\n                  [`tds-data-table-column--align-${align}`]: align !== \"start\",\n                })}\n                allowsSorting={column.sortable}\n              >\n                {column.hideLabel ? (\n                  <span className=\"tds-data-table-column-label--hidden\">\n                    {column.headerLabel}\n                  </span>\n                ) : (\n                  column.headerLabel\n                )}\n                {column.sortable && (\n                  <Icon\n                    className=\"tds-data-table-column-icon tds-data-table-column-icon--sort\"\n                    symbol=\"general#up-caret\"\n                    aria-hidden={true}\n                  />\n                )}\n              </Column>\n            ))}\n          </TableHeader>\n          <TableBody\n            className=\"tds-data-table-body\"\n            renderEmptyState={renderEmptyState}\n          >\n            {data.map((row, rowIndex) => {\n              const rowKey = getRowKey(row, rowIndex, getRowId)\n              return (\n                <Row key={rowKey} id={rowKey} className=\"tds-data-table-row\">\n                  {preparedColumns.map((prepared) => (\n                    <Cell\n                      key={prepared.column.name}\n                      className={classNames(\"tds-data-table-cell\", {\n                        [`tds-data-table-cell--align-${prepared.align}`]:\n                          prepared.align !== \"start\",\n                        \"tds-data-table-cell--numeric\": prepared.isNumeric,\n                      })}\n                    >\n                      {prepared.renderCell(row)}\n                    </Cell>\n                  ))}\n                </Row>\n              )\n            })}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n\nDataTable.displayName = \"DataTable\"\n\n/**\n * Resolves the content rendered in the table body's empty-state slot based on\n * `loadingState`, falling back to `emptyState`. Returns `null` when nothing\n * should render (idle with no `emptyState`).\n */\nfunction getEmptyStateContent({\n  emptyState,\n  errorState,\n  loadingState,\n}: {\n  emptyState: ReactNode\n  errorState: ReactNode\n  loadingState: DataTableLoadingState\n}): ReactNode {\n  if (loadingState === \"loading\") {\n    return (\n      <div className=\"tds-data-table-loading\" role=\"status\">\n        <span className=\"tds-data-table-cell-label--hidden\">Loading</span>\n        <span className=\"tds-data-table-loading-spinner\" aria-hidden=\"true\">\n          <LoadingSpinner />\n        </span>\n      </div>\n    )\n  }\n\n  // Error and empty share the same container; they differ only in content.\n  const content =\n    loadingState === \"error\" ? (errorState ?? DEFAULT_ERROR_STATE) : emptyState\n  if (content == null) return null\n\n  return <div className=\"tds-data-table-empty\">{content}</div>\n}\n\nfunction useSortDescriptor(\n  sortBy: Sort | undefined\n): SortDescriptor | undefined {\n  return useMemo(() => {\n    if (!sortBy) return undefined\n    return deserializeSort(sortBy)\n  }, [sortBy])\n}\n\nfunction deserializeSort(sort: Sort): SortDescriptor {\n  if (sort.direction === \"desc\")\n    return { column: sort.column, direction: \"descending\" }\n  return { column: sort.column, direction: \"ascending\" }\n}\n\nfunction serializeSort(sort: SortDescriptor): Sort {\n  if (sort.direction === \"descending\")\n    return { column: sort.column as string, direction: \"desc\" }\n  return { column: sort.column as string, direction: \"asc\" }\n}\n\nfunction useStickyHeader(\n  stickyHeader: boolean | undefined,\n  scrollContainerRef: React.RefObject<HTMLElement> | undefined,\n  scrollContainerSelector: string | undefined\n) {\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const [hasScrollContainer, setHasScrollContainer] = useState(false)\n\n  useLayoutEffect(() => {\n    setHasScrollContainer(false)\n    if (!stickyHeader) return\n    if (typeof ResizeObserver === \"undefined\") return\n    const wrapper = wrapperRef.current\n    if (!wrapper) return\n\n    const scrollContainer = getScrollContainer(\n      scrollContainerRef,\n      scrollContainerSelector,\n      wrapper\n    )\n    if (!scrollContainer) return\n\n    setHasScrollContainer(true)\n\n    let thead: HTMLElement | null = null\n\n    const resizeObserver = new ResizeObserver(() => {\n      if (!thead) {\n        thead = wrapper.querySelector<HTMLElement>(\".tds-data-table-header\")\n        if (!thead) return\n        scrollContainer.style.setProperty(\n          \"scroll-timeline-name\",\n          \"--_sticky-header-scroll\"\n        )\n      }\n\n      const { top: wrapperTop, bottom: wrapperBottom } =\n        wrapper.getBoundingClientRect()\n      const { top: scrollContainerTop } =\n        scrollContainer.getBoundingClientRect()\n      // Derive headerTop from the untransformed wrapper to avoid reading the\n      // scroll-driven translateY that getBoundingClientRect() includes on thead.\n      const headerTop = wrapperTop + wrapper.clientTop\n      const start = scrollContainer.scrollTop + (headerTop - scrollContainerTop)\n      const max = Math.max(0, wrapperBottom - headerTop - thead.offsetHeight)\n      wrapper.style.setProperty(\"--_sticky-header-scroll-start\", `${start}px`)\n      wrapper.style.setProperty(\"--_sticky-header-scroll-max\", `${max}px`)\n    })\n\n    resizeObserver.observe(wrapper)\n    resizeObserver.observe(scrollContainer)\n\n    return () => {\n      resizeObserver.disconnect()\n      wrapper.style.removeProperty(\"--_sticky-header-scroll-start\")\n      wrapper.style.removeProperty(\"--_sticky-header-scroll-max\")\n    }\n  }, [stickyHeader, scrollContainerRef, scrollContainerSelector])\n\n  return { hasScrollContainer, wrapperRef }\n}\n\nfunction getScrollContainer(\n  scrollContainerRef: React.RefObject<HTMLElement> | undefined,\n  scrollContainerSelector: string | undefined,\n  wrapper: HTMLElement\n): HTMLElement | undefined {\n  const element =\n    scrollContainerRef?.current ??\n    getScrollContainerFromSelector(scrollContainerSelector, wrapper)\n  if (element instanceof Window) return\n  return element\n}\n\nfunction getScrollContainerFromSelector(\n  scrollContainerSelector: string | undefined,\n  wrapper: HTMLElement\n): HTMLElement | undefined {\n  return scrollContainerSelector\n    ? (wrapper.parentElement?.closest<HTMLElement>(scrollContainerSelector) ??\n        undefined)\n    : undefined\n}\n"],"names":["React"],"mappings":";;;;;;;;AAoEA,MAAM,mBAAmB,GAAG,uBAAuB;AAanD;;;;;;;;;;;;AAYG;AACI,MAAM,SAAS,GAAG,CAAC,EACxB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,UAAU,EACV,UAAU,EACV,QAAQ,EACR,YAAY,GAAG,MAAM,EACrB,kBAAkB,EAClB,uBAAuB,GAAG,eAAe,EACzC,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,GAAG,SAAS,EACU,KAAI;IAC1B,MAAM,iBAAiB,GAAG,UAAU,CAAC,gBAAgB,EAAE,SAAS,CAAC;AACjE,IAAA,MAAM,cAAc,GAAG,iBAAiB,CAAC,MAAM,CAAC;AAChD,IAAA,MAAM,EAAE,kBAAkB,EAAE,UAAU,EAAE,GAAG,eAAe,CACxD,YAAY,EACZ,kBAAkB,EAClB,uBAAuB,CACxB;;;;IAKD,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;QAC7C,UAAU;QACV,UAAU;QACV,YAAY;AACb,KAAA,CAAC;IACF,MAAM,gBAAgB,GAAG;AACvB,UAAE,MAAM;UACN,SAAS;;;;IAKb,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAA,EAAG,CAAC,CAAC,IAAI,CAAA,CAAA,EAAI,CAAC,CAAC,IAAI,CAAA,CAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AACrE,IAAA,MAAM,eAAe,GAAG,OAAO,CAC7B,MAAM,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC;;IAEhC,CAAC,SAAS,CAAC,CACZ;IAED,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,UAAU,CAAC,wBAAwB,EAAE;AAC9C,YAAA,uCAAuC,EAAE,kBAAkB;SAC5D,CAAC,EAAA;QAEFA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uBAAuB,EAAA;AACpC,YAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAA,GACA,SAAS,EACb,SAAS,EAAE,iBAAiB,EAC5B,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,CAAC,IAAI,KAAI;AACrB,oBAAA,YAAY,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;gBACrC,CAAC,EAAA;gBAEDA,cAAA,CAAA,aAAA,CAAC,WAAW,IAAC,SAAS,EAAC,uBAAuB,EAAA,EAC3C,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,KAAK,MAC5CA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,GAAG,EAAE,MAAM,CAAC,IAAI,EAChB,EAAE,EAAE,MAAM,CAAC,IAAI,EACf,WAAW,EAAE,KAAK,KAAK,CAAC,EACxB,SAAS,EAAE,UAAU,CAAC,uBAAuB,EAAE;AAC7C,wBAAA,CAAC,gCAAgC,KAAK,CAAA,CAAE,GAAG,KAAK,KAAK,OAAO;AAC7D,qBAAA,CAAC,EACF,aAAa,EAAE,MAAM,CAAC,QAAQ,EAAA;oBAE7B,MAAM,CAAC,SAAS,IACfA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,qCAAqC,EAAA,EAClD,MAAM,CAAC,WAAW,CACd,KAEP,MAAM,CAAC,WAAW,CACnB;oBACA,MAAM,CAAC,QAAQ,KACdA,6BAAC,IAAI,EAAA,EACH,SAAS,EAAC,6DAA6D,EACvE,MAAM,EAAC,kBAAkB,EAAA,aAAA,EACZ,IAAI,GACjB,CACH,CACM,CACV,CAAC,CACU;AACd,gBAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,SAAS,EAAC,qBAAqB,EAC/B,gBAAgB,EAAE,gBAAgB,IAEjC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAI;oBAC1B,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,CAAC;AACjD,oBAAA,QACEA,cAAA,CAAA,aAAA,CAAC,GAAG,IAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAC,oBAAoB,IACzD,eAAe,CAAC,GAAG,CAAC,CAAC,QAAQ,MAC5BA,6BAAC,IAAI,EAAA,EACH,GAAG,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,EACzB,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE;4BAC3C,CAAC,CAAA,2BAAA,EAA8B,QAAQ,CAAC,KAAK,CAAA,CAAE,GAC7C,QAAQ,CAAC,KAAK,KAAK,OAAO;4BAC5B,8BAA8B,EAAE,QAAQ,CAAC,SAAS;AACnD,yBAAA,CAAC,EAAA,EAED,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,CACpB,CACR,CAAC,CACE;AAEV,gBAAA,CAAC,CAAC,CACQ,CACN,CACJ,CACF;AAEV;AAEA,SAAS,CAAC,WAAW,GAAG,WAAW;AAEnC;;;;AAIG;AACH,SAAS,oBAAoB,CAAC,EAC5B,UAAU,EACV,UAAU,EACV,YAAY,GAKb,EAAA;AACC,IAAA,IAAI,YAAY,KAAK,SAAS,EAAE;QAC9B,QACEA,sCAAK,SAAS,EAAC,wBAAwB,EAAC,IAAI,EAAC,QAAQ,EAAA;YACnDA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mCAAmC,EAAA,EAAA,SAAA,CAAe;AAClE,YAAAA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gCAAgC,EAAA,aAAA,EAAa,MAAM,EAAA;AACjE,gBAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG,CACb,CACH;IAEV;;AAGA,IAAA,MAAM,OAAO,GACX,YAAY,KAAK,OAAO,IAAI,UAAU,IAAI,mBAAmB,IAAI,UAAU;IAC7E,IAAI,OAAO,IAAI,IAAI;AAAE,QAAA,OAAO,IAAI;AAEhC,IAAA,OAAOA,sCAAK,SAAS,EAAC,sBAAsB,EAAA,EAAE,OAAO,CAAO;AAC9D;AAEA,SAAS,iBAAiB,CACxB,MAAwB,EAAA;IAExB,OAAO,OAAO,CAAC,MAAK;AAClB,QAAA,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,SAAS;AAC7B,QAAA,OAAO,eAAe,CAAC,MAAM,CAAC;AAChC,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AACd;AAEA,SAAS,eAAe,CAAC,IAAU,EAAA;AACjC,IAAA,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM;QAC3B,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE;IACzD,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE;AACxD;AAEA,SAAS,aAAa,CAAC,IAAoB,EAAA;AACzC,IAAA,IAAI,IAAI,CAAC,SAAS,KAAK,YAAY;QACjC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAgB,EAAE,SAAS,EAAE,MAAM,EAAE;IAC7D,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAgB,EAAE,SAAS,EAAE,KAAK,EAAE;AAC5D;AAEA,SAAS,eAAe,CACtB,YAAiC,EACjC,kBAA4D,EAC5D,uBAA2C,EAAA;AAE3C,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC;IAC/C,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAEnE,eAAe,CAAC,MAAK;QACnB,qBAAqB,CAAC,KAAK,CAAC;AAC5B,QAAA,IAAI,CAAC,YAAY;YAAE;QACnB,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE;AAC3C,QAAA,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO;AAClC,QAAA,IAAI,CAAC,OAAO;YAAE;QAEd,MAAM,eAAe,GAAG,kBAAkB,CACxC,kBAAkB,EAClB,uBAAuB,EACvB,OAAO,CACR;AACD,QAAA,IAAI,CAAC,eAAe;YAAE;QAEtB,qBAAqB,CAAC,IAAI,CAAC;QAE3B,IAAI,KAAK,GAAuB,IAAI;AAEpC,QAAA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;YAC7C,IAAI,CAAC,KAAK,EAAE;AACV,gBAAA,KAAK,GAAG,OAAO,CAAC,aAAa,CAAc,wBAAwB,CAAC;AACpE,gBAAA,IAAI,CAAC,KAAK;oBAAE;gBACZ,eAAe,CAAC,KAAK,CAAC,WAAW,CAC/B,sBAAsB,EACtB,yBAAyB,CAC1B;YACH;AAEA,YAAA,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,aAAa,EAAE,GAC9C,OAAO,CAAC,qBAAqB,EAAE;YACjC,MAAM,EAAE,GAAG,EAAE,kBAAkB,EAAE,GAC/B,eAAe,CAAC,qBAAqB,EAAE;;;AAGzC,YAAA,MAAM,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC,SAAS;YAChD,MAAM,KAAK,GAAG,eAAe,CAAC,SAAS,IAAI,SAAS,GAAG,kBAAkB,CAAC;AAC1E,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,GAAG,SAAS,GAAG,KAAK,CAAC,YAAY,CAAC;YACvE,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,+BAA+B,EAAE,CAAA,EAAG,KAAK,CAAA,EAAA,CAAI,CAAC;YACxE,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,6BAA6B,EAAE,CAAA,EAAG,GAAG,CAAA,EAAA,CAAI,CAAC;AACtE,QAAA,CAAC,CAAC;AAEF,QAAA,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC;AAC/B,QAAA,cAAc,CAAC,OAAO,CAAC,eAAe,CAAC;AAEvC,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,UAAU,EAAE;AAC3B,YAAA,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,+BAA+B,CAAC;AAC7D,YAAA,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,6BAA6B,CAAC;AAC7D,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,kBAAkB,EAAE,uBAAuB,CAAC,CAAC;AAE/D,IAAA,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE;AAC3C;AAEA,SAAS,kBAAkB,CACzB,kBAA4D,EAC5D,uBAA2C,EAC3C,OAAoB,EAAA;AAEpB,IAAA,MAAM,OAAO,GACX,kBAAkB,EAAE,OAAO;AAC3B,QAAA,8BAA8B,CAAC,uBAAuB,EAAE,OAAO,CAAC;IAClE,IAAI,OAAO,YAAY,MAAM;QAAE;AAC/B,IAAA,OAAO,OAAO;AAChB;AAEA,SAAS,8BAA8B,CACrC,uBAA2C,EAC3C,OAAoB,EAAA;AAEpB,IAAA,OAAO;WACF,OAAO,CAAC,aAAa,EAAE,OAAO,CAAc,uBAAuB,CAAC;AACnE,YAAA,SAAS;UACX,SAAS;AACf;;;;"}

package/dist/components/DataTable/DataTableColumn.d.ts

@@ -0,0 +1,105 @@
+import type { ReactNode } from "react";
+export type DataTableColumnType = "boolean"
+/**
+ * @experimental Unstable — subject to change. Currency support is in beta
+ * and is currently hardwired to USD; the API may change without notice.
+ */
+ | "currency" | "custom" | "date" | "datetime" | "enum" | "number" | "string";
+export type DataTableColumnAlign = "center" | "end" | "start";
+interface BaseColumn {
+    /** Determines how items align in the table. */
+    align?: DataTableColumnAlign;
+    /** Human-readable column header label. */
+    headerLabel: string;
+    /** Hides the visible header label (still announced to assistive tech). */
+    hideLabel?: boolean;
+    /** Key used to look up the value in each row by default. */
+    name: string;
+    /** Enables filtering on this column. See Filtering. */
+    queryable?: boolean;
+    /** Custom cell renderer. Defaults to a type-aware format of `row[column.name]`. */
+    render?: (row: unknown) => ReactNode;
+    /** Enables the resizing of that column. */
+    resizable?: boolean;
+    /** Enables sorting on this column. */
+    sortable?: boolean;
+}
+/** Renders the raw value as text. */
+export interface StringColumn extends BaseColumn {
+    type: "string";
+}
+/** Formats numeric values with `Intl.NumberFormat`. Aligns to the end by default. */
+export interface NumberColumn extends BaseColumn {
+    /** Maximum value. Used by numeric filters. */
+    max?: number;
+    /** Minimum value. Used by numeric filters. */
+    min?: number;
+    /** Overrides the `Intl.NumberFormat` options used to display values. */
+    numberFormatOptions?: Intl.NumberFormatOptions;
+    /** Step increment. Used by numeric filters. */
+    step?: number;
+    type: "number";
+}
+/**
+ * @experimental Unstable — subject to change. Currency support is in beta and
+ * is currently hardwired to USD; the API may change without notice.
+ *
+ * Formats numeric values as currency. Aligns to the end by default.
+ */
+export interface CurrencyColumn extends BaseColumn {
+    /** Overrides the `Intl.NumberFormat` options used to display values. */
+    numberFormatOptions?: Intl.NumberFormatOptions;
+    type: "currency";
+}
+/**
+ * Formats date values (without a time) with the `@internationalized/date`
+ * `DateFormatter` (a locale-aware wrapper around `Intl.DateTimeFormat`).
+ * Accepts `DateValue` objects from `@internationalized/date` (`CalendarDate`,
+ * `CalendarDateTime`, `ZonedDateTime`), `Date` objects, timestamps, or date
+ * strings (ISO `YYYY-MM-DD` strings are parsed as local dates to avoid
+ * time-zone drift). Defaults to a `medium` date style.
+ */
+export interface DateColumn extends BaseColumn {
+    /** Overrides the `Intl.DateTimeFormatOptions` used by the `DateFormatter`. */
+    dateFormatOptions?: Intl.DateTimeFormatOptions;
+    type: "date";
+}
+/**
+ * Formats date values with both a date and a time, displaying the time after
+ * the date. Uses the `@internationalized/date` `DateFormatter` (a locale-aware
+ * wrapper around `Intl.DateTimeFormat`) and accepts the same value types as
+ * {@link DateColumn}. Defaults to a `medium` date style with a `short` time
+ * style.
+ */
+export interface DateTimeColumn extends BaseColumn {
+    /** Overrides the `Intl.DateTimeFormatOptions` used by the `DateFormatter`. */
+    dateFormatOptions?: Intl.DateTimeFormatOptions;
+    type: "datetime";
+}
+/**
+ * Renders a boolean value as a check icon for truthy values and nothing for
+ * falsy ones. The meaning stays available to assistive tech: `trueLabel`
+ * becomes the icon's accessible name, and `falseLabel` renders as
+ * visually-hidden text.
+ */
+export interface BooleanColumn extends BaseColumn {
+    /** Accessible label for falsy values. Defaults to `"No"`. */
+    falseLabel?: string;
+    /** Accessible label for truthy values. Defaults to `"Yes"`. */
+    trueLabel?: string;
+    type: "boolean";
+}
+/** Renders one of a fixed set of values. */
+export interface EnumColumn extends BaseColumn {
+    /** The set of allowed values. Used by enum filters. */
+    enumValues: string[];
+    type: "enum";
+}
+/** Renders entirely through a required `render` function. */
+export interface CustomColumn extends BaseColumn {
+    render: (row: unknown) => ReactNode;
+    type: "custom";
+}
+export type DataTableColumn = BooleanColumn | CurrencyColumn | CustomColumn | DateColumn | DateTimeColumn | EnumColumn | NumberColumn | StringColumn;
+export {};
+//# sourceMappingURL=DataTableColumn.d.ts.map

package/dist/components/DataTable/DataTableColumn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableColumn.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableColumn.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,mBAAmB,GAC3B,SAAS;AACX;;;GAGG;GACD,UAAU,GACV,QAAQ,GACR,MAAM,GACN,UAAU,GACV,MAAM,GACN,QAAQ,GACR,QAAQ,CAAA;AAEZ,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA;AAE7D,UAAU,UAAU;IAClB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,oBAAoB,CAAA;IAC5B,0CAA0C;IAC1C,WAAW,EAAE,MAAM,CAAA;IACnB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4DAA4D;IAC5D,IAAI,EAAE,MAAM,CAAA;IACZ,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mFAAmF;IACnF,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,SAAS,CAAA;IACpC,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,qCAAqC;AACrC,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,IAAI,EAAE,QAAQ,CAAA;CACf;AAED,qFAAqF;AACrF,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wEAAwE;IACxE,mBAAmB,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAA;IAC9C,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;CACf;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD,wEAAwE;IACxE,mBAAmB,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAA;IAC9C,IAAI,EAAE,UAAU,CAAA;CACjB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,UAAW,SAAQ,UAAU;IAC5C,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAA;IAC9C,IAAI,EAAE,MAAM,CAAA;CACb;AAED;;;;;;GAMG;AACH,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAA;IAC9C,IAAI,EAAE,UAAU,CAAA;CACjB;AAED;;;;;GAKG;AACH,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,SAAS,CAAA;CAChB;AAED,4CAA4C;AAC5C,MAAM,WAAW,UAAW,SAAQ,UAAU;IAC5C,uDAAuD;IACvD,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,6DAA6D;AAC7D,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,MAAM,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,SAAS,CAAA;IACnC,IAAI,EAAE,QAAQ,CAAA;CACf;AAED,MAAM,MAAM,eAAe,GACvB,aAAa,GACb,cAAc,GACd,YAAY,GACZ,UAAU,GACV,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,CAAA"}

package/dist/components/DataTable/DataTableColumnTypes.d.ts

@@ -0,0 +1,60 @@
+import { type ReactNode } from "react";
+import type { DataTableColumn, DataTableColumnAlign } from "./DataTableColumn";
+/** Formats a single cell value. Produced per column by the registry. */
+export type Formatter = (value: unknown) => ReactNode;
+/** Renders a cell from the whole row. The unified shape a prepared column exposes. */
+export type CellRenderer = (row: unknown) => ReactNode;
+export declare function isEmpty(value: unknown): value is null | undefined;
+/**
+ * Everything that varies per column `type`, co-located in one place: how the
+ * column's values are formatted, its default alignment, and whether it counts
+ * as numeric. Adding a column type is a single entry in
+ * {@link columnTypeDefinitions} below.
+ */
+export interface ColumnTypeDefinition<C extends DataTableColumn> {
+    /** Default alignment when the column doesn't set `align`. Omitted = "start". */
+    align?: DataTableColumnAlign;
+    /**
+     * Builds the per-column value formatter. Called once per column by
+     * {@link prepareColumn}, so the `Intl`/`DateFormatter` instances it closes
+     * over are constructed once per column rather than per render — provided the
+     * consumer passes a stable `columns` reference (see `prepareColumn`).
+     */
+    createFormatter: (column: C) => Formatter;
+    /** Marks numeric types (drives the `--numeric` cell class). */
+    isNumeric?: boolean;
+}
+/**
+ * Maps each column discriminant to a definition typed to that column's
+ * interface, so `createFormatter` receives the correctly-narrowed column (e.g.
+ * the `number` entry's `column` is `NumberColumn`). The mapped type also makes
+ * a missing entry a compile error.
+ */
+type ColumnTypeRegistry = {
+    [C in DataTableColumn as C["type"]]: ColumnTypeDefinition<C>;
+};
+/**
+ * The single source of truth for per-type behavior. To add a new column type:
+ * declare its literal + interface in `DataTableColumn.ts`, then add one entry
+ * here.
+ */
+export declare const columnTypeDefinitions: ColumnTypeRegistry;
+/** A column with everything the table needs to render its header and cells. */
+export interface PreparedColumn {
+    align: DataTableColumnAlign;
+    column: DataTableColumn;
+    isNumeric: boolean;
+    renderCell: CellRenderer;
+}
+/**
+ * Turns a column into the everything-resolved shape the table renders from.
+ * This is the single place `render` and the type formatter are reconciled: a
+ * `render` prop and a value formatter both become one `renderCell(row)`, with
+ * `render` taking precedence. The type formatter is built at most once here
+ * (and only when there is no `render`), so callers should prepare each column
+ * once — `DataTable` does this in a `useMemo` keyed on the `columns` array, so
+ * pass a stable `columns` reference to avoid rebuilding formatters every render.
+ */
+export declare function prepareColumn(column: DataTableColumn): PreparedColumn;
+export {};
+//# sourceMappingURL=DataTableColumnTypes.d.ts.map

package/dist/components/DataTable/DataTableColumnTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableColumnTypes.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableColumnTypes.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAE7C,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAW9E,wEAAwE;AACxE,MAAM,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,OAAO,KAAK,SAAS,CAAA;AAErD,sFAAsF;AACtF,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE,OAAO,KAAK,SAAS,CAAA;AAEtD,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,IAAI,GAAG,SAAS,CAEjE;AAwCD;;;;;GAKG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,eAAe;IAC7D,gFAAgF;IAChF,KAAK,CAAC,EAAE,oBAAoB,CAAA;IAC5B;;;;;OAKG;IACH,eAAe,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,SAAS,CAAA;IACzC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;;GAKG;AACH,KAAK,kBAAkB,GAAG;KACvB,CAAC,IAAI,eAAe,IAAI,CAAC,CAAC,MAAM,CAAC,GAAG,oBAAoB,CAAC,CAAC,CAAC;CAC7D,CAAA;AAID;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,kBAmFnC,CAAA;AAWD,+EAA+E;AAC/E,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,oBAAoB,CAAA;IAC3B,MAAM,EAAE,eAAe,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,YAAY,CAAA;CACzB;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,eAAe,GAAG,cAAc,CAoBrE"}