@lobehub/ui 6.0.0-beta.7 → 6.0.0-beta.9

package/es/Table/render/Header.mjs

@@ -0,0 +1,184 @@
+"use client";
+import { Tooltip } from "../../Tooltip/Tooltip.mjs";
+import ActionIcon from "../../ActionIcon/ActionIcon.mjs";
+import { TableHeaderCell, TableRow } from "../atoms/cells.mjs";
+import { TableHeader } from "../atoms/layout.mjs";
+import { renderColumnTitle } from "../pipeline/columnUtils.mjs";
+import { useHeaderView, useTableView } from "./context.mjs";
+import { styles } from "../style.mjs";
+import { SelectionHeaderTitle } from "./SelectionCells.mjs";
+import { getMultiplePriority, getNextSortOrder } from "../pipeline/useSorter.mjs";
+import FilterDropdown from "./FilterDropdown.mjs";
+import { createElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import * as stylex from "@stylexjs/stylex";
+import { ArrowDownFromLine, ArrowUpDown, ArrowUpToLine } from "lucide-react";
+//#region src/Table/render/Header.tsx
+const sx = (...list) => stylex.props(...list).className;
+const sortTipOf = (next, locale) => next === "descend" ? locale.triggerDesc : next === "ascend" ? locale.triggerAsc : locale.cancelSort;
+const ariaSortOf = (order) => order === "ascend" ? "ascending" : order === "descend" ? "descending" : "none";
+const useDataHeader = (source) => {
+	const { prefixCls } = useTableView();
+	const header = useHeaderView();
+	const column = source.column;
+	const { id } = source;
+	const { filterDropdown, filters, onHeaderCell, showSorterTooltip, sortDirections, sortIcon, sorter } = column;
+	const order = sorter ? header.sortStates.find(({ key }) => key === id)?.sortOrder : void 0;
+	const titleNode = renderColumnTitle(column.title, header.titleProps);
+	const titleText = typeof titleNode === "string" || typeof titleNode === "number" ? String(titleNode) : void 0;
+	const titleContent = column.ellipsis ? /* @__PURE__ */ jsx("span", {
+		className: clsx$1(sx(styles.columnTitle), `${prefixCls}-column-title`),
+		children: titleNode
+	}) : titleNode;
+	const filterNode = filters || filterDropdown ? /* @__PURE__ */ jsx(FilterDropdown, {
+		column,
+		columnKey: id,
+		filterState: header.filterStates.find(({ key }) => key === id),
+		getPopupContainer: header.getPopupContainer,
+		label: titleText ?? id,
+		locale: header.locale,
+		triggerFilter: header.triggerFilter
+	}) : null;
+	const hasControls = Boolean(sorter) || Boolean(filterNode);
+	let sorterNode = null;
+	if (sorter) {
+		const nextOrder = getNextSortOrder(sortDirections ?? header.sortDirections, order);
+		const showTooltip = showSorterTooltip ?? header.showSorterTooltip;
+		const { target, ...tooltipOptions } = typeof showTooltip === "object" ? showTooltip : {};
+		const tooltipProps = {
+			title: sortTipOf(nextOrder, header.locale),
+			...tooltipOptions
+		};
+		const iconOnlyTooltip = Boolean(showTooltip) && target === "sorter-icon";
+		const onSort = () => header.triggerSort({
+			column,
+			key: id,
+			multiplePriority: getMultiplePriority(column),
+			sortOrder: nextOrder
+		});
+		const sortAction = /* @__PURE__ */ jsx(ActionIcon, {
+			active: Boolean(order),
+			className: clsx$1(sx(styles.sortCaret), `${prefixCls}-column-sorter`),
+			"data-order": order ?? void 0,
+			size: "small",
+			icon: sortIcon ? sortIcon({ sortOrder: order ?? null }) : order === "ascend" ? ArrowUpToLine : order === "descend" ? ArrowDownFromLine : ArrowUpDown,
+			...iconOnlyTooltip && showTooltip ? {
+				title: tooltipProps.title,
+				tooltipProps: tooltipOptions
+			} : {},
+			onClick: (event) => {
+				event.stopPropagation();
+				onSort();
+			}
+		});
+		const group = /* @__PURE__ */ jsxs("span", {
+			className: clsx$1(sx(styles.sortButton), `${prefixCls}-column-sorters`),
+			title: showTooltip ? void 0 : header.locale.sortTitle,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: sx(styles.sortTitle),
+				onClick: onSort,
+				children: titleContent
+			}), sortAction]
+		});
+		sorterNode = showTooltip && !iconOnlyTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+			...tooltipProps,
+			children: group
+		}) : group;
+	}
+	const cell = onHeaderCell?.(column);
+	return {
+		attributes: {
+			...sorter && { "aria-sort": ariaSortOf(order) },
+			...column.ellipsis && hasControls && titleText && { title: titleText },
+			...cell,
+			className: clsx$1(sorter && `${prefixCls}-column-has-sorters`, cell?.className)
+		},
+		className: order ? `${prefixCls}-column-sort` : void 0,
+		content: hasControls ? /* @__PURE__ */ jsxs("span", {
+			className: sx(styles.headerInner),
+			children: [sorterNode ?? titleContent, filterNode]
+		}) : titleContent
+	};
+};
+const DataHeaderContent = ({ children, source }) => /* @__PURE__ */ jsx(Fragment$1, { children: children(useDataHeader(source)) });
+const HeaderTitle = ({ source }) => {
+	if (source.kind === "selection") return /* @__PURE__ */ jsx(SelectionHeaderTitle, {});
+	if (source.kind === "expand" || source.kind === "placeholder") return /* @__PURE__ */ jsx(Fragment$1, { children: source.column.title });
+	return /* @__PURE__ */ jsx(DataHeaderContent, {
+		source,
+		children: (parts) => parts.content
+	});
+};
+const HeaderCell = ({ cell, fixEndDelta }) => {
+	const { components, semanticClassNames, semanticStyles } = useTableView();
+	const { source } = cell.column;
+	const column = source.column;
+	const render = (parts) => {
+		const { className: attrClassName, style: attrStyle, ...attributes } = parts.attributes;
+		return /* @__PURE__ */ jsx(TableHeaderCell, {
+			...attributes,
+			align: column.align,
+			colSpan: cell.colSpan,
+			component: components.headerCell,
+			ellipsis: column.ellipsis,
+			fixStart: cell.fixedInfo.fixStart,
+			rowSpan: cell.rowSpan,
+			scope: column.title ? cell.colSpan > 1 ? "colgroup" : "col" : void 0,
+			shadowEnd: cell.fixedInfo.shadowEnd,
+			shadowStart: cell.fixedInfo.shadowStart,
+			style: {
+				...semanticStyles.header.cell,
+				...attrStyle
+			},
+			zIndex: cell.fixedInfo.zIndex,
+			zIndexReverse: cell.fixedInfo.zIndexReverse,
+			className: clsx$1(column.className, semanticClassNames.header.cell, parts.className, attrClassName),
+			fixEnd: cell.fixedInfo.fixEnd === void 0 ? void 0 : cell.fixedInfo.fixEnd + fixEndDelta,
+			children: parts.content
+		});
+	};
+	if (source.kind === "data") return /* @__PURE__ */ jsx(DataHeaderContent, {
+		source,
+		children: render
+	});
+	return render({
+		attributes: { ...column.onHeaderCell?.(column) },
+		content: /* @__PURE__ */ jsx(HeaderTitle, { source })
+	});
+};
+const HeaderRows = ({ rows, scrollbar = 0 }) => {
+	const { components, leafColumns, prefixCls, semanticClassNames, semanticStyles } = useTableView();
+	const lastFixed = leafColumns.at(-1)?.fixed;
+	const { onHeaderRow } = useHeaderView();
+	return /* @__PURE__ */ jsx(TableHeader, {
+		className: semanticClassNames.header.wrapper,
+		component: components.headerWrapper,
+		style: semanticStyles.header.wrapper,
+		children: rows.map((cells, rowIndex) => {
+			const rowProps = onHeaderRow?.(cells.map((cell) => cell.column.source.column), rowIndex);
+			return /* @__PURE__ */ createElement(TableRow, {
+				...rowProps,
+				className: clsx$1(rowProps?.className, semanticClassNames.header.row),
+				component: components.headerRow,
+				key: rowIndex,
+				style: {
+					...rowProps?.style,
+					...semanticStyles.header.row
+				}
+			}, cells.map((cell) => /* @__PURE__ */ jsx(HeaderCell, {
+				cell,
+				fixEndDelta: scrollbar
+			}, cell.key)), scrollbar > 0 && rowIndex === 0 && /* @__PURE__ */ jsx(TableHeaderCell, {
+				className: `${prefixCls}-cell-scrollbar`,
+				component: components.headerCell,
+				fixEnd: lastFixed === "end" ? 0 : void 0,
+				rowSpan: rows.length
+			}));
+		})
+	});
+};
+//#endregion
+export { HeaderRows, HeaderTitle };
+
+//# sourceMappingURL=Header.mjs.map

