@povio/ui 2.3.0-rc.9 → 2.3.1

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

@@ -1,231 +1,89 @@
+import { ClockIcon } from "../../../../assets/icons/Clock.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
-import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { inputBase, inputSize } from "../../shared/input.cva.js";
 import { TimeField } from "./TimeField.js";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useState } from "react";
 import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 //#region src/components/inputs/DateTime/shared/TimePickerInput.tsx
-var TimePickerInput = (t0) => {
-	const $ = c(65);
-	const { ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props } = t0;
-	const uiConfig = UIConfig.useConfig();
+var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }) => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
-	let t1;
-	if ($[0] !== isDisabled) {
-		t1 = { isDisabled };
-		$[0] = isDisabled;
-		$[1] = t1;
-	} else t1 = $[1];
-	const { hoverProps, isHovered } = useHover(t1);
+	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);
-	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = { onFocusWithinChange: setIsFocused };
-		$[2] = t2;
-	} else t2 = $[2];
-	const { focusWithinProps } = useFocusWithin(t2);
+	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
 	const { isFocusVisible } = useFocusVisible();
 	const hidePlaceholder = as === "floating" && !state.value && !isFocused;
-	let t3;
-	if ($[3] !== state.segments) {
-		t3 = state.segments.some(_temp);
-		$[3] = state.segments;
-		$[4] = t3;
-	} else t3 = $[4];
-	const canClear = t3;
-	const t4 = clsx(inputBaseCva({
-		variant,
-		as,
-		...props
-	}), "group/date-picker-content relative min-w-input-width-min-width", "flex items-center justify-between gap-input-gap-input-text-to-elements", className);
-	const t5 = isHovered || void 0;
-	const t6 = isDisabled || void 0;
-	const t7 = isDisabled || void 0;
-	const t8 = isInvalid || void 0;
-	const t9 = state.value === null || void 0;
-	const t10 = isFocused || void 0;
-	const t11 = isFocused && isFocusVisible || void 0;
-	const t12 = state.value !== null || void 0;
-	const t13 = isDirty || void 0;
-	const t14 = isRequired || void 0;
-	const t15 = state.value !== null || void 0;
-	let t16;
-	if ($[5] !== as || $[6] !== inputSizeCva || $[7] !== size) {
-		t16 = clsx(inputSizeCva({
-			size,
-			as
-		}), "flex w-full items-center gap-input-gap-input-text-to-elements pr-0!");
-		$[5] = as;
-		$[6] = inputSizeCva;
-		$[7] = size;
-		$[8] = t16;
-	} else t16 = $[8];
-	let t17;
-	if ($[9] !== disableManualEntry || $[10] !== onPress) {
-		t17 = disableManualEntry && /* @__PURE__ */ jsx(Button, {
-			onPress,
-			className: "absolute inset-0 z-0"
-		});
-		$[9] = disableManualEntry;
-		$[10] = onPress;
-		$[11] = t17;
-	} else t17 = $[11];
-	let t18;
-	if ($[12] !== as || $[13] !== headerProps) {
-		t18 = as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+	const canClear = state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: clsx(inputBaseCva({
+			variant,
 			as,
-			...headerProps
-		});
-		$[12] = as;
-		$[13] = headerProps;
-		$[14] = t18;
-	} else t18 = $[14];
-	let t19;
-	if ($[15] !== disableManualEntry || $[16] !== fieldProps || $[17] !== hidePlaceholder || $[18] !== isDisabled || $[19] !== placeholder || $[20] !== state) {
-		t19 = /* @__PURE__ */ jsx("div", { children: disableManualEntry && placeholder && !state.value ? /* @__PURE__ */ jsx(Typography, {
-			size: "label-1",
-			className: "text-text-default-3",
-			children: placeholder
-		}) : /* @__PURE__ */ jsx(TimeField, {
-			fieldProps,
-			state,
-			isDisabled,
-			hidePlaceholder
-		}) });
-		$[15] = disableManualEntry;
-		$[16] = fieldProps;
-		$[17] = hidePlaceholder;
-		$[18] = isDisabled;
-		$[19] = placeholder;
-		$[20] = state;
-		$[21] = t19;
-	} else t19 = $[21];
-	let t20;
-	if ($[22] !== t16 || $[23] !== t17 || $[24] !== t18 || $[25] !== t19) {
-		t20 = /* @__PURE__ */ jsxs("div", {
-			className: t16,
+			...props
+		}), "group/date-picker-content relative min-w-input-width-min-width", "flex items-center justify-between gap-input-gap-input-text-to-elements", className),
+		"data-rac": "",
+		"data-datetime-input": "",
+		"data-hovered": isHovered || void 0,
+		"data-disabled": isDisabled || void 0,
+		"data-invalid": isInvalid || void 0,
+		"data-is-empty": state.value === null || void 0,
+		"data-focus-within": isFocused || void 0,
+		"data-focus-visible": isFocused && isFocusVisible || void 0,
+		"data-has-selection": state.value !== null || void 0,
+		"data-is-dirty": isDirty || void 0,
+		...fieldProps,
+		...focusWithinProps,
+		...hoverProps,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx(inputSizeCva({
+				size,
+				as
+			}), "flex w-full items-center gap-input-gap-input-text-to-elements pr-0!"),
 			children: [
-				t17,
-				t18,
-				t19
+				disableManualEntry && /* @__PURE__ */ jsx(Button, {
+					onPress,
+					className: "absolute inset-0 z-0"
+				}),
+				as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+					as,
+					...headerProps
+				}),
+				/* @__PURE__ */ jsx("div", { children: disableManualEntry && placeholder && !state.value ? /* @__PURE__ */ jsx(Typography, {
+					size: "label-1",
+					className: "text-text-default-3",
+					children: placeholder
+				}) : /* @__PURE__ */ jsx(TimeField, {
+					fieldProps,
+					state,
+					isDisabled,
+					hidePlaceholder
+				}) })
 			]
