@cube-dev/ui-kit 0.0.0-canary-8e09ade → 0.0.0-canary-a5508da

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

@@ -1,139 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | 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";
-import { ListBox } from "../ListBox/ListBox.js";
-import { tasty } from "@tenphi/tasty";
-import React from "react";
-import { jsx } from "react/jsx-runtime";
-import { useOverlay, useOverlayPosition } from "react-aria";
-
-//#region src/components/fields/ListBoxPopover/ListBoxPopover.tsx
-const ListBoxPopoverWrapper = tasty({
-	qa: "ComboBoxOverlayWrapper",
-	styles: {
-		position: "absolute",
-		zIndex: 1e3
-	}
-});
-const ListBoxPopoverElement = 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 ListBoxPopover = function ListBoxPopover(props) {
-	const { isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, containerPadding, comboBoxWidth, listBoxId, overlayStyles, listBoxStyles, optionStyles, sectionStyles, headingStyles, selectedKey, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, compositeFocusProps, filter, size = "medium" } = props;
-	const mergedPopoverRef = popoverRef;
-	const { overlayProps: overlayPositionProps, placement } = useOverlayPosition({
-		targetRef: triggerRef,
-		overlayRef: mergedPopoverRef,
-		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;
-		}
-	}, mergedPopoverRef);
-	const placementDirection = placement?.split(" ")[0] || direction;
-	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DisplayTransition, {
-		isShown: isOpen,
-		children: ({ phase, isShown, ref: transitionRef }) => /* @__PURE__ */ jsx(ListBoxPopoverWrapper, {
-			...mergeProps$1(overlayPositionProps, overlayBehaviorProps, compositeFocusProps),
-			ref: mergedPopoverRef,
-			style: overlayPositionProps.style,
-			children: /* @__PURE__ */ jsx(ListBoxPopoverElement, {
-				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: listBoxId,
-					"aria-label": ariaLabel || (typeof label === "string" ? label : "Options"),
-					selectedKey,
-					selectionMode: "single",
-					isDisabled,
-					disabledKeys,
-					shouldUseVirtualFocus: true,
-					items,
-					filter,
-					styles: listBoxStyles,
-					optionStyles,
-					sectionStyles,
-					headingStyles,
-					stateRef: listStateRef,
-					size: "medium",
-					shape: "popover",
-					onSelectionChange,
-					children
-				})
-			})
-		})
-	}) });
-};
-
-//#endregion
-export { ListBoxPopover };
-//# sourceMappingURL=ListBoxPopover.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListBoxPopover.js","names":["mergeProps"],"sources":["../../../../src/components/fields/ListBoxPopover/ListBoxPopover.tsx"],"sourcesContent":["import { Key } from '@react-types/shared';\nimport { Styles, tasty } from '@tenphi/tasty';\nimport React, { ReactNode, RefObject } from 'react';\nimport { useOverlay, useOverlayPosition } from 'react-aria';\n\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  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\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 {\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    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  } = props;\n\n  const mergedPopoverRef = popoverRef;\n\n  // Overlay positioning\n  const { overlayProps: overlayPositionProps, placement } = useOverlayPosition({\n    targetRef: triggerRef as any,\n    overlayRef: mergedPopoverRef as any,\n    placement: `${direction} start` as any,\n    shouldFlip,\n    isOpen,\n    offset: overlayOffset,\n    containerPadding: containerPadding,\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 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  const overlayContent = (\n    <DisplayTransition isShown={isOpen}>\n      {({ phase, isShown, ref: transitionRef }) => (\n        <ListBoxPopoverWrapper\n          {...mergeProps(\n            overlayPositionProps,\n            overlayBehaviorProps,\n            compositeFocusProps,\n          )}\n          ref={mergedPopoverRef}\n          style={overlayPositionProps.style}\n        >\n          <ListBoxPopoverElement\n            ref={transitionRef}\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            }}\n          >\n            <ListBox\n              ref={listBoxRef}\n              focusOnHover\n              disableSelectionToggle\n              id={listBoxId}\n              aria-label={\n                ariaLabel || (typeof label === 'string' ? label : 'Options')\n              }\n              selectedKey={selectedKey}\n              selectionMode=\"single\"\n              isDisabled={isDisabled}\n              disabledKeys={disabledKeys}\n              shouldUseVirtualFocus={true}\n              items={items as any}\n              filter={filter}\n              styles={listBoxStyles}\n              optionStyles={optionStyles}\n              sectionStyles={sectionStyles}\n              headingStyles={headingStyles}\n              stateRef={listStateRef}\n              size=\"medium\"\n              shape=\"popover\"\n              onSelectionChange={onSelectionChange}\n            >\n              {children as any}\n            </ListBox>\n          </ListBoxPopoverElement>\n        </ListBoxPopoverWrapper>\n      )}\n    </DisplayTransition>\n  );\n\n  return <Portal>{overlayContent}</Portal>;\n};\n"],"mappings":";;;;;;;;;;;AAgDA,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,QAAQ;EACT;CACF,CAAC;AAEF,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,aAAa;EACb,OAAO;EACP,QAAQ;EACR,UAAU;EACV,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,QAAQ;GACT;EACD,WAAW;EACX,YACE;EACF,WAAW;GACT,IAAI;GACJ,mCAAiC;GACjC,oCAAkC;GAClC,4DAA0D;GAC1D,6DAA2D;GAC5D;EACD,iBAAiB;GACf,IAAI;GACJ,4BAA0B;GAC3B;EACD,OAAO;GACL,IAAI;GACJ,SAAS;GACV;EACD,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EAED,sBAAsB;EACvB;CACF,CAAC;AAEF,MAAa,iBAAiB,SAAS,eACrC,OACA;CACA,MAAM,EACJ,QACA,YACA,YACA,YACA,WACA,YACA,eACA,kBACA,eACA,WACA,eACA,eACA,cACA,eACA,eACA,aACA,YACA,cACA,OACA,UACA,cACA,mBACA,SACA,OACA,WACA,qBACA,QACA,OAAO,aACL;CAEJ,MAAM,mBAAmB;CAGzB,MAAM,EAAE,cAAc,sBAAsB,cAAc,mBAAmB;EAC3E,WAAW;EACX,YAAY;EACZ,WAAW,GAAG,UAAU;EACxB;EACA;EACA,QAAQ;EACU;EACnB,CAAC;CAGF,MAAM,EAAE,cAAc,yBAAyB,WAC7C;EACE;EACA,mBAAmB;EACnB;EACA,eAAe;EACf,+BAA+B,OAAO;GACpC,MAAM,gBAAgB,GAAG,QAAQ,yBAAyB;AAC1D,OAAI,CAAC,eAAe;AAClB,QAAI,GAAG,QAAQ,sBAAsB,CAAE,QAAO;AAK9C,QAAI,GAAG,QAAQ,yBAAyB,EAAE;AACxC,gBAAW,SAAS,EAAE;AACtB,YAAO;;AAET,WAAO;;AAET,OAAI,kBAAkB,YAAY,QAAS,QAAO;AAClD,UAAO;;EAEV,EACD,iBACD;CAGD,MAAM,qBAAqB,WAAW,MAAM,IAAI,CAAC,MAAM;AA6DvD,QAAO,oBAAC,oBA1DN,oBAAC;EAAkB,SAAS;aACxB,EAAE,OAAO,SAAS,KAAK,oBACvB,oBAAC;GACC,GAAIA,aACF,sBACA,sBACA,oBACD;GACD,KAAK;GACL,OAAO,qBAAqB;aAE5B,oBAAC;IACC,KAAK;IACL,kBAAgB;IAChB,cAAY;IACZ,MAAM;KACJ,MAAM;KACN,QAAQ,UAAU;KACnB;IACD,QAAQ;IACR,OAAO,EACL,uBAAuB,gBACnB,GAAG,cAAc,MACjB,QACL;cAED,oBAAC;KACC,KAAK;KACL;KACA;KACA,IAAI;KACJ,cACE,cAAc,OAAO,UAAU,WAAW,QAAQ;KAEvC;KACb,eAAc;KACF;KACE;KACd,uBAAuB;KAChB;KACC;KACR,QAAQ;KACM;KACC;KACA;KACf,UAAU;KACV,MAAK;KACL,OAAM;KACa;KAElB;MACO;KACY;IACF;GAER,GAGkB"}