package/es/Table/render/Header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.mjs","names":["clsx"],"sources":["../../../src/Table/render/Header.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ArrowDownFromLine, ArrowUpDown, ArrowUpToLine } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport Tooltip from '@/Tooltip';\n\nimport { TableHeader, TableHeaderCell, TableRow } from '../atoms';\nimport type { HeaderCellModel } from '../engine/types';\nimport { renderColumnTitle } from '../pipeline/columnUtils';\nimport type { ColumnSource } from '../pipeline/normalizeColumns';\nimport { getMultiplePriority, getNextSortOrder } from '../pipeline/useSorter';\nimport { styles } from '../style';\nimport type {\n  SortOrder,\n  TableColumn,\n  TableColumnType,\n  TableHeaderCellAttributes,\n  TableLocale,\n  TableSorterTooltipProps,\n} from '../type';\nimport { useHeaderView, useTableView } from './context';\nimport FilterDropdown from './FilterDropdown';\nimport { SelectionHeaderTitle } from './SelectionCells';\n\nconst sx = (...list: (stylex.StyleXStyles | false | null | undefined)[]) =>\n  stylex.props(...list).className;\n\nconst sortTipOf = (next: SortOrder | undefined, locale: TableLocale) =>\n  next === 'descend'\n    ? locale.triggerDesc\n    : next === 'ascend'\n      ? locale.triggerAsc\n      : locale.cancelSort;\n\nconst ariaSortOf = (order: SortOrder | undefined) =>\n  order === 'ascend' ? 'ascending' : order === 'descend' ? 'descending' : 'none';\n\ninterface HeaderParts {\n  attributes: TableHeaderCellAttributes;\n  className?: string;\n  content: ReactNode;\n}\n\nconst useDataHeader = <T,>(source: ColumnSource<T>): HeaderParts => {\n  const { prefixCls } = useTableView<T>();\n  const header = useHeaderView<T>();\n  const column = source.column as TableColumnType<T>;\n  const { id } = source;\n  const {\n    filterDropdown,\n    filters,\n    onHeaderCell,\n    showSorterTooltip,\n    sortDirections,\n    sortIcon,\n    sorter,\n  } = column;\n  const order = sorter ? header.sortStates.find(({ key }) => key === id)?.sortOrder : undefined;\n\n  const titleNode = renderColumnTitle(column.title, header.titleProps);\n  const titleText =\n    typeof titleNode === 'string' || typeof titleNode === 'number' ? String(titleNode) : undefined;\n  const titleContent = column.ellipsis ? (\n    <span className={clsx(sx(styles.columnTitle), `${prefixCls}-column-title`)}>{titleNode}</span>\n  ) : (\n    titleNode\n  );\n\n  const filterNode =\n    filters || filterDropdown ? (\n      <FilterDropdown<T>\n        column={column}\n        columnKey={id}\n        filterState={header.filterStates.find(({ key }) => key === id)}\n        getPopupContainer={header.getPopupContainer}\n        label={titleText ?? id}\n        locale={header.locale}\n        triggerFilter={header.triggerFilter}\n      />\n    ) : null;\n  const hasControls = Boolean(sorter) || Boolean(filterNode);\n\n  let sorterNode: ReactNode = null;\n  if (sorter) {\n    const nextOrder = getNextSortOrder(sortDirections ?? header.sortDirections, order);\n    const showTooltip = showSorterTooltip ?? header.showSorterTooltip;\n    const { target, ...tooltipOptions } =\n      typeof showTooltip === 'object' ? showTooltip : ({} as TableSorterTooltipProps);\n    const tooltipProps = { title: sortTipOf(nextOrder, header.locale), ...tooltipOptions };\n    const iconOnlyTooltip = Boolean(showTooltip) && target === 'sorter-icon';\n    const onSort = () =>\n      header.triggerSort({\n        column: column as TableColumn<T>,\n        key: id,\n        multiplePriority: getMultiplePriority(column as TableColumn<T>),\n        sortOrder: nextOrder,\n      });\n    const sortAction = (\n      <ActionIcon\n        active={Boolean(order)}\n        className={clsx(sx(styles.sortCaret), `${prefixCls}-column-sorter`)}\n        data-order={order ?? undefined}\n        size=\"small\"\n        icon={\n          sortIcon\n            ? sortIcon({ sortOrder: order ?? null })\n            : order === 'ascend'\n              ? ArrowUpToLine\n              : order === 'descend'\n                ? ArrowDownFromLine\n                : ArrowUpDown\n        }\n        {...(iconOnlyTooltip && showTooltip\n          ? { title: tooltipProps.title, tooltipProps: tooltipOptions }\n          : {})}\n        onClick={(event) => {\n          event.stopPropagation();\n          onSort();\n        }}\n      />\n    );\n    const group = (\n      <span\n        className={clsx(sx(styles.sortButton), `${prefixCls}-column-sorters`)}\n        title={showTooltip ? undefined : header.locale.sortTitle}\n      >\n        <span className={sx(styles.sortTitle)} onClick={onSort}>\n          {titleContent}\n        </span>\n        {sortAction}\n      </span>\n    );\n    sorterNode =\n      showTooltip && !iconOnlyTooltip ? <Tooltip {...tooltipProps}>{group}</Tooltip> : group;\n  }\n\n  const cell = onHeaderCell?.(column as TableColumn<T>);\n  return {\n    attributes: {\n      ...(sorter && { 'aria-sort': ariaSortOf(order) }),\n      ...(column.ellipsis && hasControls && titleText && { title: titleText }),\n      ...cell,\n      className: clsx(sorter && `${prefixCls}-column-has-sorters`, cell?.className),\n    },\n    className: order ? `${prefixCls}-column-sort` : undefined,\n    content: hasControls ? (\n      <span className={sx(styles.headerInner)}>\n        {sorterNode ?? titleContent}\n        {filterNode}\n      </span>\n    ) : (\n      titleContent\n    ),\n  };\n};\n\nconst DataHeaderContent = <T,>({\n  children,\n  source,\n}: {\n  children: (parts: HeaderParts) => ReactNode;\n  source: ColumnSource<T>;\n}) => <>{children(useDataHeader(source))}</>;\n\nexport const HeaderTitle = <T,>({ source }: { source: ColumnSource<T> }) => {\n  if (source.kind === 'selection') return <SelectionHeaderTitle />;\n  if (source.kind === 'expand' || source.kind === 'placeholder') {\n    return <>{(source.column as TableColumnType<T>).title as ReactNode}</>;\n  }\n  return <DataHeaderContent source={source}>{(parts) => parts.content}</DataHeaderContent>;\n};\n\nconst HeaderCell = <T,>({\n  cell,\n  fixEndDelta,\n}: {\n  cell: HeaderCellModel<ColumnSource<T>>;\n  fixEndDelta: number;\n}) => {\n  const { components, semanticClassNames, semanticStyles } = useTableView<T>();\n  const { source } = cell.column;\n  const column = source.column as TableColumnType<T>;\n\n  const render = (parts: HeaderParts) => {\n    const { className: attrClassName, style: attrStyle, ...attributes } = parts.attributes;\n    return (\n      <TableHeaderCell\n        {...(attributes as object)}\n        align={column.align}\n        colSpan={cell.colSpan}\n        component={components.headerCell}\n        ellipsis={column.ellipsis}\n        fixStart={cell.fixedInfo.fixStart}\n        rowSpan={cell.rowSpan}\n        scope={column.title ? (cell.colSpan > 1 ? 'colgroup' : 'col') : undefined}\n        shadowEnd={cell.fixedInfo.shadowEnd}\n        shadowStart={cell.fixedInfo.shadowStart}\n        style={{ ...semanticStyles.header.cell, ...attrStyle }}\n        zIndex={cell.fixedInfo.zIndex}\n        zIndexReverse={cell.fixedInfo.zIndexReverse}\n        className={clsx(\n          column.className,\n          semanticClassNames.header.cell,\n          parts.className,\n          attrClassName,\n        )}\n        fixEnd={\n          cell.fixedInfo.fixEnd === undefined ? undefined : cell.fixedInfo.fixEnd + fixEndDelta\n        }\n      >\n        {parts.content}\n      </TableHeaderCell>\n    );\n  };\n\n  if (source.kind === 'data') {\n    return <DataHeaderContent source={source}>{render}</DataHeaderContent>;\n  }\n  return render({\n    attributes: { ...column.onHeaderCell?.(column as TableColumn<T>) },\n    content: <HeaderTitle source={source} />,\n  });\n};\n\nexport const HeaderRows = <T,>({\n  rows,\n  scrollbar = 0,\n}: {\n  rows: readonly HeaderCellModel<ColumnSource<T>>[][];\n  scrollbar?: number;\n}) => {\n  const { components, leafColumns, prefixCls, semanticClassNames, semanticStyles } =\n    useTableView<T>();\n  const lastFixed = leafColumns.at(-1)?.fixed;\n  const { onHeaderRow } = useHeaderView<T>();\n  return (\n    <TableHeader\n      className={semanticClassNames.header.wrapper}\n      component={components.headerWrapper}\n      style={semanticStyles.header.wrapper}\n    >\n      {rows.map((cells, rowIndex) => {\n        const rowProps = onHeaderRow?.(\n          cells.map((cell) => cell.column.source.column as TableColumn<T>),\n          rowIndex,\n        );\n        return (\n          <TableRow\n            {...rowProps}\n            className={clsx(rowProps?.className, semanticClassNames.header.row)}\n            component={components.headerRow}\n            key={rowIndex}\n            style={{ ...rowProps?.style, ...semanticStyles.header.row }}\n          >\n            {cells.map((cell) => (\n              <HeaderCell cell={cell} fixEndDelta={scrollbar} key={cell.key} />\n            ))}\n            {scrollbar > 0 && rowIndex === 0 && (\n              <TableHeaderCell\n                className={`${prefixCls}-cell-scrollbar`}\n                component={components.headerCell}\n                fixEnd={lastFixed === 'end' ? 0 : undefined}\n                rowSpan={rows.length}\n              />\n            )}\n          </TableRow>\n        );\n      })}\n    </TableHeader>\n  );\n};\n"],"mappings":"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"}

package/es/Table/render/LoadingSkeleton.mjs

@@ -0,0 +1,78 @@
+"use client";
+import Skeleton from "../../Skeleton/index.mjs";
+import { isColumnGroup, isColumnVisibleAt } from "../pipeline/columnUtils.mjs";
+import { styles } from "../style.mjs";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/Table/render/LoadingSkeleton.tsx
+const DEFAULT_ROWS = 5;
+const CELL_WIDTHS = [
+	72,
+	56,
+	64,
+	48,
+	80,
+	40,
+	60,
+	52
+];
+const resolveTrack = (width) => {
+	if (typeof width === "number") return `${width}px`;
+	if (typeof width === "string" && width) return width;
+	return "minmax(0, 1fr)";
+};
+const leafColumns = (columns, screens) => columns.flatMap((column) => {
+	if (!isColumnVisibleAt(column, screens)) return [];
+	if (isColumnGroup(column)) return leafColumns(column.children, screens);
+	return [column];
+});
+function TableLoadingSkeletonInner({ columns, expandColumn = false, rows = DEFAULT_ROWS, screens, selectionColumn = false, size }) {
+	const tracks = useMemo(() => {
+		const list = [];
+		if (selectionColumn) list.push(`32px`);
+		if (expandColumn) list.push(`48px`);
+		const leaves = leafColumns(columns, screens);
+		if (leaves.length === 0) list.push("minmax(0, 1.4fr)", "minmax(0, 1fr)", "minmax(0, 0.8fr)", "minmax(0, 1fr)");
+		else leaves.forEach((column) => list.push(resolveTrack(column.width)));
+		return list;
+	}, [
+		columns,
+		expandColumn,
+		screens,
+		selectionColumn
+	]);
+	const gridTemplateColumns = tracks.join(" ");
+	const rowCount = Math.max(1, rows);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		...stylex.props(styles.skeleton),
+		"data-table-skeleton": "",
+		"data-table-skeleton-size": size === "middle" ? "medium" : size,
+		children: Array.from({ length: rowCount }, (_, rowIndex) => /* @__PURE__ */ jsx("div", {
+			...stylex.props(styles.skeletonRow),
+			style: { gridTemplateColumns },
+			children: tracks.map((_, colIndex) => {
+				const isLeading = selectionColumn && colIndex === 0 || expandColumn && colIndex === (selectionColumn ? 1 : 0);
+				const widthPct = isLeading ? 100 : CELL_WIDTHS[(rowIndex * 3 + colIndex) % CELL_WIDTHS.length];
+				return /* @__PURE__ */ jsx("div", {
+					...stylex.props(styles.skeletonCell),
+					children: isLeading ? /* @__PURE__ */ jsx(Skeleton, {
+						height: 14,
+						radius: 4,
+						width: 14
+					}) : /* @__PURE__ */ jsx(Skeleton, {
+						height: 14,
+						radius: 4,
+						width: `${widthPct}%`
+					})
+				}, colIndex);
+			})
+		}, rowIndex))
+	});
+}
+const TableLoadingSkeleton = memo(TableLoadingSkeletonInner);
+//#endregion
+export { TableLoadingSkeleton as default };
+
+//# sourceMappingURL=LoadingSkeleton.mjs.map

