@lobehub/ui 5.60.0 → 5.61.0

package/es/base-ui/Table/FilterDropdown.mjs

@@ -0,0 +1,284 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import Button from "../Button/Button.mjs";
+import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import Input_default from "../Input/Input.mjs";
+import { PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTriggerElement } from "../Popover/atoms.mjs";
+import Empty from "../../Empty/Empty.mjs";
+import Checkbox_default from "../Checkbox/Checkbox.mjs";
+import Radio from "../Radio/Radio.mjs";
+import { conductCheck, getAllKeys } from "../Tree/utils.mjs";
+import Tree from "../Tree/Tree.mjs";
+import { PREFIX_CLS, styles } from "./style.mjs";
+import { flattenFilterKeys } from "./useFilter.mjs";
+import { createContext, use, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { ListFilter, Search } from "lucide-react";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/base-ui/Table/FilterDropdown.tsx
+const FILTER_CLS = `${PREFIX_CLS}-filter`;
+/** True inside rc-table's hidden measure row, where only a static trigger is rendered. */
+const TableMeasureRowContext = createContext(false);
+const sameKeys = (a, b) => (a ?? null) === (b ?? null) || Boolean(a) && Boolean(b) && a.length === b.length && a.every((key, i) => key === b[i]);
+const textMatches = (search, text) => (typeof text === "string" || typeof text === "number") && String(text).toLowerCase().includes(search);
+const DEPRECATED_PROPS = [["filterDropdownOpen", "filterDropdownProps.open"], ["onFilterDropdownOpenChange", "filterDropdownProps.onOpenChange"]];
+const warnedProps = /* @__PURE__ */ new Set();
+/** Warns once per deprecated column prop, in development (antd `warning.deprecated`). */
+const warnDeprecated = (column) => {
+	if (process.env.NODE_ENV === "production") return;
+	for (const [name, replacement] of DEPRECATED_PROPS) if (name in column && !warnedProps.has(name)) {
+		warnedProps.add(name);
+		console.warn(`[Table] \`${name}\` is deprecated. Please use \`${replacement}\` instead.`);
+	}
+};
+/** Keys of `key` and its descendants, plus the keys of its ancestors. */
+const findLineage = (nodes, key, ancestors = []) => {
+	for (const node of nodes) {
+		if (node.key === key) return {
+			ancestors,
+			subtree: getAllKeys([node])
+		};
+		const found = node.children && findLineage(node.children, key, [...ancestors, node.key]);
+		if (found) return found;
+	}
+};
+/** Draft keys that re-render on write and can be read synchronously (antd `useSyncState`). */
+const useSyncKeys = (initial) => {
+	const ref = useRef(initial);
+	const [, rerender] = useReducer((count) => count + 1, 0);
+	return [() => ref.current, (next) => {
+		ref.current = next;
+		rerender();
+	}];
+};
+const FilterDropdown = ({ column, columnKey, filterState, getPopupContainer, label, locale, triggerFilter }) => {
+	const { defaultFilteredValue, filterDropdown, filterDropdownOpen, filterDropdownProps = {}, filterIcon, filterMode = "menu", filterMultiple = true, filterOnClose = true, filterResetToDefaultFilteredValue, filters, filterSearch = false, onFilterDropdownOpenChange } = column;
+	const inMeasureRow = use(TableMeasureRowContext);
+	warnDeprecated(column);
+	const triggerRef = useRef(null);
+	const [visible, setVisible] = useState(false);
+	const [searchValue, setSearchValue] = useState("");
+	const normalizedSearch = searchValue.trim().toLowerCase();
+	const mergedVisible = filterDropdownProps.open ?? filterDropdownOpen ?? visible;
+	const filtered = Boolean(filterState?.filteredKeys?.length || filterState?.forceFiltered);
+	const triggerOpen = (next) => {
+		setVisible(next);
+		setSearchValue("");
+		filterDropdownProps.onOpenChange?.(next);
+		onFilterDropdownOpenChange?.(next);
+	};
+	const propFilteredKeys = filterState?.filteredKeys;
+	const [getSelectedKeys, setSelectedKeys] = useSyncKeys(propFilteredKeys ?? []);
+	useEffect(() => {
+		if (mergedVisible) setSelectedKeys(propFilteredKeys ?? []);
+	}, [propFilteredKeys, mergedVisible]);
+	const internalTriggerFilter = (keys) => {
+		const mergedKeys = keys?.length ? keys : null;
+		if (mergedKeys === null && !propFilteredKeys) return;
+		if (sameKeys(mergedKeys, propFilteredKeys)) return;
+		triggerFilter(columnKey, mergedKeys);
+	};
+	const onConfirm = () => {
+		triggerOpen(false);
+		internalTriggerFilter(getSelectedKeys());
+	};
+	const onReset = ({ closeDropdown = false, confirm = false } = {}) => {
+		if (confirm) internalTriggerFilter([]);
+		if (closeDropdown) triggerOpen(false);
+		setSearchValue("");
+		setSelectedKeys(filterResetToDefaultFilteredValue ? (defaultFilteredValue ?? []).map(String) : []);
+	};
+	const doFilter = ({ closeDropdown = true } = {}) => {
+		if (closeDropdown) triggerOpen(false);
+		internalTriggerFilter(getSelectedKeys());
+	};
+	/** Opening / closing from the trigger, an outside press or Escape. */
+	const onPopoverOpenChange = (next) => {
+		if (next && propFilteredKeys !== void 0) setSelectedKeys(propFilteredKeys ?? []);
+		if (!next && !filterDropdown && filterOnClose) onConfirm();
+		else triggerOpen(next);
+	};
+	const selectedKeys = getSelectedKeys();
+	const selectedSet = new Set(selectedKeys.map(String));
+	const allKeys = useMemo(() => flattenFilterKeys(filters).map(String), [filters]);
+	const matches = (item) => typeof filterSearch === "function" ? filterSearch(normalizedSearch, item) : textMatches(normalizedSearch, item.text);
+	const toggleKey = (key, checked) => {
+		if (!filterMultiple) return setSelectedKeys(checked ? [key] : []);
+		const rest = selectedKeys.filter((item) => String(item) !== key);
+		setSelectedKeys(checked ? [...rest, key] : rest);
+	};
+	const renderMenuItems = (items) => items.flatMap((item, index) => {
+		const key = String(item.value);
+		if (item.children) {
+			const children = renderMenuItems(item.children);
+			if (children.length === 0) return [];
+			return [/* @__PURE__ */ jsxs("div", {
+				className: styles.filterGroup,
+				role: "group",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cx(styles.filterGroupTitle, `${FILTER_CLS}-dropdown-submenu-title`),
+					children: item.text
+				}), children]
+			}, key || index)];
+		}
+		if (normalizedSearch && !matches(item)) return [];
+		return [/* @__PURE__ */ jsx("div", {
+			className: cx(styles.filterItem, `${FILTER_CLS}-dropdown-item`),
+			children: filterMultiple ? /* @__PURE__ */ jsx(Checkbox_default, {
+				checked: selectedSet.has(key),
+				onChange: (checked) => toggleKey(key, checked),
+				children: item.text
+			}) : /* @__PURE__ */ jsx(Radio, {
+				value: key,
+				children: item.text
+			})
+		}, key)];
+	});
+	const toTreeData = (items, ancestorMatched = false) => (items ?? []).flatMap((item, index) => {
+		const selfMatched = ancestorMatched || !normalizedSearch || matches(item);
+		const children = item.children ? toTreeData(item.children, selfMatched) : void 0;
+		if (!selfMatched && !children?.length) return [];
+		return [{
+			children,
+			key: item.value !== void 0 ? String(item.value) : String(index),
+			title: item.text
+		}];
+	});
+	const renderSearch = () => filterSearch ? /* @__PURE__ */ jsx("div", {
+		className: cx(styles.filterSearch, `${PREFIX_CLS}-filter-dropdown-search`),
+		children: /* @__PURE__ */ jsx(Input_default, {
+			allowClear: true,
+			placeholder: locale.filterSearchPlaceholder,
+			prefix: /* @__PURE__ */ jsx(Icon, {
+				icon: Search,
+				size: 14
+			}),
+			size: "small",
+			value: searchValue,
+			onChange: (event) => setSearchValue(event.target.value)
+		})
+	}) : null;
+	const empty = /* @__PURE__ */ jsx(Empty, {
+		className: styles.filterEmpty,
+		description: locale.filterEmptyText,
+		imageSize: 24
+	});
+	let content;
+	if (typeof filterDropdown === "function") content = filterDropdown({
+		clearFilters: onReset,
+		close: () => triggerOpen(false),
+		confirm: doFilter,
+		filters,
+		prefixCls: `${FILTER_CLS}-dropdown-custom`,
+		selectedKeys,
+		setSelectedKeys,
+		visible: mergedVisible
+	});
+	else if (filterDropdown !== void 0) content = filterDropdown;
+	else {
+		let body;
+		if (!filters?.length) body = empty;
+		else if (filterMode === "tree") {
+			const treeData = toTreeData(filters);
+			const fullTreeData = normalizedSearch ? toTreeData(filters, true) : treeData;
+			const onTreeCheck = (checked, node) => {
+				if (!filterMultiple) return setSelectedKeys(checked ? [node.key] : []);
+				const lineage = findLineage(fullTreeData, node.key);
+				const base = conductCheck(fullTreeData, selectedKeys.map(String)).checked;
+				if (checked) lineage?.subtree.forEach((key) => base.add(key));
+				else [...lineage?.subtree ?? [], ...lineage?.ancestors ?? []].forEach((key) => base.delete(key));
+				setSelectedKeys([...conductCheck(fullTreeData, base).checked]);
+			};
+			body = /* @__PURE__ */ jsxs(Fragment$1, { children: [renderSearch(), /* @__PURE__ */ jsxs("div", {
+				className: cx(styles.filterTree, `${PREFIX_CLS}-filter-dropdown-tree`),
+				children: [filterMultiple && /* @__PURE__ */ jsx(Checkbox_default, {
+					checked: selectedKeys.length > 0 && selectedKeys.length === allKeys.length,
+					className: cx(styles.filterCheckAll, `lobe-table-filter-dropdown-checkall`),
+					indeterminate: selectedKeys.length > 0 && selectedKeys.length < allKeys.length,
+					onChange: (checked) => setSelectedKeys(checked ? allKeys : []),
+					children: locale.filterCheckAll
+				}), treeData.length > 0 ? /* @__PURE__ */ jsx(Tree, {
+					checkable: true,
+					defaultExpandAll: true,
+					checkStrictly: !filterMultiple || Boolean(normalizedSearch),
+					checkedKeys: selectedKeys.map(String),
+					multiple: filterMultiple,
+					selectedKeys: [],
+					size: "small",
+					treeData,
+					onCheck: (_, { checked, node }) => onTreeCheck(checked, node)
+				}) : empty]
+			})] });
+		} else {
+			const items = renderMenuItems(filters);
+			const list = /* @__PURE__ */ jsx("div", {
+				className: cx(styles.filterMenu, `${FILTER_CLS}-dropdown-menu`),
+				children: items
+			});
+			body = /* @__PURE__ */ jsxs(Fragment$1, { children: [renderSearch(), items.length === 0 ? empty : filterMultiple ? list : /* @__PURE__ */ jsx(RadioGroup, {
+				value: selectedKeys.length ? String(selectedKeys[0]) : null,
+				onValueChange: (value) => setSelectedKeys(value == null ? [] : [String(value)]),
+				children: list
+			})] });
+		}
+		const resetDisabled = filterResetToDefaultFilteredValue ? sameKeys((defaultFilteredValue ?? []).map(String), selectedKeys.map(String)) : selectedKeys.length === 0;
+		content = /* @__PURE__ */ jsxs(Fragment$1, { children: [body, /* @__PURE__ */ jsxs("div", {
+			className: cx(styles.filterButtons, `${FILTER_CLS}-dropdown-btns`),
+			children: [/* @__PURE__ */ jsx(Button, {
+				disabled: resetDisabled,
+				size: "small",
+				type: "link",
+				onClick: () => onReset(),
+				children: locale.filterReset
+			}), /* @__PURE__ */ jsx(Button, {
+				size: "small",
+				type: "primary",
+				onClick: onConfirm,
+				children: locale.filterConfirm
+			})]
+		})] });
+	}
+	const popupRender = filterDropdownProps.popupRender ?? filterDropdownProps.dropdownRender;
+	const panel = /* @__PURE__ */ jsx("div", {
+		className: cx(styles.filterDropdown, `${FILTER_CLS}-dropdown`),
+		children: popupRender ? popupRender(content) : content
+	});
+	const icon = typeof filterIcon === "function" ? filterIcon(filtered) : filterIcon ?? ListFilter;
+	const trigger = /* @__PURE__ */ jsx(ActionIcon, {
+		active: filtered,
+		"aria-description": locale.filterTitle,
+		"aria-label": `Filter ${label}`,
+		className: cx(styles.filterButton, `${FILTER_CLS}-trigger`, filtered && styles.filterActive),
+		"data-active": filtered || void 0,
+		icon,
+		ref: triggerRef,
+		size: "small",
+		onClick: (event) => event.stopPropagation()
+	});
+	if (inMeasureRow) return trigger;
+	const resolveContainer = filterDropdownProps.getPopupContainer ?? getPopupContainer;
+	const container = mergedVisible && resolveContainer && triggerRef.current ? resolveContainer(triggerRef.current) : void 0;
+	return /* @__PURE__ */ jsxs(PopoverRoot, {
+		open: mergedVisible,
+		onOpenChange: onPopoverOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTriggerElement, { children: trigger }), /* @__PURE__ */ jsx(PopoverPortal, {
+			container,
+			children: /* @__PURE__ */ jsx(PopoverPositioner, {
+				className: filterDropdownProps.rootClassName,
+				placement: filterDropdownProps.placement ?? "bottomRight",
+				sideOffset: 4,
+				style: filterDropdownProps.zIndex === void 0 ? void 0 : { zIndex: filterDropdownProps.zIndex },
+				children: /* @__PURE__ */ jsx(PopoverPopup, {
+					className: cx(styles.filterPopup, filterDropdownProps.className),
+					style: filterDropdownProps.style,
+					children: panel
+				})
+			})
+		})]
+	});
+};
+//#endregion
+export { TableMeasureRowContext, FilterDropdown as default };
+
+//# sourceMappingURL=FilterDropdown.mjs.map

package/es/base-ui/Table/FilterDropdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDropdown.mjs","names":["Checkbox","Input","BaseRadioGroup"],"sources":["../../../src/base-ui/Table/FilterDropdown.tsx"],"sourcesContent":["'use client';\n\nimport { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport { cx } from 'antd-style';\nimport { ListFilter, Search } from 'lucide-react';\nimport {\n  createContext,\n  type Key,\n  type ReactNode,\n  use,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport Button from '@/base-ui/Button';\nimport { Checkbox } from '@/base-ui/Checkbox';\nimport { Input } from '@/base-ui/Input';\nimport {\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverRoot,\n  PopoverTriggerElement,\n} from '@/base-ui/Popover';\nimport { Radio } from '@/base-ui/Radio';\nimport Tree, { conductCheck, getAllKeys, type TreeDataNode } from '@/base-ui/Tree';\nimport Empty from '@/Empty';\nimport Icon from '@/Icon';\n\nimport { PREFIX_CLS, styles } from './style';\nimport type {\n  TableColumnFilterItem,\n  TableColumnType,\n  TableFilterDropdownProps,\n  TableLocale,\n} from './type';\nimport { type FilterKeys, type FilterState, flattenFilterKeys } from './useFilter';\n\nconst FILTER_CLS = `${PREFIX_CLS}-filter`;\n\n/** True inside rc-table's hidden measure row, where only a static trigger is rendered. */\nexport const TableMeasureRowContext = createContext(false);\n\nconst sameKeys = (a: readonly Key[] | null | undefined, b: readonly Key[] | null | undefined) =>\n  (a ?? null) === (b ?? null) ||\n  (Boolean(a) && Boolean(b) && a!.length === b!.length && a!.every((key, i) => key === b![i]));\n\nconst textMatches = (search: string, text: ReactNode) =>\n  (typeof text === 'string' || typeof text === 'number') &&\n  String(text).toLowerCase().includes(search);\n\nconst DEPRECATED_PROPS = [\n  ['filterDropdownOpen', 'filterDropdownProps.open'],\n  ['onFilterDropdownOpenChange', 'filterDropdownProps.onOpenChange'],\n] as const;\nconst warnedProps = new Set<string>();\n\n/** Warns once per deprecated column prop, in development (antd `warning.deprecated`). */\nconst warnDeprecated = (column: object) => {\n  if (process.env.NODE_ENV === 'production') return;\n  for (const [name, replacement] of DEPRECATED_PROPS) {\n    if (name in column && !warnedProps.has(name)) {\n      warnedProps.add(name);\n      console.warn(`[Table] \\`${name}\\` is deprecated. Please use \\`${replacement}\\` instead.`);\n    }\n  }\n};\n\n/** Keys of `key` and its descendants, plus the keys of its ancestors. */\nconst findLineage = (\n  nodes: readonly TreeDataNode[],\n  key: string,\n  ancestors: string[] = [],\n): { ancestors: string[]; subtree: string[] } | undefined => {\n  for (const node of nodes) {\n    if (node.key === key) return { ancestors, subtree: getAllKeys([node]) };\n    const found = node.children && findLineage(node.children, key, [...ancestors, node.key]);\n    if (found) return found;\n  }\n};\n\n/** Draft keys that re-render on write and can be read synchronously (antd `useSyncState`). */\nconst useSyncKeys = (initial: Key[]) => {\n  const ref = useRef(initial);\n  const [, rerender] = useReducer((count: number) => count + 1, 0);\n  return [\n    () => ref.current,\n    (next: Key[]) => {\n      ref.current = next;\n      rerender();\n    },\n  ] as const;\n};\n\ninterface FilterDropdownProps<T> {\n  column: TableColumnType<T>;\n  columnKey: string;\n  filterState?: FilterState<T>;\n  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;\n  label: string;\n  locale: Pick<\n    TableLocale,\n    | 'filterCheckAll'\n    | 'filterConfirm'\n    | 'filterEmptyText'\n    | 'filterReset'\n    | 'filterSearchPlaceholder'\n    | 'filterTitle'\n  >;\n  triggerFilter: (columnKey: string, filteredKeys: FilterKeys) => void;\n}\n\nconst FilterDropdown = <T,>({\n  column,\n  columnKey,\n  filterState,\n  getPopupContainer,\n  label,\n  locale,\n  triggerFilter,\n}: FilterDropdownProps<T>) => {\n  const {\n    defaultFilteredValue,\n    filterDropdown,\n    filterDropdownOpen,\n    filterDropdownProps = {},\n    filterIcon,\n    filterMode = 'menu',\n    filterMultiple = true,\n    filterOnClose = true,\n    filterResetToDefaultFilteredValue,\n    filters,\n    filterSearch = false,\n    onFilterDropdownOpenChange,\n  } = column;\n\n  const inMeasureRow = use(TableMeasureRowContext);\n  warnDeprecated(column);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [visible, setVisible] = useState(false);\n  const [searchValue, setSearchValue] = useState('');\n  const normalizedSearch = searchValue.trim().toLowerCase();\n  const mergedVisible = filterDropdownProps.open ?? filterDropdownOpen ?? visible;\n  const filtered = Boolean(filterState?.filteredKeys?.length || filterState?.forceFiltered);\n\n  const triggerOpen = (next: boolean) => {\n    setVisible(next);\n    // The search box starts empty every time the panel opens.\n    setSearchValue('');\n    filterDropdownProps.onOpenChange?.(next);\n    onFilterDropdownOpenChange?.(next);\n  };\n\n  // ============================ Draft keys ============================\n  // Booleans only come from `filteredValue`; the panel works with keys, like antd.\n  const propFilteredKeys = filterState?.filteredKeys as Key[] | null | undefined;\n  const [getSelectedKeys, setSelectedKeys] = useSyncKeys(propFilteredKeys ?? []);\n\n  useEffect(() => {\n    if (mergedVisible) setSelectedKeys(propFilteredKeys ?? []);\n    // `setSelectedKeys` is stable in behavior; re-sync only on open / applied-keys change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [propFilteredKeys, mergedVisible]);\n\n  // ============================== Submit ==============================\n  const internalTriggerFilter = (keys: Key[] | null) => {\n    const mergedKeys = keys?.length ? keys : null;\n    if (mergedKeys === null && !propFilteredKeys) return;\n    if (sameKeys(mergedKeys, propFilteredKeys)) return;\n    triggerFilter(columnKey, mergedKeys);\n  };\n\n  const onConfirm = () => {\n    triggerOpen(false);\n    internalTriggerFilter(getSelectedKeys());\n  };\n\n  const onReset: NonNullable<TableFilterDropdownProps['clearFilters']> = ({\n    closeDropdown = false,\n    confirm = false,\n  } = {}) => {\n    if (confirm) internalTriggerFilter([]);\n    if (closeDropdown) triggerOpen(false);\n    setSearchValue('');\n    setSelectedKeys(\n      filterResetToDefaultFilteredValue ? (defaultFilteredValue ?? []).map(String) : [],\n    );\n  };\n\n  const doFilter: TableFilterDropdownProps['confirm'] = ({ closeDropdown = true } = {}) => {\n    if (closeDropdown) triggerOpen(false);\n    internalTriggerFilter(getSelectedKeys());\n  };\n\n  /** Opening / closing from the trigger, an outside press or Escape. */\n  const onPopoverOpenChange = (next: boolean) => {\n    if (next && propFilteredKeys !== undefined) setSelectedKeys(propFilteredKeys ?? []);\n    if (!next && !filterDropdown && filterOnClose) onConfirm();\n    else triggerOpen(next);\n  };\n\n  // ============================== Content =============================\n  const selectedKeys = getSelectedKeys();\n  const selectedSet = new Set(selectedKeys.map(String));\n  const allKeys = useMemo(() => flattenFilterKeys(filters).map(String), [filters]);\n\n  const matches = (item: TableColumnFilterItem) =>\n    typeof filterSearch === 'function'\n      ? filterSearch(normalizedSearch, item)\n      : textMatches(normalizedSearch, item.text);\n\n  const toggleKey = (key: string, checked: boolean) => {\n    if (!filterMultiple) return setSelectedKeys(checked ? [key] : []);\n    const rest = selectedKeys.filter((item) => String(item) !== key);\n    setSelectedKeys(checked ? [...rest, key] : rest);\n  };\n\n  const renderMenuItems = (items: readonly TableColumnFilterItem[]): ReactNode[] =>\n    items.flatMap((item, index) => {\n      const key = String(item.value);\n      if (item.children) {\n        const children = renderMenuItems(item.children);\n        if (children.length === 0) return [];\n        return [\n          <div className={styles.filterGroup} key={key || index} role=\"group\">\n            <div className={cx(styles.filterGroupTitle, `${FILTER_CLS}-dropdown-submenu-title`)}>\n              {item.text}\n            </div>\n            {children}\n          </div>,\n        ];\n      }\n      if (normalizedSearch && !matches(item)) return [];\n      return [\n        <div className={cx(styles.filterItem, `${FILTER_CLS}-dropdown-item`)} key={key}>\n          {filterMultiple ? (\n            <Checkbox\n              checked={selectedSet.has(key)}\n              onChange={(checked) => toggleKey(key, checked)}\n            >\n              {item.text}\n            </Checkbox>\n          ) : (\n            <Radio value={key}>{item.text}</Radio>\n          )}\n        </div>,\n      ];\n    });\n\n  const toTreeData = (\n    items: readonly TableColumnFilterItem[] | undefined,\n    ancestorMatched = false,\n  ): TreeDataNode[] =>\n    (items ?? []).flatMap((item, index) => {\n      const selfMatched = ancestorMatched || !normalizedSearch || matches(item);\n      const children = item.children ? toTreeData(item.children, selfMatched) : undefined;\n      if (!selfMatched && !children?.length) return [];\n      return [\n        {\n          children,\n          key: item.value !== undefined ? String(item.value) : String(index),\n          title: item.text,\n        },\n      ];\n    });\n\n  const renderSearch = () =>\n    filterSearch ? (\n      <div className={cx(styles.filterSearch, `${PREFIX_CLS}-filter-dropdown-search`)}>\n        <Input\n          allowClear\n          placeholder={locale.filterSearchPlaceholder}\n          prefix={<Icon icon={Search} size={14} />}\n          size=\"small\"\n          value={searchValue}\n          onChange={(event) => setSearchValue(event.target.value)}\n        />\n      </div>\n    ) : null;\n\n  const empty = (\n    <Empty className={styles.filterEmpty} description={locale.filterEmptyText} imageSize={24} />\n  );\n\n  let content: ReactNode;\n  if (typeof filterDropdown === 'function') {\n    content = filterDropdown({\n      clearFilters: onReset,\n      close: () => triggerOpen(false),\n      confirm: doFilter,\n      filters,\n      prefixCls: `${FILTER_CLS}-dropdown-custom`,\n      selectedKeys,\n      setSelectedKeys,\n      visible: mergedVisible,\n    });\n  } else if (filterDropdown !== undefined) {\n    content = filterDropdown;\n  } else {\n    let body: ReactNode;\n    if (!filters?.length) {\n      body = empty;\n    } else if (filterMode === 'tree') {\n      const treeData = toTreeData(filters);\n      // Searching prunes the tree, so cascade checks on the full tree and show the keys as is.\n      const fullTreeData = normalizedSearch ? toTreeData(filters, true) : treeData;\n      const onTreeCheck = (checked: boolean, node: TreeDataNode) => {\n        if (!filterMultiple) return setSelectedKeys(checked ? [node.key] : []);\n        const lineage = findLineage(fullTreeData, node.key);\n        const base = conductCheck(fullTreeData, selectedKeys.map(String)).checked;\n        if (checked) lineage?.subtree.forEach((key) => base.add(key));\n        else\n          [...(lineage?.subtree ?? []), ...(lineage?.ancestors ?? [])].forEach((key) =>\n            base.delete(key),\n          );\n        setSelectedKeys([...conductCheck(fullTreeData, base).checked]);\n      };\n      body = (\n        <>\n          {renderSearch()}\n          <div className={cx(styles.filterTree, `${PREFIX_CLS}-filter-dropdown-tree`)}>\n            {filterMultiple && (\n              <Checkbox\n                checked={selectedKeys.length > 0 && selectedKeys.length === allKeys.length}\n                className={cx(styles.filterCheckAll, `${PREFIX_CLS}-filter-dropdown-checkall`)}\n                indeterminate={selectedKeys.length > 0 && selectedKeys.length < allKeys.length}\n                onChange={(checked) => setSelectedKeys(checked ? allKeys : [])}\n              >\n                {locale.filterCheckAll}\n              </Checkbox>\n            )}\n            {treeData.length > 0 ? (\n              <Tree\n                checkable\n                defaultExpandAll\n                checkStrictly={!filterMultiple || Boolean(normalizedSearch)}\n                checkedKeys={selectedKeys.map(String)}\n                multiple={filterMultiple}\n                selectedKeys={[]}\n                size=\"small\"\n                treeData={treeData}\n                onCheck={(_, { checked, node }) => onTreeCheck(checked, node)}\n              />\n            ) : (\n              empty\n            )}\n          </div>\n        </>\n      );\n    } else {\n      const items = renderMenuItems(filters);\n      const list = (\n        <div className={cx(styles.filterMenu, `${FILTER_CLS}-dropdown-menu`)}>{items}</div>\n      );\n      body = (\n        <>\n          {renderSearch()}\n          {items.length === 0 ? (\n            empty\n          ) : filterMultiple ? (\n            list\n          ) : (\n            <BaseRadioGroup\n              value={selectedKeys.length ? String(selectedKeys[0]) : null}\n              onValueChange={(value) => setSelectedKeys(value == null ? [] : [String(value)])}\n            >\n              {list}\n            </BaseRadioGroup>\n          )}\n        </>\n      );\n    }\n\n    const resetDisabled = filterResetToDefaultFilteredValue\n      ? sameKeys((defaultFilteredValue ?? []).map(String), selectedKeys.map(String))\n      : selectedKeys.length === 0;\n\n    content = (\n      <>\n        {body}\n        <div className={cx(styles.filterButtons, `${FILTER_CLS}-dropdown-btns`)}>\n          <Button disabled={resetDisabled} size=\"small\" type=\"link\" onClick={() => onReset()}>\n            {locale.filterReset}\n          </Button>\n          <Button size=\"small\" type=\"primary\" onClick={onConfirm}>\n            {locale.filterConfirm}\n          </Button>\n        </div>\n      </>\n    );\n  }\n\n  const popupRender = filterDropdownProps.popupRender ?? filterDropdownProps.dropdownRender;\n  const panel = (\n    <div className={cx(styles.filterDropdown, `${FILTER_CLS}-dropdown`)}>\n      {popupRender ? popupRender(content) : content}\n    </div>\n  );\n\n  // ============================== Trigger =============================\n  const icon = typeof filterIcon === 'function' ? filterIcon(filtered) : (filterIcon ?? ListFilter);\n\n  // Native `title` would need ActionIcon's tooltip, which can't sit inside the popover trigger;\n  // the localized hint rides on `aria-description` instead.\n  const trigger = (\n    <ActionIcon\n      active={filtered}\n      aria-description={locale.filterTitle}\n      aria-label={`Filter ${label}`}\n      className={cx(styles.filterButton, `${FILTER_CLS}-trigger`, filtered && styles.filterActive)}\n      data-active={filtered || undefined}\n      icon={icon}\n      ref={triggerRef}\n      size=\"small\"\n      onClick={(event) => event.stopPropagation()}\n    />\n  );\n\n  if (inMeasureRow) return trigger;\n\n  const resolveContainer = filterDropdownProps.getPopupContainer ?? getPopupContainer;\n  const container =\n    mergedVisible && resolveContainer && triggerRef.current\n      ? resolveContainer(triggerRef.current)\n      : undefined;\n\n  return (\n    <PopoverRoot open={mergedVisible} onOpenChange={onPopoverOpenChange}>\n      <PopoverTriggerElement>{trigger}</PopoverTriggerElement>\n      <PopoverPortal container={container}>\n        <PopoverPositioner\n          className={filterDropdownProps.rootClassName}\n          placement={filterDropdownProps.placement ?? 'bottomRight'}\n          sideOffset={4}\n          style={\n            filterDropdownProps.zIndex === undefined\n              ? undefined\n              : { zIndex: filterDropdownProps.zIndex }\n          }\n        >\n          <PopoverPopup\n            className={cx(styles.filterPopup, filterDropdownProps.className)}\n            style={filterDropdownProps.style}\n          >\n            {panel}\n          </PopoverPopup>\n        </PopoverPositioner>\n      </PopoverPortal>\n    </PopoverRoot>\n  );\n};\n\nexport default FilterDropdown;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA0CA,MAAM,aAAa,GAAG,WAAW;;AAGjC,MAAa,yBAAyB,cAAc,KAAK;AAEzD,MAAM,YAAY,GAAsC,OACrD,KAAK,WAAW,KAAK,SACrB,QAAQ,CAAC,KAAK,QAAQ,CAAC,KAAK,EAAG,WAAW,EAAG,UAAU,EAAG,OAAO,KAAK,MAAM,QAAQ,EAAG,EAAE;AAE5F,MAAM,eAAe,QAAgB,UAClC,OAAO,SAAS,YAAY,OAAO,SAAS,aAC7C,OAAO,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,SAAS,MAAM;AAE5C,MAAM,mBAAmB,CACvB,CAAC,sBAAsB,0BAA0B,GACjD,CAAC,8BAA8B,kCAAkC,CACnE;AACA,MAAM,8BAAc,IAAI,IAAY;;AAGpC,MAAM,kBAAkB,WAAmB;CACzC,IAAI,QAAQ,IAAI,aAAa,cAAc;CAC3C,KAAK,MAAM,CAAC,MAAM,gBAAgB,kBAChC,IAAI,QAAQ,UAAU,CAAC,YAAY,IAAI,IAAI,GAAG;EAC5C,YAAY,IAAI,IAAI;EACpB,QAAQ,KAAK,aAAa,KAAK,iCAAiC,YAAY,YAAY;CAC1F;AAEJ;;AAGA,MAAM,eACJ,OACA,KACA,YAAsB,CAAC,MACoC;CAC3D,KAAK,MAAM,QAAQ,OAAO;EACxB,IAAI,KAAK,QAAQ,KAAK,OAAO;GAAE;GAAW,SAAS,WAAW,CAAC,IAAI,CAAC;EAAE;EACtE,MAAM,QAAQ,KAAK,YAAY,YAAY,KAAK,UAAU,KAAK,CAAC,GAAG,WAAW,KAAK,GAAG,CAAC;EACvF,IAAI,OAAO,OAAO;CACpB;AACF;;AAGA,MAAM,eAAe,YAAmB;CACtC,MAAM,MAAM,OAAO,OAAO;CAC1B,MAAM,GAAG,YAAY,YAAY,UAAkB,QAAQ,GAAG,CAAC;CAC/D,OAAO,OACC,IAAI,UACT,SAAgB;EACf,IAAI,UAAU;EACd,SAAS;CACX,CACF;AACF;AAoBA,MAAM,kBAAsB,EAC1B,QACA,WACA,aACA,mBACA,OACA,QACA,oBAC4B;CAC5B,MAAM,EACJ,sBACA,gBACA,oBACA,sBAAsB,CAAC,GACvB,YACA,aAAa,QACb,iBAAiB,MACjB,gBAAgB,MAChB,mCACA,SACA,eAAe,OACf,+BACE;CAEJ,MAAM,eAAe,IAAI,sBAAsB;CAC/C,eAAe,MAAM;CACrB,MAAM,aAAa,OAA0B,IAAI;CACjD,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CACjD,MAAM,mBAAmB,YAAY,KAAK,CAAC,CAAC,YAAY;CACxD,MAAM,gBAAgB,oBAAoB,QAAQ,sBAAsB;CACxE,MAAM,WAAW,QAAQ,aAAa,cAAc,UAAU,aAAa,aAAa;CAExF,MAAM,eAAe,SAAkB;EACrC,WAAW,IAAI;EAEf,eAAe,EAAE;EACjB,oBAAoB,eAAe,IAAI;EACvC,6BAA6B,IAAI;CACnC;CAIA,MAAM,mBAAmB,aAAa;CACtC,MAAM,CAAC,iBAAiB,mBAAmB,YAAY,oBAAoB,CAAC,CAAC;CAE7E,gBAAgB;EACd,IAAI,eAAe,gBAAgB,oBAAoB,CAAC,CAAC;CAG3D,GAAG,CAAC,kBAAkB,aAAa,CAAC;CAGpC,MAAM,yBAAyB,SAAuB;EACpD,MAAM,aAAa,MAAM,SAAS,OAAO;EACzC,IAAI,eAAe,QAAQ,CAAC,kBAAkB;EAC9C,IAAI,SAAS,YAAY,gBAAgB,GAAG;EAC5C,cAAc,WAAW,UAAU;CACrC;CAEA,MAAM,kBAAkB;EACtB,YAAY,KAAK;EACjB,sBAAsB,gBAAgB,CAAC;CACzC;CAEA,MAAM,WAAkE,EACtE,gBAAgB,OAChB,UAAU,UACR,CAAC,MAAM;EACT,IAAI,SAAS,sBAAsB,CAAC,CAAC;EACrC,IAAI,eAAe,YAAY,KAAK;EACpC,eAAe,EAAE;EACjB,gBACE,qCAAqC,wBAAwB,CAAC,EAAA,CAAG,IAAI,MAAM,IAAI,CAAC,CAClF;CACF;CAEA,MAAM,YAAiD,EAAE,gBAAgB,SAAS,CAAC,MAAM;EACvF,IAAI,eAAe,YAAY,KAAK;EACpC,sBAAsB,gBAAgB,CAAC;CACzC;;CAGA,MAAM,uBAAuB,SAAkB;EAC7C,IAAI,QAAQ,qBAAqB,KAAA,GAAW,gBAAgB,oBAAoB,CAAC,CAAC;EAClF,IAAI,CAAC,QAAQ,CAAC,kBAAkB,eAAe,UAAU;OACpD,YAAY,IAAI;CACvB;CAGA,MAAM,eAAe,gBAAgB;CACrC,MAAM,cAAc,IAAI,IAAI,aAAa,IAAI,MAAM,CAAC;CACpD,MAAM,UAAU,cAAc,kBAAkB,OAAO,CAAC,CAAC,IAAI,MAAM,GAAG,CAAC,OAAO,CAAC;CAE/E,MAAM,WAAW,SACf,OAAO,iBAAiB,aACpB,aAAa,kBAAkB,IAAI,IACnC,YAAY,kBAAkB,KAAK,IAAI;CAE7C,MAAM,aAAa,KAAa,YAAqB;EACnD,IAAI,CAAC,gBAAgB,OAAO,gBAAgB,UAAU,CAAC,GAAG,IAAI,CAAC,CAAC;EAChE,MAAM,OAAO,aAAa,QAAQ,SAAS,OAAO,IAAI,MAAM,GAAG;EAC/D,gBAAgB,UAAU,CAAC,GAAG,MAAM,GAAG,IAAI,IAAI;CACjD;CAEA,MAAM,mBAAmB,UACvB,MAAM,SAAS,MAAM,UAAU;EAC7B,MAAM,MAAM,OAAO,KAAK,KAAK;EAC7B,IAAI,KAAK,UAAU;GACjB,MAAM,WAAW,gBAAgB,KAAK,QAAQ;GAC9C,IAAI,SAAS,WAAW,GAAG,OAAO,CAAC;GACnC,OAAO,CACL,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAgC,MAAK;IAA5D,UAAA,CACE,oBAAC,OAAD;KAAK,WAAW,GAAG,OAAO,kBAAkB,GAAG,WAAW,wBAAwB;KAC/E,UAAA,KAAK;IACH,CAAA,GACJ,QACE;GALoC,GAAA,OAAO,KAK3C,CACP;EACF;EACA,IAAI,oBAAoB,CAAC,QAAQ,IAAI,GAAG,OAAO,CAAC;EAChD,OAAO,CACL,oBAAC,OAAD;GAAK,WAAW,GAAG,OAAO,YAAY,GAAG,WAAW,eAAe;GAChE,UAAA,iBACC,oBAACA,kBAAD;IACE,SAAS,YAAY,IAAI,GAAG;IAC5B,WAAW,YAAY,UAAU,KAAK,OAAO;IAE5C,UAAA,KAAK;GACE,CAAA,IAEV,oBAAC,OAAD;IAAO,OAAO;IAAM,UAAA,KAAK;GAAY,CAAA;EAEpC,GAXsE,GAWtE,CACP;CACF,CAAC;CAEH,MAAM,cACJ,OACA,kBAAkB,WAEjB,SAAS,CAAC,EAAA,CAAG,SAAS,MAAM,UAAU;EACrC,MAAM,cAAc,mBAAmB,CAAC,oBAAoB,QAAQ,IAAI;EACxE,MAAM,WAAW,KAAK,WAAW,WAAW,KAAK,UAAU,WAAW,IAAI,KAAA;EAC1E,IAAI,CAAC,eAAe,CAAC,UAAU,QAAQ,OAAO,CAAC;EAC/C,OAAO,CACL;GACE;GACA,KAAK,KAAK,UAAU,KAAA,IAAY,OAAO,KAAK,KAAK,IAAI,OAAO,KAAK;GACjE,OAAO,KAAK;EACd,CACF;CACF,CAAC;CAEH,MAAM,qBACJ,eACE,oBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,cAAc,GAAG,WAAW,wBAAwB;EAC5E,UAAA,oBAACC,eAAD;GACE,YAAA;GACA,aAAa,OAAO;GACpB,QAAQ,oBAAC,MAAD;IAAM,MAAM;IAAQ,MAAM;GAAK,CAAA;GACvC,MAAK;GACL,OAAO;GACP,WAAW,UAAU,eAAe,MAAM,OAAO,KAAK;EACvD,CAAA;CACE,CAAA,IACH;CAEN,MAAM,QACJ,oBAAC,OAAD;EAAO,WAAW,OAAO;EAAa,aAAa,OAAO;EAAiB,WAAW;CAAK,CAAA;CAG7F,IAAI;CACJ,IAAI,OAAO,mBAAmB,YAC5B,UAAU,eAAe;EACvB,cAAc;EACd,aAAa,YAAY,KAAK;EAC9B,SAAS;EACT;EACA,WAAW,GAAG,WAAW;EACzB;EACA;EACA,SAAS;CACX,CAAC;MACI,IAAI,mBAAmB,KAAA,GAC5B,UAAU;MACL;EACL,IAAI;EACJ,IAAI,CAAC,SAAS,QACZ,OAAO;OACF,IAAI,eAAe,QAAQ;GAChC,MAAM,WAAW,WAAW,OAAO;GAEnC,MAAM,eAAe,mBAAmB,WAAW,SAAS,IAAI,IAAI;GACpE,MAAM,eAAe,SAAkB,SAAuB;IAC5D,IAAI,CAAC,gBAAgB,OAAO,gBAAgB,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;IACrE,MAAM,UAAU,YAAY,cAAc,KAAK,GAAG;IAClD,MAAM,OAAO,aAAa,cAAc,aAAa,IAAI,MAAM,CAAC,CAAC,CAAC;IAClE,IAAI,SAAS,SAAS,QAAQ,SAAS,QAAQ,KAAK,IAAI,GAAG,CAAC;SAE1D,CAAC,GAAI,SAAS,WAAW,CAAC,GAAI,GAAI,SAAS,aAAa,CAAC,CAAE,CAAC,CAAC,SAAS,QACpE,KAAK,OAAO,GAAG,CACjB;IACF,gBAAgB,CAAC,GAAG,aAAa,cAAc,IAAI,CAAC,CAAC,OAAO,CAAC;GAC/D;GACA,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,aAAa,GACd,qBAAC,OAAD;IAAK,WAAW,GAAG,OAAO,YAAY,GAAG,WAAW,sBAAsB;IAA1E,UAAA,CACG,kBACC,oBAACD,kBAAD;KACE,SAAS,aAAa,SAAS,KAAK,aAAa,WAAW,QAAQ;KACpE,WAAW,GAAG,OAAO,gBAAgB,qCAAwC;KAC7E,eAAe,aAAa,SAAS,KAAK,aAAa,SAAS,QAAQ;KACxE,WAAW,YAAY,gBAAgB,UAAU,UAAU,CAAC,CAAC;KAE5D,UAAA,OAAO;IACA,CAAA,GAEX,SAAS,SAAS,IACjB,oBAAC,MAAD;KACE,WAAA;KACA,kBAAA;KACA,eAAe,CAAC,kBAAkB,QAAQ,gBAAgB;KAC1D,aAAa,aAAa,IAAI,MAAM;KACpC,UAAU;KACV,cAAc,CAAC;KACf,MAAK;KACK;KACV,UAAU,GAAG,EAAE,SAAS,WAAW,YAAY,SAAS,IAAI;IAC7D,CAAA,IAED,KAEC;GACL,CAAA,CAAA,EAAA,CAAA;EAEN,OAAO;GACL,MAAM,QAAQ,gBAAgB,OAAO;GACrC,MAAM,OACJ,oBAAC,OAAD;IAAK,WAAW,GAAG,OAAO,YAAY,GAAG,WAAW,eAAe;IAAI,UAAA;GAAW,CAAA;GAEpF,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,aAAa,GACb,MAAM,WAAW,IAChB,QACE,iBACF,OAEA,oBAACE,YAAD;IACE,OAAO,aAAa,SAAS,OAAO,aAAa,EAAE,IAAI;IACvD,gBAAgB,UAAU,gBAAgB,SAAS,OAAO,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC;IAE7E,UAAA;GACa,CAAA,CAElB,EAAA,CAAA;EAEN;EAEA,MAAM,gBAAgB,oCAClB,UAAU,wBAAwB,CAAC,EAAA,CAAG,IAAI,MAAM,GAAG,aAAa,IAAI,MAAM,CAAC,IAC3E,aAAa,WAAW;EAE5B,UACE,qBAAA,YAAA,EAAA,UAAA,CACG,MACD,qBAAC,OAAD;GAAK,WAAW,GAAG,OAAO,eAAe,GAAG,WAAW,eAAe;GAAtE,UAAA,CACE,oBAAC,QAAD;IAAQ,UAAU;IAAe,MAAK;IAAQ,MAAK;IAAO,eAAe,QAAQ;IAC9E,UAAA,OAAO;GACF,CAAA,GACR,oBAAC,QAAD;IAAQ,MAAK;IAAQ,MAAK;IAAU,SAAS;IAC1C,UAAA,OAAO;GACF,CAAA,CACL;EACL,CAAA,CAAA,EAAA,CAAA;CAEN;CAEA,MAAM,cAAc,oBAAoB,eAAe,oBAAoB;CAC3E,MAAM,QACJ,oBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,gBAAgB,GAAG,WAAW,UAAU;EAC/D,UAAA,cAAc,YAAY,OAAO,IAAI;CACnC,CAAA;CAIP,MAAM,OAAO,OAAO,eAAe,aAAa,WAAW,QAAQ,IAAK,cAAc;CAItF,MAAM,UACJ,oBAAC,YAAD;EACE,QAAQ;EACR,oBAAkB,OAAO;EACzB,cAAY,UAAU;EACtB,WAAW,GAAG,OAAO,cAAc,GAAG,WAAW,WAAW,YAAY,OAAO,YAAY;EAC3F,eAAa,YAAY,KAAA;EACnB;EACN,KAAK;EACL,MAAK;EACL,UAAU,UAAU,MAAM,gBAAgB;CAC3C,CAAA;CAGH,IAAI,cAAc,OAAO;CAEzB,MAAM,mBAAmB,oBAAoB,qBAAqB;CAClE,MAAM,YACJ,iBAAiB,oBAAoB,WAAW,UAC5C,iBAAiB,WAAW,OAAO,IACnC,KAAA;CAEN,OACE,qBAAC,aAAD;EAAa,MAAM;EAAe,cAAc;EAAhD,UAAA,CACE,oBAAC,uBAAD,EAAA,UAAwB,QAA+B,CAAA,GACvD,oBAAC,eAAD;GAA0B;GACxB,UAAA,oBAAC,mBAAD;IACE,WAAW,oBAAoB;IAC/B,WAAW,oBAAoB,aAAa;IAC5C,YAAY;IACZ,OACE,oBAAoB,WAAW,KAAA,IAC3B,KAAA,IACA,EAAE,QAAQ,oBAAoB,OAAO;IAG3C,UAAA,oBAAC,cAAD;KACE,WAAW,GAAG,OAAO,aAAa,oBAAoB,SAAS;KAC/D,OAAO,oBAAoB;KAE1B,UAAA;IACW,CAAA;GACG,CAAA;EACN,CAAA,CACJ;;AAEjB"}

package/es/base-ui/Table/LoadingSkeleton.mjs

@@ -0,0 +1,83 @@
+"use client";
+import Skeleton from "../Skeleton/index.mjs";
+import { isColumnGroup, isColumnVisibleAt } from "./columnUtils.mjs";
+import { styles } from "./style.mjs";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/base-ui/Table/LoadingSkeleton.tsx
+const DEFAULT_ROWS = 5;
+/** Varying bar widths so consecutive rows do not look identical. */
+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];
+});
+/**
+* Body placeholder while `loading` and there are no rows. Uses the real leaf column
+* widths (plus selection / expand tracks when those columns are on) so the skeleton
+* lines up under the live header; row padding follows the table size CSS vars.
+*/
+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,
+		className: styles.skeleton,
+		"data-table-skeleton": "",
+		"data-table-skeleton-size": size === "middle" ? "medium" : size,
+		children: Array.from({ length: rowCount }, (_, rowIndex) => /* @__PURE__ */ jsx("div", {
+			className: 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", {
+					className: 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/base-ui/Table/LoadingSkeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSkeleton.mjs","names":[],"sources":["../../../src/base-ui/Table/LoadingSkeleton.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useMemo } from 'react';\n\nimport Skeleton from '@/base-ui/Skeleton';\n\nimport { isColumnGroup, isColumnVisibleAt } from './columnUtils';\nimport { EXPAND_COLUMN_WIDTH, SELECTION_COLUMN_WIDTH, styles } from './style';\nimport type { TableBreakpoint, TableColumn, TableSize } from './type';\n\nconst DEFAULT_ROWS = 5;\n\n/** Varying bar widths so consecutive rows do not look identical. */\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\n/**\n * Body placeholder while `loading` and there are no rows. Uses the real leaf column\n * widths (plus selection / expand tracks when those columns are on) so the skeleton\n * lines up under the live header; row padding follows the table size CSS vars.\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      className={styles.skeleton}\n      data-table-skeleton=\"\"\n      data-table-skeleton-size={size === 'middle' ? 'medium' : size}\n    >\n      {Array.from({ length: rowCount }, (_, rowIndex) => (\n        <div className={styles.skeletonRow} key={rowIndex} 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 className={styles.skeletonCell} key={colIndex}>\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":";;;;;;;AAUA,MAAM,eAAe;;AAGrB,MAAM,cAAc;CAAC;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;AAAE;AAWnD,MAAM,gBAAgB,UAAqC;CACzD,IAAI,OAAO,UAAU,UAAU,OAAO,GAAG,MAAM;CAC/C,IAAI,OAAO,UAAU,YAAY,OAAO,OAAO;CAC/C,OAAO;AACT;AAEA,MAAM,eACJ,SACA,YAEA,QAAQ,SAAS,WAAW;CAC1B,IAAI,CAAC,kBAAkB,QAAQ,OAAO,GAAG,OAAO,CAAC;CACjD,IAAI,cAAc,MAAM,GAAG,OAAO,YAAY,OAAO,UAAU,OAAO;CACtE,OAAO,CAAC,MAAM;AAChB,CAAC;;;;;;AAOH,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,SAAS,WAAW,KAAK,KAAK,aAAa,OAAO,KAAK,CAAC,CAAC;EAElE,OAAO;CACT,GAAG;EAAC;EAAS;EAAc;EAAS;CAAe,CAAC;CAEpD,MAAM,sBAAsB,OAAO,KAAK,GAAG;CAC3C,MAAM,WAAW,KAAK,IAAI,GAAG,IAAI;CAEjC,OACE,oBAAC,OAAD;EACE,eAAA;EACA,WAAW,OAAO;EAClB,uBAAoB;EACpB,4BAA0B,SAAS,WAAW,WAAW;EAExD,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,IAAI,GAAG,aACpC,oBAAC,OAAD;GAAK,WAAW,OAAO;GAA4B,OAAO,EAAE,oBAAoB;GAC7E,UAAA,OAAO,KAAK,GAAG,aAAa;IAG3B,MAAM,YAFmB,mBAAmB,aAAa,KACnC,gBAAgB,cAAc,kBAAkB,IAAI;IAE1E,MAAM,WAAW,YACb,MACA,aAAa,WAAW,IAAI,YAAY,YAAY;IACxD,OACE,oBAAC,OAAD;KAAK,WAAW,OAAO;KACpB,UAAA,YACC,oBAAC,UAAD;MAAU,QAAQ;MAAI,QAAQ;MAAG,OAAO;KAAK,CAAA,IAE7C,oBAAC,UAAD;MAAU,QAAQ;MAAI,QAAQ;MAAG,OAAO,GAAG,SAAS;KAAK,CAAA;IAExD,GANqC,QAMrC;GAET,CAAC;EACE,GAlBoC,QAkBpC,CACN;CACE,CAAA;AAET;AAEA,MAAM,uBAAuB,KAAK,yBAAyB"}

package/es/base-ui/Table/Table.d.mts

@@ -1,10 +1,28 @@
-import { TableProps } from "./type.mjs";
+import { TableColumn, TableProps as TableProps$1 } from "./type.mjs";
+import Column from "./Column.mjs";
+import ColumnGroup from "./ColumnGroup.mjs";
+import { SELECTION_ALL, SELECTION_INVERT, SELECTION_NONE } from "./selectionUtils.mjs";
 import { ReactNode } from "react";
-import { RowData } from "@tanstack/react-table";
+import { Summary } from "@rc-component/table";
 //#region src/base-ui/Table/Table.d.ts
-declare const Table: (<T extends RowData>(props: TableProps<T>) => ReactNode) & {
+type TableComponent = (<T>(props: TableProps$1<T>) => ReactNode) & {
+  Column: typeof Column;
+  ColumnGroup: typeof ColumnGroup;
   displayName?: string;
+  /** Placeholder in `columns` marking where the expand column goes. */
+  EXPAND_COLUMN: TableColumn<any>;
+  /** `rowSelection.selections` preset: select every row of every page. */
+  SELECTION_ALL: typeof SELECTION_ALL;
+  /** Placeholder in `columns` marking where the selection column goes. */
+  SELECTION_COLUMN: TableColumn<any>;
+  /** Rows rendered by `summary`: `Table.Summary` (`fixed`), `.Row` and `.Cell` (`index`, `colSpan`). */
+  Summary: typeof Summary;
+  /** `rowSelection.selections` preset: invert the current page. */
+  SELECTION_INVERT: typeof SELECTION_INVERT;
+  /** `rowSelection.selections` preset: clear the selection. */
+  SELECTION_NONE: typeof SELECTION_NONE;
 };
+declare const Table: TableComponent;
 //#endregion
 export { Table as default };
 //# sourceMappingURL=Table.d.mts.map