@povio/ui 2.2.9-rc.4 → 2.2.9-rc.40

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

@@ -1,53 +1,26 @@
 import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { SelectBase } from "../shared/SelectBase.js";
-import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
+import { Select } from "./Select.js";
 import { getQueryItems } from "../shared/querySelect.utils.js";
+import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
 import { jsx } from "react/jsx-runtime";
-import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Select/QuerySelect.tsx
 var QuerySelect = ({ query, queryParams, queryOptions, queryMap, ...props }) => {
 	const ui = UIConfig.useConfig();
-	const { items, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
+	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
 		query,
 		queryParams,
 		queryOptions,
 		mapItems: (data) => getQueryItems(data, queryMap),
 		initialQueryState: props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled
 	});
-	if ("formControl" in props && props.formControl) {
-		const { formControl, ref, isInitialQueryDisabled: _, ...innerProps } = props;
-		return /* @__PURE__ */ jsx(Controller, {
-			control: formControl.control,
-			name: formControl.name,
-			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(SelectBase, {
-				...innerProps,
-				ref: mergeRefs(ref, field.ref),
-				items,
-				isLoading,
-				hasLoadMore: hasNextPage,
-				onLoadMore: fetchNextPage ? () => void fetchNextPage() : void 0,
-				value: field.value,
-				onChange: (value) => {
-					field.onChange(value);
-					field.onBlur?.();
-				},
-				onBlur: field.onBlur,
-				isDirty,
-				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message,
-				onMouseEnter: handleEnableQuery,
-				onFocusCapture: handleEnableQuery
-			})
-		});
-	}
-	const { isInitialQueryDisabled: _, ...restProps } = props;
-	return /* @__PURE__ */ jsx(SelectBase, {
-		...restProps,
+	const { isInitialQueryDisabled: _, ...selectProps } = props;
+	return /* @__PURE__ */ jsx(Select, {
+		...selectProps,
 		items,
 		isLoading,
+		totalItems,
 		hasLoadMore: hasNextPage,
-		onLoadMore: fetchNextPage ? () => void fetchNextPage() : void 0,
+		onLoadMore: fetchNextPage,
 		onMouseEnter: handleEnableQuery,
 		onFocusCapture: handleEnableQuery
 	});

package/dist/components/inputs/Selection/Select/Select.d.ts

@@ -1,8 +1,12 @@
+import { ReactElement } from 'react';
 import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
 import { SelectBaseProps } from '../shared/SelectBase';
 import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps, SelectAsyncProps } from '../shared/select.types';
 import { OmitDiscriminatedUnion } from '../../../../types/common';
-export type SelectProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "initialSelection" | "mapInitialToSelectItem" | keyof SelectAsyncProps>;
-export type ControlledSelectProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = Omit<SelectProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey>;
-export declare const Select: <TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledSelectProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
+export type SelectProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, keyof SelectAsyncProps> & {
+    renderStaticInput?: boolean;
+};
+export type ControlledSelectProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = Omit<SelectProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem>;
+export declare function Select<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: SelectProps<TKey, TInitialSelectItem>): ReactElement;
+export declare function Select<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledSelectProps<TFieldValues, TKey, TInitialSelectItem>): ReactElement;

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

@@ -1,9 +1,16 @@
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { InputFrame } from "../../Skeleton/InputFrame.js";
+import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.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 { 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 +29,106 @@ var Select = (props) => {
 		});
 	}
 	return /* @__PURE__ */ jsx(SelectBase, { ...props });
-};
+}
+function Select({ renderStaticInput, ...props }) {
+	const ui = UIConfig.useConfig();
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const rootRef = useRef(null);
+	const { renderRealInput, replayStaticInputChange } = useStaticInputHandoff({
+		inputRef: rootRef,
+		renderInput,
+		setRenderInput,
+		getFocusTarget: (root) => root.querySelector("[data-type='select-trigger'], input, button, [tabindex]")
+	});
+	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);
+	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 isMultiple = mode === "multiple";
+		const { selectedItem, 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 isSearchable = props.isSearchable ?? ui.select.isSearchable;
+		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;
+		const placeholder = as === "floating" ? null : props.placeholder;
+		const inputValue = !isMultiple && selectedItem ? selectedItem.label : "";
+		const shouldRenderPlaceholderAfterValue = isMultiple && props.placeholder && !isEmpty;
+		const dataAttributes = {
+			dataIsEmpty: isEmpty,
+			dataIsFilled: !isEmpty,
+			dataIsDirty: props.isDirty,
+			dataIsRequired: props.isRequired,
+			dataIsDisabled: isDisabled,
+			dataDisabled: isDisabled,
+			dataInvalid: !!props.error,
+			dataHasSelection: !isEmpty,
+			dataHasSearch: false
+		};
+		const buttonContent = isMultiple && !isEmpty ? /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }) : isEmpty ? /* @__PURE__ */ jsx("span", {
+			className: "text-text-default-3",
+			children: placeholder
+		}) : displayValue;
+		return /* @__PURE__ */ jsx(InputFrame, {
+			...props,
+			isDisabled,
+			className: clsx("w-full", props.containerClassName),
+			inputClassName: clsx(props.className, props.inputClassName),
+			typographySize: "label-1",
+			labelPlacement: "content-row",
+			dataAttributes,
+			renderStatic: true,
+			onStaticInteract: renderRealInput,
+			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
+				className: "ml-input-side-default flex shrink-0 items-center",
+				children: props.leadingContent
+			}),
+			showClear: false,
+			trailingContent,
+			children: (dataAttributeProps) => /* @__PURE__ */ jsxs(Fragment, { children: [isMultiple && !isEmpty && displayValue, isSearchable ? /* @__PURE__ */ jsx("input", {
+				disabled: isDisabled,
+				tabIndex: -1,
+				value: inputValue,
+				placeholder: shouldRenderPlaceholderAfterValue ? props.placeholder : placeholder ?? void 0,
+				className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", props.inputClassName),
+				onChange: (event) => {
+					props?.onMouseEnter?.({});
+					replayStaticInputChange(event.target.value);
+				},
+				...dataAttributeProps,
+				"data-rac": true
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: isDisabled,
+				tabIndex: -1,
+				"data-type": "select-trigger",
+				className: clsx("w-full truncate bg-transparent text-start outline-none disabled:text-interactive-text-secondary-disabled", isMultiple && !isEmpty && "absolute inset-0 z-0"),
+				...dataAttributeProps,
+				"data-rac": true,
+				children: buttonContent
+			})] })
+		});
+	}
+	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 });
@@ -70,6 +71,7 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 		}),
 		"data-rac": "",
 		"data-disabled": isDisabled || void 0,
+		"data-is-disabled": isDisabled || void 0,
 		"data-hovered": isHovered || void 0,
 		"data-focused": isOpen || isFocused || void 0,
 		"data-focus-within": isFocused || void 0,
@@ -101,6 +103,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 +144,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

@@ -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,9 +42,14 @@ 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 selectedItems = useMemo(() => {
+			const getItem = (id) => allItems.find((item) => item.id === id) ?? null;
+			if (Array.isArray(fieldState.value)) return fieldState.value.map((id) => getItem(id)).filter((item) => item !== null);
+			const selectedItem = fieldState.value != null ? getItem(fieldState.value) : null;
+			return selectedItem ? [selectedItem] : [];
+		}, [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) => {
@@ -84,7 +89,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 +149,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 +175,7 @@ var SelectContext;
 			onClear,
 			onSelectAll,
 			onRemove,
+			onBlur,
 			listItems,
 			selectableListItems,
 			selectedItems,
@@ -171,6 +193,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 {};