package/es/Table/render/LoadingSkeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSkeleton.mjs","names":[],"sources":["../../../src/Table/render/LoadingSkeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo, useMemo } from 'react';\n\nimport Skeleton from '@/Skeleton';\n\nimport { EXPAND_COLUMN_WIDTH, SELECTION_COLUMN_WIDTH } from '../constants';\nimport { isColumnGroup, isColumnVisibleAt } from '../pipeline/columnUtils';\nimport { styles } from '../style';\nimport type { TableBreakpoint, TableColumn, TableSize } from '../type';\n\nconst DEFAULT_ROWS = 5;\n\nconst CELL_WIDTHS = [72, 56, 64, 48, 80, 40, 60, 52] as const;\n\nexport interface TableLoadingSkeletonProps<T = any> {\n  columns: readonly TableColumn<T>[];\n  expandColumn?: boolean;\n  rows?: number;\n  screens: ReadonlySet<TableBreakpoint> | null;\n  selectionColumn?: boolean;\n  size: TableSize;\n}\n\nconst resolveTrack = (width: TableColumn<any>['width']) => {\n  if (typeof width === 'number') return `${width}px`;\n  if (typeof width === 'string' && width) return width;\n  return 'minmax(0, 1fr)';\n};\n\nconst leafColumns = <T,>(\n  columns: readonly TableColumn<T>[],\n  screens: ReadonlySet<TableBreakpoint> | null,\n): TableColumn<T>[] =>\n  columns.flatMap((column) => {\n    if (!isColumnVisibleAt(column, screens)) return [];\n    if (isColumnGroup(column)) return leafColumns(column.children, screens);\n    return [column];\n  });\n\nfunction TableLoadingSkeletonInner<T>({\n  columns,\n  expandColumn = false,\n  rows = DEFAULT_ROWS,\n  screens,\n  selectionColumn = false,\n  size,\n}: TableLoadingSkeletonProps<T>) {\n  const tracks = useMemo(() => {\n    const list: string[] = [];\n    if (selectionColumn) list.push(`${SELECTION_COLUMN_WIDTH}px`);\n    if (expandColumn) list.push(`${EXPAND_COLUMN_WIDTH}px`);\n    const leaves = leafColumns(columns, screens);\n    if (leaves.length === 0) {\n      list.push('minmax(0, 1.4fr)', 'minmax(0, 1fr)', 'minmax(0, 0.8fr)', 'minmax(0, 1fr)');\n    } else {\n      leaves.forEach((column) => list.push(resolveTrack(column.width)));\n    }\n    return list;\n  }, [columns, expandColumn, screens, selectionColumn]);\n\n  const gridTemplateColumns = tracks.join(' ');\n  const rowCount = Math.max(1, rows);\n\n  return (\n    <div\n      aria-hidden\n      {...stylex.props(styles.skeleton)}\n      data-table-skeleton=\"\"\n      data-table-skeleton-size={size === 'middle' ? 'medium' : size}\n    >\n      {Array.from({ length: rowCount }, (_, rowIndex) => (\n        <div key={rowIndex} {...stylex.props(styles.skeletonRow)} style={{ gridTemplateColumns }}>\n          {tracks.map((_, colIndex) => {\n            const leadingSelection = selectionColumn && colIndex === 0;\n            const leadingExpand = expandColumn && colIndex === (selectionColumn ? 1 : 0);\n            const isLeading = leadingSelection || leadingExpand;\n            const widthPct = isLeading\n              ? 100\n              : CELL_WIDTHS[(rowIndex * 3 + colIndex) % CELL_WIDTHS.length];\n            return (\n              <div key={colIndex} {...stylex.props(styles.skeletonCell)}>\n                {isLeading ? (\n                  <Skeleton height={14} radius={4} width={14} />\n                ) : (\n                  <Skeleton height={14} radius={4} width={`${widthPct}%`} />\n                )}\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nconst TableLoadingSkeleton = memo(TableLoadingSkeletonInner) as typeof TableLoadingSkeletonInner;\n\nexport default TableLoadingSkeleton;\n"],"mappings":";;;;;;;;AASA,MAAM,eAAe;AACrB,MAAM,cAAc;CAAC;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;AAAE;AASnD,MAAM,gBAAgB,UAAqC;CACzD,IAAI,OAAO,UAAU,UAAU,OAAO,GAAG,MAAM;CAC/C,IAAI,OAAO,UAAU,YAAY,OAAO,OAAO;CAC/C,OAAO;AACT;AACA,MAAM,eAAmB,SAAoC,YAAmE,QAAQ,SAAQ,WAAU;CACxJ,IAAI,CAAC,kBAAkB,QAAQ,OAAO,GAAG,OAAO,CAAC;CACjD,IAAI,cAAc,MAAM,GAAG,OAAO,YAAY,OAAO,UAAU,OAAO;CACtE,OAAO,CAAC,MAAM;AAChB,CAAC;AACD,SAAS,0BAA6B,EACpC,SACA,eAAe,OACf,OAAO,cACP,SACA,kBAAkB,OAClB,QAC+B;CAC/B,MAAM,SAAS,cAAc;EAC3B,MAAM,OAAiB,CAAC;EACxB,IAAI,iBAAiB,KAAK,KAAK,MAA6B;EAC5D,IAAI,cAAc,KAAK,KAAK,MAA0B;EACtD,MAAM,SAAS,YAAY,SAAS,OAAO;EAC3C,IAAI,OAAO,WAAW,GACpB,KAAK,KAAK,oBAAoB,kBAAkB,oBAAoB,gBAAgB;OAEpF,OAAO,SAAQ,WAAU,KAAK,KAAK,aAAa,OAAO,KAAK,CAAC,CAAC;EAEhE,OAAO;CACT,GAAG;EAAC;EAAS;EAAc;EAAS;CAAe,CAAC;CACpD,MAAM,sBAAsB,OAAO,KAAK,GAAG;CAC3C,MAAM,WAAW,KAAK,IAAI,GAAG,IAAI;CACjC,OAAO,oBAAC,OAAD;EAAK,eAAA;EAAY,GAAI,OAAO,MAAM,OAAO,QAAQ;EAAG,uBAAoB;EAAG,4BAA0B,SAAS,WAAW,WAAW;EACtI,UAAA,MAAM,KAAK,EACZ,QAAQ,SACV,IAAI,GAAG,aAAa,oBAAC,OAAD;GAAoB,GAAI,OAAO,MAAM,OAAO,WAAW;GAAG,OAAO,EACnF,oBACF;GACO,UAAA,OAAO,KAAK,GAAG,aAAa;IAG/B,MAAM,YAFmB,mBAAmB,aAAa,KACnC,gBAAgB,cAAc,kBAAkB,IAAI;IAE1E,MAAM,WAAW,YAAY,MAAM,aAAa,WAAW,IAAI,YAAY,YAAY;IACvF,OAAO,oBAAC,OAAD;KAAoB,GAAI,OAAO,MAAM,OAAO,YAAY;KACtD,UAAA,YAAY,oBAAC,UAAD;MAAU,QAAQ;MAAI,QAAQ;MAAG,OAAO;KAAK,CAAA,IAAI,oBAAC,UAAD;MAAU,QAAQ;MAAI,QAAQ;MAAG,OAAO,GAAG,SAAS;KAAK,CAAA;IACpH,GAFM,QAEN;GACb,CAAC;EACM,GAZqB,QAYrB,CAAC;CACL,CAAA;AACT;AACA,MAAM,uBAAuB,KAAK,yBAAyB"}

