@popsure/dirty-swan 0.60.0 → 0.61.0

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

@@ -3,7 +3,7 @@ import React__default from 'react';
 import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
 import { c as classNames } from '../../../../index-6ea95111.js';
 
-var css_248z = ".style-module_header__32rw- {\n  position: relative;\n}\n.style-module_header__32rw- > div {\n  width: var(--tableWidth);\n  max-width: 100vw;\n}\n.style-module_header__32rw- > div:nth-child(n+3) {\n  margin: 0;\n}\n@media (min-width: 34rem) {\n  .style-module_header__32rw- > div {\n    width: 211px;\n    width: var(--cellWidth, 211px);\n    max-width: var(--tableWidth);\n    scroll-snap-align: unset;\n  }\n}\n\n.style-module_cell__1NoZ6 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  scroll-snap-align: end;\n  line-height: 24px;\n  padding: 16px 8px;\n  color: #26262e;\n  width: 50vw;\n  max-width: calc(var(--tableWidth) / 2);\n}\n.style-module_cell__1NoZ6:first-child {\n  padding: 16px 8px 16px 16px;\n}\n.style-module_cell__1NoZ6:first-child {\n  background-color: white;\n  /** Add scroll snap to every column except the first one */\n  scroll-snap-align: unset;\n}\n.style-module_cell__1NoZ6:nth-child(n+3) {\n  margin-left: 50vw;\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6:nth-child(n+3) {\n    margin-left: unset;\n  }\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6 {\n    flex: 1 0 211px;\n    flex: 1 0 var(--cellWidth, 211px);\n    width: 211px;\n    width: var(--cellWidth, 211px);\n    padding: 24px 8px;\n  }\n  .style-module_cell__1NoZ6:first-child {\n    padding: 24px 8px 24px 24px;\n  }\n}\n\nh4.style-module_cell__1NoZ6 {\n  max-width: min(212px, calc(var(--tableWidth) / 2));\n  max-width: min(var(--firstColumnWidth, 212px), calc(var(--tableWidth) / 2));\n}\n\n.style-module_title__1xYvu {\n  position: relative;\n  color: #26262e;\n  display: none;\n  line-height: 38px;\n}\n@media (min-width: 34rem) {\n  .style-module_title__1xYvu {\n    display: flex;\n  }\n}\n\n.style-module_sticky__2T5jm {\n  position: sticky;\n  justify-content: flex-start;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  width: 50vw;\n}\n@media (min-width: 34rem) {\n  .style-module_sticky__2T5jm {\n    border-right: 1px solid #f9f9fd;\n    flex: 1 0 288px;\n  }\n}\n\nh4.style-module_addon__CPf60 {\n  border-right: none;\n  max-width: calc(100vw - 64px);\n  width: 100%;\n}\n@media (min-width: 64rem) {\n  h4.style-module_addon__CPf60 {\n    max-width: 976px;\n  }\n}";
+var css_248z = ".style-module_header__32rw- {\n  position: relative;\n}\n.style-module_header__32rw- > div {\n  width: var(--tableWidth);\n  max-width: 100vw;\n}\n.style-module_header__32rw- > div:nth-child(n+3) {\n  margin: 0;\n}\n@media (min-width: 34rem) {\n  .style-module_header__32rw- > div {\n    width: 211px;\n    width: var(--cellWidth, 211px);\n    max-width: var(--tableWidth);\n    scroll-snap-align: unset;\n  }\n}\n\n.style-module_cell__1NoZ6 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  scroll-snap-align: end;\n  line-height: 24px;\n  padding: 16px 8px;\n  color: #26262e;\n  width: 50vw;\n  max-width: calc(var(--tableWidth) / 2);\n}\n.style-module_cell__1NoZ6:first-child {\n  padding: 16px 8px 16px 0;\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6:first-child {\n    padding: 16px 8px 16px 16px;\n  }\n}\n.style-module_cell__1NoZ6:first-child {\n  background-color: white;\n  /** Add scroll snap to every column except the first one */\n  scroll-snap-align: unset;\n}\n.style-module_cell__1NoZ6:nth-child(n+3) {\n  margin-left: 50vw;\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6:nth-child(n+3) {\n    margin-left: unset;\n  }\n}\n@media (min-width: 34rem) {\n  .style-module_cell__1NoZ6 {\n    flex: 1 0 211px;\n    flex: 1 0 var(--cellWidth, 211px);\n    width: 211px;\n    width: var(--cellWidth, 211px);\n    padding: 24px 8px;\n  }\n  .style-module_cell__1NoZ6:first-child {\n    padding: 24px 8px 24px 24px;\n  }\n}\n\nh4.style-module_cell__1NoZ6 {\n  max-width: min(212px, calc(var(--tableWidth) / 2));\n  max-width: min(var(--firstColumnWidth, 212px), calc(var(--tableWidth) / 2));\n}\n\n.style-module_title__1xYvu {\n  position: relative;\n  color: #26262e;\n  display: none;\n  line-height: 38px;\n}\n@media (min-width: 34rem) {\n  .style-module_title__1xYvu {\n    display: flex;\n  }\n}\n\n.style-module_sticky__2T5jm {\n  position: sticky;\n  justify-content: flex-start;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  width: 50vw;\n}\n@media (min-width: 34rem) {\n  .style-module_sticky__2T5jm {\n    border-right: 1px solid #f9f9fd;\n    flex: 1 0 288px;\n  }\n}\n\nh4.style-module_addon__CPf60 {\n  border-right: none;\n  max-width: calc(100vw - 64px);\n  width: 100%;\n}\n@media (min-width: 64rem) {\n  h4.style-module_addon__CPf60 {\n    max-width: 976px;\n  }\n}";
 var styles = {"header":"style-module_header__32rw-","cell":"style-module_cell__1NoZ6","title":"style-module_title__1xYvu","sticky":"style-module_sticky__2T5jm","addon":"style-module_addon__CPf60"};
 styleInject(css_248z);
 

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

@@ -3,7 +3,7 @@ import { c as classNames } from '../../../../index-6ea95111.js';
 import ArrowIcon from './Arrow.js';
 import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
 
-var css_248z = ".style-module_container__3BxOi {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  padding: 0 16px;\n  justify-content: space-between;\n  align-items: stretch;\n  display: flex;\n}\n@media (min-width: 34rem) {\n  .style-module_container__3BxOi {\n    display: none;\n  }\n}\n\n.style-module_next__3yJsi {\n  transform: rotate(-90deg);\n}\n\n.style-module_prev__3rIR_ {\n  transform: rotate(90deg);\n}\n\n.style-module_arrow__1tlbD {\n  width: 32px;\n  height: 56px;\n  z-index: 3;\n  padding: 0;\n  border-radius: 8px;\n  background-color: #f7f7fd;\n  justify-content: center;\n  align-items: center;\n  stroke: #b8b8c0;\n}\n.style-module_arrow__1tlbD:hover, .style-module_arrow__1tlbD:focus {\n  background-color: #f7f7fd;\n  cursor: not-allowed;\n}\n\n.style-module_active__2kklB {\n  stroke: #26262e;\n}\n.style-module_active__2kklB:hover, .style-module_active__2kklB:focus {\n  background-color: #f7f7fd;\n  cursor: pointer;\n}\n\n.style-module_noPointerEvents__21KuB {\n  visibility: hidden;\n  pointer-events: none;\n}";
+var css_248z = ".style-module_container__3BxOi {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  padding: 0 8px;\n  justify-content: space-between;\n  align-items: stretch;\n  display: flex;\n}\n@media (min-width: 34rem) {\n  .style-module_container__3BxOi {\n    display: none;\n  }\n}\n\n.style-module_next__3yJsi {\n  transform: rotate(-90deg);\n}\n\n.style-module_prev__3rIR_ {\n  transform: rotate(90deg);\n}\n\n.style-module_arrow__1tlbD {\n  width: 32px;\n  height: 56px;\n  z-index: 3;\n  padding: 0;\n  border-radius: 8px;\n  background-color: #f7f7fd;\n  justify-content: center;\n  align-items: center;\n  stroke: #b8b8c0;\n}\n.style-module_arrow__1tlbD:hover, .style-module_arrow__1tlbD:focus {\n  background-color: #f7f7fd;\n  cursor: not-allowed;\n}\n\n.style-module_active__2kklB {\n  stroke: #26262e;\n}\n.style-module_active__2kklB:hover, .style-module_active__2kklB:focus {\n  background-color: #f7f7fd;\n  cursor: pointer;\n}\n\n.style-module_noPointerEvents__21KuB {\n  visibility: hidden;\n  pointer-events: none;\n}";
 var styles = {"container":"style-module_container__3BxOi","next":"style-module_next__3yJsi","prev":"style-module_prev__3rIR_","arrow":"style-module_arrow__1tlbD","active":"style-module_active__2kklB","noPointerEvents":"style-module_noPointerEvents__21KuB"};
 styleInject(css_248z);
 

package/dist/esm/components/input/autoSuggestInput/index.js

