@cube-dev/ui-kit 0.0.0-canary-e76eb3e → 0.0.0-canary-01fea9d

package/docs/components/fields/ColorSwatchGroup.md

@@ -0,0 +1,206 @@
+# ColorSwatchGroup
+
+A grid of color swatches, one of which can be selected. It is the palette half
+of choosing a color, where [ColorPicker](./ColorPicker.md) is the
+freeform half — and the two compose: pass `swatches` to a `ColorPicker` and the
+palette appears under the editor.
+
+Under the hood it is a radio group, so one tab stop and arrow keys move between
+swatches. The API is shaped after `Picker` rather than `RadioGroup`: colors go in
+as data, not as children.
+
+## When to Use
+
+- A brand or theme palette where freeform color would be wrong
+- Chart series, tag and label colors — a small approved set
+- Inside a `ColorPicker` popover, as a shortcut past the sliders
+
+## Component
+
+---
+
+### Properties
+
+- **`colors`** `Array<string | { color: string; label?: string }>` — The colors to offer
+- **`value`** `string | null` — The selected color (controlled)
+- **`defaultValue`** `string | null` — The selected color (uncontrolled)
+- **`onChange`** `(value: string | null) => void` — Fired with the chosen color, written in `format`
+- **`format`** `'hex' | 'rgb' | 'hsl' | 'okhsl' | 'okhst' | 'oklch'` (default: `hex`) — Notation the value is written in
+- **`columns`** `number` — Pin the swatches to a fixed grid. By default they wrap to fill the available width
+- **`allowCustom`** `boolean` (default: `false`) — Append a `ColorPicker` for colors outside the set
+- **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Size of each swatch
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md)
+
+### Field Properties
+
+Supports all [Field properties](../../FieldProperties.md)
+
+### Styling Properties
+
+#### styles
+
+Customizes the grid.
+
+#### swatchStyles
+
+Customizes an individual swatch.
+
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+
+### Style Props on the group
+
+`ColorSwatchGroup` and `ColorPicker` both take the outer and block style props,
+so `radius`, `border`, `padding` and `shadow` work directly on them.
+
+### Modifiers
+
+The `mods` property accepts the following modifiers you can override:
+
+| Modifier   | Type      | Description                        |
+| ---------- | --------- | ---------------------------------- |
+| `selected` | `boolean` | The swatch is the selected color   |
+| `empty`    | `boolean` | The swatch has no color to show    |
+| `disabled` | `boolean` | The group is disabled              |
+
+## ColorSwatch
+
+The square itself is exported, for the times you need to show a color without a
+control around it — a legend, a table cell, a summary line. It takes direct
+style props, so its shape and size are yours:
+
+```jsx
+<ColorSwatch color="#7a4dbf" radius="round" width="4x" height="4x" />
+```
+
+It is decorative on its own: pair it with the value as text, or with something
+that names it.
+
+## Swatches must be unique
+
+Equivalent colors are collapsed into one swatch, because two entries for the
+same color make selection ambiguous — there would be no way to say which one is
+selected. Matching is done on the canonical hex, so `#ff0000`, `rgb(255 0 0)`
+and `hsl(0 100% 50%)` are one swatch, not three.
+
+The same matching decides which swatch a value selects, so `value` need not be
+written in the same notation as the swatch it refers to.
+
+## Examples
+
+### Basic usage
+
+```jsx
+<ColorSwatchGroup
+  label="Brand color"
+  colors={['#7a4dbf', '#26fcb2', '#ff0000']}
+  value={color}
+  onChange={setColor}
+/>
+```
+
+### Wrapping onto rows
+
+By default the swatches wrap to fill whatever width they are given: a single row
+where there is room, more rows where there is not. `columns` pins them to a
+fixed grid instead, sized to the swatches rather than stretched across the
+container.
+
+```jsx
+<ColorSwatchGroup colors={palette} columns={4} />
+```
+
+### Naming the swatches
+
+A swatch announces its color by default, which is rarely the most useful thing
+to hear. Give the colors names when they have them.
+
+```jsx
+<ColorSwatchGroup
+  colors={[
+    { color: '#7a4dbf', label: 'Primary' },
+    { color: '#26fcb2', label: 'Success' },
+  ]}
+/>
+```
+
+### Allowing a color outside the set
+
+```jsx
+<ColorSwatchGroup colors={palette} allowCustom />
+```
+
+The trailing picker shows the current color whenever that color is not one of
+the swatches, so a custom choice stays visible.
+
+### Inside a ColorPicker
+
+```jsx
+<ColorPicker label="Brand color" swatches={palette} swatchColumns={4} />
+```
+
+`allowCustom` is ignored there, and deliberately so: the escape hatch is itself
+a `ColorPicker`, so offering it inside one would nest popovers without end. The
+group reads a context the popover provides, which means the recursion cannot be
+written even by hand.
+
+## Accessibility
+
+### Keyboard Navigation
+
+- `Tab` — moves focus into the group, landing on the selected swatch
+- `Left` / `Right`, `Up` / `Down` — move between swatches, selecting as they go
+- `Space` — selects the focused swatch
+
+### Screen Reader Support
+
+- The group announces as a radiogroup, named by its label or `aria-label`
+- Each swatch announces as a radio named by its `label`, or by its color
+- Give the group a name: "radiogroup" alone says nothing about what is chosen
+
+### ARIA Properties
+
+- `aria-label` — names the group when there is no visible label
+
+## Best Practices
+
+1. **Do**: name the colors when they mean something
+
+   ```jsx
+   <ColorSwatchGroup colors={[{ color: '#ff0000', label: 'Danger' }]} />
+   ```
+
+2. **Don't**: pass the same color twice expecting two swatches — one is dropped
+
+   ```jsx
+   <ColorSwatchGroup colors={['#ff0000', 'rgb(255 0 0)']} />
+   ```
+
+3. **Do**: reach for `allowCustom` only where a color outside the palette is
+   genuinely acceptable. A fixed set is the point of this component.
+
+## Integration with Forms
+
+This component supports all
+[Field properties](../../FieldProperties.md) when used
+within a Form. The field value is the color string.
+
+## Suggested Improvements
+
+- Sections with headings, for palettes with more than one group
+- An optional "no color" swatch that clears the value
+- Multi-selection, for palettes that build a series
+
+## Related Components
+
+- [ColorPicker](./ColorPicker.md) — freeform color behind a swatch button
+- [ColorInput](./ColorInput.md) — freeform color as editable text
+- [RadioGroup](./RadioGroup.md) — the selection primitive this is built on

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-e76eb3e",
+  "version": "0.0.0-canary-01fea9d",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -37,7 +37,6 @@
     "build": "tsdown",
     "watch": "tsdown --watch",
     "test": "vitest run",
