@povio/ui 2.2.9-rc.2 → 2.2.9-rc.21

package/dist/components/inputs/Selection/Select/Select.js

@@ -1,9 +1,15 @@
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { StaticInput } from "../../shared/StaticInput.js";
 import { SelectBase } from "../shared/SelectBase.js";
-import { jsx } from "react/jsx-runtime";
+import { getStaticSelectValue } from "../shared/staticSelect.utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useEffect, useRef, useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
+import { Controller, useWatch } from "react-hook-form";
 //#region src/components/inputs/Selection/Select/Select.tsx
-var Select = (props) => {
+function _Select(props) {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -22,6 +28,82 @@ var Select = (props) => {
 		});
 	}
 	return /* @__PURE__ */ jsx(SelectBase, { ...props });
-};
+}
+function Select({ renderStaticInput, ...props }) {
+	const ui = UIConfig.useConfig();
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const [shouldFocus, setShouldFocus] = useState(false);
+	const rootRef = useRef(null);
+	const currentValue = ("formControl" in props && props.formControl ? useWatch({
+		control: props.formControl.control,
+		name: props.formControl.name
+	}) : props.value) ?? props.value;
+	let isFormControlDisabled = false;
+	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
+	if (!renderInput && props.selectionMode !== "multiple" && !!props.showSelectionContent && currentValue != null) setRenderInput(true);
+	if (!renderInput && !!props.customTrigger) setRenderInput(true);
+	useEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		requestAnimationFrame(() => {
+			(rootRef.current?.querySelector("[data-type='select-trigger'], input, button, [tabindex]"))?.focus();
+		});
+		setShouldFocus(false);
+	}, [renderInput, shouldFocus]);
+	if (!renderInput) {
+		const as = props.as ?? ui.input.as;
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		const mode = props.selectionMode ?? ui.select.selectionMode;
+		const { displayValue, isEmpty } = getStaticSelectValue({
+			items: props.items,
+			value: currentValue,
+			selectionMode: mode,
+			initialSelection: props.initialSelection,
+			mapInitialToSelectItem: props.mapInitialToSelectItem,
+			showSelectionContent: props.showSelectionContent,
+			isDisabled,
+			collapseAfter: props.collapseAfter ?? ui.select.collapseAfter,
+			selectedTagsType: props.selectedTagsType ?? ui.select.selectedTagsType
+		});
+		const trailingContent = props.trailingContent || !props.hideDropdownIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [props.trailingContent, !props.hideDropdownIcon ? /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: `size-6 shrink-0 ${isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle"}` }) : void 0] }) : void 0;
+		return /* @__PURE__ */ jsx(StaticInput, {
+			...props,
+			onInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			as,
+			typographySize: "label-1",
+			size: props.size ?? ui.input.size,
+			variant: props.variant ?? ui.input.variant,
+			isHeaderHidden: props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+			hideLabel: props.hideLabel ?? ui.input.hideLabel,
+			isDisabled,
+			className: clsx("w-full", props.containerClassName),
+			inputClassName: clsx(props.className, props.inputClassName),
+			placeholder: props.placeholder,
+			showPlacholderIfFilled: mode !== "single",
+			displayValue,
+			isEmpty,
+			dataAttributes: {
+				dataIsEmpty: isEmpty,
+				dataIsFilled: !isEmpty,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: !isEmpty,
+				dataHasSearch: false
+			},
+			leadingContent: props.leadingContent,
+			trailingContent
+		});
+	}
+	return /* @__PURE__ */ jsx(_Select, {
+		...props,
+		ref: mergeRefs(props.ref, rootRef)
+	});
+}
 //#endregion
 export { Select };

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

@@ -1,4 +1,4 @@
-import { FocusEventHandler, MouseEventHandler, ReactElement, Ref } from 'react';
+import { FocusEventHandler, MouseEventHandler, ReactElement, ReactNode, Ref } from 'react';
 import { AriaButtonProps } from 'react-aria';
 import { Key } from 'react-aria-components';
 import { FormFieldProps } from '../../FormField/FormField';
