@cube-dev/ui-kit 0.194.1 → 0.196.0

package/dist/components/fields/ListBoxPopover/ListBoxPopover.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs as mergeRefs$1 } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -16,6 +16,14 @@ import { getEventTarget, isFocusWithin } from "@react-aria/utils";
 
 //#region src/components/fields/ListBoxPopover/ListBoxPopover.tsx
 const CONTROL_SELECTOR = "button, a[href], input, select, textarea, [tabindex], [contenteditable]:not([contenteditable=\"false\"])";
+const LAYER_SELECTOR = "[role=\"dialog\"], [role=\"alertdialog\"], [data-overlay-layer]";
+const DISABLED_SELECTOR = ":disabled, [aria-disabled=\"true\"]";
+function isOutsideControl(el, trigger) {
+	const control = el.closest(CONTROL_SELECTOR);
+	if (control == null || trigger == null || control.contains(trigger) || trigger.contains(control) || control.matches(`${LAYER_SELECTOR}, ${DISABLED_SELECTOR}`)) return false;
+	const layer = trigger.closest(LAYER_SELECTOR);
+	return layer == null || layer.contains(control);
+}
 const ListBoxPopoverWrapper = tasty({
 	qa: "ComboBoxOverlayWrapper",
 	styles: {
@@ -68,23 +76,23 @@ const ListBoxPopoverElement = tasty({
 const ListBoxPopover = function ListBoxPopover(props) {
 	const $ = c(80);
 	const { t } = useI18n();
-	const { isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, containerPadding, comboBoxWidth, listBoxId, overlayStyles, listBoxStyles, optionStyles, optionHighlight, sectionStyles, headingStyles, listGap, selectedKey, selectionMode: t0, selectedKeys, isCheckable, shouldCloseOnTriggerInteraction: t1, shouldPassControlPresses: t2, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, ariaLabelledby, compositeFocusProps, filter, size: t3, emptyLabel, positionTargetRef, positionApiRef } = props;
+	const { isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, containerPadding, comboBoxWidth, listBoxId, overlayStyles, listBoxStyles, optionStyles, optionHighlight, sectionStyles, headingStyles, listGap, selectedKey, selectionMode: t0, selectedKeys, isCheckable, shouldCloseOnTriggerInteraction: t1, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, ariaLabelledby, compositeFocusProps, filter, size: t2, emptyLabel, positionTargetRef, positionApiRef } = props;
 	const selectionMode = t0 === void 0 ? "single" : t0;
 	const shouldCloseOnTriggerInteraction = t1 === void 0 ? true : t1;
-	const shouldPassControlPresses = t2 === void 0 ? false : t2;
+	const size = t2 === void 0 ? "medium" : t2;
 	const mergedPopoverRef = popoverRef;
 	const layerRef = useModalLayerRef();
 	const overlayScrollRef = useRef(null);
-	const t4 = positionTargetRef ?? triggerRef;
-	const t5 = mergedPopoverRef;
-	const t6 = `${direction} start`;
-	let t7;
-	if ($[0] !== containerPadding || $[1] !== isOpen || $[2] !== overlayOffset || $[3] !== shouldFlip || $[4] !== t4 || $[5] !== t5 || $[6] !== t6) {
-		t7 = {
-			targetRef: t4,
-			overlayRef: t5,
+	const t3 = positionTargetRef ?? triggerRef;
+	const t4 = mergedPopoverRef;
+	const t5 = `${direction} start`;
+	let t6;
+	if ($[0] !== containerPadding || $[1] !== isOpen || $[2] !== overlayOffset || $[3] !== shouldFlip || $[4] !== t3 || $[5] !== t4 || $[6] !== t5) {
+		t6 = {
+			targetRef: t3,
+			overlayRef: t4,
 			scrollRef: overlayScrollRef,
-			placement: t6,
+			placement: t5,
 			shouldFlip,
 			isOpen,
 			offset: overlayOffset,
@@ -94,25 +102,25 @@ const ListBoxPopover = function ListBoxPopover(props) {
 		$[1] = isOpen;
 		$[2] = overlayOffset;
 		$[3] = shouldFlip;
-		$[4] = t4;
-		$[5] = t5;
-		$[6] = t6;
-		$[7] = t7;
-	} else t7 = $[7];
-	const { overlayProps: overlayPositionProps, placement, updatePosition } = useOverlayPosition(t7);
-	let t8;
+		$[4] = t3;
+		$[5] = t4;
+		$[6] = t5;
+		$[7] = t6;
+	} else t6 = $[7];
+	const { overlayProps: overlayPositionProps, placement, updatePosition } = useOverlayPosition(t6);
+	let t7;
 	if ($[8] !== overlayPositionProps.style) {
-		t8 = overlayPositionProps.style ?? {};
+		t7 = overlayPositionProps.style ?? {};
 		$[8] = overlayPositionProps.style;
-		$[9] = t8;
-	} else t8 = $[9];
-	const t9 = t8;
+		$[9] = t7;
+	} else t7 = $[9];
+	const t8 = t7;
 	let maxHeight;
 	let maxWidth;
 	let positionStyle;
-	if ($[10] !== t9) {
-		({maxHeight, maxWidth, ...positionStyle} = t9);
-		$[10] = t9;
+	if ($[10] !== t8) {
+		({maxHeight, maxWidth, ...positionStyle} = t8);
+		$[10] = t8;
 		$[11] = maxHeight;
 		$[12] = maxWidth;
 		$[13] = positionStyle;
@@ -122,113 +130,113 @@ const ListBoxPopover = function ListBoxPopover(props) {
 		positionStyle = $[13];
 	}
 	let t10;
-	let t11;
+	let t9;
 	if ($[14] !== positionApiRef || $[15] !== updatePosition) {
-		t10 = () => {
+		t9 = () => {
 			if (positionApiRef) positionApiRef.current = { updatePosition };
 			return () => {
 				if (positionApiRef) positionApiRef.current = null;
 			};
 		};
-		t11 = [positionApiRef, updatePosition];
+		t10 = [positionApiRef, updatePosition];
 		$[14] = positionApiRef;
 		$[15] = updatePosition;
 		$[16] = t10;
-		$[17] = t11;
+		$[17] = t9;
 	} else {
 		t10 = $[16];
-		t11 = $[17];
+		t9 = $[17];
 	}
-	useEffect(t10, t11);
-	let t12;
-	if ($[18] !== shouldCloseOnTriggerInteraction || $[19] !== shouldPassControlPresses || $[20] !== triggerRef) {
-		t12 = (el) => {
+	useEffect(t9, t10);
+	let t11;
+	if ($[18] !== shouldCloseOnTriggerInteraction || $[19] !== triggerRef) {
+		t11 = (el) => {
 			const menuTriggerEl = el.closest("[data-popover-trigger]");
 			if (menuTriggerEl) return menuTriggerEl === triggerRef.current ? "consume" : "ignore";
 			if (!shouldCloseOnTriggerInteraction && triggerRef.current?.contains(el) || el.closest("[data-popover-keep]")) return "ignore";
-			if (shouldPassControlPresses && el.closest(CONTROL_SELECTOR) || el.closest("[data-popover-dismiss]")) return "pass";
+			const dismissEl = el.closest("[data-popover-dismiss]");
+			if (isOutsideControl(el, triggerRef.current) || dismissEl != null && !dismissEl.matches(DISABLED_SELECTOR)) return "pass";
 			return "consume";
 		};
 		$[18] = shouldCloseOnTriggerInteraction;
-		$[19] = shouldPassControlPresses;
-		$[20] = triggerRef;
-		$[21] = t12;
-	} else t12 = $[21];
-	const getOutsidePressBehavior = t12;
-	let t13;
-	if ($[22] !== getOutsidePressBehavior || $[23] !== onClose) {
-		t13 = (el_0) => {
+		$[19] = triggerRef;
+		$[20] = t11;
+	} else t11 = $[20];
+	const getOutsidePressBehavior = t11;
+	let t12;
+	if ($[21] !== getOutsidePressBehavior || $[22] !== onClose) {
+		t12 = (el_0) => {
 			const behavior = getOutsidePressBehavior(el_0);
 			if (behavior === "pass") setTimeout(onClose, 0);
 			return behavior === "consume";
 		};
-		$[22] = getOutsidePressBehavior;
-		$[23] = onClose;
-		$[24] = t13;
-	} else t13 = $[24];
-	let t14;
-	if ($[25] !== isOpen || $[26] !== onClose || $[27] !== t13) {
-		t14 = {
+		$[21] = getOutsidePressBehavior;
+		$[22] = onClose;
+		$[23] = t12;
+	} else t12 = $[23];
+	let t13;
+	if ($[24] !== isOpen || $[25] !== onClose || $[26] !== t12) {
+		t13 = {
 			onClose,
 			shouldCloseOnBlur: true,
 			isOpen,
 			isDismissable: true,
-			shouldCloseOnInteractOutside: t13
+			shouldCloseOnInteractOutside: t12
 		};
-		$[25] = isOpen;
-		$[26] = onClose;
+		$[24] = isOpen;
+		$[25] = onClose;
+		$[26] = t12;
 		$[27] = t13;
-		$[28] = t14;
-	} else t14 = $[28];
-	const { overlayProps: overlayBehaviorProps } = useOverlay(t14, mergedPopoverRef);
-	let t15;
-	if ($[29] !== getOutsidePressBehavior || $[30] !== mergedPopoverRef || $[31] !== triggerRef) {
-		t15 = (event) => {
+	} else t13 = $[27];
+	const { overlayProps: overlayBehaviorProps } = useOverlay(t13, mergedPopoverRef);
+	let t14;
+	if ($[28] !== getOutsidePressBehavior || $[29] !== mergedPopoverRef || $[30] !== triggerRef) {
+		t14 = (event) => {
 			if ((isFocusWithin(triggerRef.current) || isFocusWithin(mergedPopoverRef.current)) && getOutsidePressBehavior(getEventTarget(event)) === "consume") event.preventDefault();
 		};
-		$[29] = getOutsidePressBehavior;
-		$[30] = mergedPopoverRef;
-		$[31] = triggerRef;
-		$[32] = t15;
-	} else t15 = $[32];
-	const preserveOutsidePressFocus = useEvent(t15);
-	const t16 = !isOpen;
-	let t17;
-	if ($[33] !== mergedPopoverRef || $[34] !== preserveOutsidePressFocus || $[35] !== t16) {
-		t17 = {
+		$[28] = getOutsidePressBehavior;
+		$[29] = mergedPopoverRef;
+		$[30] = triggerRef;
+		$[31] = t14;
+	} else t14 = $[31];
+	const preserveOutsidePressFocus = useEvent(t14);
+	const t15 = !isOpen;
+	let t16;
+	if ($[32] !== mergedPopoverRef || $[33] !== preserveOutsidePressFocus || $[34] !== t15) {
+		t16 = {
 			ref: mergedPopoverRef,
-			isDisabled: t16,
+			isDisabled: t15,
 			onInteractOutsideStart: preserveOutsidePressFocus,
 			onInteractOutside: preserveOutsidePressFocus
 		};
-		$[33] = mergedPopoverRef;
-		$[34] = preserveOutsidePressFocus;
+		$[32] = mergedPopoverRef;
+		$[33] = preserveOutsidePressFocus;
+		$[34] = t15;
 		$[35] = t16;
-		$[36] = t17;
-	} else t17 = $[36];
-	useInteractOutside(t17);
-	let t18;
-	if ($[37] !== direction || $[38] !== placement) {
-		t18 = placement?.split(" ")[0] || direction;
-		$[37] = direction;
-		$[38] = placement;
-		$[39] = t18;
-	} else t18 = $[39];
-	const placementDirection = t18;
+	} else t16 = $[35];
+	useInteractOutside(t16);
+	let t17;
+	if ($[36] !== direction || $[37] !== placement) {
+		t17 = placement?.split(" ")[0] || direction;
+		$[36] = direction;
+		$[37] = placement;
+		$[38] = t17;
+	} else t17 = $[38];
+	const placementDirection = t17;
 	const transitionRefHolder = useRef(null);
-	let t19;
-	if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
-		t19 = (node) => {
+	let t18;
+	if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = (node) => {
 			overlayScrollRef.current = node;
 			transitionRefHolder.current?.(node);
 		};
-		$[40] = t19;
-	} else t19 = $[40];
-	const setScrollRef = t19;
-	let t20;
-	if ($[41] !== ariaLabel || $[42] !== ariaLabelledby || $[43] !== children || $[44] !== comboBoxWidth || $[45] !== compositeFocusProps || $[46] !== disabledKeys || $[47] !== emptyLabel || $[48] !== filter || $[49] !== headingStyles || $[50] !== isCheckable || $[51] !== isDisabled || $[52] !== items || $[53] !== label || $[54] !== layerRef || $[55] !== listBoxId || $[56] !== listBoxRef || $[57] !== listBoxStyles || $[58] !== listGap || $[59] !== listStateRef || $[60] !== maxHeight || $[61] !== maxWidth || $[62] !== mergedPopoverRef || $[63] !== onSelectionChange || $[64] !== optionHighlight || $[65] !== optionStyles || $[66] !== overlayBehaviorProps || $[67] !== overlayPositionProps || $[68] !== overlayStyles || $[69] !== placementDirection || $[70] !== positionStyle || $[71] !== sectionStyles || $[72] !== selectedKey || $[73] !== selectedKeys || $[74] !== selectionMode || $[75] !== t) {
-		t20 = (t21) => {
-			const { phase, isShown, isExiting, ref: transitionRef } = t21;
+		$[39] = t18;
+	} else t18 = $[39];
+	const setScrollRef = t18;
+	let t19;
+	if ($[40] !== ariaLabel || $[41] !== ariaLabelledby || $[42] !== children || $[43] !== comboBoxWidth || $[44] !== compositeFocusProps || $[45] !== disabledKeys || $[46] !== emptyLabel || $[47] !== filter || $[48] !== headingStyles || $[49] !== isCheckable || $[50] !== isDisabled || $[51] !== items || $[52] !== label || $[53] !== layerRef || $[54] !== listBoxId || $[55] !== listBoxRef || $[56] !== listBoxStyles || $[57] !== listGap || $[58] !== listStateRef || $[59] !== maxHeight || $[60] !== maxWidth || $[61] !== mergedPopoverRef || $[62] !== onSelectionChange || $[63] !== optionHighlight || $[64] !== optionStyles || $[65] !== overlayBehaviorProps || $[66] !== overlayPositionProps || $[67] !== overlayStyles || $[68] !== placementDirection || $[69] !== positionStyle || $[70] !== sectionStyles || $[71] !== selectedKey || $[72] !== selectedKeys || $[73] !== selectionMode || $[74] !== size || $[75] !== t) {
+		t19 = (t20) => {
+			const { phase, isShown, isExiting, ref: transitionRef } = t20;
 			transitionRefHolder.current = transitionRef;
 			return /* @__PURE__ */ jsx(ListBoxPopoverWrapper, {
 				...mergeProps$1({
@@ -253,17 +261,19 @@ const ListBoxPopover = function ListBoxPopover(props) {
 						maxWidth
 					},
 					children: /* @__PURE__ */ jsx(ListBox, {
+						isBare: true,
 						ref: listBoxRef,
 						disableSelectionToggle: true,
 						id: listBoxId,
 						"aria-label": ariaLabel || (typeof label === "string" ? label : ariaLabelledby ? void 0 : t("listBoxPopover.options", "Options")),
 						"aria-labelledby": ariaLabelledby,
-						selectionMode: selectionMode === "multiple" ? "multiple" : void 0,
+						selectionMode,
 						selectedKey: selectionMode === "single" ? selectedKey : void 0,
 						selectedKeys: selectionMode === "multiple" ? selectedKeys : void 0,
 						isCheckable: selectionMode === "multiple" ? isCheckable : void 0,
 						isDisabled,
 						disabledKeys,
+						size: size === "large" ? "large" : "medium",
 						shouldUseVirtualFocus: true,
 						items,
 						filter,
@@ -282,54 +292,55 @@ const ListBoxPopover = function ListBoxPopover(props) {
 				})
 			});
 		};
-		$[41] = ariaLabel;
-		$[42] = ariaLabelledby;
-		$[43] = children;
-		$[44] = comboBoxWidth;
-		$[45] = compositeFocusProps;
-		$[46] = disabledKeys;
-		$[47] = emptyLabel;
-		$[48] = filter;
-		$[49] = headingStyles;
-		$[50] = isCheckable;
-		$[51] = isDisabled;
-		$[52] = items;
-		$[53] = label;
-		$[54] = layerRef;
-		$[55] = listBoxId;
-		$[56] = listBoxRef;
-		$[57] = listBoxStyles;
-		$[58] = listGap;
-		$[59] = listStateRef;
-		$[60] = maxHeight;
-		$[61] = maxWidth;
-		$[62] = mergedPopoverRef;
-		$[63] = onSelectionChange;
-		$[64] = optionHighlight;
-		$[65] = optionStyles;
-		$[66] = overlayBehaviorProps;
-		$[67] = overlayPositionProps;
-		$[68] = overlayStyles;
-		$[69] = placementDirection;
-		$[70] = positionStyle;
-		$[71] = sectionStyles;
-		$[72] = selectedKey;
-		$[73] = selectedKeys;
-		$[74] = selectionMode;
+		$[40] = ariaLabel;
+		$[41] = ariaLabelledby;
+		$[42] = children;
+		$[43] = comboBoxWidth;
+		$[44] = compositeFocusProps;
+		$[45] = disabledKeys;
+		$[46] = emptyLabel;
+		$[47] = filter;
+		$[48] = headingStyles;
+		$[49] = isCheckable;
+		$[50] = isDisabled;
+		$[51] = items;
+		$[52] = label;
+		$[53] = layerRef;
+		$[54] = listBoxId;
+		$[55] = listBoxRef;
+		$[56] = listBoxStyles;
+		$[57] = listGap;
+		$[58] = listStateRef;
+		$[59] = maxHeight;
+		$[60] = maxWidth;
+		$[61] = mergedPopoverRef;
+		$[62] = onSelectionChange;
+		$[63] = optionHighlight;
+		$[64] = optionStyles;
+		$[65] = overlayBehaviorProps;
+		$[66] = overlayPositionProps;
+		$[67] = overlayStyles;
+		$[68] = placementDirection;
+		$[69] = positionStyle;
+		$[70] = sectionStyles;
+		$[71] = selectedKey;
+		$[72] = selectedKeys;
+		$[73] = selectionMode;
+		$[74] = size;
 		$[75] = t;
-		$[76] = t20;
-	} else t20 = $[76];
-	let t21;
-	if ($[77] !== isOpen || $[78] !== t20) {
-		t21 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DisplayTransition, {
+		$[76] = t19;
+	} else t19 = $[76];
+	let t20;
+	if ($[77] !== isOpen || $[78] !== t19) {
+		t20 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DisplayTransition, {
 			isShown: isOpen,
-			children: t20
+			children: t19
 		}) });
 		$[77] = isOpen;
-		$[78] = t20;
-		$[79] = t21;
-	} else t21 = $[79];
-	return t21;
+		$[78] = t19;
+		$[79] = t20;
+	} else t20 = $[79];
+	return t20;
 };
 
 //#endregion

package/dist/components/fields/ListBoxPopover/ListBoxPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBoxPopover.js","names":["getEventTarget","isFocusWithin","Key","Styles","tasty","React","CSSProperties","ReactNode","RefObject","useCallback","useEffect","useRef","useInteractOutside","useOverlay","useOverlayPosition","useEvent","useI18n","mergeProps","mergeRefs","DisplayTransition","useModalLayerRef","Portal","ListBox","ListBoxPopoverProps","isOpen","triggerRef","HTMLElement","popoverRef","HTMLDivElement","listBoxRef","direction","shouldFlip","overlayOffset","containerPadding","comboBoxWidth","listBoxId","overlayStyles","listBoxStyles","optionStyles","optionHighlight","sectionStyles","headingStyles","listGap","selectedKey","selectionMode","selectedKeys","isCheckable","shouldCloseOnTriggerInteraction","shouldPassControlPresses","isDisabled","disabledKeys","Iterable","items","children","listStateRef","onSelectionChange","selection","onClose","label","ariaLabel","ariaLabelledby","compositeFocusProps","onFocus","e","FocusEvent","onBlur","filter","nodes","size","emptyLabel","positionTargetRef","Element","positionApiRef","updatePosition","CONTROL_SELECTOR","ListBoxPopoverWrapper","qa","styles","position","zIndex","ListBoxPopoverElement","display","gridRows","gridColumns","width","height","overflow","fill","radius","shadow","padding","border","hide","hidden","boxSizing","transition","translate","transformOrigin","scale","opacity","ListBoxPopover","props","$","_c","t","t0","t1","t2","t3","undefined","mergedPopoverRef","layerRef","overlayScrollRef","t4","t5","t6","t7","targetRef","overlayRef","scrollRef","placement","offset","overlayProps","overlayPositionProps","t8","style","t9","maxHeight","maxWidth","positionStyle","t10","t11","current","t12","el","menuTriggerEl","closest","contains","getOutsidePressBehavior","t13","el_0","behavior","setTimeout","t14","shouldCloseOnBlur","isDismissable","shouldCloseOnInteractOutside","overlayBehaviorProps","t15","event","preventDefault","preserveOutsidePressFocus","t16","t17","ref","onInteractOutsideStart","onInteractOutside","t18","split","placementDirection","transitionRefHolder","t19","Symbol","for","node","setScrollRef","t20","t21","phase","isShown","isExiting","transitionRef","open","overlayContent"],"sources":["../../../../src/components/fields/ListBoxPopover/ListBoxPopover.tsx"],"sourcesContent":["import { getEventTarget, isFocusWithin } from '@react-aria/utils';\nimport { Key } from '@react-types/shared';\nimport { Styles, tasty } from '@tenphi/tasty';\nimport React, {\n  CSSProperties,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useInteractOutside, useOverlay, useOverlayPosition } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks/use-event';\nimport { useI18n } from '../../../i18n';\nimport { mergeProps } from '../../../utils/react';\nimport { mergeRefs } from '../../../utils/react/useCombinedRefs';\nimport { DisplayTransition } from '../../helpers';\nimport { useModalLayerRef } from '../../overlays/Modal/modal-containment';\nimport { Portal } from '../../portal';\nimport { ListBox } from '../ListBox/ListBox';\n\nexport interface ListBoxPopoverProps {\n  isOpen: boolean;\n  triggerRef: RefObject<HTMLElement>;\n  popoverRef: RefObject<HTMLDivElement>;\n  listBoxRef: RefObject<HTMLDivElement>;\n  direction: 'bottom' | 'top';\n  shouldFlip: boolean;\n  overlayOffset: number;\n  containerPadding: number;\n  /** Min width (px) for the overlay; usually the trigger's width. */\n  comboBoxWidth?: number;\n  /** Stable id used for the ListBox element and aria-controls wiring. */\n  listBoxId: string;\n  overlayStyles?: Styles;\n  listBoxStyles?: Styles;\n  optionStyles?: Styles;\n  /** Substring to highlight within each option's (text) children. */\n  optionHighlight?: string;\n  sectionStyles?: Styles;\n  headingStyles?: Styles;\n  /** Space between options, in pixels. Defaults to a hairline (`1bw`). */\n  listGap?: number;\n  selectedKey?: Key | null;\n  /**\n   * `'multiple'` lets the list hold several selected options. The list then\n   * reports the whole new selection on every toggle and never closes itself;\n   * the caller decides what a toggle means. Defaults to `'single'`.\n   */\n  selectionMode?: 'single' | 'multiple';\n  /** The selected keys in `'multiple'` mode. Ignored in `'single'` mode. */\n  selectedKeys?: Key[];\n  /** Whether options show a checkbox. Only applies in `'multiple'` mode. */\n  isCheckable?: boolean;\n  /**\n   * Whether a click inside the element `triggerRef` points at closes the\n   * popover, like any other outside click. Pass `false` when that element is\n   * where the user keeps working with the list open, such as an input that\n   * picks several options in a row. Only this popover is affected; others\n   * still close. Defaults to `true`.\n   */\n  shouldCloseOnTriggerInteraction?: boolean;\n  /**\n   * Whether an outside press on a control (a button, a link, a form control,\n   * anything with `tabindex`, or something inside one) reaches it, as one on\n   * a `data-popover-dismiss` control does: the control can take focus, and\n   * the popover closes after it, so a native Save button saves on the first\n   * click. A press anywhere else, such as a dialog's backdrop, still only\n   * closes the popover. Defaults to `false`.\n   */\n  shouldPassControlPresses?: boolean;\n  isDisabled?: boolean;\n  disabledKeys?: Iterable<Key>;\n  items?: Iterable<any>;\n  children: ReactNode;\n  /** Ref through which the ListBox exposes its internal list state. */\n  listStateRef: RefObject<any>;\n  onSelectionChange: (selection: Key | Key[] | null) => void;\n  onClose: () => void;\n  label?: ReactNode;\n  ariaLabel?: string;\n  /**\n   * Ids of the elements that name the field, read after `label` or\n   * `ariaLabel`. Without either, they alone name the list, in place of the\n   * generic \"Options\".\n   */\n  ariaLabelledby?: string;\n  compositeFocusProps: {\n    onFocus: (e: React.FocusEvent) => void;\n    onBlur: (e: React.FocusEvent) => void;\n  };\n  /** Collection node filter applied to the ListBox. */\n  filter?: (nodes: Iterable<any>) => Iterable<any>;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  /**\n   * Label shown when the list is empty (no items / no filter results).\n   * Forwarded to the inner ListBox.\n   */\n  emptyLabel?: ReactNode;\n  /**\n   * Element to anchor the overlay to geometrically. Defaults to `triggerRef`.\n   * Use this to anchor to something other than the trigger (e.g. the caret in\n   * a textarea) while keeping `triggerRef` for outside-click/dismiss logic.\n   */\n  positionTargetRef?: RefObject<Element | null>;\n  /**\n   * Receives an imperative handle exposing `updatePosition()` so the caller can\n   * force the overlay to re-anchor (e.g. when the caret moves).\n   */\n  positionApiRef?: RefObject<{ updatePosition: () => void } | null>;\n}\n\n// What `shouldPassControlPresses` lets an outside press reach.\nconst CONTROL_SELECTOR =\n  'button, a[href], input, select, textarea, [tabindex], [contenteditable]:not([contenteditable=\"false\"])';\n\nconst ListBoxPopoverWrapper = tasty({\n  qa: 'ComboBoxOverlayWrapper',\n  styles: {\n    position: 'absolute',\n    zIndex: 1000,\n  },\n});\n\nconst ListBoxPopoverElement = tasty({\n  qa: 'ComboBoxOverlay',\n  styles: {\n    display: 'grid',\n    gridRows: '1sf',\n    gridColumns: '1sf',\n    width: '$overlay-min-width max-content 50vw',\n    height: 'initial max-content (50vh - 5x)',\n    overflow: 'auto',\n    fill: '#surface',\n    radius: '1cr',\n    shadow: true,\n    padding: '0',\n    border: '#border',\n    hide: {\n      '': false,\n      hidden: true,\n    },\n    boxSizing: 'border-box',\n    transition:\n      'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out',\n    translate: {\n      '': '0 0',\n      'open & [data-placement=\"top\"]': '0 0',\n      '!open & [data-placement=\"top\"]': '0 1x',\n      'open & ([data-placement=\"bottom\"] | ![data-placement])': '0 0',\n      '!open & ([data-placement=\"bottom\"] | ![data-placement])': '0 -1x',\n    },\n    transformOrigin: {\n      '': 'top center',\n      '[data-placement=\"top\"]': 'bottom center',\n    },\n    scale: {\n      '': '1 1',\n      '!open': '1 .9',\n    },\n    opacity: {\n      '': 1,\n      '!open': 0.001,\n    },\n\n    '$overlay-min-width': 'min 30x',\n  },\n});\n\nexport const ListBoxPopover = function ListBoxPopover(\n  props: ListBoxPopoverProps,\n) {\n  const { t } = useI18n();\n  const {\n    isOpen,\n    triggerRef,\n    popoverRef,\n    listBoxRef,\n    direction,\n    shouldFlip,\n    overlayOffset,\n    containerPadding,\n    comboBoxWidth,\n    listBoxId,\n    overlayStyles,\n    listBoxStyles,\n    optionStyles,\n    optionHighlight,\n    sectionStyles,\n    headingStyles,\n    listGap,\n    selectedKey,\n    selectionMode = 'single',\n    selectedKeys,\n    isCheckable,\n    shouldCloseOnTriggerInteraction = true,\n    shouldPassControlPresses = false,\n    isDisabled,\n    disabledKeys,\n    items,\n    children,\n    listStateRef,\n    onSelectionChange,\n    onClose,\n    label,\n    ariaLabel,\n    ariaLabelledby,\n    compositeFocusProps,\n    filter,\n    size = 'medium',\n    emptyLabel,\n    positionTargetRef,\n    positionApiRef,\n  } = props;\n\n  const mergedPopoverRef = popoverRef;\n\n  // Opened inside a modal, the list stays readable while the modal hides the\n  // page.\n  const layerRef = useModalLayerRef();\n\n  // Ref to the inner scrollable element (the visible popover). react-aria\n  // measures this for its flip/shrink math and writes maxHeight onto the\n  // overlay (positioning wrapper); we forward that maxHeight to this element\n  // below so the scroll container actually shrinks instead of overflowing.\n  const overlayScrollRef = useRef<HTMLDivElement | null>(null);\n\n  // Overlay positioning — anchor to the explicit position target when given\n  // (e.g. a caret anchor), otherwise to the trigger. `triggerRef` is still\n  // used below for outside-click/dismiss behavior.\n  const {\n    overlayProps: overlayPositionProps,\n    placement,\n    updatePosition,\n  } = useOverlayPosition({\n    targetRef: (positionTargetRef ?? triggerRef) as any,\n    overlayRef: mergedPopoverRef as any,\n    scrollRef: overlayScrollRef as any,\n    placement: `${direction} start` as any,\n    shouldFlip,\n    isOpen,\n    offset: overlayOffset,\n    containerPadding: containerPadding,\n  });\n\n  // Keep positioning (top/left/zIndex) on the wrapper, but split out the\n  // available-space cap so it can be applied to the inner scroll element.\n  const { maxHeight, maxWidth, ...positionStyle } =\n    (overlayPositionProps.style ?? {}) as CSSProperties;\n\n  // Expose updatePosition so callers can re-anchor on demand (e.g. caret move).\n  useEffect(() => {\n    if (positionApiRef) {\n      positionApiRef.current = { updatePosition };\n    }\n    return () => {\n      if (positionApiRef) {\n        positionApiRef.current = null;\n      }\n    };\n  }, [positionApiRef, updatePosition]);\n\n  const getOutsidePressBehavior = (el: Element) => {\n    const menuTriggerEl = el.closest('[data-popover-trigger]');\n    if (menuTriggerEl) {\n      return menuTriggerEl === triggerRef.current ? 'consume' : 'ignore';\n    }\n    if (\n      (!shouldCloseOnTriggerInteraction && triggerRef.current?.contains(el)) ||\n      el.closest('[data-popover-keep]')\n    ) {\n      return 'ignore';\n    }\n    if (\n      (shouldPassControlPresses && el.closest(CONTROL_SELECTOR)) ||\n      el.closest('[data-popover-dismiss]')\n    ) {\n      return 'pass';\n    }\n    return 'consume';\n  };\n\n  // Overlay behavior (dismiss on outside click, escape)\n  const { overlayProps: overlayBehaviorProps } = useOverlay(\n    {\n      onClose,\n      shouldCloseOnBlur: true,\n      isOpen,\n      isDismissable: true,\n      shouldCloseOnInteractOutside: (el) => {\n        const behavior = getOutsidePressBehavior(el);\n        if (behavior === 'pass') {\n          // Leave the control's press intact and close after its action.\n          setTimeout(onClose, 0);\n        }\n        return behavior === 'consume';\n      },\n    },\n    mergedPopoverRef as any,\n  );\n\n  const preserveOutsidePressFocus = useEvent((event: PointerEvent) => {\n    if (\n      (isFocusWithin(triggerRef.current) ||\n        isFocusWithin(mergedPopoverRef.current)) &&\n      getOutsidePressBehavior(getEventTarget(event) as Element) === 'consume'\n    ) {\n      event.preventDefault();\n    }\n  });\n\n  // Aria now permits outside presses to move focus. Consumed presses must\n  // only dismiss this list; a blur would also commit the field's draft.\n  useInteractOutside({\n    ref: mergedPopoverRef,\n    isDisabled: !isOpen,\n    onInteractOutsideStart: preserveOutsidePressFocus,\n    onInteractOutside: preserveOutsidePressFocus,\n  });\n\n  // Extract primary placement direction for consistent styling\n  const placementDirection = placement?.split(' ')[0] || direction;\n\n  // Hold the DisplayTransition ref so we can bind the same node to both the\n  // transition listener and our scroll ref via a single stable callback.\n  const transitionRefHolder = useRef<\n    ((node: HTMLElement | null) => void) | null\n  >(null);\n  const setScrollRef = useCallback((node: HTMLElement | null) => {\n    overlayScrollRef.current = node as HTMLDivElement | null;\n    transitionRefHolder.current?.(node);\n  }, []);\n\n  const overlayContent = (\n    <DisplayTransition isShown={isOpen}>\n      {({ phase, isShown, isExiting, ref: transitionRef }) => {\n        transitionRefHolder.current = transitionRef;\n        return (\n          <ListBoxPopoverWrapper\n            {...mergeProps(\n              { ...overlayPositionProps, style: positionStyle },\n              overlayBehaviorProps,\n              compositeFocusProps,\n            )}\n            ref={mergeRefs(mergedPopoverRef, layerRef)}\n            style={positionStyle}\n            // A press on the list while it fades out must not close the\n            // overlay under it (CUB-5293) — see `Overlay`.\n            data-react-aria-top-layer={isExiting || undefined}\n          >\n            <ListBoxPopoverElement\n              ref={setScrollRef}\n              data-placement={placementDirection}\n              data-phase={phase}\n              mods={{\n                open: isShown,\n                hidden: phase === 'unmounted',\n              }}\n              styles={overlayStyles}\n              style={{\n                '--overlay-min-width': comboBoxWidth\n                  ? `${comboBoxWidth}px`\n                  : undefined,\n                maxHeight,\n                maxWidth,\n              }}\n            >\n              <ListBox\n                ref={listBoxRef}\n                disableSelectionToggle\n                id={listBoxId}\n                aria-label={\n                  ariaLabel ||\n                  (typeof label === 'string'\n                    ? label\n                    : ariaLabelledby\n                      ? undefined\n                      : t('listBoxPopover.options', 'Options'))\n                }\n                aria-labelledby={ariaLabelledby}\n                // Left unset in single mode, as before this prop existed: an\n                // explicit `'single'` switches on ListBox's no-toggle branch,\n                // which changes what re-picking the selected option does.\n                selectionMode={\n                  selectionMode === 'multiple' ? 'multiple' : undefined\n                }\n                selectedKey={\n                  selectionMode === 'single' ? selectedKey : undefined\n                }\n                selectedKeys={\n                  selectionMode === 'multiple' ? selectedKeys : undefined\n                }\n                isCheckable={\n                  selectionMode === 'multiple' ? isCheckable : undefined\n                }\n                isDisabled={isDisabled}\n                disabledKeys={disabledKeys}\n                shouldUseVirtualFocus={true}\n                items={items as any}\n                filter={filter}\n                styles={listBoxStyles}\n                optionStyles={optionStyles}\n                optionHighlight={optionHighlight}\n                sectionStyles={sectionStyles}\n                headingStyles={headingStyles}\n                listGap={listGap}\n                stateRef={listStateRef}\n                shape=\"popover\"\n                emptyLabel={emptyLabel}\n                onSelectionChange={onSelectionChange}\n              >\n                {children as any}\n              </ListBox>\n            </ListBoxPopoverElement>\n          </ListBoxPopoverWrapper>\n        );\n      }}\n    </DisplayTransition>\n  );\n\n  return <Portal>{overlayContent}</Portal>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAkHA,MAAM0E,mBACJ;AAEF,MAAMC,wBAAwBvE,MAAM;CAClCwE,IAAI;CACJC,QAAQ;EACNC,UAAU;EACVC,QAAQ;EACV;CACD,CAAC;AAEF,MAAMC,wBAAwB5E,MAAM;CAClCwE,IAAI;CACJC,QAAQ;EACNI,SAAS;EACTC,UAAU;EACVC,aAAa;EACbC,OAAO;EACPC,QAAQ;EACRC,UAAU;EACVC,MAAM;EACNC,QAAQ;EACRC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,MAAM;GACJ,IAAI;GACJC,QAAQ;GACT;EACDC,WAAW;EACXC,YACE;EACFC,WAAW;GACT,IAAI;GACJ,mCAAiC;GACjC,oCAAkC;GAClC,4DAA0D;GAC1D,6DAA2D;GAC5D;EACDC,iBAAiB;GACf,IAAI;GACJ,4BAA0B;GAC3B;EACDC,OAAO;GACL,IAAI;GACJ,SAAS;GACV;EACDC,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EAED,sBAAsB;EACxB;CACD,CAAC;AAEF,MAAaC,iBAAiB,SAAAA,eAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAG5B,MAAA,EAAAC,MAAcxF,SAAS;CACvB,MAAA,EAAAQ,QAAAC,YAAAE,YAAAE,YAAAC,WAAAC,YAAAC,eAAAC,kBAAAC,eAAAC,WAAAC,eAAAC,eAAAC,cAAAC,iBAAAC,eAAAC,eAAAC,SAAAC,aAAAC,eAAA6D,IAAA5D,cAAAC,aAAAC,iCAAA2D,IAAA1D,0BAAA2D,IAAA1D,YAAAC,cAAAE,OAAAC,UAAAC,cAAAC,mBAAAE,SAAAC,OAAAC,WAAAC,gBAAAC,qBAAAK,QAAAE,MAAAwC,IAAAvC,YAAAC,mBAAAE,mBAwCI6B;CArBF,MAAAzD,gBAAA6D,OAAAI,SAAA,WAAAJ;CAGA,MAAA1D,kCAAA2D,OAAAG,SAAA,OAAAH;CACA,MAAA1D,2BAAA2D,OAAAE,SAAA,QAAAF;CAmBF,MAAAG,mBAAyBnF;CAIzB,MAAAoF,WAAiB3F,kBAAkB;CAMnC,MAAA4F,mBAAyBrG,OAA8B,KAAK;CAU/C,MAAAsG,KAAC3C,qBAAA7C;CACA,MAAAyF,KAAAJ;CAED,MAAAK,KAAA,GAAGrF,UAAS;CAAe,IAAAsF;AAAA,KAAAd,EAAA,OAAArE,oBAAAqE,EAAA,OAAA9E,UAAA8E,EAAA,OAAAtE,iBAAAsE,EAAA,OAAAvE,cAAAuE,EAAA,OAAAW,MAAAX,EAAA,OAAAY,MAAAZ,EAAA,OAAAa,IAAA;AAJjBC,OAAA;GAAAC,WACVJ;GAAwCK,YACvCJ;GAAuBK,WACxBP;GAAuBQ,WACvBL;GAA2BpF;GAAAP;GAAAiG,QAG9BzF;GAAaC;GAEtB;AAAAqE,IAAA,KAAArE;AAAAqE,IAAA,KAAA9E;AAAA8E,IAAA,KAAAtE;AAAAsE,IAAA,KAAAvE;AAAAuE,IAAA,KAAAW;AAAAX,IAAA,KAAAY;AAAAZ,IAAA,KAAAa;AAAAb,IAAA,KAAAc;OAAAA,MAAAd,EAAA;CAbD,MAAA,EAAAoB,cAAAC,sBAAAH,WAAA/C,mBAII3D,mBAAmBsG,GASrB;CAAC,IAAAQ;AAAA,KAAAtB,EAAA,OAAAqB,qBAAAE,OAAA;AAKAD,OAAAD,qBAAoBE,SAApB,EAAgC;AAAAvB,IAAA,KAAAqB,qBAAAE;AAAAvB,IAAA,KAAAsB;OAAAA,MAAAtB,EAAA;CAAjC,MAAAwB,KAACF;CAAkD,IAAAG;CAAA,IAAAC;CAAA,IAAAC;AAAA,KAAA3B,EAAA,QAAAwB,IAAA;AADrD,GAAA,CAAAC,WAAAC,aAAAC,iBACEH;AAAoDxB,IAAA,MAAAwB;AAAAxB,IAAA,MAAAyB;AAAAzB,IAAA,MAAA0B;AAAA1B,IAAA,MAAA2B;QAAA;AAAAF,cAAAzB,EAAA;AAAA0B,aAAA1B,EAAA;AAAA2B,kBAAA3B,EAAA;;CAAA,IAAA4B;CAAA,IAAAC;AAAA,KAAA7B,EAAA,QAAA9B,kBAAA8B,EAAA,QAAA7B,gBAAA;AAG5CyD,cAAA;AACR,OAAI1D,eACFA,gBAAc4D,UAAW,EAAA3D,gBAAH;AACvB,gBACM;AACL,QAAID,eACFA,gBAAc4D,UAAW;;;AAG5BD,QAAA,CAAC3D,gBAAgBC,eAAe;AAAA6B,IAAA,MAAA9B;AAAA8B,IAAA,MAAA7B;AAAA6B,IAAA,MAAA4B;AAAA5B,IAAA,MAAA6B;QAAA;AAAAD,QAAA5B,EAAA;AAAA6B,QAAA7B,EAAA;;AATnC5F,WAAUwH,KASPC,IAAiC;CAAA,IAAAE;AAAA,KAAA/B,EAAA,QAAAvD,mCAAAuD,EAAA,QAAAtD,4BAAAsD,EAAA,QAAA7E,YAAA;AAEJ4G,SAAAC,OAAA;GAC9B,MAAAC,gBAAsBD,GAAEE,QAAS,yBAAyB;AAC1D,OAAID,cAAa,QACRA,kBAAkB9G,WAAU2G,UAA5B,YAAA;AAET,OACG,CAACrF,mCAAmCtB,WAAU2G,SAAkBK,SAACH,GACjC,IAAjCA,GAAEE,QAAS,sBAAsB,CAAA,QAE1B;AAET,OACGxF,4BAA4BsF,GAAEE,QAAS9D,iBACJ,IAApC4D,GAAEE,QAAS,yBAAyB,CAAA,QAE7B;AACR,UACM;;AACRlC,IAAA,MAAAvD;AAAAuD,IAAA,MAAAtD;AAAAsD,IAAA,MAAA7E;AAAA6E,IAAA,MAAA+B;OAAAA,OAAA/B,EAAA;CAlBD,MAAAoC,0BAAgCL;CAkB9B,IAAAM;AAAA,KAAArC,EAAA,QAAAoC,2BAAApC,EAAA,QAAA7C,SAAA;AASgCkF,SAAAC,SAAA;GAC5B,MAAAC,WAAiBH,wBAAwBJ,KAAG;AAC5C,OAAIO,aAAa,OAEfC,YAAWrF,SAAS,EAAE;AACvB,UACMoF,aAAa;;AACrBvC,IAAA,MAAAoC;AAAApC,IAAA,MAAA7C;AAAA6C,IAAA,MAAAqC;OAAAA,OAAArC,EAAA;CAAA,IAAAyC;AAAA,KAAAzC,EAAA,QAAA9E,UAAA8E,EAAA,QAAA7C,WAAA6C,EAAA,QAAAqC,KAAA;AAZHI,QAAA;GAAAtF;GAAAuF,mBAEqB;GAAIxH;GAAAyH,eAER;GAAIC,8BACWP;GAQ/B;AAAArC,IAAA,MAAA9E;AAAA8E,IAAA,MAAA7C;AAAA6C,IAAA,MAAAqC;AAAArC,IAAA,MAAAyC;OAAAA,OAAAzC,EAAA;CAdH,MAAA,EAAAoB,cAAAyB,yBAA+CtI,WAC7CkI,KAcAjC,iBACD;CAAC,IAAAsC;AAAA,KAAA9C,EAAA,QAAAoC,2BAAApC,EAAA,QAAAQ,oBAAAR,EAAA,QAAA7E,YAAA;AAEyC2H,SAAAC,UAAA;AACzC,QACGpJ,cAAcwB,WAAU2G,QACgB,IAAvCnI,cAAc6G,iBAAgBsB,QACuC,KAAvEM,wBAAwB1I,eAAeqJ,MAAM,CAAY,KAAK,UAE9DA,OAAKC,gBAAiB;;AAEzBhD,IAAA,MAAAoC;AAAApC,IAAA,MAAAQ;AAAAR,IAAA,MAAA7E;AAAA6E,IAAA,MAAA8C;OAAAA,OAAA9C,EAAA;CARD,MAAAiD,4BAAkCxI,SAASqI,IAQzC;CAMY,MAAAI,MAAA,CAAChI;CAAM,IAAAiI;AAAA,KAAAnD,EAAA,QAAAQ,oBAAAR,EAAA,QAAAiD,6BAAAjD,EAAA,QAAAkD,KAAA;AAFFC,QAAA;GAAAC,KACZ5C;GAAgB7D,YACTuG;GAAOG,wBACKJ;GAAyBK,mBAC9BL;GACpB;AAAAjD,IAAA,MAAAQ;AAAAR,IAAA,MAAAiD;AAAAjD,IAAA,MAAAkD;AAAAlD,IAAA,MAAAmD;OAAAA,OAAAnD,EAAA;AALD1F,oBAAmB6I,IAKjB;CAAA,IAAAI;AAAA,KAAAvD,EAAA,QAAAxE,aAAAwE,EAAA,QAAAkB,WAAA;AAGyBqC,QAAArC,WAASsC,MAAQ,IAAO,CAAA,MAAxBhI;AAAqCwE,IAAA,MAAAxE;AAAAwE,IAAA,MAAAkB;AAAAlB,IAAA,MAAAuD;OAAAA,OAAAvD,EAAA;CAAhE,MAAAyD,qBAA2BF;CAI3B,MAAAG,sBAA4BrJ,OAE1B,KAAK;CAAC,IAAAsJ;AAAA,KAAA3D,EAAA,QAAA4D,OAAAC,IAAA,4BAAA,EAAA;AACyBF,SAAAG,SAAA;AAC/BpD,oBAAgBoB,UAAWgC;AAC3BJ,uBAAmB5B,UAAWgC,KAAK;;AACpC9D,IAAA,MAAA2D;OAAAA,OAAA3D,EAAA;CAHD,MAAA+D,eAAqBJ;CAGd,IAAAK;AAAA,KAAAhE,EAAA,QAAA3C,aAAA2C,EAAA,QAAA1C,kBAAA0C,EAAA,QAAAjD,YAAAiD,EAAA,QAAApE,iBAAAoE,EAAA,QAAAzC,uBAAAyC,EAAA,QAAApD,gBAAAoD,EAAA,QAAAjC,cAAAiC,EAAA,QAAApC,UAAAoC,EAAA,QAAA7D,iBAAA6D,EAAA,QAAAxD,eAAAwD,EAAA,QAAArD,cAAAqD,EAAA,QAAAlD,SAAAkD,EAAA,QAAA5C,SAAA4C,EAAA,QAAAS,YAAAT,EAAA,QAAAnE,aAAAmE,EAAA,QAAAzE,cAAAyE,EAAA,QAAAjE,iBAAAiE,EAAA,QAAA5D,WAAA4D,EAAA,QAAAhD,gBAAAgD,EAAA,QAAAyB,aAAAzB,EAAA,QAAA0B,YAAA1B,EAAA,QAAAQ,oBAAAR,EAAA,QAAA/C,qBAAA+C,EAAA,QAAA/D,mBAAA+D,EAAA,QAAAhE,gBAAAgE,EAAA,QAAA6C,wBAAA7C,EAAA,QAAAqB,wBAAArB,EAAA,QAAAlE,iBAAAkE,EAAA,QAAAyD,sBAAAzD,EAAA,QAAA2B,iBAAA3B,EAAA,QAAA9D,iBAAA8D,EAAA,QAAA3D,eAAA2D,EAAA,QAAAzD,gBAAAyD,EAAA,QAAA1D,iBAAA0D,EAAA,QAAAE,GAAA;AAIF8D,SAAAC,QAAA;GAAC,MAAA,EAAAC,OAAAC,SAAAC,WAAAhB,KAAAiB,kBAAAJ;AACAP,uBAAmB5B,UAAWuC;AAAH,UAEzB,oBAAC;IAAqB,GAChB1J,aACF;KAAA,GAAK0G;KAAoBE,OAASI;KAAe,EACjDkB,sBACAtF,oBACD;IACI,KAAA3C,YAAU4F,kBAAkBC,SAAQ;IAClCkB,OAAAA;IAGoB,6BAAAyC,aAAA7D;cAE3B,oBAAC;KACMwD,KAAAA;KACWN,kBAAAA;KACJS,cAAAA;KACN,MAAA;MAAAI,MACEH;MAAO5E,QACL2E,UAAU;MACpB;KACQpI,QAAAA;KACD,OAAA;MAAA,uBACkBF,gBAAA,GAChBA,cAAa,MADG2E;MAEVkB;MAAAC;MAGf;eAEA,oBAAC;MACMnG,KAAAA;MACL,wBAAA;MACIM,IAAAA;MAEF,cAAAwB,cACC,OAAOD,UAAU,WAAjBA,QAEGE,iBAAAiD,SAEEL,EAAE,0BAA0B,UAAW;MAE9B5C,mBAAAA;MAKf,eAAAhB,kBAAkB,aAAlB,aAAAiE;MAGA,aAAAjE,kBAAkB,WAAlBD,cAAAkE;MAGA,cAAAjE,kBAAkB,aAAlBC,eAAAgE;MAGA,aAAAjE,kBAAkB,aAAlBE,cAAA+D;MAEU5D;MACEC;MACS,uBAAA;MAChBE;MACCc;MACA7B,QAAAA;MACMC;MACGC;MACFC;MACAC;MACNC;MACCY,UAAAA;MACJ,OAAA;MACMe;MACOd;MAElBF;OAEL;MACF;KAAwB;;AAE3BiD,IAAA,MAAA3C;AAAA2C,IAAA,MAAA1C;AAAA0C,IAAA,MAAAjD;AAAAiD,IAAA,MAAApE;AAAAoE,IAAA,MAAAzC;AAAAyC,IAAA,MAAApD;AAAAoD,IAAA,MAAAjC;AAAAiC,IAAA,MAAApC;AAAAoC,IAAA,MAAA7D;AAAA6D,IAAA,MAAAxD;AAAAwD,IAAA,MAAArD;AAAAqD,IAAA,MAAAlD;AAAAkD,IAAA,MAAA5C;AAAA4C,IAAA,MAAAS;AAAAT,IAAA,MAAAnE;AAAAmE,IAAA,MAAAzE;AAAAyE,IAAA,MAAAjE;AAAAiE,IAAA,MAAA5D;AAAA4D,IAAA,MAAAhD;AAAAgD,IAAA,MAAAyB;AAAAzB,IAAA,MAAA0B;AAAA1B,IAAA,MAAAQ;AAAAR,IAAA,MAAA/C;AAAA+C,IAAA,MAAA/D;AAAA+D,IAAA,MAAAhE;AAAAgE,IAAA,MAAA6C;AAAA7C,IAAA,MAAAqB;AAAArB,IAAA,MAAAlE;AAAAkE,IAAA,MAAAyD;AAAAzD,IAAA,MAAA2B;AAAA3B,IAAA,MAAA9D;AAAA8D,IAAA,MAAA3D;AAAA2D,IAAA,MAAAzD;AAAAyD,IAAA,MAAA1D;AAAA0D,IAAA,MAAAE;AAAAF,IAAA,MAAAgE;OAAAA,OAAAhE,EAAA;CAAA,IAAAiE;AAAA,KAAAjE,EAAA,QAAA9E,UAAA8E,EAAA,QAAAgE,KAAA;AAIEC,QAAA,oBAAC,oBAtFN,oBAAC;GAA2B/I,SAAAA;aACzB8I;IAkFiB,GAGkB;AAAAhE,IAAA,MAAA9E;AAAA8E,IAAA,MAAAgE;AAAAhE,IAAA,MAAAiE;OAAAA,OAAAjE,EAAA;AAAA,QAAjCiE"}
+{"version":3,"file":"ListBoxPopover.js","names":["getEventTarget","isFocusWithin","Key","Styles","tasty","React","CSSProperties","ReactNode","RefObject","useCallback","useEffect","useRef","useInteractOutside","useOverlay","useOverlayPosition","useEvent","useI18n","mergeProps","mergeRefs","DisplayTransition","useModalLayerRef","Portal","ListBox","ListBoxPopoverProps","isOpen","triggerRef","HTMLElement","popoverRef","HTMLDivElement","listBoxRef","direction","shouldFlip","overlayOffset","containerPadding","comboBoxWidth","listBoxId","overlayStyles","listBoxStyles","optionStyles","optionHighlight","sectionStyles","headingStyles","listGap","selectedKey","selectionMode","selectedKeys","isCheckable","shouldCloseOnTriggerInteraction","isDisabled","disabledKeys","Iterable","items","children","listStateRef","onSelectionChange","selection","onClose","label","ariaLabel","ariaLabelledby","compositeFocusProps","onFocus","e","FocusEvent","onBlur","filter","nodes","size","emptyLabel","positionTargetRef","Element","positionApiRef","updatePosition","CONTROL_SELECTOR","LAYER_SELECTOR","DISABLED_SELECTOR","isOutsideControl","el","trigger","control","closest","contains","matches","layer","ListBoxPopoverWrapper","qa","styles","position","zIndex","ListBoxPopoverElement","display","gridRows","gridColumns","width","height","overflow","fill","radius","shadow","padding","border","hide","hidden","boxSizing","transition","translate","transformOrigin","scale","opacity","ListBoxPopover","props","$","_c","t","t0","t1","t2","undefined","mergedPopoverRef","layerRef","overlayScrollRef","t3","t4","t5","t6","targetRef","overlayRef","scrollRef","placement","offset","overlayProps","overlayPositionProps","t7","style","t8","maxHeight","maxWidth","positionStyle","t10","t9","current","t11","menuTriggerEl","dismissEl","getOutsidePressBehavior","t12","el_0","behavior","setTimeout","t13","shouldCloseOnBlur","isDismissable","shouldCloseOnInteractOutside","overlayBehaviorProps","t14","event","preventDefault","preserveOutsidePressFocus","t15","t16","ref","onInteractOutsideStart","onInteractOutside","t17","split","placementDirection","transitionRefHolder","t18","Symbol","for","node","setScrollRef","t19","t20","phase","isShown","isExiting","transitionRef","open","overlayContent"],"sources":["../../../../src/components/fields/ListBoxPopover/ListBoxPopover.tsx"],"sourcesContent":["import { getEventTarget, isFocusWithin } from '@react-aria/utils';\nimport { Key } from '@react-types/shared';\nimport { Styles, tasty } from '@tenphi/tasty';\nimport React, {\n  CSSProperties,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useInteractOutside, useOverlay, useOverlayPosition } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks/use-event';\nimport { useI18n } from '../../../i18n';\nimport { mergeProps } from '../../../utils/react';\nimport { mergeRefs } from '../../../utils/react/useCombinedRefs';\nimport { DisplayTransition } from '../../helpers';\nimport { useModalLayerRef } from '../../overlays/Modal/modal-containment';\nimport { Portal } from '../../portal';\nimport { ListBox } from '../ListBox/ListBox';\n\nexport interface ListBoxPopoverProps {\n  isOpen: boolean;\n  triggerRef: RefObject<HTMLElement>;\n  popoverRef: RefObject<HTMLDivElement>;\n  listBoxRef: RefObject<HTMLDivElement>;\n  direction: 'bottom' | 'top';\n  shouldFlip: boolean;\n  overlayOffset: number;\n  containerPadding: number;\n  /** Min width (px) for the overlay; usually the trigger's width. */\n  comboBoxWidth?: number;\n  /** Stable id used for the ListBox element and aria-controls wiring. */\n  listBoxId: string;\n  overlayStyles?: Styles;\n  listBoxStyles?: Styles;\n  optionStyles?: Styles;\n  /** Substring to highlight within each option's (text) children. */\n  optionHighlight?: string;\n  sectionStyles?: Styles;\n  headingStyles?: Styles;\n  /** Space between options, in pixels. Defaults to a hairline (`1bw`). */\n  listGap?: number;\n  selectedKey?: Key | null;\n  /**\n   * `'multiple'` lets the list hold several selected options. The list then\n   * reports the whole new selection on every toggle and never closes itself;\n   * the caller decides what a toggle means. Defaults to `'single'`.\n   */\n  selectionMode?: 'single' | 'multiple';\n  /** The selected keys in `'multiple'` mode. Ignored in `'single'` mode. */\n  selectedKeys?: Key[];\n  /** Whether options show a checkbox. Only applies in `'multiple'` mode. */\n  isCheckable?: boolean;\n  /**\n   * Whether a click inside the element `triggerRef` points at closes the\n   * popover, like any other outside click. Pass `false` when that element is\n   * where the user keeps working with the list open, such as an input that\n   * picks several options in a row. Only this popover is affected; others\n   * still close. Defaults to `true`.\n   */\n  shouldCloseOnTriggerInteraction?: boolean;\n  isDisabled?: boolean;\n  disabledKeys?: Iterable<Key>;\n  items?: Iterable<any>;\n  children: ReactNode;\n  /** Ref through which the ListBox exposes its internal list state. */\n  listStateRef: RefObject<any>;\n  onSelectionChange: (selection: Key | Key[] | null) => void;\n  onClose: () => void;\n  label?: ReactNode;\n  ariaLabel?: string;\n  /**\n   * Ids of the elements that name the field, read after `label` or\n   * `ariaLabel`. Without either, they alone name the list, in place of the\n   * generic \"Options\".\n   */\n  ariaLabelledby?: string;\n  compositeFocusProps: {\n    onFocus: (e: React.FocusEvent) => void;\n    onBlur: (e: React.FocusEvent) => void;\n  };\n  /** Collection node filter applied to the ListBox. */\n  filter?: (nodes: Iterable<any>) => Iterable<any>;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  /**\n   * Label shown when the list is empty (no items / no filter results).\n   * Forwarded to the inner ListBox.\n   */\n  emptyLabel?: ReactNode;\n  /**\n   * Element to anchor the overlay to geometrically. Defaults to `triggerRef`.\n   * Use this to anchor to something other than the trigger (e.g. the caret in\n   * a textarea) while keeping `triggerRef` for outside-click/dismiss logic.\n   */\n  positionTargetRef?: RefObject<Element | null>;\n  /**\n   * Receives an imperative handle exposing `updatePosition()` so the caller can\n   * force the overlay to re-anchor (e.g. when the caret moves).\n   */\n  positionApiRef?: RefObject<{ updatePosition: () => void } | null>;\n}\n\n// The controls an outside press reaches: a button, a link, a form control,\n// anything with `tabindex`, or something inside one.\nconst CONTROL_SELECTOR =\n  'button, a[href], input, select, textarea, [tabindex], [contenteditable]:not([contenteditable=\"false\"])';\n\n// The layer a field sits in: a dialog, popover or tray, otherwise the page.\nconst LAYER_SELECTOR =\n  '[role=\"dialog\"], [role=\"alertdialog\"], [data-overlay-layer]';\n\nconst DISABLED_SELECTOR = ':disabled, [aria-disabled=\"true\"]';\n\n// An enabled control apart from the field, in the field's own layer. A press\n// anywhere else counts as blank space and keeps the field's focus and draft:\n// on the field itself, on a dialog's surface, on a disabled control, or\n// outside the field's layer, which stays open.\nfunction isOutsideControl(el: Element, trigger: HTMLElement | null) {\n  const control = el.closest(CONTROL_SELECTOR);\n\n  if (\n    control == null ||\n    trigger == null ||\n    control.contains(trigger) ||\n    trigger.contains(control) ||\n    control.matches(`${LAYER_SELECTOR}, ${DISABLED_SELECTOR}`)\n  ) {\n    return false;\n  }\n\n  const layer = trigger.closest(LAYER_SELECTOR);\n\n  return layer == null || layer.contains(control);\n}\n\nconst ListBoxPopoverWrapper = tasty({\n  qa: 'ComboBoxOverlayWrapper',\n  styles: {\n    position: 'absolute',\n    zIndex: 1000,\n  },\n});\n\nconst ListBoxPopoverElement = tasty({\n  qa: 'ComboBoxOverlay',\n  styles: {\n    display: 'grid',\n    gridRows: '1sf',\n    gridColumns: '1sf',\n    width: '$overlay-min-width max-content 50vw',\n    height: 'initial max-content (50vh - 5x)',\n    overflow: 'auto',\n    fill: '#surface',\n    radius: '1cr',\n    shadow: true,\n    padding: '0',\n    border: '#border',\n    hide: {\n      '': false,\n      hidden: true,\n    },\n    boxSizing: 'border-box',\n    transition:\n      'translate $transition ease-out, scale $transition ease-out, theme $transition ease-out',\n    translate: {\n      '': '0 0',\n      'open & [data-placement=\"top\"]': '0 0',\n      '!open & [data-placement=\"top\"]': '0 1x',\n      'open & ([data-placement=\"bottom\"] | ![data-placement])': '0 0',\n      '!open & ([data-placement=\"bottom\"] | ![data-placement])': '0 -1x',\n    },\n    transformOrigin: {\n      '': 'top center',\n      '[data-placement=\"top\"]': 'bottom center',\n    },\n    scale: {\n      '': '1 1',\n      '!open': '1 .9',\n    },\n    opacity: {\n      '': 1,\n      '!open': 0.001,\n    },\n\n    '$overlay-min-width': 'min 30x',\n  },\n});\n\nexport const ListBoxPopover = function ListBoxPopover(\n  props: ListBoxPopoverProps,\n) {\n  const { t } = useI18n();\n  const {\n    isOpen,\n    triggerRef,\n    popoverRef,\n    listBoxRef,\n    direction,\n    shouldFlip,\n    overlayOffset,\n    containerPadding,\n    comboBoxWidth,\n    listBoxId,\n    overlayStyles,\n    listBoxStyles,\n    optionStyles,\n    optionHighlight,\n    sectionStyles,\n    headingStyles,\n    listGap,\n    selectedKey,\n    selectionMode = 'single',\n    selectedKeys,\n    isCheckable,\n    shouldCloseOnTriggerInteraction = true,\n    isDisabled,\n    disabledKeys,\n    items,\n    children,\n    listStateRef,\n    onSelectionChange,\n    onClose,\n    label,\n    ariaLabel,\n    ariaLabelledby,\n    compositeFocusProps,\n    filter,\n    size = 'medium',\n    emptyLabel,\n    positionTargetRef,\n    positionApiRef,\n  } = props;\n\n  const mergedPopoverRef = popoverRef;\n\n  // Opened inside a modal, the list stays readable while the modal hides the\n  // page.\n  const layerRef = useModalLayerRef();\n\n  // Ref to the inner scrollable element (the visible popover). react-aria\n  // measures this for its flip/shrink math and writes maxHeight onto the\n  // overlay (positioning wrapper); we forward that maxHeight to this element\n  // below so the scroll container actually shrinks instead of overflowing.\n  const overlayScrollRef = useRef<HTMLDivElement | null>(null);\n\n  // Overlay positioning — anchor to the explicit position target when given\n  // (e.g. a caret anchor), otherwise to the trigger. `triggerRef` is still\n  // used below for outside-click/dismiss behavior.\n  const {\n    overlayProps: overlayPositionProps,\n    placement,\n    updatePosition,\n  } = useOverlayPosition({\n    targetRef: (positionTargetRef ?? triggerRef) as any,\n    overlayRef: mergedPopoverRef as any,\n    scrollRef: overlayScrollRef as any,\n    placement: `${direction} start` as any,\n    shouldFlip,\n    isOpen,\n    offset: overlayOffset,\n    containerPadding: containerPadding,\n  });\n\n  // Keep positioning (top/left/zIndex) on the wrapper, but split out the\n  // available-space cap so it can be applied to the inner scroll element.\n  const { maxHeight, maxWidth, ...positionStyle } =\n    (overlayPositionProps.style ?? {}) as CSSProperties;\n\n  // Expose updatePosition so callers can re-anchor on demand (e.g. caret move).\n  useEffect(() => {\n    if (positionApiRef) {\n      positionApiRef.current = { updatePosition };\n    }\n    return () => {\n      if (positionApiRef) {\n        positionApiRef.current = null;\n      }\n    };\n  }, [positionApiRef, updatePosition]);\n\n  const getOutsidePressBehavior = (el: Element) => {\n    const menuTriggerEl = el.closest('[data-popover-trigger]');\n    if (menuTriggerEl) {\n      return menuTriggerEl === triggerRef.current ? 'consume' : 'ignore';\n    }\n    if (\n      (!shouldCloseOnTriggerInteraction && triggerRef.current?.contains(el)) ||\n      el.closest('[data-popover-keep]')\n    ) {\n      return 'ignore';\n    }\n    // The press reaches an outside control, so a checkbox toggles, a text\n    // field takes focus and a native Save button saves on the first click.\n    // A UI Kit Button passes from any layer, unless it is disabled.\n    const dismissEl = el.closest('[data-popover-dismiss]');\n\n    if (\n      isOutsideControl(el, triggerRef.current) ||\n      (dismissEl != null && !dismissEl.matches(DISABLED_SELECTOR))\n    ) {\n      return 'pass';\n    }\n    return 'consume';\n  };\n\n  // Overlay behavior (dismiss on outside click, escape)\n  const { overlayProps: overlayBehaviorProps } = useOverlay(\n    {\n      onClose,\n      shouldCloseOnBlur: true,\n      isOpen,\n      isDismissable: true,\n      shouldCloseOnInteractOutside: (el) => {\n        const behavior = getOutsidePressBehavior(el);\n        if (behavior === 'pass') {\n          // Leave the control's press intact and close after its action.\n          setTimeout(onClose, 0);\n        }\n        return behavior === 'consume';\n      },\n    },\n    mergedPopoverRef as any,\n  );\n\n  const preserveOutsidePressFocus = useEvent((event: PointerEvent) => {\n    if (\n      (isFocusWithin(triggerRef.current) ||\n        isFocusWithin(mergedPopoverRef.current)) &&\n      getOutsidePressBehavior(getEventTarget(event) as Element) === 'consume'\n    ) {\n      event.preventDefault();\n    }\n  });\n\n  // Aria now permits outside presses to move focus. A passed press moves it\n  // to its control, and the field settles its draft on blur, as on Tab. A\n  // consumed press, such as one on blank space or a dialog's backdrop, must\n  // only dismiss this list: the field keeps focus and its draft.\n  useInteractOutside({\n    ref: mergedPopoverRef,\n    isDisabled: !isOpen,\n    onInteractOutsideStart: preserveOutsidePressFocus,\n    onInteractOutside: preserveOutsidePressFocus,\n  });\n\n  // Extract primary placement direction for consistent styling\n  const placementDirection = placement?.split(' ')[0] || direction;\n\n  // Hold the DisplayTransition ref so we can bind the same node to both the\n  // transition listener and our scroll ref via a single stable callback.\n  const transitionRefHolder = useRef<\n    ((node: HTMLElement | null) => void) | null\n  >(null);\n  const setScrollRef = useCallback((node: HTMLElement | null) => {\n    overlayScrollRef.current = node as HTMLDivElement | null;\n    transitionRefHolder.current?.(node);\n  }, []);\n\n  const overlayContent = (\n    <DisplayTransition isShown={isOpen}>\n      {({ phase, isShown, isExiting, ref: transitionRef }) => {\n        transitionRefHolder.current = transitionRef;\n        return (\n          <ListBoxPopoverWrapper\n            {...mergeProps(\n              { ...overlayPositionProps, style: positionStyle },\n              overlayBehaviorProps,\n              compositeFocusProps,\n            )}\n            ref={mergeRefs(mergedPopoverRef, layerRef)}\n            style={positionStyle}\n            // A press on the list while it fades out must not close the\n            // overlay under it (CUB-5293) — see `Overlay`.\n            data-react-aria-top-layer={isExiting || undefined}\n          >\n            <ListBoxPopoverElement\n              ref={setScrollRef}\n              data-placement={placementDirection}\n              data-phase={phase}\n              mods={{\n                open: isShown,\n                hidden: phase === 'unmounted',\n              }}\n              styles={overlayStyles}\n              style={{\n                '--overlay-min-width': comboBoxWidth\n                  ? `${comboBoxWidth}px`\n                  : undefined,\n                maxHeight,\n                maxWidth,\n              }}\n            >\n              <ListBox\n                isBare\n                ref={listBoxRef}\n                disableSelectionToggle\n                id={listBoxId}\n                aria-label={\n                  ariaLabel ||\n                  (typeof label === 'string'\n                    ? label\n                    : ariaLabelledby\n                      ? undefined\n                      : t('listBoxPopover.options', 'Options'))\n                }\n                aria-labelledby={ariaLabelledby}\n                selectionMode={selectionMode}\n                selectedKey={\n                  selectionMode === 'single' ? selectedKey : undefined\n                }\n                selectedKeys={\n                  selectionMode === 'multiple' ? selectedKeys : undefined\n                }\n                isCheckable={\n                  selectionMode === 'multiple' ? isCheckable : undefined\n                }\n                isDisabled={isDisabled}\n                disabledKeys={disabledKeys}\n                // As in Select: a large field opens large options, a small\n                // one medium options, which stay easy to pick.\n                size={size === 'large' ? 'large' : 'medium'}\n                shouldUseVirtualFocus={true}\n                items={items as any}\n                filter={filter}\n                styles={listBoxStyles}\n                optionStyles={optionStyles}\n                optionHighlight={optionHighlight}\n                sectionStyles={sectionStyles}\n                headingStyles={headingStyles}\n                listGap={listGap}\n                stateRef={listStateRef}\n                shape=\"popover\"\n                emptyLabel={emptyLabel}\n                onSelectionChange={onSelectionChange}\n              >\n                {children as any}\n              </ListBox>\n            </ListBoxPopoverElement>\n          </ListBoxPopoverWrapper>\n        );\n      }}\n    </DisplayTransition>\n  );\n\n  return <Portal>{overlayContent}</Portal>;\n};\n"],"mappings":"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"}

package/dist/components/fields/ListBoxPopover/listNavigation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 //#region src/components/fields/ListBoxPopover/listNavigation.ts
 /**
 * Walks a collection (possibly nested under sections) and collects the keys of

package/dist/components/fields/ListBoxPopover/useCompositeFocus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.194.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.196.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef } from "react";

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

@@ -1,7 +1,6 @@
 
 import { FieldBaseProps, TextFieldKeyboardProps } from "../../../shared/form.js";
 import { CubeTextInputBaseProps } from "../TextInput/TextInputBase.js";
-import "../TextInput/index.js";
 import * as react from "react";
 import { AriaNumberFieldProps as AriaNumberFieldProps$1 } from "react-aria";
 import { TextInputDOMEvents } from "@react-types/shared";
@@ -11,6 +10,12 @@ interface CubeNumberInputProps extends Omit<CubeTextInputBaseProps, 'defaultValu
   field?: FieldBaseProps<number | null | undefined>['field'];
   /** Whether or to hide stepper */
   hideStepper?: boolean;
+  /**
+   * Whether the suffix goes before or after the stepper buttons. Defaults to
+   * `before`, so a unit sits next to the number. The validation and loading
+   * icons always come before both.
+   */
+  suffixPosition?: 'before' | 'after';
 }
 /**
  * NumberFields allow users to enter a number and increment or decrement the value using stepper buttons.