@dmsi/wedgekit-react 0.0.172 → 0.0.173

package/dist/components/index.cjs

@@ -1881,7 +1881,7 @@ function DataCellHeader(_a) {
     "testid",
     "useMenuDefaultMinWidth"
   ]);
-  var _a2;
+  var _a2, _b2, _c;
   const [showMenu, setShowMenu] = (0, import_react10.useState)(false);
   const [filter, setFilter] = (0, import_react10.useState)(
     (_a2 = header.column.getFilterValue()) != null ? _a2 : ""
@@ -1915,7 +1915,7 @@ function DataCellHeader(_a) {
   const style = __spreadValues({
     position: "relative",
     whiteSpace: "nowrap",
-    width: header.column.getSize(),
+    width: (_c = (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.headerWidth) != null ? _c : 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)",
     "--background-action-secondary-normal": "var(--color-text-brand-primary-normal)"
@@ -1952,8 +1952,8 @@ function DataCellHeader(_a) {
                   id: id ? `${id}-filter-option` : void 0,
                   testid: testid ? `${testid}-filter-option` : void 0
                 }, subMenuListeners), {
-                  subMenu: (_b2) => {
-                    var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
+                  subMenu: (_d) => {
+                    var _e = _d, { menuId, subMenuLevel } = _e, props2 = __objRest(_e, ["menuId", "subMenuLevel"]);
                     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                       Menu,
                       __spreadProps(__spreadValues({
@@ -2026,8 +2026,8 @@ function DataCellHeader(_a) {
                     setShowMenu(!showMenu);
                   }
                 }, subMenuListeners), {
-                  subMenu: (_d) => {
-                    var _e = _d, { menuId, subMenuLevel } = _e, props2 = __objRest(_e, ["menuId", "subMenuLevel"]);
+                  subMenu: (_f) => {
+                    var _g = _f, { menuId, subMenuLevel } = _g, props2 = __objRest(_g, ["menuId", "subMenuLevel"]);
                     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                       Menu,
                       __spreadProps(__spreadValues({}, props2), {
@@ -2115,6 +2115,7 @@ function DraggableCellHeader(_a) {
     "header",
     "children"
   ]);
+  var _a2, _b2;
   const { attributes, isDragging, listeners, setNodeRef, transform, node } = (0, import_sortable.useSortable)({
     id: header.column.id
   });
@@ -2125,7 +2126,7 @@ function DraggableCellHeader(_a) {
     transition: "width transform 0.2s ease-in-out",
     whiteSpace: "nowrap",
     zIndex: isDragging ? 1 : 0,
-    width: header.column.getSize(),
+    width: (_b2 = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth) != null ? _b2 : header.column.getSize(),
     "--color-text-primary-normal": "var(--color-action-000)",
     "--color-icon-on-action-primary-normal": "var(--color-action-000)",
     userSelect: "none"
@@ -2151,6 +2152,7 @@ function DragAlongCell(_a) {
     "cell",
     "children"
   ]);
+  var _a2, _b2, _c, _d;
   const { isDragging, setNodeRef, transform } = (0, import_sortable.useSortable)({
     id: cell.column.id
   });
@@ -2159,10 +2161,19 @@ function DragAlongCell(_a) {
     position: "relative",
     transform: CSS.Translate.toString(transform),
     transition: "width transform 0.2s ease-in-out",
-    width: cell.column.getSize(),
+    width: (_b2 = (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.headerWidth) != null ? _b2 : cell.column.getSize(),
     zIndex: isDragging ? 1 : 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    DataGridCell,
+    __spreadProps(__spreadValues({
+      style,
+      ref: setNodeRef,
+      width: (_d = (_c = cell.column.columnDef.meta) == null ? void 0 : _c.headerWidth) != null ? _d : `${cell.column.getSize()}px`
+    }, props), {
+      children
+    })
+  );
 }
 DragAlongCell.displayName = "DragAlongCell";
 
@@ -2254,7 +2265,7 @@ function TableBodyRow({
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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;
@@ -2269,7 +2280,7 @@ function TableBodyRow({
               className: (0, import_clsx10.default)({
                 "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__ */ (0, import_jsx_runtime10.jsx)(
                 Tooltip,
                 {
@@ -2496,68 +2507,75 @@ function PinnedColumns(_a) {
       "data-testid": pinnedTestId,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { className: "sticky top-0 z-20 grid", children: headerGroups.map((headerGroup) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsxs)(
-                DataCellHeader,
-                {
-                  locked: true,
-                  testid: pinnedTestId ? `${pinnedTestId}-header-${header.id}` : void 0,
-                  header,
-                  center: centerHeader,
-                  width: customHeaderWidth,
-                  className: (0, import_clsx12.default)(
-                    header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
-                    "group"
-                  ),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(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__ */ (0, import_jsx_runtime13.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
-                    !((_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                      "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__ */ (0, import_jsx_runtime13.jsx)(import_react12.default.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              Checkbox,
-              {
-                checked: allSelectedAcrossPages,
-                indeterminate: someSelectedAcrossPages,
-                onChange: toggleSelectAllAcrossPages
-              }
-            ) }) : (0, import_react_table2.flexRender)(
-              header.column.columnDef.header,
-              header.getContext()
-            ) }, header.id);
-          }) }, headerGroup.id);
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "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__ */ (0, import_jsx_runtime13.jsxs)(
+                    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: (0, import_clsx12.default)(
+                        header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
+                        "group"
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(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__ */ (0, import_jsx_runtime13.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                        !((_c = header.column.columnDef.meta) == null ? void 0 : _c.locked) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          "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__ */ (0, import_jsx_runtime13.jsx)(import_react12.default.Fragment, { children: ((_d = header.column.columnDef.meta) == null ? void 0 : _d.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  Checkbox,
+                  {
+                    checked: allSelectedAcrossPages,
+                    indeterminate: someSelectedAcrossPages,
+                    onChange: toggleSelectAllAcrossPages
+                  }
+                ) }) : (0, import_react_table2.flexRender)(
+                  header.column.columnDef.header,
+                  header.getContext()
+                ) }, header.id);
+              })
+            },
+            headerGroup.id
+          );
         }) }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           TableBody,
@@ -2619,7 +2637,7 @@ function ColumnSelectorHeaderCell({
     {
       id,
       testid,
-      width: "48",
+      width: "48px",
       type: "header",
       color: "text-secondary-normal",
       ref,
@@ -2865,7 +2883,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();
@@ -2920,118 +2938,126 @@ function DataGrid({
                         }
                       ),
                       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("table", { className: "flex-1 flex flex-col min-h-min", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("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__ */ (0, import_jsx_runtime16.jsx)(
-                              "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__ */ (0, import_jsx_runtime16.jsxs)(
-                                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: (0, import_clsx13.default)(
-                                    header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
-                                    "group",
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                          "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__ */ (0, import_jsx_runtime16.jsx)(
+                                  "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__ */ (0, import_jsx_runtime16.jsxs)(
+                                    DraggableCellHeader,
                                     {
-                                      "justify-end": typeof cellValue === "number"
-                                    }
-                                  ),
-                                  useMenuDefaultMinWidth,
-                                  children: [
-                                    typeof cellValue !== "number" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(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__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
-                                    typeof cellValue === "number" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                                      "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: (0, import_clsx13.default)(
+                                        header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
+                                        "group",
+                                        {
+                                          "justify-end": typeof cellValue === "number"
+                                        }
+                                      ),
+                                      useMenuDefaultMinWidth,
+                                      children: [
+                                        typeof cellValue !== "number" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(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__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                                        typeof cellValue === "number" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                          "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__ */ (0, import_jsx_runtime16.jsx)(import_react15.default.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                  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__ */ (0, import_jsx_runtime16.jsx)(
+                                      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__ */ (0, import_jsx_runtime16.jsx)(import_react15.default.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                              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__ */ (0, import_jsx_runtime16.jsx)(
-                                  Checkbox,
+                                  }
+                                ) : (0, import_react_table3.flexRender)(
+                                  header.column.columnDef.header,
+                                  header.getContext()
+                                ) }, header.id);
+                              }),
+                              virtualPaddingRight ? (
+                                //fake empty column to the right for virtualization scroll padding
+                                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                  "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 }
                                   }
                                 )
-                              }
-                            ) : (0, import_react_table3.flexRender)(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            ) }, header.id);
-                          }),
-                          virtualPaddingRight ? (
-                            //fake empty column to the right for virtualization scroll padding
-                            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                              "th",
-                              {
-                                style: { display: "flex", width: virtualPaddingRight }
-                              }
-                            )
-                          ) : null,
-                          enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                            ColumnSelectorHeaderCell,
-                            {
-                              id: id ? `${id}-column-selector` : void 0,
-                              testid: testid ? `${testid}-column-selector` : void 0,
-                              table,
-                              toggleColumnVisibility,
-                              resetColumnVisibility
-                            }
-                          )
-                        ] }, headerGroup.id)) }),
+                              ) : null,
+                              enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                ColumnSelectorHeaderCell,
+                                {
+                                  id: id ? `${id}-column-selector` : void 0,
+                                  testid: testid ? `${testid}-column-selector` : void 0,
+                                  table,
+                                  toggleColumnVisibility,
+                                  resetColumnVisibility
+                                }
+                              )
+                            ]
+                          },
+                          headerGroup.id
+                        )) }),
                         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                           TableBody,
                           {
@@ -3160,7 +3186,13 @@ function DataGrid({
                       )
                     ] })
                   ] }),
-                  status && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Paragraph, { testid: testid ? `${testid}-status-text` : void 0, children: status })
+                  status && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    Paragraph,
+                    {
+                      testid: testid ? `${testid}-status-text` : void 0,
+                      children: status
+                    }
+                  )
                 ] })
               ]
             }