@cube-dev/ui-kit 0.127.3 → 0.129.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-load-data.js","names":[],"sources":["../../../../src/components/content/Tree/use-load-data.ts"],"sourcesContent":["import { useRef, useState } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\n\nimport type { Key } from '@react-types/shared';\nimport type { CubeTreeNodeData, TreeLoadDataNode } from './types';\n\nexport interface UseLoadDataOptions {\n  /**\n   * Map of `key -> node` built from the consumer's `treeData`. Used to\n   * find the node being expanded when `loadData` fires.\n   */\n  nodesByKey: Map<string, CubeTreeNodeData>;\n  loadData?: (node: TreeLoadDataNode) => Promise<void>;\n  /**\n   * Keys that are expanded at mount time (controlled or default).\n   * Seeds `previousExpandedRef` so the first `onExpandedChanged` call\n   * doesn't misidentify them as user-triggered expansions.\n   */\n  initialExpandedKeys?: Iterable<string>;\n}\n\nexport interface LoadDataController {\n  /** Set of keys that are currently waiting on `loadData`. */\n  loadingKeys: Set<string>;\n  /**\n   * Called by `Tree.tsx` whenever the underlying React Stately state's\n   * `expandedKeys` change. We diff against the previous set, and for\n   * each newly-expanded key we trigger `loadData` if appropriate.\n   */\n  onExpandedChanged: (expandedKeys: Iterable<Key>) => void;\n}\n\n/**\n * Tracks which rows are currently fetching their children via `loadData`\n * and exposes a setter for the Tree to call after every expand change.\n *\n * `loadData` is fired exactly once per key per \"first expand\" event:\n *\n * - Skipped if there is no `loadData` callback.\n * - Skipped for leaf nodes (`isLeaf === true`).\n * - Skipped if the node already has `children` (already loaded).\n * - Skipped if a previous fetch for the same key is still in flight.\n *\n * The promise's resolution is awaited only to clear the `loading` mod;\n * the consumer is expected to commit the new children to the controlled\n * `treeData` themselves (matching AntD's pattern).\n */\nexport function useLoadData(opts: UseLoadDataOptions): LoadDataController {\n  const { nodesByKey, loadData, initialExpandedKeys } = opts;\n  const [loadingKeys, setLoadingKeys] = useState<Set<string>>(() => new Set());\n  const previousExpandedRef = useRef<Set<string>>(new Set(initialExpandedKeys));\n  const inFlightRef = useRef<Set<string>>(new Set());\n\n  const onExpandedChanged = useEvent((expandedKeys: Iterable<Key>) => {\n    const next = new Set<string>();\n    for (const k of expandedKeys) next.add(String(k));\n\n    const prev = previousExpandedRef.current;\n    const newlyExpanded: string[] = [];\n    for (const k of next) {\n      if (!prev.has(k)) newlyExpanded.push(k);\n    }\n    previousExpandedRef.current = next;\n\n    if (!loadData || newlyExpanded.length === 0) return;\n\n    const toLoad: string[] = [];\n    for (const key of newlyExpanded) {\n      const node = nodesByKey.get(key);\n      if (!node) continue;\n      if (node.isLeaf) continue;\n      if (node.children && node.children.length > 0) continue;\n      if (inFlightRef.current.has(key)) continue;\n      inFlightRef.current.add(key);\n      toLoad.push(key);\n    }\n\n    if (toLoad.length === 0) return;\n\n    setLoadingKeys((current) => {\n      const updated = new Set(current);\n      for (const k of toLoad) updated.add(k);\n      return updated;\n    });\n\n    for (const key of toLoad) {\n      const loadNode = nodesByKey.get(key);\n      Promise.resolve(loadData({ key, children: loadNode?.children }))\n        .catch((err) => {\n          if (process.env.NODE_ENV !== 'production') {\n            console.error(`[Tree] loadData failed for key \"${key}\":`, err);\n          }\n        })\n        .finally(() => {\n          inFlightRef.current.delete(key);\n          setLoadingKeys((current) => {\n            if (!current.has(key)) return current;\n            const updated = new Set(current);\n            updated.delete(key);\n            return updated;\n          });\n        });\n    }\n  });\n\n  return { loadingKeys, onExpandedChanged };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgDA,SAAgB,YAAY,MAA8C;CACxE,MAAM,EAAE,YAAY,UAAU,wBAAwB;CACtD,MAAM,CAAC,aAAa,kBAAkB,+BAA4B,IAAI,KAAK,CAAC;CAC5E,MAAM,sBAAsB,OAAoB,IAAI,IAAI,oBAAoB,CAAC;CAC7E,MAAM,cAAc,uBAAoB,IAAI,KAAK,CAAC;AAsDlD,QAAO;EAAE;EAAa,mBApDI,UAAU,iBAAgC;GAClE,MAAM,uBAAO,IAAI,KAAa;AAC9B,QAAK,MAAM,KAAK,aAAc,MAAK,IAAI,OAAO,EAAE,CAAC;GAEjD,MAAM,OAAO,oBAAoB;GACjC,MAAM,gBAA0B,EAAE;AAClC,QAAK,MAAM,KAAK,KACd,KAAI,CAAC,KAAK,IAAI,EAAE,CAAE,eAAc,KAAK,EAAE;AAEzC,uBAAoB,UAAU;AAE9B,OAAI,CAAC,YAAY,cAAc,WAAW,EAAG;GAE7C,MAAM,SAAmB,EAAE;AAC3B,QAAK,MAAM,OAAO,eAAe;IAC/B,MAAM,OAAO,WAAW,IAAI,IAAI;AAChC,QAAI,CAAC,KAAM;AACX,QAAI,KAAK,OAAQ;AACjB,QAAI,KAAK,YAAY,KAAK,SAAS,SAAS,EAAG;AAC/C,QAAI,YAAY,QAAQ,IAAI,IAAI,CAAE;AAClC,gBAAY,QAAQ,IAAI,IAAI;AAC5B,WAAO,KAAK,IAAI;;AAGlB,OAAI,OAAO,WAAW,EAAG;AAEzB,mBAAgB,YAAY;IAC1B,MAAM,UAAU,IAAI,IAAI,QAAQ;AAChC,SAAK,MAAM,KAAK,OAAQ,SAAQ,IAAI,EAAE;AACtC,WAAO;KACP;AAEF,QAAK,MAAM,OAAO,QAAQ;IACxB,MAAM,WAAW,WAAW,IAAI,IAAI;AACpC,YAAQ,QAAQ,SAAS;KAAE;KAAK,UAAU,UAAU;KAAU,CAAC,CAAC,CAC7D,OAAO,QAAQ;AAEZ,aAAQ,MAAM,mCAAmC,IAAI,KAAK,IAAI;MAEhE,CACD,cAAc;AACb,iBAAY,QAAQ,OAAO,IAAI;AAC/B,qBAAgB,YAAY;AAC1B,UAAI,CAAC,QAAQ,IAAI,IAAI,CAAE,QAAO;MAC9B,MAAM,UAAU,IAAI,IAAI,QAAQ;AAChC,cAAQ,OAAO,IAAI;AACnB,aAAO;OACP;MACF;;IAEN;EAEuC"}

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.129.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.129.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.129.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.129.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.129.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.129.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.129.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.129.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.129.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.129.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.129.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.129.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.129.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.129.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.129.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.129.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.129.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.129.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.129.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.129.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.129.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.129.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,