@povio/ui 3.1.0 → 3.2.0

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

@@ -0,0 +1,571 @@
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
+import { InputClear } from "../../shared/InputClear.js";
+import { FormField } from "../../FormField/FormField.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useEffect, useRef } from "react";
+import { Input, useLocale } from "react-aria-components";
+import { useFocusVisible, useNumberField } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+import { useNumberFieldState } from "react-stately";
+//#region src/components/inputs/Input/NumberRangeInput/NumberRangeField.tsx
+var NumberRangeValueField = (t0) => {
+	const $ = c(63);
+	let autoFocusOnMount;
+	let className;
+	let formatOptions;
+	let hideInnerLabels;
+	let isClearable;
+	let isDisabled;
+	let isInvalid;
+	let isRequired;
+	let label;
+	let onBlur;
+	let onChange;
+	let onClear;
+	let placeholder;
+	let rest;
+	let value;
+	if ($[0] !== t0) {
+		({label, value, placeholder, isDisabled, isInvalid, isRequired, formatOptions, hideInnerLabels, autoFocusOnMount, isClearable, className, onChange, onClear, onBlur, ...rest} = t0);
+		$[0] = t0;
+		$[1] = autoFocusOnMount;
+		$[2] = className;
+		$[3] = formatOptions;
+		$[4] = hideInnerLabels;
+		$[5] = isClearable;
+		$[6] = isDisabled;
+		$[7] = isInvalid;
+		$[8] = isRequired;
+		$[9] = label;
+		$[10] = onBlur;
+		$[11] = onChange;
+		$[12] = onClear;
+		$[13] = placeholder;
+		$[14] = rest;
+		$[15] = value;
+	} else {
+		autoFocusOnMount = $[1];
+		className = $[2];
+		formatOptions = $[3];
+		hideInnerLabels = $[4];
+		isClearable = $[5];
+		isDisabled = $[6];
+		isInvalid = $[7];
+		isRequired = $[8];
+		label = $[9];
+		onBlur = $[10];
+		onChange = $[11];
+		onClear = $[12];
+		placeholder = $[13];
+		rest = $[14];
+		value = $[15];
+	}
+	const ui = UIConfig.useConfig();
+	const { locale } = useLocale();
+	const { isFocusVisible } = useFocusVisible();
+	const inputRef = useRef(null);
+	const numberFieldRef = useRef(null);
+	let t1;
+	let t2;
+	if ($[16] !== autoFocusOnMount || $[17] !== isDisabled) {
+		t1 = () => {
+			if (!autoFocusOnMount || isDisabled) return;
+			requestAnimationFrame(() => inputRef.current?.focus());
+		};
+		t2 = [autoFocusOnMount, isDisabled];
+		$[16] = autoFocusOnMount;
+		$[17] = isDisabled;
+		$[18] = t1;
+		$[19] = t2;
+	} else {
+		t1 = $[18];
+		t2 = $[19];
+	}
+	useEffect(t1, t2);
+	const t3 = value ?? NaN;
+	let t4;
+	if ($[20] !== onBlur) {
+		t4 = (e) => onBlur?.({ target: e.target });
+		$[20] = onBlur;
+		$[21] = t4;
+	} else t4 = $[21];
+	const t5 = formatOptions ?? ui.numberInput.formatOptions;
+	let t6;
+	if ($[22] !== isDisabled || $[23] !== isInvalid || $[24] !== isRequired || $[25] !== label || $[26] !== locale || $[27] !== onChange || $[28] !== placeholder || $[29] !== rest || $[30] !== t3 || $[31] !== t4 || $[32] !== t5) {
+		t6 = {
+			...rest,
+			label,
+			value: t3,
+			placeholder,
+			isDisabled,
+			isInvalid,
+			isRequired,
+			onChange,
+			onBlur: t4,
+			locale,
+			formatOptions: t5
+		};
+		$[22] = isDisabled;
+		$[23] = isInvalid;
+		$[24] = isRequired;
+		$[25] = label;
+		$[26] = locale;
+		$[27] = onChange;
+		$[28] = placeholder;
+		$[29] = rest;
+		$[30] = t3;
+		$[31] = t4;
+		$[32] = t5;
+		$[33] = t6;
+	} else t6 = $[33];
+	const numberProps = t6;
+	const { labelProps, inputProps } = useNumberField(numberProps, useNumberFieldState(numberProps), numberFieldRef);
+	const t7 = hideInnerLabels && "sr-only";
+	let t8;
+	if ($[34] !== t7) {
+		t8 = clsx(t7);
+		$[34] = t7;
+		$[35] = t8;
+	} else t8 = $[35];
+	let t9;
+	if ($[36] !== isDisabled || $[37] !== isRequired || $[38] !== label || $[39] !== labelProps || $[40] !== t8) {
+		t9 = /* @__PURE__ */ jsx(FormFieldLabel, {
+			label,
+			labelProps,
+			isRequired,
+			isDisabled,
+			className: t8
+		});
+		$[36] = isDisabled;
+		$[37] = isRequired;
+		$[38] = label;
+		$[39] = labelProps;
+		$[40] = t8;
+		$[41] = t9;
+	} else t9 = $[41];
+	let t10;
+	if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = mergeRefs(inputRef, numberFieldRef);
+		$[42] = t10;
+	} else t10 = $[42];
+	const t11 = inputProps.placeholder;
+	let t12;
+	if ($[43] !== className) {
+		t12 = clsx("w-full min-w-0 bg-transparent outline-none", className);
+		$[43] = className;
+		$[44] = t12;
+	} else t12 = $[44];
+	let t13;
+	if ($[45] !== inputProps || $[46] !== isFocusVisible) {
+		t13 = (e_0) => {
+			inputProps.onFocus?.(e_0);
+			if (isFocusVisible) e_0.target.select();
+		};
+		$[45] = inputProps;
+		$[46] = isFocusVisible;
+		$[47] = t13;
+	} else t13 = $[47];
+	let t14;
+	if ($[48] !== inputProps || $[49] !== t12 || $[50] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Input, {
+			...inputProps,
+			ref: t10,
+			placeholder: t11,
+			className: t12,
+			onFocus: t13
+		});
+		$[48] = inputProps;
+		$[49] = t12;
+		$[50] = t13;
+		$[51] = t14;
+	} else t14 = $[51];
+	let t15;
+	if ($[52] !== isClearable || $[53] !== isDisabled || $[54] !== onClear || $[55] !== value) {
+		t15 = isClearable && !isDisabled && /* @__PURE__ */ jsx(InputClear, {
+			onClear,
+			show: value !== null
+		});
+		$[52] = isClearable;
+		$[53] = isDisabled;
+		$[54] = onClear;
+		$[55] = value;
+		$[56] = t15;
+	} else t15 = $[56];
+	let t16;
+	if ($[57] !== t14 || $[58] !== t15) {
+		t16 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-input-gap-trailing-elements",
+			children: [t14, t15]
+		});
+		$[57] = t14;
+		$[58] = t15;
+		$[59] = t16;
+	} else t16 = $[59];
+	let t17;
+	if ($[60] !== t16 || $[61] !== t9) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [t9, t16]
+		});
+		$[60] = t16;
+		$[61] = t9;
+		$[62] = t17;
+	} else t17 = $[62];
+	return t17;
+};
+var NumberRangeField = (t0) => {
+	const $ = c(118);
+	let as;
+	let autoFocusOnMount;
+	let className;
+	let effectiveError;
+	let focusWithinProps;
+	let formFieldProps;
+	let headerProps;
+	let hideInnerLabels;
+	let hoverProps;
+	let inputBaseClassName;
+	let inputClassName;
+	let inputSizeClassName;
+	let isClearable;
+	let isDirty;
+	let isDisabled;
+	let isEmpty;
+	let isFocusVisible;
+	let isFocused;
+	let isHovered;
+	let isRequired;
+	let maxInputClassName;
+	let maxLabel;
+	let maxPlaceholder;
+	let minInputClassName;
+	let minLabel;
+	let minPlaceholder;
+	let numberFieldProps;
+	let onBlur;
+	let onRangeSideChange;
+	let onRangeSideClear;
+	let rangeValue;
+	let ref;
+	if ($[0] !== t0) {
+		({ref, as, className, inputClassName, minInputClassName, maxInputClassName, inputBaseClassName, inputSizeClassName, formFieldProps, headerProps, rangeValue, effectiveError, minPlaceholder, maxPlaceholder, minLabel, maxLabel, hideInnerLabels, isDirty, isClearable, autoFocusOnMount, isDisabled, isRequired, isEmpty, isHovered, isFocused, isFocusVisible, focusWithinProps, hoverProps, onRangeSideChange, onRangeSideClear, onBlur, ...numberFieldProps} = t0);
+		$[0] = t0;
+		$[1] = as;
+		$[2] = autoFocusOnMount;
+		$[3] = className;
+		$[4] = effectiveError;
+		$[5] = focusWithinProps;
+		$[6] = formFieldProps;
+		$[7] = headerProps;
+		$[8] = hideInnerLabels;
+		$[9] = hoverProps;
+		$[10] = inputBaseClassName;
+		$[11] = inputClassName;
+		$[12] = inputSizeClassName;
+		$[13] = isClearable;
+		$[14] = isDirty;
+		$[15] = isDisabled;
+		$[16] = isEmpty;
+		$[17] = isFocusVisible;
+		$[18] = isFocused;
+		$[19] = isHovered;
+		$[20] = isRequired;
+		$[21] = maxInputClassName;
+		$[22] = maxLabel;
+		$[23] = maxPlaceholder;
+		$[24] = minInputClassName;
+		$[25] = minLabel;
+		$[26] = minPlaceholder;
+		$[27] = numberFieldProps;
+		$[28] = onBlur;
+		$[29] = onRangeSideChange;
+		$[30] = onRangeSideClear;
+		$[31] = rangeValue;
+		$[32] = ref;
+	} else {
+		as = $[1];
+		autoFocusOnMount = $[2];
+		className = $[3];
+		effectiveError = $[4];
+		focusWithinProps = $[5];
+		formFieldProps = $[6];
+		headerProps = $[7];
+		hideInnerLabels = $[8];
+		hoverProps = $[9];
+		inputBaseClassName = $[10];
+		inputClassName = $[11];
+		inputSizeClassName = $[12];
+		isClearable = $[13];
+		isDirty = $[14];
+		isDisabled = $[15];
+		isEmpty = $[16];
+		isFocusVisible = $[17];
+		isFocused = $[18];
+		isHovered = $[19];
+		isRequired = $[20];
+		maxInputClassName = $[21];
+		maxLabel = $[22];
+		maxPlaceholder = $[23];
+		minInputClassName = $[24];
+		minLabel = $[25];
+		minPlaceholder = $[26];
+		numberFieldProps = $[27];
+		onBlur = $[28];
+		onRangeSideChange = $[29];
+		onRangeSideClear = $[30];
+		rangeValue = $[31];
+		ref = $[32];
+	}
+	const t1 = as === "inline" ? -1 : void 0;
+	let t2;
+	if ($[33] !== className) {
+		t2 = clsx("group w-full", className);
+		$[33] = className;
+		$[34] = t2;
+	} else t2 = $[34];
+	const t3 = as === "inline" ? -1 : void 0;
+	let t4;
+	if ($[35] !== inputBaseClassName || $[36] !== inputClassName) {
+		t4 = clsx(inputBaseClassName, "group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", inputClassName);
+		$[35] = inputBaseClassName;
+		$[36] = inputClassName;
+		$[37] = t4;
+	} else t4 = $[37];
+	const t5 = isHovered || void 0;
+	const t6 = isDisabled || void 0;
+	const t7 = isDisabled || void 0;
+	const t8 = !!effectiveError || void 0;
+	const t9 = isEmpty || void 0;
+	const t10 = isFocused || void 0;
+	const t11 = isFocused && isFocusVisible || void 0;
+	const t12 = !isEmpty || void 0;
+	const t13 = isDirty || void 0;
+	const t14 = isRequired || void 0;
+	const t15 = !isEmpty || void 0;
+	let t16;
+	if ($[38] !== inputSizeClassName) {
+		t16 = clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeClassName);
+		$[38] = inputSizeClassName;
+		$[39] = t16;
+	} else t16 = $[39];
+	let t17;
+	if ($[40] !== as || $[41] !== headerProps) {
+		t17 = as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+			as,
+			...headerProps
+		});
+		$[40] = as;
+		$[41] = headerProps;
+		$[42] = t17;
+	} else t17 = $[42];
+	let t18;
+	if ($[43] !== onRangeSideChange) {
+		t18 = (nextValue) => {
+			onRangeSideChange("min", nextValue);
+		};
+		$[43] = onRangeSideChange;
+		$[44] = t18;
+	} else t18 = $[44];
+	const t19 = !!effectiveError;
+	let t20;
+	if ($[45] !== onRangeSideClear) {
+		t20 = () => {
+			onRangeSideClear("min");
+		};
+		$[45] = onRangeSideClear;
+		$[46] = t20;
+	} else t20 = $[46];
+	let t21;
+	if ($[47] !== autoFocusOnMount || $[48] !== hideInnerLabels || $[49] !== isClearable || $[50] !== isDisabled || $[51] !== isRequired || $[52] !== minInputClassName || $[53] !== minLabel || $[54] !== minPlaceholder || $[55] !== numberFieldProps || $[56] !== onBlur || $[57] !== rangeValue.min || $[58] !== t18 || $[59] !== t19 || $[60] !== t20) {
+		t21 = /* @__PURE__ */ jsx(NumberRangeValueField, {
+			...numberFieldProps,
+			label: minLabel,
+			placeholder: minPlaceholder,
+			value: rangeValue.min,
+			onChange: t18,
+			onBlur,
+			isDisabled,
+			isInvalid: t19,
+			isRequired,
+			hideInnerLabels,
+			autoFocusOnMount,
+			isClearable,
+			onClear: t20,
+			className: minInputClassName
+		});
+		$[47] = autoFocusOnMount;
+		$[48] = hideInnerLabels;
+		$[49] = isClearable;
+		$[50] = isDisabled;
+		$[51] = isRequired;
+		$[52] = minInputClassName;
+		$[53] = minLabel;
+		$[54] = minPlaceholder;
+		$[55] = numberFieldProps;
+		$[56] = onBlur;
+		$[57] = rangeValue.min;
+		$[58] = t18;
+		$[59] = t19;
+		$[60] = t20;
+		$[61] = t21;
+	} else t21 = $[61];
+	const t22 = isDisabled && "text-interactive-text-secondary-disabled";
+	let t23;
+	if ($[62] !== t22) {
+		t23 = clsx("pointer-events-none shrink-0 select-none text-label-2 text-text-default-3", t22);
+		$[62] = t22;
+		$[63] = t23;
+	} else t23 = $[63];
+	let t24;
+	if ($[64] !== t23) {
+		t24 = /* @__PURE__ */ jsx("span", {
+			className: t23,
+			children: "-"
+		});
+		$[64] = t23;
+		$[65] = t24;
+	} else t24 = $[65];
+	let t25;
+	if ($[66] !== onRangeSideChange) {
+		t25 = (nextValue_0) => {
+			onRangeSideChange("max", nextValue_0);
+		};
+		$[66] = onRangeSideChange;
+		$[67] = t25;
+	} else t25 = $[67];
+	const t26 = !!effectiveError;
+	let t27;
+	if ($[68] !== onRangeSideClear) {
+		t27 = () => {
+			onRangeSideClear("max");
+		};
+		$[68] = onRangeSideClear;
+		$[69] = t27;
+	} else t27 = $[69];
+	let t28;
+	if ($[70] !== hideInnerLabels || $[71] !== isClearable || $[72] !== isDisabled || $[73] !== isRequired || $[74] !== maxInputClassName || $[75] !== maxLabel || $[76] !== maxPlaceholder || $[77] !== numberFieldProps || $[78] !== onBlur || $[79] !== rangeValue.max || $[80] !== t25 || $[81] !== t26 || $[82] !== t27) {
+		t28 = /* @__PURE__ */ jsx(NumberRangeValueField, {
+			...numberFieldProps,
+			label: maxLabel,
+			placeholder: maxPlaceholder,
+			value: rangeValue.max,
+			onChange: t25,
+			onBlur,
+			isDisabled,
+			isInvalid: t26,
+			isRequired,
+			hideInnerLabels,
+			isClearable,
+			onClear: t27,
+			className: maxInputClassName
+		});
+		$[70] = hideInnerLabels;
+		$[71] = isClearable;
+		$[72] = isDisabled;
+		$[73] = isRequired;
+		$[74] = maxInputClassName;
+		$[75] = maxLabel;
+		$[76] = maxPlaceholder;
+		$[77] = numberFieldProps;
+		$[78] = onBlur;
+		$[79] = rangeValue.max;
+		$[80] = t25;
+		$[81] = t26;
+		$[82] = t27;
+		$[83] = t28;
+	} else t28 = $[83];
+	let t29;
+	if ($[84] !== t16 || $[85] !== t17 || $[86] !== t21 || $[87] !== t24 || $[88] !== t28) {
+		t29 = /* @__PURE__ */ jsxs("div", {
+			className: t16,
+			children: [
+				t17,
+				t21,
+				t24,
+				t28
+			]
+		});
+		$[84] = t16;
+		$[85] = t17;
+		$[86] = t21;
+		$[87] = t24;
+		$[88] = t28;
+		$[89] = t29;
+	} else t29 = $[89];
+	let t30;
+	if ($[90] !== focusWithinProps || $[91] !== hoverProps || $[92] !== t10 || $[93] !== t11 || $[94] !== t12 || $[95] !== t13 || $[96] !== t14 || $[97] !== t15 || $[98] !== t29 || $[99] !== t4 || $[100] !== t5 || $[101] !== t6 || $[102] !== t7 || $[103] !== t8 || $[104] !== t9) {
+		t30 = /* @__PURE__ */ jsx("div", {
+			className: t4,
+			"data-rac": "",
+			"data-hovered": t5,
+			"data-disabled": t6,
+			"data-is-disabled": t7,
+			"data-invalid": t8,
+			"data-is-empty": t9,
+			"data-focus-within": t10,
+			"data-focus-visible": t11,
+			"data-has-selection": t12,
+			"data-is-dirty": t13,
+			"data-is-required": t14,
+			"data-is-filled": t15,
+			...focusWithinProps,
+			...hoverProps,
+			children: t29
+		});
+		$[90] = focusWithinProps;
+		$[91] = hoverProps;
+		$[92] = t10;
+		$[93] = t11;
+		$[94] = t12;
+		$[95] = t13;
+		$[96] = t14;
+		$[97] = t15;
+		$[98] = t29;
+		$[99] = t4;
+		$[100] = t5;
+		$[101] = t6;
+		$[102] = t7;
+		$[103] = t8;
+		$[104] = t9;
+		$[105] = t30;
+	} else t30 = $[105];
+	let t31;
+	if ($[106] !== as || $[107] !== formFieldProps || $[108] !== ref || $[109] !== t2 || $[110] !== t3 || $[111] !== t30) {
+		t31 = /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			ref,
+			as,
+			className: t2,
+			tabIndex: t3,
+			children: t30
+		});
+		$[106] = as;
+		$[107] = formFieldProps;
+		$[108] = ref;
+		$[109] = t2;
+		$[110] = t3;
+		$[111] = t30;
+		$[112] = t31;
+	} else t31 = $[112];
+	let t32;
+	if ($[113] !== as || $[114] !== effectiveError || $[115] !== t1 || $[116] !== t31) {
+		t32 = /* @__PURE__ */ jsx(TooltipWrapper, {
+			as,
+			error: effectiveError,
+			triggerTabIndex: t1,
+			children: t31
+		});
+		$[113] = as;
+		$[114] = effectiveError;
+		$[115] = t1;
+		$[116] = t31;
+		$[117] = t32;
+	} else t32 = $[117];
+	return t32;
+};
+//#endregion
+export { NumberRangeField };

package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.d.ts

@@ -0,0 +1,35 @@
+import { FocusEvent, Ref } from 'react';
+import { NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';
+import { FieldValues } from 'react-hook-form';
+import { FormFieldProps } from '../../FormField/FormField';
+import { NumberRangeValue } from './NumberRangeField';
+import { ControlProps } from '../../shared/form.types';
+import { InputVariantProps } from '../../shared/input.cva';
+export type { NumberRangeValue } from './NumberRangeField';
+interface NumberRangeInputBaseProps extends FormFieldProps, InputVariantProps, Omit<AriaNumberFieldProps, "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;
+    autoFocusOnMount?: boolean;
+    onChange?: (value: NumberRangeValue) => void;
+    onMinChange?: (value: number | null) => void;
+    onMaxChange?: (value: number | null) => void;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+}
+export type NumberRangeInputProps = NumberRangeInputBaseProps & {
+    renderStaticInput?: boolean;
+};
+export type ControlledNumberRangeInputProps<TFieldValues extends FieldValues> = ControlProps<NumberRangeInputProps, TFieldValues>;
+export declare const NumberRangeInput: <TFieldValues extends FieldValues>({ renderStaticInput, ...props }: ControlledNumberRangeInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;