@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 © 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 R=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 c in e)if(c!=="default"){const i=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(d,c,i.get?i:{enumerable:!0,get:()=>e[c]})}}return d.default=e,Object.freeze(d)}const n=P(R),f=n.forwardRef((e,d)=>{const c=n.useRef(null),[i,k]=n.useState(!1),m=n.useCallback(()=>({element:c.current}),[]);n.useImperativeHandle(d,m);const{expanded:o=!1,disabled:s,title:p,subtitle:v,onAction:r,expandIcon:u,collapseIcon:b,expandSVGIcon:x,collapseSVGIcon:y}=e,I=n.useCallback(l=>{t.dispatchEvent(r,l,m(),{expanded:o})},[r,o]),N=n.useCallback(l=>{(l.keyCode===t.Keys.enter||l.keyCode===t.Keys.space)&&(l.preventDefault(),t.dispatchEvent(r,l,m(),{expanded:o}))},[r,o]),E=n.useCallback(()=>{e.disabled||k(!0)},[e.disabled]),h=n.useCallback(()=>{e.disabled||k(!1)},[e.disabled]),{onFocus:C,onBlur:S}=t.useAsyncFocusBlur({onFocus:E,onBlur:h});return n.createElement("div",{ref:c,className:t.classNames("k-expander",e.className,{"k-expanded":o,"k-focus":i&&!s,"k-disabled":s}),onFocus:C,onBlur:S,style:e.style,id:e.id,dir:t.useRtl(c,e.dir),onKeyDown:s?void 0:N},n.createElement("div",{role:"button","aria-controls":e.ariaControls,"aria-expanded":o,"aria-disabled":s,tabIndex:t.getTabIndex(e.tabIndex,s),className:"k-expander-header",onClick:s?void 0:I},p!==void 0?n.createElement("div",{className:"k-expander-title"},p):void 0,n.createElement("span",{className:"k-spacer"}),v!==void 0?n.createElement("div",{className:"k-expander-sub-title"},v):void 0,n.createElement("span",{className:"k-expander-indicator"},n.createElement(t.IconWrap,{name:o?b?void 0:"chevron-up":u?void 0:"chevron-down",icon:o?!y&&!b?g.chevronUpIcon:y:!x&&!u?g.chevronDownIcon:x,className:t.classNames(o?{[String(b)]:!!b}:{[String(u)]:!!u})}))),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;