package/es/Table/render/PaginationBar.mjs

@@ -0,0 +1,71 @@
+"use client";
+import Pagination from "../../Pagination/Pagination.mjs";
+import { PREFIX_CLS } from "../constants.mjs";
+import { styles } from "../style.mjs";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import * as stylex from "@stylexjs/stylex";
+//#region src/Table/render/PaginationBar.tsx
+const alignStyles = {
+	center: styles.paginationCenter,
+	end: styles.paginationEnd,
+	start: styles.paginationStart
+};
+const normalizePlacement = (placement) => {
+	const lower = placement.toLowerCase();
+	if (lower.includes("center")) return "center";
+	return lower.includes("left") || lower.includes("start") ? "start" : "end";
+};
+const renderPaginationBars = ({ classNames: semanticClassNames, config, onChange, page, size, styles: semanticStyles, total }) => {
+	const { className, classNames, current: _current, defaultCurrent: _defaultCurrent, defaultPageSize: _defaultPageSize, onChange: _onChange, onShowSizeChange: _onShowSizeChange, pageSize: _pageSize, placement, size: paginationSize, styles: paginationStyles, total: _total, ...rest } = config;
+	const pageCount = Math.ceil(total / page.pageSize);
+	if (total <= 0 || rest.hideOnSinglePage && pageCount <= 1) return {
+		bottom: null,
+		top: null
+	};
+	const render = (align, side) => /* @__PURE__ */ jsx("div", {
+		className: clsx$1(stylex.props(styles.pagination, side === "top" && styles.paginationTop, alignStyles[align]).className, `${PREFIX_CLS}-pagination-wrapper`),
+		children: /* @__PURE__ */ jsx(Pagination, {
+			...rest,
+			className: clsx$1(`${PREFIX_CLS}-pagination`, `${PREFIX_CLS}-pagination-${align}`, className),
+			current: page.pageIndex + 1,
+			pageSize: page.pageSize,
+			size: paginationSize ?? (size && size !== "large" ? "small" : void 0),
+			total,
+			classNames: {
+				item: clsx$1(semanticClassNames.item, classNames?.item),
+				root: clsx$1(semanticClassNames.root, classNames?.root)
+			},
+			styles: {
+				item: {
+					...paginationStyles?.item,
+					...semanticStyles.item
+				},
+				root: {
+					...paginationStyles?.root,
+					...semanticStyles.root
+				}
+			},
+			onChange: (next, nextPageSize) => onChange({
+				pageIndex: next - 1,
+				pageSize: nextPageSize
+			})
+		})
+	});
+	if (!placement) return {
+		bottom: render("end", "bottom"),
+		top: null
+	};
+	const find = (side) => placement.find((item) => item.includes(side));
+	const top = find("top");
+	const bottom = find("bottom");
+	const none = placement.every((item) => item === "none");
+	return {
+		bottom: bottom ? render(normalizePlacement(bottom), "bottom") : !top && !none ? render("end", "bottom") : null,
+		top: top ? render(normalizePlacement(top), "top") : null
+	};
+};
+//#endregion
+export { renderPaginationBars };
+
+//# sourceMappingURL=PaginationBar.mjs.map

