@popsure/dirty-swan 0.63.0 → 0.63.2

package/dist/esm/components/table/Table.js

@@ -1,43 +1,49 @@
-import { a as __assign } from '../../tslib.es6-a39f91fc.js';
+import { b as __assign } from '../../tslib.es6-CVlKGIvp.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { TableCell } from './components/TableCell/TableCell.js';
-import { BottomOrRegularModal } from '../modal/bottomOrRegularModal/index.js';
-import { useState, useRef, useCallback } from 'react';
+import { c as classNames } from '../../index-DLQEsiym.js';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import '../button/index.js';
 import ChevronDownIcon from '../icon/icons/ChevronDown.js';
 import ChevronUpIcon from '../icon/icons/ChevronUp.js';
+import { BottomOrRegularModal } from '../modal/bottomOrRegularModal/index.js';
 import { Card } from '../cards/card/index.js';
-import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
-import { u as useMediaQuery } from '../../Collapsible-a355828b.js';
+import { s as styleInject } from '../../style-inject.es-tgCJW-Cu.js';
+import { u as useMediaQuery } from '../../useMediaQuery-BlEUymPA.js';
 import { TableContents } from './components/TableContents/TableContents.js';
-import { c as classNames } from '../../index-6ea95111.js';
-import { u as useTableNavigation } from '../../useTableNavigation-2899712c.js';
+import { u as useTableNavigation } from '../../useTableNavigation-CrxoXTVd.js';
 import { TableControls } from './components/TableControls/TableControls.js';
-import { i as isBaseCell, T as TableSection } from '../../TableSection-e703f17f.js';
-import { u as useScrollSync } from '../../useScrollSync-b2d28bed.js';
+import { i as isBaseCell, T as TableSection } from '../../TableSection-CEhD4eoy.js';
+import { u as useScrollSync } from '../../useScrollSync-C5UXYPIB.js';
 import './components/TableCell/BaseCell/BaseCell.js';
-import '../icon/icons/Check.js';
+import '../icon/icons/CheckThick.js';
 import '../icon/IconWrapper/IconWrapper.js';
+import '../../_commonjsHelpers-BFTU3MAI.js';
 import '../icon/icons/StarFilled.js';
 import '../icon/icons/X.js';
 import '../icon/icons/ZapFilled.js';
 import './components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.js';
-import '../../index-caeac7cd.js';
-import '../../_commonjsHelpers-4730bd53.js';
+import '../../index-CqsS0Elu.js';
+import '../../index-DYcCCrfR.js';
+import '../comparisonTable/components/Row/index.js';
 import '../comparisonTable/components/TableInfoButton/index.js';
 import '../icon/icons/Info.js';
-import '../../index-5e72c3d4.js';
+import '../../index-BClARCFl.js';
 import './components/TableCell/CTACell/CTACell.js';
+import './components/IconRenderer/IconRenderer.js';
+import './components/TableCell/CardCell/CardCell.js';
+import '../icon/icons/ChevronRight.js';
 import './components/TableCell/ButtonCell/ButtonCell.js';
-import '../button/index.js';
 import '../modal/bottomModal/index.js';
 import '../modal/genericModal/index.js';
+import '../../index-DuaJiEiT.js';
+import '../../index-hWqCLhoS.js';
 import '../modal/regularModal/index.js';
-import '../icon/icons/ChevronRight.js';
-import '../../index-a0ef2ab4.js';
+import './components/TableContents/Collapsible.js';
 import '../icon/icons/ChevronLeft.js';
 
