@bikdotai/bik-component-library 0.0.532-beta.cm-2 → 0.0.532-beta.cm-4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/accordion/Accordion.d.ts +4 -0
- package/dist/cjs/components/accordion/Accordion.js +1 -1
- package/dist/cjs/components/accordion/Accordion.style.d.ts +2 -0
- package/dist/cjs/components/accordion/AccordionArrow.d.ts +1 -0
- package/dist/cjs/components/accordion/AccordionArrow.js +1 -1
- package/dist/esm/components/accordion/Accordion.d.ts +4 -0
- package/dist/esm/components/accordion/Accordion.js +1 -1
- package/dist/esm/components/accordion/Accordion.style.d.ts +2 -0
- package/dist/esm/components/accordion/AccordionArrow.d.ts +1 -0
- package/dist/esm/components/accordion/AccordionArrow.js +1 -1
- package/package.json +1 -1
|
@@ -14,5 +14,9 @@ export interface AccordionProps {
|
|
|
14
14
|
refresh?: number | boolean;
|
|
15
15
|
autoOpen?: boolean;
|
|
16
16
|
childrenMaxHeight?: number;
|
|
17
|
+
openDirection?: 'DOWN' | 'UP';
|
|
18
|
+
headerStyles?: React.CSSProperties;
|
|
19
|
+
onToggleAccordion?: (state: boolean) => void;
|
|
20
|
+
arrowColor?: string;
|
|
17
21
|
}
|
|
18
22
|
export declare const BikAccordion: React.FC<AccordionProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("../TypographyStyle.js"),t=require("./Accordion.style.js"),n=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]);const h=(e,r)=>{var o,t;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!==(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"),null===(t=i.onToggleAccordion)||void 0===t||t.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(t.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(n.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(n.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}))]}))};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { AccordionProps } from './Accordion';
|
|
1
2
|
declare const AccordionStyle: import("styled-components").StyledComponent<"div", any, {
|
|
2
3
|
isActive: boolean;
|
|
3
4
|
width?: string | undefined;
|
|
@@ -7,5 +8,6 @@ declare const AccordionStyle: import("styled-components").StyledComponent<"div",
|
|
|
7
8
|
showBorders?: boolean | undefined;
|
|
8
9
|
backgroundColor?: string | undefined;
|
|
9
10
|
hasChildrenMaxHeight?: boolean | undefined;
|
|
11
|
+
openDirection?: AccordionProps['openDirection'];
|
|
10
12
|
}, never>;
|
|
11
13
|
export default AccordionStyle;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { HTMLAttributes } from 'react';
|
|
2
2
|
interface BikAccordionArrowProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
3
|
isNewIcon: boolean;
|
|
4
|
+
arrowColor?: string;
|
|
4
5
|
}
|
|
5
6
|
declare const BikAccordionArrow: React.ForwardRefExoticComponent<BikAccordionArrowProps & React.RefAttributes<HTMLDivElement>>;
|
|
6
7
|
export default BikAccordionArrow;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=r(require("react")).default.forwardRef(((r,l)=>{var t,i;return e.jsxs("div",Object.assign({ref:l,className:"d-flex align-items-center"},{children:[!r.isNewIcon&&e.jsx("svg",Object.assign({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e.jsx("path",{d:"M7.7071 10.7071C7.07713 10.0771 7.5233 9 8.41421 9H15.5858C16.4767 9 16.9228 10.0771 16.2929 10.7071L12.7071 14.2929C12.3166 14.6834 11.6834 14.6834 11.2929 14.2929L7.7071 10.7071Z",fill:null!==(t=r.arrowColor)&&void 0!==t?t:"currentColor"})})),r.isNewIcon&&e.jsx("svg",Object.assign({width:"10",height:"6",viewBox:"0 0 10 6",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0.528758 0.52827C0.789108 0.26792 1.21122 0.26792 1.47157 0.52827L5.00016 4.05687L8.52876 0.52827C8.78911 0.26792 9.21122 0.26792 9.47157 0.52827C9.73192 0.788619 9.73192 1.21073 9.47157 1.47108L5.47157 5.47108C5.21122 5.73143 4.78911 5.73143 4.52876 5.47108L0.528758 1.47108C0.268409 1.21073 0.268409 0.788619 0.528758 0.52827Z",fill:null!==(i=r.arrowColor)&&void 0!==i?i:"currentColor"})}))]}))}));l.displayName="BikAccordionArrow",exports.default=l;
|
|
@@ -14,5 +14,9 @@ export interface AccordionProps {
|
|
|
14
14
|
refresh?: number | boolean;
|
|
15
15
|
autoOpen?: boolean;
|
|
16
16
|
childrenMaxHeight?: number;
|
|
17
|
+
openDirection?: 'DOWN' | 'UP';
|
|
18
|
+
headerStyles?: React.CSSProperties;
|
|
19
|
+
onToggleAccordion?: (state: boolean) => void;
|
|
20
|
+
arrowColor?: string;
|
|
17
21
|
}
|
|
18
22
|
export declare const BikAccordion: React.FC<AccordionProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as
|
|
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]);const m=(e,r)=>{var o,n;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!==(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"),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};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { AccordionProps } from './Accordion';
|
|
1
2
|
declare const AccordionStyle: import("styled-components").StyledComponent<"div", any, {
|
|
2
3
|
isActive: boolean;
|
|
3
4
|
width?: string | undefined;
|
|
@@ -7,5 +8,6 @@ declare const AccordionStyle: import("styled-components").StyledComponent<"div",
|
|
|
7
8
|
showBorders?: boolean | undefined;
|
|
8
9
|
backgroundColor?: string | undefined;
|
|
9
10
|
hasChildrenMaxHeight?: boolean | undefined;
|
|
11
|
+
openDirection?: AccordionProps['openDirection'];
|
|
10
12
|
}, never>;
|
|
11
13
|
export default AccordionStyle;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { HTMLAttributes } from 'react';
|
|
2
2
|
interface BikAccordionArrowProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
3
|
isNewIcon: boolean;
|
|
4
|
+
arrowColor?: string;
|
|
4
5
|
}
|
|
5
6
|
declare const BikAccordionArrow: React.ForwardRefExoticComponent<BikAccordionArrowProps & React.RefAttributes<HTMLDivElement>>;
|
|
6
7
|
export default BikAccordionArrow;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import o from"react";const i=o.forwardRef(((o,i)=>{var l,n;return e("div",Object.assign({ref:i,className:"d-flex align-items-center"},{children:[!o.isNewIcon&&r("svg",Object.assign({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:r("path",{d:"M7.7071 10.7071C7.07713 10.0771 7.5233 9 8.41421 9H15.5858C16.4767 9 16.9228 10.0771 16.2929 10.7071L12.7071 14.2929C12.3166 14.6834 11.6834 14.6834 11.2929 14.2929L7.7071 10.7071Z",fill:null!==(l=o.arrowColor)&&void 0!==l?l:"currentColor"})})),o.isNewIcon&&r("svg",Object.assign({width:"10",height:"6",viewBox:"0 0 10 6",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:r("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0.528758 0.52827C0.789108 0.26792 1.21122 0.26792 1.47157 0.52827L5.00016 4.05687L8.52876 0.52827C8.78911 0.26792 9.21122 0.26792 9.47157 0.52827C9.73192 0.788619 9.73192 1.21073 9.47157 1.47108L5.47157 5.47108C5.21122 5.73143 4.78911 5.73143 4.52876 5.47108L0.528758 1.47108C0.268409 1.21073 0.268409 0.788619 0.528758 0.52827Z",fill:null!==(n=o.arrowColor)&&void 0!==n?n:"currentColor"})}))]}))}));i.displayName="BikAccordionArrow";export{i as default};
|