@bikdotai/bik-component-library 0.0.532-beta.cm-2 → 0.0.532-beta.cm-3

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

@@ -14,5 +14,8 @@ export interface AccordionProps {
     refresh?: number | boolean;
     autoOpen?: boolean;
     childrenMaxHeight?: number;
+    openDirection?: 'DOWN' | 'UP';
+    headerStyles?: React.CSSProperties;
+    onToggleAccordion?: (state: boolean) => 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"),t=require("../TypographyStyle.js"),n=require("./Accordion.style.js"),i=require("./AccordionArrow.js");exports.BikAccordion=o=>{var s;const[a,c]=r.useState(!1),l=r.useRef(null),d=r.useRef(null);r.useEffect((()=>{o.autoOpen&&u(o.autoOpen,{})}),[o.autoOpen]);const u=(e,r)=>{var t;d.current&&l.current&&("keydown"===r.type&&"Enter"!==r.key||(c(e),d.current.style.maxHeight?(d.current.style.maxHeight="",l.current.style.transform="rotate(0deg)",l.current.style.transition="transform 0.25s ease-in-out",d.current.style.transition="padding 0s"):(d.current.style.maxHeight=(null!==(t=o.childrenMaxHeight)&&void 0!==t?t:d.current.scrollHeight)+"px",l.current.style.transform="rotate(180deg)",l.current.style.transition="transform 0.25s ease-in-out",d.current.style.transition="max-height 0.25s ease-in-out")))};return r.useEffect((()=>{var e;a&&(null==o?void 0:o.refresh)&&(null===(e=null==d?void 0:d.current)||void 0===e?void 0:e.scrollHeight)&&!o.childrenMaxHeight&&setTimeout((()=>{d.current.style.maxHeight=d.current.scrollHeight+"px"}),100)}),[a,null==o?void 0:o.refresh,null===(s=null==d?void 0:d.current)||void 0===s?void 0:s.scrollHeight]),e.jsxs(n.default,Object.assign({className:"accordion",isActive:a,width:null==o?void 0:o.width,contentMargin:null==o?void 0:o.contentMargin,headerPadding:o.headerPadding,skipHoverState:o.skipHoverHeader,showBorders:o.showBorders,backgroundColor:o.backgroundColor},{children:[e.jsxs("div",Object.assign({className:"accordion__overview "+(a?"active":""),onClick:e=>u(!a,e),onKeyDown:e=>u(!a,e),role:"button",tabIndex:0},{children:[!o.rightActionComponent&&e.jsxs("div",Object.assign({className:"accordion__overview__header"},{children:["string"==typeof o.header?e.jsx(t.TitleRegular,{children:null==o?void 0:o.header}):o.header,e.jsx(i.default,{isNewIcon:!0,ref:l})]})),o.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,{isNewIcon:!0,ref:l}),"string"==typeof o.header?e.jsx(t.TitleRegular,{children:null==o?void 0:o.header}):o.header]})),e.jsx("div",Object.assign({onClick:e=>e.stopPropagation(),onKeyDown:e=>{"Enter"===e.key&&e.stopPropagation()},role:"button",tabIndex:0},{children:o.rightActionComponent}))]})),(null==o?void 0:o.caption)&&e.jsx("div",Object.assign({className:"accordion__overview__caption"},{children:e.jsx(t.BodySecondary,{children:o.caption})}))]})),e.jsx("div",Object.assign({ref:d,className:"accordion__content"},{children:o.children}))]}))};
+"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"),i=require("./AccordionArrow.js");exports.BikAccordion=o=>{var s,c;const[a,l]=r.useState(!1),d=r.useRef(null),u=r.useRef(null);r.useEffect((()=>{o.autoOpen&&h(o.autoOpen,{})}),[o.autoOpen]);const h=(e,r)=>{var t,n;u.current&&d.current&&("keydown"===r.type&&"Enter"!==r.key||(l(e),u.current.style.maxHeight?(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"):(u.current.style.maxHeight=(null!==(t=o.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"),null===(n=o.onToggleAccordion)||void 0===n||n.call(o,e)))};return r.useEffect((()=>{var e;a&&(null==o?void 0:o.refresh)&&(null===(e=null==u?void 0:u.current)||void 0===e?void 0:e.scrollHeight)&&!o.childrenMaxHeight&&setTimeout((()=>{u.current.style.maxHeight=u.current.scrollHeight+"px"}),100)}),[a,null==o?void 0:o.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==o?void 0:o.width,contentMargin:null==o?void 0:o.contentMargin,headerPadding:o.headerPadding,skipHoverState:o.skipHoverHeader,showBorders:o.showBorders,backgroundColor:o.backgroundColor,openDirection:o.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:[!o.rightActionComponent&&e.jsxs("div",Object.assign({className:"accordion__overview__header",style:null!==(c=o.headerStyles)&&void 0!==c?c:{}},{children:["string"==typeof o.header?e.jsx(t.TitleRegular,{children:null==o?void 0:o.header}):o.header,e.jsx(i.default,{isNewIcon:!0,ref:d})]})),o.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,{isNewIcon:!0,ref:d}),"string"==typeof o.header?e.jsx(t.TitleRegular,{children:null==o?void 0:o.header}):o.header]})),e.jsx("div",Object.assign({onClick:e=>e.stopPropagation(),onKeyDown:e=>{"Enter"===e.key&&e.stopPropagation()},role:"button",tabIndex:0},{children:o.rightActionComponent}))]})),(null==o?void 0:o.caption)&&e.jsx("div",Object.assign({className:"accordion__overview__caption"},{children:e.jsx(t.BodySecondary,{children:o.caption})}))]})),e.jsx("div",Object.assign({ref:u,className:"accordion__content"},{children:o.children}))]}))};

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