-		});
-		$[22] = t16;
-		$[23] = t17;
-		$[24] = t18;
-		$[25] = t19;
-		$[26] = t20;
-	} else t20 = $[26];
-	let t21;
-	if ($[27] !== as || $[28] !== inputSizeCva || $[29] !== size) {
-		t21 = clsx(inputSizeCva({
-			size,
-			as
-		}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!");
-		$[27] = as;
-		$[28] = inputSizeCva;
-		$[29] = size;
-		$[30] = t21;
-	} else t21 = $[30];
-	let t22;
-	if ($[31] !== canClear || $[32] !== fieldProps || $[33] !== isClearable || $[34] !== state) {
-		t22 = isClearable && /* @__PURE__ */ jsx(InputClear, {
-			onClear: () => {
-				state.setValue(null);
-				fieldProps.onBlur?.(null);
-			},
-			show: canClear
-		});
-		$[31] = canClear;
-		$[32] = fieldProps;
-		$[33] = isClearable;
-		$[34] = state;
-		$[35] = t22;
-	} else t22 = $[35];
-	let t23;
-	if ($[36] !== disableDropdown || $[37] !== disableManualEntry || $[38] !== isDisabled || $[39] !== onPress || $[40] !== uiConfig) {
-		t23 = (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
-			label: "",
-			color: "secondary",
-			onPress,
-			icon: uiConfig.dateInput.timeIcon,
-			isDisabled,
-			className: "border-0!"
-		});
-		$[36] = disableDropdown;
-		$[37] = disableManualEntry;
-		$[38] = isDisabled;
-		$[39] = onPress;
-		$[40] = uiConfig;
-		$[41] = t23;
-	} else t23 = $[41];
-	let t24;
-	if ($[42] !== t21 || $[43] !== t22 || $[44] !== t23) {
-		t24 = /* @__PURE__ */ jsxs("div", {
-			className: t21,
-			children: [t22, t23]
-		});
-		$[42] = t21;
-		$[43] = t22;
-		$[44] = t23;
-		$[45] = t24;
-	} else t24 = $[45];
-	let t25;
-	if ($[46] !== fieldProps || $[47] !== focusWithinProps || $[48] !== hoverProps || $[49] !== ref || $[50] !== t10 || $[51] !== t11 || $[52] !== t12 || $[53] !== t13 || $[54] !== t14 || $[55] !== t15 || $[56] !== t20 || $[57] !== t24 || $[58] !== t4 || $[59] !== t5 || $[60] !== t6 || $[61] !== t7 || $[62] !== t8 || $[63] !== t9) {
-		t25 = /* @__PURE__ */ jsxs("div", {
-			ref,
-			className: t4,
-			"data-rac": "",
-			"data-datetime-input": "",
-			"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,
-			...fieldProps,
-			...focusWithinProps,
-			...hoverProps,
-			children: [t20, t24]
-		});
-		$[46] = fieldProps;
-		$[47] = focusWithinProps;
-		$[48] = hoverProps;
-		$[49] = ref;
-		$[50] = t10;
-		$[51] = t11;
-		$[52] = t12;
-		$[53] = t13;
-		$[54] = t14;
-		$[55] = t15;
-		$[56] = t20;
-		$[57] = t24;
-		$[58] = t4;
-		$[59] = t5;
-		$[60] = t6;
-		$[61] = t7;
-		$[62] = t8;
-		$[63] = t9;
-		$[64] = t25;
-	} else t25 = $[64];
-	return t25;
+		}), /* @__PURE__ */ jsxs("div", {
+			className: clsx(inputSizeCva({
+				size,
+				as
+			}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
+			children: [isClearable && /* @__PURE__ */ jsx(InputClear, {
+				onClear: () => state.setValue(null),
+				show: canClear
+			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
+				label: "",
+				color: "secondary",
+				onPress,
+				icon: ClockIcon,
+				isDisabled,
+				className: "border-0!"
+			})]
+		})]
+	});
 };
