@cube-dev/ui-kit 0.127.3 → 0.128.0

package/dist/components/content/Placeholder/Placeholder.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, keyframes, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/PrismCode/PrismCode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { RendererPrism, ensureYamlSqlExtensions } from "./prismSetup.js";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/PrismCode/prismSetup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { Prism as RendererPrism } from "prism-react-renderer";
 
 //#region src/components/content/PrismCode/prismSetup.tsx

package/dist/components/content/PrismDiffCode/PrismDiffCode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { _PrismCode } from "../PrismCode/PrismCode.js";
 import { jsx } from "react/jsx-runtime";
 import { diffLines } from "diff";

package/dist/components/content/Result/Result.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";

package/dist/components/content/Skeleton/Skeleton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { Grid } from "../../layout/Grid.js";
 import { Flow } from "../../layout/Flow.js";

package/dist/components/content/Tag/Tag.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Text.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/TextItem/TextItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { TEXT_PROP_MAP, _Text } from "../Text.js";
 import { highlightText } from "../highlightText.js";

package/dist/components/content/Title.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { TEXT_PROP_MAP } from "./Text.js";

package/dist/components/content/highlightText.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.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.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.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.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.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.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.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.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { createContext } from "react";
 
 //#region src/components/fields/Checkbox/context.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.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";

package/dist/components/fields/DatePicker/DateInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.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/DatePicker/DateInputBase.js

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

package/dist/components/fields/DatePicker/DatePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.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/DatePicker/DatePickerButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/fields/DatePicker/DatePickerElement.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
 

package/dist/components/fields/DatePicker/DatePickerInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

package/dist/components/fields/DatePicker/DatePickerSegment.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/DateRangePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.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/DatePicker/DateRangeSeparatedPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.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/DatePicker/TimeInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.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/DatePicker/intl.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 //#region src/components/fields/DatePicker/intl.ts
 const dateMessages = {
 	time: "Time",

package/dist/components/fields/DatePicker/parseDate.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { parseAbsolute } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/parseDate.ts

package/dist/components/fields/DatePicker/props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 //#region src/components/fields/DatePicker/props.ts
 const DEFAULT_DATE_PROPS = {
 	granularity: "day",

package/dist/components/fields/DatePicker/utils.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { useImperativeHandle, useRef } from "react";
 import { createDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";

package/dist/components/fields/FileInput/FileInput.js

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

package/dist/components/fields/FilterListBox/FilterListBox.d.ts

@@ -20,12 +20,14 @@ interface CubeFilterListBoxProps<T> extends Omit<CubeListBoxProps<T>, 'filter'>,
    * Pass `false` to disable internal filtering completely (useful for external filtering).
    */
   filter?: FilterFn | false;
-  /** Custom label to display when no results are found after filtering */
+  /** Label shown when the list is empty. When provided, overrides both the "No results found" and "No items" defaults. */
   emptyLabel?: ReactNode;
   /** Custom styles for the search input */
   searchInputStyles?: Styles;
   /** Whether the FilterListBox is in loading state (shows loading icon in search input) */
   isLoading?: boolean;
+  /** Whether items are currently loading. Shows a loading icon in the search input suffix. */
+  isLoadingItems?: boolean;
   /** Ref for accessing the search input element */
   searchInputRef?: RefObject<HTMLInputElement | null>;
   /** Whether to allow entering custom values that are not present in the predefined options */

package/dist/components/fields/FilterListBox/FilterListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.127.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -66,7 +66,9 @@ const SearchInputElement = tasty({
 		fill: "#clear",
 		padding: {
 			"": ".5x 1.5x",
-			prefix: "0 1.5x 0 .5x"
+			prefix: "0 1.5x 0 .5x",
+			suffix: ".5x .5x .5x 1.5x",
+			"prefix & suffix": "0 .5x 0 .5x"
 		}
 	}
 });
@@ -90,7 +92,7 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 		};
 		return fieldProps;
 	} });