@@ -1,3 +1,4 @@
+import { AccordionProps } from './Accordion';
 declare const AccordionStyle: import("styled-components").StyledComponent<"div", any, {
     isActive: boolean;
     width?: string | undefined;
@@ -7,5 +8,6 @@ declare const AccordionStyle: import("styled-components").StyledComponent<"div",
     showBorders?: boolean | undefined;
     backgroundColor?: string | undefined;
     hasChildrenMaxHeight?: boolean | undefined;
+    openDirection?: AccordionProps['openDirection'];
 }, never>;
 export default AccordionStyle;

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 t=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}}const i=o(e).default.div`
 	width: ${e=>(null==e?void 0:e.width)||"100%"};
 	display: flex;
 	flex-direction: column;
@@ -31,6 +31,7 @@
 			${e=>e.isActive?{margin:(null==e?void 0:e.contentMargin)||"0px"}:{}};
 			overflow: ${e=>e.hasChildrenMaxHeight?"scroll":"hidden"};
 			max-height: 0;
+			order: ${e=>"UP"===e.openDirection?-1:0};
 		}
 	}
-`;exports.default=t;
+`;exports.default=i;

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

@@ -14,5 +14,8 @@ export interface AccordionProps {
     refresh?: number | boolean;
     autoOpen?: boolean;
     childrenMaxHeight?: number;
+    openDirection?: 'DOWN' | 'UP';
+    headerStyles?: React.CSSProperties;
+    onToggleAccordion?: (state: boolean) => 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 n,useRef as t,useEffect as o}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;const[h,u]=n(!1),v=t(null),g=t(null);o((()=>{l.autoOpen&&m(l.autoOpen,{})}),[l.autoOpen]);const m=(e,r)=>{var n;g.current&&v.current&&("keydown"===r.type&&"Enter"!==r.key||(u(e),g.current.style.maxHeight?(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"):(g.current.style.maxHeight=(null!==(n=l.childrenMaxHeight)&&void 0!==n?n: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")))};return o((()=>{var e;h&&(null==l?void 0:l.refresh)&&(null===(e=null==g?void 0:g.current)||void 0===e?void 0:e.scrollHeight)&&!l.childrenMaxHeight&&setTimeout((()=>{g.current.style.maxHeight=g.current.scrollHeight+"px"}),100)}),[h,null==l?void 0:l.refresh,null===(d=null==g?void 0:g.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},{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"},{children:["string"==typeof l.header?r(i,{children:null==l?void 0:l.header}):l.header,r(s,{isNewIcon:!0,ref:v})]})),l.rightActionComponent&&e("div",Object.assign({className:"accordion__overview__header"},{children:[e("div",Object.assign({className:"accordion__overview__title-wrapper"},{children:[r(s,{isNewIcon:!0,ref:v}),"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:g,className:"accordion__content"},{children:l.children}))]}))};export{l as BikAccordion};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as n,useRef as o,useEffect as t}from"react";import{TitleRegular as i,BodySecondary as c}from"../TypographyStyle.js";import a from"./Accordion.style.js";import l from"./AccordionArrow.js";const s=s=>{var d,h;const[u,v]=n(!1),g=o(null),p=o(null);t((()=>{s.autoOpen&&m(s.autoOpen,{})}),[s.autoOpen]);const m=(e,r)=>{var n,o;p.current&&g.current&&("keydown"===r.type&&"Enter"!==r.key||(v(e),p.current.style.maxHeight?(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"):(p.current.style.maxHeight=(null!==(n=s.childrenMaxHeight)&&void 0!==n?n: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"),null===(o=s.onToggleAccordion)||void 0===o||o.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(a,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,{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,{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(c,{children:s.caption})}))]})),r("div",Object.assign({ref:p,className:"accordion__content"},{children:s.children}))]}))};export{s as BikAccordion};

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

@@ -1,3 +1,4 @@
+import { AccordionProps } from './Accordion';
 declare const AccordionStyle: import("styled-components").StyledComponent<"div", any, {
     isActive: boolean;
     width?: string | undefined;
@@ -7,5 +8,6 @@ declare const AccordionStyle: import("styled-components").StyledComponent<"div",
     showBorders?: boolean | undefined;
     backgroundColor?: string | undefined;
     hasChildrenMaxHeight?: boolean | undefined;
+    openDirection?: AccordionProps['openDirection'];
 }, never>;
 export default AccordionStyle;

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

@@ -31,6 +31,7 @@ import e from"styled-components";import{COLORS as r}from"../../constants/Theme.j
 			${e=>e.isActive?{margin:(null==e?void 0:e.contentMargin)||"0px"}:{}};
 			overflow: ${e=>e.hasChildrenMaxHeight?"scroll":"hidden"};
 			max-height: 0;
+			order: ${e=>"UP"===e.openDirection?-1:0};
 		}
 	}
 `;export{o as default};

package/package.json

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