@purpurds/table 7.0.0 → 7.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/table",
-  "version": "7.0.0",
+  "version": "7.1.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/badge": "7.1.0",
+    "@purpurds/button": "7.1.0",
+    "@purpurds/checkbox": "7.1.0",
+    "@purpurds/cta-link": "7.1.0",
+    "@purpurds/drawer": "7.1.0",
+    "@purpurds/heading": "7.1.0",
+    "@purpurds/icon": "7.1.0",
+    "@purpurds/link": "7.1.0",
+    "@purpurds/paragraph": "7.1.0",
+    "@purpurds/select": "7.1.0",
+    "@purpurds/skeleton": "7.1.0",
+    "@purpurds/text-field": "7.1.0",
+    "@purpurds/toggle": "7.1.0",
+    "@purpurds/tokens": "7.1.0",
+    "@purpurds/tooltip": "7.1.0",
+    "@purpurds/visually-hidden": "7.1.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.1.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.1.0",
+    "@purpurds/illustrative-icon": "7.1.0",
+    "@purpurds/listbox": "7.1.0",
+    "@purpurds/pagination": "7.1.0",
+    "@purpurds/label": "7.1.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.tsx

@@ -286,7 +286,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;