@purpurds/table 7.0.0 → 7.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/table",
-  "version": "7.0.0",
+  "version": "7.2.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/table.cjs.js",
   "types": "./dist/table.d.ts",
@@ -17,22 +17,22 @@
   "dependencies": {
     "@tanstack/react-table": "~8.21.2",
     "classnames": "~2.5.0",
-    "@purpurds/badge": "7.0.0",
-    "@purpurds/cta-link": "7.0.0",
-    "@purpurds/button": "7.0.0",
-    "@purpurds/checkbox": "7.0.0",
-    "@purpurds/drawer": "7.0.0",
-    "@purpurds/heading": "7.0.0",
-    "@purpurds/icon": "7.0.0",
-    "@purpurds/link": "7.0.0",
-    "@purpurds/paragraph": "7.0.0",
-    "@purpurds/skeleton": "7.0.0",
-    "@purpurds/select": "7.0.0",
-    "@purpurds/text-field": "7.0.0",
-    "@purpurds/tooltip": "7.0.0",
-    "@purpurds/tokens": "7.0.0",
-    "@purpurds/visually-hidden": "7.0.0",
-    "@purpurds/toggle": "7.0.0"
+    "@purpurds/checkbox": "7.2.0",
+    "@purpurds/badge": "7.2.0",
+    "@purpurds/drawer": "7.2.0",
+    "@purpurds/icon": "7.2.0",
+    "@purpurds/link": "7.2.0",
+    "@purpurds/cta-link": "7.2.0",
+    "@purpurds/button": "7.2.0",
+    "@purpurds/paragraph": "7.2.0",
+    "@purpurds/skeleton": "7.2.0",
+    "@purpurds/select": "7.2.0",
+    "@purpurds/tokens": "7.2.0",
+    "@purpurds/tooltip": "7.2.0",
+    "@purpurds/visually-hidden": "7.2.0",
+    "@purpurds/heading": "7.2.0",
+    "@purpurds/text-field": "7.2.0",
+    "@purpurds/toggle": "7.2.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
@@ -57,13 +57,13 @@
     "vitest": "^3.1.2",
     "vitest-axe": "~0.1.0",
     "vitest-canvas-mock": "~0.3.3",
-    "@purpurds/autocomplete": "7.0.0",
+    "@purpurds/autocomplete": "7.2.0",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/grid": "7.0.0",
-    "@purpurds/illustrative-icon": "7.0.0",
-    "@purpurds/listbox": "7.0.0",
-    "@purpurds/pagination": "7.0.0",
-    "@purpurds/label": "7.0.0"
+    "@purpurds/grid": "7.2.0",
+    "@purpurds/illustrative-icon": "7.2.0",
+    "@purpurds/listbox": "7.2.0",
+    "@purpurds/label": "7.2.0",
+    "@purpurds/pagination": "7.2.0"
   },
   "scripts": {
     "build:dev": "vite",

package/src/cell-types/body-text-cell.test.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { Cell } from "@tanstack/react-table";
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+
+import { BodyTextCell } from "./body-text-cell";
+
+// Mock the useTruncatedTooltip hook
+vi.mock("../use-truncated-hook", () => ({
+  default: vi.fn(() => ({
+    showPopover: false,
+    containerRef: { current: null },
+    onMouseEnter: vi.fn(),
+    onMouseLeave: vi.fn(),
+  })),
+}));
+
+const createMockCell = (value: unknown) =>
+  ({
+    getValue: vi.fn().mockReturnValue(value),
+    getContext: vi.fn(),
+    id: "test-id",
+    renderValue: vi.fn(),
+    row: { original: {} },
+    column: {
+      getSize: vi.fn().mockReturnValue(100),
+    },
+  } as unknown as Cell<unknown, unknown>);
+
+describe("BodyTextCell", () => {
+  it("renders text value correctly", () => {
+    const cell = createMockCell("Test Value");
+    render(<BodyTextCell cell={cell} />);
+
+    expect(screen.getByText("Test Value")).toBeInTheDocument();
+  });
+
+  it("renders number 0 correctly", () => {
+    const cell = createMockCell(0);
+    render(<BodyTextCell cell={cell} />);
+
+    expect(screen.getByText(0)).toBeInTheDocument();
+  });
+
+  it("renders EmptyCell when value is null", () => {
+    const cell = createMockCell(null);
+    const { container } = render(<BodyTextCell cell={cell} />);
+
+    expect(container.querySelector("p")).toHaveTextContent("-");
+  });
+
+  it("renders EmptyCell when value is undefined", () => {
+    const cell = createMockCell(undefined);
+    const { container } = render(<BodyTextCell cell={cell} />);
+
+    expect(container.querySelector("p")).toHaveTextContent("-");
+  });
+
+  it("renders EmptyCell when value is an empty string", () => {
+    const cell = createMockCell("");
+    const { container } = render(<BodyTextCell cell={cell} />);
+
+    expect(container.querySelector("p")).toHaveTextContent("-");
+  });
+});

package/src/cell-types/body-text-cell.tsx

@@ -18,7 +18,7 @@ export const BodyTextCell = <TData extends RowData>({ cell }: BodyTextCellProps<
   const value = cell.getValue<string>();
   const { showPopover, containerRef, onMouseEnter, onMouseLeave } = useTruncatedTooltip();
 
-  if (!value) {
+  if (value === null || value === undefined || value === "") {
     return <EmptyCell />;
   }
 

package/src/cell-types/lead-text-cell.test.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { Cell } from "@tanstack/react-table";
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+
+import { LeadTextCell } from "./lead-text-cell";
+
+// Mock the useTruncatedTooltip hook
+vi.mock("../use-truncated-hook", () => ({
+  default: vi.fn(() => ({
+    showPopover: false,
+    containerRef: { current: null },
+    onMouseEnter: vi.fn(),
+    onMouseLeave: vi.fn(),
+  })),
+}));
+
+const createMockCell = (value: unknown) =>
+  ({
+    getValue: vi.fn().mockReturnValue(value),
+    getContext: vi.fn(),
+    id: "test-id",
+    renderValue: vi.fn(),
+    row: { original: {} },
+    column: {
+      getSize: vi.fn().mockReturnValue(100),
+    },
+  } as unknown as Cell<unknown, unknown>);
+
+describe("LeadTextCell", () => {
+  it("renders text value correctly", () => {
+    const cell = createMockCell("Test Value");
+    render(<LeadTextCell cell={cell} />);
+
+    expect(screen.getByText("Test Value")).toBeInTheDocument();
+  });
+
+  it("renders number 0 correctly", () => {
+    const cell = createMockCell(0);
+    render(<LeadTextCell cell={cell} />);
+
+    expect(screen.getByText(0)).toBeInTheDocument();
+  });
+
+  it("renders EmptyCell when value is null", () => {
+    const cell = createMockCell(null);
+    const { container } = render(<LeadTextCell cell={cell} />);
+
+    expect(container.querySelector("p")).toHaveTextContent("-");
+  });
+
+  it("renders EmptyCell when value is undefined", () => {
+    const cell = createMockCell(undefined);
+    const { container } = render(<LeadTextCell cell={cell} />);
+
+    expect(container.querySelector("p")).toHaveTextContent("-");
+  });
+
+  it("renders EmptyCell when value is an empty string", () => {
+    const cell = createMockCell("");
+    const { container } = render(<LeadTextCell cell={cell} />);
+
+    expect(container.querySelector("p")).toHaveTextContent("-");
+  });
+});

package/src/cell-types/lead-text-cell.tsx

@@ -11,7 +11,7 @@ export type LeadTextCellProps<TData> = {
 export const LeadTextCell = <TData extends RowData>({ cell }: LeadTextCellProps<TData>) => {
   const value = cell.getValue<string>();
 
-  if (!value) {
+  if (value === null || value === undefined || value === "") {
     return <EmptyCell />;
   }
 

package/src/table-export-drawer.test.tsx

@@ -46,7 +46,7 @@ describe("Data table - Export drawer", () => {
     const closeButton = within(screen.getByTestId(Selectors.EXPORT_DRAWER.HEADER_ROW)).getByRole(
       "button"
     );
-    expect(closeButton).toHaveAttribute("aria-label", "Close drawer");
+    expect(closeButton).toBeInTheDocument();
   });
 
   it("should send an 'onClose' event when closeButton clicked", async () => {

package/src/table-settings-drawer.test.tsx

@@ -87,10 +87,6 @@ describe("Data Table - Settings drawer", () => {
       ).toHaveTextContent("Reset settings");
     });
 
-    it("should have a close drawer button", () => {
-      expect(closeButton).toHaveAttribute("aria-label", "Close drawer");
-    });
-
     it("should be possible to close the drawer", async () => {
       await userEvent.click(closeButton);
       expect(screen.queryByTestId(Selectors.SETTINGS_DRAWER.CONTENT)).toBeNull();

package/src/table.module.scss

@@ -7,7 +7,6 @@
   overflow: hidden;
   flex-direction: column;
   gap: var(--purpur-spacing-200);
-  z-index: 1;
   background-color: inherit;
 }
 
@@ -156,23 +155,32 @@
 
   &:has(.purpur-table-row-cell__row-selection),
   &:has(.purpur-table-row-cell__row-toggle) {
-    .purpur-table-row-cell:hover {
-      &:first-of-type {
-        &::before {
-          content: "";
-          position: absolute;
-          left: calc(-1 * var(--purpur-border-width-xs));
-          top: 0;
-          bottom: 0;
-          width: var(--purpur-border-width-md);
-          background-color: var(--purpur-color-border-weak);
-        }
+    .purpur-table-row-cell:first-of-type {
+      transform: translateZ(0);
+
+      &::after {
+        content: "";
+        position: absolute;
+        left: calc(-1 * var(--purpur-border-width-xs));
+        top: 0;
+        bottom: 0;
+        width: var(--purpur-border-width-md);
+        opacity: 0;
+        transition: opacity var(--purpur-motion-duration-150) ease;
+        background-color: var(--purpur-color-border-weak);
+        pointer-events: none;
+      }
+
+      &:hover::after {
+        opacity: 1;
       }
     }
   }
 
-  &--selected td:first-of-type {
-    &::before {
+  &.purpur-table-row--selected .purpur-table-row-cell:first-of-type {
+    transform: translateZ(0);
+
+    &::after {
       content: "";
       position: absolute;
       left: calc(-1 * var(--purpur-border-width-xs));
@@ -180,6 +188,8 @@
       bottom: 0;
       width: var(--purpur-border-width-md);
       background-color: var(--purpur-color-border-interactive-primary);
+      opacity: 1;
+      pointer-events: none;
     }
   }
 }

package/src/table.stories.tsx

@@ -156,6 +156,14 @@ const meta = {
       control: "boolean",
       description: "Full width of the table",
     },
+    stickyFirstColumn: {
+      control: "boolean",
+      description: "Sticky first column",
+    },
+    stickyHeaders: {
+      control: "boolean",
+      description: "Sticky headers",
+    },
   },
 } satisfies Meta<typeof Table<TableData>>;
 
@@ -280,6 +288,8 @@ export const Showcase: StoryTableData = {
     columns: columnDef,
     loading: true,
     fullWidth: true,
+    stickyFirstColumn: true,
+    stickyHeaders: true,
   },
   parameters: {
     docs: {
@@ -392,6 +402,8 @@ manages filtering, sorting and pagination internally.
         onSecondaryButtonClick={() => console.log("Secondary button clicked")}
         rowSelectionAriaLabels={args.rowSelectionAriaLabels}
         fullWidth={args.fullWidth}
+        stickyFirstColumn={args.stickyFirstColumn}
+        stickyHeaders={args.stickyHeaders}
       />
     );
   },

package/src/table.test.tsx

@@ -282,7 +282,14 @@ describe("Data Table", () => {
 
     describe("When loading is false", () => {
       beforeEach(() => {
-        rerender(<Table columns={createColumnDefSmall()} data={tableDataSmall} loading={false} />);
+        rerender(
+          <Table
+            columns={createColumnDefSmall()}
+            data={tableDataSmall}
+            loading={false}
+            skeletonRows={5}
+          />
+        );
       });
 
       it("should show table data", () => {
@@ -304,6 +311,92 @@ describe("Data Table", () => {
     });
   });
 
+  describe("Sticky Table Features", () => {
+    describe("Default values", () => {
+      beforeEach(() => {
+        render(<Table columns={createColumnDefSmall()} data={tableDataSmall} />);
+
+        table = screen.getByRole("table");
+      });
+
+      it("should have sticky header by default", () => {
+        const tableHeader = getTableHead(table);
+        const headerCells = within(tableHeader).getAllByRole("columnheader");
+
+        headerCells.forEach((cell) => {
+          expect(cell.className).toContain("purpur-table-column-header-cell__sticky-header");
+        });
+      });
+
+      it("should have sticky first column by default", () => {
+        const tableBody = getTableBody(table);
+        const rows = within(tableBody).getAllByRole("row");
+
+        rows.forEach((row) => {
+          const firstCell = within(row).getAllByRole("cell")[0];
+          expect(firstCell.className).toContain("purpur-table-row-cell__sticky-column");
+        });
+      });
+    });
+
+    it("should disable sticky headers when stickyHeaders is false", () => {
+      render(
+        <Table
+          columns={createColumnDefSmall()}
+          data={tableDataSmall}
+          enableToolbar={true}
+          stickyHeaders={false}
+          settingsDrawerCopy={copy.settingsDrawer}
+          toolbarCopy={{
+            buttons: {
+              settings: copy.toolbar.buttons.settings,
+            },
+            ariaLabels: {
+              settings: copy.toolbar.ariaLabels.settings,
+            },
+          }}
+        />
+      );
+
+      table = screen.getByRole("table");
+      const tableHeader = getTableHead(table);
+      const headerCells = within(tableHeader).getAllByRole("columnheader");
+
+      headerCells.forEach((cell) => {
+        expect(cell.className).not.toContain("purpur-table-column-header-cell__sticky-header");
+      });
+    });
+
+    it("should disable sticky first column when stickyFirstColumn is false", () => {
+      render(
+        <Table
+          columns={createColumnDefSmall()}
+          data={tableDataSmall}
+          enableToolbar={true}
+          stickyFirstColumn={false}
+          settingsDrawerCopy={copy.settingsDrawer}
+          toolbarCopy={{
+            buttons: {
+              settings: copy.toolbar.buttons.settings,
+            },
+            ariaLabels: {
+              settings: copy.toolbar.ariaLabels.settings,
+            },
+          }}
+        />
+      );
+
+      table = screen.getByRole("table");
+      const tableBody = getTableBody(table);
+      const rows = within(tableBody).getAllByRole("row");
+
+      rows.forEach((row) => {
+        const firstCell = within(row).getAllByRole("cell")[0];
+        expect(firstCell).not.toHaveClass("purpur-table__row-cell--sticky");
+      });
+    });
+  });
+
   describe("Accessibility", () => {
     it("is accessible", async () => {
       const { container } = render(

package/src/table.tsx

@@ -71,6 +71,8 @@ export type TableProps<TData extends RowData> = {
   data: TData[];
   paginationComponent?: ReactElement<PaginationProps>;
   fullWidth?: boolean;
+  stickyHeaders?: boolean;
+  stickyFirstColumn?: boolean;
   onRowsCountChange?: (rowsCount: number) => void;
 } & (WithToolbarProps | WithoutToolbarProps) &
   (WithSortingProps | WithoutSortingProps) &
@@ -104,6 +106,8 @@ export const Table = <TData extends RowData>({
   skeletonRows,
   sortingAriaLabels,
   state,
+  stickyFirstColumn: stickyFirstColumnProp = true,
+  stickyHeaders: stickyHeadersProp = true,
   toolbarCopy,
   toolbarTotalRowCount,
   variant = "primary",
@@ -123,8 +127,8 @@ export const Table = <TData extends RowData>({
   const [showColumnFiltersEnabled, setShowColumnFiltersEnabled] = useState(
     Boolean(props.enableFilters)
   );
-  const [stickyFirstColumn, setStickyFirstColumn] = useState(true);
-  const [stickyHeaders, setStickyHeaders] = useState(true);
+  const [stickyFirstColumn, setStickyFirstColumn] = useState(stickyFirstColumnProp);
+  const [stickyHeaders, setStickyHeaders] = useState(stickyHeadersProp);
   const prevShowOnlySelectedRows = useRef(showOnlySelectedRows);
   const [isScrolled, setIsScrolled] = useState(false);
   const tableContainerRef = useRef<HTMLTableElement>(null);
@@ -286,7 +290,7 @@ export const Table = <TData extends RowData>({
 
   const showBorder = (index: number) => {
     // Only show the border for sticky columns when the table is scrolled
-    return isScrolled && getStickyColumn(index);
+    return isScrolled && stickyFirstColumn && getStickyColumn(index);
   };
 
   const tableRows = tanstackTable.getRowModel().rows;