@povio/ui 3.1.0 → 3.2.0

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

@@ -7,59 +7,65 @@ import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconBu
 import { PillButton } from "../../../buttons/PillButton/PillButton.js";
 import "../../../../config/i18n.js";
 import { Select } from "../../Selection/Select/Select.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/CalendarSelectHeader.tsx
-var CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, isNextMonthDisabled, isNextYearDisabled, offset = { months: 0 }, onNavigate, maxDate, minDate }) => {
+var CalendarSelectHeader = (t0) => {
+	const $ = c(67);
+	const { state, isPrevMonthDisabled, isPrevYearDisabled, isNextMonthDisabled, isNextYearDisabled, offset: t1, onNavigate, maxDate, minDate } = t0;
+	const offset = t1 === void 0 ? { months: 0 } : t1;
 	const { t } = useTranslation("ui");
 	const displayDate = state.visibleRange.start.add(offset);
 	const currentMonth = displayDate.month - 1;
 	const currentYear = displayDate.year;
-	const formatter = useDateFormatter({
-		month: "long",
-		timeZone: state.timeZone
-	});
+	let t2;
+	if ($[0] !== state.timeZone) {
+		t2 = {
+			month: "long",
+			timeZone: state.timeZone
+		};
+		$[0] = state.timeZone;
+		$[1] = t2;
+	} else t2 = $[1];
+	const formatter = useDateFormatter(t2);
 	const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
-	const MONTHS = useMemo(() => {
-		const months = [];
+	let months;
+	if ($[2] !== formatter || $[3] !== numMonths || $[4] !== state.focusedDate || $[5] !== state.timeZone) {
+		months = [];
 		for (let i = 1; i <= numMonths; i++) {
 			const date = state.focusedDate.set({ month: i });
 			months.push(formatter.format(date.toDate(state.timeZone)));
 		}
-		return months;
-	}, [
-		formatter,
-		numMonths,
-		state.focusedDate,
-		state.timeZone
-	]);
-	const years = Array.from({ length: 201 }, (_, i) => currentYear - 100 + i);
-	const getAvailableMonths = () => {
-		return MONTHS.map((month, i) => {
-			const monthDate = displayDate.set({ month: i + 1 });
-			let isDisabled = false;
-			if (maxDate) isDisabled = monthDate.year > maxDate.year || monthDate.year === maxDate.year && monthDate.month >= maxDate.month;
-			if (minDate) isDisabled = monthDate.year < minDate.year || monthDate.year === minDate.year && monthDate.month <= minDate.month;
-			return {
-				month,
-				value: i,
-				isDisabled
-			};
-		});
-	};
-	const getAvailableYears = () => {
-		return years.map((year) => {
-			let isDisabled = false;
-			if (maxDate) isDisabled = year > maxDate.year || year === maxDate.year && displayDate.month >= maxDate.month;
-			if (minDate && !isDisabled) isDisabled = year < minDate.year || year === minDate.year && displayDate.month <= minDate.month;
-			return {
-				year,
-				isDisabled
-			};
-		});
-	};
+		$[2] = formatter;
+		$[3] = numMonths;
+		$[4] = state.focusedDate;
+		$[5] = state.timeZone;
+		$[6] = months;
+	} else months = $[6];
+	const MONTHS = months;
+	const years = Array.from({ length: 201 }, (_, i_0) => currentYear - 100 + i_0);
+	const getAvailableMonths = () => MONTHS.map((month, i_1) => {
+		const monthDate = displayDate.set({ month: i_1 + 1 });
+		let isDisabled = false;
+		if (maxDate) isDisabled = monthDate.year > maxDate.year || monthDate.year === maxDate.year && monthDate.month >= maxDate.month;
+		if (minDate) isDisabled = monthDate.year < minDate.year || monthDate.year === minDate.year && monthDate.month <= minDate.month;
+		return {
+			month,
+			value: i_1,
+			isDisabled
+		};
+	});
+	const getAvailableYears = () => years.map((year) => {
+		let isDisabled_0 = false;
+		if (maxDate) isDisabled_0 = year > maxDate.year || year === maxDate.year && displayDate.month >= maxDate.month;
+		if (minDate && !isDisabled_0) isDisabled_0 = year < minDate.year || year === minDate.year && displayDate.month <= minDate.month;
+		return {
+			year,
+			isDisabled: isDisabled_0
+		};
+	});
 	const availableMonths = getAvailableMonths();
 	const availableYears = getAvailableYears();
 	const handleMonthChange = (value) => {
@@ -67,111 +73,286 @@ var CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, is
 		const newDate = displayDate.set({ month: value + 1 });
 		onNavigate?.(newDate);
 	};
-	const handleYearChange = (value) => {
-		if (value === null) return;
-		const newDate = displayDate.set({ year: value });
-		onNavigate?.(newDate);
+	const handleYearChange = (value_0) => {
+		if (value_0 === null) return;
+		const newDate_0 = displayDate.set({ year: value_0 });
+		onNavigate?.(newDate_0);
 	};
 	const handlePrevMonth = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
-		const newDate = displayDate.subtract({ months: 1 });
-		onNavigate?.(newDate);
+		const newDate_1 = displayDate.subtract({ months: 1 });
+		onNavigate?.(newDate_1);
 	};
-	const handleNextMonth = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		const newDate = displayDate.add({ months: 1 });
-		onNavigate?.(newDate);
+	const handleNextMonth = (e_0) => {
+		e_0.preventDefault();
+		e_0.stopPropagation();
+		const newDate_2 = displayDate.add({ months: 1 });
+		onNavigate?.(newDate_2);
 	};
-	const handlePrevYear = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		const newDate = displayDate.subtract({ years: 1 });
-		onNavigate?.(newDate);
+	const handlePrevYear = (e_1) => {
+		e_1.preventDefault();
+		e_1.stopPropagation();
+		const newDate_3 = displayDate.subtract({ years: 1 });
+		onNavigate?.(newDate_3);
 	};
-	const handleNextYear = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		const newDate = displayDate.add({ years: 1 });
-		onNavigate?.(newDate);
+	const handleNextYear = (e_2) => {
+		e_2.preventDefault();
+		e_2.stopPropagation();
+		const newDate_4 = displayDate.add({ years: 1 });
+		onNavigate?.(newDate_4);
 	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex w-full items-center justify-between gap-3 border-elevation-outline-default-1 border-b border-solid px-3 py-2-5",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center",
-				children: [/* @__PURE__ */ jsx(InlineIconButton, {
-					color: "secondary",
-					isDisabled: isPrevYearDisabled,
-					onClick: handlePrevYear,
-					icon: ChevronsLeftIcon,
-					label: t(($) => $.ui.datePicker.navigation.previousYear)
-				}), /* @__PURE__ */ jsx(InlineIconButton, {
-					color: "secondary",
-					isDisabled: isPrevMonthDisabled,
-					onClick: handlePrevMonth,
-					icon: ChevronLeftIcon,
-					label: t(($) => $.ui.datePicker.navigation.previousMonth)
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex gap-2",
-				children: [/* @__PURE__ */ jsx(Select, {
-					label: "Month",
-					hideLabel: true,
-					customTrigger: /* @__PURE__ */ jsx(PillButton, {
-						color: "secondary",
-						variant: "subtle",
-						iconPosition: "right",
-						icon: ArrowDropDownIcon,
-						children: MONTHS[currentMonth].slice(0, 3)
-					}),
-					ignoreTriggerWidth: true,
-					items: availableMonths.map(({ month, value, isDisabled }) => ({
-						label: month,
-						id: value,
-						isDisabled
-					})).filter(({ isDisabled }) => !isDisabled),
-					value: currentMonth,
-					onChange: handleMonthChange
-				}), /* @__PURE__ */ jsx(Select, {
-					label: "Year",
-					hideLabel: true,
-					customTrigger: /* @__PURE__ */ jsx(PillButton, {
-						color: "secondary",
-						variant: "subtle",
-						iconPosition: "right",
-						icon: ArrowDropDownIcon,
-						children: currentYear.toString()
-					}),
-					items: availableYears.map(({ year, isDisabled }) => ({
-						label: year.toString(),
-						id: year,
-						isDisabled
-					})).filter(({ isDisabled }) => !isDisabled),
-					value: currentYear,
-					onChange: handleYearChange
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center",
-				children: [/* @__PURE__ */ jsx(InlineIconButton, {
-					color: "secondary",
-					isDisabled: isNextMonthDisabled,
-					onClick: handleNextMonth,
-					icon: ChevronRightIcon,
-					label: t(($) => $.ui.datePicker.navigation.nextMonth)
-				}), /* @__PURE__ */ jsx(InlineIconButton, {
-					color: "secondary",
-					isDisabled: isNextYearDisabled,
-					onClick: handleNextYear,
-					icon: ChevronsRightIcon,
-					label: t(($) => $.ui.datePicker.navigation.nextYear)
-				})]
-			})
-		]
-	});
+	const t3 = "flex w-full items-center justify-between gap-3 border-elevation-outline-default-1 border-b border-solid px-3 py-2-5";
+	let t4;
+	if ($[7] !== t) {
+		t4 = t(_temp);
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== handlePrevYear || $[10] !== isPrevYearDisabled || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(InlineIconButton, {
+			color: "secondary",
+			isDisabled: isPrevYearDisabled,
+			onClick: handlePrevYear,
+			icon: ChevronsLeftIcon,
+			label: t4
+		});
+		$[9] = handlePrevYear;
+		$[10] = isPrevYearDisabled;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t) {
+		t6 = t(_temp2);
+		$[13] = t;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== handlePrevMonth || $[16] !== isPrevMonthDisabled || $[17] !== t6) {
+		t7 = /* @__PURE__ */ jsx(InlineIconButton, {
+			color: "secondary",
+			isDisabled: isPrevMonthDisabled,
+			onClick: handlePrevMonth,
+			icon: ChevronLeftIcon,
+			label: t6
+		});
+		$[15] = handlePrevMonth;
+		$[16] = isPrevMonthDisabled;
+		$[17] = t6;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== t5 || $[20] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center",
+			children: [t5, t7]
+		});
+		$[19] = t5;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	const t9 = "flex gap-2";
+	const t10 = MONTHS[currentMonth];
+	let t11;
+	if ($[22] !== t10) {
+		t11 = t10.slice(0, 3);
+		$[22] = t10;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t11) {
+		t12 = /* @__PURE__ */ jsx(PillButton, {
+			color: "secondary",
+			variant: "subtle",
+			iconPosition: "right",
+			icon: ArrowDropDownIcon,
+			children: t11
+		});
+		$[24] = t11;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== availableMonths) {
+		t13 = availableMonths.map(_temp3).filter(_temp4);
+		$[26] = availableMonths;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== currentMonth || $[29] !== handleMonthChange || $[30] !== t12 || $[31] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Select, {
+			label: "Month",
+			hideLabel: true,
+			customTrigger: t12,
+			ignoreTriggerWidth: true,
+			items: t13,
+			value: currentMonth,
+			onChange: handleMonthChange
+		});
+		$[28] = currentMonth;
+		$[29] = handleMonthChange;
+		$[30] = t12;
+		$[31] = t13;
+		$[32] = t14;
+	} else t14 = $[32];
+	const T0 = Select;
+	const t15 = "Year";
+	const t16 = true;
+	let t17;
+	if ($[33] !== currentYear) {
+		t17 = currentYear.toString();
+		$[33] = currentYear;
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] !== t17) {
+		t18 = /* @__PURE__ */ jsx(PillButton, {
+			color: "secondary",
+			variant: "subtle",
+			iconPosition: "right",
+			icon: ArrowDropDownIcon,
+			children: t17
+		});
+		$[35] = t17;
+		$[36] = t18;
+	} else t18 = $[36];
+	const t19 = availableYears.map(_temp5);
+	let t20;
+	if ($[37] !== t19) {
+		t20 = t19.filter(_temp6);
+		$[37] = t19;
+		$[38] = t20;
+	} else t20 = $[38];
+	let t21;
+	if ($[39] !== T0 || $[40] !== currentYear || $[41] !== handleYearChange || $[42] !== t18 || $[43] !== t20) {
+		t21 = /* @__PURE__ */ jsx(T0, {
+			label: t15,
+			hideLabel: t16,
+			customTrigger: t18,
+			items: t20,
+			value: currentYear,
+			onChange: handleYearChange
+		});
+		$[39] = T0;
+		$[40] = currentYear;
+		$[41] = handleYearChange;
+		$[42] = t18;
+		$[43] = t20;
+		$[44] = t21;
+	} else t21 = $[44];
+	let t22;
+	if ($[45] !== t14 || $[46] !== t21) {
+		t22 = /* @__PURE__ */ jsxs("div", {
+			className: t9,
+			children: [t14, t21]
+		});
+		$[45] = t14;
+		$[46] = t21;
+		$[47] = t22;
+	} else t22 = $[47];
+	let t23;
+	if ($[48] !== t) {
+		t23 = t(_temp7);
+		$[48] = t;
+		$[49] = t23;
+	} else t23 = $[49];
+	let t24;
+	if ($[50] !== handleNextMonth || $[51] !== isNextMonthDisabled || $[52] !== t23) {
+		t24 = /* @__PURE__ */ jsx(InlineIconButton, {
+			color: "secondary",
+			isDisabled: isNextMonthDisabled,
+			onClick: handleNextMonth,
+			icon: ChevronRightIcon,
+			label: t23
+		});
+		$[50] = handleNextMonth;
+		$[51] = isNextMonthDisabled;
+		$[52] = t23;
+		$[53] = t24;
+	} else t24 = $[53];
+	let t25;
+	if ($[54] !== t) {
+		t25 = t(_temp8);
+		$[54] = t;
+		$[55] = t25;
+	} else t25 = $[55];
+	let t26;
+	if ($[56] !== handleNextYear || $[57] !== isNextYearDisabled || $[58] !== t25) {
+		t26 = /* @__PURE__ */ jsx(InlineIconButton, {
+			color: "secondary",
+			isDisabled: isNextYearDisabled,
+			onClick: handleNextYear,
+			icon: ChevronsRightIcon,
+			label: t25
+		});
+		$[56] = handleNextYear;
+		$[57] = isNextYearDisabled;
+		$[58] = t25;
+		$[59] = t26;
+	} else t26 = $[59];
+	let t27;
+	if ($[60] !== t24 || $[61] !== t26) {
+		t27 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center",
+			children: [t24, t26]
+		});
+		$[60] = t24;
+		$[61] = t26;
+		$[62] = t27;
+	} else t27 = $[62];
+	let t28;
+	if ($[63] !== t22 || $[64] !== t27 || $[65] !== t8) {
+		t28 = /* @__PURE__ */ jsxs("div", {
+			className: t3,
+			children: [
+				t8,
+				t22,
+				t27
+			]
+		});
+		$[63] = t22;
+		$[64] = t27;
+		$[65] = t8;
+		$[66] = t28;
+	} else t28 = $[66];
+	return t28;
 };
