@dmsi/wedgekit-react 0.0.172 → 0.0.173

package/dist/components/index.js

@@ -3,7 +3,7 @@ import {
 } from "../chunk-3WNXMCZV.js";
 import {
   Select
-} from "../chunk-XH65MD2C.js";
+} from "../chunk-KADNOKNW.js";
 import {
   Checkbox
 } from "../chunk-WFQEE2OO.js";
@@ -12,29 +12,29 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-O4JGGMFE.js";
+} from "../chunk-TB7VTSDP.js";
+import {
+  MenuOption
+} from "../chunk-FFU6FB3K.js";
 import {
   Menu
 } from "../chunk-UBU6IJML.js";
 import "../chunk-5GUW4DUY.js";
-import {
-  MenuOption
-} from "../chunk-FFU6FB3K.js";
 import {
   useInfiniteScroll
 } from "../chunk-WNQ53SVY.js";
+import "../chunk-WVUIIBRR.js";
 import "../chunk-6LN6QT6M.js";
 import {
   Search
-} from "../chunk-PMBEIP24.js";
+} from "../chunk-IDSFWKOR.js";
 import {
   Input
-} from "../chunk-4T3DRGLF.js";
-import "../chunk-5UH6QUFB.js";
+} from "../chunk-MVGOAMTP.js";
 import {
   Label
 } from "../chunk-JWCT72WR.js";
-import "../chunk-WVUIIBRR.js";
+import "../chunk-5UH6QUFB.js";
 import {
   Subheader
 } from "../chunk-CYZL57LH.js";
