@povio/ui 2.2.9-rc.15 → 2.2.9-rc.17

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

@@ -1,23 +1,25 @@
 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 { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useCallback, useRef } from "react";
+import { isValidElement, useCallback, useEffect, useRef, useState } from "react";
 import { Input, useLocale } from "react-aria-components";
 import { useFocusVisible, useNumberField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
+import { Controller, useWatch } 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, ...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, autoFocusOnMount, ...rest } = props;
 	const numberFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { locale } = useLocale();
@@ -34,6 +36,10 @@ 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,
@@ -114,7 +120,68 @@ var NumberInputBase = (props) => {
 		})
 	});
 };
-var NumberInput = (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 = ({ renderStaticInput, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? 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 trailingContent = !!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),
+			trailingContent
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -122,17 +189,22 @@ var NumberInput = (props) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(NumberInputBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref),
+				ref: mergeRefs(ref, field.ref, inputRef),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
 				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message
+				error: props.error ?? error?.message,
+				autoFocusOnMount: shouldFocus
 			}, field.value === null || field.value === void 0 ? "empty" : "filled")
 		});
 	}
-	return /* @__PURE__ */ jsx(NumberInputBase, { ...props }, props.value === null || props.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");
 };
 //#endregion
 export { NumberInput };

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

@@ -13,9 +13,11 @@ interface TextInputBaseProps extends FormFieldProps, InputVariantProps, Omit<Inp
     type?: AllowedHTMLInputTypeAttribute;
     todayIcon?: boolean;
     isDirty?: boolean;
+    autoFocusOnMount?: boolean;
 }
 export interface TextInputProps extends TextInputBaseProps {
+    renderStaticInput?: boolean;
 }
 export type ControlledTextInputProps<TFieldValues extends FieldValues> = ControlProps<TextInputProps, TFieldValues>;
-export declare const TextInput: <TFieldValues extends FieldValues>(props: ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const TextInput: <TFieldValues extends FieldValues>({ renderStaticInput, ...props }: ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,22 +1,24 @@
 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 { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useRef } from "react";
+import { isValidElement, useEffect, useRef, useState } from "react";
 import { Input } from "react-aria-components";
 import { useFocusVisible, useTextField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
+import { Controller, useWatch } 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, ...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, autoFocusOnMount, ...rest } = props;
 	const textFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { labelProps, inputProps } = useTextField({
@@ -29,6 +31,10 @@ var TextInputBase = (props) => {
 		onChange,
 		onBlur
 	}, textFieldRef);
+	useEffect(() => {
+		if (!autoFocusOnMount || isDisabled) return;
+		requestAnimationFrame(() => inputRef.current?.focus());
+	}, [autoFocusOnMount, isDisabled]);
 	const formFieldProps = {
 		error,
 		label,
@@ -111,7 +117,71 @@ var TextInputBase = (props) => {
 		})
 	});
 };
-var TextInput = (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 = ({ renderStaticInput, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? 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 trailingContent = !!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),
+			trailingContent
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -119,17 +189,22 @@ var TextInput = (props) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TextInputBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref),
+				ref: mergeRefs(ref, field.ref, inputRef),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
 				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message
+				error: props.error ?? error?.message,
+				autoFocusOnMount: shouldFocus
 			})
 		});
 	}
-	return /* @__PURE__ */ jsx(TextInputBase, { ...props });
+	return /* @__PURE__ */ jsx(TextInputBase, {
+		...props,
+		ref: mergeRefs(props.ref, inputRef),
+		autoFocusOnMount: shouldFocus
+	});
 };
 //#endregion
 export { TextInput };

package/dist/components/inputs/Inputs/InputItem.d.ts

@@ -7,9 +7,9 @@ import { HasRequiredProperty } from '../../../types/common';
 declare const componentRegistry: {
     readonly toggle: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Toggle/Toggle').ControlledToggleProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly checkbox: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Checkbox/Checkbox').ControlledCheckboxProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-    readonly numberInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/NumberInput/NumberInput').ControlledNumberInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly numberInput: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../Input/NumberInput/NumberInput').ControlledNumberInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly slider: <TFieldValues extends import('react-hook-form').FieldValues, IsRange extends boolean = false>(props: import('../Slider/Slider').ControlledSliderProps<TFieldValues, IsRange>) => import("react/jsx-runtime").JSX.Element;
