@paygreen/pgui 2.14.1 → 2.14.2

package/dist/cjs/types/components/InputDayPicker/index.d.ts

@@ -13,5 +13,8 @@ export type InputDayPickerProps = {
     isDisabled?: boolean;
     inputProps?: any;
     dayPickerProps?: any;
+    isOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
 };
-export declare const InputDayPicker: ({ value, onChange, placeholder, name, isDisabled, withTime, locale, minDate, maxDate, variant, inputProps, dayPickerProps, }: InputDayPickerProps) => React.JSX.Element;
+export declare const InputDayPicker: ({ value, onChange, placeholder, name, isDisabled, withTime, locale, minDate, maxDate, variant, inputProps, dayPickerProps, isOpen: isOpenProp, onOpen: onOpenProp, onClose: onCloseProp, }: InputDayPickerProps) => React.JSX.Element;

package/dist/cjs/types/components/InputRangePicker/index.d.ts

@@ -13,11 +13,13 @@ export type InputRangePickerProps = {
     locale?: 'fr' | 'en';
     variant?: 'filled' | 'outline';
     withTime?: boolean;
-    minDate?: Date | null | undefined;
-    maxDate?: Date | null | undefined;
+    minStartDate?: Date | null | undefined;
+    maxStartDate?: Date | null | undefined;
+    minEndDate?: Date | null | undefined;
+    maxEndDate?: Date | null | undefined;
     isDisabled?: boolean;
     breakpoint?: 'base' | 'sm' | 'md' | 'lg';
     inputProps?: any;
     dayPickerProps?: any;
 };
-export declare const InputRangePicker: ({ value, onChange, placeholder, name, isDisabled, withTime, locale, minDate, maxDate, variant, breakpoint, inputProps, dayPickerProps, }: InputRangePickerProps) => React.JSX.Element;
+export declare const InputRangePicker: ({ value, onChange, placeholder, name, isDisabled, withTime, locale, minStartDate, maxStartDate, minEndDate, maxEndDate, variant, breakpoint, inputProps, dayPickerProps, }: InputRangePickerProps) => React.JSX.Element;

package/dist/esm/index.js

