@povio/ui 3.4.0-rc.15 → 3.4.0-rc.17

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

@@ -1,164 +1,78 @@
-import { Typography } from "../../../text/Typography/Typography.js";
-import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { Typography } from "../../../typography.js";
+import { InlineIconButton } from "../../../inline-icon-button.js";
 import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
 import { getPlaceholder } from "./DateSegmentItem.js";
 import { useLongPressRepeat } from "../../../../hooks/useLongPressRepeat.js";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { clsx } from "clsx";
 import { useEffect, useRef } from "react";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useDateSegment, useLocale, useTimeField } from "react-aria";
 import { Time } from "@internationalized/date";
 import { useTimeFieldState } from "@react-stately/datepicker";
 //#region src/components/inputs/DateTime/shared/TimePickerForm.tsx
-var INCREMENT_STEP_SIZE = 5;
-var TimePickerForm = (t0) => {
-	const $ = c(28);
-	const { state, datePickerState } = t0;
+const INCREMENT_STEP_SIZE = 5;
+const TimePickerForm = ({ state, datePickerState }) => {
 	const isDesktop = useBreakpoint("md");
 	const { locale } = useLocale();
-	const t1 = datePickerState?.timeValue;
-	let t2;
-	if ($[0] !== datePickerState) {
-		t2 = (value) => {
+	const fieldState = useTimeFieldState({
+		locale,
+		defaultValue: datePickerState?.timeValue,
+		onChange: (value) => {
 			datePickerState?.setTimeValue(value ?? new Time(0, 0));
-		};
-		$[0] = datePickerState;
-		$[1] = t2;
-	} else t2 = $[1];
-	let t3;
-	if ($[2] !== locale || $[3] !== t1 || $[4] !== t2) {
-		t3 = {
-			locale,
-			defaultValue: t1,
-			onChange: t2,
-			hideTimeZone: true
-		};
-		$[2] = locale;
-		$[3] = t1;
-		$[4] = t2;
-		$[5] = t3;
-	} else t3 = $[5];
-	const fieldState = useTimeFieldState(t3);
+		},
+		hideTimeZone: true
+	});
 	const ref = useRef(null);
 	const innerState = state ?? fieldState;
-	let t4;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = { "aria-label": "Time Picker" };
-		$[6] = t4;
-	} else t4 = $[6];
-	const { fieldProps } = useTimeField(t4, innerState, ref);
-	let t5;
-	if ($[7] !== innerState.segments || $[8] !== isDesktop) {
-		t5 = (index) => {
-			if (!isDesktop) return false;
-			return index === innerState.segments.findIndex(_temp);
-		};
-		$[7] = innerState.segments;
-		$[8] = isDesktop;
-		$[9] = t5;
-	} else t5 = $[9];
-	const getAutoFocus = t5;
-	let t6;
-	if ($[10] !== innerState) {
-		t6 = innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(TimeSegmentButton, {
-			segment,
-			state: innerState,
-			type: "increment"
-		}, i));
-		$[10] = innerState;
-		$[11] = t6;
-	} else t6 = $[11];
-	let t7;
-	if ($[12] !== t6) {
-		t7 = /* @__PURE__ */ jsx("div", {
-			className: "flex items-center justify-center gap-4",
-			children: t6
-		});
-		$[12] = t6;
-		$[13] = t7;
-	} else t7 = $[13];
-	let t8;
-	if ($[14] !== getAutoFocus || $[15] !== innerState) {
-		t8 = innerState.segments.map((segment_0, i_0) => /* @__PURE__ */ jsx(TimeSegmentInput, {
-			segment: segment_0,
-			state: innerState,
-			autoFocus: getAutoFocus(i_0)
-		}, i_0));
-		$[14] = getAutoFocus;
-		$[15] = innerState;
-		$[16] = t8;
-	} else t8 = $[16];
-	let t9;
-	if ($[17] !== fieldProps || $[18] !== t8) {
-		t9 = /* @__PURE__ */ jsx("div", {
-			ref,
-			...fieldProps,
-			className: "flex items-center justify-center gap-4 py-2",
-			children: t8
-		});
-		$[17] = fieldProps;
-		$[18] = t8;
-		$[19] = t9;
-	} else t9 = $[19];
-	let t10;
-	if ($[20] !== innerState) {
-		t10 = innerState.segments.map((segment_1, i_1) => /* @__PURE__ */ jsx(TimeSegmentButton, {
-			segment: segment_1,
-			state: innerState,
-			type: "decrement"
-		}, i_1));
-		$[20] = innerState;
-		$[21] = t10;
-	} else t10 = $[21];
-	let t11;
-	if ($[22] !== t10) {
-		t11 = /* @__PURE__ */ jsx("div", {
-			className: "flex items-center justify-center gap-4",
-			children: t10
-		});
-		$[22] = t10;
-		$[23] = t11;
-	} else t11 = $[23];
-	let t12;
-	if ($[24] !== t11 || $[25] !== t7 || $[26] !== t9) {
-		t12 = /* @__PURE__ */ jsxs("div", {
-			className: "w-full p-8",
-			children: [
-				t7,
-				t9,
-				t11
-			]
-		});
-		$[24] = t11;
-		$[25] = t7;
-		$[26] = t9;
-		$[27] = t12;
-	} else t12 = $[27];
-	return t12;
+	const { fieldProps } = useTimeField({ "aria-label": "Time Picker" }, innerState, ref);
+	const getAutoFocus = (index) => {
+		if (!isDesktop) return false;
+		return index === innerState.segments.findIndex(({ type }) => [
+			"hour",
+			"minute",
+			"dayPeriod"
+		].includes(type));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full p-8",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center gap-4",
+				children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(TimeSegmentButton, {
+					segment,
+					state: innerState,
+					type: "increment"
+				}, i))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref,
+				...fieldProps,
+				className: "flex items-center justify-center gap-4 py-2",
+				children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(TimeSegmentInput, {
+					segment,
+					state: innerState,
+					autoFocus: getAutoFocus(i)
+				}, i))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center gap-4",
+				children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(TimeSegmentButton, {
+					segment,
+					state: innerState,
+					type: "decrement"
+				}, i))
+			})
+		]
+	});
 };
