@cube-dev/ui-kit 0.142.9 → 0.143.0

package/dist/components/content/Tree/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/content/Tree/styled.ts"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\n\nimport { Action } from '../../actions/Action/Action';\nimport { Item } from '../Item';\n\n/**\n * Tree root.\n *\n * Renders as `role=\"treegrid\"` (set on `gridProps` from `useTree`).\n * This element is the outer flex layout container; scrolling is\n * delegated to the inner `TreeScrollContainer` so the virtualized\n * sizer (a flex item here would be squashed by `flex-shrink: 1`) is\n * placed inside a normal block formatting context.\n *\n * Tree-wide modifiers (set on `TreeElement` itself):\n * - `has-height` — paired with `--tree-height` on inline `style`\n *   when the consumer passes a numeric `height` prop.\n */\nexport const TreeElement = tasty({\n  qa: 'Tree',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    width: '100%',\n    height: { '': 'auto', 'has-height': 'fixed $tree-height' },\n    flexGrow: { '': 1, 'has-height': 0 },\n    flexShrink: { '': 1, 'has-height': 0 },\n    flexBasis: { '': 0, 'has-height': 'auto' },\n    minHeight: 0,\n    fill: '#clear',\n    color: '#dark',\n    transition: 'theme',\n    outline: 0,\n    padding: 0,\n    radius: { '': 0, 'shape=card': '1cr' },\n    border: { '': 0, 'shape=card': true },\n  },\n});\n\n/**\n * Inner scroll viewport. Block-level on purpose — placing the\n * virtualizer's sizer (`height: ${totalSize}px`) directly inside the\n * flex `TreeElement` lets `flex-shrink: 1` collapse it, which makes\n * the scroll area visibly grow as `@tanstack/react-virtual`\n * re-measures rows during scroll.\n */\nexport const TreeScrollContainer = tasty({\n  qa: 'TreeScrollContainer',\n  styles: {\n    display: 'block',\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: 'auto',\n    width: '0 100% initial',\n    height: 'min 0',\n    overflow: 'auto',\n    scrollbar: 'thin',\n  },\n});\n\n/**\n * Per-row wrapper carrying `role=\"row\"`, `rowProps` from\n * `useTreeItem`, and the `--tree-level` CSS custom property used by\n * `TreeRowItem` to compute its left padding.\n *\n * Has no visual styles of its own — the row's appearance lives on\n * the inner `TreeRowItem` (which extends `Item`).\n */\nexport const TreeNodeRow = tasty({\n  qa: 'TreeRow',\n  styles: {\n    display: 'block',\n    outline: 0,\n  },\n});\n\n/**\n * The visible row: an `Item` extension that owns layout (full-width,\n * tree indent) only. Color treatment is delegated to the\n * `default.item` variant (see `DEFAULT_ITEM_STYLES` in\n * `data/item-themes.ts`) so the Tree row matches the canonical Item\n * look out of the box. `hovered` / `focused` / `pressed` mods are\n * propagated from `TreeNode` because react-aria's treegrid uses a\n * roving-tabindex \"virtual focus\" model and never sets those data\n * attributes itself.\n */\nexport const TreeRowItem = tasty(Item, {\n  qa: 'TreeItem',\n  type: 'item',\n  size: 'medium',\n  as: 'div',\n  styles: {\n    /**\n     * `Item` is `inline-grid` by default, which leaves baseline\n     * descender space below the row inside the block-level\n     * `TreeNodeRow` and visually inflates the gap between rows\n     * past the intended `1bw`. Force block-level grid here.\n     */\n    display: 'grid',\n    width: '100%',\n    /**\n     * Per-level indent. `$tree-indent` is a local token that reads\n     * `--tree-level` (set inline on the parent `TreeNodeRow`) with a\n     * `0` fallback. Using `padding` shorthand (instead of\n     * `paddingInlineStart`) so it overrides `Item`'s default\n     * `padding: 0` reliably — a longhand override on a shorthand\n     * loses to it in the cascade when both are emitted from the same\n     * declaration block.\n     */\n    padding: 'left ($tree-indent * 1.5x)',\n    '$tree-indent': '($tree-level, 0)',\n    cursor: {\n      '': 'pointer',\n      disabled: 'not-allowed',\n    },\n  },\n});\n\n/**\n * Wraps the checkbox sitting in `Item`'s `prefix` slot. `Item`'s\n * built-in Prefix padding collapses to `0` whenever there's an icon\n * (which is always true for tree rows because the toggle/placeholder\n * occupies the icon slot). We re-introduce a small inline gap on\n * both sides so the checkbox isn't flush against the chevron and the\n * title.\n */\nexport const TreeNodeCheckboxWrapper = tasty({\n  qa: 'TreeNodeCheckboxWrapper',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    placeContent: 'center',\n    padding: '0 1x',\n  },\n});\n\nconst TOGGLE_BASE_STYLES: Styles = {\n  display: 'grid',\n  placeItems: 'center',\n  placeContent: 'center',\n  width: '3x',\n  height: '3x',\n  radius: true,\n  transition: 'theme',\n};\n\n/**\n * Chevron toggle button placed in `Item`'s `icon` slot. Spreads\n * `expandButtonProps` from `useTreeItem` (an AriaButtonProps) and\n * stops the press from bubbling to the row's selection handler via\n * React Aria's PressResponder.\n */\nexport const TreeNodeToggle = tasty(Action, {\n  qa: 'TreeNodeToggle',\n  styles: {\n    ...TOGGLE_BASE_STYLES,\n    color: { '': '#dark-02', ':hover': '#dark' },\n    fill: { '': '#clear', ':hover': '#dark.04' },\n  },\n});\n\n/**\n * Non-interactive placeholder that occupies the same footprint as\n * `TreeNodeToggle` so leaf rows visually align with siblings that\n * have a chevron.\n */\nexport const TreeNodeTogglePlaceholder = tasty({\n  styles: TOGGLE_BASE_STYLES,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,MAAa,cAAc,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,OAAO;EACP,QAAQ;GAAE,IAAI;GAAQ,cAAc;GAAsB;EAC1D,UAAU;GAAE,IAAI;GAAG,cAAc;GAAG;EACpC,YAAY;GAAE,IAAI;GAAG,cAAc;GAAG;EACtC,WAAW;GAAE,IAAI;GAAG,cAAc;GAAQ;EAC1C,WAAW;EACX,MAAM;EACN,OAAO;EACP,YAAY;EACZ,SAAS;EACT,SAAS;EACT,QAAQ;GAAE,IAAI;GAAG,cAAc;GAAO;EACtC,QAAQ;GAAE,IAAI;GAAG,cAAc;GAAM;EACtC;CACF,CAAC;;;;;;;;AASF,MAAa,sBAAsB,MAAM;CACvC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;EACX,OAAO;EACP,QAAQ;EACR,UAAU;EACV,WAAW;EACZ;CACF,CAAC;;;;;;;;;AAUF,MAAa,cAAc,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,SAAS;EACV;CACF,CAAC;;;;;;;;;;;AAYF,MAAa,cAAc,MAAMA,OAAM;CACrC,IAAI;CACJ,MAAM;CACN,MAAM;CACN,IAAI;CACJ,QAAQ;EAON,SAAS;EACT,OAAO;EAUP,SAAS;EACT,gBAAgB;EAChB,QAAQ;GACN,IAAI;GACJ,UAAU;GACX;EACF;CACF,CAAC;;;;;;;;;AAUF,MAAa,0BAA0B,MAAM;CAC3C,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,SAAS;EACV;CACF,CAAC;AAEF,MAAM,qBAA6B;CACjC,SAAS;CACT,YAAY;CACZ,cAAc;CACd,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,YAAY;CACb;;;;;;;AAQD,MAAa,iBAAiB,MAAM,QAAQ;CAC1C,IAAI;CACJ,QAAQ;EACN,GAAG;EACH,OAAO;GAAE,IAAI;GAAY,UAAU;GAAS;EAC5C,MAAM;GAAE,IAAI;GAAU,UAAU;GAAY;EAC7C;CACF,CAAC;;;;;;AAOF,MAAa,4BAA4B,MAAM,EAC7C,QAAQ,oBACT,CAAC"}
+{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/content/Tree/styled.ts"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\n\nimport { Action } from '../../actions/Action/Action';\nimport { Item } from '../Item';\n\n/**\n * Tree root.\n *\n * Renders as `role=\"treegrid\"` (set on `gridProps` from `useTree`).\n * This element is the outer flex layout container; scrolling is\n * delegated to the inner `TreeScrollContainer` so the virtualized\n * sizer (a flex item here would be squashed by `flex-shrink: 1`) is\n * placed inside a normal block formatting context.\n *\n * Tree-wide modifiers (set on `TreeElement` itself):\n * - `has-height` — paired with `--tree-height` on inline `style`\n *   when the consumer passes a numeric `height` prop.\n */\nexport const TreeElement = tasty({\n  qa: 'Tree',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    width: '100%',\n    height: { '': 'auto', 'has-height': 'fixed $tree-height' },\n    flexGrow: { '': 1, 'has-height': 0 },\n    flexShrink: { '': 1, 'has-height': 0 },\n    flexBasis: { '': 0, 'has-height': 'auto' },\n    minHeight: 0,\n    fill: '#clear',\n    color: '#dark',\n    transition: 'theme',\n    outline: 0,\n    padding: 0,\n    radius: { '': 0, 'shape=card': '1cr' },\n    border: { '': 0, 'shape=card': true },\n  },\n});\n\n/**\n * Inner scroll viewport. Block-level on purpose — placing the\n * virtualizer's sizer (`height: ${totalSize}px`) directly inside the\n * flex `TreeElement` lets `flex-shrink: 1` collapse it, which makes\n * the scroll area visibly grow as `@tanstack/react-virtual`\n * re-measures rows during scroll.\n */\nexport const TreeScrollContainer = tasty({\n  qa: 'TreeScrollContainer',\n  styles: {\n    display: 'block',\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: 'auto',\n    width: '0 100% initial',\n    height: 'min 0',\n    overflow: 'auto',\n    scrollbar: 'thin',\n  },\n});\n\n/**\n * Per-row wrapper carrying `role=\"row\"`, `rowProps` from\n * `useTreeItem`, and the `--tree-level` CSS custom property used by\n * `TreeRowItem` to compute its left padding.\n *\n * Has no visual styles of its own — the row's appearance lives on\n * the inner `TreeRowItem` (which extends `Item`).\n */\nexport const TreeNodeRow = tasty({\n  qa: 'TreeRow',\n  styles: {\n    display: 'block',\n    outline: 0,\n  },\n});\n\n/**\n * The visible row: an `Item` extension that owns layout (full-width,\n * tree indent) only. Color treatment is delegated to the\n * `default.item` variant (see `DEFAULT_ITEM_STYLES` in\n * `data/item-themes.ts`) so the Tree row matches the canonical Item\n * look out of the box. `hovered` / `focused` / `pressed` mods are\n * propagated from `TreeNode` because react-aria's treegrid uses a\n * roving-tabindex \"virtual focus\" model and never sets those data\n * attributes itself.\n */\nexport const TreeRowItem = tasty(Item, {\n  qa: 'TreeItem',\n  type: 'item',\n  size: 'medium',\n  as: 'div',\n  styles: {\n    /**\n     * `Item` is `inline-grid` by default, which leaves baseline\n     * descender space below the row inside the block-level\n     * `TreeNodeRow` and visually inflates the gap between rows\n     * past the intended `1bw`. Force block-level grid here.\n     */\n    display: 'grid',\n    width: '100%',\n    /**\n     * Per-level indent. `$tree-indent` is a local token that reads\n     * `--tree-level` (set inline on the parent `TreeNodeRow`) with a\n     * `0` fallback. Using `padding` shorthand (instead of\n     * `paddingInlineStart`) so it overrides `Item`'s default\n     * `padding: 0` reliably — a longhand override on a shorthand\n     * loses to it in the cascade when both are emitted from the same\n     * declaration block.\n     */\n    padding: 'left ($tree-indent * 1.5x)',\n    '$tree-indent': '($tree-level, 0)',\n    cursor: {\n      '': 'pointer',\n      disabled: 'not-allowed',\n    },\n  },\n});\n\n/**\n * Wraps the checkbox sitting in `Item`'s `prefix` slot. `Item`'s\n * built-in Prefix padding collapses to `0` whenever there's an icon\n * (which is always true for tree rows because the toggle/placeholder\n * occupies the icon slot). We re-introduce a small inline gap on\n * both sides so the checkbox isn't flush against the chevron and the\n * title.\n */\nexport const TreeNodeCheckboxWrapper = tasty({\n  qa: 'TreeNodeCheckboxWrapper',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    placeContent: 'center',\n    placeSelf: 'stretch',\n    padding: '0 1x',\n  },\n});\n\nconst TOGGLE_BASE_STYLES: Styles = {\n  display: 'grid',\n  placeItems: 'center',\n  placeContent: 'center',\n  width: '3x',\n  height: '3x',\n  radius: true,\n  transition: 'theme',\n};\n\n/**\n * Chevron toggle button placed in `Item`'s `icon` slot. Spreads\n * `expandButtonProps` from `useTreeItem` (an AriaButtonProps) and\n * stops the press from bubbling to the row's selection handler via\n * React Aria's PressResponder.\n */\nexport const TreeNodeToggle = tasty(Action, {\n  qa: 'TreeNodeToggle',\n  styles: {\n    ...TOGGLE_BASE_STYLES,\n    color: { '': '#dark-02', ':hover': '#dark' },\n    fill: { '': '#clear', ':hover': '#dark.04' },\n  },\n});\n\n/**\n * Non-interactive placeholder that occupies the same footprint as\n * `TreeNodeToggle` so leaf rows visually align with siblings that\n * have a chevron.\n */\nexport const TreeNodeTogglePlaceholder = tasty({\n  styles: TOGGLE_BASE_STYLES,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,MAAa,cAAc,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,OAAO;EACP,QAAQ;GAAE,IAAI;GAAQ,cAAc;GAAsB;EAC1D,UAAU;GAAE,IAAI;GAAG,cAAc;GAAG;EACpC,YAAY;GAAE,IAAI;GAAG,cAAc;GAAG;EACtC,WAAW;GAAE,IAAI;GAAG,cAAc;GAAQ;EAC1C,WAAW;EACX,MAAM;EACN,OAAO;EACP,YAAY;EACZ,SAAS;EACT,SAAS;EACT,QAAQ;GAAE,IAAI;GAAG,cAAc;GAAO;EACtC,QAAQ;GAAE,IAAI;GAAG,cAAc;GAAM;EACtC;CACF,CAAC;;;;;;;;AASF,MAAa,sBAAsB,MAAM;CACvC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;EACX,OAAO;EACP,QAAQ;EACR,UAAU;EACV,WAAW;EACZ;CACF,CAAC;;;;;;;;;AAUF,MAAa,cAAc,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,SAAS;EACV;CACF,CAAC;;;;;;;;;;;AAYF,MAAa,cAAc,MAAMA,OAAM;CACrC,IAAI;CACJ,MAAM;CACN,MAAM;CACN,IAAI;CACJ,QAAQ;EAON,SAAS;EACT,OAAO;EAUP,SAAS;EACT,gBAAgB;EAChB,QAAQ;GACN,IAAI;GACJ,UAAU;GACX;EACF;CACF,CAAC;;;;;;;;;AAUF,MAAa,0BAA0B,MAAM;CAC3C,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,WAAW;EACX,SAAS;EACV;CACF,CAAC;AAEF,MAAM,qBAA6B;CACjC,SAAS;CACT,YAAY;CACZ,cAAc;CACd,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,YAAY;CACb;;;;;;;AAQD,MAAa,iBAAiB,MAAM,QAAQ;CAC1C,IAAI;CACJ,QAAQ;EACN,GAAG;EACH,OAAO;GAAE,IAAI;GAAY,UAAU;GAAS;EAC5C,MAAM;GAAE,IAAI;GAAU,UAAU;GAAY;EAC7C;CACF,CAAC;;;;;;AAOF,MAAa,4BAA4B,MAAM,EAC7C,QAAQ,oBACT,CAAC"}

