@dmsi/wedgekit-react 0.0.28 → 0.0.30

package/dist/components/DataGridCell.cjs

@@ -60,6 +60,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/DataGridCell.tsx
 var DataGridCell_exports = {};
 __export(DataGridCell_exports, {
+  DataCellHeader: () => DataCellHeader,
   DataGridCell: () => DataGridCell,
   DragAlongCell: () => DragAlongCell,
   DraggableCellHeader: () => DraggableCellHeader
@@ -1547,7 +1548,8 @@ var MenuOption = ({
   );
   const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx7.default)("text-text-action-disabled");
   const disabledStyles = disabled && (0, import_clsx7.default)("bg-transparent cursor-default pointer-events-none");
-  const renderChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
+  const processChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
+  const renderChildren = typeof children === "object" ? children : variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Label, { padded: true, className: textLabelStyles, children: processChildren }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: processChildren });
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
@@ -1581,7 +1583,7 @@ var MenuOption = ({
         "aria-haspopup": subMenu ? "menu" : void 0,
         children: [
           before && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "shrink-0 flex items-center", children: before }),
-          variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Label, { padded: true, className: textLabelStyles, children: renderChildren }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: renderChildren }),
+          renderChildren,
           renderAfterProp()
         ]
       })
@@ -1734,7 +1736,7 @@ var DataGridCell = (0, import_react8.memo)(
       lockedHeaderBgStyles,
       iconComponentStyles,
       className,
-      "flex flex-1 items-center gap-1 whitespace-nowrap min-w-full max-h-10 relative text-text-primary-normal",
+      "flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-primary-normal",
       "focus-within:!z-10",
       component === "input" && "border",
       component === "input" && !error && !warning && "border-border-primary-normal",
@@ -1750,7 +1752,7 @@ var DataGridCell = (0, import_react8.memo)(
       Element,
       __spreadProps(__spreadValues({
         id,
-        className: (0, import_clsx8.default)("flex", !width && "flex-1"),
+        className: (0, import_clsx8.default)("flex h-10", !width && "flex-1"),
         style: { width }
       }, props), {
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1773,33 +1775,41 @@ var DataGridCell = (0, import_react8.memo)(
   }
 );
 DataGridCell.displayName = "DataGridCell";
-function DraggableCellHeader(_a) {
+function DataCellHeader(_a) {
   var _b = _a, {
     header,
     children,
-    locked = false,
+    setNodeRef,
+    node,
     id
   } = _b, props = __objRest(_b, [
     "header",
     "children",
-    "locked",
+    "setNodeRef",
+    "node",
     "id"
   ]);
   var _a2;
-  const { attributes, isDragging, listeners, setNodeRef, transform, node } = (0, import_sortable.useSortable)({
-    id: header.column.id
-  });
   const [showMenu, setShowMenu] = (0, import_react8.useState)(false);
   const [filter, setFilter] = (0, import_react8.useState)(
     (_a2 = header.column.getFilterValue()) != null ? _a2 : ""
   );
+  const ref = (0, import_react8.useRef)(null);
+  const predeterminedPinned = (0, import_react8.useRef)(false);
   const {
     menuRootRef,
     isMenuActive,
     registerSubMenu,
     listeners: subMenuListeners,
     mobileHide
-  } = useSubMenuSystem(node);
+  } = useSubMenuSystem(node ? node : ref);
+  (0, import_react8.useEffect)(() => {
+    var _a3;
+    const columnPinning = (_a3 = header.getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
+    const left = (columnPinning == null ? void 0 : columnPinning.left) ? columnPinning.left : [];
+    const right = (columnPinning == null ? void 0 : columnPinning.right) ? columnPinning.right : [];
+    predeterminedPinned.current = [...left, ...right].includes(header.column.id);
+  }, []);
   (0, import_react8.useEffect)(() => {
     const handler = setTimeout(() => {
       header.column.setFilterValue(filter);
@@ -1808,107 +1818,160 @@ function DraggableCellHeader(_a) {
       clearTimeout(handler);
     };
   }, [filter]);
-  const style = {
-    opacity: isDragging ? 0.8 : 1,
+  const style = __spreadValues({
     position: "relative",
-    transform: CSS.Translate.toString(transform),
-    transition: "width transform 0.2s ease-in-out",
     whiteSpace: "nowrap",
     width: header.column.getSize(),
-    zIndex: isDragging ? 1 : 0,
     "--color-text-primary-normal": "var(--color-neutral-000)"
-  };
+  }, props.style);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     DataGridCell,
-    __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({
+    __spreadProps(__spreadValues({
       id,
-      locked,
+      ref: setNodeRef ? setNodeRef : ref,
       type: "header",
       component: "header",
-      ref: setNodeRef,
-      colSpan: header.colSpan,
-      style
-    }, props), {
+      style,
       onClick: header.column.getToggleSortingHandler(),
       onRightClick: () => setShowMenu(!showMenu)
-    }), locked ? {} : attributes), locked ? {} : listeners), {
+    }, props), {
       children: [
         children,
-        header.column.getCanFilter() && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        header.column.getCanFilter() && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           Menu,
           {
             id: id ? `${id}-menu` : void 0,
             ref: menuRootRef,
-            positionTo: node,
+            positionTo: node ? node : ref,
             show: showMenu,
             setShow: setShowMenu,
             mobileHide,
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              MenuOption,
-              __spreadProps(__spreadValues({
-                id: id ? `${id}-filter-option` : void 0
-              }, subMenuListeners), {
-                subMenu: (_b2) => {
-                  var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
-                  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                    Menu,
-                    __spreadProps(__spreadValues({
-                      id: id ? `${id}-filter-submenu` : void 0
-                    }, props2), {
-                      show: isMenuActive(menuId, subMenuLevel),
-                      ref: (el) => {
-                        registerSubMenu(menuId, el);
-                      },
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_clsx8.default)(paddingUsingComponentGap), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                          Search,
-                          {
-                            id: id ? `${id}-filter-search` : void 0,
-                            onChange: (event) => {
-                              setFilter(event.target.value);
-                            },
-                            onKeyDown: (event) => {
-                              if ([" ", "Space"].includes(event.key)) {
-                                event.stopPropagation();
-                              }
-                            },
-                            value: filter != null ? filter : ""
-                          }
-                        ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                          MenuOption,
-                          {
-                            id: id ? `${id}-filter-contains` : void 0,
-                            onClick: handleFilterFnChange,
-                            before: menuOptionIcon("includesString"),
-                            children: "Contains"
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                          MenuOption,
-                          {
-                            id: id ? `${id}-filter-startswith` : void 0,
-                            onClick: handleFilterFnChange,
-                            before: menuOptionIcon("startsWith"),
-                            children: "Starts with"
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                          MenuOption,
-                          {
-                            id: id ? `${id}-filter-endswith` : void 0,
-                            onClick: handleFilterFnChange,
-                            before: menuOptionIcon("endsWith"),
-                            children: "Ends with"
-                          }
-                        )
-                      ]
-                    })
-                  );
-                },
-                children: "Filter"
-              })
-            )
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                MenuOption,
+                __spreadProps(__spreadValues({
+                  id: id ? `${id}-filter-option` : void 0
+                }, subMenuListeners), {
+                  subMenu: (_b2) => {
+                    var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
+                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                      Menu,
+                      __spreadProps(__spreadValues({
+                        id: id ? `${id}-filter-submenu` : void 0
+                      }, props2), {
+                        show: isMenuActive(menuId, subMenuLevel),
+                        ref: (el) => {
+                          registerSubMenu(menuId, el);
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_clsx8.default)(paddingUsingComponentGap), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            Search,
+                            {
+                              id: id ? `${id}-filter-search` : void 0,
+                              onChange: (event) => {
+                                setFilter(event.target.value);
+                              },
+                              onKeyDown: (event) => {
+                                if ([" ", "Space"].includes(event.key)) {
+                                  event.stopPropagation();
+                                }
+                              },
+                              value: filter != null ? filter : ""
+                            }
+                          ) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            MenuOption,
+                            {
+                              id: id ? `${id}-filter-contains` : void 0,
+                              onClick: handleFilterFnChange,
+                              before: menuOptionIcon("includesString"),
+                              children: "Contains"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            MenuOption,
+                            {
+                              id: id ? `${id}-filter-startswith` : void 0,
+                              onClick: handleFilterFnChange,
+                              before: menuOptionIcon("startsWith"),
+                              children: "Starts with"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            MenuOption,
+                            {
+                              id: id ? `${id}-filter-endswith` : void 0,
+                              onClick: handleFilterFnChange,
+                              before: menuOptionIcon("endsWith"),
+                              children: "Ends with"
+                            }
+                          )
+                        ]
+                      })
+                    );
+                  },
+                  children: "Filter"
+                })
+              ),
+              !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                MenuOption,
+                __spreadProps(__spreadValues({
+                  onClick: () => {
+                    setShowMenu(!showMenu);
+                  }
+                }, subMenuListeners), {
+                  subMenu: (_d) => {
+                    var _e = _d, { menuId, subMenuLevel } = _e, props2 = __objRest(_e, ["menuId", "subMenuLevel"]);
+                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                      Menu,
+                      __spreadProps(__spreadValues({}, props2), {
+                        show: isMenuActive(menuId, subMenuLevel),
+                        ref: (el) => {
+                          registerSubMenu(menuId, el);
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            MenuOption,
+                            {
+                              selected: header.column.getIsPinned() === "left",
+                              onClick: () => {
+                                if (header.column.getIsPinned() === "left") {
+                                  header.column.pin(false);
+                                } else {
+                                  header.column.pin("left");
+                                }
+                              },
+                              after: header.column.getIsPinned() === "left" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "check" }),
+                              children: "Left"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            MenuOption,
+                            {
+                              selected: header.column.getIsPinned() === "right",
+                              onClick: () => {
+                                if (header.column.getIsPinned() === "right") {
+                                  header.column.pin(false);
+                                } else {
+                                  header.column.pin("right");
+                                }
+                              },
+                              after: header.column.getIsPinned() === "right" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "check" }),
+                              children: "Right"
+                            }
+                          )
+                        ]
+                      })
+                    );
+                  },
+                  children: [
+                    "Freeze [",
+                    header.column.columnDef.header,
+                    "]"
+                  ]
+                })
+              )
+            ]
           }
         )
       ]
