@dmsi/wedgekit-react 0.0.50 → 0.0.51

package/dist/{chunk-VC3R5EUH.js → chunk-6R2HCLEL.js}

@@ -1,9 +1,9 @@
 import {
   useMenuPosition
-} from "./chunk-Z4UCFUF7.js";
+} from "./chunk-B6PDZCU7.js";
 import {
   useMatchesMobile
-} from "./chunk-SEKKGFM6.js";
+} from "./chunk-SWA5WVQO.js";
 import {
   findDocumentRoot
 } from "./chunk-4T7F5BZZ.js";

package/dist/{chunk-VKMJ63WV.js → chunk-ATOEGP3V.js}

@@ -1,12 +1,12 @@
 import {
   Menu
-} from "./chunk-VC3R5EUH.js";
+} from "./chunk-6R2HCLEL.js";
 import {
   useSubMenuSystem
-} from "./chunk-Z4UCFUF7.js";
+} from "./chunk-B6PDZCU7.js";
 import {
   MenuOption
-} from "./chunk-T22EH3MG.js";
+} from "./chunk-FOC6LTSX.js";
 import {
   Search
 } from "./chunk-LP6AZST2.js";

package/dist/{chunk-Z4UCFUF7.js → chunk-B6PDZCU7.js}

@@ -1,6 +1,6 @@
 import {
   useMatchesMobile
-} from "./chunk-SEKKGFM6.js";
+} from "./chunk-SWA5WVQO.js";
 import {
   __spreadValues
 } from "./chunk-ORMEWXMH.js";
@@ -12,7 +12,9 @@ function useSubMenuSystem(mobilePositionTo) {
     {}
   );
   const [activeMenu, setActiveMenu] = useState("");
-  const [currentSubMenuLevel, setCurrentSubMenuLevel] = useState(null);
+  const [currentSubMenuLevel, setCurrentSubMenuLevel] = useState(
+    null
+  );
   const menuRootRef = useRef(null);
   const subMenuRefs = useRef({});
   const hoverTimeoutRef = useRef(null);
