@cube-dev/ui-kit 0.184.0 → 0.185.1

package/dist/components/data/TableBase/use-table-columns.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 
 //#region src/components/data/TableBase/use-table-columns.ts

package/dist/components/data/TableBase/use-table-search.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useDebouncedValue } from "../../../_internal/hooks/use-debounced-value.js";
 import { getColumnText } from "./use-table-columns.js";

package/dist/components/data/TableBase/use-table-selection.js

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

package/dist/components/data/TableBase/use-table-sort.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { getColumnText, getColumnValue } from "./use-table-columns.js";
 import { c } from "react-compiler-runtime";

package/dist/components/data/TableBase/use-table-sorts.js

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

package/dist/components/data/TableBase/use-table-storage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { useCallback, useRef, useState } from "react";
 
 //#region src/components/data/TableBase/use-table-storage.ts

package/dist/components/data/TableBase/use-table-tree-state.js

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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/Checkbox/CheckboxGroup.js

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

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

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

package/dist/components/fields/ColorInput/ColorInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";

package/dist/components/fields/ColorPicker/ColorPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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/ColorSwatch/ColorSwatch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { parseColor, toHex } from "../color/color.js";
 import { c } from "react-compiler-runtime";

package/dist/components/fields/ColorSwatchGroup/ColorSwatchGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -15,6 +15,7 @@ import { getValidationMods } from "../../form/validation/resolve-validation-prop
 import { getValidationIcon } from "../../form/validation/ValidationIndicator.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.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 { ListBoxPopover } from "../ListBoxPopover/ListBoxPopover.js";
 import { useCompositeFocus } from "../ListBoxPopover/useCompositeFocus.js";
