@popsure/dirty-swan 0.66.25 → 0.66.27

package/dist/cjs/index.js

@@ -22659,8 +22659,8 @@ var Accordion = function (_a) {
         }) }));
 };
 
-var css_248z$b = ".TableCell-module_th__2rjCU {\n  vertical-align: middle;\n  scroll-snap-align: end;\n  width: 50%;\n  padding: 28px 24px;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_th__2rjCU {\n    width: auto;\n    scroll-snap-align: unset;\n  }\n}\n.TableCell-module_thNavigation__qZ2sY {\n  width: 100%;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_thNavigation__qZ2sY {\n    width: auto;\n  }\n}\n\n.TableCell-module_navigationTitle__2FiRB {\n  padding-left: 0;\n}\n\n.TableCell-module_headerCell__aVTIn {\n  vertical-align: top;\n}\n\n.TableCell-module_subtitleCell__1DzfG {\n  vertical-align: middle;\n}\n\n.TableCell-module_fixedCell__cL3-m {\n  position: sticky;\n  left: 0;\n  z-index: 2;\n  padding-left: 0;\n}\n\n.TableCell-module_selectedColumnTop__1GcJz {\n  border-radius: 16px 16px 0 0;\n}\n\n.TableCell-module_selectedColumnBottom__qiMke {\n  border-radius: 0 0 16px 16px;\n}\n\n.TableCell-module_fixedCard__2LO8s {\n  position: sticky;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  width: 100%;\n}";
-var styles$b = {"th":"TableCell-module_th__2rjCU","thNavigation":"TableCell-module_thNavigation__qZ2sY","navigationTitle":"TableCell-module_navigationTitle__2FiRB","headerCell":"TableCell-module_headerCell__aVTIn","subtitleCell":"TableCell-module_subtitleCell__1DzfG","fixedCell":"TableCell-module_fixedCell__cL3-m","selectedColumnTop":"TableCell-module_selectedColumnTop__1GcJz","selectedColumnBottom":"TableCell-module_selectedColumnBottom__qiMke","fixedCard":"TableCell-module_fixedCard__2LO8s"};
+var css_248z$b = ".TableCell-module_th__2rjCU {\n  vertical-align: middle;\n  scroll-snap-align: end;\n  width: 50%;\n  padding: 28px 24px;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_th__2rjCU {\n    width: auto;\n    scroll-snap-align: unset;\n  }\n}\n.TableCell-module_thNavigation__qZ2sY {\n  width: 100%;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_thNavigation__qZ2sY {\n    width: auto;\n  }\n}\n\n.TableCell-module_navigationTitle__2FiRB {\n  padding-left: 0;\n}\n\n.TableCell-module_headerCell__aVTIn {\n  vertical-align: top;\n}\n\n.TableCell-module_subtitleCell__1DzfG {\n  vertical-align: middle;\n}\n\n.TableCell-module_fixedCell__cL3-m {\n  position: sticky;\n  left: 0;\n  z-index: 2;\n  padding-left: 0;\n}\n\n.TableCell-module_buttonCell__15CRG {\n  height: 1px;\n}\n\n.TableCell-module_selectedColumnTop__1GcJz {\n  border-radius: 16px 16px 0 0;\n}\n\n.TableCell-module_selectedColumnBottom__qiMke {\n  border-radius: 0 0 16px 16px;\n}\n\n.TableCell-module_fixedCard__2LO8s {\n  position: sticky;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  width: 100%;\n}";
+var styles$b = {"th":"TableCell-module_th__2rjCU","thNavigation":"TableCell-module_thNavigation__qZ2sY","navigationTitle":"TableCell-module_navigationTitle__2FiRB","headerCell":"TableCell-module_headerCell__aVTIn","subtitleCell":"TableCell-module_subtitleCell__1DzfG","fixedCell":"TableCell-module_fixedCell__cL3-m","buttonCell":"TableCell-module_buttonCell__15CRG","selectedColumnTop":"TableCell-module_selectedColumnTop__1GcJz","selectedColumnBottom":"TableCell-module_selectedColumnBottom__qiMke","fixedCard":"TableCell-module_fixedCard__2LO8s"};
 styleInject(css_248z$b);
 
 var css_248z$a = "@media (max-width: 34rem) {\n  .BaseCell-module_maxWidth__14Cly {\n    max-width: calc(100% - 64px);\n  }\n}\n\n.BaseCell-module_icon__1775U {\n  margin: 2px;\n}\n\n.BaseCell-module_description__3_kfe {\n  word-break: break-word;\n}";
@@ -22750,14 +22750,14 @@ var CardCell = function (_a) {
     return (jsxRuntime.jsx("div", { className: "ta-left", children: jsxRuntime.jsx(Card, __assign({ title: title, description: description, density: "medium", icon: renderedIcon, onClick: onClick }, (href && { href: href, as: 'a' }), { actionIcon: null, showActionIcon: false })) }));
 };
 
