@progress/kendo-react-buttons 9.4.0-develop.2 → 9.4.0-develop.20

package/index.d.mts

@@ -2016,10 +2016,54 @@ export declare interface ToolbarItemProps extends KendoReactComponentBaseProps {
     style?: React_2.CSSProperties;
 }
 
+/**
+ * @hidden
+ */
+export declare interface ToolbarOverflowProps {
+    /**
+     * Represents the possible overflow mode options of the Toolbar.
+     * Applicable when there is not enough space to render all tools.
+     *
+     * @default `section`
+     */
+    overflow?: 'none' | 'section' | 'scroll';
+    /**
+     * Determines the Toolbar scroll buttons visibility.
+     * Applicable when the overflow property is set to `scroll`.
+     *
+     * @default `auto`
+     */
+    scrollButtons?: 'hidden' | 'visible' | 'auto';
+    /**
+     * Determines the Toolbar scroll buttons position.
+     * Applicable when the overflow property is set to `scroll`.
+     *
+     * @default `split`
+     */
+    scrollButtonsPosition?: 'start' | 'end' | 'split';
+    /**
+     * Sets the Toolbar scroll speed in pixels when scrolling via clicking the previous or next button.
+     * Applicable when the overflow property is set to `scroll`.
+     *
+     * @default 100
+     */
+    buttonScrollSpeed?: number;
+    /**
+     * Defines the custom component that will be rendered as a previous button.
+     * To remove the button, set a function which returns null `() => null`.
+     */
+    prevButton?: React.ComponentType;
+    /**
+     * Defines the custom component that will be rendered as a next button.
+     * To remove the button, set a function which returns null `() => null`.
+     */
+    nextButton?: React.ComponentType;
+}
+
 /**
  * Represents the props of the [KendoReact Toolbar component]({% slug overview_toolbar %}).
  */
