@povio/ui 2.3.3 → 3.0.0-rc.1

package/dist/components/inputs/Selection/shared/SelectListBoxSelectionBar.js

@@ -1,27 +1,76 @@
 import "../../../../config/i18n.js";
 import { TextButton } from "../../../buttons/TextButton/TextButton.js";
 import { SelectContext } from "./select.context.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectListBoxSelectionBar.tsx
-var SelectListBoxSelectionBar = ({ className }) => {
+var SelectListBoxSelectionBar = (t0) => {
+	const $ = c(16);
+	const { className } = t0;
 	const { t } = useTranslation("ui");
 	const { onClear, onSelectAll } = SelectContext.useSelect();
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex items-center justify-between border-elevation-outline-default-1 border-b px-4 py-3", className),
-		children: [/* @__PURE__ */ jsx(TextButton, {
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx("flex items-center justify-between border-elevation-outline-default-1 border-b px-4 py-3", className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t) {
+		t2 = t(_temp);
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== onSelectAll || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(TextButton, {
 			type: "button",
 			color: "primary",
 			onPress: onSelectAll,
-			children: t(($) => $.ui.select.selectAll)
-		}), /* @__PURE__ */ jsx(TextButton, {
+			children: t2
+		});
+		$[4] = onSelectAll;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t(_temp2);
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== onClear || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(TextButton, {
 			type: "button",
 			color: "secondary",
 			onPress: onClear,
-			children: t(($) => $.ui.select.clearSelection)
-		})]
-	});
+			children: t4
+		});
+		$[9] = onClear;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t1 || $[13] !== t3 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: t1,
+			children: [t3, t5]
+		});
+		$[12] = t1;
+		$[13] = t3;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	return t6;
 };
+function _temp($) {
+	return $.ui.select.selectAll;
+}
+function _temp2($_0) {
+	return $_0.ui.select.clearSelection;
+}
 //#endregion
 export { SelectListBoxSelectionBar };

package/dist/components/inputs/Selection/shared/SelectMobile.d.ts

@@ -1,5 +1,5 @@
 import { Key } from 'react-aria-components';
 import { SelectBaseProps } from './SelectBase';
 type SelectMobileProps<TKey extends Key = Key> = SelectBaseProps<TKey>;
-export declare const SelectMobile: <TKey extends Key = Key>({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }: SelectMobileProps<TKey>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectMobile: <TKey extends Key = Key>({ ref, error, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }: SelectMobileProps<TKey>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/Selection/shared/SelectMobile.js

@@ -13,8 +13,8 @@ import { useRef } from "react";
 import { DialogTrigger } from "react-aria-components";
 import { useLabel } from "react-aria";
 //#region src/components/inputs/Selection/shared/SelectMobile.tsx
-var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
-	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, as, size, collapseAfter, selectedTagsType } = props;
+var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
+	const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, as, size, collapseAfter, selectedTagsType } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -57,6 +57,8 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 		as,
 		labelProps,
 		className: clsx("group w-full", containerClassName),