@@ -48,12 +48,12 @@ import {
 import {
   Paragraph
 } from "../chunk-HVI3CL7Y.js";
-import {
-  Button
-} from "../chunk-FKMKHLQH.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
+import {
+  Button
+} from "../chunk-FKMKHLQH.js";
 import {
   componentGap,
   componentPadding
@@ -170,7 +170,7 @@ function TableBodyRow({
           /* @__PURE__ */ jsx2("td", { style: { display: "flex", width: virtualPaddingLeft } })
         ) : null,
         columns.map((column) => {
-          var _a2, _b;
+          var _a2, _b, _c;
           const cell = locked ? column : visibleCells[column.index];
           if (!cell) {
             return;
@@ -185,7 +185,7 @@ function TableBodyRow({
               className: clsx2({
                 "justify-end": typeof cellValue === "number"
               }),
-              width: (_b = cell.column.columnDef.meta) == null ? void 0 : _b.headerWidth,
+              width: (_c = (_b = cell.column.columnDef.meta) == null ? void 0 : _b.headerWidth) != null ? _c : `${cell.column.getSize()}px`,
               children: /* @__PURE__ */ jsx2(
                 Tooltip,
                 {
@@ -412,68 +412,75 @@ function PinnedColumns(_a) {
       "data-testid": pinnedTestId,
       children: [
         /* @__PURE__ */ jsx5("thead", { className: "sticky top-0 z-20 grid", children: headerGroups.map((headerGroup) => {
-          return /* @__PURE__ */ jsx5("tr", { "data-testid": pinnedTestId ? `${pinnedTestId}-header-row-${headerGroup.id}` : void 0, className: "flex w-full", children: headerGroup.headers.map((header) => {
-            var _a3, _b2, _c;
-            if (!header) {
-              return;
-            }
-            if (typeof header.column.columnDef.header === "string") {
-              const customHeaderWidth = (_a3 = header.column.columnDef.meta) == null ? void 0 : _a3.headerWidth;
-              return /* @__PURE__ */ jsxs3(
-                DataCellHeader,
-                {
-                  locked: true,
-                  testid: pinnedTestId ? `${pinnedTestId}-header-${header.id}` : void 0,
-                  header,
-                  center: centerHeader,
-                  width: customHeaderWidth,
-                  className: clsx4(
-                    header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
-                    "group"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx5(Subheader, { tall: true, children: header.column.columnDef.header }),
-                    getSortIcon(header.column.getIsSorted()),
-                    !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
-                      header.column.getNextSortingOrder(),
-                      true
-                    ),
-                    header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ jsx5(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
-                    !((_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked) && /* @__PURE__ */ jsx5(
-                      "div",
-                      {
-                        onDoubleClick: (e) => {
-                          e.stopPropagation();
-                          header.column.resetSize();
-                        },
-                        onMouseDown: (e) => {
-                          e.stopPropagation();
-                          header.getResizeHandler()(e);
-                        },
-                        onTouchStart: (e) => {
-                          e.stopPropagation();
-                          header.getResizeHandler()(e);
-                        },
-                        className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
-                      }
-                    )
-                  ]
-                },
-                header.id
-              );
-            }
-            return /* @__PURE__ */ jsx5(React2.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ jsx5(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ jsx5(
-              Checkbox,
-              {
-                checked: allSelectedAcrossPages,
-                indeterminate: someSelectedAcrossPages,
-                onChange: toggleSelectAllAcrossPages
-              }
-            ) }) : flexRender2(
-              header.column.columnDef.header,
-              header.getContext()
-            ) }, header.id);
-          }) }, headerGroup.id);
+          return /* @__PURE__ */ jsx5(
+            "tr",
+            {
+              "data-testid": pinnedTestId ? `${pinnedTestId}-header-row-${headerGroup.id}` : void 0,
+              className: "flex w-full",
+              children: headerGroup.headers.map((header) => {
+                var _a3, _b2, _c, _d;
+                if (!header) {
+                  return;
+                }
+                if (typeof header.column.columnDef.header === "string") {
+                  return /* @__PURE__ */ jsxs3(
+                    DataCellHeader,
+                    {
+                      locked: true,
+                      testid: pinnedTestId ? `${pinnedTestId}-header-${header.id}` : void 0,
+                      header,
+                      center: centerHeader,
+                      width: (_b2 = (_a3 = header.column.columnDef.meta) == null ? void 0 : _a3.headerWidth) != null ? _b2 : `${header.column.getSize()}px`,
+                      className: clsx4(
+                        header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
+                        "group"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx5(Subheader, { tall: true, children: header.column.columnDef.header }),
+                        getSortIcon(header.column.getIsSorted()),
+                        !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
+                          header.column.getNextSortingOrder(),
+                          true
+                        ),
+                        header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ jsx5(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                        !((_c = header.column.columnDef.meta) == null ? void 0 : _c.locked) && /* @__PURE__ */ jsx5(
+                          "div",
+                          {
+                            onDoubleClick: (e) => {
+                              e.stopPropagation();
+                              header.column.resetSize();
+                            },
+                            onMouseDown: (e) => {
+                              e.stopPropagation();
+                              header.getResizeHandler()(e);
+                            },
+                            onTouchStart: (e) => {
+                              e.stopPropagation();
+                              header.getResizeHandler()(e);
+                            },
+                            className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
+                          }
+                        )
+                      ]
+                    },
+                    header.id
+                  );
+                }
+                return /* @__PURE__ */ jsx5(React2.Fragment, { children: ((_d = header.column.columnDef.meta) == null ? void 0 : _d.checkbox) ? /* @__PURE__ */ jsx5(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ jsx5(
+                  Checkbox,
+                  {
+                    checked: allSelectedAcrossPages,
+                    indeterminate: someSelectedAcrossPages,
+                    onChange: toggleSelectAllAcrossPages
+                  }
+                ) }) : flexRender2(
+                  header.column.columnDef.header,
+                  header.getContext()
+                ) }, header.id);
+              })
+            },
+            headerGroup.id
+          );
         }) }),
         /* @__PURE__ */ jsx5(
           TableBody,
@@ -535,7 +542,7 @@ function ColumnSelectorHeaderCell({
     {
       id,
       testid,
-      width: "48",
+      width: "48px",
       type: "header",
       color: "text-secondary-normal",
       ref,
@@ -781,7 +788,7 @@ function DataGrid({
     //estimate width of each column for accurate scrollbar dragging
     getScrollElement: () => containerRef.current,
     horizontal: true,
-    overscan: 3
+    overscan: 8
     //how many columns to render on each side off screen each way
   });
   const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -836,118 +843,126 @@ function DataGrid({
                         }
                       ),
                       /* @__PURE__ */ jsxs5("table", { className: "flex-1 flex flex-col min-h-min", children: [
-                        /* @__PURE__ */ jsx8("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5("tr", { "data-testid": testid ? `${testid}-header-row-${headerGroup.id}` : void 0, className: "flex w-full", children: [
-                          virtualPaddingLeft ? (
-                            // fake empty column to the left for virtualization scroll padding
-                            /* @__PURE__ */ jsx8(
-                              "th",
-                              {
-                                style: { display: "flex", width: virtualPaddingLeft }
-                              }
-                            )
-                          ) : null,
-                          virtualColumns.map((virtualColumn) => {
-                            var _a2, _b2, _c2, _d2;
-                            const header = headerGroup.headers[virtualColumn.index];
-                            if (!header) {
-                              return;
-                            }
-                            if (typeof header.column.columnDef.header === "string") {
-                              const customHeaderWidth = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth;
-                              const cellValue = (_b2 = table.getRowModel().rows[0]) == null ? void 0 : _b2.getValue(header.column.id);
-                              return /* @__PURE__ */ jsxs5(
-                                DraggableCellHeader,
-                                {
-                                  id: id ? `${id}-header-${header.id}` : void 0,
-                                  testid: testid ? `${testid}-header-${header.id}` : void 0,
-                                  header,
-                                  locked: (_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked,
-                                  center: centerHeader,
-                                  width: customHeaderWidth,
-                                  className: clsx5(
-                                    header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
-                                    "group",
+                        /* @__PURE__ */ jsx8("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs5(
+                          "tr",
+                          {
+                            "data-testid": testid ? `${testid}-header-row-${headerGroup.id}` : void 0,
+                            className: "flex w-full",
+                            children: [
+                              virtualPaddingLeft ? (
+                                // fake empty column to the left for virtualization scroll padding
+                                /* @__PURE__ */ jsx8(
+                                  "th",
+                                  {
+                                    style: { display: "flex", width: virtualPaddingLeft }
+                                  }
+                                )
+                              ) : null,
+                              virtualColumns.map((virtualColumn) => {
+                                var _a2, _b2, _c2, _d2;
+                                const header = headerGroup.headers[virtualColumn.index];
+                                if (!header) {
+                                  return;
+                                }
+                                if (typeof header.column.columnDef.header === "string") {
+                                  const customHeaderWidth = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth;
+                                  const cellValue = (_b2 = table.getRowModel().rows[0]) == null ? void 0 : _b2.getValue(header.column.id);
+                                  return /* @__PURE__ */ jsxs5(
+                                    DraggableCellHeader,
                                     {
-                                      "justify-end": typeof cellValue === "number"
-                                    }
-                                  ),
-                                  useMenuDefaultMinWidth,
-                                  children: [
-                                    typeof cellValue !== "number" && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
-                                    getSortIcon(header.column.getIsSorted()),
-                                    !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
-                                      header.column.getNextSortingOrder(),
-                                      true
-                                    ),
-                                    header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
-                                    typeof cellValue === "number" && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
-                                    /* @__PURE__ */ jsx8(
-                                      "div",
+                                      id: id ? `${id}-header-${header.id}` : void 0,
+                                      testid: testid ? `${testid}-header-${header.id}` : void 0,
+                                      header,
+                                      locked: (_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked,
+                                      center: centerHeader,
+                                      width: customHeaderWidth,
+                                      className: clsx5(
+                                        header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
+                                        "group",
+                                        {
+                                          "justify-end": typeof cellValue === "number"
+                                        }
+                                      ),
+                                      useMenuDefaultMinWidth,
+                                      children: [
+                                        typeof cellValue !== "number" && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
+                                        getSortIcon(header.column.getIsSorted()),
+                                        !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
+                                          header.column.getNextSortingOrder(),
+                                          true
+                                        ),
+                                        header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                                        typeof cellValue === "number" && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
+                                        /* @__PURE__ */ jsx8(
+                                          "div",
+                                          {
+                                            onDoubleClick: (e) => {
+                                              e.stopPropagation();
+                                              header.column.resetSize();
+                                            },
+                                            onMouseDown: (e) => {
+                                              e.stopPropagation();
+                                              header.getResizeHandler()(e);
+                                            },
+                                            onTouchStart: (e) => {
+                                              e.stopPropagation();
+                                              header.getResizeHandler()(e);
+                                            },
+                                            className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
+                                          }
+                                        )
+                                      ]
+                                    },
+                                    header.id
+                                  );
+                                }
+                                return /* @__PURE__ */ jsx8(React3.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ jsx8(
+                                  DataGridCell,
+                                  {
+                                    id: id ? `${id}-header-${header.id}` : void 0,
+                                    testid: testid ? `${testid}-header-${header.id}` : void 0,
+                                    type: "header",
+                                    component: "checkbox",
+                                    locked: true,
+                                    children: /* @__PURE__ */ jsx8(
+                                      Checkbox,
                                       {
-                                        onDoubleClick: (e) => {
-                                          e.stopPropagation();
-                                          header.column.resetSize();
-                                        },
-                                        onMouseDown: (e) => {
-                                          e.stopPropagation();
-                                          header.getResizeHandler()(e);
-                                        },
-                                        onTouchStart: (e) => {
-                                          e.stopPropagation();
-                                          header.getResizeHandler()(e);
-                                        },
-                                        className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
+                                        id: id ? `${id}-select-all-checkbox` : void 0,
+                                        testid: testid ? `${testid}-select-all-checkbox` : void 0,
+                                        checked: allSelectedAcrossPages,
+                                        indeterminate: someSelectedAcrossPages,
+                                        onChange: toggleSelectAllAcrossPages
                                       }
                                     )
-                                  ]
-                                },
-                                header.id
-                              );
-                            }
-                            return /* @__PURE__ */ jsx8(React3.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ jsx8(
-                              DataGridCell,
-                              {
-                                id: id ? `${id}-header-${header.id}` : void 0,
-                                testid: testid ? `${testid}-header-${header.id}` : void 0,
-                                type: "header",
-                                component: "checkbox",
-                                locked: true,
-                                children: /* @__PURE__ */ jsx8(
-                                  Checkbox,
+                                  }
+                                ) : flexRender3(
+                                  header.column.columnDef.header,
+                                  header.getContext()
+                                ) }, header.id);
+                              }),
+                              virtualPaddingRight ? (
+                                //fake empty column to the right for virtualization scroll padding
+                                /* @__PURE__ */ jsx8(
+                                  "th",
                                   {
-                                    id: id ? `${id}-select-all-checkbox` : void 0,
-                                    testid: testid ? `${testid}-select-all-checkbox` : void 0,
-                                    checked: allSelectedAcrossPages,
-                                    indeterminate: someSelectedAcrossPages,
-                                    onChange: toggleSelectAllAcrossPages
+                                    style: { display: "flex", width: virtualPaddingRight }
                                   }
                                 )
-                              }
-                            ) : flexRender3(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            ) }, header.id);
-                          }),
-                          virtualPaddingRight ? (
-                            //fake empty column to the right for virtualization scroll padding
-                            /* @__PURE__ */ jsx8(
-                              "th",
-                              {
-                                style: { display: "flex", width: virtualPaddingRight }
-                              }
-                            )
-                          ) : null,
-                          enableColumnSelector && /* @__PURE__ */ jsx8(
-                            ColumnSelectorHeaderCell,
-                            {
-                              id: id ? `${id}-column-selector` : void 0,
-                              testid: testid ? `${testid}-column-selector` : void 0,
-                              table,
-                              toggleColumnVisibility,
-                              resetColumnVisibility
-                            }
-                          )
-                        ] }, headerGroup.id)) }),
+                              ) : null,
+                              enableColumnSelector && /* @__PURE__ */ jsx8(
+                                ColumnSelectorHeaderCell,
+                                {
+                                  id: id ? `${id}-column-selector` : void 0,
+                                  testid: testid ? `${testid}-column-selector` : void 0,
+                                  table,
+                                  toggleColumnVisibility,
+                                  resetColumnVisibility
+                                }
+                              )
+                            ]
+                          },
+                          headerGroup.id
+                        )) }),
                         /* @__PURE__ */ jsx8(
                           TableBody,
                           {
@@ -1076,7 +1091,13 @@ function DataGrid({
                       )
                     ] })
                   ] }),
-                  status && /* @__PURE__ */ jsx8(Paragraph, { testid: testid ? `${testid}-status-text` : void 0, children: status })
+                  status && /* @__PURE__ */ jsx8(
+                    Paragraph,
+                    {
+                      testid: testid ? `${testid}-status-text` : void 0,
+                      children: status
+                    }
+                  )
                 ] })
               ]
             }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.172",
