@progress/kendo-react-listbox/ListBoxToolbar.js

React ListBox enables you to display a list of items and manage the data between multiple lists. KendoReact ListBox 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 P=require("react"),f=require("prop-types"),k=require("@progress/kendo-react-common"),B=require("@progress/kendo-react-buttons"),j=require("@progress/kendo-react-intl"),o=require("@progress/kendo-svg-icons"),U=require("./messages/index.js");function _(l){const g=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const i in l)if(i!=="default"){const b=Object.getOwnPropertyDescriptor(l,i);Object.defineProperty(g,i,b.get?b:{enumerable:!0,get:()=>l[i]})}}return g.default=l,Object.freeze(g)}const r=_(P),D=[{name:"moveUp",iconName:"caret-alt-up",svgIcon:o.caretAltUpIcon},{name:"moveDown",iconName:"caret-alt-down",svgIcon:o.caretAltDownIcon},{name:"transferTo",iconName:"caret-alt-right",svgIcon:o.caretAltRightIcon},{name:"transferFrom",iconName:"caret-alt-left",svgIcon:o.caretAltLeftIcon},{name:"transferAllTo",iconName:"caret-double-alt-right",svgIcon:o.caretDoubleAltRightIcon},{name:"transferAllFrom",iconName:"caret-double-alt-left",svgIcon:o.caretDoubleAltLeftIcon},{name:"remove",iconName:"x",svgIcon:o.xIcon}],p=r.forwardRef((l,g)=>{const{tools:i,dir:b,onToolClick:w,size:L=h.size,data:d=h.data,dataConnected:n=h.dataConnected,selectedField:C=h.selectedField}=l,F=j.useLocalization(),A=r.useRef(null),T=r.useRef(null),x=r.useCallback(()=>({onToolClick:w,props:l,context:{},state:{},refs:{}}),[]);r.useImperativeHandle(T,x),r.useImperativeHandle(g,()=>T.current);const y=(t,e,c)=>{c.preventDefault(),e.focusNext(t)},N=(t,e,c)=>{c.preventDefault(),e.focusPrevious(t)},v=r.useMemo(()=>new k.Navigation({root:A,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:y,ArrowRight:y,ArrowUp:N,ArrowLeft:N,Enter:(t,e,c)=>{t.click(),e.focusElement(e.current,t)}}}}),[]),S=r.useCallback(v.triggerKeyboardEvent.bind(v),[]);r.useEffect(()=>(v.initializeRovingTab(),()=>v.removeFocusListener()),[]);const q=t=>{switch(t.name){case"caret-alt-right":return o.caretAltLeftIcon;case"caret-alt-left":return o.caretAltRightIcon;case"caret-double-alt-right":return o.caretDoubleAltLeftIcon;case"caret-double-alt-left":return o.caretDoubleAltRightIcon}return t},E=t=>{switch(t){case"caret-alt-right":return"caret-alt-left";case"caret-alt-left":return"caret-alt-right";case"caret-double-alt-right":return"caret-double-alt-left";case"caret-double-alt-left":return"caret-double-alt-right"}return t},O=(t,e)=>{k.dispatchEvent(w,t,x(),{toolName:e})},z=t=>{let e=!0;const c=C||"selected",a=d.length,I=n.length,u=d.findIndex(s=>s[c]===!0)>=0,m=n.findIndex(s=>s[c]===!0)>=0;switch(t){case"moveUp":u?e=d.length>0?d[0].selected:!0:m?e=n.length>0?n[0].selected:!0:e=!0;break;case"moveDown":u?e=d[a-1]?d[a-1].selected:!0:m?e=n.length>0?n[I-1].selected:!0:e=!0;break;case"transferTo":e=!(n&&u);break;case"transferFrom":n?e=!(n&&m):e=!0;break;case"transferAllTo":e=!(n&&d.length>0);break;case"transferAllFrom":e=!(n&&n.length>0);break;case"remove":e=!(u||m);break}return e},R=b==="rtl";return r.createElement("div",{className:k.classNames("k-listbox-actions"),ref:A,onKeyDown:S},i&&i.map((t,e)=>{const c=D.findIndex(s=>s.name===t),a=D[c],I=z(a.name),u=`listbox.${a.name}`,m=F.toLanguageString(u,U.messages[u]);return r.createElement(B.Button,{size:L,key:e,disabled:I,"data-command":a.name,title:m,"aria-label":m,icon:R?E(a.iconName):a.iconName,svgIcon:R?q(a.svgIcon):a.svgIcon,onClick:s=>{s.preventDefault(),O(s,a.name)}})}))}),h={data:[],dataConnected:[],selectedField:"selected",size:"medium"};p.propTypes={data:f.array.isRequired,dataConnected:f.array.isRequired,tools:f.array,selectedField:f.string,dir:f.string,size:f.oneOf([null,"small","medium","large"])};p.displayName="ListBoxToolbarInner";exports.ListBoxToolbar=p;