@popsure/dirty-swan 0.58.5 → 0.58.7

package/src/lib/components/table/components/TableCell/CTACell/CTACell.tsx

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 
 import styles from './CTACell.module.scss';
 import { IconRenderer } from '../../IconRenderer/IconRenderer';
+import { Button } from '../../../../button';
 
 export type CTACellProps = {
   title: ReactNode;
@@ -16,6 +17,7 @@ export type CTACellProps = {
   className?: string;
   dataTestId?: string;
   dataCy?: string;
+  onClick?: () => void;
 };
 
 export const CTACell = ({
@@ -30,6 +32,7 @@ export const CTACell = ({
   className,
   dataCy,
   dataTestId,
+  onClick,
 }: CTACellProps) => {
   const renderedIcon = (
     <IconRenderer icon={icon} imageComponent={imageComponent} />
@@ -49,18 +52,21 @@ export const CTACell = ({
         </p>
       </div>
 
-      <a
+      <Button
+        {...onClick ? { onClick } : {
+          as: 'a',
+          href: href,
+          target: '_blank',
+          rel: 'noopener noreferrer',
+        }}
         className={classNames('mt16 w100 wmx3', {
           'p-btn--primary': !grey,
           'p-btn--secondary-grey': grey,
           [styles.narrow]: narrow,
         })}
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
       >
         {buttonCaption}
-      </a>
+      </Button>
     </div>
   );
 };

package/src/lib/components/table/components/TableContents/TableContents.tsx

@@ -15,6 +15,7 @@ export interface TableContentsProps {
   tableData: TableData;
   hideColumns?: number[];
   hideDetails?: boolean;
+  hideRows?: number[];
   isMobile?: boolean;
   openModal?: ModalFunction;
   shouldHideDetails?: boolean;
@@ -29,6 +30,7 @@ const TableContents = ({
   tableData,
   hideColumns = [],
   hideDetails,
+  hideRows = [],
   isMobile,
   openModal,
   shouldHideDetails,
@@ -45,6 +47,9 @@ const TableContents = ({
     );
   };
 
+  // Calculate global row offset for each section
+  let globalRowOffset = 0;
+
   return (
     <div style={{ width: tableWidth }}>
       {tableData.map(({ rows, section = {} }, index) => {
@@ -58,60 +63,69 @@ const TableContents = ({
           <IconRenderer icon={section.icon} imageComponent={imageComponent} width={20} />
         );
 
-        return (
-          (isFirstSection || isVisible) && (
-            <div key={index}>
-              {section?.title && (
-                <div className={styles.cardWrapper}>
-                  <div className={classNames(styles.card, 'p0')}>
-                    <Card
-                      actionIcon={
-                        isExpanded ? (
-                          <ChevronUpIcon size={24} />
-                        ) : (
-                          <ChevronDownIcon size={24} />
-                        )
-                      }
-                      aria-expanded={isExpanded ? 'true' : 'false'}
-                      aria-hidden
-                      classNames={{
-                        wrapper: 'bg-purple-50 pl16',
-                        icon: classNames(styles.cardIcon, 'tc-grey-900'),
-                      }}
-                      dropShadow={false}
-                      icon={renderedIcon}
-                      title={section.title}
-                      titleVariant="medium"
-                      {...(collapsibleSections
-                        ? {
-                            onClick: () => handleToggleSection(index),
-                          }
-                        : {})}
-                    />
-                  </div>
+        // Calculate section-specific hideRows based on global offset
+        const sectionHideRows = hideRows
+          .map(globalRowIndex => globalRowIndex - globalRowOffset)
+          .filter(localRowIndex => localRowIndex >= 0 && localRowIndex < rows.length);
+
+        const result = (isFirstSection || isVisible) && (
+          <div key={index}>
+            {section?.title && (
+              <div className={styles.cardWrapper}>
+                <div className={classNames(styles.card, 'p0')}>
+                  <Card
+                    actionIcon={
+                      isExpanded ? (
+                        <ChevronUpIcon size={24} />
+                      ) : (
+                        <ChevronDownIcon size={24} />
+                      )
+                    }
+                    aria-expanded={isExpanded ? 'true' : 'false'}
+                    aria-hidden
+                    classNames={{
+                      wrapper: 'bg-purple-50 pl16',
+                      icon: classNames(styles.cardIcon, 'tc-grey-900'),
+                    }}
+                    dropShadow={false}
+                    icon={renderedIcon}
+                    title={section.title}
+                    titleVariant="medium"
+                    {...(collapsibleSections
+                      ? {
+                          onClick: () => handleToggleSection(index),
+                        }
+                      : {})}
+                  />
                 </div>
-              )}
+              </div>
+            )}
 
-              <Collapsible isExpanded={isExpanded}>
-                <TableSection
-                  className={classNames(className, 'mb24')}
-                  tableCellRows={
-                    isFirstSection ? rows : [firstHeadRow, ...rows]
-                  }
-                  hideColumns={hideColumns}
-                  hideHeader
-                  openModal={openModal}
-                  title={`${title}${
-                    section?.title ? ` - ${section.title}` : ''
-                  }`}
-                  width={tableWidth}
-                  cellReplacements={cellReplacements}
-                  imageComponent={imageComponent}
-                />
-              </Collapsible>
-            </div>
-          )
+            <Collapsible isExpanded={isExpanded}>
+              <TableSection
+                className={classNames(className, 'mb24')}
+                tableCellRows={
+                  isFirstSection ? rows : [firstHeadRow, ...rows]
+                }
+                hideColumns={hideColumns}
+                hideRows={sectionHideRows}
+                hideHeader
+                openModal={openModal}
+                title={`${title}${
+                  section?.title ? ` - ${section.title}` : ''
+                }`}
+                width={tableWidth}
+                cellReplacements={cellReplacements}
+                imageComponent={imageComponent}
+              />
+            </Collapsible>
+          </div>
         );
+
+        // Update global offset for next section (excluding header row for non-first sections)
+        globalRowOffset += rows.length;
+
+        return result;
       })}
     </div>
   );

package/src/lib/components/table/components/TableSection/TableSection.tsx

@@ -16,6 +16,7 @@ export interface TableSectionProps {
   className?: string;
   tableCellRows: TableCellRowData[];
   hideColumns?: number[];
+  hideRows?: number[];
   hideHeader?: boolean;
   openModal?: ModalFunction;
   title: string;
@@ -28,6 +29,7 @@ const TableSection = ({
   className,
   tableCellRows,
   hideColumns = [],
+  hideRows = [],
   hideHeader,
   openModal,
   title,
@@ -70,6 +72,11 @@ const TableSection = ({
     [hideColumns]
   );
 
+  const isVisibleRow = useCallback(
+    (rowIndex: number) => !hideRows.includes(rowIndex),
+    [hideRows]
+  );
+
   return (
     <table
       className={classNames(className, 'w100', styles.table)}
@@ -120,7 +127,7 @@ const TableSection = ({
       <tbody>
         {tableCellRows.map(
           (row, rowIndex) =>
-            rowIndex > 0 && (
+            rowIndex > 0 && isVisibleRow(rowIndex) && (
               <tr key={rowIndex} className={styles.tr}>
                 {row.map((tableCellData, cellIndex) => {
                   const key = `${rowIndex}-${cellIndex}`;

package/dist/esm/TableSection-f41d4248.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableSection-f41d4248.js","sources":["../../../src/lib/components/table/types.ts","../../../src/lib/components/table/components/TableSection/TableSection.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { BaseCellProps } from './components/TableCell/BaseCell/BaseCell';\nimport { CTACellProps } from './components/TableCell/CTACell/CTACell';\nimport { ButtonCellProps } from './components/TableCell/ButtonCell/ButtonCell';\nimport { CardCellProps } from './components/TableCell/CardCell/CardCell';\n\ntype DefaultCellProps = {\n  cellId?: string;\n  colSpan?: number;\n  modalTitle?: ReactNode;\n};\n\ntype BaseCellData = BaseCellProps & { type?: undefined } & DefaultCellProps;\ntype CTACellData = CTACellProps & { type: 'CTA' } & DefaultCellProps;\ntype ButtonCellData = ButtonCellProps & { type: 'BUTTON' } & DefaultCellProps;\ntype CardCellData = CardCellProps & { type: 'CARD' } & DefaultCellProps;\n\nexport type TableCellData =\n  | BaseCellData\n  | CTACellData\n  | ButtonCellData\n  | CardCellData;\n\nexport const isBaseCell = (\n  tableCellData: TableCellData\n): tableCellData is BaseCellData => {\n  return !tableCellData.type;\n};\n\nexport type TableSectionType = {\n  title?: string;\n  icon?: ReactNode;\n};\n\nexport type ModalData = {\n  title?: ReactNode;\n  body?: ReactNode;\n};\n\nexport type TableCellRowData = TableCellData[];\n\nexport type TableSectionData = {\n  section?: TableSectionType;\n  rows: TableCellRowData[];\n};\n\nexport type TableData = TableSectionData[];\n\nexport type ModalFunction = (modalData: ModalData) => void;\n\nexport type CellReplacements = Record<string, Partial<TableCellData>>;\n","import classNames from 'classnames';\n\nimport styles from './TableSection.module.scss';\nimport { TableCell } from '../TableCell/TableCell';\nimport {\n  CellReplacements,\n  isBaseCell,\n  ModalFunction,\n  TableCellData,\n  TableCellRowData,\n} from '../../types';\nimport { useCallback } from 'react';\nimport { useMediaQuery } from '../../../../hooks/useMediaQuery';\n\nexport interface TableSectionProps {\n  className?: string;\n  tableCellRows: TableCellRowData[];\n  hideColumns?: number[];\n  hideHeader?: boolean;\n  openModal?: ModalFunction;\n  title: string;\n  width?: number | string;\n  cellReplacements?: CellReplacements;\n  imageComponent?: (args: any) => JSX.Element;\n}\n\nconst TableSection = ({\n  className,\n  tableCellRows,\n  hideColumns = [],\n  hideHeader,\n  openModal,\n  title,\n  width,\n  cellReplacements,\n  imageComponent,\n}: TableSectionProps) => {\n  const headerRow = tableCellRows?.[0];\n  const isBelowDesktop = useMediaQuery('BELOW_DESKTOP');\n\n  const getModalTitleFromColumnHeader = (cellIndex: number) => {\n    const firstCellInColumn = tableCellRows?.[0]?.[cellIndex];\n    let titleFromColumn;\n\n    switch (firstCellInColumn.type) {\n      case 'BUTTON':\n        titleFromColumn = firstCellInColumn.buttonCaption;\n        break;\n      case 'CTA':\n        titleFromColumn = firstCellInColumn.title;\n        break;\n      case undefined:\n        titleFromColumn = firstCellInColumn.text || '';\n        break;\n    }\n\n    return titleFromColumn;\n  };\n\n  const getModalTitleFromRowHeader = (currentRow: TableCellRowData) => {\n    const firstCellInRow = currentRow?.[0];\n    const titleFromRow =\n      (isBaseCell(firstCellInRow) && firstCellInRow.text) || '';\n\n    return titleFromRow;\n  };\n\n  const isVisibleColumn = useCallback(\n    (cellIndex: number) => !hideColumns.includes(cellIndex),\n    [hideColumns]\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((tableCellData, cellIndex) => {\n              const isFirstCellInRow = cellIndex === 0;\n              const cellReplacementData =\n                (tableCellData.cellId &&\n                  cellReplacements?.[tableCellData.cellId]) ||\n                {};\n\n              const cellProps = {\n                ...tableCellData,\n                ...cellReplacementData,\n                ...{\n                  openModal,\n                  modalTitle:\n                    (isBaseCell(tableCellData) && tableCellData.text) ||\n                    getModalTitleFromColumnHeader(cellIndex),\n                  align: isFirstCellInRow ? 'left' : 'center',\n                },\n              } as TableCellData;\n\n              return (\n                isVisibleColumn(cellIndex) && (\n                  <TableCell\n                    key={cellIndex}\n                    isBelowDesktop={isBelowDesktop}\n                    isHeader\n                    isFirstCellInRow={isFirstCellInRow}\n                    isTopLeftCell={isFirstCellInRow}\n                    {...cellProps}\n                    imageComponent={imageComponent}\n                  />\n                )\n              );\n            })}\n          </tr>\n        </thead>\n      )}\n\n      <tbody>\n        {tableCellRows.map(\n          (row, rowIndex) =>\n            rowIndex > 0 && (\n              <tr key={rowIndex} className={styles.tr}>\n                {row.map((tableCellData, cellIndex) => {\n                  const key = `${rowIndex}-${cellIndex}`;\n                  const isFirstCellInRow = cellIndex === 0;\n                  const titleFromRow = getModalTitleFromRowHeader(row);\n\n                  const cellReplacementData =\n                    (tableCellData.cellId &&\n                      cellReplacements?.[tableCellData.cellId]) ||\n                    {};\n\n                  const cellProps = {\n                    ...tableCellData,\n                    ...cellReplacementData,\n                    ...{\n                      openModal,\n                      modalTitle: tableCellData?.modalTitle || titleFromRow,\n                      align: isFirstCellInRow ? 'left' : 'center',\n                    },\n                  } as TableCellData;\n\n                  return (\n                    !hideColumns.includes(cellIndex) && (\n                      <TableCell\n                        isBelowDesktop={isBelowDesktop}\n                        isFirstCellInRow={isFirstCellInRow}\n                        key={key}\n                        {...cellProps}\n                        imageComponent={imageComponent}\n                      />\n                    )\n                  );\n                })}\n              </tr>\n            )\n        )}\n      </tbody>\n    </table>\n  );\n};\n\nexport { TableSection };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}