@dmsi/wedgekit-react 0.0.172 → 0.0.173

package/src/components/DataGrid/index.tsx

@@ -299,7 +299,7 @@ export function DataGrid<T extends Record<string, unknown>>({
     estimateSize: (index) => visibleColumns[index].getSize(), //estimate width of each column for accurate scrollbar dragging
     getScrollElement: () => containerRef.current,
     horizontal: true,
-    overscan: 3, //how many columns to render on each side off screen each way
+    overscan: 8, //how many columns to render on each side off screen each way
   });
 
   const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -355,7 +355,15 @@ export function DataGrid<T extends Record<string, unknown>>({
             <table className="flex-1 flex flex-col min-h-min">
               <thead className="sticky top-0 z-10 grid">
                 {table.getCenterHeaderGroups().map((headerGroup) => (
-                  <tr data-testid={testid ? `${testid}-header-row-${headerGroup.id}` : undefined} key={headerGroup.id} className="flex w-full">
+                  <tr
+                    data-testid={
+                      testid
+                        ? `${testid}-header-row-${headerGroup.id}`
+                        : undefined
+                    }
+                    key={headerGroup.id}
+                    className="flex w-full"
+                  >
                     {virtualPaddingLeft ? (
                       // fake empty column to the left for virtualization scroll padding
                       <th
@@ -381,7 +389,11 @@ export function DataGrid<T extends Record<string, unknown>>({
                           <DraggableCellHeader
                             key={header.id}
                             id={id ? `${id}-header-${header.id}` : undefined}
-                            testid={testid ? `${testid}-header-${header.id}` : undefined}
+                            testid={
+                              testid
+                                ? `${testid}-header-${header.id}`
+                                : undefined
+                            }
                             header={header}
                             locked={header.column.columnDef.meta?.locked}
                             center={centerHeader}
@@ -446,16 +458,23 @@ export function DataGrid<T extends Record<string, unknown>>({
                           {header.column.columnDef.meta?.checkbox ? (
                             <DataGridCell
                               id={id ? `${id}-header-${header.id}` : undefined}
-                              testid={testid ? `${testid}-header-${header.id}` : undefined}
+                              testid={
+                                testid
+                                  ? `${testid}-header-${header.id}`
+                                  : undefined
+                              }
                               type="header"
-                              component="checkbox" locked
+                              component="checkbox"
+                              locked
                             >
                               <Checkbox
                                 id={
                                   id ? `${id}-select-all-checkbox` : undefined
                                 }
                                 testid={
-                                  testid ? `${testid}-select-all-checkbox` : undefined
+                                  testid
+                                    ? `${testid}-select-all-checkbox`
+                                    : undefined
                                 }
                                 checked={allSelectedAcrossPages}
                                 indeterminate={someSelectedAcrossPages}
@@ -481,7 +500,9 @@ export function DataGrid<T extends Record<string, unknown>>({
                     {enableColumnSelector && (
                       <ColumnSelectorHeaderCell
                         id={id ? `${id}-column-selector` : undefined}
-                        testid={testid ? `${testid}-column-selector` : undefined}
+                        testid={
+                          testid ? `${testid}-column-selector` : undefined
+                        }
                         table={table}
                         toggleColumnVisibility={toggleColumnVisibility}
                         resetColumnVisibility={resetColumnVisibility}
@@ -554,7 +575,9 @@ export function DataGrid<T extends Record<string, unknown>>({
                         <Menu
                           {...props}
                           id={id ? `${id}-pagesize-menu` : undefined}
-                          testid={testid ? `${testid}-pagesize-menu` : undefined}
+                          testid={
+                            testid ? `${testid}-pagesize-menu` : undefined
+                          }
                         >
                           {PAGE_SIZE_OPTIONS.map((option) => (
                             <MenuOption
@@ -616,7 +639,13 @@ export function DataGrid<T extends Record<string, unknown>>({
                 </div>
               )}
 
-              {status && <Paragraph testid={testid ? `${testid}-status-text` : undefined}>{status}</Paragraph>}
+              {status && (
+                <Paragraph
+                  testid={testid ? `${testid}-status-text` : undefined}
+                >
+                  {status}
+                </Paragraph>
+              )}
             </div>
           )}
         </div>

package/src/components/DataGridCell.tsx

@@ -241,6 +241,8 @@ export function DataCellHeader<T>({
     predeterminedPinned.current = [...left, ...right].includes(
       header.column.id,
     );
+    // header is stable for the lifetime of the header cell
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -251,12 +253,14 @@ export function DataCellHeader<T>({
     return () => {
       clearTimeout(handler);
     };
+    // We only want to react to filter changes; header.column methods are stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filter]);
 
   const style: CSSProperties = {
     position: "relative",
     whiteSpace: "nowrap",
-    width: header.column.getSize(),
+    width: header.column.columnDef.meta?.headerWidth ?? header.column.getSize(),
     "--color-text-primary-normal": "var(--color-text-brand-primary-normal)",
     "--color-icon-on-action-primary-normal":
       "var(--color-text-brand-primary-normal)",
@@ -466,7 +470,7 @@ export function DraggableCellHeader<T extends Record<string, any>>({
     transition: "width transform 0.2s ease-in-out",
     whiteSpace: "nowrap",
     zIndex: isDragging ? 1 : 0,
-    width: header.column.getSize(),
+    width: header.column.columnDef.meta?.headerWidth ?? header.column.getSize(),
     "--color-text-primary-normal": "var(--color-action-000)",
     "--color-icon-on-action-primary-normal": "var(--color-action-000)",
     userSelect: "none",
@@ -506,12 +510,20 @@ export function DragAlongCell<T extends RowData, TValue>({
     position: "relative",
     transform: CSS.Translate.toString(transform),
     transition: "width transform 0.2s ease-in-out",
-    width: cell.column.getSize(),
+    width: cell.column.columnDef.meta?.headerWidth ?? cell.column.getSize(),
     zIndex: isDragging ? 1 : 0,
   };
 
   return (
-    <DataGridCell style={style} ref={setNodeRef} {...props}>
+    <DataGridCell
+      style={style}
+      ref={setNodeRef}
+      width={
+        (cell.column.columnDef.meta?.headerWidth as string | undefined) ??
+        `${cell.column.getSize()}px`
+      }
+      {...props}
+    >
       {children}
     </DataGridCell>
   );

package/dist/{chunk-4T3DRGLF.js → chunk-MVGOAMTP.js}

@@ -1,11 +1,11 @@
+import {
+  Label
+} from "./chunk-JWCT72WR.js";
 import {
   formatCurrencyDisplay,
   formatDecimalValue,
   getDecimalPlaceholder
 } from "./chunk-5UH6QUFB.js";
-import {
-  Label
-} from "./chunk-JWCT72WR.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";

package/dist/{chunk-C4JGTH6G.js → chunk-T7NDKJDP.js}

@@ -1,9 +1,9 @@
-import {
-  Button
-} from "./chunk-FKMKHLQH.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";
+import {
+  Button
+} from "./chunk-FKMKHLQH.js";
 import {
   layoutGroupGap,
   layoutPaddding

package/dist/{chunk-LM5MKBPM.js → chunk-UGNB32SL.js}

@@ -1,12 +1,12 @@
 import {
   Label
 } from "./chunk-JWCT72WR.js";
-import {
-  Button
-} from "./chunk-FKMKHLQH.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";
+import {
+  Button
+} from "./chunk-FKMKHLQH.js";
 import {
   baseTransition,
   componentGap,

package/dist/{chunk-ZGFQN47L.js → chunk-ZR4E5A43.js}

@@ -1,9 +1,9 @@
-import {
-  Button
-} from "./chunk-FKMKHLQH.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";
+import {
+  Button
+} from "./chunk-FKMKHLQH.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-MJKBQSNI.js → chunk-ZSKLCKIR.js}

@@ -1,12 +1,12 @@
 import {
   Heading2
 } from "./chunk-AZ7LVLOK.js";
-import {
-  Button
-} from "./chunk-FKMKHLQH.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";
+import {
+  Button
+} from "./chunk-FKMKHLQH.js";
 import {
   layoutGroupGap,
   layoutPaddding