@purpurds/table 8.5.1 → 8.6.0

package/dist/test-utils/helpers.d.ts

@@ -108,6 +108,45 @@ export declare const copy: {
             description: string;
         };
     };
+    settingsDrawerWithColumnDrag: {
+        buttons: {
+            closeDrawer: string;
+            resetSettings: string;
+        };
+        generalSettings: {
+            header: string;
+            toggles: {
+                lockFirstcolumn: string;
+                showFilters: string;
+                stickyHeader: string;
+            };
+        };
+        title: string;
+        visibleColumns: {
+            header: string;
+            description: string;
+            rearrangeDescription: string;
+            buttons: {
+                rearrange: string;
+                done: string;
+            };
+            ariaLabels: {
+                dragHandle: {
+                    action: string;
+                    instructions: string;
+                };
+                arrowButtons: {
+                    move: string;
+                    up: string;
+                    down: string;
+                };
+                buttons: {
+                    rearrange: string;
+                    done: string;
+                };
+            };
+        };
+    };
     sortingAriaLabels: {
         asc: string;
         default: string;

package/dist/test-utils/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/test-utils/helpers.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,KAAG,WAIjD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,KAAG,WAIjD,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,OAAO,WAAW,EAClB,cAAc,MAAM,KACnB,WAKF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,OAAO,gBAAgB,EACvB,OAAO,MAAM,EACb,cAAc,MAAM,KACnB,oBAQF,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,gBAAgB,EAAE,cAAS,KAAG,mBAEpE,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,gBAAgB,EAAE,OAAO,MAAM,KAAG,mBAExE,CAAC;AAGF,eAAO,MAAM,0BAA0B,GACrC,OAAO,gBAAgB,EACvB,OAAO,MAAM,KACZ,iBAEF,CAAC;AAEF,eAAO,MAAM,6BAA6B,GACxC,OAAO,gBAAgB,EACvB,OAAO,MAAM,KACZ,iBAEF,CAAC;AAGF,eAAO,MAAM,4BAA4B,GACvC,OAAO,gBAAgB,EACvB,cAAS,KACR,iBAEF,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,OAAO,gBAAgB,EAAE,QAAQ,MAAM,gBAG9E,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,gBAAgB,EACvB,QAAQ,MAAM,EACd,aAAa,MAAM,kBAOpB,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,OAAO,gBAAgB,EAAE,QAAQ,MAAM,gBAGjF,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,gBAAgB,EACvB,QAAQ,MAAM,EACd,aAAa,MAAM,kBAIpB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCA6CQ,MAAM;;;CAGnC,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EhB,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/test-utils/helpers.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,KAAG,WAIjD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,KAAG,WAIjD,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,OAAO,WAAW,EAClB,cAAc,MAAM,KACnB,WAKF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,OAAO,gBAAgB,EACvB,OAAO,MAAM,EACb,cAAc,MAAM,KACnB,oBAQF,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,gBAAgB,EAAE,cAAS,KAAG,mBAEpE,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,gBAAgB,EAAE,OAAO,MAAM,KAAG,mBAExE,CAAC;AAGF,eAAO,MAAM,0BAA0B,GACrC,OAAO,gBAAgB,EACvB,OAAO,MAAM,KACZ,iBAEF,CAAC;AAEF,eAAO,MAAM,6BAA6B,GACxC,OAAO,gBAAgB,EACvB,OAAO,MAAM,KACZ,iBAEF,CAAC;AAGF,eAAO,MAAM,4BAA4B,GACvC,OAAO,gBAAgB,EACvB,cAAS,KACR,iBAEF,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,OAAO,gBAAgB,EAAE,QAAQ,MAAM,gBAG9E,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,gBAAgB,EACvB,QAAQ,MAAM,EACd,aAAa,MAAM,kBAOpB,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,OAAO,gBAAgB,EAAE,QAAQ,MAAM,gBAGjF,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,gBAAgB,EACvB,QAAQ,MAAM,EACd,aAAa,MAAM,kBAIpB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCA6CQ,MAAM;;;CAGnC,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqHhB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/table",
-  "version": "8.5.1",
+  "version": "8.6.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/button": "8.5.1",
-    "@purpurds/badge": "8.5.1",
-    "@purpurds/cta-link": "8.5.1",
-    "@purpurds/heading": "8.5.1",
-    "@purpurds/drawer": "8.5.1",
-    "@purpurds/icon": "8.5.1",
-    "@purpurds/link": "8.5.1",
-    "@purpurds/paragraph": "8.5.1",
-    "@purpurds/checkbox": "8.5.1",
-    "@purpurds/select": "8.5.1",
-    "@purpurds/skeleton": "8.5.1",
-    "@purpurds/text-field": "8.5.1",
-    "@purpurds/tokens": "8.5.1",
-    "@purpurds/toggle": "8.5.1",
-    "@purpurds/tooltip": "8.5.1",
-    "@purpurds/visually-hidden": "8.5.1"
+    "@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"
   },
   "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.5.1",