@@ -2129,7 +2129,7 @@ _defineProperty(Autosuggest, "defaultProps", {
 
 var dist = Autosuggest["default"];
 
-var css_248z = "@keyframes style-module_appearInAnimation__yvH4A {\n  from {\n    opacity: 0;\n    transform: translateY(16px);\n  }\n  to {\n    opacity: 1;\n  }\n}\n.style-module_suggestionsContainer__2yVXd {\n  position: relative;\n}\n\n.style-module_suggestionsList__11o48 {\n  position: absolute;\n  z-index: 100;\n  overflow: hidden;\n  border-radius: 8px;\n  border: 1px solid var(--ds-purple-600);\n  width: 100%;\n  height: fit-content;\n  max-height: 216px;\n  overflow-y: scroll;\n  background-color: white;\n  animation-name: style-module_appearInAnimation__yvH4A;\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  transform: translateY(8px);\n}\n\n.style-module_suggestion-option__z7pqG {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  position: relative;\n  margin: 0;\n  padding: 12px 16px;\n  color: var(--ds-neutral-900);\n  min-height: 48px;\n  line-height: 24px;\n}\n\n.style-module_suggestion-img__1TfiA {\n  width: 32px;\n  height: 24px;\n  border-radius: 2px;\n}\n\n.style-module_suggestion-text__7wL31 {\n  flex: 1;\n}\n\n.style-module_nowrap__uks9c {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.style-module_suggestionHighlighted__2zu5h {\n  background-color: var(--ds-purple-300);\n}";
+var css_248z = "@keyframes style-module_appearInAnimation__yvH4A {\n  from {\n    opacity: 0;\n    transform: translateY(16px);\n  }\n  to {\n    opacity: 1;\n  }\n}\n.style-module_suggestionsContainer__2yVXd {\n  position: relative;\n}\n\n.style-module_suggestionsList__11o48 {\n  position: absolute;\n  z-index: 100;\n  overflow: hidden;\n  border-radius: 8px;\n  border: 1px solid var(--ds-neutral-600);\n  width: 100%;\n  height: fit-content;\n  max-height: 216px;\n  overflow-y: scroll;\n  background-color: white;\n  animation-name: style-module_appearInAnimation__yvH4A;\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  transform: translateY(8px);\n}\n\n.style-module_suggestion-option__z7pqG {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  position: relative;\n  margin: 0;\n  padding: 12px 16px;\n  color: var(--ds-neutral-900);\n  min-height: 48px;\n  line-height: 24px;\n}\n\n.style-module_suggestion-img__1TfiA {\n  width: 32px;\n  height: 24px;\n  border-radius: 2px;\n}\n\n.style-module_suggestion-text__7wL31 {\n  flex: 1;\n}\n\n.style-module_nowrap__uks9c {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.style-module_suggestionHighlighted__2zu5h {\n  background-color: var(--ds-orange-100);\n}";
 var styles = {"suggestionsContainer":"style-module_suggestionsContainer__2yVXd","suggestionsList":"style-module_suggestionsList__11o48","appearInAnimation":"style-module_appearInAnimation__yvH4A","suggestion-option":"style-module_suggestion-option__z7pqG","suggestion-img":"style-module_suggestion-img__1TfiA","suggestion-text":"style-module_suggestion-text__7wL31","nowrap":"style-module_nowrap__uks9c","suggestionHighlighted":"style-module_suggestionHighlighted__2zu5h"};
 styleInject(css_248z);
 

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

@@ -2,7 +2,7 @@ import { a as __assign } from '../../tslib.es6-a39f91fc.js';
 import { jsxs, Fragment, jsx } 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 { useState, useRef, useCallback, useEffect } from 'react';
 import ChevronDownIcon from '../icon/icons/ChevronDown.js';
 import ChevronUpIcon from '../icon/icons/ChevronUp.js';
 import { Card } from '../cards/card/index.js';
@@ -10,9 +10,9 @@ import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
 import { u as useMediaQuery } from '../../useMediaQuery-1a3a2432.js';
 import { TableContents } from './components/TableContents/TableContents.js';
 import { c as classNames } from '../../index-6ea95111.js';
-import { u as useTableNavigation } from '../../useTableNavigation-f929fbc9.js';
+import { u as useTableNavigation } from '../../useTableNavigation-17d5cd3c.js';
 import { TableControls } from './components/TableControls/TableControls.js';
-import { i as isBaseCell, T as TableSection } from '../../TableSection-65e88f87.js';
+import { i as isBaseCell, T as TableSection } from '../../TableSection-442941de.js';
 import { u as useScrollSync } from '../../useScrollSync-b2d28bed.js';
 import './components/TableCell/BaseCell/BaseCell.js';
 import '../icon/icons/CheckThick.js';
@@ -50,7 +50,7 @@ var defaultTextOverrides = {
 };
 var Table = function (_a) {
     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, _m = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _m === void 0 ? 0 : _m, tableData = _a.tableData, definedTextOverrides = _a.textOverrides, title = _a.title;
+    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, _m = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _m === void 0 ? 0 : _m, tableData = _a.tableData, definedTextOverrides = _a.textOverrides, title = _a.title, externalActiveSection = _a.activeSection;
     var textOverrides = __assign(__assign({}, defaultTextOverrides), definedTextOverrides);
     var isMobile = useMediaQuery('BELOW_MOBILE');
     var _o = useState(null), infoModalData = _o[0], setInfoModalData = _o[1];
@@ -63,7 +63,7 @@ var Table = function (_a) {
         enabled: isMobile,
         containerRef: containerRef,
         onSelectionChanged: onSelectionChanged,
-    }), activeSection = _q.activeSection, navigateTable = _q.navigateTable;
+    }), activeSection = _q.activeSection, navigateTable = _q.navigateTable, setActiveSection = _q.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 &&
@@ -75,6 +75,11 @@ var Table = function (_a) {
         onModalOpen === null || onModalOpen === void 0 ? void 0 : onModalOpen({ body: body, title: title });
         setInfoModalData({ body: body, title: title });
     }, []);
