@progress/kendo-react-buttons 14.5.0-develop.8 → 15.0.0-develop.1

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = Object.freeze({
     productName: 'KendoReact',
     productCode: 'KENDOUIREACT',
     productCodes: ['KENDOUIREACT'],
-    publishDate: 1778596651,
-    version: '14.5.0-develop.8',
+    publishDate: 1779199412,
+    version: '15.0.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-buttons",
-  "version": "14.5.0-develop.8",
+  "version": "15.0.0-develop.1",
   "description": "All you need in React Button in one package: disabled/enabled states, built-in styles and more. KendoReact Buttons package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -28,10 +28,10 @@
     "@progress/kendo-smartpaste-common": "1.0.0",
     "@progress/kendo-licensing": "^1.7.2",
     "@progress/kendo-webspeech-common": "^1.0.1",
-    "@progress/kendo-react-common": "14.5.0-develop.8",
-    "@progress/kendo-react-intl": "14.5.0-develop.8",
-    "@progress/kendo-react-popup": "14.5.0-develop.8",
-    "@progress/kendo-svg-icons": "^4.8.0",
+    "@progress/kendo-react-common": "15.0.0-develop.1",
+    "@progress/kendo-react-intl": "15.0.0-develop.1",
+    "@progress/kendo-react-popup": "15.0.0-develop.1",
+    "@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
@@ -65,7 +65,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1778596651,
+      "publishDate": 1779199412,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },
@@ -75,5 +75,10 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "peerDependenciesMeta": {
+    "@progress/kendo-svg-icons": {
+      "optional": true
+    }
   }
 }

