@progress/kendo-react-grid 8.2.1-develop.5 → 8.3.0-develop.10

package/columnMenu/GridColumnMenuColumnsList.mjs

@@ -7,57 +7,59 @@
  */
 "use client";
 import * as t from "react";
-import { TextBox as N, InputPrefix as x, Checkbox as d } from "@progress/kendo-react-inputs";
-import { IconWrap as y } from "@progress/kendo-react-common";
-import { searchIcon as v } from "@progress/kendo-svg-icons";
-import { Button as C } from "@progress/kendo-react-buttons";
-const M = (l) => {
-  const [o, k] = t.useState(""), r = l.columns.reduce((e, n) => ({ ...e, [n.id || ""]: !!l.columnsState.find((a) => a.id === n.id) }), {}), [c, i] = t.useState(r), h = t.useMemo(() => l.columns.filter((e) => {
+import { TextBox as M, InputPrefix as B, Checkbox as k } from "@progress/kendo-react-inputs";
+import { IconWrap as w } from "@progress/kendo-react-common";
+import { searchIcon as A } from "@progress/kendo-svg-icons";
+import { Button as f } from "@progress/kendo-react-buttons";
+import { useLocalization as I } from "@progress/kendo-react-intl";
+import { filterSelectAll as h, messages as u, filterApplyButton as g, filterResetButton as E } from "../messages/index.mjs";
+const R = (l) => {
+  const [a, S] = t.useState(""), d = l.columns.reduce((e, n) => ({ ...e, [n.id || ""]: !!l.columnsState.find((o) => o.id === n.id) }), {}), [c, m] = t.useState(d), b = t.useMemo(() => l.columns.filter((e) => {
     var n;
-    return (n = e.title || e.field) == null ? void 0 : n.toLowerCase().includes(o.toLowerCase());
-  }), [l.columns, o]), f = t.useCallback(() => {
+    return (n = e.title || e.field) == null ? void 0 : n.toLowerCase().includes(a.toLowerCase());
+  }), [l.columns, a]), r = I(), N = t.useCallback(() => {
     const e = l.columns.filter((n) => c[n.id || ""]);
     l.onColumnsChange.call(void 0, e), l.onCloseMenu.call(void 0);
-  }, [c, l.columns, l.onColumnsChange, l.onCloseMenu]), E = () => {
-    i(r);
-  }, s = t.useMemo(() => Object.values(c).filter((e) => e).length, [c]), m = t.useMemo(() => s === l.columns.length, [l.columns, s]), b = t.useCallback(() => {
+  }, [c, l.columns, l.onColumnsChange, l.onCloseMenu]), x = () => {
+    m(d);
+  }, s = t.useMemo(() => Object.values(c).filter((e) => e).length, [c]), i = t.useMemo(() => s === l.columns.length, [l.columns, s]), y = t.useCallback(() => {
     const e = { ...c };
-    Object.keys(e).forEach((n, a) => e[n] = m && a === 0 ? !0 : !m), i(e);
-  }, [c, m]), g = t.useCallback((e, n) => {
-    const a = { ...c };
-    a[n || ""] = e, i(a);
-  }, [c]), S = (e) => {
-    k(String(e.target.value));
+    Object.keys(e).forEach((n, o) => e[n] = i && o === 0 ? !0 : !i), m(e);
+  }, [c, i]), L = t.useCallback((e, n) => {
+    const o = { ...c };
+    o[n || ""] = e, m(o);
+  }, [c]), v = (e) => {
+    S(String(e.target.value));
   };
   return /* @__PURE__ */ t.createElement("form", { className: "k-filter-menu" }, /* @__PURE__ */ t.createElement("div", { className: "k-filter-menu-container" }, /* @__PURE__ */ t.createElement(
-    N,
+    M,
     {
       className: "k-searchbox",
-      value: o,
-      onChange: S,
-      prefix: () => /* @__PURE__ */ t.createElement(x, null, /* @__PURE__ */ t.createElement(y, { name: "search", icon: v }))
+      value: a,
+      onChange: v,
+      prefix: () => /* @__PURE__ */ t.createElement(B, null, /* @__PURE__ */ t.createElement(w, { name: "search", icon: A }))
     }
-  ), /* @__PURE__ */ t.createElement("ul", { className: "k-reset k-multicheck-wrap" }, !o && /* @__PURE__ */ t.createElement("li", { className: "k-item k-check-all-wrap" }, /* @__PURE__ */ t.createElement(
-    d,
+  ), /* @__PURE__ */ t.createElement("ul", { className: "k-reset k-multicheck-wrap" }, !a && /* @__PURE__ */ t.createElement("li", { className: "k-item k-check-all-wrap" }, /* @__PURE__ */ t.createElement(
+    k,
     {
-      checked: m,
-      onChange: b,
-      label: "(Select all)"
+      checked: i,
+      onChange: y,
+      label: r.toLanguageString(h, u[h])
     }
-  )), h.map((e, n) => /* @__PURE__ */ t.createElement("li", { key: e.id, className: "k-item" }, /* @__PURE__ */ t.createElement(
-    d,
+  )), b.map((e, n) => /* @__PURE__ */ t.createElement("li", { key: e.id, className: "k-item" }, /* @__PURE__ */ t.createElement(
+    k,
     {
       disabled: c[e.id || ""] && s === 1,
       checked: c[e.id || ""],
-      onChange: (a) => {
-        var u;
-        return g(!!((u = a.target.element) != null && u.checked), e.id);
+      onChange: (o) => {
+        var C;
+        return L(!!((C = o.target.element) != null && C.checked), e.id);
       },
       label: e.title || e.field
     }
-  )))), /* @__PURE__ */ t.createElement("div", { className: "k-filter-selected-items" }, s, " selected items"), /* @__PURE__ */ t.createElement("div", { className: "k-actions k-actions-start k-actions-horizontal" }, /* @__PURE__ */ t.createElement(C, { type: "button", themeColor: "primary", onClick: f }, "Apply"), /* @__PURE__ */ t.createElement(C, { type: "button", onClick: E }, "Reset"))));
+  )))), /* @__PURE__ */ t.createElement("div", { className: "k-filter-selected-items" }, s, " selected items"), /* @__PURE__ */ t.createElement("div", { className: "k-actions k-actions-start k-actions-horizontal" }, /* @__PURE__ */ t.createElement(f, { type: "button", themeColor: "primary", onClick: N }, r.toLanguageString(g, u[g])), /* @__PURE__ */ t.createElement(f, { type: "button", onClick: x }, r.toLanguageString(E, u[E])))));
 };
