@dmsi/wedgekit-react 0.0.179 → 0.0.181

package/dist/components/index.cjs

@@ -2206,7 +2206,7 @@ function getSortIcon(sort, nextSort = false) {
 }
 
 // src/components/DataGrid/PinnedColumns.tsx
-var import_react12 = __toESM(require("react"), 1);
+var import_react14 = __toESM(require("react"), 1);
 
 // src/components/DataGrid/TableBody/index.tsx
 var import_react_virtual = require("@tanstack/react-virtual");
@@ -2474,139 +2474,21 @@ function TableBody({
   );
 }
 
-// src/components/DataGrid/PinnedColumns.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-function PinnedColumns(_a) {
-  var _b = _a, {
-    pinDirection = "left",
-    table,
-    centerHeader,
-    allSelectedAcrossPages,
-    someSelectedAcrossPages,
-    toggleSelectAllAcrossPages,
-    testid
-  } = _b, props = __objRest(_b, [
-    "pinDirection",
-    "table",
-    "centerHeader",
-    "allSelectedAcrossPages",
-    "someSelectedAcrossPages",
-    "toggleSelectAllAcrossPages",
-    "testid"
-  ]);
-  var _a2;
-  const headerGroups = pinDirection === "left" ? table.getLeftHeaderGroups() : table.getRightHeaderGroups();
-  const pinnedTestId = testid ? `${pinDirection}-pinned-${testid}` : void 0;
-  return ((_a2 = headerGroups[0]) == null ? void 0 : _a2.headers.length) > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-    "table",
-    {
-      className: (0, import_clsx12.default)(
-        "flex flex-col min-h-min sticky z-20",
-        pinDirection === "left" ? "left-0" : "right-0"
-      ),
-      "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, _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,
-          __spreadProps(__spreadValues({
-            testid: pinnedTestId
-          }, props), {
-            table,
-            locked: true,
-            pinDirection
-          })
-        )
-      ]
-    }
-  );
-}
-
 // src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx
-var import_react14 = require("react");
+var import_react13 = require("react");
 
 // src/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.tsx
