@progress/kendo-react-listbox/ListBox.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 G=require("react"),u=require("prop-types"),a=require("@progress/kendo-react-common"),R=require("./interfaces/Enums.js");function U(n){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const m in n)if(m!=="default"){const y=Object.getOwnPropertyDescriptor(n,m);Object.defineProperty(f,m,y.get?y:{enumerable:!0,get:()=>n[m]})}}return f.default=n,Object.freeze(f)}const s=U(G),k=s.forwardRef((n,f)=>{const{id:m,style:y,data:c,textField:h,className:T,valueField:S,selectedField:D,onDrop:L,onKeyDown:N,onDragStart:C,onDragLeave:v,onDragOver:F,onItemClick:z,onItemSelect:g,onKeyboardNavigate:d,size:b=E.size,draggable:_=E.draggable,toolbarPosition:K=E.toolbarPosition}=n,x=s.useRef(null),O=s.useRef(null),w=s.useRef(null),o=s.useCallback(()=>({element:w.current,props:n}),[]);s.useImperativeHandle(O,o),s.useImperativeHandle(f,()=>O.current);const P=m+"-accessibility-id",I=a.kendoThemeMaps.sizeMap[b]||b,q=t=>{if(D)return!!t[D]},A=t=>h?t[h]:t.toString(),j=t=>{N&&a.dispatchEvent(N,t,o(),void 0)},B=t=>{t.target.classList.contains("k-list-content")&&(n.data.length>0?a.dispatchEvent(n.onDrop,t,o(),{dataItem:n.data[n.data.length-1]}):a.dispatchEvent(n.onDrop,t,o(),{dataItem:null}))},M=()=>K===R.toolbarPosition.NONE||n.toolbar===void 0?`k-listbox-actions-${E.toolbarPosition}`:`k-listbox-actions-${K}`,H=t=>{v&&t.target.classList.contains("k-list-content")&&a.dispatchEvent(v,t,o(),void 0)},p=s.useMemo(()=>new a.Navigation({root:x,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{Space:(t,i,e)=>{const r=i.elements.indexOf(t);e.metaKey&&a.dispatchEvent(g,e,o(),{dataItem:c[r]}),a.dispatchEvent(g,e,o(),{dataItem:c[r]})},ArrowDown:(t,i,e)=>{if(e.metaKey&&e.shiftKey)a.dispatchEvent(d,e,o(),{actionName:"moveDown"});else if(e.metaKey&&!e.shiftKey)e.preventDefault(),i.focusNext(t);else if(!(e.shiftKey&&!e.metaKey)){e.preventDefault();const r=i.elements.indexOf(t),l=c[r+1];l&&(a.dispatchEvent(g,e,o(),{dataItem:l}),i.focusNext(t))}},ArrowUp:(t,i,e)=>{if(e.metaKey&&e.shiftKey)a.dispatchEvent(d,e,o(),{actionName:"moveUp"});else if(e.metaKey&&!e.shiftKey)e.preventDefault(),i.focusPrevious(t);else if(!(e.shiftKey&&!e.metaKey)){e.preventDefault();const r=i.elements.indexOf(t),l=c[r-1];l&&(a.dispatchEvent(g,e,o(),{dataItem:l}),i.focusPrevious(t))}},ArrowLeft:(t,i,e)=>{e.metaKey&&e.shiftKey?a.dispatchEvent(d,e,o(),{actionName:"transferAllFrom"}):e.metaKey&&a.dispatchEvent(d,e,o(),{actionName:"transferFrom"})},ArrowRight:(t,i,e)=>{e.metaKey&&e.shiftKey?a.dispatchEvent(d,e,o(),{actionName:"transferAllTo"}):e.metaKey&&a.dispatchEvent(d,e,o(),{actionName:"transferTo"})},Backspace:(t,i,e)=>{a.dispatchEvent(d,e,o(),{actionName:"remove"})}}}}),[c]),$=s.useCallback(p.triggerKeyboardEvent.bind(p),[c]);return s.useEffect(()=>(p.initializeRovingTab(),()=>p.removeFocusListener()),[c]),s.createElement("div",{id:m,ref:w,style:y,unselectable:"on",className:a.classNames(T,"k-listbox",{[`k-listbox-${I}`]:b},M())},n.toolbar&&s.createElement(n.toolbar,null),s.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:x,onDragOver:t=>t.preventDefault(),onDrop:B,onDragLeave:H,onKeyDown:$},s.createElement("div",{className:a.classNames("k-list",{[`k-list-${I}`]:b})},s.createElement("div",{className:"k-list-content"},s.createElement("ul",{className:"k-list-ul",role:"listbox","aria-label":"listbox-container",onKeyDown:j},c.map((t,i)=>{const e=q(t),r={className:a.classNames("k-list-item",{"k-selected":e}),role:"option",key:i,id:P+i,"aria-selected":e,"data-uid":P+i,draggable:_,onDragStart:l=>{a.dispatchEvent(C,l,o(),{dataItem:t})},onDragOver:l=>{l.preventDefault(),a.dispatchEvent(F,l,o(),{dataItem:t})},onDrop:l=>{a.dispatchEvent(L,l,o(),{dataItem:t})},onClick:l=>{a.dispatchEvent(z,l,o(),{dataItem:t})}};return n.item?s.createElement(n.item,{selected:e,dataItem:t,...r,key:r.key},s.createElement("span",{className:"k-list-item-text"},t.name)):s.createElement("li",{...r,key:r.key},s.createElement("span",{className:"k-list-item-text"},A(t)))}))))),s.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox"},c.map((t,i)=>{const e=t[S||h];return s.createElement("option",{key:i,value:e},e)})))}),E={toolbarPosition:R.toolbarPosition.RIGHT,draggable:!0,size:"medium"};k.propTypes={size:u.oneOf([null,"small","medium","large"]),toolbarPosition:u.oneOf(["none","top","bottom","left","right"]),textField:u.string.isRequired,valueField:u.string,selectedField:u.string,data:u.array.isRequired};k.displayName="ListBoxInner";exports.ListBox=k;