-var css_248z = ".Table-module_wrapper__2MMNq {\n  position: relative;\n}\n\n.Table-module_container__3VFLP {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n.Table-module_container__3VFLP::-webkit-scrollbar {\n  display: none;\n}\n@media (min-width: 34rem) {\n  .Table-module_container__3VFLP {\n    scroll-snap-type: unset;\n  }\n}\n\n.Table-module_stickyHeader__2uEpP {\n  display: flex;\n  position: sticky;\n  z-index: 9;\n}";
-var styles = {"wrapper":"Table-module_wrapper__2MMNq","container":"Table-module_container__3VFLP","stickyHeader":"Table-module_stickyHeader__2uEpP"};
+var css_248z = ".Table-module_wrapper__2MMNq {\n  position: relative;\n}\n\n.Table-module_container__3VFLP {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n.Table-module_container__3VFLP::-webkit-scrollbar {\n  display: none;\n}\n@media (min-width: 34rem) {\n  .Table-module_container__3VFLP {\n    scroll-snap-type: unset;\n  }\n}\n\n.Table-module_cardButton__3aMuL div {\n  background-color: #FAF8F5;\n}\n.Table-module_cardButton__3aMuL:hover div {\n  border-color: transparent !important;\n  outline-color: transparent !important;\n  box-shadow: none !important;\n  background-color: #FCF7EF !important;\n}\n.Table-module_cardButton__3aMuL:focus-visible div {\n  background-color: #FCF7EF !important;\n}\n\n.Table-module_stickyHeader__2uEpP {\n  display: flex;\n  position: sticky;\n  z-index: 9;\n}\n\n@media (max-width: 34rem) {\n  .Table-module_modalContent__1PNgv {\n    min-width: initial;\n  }\n}";
+var styles = {"wrapper":"Table-module_wrapper__2MMNq","container":"Table-module_container__3VFLP","cardButton":"Table-module_cardButton__3aMuL","stickyHeader":"Table-module_stickyHeader__2uEpP","modalContent":"Table-module_modalContent__1PNgv"};
 styleInject(css_248z);
 
 var defaultTextOverrides = {
@@ -45,22 +51,24 @@ var defaultTextOverrides = {
     hideDetails: 'Hide details',
 };
 var Table = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var className = _a.className, cellReplacements = _a.cellReplacements, collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, hideDetails = _a.hideDetails, onModalOpen = _a.onModalOpen, onSelectionChanged = _a.onSelectionChanged, _g = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _g === void 0 ? 0 : _g, definedTextOverrides = _a.textOverrides, title = _a.title;
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var cellReplacements = _a.cellReplacements, className = _a.className, collapsibleSections = _a.collapsibleSections, _k = _a.hideColumns, hideColumns = _k === void 0 ? [] : _k, hideDetails = _a.hideDetails, _l = _a.hideRows, hideRows = _l === void 0 ? [] : _l, imageComponent = _a.imageComponent, modalContentRenderer = _a.modalContentRenderer, onModalOpen = _a.onModalOpen, onSelectionChanged = _a.onSelectionChanged, scrollOnOpen = _a.scrollOnOpen, _m = _a.scrollTopOffset, scrollTopOffset = _m === void 0 ? 0 : _m, _o = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _o === void 0 ? 0 : _o, tableData = _a.tableData, definedTextOverrides = _a.textOverrides, title = _a.title, externalActiveSection = _a.activeSection, _p = _a.hideTableNavigation, hideTableNavigation = _p === void 0 ? false : _p;
     var textOverrides = __assign(__assign({}, defaultTextOverrides), definedTextOverrides);
     var isMobile = useMediaQuery('BELOW_MOBILE');
-    var _h = useState(null), infoModalData = _h[0], setInfoModalData = _h[1];
-    var _j = useState(true), shouldHideDetails = _j[0], setShouldHideDetails = _j[1];
+    var _q = useState(null), infoModalData = _q[0], setInfoModalData = _q[1];
+    var _r = useState(true), shouldHideDetails = _r[0], setShouldHideDetails = _r[1];
     var containerRef = useRef(null);
     var headerRef = useRef(null);
+    var stickyHeaderRef = useRef(null);
     var columnsLength = tableData[0].rows[0].length;
     useScrollSync(headerRef, containerRef, !isMobile);
-    var _k = useTableNavigation({
+    var _s = useTableNavigation({
         enabled: isMobile,
         containerRef: containerRef,
         onSelectionChanged: onSelectionChanged,
-    }), activeSection = _k.activeSection, navigateTable = _k.navigateTable;
-    var currentActiveSection = (_d = (_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]) === null || _d === void 0 ? void 0 : _d[activeSection];
+    }), activeSection = _s.activeSection, navigateTable = _s.navigateTable, setActiveSection = _s.setActiveSection;
+    var titleCell = __assign({ text: '' }, (((_d = (_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]) === null || _d === void 0 ? void 0 : _d[0]) || {}));
+    var currentActiveSection = (_g = (_f = (_e = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _e === void 0 ? void 0 : _e.rows) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g[activeSection];
     var currentActiveSectionReplacements = (currentActiveSection.cellId &&
         (cellReplacements === null || cellReplacements === void 0 ? void 0 : cellReplacements[currentActiveSection.cellId])) ||
         {};
@@ -70,22 +78,28 @@ var Table = function (_a) {
         onModalOpen === null || onModalOpen === void 0 ? void 0 : onModalOpen({ body: body, title: title });
         setInfoModalData({ body: body, title: title });
     }, []);
-    return (jsxs("div", { className: classNames(styles.wrapper, 'bg-white'), children: [isMobile ? (jsx(TableControls, { activeSection: activeSection, columnsLength: columnsLength, navigateTable: navigateTable, stickyHeaderTopOffset: stickyHeaderTopOffset, children: jsx(TableCell, __assign({}, (isBaseCell(currentActiveSection)
-                    ? {
-                        openModal: function (body) {
-                            return handleOpenModal({
-                                body: body,
-                                title: currentActiveSection === null || currentActiveSection === void 0 ? void 0 : currentActiveSection.text,
-                            });
-                        },
-                    }
-                    : {}), activeCellProps, { isNavigation: true })) })) : (jsx("div", { "aria-hidden": true, className: styles.stickyHeader, style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsx("div", { className: styles.container, ref: headerRef, children: jsx(TableSection, { tableCellRows: [(_f = (_e = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _e === void 0 ? void 0 : _e.rows) === null || _f === void 0 ? void 0 : _f[0]], title: title, className: className, openModal: handleOpenModal }) }) })), jsx("div", { ref: containerRef, className: classNames(styles.container, 'pb8'), children: jsx(TableContents, { tableData: tableData, title: title, className: className, collapsibleSections: collapsibleSections, hideDetails: hideDetails, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal, cellReplacements: cellReplacements }) }), hideDetails && (jsx(Card, { "data-testid": "show-hide-details", classNames: {
-                    buttonWrapper: 'm8 mt32',
-                    title: 'd-flex gap8 ai-center jc-center',
-                    wrapper: 'bg-grey-200',
+    useEffect(function () {
+        if (externalActiveSection && externalActiveSection !== activeSection) {
+            setActiveSection(externalActiveSection - 1);
+        }
+    }, [externalActiveSection]);
+    return (jsxs("div", { className: classNames(styles.wrapper, 'bg-white'), children: [isMobile ? (jsxs(Fragment, { children: [(titleCell === null || titleCell === void 0 ? void 0 : titleCell.text) && (jsx(TableCell, __assign({}, titleCell, { align: "left", isNavigation: true, isTopLeftCell: true, type: undefined }))), !hideTableNavigation && (jsx(TableControls, { activeSection: activeSection, columnsLength: columnsLength, navigateTable: navigateTable, stickyHeaderTopOffset: stickyHeaderTopOffset, children: jsx(TableCell, __assign({}, (isBaseCell(currentActiveSection)
+                            ? {
+                                openModal: function (body) {
+                                    return handleOpenModal({
+                                        body: body,
+                                        title: currentActiveSection === null || currentActiveSection === void 0 ? void 0 : currentActiveSection.text,
+                                    });
+                                },
+                            }
+                            : {}), activeCellProps, { imageComponent: imageComponent, isNavigation: true })) }))] })) : (jsx("div", { ref: stickyHeaderRef, "aria-hidden": true, className: styles.stickyHeader, style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsx("div", { className: styles.container, ref: headerRef, children: jsx(TableSection, { cellReplacements: cellReplacements, className: className, hideColumns: hideColumns, hideRows: hideRows, openModal: handleOpenModal, tableCellRows: [(_j = (_h = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _h === void 0 ? void 0 : _h.rows) === null || _j === void 0 ? void 0 : _j[0]], title: title, imageComponent: imageComponent }) }) })), jsx("div", { ref: containerRef, className: classNames(styles.container, 'pb8'), children: jsx(TableContents, { tableData: tableData, title: title, className: className, collapsibleSections: collapsibleSections, scrollOnOpen: scrollOnOpen, scrollTopOffset: scrollTopOffset, stickyHeaderRef: stickyHeaderRef, hideColumns: hideColumns, hideDetails: hideDetails, hideRows: hideRows, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal, cellReplacements: cellReplacements, imageComponent: imageComponent }) }), (tableData === null || tableData === void 0 ? void 0 : tableData.length) > 1 && hideDetails && (jsx(Card, { "data-testid": "show-hide-details", classNames: {
+                    buttonWrapper: classNames(styles.cardButton, 'm8 mt32'),
+                    title: 'd-flex gap8 ai-center jc-center fw-bold',
                 }, title: jsxs(Fragment, { children: [shouldHideDetails
                             ? textOverrides.showDetails
-                            : textOverrides.hideDetails, shouldHideDetails ? (jsx(ChevronDownIcon, { size: 24 })) : (jsx(ChevronUpIcon, { size: 24 }))] }), actionIcon: null, dropShadow: false, titleVariant: "small", density: "compact", onClick: function () { return setShouldHideDetails(function (current) { return !current; }); } })), jsx(BottomOrRegularModal, { isOpen: (infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.body) ? true : false, title: infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.title, onClose: function () { return setInfoModalData(null); }, children: jsx("div", { className: "pt8 p24 wmn6", children: infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.body }) })] }));
+                            : textOverrides.hideDetails, shouldHideDetails ? (jsx(ChevronDownIcon, { size: 20 })) : (jsx(ChevronUpIcon, { size: 20 }))] }), actionIcon: null, dropShadow: false, titleVariant: "small", density: "xsmall", onClick: function () { return setShouldHideDetails(function (current) { return !current; }); } })), jsx(BottomOrRegularModal, { isOpen: (infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.body) ? true : false, title: infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.title, onClose: function () { return setInfoModalData(null); }, children: jsx("div", { className: classNames(styles.modalContent, 'pt8 p24 wmn6'), children: modalContentRenderer
+                        ? modalContentRenderer(infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.body)
+                        : infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.body }) })] }));
 };
 
 export { Table };

package/dist/esm/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, useCallback, useRef, useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nimport styles from './Table.module.scss';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { TableContents } from './components/TableContents/TableContents';\nimport classNames from 'classnames';\nimport { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';\nimport { TableControls } from './components/TableControls/TableControls';\nimport { TableSection } from './components/TableSection/TableSection';\nimport { useScrollSync } from './utils/useScrollSync/useScrollSync';\nimport {\n  CellReplacements,\n  isBaseCell,\n  ModalData,\n  ModalFunction,\n  TableCellData,\n  TableData,\n} from './types';\n\ntype TextOverrides = {\n  showDetails?: string;\n  hideDetails?: string;\n};\n\nexport interface TableProps {\n  className?: string;\n  collapsibleSections?: boolean;\n  tableData: TableData;\n  hideDetails?: boolean;\n  onModalOpen?: ModalFunction;\n  onSelectionChanged?: (index: number) => void;\n  stickyHeaderTopOffset?: number;\n  textOverrides?: TextOverrides;\n  title: string;\n  cellReplacements?: CellReplacements;\n}\n\nconst defaultTextOverrides = {\n  showDetails: 'Show details',\n  hideDetails: 'Hide details',\n};\n\nconst Table = ({\n  className,\n  cellReplacements,\n  collapsibleSections,\n  tableData,\n  hideDetails,\n  onModalOpen,\n  onSelectionChanged,\n  stickyHeaderTopOffset = 0,\n  textOverrides: definedTextOverrides,\n  title,\n}: TableProps) => {\n  const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n  const isMobile = useMediaQuery('BELOW_MOBILE');\n  const [infoModalData, setInfoModalData] = useState<ModalData | null>(null);\n  const [shouldHideDetails, setShouldHideDetails] = useState(true);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const columnsLength = tableData[0].rows[0].length;\n\n  useScrollSync(headerRef, containerRef, !isMobile);\n\n  const { activeSection, navigateTable } = useTableNavigation({\n    enabled: isMobile,\n    containerRef,\n    onSelectionChanged,\n  });\n\n  const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];\n  const currentActiveSectionReplacements =\n    (currentActiveSection.cellId &&\n      cellReplacements?.[currentActiveSection.cellId]) ||\n    {};\n\n  const activeCellProps = {\n    ...currentActiveSection,\n    ...currentActiveSectionReplacements,\n  } as TableCellData;\n\n  const handleOpenModal: ModalFunction = useCallback(({ body, title }) => {\n    onModalOpen?.({ body, title });\n    setInfoModalData({ body, title });\n  }, []);\n\n  return (\n    <div className={classNames(styles.wrapper, 'bg-white')}>\n      {isMobile ? (\n        <TableControls\n          activeSection={activeSection}\n          columnsLength={columnsLength}\n          navigateTable={navigateTable}\n          stickyHeaderTopOffset={stickyHeaderTopOffset}\n        >\n          <TableCell\n            {...(isBaseCell(currentActiveSection)\n              ? {\n                  openModal: (body: ReactNode) =>\n                    handleOpenModal({\n                      body,\n                      title: currentActiveSection?.text,\n                    }),\n                }\n              : {})}\n            {...activeCellProps}\n            isNavigation\n          />\n        </TableControls>\n      ) : (\n        <div\n          aria-hidden\n          className={styles.stickyHeader}\n          style={{ top: `${stickyHeaderTopOffset}px` }}\n        >\n          <div className={styles.container} ref={headerRef}>\n            <TableSection\n              tableCellRows={[tableData?.[0]?.rows?.[0]]}\n              title={title}\n              className={className}\n              openModal={handleOpenModal}\n            />\n          </div>\n        </div>\n      )}\n\n      <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n        <TableContents\n          tableData={tableData}\n          title={title}\n          className={className}\n          collapsibleSections={collapsibleSections}\n          hideDetails={hideDetails}\n          isMobile={isMobile}\n          shouldHideDetails={shouldHideDetails}\n          openModal={handleOpenModal}\n          cellReplacements={cellReplacements}\n        />\n      </div>\n\n      {hideDetails && (\n        <Card\n          data-testid=\"show-hide-details\"\n          classNames={{\n            buttonWrapper: 'm8 mt32',\n            title: 'd-flex gap8 ai-center jc-center',\n            wrapper: 'bg-grey-200',\n          }}\n          title={\n            <>\n              {shouldHideDetails\n                ? textOverrides.showDetails\n                : textOverrides.hideDetails}\n              {shouldHideDetails ? (\n                <ChevronDownIcon size={24} />\n              ) : (\n                <ChevronUpIcon size={24} />\n              )}\n            </>\n          }\n          actionIcon={null}\n          dropShadow={false}\n          titleVariant=\"small\"\n          density=\"compact\"\n          onClick={() => setShouldHideDetails((current) => !current)}\n        />\n      )}\n\n      <BottomOrRegularModal\n        isOpen={infoModalData?.body ? true : false}\n        title={infoModalData?.title}\n        onClose={() => setInfoModalData(null)}\n      >\n        <div className=\"pt8 p24 wmn6\">{infoModalData?.body}</div>\n      </BottomOrRegularModal>\n    </div>\n  );\n};\n\nexport { Table };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nimport styles from './Table.module.scss';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { TableContents } from './components/TableContents/TableContents';\nimport classNames from 'classnames';\nimport { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';\nimport { TableControls } from './components/TableControls/TableControls';\nimport { TableSection } from './components/TableSection/TableSection';\nimport { useScrollSync } from './utils/useScrollSync/useScrollSync';\nimport {\n  CellReplacements,\n  isBaseCell,\n  ModalData,\n  ModalFunction,\n  TableCellData,\n  TableData,\n} from './types';\n\nexport type { TableData } from './types';\n\ntype TextOverrides = {\n  showDetails?: string;\n  hideDetails?: string;\n};\n\nexport interface TableProps {\n  cellReplacements?: CellReplacements;\n  className?: string;\n  collapsibleSections?: boolean;\n  hideColumns?: number[];\n  hideDetails?: boolean;\n  hideRows?: number[];\n  imageComponent?: (args: any) => JSX.Element;\n  modalContentRenderer?: (content: ReactNode) => ReactNode;\n  onModalOpen?: ModalFunction;\n  onSelectionChanged?: (index: number) => void;\n  scrollOnOpen?: boolean;\n  scrollTopOffset?: number;\n  stickyHeaderTopOffset?: number;\n  tableData: TableData;\n  textOverrides?: TextOverrides;\n  title: string;\n  activeSection?: number;\n  hideTableNavigation?: boolean;\n}\n\nconst defaultTextOverrides = {\n  showDetails: 'Show details',\n  hideDetails: 'Hide details',\n};\n\nconst Table = ({\n  cellReplacements,\n  className,\n  collapsibleSections,\n  hideColumns = [],\n  hideDetails,\n  hideRows = [],\n  imageComponent,\n  modalContentRenderer,\n  onModalOpen,\n  onSelectionChanged,\n  scrollOnOpen,\n  scrollTopOffset = 0,\n  stickyHeaderTopOffset = 0,\n  tableData,\n  textOverrides: definedTextOverrides,\n  title,\n  activeSection: externalActiveSection,\n  hideTableNavigation = false,\n}: TableProps) => {\n  const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n  const isMobile = useMediaQuery('BELOW_MOBILE');\n  const [infoModalData, setInfoModalData] = useState<ModalData | null>(null);\n  const [shouldHideDetails, setShouldHideDetails] = useState(true);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const stickyHeaderRef = useRef<HTMLDivElement | null>(null);\n  const columnsLength = tableData[0].rows[0].length;\n\n  useScrollSync(headerRef, containerRef, !isMobile);\n\n  const { activeSection, navigateTable, setActiveSection } = useTableNavigation(\n    {\n      enabled: isMobile,\n      containerRef,\n      onSelectionChanged,\n    }\n  );\n\n  const titleCell = {\n    text: '',\n    ...(tableData?.[0]?.rows?.[0]?.[0] || {}),\n  };\n  const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];\n  const currentActiveSectionReplacements =\n    (currentActiveSection.cellId &&\n      cellReplacements?.[currentActiveSection.cellId]) ||\n    {};\n\n  const activeCellProps = {\n    ...currentActiveSection,\n    ...currentActiveSectionReplacements,\n  } as TableCellData;\n\n  const handleOpenModal: ModalFunction = useCallback(({ body, title }) => {\n    onModalOpen?.({ body, title });\n    setInfoModalData({ body, title });\n  }, []);\n\n  useEffect(() => {\n    if (externalActiveSection && externalActiveSection !== activeSection) {\n      setActiveSection(externalActiveSection - 1);\n    }\n  }, [externalActiveSection]);\n\n  return (\n    <div className={classNames(styles.wrapper, 'bg-white')}>\n      {isMobile ? (\n        <>\n          {titleCell?.text && (\n            <TableCell\n              {...titleCell}\n              align=\"left\"\n              isNavigation\n              isTopLeftCell\n              type={undefined}\n            />\n          )}\n\n          {!hideTableNavigation && (\n            <TableControls\n              activeSection={activeSection}\n              columnsLength={columnsLength}\n              navigateTable={navigateTable}\n              stickyHeaderTopOffset={stickyHeaderTopOffset}\n            >\n              <TableCell\n                {...(isBaseCell(currentActiveSection)\n                  ? {\n                      openModal: (body: ReactNode) =>\n                        handleOpenModal({\n                          body,\n                          title: currentActiveSection?.text,\n                        }),\n                    }\n                  : {})}\n                {...activeCellProps}\n                imageComponent={imageComponent}\n                isNavigation\n              />\n            </TableControls>\n          )}\n        </>\n      ) : (\n        <div\n          ref={stickyHeaderRef}\n          aria-hidden\n          className={styles.stickyHeader}\n          style={{ top: `${stickyHeaderTopOffset}px` }}\n        >\n          <div className={styles.container} ref={headerRef}>\n            <TableSection\n              cellReplacements={cellReplacements}\n              className={className}\n              hideColumns={hideColumns}\n              hideRows={hideRows}\n              openModal={handleOpenModal}\n              tableCellRows={[tableData?.[0]?.rows?.[0]]}\n              title={title}\n              imageComponent={imageComponent}\n            />\n          </div>\n        </div>\n      )}\n\n      <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n        <TableContents\n          tableData={tableData}\n          title={title}\n          className={className}\n          collapsibleSections={collapsibleSections}\n          scrollOnOpen={scrollOnOpen}\n          scrollTopOffset={scrollTopOffset}\n          stickyHeaderRef={stickyHeaderRef}\n          hideColumns={hideColumns}\n          hideDetails={hideDetails}\n          hideRows={hideRows}\n          isMobile={isMobile}\n          shouldHideDetails={shouldHideDetails}\n          openModal={handleOpenModal}\n          cellReplacements={cellReplacements}\n          imageComponent={imageComponent}\n        />\n      </div>\n\n      {tableData?.length > 1 && hideDetails && (\n        <Card\n          data-testid=\"show-hide-details\"\n          classNames={{\n            buttonWrapper: classNames(styles.cardButton, 'm8 mt32'),\n            title: 'd-flex gap8 ai-center jc-center fw-bold',\n          }}\n          title={\n            <>\n              {shouldHideDetails\n                ? textOverrides.showDetails\n                : textOverrides.hideDetails}\n              {shouldHideDetails ? (\n                <ChevronDownIcon size={20} />\n              ) : (\n                <ChevronUpIcon size={20} />\n              )}\n            </>\n          }\n          actionIcon={null}\n          dropShadow={false}\n          titleVariant=\"small\"\n          density=\"xsmall\"\n          onClick={() => setShouldHideDetails((current) => !current)}\n        />\n      )}\n\n      <BottomOrRegularModal\n        isOpen={infoModalData?.body ? true : false}\n        title={infoModalData?.title}\n        onClose={() => setInfoModalData(null)}\n      >\n        <div className={classNames(styles.modalContent, 'pt8 p24 wmn6')}>\n          {modalContentRenderer\n            ? modalContentRenderer(infoModalData?.body)\n            : infoModalData?.body}\n        </div>\n      </BottomOrRegularModal>\n    </div>\n  );\n};\n\nexport { Table };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/esm/components/table/Table.stories.js

@@ -1,45 +1,51 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Table } from './Table.js';
+import { useState } from 'react';
+import '../../index-DLQEsiym.js';
 import DentalPlusIcon from '../icon/icons/DentalPlus.js';
 import PlaneIcon from '../icon/icons/Plane.js';
-import { useState } from 'react';
 import { Input } from '../input/index.js';
-import '../../tslib.es6-a39f91fc.js';
+import '../../tslib.es6-CVlKGIvp.js';
 import './components/TableCell/TableCell.js';
-import '../../index-6ea95111.js';
-import '../../style-inject.es-1f59c1d0.js';
+import '../../style-inject.es-tgCJW-Cu.js';
 import './components/TableCell/BaseCell/BaseCell.js';
-import '../icon/icons/Check.js';
+import '../icon/icons/CheckThick.js';
 import '../icon/IconWrapper/IconWrapper.js';
 import '../icon/icons/StarFilled.js';
 import '../icon/icons/X.js';
 import '../icon/icons/ZapFilled.js';
 import './components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.js';
-import '../../index-caeac7cd.js';
-import '../../_commonjsHelpers-4730bd53.js';
+import '../../index-CqsS0Elu.js';
+import '../../index-DYcCCrfR.js';
+import '../comparisonTable/components/Row/index.js';
 import '../comparisonTable/components/TableInfoButton/index.js';
 import '../icon/icons/Info.js';
-import '../../index-5e72c3d4.js';
+import '../../index-BClARCFl.js';
+import '../../_commonjsHelpers-BFTU3MAI.js';
 import './components/TableCell/CTACell/CTACell.js';
-import './components/TableCell/ButtonCell/ButtonCell.js';
+import './components/IconRenderer/IconRenderer.js';
 import '../button/index.js';
+import './components/TableCell/CardCell/CardCell.js';
+import '../cards/card/index.js';
+import '../icon/icons/ChevronRight.js';
+import './components/TableCell/ButtonCell/ButtonCell.js';
+import '../icon/icons/ChevronDown.js';
+import '../icon/icons/ChevronUp.js';
 import '../modal/bottomOrRegularModal/index.js';
 import '../modal/bottomModal/index.js';
 import '../modal/genericModal/index.js';
+import '../../index-DuaJiEiT.js';
+import '../../index-hWqCLhoS.js';
 import '../modal/regularModal/index.js';
-import '../icon/icons/ChevronDown.js';
-import '../icon/icons/ChevronUp.js';
-import '../cards/card/index.js';
-import '../icon/icons/ChevronRight.js';
-import '../../Collapsible-a355828b.js';
-import '../../index-a0ef2ab4.js';
+import '../../useMediaQuery-BlEUymPA.js';
 import './components/TableContents/TableContents.js';
-import '../../TableSection-e703f17f.js';
-import '../../useTableNavigation-2899712c.js';
+import '../../TableSection-CEhD4eoy.js';
+import './components/TableContents/Collapsible.js';
+import '../../useTableNavigation-CrxoXTVd.js';
 import './components/TableControls/TableControls.js';
 import '../icon/icons/ChevronLeft.js';
-import '../../useScrollSync-b2d28bed.js';
-import '../../index-69a46657.js';
+import '../../useScrollSync-C5UXYPIB.js';
+import '../../index-CNcEE5dn.js';
 
 var initialData = [
     {
@@ -48,6 +54,7 @@ var initialData = [
                 { text: 'Our plans' },
                 {
                     type: 'CTA',
+                    icon: 'https://placehold.co/24x24/orange/white',
                     title: 'Standard',
                     price: '€234',
                     buttonCaption: 'Get covered',
@@ -55,6 +62,7 @@ var initialData = [
                 },
                 {
                     type: 'CTA',
+                    icon: 'https://placehold.co/24x24/green/white',
                     title: 'Plus',
                     price: '€344',
                     buttonCaption: 'Get covered',
@@ -62,6 +70,7 @@ var initialData = [
                 },
                 {
                     type: 'CTA',
+                    icon: jsx(PlaneIcon, { size: 24, noMargin: true }),
                     title: 'Premium',
                     price: '€556',
                     buttonCaption: 'Get covered',
@@ -118,7 +127,7 @@ var initialData = [
             [
                 {
                     text: 'Regular vet visits & medication',
-                    description: 'Annual Only',
+                    description: 'Pflegepflichtversicherungrightno',
                     modalContent: 'Some stories about vets',
                 },
                 { text: 'No', description: 'Annual Only' },
@@ -126,8 +135,16 @@ var initialData = [
                 { text: '80%-100%' },
             ],
             [
-                { text: 'Operations', modalContent: 'Operations info' },
-                { checkmarkValue: true, modalContent: 'Operations info column 2' },
+                {
+                    text: 'Operations',
+                    modalContent: 'Operations info',
+                    modalTitle: 'Custom operations modal title',
+                },
+                {
+                    checkmarkValue: true,
+                    modalContent: 'Operations info column 2',
+                    modalTitle: 'Custom operations modal title column 2',
+                },
                 { checkmarkValue: false },
                 { checkmarkValue: true },
             ],
@@ -144,7 +161,7 @@ var initialData = [
     },
     {
         section: {
-            icon: jsx(DentalPlusIcon, { size: 24, noMargin: true }),
+            icon: jsx(DentalPlusIcon, { size: 20, noMargin: true }),
             title: 'Dental',
         },
         rows: [
@@ -156,7 +173,10 @@ var initialData = [
             ],
             [
                 { text: 'Operations', modalContent: 'info' },
-                { checkmarkValue: true, modalContent: 'Maybe' },
+                {
+                    text: 'This is a table cell with a lot of text',
+                    modalContent: 'Maybe',
+                },
                 { checkmarkValue: false },
                 { checkmarkValue: true },
             ],
@@ -166,12 +186,64 @@ var initialData = [
                 { rating: { type: 'zap', value: 3 } },
                 { rating: { type: 'star', value: 3 } },
             ],
+            [
+                { text: 'Rating', modalContent: 'info' },
+                { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+                { rating: { type: 'zap', value: 3 } },
+                { rating: { type: 'star', value: 3 } },
+            ],
+            [
+                { text: 'Rating', modalContent: 'info' },
+                { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+                { rating: { type: 'zap', value: 3 } },
+                { rating: { type: 'star', value: 3 } },
+            ],
+            [
+                { text: 'Rating', modalContent: 'info' },
+                { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+                { rating: { type: 'zap', value: 3 } },
+                { rating: { type: 'star', value: 3 } },
+            ],
+            [
+                { text: 'Rating', modalContent: 'info' },
+                { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+                { rating: { type: 'zap', value: 3 } },
+                { rating: { type: 'star', value: 3 } },
+            ],
+            [
+                { text: 'Rating', modalContent: 'info' },
+                { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+                { rating: { type: 'zap', value: 3 } },
+                { rating: { type: 'star', value: 3 } },
+            ],
+            [
+                { text: 'Rating', modalContent: 'info' },
+                { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+                { rating: { type: 'zap', value: 3 } },
+                { rating: { type: 'star', value: 3 } },
+            ],
+            [
+                { text: 'Rating', modalContent: 'info' },
+                { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+                { rating: { type: 'zap', value: 3 } },
+                { rating: { type: 'star', value: 3 } },
+            ],
+            [
+                {
+                    type: 'CARD',
+                    colSpan: 3,
+                    title: 'Dental add-on',
+                    href: 'https://example.com',
+                    icon: 'https://placehold.co/24x24/green/yellow',
+                    description: 'Get your dental cleanings and additional treatments covered for just 10.90€ a month.',
+                },
+            ],
         ],
     },
     {
         section: {
             title: 'Travel',
-            icon: jsx(PlaneIcon, { size: 24, noMargin: true }),
+            icon: 'https://placehold.co/24x24/red/yellow',
         },
         rows: [
             [
@@ -182,7 +254,11 @@ var initialData = [
             ],
             [
                 { text: 'Operations', modalContent: 'info' },
-                { checkmarkValue: true, modalContent: 'Maybe' },
+                {
+                    checkmarkValue: true,
+                    modalContent: 'Maybe',
+                    description: 'This is a table cell with a long subtitle',
+                },
                 { checkmarkValue: false },
                 { checkmarkValue: true },
             ],
@@ -199,7 +275,7 @@ var story = {
     title: 'JSX/Table',
     component: Table,
     argTypes: {
-        data: {
+        tableData: {
             subContent: 'This property allows to set the data of the Table component.',
         },
         title: {
@@ -208,6 +284,12 @@ var story = {
         collapsibleSections: {
             subContent: 'This property allows to collapse the sections of the table.',
         },
+        scrollOnOpen: {
+            subContent: 'When enabled, the page scrolls to the top of a newly expanded section.',
+        },
+        scrollTopOffset: {
+            subContent: 'Offset in pixels from the top of the viewport when scrolling to an expanded section.',
+        },
         hideDetails: {
             subContent: 'This property allows to hide the details of the table.',
         },
@@ -220,6 +302,15 @@ var story = {
         textOverrides: {
             subContent: 'This property allows to set custom text for the show and hide details buttons.',
         },
+        hideColumns: {
+            subContent: 'This property allows to hide defined columns by index.',
+        },
+        hideRows: {
+            subContent: 'This property allows to hide selected rows by index.',
+        },
+        modalContentRenderer: {
+            subContent: 'This property allows to render custom modal content.',
+        },
         onSelectionChanged: {
             subContent: 'This event is triggered when a selection is changed. It receives the index of the selection as an argument.',
             table: {
@@ -235,7 +326,9 @@ var story = {
     },
     args: {
         tableData: initialData,
-        collapsibleSections: false,
+        collapsibleSections: true,
+        scrollOnOpen: true,
+        scrollTopOffset: 0,
         hideDetails: false,
         stickyHeaderTopOffset: 0,
         title: 'Title of the table',
@@ -244,33 +337,37 @@ var story = {
             showDetails: 'Show details',
             hideDetails: 'Hide details',
         },
+        hideColumns: [],
+        hideRows: [],
+        hideTableNavigation: true,
     },
 };
-var TableStory = function (_a) {
-    var collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, hideDetails = _a.hideDetails, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, textOverrides = _a.textOverrides, title = _a.title;
-    var _b = useState(999), price = _b[0], setPrice = _b[1];
-    return (jsxs("div", { children: [jsxs("div", { className: "d-flex fd-column p24 mb80 gap16 wmx5", children: [jsx("label", { htmlFor: "", children: "Change price to see replacement in action: " }), jsx(Input, { id: "#stuff", type: "text", onChange: function (e) { return setPrice(Number(e.target.value)); }, value: price })] }), jsx(Table, { cellReplacements: {
-                    '#1': {
-                        type: 'CTA',
-                        title: 'Replaced!',
-                        price: "\u20AC".concat(price),
-                        buttonCaption: 'I got replaced',
-                        href: 'http://example.com',
-                    },
-                    '#2': {
-                        type: 'BUTTON',
-                        buttonCaption: 'I got replaced too',
-                    },
-                    '#3': {
-                        description: 'per year',
-                    },
-                }, collapsibleSections: collapsibleSections, tableData: tableData, hideDetails: hideDetails, stickyHeaderTopOffset: stickyHeaderTopOffset, textOverrides: textOverrides, title: title })] }));
+var TableStory = {
+    render: function (_a) {
+        var collapsibleSections = _a.collapsibleSections, scrollOnOpen = _a.scrollOnOpen, scrollTopOffset = _a.scrollTopOffset, tableData = _a.tableData, hideColumns = _a.hideColumns, hideDetails = _a.hideDetails, hideRows = _a.hideRows, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, textOverrides = _a.textOverrides, title = _a.title, activeSection = _a.activeSection, hideTableNavigation = _a.hideTableNavigation;
+        var _b = useState(999), price = _b[0], setPrice = _b[1];
+        return (jsxs("div", { children: [jsxs("div", { className: "d-flex fd-column p24 mb80 gap16 wmx5", children: [jsx("label", { htmlFor: "", children: "Change price to see replacement in action: " }), jsx(Input, { id: "#stuff", type: "text", onChange: function (e) { return setPrice(Number(e.target.value)); }, value: price })] }), jsx(Table, { cellReplacements: {
+                        '#1': {
+                            type: 'CTA',
+                            title: 'Replaced!',
+                            price: "\u20AC".concat(price),
+                            buttonCaption: 'I got replaced',
+                            href: 'http://example.com',
+                        },
+                        '#2': {
+                            type: 'BUTTON',
+                            buttonCaption: 'I got replaced too',
+                        },
+                        '#3': {
+                            description: 'per year',
+                        },
+                    }, collapsibleSections: collapsibleSections, scrollOnOpen: scrollOnOpen, scrollTopOffset: scrollTopOffset, tableData: tableData, hideColumns: hideColumns, hideDetails: hideDetails, hideRows: hideRows, stickyHeaderTopOffset: stickyHeaderTopOffset, textOverrides: textOverrides, title: title, activeSection: activeSection, hideTableNavigation: hideTableNavigation })] }));
+    },
+    name: 'Table',
 };
 var TableDataType = function () {
     return (jsx("pre", { children: "\ntype TableData = {\n  section?: \n    title?: string;\n    icon?: ReactNode;\n  };\n  rows: {\n    align?: 'center' | 'left' | 'right';\n    checkmarkValue?: boolean;\n    text?: ReactNode;\n    modalContent?: ReactNode;\n    subContent?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    openModal?: (modalContent: ReactNode) => void;\n  }[][];\n}[];\n      " }));
 };
-TableStory.storyName = 'Table';
 
-export default story;
-export { TableDataType, TableStory };
+export { TableDataType, TableStory, story as default };
 //# sourceMappingURL=Table.stories.js.map