@progress/kendo-react-grid 9.3.1 → 9.4.0-develop.1

package/Grid.mjs

@@ -6,1059 +6,97 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as r from "react";
-import o from "prop-types";
-import { useId as Rn, validatePackage as Cn, useUnstyled as vn, uGrid as yn, shouldShowValidationUI as wn, useDir as En, setScrollbarWidth as ct, canUseDOM as Q, getter as In, classNames as b, WatermarkOverlay as Sn, RowHeightService as it, getScrollbarWidth as kn, dispatchEvent as xn, getActiveElement as Hn } from "@progress/kendo-react-common";
-import { tableKeyboardNavigation as K, ClipboardService as Tn, tableKeyboardNavigationTools as L, tableColumnsVirtualization as Dn, Pager as Nn, TableKeyboardNavigationContext as dt, tableKeyboardNavigationScopeAttributes as ut, TableSelection as st, tableKeyboardNavigationBodyAttributes as ft, DropClue as gt, DragClue as mt, getSelectionOptions as ht, updateLeft as Fn, updateRight as Gn, mapColumns as An, KEYBOARD_NAV_DATA_ID as zn } from "@progress/kendo-react-data-tools";
-import { GridSelectionCell as Mn } from "./cells/GridSelectionCell.mjs";
-import { GridHierarchyCell as On } from "./cells/GridHierarchyCell.mjs";
-import { GridEditCell as Pn } from "./cells/GridEditCell.mjs";
-import { Header as Kn } from "./header/Header.mjs";
-import { HeaderRow as Ln } from "./header/HeaderRow.mjs";
-import { FilterRow as Vn } from "./header/FilterRow.mjs";
-import { GroupPanel as Bn } from "./header/GroupPanel.mjs";
-import { Footer as Wn } from "./footer/Footer.mjs";
-import { useLocalization as _n } from "@progress/kendo-react-intl";
-import { pagerMessagesMap as Un, gridAriaLabel as bt, messages as $n } from "./messages/index.mjs";
-import { VirtualScroll as jn } from "./VirtualScroll.mjs";
-import { VirtualScrollFixed as Rt } from "./VirtualScrollFixed.mjs";
-import { ColumnResize as qn } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as Jn } from "./drag/CommonDragLogic.mjs";
-import { getColumnWidth as De, isSorted as Ct, sanitizeColumns as Xn, firefox as vt, firefoxMaxHeight as yt, flatData as Yn, autoGenerateColumns as Qn, getNestedValue as wt, resolveCells as Zn, readColumns as pn } from "./utils/index.mjs";
-import { GridCell as er } from "./cells/GridCell.mjs";
-import { GridGroupCell as Et } from "./cells/GridGroupCell.mjs";
-import { GridRow as tr } from "./rows/GridRow.mjs";
-import { GridHeaderSelectionCell as nr } from "./header/GridHeaderSelectionCell.mjs";
-import { GridNoRecords as rr } from "./GridNoRecords.mjs";
-import { operators as It } from "./filterCommon.mjs";
-import { FooterRow as ar } from "./footer/FooterRow.mjs";
-import { normalize as lr } from "./paging/GridPagerSettings.mjs";
-import { packageMetadata as St } from "./package-metadata.mjs";
-import { GridDetailCell as or } from "./cells/GridDetailCell.mjs";
-import { GridDetailHierarchyCell as cr } from "./cells/GridDetailHierarchyCell.mjs";
-import { SAFARI_REGEX as ir } from "./constants/index.mjs";
-const kt = r.forwardRef((t, xt) => {
-  var nt, rt, at, lt;
-  const ue = Rn();
-  Cn(St);
-  const H = () => {
-    var e;
-    if (Q)
-      return ((e = Z()) == null ? void 0 : e.ownerDocument) || document;
-  }, T = () => (t.id || ue) + "-role-element-id", V = () => {
-    const e = s.current.filter((n) => n.declarationIndex >= 0 && n.parentIndex === -1);
-    return Xn(e);
-  }, Z = () => N.current, se = r.useCallback(
-    (e) => {
-      var l;
-      if (!c.current || !((l = c.current) != null && l.container) || t.scrollable === "none")
-        return;
-      z.current && z.current.disconnect();
-      const { rowIndex: n } = e, a = Z();
-      if (t.scrollable === "virtual")
-        c.current.askedSkip = n, c.current.container.scroll(
-          0,
-          Math.round(c.current.askedSkip / c.current.total * c.current.container.scrollHeight)
-        );
-      else if (a) {
-        const i = n < 1 ? a.querySelector("tbody > tr:nth-child(1)") : a.querySelector(`tbody > tr:nth-child(${n + 1})`);
-        i && _.current && (_.current.scrollTop = i.offsetTop);
-      }
-    },
-    [t.scrollable]
-  ), Ne = r.useCallback(
-    (e) => {
-      const n = { rowIndex: Ie.current };
-      e.forEach((a) => {
-        a.isIntersecting || se(n);
-      });
-    },
-    [se]
-  ), [, fe] = r.useReducer((e) => !e, !0), Fe = (e) => JSON.stringify(e.map((n) => ({ id: n.id, field: n.field, title: n.title, children: n.children }))), B = r.useMemo(() => r.Children.toArray(t.children), [t.children]), Ht = () => Fe(B) === Fe(s.current), Tt = () => {
-    Ht() || fe();
-  }, ge = (e, n, a) => {
-    if (t.onContextMenu) {
-      const l = {
-        target: w.current,
-        syntheticEvent: e,
-        nativeEvent: e.nativeEvent,
-        dataItem: n,
-        field: a
-      };
-      t.onContextMenu.call(void 0, l);
-    }
-  }, Ge = () => {
-    const { data: e, total: n } = t;
-    return Array.isArray(e) ? e.length === n : e ? n === e.total : !1;
-  }, Dt = () => {
-    const { rowHeight: e, detailRowHeight: n, detail: a, expandField: l, groupable: i } = t, u = Ge(), d = e !== void 0 && e > 0, h = n !== void 0 && n > 0, E = i === !0 || typeof i == "object" && i.enabled !== !1;
-    return !d || E && !u || !!(a && l) && (!h || !u) ? jn : Rt;
-  }, Nt = (e, n) => {
-    if (c.current) {
-      if (c.current.fixedScroll = t.fixedScroll || !1, c.current.PageChange = p, c.current.realSkip = t.skip || 0, c.current.pageSize = (t.take !== void 0 ? t.take : t.pageSize) || 0, c.current.scrollableVirtual = t.scrollable === "virtual", c.current.total = e, c.current.propsSkip = (t.skip || 0) + (t.scrollable === "virtual" ? c.current.topCacheCount + (c.current.attendedSkip - (t.skip || 0)) : 0), t.rowHeight !== void 0 && t.rowHeight > 0 && !n) {
-        const a = t.rowHeight * e;
-        c.current.containerHeight = vt ? Math.min(yt, a) : a;
-      } else
-        c.current.containerHeight = 1533915;
-      if (c.current.containerRef = _, c.current.tableBodyRef = U, c.current.table = y.current, ae.current = void 0, c.current instanceof Rt) {
-        const { rowHeight: a = 0, detail: l, expandField: i } = t;
-        let { detailRowHeight: u = 0 } = t;
-        u = l && i ? u : a, Ge() ? (c.current.total = R.current.length, ae.current = R.current.slice(
-          c.current.realSkip,
-          c.current.realSkip + c.current.pageSize
-        ), c.current.rowHeightService = new it(
-          R.current.length,
-          a,
-          u,
-          R.current
-        )) : c.current.rowHeightService = new it(e, a, u);
-        const d = c.current.rowHeightService.totalHeight();
-        c.current.containerHeight = vt ? Math.min(yt, d) : d;
-      }
-    }
-  }, Ae = () => (ye.current || (ye.current = kn() || void 0), ye.current), Ft = (e) => {
-    var l;
-    if (e.target !== e.currentTarget)
-      return;
-    clearTimeout(Ee.current), c.current && (c.current.table = y.current);
-    const n = e.currentTarget.scrollLeft, a = e.currentTarget.scrollTop;
-    t.columnVirtualization && (!((l = c.current) != null && l.scrollableVirtual) || a === we.current) && (Ee.current = window.setTimeout(() => {
-      fe();
-    }, 0)), O.current && O.current.setScrollLeft(n), W.current && W.current.setScrollLeft(n), c.current && a !== we.current && c.current.scrollHandler(e), xn(t.onScroll, e, w.current, void 0), we.current = a;
-  }, ze = (e) => {
-    if (K.onKeyDown(e, {
-      navigatable: t.navigatable || !1,
-      contextStateRef: S,
-      navigationStateRef: D,
-      onNavigationAction: Gt,
-      columns: V()
-    }), K.onGetSnapshotBeforeUpdate({
-      document: H(),
-      contextStateRef: S,
-      navigationStateRef: D
-    }), t.onKeyDown) {
-      const { mode: n, cell: a } = ht(t.selectable), l = {
-        dataItems: ne(),
-        mode: n,
-        cell: a,
-        componentId: T(),
-        selectedField: t.selectedField,
-        ...v(e)
-      };
-      t.onKeyDown.call(void 0, l);
-    }
-  }, Me = (e) => {
-    K.onFocus(e, {
-      navigatable: !!t.navigatable,
-      contextStateRef: S
-    });
-  }, Gt = (e) => {
-    if (e.action === "moveToNextPage" && Lt(e.event), e.action === "moveToPrevPage" && Vt(e.event), e.focusElement && e.action === "reorderToRight") {
-      const n = parseInt(e.focusElement.ariaColIndex, 10) - 1;
-      n < s.current.length - 1 && me(n, n + 1, e.event);
-    }
-    if (e.focusElement && e.action === "reorderToLeft") {
-      const n = parseInt(e.focusElement.ariaColIndex, 10) - 1;
-      n > 0 && me(n, n - 1, e.event);
-    }
-    if (t.onNavigationAction) {
-      const n = {
-        focusElement: e.focusElement,
-        ...v(e.event)
-      };
-      t.onNavigationAction.call(void 0, n);
-    }
-  }, At = (e, n) => {
-    t.onRowClick && e.target.nodeName === "TD" && t.onRowClick.call(void 0, {
-      dataItem: n.dataItem,
-      ...v(e)
-    });
-  }, zt = (e, n) => {
-    t.onRowDoubleClick && e.target.nodeName === "TD" && t.onRowDoubleClick.call(void 0, {
-      dataItem: n.dataItem,
-      ...v(e)
-    });
-  }, Mt = (e) => {
-    if (e.field === t.expandField || t.group && e.field === void 0) {
-      t.onExpandChange && t.onExpandChange.call(void 0, {
-        ...v(e.syntheticEvent),
-        dataItem: e.dataItem,
-        dataIndex: e.dataIndex,
-        value: e.value
-      });
-      return;
-    }
-    t.onItemChange && t.onItemChange.call(void 0, {
-      ...v(e.syntheticEvent),
-      dataItem: e.dataItem,
-      dataIndex: e.dataIndex,
-      field: e.field,
-      value: e.value
-    });
-  }, Ot = (e) => {
-    if (t.onSelectionChange) {
-      const { event: n, dataItem: a, dataIndex: l, columnIndex: i } = e, { mode: u, cell: d } = ht(t.selectable), h = {
-        ...v(n.syntheticEvent),
-        dataItem: a,
-        startColIndex: i,
-        endColIndex: i,
-        startRowIndex: l,
-        endRowIndex: l,
-        dataItems: ne(),
-        altKey: !1,
-        ctrlKey: !1,
-        shiftKey: !1,
-        metaKey: !1,
-        mode: u,
-        cell: d,
-        isDrag: !1,
-        componentId: T(),
-        selectedField: t.selectedField || ""
-      };
-      t.onSelectionChange.call(void 0, h);
-    }
-  }, Pt = (e) => {
-    t.onHeaderSelectionChange && t.onHeaderSelectionChange.call(void 0, {
-      field: e.field,
-      nativeEvent: e.syntheticEvent && e.syntheticEvent.nativeEvent,
-      syntheticEvent: e.syntheticEvent,
-      target: w.current,
-      dataItems: ne(),
-      selectedField: t.selectedField
-    });
-  }, Oe = (e) => {
-    if (t.onSelectionChange) {
-      const n = Le()[e.startRowIndex], a = Le()[e.endRowIndex], l = {
-        syntheticEvent: void 0,
-        target: w.current,
-        selectedField: t.selectedField || "",
-        componentId: T(),
-        dataItems: ne(),
-        dataItem: null,
-        startDataItem: n,
-        endDataItem: a,
-        ...e
-      };
-      t.onSelectionChange.call(void 0, l);
-    }
-  }, p = (e, n, a) => {
-    te(
-      t.onPageChange,
-      { page: e },
-      { skip: e.skip, take: e.take },
-      n,
-      a
-    );
-  }, Kt = () => {
-    let e = t.total || 0;
-    return Array.isArray(t.data) ? e = e || t.data.length : t.data && (e = e || t.data.total), e;
-  }, Lt = (e) => {
-    const n = t.take || 0, a = (t.skip || 0) + n, l = Kt();
-    a < l && p({ skip: a, take: n }, e);
-  }, Vt = (e) => {
-    const n = t.take || 0, a = (t.skip || 0) - n;
-    a >= 0 && p({ skip: a, take: n }, e);
-  }, Bt = (e) => {
-    p({ skip: e.skip, take: e.take }, e.syntheticEvent, e.targetEvent);
-  }, Wt = (e, n) => {
-    te(
-      t.onSortChange,
-      { sort: e },
-      { sort: e, ...t.scrollable === "virtual" ? { skip: 0 } : {} },
-      n
-    );
-  }, Pe = (e, n) => {
-    te(
-      t.onFilterChange,
-      { filter: e },
-      { filter: e || void 0, skip: 0 },
-      n
-    );
-  }, ee = (e, n) => {
-    const a = n.nativeEvent ? n : { nativeEvent: n.nativeEvent || n.originalEvent };
-    e.length === 0 && t.navigatable && (Re.current = !0), te(
-      t.onGroupChange,
-      { group: e },
-      { group: e, skip: 0 },
-      a
-    );
-  }, te = (e, n, a, l, i) => {
-    const u = t.onDataStateChange;
-    if (e) {
-      const d = { ...v(l), ...n, targetEvent: i };
-      e.call(void 0, d);
-    } else
-      u && u.call(void 0, {
-        ...v(l),
-        targetEvent: i || {},
-        dataState: {
-          ...en(),
-          ...a
-        }
-      });
-  }, me = (e, n, a) => {
-    const l = s.current[e], i = l.depth, u = (f) => {
-      do
-        f++;
-      while (f < s.current.length && s.current[f].depth > i);
-      return f;
-    }, d = s.current.splice(e, u(e) - e);
-    s.current.splice(e < n ? u(n - d.length) : n, 0, ...d), s.current.filter((f) => f.declarationIndex >= 0).forEach((f, P) => f.orderIndex = P);
-    const h = s.current[e].locked && s.current[n].locked;
-    Fn(M.current, s.current, h || oe.current), Gn(M.current, s.current, h || oe.current), be.current && (oe.current = !1, be.current = !1);
-    const E = V();
-    if (fe(), t.onColumnReorder) {
-      const f = {
-        target: w.current,
-        columns: E,
-        columnId: l.id,
-        nativeEvent: a
-      };
-      t.onColumnReorder.call(void 0, f);
-    }
-  }, _t = (e, n, a) => {
-    if (t.group === void 0)
-      return;
-    const l = t.group.slice();
-    l.splice(n, 0, ...l.splice(e, 1)), ee(l, a);
-  }, Ke = (e, n, a) => {
-    const l = s.current[e].field;
-    if (!l)
-      return;
-    const i = (t.group || []).slice();
-    i.splice(n, 0, { field: l }), ee(i, a);
-  }, Ut = (e, n) => {
-    const a = g.current.getCurrentGroupsLength;
-    Ke(e, a, n);
-  }, he = () => {
-    let e = 0;
-    if (!C.current.colGroupMain)
-      return;
-    const n = C.current.colGroupMain.children;
-    for (let a = 0; a < n.length; a++) {
-      const l = n[a].width;
-      if (!l)
-        return;
-      e += parseFloat(l.toString());
-    }
-    e = Math.round(e), O.current && O.current.setWidth(e), W.current && W.current.setWidth(e), y.current && (y.current.style.width = e + "px");
-  }, $t = (e, n) => {
-    if (t.onClipboard) {
-      if (!jt() || !e)
-        return;
-      t.onClipboard.call(void 0, {
-        type: e,
-        nativeEvent: n,
-        columns: s.current,
-        dataItemKey: t.dataItemKey || "",
-        ...typeof t.clipboard != "boolean" ? t.clipboard : {}
-      });
-    }
-  }, jt = () => {
-    var i, u, d;
-    if (!Q)
-      return !1;
-    const e = Hn(H()), n = e ? e.matches(".k-table-td") ? e : (i = H()) == null ? void 0 : i.body : (u = H()) == null ? void 0 : u.body, a = n.closest(".k-grid-container"), l = n && ((d = N.current) == null ? void 0 : d.contains(n));
-    return !!(n && l && a);
-  }, qt = (e, n, a, l, i, u) => {
-    he(), oe.current = !0, be.current = !0, t.onColumnResize && t.onColumnResize.call(void 0, {
-      columns: V(),
-      nativeEvent: l,
-      targetColumnId: u,
-      index: e,
-      newWidth: n,
-      oldWidth: a,
-      end: i,
-      target: w.current
-    });
-  }, Jt = (e, n, a, l, i) => {
-    const u = [], d = Yn(
-      u,
-      e,
-      n,
-      { index: a },
-      l !== void 0,
-      i
-    );
-    return { flattedData: u, resolvedGroupsCount: d };
-  }, Xt = (e, n) => {
-    const a = e.filter(
-      (l) => l && l.type && l.type.displayName === "KendoReactGridColumn"
-    );
-    return pn(a, V(), { prevId: 0, idPrefix: n });
-  }, Yt = (e) => e.filter((n) => Q && n && n.media ? window.matchMedia(n.media).matches : n), Qt = (e, n) => {
-    const a = L.getIdPrefix(D), l = Xt(e, a), i = Yt(l);
-    s.current = i, s.current.length === 0 && (s.current = Qn(t.data, t.group, t.expandField, {
-      prevId: 0,
-      idPrefix: a
-    })), Zt(s.current, n), M.current = An(s.current, !0), C.current.columns = s.current, g.current.columns = s.current;
-  }, Zt = (e, n) => {
-    t.selectedField && e.filter((i) => i.field === t.selectedField).forEach((i) => {
-      i.width = i.width || "50px", i.cell = i.cell || Mn, i.headerCell = i.headerCell || nr;
-    });
-    const a = {
-      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 l = 0;
-    t.expandField && t.onExpandChange && t.detail && (e.unshift({
-      ...a,
-      cell: On,
-      field: t.expandField,
-      headerClassName: b(m.hierarchyCell({}))
-    }), l++);
-    for (let i = 0; i < n; i++)
-      e.unshift({
-        ...a,
-        isAccessible: !1,
-        cell: Et,
-        field: "value",
-        locked: t.lockGroups
-      }), l++;
-    e.slice(l).forEach((i) => i.parentIndex >= 0 && (i.parentIndex += l));
-  }, pt = (e) => {
-    const n = s.current.find((l) => l.field === e), a = n && (n.title || n.field);
-    return a === void 0 ? e : a;
-  }, en = () => ({
-    filter: t.filter,
-    sort: t.sort,
-    skip: t.skip,
-    take: t.take !== void 0 ? t.take : t.pageSize,
-    group: t.group
-  }), v = (e) => ({
-    nativeEvent: e && e.nativeEvent,
-    syntheticEvent: e,
-    target: w.current
-  }), ne = () => R.current.filter((e) => e.rowType === "data").map((e) => e.dataItem), Le = () => (ae.current || R.current).filter((e) => e.rowType === "data").map((e) => e.dataItem), tn = () => {
-    var e, n, a;
-    if (U.current && ((e = U.current) == null ? void 0 : e.getElementsByClassName("k-grid-edit-row").length) > 0) {
-      ve.current = !1, (n = document.activeElement) != null && n.closest(".k-grid-edit-row") ? Ce.current = document.activeElement : Ce.current = void 0;
-      const l = Array.from((a = U.current) == null ? void 0 : a.getElementsByClassName("k-grid-edit-row"));
-      l.length > Se.current.length ? le.current = l.filter(
-        (i) => !Se.current.includes(i)
-      )[0] : l.length === 1 && (le.current = l[0], ve.current = !0), Se.current = l;
-    }
-  }, g = r.useRef(), S = r.useRef(), D = r.useRef(), re = r.useRef(), c = r.useRef(), C = r.useRef(), z = r.useRef(null), R = r.useRef([]), ae = r.useRef(), s = r.useRef([]), M = r.useRef([[]]), be = r.useRef(!1), Re = r.useRef(!1), le = r.useRef(), Ce = r.useRef(), ve = r.useRef(!1), oe = r.useRef(!0), ye = r.useRef(), we = r.useRef(0), Ee = r.useRef(), Ie = r.useRef(), Se = r.useRef([]), W = r.useRef(null), O = r.useRef(null), Ve = r.useRef(null), N = r.useRef(null), y = r.useRef(null), _ = r.useRef(null), U = r.useRef(null), ce = r.useRef(null), nn = _n(), ke = vn(), m = ke && ke.uGrid ? ke.uGrid : yn, rn = wn(St), F = En(N);
-  r.useMemo(() => {
-    K.onConstructor({
-      navigatable: !!t.navigatable,
-      contextStateRef: S,
-      navigationStateRef: D,
-      idPrefix: T()
-    });
-  }, []), r.useMemo(() => {
-    var a;
-    (a = c.current) == null || a.reset();
-    const e = t.groupable === !0 || typeof t.groupable == "object" && t.groupable.enabled !== !1, n = Dt();
-    c.current = new n(e || t.rowHeight === void 0 || t.rowHeight === 0);
-  }, [t.scrollable, t.total, t.filter, t.group, t.groupable, t.sort, t.rowHeight]), r.useEffect(() => (t.clipboard && (re.current = new Tn($t), re.current.addEventListeners(H())), () => {
-    re.current && re.current.removeEventListeners(H());
-  }), [t.onClipboard, t.clipboard]), r.useMemo(() => {
-    C.current = new qn(qt);
-  }, [t.onColumnResize]), r.useMemo(() => {
-    g.current = new Jn(me, _t, Ke);
-  }, [t.onColumnReorder, t.onGroupChange, t.group, t.groupable]), r.useEffect(() => (t.columnVirtualization && !window.navigator.userAgent.match(ir) && (ce.current && (ce.current.style.display = "block"), y.current && (y.current.style.display = "block")), he(), ct(Ae()), K.onComponentDidMount({
-    scope: N.current || void 0,
-    contextStateRef: S,
-    navigationStateRef: D
-  }), () => {
-    clearTimeout(Ee.current);
-  }), []), r.useEffect(() => {
-    var e;
-    he(), ct(Ae()), (e = c.current) != null && e.tableTransform && c.current.table && (c.current.table.style.transform = c.current.tableTransform, c.current.tableTransform = ""), tn(), K.onComponentDidUpdate({
-      scope: N.current || void 0,
-      contextStateRef: S,
-      navigationStateRef: D,
-      focusFirst: Re.current,
-      newEditableRow: le.current,
-      singleEditRow: ve.current,
-      lastActiveElement: Ce.current,
-      navigatable: t.navigatable
-    }), Re.current = !1, le.current = void 0;
-  }), r.useEffect(() => {
-    if (Q) {
-      const e = {
-        rootMargin: "0px",
-        threshold: 0.9
-      };
-      z.current = window.IntersectionObserver && new window.IntersectionObserver(Ne, e) || null;
-    }
-  }, [Ne]), r.useEffect(() => {
-    var n;
-    let e;
-    return Q && window.ResizeObserver && (e = new window.ResizeObserver(Tt), e.observe((n = H()) == null ? void 0 : n.body)), () => {
-      e == null || e.disconnect();
-    };
-  }, []);
-  const w = r.useRef(null);
-  r.useImperativeHandle(
-    w,
-    () => ({
-      get element() {
-        return Z();
-      },
-      props: t,
-      get columns() {
-        return V();
-      },
-      scrollIntoView: (e) => {
-        var l;
-        if (!((l = c.current) != null && l.container) || t.scrollable === "none")
-          return;
-        const { rowIndex: n } = e;
-        Ie.current = n;
-        const a = Z();
-        if (z.current && a) {
-          z.current.disconnect();
-          const i = a.querySelector(`[absolute-row-index="${Ie.current}"]`);
-          i ? z.current.observe(i) : se(e);
-        }
-      },
-      fitColumns: (e) => {
-        C.current.dblClickHandler(null, e);
-      }
-    })
-  ), r.useImperativeHandle(xt, () => w.current);
-  let G = t.total || 0;
-  const $ = L.getIdPrefix(D), { size: k = "medium" } = t;
-  let xe = [];
-  Array.isArray(t.data) ? (xe = t.data, G = G || t.data.length) : t.data && (xe = t.data.data, G = G || t.data.total);
-  const an = typeof t.groupable == "object" && t.groupable.footer || "none", j = t.scrollable === "virtual", { resolvedGroupsCount: ln, flattedData: on } = Jt(
-    xe,
-    an,
-    t.skip || 0,
-    t.group,
-    t.expandField
-  );
-  R.current = on;
-  const q = t.groupable === !0 || typeof t.groupable == "object" && t.groupable.enabled !== !1;
-  C.current.resizable = t.resizable || !1, g.current.reorderable = t.reorderable || !1, g.current.groupable = q;
-  const cn = t.selectable && t.selectable.drag ? "none" : void 0;
-  Nt(G, q), Qt(B, ln);
-  const Be = B.map((e) => e && e.type && e.type.displayName === "KendoReactGridToolbar" ? r.cloneElement(e, { ...e.props, ariaControls: T() }) : null), We = B.filter(
-    (e) => e && e.type && e.type.displayName === "KendoReactGridNoRecords"
-  ), _e = B.filter(
-    (e) => e && e.type && e.type.displayName === "KendoReactGridStatusBar"
-  ), x = s.current.filter((e) => e.children.length === 0), Ue = q && /* @__PURE__ */ r.createElement(
-    Bn,
-    {
-      group: t.group || [],
-      groupChange: ee,
-      pressHandler: g.current.pressHandler,
-      dragHandler: g.current.dragHandler,
-      releaseHandler: g.current.releaseHandler,
-      refCallback: g.current.refGroupPanelDiv,
-      resolveTitle: pt,
-      ariaControls: T(),
-      onContextMenu: ge
-    }
-  ), $e = /* @__PURE__ */ r.createElement(
-    Kn,
-    {
-      size: k,
-      columnResize: C.current,
-      staticHeaders: t.scrollable !== "none",
-      scrollableDataElement: () => {
-        var e;
-        return ((e = c.current) == null ? void 0 : e.container) || null;
-      },
-      draggable: t.reorderable || q,
-      ref: O,
-      elemRef: Ve,
-      headerRow: /* @__PURE__ */ r.createElement(
-        Ln,
-        {
-          cells: t.cells,
-          sort: t.sort,
-          sortable: t.sortable,
-          sortChange: Wt,
-          group: t.group || [],
-          groupable: q,
-          groupChange: ee,
-          filter: t.filter,
-          filterable: t.filterable,
-          filterOperators: t.filterOperators || It,
-          filterChange: Pe,
-          columnMenu: t.columnMenu,
-          columnMenuIcon: t.columnMenuIcon,
-          selectionChange: Pt,
-          columns: s.current,
-          columnResize: C.current,
-          pressHandler: g.current.pressHandler,
-          dragHandler: g.current.dragHandler,
-          releaseHandler: g.current.releaseHandler,
-          columnsMap: M.current,
-          cellRender: t.headerCellRender,
-          isRtl: F === "rtl",
-          dragClue: g.current.dragClueRef,
-          headerRef: Ve,
-          containerRef: _,
-          navigatable: !!t.navigatable,
-          columnGroupChange: Ut
-        }
-      ),
-      filterRow: t.filterable && /* @__PURE__ */ r.createElement(
-        Vn,
-        {
-          cells: t.cells,
-          size: k,
-          columns: s.current,
-          filter: t.filter,
-          filterOperators: t.filterOperators || It,
-          filterChange: Pe,
-          sort: t.sort,
-          cellRender: t.filterCellRender,
-          isRtl: F === "rtl",
-          navigatable: !!t.navigatable,
-          ariaRowIndex: M.current.length + 1
-        }
-      ) || void 0,
-      cols: x.map((e, n) => /* @__PURE__ */ r.createElement("col", { key: n.toString(), width: De(e) }))
-    }
-  ), dn = c.current && c.current.container && c.current.container.scrollLeft || 0, un = parseFloat(((t.style || {}).width || "").toString()), { colSpans: sn, hiddenColumns: fn } = Dn({
-    enabled: t.columnVirtualization,
-    columns: x,
-    tableViewPortWidth: un,
-    scrollLeft: dn
-  }), gn = (e, n, a, l) => {
-    let i = !1;
-    const u = t.selectedField ? wt(t.selectedField, e.dataItem) : void 0;
-    return {
-      row: x.map((d, h) => {
-        if (fn[h])
-          return null;
-        const E = d.id ? d.id : h, f = b(m.contentSticky({ locked: d.locked }), d.className), P = d.left !== void 0 ? F !== "rtl" ? { left: d.left, right: d.right } : { left: d.right, right: d.left } : {};
-        let X = !1;
-        if (d.editable && t.editField) {
-          const I = wt(t.editField, e.dataItem);
-          I && (I === !0 || I === d.field) && (i = !0, X = !0);
-        }
-        const A = d.cell || X && Pn || er, Te = t.expandField && t.detail && d.field === t.expandField;
-        return /* @__PURE__ */ r.createElement(
-          A,
-          {
-            onContextMenu: ge,
-            key: E,
-            locked: t.lockGroups,
-            id: L.generateNavigatableId(
-              `${n}-${String(h)}`,
-              $,
-              Te || e.rowType === "groupHeader" || e.rowType === "groupFooter" || d.field === "value" ? "nodata" : "cell"
-            ),
-            colSpan: sn[h],
-            dataItem: e.dataItem,
-            field: d.field,
-            editor: d.editor,
-            format: d.format,
-            className: f,
-            render: t.cellRender,
-            cells: Zn(t.cells, d.cells),
-            onChange: Mt,
-            selectionChange: t.onSelectionChange ? (I) => {
-              Ot({
-                event: I,
-                dataItem: e.dataItem,
-                dataIndex: a,
-                columnIndex: h
-              });
-            } : void 0,
-            columnIndex: h,
-            columnsCount: x.length,
-            rowType: e.rowType,
-            level: e.level,
-            expanded: e.expanded,
-            dataIndex: e.dataIndex,
-            style: P,
-            ariaColumnIndex: d.ariaColumnIndex,
-            isSelected: Array.isArray(u) && u.indexOf(h) > -1,
-            isSorted: !!Ct(d.field, t.sort),
-            isAlt: l
-          }
-        );
-      }),
-      isInEdit: i,
-      isSelected: typeof u == "boolean" && u
-    };
-  };
-  let je = 0;
-  if (j && c.current)
-    for (let e = 0; e < c.current.topCacheCount + c.current.attendedSkip - (t.skip || 0); ) {
-      const n = R.current.shift();
-      if (n)
-        R.current.push(n), je++, n.rowType === "groupHeader" && e--;
-      else
-        break;
-      e++;
-    }
-  const qe = (e) => e >= R.current.length - je;
-  let Je = ((nt = c.current) == null ? void 0 : nt.realSkip) || 0;
-  const ie = [];
-  let He = !1;
-  const Xe = M.current.length + (t.filterable ? 1 : 0) + 1;
-  let J = 0;
-  if (R.current.length) {
-    let e = -1, n = 0;
-    (ae.current || R.current).forEach((a, l) => {
-      var P, X;
-      a.rowType === "data" && (Je++, e++);
-      const i = Je % 2 === 0, u = t.dataItemKey && In(t.dataItemKey)(a.dataItem), d = l + (((P = c.current) == null ? void 0 : P.realSkip) || 0), h = u || "ai" + d, E = h + "_1", f = gn(a, h, e, i);
-      if (J = d + Xe + n, ie.push(
-        /* @__PURE__ */ r.createElement(
-          tr,
-          {
-            key: h,
-            dataItem: a.dataItem,
-            isAltRow: i,
-            isInEdit: f.isInEdit,
-            rowType: a.rowType,
-            isHidden: qe(l),
-            onClick: (A) => At(A, a),
-            onDoubleClick: (A) => zt(A, a),
-            selectedField: t.selectedField,
-            rowHeight: t.rowHeight,
-            render: t.rowRender,
-            ariaRowIndex: J,
-            absoluteRowIndex: d,
-            dataIndex: (X = c.current) != null && X.scrollableVirtual && !t.groupable ? d : e,
-            isSelected: f.isSelected
-          },
-          f.row
-        )
-      ), t.detail && a.rowType === "data" && a.expanded) {
-        const A = x.length - (t.expandField ? 1 : 0) - (t.group ? t.group.length : 0) || 1;
-        n++, J = d + Xe + n, ie.push(
-          /* @__PURE__ */ r.createElement(
-            "tr",
-            {
-              key: E,
-              className: b(m.detailTr({ isAlt: i })),
-              style: {
-                visibility: qe(l) ? "hidden" : "",
-                height: t.detailRowHeight
-              },
-              role: "row",
-              "aria-rowindex": J
-            },
-            t.group && t.group.map((Te, I) => {
-              var ot;
-              const Y = (ot = f == null ? void 0 : f.row[I]) == null ? void 0 : ot.props.style, bn = Y ? F !== "rtl" ? { left: Y.left, right: Y.right } : { left: Y.right, right: Y.left } : {};
-              return /* @__PURE__ */ r.createElement(
-                Et,
-                {
-                  id: "",
-                  dataIndex: a.dataIndex,
-                  field: Te.field,
-                  dataItem: a.dataItem,
-                  key: I,
-                  style: bn,
-                  ariaColumnIndex: 1 + I,
-                  isSelected: !1,
-                  locked: t.lockGroups,
-                  isRtl: F === "rtl",
-                  cells: t.cells
-                }
-              );
-            }),
-            t.expandField && /* @__PURE__ */ r.createElement(
-              cr,
-              {
-                id: L.generateNavigatableId(`${E}-dhcell`, $)
-              }
-            ),
-            /* @__PURE__ */ r.createElement(
-              or,
-              {
-                onContextMenu: ge,
-                dataItem: a.dataItem,
-                dataIndex: a.dataIndex,
-                colSpan: A,
-                ariaColIndex: 2 + (t.group ? t.group.length : 0),
-                detail: t.detail,
-                id: L.generateNavigatableId(`${E}-dcell`, $)
-              }
-            )
-          )
-        );
-      }
-    });
-  } else
-    He = !0;
-  const mn = () => {
-    const e = O.current;
-    return e && e.table() && e.table().clientWidth;
-  }, Ye = () => /* @__PURE__ */ r.createElement("div", { key: "no-records", className: b(m.noRecords({})), style: { width: mn() } }, /* @__PURE__ */ r.createElement(
-    "div",
-    {
-      className: b(m.noRecordsTemplate({})),
-      [zn]: L.generateNavigatableId("no-records", $)
-    },
-    We.length ? We : /* @__PURE__ */ r.createElement(rr, null)
-  )), Qe = {
-    size: k,
-    onPageChange: Bt,
-    total: G,
-    dir: F,
-    skip: ((rt = c.current) == null ? void 0 : rt.propsSkip) || 0,
-    take: (t.take !== void 0 ? t.take : t.pageSize) || 10,
-    messagesMap: Un,
-    ...lr(t.pageable || {})
-  }, Ze = t.pager ? /* @__PURE__ */ r.createElement(t.pager, { ...Qe }) : /* @__PURE__ */ r.createElement(Nn, { className: b(m.pager({})), ...Qe }), hn = (e, n) => /* @__PURE__ */ r.createElement("col", { key: n.toString(), width: De(e) }), pe = (at = t.cells) != null && at.footerCell || s.current.some((e) => {
-    var n;
-    return !!(e.footerCell || (n = e.cells) != null && n.footerCell);
-  }) ? /* @__PURE__ */ r.createElement(
-    Wn,
-    {
-      size: k,
-      columnResize: C.current,
-      staticHeaders: t.scrollable !== "none",
-      ref: W,
-      row: /* @__PURE__ */ r.createElement(
-        ar,
-        {
-          cells: t.cells,
-          idPrefix: $,
-          columns: s.current,
-          isRtl: F === "rtl",
-          ariaRowIndex: J + 1
-        }
-      ),
-      cols: x.map(hn)
-    }
-  ) : null, et = /* @__PURE__ */ r.createElement(
-    "colgroup",
-    {
-      ref: (e) => {
-        C.current.colGroupMain = e;
-      }
-    },
-    x.map((e, n) => /* @__PURE__ */ r.createElement(
-      "col",
-      {
-        key: n.toString(),
-        className: Ct(e.field, t.sort) ? b(m.sorted({})) : void 0,
-        width: De(e)
-      }
-    ))
-  ), tt = g.current.reorderable || g.current.groupable;
-  if (t.scrollable === "none")
-    return /* @__PURE__ */ r.createElement(dt.Provider, { value: S.current }, /* @__PURE__ */ r.createElement(
-      "div",
-      {
-        id: t.id || ue,
-        style: t.style,
-        className: b(m.wrapper({ size: k }), t.className),
-        ref: N,
-        "aria-label": t.ariaLabel,
-        onKeyDown: ze,
-        onFocus: Me,
-        ...ut
-      },
-      Be,
-      Ue,
-      /* @__PURE__ */ r.createElement(
-        st,
-        {
-          selectable: t.selectable,
-          onRelease: Oe,
-          childRef: (e) => {
-            y.current = e, ce.current = e;
-          }
-        },
-        /* @__PURE__ */ r.createElement("table", { ref: ce, className: b(m.table({ size: k })) }, et, $e, /* @__PURE__ */ r.createElement(
-          "tbody",
-          {
-            role: "rowgroup",
-            className: b(m.tbody({})),
-            ...ft
-          },
-          ie
-        ), pe)
-      ),
-      He && Ye(),
-      tt && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(gt, { ref: g.current.refDropElementClue }), /* @__PURE__ */ r.createElement(mt, { ref: g.current.refDragElementClue }))
-    ), _e, t.pageable && Ze);
-  let de = t.style || {};
-  return j && (de.height || (de = Object.assign({}, de, { height: "450px" }))), /* @__PURE__ */ r.createElement(dt.Provider, { value: S.current }, /* @__PURE__ */ r.createElement(
-    "div",
-    {
-      id: t.id || ue,
-      style: de,
-      className: b(
-        m.wrapper({
-          size: k,
-          virtual: j
-        }),
-        t.className
-      ),
-      ref: N,
-      "aria-label": t.ariaLabel,
-      onKeyDown: ze,
-      onFocus: Me,
-      ...ut
-    },
-    Be,
-    Ue,
-    /* @__PURE__ */ r.createElement(
-      "div",
-      {
-        className: b(m.ariaRoot({})),
-        role: "grid",
-        "aria-colcount": x.length,
-        "aria-rowcount": G,
-        id: T(),
-        "aria-label": nn.toLanguageString(bt, $n[bt])
-      },
-      $e,
-      /* @__PURE__ */ r.createElement("div", { className: b(m.container({})), role: "presentation" }, /* @__PURE__ */ r.createElement(
-        "div",
-        {
-          ref: _,
-          className: b(m.content({})),
-          onScroll: Ft,
-          role: "presentation"
-        },
-        /* @__PURE__ */ r.createElement("div", { className: b(m.tableWrap({})), role: "presentation" }, /* @__PURE__ */ r.createElement(
-          st,
-          {
-            selectable: t.selectable,
-            onRelease: Oe,
-            childRef: (e) => {
-              y.current = e;
-            }
-          },
-          /* @__PURE__ */ r.createElement(
-            "table",
-            {
-              ref: y,
-              className: b(
-                m.table({
-                  size: k
-                })
-              ),
-              role: "presentation",
-              style: { userSelect: cn }
-            },
-            et,
-            /* @__PURE__ */ r.createElement(
-              "tbody",
-              {
-                className: b(m.tbody({})),
-                ref: U,
-                role: "rowgroup",
-                ...ft
-              },
-              ie
-            )
-          )
-        ), He && Ye()),
-        j && /* @__PURE__ */ r.createElement("div", { className: b(m.heightContainer({})), role: "presentation" }, /* @__PURE__ */ r.createElement(
-          "div",
-          {
-            style: j ? { height: ((lt = c.current) == null ? void 0 : lt.containerHeight) + "px" } : {}
-          }
-        ))
-      )),
-      pe,
-      tt && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(gt, { ref: g.current.refDropElementClue }), /* @__PURE__ */ r.createElement(mt, { ref: g.current.refDragElementClue })),
-      rn && /* @__PURE__ */ r.createElement(Sn, null)
-    ),
-    _e,
-    t.pageable && Ze
-  ));
-}), dr = {
-  data: o.oneOfType([
-    o.array,
-    o.shape({
-      data: o.array,
-      total: o.number
+import * as o from "react";
+import e from "prop-types";
+import { isClient as m } from "./utils/index.mjs";
+import { GridClientContextReader as u } from "./GridClientContextReader.mjs";
+import { GridComponent as t } from "./GridComponent.mjs";
+import { GridClientStateProvider as p } from "./GridState.mjs";
+import { useCustomComponent as f } from "@progress/kendo-react-common";
+const a = o.forwardRef((n, r) => {
+  const { isPaid: l } = {
+    isPaid: !0
+  }, [i] = f(l ? p : o.Fragment);
+  return m() ? /* @__PURE__ */ o.createElement(i, { ...n }, /* @__PURE__ */ o.createElement(u, { id: n.id }, /* @__PURE__ */ o.createElement(t, { ref: r, ...n }))) : /* @__PURE__ */ o.createElement(t, { ref: r, ...n });
+}), s = {
+  data: e.oneOfType([
+    e.array,
+    e.shape({
+      data: e.array,
+      total: e.number
     })
   ]),
-  sortable: o.oneOfType([
-    o.bool,
-    o.shape({
-      mode: o.oneOf(["single", "multiple"]),
-      allowUnsort: o.bool
+  sortable: e.oneOfType([
+    e.bool,
+    e.shape({
+      mode: e.oneOf(["single", "multiple"]),
+      allowUnsort: e.bool
     })
   ]),
-  onSortChange: o.func,
-  sort: o.array,
-  filterable: o.bool,
-  filter: o.any,
-  onFilterChange: o.func,
-  pageable: o.oneOfType([
-    o.bool,
-    o.shape({
-      buttonCount: o.number,
-      responsive: o.bool,
-      info: o.bool,
-      type: o.oneOf(["numeric", "input"]),
-      pageSizes: o.oneOfType([
-        o.bool,
-        o.arrayOf(o.oneOfType([o.string, o.number]))
+  onSortChange: e.func,
+  sort: e.array,
+  filterable: e.bool,
+  filter: e.any,
+  onFilterChange: e.func,
+  pageable: e.oneOfType([
+    e.bool,
+    e.shape({
+      buttonCount: e.number,
+      responsive: e.bool,
+      info: e.bool,
+      type: e.oneOf(["numeric", "input"]),
+      pageSizes: e.oneOfType([
+        e.bool,
+        e.arrayOf(e.oneOfType([e.string, e.number]))
       ]),
-      previousNext: o.bool
+      previousNext: e.bool
     })
   ]),
-  pageSize: o.number,
-  onPageChange: o.func,
-  total: o.number,
-  skip: o.number,
-  take: o.number,
-  fixedScroll: o.bool,
-  onExpandChange: o.func,
-  expandField: o.string,
-  selectedField: o.string,
-  onSelectionChange: o.func,
-  onHeaderSelectionChange: o.func,
-  resizable: o.bool,
-  reorderable: o.bool,
-  group: o.any,
-  groupable: o.oneOfType([
-    o.bool,
-    o.shape({
-      enabled: o.bool,
-      footer: o.oneOf(["always", "visible", "none"])
+  pageSize: e.number,
+  onPageChange: e.func,
+  total: e.number,
+  skip: e.number,
+  take: e.number,
+  fixedScroll: e.bool,
+  onExpandChange: e.func,
+  expandField: e.string,
+  selectedField: e.string,
+  onSelectionChange: e.func,
+  onHeaderSelectionChange: e.func,
+  resizable: e.bool,
+  reorderable: e.bool,
+  group: e.any,
+  groupable: e.oneOfType([
+    e.bool,
+    e.shape({
+      enabled: e.bool,
+      footer: e.oneOf(["always", "visible", "none"])
     })
   ]),
-  onGroupChange: o.func,
-  onRowClick: o.func,
-  onRowDoubleClick: o.func,
-  onItemChange: o.func,
-  editField: o.string,
-  scrollable: o.oneOf(["none", "scrollable", "virtual"]),
-  rowHeight: o.number,
-  detailRowHeight: o.number,
-  detail: o.any,
-  style: o.object,
-  onDataStateChange: o.func,
-  onColumnResize: o.func,
-  onColumnReorder: o.func,
-  dataItemKey: o.string,
-  navigatable: o.oneOfType([
-    o.bool,
-    o.shape({
-      mode: o.oneOf(["incell", "inline", "popup"])
+  onGroupChange: e.func,
+  onRowClick: e.func,
+  onRowDoubleClick: e.func,
+  onItemChange: e.func,
+  editField: e.string,
+  scrollable: e.oneOf(["none", "scrollable", "virtual"]),
+  rowHeight: e.number,
+  detailRowHeight: e.number,
+  detail: e.any,
+  style: e.object,
+  onDataStateChange: e.func,
+  onColumnResize: e.func,
+  onColumnReorder: e.func,
+  dataItemKey: e.string,
+  navigatable: e.oneOfType([
+    e.bool,
+    e.shape({
+      mode: e.oneOf(["incell", "inline", "popup"])
     })
   ]),
-  size: o.oneOf(["small", "medium"])
+  size: e.oneOf(["small", "medium"])
 };
-kt.displayName = "KendoReactGrid";
-kt.propTypes = dr;
+a.displayName = "KendoReactGrid";
+a.propTypes = s;
 export {
-  kt as Grid
+  a as Grid
 };