@povio/ui 2.2.9-rc.21 → 2.2.9-rc.23

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

@@ -618,14 +618,6 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const defaultDatePlaceholder = DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros });
 		const hasProvidedRangeValue = !!(rawValue?.start || rawValue?.end);
-		const staticPlaceholder = 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);
@@ -634,15 +626,20 @@ 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(Fragment, { children: [
-			/* @__PURE__ */ jsx("span", { children: start }),
+		const displayValue = /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: rawValue?.start ? "" : "text-text-default-3",
+				children: rawValue?.start ? start : defaultDatePlaceholder
+			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "pointer-events-none select-none",
 				children: "–"
 			}),
-			/* @__PURE__ */ jsx("span", { children: end })
-		] }) : void 0;
+			/* @__PURE__ */ jsx("span", {
+				className: rawValue?.end ? "" : "text-text-default-3",
+				children: rawValue?.end ? end : defaultDatePlaceholder
+			})
+		] });
 		return /* @__PURE__ */ jsx(StaticInput, {
 			...props,
 			onInteract: (focus) => {
@@ -657,18 +654,16 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 			hideLabel,
 			isHeaderHidden,
 			isDisabled,
-			placeholder: staticPlaceholder,
 			displayValue,
-			isEmpty: !hasProvidedRangeValue,
 			dataAttributes: {
-				dataIsEmpty: !hasRangeValue,
-				dataIsFilled: hasRangeValue,
+				dataIsEmpty: !hasProvidedRangeValue,
+				dataIsFilled: hasProvidedRangeValue,
 				dataIsDirty: props.isDirty,
 				dataIsRequired: props.isRequired,
 				dataIsDisabled: isDisabled,
 				dataDisabled: isDisabled,
 				dataInvalid: !!props.error,
-				dataHasSelection: hasRangeValue
+				dataHasSelection: hasProvidedRangeValue
 			},
 			contentRowClassName: datePickerInputContentRowCva({ size }),
 			leadingContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),

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

@@ -6,6 +6,7 @@ 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 { getStaticNumberDisplayValue } from "../shared/numberStatic.utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isValidElement, useCallback, useEffect, useRef, useState } from "react";
@@ -145,7 +146,7 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 	if (!renderInput) {
 		const staticValue = watchedValue ?? props.value ?? props.defaultValue;
 		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
-		const displayValue = staticValue == null ? "" : new Intl.NumberFormat(locale, formatOptions).format(staticValue);
+		const displayValue = getStaticNumberDisplayValue(staticValue, new Intl.NumberFormat(locale, formatOptions)) ?? "";
 		const hasValue = displayValue !== "";
 		const as = props.as ?? ui.input.as;
 		const size = props.size ?? ui.input.size;
@@ -181,12 +182,12 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 			displayValue,
 			isEmpty: !hasValue,
 			dataAttributes: {
-				dataIsEmpty: !staticValue,
-				dataIsFilled: !(`${staticValue}` === "" || staticValue === null || staticValue === void 0),
+				dataIsEmpty: !hasValue,
+				dataIsFilled: hasValue,
 				dataIsDirty: props.isDirty,
 				dataIsRequired: props.isRequired,
-				dataIsDisabled: isDisabled,
-				dataDisabled: isDisabled,
+				dataIsDisabled: props.isDisabled,
+				dataDisabled: props.isDisabled,
 				dataInvalid: !!props.error,
 				dataHasSelection: hasValue
 			},

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

@@ -6,6 +6,7 @@ import { inputBase, inputSize } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
 import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { getStaticNumberDisplayValue } from "../shared/numberStatic.utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useRef, useState } from "react";
@@ -234,13 +235,13 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
 		const staticValue = normalizeRangeValue(watchedValue, props.minValue, props.maxValue);
 		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
 		const formatter = new Intl.NumberFormat(locale, formatOptions);
-		const minDisplay = staticValue.min == null ? null : formatter.format(staticValue.min);
-		const maxDisplay = staticValue.max == null ? null : formatter.format(staticValue.max);
-		const hasValue = minDisplay !== "" || maxDisplay !== "";
+		const minDisplay = getStaticNumberDisplayValue(staticValue.min, formatter);
+		const maxDisplay = getStaticNumberDisplayValue(staticValue.max, formatter);
+		const hasValue = minDisplay !== null || maxDisplay !== null;
 		const displayValue = /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx("span", {
 				className: clsx("w-full bg-transparent outline-none", minDisplay ? props.minInputClassName : "text-text-default-3"),
-				children: minDisplay ?? props.minPlaceholder
+				children: minDisplay ?? props.minPlaceholder ?? "Min"
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "pointer-events-none shrink-0 select-none text-label-2 text-text-default-3",
@@ -248,7 +249,7 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: clsx("w-full bg-transparent outline-none", maxDisplay ? props.maxInputClassName : "text-text-default-3"),
-				children: maxDisplay ?? props.maxPlaceholder
+				children: maxDisplay ?? props.maxPlaceholder ?? "Max"
 			})
 		] });
 		const rangeError = staticValue.min !== null && staticValue.max !== null && staticValue.min > staticValue.max ? props.invalidRangeError ?? "Minimum cannot be greater than maximum" : void 0;
@@ -257,6 +258,7 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
 		const size = props.size ?? ui.input.size;
 		const variant = props.variant ?? ui.input.variant;
 		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
+		const isClearable = props.isClearable ?? ui.input.isClearable;
 		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
 		let isDisabled = !!props.isDisabled;
 		if (isFormControlDisabled) isDisabled = true;