@@ -7905,8 +7905,11 @@ function MdCalendarToday (props) {
 dayjs.extend(customParseFormat);
 dayjs.extend(utc);
 var InputDayPicker = function (_a) {
-    var value = _a.value, onChange = _a.onChange, placeholder = _a.placeholder, name = _a.name, isDisabled = _a.isDisabled, withTime = _a.withTime, _b = _a.locale, locale = _b === void 0 ? 'en' : _b, minDate = _a.minDate, maxDate = _a.maxDate, _c = _a.variant, variant = _c === void 0 ? 'filled' : _c, inputProps = _a.inputProps, dayPickerProps = _a.dayPickerProps;
-    var _d = useDisclosure(), isOpen = _d.isOpen, onOpen = _d.onOpen, onClose = _d.onClose;
+    var value = _a.value, onChange = _a.onChange, placeholder = _a.placeholder, name = _a.name, isDisabled = _a.isDisabled, withTime = _a.withTime, _b = _a.locale, locale = _b === void 0 ? 'en' : _b, minDate = _a.minDate, maxDate = _a.maxDate, _c = _a.variant, variant = _c === void 0 ? 'filled' : _c, inputProps = _a.inputProps, dayPickerProps = _a.dayPickerProps, isOpenProp = _a.isOpen, onOpenProp = _a.onOpen, onCloseProp = _a.onClose;
+    var disclosure = useDisclosure();
+    var isOpen = isOpenProp || disclosure.isOpen;
+    var onOpen = onOpenProp || disclosure.onOpen;
+    var onClose = onCloseProp || disclosure.onClose;
     var inputLeftElementColor = useColorModeValue('gray.400', 'gray.600');
     var inputLeftElementDisabledColor = useColorModeValue('gray.600', 'gray.400');
     var dialogSheetBg = useColorModeValue('gray.50', 'gray.800');
@@ -7917,18 +7920,20 @@ var InputDayPicker = function (_a) {
         : withTime
             ? 'MM/DD/YYYY HH:mm'
             : 'MM/DD/YYYY';
-    var _e = useState(value ? dayjs(value).format(defaultDateFormat) : ''), dateValue = _e[0], setDateValue = _e[1];
+    var _d = useState(value ? dayjs(value).format(defaultDateFormat) : ''), dateValue = _d[0], setDateValue = _d[1];
     // Update the input value when the value prop changes
     useEffect(function () {
-        setDateValue(value ? dayjs(value).format(defaultDateFormat) : '');
+        setDateValue(dayjs(value).isValid() ? dayjs(value).format(defaultDateFormat) : '');
     }, [value]);
     // Add new state variables for hours and minutes
-    var _f = useState('00'), hours = _f[0], setHours = _f[1];
-    var _g = useState('00'), minutes = _g[0], setMinutes = _g[1];
+    var _e = useState('00'), hours = _e[0], setHours = _e[1];
+    var _f = useState('00'), minutes = _f[0], setMinutes = _f[1];
     // Update the input value when the value prop changes
     var handleInputChange = function (date) {
-        if (!date)
+        if (!date) {
             setDateValue('');
+            onChange(null);
+        }
         var dateInput = dayjs(date, defaultDateFormat, true);
         if (dateInput.isValid()) {
             if (isOpen)
@@ -7939,9 +7944,6 @@ var InputDayPicker = function (_a) {
             setMinutes(parseInt(dateInput.format('mm'), 10).toString());
             onChange(dateInput.toDate());
         }
-        else {
-            onChange(null);
-        }
     };
     // Update the input value when the value prop changes
     var handleDateSelection = function (date) {
@@ -19024,13 +19026,30 @@ var InputPhone = function (_a) {
 
 var InputRangePicker = function (_a) {
     var _b;
-    var value = _a.value, onChange = _a.onChange, placeholder = _a.placeholder, name = _a.name, isDisabled = _a.isDisabled, withTime = _a.withTime, _c = _a.locale, locale = _c === void 0 ? 'en' : _c, minDate = _a.minDate, maxDate = _a.maxDate, _d = _a.variant, variant = _d === void 0 ? 'filled' : _d, _e = _a.breakpoint, breakpoint = _e === void 0 ? 'md' : _e, inputProps = _a.inputProps, dayPickerProps = _a.dayPickerProps;
+    var value = _a.value, onChange = _a.onChange, placeholder = _a.placeholder, name = _a.name, isDisabled = _a.isDisabled, withTime = _a.withTime, _c = _a.locale, locale = _c === void 0 ? 'en' : _c, minStartDate = _a.minStartDate, maxStartDate = _a.maxStartDate, minEndDate = _a.minEndDate, maxEndDate = _a.maxEndDate, _d = _a.variant, variant = _d === void 0 ? 'filled' : _d, _e = _a.breakpoint, breakpoint = _e === void 0 ? 'md' : _e, inputProps = _a.inputProps, dayPickerProps = _a.dayPickerProps;
     var _f = useState((value === null || value === void 0 ? void 0 : value.from) || null), fromValue = _f[0], setFromValue = _f[1];
     var _g = useState((value === null || value === void 0 ? void 0 : value.to) || null), toValue = _g[0], setToValue = _g[1];
+    var _h = useDisclosure(), isOpenFrom = _h.isOpen, onOpenFrom = _h.onOpen, onCloseFrom = _h.onClose;
+    var _j = useDisclosure(), isOpenTo = _j.isOpen, onOpenTo = _j.onOpen, onCloseTo = _j.onClose;
+    // close the other date picker when one is opened
     useEffect(function () {
-        onChange({ from: fromValue, to: toValue });
+        if (isOpenFrom) {
+            onCloseTo();
+        }
+    }, [isOpenFrom]);
+    useEffect(function () {
+        if (isOpenTo) {
+            onCloseFrom();
+        }
+    }, [isOpenTo]);
+    // Update the parent state when the local state changes
+    useEffect(function () {
+        var newValue = { from: fromValue, to: toValue };
+        if (JSON.stringify(newValue) !== JSON.stringify(value)) {
+            onChange(newValue);
+        }
     }, [fromValue, toValue]);
-    // Update the state when the value changes
+    // Update the state when the props value changes
     useEffect(function () {
         setFromValue((value === null || value === void 0 ? void 0 : value.from) || null);
         setToValue((value === null || value === void 0 ? void 0 : value.to) || null);
@@ -19041,8 +19060,8 @@ var InputRangePicker = function (_a) {
         _b[breakpoint] = 'row',
         _b));
     return (React__default.createElement(Flex, { flexDirection: flexDirection, gap: 2 },
-        React__default.createElement(InputDayPicker, { value: fromValue, onChange: setFromValue, placeholder: placeholder, name: name, isDisabled: isDisabled, withTime: withTime, locale: locale, minDate: minDate, maxDate: maxDate, variant: variant, inputProps: inputProps, dayPickerProps: dayPickerProps }),
-        React__default.createElement(InputDayPicker, { value: toValue, onChange: setToValue, placeholder: placeholder, name: name, isDisabled: isDisabled, withTime: withTime, locale: locale, minDate: minDate, maxDate: maxDate, variant: variant, inputProps: inputProps, dayPickerProps: dayPickerProps })));
+        React__default.createElement(InputDayPicker, { value: fromValue, onChange: setFromValue, placeholder: placeholder, name: name, isDisabled: isDisabled, withTime: withTime, locale: locale, minDate: minStartDate, maxDate: maxStartDate, variant: variant, inputProps: inputProps, dayPickerProps: dayPickerProps, onClose: onCloseFrom, onOpen: onOpenFrom, isOpen: isOpenFrom }),
+        React__default.createElement(InputDayPicker, { value: toValue, onChange: setToValue, placeholder: placeholder, name: name, isDisabled: isDisabled, withTime: withTime, locale: locale, minDate: minEndDate, maxDate: maxEndDate, variant: variant, inputProps: inputProps, dayPickerProps: dayPickerProps, onClose: onCloseTo, onOpen: onOpenTo, isOpen: isOpenTo })));
 };
 
 var ModalResponsive = function (_a) {