@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.10

package/es/Table/render/FixedFrost.mjs

@@ -0,0 +1,113 @@
+"use client";
+import { PREFIX_CLS } from "../constants.mjs";
+import { styles } from "../style.mjs";
+import { memo, useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { createPortal } from "react-dom";
+//#region src/Table/render/FixedFrost.tsx
+const p = `.${PREFIX_CLS}`;
+const px = (value) => Number.parseFloat(value) || 0;
+const measureSides = (rows) => {
+	let start = 0;
+	let end = 0;
+	for (const row of rows) for (const cell of Array.from(row.children)) if (cell.classList.contains(`lobe-table-cell-fix-start`)) start = Math.max(start, px(cell.style.insetInlineStart || cell.style.left) + cell.offsetWidth);
+	else if (cell.classList.contains(`lobe-table-cell-fix-end`)) end = Math.max(end, px(cell.style.insetInlineEnd || cell.style.right) + cell.offsetWidth);
+	return {
+		end: Math.round(end),
+		start: Math.round(start)
+	};
+};
+const collectRails = (table) => {
+	const rails = [];
+	const own = (el) => el.closest(p) === table;
+	const hosts = table.querySelectorAll(`${p}-content, ${p}-header, ${p}-body, ${p}-tbody-virtual-holder-inner`);
+	for (const host of Array.from(hosts)) {
+		if (!own(host)) continue;
+		if (host.closest(`${p}-sticky-holder`)) continue;
+		if (host.classList.contains(`lobe-table-tbody-virtual-holder-inner`)) {
+			const rows = Array.from(host.querySelectorAll(`${p}-row`)).filter((el) => own(el) && !el.classList.contains(`lobe-table-row-extra`));
+			const { start, end } = measureSides(rows.slice(0, 3));
+			if (start || end) rails.push({
+				end,
+				fill: true,
+				height: 0,
+				host,
+				start,
+				width: 0
+			});
+			continue;
+		}
+		const tableEl = host.querySelector(":scope > table");
+		if (!tableEl) continue;
+		const rows = Array.from(tableEl.querySelectorAll(":scope > thead > tr, :scope > tbody > tr")).filter((row) => !row.classList.contains(`${PREFIX_CLS}-measure-row`)).slice(0, 6);
+		const { start, end } = measureSides(rows);
+		if (!start && !end) continue;
+		rails.push({
+			end,
+			fill: false,
+			height: tableEl.offsetHeight,
+			host,
+			start,
+			width: tableEl.offsetWidth
+		});
+	}
+	return rails;
+};
+const sameRails = (a, b) => a.length === b.length && a.every((rail, i) => rail.host === b[i].host && rail.start === b[i].start && rail.end === b[i].end && rail.width === b[i].width && rail.height === b[i].height);
+const FixedFrost = memo(({ rootRef }) => {
+	const [rails, setRails] = useState([]);
+	useEffect(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		let frame = 0;
+		const update = () => {
+			frame = 0;
+			const table = root.querySelector(p);
+			const next = table ? collectRails(table) : [];
+			for (const rail of next) if (!rail.fill && getComputedStyle(rail.host).position === "static") rail.host.style.position = "relative";
+			setRails((prev) => sameRails(prev, next) ? prev : next);
+		};
+		const schedule = () => {
+			if (!frame) frame = requestAnimationFrame(update);
+		};
+		update();
+		const resize = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(schedule);
+		resize?.observe(root);
+		const mutation = new MutationObserver((records) => {
+			if (records.every((r) => r.target.closest?.("[data-table-frost]"))) return;
+			schedule();
+		});
+		mutation.observe(root, {
+			attributeFilter: ["class", "style"],
+			childList: true,
+			subtree: true
+		});
+		return () => {
+			if (frame) cancelAnimationFrame(frame);
+			resize?.disconnect();
+			mutation.disconnect();
+		};
+	}, [rootRef]);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: rails.map((rail, i) => createPortal(/* @__PURE__ */ jsxs("div", {
+		"aria-hidden": true,
+		"data-table-frost": "",
+		...stylex.props(styles.frostRail),
+		style: rail.fill ? { inset: 0 } : {
+			height: rail.height,
+			width: rail.width
+		},
+		children: [rail.start > 0 && /* @__PURE__ */ jsx("div", {
+			...stylex.props(styles.frostStart),
+			style: { width: rail.start }
+		}), rail.end > 0 && /* @__PURE__ */ jsx("div", {
+			...stylex.props(styles.frostEnd),
+			style: { width: rail.end }
+		})]
+	}), rail.host, `frost-${i}`)) });
+});
+FixedFrost.displayName = "TableFixedFrost";
+//#endregion
+export { FixedFrost as default };
+
+//# sourceMappingURL=FixedFrost.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FixedFrost.mjs","names":[],"sources":["../../../src/Table/render/FixedFrost.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo, type RefObject, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { PREFIX_CLS } from '../constants';\nimport { styles } from '../style';\n\nconst p = `.${PREFIX_CLS}`;\n\ninterface Rail {\n  end: number;\n  fill: boolean;\n  height: number;\n  host: HTMLElement;\n  start: number;\n  width: number;\n}\n\nconst px = (value: string) => Number.parseFloat(value) || 0;\n\nconst measureSides = (rows: Element[]) => {\n  let start = 0;\n  let end = 0;\n  for (const row of rows) {\n    for (const cell of Array.from(row.children) as HTMLElement[]) {\n      if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-start`)) {\n        start = Math.max(\n          start,\n          px(cell.style.insetInlineStart || cell.style.left) + cell.offsetWidth,\n        );\n      } else if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-end`)) {\n        end = Math.max(end, px(cell.style.insetInlineEnd || cell.style.right) + cell.offsetWidth);\n      }\n    }\n  }\n  return { end: Math.round(end), start: Math.round(start) };\n};\n\nconst collectRails = (table: HTMLElement): Rail[] => {\n  const rails: Rail[] = [];\n  const own = (el: Element) => el.closest(p) === table;\n  const hosts = table.querySelectorAll<HTMLElement>(\n    `${p}-content, ${p}-header, ${p}-body, ${p}-tbody-virtual-holder-inner`,\n  );\n\n  for (const host of Array.from(hosts)) {\n    if (!own(host)) continue;\n    // A sticky header is one element and blurs itself in CSS.\n    if (host.closest(`${p}-sticky-holder`)) continue;\n\n    if (host.classList.contains(`${PREFIX_CLS}-tbody-virtual-holder-inner`)) {\n      const rows = Array.from(host.querySelectorAll(`${p}-row`)).filter(\n        (el) => own(el) && !el.classList.contains(`${PREFIX_CLS}-row-extra`),\n      );\n      const { start, end } = measureSides(rows.slice(0, 3));\n      if (start || end) rails.push({ end, fill: true, height: 0, host, start, width: 0 });\n      continue;\n    }\n\n    const tableEl = host.querySelector<HTMLTableElement>(':scope > table');\n    if (!tableEl) continue;\n    const rows = Array.from(tableEl.querySelectorAll(':scope > thead > tr, :scope > tbody > tr'))\n      .filter((row) => !row.classList.contains(`${PREFIX_CLS}-measure-row`))\n      .slice(0, 6);\n    const { start, end } = measureSides(rows);\n    if (!start && !end) continue;\n    rails.push({\n      end,\n      fill: false,\n      height: tableEl.offsetHeight,\n      host,\n      start,\n      width: tableEl.offsetWidth,\n    });\n  }\n  return rails;\n};\n\nconst sameRails = (a: Rail[], b: Rail[]) =>\n  a.length === b.length &&\n  a.every(\n    (rail, i) =>\n      rail.host === b[i].host &&\n      rail.start === b[i].start &&\n      rail.end === b[i].end &&\n      rail.width === b[i].width &&\n      rail.height === b[i].height,\n  );\n\n// A per-cell backdrop-filter blurs each box on its own and shows seams at every row, so\n// each scroll host gets one rail holding a sticky pane per fixed side instead.\nconst FixedFrost = memo<{ rootRef: RefObject<HTMLElement | null> }>(({ rootRef }) => {\n  const [rails, setRails] = useState<Rail[]>([]);\n\n  // Passive effect: the root ref belongs to an ancestor and is attached after this\n  // child's layout effects, so a layout effect would see it as null on mount.\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    let frame = 0;\n\n    const update = () => {\n      frame = 0;\n      const table = root.querySelector<HTMLElement>(p);\n      const next = table ? collectRails(table) : [];\n      for (const rail of next) {\n        if (!rail.fill && getComputedStyle(rail.host).position === 'static') {\n          rail.host.style.position = 'relative';\n        }\n      }\n      setRails((prev) => (sameRails(prev, next) ? prev : next));\n    };\n    const schedule = () => {\n      if (!frame) frame = requestAnimationFrame(update);\n    };\n\n    update();\n    // Consumers render Table in jsdom without a ResizeObserver polyfill.\n    const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(schedule);\n    resize?.observe(root);\n    const mutation = new MutationObserver((records) => {\n      if (records.every((r) => (r.target as Element).closest?.('[data-table-frost]'))) return;\n      schedule();\n    });\n    mutation.observe(root, { attributeFilter: ['class', 'style'], childList: true, subtree: true });\n\n    return () => {\n      if (frame) cancelAnimationFrame(frame);\n      resize?.disconnect();\n      mutation.disconnect();\n    };\n  }, [rootRef]);\n\n  return (\n    <>\n      {rails.map((rail, i) =>\n        createPortal(\n          <div\n            aria-hidden\n            data-table-frost=\"\"\n            {...stylex.props(styles.frostRail)}\n            style={rail.fill ? { inset: 0 } : { height: rail.height, width: rail.width }}\n          >\n            {rail.start > 0 && (\n              <div {...stylex.props(styles.frostStart)} style={{ width: rail.start }} />\n            )}\n            {rail.end > 0 && <div {...stylex.props(styles.frostEnd)} style={{ width: rail.end }} />}\n          </div>,\n          rail.host,\n          `frost-${i}`,\n        ),\n      )}\n    </>\n  );\n});\n\nFixedFrost.displayName = 'TableFixedFrost';\n\nexport default FixedFrost;\n"],"mappings":"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"}

