@purpurds/table 8.3.0 → 8.4.0

package/src/table-headers.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import { horizontalListSortingStrategy, SortableContext } from "@dnd-kit/sortable";
+import type { HeaderGroup, Table } from "@tanstack/react-table";
+import type { RowData } from "@tanstack/react-table";
+
+import { type SortingAriaLabels, TableColumnHeaderCell } from "./table-column-header-cell";
+import { TableRow } from "./table-row";
+
+type StandardTableHeadersProps<TData extends RowData> = {
+  headerGroup: HeaderGroup<TData>;
+  tanstackTable: Table<TData>;
+  tableHasFilters: boolean;
+  emptyTable: boolean;
+  stickyFirstColumn: boolean;
+  stickyHeaders: boolean;
+  isScrolled: boolean;
+  getStickyColumn: (index: number) => boolean;
+  showBorder: (index: number) => boolean;
+  enableSorting: boolean;
+  sortingAriaLabels?: SortingAriaLabels;
+};
+
+export function StandardTableHeaders<TData extends RowData>({
+  headerGroup,
+  tanstackTable,
+  tableHasFilters,
+  emptyTable,
+  stickyFirstColumn,
+  stickyHeaders,
+  isScrolled,
+  getStickyColumn,
+  showBorder,
+  enableSorting,
+  sortingAriaLabels,
+}: StandardTableHeadersProps<TData>) {
+  return (
+    <TableRow key={headerGroup.id}>
+      {headerGroup.headers.map((header, index) => (
+        <TableColumnHeaderCell
+          key={header.id}
+          header={header}
+          tanstackTable={tanstackTable}
+          tableHasFilters={tableHasFilters}
+          stickyColumn={!emptyTable && stickyFirstColumn && getStickyColumn(index)}
+          stickyHeaders={!emptyTable && stickyHeaders}
+          isScrolled={isScrolled}
+          showBorder={showBorder(index)}
+          {...(enableSorting && sortingAriaLabels
+            ? { enableSorting, sortingAriaLabels }
+            : { enableSorting: false })}
+        />
+      ))}
+    </TableRow>
+  );
+}
+
+type SortableTableHeadersProps<TData extends RowData> = StandardTableHeadersProps<TData> & {
+  columnOrder: string[];
+  activeId: UniqueIdentifier | null;
+  enableColumnDrag: boolean;
+  columnDragAriaLabelsCopy?: Record<string, string>;
+};
+
+export function SortableTableHeaders<TData extends RowData>({
+  headerGroup,
+  tanstackTable,
+  tableHasFilters,
+  emptyTable,
+  stickyFirstColumn,
+  stickyHeaders,
+  isScrolled,
+  getStickyColumn,
+  showBorder,
+  enableSorting,
+  sortingAriaLabels,
+  columnOrder,
+  activeId,
+  enableColumnDrag,
+  columnDragAriaLabelsCopy,
+}: SortableTableHeadersProps<TData>) {
+  return (
+    <TableRow key={headerGroup.id}>
+      <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>
+        {headerGroup.headers.map((header, index) => {
+          const isSelectionColumn = header.id === "row-selection" || header.id === "row-toggle";
+
+          return (
+            <TableColumnHeaderCell
+              key={header.id}
+              header={header}
+              tanstackTable={tanstackTable}
+              tableHasFilters={tableHasFilters}
+              stickyColumn={!emptyTable && stickyFirstColumn && getStickyColumn(index)}
+              stickyHeaders={!emptyTable && stickyHeaders}
+              isScrolled={isScrolled}
+              showBorder={showBorder(index)}
+              {...(enableSorting && sortingAriaLabels
+                ? { enableSorting, sortingAriaLabels }
+                : { enableSorting: false })}
+              sortableId={header.id}
+              activeId={activeId}
+              overlayActive={false}
+              {...(!isSelectionColumn && enableColumnDrag && columnDragAriaLabelsCopy
+                ? {
+                    enableColumnDrag: true,
+                    columnDragAriaLabel: columnDragAriaLabelsCopy.grab,
+                  }
+                : {
+                    enableColumnDrag: false,
+                  })}
+            />
+          );
+        })}
+      </SortableContext>
+    </TableRow>
+  );
+}

package/src/table-row-cell-skeleton.tsx

@@ -55,4 +55,4 @@ const TableRowCellSkeleton = ({
   );
 };
 
-export default TableRowCellSkeleton;
+export { TableRowCellSkeleton };

package/src/table-row-cell.test.tsx

