@dmsi/wedgekit-react 0.0.179 → 0.0.180

package/dist/components/index.js

@@ -3,41 +3,38 @@ import {
 } from "../chunk-3WNXMCZV.js";
 import {
   Select
-} from "../chunk-KADNOKNW.js";
+} from "../chunk-XH65MD2C.js";
+import {
+  Checkbox
+} from "../chunk-WFQEE2OO.js";
 import {
   DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-ZZMVPZMF.js";
+} from "../chunk-Z2KZO4J3.js";
 import {
   Menu
-} from "../chunk-UZZLQASG.js";
+} from "../chunk-UBU6IJML.js";
 import "../chunk-5GUW4DUY.js";
 import {
   MenuOption
-} from "../chunk-AEDEFN7A.js";
-import "../chunk-WVUIIBRR.js";
+} from "../chunk-FFU6FB3K.js";
+import {
+  useInfiniteScroll
+} from "../chunk-WNQ53SVY.js";
 import "../chunk-6LN6QT6M.js";
 import {
   Search
-} from "../chunk-IDSFWKOR.js";
+} from "../chunk-PMBEIP24.js";
 import {
   Input
-} from "../chunk-MVGOAMTP.js";
+} from "../chunk-4T3DRGLF.js";
+import "../chunk-5UH6QUFB.js";
 import {
   Label
 } from "../chunk-JWCT72WR.js";
-import {
-  Checkbox
-} from "../chunk-WFQEE2OO.js";
-import {
-  Button
-} from "../chunk-FKMKHLQH.js";
-import {
-  useInfiniteScroll
-} from "../chunk-WNQ53SVY.js";
-import "../chunk-5UH6QUFB.js";
+import "../chunk-WVUIIBRR.js";
 import {
   Subheader
 } from "../chunk-CYZL57LH.js";
@@ -51,6 +48,9 @@ import {
 import {
   Paragraph
 } from "../chunk-HVI3CL7Y.js";
+import {
+  Button
+} from "../chunk-FKMKHLQH.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.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.180",
   "type": "module",
   "scripts": {
     "build": "tsup",