@popsure/dirty-swan 0.49.1 → 0.49.2

package/dist/cjs/lib/components/comparisonTable/hooks/useComparisonTable.d.ts

@@ -4,7 +4,6 @@ export declare const useComparisonTable: ({ onSelectionChanged, }: {
     onSelectionChanged?: ((selectedIndex: number) => void) | undefined;
 }) => {
     headerWidth: number;
-    headerId: string;
     contentContainerRef: import("react").MutableRefObject<HTMLDivElement | null>;
     selectedSection: string;
     setSelectedSection: import("react").Dispatch<import("react").SetStateAction<string>>;

package/dist/cjs/lib/components/dateSelector/index.d.ts

@@ -22,6 +22,8 @@ export interface DateSelectorProps {
         year?: string;
         yearFormat?: string;
         error?: string;
+        errorBeforeMinYear?: string;
+        errorAfterMaxYear?: string;
     };
     firstDayOfWeek?: number;
     inputProps?: (key: keyof CalendarDate) => Partial<DateSelectorInputProps>;

package/dist/esm/components/comparisonTable/components/TableArrows/index.js

@@ -4,8 +4,8 @@ import { c as classNames } from '../../../../index-6ea95111.js';
 import ArrowIcon from './Arrow.js';
 import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
 
-var css_248z = ".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 = {"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 = ".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 = {"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);
 
 var TableArrows = function (props) {
@@ -14,10 +14,12 @@ var TableArrows = function (props) {
     var handleButtonClick = function (value) { return function () { return onClick(value); }; };
     return (jsxs("div", __assign({ className: styles.container }, { children: [jsx("button", __assign({ onClick: handleButtonClick('prev'), className: classNames("p-btn--secondary d-flex", styles.prev, styles.arrow, (_a = {},
                     _a[styles.active] = active.left,
-                    _a)), disabled: !active.left }, { children: jsx(ArrowIcon, {}, void 0) }), void 0),
+                    _a[styles.noPointerEvents] = !active.left,
+                    _a)) }, { children: jsx(ArrowIcon, {}, void 0) }), void 0),
             jsx("button", __assign({ onClick: handleButtonClick('next'), className: classNames("p-btn--secondary d-flex", styles.next, styles.arrow, (_b = {},
                     _b[styles.active] = active.right,
-                    _b)), disabled: !active.right }, { children: jsx(ArrowIcon, {}, void 0) }), void 0)] }), void 0));
+                    _b[styles.noPointerEvents] = !active.right,
+                    _b)) }, { children: jsx(ArrowIcon, {}, void 0) }), void 0)] }), void 0));
 };
 
 export default TableArrows;

