@cube-dev/ui-kit 0.156.0 → 0.157.1

package/dist/components/data/ItemTable/ItemTableFooter.js

@@ -0,0 +1,79 @@
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+import { _Pagination } from "../../navigation/Pagination/Pagination.js";
+import { tasty } from "@tenphi/tasty";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/data/ItemTable/ItemTableFooter.tsx
+const FooterElement = tasty({
+	qa: "ItemTableFooter",
+	as: "div",
+	styles: {
+		gridRow: 3,
+		preset: "t4",
+		display: "flex",
+		flow: "row",
+		gap: "1x",
+		placeItems: "center",
+		padding: "1x",
+		border: "1bw #border top",
+		Start: {
+			$: ">",
+			display: "flex",
+			flow: "row",
+			gap: "1x",
+			placeItems: "center",
+			width: "min 0"
+		},
+		Center: {
+			$: ">",
+			display: "flex",
+			flow: "row",
+			gap: "1x",
+			placeItems: "center",
+			placeContent: "center",
+			flexGrow: 1
+		},
+		End: {
+			$: ">",
+			display: "flex",
+			flow: "row",
+			gap: "1x",
+			placeItems: "center",
+			placeContent: "end"
+		}
+	}
+});
+function ItemTableFooter({ start, center, end, pagination, styles }) {
+	return /* @__PURE__ */ jsxs(FooterElement, {
+		styles,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"data-element": "Start",
+				children: start
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-element": "Center",
+				children: center
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-element": "End",
+				children: [end, pagination ? /* @__PURE__ */ jsx(_Pagination, {
+					size: "xsmall",
+					page: pagination.page,
+					pageSize: pagination.pageSize,
+					total: pagination.total,
+					totalPages: pagination.totalPages,
+					pageSizeOptions: pagination.pageSizeOptions,
+					summary: pagination.summary,
+					hasNextPage: pagination.hasNextPage,
+					onPageChange: pagination.onPageChange,
+					onPageSizeChange: pagination.onPageSizeChange
+				}) : null]
+			})
+		]
+	});
+}
+
+//#endregion
+export { ItemTableFooter };
+//# sourceMappingURL=ItemTableFooter.js.map