package/dist/components/content/Tree/tree-index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 //#region src/components/content/Tree/tree-index.ts
 function buildTreeIndex(treeData) {
 	const byKey = /* @__PURE__ */ new Map();

package/dist/components/content/Tree/use-checkbox-tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useMemo, useState } from "react";
 

package/dist/components/content/Tree/use-load-data.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useRef, useState } from "react";
 

package/dist/components/content/highlightText.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { _Text } from "./Text.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/content/use-auto-tooltip.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { TooltipProvider } from "../overlays/Tooltip/TooltipProvider.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/Checkbox/Checkbox.js

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

package/dist/components/fields/Checkbox/CheckboxGroup.js

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { createContext } from "react";
 
 //#region src/components/fields/Checkbox/context.ts

package/dist/components/fields/ComboBox/ComboBox.js

@@ -1,13 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
-import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
-import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
-import { Portal } from "../../portal/Portal.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
 import { useProviderProps } from "../../../provider.js";
 import { _CollectionItem } from "../../CollectionItem.js";
@@ -17,14 +14,16 @@ import { generateRandomId } from "../../../utils/random.js";
 import { useFormProps } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
-import { ListBox } from "../ListBox/ListBox.js";
 import { InvalidIcon } from "../../shared/InvalidIcon.js";
 import { ValidIcon } from "../../shared/ValidIcon.js";
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
+import { ListBoxPopover } from "../ListBoxPopover/ListBoxPopover.js";
+import { useCompositeFocus } from "../ListBoxPopover/useCompositeFocus.js";
+import { filterCollectionNodes, getEdgeVisibleKey, getNextVisibleKey, markKeyboardFocus } from "../ListBoxPopover/listNavigation.js";
 import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import React, { cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useFilter, useKeyboard, useOverlay, useOverlayPosition } from "react-aria";