-	let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, searchPlaceholder = "Search...", autoFocus, filter, mods: externalMods, emptyLabel, searchInputStyles, listStyles, optionStyles, sectionStyles, headingStyles, searchInputRef, listRef, message, description, styles, focusOnHover, shouldFocusWrap, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange: externalOnSelectionChange, allowsCustomValue = false, showSelectAll, selectAllLabel, header, footer, size = "medium", headerStyles, footerStyles, listBoxStyles, items, children: renderChildren, onEscape, isCheckable, onOptionClick, selectionMode = "single", allValueProps, customValueProps, newCustomValueProps, searchValue: controlledSearchValue, onSearchChange, _internalCollection, form, ...otherProps } = props;
+	let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, isLoadingItems, searchPlaceholder = "Search...", autoFocus, filter, mods: externalMods, emptyLabel, searchInputStyles, listStyles, optionStyles, sectionStyles, headingStyles, searchInputRef, listRef, message, description, styles, focusOnHover, shouldFocusWrap, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange: externalOnSelectionChange, allowsCustomValue = false, showSelectAll, selectAllLabel, header, footer, size = "medium", headerStyles, footerStyles, listBoxStyles, items, children: renderChildren, onEscape, isCheckable, onOptionClick, selectionMode = "single", allValueProps, customValueProps, newCustomValueProps, searchValue: controlledSearchValue, onSearchChange, _internalCollection, form, ...otherProps } = props;
 	let children = renderChildren;
 	const renderFn = renderChildren;
 	if (items && typeof renderFn === "function") try {
@@ -111,6 +113,10 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 		return keys;
 	}, [localCollectionState.collection]);
 	const [customKeys, setCustomKeys] = useState(/* @__PURE__ */ new Set());
