@planningcenter/tapestry 4.2.1-rc.2 → 4.2.1-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -19,6 +19,11 @@ export interface DataTableProps {
19
19
  * identity, so an inline array rebuilds each column's formatter every render.
20
20
  */
21
21
  columns: DataTableColumn[];
22
+ /**
23
+ * The 1-indexed current page. Only used when `totalPages` is set, and
24
+ * defaults to `1`.
25
+ */
26
+ currentPage?: number;
22
27
  /** The array of rows to display. */
23
28
  data: unknown[];
24
29
  /**
@@ -55,6 +60,12 @@ export interface DataTableProps {
55
60
  * - `"idle"` (default): Normal rendering.
56
61
  */
57
62
  loadingState?: DataTableLoadingState;
63
+ /**
64
+ * Called with the 1-indexed page the user navigated to. The table doesn't
65
+ * page `data` itself — pass the rows for the new page back in through `data`
66
+ * (and update `currentPage`) in response.
67
+ */
68
+ onPageChange?: (page: number) => void;
58
69
  /**
59
70
  * Called with the row when it is clicked. Rows with a click handler render
60
71
  * as interactive elements (clickable and keyboard-focusable). When
@@ -127,6 +138,17 @@ export interface DataTableProps {
127
138
  * operate without a row selection.
128
139
  */
129
140
  tableActions?: TableAction[];
141
+ /**
142
+ * The total number of pages in the result set. Setting it renders the page
143
+ * controls below the table; leaving it unset renders no pagination at all.
144
+ * A single page has nothing to navigate to, so the controls only render once
145
+ * there are two or more pages.
146
+ *
147
+ * The table displays whatever rows it is given — paging is the caller's job.
148
+ * `data` should hold only the current page's rows, `resultCount` the size of
149
+ * the whole result set, and `onPageChange` should load the next page.
150
+ */
151
+ totalPages?: number;
130
152
  }
131
153
  type AriaTablePropsToOmit = "children" | "slot";
132
154
  type AriaTablePropsToInclude = never;
@@ -139,13 +161,15 @@ export type DataTableElementProps = CombineAriaPropsWithCustomProps<AriaTablePro
139
161
  * `enum`, and `custom`. A column's `render` function always takes precedence
140
162
  * over the built-in type formatting.
141
163
  *
142
- * Sorting, filtering, pagination, and other RFC features are not yet
143
- * implemented.
164
+ * Setting `totalPages` renders page controls below the table; the table itself
165
+ * never slices `data`, so `onPageChange` is where the caller loads the page.
166
+ *
167
+ * Filtering, presets, and other RFC features are not yet implemented.
144
168
  *
145
169
  * @component
146
170
  */
147
171
  export declare const DataTable: {
148
- ({ className, columns, data, disabledKeys, emptyState, errorState, getRowId, getRowLink, id, loadingState, resultCount, resultNoun, scrollContainerRef, scrollContainerSelector, rowActions, selectable, selectedKeys: controlledSelectedKeys, stickyHeader, sortBy, tableActions, onRowClick, onSelectedChange, onSortChange, ...restProps }: DataTableElementProps): React.JSX.Element;
172
+ ({ className, columns, currentPage, data, disabledKeys, emptyState, errorState, getRowId, getRowLink, id, loadingState, resultCount, resultNoun, scrollContainerRef, scrollContainerSelector, rowActions, selectable, selectedKeys: controlledSelectedKeys, stickyHeader, sortBy, tableActions, totalPages, onPageChange, onRowClick, onSelectedChange, onSortChange, ...restProps }: DataTableElementProps): React.JSX.Element;
149
173
  displayName: string;
150
174
  };
151
175
  //# sourceMappingURL=DataTable.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"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"}
@@ -1,5 +1,6 @@
1
1
  import LoadingSpinner from '../internal/LoadingSpinner.js';
2
2
  import '../internal/tooltip/Tooltip.js';
3
+ import { Pagination } from '../internal/pagination/Pagination.js';
3
4
  import Icon from '../../utilities/Icon.js';
4
5
  import { useId } from '../../utilities/useId.js';
5
6
  import classNames from 'classnames';
@@ -20,12 +21,14 @@ const DEFAULT_ERROR_STATE = "Something went wrong.";
20
21
  * `enum`, and `custom`. A column's `render` function always takes precedence
21
22
  * over the built-in type formatting.
22
23
  *
23
- * Sorting, filtering, pagination, and other RFC features are not yet
24
- * implemented.
24
+ * Setting `totalPages` renders page controls below the table; the table itself
25
+ * never slices `data`, so `onPageChange` is where the caller loads the page.
26
+ *
27
+ * Filtering, presets, and other RFC features are not yet implemented.
25
28
  *
26
29
  * @component
27
30
  */
28
- const DataTable = ({ className, columns, data, disabledKeys, emptyState, errorState, getRowId, getRowLink, id, loadingState = "idle", resultCount, resultNoun, scrollContainerRef, scrollContainerSelector = ".content-wrap", rowActions, selectable, selectedKeys: controlledSelectedKeys, stickyHeader, sortBy, tableActions, onRowClick, onSelectedChange, onSortChange, ...restProps }) => {
31
+ const DataTable = ({ className, columns, currentPage = 1, data, disabledKeys, emptyState, errorState, getRowId, getRowLink, id, loadingState = "idle", resultCount, resultNoun, scrollContainerRef, scrollContainerSelector = ".content-wrap", rowActions, selectable, selectedKeys: controlledSelectedKeys, stickyHeader, sortBy, tableActions, totalPages, onPageChange, onRowClick, onSelectedChange, onSortChange, ...restProps }) => {
29
32
  const hasRowPressAction = Boolean(onRowClick || getRowLink);
30
33
  const rowsAreInteractive = hasRowPressAction || Boolean(selectable);
31
34
  const combinedClassName = classNames("tds-data-table-grid", className);
@@ -92,6 +95,9 @@ const DataTable = ({ className, columns, data, disabledKeys, emptyState, errorSt
92
95
  const hasActions = (tableActions?.length ?? 0) > 0;
93
96
  const showHeader = Boolean(resultNoun || hasActions);
94
97
  const hasRowActions = (rowActions?.length ?? 0) > 0;
98
+ // A lone page has nothing to navigate to, so the controls stay out of the
99
+ // frame entirely rather than rendering a single inert page marker.
100
+ const showPagination = totalPages !== undefined && totalPages > 1;
95
101
  return (React__default.createElement("div", { className: classNames("tds-data-table", {
96
102
  "tds-data-table--sticky-header": hasScrollContainer,
97
103
  }) },
@@ -137,7 +143,9 @@ const DataTable = ({ className, columns, data, disabledKeys, emptyState, errorSt
137
143
  }) }, prepared.renderCell(row)))),
138
144
  hasRowActions && (React__default.createElement(Cell, { className: "tds-data-table-cell tds-data-table-cell--actions" },
139
145
  React__default.createElement(RowActions, { actions: rowActions, row: row, rowKey: rowKey })))));
140
- }))))))));
146
+ }))))),
147
+ showPagination && (React__default.createElement("div", { className: "tds-data-table-frame-footer" },
148
+ React__default.createElement(Pagination, { currentPage: currentPage, onPageChange: onPageChange, totalPages: totalPages }))))));
141
149
  };
142
150
  DataTable.displayName = "DataTable";
