@cube-dev/ui-kit 0.200.1 → 0.202.0

package/dist/components/fields/FilterPicker/FilterTree.js

@@ -0,0 +1,413 @@
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
+import { LoadingIcon } from "../../../icons/LoadingIcon.js";
+import { useI18n } from "../../../i18n/useI18n.js";
+import { Item as _Item } from "../../content/Item/Item.js";
+import { StyledFooter } from "../../actions/Menu/styled.js";
+import { buildTreeIndex, getTreeNodeText } from "../../content/Tree/tree-index.js";
+import { deriveCheckedSets, toOrderedKeys, toggleCheckedKey } from "../../content/Tree/checked-keys.js";
+import { Tree } from "../../content/Tree/Tree.js";
+import { FilterListBoxWrapperElement, SearchInputElement, SearchWrapperElement, StyledHeaderWithoutBorder } from "../FilterListBox/styled.js";
+import { getTreeRowId } from "../../content/Tree/rowId.js";
+import { c } from "react/compiler-runtime";
+import { tasty } from "@tenphi/tasty";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFilter, useId as useId$1, useKeyboard } from "react-aria";
+//#region src/components/fields/FilterPicker/FilterTree.tsx
+const FilterTreeListElement = tasty({
+	qa: "FilterTreeList",
+	styles: {
+		display: "grid",
+		gridColumns: "1sf",
+		gridRows: "1sf",
+		height: "min 0"
+	}
+});
+/** With a footer, the frame takes a fourth row for it. */
+const FOOTER_ROWS_STYLES = { gridRows: "max-content max-content 1sf max-content" };
+/**
+* Keep the nodes that match, each with its whole subtree, and the ancestors
+* of deeper matches with only their matching branches. `expandKeys` are the
+* nodes with a match below them, matching or not, so they open to show it.
+*/
+function filterTreeData(nodes, query, match, expandKeys = []) {
+	const kept = [];
+	for (const node of nodes) {
+		if (match(getTreeNodeText(node), query)) {
+			kept.push(node);
+			if (node.children && filterTreeData(node.children, query, match, expandKeys).nodes.length) expandKeys.push(node.key);
+			continue;
+		}
+		const children = node.children ? filterTreeData(node.children, query, match, expandKeys).nodes : [];
+		if (children.length) {
+			kept.push({
+				...node,
+				children
+			});
+			expandKeys.push(node.key);
+		}
+	}
+	return {
+		nodes: kept,
+		expandKeys
+	};
+}
+/** The rows a keyboard can reach, top to bottom. */
+function getNavigableRows(nodes, expanded, out = []) {
+	for (const node of nodes) {
+		if (!node.isDisabled) out.push(node);
+		if (node.children && expanded.has(node.key)) getNavigableRows(node.children, expanded, out);
+	}
+	return out;
+}
+/**
+* FilterPicker's popover in tree mode: FilterListBox's header, search row
+* and footer around a checkable `Tree`.
+*
+* The search input keeps focus and points at the active row with
+* `aria-activedescendant`, as FilterListBox does for its options. The
+* checkbox cascade runs over the whole `treeData`, never only the rows a
+* search left visible.
+*/
+function FilterTree(props) {
+	const $ = c(43);
+	const { treeData, checkedKeys, onCheckedKeysChange, expandedKeys, onExpand, searchValue: controlledSearchValue, onSearchChange, searchInputStyles, searchInputRef, filter, header, headerStyles, footer, footerStyles, size: t0, isDisabled, isLoadingItems, shouldFocusWrap, autoFocus, onEscape, onCommit } = props;
+	const size = t0 === void 0 ? "medium" : t0;
+	const { t } = useI18n();
+	const { searchPlaceholder: t1, emptyLabel } = props;
+	let t2;
+	if ($[0] !== t || $[1] !== t1) {
+		t2 = t1 === void 0 ? t("filterListBox.searchPlaceholder", "Search...") : t1;
+		$[0] = t;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	const searchPlaceholder = t2;
+	const ariaLabel = props["aria-label"];
+	const treeId = useId$1();
+	const inputRef = useRef(null);
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = { sensitivity: "base" };
+		$[3] = t3;
+	} else t3 = $[3];
+	const { contains } = useFilter(t3);
+	const [internalSearchValue, setInternalSearchValue] = useState("");
+	const searchValue = controlledSearchValue ?? internalSearchValue;
+	let t4;
+	if ($[4] !== searchValue) {
+		t4 = searchValue.trim();
+		$[4] = searchValue;
+		$[5] = t4;
+	} else t4 = $[5];
+	const query = t4;
+	const isSearching = !!query && filter !== false;
+	const [searchExpansion, setSearchExpansion] = useState(null);
+	const [expansionQuery, setExpansionQuery] = useState(query);
+	if (expansionQuery !== query) {
+		setExpansionQuery(query);
+		setSearchExpansion(null);
+	}
+	let t5;
+	if ($[6] !== controlledSearchValue || $[7] !== onSearchChange) {
+		t5 = (value) => {
+			if (controlledSearchValue === void 0) setInternalSearchValue(value);
+			onSearchChange?.(value);
+		};
+		$[6] = controlledSearchValue;
+		$[7] = onSearchChange;
+		$[8] = t5;
+	} else t5 = $[8];
+	const setSearchValue = t5;
+	const index = buildTreeIndex(treeData);
+	const { checked, halfChecked } = deriveCheckedSets(treeData, index, checkedKeys);
+	const filtered = isSearching ? filterTreeData(treeData, query, typeof filter === "function" ? filter : contains) : {
+		nodes: treeData,
+		expandKeys: []
+	};
+	const expanded = isSearching ? searchExpansion ?? filtered.expandKeys : expandedKeys;
+	const expandedSet = new Set(expanded);
+	let t6;
+	if ($[9] !== isSearching || $[10] !== onExpand) {
+		t6 = (keys) => {
+			if (isSearching) {
+				setSearchExpansion(keys);
+				return;
+			}
+			onExpand(keys);
+		};
+		$[9] = isSearching;
+		$[10] = onExpand;
+		$[11] = t6;
+	} else t6 = $[11];
+	const setExpanded = t6;
+	const rows = getNavigableRows(filtered.nodes, expandedSet);
+	const rowKeys = rows.map(_temp);
+	const [storedActiveKey, setActiveKey] = useState(null);
+	const activeKey = storedActiveKey != null && rowKeys.includes(storedActiveKey) ? storedActiveKey : rowKeys.find((key) => checked.has(key)) ?? rowKeys[0] ?? null;
+	const toggle = (key_0) => {
+		const next = toggleCheckedKey(index, checked, key_0);
+		if (!next) return false;
+		onCheckedKeysChange(toOrderedKeys(index, deriveCheckedSets(treeData, index, next).checked));
+		return true;
+	};
+	const toggleActive = (key_1) => {
+		setActiveKey(key_1);
+		return toggle(key_1);
+	};
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = () => {
+			setTimeout(() => inputRef.current?.focus(), 0);
+		};
+		$[12] = t7;
+	} else t7 = $[12];
+	const refocusSearch = t7;
+	let t8;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = (key_2) => {
+			if (key_2 != null) setActiveKey(key_2);
+		};
+		$[13] = t8;
+	} else t8 = $[13];
+	const moveActive = t8;
+	const getActiveRow = () => activeKey == null ? void 0 : rows.find((row_0) => row_0.key === activeKey);
+	const handleArrow = (direction) => {
+		const position = activeKey == null ? -1 : rowKeys.indexOf(activeKey);
+		let next_0 = position + direction;
+		if (position < 0) next_0 = direction === 1 ? 0 : rowKeys.length - 1;
+		if (next_0 < 0 || next_0 >= rowKeys.length) {
+			if (!shouldFocusWrap) return;
+			next_0 = (next_0 + rowKeys.length) % rowKeys.length;
+		}
+		moveActive(rowKeys[next_0]);
+	};
+	const handleExpandKey = (input, direction_0) => {
+		const row_1 = getActiveRow();
+		if (!row_1) return false;
+		const caret = input.selectionStart ?? 0;
+		if (!(input.selectionStart === input.selectionEnd && (direction_0 === "open" ? caret === input.value.length : caret === 0))) return false;
+		const hasChildren = !!row_1.children?.length;
+		const isExpanded = expandedSet.has(row_1.key);
+		if (direction_0 === "open") {
+			if (!hasChildren) return false;
+			if (!isExpanded) setExpanded([...expanded, row_1.key]);
+			else moveActive(row_1.children?.find(_temp2)?.key);
+			return true;
+		}
+		if (hasChildren && isExpanded) {
+			setExpanded(expanded.filter((key_3) => key_3 !== row_1.key));
+			return true;
+		}
+		let parentKey = index.parentOf.get(row_1.key);
+		while (parentKey != null && !rowKeys.includes(parentKey)) parentKey = index.parentOf.get(parentKey);
+		if (parentKey == null) return false;
+		moveActive(parentKey);
+		return true;
+	};
+	const { keyboardProps } = useKeyboard({ onKeyDown: (e) => {
+		bb179: switch (e.key) {
+			case "ArrowDown":
+			case "ArrowUp":
+				e.preventDefault();
+				handleArrow(e.key === "ArrowDown" ? 1 : -1);
+				break bb179;
+			case "Home":
+			case "End":
+			case "PageUp":
+			case "PageDown":
+				e.preventDefault();
+				moveActive(e.key === "Home" || e.key === "PageUp" ? rowKeys[0] : rowKeys[rowKeys.length - 1]);
+				break bb179;
+			case "ArrowRight":
+			case "ArrowLeft":
+				if (handleExpandKey(e.target, e.key === "ArrowRight" ? "open" : "close")) e.preventDefault();
+				break bb179;
+			case "Enter":
+				if (activeKey == null) break bb179;
+				e.preventDefault();
+				if (toggleActive(activeKey)) onCommit?.();
+				break bb179;
+			case " ":
+				if (activeKey == null || searchValue) break bb179;
+				e.preventDefault();
+				toggleActive(activeKey);
+				break bb179;
+			case "Escape":
+				if (searchValue) {
+					e.preventDefault();
+					setSearchValue("");
+				} else if (onEscape) {
+					e.preventDefault();
+					onEscape();
+				}
+				break bb179;
+		}
+	} });
+	const t9 = !!isDisabled;
+	const t10 = !!isLoadingItems;
+	const t11 = !!isLoadingItems;
+	let t12;
+	if ($[14] !== t10 || $[15] !== t11 || $[16] !== t9) {
+		t12 = {
+			disabled: t9,
+			"loading-items": t10,
+			searchable: true,
+			suffix: t11
+		};
+		$[14] = t10;
+		$[15] = t11;
+		$[16] = t9;
+		$[17] = t12;
+	} else t12 = $[17];
+	const searchMods = t12;
+	let t13;
+	if ($[18] !== emptyLabel || $[19] !== query || $[20] !== t) {
+		t13 = emptyLabel !== void 0 ? emptyLabel : query ? t("filterListBox.noResults", "No results found") : t("filterListBox.noItems", "No items");
+		$[18] = emptyLabel;
+		$[19] = query;
+		$[20] = t;
+		$[21] = t13;
+	} else t13 = $[21];
+	const resolvedEmptyLabel = t13;
+	let t14;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = { popover: true };
+		$[22] = t14;
+	} else t14 = $[22];
+	let t15;
+	if ($[23] !== header || $[24] !== headerStyles || $[25] !== size) {
+		t15 = header ? /* @__PURE__ */ jsx(StyledHeaderWithoutBorder, {
+			"data-size": size,
+			styles: headerStyles,
+			children: header
+		}) : /* @__PURE__ */ jsx("div", { role: "presentation" });
+		$[23] = header;
+		$[24] = headerStyles;
+		$[25] = size;
+		$[26] = t15;
+	} else t15 = $[26];
+	let t16;
+	if ($[27] !== searchInputRef) {
+		t16 = mergeRefs(inputRef, searchInputRef);
+		$[27] = searchInputRef;
+		$[28] = t16;
+	} else t16 = $[28];
+	let t17;
+	if ($[29] !== autoFocus) {
+		t17 = autoFocus ? { "data-autofocus": "" } : void 0;
+		$[29] = autoFocus;
+		$[30] = t17;
+	} else t17 = $[30];
+	let t18;
+	if ($[31] !== setSearchValue) {
+		t18 = (e_0) => setSearchValue(e_0.target.value);
+		$[31] = setSearchValue;
+		$[32] = t18;
+	} else t18 = $[32];
+	let t19;
+	if ($[33] !== isLoadingItems) {
+		t19 = isLoadingItems && /* @__PURE__ */ jsx("div", {
+			"data-element": "Suffix",
+			children: /* @__PURE__ */ jsx(LoadingIcon, { "data-element": "InputIcon" })
+		});
+		$[33] = isLoadingItems;
+		$[34] = t19;
+	} else t19 = $[34];
+	const T0 = FilterTreeListElement;
+	const t20 = filtered.nodes.length ? refocusSearch : void 0;
+	const t21 = filtered.nodes.length ? /* @__PURE__ */ jsx(Tree, {
+		id: treeId,
+		qa: "FilterTree",
+		ariaLabel,
+		treeData: filtered.nodes,
+		size,
+		isCheckable: true,
+		isDisabled,
+		selectionMode: "none",
+		checkedKeys: {
+			checked: [...checked],
+			halfChecked: [...halfChecked]
+		},
+		expandedKeys: expanded,
+		_activeKey: activeKey,
+		onExpand: (keys_0) => setExpanded(keys_0.map(String)),
+		onCheck: (_, info) => toggle(info.node.key),
+		_onRowAction: toggleActive
+	}) : /* @__PURE__ */ jsx(_Item, {
+		preset: "t4",
+		color: "#dark-03",
+		size,
+		padding: "(.5x - 1bw)",
+		children: resolvedEmptyLabel
+	});
+	let t22;
+	if ($[35] !== T0 || $[36] !== t20 || $[37] !== t21) {
+		t22 = /* @__PURE__ */ jsx(T0, {
+			onFocus: t20,
+			children: t21
+		});
+		$[35] = T0;
+		$[36] = t20;
+		$[37] = t21;
+		$[38] = t22;
+	} else t22 = $[38];
+	let t23;
+	if ($[39] !== footer || $[40] !== footerStyles || $[41] !== size) {
+		t23 = footer ? /* @__PURE__ */ jsx(StyledFooter, {
+			styles: footerStyles,
+			"data-size": size,
+			children: footer
+		}) : null;
+		$[39] = footer;
+		$[40] = footerStyles;
+		$[41] = size;
+		$[42] = t23;
+	} else t23 = $[42];
+	return /* @__PURE__ */ jsxs(FilterListBoxWrapperElement, {
+		qa: "FilterTreeWrapper",
+		mods: t14,
+		styles: footer ? FOOTER_ROWS_STYLES : void 0,
+		children: [
+			t15,
+			/* @__PURE__ */ jsxs(SearchWrapperElement, {
+				mods: searchMods,
+				"data-size": size,
+				children: [/* @__PURE__ */ jsx(SearchInputElement, {
+					ref: t16,
+					qa: "FilterTreeSearch",
+					type: "search",
+					role: "combobox",
+					"aria-expanded": "true",
+					"aria-haspopup": "tree",
+					"aria-controls": filtered.nodes.length ? treeId : void 0,
+					"aria-activedescendant": activeKey == null ? void 0 : getTreeRowId(treeId, activeKey),
+					"aria-label": ariaLabel,
+					placeholder: searchPlaceholder,
+					value: searchValue,
+					disabled: isDisabled,
+					autoFocus,
+					...t17,
+					"data-size": size,
+					mods: searchMods,
+					styles: searchInputStyles,
+					onChange: t18,
+					...keyboardProps
+				}), t19]
+			}),
+			t22,
+			t23
+		]
+	});
+}
+function _temp2(child) {
+	return !child.isDisabled;
+}
+function _temp(row) {
+	return row.key;
+}
+//#endregion
+export { FilterTree };
+
+//# sourceMappingURL=FilterTree.js.map

