@bikdotai/bik-component-library 0.0.559-0 → 0.0.559-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../TypographyStyle.js"),n=require("./Accordion.style.js"),o=require("./AccordionArrow.js");exports.BikAccordion=i=>{var s,c;const[a,l]=r.useState(!1),d=r.useRef(null),u=r.useRef(null);r.useEffect((()=>{i.autoOpen&&h(i.autoOpen,{})}),[i.autoOpen]),r.useEffect((()=>{void 0!==i.isOpen&&h(i.isOpen,{})}),[i.isOpen]);const h=(e,r)=>{var t,n;u.current&&d.current&&("keydown"===r.type&&"Enter"!==r.key||(e!==a&&l(e),e?(u.current.style.maxHeight=(null!==(t=i.childrenMaxHeight)&&void 0!==t?t:u.current.scrollHeight)+"px",d.current.style.transform="rotate(180deg)",d.current.style.transition="transform 0.25s ease-in-out",u.current.style.transition="max-height 0.25s ease-in-out"):(u.current.style.maxHeight="",d.current.style.transform="rotate(0deg)",d.current.style.transition="transform 0.25s ease-in-out",u.current.style.transition="padding 0s"),null===(n=i.onToggleAccordion)||void 0===n||n.call(i,e)))};return r.useEffect((()=>{const e=new MutationObserver((()=>{a&&u.current&&(u.current.style.maxHeight=u.current.scrollHeight+"px")}));return u.current&&e.observe(u.current,{childList:!0,subtree:!0}),()=>{e.disconnect()}}),[a]),r.useEffect((()=>{var e;a&&(null==i?void 0:i.refresh)&&(null===(e=null==u?void 0:u.current)||void 0===e?void 0:e.scrollHeight)&&!i.childrenMaxHeight&&setTimeout((()=>{u.current.style.maxHeight=u.current.scrollHeight+"px"}),100)}),[a,null==i?void 0:i.refresh,null===(s=null==u?void 0:u.current)||void 0===s?void 0:s.scrollHeight]),e.jsxs(n.default,Object.assign({className:"accordion",isActive:a,width:null==i?void 0:i.width,contentMargin:null==i?void 0:i.contentMargin,headerPadding:i.headerPadding,skipHoverState:i.skipHoverHeader,showBorders:i.showBorders,backgroundColor:i.backgroundColor,openDirection:i.openDirection},{children:[e.jsxs("div",Object.assign({className:"accordion__overview "+(a?"active":""),onClick:e=>h(!a,e),onKeyDown:e=>h(!a,e),role:"button",tabIndex:0},{children:[!i.rightActionComponent&&e.jsxs("div",Object.assign({className:"accordion__overview__header",style:null!==(c=i.headerStyles)&&void 0!==c?c:{}},{children:["string"==typeof i.header?e.jsx(t.TitleRegular,{children:null==i?void 0:i.header}):i.header,e.jsx(o.default,{arrowColor:i.arrowColor,isNewIcon:!0,ref:d})]})),i.rightActionComponent&&e.jsxs("div",Object.assign({className:"accordion__overview__header"},{children:[e.jsxs("div",Object.assign({className:"accordion__overview__title-wrapper"},{children:[e.jsx(o.default,{arrowColor:i.arrowColor,isNewIcon:!0,ref:d}),"string"==typeof i.header?e.jsx(t.TitleRegular,{children:null==i?void 0:i.header}):i.header]})),e.jsx("div",Object.assign({onClick:e=>e.stopPropagation(),onKeyDown:e=>{"Enter"===e.key&&e.stopPropagation()},role:"button",tabIndex:0},{children:i.rightActionComponent}))]})),(null==i?void 0:i.caption)&&e.jsx("div",Object.assign({className:"accordion__overview__caption"},{children:e.jsx(t.BodySecondary,{children:i.caption})}))]})),e.jsx("div",Object.assign({ref:u,className:"accordion__content"},{children:i.children}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as o,useRef as n,useEffect as t}from"react";import{TitleRegular as i,BodySecondary as
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as o,useRef as n,useEffect as t}from"react";import{TitleRegular as i,BodySecondary as c}from"../TypographyStyle.js";import a from"./Accordion.style.js";import s from"./AccordionArrow.js";const l=l=>{var d,u;const[h,v]=o(!1),g=n(null),p=n(null);t((()=>{l.autoOpen&&m(l.autoOpen,{})}),[l.autoOpen]),t((()=>{void 0!==l.isOpen&&m(l.isOpen,{})}),[l.isOpen]);const m=(e,r)=>{var o,n;p.current&&g.current&&("keydown"===r.type&&"Enter"!==r.key||(e!==h&&v(e),e?(p.current.style.maxHeight=(null!==(o=l.childrenMaxHeight)&&void 0!==o?o:p.current.scrollHeight)+"px",g.current.style.transform="rotate(180deg)",g.current.style.transition="transform 0.25s ease-in-out",p.current.style.transition="max-height 0.25s ease-in-out"):(p.current.style.maxHeight="",g.current.style.transform="rotate(0deg)",g.current.style.transition="transform 0.25s ease-in-out",p.current.style.transition="padding 0s"),null===(n=l.onToggleAccordion)||void 0===n||n.call(l,e)))};return t((()=>{const e=new MutationObserver((()=>{h&&p.current&&(p.current.style.maxHeight=p.current.scrollHeight+"px")}));return p.current&&e.observe(p.current,{childList:!0,subtree:!0}),()=>{e.disconnect()}}),[h]),t((()=>{var e;h&&(null==l?void 0:l.refresh)&&(null===(e=null==p?void 0:p.current)||void 0===e?void 0:e.scrollHeight)&&!l.childrenMaxHeight&&setTimeout((()=>{p.current.style.maxHeight=p.current.scrollHeight+"px"}),100)}),[h,null==l?void 0:l.refresh,null===(d=null==p?void 0:p.current)||void 0===d?void 0:d.scrollHeight]),e(a,Object.assign({className:"accordion",isActive:h,width:null==l?void 0:l.width,contentMargin:null==l?void 0:l.contentMargin,headerPadding:l.headerPadding,skipHoverState:l.skipHoverHeader,showBorders:l.showBorders,backgroundColor:l.backgroundColor,openDirection:l.openDirection},{children:[e("div",Object.assign({className:"accordion__overview "+(h?"active":""),onClick:e=>m(!h,e),onKeyDown:e=>m(!h,e),role:"button",tabIndex:0},{children:[!l.rightActionComponent&&e("div",Object.assign({className:"accordion__overview__header",style:null!==(u=l.headerStyles)&&void 0!==u?u:{}},{children:["string"==typeof l.header?r(i,{children:null==l?void 0:l.header}):l.header,r(s,{arrowColor:l.arrowColor,isNewIcon:!0,ref:g})]})),l.rightActionComponent&&e("div",Object.assign({className:"accordion__overview__header"},{children:[e("div",Object.assign({className:"accordion__overview__title-wrapper"},{children:[r(s,{arrowColor:l.arrowColor,isNewIcon:!0,ref:g}),"string"==typeof l.header?r(i,{children:null==l?void 0:l.header}):l.header]})),r("div",Object.assign({onClick:e=>e.stopPropagation(),onKeyDown:e=>{"Enter"===e.key&&e.stopPropagation()},role:"button",tabIndex:0},{children:l.rightActionComponent}))]})),(null==l?void 0:l.caption)&&r("div",Object.assign({className:"accordion__overview__caption"},{children:r(c,{children:l.caption})}))]})),r("div",Object.assign({ref:p,className:"accordion__content"},{children:l.children}))]}))};export{l as BikAccordion};
|