@purpurds/table 6.12.5 → 7.1.0

package/src/table.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useRef, useState } from "react";
+import React, { ReactElement, useEffect, useId, useRef, useState } from "react";
 import type {
   ColumnDef,
   ColumnFiltersState,
@@ -70,6 +70,7 @@ export type TableProps<TData extends RowData> = {
   columns: CoreOptions<TData>["columns"];
   data: TData[];
   paginationComponent?: ReactElement<PaginationProps>;
+  fullWidth?: boolean;
   onRowsCountChange?: (rowsCount: number) => void;
 } & (WithToolbarProps | WithoutToolbarProps) &
   (WithSortingProps | WithoutSortingProps) &
@@ -94,6 +95,7 @@ export const Table = <TData extends RowData>({
   enableToolbar: enableToolbar,
   exportDrawerCopy,
   exportFormats,
+  fullWidth = true,
   loading,
   paginationComponent,
   rowSelectionAriaLabels,
@@ -123,10 +125,11 @@ export const Table = <TData extends RowData>({
   );
   const [stickyFirstColumn, setStickyFirstColumn] = useState(true);
   const [stickyHeaders, setStickyHeaders] = useState(true);
-  const [rowSelectionEnabled, setRowSelectionEnabled] = useState(true);
   const prevShowOnlySelectedRows = useRef(showOnlySelectedRows);
   const [isScrolled, setIsScrolled] = useState(false);
   const tableContainerRef = useRef<HTMLTableElement>(null);
+  const uid = useId();
+  const [rowSelectionEnabled, setRowSelectionEnabled] = useState(true);
 
   const classes = cx([
     className,
@@ -252,7 +255,9 @@ export const Table = <TData extends RowData>({
   };
 
   const getStickyColumn = (index: number) => {
-    return props.enableRowSelection ? index <= 1 : index === 0;
+    // When rowSelectionEnabled is true, the first two columns are sticky
+    // Otherwise, only the first column is sticky
+    return props.enableRowSelection && rowSelectionEnabled ? index <= 1 : index === 0;
   };
 
   const handleResetColumnFilters = () => {
@@ -275,11 +280,15 @@ export const Table = <TData extends RowData>({
     setShowColumnFiltersEnabled(true);
     setStickyFirstColumn(true);
     setStickyHeaders(true);
-    setRowSelectionEnabled(true);
 
     tanstackTable.resetColumnVisibility();
   };
 
+  const showBorder = (index: number) => {
+    // Only show the border for sticky columns when the table is scrolled
+    return isScrolled && stickyFirstColumn && getStickyColumn(index);
+  };
+
   const tableRows = tanstackTable.getRowModel().rows;
   const emptyTable = tableRows.length === 0 && Boolean(emptyTableCopy);
 
@@ -294,8 +303,8 @@ export const Table = <TData extends RowData>({
         getStickyColumn={getStickyColumn}
         stickyFirstColumn={stickyFirstColumn}
         isScrolled={isScrolled}
-        rowSelectionEnabled={rowSelectionEnabled}
         cellWidths={getColumnWidths()}
+        showBorder={showBorder}
       />
     ) : emptyTable && emptyTableCopy && emptyTableHeadingTag ? (
       <EmptyTable
@@ -318,11 +327,7 @@ export const Table = <TData extends RowData>({
               isLastCell={cellIndex === row.getVisibleCells().length - 1}
               stickyColumn={stickyFirstColumn && getStickyColumn(cellIndex)}
               isScrolled={isScrolled}
-              showBorder={
-                isScrolled &&
-                ((props.enableRowSelection && cellIndex === 1) ||
-                  (!props.enableRowSelection && cellIndex === 0))
-              }
+              showBorder={showBorder(cellIndex)}
             />
           ))}
         </TableRow>
@@ -330,9 +335,12 @@ export const Table = <TData extends RowData>({
     );
 
   return (
-    <div id="purpur-table" className={classes}>
+    <div id={`${uid}-table`} className={classes}>
       {enableToolbar && (
         <TableToolbar
+          aria-controls={`${uid}-table`}
+          settingsDrawerAriaControls={`${uid}-settings-drawer`}
+          exportDrawerAriaControls={`${uid}-export-drawer`}
           onSetDrawerIsOpen={setSettingsDrawerIsOpen}
           onResetColumnFilters={handleResetColumnFilters}
           onToggleExpand={onToggleExpand}
@@ -353,7 +361,12 @@ export const Table = <TData extends RowData>({
         })}
         ref={tableContainerRef}
       >
-        <table className={cx(`${rootClassName}__table`)}>
+        <table
+          className={cx([
+            `${rootClassName}__table`,
+            { [`${rootClassName}__table--full-width`]: fullWidth },
+          ])}
+        >
           <TableHeader columnFiltersEnabled={showColumnFiltersEnabled}>
             {tanstackTable.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
@@ -365,11 +378,7 @@ export const Table = <TData extends RowData>({
                     stickyColumn={!emptyTable && stickyFirstColumn && getStickyColumn(index)}
                     stickyHeaders={!emptyTable && stickyHeaders}
                     isScrolled={isScrolled}
-                    showBorder={
-                      isScrolled &&
-                      ((props.enableRowSelection && index === 1) ||
-                        (!props.enableRowSelection && index === 0))
-                    }
+                    showBorder={showBorder(index)}
                     {...(props.enableSorting && sortingAriaLabels
                       ? { enableSorting: props.enableSorting, sortingAriaLabels }
                       : { enableSorting: false })}
@@ -396,6 +405,7 @@ export const Table = <TData extends RowData>({
       )}
       {enableToolbar && settingsDrawerCopy && (
         <TableSettingsDrawer
+          id={`${uid}-settings-drawer`}
           setDrawerIsOpen={setSettingsDrawerIsOpen}
           setShowColumnFiltersEnabled={setShowColumnFiltersEnabled}
           setStickyFirstColumn={setStickyFirstColumn}
@@ -415,6 +425,7 @@ export const Table = <TData extends RowData>({
       )}
       {Array.isArray(exportFormats) && exportDrawerCopy && (
         <TableExportDrawer
+          id={`${uid}-export-drawer`}
           isOpen={isExportDrawerOpen}
           setDrawerIsOpen={setExportDrawerIsOpen}
           exportFormats={exportFormats}
@@ -446,7 +457,7 @@ const EmptyTable = ({ variant, tag, title, description, colSpan, icon }: EmptyTa
           `${rootClassName}__empty-section--${variant}`,
         ])}
       >
-        <div className={cx(`${rootClassName}__empty-section__icon`)}>{icon}</div>
+        {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}
@@ -460,21 +471,20 @@ const EmptyTable = ({ variant, tag, title, description, colSpan, icon }: EmptyTa
 
 type LoadingTableRowsProps = {
   rowCount: number;
-  rowSelectionEnabled: boolean;
   isScrolled: boolean;
   stickyFirstColumn: boolean;
   getStickyColumn: (index: number) => boolean;
   cellWidths: (string | number)[];
+  showBorder: (index: number) => boolean;
 };
 
 const LoadingTableRows = ({
   rowCount,
-  // cellCount,
   getStickyColumn,
   stickyFirstColumn,
   isScrolled,
-  rowSelectionEnabled,
   cellWidths,
+  showBorder,
 }: LoadingTableRowsProps) => (
   <>
     {Array.from({ length: rowCount }, (_value, index) => index).map((row, rowIndex) => (
@@ -487,11 +497,7 @@ const LoadingTableRows = ({
             isLastCell={cellIndex === cellWidths.length - 1}
             stickyColumn={stickyFirstColumn && getStickyColumn(cellIndex)}
             isScrolled={isScrolled}
-            showBorder={
-              isScrolled &&
-              ((rowSelectionEnabled && cellIndex === 1) ||
-                (!rowSelectionEnabled && cellIndex === 0))
-            }
+            showBorder={showBorder(cellIndex)}
             cellWidth={cellWidth}
           />
         ))}

package/src/test-utils/helpers.ts

@@ -145,6 +145,7 @@ export const Selectors = {
   PAGINATION: {
     ROOT: "purpur-pagination",
     PAGE_SIZE_SELECT: "purpur-pagination-page-size-selector-select-select",
+    PAGE_BUTTON: (pageNumber: number) => `purpur-pagination-pages-page-${pageNumber}-button`,
   },
   SKELETON: "purpur-table-cell-skeleton",
 };
@@ -164,7 +165,7 @@ export const copy = {
   },
   exportDrawer: {
     bodyText: "Choose the format you want to export the table in.",
-    closeButtonText: "Close drawer",
+    closeButtonAriaLabel: "Close drawer",
     link: "Export as",
     title: "Export table",
   },

package/src/types.ts

@@ -190,7 +190,7 @@ export type WithEmptyTableProps = {
   /**
    * Icon to display in the empty table state.
    */
-  emptyTableIcon: React.ReactNode;
+  emptyTableIcon?: React.ReactNode;
 };
 
 export type WithoutEmptyTableProps = {

package/src/use-truncated-hook.tsx

@@ -1,66 +1,22 @@
-import { useEffect, useRef, useState } from "react";
-import { Cell, RowData } from "@tanstack/react-table";
+import { useRef, useState } from "react";
 
-const useTruncatedTooltip = <TData extends RowData>(cell: Cell<TData, unknown> | undefined) => {
-  const divRef = useRef<HTMLParagraphElement>(null);
-  const [isTruncated, setIsTruncated] = useState(false);
-  const timeoutIdRef = useRef<NodeJS.Timeout | undefined>(undefined);
+const useTruncatedTooltip = () => {
   const [showPopover, setShowPopover] = useState(false);
-
-  const debounce = (func: (...args: unknown[]) => void, delay: number) => {
-    let timeoutId: NodeJS.Timeout;
-    const debouncedFunction = (...args: unknown[]) => {
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout(() => func.apply(this, args), delay);
-    };
-    return {
-      debouncedFunction,
-      get timeoutId() {
-        return timeoutId;
-      },
-    };
-  };
-
-  useEffect(() => {
-    if (!cell) {
-      return;
-    }
-
-    const { debouncedFunction: checkTruncation, timeoutId } = debounce(() => {
-      if (divRef.current && cell) {
-        const pEl = divRef.current.querySelector("p");
-        if (pEl) {
-          setIsTruncated(pEl.scrollWidth > cell.column.getSize());
-        }
-      }
-    }, 100); // Adjust debounce delay as needed
-
-    checkTruncation();
-    timeoutIdRef.current = timeoutId;
-
-    return () => {
-      clearTimeout(timeoutIdRef.current);
-    };
-  }, [cell]);
-
-  useEffect(() => {
-    if (divRef.current && cell) {
-      if (divRef.current.textContent) {
-        const pEl = divRef.current.querySelector("p");
-        if (pEl) {
-          setIsTruncated(pEl.scrollWidth > cell.column.getSize());
-        }
-        const aEl = divRef.current.querySelector("a");
-        if (aEl) {
-          setIsTruncated(aEl.scrollWidth > cell.column.getSize());
-        }
-      }
-    }
-  }, [divRef, cell, isTruncated]);
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
   const onMouseEnter = () => {
-    if (isTruncated) {
-      setShowPopover(true);
+    if (containerRef.current) {
+      const contentElement: HTMLLinkElement | HTMLParagraphElement | null =
+        containerRef.current.querySelector("a, p"); // Find "a" or "p" tag
+      if (contentElement) {
+        const containerWidth = containerRef.current.clientWidth;
+        const contentWidth =
+          contentElement.tagName.toLowerCase() === "a"
+            ? contentElement.offsetWidth
+            : contentElement.scrollWidth;
+
+        setShowPopover(contentWidth > containerWidth);
+      }
     }
   };
 
@@ -68,7 +24,7 @@ const useTruncatedTooltip = <TData extends RowData>(cell: Cell<TData, unknown> |
     setShowPopover(false);
   };
 
-  return { divRef, onMouseEnter, onMouseLeave, showPopover };
+  return { showPopover, containerRef, onMouseEnter, onMouseLeave };
 };
 
 export default useTruncatedTooltip;