package/dist/components/data/ItemTable/ItemTableFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemTableFooter.js","names":["Pagination"],"sources":["../../../../src/components/data/ItemTable/ItemTableFooter.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Pagination } from '../../navigation/Pagination';\n\nimport type { Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { CubeTablePageInfo } from '../../navigation/Pagination';\n\nconst FooterElement = tasty({\n  qa: 'ItemTableFooter',\n  as: 'div',\n  styles: {\n    gridRow: 3,\n    // The footer is chrome around the data, so its text sits a step below the\n    // body's. Slot content inherits this, which is what keeps a consumer's own\n    // label matched to the pagination summary beside it.\n    preset: 't4',\n    display: 'flex',\n    flow: 'row',\n    gap: '1x',\n    placeItems: 'center',\n    padding: '1x',\n    border: '1bw #border top',\n\n    /**\n     * Three named slots. This is what replaces the `MutationObserver` that Cloud\n     * uses to inject a \"Load all results\" button into ag-grid's paging panel —\n     * ag-grid Community has no status bar, so there was nowhere to put it.\n     */\n    Start: {\n      $: '>',\n      display: 'flex',\n      flow: 'row',\n      gap: '1x',\n      placeItems: 'center',\n      width: 'min 0',\n    },\n    Center: {\n      $: '>',\n      display: 'flex',\n      flow: 'row',\n      gap: '1x',\n      placeItems: 'center',\n      placeContent: 'center',\n      // `flexGrow`, not a width: this is a flex item, and only grow makes it\n      // take the leftover space so its content actually lands in the middle.\n      flexGrow: 1,\n    },\n    End: {\n      $: '>',\n      display: 'flex',\n      flow: 'row',\n      gap: '1x',\n      placeItems: 'center',\n      placeContent: 'end',\n    },\n  },\n});\n\nexport interface ItemTableFooterProps {\n  start?: ReactNode;\n  center?: ReactNode;\n  end?: ReactNode;\n  /** Rendered in the end slot unless `end` overrides it. */\n  pagination?: {\n    page: number;\n    pageSize: number;\n    total: number;\n    totalPages?: number;\n    pageSizeOptions?: number[];\n    summary?: boolean | ((info: CubeTablePageInfo) => ReactNode);\n    hasNextPage?: boolean;\n    onPageChange: (page: number) => void;\n    onPageSizeChange?: (pageSize: number) => void;\n  };\n  styles?: Styles;\n}\n\nexport function ItemTableFooter({\n  start,\n  center,\n  end,\n  pagination,\n  styles,\n}: ItemTableFooterProps) {\n  return (\n    <FooterElement styles={styles}>\n      <div data-element=\"Start\">{start}</div>\n      <div data-element=\"Center\">{center}</div>\n      <div data-element=\"End\">\n        {end}\n        {pagination ? (\n          <Pagination\n            // The footer is chrome around the data, not part of it — its\n            // controls sit a step below the toolbar's.\n            size=\"xsmall\"\n            page={pagination.page}\n            pageSize={pagination.pageSize}\n            total={pagination.total}\n            totalPages={pagination.totalPages}\n            pageSizeOptions={pagination.pageSizeOptions}\n            summary={pagination.summary}\n            hasNextPage={pagination.hasNextPage}\n            onPageChange={pagination.onPageChange}\n            onPageSizeChange={pagination.onPageSizeChange}\n          />\n        ) : null}\n      </div>\n    </FooterElement>\n  );\n}\n"],"mappings":";;;;;;AAQA,MAAM,gBAAgB,MAAM;CAC1B,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EAIT,QAAQ;EACR,SAAS;EACT,MAAM;EACN,KAAK;EACL,YAAY;EACZ,SAAS;EACT,QAAQ;EAOR,OAAO;GACL,GAAG;GACH,SAAS;GACT,MAAM;GACN,KAAK;GACL,YAAY;GACZ,OAAO;GACR;EACD,QAAQ;GACN,GAAG;GACH,SAAS;GACT,MAAM;GACN,KAAK;GACL,YAAY;GACZ,cAAc;GAGd,UAAU;GACX;EACD,KAAK;GACH,GAAG;GACH,SAAS;GACT,MAAM;GACN,KAAK;GACL,YAAY;GACZ,cAAc;GACf;EACF;CACF,CAAC;AAqBF,SAAgB,gBAAgB,EAC9B,OACA,QACA,KACA,YACA,UACuB;AACvB,QACE,qBAAC;EAAsB;;GACrB,oBAAC;IAAI,gBAAa;cAAS;KAAY;GACvC,oBAAC;IAAI,gBAAa;cAAU;KAAa;GACzC,qBAAC;IAAI,gBAAa;eACf,KACA,aACC,oBAACA;KAGC,MAAK;KACL,MAAM,WAAW;KACjB,UAAU,WAAW;KACrB,OAAO,WAAW;KAClB,YAAY,WAAW;KACvB,iBAAiB,WAAW;KAC5B,SAAS,WAAW;KACpB,aAAa,WAAW;KACxB,cAAc,WAAW;KACzB,kBAAkB,WAAW;MAC7B,GACA;KACA;;GACQ"}

package/dist/components/data/ItemTable/ItemTableToolbar.d.ts

@@ -0,0 +1,34 @@
+
+import { Styles } from "@tenphi/tasty";
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Key as Key$1 } from "@react-types/shared";
+
+//#region src/components/data/ItemTable/ItemTableToolbar.d.ts
+/** The table's search input, bound to the table's own state. */
+declare function ItemTableSearch(props: {
+  placeholder?: string;
+  styles?: Styles;
+  qa?: string;
+}): react_jsx_runtime0.JSX.Element;
+interface ItemTableToolbarProps {
+  isSearchable?: boolean;
+  filters?: ReactNode;
+  actions?: ReactNode;
+  onRefresh?: () => void;
+  isLoading?: boolean;
+  styles?: Styles;
+  searchStyles?: Styles;
+}
+declare function ItemTableToolbar({
+  isSearchable,
+  filters,
+  actions,
+  onRefresh,
+  isLoading,
+  styles,
+  searchStyles
+}: ItemTableToolbarProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ItemTableSearch, ItemTableToolbar };
+//# sourceMappingURL=ItemTableToolbar.d.ts.map

package/dist/components/data/ItemTable/ItemTableToolbar.js

@@ -0,0 +1,91 @@
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+import { useI18n } from "../../../i18n/useI18n.js";
+import { ReloadIcon } from "../../../icons/ReloadIcon.js";
+import { Button } from "../../actions/index.js";
+import { SearchInput } from "../../fields/SearchInput/SearchInput.js";
+import { tasty } from "@tenphi/tasty";
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/data/ItemTable/ItemTableToolbar.tsx
+const ChromeContext = createContext(null);
+const ItemTableChromeProvider = ChromeContext.Provider;
+function useItemTableChrome(component) {
+	const context = useContext(ChromeContext);
+	if (!context) throw new Error(`${component} must be rendered inside an ItemTable — it reads the table's search state from context.`);
+	return context;
+}
+const ToolbarElement = tasty({
+	qa: "ItemTableToolbar",
+	as: "div",
+	styles: {
+		gridRow: 1,
+		display: "flex",
+		flow: "row",
+		gap: "1x",
+		placeItems: "center",
+		placeContent: "space-between",
+		padding: "1x",
+		border: "1bw #border bottom",
+		Start: {
+			$: ">",
+			display: "flex",
+			flow: "row",
+			gap: "1x",
+			placeItems: "center",
+			width: "min 0"
+		},
+		End: {
+			$: ">",
+			display: "flex",
+			flow: "row",
+			gap: "1x",
+			placeItems: "center"
+		}
+	}
+});
+const SearchElement = tasty(SearchInput, {
+	qa: "ItemTableSearchInput",
+	styles: { width: "max 300px" }
+});
+/** The table's search input, bound to the table's own state. */
+function ItemTableSearch(props) {
+	const { searchValue, setSearchValue, searchPlaceholder } = useItemTableChrome("ItemTable.Search");
+	const { t } = useI18n();
+	return /* @__PURE__ */ jsx(SearchElement, {
+		qa: props.qa,
+		size: "small",
+		isClearable: true,
+		"aria-label": t("itemTable.search", "Search"),
+		placeholder: props.placeholder ?? searchPlaceholder ?? t("itemTable.searchPlaceholder", "Search..."),
+		value: searchValue,
+		styles: props.styles,
+		onChange: setSearchValue
+	});
+}
+function ItemTableToolbar({ isSearchable, filters, actions, onRefresh, isLoading, styles, searchStyles }) {
+	const { t } = useI18n();
+	return /* @__PURE__ */ jsxs(ToolbarElement, {
+		styles,
+		role: "toolbar",
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-element": "Start",
+			children: [isSearchable ? /* @__PURE__ */ jsx(ItemTableSearch, { styles: searchStyles }) : null, filters]
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-element": "End",
+			children: [actions, onRefresh ? /* @__PURE__ */ jsx(Button, {
+				qa: "ItemTableRefreshButton",
+				type: "outline",
+				size: "small",
+				icon: /* @__PURE__ */ jsx(ReloadIcon, {}),
+				isLoading,
+				"aria-label": t("itemTable.refresh", "Refresh"),
+				onPress: onRefresh
+			}) : null]
+		})]
+	});
+}
+
+//#endregion
+export { ItemTableChromeProvider, ItemTableSearch, ItemTableToolbar, useItemTableChrome };
+//# sourceMappingURL=ItemTableToolbar.js.map

