@popsure/dirty-swan 0.37.1 → 0.37.2

package/dist/cjs/index.js

@@ -13960,8 +13960,9 @@ var TableTrueFalse = function (_a) {
 var useComparisonTable = function () {
     var _a = require$$0.useState(false), showMore = _a[0], setShowMore = _a[1];
     var _b = require$$0.useState(1400), headerWidth = _b[0], setHeaderWidth = _b[1];
-    var _c = require$$0.useState(0), selectedTabIndex = _c[0], setSelectedTabIndex = _c[1];
-    var _d = require$$0.useState(''), selectedSection = _d[0], setSelectedSection = _d[1];
+    var _c = require$$0.useState(''), headerId = _c[0], setHeaderId = _c[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);
@@ -14035,8 +14036,21 @@ var useComparisonTable = function () {
             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());
+    }, []);
     return {
         headerWidth: headerWidth,
+        headerId: headerId,
         contentContainerRef: contentContainerRef,
         selectedSection: selectedSection,
         setSelectedSection: setSelectedSection,
@@ -14056,13 +14070,13 @@ styleInject(css_248z$3);
 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 (jsxRuntime.jsx(dist.exports.ScrollSync, __assign({ onSync: scrollContainerCallbackRef }, { children: jsxRuntime.jsxs("div", __assign({ style: cssVariablesStyle }, { children: [jsxRuntime.jsx("div", __assign({ className: classNames(baseStyles.header, styles === null || styles === void 0 ? void 0 : styles.header) }, { children: jsxRuntime.jsx(dist.exports.ScrollSyncPane, { children: jsxRuntime.jsx("div", __assign({ className: classNames(baseStyles.container, (_a = {},
+    return (jsxRuntime.jsx(dist.exports.ScrollSync, __assign({ onSync: scrollContainerCallbackRef }, { children: jsxRuntime.jsxs("div", __assign({ style: cssVariablesStyle }, { children: [jsxRuntime.jsx("div", __assign({ className: classNames(baseStyles.header, styles === null || styles === void 0 ? void 0 : styles.header) }, { children: jsxRuntime.jsx(dist.exports.ScrollSyncPane, { children: jsxRuntime.jsx("div", __assign({ id: headerId, className: classNames(baseStyles.container, (_a = {},
                                 _a[baseStyles.noScrollBars] = hideScrollBars,
                                 _a)) }, { children: jsxRuntime.jsx("div", __assign({ className: classNames(baseStyles['overflow-container']) }, { children: jsxRuntime.jsxs("div", __assign({ className: baseStyles['group-container'] }, { children: [jsxRuntime.jsx(TableArrows, { onClick: handleArrowsClick, active: {
                                                 left: selectedTabIndex > 0,