@povio/ui 2.2.8-rc → 2.2.9-rc.1

package/dist/components/inputs/File/shared/InputUploadFilled.d.ts

@@ -1,7 +1,8 @@
-interface InputUploadFilledProps {
+import { InputSizeProps } from '../../shared/input.cva';
+interface InputUploadFilledProps extends Pick<InputSizeProps, "size"> {
     files: File[];
     onRemove: () => void;
     isDisabled?: boolean;
 }
-export declare const InputUploadFilled: ({ files, onRemove, isDisabled }: InputUploadFilledProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputUploadFilled: ({ files, onRemove, isDisabled, size }: InputUploadFilledProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/File/shared/InputUploadFilled.js

@@ -6,9 +6,9 @@ import { inputSize } from "../../shared/input.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/components/inputs/File/shared/InputUploadFilled.tsx
-var InputUploadFilled = ({ files, onRemove, isDisabled }) => {
+var InputUploadFilled = ({ files, onRemove, isDisabled, size }) => {
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle", UIStyle.useCva("input.sizeCva", inputSize)({ size: "default" })),
+		className: clsx("flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle", UIStyle.useCva("input.sizeCva", inputSize)({ size })),
 		children: [/* @__PURE__ */ jsx(Typography, {
 			variant: "default",
 			size: "label-1",

package/dist/components/inputs/Input/NumberInput/NumberInput.d.ts

@@ -13,7 +13,6 @@ interface NumberInputBaseProps extends FormFieldProps, InputVariantProps, Omit<I
     value?: number | null;
     onChange?: (value: number | null) => void;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
-    autoFocusOnMount?: boolean;
 }
 export type NumberInputProps = NumberInputBaseProps;
 export type ControlledNumberInputProps<TFieldValues extends FieldValues> = ControlProps<NumberInputProps, TFieldValues>;

package/dist/components/inputs/Input/NumberInput/NumberInput.js

@@ -1,25 +1,23 @@
 import { UIStyle } from "../../../../config/uiStyle.context.js";
-import { Loader } from "../../../status/Loader/Loader.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { inputBase } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
-import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputContent } from "../shared/InputContent.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { isValidElement, useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useRef } from "react";
 import { Input, useLocale } from "react-aria-components";
 import { useFocusVisible, useNumberField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller, useWatch } from "react-hook-form";
+import { Controller } from "react-hook-form";
 import { useNumberFieldState } from "react-stately";
 //#region src/components/inputs/Input/NumberInput/NumberInput.tsx
 var NumberInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputRef = useRef(null);
-	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions = ui.numberInput.formatOptions, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, autoFocusOnMount, ...rest } = props;
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions = ui.numberInput.formatOptions, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, ...rest } = props;
 	const numberFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { locale } = useLocale();
@@ -36,10 +34,6 @@ var NumberInputBase = (props) => {
 		formatOptions
 	};
 	const { labelProps, inputProps } = useNumberField(numberProps, useNumberFieldState(numberProps), numberFieldRef);
-	useEffect(() => {
-		if (!autoFocusOnMount || isDisabled) return;
-		requestAnimationFrame(() => inputRef.current?.focus());
-	}, [autoFocusOnMount, isDisabled]);
 	const formFieldProps = {
 		error,
 		label,
@@ -107,7 +101,8 @@ var NumberInputBase = (props) => {
 						"data-is-dirty": isDirty || void 0,
 						"data-is-required": isRequired || void 0,
 						"data-is-empty": value === null || value === void 0 || void 0,
-						placeholder: as === "floating" ? "" : inputProps.placeholder,
+						"data-is-filled": !("" + value === "" || value === null || value === void 0) || void 0,
+						placeholder: as === "floating" ? "\xA0" : inputProps.placeholder,
 						className: "w-full outline-none",
 						onFocus: (e) => {
 							inputProps.onFocus?.(e);
@@ -119,68 +114,7 @@ var NumberInputBase = (props) => {
 		})
 	});
 };
-var renderIconVisual = (icon) => {
-	if (!icon) return null;
-	if (isValidElement(icon)) return icon;
-	return /* @__PURE__ */ jsx(icon, { className: "size-6 text-interactive-text-secondary-idle" });
-};
 var NumberInput = (props) => {
-	const ui = UIConfig.useConfig();
-	const [renderInput, setRenderInput] = useState(!ui.renderStaticInput);
-	const [shouldFocus, setShouldFocus] = useState(false);
-	const inputRef = useRef(null);
-	const watchedValue = "formControl" in props && props.formControl ? useWatch({
-		control: props.formControl.control,
-		name: props.formControl.name
-	}) : props.value;
-	let isFormControlDisabled = false;
-	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => inputRef.current?.focus());
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
-	if (!renderInput) {
-		const staticValue = watchedValue ?? props.value ?? props.defaultValue;
-		const displayValue = staticValue == null ? "" : `${staticValue}`;
-		const hasValue = displayValue !== "";
-		const as = props.as ?? ui.input.as;
-		const size = props.size ?? ui.input.size;
-		const variant = props.variant ?? ui.input.variant;
-		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
-		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
-		const trailingVisual = !!props.unit || !!props.isLoading || !!props.action && !props.isLoading || !!props.trailingIcon && !props.isLoading && !props.action ? /* @__PURE__ */ jsxs(Fragment, { children: [
-			props.unit && /* @__PURE__ */ jsx("span", {
-				className: "text-label-2 text-text-default-3",
-				children: props.unit
-			}),
-			props.isLoading && /* @__PURE__ */ jsx(Loader, {}),
-			!props.isLoading && props.action && renderIconVisual(props.action.icon),
-			!props.isLoading && !props.action && props.trailingIcon && renderIconVisual(props.trailingIcon)
-		] }) : void 0;
-		return /* @__PURE__ */ jsx(StaticInput, {
-			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			as,
-			size,
-			variant,
-			hideLabel,
-			isHeaderHidden,
-			isDisabled,
-			className: clsx("group w-full", as === "inline" && "h-full", props.className),
-			inputClassName: props.inputClassName,
-			placeholder: as === "floating" ? "" : props.placeholder,
-			displayValue,
-			isEmpty: !hasValue,
-			leadingVisual: renderIconVisual(props.leadingIcon),
-			trailingVisual
-		});
-	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -188,22 +122,17 @@ var NumberInput = (props) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(NumberInputBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref, inputRef),
+				ref: mergeRefs(ref, field.ref),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
 				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message,
-				autoFocusOnMount: shouldFocus
+				error: props.error ?? error?.message
 			}, field.value === null || field.value === void 0 ? "empty" : "filled")
 		});
 	}