+    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 }))), jsx(TableControls, { activeSection: activeSection, columnsLength: columnsLength, navigateTable: navigateTable, stickyHeaderTopOffset: stickyHeaderTopOffset, children: jsx(TableCell, __assign({}, (isBaseCell(currentActiveSection)
                             ? {
                                 openModal: function (body) {

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  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  stickyHeaderTopOffset?: number;\n  tableData: TableData;\n  textOverrides?: TextOverrides;\n  title: string;\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  stickyHeaderTopOffset = 0,\n  tableData,\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 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  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          <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        <div\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          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","_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\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  stickyHeaderTopOffset?: number;\n  tableData: TableData;\n  textOverrides?: TextOverrides;\n  title: string;\n  activeSection?: number;\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  stickyHeaderTopOffset = 0,\n  tableData,\n  textOverrides: definedTextOverrides,\n  title,\n  activeSection: externalActiveSection\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, setActiveSection } = useTableNavigation({\n    enabled: isMobile,\n    containerRef,\n    onSelectionChanged,\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          <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        <div\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          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","_jsx"],"mappings":"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"}

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

@@ -37,9 +37,9 @@ import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
 import '../../useMediaQuery-1a3a2432.js';
 import './components/TableContents/TableContents.js';
-import '../../TableSection-65e88f87.js';
+import '../../TableSection-442941de.js';
 import './components/TableContents/Collapsible.js';
-import '../../useTableNavigation-f929fbc9.js';
+import '../../useTableNavigation-17d5cd3c.js';
 import './components/TableControls/TableControls.js';
 import '../icon/icons/ChevronLeft.js';
 import '../../useScrollSync-b2d28bed.js';
@@ -289,7 +289,7 @@ var story = {
     },
 };
 var TableStory = function (_a) {
-    var collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, hideColumns = _a.hideColumns, hideDetails = _a.hideDetails, hideRows = _a.hideRows, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, textOverrides = _a.textOverrides, title = _a.title;
+    var collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, hideColumns = _a.hideColumns, hideDetails = _a.hideDetails, hideRows = _a.hideRows, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, textOverrides = _a.textOverrides, title = _a.title, activeSection = _a.activeSection;
     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': {
@@ -306,7 +306,7 @@ var TableStory = function (_a) {
                     '#3': {
                         description: 'per year',
                     },
-                }, collapsibleSections: collapsibleSections, tableData: tableData, hideColumns: hideColumns, hideDetails: hideDetails, hideRows: hideRows, stickyHeaderTopOffset: stickyHeaderTopOffset, textOverrides: textOverrides, title: title })] }));
+                }, collapsibleSections: collapsibleSections, tableData: tableData, hideColumns: hideColumns, hideDetails: hideDetails, hideRows: hideRows, stickyHeaderTopOffset: stickyHeaderTopOffset, textOverrides: textOverrides, title: title, activeSection: activeSection })] }));
 };
 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      " }));

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

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.js","sources":["../../../../../src/lib/components/table/Table.stories.tsx"],"sourcesContent":["import { Table, TableProps } from './Table';\nimport { DentalPlusIcon, PlaneIcon } from '../icon';\nimport { TableData } from './types';\nimport { useState } from 'react';\nimport { Input } from '../input';\n\nconst initialData: TableData = [\n  {\n    rows: [\n      [\n        { text: 'Our plans' },\n        {\n          type: 'CTA',\n          icon: 'https://placehold.co/24x24/orange/white',\n          title: 'Standard',\n          price: '€234',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          icon: 'https://placehold.co/24x24/green/white',\n          title: 'Plus',\n          price: '€344',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          icon: <PlaneIcon size={24} noMargin />,\n          title: 'Premium',\n          price: '€556',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n      ],\n      [\n        { text: 'Select a plan' },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Standard',\n          price: '€234',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Plus',\n          price: '€344',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Premium',\n          price: '€556',\n          onClick: () => {},\n        },\n      ],\n      [\n        {\n          text: 'Your contribution',\n        },\n        {\n          cellId: '#1',\n          text: '€210',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n        {\n          cellId: '#2',\n          text: '€275',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n        {\n          cellId: '#3',\n          text: '€310',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n      ],\n      [\n        {\n          text: 'Regular vet visits & medication',\n          description: 'Pflegepflichtversicherungrightno',\n          modalContent: 'Some stories about vets',\n        },\n        { text: 'No', description: 'Annual Only' },\n        { text: '50%' },\n        { text: '80%-100%' },\n      ],\n      [\n        { text: 'Operations',\n          modalContent: 'Operations info',\n          modalTitle: 'Custom operations modal title'\n         },\n        { \n          checkmarkValue: true,\n          modalContent: 'Operations info column 2',\n          modalTitle: 'Custom operations modal title column 2'\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'Rating info' },\n        { rating: { type: 'zap', value: 1 } },\n        {\n          rating: { type: 'zap', value: 3 },\n          modalContent: 'Rating info column 3',\n        },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n  {\n    section: {\n      icon: <DentalPlusIcon size={20} noMargin />,\n      title: 'Dental',\n    },\n    rows: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No' },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'info' },\n        {\n          text: 'This is a table cell with a lot of text',\n          modalContent: 'Maybe',\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'info' },\n        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n      [\n        {\n          type: 'CARD',\n          colSpan: 3,\n          title: 'Dental add-on',\n          href: 'https://example.com',\n          icon: 'https://placehold.co/24x24/green/yellow',\n          description:\n            'Get your dental cleanings and additional treatments covered for just 10.90€ a month.',\n        },\n      ],\n    ],\n  },\n  {\n    section: {\n      title: 'Travel',\n      icon: 'https://placehold.co/24x24/red/yellow',\n    },\n    rows: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No', checkmarkValue: false },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'info' },\n        {\n          checkmarkValue: true,\n          modalContent: 'Maybe',\n          description: 'This is a table cell with a long subtitle',\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'info' },\n        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n];\n\nconst story = {\n  title: 'JSX/Table',\n  component: Table,\n  argTypes: {\n    tableData: {\n      subContent:\n        'This property allows to set the data of the Table component.',\n    },\n    title: {\n      subContent:\n        'This property allows to add a title to the Table component for accessibility purposes.',\n    },\n    collapsibleSections: {\n      subContent: 'This property allows to collapse the sections of the table.',\n    },\n    hideDetails: {\n      subContent: 'This property allows to hide the details of the table.',\n    },\n    stickyHeaderTopOffset: {\n      subContent:\n        'This property allows to set the offset of the sticky header.',\n    },\n    className: {\n      subContent:\n        'This property allows to set a custom class to the Table component.',\n    },\n    textOverrides: {\n      subContent:\n        'This property allows to set custom text for the show and hide details buttons.',\n    },\n    hideColumns: {\n      subContent: 'This property allows to hide defined columns by index.',\n    },\n    hideRows: {\n      subContent: 'This property allows to hide selected rows by index.',\n    },\n    modalContentRenderer: {\n      subContent: 'This property allows to render custom modal content.',\n    },\n    onSelectionChanged: {\n      subContent:\n        'This event is triggered when a selection is changed. It receives the index of the selection as an argument.',\n      table: {\n        category: 'Events',\n      },\n    },\n    onModalOpen: {\n      subContent:\n        'This event is triggered when a modal is opened. It receives the title and body of the modal as arguments.',\n      table: {\n        category: 'Events',\n      },\n    },\n  },\n  args: {\n    tableData: initialData,\n    collapsibleSections: false,\n    hideDetails: false,\n    stickyHeaderTopOffset: 0,\n    title: 'Title of the table',\n    className: '',\n    textOverrides: {\n      showDetails: 'Show details',\n      hideDetails: 'Hide details',\n    },\n    hideColumns: [],\n    hideRows: [],\n  },\n};\n\nexport const TableStory = ({\n  collapsibleSections,\n  tableData,\n  hideColumns,\n  hideDetails,\n  hideRows,\n  stickyHeaderTopOffset,\n  textOverrides,\n  title,\n}: TableProps) => {\n  const [price, setPrice] = useState(999);\n  return (\n    <div>\n      <div className=\"d-flex fd-column p24 mb80 gap16 wmx5\">\n        <label htmlFor=\"\">Change price to see replacement in action: </label>\n        <Input\n          id=\"#stuff\"\n          type=\"text\"\n          onChange={(e) => setPrice(Number(e.target.value))}\n          value={price}\n        />\n      </div>\n\n      <Table\n        cellReplacements={{\n          '#1': {\n            type: 'CTA',\n            title: 'Replaced!',\n            price: `€${price}`,\n            buttonCaption: 'I got replaced',\n            href: 'http://example.com',\n          },\n          '#2': {\n            type: 'BUTTON',\n            buttonCaption: 'I got replaced too',\n          },\n          '#3': {\n            description: 'per year',\n          },\n        }}\n        collapsibleSections={collapsibleSections}\n        tableData={tableData}\n        hideColumns={hideColumns}\n        hideDetails={hideDetails}\n        hideRows={hideRows}\n        stickyHeaderTopOffset={stickyHeaderTopOffset}\n        textOverrides={textOverrides}\n        title={title}\n      />\n    </div>\n  );\n};\n\nexport const TableDataType = () => {\n  return (\n    <pre>\n      {`\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      `}\n    </pre>\n  );\n};\n\nTableStory.storyName = 'Table';\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAM,WAAW,GAAc;IAC7B;QACE,IAAI,EAAE;YACJ;gBACE,EAAE,IAAI,EAAE,WAAW,EAAE;gBACrB;oBACE,IAAI,EAAE,KAAK;oBACX,IAAI,EAAE,yCAAyC;oBAC/C,KAAK,EAAE,UAAU;oBACjB,KAAK,EAAE,MAAM;oBACb,aAAa,EAAE,aAAa;oBAC5B,IAAI,EAAE,oBAAoB;iBAC3B;gBACD;oBACE,IAAI,EAAE,KAAK;oBACX,IAAI,EAAE,wCAAwC;oBAC9C,KAAK,EAAE,MAAM;oBACb,KAAK,EAAE,MAAM;oBACb,aAAa,EAAE,aAAa;oBAC5B,IAAI,EAAE,oBAAoB;iBAC3B;gBACD;oBACE,IAAI,EAAE,KAAK;oBACX,IAAI,EAAEA,IAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,SAAG;oBACtC,KAAK,EAAE,SAAS;oBAChB,KAAK,EAAE,MAAM;oBACb,aAAa,EAAE,aAAa;oBAC5B,IAAI,EAAE,oBAAoB;iBAC3B;aACF;YACD;gBACE,EAAE,IAAI,EAAE,eAAe,EAAE;gBACzB;oBACE,IAAI,EAAE,QAAQ;oBACd,aAAa,EAAE,UAAU;oBACzB,KAAK,EAAE,MAAM;oBACb,OAAO,EAAE,eAAQ;iBAClB;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,aAAa,EAAE,MAAM;oBACrB,KAAK,EAAE,MAAM;oBACb,OAAO,EAAE,eAAQ;iBAClB;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,aAAa,EAAE,SAAS;oBACxB,KAAK,EAAE,MAAM;oBACb,OAAO,EAAE,eAAQ;iBAClB;aACF;YACD;gBACE;oBACE,IAAI,EAAE,mBAAmB;iBAC1B;gBACD;oBACE,MAAM,EAAE,IAAI;oBACZ,IAAI,EAAE,MAAM;oBACZ,WAAW,EAAE,WAAW;oBACxB,WAAW,EAAE,OAAO;oBACpB,YAAY,EAAE,YAAY;iBAC3B;gBACD;oBACE,MAAM,EAAE,IAAI;oBACZ,IAAI,EAAE,MAAM;oBACZ,WAAW,EAAE,WAAW;oBACxB,WAAW,EAAE,OAAO;oBACpB,YAAY,EAAE,YAAY;iBAC3B;gBACD;oBACE,MAAM,EAAE,IAAI;oBACZ,IAAI,EAAE,MAAM;oBACZ,WAAW,EAAE,WAAW;oBACxB,WAAW,EAAE,OAAO;oBACpB,YAAY,EAAE,YAAY;iBAC3B;aACF;YACD;gBACE;oBACE,IAAI,EAAE,iCAAiC;oBACvC,WAAW,EAAE,kCAAkC;oBAC/C,YAAY,EAAE,yBAAyB;iBACxC;gBACD,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,aAAa,EAAE;gBAC1C,EAAE,IAAI,EAAE,KAAK,EAAE;gBACf,EAAE,IAAI,EAAE,UAAU,EAAE;aACrB;YACD;gBACE,EAAE,IAAI,EAAE,YAAY;oBAClB,YAAY,EAAE,iBAAiB;oBAC/B,UAAU,EAAE,+BAA+B;iBAC3C;gBACF;oBACE,cAAc,EAAE,IAAI;oBACpB,YAAY,EAAE,0BAA0B;oBACxC,UAAU,EAAE,wCAAwC;iBACrD;gBACD,EAAE,cAAc,EAAE,KAAK,EAAE;gBACzB,EAAE,cAAc,EAAE,IAAI,EAAE;aACzB;YACD;gBACE,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE;gBAC/C,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;gBACrC;oBACE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE;oBACjC,YAAY,EAAE,sBAAsB;iBACrC;gBACD,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;aACvC;SACF;KACF;IACD;QACE,OAAO,EAAE;YACP,IAAI,EAAEA,IAAC,cAAc,IAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,SAAG;YAC3C,KAAK,EAAE,QAAQ;SAChB;QACD,IAAI,EAAE;YACJ;gBACE,EAAE,IAAI,EAAE,iCAAiC,EAAE;gBAC3C,EAAE,IAAI,EAAE,IAAI,EAAE;gBACd,EAAE,IAAI,EAAE,KAAK,EAAE;gBACf,EAAE,IAAI,EAAE,KAAK,EAAE;aAChB;YACD;gBACE,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE;gBAC5C;oBACE,IAAI,EAAE,yCAAyC;oBAC/C,YAAY,EAAE,OAAO;iBACtB;gBACD,EAAE,cAAc,EAAE,KAAK,EAAE;gBACzB,EAAE,cAAc,EAAE,IAAI,EAAE;aACzB;YACD;gBACE,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE;gBACxC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE;gBAC5D,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;gBACrC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;aACvC;YACD;gBACE;oBACE,IAAI,EAAE,MAAM;oBACZ,OAAO,EAAE,CAAC;oBACV,KAAK,EAAE,eAAe;oBACtB,IAAI,EAAE,qBAAqB;oBAC3B,IAAI,EAAE,yCAAyC;oBAC/C,WAAW,EACT,sFAAsF;iBACzF;aACF;SACF;KACF;IACD;QACE,OAAO,EAAE;YACP,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,uCAAuC;SAC9C;QACD,IAAI,EAAE;YACJ;gBACE,EAAE,IAAI,EAAE,iCAAiC,EAAE;gBAC3C,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE;gBACrC,EAAE,IAAI,EAAE,KAAK,EAAE;gBACf,EAAE,IAAI,EAAE,KAAK,EAAE;aAChB;YACD;gBACE,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE;gBAC5C;oBACE,cAAc,EAAE,IAAI;oBACpB,YAAY,EAAE,OAAO;oBACrB,WAAW,EAAE,2CAA2C;iBACzD;gBACD,EAAE,cAAc,EAAE,KAAK,EAAE;gBACzB,EAAE,cAAc,EAAE,IAAI,EAAE;aACzB;YACD;gBACE,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE;gBACxC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE;gBAC5D,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;gBACrC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;aACvC;SACF;KACF;CACF,CAAC;IAEI,KAAK,GAAG;IACZ,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,UAAU,EACR,8DAA8D;SACjE;QACD,KAAK,EAAE;YACL,UAAU,EACR,wFAAwF;SAC3F;QACD,mBAAmB,EAAE;YACnB,UAAU,EAAE,6DAA6D;SAC1E;QACD,WAAW,EAAE;YACX,UAAU,EAAE,wDAAwD;SACrE;QACD,qBAAqB,EAAE;YACrB,UAAU,EACR,8DAA8D;SACjE;QACD,SAAS,EAAE;YACT,UAAU,EACR,oEAAoE;SACvE;QACD,aAAa,EAAE;YACb,UAAU,EACR,gFAAgF;SACnF;QACD,WAAW,EAAE;YACX,UAAU,EAAE,wDAAwD;SACrE;QACD,QAAQ,EAAE;YACR,UAAU,EAAE,sDAAsD;SACnE;QACD,oBAAoB,EAAE;YACpB,UAAU,EAAE,sDAAsD;SACnE;QACD,kBAAkB,EAAE;YAClB,UAAU,EACR,6GAA6G;YAC/G,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;aACnB;SACF;QACD,WAAW,EAAE;YACX,UAAU,EACR,2GAA2G;YAC7G,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;aACnB;SACF;KACF;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,WAAW;QACtB,mBAAmB,EAAE,KAAK;QAC1B,WAAW,EAAE,KAAK;QAClB,qBAAqB,EAAE,CAAC;QACxB,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE,EAAE;QACb,aAAa,EAAE;YACb,WAAW,EAAE,cAAc;YAC3B,WAAW,EAAE,cAAc;SAC5B;QACD,WAAW,EAAE,EAAE;QACf,QAAQ,EAAE,EAAE;KACb;EACD;IAEW,UAAU,GAAG,UAAC,EASd;QARX,mBAAmB,yBAAA,EACnB,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,qBAAqB,2BAAA,EACrB,aAAa,mBAAA,EACb,KAAK,WAAA;IAEC,IAAA,KAAoB,QAAQ,CAAC,GAAG,CAAC,EAAhC,KAAK,QAAA,EAAE,QAAQ,QAAiB,CAAC;IACxC,QACEC,yBACEA,cAAK,SAAS,EAAC,sCAAsC,aACnDD,eAAO,OAAO,EAAC,EAAE,4DAAoD,EACrEA,IAAC,KAAK,IACJ,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAA,EACjD,KAAK,EAAE,KAAK,GACZ,IACE,EAENA,IAAC,KAAK,IACJ,gBAAgB,EAAE;oBAChB,IAAI,EAAE;wBACJ,IAAI,EAAE,KAAK;wBACX,KAAK,EAAE,WAAW;wBAClB,KAAK,EAAE,gBAAI,KAAK,CAAE;wBAClB,aAAa,EAAE,gBAAgB;wBAC/B,IAAI,EAAE,oBAAoB;qBAC3B;oBACD,IAAI,EAAE;wBACJ,IAAI,EAAE,QAAQ;wBACd,aAAa,EAAE,oBAAoB;qBACpC;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,UAAU;qBACxB;iBACF,EACD,mBAAmB,EAAE,mBAAmB,EACxC,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,qBAAqB,EAC5C,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,GACZ,IACE,EACN;AACJ,EAAE;IAEW,aAAa,GAAG;IAC3B,QACEA,uBACG,mZAmBA,GACG,EACN;AACJ,EAAE;AAEF,UAAU,CAAC,SAAS,GAAG,OAAO;;;;;"}
+{"version":3,"file":"Table.stories.js","sources":["../../../../../src/lib/components/table/Table.stories.tsx"],"sourcesContent":["import { Table, TableProps } from './Table';\nimport { DentalPlusIcon, PlaneIcon } from '../icon';\nimport { TableData } from './types';\nimport { useState } from 'react';\nimport { Input } from '../input';\n\nconst initialData: TableData = [\n  {\n    rows: [\n      [\n        { text: 'Our plans' },\n        {\n          type: 'CTA',\n          icon: 'https://placehold.co/24x24/orange/white',\n          title: 'Standard',\n          price: '€234',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          icon: 'https://placehold.co/24x24/green/white',\n          title: 'Plus',\n          price: '€344',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          icon: <PlaneIcon size={24} noMargin />,\n          title: 'Premium',\n          price: '€556',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n      ],\n      [\n        { text: 'Select a plan' },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Standard',\n          price: '€234',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Plus',\n          price: '€344',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Premium',\n          price: '€556',\n          onClick: () => {},\n        },\n      ],\n      [\n        {\n          text: 'Your contribution',\n        },\n        {\n          cellId: '#1',\n          text: '€210',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n        {\n          cellId: '#2',\n          text: '€275',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n        {\n          cellId: '#3',\n          text: '€310',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n      ],\n      [\n        {\n          text: 'Regular vet visits & medication',\n          description: 'Pflegepflichtversicherungrightno',\n          modalContent: 'Some stories about vets',\n        },\n        { text: 'No', description: 'Annual Only' },\n        { text: '50%' },\n        { text: '80%-100%' },\n      ],\n      [\n        { text: 'Operations',\n          modalContent: 'Operations info',\n          modalTitle: 'Custom operations modal title'\n         },\n        { \n          checkmarkValue: true,\n          modalContent: 'Operations info column 2',\n          modalTitle: 'Custom operations modal title column 2'\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'Rating info' },\n        { rating: { type: 'zap', value: 1 } },\n        {\n          rating: { type: 'zap', value: 3 },\n          modalContent: 'Rating info column 3',\n        },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n  {\n    section: {\n      icon: <DentalPlusIcon size={20} noMargin />,\n      title: 'Dental',\n    },\n    rows: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No' },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'info' },\n        {\n          text: 'This is a table cell with a lot of text',\n          modalContent: 'Maybe',\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'info' },\n        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n      [\n        {\n          type: 'CARD',\n          colSpan: 3,\n          title: 'Dental add-on',\n          href: 'https://example.com',\n          icon: 'https://placehold.co/24x24/green/yellow',\n          description:\n            'Get your dental cleanings and additional treatments covered for just 10.90€ a month.',\n        },\n      ],\n    ],\n  },\n  {\n    section: {\n      title: 'Travel',\n      icon: 'https://placehold.co/24x24/red/yellow',\n    },\n    rows: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No', checkmarkValue: false },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'info' },\n        {\n          checkmarkValue: true,\n          modalContent: 'Maybe',\n          description: 'This is a table cell with a long subtitle',\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'info' },\n        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n];\n\nconst story = {\n  title: 'JSX/Table',\n  component: Table,\n  argTypes: {\n    tableData: {\n      subContent:\n        'This property allows to set the data of the Table component.',\n    },\n    title: {\n      subContent:\n        'This property allows to add a title to the Table component for accessibility purposes.',\n    },\n    collapsibleSections: {\n      subContent: 'This property allows to collapse the sections of the table.',\n    },\n    hideDetails: {\n      subContent: 'This property allows to hide the details of the table.',\n    },\n    stickyHeaderTopOffset: {\n      subContent:\n        'This property allows to set the offset of the sticky header.',\n    },\n    className: {\n      subContent:\n        'This property allows to set a custom class to the Table component.',\n    },\n    textOverrides: {\n      subContent:\n        'This property allows to set custom text for the show and hide details buttons.',\n    },\n    hideColumns: {\n      subContent: 'This property allows to hide defined columns by index.',\n    },\n    hideRows: {\n      subContent: 'This property allows to hide selected rows by index.',\n    },\n    modalContentRenderer: {\n      subContent: 'This property allows to render custom modal content.',\n    },\n    onSelectionChanged: {\n      subContent:\n        'This event is triggered when a selection is changed. It receives the index of the selection as an argument.',\n      table: {\n        category: 'Events',\n      },\n    },\n    onModalOpen: {\n      subContent:\n        'This event is triggered when a modal is opened. It receives the title and body of the modal as arguments.',\n      table: {\n        category: 'Events',\n      },\n    },\n  },\n  args: {\n    tableData: initialData,\n    collapsibleSections: false,\n    hideDetails: false,\n    stickyHeaderTopOffset: 0,\n    title: 'Title of the table',\n    className: '',\n    textOverrides: {\n      showDetails: 'Show details',\n      hideDetails: 'Hide details',\n    },\n    hideColumns: [],\n    hideRows: [],\n  },\n};\n\nexport const TableStory = ({\n  collapsibleSections,\n  tableData,\n  hideColumns,\n  hideDetails,\n  hideRows,\n  stickyHeaderTopOffset,\n  textOverrides,\n  title,\n  activeSection,\n}: TableProps) => {\n  const [price, setPrice] = useState(999);\n  return (\n    <div>\n      <div className=\"d-flex fd-column p24 mb80 gap16 wmx5\">\n        <label htmlFor=\"\">Change price to see replacement in action: </label>\n        <Input\n          id=\"#stuff\"\n          type=\"text\"\n          onChange={(e) => setPrice(Number(e.target.value))}\n          value={price}\n        />\n      </div>\n\n      <Table\n        cellReplacements={{\n          '#1': {\n            type: 'CTA',\n            title: 'Replaced!',\n            price: `€${price}`,\n            buttonCaption: 'I got replaced',\n            href: 'http://example.com',\n          },\n          '#2': {\n            type: 'BUTTON',\n            buttonCaption: 'I got replaced too',\n          },\n          '#3': {\n            description: 'per year',\n          },\n        }}\n        collapsibleSections={collapsibleSections}\n        tableData={tableData}\n        hideColumns={hideColumns}\n        hideDetails={hideDetails}\n        hideRows={hideRows}\n        stickyHeaderTopOffset={stickyHeaderTopOffset}\n        textOverrides={textOverrides}\n        title={title}\n        activeSection={activeSection}\n      />\n    </div>\n  );\n};\n\nexport const TableDataType = () => {\n  return (\n    <pre>\n      {`\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      `}\n    </pre>\n  );\n};\n\nTableStory.storyName = 'Table';\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -37,9 +37,9 @@ import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
 import '../../useMediaQuery-1a3a2432.js';
 import './components/TableContents/TableContents.js';
-import '../../TableSection-65e88f87.js';
+import '../../TableSection-442941de.js';
 import './components/TableContents/Collapsible.js';
-import '../../useTableNavigation-f929fbc9.js';
+import '../../useTableNavigation-17d5cd3c.js';
 import './components/TableControls/TableControls.js';
 import '../icon/icons/ChevronLeft.js';
 import '../../useScrollSync-b2d28bed.js';

package/dist/esm/components/table/components/TableCell/BaseCell/BaseCell.js

@@ -48,12 +48,12 @@ var BaseCell = function (_a) {
             'jc-center': align === 'center',
         }), children: jsxs("div", { className: classNames('d-flex fd-column', alignClassName, (_b = {},
                 _b[styles.maxWidth] = modalContent && align === 'center',
-                _b)), children: [progressBarValue !== undefined && (jsx(MiniProgressBar, { nFilledBars: progressBarValue })), jsxs("div", { className: "d-flex ai-center", children: [(rating === null || rating === void 0 ? void 0 : rating.value) && (jsx("span", { "data-testid": "table-cell-rating", title: "".concat(rating === null || rating === void 0 ? void 0 : rating.value, " out of 3"), children: validRatingValues.map(function (value) { return (jsx(SelectedIcon, { "aria-hidden": "true", color: value <= (rating === null || rating === void 0 ? void 0 : rating.value) ? 'neutral-900' : 'neutral-400', className: styles.icon, size: (rating === null || rating === void 0 ? void 0 : rating.type) === 'zap' ? 16 : 14 }, value)); }) })), checkmarkValue !== undefined && (jsx("span", { className: 'd-inline-block mx8', title: checkmarkValue ? 'Yes' : 'No', children: checkmarkValue ? (jsx(CheckThickIcon, { noMargin: true, "data-testid": "table-cell-boolean-yes", size: 24, "aria-hidden": true, color: "neutral-900" })) : (jsx(XIcon, { noMargin: true, "data-testid": "table-cell-boolean-no", size: 24, "aria-hidden": true, color: "neutral-400" })) })), jsxs("div", { className: "d-inline", children: [text && fontVariant === 'NORMAL' && (jsx("div", { className: classNames("p-p d-inline", { 'ml8': align !== 'left' }), "data-testid": "table-cell-text", children: text })), text && fontVariant === 'PRICE' && (jsx("div", { className: "p-h1 p--serif tc-neutral-900", "data-testid": "table-cell-content", children: text })), text && fontVariant === 'TITLE' && (jsx("h2", { "aria-hidden": true, className: "tc-grey-800 p-h2 p--serif", children: text })), modalContent && openModal && (jsx("span", { className: "ml8", children: jsx(TableInfoButton, { onClick: function () {
+                _b)), children: [jsxs("div", { className: "d-flex ai-center", children: [(rating === null || rating === void 0 ? void 0 : rating.value) && (jsx("span", { "data-testid": "table-cell-rating", title: "".concat(rating === null || rating === void 0 ? void 0 : rating.value, " out of 3"), children: validRatingValues.map(function (value) { return (jsx(SelectedIcon, { "aria-hidden": "true", color: value <= (rating === null || rating === void 0 ? void 0 : rating.value) ? 'neutral-900' : 'neutral-400', className: styles.icon, size: (rating === null || rating === void 0 ? void 0 : rating.type) === 'zap' ? 16 : 14 }, value)); }) })), checkmarkValue !== undefined && (jsx("span", { className: 'd-inline-block mx8', title: checkmarkValue ? 'Yes' : 'No', children: checkmarkValue ? (jsx(CheckThickIcon, { noMargin: true, "data-testid": "table-cell-boolean-yes", size: 24, "aria-hidden": true, color: "neutral-900" })) : (jsx(XIcon, { noMargin: true, "data-testid": "table-cell-boolean-no", size: 24, "aria-hidden": true, color: "neutral-400" })) })), jsxs("div", { className: "d-inline", children: [text && fontVariant === 'NORMAL' && (jsx("div", { className: classNames("p-p d-inline", { 'ml8': align !== 'left' }), "data-testid": "table-cell-text", children: text })), text && fontVariant === 'PRICE' && (jsx("div", { className: "p-h1 p--serif tc-neutral-900", "data-testid": "table-cell-content", children: text })), text && fontVariant === 'TITLE' && (jsx("h2", { "aria-hidden": true, className: "tc-grey-800 p-h2 p--serif", children: text })), modalContent && openModal && (jsx("span", { className: "ml8", children: jsx(TableInfoButton, { onClick: function () {
                                             return openModal({
                                                 title: modalTitle,
                                                 body: modalContent,
                                             });
-                                        } }) }))] })] }), description && (jsx("div", { className: classNames(styles.description, 'd-flex p-p--small tc-neutral-600', alignClassName), children: description }))] }) }));
+                                        } }) }))] })] }), progressBarValue !== undefined && (jsx(MiniProgressBar, { nFilledBars: progressBarValue })), description && (jsx("div", { className: classNames(styles.description, 'd-flex p-p--small tc-neutral-600', alignClassName), children: description }))] }) }));
 };
 
 export { BaseCell };