-var TimeSegmentInput = (t0) => {
-	const $ = c(11);
-	const { segment, state, autoFocus } = t0;
+const TimeSegmentInput = ({ segment, state, autoFocus }) => {
 	const ref = useRef(null);
 	const { segmentProps } = useDateSegment(segment, state, ref);
 	const isDesktop = useBreakpoint("md");
-	let t1;
-	let t2;
-	if ($[0] !== autoFocus) {
-		t1 = () => {
-			if (autoFocus) ref.current?.focus();
-		};
-		t2 = [autoFocus];
-		$[0] = autoFocus;
-		$[1] = t1;
-		$[2] = t2;
-	} else {
-		t1 = $[1];
-		t2 = $[2];
-	}
-	useEffect(t1, t2);
+	useEffect(() => {
+		if (autoFocus) ref.current?.focus();
+	}, [autoFocus]);
 	if (![
 		"literal",
 		"hour",
@@ -167,101 +81,46 @@ var TimeSegmentInput = (t0) => {
 	].includes(segment.type)) return null;
 	if (segment.type === "literal") {
 		if (!showSegmentText(segment.text)) return null;
-		let t3;
-		if ($[3] !== segment.text) {
-			t3 = /* @__PURE__ */ jsx("div", {
-				className: "flex flex-col text-center",
-				ref,
-				children: /* @__PURE__ */ jsx(Typography, {
-					as: "span",
-					variant: "prominent-1",
-					size: "label-2",
-					className: "text-text-default-2",
-					children: segment.text
-				})
-			});
-			$[3] = segment.text;
-			$[4] = t3;
-		} else t3 = $[4];
-		return t3;
-	}
-	const t3 = isDesktop && segmentProps;
-	let t4;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = clsx("w-11 rounded-input-rounding-default bg-input-filled-idle py-input-height-extra-small text-center", "font-labels-default text-text-default-3", "border border-input-filled-idle border-solid", "hover:border-interactive-contained-primary-hover", "focus-within:border-interactive-contained-primary-idle focus-within:outline-none");
-		$[5] = t4;
-	} else t4 = $[5];
-	let t5;
-	if ($[6] !== segment) {
-		t5 = getPlaceholder(segment) ?? segment.text;
-		$[6] = segment;
-		$[7] = t5;
-	} else t5 = $[7];
-	let t6;
-	if ($[8] !== t3 || $[9] !== t5) {
-		t6 = /* @__PURE__ */ jsx("div", {
-			className: "flex flex-col items-center justify-center gap-2",
-			children: /* @__PURE__ */ jsx("div", {
-				ref,
-				...t3,
-				className: t4,
-				children: t5
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col text-center",
+			ref,
+			children: /* @__PURE__ */ jsx(Typography, {
+				as: "span",
+				variant: "prominent-1",
+				size: "label-2",
+				className: "text-text-default-2",
+				children: segment.text
 			})
 		});
-		$[8] = t3;
-		$[9] = t5;
-		$[10] = t6;
-	} else t6 = $[10];
-	return t6;
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col items-center justify-center gap-2",
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			...isDesktop && segmentProps,
+			className: clsx("w-11 rounded-input-rounding-default bg-input-filled-idle py-input-height-extra-small text-center", "font-labels-default text-text-default-3", "border border-input-filled-idle border-solid", "hover:border-interactive-contained-primary-hover", "focus-within:border-interactive-contained-primary-idle focus-within:outline-none"),
+			children: getPlaceholder(segment) ?? segment.text
+		})
+	});
 };
