@indico-data/design-system 2.48.0 → 2.50.0

package/lib/stylesAndAnimations/utilityClasses/UtilityClassesData.d.ts

@@ -0,0 +1,7 @@
+export type UtilityClassData = {
+    className: string;
+    css: string;
+    category: string;
+    resolvedCss?: string;
+};
+export declare const utilityClassesData: UtilityClassData[];

package/lib/stylesAndAnimations/utilityClasses/UtilityClassesTable.d.ts

@@ -0,0 +1 @@
+export declare const UtilityClassesTable: () => import("react/jsx-runtime").JSX.Element;

package/lib/stylesAndAnimations/utilityClasses/UtilityClassesTable.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { UtilityClassesTable } from './UtilityClassesTable';
+declare const meta: Meta<typeof UtilityClassesTable>;
+export default meta;
+type Story = StoryObj<typeof UtilityClassesTable>;
+export declare const Default: Story;

package/lib/utils/getPreviousHeadersWidth.d.ts

@@ -0,0 +1 @@
+export declare const getPreviousHeadersWidth: (position: number) => number;

package/package.json

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

package/src/components/table/Table.mdx

@@ -21,6 +21,9 @@ The `conditionalRowStyles` prop allows you to apply custom styles to specific ro
 
 - **`highlighted`**: This class is used to visually emphasize specific rows. When applied, the row will inherit styles defined in the design system, making the row stand out with distinct border and background colors.
 
+### Issues with storybook
+You may notice the stories may behave a little strangely on storybook, this is not the case in the application. One such bug would be the checkboxes pinning on the default example when toggling props. Another will be the select all checkbox not being locked on the second pinned column example. We have not investigated as this is likely a quirk with the storybook environment. 
+
 ### Example Usage
 
 Here's an example of how to use the `conditionalRowStyles` prop to apply the `checked` and `highlighted` classes:
