@paygreen/pgui 2.8.0 → 2.8.2

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

@@ -4,13 +4,13 @@ export type InputDayPickerProps = {
     name: string;
     placeholder?: string;
     onChange: Dispatch<SetStateAction<string | undefined | null>>;
-    value?: string | Date;
+    value?: string | Date | null;
     locale?: string;
     variant?: 'unstyled' | 'filled' | 'outlined';
     format?: string;
     withTime?: boolean;
     minDate?: Date | null | undefined;
     maxDate?: Date | null | undefined;
-    calendarFunc: (date: any) => 'after-max-date' | 'before-min-date' | undefined;
+    calendarFunc?: (date: any) => 'after-max-date' | 'before-min-date' | undefined;
 } & InputProps;
 export declare const InputDayPicker: ({ name, placeholder, value, onChange, locale, variant, format, withTime, minDate, maxDate, calendarFunc, ...inputProps }: InputDayPickerProps) => JSX.Element;

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

@@ -9,6 +9,6 @@ export type NewDayPickerProps = {
     withTime?: boolean;
     minDate?: Date | null;
     maxDate?: Date | null;
-    calendarFunc: (date: any) => 'after-max-date' | 'before-min-date' | undefined;
+    calendarFunc?: (date: any) => 'after-max-date' | 'before-min-date' | undefined;
 };
 export declare const NewDayPicker: ({ defaultValue, onChange, locale, customFormat, withTime, minDate, maxDate, calendarFunc, ...props }: NewDayPickerProps) => JSX.Element;

package/dist/esm/index.js

@@ -42934,15 +42934,16 @@ var NewDayPicker = function (_a) {
             borderRadius: '9999px'
         }
     };