@@ -5,7 +5,7 @@ import { type Cell } from "@tanstack/react-table";
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 
-import TableRowCell from "./table-row-cell";
+import { TableRowCell } from "./table-row-cell";
 import { type CellType } from "./types";
 
 describe("Table row cell - Cell types", () => {
@@ -352,6 +352,7 @@ const renderTableRowCell = (
             isLastRow={true}
             isFirstCell={false}
             isLastCell={false}
+            enableColumnDrag={false}
           />
         </tr>
       </tbody>

package/src/table-row-cell.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef } from "react";
 import { type Cell, flexRender, type RowData } from "@tanstack/react-table";
 import c from "classnames/bind";
 
@@ -18,6 +18,8 @@ import { RowToggleCell } from "./cell-types/row-toggle-cell";
 import { ToggleCell } from "./cell-types/toggle-cell";
 import { WarningAlertMessageCell } from "./cell-types/warning-message-cell";
 import styles from "./table.module.scss";
+import { useDropIndicator } from "./use-drop-indicator.hook";
+import { useElementVisibility } from "./use-element-visibility.hook";
 
 const cx = c.bind(styles);
 
@@ -41,14 +43,17 @@ type TableRowCellProps<TData extends RowData> = {
   isLastRow: boolean;
   isFirstCell: boolean;
   isLastCell: boolean;
+  enableColumnDrag: boolean;
+  draggingActive?: boolean;
+  enableRowDrag?: boolean;
 } & (EmptyTableCell | TableRowCell<TData>);
 
 const rootClassName = "purpur-table-row-cell";
 
 const TableRowCell = <TData extends RowData>({
+  cell,
   className,
   ["data-testid"]: dataTestId,
-  cell,
   stickyColumn,
   children,
   colSpan = 1,
@@ -57,31 +62,30 @@ const TableRowCell = <TData extends RowData>({
   isLastRow,
   isFirstCell,
   isLastCell,
+  enableColumnDrag,
+  draggingActive,
+  enableRowDrag,
 }: TableRowCellProps<TData>) => {
-  const [isVisible, setIsVisible] = useState(false);
   const elementRef = useRef<HTMLTableCellElement | null>(null);
+  const isVisible = useElementVisibility(elementRef, 1);
 
-  useEffect(() => {
-    const currentElement = elementRef.current;
-    if (!currentElement) {
-      return;
-    }
+  // Get the column ID
+  const columnId = cell?.column.id;
 
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        setIsVisible(entry.isIntersecting);
-      },
-      { threshold: 1 }
-    );
+  // Use the drop indicator hook
+  const dropIndicatorPosition = useDropIndicator({
+    itemId: columnId,
+    sortableId: columnId, // Use column ID for consistency
+    enableDrag: !!enableColumnDrag,
+  });
 
-    observer.observe(currentElement);
+  // We no longer render a portal-based line indicator for body cells.
+  // Pseudo-elements (::before/::after) controlled via modifier classes provide the visual line.
+  // Row-level drag indicators (if implemented separately) can be re-added here in the future.
 
-    return () => {
-      if (currentElement) {
-        observer.unobserve(currentElement);
-      }
-    };
-  }, []);
+  const isRowSelector =
+    cell?.column.columnDef.meta?.cellType === "rowSelection" ||
+    cell?.column.columnDef.meta?.cellType === "rowToggle";
 
   const classes = cx(className, rootClassName, {
     [`${rootClassName}__sticky-column`]: stickyColumn,
@@ -92,24 +96,31 @@ const TableRowCell = <TData extends RowData>({
       (cell?.column.getIsFirstColumn() || isFirstCell) && isVisible && isLastRow,
     [`${rootClassName}__last-row-last-cell-visible`]:
       (cell?.column.getIsLastColumn() || isLastCell) && isVisible && isLastRow,
+    [`${rootClassName}__column-drag-enabled`]: enableColumnDrag,
+    [`${rootClassName}__dragging`]: draggingActive,
+    [`${rootClassName}--drop-indicator-before`]:
+      !isRowSelector && dropIndicatorPosition === "before",
+    [`${rootClassName}--drop-indicator-after`]: !isRowSelector && dropIndicatorPosition === "after",
   });
 
   const cellContent = cell ? getCellContent(cell) : children;
 
   return (
-    <td
-      ref={elementRef}
-      data-testid={dataTestId}
-      className={classes}
-      key={cell?.column.columnDef?.id}
-      colSpan={colSpan}
-    >
-      {cellContent}
-    </td>
+    <>
+      <td
+        ref={elementRef}
+        data-testid={dataTestId}
+        className={classes}
+        key={cell?.column.columnDef?.id}
+        colSpan={colSpan}
+      >
+        {cellContent}
+      </td>
+    </>
   );
 };
 
-export default TableRowCell;
+export { TableRowCell };
 
 const getCellContent = <TData extends RowData>(cell: Cell<TData, unknown>) => {
   const { cellType } = cell.column.columnDef.meta ?? {};

package/src/table-row.tsx

@@ -13,7 +13,7 @@ type TableRowProps = {
 
 const rootClassName = "purpur-table-row";
 
-const TableRow = ({
+export const TableRow = ({
   children,
   className,
   ["data-testid"]: dataTestId,
@@ -26,5 +26,3 @@ const TableRow = ({
     {children}
   </tr>
 );
-
-export default TableRow;

package/src/table-settings-drawer.module.scss

@@ -1,3 +1,6 @@
+$column-height: 60px;
+$border-width: 1px;
+
 .purpur-table-settings-drawer {
   $root: &;
   display: flex;
@@ -6,8 +9,17 @@
   gap: var(--purpur-spacing-600);
   align-self: stretch;
 
+  &__visible-columns-header-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--purpur-spacing-100);
+    align-self: stretch;
+  }
+
   &__general-settings,
-  &__visible-columns {
+  &__visible-columns,
+  &__draggable-list {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -15,12 +27,163 @@
     align-self: stretch;
   }
 
+  &__visible-columns {
+    #{$root}__toggle {
+      display: flex;
+      height: $column-height;
+      box-sizing: border-box;
+      padding: var(--purpur-spacing-25) var(--purpur-spacing-200);
+      justify-content: space-between;
+      align-items: center;
+      align-self: stretch;
+
+      border-radius: var(--purpur-border-radius-md);
+      background: var(--purpur-color-background-secondary);
+    }
+  }
+
+  &__visible-columns-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--purpur-spacing-200);
+    align-self: stretch;
+  }
+
+  &__visible-columns-header-content {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--purpur-spacing-100);
+    align-self: stretch;
+  }
+
   &__button-group {
     text-align: center;
   }
 
-  #{$root}__toggle {
+  &__toggle {
     justify-content: space-between;
     width: 100%;
   }
+
+  &__draggable-item {
+    position: relative;
+    display: flex;
+    padding-right: var(--purpur-spacing-200);
+    align-items: center;
+    gap: var(--purpur-spacing-50);
+    align-self: stretch;
+    justify-content: space-between;
+
+    border-radius: var(--purpur-border-radius-md);
+    background: var(--purpur-color-background-secondary);
+
+    &--overlay {
+      border: $border-width solid var(--purpur-color-border-weak);
+      box-shadow: var(--purpur-shadow-lg);
+    }
+
+    &--dragging {
+      opacity: 0.4;
+    }
+
+    &--drop-indicator-before::before,
+    &--drop-indicator-after::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background-color: var(--purpur-color-border-interactive-primary);
+      z-index: 5;
+      pointer-events: none;
+    }
+
+    &--drop-indicator-before::before {
+      top: calc(-1 * var(--purpur-spacing-200) / 2);
+      transform: translateY(-50%);
+    }
+
+    &--drop-indicator-after::after {
+      bottom: calc(-1 * var(--purpur-spacing-200) / 2);
+      transform: translateY(50%);
+    }
+
+    &--drop-indicator-before::after,
+    &--drop-indicator-after::before {
+      content: "";
+      position: absolute;
+      width: var(--purpur-spacing-150);
+      height: var(--purpur-spacing-150);
+      background-color: var(--purpur-color-border-interactive-primary);
+      border-radius: 50%;
+      z-index: 6;
+      pointer-events: none;
+      left: 0;
+    }
+
+    &--drop-indicator-before::after {
+      top: calc(-1 * var(--purpur-spacing-200) / 2);
+      transform: translate(-50%, -50%);
+    }
+
+    &--drop-indicator-after::before {
+      bottom: calc(-1 * var(--purpur-spacing-200) / 2);
+      transform: translate(-50%, 50%);
+    }
+  }
+
+  &__draggable-item-content {
+    display: flex;
+    gap: var(--purpur-spacing-200);
+    align-items: center;
+  }
+
+  &__draggable-handle {
+    display: flex;
+    height: $column-height;
+    box-sizing: border-box;
+    padding: 0 var(--purpur-spacing-50);
+    justify-content: center;
+    align-items: center;
+    gap: var(--purpur-spacing-100);
+    cursor: grab;
+    border-right: var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);
+
+    &:hover {
+      border-top-left-radius: calc(var(--purpur-border-radius-md) - $border-width);
+      border-bottom-left-radius: calc(var(--purpur-border-radius-md) - $border-width);
+      background: var(--purpur-color-background-interactive-transparent-hover);
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);
+      border-radius: var(--purpur-border-radius-xs);
+    }
+
+    &--overlay,
+    &--overlay:hover {
+      cursor: grabbing;
+      background: var(--purpur-color-background-interactive-transparent-active);
+    }
+
+    &-icon {
+      color: var(--purpur-color-text-weak);
+    }
+  }
+
+  &__draggable-item-buttons {
+    display: flex;
+    align-items: center;
+    gap: var(--purpur-spacing-100);
+  }
+
+  &__draggable-list {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--purpur-spacing-200);
+    align-self: stretch;
+  }
 }

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

@@ -248,103 +248,4 @@ describe("Data Table - Settings drawer", () => {
       });
     });
   });
