@popsure/dirty-swan 0.49.1 → 0.49.2

package/dist/cjs/index.js

@@ -3864,21 +3864,22 @@ var defaultPlaceholders = {
     yearFormat: "YYYY",
     error: "Please enter a valid date"
 };
-var isDateValid = function (date, yearBoundaries) {
+var isDateValid = function (date, yearBoundaries, dateObject) {
     var _a = yearBoundaries.min, min = _a === void 0 ? 0 : _a, _b = yearBoundaries.max, max = _b === void 0 ? 0 : _b;
     if (!date) {
-        return { isValid: false, field: 'all' };
+        return { isValid: false, errorType: 'default' };
     }
+    var isValidYear = (dateObject === null || dateObject === void 0 ? void 0 : dateObject.year) && String(dateObject === null || dateObject === void 0 ? void 0 : dateObject.year).length === 4;
     if (max && dayjs(date).isAfter(max + "-01-01", 'year')) {
-        return { isValid: false, field: 'year' };
+        return { isValid: false, errorType: isValidYear ? 'afterMax' : 'default' };
     }
     if (min && dayjs(date).isBefore(min + "-01-01", 'year')) {
-        return { isValid: false, field: 'year' };
+        return { isValid: false, errorType: isValidYear ? 'beforeMin' : 'default' };
     }
-    var isDateValid = dayjs(date, COLLECTABLE_DATE_FORMAT, true).isValid();
+    var isValidDate = dayjs(date, COLLECTABLE_DATE_FORMAT, true).isValid();
     return {
-        isValid: isDateValid,
-        field: isDateValid ? undefined : 'all',
+        isValid: isValidDate,
+        errorType: 'default'
     };
 };
 var DateSelector = function (_a) {
@@ -3892,9 +3893,9 @@ var DateSelector = function (_a) {
     require$$0.useEffect(function () {
         var calendarDateValue = value ? isoStringtoCalendarDate(value) : undefined;
         if (value !== calendarDateValue && (calendarDateValue === null || calendarDateValue === void 0 ? void 0 : calendarDateValue.day) && (calendarDateValue === null || calendarDateValue === void 0 ? void 0 : calendarDateValue.month) && (calendarDateValue === null || calendarDateValue === void 0 ? void 0 : calendarDateValue.year)) {
-            var _a = isDateValid(value, yearBoundaries), isValid = _a.isValid, field = _a.field;
+            var _a = isDateValid(value, yearBoundaries, calendarDateValue), isValid = _a.isValid, errorType = _a.errorType;
             setInternalValue(calendarDateValue);
-            setHasError(isValid ? undefined : field);
+            setHasError(isValid ? undefined : errorType);
             setIsDirty(true);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -3908,13 +3909,16 @@ var DateSelector = function (_a) {
             month: tempValue.month || 0,
             year: tempValue.year || 0,
         });
-        var _b = isDateValid(formattedDate, yearBoundaries), isValid = _b.isValid, field = _b.field;
-        if (dayjs(formattedDate, COLLECTABLE_DATE_FORMAT, true).isValid()) {
+        var _b = isDateValid(formattedDate, yearBoundaries, tempValue), isValid = _b.isValid, errorType = _b.errorType;
+        var isDateInValidFormat = dayjs(formattedDate, COLLECTABLE_DATE_FORMAT, true).isValid();
+        if (isDateInValidFormat) {
             setIsDirty(true);
         }
-        setHasError(isValid ? undefined : field);
-        onChange(isValid ? formattedDate : "");
+        setHasError(isValid ? undefined : errorType);
         setIsCalendarOpen(false);
+        if (isDateInValidFormat || isDirty) {
+            onChange(isValid ? formattedDate : "");
+        }
     };
     var handleOnKeyDown = function (event, index) {
         var _a, _b, _c;
@@ -3969,7 +3973,7 @@ var DateSelector = function (_a) {
     };
     var getInputProps = function (key, index) {
         var _a, _b;
-        return (__assign({ 'data-cy': "date-selector-" + key, 'data-testid': "date-selector-" + key, className: styles$z[key + "Input"], id: key, name: key, maxLength: key === 'year' ? 4 : 2, required: true, label: placeholders === null || placeholders === void 0 ? void 0 : placeholders[key], placeholder: (_a = placeholders === null || placeholders === void 0 ? void 0 : placeholders[key + "Format"]) !== null && _a !== void 0 ? _a : "", labelInsideInput: true, value: (_b = internalValue[key]) !== null && _b !== void 0 ? _b : '', error: (hasError && [key, 'all'].includes(hasError)) && isDirty, type: "text", inputMode: "numeric", ref: function (el) { itemsRef.current[index] = el; }, onKeyUp: function (event) { return handleOnKeyUp(event, index); }, onKeyDown: function (event) { return handleOnKeyDown(event, index); }, onChange: function (_a) {
+        return (__assign({ 'data-cy': "date-selector-" + key, 'data-testid': "date-selector-" + key, className: styles$z[key + "Input"], id: key, name: key, maxLength: key === 'year' ? 4 : 2, required: true, label: placeholders === null || placeholders === void 0 ? void 0 : placeholders[key], placeholder: (_a = placeholders === null || placeholders === void 0 ? void 0 : placeholders[key + "Format"]) !== null && _a !== void 0 ? _a : "", labelInsideInput: true, value: (_b = internalValue[key]) !== null && _b !== void 0 ? _b : '', error: hasError && isDirty, type: "text", inputMode: "numeric", ref: function (el) { itemsRef.current[index] = el; }, onKeyUp: function (event) { return handleOnKeyUp(event, index); }, onKeyDown: function (event) { return handleOnKeyDown(event, index); }, onChange: function (_a) {
                 var target = _a.target;
                 return handleOnChange(key, target.value);
             } }, (inputProps === null || inputProps === void 0 ? void 0 : inputProps(key)) || {}));
@@ -3978,7 +3982,11 @@ var DateSelector = function (_a) {
                                     jsxRuntime.jsx(Input, __assign({}, getInputProps('month', 1)), void 0)] }), void 0),
                             jsxRuntime.jsx(Input, __assign({}, getInputProps('year', 2)), void 0)] }), void 0),
                     jsxRuntime.jsx(Calendar, { dateFormat: COLLECTABLE_DATE_FORMAT, yearBoundaries: yearBoundaries, displayCalendar: displayCalendar, dayjsLocale: dayjsLocale, firstDayOfWeek: firstDayOfWeek, isOpen: isCalendarOpen, setCalendarOpen: setIsCalendarOpen, value: value, onChange: onChange }, void 0)] }), void 0),