package/dist/components/fields/ListBoxPopover/index.d.ts

@@ -1,4 +0,0 @@
-
-import "./ListBoxPopover.js";
-import "./useCompositeFocus.js";
-import { ListStateLike, TextFilterFn } from "./listNavigation.js";

package/dist/components/fields/ListBoxPopover/listNavigation.d.ts

@@ -1,24 +0,0 @@
-
-import { Key } from "@react-types/shared";
-
-//#region src/components/fields/ListBoxPopover/listNavigation.d.ts
-/**
- * Minimal view of a React Stately list state. Kept structural (no imports from
- * `react-stately`) so the helpers can be used from any collection-backed
- * component without dragging extra types in.
- */
-interface ListStateLike {
-  selectionManager: {
-    focusedKey: Key | null;
-    setFocusedKey: (key: Key | null) => void;
-  };
-  collection: Iterable<any>;
-  disabledKeys?: Set<Key>;
-  lastFocusSourceRef?: {
-    current: 'keyboard' | 'mouse' | 'other';
-  };
-}
-type TextFilterFn = (textValue: string, inputValue: string) => boolean;
-//#endregion
-export { ListStateLike, TextFilterFn };
-//# sourceMappingURL=listNavigation.d.ts.map

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

@@ -1,78 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
-//#region src/components/fields/ListBoxPopover/listNavigation.ts
-/**
-* Walks a collection (possibly nested under sections) and collects the keys of
-* selectable items, skipping disabled ones. Mirrors the inline walker that
-* used to live in `useComboBoxKeyboard`.
-*/
-function collectVisibleKeys(nodes, out, disabledKeys) {
-	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, disabledKeys);
-}
-/** Convenience: returns the flat list of selectable keys for a list state. */
-function getVisibleKeys(listState) {
-	const keys = [];
-	collectVisibleKeys(listState.collection, keys, listState.disabledKeys);
-	return keys;
-}
-/**
-* Computes the next key to focus when navigating with ArrowUp/ArrowDown.
-*
-* - If `fromKey` is omitted, reads `selectionManager.focusedKey`.
-* - When nothing is focused (or the focused key is no longer visible), falls
-*   back to the first/last visible key depending on `direction`.
-* - When the current key is the boundary, either returns `null` (default) or
-*   wraps to the opposite edge when `opts.wrap` is true.
-*/
-function getNextVisibleKey(listState, direction, opts) {
-	const visibleKeys = getVisibleKeys(listState);
-	if (visibleKeys.length === 0) return null;
-	const isForward = direction === 1;
-	const currentKey = opts?.fromKey ?? listState.selectionManager.focusedKey;
-	if (currentKey == null) return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];
-	const currentIndex = visibleKeys.indexOf(currentKey);
-	if (currentIndex === -1) return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];
-	const newIndex = currentIndex + direction;
-	if (newIndex >= 0 && newIndex < visibleKeys.length) return visibleKeys[newIndex];
-	if (opts?.wrap) return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];
-	return null;
-}
-/** Returns the first or last selectable key. */
-function getEdgeVisibleKey(listState, edge) {
-	const visibleKeys = getVisibleKeys(listState);
-	if (visibleKeys.length === 0) return null;
-	return edge === "first" ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];
-}
-/**
-* Marks a focus change as keyboard-driven so the underlying ListBox scrolls the
-* highlighted option into view. No-op when the list state doesn't expose a
-* `lastFocusSourceRef`.
-*/
-function markKeyboardFocus(listState) {
-	if (listState.lastFocusSourceRef) listState.lastFocusSourceRef.current = "keyboard";
-}
-/**
-* Filters collection nodes by a search term while preserving section structure.
-* Sections whose children all fail the filter are dropped. Extracted verbatim
-* from the former `useComboBoxFiltering` inline filter.
-*/
-function filterCollectionNodes(nodes, term, textFilterFn) {
-	if (!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);
-}
-
-//#endregion
-export { filterCollectionNodes, getEdgeVisibleKey, getNextVisibleKey, markKeyboardFocus };
-//# sourceMappingURL=listNavigation.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"listNavigation.js","names":[],"sources":["../../../../src/components/fields/ListBoxPopover/listNavigation.ts"],"sourcesContent":["import { Key } from '@react-types/shared';\n\n/**\n * Minimal view of a React Stately list state. Kept structural (no imports from\n * `react-stately`) so the helpers can be used from any collection-backed\n * component without dragging extra types in.\n */\nexport interface ListStateLike {\n  selectionManager: {\n    focusedKey: Key | null;\n    setFocusedKey: (key: Key | null) => void;\n  };\n  collection: Iterable<any>;\n  disabledKeys?: Set<Key>;\n  lastFocusSourceRef?: { current: 'keyboard' | 'mouse' | 'other' };\n}\n\nexport type NavigationDirection = 1 | -1;\nexport type NavigationEdge = 'first' | 'last';\n\n/**\n * Walks a collection (possibly nested under sections) and collects the keys of\n * selectable items, skipping disabled ones. Mirrors the inline walker that\n * used to live in `useComboBoxKeyboard`.\n */\nexport function collectVisibleKeys(\n  nodes: Iterable<any>,\n  out: Key[],\n  disabledKeys?: Set<Key>,\n): void {\n  for (const node of nodes) {\n    if (node.type === 'item') {\n      if (!disabledKeys?.has(node.key)) {\n        out.push(node.key);\n      }\n    } else if (node.childNodes) {\n      collectVisibleKeys(node.childNodes, out, disabledKeys);\n    }\n  }\n}\n\n/** Convenience: returns the flat list of selectable keys for a list state. */\nexport function getVisibleKeys(listState: ListStateLike): Key[] {\n  const keys: Key[] = [];\n  collectVisibleKeys(\n    listState.collection,\n    keys,\n    listState.disabledKeys as Set<Key> | undefined,\n  );\n  return keys;\n}\n\n/**\n * Computes the next key to focus when navigating with ArrowUp/ArrowDown.\n *\n * - If `fromKey` is omitted, reads `selectionManager.focusedKey`.\n * - When nothing is focused (or the focused key is no longer visible), falls\n *   back to the first/last visible key depending on `direction`.\n * - When the current key is the boundary, either returns `null` (default) or\n *   wraps to the opposite edge when `opts.wrap` is true.\n */\nexport function getNextVisibleKey(\n  listState: ListStateLike,\n  direction: NavigationDirection,\n  opts?: { wrap?: boolean; fromKey?: Key | null },\n): Key | null {\n  const visibleKeys = getVisibleKeys(listState);\n  if (visibleKeys.length === 0) return null;\n\n  const isForward = direction === 1;\n  const currentKey = opts?.fromKey ?? listState.selectionManager.focusedKey;\n\n  if (currentKey == null) {\n    return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n  }\n\n  const currentIndex = visibleKeys.indexOf(currentKey);\n\n  if (currentIndex === -1) {\n    // Focused item was filtered out — restart from the matching edge.\n    return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n  }\n\n  const newIndex = currentIndex + direction;\n  if (newIndex >= 0 && newIndex < visibleKeys.length) {\n    return visibleKeys[newIndex];\n  }\n\n  if (opts?.wrap) {\n    return isForward ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];\n  }\n\n  return null;\n}\n\n/** Returns the first or last selectable key. */\nexport function getEdgeVisibleKey(\n  listState: ListStateLike,\n  edge: NavigationEdge,\n): Key | null {\n  const visibleKeys = getVisibleKeys(listState);\n  if (visibleKeys.length === 0) return null;\n  return edge === 'first'\n    ? visibleKeys[0]\n    : visibleKeys[visibleKeys.length - 1];\n}\n\n/**\n * Marks a focus change as keyboard-driven so the underlying ListBox scrolls the\n * highlighted option into view. No-op when the list state doesn't expose a\n * `lastFocusSourceRef`.\n */\nexport function markKeyboardFocus(listState: ListStateLike): void {\n  if (listState.lastFocusSourceRef) {\n    listState.lastFocusSourceRef.current = 'keyboard';\n  }\n}\n\nexport type TextFilterFn = (textValue: string, inputValue: string) => boolean;\n\n/**\n * Filters collection nodes by a search term while preserving section structure.\n * Sections whose children all fail the filter are dropped. Extracted verbatim\n * from the former `useComboBoxFiltering` inline filter.\n */\nexport function filterCollectionNodes(\n  nodes: Iterable<any>,\n  term: string,\n  textFilterFn: TextFilterFn,\n): Iterable<any> {\n  if (!term) {\n    return nodes;\n  }\n\n  return [...nodes]\n    .map((node: any) => {\n      if (node.type === 'section' && node.childNodes) {\n        const filteredChildren = [...node.childNodes].filter((child: any) =>\n          textFilterFn(child.textValue || '', term),\n        );\n\n        if (filteredChildren.length === 0) {\n          return null;\n        }\n\n        return {\n          ...node,\n          childNodes: filteredChildren,\n          hasChildNodes: true,\n        };\n      }\n\n      return textFilterFn(node.textValue || '', term) ? node : null;\n    })\n    .filter(Boolean);\n}\n"],"mappings":";;;;;;;AAyBA,SAAgB,mBACd,OACA,KACA,cACM;AACN,MAAK,MAAM,QAAQ,MACjB,KAAI,KAAK,SAAS,QAChB;MAAI,CAAC,cAAc,IAAI,KAAK,IAAI,CAC9B,KAAI,KAAK,KAAK,IAAI;YAEX,KAAK,WACd,oBAAmB,KAAK,YAAY,KAAK,aAAa;;;AAM5D,SAAgB,eAAe,WAAiC;CAC9D,MAAM,OAAc,EAAE;AACtB,oBACE,UAAU,YACV,MACA,UAAU,aACX;AACD,QAAO;;;;;;;;;;;AAYT,SAAgB,kBACd,WACA,WACA,MACY;CACZ,MAAM,cAAc,eAAe,UAAU;AAC7C,KAAI,YAAY,WAAW,EAAG,QAAO;CAErC,MAAM,YAAY,cAAc;CAChC,MAAM,aAAa,MAAM,WAAW,UAAU,iBAAiB;AAE/D,KAAI,cAAc,KAChB,QAAO,YAAY,YAAY,KAAK,YAAY,YAAY,SAAS;CAGvE,MAAM,eAAe,YAAY,QAAQ,WAAW;AAEpD,KAAI,iBAAiB,GAEnB,QAAO,YAAY,YAAY,KAAK,YAAY,YAAY,SAAS;CAGvE,MAAM,WAAW,eAAe;AAChC,KAAI,YAAY,KAAK,WAAW,YAAY,OAC1C,QAAO,YAAY;AAGrB,KAAI,MAAM,KACR,QAAO,YAAY,YAAY,KAAK,YAAY,YAAY,SAAS;AAGvE,QAAO;;;AAIT,SAAgB,kBACd,WACA,MACY;CACZ,MAAM,cAAc,eAAe,UAAU;AAC7C,KAAI,YAAY,WAAW,EAAG,QAAO;AACrC,QAAO,SAAS,UACZ,YAAY,KACZ,YAAY,YAAY,SAAS;;;;;;;AAQvC,SAAgB,kBAAkB,WAAgC;AAChE,KAAI,UAAU,mBACZ,WAAU,mBAAmB,UAAU;;;;;;;AAW3C,SAAgB,sBACd,OACA,MACA,cACe;AACf,KAAI,CAAC,KACH,QAAO;AAGT,QAAO,CAAC,GAAG,MAAM,CACd,KAAK,SAAc;AAClB,MAAI,KAAK,SAAS,aAAa,KAAK,YAAY;GAC9C,MAAM,mBAAmB,CAAC,GAAG,KAAK,WAAW,CAAC,QAAQ,UACpD,aAAa,MAAM,aAAa,IAAI,KAAK,CAC1C;AAED,OAAI,iBAAiB,WAAW,EAC9B,QAAO;AAGT,UAAO;IACL,GAAG;IACH,YAAY;IACZ,eAAe;IAChB;;AAGH,SAAO,aAAa,KAAK,aAAa,IAAI,KAAK,GAAG,OAAO;GACzD,CACD,OAAO,QAAQ"}

