@popsure/dirty-swan 0.54.1 → 0.54.2

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

@@ -0,0 +1,82 @@
+import { c as __awaiter, d as __generator } from '../../../../tslib.es6-a39f91fc.js';
+import { jsx } from 'react/jsx-runtime';
+import { c as customRender, s as screen } from '../../../../customRender-d03c10b6.js';
+import { TableContents } from './TableContents.js';
+import 'react';
+import 'react-dom';
+import '../../../../_commonjsHelpers-4730bd53.js';
+import 'react-dom/test-utils';
+import '../TableSection/TableSection.js';
+import '../../../../index-6ea95111.js';
+import '../../../../style-inject.es-1f59c1d0.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/ChevronDown.js';
+import '../../../icon/icons/ChevronUp.js';
+import '../../../cards/card/index.js';
+import '../../../icon/icons/ChevronRight.js';
+import '../../../../Collapsible-a355828b.js';
+import '../../../../index-a0ef2ab4.js';
+
+var mockData = [
+    {
+        rows: [
+            [{ content: 'Item 1.1.1' }, { content: 'Item 1.1.2' }],
+            [{ content: 'Item 1.2.1' }, { content: 'Item 1.2.2' }],
+        ],
+    },
+    {
+        section: {
+            title: 'Section 2',
+        },
+        rows: [
+            [{ content: 'Item 2.1.1' }, { content: 'Item 2.1.2' }],
+            [{ content: 'Item 2.2.1' }, { content: 'Item 2.2.2' }],
+        ],
+    },
+];
+describe('TableContents', function () {
+    it('renders the table sections with sections', function () {
+        customRender(jsx(TableContents, { collapsibleSections: true, tableData: mockData, title: "Table" }));
+        expect(screen.getByText('Section 2')).toBeInTheDocument();
+    });
+    it('renders the table sections with sections data', function () {
+        customRender(jsx(TableContents, { collapsibleSections: true, tableData: mockData, title: "Table" }));
+        expect(screen.getByText('Item 1.2.1')).toBeInTheDocument();
+        expect(screen.getByText('Item 1.2.2')).toBeInTheDocument();
+        expect(screen.getByText('Item 2.1.2')).toBeInTheDocument();
+        expect(screen.getByText('Item 2.2.1')).toBeInTheDocument();
+    });
+    it('hides the table sections when hideDetails and shouldHideDetails is true', function () {
+        customRender(jsx(TableContents, { hideDetails: true, shouldHideDetails: true, tableData: mockData, title: "Table" }));
+        expect(screen.queryByText('Section 2')).not.toBeInTheDocument();
+        expect(screen.queryByText('Item 2.1.1')).not.toBeInTheDocument();
+    });
+    it('hides the table sections details when collapsibleSections is true', function () {
+        customRender(jsx(TableContents, { collapsibleSections: true, isMobile: true, tableData: mockData, title: "Table" }));
+        expect(screen.getByText('Section 2')).toBeVisible();
+        expect(screen.queryByText('Item 2.1.1')).not.toBeVisible();
+    });
+    it('shows the table sections when hideDetails is collapsibleSections true has expanded ', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = customRender(jsx(TableContents, { collapsibleSections: true, isMobile: true, tableData: mockData, title: "Table" })).user;
+                    expect(screen.queryByText('Item 2.1.1')).not.toBeVisible();
+                    return [4 /*yield*/, user.click(screen.getByText('Section 2'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByText('Item 2.1.1')).toBeVisible();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});
+//# sourceMappingURL=TableContents.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableContents.test.js","sources":["../../../../../../../src/lib/components/table/components/TableContents/TableContents.test.tsx"],"sourcesContent":["import { render, screen } from '../../../../util/testUtils';\nimport { TableContents, TableSectionProps } from './TableContents';\n\nconst mockData: TableSectionProps['tableData'] = [\n  {\n    rows: [\n      [{ content: 'Item 1.1.1' }, { content: 'Item 1.1.2' }],\n      [{ content: 'Item 1.2.1' }, { content: 'Item 1.2.2' }],\n    ],\n  },\n  {\n    section: {\n      title: 'Section 2',\n    },\n    rows: [\n      [{ content: 'Item 2.1.1' }, { content: 'Item 2.1.2' }],\n      [{ content: 'Item 2.2.1' }, { content: 'Item 2.2.2' }],\n    ],\n  },\n];\n\ndescribe('TableContents', () => {\n  it('renders the table sections with sections', () => {\n    render(\n      <TableContents collapsibleSections tableData={mockData} title=\"Table\" />\n    );\n\n    expect(screen.getByText('Section 2')).toBeInTheDocument();\n  });\n\n  it('renders the table sections with sections data', () => {\n    render(\n      <TableContents collapsibleSections tableData={mockData} title=\"Table\" />\n    );\n\n    expect(screen.getByText('Item 1.2.1')).toBeInTheDocument();\n    expect(screen.getByText('Item 1.2.2')).toBeInTheDocument();\n    expect(screen.getByText('Item 2.1.2')).toBeInTheDocument();\n    expect(screen.getByText('Item 2.2.1')).toBeInTheDocument();\n  });\n\n  it('hides the table sections when hideDetails and shouldHideDetails is true', () => {\n    render(\n      <TableContents\n        hideDetails\n        shouldHideDetails\n        tableData={mockData}\n        title=\"Table\"\n      />\n    );\n\n    expect(screen.queryByText('Section 2')).not.toBeInTheDocument();\n    expect(screen.queryByText('Item 2.1.1')).not.toBeInTheDocument();\n  });\n\n  it('hides the table sections details when collapsibleSections is true', () => {\n    render(\n      <TableContents\n        collapsibleSections\n        isMobile\n        tableData={mockData}\n        title=\"Table\"\n      />\n    );\n\n    expect(screen.getByText('Section 2')).toBeVisible();\n    expect(screen.queryByText('Item 2.1.1')).not.toBeVisible();\n  });\n\n  it('shows the table sections when hideDetails is collapsibleSections true has expanded ', async () => {\n    const { user } = render(\n      <TableContents\n        collapsibleSections\n        isMobile\n        tableData={mockData}\n        title=\"Table\"\n      />\n    );\n\n    expect(screen.queryByText('Item 2.1.1')).not.toBeVisible();\n\n    await user.click(screen.getByText('Section 2'));\n\n    expect(screen.getByText('Item 2.1.1')).toBeVisible();\n  });\n});\n"],"names":["render","_jsx"],"mappings":"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"}

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

@@ -8,7 +8,7 @@ import 'react';
 import '../../../icon/IconWrapper/IconWrapper.js';
 import '../../../../tslib.es6-a39f91fc.js';
 
-var css_248z = ".TableControls-module_stickyHeader__1f6Ta {\n  display: flex;\n  position: sticky;\n  left: 0;\n  right: 0;\n  min-height: 72px;\n  z-index: 3;\n}\n\n.TableControls-module_controlButton__2kQiG {\n  border-radius: 50% !important;\n  width: 32px;\n  height: 32px;\n}";
+var css_248z = ".TableControls-module_stickyHeader__1f6Ta {\n  display: flex;\n  position: sticky;\n  left: 0;\n  right: 0;\n  min-height: 72px;\n  z-index: 9;\n}\n\n.TableControls-module_controlButton__2kQiG {\n  border-radius: 50% !important;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n}";
 var styles = {"stickyHeader":"TableControls-module_stickyHeader__1f6Ta","controlButton":"TableControls-module_controlButton__2kQiG"};
 styleInject(css_248z);
 

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

@@ -1,14 +1,9 @@
-import { a as __assign, _ as __spreadArray } from '../../../../tslib.es6-a39f91fc.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState } from 'react';
-import { TableContent } from '../TableContent/TableContent.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 { a as __assign } from '../../../../tslib.es6-a39f91fc.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { c as classNames } from '../../../../index-6ea95111.js';
-import { C as Collapsible } from '../../../../Collapsible-ac67187a.js';
-import '../TableCell/TableCell.js';
+import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
+import { TableCell } from '../TableCell/TableCell.js';
+import { useCallback } from 'react';
 import '../../../button/index.js';
 import '../../../icon/icons/Check.js';
 import '../../../icon/IconWrapper/IconWrapper.js';
@@ -16,40 +11,48 @@ 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 = ".TableSection-module_cardWrapper__3PUCj {\n  height: 88px;\n}\n\n.TableSection-module_card__1pISK {\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 3;\n}";
-var styles = {"cardWrapper":"TableSection-module_cardWrapper__3PUCj","card":"TableSection-module_card__1pISK"};
+var css_248z = ".TableSection-module_table__sNbDq {\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n@media (min-width: 34rem) {\n  .TableSection-module_table__sNbDq {\n    min-width: 845px;\n  }\n}\n\n.TableSection-module_tr__UbkbE {\n  min-height: 72px;\n}";
+var styles = {"table":"TableSection-module_table__sNbDq","tr":"TableSection-module_tr__UbkbE"};
 styleInject(css_248z);
 
 var TableSection = function (_a) {
-    var _b, _c;
-    var className = _a.className, collapsibleSections = _a.collapsibleSections, data = _a.data, 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 = 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];
-    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;
+    var className = _a.className, tableCellRows = _a.tableCellRows, hideHeader = _a.hideHeader, openModal = _a.openModal, title = _a.title, width = _a.width;
+    var headerRow = tableCellRows === null || tableCellRows === void 0 ? void 0 : tableCellRows[0];
+    var getColumnContentByKey = useCallback(function (key) { var _a, _b; return ((_b = (_a = tableCellRows === null || tableCellRows === void 0 ? void 0 : tableCellRows[0]) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.content) || ''; }, [tableCellRows]);
+    var handleOpenModal = function (_a) {
+        var cellIndex = _a.cellIndex, body = _a.body, title = _a.title;
+        return openModal === null || openModal === void 0 ? void 0 : openModal({
+            body: body,
+            title: title || getColumnContentByKey(cellIndex),
         });
     };
-    return (jsx("div", { style: { width: tableWidth }, children: data.map(function (_a, index) {
-            var items = _a.items, _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(TableContent, { className: classNames(className, 'mb24'), data: isFirstSection ? items : __spreadArray([firstHeadRow], items, true), hideHeader: true, openModal: openModal, title: "".concat(title).concat((section === null || section === void 0 ? void 0 : section.title) ? " - ".concat(section.title) : ''), width: tableWidth }) })] }, index)));
-        }) }));
+    return (jsxs("table", { className: classNames(className, 'w100', styles.table), width: width, children: [jsx("caption", { className: "sr-only", children: title }), headerRow && (jsx("thead", { className: hideHeader ? 'sr-only' : '', children: jsx("tr", { children: headerRow.map(function (tableCellProps, cellIndex) {
+                        var isFirstCellInRow = cellIndex === 0;
+                        return (jsx(TableCell, __assign({ isHeader: true, isFirstCellInRow: isFirstCellInRow, isTopLeftCell: isFirstCellInRow, align: isFirstCellInRow ? 'left' : 'center', openModal: function (body) {
+                                return handleOpenModal({
+                                    cellIndex: cellIndex,
+                                    body: body,
+                                    title: tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.content,
+                                });
+                            } }, tableCellProps), cellIndex));
+                    }) }) })), jsx("tbody", { children: tableCellRows.map(function (row, rowIndex) {
+                    var isSingleCell = row.length === 1;
+                    return (rowIndex > 0 && (jsx("tr", { className: styles.tr, children: row.map(function (tableCellProps, cellIndex) {
+                            var key = "".concat(rowIndex, "-").concat(cellIndex);
+                            var isFirstCellInRow = cellIndex === 0;
+                            var onCelInfoClick = function (body) {
+                                return handleOpenModal({
+                                    cellIndex: cellIndex,
+                                    body: body,
+                                    title: isFirstCellInRow
+                                        ? tableCellProps.content
+                                        : undefined,
+                                });
+                            };
+                            return (jsx(TableCell, __assign({ align: isFirstCellInRow && !isSingleCell ? 'left' : 'center', isFirstCellInRow: isFirstCellInRow, openModal: onCelInfoClick }, tableCellProps), key));
+                        }) }, rowIndex)));
+                }) })] }));
 };
 
 export { TableSection };

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