+function _temp($) {
+	return $.ui.datePicker.navigation.previousYear;
+}
+function _temp2($_0) {
+	return $_0.ui.datePicker.navigation.previousMonth;
+}
+function _temp3(t0) {
+	const { month: month_0, value: value_1, isDisabled: isDisabled_1 } = t0;
+	return {
+		label: month_0,
+		id: value_1,
+		isDisabled: isDisabled_1
+	};
+}
+function _temp4(t0) {
+	const { isDisabled: isDisabled_2 } = t0;
+	return !isDisabled_2;
+}
+function _temp5(t0) {
+	const { year: year_0, isDisabled: isDisabled_3 } = t0;
+	return {
+		label: year_0.toString(),
+		id: year_0,
+		isDisabled: isDisabled_3
+	};
+}
+function _temp6(t0) {
+	const { isDisabled: isDisabled_4 } = t0;
+	return !isDisabled_4;
+}
+function _temp7($_1) {
+	return $_1.ui.datePicker.navigation.nextMonth;
+}
+function _temp8($_2) {
+	return $_2.ui.datePicker.navigation.nextYear;
+}
 //#endregion
 export { CalendarSelectHeader };

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

@@ -13,6 +13,7 @@ interface DateFieldProps extends Omit<DateFieldStateOptions, "locale" | "createC
     isTimeOptional?: boolean;
     format?: string;
     timeZone?: string;
+    segmentGroup?: string;
 }
-export declare const DateField: ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity, isTimeOptional, format, timeZone, ...props }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateField: ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity, isTimeOptional, format, timeZone, segmentGroup, ...props }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};