-	return /* @__PURE__ */ jsx(NumberInputBase, {
-		...props,
-		ref: mergeRefs(props.ref, inputRef),
-		autoFocusOnMount: shouldFocus
-	}, props.value === null || props.value === void 0 ? "empty" : "filled");
+	return /* @__PURE__ */ jsx(NumberInputBase, { ...props }, props.value === null || props.value === void 0 ? "empty" : "filled");
 };
 //#endregion
 export { NumberInput };

package/dist/components/inputs/Input/TextInput/TextInput.d.ts

@@ -13,7 +13,6 @@ interface TextInputBaseProps extends FormFieldProps, InputVariantProps, Omit<Inp
     type?: AllowedHTMLInputTypeAttribute;
     todayIcon?: boolean;
     isDirty?: boolean;
-    autoFocusOnMount?: boolean;
 }
 export interface TextInputProps extends TextInputBaseProps {
 }

package/dist/components/inputs/Input/TextInput/TextInput.js

@@ -1,24 +1,22 @@
 import { UIStyle } from "../../../../config/uiStyle.context.js";
-import { Loader } from "../../../status/Loader/Loader.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { inputBase } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
-import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputContent } from "../shared/InputContent.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { isValidElement, useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import { Input } from "react-aria-components";
 import { useFocusVisible, useTextField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller, useWatch } from "react-hook-form";
+import { Controller } from "react-hook-form";
 //#region src/components/inputs/Input/TextInput/TextInput.tsx
 var TextInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputRef = useRef(null);
-	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, autoFocusOnMount, ...rest } = props;
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, ...rest } = props;
 	const textFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { labelProps, inputProps } = useTextField({
@@ -31,10 +29,6 @@ var TextInputBase = (props) => {
 		onChange,
 		onBlur
 	}, textFieldRef);
-	useEffect(() => {
-		if (!autoFocusOnMount || isDisabled) return;
-		requestAnimationFrame(() => inputRef.current?.focus());
-	}, [autoFocusOnMount, isDisabled]);
 	const formFieldProps = {
 		error,
 		label,
@@ -97,10 +91,11 @@ var TextInputBase = (props) => {
 						...inputProps,
 						ref: mergeRefs(ref, inputRef),
 						"data-is-empty": value === "" || value === null || value === void 0 || void 0,
+						"data-is-filled": !(value === "" || value === null || value === void 0) || void 0,
 						"data-is-dirty": isDirty || void 0,
 						"data-is-required": isRequired || void 0,
 						"data-is-disabled": isDisabled || void 0,
-						placeholder: as === "floating" ? "" : inputProps.placeholder,
+						placeholder: as === "floating" ? "\xA0" : inputProps.placeholder,
 						className: "w-full outline-none",
 						onFocus: (e) => {
 							inputProps.onFocus?.(e);
@@ -112,71 +107,7 @@ var TextInputBase = (props) => {
 		})
 	});
 };
