@bikdotai/bik-component-library 0.0.559-0 → 0.0.559-2

package/dist/cjs/components/accordion/Accordion.d.ts

@@ -19,5 +19,7 @@ export interface AccordionProps {
     onToggleAccordion?: (state: boolean) => void;
     arrowColor?: string;
     isOpen?: boolean;
+    buttonLinkText?: string;
+    onButtonLinkClick?: () => void;
 }
 export declare const BikAccordion: React.FC<AccordionProps>;

package/dist/cjs/components/accordion/Accordion.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("../TypographyStyle.js"),n=require("./Accordion.style.js"),t=require("./AccordionArrow.js");exports.BikAccordion=i=>{var s,a;const[c,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 o,n;u.current&&d.current&&("keydown"===r.type&&"Enter"!==r.key||(e!==c&&l(e),e?(u.current.style.maxHeight=(null!==(o=i.childrenMaxHeight)&&void 0!==o?o: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((()=>{var e;c&&(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)}),[c,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:c,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 "+(c?"active":""),onClick:e=>h(!c,e),onKeyDown:e=>h(!c,e),role:"button",tabIndex:0},{children:[!i.rightActionComponent&&e.jsxs("div",Object.assign({className:"accordion__overview__header",style:null!==(a=i.headerStyles)&&void 0!==a?a:{}},{children:["string"==typeof i.header?e.jsx(o.TitleRegular,{children:null==i?void 0:i.header}):i.header,e.jsx(t.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(t.default,{arrowColor:i.arrowColor,isNewIcon:!0,ref:d}),"string"==typeof i.header?e.jsx(o.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(o.BodySecondary,{children:i.caption})}))]})),e.jsx("div",Object.assign({ref:u,className:"accordion__content"},{children:i.children}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../TypographyStyle.js"),n=require("../button/Button.js"),o=require("./Accordion.style.js"),i=require("./AccordionArrow.js");exports.BikAccordion=s=>{var c,a;const[l,d]=r.useState(!1),u=r.useRef(null),h=r.useRef(null);r.useEffect((()=>{s.autoOpen&&v(s.autoOpen,{})}),[s.autoOpen]),r.useEffect((()=>{void 0!==s.isOpen&&v(s.isOpen,{})}),[s.isOpen]);const v=(e,r)=>{var t,n;h.current&&u.current&&("keydown"===r.type&&"Enter"!==r.key||(e!==l&&d(e),e?(h.current.style.maxHeight=(null!==(t=s.childrenMaxHeight)&&void 0!==t?t:h.current.scrollHeight)+"px",u.current.style.transform="rotate(180deg)",u.current.style.transition="transform 0.25s ease-in-out",h.current.style.transition="max-height 0.25s ease-in-out"):(h.current.style.maxHeight="",u.current.style.transform="rotate(0deg)",u.current.style.transition="transform 0.25s ease-in-out",h.current.style.transition="padding 0s"),null===(n=s.onToggleAccordion)||void 0===n||n.call(s,e)))};return r.useEffect((()=>{const e=new MutationObserver((()=>{l&&h.current&&(h.current.style.maxHeight=h.current.scrollHeight+"px")}));return h.current&&e.observe(h.current,{childList:!0,subtree:!0}),()=>{e.disconnect()}}),[l]),r.useEffect((()=>{var e;l&&(null==s?void 0:s.refresh)&&(null===(e=null==h?void 0:h.current)||void 0===e?void 0:e.scrollHeight)&&!s.childrenMaxHeight&&setTimeout((()=>{h.current.style.maxHeight=h.current.scrollHeight+"px"}),100)}),[l,null==s?void 0:s.refresh,null===(c=null==h?void 0:h.current)||void 0===c?void 0:c.scrollHeight]),e.jsxs(o.default,Object.assign({className:"accordion",isActive:l,width:null==s?void 0:s.width,contentMargin:null==s?void 0:s.contentMargin,headerPadding:s.headerPadding,skipHoverState:s.skipHoverHeader,showBorders:s.showBorders,backgroundColor:s.backgroundColor,openDirection:s.openDirection},{children:[e.jsxs("div",Object.assign({className:"accordion__overview "+(l?"active":""),onClick:e=>v(!l,e),onKeyDown:e=>v(!l,e),role:"button",tabIndex:0},{children:[!s.rightActionComponent&&e.jsxs("div",Object.assign({className:"accordion__overview__header",style:null!==(a=s.headerStyles)&&void 0!==a?a:{}},{children:[e.jsxs(o.AccordionHeaderGroup,{children:["string"==typeof s.header?e.jsx(t.TitleRegular,{children:null==s?void 0:s.header}):s.header,e.jsx(n.Button,{buttonText:s.buttonLinkText,buttonType:"text",darkMode:!0,onClick:s.onButtonLinkClick})]}),e.jsx(i.default,{arrowColor:s.arrowColor,isNewIcon:!0,ref:u})]})),s.rightActionComponent&&e.jsxs("div",Object.assign({className:"accordion__overview__header"},{children:[e.jsxs("div",Object.assign({className:"accordion__overview__title-wrapper"},{children:[e.jsx(i.default,{arrowColor:s.arrowColor,isNewIcon:!0,ref:u}),"string"==typeof s.header?e.jsx(t.TitleRegular,{children:null==s?void 0:s.header}):s.header]})),e.jsx("div",Object.assign({onClick:e=>e.stopPropagation(),onKeyDown:e=>{"Enter"===e.key&&e.stopPropagation()},role:"button",tabIndex:0},{children:s.rightActionComponent}))]})),(null==s?void 0:s.caption)&&e.jsx("div",Object.assign({className:"accordion__overview__caption"},{children:e.jsx(t.BodySecondary,{children:s.caption})}))]})),e.jsx("div",Object.assign({ref:h,className:"accordion__content"},{children:s.children}))]}))};

package/dist/cjs/components/accordion/Accordion.style.d.ts

@@ -11,3 +11,4 @@ declare const AccordionStyle: import("styled-components").StyledComponent<"div",
     openDirection?: AccordionProps['openDirection'];
 }, never>;
 export default AccordionStyle;
+export declare const AccordionHeaderGroup: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/accordion/Accordion.style.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const i=o(e).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e);const d=i.default.div`
 	width: ${e=>(null==e?void 0:e.width)||"100%"};
 	display: flex;
 	flex-direction: column;
@@ -34,4 +34,8 @@
 			order: ${e=>"UP"===e.openDirection?-1:0};
 		}
 	}
-`;exports.default=i;
+`,t=i.default.div`
+	display: flex;
+	align-items: center;
+	gap: 24px;
+`;exports.AccordionHeaderGroup=t,exports.default=d;

package/dist/esm/components/accordion/Accordion.d.ts

@@ -19,5 +19,7 @@ export interface AccordionProps {
     onToggleAccordion?: (state: boolean) => void;
     arrowColor?: string;
     isOpen?: boolean;
+    buttonLinkText?: string;
+    onButtonLinkClick?: () => void;
 }
 export declare const BikAccordion: React.FC<AccordionProps>;

package/dist/esm/components/accordion/Accordion.js

@@ -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 a}from"../TypographyStyle.js";import c from"./Accordion.style.js";import l from"./AccordionArrow.js";const s=s=>{var d,h;const[u,v]=o(!1),g=n(null),p=n(null);t((()=>{s.autoOpen&&m(s.autoOpen,{})}),[s.autoOpen]),t((()=>{void 0!==s.isOpen&&m(s.isOpen,{})}),[s.isOpen]);const m=(e,r)=>{var o,n;p.current&&g.current&&("keydown"===r.type&&"Enter"!==r.key||(e!==u&&v(e),e?(p.current.style.maxHeight=(null!==(o=s.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=s.onToggleAccordion)||void 0===n||n.call(s,e)))};return t((()=>{var e;u&&(null==s?void 0:s.refresh)&&(null===(e=null==p?void 0:p.current)||void 0===e?void 0:e.scrollHeight)&&!s.childrenMaxHeight&&setTimeout((()=>{p.current.style.maxHeight=p.current.scrollHeight+"px"}),100)}),[u,null==s?void 0:s.refresh,null===(d=null==p?void 0:p.current)||void 0===d?void 0:d.scrollHeight]),e(c,Object.assign({className:"accordion",isActive:u,width:null==s?void 0:s.width,contentMargin:null==s?void 0:s.contentMargin,headerPadding:s.headerPadding,skipHoverState:s.skipHoverHeader,showBorders:s.showBorders,backgroundColor:s.backgroundColor,openDirection:s.openDirection},{children:[e("div",Object.assign({className:"accordion__overview "+(u?"active":""),onClick:e=>m(!u,e),onKeyDown:e=>m(!u,e),role:"button",tabIndex:0},{children:[!s.rightActionComponent&&e("div",Object.assign({className:"accordion__overview__header",style:null!==(h=s.headerStyles)&&void 0!==h?h:{}},{children:["string"==typeof s.header?r(i,{children:null==s?void 0:s.header}):s.header,r(l,{arrowColor:s.arrowColor,isNewIcon:!0,ref:g})]})),s.rightActionComponent&&e("div",Object.assign({className:"accordion__overview__header"},{children:[e("div",Object.assign({className:"accordion__overview__title-wrapper"},{children:[r(l,{arrowColor:s.arrowColor,isNewIcon:!0,ref:g}),"string"==typeof s.header?r(i,{children:null==s?void 0:s.header}):s.header]})),r("div",Object.assign({onClick:e=>e.stopPropagation(),onKeyDown:e=>{"Enter"===e.key&&e.stopPropagation()},role:"button",tabIndex:0},{children:s.rightActionComponent}))]})),(null==s?void 0:s.caption)&&r("div",Object.assign({className:"accordion__overview__caption"},{children:r(a,{children:s.caption})}))]})),r("div",Object.assign({ref:p,className:"accordion__content"},{children:s.children}))]}))};export{s as BikAccordion};
+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{Button as a}from"../button/Button.js";import s,{AccordionHeaderGroup as l}from"./Accordion.style.js";import d from"./AccordionArrow.js";const u=u=>{var h,v;const[g,p]=o(!1),m=n(null),y=n(null);t((()=>{u.autoOpen&&b(u.autoOpen,{})}),[u.autoOpen]),t((()=>{void 0!==u.isOpen&&b(u.isOpen,{})}),[u.isOpen]);const b=(e,r)=>{var o,n;y.current&&m.current&&("keydown"===r.type&&"Enter"!==r.key||(e!==g&&p(e),e?(y.current.style.maxHeight=(null!==(o=u.childrenMaxHeight)&&void 0!==o?o:y.current.scrollHeight)+"px",m.current.style.transform="rotate(180deg)",m.current.style.transition="transform 0.25s ease-in-out",y.current.style.transition="max-height 0.25s ease-in-out"):(y.current.style.maxHeight="",m.current.style.transform="rotate(0deg)",m.current.style.transition="transform 0.25s ease-in-out",y.current.style.transition="padding 0s"),null===(n=u.onToggleAccordion)||void 0===n||n.call(u,e)))};return t((()=>{const e=new MutationObserver((()=>{g&&y.current&&(y.current.style.maxHeight=y.current.scrollHeight+"px")}));return y.current&&e.observe(y.current,{childList:!0,subtree:!0}),()=>{e.disconnect()}}),[g]),t((()=>{var e;g&&(null==u?void 0:u.refresh)&&(null===(e=null==y?void 0:y.current)||void 0===e?void 0:e.scrollHeight)&&!u.childrenMaxHeight&&setTimeout((()=>{y.current.style.maxHeight=y.current.scrollHeight+"px"}),100)}),[g,null==u?void 0:u.refresh,null===(h=null==y?void 0:y.current)||void 0===h?void 0:h.scrollHeight]),e(s,Object.assign({className:"accordion",isActive:g,width:null==u?void 0:u.width,contentMargin:null==u?void 0:u.contentMargin,headerPadding:u.headerPadding,skipHoverState:u.skipHoverHeader,showBorders:u.showBorders,backgroundColor:u.backgroundColor,openDirection:u.openDirection},{children:[e("div",Object.assign({className:"accordion__overview "+(g?"active":""),onClick:e=>b(!g,e),onKeyDown:e=>b(!g,e),role:"button",tabIndex:0},{children:[!u.rightActionComponent&&e("div",Object.assign({className:"accordion__overview__header",style:null!==(v=u.headerStyles)&&void 0!==v?v:{}},{children:[e(l,{children:["string"==typeof u.header?r(i,{children:null==u?void 0:u.header}):u.header,r(a,{buttonText:u.buttonLinkText,buttonType:"text",darkMode:!0,onClick:u.onButtonLinkClick})]}),r(d,{arrowColor:u.arrowColor,isNewIcon:!0,ref:m})]})),u.rightActionComponent&&e("div",Object.assign({className:"accordion__overview__header"},{children:[e("div",Object.assign({className:"accordion__overview__title-wrapper"},{children:[r(d,{arrowColor:u.arrowColor,isNewIcon:!0,ref:m}),"string"==typeof u.header?r(i,{children:null==u?void 0:u.header}):u.header]})),r("div",Object.assign({onClick:e=>e.stopPropagation(),onKeyDown:e=>{"Enter"===e.key&&e.stopPropagation()},role:"button",tabIndex:0},{children:u.rightActionComponent}))]})),(null==u?void 0:u.caption)&&r("div",Object.assign({className:"accordion__overview__caption"},{children:r(c,{children:u.caption})}))]})),r("div",Object.assign({ref:y,className:"accordion__content"},{children:u.children}))]}))};export{u as BikAccordion};

package/dist/esm/components/accordion/Accordion.style.d.ts

@@ -11,3 +11,4 @@ declare const AccordionStyle: import("styled-components").StyledComponent<"div",
     openDirection?: AccordionProps['openDirection'];
 }, never>;
 export default AccordionStyle;
+export declare const AccordionHeaderGroup: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/accordion/Accordion.style.js

@@ -34,4 +34,8 @@ import e from"styled-components";import{COLORS as r}from"../../constants/Theme.j
 			order: ${e=>"UP"===e.openDirection?-1:0};
 		}
 	}
-`;export{o as default};
+`,i=e.div`
+	display: flex;
+	align-items: center;
+	gap: 24px;
+`;export{i as AccordionHeaderGroup,o as default};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.559-0",
+	"version": "0.0.559-2",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",