package/toolbar/Toolbar.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Y=require("react"),n=require("prop-types"),i=require("@progress/kendo-react-common"),Z=require("../util.js"),ee=require("./tools/ToolbarScrollable.js"),te=require("./tools/ToolbarOverflowSection.js");function oe(l){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const a in l)if(a!=="default"){const y=Object.getOwnPropertyDescriptor(l,a);Object.defineProperty(b,a,y.get?y:{enumerable:!0,get:()=>l[a]})}}return b.default=l,Object.freeze(b)}const t=oe(Y),E=t.forwardRef((l,b)=>{const{children:a,className:y,id:N,ariaLabel:A,keyboardNavigation:R,role:x,onResize:B,style:D,tabIndex:P=d.tabIndex,size:h=d.size,fillMode:I=d.fillMode,overflow:u,scrollButtons:m=d.scrollButtons,scrollButtonsPosition:_=d.scrollButtonsPosition,buttonScrollSpeed:$=d.buttonScrollSpeed,prevButton:F,nextButton:G,_ariaControls:J}=l,T=t.useRef(!1),r=t.useRef(null),S=t.useRef(null),g=t.useRef(0),v=t.useRef(0),c=t.useRef([]),C=t.useRef({element:null,props:l}),[Q,U]=t.useState(!1),[z,M]=t.useState(!0),[W,K]=t.useState(!1),k=i.useDir(r,l.dir),w=t.useMemo(()=>l.buttons||Z.toolbarButtons,[l.buttons]),V=t.useMemo(()=>w.map(e=>e+":focus").join(","),[w]),q=()=>{const e=r.current&&r.current.querySelector(V);return Math.max(0,c.current.findIndex(s=>s===e))};t.useImperativeHandle(C,()=>({element:r.current,props:l})),t.useImperativeHandle(b,()=>C.current),t.useEffect(()=>(window.addEventListener("resize",H),r.current&&(v.current=r.current.offsetWidth,g.current=r.current.offsetHeight,R!==!1&&(c.current=Array.from(r.current.querySelectorAll(w.join(","))),j(0))),()=>{window.removeEventListener("resize",H),c.current.length=0}),[]),t.useEffect(()=>{if(T.current){if(!r.current||R===!1)return;c.current=Array.from(r.current.querySelectorAll(w.join(","))),j(q()),L()}else T.current=!0});const j=e=>{c.current.forEach((s,o)=>{s.tabIndex=o===e?P:-1})},X=e=>{const s=e.keyCode===i.Keys.left||e.keyCode===i.Keys.right||e.keyCode===i.Keys.home||e.keyCode===i.Keys.end,o=q();!s||e.defaultPrevented||c.current.findIndex(f=>f===e.target)===-1||(e.keyCode===i.Keys.left?O(o,o===0?c.current.length-1:o-1):O(o,o===c.current.length-1?0:o+1),e.keyCode===i.Keys.home&&O(o,0),e.keyCode===i.Keys.end&&O(o,c.current.length-1))},O=(e,s)=>{const o=c.current[s];if(o){o.tabIndex=P,o.focus();const f=c.current[e];f&&(f.tabIndex=-1)}},H=e=>{if(!r.current)return;const s=r.current.offsetWidth,o=r.current.offsetHeight;if(v.current!==s||g.current!==o){v.current=s,g.current=o;const f={offsetWidth:v.current,offsetHeight:g.current};B&&B.call(void 0,{target:C.current,...f,nativeEvent:e})}L()},L=t.useCallback(()=>{const e=S.current;e&&U(e.scrollWidth>e.clientWidth||e.scrollHeight>e.clientHeight)},[]),p=t.useCallback(()=>{const e=S.current;if(e){const s=e.scrollLeft===0,o=k!=="rtl"?e.scrollLeft+e.clientWidth===e.scrollWidth:e.clientWidth-e.scrollLeft===e.scrollWidth;s&&M(!0),o&&K(!0),!s&&!o&&(M(!1),K(!1))}},[k]);return t.useEffect(()=>{const e=S.current;if(e)return e.addEventListener("scroll",p),()=>{e.removeEventListener("scroll",p)}},[p]),t.createElement("div",{id:N,"aria-label":A,"aria-controls":J,className:i.classNames("k-toolbar",{[`k-toolbar-${i.kendoThemeMaps.sizeMap[h]||h}`]:h,[`k-toolbar-${I}`]:I,"k-toolbar-scrollable":u==="scroll","k-toolbar-scrollable-overlay":u==="scroll"&&(m==="hidden"||m===void 0),"k-toolbar-scrollable-start":u==="scroll"&&m==="hidden"&&z,"k-toolbar-scrollable-end":u==="scroll"&&m==="hidden"&&W,"k-toolbar-section":l.overflow&&u==="section"},y),style:D,role:x!==void 0?x||void 0:"toolbar",dir:k,ref:r,onKeyDown:R!==!1?X:void 0},u==="scroll"&&t.createElement(ee.ToolbarScrollable,{scrollButtons:m,scrollButtonsPosition:_,prevButton:F,nextButton:G,isOverflowing:Q,scrollContentRef:S,buttonScrollSpeed:$,dir:k,isScrollStartPosition:z,isScrollEndPosition:W,children:a}),u==="section"&&t.createElement(te.ToolbarOverflowSection,{toolbarRef:r,fillMode:I,size:h},a),(u==="none"||u===void 0)&&a)}),d={tabIndex:0,size:void 0,fillMode:void 0,scrollButtons:"auto",scrollButtonsPosition:"split",buttonScrollSpeed:100};E.displayName="KendoReactToolbar";E.propTypes={tabIndex:n.number,dir:n.string,keyboardNavigation:n.bool,style:n.object,className:n.string,role:n.string,onResize:n.func,buttons:n.arrayOf(n.string.isRequired),size:n.oneOf(["small","medium","large"]),fillMode:n.oneOf(["solid","flat","outline"]),overflow:n.oneOf(["none","section","scroll"]),scrollButtons:n.oneOf(["hidden","visible","auto"]),scrollButtonsPosition:n.oneOf(["start","end","split"]),buttonScrollSpeed:n.number};exports.Toolbar=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ee=require("react"),n=require("prop-types"),c=require("@progress/kendo-react-common"),te=require("../util.js"),oe=require("./tools/ToolbarScrollable.js"),re=require("./tools/ToolbarOverflowSection.js"),ne=require("../package-metadata.js");function se(s){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const u in s)if(u!=="default"){const h=Object.getOwnPropertyDescriptor(s,u);Object.defineProperty(b,u,h.get?h:{enumerable:!0,get:()=>s[u]})}}return b.default=s,Object.freeze(b)}const t=se(ee),E=t.forwardRef((s,b)=>{const{children:u,className:h,id:N,ariaLabel:A,keyboardNavigation:R,role:W,onResize:M,style:D,tabIndex:P=d.tabIndex,size:y=d.size,fillMode:p=d.fillMode,overflow:a,scrollButtons:m=d.scrollButtons,scrollButtonsPosition:_=d.scrollButtonsPosition,buttonScrollSpeed:$=d.buttonScrollSpeed,prevButton:F,nextButton:G,_ariaControls:J}=s,x=t.useRef(!1),r=t.useRef(null),g=t.useRef(null),S=t.useRef(0),k=t.useRef(0),i=t.useRef([]),C=t.useRef({element:null,props:s}),[Q,U]=t.useState(!1),[B,T]=t.useState(!0),[z,q]=t.useState(!1),v=c.useDir(r,s.dir),{showWatermark:V,licenseMessage:X}=c.usePaidChildrenWatermark(r,ne.packageMetadata,"Toolbar"),w=t.useMemo(()=>s.buttons||te.toolbarButtons,[s.buttons]),Y=t.useMemo(()=>w.map(e=>e+":focus").join(","),[w]),K=()=>{const e=r.current&&r.current.querySelector(Y);return Math.max(0,i.current.findIndex(l=>l===e))};t.useImperativeHandle(C,()=>({element:r.current,props:s})),t.useImperativeHandle(b,()=>C.current),t.useEffect(()=>(window.addEventListener("resize",H),r.current&&(k.current=r.current.offsetWidth,S.current=r.current.offsetHeight,R!==!1&&(i.current=Array.from(r.current.querySelectorAll(w.join(","))),j(0))),()=>{window.removeEventListener("resize",H),i.current.length=0}),[]),t.useEffect(()=>{if(x.current){if(!r.current||R===!1)return;i.current=Array.from(r.current.querySelectorAll(w.join(","))),j(K()),L()}else x.current=!0});const j=e=>{i.current.forEach((l,o)=>{l.tabIndex=o===e?P:-1})},Z=e=>{const l=e.keyCode===c.Keys.left||e.keyCode===c.Keys.right||e.keyCode===c.Keys.home||e.keyCode===c.Keys.end,o=K();!l||e.defaultPrevented||i.current.findIndex(f=>f===e.target)===-1||(e.keyCode===c.Keys.left?O(o,o===0?i.current.length-1:o-1):O(o,o===i.current.length-1?0:o+1),e.keyCode===c.Keys.home&&O(o,0),e.keyCode===c.Keys.end&&O(o,i.current.length-1))},O=(e,l)=>{const o=i.current[l];if(o){o.tabIndex=P,o.focus();const f=i.current[e];f&&(f.tabIndex=-1)}},H=e=>{if(!r.current)return;const l=r.current.offsetWidth,o=r.current.offsetHeight;if(k.current!==l||S.current!==o){k.current=l,S.current=o;const f={offsetWidth:k.current,offsetHeight:S.current};M&&M.call(void 0,{target:C.current,...f,nativeEvent:e})}L()},L=t.useCallback(()=>{const e=g.current;e&&U(e.scrollWidth>e.clientWidth||e.scrollHeight>e.clientHeight)},[]),I=t.useCallback(()=>{const e=g.current;if(e){const l=e.scrollLeft===0,o=v!=="rtl"?e.scrollLeft+e.clientWidth===e.scrollWidth:e.clientWidth-e.scrollLeft===e.scrollWidth;l&&T(!0),o&&q(!0),!l&&!o&&(T(!1),q(!1))}},[v]);return t.useEffect(()=>{const e=g.current;if(e)return e.addEventListener("scroll",I),()=>{e.removeEventListener("scroll",I)}},[I]),t.createElement("div",{id:N,"aria-label":A,"aria-controls":J,className:c.classNames("k-toolbar",{[`k-toolbar-${c.kendoThemeMaps.sizeMap[y]||y}`]:y,[`k-toolbar-${p}`]:p,"k-toolbar-scrollable":a==="scroll","k-toolbar-scrollable-overlay":a==="scroll"&&(m==="hidden"||m===void 0),"k-toolbar-scrollable-start":a==="scroll"&&m==="hidden"&&B,"k-toolbar-scrollable-end":a==="scroll"&&m==="hidden"&&z,"k-toolbar-section":s.overflow&&a==="section"},h),style:D,role:W!==void 0?W||void 0:"toolbar",dir:v,ref:r,onKeyDown:R!==!1?Z:void 0},a==="scroll"&&t.createElement(oe.ToolbarScrollable,{scrollButtons:m,scrollButtonsPosition:_,prevButton:F,nextButton:G,isOverflowing:Q,scrollContentRef:g,buttonScrollSpeed:$,dir:v,isScrollStartPosition:B,isScrollEndPosition:z,children:u}),a==="section"&&t.createElement(re.ToolbarOverflowSection,{toolbarRef:r,fillMode:p,size:y},u),(a==="none"||a===void 0)&&u,V&&t.createElement(c.WatermarkOverlay,{message:X}))}),d={tabIndex:0,size:void 0,fillMode:void 0,scrollButtons:"auto",scrollButtonsPosition:"split",buttonScrollSpeed:100};E.displayName="KendoReactToolbar";E.propTypes={tabIndex:n.number,dir:n.string,keyboardNavigation:n.bool,style:n.object,className:n.string,role:n.string,onResize:n.func,buttons:n.arrayOf(n.string.isRequired),size:n.oneOf(["small","medium","large"]),fillMode:n.oneOf(["solid","flat","outline"]),overflow:n.oneOf(["none","section","scroll"]),scrollButtons:n.oneOf(["hidden","visible","auto"]),scrollButtonsPosition:n.oneOf(["start","end","split"]),buttonScrollSpeed:n.number};exports.Toolbar=E;