package/dist/esm/components/table/components/TableCell/BaseCell/BaseCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n  CheckThickIcon,\n  StarFilledIcon,\n  XIcon,\n  ZapFilledIcon,\n} from '../../../../icon';\nimport { ReactNode } from 'react';\nimport styles from './BaseCell.module.scss';\nimport { MiniProgressBar } from './MiniProgressBar/MiniProgressBar';\nimport { TableInfoButton } from '../../../../comparisonTable';\nimport { ModalFunction } from '../../../types';\n\nexport type FontVariant = 'NORMAL' | 'TITLE' | 'PRICE';\n\nconst progressLookup: Record<string, number> = {\n  '30%': 1,\n  '50%': 2,\n  '70%': 3,\n  '75%': 4,\n  '80%': 4,\n  '90%': 4,\n  '75%-90%': 4,\n  '75%-100%': 4,\n  '80%-100%': 4,\n  '100%': 5,\n};\n\nexport type Alignment = 'center' | 'left' | 'right';\n\nexport type BaseCellProps = {\n  align?: Alignment;\n  checkmarkValue?: boolean;\n  description?: ReactNode;\n  fontVariant?: FontVariant;\n  hideProgressBar?: boolean;\n  modalTitle?: ReactNode;\n  modalContent?: ReactNode;\n  openModal?: ModalFunction;\n  text?: ReactNode;\n  rating?: {\n    value: number;\n    type: 'zap' | 'star';\n  };\n  className?: string;\n  dataTestId?: string;\n  dataCy?: string;\n};\n\nexport const BaseCell = ({\n  align = 'center',\n  checkmarkValue,\n  description = '',\n  fontVariant = 'NORMAL',\n  hideProgressBar = false,\n  modalTitle = '',\n  modalContent = '',\n  openModal,\n  rating,\n  text = '',\n  className,\n}: BaseCellProps) => {\n  const alignClassName = {\n    center: 'ta-center jc-center ai-center',\n    left: 'ta-left jc-start',\n    right: 'ta-right jc-end ai-end',\n  }[align];\n\n  const validRatingValues: number[] = [1, 2, 3];\n  const SelectedIcon = rating?.type === 'zap' ? ZapFilledIcon : StarFilledIcon;\n\n  const progressBarValue =\n    !hideProgressBar && typeof text === 'string'\n      ? progressLookup[text]\n      : undefined;\n\n  return (\n    <div\n      className={classNames(\n        className,\n        'd-flex gap8 ai-center', {\n        'jc-center': align === 'center',\n      })}\n    >\n      <div\n        className={classNames('d-flex fd-column', alignClassName, {\n          [styles.maxWidth]: modalContent && align === 'center',\n        })}\n      >\n        {progressBarValue !== undefined && (\n          <MiniProgressBar nFilledBars={progressBarValue} />\n        )}\n\n        <div className=\"d-flex ai-center\">\n          {rating?.value && (\n            <span\n              data-testid=\"table-cell-rating\"\n              title={`${rating?.value} out of 3`}\n            >\n              {validRatingValues.map((value) => (\n                <SelectedIcon\n                  aria-hidden=\"true\"\n                  key={value}\n                  color={value <= rating?.value ? 'neutral-900' : 'neutral-400'}\n                  className={styles.icon}\n                  size={rating?.type === 'zap' ? 16 : 14}\n                />\n              ))}\n            </span>\n          )}\n\n          {checkmarkValue !== undefined && (\n            <span className='d-inline-block mx8' title={checkmarkValue ? 'Yes' : 'No'}>\n              {checkmarkValue ? (\n                <CheckThickIcon\n                  noMargin\n                  data-testid=\"table-cell-boolean-yes\"\n                  size={24}\n                  aria-hidden\n                  color=\"neutral-900\"\n                />\n              ) : (\n                <XIcon\n                  noMargin\n                  data-testid=\"table-cell-boolean-no\"\n                  size={24}\n                  aria-hidden\n                  color=\"neutral-400\"\n                />\n              )}\n            </span>\n          )}\n\n          <div className=\"d-inline\">\n            {text && fontVariant === 'NORMAL' && (\n              <div className={classNames(\n                \"p-p d-inline\",\n                { 'ml8': align !== 'left' }\n              )}\n              data-testid=\"table-cell-text\"\n            >\n                {text}\n              </div>\n            )}\n\n            {text && fontVariant === 'PRICE' && (\n              <div\n                className=\"p-h1 p--serif tc-neutral-900\"\n                data-testid=\"table-cell-content\"\n              >\n                {text}\n              </div>\n            )}\n\n            {text && fontVariant === 'TITLE' && (\n              <h2\n                aria-hidden\n                className=\"tc-grey-800 p-h2 p--serif\"\n              >\n                {text}\n              </h2>\n            )}\n\n            {modalContent && openModal && (\n              <span className=\"ml8\">\n                <TableInfoButton\n                  onClick={() =>\n                    openModal({\n                      title: modalTitle,\n                      body: modalContent,\n                    })\n                  }\n                />\n              </span>\n            )}\n          </div>\n        </div>\n\n        {description && (\n          <div\n            className={classNames(\n              styles.description,\n              'd-flex p-p--small tc-neutral-600',\n              alignClassName\n            )}\n          >\n            {description}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAeA,IAAM,cAAc,GAA2B;IAC7C,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,CAAC;IACR,SAAS,EAAE,CAAC;IACZ,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,CAAC;IACb,MAAM,EAAE,CAAC;CACV,CAAC;IAuBW,QAAQ,GAAG,UAAC,EAYT;;QAXd,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAChB,cAAc,oBAAA,EACd,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,KAAA,EAChB,mBAAsB,EAAtB,WAAW,mBAAG,QAAQ,KAAA,EACtB,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,KAAA,EACvB,kBAAe,EAAf,UAAU,mBAAG,EAAE,KAAA,EACf,oBAAiB,EAAjB,YAAY,mBAAG,EAAE,KAAA,EACjB,SAAS,eAAA,EACT,MAAM,YAAA,EACN,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,SAAS,eAAA;IAET,IAAM,cAAc,GAAG;QACrB,MAAM,EAAE,+BAA+B;QACvC,IAAI,EAAE,kBAAkB;QACxB,KAAK,EAAE,wBAAwB;KAChC,CAAC,KAAK,CAAC,CAAC;IAET,IAAM,iBAAiB,GAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC9C,IAAM,YAAY,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,MAAK,KAAK,GAAG,aAAa,GAAG,cAAc,CAAC;IAE7E,IAAM,gBAAgB,GACpB,CAAC,eAAe,IAAI,OAAO,IAAI,KAAK,QAAQ;UACxC,cAAc,CAAC,IAAI,CAAC;UACpB,SAAS,CAAC;IAEhB,QACEA,aACE,SAAS,EAAE,UAAU,CACnB,SAAS,EACT,uBAAuB,EAAE;YACzB,WAAW,EAAE,KAAK,KAAK,QAAQ;SAChC,CAAC,YAEFC,cACE,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,cAAc;gBACtD,GAAC,MAAM,CAAC,QAAQ,IAAG,YAAY,IAAI,KAAK,KAAK,QAAQ;oBACrD,aAED,gBAAgB,KAAK,SAAS,KAC7BD,IAAC,eAAe,IAAC,WAAW,EAAE,gBAAgB,GAAI,CACnD,EAEDC,cAAK,SAAS,EAAC,kBAAkB,aAC9B,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,MACZD,6BACc,mBAAmB,EAC/B,KAAK,EAAE,UAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,cAAW,YAEjC,iBAAiB,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,QAChCA,IAAC,YAAY,mBACC,MAAM,EAElB,KAAK,EAAE,KAAK,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAA,GAAG,aAAa,GAAG,aAAa,EAC7D,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,MAAK,KAAK,GAAG,EAAE,GAAG,EAAE,IAHjC,KAAK,CAIV,IACH,CAAC,GACG,CACR,EAEA,cAAc,KAAK,SAAS,KAC3BA,cAAM,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,cAAc,GAAG,KAAK,GAAG,IAAI,YACtE,cAAc,IACbA,IAAC,cAAc,IACb,QAAQ,uBACI,wBAAwB,EACpC,IAAI,EAAE,EAAE,uBAER,KAAK,EAAC,aAAa,GACnB,KAEFA,IAAC,KAAK,IACJ,QAAQ,uBACI,uBAAuB,EACnC,IAAI,EAAE,EAAE,uBAER,KAAK,EAAC,aAAa,GACnB,CACH,GACI,CACR,EAEDC,cAAK,SAAS,EAAC,UAAU,aACtB,IAAI,IAAI,WAAW,KAAK,QAAQ,KAC/BD,aAAK,SAAS,EAAE,UAAU,CACxB,cAAc,EACd,EAAE,KAAK,EAAE,KAAK,KAAK,MAAM,EAAE,CAC5B,iBACW,iBAAiB,YAE1B,IAAI,GACD,CACP,EAEA,IAAI,IAAI,WAAW,KAAK,OAAO,KAC9BA,aACE,SAAS,EAAC,8BAA8B,iBAC5B,oBAAoB,YAE/B,IAAI,GACD,CACP,EAEA,IAAI,IAAI,WAAW,KAAK,OAAO,KAC9BA,iCAEE,SAAS,EAAC,2BAA2B,YAEpC,IAAI,GACF,CACN,EAEA,YAAY,IAAI,SAAS,KACxBA,cAAM,SAAS,EAAC,KAAK,YACnBA,IAAC,eAAe,IACd,OAAO,EAAE;4CACP,OAAA,SAAS,CAAC;gDACR,KAAK,EAAE,UAAU;gDACjB,IAAI,EAAE,YAAY;6CACnB,CAAC;yCAAA,GAEJ,GACG,CACR,IACG,IACF,EAEL,WAAW,KACVA,aACE,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,WAAW,EAClB,kCAAkC,EAClC,cAAc,CACf,YAEA,WAAW,GACR,CACP,IACG,GACF,EACN;AACJ;;;;"}
+{"version":3,"file":"BaseCell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n  CheckThickIcon,\n  StarFilledIcon,\n  XIcon,\n  ZapFilledIcon,\n} from '../../../../icon';\nimport { ReactNode } from 'react';\nimport styles from './BaseCell.module.scss';\nimport { MiniProgressBar } from './MiniProgressBar/MiniProgressBar';\nimport { TableInfoButton } from '../../../../comparisonTable';\nimport { ModalFunction } from '../../../types';\n\nexport type FontVariant = 'NORMAL' | 'TITLE' | 'PRICE';\n\nconst progressLookup: Record<string, number> = {\n  '30%': 1,\n  '50%': 2,\n  '70%': 3,\n  '75%': 4,\n  '80%': 4,\n  '90%': 4,\n  '75%-90%': 4,\n  '75%-100%': 4,\n  '80%-100%': 4,\n  '100%': 5,\n};\n\nexport type Alignment = 'center' | 'left' | 'right';\n\nexport type BaseCellProps = {\n  align?: Alignment;\n  checkmarkValue?: boolean;\n  description?: ReactNode;\n  fontVariant?: FontVariant;\n  hideProgressBar?: boolean;\n  modalTitle?: ReactNode;\n  modalContent?: ReactNode;\n  openModal?: ModalFunction;\n  text?: ReactNode;\n  rating?: {\n    value: number;\n    type: 'zap' | 'star';\n  };\n  className?: string;\n  dataTestId?: string;\n  dataCy?: string;\n};\n\nexport const BaseCell = ({\n  align = 'center',\n  checkmarkValue,\n  description = '',\n  fontVariant = 'NORMAL',\n  hideProgressBar = false,\n  modalTitle = '',\n  modalContent = '',\n  openModal,\n  rating,\n  text = '',\n  className,\n}: BaseCellProps) => {\n  const alignClassName = {\n    center: 'ta-center jc-center ai-center',\n    left: 'ta-left jc-start',\n    right: 'ta-right jc-end ai-end',\n  }[align];\n\n  const validRatingValues: number[] = [1, 2, 3];\n  const SelectedIcon = rating?.type === 'zap' ? ZapFilledIcon : StarFilledIcon;\n\n  const progressBarValue =\n    !hideProgressBar && typeof text === 'string'\n      ? progressLookup[text]\n      : undefined;\n\n  return (\n    <div\n      className={classNames(\n        className,\n        'd-flex gap8 ai-center', {\n        'jc-center': align === 'center',\n      })}\n    >\n      <div\n        className={classNames('d-flex fd-column', alignClassName, {\n          [styles.maxWidth]: modalContent && align === 'center',\n        })}\n      >\n        <div className=\"d-flex ai-center\">\n          {rating?.value && (\n            <span\n              data-testid=\"table-cell-rating\"\n              title={`${rating?.value} out of 3`}\n            >\n              {validRatingValues.map((value) => (\n                <SelectedIcon\n                  aria-hidden=\"true\"\n                  key={value}\n                  color={value <= rating?.value ? 'neutral-900' : 'neutral-400'}\n                  className={styles.icon}\n                  size={rating?.type === 'zap' ? 16 : 14}\n                />\n              ))}\n            </span>\n          )}\n\n          {checkmarkValue !== undefined && (\n            <span className='d-inline-block mx8' title={checkmarkValue ? 'Yes' : 'No'}>\n              {checkmarkValue ? (\n                <CheckThickIcon\n                  noMargin\n                  data-testid=\"table-cell-boolean-yes\"\n                  size={24}\n                  aria-hidden\n                  color=\"neutral-900\"\n                />\n              ) : (\n                <XIcon\n                  noMargin\n                  data-testid=\"table-cell-boolean-no\"\n                  size={24}\n                  aria-hidden\n                  color=\"neutral-400\"\n                />\n              )}\n            </span>\n          )}\n\n          <div className=\"d-inline\">\n            {text && fontVariant === 'NORMAL' && (\n              <div className={classNames(\n                \"p-p d-inline\",\n                { 'ml8': align !== 'left' }\n              )}\n              data-testid=\"table-cell-text\"\n            >\n                {text}\n              </div>\n            )}\n\n            {text && fontVariant === 'PRICE' && (\n              <div\n                className=\"p-h1 p--serif tc-neutral-900\"\n                data-testid=\"table-cell-content\"\n              >\n                {text}\n              </div>\n            )}\n\n            {text && fontVariant === 'TITLE' && (\n              <h2\n                aria-hidden\n                className=\"tc-grey-800 p-h2 p--serif\"\n              >\n                {text}\n              </h2>\n            )}\n\n            {modalContent && openModal && (\n              <span className=\"ml8\">\n                <TableInfoButton\n                  onClick={() =>\n                    openModal({\n                      title: modalTitle,\n                      body: modalContent,\n                    })\n                  }\n                />\n              </span>\n            )}\n          </div>\n        </div>\n\n        {progressBarValue !== undefined && (\n          <MiniProgressBar nFilledBars={progressBarValue} />\n        )}\n\n        {description && (\n          <div\n            className={classNames(\n              styles.description,\n              'd-flex p-p--small tc-neutral-600',\n              alignClassName\n            )}\n          >\n            {description}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -23,7 +23,7 @@ import '../../../button/index.js';
 import '../../../cards/card/index.js';
 import '../../../icon/icons/ChevronRight.js';
 
-var css_248z = ".TableCell-module_th__2rjCU {\n  vertical-align: middle;\n  scroll-snap-align: end;\n  width: 50%;\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_fixedCell__cL3-m {\n  position: sticky;\n  left: 0;\n  z-index: 2;\n}\n.TableCell-module_fixedCell__cL3-m:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  width: 1px;\n  background-color: #f7f7fd;\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 css_248z = ".TableCell-module_th__2rjCU {\n  vertical-align: middle;\n  scroll-snap-align: end;\n  width: 50%;\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_fixedCell__cL3-m {\n  position: sticky;\n  left: 0;\n  z-index: 2;\n}\n.TableCell-module_fixedCell__cL3-m:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  width: 1px;\n  background-color: #f7f7fd;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_fixedCell__cL3-m {\n    padding-left: 16px;\n  }\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 = {"th":"TableCell-module_th__2rjCU","thNavigation":"TableCell-module_thNavigation__qZ2sY","fixedCell":"TableCell-module_fixedCell__cL3-m","fixedCard":"TableCell-module_fixedCard__2LO8s"};
 styleInject(css_248z);
 
@@ -48,7 +48,6 @@ var TableCell = React__default.memo(function (_a) {
             _b[styles.thNavigation] = isNavigation,
             _b[styles.fixedCell] = isFirstCellInRow && colSpan < 1,
             _b[styles.fixedCard] = cellProps.type === 'CARD',
-            _b.pl16 = isFirstCellInRow,
             _b)), colSpan: isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan, children: [!cellProps.type && (jsx(BaseCell, __assign({}, cellProps, { fontVariant: isTopLeftCell
                     ? 'TITLE'
                     : (_c = cellProps.fontVariant) !== null && _c !== void 0 ? _c : 'NORMAL' }))), cellProps.type === 'CTA' && jsx(CTACell, __assign({}, cellProps)), cellProps.type === 'BUTTON' && jsx(ButtonCell, __assign({}, cellProps)), cellProps.type === 'CARD' && jsx(CardCell, __assign({}, cellProps))] })));

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

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../../../../../../src/lib/components/table/components/TableCell/TableCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './TableCell.module.scss';\nimport { BaseCell } from './BaseCell/BaseCell';\nimport { TableCellData } from '../../types';\nimport { CTACell } from './CTACell/CTACell';\nimport { CardCell } from './CardCell/CardCell';\nimport { ButtonCell } from './ButtonCell/ButtonCell';\nimport React from 'react';\n\ntype ExtraTableCellProps = {\n  isHeader?: boolean;\n  isFirstCellInRow?: boolean;\n  isTopLeftCell?: boolean;\n  isNavigation?: boolean;\n  imageComponent?: (args: any) => JSX.Element;\n  isBelowDesktop?: boolean;\n};\n\nexport type TableCellProps = TableCellData & ExtraTableCellProps;\n\nconst TableCell = React.memo(\n  ({\n    isFirstCellInRow = false,\n    isHeader = false,\n    isNavigation = false,\n    isTopLeftCell = false,\n    colSpan = 0,\n    isBelowDesktop,\n    ...cellProps\n  }: TableCellProps) => {\n    // prettier-ignore\n    const Tag = isNavigation\n    ? 'div'\n    : isHeader || isFirstCellInRow ? 'th' : 'td';\n\n    // prettier-ignore\n    const thScope = isHeader\n    ? 'col'\n    : isFirstCellInRow ? 'row' : undefined;\n\n    const scope = {\n      scope: thScope,\n    };\n\n    return (\n      <Tag\n        {...scope}\n        className={classNames('bg-white py24 px8', styles.th, {\n          'ta-left': isFirstCellInRow,\n          [styles.thNavigation]: isNavigation,\n          [styles.fixedCell]: isFirstCellInRow && colSpan < 1 ,\n          [styles.fixedCard]: cellProps.type === 'CARD',\n          pl16: isFirstCellInRow,\n        })}\n        colSpan={isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan}\n      >\n        {!cellProps.type && (\n          <BaseCell\n            {...cellProps}\n            fontVariant={\n              isTopLeftCell\n                ? 'TITLE'\n                : cellProps.fontVariant ?? 'NORMAL'\n            }\n          />\n        )}\n        {cellProps.type === 'CTA' && <CTACell {...cellProps} />}\n        {cellProps.type === 'BUTTON' && <ButtonCell {...cellProps} />}\n        {cellProps.type === 'CARD' && <CardCell {...cellProps} />}\n      </Tag>\n    );\n  }\n);\n\nexport { TableCell };\n"],"names":["React","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqBM,SAAS,GAAGA,cAAK,CAAC,IAAI,CAC1B,UAAC,EAQgB;;;IAPf,IAAA,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACxB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACpB,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA,EACrB,eAAW,EAAX,OAAO,mBAAG,CAAC,KAAA,EACX,cAAc,oBAAA,EACX,SAAS,cAPb,8FAQA,CADa;;IAGZ,IAAM,GAAG,GAAG,YAAY;UACtB,KAAK;UACL,QAAQ,IAAI,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;;IAG7C,IAAM,OAAO,GAAG,QAAQ;UACtB,KAAK;UACL,gBAAgB,GAAG,KAAK,GAAG,SAAS,CAAC;IAEvC,IAAM,KAAK,GAAG;QACZ,KAAK,EAAE,OAAO;KACf,CAAC;IAEF,QACEC,KAAC,GAAG,eACE,KAAK,IACT,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE,MAAM,CAAC,EAAE;gBAClD,SAAS,EAAE,gBAAgB;;YAC3B,GAAC,MAAM,CAAC,YAAY,IAAG,YAAY;YACnC,GAAC,MAAM,CAAC,SAAS,IAAG,gBAAgB,IAAI,OAAO,GAAG,CAAC;YACnD,GAAC,MAAM,CAAC,SAAS,IAAG,SAAS,CAAC,IAAI,KAAK,MAAM;YAC7C,OAAI,GAAE,gBAAgB;gBACtB,EACF,OAAO,EAAE,cAAc,IAAI,SAAS,CAAC,IAAI,KAAK,MAAM,GAAG,CAAC,GAAG,OAAO,aAEjE,CAAC,SAAS,CAAC,IAAI,KACdC,IAAC,QAAQ,eACH,SAAS,IACb,WAAW,EACT,aAAa;sBACT,OAAO;sBACP,MAAA,SAAS,CAAC,WAAW,mCAAI,QAAQ,IAEvC,CACH,EACA,SAAS,CAAC,IAAI,KAAK,KAAK,IAAIA,IAAC,OAAO,eAAK,SAAS,EAAI,EACtD,SAAS,CAAC,IAAI,KAAK,QAAQ,IAAIA,IAAC,UAAU,eAAK,SAAS,EAAI,EAC5D,SAAS,CAAC,IAAI,KAAK,MAAM,IAAIA,IAAC,QAAQ,eAAK,SAAS,EAAI,KACrD,EACN;AACJ,CAAC;;;;"}
+{"version":3,"file":"TableCell.js","sources":["../../../../../../../src/lib/components/table/components/TableCell/TableCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './TableCell.module.scss';\nimport { BaseCell } from './BaseCell/BaseCell';\nimport { TableCellData } from '../../types';\nimport { CTACell } from './CTACell/CTACell';\nimport { CardCell } from './CardCell/CardCell';\nimport { ButtonCell } from './ButtonCell/ButtonCell';\nimport React from 'react';\n\ntype ExtraTableCellProps = {\n  isHeader?: boolean;\n  isFirstCellInRow?: boolean;\n  isTopLeftCell?: boolean;\n  isNavigation?: boolean;\n  imageComponent?: (args: any) => JSX.Element;\n  isBelowDesktop?: boolean;\n};\n\nexport type TableCellProps = TableCellData & ExtraTableCellProps;\n\nconst TableCell = React.memo(\n  ({\n    isFirstCellInRow = false,\n    isHeader = false,\n    isNavigation = false,\n    isTopLeftCell = false,\n    colSpan = 0,\n    isBelowDesktop,\n    ...cellProps\n  }: TableCellProps) => {\n    // prettier-ignore\n    const Tag = isNavigation\n    ? 'div'\n    : isHeader || isFirstCellInRow ? 'th' : 'td';\n\n    // prettier-ignore\n    const thScope = isHeader\n    ? 'col'\n    : isFirstCellInRow ? 'row' : undefined;\n\n    const scope = {\n      scope: thScope,\n    };\n\n    return (\n      <Tag\n        {...scope}\n        className={classNames('bg-white py24 px8', styles.th, {\n          'ta-left': isFirstCellInRow,\n          [styles.thNavigation]: isNavigation,\n          [styles.fixedCell]: isFirstCellInRow && colSpan < 1 ,\n          [styles.fixedCard]: cellProps.type === 'CARD',\n        })}\n        colSpan={isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan}\n      >\n        {!cellProps.type && (\n          <BaseCell\n            {...cellProps}\n            fontVariant={\n              isTopLeftCell\n                ? 'TITLE'\n                : cellProps.fontVariant ?? 'NORMAL'\n            }\n          />\n        )}\n        {cellProps.type === 'CTA' && <CTACell {...cellProps} />}\n        {cellProps.type === 'BUTTON' && <ButtonCell {...cellProps} />}\n        {cellProps.type === 'CARD' && <CardCell {...cellProps} />}\n      </Tag>\n    );\n  }\n);\n\nexport { TableCell };\n"],"names":["React","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqBM,SAAS,GAAGA,cAAK,CAAC,IAAI,CAC1B,UAAC,EAQgB;;;IAPf,IAAA,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACxB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACpB,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA,EACrB,eAAW,EAAX,OAAO,mBAAG,CAAC,KAAA,EACX,cAAc,oBAAA,EACX,SAAS,cAPb,8FAQA,CADa;;IAGZ,IAAM,GAAG,GAAG,YAAY;UACtB,KAAK;UACL,QAAQ,IAAI,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;;IAG7C,IAAM,OAAO,GAAG,QAAQ;UACtB,KAAK;UACL,gBAAgB,GAAG,KAAK,GAAG,SAAS,CAAC;IAEvC,IAAM,KAAK,GAAG;QACZ,KAAK,EAAE,OAAO;KACf,CAAC;IAEF,QACEC,KAAC,GAAG,eACE,KAAK,IACT,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE,MAAM,CAAC,EAAE;gBAClD,SAAS,EAAE,gBAAgB;;YAC3B,GAAC,MAAM,CAAC,YAAY,IAAG,YAAY;YACnC,GAAC,MAAM,CAAC,SAAS,IAAG,gBAAgB,IAAI,OAAO,GAAG,CAAC;YACnD,GAAC,MAAM,CAAC,SAAS,IAAG,SAAS,CAAC,IAAI,KAAK,MAAM;gBAC7C,EACF,OAAO,EAAE,cAAc,IAAI,SAAS,CAAC,IAAI,KAAK,MAAM,GAAG,CAAC,GAAG,OAAO,aAEjE,CAAC,SAAS,CAAC,IAAI,KACdC,IAAC,QAAQ,eACH,SAAS,IACb,WAAW,EACT,aAAa;sBACT,OAAO;sBACP,MAAA,SAAS,CAAC,WAAW,mCAAI,QAAQ,IAEvC,CACH,EACA,SAAS,CAAC,IAAI,KAAK,KAAK,IAAIA,IAAC,OAAO,eAAK,SAAS,EAAI,EACtD,SAAS,CAAC,IAAI,KAAK,QAAQ,IAAIA,IAAC,UAAU,eAAK,SAAS,EAAI,EAC5D,SAAS,CAAC,IAAI,KAAK,MAAM,IAAIA,IAAC,QAAQ,eAAK,SAAS,EAAI,KACrD,EACN;AACJ,CAAC;;;;"}

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

@@ -1,7 +1,7 @@
 import { a as __assign, _ as __spreadArray } from '../../../../tslib.es6-a39f91fc.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { T as TableSection } from '../../../../TableSection-65e88f87.js';
+import { T as TableSection } from '../../../../TableSection-442941de.js';
 import ChevronDownIcon from '../../../icon/icons/ChevronDown.js';
 import ChevronUpIcon from '../../../icon/icons/ChevronUp.js';
 import { Card } from '../../../cards/card/index.js';

package/dist/esm/components/table/components/TableContents/TableContents.test.js

@@ -6,7 +6,7 @@ import 'react';
 import 'react-dom';
 import '../../../../_commonjsHelpers-4730bd53.js';
 import 'react-dom/test-utils';
-import '../../../../TableSection-65e88f87.js';
+import '../../../../TableSection-442941de.js';
 import '../../../../index-6ea95111.js';
 import '../../../../style-inject.es-1f59c1d0.js';
 import '../TableCell/TableCell.js';

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

@@ -15,7 +15,7 @@ styleInject(css_248z);
 var TableControls = function (_a) {
     var _b, _c;
     var activeSection = _a.activeSection, children = _a.children, columnsLength = _a.columnsLength, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, navigateTable = _a.navigateTable;
-    return (jsxs("div", { "aria-hidden": true, className: classNames('d-flex ai-stretch jc-between bg-white px8', styles.stickyHeader), style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: [jsx("div", { className: 'py24', children: jsx(Button, { className: classNames((_b = {}, _b[styles.controlButtonHidden] = activeSection <= 1, _b), 'br8', styles.controlButton), disabled: activeSection <= 1, hideLabel: true, leftIcon: jsx(ChevronLeftIcon, {}), onClick: function () { return navigateTable(); }, type: "button", variant: "filledGray", "data-testid": "previous-section-button", style: { height: '100%' }, children: "Previous section" }) }), children, jsx("div", { className: 'py24', children: jsx(Button, { className: classNames((_c = {}, _c[styles.controlButtonHidden] = activeSection >= columnsLength - 1, _c), 'br8', styles.controlButton), disabled: activeSection >= columnsLength - 1, hideLabel: true, leftIcon: jsx(ChevronRightIcon, {}), onClick: function () { return navigateTable(true); }, type: "button", variant: "filledGray", "data-testid": "next-section-button", children: "Next section" }) })] }));
+    return (jsxs("div", { "aria-hidden": true, className: classNames('d-flex ai-stretch jc-between bg-white', styles.stickyHeader), style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: [jsx("div", { className: 'py24', children: jsx(Button, { className: classNames((_b = {}, _b[styles.controlButtonHidden] = activeSection <= 1, _b), 'br8', styles.controlButton), disabled: activeSection <= 1, hideLabel: true, leftIcon: jsx(ChevronLeftIcon, {}), onClick: function () { return navigateTable(); }, type: "button", variant: "filledGray", "data-testid": "previous-section-button", style: { height: '100%' }, children: "Previous section" }) }), children, jsx("div", { className: 'py24', children: jsx(Button, { className: classNames((_c = {}, _c[styles.controlButtonHidden] = activeSection >= columnsLength - 1, _c), 'br8', styles.controlButton), disabled: activeSection >= columnsLength - 1, hideLabel: true, leftIcon: jsx(ChevronRightIcon, {}), onClick: function () { return navigateTable(true); }, type: "button", variant: "filledGray", "data-testid": "next-section-button", children: "Next section" }) })] }));
 };
 
 export { TableControls };

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

@@ -1 +1 @@
-{"version":3,"file":"TableControls.js","sources":["../../../../../../../src/lib/components/table/components/TableControls/TableControls.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../../icon';\nimport styles from './TableControls.module.scss';\nimport { Button } from '../../../button';\nimport classNames from 'classnames';\n\nexport interface TableControlsProps {\n  activeSection: number;\n  children: ReactNode;\n  columnsLength: number;\n  stickyHeaderTopOffset: number;\n  navigateTable: (next?: boolean) => void;\n}\n\nconst TableControls = ({\n  activeSection,\n  children,\n  columnsLength,\n  stickyHeaderTopOffset,\n  navigateTable,\n}: TableControlsProps) => {\n  return (\n    <div\n      aria-hidden\n      className={classNames(\n        'd-flex ai-stretch jc-between bg-white px8',\n        styles.stickyHeader\n      )}\n      style={{ top: `${stickyHeaderTopOffset}px` }}\n    >\n      <div className='py24'>\n        <Button\n          className={classNames(\n            { [styles.controlButtonHidden]: activeSection <= 1 },\n            'br8',\n            styles.controlButton\n          )}\n          disabled={activeSection <= 1}\n          hideLabel\n          leftIcon={<ChevronLeftIcon />}\n          onClick={() => navigateTable()}\n          type=\"button\"\n          variant=\"filledGray\"\n          data-testid=\"previous-section-button\"\n          style={{ height: '100%' }}\n        >\n          Previous section\n        </Button>\n      </div>\n\n      {children}\n\n      <div className='py24'>\n        <Button\n          className={classNames(\n            { [styles.controlButtonHidden]: activeSection >= columnsLength - 1 },\n            'br8',\n            styles.controlButton\n          )}\n          disabled={activeSection >= columnsLength - 1}\n          hideLabel\n          leftIcon={<ChevronRightIcon />}\n          onClick={() => navigateTable(true)}\n          type=\"button\"\n          variant=\"filledGray\"\n          data-testid=\"next-section-button\"\n        >\n          Next section\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport { TableControls };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;IAcM,aAAa,GAAG,UAAC,EAMF;;QALnB,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,qBAAqB,2BAAA,EACrB,aAAa,mBAAA;IAEb,QACEA,mCAEE,SAAS,EAAE,UAAU,CACnB,2CAA2C,EAC3C,MAAM,CAAC,YAAY,CACpB,EACD,KAAK,EAAE,EAAE,GAAG,EAAE,UAAG,qBAAqB,OAAI,EAAE,aAE5CC,aAAK,SAAS,EAAC,MAAM,YACnBA,IAAC,MAAM,IACL,SAAS,EAAE,UAAU,WACjB,GAAC,MAAM,CAAC,mBAAmB,IAAG,aAAa,IAAI,CAAC,OAClD,KAAK,EACL,MAAM,CAAC,aAAa,CACrB,EACD,QAAQ,EAAE,aAAa,IAAI,CAAC,EAC5B,SAAS,QACT,QAAQ,EAAEA,IAAC,eAAe,KAAG,EAC7B,OAAO,EAAE,cAAM,OAAA,aAAa,EAAE,GAAA,EAC9B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,YAAY,iBACR,yBAAyB,EACrC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,iCAGlB,GACL,EAEL,QAAQ,EAETA,aAAK,SAAS,EAAC,MAAM,YACnBA,IAAC,MAAM,IACL,SAAS,EAAE,UAAU,WACjB,GAAC,MAAM,CAAC,mBAAmB,IAAG,aAAa,IAAI,aAAa,GAAG,CAAC,OAClE,KAAK,EACL,MAAM,CAAC,aAAa,CACrB,EACD,QAAQ,EAAE,aAAa,IAAI,aAAa,GAAG,CAAC,EAC5C,SAAS,QACT,QAAQ,EAAEA,IAAC,gBAAgB,KAAG,EAC9B,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,IAAI,CAAC,GAAA,EAClC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,YAAY,iBACR,qBAAqB,6BAG1B,GACL,IACF,EACN;AACJ;;;;"}
+{"version":3,"file":"TableControls.js","sources":["../../../../../../../src/lib/components/table/components/TableControls/TableControls.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../../icon';\nimport styles from './TableControls.module.scss';\nimport { Button } from '../../../button';\nimport classNames from 'classnames';\n\nexport interface TableControlsProps {\n  activeSection: number;\n  children: ReactNode;\n  columnsLength: number;\n  stickyHeaderTopOffset: number;\n  navigateTable: (next?: boolean) => void;\n}\n\nconst TableControls = ({\n  activeSection,\n  children,\n  columnsLength,\n  stickyHeaderTopOffset,\n  navigateTable,\n}: TableControlsProps) => {\n  return (\n    <div\n      aria-hidden\n      className={classNames(\n        'd-flex ai-stretch jc-between bg-white',\n        styles.stickyHeader\n      )}\n      style={{ top: `${stickyHeaderTopOffset}px` }}\n    >\n      <div className='py24'>\n        <Button\n          className={classNames(\n            { [styles.controlButtonHidden]: activeSection <= 1 },\n            'br8',\n            styles.controlButton\n          )}\n          disabled={activeSection <= 1}\n          hideLabel\n          leftIcon={<ChevronLeftIcon />}\n          onClick={() => navigateTable()}\n          type=\"button\"\n          variant=\"filledGray\"\n          data-testid=\"previous-section-button\"\n          style={{ height: '100%' }}\n        >\n          Previous section\n        </Button>\n      </div>\n\n      {children}\n\n      <div className='py24'>\n        <Button\n          className={classNames(\n            { [styles.controlButtonHidden]: activeSection >= columnsLength - 1 },\n            'br8',\n            styles.controlButton\n          )}\n          disabled={activeSection >= columnsLength - 1}\n          hideLabel\n          leftIcon={<ChevronRightIcon />}\n          onClick={() => navigateTable(true)}\n          type=\"button\"\n          variant=\"filledGray\"\n          data-testid=\"next-section-button\"\n        >\n          Next section\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport { TableControls };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;IAcM,aAAa,GAAG,UAAC,EAMF;;QALnB,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,qBAAqB,2BAAA,EACrB,aAAa,mBAAA;IAEb,QACEA,mCAEE,SAAS,EAAE,UAAU,CACnB,uCAAuC,EACvC,MAAM,CAAC,YAAY,CACpB,EACD,KAAK,EAAE,EAAE,GAAG,EAAE,UAAG,qBAAqB,OAAI,EAAE,aAE5CC,aAAK,SAAS,EAAC,MAAM,YACnBA,IAAC,MAAM,IACL,SAAS,EAAE,UAAU,WACjB,GAAC,MAAM,CAAC,mBAAmB,IAAG,aAAa,IAAI,CAAC,OAClD,KAAK,EACL,MAAM,CAAC,aAAa,CACrB,EACD,QAAQ,EAAE,aAAa,IAAI,CAAC,EAC5B,SAAS,QACT,QAAQ,EAAEA,IAAC,eAAe,KAAG,EAC7B,OAAO,EAAE,cAAM,OAAA,aAAa,EAAE,GAAA,EAC9B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,YAAY,iBACR,yBAAyB,EACrC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,iCAGlB,GACL,EAEL,QAAQ,EAETA,aAAK,SAAS,EAAC,MAAM,YACnBA,IAAC,MAAM,IACL,SAAS,EAAE,UAAU,WACjB,GAAC,MAAM,CAAC,mBAAmB,IAAG,aAAa,IAAI,aAAa,GAAG,CAAC,OAClE,KAAK,EACL,MAAM,CAAC,aAAa,CACrB,EACD,QAAQ,EAAE,aAAa,IAAI,aAAa,GAAG,CAAC,EAC5C,SAAS,QACT,QAAQ,EAAEA,IAAC,gBAAgB,KAAG,EAC9B,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,IAAI,CAAC,GAAA,EAClC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,YAAY,iBACR,qBAAqB,6BAG1B,GACL,IACF,EACN;AACJ;;;;"}

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

@@ -1,7 +1,7 @@
 import '../../../../tslib.es6-a39f91fc.js';
 import 'react/jsx-runtime';
 import '../../../../index-6ea95111.js';
-export { T as TableSection } from '../../../../TableSection-65e88f87.js';
+export { T as TableSection } from '../../../../TableSection-442941de.js';
 import '../TableCell/TableCell.js';
 import 'react';
 import '../../../../useMediaQuery-1a3a2432.js';

package/dist/esm/components/table/components/TableSection/TableSection.test.js

@@ -1,7 +1,7 @@
 import { a as __assign } from '../../../../tslib.es6-a39f91fc.js';
 import { jsx } from 'react/jsx-runtime';
 import { c as customRender, s as screen } from '../../../../customRender-be47569b.js';
-import { T as TableSection } from '../../../../TableSection-65e88f87.js';
+import { T as TableSection } from '../../../../TableSection-442941de.js';
 import 'react';
 import 'react-dom';
 import '../../../../_commonjsHelpers-4730bd53.js';

package/dist/esm/components/table/utils/useTableNavigation/useTableNavigation.test.js

@@ -1,5 +1,5 @@
 import { l as lib } from '../../../../index-e45b0af1.js';
-import { u as useTableNavigation } from '../../../../useTableNavigation-f929fbc9.js';
+import { u as useTableNavigation } from '../../../../useTableNavigation-17d5cd3c.js';
 import '../../../../_commonjsHelpers-4730bd53.js';
 import '../../../../index-5e72c3d4.js';
 import 'react';

package/dist/esm/index.js

@@ -466,9 +466,9 @@ import './components/table/components/IconRenderer/IconRenderer.js';
 import './components/table/components/TableCell/CardCell/CardCell.js';
 import './components/table/components/TableCell/ButtonCell/ButtonCell.js';
 import './components/table/components/TableContents/TableContents.js';
-import './TableSection-65e88f87.js';
+import './TableSection-442941de.js';
 import './components/table/components/TableContents/Collapsible.js';
-import './useTableNavigation-f929fbc9.js';
+import './useTableNavigation-17d5cd3c.js';
 import './components/table/components/TableControls/TableControls.js';
 import './useScrollSync-b2d28bed.js';
 import './components/logo/LogoWrapper/LogoWrapper.js';

package/dist/esm/lib/components/table/Table.d.ts

@@ -19,6 +19,7 @@ export interface TableProps {
     tableData: TableData;
     textOverrides?: TextOverrides;
     title: string;
+    activeSection?: number;
 }
-declare const Table: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
+declare const Table: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection }: TableProps) => JSX.Element;
 export { Table };

package/dist/esm/lib/components/table/Table.stories.d.ts

@@ -2,7 +2,7 @@ import { TableProps } from './Table';
 import { TableData } from './types';
 declare const story: {
     title: string;
-    component: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
+    component: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection }: TableProps) => JSX.Element;
     argTypes: {
         tableData: {
             subContent: string;
@@ -63,7 +63,7 @@ declare const story: {
     };
 };
 export declare const TableStory: {
-    ({ collapsibleSections, tableData, hideColumns, hideDetails, hideRows, stickyHeaderTopOffset, textOverrides, title, }: TableProps): JSX.Element;
+    ({ collapsibleSections, tableData, hideColumns, hideDetails, hideRows, stickyHeaderTopOffset, textOverrides, title, activeSection, }: TableProps): JSX.Element;
     storyName: string;
 };
 export declare const TableDataType: () => JSX.Element;

package/dist/esm/lib/components/table/utils/useTableNavigation/useTableNavigation.d.ts

@@ -2,6 +2,7 @@
 interface UseTableNavigationReturn {
     activeSection: number;
     navigateTable: (increase?: boolean) => void;
+    setActiveSection: (section: number) => void;
 }
 interface UseTableNavigationProps {
     containerRef: React.RefObject<HTMLElement>;

package/dist/esm/{useTableNavigation-f929fbc9.js → useTableNavigation-17d5cd3c.js}

@@ -47,8 +47,9 @@ var useTableNavigation = function (_a) {
     return {
         activeSection: activeSection + 1,
         navigateTable: handleScrollToSection,
+        setActiveSection: setActiveSection,
     };
 };
 
 export { useTableNavigation as u };
-//# sourceMappingURL=useTableNavigation-f929fbc9.js.map
+//# sourceMappingURL=useTableNavigation-17d5cd3c.js.map

package/dist/esm/useTableNavigation-17d5cd3c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableNavigation-17d5cd3c.js","sources":["../../../src/lib/components/table/utils/useTableNavigation/useTableNavigation.ts"],"sourcesContent":["import debounce from \"lodash.debounce\";\nimport { useCallback, useEffect, useState } from \"react\";\n\ninterface UseTableNavigationReturn {\n  activeSection: number;\n  navigateTable: (increase?: boolean) => void;\n  setActiveSection: (section: number) => void;\n}\n\ninterface UseTableNavigationProps {\n  containerRef: React.RefObject<HTMLElement>,\n  enabled?: boolean,\n  onSelectionChanged?: (index: number) => void\n}\n\nexport const useTableNavigation = ({\n  enabled,\n  containerRef,\n  onSelectionChanged\n}: UseTableNavigationProps): UseTableNavigationReturn => {\n  const [activeSection, setActiveSection] = useState(0);\n\n  const handleScrollToSection = (increase?: boolean) => {\n    if (!enabled) {\n      return;\n    }\n\n    setActiveSection((prevSection) => \n      prevSection + (increase ? 1 : -1)\n    );\n  };\n\n  const handleTableScroll = useCallback(() => {\n    if (!containerRef.current || !enabled) {\n      return;\n    }\n\n    const containerWidth = containerRef.current.getBoundingClientRect().width;\n    const scrollLeft = containerRef.current.scrollLeft * 1.1;\n    const cellWidth = containerWidth / 2;\n\n    setActiveSection(Math.floor(scrollLeft / cellWidth));\n   }, [activeSection, containerRef, enabled]);\n\n  const debouncedTableScroll = debounce(handleTableScroll, 150);\n\n  useEffect(() => {\n    const container = containerRef.current;\n\n    container?.addEventListener('scroll', debouncedTableScroll, {\n      passive: true,\n    });\n\n    return container?.removeEventListener('scroll', handleTableScroll);\n  }, [enabled]);\n\n  useEffect(() => {\n    if (!enabled) {\n      return\n    }\n\n    onSelectionChanged?.(activeSection + 1);\n\n    if (containerRef.current) {\n      const containerWidth = containerRef.current.getBoundingClientRect().width;\n      const cellWidth = containerWidth / 2;\n\n      containerRef.current.scroll({\n        top: 0,\n        left: cellWidth * activeSection,\n        behavior: 'smooth',\n      });\n    }\n  }, [enabled, activeSection]);\n\n  return {\n    activeSection: activeSection + 1,\n    navigateTable: handleScrollToSection,\n    setActiveSection,\n  }\n}"],"names":["debounce"],"mappings":";;;IAea,kBAAkB,GAAG,UAAC,EAIT;QAHxB,OAAO,aAAA,EACP,YAAY,kBAAA,EACZ,kBAAkB,wBAAA;IAEZ,IAAA,KAAoC,QAAQ,CAAC,CAAC,CAAC,EAA9C,aAAa,QAAA,EAAE,gBAAgB,QAAe,CAAC;IAEtD,IAAM,qBAAqB,GAAG,UAAC,QAAkB;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QAED,gBAAgB,CAAC,UAAC,WAAW;YAC3B,OAAA,WAAW,IAAI,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;SAAA,CAClC,CAAC;KACH,CAAC;IAEF,IAAM,iBAAiB,GAAG,WAAW,CAAC;QACpC,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;YACrC,OAAO;SACR;QAED,IAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAC1E,IAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,UAAU,GAAG,GAAG,CAAC;QACzD,IAAM,SAAS,GAAG,cAAc,GAAG,CAAC,CAAC;QAErC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC;KACrD,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5C,IAAM,oBAAoB,GAAGA,eAAQ,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;IAE9D,SAAS,CAAC;QACR,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QAEvC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,EAAE;YAC1D,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,OAAO,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC;KACpE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC;QACR,IAAI,CAAC,OAAO,EAAE;YACZ,OAAM;SACP;QAED,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,aAAa,GAAG,CAAC,CAAC,CAAC;QAExC,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,IAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAC1E,IAAM,SAAS,GAAG,cAAc,GAAG,CAAC,CAAC;YAErC,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC;gBAC1B,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,SAAS,GAAG,aAAa;gBAC/B,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;SACJ;KACF,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAE7B,OAAO;QACL,aAAa,EAAE,aAAa,GAAG,CAAC;QAChC,aAAa,EAAE,qBAAqB;QACpC,gBAAgB,kBAAA;KACjB,CAAA;AACH;;;;"}