@popsure/dirty-swan 0.54.1 → 0.54.2

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

@@ -1,13 +1,12 @@
-import { ModalFunction, TableSectionData } from './types';
+import { ModalFunction, TableData } from './types';
 type TextOverrides = {
     showDetails?: string;
     hideDetails?: string;
 };
-export type TableData = TableSectionData[];
 export interface TableProps {
     className?: string;
     collapsibleSections?: boolean;
-    data: TableData;
+    tableData: TableData;
     hideDetails?: boolean;
     onModalOpen?: ModalFunction;
     onSelectionChanged?: (index: number) => void;
@@ -15,5 +14,5 @@ export interface TableProps {
     textOverrides?: TextOverrides;
     title: string;
 }
-declare const Table: ({ className, collapsibleSections, data, hideDetails, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
+declare const Table: ({ className, collapsibleSections, tableData, hideDetails, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
 export { Table };

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

@@ -1,7 +1,8 @@
-import { TableData, TableProps } from './Table';
+import { TableProps } from './Table';
+import { TableData } from './types';
 declare const story: {
     title: string;
-    component: ({ className, collapsibleSections, data, hideDetails, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
+    component: ({ className, collapsibleSections, tableData, hideDetails, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
     argTypes: {
         data: {
             subContent: string;
@@ -38,7 +39,7 @@ declare const story: {
         };
     };
     args: {
-        data: TableData;
+        tableData: TableData;
         collapsibleSections: boolean;
         hideDetails: boolean;
         stickyHeaderTopOffset: number;
@@ -51,7 +52,7 @@ declare const story: {
     };
 };
 export declare const TableStory: {
-    ({ collapsibleSections, data, hideDetails, stickyHeaderTopOffset, textOverrides, title, }: TableProps): JSX.Element;
+    ({ collapsibleSections, tableData, hideDetails, stickyHeaderTopOffset, textOverrides, title, }: TableProps): JSX.Element;
     storyName: string;
 };
 export declare const TableDataType: () => JSX.Element;

package/dist/cjs/lib/components/table/components/TableContents/TableContents.d.ts

@@ -0,0 +1,13 @@
+import { ModalFunction, TableData } from '../../types';
+export interface TableContentsProps {
+    className?: string;
+    collapsibleSections?: boolean;
+    tableData: TableData;
+    hideDetails?: boolean;
+    isMobile?: boolean;
+    openModal?: ModalFunction;
+    shouldHideDetails?: boolean;
+    title: string;
+}
+declare const TableContents: ({ className, collapsibleSections, tableData, hideDetails, isMobile, openModal, shouldHideDetails, title, }: TableContentsProps) => JSX.Element;
+export { TableContents };

package/dist/cjs/lib/components/table/components/TableSection/TableSection.d.ts

@@ -1,24 +1,13 @@
 import { TableCellProps } from '../TableCell/TableCell';
-import { ReactNode } from 'react';
-import { ModalFunction } from '../../types';
-export type TableSectionType = {
-    title?: string;
-    icon?: ReactNode;
-};
-interface TableSectionData {
-    section?: TableSectionType;
-    items: TableCellProps[][];
-}
-export type TableData = TableSectionData[];
+import { ModalFunction, TableCellRowData } from '../../types';
 export interface TableSectionProps {
     className?: string;
-    collapsibleSections?: boolean;
-    data: TableData;
-    hideDetails?: boolean;
-    isMobile?: boolean;
+    tableCellRows: TableCellRowData[];
+    hideHeader?: boolean;
     openModal?: ModalFunction;
-    shouldHideDetails?: boolean;
     title: string;
+    width?: number | string;
 }
-declare const TableSection: ({ className, collapsibleSections, data, hideDetails, isMobile, openModal, shouldHideDetails, title, }: TableSectionProps) => JSX.Element;
+declare const TableSection: ({ className, tableCellRows, hideHeader, openModal, title, width, }: TableSectionProps) => JSX.Element;
+export type { TableCellProps };
 export { TableSection };

package/dist/cjs/lib/components/table/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { TableCellProps } from './components/TableCell/TableCell';
+import type { TableCellProps } from './components/TableCell/TableCell';
 export type TableSectionType = {
     title?: string;
     icon?: ReactNode;
@@ -8,8 +8,10 @@ export type ModalData = {
     title?: ReactNode;
     body?: ReactNode;
 };
-export interface TableSectionData {
+export type TableCellRowData = TableCellProps[];
+export type TableSectionData = {
     section?: TableSectionType;
-    items: TableCellProps[][];
-}
+    rows: TableCellRowData[];
+};
+export type TableData = TableSectionData[];
 export type ModalFunction = (modalData: ModalData) => void;

package/dist/esm/{Collapsible-ac67187a.js → Collapsible-a355828b.js}

@@ -63,4 +63,4 @@ var Collapsible = function (_a) {
 };
 
 export { Collapsible as C, useMediaQuery as u };
-//# sourceMappingURL=Collapsible-ac67187a.js.map
+//# sourceMappingURL=Collapsible-a355828b.js.map

package/dist/esm/Collapsible-a355828b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible-a355828b.js","sources":["../../../src/lib/hooks/useMediaQuery.ts","../../../src/lib/components/table/components/TableContents/Collapsible.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n// USAGE:\n// const isMobile = useMediaQuery('BELOW_MOBILE');\n\nexport const breakpointsArray = [\n  'ABOVE_MOBILE',\n  'ABOVE_TABLET',\n  'ABOVE_DESKTOP',\n  'BELOW_MOBILE',\n  'BELOW_TABLET',\n  'BELOW_DESKTOP',\n] as const;\n\nexport type Breakpoint = typeof breakpointsArray[number];\nexport type BreakpointData = { initialValue: boolean; queryString: string };\n\nexport const breakpointLookup = (breakpoint: Breakpoint): BreakpointData => {\n  switch (breakpoint) {\n    case 'BELOW_MOBILE':\n    default:\n      return {\n        initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(max-width: 34rem)',\n      };\n    case 'BELOW_TABLET':\n      return {\n        initialValue: window.innerWidth <= 720, // 45rem = 720px = tablet breakpoint\n        queryString: '(max-width: 45rem)',\n      };\n    case 'BELOW_DESKTOP':\n      return {\n        initialValue: window.innerWidth <= 1024, // 64rem = 1024px = desktop breakpoint\n        queryString: '(max-width: 64rem)',\n      };\n    case 'ABOVE_MOBILE':\n      return {\n        initialValue: window.innerWidth >= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(min-width: 34rem)',\n      };\n    case 'ABOVE_TABLET':\n      return {\n        initialValue: window.innerWidth >= 720, // 45rem = 720px = tablet breakpoint\n        queryString: '(min-width: 45rem)',\n      };\n    case 'ABOVE_DESKTOP':\n      return {\n        initialValue: window.innerWidth >= 1024, // 64rem = 1024px = desktop breakpoint\n        queryString: '(min-width: 64rem)',\n      };\n  }\n};\n\nexport const useMediaQuery = (breakpoint: Breakpoint) => {\n  const { initialValue, queryString } = breakpointLookup(breakpoint);\n\n  const [matchesBreakpoint, setMatchesBreakpoint] = useState(initialValue);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(queryString);\n\n    const updateMediaQuery = (e: MediaQueryListEvent) =>\n      setMatchesBreakpoint(e.matches);\n\n    mediaQuery.addEventListener('change', updateMediaQuery);\n\n    return () => {\n      mediaQuery.removeEventListener('change', updateMediaQuery);\n    };\n  }, [queryString]);\n\n  return matchesBreakpoint;\n};\n","import { ReactNode } from \"react\";\nimport AnimateHeight from \"react-animate-height\";\nimport { useMediaQuery } from \"../../../../hooks/useMediaQuery\";\n\ninterface CollapsibleProps {\n  children: ReactNode;\n  isExpanded?: boolean;\n  isMobile?: boolean;\n}\n  \nexport const Collapsible = ({ children, isExpanded }: CollapsibleProps) => {\n  const isDesktop = useMediaQuery('ABOVE_DESKTOP');\n\n  if (!isDesktop) {\n    return (\n      <div>\n        {isExpanded ? children : null}\n      </div>\n    );\n  }\n\n  return (\n    <AnimateHeight\n      duration={300}\n      height={isExpanded ? 'auto' : 0}\n    >\n      <div>{children}</div>\n    </AnimateHeight>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;AAiBO,IAAM,gBAAgB,GAAG,UAAC,UAAsB;IACrD,QAAQ,UAAU;QAChB,KAAK,cAAc,CAAC;QACpB;YACE,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG;gBACtC,WAAW,EAAE,oBAAoB;aAClC,CAAC;QACJ,KAAK,cAAc;YACjB,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG;gBACtC,WAAW,EAAE,oBAAoB;aAClC,CAAC;QACJ,KAAK,eAAe;YAClB,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,IAAI;gBACvC,WAAW,EAAE,oBAAoB;aAClC,CAAC;QACJ,KAAK,cAAc;YACjB,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG;gBACtC,WAAW,EAAE,oBAAoB;aAClC,CAAC;QACJ,KAAK,cAAc;YACjB,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG;gBACtC,WAAW,EAAE,oBAAoB;aAClC,CAAC;QACJ,KAAK,eAAe;YAClB,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,IAAI;gBACvC,WAAW,EAAE,oBAAoB;aAClC,CAAC;KACL;AACH,CAAC,CAAC;IAEW,aAAa,GAAG,UAAC,UAAsB;IAC5C,IAAA,KAAgC,gBAAgB,CAAC,UAAU,CAAC,EAA1D,YAAY,kBAAA,EAAE,WAAW,iBAAiC,CAAC;IAE7D,IAAA,KAA4C,QAAQ,CAAC,YAAY,CAAC,EAAjE,iBAAiB,QAAA,EAAE,oBAAoB,QAA0B,CAAC;IAEzE,SAAS,CAAC;QACR,IAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QAElD,IAAM,gBAAgB,GAAG,UAAC,CAAsB;YAC9C,OAAA,oBAAoB,CAAC,CAAC,CAAC,OAAO,CAAC;SAAA,CAAC;QAElC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QAExD,OAAO;YACL,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;SAC5D,CAAC;KACH,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,iBAAiB,CAAC;AAC3B;;IC9Da,WAAW,GAAG,UAAC,EAA0C;QAAxC,QAAQ,cAAA,EAAE,UAAU,gBAAA;IAChD,IAAM,SAAS,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;IAEjD,IAAI,CAAC,SAAS,EAAE;QACd,QACEA,uBACG,UAAU,GAAG,QAAQ,GAAG,IAAI,GACzB,EACN;KACH;IAED,QACEA,IAAC,aAAa,IACZ,QAAQ,EAAE,GAAG,EACb,MAAM,EAAE,UAAU,GAAG,MAAM,GAAG,CAAC,YAE/BA,uBAAM,QAAQ,GAAO,GACP,EAChB;AACJ;;;;"}

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

@@ -7,12 +7,12 @@ import ChevronDownIcon from '../icon/icons/ChevronDown.js';
 import ChevronUpIcon from '../icon/icons/ChevronUp.js';
 import { Card } from '../cards/card/index.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
-import { u as useMediaQuery } from '../../Collapsible-ac67187a.js';
-import { TableSection } from './components/TableSection/TableSection.js';
+import { u as useMediaQuery } from '../../Collapsible-a355828b.js';
+import { TableContents } from './components/TableContents/TableContents.js';
 import { c as classNames } from '../../index-6ea95111.js';
 import { u as useTableNavigation } from '../../useTableNavigation-8e50b121.js';
 import { TableControls } from './components/TableControls/TableControls.js';
-import { TableContent } from './components/TableContent/TableContent.js';
+import { TableSection } from './components/TableSection/TableSection.js';
 import { u as useScrollSync } from '../../useScrollSync-b2d28bed.js';
 import '../button/index.js';
 import '../icon/icons/Check.js';
@@ -40,14 +40,14 @@ var defaultTextOverrides = {
 };
 var Table = function (_a) {
     var _b, _c, _d, _e, _f;
-    var className = _a.className, collapsibleSections = _a.collapsibleSections, data = _a.data, hideDetails = _a.hideDetails, onModalOpen = _a.onModalOpen, onSelectionChanged = _a.onSelectionChanged, _g = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _g === void 0 ? 0 : _g, definedTextOverrides = _a.textOverrides, title = _a.title;
+    var className = _a.className, collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, hideDetails = _a.hideDetails, onModalOpen = _a.onModalOpen, onSelectionChanged = _a.onSelectionChanged, _g = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _g === void 0 ? 0 : _g, definedTextOverrides = _a.textOverrides, title = _a.title;
     var textOverrides = __assign(__assign({}, defaultTextOverrides), definedTextOverrides);
     var isMobile = useMediaQuery('BELOW_MOBILE');
     var _h = useState(null), infoModalData = _h[0], setInfoModalData = _h[1];
     var _j = useState(true), shouldHideDetails = _j[0], setShouldHideDetails = _j[1];
     var containerRef = useRef(null);
     var headerRef = useRef(null);
-    var columnsLength = data[0].items[0].length;
+    var columnsLength = tableData[0].rows[0].length;
     useScrollSync(headerRef, containerRef, !isMobile);
     var _k = useTableNavigation({
         enabled: isMobile,
@@ -55,7 +55,7 @@ var Table = function (_a) {
         columnsLength: columnsLength,
         onSelectionChanged: onSelectionChanged,
     }), activeSection = _k.activeSection, navigateTable = _k.navigateTable;
-    var currentActiveSection = (_d = (_c = (_b = data === null || data === void 0 ? void 0 : data[0]) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d[activeSection];
+    var currentActiveSection = (_d = (_c = (_b = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _b === void 0 ? void 0 : _b.rows) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d[activeSection];
     var handleOpenModal = function (_a) {
         var body = _a.body, title = _a.title;
         onModalOpen === null || onModalOpen === void 0 ? void 0 : onModalOpen({ body: body, title: title });
@@ -66,7 +66,7 @@ var Table = function (_a) {
                             body: body,
                             title: currentActiveSection === null || currentActiveSection === void 0 ? void 0 : currentActiveSection.content,
                         });
-                    }, isNavigation: true })) })) : (jsx("div", { "aria-hidden": true, className: styles.stickyHeader, style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsx("div", { className: styles.container, ref: headerRef, children: jsx(TableContent, { data: [(_f = (_e = data === null || data === void 0 ? void 0 : data[0]) === null || _e === void 0 ? void 0 : _e.items) === null || _f === void 0 ? void 0 : _f[0]], title: title, className: className, openModal: handleOpenModal }) }) })), jsx("div", { ref: containerRef, className: classNames(styles.container, 'pb8'), children: jsx(TableSection, { data: data, title: title, className: className, collapsibleSections: collapsibleSections, hideDetails: hideDetails, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal }) }), hideDetails && (jsx(Card, { "data-testid": "show-hide-details", classNames: {
+                    }, isNavigation: true })) })) : (jsx("div", { "aria-hidden": true, className: styles.stickyHeader, style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsx("div", { className: styles.container, ref: headerRef, children: jsx(TableSection, { tableCellRows: [(_f = (_e = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _e === void 0 ? void 0 : _e.rows) === null || _f === void 0 ? void 0 : _f[0]], title: title, className: className, openModal: handleOpenModal }) }) })), jsx("div", { ref: containerRef, className: classNames(styles.container, 'pb8'), children: jsx(TableContents, { tableData: tableData, title: title, className: className, collapsibleSections: collapsibleSections, hideDetails: hideDetails, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal }) }), hideDetails && (jsx(Card, { "data-testid": "show-hide-details", classNames: {
                     buttonWrapper: 'm8 mt32',
                     title: 'd-flex gap8 ai-center jc-center',
                     wrapper: 'bg-grey-200',

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, TableCellProps } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { 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 { TableSection } from './components/TableSection/TableSection';\nimport classNames from 'classnames';\nimport { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';\nimport { TableControls } from './components/TableControls/TableControls';\nimport { TableContent } from './components/TableContent/TableContent';\nimport { useScrollSync } from './utils/useScrollSync/useScrollSync';\nimport { ModalData, ModalFunction, TableSectionData } from './types';\n\ntype TextOverrides = {\n  showDetails?: string;\n  hideDetails?: string;\n};\n\nexport type TableData = TableSectionData[];\n\nexport interface TableProps {\n  className?: string;\n  collapsibleSections?: boolean;\n  data: TableData;\n  hideDetails?: boolean;\n  onModalOpen?: ModalFunction;\n  onSelectionChanged?: (index: number) => void;\n  stickyHeaderTopOffset?: number;\n  textOverrides?: TextOverrides;\n  title: string;\n}\n\nconst defaultTextOverrides = {\n  showDetails: 'Show details',\n  hideDetails: 'Hide details',\n};\n\nconst Table = ({\n  className,\n  collapsibleSections,\n  data,\n  hideDetails,\n  onModalOpen,\n  onSelectionChanged,\n  stickyHeaderTopOffset = 0,\n  textOverrides: definedTextOverrides,\n  title,\n}: TableProps) => {\n  const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n  const isMobile = useMediaQuery('BELOW_MOBILE');\n  const [infoModalData, setInfoModalData] = useState<ModalData | null>(null);\n  const [shouldHideDetails, setShouldHideDetails] = useState(true);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const columnsLength = data[0].items[0].length;\n\n  useScrollSync(headerRef, containerRef, !isMobile);\n\n  const { activeSection, navigateTable } = useTableNavigation({\n    enabled: isMobile,\n    containerRef,\n    columnsLength,\n    onSelectionChanged,\n  });\n\n  const currentActiveSection = data?.[0]?.items?.[0]?.[activeSection];\n\n  const handleOpenModal: ModalFunction = ({ body, title }) => {\n    onModalOpen?.({ body, title });\n    setInfoModalData({ body, title });\n  };\n\n  return (\n    <div className={classNames(styles.wrapper, 'bg-white')}>\n      {isMobile ? (\n        <TableControls\n          activeSection={activeSection}\n          columnsLength={columnsLength}\n          navigateTable={navigateTable}\n          stickyHeaderTopOffset={stickyHeaderTopOffset}\n        >\n          <TableCell\n            {...currentActiveSection}\n            openModal={(body) =>\n              handleOpenModal({\n                body,\n                title: currentActiveSection?.content,\n              })\n            }\n            isNavigation\n          />\n        </TableControls>\n      ) : (\n        <div\n          aria-hidden\n          className={styles.stickyHeader}\n          style={{ top: `${stickyHeaderTopOffset}px` }}\n        >\n          <div className={styles.container} ref={headerRef}>\n            <TableContent\n              data={[data?.[0]?.items?.[0]]}\n              title={title}\n              className={className}\n              openModal={handleOpenModal}\n            />\n          </div>\n        </div>\n      )}\n\n      <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n        <TableSection\n          data={data}\n          title={title}\n          className={className}\n          collapsibleSections={collapsibleSections}\n          hideDetails={hideDetails}\n          isMobile={isMobile}\n          shouldHideDetails={shouldHideDetails}\n          openModal={handleOpenModal}\n        />\n      </div>\n\n      {hideDetails && (\n        <Card\n          data-testid=\"show-hide-details\"\n          classNames={{\n            buttonWrapper: 'm8 mt32',\n            title: 'd-flex gap8 ai-center jc-center',\n            wrapper: 'bg-grey-200',\n          }}\n          title={\n            <>\n              {shouldHideDetails\n                ? textOverrides.showDetails\n                : textOverrides.hideDetails}\n              {shouldHideDetails ? (\n                <ChevronDownIcon size={24} />\n              ) : (\n                <ChevronUpIcon size={24} />\n              )}\n            </>\n          }\n          actionIcon={null}\n          dropShadow={false}\n          titleVariant=\"small\"\n          density=\"compact\"\n          onClick={() => setShouldHideDetails((current) => !current)}\n        />\n      )}\n\n      <BottomOrRegularModal\n        isOpen={infoModalData?.body ? true : false}\n        title={infoModalData?.title}\n        onClose={() => setInfoModalData(null)}\n      >\n        <div className=\"pt8 p24 wmn6\">{infoModalData?.body}</div>\n      </BottomOrRegularModal>\n    </div>\n  );\n};\n\nexport { Table };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell, TableCellProps } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { 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 { ModalData, ModalFunction, TableData } from './types';\n\ntype TextOverrides = {\n  showDetails?: string;\n  hideDetails?: string;\n};\n\nexport interface TableProps {\n  className?: string;\n  collapsibleSections?: boolean;\n  tableData: TableData;\n  hideDetails?: boolean;\n  onModalOpen?: ModalFunction;\n  onSelectionChanged?: (index: number) => void;\n  stickyHeaderTopOffset?: number;\n  textOverrides?: TextOverrides;\n  title: string;\n}\n\nconst defaultTextOverrides = {\n  showDetails: 'Show details',\n  hideDetails: 'Hide details',\n};\n\nconst Table = ({\n  className,\n  collapsibleSections,\n  tableData,\n  hideDetails,\n  onModalOpen,\n  onSelectionChanged,\n  stickyHeaderTopOffset = 0,\n  textOverrides: definedTextOverrides,\n  title,\n}: TableProps) => {\n  const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n  const isMobile = useMediaQuery('BELOW_MOBILE');\n  const [infoModalData, setInfoModalData] = useState<ModalData | null>(null);\n  const [shouldHideDetails, setShouldHideDetails] = useState(true);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const columnsLength = tableData[0].rows[0].length;\n\n  useScrollSync(headerRef, containerRef, !isMobile);\n\n  const { activeSection, navigateTable } = useTableNavigation({\n    enabled: isMobile,\n    containerRef,\n    columnsLength,\n    onSelectionChanged,\n  });\n\n  const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];\n\n  const handleOpenModal: ModalFunction = ({ body, title }) => {\n    onModalOpen?.({ body, title });\n    setInfoModalData({ body, title });\n  };\n\n  return (\n    <div className={classNames(styles.wrapper, 'bg-white')}>\n      {isMobile ? (\n        <TableControls\n          activeSection={activeSection}\n          columnsLength={columnsLength}\n          navigateTable={navigateTable}\n          stickyHeaderTopOffset={stickyHeaderTopOffset}\n        >\n          <TableCell\n            {...currentActiveSection}\n            openModal={(body) =>\n              handleOpenModal({\n                body,\n                title: currentActiveSection?.content,\n              })\n            }\n            isNavigation\n          />\n        </TableControls>\n      ) : (\n        <div\n          aria-hidden\n          className={styles.stickyHeader}\n          style={{ top: `${stickyHeaderTopOffset}px` }}\n        >\n          <div className={styles.container} ref={headerRef}>\n            <TableSection\n              tableCellRows={[tableData?.[0]?.rows?.[0]]}\n              title={title}\n              className={className}\n              openModal={handleOpenModal}\n            />\n          </div>\n        </div>\n      )}\n\n      <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n        <TableContents\n          tableData={tableData}\n          title={title}\n          className={className}\n          collapsibleSections={collapsibleSections}\n          hideDetails={hideDetails}\n          isMobile={isMobile}\n          shouldHideDetails={shouldHideDetails}\n          openModal={handleOpenModal}\n        />\n      </div>\n\n      {hideDetails && (\n        <Card\n          data-testid=\"show-hide-details\"\n          classNames={{\n            buttonWrapper: 'm8 mt32',\n            title: 'd-flex gap8 ai-center jc-center',\n            wrapper: 'bg-grey-200',\n          }}\n          title={\n            <>\n              {shouldHideDetails\n                ? textOverrides.showDetails\n                : textOverrides.hideDetails}\n              {shouldHideDetails ? (\n                <ChevronDownIcon size={24} />\n              ) : (\n                <ChevronUpIcon size={24} />\n              )}\n            </>\n          }\n          actionIcon={null}\n          dropShadow={false}\n          titleVariant=\"small\"\n          density=\"compact\"\n          onClick={() => setShouldHideDetails((current) => !current)}\n        />\n      )}\n\n      <BottomOrRegularModal\n        isOpen={infoModalData?.body ? true : false}\n        title={infoModalData?.title}\n        onClose={() => setInfoModalData(null)}\n      >\n        <div className=\"pt8 p24 wmn6\">{infoModalData?.body}</div>\n      </BottomOrRegularModal>\n    </div>\n  );\n};\n\nexport { Table };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -22,10 +22,10 @@ import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
 import '../cards/card/index.js';
 import '../icon/icons/ChevronRight.js';
-import '../../Collapsible-ac67187a.js';
+import '../../Collapsible-a355828b.js';
 import '../../index-a0ef2ab4.js';
+import './components/TableContents/TableContents.js';
 import './components/TableSection/TableSection.js';
-import './components/TableContent/TableContent.js';
 import '../../useTableNavigation-8e50b121.js';
 import '../../index-5e72c3d4.js';
 import '../../_commonjsHelpers-4730bd53.js';
@@ -35,7 +35,7 @@ import '../../useScrollSync-b2d28bed.js';
 
 var initialData = [
     {
-        items: [
+        rows: [
             [
                 { content: 'Our plans' },
                 { content: 'Surgery', modalContent: 'More info on surgery' },
@@ -73,7 +73,7 @@ var initialData = [
             icon: jsx(DentalPlusIcon, { size: 24, noMargin: true }),
             title: 'Dental',
         },
-        items: [
+        rows: [
             [
                 { content: 'Regular vet visits & medication' },
                 { content: 'No' },
@@ -99,7 +99,7 @@ var initialData = [
             title: 'Travel',
             icon: jsx(PlaneIcon, { size: 24, noMargin: true }),
         },
-        items: [
+        rows: [
             [
                 { content: 'Regular vet visits & medication' },
                 { content: 'No', checkmarkValue: false },
@@ -160,7 +160,7 @@ var story = {
         },
     },
     args: {
-        data: initialData,
+        tableData: initialData,
         collapsibleSections: false,
         hideDetails: false,
         stickyHeaderTopOffset: 0,
@@ -173,11 +173,11 @@ var story = {
     },
 };
 var TableStory = function (_a) {
-    var collapsibleSections = _a.collapsibleSections, data = _a.data, hideDetails = _a.hideDetails, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, textOverrides = _a.textOverrides, title = _a.title;
-    return (jsx(Table, { collapsibleSections: collapsibleSections, data: data, hideDetails: hideDetails, stickyHeaderTopOffset: stickyHeaderTopOffset, textOverrides: textOverrides, title: title }));
+    var collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, hideDetails = _a.hideDetails, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, textOverrides = _a.textOverrides, title = _a.title;
+    return (jsx(Table, { collapsibleSections: collapsibleSections, tableData: tableData, hideDetails: hideDetails, stickyHeaderTopOffset: stickyHeaderTopOffset, textOverrides: textOverrides, title: title }));
 };
 var TableDataType = function () {
-    return (jsx("pre", { children: "\ntype TableData = {\n  section?: \n    title?: string;\n    icon?: ReactNode;\n  };\n  items: {\n    align?: 'center' | 'left' | 'right';\n    boolean?: boolean;\n    cellProps?: HTMLProps<HTMLTableCellElement>;\n    description?: ReactNode;\n    info?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    text?: ReactNode;\n    openModal?: (modalContent: ReactNode) => void;\n  }[][];\n}[];\n      " }));
+    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    content?: ReactNode;\n    modalContent?: ReactNode;\n    subContent?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    openModal?: (modalContent: ReactNode) => void;\n  }[][];\n}[];\n      " }));
 };
 TableStory.storyName = 'Table';
 

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, TableData, TableProps } from './Table';\nimport { DentalPlusIcon, PlaneIcon } from '../icon';\n\nconst initialData: TableData = [\n  {\n    items: [\n      [\n        { content: 'Our plans' },\n        { content: 'Surgery', modalContent: 'More info on surgery' },\n        { content: 'Standard' },\n        { content: 'Premium' },\n      ],\n      [\n        {\n          content: 'Regular vet visits & medication',\n          subContent: 'Annual Only',\n        },\n        { content: 'No', subContent: 'Annual Only' },\n        { content: 'Yes' },\n        { content: 'Yes' },\n      ],\n      [\n        { content: 'Operations', modalContent: 'Operations info' },\n        { checkmarkValue: true, modalContent: 'Operations info column 2' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { content: '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={24} noMargin />,\n      title: 'Dental',\n    },\n    items: [\n      [\n        { content: 'Regular vet visits & medication' },\n        { content: 'No' },\n        { content: 'Yes' },\n        { content: 'Yes' },\n      ],\n      [\n        { content: 'Operations', modalContent: 'info' },\n        { checkmarkValue: true, modalContent: 'Maybe' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { content: '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    section: {\n      title: 'Travel',\n      icon: <PlaneIcon size={24} noMargin />,\n    },\n    items: [\n      [\n        { content: 'Regular vet visits & medication' },\n        { content: 'No', checkmarkValue: false },\n        { content: 'Yes' },\n        { content: 'Yes' },\n      ],\n      [\n        { content: 'Operations', modalContent: 'info' },\n        { checkmarkValue: true, modalContent: 'Maybe' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { content: '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    data: {\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    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    data: 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  },\n};\n\nexport const TableStory = ({\n  collapsibleSections,\n  data,\n  hideDetails,\n  stickyHeaderTopOffset,\n  textOverrides,\n  title,\n}: TableProps) => (\n  <Table\n    collapsibleSections={collapsibleSections}\n    data={data}\n    hideDetails={hideDetails}\n    stickyHeaderTopOffset={stickyHeaderTopOffset}\n    textOverrides={textOverrides}\n    title={title}\n  />\n);\n\nexport const TableDataType = () => {\n  return (\n    <pre>\n      {`\ntype TableData = {\n  section?: \n    title?: string;\n    icon?: ReactNode;\n  };\n  items: {\n    align?: 'center' | 'left' | 'right';\n    boolean?: boolean;\n    cellProps?: HTMLProps<HTMLTableCellElement>;\n    description?: ReactNode;\n    info?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    text?: ReactNode;\n    openModal?: (modalContent: ReactNode) => void;\n  }[][];\n}[];\n      `}\n    </pre>\n  );\n};\n\nTableStory.storyName = 'Table';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}
+{"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';\n\nconst initialData: TableData = [\n  {\n    rows: [\n      [\n        { content: 'Our plans' },\n        { content: 'Surgery', modalContent: 'More info on surgery' },\n        { content: 'Standard' },\n        { content: 'Premium' },\n      ],\n      [\n        {\n          content: 'Regular vet visits & medication',\n          subContent: 'Annual Only',\n        },\n        { content: 'No', subContent: 'Annual Only' },\n        { content: 'Yes' },\n        { content: 'Yes' },\n      ],\n      [\n        { content: 'Operations', modalContent: 'Operations info' },\n        { checkmarkValue: true, modalContent: 'Operations info column 2' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { content: '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={24} noMargin />,\n      title: 'Dental',\n    },\n    rows: [\n      [\n        { content: 'Regular vet visits & medication' },\n        { content: 'No' },\n        { content: 'Yes' },\n        { content: 'Yes' },\n      ],\n      [\n        { content: 'Operations', modalContent: 'info' },\n        { checkmarkValue: true, modalContent: 'Maybe' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { content: '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    section: {\n      title: 'Travel',\n      icon: <PlaneIcon size={24} noMargin />,\n    },\n    rows: [\n      [\n        { content: 'Regular vet visits & medication' },\n        { content: 'No', checkmarkValue: false },\n        { content: 'Yes' },\n        { content: 'Yes' },\n      ],\n      [\n        { content: 'Operations', modalContent: 'info' },\n        { checkmarkValue: true, modalContent: 'Maybe' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { content: '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    data: {\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    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  },\n};\n\nexport const TableStory = ({\n  collapsibleSections,\n  tableData,\n  hideDetails,\n  stickyHeaderTopOffset,\n  textOverrides,\n  title,\n}: TableProps) => (\n  <Table\n    collapsibleSections={collapsibleSections}\n    tableData={tableData}\n    hideDetails={hideDetails}\n    stickyHeaderTopOffset={stickyHeaderTopOffset}\n    textOverrides={textOverrides}\n    title={title}\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    content?: 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"],"mappings":"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"}

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

@@ -24,30 +24,30 @@ import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
 import '../cards/card/index.js';
 import '../icon/icons/ChevronRight.js';
-import '../../Collapsible-ac67187a.js';
+import '../../Collapsible-a355828b.js';
 import '../../index-a0ef2ab4.js';
+import './components/TableContents/TableContents.js';
 import './components/TableSection/TableSection.js';
-import './components/TableContent/TableContent.js';
 import '../../useTableNavigation-8e50b121.js';
 import '../../index-5e72c3d4.js';
 import './components/TableControls/TableControls.js';
 import '../icon/icons/ChevronLeft.js';
 import '../../useScrollSync-b2d28bed.js';
 
-var data = [
+var tableData = [
     {
         section: {
             title: 'Section 1',
             icon: jsx("span", { children: "Icon 1" }),
         },
-        items: [[{ content: 'Item 1' }, { content: 'Item 2' }]],
+        rows: [[{ content: 'Item 1' }, { content: 'Item 2' }]],
     },
     {
         section: {
             title: 'Section 2',
             icon: jsx("span", { children: "Icon 2" }),
         },
-        items: [
+        rows: [
             [
                 { content: 'Item 3' },
                 { content: 'Item 4', modalContent: 'Additional item' },
@@ -57,7 +57,7 @@ var data = [
 ];
 describe('Table', function () {
     it('renders the table with sections and items', function () {
-        customRender(jsx(Table, { data: data, title: "Test Table" }));
+        customRender(jsx(Table, { tableData: tableData, title: "Test Table" }));
         expect(screen.getByText('Section 1')).toBeInTheDocument();
         expect(screen.getByText('Section 2')).toBeInTheDocument();
         expect(screen.getAllByText('Item 1')[0]).toBeInTheDocument();
@@ -66,21 +66,21 @@ describe('Table', function () {
         expect(screen.getByText('Item 4')).toBeInTheDocument();
     });
     it('renders the table without sections', function () {
-        var dataWithoutSections = [{ items: data[0].items }];
-        customRender(jsx(Table, { data: dataWithoutSections, title: "Test Table" }));
+        var dataWithoutSections = [{ rows: tableData[0].rows }];
+        customRender(jsx(Table, { tableData: dataWithoutSections, title: "Test Table" }));
         expect(screen.getAllByText('Item 1')[0]).toBeVisible();
         expect(screen.getAllByText('Item 2')[0]).toBeVisible();
     });
     it('hides the show/hide details button if hideDetails is false', function () {
-        customRender(jsx(Table, { data: data, hideDetails: true, title: "Test Table" }));
+        customRender(jsx(Table, { tableData: tableData, hideDetails: true, title: "Test Table" }));
         expect(screen.queryByTestId('show-hide-details')).toBeInTheDocument();
     });
     it('shows the show/hide details button if hideDetails is true', function () {
-        customRender(jsx(Table, { data: data, hideDetails: true, title: "Test Table" }));
+        customRender(jsx(Table, { tableData: tableData, hideDetails: true, title: "Test Table" }));
         expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();
     });
     it('hides the sections if hideDetails is true', function () {
-        customRender(jsx(Table, { data: data, hideDetails: true, title: "Test Table" }));
+        customRender(jsx(Table, { tableData: tableData, hideDetails: true, title: "Test Table" }));
         expect(screen.queryByText('Section 2')).not.toBeInTheDocument();
         expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();
     });
@@ -89,7 +89,7 @@ describe('Table', function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    user = customRender(jsx(Table, { data: data, hideDetails: true, title: "Test Table" })).user;
+                    user = customRender(jsx(Table, { tableData: tableData, hideDetails: true, title: "Test Table" })).user;
                     expect(screen.getByText('Show details')).toBeVisible();
                     return [4 /*yield*/, user.click(screen.getByTestId('show-hide-details'))];
                 case 1:
@@ -105,7 +105,7 @@ describe('Table', function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    user = customRender(jsx(Table, { data: data, title: "Test Table" })).user;
+                    user = customRender(jsx(Table, { tableData: tableData, title: "Test Table" })).user;
                     return [4 /*yield*/, user.click(screen.getByText('View more info'))];
                 case 1:
                     _a.sent();

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

@@ -1 +1 @@
-{"version":3,"file":"Table.test.js","sources":["../../../../../src/lib/components/table/Table.test.tsx"],"sourcesContent":["import { render, screen } from '../../util/testUtils';\nimport { Table } from './Table';\nimport { TableSectionData } from './types';\n\nconst data: TableSectionData[] = [\n  {\n    section: {\n      title: 'Section 1',\n      icon: <span>Icon 1</span>,\n    },\n    items: [[{ content: 'Item 1' }, { content: 'Item 2' }]],\n  },\n  {\n    section: {\n      title: 'Section 2',\n      icon: <span>Icon 2</span>,\n    },\n    items: [\n      [\n        { content: 'Item 3' },\n        { content: 'Item 4', modalContent: 'Additional item' },\n      ],\n    ],\n  },\n];\n\ndescribe('Table', () => {\n  it('renders the table with sections and items', () => {\n    render(<Table data={data} title=\"Test Table\" />);\n\n    expect(screen.getByText('Section 1')).toBeInTheDocument();\n    expect(screen.getByText('Section 2')).toBeInTheDocument();\n\n    expect(screen.getAllByText('Item 1')[0]).toBeInTheDocument();\n    expect(screen.getAllByText('Item 2')[0]).toBeInTheDocument();\n    expect(screen.getByText('Item 3')).toBeInTheDocument();\n    expect(screen.getByText('Item 4')).toBeInTheDocument();\n  });\n\n  it('renders the table without sections', () => {\n    const dataWithoutSections = [{ items: data[0].items }];\n\n    render(<Table data={dataWithoutSections} title=\"Test Table\" />);\n\n    expect(screen.getAllByText('Item 1')[0]).toBeVisible();\n    expect(screen.getAllByText('Item 2')[0]).toBeVisible();\n  });\n\n  it('hides the show/hide details button if hideDetails is false', () => {\n    render(<Table data={data} hideDetails title=\"Test Table\" />);\n\n    expect(screen.queryByTestId('show-hide-details')).toBeInTheDocument();\n  });\n\n  it('shows the show/hide details button if hideDetails is true', () => {\n    render(<Table data={data} hideDetails title=\"Test Table\" />);\n\n    expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();\n  });\n\n  it('hides the sections if hideDetails is true', () => {\n    render(<Table data={data} hideDetails title=\"Test Table\" />);\n\n    expect(screen.queryByText('Section 2')).not.toBeInTheDocument();\n    expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();\n  });\n\n  it('hides the sections if hideDetails is true and shows if clicking on button', async () => {\n    const { user } = render(\n      <Table data={data} hideDetails title=\"Test Table\" />\n    );\n\n    expect(screen.getByText('Show details')).toBeVisible();\n\n    await user.click(screen.getByTestId('show-hide-details'));\n\n    expect(screen.getByText('Section 2')).toBeVisible();\n    expect(screen.getByText('Hide details')).toBeVisible();\n  });\n\n  it('shows a modal when clicking on info icon', async () => {\n    const { user } = render(<Table data={data} title=\"Test Table\" />);\n\n    await user.click(screen.getByText('View more info'));\n\n    expect(screen.getByText('Additional item')).toBeVisible();\n  });\n});\n"],"names":["_jsx","render"],"mappings":"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"}
+{"version":3,"file":"Table.test.js","sources":["../../../../../src/lib/components/table/Table.test.tsx"],"sourcesContent":["import { render, screen } from '../../util/testUtils';\nimport { Table } from './Table';\nimport { TableSectionData } from './types';\n\nconst tableData: TableSectionData[] = [\n  {\n    section: {\n      title: 'Section 1',\n      icon: <span>Icon 1</span>,\n    },\n    rows: [[{ content: 'Item 1' }, { content: 'Item 2' }]],\n  },\n  {\n    section: {\n      title: 'Section 2',\n      icon: <span>Icon 2</span>,\n    },\n    rows: [\n      [\n        { content: 'Item 3' },\n        { content: 'Item 4', modalContent: 'Additional item' },\n      ],\n    ],\n  },\n];\n\ndescribe('Table', () => {\n  it('renders the table with sections and items', () => {\n    render(<Table tableData={tableData} title=\"Test Table\" />);\n\n    expect(screen.getByText('Section 1')).toBeInTheDocument();\n    expect(screen.getByText('Section 2')).toBeInTheDocument();\n\n    expect(screen.getAllByText('Item 1')[0]).toBeInTheDocument();\n    expect(screen.getAllByText('Item 2')[0]).toBeInTheDocument();\n    expect(screen.getByText('Item 3')).toBeInTheDocument();\n    expect(screen.getByText('Item 4')).toBeInTheDocument();\n  });\n\n  it('renders the table without sections', () => {\n    const dataWithoutSections = [{ rows: tableData[0].rows }];\n\n    render(<Table tableData={dataWithoutSections} title=\"Test Table\" />);\n\n    expect(screen.getAllByText('Item 1')[0]).toBeVisible();\n    expect(screen.getAllByText('Item 2')[0]).toBeVisible();\n  });\n\n  it('hides the show/hide details button if hideDetails is false', () => {\n    render(<Table tableData={tableData} hideDetails title=\"Test Table\" />);\n\n    expect(screen.queryByTestId('show-hide-details')).toBeInTheDocument();\n  });\n\n  it('shows the show/hide details button if hideDetails is true', () => {\n    render(<Table tableData={tableData} hideDetails title=\"Test Table\" />);\n\n    expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();\n  });\n\n  it('hides the sections if hideDetails is true', () => {\n    render(<Table tableData={tableData} hideDetails title=\"Test Table\" />);\n\n    expect(screen.queryByText('Section 2')).not.toBeInTheDocument();\n    expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();\n  });\n\n  it('hides the sections if hideDetails is true and shows if clicking on button', async () => {\n    const { user } = render(\n      <Table tableData={tableData} hideDetails title=\"Test Table\" />\n    );\n\n    expect(screen.getByText('Show details')).toBeVisible();\n\n    await user.click(screen.getByTestId('show-hide-details'));\n\n    expect(screen.getByText('Section 2')).toBeVisible();\n    expect(screen.getByText('Hide details')).toBeVisible();\n  });\n\n  it('shows a modal when clicking on info icon', async () => {\n    const { user } = render(<Table tableData={tableData} title=\"Test Table\" />);\n\n    await user.click(screen.getByText('View more info'));\n\n    expect(screen.getByText('Additional item')).toBeVisible();\n  });\n});\n"],"names":["_jsx","render"],"mappings":"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"}

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

@@ -11,7 +11,7 @@ import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
 import 'react';
 import '../../../icon/IconWrapper/IconWrapper.js';
 
-var css_248z = ".TableCell-module_button__2MKH1 {\n  min-height: initial;\n  height: initial;\n  width: initial;\n}\n\n.TableCell-module_icon__2o49x {\n  margin: 2px;\n}\n\n.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\n.TableCell-module_thRow__3Qp3k {\n  position: sticky;\n  top: 0;\n}\n\n.TableCell-module_thCol__34DMO {\n  text-align: left;\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: #f5f6fb;\n}\n\n.TableCell-module_topLeftCell__3npat {\n  position: relative;\n  display: none;\n}\n.TableCell-module_topLeftCell__3npat:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: calc( 50% + 16px );\n  height: 4px;\n  width: 100%;\n  max-width: 140px;\n  background-color: #8e8cee;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_topLeftCell__3npat {\n    display: flex;\n  }\n}";
+var css_248z = ".TableCell-module_button__2MKH1 {\n  min-height: initial;\n  height: initial;\n  width: initial;\n  padding: 0;\n}\n\n.TableCell-module_icon__2o49x {\n  margin: 2px;\n}\n\n.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\n.TableCell-module_thRow__3Qp3k {\n  position: sticky;\n  top: 0;\n}\n\n.TableCell-module_thCol__34DMO {\n  text-align: left;\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: #f5f6fb;\n}\n\n.TableCell-module_topLeftCell__3npat {\n  position: relative;\n  display: none;\n}\n.TableCell-module_topLeftCell__3npat:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: calc( 50% + 16px );\n  height: 4px;\n  width: 100%;\n  max-width: 140px;\n  background-color: #8e8cee;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_topLeftCell__3npat {\n    display: flex;\n  }\n}";
 var styles = {"button":"TableCell-module_button__2MKH1","icon":"TableCell-module_icon__2o49x","th":"TableCell-module_th__2rjCU","thRow":"TableCell-module_thRow__3Qp3k","thCol":"TableCell-module_thCol__34DMO","fixedCell":"TableCell-module_fixedCell__cL3-m","topLeftCell":"TableCell-module_topLeftCell__3npat"};
 styleInject(css_248z);
 

package/dist/esm/components/table/components/{TableSection → TableContents}/Collapsible.js

@@ -1,6 +1,6 @@
 import 'react/jsx-runtime';
 import '../../../../index-a0ef2ab4.js';
-export { C as Collapsible } from '../../../../Collapsible-ac67187a.js';
+export { C as Collapsible } from '../../../../Collapsible-a355828b.js';
 import 'react';
 import '../../../../index-6ea95111.js';
 //# sourceMappingURL=Collapsible.js.map

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

@@ -0,0 +1,56 @@
+import { a as __assign, _ as __spreadArray } from '../../../../tslib.es6-a39f91fc.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { TableSection } from '../TableSection/TableSection.js';
+import ChevronDownIcon from '../../../icon/icons/ChevronDown.js';
+import ChevronUpIcon from '../../../icon/icons/ChevronUp.js';
+import { Card } from '../../../cards/card/index.js';
+import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
+import { c as classNames } from '../../../../index-6ea95111.js';
+import { C as Collapsible } from '../../../../Collapsible-a355828b.js';
+import '../TableCell/TableCell.js';
+import '../../../button/index.js';
+import '../../../icon/icons/Check.js';
+import '../../../icon/IconWrapper/IconWrapper.js';
+import '../../../icon/icons/Info.js';
+import '../../../icon/icons/StarFilled.js';
+import '../../../icon/icons/X.js';
+import '../../../icon/icons/ZapFilled.js';
+import '../../../icon/icons/ChevronRight.js';
+import '../../../../index-a0ef2ab4.js';
+
+var css_248z = ".TableContents-module_cardWrapper__2OVMv {\n  height: 88px;\n}\n\n.TableContents-module_card__Mmz6h {\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 3;\n}";
+var styles = {"cardWrapper":"TableContents-module_cardWrapper__2OVMv","card":"TableContents-module_card__Mmz6h"};
+styleInject(css_248z);
+
+var TableContents = function (_a) {
+    var _b, _c;
+    var className = _a.className, collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, hideDetails = _a.hideDetails, isMobile = _a.isMobile, openModal = _a.openModal, shouldHideDetails = _a.shouldHideDetails, title = _a.title;
+    var _d = useState(null), isSectionOpen = _d[0], setOpenSection = _d[1];
+    var firstHeadRow = (_c = (_b = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _b === void 0 ? void 0 : _b.rows) === null || _c === void 0 ? void 0 : _c[0];
+    var tableWidth = isMobile ? "".concat((firstHeadRow === null || firstHeadRow === void 0 ? void 0 : firstHeadRow.length) * 50, "%") : '';
+    var handleToggleSection = function (index) {
+        setOpenSection(function (currentSection) {
+            return currentSection === index ? null : index;
+        });
+    };
+    return (jsx("div", { style: { width: tableWidth }, children: tableData.map(function (_a, index) {
+            var rows = _a.rows, _b = _a.section, section = _b === void 0 ? {} : _b;
+            var isFirstSection = index === 0;
+            var isExpanded = !collapsibleSections
+                ? true
+                : isSectionOpen === index || isFirstSection;
+            var isVisible = hideDetails ? !shouldHideDetails : true;
+            return ((isFirstSection || isVisible) && (jsxs("div", { children: [(section === null || section === void 0 ? void 0 : section.title) && (jsx("div", { className: styles.cardWrapper, children: jsx("div", { className: classNames(styles.card, 'p8'), children: jsx(Card, __assign({ actionIcon: isExpanded ? (jsx(ChevronUpIcon, { size: 24 })) : (jsx(ChevronDownIcon, { size: 24 })), "aria-expanded": isExpanded ? 'true' : 'false', "aria-hidden": true, classNames: {
+                                    wrapper: 'bg-grey-200',
+                                    icon: 'tc-grey-900',
+                                }, dropShadow: false, icon: section === null || section === void 0 ? void 0 : section.icon, title: section.title, titleVariant: "medium" }, (collapsibleSections
+                                ? {
+                                    onClick: function () { return handleToggleSection(index); },
+                                }
+                                : {}))) }) })), jsx(Collapsible, { isExpanded: isExpanded, isMobile: isMobile, children: jsx(TableSection, { className: classNames(className, 'mb24'), tableCellRows: isFirstSection ? rows : __spreadArray([firstHeadRow], rows, true), hideHeader: true, openModal: openModal, title: "".concat(title).concat((section === null || section === void 0 ? void 0 : section.title) ? " - ".concat(section.title) : ''), width: tableWidth }) })] }, index)));
+        }) }));
+};
+
+export { TableContents };
+//# sourceMappingURL=TableContents.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableContents.js","sources":["../../../../../../../src/lib/components/table/components/TableContents/TableContents.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { TableSection } from '../TableSection/TableSection';\nimport { ChevronDownIcon, ChevronUpIcon } from '../../../icon';\nimport { Card } from '../../../cards/card';\n\nimport styles from './TableContents.module.scss';\nimport classNames from 'classnames';\nimport { Collapsible } from './Collapsible';\nimport { ModalFunction, TableData } from '../../types';\n\nexport interface TableContentsProps {\n  className?: string;\n  collapsibleSections?: boolean;\n  tableData: TableData;\n  hideDetails?: boolean;\n  isMobile?: boolean;\n  openModal?: ModalFunction;\n  shouldHideDetails?: boolean;\n  title: string;\n}\n\nconst TableContents = ({\n  className,\n  collapsibleSections,\n  tableData,\n  hideDetails,\n  isMobile,\n  openModal,\n  shouldHideDetails,\n  title,\n}: TableContentsProps) => {\n  const [isSectionOpen, setOpenSection] = useState<number | null>(null);\n  const firstHeadRow = tableData?.[0]?.rows?.[0];\n  const tableWidth = isMobile ? `${firstHeadRow?.length * 50}%` : '';\n  const handleToggleSection = (index: number) => {\n    setOpenSection((currentSection) =>\n      currentSection === index ? null : index\n    );\n  };\n\n  return (\n    <div style={{ width: tableWidth }}>\n      {tableData.map(({ rows, section = {} }, index) => {\n        const isFirstSection = index === 0;\n        const isExpanded = !collapsibleSections\n          ? true\n          : isSectionOpen === index || isFirstSection;\n        const isVisible = hideDetails ? !shouldHideDetails : true;\n\n        return (\n          (isFirstSection || isVisible) && (\n            <div key={index}>\n              {section?.title && (\n                <div className={styles.cardWrapper}>\n                  <div className={classNames(styles.card, 'p8')}>\n                    <Card\n                      actionIcon={\n                        isExpanded ? (\n                          <ChevronUpIcon size={24} />\n                        ) : (\n                          <ChevronDownIcon size={24} />\n                        )\n                      }\n                      aria-expanded={isExpanded ? 'true' : 'false'}\n                      aria-hidden\n                      classNames={{\n                        wrapper: 'bg-grey-200',\n                        icon: 'tc-grey-900',\n                      }}\n                      dropShadow={false}\n                      icon={section?.icon}\n                      title={section.title}\n                      titleVariant=\"medium\"\n                      {...(collapsibleSections\n                        ? {\n                            onClick: () => handleToggleSection(index),\n                          }\n                        : {})}\n                    />\n                  </div>\n                </div>\n              )}\n\n              <Collapsible isExpanded={isExpanded} isMobile={isMobile}>\n                <TableSection\n                  className={classNames(className, 'mb24')}\n                  tableCellRows={\n                    isFirstSection ? rows : [firstHeadRow, ...rows]\n                  }\n                  hideHeader\n                  openModal={openModal}\n                  title={`${title}${\n                    section?.title ? ` - ${section.title}` : ''\n                  }`}\n                  width={tableWidth}\n                />\n              </Collapsible>\n            </div>\n          )\n        );\n      })}\n    </div>\n  );\n};\n\nexport { TableContents };\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;IAqBM,aAAa,GAAG,UAAC,EASF;;QARnB,SAAS,eAAA,EACT,mBAAmB,yBAAA,EACnB,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,iBAAiB,uBAAA,EACjB,KAAK,WAAA;IAEC,IAAA,KAAkC,QAAQ,CAAgB,IAAI,CAAC,EAA9D,aAAa,QAAA,EAAE,cAAc,QAAiC,CAAC;IACtE,IAAM,YAAY,GAAG,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,CAAC,CAAC,0CAAE,IAAI,0CAAG,CAAC,CAAC,CAAC;IAC/C,IAAM,UAAU,GAAG,QAAQ,GAAG,UAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,IAAG,EAAE,MAAG,GAAG,EAAE,CAAC;IACnE,IAAM,mBAAmB,GAAG,UAAC,KAAa;QACxC,cAAc,CAAC,UAAC,cAAc;YAC5B,OAAA,cAAc,KAAK,KAAK,GAAG,IAAI,GAAG,KAAK;SAAA,CACxC,CAAC;KACH,CAAC;IAEF,QACEA,aAAK,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,YAC9B,SAAS,CAAC,GAAG,CAAC,UAAC,EAAsB,EAAE,KAAK;gBAA3B,IAAI,UAAA,EAAE,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA;YAClC,IAAM,cAAc,GAAG,KAAK,KAAK,CAAC,CAAC;YACnC,IAAM,UAAU,GAAG,CAAC,mBAAmB;kBACnC,IAAI;kBACJ,aAAa,KAAK,KAAK,IAAI,cAAc,CAAC;YAC9C,IAAM,SAAS,GAAG,WAAW,GAAG,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAE1D,QACE,CAAC,cAAc,IAAI,SAAS,MAC1BC,yBACG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,MACbD,aAAK,SAAS,EAAE,MAAM,CAAC,WAAW,YAChCA,aAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,YAC3CA,IAAC,IAAI,aACH,UAAU,EACR,UAAU,IACRA,IAAC,aAAa,IAAC,IAAI,EAAE,EAAE,GAAI,KAE3BA,IAAC,eAAe,IAAC,IAAI,EAAE,EAAE,GAAI,CAC9B,mBAEY,UAAU,GAAG,MAAM,GAAG,OAAO,uBAE5C,UAAU,EAAE;oCACV,OAAO,EAAE,aAAa;oCACtB,IAAI,EAAE,aAAa;iCACpB,EACD,UAAU,EAAE,KAAK,EACjB,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,EACnB,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,YAAY,EAAC,QAAQ,KAChB,mBAAmB;kCACpB;oCACE,OAAO,EAAE,cAAM,OAAA,mBAAmB,CAAC,KAAK,CAAC,GAAA;iCAC1C;kCACD,EAAE,GACN,GACE,GACF,CACP,EAEDA,IAAC,WAAW,IAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,YACrDA,IAAC,YAAY,IACX,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,MAAM,CAAC,EACxC,aAAa,EACX,cAAc,GAAG,IAAI,kBAAI,YAAY,GAAK,IAAI,OAAC,EAEjD,UAAU,QACV,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,UAAG,KAAK,SACb,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,IAAG,aAAM,OAAO,CAAC,KAAK,CAAE,GAAG,EAAE,CAC3C,EACF,KAAK,EAAE,UAAU,GACjB,GACU,KA7CN,KAAK,CA8CT,CACP,EACD;SACH,CAAC,GACE,EACN;AACJ;;;;"}