+    "@purpurds/autocomplete": "8.6.0",
+    "@purpurds/illustrative-icon": "8.6.0",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/grid": "8.5.1",
-    "@purpurds/illustrative-icon": "8.5.1",
-    "@purpurds/listbox": "8.5.1",
-    "@purpurds/pagination": "8.5.1",
-    "@purpurds/label": "8.5.1"
+    "@purpurds/grid": "8.6.0",
+    "@purpurds/label": "8.6.0",
+    "@purpurds/pagination": "8.6.0",
+    "@purpurds/listbox": "8.6.0"
   },
   "scripts": {
     "build:dev": "vite",

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

@@ -61,7 +61,7 @@ $border-width: 1px;
     text-align: center;
   }
 
-  &__toggle {
+  div#{$root}__toggle {
     justify-content: space-between;
     width: 100%;
   }

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

@@ -248,4 +248,66 @@ describe("Data Table - Settings drawer", () => {
       });
     });
   });
+
+  describe("Column drag enabled", () => {
+    const onColumnOrderChangeMock = vi.fn();
+    let withinDrawerContent: ReturnType<typeof within>;
+
+    beforeEach(() => {
+      render(
+        <TableSettingsDrawer
+          id="purpur-table-settings-drawer"
+          isDrawerOpen={true}
+          showColumnFilters={true}
+          columnFiltersEnabled={true}
+          stickyFirstColumn={true}
+          stickyHeaders={true}
+          copy={copy.settingsDrawerWithColumnDrag}
+          setDrawerIsOpen={setDrawerIsOpenMock}
+          setShowColumnFiltersEnabled={setColumnFiltersEnabledMock}
+          setStickyFirstColumn={setStickyFirstColumnMock}
+          setStickyHeaders={setStickyHeadersMock}
+          getAllColumns={getAllColumnsMock}
+          onResetSettings={onResetSettingsMock}
+          enableColumnDrag={true}
+          onColumnOrderChange={onColumnOrderChangeMock}
+          columnOrder={["column_1", "column_2", "column_3"]}
+        />
+      );
+
+      withinDrawerContent = within(screen.getByTestId(Selectors.SETTINGS_DRAWER.CONTENT));
+    });
+
+    describe("Visible columns with rearrange mode", () => {
+      let withinVisibleColumns: ReturnType<typeof within>;
+
+      beforeEach(() => {
+        withinVisibleColumns = within(
+          withinDrawerContent.getByTestId(Selectors.SETTINGS_DRAWER.VISIBLE_COLUMNS)
+        );
+      });
+
+      it("should have a rearrange button", () => {
+        const rearrangeButton = withinVisibleColumns.getByRole("button", {
+          name: copy.settingsDrawerWithColumnDrag.visibleColumns.ariaLabels.buttons.rearrange,
+        });
+        expect(rearrangeButton).toBeInTheDocument();
+        expect(rearrangeButton).toHaveTextContent(copy.settingsDrawerWithColumnDrag.visibleColumns.buttons.rearrange);
+      });
+
+      it("should update aria-label when entering rearrange mode", async () => {
+        const rearrangeButton = withinVisibleColumns.getByRole("button", {
+          name: copy.settingsDrawerWithColumnDrag.visibleColumns.ariaLabels.buttons.rearrange,
+        });
+
+        await userEvent.click(rearrangeButton);
+
+        const doneButton = withinVisibleColumns.getByRole("button", {
+          name: copy.settingsDrawerWithColumnDrag.visibleColumns.ariaLabels.buttons.done,
+        });
+        expect(doneButton).toBeInTheDocument();
+        expect(doneButton).toHaveTextContent(copy.settingsDrawerWithColumnDrag.visibleColumns.buttons.done);
+      });
+    });
+  });
 });