-var renderIconVisual = (icon) => {
-	if (!icon) return null;
-	if (isValidElement(icon)) return icon;
-	return /* @__PURE__ */ jsx(icon, { className: "size-6 text-interactive-text-secondary-idle" });
-};
 var TextInput = (props) => {
-	const ui = UIConfig.useConfig();
-	const [renderInput, setRenderInput] = useState(!ui.renderStaticInput);
-	const [shouldFocus, setShouldFocus] = useState(false);
-	const inputRef = useRef(null);
-	const watchedValue = "formControl" in props && props.formControl ? useWatch({
-		control: props.formControl.control,
-		name: props.formControl.name
-	}) : props.value;
-	let isFormControlDisabled = false;
-	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
-	const staticValue = watchedValue ?? props.value ?? props.defaultValue ?? "";
-	const inputType = props.type;
-	if (!renderInput && inputType === "password" && `${staticValue}`.length > 0) setRenderInput(true);
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => inputRef.current?.focus());
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
-	if (!renderInput) {
-		const as = props.as ?? ui.input.as;
-		const size = props.size ?? ui.input.size;
-		const variant = props.variant ?? ui.input.variant;
-		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
-		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
-		const maskedPasswordValue = inputType === "password" && `${staticValue}`.length > 0 ? "•".repeat(`${staticValue}`.length) : staticValue;
-		const displayValue = maskedPasswordValue == null ? "" : `${maskedPasswordValue}`;
-		const hasValue = displayValue !== "";
-		const trailingVisual = !!props.unit || !!props.isLoading || !!props.action && !props.isLoading || !!props.trailingIcon && !props.isLoading && !props.action ? /* @__PURE__ */ jsxs(Fragment, { children: [
-			props.unit && /* @__PURE__ */ jsx("span", {
-				className: "text-label-2 text-text-default-3",
-				children: props.unit
-			}),
-			props.isLoading && /* @__PURE__ */ jsx(Loader, {}),
-			!props.isLoading && props.action && renderIconVisual(props.action.icon),
-			!props.isLoading && !props.action && props.trailingIcon && renderIconVisual(props.trailingIcon)
-		] }) : void 0;
-		return /* @__PURE__ */ jsx(StaticInput, {
-			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			as,
-			size,
-			variant,
-			hideLabel,
-			isHeaderHidden,
-			isDisabled,
-			className: clsx("group w-full", as === "inline" && "h-full", props.className),
-			inputClassName: props.inputClassName,
-			placeholder: as === "floating" ? "" : props.placeholder,
-			displayValue,
-			isEmpty: !hasValue,
-			leadingVisual: renderIconVisual(props.leadingIcon),
-			trailingVisual
-		});
-	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -184,22 +115,17 @@ var TextInput = (props) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TextInputBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref, inputRef),
+				ref: mergeRefs(ref, field.ref),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
 				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message,
-				autoFocusOnMount: shouldFocus
+				error: props.error ?? error?.message
 			})
 		});
 	}
-	return /* @__PURE__ */ jsx(TextInputBase, {
-		...props,
-		ref: mergeRefs(props.ref, inputRef),
-		autoFocusOnMount: shouldFocus
-	});
+	return /* @__PURE__ */ jsx(TextInputBase, { ...props });
 };
 //#endregion
 export { TextInput };

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

