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

package/dist/NumberRangeInput-BsATw2M1.js

@@ -0,0 +1,403 @@
+import { t as UIConfig } from "./uiConfig.context-SBtRegKv.js";
+import { r as FormFieldLabel, t as FormField } from "./FormField-DoGaUqFm.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { m as $507fabe10e71c6fb$export$ffd9e5021c1fb2d6, t as $6179b936705e76d3$export$ae780daf29e6d456, z as $5dc95899b306f630$export$c9058316764c140e } from "./useHover-DwfnacVy.js";
+import { t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-CLFkoJMP.js";
+import { n as $9ab94262bd0047c7$export$420e68273165f4ec } from "./useFocusRing-DuXtCnJj.js";
+import { n as $81397a9303501bda$export$23f548e970bdf099, r as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, t as getStaticNumberDisplayValue } from "./numberStatic.utils-C9_kWMXJ.js";
+import { n as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "./Input-TO1R-KsB.js";
+import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
+import { t as FieldController } from "./form.binding-DyZ4fH8l.js";
+import { r as InputClear, t as TooltipWrapper } from "./TooltipWrapper-CLMp_zj4.js";
+import { a as inputSizeDefinition, t as inputBaseDefinition } from "./input.cva-KYGD4Bdz.js";
+import { n as InputFrame, t as useStaticInputHandoff } from "./useStaticInputHandoff-COJdSrME.js";
+import { t as IntlUtils } from "./intl.utils-zwAFoZ0U.js";
+import { memo, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/Input/NumberRangeInput/NumberRangeField.tsx
+const NumberRangeValueField = ({ label, value, placeholder, isDisabled, isInvalid, isRequired, formatOptions, hideInnerLabels, autoFocusOnMount, isClearable, isClearableIfDisabled, className, onChange, onClear, onBlur, ...rest }) => {
+	const ui = UIConfig.useConfig();
+	const { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+	const { isFocusVisible } = $507fabe10e71c6fb$export$ffd9e5021c1fb2d6();
+	const inputRef = useRef(null);
+	const numberFieldRef = useRef(null);
+	useEffect(() => {
+		if (!autoFocusOnMount || isDisabled) return;
+		requestAnimationFrame(() => inputRef.current?.focus());
+	}, [autoFocusOnMount, isDisabled]);
+	const numberProps = {
+		...rest,
+		label,
+		value: value ?? NaN,
+		placeholder,
+		isDisabled,
+		isInvalid,
+		isRequired,
+		onChange,
+		onBlur: (e) => onBlur?.({ target: e.target }),
+		locale,
+		formatOptions: formatOptions ?? ui.numberInput.formatOptions
+	};
+	const state = $de67e98908f0c6ee$export$7f629e9dc1ecf37c(numberProps);
+	const { labelProps, inputProps } = $81397a9303501bda$export$23f548e970bdf099(numberProps, state, numberFieldRef);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0 flex-1",
+		children: [/* @__PURE__ */ jsx(FormFieldLabel, {
+			label,
+			labelProps,
+			isRequired,
+			isDisabled,
+			className: clsx(hideInnerLabels && "sr-only")
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-input-gap-trailing-elements",
+			children: [/* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, {
+				...inputProps,
+				ref: $5dc95899b306f630$export$c9058316764c140e(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 && (!isDisabled || isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
+				onClear,
+				show: value !== null
+			})]
+		})]
+	});
+};
+const NumberRangeField = ({ ref, as, className, inputClassName, minInputClassName, maxInputClassName, inputBaseClassName, inputSizeClassName, formFieldProps, headerProps, rangeValue, effectiveError, minPlaceholder, maxPlaceholder, minLabel, maxLabel, hideInnerLabels, isDirty, isClearable, isClearableIfDisabled, autoFocusOnMount, isDisabled, isRequired, isEmpty, isHovered, isFocused, isFocusVisible, focusWithinProps, hoverProps, onRangeSideChange, onRangeSideClear, onBlur, ...numberFieldProps }) => /* @__PURE__ */ jsx(TooltipWrapper, {
+	as,
+	error: effectiveError,
+	triggerTabIndex: as === "inline" ? -1 : void 0,
+	children: /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		ref,
+		as,
+		className: clsx("group w-full", className),
+		tabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsx("div", {
+			className: clsx(inputBaseClassName, "group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", inputClassName),
+			"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,
+			"data-focus-visible": isFocused && isFocusVisible || void 0,
+			"data-has-selection": !isEmpty || void 0,
+			"data-is-dirty": isDirty || void 0,
+			"data-is-required": isRequired || void 0,
+			"data-is-filled": !isEmpty || void 0,
+			...focusWithinProps,
+			...hoverProps,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeClassName),
+				children: [
+					as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+						as,
+						...headerProps
+					}),
+					/* @__PURE__ */ jsx(NumberRangeValueField, {
+						...numberFieldProps,
+						label: minLabel,
+						placeholder: minPlaceholder,
+						value: rangeValue.min,
+						onChange: (nextValue) => {
+							onRangeSideChange("min", nextValue);
+						},
+						onBlur,
+						isDisabled,
+						isInvalid: !!effectiveError,
+						isRequired,
+						hideInnerLabels,
+						autoFocusOnMount,
+						isClearable,
+						isClearableIfDisabled,
+						onClear: () => {
+							onRangeSideClear("min");
+						},
+						className: minInputClassName
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: clsx("pointer-events-none shrink-0 select-none text-label-2 text-text-default-3", isDisabled && "text-interactive-text-secondary-disabled"),
+						children: "-"
+					}),
+					/* @__PURE__ */ jsx(NumberRangeValueField, {
+						...numberFieldProps,
+						label: maxLabel,
+						placeholder: maxPlaceholder,
+						value: rangeValue.max,
+						onChange: (nextValue) => {
+							onRangeSideChange("max", nextValue);
+						},
+						onBlur,
+						isDisabled,
+						isInvalid: !!effectiveError,
+						isRequired,
+						hideInnerLabels,
+						isClearable,
+						isClearableIfDisabled,
+						onClear: () => {
+							onRangeSideClear("max");
+						},
+						className: maxInputClassName
+					})
+				]
+			})
+		})
+	})
+});
+//#endregion
+//#region src/components/inputs/Input/NumberRangeInput/NumberRangeInput.tsx
+const EMPTY_RANGE = {
+	min: null,
+	max: null
+};
+const normalizeRangeValue = (value, minValue, maxValue) => {
+	if (value) return value;
+	return {
+		min: minValue ?? null,
+		max: maxValue ?? null
+	};
+};
+const NumberRangeInputBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, inputClassName, minInputClassName, maxInputClassName, value, minValue, maxValue, minPlaceholder = "Min", maxPlaceholder = "Max", minLabel = "Minimum", maxLabel = "Maximum", invalidRangeError = "Minimum cannot be greater than maximum", hideInnerLabels = true, isDirty, autoFocusOnMount, onChange, onMinChange, onMaxChange, onBlur, isClearable: isClearableProps, isClearableIfDisabled, as: asProp, variant: variantProps, size: sizeProps, hideLabel: hideLabelProps, ...rest } = props;
+	const isClearable = isClearableProps ?? ui.input.isClearable;
+	const as = asProp ?? ui.input.as;
+	const variant = variantProps ?? ui.input.variant;
+	const size = sizeProps ?? ui.input.size;
+	const hideLabel = hideLabelProps ?? ui.input.hideLabel;
+	const rangeValue = normalizeRangeValue(value, minValue, maxValue);
+	const isEmpty = rangeValue.min === null && rangeValue.max === null;
+	const rangeError = rangeValue.min !== null && rangeValue.max !== null && rangeValue.min > rangeValue.max ? invalidRangeError : void 0;
+	const effectiveError = error || rangeError;
+	const { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({ isDisabled });
+	const { isFocusVisible } = $507fabe10e71c6fb$export$ffd9e5021c1fb2d6();
+	const [isFocused, setIsFocused] = useState(false);
+	const { focusWithinProps } = $9ab94262bd0047c7$export$420e68273165f4ec({ onFocusWithinChange: setIsFocused });
+	const formFieldProps = {
+		error: effectiveError,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName
+	};
+	const updateRange = (side, nextValue) => {
+		const nextRange = {
+			...rangeValue,
+			[side]: nextValue
+		};
+		onChange?.(nextRange);
+		if (side === "min") onMinChange?.(nextValue);
+		else onMaxChange?.(nextValue);
+	};
+	const clearRangeSide = (side) => {
+		updateRange(side, null);
+		onBlur?.({ target: { value: "" } });
+	};
+	return /* @__PURE__ */ jsx(NumberRangeField, {
+		...rest,
+		ref,
+		as,
+		className,
+		inputClassName,
+		minInputClassName,
+		maxInputClassName,
+		inputBaseClassName: inputBaseCva({
+			variant,
+			as
+		}),
+		inputSizeClassName: inputSizeCva({
+			size,
+			as
+		}),
+		formFieldProps,
+		headerProps,
+		rangeValue,
+		effectiveError,
+		minPlaceholder,
+		maxPlaceholder,
+		minLabel,
+		maxLabel,
+		hideInnerLabels,
+		isDirty,
+		isClearable,
+		isClearableIfDisabled,
+		autoFocusOnMount,
+		isDisabled,
+		isRequired,
+		isEmpty,
+		isHovered,
+		isFocused,
+		isFocusVisible,
+		focusWithinProps,
+		hoverProps,
+		onRangeSideChange: updateRange,
+		onRangeSideClear: clearRangeSide,
+		onBlur
+	});
+};
+const NumberRangeInputInner = ({ renderStaticInput, isFormControlDisabled, ...props }) => {
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
+	const ui = UIConfig.useConfig();
+	const { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const inputRef = useRef(null);
+	const { shouldFocus, renderRealInput } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput
+	});
+	if (!renderInput) {
+		const staticValue = normalizeRangeValue(props.value, props.minValue, props.maxValue);
+		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
+		const formatter = IntlUtils.getNumberFormatter(locale, formatOptions);
+		const minDisplay = getStaticNumberDisplayValue(staticValue.min, formatter);
+		const maxDisplay = getStaticNumberDisplayValue(staticValue.max, formatter);
+		const hasValue = minDisplay !== null || maxDisplay !== null;
+		const rangeError = staticValue.min !== null && staticValue.max !== null && staticValue.min > staticValue.max ? props.invalidRangeError ?? "Minimum cannot be greater than maximum" : void 0;
+		const effectiveError = props.error || rangeError;
+		const as = props.as ?? ui.input.as;
+		const size = props.size ?? ui.input.size;
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		const isClearable = props.isClearable ?? ui.input.isClearable;
+		const dataAttributes = {
+			dataIsEmpty: !hasValue,
+			dataIsFilled: hasValue,
+			dataIsDirty: props.isDirty,
+			dataIsRequired: props.isRequired,
+			dataIsDisabled: isDisabled,
+			dataDisabled: isDisabled,
+			dataInvalid: !!effectiveError,
+			dataHasSelection: hasValue
+		};
+		return /* @__PURE__ */ jsx(InputFrame, {
+			...props,
+			error: effectiveError,
+			isDisabled,
+			className: clsx("group w-full", as === "inline" && "h-full", props.className),
+			inputClassName: props.inputClassName,
+			contentClassName: "pr-0!",
+			trailingClassName: "py-0! pl-0!",
+			contentWrapperClassName: clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0! py-0! px-0!", inputSizeCva({
+				size,
+				as
+			})),
+			dataAttributes,
+			onStaticInteract: renderRealInput,
+			isClearable: false,
+			labelPlacement: "content-wrapper",
+			children: ({ id, ...dataAttributeProps }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx(FormFieldLabel, {
+						label: props.minLabel ?? "Minimum",
+						isRequired: props.isRequired,
+						isDisabled,
+						className: clsx((props.hideInnerLabels ?? true) && "sr-only")
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-input-gap-trailing-elements",
+						children: [/* @__PURE__ */ jsx("input", {
+							id,
+							readOnly: true,
+							disabled: isDisabled,
+							tabIndex: -1,
+							value: minDisplay ?? "",
+							placeholder: props.minPlaceholder ?? "Min",
+							className: clsx("w-full min-w-0 bg-transparent outline-none", props.minInputClassName),
+							...dataAttributeProps,
+							"data-rac": true
+						}), isClearable && (!isDisabled || props.isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
+							onClear: () => {},
+							show: staticValue.min !== null,
+							renderStatic: true
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "pointer-events-none shrink-0 select-none text-label-2 text-text-default-3",
+					children: "-"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx(FormFieldLabel, {
+						label: props.maxLabel ?? "Maximum",
+						isRequired: props.isRequired,
+						isDisabled,
+						className: clsx((props.hideInnerLabels ?? true) && "sr-only")
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-input-gap-trailing-elements",
+						children: [/* @__PURE__ */ jsx("input", {
+							id: `${id}-max`,
+							readOnly: true,
+							disabled: isDisabled,
+							tabIndex: -1,
+							value: maxDisplay ?? "",
+							placeholder: props.maxPlaceholder ?? "Max",
+							className: clsx("w-full min-w-0 bg-transparent outline-none", props.maxInputClassName),
+							...dataAttributeProps,
+							"data-rac": true
+						}), isClearable && (!isDisabled || props.isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
+							onClear: () => {},
+							show: staticValue.max !== null,
+							renderStatic: true
+						})]
+					})]
+				})
+			] })
+		});
+	}
+	return /* @__PURE__ */ jsx(NumberRangeInputBase, {
+		...props,
+		autoFocusOnMount: shouldFocus
+	});
+};
+const NumberRangeInputComponent = ({ renderStaticInput, ...props }) => {
+	if ("field" in props && props.field) {
+		const { field, ...innerProps } = props;
+		const controlWithOptions = field.form;
+		return /* @__PURE__ */ jsx(FieldController, {
+			control: field.form,
+			name: field.name,
+			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(NumberRangeInputInner, {
+				...innerProps,
+				value: field.value ?? EMPTY_RANGE,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				isDisabled: field.disabled || !!controlWithOptions._options?.disabled || props.isDisabled,
+				isFormControlDisabled: !!controlWithOptions._options?.disabled,
+				error: props.error ?? error?.message,
+				renderStaticInput
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(NumberRangeInputInner, {
+		...props,
+		renderStaticInput
+	});
+};
+const NumberRangeInput = memo(NumberRangeInputComponent);
+//#endregion
+export { NumberRangeInput as t };

package/dist/NumberRangeInput-DS6_DIEc.d.ts

@@ -0,0 +1,44 @@
+import { u as NumberFieldProps } from "./types-BV15_DBT.js";
+import { n as FieldValues } from "./form.binding-DWlFTecs.js";
+import { t as ControlProps } from "./form.types-B9Vp8q2g.js";
+import { n as FormFieldProps } from "./FormField-FvutosEE.js";
+import { n as InputVariantProps } from "./input.cva-CfgCOIQW.js";
+import { FocusEvent, HTMLAttributes, Ref } from "react";
+//#region src/components/inputs/Input/NumberRangeInput/NumberRangeField.d.ts
+interface NumberRangeValue {
+  min: number | null;
+  max: number | null;
+}
+//#endregion
+//#region src/components/inputs/Input/NumberRangeInput/NumberRangeInput.d.ts
+interface NumberRangeInputBaseProps extends FormFieldProps, InputVariantProps, Omit<NumberFieldProps, "className" | "defaultValue" | "label" | "maxValue" | "minValue" | "onBlur" | "onChange" | "value"> {
+  ref?: Ref<HTMLDivElement>;
+  value?: NumberRangeValue | null;
+  minValue?: number | null;
+  maxValue?: number | null;
+  minPlaceholder?: string;
+  maxPlaceholder?: string;
+  minLabel?: string;
+  maxLabel?: string;
+  invalidRangeError?: string;
+  inputClassName?: string;
+  minInputClassName?: string;
+  maxInputClassName?: string;
+  hideInnerLabels?: boolean;
+  isDirty?: boolean;
+  isClearable?: boolean;
+  isClearableIfDisabled?: boolean;
+  autoFocusOnMount?: boolean;
+  onChange?: (value: NumberRangeValue) => void;
+  onMinChange?: (value: number | null) => void;
+  onMaxChange?: (value: number | null) => void;
+  onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+}
+type NumberRangeInputProps = NumberRangeInputBaseProps & {
+  renderStaticInput?: boolean;
+};
+type ControlledNumberRangeInputProps<TFieldValues extends FieldValues> = ControlProps<NumberRangeInputProps, TFieldValues>;
+declare const NumberRangeInputComponent: <TFieldValues extends FieldValues>({ renderStaticInput, ...props }: ControlledNumberRangeInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+declare const NumberRangeInput: typeof NumberRangeInputComponent;
+//#endregion
+export { NumberRangeValue as i, NumberRangeInput as n, NumberRangeInputProps as r, ControlledNumberRangeInputProps as t };