@povio/ui 2.1.25 → 2.1.26

package/dist/Calendar2.js

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useState } from "react";
 import { useCalendar } from "@react-aria/calendar";
-const Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,...props }) => {
+const Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply, onMonthYearChange,...props }) => {
 	const [toggleState, setToggleState] = useState(null);
 	const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(props.calendarProps, props.state);
 	const handleDateChange = () => {
@@ -21,11 +21,13 @@ const Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply
 		});
 		if (toggleState === "month") return /* @__PURE__ */ jsx(MonthPicker, {
 			state: props.state,
-			onSelectionChange: () => setToggleState(null)
+			onSelectionChange: () => setToggleState(null),
+			onDateChange: onMonthYearChange
 		});
 		if (toggleState === "year") return /* @__PURE__ */ jsx(YearPicker, {
 			state: props.state,
-			onSelectionChange: () => setToggleState(null)
+			onSelectionChange: () => setToggleState(null),
+			onDateChange: onMonthYearChange
 		});
 		if (toggleState === "time" && includesTime) return /* @__PURE__ */ jsx("div", {
 			className: "flex h-72 w-80 items-center justify-center",

package/dist/DatePicker.js

@@ -18,7 +18,7 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 var PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
 var DatePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, placeholder, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry,...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, placeholder, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange,...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -91,6 +91,15 @@ var DatePickerBase = (props) => {
 		state.setValue(dialogState.value);
 		state.toggle();
 	};
+	const onMonthYearChange = (selectedDate) => {
+		if (!shouldUpdateDateOnMonthYearChange) return;
+		const updatedDate = (dialogState.value || state.value || today(getLocalTimeZone())).set({
+			year: selectedDate.year,
+			month: selectedDate.month
+		});
+		dialogState.setValue(updatedDate);
+		calendarState.setFocusedDate(updatedDate);
+	};
 	const onTodayPress = () => {
 		dialogState.setValue(today(getLocalTimeZone()));
 		calendarState.setFocusedDate(today(getLocalTimeZone()));
@@ -146,7 +155,8 @@ var DatePickerBase = (props) => {
 				children: /* @__PURE__ */ jsx(Calendar, {
 					state: calendarState,
 					calendarProps,
-					onApply
+					onApply,
+					onMonthYearChange
 				})
 			})]
 		})

package/dist/DateTimePicker.js

@@ -16,7 +16,7 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 var PLACEHOLDER_VALUE = new CalendarDateTime(2024, 1, 1);
 var DateTimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, isTimeOptional, placeholder, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry,...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, isTimeOptional, placeholder, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange,...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -94,6 +94,21 @@ var DateTimePickerBase = (props) => {
 		state.setValue(dialogState.value);
 		state.toggle();
 	};
+	const onMonthYearChange = (selectedDate) => {
+		if (!shouldUpdateDateOnMonthYearChange) return;
+		const baseDate = dialogState.value || state.value;
+		if (baseDate) {
+			const updatedDate = baseDate.set({
+				year: selectedDate.year,
+				month: selectedDate.month
+			});
+			dialogState.setValue(updatedDate);
+			calendarState.setFocusedDate(updatedDate);
+			return;
+		}
+		dialogState.setValue(toCalendarDateTime(selectedDate));
+		calendarState.setFocusedDate(selectedDate);
+	};
 	const onTodayPress = () => {
 		dialogState.setValue(toCalendarDateTime(now(getLocalTimeZone())));
 		calendarState.setFocusedDate(today(getLocalTimeZone()));
@@ -167,7 +182,8 @@ var DateTimePickerBase = (props) => {
 					calendarProps,
 					includesTime: true,
 					datePickerState: dialogState,
-					onApply
+					onApply,
+					onMonthYearChange
 				})
 			})]
 		})

package/dist/MonthPicker.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { ListBox, ListBoxItem } from "react-aria-components";
 import { useDateFormatter } from "@react-aria/i18n";