-            hasError && isDirty && (jsxRuntime.jsx("p", __assign({ className: "p-p--small tc-red-500 w100 mt8" }, { children: placeholders.error }), void 0))] }, void 0));
+            hasError && isDirty && (jsxRuntime.jsx("p", __assign({ className: classNames$1(hasError && isDirty ? 'd-block' : 'd-none', "p-p--small tc-red-500 w100 mt8"), "data-testid": "date-error-message" }, { children: {
+                    default: placeholders.error,
+                    afterMax: placeholders.errorAfterMaxYear || "Please choose a date before " + (yearBoundaries.max + 1),
+                    beforeMin: placeholders.errorBeforeMinYear || "Please choose a date after " + (yearBoundaries.min - 1),
+                }[hasError || "default"] }), void 0))] }, void 0));
 };
 
 /*!
@@ -12809,7 +12817,7 @@ var ScrollSyncPane = function (_Component) {
       }
     };
 
-    _this.childRef = (0, _react.createRef)();
+    _this.childRef = props.innerRef ? props.innerRef : (0, _react.createRef)();
     return _this;
   }
 
@@ -12860,7 +12868,9 @@ var ScrollSyncPane = function (_Component) {
       if (this.props.attachTo) {
         return this.props.children;
       }
-      return (0, _react.cloneElement)(_react.Children.only(this.props.children), { ref: this.childRef });
+      return (0, _react.cloneElement)(_react.Children.only(this.props.children), {
+        ref: this.childRef
+      });
     }
   }]);
 
@@ -12872,7 +12882,9 @@ ScrollSyncPane.propTypes = {
   children: _propTypes2.default.node.isRequired,
   attachTo: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.shape({ current: _propTypes2.default.any })]),
   group: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)]),
-  enabled: _propTypes2.default.bool
+  enabled: _propTypes2.default.bool,
+  innerRef: _propTypes2.default.oneOfType([// Either a function
+  _propTypes2.default.func, _propTypes2.default.shape({ current: _propTypes2.default.any })])
 };
 ScrollSyncPane.defaultProps = {
   group: 'default',
@@ -13631,8 +13643,8 @@ var ArrowIcon = function (_a) {
     return (jsxRuntime.jsx("svg", __assign({ width: "14", height: "8", viewBox: "0 0 14 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className }, { children: jsxRuntime.jsx("path", { d: "M1 1.00003L7 7.00003L13 1.00003", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }), void 0));
 };
 
-var css_248z$9 = ".style-module_container__3BxOi {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  padding: 0 16px;\n  justify-content: space-between;\n  align-items: center;\n  display: flex;\n}\n@media (min-width: 34rem) {\n  .style-module_container__3BxOi {\n    display: none;\n  }\n}\n\n.style-module_next__3yJsi {\n  transform: rotate(-90deg);\n}\n\n.style-module_prev__3rIR_ {\n  transform: rotate(90deg);\n}\n\n.style-module_arrow__1tlbD {\n  width: 32px;\n  height: 32px;\n  z-index: 3;\n  padding: 0;\n  border-radius: 50%;\n  background-color: #f5f6fb;\n  justify-content: center;\n  align-items: center;\n  stroke: #ebebff;\n}\n.style-module_arrow__1tlbD:hover, .style-module_arrow__1tlbD:focus {\n  background-color: #f5f6fb;\n  cursor: not-allowed;\n}\n.style-module_arrow__1tlbD:disabled {\n  opacity: 1;\n}\n.style-module_arrow__1tlbD:disabled:hover {\n  background-color: #f5f6fb;\n}\n\n.style-module_active__2kklB {\n  stroke: #8e8cee;\n}\n.style-module_active__2kklB:hover, .style-module_active__2kklB:focus {\n  background-color: #f5f6fb;\n  cursor: pointer;\n}";
-var styles$8 = {"container":"style-module_container__3BxOi","next":"style-module_next__3yJsi","prev":"style-module_prev__3rIR_","arrow":"style-module_arrow__1tlbD","active":"style-module_active__2kklB"};
+var css_248z$9 = ".style-module_container__3BxOi {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  padding: 0 16px;\n  justify-content: space-between;\n  align-items: center;\n  display: flex;\n}\n@media (min-width: 34rem) {\n  .style-module_container__3BxOi {\n    display: none;\n  }\n}\n\n.style-module_next__3yJsi {\n  transform: rotate(-90deg);\n}\n\n.style-module_prev__3rIR_ {\n  transform: rotate(90deg);\n}\n\n.style-module_arrow__1tlbD {\n  width: 32px;\n  height: 32px;\n  z-index: 3;\n  padding: 0;\n  border-radius: 50%;\n  background-color: #f5f6fb;\n  justify-content: center;\n  align-items: center;\n  stroke: #ebebff;\n}\n.style-module_arrow__1tlbD:hover, .style-module_arrow__1tlbD:focus {\n  background-color: #f5f6fb;\n  cursor: not-allowed;\n}\n\n.style-module_active__2kklB {\n  stroke: #8e8cee;\n}\n.style-module_active__2kklB:hover, .style-module_active__2kklB:focus {\n  background-color: #f5f6fb;\n  cursor: pointer;\n}\n\n.style-module_noPointerEvents__21KuB {\n  pointer-events: none;\n}";
+var styles$8 = {"container":"style-module_container__3BxOi","next":"style-module_next__3yJsi","prev":"style-module_prev__3rIR_","arrow":"style-module_arrow__1tlbD","active":"style-module_active__2kklB","noPointerEvents":"style-module_noPointerEvents__21KuB"};
 styleInject(css_248z$9);
 
 var TableArrows = function (props) {
@@ -13641,10 +13653,12 @@ var TableArrows = function (props) {
     var handleButtonClick = function (value) { return function () { return onClick(value); }; };
     return (jsxRuntime.jsxs("div", __assign({ className: styles$8.container }, { children: [jsxRuntime.jsx("button", __assign({ onClick: handleButtonClick('prev'), className: classNames$1("p-btn--secondary d-flex", styles$8.prev, styles$8.arrow, (_a = {},
                     _a[styles$8.active] = active.left,
-                    _a)), disabled: !active.left }, { children: jsxRuntime.jsx(ArrowIcon, {}, void 0) }), void 0),
+                    _a[styles$8.noPointerEvents] = !active.left,
+                    _a)) }, { children: jsxRuntime.jsx(ArrowIcon, {}, void 0) }), void 0),
             jsxRuntime.jsx("button", __assign({ onClick: handleButtonClick('next'), className: classNames$1("p-btn--secondary d-flex", styles$8.next, styles$8.arrow, (_b = {},
                     _b[styles$8.active] = active.right,
-                    _b)), disabled: !active.right }, { children: jsxRuntime.jsx(ArrowIcon, {}, void 0) }), void 0)] }), void 0));
+                    _b[styles$8.noPointerEvents] = !active.right,
+                    _b)) }, { children: jsxRuntime.jsx(ArrowIcon, {}, void 0) }), void 0)] }), void 0));
 };
 
 var css_248z$8 = ".style-module_wrapper__1s115 {\n  position: relative;\n}\n\n.style-module_infoButton__1nIU2 {\n  position: absolute;\n  right: -32px;\n  top: 0;\n}";
@@ -13719,9 +13733,8 @@ var useComparisonTable = function (_a) {
     var onSelectionChanged = _a.onSelectionChanged;
     var _b = require$$0.useState(false), showMore = _b[0], setShowMore = _b[1];
     var _c = require$$0.useState(1400), headerWidth = _c[0], setHeaderWidth = _c[1];
-    var _d = require$$0.useState(''), headerId = _d[0], setHeaderId = _d[1];
-    var _e = require$$0.useState(0), selectedTabIndex = _e[0], setSelectedTabIndex = _e[1];
-    var _f = require$$0.useState(''), selectedSection = _f[0], setSelectedSection = _f[1];
+    var _d = require$$0.useState(0), selectedTabIndex = _d[0], setSelectedTabIndex = _d[1];
+    var _e = require$$0.useState(''), selectedSection = _e[0], setSelectedSection = _e[1];
     var headerRef = require$$0.useRef(null);
     var contentContainerRef = require$$0.useRef(null);
     var observerRef = require$$0.useRef(null);
@@ -13804,25 +13817,12 @@ var useComparisonTable = function (_a) {
             return [2 /*return*/];
         });
     }); };
