@purpurds/table 6.12.5 → 7.1.0

package/src/table-row-cell.tsx

@@ -18,7 +18,6 @@ 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 { pxToRemString } from "./utils/unit-conversions";
 
 const cx = c.bind(styles);
 
@@ -60,7 +59,7 @@ const TableRowCell = <TData extends RowData>({
   isLastCell,
 }: TableRowCellProps<TData>) => {
   const [isVisible, setIsVisible] = useState(false);
-  const elementRef = useRef<HTMLTableCellElement>(null);
+  const elementRef = useRef<HTMLTableCellElement | null>(null);
 
   useEffect(() => {
     const currentElement = elementRef.current;
@@ -99,12 +98,6 @@ const TableRowCell = <TData extends RowData>({
     },
   ]);
 
-  const styles = cell
-    ? {
-        width: pxToRemString(cell.column.getSize()),
-      }
-    : {};
-
   const cellContent = cell ? getCellContent(cell) : children;
 
   return (
@@ -113,7 +106,6 @@ const TableRowCell = <TData extends RowData>({
       data-testid={dataTestId}
       className={classes}
       key={cell?.column.columnDef?.id}
-      style={styles}
       colSpan={colSpan}
     >
       {cellContent}
@@ -126,9 +118,6 @@ export default TableRowCell;
 const getCellContent = <TData extends RowData>(cell: Cell<TData, unknown>) => {
   const { cellType } = cell.column.columnDef.meta ?? {};
 
-  // Define which cell types should have guaranteed truncation
-  const needsTruncation = ["bodyText", "iconText", "leadText", "link"].includes(cellType || "");
-
   const content = (() => {
     switch (cellType) {
       case "badge":
@@ -166,23 +155,5 @@ const getCellContent = <TData extends RowData>(cell: Cell<TData, unknown>) => {
     }
   })();
 
-  // If the cell type needs guaranteed truncation, wrap it with a truncation container
-  if (needsTruncation && cell) {
-    const widthInRemString = pxToRemString(cell.column.getSize());
-
-    return (
-      <div
-        className={cx(`${rootClassName}__truncate`)}
-        style={{
-          width: "100%",
-          maxWidth: widthInRemString,
-          minWidth: widthInRemString,
-        }}
-      >
-        {content}
-      </div>
-    );
-  }
-
   return content;
 };

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

@@ -45,6 +45,7 @@ describe("Data Table - Settings drawer", () => {
     beforeEach(() => {
       container = render(
         <TableSettingsDrawer
+          id="purpur-table-settings-drawer"
           isDrawerOpen={true}
           columnFiltersEnabled={true}
           showColumnFilters={true}
@@ -86,10 +87,6 @@ describe("Data Table - Settings drawer", () => {
       ).toHaveTextContent("Reset settings");
     });
 
-    it("should have a close drawer button", () => {
-      expect(closeButton).toHaveAttribute("aria-label", "Close drawer");
-    });
-
     it("should be possible to close the drawer", async () => {
       await userEvent.click(closeButton);
       expect(screen.queryByTestId(Selectors.SETTINGS_DRAWER.CONTENT)).toBeNull();
@@ -204,6 +201,7 @@ describe("Data Table - Settings drawer", () => {
     beforeEach(() => {
       render(
         <TableSettingsDrawer
+          id="purpur-table-settings-drawer"
           isDrawerOpen={true}
           showColumnFilters={false}
           columnFiltersEnabled={false}
@@ -262,6 +260,7 @@ describe("Data Table - Settings drawer", () => {
       beforeEach(() => {
         render(
           <TableSettingsDrawer
+            id="purpur-table-settings-drawer"
             isDrawerOpen={true}
             columnFiltersEnabled={true}
             showColumnFilters={true}
@@ -315,6 +314,7 @@ describe("Data Table - Settings drawer", () => {
       beforeEach(() => {
         render(
           <TableSettingsDrawer
+            id="purpur-table-settings-drawer"
             isDrawerOpen={true}
             columnFiltersEnabled={true}
             showColumnFilters={true}

package/src/table-settings-drawer.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useId } from "react";
 import { Button } from "@purpurds/button";
 import { Drawer } from "@purpurds/drawer";
 import { Heading } from "@purpurds/heading";
@@ -30,6 +30,7 @@ export type TableSettingsDrawerCopyProps = {
 };
 
 export type TableSettingsDrawerProps<TData> = {
+  id: string;
   getAllColumns: () => Column<TData, unknown>[];
   onResetSettings: () => void;
   setDrawerIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -52,6 +53,7 @@ const cx = c.bind(styles);
 const rootTestId = "purpur-table-settings-drawer";
 
 export const TableSettingsDrawer = <TData extends RowData>({
+  id,
   columnFiltersEnabled,
   copy,
   isDrawerOpen,
@@ -69,12 +71,12 @@ export const TableSettingsDrawer = <TData extends RowData>({
   setRowSelectionEnabled,
 }: TableSettingsDrawerProps<TData>) => {
   return (
-    <div id="purpur-table-settings-drawer">
+    <div id={id}>
       <Drawer data-testid={rootTestId} open={isDrawerOpen} onOpenChange={setDrawerIsOpen}>
         <Drawer.Content
           data-testid={`${rootTestId}-content`}
           zIndex={6}
-          closeButtonText={copy.buttons.closeDrawer}
+          closeButtonAriaLabel={copy.buttons.closeDrawer}
           title={copy.title}
           footerContent={
             <FooterContent text={copy.buttons.resetSettings} onClick={onResetSettings} />
@@ -147,45 +149,48 @@ const GeneralSettings = ({
   enableRowSelection,
   rowSelectionEnabled,
   setRowSelectionEnabled,
-}: GeneralSettingsProps) => (
-  <div
-    data-testid={`${rootTestId}-general-settings`}
-    className={cx(`${rootClassName}__general-settings`)}
-    aria-labelledby="general-settings"
-  >
-    <Heading id="general-settings" variant="title-100" tag="h3">
-      {copy.header}
-    </Heading>
-    {columnFiltersEnabled && (
+}: GeneralSettingsProps) => {
+  const uid = useId();
+  return (
+    <div
+      data-testid={`${rootTestId}-general-settings`}
+      className={cx(`${rootClassName}__general-settings`)}
+      aria-labelledby={`${uid}-general-settings`}
+    >
+      <Heading id={`${uid}-general-settings`} variant="title-100" tag="h3">
+        {copy.header}
+      </Heading>
+      {columnFiltersEnabled && (
+        <ToggleWrapper
+          id={`${uid}-show-filters`}
+          checked={showColumnFilters}
+          label={copy.toggles.showFilters}
+          onChange={setShowColumnFiltersEnabled}
+        />
+      )}
       <ToggleWrapper
-        id="show-filters"
-        checked={showColumnFilters}
-        label={copy.toggles.showFilters}
-        onChange={setShowColumnFiltersEnabled}
+        id={`${uid}-lock-first-column`}
+        checked={stickyFirstColumn}
+        label={copy.toggles.lockFirstcolumn}
+        onChange={setStickyFirstColumn}
       />
-    )}
-    <ToggleWrapper
-      id="lock-first-column"
-      checked={stickyFirstColumn}
-      label={copy.toggles.lockFirstcolumn}
-      onChange={setStickyFirstColumn}
-    />
-    <ToggleWrapper
-      id="sticky-header"
-      checked={stickyHeaders}
-      label={copy.toggles.stickyHeader}
-      onChange={setStickyHeaders}
-    />
-    {enableRowSelection && copy.toggles.rowSelection && setRowSelectionEnabled && (
       <ToggleWrapper
-        id="row-selection"
-        checked={rowSelectionEnabled || false}
-        label={copy.toggles.rowSelection}
-        onChange={setRowSelectionEnabled}
+        id={`${uid}-sticky-header`}
+        checked={stickyHeaders}
+        label={copy.toggles.stickyHeader}
+        onChange={setStickyHeaders}
       />
-    )}
-  </div>
-);
+      {enableRowSelection && copy.toggles.rowSelection && setRowSelectionEnabled && (
+        <ToggleWrapper
+          id={`${uid}-row-selection`}
+          checked={rowSelectionEnabled || false}
+          label={copy.toggles.rowSelection}
+          onChange={setRowSelectionEnabled}
+        />
+      )}
+    </div>
+  );
+};
 
 const VisibleColumns = <TData extends RowData>({
   header,
@@ -204,14 +209,14 @@ const VisibleColumns = <TData extends RowData>({
   const isDisabled = (column: Column<TData, unknown>) => {
     return !column.getCanHide() || (visible.length === 1 && visible.includes(column));
   };
-
+  const uid = useId();
   return (
     <section
       data-testid={`${rootTestId}-visible-columns`}
       className={cx(`${rootClassName}__visible-columns`)}
-      aria-labelledby="visible-columns"
+      aria-labelledby={`${uid}-visible-columns`}
     >
-      <Heading id="visible-columns" variant="title-100" tag="h3">
+      <Heading id={`${uid}-visible-columns`} variant="title-100" tag="h3">
         {header}
       </Heading>
       {filteredColumns.map((column) => (

package/src/table-toolbar.test.tsx

@@ -20,6 +20,9 @@ describe("Data table - Tool bar", () => {
       // Needs an element with id purpur-table for the ally tests to not fail with "ARIA attributes must conform to valid values (aria-valid-attr-value)" rule
       <div id="purpur-table">
         <TableToolbar
+          aria-controls="purpur-table"
+          settingsDrawerAriaControls="purpur-table-settings-drawer"
+          exportDrawerAriaControls="purpur-table-export-drawer"
           onResetColumnFilters={resetColumnFiltersMock}
           onSetDrawerIsOpen={setDrawerIsOpenMock}
           onToggleExpand={toggleExpandMock}

package/src/table-toolbar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type Dispatch, type HTMLAttributes, type SetStateAction } from "react";
 import { Button } from "@purpurds/button";
 import { IconDownload } from "@purpurds/icon/download";
 import { IconMaximize } from "@purpurds/icon/maximize";
@@ -28,8 +28,8 @@ export type TableToolbarCopyProps = {
   };
 };
 
-export type TableToolbarProps = {
-  onSetDrawerIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+export type TableToolbarProps = HTMLAttributes<HTMLDivElement> & {
+  onSetDrawerIsOpen: Dispatch<SetStateAction<boolean>>;
   onResetColumnFilters: () => void;
   onToggleExpand?: () => void;
   onExportData?: () => void;
@@ -41,6 +41,8 @@ export type TableToolbarProps = {
   hasExportsDrawer: boolean;
   showFilters: boolean;
   disableClearFilters: boolean;
+  settingsDrawerAriaControls: string;
+  exportDrawerAriaControls: string;
 };
 
 const rootClassName = "purpur-table-toolbar";
@@ -48,6 +50,9 @@ const cx = c.bind(styles);
 const rootTestId = "purpur-table-toolbar";
 
 export const TableToolbar = ({
+  ["aria-controls"]: ariaControls,
+  settingsDrawerAriaControls,
+  exportDrawerAriaControls,
   onExportData,
   onResetColumnFilters,
   onSetDrawerIsOpen,
@@ -76,7 +81,7 @@ export const TableToolbar = ({
             onClick={onResetColumnFilters}
             type="button"
             aria-label={copy?.ariaLabels?.clearFilters}
-            aria-controls="purpur-table"
+            aria-controls={ariaControls}
             disabled={disableClearFilters}
           >
             {copy.buttons.clearFilters}
@@ -94,7 +99,7 @@ export const TableToolbar = ({
             aria-label={copy?.ariaLabels?.export}
             {...(hasExportsDrawer && {
               "aria-expanded": isExportDrawerOpen,
-              "aria-controls": "purpur-table-export-drawer",
+              "aria-controls": exportDrawerAriaControls,
               "aria-haspopup": "dialog",
             })}
           >
@@ -110,7 +115,7 @@ export const TableToolbar = ({
             type="button"
             aria-label={copy?.ariaLabels?.settings}
             aria-expanded={isSettingsDrawerOpen}
-            aria-controls="purpur-table-settings-drawer"
+            aria-controls={settingsDrawerAriaControls}
             aria-haspopup="dialog"
           >
             <IconSettings size="xs" />
@@ -124,7 +129,7 @@ export const TableToolbar = ({
             onClick={() => onToggleExpand()}
             type="button"
             aria-label={copy?.ariaLabels?.expand}
-            aria-controls="purpur-table"
+            aria-controls={ariaControls}
           >
             <IconMaximize size="xs" />
             {copy.buttons.expand}

package/src/table.module.scss

@@ -7,8 +7,6 @@
   overflow: hidden;
   flex-direction: column;
   gap: var(--purpur-spacing-200);
-  z-index: 1;
-  max-width: fit-content;
   background-color: inherit;
 }
 
@@ -38,6 +36,10 @@
   border-collapse: separate;
   border-spacing: 0;
   position: relative;
+
+  &--full-width {
+    width: 100%;
+  }
 }
 
 .purpur-table-header {
@@ -72,11 +74,16 @@
 }
 
 .purpur-table-column-header-cell {
-  padding: var(--purpur-spacing-150) var(--purpur-spacing-150) var(--purpur-spacing-150)
+  padding: var(--purpur-spacing-100) var(--purpur-spacing-150) var(--purpur-spacing-100)
     var(--purpur-spacing-300);
   border-bottom: var(--table-border);
   text-align: left;
 
+  &:has([role="checkbox"]) {
+    padding: calc(var(--purpur-spacing-25) + var(--purpur-spacing-50)) var(--purpur-spacing-150)
+      calc(var(--purpur-spacing-25) + var(--purpur-spacing-50)) var(--purpur-spacing-300);
+  }
+
   &__checkbox {
     vertical-align: middle;
   }
@@ -93,7 +100,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: var(--purpur-spacing-100);
+    gap: var(--purpur-spacing-50);
   }
 
   &__title {
@@ -101,6 +108,10 @@
     align-items: center;
     gap: var(--purpur-spacing-50);
     align-self: stretch;
+
+    &--default {
+      padding: var(--purpur-spacing-100) var(--purpur-spacing-0);
+    }
   }
 
   &__sortable-title {
@@ -110,9 +121,9 @@
   &__filter-wrapper {
     display: flex;
     padding-right: var(--purpur-spacing-150);
+    padding-bottom: var(--purpur-spacing-150);
     flex-direction: column;
     align-items: flex-start;
-    gap: var(--purpur-spacing-100);
     align-self: stretch;
   }
 }
@@ -144,23 +155,32 @@
 
   &:has(.purpur-table-row-cell__row-selection),
   &:has(.purpur-table-row-cell__row-toggle) {
-    .purpur-table-row-cell:hover {
-      &:first-of-type {
-        &::before {
-          content: "";
-          position: absolute;
-          left: calc(-1 * var(--purpur-border-width-xs));
-          top: 0;
-          bottom: 0;
-          width: var(--purpur-border-width-md);
-          background-color: var(--purpur-color-border-weak);
-        }
+    .purpur-table-row-cell:first-of-type {
+      transform: translateZ(0);
+
+      &::after {
+        content: "";
+        position: absolute;
+        left: calc(-1 * var(--purpur-border-width-xs));
+        top: 0;
+        bottom: 0;
+        width: var(--purpur-border-width-md);
+        opacity: 0;
+        transition: opacity var(--purpur-motion-duration-150) ease;
+        background-color: var(--purpur-color-border-weak);
+        pointer-events: none;
+      }
+
+      &:hover::after {
+        opacity: 1;
       }
     }
   }
 
-  &--selected td:first-of-type {
-    &::before {
+  &.purpur-table-row--selected .purpur-table-row-cell:first-of-type {
+    transform: translateZ(0);
+
+    &::after {
       content: "";
       position: absolute;
       left: calc(-1 * var(--purpur-border-width-xs));
@@ -168,6 +188,8 @@
       bottom: 0;
       width: var(--purpur-border-width-md);
       background-color: var(--purpur-color-border-interactive-primary);
+      opacity: 1;
+      pointer-events: none;
     }
   }
 }
@@ -194,7 +216,7 @@
 }
 
 .purpur-table-row-cell {
-  height: var(--purpur-spacing-800);
+  height: calc(var(--purpur-spacing-600) + var(--purpur-spacing-150));
   padding: var(--purpur-spacing-0) var(--purpur-spacing-300);
   align-items: center;
   align-self: stretch;
@@ -263,30 +285,27 @@
     text-align: right;
   }
 
+  &__truncate-wrapper {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
   &__truncate {
     position: relative;
     max-width: 100%;
     width: 100%;
 
-    p,
-    span,
-    div {
-      display: block;
-    }
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 
     a {
       display: inline;
-    }
-
-    a,
-    p,
-    span,
-    div {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      max-width: 100%;
-      width: inherit;
     }
   }
 

package/src/table.stories.tsx

@@ -1,7 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 
- 
-
 import React, { useEffect, useState } from "react";
 import { Grid } from "@purpurds/grid";
 import { IllustrativeIconSearchQuestionDuocolor } from "@purpurds/illustrative-icon/search-question-duocolor";
@@ -154,6 +152,10 @@ const meta = {
       options: ["primary", "secondary"],
       description: "Style variant for the table",
     },
+    fullWidth: {
+      control: "boolean",
+      description: "Full width of the table",
+    },
   },
 } satisfies Meta<typeof Table<TableData>>;
 
@@ -245,7 +247,7 @@ const commonSettingsDrawerCopy = {
 const commonExportDrawerCopy = {
   title: "Export table",
   bodyText: "Choose the format you want to export the table in.",
-  closeButtonText: "Close drawer",
+  closeButtonAriaLabel: "Close drawer",
   link: "Export as",
 };
 
@@ -277,6 +279,7 @@ export const Showcase: StoryTableData = {
     data: generatedTableData,
     columns: columnDef,
     loading: true,
+    fullWidth: true,
   },
   parameters: {
     docs: {
@@ -345,8 +348,7 @@ manages filtering, sorting and pagination internally.
       nextButtonAriaLabel: "Go to next page",
       nextButtonText: "Next",
       outOfLabel: "of",
-      pageSelectorListBoxLabel: "Select a page",
-      pageSelectorNoOptionsText: "Page does not exist",
+      pageSelectorLabel: "Select a page",
       previousButtonAriaLabel: "Go to previous page",
       previousButtonText: "Previous",
       stepNumberPrefix: "Go to page",
@@ -389,6 +391,7 @@ manages filtering, sorting and pagination internally.
         onPrimaryButtonClick={handlePrimaryButtonClick}
         onSecondaryButtonClick={() => console.log("Secondary button clicked")}
         rowSelectionAriaLabels={args.rowSelectionAriaLabels}
+        fullWidth={args.fullWidth}
       />
     );
   },
@@ -730,8 +733,7 @@ This example demonstrates pagination functionality in the Table.
       nextButtonAriaLabel: "Go to next page",
       nextButtonText: "Next",
       outOfLabel: "of",
-      pageSelectorListBoxLabel: "Select a page",
-      pageSelectorNoOptionsText: "Page does not exist",
+      pageSelectorLabel: "Select a page",
       previousButtonAriaLabel: "Go to previous page",
       previousButtonText: "Previous",
       stepNumberPrefix: "Go to page",
@@ -1150,8 +1152,7 @@ sorting, and filtering are managed by a server API instead of in the browser.
       nextButtonAriaLabel: "Go to next page",
       nextButtonText: "Next",
       outOfLabel: "of",
-      pageSelectorListBoxLabel: "Select a page",
-      pageSelectorNoOptionsText: "Page does not exist",
+      pageSelectorLabel: "Select a page",
       previousButtonAriaLabel: "Go to previous page",
       previousButtonText: "Previous",
       stepNumberPrefix: "Go to page",