-    "test:browser": "vitest run --config vitest.browser.config.ts",
     "test-cover": "vitest run --coverage",
     "test-watch": "vitest",
     "prettier": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
@@ -80,7 +79,6 @@
     "@react-aria/ssr": "^3.9.10",
     "@react-aria/utils": "^3.32.0",
     "@react-spectrum/utils": "^3.12.10",
-    "@react-stately/selection": "^3.20.7",
     "@react-stately/utils": "^3.11.0",
     "@react-types/shared": "^3.32.1",
     "@tabler/icons-react": "^3.31.0",
@@ -137,9 +135,7 @@
     "@types/react-test-renderer": "^18.0.7",
     "@uiw/react-codemirror": "^4.25.4",
     "@vitejs/plugin-react": "^6.0.0",
-    "@vitest/browser": "^4.1.10",
-    "@vitest/browser-playwright": "^4.1.10",
-    "@vitest/coverage-v8": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.0",
     "best-effort-json-parser": "^1.2.1",
     "bytes": "^3.1.2",
     "chromatic": "^13.1.4",
@@ -152,7 +148,6 @@
     "markdown-table": "^3.0.3",
     "npm-run-all": "^4.1.5",
     "oxlint": "^1.72.0",
-    "playwright": "^1.62.1",
     "prettier": "^3.2.5",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