+import { useFilter, useKeyboard } from "react-aria";
 import { Section, useListState } from "react-stately";
 
 //#region src/components/fields/ComboBox/ComboBox.tsx
@@ -36,55 +35,6 @@ const InputElement = tasty({
 	as: "input",
 	styles: DEFAULT_INPUT_STYLES
 });
-const ComboBoxOverlayWrapper = tasty({
-	qa: "ComboBoxOverlayWrapper",
-	styles: {
-		position: "absolute",
-		zIndex: 1e3
-	}
-});
-const ComboBoxOverlayElement = tasty({
-	qa: "ComboBoxOverlay",
-	styles: {
-		display: "grid",
-		gridRows: "1sf",
-		gridColumns: "1sf",
-		width: "$overlay-min-width max-content 50vw",
-		height: "initial max-content (50vh - 5x)",
-		overflow: "auto",
-		fill: "#surface",
-		radius: "1cr",
-		shadow: true,
-		padding: "0",
-		border: "#border",
-		hide: {
-			"": false,
-			hidden: true
-		},
-		boxSizing: "border-box",
-		transition: "translate $transition ease-out, scale $transition ease-out, theme $transition ease-out",
-		translate: {
-			"": "0 0",
-			"open & [data-placement=\"top\"]": "0 0",
-			"!open & [data-placement=\"top\"]": "0 1x",
-			"open & ([data-placement=\"bottom\"] | ![data-placement])": "0 0",
-			"!open & ([data-placement=\"bottom\"] | ![data-placement])": "0 -1x"
-		},
-		transformOrigin: {
-			"": "top center",
-			"[data-placement=\"top\"]": "bottom center"
-		},
-		scale: {
-			"": "1 1",
-			"!open": "1 .9"
-		},
-		opacity: {
-			"": 1,
-			"!open": .001
-		},
-		"$overlay-min-width": "min 30x"
-	}
-});
 const PROP_STYLES = [
 	...BASE_STYLES,
 	...OUTER_STYLES,
@@ -124,18 +74,7 @@ function useComboBoxFiltering({ effectiveInputValue, filter }) {
 		filterFn: useCallback((nodes) => {
 			const term = effectiveInputValue.trim();
 			if (!isFilterActive || !term) return nodes;
-			return [...nodes].map((node) => {
-				if (node.type === "section" && node.childNodes) {
-					const filteredChildren = [...node.childNodes].filter((child) => textFilterFn(child.textValue || "", term));
-					if (filteredChildren.length === 0) return null;
-					return {
-						...node,
-						childNodes: filteredChildren,
-						hasChildNodes: true
-					};
-				}
-				return textFilterFn(node.textValue || "", term) ? node : null;
-			}).filter(Boolean);
+			return filterCollectionNodes(nodes, term, textFilterFn);
 		}, [
 			isFilterActive,
 			effectiveInputValue,
@@ -145,42 +84,6 @@ function useComboBoxFiltering({ effectiveInputValue, filter }) {
 		setIsFilterActive
 	};
 }
-function useCompositeFocus({ wrapperRef, popoverRef, onFocus, onBlur, isDisabled }) {
-	const wasInsideRef = useRef(false);
-	const rafRef = useRef(null);
-	const checkFocus = useCallback(() => {
-		if (isDisabled) return;
-		const activeElement = document.activeElement;
-		const isInside = (wrapperRef.current?.contains(activeElement) ?? false) || (popoverRef.current?.contains(activeElement) ?? false);
-		if (isInside !== wasInsideRef.current) {
-			wasInsideRef.current = isInside;
-			if (isInside) onFocus?.();
-			else onBlur?.();
-		}
-	}, [
-		wrapperRef,
-		popoverRef,
-		onFocus,
-		onBlur,
-		isDisabled
-	]);
-	const handleFocusOrBlur = useCallback((e) => {
-		if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
-		rafRef.current = requestAnimationFrame(() => {
-			rafRef.current = null;
-			checkFocus();
-		});
-	}, [checkFocus]);
-	useEffect(() => {
-		return () => {
-			if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
-		};
-	}, []);
-	return { compositeFocusProps: {
-		onFocus: handleFocusOrBlur,
-		onBlur: handleFocusOrBlur
-	} };
-}
 function useComboBoxKeyboard({ isPopoverOpen, listStateRef, hasResults, allowsCustomValue, effectiveInputValue, isClearable, onSelectionChange, onClearValue, onOpenPopover, onClosePopover, inputRef, setIsFilterActive, onKeyDown }) {
 	const { keyboardProps } = useKeyboard({ onKeyDown: (e) => {
 		onKeyDown?.(e);
@@ -193,29 +96,10 @@ function useComboBoxKeyboard({ isPopoverOpen, listStateRef, hasResults, allowsCu
 			}
 			const listState = listStateRef.current;
 			if (!listState) return;
-			const { selectionManager, collection, disabledKeys } = listState;
-			const collectVisibleKeys = (nodes, out) => {
-				for (const node of nodes) if (node.type === "item") {
-					if (!disabledKeys?.has(node.key)) out.push(node.key);
-				} else if (node.childNodes) collectVisibleKeys(node.childNodes, out);
-			};
-			const visibleKeys = [];
-			collectVisibleKeys(collection, visibleKeys);
-			if (visibleKeys.length === 0) return;
-			const isArrowDown = e.key === "ArrowDown";
-			const currentKey = selectionManager.focusedKey;
-			let nextKey = null;
-			if (currentKey == null) nextKey = isArrowDown ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];
-			else {
-				const currentIndex = visibleKeys.indexOf(currentKey);
-				if (currentIndex !== -1) {
-					const newIndex = currentIndex + (isArrowDown ? 1 : -1);
-					if (newIndex >= 0 && newIndex < visibleKeys.length) nextKey = visibleKeys[newIndex];
-				} else nextKey = isArrowDown ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];
-			}
+			const nextKey = getNextVisibleKey(listState, e.key === "ArrowDown" ? 1 : -1);
 			if (nextKey != null) {
-				if (listState.lastFocusSourceRef) listState.lastFocusSourceRef.current = "keyboard";
-				selectionManager.setFocusedKey(nextKey);
+				markKeyboardFocus(listState);
+				listState.selectionManager.setFocusedKey(nextKey);
 			}
 		} else if (e.key === "Enter") {
 			if (isPopoverOpen) {
@@ -261,18 +145,11 @@ function useComboBoxKeyboard({ isPopoverOpen, listStateRef, hasResults, allowsCu
 				e.preventDefault();
 				const listState = listStateRef.current;
 				if (!listState) return;
-				const { selectionManager, collection, disabledKeys } = listState;
-				const collectVisibleKeys = (nodes, out) => {
-					for (const node of nodes) if (node.type === "item") {
-						if (!disabledKeys?.has(node.key)) out.push(node.key);
-					} else if (node.childNodes) collectVisibleKeys(node.childNodes, out);
-				};
-				const visibleKeys = [];
-				collectVisibleKeys(collection, visibleKeys);
-				if (visibleKeys.length === 0) return;
-				const targetKey = e.key === "Home" ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];
-				if (listState.lastFocusSourceRef) listState.lastFocusSourceRef.current = "keyboard";
-				selectionManager.setFocusedKey(targetKey);
+				const targetKey = getEdgeVisibleKey(listState, e.key === "Home" ? "first" : "last");
+				if (targetKey != null) {
+					markKeyboardFocus(listState);
+					listState.selectionManager.setFocusedKey(targetKey);
+				}
 			}
 		}
 	} });
@@ -306,79 +183,6 @@ const ComboBoxInput = forwardRef(function ComboBoxInput({ qa, inputRef, id, valu
 		"aria-activedescendant": isPopoverOpen && hasResults && listStateRef.current?.selectionManager.focusedKey != null ? `ListBoxItem-${listStateRef.current?.selectionManager.focusedKey}` : void 0
 	});
 });
-function ComboBoxOverlay({ isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, containerPadding, comboBoxWidth, comboBoxId, overlayStyles, listBoxStyles, optionStyles, sectionStyles, headingStyles, effectiveSelectedKey, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, compositeFocusProps, filter, size = "medium" }) {
-	const { overlayProps: overlayPositionProps, placement } = useOverlayPosition({
-		targetRef: triggerRef,
-		overlayRef: popoverRef,
-		placement: `${direction} start`,
-		shouldFlip,
-		isOpen,
-		offset: overlayOffset,
-		containerPadding
-	});
-	const { overlayProps: overlayBehaviorProps } = useOverlay({
-		onClose,
-		shouldCloseOnBlur: true,
-		isOpen,
-		isDismissable: true,
-		shouldCloseOnInteractOutside: (el) => {
-			const menuTriggerEl = el.closest("[data-popover-trigger]");
-			if (!menuTriggerEl) {
-				if (el.closest("[data-popover-keep]")) return false;
-				if (el.closest("[data-popover-dismiss]")) {
-					setTimeout(onClose, 0);
-					return false;
-				}
-				return true;
-			}
-			if (menuTriggerEl === triggerRef?.current) return true;
-			return false;
-		}
-	}, popoverRef);
-	const placementDirection = placement?.split(" ")[0] || direction;
-	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DisplayTransition, {
-		isShown: isOpen,
-		children: ({ phase, isShown, ref: transitionRef }) => /* @__PURE__ */ jsx(ComboBoxOverlayWrapper, {
-			...mergeProps$1(overlayPositionProps, overlayBehaviorProps, compositeFocusProps),
-			ref: popoverRef,
-			style: overlayPositionProps.style,
-			children: /* @__PURE__ */ jsx(ComboBoxOverlayElement, {
-				ref: transitionRef,
-				"data-placement": placementDirection,
-				"data-phase": phase,
-				mods: {
-					open: isShown,
-					hidden: phase === "unmounted"
-				},
-				styles: overlayStyles,
-				style: { "--overlay-min-width": comboBoxWidth ? `${comboBoxWidth}px` : void 0 },
-				children: /* @__PURE__ */ jsx(ListBox, {
-					ref: listBoxRef,
-					focusOnHover: true,
-					disableSelectionToggle: true,
-					id: `ComboBoxListBox-${comboBoxId}`,
-					"aria-label": ariaLabel || (typeof label === "string" ? label : "Options"),
-					selectedKey: effectiveSelectedKey,
-					selectionMode: "single",
-					isDisabled,
-					disabledKeys,
-					shouldUseVirtualFocus: true,
-					items,
-					filter,
-					styles: listBoxStyles,
-					optionStyles,
-					sectionStyles,
-					headingStyles,
-					stateRef: listStateRef,
-					size: "medium",
-					shape: "popover",
-					onSelectionChange,
-					children
-				})
-			})
-		})
-	}) });
-}
 const ComboBox = forwardRef(function ComboBox(props, ref) {
 	props = useProviderProps(props);
 	props = useFormProps(props);
@@ -841,7 +645,7 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 					}) : null
 				]
 			}),
-			/* @__PURE__ */ jsx(ComboBoxOverlay, {
+			/* @__PURE__ */ jsx(ListBoxPopover, {
 				isOpen: shouldShowPopover,
 				triggerRef: wrapperRef,
 				popoverRef,
@@ -851,13 +655,13 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 				overlayOffset,
 				containerPadding,
 				comboBoxWidth,
-				comboBoxId,
+				listBoxId: `ComboBoxListBox-${comboBoxId}`,
 				overlayStyles,
 				listBoxStyles,
 				optionStyles,
 				sectionStyles,
 				headingStyles,
-				effectiveSelectedKey,
+				selectedKey: effectiveSelectedKey,
 				isDisabled,
 				disabledKeys: props.disabledKeys,
 				items: sortedItems,