package/toolbar/Toolbar.mjs

@@ -7,23 +7,24 @@
  */
 import * as t from "react";
 import n from "prop-types";
-import { useDir as Y, classNames as Z, kendoThemeMaps as ee, Keys as u } from "@progress/kendo-react-common";
-import { toolbarButtons as te } from "../util.mjs";
-import { ToolbarScrollable as oe } from "./tools/ToolbarScrollable.mjs";
-import { ToolbarOverflowSection as re } from "./tools/ToolbarOverflowSection.mjs";
+import { useDir as ee, usePaidChildrenWatermark as te, classNames as oe, kendoThemeMaps as re, WatermarkOverlay as ne, Keys as a } from "@progress/kendo-react-common";
+import { toolbarButtons as se } from "../util.mjs";
+import { ToolbarScrollable as le } from "./tools/ToolbarScrollable.mjs";
+import { ToolbarOverflowSection as ce } from "./tools/ToolbarOverflowSection.mjs";
+import { packageMetadata as ie } from "../package-metadata.mjs";
 const N = t.forwardRef((i, A) => {
   const {
-    children: k,
+    children: y,
     className: K,
     id: j,
     ariaLabel: q,
     keyboardNavigation: w,
-    role: x,
-    onResize: C,
+    role: C,
+    onResize: E,
     style: D,
-    tabIndex: E = f.tabIndex,
+    tabIndex: W = f.tabIndex,
     size: b = f.size,
-    fillMode: I = f.fillMode,
+    fillMode: p = f.fillMode,
     overflow: c,
     scrollButtons: d = f.scrollButtons,
     scrollButtonsPosition: $ = f.scrollButtonsPosition,
@@ -31,61 +32,65 @@ const N = t.forwardRef((i, A) => {
     prevButton: _,
     nextButton: G,
     _ariaControls: J
-  } = i, B = t.useRef(!1), r = t.useRef(null), m = t.useRef(null), h = t.useRef(0), S = t.useRef(0), s = t.useRef([]), R = t.useRef({ element: null, props: i }), [Q, U] = t.useState(!1), [O, W] = t.useState(!0), [z, P] = t.useState(!1), v = Y(r, i.dir), y = t.useMemo(() => i.buttons || te, [i.buttons]), V = t.useMemo(() => y.map((e) => e + ":focus").join(","), [y]), M = () => {
-    const e = r.current && r.current.querySelector(V);
+  } = i, x = t.useRef(!1), r = t.useRef(null), m = t.useRef(null), h = t.useRef(0), S = t.useRef(0), l = t.useRef([]), I = t.useRef({ element: null, props: i }), [Q, U] = t.useState(!1), [B, O] = t.useState(!0), [M, P] = t.useState(!1), g = ee(r, i.dir), { showWatermark: V, licenseMessage: X } = te(
+    r,
+    ie,
+    "Toolbar"
+  ), k = t.useMemo(() => i.buttons || se, [i.buttons]), Y = t.useMemo(() => k.map((e) => e + ":focus").join(","), [k]), z = () => {
+    const e = r.current && r.current.querySelector(Y);
     return Math.max(
       0,
-      s.current.findIndex((l) => l === e)
+      l.current.findIndex((s) => s === e)
     );
   };
   t.useImperativeHandle(
-    R,
+    I,
     () => ({
       element: r.current,
       props: i
     })
-  ), t.useImperativeHandle(A, () => R.current), t.useEffect(() => (window.addEventListener("resize", L), r.current && (S.current = r.current.offsetWidth, h.current = r.current.offsetHeight, w !== !1 && (s.current = Array.from(
-    r.current.querySelectorAll(y.join(","))
+  ), t.useImperativeHandle(A, () => I.current), t.useEffect(() => (window.addEventListener("resize", L), r.current && (S.current = r.current.offsetWidth, h.current = r.current.offsetHeight, w !== !1 && (l.current = Array.from(
+    r.current.querySelectorAll(k.join(","))
   ), H(0))), () => {
-    window.removeEventListener("resize", L), s.current.length = 0;
+    window.removeEventListener("resize", L), l.current.length = 0;
   }), []), t.useEffect(() => {
-    if (B.current) {
+    if (x.current) {
       if (!r.current || w === !1)
         return;
-      s.current = Array.from(
-        r.current.querySelectorAll(y.join(","))
-      ), H(M()), T();
+      l.current = Array.from(
+        r.current.querySelectorAll(k.join(","))
+      ), H(z()), T();
     } else
-      B.current = !0;
+      x.current = !0;
   });
   const H = (e) => {
-    s.current.forEach((l, o) => {
-      l.tabIndex = o === e ? E : -1;
+    l.current.forEach((s, o) => {
+      s.tabIndex = o === e ? W : -1;
     });
-  }, X = (e) => {
-    const l = e.keyCode === u.left || e.keyCode === u.right || e.keyCode === u.home || e.keyCode === u.end, o = M();
-    !l || e.defaultPrevented || s.current.findIndex((a) => a === e.target) === -1 || (e.keyCode === u.left ? g(
+  }, Z = (e) => {
+    const s = e.keyCode === a.left || e.keyCode === a.right || e.keyCode === a.home || e.keyCode === a.end, o = z();
+    !s || e.defaultPrevented || l.current.findIndex((u) => u === e.target) === -1 || (e.keyCode === a.left ? v(
       o,
-      o === 0 ? s.current.length - 1 : o - 1
-    ) : g(
+      o === 0 ? l.current.length - 1 : o - 1
+    ) : v(
       o,
-      o === s.current.length - 1 ? 0 : o + 1
-    ), e.keyCode === u.home && g(o, 0), e.keyCode === u.end && g(o, s.current.length - 1));
-  }, g = (e, l) => {
-    const o = s.current[l];
+      o === l.current.length - 1 ? 0 : o + 1
+    ), e.keyCode === a.home && v(o, 0), e.keyCode === a.end && v(o, l.current.length - 1));
+  }, v = (e, s) => {
+    const o = l.current[s];
     if (o) {
-      o.tabIndex = E, o.focus();
-      const a = s.current[e];
-      a && (a.tabIndex = -1);
+      o.tabIndex = W, o.focus();
+      const u = l.current[e];
+      u && (u.tabIndex = -1);
     }
   }, L = (e) => {
     if (!r.current)
       return;
-    const l = r.current.offsetWidth, o = r.current.offsetHeight;
-    if (S.current !== l || h.current !== o) {
-      S.current = l, h.current = o;
-      const a = { offsetWidth: S.current, offsetHeight: h.current };
-      C && C.call(void 0, { target: R.current, ...a, nativeEvent: e });
+    const s = r.current.offsetWidth, o = r.current.offsetHeight;
+    if (S.current !== s || h.current !== o) {
+      S.current = s, h.current = o;
+      const u = { offsetWidth: S.current, offsetHeight: h.current };
+      E && E.call(void 0, { target: I.current, ...u, nativeEvent: e });
     }
     T();
   }, T = t.useCallback(() => {
@@ -93,46 +98,46 @@ const N = t.forwardRef((i, A) => {
     e && U(
       e.scrollWidth > e.clientWidth || e.scrollHeight > e.clientHeight
     );
-  }, []), p = t.useCallback(() => {
+  }, []), R = t.useCallback(() => {
     const e = m.current;
     if (e) {
-      const l = e.scrollLeft === 0, o = v !== "rtl" ? e.scrollLeft + e.clientWidth === e.scrollWidth : e.clientWidth - e.scrollLeft === e.scrollWidth;
-      l && W(!0), o && P(!0), !l && !o && (W(!1), P(!1));
+      const s = e.scrollLeft === 0, o = g !== "rtl" ? e.scrollLeft + e.clientWidth === e.scrollWidth : e.clientWidth - e.scrollLeft === e.scrollWidth;
+      s && O(!0), o && P(!0), !s && !o && (O(!1), P(!1));
     }
-  }, [v]);
+  }, [g]);
   return t.useEffect(() => {
     const e = m.current;
     if (e)
-      return e.addEventListener("scroll", p), () => {
-        e.removeEventListener("scroll", p);
+      return e.addEventListener("scroll", R), () => {
+        e.removeEventListener("scroll", R);
       };
-  }, [p]), /* @__PURE__ */ t.createElement(
+  }, [R]), /* @__PURE__ */ t.createElement(
     "div",
     {
       id: j,
       "aria-label": q,
       "aria-controls": J,
-      className: Z(
+      className: oe(
         "k-toolbar",
         {
-          [`k-toolbar-${ee.sizeMap[b] || b}`]: b,
-          [`k-toolbar-${I}`]: I,
+          [`k-toolbar-${re.sizeMap[b] || b}`]: b,
+          [`k-toolbar-${p}`]: p,
           "k-toolbar-scrollable": c === "scroll",
           "k-toolbar-scrollable-overlay": c === "scroll" && (d === "hidden" || d === void 0),
-          "k-toolbar-scrollable-start": c === "scroll" && d === "hidden" && O,
-          "k-toolbar-scrollable-end": c === "scroll" && d === "hidden" && z,
+          "k-toolbar-scrollable-start": c === "scroll" && d === "hidden" && B,
+          "k-toolbar-scrollable-end": c === "scroll" && d === "hidden" && M,
           "k-toolbar-section": i.overflow && c === "section"
         },
         K
       ),
       style: D,
-      role: x !== void 0 ? x || void 0 : "toolbar",
-      dir: v,
+      role: C !== void 0 ? C || void 0 : "toolbar",
+      dir: g,
       ref: r,
-      onKeyDown: w !== !1 ? X : void 0
+      onKeyDown: w !== !1 ? Z : void 0
     },
     c === "scroll" && /* @__PURE__ */ t.createElement(
-      oe,
+      le,
       {
         scrollButtons: d,
         scrollButtonsPosition: $,
@@ -141,14 +146,15 @@ const N = t.forwardRef((i, A) => {
         isOverflowing: Q,
         scrollContentRef: m,
         buttonScrollSpeed: F,
-        dir: v,
-        isScrollStartPosition: O,
-        isScrollEndPosition: z,
-        children: k
+        dir: g,
+        isScrollStartPosition: B,
+        isScrollEndPosition: M,
+        children: y
       }
     ),
-    c === "section" && /* @__PURE__ */ t.createElement(re, { toolbarRef: r, fillMode: I, size: b }, k),
-    (c === "none" || c === void 0) && k
+    c === "section" && /* @__PURE__ */ t.createElement(ce, { toolbarRef: r, fillMode: p, size: b }, y),
+    (c === "none" || c === void 0) && y,
+    V && /* @__PURE__ */ t.createElement(ne, { message: X })
   );
 }), f = {
   tabIndex: 0,

package/toolbar/tools/ToolbarOverflowSection.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("@progress/kendo-react-popup"),E=require("react"),q=require("./ToolbarSeparator.js"),M=require("../../Button.js"),P=require("@progress/kendo-svg-icons"),W=require("@progress/kendo-react-intl"),p=require("../messages/index.js"),I=require("@progress/kendo-react-common");function j(c){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const a in c)if(a!=="default"){const i=Object.getOwnPropertyDescriptor(c,a);Object.defineProperty(t,a,i.get?i:{enumerable:!0,get:()=>c[a]})}}return t.default=c,Object.freeze(t)}const e=j(E),_=c=>{var h;const{toolbarRef:t,children:a,fillMode:i,size:R}=c,[b,k]=e.useState(!1),u=e.useRef(e.Children.toArray(a).filter(r=>e.isValidElement(r)).map((r,o)=>e.cloneElement(r,{key:r.key||o}))),l=e.useRef([]),f=e.useRef(0),T=e.useRef(null),v=e.useRef(null),S=W.useLocalization(),[B,w]=e.useReducer(r=>r+1,0),m=()=>{if(!t.current)return;let r=0;const o=t.current.clientWidth,d=parseInt(window.getComputedStyle(t.current).gap||"0",10),O=Array.from(t.current.children).reduce((n,s,N)=>(n+=Math.ceil(s.clientWidth),n),0),g=Array.from(t.current.children).length,z=d*2;if(r=O+g*d+z,r>o){const n=[...u.current],s=n.pop();f.current=o,u.current=n,s&&(l.current=[s,...l.current])}else if(o>f.current+d*g){const n=[...l.current],s=n.shift();l.current=n,s&&(u.current=[...u.current,s]),f.current=o}w()};e.useEffect(()=>{m();const r=new ResizeObserver(m),o=t.current;return o&&r.observe(o),()=>{o&&r.unobserve(o)}},[]);const y=()=>{k(!b)};return e.createElement(e.Fragment,null,u.current.length>0&&u.current,l.current.length>0&&e.createElement(e.Fragment,null,e.createElement(q.ToolbarSeparator,{_ref:v,className:"k-toolbar-button-separator"}),e.createElement(M.Button,{ref:T,className:"k-toolbar-overflow-button",fillMode:"flat",svgIcon:P.moreHorizontalIcon,title:S.toLanguageString(p.moreButtonTitle,p.messages[p.moreButtonTitle]),onClick:y}),e.createElement(C.Popup,{anchor:t.current,show:b,popupClass:"k-toolbar-popup",style:{width:(h=t.current)==null?void 0:h.offsetWidth}},e.createElement("span",{className:`k-toolbar-items-list k-toolbar-items-list-${I.kendoThemeMaps.sizeMap[R]} k-toolbar-items-list-${i}`},l.current.length>0&&l.current))))};exports.ToolbarOverflowSection=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react"),x=require("@progress/kendo-react-popup"),A=require("@progress/kendo-svg-icons"),D=require("@progress/kendo-react-intl"),V=require("@progress/kendo-react-common"),$=require("./ToolbarSeparator.js"),k=require("../messages/index.js"),H=require("../../Button.js");function U(a){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const i in a)if(i!=="default"){const p=Object.getOwnPropertyDescriptor(a,i);Object.defineProperty(l,i,p.get?p:{enumerable:!0,get:()=>a[i]})}}return l.default=a,Object.freeze(l)}const t=U(L),G=a=>{var S;const{toolbarRef:l,children:i,fillMode:p,size:q}=a,[T,P]=t.useState(!1),c=t.useRef(t.Children.toArray(i).filter(e=>t.isValidElement(e)).map((e,r)=>t.cloneElement(e,{key:e.key||r}))),n=t.useRef([]),m=t.useRef(0),v=t.useRef(null),w=t.useRef(null),j=D.useLocalization(),[,R]=t.useReducer(e=>e+1,0),O=()=>{const e=l.current;if(!e)return null;const r=e.clientWidth,o=parseInt(window.getComputedStyle(e).gap||"0",10),u=Array.from(e.children).filter(s=>s.dataset.kendoWatermark===void 0),b=u.map(s=>Math.ceil(s.clientWidth)),f=b.reduce((s,W)=>s+W,0)+u.length*o+o*2;return{toolbarWidth:r,gap:o,childWidths:b,totalInnerWidth:f}},B=()=>{var C,E,I,z,M;const e=O();if(!e)return;const{toolbarWidth:r,gap:o,childWidths:u,totalInnerWidth:b}=e;let f=b,s=!1;const W=n.current.length>0,g=[...c.current],y=[...n.current];for(;f>r&&g.length>0;){const d=g.pop(),h=g.length;if(d&&y.unshift(d),h<u.length&&(f-=u[h]+o),!s&&!W){const _=Math.ceil((E=(C=w.current)==null?void 0:C.offsetWidth)!=null?E:0),F=Math.ceil((M=(z=(I=v.current)==null?void 0:I.element)==null?void 0:z.offsetWidth)!=null?M:0);f+=_+F+o*2}s=!0}if(s){c.current=g,n.current=y,m.current=r,R();return}if(n.current.length>0&&r>m.current+o*u.length){const d=[...n.current],h=d.shift();n.current=d,h&&(c.current=[...c.current,h]),m.current=r,R()}};t.useEffect(()=>{const e=new ResizeObserver(B),r=l.current;return r&&e.observe(r),()=>{r&&e.unobserve(r)}},[]),t.useLayoutEffect(()=>{if(!l.current||n.current.length===0||c.current.length===0)return;const e=O();if(!e||e.totalInnerWidth<=e.toolbarWidth)return;const r=[...c.current],o=r.pop();m.current=e.toolbarWidth,c.current=r,o&&(n.current=[o,...n.current]),R()});const N=()=>{P(!T)};return t.createElement(t.Fragment,null,c.current.length>0&&c.current,n.current.length>0&&t.createElement(t.Fragment,null,t.createElement($.ToolbarSeparator,{_ref:w,className:"k-toolbar-button-separator"}),t.createElement(H.Button,{ref:v,className:"k-toolbar-overflow-button",fillMode:"flat",svgIcon:A.moreHorizontalIcon,title:j.toLanguageString(k.moreButtonTitle,k.messages[k.moreButtonTitle]),onClick:N}),t.createElement(x.Popup,{anchor:l.current,show:T,popupClass:"k-toolbar-popup",style:{width:(S=l.current)==null?void 0:S.offsetWidth}},t.createElement("span",{className:`k-toolbar-items-list k-toolbar-items-list-${V.kendoThemeMaps.sizeMap[q]} k-toolbar-items-list-${p}`},n.current.length>0&&n.current))))};exports.ToolbarOverflowSection=G;

package/toolbar/tools/ToolbarOverflowSection.mjs

@@ -5,69 +5,95 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { Popup as W } from "@progress/kendo-react-popup";
 import * as e from "react";
-import { ToolbarSeparator as S } from "./ToolbarSeparator.mjs";
-import { Button as M } from "../../Button.mjs";
-import { moreHorizontalIcon as I } from "@progress/kendo-svg-icons";
-import { useLocalization as O } from "@progress/kendo-react-intl";
-import { moreButtonTitle as d, messages as A } from "../messages/index.mjs";
-import { kendoThemeMaps as F } from "@progress/kendo-react-common";
-const U = (h) => {
-  var m;
-  const { toolbarRef: o, children: b, fillMode: R, size: g } = h, [u, k] = e.useState(!1), c = e.useRef(
-    e.Children.toArray(b).filter((t) => e.isValidElement(t)).map((t, r) => e.cloneElement(t, { key: t.key || r }))
-  ), l = e.useRef([]), a = e.useRef(0), T = e.useRef(null), w = e.useRef(null), v = O(), [N, E] = e.useReducer((t) => t + 1, 0), f = () => {
-    if (!o.current)
+import { Popup as V } from "@progress/kendo-react-popup";
+import { moreHorizontalIcon as $ } from "@progress/kendo-svg-icons";
+import { useLocalization as H } from "@progress/kendo-react-intl";
+import { kendoThemeMaps as U } from "@progress/kendo-react-common";
+import { ToolbarSeparator as _ } from "./ToolbarSeparator.mjs";
+import { moreButtonTitle as y, messages as j } from "../messages/index.mjs";
+import { Button as q } from "../../Button.mjs";
+const Z = (M) => {
+  var k;
+  const { toolbarRef: i, children: O, fillMode: S, size: F } = M, [g, L] = e.useState(!1), l = e.useRef(
+    e.Children.toArray(O).filter((t) => e.isValidElement(t)).map((t, r) => e.cloneElement(t, { key: t.key || r }))
+  ), o = e.useRef([]), h = e.useRef(0), W = e.useRef(null), R = e.useRef(null), N = H(), [, p] = e.useReducer((t) => t + 1, 0), w = () => {
+    const t = i.current;
+    if (!t)
+      return null;
+    const r = t.clientWidth, n = parseInt(window.getComputedStyle(t).gap || "0", 10), c = Array.from(t.children).filter(
+      (s) => s.dataset.kendoWatermark === void 0
+    ), m = c.map((s) => Math.ceil(s.clientWidth)), a = m.reduce((s, b) => s + b, 0) + c.length * n + n * 2;
+    return { toolbarWidth: r, gap: n, childWidths: m, totalInnerWidth: a };
+  }, P = () => {
+    var T, E, C, z, I;
+    const t = w();
+    if (!t)
       return;
-    let t = 0;
-    const r = o.current.clientWidth, i = parseInt(window.getComputedStyle(o.current).gap || "0", 10), C = Array.from(o.current.children).reduce((n, s, P) => (n += Math.ceil(s.clientWidth), n), 0), p = Array.from(o.current.children).length, y = i * 2;
-    if (t = C + p * i + y, t > r) {
-      const n = [...c.current], s = n.pop();
-      a.current = r, c.current = n, s && (l.current = [s, ...l.current]);
-    } else if (r > a.current + i * p) {
-      const n = [...l.current], s = n.shift();
-      l.current = n, s && (c.current = [...c.current, s]), a.current = r;
+    const { toolbarWidth: r, gap: n, childWidths: c, totalInnerWidth: m } = t;
+    let a = m, s = !1;
+    const b = o.current.length > 0, d = [...l.current], v = [...o.current];
+    for (; a > r && d.length > 0; ) {
+      const u = d.pop(), f = d.length;
+      if (u && v.unshift(u), f < c.length && (a -= c[f] + n), !s && !b) {
+        const A = Math.ceil((E = (T = R.current) == null ? void 0 : T.offsetWidth) != null ? E : 0), B = Math.ceil((I = (z = (C = W.current) == null ? void 0 : C.element) == null ? void 0 : z.offsetWidth) != null ? I : 0);
+        a += A + B + n * 2;
+      }
+      s = !0;
+    }
+    if (s) {
+      l.current = d, o.current = v, h.current = r, p();
+      return;
+    }
+    if (o.current.length > 0 && r > h.current + n * c.length) {
+      const u = [...o.current], f = u.shift();
+      o.current = u, f && (l.current = [...l.current, f]), h.current = r, p();
     }
-    E();
   };
   e.useEffect(() => {
-    f();
-    const t = new ResizeObserver(f), r = o.current;
+    const t = new ResizeObserver(P), r = i.current;
     return r && t.observe(r), () => {
       r && t.unobserve(r);
     };
-  }, []);
-  const z = () => {
-    k(!u);
+  }, []), e.useLayoutEffect(() => {
+    if (!i.current || o.current.length === 0 || l.current.length === 0)
+      return;
+    const t = w();
+    if (!t || t.totalInnerWidth <= t.toolbarWidth)
+      return;
+    const r = [...l.current], n = r.pop();
+    h.current = t.toolbarWidth, l.current = r, n && (o.current = [n, ...o.current]), p();
+  });
+  const x = () => {
+    L(!g);
   };
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, c.current.length > 0 && c.current, l.current.length > 0 && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(S, { _ref: w, className: "k-toolbar-button-separator" }), /* @__PURE__ */ e.createElement(
-    M,
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, l.current.length > 0 && l.current, o.current.length > 0 && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(_, { _ref: R, className: "k-toolbar-button-separator" }), /* @__PURE__ */ e.createElement(
+    q,
     {
-      ref: T,
+      ref: W,
       className: "k-toolbar-overflow-button",
       fillMode: "flat",
-      svgIcon: I,
-      title: v.toLanguageString(d, A[d]),
-      onClick: z
+      svgIcon: $,
+      title: N.toLanguageString(y, j[y]),
+      onClick: x
     }
   ), /* @__PURE__ */ e.createElement(
-    W,
+    V,
     {
-      anchor: o.current,
-      show: u,
+      anchor: i.current,
+      show: g,
       popupClass: "k-toolbar-popup",
-      style: { width: (m = o.current) == null ? void 0 : m.offsetWidth }
+      style: { width: (k = i.current) == null ? void 0 : k.offsetWidth }
     },
     /* @__PURE__ */ e.createElement(
       "span",
       {
-        className: `k-toolbar-items-list k-toolbar-items-list-${F.sizeMap[g]} k-toolbar-items-list-${R}`
+        className: `k-toolbar-items-list k-toolbar-items-list-${U.sizeMap[F]} k-toolbar-items-list-${S}`
       },
-      l.current.length > 0 && l.current
+      o.current.length > 0 && o.current
     )
   )));
 };
 export {
-  U as ToolbarOverflowSection
+  Z as ToolbarOverflowSection
 };

package/toolbar/tools/ToolbarScrollButton.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),l=require("@progress/kendo-react-common"),m=require("@progress/kendo-react-intl"),r=require("../messages/index.js"),s=require("@progress/kendo-svg-icons");function f(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const e=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(n,o,e.get?e:{enumerable:!0,get:()=>t[o]})}}return n.default=t,Object.freeze(n)}const i=f(p),S=t=>{const n=m.useLocalization(),{disabled:o,type:e,scrollContentRef:c,buttonScrollSpeed:a,prevButton:u,nextButton:d}=t,b=v=>{c&&c.current&&a&&c.current.scrollBy({left:e==="next"?a:-a,behavior:"smooth"})},g=e==="prev"?u||"span":d||"span";return i.createElement(g,{className:l.classNames("k-button","k-icon-button",`k-toolbar-${e}`,{"k-disabled":o}),title:`${e==="prev"?n.toLanguageString(r.prevArrowTitle,r.messages[r.prevArrowTitle]):n.toLanguageString(r.nextArrowTitle,r.messages[r.nextArrowTitle])}`,"aria-hidden":!0,tabIndex:o?-1:void 0,onClick:b},i.createElement(l.SvgIcon,{icon:e==="prev"?s.caretAltLeftIcon:s.caretAltRightIcon,className:"k-button-icon"}))};exports.ToolbarScrollButton=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),l=require("@progress/kendo-react-common"),m=require("@progress/kendo-react-intl"),r=require("../messages/index.js"),s=require("@progress/kendo-svg-icons");function f(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const e=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(o,n,e.get?e:{enumerable:!0,get:()=>t[n]})}}return o.default=t,Object.freeze(o)}const i=f(p),v=t=>{const o=m.useLocalization(),{disabled:n,type:e,scrollContentRef:c,buttonScrollSpeed:a,prevButton:u,nextButton:d}=t,b=S=>{c&&c.current&&a&&c.current.scrollBy({left:e==="next"?a:-a,behavior:"smooth"})},g=e==="prev"?u||"span":d||"span";return i.createElement(g,{className:l.classNames("k-button","k-icon-button",`k-toolbar-${e}`),title:`${e==="prev"?o.toLanguageString(r.prevArrowTitle,r.messages[r.prevArrowTitle]):o.toLanguageString(r.nextArrowTitle,r.messages[r.nextArrowTitle])}`,"aria-hidden":!0,tabIndex:n?-1:void 0,onClick:b},i.createElement(l.SvgIcon,{icon:e==="prev"?s.chevronLeftIcon:s.chevronRightIcon,className:"k-button-icon"}))};exports.ToolbarScrollButton=v;

package/toolbar/tools/ToolbarScrollButton.mjs

@@ -5,36 +5,34 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as a from "react";
-import { classNames as d, SvgIcon as f } from "@progress/kendo-react-common";
+import * as r from "react";
+import { classNames as b, SvgIcon as f } from "@progress/kendo-react-common";
 import { useLocalization as g } from "@progress/kendo-react-intl";
-import { prevArrowTitle as l, messages as c, nextArrowTitle as i } from "../messages/index.mjs";
-import { caretAltLeftIcon as v, caretAltRightIcon as S } from "@progress/kendo-svg-icons";
-const I = (s) => {
-  const n = g(), { disabled: r, type: t, scrollContentRef: o, buttonScrollSpeed: e, prevButton: m, nextButton: p } = s, u = (k) => {
+import { prevArrowTitle as a, messages as c, nextArrowTitle as l } from "../messages/index.mjs";
+import { chevronLeftIcon as d, chevronRightIcon as h } from "@progress/kendo-svg-icons";
+const L = (i) => {
+  const n = g(), { disabled: s, type: t, scrollContentRef: o, buttonScrollSpeed: e, prevButton: m, nextButton: p } = i, u = (S) => {
     o && o.current && e && o.current.scrollBy({
       left: t === "next" ? e : -e,
       behavior: "smooth"
     });
-  }, b = t === "prev" ? m || "span" : p || "span";
+  }, v = t === "prev" ? m || "span" : p || "span";
   return (
     // Using span instead of real Button component is intentional.
     // Ref: https://progresssoftware.atlassian.net/wiki/spaces/DE/pages/edit-v2/544997922#Hidden-interactive-elements
-    /* @__PURE__ */ a.createElement(
-      b,
+    /* @__PURE__ */ r.createElement(
+      v,
       {
-        className: d("k-button", "k-icon-button", `k-toolbar-${t}`, {
-          "k-disabled": r
-        }),
-        title: `${t === "prev" ? n.toLanguageString(l, c[l]) : n.toLanguageString(i, c[i])}`,
+        className: b("k-button", "k-icon-button", `k-toolbar-${t}`),
+        title: `${t === "prev" ? n.toLanguageString(a, c[a]) : n.toLanguageString(l, c[l])}`,
         "aria-hidden": !0,
-        tabIndex: r ? -1 : void 0,
+        tabIndex: s ? -1 : void 0,
         onClick: u
       },
-      /* @__PURE__ */ a.createElement(f, { icon: t === "prev" ? v : S, className: "k-button-icon" })
+      /* @__PURE__ */ r.createElement(f, { icon: t === "prev" ? d : h, className: "k-button-icon" })
     )
   );
 };
 export {
-  I as ToolbarScrollButton
+  L as ToolbarScrollButton
 };