@@ -1 +1 @@
-{"version":3,"file":"TableSection.js","sources":["../../../../../../../src/lib/components/table/components/TableSection/TableSection.tsx"],"sourcesContent":["import { TableCellProps } from '../TableCell/TableCell';\nimport { ReactNode, useState } from 'react';\nimport { TableContent } from '../TableContent/TableContent';\nimport { ChevronDownIcon, ChevronUpIcon } from '../../../icon';\nimport { Card } from '../../../cards/card';\n\nimport styles from './TableSection.module.scss';\nimport classNames from 'classnames';\nimport { Collapsible } from './Collapsible';\nimport { ModalFunction } from '../../types';\n\nexport type TableSectionType = {\n  title?: string;\n  icon?: ReactNode;\n};\n\ninterface TableSectionData {\n  section?: TableSectionType;\n  items: TableCellProps[][];\n}\n\nexport type TableData = TableSectionData[];\n\nexport interface TableSectionProps {\n  className?: string;\n  collapsibleSections?: boolean;\n  data: TableData;\n  hideDetails?: boolean;\n  isMobile?: boolean;\n  openModal?: ModalFunction;\n  shouldHideDetails?: boolean;\n  title: string;\n}\n\nconst TableSection = ({\n  className,\n  collapsibleSections,\n  data,\n  hideDetails,\n  isMobile,\n  openModal,\n  shouldHideDetails,\n  title,\n}: TableSectionProps) => {\n  const [isSectionOpen, setOpenSection] = useState<number | null>(null);\n  const firstHeadRow = data?.[0]?.items?.[0];\n  const tableWidth = isMobile ? `${firstHeadRow?.length * 50}%` : '';\n\n  const handleToggleSection = (index: number) => {\n    setOpenSection((currentSection) =>\n      currentSection === index ? null : index\n    );\n  };\n\n  return (\n    <div style={{ width: tableWidth }}>\n      {data.map(({ items, 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                <TableContent\n                  className={classNames(className, 'mb24')}\n                  data={isFirstSection ? items : [firstHeadRow, ...items]}\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 { TableSection };\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;IAkCM,YAAY,GAAG,UAAC,EASF;;QARlB,SAAS,eAAA,EACT,mBAAmB,yBAAA,EACnB,IAAI,UAAA,EACJ,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,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAG,CAAC,CAAC,0CAAE,KAAK,0CAAG,CAAC,CAAC,CAAC;IAC3C,IAAM,UAAU,GAAG,QAAQ,GAAG,UAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,IAAG,EAAE,MAAG,GAAG,EAAE,CAAC;IAEnE,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,IAAI,CAAC,GAAG,CAAC,UAAC,EAAuB,EAAE,KAAK;gBAA5B,KAAK,WAAA,EAAE,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA;YAC9B,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,IAAI,EAAE,cAAc,GAAG,KAAK,kBAAI,YAAY,GAAK,KAAK,OAAC,EACvD,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,KA3CN,KAAK,CA4CT,CACP,EACD;SACH,CAAC,GACE,EACN;AACJ;;;;"}
+{"version":3,"file":"TableSection.js","sources":["../../../../../../../src/lib/components/table/components/TableSection/TableSection.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './TableSection.module.scss';\nimport { TableCell, TableCellProps } from '../TableCell/TableCell';\nimport { ReactNode, useCallback } from 'react';\nimport { ModalData, ModalFunction, TableCellRowData } from '../../types';\n\nexport interface TableSectionProps {\n  className?: string;\n  tableCellRows: TableCellRowData[];\n  hideHeader?: boolean;\n  openModal?: ModalFunction;\n  title: string;\n  width?: number | string;\n}\n\nconst TableSection = ({\n  className,\n  tableCellRows,\n  hideHeader,\n  openModal,\n  title,\n  width,\n}: TableSectionProps) => {\n  const headerRow = tableCellRows?.[0];\n\n  const getColumnContentByKey = useCallback(\n    (key: number) => tableCellRows?.[0]?.[key]?.content || '',\n    [tableCellRows]\n  );\n\n  const handleOpenModal = ({\n    cellIndex,\n    body,\n    title,\n  }: ModalData & {\n    cellIndex: number;\n  }) =>\n    openModal?.({\n      body,\n      title: title || getColumnContentByKey(cellIndex),\n    });\n\n  return (\n    <table\n      className={classNames(className, 'w100', styles.table)}\n      width={width}\n    >\n      <caption className=\"sr-only\">{title}</caption>\n\n      {headerRow && (\n        <thead className={hideHeader ? 'sr-only' : ''}>\n          <tr>\n            {headerRow.map((tableCellProps, cellIndex) => {\n              const isFirstCellInRow = cellIndex === 0;\n              return (\n                <TableCell\n                  key={cellIndex}\n                  isHeader\n                  isFirstCellInRow={isFirstCellInRow}\n                  isTopLeftCell={isFirstCellInRow}\n                  align={isFirstCellInRow ? 'left' : 'center'}\n                  openModal={(body) =>\n                    handleOpenModal({\n                      cellIndex,\n                      body,\n                      title: tableCellProps?.content,\n                    })\n                  }\n                  {...tableCellProps}\n                />\n              );\n            })}\n          </tr>\n        </thead>\n      )}\n\n      <tbody>\n        {tableCellRows.map((row, rowIndex) => {\n          const isSingleCell = row.length === 1;\n\n          return (\n            rowIndex > 0 && (\n              <tr key={rowIndex} className={styles.tr}>\n                {row.map((tableCellProps, cellIndex) => {\n                  const key = `${rowIndex}-${cellIndex}`;\n                  const isFirstCellInRow = cellIndex === 0;\n\n                  const onCelInfoClick = (body: ReactNode) =>\n                    handleOpenModal({\n                      cellIndex,\n                      body,\n                      title: isFirstCellInRow\n                        ? tableCellProps.content\n                        : undefined,\n                    });\n\n                  return (\n                    <TableCell\n                      align={\n                        isFirstCellInRow && !isSingleCell ? 'left' : 'center'\n                      }\n                      isFirstCellInRow={isFirstCellInRow}\n                      openModal={onCelInfoClick}\n                      key={key}\n                      {...tableCellProps}\n                    />\n                  );\n                })}\n              </tr>\n            )\n          );\n        })}\n      </tbody>\n    </table>\n  );\n};\n\nexport type { TableCellProps };\n\nexport { TableSection };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;IAgBM,YAAY,GAAG,UAAC,EAOF;QANlB,SAAS,eAAA,EACT,aAAa,mBAAA,EACb,UAAU,gBAAA,EACV,SAAS,eAAA,EACT,KAAK,WAAA,EACL,KAAK,WAAA;IAEL,IAAM,SAAS,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,CAAC,CAAC,CAAC;IAErC,IAAM,qBAAqB,GAAG,WAAW,CACvC,UAAC,GAAW,gBAAK,OAAA,CAAA,MAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,CAAC,CAAC,0CAAG,GAAG,CAAC,0CAAE,OAAO,KAAI,EAAE,CAAA,EAAA,EACzD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,IAAM,eAAe,GAAG,UAAC,EAMxB;YALC,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,KAAK,WAAA;QAIL,OAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG;YACV,IAAI,MAAA;YACJ,KAAK,EAAE,KAAK,IAAI,qBAAqB,CAAC,SAAS,CAAC;SACjD,CAAC;KAAA,CAAC;IAEL,QACEA,gBACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,EACtD,KAAK,EAAE,KAAK,aAEZC,iBAAS,SAAS,EAAC,SAAS,YAAE,KAAK,GAAW,EAE7C,SAAS,KACRA,eAAO,SAAS,EAAE,UAAU,GAAG,SAAS,GAAG,EAAE,YAC3CA,sBACG,SAAS,CAAC,GAAG,CAAC,UAAC,cAAc,EAAE,SAAS;wBACvC,IAAM,gBAAgB,GAAG,SAAS,KAAK,CAAC,CAAC;wBACzC,QACEA,IAAC,SAAS,aAER,QAAQ,QACR,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,gBAAgB,EAC/B,KAAK,EAAE,gBAAgB,GAAG,MAAM,GAAG,QAAQ,EAC3C,SAAS,EAAE,UAAC,IAAI;gCACd,OAAA,eAAe,CAAC;oCACd,SAAS,WAAA;oCACT,IAAI,MAAA;oCACJ,KAAK,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,OAAO;iCAC/B,CAAC;6BAAA,IAEA,cAAc,GAZb,SAAS,CAad,EACF;qBACH,CAAC,GACC,GACC,CACT,EAEDA,yBACG,aAAa,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,QAAQ;oBAC/B,IAAM,YAAY,GAAG,GAAG,CAAC,MAAM,KAAK,CAAC,CAAC;oBAEtC,QACE,QAAQ,GAAG,CAAC,KACVA,YAAmB,SAAS,EAAE,MAAM,CAAC,EAAE,YACpC,GAAG,CAAC,GAAG,CAAC,UAAC,cAAc,EAAE,SAAS;4BACjC,IAAM,GAAG,GAAG,UAAG,QAAQ,cAAI,SAAS,CAAE,CAAC;4BACvC,IAAM,gBAAgB,GAAG,SAAS,KAAK,CAAC,CAAC;4BAEzC,IAAM,cAAc,GAAG,UAAC,IAAe;gCACrC,OAAA,eAAe,CAAC;oCACd,SAAS,WAAA;oCACT,IAAI,MAAA;oCACJ,KAAK,EAAE,gBAAgB;0CACnB,cAAc,CAAC,OAAO;0CACtB,SAAS;iCACd,CAAC;6BAAA,CAAC;4BAEL,QACEA,IAAC,SAAS,aACR,KAAK,EACH,gBAAgB,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,QAAQ,EAEvD,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,cAAc,IAErB,cAAc,GADb,GAAG,CAER,EACF;yBACH,CAAC,IAzBK,QAAQ,CA0BZ,CACN,EACD;iBACH,CAAC,GACI,IACF,EACR;AACJ;;;;"}

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

@@ -1,4 +1,4 @@
-import { c as __awaiter, d as __generator } from '../../../../tslib.es6-a39f91fc.js';
+import { a as __assign } from '../../../../tslib.es6-a39f91fc.js';
 import { jsx } from 'react/jsx-runtime';
 import { c as customRender, s as screen } from '../../../../customRender-d03c10b6.js';
 import { TableSection } from './TableSection.js';
@@ -6,7 +6,6 @@ import 'react';
 import 'react-dom';
 import '../../../../_commonjsHelpers-4730bd53.js';
 import 'react-dom/test-utils';
-import '../TableContent/TableContent.js';
 import '../../../../index-6ea95111.js';
 import '../../../../style-inject.es-1f59c1d0.js';
 import '../TableCell/TableCell.js';
@@ -17,66 +16,45 @@ import '../../../icon/icons/Info.js';
 import '../../../icon/icons/StarFilled.js';
 import '../../../icon/icons/X.js';
 import '../../../icon/icons/ZapFilled.js';
-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 '../../../../index-a0ef2ab4.js';
 
-var mockData = [
-    {
-        items: [
-            [{ content: 'Item 1.1.1' }, { content: 'Item 1.1.2' }],
-            [{ content: 'Item 1.2.1' }, { content: 'Item 1.2.2' }],
-        ],
-    },
-    {
-        section: {
-            title: 'Section 2',
-        },
-        items: [
-            [{ content: 'Item 2.1.1' }, { content: 'Item 2.1.2' }],
-            [{ content: 'Item 2.2.1' }, { content: 'Item 2.2.2' }],
-        ],
-    },
+var tableCellRows = [
+    [{ content: 'Cell 1.1' }, { content: 'Cell 1.2' }, { content: 'Cell 1.3' }],
+    [{ content: 'Cell 2.1' }, { content: 'Cell 2.2' }, { content: 'Cell 2.3' }],
 ];
+var mockTitle = 'Test Table';
+var mockOpenModal = jest.fn();
+var defaultProps = {
+    tableCellRows: tableCellRows,
+    title: mockTitle,
+    openModal: mockOpenModal,
+};
 describe('TableSection', function () {
-    it('renders the table sections with sections', function () {
-        customRender(jsx(TableSection, { collapsibleSections: true, data: mockData, title: "Table" }));
-        expect(screen.getByText('Section 2')).toBeInTheDocument();
+    it('renders the table caption', function () {
+        customRender(jsx(TableSection, __assign({}, defaultProps)));
+        expect(screen.getByText(mockTitle)).toBeInTheDocument();
     });
-    it('renders the table sections with sections data', function () {
-        customRender(jsx(TableSection, { collapsibleSections: true, data: mockData, title: "Table" }));
-        expect(screen.getByText('Item 1.2.1')).toBeInTheDocument();
-        expect(screen.getByText('Item 1.2.2')).toBeInTheDocument();
-        expect(screen.getByText('Item 2.1.2')).toBeInTheDocument();
-        expect(screen.getByText('Item 2.2.1')).toBeInTheDocument();
+    it('renders the table with correct data', function () {
+        customRender(jsx(TableSection, __assign({}, defaultProps)));
+        expect(screen.getByText('Cell 1.1')).toBeInTheDocument();
+        expect(screen.getByText('Cell 1.2')).toBeInTheDocument();
+        expect(screen.getByText('Cell 1.3')).toBeInTheDocument();
+        expect(screen.getByText('Cell 2.1')).toBeInTheDocument();
+        expect(screen.getByText('Cell 2.2')).toBeInTheDocument();
+        expect(screen.getByText('Cell 2.3')).toBeInTheDocument();
     });
-    it('hides the table sections when hideDetails and shouldHideDetails is true', function () {
-        customRender(jsx(TableSection, { hideDetails: true, shouldHideDetails: true, data: mockData, title: "Table" }));
-        expect(screen.queryByText('Section 2')).not.toBeInTheDocument();
-        expect(screen.queryByText('Item 2.1.1')).not.toBeInTheDocument();
+    it('should render table headers', function () {
+        var container = customRender(jsx(TableSection, __assign({}, defaultProps))).container;
+        var thElements = container.querySelectorAll('th');
+        expect(thElements.length).toBe(4);
+        expect(thElements[0]).toHaveTextContent('Cell 1.1');
+        expect(thElements[3]).toHaveTextContent('Cell 2.1');
     });
-    it('hides the table sections details when collapsibleSections is true', function () {
-        customRender(jsx(TableSection, { collapsibleSections: true, isMobile: true, data: mockData, title: "Table" }));
-        expect(screen.getByText('Section 2')).toBeVisible();
-        expect(screen.queryByText('Item 2.1.1')).not.toBeVisible();
+    it('should render table data cells', function () {
+        var container = customRender(jsx(TableSection, __assign({}, defaultProps))).container;
+        var tdElements = container.querySelectorAll('td');
+        expect(tdElements.length).toBe(2);
+        expect(tdElements[0]).toHaveTextContent('Cell 2.2');
+        expect(tdElements[1]).toHaveTextContent('Cell 2.3');
     });
-    it('shows the table sections when hideDetails is collapsibleSections true has expanded ', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var user;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    user = customRender(jsx(TableSection, { collapsibleSections: true, isMobile: true, data: mockData, title: "Table" })).user;
-                    expect(screen.queryByText('Item 2.1.1')).not.toBeVisible();
-                    return [4 /*yield*/, user.click(screen.getByText('Section 2'))];
-                case 1:
-                    _a.sent();
-                    expect(screen.getByText('Item 2.1.1')).toBeVisible();
-                    return [2 /*return*/];
-            }
-        });
-    }); });
 });
 //# sourceMappingURL=TableSection.test.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableSection.test.js","sources":["../../../../../../../src/lib/components/table/components/TableSection/TableSection.test.tsx"],"sourcesContent":["import { render, screen } from '../../../../util/testUtils';\nimport { TableSection, TableSectionProps } from './TableSection';\n\nconst mockData: TableSectionProps['data'] = [\n  {\n    items: [\n      [{ content: 'Item 1.1.1' }, { content: 'Item 1.1.2' }],\n      [{ content: 'Item 1.2.1' }, { content: 'Item 1.2.2' }],\n    ],\n  },\n  {\n    section: {\n      title: 'Section 2',\n    },\n    items: [\n      [{ content: 'Item 2.1.1' }, { content: 'Item 2.1.2' }],\n      [{ content: 'Item 2.2.1' }, { content: 'Item 2.2.2' }],\n    ],\n  },\n];\n\ndescribe('TableSection', () => {\n  it('renders the table sections with sections', () => {\n    render(<TableSection collapsibleSections data={mockData} title=\"Table\" />);\n\n    expect(screen.getByText('Section 2')).toBeInTheDocument();\n  });\n\n  it('renders the table sections with sections data', () => {\n    render(<TableSection collapsibleSections data={mockData} title=\"Table\" />);\n\n    expect(screen.getByText('Item 1.2.1')).toBeInTheDocument();\n    expect(screen.getByText('Item 1.2.2')).toBeInTheDocument();\n    expect(screen.getByText('Item 2.1.2')).toBeInTheDocument();\n    expect(screen.getByText('Item 2.2.1')).toBeInTheDocument();\n  });\n\n  it('hides the table sections when hideDetails and shouldHideDetails is true', () => {\n    render(\n      <TableSection\n        hideDetails\n        shouldHideDetails\n        data={mockData}\n        title=\"Table\"\n      />\n    );\n\n    expect(screen.queryByText('Section 2')).not.toBeInTheDocument();\n    expect(screen.queryByText('Item 2.1.1')).not.toBeInTheDocument();\n  });\n\n  it('hides the table sections details when collapsibleSections is true', () => {\n    render(\n      <TableSection\n        collapsibleSections\n        isMobile\n        data={mockData}\n        title=\"Table\"\n      />\n    );\n\n    expect(screen.getByText('Section 2')).toBeVisible();\n    expect(screen.queryByText('Item 2.1.1')).not.toBeVisible();\n  });\n\n  it('shows the table sections when hideDetails is collapsibleSections true has expanded ', async () => {\n    const { user } = render(\n      <TableSection\n        collapsibleSections\n        isMobile\n        data={mockData}\n        title=\"Table\"\n      />\n    );\n\n    expect(screen.queryByText('Item 2.1.1')).not.toBeVisible();\n\n    await user.click(screen.getByText('Section 2'));\n\n    expect(screen.getByText('Item 2.1.1')).toBeVisible();\n  });\n});\n"],"names":["render","_jsx"],"mappings":"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"}
+{"version":3,"file":"TableSection.test.js","sources":["../../../../../../../src/lib/components/table/components/TableSection/TableSection.test.tsx"],"sourcesContent":["import { render, screen } from '../../../../util/testUtils';\nimport { TableSection, TableContentProps } from './TableSection';\n\nconst tableCellRows: TableContentProps['tableCellRows'] = [\n  [{ content: 'Cell 1.1' }, { content: 'Cell 1.2' }, { content: 'Cell 1.3' }],\n  [{ content: 'Cell 2.1' }, { content: 'Cell 2.2' }, { content: 'Cell 2.3' }],\n];\n\nconst mockTitle = 'Test Table';\n\nconst mockOpenModal = jest.fn();\n\nconst defaultProps: TableContentProps = {\n  tableCellRows,\n  title: mockTitle,\n  openModal: mockOpenModal,\n};\n\ndescribe('TableSection', () => {\n  it('renders the table caption', () => {\n    render(<TableSection {...defaultProps} />);\n\n    expect(screen.getByText(mockTitle)).toBeInTheDocument();\n  });\n\n  it('renders the table with correct data', () => {\n    render(<TableSection {...defaultProps} />);\n\n    expect(screen.getByText('Cell 1.1')).toBeInTheDocument();\n    expect(screen.getByText('Cell 1.2')).toBeInTheDocument();\n    expect(screen.getByText('Cell 1.3')).toBeInTheDocument();\n\n    expect(screen.getByText('Cell 2.1')).toBeInTheDocument();\n    expect(screen.getByText('Cell 2.2')).toBeInTheDocument();\n    expect(screen.getByText('Cell 2.3')).toBeInTheDocument();\n  });\n\n  it('should render table headers', () => {\n    const { container } = render(<TableSection {...defaultProps} />);\n\n    const thElements = container.querySelectorAll('th');\n\n    expect(thElements.length).toBe(4);\n    expect(thElements[0]).toHaveTextContent('Cell 1.1');\n    expect(thElements[3]).toHaveTextContent('Cell 2.1');\n  });\n\n  it('should render table data cells', () => {\n    const { container } = render(<TableSection {...defaultProps} />);\n\n    const tdElements = container.querySelectorAll('td');\n    expect(tdElements.length).toBe(2);\n    expect(tdElements[0]).toHaveTextContent('Cell 2.2');\n    expect(tdElements[1]).toHaveTextContent('Cell 2.3');\n  });\n});\n"],"names":["render","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;AAGA,IAAM,aAAa,GAAuC;IACxD,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;IAC3E,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;CAC5E,CAAC;AAEF,IAAM,SAAS,GAAG,YAAY,CAAC;AAE/B,IAAM,aAAa,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAEhC,IAAM,YAAY,GAAsB;IACtC,aAAa,eAAA;IACb,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,aAAa;CACzB,CAAC;AAEF,QAAQ,CAAC,cAAc,EAAE;IACvB,EAAE,CAAC,2BAA2B,EAAE;QAC9BA,YAAM,CAACC,IAAC,YAAY,eAAK,YAAY,EAAI,CAAC,CAAC;QAE3C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KACzD,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE;QACxCD,YAAM,CAACC,IAAC,YAAY,eAAK,YAAY,EAAI,CAAC,CAAC;QAE3C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACzD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACzD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAEzD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACzD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACzD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KAC1D,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE;QACxB,IAAA,SAAS,GAAKD,YAAM,CAACC,IAAC,YAAY,eAAK,YAAY,EAAI,CAAC,UAA/C,CAAgD;QAEjE,IAAM,UAAU,GAAG,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAEpD,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAClC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;QACpD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;KACrD,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE;QAC3B,IAAA,SAAS,GAAKD,YAAM,CAACC,IAAC,YAAY,eAAK,YAAY,EAAI,CAAC,UAA/C,CAAgD;QAEjE,IAAM,UAAU,GAAG,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACpD,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAClC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;QACpD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;KACrD,CAAC,CAAC;AACL,CAAC,CAAC"}

package/dist/esm/index.js

@@ -421,9 +421,9 @@ import './components/comparisonTable/components/AccordionItem/AccordionItem.js';
 import './components/comparisonTable/components/TableRating/StarIcon.js';
 import './components/comparisonTable/components/TableRating/ZapIcon.js';
 import './components/table/components/TableCell/TableCell.js';
-import './Collapsible-ac67187a.js';
+import './Collapsible-a355828b.js';
+import './components/table/components/TableContents/TableContents.js';
 import './components/table/components/TableSection/TableSection.js';
-import './components/table/components/TableContent/TableContent.js';
 import './useTableNavigation-8e50b121.js';
 import './components/table/components/TableControls/TableControls.js';
 import './useScrollSync-b2d28bed.js';

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.54.1",
+  "version": "0.54.2",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,