@povio/ui 2.2.9-rc.19 → 2.2.9-rc.20

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -217,9 +217,9 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
-		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getDatePlaceholder(locale);
 		const staticDateValue = rawValue ? parseCalendarDate(rawValue) : null;
 		const displayValue = staticDateValue ? DateTimeUtils.formatCalendarDateLocalized(staticDateValue, locale) : "";
+		const staticPlaceholder = rawValue ? "" : props.placeholder ?? DateTimeUtils.getDatePlaceholder(locale);
 		return /* @__PURE__ */ jsx(StaticInput, {
 			...props,
 			onInteract: (focus) => {
@@ -237,8 +237,19 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 			placeholder: staticPlaceholder,
 			displayValue,
 			isEmpty: !displayValue,
+			dataAttributes: {
+				dataIsEmpty: staticDateValue === null,
+				dataIsFilled: staticDateValue !== null,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: staticDateValue !== null
+			},
 			contentRowClassName: datePickerInputContentRowCva({ size }),
 			leadingContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			leadingContentClassName: "ml-0!",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0
 		});
 	}

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -13,7 +13,7 @@ import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { RangeCalendar } from "../shared/RangeCalendar.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Button } from "react-aria-components";
@@ -616,17 +616,14 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const defaultDatePlaceholder = DateTimeUtils.getDatePlaceholder(locale);
-		const staticPlaceholder = props.placeholder ?? /* @__PURE__ */ jsxs("span", {
-			className: "inline-flex items-center gap-input-gap-input-text-to-elements",
-			children: [
-				/* @__PURE__ */ jsx("span", { children: defaultDatePlaceholder }),
-				/* @__PURE__ */ jsx("span", {
-					className: "pointer-events-none select-none",
-					children: "–"
-				}),
-				/* @__PURE__ */ jsx("span", { children: defaultDatePlaceholder })
-			]
-		});
+		const staticPlaceholder = !!(rawValue?.start || rawValue?.end) ? "" : props.placeholder ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", { children: defaultDatePlaceholder }),
+			/* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none select-none",
+				children: "–"
+			}),
+			/* @__PURE__ */ jsx("span", { children: defaultDatePlaceholder })
+		] });
 		const formatStaticDate = (value) => {
 			if (!value) return "";
 			const parsedDate = parseCalendarDate(value);
@@ -636,17 +633,14 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 		const start = formatStaticDate(rawValue?.start ?? null);
 		const end = formatStaticDate(rawValue?.end ?? null);
 		const hasRangeValue = !!(start && end);
-		const displayValue = hasRangeValue ? /* @__PURE__ */ jsxs("span", {
-			className: "inline-flex items-center gap-input-gap-input-text-to-elements",
-			children: [
-				/* @__PURE__ */ jsx("span", { children: start }),
-				/* @__PURE__ */ jsx("span", {
-					className: "pointer-events-none select-none",
-					children: "–"
-				}),
-				/* @__PURE__ */ jsx("span", { children: end })
-			]
-		}) : void 0;
+		const displayValue = hasRangeValue ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", { children: start }),
+			/* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none select-none",
+				children: "–"
+			}),
+			/* @__PURE__ */ jsx("span", { children: end })
+		] }) : void 0;
 		return /* @__PURE__ */ jsx(StaticInput, {
 			...props,
 			onInteract: (focus) => {
@@ -664,8 +658,19 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 			placeholder: staticPlaceholder,
 			displayValue,
 			isEmpty: !hasRangeValue,
+			dataAttributes: {
+				dataIsEmpty: !hasRangeValue,
+				dataIsFilled: hasRangeValue,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: hasRangeValue
+			},
 			contentRowClassName: datePickerInputContentRowCva({ size }),
 			leadingContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			leadingContentClassName: "ml-0!",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0
 		});
 	}

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js

@@ -230,9 +230,9 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
-		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getDateTimePlaceholder(locale);
 		const staticDateTimeValue = rawValue ? parseDateValue(rawValue) : null;
 		const displayValue = staticDateTimeValue && "hour" in staticDateTimeValue ? DateTimeUtils.formatCalendarDateTimeLocalized(staticDateTimeValue, locale) : "";
+		const staticPlaceholder = rawValue ? "" : props.placeholder ?? DateTimeUtils.getDateTimePlaceholder(locale);
 		return /* @__PURE__ */ jsx(StaticInput, {
 			...props,
 			onInteract: (focus) => {
@@ -250,8 +250,19 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 			placeholder: staticPlaceholder,
 			displayValue,
 			isEmpty: !displayValue,
+			dataAttributes: {
+				dataIsEmpty: staticDateTimeValue === null,
+				dataIsFilled: staticDateTimeValue !== null,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: staticDateTimeValue !== null
+			},
 			contentRowClassName: datePickerInputContentRowCva({ size }),
 			leadingContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			leadingContentClassName: "ml-0!",
 			trailingContent: showDropdown ? ui.dateInput.dateTimeIcon : void 0
 		});
 	}

