@cube-dev/ui-kit 0.0.0-canary-bada6bd → 0.0.0-canary-09a7efe

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bada6bd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-09a7efe | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
 import { Portal } from "../../portal/Portal.js";
@@ -61,21 +61,23 @@ const ListBoxPopoverElement = tasty({
 	}
 });
 const ListBoxPopover = function ListBoxPopover(props) {
-	const $ = c(62);
+	const $ = c(66);
 	const { t } = useI18n();
-	const { isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, containerPadding, comboBoxWidth, listBoxId, overlayStyles, listBoxStyles, optionStyles, optionHighlight, sectionStyles, headingStyles, selectedKey, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, compositeFocusProps, filter, size: t0, emptyLabel, positionTargetRef, positionApiRef } = props;
+	const { isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, containerPadding, comboBoxWidth, listBoxId, overlayStyles, listBoxStyles, optionStyles, optionHighlight, sectionStyles, headingStyles, selectedKey, selectionMode: t0, selectedKeys, isCheckable, shouldCloseOnTriggerInteraction: t1, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, compositeFocusProps, filter, size: t2, emptyLabel, positionTargetRef, positionApiRef } = props;
+	const selectionMode = t0 === void 0 ? "single" : t0;
+	const shouldCloseOnTriggerInteraction = t1 === void 0 ? true : t1;
 	const mergedPopoverRef = popoverRef;
 	const overlayScrollRef = useRef(null);
-	const t1 = positionTargetRef ?? triggerRef;
-	const t2 = mergedPopoverRef;
-	const t3 = `${direction} start`;
-	let t4;
-	if ($[0] !== containerPadding || $[1] !== isOpen || $[2] !== overlayOffset || $[3] !== shouldFlip || $[4] !== t1 || $[5] !== t2 || $[6] !== t3) {
-		t4 = {
-			targetRef: t1,
-			overlayRef: t2,
+	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: t3,
+			placement: t5,
 			shouldFlip,
 			isOpen,
 			offset: overlayOffset,
@@ -85,25 +87,25 @@ const ListBoxPopover = function ListBoxPopover(props) {
 		$[1] = isOpen;
 		$[2] = overlayOffset;
 		$[3] = shouldFlip;
-		$[4] = t1;
-		$[5] = t2;
-		$[6] = t3;
-		$[7] = t4;
-	} else t4 = $[7];
-	const { overlayProps: overlayPositionProps, placement, updatePosition } = useOverlayPosition(t4);
-	let t5;
+		$[4] = t3;
+		$[5] = t4;
+		$[6] = t5;
+		$[7] = t6;
+	} else t6 = $[7];
+	const { overlayProps: overlayPositionProps, placement, updatePosition } = useOverlayPosition(t6);
+	let t7;
 	if ($[8] !== overlayPositionProps.style) {
-		t5 = overlayPositionProps.style ?? {};
+		t7 = overlayPositionProps.style ?? {};
 		$[8] = overlayPositionProps.style;
-		$[9] = t5;
-	} else t5 = $[9];
-	const t6 = t5;
+		$[9] = t7;
+	} else t7 = $[9];
+	const t8 = t7;
 	let maxHeight;
 	let maxWidth;
 	let positionStyle;
-	if ($[10] !== t6) {
-		({maxHeight, maxWidth, ...positionStyle} = t6);
-		$[10] = t6;
+	if ($[10] !== t8) {
+		({maxHeight, maxWidth, ...positionStyle} = t8);
+		$[10] = t8;
 		$[11] = maxHeight;
 		$[12] = maxWidth;
 		$[13] = positionStyle;
@@ -112,30 +114,31 @@ const ListBoxPopover = function ListBoxPopover(props) {
 		maxWidth = $[12];
 		positionStyle = $[13];
 	}
-	let t7;
-	let t8;
+	let t10;
+	let t9;
 	if ($[14] !== positionApiRef || $[15] !== updatePosition) {
-		t7 = () => {
+		t9 = () => {
 			if (positionApiRef) positionApiRef.current = { updatePosition };
 			return () => {
 				if (positionApiRef) positionApiRef.current = null;
 			};
 		};
-		t8 = [positionApiRef, updatePosition];
+		t10 = [positionApiRef, updatePosition];
 		$[14] = positionApiRef;
 		$[15] = updatePosition;
-		$[16] = t7;
-		$[17] = t8;
+		$[16] = t10;
+		$[17] = t9;
 	} else {
-		t7 = $[16];
-		t8 = $[17];
+		t10 = $[16];
+		t9 = $[17];
 	}
-	useEffect(t7, t8);
-	let t9;
-	if ($[18] !== onClose || $[19] !== triggerRef) {
-		t9 = (el) => {
+	useEffect(t9, t10);
+	let t11;
+	if ($[18] !== onClose || $[19] !== shouldCloseOnTriggerInteraction || $[20] !== triggerRef) {
+		t11 = (el) => {
 			const menuTriggerEl = el.closest("[data-popover-trigger]");
 			if (!menuTriggerEl) {
+				if (!shouldCloseOnTriggerInteraction && triggerRef?.current?.contains(el)) return false;
 				if (el.closest("[data-popover-keep]")) return false;
 				if (el.closest("[data-popover-dismiss]")) {
 					setTimeout(onClose, 0);
@@ -147,46 +150,47 @@ const ListBoxPopover = function ListBoxPopover(props) {
 			return false;
 		};
 		$[18] = onClose;
-		$[19] = triggerRef;
-		$[20] = t9;
-	} else t9 = $[20];
-	let t10;
-	if ($[21] !== isOpen || $[22] !== onClose || $[23] !== t9) {
-		t10 = {
+		$[19] = shouldCloseOnTriggerInteraction;
+		$[20] = triggerRef;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== isOpen || $[23] !== onClose || $[24] !== t11) {
+		t12 = {
 			onClose,
 			shouldCloseOnBlur: true,
 			isOpen,
 			isDismissable: true,
-			shouldCloseOnInteractOutside: t9
+			shouldCloseOnInteractOutside: t11
 		};
-		$[21] = isOpen;
-		$[22] = onClose;
-		$[23] = t9;
-		$[24] = t10;
-	} else t10 = $[24];
-	const { overlayProps: overlayBehaviorProps } = useOverlay(t10, mergedPopoverRef);
-	let t11;
-	if ($[25] !== direction || $[26] !== placement) {
-		t11 = placement?.split(" ")[0] || direction;
-		$[25] = direction;
-		$[26] = placement;
-		$[27] = t11;
-	} else t11 = $[27];
-	const placementDirection = t11;
+		$[22] = isOpen;
+		$[23] = onClose;
+		$[24] = t11;
+		$[25] = t12;
+	} else t12 = $[25];
+	const { overlayProps: overlayBehaviorProps } = useOverlay(t12, mergedPopoverRef);
+	let t13;
+	if ($[26] !== direction || $[27] !== placement) {
+		t13 = placement?.split(" ")[0] || direction;
+		$[26] = direction;
+		$[27] = placement;
+		$[28] = t13;
+	} else t13 = $[28];
+	const placementDirection = t13;
 	const transitionRefHolder = useRef(null);
-	let t12;
-	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = (node) => {
+	let t14;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = (node) => {
 			overlayScrollRef.current = node;
 			transitionRefHolder.current?.(node);
 		};
-		$[28] = t12;
-	} else t12 = $[28];
-	const setScrollRef = t12;
-	let t13;
-	if ($[29] !== ariaLabel || $[30] !== children || $[31] !== comboBoxWidth || $[32] !== compositeFocusProps || $[33] !== disabledKeys || $[34] !== emptyLabel || $[35] !== filter || $[36] !== headingStyles || $[37] !== isDisabled || $[38] !== items || $[39] !== label || $[40] !== listBoxId || $[41] !== listBoxRef || $[42] !== listBoxStyles || $[43] !== listStateRef || $[44] !== maxHeight || $[45] !== maxWidth || $[46] !== mergedPopoverRef || $[47] !== onSelectionChange || $[48] !== optionHighlight || $[49] !== optionStyles || $[50] !== overlayBehaviorProps || $[51] !== overlayPositionProps || $[52] !== overlayStyles || $[53] !== placementDirection || $[54] !== positionStyle || $[55] !== sectionStyles || $[56] !== selectedKey || $[57] !== t) {
-		t13 = (t14) => {
-			const { phase, isShown, ref: transitionRef } = t14;
+		$[29] = t14;
+	} else t14 = $[29];
+	const setScrollRef = t14;
+	let t15;
+	if ($[30] !== ariaLabel || $[31] !== children || $[32] !== comboBoxWidth || $[33] !== compositeFocusProps || $[34] !== disabledKeys || $[35] !== emptyLabel || $[36] !== filter || $[37] !== headingStyles || $[38] !== isCheckable || $[39] !== isDisabled || $[40] !== items || $[41] !== label || $[42] !== listBoxId || $[43] !== listBoxRef || $[44] !== listBoxStyles || $[45] !== listStateRef || $[46] !== maxHeight || $[47] !== maxWidth || $[48] !== mergedPopoverRef || $[49] !== onSelectionChange || $[50] !== optionHighlight || $[51] !== optionStyles || $[52] !== overlayBehaviorProps || $[53] !== overlayPositionProps || $[54] !== overlayStyles || $[55] !== placementDirection || $[56] !== positionStyle || $[57] !== sectionStyles || $[58] !== selectedKey || $[59] !== selectedKeys || $[60] !== selectionMode || $[61] !== t) {
+		t15 = (t16) => {
+			const { phase, isShown, ref: transitionRef } = t16;
 			transitionRefHolder.current = transitionRef;
 			return /* @__PURE__ */ jsx(ListBoxPopoverWrapper, {
 				...mergeProps$1({
@@ -214,7 +218,10 @@ const ListBoxPopover = function ListBoxPopover(props) {
 						disableSelectionToggle: true,
 						id: listBoxId,
 						"aria-label": ariaLabel || (typeof label === "string" ? label : t("listBoxPopover.options", "Options")),
-						selectedKey,
+						selectionMode: selectionMode === "multiple" ? "multiple" : void 0,
+						selectedKey: selectionMode === "single" ? selectedKey : void 0,
+						selectedKeys: selectionMode === "multiple" ? selectedKeys : void 0,
+						isCheckable: selectionMode === "multiple" ? isCheckable : void 0,
 						isDisabled,
 						disabledKeys,
 						shouldUseVirtualFocus: true,
@@ -234,48 +241,51 @@ const ListBoxPopover = function ListBoxPopover(props) {
 				})
 			});
 		};
-		$[29] = ariaLabel;
-		$[30] = children;
-		$[31] = comboBoxWidth;
-		$[32] = compositeFocusProps;
-		$[33] = disabledKeys;
-		$[34] = emptyLabel;
-		$[35] = filter;
-		$[36] = headingStyles;
-		$[37] = isDisabled;
-		$[38] = items;
-		$[39] = label;
-		$[40] = listBoxId;
-		$[41] = listBoxRef;
-		$[42] = listBoxStyles;
-		$[43] = listStateRef;
-		$[44] = maxHeight;
-		$[45] = maxWidth;
-		$[46] = mergedPopoverRef;
-		$[47] = onSelectionChange;
-		$[48] = optionHighlight;
-		$[49] = optionStyles;
-		$[50] = overlayBehaviorProps;
-		$[51] = overlayPositionProps;
-		$[52] = overlayStyles;
-		$[53] = placementDirection;
-		$[54] = positionStyle;
-		$[55] = sectionStyles;
-		$[56] = selectedKey;
-		$[57] = t;
-		$[58] = t13;
-	} else t13 = $[58];
-	let t14;
-	if ($[59] !== isOpen || $[60] !== t13) {
-		t14 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DisplayTransition, {
+		$[30] = ariaLabel;
+		$[31] = children;
+		$[32] = comboBoxWidth;
+		$[33] = compositeFocusProps;
+		$[34] = disabledKeys;
+		$[35] = emptyLabel;
+		$[36] = filter;
+		$[37] = headingStyles;
+		$[38] = isCheckable;
+		$[39] = isDisabled;
+		$[40] = items;
+		$[41] = label;
+		$[42] = listBoxId;
+		$[43] = listBoxRef;
+		$[44] = listBoxStyles;
+		$[45] = listStateRef;
+		$[46] = maxHeight;
+		$[47] = maxWidth;
+		$[48] = mergedPopoverRef;
+		$[49] = onSelectionChange;
+		$[50] = optionHighlight;
+		$[51] = optionStyles;
+		$[52] = overlayBehaviorProps;
+		$[53] = overlayPositionProps;
+		$[54] = overlayStyles;
+		$[55] = placementDirection;
+		$[56] = positionStyle;
+		$[57] = sectionStyles;
+		$[58] = selectedKey;
+		$[59] = selectedKeys;
+		$[60] = selectionMode;
+		$[61] = t;
+		$[62] = t15;
+	} else t15 = $[62];
+	let t16;
+	if ($[63] !== isOpen || $[64] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DisplayTransition, {
 			isShown: isOpen,
-			children: t13
+			children: t15
 		}) });
-		$[59] = isOpen;
-		$[60] = t13;
-		$[61] = t14;
-	} else t14 = $[61];
-	return t14;
+		$[63] = isOpen;
+		$[64] = t15;
+		$[65] = t16;
+	} else t16 = $[65];
+	return t16;
 };
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ListBoxPopover.js","names":["Key","Styles","tasty","React","CSSProperties","ReactNode","RefObject","useCallback","useEffect","useRef","useOverlay","useOverlayPosition","useI18n","mergeProps","DisplayTransition","Portal","ListBox","ListBoxPopoverProps","isOpen","triggerRef","HTMLElement","popoverRef","HTMLDivElement","listBoxRef","direction","shouldFlip","overlayOffset","containerPadding","comboBoxWidth","listBoxId","overlayStyles","listBoxStyles","optionStyles","optionHighlight","sectionStyles","headingStyles","selectedKey","isDisabled","disabledKeys","Iterable","items","children","listStateRef","onSelectionChange","selection","onClose","label","ariaLabel","compositeFocusProps","onFocus","e","FocusEvent","onBlur","filter","nodes","size","emptyLabel","positionTargetRef","Element","positionApiRef","updatePosition","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","undefined","mergedPopoverRef","overlayScrollRef","t1","t2","t3","t4","targetRef","overlayRef","scrollRef","placement","offset","overlayProps","overlayPositionProps","t5","style","t6","maxHeight","maxWidth","positionStyle","t7","t8","current","t9","el","menuTriggerEl","closest","setTimeout","t10","shouldCloseOnBlur","isDismissable","shouldCloseOnInteractOutside","overlayBehaviorProps","t11","split","placementDirection","transitionRefHolder","t12","Symbol","for","node","setScrollRef","t13","t14","phase","isShown","ref","transitionRef","open","overlayContent"],"sources":["../../../../src/components/fields/ListBoxPopover/ListBoxPopover.tsx"],"sourcesContent":["import { 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 { useOverlay, useOverlayPosition } from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { mergeProps } from '../../../utils/react';\nimport { DisplayTransition } from '../../helpers';\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  selectedKey?: Key | null;\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  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\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    selectedKey,\n    isDisabled,\n    disabledKeys,\n    items,\n    children,\n    listStateRef,\n    onSelectionChange,\n    onClose,\n    label,\n    ariaLabel,\n    compositeFocusProps,\n    filter,\n    size = 'medium',\n    emptyLabel,\n    positionTargetRef,\n    positionApiRef,\n  } = props;\n\n  const mergedPopoverRef = popoverRef;\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  // 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 menuTriggerEl = el.closest('[data-popover-trigger]');\n        if (!menuTriggerEl) {\n          if (el.closest('[data-popover-keep]')) return false;\n          // Plain interactive controls (Button, ItemButton) opt in via\n          // `data-popover-dismiss` to dismiss us without losing their click\n          // to useOverlay's stopPropagation. Schedule the close after the\n          // click finishes so the button's onPress runs first.\n          if (el.closest('[data-popover-dismiss]')) {\n            setTimeout(onClose, 0);\n            return false;\n          }\n          return true;\n        }\n        if (menuTriggerEl === triggerRef?.current) return true;\n        return false;\n      },\n    },\n    mergedPopoverRef as any,\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, ref: transitionRef }) => {\n        transitionRefHolder.current = transitionRef;\n        return (\n          <ListBoxPopoverWrapper\n            {...mergeProps(\n              { ...overlayPositionProps, style: positionStyle },\n              overlayBehaviorProps,\n              compositeFocusProps,\n            )}\n            ref={mergedPopoverRef}\n            style={positionStyle}\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                    : t('listBoxPopover.options', 'Options'))\n                }\n                selectedKey={selectedKey}\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                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":";;;;;;;;;;;;;AA0EA,MAAM6D,wBAAwB3D,MAAM;CAClC4D,IAAI;CACJC,QAAQ;EACNC,UAAU;EACVC,QAAQ;EACV;CACD,CAAC;AAEF,MAAMC,wBAAwBhE,MAAM;CAClC4D,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,MAAc9E,SAAS;CACvB,MAAA,EAAAM,QAAAC,YAAAE,YAAAE,YAAAC,WAAAC,YAAAC,eAAAC,kBAAAC,eAAAC,WAAAC,eAAAC,eAAAC,cAAAC,iBAAAC,eAAAC,eAAAC,aAAAC,YAAAC,cAAAE,OAAAC,UAAAC,cAAAC,mBAAAE,SAAAC,OAAAC,WAAAC,qBAAAK,QAAAE,MAAAoC,IAAAnC,YAAAC,mBAAAE,mBAiCI4B;CAEJ,MAAAM,mBAAyBxE;CAMzB,MAAAyE,mBAAyBrF,OAA8B,KAAK;CAU/C,MAAAsF,KAACtC,qBAAAtC;CACA,MAAA6E,KAAAH;CAED,MAAAI,KAAA,GAAGzE,UAAS;CAAe,IAAA0E;AAAA,KAAAV,EAAA,OAAA7D,oBAAA6D,EAAA,OAAAtE,UAAAsE,EAAA,OAAA9D,iBAAA8D,EAAA,OAAA/D,cAAA+D,EAAA,OAAAO,MAAAP,EAAA,OAAAQ,MAAAR,EAAA,OAAAS,IAAA;AAJjBC,OAAA;GAAAC,WACVJ;GAAwCK,YACvCJ;GAAuBK,WACxBP;GAAuBQ,WACvBL;GAA2BxE;GAAAP;GAAAqF,QAG9B7E;GAAaC;GAEtB;AAAA6D,IAAA,KAAA7D;AAAA6D,IAAA,KAAAtE;AAAAsE,IAAA,KAAA9D;AAAA8D,IAAA,KAAA/D;AAAA+D,IAAA,KAAAO;AAAAP,IAAA,KAAAQ;AAAAR,IAAA,KAAAS;AAAAT,IAAA,KAAAU;OAAAA,MAAAV,EAAA;CAbD,MAAA,EAAAgB,cAAAC,sBAAAH,WAAA1C,mBAIIjD,mBAAmBuF,GASrB;CAAC,IAAAQ;AAAA,KAAAlB,EAAA,OAAAiB,qBAAAE,OAAA;AAKAD,OAAAD,qBAAoBE,SAApB,EAAgC;AAAAnB,IAAA,KAAAiB,qBAAAE;AAAAnB,IAAA,KAAAkB;OAAAA,MAAAlB,EAAA;CAAjC,MAAAoB,KAACF;CAAkD,IAAAG;CAAA,IAAAC;CAAA,IAAAC;AAAA,KAAAvB,EAAA,QAAAoB,IAAA;AADrD,GAAA,CAAAC,WAAAC,aAAAC,iBACEH;AAAoDpB,IAAA,MAAAoB;AAAApB,IAAA,MAAAqB;AAAArB,IAAA,MAAAsB;AAAAtB,IAAA,MAAAuB;QAAA;AAAAF,cAAArB,EAAA;AAAAsB,aAAAtB,EAAA;AAAAuB,kBAAAvB,EAAA;;CAAA,IAAAwB;CAAA,IAAAC;AAAA,KAAAzB,EAAA,QAAA7B,kBAAA6B,EAAA,QAAA5B,gBAAA;AAG5CoD,aAAA;AACR,OAAIrD,eACFA,gBAAcuD,UAAW,EAAAtD,gBAAH;AACvB,gBACM;AACL,QAAID,eACFA,gBAAcuD,UAAW;;;AAG5BD,OAAA,CAACtD,gBAAgBC,eAAe;AAAA4B,IAAA,MAAA7B;AAAA6B,IAAA,MAAA5B;AAAA4B,IAAA,MAAAwB;AAAAxB,IAAA,MAAAyB;QAAA;AAAAD,OAAAxB,EAAA;AAAAyB,OAAAzB,EAAA;;AATnChF,WAAUwG,IASPC,GAAiC;CAAA,IAAAE;AAAA,KAAA3B,EAAA,QAAA3C,WAAA2C,EAAA,QAAArE,YAAA;AASFgG,QAAAC,OAAA;GAC5B,MAAAC,gBAAsBD,GAAEE,QAAS,yBAAyB;AAC1D,OAAI,CAACD,eAAa;AAChB,QAAID,GAAEE,QAAS,sBAAsB,CAAA,QAAS;AAK9C,QAAIF,GAAEE,QAAS,yBAAyB,EAAA;AACtCC,gBAAW1E,SAAS,EAAE;AAAA,YACf;;AACR,WACM;;AAET,OAAIwE,kBAAkBlG,YAAU+F,QAAS,QAAS;AAAK,UAChD;;AACR1B,IAAA,MAAA3C;AAAA2C,IAAA,MAAArE;AAAAqE,IAAA,MAAA2B;OAAAA,MAAA3B,EAAA;CAAA,IAAAgC;AAAA,KAAAhC,EAAA,QAAAtE,UAAAsE,EAAA,QAAA3C,WAAA2C,EAAA,QAAA2B,IAAA;AArBHK,QAAA;GAAA3E;GAAA4E,mBAEqB;GAAIvG;GAAAwG,eAER;GAAIC,8BACWR;GAiB/B;AAAA3B,IAAA,MAAAtE;AAAAsE,IAAA,MAAA3C;AAAA2C,IAAA,MAAA2B;AAAA3B,IAAA,MAAAgC;OAAAA,OAAAhC,EAAA;CAvBH,MAAA,EAAAgB,cAAAoB,yBAA+ClH,WAC7C8G,KAuBA3B,iBACD;CAAC,IAAAgC;AAAA,KAAArC,EAAA,QAAAhE,aAAAgE,EAAA,QAAAc,WAAA;AAGyBuB,QAAAvB,WAASwB,MAAQ,IAAO,CAAA,MAAxBtG;AAAqCgE,IAAA,MAAAhE;AAAAgE,IAAA,MAAAc;AAAAd,IAAA,MAAAqC;OAAAA,OAAArC,EAAA;CAAhE,MAAAuC,qBAA2BF;CAI3B,MAAAG,sBAA4BvH,OAE1B,KAAK;CAAC,IAAAwH;AAAA,KAAAzC,EAAA,QAAA0C,OAAAC,IAAA,4BAAA,EAAA;AACyBF,SAAAG,SAAA;AAC/BtC,oBAAgBoB,UAAWkB;AAC3BJ,uBAAmBd,UAAWkB,KAAK;;AACpC5C,IAAA,MAAAyC;OAAAA,OAAAzC,EAAA;CAHD,MAAA6C,eAAqBJ;CAGd,IAAAK;AAAA,KAAA9C,EAAA,QAAAzC,aAAAyC,EAAA,QAAA/C,YAAA+C,EAAA,QAAA5D,iBAAA4D,EAAA,QAAAxC,uBAAAwC,EAAA,QAAAlD,gBAAAkD,EAAA,QAAAhC,cAAAgC,EAAA,QAAAnC,UAAAmC,EAAA,QAAArD,iBAAAqD,EAAA,QAAAnD,cAAAmD,EAAA,QAAAhD,SAAAgD,EAAA,QAAA1C,SAAA0C,EAAA,QAAA3D,aAAA2D,EAAA,QAAAjE,cAAAiE,EAAA,QAAAzD,iBAAAyD,EAAA,QAAA9C,gBAAA8C,EAAA,QAAAqB,aAAArB,EAAA,QAAAsB,YAAAtB,EAAA,QAAAK,oBAAAL,EAAA,QAAA7C,qBAAA6C,EAAA,QAAAvD,mBAAAuD,EAAA,QAAAxD,gBAAAwD,EAAA,QAAAoC,wBAAApC,EAAA,QAAAiB,wBAAAjB,EAAA,QAAA1D,iBAAA0D,EAAA,QAAAuC,sBAAAvC,EAAA,QAAAuB,iBAAAvB,EAAA,QAAAtD,iBAAAsD,EAAA,QAAApD,eAAAoD,EAAA,QAAAE,GAAA;AAIF4C,SAAAC,QAAA;GAAC,MAAA,EAAAC,OAAAC,SAAAC,KAAAC,kBAAAJ;AACAP,uBAAmBd,UAAWyB;AAAH,UAEzB,oBAAC;IAAqB,GAChB9H,aACF;KAAA,GAAK4F;KAAoBE,OAASI;KAAe,EACjDa,sBACA5E,oBACD;IACI6C,KAAAA;IACEkB,OAAAA;cAEP,oBAAC;KACMsB,KAAAA;KACWN,kBAAAA;KACJS,cAAAA;KACN,MAAA;MAAAI,MACEH;MAAO1D,QACLyD,UAAU;MACpB;KACQ1G,QAAAA;KACD,OAAA;MAAA,uBACkBF,gBAAA,GAChBA,cAAa,MADGgE;MAEViB;MAAAC;MAGf;eAEA,oBAAC;MACMvF,KAAAA;MACL,wBAAA;MACIM,IAAAA;MAEF,cAAAkB,cACC,OAAOD,UAAU,WAAjBA,QAEG4C,EAAE,0BAA0B,UAAW;MAEhCtD;MACDC;MACEC;MACS,uBAAA;MAChBE;MACCa;MACAtB,QAAAA;MACMC;MACGC;MACFC;MACAC;MACLO,UAAAA;MACJ,OAAA;MACMc;MACOb;MAElBF;OAEL;MACF;KAAwB;;AAE3B+C,IAAA,MAAAzC;AAAAyC,IAAA,MAAA/C;AAAA+C,IAAA,MAAA5D;AAAA4D,IAAA,MAAAxC;AAAAwC,IAAA,MAAAlD;AAAAkD,IAAA,MAAAhC;AAAAgC,IAAA,MAAAnC;AAAAmC,IAAA,MAAArD;AAAAqD,IAAA,MAAAnD;AAAAmD,IAAA,MAAAhD;AAAAgD,IAAA,MAAA1C;AAAA0C,IAAA,MAAA3D;AAAA2D,IAAA,MAAAjE;AAAAiE,IAAA,MAAAzD;AAAAyD,IAAA,MAAA9C;AAAA8C,IAAA,MAAAqB;AAAArB,IAAA,MAAAsB;AAAAtB,IAAA,MAAAK;AAAAL,IAAA,MAAA7C;AAAA6C,IAAA,MAAAvD;AAAAuD,IAAA,MAAAxD;AAAAwD,IAAA,MAAAoC;AAAApC,IAAA,MAAAiB;AAAAjB,IAAA,MAAA1D;AAAA0D,IAAA,MAAAuC;AAAAvC,IAAA,MAAAuB;AAAAvB,IAAA,MAAAtD;AAAAsD,IAAA,MAAApD;AAAAoD,IAAA,MAAAE;AAAAF,IAAA,MAAA8C;OAAAA,OAAA9C,EAAA;CAAA,IAAA+C;AAAA,KAAA/C,EAAA,QAAAtE,UAAAsE,EAAA,QAAA8C,KAAA;AAIEC,QAAA,oBAAC,oBAjEN,oBAAC;GAA2BrH,SAAAA;aACzBoH;IA6DiB,GAGkB;AAAA9C,IAAA,MAAAtE;AAAAsE,IAAA,MAAA8C;AAAA9C,IAAA,MAAA+C;OAAAA,OAAA/C,EAAA;AAAA,QAAjC+C"}
+{"version":3,"file":"ListBoxPopover.js","names":["Key","Styles","tasty","React","CSSProperties","ReactNode","RefObject","useCallback","useEffect","useRef","useOverlay","useOverlayPosition","useI18n","mergeProps","DisplayTransition","Portal","ListBox","ListBoxPopoverProps","isOpen","triggerRef","HTMLElement","popoverRef","HTMLDivElement","listBoxRef","direction","shouldFlip","overlayOffset","containerPadding","comboBoxWidth","listBoxId","overlayStyles","listBoxStyles","optionStyles","optionHighlight","sectionStyles","headingStyles","selectedKey","selectionMode","selectedKeys","isCheckable","shouldCloseOnTriggerInteraction","isDisabled","disabledKeys","Iterable","items","children","listStateRef","onSelectionChange","selection","onClose","label","ariaLabel","compositeFocusProps","onFocus","e","FocusEvent","onBlur","filter","nodes","size","emptyLabel","positionTargetRef","Element","positionApiRef","updatePosition","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","overlayScrollRef","t3","t4","t5","t6","targetRef","overlayRef","scrollRef","placement","offset","overlayProps","overlayPositionProps","t7","style","t8","maxHeight","maxWidth","positionStyle","t10","t9","current","t11","el","menuTriggerEl","closest","contains","setTimeout","t12","shouldCloseOnBlur","isDismissable","shouldCloseOnInteractOutside","overlayBehaviorProps","t13","split","placementDirection","transitionRefHolder","t14","Symbol","for","node","setScrollRef","t15","t16","phase","isShown","ref","transitionRef","open","overlayContent"],"sources":["../../../../src/components/fields/ListBoxPopover/ListBoxPopover.tsx"],"sourcesContent":["import { 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 { useOverlay, useOverlayPosition } from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { mergeProps } from '../../../utils/react';\nimport { DisplayTransition } from '../../helpers';\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  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  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\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    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    compositeFocusProps,\n    filter,\n    size = 'medium',\n    emptyLabel,\n    positionTargetRef,\n    positionApiRef,\n  } = props;\n\n  const mergedPopoverRef = popoverRef;\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  // 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 menuTriggerEl = el.closest('[data-popover-trigger]');\n        if (!menuTriggerEl) {\n          if (\n            !shouldCloseOnTriggerInteraction &&\n            triggerRef?.current?.contains(el)\n          ) {\n            return false;\n          }\n          if (el.closest('[data-popover-keep]')) return false;\n          // Plain interactive controls (Button, ItemButton) opt in via\n          // `data-popover-dismiss` to dismiss us without losing their click\n          // to useOverlay's stopPropagation. Schedule the close after the\n          // click finishes so the button's onPress runs first.\n          if (el.closest('[data-popover-dismiss]')) {\n            setTimeout(onClose, 0);\n            return false;\n          }\n          return true;\n        }\n        if (menuTriggerEl === triggerRef?.current) return true;\n        return false;\n      },\n    },\n    mergedPopoverRef as any,\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, ref: transitionRef }) => {\n        transitionRefHolder.current = transitionRef;\n        return (\n          <ListBoxPopoverWrapper\n            {...mergeProps(\n              { ...overlayPositionProps, style: positionStyle },\n              overlayBehaviorProps,\n              compositeFocusProps,\n            )}\n            ref={mergedPopoverRef}\n            style={positionStyle}\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                    : t('listBoxPopover.options', 'Options'))\n                }\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                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.0.0-canary-bada6bd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-09a7efe | 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.0.0-canary-bada6bd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-09a7efe | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { useEffect, useRef } from "react";
 
@@ -10,19 +10,30 @@ import { useEffect, useRef } from "react";
 * that clicking an option does not look like a blur of the whole component.
 *
 * Focus checks are deferred to the next animation frame to tolerate the
-* synchronous focus shuffles React Aria and portals perform on selection.
+* synchronous focus shuffles React Aria and portals perform on selection. Focus
+* that enters and leaves again within that frame still reports both edges, so a
+* fast focus-type-blur sequence (an automated test, a quick Tab through) does
+* not skip the blur.
 */
 function useCompositeFocus(t0) {
-	const $ = c(12);
+	const $ = c(15);
 	const { wrapperRef, popoverRef, onFocus, onBlur, isDisabled } = t0;
 	const wasInsideRef = useRef(false);
+	const enteredRef = useRef(false);
 	const rafRef = useRef(null);
 	let t1;
 	if ($[0] !== isDisabled || $[1] !== onBlur || $[2] !== onFocus || $[3] !== popoverRef || $[4] !== wrapperRef) {
 		t1 = () => {
+			const entered = enteredRef.current;
+			enteredRef.current = false;
 			if (isDisabled) return;
 			const activeElement = document.activeElement;
 			const isInside = (wrapperRef.current?.contains(activeElement) ?? false) || (popoverRef.current?.contains(activeElement) ?? false);
+			if (!isInside && !wasInsideRef.current && entered) {
+				onFocus?.();
+				onBlur?.();
+				return;
+			}
 			if (isInside !== wasInsideRef.current) {
 				wasInsideRef.current = isInside;
 				if (isInside) onFocus?.();
@@ -39,7 +50,7 @@ function useCompositeFocus(t0) {
 	const checkFocus = t1;
 	let t2;
 	if ($[6] !== checkFocus) {
-		t2 = (e) => {
+		t2 = () => {
 			if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
 			rafRef.current = requestAnimationFrame(() => {
 				rafRef.current = null;
@@ -49,31 +60,42 @@ function useCompositeFocus(t0) {
 		$[6] = checkFocus;
 		$[7] = t2;
 	} else t2 = $[7];
-	const handleFocusOrBlur = t2;
+	const scheduleCheck = t2;
 	let t3;
+	if ($[8] !== scheduleCheck) {
+		t3 = () => {
+			enteredRef.current = true;
+			scheduleCheck();
+		};
+		$[8] = scheduleCheck;
+		$[9] = t3;
+	} else t3 = $[9];
+	const handleFocus = t3;
 	let t4;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = () => () => {
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => () => {
 			if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
 		};
-		t4 = [];
-		$[8] = t3;
-		$[9] = t4;
+		t5 = [];
+		$[10] = t4;
+		$[11] = t5;
 	} else {
-		t3 = $[8];
-		t4 = $[9];
+		t4 = $[10];
+		t5 = $[11];
 	}
-	useEffect(t3, t4);
-	let t5;
-	if ($[10] !== handleFocusOrBlur) {
-		t5 = { compositeFocusProps: {
-			onFocus: handleFocusOrBlur,
-			onBlur: handleFocusOrBlur
+	useEffect(t4, t5);
+	let t6;
+	if ($[12] !== handleFocus || $[13] !== scheduleCheck) {
+		t6 = { compositeFocusProps: {
+			onFocus: handleFocus,
+			onBlur: scheduleCheck
 		} };
-		$[10] = handleFocusOrBlur;
-		$[11] = t5;
-	} else t5 = $[11];
-	return t5;
+		$[12] = handleFocus;
+		$[13] = scheduleCheck;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
 }
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"useCompositeFocus.js","names":["React","RefObject","useCallback","useEffect","useRef","UseCompositeFocusProps","wrapperRef","HTMLElement","popoverRef","onFocus","onBlur","isDisabled","UseCompositeFocusReturn","compositeFocusProps","e","FocusEvent","useCompositeFocus","t0","$","_c","wasInsideRef","rafRef","t1","activeElement","document","isInside","current","contains","checkFocus","t2","cancelAnimationFrame","requestAnimationFrame","handleFocusOrBlur","t3","t4","Symbol","for","t5"],"sources":["../../../../src/components/fields/ListBoxPopover/useCompositeFocus.ts"],"sourcesContent":["import React, { RefObject, useCallback, useEffect, useRef } from 'react';\n\nexport interface UseCompositeFocusProps {\n  wrapperRef: RefObject<HTMLElement>;\n  popoverRef: RefObject<HTMLElement>;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  isDisabled?: boolean;\n}\n\nexport interface UseCompositeFocusReturn {\n  compositeFocusProps: {\n    onFocus: (e: React.FocusEvent) => void;\n    onBlur: (e: React.FocusEvent) => void;\n  };\n}\n\n/**\n * Tracks focus across a wrapper element and its (portaled) popover as a single\n * logical focus scope. Fires `onFocus` when focus enters either and `onBlur`\n * when it leaves both — essential for components whose overlay is portaled, so\n * that clicking an option does not look like a blur of the whole component.\n *\n * Focus checks are deferred to the next animation frame to tolerate the\n * synchronous focus shuffles React Aria and portals perform on selection.\n */\nexport function useCompositeFocus({\n  wrapperRef,\n  popoverRef,\n  onFocus,\n  onBlur,\n  isDisabled,\n}: UseCompositeFocusProps): UseCompositeFocusReturn {\n  const wasInsideRef = useRef(false);\n  const rafRef = useRef<number | null>(null);\n\n  const checkFocus = useCallback(() => {\n    if (isDisabled) return;\n\n    const activeElement = document.activeElement;\n    const isInside =\n      (wrapperRef.current?.contains(activeElement) ?? false) ||\n      (popoverRef.current?.contains(activeElement) ?? false);\n\n    if (isInside !== wasInsideRef.current) {\n      wasInsideRef.current = isInside;\n      if (isInside) {\n        onFocus?.();\n      } else {\n        onBlur?.();\n      }\n    }\n  }, [wrapperRef, popoverRef, onFocus, onBlur, isDisabled]);\n\n  const handleFocusOrBlur = useCallback(\n    (e: React.FocusEvent) => {\n      // Cancel any pending check\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n      }\n\n      // Schedule focus check for next frame\n      rafRef.current = requestAnimationFrame(() => {\n        rafRef.current = null;\n        checkFocus();\n      });\n    },\n    [checkFocus],\n  );\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n      }\n    };\n  }, []);\n\n  return {\n    compositeFocusProps: {\n      onFocus: handleFocusOrBlur,\n      onBlur: handleFocusOrBlur,\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;AA0BA,SAAOgB,kBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAA2B,MAAA,EAAAb,YAAAE,YAAAC,SAAAC,QAAAC,eAAAM;CAOhC,MAAAG,eAAqBhB,OAAO,MAAM;CAClC,MAAAiB,SAAejB,OAAsB,KAAK;CAAC,IAAAkB;AAAA,KAAAJ,EAAA,OAAAP,cAAAO,EAAA,OAAAR,UAAAQ,EAAA,OAAAT,WAAAS,EAAA,OAAAV,cAAAU,EAAA,OAAAZ,YAAA;AAEZgB,aAAA;AAC7B,OAAIX,WAAU;GAEd,MAAAY,gBAAsBC,SAAQD;GAC9B,MAAAE,YACGnB,WAAUoB,SAAkBC,SAACJ,cAAuB,IAApD,WACAf,WAAUkB,SAAkBC,SAACJ,cAAuB,IAApD;AAEH,OAAIE,aAAaL,aAAYM,SAAQ;AACnCN,iBAAYM,UAAWD;AACvB,QAAIA,SACFhB,YAAW;QAEXC,WAAU;;;AAGfQ,IAAA,KAAAP;AAAAO,IAAA,KAAAR;AAAAQ,IAAA,KAAAT;AAAAS,IAAA,KAAAV;AAAAU,IAAA,KAAAZ;AAAAY,IAAA,KAAAI;OAAAA,MAAAJ,EAAA;CAhBD,MAAAU,aAAmBN;CAgBuC,IAAAO;AAAA,KAAAX,EAAA,OAAAU,YAAA;AAGxDC,QAAAf,MAAA;AAEE,OAAIO,OAAMK,YAAa,KACrBI,sBAAqBT,OAAMK,QAAS;AAItCL,UAAMK,UAAWK,4BAAsB;AACrCV,WAAMK,UAAW;AACjBE,gBAAY;KAFA;;AAIfV,IAAA,KAAAU;AAAAV,IAAA,KAAAW;OAAAA,MAAAX,EAAA;CAZH,MAAAc,oBAA0BH;CAcxB,IAAAI;CAAA,IAAAC;AAAA,KAAAhB,EAAA,OAAAiB,OAAAC,IAAA,4BAAA,EAAA;AAGQH,mBACD;AACL,OAAIZ,OAAMK,YAAa,KACrBI,sBAAqBT,OAAMK,QAAS;;AAGvCQ,OAAA,EAAE;AAAAhB,IAAA,KAAAe;AAAAf,IAAA,KAAAgB;QAAA;AAAAD,OAAAf,EAAA;AAAAgB,OAAAhB,EAAA;;AANLf,WAAU8B,IAMPC,GAAG;CAAA,IAAAG;AAAA,KAAAnB,EAAA,QAAAc,mBAAA;AAECK,OAAA,EAAAxB,qBACgB;GAAAJ,SACVuB;GAAiBtB,QAClBsB;GACV,EACD;AAAAd,IAAA,MAAAc;AAAAd,IAAA,MAAAmB;OAAAA,MAAAnB,EAAA;AAAA,QALMmB"}
+{"version":3,"file":"useCompositeFocus.js","names":["React","RefObject","useCallback","useEffect","useRef","UseCompositeFocusProps","wrapperRef","HTMLElement","popoverRef","onFocus","onBlur","isDisabled","UseCompositeFocusReturn","compositeFocusProps","e","FocusEvent","useCompositeFocus","t0","$","_c","wasInsideRef","enteredRef","rafRef","t1","entered","current","activeElement","document","isInside","contains","checkFocus","t2","cancelAnimationFrame","requestAnimationFrame","scheduleCheck","t3","handleFocus","t4","t5","Symbol","for","t6"],"sources":["../../../../src/components/fields/ListBoxPopover/useCompositeFocus.ts"],"sourcesContent":["import React, { RefObject, useCallback, useEffect, useRef } from 'react';\n\nexport interface UseCompositeFocusProps {\n  wrapperRef: RefObject<HTMLElement>;\n  popoverRef: RefObject<HTMLElement>;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  isDisabled?: boolean;\n}\n\nexport interface UseCompositeFocusReturn {\n  compositeFocusProps: {\n    onFocus: (e: React.FocusEvent) => void;\n    onBlur: (e: React.FocusEvent) => void;\n  };\n}\n\n/**\n * Tracks focus across a wrapper element and its (portaled) popover as a single\n * logical focus scope. Fires `onFocus` when focus enters either and `onBlur`\n * when it leaves both — essential for components whose overlay is portaled, so\n * that clicking an option does not look like a blur of the whole component.\n *\n * Focus checks are deferred to the next animation frame to tolerate the\n * synchronous focus shuffles React Aria and portals perform on selection. Focus\n * that enters and leaves again within that frame still reports both edges, so a\n * fast focus-type-blur sequence (an automated test, a quick Tab through) does\n * not skip the blur.\n */\nexport function useCompositeFocus({\n  wrapperRef,\n  popoverRef,\n  onFocus,\n  onBlur,\n  isDisabled,\n}: UseCompositeFocusProps): UseCompositeFocusReturn {\n  const wasInsideRef = useRef(false);\n  const enteredRef = useRef(false);\n  const rafRef = useRef<number | null>(null);\n\n  const checkFocus = useCallback(() => {\n    const entered = enteredRef.current;\n\n    enteredRef.current = false;\n\n    if (isDisabled) return;\n\n    const activeElement = document.activeElement;\n    const isInside =\n      (wrapperRef.current?.contains(activeElement) ?? false) ||\n      (popoverRef.current?.contains(activeElement) ?? false);\n\n    if (!isInside && !wasInsideRef.current && entered) {\n      onFocus?.();\n      onBlur?.();\n\n      return;\n    }\n\n    if (isInside !== wasInsideRef.current) {\n      wasInsideRef.current = isInside;\n      if (isInside) {\n        onFocus?.();\n      } else {\n        onBlur?.();\n      }\n    }\n  }, [wrapperRef, popoverRef, onFocus, onBlur, isDisabled]);\n\n  const scheduleCheck = useCallback(() => {\n    // Cancel any pending check\n    if (rafRef.current !== null) {\n      cancelAnimationFrame(rafRef.current);\n    }\n\n    // Schedule focus check for next frame\n    rafRef.current = requestAnimationFrame(() => {\n      rafRef.current = null;\n      checkFocus();\n    });\n  }, [checkFocus]);\n\n  const handleFocus = useCallback(() => {\n    enteredRef.current = true;\n    scheduleCheck();\n  }, [scheduleCheck]);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n      }\n    };\n  }, []);\n\n  return {\n    compositeFocusProps: {\n      onFocus: handleFocus,\n      onBlur: scheduleCheck,\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,SAAOgB,kBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAA2B,MAAA,EAAAb,YAAAE,YAAAC,SAAAC,QAAAC,eAAAM;CAOhC,MAAAG,eAAqBhB,OAAO,MAAM;CAClC,MAAAiB,aAAmBjB,OAAO,MAAM;CAChC,MAAAkB,SAAelB,OAAsB,KAAK;CAAC,IAAAmB;AAAA,KAAAL,EAAA,OAAAP,cAAAO,EAAA,OAAAR,UAAAQ,EAAA,OAAAT,WAAAS,EAAA,OAAAV,cAAAU,EAAA,OAAAZ,YAAA;AAEZiB,aAAA;GAC7B,MAAAC,UAAgBH,WAAUI;AAE1BJ,cAAUI,UAAW;AAErB,OAAId,WAAU;GAEd,MAAAe,gBAAsBC,SAAQD;GAC9B,MAAAE,YACGtB,WAAUmB,SAAkBI,SAACH,cAAuB,IAApD,WACAlB,WAAUiB,SAAkBI,SAACH,cAAuB,IAApD;AAEH,OAAI,CAACE,YAAD,CAAcR,aAAYK,WAA1BD,SAA6C;AAC/Cf,eAAW;AACXC,cAAU;AAAA;;AAKZ,OAAIkB,aAAaR,aAAYK,SAAQ;AACnCL,iBAAYK,UAAWG;AACvB,QAAIA,SACFnB,YAAW;QAEXC,WAAU;;;AAGfQ,IAAA,KAAAP;AAAAO,IAAA,KAAAR;AAAAQ,IAAA,KAAAT;AAAAS,IAAA,KAAAV;AAAAU,IAAA,KAAAZ;AAAAY,IAAA,KAAAK;OAAAA,MAAAL,EAAA;CA3BD,MAAAY,aAAmBP;CA2BuC,IAAAQ;AAAA,KAAAb,EAAA,OAAAY,YAAA;AAExBC,aAAA;AAEhC,OAAIT,OAAMG,YAAa,KACrBO,sBAAqBV,OAAMG,QAAS;AAItCH,UAAMG,UAAWQ,4BAAsB;AACrCX,WAAMG,UAAW;AACjBK,gBAAY;KAFA;;AAIfZ,IAAA,KAAAY;AAAAZ,IAAA,KAAAa;OAAAA,MAAAb,EAAA;CAXD,MAAAgB,gBAAsBH;CAWL,IAAAI;AAAA,KAAAjB,EAAA,OAAAgB,eAAA;AAEeC,aAAA;AAC9Bd,cAAUI,UAAW;AACrBS,kBAAe;;AAChBhB,IAAA,KAAAgB;AAAAhB,IAAA,KAAAiB;OAAAA,MAAAjB,EAAA;CAHD,MAAAkB,cAAoBD;CAGA,IAAAE;CAAA,IAAAC;AAAA,KAAApB,EAAA,QAAAqB,OAAAC,IAAA,4BAAA,EAAA;AAGVH,mBACD;AACL,OAAIf,OAAMG,YAAa,KACrBO,sBAAqBV,OAAMG,QAAS;;AAGvCa,OAAA,EAAE;AAAApB,IAAA,MAAAmB;AAAAnB,IAAA,MAAAoB;QAAA;AAAAD,OAAAnB,EAAA;AAAAoB,OAAApB,EAAA;;AANLf,WAAUkC,IAMPC,GAAG;CAAA,IAAAG;AAAA,KAAAvB,EAAA,QAAAkB,eAAAlB,EAAA,QAAAgB,eAAA;AAECO,OAAA,EAAA5B,qBACgB;GAAAJ,SACV2B;GAAW1B,QACZwB;GACV,EACD;AAAAhB,IAAA,MAAAkB;AAAAlB,IAAA,MAAAgB;AAAAhB,IAAA,MAAAuB;OAAAA,MAAAvB,EAAA;AAAA,QALMuB"}

package/dist/components/fields/NumberInput/NumberInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bada6bd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-09a7efe | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { castNullableNumberValue } from "../../../utils/react/nullableValue.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/NumberInput/StepButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bada6bd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-09a7efe | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { Button } from "../../actions/index.js";

package/dist/components/fields/PasswordInput/PasswordInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bada6bd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-09a7efe | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";

package/dist/components/fields/Picker/Picker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bada6bd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-09a7efe | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/RadioGroup/Radio.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bada6bd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-09a7efe | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";

package/dist/components/fields/RadioGroup/RadioGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bada6bd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-09a7efe | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { castNullableStringValue } from "../../../utils/react/nullableValue.js";

package/dist/components/fields/RadioGroup/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bada6bd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-09a7efe | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/fields/RadioGroup/context.ts

package/dist/components/fields/SearchComboBox/SearchComboBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bada6bd | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-09a7efe | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
@@ -15,6 +15,7 @@ import { getValidationMods } from "../../form/validation/resolve-validation-prop
 import { useValidationProps } from "../../form/validation/use-validation-props.js";
 import { getValidationIcon } from "../../form/validation/ValidationIndicator.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { getListBoxOptionId } from "../ListBox/optionId.js";
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
 import { SearchIcon } from "../../../icons/SearchIcon.js";
 import { ListBoxPopover } from "../ListBoxPopover/ListBoxPopover.js";
@@ -96,7 +97,7 @@ const SearchComboBoxInput = forwardRef(function SearchComboBoxInput({ qa, inputR
 		"aria-expanded": isExpanded,
 		"aria-haspopup": "listbox",
 		"aria-controls": isExpanded ? `SearchComboBoxListBox-${searchComboBoxId}` : void 0,
-		"aria-activedescendant": isExpanded && listStateRef.current?.selectionManager.focusedKey != null ? `ListBoxItem-${listStateRef.current?.selectionManager.focusedKey}` : void 0
+		"aria-activedescendant": isExpanded && listStateRef.current?.selectionManager.focusedKey != null ? getListBoxOptionId(`SearchComboBoxListBox-${searchComboBoxId}`, listStateRef.current.selectionManager.focusedKey) : void 0
 	});
 });
 const SearchComboBox = forwardRef(function SearchComboBox(props, ref) {