@cube-dev/ui-kit 0.0.0-canary-5b2a269 → 0.0.0-canary-974afb8

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5b2a269 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-974afb8 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEventBus } from "../../../utils/react/useEventBus.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -19,12 +19,25 @@ import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
 import { ListBox } from "../ListBox/ListBox.js";
 import { FilterListBox } from "../FilterListBox/FilterListBox.js";
 import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { FocusScope, useKeyboard } from "react-aria";
 import { Section, useListState } from "react-stately";
 
 //#region src/components/fields/FilterPicker/FilterPicker.tsx
+/**
+* Pure function for deduplicating/toggling keys in a selection.
+* Hoisted to module scope to avoid re-creation on every render.
+*/
+function processSelectionArray(iterable) {
+	const resultSet = /* @__PURE__ */ new Set();
+	for (const key of iterable) {
+		const nKey = String(key);
+		if (resultSet.has(nKey)) resultSet.delete(nKey);
+		else resultSet.add(nKey);
+	}
+	return Array.from(resultSet);
+}
 const PROP_STYLES = [
 	...BASE_STYLES,
 	...OUTER_STYLES,
@@ -64,11 +77,16 @@ const FilterPicker = forwardRef(function FilterPicker(props, ref) {
 		key: ["filterpicker-checkable-single-mode"],
 		args: ["CubeUIKit: isCheckable=false is not recommended in single selection mode as it may confuse users about selection behavior."]
 	});
+	useWarn(sortSelectedToTopExplicit && sortSelectedToTop && !items, {
+		key: ["filterpicker-sort-selected-to-top-children"],
+		args: ["FilterPicker: sortSelectedToTop only works with the items prop. Sorting will be skipped when using JSX children."]
+	});
 	const [internalSelectedKey, setInternalSelectedKey] = useState(defaultSelectedKey ?? null);
 	const [internalSelectedKeys, setInternalSelectedKeys] = useState(defaultSelectedKeys ?? []);
 	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 	const cachedItemsOrder = useRef(null);
 	const triggerRef = useRef(null);
+	const triggerWidthRef = useRef(void 0);
 	useEffect(() => {
 		cachedItemsOrder.current = null;
 	}, [items]);
@@ -81,66 +99,53 @@ const FilterPicker = forwardRef(function FilterPicker(props, ref) {
 		items,
 		selectionMode: "none"
 	});
-	const findCollectionKey = useCallback((lookup) => {
-		if (lookup == null) return lookup;
-		for (const item of localCollectionState.collection) if (String(item.key) === String(lookup)) return item.key;
-		return lookup;
+	const { labelMap, keyMap } = useMemo(() => {
+		const lm = /* @__PURE__ */ new Map();
+		const km = /* @__PURE__ */ new Map();
+		const traverse = (nodes) => {
+			for (const node of nodes) if (node.type === "item") {
+				const strKey = String(node.key);
+				lm.set(strKey, node.textValue || strKey);
+				km.set(strKey, node.key);
+			} else if (node.childNodes) traverse(node.childNodes);
+		};
+		traverse(localCollectionState.collection);
+		return {
+			labelMap: lm,
+			keyMap: km
+		};
 	}, [localCollectionState.collection]);
 	const mappedSelectedKey = useMemo(() => {
-		if (selectionMode !== "single") return null;
-		return effectiveSelectedKey ? findCollectionKey(effectiveSelectedKey) : null;
+		if (selectionMode !== "single" || effectiveSelectedKey == null) return null;
+		const strKey = String(effectiveSelectedKey);
+		return keyMap.get(strKey) ?? effectiveSelectedKey;
 	}, [
 		selectionMode,
 		effectiveSelectedKey,
-		findCollectionKey
+		keyMap
 	]);
 	const mappedSelectedKeys = useMemo(() => {
 		if (selectionMode !== "multiple") return void 0;
 		if (effectiveSelectedKeys === "all") return "all";
-		if (Array.isArray(effectiveSelectedKeys)) return effectiveSelectedKeys.map((k) => findCollectionKey(k));
+		if (Array.isArray(effectiveSelectedKeys)) return effectiveSelectedKeys.map((k) => {
+			const strKey = String(k);
+			return keyMap.get(strKey) ?? k;
+		});
 		return effectiveSelectedKeys;
 	}, [
 		selectionMode,
 		effectiveSelectedKeys,
-		findCollectionKey
+		keyMap
+	]);
+	const selectedLabels = useMemo(() => {
+		if (selectionMode === "multiple" && effectiveSelectedKeys === "all") return Array.from(labelMap.values());
+		return (selectionMode === "multiple" && effectiveSelectedKeys !== "all" ? (effectiveSelectedKeys || []).map(String) : effectiveSelectedKey != null ? [String(effectiveSelectedKey)] : []).map((k) => labelMap.get(k) ?? k);
+	}, [
+		selectionMode,
+		effectiveSelectedKey,
+		effectiveSelectedKeys,
+		labelMap
 	]);
-	const processSelectionArray = (iterable) => {
-		const resultSet = /* @__PURE__ */ new Set();
-		for (const key of iterable) {
-			const nKey = String(key);
-			if (resultSet.has(nKey)) resultSet.delete(nKey);
-			else resultSet.add(nKey);
-		}
-		return Array.from(resultSet);
-	};
-	const getSelectedLabels = () => {
-		const collection = localCollectionState.collection;
-		const collectAllLabels = () => {
-			const allLabels = [];
-			const traverse = (nodes) => {
-				for (const node of nodes) if (node.type === "item") allLabels.push(node.textValue || String(node.key));
-				else if (node.childNodes) traverse(node.childNodes);
-			};
-			traverse(collection);
-			return allLabels;
-		};
-		if (selectionMode === "multiple" && effectiveSelectedKeys === "all") return collectAllLabels();
-		const selectedSet = new Set(selectionMode === "multiple" && effectiveSelectedKeys !== "all" ? (effectiveSelectedKeys || []).map((k) => String(k)) : effectiveSelectedKey != null ? [String(effectiveSelectedKey)] : []);
-		const labels = [];
-		const processedKeys = /* @__PURE__ */ new Set();
-		selectedSet.forEach((key) => {
-			const item = collection.getItem(key);
-			if (item) {
-				labels.push(item.textValue || String(item.key));
-				processedKeys.add(String(item.key));
-			}
-		});
-		(selectionMode === "multiple" && effectiveSelectedKeys !== "all" ? (effectiveSelectedKeys || []).map(String) : effectiveSelectedKey != null ? [String(effectiveSelectedKey)] : []).forEach((key) => {
-			if (!processedKeys.has(String(key))) labels.push(key);
-		});
-		return labels;
-	};
-	const selectedLabels = getSelectedLabels();
 	const hasSelection = selectedLabels.length > 0;
 	const latestSelectionRef = useRef({
 		single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,
@@ -159,16 +164,60 @@ const FilterPicker = forwardRef(function FilterPicker(props, ref) {
 	useEffect(() => {
 		selectionsWhenClosed.current = { ...latestSelectionRef.current };
 	}, []);
-	const getSortedChildren = useCallback(() => {
-		if (sortSelectedToTopExplicit && sortSelectedToTop && !items) console.warn("FilterPicker: sortSelectedToTop only works with the items prop. Sorting will be skipped when using JSX children.");
-		return children;
+	const handleOpenChange = useEvent((isOpen) => {
+		if (isOpen) triggerWidthRef.current = triggerRef?.current?.UNSAFE_getDOMNode()?.offsetWidth;
+		setIsPopoverOpen(isOpen);
+		if (!isOpen) {
+			selectionsWhenClosed.current = { ...latestSelectionRef.current };
+			cachedItemsOrder.current = null;
+		}
+		onOpenChange?.(isOpen);
+	});
+	useEffect(() => {
+		return on("popover:open", (data) => {
+			if (data.menuId !== filterPickerId && isPopoverOpen) handleOpenChange(false);
+		});
 	}, [
-		children,
-		sortSelectedToTop,
-		sortSelectedToTopExplicit,
-		items
+		on,
+		filterPickerId,
+		isPopoverOpen,
+		handleOpenChange
+	]);
+	useEffect(() => {
+		if (isPopoverOpen) emit("popover:open", { menuId: filterPickerId });
+	}, [
+		isPopoverOpen,
+		emit,
+		filterPickerId
 	]);
-	const finalItems = useCallback(() => {
+	const [shouldUpdatePosition, setShouldUpdatePosition] = useState(true);
+	useEffect(() => {
+		if (isPopoverOpen) {
+			setShouldUpdatePosition(true);
+			const timerId = window.setTimeout(() => setShouldUpdatePosition(false), 160);
+			return () => window.clearTimeout(timerId);
+		} else setShouldUpdatePosition(true);
+	}, [isPopoverOpen]);
+	const { keyboardProps } = useKeyboard({ onKeyDown: (e) => {
+		if ((e.key === "ArrowUp" || e.key === "ArrowDown") && !isPopoverOpen) {
+			e.preventDefault();
+			handleOpenChange(true);
+		}
+	} });
+	const clearValue = useEvent(() => {
+		if (selectionMode === "multiple") {
+			if (!isControlledMultiple) setInternalSelectedKeys([]);
+			onSelectionChange?.([]);
+		} else {
+			if (!isControlledSingle) setInternalSelectedKey(null);
+			onSelectionChange?.(null);
+		}
+		handleOpenChange(false);
+		triggerRef?.current?.focus?.();
+		props.onClear?.();
+		return false;
+	});
+	const finalItems = useMemo(() => {
 		if (!items) return items;
 		if (!sortSelectedToTop) return items;
 		if (cachedItemsOrder.current) return cachedItemsOrder.current;
@@ -207,18 +256,15 @@ const FilterPicker = forwardRef(function FilterPicker(props, ref) {
 			return [...selectedArr, ...unselectedArr];
 		};
 		const sorted = sortArray(Array.isArray(items) ? items : Array.from(items));
-		if (isPopoverOpen || !cachedItemsOrder.current) cachedItemsOrder.current = sorted;
+		cachedItemsOrder.current = sorted;
 		return sorted;
 	}, [
 		items,
 		sortSelectedToTop,
 		selectionMode,
-		isPopoverOpen,
-		selectionsWhenClosed.current.multiple,
-		selectionsWhenClosed.current.single
-	])();
-	const finalChildren = getSortedChildren();
-	const renderTriggerContent = () => {
+		isPopoverOpen
+	]);
+	const triggerContent = useMemo(() => {
 		if (typeof renderSummary === "function") {
 			if (selectionMode === "single") return renderSummary({
 				selectedLabel: selectedLabels[0],
@@ -233,128 +279,100 @@ const FilterPicker = forwardRef(function FilterPicker(props, ref) {
 				selectionMode: "multiple"
 			});
 		} else if (renderSummary === false) return null;
-		let content = "";
 		if (!hasSelection) return /* @__PURE__ */ jsx(_Text.Placeholder, { children: placeholder });
-		else if (selectionMode === "single") content = selectedLabels[0];
-		else if (effectiveSelectedKeys === "all") content = selectAllLabel;
-		else content = selectedLabels.join(", ");
-		if (!content) return null;
-		return content;
-	};
-	const [shouldUpdatePosition, setShouldUpdatePosition] = useState(true);
-	const triggerWidth = triggerRef?.current?.UNSAFE_getDOMNode()?.offsetWidth;
-	const renderTrigger = (state) => {
-		useEffect(() => {
-			return on("popover:open", (data) => {
-				if (data.menuId !== filterPickerId && state.isOpen) state.close();
-			});
-		}, [
-			on,
-			filterPickerId,
-			state
-		]);
-		useEffect(() => {
-			if (state.isOpen) emit("popover:open", { menuId: filterPickerId });
-		}, [
-			state.isOpen,
-			emit,
-			filterPickerId
-		]);
-		useEffect(() => {
-			if (state.isOpen !== isPopoverOpen) {
-				setIsPopoverOpen(state.isOpen);
-				if (!state.isOpen) {
-					selectionsWhenClosed.current = { ...latestSelectionRef.current };
-					cachedItemsOrder.current = null;
-				}
-				onOpenChange?.(state.isOpen);
-			}
-		}, [
-			state.isOpen,
-			isPopoverOpen,
-			onOpenChange
-		]);
-		const { keyboardProps } = useKeyboard({ onKeyDown: (e) => {
-			if ((e.key === "ArrowUp" || e.key === "ArrowDown") && !state.isOpen) {
-				e.preventDefault();
-				state.open();
-			}
-		} });
-		useEffect(() => {
-			if (state.isOpen) {
-				setShouldUpdatePosition(true);
-				const id = window.setTimeout(() => setShouldUpdatePosition(false), 160);
-				return () => window.clearTimeout(id);
-			} else setShouldUpdatePosition(true);
-		}, [state.isOpen]);
-		let showClearButton = isClearable && hasSelection && !isDisabled && !props.isReadOnly;
-		let clearValue = useEvent(() => {
-			if (selectionMode === "multiple") {
-				if (!isControlledMultiple) setInternalSelectedKeys([]);
-				onSelectionChange?.([]);
-			} else {
-				if (!isControlledSingle) setInternalSelectedKey(null);
-				onSelectionChange?.(null);
-			}
-			if (state.isOpen) state.close();
-			triggerRef?.current?.focus?.();
-			props.onClear?.();
-			return false;
-		});
-		return /* @__PURE__ */ jsx(_ItemButton, {
-			ref: triggerRef,
-			"data-popover-trigger": true,
-			qa: qa || "FilterPicker",
-			id,
-			type,
-			theme: validationState === "invalid" ? "danger" : theme,
+		else if (selectionMode === "single") return selectedLabels[0] || null;
+		else if (effectiveSelectedKeys === "all") return selectAllLabel;
+		else return selectedLabels.join(", ") || null;
+	}, [
+		renderSummary,
+		selectionMode,
+		selectedLabels,
+		effectiveSelectedKey,
+		effectiveSelectedKeys,
+		hasSelection,
+		placeholder,
+		selectAllLabel
+	]);
+	const showClearButton = isClearable && hasSelection && !isDisabled && !props.isReadOnly;
+	const triggerElement = /* @__PURE__ */ jsx(_ItemButton, {
+		ref: triggerRef,
+		"data-popover-trigger": true,
+		qa: qa || "FilterPicker",
+		id,
+		type,
+		theme: validationState === "invalid" ? "danger" : theme,
+		size,
+		shape,
+		isDisabled: isDisabled || isLoading,
+		"data-input-type": "filterpicker",
+		mods: {
+			placeholder: !hasSelection,
+			...externalMods
+		},
+		icon,
+		rightIcon: isLoading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : rightIcon !== void 0 ? rightIcon : showClearButton ? /* @__PURE__ */ jsx(ItemAction, {
+			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
 			size,
-			shape,
-			isDisabled: isDisabled || isLoading,
-			"data-input-type": "filterpicker",
-			mods: {
-				placeholder: !hasSelection,
-				...externalMods
-			},
-			icon,
-			rightIcon: isLoading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : rightIcon !== void 0 ? rightIcon : showClearButton ? /* @__PURE__ */ jsx(ItemAction, {
-				icon: /* @__PURE__ */ jsx(CloseIcon, {}),
-				size,
-				theme: validationState === "invalid" ? "danger" : void 0,
-				qa: "FilterPickerClearButton",
-				mods: { pressed: false },
-				onPress: clearValue
-			}) : /* @__PURE__ */ jsx(DirectionIcon, { to: state.isOpen ? "top" : "bottom" }),
-			prefix,
-			suffix,
-			hotkeys,
-			tooltip: triggerTooltip,
-			description: triggerDescription,
-			descriptionPlacement,
-			styles: triggerStyles,
-			...keyboardProps,
-			"aria-label": `${props["aria-label"] ?? props.label ?? ""}`,
-			children: renderTriggerContent()
-		});
-	};
+			theme: validationState === "invalid" ? "danger" : void 0,
+			qa: "FilterPickerClearButton",
+			mods: { pressed: false },
+			onPress: clearValue
+		}) : /* @__PURE__ */ jsx(DirectionIcon, { to: isPopoverOpen ? "top" : "bottom" }),
+		prefix,
+		suffix,
+		hotkeys,
+		tooltip: triggerTooltip,
+		description: triggerDescription,
+		descriptionPlacement,
+		styles: triggerStyles,
+		...keyboardProps,
+		"aria-label": `${props["aria-label"] ?? props.label ?? ""}`,
+		children: triggerContent
+	});
+	const handleSelectionChange = useEvent((selection) => {
+		if (selectionMode === "single") {
+			if (!isControlledSingle) setInternalSelectedKey(selection);
+		} else if (!isControlledMultiple) {
+			let normalized = selection;
+			if (selection === "all") normalized = "all";
+			else if (Array.isArray(selection)) normalized = processSelectionArray(selection);
+			else if (selection && typeof selection === "object" && selection instanceof Set) normalized = processSelectionArray(selection);
+			setInternalSelectedKeys(normalized);
+		}
+		if (selectionMode === "single") latestSelectionRef.current.single = selection != null ? String(selection) : null;
+		else if (selection === "all") latestSelectionRef.current.multiple = "all";
+		else if (Array.isArray(selection)) latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
+		else if (selection && typeof selection === "object" && selection instanceof Set) latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
+		else latestSelectionRef.current.multiple = selection === "all" ? "all" : Array.isArray(selection) ? selection.map(String) : [];
+		onSelectionChange?.(selection);
+		if (selectionMode === "single") handleOpenChange(false);
+	});
+	const handleEscape = useEvent(() => {
+		handleOpenChange(false);
+	});
+	const handleOptionClick = useEvent((key) => {
+		if (selectionMode === "multiple" && isCheckable || key === "__ALL__") handleOpenChange(false);
+	});
 	return wrapWithField(/* @__PURE__ */ jsx(FilterPickerWrapper, {
 		qa: "FilterPickerWrapper",
 		styles,
 		...filterBaseProps(otherProps, { eventProps: true }),
 		children: /* @__PURE__ */ jsxs(DialogTrigger, {
+			isDismissable: true,
 			type: "popover",
 			placement: "bottom start",
+			isOpen: isPopoverOpen,
 			containerPadding,
 			shouldUpdatePosition,
 			shouldFlip: shouldFlip && shouldUpdatePosition,
-			isDismissable: true,
 			shouldCloseOnInteractOutside: (el) => {
 				const menuTriggerEl = el.closest("[data-popover-trigger]");
 				if (!menuTriggerEl) return true;
 				if (menuTriggerEl === triggerRef?.current) return true;
 				return false;
 			},
-			children: [renderTrigger, (close) => /* @__PURE__ */ jsx(Dialog, {
+			onOpenChange: handleOpenChange,
+			children: [triggerElement, () => /* @__PURE__ */ jsx(Dialog, {
 				qa: "FilterPickerOverlay",
 				display: "grid",
 				styles: {
@@ -363,7 +381,7 @@ const FilterPicker = forwardRef(function FilterPicker(props, ref) {
 					"$overlay-min-width": "30x",
 					...popoverStyles
 				},
-				style: triggerWidth ? { "--overlay-min-width": `${triggerWidth}px` } : void 0,
+				style: triggerWidthRef.current ? { "--overlay-min-width": `${triggerWidthRef.current}px` } : void 0,
 				children: /* @__PURE__ */ jsx(FocusScope, {
 					restoreFocus: true,
 					children: /* @__PURE__ */ jsx(FilterListBox, {
@@ -407,29 +425,10 @@ const FilterPicker = forwardRef(function FilterPicker(props, ref) {
 						customValueProps,
 						newCustomValueProps,
 						onSearchChange,
-						onEscape: () => close(),
-						onOptionClick: (key) => {
-							if (selectionMode === "multiple" && isCheckable || key === "__ALL__") close();
-						},
-						onSelectionChange: (selection) => {
-							if (selectionMode === "single") {
-								if (!isControlledSingle) setInternalSelectedKey(selection);
-							} else if (!isControlledMultiple) {
-								let normalized = selection;
-								if (selection === "all") normalized = "all";
-								else if (Array.isArray(selection)) normalized = processSelectionArray(selection);
-								else if (selection && typeof selection === "object" && selection instanceof Set) normalized = processSelectionArray(selection);
-								setInternalSelectedKeys(normalized);
-							}
-							if (selectionMode === "single") latestSelectionRef.current.single = selection != null ? String(selection) : null;
-							else if (selection === "all") latestSelectionRef.current.multiple = "all";
-							else if (Array.isArray(selection)) latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
-							else if (selection && typeof selection === "object" && selection instanceof Set) latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
-							else latestSelectionRef.current.multiple = selection === "all" ? "all" : Array.isArray(selection) ? selection.map(String) : [];
-							onSelectionChange?.(selection);
-							if (selectionMode === "single") close();
-						},
-						children: children ? finalChildren : void 0
+						onEscape: handleEscape,
+						onOptionClick: handleOptionClick,
+						onSelectionChange: handleSelectionChange,
+						children: children ? children : void 0
 					})
 				})
 			})]