@popsure/dirty-swan 0.66.12 → 0.66.13

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

@@ -23,6 +23,7 @@ export interface TableSectionProps {
   width?: number | string;
   cellReplacements?: CellReplacements;
   imageComponent?: (args: any) => JSX.Element;
+  selectedColumn?: number;
 }
 
 const TableSection = ({
@@ -36,10 +37,21 @@ const TableSection = ({
   width,
   cellReplacements,
   imageComponent,
+  selectedColumn,
 }: TableSectionProps) => {
   const headerRow = tableCellRows?.[0];
   const isBelowDesktop = useMediaQuery('BELOW_DESKTOP');
 
+  const firstVisibleBodyRowIndex = tableCellRows.findIndex(
+    (_, index) => index > 0 && !hideRows.includes(index)
+  );
+
+  const lastVisibleRowIndex = tableCellRows.reduce(
+    (last, row, index) =>
+      index > 0 && !hideRows.includes(index) && row.length > 1 ? index : last,
+    -1
+  );
+
   const getModalTitleFromColumnHeader = (cellIndex: number) => {
     const firstCellInColumn = tableCellRows?.[0]?.[cellIndex];
     let titleFromColumn;
@@ -77,9 +89,14 @@ const TableSection = ({
     [hideRows]
   );
 
+  const visibleColumnsLength =
+    headerRow?.filter((_, cellIndex) => isVisibleColumn(cellIndex)).length ?? 0;
+
   return (
     <table
-      className={classNames(className, 'w100', styles.table)}
+      className={classNames(className, 'w100', styles.table, {
+        [styles.tableMultiplePlans]: visibleColumnsLength > 2,
+      })}
       width={width}
     >
       <caption className="sr-only">{title}</caption>
@@ -102,7 +119,7 @@ const TableSection = ({
                   modalTitle:
                     (isBaseCell(tableCellData) && tableCellData.text) ||
                     getModalTitleFromColumnHeader(cellIndex),
-                  align: isFirstCellInRow ? 'left' : 'center',
+                  align: 'left',
                 },
               } as TableCellData;
 
@@ -114,6 +131,8 @@ const TableSection = ({
                     isHeader
                     isFirstCellInRow={isFirstCellInRow}
                     isTopLeftCell={isFirstCellInRow}
+                    isSelectedColumn={selectedColumn === cellIndex}
+                    selectedColumnPosition={selectedColumn === cellIndex ? 'top' : undefined}
                     {...cellProps}
                     imageComponent={imageComponent}
                   />
@@ -133,6 +152,14 @@ const TableSection = ({
                   const key = `${rowIndex}-${cellIndex}`;
                   const isFirstCellInRow = cellIndex === 0;
                   const titleFromRow = getModalTitleFromRowHeader(row);
+                  const isSelected = selectedColumn === cellIndex;
+
+                  const getSelectedColumnPosition = () => {
+                    if (!isSelected) return undefined;
+                    if (rowIndex === lastVisibleRowIndex) return 'bottom';
+                    if (hideHeader && rowIndex === firstVisibleBodyRowIndex) return 'top';
+                    return 'middle';
+                  };
 
                   const cellReplacementData =
                     (tableCellData.cellId &&
@@ -145,7 +172,7 @@ const TableSection = ({
                     ...{
                       openModal,
                       modalTitle: tableCellData?.modalTitle || titleFromRow,
-                      align: isFirstCellInRow ? 'left' : 'center',
+                      align: 'left',
                     },
                   } as TableCellData;
 
@@ -154,6 +181,8 @@ const TableSection = ({
                       <TableCell
                         isBelowDesktop={isBelowDesktop}
                         isFirstCellInRow={isFirstCellInRow}
+                        isSelectedColumn={isSelected}
+                        selectedColumnPosition={getSelectedColumnPosition()}
                         key={key}
                         {...cellProps}
                         imageComponent={imageComponent}

package/src/lib/models/styles.ts

@@ -22,6 +22,7 @@ export type Color = 'transparent' | 'blue-100'
 | 'neutral-100'
 | 'neutral-300'
 | 'neutral-400'
+| 'neutral-500'
 | 'neutral-600'
 | 'neutral-700'
 | 'neutral-800'

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

@@ -1 +0,0 @@
-{"version":3,"file":"TableSection-CEhD4eoy.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  hideRows?: 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  hideRows = [],\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  const isVisibleRow = useCallback(\n    (rowIndex: number) => !hideRows.includes(rowIndex),\n    [hideRows]\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 && isVisibleRow(rowIndex) && (\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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"}