-M.displayName = "GridColumnMenuColumnsList";
+R.displayName = "GridColumnMenuColumnsList";
 export {
-  M as GridColumnMenuColumnsList
+  R as GridColumnMenuColumnsList
 };

package/columnMenu/GridColumnMenuWrapper.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react"),W=require("@progress/kendo-react-popup"),a=require("@progress/kendo-react-common"),_=require("@progress/kendo-svg-icons"),h=require("../messages/index.js"),j=require("@progress/kendo-react-intl");function z(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const l in n)if(l!=="default"){const u=Object.getOwnPropertyDescriptor(n,l);Object.defineProperty(r,l,u.get?u:{enumerable:!0,get:()=>n[l]})}}return r.default=n,Object.freeze(r)}const o=z(P),$=[".k-columnmenu-item-content",".k-filter-menu-container"].map(n=>a.TABBABLE_ELEMENTS.map(r=>`${n} ${r}`)),x=[[".k-tabstrip-items"],[".k-columnmenu-item"],...$],A=n=>{const[r,l]=o.useState(!1),u=o.useRef(null),i=o.useRef(null),s=o.useRef(null),m=o.useRef(0),{columnMenu:b,...w}=n,{column:k,columnMenuIcon:f,navigatable:v}=n,p=j.useLocalization(),M=k.title||k.field,y=M?`${M} `:"",C="#",D=e=>{const t=a.getActiveElement(document);clearTimeout(m.current),m.current=window.setTimeout(()=>{t&&e.relatedTarget!==u.current&&i.current&&!i.current.contains(t)&&d()})},S=()=>{clearTimeout(m.current)},T=e=>{e.preventDefault(),r&&n.onCloseMenu&&n.onCloseMenu(),l(!r)},d=()=>{n.onCloseMenu&&n.onCloseMenu(),l(!1),!n.navigatable&&u.current&&u.current.focus()},I=e=>{var t;if(e.keyCode===a.Keys.tab){const c=e.target,E=c&&((t=c.closest(".k-grid"))==null?void 0:t.getElementsByClassName("k-grid-content")[0]);E&&E.scrollWidth>E.clientWidth&&c.scrollIntoView({inline:"center"})}},g=o.useMemo(()=>n.show!==void 0?n.show:r,[n.show,r]),R=e=>{var t;(t=s.current)==null||t.triggerKeyboardEvent(e)},K=e=>{var t;(t=s.current)==null||t.triggerMouseEvent(e)},q=(e,t,c)=>{c.preventDefault(),c.shiftKey?t.focusPrevious(e):t.focusNext(e)},B=(e,t,c)=>{e&&e.click()},N=(e,t,c)=>{c.preventDefault(),d()},O=(e,t,c)=>{c.preventDefault(),t.focusElement(e)};return o.useEffect(()=>(g&&i.current&&(s.current=new a.Navigation({tabIndex:0,root:i,selectors:x,keyboardEvents:{keydown:{Tab:q,Enter:B,Escape:N}},mouseEvents:{mousedown:O}}),s.current.focusElement(s.current.first,null)),()=>{s.current&&(s.current=null)}),[g]),o.createElement(o.Fragment,null,o.createElement("a",{className:"k-grid-header-menu k-grid-column-menu",ref:u,onClick:T,onKeyDown:I,href:C,tabIndex:v?-1:void 0,"aria-label":`${v?"":y}${p.toLanguageString(h.columnMenu,h.messages[h.columnMenu])}`},f?o.createElement(a.IconWrap,{name:f.name,icon:f}):o.createElement(a.IconWrap,{name:"more-vertical",icon:_.moreVerticalIcon})),o.createElement(W.Popup,{anchor:u.current,show:g,popupClass:"k-column-menu k-column-menu-popup k-grid-columnmenu-popup"},o.createElement("div",{ref:i,onBlur:D,onFocus:S,onMouseDown:K,onKeyDown:R,style:{outline:"none"}},b&&o.createElement(b,{...w,onCloseMenu:d}))))};exports.GridColumnMenuWrapper=A;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),_=require("@progress/kendo-react-popup"),a=require("@progress/kendo-react-common"),j=require("@progress/kendo-svg-icons"),E=require("../messages/index.js"),z=require("@progress/kendo-react-intl");function A(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const u in n)if(u!=="default"){const l=Object.getOwnPropertyDescriptor(n,u);Object.defineProperty(r,u,l.get?l:{enumerable:!0,get:()=>n[u]})}}return r.default=n,Object.freeze(r)}const o=A(W),$=[".k-columnmenu-item-content",".k-filter-menu-container"].map(n=>a.TABBABLE_ELEMENTS.map(r=>`${n} ${r}`)),x=[[".k-tabstrip-items"],[".k-columnmenu-item"],...$],F=n=>{const[r,u]=o.useState(!1),l=o.useRef(null),i=o.useRef(null),s=o.useRef(null),m=o.useRef(0),{columnMenu:M,...v}=n,{column:k,columnMenuIcon:f,navigatable:w}=n,p=z.useLocalization(),b=k.title||k.field,y=b?`${b} `:"",C="#",D=e=>{const t=a.getActiveElement(document);clearTimeout(m.current),m.current=window.setTimeout(()=>{t&&e.relatedTarget!==l.current&&i.current&&!i.current.contains(t)&&d()})},S=()=>{clearTimeout(m.current)},T=e=>{e.preventDefault(),r&&n.onCloseMenu&&n.onCloseMenu(),u(!r)},d=()=>{n.onCloseMenu&&n.onCloseMenu(),u(!1),!n.navigatable&&l.current&&l.current.focus()},I=e=>{var t;if(e.keyCode===a.Keys.tab){const c=e.target,h=c&&((t=c.closest(".k-grid"))==null?void 0:t.getElementsByClassName("k-grid-content")[0]);h&&h.scrollWidth>h.clientWidth&&c.scrollIntoView({inline:"center"})}},g=o.useMemo(()=>n.show!==void 0?n.show:r,[n.show,r]),R=e=>{var t;(t=s.current)==null||t.triggerKeyboardEvent(e)},O=e=>{var t;(t=s.current)==null||t.triggerMouseEvent(e)},K=(e,t,c)=>{c.preventDefault(),c.shiftKey?t.focusPrevious(e):t.focusNext(e)},P=(e,t,c)=>{e&&e.click()},q=(e,t,c)=>{c.preventDefault(),d()},B=(e,t,c)=>{c.preventDefault(),t.focusElement(e)},N=e=>{!e.isAnchorClicked&&u(!1)};return o.useEffect(()=>(g&&i.current&&(s.current=new a.Navigation({tabIndex:0,root:i,selectors:x,keyboardEvents:{keydown:{Tab:K,Enter:P,Escape:q}},mouseEvents:{mousedown:B}}),s.current.focusElement(s.current.first,null)),()=>{s.current&&(s.current=null)}),[g]),o.createElement(o.Fragment,null,o.createElement("a",{className:"k-grid-header-menu k-grid-column-menu",ref:l,onClick:T,onKeyDown:I,href:C,tabIndex:w?-1:void 0,"aria-label":`${w?"":y}${p.toLanguageString(E.columnMenu,E.messages[E.columnMenu])}`},f?o.createElement(a.IconWrap,{name:f.name,icon:f}):o.createElement(a.IconWrap,{name:"more-vertical",icon:j.moreVerticalIcon})),o.createElement(_.Popup,{anchor:l.current,show:g,popupClass:"k-column-menu k-column-menu-popup k-grid-columnmenu-popup",onMouseDownOutside:N},o.createElement("div",{ref:i,onBlur:D,onFocus:S,onMouseDown:O,onKeyDown:R,style:{outline:"none"}},M&&o.createElement(M,{...v,onCloseMenu:d}))))};exports.GridColumnMenuWrapper=F;