143
151
  /**
@@ -1 +1 @@
1
- {"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 { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, {\n type ReactNode,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\nimport {\n Cell,\n Checkbox,\n Column,\n type Key,\n Row,\n type Selection,\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\"\nimport {\n hasResultsCount,\n resolveResultNounLabel,\n type ResultNoun,\n ResultsCount,\n} from \"./ResultsCount\"\nimport { type RowAction, RowActions } from \"./RowActions\"\nimport { type TableAction, TableActions } from \"./TableActions\"\n\nexport type { ResultNoun, RowAction, TableAction }\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 /**\n * Row keys that can't be selected. Keys are the values returned by `getRowId`\n * (or `row.id`, or the row's index) — the same keys used by `selectedKeys`.\n * Only selection is disabled: the row's checkbox renders disabled and \"select\n * all\" skips it, while the row itself stays clickable, navigable, and\n * focusable. Has no effect unless the table is `selectable`.\n */\n disabledKeys?: (number | string)[]\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 * Returns a URL to navigate to when the row is clicked. Rows with a link\n * render as navigable elements (clickable, keyboard-focusable, and\n * openable in a new tab). Works alongside `onRowClick` and `selectable`.\n */\n getRowLink?: (row: unknown) => string\n /**\n * An `id` for the table element. When omitted, a stable generated id is used\n * so the results count can be linked to the table via `aria-describedby`.\n */\n id?: 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 /**\n * Called with the row when it is clicked. Rows with a click handler render\n * as interactive elements (clickable and keyboard-focusable). When\n * `getRowLink` is also set, both run and the row navigates.\n */\n onRowClick?: (row: unknown) => void\n /**\n * Called when the set of selected rows changes. Always receives a plain\n * array of row keys — never React Aria's `\"all\"` sentinel, which is\n * resolved to the concrete keys of the loaded rows.\n */\n onSelectedChange?: (keys: (number | string)[]) => void\n /** Callback invoked when the sort state changes. */\n onSortChange?: (sort: Sort) => void\n /**\n * Overrides the number shown by the `resultNoun` count, which otherwise\n * uses the length of `data`. Use this when the table renders only part of\n * the result set — a paginated or virtualized table — so the count reflects\n * the whole set. Has no effect unless `resultNoun` is set.\n */\n resultCount?: number\n /**\n * Displays the number of results (the length of `data`, or `resultCount`\n * when supplied) above the table, followed by a noun that matches the count.\n * Pass a string to use it as the singular noun and append `\"s\"` for the\n * plural (e.g. `\"result\"` → `\"results\"`), or a `[singular, plural]` tuple to\n * supply an irregular plural explicitly (e.g. `[\"person\", \"people\"]`). Pass\n * `true` to use `\"result\"`.\n * When `false` or omitted, no count is rendered. The count is formatted with\n * `Intl.NumberFormat` and the singular form is used only when the count is\n * exactly `1`. When the table is `selectable` and rows are selected, the\n * count instead reflects the selection as `\"{selected} of {total}\"`, e.g.\n * `\"2 of 100\"`, with a visually-hidden suffix naming the noun so assistive\n * tech reads the unambiguous `\"2 of 100 people selected\"`.\n * The count is linked to the table with `aria-describedby` so\n * screen readers announce it as a description of the table. When a string or\n * `[singular, plural]` tuple is provided, the noun also supplies the table's\n * `aria-label` in its plural form (e.g. `\"items\"` or `\"people\"`) unless an\n * `aria-label` is passed directly, which always takes precedence; `true`\n * never provides a label.\n */\n resultNoun?: ResultNoun\n /**\n * Displays a sticky column to the right that holds row-scoped actions.\n * Renders as a dropdown with 2+ actions or a single button with one. Each\n * action's `onAction` or `getHref` receives the row.\n */\n rowActions?: RowAction[]\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 /**\n * Enables row selection via checkboxes, including a \"select all\" checkbox in\n * the header. Without a row action (`onRowClick` or `getRowLink`), pressing\n * anywhere in a row toggles the row selection.\n */\n selectable?: boolean\n /** The selected row keys. Keys are the values returned by `getRowId` (or `row.id`, or the row's index). */\n selectedKeys?: (number | 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 * Table actions rendered as an `IconButton` group directly after the results\n * count, above the table. Each entry becomes an icon button whose `callback`\n * receives the ids of the currently selected rows. Unlike the original RFC,\n * these are not gated on `selectable` — actions such as print or export can\n * operate without a row selection.\n */\n tableActions?: TableAction[]\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, and other RFC features are not yet\n * implemented.\n *\n * @component\n */\nexport const DataTable = ({\n className,\n columns,\n data,\n disabledKeys,\n emptyState,\n errorState,\n getRowId,\n getRowLink,\n id,\n loadingState = \"idle\",\n resultCount,\n resultNoun,\n scrollContainerRef,\n scrollContainerSelector = \".content-wrap\",\n rowActions,\n selectable,\n selectedKeys: controlledSelectedKeys,\n stickyHeader,\n sortBy,\n tableActions,\n onRowClick,\n onSelectedChange,\n onSortChange,\n ...restProps\n}: DataTableElementProps) => {\n const hasRowPressAction = Boolean(onRowClick || getRowLink)\n const rowsAreInteractive = hasRowPressAction || Boolean(selectable)\n const combinedClassName = classNames(\"tds-data-table-grid\", 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 // Selection is controlled when `selectedKeys` is provided; otherwise it's\n // tracked internally so the results count and table actions still reflect it.\n const isControlled = controlledSelectedKeys !== undefined\n const [internalSelectedKeys, setInternalSelectedKeys] = useState<\n (number | string)[]\n >([])\n const selectedKeys = isControlled\n ? controlledSelectedKeys\n : internalSelectedKeys\n\n // React Aria treats a row's own action as primary only while the selection is\n // empty: with checkbox selection, once any row is selected the table is in\n // selection mode and pressing anywhere in a row toggles its selection instead\n // of firing the action. Rows without an action always select on press. The\n // row's hover state previews the checkbox's hover state whenever a press would\n // select, so this has to track the selection rather than the props alone.\n const rowPressSelects =\n Boolean(selectable) && (!hasRowPressAction || selectedKeys.length > 0)\n\n const selectableProps = useSelectableProps({\n data,\n disabledKeys,\n getRowId,\n onSelectedChange: (keys) => {\n if (!isControlled) setInternalSelectedKeys(keys)\n onSelectedChange?.(keys)\n },\n selectable,\n selectedKeys,\n })\n\n // Associate the visible results count with the table so screen readers\n // announce it as a description of the table. `Table` doesn't support a real\n // `<caption>` (its children go through a collection builder), so we link the\n // count via `aria-describedby`, merging with any caller-supplied value.\n const stableId = useId()\n const tableId = id || `tds-data-table-${stableId}`\n const resultsCountId = `${tableId}-results-count`\n const describedBy = hasResultsCount(resultNoun)\n ? [restProps[\"aria-describedby\"], resultsCountId].filter(Boolean).join(\" \")\n : restProps[\"aria-describedby\"]\n\n // A caller-supplied `aria-label` always wins; otherwise the results noun\n // provides the table's accessible name so a label is present whenever a noun\n // is given. Array nouns are transformed to their plural form.\n const ariaLabel =\n restProps[\"aria-label\"] || resolveResultNounLabel(resultNoun)\n\n const hasActions = (tableActions?.length ?? 0) > 0\n const showHeader = Boolean(resultNoun || hasActions)\n const hasRowActions = (rowActions?.length ?? 0) > 0\n\n return (\n <div\n className={classNames(\"tds-data-table\", {\n \"tds-data-table--sticky-header\": hasScrollContainer,\n })}\n >\n <div className=\"tds-data-table-frame\">\n {showHeader && (\n <div className=\"tds-data-table-frame-header\">\n <ResultsCount\n id={resultsCountId}\n resultNoun={resultNoun}\n selectable={selectable}\n selectedCount={selectedKeys.length}\n // An explicit `resultCount` covers the whole result set, which a\n // paginated table's `data` doesn't.\n totalCount={resultCount ?? data.length}\n />\n {hasActions && (\n <TableActions\n actions={tableActions!} // Safe to assert non-null here because of `hasActions`\n resultNoun={resultNoun}\n selectedKeys={selectedKeys}\n />\n )}\n </div>\n )}\n <div ref={wrapperRef} className=\"tds-data-table-scroll-wrapper\">\n <div className=\"tds-data-table-scroll\">\n <Table\n {...restProps}\n {...selectableProps}\n {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n {...(describedBy ? { \"aria-describedby\": describedBy } : {})}\n // RAC's `Table` forwards `id` to the underlying table element at\n // runtime (via `filterDOMProps({ global: true })`) but omits `id`\n // from its prop types, so spread it through a cast.\n {...({ id: tableId } as Partial<AriaTableProps>)}\n className={combinedClassName}\n // Pinned rather than exposed as a prop: `disabledKeys` only ever\n // turns off selection here, leaving the row clickable and\n // focusable. React Aria defaults this to \"all\", which would also\n // disable `onRowClick`/`getRowLink` and drop the row out of the\n // focus order, so it has to be set explicitly.\n disabledBehavior=\"selection\"\n disabledKeys={disabledKeys}\n sortDescriptor={sortDescriptor}\n onSortChange={(sort) => {\n onSortChange?.(serializeSort(sort))\n }}\n >\n <TableHeader className=\"tds-data-table-header\">\n {/*\n Rendered as a sibling before the `preparedColumns.map` below\n (not folded into it) so the map's `index` still starts at 0\n for the first *data* column — that's what keeps\n `isRowHeader={index === 0}` pointing at the first data\n column instead of this selection column.\n */}\n {selectable && (\n <Column className=\"tds-data-table-column tds-data-table-column--selectable\">\n <Checkbox\n slot=\"selection\"\n className=\"tds-data-table-selectable-checkbox\"\n />\n </Column>\n )}\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}`]:\n 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 {hasRowActions && (\n <Column className=\"tds-data-table-column tds-data-table-column--actions\">\n <span className=\"tds-data-table-column-label--hidden\">\n Actions\n </span>\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\n key={rowKey}\n id={rowKey}\n href={getRowLink?.(row)}\n onAction={onRowClick ? () => onRowClick(row) : undefined}\n className={classNames(\"tds-data-table-row\", {\n \"tds-data-table-row--interactive\": rowsAreInteractive,\n \"tds-data-table-row--press-selects\": rowPressSelects,\n })}\n >\n {selectable && (\n <Cell className=\"tds-data-table-cell tds-data-table-cell--selectable\">\n <Checkbox\n slot=\"selection\"\n className=\"tds-data-table-selectable-checkbox\"\n />\n </Cell>\n )}\n {preparedColumns.map((prepared) => (\n <Cell\n key={prepared.column.name}\n data-pii={prepared.column.pii || undefined}\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 {hasRowActions && (\n <Cell className=\"tds-data-table-cell tds-data-table-cell--actions\">\n <RowActions\n actions={rowActions!} // Safe to assert non-null here because of `hasRowActions`\n row={row}\n rowKey={rowKey}\n />\n </Cell>\n )}\n </Row>\n )\n })}\n </TableBody>\n </Table>\n </div>\n </div>\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\n/**\n * Resolves the `<Table>` selection props, driving React Aria's `<Table>` off\n * the component's selection state. `onSelectedChange` always receives a plain\n * array of keys: React Aria's `\"all\"` selection sentinel (used for\n * infinite-loading collections, which this component doesn't have) is resolved\n * to the concrete keys of the currently loaded rows, minus any disabled ones —\n * React Aria's own \"select all\" skips disabled rows, so resolving `\"all\"` has to\n * skip them too.\n */\nfunction useSelectableProps({\n data,\n disabledKeys,\n getRowId,\n onSelectedChange,\n selectable,\n selectedKeys,\n}: {\n data: unknown[]\n disabledKeys: (number | string)[] | undefined\n getRowId: ((row: unknown) => number | string) | undefined\n onSelectedChange: (keys: (number | string)[]) => void\n selectable: boolean | undefined\n selectedKeys: (number | string)[]\n}): Pick<\n AriaTableProps,\n \"onSelectionChange\" | \"selectedKeys\" | \"selectionMode\"\n> {\n const selectedKeysSet = useMemo(\n () => new Set<Key>(selectedKeys),\n [selectedKeys]\n )\n const { rowKeys, rowOrder } = useMemo(() => {\n const rowKeys = data.map((row, index) => getRowKey(row, index, getRowId))\n return {\n rowKeys,\n rowOrder: new Map<Key, number>(rowKeys.map((key, index) => [key, index])),\n }\n }, [data, getRowId])\n\n if (!selectable) return { selectionMode: \"none\" }\n\n return {\n onSelectionChange: (keys: Selection) => {\n if (keys === \"all\") {\n const disabled = new Set<Key>(disabledKeys)\n onSelectedChange(rowKeys.filter((key) => !disabled.has(key)))\n return\n }\n // Keys not found in `rowOrder` (e.g. a previously selected row no longer\n // in `data`) sort to the end rather than being dropped.\n onSelectedChange(\n Array.from(keys).sort(\n (a, b) =>\n (rowOrder.get(a) ?? Infinity) - (rowOrder.get(b) ?? Infinity)\n )\n )\n },\n selectedKeys: selectedKeysSet,\n selectionMode: \"multiple\",\n }\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":"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"}
1
+ {"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { LoadingSpinner } from \"@components/internal\"\nimport { Pagination } from \"@components/internal/pagination\"\nimport Icon from \"@utilities/Icon\"\nimport type { CombineAriaPropsWithCustomProps } from \"@utilities/reactAriaProps\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, {\n type ReactNode,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\nimport {\n Cell,\n Checkbox,\n Column,\n type Key,\n Row,\n type Selection,\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\"\nimport {\n hasResultsCount,\n resolveResultNounLabel,\n type ResultNoun,\n ResultsCount,\n} from \"./ResultsCount\"\nimport { type RowAction, RowActions } from \"./RowActions\"\nimport { type TableAction, TableActions } from \"./TableActions\"\n\nexport type { ResultNoun, RowAction, TableAction }\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 /**\n * The 1-indexed current page. Only used when `totalPages` is set, and\n * defaults to `1`.\n */\n currentPage?: number\n /** The array of rows to display. */\n data: unknown[]\n /**\n * Row keys that can't be selected. Keys are the values returned by `getRowId`\n * (or `row.id`, or the row's index) — the same keys used by `selectedKeys`.\n * Only selection is disabled: the row's checkbox renders disabled and \"select\n * all\" skips it, while the row itself stays clickable, navigable, and\n * focusable. Has no effect unless the table is `selectable`.\n */\n disabledKeys?: (number | string)[]\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 * Returns a URL to navigate to when the row is clicked. Rows with a link\n * render as navigable elements (clickable, keyboard-focusable, and\n * openable in a new tab). Works alongside `onRowClick` and `selectable`.\n */\n getRowLink?: (row: unknown) => string\n /**\n * An `id` for the table element. When omitted, a stable generated id is used\n * so the results count can be linked to the table via `aria-describedby`.\n */\n id?: 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 /**\n * Called with the 1-indexed page the user navigated to. The table doesn't\n * page `data` itself — pass the rows for the new page back in through `data`\n * (and update `currentPage`) in response.\n */\n onPageChange?: (page: number) => void\n /**\n * Called with the row when it is clicked. Rows with a click handler render\n * as interactive elements (clickable and keyboard-focusable). When\n * `getRowLink` is also set, both run and the row navigates.\n */\n onRowClick?: (row: unknown) => void\n /**\n * Called when the set of selected rows changes. Always receives a plain\n * array of row keys — never React Aria's `\"all\"` sentinel, which is\n * resolved to the concrete keys of the loaded rows.\n */\n onSelectedChange?: (keys: (number | string)[]) => void\n /** Callback invoked when the sort state changes. */\n onSortChange?: (sort: Sort) => void\n /**\n * Overrides the number shown by the `resultNoun` count, which otherwise\n * uses the length of `data`. Use this when the table renders only part of\n * the result set — a paginated or virtualized table — so the count reflects\n * the whole set. Has no effect unless `resultNoun` is set.\n */\n resultCount?: number\n /**\n * Displays the number of results (the length of `data`, or `resultCount`\n * when supplied) above the table, followed by a noun that matches the count.\n * Pass a string to use it as the singular noun and append `\"s\"` for the\n * plural (e.g. `\"result\"` → `\"results\"`), or a `[singular, plural]` tuple to\n * supply an irregular plural explicitly (e.g. `[\"person\", \"people\"]`). Pass\n * `true` to use `\"result\"`.\n * When `false` or omitted, no count is rendered. The count is formatted with\n * `Intl.NumberFormat` and the singular form is used only when the count is\n * exactly `1`. When the table is `selectable` and rows are selected, the\n * count instead reflects the selection as `\"{selected} of {total}\"`, e.g.\n * `\"2 of 100\"`, with a visually-hidden suffix naming the noun so assistive\n * tech reads the unambiguous `\"2 of 100 people selected\"`.\n * The count is linked to the table with `aria-describedby` so\n * screen readers announce it as a description of the table. When a string or\n * `[singular, plural]` tuple is provided, the noun also supplies the table's\n * `aria-label` in its plural form (e.g. `\"items\"` or `\"people\"`) unless an\n * `aria-label` is passed directly, which always takes precedence; `true`\n * never provides a label.\n */\n resultNoun?: ResultNoun\n /**\n * Displays a sticky column to the right that holds row-scoped actions.\n * Renders as a dropdown with 2+ actions or a single button with one. Each\n * action's `onAction` or `getHref` receives the row.\n */\n rowActions?: RowAction[]\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 /**\n * Enables row selection via checkboxes, including a \"select all\" checkbox in\n * the header. Without a row action (`onRowClick` or `getRowLink`), pressing\n * anywhere in a row toggles the row selection.\n */\n selectable?: boolean\n /** The selected row keys. Keys are the values returned by `getRowId` (or `row.id`, or the row's index). */\n selectedKeys?: (number | 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 * Table actions rendered as an `IconButton` group directly after the results\n * count, above the table. Each entry becomes an icon button whose `callback`\n * receives the ids of the currently selected rows. Unlike the original RFC,\n * these are not gated on `selectable` — actions such as print or export can\n * operate without a row selection.\n */\n tableActions?: TableAction[]\n /**\n * The total number of pages in the result set. Setting it renders the page\n * controls below the table; leaving it unset renders no pagination at all.\n * A single page has nothing to navigate to, so the controls only render once\n * there are two or more pages.\n *\n * The table displays whatever rows it is given — paging is the caller's job.\n * `data` should hold only the current page's rows, `resultCount` the size of\n * the whole result set, and `onPageChange` should load the next page.\n */\n totalPages?: number\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 * Setting `totalPages` renders page controls below the table; the table itself\n * never slices `data`, so `onPageChange` is where the caller loads the page.\n *\n * Filtering, presets, and other RFC features are not yet implemented.\n *\n * @component\n */\nexport const DataTable = ({\n className,\n columns,\n currentPage = 1,\n data,\n disabledKeys,\n emptyState,\n errorState,\n getRowId,\n getRowLink,\n id,\n loadingState = \"idle\",\n resultCount,\n resultNoun,\n scrollContainerRef,\n scrollContainerSelector = \".content-wrap\",\n rowActions,\n selectable,\n selectedKeys: controlledSelectedKeys,\n stickyHeader,\n sortBy,\n tableActions,\n totalPages,\n onPageChange,\n onRowClick,\n onSelectedChange,\n onSortChange,\n ...restProps\n}: DataTableElementProps) => {\n const hasRowPressAction = Boolean(onRowClick || getRowLink)\n const rowsAreInteractive = hasRowPressAction || Boolean(selectable)\n const combinedClassName = classNames(\"tds-data-table-grid\", 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 // Selection is controlled when `selectedKeys` is provided; otherwise it's\n // tracked internally so the results count and table actions still reflect it.\n const isControlled = controlledSelectedKeys !== undefined\n const [internalSelectedKeys, setInternalSelectedKeys] = useState<\n (number | string)[]\n >([])\n const selectedKeys = isControlled\n ? controlledSelectedKeys\n : internalSelectedKeys\n\n // React Aria treats a row's own action as primary only while the selection is\n // empty: with checkbox selection, once any row is selected the table is in\n // selection mode and pressing anywhere in a row toggles its selection instead\n // of firing the action. Rows without an action always select on press. The\n // row's hover state previews the checkbox's hover state whenever a press would\n // select, so this has to track the selection rather than the props alone.\n const rowPressSelects =\n Boolean(selectable) && (!hasRowPressAction || selectedKeys.length > 0)\n\n const selectableProps = useSelectableProps({\n data,\n disabledKeys,\n getRowId,\n onSelectedChange: (keys) => {\n if (!isControlled) setInternalSelectedKeys(keys)\n onSelectedChange?.(keys)\n },\n selectable,\n selectedKeys,\n })\n\n // Associate the visible results count with the table so screen readers\n // announce it as a description of the table. `Table` doesn't support a real\n // `<caption>` (its children go through a collection builder), so we link the\n // count via `aria-describedby`, merging with any caller-supplied value.\n const stableId = useId()\n const tableId = id || `tds-data-table-${stableId}`\n const resultsCountId = `${tableId}-results-count`\n const describedBy = hasResultsCount(resultNoun)\n ? [restProps[\"aria-describedby\"], resultsCountId].filter(Boolean).join(\" \")\n : restProps[\"aria-describedby\"]\n\n // A caller-supplied `aria-label` always wins; otherwise the results noun\n // provides the table's accessible name so a label is present whenever a noun\n // is given. Array nouns are transformed to their plural form.\n const ariaLabel =\n restProps[\"aria-label\"] || resolveResultNounLabel(resultNoun)\n\n const hasActions = (tableActions?.length ?? 0) > 0\n const showHeader = Boolean(resultNoun || hasActions)\n const hasRowActions = (rowActions?.length ?? 0) > 0\n // A lone page has nothing to navigate to, so the controls stay out of the\n // frame entirely rather than rendering a single inert page marker.\n const showPagination = totalPages !== undefined && totalPages > 1\n\n return (\n <div\n className={classNames(\"tds-data-table\", {\n \"tds-data-table--sticky-header\": hasScrollContainer,\n })}\n >\n <div className=\"tds-data-table-frame\">\n {showHeader && (\n <div className=\"tds-data-table-frame-header\">\n <ResultsCount\n id={resultsCountId}\n resultNoun={resultNoun}\n selectable={selectable}\n selectedCount={selectedKeys.length}\n // An explicit `resultCount` covers the whole result set, which a\n // paginated table's `data` doesn't.\n totalCount={resultCount ?? data.length}\n />\n {hasActions && (\n <TableActions\n actions={tableActions!} // Safe to assert non-null here because of `hasActions`\n resultNoun={resultNoun}\n selectedKeys={selectedKeys}\n />\n )}\n </div>\n )}\n <div ref={wrapperRef} className=\"tds-data-table-scroll-wrapper\">\n <div className=\"tds-data-table-scroll\">\n <Table\n {...restProps}\n {...selectableProps}\n {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n {...(describedBy ? { \"aria-describedby\": describedBy } : {})}\n // RAC's `Table` forwards `id` to the underlying table element at\n // runtime (via `filterDOMProps({ global: true })`) but omits `id`\n // from its prop types, so spread it through a cast.\n {...({ id: tableId } as Partial<AriaTableProps>)}\n className={combinedClassName}\n // Pinned rather than exposed as a prop: `disabledKeys` only ever\n // turns off selection here, leaving the row clickable and\n // focusable. React Aria defaults this to \"all\", which would also\n // disable `onRowClick`/`getRowLink` and drop the row out of the\n // focus order, so it has to be set explicitly.\n disabledBehavior=\"selection\"\n disabledKeys={disabledKeys}\n sortDescriptor={sortDescriptor}\n onSortChange={(sort) => {\n onSortChange?.(serializeSort(sort))\n }}\n >\n <TableHeader className=\"tds-data-table-header\">\n {/*\n Rendered as a sibling before the `preparedColumns.map` below\n (not folded into it) so the map's `index` still starts at 0\n for the first *data* column — that's what keeps\n `isRowHeader={index === 0}` pointing at the first data\n column instead of this selection column.\n */}\n {selectable && (\n <Column className=\"tds-data-table-column tds-data-table-column--selectable\">\n <Checkbox\n slot=\"selection\"\n className=\"tds-data-table-selectable-checkbox\"\n />\n </Column>\n )}\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}`]:\n 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 {hasRowActions && (\n <Column className=\"tds-data-table-column tds-data-table-column--actions\">\n <span className=\"tds-data-table-column-label--hidden\">\n Actions\n </span>\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\n key={rowKey}\n id={rowKey}\n href={getRowLink?.(row)}\n onAction={onRowClick ? () => onRowClick(row) : undefined}\n className={classNames(\"tds-data-table-row\", {\n \"tds-data-table-row--interactive\": rowsAreInteractive,\n \"tds-data-table-row--press-selects\": rowPressSelects,\n })}\n >\n {selectable && (\n <Cell className=\"tds-data-table-cell tds-data-table-cell--selectable\">\n <Checkbox\n slot=\"selection\"\n className=\"tds-data-table-selectable-checkbox\"\n />\n </Cell>\n )}\n {preparedColumns.map((prepared) => (\n <Cell\n key={prepared.column.name}\n data-pii={prepared.column.pii || undefined}\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 {hasRowActions && (\n <Cell className=\"tds-data-table-cell tds-data-table-cell--actions\">\n <RowActions\n actions={rowActions!} // Safe to assert non-null here because of `hasRowActions`\n row={row}\n rowKey={rowKey}\n />\n </Cell>\n )}\n </Row>\n )\n })}\n </TableBody>\n </Table>\n </div>\n </div>\n {showPagination && (\n <div className=\"tds-data-table-frame-footer\">\n <Pagination\n currentPage={currentPage}\n onPageChange={onPageChange}\n totalPages={totalPages!}\n />\n </div>\n )}\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\n/**\n * Resolves the `<Table>` selection props, driving React Aria's `<Table>` off\n * the component's selection state. `onSelectedChange` always receives a plain\n * array of keys: React Aria's `\"all\"` selection sentinel (used for\n * infinite-loading collections, which this component doesn't have) is resolved\n * to the concrete keys of the currently loaded rows, minus any disabled ones —\n * React Aria's own \"select all\" skips disabled rows, so resolving `\"all\"` has to\n * skip them too.\n */\nfunction useSelectableProps({\n data,\n disabledKeys,\n getRowId,\n onSelectedChange,\n selectable,\n selectedKeys,\n}: {\n data: unknown[]\n disabledKeys: (number | string)[] | undefined\n getRowId: ((row: unknown) => number | string) | undefined\n onSelectedChange: (keys: (number | string)[]) => void\n selectable: boolean | undefined\n selectedKeys: (number | string)[]\n}): Pick<\n AriaTableProps,\n \"onSelectionChange\" | \"selectedKeys\" | \"selectionMode\"\n> {\n const selectedKeysSet = useMemo(\n () => new Set<Key>(selectedKeys),\n [selectedKeys]\n )\n const { rowKeys, rowOrder } = useMemo(() => {\n const rowKeys = data.map((row, index) => getRowKey(row, index, getRowId))\n return {\n rowKeys,\n rowOrder: new Map<Key, number>(rowKeys.map((key, index) => [key, index])),\n }\n }, [data, getRowId])\n\n if (!selectable) return { selectionMode: \"none\" }\n\n return {\n onSelectionChange: (keys: Selection) => {\n if (keys === \"all\") {\n const disabled = new Set<Key>(disabledKeys)\n onSelectedChange(rowKeys.filter((key) => !disabled.has(key)))\n return\n }\n // Keys not found in `rowOrder` (e.g. a previously selected row no longer\n // in `data`) sort to the end rather than being dropped.\n onSelectedChange(\n Array.from(keys).sort(\n (a, b) =>\n (rowOrder.get(a) ?? Infinity) - (rowOrder.get(b) ?? Infinity)\n )\n )\n },\n selectedKeys: selectedKeysSet,\n selectionMode: \"multiple\",\n }\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":"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"}
@@ -0,0 +1,26 @@
1
+ import "./index.css";
2
+ import React from "react";
3
+ export interface PaginationProps {
4
+ /** Pages always pinned at each edge (page `1` and the last page). Default `1`. */
5
+ boundaryCount?: number;
6
+ /** 1-indexed current page. */
7
+ currentPage: number;
8
+ /** Called when a page control is activated. */
9
+ onPageChange?: (page: number) => void;
10
+ /** Pages shown on each side of the current page in the full (non-collapsed) layout. Default `2`. */
11
+ siblingCount?: number;
12
+ /** Total number of pages. */
13
+ totalPages: number;
14
+ }
15
+ /**
16
+ * Page controls internal to `DataTable`. Both responsive sets of page items
17
+ * remain in static markup, and CSS selects the appropriate set by container
18
+ * width.
19
+ *
20
+ * @component
21
+ */
22
+ export declare const Pagination: {
23
+ ({ boundaryCount, currentPage, onPageChange, siblingCount, totalPages, }: PaginationProps): React.JSX.Element;
24
+ displayName: string;
25
+ };
26
+ //# sourceMappingURL=Pagination.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAMpB,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,MAAM,WAAW,eAAe;IAC9B,kFAAkF;IAClF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,8BAA8B;IAC9B,WAAW,EAAE,MAAM,CAAA;IACnB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,oGAAoG;IACpG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAA;CACnB;AAsGD;;;;;;GAMG;AACH,eAAO,MAAM,UAAU;8EAMpB,eAAe;;CAqCjB,CAAA"}
@@ -0,0 +1,61 @@
1
+ import '../../button/ActionsDropdownIconButton.js';
2
+ import '../../button/Button.js';
3
+ import '../../button/DropdownButton.js';
4
+ import '../../button/DropdownIconButton.js';
5
+ import { IconButton } from '../../button/IconButton.js';
6
+ import '../../button/LoadingButton.js';
7
+ import '../../button/PageHeaderActionsDropdownButton.js';
8
+ import { ButtonGroup } from '../../button-group/ButtonGroup.js';
9
+ import { Flex } from '../../flex/Flex.js';
10
+ import Icon from '../../../utilities/Icon.js';
11
+ import React__default from 'react';
12
+ import { getPaginationItems } from './getPaginationItems.js';
13
+
14
+ function PreviousNextControls({ currentPage, onPageChange, totalPages, }) {
15
+ // Below 6 total pages the numbered run alone is enough to reach any page.
16
+ if (totalPages < 6)
17
+ return null;
18
+ return (React__default.createElement(Flex, { align: "center", as: "li", className: "tds-pagination-item" },
19
+ React__default.createElement(ButtonGroup, { "aria-label": "Change page" },
20
+ React__default.createElement(IconButton, { "aria-label": "Previous page", disabled: currentPage <= 1, icon: React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#left-chevron" }), kind: "neutral", onClick: () => onPageChange?.(currentPage - 1) }),
21
+ React__default.createElement(IconButton, { "aria-label": "Next page", disabled: currentPage >= totalPages, icon: React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#right-chevron" }), kind: "neutral", onClick: () => onPageChange?.(currentPage + 1) }))));
22
+ }
23
+ function PageControl({ currentPage, item, onPageChange }) {
24
+ if (item === "ellipsis") {
25
+ return React__default.createElement("span", { className: "tds-pagination-ellipsis" }, "\u2026");
26
+ }
27
+ if (item === currentPage) {
28
+ return (React__default.createElement("span", { "aria-current": "page", className: "tds-pagination-page tds-pagination-page--current" }, item));
29
+ }
30
+ return (React__default.createElement("button", { className: "tds-pagination-page", onClick: () => onPageChange?.(item), type: "button" }, item));
31
+ }
32
+ function PageItems({ currentPage, items, name, onPageChange }) {
33
+ return items.map((item, index) => (React__default.createElement(Flex, { align: "center", as: "li", className: `tds-pagination-item tds-pagination-item--${name}`, key: item === "ellipsis"
34
+ ? `${name}-ellipsis-${index}`
35
+ : `${name}-page-${item}` },
36
+ React__default.createElement(PageControl, { currentPage: currentPage, item: item, onPageChange: onPageChange }))));
37
+ }
38
+ /**
39
+ * Page controls internal to `DataTable`. Both responsive sets of page items
40
+ * remain in static markup, and CSS selects the appropriate set by container
41
+ * width.
42
+ *
43
+ * @component
44
+ */
45
+ const Pagination = ({ boundaryCount, currentPage, onPageChange, siblingCount, totalPages, }) => {
46
+ const items = getPaginationItems({
47
+ boundaryCount,
48
+ currentPage,
49
+ siblingCount,
50
+ totalPages,
51
+ });
52
+ return (React__default.createElement(Flex, { align: "center", "aria-label": "Pagination", as: "nav", className: "tds-pagination", justify: "center" },
53
+ React__default.createElement(Flex, { align: "center", as: "ul", className: "tds-pagination-list", gap: 0.25 },
54
+ React__default.createElement(PreviousNextControls, { currentPage: currentPage, onPageChange: onPageChange, totalPages: totalPages }),
55
+ React__default.createElement(PageItems, { currentPage: currentPage, items: items.full, name: "full", onPageChange: onPageChange }),
56
+ React__default.createElement(PageItems, { currentPage: currentPage, items: items.compact, name: "compact", onPageChange: onPageChange }))));
57
+ };
58
+ Pagination.displayName = "Pagination";
59
+
60
+ export { Pagination };
61
+ //# sourceMappingURL=Pagination.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Pagination.js","sources":["../../../../src/components/internal/pagination/Pagination.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { IconButton } from \"@components/button\"\nimport { ButtonGroup } from \"@components/button-group\"\nimport { Flex } from \"@components/flex\"\nimport Icon from \"@utilities/Icon\"\nimport React from \"react\"\n\nimport {\n getPaginationItems,\n type PaginationItem,\n type PaginationItems,\n} from \"./getPaginationItems\"\n\nexport interface PaginationProps {\n /** Pages always pinned at each edge (page `1` and the last page). Default `1`. */\n boundaryCount?: number\n /** 1-indexed current page. */\n currentPage: number\n /** Called when a page control is activated. */\n onPageChange?: (page: number) => void\n /** Pages shown on each side of the current page in the full (non-collapsed) layout. Default `2`. */\n siblingCount?: number\n /** Total number of pages. */\n totalPages: number\n}\n\ntype PageChangeHandler = PaginationProps[\"onPageChange\"]\ntype PageItemsName = keyof PaginationItems\n\ninterface PreviousNextControlsProps {\n currentPage: number\n onPageChange: PageChangeHandler\n totalPages: number\n}\n\nfunction PreviousNextControls({\n currentPage,\n onPageChange,\n totalPages,\n}: PreviousNextControlsProps) {\n // Below 6 total pages the numbered run alone is enough to reach any page.\n if (totalPages < 6) return null\n\n return (\n <Flex align=\"center\" as=\"li\" className=\"tds-pagination-item\">\n <ButtonGroup aria-label=\"Change page\">\n <IconButton\n aria-label=\"Previous page\"\n disabled={currentPage <= 1}\n icon={<Icon aria-hidden symbol=\"general#left-chevron\" />}\n kind=\"neutral\"\n onClick={() => onPageChange?.(currentPage - 1)}\n />\n <IconButton\n aria-label=\"Next page\"\n disabled={currentPage >= totalPages}\n icon={<Icon aria-hidden symbol=\"general#right-chevron\" />}\n kind=\"neutral\"\n onClick={() => onPageChange?.(currentPage + 1)}\n />\n </ButtonGroup>\n </Flex>\n )\n}\n\ninterface PageControlProps {\n currentPage: number\n item: PaginationItem\n onPageChange: PageChangeHandler\n}\n\nfunction PageControl({ currentPage, item, onPageChange }: PageControlProps) {\n if (item === \"ellipsis\") {\n return <span className=\"tds-pagination-ellipsis\">…</span>\n }\n\n if (item === currentPage) {\n return (\n <span\n aria-current=\"page\"\n className=\"tds-pagination-page tds-pagination-page--current\"\n >\n {item}\n </span>\n )\n }\n\n return (\n <button\n className=\"tds-pagination-page\"\n onClick={() => onPageChange?.(item)}\n type=\"button\"\n >\n {item}\n </button>\n )\n}\n\ninterface PageItemsProps {\n currentPage: number\n items: PaginationItem[]\n name: PageItemsName\n onPageChange: PageChangeHandler\n}\n\nfunction PageItems({ currentPage, items, name, onPageChange }: PageItemsProps) {\n return items.map((item, index) => (\n <Flex\n align=\"center\"\n as=\"li\"\n className={`tds-pagination-item tds-pagination-item--${name}`}\n key={\n item === \"ellipsis\"\n ? `${name}-ellipsis-${index}`\n : `${name}-page-${item}`\n }\n >\n <PageControl\n currentPage={currentPage}\n item={item}\n onPageChange={onPageChange}\n />\n </Flex>\n ))\n}\n\n/**\n * Page controls internal to `DataTable`. Both responsive sets of page items\n * remain in static markup, and CSS selects the appropriate set by container\n * width.\n *\n * @component\n */\nexport const Pagination = ({\n boundaryCount,\n currentPage,\n onPageChange,\n siblingCount,\n totalPages,\n}: PaginationProps) => {\n const items = getPaginationItems({\n boundaryCount,\n currentPage,\n siblingCount,\n totalPages,\n })\n\n return (\n <Flex\n align=\"center\"\n aria-label=\"Pagination\"\n as=\"nav\"\n className=\"tds-pagination\"\n justify=\"center\"\n >\n <Flex align=\"center\" as=\"ul\" className=\"tds-pagination-list\" gap={0.25}>\n <PreviousNextControls\n currentPage={currentPage}\n onPageChange={onPageChange}\n totalPages={totalPages}\n />\n <PageItems\n currentPage={currentPage}\n items={items.full}\n name=\"full\"\n onPageChange={onPageChange}\n />\n <PageItems\n currentPage={currentPage}\n items={items.compact}\n name=\"compact\"\n onPageChange={onPageChange}\n />\n </Flex>\n </Flex>\n )\n}\n\nPagination.displayName = \"Pagination\"\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAoCA,SAAS,oBAAoB,CAAC,EAC5B,WAAW,EACX,YAAY,EACZ,UAAU,GACgB,EAAA;;IAE1B,IAAI,UAAU,GAAG,CAAC;AAAE,QAAA,OAAO,IAAI;AAE/B,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAC,qBAAqB,EAAA;QAC1DA,cAAA,CAAA,aAAA,CAAC,WAAW,kBAAY,aAAa,EAAA;AACnC,YAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAA,YAAA,EACE,eAAe,EAC1B,QAAQ,EAAE,WAAW,IAAI,CAAC,EAC1B,IAAI,EAAEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAA,IAAA,EAAa,MAAM,EAAC,sBAAsB,EAAA,CAAG,EACxD,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,MAAM,YAAY,GAAG,WAAW,GAAG,CAAC,CAAC,EAAA,CAC9C;AACF,YAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAA,YAAA,EACE,WAAW,EACtB,QAAQ,EAAE,WAAW,IAAI,UAAU,EACnC,IAAI,EAAEA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAAa,MAAM,EAAC,uBAAuB,EAAA,CAAG,EACzD,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,MAAM,YAAY,GAAG,WAAW,GAAG,CAAC,CAAC,GAC9C,CACU,CACT;AAEX;AAQA,SAAS,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAoB,EAAA;AACxE,IAAA,IAAI,IAAI,KAAK,UAAU,EAAE;AACvB,QAAA,OAAOA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,yBAAyB,aAAS;IAC3D;AAEA,IAAA,IAAI,IAAI,KAAK,WAAW,EAAE;QACxB,QACEA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,cAAA,EACe,MAAM,EACnB,SAAS,EAAC,kDAAkD,EAAA,EAE3D,IAAI,CACA;IAEX;IAEA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,MAAM,YAAY,GAAG,IAAI,CAAC,EACnC,IAAI,EAAC,QAAQ,EAAA,EAEZ,IAAI,CACE;AAEb;AASA,SAAS,SAAS,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAkB,EAAA;AAC3E,IAAA,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC3BA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAC,QAAQ,EACd,EAAE,EAAC,IAAI,EACP,SAAS,EAAE,CAAA,yCAAA,EAA4C,IAAI,EAAE,EAC7D,GAAG,EACD,IAAI,KAAK;AACP,cAAE,CAAA,EAAG,IAAI,CAAA,UAAA,EAAa,KAAK,CAAA;AAC3B,cAAE,CAAA,EAAG,IAAI,CAAA,MAAA,EAAS,IAAI,CAAA,CAAE,EAAA;AAG5B,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,GAC1B,CACG,CACR,CAAC;AACJ;AAEA;;;;;;AAMG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,GACM,KAAI;IACpB,MAAM,KAAK,GAAG,kBAAkB,CAAC;QAC/B,aAAa;QACb,WAAW;QACX,YAAY;QACZ,UAAU;AACX,KAAA,CAAC;IAEF,QACEA,6BAAC,IAAI,EAAA,EACH,KAAK,EAAC,QAAQ,gBACH,YAAY,EACvB,EAAE,EAAC,KAAK,EACR,SAAS,EAAC,gBAAgB,EAC1B,OAAO,EAAC,QAAQ,EAAA;AAEhB,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAC,qBAAqB,EAAC,GAAG,EAAE,IAAI,EAAA;AACpE,YAAAA,cAAA,CAAA,aAAA,CAAC,oBAAoB,EAAA,EACnB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EAAA,CACtB;AACF,YAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,CAAC,IAAI,EACjB,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,YAAY,EAAA,CAC1B;YACFA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,CAAC,OAAO,EACpB,IAAI,EAAC,SAAS,EACd,YAAY,EAAE,YAAY,EAAA,CAC1B,CACG,CACF;AAEX;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
@@ -0,0 +1,24 @@
1
+ /** A rendered slot in the numbered run: either a page number or a static gap marker. */
2
+ export type PaginationItem = number | "ellipsis";
3
+ export interface PaginationRangeOptions {
4
+ /** Pages always pinned at each edge (page `1` and the last page). Default `1`. */
5
+ boundaryCount?: number;
6
+ /** 1-indexed current page. */
7
+ currentPage: number;
8
+ /** Pages shown on each side of the current page. Default `2`. */
9
+ siblingCount?: number;
10
+ /** Total number of pages. */
11
+ totalPages: number;
12
+ }
13
+ export interface PaginationItems {
14
+ /** The boundary pages and current page used below the container breakpoint. */
15
+ compact: PaginationItem[];
16
+ /** The boundary pages and current-page siblings used above the breakpoint. */
17
+ full: PaginationItem[];
18
+ }
19
+ /**
20
+ * Returns the two static numbered runs described by the RFC. Both are rendered
21
+ * into the DOM; the pagination container query decides which run is visible.
22
+ */
23
+ export declare function getPaginationItems({ boundaryCount, currentPage, siblingCount, totalPages, }: PaginationRangeOptions): PaginationItems;
24
+ //# sourceMappingURL=getPaginationItems.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"getPaginationItems.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/pagination/getPaginationItems.ts"],"names":[],"mappings":"AAAA,wFAAwF;AACxF,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAA;AAEhD,MAAM,WAAW,sBAAsB;IACrC,kFAAkF;IAClF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,8BAA8B;IAC9B,WAAW,EAAE,MAAM,CAAA;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,+EAA+E;IAC/E,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,8EAA8E;IAC9E,IAAI,EAAE,cAAc,EAAE,CAAA;CACvB;AAyED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,aAAiB,EACjB,WAAW,EACX,YAAgB,EAChB,UAAU,GACX,EAAE,sBAAsB,GAAG,eAAe,CAe1C"}
@@ -0,0 +1,65 @@
1
+ function range(start, end) {
2
+ if (end < start)
3
+ return [];
4
+ return Array.from({ length: end - start + 1 }, (_, index) => start + index);
5
+ }
6
+ /**
7
+ * Turns ordered groups of visible pages into one run, removing duplicates and
8
+ * adding an ellipsis wherever pages were omitted. A gap of exactly one page
9
+ * renders that page instead: hiding it would cost the same slot as showing it.
10
+ */
11
+ function buildItems(pageGroups, totalPages) {
12
+ const pages = [...new Set(pageGroups.flat())]
13
+ .filter((page) => page >= 1 && page <= totalPages)
14
+ .sort((a, b) => a - b);
15
+ return pages.flatMap((page, index) => {
16
+ const previousPage = pages[index - 1];
17
+ if (previousPage === undefined || page - previousPage === 1)
18
+ return page;
19
+ return page - previousPage === 2
20
+ ? [previousPage + 1, page]
21
+ : ["ellipsis", page];
22
+ });
23
+ }
24
+ /**
25
+ * One numbered run: the boundary pages pinned at each edge, plus a window of
26
+ * pages around the current page, clamped to stay a page clear of each boundary
27
+ * rather than running off the edge. With that clamp the run holds the same slot
28
+ * count on every page, so nothing beside it shifts sideways as you page.
29
+ */
30
+ function getItems({ boundaryCount, currentPage, siblingCount, totalPages, }) {
31
+ const windowSize = siblingCount * 2 + 1;
32
+ // Both boundaries, the window, and a slot for the gap on each side of it.
33
+ const visibleCount = boundaryCount * 2 + windowSize + 2;
34
+ // Everything fits, so there is nothing to collapse.
35
+ if (totalPages <= visibleCount)
36
+ return range(1, totalPages);
37
+ const windowStart = Math.min(Math.max(currentPage - siblingCount, boundaryCount + 2), totalPages - boundaryCount - windowSize);
38
+ return buildItems([
39
+ range(1, boundaryCount),
40
+ range(windowStart, windowStart + windowSize - 1),
41
+ range(totalPages - boundaryCount + 1, totalPages),
42
+ ], totalPages);
43
+ }
44
+ /**
45
+ * Returns the two static numbered runs described by the RFC. Both are rendered
46
+ * into the DOM; the pagination container query decides which run is visible.
47
+ */
48
+ function getPaginationItems({ boundaryCount = 1, currentPage, siblingCount = 2, totalPages, }) {
49
+ if (totalPages < 1)
50
+ return { compact: [], full: [] };
51
+ const options = {
52
+ boundaryCount,
53
+ currentPage,
54
+ siblingCount,
55
+ totalPages,
56
+ };
57
+ return {
58
+ // The compact run is the full run with the siblings taken away.
59
+ compact: getItems({ ...options, siblingCount: 0 }),
60
+ full: getItems(options),
61
+ };
62
+ }
63
+
64
+ export { getPaginationItems };
65
+ //# sourceMappingURL=getPaginationItems.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"getPaginationItems.js","sources":["../../../../src/components/internal/pagination/getPaginationItems.ts"],"sourcesContent":["/** A rendered slot in the numbered run: either a page number or a static gap marker. */\nexport type PaginationItem = number | \"ellipsis\"\n\nexport interface PaginationRangeOptions {\n /** Pages always pinned at each edge (page `1` and the last page). Default `1`. */\n boundaryCount?: number\n /** 1-indexed current page. */\n currentPage: number\n /** Pages shown on each side of the current page. Default `2`. */\n siblingCount?: number\n /** Total number of pages. */\n totalPages: number\n}\n\nexport interface PaginationItems {\n /** The boundary pages and current page used below the container breakpoint. */\n compact: PaginationItem[]\n /** The boundary pages and current-page siblings used above the breakpoint. */\n full: PaginationItem[]\n}\n\ninterface ResolvedPaginationRangeOptions {\n boundaryCount: number\n currentPage: number\n siblingCount: number\n totalPages: number\n}\n\nfunction range(start: number, end: number): number[] {\n if (end < start) return []\n\n return Array.from({ length: end - start + 1 }, (_, index) => start + index)\n}\n\n/**\n * Turns ordered groups of visible pages into one run, removing duplicates and\n * adding an ellipsis wherever pages were omitted. A gap of exactly one page\n * renders that page instead: hiding it would cost the same slot as showing it.\n */\nfunction buildItems(\n pageGroups: number[][],\n totalPages: number\n): PaginationItem[] {\n const pages = [...new Set(pageGroups.flat())]\n .filter((page) => page >= 1 && page <= totalPages)\n .sort((a, b) => a - b)\n\n return pages.flatMap((page, index) => {\n const previousPage = pages[index - 1]\n\n if (previousPage === undefined || page - previousPage === 1) return page\n\n return page - previousPage === 2\n ? [previousPage + 1, page]\n : ([\"ellipsis\", page] as const)\n })\n}\n\n/**\n * One numbered run: the boundary pages pinned at each edge, plus a window of\n * pages around the current page, clamped to stay a page clear of each boundary\n * rather than running off the edge. With that clamp the run holds the same slot\n * count on every page, so nothing beside it shifts sideways as you page.\n */\nfunction getItems({\n boundaryCount,\n currentPage,\n siblingCount,\n totalPages,\n}: ResolvedPaginationRangeOptions): PaginationItem[] {\n const windowSize = siblingCount * 2 + 1\n // Both boundaries, the window, and a slot for the gap on each side of it.\n const visibleCount = boundaryCount * 2 + windowSize + 2\n\n // Everything fits, so there is nothing to collapse.\n if (totalPages <= visibleCount) return range(1, totalPages)\n\n const windowStart = Math.min(\n Math.max(currentPage - siblingCount, boundaryCount + 2),\n totalPages - boundaryCount - windowSize\n )\n\n return buildItems(\n [\n range(1, boundaryCount),\n range(windowStart, windowStart + windowSize - 1),\n range(totalPages - boundaryCount + 1, totalPages),\n ],\n totalPages\n )\n}\n\n/**\n * Returns the two static numbered runs described by the RFC. Both are rendered\n * into the DOM; the pagination container query decides which run is visible.\n */\nexport function getPaginationItems({\n boundaryCount = 1,\n currentPage,\n siblingCount = 2,\n totalPages,\n}: PaginationRangeOptions): PaginationItems {\n if (totalPages < 1) return { compact: [], full: [] }\n\n const options = {\n boundaryCount,\n currentPage,\n siblingCount,\n totalPages,\n }\n\n return {\n // The compact run is the full run with the siblings taken away.\n compact: getItems({ ...options, siblingCount: 0 }),\n full: getItems(options),\n }\n}\n"],"names":[],"mappings":"AA4BA,SAAS,KAAK,CAAC,KAAa,EAAE,GAAW,EAAA;IACvC,IAAI,GAAG,GAAG,KAAK;AAAE,QAAA,OAAO,EAAE;IAE1B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,GAAG,KAAK,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK,GAAG,KAAK,CAAC;AAC7E;AAEA;;;;AAIG;AACH,SAAS,UAAU,CACjB,UAAsB,EACtB,UAAkB,EAAA;AAElB,IAAA,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;AACzC,SAAA,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,UAAU;AAChD,SAAA,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAExB,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;QACnC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;QAErC,IAAI,YAAY,KAAK,SAAS,IAAI,IAAI,GAAG,YAAY,KAAK,CAAC;AAAE,YAAA,OAAO,IAAI;AAExE,QAAA,OAAO,IAAI,GAAG,YAAY,KAAK;AAC7B,cAAE,CAAC,YAAY,GAAG,CAAC,EAAE,IAAI;AACzB,cAAG,CAAC,UAAU,EAAE,IAAI,CAAW;AACnC,IAAA,CAAC,CAAC;AACJ;AAEA;;;;;AAKG;AACH,SAAS,QAAQ,CAAC,EAChB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,UAAU,GACqB,EAAA;AAC/B,IAAA,MAAM,UAAU,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;;IAEvC,MAAM,YAAY,GAAG,aAAa,GAAG,CAAC,GAAG,UAAU,GAAG,CAAC;;IAGvD,IAAI,UAAU,IAAI,YAAY;AAAE,QAAA,OAAO,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IAE3D,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAC1B,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,YAAY,EAAE,aAAa,GAAG,CAAC,CAAC,EACvD,UAAU,GAAG,aAAa,GAAG,UAAU,CACxC;AAED,IAAA,OAAO,UAAU,CACf;AACE,QAAA,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC;QACvB,KAAK,CAAC,WAAW,EAAE,WAAW,GAAG,UAAU,GAAG,CAAC,CAAC;QAChD,KAAK,CAAC,UAAU,GAAG,aAAa,GAAG,CAAC,EAAE,UAAU,CAAC;KAClD,EACD,UAAU,CACX;AACH;AAEA;;;AAGG;AACG,SAAU,kBAAkB,CAAC,EACjC,aAAa,GAAG,CAAC,EACjB,WAAW,EACX,YAAY,GAAG,CAAC,EAChB,UAAU,GACa,EAAA;IACvB,IAAI,UAAU,GAAG,CAAC;QAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;AAEpD,IAAA,MAAM,OAAO,GAAG;QACd,aAAa;QACb,WAAW;QACX,YAAY;QACZ,UAAU;KACX;IAED,OAAO;;QAEL,OAAO,EAAE,QAAQ,CAAC,EAAE,GAAG,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;AAClD,QAAA,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;KACxB;AACH;;;;"}
@@ -0,0 +1,5 @@
1
+ import "./index.css";
2
+ export type { PaginationItem, PaginationItems } from "./getPaginationItems";
3
+ export type { PaginationProps } from "./Pagination";
4
+ export { Pagination } from "./Pagination";
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAC3E,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA"}