+		onMouseEnter,
+		onFocusCapture,
 		children: /* @__PURE__ */ jsxs(DialogTrigger, {
 			...dialogTriggerProps,
 			children: [customTrigger ? /* @__PURE__ */ jsx("div", {
@@ -79,8 +81,12 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 				onBlur: void 0,
 				fieldProps,
 				headerProps,
+				leadingContent,
+				trailingContent,
 				collapseAfter,
-				selectedTagsType
+				selectedTagsType,
+				isRequired,
+				isDirty
 			}), /* @__PURE__ */ jsx(BottomSheet, {
 				isOpen,
 				onOpenChange: handleOpenChange,

package/dist/components/inputs/Selection/shared/StaticSelectTrailingContent.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { InputVariantProps } from '../../shared/input.cva';
+interface StaticSelectTrailingContentProps extends Pick<InputVariantProps, "size"> {
+    trailingContent?: ReactNode;
+    hideDropdownIcon?: boolean;
+    isDisabled?: boolean;
+}
+export declare const StaticSelectTrailingContent: ({ trailingContent, hideDropdownIcon, isDisabled, size, }: StaticSelectTrailingContentProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/inputs/Selection/shared/StaticSelectTrailingContent.js

@@ -0,0 +1,47 @@
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
+import { inputSize } from "../../shared/input.cva.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/components/inputs/Selection/shared/StaticSelectTrailingContent.tsx
+var StaticSelectTrailingContent = (t0) => {
+	const $ = c(10);
+	const { trailingContent, hideDropdownIcon, isDisabled, size } = t0;
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSize);
+	if (!trailingContent && hideDropdownIcon) return null;
+	let t1;
+	if ($[0] !== trailingContent) {
+		t1 = trailingContent && /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 items-center",
+			children: trailingContent
+		});
+		$[0] = trailingContent;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== hideDropdownIcon || $[3] !== inputSizeCva || $[4] !== isDisabled || $[5] !== size) {
+		t2 = !hideDropdownIcon ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			tabIndex: -1,
+			className: clsx("self-stretch border-0! pl-1-5 outline-none", inputSizeCva({ size })),
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: clsx("size-6 shrink-0", isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle") })
+		}) : void 0;
+		$[2] = hideDropdownIcon;
+		$[3] = inputSizeCva;
+		$[4] = isDisabled;
+		$[5] = size;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t1 || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Fragment, { children: [t1, t2] });
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+};
+//#endregion
+export { StaticSelectTrailingContent };

package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts

@@ -0,0 +1,12 @@
+import { UseInfiniteQueryResult, UseQueryResult } from '@tanstack/react-query';
+import { Key } from 'react-aria-components';
+import { SelectItem } from './select.types';
+export type QueryFn<TData = any> = (...args: any[]) => UseQueryResult<TData> | UseInfiniteQueryResult<TData>;
+export type QueryDataType<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>;
+export declare const isInitialSelectionLabelMissing: <TInitialSelectItem>(initialSelection: TInitialSelectItem | TInitialSelectItem[] | null | undefined, mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem) => boolean;
+export declare const shouldEnableQueryForSelection: <TInitialSelectItem, TKey extends Key = Key>({ initialSelection, value, mapInitialToSelectItem, }: {
+    initialSelection: TInitialSelectItem | TInitialSelectItem[] | null | undefined;
+    value: TKey | TKey[] | null | undefined;
+    mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;
+}) => boolean;
+export declare const getQueryItems: <TQueryFn extends QueryFn, TKey extends Key = Key>(data: QueryDataType<TQueryFn> | undefined, queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[]) => SelectItem<TKey>[];

package/dist/components/inputs/Selection/shared/querySelect.utils.js

@@ -0,0 +1,36 @@
+//#region src/components/inputs/Selection/shared/querySelect.utils.ts
+var getDefaultInitialSelectionLabel = (initialSelection) => {
+	if (typeof initialSelection !== "object" || initialSelection === null) return "";
+	if ("label" in initialSelection && typeof initialSelection.label === "string") return initialSelection.label;
+	if ("name" in initialSelection && typeof initialSelection.name === "string") return initialSelection.name;
+	return "";
+};
+var getInitialSelectionItems = (initialSelection) => {
+	return Array.isArray(initialSelection) ? initialSelection : initialSelection != null ? [initialSelection] : [];
+};
+var getInitialSelectionLabel = (initialSelection, mapInitialToSelectItem) => mapInitialToSelectItem?.(initialSelection).label ?? getDefaultInitialSelectionLabel(initialSelection);
+var isInitialSelectionLabelMissing = (initialSelection, mapInitialToSelectItem) => {
+	return getInitialSelectionItems(initialSelection).some((item) => {
+		return getInitialSelectionLabel(item, mapInitialToSelectItem) === "";
+	});
+};
+var shouldEnableQueryForSelection = ({ initialSelection, value, mapInitialToSelectItem }) => {
+	if (isInitialSelectionLabelMissing(initialSelection, mapInitialToSelectItem)) return true;
+	const values = Array.isArray(value) ? value : value != null ? [value] : [];
+	if (values.length === 0) return false;
+	const initialSelections = getInitialSelectionItems(initialSelection);
+	const labeledInitialSelectionIds = new Set(initialSelections.filter((item) => getInitialSelectionLabel(item, mapInitialToSelectItem) !== "").map((item) => mapInitialToSelectItem?.(item).id ?? item.id));
+	return values.some((id) => !labeledInitialSelectionIds.has(id));
+};
+var getQueryItems = (data, queryMap) => {
+	if (!data) return [];
+	if (queryMap) return queryMap(data);
+	if (Array.isArray(data)) return data;
+	if (typeof data === "object" && data !== null) {
+		if ("items" in data && Array.isArray(data.items)) return data.items;
+		if ("pages" in data && Array.isArray(data.pages)) return data.pages.flatMap((page) => page && typeof page === "object" && "items" in page && Array.isArray(page.items) ? page.items : []);
+	}
+	return [];
+};
+//#endregion
+export { getQueryItems, shouldEnableQueryForSelection };

package/dist/components/inputs/Selection/shared/select.context.d.ts

@@ -17,14 +17,15 @@ export declare namespace SelectContext {
         onClear: () => void;
         onSelectAll: () => void;
         onRemove: (val: Key) => void;
+        onBlur: () => void;
         listItems: ExtendedSelectItem[];
         selectableListItems: SelectItem[];
         selectedItems: SelectItem[];
         selectedIds: Key[];
         isMultiple: boolean;
     } & Pick<SelectBaseProps, "onInputChange" | "isLoading" | "hasLoadMore">;
-    export type ProviderProps = GroupedSelectProps & Pick<SelectBaseProps, "items" | "onInputChange" | "onSearchChange" | "showSelectAllOption" | "showNewItemOption" | "newItemMinLength" | "onNewItemOption" | "isLoading" | "hasLoadMore" | "mapInitialToSelectItem" | "isSearchable" | "isClientSearchDisabled">;
-    export const Provider: ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, children, mapInitialToSelectItem, ...props }: PropsWithChildren<ProviderProps>) => import("react/jsx-runtime").JSX.Element;
+    export type ProviderProps = GroupedSelectProps & Pick<SelectBaseProps, "items" | "onInputChange" | "onSearchChange" | "showSelectAllOption" | "showNewItemOption" | "newItemMinLength" | "onNewItemOption" | "isLoading" | "hasLoadMore" | "mapInitialToSelectItem" | "isSearchable" | "isClientSearchDisabled" | "ignoreInputValueFiltering" | "fireBlurOnChange" | "onBlur">;
+    export const Provider: ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, ignoreInputValueFiltering, fireBlurOnChange, onBlur: fieldOnBlur, children, mapInitialToSelectItem, ...props }: PropsWithChildren<ProviderProps>) => import("react/jsx-runtime").JSX.Element;
     export const useSelect: () => Type;
     export {};
 }

