@gridkitjs/react 0.10.0 → 0.11.1

package/dist/index.js

@@ -2,11 +2,12 @@
 
 // src/DataGrid/DataGrid.tsx
 import {
-  useEffect as useEffect3,
+  useEffect as useEffect5,
+  useId,
   useImperativeHandle,
-  useMemo as useMemo3,
-  useRef as useRef4,
-  useState as useState8
+  useMemo as useMemo4,
+  useRef as useRef13,
+  useState as useState15
 } from "react";
 import {
   moveColumnBefore,
@@ -42,6 +43,45 @@ function classNames(...values) {
   return values.filter(Boolean).join(" ");
 }
 
+// src/DataGrid/icons.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Icon({ children }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children
+    }
+  );
+}
+function ChevronsUpDownIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "m7 15 5 5 5-5" }),
+    /* @__PURE__ */ jsx2("path", { d: "m7 9 5-5 5 5" })
+  ] });
+}
+function ChevronUpIcon() {
+  return /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2("path", { d: "m18 15-6-6-6 6" }) });
+}
+function GroupIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx2("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx2("rect", { x: "8.5", y: "14", width: "7", height: "7", rx: "1" })
+  ] });
+}
+
+// src/DataGrid/isOwnEvent.ts
+function isOwnEvent(event) {
+  return event.target instanceof Node && event.currentTarget.contains(event.target);
+}
+
 // src/DataGrid/useGridNavigation.ts
 import {
   useEffect,
@@ -75,13 +115,11 @@ function useGridNavigation({
   const [gridFocus] = useState(() => createGridFocus(options));
   gridFocus.setOptions(options);
   const focus = useSyncExternalStore(gridFocus.subscribe, gridFocus.getFocus);
-  useLayoutEffect(
-    () => gridFocus.attach({
-      getHeaderRow: () => headerTableRef.current?.tHead?.rows[0] ?? null,
-      getBodyRow: (rowIndex) => findBodyRow(bodyTableRef.current, rowIndex)
-    }),
-    [gridFocus, headerTableRef, bodyTableRef]
-  );
+  const [rows] = useState(() => ({
+    getHeaderRow: () => headerTableRef.current?.tHead?.rows[0] ?? null,
+    getBodyRow: (rowIndex) => findBodyRow(bodyTableRef.current, rowIndex)
+  }));
+  useLayoutEffect(() => gridFocus.attach(rows), [gridFocus, rows]);
   useEffect(() => {
     gridFocus.focusDrawnCell(focus);
   });
@@ -92,6 +130,14 @@ function useGridNavigation({
       rowIndex === focus.rowIndex ? focus.columnIndex : null
     ),
     focusCell: gridFocus.focusCell,
+    focusCellNow: (rowIndex, columnIndex) => {
+      gridFocus.focusCell(rowIndex, columnIndex);
+      gridFocus.focusDrawnCell(gridFocus.getFocus());
+    },
+    focusTabStop: () => {
+      const cells = (focus.rowIndex === HEADER_ROW ? rows.getHeaderRow() : rows.getBodyRow(focus.rowIndex))?.cells;
+      cells?.[Math.min(focus.columnIndex, cells.length - 1)]?.focus();
+    },
     onKeyDown: (event) => {
       if (gridFocus.handleKey(
         event.key,
@@ -143,38 +189,7 @@ function useGridSelection({
 }
 
 // src/DataGrid/components/GridHeader.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function Icon({ children }) {
-  return /* @__PURE__ */ jsx2(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children
-    }
-  );
-}
-function ChevronsUpDownIcon() {
-  return /* @__PURE__ */ jsxs(Icon, { children: [
-    /* @__PURE__ */ jsx2("path", { d: "m7 15 5 5 5-5" }),
-    /* @__PURE__ */ jsx2("path", { d: "m7 9 5-5 5 5" })
-  ] });
-}
-function ChevronUpIcon() {
-  return /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2("path", { d: "m18 15-6-6-6 6" }) });
-}
-function GroupIcon() {
-  return /* @__PURE__ */ jsxs(Icon, { children: [
-    /* @__PURE__ */ jsx2("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
-    /* @__PURE__ */ jsx2("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }),
-    /* @__PURE__ */ jsx2("rect", { x: "8.5", y: "14", width: "7", height: "7", rx: "1" })
-  ] });
-}
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function GridHeader({
   columns,
   resize,
@@ -185,13 +200,14 @@ function GridHeader({
   groupBy,
   groupableColumns,
   groupToggleIconColumns,
+  headerMenu,
   nav,
   selection
 }) {
   const beforeId = drag.dropTarget?.kind === "column-order" ? drag.dropTarget.beforeId : void 0;
   const draggedEntry = columns.find((entry) => entry.id === drag.draggedColumnId) ?? null;
-  return /* @__PURE__ */ jsxs("thead", { children: [
-    /* @__PURE__ */ jsx2("tr", { className: "grid-header", role: "row", "aria-rowindex": 1, children: columns.map((entry, index) => {
+  return /* @__PURE__ */ jsxs2("thead", { children: [
+    /* @__PURE__ */ jsx3("tr", { className: "grid-header", role: "row", "aria-rowindex": 1, children: columns.map((entry, index) => {
       const { column } = entry;
       const resizing = resize.activeColumnId === entry.id;
       const dragging = drag.draggedColumnId === entry.id;
@@ -210,9 +226,10 @@ function GridHeader({
         reorderable: entry.reorderable,
         resizable: entry.resizable,
         sortable,
-        groupable
+        groupable,
+        contextMenu: headerMenu
       });
-      return /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsxs2(
         "th",
         {
           scope: "col",
@@ -238,6 +255,7 @@ function GridHeader({
             selection.selectColumn(entry.id, intentOf(event));
           },
           onKeyDown: (event) => {
+            if (!isOwnEvent(event)) return;
             const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
             const direction = event.key === "ArrowLeft" ? -1 : 1;
             if (horizontal && event.ctrlKey && entry.reorderable) {
@@ -313,7 +331,7 @@ function GridHeader({
              * A pointer affordance only, same as the other two — the
              * keyboard equivalent is Alt+ArrowDown on the header itself.
              */
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx3(
               "span",
               {
                 className: classNames(
@@ -329,7 +347,7 @@ function GridHeader({
                   event.stopPropagation();
                   controller.toggleGroupBy(entry.id);
                 },
-                children: /* @__PURE__ */ jsx2(GroupIcon, {})
+                children: /* @__PURE__ */ jsx3(GroupIcon, {})
               }
             ),
             entry.label,
@@ -339,7 +357,7 @@ function GridHeader({
              * lives on the header itself, under Alt+ArrowUp (plain) /
              * Alt+Shift+ArrowUp (stacking).
              */
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsxs2(
               "span",
               {
                 className: classNames(
@@ -357,8 +375,8 @@ function GridHeader({
                   });
                 },
                 children: [
-                  sortDirection === null ? /* @__PURE__ */ jsx2(ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsx2(ChevronUpIcon, {}),
-                  sortPriority !== null && sortPriority > 1 && /* @__PURE__ */ jsx2("span", { className: "header-sort-priority", children: sortPriority })
+                  sortDirection === null ? /* @__PURE__ */ jsx3(ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsx3(ChevronUpIcon, {}),
+                  sortPriority !== null && sortPriority > 1 && /* @__PURE__ */ jsx3("span", { className: "header-sort-priority", children: sortPriority })
                 ]
               }
             ),
@@ -368,7 +386,7 @@ function GridHeader({
              * put N tab stops inside a widget that is meant to have one.
              * The keyboard resizes from the header itself, under Alt.
              */
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx3(
               "span",
               {
                 className: "header-resize-handle",
@@ -388,7 +406,7 @@ function GridHeader({
       );
     }) }),
     draggedEntry !== null && drag.ghostTransform !== null && createPortal(
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "div",
         {
           className: "gridkit-data-grid header-cell drag-ghost",
@@ -473,7 +491,7 @@ function renderAggregate(value, spec, column, rows, locale) {
 }
 
 // src/DataGrid/components/GridGroupRow.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function formatGroupValue(value, column, locale, messages) {
   return value === null || value === void 0 ? messages.blankGroupValue : formatCellValue(value, column, locale, void 0, messages);
 }
@@ -490,6 +508,7 @@ function GridGroupRowComponent({
   posinset,
   setsize,
   focused,
+  contextMenu,
   aggregates,
   results,
   definitions,
@@ -497,7 +516,7 @@ function GridGroupRowComponent({
   cellMessages,
   ref
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "tr",
     {
       ref,
@@ -513,21 +532,21 @@ function GridGroupRowComponent({
         "grid-group-row",
         `is-group-level-${String(level)}`
       ),
-      children: /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsx4(
         "td",
         {
           role: "gridcell",
           colSpan: columnCount,
           tabIndex: focused ? 0 : -1,
-          "aria-keyshortcuts": "Space Enter",
+          "aria-keyshortcuts": contextMenu ? "Space Enter Shift+F10" : "Space Enter",
           className: "grid-group-cell",
-          children: /* @__PURE__ */ jsxs2(
+          children: /* @__PURE__ */ jsxs3(
             "div",
             {
               className: "grid-group-cell-content",
               style: { paddingInlineStart: `${String(level * 1.25 + 0.5)}rem` },
               children: [
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "span",
                   {
                     className: classNames(
@@ -537,18 +556,18 @@ function GridGroupRowComponent({
                     "aria-hidden": "true"
                   }
                 ),
-                /* @__PURE__ */ jsxs2("span", { className: "group-label", children: [
+                /* @__PURE__ */ jsxs3("span", { className: "group-label", children: [
                   resolveColumnLabel(groupColumn),
                   ":",
                   " ",
                   formatGroupValue(value, groupColumn, locale, cellMessages)
                 ] }),
-                /* @__PURE__ */ jsxs2("span", { className: "group-count", children: [
+                /* @__PURE__ */ jsxs3("span", { className: "group-count", children: [
                   "(",
                   count,
                   ")"
                 ] }),
-                aggregates.length > 0 && /* @__PURE__ */ jsx3("span", { className: "group-aggregates", children: aggregates.map((spec) => {
+                aggregates.length > 0 && /* @__PURE__ */ jsx4("span", { className: "group-aggregates", children: aggregates.map((spec) => {
                   const key = spec.id ?? spec.columnId;
                   const aggregateValue = results.get(key);
                   const column = definitions.get(spec.columnId);
@@ -560,7 +579,7 @@ function GridGroupRowComponent({
                     locale
                   );
                   const aggregateLabel = spec.id ?? (column === void 0 ? spec.columnId : resolveColumnLabel(column));
-                  return /* @__PURE__ */ jsxs2("span", { className: "group-aggregate", children: [
+                  return /* @__PURE__ */ jsxs3("span", { className: "group-aggregate", children: [
                     aggregateLabel,
                     ": ",
                     rendered
@@ -581,7 +600,7 @@ var GridGroupRow_default = GridGroupRow;
 
 // src/DataGrid/components/GridGroupSummaryRow.tsx
 import { memo as memo2 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function GridGroupSummaryRowComponent({
   groupId,
   level,
@@ -593,7 +612,7 @@ function GridGroupSummaryRowComponent({
   locale,
   ref
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "tr",
     {
       ref,
@@ -609,7 +628,7 @@ function GridGroupSummaryRowComponent({
         const specs = aggregates.filter(
           (candidate) => candidate.columnId === entry.id
         );
-        return /* @__PURE__ */ jsxs3(
+        return /* @__PURE__ */ jsxs4(
           "td",
           {
             role: "gridcell",
@@ -617,7 +636,7 @@ function GridGroupSummaryRowComponent({
             className: "grid-group-summary-cell",
             style: { textAlign: specs[0]?.alignment ?? entry.alignment },
             children: [
-              entry.id === columns[0]?.id && /* @__PURE__ */ jsx4(
+              entry.id === columns[0]?.id && /* @__PURE__ */ jsx5(
                 "span",
                 {
                   className: "grid-group-summary-indent",
@@ -655,7 +674,7 @@ import {
   formatCellValue as formatCellValue2
 } from "@gridkitjs/core";
 import { memo as memo3 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function GridRowComponent({
   columns,
   rowId,
@@ -669,13 +688,18 @@ function GridRowComponent({
   focusedColumnIndex,
   rowsSelectable,
   cellsSelectable,
+  contextMenu,
   locale,
   cellMessages,
   rowClassName,
   rowAttributes,
   ref
 }) {
-  return /* @__PURE__ */ jsx5(
+  const shortcuts = [
+    cellsSelectable ? "Space Enter" : "",
+    contextMenu ? "Shift+F10" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx6(
     "tr",
     {
       ...rowAttributes,
@@ -693,7 +717,7 @@ function GridRowComponent({
       children: columns.map(({ id, column, alignment }, columnIndex) => {
         const value = accessDotted(row, column.field);
         const cellSelected = id === selectedColumnId;
-        return /* @__PURE__ */ jsx5(
+        return /* @__PURE__ */ jsx6(
           "td",
           {
             role: "gridcell",
@@ -701,7 +725,7 @@ function GridRowComponent({
             "aria-colindex": columnIndex + 1,
             tabIndex: tabIndexFor(columnIndex, focusedColumnIndex),
             ...ariaAttr(cellsSelectable, "aria-selected", cellSelected),
-            ...ariaAttr(cellsSelectable, "aria-keyshortcuts", "Space Enter"),
+            ...ariaAttr(shortcuts !== "", "aria-keyshortcuts", shortcuts),
             className: classNames(
               "grid-cell",
               id === activeColumnId ? "is-resizing" : "",
@@ -729,7 +753,7 @@ var GridRow = memo3(GridRowComponent);
 var GridRow_default = GridRow;
 
 // src/DataGrid/components/GridBody.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function groupAriaMeta(rows) {
   const totals = /* @__PURE__ */ new Map();
   for (const entry of rows) {
@@ -768,7 +792,9 @@ function GridBody({
   getRowProps,
   onRowClick,
   onRowDoubleClick,
-  messages
+  messages,
+  cellMenu,
+  groupMenu
 }) {
   const { selectedCell, rowMode, cellMode, toggleOnClick } = selection;
   const ariaMeta = useMemo2(() => groupAriaMeta(rows), [rows]);
@@ -826,7 +852,7 @@ function GridBody({
       callback(pointer);
     }
   }
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "tbody",
     {
       className: "grid-body",
@@ -856,6 +882,7 @@ function GridBody({
         reportRowPointer(event, onRowDoubleClick);
       },
       onKeyDown: (event) => {
+        if (!isOwnEvent(event)) return;
         const group = groupRowFrom(event.target);
         if (group !== null) {
           if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
@@ -890,7 +917,7 @@ function GridBody({
         // to give the browser's scrollbar the correct total height and thumb
         // position, the same way `GridFooter`'s `<tfoot>` isn't a "row" to
         // any of this grid's own row-counting logic.
-        /* @__PURE__ */ jsx6("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx7(
           "td",
           {
             style: {
@@ -903,7 +930,7 @@ function GridBody({
         visibleRows.map((entry) => {
           if (!("kind" in entry)) {
             const rowProps = rowPropsOf(entry.rowId);
-            return /* @__PURE__ */ jsx6(
+            return /* @__PURE__ */ jsx7(
               GridRow_default,
               {
                 ref: virtualRange?.measureRow(entry.rowIndex),
@@ -919,6 +946,7 @@ function GridBody({
                 focusedColumnIndex: nav.focus.rowIndex === entry.rowIndex ? nav.focus.columnIndex : null,
                 rowsSelectable: rowMode !== false,
                 cellsSelectable: cellMode !== false,
+                contextMenu: cellMenu,
                 locale,
                 cellMessages,
                 rowClassName: rowProps.className,
@@ -928,7 +956,7 @@ function GridBody({
             );
           }
           if (entry.kind === "group-summary") {
-            return /* @__PURE__ */ jsx6(
+            return /* @__PURE__ */ jsx7(
               GridGroupSummaryRow_default,
               {
                 ref: virtualRange?.measureRow(entry.rowIndex),
@@ -944,7 +972,7 @@ function GridBody({
               `${entry.groupId}-summary`
             );
           }
-          return /* @__PURE__ */ jsx6(
+          return /* @__PURE__ */ jsx7(
             GridGroupRow_default,
             {
               ref: virtualRange?.measureRow(entry.rowIndex),
@@ -964,12 +992,13 @@ function GridBody({
               definitions,
               locale,
               cellMessages,
-              focused: nav.focus.rowIndex === entry.rowIndex
+              focused: nav.focus.rowIndex === entry.rowIndex,
+              contextMenu: groupMenu
             },
             entry.groupId
           );
         }),
-        virtualRange !== null && virtualRange.offsetAfter > 0 && /* @__PURE__ */ jsx6("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx6(
+        virtualRange !== null && virtualRange.offsetAfter > 0 && /* @__PURE__ */ jsx7("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx7(
           "td",
           {
             style: {
@@ -979,15 +1008,15 @@ function GridBody({
             }
           }
         ) }),
-        infiniteScroll?.hasMore && /* @__PURE__ */ jsxs4(Fragment, { children: [
-          infiniteScroll.isLoadingMore === true && /* @__PURE__ */ jsx6("tr", { "aria-hidden": "true", className: "grid-loading-row", children: /* @__PURE__ */ jsx6("td", { colSpan: columns.length, className: "grid-loading-cell", children: infiniteScroll.loadingTemplate ? infiniteScroll.loadingTemplate() : messages.loadingMore }) }),
-          /* @__PURE__ */ jsx6(
+        infiniteScroll?.hasMore && /* @__PURE__ */ jsxs5(Fragment, { children: [
+          infiniteScroll.isLoadingMore === true && /* @__PURE__ */ jsx7("tr", { "aria-hidden": "true", className: "grid-loading-row", children: /* @__PURE__ */ jsx7("td", { colSpan: columns.length, className: "grid-loading-cell", children: infiniteScroll.loadingTemplate ? infiniteScroll.loadingTemplate() : messages.loadingMore }) }),
+          /* @__PURE__ */ jsx7(
             "tr",
             {
               "aria-hidden": "true",
               ref: sentinelRef,
               className: "grid-sentinel-row",
-              children: /* @__PURE__ */ jsx6(
+              children: /* @__PURE__ */ jsx7(
                 "td",
                 {
                   colSpan: columns.length,
@@ -1003,7 +1032,7 @@ function GridBody({
 }
 
 // src/DataGrid/components/GridFooter.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function GridFooter({
   columns,
   aggregates,
@@ -1011,11 +1040,11 @@ function GridFooter({
   rows,
   locale
 }) {
-  return /* @__PURE__ */ jsx7("tfoot", { children: /* @__PURE__ */ jsx7("tr", { className: "grid-footer", role: "row", children: columns.map((entry) => {
+  return /* @__PURE__ */ jsx8("tfoot", { children: /* @__PURE__ */ jsx8("tr", { className: "grid-footer", role: "row", children: columns.map((entry) => {
     const specs = aggregates.filter(
       (candidate) => candidate.columnId === entry.id
     );
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "td",
       {
         role: "gridcell",
@@ -1041,19 +1070,19 @@ function GridFooter({
 
 // src/DataGrid/components/GridPager.tsx
 import { paginationWindow } from "@gridkitjs/core";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function GridPager({ pager, config, messages }) {
   const { pagination, pageCount, currentPage } = pager;
   const variant = config?.variant ?? "compact";
   const sizeOptions = config?.sizeOptions;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: "gridkit-grid-pager",
       role: "group",
       "aria-label": messages.pagerLabel,
       children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -1069,7 +1098,7 @@ function GridPager({ pager, config, messages }) {
           boundaryCount: config?.boundaryCount,
           siblingCount: config?.siblingCount
         }).map(
-          (entry, index) => entry === "ellipsis" ? /* @__PURE__ */ jsx8(
+          (entry, index) => entry === "ellipsis" ? /* @__PURE__ */ jsx9(
             "span",
             {
               className: "grid-pager-ellipsis",
@@ -1077,7 +1106,7 @@ function GridPager({ pager, config, messages }) {
               children: "\u2026"
             },
             `ellipsis-${String(index)}`
-          ) : /* @__PURE__ */ jsx8(
+          ) : /* @__PURE__ */ jsx9(
             "button",
             {
               type: "button",
@@ -1091,8 +1120,8 @@ function GridPager({ pager, config, messages }) {
             },
             entry
           )
-        ) : /* @__PURE__ */ jsx8("span", { className: "grid-pager-status", children: messages.pageStatus(pageCount === 0 ? 0 : currentPage, pageCount) }),
-        /* @__PURE__ */ jsx8(
+        ) : /* @__PURE__ */ jsx9("span", { className: "grid-pager-status", children: messages.pageStatus(pageCount === 0 ? 0 : currentPage, pageCount) }),
+        /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -1104,16 +1133,16 @@ function GridPager({ pager, config, messages }) {
             children: messages.nextPage
           }
         ),
-        sizeOptions !== void 0 && sizeOptions.length > 0 && /* @__PURE__ */ jsxs5("label", { className: "grid-pager-page-size", children: [
+        sizeOptions !== void 0 && sizeOptions.length > 0 && /* @__PURE__ */ jsxs6("label", { className: "grid-pager-page-size", children: [
           messages.pageSizeLabel,
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "select",
             {
               value: pagination.pageSize,
               onChange: (event) => {
                 pager.setPageSize(Number(event.target.value));
               },
-              children: sizeOptions.map((size) => /* @__PURE__ */ jsx8("option", { value: size, children: size }, size))
+              children: sizeOptions.map((size) => /* @__PURE__ */ jsx9("option", { value: size, children: size }, size))
             }
           )
         ] })
@@ -1198,7 +1227,7 @@ function useGroupByDrag({
 }
 
 // src/DataGrid/components/GroupByBar.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function GroupByBar({
   columns,
   definitions,
@@ -1235,7 +1264,7 @@ function GroupByBar({
     }
     controller.moveGroupBy(columnId, beforeColumnId);
   }
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: classNames(
@@ -1247,12 +1276,12 @@ function GroupByBar({
       role: "group",
       "aria-label": messages.groupByBarLabel,
       children: [
-        showPlaceholder && /* @__PURE__ */ jsx9("span", { className: "group-by-bar-placeholder", children: messages.groupByBarPlaceholder }),
+        showPlaceholder && /* @__PURE__ */ jsx10("span", { className: "group-by-bar-placeholder", children: messages.groupByBarPlaceholder }),
         groupBy.map((entry, index) => {
           const dropBefore = activeDropTarget?.beforeColumnId === entry.columnId;
           const dropAfter = activeDropTarget?.beforeColumnId === null && index === groupBy.length - 1;
           const dragging = chipDrag.draggedColumnId === entry.columnId;
-          return /* @__PURE__ */ jsxs6(
+          return /* @__PURE__ */ jsxs7(
             "span",
             {
               className: classNames(
@@ -1283,8 +1312,8 @@ function GroupByBar({
                 }
               },
               children: [
-                /* @__PURE__ */ jsx9("span", { className: "group-by-chip-label", children: labelFor(entry.columnId) }),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10("span", { className: "group-by-chip-label", children: labelFor(entry.columnId) }),
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
@@ -1305,7 +1334,7 @@ function GroupByBar({
           );
         }),
         chipDrag.draggedColumnId !== null && chipDrag.ghostTransform !== null && createPortal2(
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             "span",
             {
               className: "group-by-chip drag-ghost",
@@ -1321,127 +1350,1554 @@ function GroupByBar({
   );
 }
 
-// src/DataGrid/useColumnDrag.ts
+// src/DataGrid/announcedCallbacks.ts
 import {
-  resolveKeyboardDropTarget as resolveKeyboardDropTarget2
+  isColumnVisible
 } from "@gridkitjs/core";
-import { resolveColumnDropTarget } from "@gridkitjs/dom";
-function useColumnDrag({
-  order,
-  groupBy,
-  groupByDraggableIds,
-  onDrop
+function announcedCallbacks({
+  callbacks,
+  announce,
+  messages,
+  columnName,
+  columnOf
 }) {
-  const drag = useDragReorder({
-    resolveTarget: (clientX, clientY, movedId) => resolveColumnDropTarget(clientX, clientY, movedId, {
-      order,
-      groupBy,
-      groupByDraggableIds
-    }),
-    onDrop
-  });
-  function startDrag(entry, event) {
-    drag.startDrag(entry.id, event.currentTarget, event);
-  }
-  function moveByKeyboard(entry, direction) {
-    const beforeId = resolveKeyboardDropTarget2(order, entry.id, direction);
-    if (beforeId === void 0) {
-      return;
-    }
-    onDrop({ kind: "column-order", beforeId }, entry.id);
-  }
   return {
-    draggedColumnId: drag.draggedId,
-    dropTarget: drag.dropTarget,
-    ghostTransform: drag.ghostTransform,
-    startDrag,
-    moveByKeyboard,
-    justDragged: drag.justDragged
+    /**
+     * Announced only once the drag ends: the controller reports the
+     * continuous `"move"` phase as well, and a live region given every frame
+     * of a drag says nothing an assistive technology can keep up with.
+     */
+    onColumnResize: (event) => {
+      callbacks.onColumnResize?.(event);
+      if (event.phase === "end") {
+        announce(
+          messages.columnResized(
+            columnName(event.columnId),
+            Math.round(event.width)
+          )
+        );
+      }
+    },
+    /**
+     * Naming a column shown or hidden alone, and counting several — "Show
+     * all" in the column chooser, or `hideColumns` given a list. A change
+     * that shows some and hides others, as restoring a layout can, has no
+     * one thing to say, and says nothing.
+     */
+    onColumnVisibilityChange: (event) => {
+      callbacks.onColumnVisibilityChange?.(event);
+      const { columnIds, visibility } = event;
+      const [columnId] = columnIds;
+      const shownCount = columnIds.filter((id) => {
+        const column = columnOf(id);
+        return column !== void 0 && isColumnVisible(column, visibility);
+      }).length;
+      if (columnId === void 0 || shownCount !== 0 && shownCount !== columnIds.length) {
+        return;
+      }
+      const shown = shownCount > 0;
+      if (columnIds.length > 1) {
+        announce(
+          shown ? messages.columnsShown(columnIds.length) : messages.columnsHidden(columnIds.length)
+        );
+        return;
+      }
+      announce(
+        shown ? messages.columnShown(columnName(columnId)) : messages.columnHidden(columnName(columnId))
+      );
+    },
+    /** A toggle, a stack, or a clear back to "none" each get their own. */
+    onColumnSortChange: (event) => {
+      callbacks.onColumnSortChange?.(event);
+      const entry = event.sort.find(
+        (candidate) => candidate.columnId === event.columnId
+      );
+      if (entry === void 0) {
+        announce(messages.sortCleared(columnName(event.columnId)));
+        return;
+      }
+      announce(
+        messages.columnSorted(
+          columnName(event.columnId),
+          entry.direction,
+          event.sort.indexOf(entry) + 1,
+          event.sort.length
+        )
+      );
+    },
+    onGroupByChange: (event) => {
+      callbacks.onGroupByChange?.(event);
+      const entry = event.groupBy.find(
+        (candidate) => candidate.columnId === event.columnId
+      );
+      if (entry === void 0) {
+        announce(messages.groupingRemoved(columnName(event.columnId)));
+        return;
+      }
+      announce(
+        messages.groupedBy(
+          columnName(event.columnId),
+          event.groupBy.indexOf(entry) + 1,
+          event.groupBy.length
+        )
+      );
+    },
+    /**
+     * `groupId: null` marks `expandAll`/`collapseAll`, which touch every
+     * group in one call rather than one at a time — announced as a single
+     * summary instead of naming a group that doesn't apply.
+     */
+    onGroupExpansionChange: (event) => {
+      callbacks.onGroupExpansionChange?.(event);
+      if (event.groupId === null) {
+        announce(
+          event.expansion.length === 0 ? messages.allGroupsExpanded : messages.allGroupsCollapsed
+        );
+        return;
+      }
+      announce(
+        event.expansion.includes(event.groupId) ? messages.groupCollapsed : messages.groupExpanded
+      );
+    },
+    onPaginationChange: (event) => {
+      callbacks.onPaginationChange?.(event);
+      announce(
+        messages.pageStatus(event.pagination.pageIndex + 1, event.pageCount)
+      );
+    },
+    /**
+     * Unlike rows and columns, a cell selection is always exactly one cell —
+     * there is no multi-cell range — so it never crosses the count's >1
+     * threshold and the focused cell's own `aria-selected` is the only
+     * feedback a screen-reader user would otherwise get. Announced on every
+     * change that lands on a cell instead.
+     */
+    onCellSelectionChange: (event) => {
+      callbacks.onCellSelectionChange?.(event);
+      if (event.selected !== null) {
+        announce(
+          messages.cellSelected(
+            columnName(event.selected.columnId),
+            event.selected.rowIndex + 1
+          )
+        );
+      }
+    },
+    /**
+     * Announced only for a change touching more than one row or column. A
+     * single selection is already carried by the focused member's own
+     * `aria-selected`, and repeating it here would talk over that. Counted
+     * by id, so rows the change touched off screen — on another page, in a
+     * collapsed group — count too.
+     */
+    onSelectionDiff: (event) => {
+      if (event.added.length + event.removed.length > 1) {
+        announce(messages.selectedCount(event.selection.length, event.target));
+      }
+    }
   };
 }
 
-// src/DataGrid/useColumnResize.ts
-import {
-  useState as useState4
-} from "react";
+// src/DataGrid/commands/useGridCommands.ts
+import { useMemo as useMemo3 } from "react";
 import {
-  beginColumnResize,
-  clampColumnWidth,
-  resolveColumnConstraints,
-  sizeColumnToContent
+  createCommandContext,
+  resolveCommands,
+  runCommand
 } from "@gridkitjs/core";
-import { measureColumnContent, startColumnResizeGesture } from "@gridkitjs/dom";
-function useColumnResize({
-  tableRef,
+function useGridCommands({
   controller,
-  columnSizeDefaults
+  commands: appCommands,
+  onCommand,
+  messages,
+  announce,
+  resize,
+  openPanel
 }) {
-  const [activeColumnId, setActiveColumnId] = useState4(null);
-  function startResize(entry, event) {
-    event.stopPropagation();
-    const session = beginColumnResize(
-      entry.column,
-      entry.width,
-      event.clientX,
-      columnSizeDefaults
-    );
-    const base = controller.getState().columnSizing;
-    const started = startColumnResizeGesture(
-      event.currentTarget,
-      event,
-      session,
-      {
-        onMove(width) {
-          controller.resizeColumn(session.columnId, width, "move");
-        },
-        onEnd(width) {
-          setActiveColumnId(null);
-          if (width !== null) {
-            controller.resizeColumn(session.columnId, width, "end");
-          }
-        },
-        /**
-         * Escape puts back only the dragged column's pre-drag width, merged
-         * into whatever the sizing state is *now* — not the `base` snapshot
-         * taken at drag-start — so a different column resized via keyboard
-         * while this drag was still open keeps its change instead of being
-         * clobbered by a stale restore.
-         */
-        onCancel() {
-          setActiveColumnId(null);
-          controller.cancelColumnResize(
-            session.columnId,
-            base,
-            session.startWidth
-          );
+  const commands = useMemo3(() => resolveCommands(appCommands), [appCommands]);
+  const host = {
+    autoFitColumns: (columnIds) => {
+      const { columns } = controller.getView();
+      let fitted = 0;
+      for (const columnId of columnIds) {
+        const entry = columns.find((candidate) => candidate.id === columnId);
+        if (entry !== void 0 && resize.sizeToContent(entry)) {
+          fitted += 1;
         }
       }
-    );
-    if (started) {
-      setActiveColumnId(session.columnId);
-    }
+      if (fitted > 1) {
+        announce(messages.columnsAutoFitted(fitted));
+      }
+    },
+    openPanel,
+    announce
+  };
+  function contextFor(target) {
+    return createCommandContext({ controller, target, messages, host });
   }
-  function sizeToContent(entry) {
-    const table = tableRef.current;
-    if (table === null) {
-      return;
-    }
-    const measured = measureColumnContent(table, entry.id);
-    if (measured === null) {
-      return;
+  function report(commandId, target, source) {
+    onCommand?.({ commandId, target, source });
+  }
+  return {
+    commands,
+    host,
+    contextFor,
+    report,
+    run: (commandId, target, source) => {
+      const command = commands.get(commandId);
+      if (command === void 0) {
+        console.error(`DataGrid: there is no command \`${commandId}\` to run.`);
+        return false;
+      }
+      if (!runCommand(command, contextFor(target))) {
+        return false;
+      }
+      report(commandId, target, source);
+      return true;
     }
-    controller.resizeColumn(
-      entry.id,
-      sizeColumnToContent(
-        measured,
-        resolveColumnConstraints(entry.column, columnSizeDefaults)
-      ),
-      "end"
-    );
+  };
+}
+
+// src/DataGrid/menu/GridMenu.tsx
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState as useState4 } from "react";
+import {
+  attachMenu
+} from "@gridkitjs/dom";
+
+// src/DataGrid/overlay/Overlay.tsx
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import {
+  attachOverlay
+} from "@gridkitjs/dom";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var ANCHOR_GAP = 4;
+function overlayThemeClassName(element) {
+  const scope = element?.closest(".gridkit-light, .gridkit-dark");
+  if (scope === null || scope === void 0) {
+    return "";
   }
-  function nudge(entry, delta) {
-    controller.resizeColumn(
-      entry.id,
+  return scope.classList.contains("gridkit-dark") ? "gridkit-dark" : "gridkit-light";
+}
+function Overlay({
+  anchor,
+  placement,
+  gap,
+  offset,
+  initialFocus,
+  returnFocusTo,
+  ignoreScrollAfterInput,
+  themeClassName,
+  onDismiss,
+  children
+}) {
+  const panelRef = useRef2(null);
+  const onDismissRef = useRef2(onDismiss);
+  useLayoutEffect2(() => {
+    onDismissRef.current = onDismiss;
+  });
+  useLayoutEffect2(() => {
+    const panel = panelRef.current;
+    if (panel === null) {
+      return void 0;
+    }
+    return attachOverlay(anchor, panel, {
+      placement,
+      gap,
+      offset,
+      initialFocus,
+      returnFocusTo,
+      ignoreScrollAfterInput,
+      onDismiss: (reason) => {
+        onDismissRef.current(reason);
+      }
+    });
+  }, [
+    anchor,
+    placement,
+    gap,
+    offset,
+    initialFocus,
+    returnFocusTo,
+    ignoreScrollAfterInput
+  ]);
+  return createPortal3(
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        ref: panelRef,
+        className: classNames("gridkit-overlay", themeClassName),
+        children
+      }
+    ),
+    document.body
+  );
+}
+
+// src/DataGrid/menu/menuIcons.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var BUILT_IN_ICONS = {
+  sortAscending: () => /* @__PURE__ */ jsxs8(Icon, { children: [
+    /* @__PURE__ */ jsx12("path", { d: "m3 8 4-4 4 4" }),
+    /* @__PURE__ */ jsx12("path", { d: "M7 4v16" }),
+    /* @__PURE__ */ jsx12("path", { d: "M11 12h4" }),
+    /* @__PURE__ */ jsx12("path", { d: "M11 16h7" }),
+    /* @__PURE__ */ jsx12("path", { d: "M11 20h10" })
+  ] }),
+  sortDescending: () => /* @__PURE__ */ jsxs8(Icon, { children: [
+    /* @__PURE__ */ jsx12("path", { d: "m3 16 4 4 4-4" }),
+    /* @__PURE__ */ jsx12("path", { d: "M7 20V4" }),
+    /* @__PURE__ */ jsx12("path", { d: "M11 4h10" }),
+    /* @__PURE__ */ jsx12("path", { d: "M11 8h7" }),
+    /* @__PURE__ */ jsx12("path", { d: "M11 12h4" })
+  ] }),
+  group: () => /* @__PURE__ */ jsx12(GroupIcon, {}),
+  hide: () => /* @__PURE__ */ jsxs8(Icon, { children: [
+    /* @__PURE__ */ jsx12("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+    /* @__PURE__ */ jsx12("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
+    /* @__PURE__ */ jsx12("path", { d: "M6.61 6.61A13.53 13.53 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
+    /* @__PURE__ */ jsx12("path", { d: "m2 2 20 20" })
+  ] }),
+  autoFit: () => /* @__PURE__ */ jsxs8(Icon, { children: [
+    /* @__PURE__ */ jsx12("path", { d: "m18 8 4 4-4 4" }),
+    /* @__PURE__ */ jsx12("path", { d: "M2 12h20" }),
+    /* @__PURE__ */ jsx12("path", { d: "m6 8-4 4 4 4" })
+  ] })
+};
+var ICONS = new Map(Object.entries(BUILT_IN_ICONS));
+function MenuIcon({ name }) {
+  const draw = name === void 0 ? void 0 : ICONS.get(name);
+  return draw === void 0 ? null : draw();
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx12(Icon, { children: /* @__PURE__ */ jsx12("path", { d: "M20 6 9 17l-5-5" }) });
+}
+function ChevronDownIcon() {
+  return /* @__PURE__ */ jsx12(Icon, { children: /* @__PURE__ */ jsx12("path", { d: "m6 9 6 6 6-6" }) });
+}
+function ChevronRightIcon() {
+  return /* @__PURE__ */ jsx12(Icon, { children: /* @__PURE__ */ jsx12("path", { d: "m9 18 6-6-6-6" }) });
+}
+
+// src/DataGrid/menu/GridMenu.tsx
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function itemElement(menu, id) {
+  return Array.from(
+    menu.querySelectorAll("[data-gridkit-menu-item]")
+  ).find((item) => item.getAttribute("data-gridkit-menu-item") === id) ?? null;
+}
+function topInset(menu) {
+  const style = getComputedStyle(menu);
+  return parseFloat(style.borderTopWidth) + parseFloat(style.paddingTop);
+}
+function MenuItem({
+  entry,
+  expanded
+}) {
+  const isItem = entry.type === "item";
+  const checked = isItem ? entry.checked : void 0;
+  const shortcut = isItem ? entry.shortcut : void 0;
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      role: checked === void 0 ? "menuitem" : "menuitemcheckbox",
+      "data-gridkit-menu-item": entry.id,
+      className: "menu-item",
+      ...ariaAttr(isItem && entry.disabled, "aria-disabled", true),
+      ...ariaAttr(checked !== void 0, "aria-checked", checked),
+      ...ariaAttr(shortcut !== void 0, "aria-keyshortcuts", shortcut),
+      ...ariaAttr(!isItem, "aria-haspopup", "menu"),
+      ...ariaAttr(!isItem, "aria-expanded", expanded),
+      children: [
+        /* @__PURE__ */ jsx13("span", { className: "menu-item-icon", "aria-hidden": "true", children: checked === true ? /* @__PURE__ */ jsx13(CheckIcon, {}) : /* @__PURE__ */ jsx13(MenuIcon, { name: entry.icon }) }),
+        /* @__PURE__ */ jsx13("span", { className: "menu-item-label", children: entry.label }),
+        shortcut !== void 0 && /* @__PURE__ */ jsx13("span", { className: "menu-item-shortcut", "aria-hidden": "true", children: shortcut }),
+        !isItem && /* @__PURE__ */ jsx13("span", { className: "menu-submenu-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx13(ChevronRightIcon, {}) })
+      ]
+    }
+  );
+}
+function GridMenu({
+  entries,
+  label,
+  themeClassName,
+  onRun,
+  onClose,
+  onCloseSubmenu,
+  behaviourRef
+}) {
+  const menuRef = useRef3(null);
+  const submenuBehaviourRef = useRef3(null);
+  const [submenu, setSubmenu] = useState4(null);
+  const isSubmenu = onCloseSubmenu !== void 0;
+  const latest = useRef3({ entries, submenu, onRun, onClose, onCloseSubmenu });
+  useLayoutEffect3(() => {
+    latest.current = { entries, submenu, onRun, onClose, onCloseSubmenu };
+  });
+  useLayoutEffect3(() => {
+    const menu = menuRef.current;
+    if (menu === null) {
+      return void 0;
+    }
+    const behaviour = attachMenu(menu, {
+      onActivate: (id) => {
+        const item = latest.current.entries.find(
+          (entry) => entry.type === "item" && entry.id === id
+        );
+        if (item !== void 0) {
+          latest.current.onRun(item);
+        }
+      },
+      onOpenSubmenu: (id, { focus }) => {
+        if (latest.current.submenu?.id === id) {
+          if (focus === "first") {
+            submenuBehaviourRef.current?.focusItem(0);
+          }
+          return;
+        }
+        const anchor = itemElement(menu, id);
+        if (anchor !== null) {
+          setSubmenu({ id, anchor, focus, offset: -topInset(menu) });
+        }
+      },
+      onCollapseSubmenu: () => {
+        setSubmenu(null);
+      },
+      onCloseSubmenu: isSubmenu ? () => {
+        latest.current.onCloseSubmenu?.();
+      } : void 0,
+      onClose: () => {
+        latest.current.onClose();
+      }
+    });
+    if (behaviourRef !== void 0) {
+      behaviourRef.current = behaviour;
+    }
+    return () => {
+      if (behaviourRef !== void 0) {
+        behaviourRef.current = null;
+      }
+      behaviour.detach();
+    };
+  }, [isSubmenu, behaviourRef]);
+  function closeSubmenu() {
+    setSubmenu(null);
+  }
+  const openEntry = submenu === null ? void 0 : entries.find(
+    (entry) => entry.type === "submenu" && entry.id === submenu.id
+  );
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+    /* @__PURE__ */ jsx13(
+      "div",
+      {
+        ref: menuRef,
+        role: "menu",
+        "aria-label": label,
+        className: "gridkit-menu",
+        children: entries.map(
+          (entry) => entry.type === "separator" ? /* @__PURE__ */ jsx13("div", { role: "separator", className: "menu-separator" }, entry.key) : /* @__PURE__ */ jsx13(
+            MenuItem,
+            {
+              entry,
+              expanded: entry.id === submenu?.id
+            },
+            entry.id
+          )
+        )
+      }
+    ),
+    submenu !== null && openEntry !== void 0 && /* @__PURE__ */ jsx13(
+      Overlay,
+      {
+        anchor: submenu.anchor,
+        placement: "right-start",
+        offset: submenu.offset,
+        initialFocus: submenu.focus,
+        themeClassName,
+        onDismiss: closeSubmenu,
+        children: /* @__PURE__ */ jsx13(
+          GridMenu,
+          {
+            entries: openEntry.items,
+            label: openEntry.label,
+            themeClassName,
+            onRun,
+            onClose,
+            onCloseSubmenu: closeSubmenu,
+            behaviourRef: submenuBehaviourRef
+          }
+        )
+      },
+      submenu.id
+    )
+  ] });
+}
+
+// src/DataGrid/contextMenu/GridContextMenu.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function GridContextMenu({
+  contextMenu
+}) {
+  const { menu, run, close } = contextMenu;
+  if (menu === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx14(
+    Overlay,
+    {
+      anchor: menu.anchor,
+      gap: menu.anchor instanceof Element ? ANCHOR_GAP : 0,
+      returnFocusTo: menu.cell ?? void 0,
+      themeClassName: menu.themeClassName,
+      onDismiss: close,
+      children: /* @__PURE__ */ jsx14(
+        GridMenu,
+        {
+          entries: menu.entries,
+          label: menu.label,
+          themeClassName: menu.themeClassName,
+          onRun: run,
+          onClose: close
+        }
+      )
+    },
+    menu.key
+  );
+}
+
+// src/DataGrid/contextMenu/useContextMenu.ts
+import {
+  useEffect as useEffect2,
+  useLayoutEffect as useLayoutEffect4,
+  useRef as useRef4,
+  useState as useState5
+} from "react";
+import {
+  contextMenuEntries,
+  hasContextMenu,
+  isSameCell,
+  resolveMenu
+} from "@gridkitjs/core";
+import {
+  attachContextMenuTrigger
+} from "@gridkitjs/dom";
+
+// src/DataGrid/contextMenu/contextMenuPlaces.ts
+import {
+  HEADER_ROW as HEADER_ROW2
+} from "@gridkitjs/core";
+import {
+  bodyCellFrom as bodyCellFrom2,
+  bodyRowFrom as bodyRowFrom2,
+  findBodyRow as findBodyRow2,
+  groupRowFrom as groupRowFrom2
+} from "@gridkitjs/dom";
+function headerCell(parts, columnIndex) {
+  const element = parts.headerTable?.tHead?.rows[0]?.cells[columnIndex];
+  return element === void 0 ? null : { element, rowIndex: HEADER_ROW2, columnIndex };
+}
+function bodyCell(parts, rowIndex, columnIndex) {
+  const element = findBodyRow2(parts.bodyTable, rowIndex)?.cells[columnIndex];
+  return element === void 0 ? null : { element, rowIndex, columnIndex };
+}
+function viewOf(element, parts) {
+  const root = parts.root?.getBoundingClientRect();
+  if (root === void 0) {
+    return null;
+  }
+  const body = parts.body?.contains(element) === true ? parts.body.getBoundingClientRect() : root;
+  const left = Math.max(root.left, body.left);
+  const top = Math.max(root.top, body.top);
+  return new DOMRect(
+    left,
+    top,
+    Math.max(0, Math.min(root.right, body.right) - left),
+    Math.max(0, Math.min(root.bottom, body.bottom) - top)
+  );
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function onCell(target, cell, parts) {
+  if (cell === null) {
+    return null;
+  }
+  const box = cell.element.getBoundingClientRect();
+  const view = viewOf(cell.element, parts);
+  if (view === null || box.right > view.left && box.left < view.right && box.bottom > view.top && box.top < view.bottom) {
+    return { target, cell, anchor: cell.element };
+  }
+  return {
+    target,
+    cell,
+    anchor: {
+      x: clamp(box.left, view.left, view.right),
+      y: clamp(box.bottom, view.top, view.bottom)
+    }
+  };
+}
+function onBody(body) {
+  const { left, top } = body.getBoundingClientRect();
+  return { target: { area: "body" }, cell: null, anchor: { x: left, y: top } };
+}
+function headerPlaceAt(element, parts) {
+  const cell = element.closest("th[data-gridkit-column]");
+  const columnId = cell?.getAttribute("data-gridkit-column");
+  if (cell === null || cell.parentElement !== parts.headerTable?.tHead?.rows[0] || columnId === null || columnId === void 0) {
+    return null;
+  }
+  return onCell(
+    { area: "header", columnId },
+    headerCell(parts, cell.cellIndex),
+    parts
+  );
+}
+function bodyPlaceAt(element, parts) {
+  const { body, pageRows } = parts;
+  if (body === null || !body.contains(element)) {
+    return null;
+  }
+  const group = groupRowFrom2(element);
+  if (group !== null) {
+    const entry = pageRows[group.rowIndex];
+    const cell = bodyCell(parts, group.rowIndex, 0);
+    return entry !== void 0 && "kind" in entry && entry.kind === "group" && cell?.element.contains(element) === true ? onCell(
+      { area: "group", groupId: entry.groupId, columnId: entry.columnId },
+      cell,
+      parts
+    ) : null;
+  }
+  const position = bodyCellFrom2(element);
+  if (position !== null) {
+    const entry = pageRows[position.rowIndex];
+    const cell = bodyCell(parts, position.rowIndex, position.columnIndex);
+    return entry !== void 0 && !("kind" in entry) && cell?.element.contains(element) === true ? onCell(
+      { area: "cell", rowId: entry.rowId, columnId: position.columnId },
+      cell,
+      parts
+    ) : null;
+  }
+  return bodyRowFrom2(element) === null ? onBody(body) : null;
+}
+function placeAt(element, parts) {
+  return headerPlaceAt(element, parts) ?? bodyPlaceAt(element, parts);
+}
+function placeOf(target, parts) {
+  const columnIndexOf = (columnId) => parts.columns.findIndex((column) => column.id === columnId);
+  switch (target.area) {
+    case "header":
+      return onCell(
+        target,
+        headerCell(parts, columnIndexOf(target.columnId)),
+        parts
+      );
+    case "cell": {
+      const rowIndex = parts.pageRows.findIndex(
+        (entry) => !("kind" in entry) && entry.rowId === target.rowId
+      );
+      return onCell(
+        target,
+        bodyCell(parts, rowIndex, columnIndexOf(target.columnId)),
+        parts
+      );
+    }
+    case "group": {
+      const rowIndex = parts.pageRows.findIndex(
+        (entry) => "kind" in entry && entry.kind === "group" && entry.groupId === target.groupId
+      );
+      return onCell(target, bodyCell(parts, rowIndex, 0), parts);
+    }
+    case "body":
+      return parts.body === null ? null : onBody(parts.body);
+  }
+}
+
+// src/DataGrid/contextMenu/useContextMenu.ts
+function useContextMenu({
+  rootRef,
+  headerTableRef,
+  bodyTableRef,
+  bodyScrollRef,
+  contextMenu,
+  onContextMenuOpenChange,
+  controller,
+  commands,
+  nav,
+  selection,
+  messages,
+  columnName
+}) {
+  const [menu, setMenu] = useState5(null);
+  const current = useRef4(null);
+  const openings = useRef4(0);
+  const enabled = contextMenu !== void 0 && contextMenu !== false;
+  function parts() {
+    const { columns, pageRows } = controller.getView();
+    return {
+      root: rootRef.current,
+      headerTable: headerTableRef.current,
+      bodyTable: bodyTableRef.current,
+      body: bodyScrollRef.current,
+      columns,
+      pageRows
+    };
+  }
+  function labelOf(target) {
+    switch (target.area) {
+      case "header":
+        return messages.headerMenuLabel(columnName(target.columnId));
+      case "cell":
+        return messages.cellMenuLabel;
+      case "group":
+        return messages.groupMenuLabel;
+      case "body":
+        return messages.bodyMenuLabel;
+    }
+  }
+  function selectTarget(target) {
+    const state = controller.getState();
+    if (target.area === "header") {
+      if (selection.columnMode === false || state.columnSelection.includes(target.columnId)) {
+        return false;
+      }
+      controller.selectColumn(target.columnId, "replace");
+      return true;
+    }
+    if (target.area !== "cell") {
+      return false;
+    }
+    const cell = { rowId: target.rowId, columnId: target.columnId };
+    const selectRow = selection.rowMode !== false && !state.rowSelection.includes(target.rowId);
+    const selectCell = selection.cellMode !== false && !isSameCell(state.cellSelection, cell);
+    if (selectRow) {
+      controller.selectRow(target.rowId, "replace");
+    }
+    if (selectCell) {
+      controller.selectCell(cell, "replace");
+    }
+    return selectRow || selectCell;
+  }
+  function resolveFor(target) {
+    const context = commands.contextFor(target);
+    return resolveMenu(contextMenuEntries(contextMenu, context), {
+      commands: commands.commands,
+      context
+    });
+  }
+  function show(next) {
+    const previous = current.current;
+    if (previous === next) {
+      return;
+    }
+    current.current = next;
+    setMenu(next);
+    if (previous !== null) {
+      onContextMenuOpenChange?.({ open: false, target: previous.target });
+    }
+    if (next !== null) {
+      onContextMenuOpenChange?.({ open: true, target: next.target });
+    }
+  }
+  function openAt({ target, cell, anchor }, point) {
+    let resolved = resolveFor(target);
+    if (resolved.length === 0) {
+      return false;
+    }
+    if (selectTarget(target)) {
+      resolved = resolveFor(target);
+    }
+    if (cell !== null && document.activeElement !== cell.element) {
+      cell.element.focus({ preventScroll: true });
+      nav.focusCellNow(cell.rowIndex, cell.columnIndex);
+    }
+    openings.current += 1;
+    show({
+      key: openings.current,
+      target,
+      entries: resolved,
+      label: labelOf(target),
+      anchor: point ?? anchor,
+      cell: cell?.element ?? null,
+      themeClassName: overlayThemeClassName(rootRef.current)
+    });
+    return true;
+  }
+  function handleRequest({ target, point }) {
+    const place = placeAt(target, parts());
+    return place !== null && openAt(place, point);
+  }
+  const latestRequest = useRef4(handleRequest);
+  useLayoutEffect4(() => {
+    latestRequest.current = handleRequest;
+  });
+  useEffect2(() => {
+    const root = rootRef.current;
+    if (!enabled || root === null) {
+      return void 0;
+    }
+    return attachContextMenuTrigger(root, {
+      onRequest: (request) => latestRequest.current(request)
+    });
+  }, [rootRef, enabled]);
+  const shown = useRef4(null);
+  useLayoutEffect4(() => {
+    const closed = shown.current;
+    shown.current = menu;
+    if (menu === null && closed !== null && closed.cell !== null && !closed.cell.isConnected && document.activeElement === document.body) {
+      nav.focusTabStop();
+    }
+  });
+  function close() {
+    show(null);
+  }
+  return {
+    menu,
+    opens: (area) => hasContextMenu(contextMenu, area),
+    open: (target, anchor) => {
+      const place = placeOf(target, parts());
+      return place !== null && openAt(place, anchor ?? null);
+    },
+    run: (item) => {
+      const open = current.current;
+      if (item.run() && open !== null) {
+        commands.report(item.id, open.target, "contextMenu");
+      }
+      close();
+    },
+    close
+  };
+}
+
+// src/DataGrid/columnChooser/ColumnChooser.tsx
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef5, useState as useState6 } from "react";
+import { resolveColumnChooser } from "@gridkitjs/core";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+function ColumnChooser({
+  controller,
+  messages
+}) {
+  const [search, setSearch] = useState6("");
+  const showAllRef = useRef5(null);
+  const { entries, selectAll, toggleAll } = resolveColumnChooser({
+    columns: controller.getView().dataColumns,
+    visibility: controller.getState().columnVisibility,
+    search
+  });
+  useLayoutEffect5(() => {
+    if (showAllRef.current !== null) {
+      showAllRef.current.indeterminate = selectAll === "mixed";
+    }
+  });
+  function setVisible(columnIds, visible) {
+    if (visible) {
+      controller.showColumns(columnIds);
+    } else {
+      controller.hideColumns(columnIds);
+    }
+  }
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      role: "dialog",
+      "aria-label": messages.columnChooserLabel,
+      className: "gridkit-column-chooser",
+      children: [
+        /* @__PURE__ */ jsx15(
+          "input",
+          {
+            type: "search",
+            className: "column-chooser-search",
+            "aria-label": messages.columnChooserSearchLabel,
+            placeholder: messages.searchPlaceholder,
+            value: search,
+            onChange: (event) => {
+              setSearch(event.currentTarget.value);
+            }
+          }
+        ),
+        entries.length === 0 ? /* @__PURE__ */ jsx15("p", { role: "status", className: "column-chooser-empty", children: messages.noMatchingColumns }) : /* @__PURE__ */ jsxs10(Fragment3, { children: [
+          /* @__PURE__ */ jsxs10("label", { className: "column-chooser-option column-chooser-all", children: [
+            /* @__PURE__ */ jsx15(
+              "input",
+              {
+                ref: showAllRef,
+                type: "checkbox",
+                checked: selectAll === "checked",
+                disabled: toggleAll === null,
+                onChange: () => {
+                  if (toggleAll !== null) {
+                    setVisible(toggleAll.columnIds, toggleAll.visible);
+                  }
+                }
+              }
+            ),
+            messages.showAllColumns
+          ] }),
+          /* @__PURE__ */ jsx15("ul", { className: "column-chooser-list", children: entries.map((entry) => /* @__PURE__ */ jsx15("li", { children: /* @__PURE__ */ jsxs10("label", { className: "column-chooser-option", children: [
+            /* @__PURE__ */ jsx15(
+              "input",
+              {
+                type: "checkbox",
+                checked: entry.visible,
+                disabled: entry.disabled,
+                onChange: () => {
+                  setVisible([entry.columnId], !entry.visible);
+                }
+              }
+            ),
+            entry.label
+          ] }) }, entry.columnId)) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/DataGrid/panels/GridPanels.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var panelComponents = {
+  columnChooser: ColumnChooser
+};
+function GridPanels({
+  panels,
+  controller,
+  messages
+}) {
+  const { panel, close } = panels;
+  if (panel === null) {
+    return null;
+  }
+  const Panel = panelComponents[panel.kind];
+  return /* @__PURE__ */ jsx16(
+    Overlay,
+    {
+      anchor: panel.anchor,
+      placement: panel.placement,
+      gap: panel.anchor instanceof Element ? ANCHOR_GAP : 0,
+      returnFocusTo: panel.returnFocusTo,
+      ignoreScrollAfterInput: true,
+      themeClassName: panel.themeClassName,
+      onDismiss: close,
+      children: /* @__PURE__ */ jsx16(
+        Panel,
+        {
+          target: panel.target,
+          controller,
+          messages
+        }
+      )
+    },
+    panel.key
+  );
+}
+
+// src/DataGrid/panels/useGridPanels.ts
+import { useLayoutEffect as useLayoutEffect6, useRef as useRef6, useState as useState7 } from "react";
+function toolbarItem(root, itemId) {
+  const items = root.querySelectorAll(
+    ":scope > .gridkit-toolbar > [data-gridkit-toolbar-item]"
+  );
+  return Array.from(items).find(
+    (item) => item.getAttribute("data-gridkit-toolbar-item") === itemId
+  ) ?? // In "More" while the toolbar is narrow: the button it is chosen from.
+  Array.from(items).find(
+    (item) => item.hasAttribute("data-gridkit-toolbar-more")
+  ) ?? null;
+}
+function headerCell2(headerTable, columnId) {
+  const cells = headerTable?.tHead?.rows[0]?.cells;
+  return cells === void 0 ? null : Array.from(cells).find(
+    (cell) => cell.getAttribute("data-gridkit-column") === columnId
+  ) ?? null;
+}
+function useGridPanels({
+  rootRef,
+  headerTableRef,
+  nav
+}) {
+  const [panel, setPanel] = useState7(null);
+  const openings = useRef6(0);
+  function placeFor(root, target) {
+    const element = target.area === "toolbar" ? toolbarItem(root, target.itemId) : target.area === "header" ? headerCell2(headerTableRef.current, target.columnId) : null;
+    if (element !== null) {
+      return {
+        anchor: element,
+        // The toolbar's own button sits at its far end.
+        placement: target.area === "toolbar" ? "bottom-end" : "bottom-start",
+        returnFocusTo: element
+      };
+    }
+    const { right, top } = root.getBoundingClientRect();
+    return {
+      anchor: { x: right, y: top },
+      placement: "bottom-end",
+      returnFocusTo: void 0
+    };
+  }
+  const shown = useRef6(null);
+  useLayoutEffect6(() => {
+    const closed = shown.current;
+    shown.current = panel;
+    if (panel === null && closed?.returnFocusTo?.isConnected === false && document.activeElement === document.body) {
+      nav.focusTabStop();
+    }
+  });
+  return {
+    panel,
+    open: (kind, target) => {
+      const root = rootRef.current;
+      if (root === null) {
+        return;
+      }
+      openings.current += 1;
+      setPanel({
+        key: openings.current,
+        kind,
+        target,
+        ...placeFor(root, target),
+        themeClassName: overlayThemeClassName(root)
+      });
+    },
+    close: () => {
+      setPanel(null);
+    }
+  };
+}
+
+// src/DataGrid/toolbar/GridToolbar.tsx
+import { useLayoutEffect as useLayoutEffect9, useRef as useRef10 } from "react";
+import {
+  resolveToolbar,
+  splitToolbarItems,
+  toolbarEntries
+} from "@gridkitjs/core";
+import { attachToolbar } from "@gridkitjs/dom";
+
+// src/DataGrid/toolbar/ToolbarMenuButton.tsx
+import { useLayoutEffect as useLayoutEffect7, useRef as useRef7, useState as useState8 } from "react";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+function ToolbarMenuButton({
+  itemKey,
+  label,
+  icon,
+  entries,
+  more = false,
+  onMenuClose
+}) {
+  const [menu, setMenu] = useState8(null);
+  const menuBehaviourRef = useRef7(null);
+  useLayoutEffect7(() => {
+    if (menu !== null && menu.focusItem > 0) {
+      menuBehaviourRef.current?.focusItem(menu.focusItem);
+    }
+  }, [menu]);
+  function open(button, onLast = false) {
+    setMenu({
+      anchor: button,
+      themeClassName: overlayThemeClassName(button),
+      focusItem: onLast ? entries.filter((entry) => entry.type !== "separator").length - 1 : 0
+    });
+  }
+  function close() {
+    setMenu(null);
+    onMenuClose();
+  }
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    /* @__PURE__ */ jsxs11(
+      "button",
+      {
+        type: "button",
+        className: classNames("toolbar-button", more && "toolbar-more"),
+        "data-gridkit-toolbar-item": itemKey,
+        ...ariaAttr(more, "data-gridkit-toolbar-more", ""),
+        "aria-haspopup": "menu",
+        "aria-expanded": menu !== null,
+        onClick: (event) => {
+          if (menu === null) {
+            open(event.currentTarget);
+          } else {
+            close();
+          }
+        },
+        onKeyDown: (event) => {
+          if ((event.key === "ArrowDown" || event.key === "ArrowUp") && menu === null) {
+            event.preventDefault();
+            open(event.currentTarget, event.key === "ArrowUp");
+          }
+        },
+        children: [
+          icon !== void 0 && /* @__PURE__ */ jsx17("span", { className: "toolbar-button-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx17(MenuIcon, { name: icon }) }),
+          label,
+          /* @__PURE__ */ jsx17("span", { className: "toolbar-button-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx17(ChevronDownIcon, {}) })
+        ]
+      }
+    ),
+    menu !== null && /* @__PURE__ */ jsx17(
+      Overlay,
+      {
+        anchor: menu.anchor,
+        placement: "bottom-start",
+        gap: ANCHOR_GAP,
+        returnFocusTo: menu.anchor,
+        themeClassName: menu.themeClassName,
+        onDismiss: close,
+        children: /* @__PURE__ */ jsx17(
+          GridMenu,
+          {
+            entries,
+            label,
+            themeClassName: menu.themeClassName,
+            behaviourRef: menuBehaviourRef,
+            onRun: (item) => {
+              item.run();
+              close();
+            },
+            onClose: close
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/DataGrid/toolbar/ToolbarSearch.tsx
+import { useEffect as useEffect3, useRef as useRef8, useState as useState9 } from "react";
+import {
+  searchTextOf,
+  setSearchText
+} from "@gridkitjs/core";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var SEARCH_DELAY_MS = 250;
+function ToolbarSearch({
+  itemKey,
+  controller,
+  messages,
+  announce
+}) {
+  const applied = searchTextOf(controller.getState().filter);
+  const [draft, setDraft] = useState9(null);
+  const timer = useRef8(void 0);
+  const unannounced = useRef8(null);
+  const text = draft !== null && draft.over === applied ? draft.text : applied;
+  function apply(next, over) {
+    clearTimeout(timer.current);
+    setDraft(null);
+    const filter = controller.getState().filter;
+    if (searchTextOf(filter) !== over) {
+      return;
+    }
+    const searched = setSearchText(filter, next);
+    if (searched !== filter) {
+      unannounced.current = next;
+      controller.setFilter(searched);
+    }
+  }
+  useEffect3(() => {
+    if (unannounced.current === applied) {
+      unannounced.current = null;
+      announce(messages.searchResults(controller.getView().rows.length));
+    }
+  });
+  useEffect3(
+    () => () => {
+      clearTimeout(timer.current);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsx18(
+    "input",
+    {
+      type: "search",
+      className: "toolbar-search",
+      "data-gridkit-toolbar-item": itemKey,
+      "aria-label": messages.searchLabel,
+      placeholder: messages.searchPlaceholder,
+      value: text,
+      onChange: (event) => {
+        const typed = event.target.value;
+        setDraft({ text: typed, over: applied });
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+          apply(typed, applied);
+        }, SEARCH_DELAY_MS);
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          apply(text, applied);
+        } else if (event.key === "Escape" && text !== "") {
+          event.preventDefault();
+          apply("", applied);
+        }
+      }
+    }
+  );
+}
+
+// src/DataGrid/toolbar/useToolbarOverflow.ts
+import { useLayoutEffect as useLayoutEffect8, useRef as useRef9, useState as useState10 } from "react";
+import { observeToolbarOverflow } from "@gridkitjs/dom";
+function useToolbarOverflow(toolbarRef, items) {
+  const [fit, setFit] = useState10(items.length);
+  const overflow = useRef9(null);
+  const measuredLayout = useRef9("");
+  const layout = JSON.stringify(
+    items.map((item) => [
+      item.type,
+      item.key,
+      "label" in item ? item.label : null
+    ])
+  );
+  useLayoutEffect8(() => {
+    const toolbar = toolbarRef.current;
+    if (toolbar === null || layout === measuredLayout.current) {
+      return;
+    }
+    measuredLayout.current = layout;
+    const options = { items, onChange: setFit };
+    if (overflow.current === null) {
+      overflow.current = observeToolbarOverflow(toolbar, options);
+    } else {
+      overflow.current.update(options);
+    }
+  }, [toolbarRef, layout, items]);
+  useLayoutEffect8(
+    () => () => {
+      overflow.current?.detach();
+      overflow.current = null;
+      measuredLayout.current = "";
+    },
+    []
+  );
+  return fit;
+}
+
+// src/DataGrid/toolbar/GridToolbar.tsx
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+function reporting(run, report) {
+  return () => {
+    const ran = run();
+    if (ran) {
+      report();
+    }
+    return ran;
+  };
+}
+function reportingEntries(entries, report) {
+  return entries.map((entry) => {
+    switch (entry.type) {
+      case "item":
+        return {
+          ...entry,
+          run: reporting(entry.run, () => {
+            report(entry.id);
+          })
+        };
+      case "submenu":
+        return { ...entry, items: reportingEntries(entry.items, report) };
+      default:
+        return entry;
+    }
+  });
+}
+function reportingItem(item, report) {
+  switch (item.type) {
+    case "button":
+      return {
+        ...item,
+        run: reporting(item.run, () => {
+          report(item.id, item.id);
+        })
+      };
+    case "menu":
+      return {
+        ...item,
+        items: reportingEntries(item.items, (commandId) => {
+          report(commandId, item.id);
+        })
+      };
+    default:
+      return item;
+  }
+}
+function GridToolbar(props) {
+  const entries = toolbarEntries(props.toolbar);
+  if (entries.length === 0) {
+    return null;
+  }
+  const label = (typeof props.toolbar === "object" ? props.toolbar.label : void 0) ?? props.messages.toolbarLabel;
+  return /* @__PURE__ */ jsx19(Toolbar, { ...props, entries, label });
+}
+function Toolbar({
+  entries,
+  label,
+  renderItem,
+  gridId,
+  controller,
+  commands,
+  messages,
+  announce
+}) {
+  const toolbarRef = useRef10(null);
+  const menuClosed = useRef10(false);
+  const items = resolveToolbar(entries, {
+    commands: commands.commands,
+    contextFor: commands.contextFor
+  }).map(
+    (item) => reportingItem(item, (commandId, itemId) => {
+      commands.report(commandId, { area: "toolbar", itemId }, "toolbar");
+    })
+  );
+  const fit = useToolbarOverflow(toolbarRef, items);
+  const { shown, overflow } = splitToolbarItems(items, fit);
+  useLayoutEffect9(() => {
+    const toolbar = toolbarRef.current;
+    return toolbar === null ? void 0 : attachToolbar(toolbar);
+  }, []);
+  useLayoutEffect9(() => {
+    if (!menuClosed.current) {
+      return;
+    }
+    menuClosed.current = false;
+    const toolbar = toolbarRef.current;
+    if (toolbar !== null && document.activeElement === document.body) {
+      (toolbar.querySelector('[tabindex="0"]') ?? toolbar.querySelector("button, input"))?.focus();
+    }
+  });
+  function onMenuClose() {
+    menuClosed.current = true;
+  }
+  function draw(item) {
+    switch (item.type) {
+      case "button":
+        return /* @__PURE__ */ jsxs12(
+          "button",
+          {
+            type: "button",
+            className: "toolbar-button",
+            "data-gridkit-toolbar-item": item.key,
+            ...ariaAttr(item.disabled, "aria-disabled", true),
+            ...ariaAttr(
+              item.pressed !== void 0,
+              "aria-pressed",
+              item.pressed
+            ),
+            ...ariaAttr(
+              item.shortcut !== void 0,
+              "aria-keyshortcuts",
+              item.shortcut
+            ),
+            onClick: () => {
+              item.run();
+            },
+            children: [
+              item.icon !== void 0 && /* @__PURE__ */ jsx19("span", { className: "toolbar-button-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx19(MenuIcon, { name: item.icon }) }),
+              item.label
+            ]
+          },
+          item.key
+        );
+      case "menu":
+        return /* @__PURE__ */ jsx19(
+          ToolbarMenuButton,
+          {
+            itemKey: item.key,
+            label: item.label,
+            icon: item.icon,
+            entries: item.items,
+            onMenuClose
+          },
+          item.key
+        );
+      case "search":
+        return /* @__PURE__ */ jsx19(
+          ToolbarSearch,
+          {
+            itemKey: item.key,
+            controller,
+            messages,
+            announce
+          },
+          item.key
+        );
+      case "separator":
+        return /* @__PURE__ */ jsx19(
+          "div",
+          {
+            role: "separator",
+            "aria-orientation": "vertical",
+            className: "toolbar-separator",
+            "data-gridkit-toolbar-item": item.key
+          },
+          item.key
+        );
+      case "spacer":
+        return /* @__PURE__ */ jsx19(
+          "div",
+          {
+            className: "toolbar-spacer",
+            "data-gridkit-toolbar-item": item.key
+          },
+          item.key
+        );
+      case "custom":
+        return /* @__PURE__ */ jsx19(
+          "div",
+          {
+            className: "toolbar-custom",
+            "data-gridkit-toolbar-item": item.key,
+            children: renderItem?.(item.id)
+          },
+          item.key
+        );
+    }
+  }
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      ref: toolbarRef,
+      role: "toolbar",
+      "aria-label": label,
+      "aria-controls": gridId,
+      className: "gridkit-toolbar",
+      children: [
+        shown.map(draw),
+        overflow.length > 0 && /* @__PURE__ */ jsx19(
+          ToolbarMenuButton,
+          {
+            itemKey: "more",
+            label: messages.moreToolbarItems,
+            entries: overflow,
+            more: true,
+            onMenuClose
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/DataGrid/useColumnDrag.ts
+import {
+  resolveKeyboardDropTarget as resolveKeyboardDropTarget2
+} from "@gridkitjs/core";
+import { resolveColumnDropTarget } from "@gridkitjs/dom";
+function useColumnDrag({
+  order,
+  groupBy,
+  groupByDraggableIds,
+  onDrop
+}) {
+  const drag = useDragReorder({
+    resolveTarget: (clientX, clientY, movedId) => resolveColumnDropTarget(clientX, clientY, movedId, {
+      order,
+      groupBy,
+      groupByDraggableIds
+    }),
+    onDrop
+  });
+  function startDrag(entry, event) {
+    drag.startDrag(entry.id, event.currentTarget, event);
+  }
+  function moveByKeyboard(entry, direction) {
+    const beforeId = resolveKeyboardDropTarget2(order, entry.id, direction);
+    if (beforeId === void 0) {
+      return;
+    }
+    onDrop({ kind: "column-order", beforeId }, entry.id);
+  }
+  return {
+    draggedColumnId: drag.draggedId,
+    dropTarget: drag.dropTarget,
+    ghostTransform: drag.ghostTransform,
+    startDrag,
+    moveByKeyboard,
+    justDragged: drag.justDragged
+  };
+}
+
+// src/DataGrid/useColumnResize.ts
+import {
+  useState as useState11
+} from "react";
+import {
+  beginColumnResize,
+  clampColumnWidth,
+  resolveColumnConstraints,
+  sizeColumnToContent
+} from "@gridkitjs/core";
+import { measureColumnContent, startColumnResizeGesture } from "@gridkitjs/dom";
+function useColumnResize({
+  tableRef,
+  controller,
+  columnSizeDefaults
+}) {
+  const [activeColumnId, setActiveColumnId] = useState11(null);
+  function startResize(entry, event) {
+    event.stopPropagation();
+    const session = beginColumnResize(
+      entry.column,
+      entry.width,
+      event.clientX,
+      columnSizeDefaults
+    );
+    const base = controller.getState().columnSizing;
+    const started = startColumnResizeGesture(
+      event.currentTarget,
+      event,
+      session,
+      {
+        onMove(width) {
+          controller.resizeColumn(session.columnId, width, "move");
+        },
+        onEnd(width) {
+          setActiveColumnId(null);
+          if (width !== null) {
+            controller.resizeColumn(session.columnId, width, "end");
+          }
+        },
+        /**
+         * Escape puts back only the dragged column's pre-drag width, merged
+         * into whatever the sizing state is *now* — not the `base` snapshot
+         * taken at drag-start — so a different column resized via keyboard
+         * while this drag was still open keeps its change instead of being
+         * clobbered by a stale restore.
+         */
+        onCancel() {
+          setActiveColumnId(null);
+          controller.cancelColumnResize(
+            session.columnId,
+            base,
+            session.startWidth
+          );
+        }
+      }
+    );
+    if (started) {
+      setActiveColumnId(session.columnId);
+    }
+  }
+  function sizeToContent(entry) {
+    const table = tableRef.current;
+    if (table === null) {
+      return false;
+    }
+    const measured = measureColumnContent(table, entry.id);
+    if (measured === null) {
+      return false;
+    }
+    controller.resizeColumn(
+      entry.id,
+      sizeColumnToContent(
+        measured,
+        resolveColumnConstraints(entry.column, columnSizeDefaults)
+      ),
+      "end"
+    );
+    return true;
+  }
+  function nudge(entry, delta) {
+    controller.resizeColumn(
+      entry.id,
       clampColumnWidth(
         entry.width + delta,
         resolveColumnConstraints(entry.column, columnSizeDefaults)
@@ -1453,11 +2909,11 @@ function useColumnResize({
 }
 
 // src/DataGrid/useElementWidth.ts
-import { useLayoutEffect as useLayoutEffect2, useState as useState5 } from "react";
+import { useLayoutEffect as useLayoutEffect10, useState as useState12 } from "react";
 import { observeElementWidth } from "@gridkitjs/dom";
 function useElementWidth(ref, enabled) {
-  const [width, setWidth] = useState5(null);
-  useLayoutEffect2(() => {
+  const [width, setWidth] = useState12(null);
+  useLayoutEffect10(() => {
     const element = ref.current;
     if (element === null || !enabled) {
       return void 0;
@@ -1468,12 +2924,12 @@ function useElementWidth(ref, enabled) {
 }
 
 // src/DataGrid/useGridController.ts
-import { useState as useState6, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useState as useState13, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import {
   createGridController
 } from "@gridkitjs/core";
 function useGridController(options) {
-  const [controller] = useState6(
+  const [controller] = useState13(
     () => createGridController(options)
   );
   controller.setOptions(options);
@@ -1482,15 +2938,15 @@ function useGridController(options) {
 }
 
 // src/DataGrid/useInfiniteScroll.ts
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useEffect as useEffect4, useRef as useRef11 } from "react";
 import { attachInfiniteScroll } from "@gridkitjs/dom";
 function useInfiniteScroll({
   rootRef,
   sentinelRef,
   config
 }) {
-  const scroll = useRef2(null);
-  useEffect2(() => {
+  const scroll = useRef11(null);
+  useEffect4(() => {
     const root = rootRef.current;
     if (root === null) {
       return void 0;
@@ -1505,7 +2961,7 @@ function useInfiniteScroll({
       scroll.current = null;
     };
   }, [rootRef]);
-  useEffect2(() => {
+  useEffect4(() => {
     scroll.current?.update({
       sentinel: sentinelRef.current,
       hasMore: config?.hasMore ?? false,
@@ -1517,11 +2973,11 @@ function useInfiniteScroll({
 }
 
 // src/DataGrid/useLiveAnnouncer.ts
-import { useCallback, useLayoutEffect as useLayoutEffect3, useRef as useRef3 } from "react";
+import { useCallback, useLayoutEffect as useLayoutEffect11, useRef as useRef12 } from "react";
 import { createLiveAnnouncer } from "@gridkitjs/dom";
 function useLiveAnnouncer(containerRef) {
-  const announcer = useRef3(null);
-  useLayoutEffect3(() => {
+  const announcer = useRef12(null);
+  useLayoutEffect11(() => {
     const container = containerRef.current;
     if (container === null) {
       return void 0;
@@ -1539,7 +2995,7 @@ function useLiveAnnouncer(containerRef) {
 }
 
 // src/DataGrid/useRowVirtualizer.ts
-import { useLayoutEffect as useLayoutEffect4, useState as useState7 } from "react";
+import { useLayoutEffect as useLayoutEffect12, useState as useState14 } from "react";
 import { createRowVirtualizer } from "@gridkitjs/dom";
 var EMPTY_RANGE = {
   startIndex: 0,
@@ -1557,9 +3013,9 @@ function useRowVirtualizer({
   estimatedRowHeight,
   overscan
 }) {
-  const [virtualizer, setVirtualizer] = useState7(null);
-  const [range, setRange] = useState7(EMPTY_RANGE);
-  useLayoutEffect4(() => {
+  const [virtualizer, setVirtualizer] = useState14(null);
+  const [range, setRange] = useState14(EMPTY_RANGE);
+  useLayoutEffect12(() => {
     const element = bodyScrollRef.current;
     if (!enabled || element === null) {
       return void 0;
@@ -1574,7 +3030,7 @@ function useRowVirtualizer({
       created.destroy();
     };
   }, [enabled, bodyScrollRef, estimatedRowHeight, overscan]);
-  useLayoutEffect4(() => {
+  useLayoutEffect12(() => {
     virtualizer?.setRowCount(rows.length);
     virtualizer?.resetHeights();
   }, [virtualizer, rows]);
@@ -1591,7 +3047,7 @@ function useRowVirtualizer({
 }
 
 // src/DataGrid/DataGrid.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var NO_AGGREGATES = [];
 function paginationReader(controller) {
   let last;
@@ -1623,18 +3079,12 @@ function DataGrid(props) {
     selectable,
     resizeMode = "fit",
     columnSizeDefaults,
-    onColumnResize,
     sortableColumns = false,
-    onColumnSortChange,
     groupableColumns = false,
     groupToggleIconColumns = true,
     groupByBarVisibility = "auto",
-    onGroupByChange,
-    onGroupExpansionChange,
     paginated = false,
     pager,
-    onPaginationChange,
-    onCellSelectionChange,
     infiniteScroll,
     aggregates = NO_AGGREGATES,
     groupAggregateDisplay = "inline",
@@ -1654,31 +3104,32 @@ function DataGrid(props) {
   const hoverRows = hoverable?.rows ?? true;
   const hoverColumns = hoverable?.columns ?? true;
   const hoverCells = hoverable?.cells ?? true;
-  const viewportRef = useRef4(null);
-  const headerTableRef = useRef4(null);
-  const bodyTableRef = useRef4(null);
-  const bodyScrollRef = useRef4(null);
-  const sentinelRef = useRef4(null);
+  const viewportRef = useRef13(null);
+  const headerTableRef = useRef13(null);
+  const bodyTableRef = useRef13(null);
+  const bodyScrollRef = useRef13(null);
+  const sentinelRef = useRef13(null);
   const viewportWidth = useElementWidth(viewportRef, resizeMode === "fit");
-  const subscribersRef = useRef4(/* @__PURE__ */ new Set());
+  const subscribersRef = useRef13(/* @__PURE__ */ new Set());
+  const gridId = useId();
   const announce = useLiveAnnouncer(viewportRef);
-  const messages = useMemo3(
+  const messages = useMemo4(
     () => resolveMessages(messageOverrides),
     [messageOverrides]
   );
   const { controller, state, view } = useGridController({
     ...props,
     viewportWidth,
-    onColumnResize: handleColumnResize,
-    onColumnSortChange: handleColumnSortChange,
-    onGroupByChange: handleGroupByChange,
-    onGroupExpansionChange: handleGroupExpansionChange,
-    onPaginationChange: handlePaginationChange,
-    onCellSelectionChange: handleCellSelectionChange,
-    onSelectionDiff: handleSelectionDiff
+    ...announcedCallbacks({
+      callbacks: props,
+      announce,
+      messages,
+      columnName,
+      columnOf
+    })
   });
-  const [readPagination] = useState8(() => paginationReader(controller));
-  const [readSelectedRows] = useState8(() => selectedRowsReader(controller));
+  const [readPagination] = useState15(() => paginationReader(controller));
+  const [readSelectedRows] = useState15(() => selectedRowsReader(controller));
   const virtualizer = useRowVirtualizer({
     enabled: virtualized,
     rows: view.pageRows,
@@ -1686,7 +3137,7 @@ function DataGrid(props) {
     estimatedRowHeight,
     overscan
   });
-  useEffect3(() => {
+  useEffect5(() => {
     if (virtualized && height === void 0) {
       console.error(
         "DataGrid: `virtualized` has no effect without `height` \u2014 a body with no bounded height has no viewport to window rows against."
@@ -1694,7 +3145,7 @@ function DataGrid(props) {
     }
   }, [virtualized, height]);
   const hasInfiniteScroll = infiniteScroll !== void 0;
-  useEffect3(() => {
+  useEffect5(() => {
     if (paginated && hasInfiniteScroll) {
       console.error(
         "DataGrid: `paginated` and `infiniteScroll` are mutually exclusive \u2014 only `paginated` takes effect while both are set."
@@ -1706,22 +3157,12 @@ function DataGrid(props) {
     sentinelRef,
     config: infiniteScroll
   });
-  function columnName(columnId) {
-    const entry = view.dataColumns.find(
-      (candidate) => candidate.id === columnId
-    );
-    return entry === void 0 ? columnId : resolveColumnHeaderText(entry.column);
+  function columnOf(columnId) {
+    return view.dataColumns.find((candidate) => candidate.id === columnId)?.column;
   }
-  function handleColumnResize(event) {
-    onColumnResize?.(event);
-    if (event.phase === "end") {
-      announce(
-        messages.columnResized(
-          columnName(event.columnId),
-          Math.round(event.width)
-        )
-      );
-    }
+  function columnName(columnId) {
+    const column = columnOf(columnId);
+    return column === void 0 ? columnId : resolveColumnHeaderText(column);
   }
   const resize = useColumnResize({
     // `@gridkitjs/dom`'s `measureColumnContent` only ever matches
@@ -1732,75 +3173,6 @@ function DataGrid(props) {
     controller,
     columnSizeDefaults
   });
-  function handleGroupByChange(event) {
-    onGroupByChange?.(event);
-    const entry = event.groupBy.find(
-      (candidate) => candidate.columnId === event.columnId
-    );
-    if (entry === void 0) {
-      announce(messages.groupingRemoved(columnName(event.columnId)));
-      return;
-    }
-    announce(
-      messages.groupedBy(
-        columnName(event.columnId),
-        event.groupBy.indexOf(entry) + 1,
-        event.groupBy.length
-      )
-    );
-  }
-  function handleGroupExpansionChange(event) {
-    onGroupExpansionChange?.(event);
-    if (event.groupId === null) {
-      announce(
-        event.expansion.length === 0 ? messages.allGroupsExpanded : messages.allGroupsCollapsed
-      );
-      return;
-    }
-    announce(
-      event.expansion.includes(event.groupId) ? messages.groupCollapsed : messages.groupExpanded
-    );
-  }
-  function handleColumnSortChange(event) {
-    onColumnSortChange?.(event);
-    const entry = event.sort.find(
-      (candidate) => candidate.columnId === event.columnId
-    );
-    if (entry === void 0) {
-      announce(messages.sortCleared(columnName(event.columnId)));
-      return;
-    }
-    announce(
-      messages.columnSorted(
-        columnName(event.columnId),
-        entry.direction,
-        event.sort.indexOf(entry) + 1,
-        event.sort.length
-      )
-    );
-  }
-  function handlePaginationChange(event) {
-    onPaginationChange?.(event);
-    announce(
-      messages.pageStatus(event.pagination.pageIndex + 1, event.pageCount)
-    );
-  }
-  function handleSelectionDiff(event) {
-    if (event.added.length + event.removed.length > 1) {
-      announce(messages.selectedCount(event.selection.length, event.target));
-    }
-  }
-  function handleCellSelectionChange(event) {
-    onCellSelectionChange?.(event);
-    if (event.selected !== null) {
-      announce(
-        messages.cellSelected(
-          columnName(event.selected.columnId),
-          event.selected.rowIndex + 1
-        )
-      );
-    }
-  }
   const nav = useGridNavigation({
     headerTableRef,
     bodyTableRef,
@@ -1824,19 +3196,29 @@ function DataGrid(props) {
       return entry !== void 0 && "kind" in entry && entry.kind === "group-summary";
     }
   });
-  const orderedIds = useMemo3(
+  const panels = useGridPanels({ rootRef: viewportRef, headerTableRef, nav });
+  const commands = useGridCommands({
+    controller,
+    commands: props.commands,
+    onCommand: props.onCommand,
+    messages,
+    announce,
+    resize,
+    openPanel: panels.open
+  });
+  const orderedIds = useMemo4(
     () => view.dataColumns.map((entry) => entry.id),
     [view.dataColumns]
   );
-  const displayedIds = useMemo3(
+  const displayedIds = useMemo4(
     () => view.columns.map((entry) => entry.id),
     [view.columns]
   );
-  const definitions = useMemo3(
+  const definitions = useMemo4(
     () => new Map(view.dataColumns.map((entry) => [entry.id, entry.column])),
     [view.dataColumns]
   );
-  const groupByDraggableIds = useMemo3(
+  const groupByDraggableIds = useMemo4(
     () => new Set(
       view.columns.filter((entry) => entry.groupByDraggable).map((entry) => entry.id)
     ),
@@ -1881,7 +3263,21 @@ function DataGrid(props) {
   };
   const selection = useGridSelection({ controller, state, selectable });
   const multiselectable = selection.rowMode === "multiple" || selection.columnMode === "multiple";
-  useEffect3(() => {
+  const contextMenu = useContextMenu({
+    rootRef: viewportRef,
+    headerTableRef,
+    bodyTableRef,
+    bodyScrollRef,
+    contextMenu: props.contextMenu,
+    onContextMenuOpenChange: props.onContextMenuOpenChange,
+    controller,
+    commands,
+    nav,
+    selection,
+    messages,
+    columnName
+  });
+  useEffect5(() => {
     for (const listener of subscribersRef.current) {
       listener();
     }
@@ -1942,11 +3338,19 @@ function DataGrid(props) {
     setColumnSelection: controller.setColumnSelection,
     setCellSelection: controller.setCellSelection,
     autoFitColumn: (columnId) => {
-      const entry = controller.getView().columns.find((candidate) => candidate.id === columnId);
-      if (entry !== void 0) {
-        resize.sizeToContent(entry);
-      }
+      commands.host.autoFitColumns([columnId]);
+    },
+    autoFitColumns: (columnIds) => {
+      commands.host.autoFitColumns(
+        columnIds ?? controller.getView().columns.map((entry) => entry.id)
+      );
     },
+    openContextMenu: contextMenu.open,
+    closeContextMenu: contextMenu.close,
+    openColumnChooser: () => {
+      panels.open("columnChooser", { area: "grid" });
+    },
+    runCommand: (commandId, target = { area: "grid" }) => commands.run(commandId, target, "api"),
     scrollToRow: (rowId, options) => {
       const index = controller.getView().pageRows.findIndex(
         (entry) => !("kind" in entry) && entry.rowId === rowId
@@ -1987,8 +3391,20 @@ function DataGrid(props) {
     selection.columnMode === false ? "" : "selectable-columns",
     selection.cellMode === false ? "" : "selectable-cells"
   );
-  return /* @__PURE__ */ jsxs7("div", { className: "gridkit-data-grid-viewport", ref: viewportRef, children: [
-    showGroupByBar && /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs13("div", { className: "gridkit-data-grid-viewport", ref: viewportRef, children: [
+    /* @__PURE__ */ jsx20(
+      GridToolbar,
+      {
+        toolbar: props.toolbar,
+        renderItem: props.renderToolbarItem,
+        gridId,
+        controller,
+        commands,
+        messages,
+        announce
+      }
+    ),
+    showGroupByBar && /* @__PURE__ */ jsx20(
       GroupByBar,
       {
         columns: view.columns,
@@ -2002,9 +3418,10 @@ function DataGrid(props) {
         messages
       }
     ),
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs13(
       "div",
       {
+        id: gridId,
         className: "gridkit-data-grid-tables",
         role: state.groupBy.length > 0 ? "treegrid" : "grid",
         "aria-rowcount": view.displayRows.length + 1,
@@ -2017,6 +3434,7 @@ function DataGrid(props) {
           label
         ),
         onKeyDown: (event) => {
+          if (!isOwnEvent(event)) return;
           if (event.key === "Escape") {
             if (drag.draggedColumnId !== null || resize.activeColumnId !== null)
               return;
@@ -2030,15 +3448,15 @@ function DataGrid(props) {
           }
         },
         children: [
-          /* @__PURE__ */ jsxs7(
+          /* @__PURE__ */ jsxs13(
             "table",
             {
               ref: headerTableRef,
               style: { width: totalColumnWidth(view.columns) },
               className: classNames(gridTableClassName, "gridkit-data-grid-header"),
               children: [
-                /* @__PURE__ */ jsx10(GridColgroup, { columns: view.columns }),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx20(GridColgroup, { columns: view.columns }),
+                /* @__PURE__ */ jsx20(
                   GridHeader,
                   {
                     columns: view.columns,
@@ -2050,6 +3468,7 @@ function DataGrid(props) {
                     groupBy: state.groupBy,
                     groupableColumns,
                     groupToggleIconColumns,
+                    headerMenu: contextMenu.opens("header"),
                     nav,
                     selection
                   }
@@ -2057,7 +3476,7 @@ function DataGrid(props) {
               ]
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx20(
             "div",
             {
               className: "gridkit-data-grid-body",
@@ -2065,15 +3484,15 @@ function DataGrid(props) {
               style: height === void 0 ? void 0 : {
                 "--gridkit-body-height": typeof height === "number" ? `${String(height)}px` : height
               },
-              children: /* @__PURE__ */ jsxs7(
+              children: /* @__PURE__ */ jsxs13(
                 "table",
                 {
                   ref: bodyTableRef,
                   style: { width: totalColumnWidth(view.columns) },
                   className: gridTableClassName,
                   children: [
-                    /* @__PURE__ */ jsx10(GridColgroup, { columns: view.columns }),
-                    /* @__PURE__ */ jsx10(
+                    /* @__PURE__ */ jsx20(GridColgroup, { columns: view.columns }),
+                    /* @__PURE__ */ jsx20(
                       GridBody,
                       {
                         columns: view.columns,
@@ -2092,7 +3511,9 @@ function DataGrid(props) {
                         getRowProps,
                         onRowClick,
                         onRowDoubleClick,
-                        messages
+                        messages,
+                        cellMenu: contextMenu.opens("cell"),
+                        groupMenu: contextMenu.opens("group")
                       }
                     )
                   ]
@@ -2100,7 +3521,7 @@ function DataGrid(props) {
               )
             }
           ),
-          aggregates.length > 0 && /* @__PURE__ */ jsxs7(
+          aggregates.length > 0 && /* @__PURE__ */ jsxs13(
             "table",
             {
               style: { width: totalColumnWidth(view.columns) },
@@ -2109,8 +3530,8 @@ function DataGrid(props) {
                 "gridkit-data-grid-footer"
               ),
               children: [
-                /* @__PURE__ */ jsx10(GridColgroup, { columns: view.columns }),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx20(GridColgroup, { columns: view.columns }),
+                /* @__PURE__ */ jsx20(
                   GridFooter,
                   {
                     columns: view.columns,
@@ -2126,7 +3547,9 @@ function DataGrid(props) {
         ]
       }
     ),
-    paginated && (pager?.template ? pager.template(pagerContext) : /* @__PURE__ */ jsx10(GridPager, { pager: pagerContext, config: pager, messages }))
+    /* @__PURE__ */ jsx20(GridContextMenu, { contextMenu }),
+    /* @__PURE__ */ jsx20(GridPanels, { panels, controller, messages }),
+    paginated && (pager?.template ? pager.template(pagerContext) : /* @__PURE__ */ jsx20(GridPager, { pager: pagerContext, config: pager, messages }))
   ] });
 }
 
@@ -2303,9 +3726,9 @@ function useColumnVisibilityState(gridRef) {
 }
 
 // src/DataGrid/hooks/useFilterState.ts
-import { useCallback as useCallback11, useState as useState9 } from "react";
+import { useCallback as useCallback11, useState as useState16 } from "react";
 function useFilterState(gridRef) {
-  const [fallback] = useState9(() => []);
+  const [fallback] = useState16(() => []);
   const filter = useGridSnapshot(
     gridRef,
     useCallback11((api) => api.getFilter(), []),