@@ -1926,7 +1989,6 @@ function DraggableCellHeader(_a) {
     );
   }
   function handleFilterFnChange(_id, value) {
-    var _a3;
     let filterFn = "includesString";
     const currentFilterFn = header.column.columnDef.filterFn;
     if ((value == null ? void 0 : value.toLowerCase()) === "starts with") {
@@ -1939,9 +2001,43 @@ function DraggableCellHeader(_a) {
       filterFn = currentFilterFn === "includesString" ? "auto" : "includesString";
     }
     header.column.columnDef.filterFn = filterFn;
-    header.column.setFilterValue((_a3 = header.column.getFilterValue()) != null ? _a3 : "");
+    header.column.setFilterValue(filter);
   }
 }
+DataCellHeader.displayName = "DataCellHeader";
+function DraggableCellHeader(_a) {
+  var _b = _a, {
+    header,
+    children
+  } = _b, props = __objRest(_b, [
+    "header",
+    "children"
+  ]);
+  const { attributes, isDragging, listeners, setNodeRef, transform, node } = (0, import_sortable.useSortable)({
+    id: header.column.id
+  });
+  const style = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    whiteSpace: "nowrap",
+    zIndex: isDragging ? 1 : 0,
+    width: header.column.getSize(),
+    "--color-text-primary-normal": "var(--color-neutral-000)"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    DataCellHeader,
+    __spreadProps(__spreadValues(__spreadValues(__spreadValues({
+      header,
+      setNodeRef,
+      node,
+      style
+    }, props), attributes), listeners), {
+      children
+    })
+  );
+}
 DraggableCellHeader.displayName = "DraggableCellHeader";
 function DragAlongCell(_a) {
   var _b = _a, {
@@ -1959,15 +2055,15 @@ function DragAlongCell(_a) {
     position: "relative",
     transform: CSS.Translate.toString(transform),
     transition: "width transform 0.2s ease-in-out",
-    zIndex: isDragging ? 1 : 0,
     width: cell.column.getSize(),
-    minWidth: "min-content"
+    zIndex: isDragging ? 1 : 0
   };
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
 }
 DragAlongCell.displayName = "DragAlongCell";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader

package/dist/components/DataGridCell.js

@@ -1,12 +1,13 @@
 "use client";
 import {
+  DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-S5KPS4IQ.js";
+} from "../chunk-HXEPUO5W.js";
 import "../chunk-VC3R5EUH.js";
 import "../chunk-Z4UCFUF7.js";
-import "../chunk-PDDZ5PMY.js";
+import "../chunk-S46RZBT4.js";
 import "../chunk-SEKKGFM6.js";
 import "../chunk-SKHSGGO3.js";
 import "../chunk-WVUIIBRR.js";
@@ -18,6 +19,7 @@ import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {
+  DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader