@gridkitjs/react 0.0.0-dev-20261106222533

package/dist/index.js

@@ -0,0 +1,4978 @@
+"use client";
+
+// src/DataGrid/DataGrid.tsx
+import {
+  useEffect as useEffect7,
+  useId as useId2,
+  useImperativeHandle as useImperativeHandle3,
+  useMemo as useMemo5,
+  useRef as useRef21,
+  useState as useState20
+} from "react";
+import {
+  moveColumnBefore,
+  resolveColumnHeaderText as resolveColumnHeaderText2,
+  resolveMessages,
+  resolveRows,
+  totalColumnWidth
+} from "@gridkitjs/core";
+
+// src/DataGrid/components/GridColgroup.tsx
+import { jsx } from "react/jsx-runtime";
+function GridColgroup({ columns }) {
+  return /* @__PURE__ */ jsx("colgroup", { children: columns.map((entry) => /* @__PURE__ */ jsx("col", { style: { width: entry.width } }, entry.id)) });
+}
+
+// src/DataGrid/components/GridHeader.tsx
+import { createPortal } from "react-dom";
+import {
+  buildKeyShortcuts,
+  intentOf,
+  isColumnFiltered,
+  KEYBOARD_STEP,
+  resolveColumnFilterMenu,
+  sortDirectionFor,
+  sortPriorityFor
+} from "@gridkitjs/core";
+
+// src/DataGrid/ariaAttr.ts
+function ariaAttr(condition, key, value) {
+  return condition ? { [key]: value } : {};
+}
+
+// src/DataGrid/classNames.ts
+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" })
+  ] });
+}
+function FilterIcon() {
+  return /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54z" }) });
+}
+function ChevronLeftIcon() {
+  return /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2("path", { d: "m15 18-6-6 6-6" }) });
+}
+function ChevronRightIcon() {
+  return /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2("path", { d: "m9 18 6-6-6-6" }) });
+}
+function ChevronsLeftIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "m11 17-5-5 5-5" }),
+    /* @__PURE__ */ jsx2("path", { d: "m18 17-5-5 5-5" })
+  ] });
+}
+function ChevronsRightIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "m6 17 5-5-5-5" }),
+    /* @__PURE__ */ jsx2("path", { d: "m13 17 5-5-5-5" })
+  ] });
+}
+
+// src/DataGrid/isOwnEvent.ts
+function isOwnEvent(event) {
+  return event.target instanceof Node && event.currentTarget.contains(event.target);
+}
+
+// src/DataGrid/useGridNavigation.ts
+import {
+  useEffect,
+  useLayoutEffect,
+  useState,
+  useSyncExternalStore
+} from "react";
+import { HEADER_ROW } from "@gridkitjs/core";
+import {
+  createGridFocus,
+  findBodyRow,
+  measurePageSize
+} from "@gridkitjs/dom";
+function tabIndexFor(columnIndex, focusedColumnIndex) {
+  return columnIndex === focusedColumnIndex ? 0 : -1;
+}
+function useGridNavigation({
+  headerTableRef,
+  bodyTableRef,
+  rowCount,
+  columnCount,
+  isSkippableRow,
+  virtualRange
+}) {
+  const options = {
+    rowCount,
+    columnCount,
+    isSkippableRow,
+    virtualRange
+  };
+  const [gridFocus] = useState(() => createGridFocus(options));
+  gridFocus.setOptions(options);
+  const focus = useSyncExternalStore(
+    gridFocus.subscribe,
+    gridFocus.getFocus,
+    gridFocus.getFocus
+  );
+  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);
+  });
+  return {
+    focus,
+    tabIndexFor: (rowIndex, columnIndex) => tabIndexFor(
+      columnIndex,
+      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,
+        event,
+        measurePageSize(bodyTableRef.current)
+      )) {
+        event.preventDefault();
+      }
+    }
+  };
+}
+
+// src/DataGrid/useGridSelection.ts
+import { useMemo } from "react";
+function keyboardSelectIntent(event) {
+  return {
+    ctrlKey: event.key === " " || event.ctrlKey,
+    metaKey: event.metaKey,
+    shiftKey: event.shiftKey
+  };
+}
+function useGridSelection({
+  controller,
+  state,
+  selectable
+}) {
+  const selectedRowIds = useMemo(
+    () => new Set(state.rowSelection),
+    [state.rowSelection]
+  );
+  const selectedColumnIds = useMemo(
+    () => new Set(state.columnSelection),
+    [state.columnSelection]
+  );
+  return {
+    rowMode: selectable?.rows ?? false,
+    columnMode: selectable?.columns ?? false,
+    cellMode: selectable?.cells ?? false,
+    toggleOnClick: selectable?.toggleOnClick ?? false,
+    selectedRowIds,
+    selectedColumnIds,
+    selectedCell: state.cellSelection,
+    selectRow: controller.selectRow,
+    selectColumn: controller.selectColumn,
+    selectCell: controller.selectCell,
+    selectAllRows: controller.selectAllRows,
+    clear: controller.clearSelection
+  };
+}
+
+// src/DataGrid/components/GridHeader.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function GridHeader({
+  columns,
+  resize,
+  drag,
+  controller,
+  state,
+  sortableColumns,
+  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", { role: "rowgroup", 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;
+      const dropBefore = beforeId !== void 0 && beforeId === entry.id;
+      const dropAfter = beforeId === null && index === columns.length - 1;
+      const selected = selection.selectedColumnIds.has(entry.id);
+      const sortable = column.sortable ?? sortableColumns;
+      const sortDirection = sortDirectionFor(columnSort, entry.id);
+      const sortPriority = sortPriorityFor(columnSort, entry.id);
+      const groupable = column.groupable ?? groupableColumns;
+      const showGroupToggleIcon = column.groupToggleIcon ?? groupToggleIconColumns;
+      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(
+        "th",
+        {
+          scope: "col",
+          role: "columnheader",
+          "data-gridkit-column": entry.id,
+          "aria-colindex": index + 1,
+          tabIndex: nav.tabIndexFor(HEADER_ROW, index),
+          ...ariaAttr(
+            selection.columnMode !== false,
+            "aria-selected",
+            selected
+          ),
+          onFocus: () => {
+            nav.focusCell(HEADER_ROW, index);
+          },
+          onClick: (event) => {
+            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 || event.target.closest(".header-filter-toggle") !== null)) {
+              return;
+            }
+            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) {
+              event.preventDefault();
+              drag.moveByKeyboard(entry, direction);
+              return;
+            }
+            if (horizontal && event.altKey && entry.resizable) {
+              event.preventDefault();
+              resize.nudge(entry, direction * KEYBOARD_STEP);
+              return;
+            }
+            if (event.key === "Enter" && event.altKey && entry.resizable) {
+              event.preventDefault();
+              resize.sizeToContent(entry);
+              return;
+            }
+            if (event.key === "ArrowUp" && event.altKey && sortable) {
+              event.preventDefault();
+              controller.toggleColumnSort(entry.id, {
+                stack: event.shiftKey
+              });
+              return;
+            }
+            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;
+            }
+            if (event.key === " " || event.key === "Enter") {
+              event.preventDefault();
+              selection.selectColumn(
+                entry.id,
+                intentOf(keyboardSelectIntent(event))
+              );
+              return;
+            }
+            nav.onKeyDown(event);
+          },
+          className: classNames(
+            "header-cell",
+            // The grab affordance a header showing either drag
+            // destination shares — a column dragged only for grouping
+            // (`groupByDraggable` without `reorderable`) grabs the same
+            // way one dragged only for reordering does.
+            entry.reorderable || entry.groupByDraggable ? "is-reorderable" : "",
+            selected ? "is-selected" : "",
+            resizing ? "is-resizing" : "",
+            dragging ? "is-dragging" : "",
+            dropBefore ? "is-drop-before" : "",
+            dropAfter ? "is-drop-after" : "",
+            column.wrap?.header ? "is-wrapped" : "",
+            column.headerClassName ?? ""
+          ),
+          ...ariaAttr(shortcuts !== "", "aria-keyshortcuts", shortcuts),
+          ...ariaAttr(
+            filtered,
+            "aria-description",
+            messages.columnFiltered
+          ),
+          ...ariaAttr(
+            sortable && sortDirection !== null,
+            "aria-sort",
+            sortDirection === "asc" ? "ascending" : "descending"
+          ),
+          ...(entry.reorderable || entry.groupByDraggable) && {
+            onPointerDown: (event) => {
+              drag.startDrag(entry, event);
+            }
+          },
+          children: [
+            groupable && showGroupToggleIcon && /*
+             * Inline, before the label, rather than absolutely
+             * positioned like the sort toggle and resize handle: those
+             * two already share the header's right edge, and a third
+             * overlay there would need its own carve-out. Sitting in
+             * normal flow costs nothing but a few pixels of label width.
+             * A pointer affordance only, same as the other two — the
+             * keyboard equivalent is Alt+ArrowDown on the header itself.
+             */
+            /* @__PURE__ */ jsx3(
+              "span",
+              {
+                className: classNames(
+                  "header-group-toggle",
+                  isGrouped ? "is-grouped" : ""
+                ),
+                "aria-hidden": "true",
+                tabIndex: -1,
+                onPointerDown: (event) => {
+                  event.stopPropagation();
+                },
+                onClick: (event) => {
+                  event.stopPropagation();
+                  controller.toggleGroupBy(entry.id);
+                },
+                children: /* @__PURE__ */ jsx3(GroupIcon, {})
+              }
+            ),
+            entry.label,
+            sortable && /*
+             * A pointer affordance only, and hidden from assistive
+             * technology like the resize handle: the keyboard equivalent
+             * lives on the header itself, under Alt+ArrowUp (plain) /
+             * Alt+Shift+ArrowUp (stacking).
+             */
+            /* @__PURE__ */ jsxs2(
+              "span",
+              {
+                className: classNames(
+                  "header-sort-toggle",
+                  sortDirection !== null ? `is-sorted-${sortDirection}` : ""
+                ),
+                "aria-hidden": "true",
+                tabIndex: -1,
+                onPointerDown: (event) => {
+                  event.stopPropagation();
+                },
+                onClick: (event) => {
+                  controller.toggleColumnSort(entry.id, {
+                    stack: event.shiftKey
+                  });
+                },
+                children: [
+                  sortDirection === null ? /* @__PURE__ */ jsx3(ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsx3(ChevronUpIcon, {}),
+                  sortPriority !== null && sortPriority > 1 && /* @__PURE__ */ jsx3("span", { className: "header-sort-priority", children: sortPriority })
+                ]
+              }
+            ),
+            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
+             * put N tab stops inside a widget that is meant to have one.
+             * The keyboard resizes from the header itself, under Alt.
+             */
+            /* @__PURE__ */ jsx3(
+              "span",
+              {
+                className: "header-resize-handle",
+                "aria-hidden": "true",
+                tabIndex: -1,
+                onPointerDown: (event) => {
+                  resize.startResize(entry, event);
+                },
+                onDoubleClick: () => {
+                  resize.sizeToContent(entry);
+                }
+              }
+            )
+          ]
+        },
+        entry.id
+      );
+    }) }),
+    draggedEntry !== null && drag.ghostTransform !== null && createPortal(
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "gridkit-data-grid header-cell drag-ghost",
+          style: {
+            width: draggedEntry.width,
+            transform: drag.ghostTransform
+          },
+          "aria-hidden": "true",
+          children: draggedEntry.label
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+
+// src/DataGrid/components/GridBody.tsx
+import {
+  useMemo as useMemo2,
+  useState as useState2
+} from "react";
+import {
+  groupRowId,
+  intentOf as intentOf2
+} from "@gridkitjs/core";
+import {
+  bodyCellFrom,
+  bodyRowFrom,
+  groupRowFrom
+} from "@gridkitjs/dom";
+
+// src/DataGrid/rowProps.ts
+var NO_ATTRIBUTES = {};
+var NO_ROW_PROPS = {
+  className: "",
+  attributes: NO_ATTRIBUTES
+};
+function sameAttributes(a, b) {
+  const keys = Object.keys(a);
+  return keys.length === Object.keys(b).length && keys.every((key) => a[key] === b[key]);
+}
+function createRowPropsResolver() {
+  let previous = /* @__PURE__ */ new Map();
+  return (rows, getRowProps) => {
+    if (getRowProps === void 0) {
+      previous = /* @__PURE__ */ new Map();
+      return () => NO_ROW_PROPS;
+    }
+    const resolved = /* @__PURE__ */ new Map();
+    const attributesById = /* @__PURE__ */ new Map();
+    for (const entry of rows) {
+      const { className = "", attributes = NO_ATTRIBUTES } = getRowProps(entry);
+      const last = previous.get(entry.rowId);
+      const stable = last !== void 0 && sameAttributes(last, attributes) ? last : attributes;
+      attributesById.set(entry.rowId, stable);
+      resolved.set(entry.rowId, { className, attributes: stable });
+    }
+    previous = attributesById;
+    return (rowId) => resolved.get(rowId) ?? NO_ROW_PROPS;
+  };
+}
+
+// src/DataGrid/components/GridGroupRow.tsx
+import { memo } from "react";
+import {
+  formatGroupValue,
+  resolveColumnLabel
+} from "@gridkitjs/core";
+
+// src/DataGrid/components/renderAggregate.ts
+import {
+  formatAggregateValue
+} from "@gridkitjs/core";
+function renderAggregate(value, spec, column, rows, locale) {
+  if (column?.footerTemplate) {
+    return column.footerTemplate({ value, rows });
+  }
+  if (value === null || value === void 0) {
+    return "\u2014";
+  }
+  return formatAggregateValue(value, spec, column, locale);
+}
+
+// src/DataGrid/components/GridGroupRow.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function GridGroupRowComponent({
+  columnCount,
+  groupId,
+  level,
+  groupColumn,
+  value,
+  expanded,
+  count,
+  rowIndex,
+  datasetIndex,
+  posinset,
+  setsize,
+  focused,
+  contextMenu,
+  aggregates,
+  results,
+  definitions,
+  locale,
+  cellMessages,
+  ref
+}) {
+  return /* @__PURE__ */ jsx4(
+    "tr",
+    {
+      ref,
+      role: "row",
+      "aria-rowindex": datasetIndex + 2,
+      "aria-level": level + 1,
+      "aria-expanded": expanded,
+      "aria-setsize": setsize,
+      "aria-posinset": posinset,
+      "data-gridkit-group": groupId,
+      "data-gridkit-row-index": rowIndex,
+      className: classNames(
+        "grid-group-row",
+        `is-group-level-${String(level)}`
+      ),
+      children: /* @__PURE__ */ jsx4(
+        "td",
+        {
+          role: "gridcell",
+          colSpan: columnCount,
+          tabIndex: focused ? 0 : -1,
+          "aria-keyshortcuts": contextMenu ? "Space Enter Shift+F10" : "Space Enter",
+          className: "grid-group-cell",
+          children: /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              className: "grid-group-cell-content",
+              style: { paddingInlineStart: `${String(level * 1.25 + 0.5)}rem` },
+              children: [
+                /* @__PURE__ */ jsx4(
+                  "span",
+                  {
+                    className: classNames(
+                      "group-toggle",
+                      expanded ? "is-expanded" : "is-collapsed"
+                    ),
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsxs3("span", { className: "group-label", children: [
+                  resolveColumnLabel(groupColumn),
+                  ":",
+                  " ",
+                  formatGroupValue(value, groupColumn, locale, cellMessages)
+                ] }),
+                /* @__PURE__ */ jsxs3("span", { className: "group-count", children: [
+                  "(",
+                  count,
+                  ")"
+                ] }),
+                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);
+                  const rendered = renderAggregate(
+                    aggregateValue,
+                    spec,
+                    column,
+                    [],
+                    locale
+                  );
+                  const aggregateLabel = spec.id ?? (column === void 0 ? spec.columnId : resolveColumnLabel(column));
+                  return /* @__PURE__ */ jsxs3("span", { className: "group-aggregate", children: [
+                    aggregateLabel,
+                    ": ",
+                    rendered
+                  ] }, key);
+                }) })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var GridGroupRow = memo(
+  GridGroupRowComponent
+);
+var GridGroupRow_default = GridGroupRow;
+
+// src/DataGrid/components/GridGroupSummaryRow.tsx
+import { memo as memo2 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function GridGroupSummaryRowComponent({
+  groupId,
+  level,
+  rowIndex,
+  datasetIndex,
+  results,
+  aggregates,
+  columns,
+  locale,
+  ref
+}) {
+  return /* @__PURE__ */ jsx5(
+    "tr",
+    {
+      ref,
+      role: "row",
+      "aria-rowindex": datasetIndex + 2,
+      "data-gridkit-group-summary": groupId,
+      "data-gridkit-row-index": rowIndex,
+      className: classNames(
+        "grid-group-summary-row",
+        `is-group-level-${String(level)}`
+      ),
+      children: columns.map((entry) => {
+        const specs = aggregates.filter(
+          (candidate) => candidate.columnId === entry.id
+        );
+        return /* @__PURE__ */ jsxs4(
+          "td",
+          {
+            role: "gridcell",
+            "data-gridkit-column": entry.id,
+            className: "grid-group-summary-cell",
+            style: { textAlign: specs[0]?.alignment ?? entry.alignment },
+            children: [
+              entry.id === columns[0]?.id && /* @__PURE__ */ jsx5(
+                "span",
+                {
+                  className: "grid-group-summary-indent",
+                  style: { width: `${String(level * 1.25 + 0.5)}rem` },
+                  "aria-hidden": "true"
+                }
+              ),
+              specs.map(
+                (spec) => renderAggregate(
+                  results.get(spec.id ?? spec.columnId),
+                  spec,
+                  entry.column,
+                  [],
+                  locale
+                )
+              ).flatMap(
+                (rendered, index) => index === 0 ? [rendered] : [", ", rendered]
+              )
+            ]
+          },
+          entry.id
+        );
+      })
+    }
+  );
+}
+var GridGroupSummaryRow = memo2(
+  GridGroupSummaryRowComponent
+);
+var GridGroupSummaryRow_default = GridGroupSummaryRow;
+
+// src/DataGrid/components/GridRow.tsx
+import {
+  accessDotted,
+  formatCellValue
+} from "@gridkitjs/core";
+import { memo as memo3 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function GridRowComponent({
+  columns,
+  rowId,
+  row,
+  rowIndex,
+  datasetIndex,
+  activeColumnId,
+  selectedColumnIds,
+  selected,
+  selectedColumnId,
+  focusedColumnIndex,
+  rowsSelectable,
+  cellsSelectable,
+  contextMenu,
+  locale,
+  cellMessages,
+  rowClassName,
+  rowAttributes,
+  ref
+}) {
+  const shortcuts = [
+    cellsSelectable ? "Space Enter" : "",
+    contextMenu ? "Shift+F10" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx6(
+    "tr",
+    {
+      ...rowAttributes,
+      ref,
+      role: "row",
+      "aria-rowindex": datasetIndex + 2,
+      "data-gridkit-row-index": rowIndex,
+      "data-gridkit-row-id": rowId,
+      ...ariaAttr(rowsSelectable, "aria-selected", selected),
+      className: classNames(
+        "grid-row",
+        selected ? "is-selected" : "",
+        rowClassName
+      ),
+      children: columns.map(({ id, column, alignment }, columnIndex) => {
+        const value = accessDotted(row, column.field);
+        const cellSelected = id === selectedColumnId;
+        return /* @__PURE__ */ jsx6(
+          "td",
+          {
+            role: "gridcell",
+            "data-gridkit-column": id,
+            "aria-colindex": columnIndex + 1,
+            tabIndex: tabIndexFor(columnIndex, focusedColumnIndex),
+            ...ariaAttr(cellsSelectable, "aria-selected", cellSelected),
+            ...ariaAttr(shortcuts !== "", "aria-keyshortcuts", shortcuts),
+            className: classNames(
+              "grid-cell",
+              id === activeColumnId ? "is-resizing" : "",
+              cellSelected || selectedColumnIds.has(id) ? "is-selected" : "",
+              column.wrap?.cells ? "is-wrapped" : "",
+              column.cellClassName ?? ""
+            ),
+            style: { textAlign: alignment },
+            children: column.cellTemplate ? column.cellTemplate({
+              value,
+              row,
+              rowIndex,
+              datasetIndex,
+              rowId,
+              selected
+            }) : formatCellValue(value, column, locale, row, cellMessages)
+          },
+          id
+        );
+      })
+    }
+  );
+}
+var GridRow = memo3(GridRowComponent);
+var GridRow_default = GridRow;
+
+// src/DataGrid/components/GridBody.tsx
+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) {
+    if (!("kind" in entry) || entry.kind !== "group") continue;
+    const parentKey = groupRowId(entry.path.slice(0, -1));
+    totals.set(parentKey, (totals.get(parentKey) ?? 0) + 1);
+  }
+  const seen = /* @__PURE__ */ new Map();
+  const meta = /* @__PURE__ */ new Map();
+  for (const entry of rows) {
+    if (!("kind" in entry) || entry.kind !== "group") continue;
+    const parentKey = groupRowId(entry.path.slice(0, -1));
+    const posinset = (seen.get(parentKey) ?? 0) + 1;
+    seen.set(parentKey, posinset);
+    meta.set(entry.groupId, {
+      posinset,
+      setsize: totals.get(parentKey) ?? posinset
+    });
+  }
+  return meta;
+}
+function GridBody({
+  columns,
+  definitions,
+  rows,
+  activeColumnId,
+  nav,
+  selection,
+  controller,
+  aggregates,
+  groupAggregateDisplay,
+  virtualRange,
+  infiniteScroll,
+  sentinelRef,
+  locale,
+  getRowProps,
+  onRowClick,
+  onRowDoubleClick,
+  messages,
+  cellMenu,
+  groupMenu
+}) {
+  const { selectedCell, rowMode, cellMode, toggleOnClick } = selection;
+  const ariaMeta = useMemo2(() => groupAriaMeta(rows), [rows]);
+  const visibleRows = virtualRange === null ? rows : rows.slice(virtualRange.startIndex, virtualRange.endIndex + 1);
+  const { booleanTrue, booleanFalse, blankGroupValue } = messages;
+  const cellMessages = useMemo2(
+    () => ({ booleanTrue, booleanFalse, blankGroupValue }),
+    [booleanTrue, booleanFalse, blankGroupValue]
+  );
+  const [resolveRowProps] = useState2(() => createRowPropsResolver());
+  const rowPropsOf = resolveRowProps(
+    visibleRows.filter(
+      (entry) => !("kind" in entry)
+    ),
+    getRowProps
+  );
+  function targetOf(target) {
+    const position = bodyCellFrom(target);
+    const entry = position === null ? void 0 : rows[position.rowIndex];
+    if (position === null || entry === void 0 || "kind" in entry) {
+      return null;
+    }
+    return { position, rowId: entry.rowId };
+  }
+  function select(rowId, columnId, modifiers) {
+    if (rowMode !== false) {
+      selection.selectRow(rowId, intentOf2(modifiers, { toggleOnClick }));
+    }
+    if (cellMode !== false) {
+      selection.selectCell({ rowId, columnId }, intentOf2(modifiers));
+    }
+  }
+  function rowPointerEventOf(event) {
+    const target = bodyRowFrom(event.target);
+    const entry = target === null ? void 0 : rows[target.rowIndex];
+    if (target === null || entry === void 0 || "kind" in entry) {
+      return null;
+    }
+    return {
+      row: entry,
+      columnId: target.columnId,
+      native: {
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        button: event.button
+      }
+    };
+  }
+  function reportRowPointer(event, callback) {
+    if (callback === void 0) return;
+    const pointer = rowPointerEventOf(event);
+    if (pointer !== null) {
+      callback(pointer);
+    }
+  }
+  return /* @__PURE__ */ jsxs5(
+    "tbody",
+    {
+      role: "rowgroup",
+      className: "grid-body",
+      onFocus: (event) => {
+        const group = groupRowFrom(event.target);
+        if (group !== null) {
+          nav.focusCell(group.rowIndex, 0);
+          return;
+        }
+        const found = targetOf(event.target);
+        if (found === null) return;
+        nav.focusCell(found.position.rowIndex, found.position.columnIndex);
+      },
+      onClick: (event) => {
+        const group = groupRowFrom(event.target);
+        if (group !== null) {
+          controller.toggleGroupExpansion(group.groupId);
+          return;
+        }
+        const found = targetOf(event.target);
+        if (found !== null) {
+          select(found.rowId, found.position.columnId, event);
+        }
+        reportRowPointer(event, onRowClick);
+      },
+      onDoubleClick: (event) => {
+        reportRowPointer(event, onRowDoubleClick);
+      },
+      onKeyDown: (event) => {
+        if (!isOwnEvent(event)) return;
+        const group = groupRowFrom(event.target);
+        if (group !== null) {
+          if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+            event.preventDefault();
+            return;
+          }
+          if (event.key === " " || event.key === "Enter") {
+            event.preventDefault();
+            controller.toggleGroupExpansion(group.groupId);
+            return;
+          }
+          nav.onKeyDown(event);
+          return;
+        }
+        if (event.key === " " || event.key === "Enter") {
+          const found = targetOf(event.target);
+          if (found === null) return;
+          event.preventDefault();
+          select(
+            found.rowId,
+            found.position.columnId,
+            keyboardSelectIntent(event)
+          );
+          return;
+        }
+        nav.onKeyDown(event);
+      },
+      children: [
+        virtualRange !== null && virtualRange.offsetBefore > 0 && // `aria-hidden` and carrying neither `data-gridkit-column` nor
+        // `data-gridkit-group`/`data-gridkit-row-index`, so `bodyCellFrom`/
+        // `groupRowFrom` never mistake it for a real row — it exists purely
+        // 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__ */ jsx7("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx7(
+          "td",
+          {
+            style: {
+              height: virtualRange.offsetBefore,
+              padding: 0,
+              border: "none"
+            }
+          }
+        ) }),
+        visibleRows.map((entry) => {
+          if (!("kind" in entry)) {
+            const rowProps = rowPropsOf(entry.rowId);
+            return /* @__PURE__ */ jsx7(
+              GridRow_default,
+              {
+                ref: virtualRange?.measureRow(entry.rowIndex),
+                columns,
+                rowId: entry.rowId,
+                row: entry.row,
+                rowIndex: entry.rowIndex,
+                datasetIndex: entry.datasetIndex,
+                activeColumnId,
+                selectedColumnIds: selection.selectedColumnIds,
+                selected: selection.selectedRowIds.has(entry.rowId),
+                selectedColumnId: selectedCell?.rowId === entry.rowId ? selectedCell.columnId : null,
+                focusedColumnIndex: nav.focus.rowIndex === entry.rowIndex ? nav.focus.columnIndex : null,
+                rowsSelectable: rowMode !== false,
+                cellsSelectable: cellMode !== false,
+                contextMenu: cellMenu,
+                locale,
+                cellMessages,
+                rowClassName: rowProps.className,
+                rowAttributes: rowProps.attributes
+              },
+              entry.rowId
+            );
+          }
+          if (entry.kind === "group-summary") {
+            return /* @__PURE__ */ jsx7(
+              GridGroupSummaryRow_default,
+              {
+                ref: virtualRange?.measureRow(entry.rowIndex),
+                groupId: entry.groupId,
+                level: entry.level,
+                rowIndex: entry.rowIndex,
+                datasetIndex: entry.datasetIndex,
+                results: entry.aggregates,
+                aggregates,
+                columns,
+                locale
+              },
+              `${entry.groupId}-summary`
+            );
+          }
+          return /* @__PURE__ */ jsx7(
+            GridGroupRow_default,
+            {
+              ref: virtualRange?.measureRow(entry.rowIndex),
+              columnCount: columns.length,
+              groupId: entry.groupId,
+              level: entry.level,
+              groupColumn: definitions.get(entry.columnId) ?? { field: entry.columnId },
+              value: entry.value,
+              expanded: entry.expanded,
+              count: entry.count,
+              rowIndex: entry.rowIndex,
+              datasetIndex: entry.datasetIndex,
+              posinset: ariaMeta.get(entry.groupId)?.posinset ?? 1,
+              setsize: ariaMeta.get(entry.groupId)?.setsize ?? 1,
+              aggregates: groupAggregateDisplay === "inline" ? aggregates : [],
+              results: entry.aggregates,
+              definitions,
+              locale,
+              cellMessages,
+              focused: nav.focus.rowIndex === entry.rowIndex,
+              contextMenu: groupMenu
+            },
+            entry.groupId
+          );
+        }),
+        virtualRange !== null && virtualRange.offsetAfter > 0 && /* @__PURE__ */ jsx7("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx7(
+          "td",
+          {
+            style: {
+              height: virtualRange.offsetAfter,
+              padding: 0,
+              border: "none"
+            }
+          }
+        ) }),
+        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__ */ jsx7(
+                "td",
+                {
+                  colSpan: columns.length,
+                  style: { padding: 0, border: "none" }
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/DataGrid/components/GridFooter.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function GridFooter({
+  columns,
+  aggregates,
+  results,
+  rows,
+  locale,
+  ariaRowIndex
+}) {
+  return /* @__PURE__ */ jsx8("tfoot", { role: "rowgroup", children: /* @__PURE__ */ jsx8("tr", { className: "grid-footer", role: "row", "aria-rowindex": ariaRowIndex, children: columns.map((entry) => {
+    const specs = aggregates.filter(
+      (candidate) => candidate.columnId === entry.id
+    );
+    return /* @__PURE__ */ jsx8(
+      "td",
+      {
+        role: "gridcell",
+        "data-gridkit-column": entry.id,
+        className: "grid-footer-cell",
+        style: { textAlign: specs[0]?.alignment ?? entry.alignment },
+        children: specs.map(
+          (spec) => renderAggregate(
+            results.get(spec.id ?? spec.columnId),
+            spec,
+            entry.column,
+            rows,
+            locale
+          )
+        ).flatMap(
+          (rendered, index) => index === 0 ? [rendered] : [", ", rendered]
+        )
+      },
+      entry.id
+    );
+  }) }) });
+}
+
+// src/DataGrid/components/GridPager.tsx
+import { paginationWindow } from "@gridkitjs/core";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function PagerNavButton({
+  className,
+  label,
+  disabled,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx9(
+    "button",
+    {
+      type: "button",
+      className: `grid-pager-button grid-pager-nav ${className}`,
+      "aria-label": label,
+      title: label,
+      ...ariaAttr(disabled, "aria-disabled", true),
+      onClick: () => {
+        if (!disabled) onClick();
+      },
+      children
+    }
+  );
+}
+function GridPager({ pager, config, messages }) {
+  const { pagination, pageCount, currentPage } = pager;
+  const variant = config?.variant ?? "compact";
+  const sizeOptions = config?.sizeOptions;
+  const atFirst = pagination.pageIndex <= 0;
+  const atLast = pagination.pageIndex >= pageCount - 1;
+  const barStyle = {
+    "--gridkit-pager-digits": String(String(Math.max(1, pageCount)).length)
+  };
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: "gridkit-grid-pager",
+      role: "group",
+      "aria-label": messages.pagerLabel,
+      children: [
+        /* @__PURE__ */ jsxs6("div", { className: "grid-pager-bar", style: barStyle, children: [
+          /* @__PURE__ */ jsx9(
+            PagerNavButton,
+            {
+              className: "grid-pager-first",
+              label: messages.firstPage,
+              disabled: atFirst,
+              onClick: () => {
+                pager.goToPage(0);
+              },
+              children: /* @__PURE__ */ jsx9(ChevronsLeftIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            PagerNavButton,
+            {
+              className: "grid-pager-previous",
+              label: messages.previousPage,
+              disabled: atFirst,
+              onClick: () => {
+                pager.previousPage();
+              },
+              children: /* @__PURE__ */ jsx9(ChevronLeftIcon, {})
+            }
+          ),
+          variant === "numbered" ? paginationWindow(currentPage, pageCount, {
+            boundaryCount: config?.boundaryCount,
+            siblingCount: config?.siblingCount
+          }).map(
+            (entry, index) => entry === "ellipsis" ? /* @__PURE__ */ jsx9(
+              "span",
+              {
+                className: "grid-pager-ellipsis",
+                "aria-hidden": "true",
+                children: "\u2026"
+              },
+              `ellipsis-${String(index)}`
+            ) : /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                className: "grid-pager-button grid-pager-page",
+                "aria-label": messages.pageButtonLabel(entry),
+                "aria-current": entry === currentPage ? "page" : void 0,
+                onClick: () => {
+                  pager.goToPage(entry - 1);
+                },
+                children: entry
+              },
+              entry
+            )
+          ) : /* @__PURE__ */ jsxs6("span", { className: "grid-pager-status-slot", children: [
+            /* @__PURE__ */ jsx9("span", { className: "grid-pager-status", children: messages.pageStatus(
+              pageCount === 0 ? 0 : currentPage,
+              pageCount
+            ) }),
+            /* @__PURE__ */ jsx9("span", { className: "grid-pager-status-sizer", "aria-hidden": "true", children: messages.pageStatus(pageCount, pageCount) })
+          ] }),
+          /* @__PURE__ */ jsx9(
+            PagerNavButton,
+            {
+              className: "grid-pager-next",
+              label: messages.nextPage,
+              disabled: atLast,
+              onClick: () => {
+                pager.nextPage();
+              },
+              children: /* @__PURE__ */ jsx9(ChevronRightIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            PagerNavButton,
+            {
+              className: "grid-pager-last",
+              label: messages.lastPage,
+              disabled: atLast,
+              onClick: () => {
+                pager.goToPage(pageCount - 1);
+              },
+              children: /* @__PURE__ */ jsx9(ChevronsRightIcon, {})
+            }
+          )
+        ] }),
+        sizeOptions !== void 0 && sizeOptions.length > 0 && /* @__PURE__ */ jsxs6("label", { className: "grid-pager-page-size", children: [
+          /* @__PURE__ */ jsx9(
+            "select",
+            {
+              value: pagination.pageSize,
+              onChange: (event) => {
+                pager.setPageSize(Number(event.target.value));
+              },
+              children: sizeOptions.map((size) => /* @__PURE__ */ jsx9("option", { value: size, children: size }, size))
+            }
+          ),
+          /* @__PURE__ */ jsx9("span", { className: "grid-pager-page-size-label", children: messages.pageSizeLabel })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/DataGrid/components/GroupByBar.tsx
+import { createPortal as createPortal2 } from "react-dom";
+import {
+  resolveColumnLabel as resolveColumnLabel2,
+  resolveKeyboardDropTarget
+} from "@gridkitjs/core";
+
+// src/DataGrid/useGroupByDrag.ts
+import {
+  resolveGroupByDropTarget
+} from "@gridkitjs/dom";
+
+// src/DataGrid/useDragReorder.ts
+import {
+  useRef,
+  useState as useState3
+} from "react";
+import {
+  NO_DRAG,
+  startDragReorder
+} from "@gridkitjs/dom";
+function useDragReorder({
+  resolveTarget,
+  onDrop
+}) {
+  const [drag, setDrag] = useState3(NO_DRAG);
+  const dragged = useRef(false);
+  function justDragged() {
+    const answer = dragged.current;
+    dragged.current = false;
+    return answer;
+  }
+  function startDrag(id, grabElement, event) {
+    startDragReorder(id, grabElement, event, {
+      resolveTarget,
+      onState(state) {
+        if (state.draggedId !== null) {
+          dragged.current = true;
+        }
+        setDrag(state);
+      },
+      onDrop
+    });
+  }
+  return {
+    draggedId: drag.draggedId,
+    dropTarget: drag.dropTarget,
+    ghostTransform: drag.ghostTransform,
+    startDrag,
+    justDragged
+  };
+}
+
+// src/DataGrid/useGroupByDrag.ts
+function useGroupByDrag({
+  groupBy,
+  onDrop
+}) {
+  const drag = useDragReorder({
+    resolveTarget: (clientX, clientY, movedId) => resolveGroupByDropTarget(clientX, clientY, movedId, groupBy),
+    onDrop: (target, movedId) => {
+      onDrop(movedId, target.beforeColumnId);
+    }
+  });
+  return {
+    draggedColumnId: drag.draggedId,
+    dropTarget: drag.dropTarget,
+    ghostTransform: drag.ghostTransform,
+    startDrag: (columnId, event) => {
+      drag.startDrag(columnId, event.currentTarget, event);
+    },
+    justDragged: drag.justDragged
+  };
+}
+
+// src/DataGrid/components/GroupByBar.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function GroupByBar({
+  columns,
+  definitions,
+  groupBy,
+  controller,
+  columnName,
+  headerDragEligible,
+  headerDragBlocked,
+  headerDropTarget,
+  messages
+}) {
+  const groupByIds = groupBy.map((entry) => entry.columnId);
+  const chipDrag = useGroupByDrag({
+    groupBy,
+    onDrop: (movedId, beforeColumnId) => {
+      controller.moveGroupBy(movedId, beforeColumnId);
+    }
+  });
+  const activeDropTarget = chipDrag.dropTarget ?? headerDropTarget;
+  const isDragTarget = chipDrag.draggedColumnId !== null || headerDragEligible;
+  const showPlaceholder = groupBy.length === 0 && columns.some((entry) => entry.groupByDraggable);
+  function labelFor(columnId) {
+    const definition = definitions.get(columnId);
+    return definition === void 0 ? columnId : resolveColumnLabel2(definition);
+  }
+  function moveByKeyboard(columnId, direction) {
+    const beforeColumnId = resolveKeyboardDropTarget(
+      groupByIds,
+      columnId,
+      direction
+    );
+    if (beforeColumnId === void 0) {
+      return;
+    }
+    controller.moveGroupBy(columnId, beforeColumnId);
+  }
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: classNames(
+        "gridkit-group-by-bar",
+        isDragTarget ? "is-drag-target" : "",
+        headerDragBlocked ? "is-drag-blocked" : ""
+      ),
+      "data-gridkit-group-by-bar": "",
+      role: "group",
+      "aria-label": messages.groupByBarLabel,
+      children: [
+        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__ */ jsxs7(
+            "span",
+            {
+              className: classNames(
+                "group-by-chip",
+                dragging ? "is-dragging" : "",
+                dropBefore ? "is-drop-before" : "",
+                dropAfter ? "is-drop-after" : ""
+              ),
+              "data-gridkit-group-chip": entry.columnId,
+              tabIndex: 0,
+              "aria-label": messages.groupByChipLabel(
+                columnName(entry.columnId),
+                index + 1,
+                groupBy.length
+              ),
+              "aria-keyshortcuts": "Control+ArrowLeft Control+ArrowRight",
+              onPointerDown: (event) => {
+                chipDrag.startDrag(entry.columnId, event);
+              },
+              onKeyDown: (event) => {
+                const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
+                if (horizontal && event.ctrlKey) {
+                  event.preventDefault();
+                  moveByKeyboard(
+                    entry.columnId,
+                    event.key === "ArrowLeft" ? -1 : 1
+                  );
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx10("span", { className: "group-by-chip-label", children: labelFor(entry.columnId) }),
+                /* @__PURE__ */ jsx10(
+                  "button",
+                  {
+                    type: "button",
+                    className: "group-by-chip-remove",
+                    "aria-label": messages.removeGroupBy(columnName(entry.columnId)),
+                    onPointerDown: (event) => {
+                      event.stopPropagation();
+                    },
+                    onClick: () => {
+                      controller.toggleGroupBy(entry.columnId);
+                    },
+                    children: "\xD7"
+                  }
+                )
+              ]
+            },
+            entry.columnId
+          );
+        }),
+        chipDrag.draggedColumnId !== null && chipDrag.ghostTransform !== null && createPortal2(
+          /* @__PURE__ */ jsx10(
+            "span",
+            {
+              className: "group-by-chip drag-ghost",
+              style: { transform: chipDrag.ghostTransform },
+              "aria-hidden": "true",
+              children: labelFor(chipDrag.draggedColumnId)
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+
+// src/DataGrid/announcedCallbacks.ts
+import {
+  isColumnVisible
+} from "@gridkitjs/core";
+function announcedCallbacks({
+  callbacks,
+  announce,
+  messages,
+  columnName,
+  columnOf
+}) {
+  return {
+    /**
+     * 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/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 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,
+  onCommand,
+  messages,
+  announce,
+  resize,
+  openPanel
+}) {
+  const commands = useMemo3(() => resolveCommands(appCommands), [appCommands]);
+  const saveFile = useSaveFile({ messages, announce });
+  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 (fitted > 1) {
+        announce(messages.columnsAutoFitted(fitted));
+      }
+    },
+    openPanel,
+    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 });
+  }
+  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 (!runCommand2(command, contextFor(target))) {
+        return false;
+      }
+      report(commandId, target, source);
+      return true;
+    }
+  };
+}
+
+// src/DataGrid/menu/GridMenu.tsx
+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 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) {
+    return "";
+  }
+  return scope.classList.contains("gridkit-dark") ? "gridkit-dark" : "gridkit-light";
+}
+function Overlay({
+  anchor,
+  placement,
+  gap,
+  offset,
+  initialFocus,
+  returnFocusTo,
+  ignoreScrollAfterInput,
+  trapFocus,
+  themeClassName,
+  onDismiss,
+  children
+}) {
+  const panelRef = useRef3(null);
+  const onDismissRef = useRef3(onDismiss);
+  useLayoutEffect2(() => {
+    onDismissRef.current = onDismiss;
+  });
+  useLayoutEffect2(() => {
+    const panel = panelRef.current;
+    if (panel === null) {
+      return void 0;
+    }
+    return attachOverlay(anchor, panel, {
+      placement,
+      gap,
+      offset,
+      initialFocus: attachedFocus(initialFocus),
+      returnFocusTo,
+      ignoreScrollAfterInput,
+      trapFocus,
+      onDismiss: (reason) => {
+        onDismissRef.current(reason);
+      }
+    });
+  }, [
+    anchor,
+    placement,
+    gap,
+    offset,
+    initialFocus,
+    returnFocusTo,
+    ignoreScrollAfterInput,
+    trapFocus
+  ]);
+  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" })
+  ] }),
+  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));
+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 ChevronLeftIcon2() {
+  return /* @__PURE__ */ jsx12(Icon, { children: /* @__PURE__ */ jsx12("path", { d: "m15 18-6-6 6-6" }) });
+}
+function ChevronRightIcon2() {
+  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 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(isItem2 && entry.disabled, "aria-disabled", true),
+      ...ariaAttr(checked !== void 0, "aria-checked", checked),
+      ...ariaAttr(shortcut !== void 0, "aria-keyshortcuts", shortcut),
+      ...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 }),
+        !isItem2 && /* @__PURE__ */ jsx13("span", { className: "menu-submenu-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx13(ChevronRightIcon2, {}) })
+      ]
+    }
+  );
+}
+function GridMenu({
+  entries,
+  label,
+  themeClassName,
+  onRun,
+  onClose,
+  onCloseSubmenu,
+  behaviourRef
+}) {
+  const menuRef = useRef4(null);
+  const submenuBehaviourRef = useRef4(null);
+  const [submenu, setSubmenu] = useState4(null);
+  const isSubmenu = onCloseSubmenu !== void 0;
+  const latest = useRef4({ 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 useRef5,
+  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 = useRef5(null);
+  const openings = useRef5(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 = useRef5(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 = useRef5(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/panels/GridPanels.tsx
+import { useRef as useRef13 } from "react";
+
+// src/DataGrid/columnChooser/ColumnChooser.tsx
+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({
+  controller,
+  messages
+}) {
+  const [search, setSearch] = useState6("");
+  const showAllRef = useRef6(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/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(ChevronRightIcon2, {}) })
+        ]
+      }
+    ),
+    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(ChevronLeftIcon2, {}) }),
+            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 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 { 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__ */ jsx22(
+        Panel,
+        {
+          target: panel.target,
+          controller,
+          commands,
+          messages,
+          close,
+          initialFocusRef: (element) => {
+            initialFocus.current = element;
+          },
+          applyFilter,
+          columnValues
+        }
+      )
+    },
+    panel.key
+  );
+}
+
+// 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 useLayoutEffect10, useRef as useRef14, useState as useState12 } 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] = 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) {
+      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 = useRef14(null);
+  useLayoutEffect10(() => {
+    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 useLayoutEffect13, useRef as useRef18 } from "react";
+import {
+  resolveToolbar,
+  splitToolbarItems,
+  toolbarEntries
+} from "@gridkitjs/core";
+import { attachToolbar } from "@gridkitjs/dom";
+
+// src/DataGrid/toolbar/ToolbarMenuButton.tsx
+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,
+  icon,
+  entries,
+  more = false,
+  onMenuClose
+}) {
+  const [menu, setMenu] = useState13(null);
+  const menuBehaviourRef = useRef15(null);
+  useLayoutEffect11(() => {
+    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__ */ jsxs17(Fragment8, { children: [
+    /* @__PURE__ */ jsxs17(
+      "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__ */ jsx23("span", { className: "toolbar-button-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx23(MenuIcon, { name: icon }) }),
+          label,
+          /* @__PURE__ */ jsx23("span", { className: "toolbar-button-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx23(ChevronDownIcon, {}) })
+        ]
+      }
+    ),
+    menu !== null && /* @__PURE__ */ jsx23(
+      Overlay,
+      {
+        anchor: menu.anchor,
+        placement: "bottom-start",
+        gap: ANCHOR_GAP,
+        returnFocusTo: menu.anchor,
+        themeClassName: menu.themeClassName,
+        onDismiss: close,
+        children: /* @__PURE__ */ jsx23(
+          GridMenu,
+          {
+            entries,
+            label,
+            themeClassName: menu.themeClassName,
+            behaviourRef: menuBehaviourRef,
+            onRun: (item) => {
+              item.run();
+              close();
+            },
+            onClose: close
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/DataGrid/toolbar/ToolbarSearch.tsx
+import { useEffect as useEffect5, useRef as useRef16, useState as useState14 } from "react";
+import {
+  searchTextOf,
+  setSearchText
+} from "@gridkitjs/core";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var SEARCH_DELAY_MS = 250;
+function ToolbarSearch({
+  itemKey,
+  controller,
+  messages,
+  announce
+}) {
+  const applied = searchTextOf(controller.getState().filter);
+  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);
+    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);
+    }
+  }
+  useEffect5(() => {
+    if (unannounced.current === applied) {
+      unannounced.current = null;
+      announce(messages.searchResults(controller.getView().rows.length));
+    }
+  });
+  useEffect5(
+    () => () => {
+      clearTimeout(timer.current);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsx24(
+    "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 useLayoutEffect12, useRef as useRef17, useState as useState15 } from "react";
+import { observeToolbarOverflow } from "@gridkitjs/dom";
+function useToolbarOverflow(toolbarRef, items) {
+  const [fit, setFit] = useState15(items.length);
+  const overflow = useRef17(null);
+  const measuredLayout = useRef17("");
+  const layout = JSON.stringify(
+    items.map((item) => [
+      item.type,
+      item.key,
+      "label" in item ? item.label : null
+    ])
+  );
+  useLayoutEffect12(() => {
+    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]);
+  useLayoutEffect12(
+    () => () => {
+      overflow.current?.detach();
+      overflow.current = null;
+      measuredLayout.current = "";
+    },
+    []
+  );
+  return fit;
+}
+
+// src/DataGrid/toolbar/GridToolbar.tsx
+import { jsx as jsx25, jsxs as jsxs18 } 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__ */ jsx25(Toolbar, { ...props, entries, label });
+}
+function Toolbar({
+  entries,
+  label,
+  renderItem,
+  gridId,
+  controller,
+  commands,
+  messages,
+  announce
+}) {
+  const toolbarRef = useRef18(null);
+  const menuClosed = useRef18(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);
+  useLayoutEffect13(() => {
+    const toolbar = toolbarRef.current;
+    return toolbar === null ? void 0 : attachToolbar(toolbar);
+  }, []);
+  useLayoutEffect13(() => {
+    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__ */ jsxs18(
+          "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__ */ jsx25("span", { className: "toolbar-button-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx25(MenuIcon, { name: item.icon }) }),
+              item.label
+            ]
+          },
+          item.key
+        );
+      case "menu":
+        return /* @__PURE__ */ jsx25(
+          ToolbarMenuButton,
+          {
+            itemKey: item.key,
+            label: item.label,
+            icon: item.icon,
+            entries: item.items,
+            onMenuClose
+          },
+          item.key
+        );
+      case "search":
+        return /* @__PURE__ */ jsx25(
+          ToolbarSearch,
+          {
+            itemKey: item.key,
+            controller,
+            messages,
+            announce
+          },
+          item.key
+        );
+      case "separator":
+        return /* @__PURE__ */ jsx25(
+          "div",
+          {
+            role: "separator",
+            "aria-orientation": "vertical",
+            className: "toolbar-separator",
+            "data-gridkit-toolbar-item": item.key
+          },
+          item.key
+        );
+      case "spacer":
+        return /* @__PURE__ */ jsx25(
+          "div",
+          {
+            className: "toolbar-spacer",
+            "data-gridkit-toolbar-item": item.key
+          },
+          item.key
+        );
+      case "custom":
+        return /* @__PURE__ */ jsx25(
+          "div",
+          {
+            className: "toolbar-custom",
+            "data-gridkit-toolbar-item": item.key,
+            children: renderItem?.(item.id)
+          },
+          item.key
+        );
+    }
+  }
+  return /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      ref: toolbarRef,
+      role: "toolbar",
+      "aria-label": label,
+      "aria-controls": gridId,
+      className: "gridkit-toolbar",
+      children: [
+        shown.map(draw),
+        overflow.length > 0 && /* @__PURE__ */ jsx25(
+          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 useState16
+} from "react";
+import {
+  beginColumnResize,
+  clampColumnWidth,
+  resolveColumnConstraints,
+  sizeColumnToContent
+} from "@gridkitjs/core";
+import { measureColumnContent, startColumnResizeGesture } from "@gridkitjs/dom";
+function useColumnResize({
+  tableRef,
+  controller,
+  columnSizeDefaults
+}) {
+  const [activeColumnId, setActiveColumnId] = useState16(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)
+      ),
+      "end"
+    );
+  }
+  return { activeColumnId, startResize, sizeToContent, nudge };
+}
+
+// src/DataGrid/useElementWidth.ts
+import { useLayoutEffect as useLayoutEffect14, useState as useState17 } from "react";
+import { observeElementWidth } from "@gridkitjs/dom";
+function useElementWidth(ref, enabled) {
+  const [width, setWidth] = useState17(null);
+  useLayoutEffect14(() => {
+    const element = ref.current;
+    if (element === null || !enabled) {
+      return void 0;
+    }
+    return observeElementWidth(element, setWidth);
+  }, [ref, enabled]);
+  return width;
+}
+
+// src/DataGrid/useGridController.ts
+import { useState as useState18, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import {
+  createGridController
+} from "@gridkitjs/core";
+function useGridController(options) {
+  const [controller] = useState18(
+    () => createGridController(options)
+  );
+  controller.setOptions(options);
+  const state = useSyncExternalStore2(
+    controller.subscribe,
+    controller.getState,
+    controller.getState
+  );
+  return { controller, state, view: controller.getView() };
+}
+
+// src/DataGrid/useInfiniteScroll.ts
+import { useEffect as useEffect6, useRef as useRef19 } from "react";
+import { attachInfiniteScroll } from "@gridkitjs/dom";
+function useInfiniteScroll({
+  rootRef,
+  sentinelRef,
+  config
+}) {
+  const scroll = useRef19(null);
+  useEffect6(() => {
+    const root = rootRef.current;
+    if (root === null) {
+      return void 0;
+    }
+    const attached = attachInfiniteScroll(root, {
+      sentinel: null,
+      hasMore: false
+    });
+    scroll.current = attached;
+    return () => {
+      attached.detach();
+      scroll.current = null;
+    };
+  }, [rootRef]);
+  useEffect6(() => {
+    scroll.current?.update({
+      sentinel: sentinelRef.current,
+      hasMore: config?.hasMore ?? false,
+      onLoadMore: config?.onLoadMore,
+      isLoadingMore: config?.isLoadingMore,
+      rootMargin: config?.rootMargin
+    });
+  });
+}
+
+// src/DataGrid/useLiveAnnouncer.ts
+import { useCallback, useLayoutEffect as useLayoutEffect15, useRef as useRef20 } from "react";
+import { createLiveAnnouncer } from "@gridkitjs/dom";
+function useLiveAnnouncer(containerRef) {
+  const announcer = useRef20(null);
+  useLayoutEffect15(() => {
+    const container = containerRef.current;
+    if (container === null) {
+      return void 0;
+    }
+    const created = createLiveAnnouncer(container);
+    announcer.current = created;
+    return () => {
+      created.destroy();
+      announcer.current = null;
+    };
+  }, [containerRef]);
+  return useCallback((text) => {
+    announcer.current?.announce(text);
+  }, []);
+}
+
+// src/DataGrid/useRowVirtualizer.ts
+import { useLayoutEffect as useLayoutEffect16, useState as useState19 } from "react";
+import { createRowVirtualizer as createRowVirtualizer2 } from "@gridkitjs/dom";
+var EMPTY_RANGE = {
+  startIndex: 0,
+  endIndex: -1,
+  offsetBefore: 0,
+  offsetAfter: 0
+};
+function ignoreRow() {
+  return () => void 0;
+}
+function useRowVirtualizer({
+  enabled,
+  rows,
+  bodyScrollRef,
+  estimatedRowHeight,
+  overscan
+}) {
+  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 = createRowVirtualizer2(element, {
+      estimatedRowHeight,
+      overscan,
+      onRange: setRange
+    });
+    setVirtualizer(created);
+    return () => {
+      created.destroy();
+    };
+  }, [enabled, bodyScrollRef, estimatedRowHeight, overscan]);
+  useLayoutEffect16(() => {
+    virtualizer?.setRowCount(rows.length);
+    virtualizer?.resetHeights();
+  }, [virtualizer, rows]);
+  return {
+    startIndex: range.startIndex,
+    endIndex: range.endIndex,
+    offsetBefore: range.offsetBefore,
+    offsetAfter: range.offsetAfter,
+    measureRow: virtualizer?.measureRow ?? ignoreRow,
+    scrollToIndex: (index, options) => {
+      virtualizer?.scrollToIndex(index, options);
+    }
+  };
+}
+
+// src/DataGrid/DataGrid.tsx
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+var NO_AGGREGATES = [];
+function paginationReader(controller) {
+  let last;
+  return () => {
+    const { pageIndex } = controller.getView();
+    const { pageSize } = controller.getState().pagination;
+    if (last?.pageIndex !== pageIndex || last.pageSize !== pageSize) {
+      last = { pageIndex, pageSize };
+    }
+    return last;
+  };
+}
+function selectedRowsReader(controller) {
+  let last;
+  return () => {
+    const { rows } = controller.getView();
+    const selection = controller.getState().rowSelection;
+    if (last?.rows !== rows || last.selection !== selection) {
+      const rowsById = new Map(rows.map((entry) => [entry.rowId, entry]));
+      last = { rows, selection, selected: resolveRows(rowsById, selection) };
+    }
+    return last.selected;
+  };
+}
+function DataGrid(props) {
+  const {
+    borders,
+    hoverable,
+    selectable,
+    resizeMode = "fit",
+    columnSizeDefaults,
+    sortableColumns = false,
+    groupableColumns = false,
+    groupToggleIconColumns = true,
+    groupByBarVisibility = "auto",
+    paginated = false,
+    pager,
+    infiniteScroll,
+    aggregates = NO_AGGREGATES,
+    groupAggregateDisplay = "inline",
+    height,
+    virtualized = false,
+    overscan = 4,
+    estimatedRowHeight = 40,
+    label,
+    labelledBy,
+    locale,
+    getRowProps,
+    onRowClick,
+    onRowDoubleClick,
+    messages: messageOverrides,
+    ref
+  } = props;
+  const hoverRows = hoverable?.rows ?? true;
+  const hoverColumns = hoverable?.columns ?? true;
+  const hoverCells = hoverable?.cells ?? true;
+  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 = useRef21(/* @__PURE__ */ new Set());
+  const gridId = useId2();
+  const announce = useLiveAnnouncer(viewportRef);
+  const messages = useMemo5(
+    () => resolveMessages(messageOverrides, locale),
+    [messageOverrides, locale]
+  );
+  const { controller, state, view } = useGridController({
+    ...props,
+    viewportWidth,
+    ...announcedCallbacks({
+      callbacks: props,
+      announce,
+      messages,
+      columnName,
+      columnOf
+    })
+  });
+  const [readPagination] = useState20(() => paginationReader(controller));
+  const [readSelectedRows] = useState20(() => selectedRowsReader(controller));
+  const virtualizer = useRowVirtualizer({
+    enabled: virtualized,
+    rows: view.pageRows,
+    bodyScrollRef,
+    estimatedRowHeight,
+    overscan
+  });
+  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."
+      );
+    }
+  }, [virtualized, height]);
+  const hasInfiniteScroll = infiniteScroll !== void 0;
+  useEffect7(() => {
+    if (paginated && hasInfiniteScroll) {
+      console.error(
+        "DataGrid: `paginated` and `infiniteScroll` are mutually exclusive \u2014 only `paginated` takes effect while both are set."
+      );
+    }
+  }, [paginated, hasInfiniteScroll]);
+  useInfiniteScroll({
+    rootRef: bodyScrollRef,
+    sentinelRef,
+    config: infiniteScroll
+  });
+  function columnOf(columnId) {
+    return view.dataColumns.find((candidate) => candidate.id === columnId)?.column;
+  }
+  function columnName(columnId) {
+    const column = columnOf(columnId);
+    return column === void 0 ? columnId : resolveColumnHeaderText2(column);
+  }
+  const resize = useColumnResize({
+    // `@gridkitjs/dom`'s `measureColumnContent` only ever matches
+    // `td[data-gridkit-column]` (never `th`), so the header table has nothing
+    // for it to find — the body table alone was already the effective scope
+    // before this split.
+    tableRef: bodyTableRef,
+    controller,
+    columnSizeDefaults
+  });
+  const nav = useGridNavigation({
+    headerTableRef,
+    bodyTableRef,
+    // `null` when virtualization is off, in which case behavior is
+    // byte-for-byte unchanged from before this feature existed.
+    virtualRange: virtualized ? virtualizer : null,
+    // Group headers are addressable rows too — the whole point of the flat
+    // `DisplayRow[]` shape is that they share one position space with data
+    // rows, so navigation counts them the same way. Page-relative
+    // (`view.pageRows`, not `view.displayRows`): arrow keys operate on what's
+    // actually in the DOM, which is the current page — a different "page"
+    // concept than `useGridNavigation`'s own Page Up/Down viewport scrolling.
+    rowCount: view.pageRows.length,
+    columnCount: view.columns.length,
+    // A group's own summary row (`groupAggregateDisplay: "row"`) occupies a
+    // real slot in `rowCount` above — its DOM position has to line up with
+    // everything else — but is presentational, never a tab stop: arrow-key
+    // vertical movement steps over it rather than landing there.
+    isSkippableRow: (rowIndex) => {
+      const entry = view.pageRows[rowIndex];
+      return entry !== void 0 && "kind" in entry && entry.kind === "group-summary";
+    }
+  });
+  const panels = useGridPanels({ rootRef: viewportRef, headerTableRef, nav });
+  const commands = useGridCommands({
+    controller,
+    commands: props.commands,
+    onCommand: props.onCommand,
+    messages,
+    announce,
+    resize,
+    openPanel: panels.open
+  });
+  const handleCopyKey = useGridCopy({ controller, commands, nav });
+  const orderedIds = useMemo5(
+    () => view.dataColumns.map((entry) => entry.id),
+    [view.dataColumns]
+  );
+  const displayedIds = useMemo5(
+    () => view.columns.map((entry) => entry.id),
+    [view.columns]
+  );
+  const definitions = useMemo5(
+    () => new Map(view.dataColumns.map((entry) => [entry.id, entry.column])),
+    [view.dataColumns]
+  );
+  const groupByDraggableIds = useMemo5(
+    () => new Set(
+      view.columns.filter((entry) => entry.groupByDraggable).map((entry) => entry.id)
+    ),
+    [view.columns]
+  );
+  function handleDrop(target, movedId) {
+    if (target.kind === "group-by") {
+      controller.moveGroupBy(movedId, target.beforeColumnId);
+      return;
+    }
+    const next = moveColumnBefore(orderedIds, movedId, target.beforeId);
+    if (next === orderedIds) {
+      return;
+    }
+    controller.moveColumn(movedId, target.beforeId);
+    const shown = next.filter((id) => displayedIds.includes(id));
+    const position = shown.indexOf(movedId);
+    announce(
+      messages.columnMoved(columnName(movedId), position + 1, shown.length)
+    );
+    nav.focusCell(HEADER_ROW, position);
+  }
+  const drag = useColumnDrag({
+    order: displayedIds,
+    groupBy: state.groupBy,
+    groupByDraggableIds,
+    onDrop: handleDrop
+  });
+  const draggedColumnAlreadyGrouped = drag.draggedColumnId !== null && state.groupBy.some((entry) => entry.columnId === drag.draggedColumnId);
+  const dragEligibleForGroupBy = drag.draggedColumnId !== null && groupByDraggableIds.has(drag.draggedColumnId) && !draggedColumnAlreadyGrouped;
+  const showGroupByBar = groupByBarVisibility === "always" || groupByBarVisibility === "auto" && (state.groupBy.length > 0 || dragEligibleForGroupBy);
+  const headerGroupByDropTarget = drag.dropTarget?.kind === "group-by" ? drag.dropTarget : null;
+  const pagerContext = {
+    pagination: state.pagination,
+    currentPage: Math.min(state.pagination.pageIndex + 1, view.pageCount),
+    pageCount: view.pageCount,
+    pageSizeOptions: pager?.sizeOptions,
+    goToPage: controller.goToPage,
+    nextPage: controller.nextPage,
+    previousPage: controller.previousPage,
+    setPageSize: controller.setPageSize
+  };
+  const selection = useGridSelection({ controller, state, selectable });
+  const multiselectable = selection.rowMode === "multiple" || selection.columnMode === "multiple";
+  const contextMenu = useContextMenu({
+    rootRef: viewportRef,
+    headerTableRef,
+    bodyTableRef,
+    bodyScrollRef,
+    contextMenu: props.contextMenu,
+    onContextMenuOpenChange: props.onContextMenuOpenChange,
+    controller,
+    commands,
+    nav,
+    selection,
+    messages,
+    columnName
+  });
+  useEffect7(() => {
+    for (const listener of subscribersRef.current) {
+      listener();
+    }
+  }, [view, state, nav.focus]);
+  useImperativeHandle3(ref, () => ({
+    get element() {
+      return viewportRef.current;
+    },
+    get table() {
+      return bodyTableRef.current;
+    },
+    getRows: () => controller.getView().rows,
+    // Every group header's own `aggregates` field is populated here — the
+    // whole reason `getDisplayRows()` is where a consumer reads a specific
+    // group's computed results from.
+    getDisplayRows: () => controller.getView().displayRows,
+    getPageRows: () => controller.getView().pageRows,
+    getColumns: () => controller.getView().columns,
+    getDataColumns: () => controller.getView().dataColumns,
+    getColumnSizing: () => controller.getState().columnSizing,
+    getColumnOrder: () => controller.getState().columnOrder,
+    getColumnVisibility: () => controller.getState().columnVisibility,
+    getColumnSort: () => controller.getState().columnSort,
+    getFilter: () => controller.getState().filter,
+    getGroupBy: () => controller.getState().groupBy,
+    getGroupExpansion: () => controller.getState().groupExpansion,
+    getPagination: readPagination,
+    getPageCount: () => controller.getView().pageCount,
+    getAggregates: () => controller.getView().grandTotal,
+    getRowSelection: () => controller.getState().rowSelection,
+    getSelectedRows: readSelectedRows,
+    getColumnSelection: () => controller.getState().columnSelection,
+    getCellSelection: () => controller.getState().cellSelection,
+    getFocusedCell: () => nav.focus,
+    getState: controller.getState,
+    restoreState: controller.restoreState,
+    focusCell: nav.focusCell,
+    clearSelection: controller.clearSelection,
+    selectAllRows: controller.selectAllRows,
+    selectRows: controller.selectRows,
+    expandAllGroups: controller.expandAllGroups,
+    collapseAllGroups: controller.collapseAllGroups,
+    goToPage: controller.goToPage,
+    nextPage: controller.nextPage,
+    previousPage: controller.previousPage,
+    setPageSize: controller.setPageSize,
+    showColumns: controller.showColumns,
+    hideColumns: controller.hideColumns,
+    setFilter: controller.setFilter,
+    setColumnSort: controller.setColumnSort,
+    setGroupBy: controller.setGroupBy,
+    setGroupExpansion: controller.setGroupExpansion,
+    setPagination: controller.setPagination,
+    setColumnSizing: controller.setColumnSizing,
+    setColumnOrder: controller.setColumnOrder,
+    setColumnVisibility: controller.setColumnVisibility,
+    setRowSelection: controller.setRowSelection,
+    setColumnSelection: controller.setColumnSelection,
+    setCellSelection: controller.setCellSelection,
+    autoFitColumn: (columnId) => {
+      commands.host.autoFitColumns([columnId]);
+    },
+    autoFitColumns: (columnIds) => {
+      commands.host.autoFitColumns(
+        columnIds ?? controller.getView().columns.map((entry) => entry.id)
+      );
+    },
+    openContextMenu: contextMenu.open,
+    closeContextMenu: contextMenu.close,
+    ...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(
+        (entry) => !("kind" in entry) && entry.rowId === rowId
+      );
+      if (index === -1) return;
+      if (virtualized) {
+        virtualizer.scrollToIndex(index, options);
+        return;
+      }
+      bodyTableRef.current?.tBodies[0]?.rows[index]?.scrollIntoView(options);
+    },
+    scrollToColumn: (columnId, options) => {
+      const cells = viewportRef.current?.querySelectorAll(
+        "[data-gridkit-column]"
+      );
+      const cell = cells ? Array.from(cells).find(
+        (entry) => entry.getAttribute("data-gridkit-column") === columnId
+      ) : void 0;
+      cell?.scrollIntoView(options);
+    },
+    subscribe: (listener) => {
+      subscribersRef.current.add(listener);
+      return () => {
+        subscribersRef.current.delete(listener);
+      };
+    }
+  }));
+  const gridTableClassName = classNames(
+    "gridkit-data-grid",
+    borders ? `borders-${borders}` : "",
+    // Hover is on by default and selection off, so one set of classes
+    // turns styling off and the other turns it on. The polarity differs
+    // because the defaults do.
+    hoverRows ? "" : "no-hover-rows",
+    hoverColumns ? "" : "no-hover-columns",
+    hoverCells ? "" : "no-hover-cells",
+    selection.rowMode === false ? "" : "selectable-rows",
+    selection.columnMode === false ? "" : "selectable-columns",
+    selection.cellMode === false ? "" : "selectable-cells"
+  );
+  const hasFooter = aggregates.length > 0;
+  return /* @__PURE__ */ jsxs19("div", { className: "gridkit-data-grid-viewport", ref: viewportRef, children: [
+    /* @__PURE__ */ jsx26(
+      GridToolbar,
+      {
+        toolbar: props.toolbar,
+        renderItem: props.renderToolbarItem,
+        gridId,
+        controller,
+        commands,
+        messages,
+        announce
+      }
+    ),
+    showGroupByBar && /* @__PURE__ */ jsx26(
+      GroupByBar,
+      {
+        columns: view.columns,
+        definitions,
+        groupBy: state.groupBy,
+        controller,
+        columnName,
+        headerDragEligible: dragEligibleForGroupBy,
+        headerDragBlocked: draggedColumnAlreadyGrouped,
+        headerDropTarget: headerGroupByDropTarget,
+        messages
+      }
+    ),
+    /* @__PURE__ */ jsxs19(
+      "div",
+      {
+        id: gridId,
+        className: "gridkit-data-grid-tables",
+        role: state.groupBy.length > 0 ? "treegrid" : "grid",
+        "aria-rowcount": view.displayRows.length + (hasFooter ? 2 : 1),
+        "aria-colcount": view.columns.length,
+        ...ariaAttr(multiselectable, "aria-multiselectable", true),
+        ...ariaAttr(labelledBy !== void 0, "aria-labelledby", labelledBy),
+        ...ariaAttr(
+          labelledBy === void 0 && label !== void 0,
+          "aria-label",
+          label
+        ),
+        onKeyDown: (event) => {
+          if (!isOwnEvent(event)) return;
+          handleCopyKey(event);
+          if (event.key === "Escape") {
+            if (drag.draggedColumnId !== null || resize.activeColumnId !== null)
+              return;
+            selection.clear();
+            return;
+          }
+          if ((event.ctrlKey || event.metaKey) && (event.key === "a" || event.key === "A")) {
+            if (selection.rowMode !== "multiple") return;
+            event.preventDefault();
+            selection.selectAllRows();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs19(
+            "table",
+            {
+              ref: headerTableRef,
+              role: "presentation",
+              style: { width: totalColumnWidth(view.columns) },
+              className: classNames(gridTableClassName, "gridkit-data-grid-header"),
+              children: [
+                /* @__PURE__ */ jsx26(GridColgroup, { columns: view.columns }),
+                /* @__PURE__ */ jsx26(
+                  GridHeader,
+                  {
+                    columns: view.columns,
+                    resize,
+                    drag,
+                    controller,
+                    state,
+                    sortableColumns,
+                    groupableColumns,
+                    groupToggleIconColumns,
+                    headerMenu: contextMenu.opens("header"),
+                    panels,
+                    messages,
+                    nav,
+                    selection
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx26(
+            "div",
+            {
+              className: "gridkit-data-grid-body",
+              ref: bodyScrollRef,
+              style: height === void 0 ? void 0 : {
+                "--gridkit-body-height": typeof height === "number" ? `${String(height)}px` : height
+              },
+              children: /* @__PURE__ */ jsxs19(
+                "table",
+                {
+                  ref: bodyTableRef,
+                  role: "presentation",
+                  style: { width: totalColumnWidth(view.columns) },
+                  className: gridTableClassName,
+                  children: [
+                    /* @__PURE__ */ jsx26(GridColgroup, { columns: view.columns }),
+                    /* @__PURE__ */ jsx26(
+                      GridBody,
+                      {
+                        columns: view.columns,
+                        definitions,
+                        rows: view.pageRows,
+                        activeColumnId: resize.activeColumnId,
+                        nav,
+                        selection,
+                        controller,
+                        aggregates,
+                        groupAggregateDisplay,
+                        virtualRange: virtualized ? virtualizer : null,
+                        infiniteScroll,
+                        sentinelRef,
+                        locale,
+                        getRowProps,
+                        onRowClick,
+                        onRowDoubleClick,
+                        messages,
+                        cellMenu: contextMenu.opens("cell"),
+                        groupMenu: contextMenu.opens("group")
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          hasFooter && /* @__PURE__ */ jsxs19(
+            "table",
+            {
+              role: "presentation",
+              style: { width: totalColumnWidth(view.columns) },
+              className: classNames(
+                gridTableClassName,
+                "gridkit-data-grid-footer"
+              ),
+              children: [
+                /* @__PURE__ */ jsx26(GridColgroup, { columns: view.columns }),
+                /* @__PURE__ */ jsx26(
+                  GridFooter,
+                  {
+                    columns: view.columns,
+                    aggregates,
+                    results: view.grandTotal,
+                    rows: view.rows.map((entry) => entry.row),
+                    locale,
+                    ariaRowIndex: view.displayRows.length + 2
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__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 }))
+  ] });
+}
+
+// src/index.ts
+import { serializeGridState } from "@gridkitjs/core";
+
+// src/DataGrid/hooks/usePaginationState.ts
+import { useCallback as useCallback3 } from "react";
+
+// src/DataGrid/hooks/useGridSnapshot.ts
+import { useCallback as useCallback2, useSyncExternalStore as useSyncExternalStore3 } from "react";
+function useGridSnapshot(gridRef, getSnapshot, fallback) {
+  const subscribe = useCallback2(
+    (listener) => {
+      const api = gridRef.current;
+      if (api === null) {
+        return () => {
+        };
+      }
+      return api.subscribe(listener);
+    },
+    [gridRef]
+  );
+  return useSyncExternalStore3(
+    subscribe,
+    () => {
+      const api = gridRef.current;
+      return api === null ? fallback : getSnapshot(api);
+    },
+    () => fallback
+  );
+}
+
+// src/DataGrid/hooks/usePaginationState.ts
+var FALLBACK_PAGINATION = { pageIndex: 0, pageSize: 0 };
+function usePaginationState(gridRef) {
+  const pagination = useGridSnapshot(
+    gridRef,
+    useCallback3((api) => api.getPagination(), []),
+    FALLBACK_PAGINATION
+  );
+  const pageCount = useGridSnapshot(
+    gridRef,
+    useCallback3((api) => api.getPageCount(), []),
+    0
+  );
+  return {
+    pagination,
+    pageCount,
+    goToPage: (pageIndex) => {
+      gridRef.current?.goToPage(pageIndex);
+    },
+    nextPage: () => {
+      gridRef.current?.nextPage();
+    },
+    previousPage: () => {
+      gridRef.current?.previousPage();
+    },
+    setPageSize: (pageSize) => {
+      gridRef.current?.setPageSize(pageSize);
+    }
+  };
+}
+
+// src/DataGrid/hooks/useGroupByState.ts
+import { useCallback as useCallback4 } from "react";
+var FALLBACK_GROUP_BY = [];
+var FALLBACK_EXPANSION = [];
+function useGroupByState(gridRef) {
+  const groupBy = useGridSnapshot(
+    gridRef,
+    useCallback4((api) => api.getGroupBy(), []),
+    FALLBACK_GROUP_BY
+  );
+  const groupExpansion = useGridSnapshot(
+    gridRef,
+    useCallback4((api) => api.getGroupExpansion(), []),
+    FALLBACK_EXPANSION
+  );
+  return {
+    groupBy,
+    groupExpansion,
+    expandAllGroups: () => {
+      gridRef.current?.expandAllGroups();
+    },
+    collapseAllGroups: () => {
+      gridRef.current?.collapseAllGroups();
+    }
+  };
+}
+
+// src/DataGrid/hooks/useColumnSortState.ts
+import { useCallback as useCallback5 } from "react";
+var FALLBACK_SORT = [];
+function useColumnSortState(gridRef) {
+  return useGridSnapshot(
+    gridRef,
+    useCallback5((api) => api.getColumnSort(), []),
+    FALLBACK_SORT
+  );
+}
+
+// src/DataGrid/hooks/useSelectionState.ts
+import { useCallback as useCallback6 } from "react";
+var FALLBACK_SELECTION = [];
+var FALLBACK_CELL_SELECTION = null;
+function useSelectionState(gridRef) {
+  const rowSelection = useGridSnapshot(
+    gridRef,
+    useCallback6((api) => api.getRowSelection(), []),
+    FALLBACK_SELECTION
+  );
+  const columnSelection = useGridSnapshot(
+    gridRef,
+    useCallback6((api) => api.getColumnSelection(), []),
+    FALLBACK_SELECTION
+  );
+  const cellSelection = useGridSnapshot(
+    gridRef,
+    useCallback6((api) => api.getCellSelection(), []),
+    FALLBACK_CELL_SELECTION
+  );
+  return {
+    rowSelection,
+    columnSelection,
+    cellSelection,
+    clearSelection: () => {
+      gridRef.current?.clearSelection();
+    },
+    selectAllRows: () => {
+      gridRef.current?.selectAllRows();
+    }
+  };
+}
+
+// src/DataGrid/hooks/useAggregateState.ts
+import { useCallback as useCallback7 } from "react";
+var FALLBACK_AGGREGATES = /* @__PURE__ */ new Map();
+function useAggregateState(gridRef) {
+  return useGridSnapshot(
+    gridRef,
+    useCallback7((api) => api.getAggregates(), []),
+    FALLBACK_AGGREGATES
+  );
+}
+
+// src/DataGrid/hooks/useColumnSizingState.ts
+import { useCallback as useCallback8 } from "react";
+var FALLBACK_SIZING = {};
+function useColumnSizingState(gridRef) {
+  return useGridSnapshot(
+    gridRef,
+    useCallback8((api) => api.getColumnSizing(), []),
+    FALLBACK_SIZING
+  );
+}
+
+// src/DataGrid/hooks/useColumnOrderState.ts
+import { useCallback as useCallback9 } from "react";
+var FALLBACK_ORDER = [];
+function useColumnOrderState(gridRef) {
+  return useGridSnapshot(
+    gridRef,
+    useCallback9((api) => api.getColumnOrder(), []),
+    FALLBACK_ORDER
+  );
+}
+
+// src/DataGrid/hooks/useColumnVisibilityState.ts
+import { useCallback as useCallback10 } from "react";
+var FALLBACK_VISIBILITY = {};
+function useColumnVisibilityState(gridRef) {
+  return useGridSnapshot(
+    gridRef,
+    useCallback10((api) => api.getColumnVisibility(), []),
+    FALLBACK_VISIBILITY
+  );
+}
+
+// src/DataGrid/hooks/useFilterState.ts
+import { useCallback as useCallback11, useState as useState21 } from "react";
+function useFilterState(gridRef) {
+  const [fallback] = useState21(() => []);
+  const filter = useGridSnapshot(
+    gridRef,
+    useCallback11((api) => api.getFilter(), []),
+    fallback
+  );
+  return {
+    filter,
+    setFilter: (next) => {
+      gridRef.current?.setFilter(next);
+    }
+  };
+}
+
+// src/index.ts
+import { excelFilter } from "@gridkitjs/core";
+export {
+  DataGrid,
+  excelFilter,
+  serializeGridState,
+  useAggregateState,
+  useColumnOrderState,
+  useColumnSizingState,
+  useColumnSortState,
+  useColumnVisibilityState,
+  useFilterState,
+  useGroupByState,
+  usePaginationState,
+  useSelectionState
+};
+//# sourceMappingURL=index.js.map