package/dist/esm/components/comparisonTable/components/TableArrows/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/TableArrows/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport ArrowIcon from './Arrow';\nimport styles from './style.module.scss';\n\nexport type ArrowValues = 'prev' | 'next';\n\ninterface TableArrowsProps {\n  onClick: (value: ArrowValues) => void;\n  active: { left: boolean; right: boolean };\n}\n\nconst TableArrows = (props: TableArrowsProps) => {\n  const { active, onClick } = props;\n  const handleButtonClick = (value: ArrowValues) => () => onClick(value);\n\n  return (\n    <div className={styles.container}>\n      <button\n        onClick={handleButtonClick('prev')}\n        className={classNames(\n          `p-btn--secondary d-flex`,\n          styles.prev,\n          styles.arrow,\n          {\n            [styles.active]: active.left,\n          }\n        )}\n        disabled={!active.left}\n      >\n        <ArrowIcon />\n      </button>\n      <button\n        onClick={handleButtonClick('next')}\n        className={classNames(\n          `p-btn--secondary d-flex`,\n          styles.next,\n          styles.arrow,\n          {\n            [styles.active]: active.right,\n          }\n        )}\n        disabled={!active.right}\n      >\n        <ArrowIcon />\n      </button>\n    </div>\n  );\n};\n\nexport default TableArrows;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;IAaM,WAAW,GAAG,UAAC,KAAuB;;IAClC,IAAA,MAAM,GAAc,KAAK,OAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;IAClC,IAAM,iBAAiB,GAAG,UAAC,KAAkB,IAAK,OAAA,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,GAAA,GAAA,CAAC;IAEvE,QACEA,uBAAK,SAAS,EAAE,MAAM,CAAC,SAAS,iBAC9BC,yBACE,OAAO,EAAE,iBAAiB,CAAC,MAAM,CAAC,EAClC,SAAS,EAAE,UAAU,CACnB,yBAAyB,EACzB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,KAAK;oBAEV,GAAC,MAAM,CAAC,MAAM,IAAG,MAAM,CAAC,IAAI;wBAE/B,EACD,QAAQ,EAAE,CAAC,MAAM,CAAC,IAAI,gBAEtBA,IAAC,SAAS,aAAG,YACN;YACTA,yBACE,OAAO,EAAE,iBAAiB,CAAC,MAAM,CAAC,EAClC,SAAS,EAAE,UAAU,CACnB,yBAAyB,EACzB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,KAAK;oBAEV,GAAC,MAAM,CAAC,MAAM,IAAG,MAAM,CAAC,KAAK;wBAEhC,EACD,QAAQ,EAAE,CAAC,MAAM,CAAC,KAAK,gBAEvBA,IAAC,SAAS,aAAG,YACN,aACL,EACN;AACJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/TableArrows/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport ArrowIcon from './Arrow';\nimport styles from './style.module.scss';\n\nexport type ArrowValues = 'prev' | 'next';\n\ninterface TableArrowsProps {\n  onClick: (value: ArrowValues) => void;\n  active: { left: boolean; right: boolean };\n}\n\nconst TableArrows = (props: TableArrowsProps) => {\n  const { active, onClick } = props;\n  const handleButtonClick = (value: ArrowValues) => () => onClick(value);\n\n  return (\n    <div className={styles.container}>\n      <button\n        onClick={handleButtonClick('prev')}\n        className={classNames(\n          `p-btn--secondary d-flex`,\n          styles.prev,\n          styles.arrow,\n          {\n            [styles.active]: active.left,\n            [styles.noPointerEvents]: !active.left,\n          }\n        )}\n      >\n        <ArrowIcon />\n      </button>\n      <button\n        onClick={handleButtonClick('next')}\n        className={classNames(\n          `p-btn--secondary d-flex`,\n          styles.next,\n          styles.arrow,\n          {\n            [styles.active]: active.right,\n            [styles.noPointerEvents]: !active.right,\n          }\n        )}\n      >\n        <ArrowIcon />\n      </button>\n    </div>\n  );\n};\n\nexport default TableArrows;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;IAaM,WAAW,GAAG,UAAC,KAAuB;;IAClC,IAAA,MAAM,GAAc,KAAK,OAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;IAClC,IAAM,iBAAiB,GAAG,UAAC,KAAkB,IAAK,OAAA,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,GAAA,GAAA,CAAC;IAEvE,QACEA,uBAAK,SAAS,EAAE,MAAM,CAAC,SAAS,iBAC9BC,yBACE,OAAO,EAAE,iBAAiB,CAAC,MAAM,CAAC,EAClC,SAAS,EAAE,UAAU,CACnB,yBAAyB,EACzB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,KAAK;oBAEV,GAAC,MAAM,CAAC,MAAM,IAAG,MAAM,CAAC,IAAI;oBAC5B,GAAC,MAAM,CAAC,eAAe,IAAG,CAAC,MAAM,CAAC,IAAI;wBAEzC,gBAEDA,IAAC,SAAS,aAAG,YACN;YACTA,yBACE,OAAO,EAAE,iBAAiB,CAAC,MAAM,CAAC,EAClC,SAAS,EAAE,UAAU,CACnB,yBAAyB,EACzB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,KAAK;oBAEV,GAAC,MAAM,CAAC,MAAM,IAAG,MAAM,CAAC,KAAK;oBAC7B,GAAC,MAAM,CAAC,eAAe,IAAG,CAAC,MAAM,CAAC,KAAK;wBAE1C,gBAEDA,IAAC,SAAS,aAAG,YACN,aACL,EACN;AACJ;;;;"}

package/dist/esm/components/comparisonTable/index.js

@@ -12,7 +12,6 @@ export { default as TableRating } from './components/TableRating/index.js';
 export { default as TableRowHeader } from './components/TableRowHeader/index.js';
 export { default as TableTrueFalse } from './components/TableTrueFalse.js';
 import { l as lodash_debounce } from '../../index-1463d5e9.js';
-import { g as generateId } from '../../index-fb46adf9.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
 import { AccordionItem } from './components/AccordionItem/AccordionItem.js';
 import './components/TableArrows/Arrow.js';
@@ -788,7 +787,7 @@ var ScrollSyncPane = function (_Component) {
       }
     };
 
-    _this.childRef = (0, _react.createRef)();
+    _this.childRef = props.innerRef ? props.innerRef : (0, _react.createRef)();
     return _this;
   }
 
@@ -839,7 +838,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
+      });
     }
   }]);
 
