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

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-type HeaderButton = {
+export type HeaderButton = {
     icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
     title: string;
     onClick: () => void;
@@ -33,4 +33,3 @@ export interface AccordionProps {
     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("../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}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../TypographyStyle.js"),o=require("../button/Button.js"),n=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,o;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===(o=c.onToggleAccordion)||void 0===o||o.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(o.Button,{buttonText:c.buttonLinkText,buttonType:"text",darkMode:!0,onClick:c.onButtonLinkClick})]}),e.jsxs(i.AccordionHeaderGroup2,{children:[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(n.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.d.ts

@@ -14,3 +14,4 @@ declare const AccordionStyle: import("styled-components").StyledComponent<"div",
 }, never>;
 export default AccordionStyle;
 export declare const AccordionHeaderGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AccordionHeaderGroup2: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -44,4 +44,7 @@
 	display: flex;
 	align-items: center;
 	gap: 24px;
-`;exports.AccordionHeaderGroup=t,exports.default=i;
+`,a=d.default.div`
+	display: flex;
+	gap: 16px;
+`;exports.AccordionHeaderGroup=t,exports.AccordionHeaderGroup2=a,exports.default=i;

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

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

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

@@ -14,3 +14,4 @@ declare const AccordionStyle: import("styled-components").StyledComponent<"div",
 }, never>;
 export default AccordionStyle;
 export declare const AccordionHeaderGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AccordionHeaderGroup2: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,19 +1,19 @@
-import r from"styled-components";import{COLORS as e}from"../../constants/Theme.js";const o=r.div`
-	width: ${r=>(null==r?void 0:r.width)||"100%"};
+import e from"styled-components";import{COLORS as r}from"../../constants/Theme.js";const o=e.div`
+	width: ${e=>(null==e?void 0:e.width)||"100%"};
 	display: flex;
 	flex-direction: column;
-	border: ${r=>r.showBorders?"1px solid "+e.stroke.primary:""};
-	border-color: ${r=>r.borderColor||e.stroke.primary};
-	border-radius: ${r=>r.borderRadius?r.borderRadius:r.showBorders?"4px":""};
-	background: ${r=>r.backgroundColor||"unset"};
+	border: ${e=>e.showBorders?"1px solid "+r.stroke.primary:""};
+	border-color: ${e=>e.borderColor||r.stroke.primary};
+	border-radius: ${e=>e.borderRadius?e.borderRadius:e.showBorders?"4px":""};
+	background: ${e=>e.backgroundColor||"unset"};
 	.accordion {
 		&__overview {
 			display: flex;
 			flex-direction: column;
 			gap: 4px;
-			padding: ${r=>r.headerPadding?r.headerPadding:"24px"};
-			border-bottom: ${r=>r.showBorders&&r.isActive?"1px solid "+e.stroke.primary:""};
-			border-color: ${r=>r.borderColor||e.stroke.primary};
+			padding: ${e=>e.headerPadding?e.headerPadding:"24px"};
+			border-bottom: ${e=>e.showBorders&&e.isActive?"1px solid "+r.stroke.primary:""};
+			border-color: ${e=>e.borderColor||r.stroke.primary};
 			&__header {
 				display: flex;
 				flex-direction: row;
@@ -29,19 +29,22 @@ import r from"styled-components";import{COLORS as e}from"../../constants/Theme.j
 				gap: 8px;
 			}
 			:hover {
-				background: ${r=>r.skipHoverState?null:e.surface.subdued};
-				border-radius: ${r=>r.skipHoverState?null:"4px"};
+				background: ${e=>e.skipHoverState?null:r.surface.subdued};
+				border-radius: ${e=>e.skipHoverState?null:"4px"};
 			}
 		}
 		&__content {
-			${r=>r.isActive?{margin:(null==r?void 0:r.contentMargin)||"0px"}:{}};
-			overflow: ${r=>r.hasChildrenMaxHeight?"scroll":"hidden"};
+			${e=>e.isActive?{margin:(null==e?void 0:e.contentMargin)||"0px"}:{}};
+			overflow: ${e=>e.hasChildrenMaxHeight?"scroll":"hidden"};
 			max-height: 0;
-			order: ${r=>"UP"===r.openDirection?-1:0};
+			order: ${e=>"UP"===e.openDirection?-1:0};
 		}
 	}
-`,d=r.div`
+`,d=e.div`
 	display: flex;
 	align-items: center;
 	gap: 24px;
-`;export{d as AccordionHeaderGroup,o as default};
+`,i=e.div`
+	display: flex;
+	gap: 16px;
+`;export{d as AccordionHeaderGroup,i as AccordionHeaderGroup2,o as default};

package/package.json

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