@progress/kendo-react-layout/panelbar/PanelBar.js

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 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 Q=require("react"),m=require("prop-types"),L=require("./PanelBarItem.js"),b=require("./util.js"),d=require("@progress/kendo-react-common"),a=require("./interfaces/NavigationAction.js");function X(o){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const r in o)if(r!=="default"){const k=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(c,r,k.get?k:{enumerable:!0,get:()=>o[r]})}}return c.default=o,Object.freeze(c)}const i=X(Q),w=o=>{const{animation:c=!0,children:r,dir:k,selected:I,expanded:U,expandMode:R="multiple",className:D,keepItemsMounted:S=!1,onSelect:x,style:j,isControlled:W}=o,K=i.useRef(null),_=i.useRef(null),T=i.useRef(void 0),N=i.useRef(null);d.useWebMcpRegister("panelbar",_,o,o.webMcp);const[p,g]=i.useState(()=>{const t=R||"multiple",u=b.getInitialState(o,t);return u.focused||(u.focused=b.getFirstId(o)),u}),B=R||"multiple",M=I!==void 0?I:p.selected,h=W?U||[]:p.expanded,F=i.useCallback(t=>{N.current=window.setTimeout(()=>t())},[]),C=i.useCallback(t=>{const u=A,s=b.flatChildren(i.Children.toArray(u));let n,l;switch(s.forEach(e=>{e.props.uniquePrivateKey===(t.uniquePrivateKey||p.focused)&&(n=e)}),B){case"single":l=[...n.props.parentUniquePrivateKey,n.props.uniquePrivateKey],b.isArrayEqual(h,l)&&(n.props.parentUniquePrivateKey?l=[...n.props.parentUniquePrivateKey]:l=[]);break;case"multiple":{l=h.slice();const e=l.indexOf(n.props.uniquePrivateKey);e===-1?l.push(n.props.uniquePrivateKey):l.splice(e,1);break}default:l=h.slice();break}g(e=>({...e,selected:n.props.uniquePrivateKey,expanded:l})),x&&x({target:n,expandedItems:l})},[r,p.focused,B,h,x]),f=i.useCallback((t,u=0,s)=>{const n=A,l=b.flatVisibleChildren(i.Children.toArray(n)),e=b.getFocusedChild(l,u,t,p.focused,s);if(e){const v=h.slice();if(s===a.NavigationAction.Right&&e&&e.props&&e.props.children&&e.props.children.length>0){if(v.push(e.props.uniquePrivateKey),g(y=>({...y,expanded:[...new Set(v)]})),e.props.expanded){const y=e.props.children[0];g(P=>({...P,focused:y.props.uniquePrivateKey}))}}else if(s===a.NavigationAction.Left&&(e&&e.props&&e.props.parentUniquePrivateKey&&e.props.parentUniquePrivateKey.length>0||e&&e.props&&!e.props.disabled&&e.props.children&&e.props.children.length>0)){const y=e.props.parentUniquePrivateKey;if(e.props.expanded){const P=e.props.uniquePrivateKey,q=v.indexOf(P);v.splice(q,1),g(J=>({...J,expanded:v}))}else if(e.props.level>0){const P=e.props.parentUniquePrivateKey[y.length-1];g(q=>({...q,focused:P}))}}else g(y=>({...y,focused:e.props.uniquePrivateKey}))}},[r,p.focused,h]),E=i.useCallback(t=>{C(t),f(t)},[C,f]),A=i.useMemo(()=>b.renderChildren({animation:c,keepItemsMounted:S,state:{...p,selected:M},expanded:h,handleSelect:E,children:r,activeDescendantRef:T}),[c,S,p,M,h,r,E]),O=i.useCallback((t,u)=>{let s;switch(u){case a.NavigationAction.First:f(t,s,a.NavigationAction.First);break;case a.NavigationAction.Last:f(t,s,a.NavigationAction.Last);break;case a.NavigationAction.Left:f(t,s,a.NavigationAction.Left);break;case a.NavigationAction.Right:f(t,s,a.NavigationAction.Right);break;case a.NavigationAction.Previous:s=-1,f(t,s);break;case a.NavigationAction.Next:s=1,f(t,s);break;case a.NavigationAction.Toggle:C(t);break}},[f,C]),$=i.useCallback(()=>{clearTimeout(N.current),p.wrapperFocused||g(t=>({...t,wrapperFocused:!0}))},[p.wrapperFocused]),z=i.useCallback(()=>{F(()=>{g(t=>({...t,wrapperFocused:!1}))})},[F]),H=i.useCallback(t=>{const u=K.current&&getComputedStyle(K.current).direction==="rtl"||!1;if(t.target===t.currentTarget){const s=t.keyCode;let n;switch(s){case d.Keys.left:n=u?a.NavigationAction.Right:a.NavigationAction.Left;break;case d.Keys.up:n=a.NavigationAction.Previous;break;case d.Keys.right:n=u?a.NavigationAction.Left:a.NavigationAction.Right;break;case d.Keys.down:n=a.NavigationAction.Next;break;case d.Keys.home:n=a.NavigationAction.First;break;case d.Keys.end:n=a.NavigationAction.Last;break;case d.Keys.space:case d.Keys.enter:n=a.NavigationAction.Toggle;break;default:n=null;break}n!==null&&(t.preventDefault(),O(t,n))}},[O]);i.useEffect(()=>()=>{N.current&&clearTimeout(N.current)},[]);const V={"aria-activedescendant":T.current},G=d.classNames("k-panelbar",D);return i.createElement("ul",{ref:K,dir:k,role:"tree",tabIndex:0,onKeyDown:H,onFocus:$,onBlur:z,className:G,style:j,...V},A)};w.propTypes={children:m.oneOfType([m.arrayOf(function(o,c){return o[c].type!==L.PanelBarItem?new Error("PanelBar children should be either PanelBarItem or an array of PanelBarItem."):null}),function(o,c){const r=o[c];return r&&r.type!==L.PanelBarItem?new Error("PanelBar children should be either PanelBarItem or an array of PanelBarItem."):null}]),selected:m.string,expandMode(o,c){const r=o[c];return r!=="single"&&r!=="multiple"&&r!=="default"?new Error(`Invalid value '${r}' given to '${c}'. It must be either 'single', 'multiple' or 'default'.`):null},animation:m.bool,keepItemsMounted:m.bool,onSelect:m.func};w.defaultProps={expandMode:"multiple",animation:!0,keepItemsMounted:!1};exports.PanelBar=w;