package/dist/components/fields/FilterPicker/FilterTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterTree.js","names":["tasty","useRef","useState","useFilter","useId","useKeyboard","useI18n","LoadingIcon","mergeRefs","StyledFooter","Item","deriveCheckedSets","toggleCheckedKey","toOrderedKeys","getTreeRowId","Tree","buildTreeIndex","getTreeNodeText","FilterListBoxWrapperElement","SearchInputElement","SearchWrapperElement","StyledHeaderWithoutBorder","Styles","ReactNode","RefObject","CubeTreeNodeData","FilterFn","textValue","inputValue","FilterTreeProps","treeData","checkedKeys","onCheckedKeysChange","keys","expandedKeys","onExpand","searchValue","onSearchChange","value","searchPlaceholder","searchInputStyles","searchInputRef","HTMLInputElement","filter","emptyLabel","header","headerStyles","footer","footerStyles","size","isDisabled","isLoadingItems","shouldFocusWrap","autoFocus","onEscape","onCommit","FilterTreeListElement","qa","styles","display","gridColumns","gridRows","height","FOOTER_ROWS_STYLES","filterTreeData","nodes","query","match","expandKeys","kept","node","push","children","length","key","getNavigableRows","expanded","Set","out","has","FilterTree","props","$","_c","controlledSearchValue","t0","undefined","t","t1","t2","ariaLabel","treeId","inputRef","t3","Symbol","for","sensitivity","contains","internalSearchValue","setInternalSearchValue","t4","trim","isSearching","searchExpansion","setSearchExpansion","expansionQuery","setExpansionQuery","t5","setSearchValue","index","checked","halfChecked","filtered","expandedSet","t6","setExpanded","rows","rowKeys","map","_temp","storedActiveKey","setActiveKey","activeKey","includes","find","toggle","key_0","next","toggleActive","key_1","t7","setTimeout","current","focus","refocusSearch","t8","key_2","moveActive","getActiveRow","row_0","row","handleArrow","direction","position","indexOf","next_0","handleExpandKey","input","direction_0","row_1","caret","selectionStart","atEdge","selectionEnd","hasChildren","isExpanded","_temp2","key_3","parentKey","parentOf","get","keyboardProps","onKeyDown","e","bb179","preventDefault","target","t9","t10","t11","t12","disabled","searchable","suffix","searchMods","t13","resolvedEmptyLabel","t14","popover","t15","t16","t17","t18","e_0","t19","T0","t20","t21","keys_0","String","_","info","t22","t23","child","_c","useId","Item"],"sources":["../../../../src/components/fields/FilterPicker/FilterTree.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { useRef, useState } from 'react';\nimport { useFilter, useId, useKeyboard } from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { mergeRefs } from '../../../utils/react/useCombinedRefs';\nimport { StyledFooter } from '../../actions/Menu/styled';\nimport { Item } from '../../content/Item/Item';\nimport {\n  deriveCheckedSets,\n  toggleCheckedKey,\n  toOrderedKeys,\n} from '../../content/Tree/checked-keys';\nimport { getTreeRowId } from '../../content/Tree/rowId';\nimport { Tree } from '../../content/Tree/Tree';\nimport { buildTreeIndex, getTreeNodeText } from '../../content/Tree/tree-index';\nimport {\n  FilterListBoxWrapperElement,\n  SearchInputElement,\n  SearchWrapperElement,\n  StyledHeaderWithoutBorder,\n} from '../FilterListBox/styled';\n\nimport type { Styles } from '@tenphi/tasty';\nimport type { ReactNode, RefObject } from 'react';\nimport type { CubeTreeNodeData } from '../../content/Tree/types';\n\ntype FilterFn = (textValue: string, inputValue: string) => boolean;\n\nexport interface FilterTreeProps {\n  treeData: CubeTreeNodeData[];\n  /** The value: checked keys over the whole tree. A parent key checks its subtree. */\n  checkedKeys: readonly string[];\n  /** Every fully checked key, parents included, in tree order. */\n  onCheckedKeysChange: (keys: string[]) => void;\n  /** The user's expansion. FilterPicker holds it, so it outlives the popover. */\n  expandedKeys: string[];\n  onExpand: (keys: string[]) => void;\n  searchValue?: string;\n  onSearchChange?: (value: string) => void;\n  searchPlaceholder?: string;\n  searchInputStyles?: Styles;\n  searchInputRef?: RefObject<HTMLInputElement | null>;\n  filter?: FilterFn | false;\n  emptyLabel?: ReactNode;\n  header?: ReactNode;\n  headerStyles?: Styles;\n  footer?: ReactNode;\n  footerStyles?: Styles;\n  size?: 'medium' | 'large';\n  isDisabled?: boolean;\n  isLoadingItems?: boolean;\n  shouldFocusWrap?: boolean;\n  autoFocus?: boolean;\n  'aria-label'?: string;\n  /** Escape on an empty search. */\n  onEscape?: () => void;\n  /** Enter toggled the active row. FilterPicker closes the popover, as it does for a checkable list. */\n  onCommit?: () => void;\n}\n\nconst FilterTreeListElement = tasty({\n  qa: 'FilterTreeList',\n  styles: {\n    display: 'grid',\n    gridColumns: '1sf',\n    gridRows: '1sf',\n    height: 'min 0',\n  },\n});\n\n/** With a footer, the frame takes a fourth row for it. */\nconst FOOTER_ROWS_STYLES: Styles = {\n  gridRows: 'max-content max-content 1sf max-content',\n};\n\n/**\n * Keep the nodes that match, each with its whole subtree, and the ancestors\n * of deeper matches with only their matching branches. `expandKeys` are the\n * nodes with a match below them, matching or not, so they open to show it.\n */\nfunction filterTreeData(\n  nodes: CubeTreeNodeData[],\n  query: string,\n  match: FilterFn,\n  expandKeys: string[] = [],\n): { nodes: CubeTreeNodeData[]; expandKeys: string[] } {\n  const kept: CubeTreeNodeData[] = [];\n\n  for (const node of nodes) {\n    if (match(getTreeNodeText(node), query)) {\n      kept.push(node);\n      if (\n        node.children &&\n        filterTreeData(node.children, query, match, expandKeys).nodes.length\n      ) {\n        expandKeys.push(node.key);\n      }\n      continue;\n    }\n\n    const children = node.children\n      ? filterTreeData(node.children, query, match, expandKeys).nodes\n      : [];\n\n    if (children.length) {\n      kept.push({ ...node, children });\n      expandKeys.push(node.key);\n    }\n  }\n\n  return { nodes: kept, expandKeys };\n}\n\n/** The rows a keyboard can reach, top to bottom. */\nfunction getNavigableRows(\n  nodes: CubeTreeNodeData[],\n  expanded: Set<string>,\n  out: CubeTreeNodeData[] = [],\n): CubeTreeNodeData[] {\n  for (const node of nodes) {\n    if (!node.isDisabled) out.push(node);\n    if (node.children && expanded.has(node.key)) {\n      getNavigableRows(node.children, expanded, out);\n    }\n  }\n\n  return out;\n}\n\n/**\n * FilterPicker's popover in tree mode: FilterListBox's header, search row\n * and footer around a checkable `Tree`.\n *\n * The search input keeps focus and points at the active row with\n * `aria-activedescendant`, as FilterListBox does for its options. The\n * checkbox cascade runs over the whole `treeData`, never only the rows a\n * search left visible.\n */\nexport function FilterTree(props: FilterTreeProps) {\n  const {\n    treeData,\n    checkedKeys,\n    onCheckedKeysChange,\n    expandedKeys,\n    onExpand,\n    searchValue: controlledSearchValue,\n    onSearchChange,\n    searchInputStyles,\n    searchInputRef,\n    filter,\n    header,\n    headerStyles,\n    footer,\n    footerStyles,\n    size = 'medium',\n    isDisabled,\n    isLoadingItems,\n    shouldFocusWrap,\n    autoFocus,\n    onEscape,\n    onCommit,\n  } = props;\n  const { t } = useI18n();\n  const {\n    searchPlaceholder = t('filterListBox.searchPlaceholder', 'Search...'),\n    emptyLabel,\n  } = props;\n  const ariaLabel = props['aria-label'];\n\n  const treeId = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { contains } = useFilter({ sensitivity: 'base' });\n\n  const [internalSearchValue, setInternalSearchValue] = useState('');\n  const searchValue = controlledSearchValue ?? internalSearchValue;\n  const query = searchValue.trim();\n  const isSearching = !!query && filter !== false;\n\n  // Expansion during a search is its own: it starts from the ancestors of\n  // the matches and resets whenever the query changes, typed or controlled.\n  // Clearing the search brings back the expansion the user had, untouched.\n  const [searchExpansion, setSearchExpansion] = useState<string[] | null>(null);\n  const [expansionQuery, setExpansionQuery] = useState(query);\n\n  if (expansionQuery !== query) {\n    setExpansionQuery(query);\n    setSearchExpansion(null);\n  }\n\n  const setSearchValue = (value: string) => {\n    if (controlledSearchValue === undefined) setInternalSearchValue(value);\n    onSearchChange?.(value);\n  };\n\n  const index = buildTreeIndex(treeData);\n  const { checked, halfChecked } = deriveCheckedSets(\n    treeData,\n    index,\n    checkedKeys,\n  );\n\n  const filtered = isSearching\n    ? filterTreeData(\n        treeData,\n        query,\n        typeof filter === 'function' ? filter : contains,\n      )\n    : { nodes: treeData, expandKeys: [] };\n\n  const expanded = isSearching\n    ? (searchExpansion ?? filtered.expandKeys)\n    : expandedKeys;\n  const expandedSet = new Set(expanded);\n\n  const setExpanded = (keys: string[]) => {\n    if (isSearching) {\n      setSearchExpansion(keys);\n      return;\n    }\n    onExpand(keys);\n  };\n\n  const rows = getNavigableRows(filtered.nodes, expandedSet);\n  const rowKeys = rows.map((row) => row.key);\n\n  // The row the search input points at. One that a search or a collapse\n  // hid falls back to the first checked row in view, then the first row.\n  const [storedActiveKey, setActiveKey] = useState<string | null>(null);\n  const activeKey =\n    storedActiveKey != null && rowKeys.includes(storedActiveKey)\n      ? storedActiveKey\n      : (rowKeys.find((key) => checked.has(key)) ?? rowKeys[0] ?? null);\n\n  // Whether the node could be toggled: one with its checkbox disabled or\n  // opted out stays as it is.\n  const toggle = (key: string): boolean => {\n    const next = toggleCheckedKey(index, checked, key);\n    if (!next) return false;\n    onCheckedKeysChange(\n      toOrderedKeys(index, deriveCheckedSets(treeData, index, next).checked),\n    );\n    return true;\n  };\n\n  // Toggle the active row and keep it active, though the fallback above\n  // would move away from a row that is no longer checked.\n  const toggleActive = (key: string) => {\n    setActiveKey(key);\n    return toggle(key);\n  };\n\n  // A press on a row, its checkbox or its chevron moves DOM focus into the\n  // tree; hand it back so typing and arrow keys keep working.\n  const refocusSearch = () => {\n    setTimeout(() => inputRef.current?.focus(), 0);\n  };\n\n  const moveActive = (key: string | undefined) => {\n    if (key != null) setActiveKey(key);\n  };\n\n  const getActiveRow = () =>\n    activeKey == null ? undefined : rows.find((row) => row.key === activeKey);\n\n  const handleArrow = (direction: 1 | -1) => {\n    const position = activeKey == null ? -1 : rowKeys.indexOf(activeKey);\n    let next = position + direction;\n    if (position < 0) next = direction === 1 ? 0 : rowKeys.length - 1;\n    if (next < 0 || next >= rowKeys.length) {\n      if (!shouldFocusWrap) return;\n      next = (next + rowKeys.length) % rowKeys.length;\n    }\n    moveActive(rowKeys[next]);\n  };\n\n  // Right and Left reach the tree only where they can no longer move the\n  // caret: at the end of the text, and at its start.\n  const handleExpandKey = (\n    input: HTMLInputElement,\n    direction: 'open' | 'close',\n  ): boolean => {\n    const row = getActiveRow();\n    if (!row) return false;\n\n    const caret = input.selectionStart ?? 0;\n    const atEdge =\n      input.selectionStart === input.selectionEnd &&\n      (direction === 'open' ? caret === input.value.length : caret === 0);\n    if (!atEdge) return false;\n\n    const hasChildren = !!row.children?.length;\n    const isExpanded = expandedSet.has(row.key);\n\n    if (direction === 'open') {\n      if (!hasChildren) return false;\n      if (!isExpanded) {\n        setExpanded([...expanded, row.key]);\n      } else {\n        moveActive(row.children?.find((child) => !child.isDisabled)?.key);\n      }\n      return true;\n    }\n\n    if (hasChildren && isExpanded) {\n      setExpanded(expanded.filter((key) => key !== row.key));\n      return true;\n    }\n\n    // The nearest ancestor the keyboard can reach; a disabled one is skipped.\n    let parentKey = index.parentOf.get(row.key);\n    while (parentKey != null && !rowKeys.includes(parentKey)) {\n      parentKey = index.parentOf.get(parentKey);\n    }\n    if (parentKey == null) return false;\n    moveActive(parentKey);\n    return true;\n  };\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: (e) => {\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowUp':\n          e.preventDefault();\n          handleArrow(e.key === 'ArrowDown' ? 1 : -1);\n          break;\n        case 'Home':\n        case 'End':\n        case 'PageUp':\n        case 'PageDown':\n          e.preventDefault();\n          moveActive(\n            e.key === 'Home' || e.key === 'PageUp'\n              ? rowKeys[0]\n              : rowKeys[rowKeys.length - 1],\n          );\n          break;\n        case 'ArrowRight':\n        case 'ArrowLeft':\n          if (\n            handleExpandKey(\n              e.target as HTMLInputElement,\n              e.key === 'ArrowRight' ? 'open' : 'close',\n            )\n          ) {\n            e.preventDefault();\n          }\n          break;\n        case 'Enter':\n          if (activeKey == null) break;\n          e.preventDefault();\n          if (toggleActive(activeKey)) onCommit?.();\n          break;\n        case ' ':\n          if (activeKey == null || searchValue) break;\n          e.preventDefault();\n          toggleActive(activeKey);\n          break;\n        case 'Escape':\n          if (searchValue) {\n            e.preventDefault();\n            setSearchValue('');\n          } else if (onEscape) {\n            e.preventDefault();\n            onEscape();\n          }\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  const searchMods = {\n    disabled: !!isDisabled,\n    'loading-items': !!isLoadingItems,\n    searchable: true,\n    suffix: !!isLoadingItems,\n  };\n\n  const resolvedEmptyLabel =\n    emptyLabel !== undefined\n      ? emptyLabel\n      : query\n        ? t('filterListBox.noResults', 'No results found')\n        : t('filterListBox.noItems', 'No items');\n\n  return (\n    <FilterListBoxWrapperElement\n      qa=\"FilterTreeWrapper\"\n      mods={{ popover: true }}\n      styles={footer ? FOOTER_ROWS_STYLES : undefined}\n    >\n      {header ? (\n        <StyledHeaderWithoutBorder data-size={size} styles={headerStyles}>\n          {header}\n        </StyledHeaderWithoutBorder>\n      ) : (\n        <div role=\"presentation\" />\n      )}\n      <SearchWrapperElement mods={searchMods} data-size={size}>\n        <SearchInputElement\n          ref={mergeRefs(inputRef, searchInputRef)}\n          qa=\"FilterTreeSearch\"\n          type=\"search\"\n          role=\"combobox\"\n          aria-expanded=\"true\"\n          aria-haspopup=\"tree\"\n          aria-controls={filtered.nodes.length ? treeId : undefined}\n          aria-activedescendant={\n            activeKey == null ? undefined : getTreeRowId(treeId, activeKey)\n          }\n          aria-label={ariaLabel}\n          placeholder={searchPlaceholder}\n          value={searchValue}\n          disabled={isDisabled}\n          autoFocus={autoFocus}\n          {...(autoFocus ? { 'data-autofocus': '' } : undefined)}\n          data-size={size}\n          mods={searchMods}\n          styles={searchInputStyles}\n          onChange={(e) => setSearchValue(e.target.value)}\n          {...keyboardProps}\n        />\n        {isLoadingItems && (\n          <div data-element=\"Suffix\">\n            <LoadingIcon data-element=\"InputIcon\" />\n          </div>\n        )}\n      </SearchWrapperElement>\n      <FilterTreeListElement\n        // Only the tree's own focus goes back: an empty label may hold a\n        // control, such as Retry, that the keyboard has to reach.\n        onFocus={filtered.nodes.length ? refocusSearch : undefined}\n      >\n        {filtered.nodes.length ? (\n          <Tree\n            id={treeId}\n            qa=\"FilterTree\"\n            ariaLabel={ariaLabel}\n            treeData={filtered.nodes}\n            size={size}\n            isCheckable\n            isDisabled={isDisabled}\n            selectionMode=\"none\"\n            checkedKeys={{\n              checked: [...checked],\n              halfChecked: [...halfChecked],\n            }}\n            expandedKeys={expanded}\n            _activeKey={activeKey}\n            onExpand={(keys) => setExpanded(keys.map(String))}\n            onCheck={(_, info) => toggle(info.node.key)}\n            _onRowAction={toggleActive}\n          />\n        ) : (\n          <Item preset=\"t4\" color=\"#dark-03\" size={size} padding=\"(.5x - 1bw)\">\n            {resolvedEmptyLabel}\n          </Item>\n        )}\n      </FilterTreeListElement>\n      {footer ? (\n        <StyledFooter styles={footerStyles} data-size={size}>\n          {footer}\n        </StyledFooter>\n      ) : null}\n    </FilterListBoxWrapperElement>\n  );\n}\n"],"mappings":"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"}

package/dist/components/fields/Input/Input.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { FileInput as _FileInput } from "../FileInput/FileInput.js";
 import { NumberInput as _NumberInput } from "../NumberInput/NumberInput.js";
 import { PasswordInput as _PasswordInput } from "../PasswordInput/PasswordInput.js";

package/dist/components/fields/ListBox/DraggableListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/ListBox/ListBox.d.ts

@@ -2,13 +2,14 @@
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { CollectionItem as _CollectionItem, CubeCollectionItemProps } from "../../CollectionItem.js";
-import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
+import { BasePropsWithoutChildren, Styles } from "@tenphi/tasty";
 import { ForwardedRef, ReactElement, ReactNode, RefObject } from "react";
 import { AriaListBoxProps } from "react-aria";
 import { Section } from "react-stately";
 import { CollectionBase, Key as Key$2 } from "@react-types/shared";
 //#region src/components/fields/ListBox/ListBox.d.ts
-export interface CubeListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'autoFocus' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange'>, CollectionBase<T>, FieldBaseProps<Key$2 | readonly Key$2[] | null | undefined>, BasePropsWithoutChildren, BaseStyleProps, OuterStyleProps, ColorStyleProps {
+export interface CubeListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'autoFocus' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange'>, CollectionBase<T>, FieldBaseProps<Key$2 | readonly Key$2[] | null | undefined>, BasePropsWithoutChildren, FieldLayoutStyleProps {
   /** Custom styles for the list container */
   listStyles?: Styles;
   /** Custom styles for individual options */

package/dist/components/fields/ListBox/ListBox.js

@@ -1,5 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
@@ -15,12 +14,13 @@ import { allowOverlayKeysToPropagate } from "../../../utils/react/overlayKeyProp
 import { getValidationMods, getValidationTheme } from "../../form/validation/resolve-validation-props.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { splitFieldLayout } from "../../form/field-layout.js";
 import { GripVerticalIcon } from "../../../icons/GripVerticalIcon.js";
 import { createMockDragState } from "../../shared/DraggableCollection.js";
 import { useOptionOriginPress } from "../option-origin-press.js";
 import { DraggableListBox } from "./DraggableListBox.js";
 import { c } from "react/compiler-runtime";
-import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, mergeStyles, tasty } from "@tenphi/tasty";
+import { mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps, useDraggableItem, useDropIndicator, useFocusRing, useKeyboard, useListBox, useListBoxSection, useOption } from "react-aria";
@@ -248,11 +248,6 @@ function renderCheckboxIcon({ isSelected, isDisabled, isFocused, isHovered, isIn
 		})
 	});
 }
