@progress/kendo-react-grid 7.4.0-develop.8 → 7.4.0

package/header/HeaderRow.mjs

@@ -6,156 +6,157 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as o from "react";
-import { normalize as z } from "../interfaces/GridSortSettings.mjs";
-import { ColumnDraggable as H } from "../drag/ColumnDraggable.mjs";
-import { GridHeaderCell as I } from "./GridHeaderCell.mjs";
-import { Keys as m, classNames as w, IconWrap as D } from "@progress/kendo-react-common";
-import { ColumnResizer as E, HeaderThElement as v } from "@progress/kendo-react-data-tools";
-import { provideLocalizationService as M, registerForLocalization as N } from "@progress/kendo-react-intl";
-import { sortAriaLabel as C, messages as K } from "../messages/index.mjs";
-import { sortAscSmallIcon as L, sortDescSmallIcon as A } from "@progress/kendo-svg-icons";
-import { resolveCells as G } from "../utils/index.mjs";
-const F = {
+import * as r from "react";
+import { normalize as G } from "../interfaces/GridSortSettings.mjs";
+import { ColumnDraggable as L } from "../drag/ColumnDraggable.mjs";
+import { GridHeaderCell as O } from "./GridHeaderCell.mjs";
+import { classNames as P, Keys as u, IconWrap as V } from "@progress/kendo-react-common";
+import { ColumnResizer as W, HeaderThElement as q } from "@progress/kendo-react-data-tools";
+import { useLocalization as B } from "@progress/kendo-react-intl";
+import { sortAriaLabel as z, messages as T } from "../messages/index.mjs";
+import { sortAscSmallIcon as U, sortDescSmallIcon as j } from "@progress/kendo-svg-icons";
+import { resolveCells as J } from "../utils/index.mjs";
+const Q = {
   true: { asc: "desc", desc: "", "": "asc" },
   false: { asc: "desc", desc: "asc", "": "asc" }
-}, P = {
+}, X = {
   none: "none",
   asc: "ascending",
   desc: "descending"
-};
-class O extends o.Component {
-  constructor(t) {
-    super(t), this.serviceIndex = 0, this.index = -1, this.cellKeyDown = (s, l) => {
-      if (s.isDefaultPrevented())
-        return;
-      const { keyCode: e, metaKey: i, ctrlKey: a } = s;
-      if (this.props.sortable && l.sortable && s.keyCode === m.enter && this.cellClick(s, l), i && e === m.enter || a && e === m.space) {
-        const n = this.props.columns.findIndex((c) => c.field === l.field);
-        this.props.columnGroupChange && this.props.columnGroupChange(n, s);
+}, ne = (e) => {
+  const [H, b] = r.useState(), D = B(), f = r.useRef(null);
+  let E = 0, M = -1;
+  const k = (t, a) => {
+    if (t.preventDefault(), !e.sortChange)
+      return;
+    const { allowUnsort: l, mode: c } = G(e.sortable || !1, a.sortable || !1), o = (e.sort || []).filter((i) => i.field === a.field)[0], d = Q[l][o && o.dir || ""], s = c === "single" ? [] : (e.sort || []).filter((i) => i.field !== a.field);
+    d !== "" && a.field && s.push({ field: a.field, dir: d }), e.sortChange(s, t);
+  }, x = (t, a) => {
+    if (t.isDefaultPrevented())
+      return;
+    const { keyCode: l, metaKey: c, ctrlKey: o, altKey: d } = t, s = e.sortable && a.sortable, i = t.target;
+    if (s && t.keyCode === u.enter && i.className.indexOf("k-table-th") !== -1 && k(t, a), e.navigatable) {
+      if (e.groupable && (c && l === u.enter || o && l === u.space)) {
+        t.preventDefault();
+        const m = e.columns.findIndex((g) => g.field === a.field);
+        e.columnGroupChange && e.columnGroupChange(m, t);
       }
-    }, this.cells = (s) => s.map((l) => {
-      const e = this.props.columns[l], i = this.props.sortable && e.sortable, a = this.props.sort ? this.props.sort.findIndex((r) => r.field === e.field) : -1, p = a >= 0 && this.props.sort[a].dir || "none", n = e.columnMenu === null ? null : e.columnMenu || this.props.columnMenu, c = w({
-        "k-first": e.kFirst,
-        "k-filterable": !!n,
-        "k-table-th": !0,
-        "k-header": !0,
-        "k-grid-header-sticky": e.locked,
-        "k-sorted": this.props.sort && this.props.sort.some((r) => r.field === e.field)
-      }, e.headerClassName);
-      e.locked === !1 && (e.left = 0);
-      const k = e.left !== void 0 ? this.props.isRtl ? { left: e.right, right: e.left } : { left: e.left, right: e.right } : {}, b = M(this).toLanguageString(C, K[C]), y = e.isAccessible ? {
-        ariaSort: P[p],
-        role: "columnheader",
-        ariaColumnIndex: e.ariaColumnIndex,
-        ariaSelected: !1,
-        ariaDescription: i ? b : ""
-      } : {
-        role: "presentation"
-      }, d = e.declarationIndex >= 0 ? ++this.index : --this.serviceIndex, R = e.headerCell ? e.headerCell : I, f = /* @__PURE__ */ o.createElement(
-        R,
-        {
-          key: 1,
-          field: e.field,
-          onClick: i && ((r) => this.cellClick(r, e)) || void 0,
-          selectionChange: this.props.selectionChange,
-          title: e.title,
-          selectionValue: e.headerSelectionValue,
-          render: this.props.cellRender,
-          children: this.sortIcon(a),
-          columnMenuWrapperProps: {
-            column: {
-              field: e.field,
-              title: e.title,
-              locked: e.locked,
-              filter: e.filter,
-              id: e.id
-            },
-            sortable: i && this.props.sortable,
-            sort: this.props.sort,
-            onSortChange: this.props.sortChange,
-            filter: this.props.filter,
-            filterable: this.props.filterable && e.filterable,
-            filterOperators: this.props.filterOperators,
-            onFilterChange: this.props.filterChange,
-            group: this.props.group,
-            groupable: this.props.groupable,
-            onGroupChange: this.props.groupChange,
-            columnMenu: n
-          }
+      d && l === u.down && (t.preventDefault(), b(a.field), f.current = i);
+    }
+  }, I = () => {
+    b(void 0), f.current && f.current.getAttribute("tabindex") !== "-1" && f.current.focus();
+  }, v = (t) => e.sort ? t >= 0 && [
+    /* @__PURE__ */ r.createElement("span", { key: 1, className: "k-sort-icon" }, /* @__PURE__ */ r.createElement(
+      V,
+      {
+        name: "sort-" + e.sort[t].dir + "-small",
+        icon: e.sort[t].dir === "asc" ? U : j
+      }
+    )),
+    e.sort.length > 1 && /* @__PURE__ */ r.createElement("span", { key: 2, className: "k-sort-icon" }, /* @__PURE__ */ r.createElement("span", { className: "k-sort-order" }, t + 1))
+  ] : null, y = (t) => t.map((a) => {
+    const l = e.columns[a], c = e.sortable && l.sortable, o = e.sort ? e.sort.findIndex((n) => n.field === l.field) : -1, d = o >= 0 && e.sort[o].dir || "none", s = l.columnMenu === null ? null : l.columnMenu || e.columnMenu, i = P({
+      "k-first": l.kFirst,
+      "k-filterable": !!s,
+      "k-table-th": !0,
+      "k-header": !0,
+      "k-grid-header-sticky": l.locked,
+      "k-sorted": e.sort && e.sort.some((n) => n.field === l.field)
+    }, l.headerClassName);
+    l.locked === !1 && (l.left = 0);
+    const m = l.left !== void 0 ? e.isRtl ? { left: l.right, right: l.left } : { left: l.left, right: l.right } : {}, g = D.toLanguageString(z, T[z]), N = l.isAccessible ? {
+      ariaSort: X[d],
+      role: "columnheader",
+      ariaColumnIndex: l.ariaColumnIndex,
+      ariaSelected: !1,
+      ariaDescription: c ? g : ""
+    } : {
+      role: "presentation"
+    }, h = l.declarationIndex >= 0 ? ++M : --E, K = l.headerCell ? l.headerCell : O, R = /* @__PURE__ */ r.createElement(
+      K,
+      {
+        key: 1,
+        field: l.field,
+        onClick: c && ((n) => k(n, l)) || void 0,
+        selectionChange: e.selectionChange,
+        title: l.title,
+        selectionValue: l.headerSelectionValue,
+        render: e.cellRender,
+        children: v(o),
+        columnMenuWrapperProps: {
+          column: {
+            field: l.field,
+            title: l.title,
+            locked: l.locked,
+            filter: l.filter,
+            id: l.id
+          },
+          sortable: c && e.sortable,
+          sort: e.sort,
+          onSortChange: e.sortChange,
+          filter: e.filter,
+          filterable: e.filterable && l.filterable,
+          filterOperators: e.filterOperators,
+          onFilterChange: e.filterChange,
+          show: H === l.field ? !0 : void 0,
+          onCloseMenu: I,
+          navigatable: e.navigatable,
+          group: e.group,
+          groupable: e.groupable,
+          onGroupChange: e.groupChange,
+          columnMenu: s
         }
-      ), u = {
-        ...y,
-        key: d,
-        colSpan: e.colSpan,
-        rowSpan: e.rowSpan,
-        className: c,
-        style: k,
-        columnId: e.id,
-        navigatable: e.navigatable,
-        onKeyDown: (r) => this.cellKeyDown(r, e),
-        role: "columnheader"
-      }, g = [
-        f,
-        this.props.columnResize && this.props.columnResize.resizable && e.resizable && /* @__PURE__ */ o.createElement(
-          E,
-          {
-            key: 2,
-            resize: (r, S, x) => this.props.columnResize && this.props.columnResize.dragHandler(r, e, S, x),
-            autofit: (r) => this.props.columnResize && this.props.columnResize.dblClickHandler(r, [e.id])
-          }
-        )
-      ], h = G(this.props.cells, e.cells);
-      if (h && h.headerCell) {
-        const r = h.headerCell;
-        return /* @__PURE__ */ o.createElement(r, { ...f.props, key: d, thProps: u, index: l }, g);
       }
-      return /* @__PURE__ */ o.createElement(
-        v,
+    ), S = {
+      ...N,
+      key: h,
+      colSpan: l.colSpan,
+      rowSpan: l.rowSpan,
+      className: i,
+      style: m,
+      columnId: l.id,
+      navigatable: l.navigatable,
+      onKeyDown: (n) => x(n, l),
+      role: "columnheader"
+    }, w = [
+      R,
+      e.columnResize && e.columnResize.resizable && l.resizable && /* @__PURE__ */ r.createElement(
+        W,
         {
-          ...u,
-          key: d
-        },
-        g
-      );
-    }), this.cellClick = this.cellClick.bind(this);
-  }
-  cellClick(t, s) {
-    if (t.preventDefault(), !this.props.sortChange)
-      return;
-    const { allowUnsort: l, mode: e } = z(this.props.sortable || !1, s.sortable || !1), i = (this.props.sort || []).filter((n) => n.field === s.field)[0], a = F[l][i && i.dir || ""], p = e === "single" ? [] : (this.props.sort || []).filter((n) => n.field !== s.field);
-    a !== "" && s.field && p.push({ field: s.field, dir: a }), this.props.sortChange(p, t);
-  }
-  sortIcon(t) {
-    return this.props.sort ? t >= 0 && [
-      /* @__PURE__ */ o.createElement("span", { key: 1, className: "k-sort-icon" }, /* @__PURE__ */ o.createElement(
-        D,
-        {
-          name: "sort-" + this.props.sort[t].dir + "-small",
-          icon: this.props.sort[t].dir === "asc" ? L : A
+          key: 2,
+          resize: (n, A, F) => e.columnResize && e.columnResize.dragHandler(n, l, A, F),
+          autofit: (n) => e.columnResize && e.columnResize.dblClickHandler(n, [l.id])
         }
-      )),
-      this.props.sort.length > 1 && /* @__PURE__ */ o.createElement("span", { key: 2, className: "k-sort-icon" }, /* @__PURE__ */ o.createElement("span", { className: "k-sort-order" }, t + 1))
-    ] : null;
-  }
-  render() {
-    return this.serviceIndex = 0, this.index = -1, this.props.columnsMap.map((t, s) => this.props.pressHandler && /* @__PURE__ */ o.createElement(
-      H,
+      )
+    ], C = J(e.cells, l.cells);
+    if (C && C.headerCell) {
+      const n = C.headerCell;
+      return /* @__PURE__ */ r.createElement(n, { ...R.props, key: h, thProps: S, index: a }, w);
+    }
+    return /* @__PURE__ */ r.createElement(
+      q,
       {
-        key: s,
-        pressHandler: this.props.pressHandler,
-        dragHandler: this.props.dragHandler,
-        releaseHandler: this.props.releaseHandler,
-        ariaRowIndex: s + 1,
-        dragClue: this.props.dragClue,
-        headerRef: this.props.headerRef,
-        containerRef: this.props.containerRef
+        ...S,
+        key: h
       },
-      this.cells(t)
-    ) || /* @__PURE__ */ o.createElement("tr", { key: s, className: "k-table-row", role: "row", "aria-rowindex": s + 1 }, this.cells(t)));
-  }
-}
-N(O);
+      w
+    );
+  });
+  return e.columnsMap.map((t, a) => e.pressHandler && /* @__PURE__ */ r.createElement(
+    L,
+    {
+      key: a,
+      pressHandler: e.pressHandler,
+      dragHandler: e.dragHandler,
+      releaseHandler: e.releaseHandler,
+      ariaRowIndex: a + 1,
+      dragClue: e.dragClue,
+      headerRef: e.headerRef,
+      containerRef: e.containerRef
+    },
+    y(t)
+  ) || /* @__PURE__ */ r.createElement("tr", { key: a, className: "k-table-row", role: "row", "aria-rowindex": a + 1 }, y(t)));
+};
 export {
-  O as HeaderRow
+  ne as HeaderRow
 };

package/index.d.mts

@@ -70,13 +70,6 @@ export declare const cellInputChange: (value: any, e: React_2.SyntheticEvent<any
  */
 export declare const cellOperatorChange: (event: any, currentValue: any, onChange: Function) => void;
 
-/**
- * @hidden
- */
-declare interface ColumnMenuStateProps {
-    show: boolean;
-}
-
 /**
  * @hidden
  */
@@ -1008,12 +1001,7 @@ declare interface GridColumnMenuGroupProps extends GridColumnMenuGroupBaseProps
 /**
  * The GridColumnMenuItem component that is used inside the Grid ColumnMenu.
  */
-export declare class GridColumnMenuItem extends React_2.Component<GridColumnMenuItemProps, {}> {
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+export declare const GridColumnMenuItem: (props: GridColumnMenuItemProps) => JSX_2.Element;
 
 /**
  * The GridColumnMenuItemContent that will be used inside the Grid ColumnMenu.
@@ -1081,6 +1069,8 @@ declare interface GridColumnMenuItemProps {
  * The props which the ColumnMenu passes to its children.
  */
 export declare interface GridColumnMenuProps extends GridColumnMenuFilterBaseProps, GridColumnMenuSortBaseProps, GridColumnMenuGroupBaseProps {
+    navigatable?: boolean;
+    show?: boolean;
 }
 
 /**
@@ -1188,31 +1178,7 @@ declare interface GridColumnMenuSortProps extends GridColumnMenuSortBaseProps {
 /**
  * The GridColumnMenuWrapper component.
  */
-export declare class GridColumnMenuWrapper extends React_2.Component<GridColumnMenuWrapperProps, ColumnMenuStateProps> {
-    /** @hidden */
-    readonly state: ColumnMenuStateProps;
-    /** @hidden */
-    _anchor: HTMLAnchorElement | null;
-    /** @hidden */
-    _content: HTMLDivElement | null;
-    /** @hidden */
-    blurTimeout: any;
-    /** @hidden */
-    willBlur: boolean;
-    /** @hidden */
-    blur: () => void;
-    /** @hidden */
-    focus: () => void;
-    /** @hidden */
-    anchorClick: (event: React_2.MouseEvent<HTMLAnchorElement>) => void;
-    /** @hidden */
-    closeMenu: () => void;
-    /** @hidden */
-    onAnchorMouseDown: (event: React_2.MouseEvent<HTMLAnchorElement>) => void;
-    /** @hidden */
-    onAnchorKeyDown: (event: React_2.KeyboardEvent<HTMLAnchorElement>) => void;
-    render(): JSX_2.Element;
-}
+export declare const GridColumnMenuWrapper: (props: GridColumnMenuWrapperProps) => JSX_2.Element;
 
 /**
  * The props of the GridColumnMenuWrapper component.

package/index.d.ts

@@ -70,13 +70,6 @@ export declare const cellInputChange: (value: any, e: React_2.SyntheticEvent<any
  */
 export declare const cellOperatorChange: (event: any, currentValue: any, onChange: Function) => void;
 
-/**
- * @hidden
- */
-declare interface ColumnMenuStateProps {
-    show: boolean;
-}
-
 /**
  * @hidden
  */
@@ -1008,12 +1001,7 @@ declare interface GridColumnMenuGroupProps extends GridColumnMenuGroupBaseProps
 /**
  * The GridColumnMenuItem component that is used inside the Grid ColumnMenu.
  */
-export declare class GridColumnMenuItem extends React_2.Component<GridColumnMenuItemProps, {}> {
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+export declare const GridColumnMenuItem: (props: GridColumnMenuItemProps) => JSX_2.Element;
 
 /**
  * The GridColumnMenuItemContent that will be used inside the Grid ColumnMenu.
@@ -1081,6 +1069,8 @@ declare interface GridColumnMenuItemProps {
  * The props which the ColumnMenu passes to its children.
  */
 export declare interface GridColumnMenuProps extends GridColumnMenuFilterBaseProps, GridColumnMenuSortBaseProps, GridColumnMenuGroupBaseProps {
+    navigatable?: boolean;
+    show?: boolean;
 }
 
 /**
@@ -1188,31 +1178,7 @@ declare interface GridColumnMenuSortProps extends GridColumnMenuSortBaseProps {
 /**
  * The GridColumnMenuWrapper component.
  */
-export declare class GridColumnMenuWrapper extends React_2.Component<GridColumnMenuWrapperProps, ColumnMenuStateProps> {
-    /** @hidden */
-    readonly state: ColumnMenuStateProps;
-    /** @hidden */
-    _anchor: HTMLAnchorElement | null;
-    /** @hidden */
-    _content: HTMLDivElement | null;
-    /** @hidden */
-    blurTimeout: any;
-    /** @hidden */
-    willBlur: boolean;
-    /** @hidden */
-    blur: () => void;
-    /** @hidden */
-    focus: () => void;
-    /** @hidden */
-    anchorClick: (event: React_2.MouseEvent<HTMLAnchorElement>) => void;
-    /** @hidden */
-    closeMenu: () => void;
-    /** @hidden */
-    onAnchorMouseDown: (event: React_2.MouseEvent<HTMLAnchorElement>) => void;
-    /** @hidden */
-    onAnchorKeyDown: (event: React_2.KeyboardEvent<HTMLAnchorElement>) => void;
-    render(): JSX_2.Element;
-}
+export declare const GridColumnMenuWrapper: (props: GridColumnMenuWrapperProps) => JSX_2.Element;
 
 /**
  * The props of the GridColumnMenuWrapper component.

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-grid",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1711459074,
+  publishDate: 1712846838,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-grid",
-  "version": "7.4.0-develop.8",
+  "version": "7.4.0",
   "description": "React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -25,15 +25,15 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.19.0",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-animation": "7.4.0-develop.8",
-    "@progress/kendo-react-buttons": "7.4.0-develop.8",
-    "@progress/kendo-react-common": "7.4.0-develop.8",
-    "@progress/kendo-react-data-tools": "7.4.0-develop.8",
-    "@progress/kendo-react-dateinputs": "7.4.0-develop.8",
-    "@progress/kendo-react-dropdowns": "7.4.0-develop.8",
-    "@progress/kendo-react-inputs": "7.4.0-develop.8",
-    "@progress/kendo-react-intl": "7.4.0-develop.8",
-    "@progress/kendo-react-popup": "7.4.0-develop.8",
+    "@progress/kendo-react-animation": "7.4.0",
+    "@progress/kendo-react-buttons": "7.4.0",
+    "@progress/kendo-react-common": "7.4.0",
+    "@progress/kendo-react-data-tools": "7.4.0",
+    "@progress/kendo-react-dateinputs": "7.4.0",
+    "@progress/kendo-react-dropdowns": "7.4.0",
+    "@progress/kendo-react-inputs": "7.4.0",
+    "@progress/kendo-react-intl": "7.4.0",
+    "@progress/kendo-react-popup": "7.4.0",
     "@progress/kendo-svg-icons": "^2.1.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"