@purpurds/table 7.10.1 → 7.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/table",
-  "version": "7.10.1",
+  "version": "7.12.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/table.cjs.js",
   "types": "./dist/table.d.ts",
@@ -17,22 +17,22 @@
   "dependencies": {
     "@tanstack/react-table": "~8.21.2",
     "classnames": "~2.5.0",
-    "@purpurds/badge": "7.10.1",
-    "@purpurds/button": "7.10.1",
-    "@purpurds/drawer": "7.10.1",
-    "@purpurds/cta-link": "7.10.1",
-    "@purpurds/icon": "7.10.1",
-    "@purpurds/link": "7.10.1",
-    "@purpurds/heading": "7.10.1",
-    "@purpurds/select": "7.10.1",
-    "@purpurds/toggle": "7.10.1",
-    "@purpurds/skeleton": "7.10.1",
-    "@purpurds/text-field": "7.10.1",
-    "@purpurds/checkbox": "7.10.1",
-    "@purpurds/paragraph": "7.10.1",
-    "@purpurds/tokens": "7.10.1",
-    "@purpurds/visually-hidden": "7.10.1",
-    "@purpurds/tooltip": "7.10.1"
+    "@purpurds/badge": "7.12.0",
+    "@purpurds/button": "7.12.0",
+    "@purpurds/checkbox": "7.12.0",
+    "@purpurds/cta-link": "7.12.0",
+    "@purpurds/drawer": "7.12.0",
+    "@purpurds/heading": "7.12.0",
+    "@purpurds/icon": "7.12.0",
+    "@purpurds/link": "7.12.0",
+    "@purpurds/paragraph": "7.12.0",
+    "@purpurds/select": "7.12.0",
+    "@purpurds/skeleton": "7.12.0",
+    "@purpurds/text-field": "7.12.0",
+    "@purpurds/toggle": "7.12.0",
+    "@purpurds/tokens": "7.12.0",
+    "@purpurds/tooltip": "7.12.0",
+    "@purpurds/visually-hidden": "7.12.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
@@ -56,13 +56,13 @@
     "vitest-axe": "~0.1.0",
     "vitest-canvas-mock": "~0.3.3",
     "vitest": "^3.1.2",
-    "@purpurds/autocomplete": "7.10.1",
-    "@purpurds/grid": "7.10.1",
-    "@purpurds/illustrative-icon": "7.10.1",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/label": "7.10.1",
-    "@purpurds/pagination": "7.10.1",
-    "@purpurds/listbox": "7.10.1"
+    "@purpurds/autocomplete": "7.12.0",
+    "@purpurds/grid": "7.12.0",
+    "@purpurds/illustrative-icon": "7.12.0",
+    "@purpurds/label": "7.12.0",
+    "@purpurds/listbox": "7.12.0",
+    "@purpurds/pagination": "7.12.0"
   },
   "scripts": {
     "build:dev": "vite",

package/src/table-export-drawer.tsx

@@ -19,6 +19,7 @@ export type TableExportDrawerProps = {
   copy: TableExportDrawerCopyProps;
   onExportData: (format: string) => void;
   setDrawerIsOpen: Dispatch<SetStateAction<boolean>>;
+  zIndex?: number;
 };
 
 const rootClassName = "purpur-table-export-drawer";
@@ -32,12 +33,13 @@ export const TableExportDrawer = ({
   copy,
   onExportData,
   setDrawerIsOpen,
+  zIndex,
 }: TableExportDrawerProps) => (
   <div id={id}>
     <Drawer data-testid={rootTestId} open={isOpen} onOpenChange={setDrawerIsOpen}>
       <Drawer.Content
         data-testid={`${rootTestId}-content`}
-        zIndex={6}
+        zIndex={zIndex}
         title={copy.title}
         bodyText={copy.bodyText}
         closeButtonAriaLabel={copy.closeButtonAriaLabel}

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

@@ -1,4 +1,5 @@
 .purpur-table-settings-drawer {
+  $root: &;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -18,7 +19,7 @@
     text-align: center;
   }
 
-  &__toggle {
+  #{$root}__toggle {
     justify-content: space-between;
     width: 100%;
   }

package/src/table-settings-drawer.tsx

@@ -46,6 +46,7 @@ export type TableSettingsDrawerProps<TData> = {
   enableRowSelection?: boolean;
   rowSelectionEnabled?: boolean;
   setRowSelectionEnabled?: React.Dispatch<React.SetStateAction<boolean>>;
+  zIndex?: number;
 };
 
 const rootClassName = "purpur-table-settings-drawer";
@@ -69,13 +70,14 @@ export const TableSettingsDrawer = <TData extends RowData>({
   enableRowSelection,
   rowSelectionEnabled,
   setRowSelectionEnabled,
+  zIndex,
 }: TableSettingsDrawerProps<TData>) => {
   return (
     <div id={id}>
       <Drawer data-testid={rootTestId} open={isDrawerOpen} onOpenChange={setDrawerIsOpen}>
         <Drawer.Content
           data-testid={`${rootTestId}-content`}
-          zIndex={6}
+          zIndex={zIndex}
           closeButtonAriaLabel={copy.buttons.closeDrawer}
           title={copy.title}
           footerContent={

package/src/table.tsx

@@ -74,6 +74,7 @@ export type TableProps<TData extends RowData> = {
   stickyHeaders?: boolean;
   stickyFirstColumn?: boolean;
   onRowsCountChange?: (rowsCount: number) => void;
+  drawerZIndex?: number;
 } & (WithToolbarProps | WithoutToolbarProps) &
   (WithSortingProps | WithoutSortingProps) &
   (WithActionBarProps | WithoutActionBarProps) &
@@ -118,6 +119,7 @@ export const Table = <TData extends RowData>({
   onPrimaryButtonClick,
   onSecondaryButtonClick,
   setShowOnlySelectedRows,
+  drawerZIndex = 6,
   ...props
 }: TableProps<TData>) => {
   const [selectedRowsCount, setSelectedRowsCount] = useState(0);
@@ -426,6 +428,7 @@ export const Table = <TData extends RowData>({
           enableRowSelection={Boolean(props.enableRowSelection)}
           rowSelectionEnabled={rowSelectionEnabled}
           setRowSelectionEnabled={setRowSelectionEnabled}
+          zIndex={drawerZIndex}
         />
       )}
       {Array.isArray(exportFormats) && exportDrawerCopy && (
@@ -436,6 +439,7 @@ export const Table = <TData extends RowData>({
           exportFormats={exportFormats}
           copy={exportDrawerCopy}
           onExportData={handleExportData}
+          zIndex={drawerZIndex}
         />
       )}
     </div>