package/es/Table/render/FixedHolder.mjs

@@ -0,0 +1,51 @@
+"use client";
+import { useEventCallback } from "../../hooks/useEventCallback.mjs";
+import { TableElement } from "../atoms/layout.mjs";
+import { useTableView } from "./context.mjs";
+import { useCallback, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Table/render/FixedHolder.tsx
+const FixedHolder = ({ children, className, colGroup, holderRef, onWheelX, stickyStyle, tableLayout, scrollX }) => {
+	const { components } = useTableView();
+	const ref = useRef(null);
+	const onWheel = useEventCallback(onWheelX);
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const handler = (event) => {
+			if (!event.deltaX) return;
+			const max = element.scrollWidth - element.clientWidth;
+			const next = Math.min(Math.max(element.scrollLeft + event.deltaX, 0), max);
+			onWheel(element, next);
+			event.preventDefault();
+		};
+		element.addEventListener("wheel", handler, { passive: false });
+		return () => element.removeEventListener("wheel", handler);
+	}, [onWheel]);
+	const setRef = useCallback((element) => {
+		ref.current = element;
+		if (typeof holderRef === "function") holderRef(element);
+		else if (holderRef) holderRef.current = element;
+	}, [holderRef]);
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		ref: setRef,
+		style: {
+			overflow: "hidden",
+			...stickyStyle
+		},
+		children: /* @__PURE__ */ jsxs(TableElement, {
+			component: components.headerTable,
+			style: {
+				minWidth: "100%",
+				tableLayout,
+				width: scrollX === true ? "auto" : scrollX
+			},
+			children: [colGroup, children]
+		})
+	});
+};
+//#endregion
+export { FixedHolder };
+
+//# sourceMappingURL=FixedHolder.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FixedHolder.mjs","names":[],"sources":["../../../src/Table/render/FixedHolder.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { TableElement } from '../atoms';\nimport { useTableView } from './context';\n\nexport const FixedHolder = ({\n  children,\n  className,\n  colGroup,\n  holderRef,\n  onWheelX,\n  stickyStyle,\n  tableLayout,\n  scrollX,\n}: {\n  children: ReactNode;\n  className: string;\n  colGroup: ReactNode;\n  holderRef: Ref<HTMLDivElement>;\n  onWheelX: (target: HTMLDivElement, scrollLeft: number) => void;\n  scrollX?: number | string | true;\n  stickyStyle?: CSSProperties;\n  tableLayout: 'auto' | 'fixed';\n}) => {\n  const { components } = useTableView();\n  const ref = useRef<HTMLDivElement | null>(null);\n  const onWheel = useEventCallback(onWheelX);\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n    const handler = (event: WheelEvent) => {\n      if (!event.deltaX) return;\n      const max = element.scrollWidth - element.clientWidth;\n      const next = Math.min(Math.max(element.scrollLeft + event.deltaX, 0), max);\n      onWheel(element, next);\n      event.preventDefault();\n    };\n    element.addEventListener('wheel', handler, { passive: false });\n    return () => element.removeEventListener('wheel', handler);\n  }, [onWheel]);\n\n  const setRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      ref.current = element;\n      if (typeof holderRef === 'function') holderRef(element);\n      else if (holderRef) holderRef.current = element;\n    },\n    [holderRef],\n  );\n\n  return (\n    <div className={className} ref={setRef} style={{ overflow: 'hidden', ...stickyStyle }}>\n      <TableElement\n        component={components.headerTable}\n        style={{ minWidth: '100%', tableLayout, width: scrollX === true ? 'auto' : scrollX }}\n      >\n        {colGroup}\n        {children}\n      </TableElement>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAgBA,MAAa,eAAe,EAC1B,UACA,WACA,UACA,WACA,UACA,aACA,aACA,cAUI;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,MAAM,OAA8B,IAAI;CAC9C,MAAM,UAAU,iBAAiB,QAAQ;CAEzC,gBAAgB;EACd,MAAM,UAAU,IAAI;EACpB,IAAI,CAAC,SAAS;EACd,MAAM,WAAW,UAAsB;GACrC,IAAI,CAAC,MAAM,QAAQ;GACnB,MAAM,MAAM,QAAQ,cAAc,QAAQ;GAC1C,MAAM,OAAO,KAAK,IAAI,KAAK,IAAI,QAAQ,aAAa,MAAM,QAAQ,CAAC,GAAG,GAAG;GACzE,QAAQ,SAAS,IAAI;GACrB,MAAM,eAAe;EACvB;EACA,QAAQ,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;EAC7D,aAAa,QAAQ,oBAAoB,SAAS,OAAO;CAC3D,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,SAAS,aACZ,YAAmC;EAClC,IAAI,UAAU;EACd,IAAI,OAAO,cAAc,YAAY,UAAU,OAAO;OACjD,IAAI,WAAW,UAAU,UAAU;CAC1C,GACA,CAAC,SAAS,CACZ;CAEA,OACE,oBAAC,OAAD;EAAgB;EAAW,KAAK;EAAQ,OAAO;GAAE,UAAU;GAAU,GAAG;EAAY;EAClF,UAAA,qBAAC,cAAD;GACE,WAAW,WAAW;GACtB,OAAO;IAAE,UAAU;IAAQ;IAAa,OAAO,YAAY,OAAO,SAAS;GAAQ;GAFrF,UAAA,CAIG,UACA,QACW;;CACX,CAAA;AAET"}

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"}