@popsure/dirty-swan 0.48.1 → 0.49.2

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',
@@ -1542,10 +1545,10 @@ module.exports = function(isValidElement, throwOnDirectAccess) {
 
 }(dist));
 
-var useComparisonTable = function () {
-    var _a = useState(false), showMore = _a[0], setShowMore = _a[1];
-    var _b = useState(1400), headerWidth = _b[0], setHeaderWidth = _b[1];
-    var _c = useState(''), headerId = _c[0], setHeaderId = _c[1];
+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(0), selectedTabIndex = _d[0], setSelectedTabIndex = _d[1];
     var _e = useState(''), selectedSection = _e[0], setSelectedSection = _e[1];
     var headerRef = useRef(null);
@@ -1631,20 +1634,11 @@ var useComparisonTable = function () {
         });
     }); };
     useEffect(function () {
-        if (headerRef.current) {
-            return;
-        }
-        var headerById = document.getElementById(headerId);
-        if (headerById) {
-            scrollContainerCallbackRef(headerById);
-        }
-    }, [headerId, scrollContainerCallbackRef]);
-    useEffect(function () {
-        setHeaderId(generateId());
-    }, []);
+        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,
@@ -1657,26 +1651,27 @@ var useComparisonTable = function () {
     };
 };
 
-var css_248z = ".style-module_container__xHPlk {\n  width: 100%;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n@media (min-width: 34rem) {\n  .style-module_container__xHPlk {\n    scroll-snap-type: unset;\n  }\n}\n\n.style-module_noScrollBars__1ri_E {\n  scrollbar-width: none;\n  /* Firefox */\n  -ms-overflow-style: none;\n  /* Internet Explorer 10+ */\n  scroll-snap-type: unset;\n}\n.style-module_noScrollBars__1ri_E::-webkit-scrollbar {\n  /* WebKit */\n  width: 0;\n  height: 0;\n}\n\n.style-module_overflow-container__oBPQw {\n  width: max-content;\n  min-width: 100%;\n}\n\n.style-module_group-container__2G6Ix {\n  display: flex;\n  flex-flow: column;\n  width: max-content;\n  width: var(--growContent, max-content);\n  margin: auto;\n}\n\n.style-module_group-title__2vvRm {\n  width: 100%;\n  background-color: #fafaff;\n  border-radius: 8px;\n  margin-top: 48px;\n}\n.style-module_group-title__2vvRm > h4 {\n  padding: 24px;\n  display: inline-block;\n}\n@media (min-width: 34rem) {\n  .style-module_group-title__2vvRm {\n    margin-top: 72px;\n  }\n}\n\n.style-module_sticky__2Xmbl {\n  position: sticky;\n  justify-content: flex-start;\n  z-index: 1;\n  top: 0;\n  left: 0;\n}\n@media (min-width: 34rem) {\n  .style-module_sticky__2Xmbl {\n    border-right: 1px solid #fafaff;\n  }\n}\n\n.style-module_header__23SZy {\n  position: sticky;\n  top: 0;\n  top: var(--stickyHeaderTopOffset, 0);\n  z-index: 2;\n  background-color: white;\n}\n.style-module_header__23SZy .style-module_container__xHPlk {\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n}\n.style-module_header__23SZy .style-module_container__xHPlk::-webkit-scrollbar {\n  display: none;\n}\n\n.style-module_show-details-container__1smn4 {\n  width: 100%;\n  border: none;\n}\n\n.style-module_show-details-button__3HR-p {\n  font-family: inherit;\n  background-color: #fafaff;\n  border: none;\n  border-radius: 8px;\n  height: 64px;\n  justify-content: center;\n  align-items: center;\n}\n.style-module_show-details-button__3HR-p svg {\n  margin-left: 8px;\n}\n\n.style-module_icon-inverted__1SnO1 {\n  transform: rotate(180deg);\n  transition: all 0.25s ease;\n}";
-var baseStyles = {"container":"style-module_container__xHPlk","noScrollBars":"style-module_noScrollBars__1ri_E","overflow-container":"style-module_overflow-container__oBPQw","group-container":"style-module_group-container__2G6Ix","group-title":"style-module_group-title__2vvRm","sticky":"style-module_sticky__2Xmbl","header":"style-module_header__23SZy","show-details-container":"style-module_show-details-container__1smn4","show-details-button":"style-module_show-details-button__3HR-p","icon-inverted":"style-module_icon-inverted__1SnO1"};
+var css_248z = ".style-module_container__xHPlk {\n  width: 100%;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n@media (min-width: 34rem) {\n  .style-module_container__xHPlk {\n    scroll-snap-type: unset;\n  }\n}\n\n.style-module_noScrollBars__1ri_E {\n  scrollbar-width: none;\n  /* Firefox */\n  -ms-overflow-style: none;\n  /* Internet Explorer 10+ */\n}\n.style-module_noScrollBars__1ri_E::-webkit-scrollbar {\n  /* WebKit */\n  width: 0;\n  height: 0;\n}\n\n@media (max-width: 34rem) {\n  .style-module_noScrollBarsMobile__1txeg * {\n    scrollbar-width: none;\n    /* Firefox */\n    -ms-overflow-style: none;\n    /* Internet Explorer 10+ */\n  }\n  .style-module_noScrollBarsMobile__1txeg * -webkit-scrollbar {\n    /* WebKit */\n    width: 0;\n    height: 0;\n    display: none;\n  }\n}\n\n.style-module_section__1bf_0 + .style-module_section__1bf_0 {\n  margin-top: 48px;\n}\n@media (min-width: 34rem) {\n  .style-module_section__1bf_0 + .style-module_section__1bf_0 {\n    margin-top: 72px;\n  }\n}\n\n.style-module_overflow-container__oBPQw {\n  width: max-content;\n  min-width: 100%;\n}\n\n.style-module_group-container__2G6Ix {\n  display: flex;\n  flex-flow: column;\n  width: max-content;\n  width: var(--growContent, max-content);\n  margin: auto;\n}\n\n.style-module_group-title__2vvRm {\n  width: 100%;\n  background-color: #fafaff;\n  border-radius: 8px;\n}\n.style-module_group-title__2vvRm > h4 {\n  padding: 24px;\n  display: inline-block;\n}\n\n.style-module_sticky__2Xmbl {\n  position: sticky;\n  justify-content: flex-start;\n  z-index: 1;\n  top: 0;\n  left: 0;\n}\n@media (min-width: 34rem) {\n  .style-module_sticky__2Xmbl {\n    border-right: 1px solid #fafaff;\n  }\n}\n\n.style-module_header__23SZy {\n  position: sticky;\n  top: 0;\n  top: var(--stickyHeaderTopOffset, 0);\n  z-index: 2;\n  background-color: white;\n}\n.style-module_header__23SZy .style-module_container__xHPlk {\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n}\n.style-module_header__23SZy .style-module_container__xHPlk::-webkit-scrollbar {\n  display: none;\n}\n\n.style-module_show-details-container__1smn4 {\n  width: 100%;\n  border: none;\n}\n\n.style-module_show-details-button__3HR-p {\n  font-family: inherit;\n  background-color: #fafaff;\n  border: none;\n  border-radius: 8px;\n  height: 64px;\n  justify-content: center;\n  align-items: center;\n}\n.style-module_show-details-button__3HR-p svg {\n  margin-left: 8px;\n}\n\n.style-module_icon-inverted__1SnO1 {\n  transform: rotate(180deg);\n  transition: all 0.25s ease;\n}";
+var baseStyles = {"container":"style-module_container__xHPlk","noScrollBars":"style-module_noScrollBars__1ri_E","noScrollBarsMobile":"style-module_noScrollBarsMobile__1txeg","section":"style-module_section__1bf_0","overflow-container":"style-module_overflow-container__oBPQw","group-container":"style-module_group-container__2G6Ix","group-title":"style-module_group-title__2vvRm","sticky":"style-module_sticky__2Xmbl","header":"style-module_header__23SZy","show-details-container":"style-module_show-details-container__1smn4","show-details-button":"style-module_show-details-button__3HR-p","icon-inverted":"style-module_icon-inverted__1SnO1"};
 styleInject(css_248z);
 
 var ComparisonTable = function (props) {
     var _a;
-    var headers = props.headers, data = props.data, hideDetails = props.hideDetails, styles = props.styles, hideScrollBars = props.hideScrollBars, collapsibleSections = props.collapsibleSections, cellWidth = props.cellWidth, firstColumnWidth = props.firstColumnWidth, stickyHeaderTopOffset = props.stickyHeaderTopOffset, growContent = props.growContent;
-    var _b = useComparisonTable(), headerWidth = _b.headerWidth, contentContainerRef = _b.contentContainerRef, selectedSection = _b.selectedSection, setSelectedSection = _b.setSelectedSection, selectedTabIndex = _b.selectedTabIndex, scrollContainerCallbackRef = _b.scrollContainerCallbackRef, handleArrowsClick = _b.handleArrowsClick, toggleMoreRows = _b.toggleMoreRows, showMore = _b.showMore, headerId = _b.headerId;
+    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;
     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 }, { children: [jsx("div", __assign({ className: classNames(baseStyles.header, styles === null || styles === void 0 ? void 0 : styles.header) }, { children: jsx(dist.exports.ScrollSyncPane, { children: jsx("div", __assign({ id: headerId, className: classNames(baseStyles.container, (_a = {},
-                                _a[baseStyles.noScrollBars] = hideScrollBars,
-                                _a)) }, { children: jsx("div", __assign({ className: classNames(baseStyles['overflow-container']) }, { children: jsxs("div", __assign({ className: baseStyles['group-container'] }, { children: [jsx(TableArrows, { onClick: handleArrowsClick, active: {
+    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, __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 }, "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; })
@@ -1689,20 +1684,20 @@ var ComparisonTable = function (props) {
                                     /** Do not render the first row */
                                     if (index === 0 && headerGroupIndex === 0)
                                         return null;
-                                    return (jsx(Row, { rowId: rowId, cell: cell, data: data }, rowId));
+                                    return (jsx(Row, { rowId: rowId, cell: cell, data: data, cellClassName: classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.cell }, rowId));
                                 });
                                 var idString = "headerGroup-" + headerGroup.id;
-                                return (jsx(Fragment, { children: headerGroup.label && collapsibleSections ? (jsx(AccordionItem, __assign({ className: "mt8", label: headerGroup.label, headerClassName: "p24 br8", isOpen: selectedSection === idString, onOpen: function () { return setSelectedSection(idString); }, onClose: function () { return setSelectedSection(''); } }, { children: jsx(dist.exports.ScrollSyncPane, { children: jsx("div", __assign({ className: classNames(baseStyles.container, styles === null || styles === void 0 ? void 0 : styles.container, (_a = {},
+                                return (jsx(Fragment, { children: headerGroup.label && collapsibleSections ? (jsx(AccordionItem, __assign({ className: classNames('mt16', classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.collapsibleSection), label: headerGroup.label, headerClassName: "p24 br8", isOpen: selectedSection === idString, onOpen: function () { return setSelectedSection(idString); }, onClose: function () { return setSelectedSection(''); } }, { children: jsx(dist.exports.ScrollSyncPane, { children: jsx("div", __assign({ className: classNames(baseStyles.container, 'pb16', classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.container, (_a = {},
                                                     _a[baseStyles.noScrollBars] = hideScrollBars,
-                                                    _a)) }, { children: jsx("div", __assign({ className: classNames(baseStyles['overflow-container']) }, { children: jsx("div", __assign({ className: baseStyles['group-container'] }, { children: content }), void 0) }), void 0) }), void 0) }, void 0) }), void 0)) : (jsx("div", { children: jsx(dist.exports.ScrollSyncPane, { children: jsx("div", __assign({ className: classNames(baseStyles.container, styles === null || styles === void 0 ? void 0 : styles.container, (_b = {},
+                                                    _a)) }, { children: jsx("div", __assign({ className: classNames(baseStyles['overflow-container']) }, { children: jsx("div", __assign({ className: baseStyles['group-container'] }, { children: content }), void 0) }), void 0) }), void 0) }, void 0) }), void 0)) : (jsx("section", __assign({ className: classNames(baseStyles.section, classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.section) }, { children: jsx(dist.exports.ScrollSyncPane, { children: jsx("div", __assign({ className: classNames(baseStyles.container, 'pb16', classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.container, (_b = {},
                                                     _b[baseStyles.noScrollBars] = hideScrollBars,
                                                     _b)) }, { children: jsx("div", __assign({ className: classNames(baseStyles['overflow-container']) }, { children: jsxs("div", __assign({ className: baseStyles['group-container'] }, { children: [
                                                             /**
                                                              * Print a table subheader if the `label` value is present
                                                              */
-                                                            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));
+                                                            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: "w100 d-flex p-a p-h4 c-pointer " + baseStyles['show-details-button'], onClick: toggleMoreRows, type: "button" }, { children: [showMore ? 'Hide details' : 'Show details', 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 };