@povio/ui 2.2.9-rc.27 → 2.2.9-rc.29

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

@@ -235,7 +235,8 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 			isDisabled,
 			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
-			contentClassName: datePickerInputContentRowCva({ size }),
+			contentWrapperClassName: datePickerInputContentRowCva({ size }),
+			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: dateValue === null,
 				dataIsFilled: dateValue !== null,

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

@@ -636,7 +636,8 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 			isDisabled,
 			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
-			contentClassName: datePickerInputContentRowCva({ size }),
+			contentWrapperClassName: datePickerInputContentRowCva({ size }),
+			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: !hasProvidedRangeValue,
 				dataIsFilled: hasProvidedRangeValue,

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

@@ -249,7 +249,8 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 			isDisabled,
 			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
-			contentClassName: datePickerInputContentRowCva({ size }),
+			contentWrapperClassName: datePickerInputContentRowCva({ size }),
+			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: dateTimeValue === null,
 				dataIsFilled: dateTimeValue !== null,

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

@@ -192,6 +192,7 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 			isDisabled,
 			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
+			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: timeValue === null,
 				dataIsFilled: timeValue !== null,

package/dist/components/inputs/DateTime/shared/datePickerTodayIcon.js

@@ -1,20 +1,21 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
-import { buttonIconSize } from "../../../buttons/Button/button.cva.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { isValidElement } from "react";
 //#region src/components/inputs/DateTime/shared/datePickerTodayIcon.tsx
 var getDatePickerTodayIcon = (todayIcon) => {
 	if (!todayIcon) return null;
 	return todayIcon === true ? TodayIcon : todayIcon;
 };
 var renderDatePickerTodayIcon = (todayIcon, size = "none", className) => {
-	const buttonIconSizeCva = UIStyle.useCva("button.iconSize", buttonIconSize);
 	const icon = getDatePickerTodayIcon(todayIcon);
 	if (!icon) return;
-	if (isValidElement(icon)) return icon;
-	return /* @__PURE__ */ jsx(icon, { className: clsx(buttonIconSizeCva({ size }), "text-interactive-text-secondary-idle", className) });
+	return /* @__PURE__ */ jsx(InlineIconButton, {
+		label: "",
+		icon,
+		size,
+		staticRender: true,
+		className: className ?? "relative z-1 !border-none"
+	});
 };
 //#endregion
 export { getDatePickerTodayIcon, renderDatePickerTodayIcon };

package/dist/components/inputs/DateTime/shared/staticDateTimeSegments.js

@@ -56,8 +56,8 @@ var renderStaticSegments = (value, options) => {
 		className: "flex",
 		children: tokenizeStaticSegmentText(value).map((token, index) => /* @__PURE__ */ jsx(DateSegmentItemView, {
 			type: token.type,
-			text: token.text,
-			placeholder: token.text,
+			text: getStaticSegmentText(token),
+			placeholder: getStaticSegmentText(token),
 			isPlaceholder: options.isPlaceholder && token.type !== "literal",
 			isInputEmpty: options.isInputEmpty,
 			isDisabled: options.isDisabled,
@@ -72,5 +72,9 @@ var tokenizeStaticSegmentText = (value) => {
 		type: /^[^\p{Letter}\p{Number}]+$/u.test(text) ? "literal" : "day"
 	}));
 };
+var getStaticSegmentText = (token) => {
+	if (token.type !== "literal") return token.text;
+	return token.text.replaceAll(" ", "\xA0");
+};
 //#endregion
 export { getStaticCalendarDateSegments, getStaticCalendarDateTimeSegments, getStaticDateRangeSegments, getStaticTimeSegments };

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

@@ -190,7 +190,8 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 				"data-is-disabled": dataAttributes.dataIsDisabled || void 0,
 				"data-disabled": dataAttributes.dataDisabled || void 0,
 				"data-invalid": dataAttributes.dataInvalid || void 0,
-				"data-has-selection": dataAttributes.dataHasSelection || void 0
+				"data-has-selection": dataAttributes.dataHasSelection || void 0,
+				"data-rac": true
 			})
 		});
 	}

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

@@ -188,7 +188,8 @@ var TextInput = ({ renderStaticInput, ...props }) => {
 				"data-is-disabled": dataAttributes.dataIsDisabled || void 0,
 				"data-disabled": dataAttributes.dataDisabled || void 0,
 				"data-invalid": dataAttributes.dataInvalid || void 0,
-				"data-has-selection": dataAttributes.dataHasSelection || void 0
+				"data-has-selection": dataAttributes.dataHasSelection || void 0,
+				"data-rac": true
 			})
 		});
 	}

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

@@ -79,6 +79,8 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			isDisabled,
 			className: clsx("w-full", props.containerClassName),
 			inputClassName: clsx(props.className, props.inputClassName),
+			contentWrapperClassName: "flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate",
+			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: isEmpty,
 				dataIsFilled: !isEmpty,
@@ -98,7 +100,7 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			as,
 			size: props.size ?? ui.input.size,
 			variant: props.variant ?? ui.input.variant,
-			actionContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
+			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
 				className: "ml-input-side-default flex shrink-0 items-center",
 				children: props.leadingContent
 			}),

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

@@ -68,8 +68,7 @@ function Select({ renderStaticInput, ...props }) {
 		});
 		const trailingContent = props.trailingContent || !props.hideDropdownIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [props.trailingContent, !props.hideDropdownIcon ? /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: `size-6 shrink-0 ${isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle"}` }) : void 0] }) : void 0;
 		const placeholder = as === "floating" ? null : props.placeholder;
