@povio/ui 3.1.0 → 3.2.0

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

@@ -5,6 +5,7 @@ import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconBu
 import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
 import { getPlaceholder } from "./DateSegmentItem.js";
 import { useLongPressRepeat } from "../../../../hooks/useLongPressRepeat.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useRef } from "react";
@@ -13,67 +14,152 @@ 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 = ({ state, datePickerState }) => {
+var TimePickerForm = (t0) => {
+	const $ = c(28);
+	const { state, datePickerState } = t0;
 	const isDesktop = useBreakpoint("md");
 	const { locale } = useLocale();
-	const fieldState = useTimeFieldState({
-		locale,
-		defaultValue: datePickerState?.timeValue,
-		onChange: (value) => {
+	const t1 = datePickerState?.timeValue;
+	let t2;
+	if ($[0] !== datePickerState) {
+		t2 = (value) => {
 			datePickerState?.setTimeValue(value ?? new Time(0, 0));
-		},
-		hideTimeZone: true
-	});
+		};
+		$[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);
 	const ref = useRef(null);
 	const innerState = state ?? fieldState;
-	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))
-			})
-		]
-	});
+	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;
 };
-var TimeSegmentInput = ({ segment, state, autoFocus }) => {
+var TimeSegmentInput = (t0) => {
+	const $ = c(11);
+	const { segment, state, autoFocus } = t0;
 	const ref = useRef(null);
 	const { segmentProps } = useDateSegment(segment, state, ref);
 	const isDesktop = useBreakpoint("md");
-	useEffect(() => {
-		if (autoFocus) ref.current?.focus();
-	}, [autoFocus]);
+	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);
 	if (![
 		"literal",
 		"hour",
@@ -82,47 +168,101 @@ var TimeSegmentInput = ({ segment, state, autoFocus }) => {
 	].includes(segment.type)) return null;
 	if (segment.type === "literal") {
 		if (!showSegmentText(segment.text)) return null;
-		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
+		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 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
-		})
-	});
+		$[8] = t3;
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	return t6;
 };
-var TimeSegmentButton = ({ segment, state, type }) => {
+var TimeSegmentButton = (t0) => {
+	const $ = c(15);
+	const { segment, state, type } = t0;
 	const stateRef = useRef(state);
-	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 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);
-	};
-	const { onPressStart, onPressEnd } = useLongPressRepeat({
-		onPress,
-		enabled: segment.type !== "dayPeriod",
-		timeout: 300,
-		interval: 300
-	});
+	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);
 	if (![
 		"literal",
 		"hour",
@@ -131,30 +271,59 @@ var TimeSegmentButton = ({ segment, state, type }) => {
 	].includes(segment.type)) return null;
 	if (segment.type === "literal") {
 		if (!showSegmentText(segment.text)) return null;
-		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
+		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" ? ChevronUpIcon : ChevronDownIcon;
+	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 w-11 select-none items-center justify-center",
-		onContextMenu: (e) => e.preventDefault(),
-		children: /* @__PURE__ */ jsx(InlineIconButton, {
-			label: "",
-			color: "secondary",
-			onPressStart,
-			onPressEnd,
-			icon: type === "increment" ? ChevronUpIcon : ChevronDownIcon
-		})
-	});
+		$[11] = Icon;
+		$[12] = onPressEnd;
+		$[13] = onPressStart;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
 };
 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();
+}
 //#endregion
 export { TimePickerForm };

package/dist/components/inputs/DateTime/shared/TimePickerInput.d.ts

@@ -9,6 +9,7 @@ interface DatePickerInputProps extends InputVariantProps {
     state: TimeFieldState;
     isDisabled?: boolean;
     isDirty?: boolean;
+    isRequired?: boolean;
     isInvalid?: boolean;
     disableDropdown?: boolean;
     headerProps?: FormFieldHeaderProps;
@@ -17,6 +18,8 @@ interface DatePickerInputProps extends InputVariantProps {
     placeholder?: string;
     className?: string;
     onPress: () => void;
+    onClear?: () => void;
+    fireBlurOnChange?: boolean;
 }
-export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, onClear, fireBlurOnChange, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};