@@ -851,7 +852,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',
@@ -1546,9 +1549,8 @@ var useComparisonTable = function (_a) {
     var onSelectionChanged = _a.onSelectionChanged;
     var _b = useState(false), showMore = _b[0], setShowMore = _b[1];
     var _c = useState(1400), headerWidth = _c[0], setHeaderWidth = _c[1];
-    var _d = useState(''), headerId = _d[0], setHeaderId = _d[1];
-    var _e = useState(0), selectedTabIndex = _e[0], setSelectedTabIndex = _e[1];
-    var _f = useState(''), selectedSection = _f[0], setSelectedSection = _f[1];
+    var _d = useState(0), selectedTabIndex = _d[0], setSelectedTabIndex = _d[1];
+    var _e = useState(''), selectedSection = _e[0], setSelectedSection = _e[1];
     var headerRef = useRef(null);
     var contentContainerRef = useRef(null);
     var observerRef = useRef(null);
@@ -1631,25 +1633,12 @@ var useComparisonTable = function (_a) {
             return [2 /*return*/];
         });
     }); };
-    useEffect(function () {
-        if (headerRef.current) {
-            return;
-        }
-        var headerById = document.getElementById(headerId);
-        if (headerById) {
-            scrollContainerCallbackRef(headerById);
-        }
-    }, [headerId, scrollContainerCallbackRef]);
-    useEffect(function () {
-        setHeaderId(generateId());
-    }, []);
     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,
@@ -1669,20 +1658,20 @@ styleInject(css_248z);
 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 (jsx(dist.exports.ScrollSync, __assign({ onSync: scrollContainerCallbackRef }, { children: jsxs("div", __assign({ style: cssVariablesStyle, className: classNames((_a = {},
+    return (jsx(dist.exports.ScrollSync, { children: jsxs("div", __assign({ style: cssVariablesStyle, className: classNames((_a = {},
                 _a[baseStyles.noScrollBars] = hideScrollBars,
                 _a[baseStyles.noScrollBarsMobile] = hideScrollBarsMobile,
-                _a)) }, { children: [jsx("div", __assign({ className: classNames(baseStyles.header, classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.header) }, { children: jsx(dist.exports.ScrollSyncPane, { children: jsx("div", __assign({ id: headerId, className: classNames(baseStyles.container) }, { children: jsx("div", __assign({ className: classNames(baseStyles['overflow-container']) }, { children: jsxs("div", __assign({ className: baseStyles['group-container'] }, { children: [jsx(TableArrows, { onClick: handleArrowsClick, active: {
+                _a)) }, { children: [jsx("div", __assign({ className: classNames(baseStyles.header, classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.header) }, { children: jsx(dist.exports.ScrollSyncPane, __assign({ innerRef: scrollContainerCallbackRef }, { children: jsx("div", __assign({ className: classNames(baseStyles.container) }, { children: jsx("div", __assign({ className: classNames(baseStyles['overflow-container']) }, { children: jsxs("div", __assign({ className: baseStyles['group-container'] }, { children: [jsx(TableArrows, { onClick: handleArrowsClick, active: {
                                                 left: selectedTabIndex > 0,
                                                 right: selectedTabIndex < data.length - 1,
                                             } }, void 0),
-                                        jsx(Row, { 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),
+                                        jsx(Row, { 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),
                 jsxs("div", __assign({ ref: contentContainerRef }, { children: [Array.isArray(headers) &&
                             headers
                                 .filter(function (headerGroup) { return !hideDetails || showMore || headerGroup.default; })
@@ -1708,7 +1697,7 @@ var ComparisonTable = function (props) {
                                                              */
                                                             headerGroup.label && !collapsibleSections && (jsx("div", __assign({ className: baseStyles['group-title'] }, { children: 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 && (jsx("div", __assign({ className: classNames(baseStyles['show-details-container'], baseStyles.sticky, 'mt48') }, { children: jsx("div", { children: jsxs("button", __assign({ className: classNames('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, jsx(Chevron, { className: showMore ? '' : baseStyles['icon-inverted'] }, void 0)] }), void 0) }, void 0) }), void 0))] }), void 0)] }), void 0) }), void 0));
+                        hideDetails && (jsx("div", __assign({ className: classNames(baseStyles['show-details-container'], baseStyles.sticky, 'mt48') }, { children: jsx("div", { children: jsxs("button", __assign({ className: classNames('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, jsx(Chevron, { className: showMore ? '' : baseStyles['icon-inverted'] }, void 0)] }), void 0) }, void 0) }), void 0))] }), void 0)] }), void 0) }, void 0));
 };
 
 export { ComparisonTable };