+	const [internalSearchValue, setInternalSearchValue] = useState("");
+	const isSearchControlled = controlledSearchValue !== void 0;
+	const searchValue = isSearchControlled ? controlledSearchValue : internalSearchValue;
+	const { contains } = useFilter({ sensitivity: "base" });
 	useEffect(() => {
 		if (!allowsCustomValue) return;
 		const currentSelectedKeys = selectedKeys ? selectedKeys === "all" ? [] : Array.from(selectedKeys).map(String) : selectedKey != null ? [String(selectedKey)] : [];
@@ -125,7 +131,9 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 	]);
 	const mergedChildren = useMemo(() => {
 		if (!children && customKeys.size === 0) return children;
-		const customArray = Array.from(customKeys).map((key) => /* @__PURE__ */ jsx(Item, {
+		const term = searchValue.trim();
+		const localFilter = typeof filter === "function" ? filter : contains;
+		const customArray = Array.from(customKeys).filter((key) => !term || localFilter(key, term)).map((key) => /* @__PURE__ */ jsx(Item, {
 			textValue: key,
 			...customValueProps,
 			children: key
@@ -151,19 +159,27 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 		customKeys,
 		selectionMode,
 		selectedKey,
-		selectedKeys
+		selectedKeys,
+		searchValue,
+		filter,
+		contains,
+		customValueProps
 	]);
 	const innerAriaLabel = props["aria-label"] || (typeof label === "string" ? label : void 0);
-	const [internalSearchValue, setInternalSearchValue] = useState("");
-	const isSearchControlled = controlledSearchValue !== void 0;
-	const searchValue = isSearchControlled ? controlledSearchValue : internalSearchValue;
 	const handleSearchChange = useCallback((value) => {
 		if (!isSearchControlled) setInternalSearchValue(value);
 		onSearchChange?.(value);
 	}, [isSearchControlled, onSearchChange]);
-	const { contains } = useFilter({ sensitivity: "base" });
-	const textFilterFn = useMemo(() => filter === false ? () => true : filter || contains, [filter, contains]);
+	const textFilterFn = useMemo(() => {
+		if (filter === false) return isLoadingItems ? contains : () => true;
+		return filter || contains;
+	}, [
+		filter,
+		contains,
+		isLoadingItems
+	]);
 	const filterFn = useCallback((nodes) => {
+		if (filter === false && !isLoadingItems) return nodes;
 		const term = searchValue.trim();
 		if (!term) return nodes;
 		return [...nodes].map((node) => {
@@ -178,7 +194,12 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 			}
 			return textFilterFn(node.textValue || "", term) ? node : null;
 		}).filter(Boolean);
-	}, [searchValue, textFilterFn]);
+	}, [
+		filter,
+		searchValue,
+		textFilterFn,
+		isLoadingItems
+	]);
 	const enhancedChildren = useMemo(() => {
 		let childrenToProcess = mergedChildren;
 		if (!allowsCustomValue) return childrenToProcess;
@@ -192,13 +213,14 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 			return false;
 		};
 		if (doesTermExist(term)) return childrenToProcess;
+		const localFilter = typeof filter === "function" ? filter : contains;
 		const hasVisibleFilteredItems = (() => {
 			for (const item of localCollectionState.collection) if (item.type === "item") {
 				if (textFilterFn(item.textValue || String(item.rendered || ""), term)) return true;
 			} else if (item.type === "section" && item.childNodes) {
 				for (const child of item.childNodes) if (textFilterFn(child.textValue || String(child.rendered || ""), term)) return true;
 			}
-			for (const customKey of customKeys) if (textFilterFn(customKey, term)) return true;
+			for (const customKey of customKeys) if (localFilter(customKey, term)) return true;
 			return false;
 		})();
 		const customOption = /* @__PURE__ */ jsx(Item, {
@@ -232,7 +254,9 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 		localCollectionState.collection,
 		customValueProps,
 		newCustomValueProps,
-		textFilterFn
+		textFilterFn,
+		filter,
+		contains
 	]);
 	styles = extractStyles(otherProps, PROP_STYLES, styles);
 	ref = useCombinedRefs(ref);
@@ -246,18 +270,44 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 		const listState = listStateRef.current;
 		if (!listState) return;
 		const { selectionManager, collection } = listState;
-		const collectVisibleKeys = (nodes, out) => {
-			for (const node of nodes) if (node.type === "item") out.push(node.key);
-			else if (node.childNodes) collectVisibleKeys(node.childNodes, out);
+		const term = searchValue.trim();
+		let newCustomValueKey = null;
+		let customValueHasMatches = false;
+		const collectVisibleKeys = (nodes, out, inCustomSection = false) => {
+			for (const node of nodes) if (node.type === "item") {
+				out.push(node.key);
+				if (inCustomSection) {
+					newCustomValueKey = node.key;
+					customValueHasMatches = true;
+				}
+			} else if (node.childNodes) {
+				const isCustomSection = inCustomSection || node.key === "__custom_value__";
+				collectVisibleKeys(node.childNodes, out, isCustomSection);
+			}
 		};
 		const visibleKeys = [];
 		collectVisibleKeys(collection, visibleKeys);
+		if (newCustomValueKey == null && allowsCustomValue && term) {
+			for (const node of collection) if (node.type === "item" && String(node.key) === term) {
+				newCustomValueKey = node.key;
+				customValueHasMatches = false;
+				break;
+			}
+		}
 		if (visibleKeys.length === 0) {
 			selectionManager.setFocusedKey(null);
 			return;
 		}
+		const customValueShouldBeFocused = newCustomValueKey != null && !customValueHasMatches;
 		const currentFocused = selectionManager.focusedKey;
-		if (currentFocused != null && visibleKeys.includes(currentFocused)) return;
+		if (currentFocused != null && visibleKeys.includes(currentFocused)) {
+			const currentIsNewCustomValue = newCustomValueKey != null && currentFocused === newCustomValueKey;
+			if (customValueShouldBeFocused) {
+				if (currentIsNewCustomValue) return;
+			} else if (newCustomValueKey != null) {
+				if (!currentIsNewCustomValue) return;
+			} else return;
+		}
 		const findFirstVisibleSelectedKey = () => {
 			if (selectionMode === "single") {
 				if (selectedKey != null) {
@@ -273,9 +323,11 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 			return null;
 		};
 		let keyToFocus = null;
-		if (currentFocused == null) keyToFocus = findFirstVisibleSelectedKey();
-		else keyToFocus = findFirstVisibleSelectedKey();
-		if (keyToFocus == null) keyToFocus = visibleKeys[0];
+		if (customValueShouldBeFocused) keyToFocus = newCustomValueKey;
+		else {
+			keyToFocus = findFirstVisibleSelectedKey();
+			if (keyToFocus == null) keyToFocus = visibleKeys.find((k) => k !== newCustomValueKey) ?? visibleKeys[0];
+		}
 		if (listState.lastFocusSourceRef) listState.lastFocusSourceRef.current = "keyboard";
 		selectionManager.setFocusedKey(keyToFocus);
 	}, [
@@ -283,7 +335,8 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 		enhancedChildren,
 		selectionMode,
 		selectedKey,
-		selectedKeys
+		selectedKeys,
+		allowsCustomValue
 	]);
 	const { keyboardProps } = useKeyboard({ onKeyDown: (e) => {
 		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
@@ -355,8 +408,10 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 		disabled: !!isDisabled,
 		focused: isFocused,
 		loading: !!isLoading,
+		"loading-items": !!isLoadingItems,
 		searchable: true,
 		prefix: !!isLoading,
+		suffix: !!isLoadingItems,
 		...externalMods
 	}), [
 		isInvalid,
@@ -364,6 +419,7 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 		isDisabled,
 		isFocused,
 		isLoading,
+		isLoadingItems,
 		externalMods
 	]);
 	const handleSelectionChange = (selection) => {
@@ -388,36 +444,44 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 	const searchInput = /* @__PURE__ */ jsxs(SearchWrapperElement, {
 		mods,
 		"data-size": size,
-		children: [isLoading && /* @__PURE__ */ jsx("div", {
-			"data-element": "Prefix",
-			children: /* @__PURE__ */ jsx("div", {
-				"data-element": "InputIcon",
-				children: isLoading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : null
+		children: [
+			isLoading && /* @__PURE__ */ jsx("div", {
+				"data-element": "Prefix",
+				children: /* @__PURE__ */ jsx("div", {
+					"data-element": "InputIcon",
+					children: isLoading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : null
+				})
+			}),
+			/* @__PURE__ */ jsx(SearchInputElement, {
+				ref: searchInputRef,
+				qa: qa || "FilterListBox",
+				id,
+				"data-prefix": isLoading ? "" : void 0,
+				"data-suffix": isLoadingItems ? "" : void 0,
+				type: "search",
+				placeholder: searchPlaceholder,
+				value: searchValue,
+				disabled: isDisabled,
+				autoFocus,
+				"data-autofocus": autoFocus ? "" : void 0,
+				styles: searchInputStyles,
+				"data-size": size,
+				"data-input-type": "filterlistbox",
+				role: "combobox",
+				"aria-expanded": "true",
+				"aria-haspopup": "listbox",
+				"aria-activedescendant": listStateRef.current?.selectionManager.focusedKey != null ? `ListBoxItem-${listStateRef.current?.selectionManager.focusedKey}` : void 0,
+				onChange: (e) => {
+					handleSearchChange(e.target.value);
+				},
+				...keyboardProps,
+				...modAttrs(mods)
+			}),
+			isLoadingItems && /* @__PURE__ */ jsx("div", {
+				"data-element": "Suffix",
+				children: /* @__PURE__ */ jsx(LoadingIcon, { "data-element": "InputIcon" })
 			})
-		}), /* @__PURE__ */ jsx(SearchInputElement, {
-			ref: searchInputRef,
-			qa: qa || "FilterListBox",
-			id,
-			"data-prefix": isLoading ? "" : void 0,
-			type: "search",
-			placeholder: searchPlaceholder,
-			value: searchValue,
-			disabled: isDisabled,
-			autoFocus,
-			"data-autofocus": autoFocus ? "" : void 0,
-			styles: searchInputStyles,
-			"data-size": size,
-			"data-input-type": "filterlistbox",
-			role: "combobox",
-			"aria-expanded": "true",
-			"aria-haspopup": "listbox",
-			"aria-activedescendant": listStateRef.current?.selectionManager.focusedKey != null ? `ListBoxItem-${listStateRef.current?.selectionManager.focusedKey}` : void 0,
-			onChange: (e) => {
-				handleSearchChange(e.target.value);
-			},
-			...keyboardProps,
-			...modAttrs(mods)
-		})]
+		]
 	});
 	return wrapWithField(/* @__PURE__ */ jsxs(FilterListBoxWrapperElement, {
 		ref,
@@ -464,7 +528,7 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 				items,
 				allValueProps,
 				filter: filterFn,
-				emptyLabel: searchValue.trim() ? emptyLabel !== void 0 ? emptyLabel : "No results found" : "No items",
+				emptyLabel: emptyLabel !== void 0 ? emptyLabel : searchValue.trim() ? "No results found" : "No items",
 				onSelectionChange: handleSelectionChange,
 				onEscape,
 				onOptionClick: handleOptionClick,