-var TimeSegmentButton = (t0) => {
-	const $ = c(15);
-	const { segment, state, type } = t0;
+const TimeSegmentButton = ({ segment, state, type }) => {
 	const stateRef = useRef(state);
-	let t1;
-	let t2;
-	if ($[0] !== state) {
-		t1 = () => {
-			stateRef.current = state;
-		};
-		t2 = [state];
-		$[0] = state;
-		$[1] = t1;
-		$[2] = t2;
-	} else {
-		t1 = $[1];
-		t2 = $[2];
-	}
-	useEffect(t1, t2);
-	let t3;
-	if ($[3] !== segment.type || $[4] !== type) {
-		t3 = (isLongPress) => {
-			if (isLongPress && segment.type === "minute") {
-				const currentValue = stateRef.current.segments.find(_temp2)?.value ?? 0;
-				const diff = type === "increment" ? INCREMENT_STEP_SIZE : -INCREMENT_STEP_SIZE;
-				const normalizedValue = (Math.round((currentValue + diff) / INCREMENT_STEP_SIZE) * INCREMENT_STEP_SIZE % 60 + 60) % 60;
-				stateRef.current.setSegment(segment.type, normalizedValue);
-			} else stateRef.current[type](segment.type);
-		};
-		$[3] = segment.type;
-		$[4] = type;
-		$[5] = t3;
-	} else t3 = $[5];
-	const onPress = t3;
-	const t4 = segment.type !== "dayPeriod";
-	let t5;
-	if ($[6] !== onPress || $[7] !== t4) {
-		t5 = {
-			onPress,
-			enabled: t4,
-			timeout: 300,
-			interval: 300
-		};
-		$[6] = onPress;
-		$[7] = t4;
-		$[8] = t5;
-	} else t5 = $[8];
-	const { onPressStart, onPressEnd } = useLongPressRepeat(t5);
+	useEffect(() => {
+		stateRef.current = state;
+	}, [state]);
+	const onPress = (isLongPress) => {
+		if (isLongPress && segment.type === "minute") {
+			const currentValue = stateRef.current.segments.find((item) => item.type === "minute")?.value ?? 0;
+			const normalizedValue = (Math.round((currentValue + (type === "increment" ? INCREMENT_STEP_SIZE : -5)) / INCREMENT_STEP_SIZE) * INCREMENT_STEP_SIZE % 60 + 60) % 60;
+			stateRef.current.setSegment(segment.type, normalizedValue);
+		} else stateRef.current[type](segment.type);
+	};
+	const { onPressStart, onPressEnd } = useLongPressRepeat({
+		onPress,
+		enabled: segment.type !== "dayPeriod",
+		timeout: 300,
+		interval: 300
+	});
 	if (![
 		"literal",
 		"hour",
@@ -270,59 +129,30 @@ var TimeSegmentButton = (t0) => {
 	].includes(segment.type)) return null;
 	if (segment.type === "literal") {
 		if (!showSegmentText(segment.text)) return null;
-		let t6;
-		if ($[9] !== segment.text) {
-			t6 = /* @__PURE__ */ jsx("div", {
-				className: "flex shrink-0",
-				children: /* @__PURE__ */ jsx(Typography, {
-					as: "span",
-					variant: "prominent-1",
-					size: "label-2",
-					className: "invisible text-text-default-2",
-					"aria-hidden": true,
-					children: segment.text
-				})
-			});
-			$[9] = segment.text;
-			$[10] = t6;
-		} else t6 = $[10];
-		return t6;
-	}
-	const Icon = type === "increment" ? ChevronUp : ChevronDown;
-	let t6;
-	if ($[11] !== Icon || $[12] !== onPressEnd || $[13] !== onPressStart) {
-		t6 = /* @__PURE__ */ jsx("div", {
-			className: "flex w-11 select-none items-center justify-center",
-			onContextMenu: _temp3,
-			children: /* @__PURE__ */ jsx(InlineIconButton, {
-				label: "",
-				color: "secondary",
-				onPressStart,
-				onPressEnd,
-				icon: Icon
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0",
+			children: /* @__PURE__ */ jsx(Typography, {
+				as: "span",
+				variant: "prominent-1",
+				size: "label-2",
+				className: "invisible text-text-default-2",
+				"aria-hidden": true,
+				children: segment.text
 			})
 		});
-		$[11] = Icon;
-		$[12] = onPressEnd;
-		$[13] = onPressStart;
-		$[14] = t6;
-	} else t6 = $[14];
-	return t6;
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-11 select-none items-center justify-center",
+		onContextMenu: (e) => e.preventDefault(),
+		children: /* @__PURE__ */ jsx(InlineIconButton, {
+			label: "",
+			color: "secondary",
+			onPressStart,
+			onPressEnd,
+			icon: type === "increment" ? ChevronUp : ChevronDown
+		})
+	});
 };
-var showSegmentText = (text) => !/[\u2066\u2069]/.test(text);
-function _temp(t0) {
-	const { type } = t0;
-	return [
-		"hour",
-		"minute",
-		"dayPeriod"
-	].includes(type);
-}
-function _temp2(item) {
-	return item.type === "minute";
-}
-function _temp3(e) {
-	return e.preventDefault();
-}
+const showSegmentText = (text) => !/[\u2066\u2069]/.test(text);
 //#endregion
 export { TimePickerForm };