@@ -44,3 +47,134 @@ const conditionalRowStyles = [
   conditionalRowStyles={conditionalRowStyles}
 />;
 ```
+
+## Pinned Columns
+
+The `canPinColumns` prop allows you to pin columns to the left hand side of the table. This is useful for displaying important columns that should be visible at all times.
+
+## Known Bugs
+A limitation of the library has caused us to compromise on the column widths. We had to choose between allowing the pinning of Fixed Width columns, or allowing the pinning of Auto Widths columns. As it stands right now, we went with Fixed Width columns. As a result, you will experience pixel drift on the third+ columns if you do not use fixed width. An example on how to use the fixed width is the following.
+```jsx
+ columns={[
+    {
+      isPinned: false,
+      name: 'Name',
+      selector: () => {},
+      width: '150px'
+    },
+  ]}
+  ```
+
+### Note
+
+It will require both `canPinColumns` to be set to `true` and the columns that you wish to have the pin icon contain `isPinned: true` or `isPinned: false` to function. If `isPinned` is undefined, no icon will appear.
+<Canvas of={TableStories.PinnedColumns} />
+```jsx
+<Table
+  canPinColumns
+  columns={[
+    {
+      isPinned: false,
+      name: 'Name',
+      selector: () => {},
+      width: '150px'
+    },
+    {
+      isPinned: true,
+      name: 'Class',
+      selector: () => {},
+      width: '150px'
+    },
+    {
+      isPinned: true,
+      name: 'Age',
+      selector: () => {},
+      width: '150px'
+    },
+    {
+      name: 'Weapon',
+      selector: () => {}
+    },
+    {
+      name: 'Backstory',
+      selector: () => {}
+    },
+    {
+      name: 'Favorite Meal',
+      selector: () => {}
+    },
+    {
+      name: 'Homeland',
+      selector: () => {}
+    },
+    {
+      name: 'Alignment',
+      selector: () => {}
+    },
+    {
+      isPinned: false,
+      name: 'Special Ability',
+      selector: () => {}
+    }
+  ]}
+  data={[
+    {
+      age: 120,
+      alignment: 'Neutral Good',
+      backstory: 'Raised by wolves in the deep forests.',
+      class: 'Ranger',
+      favoriteMeal: 'Venison stew',
+      homeland: 'Silverleaf Forest',
+      name: 'Thalion',
+      specialAbility: 'Beast Speech',
+      test: 'test',
+      weapon: 'Longbow'
+    },
+    {
+      age: 35,
+      alignment: 'Lawful Good',
+      backstory: 'A former soldier seeking redemption.',
+      class: 'Fighter',
+      favoriteMeal: 'Roasted boar',
+      homeland: 'Kingdom of Valorhaven',
+      name: 'Brom',
+      specialAbility: 'Battle Master',
+      test: 'test',
+      weapon: 'Greatsword'
+    },
+    {
+      age: 60,
+      alignment: 'Lawful Good',
+      backstory: 'A devoted follower of the goddess of life.',
+      class: 'Cleric',
+      favoriteMeal: 'Vegetable soup',
+      homeland: 'Temple of Dawn',
+      name: 'Elysia',
+      specialAbility: 'Divine Healing',
+      test: 'test',
+      weapon: 'Mace'
+    },
+    //... more rows
+  ]}
+  dense
+  direction="ltr"
+  fixedHeader
+  noDataComponent={null}
+  onPinnedColumnsChange={() => {}}
+  pagination
+  paginationPerPage={10}
+  paginationRowsPerPageOptions={[
+    5,
+    10,
+    15,
+    20
+  ]}
+  responsive
+  selectableRows
+  subHeaderAlign="center"
+  subHeaderComponent={null}
+  subHeaderWrap
+  title="Character List"
+  totalEntriesText="Showing 12 of 12 entries."
+/>
+```

package/src/components/table/Table.stories.tsx

@@ -3,6 +3,7 @@ import { Table } from './Table';
 import { columns, sampleData, SampleDataRow } from './sampleData';
 import { registerFontAwesomeIcons } from '@/setup/setupIcons';
 import { indiconDefinitions } from '@/components/icons/indicons';
+import { useState } from 'react';
 
 registerFontAwesomeIcons(...Object.values(indiconDefinitions));
 
@@ -12,7 +13,8 @@ const meta: Meta = {
   argTypes: {
     columns: {
       control: false,
-      description: 'The columns to display in the table',
+      description:
+        'The columns to display in the table. All columns require a unique id property. For pinned columns, please see the pinned example below.',
       table: {
         category: 'Data',
         type: { summary: 'array' },
@@ -251,6 +253,21 @@ const meta: Meta = {
         category: 'Styling',
       },
     },
+    canPinColumns: {
+      control: 'boolean',
+      description:
+        'Allows the pinning of columns to the left hand side. This is required when using the column pin API',
+      table: {
+        category: 'Add-Ons',
+      },
+    },
+    onPinnedColumnsChange: {
+      control: false,
+      description: 'Callback that receives the IDs of the pinned columns when they change.',
+      table: {
+        category: 'Add-Ons',
+      },
+    },
     // hidden props
     onRowDoubleClicked: {
       table: {
@@ -521,6 +538,41 @@ type Story = StoryObj<typeof Table<SampleDataRow>>;
 
 export const Default: Story = {
   args: {
+    canPinColumns: false,
+    pagination: true,
+    selectableRows: true,
+    isDisabled: false,
+    isLoading: false,
+    direction: 'ltr',
+    striped: false,
+    subHeaderAlign: 'center',
+    subHeaderWrap: true,
+    paginationRowsPerPageOptions: [5, 10, 15, 20],
+    responsive: true,
+    title: 'Character List',
+    dense: true,
+    noHeader: false,
+    noTableHead: false,
+    noDataComponent: null,
+    expandableRows: false,
+    clearSelectedRows: false,
+    subHeader: false,
+    subHeaderComponent: null,
+    fixedHeader: true,
+    paginationPerPage: 10,
+    isFullHeight: false,
+    totalEntriesText: 'Showing 12 of 12 entries.',
+    columns: columns,
+    data: sampleData,
+  },
+  render: ({ ...args }) => {
+    return <Table {...args} columns={columns} />;
+  },
+};
+
+export const PinnedColumns: Story = {
+  args: {
+    canPinColumns: true,
     pagination: true,
     selectableRows: true,
     isDisabled: false,
@@ -540,11 +592,28 @@ export const Default: Story = {
     clearSelectedRows: false,
     subHeader: false,
     subHeaderComponent: null,
+    fixedHeader: true,
     paginationPerPage: 10,
     isFullHeight: false,
     totalEntriesText: 'Showing 12 of 12 entries.',
     columns: columns,
     data: sampleData,
   },
-  render: ({ ...args }) => <Table {...args} />,
+  render: ({ ...args }) => {
+    const initialPinnedColumnIds = ['name', 'class'];
+    const [pinnedColumnIds, setPinnedColumnIds] = useState<string[]>(initialPinnedColumnIds);
+
+    const columnsWithPinning = columns.map((column) => ({
+      ...column,
+      isPinned: pinnedColumnIds.includes(column.id as string),
+    }));
+
+    return (
+      <Table
+        {...args}
+        columns={columnsWithPinning}
+        onPinnedColumnsChange={(ids) => setPinnedColumnIds(ids)}
+      />
+    );
+  },
 };

package/src/components/table/Table.tsx

@@ -3,10 +3,10 @@ import DataTable, {
   Direction as RDTDirection,
   Alignment as RDTAlignment,
 } from 'react-data-table-component';
-
 import { LoadingComponent } from './LoadingComponent';
 import { TableProps } from './types';
 import { TablePagination } from './components/TablePagination';
+import { usePinnedColumnsManager } from './hooks/usePinnedColumnsManager';
 
 export const Table = <T,>(props: TableProps<T>) => {
   const {
@@ -22,9 +22,20 @@ export const Table = <T,>(props: TableProps<T>) => {
     className,
     paginationTotalRows,
     totalEntriesText,
+    data,
+    columns: initialColumns,
+    canPinColumns = false,
+    onPinnedColumnsChange,
     ...rest
   } = props;
 
+  // Turns on/off column pinning.
+  const { columnsWithPinning } = usePinnedColumnsManager(
+    initialColumns,
+    canPinColumns,
+    onPinnedColumnsChange,
+  );
+
   const combinedClassName = classNames(className, {
     'table--striped': striped,
     'table-body': true,
@@ -37,6 +48,8 @@ export const Table = <T,>(props: TableProps<T>) => {
   return (
     <div className={tableWrapperClassName} data-testid="table">
       <DataTable
+        data={data}
+        columns={columnsWithPinning}
         responsive={responsive}
         direction={direction as RDTDirection}
         subHeaderAlign={subHeaderAlign as RDTAlignment}
@@ -52,6 +65,8 @@ export const Table = <T,>(props: TableProps<T>) => {
           <TablePagination {...props} totalEntriesText={totalEntriesText} />
         )}
         paginationTotalRows={paginationTotalRows}
+        highlightOnHover
+        pointerOnHover
         {...rest}
       />
     </div>

package/src/components/table/components/HorizontalStickyHeader.tsx

@@ -0,0 +1,57 @@
+import { useEffect } from 'react';
+import { Button } from '../../button/Button';
+import {
+  getPreviousHeadersWidth,
+  applyStickyStylesToTableHeader,
+  clearStickyStyles,
+} from './helpers';
+interface HorizontalStickyHeaderProps {
+  children: React.ReactNode;
+  position: number;
+  onPinColumn?: (columnId: string) => void;
+  isPinned?: boolean;
+  forceUpdate?: number;
+  pinnedColumnIds: string[];
+}
+
+const HorizontalStickyHeader = ({
+  children,
+  position,
+  onPinColumn,
+  isPinned = false,
+  pinnedColumnIds,
+}: HorizontalStickyHeaderProps) => {
+  useEffect(() => {
+    const calculateWidth = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      const header = document.querySelector(`[data-column-id="sticky-column-${position}"]`);
+      if (header) {
+        if (isPinned) {
+          const width = getPreviousHeadersWidth(position, pinnedColumnIds);
+          await applyStickyStylesToTableHeader(position, width);
+        } else {
+          clearStickyStyles(header as HTMLElement);
+        }
+      }
+    };
+
+    calculateWidth();
+  }, [position, isPinned, pinnedColumnIds]);
+
+  return (
+    <div className="table__header-cell" data-testid={`sticky-column-${position}`}>
+      <Button
+        data-testid={`sticky-header-pin-button-${position}`}
+        variant="link"
+        size="sm"
+        iconLeft="pin"
+        onClick={onPinColumn}
+        ariaLabel={isPinned ? 'Unpin column' : 'Pin column'}
+        className={`table__column--${isPinned ? 'is-pinned' : 'is-not-pinned'} table__column__pin-action`}
+      />
+      <div className="table__header-content">{children}</div>
+    </div>
+  );
+};
+
+export default HorizontalStickyHeader;

package/src/components/table/components/__tests__/HorizontalStickyHeader.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import HorizontalStickyHeader from '../HorizontalStickyHeader';
+import { sampleData } from '../../sampleData';
+import { Table } from '../../Table';
+import { columns } from '../../sampleData';
+import userEvent from '@testing-library/user-event';
+
+// Add ResizeObserver mock before tests
+class ResizeObserverMock {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+// Add the mock to the global object
+global.ResizeObserver = ResizeObserverMock;
+
+describe('HorizontalStickyHeader', () => {
+  // Store original implementation
+  const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+
+  afterEach(() => {
+    // Restore original implementation after each test
+    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+  });
+
+  it('correctly handles column pinning states based on column configuration', () => {
+    render(
+      <Table
+        responsive
+        columns={columns}
+        canPinColumns
+        data={sampleData}
+        totalEntriesText="100 entries"
+      />,
+    );
+
+    columns.forEach((column, index) => {
+      if (column.isPinned === undefined) {
+        // For columns where isPinned is not defined, the pin button should not exist
+        const pinButton = screen.queryByTestId(`sticky-header-pin-button-${index}`);
+        expect(pinButton).not.toBeInTheDocument();
+      } else {
+        // For columns where isPinned is defined, check for the correct class
+        const pinButton = screen.getByTestId(`sticky-header-pin-button-${index}`);
+        expect(pinButton).toHaveClass(
+          column.isPinned ? 'table__column--is-pinned' : 'table__column--is-not-pinned',
+        );
+      }
+    });
+  });
+
+  it('fires the onPinColumn callback when the pin button is clicked', () => {
+    const onPinColumn = jest.fn();
+    render(
+      <HorizontalStickyHeader position={0} pinnedColumnIds={[]} onPinColumn={onPinColumn}>
+        Test Content
+      </HorizontalStickyHeader>,
+    );
+
+    const pinButton = screen.getByTestId('sticky-header-pin-button-0');
+    fireEvent.click(pinButton);
+    expect(onPinColumn).toHaveBeenCalled();
+  });
+
+  it('correctly handles column pinning states based on column configuration', () => {
+    render(
+      <Table
+        responsive
+        columns={columns}
+        canPinColumns
+        data={sampleData}
+        totalEntriesText="100 entries"
+      />,
+    );
+
+    columns.forEach((column, index) => {
+      if (column.isPinned === undefined) {
+        // For columns where isPinned is not defined, the pin button should not exist
+        const pinButton = screen.queryByTestId(`sticky-header-pin-button-${index}`);
+        expect(pinButton).not.toBeInTheDocument();
+      } else {
+        // For columns where isPinned is defined, check for the correct class
+        const pinButton = screen.getByTestId(`sticky-header-pin-button-${index}`);
+        expect(pinButton).toHaveClass(
+          column.isPinned ? 'table__column--is-pinned' : 'table__column--is-not-pinned',
+        );
+      }
+    });
+  });
+
+  it('fires the onPinColumn callback when the pin button is clicked', () => {
+    const onPinColumn = jest.fn();
+    render(
+      <HorizontalStickyHeader position={0} pinnedColumnIds={[]} onPinColumn={onPinColumn}>
+        Test Content
+      </HorizontalStickyHeader>,
+    );
+
+    const pinButton = screen.getByTestId('sticky-header-pin-button-0');
+    fireEvent.click(pinButton);
+    expect(onPinColumn).toHaveBeenCalled();
+  });
+});

package/src/components/table/components/helpers.ts

@@ -0,0 +1,90 @@
+import { CSSObject } from 'styled-components';
+
+// Gets the width of the previous pinned columns
+export const getPreviousHeadersWidth = (position: number, pinnedColumnIds: string[]): number => {
+  let totalWidth = 0;
+
+  // Add checkbox column width if it's pinned
+  if (pinnedColumnIds.includes('checkbox-column')) {
+    const checkboxCell = document.querySelector('.rdt_TableCol:not([data-column-id])');
+    if (checkboxCell) {
+      totalWidth += (checkboxCell as HTMLElement).offsetWidth;
+    }
+  }
+
+  // Add widths of other pinned columns before this position
+  const previousHeaders = Array.from({ length: position }, (_, i) => {
+    const header = document.querySelector(`[data-column-id="sticky-column-${i}"]`);
+    if (header && pinnedColumnIds.includes(`sticky-column-${i}`)) {
+      return header as HTMLElement;
+    }
+    return null;
+  }).filter((header): header is HTMLElement => header !== null);
+
+  // Calculate base width from previous columns
+  totalWidth = previousHeaders.reduce((acc, header) => {
+    return acc + header.offsetWidth;
+  }, totalWidth);
+
+  // Leave this for if we ever try to fix the auto width columns
+  // There is a bug where borders cause the offset to be wrong, this keeps it in sync.
+  // Add offset that increases by 1 every two columns after index 1
+  // if (position >= 2) {
+  //   const additionalOffset = Math.floor((position - 2) / 2) + 1;
+  //   totalWidth += additionalOffset;
+  // }
+
+  return totalWidth;
+};
+
+// Applies sticky styles to the column header
+export const applyStickyStylesToTableHeader = async (position: number, left: number) => {
+  const header = document.querySelector(`[data-column-id="sticky-column-${position}"]`);
+  if (header) {
+    (header as HTMLElement).style.position = 'sticky';
+    (header as HTMLElement).style.left = `${left}px`;
+    (header as HTMLElement).style.zIndex = '3';
+    (header as HTMLElement).style.backgroundColor =
+      'var(--pf-table-pinned-column-background-color)';
+  }
+};
+
+// Sorts the pinned columns so that any column that is pinned comes before any column that is not.
+export const sortPinnedColumns = <T>(columns: T[], pinnedColumnIds: string[]): T[] => {
+  return [...columns].sort((a, b) => {
+    const aIsPinned = pinnedColumnIds.includes((a as any).id);
+    const bIsPinned = pinnedColumnIds.includes((b as any).id);
+
+    if (aIsPinned && !bIsPinned) return -1; // a comes first
+    if (!aIsPinned && bIsPinned) return 1; // b comes first
+    return 0; // maintain relative order for columns with same pinned state
+  });
+};
+
+// Gets the styles for the pinned columns
+export const getPinnedColumnStyles = (
+  isPinned: boolean,
+  index: number,
+  pinnedColumnIds: string[],
+): CSSObject => {
+  return isPinned
+    ? {
+        position: 'sticky',
+        left: `${getPreviousHeadersWidth(index, pinnedColumnIds)}px`,
+        zIndex: 3,
+        backgroundColor: 'var(--pf-table-pinned-column-background-color)',
+      }
+    : {
+        position: undefined,
+        left: undefined,
+        zIndex: undefined,
+        backgroundColor: undefined,
+      };
+};
+
+export const clearStickyStyles = (header: HTMLElement) => {
+  header.style.position = '';
+  header.style.left = '';
+  header.style.zIndex = '';
+  header.style.backgroundColor = '';
+};