@popsure/dirty-swan 0.37.1 → 0.37.2

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

@@ -2,6 +2,7 @@
 import { ArrowValues } from '../components/TableArrows';
 export declare const useComparisonTable: () => {
     headerWidth: number;
+    headerId: string;
     contentContainerRef: import("react").MutableRefObject<HTMLDivElement | null>;
     selectedSection: string;
     setSelectedSection: import("react").Dispatch<import("react").SetStateAction<string>>;

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

@@ -12,6 +12,7 @@ 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';
@@ -1542,8 +1543,9 @@ module.exports = function(isValidElement, throwOnDirectAccess) {
 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(0), selectedTabIndex = _c[0], setSelectedTabIndex = _c[1];
-    var _d = useState(''), selectedSection = _d[0], setSelectedSection = _d[1];
+    var _c = useState(''), headerId = _c[0], setHeaderId = _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);
     var contentContainerRef = useRef(null);
     var observerRef = useRef(null);
@@ -1617,8 +1619,21 @@ var useComparisonTable = function () {
             return [2 /*return*/];
         });
     }); };
+    useEffect(function () {
+        if (headerRef.current) {
+            return;
+        }
+        var headerById = document.getElementById(headerId);
+        if (headerById) {
+            scrollContainerCallbackRef(headerById);
+        }
+    }, [headerId, scrollContainerCallbackRef]);
+    useEffect(function () {
+        setHeaderId(generateId());
+    }, []);
     return {
         headerWidth: headerWidth,
+        headerId: headerId,
         contentContainerRef: contentContainerRef,
         selectedSection: selectedSection,
         setSelectedSection: setSelectedSection,
@@ -1638,13 +1653,13 @@ 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;
+    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 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({ className: classnames(baseStyles.container, (_a = {},
+    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: {
                                                 left: selectedTabIndex > 0,