@bikdotai/bik-component-library 0.0.629 → 0.0.630

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

@@ -8,7 +8,6 @@ export interface AccordionProps {
     contentMargin?: string;
     skipHoverHeader?: boolean;
     headerPadding?: string;
-    childrenPadding?: string;
     showBorders?: boolean;
     backgroundColor?: string;
     refresh?: number | boolean;
@@ -22,5 +21,7 @@ export interface AccordionProps {
     buttonLinkText?: string;
     onButtonLinkClick?: () => void;
     captionStyle?: React.CSSProperties;
+    borderColor?: string;
+    borderRadius?: string;
 }
 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"),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,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})]})),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("./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,borderColor:s.borderColor,backgroundColor:s.backgroundColor,openDirection:s.openDirection,borderRadius:s.borderRadius},{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,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})]})),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}))]}))};

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

@@ -6,6 +6,8 @@ declare const AccordionStyle: import("styled-components").StyledComponent<"div",
     skipHoverState?: boolean | undefined;
     headerPadding?: string | undefined;
     showBorders?: boolean | undefined;
+    borderColor?: string | undefined;
+    borderRadius?: string | undefined;
     backgroundColor?: string | undefined;
     hasChildrenMaxHeight?: boolean | undefined;
     openDirection?: AccordionProps['openDirection'];

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

@@ -1,9 +1,10 @@
-"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`
+"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 d=o(e);const i=d.default.div`
 	width: ${e=>(null==e?void 0:e.width)||"100%"};
 	display: flex;
 	flex-direction: column;
 	border: ${e=>e.showBorders?"1px solid "+r.COLORS.stroke.primary:""};
-	border-radius: ${e=>e.showBorders?"4px":""};
+	border-color: ${e=>e.borderColor||r.COLORS.stroke.primary};
+	border-radius: ${e=>e.borderRadius?e.borderRadius:e.showBorders?"4px":""};
 	background: ${e=>e.backgroundColor||"unset"};
 	.accordion {
 		&__overview {
@@ -12,6 +13,7 @@
 			gap: 4px;
 			padding: ${e=>e.headerPadding?e.headerPadding:"24px"};
 			border-bottom: ${e=>e.showBorders&&e.isActive?"1px solid "+r.COLORS.stroke.primary:""};
+			border-color: ${e=>e.borderColor||r.COLORS.stroke.primary};
 			&__header {
 				display: flex;
 				flex-direction: row;
@@ -34,8 +36,8 @@
 			order: ${e=>"UP"===e.openDirection?-1:0};
 		}
 	}
-`,t=i.default.div`
+`,t=d.default.div`
 	display: flex;
 	align-items: center;
 	gap: 24px;
-`;exports.AccordionHeaderGroup=t,exports.default=d;
+`;exports.AccordionHeaderGroup=t,exports.default=i;

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

@@ -8,7 +8,6 @@ export interface AccordionProps {
     contentMargin?: string;
     skipHoverHeader?: boolean;
     headerPadding?: string;
-    childrenPadding?: string;
     showBorders?: boolean;
     backgroundColor?: string;
     refresh?: number | boolean;
@@ -22,5 +21,7 @@ export interface AccordionProps {
     buttonLinkText?: string;
     onButtonLinkClick?: () => void;
     captionStyle?: React.CSSProperties;
+    borderColor?: string;
+    borderRadius?: string;
 }
 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 t,useRef as n,useEffect as o}from"react";import{TitleRegular as i,BodySecondary as c}from"../TypographyStyle.js";import{Button as s}from"../button/Button.js";import a,{AccordionHeaderGroup as l}from"./Accordion.style.js";import d from"./AccordionArrow.js";const u=u=>{var h,v;const[g,p]=t(!1),m=n(null),y=n(null);o((()=>{u.autoOpen&&b(u.autoOpen,{})}),[u.autoOpen]),o((()=>{void 0!==u.isOpen&&b(u.isOpen,{})}),[u.isOpen]);const b=(e,r)=>{var t,n;y.current&&m.current&&("keydown"===r.type&&"Enter"!==r.key||(e!==g&&p(e),e?(y.current.style.maxHeight=(null!==(t=u.childrenMaxHeight)&&void 0!==t?t: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 o((()=>{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]),o((()=>{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(a,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,u.buttonLinkText&&r(s,{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:r("div",Object.assign({style:u.captionStyle},{children:u.caption}))})}))]})),r("div",Object.assign({ref:y,className:"accordion__content"},{children:u.children}))]}))};export{u as BikAccordion};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as o,useRef as t,useEffect as n}from"react";import{TitleRegular as i,BodySecondary as c}from"../TypographyStyle.js";import{Button as s}from"../button/Button.js";import a,{AccordionHeaderGroup as l}from"./Accordion.style.js";import d from"./AccordionArrow.js";const u=u=>{var h,v;const[g,p]=o(!1),m=t(null),b=t(null);n((()=>{u.autoOpen&&y(u.autoOpen,{})}),[u.autoOpen]),n((()=>{void 0!==u.isOpen&&y(u.isOpen,{})}),[u.isOpen]);const y=(e,r)=>{var o,t;b.current&&m.current&&("keydown"===r.type&&"Enter"!==r.key||(e!==g&&p(e),e?(b.current.style.maxHeight=(null!==(o=u.childrenMaxHeight)&&void 0!==o?o:b.current.scrollHeight)+"px",m.current.style.transform="rotate(180deg)",m.current.style.transition="transform 0.25s ease-in-out",b.current.style.transition="max-height 0.25s ease-in-out"):(b.current.style.maxHeight="",m.current.style.transform="rotate(0deg)",m.current.style.transition="transform 0.25s ease-in-out",b.current.style.transition="padding 0s"),null===(t=u.onToggleAccordion)||void 0===t||t.call(u,e)))};return n((()=>{const e=new MutationObserver((()=>{g&&b.current&&(b.current.style.maxHeight=b.current.scrollHeight+"px")}));return b.current&&e.observe(b.current,{childList:!0,subtree:!0}),()=>{e.disconnect()}}),[g]),n((()=>{var e;g&&(null==u?void 0:u.refresh)&&(null===(e=null==b?void 0:b.current)||void 0===e?void 0:e.scrollHeight)&&!u.childrenMaxHeight&&setTimeout((()=>{b.current.style.maxHeight=b.current.scrollHeight+"px"}),100)}),[g,null==u?void 0:u.refresh,null===(h=null==b?void 0:b.current)||void 0===h?void 0:h.scrollHeight]),e(a,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,borderColor:u.borderColor,backgroundColor:u.backgroundColor,openDirection:u.openDirection,borderRadius:u.borderRadius},{children:[e("div",Object.assign({className:"accordion__overview "+(g?"active":""),onClick:e=>y(!g,e),onKeyDown:e=>y(!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,u.buttonLinkText&&r(s,{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:r("div",Object.assign({style:u.captionStyle},{children:u.caption}))})}))]})),r("div",Object.assign({ref:b,className:"accordion__content"},{children:u.children}))]}))};export{u as BikAccordion};

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

@@ -6,6 +6,8 @@ declare const AccordionStyle: import("styled-components").StyledComponent<"div",
     skipHoverState?: boolean | undefined;
     headerPadding?: string | undefined;
     showBorders?: boolean | undefined;
+    borderColor?: string | undefined;
+    borderRadius?: string | undefined;
     backgroundColor?: string | undefined;
     hasChildrenMaxHeight?: boolean | undefined;
     openDirection?: AccordionProps['openDirection'];

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

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

package/package.json

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