-export declare interface ToolbarProps extends KendoReactComponentBaseProps {
+export declare interface ToolbarProps extends KendoReactComponentBaseProps, ToolbarOverflowProps {
     /**
      * Sets additional classes to the Toolbar.
      */
@@ -2123,6 +2167,10 @@ declare interface ToolbarSeparatorProps {
      * Sets additional classes to the ToolbarSeparator component.
      */
     className?: string;
+    /**
+     * @hidden
+     */
+    _ref?: React_2.Ref<HTMLDivElement>;
 }
 
 /**

package/index.d.ts

@@ -2016,10 +2016,54 @@ export declare interface ToolbarItemProps extends KendoReactComponentBaseProps {
     style?: React_2.CSSProperties;
 }
 
+/**
+ * @hidden
+ */
+export declare interface ToolbarOverflowProps {
+    /**
+     * Represents the possible overflow mode options of the Toolbar.
+     * Applicable when there is not enough space to render all tools.
+     *
+     * @default `section`
+     */
+    overflow?: 'none' | 'section' | 'scroll';
+    /**
+     * Determines the Toolbar scroll buttons visibility.
+     * Applicable when the overflow property is set to `scroll`.
+     *
+     * @default `auto`
+     */
+    scrollButtons?: 'hidden' | 'visible' | 'auto';
+    /**
+     * Determines the Toolbar scroll buttons position.
+     * Applicable when the overflow property is set to `scroll`.
+     *
+     * @default `split`
+     */
+    scrollButtonsPosition?: 'start' | 'end' | 'split';
+    /**
+     * Sets the Toolbar scroll speed in pixels when scrolling via clicking the previous or next button.
+     * Applicable when the overflow property is set to `scroll`.
+     *
+     * @default 100
+     */
+    buttonScrollSpeed?: number;
+    /**
+     * Defines the custom component that will be rendered as a previous button.
+     * To remove the button, set a function which returns null `() => null`.
+     */
+    prevButton?: React.ComponentType;
+    /**
+     * Defines the custom component that will be rendered as a next button.
+     * To remove the button, set a function which returns null `() => null`.
+     */
+    nextButton?: React.ComponentType;
+}
+
 /**
  * Represents the props of the [KendoReact Toolbar component]({% slug overview_toolbar %}).
  */
-export declare interface ToolbarProps extends KendoReactComponentBaseProps {
+export declare interface ToolbarProps extends KendoReactComponentBaseProps, ToolbarOverflowProps {
     /**
      * Sets additional classes to the Toolbar.
      */
@@ -2123,6 +2167,10 @@ declare interface ToolbarSeparatorProps {
      * Sets additional classes to the ToolbarSeparator component.
      */
     className?: string;
+    /**
+     * @hidden
+     */
+    _ref?: React_2.Ref<HTMLDivElement>;
 }
 
 /**

package/index.js

@@ -5,4 +5,5 @@
  * 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 u=require("./Button.js"),i=require("./ButtonGroup.js"),t=require("./ListButton/SplitButton.js"),a=require("./ListButton/SplitButtonItem.js"),o=require("./ListButton/DropDownButton.js"),p=require("./ListButton/DropDownButtonItem.js"),l=require("./toolbar/Toolbar.js"),B=require("./toolbar/tools/ToolbarItem.js"),c=require("./toolbar/tools/ToolbarSeparator.js"),s=require("./toolbar/tools/ToolbarSpacer.js"),D=require("./util.js"),m=require("./Chip/Chip.js"),S=require("./Chip/ChipList.js"),b=require("./FloatingActionButton/FloatingActionButton.js"),q=require("./FloatingActionButton/FloatingActionButtonItem.js"),n=require("@progress/kendo-react-common"),r=n.withIdHOC(o.DropDownButton);r.displayName="KendoReactDropDownButton";const e=n.withIdHOC(t.SplitButton);e.displayName="KendoReactSplitButton";exports.Button=u.Button;exports.ButtonGroup=i.ButtonGroup;exports.SplitButtonClassComponent=t.SplitButton;exports.SplitButtonItem=a.SplitButtonItem;exports.DropDownButtonClassComponent=o.DropDownButton;exports.DropDownButtonItem=p.DropDownButtonItem;exports.Toolbar=l.Toolbar;exports.ToolbarItem=B.ToolbarItem;exports.ToolbarSeparator=c.ToolbarSeparator;exports.ToolbarSpacer=s.ToolbarSpacer;exports.toolbarButtons=D.toolbarButtons;exports.Chip=m.Chip;exports.ChipList=S.ChipList;exports.FloatingActionButton=b.FloatingActionButton;exports.FloatingActionButtonItem=q.FloatingActionButtonItem;exports.DropDownButton=r;exports.SplitButton=e;
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./Button.js"),i=require("./ButtonGroup.js"),t=require("./ListButton/SplitButton.js"),a=require("./ListButton/SplitButtonItem.js"),o=require("./ListButton/DropDownButton.js"),p=require("./ListButton/DropDownButtonItem.js"),l=require("./toolbar/Toolbar.js"),B=require("./toolbar/tools/ToolbarItem.js"),c=require("./toolbar/tools/ToolbarSeparator.js"),s=require("./toolbar/tools/ToolbarSpacer.js"),D=require("./util.js"),m=require("./Chip/Chip.js"),S=require("./Chip/ChipList.js"),b=require("./FloatingActionButton/FloatingActionButton.js"),q=require("./FloatingActionButton/FloatingActionButtonItem.js"),n=require("@progress/kendo-react-common"),r=n.withIdHOC(o.DropDownButton);r.displayName="KendoReactDropDownButton";const e=n.withIdHOC(t.SplitButton);e.displayName="KendoReactSplitButton";exports.Button=u.Button;exports.ButtonGroup=i.ButtonGroup;exports.SplitButtonClassComponent=t.SplitButton;exports.SplitButtonItem=a.SplitButtonItem;exports.DropDownButtonClassComponent=o.DropDownButton;exports.DropDownButtonItem=p.DropDownButtonItem;exports.Toolbar=l.Toolbar;exports.ToolbarItem=B.ToolbarItem;exports.ToolbarSeparator=c.ToolbarSeparator;exports.ToolbarSpacer=s.ToolbarSpacer;exports.toolbarButtons=D.toolbarButtons;exports.Chip=m.Chip;exports.ChipList=S.ChipList;exports.FloatingActionButton=b.FloatingActionButton;exports.FloatingActionButtonItem=q.FloatingActionButtonItem;exports.DropDownButton=r;exports.SplitButton=e;

package/index.mjs

@@ -11,7 +11,7 @@ import { ButtonGroup as f } from "./ButtonGroup.mjs";
 import { SplitButton as t } from "./ListButton/SplitButton.mjs";
 import { SplitButtonItem as x } from "./ListButton/SplitButtonItem.mjs";
 import { DropDownButton as r } from "./ListButton/DropDownButton.mjs";
-import { DropDownButtonItem as c } from "./ListButton/DropDownButtonItem.mjs";
+import { DropDownButtonItem as S } from "./ListButton/DropDownButtonItem.mjs";
 import { Toolbar as w } from "./toolbar/Toolbar.mjs";
 import { ToolbarItem as b } from "./toolbar/tools/ToolbarItem.mjs";
 import { ToolbarSeparator as I } from "./toolbar/tools/ToolbarSeparator.mjs";
@@ -37,7 +37,7 @@ export {
   N as ChipList,
   p as DropDownButton,
   r as DropDownButtonClassComponent,
-  c as DropDownButtonItem,
+  S as DropDownButtonItem,
   $ as FloatingActionButton,
   H as FloatingActionButtonItem,
   n as SplitButton,

package/package-metadata.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 e={name:"@progress/kendo-react-buttons",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1737713685,version:"9.4.0-develop.2",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-buttons",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1738846682,version:"9.4.0-develop.20",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -5,14 +5,13 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";
 const e = {
   name: "@progress/kendo-react-buttons",
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1737713685,
-  version: "9.4.0-develop.2",
+  publishDate: 1738846682,
+  version: "9.4.0-develop.20",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-buttons",
-  "version": "9.4.0-develop.2",
+  "version": "9.4.0-develop.20",
   "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",
@@ -26,8 +26,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-common": "9.4.0-develop.2",
-    "@progress/kendo-react-popup": "9.4.0-develop.2",
+    "@progress/kendo-react-common": "9.4.0-develop.20",
+    "@progress/kendo-react-popup": "9.4.0-develop.20",
     "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
@@ -53,7 +53,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1737713685,
+      "publishDate": 1738846682,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },

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

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

package/toolbar/messages/index.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t="prevArrow.title",e="nextArrow.title",o="moreButtonTitle.title",r={[t]:"Previous scroll button",[e]:"Next scroll button",[o]:"More button"};exports.messages=r;exports.moreButtonTitle=o;exports.nextArrowTitle=e;exports.prevArrowTitle=t;

package/toolbar/messages/index.mjs

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+const t = "prevArrow.title", o = "nextArrow.title", e = "moreButtonTitle.title", r = {
+  [t]: "Previous scroll button",
+  [o]: "Next scroll button",
+  [e]: "More button"
+};
+export {
+  r as messages,
+  e as moreButtonTitle,
+  o as nextArrowTitle,
+  t as prevArrowTitle
+};

package/toolbar/tools/ToolbarItem.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 i=require("react"),u=require("prop-types"),m=require("@progress/kendo-react-common");function d(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const n=d(i),a=n.forwardRef((e,r)=>{const{id:t,className:o,style:s,children:l}=e,c=n.useRef(null);return n.useImperativeHandle(r,()=>({element:c.current})),n.createElement("div",{id:t,className:m.classNames("k-toolbar-item",o),style:s,ref:c},l)});a.displayName="KendoReactToolbarItem";a.propTypes={className:u.string};exports.ToolbarItem=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),u=require("prop-types"),m=require("@progress/kendo-react-common");function d(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const n=d(i),a=n.forwardRef((e,r)=>{const{id:t,className:o,style:s,children:l}=e,c=n.useRef(null);return n.useImperativeHandle(r,()=>({element:c.current})),n.createElement("div",{id:t,className:m.classNames("k-toolbar-item",o),style:s,ref:c},l)});a.displayName="KendoReactToolbarItem";a.propTypes={className:u.string};exports.ToolbarItem=a;

package/toolbar/tools/ToolbarItem.mjs

@@ -5,18 +5,17 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";
 import * as e from "react";
 import c from "prop-types";
-import { classNames as i } from "@progress/kendo-react-common";
-const t = e.forwardRef((s, a) => {
-  const { id: o, className: m, style: l, children: n } = s, r = e.useRef(null);
+import { classNames as p } from "@progress/kendo-react-common";
+const t = e.forwardRef((a, o) => {
+  const { id: s, className: m, style: l, children: n } = a, r = e.useRef(null);
   return e.useImperativeHandle(
-    a,
+    o,
     () => ({
       element: r.current
     })
-  ), /* @__PURE__ */ e.createElement("div", { id: o, className: i("k-toolbar-item", m), style: l, ref: r }, n);
+  ), /* @__PURE__ */ e.createElement("div", { id: s, className: p("k-toolbar-item", m), style: l, ref: r }, n);
 });
 t.displayName = "KendoReactToolbarItem";
 t.propTypes = {

package/toolbar/tools/ToolbarOverflowSection.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * 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"),O=require("react"),q=require("./ToolbarSeparator.js"),M=require("../../Button.js"),P=require("@progress/kendo-svg-icons"),W=require("@progress/kendo-react-intl"),m=require("../messages/index.js"),I=require("@progress/kendo-react-common");function j(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const s in n)if(s!=="default"){const u=Object.getOwnPropertyDescriptor(n,s);Object.defineProperty(t,s,u.get?u:{enumerable:!0,get:()=>n[s]})}}return t.default=n,Object.freeze(t)}const e=j(O),_=n=>{var h;const{toolbarRef:t,children:s,fillMode:u,size:R}=n,[b,k]=e.useState(!1),a=e.useRef(e.Children.toArray(s).filter(r=>e.isValidElement(r)).map((r,i)=>e.cloneElement(r,{key:r.key||i}))),c=e.useRef([]),f=e.useRef(0),w=e.useRef(null),T=e.useRef(null),S=W.useLocalization(),[B,v]=e.useReducer(r=>r+1,0),d=()=>{if(!t.current)return;let r=0;const i=t.current.clientWidth,p=parseInt(window.getComputedStyle(t.current).gap||"0",10),E=Array.from(t.current.children).reduce((o,l,L)=>(o+=Math.ceil(l.clientWidth),o),0),g=Array.from(t.current.children).length,z=p*2;if(r=E+g*p+z,r>i){const o=[...a.current],l=o.pop();f.current=i,a.current=o,l&&(c.current=[l,...c.current])}else if(i>f.current+p*g){const o=[...c.current],l=o.shift();c.current=o,l&&(a.current=[...a.current,l]),f.current=i}v()};e.useEffect(()=>(d(),window.addEventListener("resize",d),()=>window.removeEventListener("resize",d)),[]);const y=()=>{k(!b)};return e.createElement(e.Fragment,null,a.current.length>0&&a.current,c.current.length>0&&e.createElement(e.Fragment,null,e.createElement(q.ToolbarSeparator,{_ref:T,className:"k-toolbar-button-separator"}),e.createElement(M.Button,{ref:w,className:"k-toolbar-overflow-button",fillMode:"flat",svgIcon:P.moreHorizontalIcon,title:S.toLanguageString(m.moreButtonTitle,m.messages[m.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-${u}`},c.current.length>0&&c.current))))};exports.ToolbarOverflowSection=_;