@povio/ui 3.4.0-rc.1 → 3.4.0-rc.10

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -15,10 +15,10 @@ import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
 import { RangeCalendar } from "../shared/RangeCalendar.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Button } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useDateRangePicker, useLocale as useLocale$1 } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { useTranslation } from "react-i18next";
@@ -29,7 +29,7 @@ import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
 var DateRangePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { t } = useTranslation();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, autoFixYear: autoFixYearProp, allowPartialRange: allowPartialRangeProp, minValue, maxValue, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, isClearableIfDisabled, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, autoFixYear: autoFixYearProp, allowPartialRange: allowPartialRangeProp, minValue, maxValue, ...rest } = props;
 	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const variant = variantProp ?? ui.input.variant;
 	const as = asProp ?? ui.input.as;
@@ -649,6 +649,7 @@ var DateRangePickerBase = (props) => {
 				variant,
 				size,
 				isClearable,
+				isClearableIfDisabled,
 				headerProps,
 				todayIcon,
 				todayIconButtonSize,
@@ -804,6 +805,7 @@ var DateRangePickerInner = ({ fullIso = true, minValue, maxValue, renderStaticIn
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
+			onClear: () => props.onChange?.(null),
 			isDisabled,
 			className: clsx("group relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
@@ -857,7 +859,7 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 				...innerProps,
 				ref: mergeRefs(ref, field_0.ref),
 				value: field_0.value ?? null,
-				onChange: field_0.onChange,
+				onChange: (value) => field_0.onChange(value ?? null),
 				onBlur: field_0.onBlur,
 				isDirty,
 				isDisabled: field_0.disabled || props.isDisabled,

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

@@ -12,6 +12,7 @@ interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omi
     disableDropdown?: boolean;
     isTimeOptional?: boolean;
     isClearable?: boolean;
+    isClearableIfDisabled?: boolean;
     todayIcon?: DatePickerTodayIcon;
     todayIconButtonSize?: DatePickerTodayIconButtonSize;
     todayIconButtonComponent?: DatePickerTodayIconButtonComponent;

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js

@@ -13,9 +13,9 @@ import { getStaticCalendarDateTimeSegments, getStaticDateTimeFocusTarget } from
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Time, createCalendar, getLocalTimeZone, toCalendarDate, toCalendarDateTime, today } from "@internationalized/date";
@@ -23,7 +23,7 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DateTimePicker/DateTimePicker.tsx
 var DateTimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, shouldShrinkInput, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, timeZone: timeZoneProp, autoFixYear: autoFixYearProp, format, setDateValueOnDateSelection: setDateValueOnDateSelectionProp, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, shouldShrinkInput, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, isClearableIfDisabled, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, timeZone: timeZoneProp, autoFixYear: autoFixYearProp, format, setDateValueOnDateSelection: setDateValueOnDateSelectionProp, ...rest } = props;
 	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const variant = variantProp ?? ui.input.variant;
 	const as = asProp ?? ui.input.as;
@@ -122,9 +122,10 @@ var DateTimePickerBase = (props) => {
 		labelProps
 	};
 	const onApply = () => {
-		const newValue = dialogState.value;
-		state.setValue(newValue);
-		state.toggle();
+		const newValue = dialogState.value ?? null;
+		onChange?.(newValue);
+		dialogState.setValue(newValue);
+		state.close();
 	};
 	const onMonthYearChange = (selectedDate) => {
 		if (!shouldUpdateDateOnMonthYearChange) return;
@@ -204,6 +205,7 @@ var DateTimePickerBase = (props) => {
 				isDateTime: true,
 				shouldShrinkInput,
 				isClearable,
+				isClearableIfDisabled,
 				headerProps,
 				todayIcon,
 				todayIconButtonSize,
@@ -307,6 +309,7 @@ var DateTimePickerInner = ({ fullIso: _fullIso = true, renderStaticInput, isForm
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
+			onClear: () => props.onChange?.(null),
 			isDisabled,
 			className: clsx("group relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx(props.shouldShrinkInput ? "min-w-0" : "min-w-input-width-min-width", props.inputClassName),
@@ -359,7 +362,7 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 				...innerProps,
 				ref: mergeRefs(ref, field_0.ref),
 				value: field_0.value ?? null,
-				onChange: field_0.onChange,
+				onChange: (value) => field_0.onChange(value ?? null),
 				onBlur: field_0.onBlur,
 				isDirty,
 				isDisabled: field_0.disabled || props.isDisabled,

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

@@ -9,6 +9,7 @@ interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Ar
     disableDropdown?: boolean;
     date?: string | null;
     isClearable?: boolean;
+    isClearableIfDisabled?: boolean;
     isDirty?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;