package/es/Table/render/PaginationBar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationBar.mjs","names":["clsx"],"sources":["../../../src/Table/render/PaginationBar.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport Pagination, { type PaginationAlign } from '@/Pagination';\nimport type { PaginationSemanticName } from '@/Pagination/type';\n\nimport { PREFIX_CLS } from '../constants';\nimport type { PaginationState } from '../pipeline/useTableState';\nimport { styles } from '../style';\nimport type { TablePaginationConfig, TableSize } from '../type';\n\nconst alignStyles = {\n  center: styles.paginationCenter,\n  end: styles.paginationEnd,\n  start: styles.paginationStart,\n};\n\nconst normalizePlacement = (placement: string): PaginationAlign => {\n  const lower = placement.toLowerCase();\n  if (lower.includes('center')) return 'center';\n  return lower.includes('left') || lower.includes('start') ? 'start' : 'end';\n};\n\ninterface PaginationBarsProps {\n  classNames: Partial<Record<PaginationSemanticName, string>>;\n  config: TablePaginationConfig;\n  onChange: (next: PaginationState) => void;\n  page: PaginationState;\n  size?: TableSize;\n  styles: Partial<Record<PaginationSemanticName, CSSProperties>>;\n  total: number;\n}\n\nexport const renderPaginationBars = ({\n  classNames: semanticClassNames,\n  config,\n  onChange,\n  page,\n  size,\n  styles: semanticStyles,\n  total,\n}: PaginationBarsProps): { bottom: ReactNode; top: ReactNode } => {\n  const {\n    className,\n    classNames,\n    current: _current,\n    defaultCurrent: _defaultCurrent,\n    defaultPageSize: _defaultPageSize,\n    onChange: _onChange,\n    onShowSizeChange: _onShowSizeChange,\n    pageSize: _pageSize,\n    placement,\n    size: paginationSize,\n    styles: paginationStyles,\n    total: _total,\n    ...rest\n  } = config;\n  const pageCount = Math.ceil(total / page.pageSize);\n  if (total <= 0 || (rest.hideOnSinglePage && pageCount <= 1)) return { bottom: null, top: null };\n\n  const render = (align: PaginationAlign, side: 'top' | 'bottom') => (\n    <div\n      className={clsx(\n        stylex.props(styles.pagination, side === 'top' && styles.paginationTop, alignStyles[align])\n          .className,\n        `${PREFIX_CLS}-pagination-wrapper`,\n      )}\n    >\n      <Pagination\n        {...rest}\n        className={clsx(`${PREFIX_CLS}-pagination`, `${PREFIX_CLS}-pagination-${align}`, className)}\n        current={page.pageIndex + 1}\n        pageSize={page.pageSize}\n        size={paginationSize ?? (size && size !== 'large' ? 'small' : undefined)}\n        total={total}\n        classNames={{\n          item: clsx(semanticClassNames.item, classNames?.item),\n          root: clsx(semanticClassNames.root, classNames?.root),\n        }}\n        styles={{\n          item: { ...paginationStyles?.item, ...semanticStyles.item },\n          root: { ...paginationStyles?.root, ...semanticStyles.root },\n        }}\n        onChange={(next, nextPageSize) => onChange({ pageIndex: next - 1, pageSize: nextPageSize })}\n      />\n    </div>\n  );\n\n  if (!placement) return { bottom: render('end', 'bottom'), top: null };\n  const find = (side: string) => placement.find((item) => item.includes(side));\n  const top = find('top');\n  const bottom = find('bottom');\n  const none = placement.every((item) => item === 'none');\n  return {\n    bottom: bottom\n      ? render(normalizePlacement(bottom), 'bottom')\n      : !top && !none\n        ? render('end', 'bottom')\n        : null,\n    top: top ? render(normalizePlacement(top), 'top') : null,\n  };\n};\n"],"mappings":";;;;;;;;AAWA,MAAM,cAAc;CAClB,QAAQ,OAAO;CACf,KAAK,OAAO;CACZ,OAAO,OAAO;AAChB;AACA,MAAM,sBAAsB,cAAuC;CACjE,MAAM,QAAQ,UAAU,YAAY;CACpC,IAAI,MAAM,SAAS,QAAQ,GAAG,OAAO;CACrC,OAAO,MAAM,SAAS,MAAM,KAAK,MAAM,SAAS,OAAO,IAAI,UAAU;AACvE;AAUA,MAAa,wBAAwB,EACnC,YAAY,oBACZ,QACA,UACA,MACA,MACA,QAAQ,gBACR,YAIG;CACH,MAAM,EACJ,WACA,YACA,SAAS,UACT,gBAAgB,iBAChB,iBAAiB,kBACjB,UAAU,WACV,kBAAkB,mBAClB,UAAU,WACV,WACA,MAAM,gBACN,QAAQ,kBACR,OAAO,QACP,GAAG,SACD;CACJ,MAAM,YAAY,KAAK,KAAK,QAAQ,KAAK,QAAQ;CACjD,IAAI,SAAS,KAAK,KAAK,oBAAoB,aAAa,GAAG,OAAO;EAChE,QAAQ;EACR,KAAK;CACP;CACA,MAAM,UAAU,OAAwB,SAA2B,oBAAC,OAAD;EAAK,WAAWA,OAAK,OAAO,MAAM,OAAO,YAAY,SAAS,SAAS,OAAO,eAAe,YAAY,MAAM,CAAC,CAAC,WAAW,GAAG,WAAW,oBAAoB;EAC7N,UAAA,oBAAC,YAAD;GAAY,GAAI;GAAM,WAAWA,OAAK,GAAG,WAAW,cAAc,GAAG,WAAW,cAAc,SAAS,SAAS;GAAG,SAAS,KAAK,YAAY;GAAG,UAAU,KAAK;GAAU,MAAM,mBAAmB,QAAQ,SAAS,UAAU,UAAU,KAAA;GAAmB;GAAO,YAAY;IAC7Q,MAAMA,OAAK,mBAAmB,MAAM,YAAY,IAAI;IACpD,MAAMA,OAAK,mBAAmB,MAAM,YAAY,IAAI;GACtD;GAAG,QAAQ;IACT,MAAM;KACJ,GAAG,kBAAkB;KACrB,GAAG,eAAe;IACpB;IACA,MAAM;KACJ,GAAG,kBAAkB;KACrB,GAAG,eAAe;IACpB;GACF;GAAG,WAAW,MAAM,iBAAiB,SAAS;IAC5C,WAAW,OAAO;IAClB,UAAU;GACZ,CAAC;EAAI,CAAA;CACA,CAAA;CACP,IAAI,CAAC,WAAW,OAAO;EACrB,QAAQ,OAAO,OAAO,QAAQ;EAC9B,KAAK;CACP;CACA,MAAM,QAAQ,SAAiB,UAAU,MAAK,SAAQ,KAAK,SAAS,IAAI,CAAC;CACzE,MAAM,MAAM,KAAK,KAAK;CACtB,MAAM,SAAS,KAAK,QAAQ;CAC5B,MAAM,OAAO,UAAU,OAAM,SAAQ,SAAS,MAAM;CACpD,OAAO;EACL,QAAQ,SAAS,OAAO,mBAAmB,MAAM,GAAG,QAAQ,IAAI,CAAC,OAAO,CAAC,OAAO,OAAO,OAAO,QAAQ,IAAI;EAC1G,KAAK,MAAM,OAAO,mBAAmB,GAAG,GAAG,KAAK,IAAI;CACtD;AACF"}

