@paygreen/pgui 2.14.0 → 2.14.2

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

@@ -7,12 +7,14 @@ 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;
+    isOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
 };
-export declare const InputDayPicker: ({ value, onChange, placeholder, name, isDisabled, withTime, locale, minDate, maxDate, dateFormat, 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

@@ -12,10 +12,14 @@ export type InputRangePickerProps = {
     } | null;
     locale?: 'fr' | 'en';
     variant?: 'filled' | 'outline';
-    dateFormat?: string;
     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, dateFormat, variant, }: 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/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,92 +7902,38 @@ 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, 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');
-    var defaultDateFormat = dateFormat
-        ? dateFormat
-        : withTime
+    var defaultDateFormat = locale === 'fr'
+        ? withTime
             ? 'DD/MM/YYYY HH:mm'
-            : 'DD/MM/YYYY';
-    var _e = useState(value ? dayjs(value).format(defaultDateFormat) : ''), dateValue = _e[0], setDateValue = _e[1];
+            : 'DD/MM/YYYY'
+        : withTime
+            ? 'MM/DD/YYYY HH:mm'
+            : 'MM/DD/YYYY';
+    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(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)
@@ -7998,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) {
@@ -8026,7 +7969,7 @@ var InputDayPicker = function (_a) {
                     cursor: isDisabled ? 'not-allowed' : 'pointer'
                 }, onClick: function () { return !isDisabled && (isOpen ? onClose() : onOpen()); } },
                 React__default.createElement(Icon, { as: MdCalendarToday })),
-            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) {
+            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
@@ -8042,7 +7985,7 @@ var InputDayPicker = function (_a) {
                     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: 9999, className: "dialog-sheet", role: "dialog", "aria-label": "DayPicker calendar", mt: 2 },
+        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()
@@ -19082,19 +19025,43 @@ 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) || 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];
+    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, 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 () {
+        if (isOpenFrom) {
+            onCloseTo();
+        }
+    }, [isOpenFrom]);
+    useEffect(function () {
+        if (isOpenTo) {
+            onCloseFrom();
+        }
+    }, [isOpenTo]);
+    // Update the parent state when the local state changes
     useEffect(function () {
-        onChange({ from: fromValue, to: toValue });
+        var newValue = { from: fromValue, to: toValue };
+        if (JSON.stringify(newValue) !== JSON.stringify(value)) {
+            onChange(newValue);
+        }
     }, [fromValue, toValue]);
-    var flexDirection = useBreakpointValue({
-        base: 'column',
-        sm: 'row'
-    });
+    // 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);
+    }, [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: 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) {
@@ -59304,7 +59271,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 +59296,8 @@ var Input = {
                     boxShadow: "0 0 0 1px ".concat(props.theme.colors.gray[300])
                 },
                 _placeholder: {
-                    color: 'gray.500'
+                    color: 'gray.500',
+                    opacity: 1
                 }
             },
             addon: {