package/dist/components/fields/ListBoxPopover/useCompositeFocus.d.ts

@@ -1,2 +0,0 @@
-
-import React, { RefObject } from "react";

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

@@ -1,53 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
-import { useCallback, useEffect, useRef } from "react";
-
-//#region src/components/fields/ListBoxPopover/useCompositeFocus.ts
-/**
-* Tracks focus across a wrapper element and its (portaled) popover as a single
-* logical focus scope. Fires `onFocus` when focus enters either and `onBlur`
-* when it leaves both — essential for components whose overlay is portaled, so
-* 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.
-*/
-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
-	} };
-}
-
-//#endregion
-export { useCompositeFocus };
-//# sourceMappingURL=useCompositeFocus.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useCompositeFocus.js","names":[],"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,SAAgB,kBAAkB,EAChC,YACA,YACA,SACA,QACA,cACkD;CAClD,MAAM,eAAe,OAAO,MAAM;CAClC,MAAM,SAAS,OAAsB,KAAK;CAE1C,MAAM,aAAa,kBAAkB;AACnC,MAAI,WAAY;EAEhB,MAAM,gBAAgB,SAAS;EAC/B,MAAM,YACH,WAAW,SAAS,SAAS,cAAc,IAAI,WAC/C,WAAW,SAAS,SAAS,cAAc,IAAI;AAElD,MAAI,aAAa,aAAa,SAAS;AACrC,gBAAa,UAAU;AACvB,OAAI,SACF,YAAW;OAEX,WAAU;;IAGb;EAAC;EAAY;EAAY;EAAS;EAAQ;EAAW,CAAC;CAEzD,MAAM,oBAAoB,aACvB,MAAwB;AAEvB,MAAI,OAAO,YAAY,KACrB,sBAAqB,OAAO,QAAQ;AAItC,SAAO,UAAU,4BAA4B;AAC3C,UAAO,UAAU;AACjB,eAAY;IACZ;IAEJ,CAAC,WAAW,CACb;AAGD,iBAAgB;AACd,eAAa;AACX,OAAI,OAAO,YAAY,KACrB,sBAAqB,OAAO,QAAQ;;IAGvC,EAAE,CAAC;AAEN,QAAO,EACL,qBAAqB;EACnB,SAAS;EACT,QAAQ;EACT,EACF"}