package/es/Table/render/SelectionCells.mjs

@@ -0,0 +1,111 @@
+"use client";
+import ActionIcon from "../../ActionIcon/ActionIcon.mjs";
+import DropdownMenu from "../../DropdownMenu/DropdownMenu.mjs";
+import Checkbox_default from "../../Checkbox/Checkbox.mjs";
+import Radio from "../../Radio/Radio.mjs";
+import { PREFIX_CLS } from "../constants.mjs";
+import { useSelectionView } from "./context.mjs";
+import { styles } from "../style.mjs";
+import { useRowHalfSelected, useRowSelected, useSelectionSummary } from "../store/hooks.mjs";
+import { CellShell, isRenderedCell } from "./CellShell.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import * as stylex from "@stylexjs/stylex";
+import { ChevronDown } from "lucide-react";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/Table/render/SelectionCells.tsx
+const SelectionBodyCell = ({ index, leaf, record, renderIndex, rowKey }) => {
+	const selection = useSelectionView();
+	const checked = useRowSelected(rowKey);
+	const halfChecked = useRowHalfSelected(rowKey);
+	const checkboxProps = selection.checkboxPropsMap.get(rowKey) || {};
+	const { onChange: onBoxChange, onClick: onBoxClick, ...boxProps } = checkboxProps;
+	const handleClick = (event) => {
+		event.stopPropagation();
+		onBoxClick?.(event);
+	};
+	let node;
+	if (selection.type === "radio") {
+		const { classNames: _classNames, indeterminate: _indeterminate, shape: _shape, styles: _styles, ...radioProps } = boxProps;
+		node = /* @__PURE__ */ jsx(RadioGroup, {
+			className: stylex.props(styles.selectionRadioGroup).className,
+			value: checked ? "selected" : null,
+			onValueChange: (_value, details) => {
+				selection.actions.selectRadio(rowKey, details.event);
+				onBoxChange?.(true);
+			},
+			children: /* @__PURE__ */ jsx(Radio, {
+				"aria-label": `Select row ${renderIndex + 1}`,
+				...radioProps,
+				value: "selected",
+				onClick: handleClick
+			})
+		});
+	} else {
+		const indeterminate = selection.expandType === "nest" ? halfChecked : checkboxProps.indeterminate ?? halfChecked;
+		node = /* @__PURE__ */ jsx(Checkbox_default, {
+			"aria-label": checked ? `Row ${renderIndex + 1} selected` : `Select row ${renderIndex + 1}`,
+			...boxProps,
+			checked,
+			indeterminate,
+			onClick: handleClick,
+			onChange: (_next, details) => {
+				selection.actions.toggleCheckbox(rowKey, checked, details?.event);
+				onBoxChange?.(!checked);
+			}
+		});
+	}
+	const custom = selection.renderCell ? selection.renderCell(checked, record, renderIndex, node) : node;
+	const [childNode, legacyCellProps] = isRenderedCell(custom) ? [custom.children, custom.props] : [custom, void 0];
+	return /* @__PURE__ */ jsx(CellShell, {
+		index,
+		leaf,
+		legacyCellProps,
+		record,
+		children: childNode
+	});
+};
+const SelectionHeaderTitle = () => {
+	const selection = useSelectionView();
+	const summary = useSelectionSummary();
+	if (selection.type === "radio") return typeof selection.title === "function" ? selection.title(null) : selection.title ?? null;
+	const customizeSelections = selection.selections ? /* @__PURE__ */ jsx("div", {
+		className: clsx$1(stylex.props(styles.selectionExtra).className, `${PREFIX_CLS}-selection-extra`),
+		children: /* @__PURE__ */ jsx(DropdownMenu, {
+			items: selection.selections.map(({ key, onSelect, text }) => ({
+				key,
+				label: text,
+				onClick: onSelect
+			})),
+			children: /* @__PURE__ */ jsx(ActionIcon, {
+				"aria-label": "Selection options",
+				className: stylex.props(styles.selectionTrigger).className,
+				icon: ChevronDown,
+				size: "small"
+			})
+		})
+	}) : null;
+	const { disabled: titleDisabled, onChange: onTitleChange, ...titleCheckboxProps } = selection.getTitleCheckboxProps?.() || {};
+	const { locale } = selection;
+	const checkbox = /* @__PURE__ */ jsx(Checkbox_default, {
+		"aria-label": customizeSelections ? "Custom selection" : typeof locale.selectAll === "string" ? locale.selectAll : void 0,
+		...titleCheckboxProps,
+		checked: summary.checked,
+		disabled: titleDisabled ?? summary.disabled,
+		indeterminate: summary.indeterminate,
+		onChange: (next) => {
+			selection.actions.selectAll();
+			onTitleChange?.(next);
+		}
+	});
+	if (selection.title) return typeof selection.title === "function" ? selection.title(checkbox) : selection.title;
+	if (selection.hideSelectAll) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx$1(stylex.props(styles.selection).className, `${PREFIX_CLS}-selection`),
+		children: [checkbox, customizeSelections]
+	});
+};
+//#endregion
+export { SelectionBodyCell, SelectionHeaderTitle };
+
+//# sourceMappingURL=SelectionCells.mjs.map

