carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 4.22 kB
JavaScript
import{jsxs as e,jsx as n,Fragment as r}from"react/jsx-runtime";import t,{useState as i,useRef as o,useEffect as a,useCallback as c}from"react";import l from"../../__internal__/utils/helpers/tags/tags.js";import d from"../../hooks/__internal__/useResizeObserver/useResizeObserver.js";import s from"../../__internal__/utils/helpers/guid/index.js";import p from"../../__internal__/utils/helpers/events/events.js";import{StyledAccordionContainer as u,StyledAccordionTitleContainer as b,StyledAccordionHeadingsContainer as f,StyledAccordionTitle as g,StyledAccordionSubTitle as h,StyledAccordionIcon as y,StyledAccordionContentContainer as m,StyledAccordionContent as O}from"./accordion.style.js";import{ValidationIcon as v}from"../../__internal__/validations/validation-icon.component.js";function _(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function j(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},t=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),t.forEach((function(n){_(e,n,r[n])}))}return e}function w(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n}(Object(n)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})),e}const x=t.forwardRef(((t,_)=>{var{borders:x="default",defaultExpanded:P,expanded:A,onChange:E,children:S,handleKeyboardAccessibility:C,id:k,index:z,iconType:D,iconAlign:T,size:K="large",subTitle:H,title:I,width:R,headerSpacing:$,disableContentPadding:N=!1,error:V,warning:q,info:B,openTitle:F,variant:G="standard"}=t,J=function(e,n){if(null==e)return{};var r,t,i=function(e,n){if(null==e)return{};var r,t,i={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(i[r]=e[r]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(t,["borders","defaultExpanded","expanded","onChange","children","handleKeyboardAccessibility","id","index","iconType","iconAlign","size","subTitle","title","width","headerSpacing","disableContentPadding","error","warning","info","openTitle","variant"]);const L=void 0!==A,[M,Q]=i(P||!1),[U,W]=i(M?"auto":0),X=o(null),Y=L?A:M;d(X,(()=>{var e;W(null===(e=X.current)||void 0===e?void 0:e.scrollHeight)})),a((()=>{var e;W(null===(e=X.current)||void 0===e?void 0:e.scrollHeight)}),[Y]);const Z=c((e=>{L||Q(!Y),null==E||E(e,!Y)}),[L,Y,E]),ee=c((e=>{C&&C(e,z),(p.isEnterKey(e)||p.isSpaceKey(e))&&(e.preventDefault(),Z(e))}),[C,z,Z]),ne=o(s()),re=k||`Accordion_${ne.current}`,te=`AccordionHeader_${ne.current}`,ie=`AccordionContent_${ne.current}`,oe=!!(V||q||B);return e(u,w(j({id:re,width:R,borders:"subtle"===G?"none":x,variant:G},J,l("accordion",J)),{children:[e(b,w(j({"data-element":"accordion-title-container",id:te,"aria-expanded":Y,"aria-controls":ie,onClick:Z,onKeyDown:ee,tabIndex:0,iconAlign:T||("standard"===G?"right":"left"),ref:_,size:K,isExpanded:Y,variant:G,role:"button"},$),{children:[e(f,{"data-element":"accordion-headings-container",hasValidationIcon:oe,children:["string"==typeof I?n(g,{"data-element":"accordion-title",size:K,variant:G,children:Y&&F||I}):Y&&F||I,"subtle"!==G&&e(r,{children:[oe&&n(v,{error:V,warning:q,info:B,tooltipPosition:"top",tabIndex:0,ml:1}),H&&"large"===K&&"standard"===G&&n(h,{children:H})]})]}),n(y,{"data-element":"accordion-icon",type:D||("small"===K||"subtle"===G?"chevron_down_thick":"chevron_down"),isExpanded:Y,iconAlign:T||("standard"===G?"right":"left")})]})),n(m,{isExpanded:Y,maxHeight:U,"data-role":"accordion-content-container",children:n(O,{role:"region","data-element":"accordion-content","data-role":"accordion-content",id:ie,"aria-labelledby":te,ref:X,disableContentPadding:N,variant:G,children:S})})]}))}));x.displayName="Accordion";export{x as Accordion,x as default};