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

package/index.d.mts

@@ -2016,54 +2016,10 @@ 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, ToolbarOverflowProps {
+export declare interface ToolbarProps extends KendoReactComponentBaseProps {
     /**
      * Sets additional classes to the Toolbar.
      */
@@ -2167,10 +2123,6 @@ declare interface ToolbarSeparatorProps {
      * Sets additional classes to the ToolbarSeparator component.
      */
     className?: string;
-    /**
-     * @hidden
-     */
-    _ref?: React_2.Ref<HTMLDivElement>;
 }
 
 /**

package/index.d.ts

@@ -2016,54 +2016,10 @@ 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, ToolbarOverflowProps {
+export declare interface ToolbarProps extends KendoReactComponentBaseProps {
     /**
      * Sets additional classes to the Toolbar.
      */
@@ -2167,10 +2123,6 @@ declare interface ToolbarSeparatorProps {
      * Sets additional classes to the ToolbarSeparator component.
      */
     className?: string;
-    /**
-     * @hidden
-     */
-    _ref?: React_2.Ref<HTMLDivElement>;
 }
 
 /**

package/index.js

@@ -5,5 +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 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 S } from "./ListButton/DropDownButtonItem.mjs";
+import { DropDownButtonItem as c } 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,
-  S as DropDownButtonItem,
+  c 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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-buttons",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1738841765,version:"9.4.0-develop.19",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
+"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;

package/package-metadata.mjs

@@ -5,13 +5,14 @@
  * 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: 1738841765,
-  version: "9.4.0-develop.19",
+  publishDate: 1737713685,
+  version: "9.4.0-develop.2",
   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.19",
+  "version": "9.4.0-develop.2",
   "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.19",
-    "@progress/kendo-react-popup": "9.4.0-develop.19",
+    "@progress/kendo-react-common": "9.4.0-develop.2",
+    "@progress/kendo-react-popup": "9.4.0-develop.2",
     "@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": 1738841765,
+      "publishDate": 1737713685,
       "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 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;
+"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;

package/toolbar/Toolbar.mjs

@@ -5,176 +5,123 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-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);
+"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);
   const {
-    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);
+    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);
     return Math.max(
       0,
-      s.current.findIndex((l) => l === e)
+      o.current.findIndex((c) => c === e)
     );
-  };
-  t.useImperativeHandle(
-    I,
+  }, g = r.useRef({ element: null, props: a });
+  r.useImperativeHandle(
+    g,
     () => ({
-      element: r.current,
-      props: i
+      element: n.current,
+      props: a
     })
-  ), 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)
+  ), 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)
         return;
-      s.current = Array.from(
-        r.current.querySelectorAll(y.join(","))
-      ), H(M()), T();
+      o.current = Array.from(
+        n.current.querySelectorAll(d.join(","))
+      ), M(z());
     } else
-      C.current = !0;
+      p.current = !0;
   });
-  const H = (e) => {
-    s.current.forEach((l, o) => {
-      l.tabIndex = o === e ? B : -1;
+  const M = (e) => {
+    o.current.forEach((c, t) => {
+      c.tabIndex = t === e ? I : -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);
+  }, 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);
     }
-  }, L = (e) => {
-    if (!r.current)
+  }, w = (e) => {
+    if (!n.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 };
-      E && E.call(void 0, { target: I.current, ...a, nativeEvent: e });
-    }
-    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));
+    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 });
     }
-  }, [g]);
-  return t.useEffect(() => {
-    const e = m.current;
-    if (e)
-      return e.addEventListener("scroll", R), () => {
-        e.removeEventListener("scroll", R);
-      };
-  }, [R]), /* @__PURE__ */ t.createElement(
+  };
+  return /* @__PURE__ */ r.createElement(
     "div",
     {
-      id: j,
-      "aria-label": q,
-      className: _(
+      id: N,
+      "aria-label": T,
+      className: q(
         "k-toolbar",
         {
-          [`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"
+          [`k-toolbar-${A.sizeMap[y] || y}`]: y,
+          [`k-toolbar-${R}`]: R
         },
-        K
+        H
       ),
-      style: D,
-      role: x !== void 0 ? x || void 0 : "toolbar",
-      dir: g,
-      ref: r,
-      onKeyDown: p !== !1 ? X : void 0
+      style: K,
+      role: k !== void 0 ? k || void 0 : "toolbar",
+      dir: W,
+      ref: n,
+      onKeyDown: b !== !1 ? S : void 0
     },
-    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
+    E
   );
-}), f = {
+}), h = {
   tabIndex: 0,
   size: "medium",
-  fillMode: "solid",
-  scrollButtons: "auto",
-  scrollButtonsPosition: "split",
-  buttonScrollSpeed: 100
+  fillMode: "solid"
 };
-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
+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"])
 };
 export {
-  N as Toolbar
+  v as Toolbar
 };

package/toolbar/tools/ToolbarItem.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 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 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;

package/toolbar/tools/ToolbarItem.mjs

@@ -5,17 +5,18 @@
  * 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 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);
+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);
   return e.useImperativeHandle(
-    o,
+    a,
     () => ({
       element: r.current
     })
-  ), /* @__PURE__ */ e.createElement("div", { id: s, className: p("k-toolbar-item", m), style: l, ref: r }, n);
+  ), /* @__PURE__ */ e.createElement("div", { id: o, className: i("k-toolbar-item", m), style: l, ref: r }, n);
 });
 t.displayName = "KendoReactToolbarItem";
 t.propTypes = {

package/toolbar/tools/ToolbarSeparator.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 o=require("react"),c=require("@progress/kendo-react-common");function n(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const s=n(o),l=e=>s.createElement("div",{ref:e._ref,className:c.classNames("k-toolbar-separator k-separator",e.className)});exports.ToolbarSeparator=l;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),c=require("@progress/kendo-react-common");function n(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const s=n(o),l=e=>s.createElement("div",{className:c.classNames("k-separator",e.className)});exports.ToolbarSeparator=l;

package/toolbar/tools/ToolbarSeparator.mjs

@@ -5,9 +5,10 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as r from "react";
-import { classNames as e } from "@progress/kendo-react-common";
-const t = (a) => /* @__PURE__ */ r.createElement("div", { ref: a._ref, className: e("k-toolbar-separator k-separator", a.className) });
+"use client";
+import * as e from "react";
+import { classNames as r } from "@progress/kendo-react-common";
+const t = (a) => /* @__PURE__ */ e.createElement("div", { className: r("k-separator", a.className) });
 export {
   t as ToolbarSeparator
 };

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

package/toolbar/tools/ToolbarSpacer.mjs

@@ -5,21 +5,22 @@
  * 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 l } from "@progress/kendo-react-common";
-const s = e.forwardRef(
-  (r, t) => {
-    const a = e.useRef(null), m = e.useRef(null);
-    e.useImperativeHandle(m, () => ({ element: a.current })), e.useImperativeHandle(t, () => ({ element: a.current }));
-    const o = e.useMemo(() => l("k-spacer", r.className), [r.className]);
-    return /* @__PURE__ */ e.createElement("span", { ref: a, className: o });
+import m from "prop-types";
+import { classNames as n } from "@progress/kendo-react-common";
+const r = e.forwardRef(
+  (s, t) => {
+    const a = e.useRef(null), c = e.useRef(null);
+    e.useImperativeHandle(c, () => ({ element: a.current })), e.useImperativeHandle(t, () => ({ element: a.current }));
+    const l = e.useMemo(() => n("k-spacer", s.className), [s.className]);
+    return /* @__PURE__ */ e.createElement("span", { ref: a, className: l });
   }
 );
-s.displayName = "KendoReactToolbarSpacer";
-s.propTypes = {
-  className: c.string
+r.displayName = "KendoReactToolbarSpacer";
+r.propTypes = {
+  className: m.string
 };
 export {
-  s as ToolbarSpacer
+  r as ToolbarSpacer
 };