@progress/kendo-react-buttons/toolbar/tools/ToolbarOverflowSection.js

All you need in React Button in one package: disabled/enabled states, built-in styles and more. KendoReact Buttons package

/**
 * @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"),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=_;