package/dist/components/inputs/DateTime/TimePicker/TimePicker.js

@@ -177,9 +177,9 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 		if (isFormControlDisabled) isDisabled = true;
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
-		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getTimePlaceholder(locale);
 		const staticTimeValue = rawValue ? parseTimeValue(rawValue) : null;
 		const displayValue = staticTimeValue ? DateTimeUtils.formatTimeLocalized(staticTimeValue, locale) : "";
+		const staticPlaceholder = rawValue ? "" : props.placeholder ?? DateTimeUtils.getTimePlaceholder(locale);
 		return /* @__PURE__ */ jsx(StaticInput, {
 			...props,
 			onInteract: (focus) => {
@@ -197,6 +197,16 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 			placeholder: staticPlaceholder,
 			displayValue,
 			isEmpty: !displayValue,
+			dataAttributes: {
+				dataIsEmpty: staticTimeValue === null,
+				dataIsFilled: staticTimeValue !== null,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: staticTimeValue !== null
+			},
 			trailingContent: showDropdown ? ui.dateInput.timeIcon : void 0
 		});
 	}

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

@@ -127,6 +127,7 @@ var renderIconVisual = (icon) => {
 };
 var NumberInput = ({ renderStaticInput, ...props }) => {
 	const ui = UIConfig.useConfig();
+	const { locale } = useLocale();
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
 	const [shouldFocus, setShouldFocus] = useState(false);
 	const inputRef = useRef(null);
@@ -143,7 +144,8 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 	}, [renderInput, shouldFocus]);
 	if (!renderInput) {
 		const staticValue = watchedValue ?? props.value ?? props.defaultValue;
-		const displayValue = staticValue == null ? "" : `${staticValue}`;
+		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
+		const displayValue = staticValue == null ? "" : new Intl.NumberFormat(locale, formatOptions).format(staticValue);
 		const hasValue = displayValue !== "";
 		const as = props.as ?? ui.input.as;
 		const size = props.size ?? ui.input.size;
@@ -175,9 +177,19 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 			isDisabled,
 			className: clsx("group w-full", as === "inline" && "h-full", props.className),
 			inputClassName: props.inputClassName,
-			placeholder: as === "floating" ? "" : props.placeholder,
+			placeholder: as === "floating" || staticValue ? "" : props.placeholder,
 			displayValue,
 			isEmpty: !hasValue,
+			dataAttributes: {
+				dataIsEmpty: !!!staticValue,
+				dataIsFilled: !(`${staticValue}` === "" || staticValue === null || staticValue === void 0),
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: hasValue
+			},
 			leadingVisual: renderIconVisual(props.leadingIcon),
 			trailingContent
 		});

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

@@ -178,6 +178,16 @@ var TextInput = ({ renderStaticInput, ...props }) => {
 			placeholder: as === "floating" ? "" : props.placeholder,
 			displayValue,
 			isEmpty: !hasValue,
+			dataAttributes: {
+				dataIsEmpty: !hasValue,
+				dataIsFilled: hasValue,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: hasValue
+			},
 			leadingVisual: renderIconVisual(props.leadingIcon),
 			trailingContent
 		});

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

@@ -62,6 +62,8 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			items: props.items,
 			value: currentValue,
 			selectionMode: mode,
+			initialSelection: props.initialSelection,
+			mapInitialToSelectItem: props.mapInitialToSelectItem,
 			showSelectionContent: props.showSelectionContent,
 			isDisabled,
 			collapseAfter: props.collapseAfter ?? ui.select.collapseAfter,
@@ -82,9 +84,20 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			isDisabled,
 			className: clsx("w-full", props.containerClassName),
 			inputClassName: clsx(props.className, props.inputClassName),
-			placeholder: as === "floating" ? "" : props.placeholder,
+			placeholder: as === "floating" || mode === "single" && !isEmpty ? "" : props.placeholder,
 			displayValue,
 			isEmpty,
+			dataAttributes: {
+				dataIsEmpty: isEmpty,
+				dataIsFilled: !isEmpty,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: !isEmpty,
+				dataHasSearch: false
+			},
 			leadingContent: props.leadingContent,
 			trailingContent
 		});

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

@@ -4,7 +4,7 @@ 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>, 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>;

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