@@ -276,10 +278,8 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
 			className: clsx("group w-full", as === "inline" && "h-full", props.className),
 			inputClassName: props.inputClassName,
 			displayValue,
-			trailingContent: /* @__PURE__ */ jsx(InputClear, {
-				show: !hasValue && !props.isDisabled && props.isClearable,
-				onClear: () => {}
-			}),
+			isEmpty: !hasValue,
+			hasClearIcon: !props.isDisabled && isClearable,
 			dataAttributes: {
 				dataIsEmpty: !hasValue,
 				dataIsFilled: hasValue,

package/dist/components/inputs/Input/shared/numberStatic.utils.d.ts

@@ -0,0 +1 @@
+export declare const getStaticNumberDisplayValue: (value: unknown, formatter: Intl.NumberFormat) => string | null;

package/dist/components/inputs/Input/shared/numberStatic.utils.js

@@ -0,0 +1,7 @@
+//#region src/components/inputs/Input/shared/numberStatic.utils.ts
+var getStaticNumberDisplayValue = (value, formatter) => {
+	if (typeof value !== "number" || !Number.isFinite(value)) return null;
+	return formatter.format(value);
+};
+//#endregion
+export { getStaticNumberDisplayValue };

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

@@ -53,6 +53,7 @@ function Select({ renderStaticInput, ...props }) {
 		const as = props.as ?? ui.input.as;
 		let isDisabled = !!props.isDisabled;
 		if (isFormControlDisabled) isDisabled = true;
+		const isClearable = props.isClearable ?? ui.input.isClearable;
 		const mode = props.selectionMode ?? ui.select.selectionMode;
 		const { displayValue, isEmpty } = getStaticSelectValue({
 			items: props.items,
@@ -97,6 +98,7 @@ function Select({ renderStaticInput, ...props }) {
 				dataHasSearch: false
 			},
 			leadingContent: props.leadingContent,
+			hasClearIcon: isClearable,
 			trailingContent
 		});
 	}

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

@@ -27,7 +27,10 @@ var getStaticSelectValue = ({ items, value, selectionMode, initialSelection, map
 	return {
 		selectedItem,
 		selectedItems,
-		displayValue: selectedItem != null ? showSelectionContent && selectedItem.content ? selectedItem.content : selectedItem.label : "",
+		displayValue: selectedItem != null ? showSelectionContent && selectedItem.content ? selectedItem.content : /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1 truncate",
+			children: selectedItem.label
+		}) : "",
 		isEmpty: selectedItem == null
 	};
 };

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

@@ -28,10 +28,11 @@ interface StaticInputProps extends FormFieldProps {
     leadingVisual?: ReactNode;
     leadingContent?: ReactNode;
     leadingContentClassName?: string;
+    hasClearIcon?: boolean;
     trailingContent?: ReactNode;
     contentRowClassName?: string;
     inputClassName?: string;
     dataAttributes?: StaticInputDataAttributes;
 }
-export declare const StaticInput: ({ onInteract, as, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StaticInput: ({ onInteract, as, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, hasClearIcon, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,7 +6,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, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled = false, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }) => {
+var StaticInput = ({ onInteract, as, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled = false, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, hasClearIcon, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }) => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const typographyCva = UIStyle.useCva("typography.cva", typography);
@@ -48,42 +48,55 @@ var StaticInput = ({ onInteract, as, typographySize, size, variant, applyMinInpu
 			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
-			}), !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
-				}), typographySize && typographyCva({ size: typographySize }), contentRowClassName),
-				children: [
-					leadingVisual && /* @__PURE__ */ jsx("div", {
-						className: "pointer-events-none shrink-0",
-						children: leadingVisual
-					}),
-					as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
-						as,
+			}), inputClassName),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: clsx("group/input-content flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeCva({
 						size,
-						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" }),
-					shouldRenderPlaceholderAfterValue && /* @__PURE__ */ jsx("div", {
-						className: "text-text-default-3",
-						children: placeholder
-					})
-				]
-			}), trailingContent && /* @__PURE__ */ jsx("div", {
-				className: clsx(inputSizeCva({
-					size,
-					as
-				}), "pointer-events-none flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
-				children: trailingContent
-			})]
+						as
+					}), typographySize && typographyCva({ size: typographySize }), 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: clsx("ml-input-side-default flex shrink-0 items-center", leadingContentClassName),
+							children: leadingContent
+						}),
+						!hasValue ? /* @__PURE__ */ jsx("div", {
+							className: "text-text-default-3",
+							children: staticDisplayContent
+						}) : staticDisplayContent,
+						shouldRenderFloatingLineSpacer && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }),
+						shouldRenderPlaceholderAfterValue && /* @__PURE__ */ jsx("div", {
+							className: "shrink-0 text-text-default-3",
+							children: placeholder
+						})
+					]
+				}),
+				hasClearIcon && /* @__PURE__ */ jsx("div", {
+					className: clsx("flex items-center gap-input-gap-trailing-elements py-0! pl-0!", inputSizeCva({
+						size,
+						as
+					})),
+					children: /* @__PURE__ */ jsx("div", { className: "size-6 shrink-0" })
+				}),
+				trailingContent && /* @__PURE__ */ jsx("div", {
+					className: clsx(inputSizeCva({
+						size,
+						as
+					}), "pointer-events-none flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
+					children: trailingContent
+				})
+			]
 		})
 	});
 };

package/package.json

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