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

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/NumberRangeInput/NumberRangeInput.js

@@ -27,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();
@@ -40,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,
@@ -59,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
+			})]
 		})]
 	});
 };
@@ -121,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, {
@@ -138,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
@@ -146,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,
@@ -156,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
@@ -180,6 +184,10 @@ var NumberRangeInputBase = (props) => {
 							isRequired,
 							hideInnerLabels,
 							autoFocusOnMount,
+							isClearable,
+							onClear: () => {
+								clearRangeSide("min");
+							},
 							className: minInputClassName
 						}),
 						/* @__PURE__ */ jsx("span", {
@@ -199,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
-					})
-				})]
+				})
 			})
 		})
 	});
@@ -258,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;
@@ -278,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/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.23",
+  "version": "2.2.9-rc.24",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",