package/es/Table/render/SelectionCells.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionCells.mjs","names":["BaseRadioGroup","Checkbox","clsx"],"sources":["../../../src/Table/render/SelectionCells.tsx"],"sourcesContent":["'use client';\n\nimport { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronDown } from 'lucide-react';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Checkbox } from '@/Checkbox';\nimport DropdownMenu from '@/DropdownMenu';\nimport { Radio } from '@/Radio';\n\nimport { PREFIX_CLS } from '../constants';\nimport { useRowHalfSelected, useRowSelected, useSelectionSummary } from '../store/hooks';\nimport { styles } from '../style';\nimport type { TableCellAttributes } from '../type';\nimport { type BodyCellProps, CellShell, isRenderedCell } from './CellShell';\nimport { useSelectionView } from './context';\n\nexport const SelectionBodyCell = <T,>({\n  index,\n  leaf,\n  record,\n  renderIndex,\n  rowKey,\n}: BodyCellProps<T>) => {\n  const selection = useSelectionView<T>();\n  const checked = useRowSelected(rowKey);\n  const halfChecked = useRowHalfSelected(rowKey);\n  const checkboxProps = selection.checkboxPropsMap.get(rowKey) || {};\n  const { onChange: onBoxChange, onClick: onBoxClick, ...boxProps } = checkboxProps;\n  const handleClick = (event: MouseEvent<HTMLElement>) => {\n    event.stopPropagation();\n    (onBoxClick as ((event: MouseEvent<HTMLElement>) => void) | undefined)?.(event);\n  };\n\n  let node: ReactNode;\n  if (selection.type === 'radio') {\n    const {\n      classNames: _classNames,\n      indeterminate: _indeterminate,\n      shape: _shape,\n      styles: _styles,\n      ...radioProps\n    } = boxProps;\n    node = (\n      <BaseRadioGroup\n        className={stylex.props(styles.selectionRadioGroup).className}\n        value={checked ? 'selected' : null}\n        onValueChange={(_value, details) => {\n          selection.actions.selectRadio(rowKey, details.event as Event);\n          onBoxChange?.(true);\n        }}\n      >\n        <Radio\n          aria-label={`Select row ${renderIndex + 1}`}\n          {...(radioProps as object)}\n          value=\"selected\"\n          onClick={handleClick}\n        />\n      </BaseRadioGroup>\n    );\n  } else {\n    const indeterminate =\n      selection.expandType === 'nest' ? halfChecked : (checkboxProps.indeterminate ?? halfChecked);\n    node = (\n      <Checkbox\n        aria-label={checked ? `Row ${renderIndex + 1} selected` : `Select row ${renderIndex + 1}`}\n        {...boxProps}\n        checked={checked}\n        indeterminate={indeterminate}\n        onClick={handleClick}\n        onChange={(_next: boolean, details?: { event?: Event }) => {\n          selection.actions.toggleCheckbox(rowKey, checked, details?.event);\n          onBoxChange?.(!checked);\n        }}\n      />\n    );\n  }\n\n  const custom = selection.renderCell\n    ? selection.renderCell(checked, record, renderIndex, node)\n    : node;\n  const [childNode, legacyCellProps] = isRenderedCell(custom)\n    ? [custom.children, custom.props as TableCellAttributes | undefined]\n    : [custom as ReactNode, undefined];\n\n  return (\n    <CellShell index={index} leaf={leaf} legacyCellProps={legacyCellProps} record={record}>\n      {childNode}\n    </CellShell>\n  );\n};\n\nexport const SelectionHeaderTitle = () => {\n  const selection = useSelectionView();\n  const summary = useSelectionSummary();\n  if (selection.type === 'radio') {\n    return typeof selection.title === 'function'\n      ? selection.title(null)\n      : (selection.title ?? null);\n  }\n\n  const customizeSelections = selection.selections ? (\n    <div\n      className={clsx(\n        stylex.props(styles.selectionExtra).className,\n        `${PREFIX_CLS}-selection-extra`,\n      )}\n    >\n      <DropdownMenu\n        items={selection.selections.map(({ key, onSelect, text }) => ({\n          key,\n          label: text,\n          onClick: onSelect,\n        }))}\n      >\n        <ActionIcon\n          aria-label=\"Selection options\"\n          className={stylex.props(styles.selectionTrigger).className}\n          icon={ChevronDown}\n          size=\"small\"\n        />\n      </DropdownMenu>\n    </div>\n  ) : null;\n\n  const {\n    disabled: titleDisabled,\n    onChange: onTitleChange,\n    ...titleCheckboxProps\n  } = selection.getTitleCheckboxProps?.() || {};\n  const { locale } = selection;\n  const checkbox = (\n    <Checkbox\n      aria-label={\n        customizeSelections\n          ? 'Custom selection'\n          : typeof locale.selectAll === 'string'\n            ? locale.selectAll\n            : undefined\n      }\n      {...titleCheckboxProps}\n      checked={summary.checked}\n      disabled={titleDisabled ?? summary.disabled}\n      indeterminate={summary.indeterminate}\n      onChange={(next) => {\n        selection.actions.selectAll();\n        onTitleChange?.(next);\n      }}\n    />\n  );\n\n  if (selection.title) {\n    return typeof selection.title === 'function' ? selection.title(checkbox) : selection.title;\n  }\n  if (selection.hideSelectAll) return null;\n  return (\n    <div className={clsx(stylex.props(styles.selection).className, `${PREFIX_CLS}-selection`)}>\n      {checkbox}\n      {customizeSelections}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/es/Table/render/StickyScrollBar.mjs

@@ -0,0 +1,99 @@
+"use client";
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/Table/render/StickyScrollBar.tsx
+const getContainerBottom = (container) => container === window ? window.innerHeight : container.getBoundingClientRect().bottom;
+const StickyScrollBar = ({ bodyRef, container, offsetScroll, onScroll, prefixCls, ref }) => {
+	const [state, setState] = useState({
+		hidden: true,
+		scrollLeft: 0
+	});
+	const dragRef = useRef(null);
+	const body = bodyRef.current;
+	const scrollWidth = body?.scrollWidth ?? 0;
+	const clientWidth = body?.clientWidth ?? 0;
+	const barWidth = scrollWidth ? clientWidth * (clientWidth / scrollWidth) : 0;
+	const barLeft = scrollWidth ? state.scrollLeft / scrollWidth * clientWidth : 0;
+	const checkVisible = () => {
+		const element = bodyRef.current;
+		if (!element) return;
+		const rect = element.getBoundingClientRect();
+		const bottom = getContainerBottom(container);
+		const hidden = element.scrollWidth <= element.clientWidth || rect.bottom - offsetScroll <= bottom || rect.top >= bottom - offsetScroll;
+		setState((previous) => previous.hidden === hidden && previous.scrollLeft === element.scrollLeft ? previous : {
+			hidden,
+			scrollLeft: element.scrollLeft
+		});
+	};
+	useImperativeHandle(ref, () => ({
+		checkVisible,
+		setScrollLeft: (left) => setState((previous) => previous.scrollLeft === left ? previous : {
+			...previous,
+			scrollLeft: left
+		})
+	}));
+	useEffect(() => {
+		const onChange = () => checkVisible();
+		container.addEventListener("scroll", onChange, false);
+		window.addEventListener("resize", onChange, false);
+		onChange();
+		return () => {
+			container.removeEventListener("scroll", onChange, false);
+			window.removeEventListener("resize", onChange, false);
+		};
+	}, [container, offsetScroll]);
+	useEffect(() => {
+		const onMove = (event) => {
+			const drag = dragRef.current;
+			const element = bodyRef.current;
+			if (!drag || !element || !clientWidth) return;
+			const left = drag.left + (event.pageX - drag.x);
+			const max = element.scrollWidth - element.clientWidth;
+			onScroll({
+				currentTarget: element,
+				scrollLeft: Math.min(Math.max(left / clientWidth * element.scrollWidth, 0), max)
+			});
+		};
+		const onUp = () => {
+			dragRef.current = null;
+		};
+		document.addEventListener("mousemove", onMove);
+		document.addEventListener("mouseup", onUp);
+		return () => {
+			document.removeEventListener("mousemove", onMove);
+			document.removeEventListener("mouseup", onUp);
+		};
+	}, [
+		bodyRef,
+		clientWidth,
+		onScroll
+	]);
+	if (state.hidden || scrollWidth <= clientWidth || !barWidth) return null;
+	const onMouseDown = (event) => {
+		dragRef.current = {
+			left: barLeft,
+			x: event.pageX
+		};
+		event.preventDefault();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: `${prefixCls}-sticky-scroll`,
+		style: {
+			bottom: offsetScroll,
+			width: clientWidth
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				transform: `translate3d(${barLeft}px, 0, 0)`,
+				width: `${barWidth}px`
+			},
+			className: clsx$1(`${prefixCls}-sticky-scroll-bar`, dragRef.current && `${prefixCls}-sticky-scroll-bar-active`),
+			onMouseDown
+		})
+	});
+};
+//#endregion
+export { StickyScrollBar as default };
+
+//# sourceMappingURL=StickyScrollBar.mjs.map

