@povio/ui 2.2.9-rc.22 → 2.2.9-rc.24

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/DateTime/shared/DatePickerInput.js

@@ -75,15 +75,16 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 	const pickerIcon = isDateTime ? uiConfig.dateInput.dateTimeIcon : uiConfig.dateInput.calendarIcon;
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
-		className: clsx(inputBaseCva({
+		className: clsx("group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", inputBaseCva({
 			variant,
 			as,
 			...props
-		}), "group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", className),
+		}), className),
 		"data-rac": "",
 		"data-datetime-input": "",
 		"data-hovered": isHovered || void 0,
 		"data-disabled": isDisabled || void 0,
+		"data-is-disabled": isDisabled || void 0,
 		"data-invalid": isInvalid || void 0,
 		"data-is-empty": fieldProps.value === null || void 0,
 		"data-focus-within": isFocused || void 0,
@@ -96,10 +97,10 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 		...focusWithinProps,
 		...hoverProps,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: clsx(inputSizeCva({
+			className: clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeCva({
 				size,
 				as
-			}), "flex w-full items-center gap-input-gap-input-text-to-elements pr-0!"),
+			})),
 			children: [as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
 				as,
 				...headerProps

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

@@ -33,6 +33,7 @@ var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequ
 		"data-datetime-input": "",
 		"data-hovered": isHovered || void 0,
 		"data-disabled": isDisabled || void 0,
+		"data-is-disabled": isDisabled || void 0,
 		"data-invalid": isInvalid || void 0,
 		"data-is-empty": state.value === null || void 0,
 		"data-focus-within": isFocused || void 0,

package/dist/components/inputs/File/FileUpload.js

@@ -128,6 +128,7 @@ var FileUploadBase = (props) => {
 				...rest,
 				"data-rac": "",
 				"data-disabled": isDisabled || void 0,
+				"data-is-disabled": isDisabled || void 0,
 				"data-invalid": !!error || void 0,
 				"data-multiple": allowsMultiple || void 0,
 				"data-has-files": uploadState.length > 0 || void 0,

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

@@ -21,6 +21,7 @@ var InputUploadContent = (props) => {
 		children: /* @__PURE__ */ jsxs("div", {
 			"data-rac": "",
 			"data-disabled": isDisabled || void 0,
+			"data-is-disabled": isDisabled || void 0,
 			"data-invalid": !!error || void 0,
 			className: inputUploadButton({
 				variant,

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,8 +182,8 @@ 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: props.isDisabled,

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";
@@ -26,7 +27,7 @@ var normalizeRangeValue = (value, minValue, maxValue) => {
 		max: maxValue ?? null
 	};
 };
-var NumberRangeField = ({ label, value, placeholder, isDisabled, isInvalid, isRequired, formatOptions, hideInnerLabels, autoFocusOnMount, className, onChange, onBlur, ...rest }) => {
+var NumberRangeField = ({ label, value, placeholder, isDisabled, isInvalid, isRequired, formatOptions, hideInnerLabels, autoFocusOnMount, isClearable, className, onChange, onClear, onBlur, ...rest }) => {
 	const ui = UIConfig.useConfig();
 	const { locale } = useLocale();
 	const { isFocusVisible } = useFocusVisible();
@@ -39,7 +40,7 @@ var NumberRangeField = ({ label, value, placeholder, isDisabled, isInvalid, isRe
 	const numberProps = {
 		...rest,
 		label,
-		value: value ?? void 0,
+		value: value ?? NaN,
 		placeholder,
 		isDisabled,
 		isInvalid,
@@ -58,15 +59,21 @@ var NumberRangeField = ({ label, value, placeholder, isDisabled, isInvalid, isRe
 			isRequired,
 			isDisabled,
 			className: clsx(hideInnerLabels && "sr-only")
-		}), /* @__PURE__ */ jsx(Input, {
-			...inputProps,
-			ref: mergeRefs(inputRef, numberFieldRef),
-			placeholder: inputProps.placeholder,
-			className: clsx("w-full bg-transparent outline-none", className),
-			onFocus: (e) => {
-				inputProps.onFocus?.(e);
-				if (isFocusVisible) e.target.select();
-			}
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-input-gap-trailing-elements",
+			children: [/* @__PURE__ */ jsx(Input, {
+				...inputProps,
+				ref: mergeRefs(inputRef, numberFieldRef),
+				placeholder: inputProps.placeholder,
+				className: clsx("w-full min-w-0 bg-transparent outline-none", className),
+				onFocus: (e) => {
+					inputProps.onFocus?.(e);
+					if (isFocusVisible) e.target.select();
+				}
+			}), isClearable && /* @__PURE__ */ jsx(InputClear, {
+				onClear,
+				show: value !== null && !isDisabled
+			})]
 		})]
 	});
 };
@@ -120,11 +127,8 @@ var NumberRangeInputBase = (props) => {
 		if (side === "min") onMinChange?.(nextValue);
 		else onMaxChange?.(nextValue);
 	};
-	const onClear = () => {
-		const nextRange = { ...EMPTY_RANGE };
-		onChange?.(nextRange);
-		onMinChange?.(null);
-		onMaxChange?.(null);
+	const clearRangeSide = (side) => {
+		updateRange(side, null);
 		onBlur?.({ target: { value: "" } });
 	};
 	return /* @__PURE__ */ jsx(TooltipWrapper, {
@@ -137,7 +141,7 @@ var NumberRangeInputBase = (props) => {
 			as,
 			className: clsx("group w-full", className),
 			tabIndex: as === "inline" ? -1 : void 0,
-			children: /* @__PURE__ */ jsxs("div", {
+			children: /* @__PURE__ */ jsx("div", {
 				className: clsx(inputBaseCva({
 					variant,
 					as
@@ -145,6 +149,7 @@ var NumberRangeInputBase = (props) => {
 				"data-rac": "",
 				"data-hovered": isHovered || void 0,
 				"data-disabled": isDisabled || void 0,
+				"data-is-disabled": isDisabled || void 0,
 				"data-invalid": !!effectiveError || void 0,
 				"data-is-empty": isEmpty || void 0,
 				"data-focus-within": isFocused || void 0,
@@ -155,7 +160,7 @@ var NumberRangeInputBase = (props) => {
 				"data-is-filled": !isEmpty || void 0,
 				...focusWithinProps,
 				...hoverProps,
-				children: [/* @__PURE__ */ jsxs("div", {
+				children: /* @__PURE__ */ jsxs("div", {
 					className: clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeCva({
 						size,
 						as
@@ -179,6 +184,10 @@ var NumberRangeInputBase = (props) => {
 							isRequired,
 							hideInnerLabels,
 							autoFocusOnMount,
+							isClearable,
+							onClear: () => {
+								clearRangeSide("min");
+							},
 							className: minInputClassName
 						}),
 						/* @__PURE__ */ jsx("span", {
@@ -198,19 +207,14 @@ var NumberRangeInputBase = (props) => {
 							isInvalid: !!effectiveError,
 							isRequired,
 							hideInnerLabels,
+							isClearable,
+							onClear: () => {
+								clearRangeSide("max");
+							},
 							className: maxInputClassName
 						})
 					]
-				}), /* @__PURE__ */ jsx("div", {
-					className: clsx("flex items-center gap-input-gap-trailing-elements py-0! pl-0!", inputSizeCva({
-						size,
-						as
-					})),
-					children: isClearable && /* @__PURE__ */ jsx(InputClear, {
-						onClear,
-						show: !isEmpty && !isDisabled
-					})
-				})]
+				})
 			})
 		})
 	});
@@ -234,13 +238,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 +252,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,7 +261,6 @@ 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;
@@ -277,8 +280,6 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
 			className: clsx("group w-full", as === "inline" && "h-full", props.className),
 			inputClassName: props.inputClassName,
 			displayValue,
-			isEmpty: !hasValue,
-			hasClearIcon: !props.isDisabled && isClearable,
 			dataAttributes: {
 				dataIsEmpty: !hasValue,
 				dataIsFilled: hasValue,

package/dist/components/inputs/Input/shared/InputContent.js

@@ -18,10 +18,10 @@ var InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex w-full items-center gap-input-gap-input-text-to-elements",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: clsx(inputSizeCva({
+			className: clsx("group/input-content flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", as === "inline" && "h-full", inputSizeCva({
 				size,
 				as
-			}), "group/input-content flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", as === "inline" && "h-full"),
+			})),
 			children: [LeadingIcon && /* @__PURE__ */ jsx("div", {
 				className: clsx(!isLeadingIconElement && "pointer-events-none"),
 				children: isLeadingIconElement ? LeadingIcon : /* @__PURE__ */ jsx(LeadingIcon, { className: "size-6 text-interactive-text-secondary-idle" })
@@ -34,10 +34,10 @@ var InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit
 				}), children]
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: clsx(inputSizeCva({
+			className: clsx("flex items-center gap-input-gap-trailing-elements py-0! pl-0!", inputSizeCva({
 				size,
 				as
-			}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!", !isTrailingIconElement && !action && !(isClearable && showClear) && "pointer-events-none"),
+			}), !isTrailingIconElement && !action && !(isClearable && showClear) && "pointer-events-none"),
 			children: [
 				isClearable && /* @__PURE__ */ jsx(InputClear, {
 					onClear: () => {

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/shared/SelectInput.js

@@ -71,6 +71,7 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 		}),
 		"data-rac": "",
 		"data-disabled": isDisabled || void 0,
+		"data-is-disabled": isDisabled || void 0,
 		"data-hovered": isHovered || void 0,
 		"data-focused": isOpen || isFocused || void 0,
 		"data-focus-within": isFocused || void 0,

package/dist/components/inputs/TextEditor/TextEditor.js

@@ -106,6 +106,7 @@ var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tool
 			"data-rac": "",
 			"data-hovered": isHovered || void 0,
 			"data-disabled": isDisabled || void 0,
+			"data-is-disabled": isDisabled || void 0,
 			"data-focus-within": isFocused || void 0,
 			"data-focus-visible": isFocused && isFocusVisible || void 0,
 			"data-is-filled": !editor?.isEmpty,

package/package.json

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