package/columnMenu/GridColumnMenuWrapper.mjs

@@ -6,109 +6,112 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as t from "react";
+import * as o from "react";
 import { Popup as z } from "@progress/kendo-react-popup";
-import { TABBABLE_ELEMENTS as A, Navigation as F, IconWrap as M, getActiveElement as L, Keys as W } from "@progress/kendo-react-common";
+import { TABBABLE_ELEMENTS as F, Navigation as L, IconWrap as v, getActiveElement as W, Keys as P } from "@progress/kendo-react-common";
 import { moreVerticalIcon as V } from "@progress/kendo-svg-icons";
 import { columnMenu as k, messages as _ } from "../messages/index.mjs";
 import { useLocalization as H } from "@progress/kendo-react-intl";
-const P = [
+const O = [
   ".k-columnmenu-item-content",
   ".k-filter-menu-container"
-].map((o) => A.map(
-  (u) => `${o} ${u}`
+].map((t) => F.map(
+  (u) => `${t} ${u}`
 )), G = [
   [".k-tabstrip-items"],
   [".k-columnmenu-item"],
-  ...P
-], X = (o) => {
-  const [u, E] = t.useState(!1), l = t.useRef(null), s = t.useRef(null), c = t.useRef(null), a = t.useRef(0), { columnMenu: h, ...b } = o, { column: g, columnMenuIcon: i, navigatable: w } = o, p = H(), v = g.title || g.field, y = v ? `${v} ` : "", C = "#", D = (e) => {
-    const n = L(document);
-    clearTimeout(a.current), a.current = window.setTimeout(() => {
-      n && e.relatedTarget !== l.current && s.current && !s.current.contains(n) && m();
+  ...O
+], Y = (t) => {
+  const [u, a] = o.useState(!1), l = o.useRef(null), s = o.useRef(null), r = o.useRef(null), i = o.useRef(0), { columnMenu: E, ...p } = t, { column: g, columnMenuIcon: m, navigatable: w } = t, b = H(), M = g.title || g.field, C = M ? `${M} ` : "", D = "#", y = (e) => {
+    const n = W(document);
+    clearTimeout(i.current), i.current = window.setTimeout(() => {
+      n && e.relatedTarget !== l.current && s.current && !s.current.contains(n) && f();
     });
   }, T = () => {
-    clearTimeout(a.current);
+    clearTimeout(i.current);
   }, S = (e) => {
-    e.preventDefault(), u && o.onCloseMenu && o.onCloseMenu(), E(!u);
-  }, m = () => {
-    o.onCloseMenu && o.onCloseMenu(), E(!1), !o.navigatable && l.current && l.current.focus();
+    e.preventDefault(), u && t.onCloseMenu && t.onCloseMenu(), a(!u);
+  }, f = () => {
+    t.onCloseMenu && t.onCloseMenu(), a(!1), !t.navigatable && l.current && l.current.focus();
   }, K = (e) => {
     var n;
-    if (e.keyCode === W.tab) {
-      const r = e.target, d = r && ((n = r.closest(".k-grid")) == null ? void 0 : n.getElementsByClassName("k-grid-content")[0]);
-      d && d.scrollWidth > d.clientWidth && r.scrollIntoView({ inline: "center" });
+    if (e.keyCode === P.tab) {
+      const c = e.target, h = c && ((n = c.closest(".k-grid")) == null ? void 0 : n.getElementsByClassName("k-grid-content")[0]);
+      h && h.scrollWidth > h.clientWidth && c.scrollIntoView({ inline: "center" });
     }
-  }, f = t.useMemo(() => o.show !== void 0 ? o.show : u, [o.show, u]), B = (e) => {
+  }, d = o.useMemo(() => t.show !== void 0 ? t.show : u, [t.show, u]), B = (e) => {
     var n;
-    (n = c.current) == null || n.triggerKeyboardEvent(e);
+    (n = r.current) == null || n.triggerKeyboardEvent(e);
   }, I = (e) => {
     var n;
-    (n = c.current) == null || n.triggerMouseEvent(e);
-  }, N = (e, n, r) => {
-    r.preventDefault(), r.shiftKey ? n.focusPrevious(e) : n.focusNext(e);
-  }, R = (e, n, r) => {
+    (n = r.current) == null || n.triggerMouseEvent(e);
+  }, A = (e, n, c) => {
+    c.preventDefault(), c.shiftKey ? n.focusPrevious(e) : n.focusNext(e);
+  }, N = (e, n, c) => {
     e && e.click();
-  }, $ = (e, n, r) => {
-    r.preventDefault(), m();
-  }, x = (e, n, r) => {
-    r.preventDefault(), n.focusElement(e);
+  }, R = (e, n, c) => {
+    c.preventDefault(), f();
+  }, $ = (e, n, c) => {
+    c.preventDefault(), n.focusElement(e);
+  }, x = (e) => {
+    !e.isAnchorClicked && a(!1);
   };
-  return t.useEffect(() => (f && s.current && (c.current = new F({
+  return o.useEffect(() => (d && s.current && (r.current = new L({
     tabIndex: 0,
     root: s,
     selectors: G,
     keyboardEvents: {
       keydown: {
-        Tab: N,
-        Enter: R,
-        Escape: $
+        Tab: A,
+        Enter: N,
+        Escape: R
       }
     },
     mouseEvents: {
-      mousedown: x
+      mousedown: $
     }
-  }), c.current.focusElement(c.current.first, null)), () => {
-    c.current && (c.current = null);
-  }), [f]), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+  }), r.current.focusElement(r.current.first, null)), () => {
+    r.current && (r.current = null);
+  }), [d]), /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
     "a",
     {
       className: "k-grid-header-menu k-grid-column-menu",
       ref: l,
       onClick: S,
       onKeyDown: K,
-      href: C,
+      href: D,
       tabIndex: w ? -1 : void 0,
-      "aria-label": `${w ? "" : y}${p.toLanguageString(k, _[k])}`
+      "aria-label": `${w ? "" : C}${b.toLanguageString(k, _[k])}`
     },
-    i ? /* @__PURE__ */ t.createElement(M, { name: i.name, icon: i }) : /* @__PURE__ */ t.createElement(M, { name: "more-vertical", icon: V })
-  ), /* @__PURE__ */ t.createElement(
+    m ? /* @__PURE__ */ o.createElement(v, { name: m.name, icon: m }) : /* @__PURE__ */ o.createElement(v, { name: "more-vertical", icon: V })
+  ), /* @__PURE__ */ o.createElement(
     z,
     {
       anchor: l.current,
-      show: f,
-      popupClass: "k-column-menu k-column-menu-popup k-grid-columnmenu-popup"
+      show: d,
+      popupClass: "k-column-menu k-column-menu-popup k-grid-columnmenu-popup",
+      onMouseDownOutside: x
     },
-    /* @__PURE__ */ t.createElement(
+    /* @__PURE__ */ o.createElement(
       "div",
       {
         ref: s,
-        onBlur: D,
+        onBlur: y,
         onFocus: T,
         onMouseDown: I,
         onKeyDown: B,
         style: { outline: "none" }
       },
-      h && /* @__PURE__ */ t.createElement(
-        h,
+      E && /* @__PURE__ */ o.createElement(
+        E,
         {
-          ...b,
-          onCloseMenu: m
+          ...p,
+          onCloseMenu: f
         }
       )
     )
   ));
 };
 export {
-  X as GridColumnMenuWrapper
+  Y as GridColumnMenuWrapper
 };