package/dist/components/data/ItemTable/ItemTableToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemTableToolbar.js","names":[],"sources":["../../../../src/components/data/ItemTable/ItemTableToolbar.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { createContext, useContext } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { ReloadIcon } from '../../../icons';\nimport { Button } from '../../actions';\nimport { SearchInput } from '../../fields/SearchInput';\n\nimport type { Key } from '@react-types/shared';\nimport type { Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\n\n/**\n * Lets `ItemTable.Search` (and future chrome pieces) read the table's state\n * without prop drilling, so a consumer can rebuild the toolbar from parts and\n * still have exactly one owner of the search term.\n */\nexport interface CubeItemTableChromeState<T = any> {\n  searchValue: string;\n  setSearchValue: (value: string) => void;\n  searchPlaceholder?: string;\n  isLoading: boolean;\n  onRefresh?: () => void;\n  /** `'all'` is the sentinel, so `selectedCount` is what the UI should show. */\n  selectedKeys: Key[] | 'all';\n  selectedRows: T[];\n  selectedCount: number;\n  clearSelection: () => void;\n}\n\nconst ChromeContext = createContext<CubeItemTableChromeState | null>(null);\n\nexport const ItemTableChromeProvider = ChromeContext.Provider;\n\nexport function useItemTableChrome(component: string) {\n  const context = useContext(ChromeContext);\n\n  if (!context) {\n    throw new Error(\n      `${component} must be rendered inside an ItemTable — it reads the table's search state from context.`,\n    );\n  }\n\n  return context;\n}\n\nconst ToolbarElement = tasty({\n  qa: 'ItemTableToolbar',\n  as: 'div',\n  styles: {\n    gridRow: 1,\n    display: 'flex',\n    flow: 'row',\n    gap: '1x',\n    placeItems: 'center',\n    placeContent: 'space-between',\n    padding: '1x',\n    border: '1bw #border bottom',\n\n    // Left group: search, then filters.\n    Start: {\n      $: '>',\n      display: 'flex',\n      flow: 'row',\n      gap: '1x',\n      placeItems: 'center',\n      width: 'min 0',\n    },\n    // Right group: arbitrary consumer actions, then refresh.\n    End: {\n      $: '>',\n      display: 'flex',\n      flow: 'row',\n      gap: '1x',\n      placeItems: 'center',\n    },\n  },\n});\n\nconst SearchElement = tasty(SearchInput, {\n  qa: 'ItemTableSearchInput',\n  styles: { width: 'max 300px' },\n});\n\n/** The table's search input, bound to the table's own state. */\nexport function ItemTableSearch(props: {\n  placeholder?: string;\n  styles?: Styles;\n  qa?: string;\n}) {\n  const { searchValue, setSearchValue, searchPlaceholder } =\n    useItemTableChrome('ItemTable.Search');\n  const { t } = useI18n();\n\n  return (\n    <SearchElement\n      qa={props.qa}\n      size=\"small\"\n      isClearable\n      aria-label={t('itemTable.search', 'Search')}\n      placeholder={\n        props.placeholder ??\n        searchPlaceholder ??\n        t('itemTable.searchPlaceholder', 'Search...')\n      }\n      value={searchValue}\n      styles={props.styles}\n      onChange={setSearchValue}\n    />\n  );\n}\n\nexport interface ItemTableToolbarProps {\n  isSearchable?: boolean;\n  filters?: ReactNode;\n  actions?: ReactNode;\n  onRefresh?: () => void;\n  isLoading?: boolean;\n  styles?: Styles;\n  searchStyles?: Styles;\n}\n\nexport function ItemTableToolbar({\n  isSearchable,\n  filters,\n  actions,\n  onRefresh,\n  isLoading,\n  styles,\n  searchStyles,\n}: ItemTableToolbarProps) {\n  const { t } = useI18n();\n\n  return (\n    <ToolbarElement styles={styles} role=\"toolbar\">\n      <div data-element=\"Start\">\n        {isSearchable ? <ItemTableSearch styles={searchStyles} /> : null}\n        {filters}\n      </div>\n      <div data-element=\"End\">\n        {actions}\n        {onRefresh ? (\n          <Button\n            qa=\"ItemTableRefreshButton\"\n            type=\"outline\"\n            size=\"small\"\n            icon={<ReloadIcon />}\n            isLoading={isLoading}\n            aria-label={t('itemTable.refresh', 'Refresh')}\n            onPress={onRefresh}\n          />\n        ) : null}\n      </div>\n    </ToolbarElement>\n  );\n}\n"],"mappings":";;;;;;;;;;AA8BA,MAAM,gBAAgB,cAA+C,KAAK;AAE1E,MAAa,0BAA0B,cAAc;AAErD,SAAgB,mBAAmB,WAAmB;CACpD,MAAM,UAAU,WAAW,cAAc;AAEzC,KAAI,CAAC,QACH,OAAM,IAAI,MACR,GAAG,UAAU,yFACd;AAGH,QAAO;;AAGT,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,SAAS;EACT,MAAM;EACN,KAAK;EACL,YAAY;EACZ,cAAc;EACd,SAAS;EACT,QAAQ;EAGR,OAAO;GACL,GAAG;GACH,SAAS;GACT,MAAM;GACN,KAAK;GACL,YAAY;GACZ,OAAO;GACR;EAED,KAAK;GACH,GAAG;GACH,SAAS;GACT,MAAM;GACN,KAAK;GACL,YAAY;GACb;EACF;CACF,CAAC;AAEF,MAAM,gBAAgB,MAAM,aAAa;CACvC,IAAI;CACJ,QAAQ,EAAE,OAAO,aAAa;CAC/B,CAAC;;AAGF,SAAgB,gBAAgB,OAI7B;CACD,MAAM,EAAE,aAAa,gBAAgB,sBACnC,mBAAmB,mBAAmB;CACxC,MAAM,EAAE,MAAM,SAAS;AAEvB,QACE,oBAAC;EACC,IAAI,MAAM;EACV,MAAK;EACL;EACA,cAAY,EAAE,oBAAoB,SAAS;EAC3C,aACE,MAAM,eACN,qBACA,EAAE,+BAA+B,YAAY;EAE/C,OAAO;EACP,QAAQ,MAAM;EACd,UAAU;GACV;;AAcN,SAAgB,iBAAiB,EAC/B,cACA,SACA,SACA,WACA,WACA,QACA,gBACwB;CACxB,MAAM,EAAE,MAAM,SAAS;AAEvB,QACE,qBAAC;EAAuB;EAAQ,MAAK;aACnC,qBAAC;GAAI,gBAAa;cACf,eAAe,oBAAC,mBAAgB,QAAQ,eAAgB,GAAG,MAC3D;IACG,EACN,qBAAC;GAAI,gBAAa;cACf,SACA,YACC,oBAAC;IACC,IAAG;IACH,MAAK;IACL,MAAK;IACL,MAAM,oBAAC,eAAa;IACT;IACX,cAAY,EAAE,qBAAqB,UAAU;IAC7C,SAAS;KACT,GACA;IACA;GACS"}

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

@@ -0,0 +1,4 @@
+
+import { CubeItemTableColumn, CubeItemTableProps } from "./types.js";
+import "./ItemTableToolbar.js";
+import { _ItemTable } from "./ItemTable.js";

package/dist/components/data/ItemTable/types.d.ts

@@ -0,0 +1,327 @@
+
+import { NavigateArg } from "../../../providers/navigation.types.js";
+import { CubeItemActionProps } from "../../actions/ItemAction/ItemAction.js";
+import { SizeName } from "../../../tokens/sizes.js";
+import { CubeTablePageInfo } from "../../navigation/Pagination/types.js";
+import "../../navigation/Pagination/index.js";
+import "../../../tokens/index.js";
+import { CubeTableColumn, CubeTableLoadingIndicator, CubeTableRowContext, CubeTableSelectAllMode, CubeTableSelectionMode, CubeTableSort } from "../TableBase/types.js";
+import { CubeTableRowRenderProps } from "../TableBase/TableView.js";
+import { CubeTablePersistKey } from "../TableBase/use-table-storage.js";
+import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
+import { ReactNode } from "react";
+import { Key as Key$1 } from "@react-types/shared";
+
+//#region src/components/data/ItemTable/types.d.ts
+type CubeItemTableColumn<T = any> = CubeTableColumn<T>;
+interface CubeItemTableProps<T = any> extends BaseProps, ContainerStyleProps {
+  data: readonly T[];
+  columns: CubeItemTableColumn<T>[];
+  /** Property used as the row key. @default 'id' */
+  rowKey?: string;
+  /** Wins over `rowKey`. */
+  getRowKey?: (row: T, index: number) => Key$1;
+  isLoading?: boolean;
+  /**
+   * How a refresh over an existing result is presented.
+   * @default 'overlay'
+   */
+  loadingIndicator?: CubeTableLoadingIndicator;
+  /** Skeleton rows shown while loading with no data yet. @default 6 */
+  skeletonRowCount?: number;
+  /** Nothing to show at all. @default localized "No items" */
+  emptyLabel?: ReactNode;
+  /**
+   * Shown instead of `emptyLabel` when a search or filter is narrowing the
+   * data. @default localized "No results found"
+   */
+  noResultsLabel?: ReactNode;
+  /** Takes precedence over both labels. */
+  error?: ReactNode;
+  /**
+   * Selects `noResultsLabel` over `emptyLabel` when there is nothing to show.
+   * Set automatically by the built-in search; pass it explicitly when you filter
+   * `data` yourself, so an empty result still reads as "no matches" rather than
+   * "nothing exists".
+   */
+  isFiltered?: boolean;
+  /** @default 'plain' */
+  shape?: 'plain' | 'card';
+  /** @default 'medium' */
+  size?: SizeName;
+  /** Row height in px. Defaults to the height implied by `size`. */
+  rowHeight?: number;
+  /** Header height in px. Defaults to `rowHeight`. */
+  headerHeight?: number;
+  /** Alternating row background. @default false */
+  /**
+   * Slide rows to their new positions when the sort changes, instead of
+   * teleporting them. @default true
+   */
+  isRowMoveAnimated?: boolean;
+  isStriped?: boolean;
+  /** @default false */
+  isHeaderHidden?: boolean;
+  /** Keep the column header pinned while the body scrolls. @default true */
+  isHeaderSticky?: boolean;
+  /** @default 'auto' — on above `virtualizeThreshold` rows; needs a bounded height. */
+  isVirtualized?: boolean | 'auto';
+  /** @default 50 */
+  virtualizeThreshold?: number;
+  /**
+   * Rows rendered beyond each edge of the viewport while virtualized. Raise it
+   * if a fast scroll shows blank rows; lower it to mount fewer at once.
+   * @default 20
+   */
+  overscan?: number;
+  /**
+   * `'client'` reorders `data` using each column's `compare` (or a locale-aware
+   * default). `'server'` never reorders — it only reflects `sort` and fires
+   * `onSortChange`. `'off'` removes the sort affordance entirely.
+   * @default 'client' when any column is sortable, else 'off'
+   */
+  sortMode?: 'client' | 'server' | 'off';
+  sort?: CubeTableSort | null;
+  defaultSort?: CubeTableSort | null;
+  onSortChange?: (sort: CubeTableSort | null) => void;
+  /**
+   * Replaces the entire toolbar row. Compose it from `ItemTable.Search` and
+   * friends, which read the table's state from context.
+   */
+  toolbar?: ReactNode;
+  /** Render the built-in search input in the toolbar. @default false */
+  isSearchable?: boolean;
+  /**
+   * `'client'` filters `data` with the built-in matcher. `'server'` never
+   * filters — it only reports the term through `onSearchChange`.
+   * @default 'client'
+   */
+  searchMode?: 'client' | 'server';
+  searchPlaceholder?: string;
+  /**
+   * Controlled term. Works with `isSearchable={false}` too, so a page can render
+   * its own input anywhere and still drive the table's matcher.
+   */
+  searchValue?: string;
+  defaultSearchValue?: string;
+  onSearchChange?: (value: string) => void;
+  /** Debounces the filter and the callback in BOTH modes. @default 500 */
+  searchDelay?: number;
+  /**
+   * Replaces the default client matcher, which tests each searchable column's
+   * display text (`format?.(value) ?? String(getValue(row))`).
+   */
+  searchFilter?: (row: T, query: string) => boolean;
+  /** Left group, after the search input. */
+  filters?: ReactNode;
+  /** Right group. Arbitrary JSX — Buttons, ButtonGroups, anything. */
+  actions?: ReactNode;
+  onRefresh?: () => void;
+  /**
+   * `'client'` slices `data` itself. `'server'` never slices — it reflects
+   * `page` and reports changes. `'off'` renders no pagination.
+   * @default 'client'
+   */
+  paginationMode?: 'client' | 'server' | 'infinite' | 'off';
+  pageSize?: number;
+  defaultPageSize?: number;
+  onPageSizeChange?: (pageSize: number) => void;
+  /** @default [10, 20, 50, 100, 500] */
+  pageSizeOptions?: number[];
+  /** Controlled page, 1-based. */
+  page?: number;
+  defaultPage?: number;
+  onPageChange?: (page: number) => void;
+  /**
+   * `paginationMode="infinite"` replaces the page control with load-on-scroll.
+   * The table never slices in that mode — `data` is the accumulated list.
+   */
+  onLoadMore?: () => void;
+  hasMore?: boolean;
+  isLoadingMore?: boolean;
+  /** How far before the end to prefetch, in px. @default 200 */
+  loadMoreMargin?: number;
+  /** Server mode: total rows across all pages. Preferred over `totalPages`. */
+  total?: number;
+  totalPages?: number;
+  /** Server mode with an unknown total. */
+  hasNextPage?: boolean;
+  /** Footer summary. `true` → localized "1–50 of 1,204". @default true */
+  summary?: boolean | ((info: CubeTablePageInfo) => ReactNode);
+  /** Replaces the entire footer row. */
+  footer?: ReactNode;
+  /**
+   * First-class footer slots. These are what a "load all results" button or a
+   * row-count label go into — no DOM injection required.
+   */
+  footerStart?: ReactNode;
+  footerCenter?: ReactNode;
+  footerEnd?: ReactNode;
+  /** @default 'none' */
+  selectionMode?: CubeTableSelectionMode;
+  /** Controlled selection. `'all'` is a sentinel the consumer interprets. */
+  selectedKeys?: Key$1[] | 'all';
+  defaultSelectedKeys?: Key$1[] | 'all';
+  /**
+   * `rows` holds only the rows the client has loaded — with the `'all'`
+   * sentinel that is necessarily fewer than the selection denotes.
+   */
+  onSelectionChange?: (keys: Key$1[] | 'all', rows: T[]) => void;
+  /**
+   * What the header checkbox acts on.
+   * @default 'page'
+   */
+  selectAllMode?: CubeTableSelectAllMode;
+  /** The row stays focusable and clickable; only its checkbox goes inert. */
+  isRowSelectable?: (row: T) => boolean;
+  /** Explains why a row cannot be selected, on its disabled checkbox. */
+  selectionTooltip?: string | ((row: T) => string | undefined);
+  /** Rows that cannot be interacted with at all. */
+  disabledKeys?: Key$1[];
+  /**
+   * Actions offered while rows are selected. Supplying any implies
+   * `selectionMode="multiple"` — a bulk action with no way to select is a
+   * contradiction, not a configuration.
+   */
+  bulkActions?: CubeTableBulkAction<T>[];
+  /**
+   * `floating` centres the bar over the body without changing the table's
+   * height; `toolbar` replaces the `actions` group while a selection exists.
+   * @default 'floating'
+   */
+  bulkBarPlacement?: 'floating' | 'toolbar';
+  bulkBarStyles?: Styles;
+  /**
+   * Turns the row-header cell into a stretched link covering the whole row, so
+   * ⌘-click, middle-click and "Open in new tab" work natively. Return
+   * `undefined` for a row that should not navigate.
+   */
+  rowLink?: (row: T, index: number) => NavigateArg | undefined;
+  /**
+   * Non-navigational activation: Enter, or a click when there is no `rowLink`.
+   * A click on an interactive cell control never reaches it.
+   */
+  onRowAction?: (row: T, key: Key$1) => void;
+  /** `Menu.Item` children. Return `null` to give a row no menu. */
+  rowMenu?: ReactNode | ((row: T, ctx: CubeTableRowContext<T>) => ReactNode | null);
+  /**
+   * Where the menu is exposed, matching `Tree#contextMenu`:
+   * - `false` — no menu, even when `rowMenu` is set.
+   * - `true` — a `⋮` trigger column **and** right-click / Shift+F10.
+   * - `'context-only'` — right-click / Shift+F10 only, no trigger column.
+   * @default false
+   */
+  rowContextMenu?: boolean | 'context-only';
+  onRowMenuAction?: (action: string, row: T, key: Key$1) => void;
+  rowMenuTriggerProps?: Partial<CubeItemActionProps>;
+  /**
+   * Per-row visuals. Note the deliberate three-way split: `disabledKeys` makes
+   * a row non-interactive, `isRowSelectable` leaves it interactive but its
+   * checkbox inert, and `isDimmed` here is purely visual.
+   */
+  getRowProps?: (ctx: CubeTableRowContext<T>) => CubeTableRowRenderProps | undefined;
+  /** The root. Sub-elements reach every internal part of the table. */
+  styles?: Styles;
+  /** The column header ROW. The top chrome is `toolbarStyles`. */
+  headerStyles?: Styles;
+  headerCellStyles?: Styles;
+  /**
+   * Typography preset for the column header. Defaults to `'c3'` — the small
+   * uppercase caption the Cloud list tables use. Pass `'t3m'` for body-sized
+   * headers, or override anything else through `headerCellStyles`.
+   */
+  headerPreset?: string;
+  toolbarStyles?: Styles;
+  searchStyles?: Styles;
+  footerStyles?: Styles;
+  /** Lets rows be dragged into a new order. */
+  isReorderable?: boolean;
+  /**
+   * The new order, and the rows in it. Called with every row key, not just the
+   * moved one, so the consumer can persist the order directly.
+   */
+  onReorder?: (keys: Key$1[], rows: T[]) => void;
+  /**
+   * Dropping rows *onto* a row — a workbook into a folder.
+   *
+   * Independent of `isReorderable`, and composable with it: `isTarget` decides
+   * per row whether a drop lands *on* it, and anything that says no falls
+   * through to reordering. Cloud has to treat the two as mutually exclusive
+   * because ag-grid cannot express both; that limitation does not carry over.
+   *
+   * Replaces Cloud's `isDropOnRowEnabled`, `isDropTarget`, `isDropOnRowAllowed`
+   * and `onDropOnRow`, plus the two ag-grid workarounds beside them
+   * (`dropTargetRowKeyRef`, `dropTargetRefreshColumnKey`) that exist only
+   * because ag-grid cannot re-render one cell from React state.
+   */
+  dropOnRow?: {
+    /** Which rows can receive a drop. */isTarget: (row: T) => boolean; /** Pair-specific guard, e.g. a folder cannot be dropped into itself. */
+    isAllowed?: (dragged: T[], target: T) => boolean;
+    onDrop: (dragged: T[], target: T) => void | Promise<void>;
+  };
+  /**
+   * What the cursor drags. One row shows its icon and label; several show a
+   * count, which is the only honest thing a single chip can say about them.
+   *
+   * Without it the browser drags a screenshot of the row, and a full-width
+   * table row makes a page-wide slab. Replaces Cloud's `getItemDragInfo`, which
+   * had to re-inject its icon into ag-grid's ghost element on every drag tick
+   * because ag-grid overwrites the ghost whenever the pointer leaves the grid.
+   */
+  getItemDragInfo?: (row: T) => {
+    label: ReactNode;
+    icon?: ReactNode;
+  };
+  /** Default for every column; a column overrides with `isResizable`. */
+  isResizable?: boolean;
+  /** Controlled widths, keyed by column key. */
+  columnWidths?: Record<string, number>;
+  defaultColumnWidths?: Record<string, number>;
+  /** Fires once the drag or key press finishes, not on every pixel. */
+  onColumnResize?: (columnKey: string, width: number, all: Record<string, number>) => void;
+  /**
+   * Persists the table's own state under `cube-ui-kit:table:${storageKey}`.
+   * Controlled state is never stored — it belongs to the page.
+   */
+  storageKey?: string;
+  /**
+   * Hides the pagination control when it cannot do anything: a single page
+   * whose total even the smallest `pageSizeOptions` entry would not split.
+   * The footer itself still renders if any slot has content.
+   * @default true
+   */
+  autoHidePagination?: boolean;
+  /** @default ['pageSize', 'columnWidths'] */
+  persist?: CubeTablePersistKey[];
+  bodyStyles?: Styles;
+  rowStyles?: Styles;
+  cellStyles?: Styles;
+  ariaLabel?: string;
+  qa?: string;
+  mods?: Record<string, boolean | undefined>;
+}
+interface CubeTableBulkAction<T = any> {
+  key: string;
+  label: ReactNode;
+  icon?: ReactNode;
+  /**
+   * `rows` holds the loaded rows for the selection. `setLoading` drives this
+   * action's own spinner, so one slow request does not freeze the others.
+   */
+  onAction: (rows: T[], ctx: {
+    setLoading: (isLoading: boolean) => void;
+  }) => void | Promise<void>;
+  isDisabled?: (rows: T[]) => boolean;
+  disabledTooltip?: string;
+  type?: 'primary' | 'outline' | 'clear';
+  theme?: 'default' | 'danger';
+  /**
+   * Clears the selection once the action resolves. On by default — the rows an
+   * action just deleted or moved are usually gone.
+   * @default true
+   */
+  deselectAfter?: boolean;
+}
+//#endregion
+export { CubeItemTableColumn, CubeItemTableProps, CubeTableBulkAction };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/data/TableBase/ColumnResizer.js

@@ -0,0 +1,70 @@
+/** @license MIT | @cube-dev/ui-kit v0.157.1 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useMove } from "react-aria";
+
+//#region src/components/data/TableBase/ColumnResizer.tsx
+/**
+* The grab handle on a column's trailing edge.
+*
+* `useMove` rather than raw pointer events: it normalises pointer, touch and
+* **keyboard** into one stream, so arrow keys resize without any extra work —
+* an affordance ag-grid never gave Cloud. The same hook drives `Board`'s widget
+* resizing, so the interaction model matches.
+*/
+function ColumnResizer(props) {
+	const { column, label, onResize, onResizeEnd } = props;
+	const startWidthRef = useRef(0);
+	const widthRef = useRef(0);
+	const clamp = useEvent((width) => {
+		const min = column.minWidth;
+		const max = column.maxWidth;
+		return Math.max(min, max == null ? width : Math.min(width, max));
+	});
+	const { moveProps } = useMove({
+		onMoveStart() {
+			startWidthRef.current = column.width ?? column.minWidth;
+			widthRef.current = startWidthRef.current;
+		},
+		onMove(event) {
+			const step = event.pointerType === "keyboard" ? 8 : 1;
+			widthRef.current = clamp(widthRef.current + event.deltaX * step);
+			onResize(column.key, widthRef.current);
+		},
+		onMoveEnd() {
+			onResizeEnd(column.key);
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps$1(moveProps, {
+			onClick(event) {
+				event.stopPropagation();
+			},
+			onKeyDown(event) {
+				if (event.key !== "Home" && event.key !== "End") {
+					event.stopPropagation();
+					return;
+				}
+				event.preventDefault();
+				event.stopPropagation();
+				onResize(column.key, event.key === "Home" ? column.minWidth : column.maxWidth ?? 1e3);
+				onResizeEnd(column.key);
+			}
+		}),
+		"data-element": "Resizer",
+		role: "separator",
+		tabIndex: 0,
+		"aria-label": label,
+		"aria-orientation": "vertical",
+		"aria-valuenow": column.width ?? void 0,
+		"aria-valuemin": column.minWidth,
+		"aria-valuemax": column.maxWidth ?? void 0,
+		children: /* @__PURE__ */ jsx("div", { "data-element": "ResizerLine" })
+	});
+}
+
+//#endregion
+export { ColumnResizer };
+//# sourceMappingURL=ColumnResizer.js.map

package/dist/components/data/TableBase/ColumnResizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnResizer.js","names":["mergeProps"],"sources":["../../../../src/components/data/TableBase/ColumnResizer.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMove } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { mergeProps } from '../../../utils/react';\n\nimport type { CubeResolvedColumn } from './types';\n\nexport interface ColumnResizerProps<T> {\n  column: CubeResolvedColumn<T>;\n  label: string;\n  /** Live during the drag, so the column follows the pointer. */\n  onResize: (columnKey: string, width: number) => void;\n  /** Once, when the drag or key press finishes. For persistence and callbacks. */\n  onResizeEnd: (columnKey: string) => void;\n}\n\n/**\n * The grab handle on a column's trailing edge.\n *\n * `useMove` rather than raw pointer events: it normalises pointer, touch and\n * **keyboard** into one stream, so arrow keys resize without any extra work —\n * an affordance ag-grid never gave Cloud. The same hook drives `Board`'s widget\n * resizing, so the interaction model matches.\n */\nexport function ColumnResizer<T>(props: ColumnResizerProps<T>) {\n  const { column, label, onResize, onResizeEnd } = props;\n\n  // The width the drag started from. Deltas are relative to it, so a slow drag\n  // does not accumulate rounding the way summing per-move widths would.\n  const startWidthRef = useRef(0);\n  const widthRef = useRef(0);\n\n  const clamp = useEvent((width: number) => {\n    const min = column.minWidth;\n    const max = column.maxWidth;\n\n    return Math.max(min, max == null ? width : Math.min(width, max));\n  });\n\n  const { moveProps } = useMove({\n    onMoveStart() {\n      startWidthRef.current = column.width ?? column.minWidth;\n      widthRef.current = startWidthRef.current;\n    },\n    onMove(event) {\n      // `pointer` moves carry deltas in px; keyboard moves carry ±1 per press,\n      // which would be an imperceptible step, so they are scaled to a grid unit.\n      const step = event.pointerType === 'keyboard' ? 8 : 1;\n\n      widthRef.current = clamp(widthRef.current + event.deltaX * step);\n      onResize(column.key, widthRef.current);\n    },\n    onMoveEnd() {\n      onResizeEnd(column.key);\n    },\n  });\n\n  // `mergeProps`, not spread-then-override: `useMove` implements the keyboard\n  // half of the interaction through its own `onKeyDown`, and a plain `onKeyDown`\n  // prop after the spread would silently replace it — leaving the handle\n  // draggable but not operable from the keyboard.\n  const handlerProps = mergeProps(moveProps, {\n    // The header cell sorts on click; a press on the handle is not a sort.\n    onClick(event: { stopPropagation: () => void }) {\n      event.stopPropagation();\n    },\n    onKeyDown(event: {\n      key: string;\n      preventDefault: () => void;\n      stopPropagation: () => void;\n    }) {\n      // `useMove` claims the arrows. Home/End are ours, and they are the\n      // fastest way to reach the extremes.\n      if (event.key !== 'Home' && event.key !== 'End') {\n        event.stopPropagation();\n\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n      onResize(\n        column.key,\n        event.key === 'Home' ? column.minWidth : column.maxWidth ?? 1000,\n      );\n      onResizeEnd(column.key);\n    },\n  });\n\n  return (\n    <div\n      {...handlerProps}\n      data-element=\"Resizer\"\n      // A separator is the role a resize handle takes when it splits two\n      // regions, and it is what makes the value readable to a screen reader.\n      role=\"separator\"\n      tabIndex={0}\n      aria-label={label}\n      aria-orientation=\"vertical\"\n      aria-valuenow={column.width ?? undefined}\n      aria-valuemin={column.minWidth}\n      aria-valuemax={column.maxWidth ?? undefined}\n    >\n      <div data-element=\"ResizerLine\" />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,SAAgB,cAAiB,OAA8B;CAC7D,MAAM,EAAE,QAAQ,OAAO,UAAU,gBAAgB;CAIjD,MAAM,gBAAgB,OAAO,EAAE;CAC/B,MAAM,WAAW,OAAO,EAAE;CAE1B,MAAM,QAAQ,UAAU,UAAkB;EACxC,MAAM,MAAM,OAAO;EACnB,MAAM,MAAM,OAAO;AAEnB,SAAO,KAAK,IAAI,KAAK,OAAO,OAAO,QAAQ,KAAK,IAAI,OAAO,IAAI,CAAC;GAChE;CAEF,MAAM,EAAE,cAAc,QAAQ;EAC5B,cAAc;AACZ,iBAAc,UAAU,OAAO,SAAS,OAAO;AAC/C,YAAS,UAAU,cAAc;;EAEnC,OAAO,OAAO;GAGZ,MAAM,OAAO,MAAM,gBAAgB,aAAa,IAAI;AAEpD,YAAS,UAAU,MAAM,SAAS,UAAU,MAAM,SAAS,KAAK;AAChE,YAAS,OAAO,KAAK,SAAS,QAAQ;;EAExC,YAAY;AACV,eAAY,OAAO,IAAI;;EAE1B,CAAC;AAkCF,QACE,oBAAC;EACC,GA9BiBA,aAAW,WAAW;GAEzC,QAAQ,OAAwC;AAC9C,UAAM,iBAAiB;;GAEzB,UAAU,OAIP;AAGD,QAAI,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAAO;AAC/C,WAAM,iBAAiB;AAEvB;;AAGF,UAAM,gBAAgB;AACtB,UAAM,iBAAiB;AACvB,aACE,OAAO,KACP,MAAM,QAAQ,SAAS,OAAO,WAAW,OAAO,YAAY,IAC7D;AACD,gBAAY,OAAO,IAAI;;GAE1B,CAAC;EAKE,gBAAa;EAGb,MAAK;EACL,UAAU;EACV,cAAY;EACZ,oBAAiB;EACjB,iBAAe,OAAO,SAAS;EAC/B,iBAAe,OAAO;EACtB,iBAAe,OAAO,YAAY;YAElC,oBAAC,SAAI,gBAAa,gBAAgB;GAC9B"}