@progress/kendo-react-grid 7.2.4-develop.3 → 7.2.4-develop.4

package/Grid.mjs

@@ -0,0 +1,1108 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as r from "react";
+import s from "prop-types";
+import { dispatchEvent as Le, canUseDOM as U, getActiveElement as Me, memoizeOne as S, validatePackage as Ae, shouldShowValidationUI as Ge, setScrollbarWidth as oe, getter as Ke, classNames as F, kendoThemeMaps as A, WatermarkOverlay as Oe } from "@progress/kendo-react-common";
+import { tableKeyboardNavigation as E, getSelectionOptions as re, mapColumns as Pe, tableKeyboardNavigationTools as x, ClipboardService as Ue, TableKeyboardNavigationContext as V, isRtl as Ve, tableColumnsVirtualization as We, Pager as Be, tableKeyboardNavigationScopeAttributes as ae, TableSelection as le, tableKeyboardNavigationBodyAttributes as ne, DropClue as he, DragClue as pe, updateLeft as $e, updateRight as je } from "@progress/kendo-react-data-tools";
+import { GridSelectionCell as qe } from "./cells/GridSelectionCell.mjs";
+import { GridHierarchyCell as Je } from "./cells/GridHierarchyCell.mjs";
+import { GridEditCell as Qe } from "./cells/GridEditCell.mjs";
+import { Header as Xe } from "./header/Header.mjs";
+import { HeaderRow as Ye } from "./header/HeaderRow.mjs";
+import { FilterRow as Ze } from "./header/FilterRow.mjs";
+import { GroupPanel as et } from "./header/GroupPanel.mjs";
+import { Footer as tt } from "./footer/Footer.mjs";
+import { VirtualScroll as st } from "./VirtualScroll.mjs";
+import { VirtualScrollFixed as de, RowHeightService as ce } from "./VirtualScrollFixed.mjs";
+import { ColumnResize as it } from "./drag/ColumnResize.mjs";
+import { CommonDragLogic as ot } from "./drag/CommonDragLogic.mjs";
+import { firefox as ue, firefoxMaxHeight as ge, flatData as rt, readColumns as at, sanitizeColumns as lt, getColumnWidth as W, autoGenerateColumns as nt, getNestedValue as me, resolveCells as ht } from "./utils/index.mjs";
+import { GridCell as pt } from "./cells/GridCell.mjs";
+import { GridGroupCell as fe } from "./cells/GridGroupCell.mjs";
+import { GridRow as dt } from "./rows/GridRow.mjs";
+import { GridHeaderSelectionCell as ct } from "./header/GridHeaderSelectionCell.mjs";
+import { GridNoRecords as ut } from "./GridNoRecords.mjs";
+import { operators as ve } from "./filterCommon.mjs";
+import { FooterRow as gt } from "./footer/FooterRow.mjs";
+import { normalize as mt } from "./paging/GridPagerSettings.mjs";
+import { pagerMessagesMap as ft } from "./messages/index.mjs";
+import { packageMetadata as be } from "./package-metadata.mjs";
+import { GridDetailCell as vt } from "./cells/GridDetailCell.mjs";
+import { GridDetailHierarchyCell as bt } from "./cells/GridDetailHierarchyCell.mjs";
+const _ = class _ extends r.Component {
+  constructor(a) {
+    super(a), this._columns = [], this._columnsMap = [[]], this._columnsMutations = 0, this._resized = !1, this._shouldUpdateLeftRight = !0, this.contextStateRef = { current: void 0 }, this.navigationStateRef = { current: void 0 }, this._data = [], this._slicedData = void 0, this.wrapperScrollTop = 0, this.showLicenseWatermark = !1, this.headerRef = r.createRef(), this.headerElementRef = r.createRef(), this._element = null, this.tableElement = null, this.containerRef = r.createRef(), this.tableBodyRef = r.createRef(), this._footer = null, this.forceUpdateTimeout = void 0, this.isRtl = !1, this.observer = null, this.handleIntersection = (e) => {
+      const t = { rowIndex: this.rowIndex };
+      e.forEach((i) => {
+        i.isIntersecting || this.setCurrentOnTop(t);
+      });
+    }, this.setCurrentOnTop = (e) => {
+      if (!this.vs.container || this.props.scrollable === "none")
+        return;
+      this.observer && this.observer.disconnect();
+      const { rowIndex: t } = e;
+      if (this.props.scrollable === "virtual")
+        this.vs.askedSkip = t, this.vs.container.scroll(0, Math.round(this.vs.askedSkip / this.vs.total * this.vs.container.scrollHeight));
+      else if (this.element) {
+        const i = t < 1 ? this.element.querySelector("tbody > tr:nth-child(1)") : this.element.querySelector(`tbody > tr:nth-child(${t + 1})`);
+        i && this.containerRef.current && (this.containerRef.current.scrollTop = i.offsetTop);
+      }
+    }, this.scrollIntoView = (e) => {
+      if (!this.vs.container || this.props.scrollable === "none")
+        return;
+      this.rowIndex = e.rowIndex;
+      const { rowIndex: t } = e, i = this.element;
+      if (this.observer && i) {
+        this.observer.disconnect();
+        const l = i.querySelector(`[absolute-row-index="${t}"]`);
+        l ? this.observer.observe(l) : this.setCurrentOnTop(e);
+      }
+    }, this.fitColumns = (e) => {
+      this.columnResize.dblClickHandler(null, e);
+    }, this.onContextMenu = (e, t, i) => {
+      if (this.props.onContextMenu) {
+        const l = {
+          target: this,
+          syntheticEvent: e,
+          nativeEvent: e.nativeEvent,
+          dataItem: t,
+          field: i
+        };
+        this.props.onContextMenu.call(void 0, l);
+      }
+    }, this.getVirtualScroll = (e) => {
+      const { rowHeight: t, detailRowHeight: i, detail: l, expandField: h, groupable: n } = e, d = this.isAllData(), b = t !== void 0 && t > 0, R = i !== void 0 && i > 0, f = n === !0 || typeof n == "object" && n.enabled !== !1;
+      return !b || f && !d || !!(l && h) && (!R || !d) ? st : de;
+    }, this.isAllData = () => {
+      const { data: e, total: t } = this.props;
+      return Array.isArray(e) ? e.length === t : e ? t === e.total : !1;
+    }, this.initializeVirtualization = (e, t) => {
+      if (this.reInitVirtualization(
+        this.props.scrollable === "virtual",
+        this.props.total,
+        this.props.filter,
+        this.props.group,
+        this.props.sort,
+        t || this.props.rowHeight === void 0 || this.props.rowHeight === 0
+      ), this.vs.fixedScroll = this.props.fixedScroll || !1, this.vs.PageChange = this.pageChange, this.vs.realSkip = this.props.skip || 0, this.vs.pageSize = (this.props.take !== void 0 ? this.props.take : this.props.pageSize) || 0, this.vs.scrollableVirtual = this.props.scrollable === "virtual", this.vs.total = e, this.vs.propsSkip = (this.props.skip || 0) + (this.props.scrollable === "virtual" ? this.vs.topCacheCount + (this.vs.attendedSkip - (this.props.skip || 0)) : 0), this.props.rowHeight !== void 0 && this.props.rowHeight > 0 && !t) {
+        const i = this.props.rowHeight * e;
+        this.vs.containerHeight = ue ? Math.min(ge, i) : i;
+      } else
+        this.vs.containerHeight = 1533915;
+      if (this.vs.containerRef = this.containerRef, this.vs.tableBodyRef = this.tableBodyRef, this.vs.table = this.tableElement, this._slicedData = void 0, this.vs instanceof de) {
+        const { rowHeight: i = 0, detail: l, expandField: h } = this.props;
+        let { detailRowHeight: n = 0 } = this.props;
+        n = l && h ? n : i, this.isAllData() ? (this.vs.total = this._data.length, this._slicedData = this._data.slice(this.vs.realSkip, this.vs.realSkip + this.vs.pageSize), this.vs.rowHeightService = this.rowHeightService(this.vs, this._data.length, i, n, this._data)) : this.vs.rowHeightService = new ce(e, i, n);
+        const d = this.vs.rowHeightService.totalHeight();
+        this.vs.containerHeight = ue ? Math.min(ge, d) : d;
+      }
+    }, this.scrollHandler = (e) => {
+      if (e.target !== e.currentTarget)
+        return;
+      clearTimeout(this.forceUpdateTimeout), this.vs.table = this.tableElement;
+      const t = e.currentTarget.scrollLeft, i = e.currentTarget.scrollTop;
+      this.props.columnVirtualization && (!this.vs.scrollableVirtual || i === this.wrapperScrollTop) && (this.forceUpdateTimeout = window.setTimeout(() => {
+        this.forceUpdate();
+      }, 0)), this._header && this._header.setScrollLeft(t), this._footer && this._footer.setScrollLeft(t), this.vs && i !== this.wrapperScrollTop && this.vs.scrollHandler(e), Le(this.props.onScroll, e, this, void 0), this.wrapperScrollTop = i;
+    }, this.onKeyDown = (e) => {
+      if (E.onKeyDown(e, {
+        contextStateRef: this.contextStateRef,
+        navigationStateRef: this.navigationStateRef,
+        onNavigationAction: this.onNavigationAction
+      }), this.props.onKeyDown) {
+        const { mode: t, cell: i } = re(this.props.selectable), l = {
+          dataItems: this.getLeafDataItems(),
+          mode: t,
+          cell: i,
+          componentId: this._gridId,
+          selectedField: this.props.selectedField,
+          ...this.getArguments(e)
+        };
+        this.props.onKeyDown.call(void 0, l);
+      }
+    }, this.onFocus = (e) => {
+      E.onFocus(e, {
+        contextStateRef: this.contextStateRef
+      });
+    }, this.onNavigationAction = (e) => {
+      if (this.props.onNavigationAction) {
+        const t = {
+          focusElement: e.focusElement,
+          ...this.getArguments(e.event)
+        };
+        this.props.onNavigationAction.call(void 0, t);
+      }
+    }, this.rowClick = (e, t) => {
+      this.props.onRowClick && e.target.nodeName === "TD" && this.props.onRowClick.call(
+        void 0,
+        {
+          dataItem: t.dataItem,
+          ...this.getArguments(e)
+        }
+      );
+    }, this.rowDblClick = (e, t) => {
+      this.props.onRowDoubleClick && e.target.nodeName === "TD" && this.props.onRowDoubleClick.call(
+        void 0,
+        {
+          dataItem: t.dataItem,
+          ...this.getArguments(e)
+        }
+      );
+    }, this.itemChange = (e) => {
+      const t = this.props.onItemChange;
+      if (e.field === this.props.expandField || this.props.group && e.field === void 0) {
+        const i = this.props.onExpandChange;
+        i && i.call(
+          void 0,
+          {
+            ...this.getArguments(e.syntheticEvent),
+            dataItem: e.dataItem,
+            dataIndex: e.dataIndex,
+            value: e.value
+          }
+        );
+        return;
+      }
+      t && t.call(
+        void 0,
+        {
+          ...this.getArguments(e.syntheticEvent),
+          dataItem: e.dataItem,
+          field: e.field,
+          value: e.value
+        }
+      );
+    }, this.onHeaderSelectionChange = (e) => {
+      this.props.onHeaderSelectionChange && this.props.onHeaderSelectionChange.call(
+        void 0,
+        {
+          field: e.field,
+          nativeEvent: e.syntheticEvent && e.syntheticEvent.nativeEvent,
+          syntheticEvent: e.syntheticEvent,
+          target: this,
+          dataItems: this.getLeafDataItems(),
+          selectedField: this.props.selectedField
+        }
+      );
+    }, this.selectionRelease = (e) => {
+      if (this.props.onSelectionChange) {
+        const t = {
+          syntheticEvent: void 0,
+          target: this,
+          selectedField: this.props.selectedField || "",
+          componentId: this._gridId,
+          dataItems: this.getLeafDataItems(),
+          dataItem: null,
+          ...e
+        };
+        this.props.onSelectionChange.call(void 0, t);
+      }
+    }, this.pageChange = (e, t, i) => {
+      this.raiseDataEvent(
+        this.props.onPageChange,
+        { page: e },
+        { skip: e.skip, take: e.take },
+        t,
+        i
+      );
+    }, this.pagerPageChange = (e) => {
+      this.pageChange({ skip: e.skip, take: e.take }, e.syntheticEvent, e.targetEvent);
+    }, this.sortChange = (e, t) => {
+      this.raiseDataEvent(
+        this.props.onSortChange,
+        { sort: e },
+        { sort: e, ...this.props.scrollable === "virtual" ? { skip: 0 } : {} },
+        t
+      );
+    }, this.filterChange = (e, t) => {
+      this.raiseDataEvent(
+        this.props.onFilterChange,
+        { filter: e },
+        { filter: e || void 0, skip: 0 },
+        t
+      );
+    }, this.groupChange = (e, t) => {
+      const i = t.nativeEvent ? t : { nativeEvent: t.nativeEvent || t.originalEvent };
+      this.raiseDataEvent(
+        this.props.onGroupChange,
+        { group: e },
+        { group: e, skip: 0 },
+        i
+      );
+    }, this.onClipboard = (e, t) => {
+      if (this.props.onClipboard) {
+        if (!this.inActiveElement() || !e)
+          return;
+        this.props.onClipboard.call(
+          void 0,
+          {
+            type: e,
+            nativeEvent: t,
+            columns: this._columns,
+            dataItemKey: this.props.dataItemKey || "",
+            ...typeof this.props.clipboard != "boolean" ? this.props.clipboard : {}
+          }
+        );
+      }
+    }, this.inActiveElement = () => {
+      var h, n, d;
+      if (!U)
+        return !1;
+      const e = Me(this.document), t = e ? e.matches(".k-table-td") ? e : (h = this.document) == null ? void 0 : h.body : (n = this.document) == null ? void 0 : n.body, i = t.closest(".k-grid-container"), l = t && ((d = this._element) == null ? void 0 : d.contains(t));
+      return !!(t && l && i);
+    }, this.onResize = (e, t, i, l, h, n) => {
+      this.resetTableWidth(), this._shouldUpdateLeftRight = !0, this._resized = !0, this._columnsMutations++, this.props.onColumnResize && this.props.onColumnResize.call(
+        void 0,
+        {
+          columns: this.columns,
+          nativeEvent: l,
+          targetColumnId: n,
+          index: e,
+          newWidth: t,
+          oldWidth: i,
+          end: h,
+          target: this
+        }
+      );
+    }, this.reInitVirtualization = S((e, t, i, l, h, n) => {
+      this.vs.reset();
+      const d = this.getVirtualScroll(this.props);
+      this.vs = new d(n);
+    }), this.flatData = S((e, t, i, l, h, n, d) => {
+      const b = [], R = rt(
+        b,
+        e,
+        t,
+        { index: i },
+        l !== void 0,
+        h
+      );
+      return { flattedData: b, resolvedGroupsCount: R };
+    }), this.rowHeightService = S((e, t, i, l, h) => new ce(t, i, l, h)), this.childrenToArray = S((e) => r.Children.toArray(e)), this.readColumns = S(
+      (e, t, i) => {
+        const l = e.filter((h) => h && h.type && h.type.displayName === "KendoReactGridColumn");
+        return at(l, this.columns, { prevId: 0, idPrefix: t });
+      }
+    ), this.mapColumns = S(
+      (e) => Pe(e)
+    ), this.configureColumns = S((e, t, i) => {
+      this.props.selectedField && e.forEach((n) => {
+        n.field === this.props.selectedField ? (n.width = n.width || "50px", n.cell = n.cell || qe, n.headerCell = n.headerCell || ct) : n.width = void 0;
+      });
+      const l = {
+        id: "",
+        resizable: !0,
+        width: "32px",
+        title: " ",
+        declarationIndex: -1,
+        orderIndex: -1,
+        children: [],
+        parentIndex: -1,
+        depth: 0,
+        colSpan: 0,
+        rowSpan: 0,
+        left: 0,
+        right: 0,
+        index: 0,
+        rightBorder: !1,
+        ariaColumnIndex: 0,
+        isAccessible: !0
+      };
+      let h = 0;
+      this.props.expandField && this.props.onExpandChange && this.props.detail && (e.unshift({
+        ...l,
+        cell: Je,
+        field: this.props.expandField,
+        headerClassName: "k-hierarchy-cell k-header",
+        id: x.generateNavigatableId(`${this._columns.length}`, i, "column")
+      }), h++);
+      for (let n = 0; n < t; n++)
+        e.unshift({
+          ...l,
+          isAccessible: !1,
+          cell: fe,
+          field: "value",
+          locked: this.props.lockGroups
+        }), h++;
+      e.slice(h).forEach((n) => n.parentIndex >= 0 && (n.parentIndex += h));
+    }), this.getHeaderRow = S((e, t, i, l, h, n, d, b, R, f, z, G) => /* @__PURE__ */ r.createElement(
+      Ye,
+      {
+        cells: this.props.cells,
+        sort: e,
+        sortable: t,
+        sortChange: this.sortChange,
+        group: i || [],
+        groupable: l,
+        groupChange: this.groupChange,
+        filter: h,
+        filterable: n,
+        filterOperators: d,
+        filterChange: this.filterChange,
+        columnMenu: R,
+        selectionChange: this.onHeaderSelectionChange,
+        columns: f,
+        columnResize: this.columnResize,
+        pressHandler: this.dragLogic.pressHandler,
+        dragHandler: this.dragLogic.dragHandler,
+        releaseHandler: this.dragLogic.releaseHandler,
+        columnsMap: z,
+        cellRender: b,
+        isRtl: G,
+        dragClue: this.dragLogic.dragClueRef,
+        headerRef: this.headerElementRef,
+        containerRef: this.containerRef
+      }
+    )), this.resolveTitle = (e) => {
+      const t = this._columns.find((l) => l.field === e), i = t && (t.title || t.field);
+      return i === void 0 ? e : i;
+    }, this.getLeafDataItems = () => this._data.filter((e) => e.rowType === "data").map((e) => e.dataItem), Ae(be), this.showLicenseWatermark = Ge(be);
+    const p = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1, c = this.getVirtualScroll(a);
+    this.vs = new c(p || a.rowHeight === void 0 || a.rowHeight === 0), this.dragLogic = new ot(
+      this.columnReorder.bind(this),
+      this.groupReorder.bind(this),
+      this.columnToGroup.bind(this)
+    ), this.columnResize = new it(this.onResize), this.props.clipboard && (this.clipboardService = new Ue(this.onClipboard)), E.onConstructor({
+      navigatable: !!a.navigatable,
+      contextStateRef: this.contextStateRef,
+      navigationStateRef: this.navigationStateRef,
+      idPrefix: this._gridId
+    });
+  }
+  /* eslint-disable max-len */
+  /**
+   * A getter of the current columns. Gets the current column width or current columns, or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column. Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref` callback. The following example demonstrates how to reorder the columns by dragging their handlers and check the properties afterwards. You can check the result in the browser console.
+   *
+   * @example
+   * ```jsx
+   * class App extends React.Component {
+   *     constructor(props) {
+   *         super(props);
+   *         this.state = {
+   *             data: [
+   *                 { 'foo': 'A1', 'bar': 'B1' },
+   *                 { 'foo': 'A2', 'bar': 'B2' },
+   *                 { 'foo': 'A3', 'bar': 'B2' }
+   *             ]
+   *         };
+   *         this.grid = null;
+   *     }
+   *     render() {
+   *         return (
+   *             <div>
+   *                 <Grid
+   *                     data={this.state.data}
+   *                     reorderable={true}
+   *                     ref={(g) => { this.grid = g; }}
+   *                 >
+   *                     <GridColumn field="foo" />
+   *                     <GridColumn field="bar" />
+   *                 </Grid>
+   *                 <button onClick={() => console.log(JSON.stringify(this.grid.columns))}>
+   *                     log current properties into browser console.
+   *                 </button>
+   *             </div>
+   *         );
+   *     }
+   * }
+   * ReactDOM.render(<App />, document.querySelector('my-app'));
+   * ```
+   */
+  // tslint:enable:max-line-length
+  get columns() {
+    const a = this._columns.filter((p) => p.declarationIndex >= 0 && p.parentIndex === -1);
+    return lt(a);
+  }
+  /**
+   * Returns the HTML element of the Grid component.
+   */
+  get element() {
+    return this._element;
+  }
+  get document() {
+    if (U)
+      return this.element && this.element.ownerDocument || document;
+  }
+  get _header() {
+    return this.headerRef.current;
+  }
+  get _gridId() {
+    return this.props.id + "-role-element-id";
+  }
+  /**
+   * @hidden
+   */
+  componentDidMount() {
+    this.resetTableWidth(), oe();
+    const a = Ve(this.element);
+    this.isRtl = a, E.onComponentDidMount({
+      scope: this.element || void 0,
+      contextStateRef: this.contextStateRef,
+      navigationStateRef: this.navigationStateRef
+    }), this.isRtl && this.forceUpdate();
+    const p = {
+      rootMargin: "0px",
+      threshold: 0.9
+    };
+    this.clipboardService && this.clipboardService.addEventListeners(this.document), this.observer = U && window.IntersectionObserver && new window.IntersectionObserver(this.handleIntersection, p) || null;
+  }
+  /**
+   * @hidden
+   */
+  getSnapshotBeforeUpdate() {
+    return E.onGetSnapshotBeforeUpdate({
+      document: this.document,
+      contextStateRef: this.contextStateRef,
+      navigationStateRef: this.navigationStateRef
+    }), null;
+  }
+  /**
+   * @hidden
+   */
+  componentDidUpdate() {
+    this.resetTableWidth(), oe(), this.vs.tableTransform && this.vs.table && (this.vs.table.style.transform = this.vs.tableTransform, this.vs.tableTransform = ""), E.onComponentDidUpdate({
+      scope: this.element || void 0,
+      contextStateRef: this.contextStateRef,
+      navigationStateRef: this.navigationStateRef
+    });
+  }
+  /**
+   * @hidden
+   */
+  componentWillUnmount() {
+    clearTimeout(this.forceUpdateTimeout), this.clipboardService && this.clipboardService.removeEventListeners(this.document);
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    var se;
+    let a = this.props.total || 0;
+    const p = x.getIdPrefix(this.navigationStateRef);
+    let c = [];
+    Array.isArray(this.props.data) ? (c = this.props.data, a = a || this.props.data.length) : this.props.data && (c = this.props.data.data, a = a || this.props.data.total);
+    const e = typeof this.props.groupable == "object" && this.props.groupable.footer || "none", { resolvedGroupsCount: t, flattedData: i } = this.flatData(
+      c,
+      e,
+      this.props.skip || 0,
+      this.props.group,
+      this.props.expandField,
+      this.props.filter,
+      this.props.sort
+    );
+    this._data = i;
+    const l = this.props.groupable === !0 || typeof this.props.groupable == "object" && this.props.groupable.enabled !== !1;
+    this.columnResize.resizable = this.props.resizable || !1, this.dragLogic.reorderable = this.props.reorderable || !1, this.dragLogic.groupable = l;
+    const h = this.props.selectable && this.props.selectable.drag ? "none" : void 0;
+    this.initializeVirtualization(a, l);
+    const n = this.childrenToArray(this.props.children);
+    this.initColumns(n, t);
+    const d = n.map((o) => o && o.type && o.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(o, { ...o.props, ariaControls: this._gridId }) : null), b = n.filter((o) => o && o.type && o.type.displayName === "KendoReactGridNoRecords"), R = n.filter((o) => o && o.type && o.type.displayName === "KendoReactGridStatusBar"), f = this._columns.filter((o) => o.children.length === 0), z = l && /* @__PURE__ */ r.createElement(
+      et,
+      {
+        group: this.props.group || [],
+        groupChange: this.groupChange,
+        pressHandler: this.dragLogic.pressHandler,
+        dragHandler: this.dragLogic.dragHandler,
+        releaseHandler: this.dragLogic.releaseHandler,
+        refCallback: this.dragLogic.refGroupPanelDiv,
+        resolveTitle: this.resolveTitle,
+        ariaControls: this._gridId,
+        onContextMenu: this.onContextMenu
+      }
+    ), { sort: G, sortable: Re, group: ye, filter: we, filterable: Se, filterOperators: ke = ve, headerCellRender: Ie, columnMenu: Ee } = this.props, B = /* @__PURE__ */ r.createElement(
+      Xe,
+      {
+        size: this.props.size,
+        columnResize: this.columnResize,
+        staticHeaders: this.props.scrollable !== "none",
+        scrollableDataElement: () => this.vs.container,
+        draggable: this.props.reorderable || l,
+        ref: this.headerRef,
+        elemRef: this.headerElementRef,
+        headerRow: this.getHeaderRow(
+          G,
+          Re,
+          ye,
+          l,
+          we,
+          Se,
+          ke,
+          Ie,
+          Ee,
+          this._columns,
+          this._columnsMap,
+          this.isRtl
+        ),
+        filterRow: this.props.filterable && /* @__PURE__ */ r.createElement(
+          Ze,
+          {
+            cells: this.props.cells,
+            size: this.props.size,
+            columns: this._columns,
+            filter: this.props.filter,
+            filterOperators: this.props.filterOperators || ve,
+            filterChange: this.filterChange,
+            sort: this.props.sort,
+            cellRender: this.props.filterCellRender,
+            isRtl: this.isRtl,
+            ariaRowIndex: this._columnsMap.length + 1
+          }
+        ) || void 0,
+        cols: f.map((o, g) => /* @__PURE__ */ r.createElement(
+          "col",
+          {
+            key: g.toString(),
+            width: W(o)
+          }
+        ))
+      }
+    ), xe = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, _e = parseFloat(((this.props.style || {}).width || "").toString()), { colSpans: ze, hiddenColumns: De } = We({
+      enabled: this.props.columnVirtualization,
+      columns: f,
+      tableViewPortWidth: _e,
+      scrollLeft: xe
+    }), He = (o, g, m) => {
+      let I = !1;
+      const k = this.props.selectedField ? me(this.props.selectedField, o.dataItem) : void 0;
+      return {
+        row: f.map((u, v) => {
+          if (De[v])
+            return null;
+          const H = u.id ? u.id : v, T = `${u.className ? u.className + " " : ""}${u.locked ? "k-grid-content-sticky" : ""}`, y = u.left !== void 0 ? this.isRtl ? { left: u.right, right: u.left } : { left: u.left, right: u.right } : {};
+          let w = !1;
+          if (u.editable && this.props.editField) {
+            const C = me(this.props.editField, o.dataItem);
+            C && (C === !0 || C === u.field) && (I = !0, w = !0);
+          }
+          const P = u.cell || w && Qe || pt;
+          return /* @__PURE__ */ r.createElement(
+            P,
+            {
+              onContextMenu: this.onContextMenu,
+              key: H,
+              locked: this.props.lockGroups,
+              id: x.generateNavigatableId(`${g}-${String(v)}`, p),
+              colSpan: ze[v],
+              dataItem: o.dataItem,
+              field: u.field,
+              editor: u.editor,
+              format: u.format,
+              className: T,
+              render: this.props.cellRender,
+              cells: ht(this.props.cells, u.cells),
+              onChange: this.itemChange,
+              selectionChange: this.props.onSelectionChange ? (C) => {
+                this.selectionChange({ event: C, dataItem: o.dataItem, dataIndex: m, columnIndex: v });
+              } : void 0,
+              columnIndex: v,
+              columnsCount: f.length,
+              rowType: o.rowType,
+              level: o.level,
+              expanded: o.expanded,
+              dataIndex: o.dataIndex,
+              style: y,
+              ariaColumnIndex: u.ariaColumnIndex,
+              isSelected: Array.isArray(k) && k.indexOf(v) > -1
+            }
+          );
+        }),
+        isInEdit: I,
+        isSelected: typeof k == "boolean" && k
+      };
+    };
+    let $ = 0;
+    if (this.props.scrollable === "virtual")
+      for (let o = 0; o < this.vs.topCacheCount + this.vs.attendedSkip - (this.props.skip || 0); o++) {
+        const g = this._data.shift();
+        if (g)
+          this._data.push(g), $++, g.rowType === "groupHeader" && o--;
+        else
+          break;
+      }
+    const j = (o) => o >= this._data.length - $;
+    let q = this.vs.realSkip || 0;
+    const L = [];
+    let K = !1;
+    const O = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1, J = /* @__PURE__ */ r.createElement("div", { key: "no-records", className: "k-grid-norecords", "aria-rowindex": O }, /* @__PURE__ */ r.createElement("div", { className: "k-grid-norecords-template" }, b.length ? b : /* @__PURE__ */ r.createElement(ut, null)));
+    let D = 0;
+    if (this._data.length) {
+      let o = -1, g = 0;
+      (this._slicedData || this._data).forEach((m, I) => {
+        m.rowType === "data" && (q++, o++);
+        const k = q % 2 === 0, u = this.props.dataItemKey && Ke(this.props.dataItemKey)(m.dataItem), v = I + (this.vs.realSkip || 0), H = u || "ai" + v, T = H + "_1", y = He(m, H, o);
+        if (D = v + O + g, L.push(/* @__PURE__ */ r.createElement(
+          dt,
+          {
+            key: H,
+            dataItem: m.dataItem,
+            isAltRow: k,
+            isInEdit: y.isInEdit,
+            rowType: m.rowType,
+            isHidden: j(I),
+            onClick: (w) => this.rowClick(w, m),
+            onDoubleClick: (w) => this.rowDblClick(w, m),
+            selectedField: this.props.selectedField,
+            rowHeight: this.props.rowHeight,
+            render: this.props.rowRender,
+            ariaRowIndex: D,
+            absoluteRowIndex: v,
+            dataIndex: o,
+            isSelected: y.isSelected
+          },
+          y.row
+        )), this.props.detail && m.rowType === "data" && m.expanded) {
+          const w = f.length - (this.props.expandField ? 1 : 0) - (this.props.group ? this.props.group.length : 0) || 1;
+          g++, D = v + O + g, L.push(/* @__PURE__ */ r.createElement(
+            "tr",
+            {
+              key: T,
+              className: F(
+                "k-table-row",
+                k ? "k-detail-row k-table-alt-row k-alt" : "k-detail-row"
+              ),
+              style: { visibility: j(I) ? "hidden" : "", height: this.props.detailRowHeight },
+              role: "row",
+              "aria-rowindex": D
+            },
+            this.props.group && this.props.group.map((P, C) => {
+              var ie;
+              const N = (ie = y == null ? void 0 : y.row[C]) == null ? void 0 : ie.props.style, Fe = N ? this.isRtl ? { left: N.right, right: N.left } : { left: N.left, right: N.right } : {};
+              return /* @__PURE__ */ r.createElement(
+                fe,
+                {
+                  id: "",
+                  dataIndex: m.dataIndex,
+                  field: P.field,
+                  dataItem: m.dataItem,
+                  key: C,
+                  style: Fe,
+                  ariaColumnIndex: 1 + C,
+                  isSelected: !1,
+                  locked: this.props.lockGroups,
+                  isRtl: this.isRtl,
+                  cells: this.props.cells
+                }
+              );
+            }),
+            this.props.expandField && /* @__PURE__ */ r.createElement(
+              bt,
+              {
+                id: x.generateNavigatableId(`${T}-dhcell`, p)
+              }
+            ),
+            /* @__PURE__ */ r.createElement(
+              vt,
+              {
+                onContextMenu: this.onContextMenu,
+                dataItem: m.dataItem,
+                dataIndex: m.dataIndex,
+                colSpan: w,
+                ariaColIndex: 2 + (this.props.group ? this.props.group.length : 0),
+                detail: this.props.detail,
+                id: x.generateNavigatableId(`${T}-dcell`, p)
+              }
+            )
+          ));
+        }
+      });
+    } else
+      K = !0;
+    const Q = {
+      size: this.props.size,
+      onPageChange: this.pagerPageChange,
+      total: a,
+      dir: this.isRtl ? "rtl" : void 0,
+      skip: this.vs.propsSkip || 0,
+      take: (this.props.take !== void 0 ? this.props.take : this.props.pageSize) || 10,
+      messagesMap: ft,
+      ...mt(this.props.pageable || {})
+    }, X = this.props.pager ? /* @__PURE__ */ r.createElement(this.props.pager, { ...Q }) : /* @__PURE__ */ r.createElement(Be, { className: "k-grid-pager", ...Q }), Te = (o) => this.props.sort && this.props.sort.filter((g) => g.field === o).length > 0, Ne = (o, g) => /* @__PURE__ */ r.createElement(
+      "col",
+      {
+        key: g.toString(),
+        width: W(o)
+      }
+    ), Y = (se = this.props.cells) != null && se.footerCell || this._columns.some(
+      (o) => {
+        var g;
+        return !!(o.footerCell || (g = o.cells) != null && g.footerCell);
+      }
+    ) ? /* @__PURE__ */ r.createElement(
+      tt,
+      {
+        size: this.props.size,
+        columnResize: this.columnResize,
+        staticHeaders: this.props.scrollable !== "none",
+        ref: (o) => this._footer = o,
+        row: /* @__PURE__ */ r.createElement(
+          gt,
+          {
+            cells: this.props.cells,
+            columns: this._columns,
+            isRtl: this.isRtl,
+            ariaRowIndex: D + 1
+          }
+        ),
+        cols: f.map(Ne)
+      }
+    ) : null, Z = /* @__PURE__ */ r.createElement(
+      "colgroup",
+      {
+        ref: (o) => {
+          this.columnResize.colGroupMain = o;
+        }
+      },
+      f.map(
+        (o, g) => /* @__PURE__ */ r.createElement(
+          "col",
+          {
+            key: g.toString(),
+            className: Te(o.field) ? "k-sorted" : void 0,
+            width: W(o)
+          }
+        )
+      )
+    ), ee = this.dragLogic.reorderable || this.dragLogic.groupable, te = this.props.columnVirtualization ? "block" : "table";
+    if (this.props.scrollable === "none")
+      return /* @__PURE__ */ r.createElement(V.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
+        "div",
+        {
+          id: this.props.id,
+          style: this.props.style,
+          className: F(
+            "k-grid",
+            {
+              "k-grid-md": !this.props.size,
+              [`k-grid-${A.sizeMap[this.props.size] || this.props.size}`]: this.props.size
+            },
+            this.props.className
+          ),
+          ref: (o) => {
+            this._element = o;
+          },
+          "aria-label": this.props.ariaLabel,
+          onKeyDown: this.onKeyDown,
+          onFocus: this.onFocus,
+          ...ae
+        },
+        d,
+        z,
+        /* @__PURE__ */ r.createElement(
+          le,
+          {
+            selectable: this.props.selectable,
+            onRelease: this.selectionRelease,
+            childRef: (o) => {
+              this.tableElement = o;
+            }
+          },
+          /* @__PURE__ */ r.createElement(
+            "table",
+            {
+              className: F(
+                "k-table k-grid-table",
+                { [`k-table-${A.sizeMap[this.props.size] || this.props.size}`]: this.props.size }
+              ),
+              style: { userSelect: h, display: te }
+            },
+            Z,
+            B,
+            /* @__PURE__ */ r.createElement("tbody", { role: "rowgroup", className: "k-table-tbody", ...ne }, L),
+            Y
+          )
+        ),
+        K && J,
+        ee && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(he, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(pe, { ref: this.dragLogic.refDragElementClue }))
+      ), R, this.props.pageable && X);
+    let M = this.props.style || {};
+    return this.props.scrollable === "virtual" && (M.height || (M = Object.assign({}, M, { height: "450px" }))), /* @__PURE__ */ r.createElement(V.Provider, { value: this.contextStateRef.current }, /* @__PURE__ */ r.createElement(
+      "div",
+      {
+        id: this.props.id,
+        style: M,
+        className: F(
+          "k-grid",
+          {
+            "k-grid-md": !this.props.size,
+            [`k-grid-${A.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
+            "k-grid-virtual": this.props.scrollable === "virtual"
+          },
+          this.props.className
+        ),
+        ref: (o) => {
+          this._element = o;
+        },
+        "aria-label": this.props.ariaLabel,
+        onKeyDown: this.onKeyDown,
+        onFocus: this.onFocus,
+        ...ae
+      },
+      d,
+      z,
+      /* @__PURE__ */ r.createElement(
+        "div",
+        {
+          className: "k-grid-aria-root",
+          role: "grid",
+          "aria-colcount": f.length,
+          "aria-rowcount": a,
+          id: this._gridId
+        },
+        B,
+        /* @__PURE__ */ r.createElement("div", { className: "k-grid-container", role: "presentation" }, /* @__PURE__ */ r.createElement(
+          "div",
+          {
+            ref: this.containerRef,
+            className: "k-grid-content k-virtual-content",
+            onScroll: this.scrollHandler,
+            role: "presentation"
+          },
+          /* @__PURE__ */ r.createElement("div", { className: "k-grid-table-wrap", role: "presentation" }, /* @__PURE__ */ r.createElement(
+            le,
+            {
+              selectable: this.props.selectable,
+              onRelease: this.selectionRelease,
+              childRef: (o) => {
+                this.tableElement = o;
+              }
+            },
+            /* @__PURE__ */ r.createElement(
+              "table",
+              {
+                className: F(
+                  "k-table k-grid-table",
+                  {
+                    "k-table-md": !this.props.size,
+                    [`k-table-${A.sizeMap[this.props.size] || this.props.size}`]: this.props.size
+                  }
+                ),
+                role: "presentation",
+                style: { userSelect: h, display: te }
+              },
+              Z,
+              /* @__PURE__ */ r.createElement(
+                "tbody",
+                {
+                  className: "k-table-tbody",
+                  ref: this.tableBodyRef,
+                  role: "rowgroup",
+                  ...ne
+                },
+                L
+              )
+            )
+          ), K && J),
+          /* @__PURE__ */ r.createElement("div", { className: "k-height-container", role: "presentation" }, /* @__PURE__ */ r.createElement(
+            "div",
+            {
+              style: this.props.scrollable === "virtual" ? { height: this.vs.containerHeight + "px" } : {}
+            }
+          ))
+        )),
+        Y,
+        ee && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(he, { ref: this.dragLogic.refDropElementClue }), /* @__PURE__ */ r.createElement(pe, { ref: this.dragLogic.refDragElementClue })),
+        this.showLicenseWatermark && /* @__PURE__ */ r.createElement(Oe, null)
+      ),
+      R,
+      this.props.pageable && X
+    ));
+  }
+  selectionChange(a) {
+    if (this.props.onSelectionChange) {
+      const { event: p, dataItem: c, dataIndex: e, columnIndex: t } = a, { mode: i, cell: l } = re(this.props.selectable), h = {
+        ...this.getArguments(p.syntheticEvent),
+        dataItem: c,
+        startColIndex: t,
+        endColIndex: t,
+        startRowIndex: e,
+        endRowIndex: e,
+        dataItems: this.getLeafDataItems(),
+        altKey: !1,
+        ctrlKey: !1,
+        shiftKey: !1,
+        metaKey: !1,
+        mode: i,
+        cell: l,
+        isDrag: !1,
+        componentId: this._gridId,
+        selectedField: this.props.selectedField || ""
+      };
+      this.props.onSelectionChange.call(void 0, h);
+    }
+  }
+  raiseDataEvent(a, p, c, e, t) {
+    const i = this.props.onDataStateChange;
+    if (a) {
+      const l = { ...this.getArguments(e), ...p, targetEvent: t };
+      a.call(void 0, l);
+    } else
+      i && i.call(
+        void 0,
+        {
+          ...this.getArguments(e),
+          targetEvent: t || {},
+          dataState: {
+            ...this.getDataState(),
+            ...c
+          }
+        }
+      );
+  }
+  columnReorder(a, p, c) {
+    const e = this._columns[a], t = e.depth, i = (d) => {
+      do
+        d++;
+      while (d < this._columns.length && this._columns[d].depth > t);
+      return d;
+    }, l = this._columns.splice(a, i(a) - a);
+    this._columns.splice(a < p ? i(p - l.length) : p, 0, ...l), this._columns.filter((d) => d.declarationIndex >= 0).forEach((d, b) => d.orderIndex = b), this._columnsMutations++;
+    const h = this._columns[a].locked && this._columns[p].locked;
+    $e(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), je(this._columnsMap, this._columns, h || this._shouldUpdateLeftRight), this._resized && (this._shouldUpdateLeftRight = !1, this._resized = !1);
+    const n = this.columns;
+    if (this.forceUpdate(), this.props.onColumnReorder) {
+      const d = {
+        target: this,
+        columns: n,
+        columnId: e.id,
+        nativeEvent: c
+      };
+      this.props.onColumnReorder.call(void 0, d);
+    }
+  }
+  groupReorder(a, p, c) {
+    if (this.props.group === void 0)
+      return;
+    const e = this.props.group.slice();
+    e.splice(p, 0, ...e.splice(a, 1)), this.groupChange(e, c);
+  }
+  columnToGroup(a, p, c) {
+    const e = this._columns[a].field;
+    if (!e)
+      return;
+    const t = (this.props.group || []).slice();
+    t.splice(p, 0, { field: e }), this.groupChange(t, c);
+  }
+  resetTableWidth() {
+    let a = 0;
+    if (!this.columnResize.colGroupMain)
+      return;
+    const p = this.columnResize.colGroupMain.children;
+    for (let c = 0; c < p.length; c++) {
+      const e = p[c].width;
+      if (!e)
+        return;
+      a += parseFloat(e.toString());
+    }
+    a = Math.round(a), this._header && this._header.setWidth(a), this._footer && this._footer.setWidth(a), this.tableElement && (this.tableElement.style.width = a + "px");
+  }
+  initColumns(a, p) {
+    const c = x.getIdPrefix(this.navigationStateRef);
+    this._columns = this.readColumns(a, c, this._columnsMutations), this._columns.length === 0 && (this._columns = nt(this.props.data, this.props.group, this.props.expandField, { prevId: 0, idPrefix: c })), this.configureColumns(this._columns, p, c), this._columnsMap = this.mapColumns(this._columns), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
+  }
+  getDataState() {
+    return {
+      filter: this.props.filter,
+      sort: this.props.sort,
+      skip: this.props.skip,
+      take: this.props.take !== void 0 ? this.props.take : this.props.pageSize,
+      group: this.props.group
+    };
+  }
+  getArguments(a) {
+    return {
+      nativeEvent: a && a.nativeEvent,
+      syntheticEvent: a,
+      target: this
+    };
+  }
+};
+_.displayName = "KendoReactGrid", _.defaultProps = {
+  // never use this
+}, _.propTypes = {
+  data: s.oneOfType([
+    s.array,
+    s.shape({
+      data: s.array,
+      total: s.number
+    })
+  ]),
+  sortable: s.oneOfType([
+    s.bool,
+    s.shape({
+      mode: s.oneOf(["single", "multiple"]),
+      allowUnsort: s.bool
+    })
+  ]),
+  onSortChange: s.func,
+  sort: s.array,
+  filterable: s.bool,
+  filter: s.any,
+  onFilterChange: s.func,
+  pageable: s.oneOfType([
+    s.bool,
+    s.shape({
+      buttonCount: s.number,
+      responsive: s.bool,
+      info: s.bool,
+      type: s.oneOf(["numeric", "input"]),
+      pageSizes: s.oneOfType(
+        [
+          s.bool,
+          s.arrayOf(s.oneOfType([
+            s.string,
+            s.number
+          ]))
+        ]
+      ),
+      previousNext: s.bool
+    })
+  ]),
+  pageSize: s.number,
+  onPageChange: s.func,
+  total: s.number,
+  skip: s.number,
+  take: s.number,
+  fixedScroll: s.bool,
+  onExpandChange: s.func,
+  expandField: s.string,
+  selectedField: s.string,
+  onSelectionChange: s.func,
+  onHeaderSelectionChange: s.func,
+  resizable: s.bool,
+  reorderable: s.bool,
+  group: s.any,
+  groupable: s.oneOfType([
+    s.bool,
+    s.shape({
+      enabled: s.bool,
+      footer: s.oneOf(["always", "visible", "none"])
+    })
+  ]),
+  onGroupChange: s.func,
+  onRowClick: s.func,
+  onRowDoubleClick: s.func,
+  onItemChange: s.func,
+  editField: s.string,
+  scrollable: s.oneOf(["none", "scrollable", "virtual"]),
+  rowHeight: s.number,
+  detailRowHeight: s.number,
+  detail: s.any,
+  style: s.object,
+  onDataStateChange: s.func,
+  onColumnResize: s.func,
+  onColumnReorder: s.func,
+  dataItemKey: s.string,
+  navigatable: s.bool,
+  size: s.oneOf(["small", "medium"])
+}, _.contextType = V;
+let Ce = _;
+export {
+  Ce as Grid
+};