-		const shouldRenderPlaceholderAfterValue = mode !== "single" && props.placeholder && !isEmpty;
-		return /* @__PURE__ */ jsxs(InputFrame, {
+		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
 			isHeaderHidden: props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
 			hideLabel: props.hideLabel ?? ui.input.hideLabel,
@@ -77,6 +76,7 @@ function Select({ renderStaticInput, ...props }) {
 			className: clsx("w-full", props.containerClassName),
 			inputClassName: clsx(props.className, props.inputClassName),
 			typographySize: "label-1",
+			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: isEmpty,
 				dataIsFilled: !isEmpty,
@@ -96,20 +96,17 @@ function Select({ renderStaticInput, ...props }) {
 			as,
 			size: props.size ?? ui.input.size,
 			variant: props.variant ?? ui.input.variant,
-			actionContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
+			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
 				className: "ml-input-side-default flex shrink-0 items-center",
 				children: props.leadingContent
 			}),
 			isClearable,
 			showClear: false,
 			trailingContent,
-			children: [isEmpty ? /* @__PURE__ */ jsx("span", {
+			children: isEmpty ? /* @__PURE__ */ jsx("span", {
 				className: "text-text-default-3",
 				children: placeholder
-			}) : displayValue, shouldRenderPlaceholderAfterValue && /* @__PURE__ */ jsx("div", {
-				className: "shrink-0 text-text-default-3",
-				children: props.placeholder
-			})]
+			}) : displayValue
 		});
 	}
 	return /* @__PURE__ */ jsx(_Select, {

package/dist/components/inputs/Selection/shared/select.context.js

@@ -44,7 +44,12 @@ var SelectContext;
 			hasLoadMore,
 			isClientSearchDisabled: ignoreInputValueFiltering ?? isClientSearchDisabled
 		});
-		const selectedItems = useMemo(() => allItems.filter(({ id }) => Array.isArray(fieldState.value) ? fieldState.value.includes(id) : id === fieldState.value), [allItems, fieldState.value]);
+		const selectedItems = useMemo(() => {
+			const getItem = (id) => allItems.find((item) => item.id === id) ?? null;
+			if (Array.isArray(fieldState.value)) return fieldState.value.map((id) => getItem(id)).filter((item) => item !== null);
+			const selectedItem = fieldState.value != null ? getItem(fieldState.value) : null;
+			return selectedItem ? [selectedItem] : [];
+		}, [allItems, fieldState.value]);
 		const selectedIds = useMemo(() => selectedItems.map(({ id }) => id), [selectedItems]);
 		const getItem = useCallback((value) => allItems.find((item) => item && item.id === value) ?? null, [allItems]);
 		const updateValue = useCallback((value) => {

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

@@ -8,8 +8,7 @@ var getStaticSelectValue = ({ items, value, selectionMode, initialSelection, map
 	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 getItem = (id) => allItemsMap.get(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/Selection/shared/staticSelect.utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/Skeleton/InputFrame.d.ts

@@ -22,6 +22,7 @@ interface InputFrameDataAttributes {
     dataIsFilled?: boolean;
     dataIsRequired?: boolean;
 }
+type InputFrameLabelPlacement = "content-wrapper" | "content-row";
 export interface InputFrameProps extends InputVariantProps, Partial<FormFieldProps> {
     ref?: Ref<HTMLDivElement>;
     children: ReactNode;
@@ -48,7 +49,8 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     inputClassName?: string;
     contentClassName?: string;
     contentWrapperClassName?: string;
+    labelPlacement?: InputFrameLabelPlacement;
     trailingClassName?: string;
 }
-export declare const InputFrame: ({ ref, children, formFieldRef, labelProps, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, inputClassName, contentClassName, contentWrapperClassName, trailingClassName, variant, as, size, }: InputFrameProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputFrame: ({ ref, children, formFieldRef, labelProps, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, inputClassName, contentClassName, contentWrapperClassName, labelPlacement, trailingClassName, variant, as, size, }: InputFrameProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/Skeleton/InputFrame.js

@@ -11,7 +11,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isValidElement } from "react";
 //#region src/components/inputs/Skeleton/InputFrame.tsx
-var InputFrame = ({ ref, children, formFieldRef, labelProps, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, inputClassName, contentClassName, contentWrapperClassName, trailingClassName, variant, as, size }) => {
+var InputFrame = ({ ref, children, formFieldRef, labelProps, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, inputClassName, contentClassName, contentWrapperClassName, labelPlacement = "content-wrapper", trailingClassName, variant, as, size }) => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const inputContentWrapperCva = UIStyle.useCva("input.contentWrapperCva", inputContentWrapper);
@@ -47,6 +47,11 @@ var InputFrame = ({ ref, children, formFieldRef, labelProps, headerProps, error,
 		className: headerClassName,
 		labelProps
 	};
+	const labelContent = as && ["filter", "floating"].includes(as) ? /* @__PURE__ */ jsx(FormFieldLabel, {
+		as,
+		size,
+		...resolvedHeaderProps
+	}) : null;
 	return /* @__PURE__ */ jsx(TooltipWrapper, {
 		as,
 		error,
@@ -92,14 +97,14 @@ var InputFrame = ({ ref, children, formFieldRef, labelProps, headerProps, error,
 							className: clsx(!isLeadingIconElement && "pointer-events-none"),
 							children: renderIconVisual(leadingIcon)
 						}),
+						labelPlacement === "content-row" && labelContent,
 						/* @__PURE__ */ jsxs("div", {
-							className: clsx(inputContentWrapperCva({ as }), contentWrapperClassName),
+							className: inputContentWrapperCva({
+								as,
+								className: contentWrapperClassName
+							}),
 							children: [
-								as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
-									as,
-									size,
-									...resolvedHeaderProps
-								}),
+								labelPlacement === "content-wrapper" && labelContent,
 								actionContent,
 								children
 							]

package/package.json

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