@progress/kendo-react-grid 7.5.0-develop.19 → 7.5.0-develop.20

package/header/HeaderRow.mjs

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

package/index.d.mts

@@ -36,6 +36,7 @@ import { SortDescriptor } from '@progress/kendo-data-query';
 import { SortSettings } from '@progress/kendo-react-data-tools';
 import { State } from '@progress/kendo-data-query';
 import { SVGIcon } from '@progress/kendo-react-common';
+import { SVGIcon as SVGIcon_2 } from '@progress/kendo-svg-icons';
 import { TABLE_COL_INDEX_ATTRIBUTE } from '@progress/kendo-react-data-tools';
 import { TableDragSelectionReleaseEvent } from '@progress/kendo-react-data-tools';
 import { TableKeyboardNavigationContextType } from '@progress/kendo-react-data-tools';
@@ -1194,6 +1195,10 @@ export declare interface GridColumnMenuWrapperProps extends GridColumnMenuProps
      * The component to be rendered as content of the Grid column menu.
      */
     columnMenu?: React_2.ComponentType<GridColumnMenuProps> | null;
+    /**
+     * The icon that overrides the default(three vertical dots) icon displayed in the column menu of each column.
+     */
+    columnMenuIcon?: SVGIcon;
 }
 
 /**
@@ -1244,6 +1249,10 @@ export declare interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> {
      * Defines the editor type. Used when the column enters the edit mode ([more information and examples]({% slug editing_inline_grid %})). Defaults to `text`.
      */
     editor?: 'text' | 'numeric' | 'boolean' | 'date';
+    /**
+     * Overrides the default(three vertical dots) column menu icon or the icon set through the ([`columnMenuIcon`]({% slug api_grid_gridprops %}#toc-columnmenuicon)) property.
+     */
+    menuIcon?: SVGIcon;
     /**
      * Defines the component that will be rendered as a cell. If not set, a `GridCell` will be rendered by default.
      */
@@ -2147,6 +2156,10 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * Specifies a React element that will be cloned and rendered inside the column menu of the Grid. Can be overridden on column level.
      */
     columnMenu?: null | ComponentType<GridColumnMenuProps>;
+    /**
+     * Globally overrides the default(three vertical dots) column menu icon for the whole Grid. If set, the prop can be overridden on column level using the ([menuIcon]({% slug api_grid_gridcolumnprops %}#toc-menuicon)) property.
+     */
+    columnMenuIcon?: SVGIcon_2;
     /**
      * The [descriptors]({% slug api_kendo-data-query_groupdescriptor %})[] by which the data will be grouped
      * ([more information and examples]({% slug groupingbasics_grid %})).

package/index.d.ts

@@ -36,6 +36,7 @@ import { SortDescriptor } from '@progress/kendo-data-query';
 import { SortSettings } from '@progress/kendo-react-data-tools';
 import { State } from '@progress/kendo-data-query';
 import { SVGIcon } from '@progress/kendo-react-common';
+import { SVGIcon as SVGIcon_2 } from '@progress/kendo-svg-icons';
 import { TABLE_COL_INDEX_ATTRIBUTE } from '@progress/kendo-react-data-tools';
 import { TableDragSelectionReleaseEvent } from '@progress/kendo-react-data-tools';
 import { TableKeyboardNavigationContextType } from '@progress/kendo-react-data-tools';
@@ -1194,6 +1195,10 @@ export declare interface GridColumnMenuWrapperProps extends GridColumnMenuProps
      * The component to be rendered as content of the Grid column menu.
      */
     columnMenu?: React_2.ComponentType<GridColumnMenuProps> | null;
+    /**
+     * The icon that overrides the default(three vertical dots) icon displayed in the column menu of each column.
+     */
+    columnMenuIcon?: SVGIcon;
 }
 
 /**
@@ -1244,6 +1249,10 @@ export declare interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> {
      * Defines the editor type. Used when the column enters the edit mode ([more information and examples]({% slug editing_inline_grid %})). Defaults to `text`.
      */
     editor?: 'text' | 'numeric' | 'boolean' | 'date';
+    /**
+     * Overrides the default(three vertical dots) column menu icon or the icon set through the ([`columnMenuIcon`]({% slug api_grid_gridprops %}#toc-columnmenuicon)) property.
+     */
+    menuIcon?: SVGIcon;
     /**
      * Defines the component that will be rendered as a cell. If not set, a `GridCell` will be rendered by default.
      */
@@ -2147,6 +2156,10 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * Specifies a React element that will be cloned and rendered inside the column menu of the Grid. Can be overridden on column level.
      */
     columnMenu?: null | ComponentType<GridColumnMenuProps>;
+    /**
+     * Globally overrides the default(three vertical dots) column menu icon for the whole Grid. If set, the prop can be overridden on column level using the ([menuIcon]({% slug api_grid_gridcolumnprops %}#toc-menuicon)) property.
+     */
+    columnMenuIcon?: SVGIcon_2;
     /**
      * The [descriptors]({% slug api_kendo-data-query_groupdescriptor %})[] by which the data will be grouped
      * ([more information and examples]({% slug groupingbasics_grid %})).

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-grid",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1715342506,
+  publishDate: 1715351893,
   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.5.0-develop.19",
+  "version": "7.5.0-develop.20",
   "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.20.1",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-animation": "7.5.0-develop.19",
-    "@progress/kendo-react-buttons": "7.5.0-develop.19",
-    "@progress/kendo-react-common": "7.5.0-develop.19",
-    "@progress/kendo-react-data-tools": "7.5.0-develop.19",
-    "@progress/kendo-react-dateinputs": "7.5.0-develop.19",
-    "@progress/kendo-react-dropdowns": "7.5.0-develop.19",
-    "@progress/kendo-react-inputs": "7.5.0-develop.19",
-    "@progress/kendo-react-intl": "7.5.0-develop.19",
-    "@progress/kendo-react-popup": "7.5.0-develop.19",
+    "@progress/kendo-react-animation": "7.5.0-develop.20",
+    "@progress/kendo-react-buttons": "7.5.0-develop.20",
+    "@progress/kendo-react-common": "7.5.0-develop.20",
+    "@progress/kendo-react-data-tools": "7.5.0-develop.20",
+    "@progress/kendo-react-dateinputs": "7.5.0-develop.20",
+    "@progress/kendo-react-dropdowns": "7.5.0-develop.20",
+    "@progress/kendo-react-inputs": "7.5.0-develop.20",
+    "@progress/kendo-react-intl": "7.5.0-develop.20",
+    "@progress/kendo-react-popup": "7.5.0-develop.20",
     "@progress/kendo-svg-icons": "^3.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"