-var import_react13 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function ColumnSelectorMenuOption({
   id,
   testid,
   column,
   toggleColumnVisibility
 }) {
-  const [isVisible, setIsVisible] = (0, import_react13.useState)(column.getIsVisible());
+  const [isVisible, setIsVisible] = (0, import_react12.useState)(column.getIsVisible());
   const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuOption, { id, testid, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MenuOption, { id, testid, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     Checkbox,
     {
       id: id ? `${id}-checkbox` : void 0,
@@ -2622,7 +2504,7 @@ function ColumnSelectorMenuOption({
 }
 
 // src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function ColumnSelectorHeaderCell({
   id,
   testid,
@@ -2630,9 +2512,9 @@ function ColumnSelectorHeaderCell({
   toggleColumnVisibility,
   resetColumnVisibility
 }) {
-  const ref = (0, import_react14.useRef)(null);
-  const [show, setShow] = (0, import_react14.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  const ref = (0, import_react13.useRef)(null);
+  const [show, setShow] = (0, import_react13.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     DataGridCell,
     {
       id,
@@ -2642,7 +2524,7 @@ function ColumnSelectorHeaderCell({
       color: "text-secondary-normal",
       ref,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Button,
           {
             id: id ? `${id}-button` : void 0,
@@ -2650,10 +2532,10 @@ function ColumnSelectorHeaderCell({
             onClick: () => setShow((prev) => !prev),
             variant: "navigation",
             iconOnly: true,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "tune" })
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "tune" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
           Menu,
           {
             id: id ? `${id}-menu` : void 0,
@@ -2664,7 +2546,7 @@ function ColumnSelectorHeaderCell({
             setShow,
             calculateMinMaxHeight: true,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 Button,
                 {
                   id: id ? `${id}-reset-button` : void 0,
@@ -2680,7 +2562,7 @@ function ColumnSelectorHeaderCell({
               table.getAllColumns().filter((x) => {
                 var _a;
                 return (_a = x.columnDef.meta) == null ? void 0 : _a.inVisibilityMenu;
-              }).map((column) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              }).map((column) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 ColumnSelectorMenuOption,
                 {
                   id: id ? `${id}-option-${column.id}` : void 0,
@@ -2698,6 +2580,146 @@ function ColumnSelectorHeaderCell({
   );
 }
 
+// src/components/DataGrid/PinnedColumns.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function PinnedColumns(_a) {
+  var _b = _a, {
+    id,
+    pinDirection = "left",
+    table,
+    centerHeader,
+    allSelectedAcrossPages,
+    someSelectedAcrossPages,
+    toggleSelectAllAcrossPages,
+    testid,
+    enableColumnSelector,
+    toggleColumnVisibility,
+    resetColumnVisibility
+  } = _b, props = __objRest(_b, [
+    "id",
+    "pinDirection",
+    "table",
+    "centerHeader",
+    "allSelectedAcrossPages",
+    "someSelectedAcrossPages",
+    "toggleSelectAllAcrossPages",
+    "testid",
+    "enableColumnSelector",
+    "toggleColumnVisibility",
+    "resetColumnVisibility"
+  ]);
+  var _a2;
+  const headerGroups = pinDirection === "left" ? table.getLeftHeaderGroups() : table.getRightHeaderGroups();
+  const pinnedTestId = testid ? `${pinDirection}-pinned-${testid}` : void 0;
+  const hasAnyHeaders = ((_a2 = headerGroups[0]) == null ? void 0 : _a2.headers.length) > 0;
+  if (!hasAnyHeaders && !enableColumnSelector) return;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "table",
+    {
+      className: (0, import_clsx12.default)(
+        "flex flex-col min-h-min sticky z-20",
+        pinDirection === "left" ? "left-0" : "right-0"
+      ),
+      "data-testid": pinnedTestId,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { className: "sticky top-0 z-20 grid", children: headerGroups.map((headerGroup) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            "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_runtime15.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_runtime15.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_runtime15.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                          !((_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked) && /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)(import_react14.default.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    Checkbox,
+                    {
+                      checked: allSelectedAcrossPages,
+                      indeterminate: someSelectedAcrossPages,
+                      onChange: toggleSelectAllAcrossPages
+                    }
+                  ) }) : (0, import_react_table2.flexRender)(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  ) }, header.id);
+                }),
+                enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  ColumnSelectorHeaderCell,
+                  {
+                    id: id ? `${id}-column-selector` : void 0,
+                    testid: testid ? `${testid}-column-selector` : void 0,
+                    table,
+                    toggleColumnVisibility: toggleColumnVisibility != null ? toggleColumnVisibility : () => {
+                    },
+                    resetColumnVisibility: resetColumnVisibility != null ? resetColumnVisibility : () => {
+                    }
+                  }
+                )
+              ]
+            },
+            headerGroup.id
+          );
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          TableBody,
+          __spreadProps(__spreadValues({
+            testid: pinnedTestId
+          }, props), {
+            table,
+            locked: true,
+            pinDirection
+          })
+        )
+      ]
+    }
+  );
+}
+
 // src/components/DataGrid/index.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 35];
@@ -2933,8 +2955,7 @@ function DataGrid({
                           pagination,
                           isLoadingMore,
                           hasMore,
-                          showFilterRow,
-                          enableColumnSelector
+                          showFilterRow
                         }
                       ),
                       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("table", { className: "flex-1 flex flex-col min-h-min", children: [
@@ -3043,17 +3064,7 @@ function DataGrid({
                                     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
-                                }
-                              )
+                              ) : null
                             ]
                           },
                           headerGroup.id
@@ -3079,6 +3090,10 @@ function DataGrid({
                       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                         PinnedColumns,
                         {
+                          id,
+                          enableColumnSelector,
+                          toggleColumnVisibility,
+                          resetColumnVisibility,
                           testid,
                           pinDirection: "right",
                           table,
@@ -3086,8 +3101,7 @@ function DataGrid({
                           pagination,
                           isLoadingMore,
                           hasMore,
-                          showFilterRow,
-                          enableColumnSelector
+                          showFilterRow
                         }
                       )
                     ]

package/dist/components/index.js

@@ -379,130 +379,12 @@ function TableBody({
   );
 }
 
-// src/components/DataGrid/PinnedColumns.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function PinnedColumns(_a) {
-  var _b = _a, {
-    pinDirection = "left",
-    table,
-    centerHeader,
-    allSelectedAcrossPages,
-    someSelectedAcrossPages,
-    toggleSelectAllAcrossPages,
-    testid
-  } = _b, props = __objRest(_b, [
-    "pinDirection",
-    "table",
-    "centerHeader",
-    "allSelectedAcrossPages",
-    "someSelectedAcrossPages",
-    "toggleSelectAllAcrossPages",
-    "testid"
-  ]);
-  var _a2;
-  const headerGroups = pinDirection === "left" ? table.getLeftHeaderGroups() : table.getRightHeaderGroups();
-  const pinnedTestId = testid ? `${pinDirection}-pinned-${testid}` : void 0;
-  return ((_a2 = headerGroups[0]) == null ? void 0 : _a2.headers.length) > 0 && /* @__PURE__ */ jsxs3(
-    "table",
-    {
-      className: clsx4(
-        "flex flex-col min-h-min sticky z-20",
-        pinDirection === "left" ? "left-0" : "right-0"
-      ),
-      "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, _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,
-          __spreadProps(__spreadValues({
-            testid: pinnedTestId
-          }, props), {
-            table,
-            locked: true,
-            pinDirection
-          })
-        )
-      ]
-    }
-  );
-}
-
 // src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx
 import { useRef, useState as useState2 } from "react";
 
 // src/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.tsx
 import { useState } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function ColumnSelectorMenuOption({
   id,
   testid,
@@ -511,7 +393,7 @@ function ColumnSelectorMenuOption({
 }) {
   const [isVisible, setIsVisible] = useState(column.getIsVisible());
   const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
-  return /* @__PURE__ */ jsx6(MenuOption, { id, testid, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(MenuOption, { id, testid, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ jsx5(
     Checkbox,
     {
       id: id ? `${id}-checkbox` : void 0,
@@ -527,7 +409,7 @@ function ColumnSelectorMenuOption({
 }
 
 // src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function ColumnSelectorHeaderCell({
   id,
   testid,
@@ -537,7 +419,7 @@ function ColumnSelectorHeaderCell({
 }) {
   const ref = useRef(null);
   const [show, setShow] = useState2(false);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs3(
     DataGridCell,
     {
       id,
@@ -547,7 +429,7 @@ function ColumnSelectorHeaderCell({
       color: "text-secondary-normal",
       ref,
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx6(
           Button,
           {
             id: id ? `${id}-button` : void 0,
@@ -555,10 +437,10 @@ function ColumnSelectorHeaderCell({
             onClick: () => setShow((prev) => !prev),
             variant: "navigation",
             iconOnly: true,
-            leftIcon: /* @__PURE__ */ jsx7(Icon, { name: "tune" })
+            leftIcon: /* @__PURE__ */ jsx6(Icon, { name: "tune" })
           }
         ),
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs3(
           Menu,
           {
             id: id ? `${id}-menu` : void 0,
@@ -569,7 +451,7 @@ function ColumnSelectorHeaderCell({
             setShow,
             calculateMinMaxHeight: true,
             children: [
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx6(
                 Button,
                 {
                   id: id ? `${id}-reset-button` : void 0,
@@ -585,7 +467,7 @@ function ColumnSelectorHeaderCell({
               table.getAllColumns().filter((x) => {
                 var _a;
                 return (_a = x.columnDef.meta) == null ? void 0 : _a.inVisibilityMenu;
-              }).map((column) => /* @__PURE__ */ jsx7(
+              }).map((column) => /* @__PURE__ */ jsx6(
                 ColumnSelectorMenuOption,
                 {
                   id: id ? `${id}-option-${column.id}` : void 0,
@@ -603,6 +485,146 @@ function ColumnSelectorHeaderCell({
   );
 }
 
+// src/components/DataGrid/PinnedColumns.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function PinnedColumns(_a) {
+  var _b = _a, {
+    id,
+    pinDirection = "left",
+    table,
+    centerHeader,
+    allSelectedAcrossPages,
+    someSelectedAcrossPages,
+    toggleSelectAllAcrossPages,
+    testid,
+    enableColumnSelector,
+    toggleColumnVisibility,
+    resetColumnVisibility
+  } = _b, props = __objRest(_b, [
+    "id",
+    "pinDirection",
+    "table",
+    "centerHeader",
+    "allSelectedAcrossPages",
+    "someSelectedAcrossPages",
+    "toggleSelectAllAcrossPages",
+    "testid",
+    "enableColumnSelector",
+    "toggleColumnVisibility",
+    "resetColumnVisibility"
+  ]);
+  var _a2;
+  const headerGroups = pinDirection === "left" ? table.getLeftHeaderGroups() : table.getRightHeaderGroups();
+  const pinnedTestId = testid ? `${pinDirection}-pinned-${testid}` : void 0;
+  const hasAnyHeaders = ((_a2 = headerGroups[0]) == null ? void 0 : _a2.headers.length) > 0;
+  if (!hasAnyHeaders && !enableColumnSelector) return;
+  return /* @__PURE__ */ jsxs4(
+    "table",
+    {
+      className: clsx4(
+        "flex flex-col min-h-min sticky z-20",
+        pinDirection === "left" ? "left-0" : "right-0"
+      ),
+      "data-testid": pinnedTestId,
+      children: [
+        /* @__PURE__ */ jsx7("thead", { className: "sticky top-0 z-20 grid", children: headerGroups.map((headerGroup) => {
+          return /* @__PURE__ */ jsxs4(
+            "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__ */ jsxs4(
+                      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__ */ jsx7(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__ */ jsx7(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                          !((_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked) && /* @__PURE__ */ jsx7(
+                            "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__ */ jsx7(React2.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ jsx7(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ jsx7(
+                    Checkbox,
+                    {
+                      checked: allSelectedAcrossPages,
+                      indeterminate: someSelectedAcrossPages,
+                      onChange: toggleSelectAllAcrossPages
+                    }
+                  ) }) : flexRender2(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  ) }, header.id);
+                }),
+                enableColumnSelector && /* @__PURE__ */ jsx7(
+                  ColumnSelectorHeaderCell,
+                  {
+                    id: id ? `${id}-column-selector` : void 0,
+                    testid: testid ? `${testid}-column-selector` : void 0,
+                    table,
+                    toggleColumnVisibility: toggleColumnVisibility != null ? toggleColumnVisibility : () => {
+                    },
+                    resetColumnVisibility: resetColumnVisibility != null ? resetColumnVisibility : () => {
+                    }
+                  }
+                )
+              ]
+            },
+            headerGroup.id
+          );
+        }) }),
+        /* @__PURE__ */ jsx7(
+          TableBody,
+          __spreadProps(__spreadValues({
+            testid: pinnedTestId
+          }, props), {
+            table,
+            locked: true,
+            pinDirection
+          })
+        )
+      ]
+    }
+  );
+}
+
 // src/components/DataGrid/index.tsx
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 35];
@@ -838,8 +860,7 @@ function DataGrid({
                           pagination,
                           isLoadingMore,
                           hasMore,
-                          showFilterRow,
-                          enableColumnSelector
+                          showFilterRow
                         }
                       ),
                       /* @__PURE__ */ jsxs5("table", { className: "flex-1 flex flex-col min-h-min", children: [
@@ -948,17 +969,7 @@ function DataGrid({
                                     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
-                                }
-                              )
+                              ) : null
                             ]
                           },
                           headerGroup.id
@@ -984,6 +995,10 @@ function DataGrid({
                       /* @__PURE__ */ jsx8(
                         PinnedColumns,
                         {
+                          id,
+                          enableColumnSelector,
+                          toggleColumnVisibility,
+                          resetColumnVisibility,
                           testid,
                           pinDirection: "right",
                           table,
@@ -991,8 +1006,7 @@ function DataGrid({
                           pagination,
                           isLoadingMore,
                           hasMore,
-                          showFilterRow,
-                          enableColumnSelector
+                          showFilterRow
                         }
                       )
                     ]

package/package.json

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

package/src/components/DataGrid/PinnedColumns.tsx

@@ -5,7 +5,13 @@ import clsx from "clsx";
 import { getSortIcon } from "./utils";
 import React from "react";
 import { TableBody } from "./TableBody";
+import { ColumnSelectorHeaderCell } from "./ColumnSelectorHeaderCell";
 interface PinnedColumnsProps<TData extends RowData> {
+  id?: string;
+
+  toggleColumnVisibility?: (columnId: string, isVisible: boolean) => void;
+  resetColumnVisibility?: () => void;
+
   pinDirection: "left" | "right";
   table: Table<TData>;
   tableContainerRef: React.RefObject<HTMLDivElement | null>;
@@ -22,6 +28,7 @@ interface PinnedColumnsProps<TData extends RowData> {
 }
 
 export function PinnedColumns<TData>({
+  id,
   pinDirection = "left",
   table,
   centerHeader,
@@ -29,6 +36,9 @@ export function PinnedColumns<TData>({
   someSelectedAcrossPages,
   toggleSelectAllAcrossPages,
   testid,
+  enableColumnSelector,
+  toggleColumnVisibility,
+  resetColumnVisibility,
   ...props
 }: PinnedColumnsProps<TData>) {
   const headerGroups =
@@ -38,128 +48,136 @@ export function PinnedColumns<TData>({
 
   const pinnedTestId = testid ? `${pinDirection}-pinned-${testid}` : undefined;
 
+  const hasAnyHeaders = headerGroups[0]?.headers.length > 0;
+
+  if (!hasAnyHeaders && !enableColumnSelector) return;
+
   return (
-    headerGroups[0]?.headers.length > 0 && (
-      <table
-        className={clsx(
-          "flex flex-col min-h-min sticky z-20",
-          pinDirection === "left" ? "left-0" : "right-0",
-        )}
-        data-testid={pinnedTestId}
-      >
-        <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
+    <table
+      className={clsx(
+        "flex flex-col min-h-min sticky z-20",
+        pinDirection === "left" ? "left-0" : "right-0",
+      )}
+      data-testid={pinnedTestId}
+    >
+      <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"
+            >
+              {headerGroup.headers.map((header) => {
+                if (!header) {
+                  return;
                 }
-                className="flex w-full"
-              >
-                {headerGroup.headers.map((header) => {
-                  if (!header) {
-                    return;
-                  }
 
-                  if (typeof header.column.columnDef.header === "string") {
-                    return (
-                      <DataCellHeader
-                        locked
-                        key={header.id}
-                        testid={
-                          pinnedTestId
-                            ? `${pinnedTestId}-header-${header.id}`
-                            : undefined
-                        }
-                        header={header}
-                        center={centerHeader}
-                        width={
-                          (header.column.columnDef.meta?.headerWidth as
-                            | string
-                            | undefined) ?? `${header.column.getSize()}px`
-                        }
-                        className={clsx(
-                          header.column.getCanSort()
-                            ? "cursor-pointer"
-                            : "cursor-grab",
-                          "group",
-                        )}
-                      >
-                        <Subheader tall>
-                          {header.column.columnDef.header}
-                        </Subheader>
+                if (typeof header.column.columnDef.header === "string") {
+                  const customHeaderWidth =
+                    header.column.columnDef.meta?.headerWidth;
 
-                        {getSortIcon(header.column.getIsSorted())}
+                  return (
+                    <DataCellHeader
+                      locked
+                      key={header.id}
+                      testid={
+                        pinnedTestId
+                          ? `${pinnedTestId}-header-${header.id}`
+                          : undefined
+                      }
+                      header={header}
+                      center={centerHeader}
+                      width={customHeaderWidth}
+                      className={clsx(
+                        header.column.getCanSort()
+                          ? "cursor-pointer"
+                          : "cursor-grab",
+                        "group",
+                      )}
+                    >
+                      <Subheader tall>
+                        {header.column.columnDef.header}
+                      </Subheader>
 
-                        {!header.column.getIsSorted() &&
-                          header.column.getCanSort() &&
-                          getSortIcon(
-                            header.column.getNextSortingOrder(),
-                            true,
-                          )}
+                      {getSortIcon(header.column.getIsSorted())}
 
-                        {header.column.getSortIndex() !== -1 &&
-                          table.getState().sorting.length > 1 && (
-                            <Subheader tall>
-                              {header.column.getSortIndex() + 1}
-                            </Subheader>
-                          )}
+                      {!header.column.getIsSorted() &&
+                        header.column.getCanSort() &&
+                        getSortIcon(header.column.getNextSortingOrder(), true)}
 
-                        {!header.column.columnDef.meta?.locked && (
-                          <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.column.getSortIndex() !== -1 &&
+                        table.getState().sorting.length > 1 && (
+                          <Subheader tall>
+                            {header.column.getSortIndex() + 1}
+                          </Subheader>
                         )}
-                      </DataCellHeader>
-                    );
-                  }
-                  return (
-                    <React.Fragment key={header.id}>
-                      {header.column.columnDef.meta?.checkbox ? (
-                        <DataGridCell type="header" component="checkbox" locked>
-                          <Checkbox
-                            checked={allSelectedAcrossPages}
-                            indeterminate={someSelectedAcrossPages}
-                            onChange={toggleSelectAllAcrossPages}
-                          />
-                        </DataGridCell>
-                      ) : (
-                        flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )
+
+                      {!header.column.columnDef.meta?.locked && (
+                        <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"
+                        />
                       )}
-                    </React.Fragment>
+                    </DataCellHeader>
                   );
-                })}
-              </tr>
-            );
-          })}
-        </thead>
+                }
+                return (
+                  <React.Fragment key={header.id}>
+                    {header.column.columnDef.meta?.checkbox ? (
+                      <DataGridCell type="header" component="checkbox" locked>
+                        <Checkbox
+                          checked={allSelectedAcrossPages}
+                          indeterminate={someSelectedAcrossPages}
+                          onChange={toggleSelectAllAcrossPages}
+                        />
+                      </DataGridCell>
+                    ) : (
+                      flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )
+                    )}
+                  </React.Fragment>
+                );
+              })}
+
+              {enableColumnSelector && (
+                <ColumnSelectorHeaderCell
+                  id={id ? `${id}-column-selector` : undefined}
+                  testid={testid ? `${testid}-column-selector` : undefined}
+                  table={table}
+                  toggleColumnVisibility={toggleColumnVisibility ?? (() => {})}
+                  resetColumnVisibility={resetColumnVisibility ?? (() => {})}
+                />
+              )}
+            </tr>
+          );
+        })}
+      </thead>
 
-        <TableBody
-          testid={pinnedTestId}
-          {...props}
-          table={table}
-          locked={true}
-          pinDirection={pinDirection}
-        />
-      </table>
-    )
+      <TableBody
+        testid={pinnedTestId}
+        {...props}
+        table={table}
+        locked={true}
+        pinDirection={pinDirection}
+      />
+    </table>
   );
 }

package/src/components/DataGrid/index.tsx

@@ -349,7 +349,6 @@ export function DataGrid<T extends Record<string, unknown>>({
               isLoadingMore={isLoadingMore}
               hasMore={hasMore}
               showFilterRow={showFilterRow}
-              enableColumnSelector={enableColumnSelector}
             />
 
             <table className="flex-1 flex flex-col min-h-min">
@@ -497,17 +496,6 @@ export function DataGrid<T extends Record<string, unknown>>({
                         style={{ display: "flex", width: virtualPaddingRight }}
                       />
                     ) : null}
-                    {enableColumnSelector && (
-                      <ColumnSelectorHeaderCell
-                        id={id ? `${id}-column-selector` : undefined}
-                        testid={
-                          testid ? `${testid}-column-selector` : undefined
-                        }
-                        table={table}
-                        toggleColumnVisibility={toggleColumnVisibility}
-                        resetColumnVisibility={resetColumnVisibility}
-                      />
-                    )}
                   </tr>
                 ))}
               </thead>
@@ -529,6 +517,10 @@ export function DataGrid<T extends Record<string, unknown>>({
             </table>
 
             <PinnedColumns
+              id={id}
+              enableColumnSelector={enableColumnSelector}
+              toggleColumnVisibility={toggleColumnVisibility}
+              resetColumnVisibility={resetColumnVisibility}
               testid={testid}
               pinDirection="right"
               table={table}
@@ -537,7 +529,6 @@ export function DataGrid<T extends Record<string, unknown>>({
               isLoadingMore={isLoadingMore}
               hasMore={hasMore}
               showFilterRow={showFilterRow}
-              enableColumnSelector={enableColumnSelector}
             />
           </div>