@povio/ui 2.1.25 → 2.1.27

package/dist/Button.js

@@ -34,7 +34,7 @@ const Button$1 = ({ icon: Icon, iconPosition, children, isLoading, className, li
 			children: /* @__PURE__ */ jsx(ButtonContent, {
 				isLoading,
 				icon: Icon,
-				text: children,
+				content: children,
 				ref: onContentRef,
 				hideText: props.iconOnly,
 				iconPosition,

package/dist/ButtonContent.js

@@ -4,7 +4,7 @@ import { Typography } from "./Typography.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isValidElement } from "react";
-const ButtonContent = ({ ref, text, isLoading, className, icon: Icon, iconClassName, hideText, iconPosition, typography }) => {
+const ButtonContent = ({ ref, content, isLoading, className, icon: Icon, iconClassName, hideText, iconPosition, typography }) => {
 	let iconOrLoader = null;
 	if (isLoading) iconOrLoader = /* @__PURE__ */ jsx(Loader, { className: "shrink-0" });
 	else if (Icon) if (isValidElement(Icon)) iconOrLoader = Icon;
@@ -21,7 +21,7 @@ const ButtonContent = ({ ref, text, isLoading, className, icon: Icon, iconClassN
 			...typography,
 			className: clsx("hyphens-auto md:truncate", hideText && "sr-only"),
 			ref,
-			children: text
+			children: content
 		})]
 	});
 };

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/PillButton.js

@@ -23,7 +23,7 @@ const PillButton = ({ children, dismissable, toggle, icon, iconPosition,...props
 				className: props.className
 			}),
 			children: /* @__PURE__ */ jsx(ButtonContent, {
-				text: children,
+				content: children,
 				ref: onContentRef,
 				icon: dismissable ? CloseIcon : icon,
 				iconPosition: dismissable ? "right" : iconPosition,

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/buttons/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactElement, SVGProps } from 'react';
+import { FC, ReactElement, ReactNode, SVGProps } from 'react';
 import { ButtonProps as AriaButtonProps, ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
 import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
 import { LinkNavigationProps } from '../../text/Link/Link';
@@ -17,7 +17,7 @@ type ToggleButtonProps = {
     isSelected?: boolean;
 } & AriaToggleButtonProps);
 export type ButtonProps<IconOnly extends boolean = false> = ButtonVariantProps & ButtonContentVariantProps & AriaButtonProps & ButtonIconProps<IconOnly> & ToggleButtonProps & {
-    children: string;
+    children: ReactNode;
     isLoading?: boolean;
     link?: LinkNavigationProps;
     noDisableWhenLoading?: boolean;

package/dist/components/buttons/PillButton/PillButton.d.ts

@@ -1,9 +1,9 @@
-import { FC, SVGProps } from 'react';
+import { FC, ReactNode, SVGProps } from 'react';
 import { ButtonProps as AriaButtonProps, ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
 import { PillButtonVariants } from './pillButton.cva';
 import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
 export interface PillButtonProps extends AriaButtonProps, Omit<AriaToggleButtonProps, keyof AriaButtonProps>, ButtonContentVariantProps, PillButtonVariants {
-    children: string;
+    children: ReactNode;
     dismissable?: boolean;
     toggle?: boolean;
     icon?: FC<SVGProps<SVGSVGElement>>;

package/dist/components/buttons/TextButton/TextButton.d.ts

@@ -1,10 +1,11 @@
+import { ReactNode } from 'react';
 import { ButtonProps as AriaButtonProps } from 'react-aria-components';
 import { ButtonIconProps } from '../Button/Button';
 import { ButtonVariantProps } from '../Button/button.cva';
 import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
 import { LinkNavigationProps } from '../../text/Link/Link';
 export type TextButtonProps = Omit<ButtonVariantProps, "variant"> & ButtonContentVariantProps & AriaButtonProps & ButtonIconProps<true | false> & {
-    children: string;
+    children: ReactNode;
     isLoading?: boolean;
     link?: LinkNavigationProps;
     disableTooltip?: boolean;

package/dist/components/buttons/ToggleButton/ToggleButton.d.ts

@@ -1,9 +1,10 @@
+import { ReactNode } from 'react';
 import { ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
 import { ButtonIconProps } from '../Button/Button';
 import { ButtonVariantProps } from '../Button/button.cva';
 import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
 export type ToggleButtonProps = ButtonVariantProps & ButtonContentVariantProps & AriaToggleButtonProps & ButtonIconProps<true | false> & {
-    children: string;
+    children: ReactNode;
     disableTooltip?: boolean;
 };
 export declare const ToggleButton: ({ children, ...props }: ToggleButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/shared/ButtonContent.d.ts

@@ -1,10 +1,10 @@
-import { FC, ReactElement, Ref, SVGProps } from 'react';
+import { FC, ReactElement, ReactNode, Ref, SVGProps } from 'react';
 import { ButtonVariantProps } from '../Button/button.cva';
 import { ButtonContentVariantProps } from './buttonContent.cva';
 import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 interface ButtonContentProps extends ButtonContentVariantProps, Pick<ButtonVariantProps, "size"> {
     ref?: Ref<HTMLHeadingElement>;
-    text: string;
+    content: ReactNode;
     isLoading?: boolean;
     className?: string;
     icon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
@@ -12,5 +12,5 @@ interface ButtonContentProps extends ButtonContentVariantProps, Pick<ButtonVaria
     hideText?: boolean;
     typography?: TypographyVariantProps;
 }
-export declare const ButtonContent: ({ ref, text, isLoading, className, icon: Icon, iconClassName, hideText, iconPosition, typography, }: ButtonContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonContent: ({ ref, content, isLoading, className, icon: Icon, iconClassName, hideText, iconPosition, typography, }: ButtonContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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/components/overlays/Tooltip/TooltipEllipsis.d.ts

@@ -1,6 +1,6 @@
-import { JSX, Ref } from 'react';
+import { JSX, ReactNode, Ref } from 'react';
 export interface TooltipEllipsisProps {
-    text: string;
+    text: ReactNode;
     children: (ref: Ref<HTMLHeadingElement> | undefined) => JSX.Element;
     isDisabled?: boolean;
 }

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.27",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",