-    require$$0.useEffect(function () {
-        if (headerRef.current) {
-            return;
-        }
-        var headerById = document.getElementById(headerId);
-        if (headerById) {
-            scrollContainerCallbackRef(headerById);
-        }
-    }, [headerId, scrollContainerCallbackRef]);
-    require$$0.useEffect(function () {
-        setHeaderId(generateId());
-    }, []);
     require$$0.useEffect(function () {
         onSelectionChanged === null || onSelectionChanged === void 0 ? void 0 : onSelectionChanged(selectedTabIndex);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedTabIndex]);
     return {
         headerWidth: headerWidth,
-        headerId: headerId,
         contentContainerRef: contentContainerRef,
         selectedSection: selectedSection,
         setSelectedSection: setSelectedSection,
@@ -13842,20 +13842,20 @@ styleInject(css_248z$4);
 var ComparisonTable = function (props) {
     var _a;
     var headers = props.headers, data = props.data, hideDetails = props.hideDetails, _b = props.hideDetailsCaption, hideDetailsCaption = _b === void 0 ? 'Hide details' : _b, _c = props.showDetailsCaption, showDetailsCaption = _c === void 0 ? 'Show details' : _c, classNameOverrides = props.classNameOverrides, hideScrollBars = props.hideScrollBars, hideScrollBarsMobile = props.hideScrollBarsMobile, collapsibleSections = props.collapsibleSections, cellWidth = props.cellWidth, firstColumnWidth = props.firstColumnWidth, stickyHeaderTopOffset = props.stickyHeaderTopOffset, growContent = props.growContent, onSelectionChanged = props.onSelectionChanged;
-    var _d = useComparisonTable({ onSelectionChanged: onSelectionChanged }), headerWidth = _d.headerWidth, contentContainerRef = _d.contentContainerRef, selectedSection = _d.selectedSection, setSelectedSection = _d.setSelectedSection, selectedTabIndex = _d.selectedTabIndex, scrollContainerCallbackRef = _d.scrollContainerCallbackRef, handleArrowsClick = _d.handleArrowsClick, toggleMoreRows = _d.toggleMoreRows, showMore = _d.showMore, headerId = _d.headerId;
+    var _d = useComparisonTable({ onSelectionChanged: onSelectionChanged }), headerWidth = _d.headerWidth, contentContainerRef = _d.contentContainerRef, selectedSection = _d.selectedSection, setSelectedSection = _d.setSelectedSection, selectedTabIndex = _d.selectedTabIndex, scrollContainerCallbackRef = _d.scrollContainerCallbackRef, handleArrowsClick = _d.handleArrowsClick, toggleMoreRows = _d.toggleMoreRows, showMore = _d.showMore;
     var cssVariablesStyle = __assign(__assign(__assign(__assign({ '--tableWidth': headerWidth + "px" }, (cellWidth ? { '--cellWidth': cellWidth + "px" } : {})), (firstColumnWidth
         ? { '--firstColumnWidth': firstColumnWidth + "px" }
         : {})), (stickyHeaderTopOffset
         ? { '--stickyHeaderTopOffset': stickyHeaderTopOffset + "px" }
         : {})), (growContent ? { '--growContent': '100%' } : {}));
-    return (jsxRuntime.jsx(dist$1.exports.ScrollSync, __assign({ onSync: scrollContainerCallbackRef }, { children: jsxRuntime.jsxs("div", __assign({ style: cssVariablesStyle, className: classNames$1((_a = {},
+    return (jsxRuntime.jsx(dist$1.exports.ScrollSync, { children: jsxRuntime.jsxs("div", __assign({ style: cssVariablesStyle, className: classNames$1((_a = {},
                 _a[baseStyles.noScrollBars] = hideScrollBars,
                 _a[baseStyles.noScrollBarsMobile] = hideScrollBarsMobile,
-                _a)) }, { children: [jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles.header, classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.header) }, { children: jsxRuntime.jsx(dist$1.exports.ScrollSyncPane, { children: jsxRuntime.jsx("div", __assign({ id: headerId, className: classNames$1(baseStyles.container) }, { children: jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles['overflow-container']) }, { children: jsxRuntime.jsxs("div", __assign({ className: baseStyles['group-container'] }, { children: [jsxRuntime.jsx(TableArrows, { onClick: handleArrowsClick, active: {
+                _a)) }, { children: [jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles.header, classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.header) }, { children: jsxRuntime.jsx(dist$1.exports.ScrollSyncPane, __assign({ innerRef: scrollContainerCallbackRef }, { children: jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles.container) }, { children: jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles['overflow-container']) }, { children: jsxRuntime.jsxs("div", __assign({ className: baseStyles['group-container'] }, { children: [jsxRuntime.jsx(TableArrows, { onClick: handleArrowsClick, active: {
                                                 left: selectedTabIndex > 0,
                                                 right: selectedTabIndex < data.length - 1,
                                             } }, void 0),
-                                        jsxRuntime.jsx(Row$1, { rowId: "table-header-row", cell: headers[0].cells[0], data: data, isRowHeader: true, cellClassName: classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.headerCell }, "table-header-row")] }), void 0) }), void 0) }), void 0) }, void 0) }), void 0),
+                                        jsxRuntime.jsx(Row$1, { rowId: "table-header-row", cell: headers[0].cells[0], data: data, isRowHeader: true, cellClassName: classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.headerCell }, "table-header-row")] }), void 0) }), void 0) }), void 0) }), void 0) }), void 0),
                 jsxRuntime.jsxs("div", __assign({ ref: contentContainerRef }, { children: [Array.isArray(headers) &&
                             headers
                                 .filter(function (headerGroup) { return !hideDetails || showMore || headerGroup.default; })
@@ -13881,7 +13881,7 @@ var ComparisonTable = function (props) {
                                                              */
                                                             headerGroup.label && !collapsibleSections && (jsxRuntime.jsx("div", __assign({ className: baseStyles['group-title'] }, { children: jsxRuntime.jsx("h4", __assign({ className: "p-h4 " + baseStyles.sticky }, { children: headerGroup.label }), void 0) }), void 0)), content] }), void 0) }), void 0) }), void 0) }, void 0) }), idString)) }, idString));
                             }),