@@ -14,10 +14,13 @@ export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = Default
     isSearchable?: boolean;
     isClearable?: boolean;
     isClientSearchDisabled?: boolean;
+    ignoreInputValueFiltering?: boolean;
     ignoreTriggerWidth?: boolean;
     items: SelectItem<TKey>[];
     inputClassName?: string;
     containerClassName?: string;
+    leadingContent?: ReactNode;
+    trailingContent?: ReactNode;
     customTrigger?: ReactElement;
     selectedTagsType?: "tags" | "list";
     collapseAfter?: number;

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

@@ -17,10 +17,11 @@ var SelectBase = (dProps) => {
 		isClearable: dProps.isClearable ?? ui.input.isClearable,
 		isSearchable: dProps.isSearchable ?? ui.select.isSearchable,
 		selectedTagsType: dProps.selectedTagsType ?? ui.select.selectedTagsType,
-		ignoreTriggerWidth: dProps.virtualizerOptions || dProps.items.length > 100 ? false : dProps.ignoreTriggerWidth ?? false,
+		ignoreTriggerWidth: dProps.virtualizerOptions || (dProps.totalItems ?? 0) > 100 || dProps.hasLoadMore ? false : dProps.ignoreTriggerWidth ?? false,
 		collapseAfter: dProps.collapseAfter ?? ui.select.collapseAfter,
 		hideSearchIcon: dProps.hideSearchIcon ?? ui.select.hideSearchIcon,
-		fireBlurOnChange: dProps.fireBlurOnChange ?? ui.select.fireBlurOnChange
+		fireBlurOnChange: dProps.fireBlurOnChange ?? ui.select.fireBlurOnChange,
+		isClientSearchDisabled: dProps.ignoreInputValueFiltering ?? dProps.isClientSearchDisabled
 	};
 	const isDesktop = useBreakpoint("md");
 	return /* @__PURE__ */ jsx(SelectContext.Provider, {

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

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

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

@@ -6,6 +6,7 @@ import "./useSelectItems.js";
 import { SelectContext } from "./select.context.js";
 import { SelectInput } from "./SelectInput.js";
 import { SelectListBox } from "./SelectListBox.js";
+import { selectPopoverCva } from "./selectDesktop.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Fragment as Fragment$1, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -13,9 +14,10 @@ import { ComboBox, DialogTrigger, Popover } from "react-aria-components";
 import { useLabel, usePreventScroll } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 //#region src/components/inputs/Selection/shared/SelectDesktop.tsx
-var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
+var SelectDesktop = ({ ref, error, ignoreTriggerWidth, 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, isSearchable, isClearable, isLoading, as, size, collapseAfter, selectedTagsType } = props;
 	const popoverCva = UIStyle.useCva("popover.cva", popover);
+	const selectPopoverCva$1 = UIStyle.useCva("select.popoverCva", selectPopoverCva);
 	const formFieldProps = {
 		error,
 		label,
@@ -113,14 +115,14 @@ var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inp
 					className: clsx("w-full", containerClassName)
 				},
 				as,
+				onMouseEnter,
+				onFocusCapture,
 				ref: wrapperRef,
 				children: [customTrigger ? /* @__PURE__ */ jsx(DialogTrigger, {
 					...dialogTriggerProps,
 					children: /* @__PURE__ */ jsx("div", {
 						...fieldProps,
 						ref: mergeRefs(ref, triggerRef),
-						onMouseEnter,
-						onFocusCapture,
 						children: customTrigger
 					})
 				}) : /* @__PURE__ */ jsx(SelectInput, {
@@ -137,6 +139,8 @@ var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inp
 					isClearable,
 					showSelectionContent,
 					inputClassName,
+					leadingContent,
+					trailingContent,
 					collapseAfter,
 					selectedTagsType,
 					isRequired,
@@ -151,7 +155,7 @@ var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inp
 					triggerRef,
 					isOpen,
 					onOpenChange: setIsOpen,
-					className: "my-4 outline-none",
+					className: selectPopoverCva$1({}),
 					style: { width: !ignoreTriggerWidth ? popoverWidth : void 0 },
 					offset: 0,
 					children: /* @__PURE__ */ jsx(SelectListBox, {

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

@@ -4,12 +4,12 @@ import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
 import { SelectBaseProps } from './SelectBase';
 import { SelectItem } from './select.types';
 import { InputVariantProps } from '../../shared/input.cva';
-interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "onBlur" | "showSelectionContent" | "inputClassName" | "selectedTagsType" | "collapseAfter" | "isRequired" | "isDirty" | "fireBlurOnChange" | "onMouseEnter" | "onFocusCapture"> {
+interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "onBlur" | "showSelectionContent" | "inputClassName" | "selectedTagsType" | "collapseAfter" | "isRequired" | "isDirty" | "fireBlurOnChange" | "leadingContent" | "trailingContent" | "onMouseEnter" | "onFocusCapture"> {
     isInvalid?: boolean;
     className?: string;
     fieldProps?: AriaFieldProps;
     headerProps?: FormFieldHeaderProps;
     onCloseComboBox?: (state: ComboBoxState<SelectItem> | null) => void;
 }
-export declare const SelectInput: ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, onMouseEnter, onFocusCapture, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectInput: ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,7 +4,7 @@ import { Typography } from "../../../text/Typography/Typography.js";
 import "../../../../config/i18n.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
-import { inputBase, inputSize } from "../../shared/input.cva.js";
+import { inputBase, inputClearClass, inputSize } from "../../shared/input.cva.js";
 import { SelectInputTags } from "./SelectInputTags.js";
 import { SelectContext } from "./select.context.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -14,9 +14,10 @@ import { Button, ComboBoxStateContext, Input } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectInput.tsx
-var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, onMouseEnter, onFocusCapture, ...props }) => {
+var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props }) => {
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputClearClassCva = UIStyle.useCva("input.clearClassCva", inputClearClass);
 	const { t } = useTranslation("ui");
 	const state = use(ComboBoxStateContext);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
@@ -101,6 +102,10 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 						...headerProps,
 						labelProps
 					}),
+					leadingContent && /* @__PURE__ */ jsx("div", {
+						className: "ml-input-side-default flex shrink-0 items-center",
+						children: leadingContent
+					}),
 					(showTags || isSearchable) && /* @__PURE__ */ jsxs("div", {
 						className: clsx("flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate", !isSearchable && "pointer-events-none z-1"),
 						children: [showTags && /* @__PURE__ */ jsx(SelectInputTags, {
@@ -138,8 +143,13 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 					onClear();
 					if (fireBlurOnChange) onBlur?.({});
 				},
+				className: inputClearClassCva({ as }),
 				show: showClearButton
 			}),
+			trailingContent && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center",
+				children: trailingContent
+			}),
 			!hideDropdownIcon && /* @__PURE__ */ jsx(Button, {
 				excludeFromTabOrder: true,
 				"aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),

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

@@ -1,9 +1,9 @@
 import { AriaListBoxProps } from 'react-aria';
 import { SelectBaseProps } from './SelectBase';
 import { SelectItem } from './select.types';
-export interface SelectListBoxProps extends Pick<SelectBaseProps, "label" | "newItemRender" | "onLoadMore" | "selectionMode" | "isSearchable" | "virtualizerOptions">, Omit<AriaListBoxProps<SelectItem>, "children" | "aria-label" | "selectionMode" | "items" | "selectedKeys" | "onSelectionChange" | "escapeKeyBehavior" | "shouldSelectOnPressUp" | "label"> {
+export interface SelectListBoxProps extends Pick<SelectBaseProps, "label" | "newItemRender" | "onLoadMore" | "selectionMode" | "isSearchable" | "virtualizerOptions" | "totalItems" | "hasLoadMore">, Omit<AriaListBoxProps<SelectItem>, "children" | "aria-label" | "selectionMode" | "items" | "selectedKeys" | "onSelectionChange" | "escapeKeyBehavior" | "shouldSelectOnPressUp" | "label"> {
     className?: string;
     isScrollable?: boolean;
     onClose?: () => void;
 }
-export declare const SelectListBox: ({ label, selectionMode, isSearchable, isScrollable, virtualizerOptions, newItemRender, onLoadMore, className, onClose, ...props }: SelectListBoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectListBox: ({ label, selectionMode, isSearchable, isScrollable, virtualizerOptions, totalItems, newItemRender, onLoadMore, className, onClose, ...props }: SelectListBoxProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -7,8 +7,8 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { ListBox, ListLayout, Virtualizer } from "react-aria-components";
 //#region src/components/inputs/Selection/shared/SelectListBox.tsx
-var SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, virtualizerOptions, newItemRender, onLoadMore, className, onClose, ...props }) => {
-	const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll } = SelectContext.useSelect();
+var SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, virtualizerOptions, totalItems, newItemRender, onLoadMore, className, onClose, ...props }) => {
+	const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll, hasLoadMore } = SelectContext.useSelect();
 	const onSelectionChange = (value) => {
 		const ids = Array.from(value);
 		if (!isMultiple && ids.length === 0) {
@@ -42,7 +42,7 @@ var SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true,
 			newItemRender
 		}, item.id);
 	};
-	if (virtualizerOptions || listItems.length > 100) return /* @__PURE__ */ jsx(Virtualizer, {
+	if (virtualizerOptions || (totalItems ?? listItems.length) > 100 || hasLoadMore) return /* @__PURE__ */ jsx(Virtualizer, {
 		layout: ListLayout,
 		layoutOptions: virtualizerOptions,
 		children: /* @__PURE__ */ jsx(ListBox, {

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, onMouseEnter, onFocusCapture, ...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,7 +13,7 @@ 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, onMouseEnter, onFocusCapture, ...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,
@@ -57,13 +57,13 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 		as,
 		labelProps,
 		className: clsx("w-full", containerClassName),
+		onMouseEnter,
+		onFocusCapture,
 		children: /* @__PURE__ */ jsxs(DialogTrigger, {
 			...dialogTriggerProps,
 			children: [customTrigger ? /* @__PURE__ */ jsx("div", {
 				...fieldProps,
 				ref,
-				onMouseEnter,
-				onFocusCapture,
 				children: customTrigger
 			}) : /* @__PURE__ */ jsx(SelectInput, {
 				ref,
@@ -81,6 +81,8 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 				onBlur: void 0,
 				fieldProps,
 				headerProps,
+				leadingContent,
+				trailingContent,
 				collapseAfter,
 				selectedTagsType,
 				isRequired,

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">;
+    export const Provider: ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, ignoreInputValueFiltering, 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, children, mapInitialToSelectItem = defaultMapInitialToSelectItem, ...props }) => {
 		const isMultiple = props.selectionMode === "multiple";
 		const initialSelectedItems = useMemo(() => {
 			if (!props.initialSelection) return null;
@@ -42,7 +42,7 @@ 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]);
@@ -84,7 +84,7 @@ var SelectContext;
 			else updateValue(value);
 		}, [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(fieldState.value)?.label) syncFieldState(fieldState.value);
 		}, [allListItems]);
 		const handleInputChange = useCallback((inputValue) => {
 			const newFieldState = {
@@ -144,6 +144,22 @@ var SelectContext;
 			fieldState.value,
 			onChange
 		]);
+		const onBlur = useCallback(() => {
+			if (props.isSearchable && isMultiple && fieldState.searchValue !== "") {
+				const newFieldState = {
+					...fieldState,
+					inputValue: "",
+					searchValue: ""
+				};
+				setFieldState(newFieldState);
+				emitStateChanges(newFieldState);
+				setShowAll(true);
+			}
+		}, [
+			props.isSearchable,
+			isMultiple,
+			fieldState
+		]);
 		const value = useMemo(() => ({
 			fieldState,
 			isOpen,
@@ -154,6 +170,7 @@ var SelectContext;
 			onClear,
 			onSelectAll,
 			onRemove,
+			onBlur,
 			listItems,
 			selectableListItems,
 			selectedItems,
@@ -171,6 +188,7 @@ var SelectContext;
 			onClear,
 			onSelectAll,
 			onRemove,
+			onBlur,
 			listItems,
 			selectableListItems,
 			selectedIds,

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,3 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const selectPopoverCva: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export type SelectPopoverCva = VariantProps<typeof selectPopoverCva>;

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

@@ -0,0 +1,5 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/Selection/shared/selectDesktop.cva.ts
+var selectPopoverCva = cva("my-4 outline-none");
+//#endregion
+export { selectPopoverCva };

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,35 @@
+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 allItems = Array.from(allItemsMap.values());
+	const getItem = (id) => allItems.find((item) => item.id === 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 : selectedItem.label : "",
+		isEmpty: selectedItem == null
+	};
+};
+//#endregion
+export { getStaticSelectValue };

package/dist/components/inputs/Toggle/Toggle.js

@@ -2,7 +2,7 @@ import { UIStyle } from "../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { FormFieldError } from "../FormField/FormFieldError.js";
 import { CheckContent } from "../shared/CheckContent.js";
-import { toggle, toggleTypography } from "./toggle.cva.js";
+import { toggle, toggleContentClassName, toggleTypography } from "./toggle.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Switch } from "react-aria-components";
@@ -13,6 +13,7 @@ var ToggleBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const toggleCva = UIStyle.useCva("toggle.cva", toggle);
 	const toggleTypographyMap = UIStyle.useMapper("toggle.typography", toggleTypography);
+	const toggleContentClassNameMap = UIStyle.useMapper("toggle.contentClassName", toggleContentClassName);
 	const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
 	const formFieldErrorProps = {
 		error,
@@ -32,6 +33,10 @@ var ToggleBase = (props) => {
 				variant,
 				...rest
 			}),
+			contentClassName: toggleContentClassNameMap({
+				variant,
+				...rest
+			}),
 			children
 		})]
 	}), /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })] });

package/dist/components/inputs/Toggle/toggle.cva.d.ts

@@ -8,3 +8,6 @@ export interface ToggleVariantProps extends VariantProps<typeof toggle> {
 export declare const toggleTypography: (props: {
     variant?: "default" | null | undefined;
 }) => TypographyVariantProps | undefined;
+export declare const toggleContentClassName: (props: {
+    variant?: "default" | null | undefined;
+}) => string | undefined;

package/dist/components/inputs/Toggle/toggle.cva.js

@@ -26,5 +26,6 @@ var toggleTypography = compoundMapper({ default: {
 	sizeMobile: "label-1",
 	variant: "default"
 } });
+var toggleContentClassName = compoundMapper({ default: "text-text-default-2" });
 //#endregion
-export { toggle, toggleTypography };
+export { toggle, toggleContentClassName, toggleTypography };

package/dist/components/inputs/shared/CheckContent.d.ts

@@ -3,6 +3,7 @@ import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 interface CheckContentProps {
     typography?: TypographyVariantProps;
     className?: string;
+    contentClassName?: string;
 }
-export declare const CheckContent: ({ children, className, ...props }: PropsWithChildren<CheckContentProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckContent: ({ children, className, contentClassName, ...props }: PropsWithChildren<CheckContentProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/shared/CheckContent.js

@@ -3,15 +3,14 @@ import { typography } from "../../text/Typography/typography.cva.js";
 import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
 //#region src/components/inputs/shared/CheckContent.tsx
-var CheckContent = ({ children, className, ...props }) => {
+var CheckContent = ({ children, className, contentClassName, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx$1(UIStyle.useCva("typography.cva", typography)({
 			size: "label-1",
 			sizeMobile: "label-1",
 			variant: "default",
-			...props.typography,
-			className: "text-text-default-2"
-		}), className),
+			...props.typography
+		}), contentClassName, className),
 		children
 	});
 };