@gridkitjs/react 0.11.0 → 0.12.0

package/dist/index.js

@@ -2,16 +2,16 @@
 
 // src/DataGrid/DataGrid.tsx
 import {
-  useEffect as useEffect5,
-  useId,
-  useImperativeHandle,
-  useMemo as useMemo4,
-  useRef as useRef13,
-  useState as useState15
+  useEffect as useEffect7,
+  useId as useId2,
+  useImperativeHandle as useImperativeHandle3,
+  useMemo as useMemo5,
+  useRef as useRef21,
+  useState as useState20
 } from "react";
 import {
   moveColumnBefore,
-  resolveColumnHeaderText,
+  resolveColumnHeaderText as resolveColumnHeaderText2,
   resolveMessages,
   resolveRows,
   totalColumnWidth
@@ -28,7 +28,9 @@ import { createPortal } from "react-dom";
 import {
   buildKeyShortcuts,
   intentOf,
+  isColumnFiltered,
   KEYBOARD_STEP,
+  resolveColumnFilterMenu,
   sortDirectionFor,
   sortPriorityFor
 } from "@gridkitjs/core";
@@ -76,6 +78,9 @@ function GroupIcon() {
     /* @__PURE__ */ jsx2("rect", { x: "8.5", y: "14", width: "7", height: "7", rx: "1" })
   ] });
 }