-
-  describe("Row selection in settings drawer", () => {
-    const setRowSelectionEnabledMock = vi.fn();
-
-    describe("When row selection is enabled", () => {
-      let toggleElements: HTMLElement[];
-      let toggleLabels: HTMLLabelElement[];
-      let withinGeneralSettings: ReturnType<typeof within>;
-
-      beforeEach(() => {
-        render(
-          <TableSettingsDrawer
-            id="purpur-table-settings-drawer"
-            isDrawerOpen={true}
-            columnFiltersEnabled={true}
-            showColumnFilters={true}
-            stickyFirstColumn={true}
-            stickyHeaders={true}
-            copy={{
-              ...copy.settingsDrawer,
-              generalSettings: {
-                ...copy.settingsDrawer.generalSettings,
-                toggles: {
-                  ...copy.settingsDrawer.generalSettings.toggles,
-                  rowSelection: "Row selection",
-                },
-              },
-            }}
-            setDrawerIsOpen={setDrawerIsOpenMock}
-            setShowColumnFiltersEnabled={setColumnFiltersEnabledMock}
-            setStickyFirstColumn={setStickyFirstColumnMock}
-            setStickyHeaders={setStickyHeadersMock}
-            getAllColumns={getAllColumnsMock}
-            onResetSettings={onResetSettingsMock}
-            enableRowSelection={true}
-            rowSelectionEnabled={true}
-            setRowSelectionEnabled={setRowSelectionEnabledMock}
-          />
-        );
-
-        withinGeneralSettings = within(
-          screen.getByTestId(Selectors.SETTINGS_DRAWER.GENERAL_SETTINGS)
-        );
-        toggleElements = withinGeneralSettings.getAllByTestId(Selectors.SETTINGS_DRAWER.TOGGLE);
-        toggleLabels = withinGeneralSettings.getAllByTestId(Selectors.SETTINGS_DRAWER.TOGGLE_LABEL);
-      });
-
-      it("should have 4 toggles including row selection", () => {
-        expect(toggleElements).toHaveLength(4);
-      });
-
-      it("should have row selection toggle", () => {
-        expect(toggleLabels[3]).toHaveTextContent("Row selection");
-        expect(toggleElements[3]).toHaveAttribute("data-state", "checked");
-      });
-
-      it("should call setRowSelectionEnabled when toggled", async () => {
-        await userEvent.click(toggleElements[3]);
-        expect(setRowSelectionEnabledMock).toHaveBeenCalled();
-      });
-    });
-
-    describe("When row selection is not enabled", () => {
-      beforeEach(() => {
-        render(
-          <TableSettingsDrawer
-            id="purpur-table-settings-drawer"
-            isDrawerOpen={true}
-            columnFiltersEnabled={true}
-            showColumnFilters={true}
-            stickyFirstColumn={true}
-            stickyHeaders={true}
-            copy={copy.settingsDrawer}
-            setDrawerIsOpen={setDrawerIsOpenMock}
-            setShowColumnFiltersEnabled={setColumnFiltersEnabledMock}
-            setStickyFirstColumn={setStickyFirstColumnMock}
-            setStickyHeaders={setStickyHeadersMock}
-            getAllColumns={getAllColumnsMock}
-            onResetSettings={onResetSettingsMock}
-            enableRowSelection={false}
-            rowSelectionEnabled={true}
-            setRowSelectionEnabled={setRowSelectionEnabledMock}
-          />
-        );
-      });
-
-      it("should not show row selection toggle", () => {
-        const withinGeneralSettings = within(
-          screen.getByTestId(Selectors.SETTINGS_DRAWER.GENERAL_SETTINGS)
-        );
-        const toggleLabels = withinGeneralSettings.getAllByTestId(
-          Selectors.SETTINGS_DRAWER.TOGGLE_LABEL
-        );
-
-        expect(toggleLabels).toHaveLength(3);
-        expect(toggleLabels.map((label) => label.textContent)).not.toContain("Row selection");
-      });
-    });
-  });
 });