package/src/table-settings-drawer.tsx

@@ -34,6 +34,7 @@ import {
   purpurMotionDuration150,
   purpurMotionEasingEaseInOut,
 } from "@purpurds/tokens/motion/variables";
+import { VisuallyHidden } from "@purpurds/visually-hidden";
 import { type Column, type RowData } from "@tanstack/react-table";
 import c from "classnames/bind";
 
@@ -80,7 +81,10 @@ type VisibleColumnsWithColumnDragCopyProps = VisibleColumnsCopyBaseProps & {
       up: string;
       down: string;
     };
-    rearrangeButton: string;
+    buttons: {
+      rearrange: string;
+      done: string;
+    };
   };
 };
 
@@ -358,7 +362,11 @@ const VisibleColumns = <TData extends RowData>({
               variant={isRearrangeMode ? "primary" : "tertiary-purple"}
               onClick={() => setIsRearrangeMode((v) => !v)}
               data-testid={`${rootTestId}-rearrange-button`}
-              aria-label={copy.visibleColumns.ariaLabels.rearrangeButton}
+              aria-label={
+                isRearrangeMode
+                  ? copy.visibleColumns.ariaLabels.buttons.done
+                  : copy.visibleColumns.ariaLabels.buttons.rearrange
+              }
             >
               <IconSorter size="xs" />
               {isRearrangeMode
@@ -476,13 +484,15 @@ const DraggableColumnItem = ({
           })}
           {...listeners}
           {...attributes}
+          aria-label={`${copy.visibleColumns.ariaLabels.dragHandle.action} ${label}`}
+          aria-describedby={`drag-instructions-${id}`}
         >
-          <IconDragVertical
-            className={cx(`${rootClassName}__draggable-handle-icon`, "terre")}
-            size="sm"
-          />
+          <IconDragVertical className={cx(`${rootClassName}__draggable-handle-icon`)} size="sm" />
         </div>
         <span>{label}</span>
+        <VisuallyHidden id={`drag-instructions-${id}`}>
+          {copy.visibleColumns.ariaLabels.dragHandle.instructions}
+        </VisuallyHidden>
       </div>
 
       <div className={cx(`${rootClassName}__draggable-item-buttons`)}>

package/src/table.stories.tsx

@@ -274,7 +274,10 @@ const commonSettingsDrawerCopyWithColumnDrag = {
         up: "up",
         down: "down",
       },
-      rearrangeButton: "Reorder columns",
+      buttons: {
+        rearrange: "Reorder columns",
+        done: "Save column order and exit reorder mode",
+      },
     },
   },
 };
@@ -324,6 +327,7 @@ export const Showcase: StoryTableData = {
     stickyHeaders: true,
     enableColumnDrag: true,
     onColumnOrderChange: () => {},
+    columnDragAriaLabelsCopy: commonColumnDragAriaLabels,
   },
   parameters: {
     docs: {

package/src/test-utils/helpers.ts

@@ -199,6 +199,46 @@ export const copy = {
       description: "Change general table settings",
     },
   },
+  settingsDrawerWithColumnDrag: {
+    buttons: {
+      closeDrawer: "Close drawer",
+      resetSettings: "Reset settings",
+    },
+    generalSettings: {
+      header: "General settings",
+
+      toggles: {
+        lockFirstcolumn: "Lock first column",
+        showFilters: "Show Filters",
+        stickyHeader: "Sticky header",
+      },
+    },
+    title: "Table settings",
+    visibleColumns: {
+      header: "Visible columns",
+      description: "Change general table settings",
+      rearrangeDescription: "Choose how you want to reorder the columns.",
+      buttons: {
+        rearrange: "Reorder",
+        done: "Done",
+      },
+      ariaLabels: {
+        dragHandle: {
+          action: "Drag to reorder column",
+          instructions: "(use space or enter to pick up, arrow keys to move, space or enter to drop)",
+        },
+        arrowButtons: {
+          move: "Move",
+          up: "up",
+          down: "down",
+        },
+        buttons: {
+          rearrange: "Reorder columns",
+          done: "Save column order and exit reorder mode",
+        },
+      },
+    },
+  },
   sortingAriaLabels: {
     asc: "Sort ascending",
     default: "Sort column",