@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 © 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 b=require("react"),c=require("prop-types"),v=require("./PanelBarItem.js"),l=require("./util.js"),p=require("@progress/kendo-react-common"),n=require("./interfaces/NavigationAction.js");function P(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const r in d)if(r!=="default"){const e=Object.getOwnPropertyDescriptor(d,r);Object.defineProperty(a,r,e.get?e:{enumerable:!0,get:()=>d[r]})}}return a.default=d,Object.freeze(a)}const u=P(b),f=class f extends u.Component{constructor(a){super(a),this._element=null,this.handleSelect=e=>{this.onSelect(e),this.onFocus(e)},this.onSelect=e=>{const o=l.flatChildren(u.Children.toArray(this.children));let i,s;switch(o.forEach(t=>{t.props.uniquePrivateKey===(e.uniquePrivateKey||this.state.focused)&&(i=t)}),this.expandMode){case"single":s=[...i.props.parentUniquePrivateKey,i.props.uniquePrivateKey],l.isArrayEqual(this.expandedItems,s)&&(i.props.parentUniquePrivateKey?s=[...i.props.parentUniquePrivateKey]:s=[]);break;case"multiple":{s=this.expandedItems.slice();const t=s.indexOf(i.props.uniquePrivateKey);t===-1?s.push(i.props.uniquePrivateKey):s.splice(t,1);break}default:s=this.expandedItems.slice();break}this.setState({selected:i.props.uniquePrivateKey,expanded:s}),this.props.onSelect&&this.props.onSelect.call(void 0,{target:i,expandedItems:s})},this.onFocus=(e,o=0,i)=>{const s=l.flatVisibleChildren(u.Children.toArray(this.children)),t=l.getFocusedChild(s,o,e,this.state.focused,i);if(t){const h=this.expandedItems.slice();if(i===n.NavigationAction.Right&&t&&t.props&&t.props.children&&t.props.children.length>0){if(h.push(t.props.uniquePrivateKey),this.setState({expanded:[...new Set(h)]}),t.props.expanded){const g=t.props.children[0].props.uniquePrivateKey;this.setState({focused:g})}}else if(i===n.NavigationAction.Left&&(t&&t.props&&t.props.parentUniquePrivateKey&&t.props.parentUniquePrivateKey.length>0||t&&t.props&&!t.props.disabled&&t.props.children&&t.props.children.length>0)){const g=t.props.parentUniquePrivateKey;if(t.props.expanded){const y=t.props.uniquePrivateKey,x=h.indexOf(y);h.splice(x,1),this.setState({expanded:h})}else if(t.props.level>0){const y=t.props.parentUniquePrivateKey[g.length-1];this.setState({focused:y})}}else this.activeDescendant=t.props.id,this.setState({focused:t.props.uniquePrivateKey})}},this.onNavigate=(e,o)=>{let i;switch(o){case n.NavigationAction.First:this.onFocus(e,i,n.NavigationAction.First);break;case n.NavigationAction.Last:this.onFocus(e,i,n.NavigationAction.Last);break;case n.NavigationAction.Left:this.onFocus(e,i,n.NavigationAction.Left);break;case n.NavigationAction.Right:this.onFocus(e,i,n.NavigationAction.Right);break;case n.NavigationAction.Previous:i=-1,this.onFocus(e,i);break;case n.NavigationAction.Next:i=1,this.onFocus(e,i);break;case n.NavigationAction.Toggle:this.onSelect(e);break}},this.handleWrapperFocus=()=>{clearTimeout(this.nextTickId),this.state.wrapperFocused||this.setState({wrapperFocused:!0})},this.handleWrapperBlur=()=>{this.nextTick(()=>{this.setState({wrapperFocused:!1})})},this.handleKeyDown=e=>{const o=this._element&&getComputedStyle(this._element).direction==="rtl"||!1;if(e.target===e.currentTarget){const i=e.keyCode;let s;switch(i){case p.Keys.left:s=o?n.NavigationAction.Right:n.NavigationAction.Left;break;case p.Keys.up:s=n.NavigationAction.Previous;break;case p.Keys.right:s=o?n.NavigationAction.Left:n.NavigationAction.Right;break;case p.Keys.down:s=n.NavigationAction.Next;break;case p.Keys.home:s=n.NavigationAction.First;break;case p.Keys.end:s=n.NavigationAction.Last;break;case p.Keys.space:case p.Keys.enter:s=n.NavigationAction.Toggle;break;default:s=null;break}s!==null&&(e.preventDefault(),this.onNavigate(e,s))}};const r=l.getInitialState(a,this.expandMode);r.focused||(r.focused=l.getFirstId(a)),this.state=r}get expandMode(){return this.props.expandMode||"multiple"}get selectedItem(){const{selected:a=this.state.selected}=this.props;return a}get expandedItems(){return this.props.isControlled?this.props.expanded||[]:this.state.expanded}get children(){const a={...this.state,selected:this.selectedItem},r={animation:this.props.animation,keepItemsMounted:this.props.keepItemsMounted,state:a,expanded:this.expandedItems,handleSelect:this.handleSelect,children:this.props.children};return l.renderChildren(r)}render(){const a={"aria-activedescendant":this.activeDescendant},r=p.classNames("k-panelbar",this.props.className);return u.createElement("ul",{ref:e=>{this._element=e},dir:this.props.dir,role:"tree",tabIndex:0,onKeyDown:this.handleKeyDown,onFocus:this.handleWrapperFocus,onBlur:this.handleWrapperBlur,className:r,style:this.props.style,...a},this.children)}nextTick(a){this.nextTickId=window.setTimeout(()=>a())}};f.propTypes={animation:c.bool,children:function(a,r){const e=a[r];if(e){if(Array.isArray(e)){for(const o of e)if(!o.type||o.type!==v.PanelBarItem)return new Error("PanelBar children should be either PanelBarItem or Array of PanelBarItem.")}else if(e.type!==v.PanelBarItem)return new Error("PanelBar child should be either PanelBarItem or Array of PanelBarItem.");return null}return null},dir:c.string,selected:c.string,expanded:c.arrayOf(c.string),focused:c.string,expandMode:c.oneOf(["single","multiple"]),className:c.string,keepItemsMounted:c.bool,onSelect:c.func,style:c.object},f.defaultProps={expandMode:"multiple",animation:!0,keepItemsMounted:!1};let m=f;exports.PanelBar=m;