@@ -146,7 +148,9 @@ function useSubMenuSystem(mobilePositionTo) {
   const getAllFocusableMenuElements = () => {
     const elements = [];
     if (menuRootRef.current) {
-      elements.push(...Array.from(menuRootRef.current.children));
+      elements.push(
+        ...Array.from(menuRootRef.current.children)
+      );
     }
     Object.values(activeMenus).forEach((menuId) => {
       const submenuEl = subMenuRefs.current[menuId];

package/dist/{chunk-T22EH3MG.js → chunk-FOC6LTSX.js}

@@ -1,6 +1,6 @@
 import {
   useMatchesMobile
-} from "./chunk-SEKKGFM6.js";
+} from "./chunk-SWA5WVQO.js";
 import {
   Paragraph
 } from "./chunk-VG4EPHJA.js";

package/dist/chunk-SWA5WVQO.js

@@ -0,0 +1,49 @@
+// src/hooks/useKeydown.ts
+import { useEffect } from "react";
+function useKeydown(keys, isActive) {
+  function handleKeyDown(event) {
+    if (!Object.keys(keys).includes(event.key) && !Object.keys(keys).join("").includes("/"))
+      return;
+    Object.entries(keys).forEach(([key, handler]) => {
+      if (event.key !== key && !key.includes("/")) return;
+      if (key.includes("/") && key.replace("Space", " ").split("/").includes(event.key)) {
+        event.preventDefault();
+        handler(event);
+        return;
+      }
+      if (event.key === key) {
+        event.preventDefault();
+        handler(event);
+      }
+    });
+  }
+  useEffect(() => {
+    if (!isActive)
+      return document.removeEventListener("keydown", handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [keys, isActive]);
+}
+
+// src/hooks/useMatchesMedia.ts
+import { useLayoutEffect, useState } from "react";
+var useMatchesMedia = (query) => {
+  const [matches, setMatches] = useState();
+  useLayoutEffect(() => {
+    const mediaQueryList = window.matchMedia(query);
+    const listener = () => setMatches(mediaQueryList.matches);
+    listener();
+    mediaQueryList.addEventListener("change", listener);
+    return () => mediaQueryList.removeEventListener("change", listener);
+  }, [query]);
+  return matches;
+};
+var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
+
+export {
+  useKeydown,
+  useMatchesMedia,
+  useMatchesMobile
+};

package/dist/components/DataGrid.cjs

@@ -63,7 +63,7 @@ __export(DataGrid_exports, {
   DataGrid: () => DataGrid
 });
 module.exports = __toCommonJS(DataGrid_exports);
-var import_react12 = __toESM(require("react"), 1);
+var import_react13 = __toESM(require("react"), 1);
 var import_react_table = require("@tanstack/react-table");
 var import_react_virtual = require("@tanstack/react-virtual");
 var import_core = require("@dnd-kit/core");
@@ -591,7 +591,7 @@ var CSS = /* @__PURE__ */ Object.freeze({
 
 // src/components/DataGridCell.tsx
 var import_clsx10 = __toESM(require("clsx"), 1);
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/Search.tsx
 var import_react3 = require("react");
@@ -1170,47 +1170,43 @@ Search.displayName = "Search";
 
 // src/components/Menu.tsx
 var import_clsx8 = __toESM(require("clsx"), 1);
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/useMenuSystem.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
-// src/components/useMatchesMedia.tsx
+// src/hooks/useKeydown.ts
 var import_react4 = require("react");
+
+// src/hooks/useMatchesMedia.ts
+var import_react5 = require("react");
 var useMatchesMedia = (query) => {
-  const [matches, setMatches] = (0, import_react4.useState)(
-    () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
-  );
-  (0, import_react4.useLayoutEffect)(() => {
+  const [matches, setMatches] = (0, import_react5.useState)();
+  (0, import_react5.useLayoutEffect)(() => {
     const mediaQueryList = window.matchMedia(query);
-    const listener = (event) => {
-      setMatches(event.matches);
-    };
+    const listener = () => setMatches(mediaQueryList.matches);
+    listener();
     mediaQueryList.addEventListener("change", listener);
-    setMatches(mediaQueryList.matches);
-    return () => {
-      mediaQueryList.removeEventListener("change", listener);
-    };
+    return () => mediaQueryList.removeEventListener("change", listener);
   }, [query]);
   return matches;
 };
-var useMatchesMobile = () => {
-  const isMobile = useMatchesMedia("(width < 48rem)");
-  return isMobile;
-};
+var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
 // src/components/useMenuSystem.tsx
 function useSubMenuSystem(mobilePositionTo) {
-  const [activeMenus, setActiveMenus] = (0, import_react5.useState)(
+  const [activeMenus, setActiveMenus] = (0, import_react6.useState)(
     {}
   );
-  const [activeMenu, setActiveMenu] = (0, import_react5.useState)("");
-  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react5.useState)(null);
-  const menuRootRef = (0, import_react5.useRef)(null);
-  const subMenuRefs = (0, import_react5.useRef)({});
-  const hoverTimeoutRef = (0, import_react5.useRef)(null);
-  const closeTimeoutRef = (0, import_react5.useRef)(null);
+  const [activeMenu, setActiveMenu] = (0, import_react6.useState)("");
+  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react6.useState)(
+    null
+  );
+  const menuRootRef = (0, import_react6.useRef)(null);
+  const subMenuRefs = (0, import_react6.useRef)({});
+  const hoverTimeoutRef = (0, import_react6.useRef)(null);
+  const closeTimeoutRef = (0, import_react6.useRef)(null);
   const isMobile = useMatchesMobile();
   const toggleMenu = (menuId, level) => {
     if (closeTimeoutRef.current) {
@@ -1308,7 +1304,7 @@ function useSubMenuSystem(mobilePositionTo) {
   const isMenuActive = (menuId, level) => {
     return activeMenus[level] === menuId;
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const handleClickOutside = (event) => {
       var _a;
       if (Object.keys(activeMenus).length === 0) return;
@@ -1327,7 +1323,7 @@ function useSubMenuSystem(mobilePositionTo) {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [activeMenus]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     return () => {
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
@@ -1340,7 +1336,9 @@ function useSubMenuSystem(mobilePositionTo) {
   const getAllFocusableMenuElements = () => {
     const elements = [];
     if (menuRootRef.current) {
-      elements.push(...Array.from(menuRootRef.current.children));
+      elements.push(
+        ...Array.from(menuRootRef.current.children)
+      );
     }
     Object.values(activeMenus).forEach((menuId) => {
       const submenuEl = subMenuRefs.current[menuId];
@@ -1402,13 +1400,13 @@ function useSubMenuSystem(mobilePositionTo) {
   };
 }
 function useMenuPosition(elementRef, position = "bottom", options) {
-  const [menuPosition, setMenuPosition] = (0, import_react5.useState)({
+  const [menuPosition, setMenuPosition] = (0, import_react6.useState)({
     top: 0,
     left: 0,
     minWidth: 0
   });
   const isMobile = useMatchesMobile();
-  const updatePosition = (0, import_react5.useCallback)(() => {
+  const updatePosition = (0, import_react6.useCallback)(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     if (!(elementRef == null ? void 0 : elementRef.current)) return;
     const triggerRect = elementRef.current.getBoundingClientRect();
@@ -1444,7 +1442,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
       minWidth: triggerRect.width
     });
   }, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.topOffset, isMobile]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
     const handleClickOutside = (event) => {
       var _a, _b, _c, _d, _e;
@@ -1470,7 +1468,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     options == null ? void 0 : options.menuRef,
     options == null ? void 0 : options.additionalRefs
   ]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     updatePosition();
     const resizeObserver = new ResizeObserver(updatePosition);
     if (elementRef == null ? void 0 : elementRef.current) {
@@ -1548,9 +1546,9 @@ var Menu = (_a) => {
     "autoFocusOff",
     "menuName"
   ]);
-  const internalRef = (0, import_react6.useRef)(null);
+  const internalRef = (0, import_react7.useRef)(null);
   const actualRef = ref || internalRef;
-  const [maxHeight, setMaxHeight] = (0, import_react6.useState)("180px");
+  const [maxHeight, setMaxHeight] = (0, import_react7.useState)("180px");
   const isMobile = useMatchesMobile();
   const { menuPosition, updatePosition } = useMenuPosition(
     isMobile && mobilePositionTo ? mobilePositionTo : positionTo,
@@ -1562,7 +1560,7 @@ var Menu = (_a) => {
       topOffset
     }
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       if (!actualRef || !actualRef.current || customMaxHeight) {
         return;
@@ -1583,14 +1581,14 @@ var Menu = (_a) => {
       cancelAnimationFrame(raf);
     };
   }, [actualRef, customMaxHeight]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!show) {
       return;
     }
     initializeMenuFocus();
     updatePosition();
   }, [show, updatePosition]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!show || !setShow) {
       return;
     }
@@ -1743,7 +1741,7 @@ Menu.displayName = "Menu";
 
 // src/components/MenuOption.tsx
 var import_clsx9 = __toESM(require("clsx"), 1);
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var MenuOption = ({
   id,
@@ -1769,10 +1767,10 @@ var MenuOption = ({
   highlightMatchingText = false,
   menuValue
 }) => {
-  const uniqueId = (0, import_react7.useId)();
-  const internalRef = (0, import_react7.useRef)(null);
+  const uniqueId = (0, import_react8.useId)();
+  const internalRef = (0, import_react8.useRef)(null);
   const actualRef = ref || internalRef;
-  const menuId = (0, import_react7.useRef)(`menu-${uniqueId}`);
+  const menuId = (0, import_react8.useRef)(`menu-${uniqueId}`);
   const isMobile = useMatchesMobile();
   const handleMouseEnter = () => {
     if (subMenu && onSubMenuHover && !disabled) {
@@ -1915,7 +1913,7 @@ function highlightMatch(text, searchValue) {
 
 // src/components/DataGridCell.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var DataGridCell = (0, import_react8.memo)(
+var DataGridCell = (0, import_react9.memo)(
   (_a) => {
     var _b = _a, {
       id,
@@ -1951,10 +1949,10 @@ var DataGridCell = (0, import_react8.memo)(
       "width"
     ]);
     const Element = type === "header" ? "th" : "td";
-    const timerRef = (0, import_react8.useRef)(null);
-    const [isGrabbing, setIsGrabbing] = (0, import_react8.useState)(false);
-    const [isPointerPressed, setIsPointerPressed] = (0, import_react8.useState)(false);
-    (0, import_react8.useEffect)(() => {
+    const timerRef = (0, import_react9.useRef)(null);
+    const [isGrabbing, setIsGrabbing] = (0, import_react9.useState)(false);
+    const [isPointerPressed, setIsPointerPressed] = (0, import_react9.useState)(false);
+    (0, import_react9.useEffect)(() => {
       return () => {
         if (timerRef.current) {
           clearTimeout(timerRef.current);
@@ -2055,12 +2053,12 @@ function DataCellHeader(_a) {
     "id"
   ]);
   var _a2;
-  const [showMenu, setShowMenu] = (0, import_react8.useState)(false);
-  const [filter, setFilter] = (0, import_react8.useState)(
+  const [showMenu, setShowMenu] = (0, import_react9.useState)(false);
+  const [filter, setFilter] = (0, import_react9.useState)(
     (_a2 = header.column.getFilterValue()) != null ? _a2 : ""
   );
-  const ref = (0, import_react8.useRef)(null);
-  const predeterminedPinned = (0, import_react8.useRef)(false);
+  const ref = (0, import_react9.useRef)(null);
+  const predeterminedPinned = (0, import_react9.useRef)(false);
   const {
     menuRootRef,
     isMenuActive,
@@ -2068,14 +2066,14 @@ function DataCellHeader(_a) {
     listeners: subMenuListeners,
     mobileHide
   } = useSubMenuSystem(node ? node : ref);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.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)(() => {
+  (0, import_react9.useEffect)(() => {
     const handler = setTimeout(() => {
       header.column.setFilterValue(filter);
     }, 500);
@@ -2328,7 +2326,7 @@ function DragAlongCell(_a) {
 DragAlongCell.displayName = "DragAlongCell";
 
 // src/components/Select.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_clsx11 = __toESM(require("clsx"), 1);
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Select = (_a) => {
@@ -2359,11 +2357,11 @@ var Select = (_a) => {
     "displayValue",
     "value"
   ]);
-  const inputRef = (0, import_react9.useRef)(null);
-  const inputContainerRef = (0, import_react9.useRef)(null);
-  const preventFocusOnInitialRender = (0, import_react9.useRef)(true);
-  const [show, setShow] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
+  const inputRef = (0, import_react10.useRef)(null);
+  const inputContainerRef = (0, import_react10.useRef)(null);
+  const preventFocusOnInitialRender = (0, import_react10.useRef)(true);
+  const [show, setShow] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
     var _a2;
     if (preventFocusOnInitialRender.current) {
       preventFocusOnInitialRender.current = false;
@@ -2471,7 +2469,7 @@ Subheader.displayName = "Subheader";
 
 // src/components/Tooltip.tsx
 var import_clsx13 = __toESM(require("clsx"), 1);
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var Tooltip = ({
@@ -2482,11 +2480,11 @@ var Tooltip = ({
   showOnTruncation = false,
   offset = 8
 }) => {
-  const ref = (0, import_react10.useRef)(null);
-  const tooltipRef = (0, import_react10.useRef)(null);
-  const [tooltipPosition, setTooltipPosition] = (0, import_react10.useState)({ top: 0, left: 0 });
-  const [isVisible, setIsVisible] = (0, import_react10.useState)(false);
-  const [removeOpacity, setRemoveOpacity] = (0, import_react10.useState)(false);
+  const ref = (0, import_react11.useRef)(null);
+  const tooltipRef = (0, import_react11.useRef)(null);
+  const [tooltipPosition, setTooltipPosition] = (0, import_react11.useState)({ top: 0, left: 0 });
+  const [isVisible, setIsVisible] = (0, import_react11.useState)(false);
+  const [removeOpacity, setRemoveOpacity] = (0, import_react11.useState)(false);
   const updatePosition = () => {
     if (!ref.current || !tooltipRef.current) return;
     const rect = ref.current.getBoundingClientRect();
@@ -2525,14 +2523,14 @@ var Tooltip = ({
     setIsVisible(false);
     setRemoveOpacity(false);
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (isVisible && tooltipRef.current) {
       requestAnimationFrame(() => {
         updatePosition();
       });
     }
   }, [isVisible]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (isVisible) {
       window.addEventListener("resize", updatePosition);
       return () => window.removeEventListener("resize", updatePosition);
@@ -2588,7 +2586,7 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/useInfiniteScroll.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useInfiniteScroll({
   containerRef,
   onLoadMore,
@@ -2597,7 +2595,7 @@ function useInfiniteScroll({
   enabled = true
   // ✅ Add this
 }) {
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!enabled) return;
     const handleScroll = () => {
       const el2 = containerRef.current;
@@ -2653,12 +2651,12 @@ function DataGrid({
   predeterminedRightPins = []
 }) {
   var _a, _b, _c, _d, _e;
-  const [columnOrder, setColumnOrder] = (0, import_react12.useState)(
+  const [columnOrder, setColumnOrder] = (0, import_react13.useState)(
     () => columns.map((c) => c.id)
   );
-  const [localSorting, setLocalSorting] = (0, import_react12.useState)([]);
-  const [localColumnFilters, setLocalColumnFilters] = (0, import_react12.useState)([]);
-  const [localRowSelection, setLocalRowSelection] = (0, import_react12.useState)({});
+  const [localSorting, setLocalSorting] = (0, import_react13.useState)([]);
+  const [localColumnFilters, setLocalColumnFilters] = (0, import_react13.useState)([]);
+  const [localRowSelection, setLocalRowSelection] = (0, import_react13.useState)({});
   const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
   const setSortingState = pagination ? (updaterOrValue) => {
     const value = typeof updaterOrValue === "function" ? updaterOrValue(
@@ -2676,9 +2674,9 @@ function DataGrid({
     const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
     (onRowSelectionChange != null ? onRowSelectionChange : setLocalRowSelection)(value);
   } : setLocalRowSelection;
-  const dndId = (0, import_react12.useId)();
-  const containerRef = import_react12.default.useRef(null);
-  const [columnVisibility, setColumnVisibility] = (0, import_react12.useState)(() => {
+  const dndId = (0, import_react13.useId)();
+  const containerRef = import_react13.default.useRef(null);
+  const [columnVisibility, setColumnVisibility] = (0, import_react13.useState)(() => {
     const initialVisibility = {};
     columns.forEach((column) => {
       var _a2, _b2;
@@ -2688,13 +2686,13 @@ function DataGrid({
     });
     return initialVisibility;
   });
-  const toggleColumnVisibility = (0, import_react12.useCallback)(
+  const toggleColumnVisibility = (0, import_react13.useCallback)(
     (columnId, isVisible) => {
       setColumnVisibility((prev) => __spreadProps(__spreadValues({}, prev), { [columnId]: isVisible }));
     },
     [setColumnVisibility]
   );
-  const resetColumnVisibility = (0, import_react12.useCallback)(() => {
+  const resetColumnVisibility = (0, import_react13.useCallback)(() => {
     setColumnVisibility(() => {
       const initialVisibility = {};
       columns.forEach((column) => {
@@ -2920,7 +2918,7 @@ function DataGrid({
                                 header.id
                               );
                             }
-                            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react12.default.Fragment, { children: ((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react13.default.Fragment, { children: ((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                               DataGridCell,
                               {
                                 id: id ? `${id}-header-${header.id}` : void 0,
@@ -3267,7 +3265,7 @@ function TableBodyRow({
           if (!cell) {
             return;
           }
-          return ((_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react12.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          return ((_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react13.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             CellElement,
             {
               id: id ? `${id}-cell-${cell.id}` : void 0,
@@ -3368,7 +3366,7 @@ function PinnedColumns(_a) {
             header.id
           );
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react12.default.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react13.default.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           DataGridCell,
           {
             type: "header",
@@ -3434,8 +3432,8 @@ function ColumnSelectorHeaderCell({
   toggleColumnVisibility,
   resetColumnVisibility
 }) {
-  const ref = (0, import_react12.useRef)(null);
-  const [show, setShow] = (0, import_react12.useState)(false);
+  const ref = (0, import_react13.useRef)(null);
+  const [show, setShow] = (0, import_react13.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     DataGridCell,
     {
@@ -3500,7 +3498,7 @@ function ColumnSelectorMenuOption({
   column,
   toggleColumnVisibility
 }) {
-  const [isVisible, setIsVisible] = (0, import_react12.useState)(column.getIsVisible());
+  const [isVisible, setIsVisible] = (0, import_react13.useState)(column.getIsVisible());
   const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuOption, { id, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Checkbox,

package/dist/components/DataGrid.js

@@ -16,15 +16,15 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-VKMJ63WV.js";
+} from "../chunk-ATOEGP3V.js";
 import {
   Menu
-} from "../chunk-VC3R5EUH.js";
-import "../chunk-Z4UCFUF7.js";
+} from "../chunk-6R2HCLEL.js";
+import "../chunk-B6PDZCU7.js";
 import {
   MenuOption
-} from "../chunk-T22EH3MG.js";
-import "../chunk-SEKKGFM6.js";
+} from "../chunk-FOC6LTSX.js";
+import "../chunk-SWA5WVQO.js";
 import {
   Search
 } from "../chunk-LP6AZST2.js";