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

package/es/Table/render/FilterDropdown.mjs

@@ -0,0 +1,139 @@
+"use client";
+import ActionIcon from "../../ActionIcon/ActionIcon.mjs";
+import { PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTriggerElement } from "../../Popover/atoms.mjs";
+import { MeasureRowContext } from "./context.mjs";
+import { styles } from "../style.mjs";
+import { FILTER_CLS, sameKeys, sx } from "./filterUtils.mjs";
+import FilterPanel from "./FilterPanel.mjs";
+import { use, useEffect, useReducer, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import { ListFilter } from "lucide-react";
+//#region src/Table/render/FilterDropdown.tsx
+const DEPRECATED_PROPS = [["filterDropdownOpen", "filterDropdownProps.open"], ["onFilterDropdownOpenChange", "filterDropdownProps.onOpenChange"]];
+const warnedProps = /* @__PURE__ */ new Set();
+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.`);
+	}
+};
+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, filterOnClose = true, filterResetToDefaultFilteredValue, filters, onFilterDropdownOpenChange } = column;
+	const inMeasureRow = use(MeasureRowContext);
+	warnDeprecated(column);
+	const triggerRef = useRef(null);
+	const [visible, setVisible] = useState(false);
+	const [searchValue, setSearchValue] = useState("");
+	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());
+	};
+	const onPopoverOpenChange = (next) => {
+		if (next && propFilteredKeys !== void 0) setSelectedKeys(propFilteredKeys ?? []);
+		if (!next && !filterDropdown && filterOnClose) onConfirm();
+		else triggerOpen(next);
+	};
+	let content;
+	if (typeof filterDropdown === "function") content = filterDropdown({
+		clearFilters: onReset,
+		close: () => triggerOpen(false),
+		confirm: doFilter,
+		filters,
+		prefixCls: `${FILTER_CLS}-dropdown-custom`,
+		selectedKeys: getSelectedKeys(),
+		setSelectedKeys,
+		visible: mergedVisible
+	});
+	else if (filterDropdown !== void 0) content = filterDropdown;
+	else content = /* @__PURE__ */ jsx(FilterPanel, {
+		column,
+		locale,
+		searchValue,
+		selectedKeys: getSelectedKeys(),
+		setSelectedKeys,
+		onConfirm,
+		onReset: () => onReset(),
+		onSearchChange: setSearchValue
+	});
+	const popupRender = filterDropdownProps.popupRender ?? filterDropdownProps.dropdownRender;
+	const panel = /* @__PURE__ */ jsx("div", {
+		className: clsx$1(sx(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}`,
+		"data-active": filtered || void 0,
+		icon,
+		ref: triggerRef,
+		size: "small",
+		className: clsx$1(sx(styles.filterButton), `${FILTER_CLS}-trigger`, filtered && sx(styles.filterActive)),
+		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: clsx$1(sx(styles.filterPopup), filterDropdownProps.className),
+					style: filterDropdownProps.style,
+					children: panel
+				})
+			})
+		})]
+	});
+};
+//#endregion
+export { FilterDropdown as default };
+
+//# sourceMappingURL=FilterDropdown.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDropdown.mjs","names":["clsx"],"sources":["../../../src/Table/render/FilterDropdown.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { ListFilter } from 'lucide-react';\nimport { type Key, type ReactNode, use, useEffect, useReducer, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport {\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverRoot,\n  PopoverTriggerElement,\n} from '@/Popover';\n\nimport { type FilterKeys, type FilterState } from '../pipeline/useFilter';\nimport { styles } from '../style';\nimport type { TableColumnType, TableFilterDropdownProps, TableLocale } from '../type';\nimport { MeasureRowContext } from './context';\nimport FilterPanel from './FilterPanel';\nimport { FILTER_CLS, sameKeys, sx } from './filterUtils';\n\nconst DEPRECATED_PROPS = [\n  ['filterDropdownOpen', 'filterDropdownProps.open'],\n  ['onFilterDropdownOpenChange', 'filterDropdownProps.onOpenChange'],\n] as const;\nconst warnedProps = new Set<string>();\n\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\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    filterOnClose = true,\n    filterResetToDefaultFilteredValue,\n    filters,\n    onFilterDropdownOpenChange,\n  } = column;\n\n  const inMeasureRow = use(MeasureRowContext);\n  warnDeprecated(column);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [visible, setVisible] = useState(false);\n  const [searchValue, setSearchValue] = useState('');\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  // 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  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  const onPopoverOpenChange = (next: boolean) => {\n    if (next && propFilteredKeys !== undefined) setSelectedKeys(propFilteredKeys ?? []);\n    if (!next && !filterDropdown && filterOnClose) onConfirm();\n    else triggerOpen(next);\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: getSelectedKeys(),\n      setSelectedKeys,\n      visible: mergedVisible,\n    });\n  } else if (filterDropdown !== undefined) {\n    content = filterDropdown;\n  } else {\n    content = (\n      <FilterPanel\n        column={column}\n        locale={locale}\n        searchValue={searchValue}\n        selectedKeys={getSelectedKeys()}\n        setSelectedKeys={setSelectedKeys}\n        onConfirm={onConfirm}\n        onReset={() => onReset()}\n        onSearchChange={setSearchValue}\n      />\n    );\n  }\n\n  const popupRender = filterDropdownProps.popupRender ?? filterDropdownProps.dropdownRender;\n  const panel = (\n    <div className={clsx(sx(styles.filterDropdown), `${FILTER_CLS}-dropdown`)}>\n      {popupRender ? popupRender(content) : content}\n    </div>\n  );\n\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      data-active={filtered || undefined}\n      icon={icon}\n      ref={triggerRef}\n      size=\"small\"\n      className={clsx(\n        sx(styles.filterButton),\n        `${FILTER_CLS}-trigger`,\n        filtered && sx(styles.filterActive),\n      )}\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={clsx(sx(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":"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"}

package/es/Table/render/FilterPanel.mjs

@@ -0,0 +1,152 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import Button from "../../Button/Button.mjs";
+import Input_default from "../../Input/Input.mjs";
+import Checkbox_default from "../../Checkbox/Checkbox.mjs";
+import Empty from "../../Empty/Empty.mjs";
+import Radio from "../../Radio/Radio.mjs";
+import { PREFIX_CLS } from "../constants.mjs";
+import { styles } from "../style.mjs";
+import { conductCheck } from "../../Tree/utils.mjs";
+import Tree from "../../Tree/Tree.mjs";
+import { flattenFilterKeys } from "../pipeline/useFilter.mjs";
+import { FILTER_CLS, findLineage, sameKeys, sx, textMatches } from "./filterUtils.mjs";
+import { useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import { Search } from "lucide-react";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/Table/render/FilterPanel.tsx
+const FilterPanel = ({ column, locale, onConfirm, onReset, onSearchChange, searchValue, selectedKeys, setSelectedKeys }) => {
+	const { defaultFilteredValue, filterMode = "menu", filterMultiple = true, filterResetToDefaultFilteredValue, filters, filterSearch = false } = column;
+	const normalizedSearch = searchValue.trim().toLowerCase();
+	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: sx(styles.filterGroup),
+				role: "group",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: clsx$1(sx(styles.filterGroupTitle), `${FILTER_CLS}-dropdown-submenu-title`),
+					children: item.text
+				}), children]
+			}, key || index)];
+		}
+		if (normalizedSearch && !matches(item)) return [];
+		return [/* @__PURE__ */ jsx("div", {
+			className: clsx$1(sx(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: clsx$1(sx(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) => onSearchChange(event.target.value)
+		})
+	}) : null;
+	const empty = /* @__PURE__ */ jsx(Empty, {
+		className: sx(styles.filterEmpty),
+		description: locale.filterEmptyText,
+		imageSize: 24
+	});
+	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: clsx$1(sx(styles.filterTree), `${PREFIX_CLS}-filter-dropdown-tree`),
+			children: [filterMultiple && /* @__PURE__ */ jsx(Checkbox_default, {
+				checked: selectedKeys.length > 0 && selectedKeys.length === allKeys.length,
+				className: clsx$1(sx(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: clsx$1(sx(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;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [body, /* @__PURE__ */ jsxs("div", {
+		className: clsx$1(sx(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
+		})]
+	})] });
+};
+//#endregion
+export { FilterPanel as default };
+
+//# sourceMappingURL=FilterPanel.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.mjs","names":["clsx","Checkbox","Input","BaseRadioGroup"],"sources":["../../../src/Table/render/FilterPanel.tsx"],"sourcesContent":["'use client';\n\nimport { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport clsx from 'clsx';\nimport { Search } from 'lucide-react';\nimport { type Key, type ReactNode, useMemo } from 'react';\n\nimport Button from '@/Button';\nimport { Checkbox } from '@/Checkbox';\nimport Empty from '@/Empty';\nimport Icon from '@/Icon';\nimport { Input } from '@/Input';\nimport { Radio } from '@/Radio';\nimport Tree, { conductCheck, type TreeDataNode } from '@/Tree';\n\nimport { PREFIX_CLS } from '../constants';\nimport { flattenFilterKeys } from '../pipeline/useFilter';\nimport { styles } from '../style';\nimport type { TableColumnFilterItem, TableColumnType, TableLocale } from '../type';\nimport { FILTER_CLS, findLineage, sameKeys, sx, textMatches } from './filterUtils';\n\nexport interface FilterPanelProps<T> {\n  column: TableColumnType<T>;\n  locale: Pick<\n    TableLocale,\n    | 'filterCheckAll'\n    | 'filterConfirm'\n    | 'filterEmptyText'\n    | 'filterReset'\n    | 'filterSearchPlaceholder'\n  >;\n  onConfirm: () => void;\n  onReset: () => void;\n  onSearchChange: (value: string) => void;\n  searchValue: string;\n  selectedKeys: Key[];\n  setSelectedKeys: (keys: Key[]) => void;\n}\n\nconst FilterPanel = <T,>({\n  column,\n  locale,\n  onConfirm,\n  onReset,\n  onSearchChange,\n  searchValue,\n  selectedKeys,\n  setSelectedKeys,\n}: FilterPanelProps<T>) => {\n  const {\n    defaultFilteredValue,\n    filterMode = 'menu',\n    filterMultiple = true,\n    filterResetToDefaultFilteredValue,\n    filters,\n    filterSearch = false,\n  } = column;\n  const normalizedSearch = searchValue.trim().toLowerCase();\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={sx(styles.filterGroup)} key={key || index} role=\"group\">\n            <div\n              className={clsx(sx(styles.filterGroupTitle), `${FILTER_CLS}-dropdown-submenu-title`)}\n            >\n              {item.text}\n            </div>\n            {children}\n          </div>,\n        ];\n      }\n      if (normalizedSearch && !matches(item)) return [];\n      return [\n        <div className={clsx(sx(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={clsx(sx(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) => onSearchChange(event.target.value)}\n        />\n      </div>\n    ) : null;\n\n  const empty = (\n    <Empty className={sx(styles.filterEmpty)} description={locale.filterEmptyText} imageSize={24} />\n  );\n\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={clsx(sx(styles.filterTree), `${PREFIX_CLS}-filter-dropdown-tree`)}>\n          {filterMultiple && (\n            <Checkbox\n              checked={selectedKeys.length > 0 && selectedKeys.length === allKeys.length}\n              className={clsx(sx(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={clsx(sx(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  return (\n    <>\n      {body}\n      <div className={clsx(sx(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\nexport default FilterPanel;\n"],"mappings":"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"}

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