@cube-dev/ui-kit 0.142.10 → 0.143.1

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.10 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.1 | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { Action } from "../../actions/Action/Action.js";
 import { tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.142.10 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.1 | 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.10 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.1 | 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.10 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.1 | 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.10 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.1 | 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.10 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.1 | 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.10 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.1 | 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.10 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.1 | 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.10 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.1 | 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.10 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.143.1 | 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,