package/dist/components/inputs/Selection/shared/select.context.js

@@ -1,5 +1,5 @@
-import { useSelectItems } from "./useSelectItems.js";
 import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
+import { useSelectItems } from "./useSelectItems.js";
 import { jsx } from "react/jsx-runtime";
 import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 //#region src/components/inputs/Selection/shared/select.context.tsx
@@ -10,7 +10,7 @@ var SelectContext;
 		id: item.id,
 		label: item.label ?? item.name ?? ""
 	});
-	_SelectContext.Provider = ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, children, mapInitialToSelectItem = defaultMapInitialToSelectItem, ...props }) => {
+	_SelectContext.Provider = ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, ignoreInputValueFiltering, fireBlurOnChange, onBlur: fieldOnBlur, children, mapInitialToSelectItem = defaultMapInitialToSelectItem, ...props }) => {
 		const isMultiple = props.selectionMode === "multiple";
 		const initialSelectedItems = useMemo(() => {
 			if (!props.initialSelection) return null;
@@ -42,24 +42,31 @@ var SelectContext;
 			newItemMinLength,
 			isLoading,
 			hasLoadMore,
-			isClientSearchDisabled
+			isClientSearchDisabled: ignoreInputValueFiltering ?? isClientSearchDisabled
 		});
-		const selectedItems = useMemo(() => allItems.filter(({ id }) => Array.isArray(fieldState.value) ? fieldState.value.includes(id) : id === fieldState.value), [allItems, fieldState.value]);
-		const selectedIds = useMemo(() => selectedItems.map(({ id }) => id), [selectedItems]);
-		const getItem = useCallback((value) => allItems.find((item) => item && item.id === value) ?? null, [allItems]);
-		const updateValue = useCallback((value) => {
-			if (Array.isArray(value)) valueRef.current = value.map((id) => getItem(id)).filter((item) => item !== null);
-			else valueRef.current = getItem(value);
-		}, [getItem]);
-		const getValueIds = () => Array.isArray(valueRef.current) ? valueRef.current.map(({ id }) => id) : valueRef.current?.id ?? null;
+		const selectedItems = useMemo(() => {
+			const getItem = (id) => allItems.find((item) => item.id === id) ?? null;
+			if (Array.isArray(fieldState.value)) return fieldState.value.map((id_0) => getItem(id_0)).filter((item_0) => item_0 !== null);
+			const selectedItem = fieldState.value != null ? getItem(fieldState.value) : null;
+			return selectedItem ? [selectedItem] : [];
+		}, [allItems, fieldState.value]);
+		const selectedIds = useMemo(() => selectedItems.map(({ id: id_1 }) => id_1), [selectedItems]);
+		const getItem_0 = useCallback((value) => allItems.find((item_1) => item_1 && item_1.id === value) ?? null, [allItems]);
+		const updateValue = useCallback((value_0) => {
+			if (Array.isArray(value_0)) valueRef.current = value_0.map((id_2) => getItem_0(id_2)).filter((item_2) => item_2 !== null);
+			else valueRef.current = getItem_0(value_0);
+		}, [getItem_0]);
+		const getValueIds = () => Array.isArray(valueRef.current) ? valueRef.current.map(({ id: id_3 }) => id_3) : valueRef.current?.id ?? null;
 		const emitStateChanges = useCallback((changes, skipSelectionChange) => {
-			if (JSON.stringify(changes.value) !== JSON.stringify(getValueIds())) {
+			const valueChanged = JSON.stringify(changes.value) !== JSON.stringify(getValueIds());
+			if (valueChanged) {
 				updateValue(changes.value);
 				if (!skipSelectionChange) if (isMultiple) props.onChange?.(changes.value);
 				else props.onChange?.(changes.value);
 			}
 			if (changes.inputValue !== fieldState.inputValue) onInputChange?.(changes.inputValue);
 			if (changes.searchValue !== fieldState.searchValue) onSearchChangeDebounced?.(changes.searchValue);
+			return valueChanged;
 		}, [
 			fieldState,
 			isMultiple,
@@ -68,10 +75,13 @@ var SelectContext;
 			onSearchChangeDebounced,
 			updateValue
 		]);
-		const syncFieldState = (value) => {
+		const triggerBlurOnChange = useCallback(() => {
+			if (fireBlurOnChange) fieldOnBlur?.({});
+		}, [fireBlurOnChange, fieldOnBlur]);
+		const syncFieldState = (value_1) => {
 			const newFieldState = {
-				value,
-				inputValue: isMultiple || Array.isArray(value) ? fieldState.inputValue : getItem(value)?.label ?? "",
+				value: value_1,
+				inputValue: isMultiple || Array.isArray(value_1) ? fieldState.inputValue : getItem_0(value_1)?.label ?? "",
 				searchValue: ""
 			};
 			setFieldState(newFieldState);
@@ -79,21 +89,21 @@ var SelectContext;
 			if (!isMultiple) setShowAll(true);
 		};
 		useEffect(() => {
-			const value = props.value ?? null;
-			if (JSON.stringify(value) !== JSON.stringify(fieldState.value)) syncFieldState(value);
-			else updateValue(value);
+			const value_2 = props.value ?? null;
+			if (JSON.stringify(value_2) !== JSON.stringify(fieldState.value)) syncFieldState(value_2);
+			else updateValue(value_2);
 		}, [props.value]);
 		useEffect(() => {
-			if (!isMultiple && fieldState.value && fieldState.inputValue === "" && getItem(fieldState.value)?.label) syncFieldState(fieldState.value);
+			if (!isMultiple && props.value !== null && props.value !== void 0 && fieldState.value !== null && fieldState.value !== void 0 && fieldState.inputValue === "" && getItem_0(fieldState.value)?.label) syncFieldState(fieldState.value);
 		}, [allListItems]);
 		const handleInputChange = useCallback((inputValue) => {
-			const newFieldState = {
+			const newFieldState_0 = {
 				value: isMultiple || inputValue !== "" ? fieldState.value : null,
 				inputValue,
 				searchValue: inputValue
 			};
-			setFieldState(newFieldState);
-			emitStateChanges(newFieldState);
+			setFieldState(newFieldState_0);
+			emitStateChanges(newFieldState_0);
 			setShowAll(false);
 			if (!isOpen && inputValue !== "" && props.isSearchable) setIsOpen(true);
 		}, [
@@ -101,16 +111,16 @@ var SelectContext;
 			fieldState.value,
 			isMultiple
 		]);
-		const onChange = useCallback((value) => {
-			if (value === "new-item-id") onNewItemOption?.(fieldState.inputValue);
+		const onChange = useCallback((value_3) => {
+			if (value_3 === "new-item-id") onNewItemOption?.(fieldState.inputValue);
 			else {
-				const newFieldState = {
-					value,
-					inputValue: isMultiple || Array.isArray(value) ? "" : getItem(value)?.label ?? "",
+				const newFieldState_1 = {
+					value: value_3,
+					inputValue: isMultiple || Array.isArray(value_3) ? "" : getItem_0(value_3)?.label ?? "",
 					searchValue: ""
 				};
-				setFieldState(newFieldState);
-				emitStateChanges(newFieldState);
+				setFieldState(newFieldState_1);
+				if (emitStateChanges(newFieldState_1)) triggerBlurOnChange();
 			}
 			if (!isMultiple) {
 				setIsOpen(false);
@@ -120,8 +130,9 @@ var SelectContext;
 			emitStateChanges,
 			onNewItemOption,
 			fieldState.inputValue,
-			getItem,
-			isMultiple
+			getItem_0,
+			isMultiple,
+			triggerBlurOnChange
 		]);
 		const onClear = useCallback(() => {
 			if (!valueRef.current || Array.isArray(valueRef.current) && valueRef.current.length === 0) {
@@ -135,16 +146,34 @@ var SelectContext;
 			else onChange(null);
 		}, [isMultiple, onChange]);
 		const onSelectAll = useCallback(() => {
-			onChange(selectableListItems.map(({ id }) => id));
+			onChange(selectableListItems.map(({ id: id_4 }) => id_4));
 		}, [selectableListItems, onChange]);
-		const onRemove = useCallback((value) => {
-			if (isMultiple && Array.isArray(fieldState.value)) onChange(fieldState.value.filter((id) => id !== value));
+		const onRemove = useCallback((value_4) => {
+			if (isMultiple && Array.isArray(fieldState.value)) onChange(fieldState.value.filter((id_5) => id_5 !== value_4));
 		}, [
 			isMultiple,
 			fieldState.value,
 			onChange
 		]);
-		const value = useMemo(() => ({
+		const onBlur = useCallback(() => {
+			if (props.isSearchable && isMultiple && fieldState.searchValue !== "") {
+				const newFieldState_2 = {
+					...fieldState,
+					inputValue: "",
+					searchValue: ""
+				};
+				setFieldState(newFieldState_2);
+				emitStateChanges(newFieldState_2);
+				setShowAll(true);
+			}
+			fieldOnBlur?.({});
+		}, [
+			props.isSearchable,
+			isMultiple,
+			fieldState,
+			fieldOnBlur
+		]);
+		const value_5 = useMemo(() => ({
 			fieldState,
 			isOpen,
 			setIsOpen,
@@ -154,6 +183,7 @@ var SelectContext;
 			onClear,
 			onSelectAll,
 			onRemove,
+			onBlur,
 			listItems,
 			selectableListItems,
 			selectedItems,
@@ -171,6 +201,7 @@ var SelectContext;
 			onClear,
 			onSelectAll,
 			onRemove,
+			onBlur,
 			listItems,
 			selectableListItems,
 			selectedIds,
@@ -180,7 +211,7 @@ var SelectContext;
 			hasLoadMore
 		]);
 		return /* @__PURE__ */ jsx(Context.Provider, {
-			value,
+			value: value_5,
 			children
 		});
 	};

package/dist/components/inputs/Selection/shared/select.types.d.ts

@@ -1,11 +1,11 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
 import { ControlProps } from '../../shared/form.types';
 export interface SelectItem<TKey extends Key = Key> {
     id: TKey;
     label: string;
-    content?: string | ReactElement;
+    content?: string | ReactNode;
     isDisabled?: boolean;
 }
 export interface ExtendedSelectItem<TKey extends Key = Key> extends SelectItem<TKey> {
@@ -54,6 +54,7 @@ export interface SelectAsyncProps {
     onLoadMore?: () => void;
 }
 export interface SelectVirtualizationProps {
+    totalItems?: number;
     virtualizerOptions?: {
         rowHeight?: number;
         estimatedRowHeight?: number;

package/dist/components/inputs/Selection/shared/selectDesktop.cva.d.ts

@@ -0,0 +1,10 @@
+import { UIOverrides } from '../../../../config/uiOverrides.context';
+export declare const selectPopoverDefinition: {
+    base: string[];
+    config?: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export declare const selectPopoverCva: {
+    base: string[];
+    config?: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export type SelectPopoverCva = UIOverrides.VariantProps<NonNullable<typeof selectPopoverDefinition.config>>;

package/dist/components/inputs/Selection/shared/selectDesktop.cva.js

@@ -0,0 +1,4 @@
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
+var selectPopoverCva = UIOverrides.defineConfig({ base: ["my-4 outline-none"] });
+//#endregion
+export { selectPopoverCva };

package/dist/components/inputs/Selection/shared/selectInput.cva.d.ts

@@ -0,0 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const selectInputTagsContentWrapperCva: (props?: ({
+    isSearchable?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type SelectInputTagsContentWrapperCva = VariantProps<typeof selectInputTagsContentWrapperCva>;

package/dist/components/inputs/Selection/shared/selectInput.cva.js

@@ -0,0 +1,5 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/Selection/shared/selectInput.cva.ts
+var selectInputTagsContentWrapperCva = cva("flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate", { variants: { isSearchable: { false: "pointer-events-none z-1" } } });
+//#endregion
+export { selectInputTagsContentWrapperCva };

package/dist/components/inputs/Selection/shared/selectItem.cva.d.ts

@@ -1,6 +1,16 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const selectListBoxItemCva: (props?: ({
-    isSingle?: boolean | null | undefined;
-    isNewItem?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type SelectListBoxItemCva = VariantProps<typeof selectListBoxItemCva>;
+import { UIOverrides } from '../../../../config/uiOverrides.context';
+export declare const selectListBoxItemDefinition: {
+    base: string[];
+    config: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly isSingle: {
+            readonly true: "selected:bg-interactive-contained-primary-idle selected:text-interactive-contained-primary-on-idle";
+        };
+        readonly isNewItem: {
+            readonly true: "text-interactive-text-primary-idle";
+            readonly false: "text-interactive-text-secondary-idle";
+        };
+    }>;
+};
+export type SelectListBoxItemConfig = NonNullable<typeof selectListBoxItemDefinition.config>;
+export interface SelectListBoxItemCva extends UIOverrides.VariantProps<SelectListBoxItemConfig> {
+}

package/dist/components/inputs/Selection/shared/selectItem.cva.js

@@ -1,21 +1,24 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 //#region src/components/inputs/Selection/shared/selectItem.cva.ts
-var selectListBoxItemCva = cva([
-	"group flex cursor-pointer items-center gap-2 px-list-side-item-left py-list-height-item",
-	"border-b border-b-elevation-outline-default-1 outline-none",
-	"font-labels-default text-label-2",
-	"hover:text-interactive-text-secondary-hover",
-	"focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted",
-	"disabled:cursor-default disabled:text-interactive-text-secondary-disabled"
-], {
-	variants: {
-		isSingle: { true: "selected:bg-interactive-contained-primary-idle selected:text-interactive-contained-primary-on-idle" },
-		isNewItem: {
-			true: "text-interactive-text-primary-idle",
-			false: "text-interactive-text-secondary-idle"
-		}
-	},
-	defaultVariants: { isNewItem: false }
+var selectListBoxItemDefinition = UIOverrides.defineConfig({
+	base: [
+		"group flex cursor-pointer items-center gap-2 px-list-side-item-left py-list-height-item",
+		"border-b border-b-elevation-outline-default-1 outline-none",
+		"font-labels-default text-label-2",
+		"hover:text-interactive-text-secondary-hover",
+		"focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted",
+		"disabled:cursor-default disabled:text-interactive-text-secondary-disabled"
+	],
+	config: {
+		variants: {
+			isSingle: { true: "selected:bg-interactive-contained-primary-idle selected:text-interactive-contained-primary-on-idle" },
+			isNewItem: {
+				true: "text-interactive-text-primary-idle",
+				false: "text-interactive-text-secondary-idle"
+			}
+		},
+		defaultVariants: { isNewItem: false }
+	}
 });
 //#endregion
-export { selectListBoxItemCva };
+export { selectListBoxItemDefinition };

package/dist/components/inputs/Selection/shared/staticSelect.utils.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { Key } from 'react-aria-components';
+import { SelectBaseProps } from './SelectBase';
+import { DefaultInitialSelectItem, SelectItem } from './select.types';
+interface GetStaticSelectValueOptions<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> {
+    items: SelectItem<TKey>[];
+    value: TKey | TKey[] | null | undefined;
+    selectionMode: SelectBaseProps<TKey>["selectionMode"];
+    initialSelection?: TInitialSelectItem | TInitialSelectItem[] | null;
+    mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;
+    showSelectionContent?: boolean;
+    isDisabled?: boolean;
+    collapseAfter?: SelectBaseProps<TKey>["collapseAfter"];
+    selectedTagsType?: SelectBaseProps<TKey>["selectedTagsType"];
+}
+interface StaticSelectValueResult<TKey extends Key = Key> {
+    selectedItem: SelectItem<TKey> | null;
+    selectedItems: SelectItem<TKey>[];
+    displayValue: ReactNode;
+    isEmpty: boolean;
+}
+export declare const getStaticSelectValue: <TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>({ items, value, selectionMode, initialSelection, mapInitialToSelectItem, showSelectionContent, isDisabled, collapseAfter, selectedTagsType, }: GetStaticSelectValueOptions<TKey, TInitialSelectItem>) => StaticSelectValueResult<TKey>;
+export {};

package/dist/components/inputs/Selection/shared/staticSelect.utils.js

@@ -0,0 +1,37 @@
+import { SelectInputTags } from "./SelectInputTags.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/inputs/Selection/shared/staticSelect.utils.tsx
+var getStaticSelectValue = ({ items, value, selectionMode, initialSelection, mapInitialToSelectItem = ((item) => ({
+	id: item.id,
+	label: item.label ?? item.name ?? ""
+})), showSelectionContent, isDisabled, collapseAfter, selectedTagsType }) => {
+	const initialSelectedItems = initialSelection ? (Array.isArray(initialSelection) ? initialSelection : [initialSelection]).map((item) => mapInitialToSelectItem(item)) : [];
+	const allItemsMap = /* @__PURE__ */ new Map();
+	[...initialSelectedItems, ...items].forEach((item) => allItemsMap.set(item.id, item));
+	const getItem = (id) => allItemsMap.get(id) ?? null;
+	const selectedItems = Array.isArray(value) ? value.map((id) => getItem(id)).filter((item) => item != null) : [];
+	const selectedItem = !Array.isArray(value) && value != null ? getItem(value) : null;
+	if (selectionMode === "multiple") return {
+		selectedItem,
+		selectedItems,
+		displayValue: selectedItems.length > 0 ? /* @__PURE__ */ jsx(SelectInputTags, {
+			selectedItems,
+			isDisabled,
+			collapseAfter,
+			selectedTagsType,
+			onRemove: () => void 0
+		}) : "",
+		isEmpty: selectedItems.length === 0
+	};
+	return {
+		selectedItem,
+		selectedItems,
+		displayValue: selectedItem != null ? showSelectionContent && selectedItem.content ? selectedItem.content : /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1 truncate",
+			children: selectedItem.label
+		}) : "",
+		isEmpty: selectedItem == null
+	};
+};
+//#endregion
+export { getStaticSelectValue };