@@ -58,6 +58,8 @@ function Select({ renderStaticInput, ...props }) {
 			items: props.items,
 			value: currentValue,
 			selectionMode: mode,
+			initialSelection: props.initialSelection,
+			mapInitialToSelectItem: props.mapInitialToSelectItem,
 			showSelectionContent: props.showSelectionContent,
 			isDisabled,
 			collapseAfter: props.collapseAfter ?? ui.select.collapseAfter,
@@ -78,9 +80,20 @@ function Select({ renderStaticInput, ...props }) {
 			isDisabled,
 			className: clsx("w-full", props.containerClassName),
 			inputClassName: clsx(props.className, props.inputClassName),
-			placeholder: as === "floating" ? "" : props.placeholder,
+			placeholder: as === "floating" || mode === "single" && !isEmpty ? "" : props.placeholder,
 			displayValue,
 			isEmpty,
+			dataAttributes: {
+				dataIsEmpty: isEmpty,
+				dataIsFilled: !isEmpty,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: !isEmpty,
+				dataHasSearch: false
+			},
 			leadingContent: props.leadingContent,
 			trailingContent
 		});

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

@@ -1,11 +1,13 @@
 import { ReactNode } from 'react';
 import { Key } from 'react-aria-components';
 import { SelectBaseProps } from './SelectBase';
