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

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),v=t=>{const n=m.useLocalization(),{disabled:o,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}`,{"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.chevronLeftIcon:s.chevronRightIcon,className:"k-button-icon"}))};exports.ToolbarScrollButton=v;
+"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,33 +5,31 @@
  * 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 v } from "@progress/kendo-react-common";
-import { useLocalization as f } from "@progress/kendo-react-intl";
-import { prevArrowTitle as c, messages as l, nextArrowTitle as i } from "../messages/index.mjs";
-import { chevronLeftIcon as g, chevronRightIcon as h } from "@progress/kendo-svg-icons";
-const L = (s) => {
-  const n = f(), { disabled: r, type: t, scrollContentRef: o, buttonScrollSpeed: e, prevButton: m, nextButton: p } = s, u = (S) => {
+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 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(c, l[c]) : n.toLanguageString(i, l[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(v, { icon: t === "prev" ? g : h, className: "k-button-icon" })
+      /* @__PURE__ */ r.createElement(f, { icon: t === "prev" ? d : h, className: "k-button-icon" })
     )
   );
 };