+function FilterIcon() {
+  return /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54z" }) });
+}
 
 // src/DataGrid/isOwnEvent.ts
 function isOwnEvent(event) {
@@ -195,17 +200,27 @@ function GridHeader({
   resize,
   drag,
   controller,
-  columnSort,
+  state,
   sortableColumns,
-  groupBy,
   groupableColumns,
   groupToggleIconColumns,
   headerMenu,
+  panels,
+  messages,
   nav,
   selection
 }) {
+  const { columnSort, groupBy, filter } = state;
   const beforeId = drag.dropTarget?.kind === "column-order" ? drag.dropTarget.beforeId : void 0;
   const draggedEntry = columns.find((entry) => entry.id === drag.draggedColumnId) ?? null;
+  function toggleFilterMenu(columnId) {
+    const { panel } = panels;
+    if (panel?.kind === "filter" && panel.target.area === "header" && panel.target.columnId === columnId) {
+      panels.close();
+    } else {
+      panels.open("filter", { area: "header", columnId });
+    }
+  }
   return /* @__PURE__ */ jsxs2("thead", { children: [
     /* @__PURE__ */ jsx3("tr", { className: "grid-header", role: "row", "aria-rowindex": 1, children: columns.map((entry, index) => {
       const { column } = entry;
@@ -222,11 +237,14 @@ function GridHeader({
       const isGrouped = groupBy.some(
         (level) => level.columnId === entry.id
       );
+      const filterable = resolveColumnFilterMenu(controller.getOptions(), column) !== null;
+      const filtered = filterable && isColumnFiltered(filter, entry.id);
       const shortcuts = buildKeyShortcuts({
         reorderable: entry.reorderable,
         resizable: entry.resizable,
         sortable,
         groupable,
+        filterable,
         contextMenu: headerMenu
       });
       return /* @__PURE__ */ jsxs2(
@@ -249,7 +267,7 @@ function GridHeader({
             if (drag.justDragged()) {
               return;
             }
-            if (event.target instanceof Element && (event.target.closest(".header-resize-handle") !== null || event.target.closest(".header-sort-toggle") !== null || event.target.closest(".header-group-toggle") !== null)) {
+            if (event.target instanceof Element && (event.target.closest(".header-resize-handle") !== null || event.target.closest(".header-sort-toggle") !== null || event.target.closest(".header-group-toggle") !== null || event.target.closest(".header-filter-toggle") !== null)) {
               return;
             }
             selection.selectColumn(entry.id, intentOf(event));
@@ -280,7 +298,12 @@ function GridHeader({
               });
               return;
             }
-            if (event.key === "ArrowDown" && event.altKey && groupable) {
+            if (event.key === "ArrowDown" && event.altKey && event.shiftKey && filterable) {
+              event.preventDefault();
+              toggleFilterMenu(entry.id);
+              return;
+            }
+            if (event.key === "ArrowDown" && event.altKey && !event.shiftKey && groupable) {
               event.preventDefault();
               controller.toggleGroupBy(entry.id);
               return;
@@ -311,6 +334,11 @@ function GridHeader({
             column.headerClassName ?? ""
           ),
           ...ariaAttr(shortcuts !== "", "aria-keyshortcuts", shortcuts),
+          ...ariaAttr(
+            filtered,
+            "aria-description",
+            messages.columnFiltered
+          ),
           ...ariaAttr(
             sortable && sortDirection !== null,
             "aria-sort",
@@ -380,6 +408,30 @@ function GridHeader({
                 ]
               }
             ),
+            filterable && /*
+             * A pointer affordance only, like the sort toggle: the
+             * keyboard opens the menu from the header itself, under
+             * Alt+Shift+ArrowDown, and a screen reader hears the
+             * filtered state as the header's description.
+             */
+            /* @__PURE__ */ jsx3(
+              "span",
+              {
+                className: classNames(
+                  "header-filter-toggle",
+                  filtered ? "is-filtered" : ""
+                ),
+                "aria-hidden": "true",
+                tabIndex: -1,
+                onPointerDown: (event) => {
+                  event.stopPropagation();
+                },
+                onClick: () => {
+                  toggleFilterMenu(entry.id);
+                },
+                children: /* @__PURE__ */ jsx3(FilterIcon, {})
+              }
+            ),
             entry.resizable && /*
              * A pointer affordance only, and hidden from assistive
              * technology accordingly: a focusable handle per column would
@@ -472,7 +524,7 @@ function createRowPropsResolver() {
 // src/DataGrid/components/GridGroupRow.tsx
 import { memo } from "react";
 import {
-  formatCellValue,
+  formatGroupValue,
   resolveColumnLabel
 } from "@gridkitjs/core";
 
@@ -492,9 +544,6 @@ function renderAggregate(value, spec, column, rows, locale) {
 
 // src/DataGrid/components/GridGroupRow.tsx
 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);
-}
 function GridGroupRowComponent({
   columnCount,
   groupId,
@@ -671,7 +720,7 @@ var GridGroupSummaryRow_default = GridGroupSummaryRow;
 // src/DataGrid/components/GridRow.tsx
 import {
   accessDotted,
-  formatCellValue as formatCellValue2
+  formatCellValue
 } from "@gridkitjs/core";
 import { memo as memo3 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
@@ -741,7 +790,7 @@ function GridRowComponent({
               datasetIndex,
               rowId,
               selected
-            }) : formatCellValue2(value, column, locale, row, cellMessages)
+            }) : formatCellValue(value, column, locale, row, cellMessages)
           },
           id
         );
@@ -1498,13 +1547,155 @@ function announcedCallbacks({
   };
 }
 
+// src/DataGrid/clipboard/useGridCopy.ts
+import { runCommand } from "@gridkitjs/core";
+import { isNativeCopy } from "@gridkitjs/dom";
+function isCopyKey(event) {
+  return (event.ctrlKey || event.metaKey) && !event.altKey && (event.key === "c" || event.key === "C");
+}
+function useGridCopy({
+  controller,
+  commands,
+  nav
+}) {
+  function run(commandId, target) {
+    const command = commands.commands.get(commandId);
+    return command !== void 0 && runCommand(command, commands.contextFor(target));
+  }
+  function focusedCell() {
+    const { rowIndex, columnIndex } = nav.focus;
+    if (rowIndex === HEADER_ROW) {
+      return null;
+    }
+    const { pageRows, columns } = controller.getView();
+    const entry = pageRows[rowIndex];
+    const column = columns[columnIndex];
+    return entry === void 0 || "kind" in entry || column === void 0 ? null : { area: "cell", rowId: entry.rowId, columnId: column.id };
+  }
+  return (event) => {
+    if (!isCopyKey(event) || isNativeCopy(event.target)) {
+      return;
+    }
+    const cell = focusedCell();
+    if (run("copy.selection", { area: "grid" }) || cell !== null && run("copy.cell", cell)) {
+      event.preventDefault();
+    }
+  };
+}
+
 // src/DataGrid/commands/useGridCommands.ts
 import { useMemo as useMemo3 } from "react";
 import {
   createCommandContext,
   resolveCommands,
-  runCommand
+  runCommand as runCommand2
 } from "@gridkitjs/core";
+
+// src/DataGrid/clipboard/copyToClipboard.ts
+import { writeClipboard } from "@gridkitjs/dom";
+function copyToClipboard(content, { messages, announce }) {
+  writeClipboard(content).then(
+    () => {
+      announce(messages.copied(content.count, content.unit));
+    },
+    (error) => {
+      console.error("DataGrid: the clipboard could not be written.", error);
+      announce(messages.copyFailed);
+    }
+  );
+}
+
+// src/DataGrid/export/useSaveFile.ts
+import { useRef as useRef2 } from "react";
+import { downloadBlob } from "@gridkitjs/dom";
+
+// src/DataGrid/export/exportApi.ts
+import {
+  exportFile,
+  resolveExportWriters
+} from "@gridkitjs/core";
+function exportBlob({ content, mimeType }) {
+  const part = typeof content === "string" ? content : content.slice();
+  return new Blob([part], { type: mimeType });
+}
+function exportApi({
+  contextFor
+}) {
+  return {
+    exportData: async (format, options) => {
+      const context = contextFor({ area: "grid" });
+      const { export: defaults, exportWriters } = context.options;
+      const file = exportFile(
+        context,
+        format,
+        { ...defaults, ...options },
+        resolveExportWriters(exportWriters)
+      );
+      if (file === null) {
+        throw new Error(
+          "DataGrid: there is no export writer for that format \u2014 register one through `exportWriters`."
+        );
+      }
+      return exportBlob(await file);
+    }
+  };
+}
+
+// src/DataGrid/export/useSaveFile.ts
+function download(file) {
+  downloadBlob(exportBlob(file), file.fileName);
+}
+function useSaveFile({
+  messages,
+  announce
+}) {
+  const writingRef = useRef2(false);
+  return (file) => {
+    if (writingRef.current) {
+      console.error(
+        "DataGrid: an export is still being written, so this one was dropped."
+      );
+      return;
+    }
+    if (!(file instanceof Promise)) {
+      download(file);
+      return;
+    }
+    writingRef.current = true;
+    file.then(download, (error) => {
+      console.error("DataGrid: the export's writer failed.", error);
+      announce(messages.exportFailed);
+    }).finally(() => {
+      writingRef.current = false;
+    });
+  };
+}
+
+// src/DataGrid/print/printApi.ts
+import {
+  exportPrintDocument
+} from "@gridkitjs/core";
+import { printDocument, printStyles } from "@gridkitjs/dom";
+function printGrid(document2, { styles = "" }) {
+  return printDocument({
+    title: document2.title,
+    bodyHtml: document2.bodyHtml,
+    styles: printStyles(document2.page) + styles
+  });
+}
+function printApi({
+  contextFor
+}) {
+  return {
+    print: (options) => {
+      const context = contextFor({ area: "grid" });
+      const merged = { ...context.options.print, ...options };
+      return printGrid(exportPrintDocument(context, merged), merged);
+    }
+  };
+}
+
+// src/DataGrid/commands/useGridCommands.ts
 function useGridCommands({
   controller,
   commands: appCommands,
@@ -1515,6 +1706,7 @@ function useGridCommands({
   openPanel
 }) {
   const commands = useMemo3(() => resolveCommands(appCommands), [appCommands]);
+  const saveFile = useSaveFile({ messages, announce });
   const host = {
     autoFitColumns: (columnIds) => {
       const { columns } = controller.getView();
@@ -1530,7 +1722,16 @@ function useGridCommands({
       }
     },
     openPanel,
-    announce
+    announce,
+    saveFile,
+    writeClipboard: (content) => {
+      copyToClipboard(content, { messages, announce });
+    },
+    print: (document2, options) => {
+      printGrid(document2, options).catch((error) => {
+        console.error("DataGrid: the print failed.", error);
+      });
+    }
   };
   function contextFor(target) {
     return createCommandContext({ controller, target, messages, host });
@@ -1549,7 +1750,7 @@ function useGridCommands({
         console.error(`DataGrid: there is no command \`${commandId}\` to run.`);
         return false;
       }
-      if (!runCommand(command, contextFor(target))) {
+      if (!runCommand2(command, contextFor(target))) {
         return false;
       }
       report(commandId, target, source);
@@ -1559,19 +1760,22 @@ function useGridCommands({
 }
 
 // src/DataGrid/menu/GridMenu.tsx
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState as useState4 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef4, 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 { useLayoutEffect as useLayoutEffect2, useRef as useRef3 } 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 attachedFocus(focus) {
+  return typeof focus === "object" && !(focus instanceof HTMLElement) ? focus.current ?? "first" : focus;
+}
 function overlayThemeClassName(element) {
   const scope = element?.closest(".gridkit-light, .gridkit-dark");
   if (scope === null || scope === void 0) {
@@ -1587,12 +1791,13 @@ function Overlay({
   initialFocus,
   returnFocusTo,
   ignoreScrollAfterInput,
+  trapFocus,
   themeClassName,
   onDismiss,
   children
 }) {
-  const panelRef = useRef2(null);
-  const onDismissRef = useRef2(onDismiss);
+  const panelRef = useRef3(null);
+  const onDismissRef = useRef3(onDismiss);
   useLayoutEffect2(() => {
     onDismissRef.current = onDismiss;
   });
@@ -1605,9 +1810,10 @@ function Overlay({
       placement,
       gap,
       offset,
-      initialFocus,
+      initialFocus: attachedFocus(initialFocus),
       returnFocusTo,
       ignoreScrollAfterInput,
+      trapFocus,
       onDismiss: (reason) => {
         onDismissRef.current(reason);
       }
@@ -1619,7 +1825,8 @@ function Overlay({
     offset,
     initialFocus,
     returnFocusTo,
-    ignoreScrollAfterInput
+    ignoreScrollAfterInput,
+    trapFocus
   ]);
   return createPortal3(
     /* @__PURE__ */ jsx11(
@@ -1662,6 +1869,15 @@ var BUILT_IN_ICONS = {
     /* @__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" })
+  ] }),
+  copy: () => /* @__PURE__ */ jsxs8(Icon, { children: [
+    /* @__PURE__ */ jsx12("rect", { x: "8", y: "8", width: "14", height: "14", rx: "2" }),
+    /* @__PURE__ */ jsx12("path", { d: "M4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2" })
+  ] }),
+  print: () => /* @__PURE__ */ jsxs8(Icon, { children: [
+    /* @__PURE__ */ jsx12("path", { d: "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" }),
+    /* @__PURE__ */ jsx12("path", { d: "M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6" }),
+    /* @__PURE__ */ jsx12("rect", { x: "6", y: "14", width: "12", height: "8", rx: "1" })
   ] })
 };
 var ICONS = new Map(Object.entries(BUILT_IN_ICONS));
@@ -1675,6 +1891,9 @@ function CheckIcon() {
 function ChevronDownIcon() {
   return /* @__PURE__ */ jsx12(Icon, { children: /* @__PURE__ */ jsx12("path", { d: "m6 9 6 6 6-6" }) });
 }
+function ChevronLeftIcon() {
+  return /* @__PURE__ */ jsx12(Icon, { children: /* @__PURE__ */ jsx12("path", { d: "m15 18-6-6 6-6" }) });
+}
 function ChevronRightIcon() {
   return /* @__PURE__ */ jsx12(Icon, { children: /* @__PURE__ */ jsx12("path", { d: "m9 18 6-6-6-6" }) });
 }
@@ -1694,25 +1913,25 @@ function MenuItem({
   entry,
   expanded
 }) {
-  const isItem = entry.type === "item";
-  const checked = isItem ? entry.checked : void 0;
-  const shortcut = isItem ? entry.shortcut : void 0;
+  const isItem2 = entry.type === "item";
+  const checked = isItem2 ? entry.checked : void 0;
+  const shortcut = isItem2 ? 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(isItem2 && 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),
+      ...ariaAttr(!isItem2, "aria-haspopup", "menu"),
+      ...ariaAttr(!isItem2, "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, {}) })
+        !isItem2 && /* @__PURE__ */ jsx13("span", { className: "menu-submenu-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx13(ChevronRightIcon, {}) })
       ]
     }
   );
@@ -1726,11 +1945,11 @@ function GridMenu({
   onCloseSubmenu,
   behaviourRef
 }) {
-  const menuRef = useRef3(null);
-  const submenuBehaviourRef = useRef3(null);
+  const menuRef = useRef4(null);
+  const submenuBehaviourRef = useRef4(null);
   const [submenu, setSubmenu] = useState4(null);
   const isSubmenu = onCloseSubmenu !== void 0;
-  const latest = useRef3({ entries, submenu, onRun, onClose, onCloseSubmenu });
+  const latest = useRef4({ entries, submenu, onRun, onClose, onCloseSubmenu });
   useLayoutEffect3(() => {
     latest.current = { entries, submenu, onRun, onClose, onCloseSubmenu };
   });
@@ -1869,7 +2088,7 @@ function GridContextMenu({
 import {
   useEffect as useEffect2,
   useLayoutEffect as useLayoutEffect4,
-  useRef as useRef4,
+  useRef as useRef5,
   useState as useState5
 } from "react";
 import {
@@ -2028,8 +2247,8 @@ function useContextMenu({
   columnName
 }) {
   const [menu, setMenu] = useState5(null);
-  const current = useRef4(null);
-  const openings = useRef4(0);
+  const current = useRef5(null);
+  const openings = useRef5(0);
   const enabled = contextMenu !== void 0 && contextMenu !== false;
   function parts() {
     const { columns, pageRows } = controller.getView();
@@ -2126,7 +2345,7 @@ function useContextMenu({
     const place = placeAt(target, parts());
     return place !== null && openAt(place, point);
   }
-  const latestRequest = useRef4(handleRequest);
+  const latestRequest = useRef5(handleRequest);
   useLayoutEffect4(() => {
     latestRequest.current = handleRequest;
   });
@@ -2139,7 +2358,7 @@ function useContextMenu({
       onRequest: (request) => latestRequest.current(request)
     });
   }, [rootRef, enabled]);
-  const shown = useRef4(null);
+  const shown = useRef5(null);
   useLayoutEffect4(() => {
     const closed = shown.current;
     shown.current = menu;
@@ -2168,8 +2387,11 @@ function useContextMenu({
   };
 }
 
+// src/DataGrid/panels/GridPanels.tsx
+import { useRef as useRef13 } from "react";
+
 // src/DataGrid/columnChooser/ColumnChooser.tsx
-import { useLayoutEffect as useLayoutEffect5, useRef as useRef5, useState as useState6 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef6, 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({
@@ -2177,7 +2399,7 @@ function ColumnChooser({
   messages
 }) {
   const [search, setSearch] = useState6("");
-  const showAllRef = useRef5(null);
+  const showAllRef = useRef6(null);
   const { entries, selectAll, toggleAll } = resolveColumnChooser({
     columns: controller.getView().dataColumns,
     visibility: controller.getState().columnVisibility,
@@ -2253,37 +2475,902 @@ function ColumnChooser({
   );
 }
 
+// src/DataGrid/filterMenu/FilterMenu.tsx
+import { useEffect as useEffect3, useRef as useRef11 } from "react";
+import {
+  resolveColumnFilterMenu as resolveColumnFilterMenu2,
+  resolveColumnHeaderText,
+  resolveMenu as resolveMenu2
+} from "@gridkitjs/core";
+
+// src/DataGrid/filterMenu/ExcelFilterEditor.tsx
+import {
+  useImperativeHandle as useImperativeHandle2,
+  useLayoutEffect as useLayoutEffect9,
+  useMemo as useMemo4,
+  useReducer,
+  useRef as useRef10,
+  useState as useState10
+} from "react";
+import {
+  describeColumnFilter as describeColumnFilter2,
+  draftToFilter as draftToFilter2,
+  filterChecklist,
+  filterEditorReducer as filterEditorReducer2,
+  initialFilterEditorDraft as initialFilterEditorDraft2,
+  selectAllState
+} from "@gridkitjs/core";
+
+// src/DataGrid/filterMenu/OperatorMenuButton.tsx
+import { useLayoutEffect as useLayoutEffect6, useRef as useRef7, useState as useState7 } from "react";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+function gapBeside(button) {
+  const dialog = button.closest('[role="dialog"]') ?? button;
+  return dialog.getBoundingClientRect().right - button.getBoundingClientRect().right + ANCHOR_GAP;
+}
+function OperatorMenuButton({
+  menu,
+  active,
+  messages,
+  onChoose,
+  ref
+}) {
+  const [open, setOpen] = useState7(null);
+  const menuBehaviourRef = useRef7(null);
+  const label = messages.filterOperatorMenu(menu.family);
+  useLayoutEffect6(() => {
+    if (open !== null && open.focusItem > 0) {
+      menuBehaviourRef.current?.focusItem(open.focusItem);
+    }
+  }, [open]);
+  function show(button, onLast = false) {
+    setOpen({
+      anchor: button,
+      themeClassName: overlayThemeClassName(button),
+      gap: gapBeside(button),
+      focusItem: onLast ? menu.operators.length - 1 : 0
+    });
+  }
+  function close() {
+    setOpen(null);
+  }
+  const entries = menu.operators.map((operator) => ({
+    type: "item",
+    id: operator,
+    label: messages.filterOperatorLabel(operator, menu.family),
+    disabled: false,
+    checked: active?.includes(operator),
+    run: () => {
+      close();
+      onChoose(operator);
+      return true;
+    }
+  }));
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    /* @__PURE__ */ jsxs11(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: "filter-menu-submenu",
+        "aria-haspopup": "menu",
+        "aria-expanded": open !== null,
+        onClick: (event) => {
+          if (open === null) {
+            show(event.currentTarget);
+          } else {
+            close();
+          }
+        },
+        onKeyDown: (event) => {
+          if ((event.key === "ArrowDown" || event.key === "ArrowUp") && open === null) {
+            event.preventDefault();
+            show(event.currentTarget, event.key === "ArrowUp");
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx16("span", { className: "filter-menu-submenu-icon", "aria-hidden": "true", children: active !== void 0 && /* @__PURE__ */ jsx16(CheckIcon, {}) }),
+          label,
+          /* @__PURE__ */ jsx16("span", { className: "filter-menu-submenu-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx16(ChevronRightIcon, {}) })
+        ]
+      }
+    ),
+    open !== null && /* @__PURE__ */ jsx16(
+      Overlay,
+      {
+        anchor: open.anchor,
+        placement: "right-start",
+        gap: open.gap,
+        returnFocusTo: open.anchor,
+        themeClassName: open.themeClassName,
+        onDismiss: close,
+        children: /* @__PURE__ */ jsx16(
+          GridMenu,
+          {
+            entries,
+            label,
+            themeClassName: open.themeClassName,
+            behaviourRef: menuBehaviourRef,
+            onRun: (item) => {
+              item.run();
+            },
+            onClose: close
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/DataGrid/filterMenu/SimpleFilterEditor.tsx
+import {
+  Fragment as Fragment5,
+  useId,
+  useImperativeHandle,
+  useLayoutEffect as useLayoutEffect7,
+  useRef as useRef8,
+  useState as useState8
+} from "react";
+import {
+  conditionRowsFrom,
+  conditionsFromRows,
+  describeColumnFilter,
+  draftToFilter,
+  filterEditorReducer,
+  initialFilterEditorDraft
+} from "@gridkitjs/core";
+
+// src/DataGrid/filterMenu/ConditionRow.tsx
+import {
+  filterOperandArity,
+  parseFilterOperand
+} from "@gridkitjs/core";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+function inputType(family, type) {
+  switch (family) {
+    case "text":
+      return "text";
+    case "number":
+      return "number";
+    case "date":
+      return type === "date" ? "date" : "datetime-local";
+  }
+}
+function OperandField({
+  family,
+  type,
+  text,
+  label,
+  invalidMessageId,
+  fieldRef,
+  messages,
+  onChange
+}) {
+  const field = {
+    ref: fieldRef,
+    className: "filter-menu-value",
+    "aria-label": label,
+    "aria-invalid": invalidMessageId === void 0 ? void 0 : true,
+    "aria-describedby": invalidMessageId,
+    value: text,
+    onChange: (event) => {
+      onChange(event.currentTarget.value);
+    }
+  };
+  if (family === "boolean") {
+    return /* @__PURE__ */ jsxs12("select", { ...field, children: [
+      /* @__PURE__ */ jsx17("option", { value: "" }),
+      /* @__PURE__ */ jsx17("option", { value: "true", children: messages.booleanTrue }),
+      /* @__PURE__ */ jsx17("option", { value: "false", children: messages.booleanFalse })
+    ] });
+  }
+  return /* @__PURE__ */ jsx17("input", { ...field, type: inputType(family, type) });
+}
+function ConditionRow({
+  row,
+  position,
+  menu,
+  type,
+  messages,
+  invalidMessageId,
+  focusRef,
+  onChange,
+  ref
+}) {
+  const arity = filterOperandArity(row.operator);
+  const operators = menu.operators.includes(row.operator) ? menu.operators : [row.operator, ...menu.operators];
+  const operand = { family: menu.family, type, messages };
+  function messageIdFor(text) {
+    return parseFilterOperand(text, type) === void 0 ? invalidMessageId : void 0;
+  }
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-label": messages.filterConditionLabel(position),
+      className: "filter-menu-condition",
+      children: [
+        /* @__PURE__ */ jsx17(
+          "select",
+          {
+            ref: arity === 0 ? focusRef : void 0,
+            className: "filter-menu-operator",
+            "aria-label": messages.filterOperatorFieldLabel,
+            value: row.operator,
+            onChange: (event) => {
+              const operator = operators[event.currentTarget.selectedIndex];
+              if (operator !== void 0) {
+                onChange({ ...row, operator });
+              }
+            },
+            children: operators.map((operator) => /* @__PURE__ */ jsx17("option", { value: operator, children: messages.filterOperatorLabel(operator, menu.family) }, operator))
+          }
+        ),
+        arity > 0 && /* @__PURE__ */ jsx17(
+          OperandField,
+          {
+            ...operand,
+            text: row.text,
+            label: arity === 2 ? messages.filterFromLabel : messages.filterValueLabel,
+            invalidMessageId: messageIdFor(row.text),
+            fieldRef: focusRef,
+            onChange: (text) => {
+              onChange({ ...row, text });
+            }
+          }
+        ),
+        arity === 2 && /* @__PURE__ */ jsx17(
+          OperandField,
+          {
+            ...operand,
+            text: row.textTo,
+            label: messages.filterToLabel,
+            invalidMessageId: messageIdFor(row.textTo),
+            fieldRef: void 0,
+            onChange: (textTo) => {
+              onChange({ ...row, textTo });
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/DataGrid/filterMenu/SimpleFilterEditor.tsx
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+var COMBINATORS = ["and", "or"];
+var NO_ROWS = [];
+var NO_VALUES = {
+  options: [],
+  total: 0,
+  truncated: false,
+  blanks: 0
+};
+function holdsUnreadable(row) {
+  return Array.from(row?.querySelectorAll("input") ?? []).some(
+    (input) => input.validity.badInput
+  );
+}
+function CombinatorChoice({
+  name,
+  combinator,
+  messages,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": messages.filterCombinatorLabel,
+      className: "filter-menu-combinator",
+      children: COMBINATORS.map((choice) => /* @__PURE__ */ jsxs13("label", { className: "filter-menu-combinator-option", children: [
+        /* @__PURE__ */ jsx18(
+          "input",
+          {
+            type: "radio",
+            name,
+            checked: choice === combinator,
+            onChange: () => {
+              onChange(choice);
+            }
+          }
+        ),
+        choice === "and" ? messages.filterAnd : messages.filterOr
+      ] }, choice))
+    }
+  );
+}
+function SimpleFilterEditor({
+  column,
+  menu,
+  controller,
+  messages,
+  initialFocusRef,
+  applyFilter,
+  operator,
+  ref
+}) {
+  const type = column.column.type;
+  const [opened] = useState8(() => {
+    const shape = describeColumnFilter(controller.getState().filter, column.id);
+    const rows = conditionRowsFrom(shape, menu.operators, type);
+    const draft2 = {
+      // Its typed values kept, as picking the operator in the row keeps them.
+      rows: operator === void 0 ? rows : rows.map(
+        (row, index) => index === 0 ? { ...row, operator } : row
+      ),
+      combinator: shape.kind === "conditions" ? shape.combinator : "and"
+    };
+    return {
+      custom: shape.kind === "custom" || shape.kind === "values" && operator === void 0,
+      draft: draft2
+    };
+  });
+  const [draft, setDraft] = useState8(opened.draft);
+  const [invalid, setInvalid] = useState8(NO_ROWS);
+  const rowElements = useRef8([]);
+  const invalidMessageId = useId();
+  const combinatorName = useId();
+  function update(next) {
+    setDraft(next);
+    setInvalid(NO_ROWS);
+  }
+  function applyConditions(conditions) {
+    const applied = filterEditorReducer(
+      initialFilterEditorDraft({ kind: "none" }, NO_VALUES),
+      { type: "setConditions", conditions, combinator: draft.combinator }
+    );
+    applyFilter(
+      draftToFilter(applied, column.id, controller.getState().filter)
+    );
+  }
+  useImperativeHandle(ref, () => ({
+    apply: () => {
+      const parsed = conditionsFromRows(draft.rows, column.id, type);
+      const unreadable = draft.rows.map(
+        (_, index) => holdsUnreadable(rowElements.current[index])
+      );
+      const marked = draft.rows.flatMap(
+        (_, index) => parsed.invalid.includes(index) || unreadable[index] === true ? [index] : []
+      );
+      if (marked.length === 0) {
+        applyConditions(parsed.conditions);
+        return true;
+      }
+      if (draft === opened.draft && !unreadable.includes(true)) {
+        return true;
+      }
+      setInvalid(marked);
+      return false;
+    }
+  }));
+  useLayoutEffect7(() => {
+    const [first] = invalid;
+    if (first !== void 0) {
+      rowElements.current[first]?.querySelector('[aria-invalid="true"]')?.focus();
+    }
+  }, [invalid]);
+  return /* @__PURE__ */ jsxs13("div", { className: "filter-menu-conditions", children: [
+    opened.custom && /* @__PURE__ */ jsx18("p", { className: "filter-menu-custom", children: messages.customFilter }),
+    draft.rows.map((row, index) => (
+      // A row is its place: the first condition, or the second.
+      /* @__PURE__ */ jsxs13(Fragment5, { children: [
+        index > 0 && /* @__PURE__ */ jsx18(
+          CombinatorChoice,
+          {
+            name: combinatorName,
+            combinator: draft.combinator,
+            messages,
+            onChange: (combinator) => {
+              update({ ...draft, combinator });
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          ConditionRow,
+          {
+            ref: (element) => {
+              rowElements.current[index] = element;
+            },
+            row,
+            position: index + 1,
+            menu,
+            type,
+            messages,
+            invalidMessageId: invalid.includes(index) ? invalidMessageId : void 0,
+            focusRef: index === 0 ? initialFocusRef : void 0,
+            onChange: (next) => {
+              update({
+                ...draft,
+                rows: draft.rows.map(
+                  (current, at) => at === index ? next : current
+                )
+              });
+            }
+          }
+        )
+      ] }, index)
+    )),
+    invalid.length > 0 && /* @__PURE__ */ jsx18("p", { id: invalidMessageId, className: "filter-menu-invalid", children: messages.filterValueInvalid(menu.family) })
+  ] });
+}
+
+// src/DataGrid/filterMenu/ValueChecklist.tsx
+import { useLayoutEffect as useLayoutEffect8, useRef as useRef9, useState as useState9 } from "react";
+import {
+  attachChecklist,
+  createRowVirtualizer
+} from "@gridkitjs/dom";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+var ESTIMATED_ITEM_HEIGHT = 28;
+var OVERSCAN = 4;
+var NO_RANGE = {
+  startIndex: 0,
+  endIndex: -1,
+  offsetBefore: 0,
+  offsetAfter: 0
+};
+function ValueChecklist({
+  items,
+  showCounts,
+  label,
+  onToggle
+}) {
+  const listRef = useRef9(null);
+  const checklistRef = useRef9(null);
+  const [virtualizer, setVirtualizer] = useState9(null);
+  const [range, setRange] = useState9(NO_RANGE);
+  const latest = useRef9({ items, onToggle });
+  useLayoutEffect8(() => {
+    latest.current = { items, onToggle };
+  });
+  useLayoutEffect8(() => {
+    const list = listRef.current;
+    if (list === null) {
+      return void 0;
+    }
+    const rows = createRowVirtualizer(list, {
+      estimatedRowHeight: ESTIMATED_ITEM_HEIGHT,
+      overscan: OVERSCAN,
+      onRange: setRange
+    });
+    const checklist = attachChecklist(list, {
+      onToggle: (index) => {
+        const item = latest.current.items[index];
+        if (item !== void 0) {
+          latest.current.onToggle(item);
+        }
+      },
+      scrollToIndex: (index) => {
+        rows.scrollToIndex(index, { block: "nearest" });
+      }
+    });
+    checklistRef.current = checklist;
+    setVirtualizer(rows);
+    return () => {
+      checklistRef.current = null;
+      checklist.detach();
+      rows.destroy();
+    };
+  }, []);
+  useLayoutEffect8(() => {
+    virtualizer?.setRowCount(items.length);
+    checklistRef.current?.setCount(items.length);
+  }, [virtualizer, items.length]);
+  const shown = items.slice(range.startIndex, range.endIndex + 1);
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-multiselectable": "true",
+      "aria-label": label,
+      className: "filter-menu-checklist",
+      children: [
+        /* @__PURE__ */ jsx19("div", { role: "presentation", style: { height: range.offsetBefore } }),
+        shown.map((item, offset) => {
+          const index = range.startIndex + offset;
+          return /* @__PURE__ */ jsxs14(
+            "div",
+            {
+              ref: virtualizer?.measureRow(index),
+              role: "option",
+              "data-gridkit-checklist-item": "",
+              "data-gridkit-checklist-index": index,
+              "aria-checked": item.checked,
+              "aria-setsize": items.length,
+              "aria-posinset": index + 1,
+              className: "filter-menu-option",
+              children: [
+                /* @__PURE__ */ jsx19("span", { className: "filter-menu-option-check", "aria-hidden": "true", children: /* @__PURE__ */ jsx19(CheckIcon, {}) }),
+                /* @__PURE__ */ jsx19("span", { className: "filter-menu-option-label", children: item.label }),
+                showCounts && /* @__PURE__ */ jsxs14(Fragment6, { children: [
+                  " ",
+                  /* @__PURE__ */ jsx19("span", { className: "filter-menu-option-count", children: String(item.count) })
+                ] })
+              ]
+            },
+            item.key
+          );
+        }),
+        /* @__PURE__ */ jsx19("div", { role: "presentation", style: { height: range.offsetAfter } })
+      ]
+    }
+  );
+}
+
+// src/DataGrid/filterMenu/ExcelFilterEditor.tsx
+import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+function toggleOf(item) {
+  return item.kind === "blanks" ? { type: "setIncludeBlanks", includeBlanks: !item.checked } : { type: "toggleValue", value: item.value };
+}
+function ExcelFilterEditor({
+  column,
+  menu,
+  controller,
+  messages,
+  initialFocusRef,
+  applyFilter,
+  columnValues,
+  ref
+}) {
+  const [opened] = useState10(() => {
+    const shape2 = describeColumnFilter2(controller.getState().filter, column.id);
+    return {
+      shape: shape2,
+      draft: initialFilterEditorDraft2(shape2, columnValues(column.id))
+    };
+  });
+  const [draft, dispatch] = useReducer(filterEditorReducer2, opened.draft);
+  const [operator, setOperator] = useState10(null);
+  const conditions = useRef10(null);
+  const conditionsFocus = useRef10(null);
+  const operatorButton = useRef10(null);
+  const switched = useRef10(false);
+  const selectAllRef = useRef10(null);
+  const selectAll = useMemo4(() => selectAllState(draft), [draft]);
+  const checklist = useMemo4(
+    () => filterChecklist(draft, {
+      valueLimit: menu.valueLimit,
+      blanksLabel: messages.filterBlanks
+    }),
+    [draft, menu.valueLimit, messages.filterBlanks]
+  );
+  useLayoutEffect9(() => {
+    if (selectAllRef.current !== null) {
+      selectAllRef.current.indeterminate = selectAll === "mixed";
+    }
+  });
+  useLayoutEffect9(() => {
+    if (switched.current) {
+      switched.current = false;
+      (operator === null ? operatorButton.current : conditionsFocus.current)?.focus();
+    }
+  }, [operator]);
+  function switchTo(chosen) {
+    switched.current = true;
+    setOperator(chosen);
+  }
+  useImperativeHandle2(ref, () => ({
+    apply: () => {
+      if (operator !== null) {
+        return conditions.current?.apply() ?? true;
+      }
+      const picked = draft.checked !== opened.draft.checked || draft.includeBlanks !== opened.draft.includeBlanks;
+      if (picked) {
+        applyFilter(
+          draftToFilter2(draft, column.id, controller.getState().filter)
+        );
+      }
+      return true;
+    }
+  }));
+  if (operator !== null) {
+    return /* @__PURE__ */ jsxs15(Fragment7, { children: [
+      /* @__PURE__ */ jsxs15(
+        "button",
+        {
+          type: "button",
+          className: "filter-menu-back",
+          onClick: () => {
+            switchTo(null);
+          },
+          children: [
+            /* @__PURE__ */ jsx20("span", { className: "filter-menu-back-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx20(ChevronLeftIcon, {}) }),
+            messages.filterBackToValues
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx20(
+        SimpleFilterEditor,
+        {
+          ref: conditions,
+          column,
+          menu,
+          controller,
+          messages,
+          initialFocusRef: (element) => {
+            conditionsFocus.current = element;
+          },
+          applyFilter,
+          operator
+        }
+      )
+    ] });
+  }
+  const { shape } = opened;
+  return /* @__PURE__ */ jsxs15("div", { className: "filter-menu-values", children: [
+    menu.operators.length > 0 && /* @__PURE__ */ jsx20(
+      OperatorMenuButton,
+      {
+        ref: operatorButton,
+        menu,
+        active: shape.kind === "conditions" ? shape.conditions.map((condition) => condition.operator) : void 0,
+        messages,
+        onChoose: switchTo
+      }
+    ),
+    (shape.kind === "conditions" || shape.kind === "custom") && /* @__PURE__ */ jsx20("p", { className: "filter-menu-custom", children: shape.kind === "conditions" ? messages.filterByCondition : messages.customFilter }),
+    /* @__PURE__ */ jsx20(
+      "input",
+      {
+        ref: initialFocusRef,
+        type: "search",
+        className: "filter-menu-search",
+        "aria-label": messages.filterSearchLabel,
+        placeholder: messages.searchPlaceholder,
+        value: draft.search,
+        onChange: (event) => {
+          dispatch({ type: "search", search: event.currentTarget.value });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs15("label", { className: "filter-menu-select-all", children: [
+      /* @__PURE__ */ jsx20(
+        "input",
+        {
+          ref: selectAllRef,
+          type: "checkbox",
+          checked: selectAll === "checked",
+          disabled: !checklist.needsSearch && checklist.items.length === 0,
+          onChange: () => {
+            dispatch({ type: "toggleAll" });
+          }
+        }
+      ),
+      messages.filterSelectAll
+    ] }),
+    checklist.needsSearch ? /* @__PURE__ */ jsx20("p", { className: "filter-menu-search-first", children: messages.filterSearchFirst(checklist.total) }) : /* @__PURE__ */ jsx20(
+      ValueChecklist,
+      {
+        items: checklist.items,
+        showCounts: menu.showCounts,
+        label: messages.filterValuesLabel,
+        onToggle: (item) => {
+          dispatch(toggleOf(item));
+        }
+      }
+    ),
+    checklist.hiddenCount > 0 && /* @__PURE__ */ jsx20("p", { role: "status", className: "filter-menu-more", children: messages.filterMoreValues(checklist.hiddenCount) })
+  ] });
+}
+
+// src/DataGrid/filterMenu/FilterMenu.tsx
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+var SORT_COMMANDS = [
+  "sort.ascending",
+  "sort.descending",
+  "sort.clear"
+];
+function isItem(entry) {
+  return entry.type === "item";
+}
+function FilterMenu({
+  target,
+  controller,
+  commands,
+  messages,
+  close,
+  initialFocusRef,
+  applyFilter,
+  columnValues
+}) {
+  const editor = useRef11(null);
+  const column = target.area === "header" ? controller.getView().dataColumns.find((entry) => entry.id === target.columnId) : void 0;
+  const menu = column === void 0 ? null : resolveColumnFilterMenu2(controller.getOptions(), column.column);
+  useEffect3(() => {
+    if (menu === null) {
+      close();
+    }
+  });
+  if (column === void 0 || menu === null) {
+    return null;
+  }
+  const resolveOptions = {
+    commands: commands.commands,
+    context: commands.contextFor(target)
+  };
+  const sortItems = resolveMenu2(SORT_COMMANDS, resolveOptions).filter(isItem);
+  const [clearItem] = resolveMenu2(["filter.clear"], resolveOptions).filter(
+    isItem
+  );
+  function run(item) {
+    commands.run(item.id, target, "filterMenu");
+    close();
+  }
+  const editorProps = {
+    ref: editor,
+    column,
+    menu,
+    controller,
+    messages,
+    initialFocusRef,
+    applyFilter
+  };
+  function apply(event) {
+    event.preventDefault();
+    if (editor.current?.apply() ?? true) {
+      close();
+    }
+  }
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      role: "dialog",
+      "aria-label": messages.filterMenuLabel(
+        resolveColumnHeaderText(column.column)
+      ),
+      className: "gridkit-filter-menu",
+      children: /* @__PURE__ */ jsxs16(
+        "form",
+        {
+          className: "filter-menu-form",
+          noValidate: true,
+          onSubmit: apply,
+          onKeyDown: (event) => {
+            if (event.key === "Enter" && event.target instanceof Element && event.target.closest("select, [role=listbox]") !== null) {
+              event.preventDefault();
+              event.currentTarget.requestSubmit();
+            }
+          },
+          children: [
+            sortItems.length > 0 && /* @__PURE__ */ jsx21("div", { className: "filter-menu-sort", children: sortItems.map((item) => /* @__PURE__ */ jsxs16(
+              "button",
+              {
+                type: "button",
+                className: "filter-menu-sort-item",
+                disabled: item.disabled,
+                ...ariaAttr(
+                  item.checked !== void 0,
+                  "aria-pressed",
+                  item.checked
+                ),
+                onClick: () => {
+                  run(item);
+                },
+                children: [
+                  /* @__PURE__ */ jsx21("span", { className: "filter-menu-sort-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx21(MenuIcon, { name: item.icon }) }),
+                  item.label
+                ]
+              },
+              item.id
+            )) }),
+            menu.ui === "excel" ? /* @__PURE__ */ jsx21(ExcelFilterEditor, { ...editorProps, columnValues }) : /* @__PURE__ */ jsx21(SimpleFilterEditor, { ...editorProps }),
+            /* @__PURE__ */ jsxs16("div", { className: "filter-menu-actions", children: [
+              clearItem !== void 0 && /* @__PURE__ */ jsx21(
+                "button",
+                {
+                  type: "button",
+                  className: "filter-menu-clear",
+                  disabled: clearItem.disabled,
+                  onClick: () => {
+                    run(clearItem);
+                  },
+                  children: clearItem.label
+                }
+              ),
+              /* @__PURE__ */ jsx21("button", { type: "button", className: "filter-menu-cancel", onClick: close, children: messages.cancelFilter }),
+              /* @__PURE__ */ jsx21("button", { type: "submit", className: "filter-menu-apply", children: messages.applyFilter })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/DataGrid/filterMenu/useApplyFilter.ts
+import { useEffect as useEffect4, useRef as useRef12 } from "react";
+function useApplyFilter(controller, messages, announce) {
+  const unannounced = useRef12(null);
+  useEffect4(() => {
+    if (unannounced.current === controller.getState().filter) {
+      unannounced.current = null;
+      announce(
+        messages.filterResults(
+          controller.getView().rows.length,
+          controller.getOptions().dataSource?.length ?? 0
+        )
+      );
+    }
+  });
+  return (filter) => {
+    unannounced.current = filter;
+    controller.setFilter(filter);
+  };
+}
+
+// src/DataGrid/filterMenu/useFilterValueCache.ts
+import { useState as useState11 } from "react";
+import {
+  createColumnValueOptionsCache
+} from "@gridkitjs/core";
+var NO_ROWS2 = [];
+function useFilterValueCache(controller, messages) {
+  const [cache] = useState11(createColumnValueOptionsCache);
+  return (columnId) => {
+    const { dataSource = NO_ROWS2, locale } = controller.getOptions();
+    return cache.get(
+      dataSource,
+      controller.getView().dataColumns,
+      controller.getState().filter,
+      columnId,
+      locale === void 0 ? { messages } : { locale, messages }
+    );
+  };
+}
+
 // src/DataGrid/panels/GridPanels.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var panelComponents = {
-  columnChooser: ColumnChooser
+import { jsx as jsx22 } from "react/jsx-runtime";
+var panelKinds = {
+  columnChooser: { component: ColumnChooser, trapFocus: false },
+  filter: { component: FilterMenu, trapFocus: true }
 };
 function GridPanels({
   panels,
   controller,
+  commands,
   messages
 }) {
+  const initialFocus = useRef13(null);
+  const applyFilter = useApplyFilter(
+    controller,
+    messages,
+    commands.host.announce
+  );
+  const columnValues = useFilterValueCache(controller, messages);
   const { panel, close } = panels;
   if (panel === null) {
     return null;
   }
-  const Panel = panelComponents[panel.kind];
-  return /* @__PURE__ */ jsx16(
+  const { component: Panel, trapFocus } = panelKinds[panel.kind];
+  return /* @__PURE__ */ jsx22(
     Overlay,
     {
       anchor: panel.anchor,
       placement: panel.placement,
       gap: panel.anchor instanceof Element ? ANCHOR_GAP : 0,
+      initialFocus,
       returnFocusTo: panel.returnFocusTo,
       ignoreScrollAfterInput: true,
+      trapFocus,
       themeClassName: panel.themeClassName,
       onDismiss: close,
-      children: /* @__PURE__ */ jsx16(
+      children: /* @__PURE__ */ jsx22(
         Panel,
         {
           target: panel.target,
           controller,
-          messages
+          commands,
+          messages,
+          close,
+          initialFocusRef: (element) => {
+            initialFocus.current = element;
+          },
+          applyFilter,
+          columnValues
         }
       )
     },
@@ -2291,8 +3378,31 @@ function GridPanels({
   );
 }
 
+// src/DataGrid/panels/panelApi.ts
+import { resolveColumnFilterMenu as resolveColumnFilterMenu3 } from "@gridkitjs/core";
+function panelApi(panels, controller) {
+  return {
+    openColumnChooser: () => {
+      panels.open("columnChooser", { area: "grid" });
+    },
+    openFilterMenu: (columnId) => {
+      const shown = controller.getView().columns.find((entry) => entry.id === columnId);
+      if (shown === void 0 || resolveColumnFilterMenu3(controller.getOptions(), shown.column) === null) {
+        return false;
+      }
+      panels.open("filter", { area: "header", columnId });
+      return true;
+    },
+    closeFilterMenu: () => {
+      if (panels.panel?.kind === "filter") {
+        panels.close();
+      }
+    }
+  };
+}
+
 // src/DataGrid/panels/useGridPanels.ts
-import { useLayoutEffect as useLayoutEffect6, useRef as useRef6, useState as useState7 } from "react";
+import { useLayoutEffect as useLayoutEffect10, useRef as useRef14, useState as useState12 } from "react";
 function toolbarItem(root, itemId) {
   const items = root.querySelectorAll(
     ":scope > .gridkit-toolbar > [data-gridkit-toolbar-item]"
@@ -2315,8 +3425,8 @@ function useGridPanels({
   headerTableRef,
   nav
 }) {
-  const [panel, setPanel] = useState7(null);
-  const openings = useRef6(0);
+  const [panel, setPanel] = useState12(null);
+  const openings = useRef14(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) {
@@ -2334,8 +3444,8 @@ function useGridPanels({
       returnFocusTo: void 0
     };
   }
-  const shown = useRef6(null);
-  useLayoutEffect6(() => {
+  const shown = useRef14(null);
+  useLayoutEffect10(() => {
     const closed = shown.current;
     shown.current = panel;
     if (panel === null && closed?.returnFocusTo?.isConnected === false && document.activeElement === document.body) {
@@ -2365,7 +3475,7 @@ function useGridPanels({
 }
 
 // src/DataGrid/toolbar/GridToolbar.tsx
-import { useLayoutEffect as useLayoutEffect9, useRef as useRef10 } from "react";
+import { useLayoutEffect as useLayoutEffect13, useRef as useRef18 } from "react";
 import {
   resolveToolbar,
   splitToolbarItems,
@@ -2374,8 +3484,8 @@ import {
 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";
+import { useLayoutEffect as useLayoutEffect11, useRef as useRef15, useState as useState13 } from "react";
+import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 function ToolbarMenuButton({
   itemKey,
   label,
@@ -2384,9 +3494,9 @@ function ToolbarMenuButton({
   more = false,
   onMenuClose
 }) {
-  const [menu, setMenu] = useState8(null);
-  const menuBehaviourRef = useRef7(null);
-  useLayoutEffect7(() => {
+  const [menu, setMenu] = useState13(null);
+  const menuBehaviourRef = useRef15(null);
+  useLayoutEffect11(() => {
     if (menu !== null && menu.focusItem > 0) {
       menuBehaviourRef.current?.focusItem(menu.focusItem);
     }
@@ -2402,8 +3512,8 @@ function ToolbarMenuButton({
     setMenu(null);
     onMenuClose();
   }
-  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
-    /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs17(Fragment8, { children: [
+    /* @__PURE__ */ jsxs17(
       "button",
       {
         type: "button",
@@ -2426,13 +3536,13 @@ function ToolbarMenuButton({
           }
         },
         children: [
-          icon !== void 0 && /* @__PURE__ */ jsx17("span", { className: "toolbar-button-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx17(MenuIcon, { name: icon }) }),
+          icon !== void 0 && /* @__PURE__ */ jsx23("span", { className: "toolbar-button-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx23(MenuIcon, { name: icon }) }),
           label,
-          /* @__PURE__ */ jsx17("span", { className: "toolbar-button-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx17(ChevronDownIcon, {}) })
+          /* @__PURE__ */ jsx23("span", { className: "toolbar-button-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx23(ChevronDownIcon, {}) })
         ]
       }
     ),
-    menu !== null && /* @__PURE__ */ jsx17(
+    menu !== null && /* @__PURE__ */ jsx23(
       Overlay,
       {
         anchor: menu.anchor,
@@ -2441,7 +3551,7 @@ function ToolbarMenuButton({
         returnFocusTo: menu.anchor,
         themeClassName: menu.themeClassName,
         onDismiss: close,
-        children: /* @__PURE__ */ jsx17(
+        children: /* @__PURE__ */ jsx23(
           GridMenu,
           {
             entries,
@@ -2461,12 +3571,12 @@ function ToolbarMenuButton({
 }
 
 // src/DataGrid/toolbar/ToolbarSearch.tsx
-import { useEffect as useEffect3, useRef as useRef8, useState as useState9 } from "react";
+import { useEffect as useEffect5, useRef as useRef16, useState as useState14 } from "react";
 import {
   searchTextOf,
   setSearchText
 } from "@gridkitjs/core";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var SEARCH_DELAY_MS = 250;
 function ToolbarSearch({
   itemKey,
@@ -2475,9 +3585,9 @@ function ToolbarSearch({
   announce
 }) {
   const applied = searchTextOf(controller.getState().filter);
-  const [draft, setDraft] = useState9(null);
-  const timer = useRef8(void 0);
-  const unannounced = useRef8(null);
+  const [draft, setDraft] = useState14(null);
+  const timer = useRef16(void 0);
+  const unannounced = useRef16(null);
   const text = draft !== null && draft.over === applied ? draft.text : applied;
   function apply(next, over) {
     clearTimeout(timer.current);
@@ -2492,19 +3602,19 @@ function ToolbarSearch({
       controller.setFilter(searched);
     }
   }
-  useEffect3(() => {
+  useEffect5(() => {
     if (unannounced.current === applied) {
       unannounced.current = null;
       announce(messages.searchResults(controller.getView().rows.length));
     }
   });
-  useEffect3(
+  useEffect5(
     () => () => {
       clearTimeout(timer.current);
     },
     []
   );
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx24(
     "input",
     {
       type: "search",
@@ -2534,12 +3644,12 @@ function ToolbarSearch({
 }
 
 // src/DataGrid/toolbar/useToolbarOverflow.ts
-import { useLayoutEffect as useLayoutEffect8, useRef as useRef9, useState as useState10 } from "react";
+import { useLayoutEffect as useLayoutEffect12, useRef as useRef17, useState as useState15 } 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 [fit, setFit] = useState15(items.length);
+  const overflow = useRef17(null);
+  const measuredLayout = useRef17("");
   const layout = JSON.stringify(
     items.map((item) => [
       item.type,
@@ -2547,7 +3657,7 @@ function useToolbarOverflow(toolbarRef, items) {
       "label" in item ? item.label : null
     ])
   );
-  useLayoutEffect8(() => {
+  useLayoutEffect12(() => {
     const toolbar = toolbarRef.current;
     if (toolbar === null || layout === measuredLayout.current) {
       return;
@@ -2560,7 +3670,7 @@ function useToolbarOverflow(toolbarRef, items) {
       overflow.current.update(options);
     }
   }, [toolbarRef, layout, items]);
-  useLayoutEffect8(
+  useLayoutEffect12(
     () => () => {
       overflow.current?.detach();
       overflow.current = null;
@@ -2572,7 +3682,7 @@ function useToolbarOverflow(toolbarRef, items) {
 }
 
 // src/DataGrid/toolbar/GridToolbar.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 function reporting(run, report) {
   return () => {
     const ran = run();
@@ -2625,7 +3735,7 @@ function GridToolbar(props) {
     return null;
   }
   const label = (typeof props.toolbar === "object" ? props.toolbar.label : void 0) ?? props.messages.toolbarLabel;
-  return /* @__PURE__ */ jsx19(Toolbar, { ...props, entries, label });
+  return /* @__PURE__ */ jsx25(Toolbar, { ...props, entries, label });
 }
 function Toolbar({
   entries,
@@ -2637,8 +3747,8 @@ function Toolbar({
   messages,
   announce
 }) {
-  const toolbarRef = useRef10(null);
-  const menuClosed = useRef10(false);
+  const toolbarRef = useRef18(null);
+  const menuClosed = useRef18(false);
   const items = resolveToolbar(entries, {
     commands: commands.commands,
     contextFor: commands.contextFor
@@ -2649,11 +3759,11 @@ function Toolbar({
   );
   const fit = useToolbarOverflow(toolbarRef, items);
   const { shown, overflow } = splitToolbarItems(items, fit);
-  useLayoutEffect9(() => {
+  useLayoutEffect13(() => {
     const toolbar = toolbarRef.current;
     return toolbar === null ? void 0 : attachToolbar(toolbar);
   }, []);
-  useLayoutEffect9(() => {
+  useLayoutEffect13(() => {
     if (!menuClosed.current) {
       return;
     }
@@ -2669,7 +3779,7 @@ function Toolbar({
   function draw(item) {
     switch (item.type) {
       case "button":
-        return /* @__PURE__ */ jsxs12(
+        return /* @__PURE__ */ jsxs18(
           "button",
           {
             type: "button",
@@ -2690,14 +3800,14 @@ function Toolbar({
               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.icon !== void 0 && /* @__PURE__ */ jsx25("span", { className: "toolbar-button-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx25(MenuIcon, { name: item.icon }) }),
               item.label
             ]
           },
           item.key
         );
       case "menu":
-        return /* @__PURE__ */ jsx19(
+        return /* @__PURE__ */ jsx25(
           ToolbarMenuButton,
           {
             itemKey: item.key,
@@ -2709,7 +3819,7 @@ function Toolbar({
           item.key
         );
       case "search":
-        return /* @__PURE__ */ jsx19(
+        return /* @__PURE__ */ jsx25(
           ToolbarSearch,
           {
             itemKey: item.key,
@@ -2720,7 +3830,7 @@ function Toolbar({
           item.key
         );
       case "separator":
-        return /* @__PURE__ */ jsx19(
+        return /* @__PURE__ */ jsx25(
           "div",
           {
             role: "separator",
@@ -2731,7 +3841,7 @@ function Toolbar({
           item.key
         );
       case "spacer":
-        return /* @__PURE__ */ jsx19(
+        return /* @__PURE__ */ jsx25(
           "div",
           {
             className: "toolbar-spacer",
@@ -2740,7 +3850,7 @@ function Toolbar({
           item.key
         );
       case "custom":
-        return /* @__PURE__ */ jsx19(
+        return /* @__PURE__ */ jsx25(
           "div",
           {
             className: "toolbar-custom",
@@ -2751,7 +3861,7 @@ function Toolbar({
         );
     }
   }
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       ref: toolbarRef,
@@ -2761,7 +3871,7 @@ function Toolbar({
       className: "gridkit-toolbar",
       children: [
         shown.map(draw),
-        overflow.length > 0 && /* @__PURE__ */ jsx19(
+        overflow.length > 0 && /* @__PURE__ */ jsx25(
           ToolbarMenuButton,
           {
             itemKey: "more",
@@ -2817,7 +3927,7 @@ function useColumnDrag({
 
 // src/DataGrid/useColumnResize.ts
 import {
-  useState as useState11
+  useState as useState16
 } from "react";
 import {
   beginColumnResize,
@@ -2831,7 +3941,7 @@ function useColumnResize({
   controller,
   columnSizeDefaults
 }) {
-  const [activeColumnId, setActiveColumnId] = useState11(null);
+  const [activeColumnId, setActiveColumnId] = useState16(null);
   function startResize(entry, event) {
     event.stopPropagation();
     const session = beginColumnResize(
@@ -2909,11 +4019,11 @@ function useColumnResize({
 }
 
 // src/DataGrid/useElementWidth.ts
-import { useLayoutEffect as useLayoutEffect10, useState as useState12 } from "react";
+import { useLayoutEffect as useLayoutEffect14, useState as useState17 } from "react";
 import { observeElementWidth } from "@gridkitjs/dom";
 function useElementWidth(ref, enabled) {
-  const [width, setWidth] = useState12(null);
-  useLayoutEffect10(() => {
+  const [width, setWidth] = useState17(null);
+  useLayoutEffect14(() => {
     const element = ref.current;
     if (element === null || !enabled) {
       return void 0;
@@ -2924,12 +4034,12 @@ function useElementWidth(ref, enabled) {
 }
 
 // src/DataGrid/useGridController.ts
-import { useState as useState13, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useState as useState18, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import {
   createGridController
 } from "@gridkitjs/core";
 function useGridController(options) {
-  const [controller] = useState13(
+  const [controller] = useState18(
     () => createGridController(options)
   );
   controller.setOptions(options);
@@ -2938,15 +4048,15 @@ function useGridController(options) {
 }
 
 // src/DataGrid/useInfiniteScroll.ts
-import { useEffect as useEffect4, useRef as useRef11 } from "react";
+import { useEffect as useEffect6, useRef as useRef19 } from "react";
 import { attachInfiniteScroll } from "@gridkitjs/dom";
 function useInfiniteScroll({
   rootRef,
   sentinelRef,
   config
 }) {
-  const scroll = useRef11(null);
-  useEffect4(() => {
+  const scroll = useRef19(null);
+  useEffect6(() => {
     const root = rootRef.current;
     if (root === null) {
       return void 0;
@@ -2961,7 +4071,7 @@ function useInfiniteScroll({
       scroll.current = null;
     };
   }, [rootRef]);
-  useEffect4(() => {
+  useEffect6(() => {
     scroll.current?.update({
       sentinel: sentinelRef.current,
       hasMore: config?.hasMore ?? false,
@@ -2973,11 +4083,11 @@ function useInfiniteScroll({
 }
 
 // src/DataGrid/useLiveAnnouncer.ts
-import { useCallback, useLayoutEffect as useLayoutEffect11, useRef as useRef12 } from "react";
+import { useCallback, useLayoutEffect as useLayoutEffect15, useRef as useRef20 } from "react";
 import { createLiveAnnouncer } from "@gridkitjs/dom";
 function useLiveAnnouncer(containerRef) {
-  const announcer = useRef12(null);
-  useLayoutEffect11(() => {
+  const announcer = useRef20(null);
+  useLayoutEffect15(() => {
     const container = containerRef.current;
     if (container === null) {
       return void 0;
@@ -2995,8 +4105,8 @@ function useLiveAnnouncer(containerRef) {
 }
 
 // src/DataGrid/useRowVirtualizer.ts
-import { useLayoutEffect as useLayoutEffect12, useState as useState14 } from "react";
-import { createRowVirtualizer } from "@gridkitjs/dom";
+import { useLayoutEffect as useLayoutEffect16, useState as useState19 } from "react";
+import { createRowVirtualizer as createRowVirtualizer2 } from "@gridkitjs/dom";
 var EMPTY_RANGE = {
   startIndex: 0,
   endIndex: -1,
@@ -3013,14 +4123,14 @@ function useRowVirtualizer({
   estimatedRowHeight,
   overscan
 }) {
-  const [virtualizer, setVirtualizer] = useState14(null);
-  const [range, setRange] = useState14(EMPTY_RANGE);
-  useLayoutEffect12(() => {
+  const [virtualizer, setVirtualizer] = useState19(null);
+  const [range, setRange] = useState19(EMPTY_RANGE);
+  useLayoutEffect16(() => {
     const element = bodyScrollRef.current;
     if (!enabled || element === null) {
       return void 0;
     }
-    const created = createRowVirtualizer(element, {
+    const created = createRowVirtualizer2(element, {
       estimatedRowHeight,
       overscan,
       onRange: setRange
@@ -3030,7 +4140,7 @@ function useRowVirtualizer({
       created.destroy();
     };
   }, [enabled, bodyScrollRef, estimatedRowHeight, overscan]);
-  useLayoutEffect12(() => {
+  useLayoutEffect16(() => {
     virtualizer?.setRowCount(rows.length);
     virtualizer?.resetHeights();
   }, [virtualizer, rows]);
@@ -3047,7 +4157,7 @@ function useRowVirtualizer({
 }
 
 // src/DataGrid/DataGrid.tsx
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 var NO_AGGREGATES = [];
 function paginationReader(controller) {
   let last;
@@ -3104,16 +4214,16 @@ function DataGrid(props) {
   const hoverRows = hoverable?.rows ?? true;
   const hoverColumns = hoverable?.columns ?? true;
   const hoverCells = hoverable?.cells ?? true;
-  const viewportRef = useRef13(null);
-  const headerTableRef = useRef13(null);
-  const bodyTableRef = useRef13(null);
-  const bodyScrollRef = useRef13(null);
-  const sentinelRef = useRef13(null);
+  const viewportRef = useRef21(null);
+  const headerTableRef = useRef21(null);
+  const bodyTableRef = useRef21(null);
+  const bodyScrollRef = useRef21(null);
+  const sentinelRef = useRef21(null);
   const viewportWidth = useElementWidth(viewportRef, resizeMode === "fit");
-  const subscribersRef = useRef13(/* @__PURE__ */ new Set());
-  const gridId = useId();
+  const subscribersRef = useRef21(/* @__PURE__ */ new Set());
+  const gridId = useId2();
   const announce = useLiveAnnouncer(viewportRef);
-  const messages = useMemo4(
+  const messages = useMemo5(
     () => resolveMessages(messageOverrides),
     [messageOverrides]
   );
@@ -3128,8 +4238,8 @@ function DataGrid(props) {
       columnOf
     })
   });
-  const [readPagination] = useState15(() => paginationReader(controller));
-  const [readSelectedRows] = useState15(() => selectedRowsReader(controller));
+  const [readPagination] = useState20(() => paginationReader(controller));
+  const [readSelectedRows] = useState20(() => selectedRowsReader(controller));
   const virtualizer = useRowVirtualizer({
     enabled: virtualized,
     rows: view.pageRows,
@@ -3137,7 +4247,7 @@ function DataGrid(props) {
     estimatedRowHeight,
     overscan
   });
-  useEffect5(() => {
+  useEffect7(() => {
     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."
@@ -3145,7 +4255,7 @@ function DataGrid(props) {
     }
   }, [virtualized, height]);
   const hasInfiniteScroll = infiniteScroll !== void 0;
-  useEffect5(() => {
+  useEffect7(() => {
     if (paginated && hasInfiniteScroll) {
       console.error(
         "DataGrid: `paginated` and `infiniteScroll` are mutually exclusive \u2014 only `paginated` takes effect while both are set."
@@ -3162,7 +4272,7 @@ function DataGrid(props) {
   }
   function columnName(columnId) {
     const column = columnOf(columnId);
-    return column === void 0 ? columnId : resolveColumnHeaderText(column);
+    return column === void 0 ? columnId : resolveColumnHeaderText2(column);
   }
   const resize = useColumnResize({
     // `@gridkitjs/dom`'s `measureColumnContent` only ever matches
@@ -3206,19 +4316,20 @@ function DataGrid(props) {
     resize,
     openPanel: panels.open
   });
-  const orderedIds = useMemo4(
+  const handleCopyKey = useGridCopy({ controller, commands, nav });
+  const orderedIds = useMemo5(
     () => view.dataColumns.map((entry) => entry.id),
     [view.dataColumns]
   );
-  const displayedIds = useMemo4(
+  const displayedIds = useMemo5(
     () => view.columns.map((entry) => entry.id),
     [view.columns]
   );
-  const definitions = useMemo4(
+  const definitions = useMemo5(
     () => new Map(view.dataColumns.map((entry) => [entry.id, entry.column])),
     [view.dataColumns]
   );
-  const groupByDraggableIds = useMemo4(
+  const groupByDraggableIds = useMemo5(
     () => new Set(
       view.columns.filter((entry) => entry.groupByDraggable).map((entry) => entry.id)
     ),
@@ -3277,12 +4388,12 @@ function DataGrid(props) {
     messages,
     columnName
   });
-  useEffect5(() => {
+  useEffect7(() => {
     for (const listener of subscribersRef.current) {
       listener();
     }
   }, [view, state, nav.focus]);
-  useImperativeHandle(ref, () => ({
+  useImperativeHandle3(ref, () => ({
     get element() {
       return viewportRef.current;
     },
@@ -3347,9 +4458,9 @@ function DataGrid(props) {
     },
     openContextMenu: contextMenu.open,
     closeContextMenu: contextMenu.close,
-    openColumnChooser: () => {
-      panels.open("columnChooser", { area: "grid" });
-    },
+    ...exportApi(commands),
+    ...printApi(commands),
+    ...panelApi(panels, controller),
     runCommand: (commandId, target = { area: "grid" }) => commands.run(commandId, target, "api"),
     scrollToRow: (rowId, options) => {
       const index = controller.getView().pageRows.findIndex(
@@ -3391,8 +4502,8 @@ function DataGrid(props) {
     selection.columnMode === false ? "" : "selectable-columns",
     selection.cellMode === false ? "" : "selectable-cells"
   );
-  return /* @__PURE__ */ jsxs13("div", { className: "gridkit-data-grid-viewport", ref: viewportRef, children: [
-    /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs19("div", { className: "gridkit-data-grid-viewport", ref: viewportRef, children: [
+    /* @__PURE__ */ jsx26(
       GridToolbar,
       {
         toolbar: props.toolbar,
@@ -3404,7 +4515,7 @@ function DataGrid(props) {
         announce
       }
     ),
-    showGroupByBar && /* @__PURE__ */ jsx20(
+    showGroupByBar && /* @__PURE__ */ jsx26(
       GroupByBar,
       {
         columns: view.columns,
@@ -3418,7 +4529,7 @@ function DataGrid(props) {
         messages
       }
     ),
-    /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsxs19(
       "div",
       {
         id: gridId,
@@ -3435,6 +4546,7 @@ function DataGrid(props) {
         ),
         onKeyDown: (event) => {
           if (!isOwnEvent(event)) return;
+          handleCopyKey(event);
           if (event.key === "Escape") {
             if (drag.draggedColumnId !== null || resize.activeColumnId !== null)
               return;
@@ -3448,27 +4560,28 @@ function DataGrid(props) {
           }
         },
         children: [
-          /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsxs19(
             "table",
             {
               ref: headerTableRef,
               style: { width: totalColumnWidth(view.columns) },
               className: classNames(gridTableClassName, "gridkit-data-grid-header"),
               children: [
-                /* @__PURE__ */ jsx20(GridColgroup, { columns: view.columns }),
-                /* @__PURE__ */ jsx20(
+                /* @__PURE__ */ jsx26(GridColgroup, { columns: view.columns }),
+                /* @__PURE__ */ jsx26(
                   GridHeader,
                   {
                     columns: view.columns,
                     resize,
                     drag,
                     controller,
-                    columnSort: state.columnSort,
+                    state,
                     sortableColumns,
-                    groupBy: state.groupBy,
                     groupableColumns,
                     groupToggleIconColumns,
                     headerMenu: contextMenu.opens("header"),
+                    panels,
+                    messages,
                     nav,
                     selection
                   }
@@ -3476,7 +4589,7 @@ function DataGrid(props) {
               ]
             }
           ),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx26(
             "div",
             {
               className: "gridkit-data-grid-body",
@@ -3484,15 +4597,15 @@ function DataGrid(props) {
               style: height === void 0 ? void 0 : {
                 "--gridkit-body-height": typeof height === "number" ? `${String(height)}px` : height
               },
-              children: /* @__PURE__ */ jsxs13(
+              children: /* @__PURE__ */ jsxs19(
                 "table",
                 {
                   ref: bodyTableRef,
                   style: { width: totalColumnWidth(view.columns) },
                   className: gridTableClassName,
                   children: [
-                    /* @__PURE__ */ jsx20(GridColgroup, { columns: view.columns }),
-                    /* @__PURE__ */ jsx20(
+                    /* @__PURE__ */ jsx26(GridColgroup, { columns: view.columns }),
+                    /* @__PURE__ */ jsx26(
                       GridBody,
                       {
                         columns: view.columns,
@@ -3521,7 +4634,7 @@ function DataGrid(props) {
               )
             }
           ),
-          aggregates.length > 0 && /* @__PURE__ */ jsxs13(
+          aggregates.length > 0 && /* @__PURE__ */ jsxs19(
             "table",
             {
               style: { width: totalColumnWidth(view.columns) },
@@ -3530,8 +4643,8 @@ function DataGrid(props) {
                 "gridkit-data-grid-footer"
               ),
               children: [
-                /* @__PURE__ */ jsx20(GridColgroup, { columns: view.columns }),
-                /* @__PURE__ */ jsx20(
+                /* @__PURE__ */ jsx26(GridColgroup, { columns: view.columns }),
+                /* @__PURE__ */ jsx26(
                   GridFooter,
                   {
                     columns: view.columns,
@@ -3547,9 +4660,17 @@ function DataGrid(props) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx20(GridContextMenu, { contextMenu }),
-    /* @__PURE__ */ jsx20(GridPanels, { panels, controller, messages }),
-    paginated && (pager?.template ? pager.template(pagerContext) : /* @__PURE__ */ jsx20(GridPager, { pager: pagerContext, config: pager, messages }))
+    /* @__PURE__ */ jsx26(GridContextMenu, { contextMenu }),
+    /* @__PURE__ */ jsx26(
+      GridPanels,
+      {
+        panels,
+        controller,
+        commands,
+        messages
+      }
+    ),
+    paginated && (pager?.template ? pager.template(pagerContext) : /* @__PURE__ */ jsx26(GridPager, { pager: pagerContext, config: pager, messages }))
   ] });
 }
 
@@ -3726,9 +4847,9 @@ function useColumnVisibilityState(gridRef) {
 }
 
 // src/DataGrid/hooks/useFilterState.ts
-import { useCallback as useCallback11, useState as useState16 } from "react";
+import { useCallback as useCallback11, useState as useState21 } from "react";
 function useFilterState(gridRef) {
-  const [fallback] = useState16(() => []);
+  const [fallback] = useState21(() => []);
   const filter = useGridSnapshot(
     gridRef,
     useCallback11((api) => api.getFilter(), []),
@@ -3741,8 +4862,12 @@ function useFilterState(gridRef) {
     }
   };
 }
+
+// src/index.ts
+import { excelFilter } from "@gridkitjs/core";
 export {
   DataGrid,
+  excelFilter,
   serializeGridState,
   useAggregateState,
   useColumnOrderState,