-                        hideDetails && (jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles['show-details-container'], baseStyles.sticky, 'mt48') }, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("button", __assign({ className: classNames$1('w100 d-flex p-a p-h4 c-pointer', baseStyles['show-details-button'], classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.hideDetailsButton), onClick: toggleMoreRows, type: "button" }, { children: [showMore ? hideDetailsCaption : showDetailsCaption, jsxRuntime.jsx(Chevron, { className: showMore ? '' : baseStyles['icon-inverted'] }, void 0)] }), void 0) }, void 0) }), void 0))] }), void 0)] }), void 0) }), void 0));
+                        hideDetails && (jsxRuntime.jsx("div", __assign({ className: classNames$1(baseStyles['show-details-container'], baseStyles.sticky, 'mt48') }, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("button", __assign({ className: classNames$1('w100 d-flex p-a p-h4 c-pointer', baseStyles['show-details-button'], classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.hideDetailsButton), onClick: toggleMoreRows, type: "button" }, { children: [showMore ? hideDetailsCaption : showDetailsCaption, jsxRuntime.jsx(Chevron, { className: showMore ? '' : baseStyles['icon-inverted'] }, void 0)] }), void 0) }, void 0) }), void 0))] }), void 0)] }), void 0) }, void 0));
 };
 
 var css_248z$3 = ".style-module_background-container__2Gjka {\n  position: relative;\n  display: inline-block;\n  background-color: var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 0 8px;\n}\n\n.style-module_chip-container__7XeKn {\n  display: flex;\n  align-items: center;\n}\n\n.style-module_chip__3rgLT {\n  cursor: pointer;\n  z-index: 2;\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n.style-module_select-chip-background__YCAyw {\n  position: absolute;\n  background-color: white;\n  border-radius: 8px;\n  top: 8px;\n  z-index: 1;\n  transition: width 0.3s, left 0.3s;\n}";