-const MonthPicker = ({ state, onSelectionChange }) => {
+const MonthPicker = ({ state, onSelectionChange, onDateChange }) => {
 	const formatter = useDateFormatter({
 		month: "long",
 		timeZone: state.timeZone
@@ -31,8 +31,9 @@ const MonthPicker = ({ state, onSelectionChange }) => {
 		onSelectionChange: (key) => {
 			if (key === "all") return;
 			if (typeof [...key][0] === "number") {
-				const date = state.focusedDate.set({ month: [...key][0] });
-				state.setFocusedDate(date);
+				const selectedDate = state.focusedDate.set({ month: [...key][0] });
+				state.setFocusedDate(selectedDate);
+				onDateChange?.(selectedDate);
 			}
 			onSelectionChange(key);
 		},

package/dist/YearPicker.js

@@ -6,7 +6,7 @@ import { ListBox, ListBoxItem } from "react-aria-components";
 import { useMemo } from "react";
 import { today } from "@internationalized/date";
 import { useDateFormatter } from "@react-aria/i18n";
-const YearPicker = ({ state, onSelectionChange }) => {
+const YearPicker = ({ state, onSelectionChange, onDateChange }) => {
 	const formatter = useDateFormatter({
 		year: "numeric",
 		timeZone: state.timeZone
@@ -39,8 +39,9 @@ const YearPicker = ({ state, onSelectionChange }) => {
 			if (key === "all") return;
 			const index = [...key][0];
 			if (typeof index === "number") {
-				const date = state.focusedDate.set({ year: years[index].value });
-				state.setFocusedDate(date);
+				const selectedDate = state.focusedDate.set({ year: years[index].value });
+				state.setFocusedDate(selectedDate);
+				onDateChange?.(selectedDate);
 			}
 			onSelectionChange(key);
 		},

package/dist/components/inputs/DateTime/DatePicker/DatePicker.d.ts

@@ -15,6 +15,7 @@ interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Da
     isDirty?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;
+    shouldUpdateDateOnMonthYearChange?: boolean;
 }
 export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: string | null;

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts

@@ -15,6 +15,7 @@ interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omi
     isDirty?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;
+    shouldUpdateDateOnMonthYearChange?: boolean;
 }
 export interface DateTimePickerProps extends Omit<DateTimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;

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

@@ -1,3 +1,4 @@
+import { CalendarDate } from '@internationalized/date';
 import { CalendarState, CalendarStateOptions } from '@react-stately/calendar';
 import { DatePickerState } from 'react-stately';
 type DateTimeCalendarProps = {
@@ -14,7 +15,8 @@ type CalendarProps = DateTimeCalendarProps & {
     state: CalendarState;
     calendarProps: Omit<CalendarStateOptions, "locale" | "createCalendar">;
     onApply: () => void;
+    onMonthYearChange?: (selectedDate: CalendarDate) => void;
 };
 export type ToggleState = "month" | "year" | "time";
-export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, onApply, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, onApply, onMonthYearChange, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,9 @@
+import { CalendarDate } from '@internationalized/date';
 import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
 import { Key } from 'react-aria-components';
 export interface MonthPickerProps {
     state: CalendarState | RangeCalendarState;
     onSelectionChange: (key: Set<Key>) => void;
+    onDateChange?: (selectedDate: CalendarDate) => void;
 }
-export declare const MonthPicker: ({ state, onSelectionChange }: MonthPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MonthPicker: ({ state, onSelectionChange, onDateChange }: MonthPickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,10 @@
+import { CalendarDate } from '@internationalized/date';
 import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
 import { Key } from 'react-aria-components';
 interface YearPickerProps {
     state: CalendarState | RangeCalendarState;
     onSelectionChange: (key: Set<Key>) => void;
+    onDateChange?: (selectedDate: CalendarDate) => void;
 }
-export declare const YearPicker: ({ state, onSelectionChange }: YearPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const YearPicker: ({ state, onSelectionChange, onDateChange }: YearPickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/config/uiConfig.context.d.ts

@@ -20,7 +20,7 @@ export declare namespace UIConfig {
         select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType">;
         toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
-        dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry">;
+        dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange">;
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
     }
     interface ProviderProps {

package/dist/uiConfig.context.js

@@ -35,7 +35,8 @@ let UIConfig;
 		dateInput: {
 			todayIcon: false,
 			shouldForceLeadingZeros: false,
-			disableManualEntry: false
+			disableManualEntry: false,
+			shouldUpdateDateOnMonthYearChange: false
 		},
 		actionModal: {
 			titleTypography: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.1.25",
+  "version": "2.1.26",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",