@paygreen/pgui 2.13.5 → 2.14.0

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

@@ -12,5 +12,7 @@ export type InputDayPickerProps = {
     minDate?: Date | null | undefined;
     maxDate?: Date | null | undefined;
     isDisabled?: boolean;
+    inputProps?: any;
+    dayPickerProps?: any;
 };
-export declare const InputDayPicker: ({ value, onChange, placeholder, name, isDisabled, withTime, locale, minDate, maxDate, dateFormat, variant, }: InputDayPickerProps) => React.JSX.Element;
+export declare const InputDayPicker: ({ value, onChange, placeholder, name, isDisabled, withTime, locale, minDate, maxDate, dateFormat, variant, inputProps, dayPickerProps, }: InputDayPickerProps) => React.JSX.Element;

package/dist/esm/index.js

@@ -7970,7 +7970,7 @@ function v4(options, buf, offset) {
 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, dateFormat = _a.dateFormat, _c = _a.variant, variant = _c === void 0 ? 'filled' : _c;
+    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, dateFormat = _a.dateFormat, _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 inputLeftElementColor = useColorModeValue('gray.400', 'gray.600');
     var inputLeftElementDisabledColor = useColorModeValue('gray.600', 'gray.400');
@@ -8021,12 +8021,12 @@ var InputDayPicker = function (_a) {
         handleDateSelection(dayjs(dateValue, defaultDateFormat).toDate());
     }, [hours, minutes]);
     return (React__default.createElement(Box, null,
-        React__default.createElement(InputGroup, { maxWidth: '15rem' },
+        React__default.createElement(InputGroup, null,
             React__default.createElement(InputLeftElement, { role: "group", color: isDisabled ? inputLeftElementColor : inputLeftElementDisabledColor, _hover: {
                     cursor: isDisabled ? 'not-allowed' : 'pointer'
                 }, onClick: function () { return !isDisabled && (isOpen ? onClose() : onOpen()); } },
                 React__default.createElement(Icon, { as: MdCalendarToday })),
-            React__default.createElement(Input$4, { disabled: isDisabled, name: name || 'date-input', type: "text", variant: variant, placeholder: placeholder || defaultDateFormat, value: dateValue, onChange: function (e) {
+            React__default.createElement(Input$4, __assign$2({ width: "full", disabled: isDisabled, name: name || 'date-input', type: "text", variant: variant, placeholder: placeholder || defaultDateFormat, value: dateValue, onChange: function (e) {
                     var newValue = e.currentTarget.value
                         .replace(/[^0-9 /:]/g, '')
                         .slice(0, withTime ? 16 : 10); // Sanitize the input
@@ -8035,15 +8035,15 @@ var InputDayPicker = function (_a) {
                 }, onFocus: function () {
                     if (isOpen)
                         onClose();
-                } }),
+                } }, inputProps)),
             dateValue && !isDisabled && (React__default.createElement(InputRightElement, { role: "group", _hover: {
                     cursor: 'pointer'
                 }, onClick: function () {
                     handleInputChange(null);
                 } },
                 React__default.createElement(Icon, { as: MdClose })))),
-        isOpen && (React__default.createElement(Box, { key: v4(), position: 'absolute', border: '1px solid', borderColor: 'gray.400', bg: dialogSheetBg, borderRadius: 'md', tabIndex: -1, zIndex: 1000, className: "dialog-sheet", role: "dialog", "aria-label": "DayPicker calendar", mt: 2 },
-            React__default.createElement(DayPicker, { locale: locale === 'en' ? enUS : fr$1, fromDate: minDate || new Date('1900-01-01'), toDate: maxDate || new Date('2100-12-31'), initialFocus: isOpen, mode: "single", disabled: isDisabled, 
+        isOpen && (React__default.createElement(Box, { key: v4(), position: 'absolute', border: '1px solid', borderColor: 'gray.400', bg: dialogSheetBg, borderRadius: 'md', tabIndex: -1, zIndex: 9999, className: "dialog-sheet", role: "dialog", "aria-label": "DayPicker calendar", mt: 2 },
+            React__default.createElement(DayPicker, __assign$2({ locale: locale === 'en' ? enUS : fr$1, fromDate: minDate || new Date('1900-01-01'), toDate: maxDate || new Date('2100-12-31'), initialFocus: isOpen, mode: "single", disabled: isDisabled, 
                 // Put the default date or today's date if the value is empty
                 selected: dayjs(dateValue, defaultDateFormat, true).isValid()
                     ? dayjs(dateValue, defaultDateFormat, true).toDate()
@@ -8055,7 +8055,7 @@ var InputDayPicker = function (_a) {
                     handleDateSelection(date);
                     if (!withTime)
                         onClose(); // Close the dialog only when you dont need to select the time
-                }, captionLayout: "dropdown-buttons" }),
+                }, captionLayout: "dropdown-buttons" }, dayPickerProps)),
             withTime && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(VStack, { align: "center" },
                     React__default.createElement(Divider, { mb: 2, w: '90%' })),
@@ -19083,8 +19083,8 @@ var InputPhone = function (_a) {
 
 var InputRangePicker = 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, dateFormat = _a.dateFormat, _c = _a.variant, variant = _c === void 0 ? 'filled' : _c;
-    var _d = useState((value === null || value === void 0 ? void 0 : value.from) || new Date()), fromValue = _d[0], setFromValue = _d[1];
-    var _e = useState((value === null || value === void 0 ? void 0 : value.to) || new Date()), toValue = _e[0], setToValue = _e[1];
+    var _d = useState((value === null || value === void 0 ? void 0 : value.from) || null), fromValue = _d[0], setFromValue = _d[1];
+    var _e = useState((value === null || value === void 0 ? void 0 : value.to) || null), toValue = _e[0], setToValue = _e[1];
     useEffect(function () {
         onChange({ from: fromValue, to: toValue });
     }, [fromValue, toValue]);