+  "version": "0.0.173",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx

@@ -23,7 +23,7 @@ export function ColumnSelectorHeaderCell<T>({
     <DataGridCell
       id={id}
       testid={testid}
-      width="48"
+      width="48px"
       type="header"
       color="text-secondary-normal"
       ref={ref}

package/src/components/DataGrid/PinnedColumns.tsx

@@ -50,24 +50,37 @@ export function PinnedColumns<TData>({
         <thead className="sticky top-0 z-20 grid">
           {headerGroups.map((headerGroup) => {
             return (
-              <tr key={headerGroup.id} data-testid={pinnedTestId ? `${pinnedTestId}-header-row-${headerGroup.id}` : undefined} className="flex w-full">
+              <tr
+                key={headerGroup.id}
+                data-testid={
+                  pinnedTestId
+                    ? `${pinnedTestId}-header-row-${headerGroup.id}`
+                    : undefined
+                }
+                className="flex w-full"
+              >
                 {headerGroup.headers.map((header) => {
                   if (!header) {
                     return;
                   }
 
                   if (typeof header.column.columnDef.header === "string") {
-                    const customHeaderWidth =
-                      header.column.columnDef.meta?.headerWidth;
-
                     return (
                       <DataCellHeader
                         locked
                         key={header.id}
-                        testid={pinnedTestId ? `${pinnedTestId}-header-${header.id}` : undefined}
+                        testid={
+                          pinnedTestId
+                            ? `${pinnedTestId}-header-${header.id}`
+                            : undefined
+                        }
                         header={header}
                         center={centerHeader}
-                        width={customHeaderWidth}
+                        width={
+                          (header.column.columnDef.meta?.headerWidth as
+                            | string
+                            | undefined) ?? `${header.column.getSize()}px`
+                        }
                         className={clsx(
                           header.column.getCanSort()
                             ? "cursor-pointer"

package/src/components/DataGrid/TableBody/TableBodyRow.tsx

@@ -100,12 +100,17 @@ export function TableBodyRow<T>({
           <CellElement
             key={cell.id}
             id={id ? `${id}-row-${row.id}-cell-${cell.id}` : undefined}
-            testid={testid ? `${testid}-row-${row.id}-cell-${cell.id}` : undefined}
+            testid={
+              testid ? `${testid}-row-${row.id}-cell-${cell.id}` : undefined
+            }
             cell={cell}
             className={clsx({
               "justify-end": typeof cellValue === "number",
             })}
-            width={cell.column.columnDef.meta?.headerWidth}
+            width={
+              (cell.column.columnDef.meta?.headerWidth as string | undefined) ??
+              `${cell.column.getSize()}px`
+            }
           >
             <Tooltip
               id={id ? `${id}-tooltip-${cell.id}` : undefined}