package/docs/components/fields/CommandTextArea.md

@@ -1,130 +0,0 @@
-# CommandTextArea
-
-A multiline text input (built on `TextArea` / `TextInputBase`) that shows a
-command-autocomplete popover when the text matches a configurable trigger. The
-focus always stays in the textarea; arrow keys, Enter/Tab, and Escape drive the
-list only while it is open. Selecting an option inserts the option's literal
-value (e.g. `/clear`) into the text and fires `onCommand`.
-
-## When to Use
-
-- Chat or prompt inputs where users type slash commands (`/clear`, `/help`).
-- Inputs that need token-based autocomplete (`@mentions`, snippets) without
-  giving up free-form, multiline editing.
-- Any textarea that should "feel like a textarea" but offer inline suggestions.
-
-## Component
-
----
-
-### Properties
-
-- **`triggers`** `CommandTrigger[]` (default: `[{ char: '/', atLineStart: true }]`) — Descriptors that open the autocomplete. `atLineStart` restricts the token to the start of the input; `false` allows it anywhere after whitespace.
-- **`items`** `Iterable<T>` — Data-driven option source (alternative to JSX children).
-- **`children`** `ReactNode | ((item) => ReactElement)` — Static items or a render function (same shape as `ComboBox` / `ListBox`).
-- **`filter`** `(textValue, query) => boolean | false` — Custom filter. Pass `false` to disable internal filtering (e.g. server-side).
-- **`onCommand`** `(key, item) => void` — Fired when the user picks a command. The option's `textValue` is inserted into the textarea regardless.
-- **`insertSpaceAfter`** `boolean` (default: `true`) — Insert a trailing space after the chosen command.
-- **`disabledKeys`** `Iterable<Key>` — Keys of disabled options.
-- **`direction`** `'top' | 'bottom'` (default: `'top'`) — Popover placement. Chat inputs usually want `top`.
-- **`shouldFlip`** `boolean` (default: `true`) — Whether the popover flips when overflowing.
-- **`overlayOffset`** `number` (default: `8`) — Distance between the textarea and the popover.
-- **`containerPadding`** `number` (default: `8`) — Padding between the popover and the viewport edge.
-- **`autoSize`** `boolean` (default: `false`) — Resize to fit content.
-- **`rows`** `number` (default: `3`) — Visible rows.
-- **`maxRows`** `number` (default: `10`) — Max visible rows when `autoSize` is true.
-
-Each option's value is the **literal string to insert**. For commands, set the
-item's `textValue` (and `key`) to the full `/clear` — the slash is part of both
-the active token and the inserted value, so `/cle` becomes `/clear ` with no
-duplication. This decouples insertion from the trigger, so non-command
-autocomplete (e.g. a `@mention` resolving to `@john`) works the same way.
-
-### Base Properties
-
-Supports [Base properties](../../BaseProperties.md).
-
-### Field Properties
-
-Supports all [Field properties](../../FieldProperties.md)
-(`label`, `name`, `isRequired`, `isDisabled`, `isReadOnly`, `validationState`,
-`description`, `rules`, etc.).
-
-### Styling Properties
-
-- **`overlayStyles`** — Styles for the popover overlay.
-- **`listBoxStyles`** — Styles for the inner listbox.
-- **`optionStyles`** — Styles for individual options.
-- **`sectionStyles`** — Styles for section containers.
-- **`headingStyles`** — Styles for section headings.
-
-### Style Properties
-
-These properties allow direct style application without using the `styles` prop:
-
-- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
-- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
-- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
-- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
-- **Color:** `color`, `fill`, `fade`, `image`
-
-## Examples
-
-### Basic usage
-
-```jsx
-<CommandTextArea
-  label="Message"
-  placeholder="Type / to see commands…"
-  onCommand={(key) => console.log('picked', key)}
->
-  <CommandTextArea.Item key="/clear" textValue="/clear">Clear conversation</CommandTextArea.Item>
-  <CommandTextArea.Item key="/help" textValue="/help">Show help</CommandTextArea.Item>
-</CommandTextArea>
-```
-
-### Mention trigger (anywhere in the text)
-
-```jsx
-<CommandTextArea
-  label="Message"
-  triggers={[{ char: '@', atLineStart: false }]}
->
-  <CommandTextArea.Item key="@john" textValue="@john">John Doe</CommandTextArea.Item>
-  <CommandTextArea.Item key="@jane" textValue="@jane">Jane Roe</CommandTextArea.Item>
-</CommandTextArea>
-```
-
-### Data-driven with sections
-
-```jsx
-<CommandTextArea items={commands}>
-  {(item) => <CommandTextArea.Item key={item.key} textValue={item.key}>{item.label}</CommandTextArea.Item>}
-</CommandTextArea>
-```
-
-## Accessibility
-
-### Keyboard Navigation
-
-- `Tab` — Moves focus into / out of the textarea.
-- `ArrowUp` / `ArrowDown` — Move the highlighted option (only while the popover is open; otherwise moves the caret).
-- `Home` / `End` — Jump to the first / last option while open.
-- `Enter` / `Tab` — Insert the highlighted option while open; otherwise insert a newline / submit.
-- `Escape` — Close the popover without changing the text.
-
-### Screen Reader Support
-
-- The textarea is announced as a `combobox` with `aria-autocomplete="list"`.
-- `aria-expanded`, `aria-controls`, and `aria-activedescendant` track the
-  popover and the highlighted option.
-
-## Integration with Forms
-
-This component supports all [Field properties](../../FieldProperties.md) when used within a Form. Its `value` is the full textarea string.
-
-## Related Components
-
-- [TextArea](./TextArea.md) — The base multiline field this builds on.
-- [ComboBox](./ComboBox.md) — Single-value select with search (different semantics: commits a `selectedKey`).
-- [ListBox](./ListBox.md) — The virtual-focus list rendered inside the popover.