-    readonly textInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/TextInput/TextInput').ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly textInput: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../Input/TextInput/TextInput').ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly passwordInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/PasswordInput/PasswordInput').ControlledPasswordInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly textArea: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/TextArea/TextArea').ControlledTextAreaProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly select: typeof Select;
@@ -17,10 +17,10 @@ declare const componentRegistry: {
     readonly autocomplete: typeof Autocomplete;
     readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn>({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
     readonly segment: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key>(props: import('../../..').ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;
-    readonly datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-    readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-    readonly timePicker: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../DateTime/TimePicker/TimePicker').ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-    readonly dateRangePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, ...props }: import('../DateTime/DateRangePicker/DateRangePicker').ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, renderStaticInput, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly timePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../DateTime/TimePicker/TimePicker').ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly dateRangePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DateRangePicker/DateRangePicker').ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly textEditor: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../../../text-editor.js').ControlledTextEditorProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly unknown: null;
 };

package/dist/components/inputs/RadioGroup/RadioGroup.js

@@ -15,6 +15,18 @@ var RadioGroupBase = (props) => {
 	const radioTypographyMap = UIStyle.useMapper("radio.typography", radioTypography);
 	const radioContentClassNameMap = UIStyle.useMapper("radio.contentClassName", radioContentClassName);
 	const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isDisabled, headerClassName, errorClassName, labelClassName, inputClassName, isHeaderHidden, error, className, options, variant = ui.radioGroup.variant, hideLabel = ui.radioGroup.hideLabel, ...rest } = props;
+	const radioClassName = radioCva({
+		variant,
+		...rest
+	});
+	const radioTypographyProps = radioTypographyMap({
+		variant,
+		...rest
+	});
+	const radioContentClassNameValue = radioContentClassNameMap({
+		variant,
+		...rest
+	});
 	const formFieldProps = {
 		className,
 		error,
@@ -42,18 +54,9 @@ var RadioGroupBase = (props) => {
 				children: options.map((option) => /* @__PURE__ */ jsxs(Radio, {
 					value: option.value,
 					className: clsx("relative", radioIndicatorClass),
-					children: [/* @__PURE__ */ jsx("div", { className: radioCva({
-						variant,
-						...rest
-					}) }), /* @__PURE__ */ jsx(CheckContent, {
-						typography: radioTypographyMap({
-							variant,
-							...rest
-						}),
-						contentClassName: radioContentClassNameMap({
-							variant,
-							...rest
-						}),
+					children: [/* @__PURE__ */ jsx("div", { className: radioClassName }), /* @__PURE__ */ jsx(CheckContent, {
+						typography: radioTypographyProps,
+						contentClassName: radioContentClassNameValue,
 						className: labelClassName,
 						children: option.label
 					})]

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

@@ -4,7 +4,9 @@ import { FieldValues } from 'react-hook-form';
 import { SelectBaseProps } from '../shared/SelectBase';
 import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps } from '../shared/select.types';
 import { OmitDiscriminatedUnion } from '../../../../types/common';
-export type AutocompleteProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "isSearchable">;
+export type AutocompleteProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "isSearchable"> & {
+    renderStaticInput?: boolean;
+};
 export type ControlledAutocompleteProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = Omit<AutocompleteProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem>;
 export declare function Autocomplete<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: AutocompleteProps<TKey, TInitialSelectItem>): ReactElement;
 export declare function Autocomplete<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>): ReactElement;

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

@@ -1,9 +1,14 @@
+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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { isValidElement, 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/Autocomplete/Autocomplete.tsx
-function Autocomplete(props) {
+function _Autocomplete(props) {
 	if ("formControl" in props && props.formControl) {
 		const { ignoreInputValueFiltering = true, formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -28,5 +33,66 @@ function Autocomplete(props) {
 		isSearchable: true
 	});
 }
+function Autocomplete({ 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.customTrigger) setRenderInput(true);
+	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 = /* @__PURE__ */ jsx(Fragment, { children: currentValue.map((id) => getItemLabel(id)).filter(Boolean).map((item, index) => /* @__PURE__ */ jsxs("span", { children: [item, index < currentValue.length - 1 && ","] }, `${index}`)) });
+		} else if (currentValue != null) displayValue = getItemLabel(currentValue);
+		const as = props.as ?? ui.input.as;
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		const trailingContent = props.trailingContent || !props.hideDropdownIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [props.trailingContent, !props.hideDropdownIcon ? /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: "size-6 shrink-0 text-interactive-text-secondary-idle" }) : void 0] }) : void 0;
+		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" || as === "filter" || as === "floating",
+			hideLabel: props.hideLabel ?? ui.input.hideLabel,
+			isDisabled,
+			className: clsx("w-full", props.containerClassName),
+			inputClassName: clsx(props.className, props.inputClassName),
+			placeholder: as === "floating" ? "" : props.placeholder,
+			displayValue,
+			isEmpty: !displayValue,
+			leadingContent: props.leadingContent,
+			trailingContent
+		});
+	}
+	return /* @__PURE__ */ jsx(_Autocomplete, {
+		...props,
+		ref: mergeRefs(props.ref, rootRef)
+	});
+}
 //#endregion
 export { Autocomplete };

package/dist/components/inputs/Selection/Autocomplete/queryAutocomplete.types.d.ts

@@ -15,16 +15,8 @@ export type ExtractQueryOptions<TQueryFn> = TQueryFn extends (params: any, optio
 export type QueryDataType<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>;
 export type ExtractPageType<T> = T extends InfiniteData<infer TPage> ? TPage : T;
 export type ExtractedDataType<TQueryFn extends QueryFn> = ExtractPageType<QueryDataType<TQueryFn>> | ExtractPageType<QueryDataType<TQueryFn>>[];
-type QueryAutocompleteFilter = {
-    search?: string;
-};
-type QueryAutocompleteSearchParams = {
-    search?: string;
-} | {
-    filter?: QueryAutocompleteFilter;
-};
 export type QueryAutocompleteProps<TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn> = OmitDiscriminatedUnion<AutocompleteProps<TSelectItem["id"]>, "items" | "onSearchChange" | "isLoading" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TSelectItem["id"]> & {
-    query: ExtractQueryParams<TQueryFn> extends QueryAutocompleteSearchParams ? TQueryFn : never;
+    query: TQueryFn;
     queryParams?: Omit<ExtractQueryParams<TQueryFn>, "search" | "limit"> & {
         limit?: number;
     };
@@ -42,4 +34,3 @@ export interface UseQueryAutocompleteOptions<TQueryFn extends QueryFn, TKey exte
     initialQueryState?: boolean;
     search?: string;
 }
-export {};

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

@@ -4,7 +4,9 @@ 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 SelectProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "initialSelection" | "mapInitialToSelectItem" | 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,14 @@
+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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { isValidElement, 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
-function Select(props) {
+function _Select(props) {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -23,5 +28,66 @@ function 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 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 = /* @__PURE__ */ jsx(Fragment, { children: currentValue.map((id) => getItemLabel(id)).filter(Boolean).map((item, index) => /* @__PURE__ */ jsxs("span", { children: [item, index < currentValue.length - 1 && ","] }, `${index}`)) });
+		} else if (currentValue != null) displayValue = getItemLabel(currentValue);
+		const as = props.as ?? ui.input.as;
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		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,
+			size: props.size ?? ui.input.size,
+			variant: props.variant ?? ui.input.variant,
+			hideLabel: props.hideLabel ?? ui.input.hideLabel,
+			isDisabled,
+			className: clsx("w-full", props.containerClassName),
+			inputClassName: clsx(props.className, props.inputClassName),
+			placeholder: as === "floating" ? "" : props.placeholder,
+			displayValue,
+			isEmpty: !displayValue,
+			leadingContent: props.leadingContent,
+			trailingContent
+		});
+	}
+	return /* @__PURE__ */ jsx(_Select, {
+		...props,
+		ref: mergeRefs(props.ref, rootRef)
+	});
+}
 //#endregion
 export { Select };

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";
@@ -17,6 +17,7 @@ import { useTranslation } from "react-i18next";
 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 });
@@ -142,6 +143,7 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 					onClear();
 					if (fireBlurOnChange) onBlur?.({});
 				},
+				className: inputClearClassCva({ as }),
 				show: showClearButton
 			}),
 			trailingContent && /* @__PURE__ */ jsx("div", {

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { FormFieldProps } from '../FormField/FormField';
+import { TextInputProps } from '../Input/TextInput/TextInput';
+import { InputSizeProps, InputVariantProps } from './input.cva';
+interface StaticInputProps extends FormFieldProps {
+    onInteract: (shouldFocus: boolean) => void;
+    as?: TextInputProps["as"];
+    size?: InputSizeProps["size"];
+    variant?: InputVariantProps["variant"];
+    applyMinInputWidth?: boolean;
+    placeholder?: ReactNode;
+    displayValue?: ReactNode;
+    isEmpty?: boolean;
+    leadingVisual?: ReactNode;
+    leadingContent?: ReactNode;
+    trailingContent?: ReactNode;
+    contentRowClassName?: string;
+    inputClassName?: string;
+}
+export declare const StaticInput: ({ onInteract, as, size, variant, applyMinInputWidth, placeholder, displayValue, isEmpty, leadingVisual, leadingContent, trailingContent, contentRowClassName, inputClassName, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};