-    return (React__default.createElement(VStack, __assign$2({ spacing: "2", maxW: "full", p: 2, w: "fit-content", maxWidth: "30rem", borderRadius: "md" }, props),
+    return (React__default.createElement(VStack, __assign$2({ spacing: "2", maxW: "full", p: 2, w: "fit-content", maxWidth: "30rem", borderRadius: "md", minH: "22.75rem" }, props),
         React__default.createElement(Stack, { direction: { base: 'column', sm: 'row' }, spacing: 2, w: "full" },
-            React__default.createElement(Calendar, { locale: locale, minDate: minDate, maxDate: maxDate, tileClassName: calendarFunc, onChange: function (e) {
-                    setValue(e);
-                    onChange(dayjs(e).toISOString());
-                    setTimeValue('00:00');
-                    setInputValue(dayjs(e).locale(locale).format(format));
-                    setIsInvalid(false);
-                }, value: dayjs(value).toDate() }),
+            React__default.createElement(Box, { minH: "19.25rem" },
+                React__default.createElement(Calendar, { locale: locale, minDate: minDate, maxDate: maxDate, tileClassName: calendarFunc, onChange: function (e) {
+                        setValue(e);
+                        onChange(dayjs(e).toISOString());
+                        setTimeValue('00:00');
+                        setInputValue(dayjs(e).locale(locale).format(format));
+                        setIsInvalid(false);
+                    }, value: dayjs(value).toDate() })),
             withTime && (React__default.createElement(Flex$1, { backgroundColor: "gray.100", p: "2", borderRadius: "sm", h: { base: '8rem', sm: 'auto' }, w: "full", minW: "8rem", alignItems: "center" },
                 React__default.createElement(Box, { w: "full", h: "full", maxH: "16rem", overflowY: "auto", sx: customScrollBar },
                     React__default.createElement(VStack, { w: "full" }, timer.map(function (t) { return (React__default.createElement(Button$1, { key: t, size: "sm", w: "full", isActive: t === timeValue, onClick: function () {
@@ -42980,7 +42981,7 @@ var NewDayPicker = function (_a) {
                                         .set('hours', parseInt(t.slice(0, 2), 10))
                                         .set('minutes', parseInt(t.slice(-2), 10))
                                         .diff(dayjs(maxDate)) > 0) }, t)); })))))),
-        React__default.createElement(HStack, { w: "full" },
+        React__default.createElement(HStack, { flex: "1", w: "full", alignItems: "flex-end" },
             React__default.createElement(InputGroup, { w: "full", size: "sm" },
                 React__default.createElement(InputLeftElement, { pointerEvents: "none", color: "gray.300", fontSize: "1.2em", children: React__default.createElement(Icon$1, { as: MdCalendarToday }) }),
                 React__default.createElement(Input$4, { as: InputMask, mask: withTime ? '**/**/**** **:**' : '**/**/****', value: inputValue, onChange: function (e) {
@@ -43043,8 +43044,8 @@ var InputDayPicker = function (_a) {
         React__default.createElement(Popover, { closeOnBlur: true, closeOnEsc: true, isOpen: isOpen, onClose: onClose, placement: "bottom", autoFocus: true },
             React__default.createElement(PopoverTrigger, null,
                 React__default.createElement(InputGroup, null,
-                    React__default.createElement(Input$4, __assign$2({ as: Button$1, onClick: onToggle, name: name, fontWeight: "normal", justifyContent: "flex-start", background: variant === 'filled' ? 'gray.100' : 'white', _hover: {
-                            background: variant === 'filled' ? 'gray.200' : 'gray.50'
+                    React__default.createElement(Input$4, __assign$2({ as: Button$1, onClick: onToggle, name: name, fontWeight: "normal", justifyContent: "flex-start", background: variant === 'filled' ? 'gray.50' : 'white', _hover: {
+                            background: variant === 'filled' ? 'gray.100' : 'gray.50'
                         } }, inputProps), value ? dayjs(value).format(format) : placeholder),
                     value && (React__default.createElement(InputRightElement, { onClick: function () {
                             onChange(null);
@@ -62339,43 +62340,12 @@ dayjs.extend(customParseFormat);
 dayjs.extend(utc);
 dayjs.extend(isoWeek);
 var InputRangePicker = function (_a) {
-    var fromLabel = _a.fromLabel, toLabel = _a.toLabel, value = _a.value, onChange = _a.onChange, minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.withTime, withTime = _b === void 0 ? false : _b, _c = _a.format, format = _c === void 0 ? withTime ? 'DD/MM/YYYY HH:mm' : 'DD/MM/YYYY' : _c, _d = _a.variant, variant = _d === void 0 ? 'unstyled' : _d, props = __rest$2(_a, ["fromLabel", "toLabel", "value", "onChange", "minDate", "maxDate", "withTime", "format", "variant"]);
-    var _e = useState(), fromValue = _e[0], setFromValue = _e[1];
-    var _f = useState(), toValue = _f[0], setToValue = _f[1];
-    var _g = useState(minDate), formatedMinDate = _g[0], setFormatedMinDate = _g[1];
-    var _h = useState(maxDate), formatedMaxDate = _h[0], setFormatedMaxDate = _h[1];
-    useEffect(function () {
-        if (!withTime) {
-            var formatedMin = minDate
-                ? dayjs(dayjs(minDate).startOf('day').toISOString()).toDate()
-                : null;
-            var formatedMax = maxDate
-                ? dayjs(dayjs(maxDate).endOf('day').toISOString()).toDate()
-                : null;
-            setFormatedMinDate(formatedMin);
-            setFormatedMaxDate(formatedMax);
-        }
-    }, [withTime]);
-    useEffect(function () {
-        onChange({
-            from: fromValue ? dayjs(fromValue).toDate() : null,
-            to: toValue ? dayjs(toValue).toDate() : null
-        });
-    }, [fromValue, toValue]);
-    useEffect(function () {
-        if (!withTime) {
-            if (value === null || value === void 0 ? void 0 : value.from) {
-                if (dayjs(value.from).diff(dayjs(formatedMinDate).utcOffset(0, true)) < 0) {
-                    setFromValue(dayjs(formatedMinDate).utcOffset(0, true).toISOString());
-                }
-            }
-            if (value === null || value === void 0 ? void 0 : value.to) {
-                if (dayjs(value.to).diff(dayjs(formatedMaxDate).utcOffset(0, true)) > 0) {
-                    setToValue(dayjs(formatedMaxDate).utcOffset(0, true).toISOString());
-                }
-            }
-        }
-    }, [withTime, fromValue, toValue]);
+    var _b, _c;
+    var fromLabel = _a.fromLabel, toLabel = _a.toLabel, value = _a.value, onChange = _a.onChange, _d = _a.minDate, minDate = _d === void 0 ? null : _d, _e = _a.maxDate, maxDate = _e === void 0 ? null : _e, _f = _a.withTime, withTime = _f === void 0 ? false : _f, _g = _a.format, format = _g === void 0 ? 'DD/MM/YYYY' : _g, _h = _a.variant, variant = _h === void 0 ? 'unstyled' : _h, props = __rest$2(_a, ["fromLabel", "toLabel", "value", "onChange", "minDate", "maxDate", "withTime", "format", "variant"]);
+    var _j = useState(minDate), formatedMinDate = _j[0], setFormatedMinDate = _j[1];
+    var _k = useState(maxDate), formatedMaxDate = _k[0], setFormatedMaxDate = _k[1];
+    var fromValue = ((_b = value === null || value === void 0 ? void 0 : value.from) === null || _b === void 0 ? void 0 : _b.toISOString()) || undefined;
+    var toValue = ((_c = value === null || value === void 0 ? void 0 : value.to) === null || _c === void 0 ? void 0 : _c.toISOString()) || undefined;
     var fromFunc = function (_a) {
         var date = _a.date;
         if (toValue) {
@@ -62430,17 +62400,53 @@ var InputRangePicker = function (_a) {
             return 'after-max-date';
         }
     };
-    return (React__default.createElement(Wrap, __assign$2({ flexWrap: "wrap", w: "full", maxW: "full" }, props),
+    var handleChange = function (from, to) {
+        if (withTime) {
+            return onChange({
+                from: from ? dayjs(from).toDate() : null,
+                to: to ? dayjs(to).toDate() : null
+            });
+        }
+        return onChange({
+            from: from ? dayjs(from).startOf('day').toDate() : null,
+            to: to ? dayjs(to).startOf('day').toDate() : null
+        });
+    };
+    useEffect(function () {
+        if (!withTime) {
+            var formatedMin = minDate
+                ? dayjs(dayjs(minDate).startOf('day').toISOString()).toDate()
+                : null;
+            var formatedMax = maxDate
+                ? dayjs(dayjs(maxDate).endOf('day').toISOString()).toDate()
+                : null;
+            setFormatedMinDate(formatedMin);
+            setFormatedMaxDate(formatedMax);
+            if (fromValue) {
+                if (formatedMin &&
+                    dayjs(fromValue).diff(dayjs(formatedMin).utcOffset(0, true)) < 0) {
+                    fromValue = dayjs(formatedMin).utcOffset(0, true).toISOString();
+                }
+            }
+            if (toValue) {
+                if (formatedMax &&
+                    dayjs(toValue).diff(dayjs(formatedMax).utcOffset(0, true)) > 0) {
+                    toValue = dayjs(formatedMax).utcOffset(0, true).toISOString();
+                }
+            }
+        }
+    }, [withTime]);
+    return (React__default.createElement(Wrap, { flexWrap: "wrap", w: "full", maxW: "full" },
         React__default.createElement(WrapItem, { flex: "1", alignItems: "center", minW: "fit-content" },
             React__default.createElement(Text, { mr: 2, wordBreak: "normal" }, fromLabel),
-            React__default.createElement(InputDayPicker, { name: "from", onChange: function (e) {
-                    setFromValue(e);
-                }, value: fromValue, format: format, minDate: formatedMinDate, maxDate: (value === null || value === void 0 ? void 0 : value.to) || maxDate, calendarFunc: fromFunc, withTime: withTime, variant: variant, minW: "11.5rem", w: "full" })),
+            React__default.createElement(InputDayPicker, __assign$2({ name: "from", onChange: function (e) {
+                    handleChange(e, toValue);
+                }, value: fromValue, format: withTime ? "".concat(format, " HH:mm") : format, minDate: formatedMinDate, maxDate: (value === null || value === void 0 ? void 0 : value.to) || maxDate, calendarFunc: fromFunc, withTime: withTime, variant: variant, minW: "11.5rem", w: "full" }, props))),
         React__default.createElement(WrapItem, { flex: "1", alignItems: "center", minW: "fit-content" },
             React__default.createElement(Text, { mr: 2, wordBreak: "normal" }, toLabel),
-            React__default.createElement(InputDayPicker, { name: "to", onChange: function (e) {
-                    setToValue(e);
-                }, value: toValue, format: format, minDate: (value === null || value === void 0 ? void 0 : value.from) || formatedMinDate, maxDate: formatedMaxDate, calendarFunc: toFunc, withTime: withTime, variant: variant, minW: "11.5rem", w: "full" }))));
+            React__default.createElement(InputDayPicker, __assign$2({ name: "to", onChange: function (e) {
+                    handleChange(fromValue, e);
+                }, value: toValue, format: withTime ? "".concat(format, " HH:mm") : format, minDate: (value === null || value === void 0 ? void 0 : value.from) || formatedMinDate, maxDate: formatedMaxDate, calendarFunc: toFunc, withTime: withTime, variant: variant, minW: "11.5rem", w: "full" }, props)))));
 };
 
 var ModalResponsive = function (_a) {