@purpurds/table 8.3.0 → 8.4.0

package/src/table-settings-drawer.tsx

@@ -1,15 +1,46 @@
-import React, { useId } from "react";
+import React, { useId, useState } from "react";
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  DragOverlay,
+  type DragStartEvent,
+  KeyboardSensor,
+  PointerSensor,
+  TouchSensor,
+  type UniqueIdentifier,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
 import { Button } from "@purpurds/button";
 import { Drawer } from "@purpurds/drawer";
 import { Heading } from "@purpurds/heading";
+import { IconArrowDown } from "@purpurds/icon/arrow-down";
+import { IconArrowUp } from "@purpurds/icon/arrow-up";
+import { IconDragVertical } from "@purpurds/icon/drag-vertical";
+import { IconSorter } from "@purpurds/icon/sorter";
 import { IconSync } from "@purpurds/icon/sync";
+import { Paragraph } from "@purpurds/paragraph";
 import { Toggle } from "@purpurds/toggle";
+import {
+  purpurMotionDuration150,
+  purpurMotionEasingEaseInOut,
+} from "@purpurds/tokens/motion/variables";
 import { type Column, type RowData } from "@tanstack/react-table";
 import c from "classnames/bind";
 
 import styles from "./table-settings-drawer.module.scss";
+import { useDropIndicator } from "./use-drop-indicator.hook";
 
