@paygreen/pgui 2.13.5 → 2.14.1

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

@@ -7,10 +7,11 @@ export type InputDayPickerProps = {
     value: Date | null;
     locale?: 'fr' | 'en';
     variant?: 'filled' | 'outline';
-    dateFormat?: string;
     withTime?: boolean;
     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, variant, inputProps, dayPickerProps, }: InputDayPickerProps) => React.JSX.Element;

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

@@ -12,10 +12,12 @@ export type InputRangePickerProps = {
     } | null;
     locale?: 'fr' | 'en';
     variant?: 'filled' | 'outline';
-    dateFormat?: string;
     withTime?: boolean;
     minDate?: Date | null | undefined;
     maxDate?: 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, dateFormat, variant, }: InputRangePickerProps) => React.JSX.Element;
+export declare const InputRangePicker: ({ value, onChange, placeholder, name, isDisabled, withTime, locale, minDate, maxDate, variant, breakpoint, inputProps, dayPickerProps, }: InputRangePickerProps) => React.JSX.Element;

package/dist/cjs/types/theme/components/input.d.ts

@@ -21,6 +21,7 @@ declare const _default: {
                 };
                 _placeholder: {
                     color: string;
+                    opacity: number;
                 };
             };
             addon: {
@@ -45,6 +46,7 @@ declare const _default: {
                 };
                 _placeholder: {
                     color: string;
+                    opacity: number;
                 };
             };
             addon: {

package/dist/cjs/types/theme/components/pin-input.d.ts

@@ -14,6 +14,7 @@ declare const _default: {
             };
             _placeholder: {
                 color: string;
+                opacity: number;
             };
         };
         filled: (props: any) => {
@@ -33,6 +34,7 @@ declare const _default: {
             };
             _placeholder: {
                 color: string;
+                opacity: number;
             };
         };
     };

package/dist/cjs/types/theme/components/textarea.d.ts

@@ -22,6 +22,7 @@ declare const _default: {
             };
             _placeholder: {
                 color: string;
+                opacity: number;
             };
         };
         filled: (props: any) => {
@@ -41,6 +42,7 @@ declare const _default: {
             };
             _placeholder: {
                 color: string;
+                opacity: number;
             };
         };
     };

package/dist/esm/index.js

@@ -7902,85 +7902,26 @@ function MdCalendarToday (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"}},{"tag":"path","attr":{"d":"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"}}]})(props);
 }
 
-// Unique ID creation requires a high quality random # generator. In the browser we therefore
-// require the crypto API and do not support built-in fallback to lower quality random number
-// generators (like Math.random()).
-let getRandomValues;
-const rnds8 = new Uint8Array(16);
-function rng() {
-  // lazy load so that environments that need to polyfill have a chance to do so
-  if (!getRandomValues) {
-    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
-    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
-
-    if (!getRandomValues) {
-      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-    }
-  }
-
-  return getRandomValues(rnds8);
-}
-
-/**
- * Convert array of 16 byte values to UUID string format of the form:
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
- */
-
-const byteToHex = [];
-
-for (let i = 0; i < 256; ++i) {
-  byteToHex.push((i + 0x100).toString(16).slice(1));
-}
-
-function unsafeStringify(arr, offset = 0) {
-  // Note: Be careful editing this code!  It's been tuned for performance
-  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
-}
-
-const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-var native = {
-  randomUUID
-};
-
-function v4(options, buf, offset) {
-  if (native.randomUUID && !buf && !options) {
-    return native.randomUUID();
-  }
-
-  options = options || {};
-  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
-
-  rnds[6] = rnds[6] & 0x0f | 0x40;
-  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
-
-  if (buf) {
-    offset = offset || 0;
-
-    for (let i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
-    }
-
-    return buf;
-  }
-
-  return unsafeStringify(rnds);
-}
-
 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, _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');
     var dialogSheetBg = useColorModeValue('gray.50', 'gray.800');
-    var defaultDateFormat = dateFormat
-        ? dateFormat
-        : withTime
+    var defaultDateFormat = locale === 'fr'
+        ? withTime
             ? 'DD/MM/YYYY HH:mm'
-            : 'DD/MM/YYYY';
+            : 'DD/MM/YYYY'
+        : withTime
+            ? 'MM/DD/YYYY HH:mm'
+            : 'MM/DD/YYYY';
     var _e = useState(value ? dayjs(value).format(defaultDateFormat) : ''), dateValue = _e[0], setDateValue = _e[1];
+    // Update the input value when the value prop changes
+    useEffect(function () {
+        setDateValue(value ? 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];
@@ -8021,12 +7962,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({ minWidth: withTime ? '13rem' : '10rem', 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 +7976,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, { 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 +7996,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%' })),
@@ -19082,19 +19023,26 @@ 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 _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 _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];
     useEffect(function () {
         onChange({ from: fromValue, to: toValue });
     }, [fromValue, toValue]);
-    var flexDirection = useBreakpointValue({
-        base: 'column',
-        sm: 'row'
-    });
+    // Update the state when the 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);
+    }, [value]);
+    var flexDirection = useBreakpointValue((_b = {
+            base: 'column'
+        },
+        _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, dateFormat: dateFormat, variant: variant }),
-        React__default.createElement(InputDayPicker, { value: toValue, onChange: setToValue, placeholder: placeholder, name: name, isDisabled: isDisabled, withTime: withTime, locale: locale, minDate: minDate, maxDate: maxDate, dateFormat: dateFormat, variant: variant })));
+        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 })));
 };
 
 var ModalResponsive = function (_a) {
@@ -59304,7 +59252,8 @@ var Input = {
                     boxShadow: "0 0 0 1px ".concat(props.theme.colors.gray[300])
                 },
                 _placeholder: {
-                    color: 'gray.500'
+                    color: 'gray.500',
+                    opacity: 1
                 }
             },
             addon: {
@@ -59328,7 +59277,8 @@ var Input = {
                     boxShadow: "0 0 0 1px ".concat(props.theme.colors.gray[300])
                 },
                 _placeholder: {
-                    color: 'gray.500'
+                    color: 'gray.500',
+                    opacity: 1
                 }
             },
             addon: {