@dmsi/wedgekit-react 0.0.179 → 0.0.180

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
                         }
                       )
                     ]