@cube-dev/ui-kit 0.125.0 → 0.126.0

package/dist/components/fields/DatePicker/DatePickerInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.125.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

package/dist/components/fields/DatePicker/DatePickerSegment.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.125.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -29,7 +29,7 @@ const EditableSegmentElement = tasty({
 			":focus": "#primary"
 		},
 		radius: ".25x",
-		Placeholder: { opacity: "#disabled-opacity" }
+		Placeholder: { opacity: "var(--disabled-opacity)" }
 	}
 });
 function DatePickerSegment({ segment, state, ...otherProps }) {

package/dist/components/fields/DatePicker/DatePickerSegment.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerSegment.js","names":[],"sources":["../../../../src/components/fields/DatePicker/DatePickerSegment.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { useRef } from 'react';\nimport { DateValue, useDateSegment } from 'react-aria';\nimport { DateFieldState, DateSegment } from 'react-stately';\n\nimport { DateFieldBase } from './types';\n\ninterface DatePickerSegmentProps extends DateFieldBase<DateValue> {\n  segment: DateSegment;\n  state: DateFieldState;\n}\n\ninterface LiteralSegmentProps {\n  segment: DateSegment;\n}\n\nconst LiteralSegmentElement = tasty({\n  qa: 'LiteralSegment',\n  as: 'span',\n  'aria-hidden': 'true',\n  styles: {},\n});\n\nconst EditableSegmentElement = tasty({\n  qa: 'EditableSegment',\n  styles: {\n    padding: '0 1bw',\n    fontVariantNumeric: 'tabular-nums lining-nums',\n    textAlign: 'right',\n    font: 'monospace',\n    border: 0,\n    outline: 0,\n    color: {\n      '': 'inherit',\n      ':focus': '#white',\n    },\n    fill: {\n      '': '#clear',\n      ':focus': '#primary',\n    },\n    radius: '.25x',\n\n    Placeholder: {\n      opacity: '#disabled-opacity',\n    },\n  },\n});\n\nexport function DatePickerSegment({\n  segment,\n  state,\n  ...otherProps\n}: DatePickerSegmentProps) {\n  switch (segment.type) {\n    // A separator, e.g. punctuation\n    case 'literal':\n      return <LiteralSegment segment={segment} />;\n\n    // Editable segment\n    default:\n      return (\n        <EditableSegment segment={segment} state={state} {...otherProps} />\n      );\n  }\n}\n\nfunction LiteralSegment({ segment }: LiteralSegmentProps) {\n  return (\n    <LiteralSegmentElement\n      data-type={segment.type === 'literal' ? undefined : segment.type}\n    >\n      {segment.text}\n    </LiteralSegmentElement>\n  );\n}\n\nfunction EditableSegment({ segment, state }: DatePickerSegmentProps) {\n  let ref = useRef(null);\n  let { segmentProps } = useDateSegment(segment, state, ref);\n  return (\n    <EditableSegmentElement\n      {...segmentProps}\n      ref={ref}\n      mods={{\n        placeholder: segment.isPlaceholder,\n        'read-only': !segment.isEditable,\n      }}\n      style={{\n        ...segmentProps.style,\n        minWidth:\n          segment.maxValue != null\n            ? `calc(${String(segment.maxValue).length + 'ch'})`\n            : undefined,\n      }}\n      data-testid={segment.type}\n    >\n      {segment.isPlaceholder ? (\n        <span data-element=\"Placeholder\" aria-hidden=\"true\">\n          {segment.placeholder}\n        </span>\n      ) : (\n        segment.text\n      )}\n    </EditableSegmentElement>\n  );\n}\n"],"mappings":";;;;;;;AAgBA,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,IAAI;CACJ,eAAe;CACf,QAAQ,EAAE;CACX,CAAC;AAEF,MAAM,yBAAyB,MAAM;CACnC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,oBAAoB;EACpB,WAAW;EACX,MAAM;EACN,QAAQ;EACR,SAAS;EACT,OAAO;GACL,IAAI;GACJ,UAAU;GACX;EACD,MAAM;GACJ,IAAI;GACJ,UAAU;GACX;EACD,QAAQ;EAER,aAAa,EACX,SAAS,qBACV;EACF;CACF,CAAC;AAEF,SAAgB,kBAAkB,EAChC,SACA,OACA,GAAG,cACsB;AACzB,SAAQ,QAAQ,MAAhB;EAEE,KAAK,UACH,QAAO,oBAAC,kBAAwB,UAAW;EAG7C,QACE,QACE,oBAAC;GAAyB;GAAgB;GAAO,GAAI;IAAc;;;AAK3E,SAAS,eAAe,EAAE,WAAgC;AACxD,QACE,oBAAC;EACC,aAAW,QAAQ,SAAS,YAAY,SAAY,QAAQ;YAE3D,QAAQ;GACa;;AAI5B,SAAS,gBAAgB,EAAE,SAAS,SAAiC;CACnE,IAAI,MAAM,OAAO,KAAK;CACtB,IAAI,EAAE,iBAAiB,eAAe,SAAS,OAAO,IAAI;AAC1D,QACE,oBAAC;EACC,GAAI;EACC;EACL,MAAM;GACJ,aAAa,QAAQ;GACrB,aAAa,CAAC,QAAQ;GACvB;EACD,OAAO;GACL,GAAG,aAAa;GAChB,UACE,QAAQ,YAAY,OAChB,QAAQ,OAAO,QAAQ,SAAS,CAAC,SAAS,KAAK,KAC/C;GACP;EACD,eAAa,QAAQ;YAEpB,QAAQ,gBACP,oBAAC;GAAK,gBAAa;GAAc,eAAY;aAC1C,QAAQ;IACJ,GAEP,QAAQ;GAEa"}
+{"version":3,"file":"DatePickerSegment.js","names":[],"sources":["../../../../src/components/fields/DatePicker/DatePickerSegment.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { useRef } from 'react';\nimport { DateValue, useDateSegment } from 'react-aria';\nimport { DateFieldState, DateSegment } from 'react-stately';\n\nimport { DateFieldBase } from './types';\n\ninterface DatePickerSegmentProps extends DateFieldBase<DateValue> {\n  segment: DateSegment;\n  state: DateFieldState;\n}\n\ninterface LiteralSegmentProps {\n  segment: DateSegment;\n}\n\nconst LiteralSegmentElement = tasty({\n  qa: 'LiteralSegment',\n  as: 'span',\n  'aria-hidden': 'true',\n  styles: {},\n});\n\nconst EditableSegmentElement = tasty({\n  qa: 'EditableSegment',\n  styles: {\n    padding: '0 1bw',\n    fontVariantNumeric: 'tabular-nums lining-nums',\n    textAlign: 'right',\n    font: 'monospace',\n    border: 0,\n    outline: 0,\n    color: {\n      '': 'inherit',\n      ':focus': '#white',\n    },\n    fill: {\n      '': '#clear',\n      ':focus': '#primary',\n    },\n    radius: '.25x',\n\n    Placeholder: {\n      opacity: 'var(--disabled-opacity)',\n    },\n  },\n});\n\nexport function DatePickerSegment({\n  segment,\n  state,\n  ...otherProps\n}: DatePickerSegmentProps) {\n  switch (segment.type) {\n    // A separator, e.g. punctuation\n    case 'literal':\n      return <LiteralSegment segment={segment} />;\n\n    // Editable segment\n    default:\n      return (\n        <EditableSegment segment={segment} state={state} {...otherProps} />\n      );\n  }\n}\n\nfunction LiteralSegment({ segment }: LiteralSegmentProps) {\n  return (\n    <LiteralSegmentElement\n      data-type={segment.type === 'literal' ? undefined : segment.type}\n    >\n      {segment.text}\n    </LiteralSegmentElement>\n  );\n}\n\nfunction EditableSegment({ segment, state }: DatePickerSegmentProps) {\n  let ref = useRef(null);\n  let { segmentProps } = useDateSegment(segment, state, ref);\n  return (\n    <EditableSegmentElement\n      {...segmentProps}\n      ref={ref}\n      mods={{\n        placeholder: segment.isPlaceholder,\n        'read-only': !segment.isEditable,\n      }}\n      style={{\n        ...segmentProps.style,\n        minWidth:\n          segment.maxValue != null\n            ? `calc(${String(segment.maxValue).length + 'ch'})`\n            : undefined,\n      }}\n      data-testid={segment.type}\n    >\n      {segment.isPlaceholder ? (\n        <span data-element=\"Placeholder\" aria-hidden=\"true\">\n          {segment.placeholder}\n        </span>\n      ) : (\n        segment.text\n      )}\n    </EditableSegmentElement>\n  );\n}\n"],"mappings":";;;;;;;AAgBA,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,IAAI;CACJ,eAAe;CACf,QAAQ,EAAE;CACX,CAAC;AAEF,MAAM,yBAAyB,MAAM;CACnC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,oBAAoB;EACpB,WAAW;EACX,MAAM;EACN,QAAQ;EACR,SAAS;EACT,OAAO;GACL,IAAI;GACJ,UAAU;GACX;EACD,MAAM;GACJ,IAAI;GACJ,UAAU;GACX;EACD,QAAQ;EAER,aAAa,EACX,SAAS,2BACV;EACF;CACF,CAAC;AAEF,SAAgB,kBAAkB,EAChC,SACA,OACA,GAAG,cACsB;AACzB,SAAQ,QAAQ,MAAhB;EAEE,KAAK,UACH,QAAO,oBAAC,kBAAwB,UAAW;EAG7C,QACE,QACE,oBAAC;GAAyB;GAAgB;GAAO,GAAI;IAAc;;;AAK3E,SAAS,eAAe,EAAE,WAAgC;AACxD,QACE,oBAAC;EACC,aAAW,QAAQ,SAAS,YAAY,SAAY,QAAQ;YAE3D,QAAQ;GACa;;AAI5B,SAAS,gBAAgB,EAAE,SAAS,SAAiC;CACnE,IAAI,MAAM,OAAO,KAAK;CACtB,IAAI,EAAE,iBAAiB,eAAe,SAAS,OAAO,IAAI;AAC1D,QACE,oBAAC;EACC,GAAI;EACC;EACL,MAAM;GACJ,aAAa,QAAQ;GACrB,aAAa,CAAC,QAAQ;GACvB;EACD,OAAO;GACL,GAAG,aAAa;GAChB,UACE,QAAQ,YAAY,OAChB,QAAQ,OAAO,QAAQ,SAAS,CAAC,SAAS,KAAK,KAC/C;GACP;EACD,eAAa,QAAQ;YAEpB,QAAQ,gBACP,oBAAC;GAAK,gBAAa;GAAc,eAAY;aAC1C,QAAQ;IACJ,GAEP,QAAQ;GAEa"}

package/dist/components/fields/DatePicker/DateRangePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.125.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.125.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/TimeInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.125.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/intl.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.125.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
 //#region src/components/fields/DatePicker/intl.ts
 const dateMessages = {
 	time: "Time",

package/dist/components/fields/DatePicker/parseDate.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.125.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
 import { parseAbsolute } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/parseDate.ts

package/dist/components/fields/DatePicker/props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.125.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
 //#region src/components/fields/DatePicker/props.ts
 const DEFAULT_DATE_PROPS = {
 	granularity: "day",

package/dist/components/fields/DatePicker/utils.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.125.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
 import { useImperativeHandle, useRef } from "react";
 import { createDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";

package/dist/components/fields/FileInput/FileInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.125.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/FilterListBox/FilterListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.125.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.125.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.126.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEventBus } from "../../../utils/react/useEventBus.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -17,9 +17,10 @@ import { wrapWithField } from "../../form/wrapper.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
 import { ListBox } from "../ListBox/ListBox.js";
+import { processSelectionArray } from "../../../utils/selection.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";
@@ -64,11 +65,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 +87,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,
@@ -157,20 +150,73 @@ const FilterPicker = forwardRef(function FilterPicker(props, ref) {
 		multiple: []
 	});
 	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;
+		if (!isPopoverOpen) selectionsWhenClosed.current = {
+			single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,
+			multiple: effectiveSelectedKeys === "all" ? "all" : (effectiveSelectedKeys ?? []).map(String)
+		};
 	}, [
-		children,
-		sortSelectedToTop,
-		sortSelectedToTopExplicit,
-		items
+		effectiveSelectedKey,
+		effectiveSelectedKeys,
+		isPopoverOpen
+	]);
+	const handleOpenChange = useEvent((isOpen) => {
+		if (isOpen === isPopoverOpen) return;
+		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);
+		});
+	}, [
+		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 (!isPopoverOpen) return items;
 		if (cachedItemsOrder.current) return cachedItemsOrder.current;
 		const selectedSet = /* @__PURE__ */ new Set();
 		const addSelected = (key) => {
@@ -207,18 +253,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 +276,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;
+				if (menuTriggerEl === triggerRef?.current?.UNSAFE_getDOMNode()) return true;
 				return false;
 			},
-			children: [renderTrigger, (close) => /* @__PURE__ */ jsx(Dialog, {
+			onOpenChange: handleOpenChange,
+			children: [triggerElement, () => /* @__PURE__ */ jsx(Dialog, {
 				qa: "FilterPickerOverlay",
 				display: "grid",
 				styles: {
@@ -363,7 +378,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 +422,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
 					})
 				})
 			})]