@progress/kendo-react-layout/panelbar/PanelBarItem.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 z=require("react"),n=require("prop-types"),i=require("@progress/kendo-react-common"),N=require("@progress/kendo-svg-icons"),G=require("@progress/kendo-react-animation");function $(a){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const r in a)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(a,r);Object.defineProperty(c,r,t.get?t:{enumerable:!0,get:()=>a[r]})}}return c.default=a,Object.freeze(c)}const e=$(z);function J({imageUrl:a,icon:c,svgIcon:r,iconClass:t}){return a?e.createElement("img",{role:"presentation",className:"k-panelbar-item-icon k-image",src:a}):c||r?e.createElement(i.IconWrap,{className:"k-panelbar-item-icon",name:c,icon:r}):t?e.createElement("span",{role:"presentation",className:"k-panelbar-item-icon "+t}):null}const d=e.forwardRef((a,c)=>{const{id:r,children:t,title:h=E.title,uniquePrivateKey:m,disabled:l,selected:b,focused:C,expanded:s,className:P,level:k,headerClassName:R,animation:y,keepItemsMounted:o,onSelect:u,imageUrl:S,icon:B,svgIcon:x,iconClass:O}=a,p=e.useRef({props:a}),D=e.useRef(null);e.useImperativeHandle(p,()=>({props:a})),e.useImperativeHandle(c,()=>p.current);const[w,g]=e.useState(s||!1),T=e.useCallback(()=>{u&&!l&&u({uniquePrivateKey:m,id:r,target:p.current})},[u,l,m,r]),q=e.useCallback(f=>o?e.cloneElement(f,{...f.props,in:s}):f,[o,s]),A=e.useCallback(()=>{o&&g(!0)},[o]),j=e.useCallback(()=>{o&&g(!1)},[o]),U={role:"treeitem","aria-disabled":l,"aria-selected":!l&&b,"aria-expanded":t?!l&&s:void 0},M=i.classNames("k-panelbar-item",{"k-panelbar-header":k===0,"k-expanded":s&&!!t,"k-disabled":l},`k-level-${k}`,P),_=i.classNames("k-link",{"k-selected":!l&&b,"k-focus":C},R),H={display:"block"},L=J({imageUrl:S,icon:B,svgIcon:x,iconClass:O}),F=!l&&t?e.createElement(i.IconWrap,{name:s?"chevron-up":"chevron-down",icon:s?N.chevronUpIcon:N.chevronDownIcon,className:i.classNames("k-panelbar-toggle",s?"k-panelbar-collapse":"k-panelbar-expand")}):null;let I=!1;t&&t[0]&&Array.isArray(t)&&(I=t[0].type===d);const K=o&&!w?"none":"block",v=!l&&s||o?I?e.createElement("ul",{role:"group",className:"k-panelbar-group",style:{display:K}},t):t:null,W=(y===void 0||y)&&!l&&t?e.createElement(G.Reveal,{transitionEnterDuration:200,transitionExitDuration:200,key:m+"_animation",style:H,children:v,childFactory:o?q:void 0,unmountOnExit:!o,onBeforeEnter:A,onAfterExited:j}):v;return e.createElement("li",{ref:D,id:r,className:M,...U},e.createElement("span",{className:_,onClick:T},L,e.createElement("span",{className:"k-panelbar-item-text"},h),F),W)}),E={title:"Untitled"};d.propTypes={animation:n.bool,children:n.any,className:n.string,icon:n.string,iconClass:n.string,imageUrl:n.string,svgIcon:i.svgIconPropType,expanded:n.bool,disabled:n.bool,onSelect:n.func,selected:n.bool,level:n.number,title:n.oneOfType([n.string,n.element]),id:n.oneOfType([n.string,n.number]),focused:n.bool,keepItemsMounted:n.bool};d.displayName="KendoReactPanelBarItem";exports.PanelBarItem=d;exports.panelBarItemDefaultProps=E;