@indico-data/design-system 2.51.0 → 2.51.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.51.0",
+  "version": "2.51.2",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/index.ts

@@ -21,3 +21,4 @@ export { InputDateRangePicker } from './forms/date/inputDateRangePicker';
 export { Modal } from './modal';
 export { Badge } from './badge';
 export { Pagination } from './pagination';
+export { TanstackTable } from './tanstackTable';

package/src/components/tanstackTable/TankstackTable.types.ts

@@ -3,7 +3,7 @@ import { Row, ColumnDef } from '@tanstack/react-table';
 export type WithPaginationProps = {
   rowsPerPage: number;
   rowCount: number;
-  onChangePage: (page: number, perPage: number) => void;
+  onChangePage: (page: number) => void;
   currentPage: number;
   totalEntriesText?: string;
   showPagination: true;
@@ -12,7 +12,7 @@ export type WithPaginationProps = {
 export type WithoutPaginationProps = {
   rowsPerPage?: number;
   rowCount?: number;
-  onChangePage?: (page: number, perPage: number) => void;
+  onChangePage?: (page: number) => void;
   currentPage?: number;
   totalEntriesText?: string;
   showPagination?: false;
@@ -36,4 +36,9 @@ export type Props<T extends object> = {
   isLoading?: boolean;
   defaultPinnedColumns?: string[];
   onClickRow?: ((row: Row<T>) => void) | null;
+  onRowClick?: (row: T) => void;
+  activeRows?: string[];
+  rowSelection?: Record<string, boolean>;
+  onRowSelectionChange?: (updater: Record<string, boolean>) => void;
+  onSelectAllChange?: (isSelected: boolean) => void;
 } & PaginationProps;

package/src/components/tanstackTable/TanstackTable.stories.tsx

@@ -5,7 +5,7 @@ import { people, Person } from './mock-data/mock-data';
 import { columns } from './mock-data/table-configuration';
 import { ColumnDef, Row } from '@tanstack/react-table';
 import { Button } from '../button';
-
+import { useState } from 'react';
 const meta: Meta = {
   title: 'Layout/Tanstack Table',
   component: TanstackTable,
@@ -182,13 +182,7 @@ const meta: Meta = {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <div style={{ width: '100%', height: '500px', overflow: 'hidden' }}>
-        <Story />
-      </div>
-    ),
-  ],
+  decorators: [(Story) => <Story />],
 };
 
 export default meta;
@@ -199,10 +193,23 @@ export const Default: Story = {};
 
 export const WithRowClick: Story = {
   args: {
-    onClickRow: (row: Row<Person>) => {
-      console.log(row);
+    onRowClick: (row: any) => {
+      return row.original;
     },
   },
+
+  render: (args) => {
+    const [clickedItem, setClickedItem] = useState<Person | undefined>(undefined);
+    return (
+      <div style={{ width: '700px', height: '500px', overflow: 'hidden' }}>
+        <TanstackTable<Person>
+          {...args}
+          activeRows={clickedItem ? [clickedItem.id as string] : []}
+          onRowClick={(row) => setClickedItem(row as any)}
+        />
+      </div>
+    );
+  },
 };
 
 export const PinnedColumns: Story = {
@@ -258,3 +265,20 @@ export const WithPagination: Story = {
     onChangePage: () => {},
   },
 };
+
+export const WithRowSelection: Story = {
+  args: {
+    showPagination: true,
+    rowCount: people.length,
+    currentPage: 1,
+    rowsPerPage: 20,
+    onChangePage: () => {},
+  },
+  render: (args) => {
+    return (
+      <div style={{ width: '700px', height: '500px', overflow: 'hidden' }}>
+        <TanstackTable<Person> {...args} />
+      </div>
+    );
+  },
+};

package/src/components/tanstackTable/TanstakTable.tsx

@@ -29,25 +29,24 @@ export function TanstackTable<T extends object>({
   showPagination = true,
   isLoading = false,
   defaultPinnedColumns,
-  onClickRow = null,
+  onRowClick,
+  activeRows = [],
   actionBarClassName,
+  ...rest
 }: Props<T & { id: string }>) {
   const {
     columns,
     defaultData,
     windowWidth,
-    rowSelection,
+    rowSelection, // This refers to the checkboxes.
     setRowSelection,
     formattedColumns,
     setFormattedColumns,
-    isClickedRow,
-    setIsClickedRow,
   } = useTanstackTable({
     defaultColumns,
   });
 
   const thRefs = useRef<Record<string, HTMLTableCellElement | null>>({});
-
   // Sets formattedColumns with correct column widths
   useEffect(() => {
     const updatedColumns: ColumnDef<T & { id: string }>[] = [];
@@ -64,6 +63,7 @@ export function TanstackTable<T extends object>({
   }, [data, columns, windowWidth]);
 
   const table = useReactTable({
+    ...rest,
     data: data ?? defaultData,
     columns: formattedColumns,
     state: {
@@ -73,7 +73,7 @@ export function TanstackTable<T extends object>({
     onRowSelectionChange: setRowSelection,
     getCoreRowModel: getCoreRowModel(),
     manualPagination: true,
-    debugTable: true,
+    getRowId: (row) => row?.id,
     initialState: {
       columnPinning: {
         left: defaultPinnedColumns,
@@ -116,11 +116,10 @@ export function TanstackTable<T extends object>({
     return (
       <TableBody<T & { id: string }>
         table={table}
-        onClickRow={onClickRow}
+        onRowClick={onRowClick}
         isLoading={isLoading}
         columnsLength={columns.length}
-        isClickedRow={isClickedRow}
-        setIsClickedRow={setIsClickedRow}
+        activeRows={activeRows}
       />
     );
   };

package/src/components/tanstackTable/__tests__/TanstackTable.test.tsx

@@ -30,27 +30,13 @@ describe('Tanstack Table Component', () => {
 
   test('handles click on checkbox to select row', () => {
     render(<TanstackTable columns={columns} data={data} enableRowSelection={true} />);
-    const indexRow = 0;
-    const firstCheckbox = screen.getByTestId(`checkbox-${indexRow}`);
+    const firstCheckbox = screen.getByTestId(`checkbox-${data[0].id}`);
     fireEvent.click(firstCheckbox);
-    const firstRow = screen.getByText(data[indexRow].name).closest('tr');
+    const firstRow = screen.getByText(data[0].name).closest('tr');
     expect(firstRow).toHaveClass('is-selected');
   });
 
-  test('handles click on a row with onClickRow property', () => {
-    const onClickRow = jest.fn();
-    render(
-      <TanstackTable
-        columns={columns}
-        data={data}
-        enableRowSelection={true}
-        onClickRow={onClickRow}
-      />,
-    );
-    const firstRow = screen.getByText(data[0].name);
-    fireEvent.click(firstRow);
-    expect(onClickRow).toHaveBeenCalled();
-  });
+  it.todo('handles click on a row with onClickRow property');
 
   test('renders pagination when showPagination is true', () => {
     render(

package/src/components/tanstackTable/components/ActionBar/ActionBar.scss

@@ -4,7 +4,7 @@
   left: 50%;
   transform: translateX(-50%);
   z-index: 90;
-
+  box-shadow: 3px 1px 15px 0 rgba(0, 0, 0, 0.85);
   &__container {
     display: flex;
     align-items: center;

package/src/components/tanstackTable/components/ActionBar/ActionBar.tsx

@@ -27,18 +27,10 @@ export function ActionBar<T extends object>({
     });
   };
 
-  const getSelectedItemsText = () => {
-    if (selectedItems.length === 1) return '1 item selected';
-    return `${selectedItems.length} items selected`;
-  };
-
   return (
     <Card className={classNames('tanstack-table__action-bar', className)}>
       {children ?? (
         <div className="tanstack-table__action-bar__container">
-          <div className="tanstack-table__action-bar__text-container">
-            <span>{getSelectedItemsText()}</span>
-          </div>
           {TableActions && (
             <div className="tanstack-table__action-bar__button-container">
               <TableActions selectedItems={selectedItems} unselectRows={unselectRows} />

package/src/components/tanstackTable/components/ActionBar/__tests__/ActionBar.test.tsx

@@ -14,28 +14,6 @@ const createDummyTable = (rows: DummyRow[]): Table<any> =>
   }) as Table<any>;
 
 describe('ActionBar', () => {
-  it('renders correct text for one selected row', () => {
-    const dummyRows: DummyRow[] = [
-      { getIsSelected: () => true, toggleSelected: jest.fn() },
-      { getIsSelected: () => false, toggleSelected: jest.fn() },
-    ];
-    const dummyTable = createDummyTable(dummyRows);
-
-    render(<ActionBar table={dummyTable} />);
-    expect(screen.getByText('1 item selected')).toBeDefined();
-  });
-
-  it('renders correct text for multiple selected rows', () => {
-    const dummyRows: DummyRow[] = [
-      { getIsSelected: () => true, toggleSelected: jest.fn() },
-      { getIsSelected: () => true, toggleSelected: jest.fn() },
-    ];
-    const dummyTable = createDummyTable(dummyRows);
-
-    render(<ActionBar table={dummyTable} />);
-    expect(screen.getByText('2 items selected')).toBeDefined();
-  });
-
   it('renders correct when use a children prop', () => {
     const dummyRows: DummyRow[] = [
       { getIsSelected: () => true, toggleSelected: jest.fn() },

package/src/components/tanstackTable/components/TableBody/TableBody.tsx

@@ -7,45 +7,29 @@ import { Dispatch, SetStateAction } from 'react';
 
 export type Props<T> = {
   table: Table<T>;
-  onClickRow?: ((row: Row<T>) => void) | null;
+  onRowClick?: ((row: T & { id: string }) => void) | null | undefined;
   isLoading: boolean;
   columnsLength: number;
-  isClickedRow: string[];
-  setIsClickedRow: Dispatch<SetStateAction<string[]>>;
+  activeRows: string[];
 };
 
 export const TableBody = <T,>({
   table,
-  onClickRow,
+  onRowClick,
   isLoading,
   columnsLength,
-  isClickedRow,
-  setIsClickedRow,
+  activeRows,
 }: Props<T>) => {
-  const toggleRow = (id: string) => {
-    if (isClickedRow.includes(id)) {
-      setIsClickedRow((state) => state.filter((item) => item !== id));
-    } else {
-      setIsClickedRow((state) => [...state, id]);
-    }
-  };
-
   return (
     <>
       {table.getRowModel().rows.map((row) => (
         <tr
           className={classNames('tanstack-table__tbody__tr', {
             'is-selected': row.getIsSelected(),
-            'show-hover': !!onClickRow,
-            'is-clicked': isClickedRow.includes(row.id),
+            'show-hover': !!onRowClick,
+            'is-clicked': activeRows.includes(row.id), // Checkbox Is clicked
           })}
           key={row.id}
-          onClick={() => {
-            if (!!onClickRow) {
-              toggleRow(row.id);
-              onClickRow(row);
-            }
-          }}
         >
           {row.getVisibleCells().map((cell) => {
             const { columnDef } = cell.column;
@@ -63,6 +47,12 @@ export const TableBody = <T,>({
                     cell.column.getSize(),
                   ),
                 }}
+                onClick={() => {
+                  // if the cell is not preventRowSelection, then we can click the row
+                  if (!columnDef.meta?.styles?.cell?.preventRowSelection) {
+                    onRowClick?.(row as any);
+                  }
+                }}
               >
                 {flexRender(columnDef.cell, cell.getContext())}
               </td>

package/src/components/tanstackTable/components/TablePagination/TablePagination.tsx

@@ -4,7 +4,7 @@ import { Row, Col } from '../../../grid';
 interface TablePaginationProps {
   rowsPerPage: number;
   rowCount: number;
-  onChangePage: (page: number, perPage: number) => void;
+  onChangePage: (page: number) => void;
   currentPage: number;
   totalEntriesText?: string;
 }
@@ -36,7 +36,7 @@ export const TablePagination = ({
             data-testid="table-pagination-component"
             totalPages={totalPages}
             currentPage={currentPage}
-            onChange={(page) => onChangePage(page, rowsPerPage)}
+            onChange={(page) => onChangePage(page)}
           />
         </Col>
       </Row>

package/src/components/tanstackTable/helpers.ts

@@ -8,7 +8,7 @@ const getCommonPinningStyles = <T>(column: Column<T>): CSSProperties => {
   return {
     boxShadow: isLastLeftPinnedColumn ? '-4px 0 4px -4px gray inset' : undefined,
     left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
-    position: isPinned ? 'sticky' : 'relative',
+    position: isPinned ? 'sticky' : 'initial',
     zIndex: isPinned ? 1 : 0,
   };
 };

package/src/components/tanstackTable/index.ts

@@ -1,2 +1,2 @@
-export type { ColumnDef } from '@tanstack/react-table';
+export type { ColumnDef, Row, Table } from '@tanstack/react-table';
 export { TanstackTable } from './TanstakTable';

package/src/components/tanstackTable/mock-data/table-configuration.tsx

@@ -53,6 +53,7 @@ export const columns = [
     header: ({ table }) => (
       <CheckboxContainer>
         <Checkbox
+          data-testid="select-all-checkbox"
           name="select-all"
           id="select-all"
           label=""
@@ -69,7 +70,9 @@ export const columns = [
         />
       </CheckboxContainer>
     ),
-    cell: ({ row }) => (
+    cell: (
+      { row }, // todo - look at
+    ) => (
       <CheckboxContainer>
         <Checkbox
           name="select"

package/src/components/tanstackTable/styles/table.scss

@@ -5,16 +5,28 @@
 @import '../components/NoResults/NoResults.scss';
 
 .tanstack-table__outer-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
+  .tanstack-table__column--is-pinned {
+    opacity: 1;
+  }
+
+  .tanstack-table__column--is-not-pinned {
+    opacity: 0.3;
+  }
 
   .tanstack-table__container {
-    position: relative;
-    display: block;
-    overflow: auto;
-    height: 100%;
+    height: calc(100vh - 70px);
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 1fr;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 1fr;
+    overflow-x: auto;
+    overflow-y: auto;
+    background-color: var(--pf-tanstack-table-background-color);
+    border-radius: var(--pf-rounded-lg);
+    border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+    border-right: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+    border-bottom: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
 
     // Webkit scrollbar styles
     &::-webkit-scrollbar {
@@ -61,7 +73,7 @@
   &__thead {
     position: sticky;
     top: 0;
-    z-index: 100;
+    z-index: 3;
     box-sizing: border-box;
 
     background-color: var(--pf-tanstack-table-background-color);
@@ -69,11 +81,11 @@
     tr:first-child {
       th {
         &:first-child {
-          border-top-left-radius: var(--pf-rounded-lg);
+          border-left: none;
         }
 
         &:last-child {
-          border-top-right-radius: var(--pf-rounded-lg);
+          border-right: none;
         }
       }
     }
@@ -101,27 +113,25 @@
       text-align: left;
 
       &:first-child {
-        border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+        border-left: none;
+      }
+
+      &:last-child {
+        border-right: none;
       }
     }
   }
 
   &__tbody {
     tr:last-child {
-      td {
-        &:first-child {
-          border-bottom-left-radius: var(--pf-rounded-lg);
-        }
-
-        &:last-child {
-          border-bottom-right-radius: var(--pf-rounded-lg);
-        }
-      }
+      border-bottom: none;
     }
 
     &__tr {
       background: transparent;
       width: 100%;
+      border-left: none;
+      border-right: none;
 
       &.is-selected {
         td {
@@ -166,7 +176,11 @@
       text-align: left;
 
       &:first-child {
-        border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+        border-left: none;
+      }
+
+      &:last-child {
+        border-right: none;
       }
     }
   }

package/src/components/tanstackTable/tanstack-table.d.ts

@@ -12,6 +12,7 @@ declare module '@tanstack/react-table' {
       cell?: {
         hasNoPadding?: boolean;
         textAlign?: 'left' | 'center' | 'right';
+        preventRowSelection?: boolean;
       };
     };
   }

package/src/components/tanstackTable/useTanstackTable.tsx

@@ -13,7 +13,6 @@ export function useTanstackTable<T>({ defaultColumns }: Props<T>) {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const [rowSelection, setRowSelection] = useState({});
   const [formattedColumns, setFormattedColumns] = useState<ColumnDef<T>[]>(columns);
-  const [isClickedRow, setIsClickedRow] = useState<string[]>([]);
 
   // Tracks changes to browser width to allow for updating of column widths
   useEffect(() => {
@@ -36,7 +35,5 @@ export function useTanstackTable<T>({ defaultColumns }: Props<T>) {
     windowWidth,
     formattedColumns,
     setFormattedColumns,
-    isClickedRow,
-    setIsClickedRow,
   };
 }

package/src/index.ts

@@ -32,3 +32,10 @@ export { TanstackTable } from './components/tanstackTable';
 
 // Utilities
 export { registerFontAwesomeIcons } from './setup/setupIcons';
+
+// Types
+export type {
+  ColumnDef,
+  Row as TanstackTableRowType,
+  Table as TanstackTableType,
+} from '@tanstack/react-table';

package/src/stylesAndAnimations/utilityClasses/UtilityClassesTable.tsx

@@ -101,8 +101,15 @@ export const UtilityClassesTable = () => {
 
       <Table
         columns={[
-          { name: 'Class Name', selector: (row) => row.className, sortable: true, width: '225px' },
           {
+            id: 'className',
+            name: 'Class Name',
+            selector: (row) => row.className,
+            sortable: true,
+            width: '225px',
+          },
+          {
+            id: 'cssApplied',
             name: 'CSS Applied',
             selector: (row) => formatCss(row.css),
             sortable: true,
@@ -119,6 +126,7 @@ export const UtilityClassesTable = () => {
             ),
           },
           {
+            id: 'resolvedCss',
             name: 'Resolved CSS',
             selector: (row) => formatCss(row.resolvedCss || ''),
             sortable: true,
@@ -134,7 +142,13 @@ export const UtilityClassesTable = () => {
               </pre>
             ),
           },
-          { name: 'Category', selector: (row) => row.category, sortable: true, width: '114px' },
+          {
+            id: 'category',
+            name: 'Category',
+            selector: (row) => row.category,
+            sortable: true,
+            width: '114px',
+          },
         ]}
         data={filteredData}
         dense