-import { SelectItem } from './select.types';
-interface GetStaticSelectValueOptions<TKey extends Key = Key> {
+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"];
@@ -17,5 +19,5 @@ interface StaticSelectValueResult<TKey extends Key = Key> {
     displayValue: ReactNode;
     isEmpty: boolean;
 }
-export declare const getStaticSelectValue: <TKey extends Key = Key>({ items, value, selectionMode, showSelectionContent, isDisabled, collapseAfter, selectedTagsType, }: GetStaticSelectValueOptions<TKey>) => StaticSelectValueResult<TKey>;
+export declare const getStaticSelectValue: <TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>({ items, value, selectionMode, initialSelection, mapInitialToSelectItem, showSelectionContent, isDisabled, collapseAfter, selectedTagsType, }: GetStaticSelectValueOptions<TKey, TInitialSelectItem>) => StaticSelectValueResult<TKey>;
 export {};

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

@@ -1,8 +1,15 @@
 import { SelectInputTags } from "./SelectInputTags.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/Selection/shared/staticSelect.utils.tsx
-var getStaticSelectValue = ({ items, value, selectionMode, showSelectionContent, isDisabled, collapseAfter, selectedTagsType }) => {
-	const getItem = (id) => items.find((item) => item.id === id) ?? null;
+var getStaticSelectValue = ({ items, value, selectionMode, initialSelection, mapInitialToSelectItem = ((item) => ({
+	id: item.id,
+	label: item.label ?? item.name ?? ""
+})), showSelectionContent, isDisabled, collapseAfter, selectedTagsType }) => {
+	const initialSelectedItems = initialSelection ? (Array.isArray(initialSelection) ? initialSelection : [initialSelection]).map((item) => mapInitialToSelectItem(item)) : [];
+	const allItemsMap = /* @__PURE__ */ new Map();
+	[...initialSelectedItems, ...items].forEach((item) => allItemsMap.set(item.id, item));
+	const allItems = Array.from(allItemsMap.values());
+	const getItem = (id) => allItems.find((item) => item.id === id) ?? null;
 	const selectedItems = Array.isArray(value) ? value.map((id) => getItem(id)).filter((item) => item != null) : [];
 	const selectedItem = !Array.isArray(value) && value != null ? getItem(value) : null;
 	if (selectionMode === "multiple") return {

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

@@ -2,6 +2,17 @@ import { ReactNode } from 'react';
 import { FormFieldProps } from '../FormField/FormField';
 import { TextInputProps } from '../Input/TextInput/TextInput';
 import { InputSizeProps, InputVariantProps } from './input.cva';
+type StaticInputDataAttributes = {
+    dataDisabled?: boolean;
+    dataHasSearch?: boolean;
+    dataHasSelection?: boolean;
+    dataInvalid?: boolean;
+    dataIsDirty?: boolean;
+    dataIsDisabled?: boolean;
+    dataIsEmpty?: boolean;
+    dataIsFilled?: boolean;
+    dataIsRequired?: boolean;
+};
 interface StaticInputProps extends FormFieldProps {
     onInteract: (shouldFocus: boolean) => void;
     as?: TextInputProps["as"];
@@ -13,9 +24,11 @@ interface StaticInputProps extends FormFieldProps {
     isEmpty?: boolean;
     leadingVisual?: ReactNode;
     leadingContent?: ReactNode;
+    leadingContentClassName?: string;
     trailingContent?: ReactNode;
     contentRowClassName?: string;
     inputClassName?: string;
+    dataAttributes?: StaticInputDataAttributes;
 }
-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 declare const StaticInput: ({ onInteract, as, size, variant, applyMinInputWidth, placeholder, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,7 +5,7 @@ import { FormField } from "../FormField/FormField.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/components/inputs/shared/StaticInput.tsx
-var StaticInput = ({ onInteract, as, size, variant, applyMinInputWidth, placeholder, displayValue, isEmpty, leadingVisual, leadingContent, trailingContent, contentRowClassName, inputClassName, className, ...formFieldProps }) => {
+var StaticInput = ({ onInteract, as, size, variant, applyMinInputWidth, placeholder, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }) => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	let hasValue = !!displayValue;
@@ -14,6 +14,13 @@ var StaticInput = ({ onInteract, as, size, variant, applyMinInputWidth, placehol
 	if (hasValue) staticDisplayContent = displayValue;
 	else if (as === "floating") staticDisplayContent = null;
 	const shouldRenderFloatingLineSpacer = as === "floating" && !hasValue;
+	const inputDataAttributes = {
+		dataIsEmpty: !hasValue,
+		dataDisabled: formFieldProps.isDisabled,
+		dataIsDisabled: formFieldProps.isDisabled,
+		dataHasSelection: hasValue,
+		...dataAttributes
+	};
 	return /* @__PURE__ */ jsx(FormField, {
 		...formFieldProps,
 		as,
@@ -25,44 +32,48 @@ var StaticInput = ({ onInteract, as, size, variant, applyMinInputWidth, placehol
 			onFocus: () => onInteract(true),
 			onClick: () => onInteract(true),
 			onPointerDown: () => onInteract(true),
-			"data-is-empty": !hasValue || void 0,
-			"data-disabled": formFieldProps.isDisabled || void 0,
-			"data-is-disabled": formFieldProps.isDisabled || void 0,
-			"data-has-selection": hasValue || void 0,
+			"data-is-empty": inputDataAttributes.dataIsEmpty || void 0,
+			"data-disabled": inputDataAttributes.dataDisabled || void 0,
+			"data-is-disabled": inputDataAttributes.dataIsDisabled || void 0,
+			"data-has-selection": inputDataAttributes.dataHasSelection || void 0,
+			"data-has-search": inputDataAttributes.dataHasSearch || void 0,
+			"data-invalid": inputDataAttributes.dataInvalid || void 0,
+			"data-is-dirty": inputDataAttributes.dataIsDirty || void 0,
+			"data-is-filled": inputDataAttributes.dataIsFilled || void 0,
+			"data-is-required": inputDataAttributes.dataIsRequired || void 0,
 			"data-rac": "",
 			className: clsx("group/static-input group/input-content group/select-content relative flex items-center gap-input-gap-input-text-to-elements", applyMinInputWidth && "min-w-input-width-min-width", inputBaseCva({
 				as,
 				variant
-			}), inputClassName),
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "flex w-full items-center gap-input-gap-input-text-to-elements",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: clsx(inputSizeCva({
+			}), !hasValue && "text-text-default-3", inputClassName),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: clsx("group/input-content flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeCva({
+					size,
+					as
+				}), contentRowClassName),
+				children: [
+					leadingVisual && /* @__PURE__ */ jsx("div", {
+						className: "pointer-events-none shrink-0",
+						children: leadingVisual
+					}),
+					as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
+						as,
 						size,
-						as
-					}), "group/input-content flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", contentRowClassName),
-					children: [
-						leadingVisual && /* @__PURE__ */ jsx("div", {
-							className: "pointer-events-none shrink-0",
-							children: leadingVisual
-						}),
-						as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
-							as,
-							size,
-							label: formFieldProps.label,
-							isRequired: formFieldProps.isRequired,
-							isDisabled: formFieldProps.isDisabled
-						}),
-						leadingContent && /* @__PURE__ */ jsx("div", {
-							className: "ml-input-side-default flex shrink-0 items-center",
-							children: leadingContent
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: clsx("w-full truncate", !hasValue && "text-text-default-3"),
-							children: [staticDisplayContent, shouldRenderFloatingLineSpacer && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" })]
-						})
-					]
-				})
+						label: formFieldProps.label,
+						isRequired: formFieldProps.isRequired,
+						isDisabled: formFieldProps.isDisabled
+					}),
+					leadingContent && /* @__PURE__ */ jsx("div", {
+						className: clsx("ml-input-side-default flex shrink-0 items-center", leadingContentClassName),
+						children: leadingContent
+					}),
+					staticDisplayContent,
+					shouldRenderFloatingLineSpacer && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }),
+					placeholder && hasValue && /* @__PURE__ */ jsx("div", {
+						className: "text-text-default-3",
+						children: placeholder
+					})
+				]
 			}), trailingContent && /* @__PURE__ */ jsx("div", {
 				className: clsx(inputSizeCva({
 					size,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.2.9-rc.19",
+  "version": "2.2.9-rc.20",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",