package/es/Table/render/StickyScrollBar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickyScrollBar.mjs","names":["clsx"],"sources":["../../../src/Table/render/StickyScrollBar.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type MouseEvent as ReactMouseEvent,\n  type Ref,\n  type RefObject,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\n\nexport interface StickyScrollBarApi {\n  checkVisible: () => void;\n  setScrollLeft: (left: number) => void;\n}\n\ninterface StickyScrollBarProps {\n  bodyRef: RefObject<HTMLElement | null>;\n  container: HTMLElement | Window;\n  offsetScroll: number;\n  onScroll: (info: { currentTarget: HTMLElement; scrollLeft: number }) => void;\n  prefixCls: string;\n  ref?: Ref<StickyScrollBarApi>;\n}\n\nconst getContainerBottom = (container: HTMLElement | Window) =>\n  container === window\n    ? window.innerHeight\n    : (container as HTMLElement).getBoundingClientRect().bottom;\n\nconst StickyScrollBar = ({\n  bodyRef,\n  container,\n  offsetScroll,\n  onScroll,\n  prefixCls,\n  ref,\n}: StickyScrollBarProps) => {\n  const [state, setState] = useState({ hidden: true, scrollLeft: 0 });\n  const dragRef = useRef<{ left: number; x: number } | null>(null);\n\n  const body = bodyRef.current;\n  const scrollWidth = body?.scrollWidth ?? 0;\n  const clientWidth = body?.clientWidth ?? 0;\n  const barWidth = scrollWidth ? clientWidth * (clientWidth / scrollWidth) : 0;\n  const barLeft = scrollWidth ? (state.scrollLeft / scrollWidth) * clientWidth : 0;\n\n  const checkVisible = () => {\n    const element = bodyRef.current;\n    if (!element) return;\n    const rect = element.getBoundingClientRect();\n    const bottom = getContainerBottom(container);\n    const hidden =\n      element.scrollWidth <= element.clientWidth ||\n      rect.bottom - offsetScroll <= bottom ||\n      rect.top >= bottom - offsetScroll;\n    setState((previous) =>\n      previous.hidden === hidden && previous.scrollLeft === element.scrollLeft\n        ? previous\n        : { hidden, scrollLeft: element.scrollLeft },\n    );\n  };\n\n  useImperativeHandle(ref, () => ({\n    checkVisible,\n    setScrollLeft: (left: number) =>\n      setState((previous) =>\n        previous.scrollLeft === left ? previous : { ...previous, scrollLeft: left },\n      ),\n  }));\n\n  useEffect(() => {\n    const onChange = () => checkVisible();\n    container.addEventListener('scroll', onChange, false);\n    window.addEventListener('resize', onChange, false);\n    onChange();\n    return () => {\n      container.removeEventListener('scroll', onChange, false);\n      window.removeEventListener('resize', onChange, false);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [container, offsetScroll]);\n\n  useEffect(() => {\n    const onMove = (event: MouseEvent) => {\n      const drag = dragRef.current;\n      const element = bodyRef.current;\n      if (!drag || !element || !clientWidth) return;\n      const left = drag.left + (event.pageX - drag.x);\n      const max = element.scrollWidth - element.clientWidth;\n      const scrollLeft = Math.min(Math.max((left / clientWidth) * element.scrollWidth, 0), max);\n      onScroll({ currentTarget: element, scrollLeft });\n    };\n    const onUp = () => {\n      dragRef.current = null;\n    };\n    document.addEventListener('mousemove', onMove);\n    document.addEventListener('mouseup', onUp);\n    return () => {\n      document.removeEventListener('mousemove', onMove);\n      document.removeEventListener('mouseup', onUp);\n    };\n  }, [bodyRef, clientWidth, onScroll]);\n\n  if (state.hidden || scrollWidth <= clientWidth || !barWidth) return null;\n\n  const onMouseDown = (event: ReactMouseEvent<HTMLDivElement>) => {\n    dragRef.current = { left: barLeft, x: event.pageX };\n    event.preventDefault();\n  };\n\n  return (\n    <div\n      className={`${prefixCls}-sticky-scroll`}\n      style={{ bottom: offsetScroll, width: clientWidth }}\n    >\n      <div\n        style={{ transform: `translate3d(${barLeft}px, 0, 0)`, width: `${barWidth}px` }}\n        className={clsx(\n          `${prefixCls}-sticky-scroll-bar`,\n          dragRef.current && `${prefixCls}-sticky-scroll-bar-active`,\n        )}\n        onMouseDown={onMouseDown}\n      />\n    </div>\n  );\n};\n\nexport default StickyScrollBar;\n"],"mappings":";;;;;AA2BA,MAAM,sBAAsB,cAC1B,cAAc,SACV,OAAO,cACN,UAA0B,sBAAsB,CAAC,CAAC;AAEzD,MAAM,mBAAmB,EACvB,SACA,WACA,cACA,UACA,WACA,UAC0B;CAC1B,MAAM,CAAC,OAAO,YAAY,SAAS;EAAE,QAAQ;EAAM,YAAY;CAAE,CAAC;CAClE,MAAM,UAAU,OAA2C,IAAI;CAE/D,MAAM,OAAO,QAAQ;CACrB,MAAM,cAAc,MAAM,eAAe;CACzC,MAAM,cAAc,MAAM,eAAe;CACzC,MAAM,WAAW,cAAc,eAAe,cAAc,eAAe;CAC3E,MAAM,UAAU,cAAe,MAAM,aAAa,cAAe,cAAc;CAE/E,MAAM,qBAAqB;EACzB,MAAM,UAAU,QAAQ;EACxB,IAAI,CAAC,SAAS;EACd,MAAM,OAAO,QAAQ,sBAAsB;EAC3C,MAAM,SAAS,mBAAmB,SAAS;EAC3C,MAAM,SACJ,QAAQ,eAAe,QAAQ,eAC/B,KAAK,SAAS,gBAAgB,UAC9B,KAAK,OAAO,SAAS;EACvB,UAAU,aACR,SAAS,WAAW,UAAU,SAAS,eAAe,QAAQ,aAC1D,WACA;GAAE;GAAQ,YAAY,QAAQ;EAAW,CAC/C;CACF;CAEA,oBAAoB,YAAY;EAC9B;EACA,gBAAgB,SACd,UAAU,aACR,SAAS,eAAe,OAAO,WAAW;GAAE,GAAG;GAAU,YAAY;EAAK,CAC5E;CACJ,EAAE;CAEF,gBAAgB;EACd,MAAM,iBAAiB,aAAa;EACpC,UAAU,iBAAiB,UAAU,UAAU,KAAK;EACpD,OAAO,iBAAiB,UAAU,UAAU,KAAK;EACjD,SAAS;EACT,aAAa;GACX,UAAU,oBAAoB,UAAU,UAAU,KAAK;GACvD,OAAO,oBAAoB,UAAU,UAAU,KAAK;EACtD;CAEF,GAAG,CAAC,WAAW,YAAY,CAAC;CAE5B,gBAAgB;EACd,MAAM,UAAU,UAAsB;GACpC,MAAM,OAAO,QAAQ;GACrB,MAAM,UAAU,QAAQ;GACxB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,aAAa;GACvC,MAAM,OAAO,KAAK,QAAQ,MAAM,QAAQ,KAAK;GAC7C,MAAM,MAAM,QAAQ,cAAc,QAAQ;GAE1C,SAAS;IAAE,eAAe;IAAS,YADhB,KAAK,IAAI,KAAK,IAAK,OAAO,cAAe,QAAQ,aAAa,CAAC,GAAG,GACzC;GAAE,CAAC;EACjD;EACA,MAAM,aAAa;GACjB,QAAQ,UAAU;EACpB;EACA,SAAS,iBAAiB,aAAa,MAAM;EAC7C,SAAS,iBAAiB,WAAW,IAAI;EACzC,aAAa;GACX,SAAS,oBAAoB,aAAa,MAAM;GAChD,SAAS,oBAAoB,WAAW,IAAI;EAC9C;CACF,GAAG;EAAC;EAAS;EAAa;CAAQ,CAAC;CAEnC,IAAI,MAAM,UAAU,eAAe,eAAe,CAAC,UAAU,OAAO;CAEpE,MAAM,eAAe,UAA2C;EAC9D,QAAQ,UAAU;GAAE,MAAM;GAAS,GAAG,MAAM;EAAM;EAClD,MAAM,eAAe;CACvB;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,UAAU;EACxB,OAAO;GAAE,QAAQ;GAAc,OAAO;EAAY;EAElD,UAAA,oBAAC,OAAD;GACE,OAAO;IAAE,WAAW,eAAe,QAAQ;IAAY,OAAO,GAAG,SAAS;GAAI;GAC9E,WAAWA,OACT,GAAG,UAAU,qBACb,QAAQ,WAAW,GAAG,UAAU,0BAClC;GACa;EACd,CAAA;CACE,CAAA;AAET"}

package/es/Table/render/Summary.d.mts

@@ -0,0 +1,16 @@
+import { TableSummaryCellProps, TableSummaryProps, TableSummaryRowProps } from "../type.mjs";
+import "../engine/types.mjs";
+import "../engine/fixed.mjs";
+import { ReactNode } from "react";
+//#region src/Table/render/Summary.d.ts
+declare const TableSummaryRoot: ({ children }: TableSummaryProps) => import("react").JSX.Element;
+declare const TableSummaryRow: (props: TableSummaryRowProps) => import("react").JSX.Element;
+declare const TableSummaryCell: ({ align, children, className, colSpan, index, rowSpan, scope, style }: TableSummaryCellProps) => import("react").JSX.Element;
+type TableSummaryComponent = typeof TableSummaryRoot & {
+  Cell: typeof TableSummaryCell;
+  Row: typeof TableSummaryRow;
+};
+export declare const TableSummary: TableSummaryComponent;
+//#endregion
+export {};
+//# sourceMappingURL=Summary.d.mts.map