@paygreen/pgui 2.14.1 → 2.14.2

package/dist/cjs/index.js

@@ -7931,8 +7931,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 = react.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 = react.useDisclosure();
+    var isOpen = isOpenProp || disclosure.isOpen;
+    var onOpen = onOpenProp || disclosure.onOpen;
+    var onClose = onCloseProp || disclosure.onClose;
     var inputLeftElementColor = react.useColorModeValue('gray.400', 'gray.600');
     var inputLeftElementDisabledColor = react.useColorModeValue('gray.600', 'gray.400');
     var dialogSheetBg = react.useColorModeValue('gray.50', 'gray.800');
@@ -7943,18 +7946,20 @@ var InputDayPicker = function (_a) {
         : withTime
             ? 'MM/DD/YYYY HH:mm'
             : 'MM/DD/YYYY';
-    var _e = React.useState(value ? dayjs(value).format(defaultDateFormat) : ''), dateValue = _e[0], setDateValue = _e[1];
+    var _d = React.useState(value ? dayjs(value).format(defaultDateFormat) : ''), dateValue = _d[0], setDateValue = _d[1];
     // Update the input value when the value prop changes
     React.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 = React.useState('00'), hours = _f[0], setHours = _f[1];
-    var _g = React.useState('00'), minutes = _g[0], setMinutes = _g[1];
+    var _e = React.useState('00'), hours = _e[0], setHours = _e[1];
+    var _f = React.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)
@@ -7965,9 +7970,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) {
@@ -19050,13 +19052,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 = React.useState((value === null || value === void 0 ? void 0 : value.from) || null), fromValue = _f[0], setFromValue = _f[1];
     var _g = React.useState((value === null || value === void 0 ? void 0 : value.to) || null), toValue = _g[0], setToValue = _g[1];
+    var _h = react.useDisclosure(), isOpenFrom = _h.isOpen, onOpenFrom = _h.onOpen, onCloseFrom = _h.onClose;
+    var _j = react.useDisclosure(), isOpenTo = _j.isOpen, onOpenTo = _j.onOpen, onCloseTo = _j.onClose;
+    // close the other date picker when one is opened
     React.useEffect(function () {
-        onChange({ from: fromValue, to: toValue });
+        if (isOpenFrom) {
+            onCloseTo();
+        }
+    }, [isOpenFrom]);
+    React.useEffect(function () {
+        if (isOpenTo) {
+            onCloseFrom();
+        }
+    }, [isOpenTo]);
+    // Update the parent state when the local state changes
+    React.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
     React.useEffect(function () {
         setFromValue((value === null || value === void 0 ? void 0 : value.from) || null);
         setToValue((value === null || value === void 0 ? void 0 : value.to) || null);
@@ -19067,8 +19086,8 @@ var InputRangePicker = function (_a) {
         _b[breakpoint] = 'row',
         _b));
     return (React__default["default"].createElement(react.Flex, { flexDirection: flexDirection, gap: 2 },
-        React__default["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["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["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["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) {