-function _temp(segment) {
-	return segment.type !== "literal" && segment.isPlaceholder === false;
-}
 //#endregion
 export { TimePickerInput };

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

@@ -1,29 +1,19 @@
 import { Typography } from "../../../text/Typography/Typography.js";
 import { useScrollableListBox } from "../../../../hooks/useScrollableListBox.js";
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useRef } from "react";
+import { useMemo, useRef } from "react";
 import { ListBox, ListBoxItem } from "react-aria-components";
 import { today } from "@internationalized/date";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/YearPicker.tsx
-var YearPicker = (t0) => {
-	const $ = c(22);
-	const { state, onSelectionChange, onDateChange, onCommit, selectedDate } = t0;
-	let t1;
-	if ($[0] !== state.timeZone) {
-		t1 = {
-			year: "numeric",
-			timeZone: state.timeZone
-		};
-		$[0] = state.timeZone;
-		$[1] = t1;
-	} else t1 = $[1];
-	const formatter = useDateFormatter(t1);
-	let arr;
-	if ($[2] !== formatter || $[3] !== state.timeZone) {
-		arr = [];
+var YearPicker = ({ state, onSelectionChange, onDateChange, onCommit, selectedDate }) => {
+	const formatter = useDateFormatter({
+		year: "numeric",
+		timeZone: state.timeZone
+	});
+	const years = useMemo(() => {
+		const arr = [];
 		for (let i = -100; i <= 100; i++) {
 			const date = today(state.timeZone).add({ years: i });
 			arr.push({
@@ -31,121 +21,80 @@ var YearPicker = (t0) => {
 				formatted: formatter.format(date.toDate(state.timeZone))
 			});
 		}
-		$[2] = formatter;
-		$[3] = state.timeZone;
-		$[4] = arr;
-	} else arr = $[4];
-	const years = arr;
+		return arr;
+	}, [state.timeZone, formatter]);
 	const isYearDisabled = (year) => {
 		if (state.minValue && year < state.minValue.year) return true;
 		if (state.maxValue && year > state.maxValue.year) return true;
 		return false;
 	};
-	let t2;
-	if ($[5] !== selectedDate || $[6] !== state.focusedDate || $[7] !== years) {
-		t2 = () => {
-			if (selectedDate) {
-				const selectedIndexFromValue = years.findIndex((year_0) => year_0.value === selectedDate.year);
-				if (selectedIndexFromValue >= 0) return selectedIndexFromValue;
-			}
-			const focusedYearIndex = years.findIndex((year_1) => year_1.value === state.focusedDate.year);
-			if (focusedYearIndex < 0) return null;
-			return focusedYearIndex;
-		};
-		$[5] = selectedDate;
-		$[6] = state.focusedDate;
-		$[7] = years;
-		$[8] = t2;
-	} else t2 = $[8];
-	const selectedYearIndex = t2();
+	const getSelectedYearIndex = () => {
+		if (selectedDate) {
+			const selectedIndexFromValue = years.findIndex((year) => year.value === selectedDate.year);
+			if (selectedIndexFromValue >= 0) return selectedIndexFromValue;
+		}
+		const focusedYearIndex = years.findIndex((year) => year.value === state.focusedDate.year);
+		if (focusedYearIndex < 0) return null;
+		return focusedYearIndex;
+	};
+	const selectedYearIndex = getSelectedYearIndex();
 	const lastPressedYearIndexRef = useRef(null);
-	let listBoxSelectionProps;
-	if ($[9] !== selectedYearIndex) {
-		listBoxSelectionProps = {};
-		if (selectedYearIndex !== null) listBoxSelectionProps.selectedKeys = [selectedYearIndex];
-		$[9] = selectedYearIndex;
-		$[10] = listBoxSelectionProps;
-	} else listBoxSelectionProps = $[10];
-	const parseYearIndexFromKey = _temp;
+	const listBoxSelectionProps = {};
+	if (selectedYearIndex !== null) listBoxSelectionProps.selectedKeys = [selectedYearIndex];
+	const parseYearIndexFromKey = (key) => {
+		if (typeof key === "number") return key;
+		if (typeof key === "string") {
+			const parsedIndex = Number.parseInt(key, 10);
+			if (!Number.isNaN(parsedIndex)) return parsedIndex;
+		}
+		return null;
+	};
 	const { ref } = useScrollableListBox();
-	const T0 = ListBox;
-	const t3 = true;
-	const t4 = "Year";
-	const t5 = "single";
-	let t6;
-	if ($[11] !== onDateChange || $[12] !== onSelectionChange || $[13] !== state || $[14] !== years) {
-		t6 = (key_0) => {
-			if (key_0 === "all") return;
-			const selectedKey = [...key_0][0];
+	return /* @__PURE__ */ jsx(ListBox, {
+		ref,
+		autoFocus: true,
+		"aria-label": "Year",
+		selectionMode: "single",
+		...listBoxSelectionProps,
+		onSelectionChange: (key) => {
+			if (key === "all") return;
+			const selectedKey = [...key][0];
 			const selectedYearIndexValue = parseYearIndexFromKey(selectedKey);
 			if (selectedYearIndexValue !== null && years[selectedYearIndexValue]) {
 				const nextSelectedDate = state.focusedDate.set({ year: years[selectedYearIndexValue].value });
 				state.setFocusedDate(nextSelectedDate);
 				onDateChange?.(nextSelectedDate);
 			}
-			onSelectionChange(key_0);
-		};
-		$[11] = onDateChange;
-		$[12] = onSelectionChange;
-		$[13] = state;
-		$[14] = years;
-		$[15] = t6;
-	} else t6 = $[15];
-	const t7 = "h-80 max-h-full min-h-0 w-full shrink-0 overflow-y-auto md:h-72 md:w-80";
-	const t8 = years.map((year_2, index) => {
-		const isDisabled = isYearDisabled(year_2.value);
-		return /* @__PURE__ */ jsx(ListBoxItem, {
-			id: index,
-			textValue: year_2.formatted,
-			isDisabled,
-			onPress: () => {
-				const isSecondConsecutivePress = lastPressedYearIndexRef.current === index;
-				lastPressedYearIndexRef.current = index;
-				const nextSelectedDate_0 = state.focusedDate.set({ year: year_2.value });
-				state.setFocusedDate(nextSelectedDate_0);
-				onDateChange?.(nextSelectedDate_0);
-				if (!isSecondConsecutivePress) return;
-				if (!selectedDate) return;
-				if (selectedYearIndex === null) return;
-				if (index !== selectedYearIndex) return;
-				onCommit?.();
-			},
-			className: clsx("flex px-4 py-2 text-interactive-text-secondary-idle outline-none", "border-elevation-outline-default-1 border-b border-solid bg-elevation-fill-default-1 last:border-b-0", "hover:text-interactive-text-secondary-hover", "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted", "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
-			children: /* @__PURE__ */ jsx(Typography, {
-				as: "span",
-				size: "label-2",
-				children: year_2.formatted
-			})
-		}, index);
+			onSelectionChange(key);
+		},
+		className: "h-80 max-h-full min-h-0 w-full shrink-0 overflow-y-auto md:h-72 md:w-80",
+		children: years.map((year, index) => {
+			const isDisabled = isYearDisabled(year.value);
+			return /* @__PURE__ */ jsx(ListBoxItem, {
+				id: index,
+				textValue: year.formatted,
+				isDisabled,
+				onPress: () => {
+					const isSecondConsecutivePress = lastPressedYearIndexRef.current === index;
+					lastPressedYearIndexRef.current = index;
+					const nextSelectedDate = state.focusedDate.set({ year: year.value });
+					state.setFocusedDate(nextSelectedDate);
+					onDateChange?.(nextSelectedDate);
+					if (!isSecondConsecutivePress) return;
+					if (!selectedDate) return;
+					if (selectedYearIndex === null) return;
+					if (index !== selectedYearIndex) return;
+					onCommit?.();
+				},
+				className: clsx("flex px-4 py-2 text-interactive-text-secondary-idle outline-none", "border-elevation-outline-default-1 border-b border-solid bg-elevation-fill-default-1 last:border-b-0", "hover:text-interactive-text-secondary-hover", "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted", "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
+				children: /* @__PURE__ */ jsx(Typography, {
+					as: "span",
+					size: "label-2",
+					children: year.formatted
+				})
+			}, index);
+		})
 	});
-	let t9;
-	if ($[16] !== T0 || $[17] !== listBoxSelectionProps || $[18] !== ref || $[19] !== t6 || $[20] !== t8) {
-		t9 = /* @__PURE__ */ jsx(T0, {
-			ref,
-			autoFocus: t3,
-			"aria-label": t4,
-			selectionMode: t5,
-			...listBoxSelectionProps,
-			onSelectionChange: t6,
-			className: t7,
-			children: t8
-		});
-		$[16] = T0;
-		$[17] = listBoxSelectionProps;
-		$[18] = ref;
-		$[19] = t6;
-		$[20] = t8;
-		$[21] = t9;
-	} else t9 = $[21];
-	return t9;
 };
-function _temp(key) {
-	if (typeof key === "number") return key;
-	if (typeof key === "string") {
-		const parsedIndex = Number.parseInt(key, 10);
-		if (!Number.isNaN(parsedIndex)) return parsedIndex;
-	}
-	return null;
-}
 //#endregion
 export { YearPicker };