@purpurds/table 8.6.0 → 8.7.0

package/package.json

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

package/src/cell-types/date-cell.tsx

@@ -18,7 +18,7 @@ export const DateCell = <TData extends RowData>({ cell }: DateCellProps<TData>)
     return <EmptyCell />;
   }
 
-  const showTime = cell.column.columnDef.meta?.showTime || true;
+  const showTime = cell.column.columnDef.meta?.showTime ?? true;
 
   const dateObj = new Date(dateString);
   const date = dateObj.toLocaleDateString("sv-SE");

package/src/table-content-drag.test.tsx

@@ -2,14 +2,12 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import { axe } from "vitest-axe";
 
-import { EmptyTableContent, LoadingTableContent, NormalTableContent } from "./table-content";
+import { TableContent } from "./table-content";
 
-// Mock tanstack table
 const mockTanstackTable = {
   getVisibleLeafColumns: vi.fn(() => [{ id: "col1" }, { id: "col2" }]),
-} as unknown as Parameters<typeof NormalTableContent>[0]["tanstackTable"];
+} as unknown as Parameters<typeof TableContent>[0]["tanstackTable"];
 
-// Mock row data
 const mockTableRows = [
   {
     id: "row1",
@@ -39,467 +37,82 @@ const mockTableRows = [
       },
     ],
   },
-  {
-    id: "row2",
-    getIsSelected: () => true,
-    getVisibleCells: () => [
-      {
-        id: "cell3",
-        column: {
-          id: "col1",
-          getIsFirstColumn: () => true,
-          getIsLastColumn: () => false,
-          columnDef: { meta: { cellType: "default" } },
-        },
-        getValue: () => "Value 3",
-        getContext: () => ({ getValue: () => "Value 3" }),
-      },
-      {
-        id: "cell4",
-        column: {
-          id: "col2",
-          getIsFirstColumn: () => false,
-          getIsLastColumn: () => true,
-          columnDef: { meta: { cellType: "default" } },
-        },
-        getValue: () => "Value 4",
-        getContext: () => ({ getValue: () => "Value 4" }),
-      },
-    ],
-  },
-] as unknown as Parameters<typeof NormalTableContent>[0]["tableRows"];
-
-const mockRenderTableHeaders = () => (
-  <tr>
-    <th>Header 1</th>
-    <th>Header 2</th>
-  </tr>
+] as unknown as Parameters<typeof TableContent>[0]["tableRows"];
+
+const mockTableHeader = (
+  <thead>
+    <tr>
+      <th>Header 1</th>
+      <th>Header 2</th>
+    </tr>
+  </thead>
 );
 
-describe("Table Content Components with Drag and Drop", () => {
-  describe("NormalTableContent", () => {
-    const defaultProps = {
-      tanstackTable: mockTanstackTable,
-      tableRows: mockTableRows,
-      showColumnFiltersEnabled: false,
-      fullWidth: false,
-      renderTableHeaders: mockRenderTableHeaders,
-      stickyFirstColumn: false,
-      getStickyColumn: () => false,
-      isScrolled: false,
-      showBorder: () => false,
-      enableColumnDrag: false,
-      activeId: null,
-    };
-
-    it("should render table with drag disabled by default", () => {
-      render(<NormalTableContent {...defaultProps} />);
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-      expect(table.className).toContain("purpur-table__table");
-    });
-
-    it("should render table with drag enabled", () => {
-      render(<NormalTableContent {...defaultProps} enableColumnDrag={true} />);
+describe("Table Content with unified component", () => {
+  const defaultProps = {
+    tanstackTable: mockTanstackTable,
+    tableRows: mockTableRows,
+    fullWidth: false,
+    tableHeader: mockTableHeader,
+    stickyFirstColumn: false,
+    getStickyColumn: () => false,
+    isScrolled: false,
+    showBorder: () => false,
+    enableColumnDrag: false,
+    activeId: null,
+  };
 
+  describe("NormalTableContent", () => {
+    it("should render table", () => {
+      render(<TableContent {...defaultProps} />);
       const table = screen.getByRole("table");
       expect(table).toBeInTheDocument();
     });
 
     it("should apply full width class when fullWidth is true", () => {
-      render(<NormalTableContent {...defaultProps} fullWidth={true} />);
-
+      render(<TableContent {...defaultProps} fullWidth={true} />);
       const table = screen.getByRole("table");
       expect(table.className).toContain("purpur-table__table--full-width");
     });
 
-    it("should render correct number of rows", () => {
-      render(<NormalTableContent {...defaultProps} />);
-
-      const rows = screen.getAllByRole("row");
-      // Should have header row + data rows
-      expect(rows.length).toBeGreaterThan(mockTableRows.length);
-    });
-
-    it("should pass enableColumnDrag prop to table cells", () => {
-      render(<NormalTableContent {...defaultProps} enableColumnDrag={true} />);
-
-      // All cells should receive the enableColumnDrag prop
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-    });
-
-    it("should pass draggingActive prop to cells when activeId matches", () => {
-      render(<NormalTableContent {...defaultProps} enableColumnDrag={true} activeId="col1" />);
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-    });
-
-    it("should handle sticky columns with drag enabled", () => {
-      render(
-        <NormalTableContent
-          {...defaultProps}
-          stickyFirstColumn={true}
-          getStickyColumn={(index) => index === 0}
-          enableColumnDrag={true}
-        />
-      );
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-    });
-
-    it("should handle scrolled state with drag enabled", () => {
-      render(<NormalTableContent {...defaultProps} isScrolled={true} enableColumnDrag={true} />);
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-    });
-
-    it("should handle border showing with drag enabled", () => {
-      render(
-        <NormalTableContent
-          {...defaultProps}
-          showBorder={(index) => index === 0}
-          enableColumnDrag={true}
-        />
-      );
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-    });
-
-    it("should be accessible with drag enabled", async () => {
-      const { container } = render(
-        <NormalTableContent {...defaultProps} enableColumnDrag={true} />
-      );
-
+    it("should be accessible", async () => {
+      const { container } = render(<TableContent {...defaultProps} />);
       const results = await axe(container);
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       expect(results).toHaveNoViolations();
     });
-
-    it("should handle empty table rows", () => {
-      render(<NormalTableContent {...defaultProps} tableRows={[]} enableColumnDrag={true} />);
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-    });
-
-    it("should handle selected rows with drag enabled", () => {
-      const selectedRows = mockTableRows.map(
-        (row: Parameters<typeof NormalTableContent>[0]["tableRows"][0]) => ({
-          ...row,
-          getIsSelected: () => true,
-        })
-      );
-
-      render(
-        <NormalTableContent {...defaultProps} tableRows={selectedRows} enableColumnDrag={true} />
-      );
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-    });
   });
 
-  describe("LoadingTableContent", () => {
-    const defaultProps = {
-      tanstackTable: mockTanstackTable,
-      tableRows: [],
-      showColumnFiltersEnabled: false,
-      fullWidth: false,
-      renderTableHeaders: mockRenderTableHeaders,
-      skeletonRows: 5,
-      getStickyColumn: () => false,
-      stickyFirstColumn: false,
-      isScrolled: false,
-      showBorder: () => false,
-      getColumnWidths: () => ["100px", "150px"],
-    };
-
-    it("should render loading table with drag context support", () => {
-      render(<LoadingTableContent {...defaultProps} />);
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-      expect(table.className).toContain("purpur-table__table");
-    });
-
-    it("should apply full width class when fullWidth is true", () => {
-      render(<LoadingTableContent {...defaultProps} fullWidth={true} />);
-
-      const table = screen.getByRole("table");
-      expect(table.className).toContain("purpur-table__table--full-width");
-    });
-
-    it("should render with column filters enabled", () => {
-      render(<LoadingTableContent {...defaultProps} showColumnFiltersEnabled={true} />);
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-    });
-
-    it("should handle sticky columns in loading state", () => {
+  describe("Loading state", () => {
+    it("should render loading state", () => {
       render(
-        <LoadingTableContent
+        <TableContent
           {...defaultProps}
-          stickyFirstColumn={true}
-          getStickyColumn={(index) => index === 0}
+          loading={true}
+          skeletonRows={5}
+          getColumnWidths={() => []}
         />
       );
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-    });
-
-    it("should handle scrolled state in loading", () => {
-      render(<LoadingTableContent {...defaultProps} isScrolled={true} />);
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-    });
-
-    it("should pass correct skeleton row count", () => {
-      const skeletonRows = 3;
-      render(<LoadingTableContent {...defaultProps} skeletonRows={skeletonRows} />);
-
       const table = screen.getByRole("table");
       expect(table).toBeInTheDocument();
     });
-
-    it("should pass column widths to loading rows", () => {
-      const columnWidths = ["120px", "180px", "200px"];
-      render(<LoadingTableContent {...defaultProps} getColumnWidths={() => columnWidths} />);
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-    });
-
-    it("should be accessible in loading state", async () => {
-      const { container } = render(<LoadingTableContent {...defaultProps} />);
-
-      const results = await axe(container);
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      expect(results).toHaveNoViolations();
-    });
   });
 
-  describe("EmptyTableContent", () => {
-    const defaultProps = {
-      tanstackTable: mockTanstackTable,
-      tableRows: [],
-      showColumnFiltersEnabled: false,
-      fullWidth: false,
-      renderTableHeaders: mockRenderTableHeaders,
-      variant: "primary" as const,
-      emptyTableHeadingTag: "h2" as const,
-      emptyTableCopy: {
-        title: "No data available",
-        description: "There are no items to display in this table.",
-      },
-      emptyTableIcon: <div data-testid="empty-icon">Empty Icon</div>,
-    };
-
-    it("should render empty table with drag context support", () => {
-      render(<EmptyTableContent {...defaultProps} />);
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-      expect(table.className).toContain("purpur-table__table");
-    });
-
-    it("should apply full width class when fullWidth is true", () => {
-      render(<EmptyTableContent {...defaultProps} fullWidth={true} />);
-
-      const table = screen.getByRole("table");
-      expect(table.className).toContain("purpur-table__table--full-width");
-    });
-
-    it("should render with column filters enabled", () => {
-      render(<EmptyTableContent {...defaultProps} showColumnFiltersEnabled={true} />);
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-    });
-
-    it("should display empty table content", () => {
-      render(<EmptyTableContent {...defaultProps} />);
-
-      expect(screen.getByText(defaultProps.emptyTableCopy.title)).toBeInTheDocument();
-      expect(screen.getByText(defaultProps.emptyTableCopy.description)).toBeInTheDocument();
-      expect(screen.getByTestId("empty-icon")).toBeInTheDocument();
-    });
-
-    it("should handle different variants", () => {
-      const variants = ["primary", "secondary"] as const;
-
-      variants.forEach((variant) => {
-        const { unmount } = render(<EmptyTableContent {...defaultProps} variant={variant} />);
-
-        const table = screen.getByRole("table");
-        expect(table).toBeInTheDocument();
-
-        unmount();
-      });
-    });
-
-    it("should handle different heading tags", () => {
-      const headingTags = ["h1", "h2", "h3", "h4", "h5", "h6"] as const;
-
-      headingTags.forEach((tag) => {
-        const { unmount } = render(
-          <EmptyTableContent {...defaultProps} emptyTableHeadingTag={tag} />
-        );
-
-        const table = screen.getByRole("table");
-        expect(table).toBeInTheDocument();
-
-        unmount();
-      });
-    });
-
-    it("should handle missing icon", () => {
-      render(<EmptyTableContent {...defaultProps} emptyTableIcon={undefined} />);
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-      expect(screen.queryByTestId("empty-icon")).not.toBeInTheDocument();
-    });
-
-    it("should calculate correct colSpan from tanstack table", () => {
-      const mockTableWithMoreColumns = {
-        getVisibleLeafColumns: vi.fn(() => [
-          { id: "col1" },
-          { id: "col2" },
-          { id: "col3" },
-          { id: "col4" },
-        ]),
-      } as unknown as Parameters<typeof EmptyTableContent>[0]["tanstackTable"];
-
-      render(<EmptyTableContent {...defaultProps} tanstackTable={mockTableWithMoreColumns} />);
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-    });
-
-    it("should be accessible in empty state", async () => {
-      const { container } = render(<EmptyTableContent {...defaultProps} />);
-
-      const results = await axe(container);
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      expect(results).toHaveNoViolations();
-    });
-
-    it("should handle empty copy strings", () => {
+  describe("Empty state", () => {
+    it("should render empty state", () => {
       render(
-        <EmptyTableContent
+        <TableContent
           {...defaultProps}
-          emptyTableCopy={{
-            title: "",
-            description: "",
-          }}
-        />
-      );
-
-      const table = screen.getByRole("table");
-      expect(table).toBeInTheDocument();
-    });
-  });
-
-  describe("Integration between content types", () => {
-    it("should maintain consistent table structure across all content types", () => {
-      const baseProps = {
-        tanstackTable: mockTanstackTable,
-        showColumnFiltersEnabled: false,
-        fullWidth: true,
-        renderTableHeaders: mockRenderTableHeaders,
-      };
-
-      // Normal content
-      const { container: normalContainer, unmount: unmountNormal } = render(
-        <NormalTableContent
-          {...baseProps}
-          tableRows={mockTableRows}
-          stickyFirstColumn={false}
-          getStickyColumn={() => false}
-          isScrolled={false}
-          showBorder={() => false}
-          enableColumnDrag={false}
-          activeId={null}
-        />
-      );
-
-      const normalTable = normalContainer.querySelector("table");
-      expect(normalTable?.className).toContain("purpur-table__table");
-      expect(normalTable?.className).toContain("purpur-table__table--full-width");
-      unmountNormal();
-
-      // Loading content
-      const { container: loadingContainer, unmount: unmountLoading } = render(
-        <LoadingTableContent
-          {...baseProps}
-          tableRows={[]}
-          skeletonRows={5}
-          getStickyColumn={() => false}
-          stickyFirstColumn={false}
-          isScrolled={false}
-          showBorder={() => false}
-          getColumnWidths={() => []}
-        />
-      );
-
-      const loadingTable = loadingContainer.querySelector("table");
-      expect(loadingTable?.className).toContain("purpur-table__table");
-      expect(loadingTable?.className).toContain("purpur-table__table--full-width");
-      unmountLoading();
-
-      // Empty content
-      const { container: emptyContainer, unmount: unmountEmpty } = render(
-        <EmptyTableContent
-          {...baseProps}
           tableRows={[]}
+          isEmptyTable={true}
           variant="primary"
           emptyTableHeadingTag="h2"
-          emptyTableCopy={{
-            title: "Empty",
-            description: "No data",
-          }}
+          emptyTableCopy={{ title: "Empty", description: "No data" }}
         />
       );
-
-      const emptyTable = emptyContainer.querySelector("table");
-      expect(emptyTable?.className).toContain("purpur-table__table");
-      expect(emptyTable?.className).toContain("purpur-table__table--full-width");
-      unmountEmpty();
-    });
-
-    it("should handle drag and drop props consistently", () => {
-      // Test that drag-related props don't break any content type
-      expect(() => {
-        render(
-          <div>
-            <NormalTableContent
-              tanstackTable={mockTanstackTable}
-              tableRows={mockTableRows}
-              showColumnFiltersEnabled={false}
-              fullWidth={false}
-              renderTableHeaders={mockRenderTableHeaders}
-              stickyFirstColumn={false}
-              getStickyColumn={() => false}
-              isScrolled={false}
-              showBorder={() => false}
-              enableColumnDrag={true}
-              activeId="col1"
-            />
-          </div>
-        );
-      }).not.toThrow();
+      const table = screen.getByRole("table");
+      expect(table).toBeInTheDocument();
     });
   });
 });