-const PROP_STYLES = [
-	...BASE_STYLES,
-	...OUTER_STYLES,
-	...COLOR_STYLES
-];
 /** A collection with no options, for a list state that isn't needed. */
 const NO_OPTIONS = {
 	children: [],
@@ -497,7 +492,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 		return fieldProps;
 	} });
 	const { t } = useI18n();
-	let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, isDisabled, listStyles, optionStyles, optionHighlight, sectionStyles, headingStyles, listGap, listRef, message, description, styles, mods: externalMods, size = "medium", labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, isFocusWithin, onSelectionChange, disableSelectionToggle = false, allowDuplicateSelectionEvents, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, allValueProps, filter, emptyLabel = t("listBox.noItems", "No items"), shape = "card", isReorderable = false, onReorder, form, ...otherProps } = props;
+	let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, isDisabled, listStyles, optionStyles, optionHighlight, sectionStyles, headingStyles, listGap, listRef, message, description, styles, mods: externalMods, size = "medium", labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, isFocusWithin, onSelectionChange, disableSelectionToggle = false, allowDuplicateSelectionEvents, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, allValueProps, filter, emptyLabel = t("listBox.noItems", "No items"), shape = "card", isReorderable = false, onReorder, form } = props;
 	const lastSelectedKeyRef = useRef(null);
 	const externalSelectionHandler = onSelectionChange || props.onChange;
 	const wrappedOnSelectionChange = useMemo(() => {
@@ -585,7 +580,8 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 		if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End" || e.key === "PageUp" || e.key === "PageDown") lastFocusSourceRef.current = "keyboard";
 		if (e.key === "Escape") onEscape?.();
 	} });
-	styles = extractStyles(otherProps, PROP_STYLES, styles);
+	const fieldLayout = splitFieldLayout(props, { fillHeightOnFlex: true });
+	styles = fieldLayout.styles;
 	listRef = useCombinedRefs(listRef);
 	const itemsArray = useMemo(() => [...listState.collection], [listState.collection]);
 	const hasSections = useMemo(() => itemsArray.some((i) => i.type === "section"), [itemsArray]);
@@ -840,6 +836,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 	});
 	return wrapWithField(listBoxField, {
 		...props,
+		...fieldLayout.field,
 		labelProps: mergeProps(labelProps, props.labelProps)
 	});
 });