@purpurds/table 8.3.0 → 8.4.0

package/src/draggable-table.test.tsx

@@ -0,0 +1,381 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import { axe } from "vitest-axe";
+
+import { DraggableTable } from "./draggable-table";
+
+const mockColumnDragAriaLabels = {
+  grab: "Drag to reorder column",
+  grabbing: "Dragging column",
+};
+
+const mockHandleDragEnd = vi.fn();
+const mockSetActiveId = vi.fn();
+
+// Mock tanstack table - using minimal interface for testing
+const mockTanstackTable = {
+  getHeaderGroups: vi.fn(() => [
+    {
+      id: "header-group-1",
+      headers: [
+        {
+          id: "id",
+          column: { id: "id" },
+          getContext: () => ({ column: { id: "id" } }),
+        },
+        {
+          id: "name",
+          column: { id: "name" },
+          getContext: () => ({ column: { id: "name" } }),
+        },
+      ],
+    },
+  ]),
+} as unknown as Parameters<typeof DraggableTable>[0]["tanstackTable"];
+
+describe("DraggableTable Component", () => {
+  const defaultProps = {
+    activeId: null,
+    setActiveId: mockSetActiveId,
+    handleDragEnd: mockHandleDragEnd,
+    tableRows: [],
+    tanstackTable: mockTanstackTable,
+    variant: "primary",
+    fullWidth: false,
+    showColumnFiltersEnabled: false,
+    columnDragAriaLabelsCopy: mockColumnDragAriaLabels,
+    rootClassName: "purpur-table",
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("Rendering", () => {
+    it("should render DndContext wrapper", () => {
+      render(
+        <DraggableTable {...defaultProps}>
+          <div data-testid="table-content">Table Content</div>
+        </DraggableTable>
+      );
+
+      // Check for presence of DnD context
+      expect(screen.getByTestId("table-content")).toBeInTheDocument();
+    });
+
+    it("should render children components", () => {
+      render(
+        <DraggableTable {...defaultProps}>
+          <div data-testid="child-component">Child Component</div>
+        </DraggableTable>
+      );
+
+      expect(screen.getByTestId("child-component")).toBeInTheDocument();
+    });
+
+    it("should be accessible", async () => {
+      const { container } = render(
+        <DraggableTable {...defaultProps}>
+          <table>
+            <thead>
+              <tr>
+                <th>Header</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Cell</td>
+              </tr>
+            </tbody>
+          </table>
+        </DraggableTable>
+      );
+
+      const results = await axe(container);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      expect(results).toHaveNoViolations();
+    });
+  });
+
+  describe("Drag Overlay", () => {
+    it("should not show drag overlay when activeId is null", () => {
+      render(
+        <DraggableTable {...defaultProps} activeId={null}>
+          <div>Table Content</div>
+        </DraggableTable>
+      );
+
+      // Drag overlay should not be visible
+      const overlay = screen.queryByText(/drag-overlay/);
+      expect(overlay).not.toBeInTheDocument();
+    });
+
+    it("should not show drag overlay for row-selection activeId", () => {
+      render(
+        <DraggableTable {...defaultProps} activeId="row-selection">
+          <div>Table Content</div>
+        </DraggableTable>
+      );
+
+      // Drag overlay should not be visible for special row selection
+      const overlay = screen.queryByText(/drag-overlay/);
+      expect(overlay).not.toBeInTheDocument();
+    });
+
+    it("should not show drag overlay for row-toggle activeId", () => {
+      render(
+        <DraggableTable {...defaultProps} activeId="row-toggle">
+          <div>Table Content</div>
+        </DraggableTable>
+      );
+
+      // Drag overlay should not be visible for special row toggle
+      const overlay = screen.queryByText(/drag-overlay/);
+      expect(overlay).not.toBeInTheDocument();
+    });
+
+    it("should show drag overlay with proper structure when activeId is set", async () => {
+      const { container } = render(
+        <DraggableTable {...defaultProps} activeId="id">
+          <div>Table Content</div>
+        </DraggableTable>
+      );
+
+      // In test environment, @dnd-kit DragOverlay doesn't render the same way
+      // But we can verify the DndContext creates its accessibility structures
+      await waitFor(() => {
+        const dndDescribedBy = container.querySelector('[id^="DndDescribedBy"]');
+        const dndLiveRegion = container.querySelector('[id^="DndLiveRegion"]');
+        expect(dndDescribedBy).toBeInTheDocument();
+        expect(dndLiveRegion).toBeInTheDocument();
+      });
+    });
+
+    it("should apply correct CSS classes to drag overlay", async () => {
+      const activeId = "name";
+      const variant = "secondary";
+      const { container } = render(
+        <DraggableTable {...defaultProps} activeId={activeId} variant={variant}>
+          <div>Table Content</div>
+        </DraggableTable>
+      );
+
+      // In test environment, verify DndContext renders with accessibility features
+      await waitFor(() => {
+        const dndDescribedBy = container.querySelector('[id^="DndDescribedBy"]');
+        const dndLiveRegion = container.querySelector('[id^="DndLiveRegion"]');
+        expect(dndDescribedBy).toBeInTheDocument();
+        expect(dndLiveRegion).toBeInTheDocument();
+      });
+    });
+
+    it("should render table structure in drag overlay", async () => {
+      const activeId = "name";
+      const { container } = render(
+        <DraggableTable {...defaultProps} activeId={activeId} fullWidth={true}>
+          <div>Table Content</div>
+        </DraggableTable>
+      );
+
+      // In test environment, verify DndContext renders with accessibility features
+      await waitFor(() => {
+        const dndDescribedBy = container.querySelector('[id^="DndDescribedBy"]');
+        const dndLiveRegion = container.querySelector('[id^="DndLiveRegion"]');
+        expect(dndDescribedBy).toBeInTheDocument();
+        expect(dndLiveRegion).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("DnD Context Configuration", () => {
+    it("should configure sensors properly", () => {
+      // This is more of an integration test to ensure the component renders without errors
+      expect(() => {
+        render(
+          <DraggableTable {...defaultProps}>
+            <div>Table Content</div>
+          </DraggableTable>
+        );
+      }).not.toThrow();
+    });
+
+    it("should handle drag start event", () => {
+      render(
+        <DraggableTable {...defaultProps}>
+          <div>Table Content</div>
+        </DraggableTable>
+      );
+
+      // Since we can't easily trigger DnD events in tests, we verify the setup doesn't throw
+      expect(mockSetActiveId).not.toHaveBeenCalled();
+    });
+
+    it("should handle drag end event", () => {
+      render(
+        <DraggableTable {...defaultProps}>
+          <div>Table Content</div>
+        </DraggableTable>
+      );
+
+      expect(mockHandleDragEnd).not.toHaveBeenCalled();
+    });
+
+    it("should handle drag cancel event", () => {
+      render(
+        <DraggableTable {...defaultProps}>
+          <div>Table Content</div>
+        </DraggableTable>
+      );
+
+      // Drag cancel should reset activeId to null
+      expect(mockSetActiveId).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Props Handling", () => {
+    it("should handle different variants", async () => {
+      const variants = ["primary", "secondary"];
+
+      for (const variant of variants) {
+        const { container, unmount } = render(
+          <DraggableTable {...defaultProps} variant={variant} activeId="id">
+            <div>Table Content</div>
+          </DraggableTable>
+        );
+
+        await waitFor(() => {
+          const dndDescribedBy = container.querySelector('[id^="DndDescribedBy"]');
+          const dndLiveRegion = container.querySelector('[id^="DndLiveRegion"]');
+          expect(dndDescribedBy).toBeInTheDocument();
+          expect(dndLiveRegion).toBeInTheDocument();
+        });
+
+        unmount();
+      }
+    });
+
+    it("should handle fullWidth prop", async () => {
+      const { container } = render(
+        <DraggableTable {...defaultProps} fullWidth={true} activeId="id">
+          <div>Table Content</div>
+        </DraggableTable>
+      );
+
+      await waitFor(() => {
+        const dndDescribedBy = container.querySelector('[id^="DndDescribedBy"]');
+        const dndLiveRegion = container.querySelector('[id^="DndLiveRegion"]');
+        expect(dndDescribedBy).toBeInTheDocument();
+        expect(dndLiveRegion).toBeInTheDocument();
+      });
+    });
+
+    it("should handle showColumnFiltersEnabled prop", () => {
+      // This affects the table structure in the overlay
+      expect(() => {
+        render(
+          <DraggableTable {...defaultProps} showColumnFiltersEnabled={true} activeId="id">
+            <div>Table Content</div>
+          </DraggableTable>
+        );
+      }).not.toThrow();
+    });
+
+    it("should handle different rootClassName", async () => {
+      const customRootClassName = "custom-table";
+      const { container } = render(
+        <DraggableTable {...defaultProps} rootClassName={customRootClassName} activeId="id">
+          <div>Table Content</div>
+        </DraggableTable>
+      );
+
+      await waitFor(() => {
+        const dndDescribedBy = container.querySelector('[id^="DndDescribedBy"]');
+        const dndLiveRegion = container.querySelector('[id^="DndLiveRegion"]');
+        expect(dndDescribedBy).toBeInTheDocument();
+        expect(dndLiveRegion).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Table Rows Handling", () => {
+    it("should handle empty table rows", () => {
+      expect(() => {
+        render(
+          <DraggableTable {...defaultProps} tableRows={[]} activeId="test">
+            <div>Table Content</div>
+          </DraggableTable>
+        );
+      }).not.toThrow();
+    });
+
+    it("should handle table rows with data", () => {
+      const mockRows = [
+        {
+          id: "row1",
+          getVisibleCells: () => [
+            {
+              id: "cell1",
+              column: { id: "name" },
+            },
+          ],
+        },
+      ] as unknown as Parameters<typeof DraggableTable>[0]["tableRows"];
+
+      expect(() => {
+        render(
+          <DraggableTable {...defaultProps} tableRows={mockRows} activeId="name">
+            <div>Table Content</div>
+          </DraggableTable>
+        );
+      }).not.toThrow();
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("should maintain accessibility when dragging", async () => {
+      const { container } = render(
+        <DraggableTable {...defaultProps} activeId="test">
+          <table role="table">
+            <thead>
+              <tr>
+                <th>Header</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Cell</td>
+              </tr>
+            </tbody>
+          </table>
+        </DraggableTable>
+      );
+
+      const results = await axe(container);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      expect(results).toHaveNoViolations();
+    });
+
+    it("should preserve aria labels in overlay", async () => {
+      const { container } = render(
+        <DraggableTable {...defaultProps} activeId="id">
+          <div>Table Content</div>
+        </DraggableTable>
+      );
+
+      // Verify DndContext creates accessibility features
+      await waitFor(() => {
+        const dndDescribedBy = container.querySelector('[id^="DndDescribedBy"]');
+        const dndLiveRegion = container.querySelector('[id^="DndLiveRegion"]');
+        expect(dndDescribedBy).toBeInTheDocument();
+        expect(dndLiveRegion).toBeInTheDocument();
+
+        // Verify the live region has correct accessibility attributes
+        expect(dndLiveRegion).toHaveAttribute("role", "status");
+        expect(dndLiveRegion).toHaveAttribute("aria-live", "assertive");
+        expect(dndLiveRegion).toHaveAttribute("aria-atomic", "true");
+      });
+    });
+  });
+});

package/src/draggable-table.tsx

@@ -0,0 +1,191 @@
+import React from "react";
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  DragOverlay,
+  type DragStartEvent,
+  KeyboardSensor,
+  MeasuringStrategy,
+  PointerSensor,
+  TouchSensor,
+  type UniqueIdentifier,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
+import {
+  purpurMotionDuration150,
+  purpurMotionEasingEaseInOut,
+} from "@purpurds/tokens/motion/variables";
+import { type Row, type RowData, type Table } from "@tanstack/react-table";
+import c from "classnames/bind";
+
+import styles from "./table.module.scss";
+import { TableBody } from "./table-body";
+import { TableColumnHeaderCell } from "./table-column-header-cell";
+import { TableHeader } from "./table-header";
+import { TableRow } from "./table-row";
+import { TableRowCell } from "./table-row-cell";
+import { enhancedColumnKeyboardCoordinates } from "./utils/custom-keyboard-coordinates";
+
+const cx = c.bind(styles);
+
+export interface ColumnDragAriaLabelsCopy {
+  grab: string;
+  grabbing: string;
+}
+
+export interface DraggableTableProps<TData extends RowData = RowData> {
+  children: React.ReactNode;
+  activeId: UniqueIdentifier | null;
+  setActiveId: React.Dispatch<React.SetStateAction<UniqueIdentifier | null>>;
+  handleDragEnd: (event: DragEndEvent) => void;
+  tableRows: Row<TData>[];
+  tanstackTable: Table<TData>;
+  variant: string;
+  fullWidth: boolean;
+  showColumnFiltersEnabled: boolean;
+  columnDragAriaLabelsCopy: ColumnDragAriaLabelsCopy;
+  rootClassName: string;
+}
+
+export const DraggableTable = <TData extends RowData = RowData>({
+  children,
+  activeId,
+  setActiveId,
+  handleDragEnd,
+  tableRows,
+  tanstackTable,
+  variant,
+  fullWidth,
+  showColumnFiltersEnabled,
+  columnDragAriaLabelsCopy,
+  rootClassName,
+}: DraggableTableProps<TData>): React.ReactElement => {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: enhancedColumnKeyboardCoordinates,
+    }),
+    useSensor(TouchSensor, {})
+  );
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    setActiveId(active.id);
+  };
+
+  const handleDragCancel = () => {
+    setActiveId(null);
+  };
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onDragCancel={handleDragCancel}
+      modifiers={[restrictToHorizontalAxis]}
+      measuring={{
+        droppable: {
+          strategy: MeasuringStrategy.Always,
+        },
+      }}
+    >
+      {children}
+
+      <DragOverlay
+        dropAnimation={{
+          duration: Number(purpurMotionDuration150),
+          easing: purpurMotionEasingEaseInOut,
+        }}
+        adjustScale={false}
+      >
+        {activeId && activeId !== "row-selection" && activeId !== "row-toggle" ? (
+          <div
+            className={cx([`purpur-table__drag-overlay`, `purpur-table__drag-overlay--${variant}`])}
+            aria-hidden="true"
+          >
+            <table
+              className={cx([
+                `${rootClassName}__table`,
+                { [`${rootClassName}__table--full-width`]: fullWidth },
+              ])}
+              role="presentation"
+              aria-hidden="true"
+            >
+              <TableHeader columnFiltersEnabled={showColumnFiltersEnabled}>
+                {tanstackTable.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers
+                      .filter((h) => h.id === activeId)
+                      .map((header) => (
+                        <TableColumnHeaderCell
+                          key={header.id}
+                          header={header}
+                          tanstackTable={tanstackTable}
+                          tableHasFilters={showColumnFiltersEnabled}
+                          stickyColumn={false}
+                          stickyHeaders={false}
+                          isScrolled={false}
+                          showBorder={false}
+                          enableSorting={false}
+                          overlayActive={true}
+                          enableColumnDrag={true}
+                          columnDragAriaLabel={columnDragAriaLabelsCopy.grab}
+                        />
+                      ))}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {tableRows.map((row) => (
+                  <TableRow key={row.id} isSelected={false}>
+                    {row
+                      .getVisibleCells()
+                      .filter((cell) => cell.column.id === activeId)
+                      .map((cell) => (
+                        <TableRowCell
+                          key={cell.id}
+                          cell={cell}
+                          isLastRow={row.id === tableRows[tableRows.length - 1].id}
+                          isFirstCell={true}
+                          isLastCell={true}
+                          stickyColumn={false}
+                          isScrolled={false}
+                          showBorder={false}
+                          enableColumnDrag={true}
+                        />
+                      ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </table>
+            {/* Live region for drag status updates (outside aria-hidden scope) */}
+            <span
+              aria-live="polite"
+              style={{
+                position: "absolute",
+                width: 1,
+                height: 1,
+                margin: -1,
+                padding: 0,
+                border: 0,
+                clip: "rect(0 0 0 0)",
+                overflow: "hidden",
+              }}
+            >
+              {activeId ? columnDragAriaLabelsCopy.grabbing : ""}
+            </span>
+          </div>
+        ) : null}
+      </DragOverlay>
+    </DndContext>
+  );
+};

package/src/empty-table.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Heading, type HeadingTagType } from "@purpurds/heading";
+import { Paragraph } from "@purpurds/paragraph";
+import c from "classnames/bind";
+
+import styles from "./table.module.scss";
+import { TableRow } from "./table-row";
+import { TableRowCell } from "./table-row-cell";
+
+const cx = c.bind(styles);
+const rootClassName = "purpur-table";
+
+type EmptyTableProps = {
+  variant: "primary" | "secondary";
+  tag: HeadingTagType;
+  title: string;
+  description: string;
+  colSpan: number;
+  icon: React.ReactNode;
+};
+
+export const EmptyTable = ({
+  variant,
+  tag,
+  title,
+  description,
+  colSpan,
+  icon,
+}: EmptyTableProps) => (
+  <TableRow>
+    <TableRowCell
+      colSpan={colSpan}
+      isLastRow={true}
+      isFirstCell={true}
+      isLastCell={true}
+      enableColumnDrag={false}
+    >
+      <div
+        className={cx([
+          `${rootClassName}__empty-section`,
+          `${rootClassName}__empty-section--${variant}`,
+        ])}
+      >
+        {icon && <div className={cx(`${rootClassName}__empty-section__icon`)}>{icon}</div>}
+        <div className={cx(`${rootClassName}__empty-section__texts`)}>
+          <Heading data-testid="purpur-table-empty-table-title" variant="title-100" tag={tag}>
+            {title}
+          </Heading>
+          <Paragraph data-testid="purpur-table-empty-table-description">{description}</Paragraph>
+        </div>
+      </div>
+    </TableRowCell>
+  </TableRow>
+);

package/src/loading-table-rows.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import { TableRow } from "./table-row";
+import { TableRowCellSkeleton } from "./table-row-cell-skeleton";
+
+type LoadingTableRowsProps = {
+  rowCount: number;
+  isScrolled: boolean;
+  stickyFirstColumn: boolean;
+  getStickyColumn: (index: number) => boolean;
+  cellWidths: (string | number)[];
+  showBorder: (index: number) => boolean;
+};
+
+export const LoadingTableRows = ({
+  rowCount,
+  getStickyColumn,
+  stickyFirstColumn,
+  isScrolled,
+  cellWidths,
+  showBorder,
+}: LoadingTableRowsProps) => (
+  <>
+    {Array.from({ length: rowCount }, (_value, index) => index).map((row, rowIndex) => (
+      <TableRow key={`skeleton-row-${row}`}>
+        {cellWidths.map((cellWidth, cellIndex) => (
+          <TableRowCellSkeleton
+            key={`skeleton-cell-${cellIndex}`}
+            isLastRow={rowIndex === rowCount - 1}
+            isFirstCell={cellIndex === 0}
+            isLastCell={cellIndex === cellWidths.length - 1}
+            stickyColumn={stickyFirstColumn && getStickyColumn(cellIndex)}
+            isScrolled={isScrolled}
+            showBorder={showBorder(cellIndex)}
+            cellWidth={cellWidth}
+          />
+        ))}
+      </TableRow>
+    ))}
+  </>
+);

package/src/table-body.tsx

@@ -12,7 +12,7 @@ type TableBodyProps = {
 
 const rootClassName = "purpur-table-body";
 
-const TableBody = ({ children, className, ...props }: TableBodyProps) => {
+export const TableBody = ({ children, className, ...props }: TableBodyProps) => {
   const classes = cx(className, rootClassName);
 
   return (
@@ -21,5 +21,3 @@ const TableBody = ({ children, className, ...props }: TableBodyProps) => {
     </tbody>
   );
 };
-
-export default TableBody;