-var css_248z$7 = ".ButtonCell-module_buttonCell__x4NNi {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: calc(100% + 40px);\n  margin-left: -20px;\n  margin-right: -20px;\n  padding: 16px 24px;\n  border-radius: 12px;\n  border: 1px solid #e7e7ed;\n  background-color: transparent;\n  color: #26262e;\n  cursor: pointer;\n  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;\n  text-align: left;\n}\n.ButtonCell-module_buttonCell__x4NNi:hover:not(:disabled):not(.ButtonCell-module_selected__22pF_) {\n  background-color: #FAF8F5;\n}\n.ButtonCell-module_buttonCell__x4NNi:focus-visible {\n  outline: 1px solid #26262e;\n  outline-offset: 0;\n}\n@media (max-width: 34rem) {\n  .ButtonCell-module_buttonCell__x4NNi {\n    pointer-events: none;\n  }\n}\n\n.ButtonCell-module_selected__22pF_ {\n  border: 1px solid #26262e;\n  background-color: #FAF8F5;\n}\n\n.ButtonCell-module_disabled__1TmtK {\n  background-color: #f7f7fd;\n  cursor: default;\n  opacity: 1;\n  pointer-events: none;\n}";
-var styles$7 = {"buttonCell":"ButtonCell-module_buttonCell__x4NNi","selected":"ButtonCell-module_selected__22pF_","disabled":"ButtonCell-module_disabled__1TmtK"};
+var css_248z$7 = ".ButtonCell-module_wrapper__1H62k {\n  height: 100%;\n}\n\n.ButtonCell-module_buttonCell__x4NNi {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: calc(100% + 40px);\n  margin-left: -20px;\n  margin-right: -20px;\n  padding: 16px 24px;\n  border-radius: 12px;\n  border: 1px solid #e7e7ed;\n  background-color: transparent;\n  color: #26262e;\n  cursor: pointer;\n  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;\n  text-align: left;\n}\n.ButtonCell-module_buttonCell__x4NNi:hover:not(:disabled):not(.ButtonCell-module_selected__22pF_) {\n  background-color: #FAF8F5;\n}\n.ButtonCell-module_buttonCell__x4NNi:focus-visible {\n  outline: 1px solid #26262e;\n  outline-offset: 0;\n}\n@media (max-width: 34rem) {\n  .ButtonCell-module_buttonCell__x4NNi {\n    pointer-events: none;\n  }\n}\n\n.ButtonCell-module_selected__22pF_ {\n  border: 1px solid #26262e;\n  background-color: #FAF8F5;\n}\n\n.ButtonCell-module_disabled__1TmtK {\n  background-color: #f7f7fd;\n  cursor: default;\n  opacity: 1;\n  pointer-events: none;\n}";
+var styles$7 = {"wrapper":"ButtonCell-module_wrapper__1H62k","buttonCell":"ButtonCell-module_buttonCell__x4NNi","selected":"ButtonCell-module_selected__22pF_","disabled":"ButtonCell-module_disabled__1TmtK"};
 styleInject(css_248z$7);
 
 var ButtonCell = function (_a) {
     var _b;
     var isSelected = _a.isSelected, onClick = _a.onClick, buttonCaption = _a.buttonCaption, price = _a.price, disabled = _a.disabled, className = _a.className, dataCy = _a.dataCy, dataTestId = _a.dataTestId;
-    return (jsxRuntime.jsx("div", { className: classNames("w100 d-flex fd-column ai-start jc-center gap8", className), "data-cy": dataCy, "data-testid": dataTestId, children: jsxRuntime.jsxs("button", { className: classNames('w100 wmx5', styles$7.buttonCell, (_b = {},
+    return (jsxRuntime.jsx("div", { className: classNames("w100 d-flex fd-column ai-start jc-center gap8", styles$7.wrapper, className), "data-cy": dataCy, "data-testid": dataTestId, children: jsxRuntime.jsxs("button", { className: classNames('w100 wmx5', styles$7.buttonCell, (_b = {},
                 _b[styles$7.selected] = isSelected,
                 _b[styles$7.disabled] = disabled,
                 _b)), type: "button", onClick: onClick, disabled: disabled, children: [jsxRuntime.jsxs("div", { className: "d-flex fd-column ai-start", children: [jsxRuntime.jsx("span", { className: "p-p fw-bold", children: buttonCaption }), price && jsxRuntime.jsx("span", { className: "p-p", children: price })] }), !disabled && (isSelected ? (jsxRuntime.jsx(CircleSelectedIcon, { size: 16 })) : (jsxRuntime.jsx(CircleUnselectedIcon, { size: 16 })))] }) }));
@@ -22787,6 +22787,7 @@ var TableCell = React.memo(function (_a) {
             _b[styles$b.navigationTitle] = isNavigation && isTopLeftCell,
             _b[styles$b.fixedCell] = isFirstCellInRow && colSpan < 1,
             _b[styles$b.fixedCard] = cellProps.type === 'CARD',
+            _b[styles$b.buttonCell] = cellProps.type === 'BUTTON',
             _b[styles$b.selectedColumnTop] = selectedColumnPosition === 'top',
             _b[styles$b.selectedColumnBottom] = selectedColumnPosition === 'bottom',
             _b)), colSpan: isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan, children: [!cellProps.type && (jsxRuntime.jsx(BaseCell, __assign({}, cellProps, { fontVariant: (_c = cellProps.fontVariant) !== null && _c !== void 0 ? _c : (isTopLeftCell ? 'TITLE' : 'NORMAL') }))), cellProps.type === 'CTA' && (jsxRuntime.jsx(CTACell, __assign({}, cellProps, { centered: isNavigation }))), cellProps.type === 'BUTTON' && jsxRuntime.jsx(ButtonCell, __assign({}, cellProps)), cellProps.type === 'CARD' && jsxRuntime.jsx(CardCell, __assign({}, cellProps))] })));
@@ -22984,8 +22985,17 @@ var TableContents = function (_a) {
 };
 
 var useTableNavigation = function (_a) {
-    var enabled = _a.enabled, containerRef = _a.containerRef, onSelectionChanged = _a.onSelectionChanged;
-    var _b = React.useState(0), activeSection = _b[0], setActiveSection = _b[1];
+    var enabled = _a.enabled, containerRef = _a.containerRef, _b = _a.initialSection, initialSection = _b === void 0 ? 0 : _b, onSelectionChanged = _a.onSelectionChanged;
+    var _c = React.useState(initialSection), activeSection = _c[0], setActiveSection = _c[1];
+    var activeSectionRef = React.useRef(initialSection);
+    var skipNextReportRef = React.useRef(false);
+    var syncActiveSection = React.useCallback(function (section) {
+        if (section === activeSectionRef.current) {
+            return;
+        }
+        skipNextReportRef.current = true;
+        setActiveSection(section);
+    }, []);
     var handleScrollToSection = function (increase) {
         if (!enabled) {
             return;
@@ -23012,10 +23022,15 @@ var useTableNavigation = function (_a) {
         return container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', handleTableScroll);
     }, [enabled]);
     React.useEffect(function () {
+        activeSectionRef.current = activeSection;
+        var skipReport = skipNextReportRef.current;
+        skipNextReportRef.current = false;
         if (!enabled) {
             return;
         }
-        onSelectionChanged === null || onSelectionChanged === void 0 ? void 0 : onSelectionChanged(activeSection + 1);
+        if (!skipReport) {
+            onSelectionChanged === null || onSelectionChanged === void 0 ? void 0 : onSelectionChanged(activeSection + 1);
+        }
         if (containerRef.current) {
             var containerWidth = containerRef.current.getBoundingClientRect().width;
             var cellWidth = containerWidth / 2;
@@ -23030,6 +23045,7 @@ var useTableNavigation = function (_a) {
         activeSection: activeSection + 1,
         navigateTable: handleScrollToSection,
         setActiveSection: setActiveSection,
+        syncActiveSection: syncActiveSection,
     };
 };
 
@@ -23123,8 +23139,9 @@ var Table = function (_a) {
     var _s = useTableNavigation({
         enabled: isMobile,
         containerRef: containerRef,
+        initialSection: externalActiveSection ? externalActiveSection - 1 : 0,
         onSelectionChanged: onSelectionChanged,
-    }), activeSection = _s.activeSection, navigateTable = _s.navigateTable, setActiveSection = _s.setActiveSection;
+    }), activeSection = _s.activeSection, navigateTable = _s.navigateTable, setActiveSection = _s.setActiveSection, syncActiveSection = _s.syncActiveSection;
     var headerRow = (_c = (_b = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _b === void 0 ? void 0 : _b.rows) === null || _c === void 0 ? void 0 : _c[0];
     var titleCell = __assign({ text: '' }, ((headerRow === null || headerRow === void 0 ? void 0 : headerRow[0]) || {}));
     var currentActiveSection = headerRow === null || headerRow === void 0 ? void 0 : headerRow[activeSection];
@@ -23151,7 +23168,7 @@ var Table = function (_a) {
     }, []);
     React.useEffect(function () {
         if (externalActiveSection && externalActiveSection !== activeSection) {
-            setActiveSection(externalActiveSection - 1);
+            syncActiveSection(externalActiveSection - 1);
         }
     }, [externalActiveSection]);
     return (jsxRuntime.jsxs("div", { className: classNames(styles$6.wrapper, 'bg-white'), children: [isMobile ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!useTabs && (titleCell === null || titleCell === void 0 ? void 0 : titleCell.text) && (jsxRuntime.jsx(TableCell, __assign({}, titleCell, { align: "left", isNavigation: true, isTopLeftCell: true, type: undefined }))), !hideTableNavigation && currentActiveSection && (useTabs ? (jsxRuntime.jsx("div", { className: classNames('bg-white', styles$6.stickyHeader), style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsxRuntime.jsx(Tabs, { tabs: mobileTabs, activeIndex: activeSection - 1, onTabChange: function (index) { return setActiveSection(index); }, className: "mb16" }) })) : (jsxRuntime.jsx(TableControls, { activeSection: activeSection, columnsLength: columnsLength, navigateTable: navigateTable, stickyHeaderTopOffset: stickyHeaderTopOffset, children: jsxRuntime.jsx(TableCell, __assign({}, (isBaseCell(currentActiveSection)