@@ -167,7 +162,7 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.6.3",
     "vite": "^8.0.0",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.0"
   },
   "browserslist": [
     "last 2 Chrome versions",

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

@@ -1,13 +0,0 @@
-
-import { CubeDataTableProps } from "./types.js";
-import { ForwardedRef, ReactElement } from "react";
-
-//#region src/components/data/DataTable/DataTable.d.ts
-declare const _DataTable: (<T = any>(props: CubeDataTableProps<T> & {
-  ref?: ForwardedRef<HTMLDivElement>;
-}) => ReactElement) & {
-  displayName?: string;
-};
-//#endregion
-export { _DataTable };
-//# sourceMappingURL=DataTable.d.ts.map

package/dist/components/data/DataTable/DataTable.js

@@ -1,242 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
-import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
-import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { useI18n } from "../../../i18n/useI18n.js";
-import { clampPage, getPageInfo } from "../../navigation/Pagination/use-pagination.js";
-import { ItemTableFooter } from "../ItemTable/ItemTableFooter.js";
-import { useTableColumns } from "../TableBase/use-table-columns.js";
-import { ROW_NUMBER_COLUMN_KEY } from "../TableBase/use-table-selection.js";
-import { TableView } from "../TableBase/TableView.js";
-import { useCellSelection } from "../TableBase/use-cell-selection.js";
-import { useContainerWidth } from "../TableBase/use-container-width.js";
-import { useTableSorts } from "../TableBase/use-table-sorts.js";
-import { useTableStorage } from "../TableBase/use-table-storage.js";
-import { CONTAINER_STYLES } from "@tenphi/tasty";
-import { forwardRef, useMemo, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-import { useControlledState } from "@react-stately/utils";
-
-//#region src/components/data/DataTable/DataTable.tsx
-/** Wide enough for five digits at the dense default. */
-const ROW_NUMBER_WIDTH = 56;
-const EMPTY_WIDTHS = {};
-function defaultGetRowKey(rowKey) {
-	return (row, index) => {
-		const value = row?.[rowKey];
-		return value == null ? index : value;
-	};
-}
-/**
-* A grid for query results.
-*
-* The same engine as `ItemTable` — one `TableView`, one column layout, one
-* value pipeline — with the defaults an analytical grid wants rather than a
-* list's: denser type, banded rows, resizable columns, multi-column sort, and
-* rows pinned for totals.
-*
-* It knows nothing about Cube. Measures, dimensions, pivots and drill-downs
-* reach it as ordinary columns, `render` output and `column.header.menu`
-* content, which is what keeps the ~34 kB of Cloud's column-header menu in
-* Cloud.
-*/
-function DataTable(props, ref) {
-	const { data, columns, rowKey = "id", getRowKey, pinnedTopRows, pinnedBottomRows, isLoading = false, loadingIndicator = "overlay", skeletonRowCount, error, emptyLabel, noResultsLabel, isFiltered, shape = "plain", size = "small", rowHeight, headerHeight, isStriped = true, isHeaderHidden, isHeaderSticky, showRowNumbers = false, sortMode, sorts: sortsProp, defaultSorts, onSortsChange, paginationMode = "client", page: pageProp, defaultPage, onPageChange, pageSize: pageSizeProp, defaultPageSize = 100, onPageSizeChange, pageSizeOptions, total: totalProp, totalPages, hasNextPage, summary = true, autoHidePagination = true, footerStart, footerCenter, footerEnd, cellSelectionMode = "range", isCellSelectable, selectedCellRange, defaultSelectedCellRange, onCellRangeChange, isResizable = true, columnWidths: columnWidthsProp, defaultColumnWidths, onColumnResize, isVirtualized, virtualizeThreshold, overscan, getRowProps, storageKey, styles, headerStyles, headerCellStyles, bodyStyles, rowStyles, cellStyles, footerStyles, ariaLabel, qa, mods, ...rest } = props;
-	const rootRef = useCombinedRefs(ref, useRef(null));
-	const [scrollerEl, setScrollerEl] = useState(null);
-	const containerWidth = useContainerWidth(scrollerEl);
-	const storage = useTableStorage(storageKey);
-	/**
-	* `dataType` is presentational, so it is folded into the column here rather
-	* than reaching the renderer: `number` right-aligns and takes tabular figures
-	* so digits line up down the column.
-	*/
-	const resolvedColumns = useMemo(() => columns.map((column) => {
-		const isNumeric = column.dataType === "number";
-		return {
-			...column,
-			align: column.align ?? (isNumeric ? "end" : "start"),
-			cellStyles: isNumeric ? {
-				fontVariantNumeric: "tabular-nums",
-				...typeof column.cellStyles === "object" ? column.cellStyles : null
-			} : column.cellStyles
-		};
-	}), [columns]);
-	const { sorts, sortedRows, toggleSort, mode: resolvedSortMode } = useTableSorts({
-		columns: resolvedColumns,
-		rows: data,
-		mode: sortMode,
-		sorts: sortsProp,
-		defaultSorts,
-		onSortsChange
-	});
-	const [pageSize, setPageSizeState] = useControlledState(pageSizeProp, pageSizeProp === void 0 && storage.has("pageSize") ? storage.initial.pageSize ?? defaultPageSize : defaultPageSize, onPageSizeChange);
-	const [page, setPageState] = useControlledState(pageProp, defaultPage ?? 1, onPageChange);
-	const isPaginated = paginationMode !== "off";
-	const isServerPaginated = paginationMode === "server";
-	const total = isServerPaginated ? totalProp ?? 0 : sortedRows.length;
-	const pageInfo = getPageInfo({
-		page,
-		pageSize,
-		total,
-		totalPages: isServerPaginated ? totalPages : void 0
-	});
-	const setPage = useEvent((next) => setPageState(clampPage(next, pageInfo.totalPages)));
-	const setPageSize = useEvent((next) => {
-		setPageSizeState(next);
-		setPageState(1);
-		if (pageSizeProp === void 0) storage.write({ pageSize: next });
-	});
-	const visibleRows = paginationMode === "client" ? sortedRows.slice((pageInfo.page - 1) * pageSize, pageInfo.page * pageSize) : sortedRows;
-	const [ownColumnWidths, setOwnColumnWidths] = useState(() => (columnWidthsProp === void 0 && storage.has("columnWidths") ? storage.initial.columnWidths ?? defaultColumnWidths : defaultColumnWidths) ?? EMPTY_WIDTHS);
-	const [draftColumnWidths, setDraftColumnWidths] = useState(null);
-	const draftRef = useRef(null);
-	const baseColumnWidths = columnWidthsProp ?? ownColumnWidths;
-	const columnWidths = draftColumnWidths ?? baseColumnWidths;
-	const handleColumnResize = useEvent((key, width) => {
-		draftRef.current = {
-			...draftRef.current ?? baseColumnWidths,
-			[key]: Math.round(width)
-		};
-		setDraftColumnWidths(draftRef.current);
-	});
-	const handleColumnResizeEnd = useEvent((key) => {
-		const next = draftRef.current ?? baseColumnWidths;
-		if (columnWidthsProp === void 0) {
-			setOwnColumnWidths(next);
-			storage.write({ columnWidths: next });
-		}
-		onColumnResize?.(key, next[key], next);
-		draftRef.current = null;
-		setDraftColumnWidths(null);
-	});
-	const layout = useTableColumns({
-		columns: resolvedColumns,
-		containerWidth,
-		columnWidths,
-		leadingColumns: useMemo(() => showRowNumbers ? [{
-			key: ROW_NUMBER_COLUMN_KEY,
-			width: ROW_NUMBER_WIDTH
-		}] : void 0, [showRowNumbers])
-	});
-	const { t } = useI18n();
-	const resolvedGetRowKey = useMemo(() => getRowKey ?? defaultGetRowKey(rowKey), [getRowKey, rowKey]);
-	const selectionRows = useMemo(() => [
-		...pinnedTopRows ?? [],
-		...visibleRows,
-		...pinnedBottomRows ?? []
-	], [
-		pinnedTopRows,
-		visibleRows,
-		pinnedBottomRows
-	]);
-	const selectionRowKeys = useMemo(() => [
-		...(pinnedTopRows ?? []).map(resolvedGetRowKey),
-		...visibleRows.map(resolvedGetRowKey),
-		...(pinnedBottomRows ?? []).map(resolvedGetRowKey)
-	], [
-		pinnedTopRows,
-		visibleRows,
-		pinnedBottomRows,
-		resolvedGetRowKey
-	]);
-	const resolveCellSelectable = useEvent((row, rowKey, columnKey) => {
-		if (!isCellSelectable) return true;
-		const index = selectionRowKeys.indexOf(rowKey);
-		const topCount = pinnedTopRows?.length ?? 0;
-		return isCellSelectable({
-			row,
-			rowKey,
-			columnKey,
-			section: index < topCount ? "pinnedTop" : index < topCount + visibleRows.length ? "body" : "pinnedBottom"
-		});
-	});
-	const cellSelection = useCellSelection({
-		mode: cellSelectionMode,
-		columns: layout.columns,
-		rows: selectionRows,
-		rowKeys: selectionRowKeys,
-		isCellSelectable: isCellSelectable ? resolveCellSelectable : void 0,
-		range: selectedCellRange,
-		defaultRange: defaultSelectedCellRange,
-		onRangeChange: onCellRangeChange
-	});
-	const rootStyles = {
-		...extractStyles(props, CONTAINER_STYLES),
-		...styles
-	};
-	const smallestPageSize = pageSizeOptions?.length ? Math.min(...pageSizeOptions) : pageSize;
-	const showPagination = isPaginated && !(autoHidePagination && !hasNextPage && pageInfo.totalPages <= 1 && total <= smallestPageSize);
-	const hasFooter = showPagination || footerStart != null || footerCenter != null || footerEnd != null;
-	return /* @__PURE__ */ jsx(TableView, {
-		...rest,
-		rootRef,
-		qa: qa || "DataTable",
-		rows: visibleRows,
-		pinnedTopRows,
-		pinnedBottomRows,
-		rowNumberOffset: paginationMode === "client" ? (pageInfo.page - 1) * pageSize : 0,
-		layout,
-		hasColumnDividers: true,
-		cellSelection,
-		getRowKey: resolvedGetRowKey,
-		onScrollerRef: setScrollerEl,
-		isLoading,
-		loadingIndicator,
-		skeletonRowCount,
-		error,
-		emptyLabel: emptyLabel ?? t("itemTable.noItems", "No items"),
-		noResultsLabel: noResultsLabel ?? t("itemTable.noResults", "No results found"),
-		isFiltered,
-		shape,
-		size,
-		rowHeight,
-		headerHeight,
-		isStriped,
-		isHeaderHidden,
-		isHeaderSticky,
-		contentPreset: "t4",
-		headerPreset: "t4m",
-		sortMode: resolvedSortMode,
-		sorts,
-		onColumnSort: toggleSort,
-		isVirtualized,
-		virtualizeThreshold,
-		overscan,
-		isResizable,
-		onColumnResize: handleColumnResize,
-		onColumnResizeEnd: handleColumnResizeEnd,
-		getRowProps,
-		ariaLabel,
-		styles: rootStyles,
-		headerStyles,
-		headerCellStyles,
-		bodyStyles,
-		rowStyles,
-		cellStyles,
-		mods,
-		footer: hasFooter ? /* @__PURE__ */ jsx(ItemTableFooter, {
-			start: footerStart,
-			center: footerCenter,
-			end: footerEnd,
-			styles: footerStyles,
-			pagination: showPagination ? {
-				page: pageInfo.page,
-				pageSize,
-				total,
-				totalPages: pageInfo.totalPages,
-				pageSizeOptions,
-				summary,
-				hasNextPage,
-				onPageChange: setPage,
-				onPageSizeChange: setPageSize
-			} : void 0
-		}) : null
-	});
-}
-const _DataTable = forwardRef(DataTable);
-_DataTable.displayName = "DataTable";
-
-//#endregion
-export { _DataTable };
-//# sourceMappingURL=DataTable.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DataTable.js","names":[],"sources":["../../../../src/components/data/DataTable/DataTable.tsx"],"sourcesContent":["import { useControlledState } from '@react-stately/utils';\nimport { CONTAINER_STYLES } from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { clampPage, getPageInfo } from '../../navigation/Pagination';\nimport { ItemTableFooter } from '../ItemTable/ItemTableFooter';\nimport { TableView } from '../TableBase/TableView';\nimport { useCellSelection } from '../TableBase/use-cell-selection';\nimport { useContainerWidth } from '../TableBase/use-container-width';\nimport { useTableColumns } from '../TableBase/use-table-columns';\nimport { ROW_NUMBER_COLUMN_KEY } from '../TableBase/use-table-selection';\nimport { useTableSorts } from '../TableBase/use-table-sorts';\nimport { useTableStorage } from '../TableBase/use-table-storage';\n\nimport type { Key } from '@react-types/shared';\nimport type { ForwardedRef, ReactElement } from 'react';\nimport type { CubeTableRowSection } from '../TableBase/types';\nimport type { CubeDataTableColumn, CubeDataTableProps } from './types';\n\n/** Wide enough for five digits at the dense default. */\nconst ROW_NUMBER_WIDTH = 56;\n\nconst EMPTY_WIDTHS: Record<string, number> = {};\n\nfunction defaultGetRowKey<T>(rowKey: string) {\n  return (row: T, index: number): Key => {\n    const value = (row as any)?.[rowKey];\n\n    return value == null ? index : (value as Key);\n  };\n}\n\n/**\n * A grid for query results.\n *\n * The same engine as `ItemTable` — one `TableView`, one column layout, one\n * value pipeline — with the defaults an analytical grid wants rather than a\n * list's: denser type, banded rows, resizable columns, multi-column sort, and\n * rows pinned for totals.\n *\n * It knows nothing about Cube. Measures, dimensions, pivots and drill-downs\n * reach it as ordinary columns, `render` output and `column.header.menu`\n * content, which is what keeps the ~34 kB of Cloud's column-header menu in\n * Cloud.\n */\nfunction DataTable<T = any>(\n  props: CubeDataTableProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    data,\n    columns,\n    rowKey = 'id',\n    getRowKey,\n    pinnedTopRows,\n    pinnedBottomRows,\n    isLoading = false,\n    loadingIndicator = 'overlay',\n    skeletonRowCount,\n    error,\n    emptyLabel,\n    noResultsLabel,\n    isFiltered,\n    shape = 'plain',\n    // Denser than `ItemTable`'s `medium`: a result grid is read as a block, and\n    // more rows on screen is the point of it.\n    size = 'small',\n    rowHeight,\n    headerHeight,\n    isStriped = true,\n    isHeaderHidden,\n    isHeaderSticky,\n    showRowNumbers = false,\n    sortMode,\n    sorts: sortsProp,\n    defaultSorts,\n    onSortsChange,\n    paginationMode = 'client',\n    page: pageProp,\n    defaultPage,\n    onPageChange,\n    pageSize: pageSizeProp,\n    defaultPageSize = 100,\n    onPageSizeChange,\n    pageSizeOptions,\n    total: totalProp,\n    totalPages,\n    hasNextPage,\n    summary = true,\n    autoHidePagination = true,\n    footerStart,\n    footerCenter,\n    footerEnd,\n    cellSelectionMode = 'range',\n    isCellSelectable,\n    selectedCellRange,\n    defaultSelectedCellRange,\n    onCellRangeChange,\n    isResizable = true,\n    columnWidths: columnWidthsProp,\n    defaultColumnWidths,\n    onColumnResize,\n    isVirtualized,\n    virtualizeThreshold,\n    overscan,\n    getRowProps,\n    storageKey,\n    styles,\n    headerStyles,\n    headerCellStyles,\n    bodyStyles,\n    rowStyles,\n    cellStyles,\n    footerStyles,\n    ariaLabel,\n    qa,\n    mods,\n    ...rest\n  } = props;\n\n  const localRef = useRef<HTMLDivElement>(null);\n  const rootRef = useCombinedRefs(ref, localRef);\n  const [scrollerEl, setScrollerEl] = useState<HTMLElement | null>(null);\n  const containerWidth = useContainerWidth(scrollerEl);\n\n  const storage = useTableStorage(storageKey);\n\n  /**\n   * `dataType` is presentational, so it is folded into the column here rather\n   * than reaching the renderer: `number` right-aligns and takes tabular figures\n   * so digits line up down the column.\n   */\n  const resolvedColumns = useMemo(\n    () =>\n      columns.map((column) => {\n        const isNumeric = column.dataType === 'number';\n\n        return {\n          ...column,\n          align: column.align ?? (isNumeric ? 'end' : 'start'),\n          cellStyles: isNumeric\n            ? {\n                fontVariantNumeric: 'tabular-nums',\n                ...(typeof column.cellStyles === 'object'\n                  ? column.cellStyles\n                  : null),\n              }\n            : column.cellStyles,\n        } as CubeDataTableColumn<T>;\n      }),\n    [columns],\n  );\n\n  const {\n    sorts,\n    sortedRows,\n    toggleSort,\n    mode: resolvedSortMode,\n  } = useTableSorts<T>({\n    columns: resolvedColumns,\n    rows: data,\n    mode: sortMode,\n    sorts: sortsProp,\n    defaultSorts,\n    onSortsChange,\n  });\n\n  const [pageSize, setPageSizeState] = useControlledState<number>(\n    pageSizeProp as number,\n    (pageSizeProp === undefined && storage.has('pageSize')\n      ? storage.initial.pageSize ?? defaultPageSize\n      : defaultPageSize) as number,\n    onPageSizeChange as (value: number) => void,\n  );\n  const [page, setPageState] = useControlledState<number>(\n    pageProp as number,\n    defaultPage ?? 1,\n    onPageChange as (value: number) => void,\n  );\n\n  const isPaginated = paginationMode !== 'off';\n  const isServerPaginated = paginationMode === 'server';\n  const total = isServerPaginated ? totalProp ?? 0 : sortedRows.length;\n\n  const pageInfo = getPageInfo({\n    page,\n    pageSize,\n    total,\n    totalPages: isServerPaginated ? totalPages : undefined,\n  });\n\n  const setPage = useEvent((next: number) =>\n    setPageState(clampPage(next, pageInfo.totalPages)),\n  );\n  const setPageSize = useEvent((next: number) => {\n    setPageSizeState(next);\n    setPageState(1);\n\n    if (pageSizeProp === undefined) storage.write({ pageSize: next });\n  });\n\n  const visibleRows =\n    paginationMode === 'client'\n      ? sortedRows.slice(\n          (pageInfo.page - 1) * pageSize,\n          pageInfo.page * pageSize,\n        )\n      : sortedRows;\n\n  const [ownColumnWidths, setOwnColumnWidths] = useState<\n    Record<string, number>\n  >(\n    () =>\n      (columnWidthsProp === undefined && storage.has('columnWidths')\n        ? storage.initial.columnWidths ?? defaultColumnWidths\n        : defaultColumnWidths) ?? EMPTY_WIDTHS,\n  );\n  const [draftColumnWidths, setDraftColumnWidths] = useState<Record<\n    string,\n    number\n  > | null>(null);\n  const draftRef = useRef<Record<string, number> | null>(null);\n\n  const baseColumnWidths = columnWidthsProp ?? ownColumnWidths;\n  const columnWidths = draftColumnWidths ?? baseColumnWidths;\n\n  const handleColumnResize = useEvent((key: string, width: number) => {\n    draftRef.current = {\n      ...(draftRef.current ?? baseColumnWidths),\n      [key]: Math.round(width),\n    };\n    setDraftColumnWidths(draftRef.current);\n  });\n\n  const handleColumnResizeEnd = useEvent((key: string) => {\n    const next = draftRef.current ?? baseColumnWidths;\n\n    if (columnWidthsProp === undefined) {\n      setOwnColumnWidths(next);\n      storage.write({ columnWidths: next });\n    }\n\n    onColumnResize?.(key, next[key], next);\n    draftRef.current = null;\n    setDraftColumnWidths(null);\n  });\n\n  const leadingColumns = useMemo(\n    () =>\n      showRowNumbers\n        ? [{ key: ROW_NUMBER_COLUMN_KEY, width: ROW_NUMBER_WIDTH }]\n        : undefined,\n    [showRowNumbers],\n  );\n\n  const layout = useTableColumns<T>({\n    columns: resolvedColumns,\n    containerWidth,\n    columnWidths,\n    leadingColumns,\n  });\n\n  const { t } = useI18n();\n\n  const resolvedGetRowKey = useMemo(\n    () => getRowKey ?? defaultGetRowKey<T>(rowKey),\n    [getRowKey, rowKey],\n  );\n\n  // Every row a range can reach, in the order they appear on screen. Pinned rows\n  // are in it: a total is a figure like any other, and having to copy it\n  // separately from the column it sums is the wrong trade.\n  //\n  // The keys are built here rather than inside the hook so they cannot disagree\n  // with the ones the renderer stamps — a pinned row is keyed by its own index\n  // within its group, exactly as `renderPinnedRow` keys it.\n  const selectionRows = useMemo(\n    () => [\n      ...(pinnedTopRows ?? []),\n      ...visibleRows,\n      ...(pinnedBottomRows ?? []),\n    ],\n    [pinnedTopRows, visibleRows, pinnedBottomRows],\n  );\n  const selectionRowKeys = useMemo(\n    () => [\n      ...(pinnedTopRows ?? []).map(resolvedGetRowKey),\n      ...visibleRows.map(resolvedGetRowKey),\n      ...(pinnedBottomRows ?? []).map(resolvedGetRowKey),\n    ],\n    [pinnedTopRows, visibleRows, pinnedBottomRows, resolvedGetRowKey],\n  );\n\n  // The hook works in one flat row order; the section a row belongs to is a\n  // property of where it sits in that order, so it is resolved here rather than\n  // asking the consumer to track it.\n  const resolveCellSelectable = useEvent(\n    (row: T, rowKey: Key, columnKey: string) => {\n      if (!isCellSelectable) return true;\n\n      const index = selectionRowKeys.indexOf(rowKey);\n      const topCount = pinnedTopRows?.length ?? 0;\n      const section: CubeTableRowSection =\n        index < topCount\n          ? 'pinnedTop'\n          : index < topCount + visibleRows.length\n            ? 'body'\n            : 'pinnedBottom';\n\n      return isCellSelectable({ row, rowKey, columnKey, section });\n    },\n  );\n\n  const cellSelection = useCellSelection<T>({\n    mode: cellSelectionMode,\n    columns: layout.columns,\n    rows: selectionRows,\n    rowKeys: selectionRowKeys,\n    isCellSelectable: isCellSelectable ? resolveCellSelectable : undefined,\n    range: selectedCellRange,\n    defaultRange: defaultSelectedCellRange,\n    onRangeChange: onCellRangeChange,\n  });\n\n  // Same as `ItemTable`: style props (`height`, `maxHeight`, `margin`, …) land\n  // on the root frame. `height` is the one that matters — there is no\n  // page-scroll mode, so bounding the grid is what turns the body into a\n  // scroller, pins the header, and lets virtualization engage at all.\n  const rootStyles = { ...extractStyles(props, CONTAINER_STYLES), ...styles };\n\n  const smallestPageSize = pageSizeOptions?.length\n    ? Math.min(...pageSizeOptions)\n    : pageSize;\n\n  const showPagination =\n    isPaginated &&\n    !(\n      autoHidePagination &&\n      !hasNextPage &&\n      pageInfo.totalPages <= 1 &&\n      total <= smallestPageSize\n    );\n\n  const hasFooter =\n    showPagination ||\n    footerStart != null ||\n    footerCenter != null ||\n    footerEnd != null;\n\n  return (\n    <TableView<T>\n      {...rest}\n      rootRef={rootRef}\n      qa={qa || 'DataTable'}\n      rows={visibleRows}\n      pinnedTopRows={pinnedTopRows}\n      pinnedBottomRows={pinnedBottomRows}\n      // Continuous across pages: row 101 is row 101, not row 1 of page two.\n      rowNumberOffset={\n        paginationMode === 'client' ? (pageInfo.page - 1) * pageSize : 0\n      }\n      layout={layout}\n      // Always on, unlike `ItemTable`. A result grid is read down a column, and\n      // once the values are wide and right-aligned the rule is what keeps a\n      // figure attached to its column — which is why Cloud's ag-grid theme sets\n      // `columnBorder` for `DataTable` and not for the list grids.\n      hasColumnDividers\n      cellSelection={cellSelection}\n      getRowKey={resolvedGetRowKey}\n      onScrollerRef={setScrollerEl}\n      isLoading={isLoading}\n      loadingIndicator={loadingIndicator}\n      skeletonRowCount={skeletonRowCount}\n      error={error}\n      // Same localized fallbacks as `ItemTable`: a grid that has finished\n      // loading and shows an unexplained blank rectangle reads as broken.\n      emptyLabel={emptyLabel ?? t('itemTable.noItems', 'No items')}\n      noResultsLabel={\n        noResultsLabel ?? t('itemTable.noResults', 'No results found')\n      }\n      isFiltered={isFiltered}\n      shape={shape}\n      size={size}\n      rowHeight={rowHeight}\n      headerHeight={headerHeight}\n      isStriped={isStriped}\n      isHeaderHidden={isHeaderHidden}\n      isHeaderSticky={isHeaderSticky}\n      // The header shows the column name at body size — a result grid has no\n      // room for the uppercase caption a list header uses.\n      // `t4` throughout: a result grid is read as a block, and one step down\n      // from the list preset fits noticeably more on screen without losing\n      // legibility. The header takes the medium weight of the same step.\n      contentPreset=\"t4\"\n      headerPreset=\"t4m\"\n      sortMode={resolvedSortMode}\n      sorts={sorts}\n      onColumnSort={toggleSort}\n      isVirtualized={isVirtualized}\n      virtualizeThreshold={virtualizeThreshold}\n      overscan={overscan}\n      isResizable={isResizable}\n      onColumnResize={handleColumnResize}\n      onColumnResizeEnd={handleColumnResizeEnd}\n      getRowProps={getRowProps}\n      ariaLabel={ariaLabel}\n      styles={rootStyles}\n      headerStyles={headerStyles}\n      headerCellStyles={headerCellStyles}\n      bodyStyles={bodyStyles}\n      rowStyles={rowStyles}\n      cellStyles={cellStyles}\n      mods={mods}\n      footer={\n        hasFooter ? (\n          <ItemTableFooter\n            start={footerStart}\n            center={footerCenter}\n            end={footerEnd}\n            styles={footerStyles}\n            pagination={\n              showPagination\n                ? {\n                    page: pageInfo.page,\n                    pageSize,\n                    total,\n                    totalPages: pageInfo.totalPages,\n                    pageSizeOptions,\n                    summary,\n                    hasNextPage,\n                    onPageChange: setPage,\n                    onPageSizeChange: setPageSize,\n                  }\n                : undefined\n            }\n          />\n        ) : null\n      }\n    />\n  );\n}\n\nconst _DataTable = forwardRef(DataTable) as unknown as (<T = any>(\n  props: CubeDataTableProps<T> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement) & { displayName?: string };\n\n_DataTable.displayName = 'DataTable';\n\nexport { _DataTable as DataTable };\n"],"mappings":"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"}

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

@@ -1,3 +0,0 @@
-
-import { CubeDataTableColumn, CubeDataTableProps } from "./types.js";
-import { _DataTable } from "./DataTable.js";