@bikdotai/bik-component-library 0.0.685-beta.4 → 0.0.685-beta.5

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

@@ -1,4 +1,10 @@
 import React, { ReactNode } from 'react';
+type HeaderButton = {
+    icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    title: string;
+    onClick: () => void;
+    style?: React.CSSProperties;
+};
 export interface AccordionProps {
     header: JSX.Element | string;
     subHeader?: JSX.Element | string;
@@ -24,5 +30,7 @@ export interface AccordionProps {
     captionStyle?: React.CSSProperties;
     borderColor?: string;
     borderRadius?: string;
+    headerButtons?: HeaderButton[];
 }
 export declare const BikAccordion: React.FC<AccordionProps>;
+export {};

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

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

@@ -20,6 +20,10 @@
 				align-items: center;
 				justify-content: space-between;
 			}
+			&__header-buttons {
+				display: flex;
+				gap: 8px;
+			}
 			&__title-wrapper {
 				display: flex;
 				gap: 8px;

package/dist/cjs/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

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

@@ -1,4 +1,10 @@
 import React, { ReactNode } from 'react';
+type HeaderButton = {
+    icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    title: string;
+    onClick: () => void;
+    style?: React.CSSProperties;
+};
 export interface AccordionProps {
     header: JSX.Element | string;
     subHeader?: JSX.Element | string;
@@ -24,5 +30,7 @@ export interface AccordionProps {
     captionStyle?: React.CSSProperties;
     borderColor?: string;
     borderRadius?: string;
+    headerButtons?: HeaderButton[];
 }
 export declare const BikAccordion: React.FC<AccordionProps>;
+export {};

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

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

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

@@ -20,6 +20,10 @@ import r from"styled-components";import{COLORS as e}from"../../constants/Theme.j
 				align-items: center;
 				justify-content: space-between;
 			}
+			&__header-buttons {
+				display: flex;
+				gap: 8px;
+			}
 			&__title-wrapper {
 				display: flex;
 				gap: 8px;

package/dist/esm/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.685-beta.4",
+	"version": "0.0.685-beta.5",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",