-export type TableSettingsDrawerCopyProps = {
+export type TableSettingsDrawerCopyProps<TEnableDrag extends boolean = boolean> = {
   title: string;
   generalSettings: {
     header: string;
@@ -17,18 +48,60 @@ export type TableSettingsDrawerCopyProps = {
       showFilters: string;
       lockFirstcolumn: string;
       stickyHeader: string;
-      rowSelection?: string;
     };
   };
-  visibleColumns: {
-    header: string;
-  };
+  visibleColumns: TEnableDrag extends true
+    ? VisibleColumnsWithColumnDragCopyProps
+    : VisibleColumnsWithoutColumnDragCopyProps;
   buttons: {
     closeDrawer: string;
     resetSettings: string;
   };
 };
 
+type VisibleColumnsCopyBaseProps = {
+  header: string;
+  description: string;
+};
+
+type VisibleColumnsWithColumnDragCopyProps = VisibleColumnsCopyBaseProps & {
+  rearrangeDescription: string;
+  buttons: {
+    rearrange: string;
+    done: string;
+  };
+  ariaLabels: {
+    dragHandle: {
+      action: string;
+      instructions: string;
+    };
+    arrowButtons: {
+      move: string;
+      up: string;
+      down: string;
+    };
+    rearrangeButton: string;
+  };
+};
+
+type VisibleColumnsWithoutColumnDragCopyProps = VisibleColumnsCopyBaseProps & {
+  rearrangeDescription?: never;
+  buttons?: never;
+  ariaLabels?: never;
+};
+
+type ColumnDragEnabledProps = {
+  enableColumnDrag: true;
+  onColumnOrderChange: (newColumnOrder: string[]) => void;
+  copy: TableSettingsDrawerCopyProps<true>;
+};
+
+type ColumnDragDisabledProps = {
+  enableColumnDrag?: false;
+  onColumnOrderChange?: never;
+  copy: TableSettingsDrawerCopyProps<false>;
+};
+
 export type TableSettingsDrawerProps<TData> = {
   id: string;
   getAllColumns: () => Column<TData, unknown>[];
@@ -38,16 +111,13 @@ export type TableSettingsDrawerProps<TData> = {
   setStickyFirstColumn: React.Dispatch<React.SetStateAction<boolean>>;
   setStickyHeaders: React.Dispatch<React.SetStateAction<boolean>>;
   columnFiltersEnabled: boolean;
-  copy: TableSettingsDrawerCopyProps;
   isDrawerOpen: boolean;
   showColumnFilters: boolean;
   stickyFirstColumn: boolean;
   stickyHeaders: boolean;
-  enableRowSelection?: boolean;
-  rowSelectionEnabled?: boolean;
-  setRowSelectionEnabled?: React.Dispatch<React.SetStateAction<boolean>>;
   zIndex?: number;
-};
+  columnOrder?: string[];
+} & (ColumnDragEnabledProps | ColumnDragDisabledProps);
 
 const rootClassName = "purpur-table-settings-drawer";
 const cx = c.bind(styles);
@@ -67,10 +137,10 @@ export const TableSettingsDrawer = <TData extends RowData>({
   setShowColumnFiltersEnabled,
   setStickyFirstColumn,
   setStickyHeaders,
-  enableRowSelection,
-  rowSelectionEnabled,
-  setRowSelectionEnabled,
+  enableColumnDrag,
   zIndex,
+  columnOrder,
+  onColumnOrderChange,
 }: TableSettingsDrawerProps<TData>) => {
   return (
     <div id={id}>
@@ -96,11 +166,22 @@ export const TableSettingsDrawer = <TData extends RowData>({
               stickyFirstColumn={stickyFirstColumn}
               stickyHeaders={stickyHeaders}
               copy={copy.generalSettings}
-              enableRowSelection={enableRowSelection}
-              rowSelectionEnabled={rowSelectionEnabled}
-              setRowSelectionEnabled={setRowSelectionEnabled}
             />
-            <VisibleColumns getAllColumns={getAllColumns} header={copy.visibleColumns.header} />
+            <VisibleColumns
+              getAllColumns={getAllColumns}
+              header={copy.visibleColumns.header}
+              columnOrder={columnOrder}
+              {...(enableColumnDrag
+                ? {
+                    enableColumnDrag: true,
+                    onColumnOrderChange: onColumnOrderChange,
+                    copy: copy as TableSettingsDrawerCopyProps<true>,
+                  }
+                : {
+                    enableColumnDrag: false,
+                    copy: copy as TableSettingsDrawerCopyProps<false>,
+                  })}
+            />
           </div>
         </Drawer.Content>
       </Drawer>
@@ -131,12 +212,8 @@ type GeneralSettingsProps = {
       showFilters: string;
       lockFirstcolumn: string;
       stickyHeader: string;
-      rowSelection?: string;
     };
   };
-  enableRowSelection?: boolean;
-  rowSelectionEnabled?: boolean;
-  setRowSelectionEnabled?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const GeneralSettings = ({
@@ -148,9 +225,6 @@ const GeneralSettings = ({
   stickyFirstColumn,
   stickyHeaders,
   copy,
-  enableRowSelection,
-  rowSelectionEnabled,
-  setRowSelectionEnabled,
 }: GeneralSettingsProps) => {
   const uid = useId();
   return (
@@ -182,14 +256,6 @@ const GeneralSettings = ({
         label={copy.toggles.stickyHeader}
         onChange={setStickyHeaders}
       />
-      {enableRowSelection && copy.toggles.rowSelection && setRowSelectionEnabled && (
-        <ToggleWrapper
-          id={`${uid}-row-selection`}
-          checked={rowSelectionEnabled || false}
-          label={copy.toggles.rowSelection}
-          onChange={setRowSelectionEnabled}
-        />
-      )}
     </div>
   );
 };
@@ -197,44 +263,254 @@ const GeneralSettings = ({
 const VisibleColumns = <TData extends RowData>({
   header,
   getAllColumns,
+  enableColumnDrag,
+  columnOrder,
+  onColumnOrderChange,
+  copy,
 }: {
   header: string;
   getAllColumns: () => Column<TData, unknown>[];
-}) => {
+  columnOrder?: string[];
+} & (ColumnDragDisabledProps | ColumnDragEnabledProps)) => {
   const allColumns = getAllColumns();
-  // Filter out row-selection and row-toggle columns
-  const filteredColumns = allColumns.filter(
-    (column) => column.id !== "row-selection" && column.id !== "row-toggle"
+
+  const filterAwayRowSelectionToggle = (column: Column<TData, unknown>) =>
+    column.id !== "row-selection" && column.id !== "row-toggle";
+
+  const [isRearrangeMode, setIsRearrangeMode] = useState(false);
+  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
+
+  const visible = allColumns
+    .filter((column) => column.getIsVisible())
+    .filter(filterAwayRowSelectionToggle);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
   );
-  const visible = filteredColumns.filter((column) => column.getIsVisible());
 
-  const isDisabled = (column: Column<TData, unknown>) => {
-    return !column.getCanHide() || (visible.length === 1 && visible.includes(column));
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveId(event.active.id);
   };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const currentOrder = allColumns.map((column) => column.id);
+
+      const oldIndex = currentOrder.indexOf(String(active.id));
+      const newIndex = currentOrder.indexOf(String(over.id));
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const newOrder = [...currentOrder];
+        const [removed] = newOrder.splice(oldIndex, 1);
+        newOrder.splice(newIndex, 0, removed);
+
+        if (onColumnOrderChange) onColumnOrderChange(newOrder);
+      }
+    }
+
+    setActiveId(null);
+  };
+
+  const moveColumn = (id: string, direction: "up" | "down") => {
+    const currentOrder = allColumns.map((column) => column.id);
+
+    const index = currentOrder.indexOf(id);
+    if (
+      (direction === "up" && index === 0) ||
+      (direction === "down" && index === currentOrder.length - 1)
+    ) {
+      return;
+    }
+    const newIndex = direction === "up" ? index - 1 : index + 1;
+    const newOrder = arrayMove(currentOrder, index, newIndex);
+    if (onColumnOrderChange) onColumnOrderChange(newOrder);
+  };
+
+  const getColumnById = (id: string) => allColumns.find((col) => col.id === id);
+
+  const isDisabled = (column: Column<TData, unknown>) =>
+    !column.getCanHide() || (visible.length === 1 && visible.includes(column));
+
   const uid = useId();
+
+  const activeColumn = activeId ? getColumnById(String(activeId)) : null;
+  const filteredColumns = allColumns.filter(filterAwayRowSelectionToggle);
+
   return (
     <section
       data-testid={`${rootTestId}-visible-columns`}
       className={cx(`${rootClassName}__visible-columns`)}
       aria-labelledby={`${uid}-visible-columns`}
     >
-      <Heading id={`${uid}-visible-columns`} variant="title-100" tag="h3">
-        {header}
-      </Heading>
-      {filteredColumns.map((column) => (
-        <ToggleWrapper
-          key={column.id}
-          id={column.id}
-          checked={column.getIsVisible()}
-          disabled={isDisabled(column)}
-          label={column.columnDef.header as string}
-          onChange={() => column.toggleVisibility()}
-        />
-      ))}
+      <div className={cx(`${rootClassName}__visible-columns-header-wrapper`)}>
+        <div className={cx(`${rootClassName}__visible-columns-header`)}>
+          <Heading id={`${uid}-visible-columns`} variant="title-100" tag="h3">
+            {header}
+          </Heading>
+          {enableColumnDrag && (
+            <Button
+              variant={isRearrangeMode ? "primary" : "tertiary-purple"}
+              onClick={() => setIsRearrangeMode((v) => !v)}
+              data-testid={`${rootTestId}-rearrange-button`}
+              aria-label={copy.visibleColumns.ariaLabels.rearrangeButton}
+            >
+              <IconSorter size="xs" />
+              {isRearrangeMode
+                ? copy.visibleColumns.buttons.done
+                : copy.visibleColumns.buttons.rearrange}
+            </Button>
+          )}
+        </div>
+        <Paragraph>
+          {isRearrangeMode && enableColumnDrag
+            ? copy.visibleColumns.rearrangeDescription
+            : copy.visibleColumns.description}
+        </Paragraph>
+      </div>
+      {isRearrangeMode && enableColumnDrag && columnOrder ? (
+        <div className={cx(`${rootClassName}__draggable-list`)}>
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+            modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+          >
+            <SortableContext items={columnOrder} strategy={verticalListSortingStrategy}>
+              {filteredColumns.map((column, index) => {
+                return (
+                  <DraggableColumnItemWithIndicator
+                    key={column.id}
+                    column={column}
+                    moveColumn={moveColumn}
+                    isFirst={index === 0}
+                    isLast={index === filteredColumns.length - 1}
+                    copy={copy}
+                    index={index}
+                  />
+                );
+              })}
+            </SortableContext>
+            <DragOverlay
+              dropAnimation={{
+                duration: Number(purpurMotionDuration150),
+                easing: purpurMotionEasingEaseInOut,
+              }}
+            >
+              {activeColumn ? (
+                <DraggableColumnItem
+                  id={activeColumn.id}
+                  label={activeColumn.columnDef.header as string}
+                  onMoveUp={() => {}}
+                  onMoveDown={() => {}}
+                  overlay
+                  copy={copy}
+                />
+              ) : null}
+            </DragOverlay>
+          </DndContext>
+        </div>
+      ) : (
+        filteredColumns.map((column) => (
+          <ToggleWrapper
+            key={column!.id}
+            id={column!.id}
+            checked={column!.getIsVisible()}
+            disabled={isDisabled(column!)}
+            label={column!.columnDef.header as string}
+            onChange={() => column!.toggleVisibility()}
+          />
+        ))
+      )}
     </section>
   );
 };
 
+const DraggableColumnItem = ({
+  id,
+  label,
+  onMoveUp,
+  onMoveDown,
+  isFirst,
+  isLast,
+  overlay,
+  copy,
+  dropIndicatorPosition,
+}: {
+  id: string;
+  label: string;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+  isFirst?: boolean;
+  isLast?: boolean;
+  overlay?: boolean;
+  copy: TableSettingsDrawerCopyProps<true>;
+  dropIndicatorPosition?: "before" | "after" | null;
+}) => {
+  const { attributes, listeners, setNodeRef, isDragging } = useSortable({
+    id,
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cx(`${rootClassName}__draggable-item`, {
+        [`${rootClassName}__draggable-item--overlay`]: overlay,
+        [`${rootClassName}__draggable-item--dragging`]: isDragging,
+        [`${rootClassName}__draggable-item--drop-indicator-before`]:
+          dropIndicatorPosition === "before",
+        [`${rootClassName}__draggable-item--drop-indicator-after`]:
+          dropIndicatorPosition === "after",
+      })}
+    >
+      <div className={cx(`${rootClassName}__draggable-item-content`)}>
+        <div
+          className={cx(`${rootClassName}__draggable-handle`, {
+            [`${rootClassName}__draggable-handle--overlay`]: overlay,
+          })}
+          {...listeners}
+          {...attributes}
+        >
+          <IconDragVertical
+            className={cx(`${rootClassName}__draggable-handle-icon`, "terre")}
+            size="sm"
+          />
+        </div>
+        <span>{label}</span>
+      </div>
+
+      <div className={cx(`${rootClassName}__draggable-item-buttons`)}>
+        <Button
+          variant="secondary"
+          size="xs"
+          onClick={onMoveUp}
+          disabled={isFirst || overlay}
+          aria-label={`${copy.visibleColumns.ariaLabels.arrowButtons.move} ${label} ${copy.visibleColumns.ariaLabels.arrowButtons.up}`}
+          iconOnly
+        >
+          <IconArrowUp size="xs" />
+        </Button>
+        <Button
+          variant="secondary"
+          size="xs"
+          onClick={onMoveDown}
+          disabled={isLast || overlay}
+          aria-label={`${copy.visibleColumns.ariaLabels.arrowButtons.move} ${label} ${copy.visibleColumns.ariaLabels.arrowButtons.down}`}
+          iconOnly
+        >
+          <IconArrowDown size="xs" />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
 const ToggleWrapper = ({
   id,
   checked,
@@ -259,3 +535,33 @@ const ToggleWrapper = ({
     data-testid={`${rootTestId}-toggle`}
   />
 );
+
+const DraggableColumnItemWithIndicator = <TData extends RowData>({
+  column,
+  moveColumn,
+  isFirst,
+  isLast,
+  copy,
+}: {
+  column: Column<TData, unknown>;
+  moveColumn: (id: string, direction: "up" | "down") => void;
+  isFirst: boolean;
+  isLast: boolean;
+  copy: TableSettingsDrawerCopyProps<true>;
+  index: number;
+}) => {
+  const dropIndicatorPosition = useDropIndicator({ itemId: column.id, enableDrag: true });
+
+  return (
+    <DraggableColumnItem
+      id={column.id}
+      label={column.columnDef.header as string}
+      onMoveUp={() => moveColumn(column.id, "up")}
+      onMoveDown={() => moveColumn(column.id, "down")}
+      isFirst={isFirst}
+      isLast={isLast}
+      copy={copy}
+      dropIndicatorPosition={dropIndicatorPosition}
+    />
+  );
+};