@@ -140,10 +141,10 @@ function _temp() {
 	return true;
 }
 function useComboBoxKeyboard(t0) {
-	const $ = c(16);
-	const { isPopoverOpen, listStateRef, hasResults, allowsCustomValue, effectiveInputValue, isClearable, onSelectionChange, onClearValue, onOpenPopover, onClosePopover, inputRef, setIsFilterActive, onKeyDown } = t0;
+	const $ = c(17);
+	const { isPopoverOpen, listStateRef, hasResults, allowsCustomValue, effectiveInputValue, isClearable, onSelectionChange, onClearValue, onOpenPopover, onClosePopover, inputRef, setIsFilterActive, onVirtualFocus, onKeyDown } = t0;
 	let t1;
-	if ($[0] !== allowsCustomValue || $[1] !== effectiveInputValue || $[2] !== hasResults || $[3] !== inputRef || $[4] !== isClearable || $[5] !== isPopoverOpen || $[6] !== listStateRef || $[7] !== onClearValue || $[8] !== onClosePopover || $[9] !== onKeyDown || $[10] !== onOpenPopover || $[11] !== onSelectionChange || $[12] !== setIsFilterActive) {
+	if ($[0] !== allowsCustomValue || $[1] !== effectiveInputValue || $[2] !== hasResults || $[3] !== inputRef || $[4] !== isClearable || $[5] !== isPopoverOpen || $[6] !== listStateRef || $[7] !== onClearValue || $[8] !== onClosePopover || $[9] !== onKeyDown || $[10] !== onOpenPopover || $[11] !== onSelectionChange || $[12] !== onVirtualFocus || $[13] !== setIsFilterActive) {
 		t1 = { onKeyDown: (e) => {
 			onKeyDown?.(e);
 			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
@@ -159,6 +160,7 @@ function useComboBoxKeyboard(t0) {
 				if (nextKey != null) {
 					markKeyboardFocus(listState);
 					listState.selectionManager.setFocusedKey(nextKey);
+					onVirtualFocus(nextKey);
 				}
 			} else if (e.key === "Enter") {
 				if (isPopoverOpen) {
@@ -208,6 +210,7 @@ function useComboBoxKeyboard(t0) {
 					if (targetKey != null) {
 						markKeyboardFocus(listState_1);
 						listState_1.selectionManager.setFocusedKey(targetKey);
+						onVirtualFocus(targetKey);
 					}
 				}
 			}
@@ -224,46 +227,80 @@ function useComboBoxKeyboard(t0) {
 		$[9] = onKeyDown;
 		$[10] = onOpenPopover;
 		$[11] = onSelectionChange;
-		$[12] = setIsFilterActive;
-		$[13] = t1;
-	} else t1 = $[13];
+		$[12] = onVirtualFocus;
+		$[13] = setIsFilterActive;
+		$[14] = t1;
+	} else t1 = $[14];
 	const { keyboardProps } = useKeyboard(t1);
 	let t2;
-	if ($[14] !== keyboardProps) {
+	if ($[15] !== keyboardProps) {
 		t2 = { keyboardProps };
-		$[14] = keyboardProps;
-		$[15] = t2;
-	} else t2 = $[15];
+		$[15] = keyboardProps;
+		$[16] = t2;
+	} else t2 = $[16];
 	return t2;
 }
-const ComboBoxInput = forwardRef(function ComboBoxInput({ qa, inputRef, id, value, placeholder, isDisabled, isReadOnly, isRequired, autoFocus, autoComplete, size, mods, inputStyles, keyboardProps, focusProps, onChange, onFocus, isPopoverOpen, hasResults, comboBoxId, listStateRef }, ref) {
-	return /* @__PURE__ */ jsx(InputElement, {
-		ref: useCombinedRefs(ref, inputRef),
-		qa,
-		id,
-		type: "text",
-		value,
-		placeholder,
-		isDisabled,
-		readOnly: isReadOnly,
-		autoFocus,
-		autoComplete,
-		"data-autofocus": autoFocus ? "" : void 0,
-		onChange,
-		onFocus,
-		onBlur: focusProps.onBlur,
-		...keyboardProps,
-		styles: inputStyles,
-		mods,
-		"data-size": size,
-		"data-input-type": "combobox",
-		role: "combobox",
-		"aria-required": isRequired || void 0,
-		"aria-expanded": isPopoverOpen && hasResults,
-		"aria-haspopup": "listbox",
-		"aria-controls": isPopoverOpen && hasResults ? `ComboBoxListBox-${comboBoxId}` : void 0,
-		"aria-activedescendant": isPopoverOpen && hasResults && listStateRef.current?.selectionManager.focusedKey != null ? `ListBoxItem-${listStateRef.current?.selectionManager.focusedKey}` : void 0
-	});
+const ComboBoxInput = forwardRef(function ComboBoxInput(t0, ref) {
+	const $ = c(22);
+	const { qa, inputRef, id, value, placeholder, isDisabled, isReadOnly, isRequired, autoFocus, autoComplete, size, mods, inputStyles, keyboardProps, focusProps, onChange, onFocus, isPopoverOpen, hasResults, comboBoxId, activeDescendant } = t0;
+	const combinedRef = useCombinedRefs(ref, inputRef);
+	const t1 = autoFocus ? "" : void 0;
+	const t2 = isRequired || void 0;
+	const t3 = isPopoverOpen && hasResults;
+	const t4 = isPopoverOpen && hasResults ? `ComboBoxListBox-${comboBoxId}` : void 0;
+	let t5;
+	if ($[0] !== activeDescendant || $[1] !== autoComplete || $[2] !== autoFocus || $[3] !== combinedRef || $[4] !== focusProps.onBlur || $[5] !== id || $[6] !== inputStyles || $[7] !== isDisabled || $[8] !== isReadOnly || $[9] !== keyboardProps || $[10] !== mods || $[11] !== onChange || $[12] !== onFocus || $[13] !== placeholder || $[14] !== qa || $[15] !== size || $[16] !== t1 || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== value) {
+		t5 = /* @__PURE__ */ jsx(InputElement, {
+			ref: combinedRef,
+			qa,
+			id,
+			type: "text",
+			value,
+			placeholder,
+			isDisabled,
+			readOnly: isReadOnly,
+			autoFocus,
+			autoComplete,
+			"data-autofocus": t1,
+			onChange,
+			onFocus,
+			onBlur: focusProps.onBlur,
+			...keyboardProps,
+			styles: inputStyles,
+			mods,
+			"data-size": size,
+			"data-input-type": "combobox",
+			role: "combobox",
+			"aria-required": t2,
+			"aria-expanded": t3,
+			"aria-haspopup": "listbox",
+			"aria-controls": t4,
+			"aria-activedescendant": activeDescendant
+		});
+		$[0] = activeDescendant;
+		$[1] = autoComplete;
+		$[2] = autoFocus;
+		$[3] = combinedRef;
+		$[4] = focusProps.onBlur;
+		$[5] = id;
+		$[6] = inputStyles;
+		$[7] = isDisabled;
+		$[8] = isReadOnly;
+		$[9] = keyboardProps;
+		$[10] = mods;
+		$[11] = onChange;
+		$[12] = onFocus;
+		$[13] = placeholder;
+		$[14] = qa;
+		$[15] = size;
+		$[16] = t1;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = value;
+		$[21] = t5;
+	} else t5 = $[21];
+	return t5;
 });
 const ComboBox = forwardRef(function ComboBox(props, ref) {
 	props = useFieldProps(props, { valuePropsMapper: ({ value, onChange }) => {
@@ -465,6 +502,7 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 	});
 	const listStateRef = useRef(null);
 	const focusInitAttemptsRef = useRef(0);
+	const [activeOptionKey, setActiveOptionKey] = useState(null);
 	const getItemLabel = useCallback((key_1) => {
 		return (localCollectionState?.collection?.getItem(key_1))?.textValue || String(key_1);
 	}, [localCollectionState?.collection]);
@@ -582,6 +620,7 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 		onClosePopover: () => setIsPopoverOpen(false),
 		inputRef,
 		setIsFilterActive,
+		onVirtualFocus: setActiveOptionKey,
 		onKeyDown
 	});
 	if (icon) {
@@ -637,13 +676,21 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 		let needsRefocus = false;
 		if (currentFocusedKey == null) needsRefocus = true;
 		else if (!(collection.getItem(currentFocusedKey) != null)) needsRefocus = true;
-		if (needsRefocus) {
+		if (!needsRefocus) setActiveOptionKey(currentFocusedKey);
+		else {
 			let keyToFocus = null;
 			if (effectiveSelectedKey != null && collection.getItem(effectiveSelectedKey) != null) keyToFocus = effectiveSelectedKey;
 			else keyToFocus = collectFirstKey();
-			if (keyToFocus != null) selectionManager.setFocusedKey(keyToFocus);
+			if (keyToFocus != null) {
+				selectionManager.setFocusedKey(keyToFocus);
+				setActiveOptionKey(keyToFocus);
+			}
 		}
-	}, [shouldShowPopover, effectiveSelectedKey]);
+	}, [
+		shouldShowPopover,
+		effectiveSelectedKey,
+		setActiveOptionKey
+	]);
 	useLayoutEffect$1(() => {
 		if (!shouldShowPopover) return;
 		focusInitAttemptsRef.current = 0;
@@ -689,7 +736,7 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 				isPopoverOpen,
 				hasResults,
 				comboBoxId,
-				listStateRef,
+				activeDescendant: shouldShowPopover && activeOptionKey != null ? getListBoxOptionId(`ComboBoxListBox-${comboBoxId}`, activeOptionKey) : void 0,
 				onChange: handleInputChange,
 				onFocus: handleInputFocus
 			}),