@progress/kendo-react-layout/expansionpanel/ExpansionPanel.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 w=require("react"),a=require("prop-types"),t=require("@progress/kendo-react-common"),g=require("@progress/kendo-svg-icons");function P(e){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(d,s,i.get?i:{enumerable:!0,get:()=>e[s]})}}return d.default=e,Object.freeze(d)}const n=P(w),f=n.forwardRef((e,d)=>{const s=n.useRef(null),[i,p]=n.useState(!1),k=t.useId(),b=n.useCallback(()=>({element:s.current}),[]);n.useImperativeHandle(d,b);const{expanded:o=!1,disabled:c,title:v,subtitle:x,onAction:r,expandIcon:u,collapseIcon:m,expandSVGIcon:y,collapseSVGIcon:I}=e,N=n.useCallback(l=>{t.dispatchEvent(r,l,b(),{expanded:o})},[r,o]),E=n.useCallback(l=>{(l.keyCode===t.Keys.enter||l.keyCode===t.Keys.space)&&(l.preventDefault(),t.dispatchEvent(r,l,b(),{expanded:o}))},[r,o]),h=n.useCallback(()=>{e.disabled||p(!0)},[e.disabled]),C=n.useCallback(()=>{e.disabled||p(!1)},[e.disabled]),{onFocus:S,onBlur:R}=t.useAsyncFocusBlur({onFocus:h,onBlur:C});return n.createElement("div",{ref:s,className:t.classNames("k-expander",e.className,{"k-expanded":o,"k-focus":i&&!c,"k-disabled":c}),onFocus:S,onBlur:R,style:e.style,id:e.id,dir:t.useRtl(s,e.dir),onKeyDown:c?void 0:E},n.createElement("div",{role:"button","aria-controls":e.ariaControls||k,"aria-expanded":o,"aria-disabled":c||void 0,tabIndex:t.getTabIndex(e.tabIndex,c),className:"k-expander-header",onClick:c?void 0:N},v!==void 0?n.createElement("div",{className:"k-expander-title"},v):void 0,n.createElement("span",{className:"k-spacer"}),x!==void 0?n.createElement("div",{className:"k-expander-sub-title"},x):void 0,n.createElement("span",{className:"k-expander-indicator"},n.createElement(t.IconWrap,{name:o?m?void 0:"chevron-up":u?void 0:"chevron-down",icon:o?!I&&!m?g.chevronUpIcon:I:!y&&!u?g.chevronDownIcon:y,className:t.classNames(o?{[String(m)]:!!m}:{[String(u)]:!!u})}))),n.createElement("div",{id:k,className:t.classNames("k-expander-content-wrapper",{"k-hidden":!o})},e.children))});f.propTypes={children:a.node,className:a.string,style:a.object,dir:a.string,id:a.string,tabIndex:a.number,title:a.node,subtitle:a.node,expandIcon:a.string,collapseIcon:a.string,expanded:a.bool,disabled:a.bool,onAction:a.func};f.displayName="KendoReactExpansionPanel";exports.ExpansionPanel=f;