@@ -1,24 +1,21 @@
-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 { isValidElement, useEffect, useRef, useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller, useWatch } from "react-hook-form";
+import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Autocomplete/Autocomplete.tsx
-var _Autocomplete = (props) => {
+var Autocomplete = (props) => {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,
-			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(SelectBase, {
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(SelectBase, {
 				...innerProps,
 				ref: mergeRefs(ref, field.ref),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
+				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
 				error: props.error ?? error?.message,
 				isSearchable: true
@@ -30,61 +27,5 @@ var _Autocomplete = (props) => {
 		isSearchable: true
 	});
 };
-var Autocomplete = (props) => {
-	const ui = UIConfig.useConfig();
-	const [renderInput, setRenderInput] = useState(!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;
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => {
-			(rootRef.current?.querySelector("input, [data-type='select-trigger'], button, [tabindex]"))?.focus();
-		});
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
-	if (!renderInput) {
-		const getItemLabel = (id) => {
-			const item = props.items.find((innerItem) => innerItem.id === id);
-			if (!item) return "";
-			if (props.showSelectionContent && item.content) return isValidElement(item.content) ? item.label : item.content;
-			return item.label;
-		};
-		const mode = props.selectionMode ?? ui.select.selectionMode;
-		let displayValue = "";
-		if (mode === "multiple") {
-			if (Array.isArray(currentValue) && currentValue.length > 0) displayValue = currentValue.map((id) => getItemLabel(id)).filter(Boolean).join(", ");
-		} else if (currentValue != null) displayValue = getItemLabel(currentValue);
-		const as = props.as ?? ui.input.as;
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
-		return /* @__PURE__ */ jsx(StaticInput, {
-			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			as,
-			size: props.size ?? ui.input.size,
-			variant: props.variant ?? ui.input.variant,
-			isHeaderHidden: props.isHeaderHidden || as === "inline",
-			hideLabel: props.hideLabel ?? ui.input.hideLabel,
-			isDisabled,
-			placeholder: as === "floating" ? "" : props.placeholder,
-			displayValue,
-			isEmpty: !displayValue,
-			trailingVisual: /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: "size-6 shrink-0 text-interactive-text-secondary-idle" })
-		});
-	}
-	return /* @__PURE__ */ jsx(_Autocomplete, {
-		...props,
-		ref: mergeRefs(props.ref, rootRef)
-	});
-};
 //#endregion
 export { Autocomplete };

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

@@ -1,24 +1,21 @@
-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 { isValidElement, useEffect, useRef, useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller, useWatch } from "react-hook-form";
+import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Select/Select.tsx
-var _Select = (props) => {
+var Select = (props) => {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,
-			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(SelectBase, {
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(SelectBase, {
 				...innerProps,
 				ref: mergeRefs(ref, field.ref),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
+				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
 				error: props.error ?? error?.message
 			})
@@ -26,62 +23,5 @@ var _Select = (props) => {
 	}
 	return /* @__PURE__ */ jsx(SelectBase, { ...props });
 };
-var Select = (props) => {
-	const ui = UIConfig.useConfig();
-	const [renderInput, setRenderInput] = useState(!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);
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => {
-			(rootRef.current?.querySelector("[data-type='select-trigger'], input, button, [tabindex]"))?.focus();
-		});
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
-	if (!renderInput) {
-		const getItemLabel = (id) => {
-			const item = props.items.find((innerItem) => innerItem.id === id);
-			if (!item) return "";
-			if (props.showSelectionContent && item.content) return isValidElement(item.content) ? item.label : item.content;
-			return item.label;
-		};
-		const mode = props.selectionMode ?? ui.select.selectionMode;
-		let displayValue = "";
-		if (mode === "multiple") {
-			if (Array.isArray(currentValue) && currentValue.length > 0) displayValue = currentValue.map((id) => getItemLabel(id)).filter(Boolean).join(", ");
-		} else if (currentValue != null) displayValue = getItemLabel(currentValue);
-		const as = props.as ?? ui.input.as;
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
-		return /* @__PURE__ */ jsx(StaticInput, {
-			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			as,
-			size: props.size ?? ui.input.size,
-			variant: props.variant ?? ui.input.variant,
-			isHeaderHidden: props.isHeaderHidden || as === "inline",
-			hideLabel: props.hideLabel ?? ui.input.hideLabel,
-			isDisabled,
-			placeholder: as === "floating" ? "" : props.placeholder,
-			displayValue,
-			isEmpty: !displayValue,
-			trailingVisual: /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: "size-6 shrink-0 text-interactive-text-secondary-idle" })
-		});
-	}
-	return /* @__PURE__ */ jsx(_Select, {
-		...props,
-		ref: mergeRefs(props.ref, rootRef)
-	});
-};
 //#endregion
 export { Select };

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

@@ -7,6 +7,7 @@ import { InputVariantProps } from '../../shared/input.cva';
 export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = FormFieldProps & GroupedSelectProps<TKey, TInitialSelectItem> & SelectNewItemProps & SelectAsyncProps & SelectVirtualizationProps & InputVariantProps & Pick<AriaButtonProps, "onBlur"> & {
     ref?: Ref<HTMLDivElement>;
     className?: string;
+    isDirty?: boolean;
     placeholder?: string;
     hideDropdownIcon?: boolean;
     hideSearchIcon?: boolean;
@@ -20,6 +21,7 @@ export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = Default
     customTrigger?: ReactElement;
     selectedTagsType?: "tags" | "list";
     collapseAfter?: number;
+    fireBlurOnChange?: boolean;
     onInputChange?: (value: string) => void;
     onSearchChange?: (value: string) => void;
     mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;

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

@@ -19,7 +19,8 @@ var SelectBase = (dProps) => {
 		selectedTagsType: dProps.selectedTagsType ?? ui.select.selectedTagsType,
 		ignoreTriggerWidth: dProps.virtualizerOptions || dProps.items.length > 100 ? false : dProps.ignoreTriggerWidth ?? false,
 		collapseAfter: dProps.collapseAfter ?? ui.select.collapseAfter,
-		hideSearchIcon: dProps.hideSearchIcon ?? ui.select.hideSearchIcon
+		hideSearchIcon: dProps.hideSearchIcon ?? ui.select.hideSearchIcon,
+		fireBlurOnChange: dProps.fireBlurOnChange ?? ui.select.fireBlurOnChange
 	};
 	const isDesktop = useBreakpoint("md");
 	return /* @__PURE__ */ jsx(SelectContext.Provider, {

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

@@ -14,7 +14,7 @@ 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, ...props }) => {
-	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isLoading, as, size, collapseAfter, selectedTagsType } = 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 formFieldProps = {
 		error,
@@ -137,6 +137,8 @@ var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inp
 					inputClassName,
 					collapseAfter,
 					selectedTagsType,
+					isRequired,
+					isDirty,
 					onBlur,
 					onCloseComboBox: (state) => {
 						if (isSearchable) closeComboBoxRef.current = state;

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"> {
+interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "onBlur" | "showSelectionContent" | "inputClassName" | "selectedTagsType" | "collapseAfter" | "isRequired" | "isDirty" | "fireBlurOnChange"> {
     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, onCloseComboBox, onBlur, ...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, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -14,7 +14,7 @@ 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, onCloseComboBox, onBlur, ...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, ...props }) => {
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const { t } = useTranslation("ui");
@@ -44,9 +44,13 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 		if (e.key === "Enter" && !isMultiple && !isLoading && listItems.length === 1 && !listItems[0].isDisabled) {
 			e.preventDefault();
 			onChange(listItems[0].id);
+			if (fireBlurOnChange) onBlur?.({});
 			onCloseComboBox?.(state);
 		}
-		if (e.key === "Backspace" && isMultiple && fieldState.inputValue === "" && Array.isArray(fieldState.value) && fieldState.value.length > 0) onChange(fieldState.value.slice(0, -1));
+		if (e.key === "Backspace" && isMultiple && fieldState.inputValue === "" && Array.isArray(fieldState.value) && fieldState.value.length > 0) {
+			onChange(fieldState.value.slice(0, -1));
+			if (fireBlurOnChange) onBlur?.({});
+		}
 	};
 	const onClick = () => {
 		if (isDisabled) return;
@@ -75,6 +79,9 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 		"data-has-search": fieldState.searchValue !== "" || void 0,
 		"data-invalid": isInvalid || void 0,
 		"data-is-empty": isEmpty || void 0,
+		"data-is-filled": !isEmpty || void 0,
+		"data-is-required": isRequired || void 0,
+		"data-is-dirty": isDirty || void 0,
 		"data-select-input": "",
 		...hoverProps,
 		...focusWithinProps,
@@ -125,7 +132,10 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 				]
 			}),
 			isClearable && /* @__PURE__ */ jsx(InputClear, {
-				onClear,
+				onClear: () => {
+					onClear();
+					if (fireBlurOnChange) onBlur?.({});
+				},
 				show: showClearButton
 			}),
 			!hideDropdownIcon && /* @__PURE__ */ jsx(Button, {

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

@@ -4,5 +4,4 @@ interface SelectListBoxItemProps extends Pick<SelectBaseProps, "isSearchable" |
     isNewItem?: boolean;
 }
 export declare const SelectListBoxItem: ({ isSearchable, isNewItem, newItemRender, id, label, content, isDisabled, }: SelectListBoxItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const selectListBoxItemClass: string;
 export {};