@bikdotai/bik-component-library 0.0.74 → 0.0.76
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/CHANGELOG.md +7 -0
- package/dist/cjs/components/alerts/Alert.d.ts +12 -0
- package/dist/cjs/components/alerts/Alert.styled.d.ts +4 -0
- package/dist/cjs/components/alerts/AlertHelper.d.ts +24 -0
- package/dist/cjs/components/alerts/index.d.ts +1 -0
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js +1 -1
- package/dist/cjs/components/zeroState/ZeroState.js +1 -1
- package/dist/cjs/constants/Theme.d.ts +4 -0
- package/dist/cjs/constants/Theme.js +1 -1
- package/dist/esm/components/alerts/Alert.d.ts +12 -0
- package/dist/esm/components/alerts/Alert.styled.d.ts +4 -0
- package/dist/esm/components/alerts/AlertHelper.d.ts +24 -0
- package/dist/esm/components/alerts/index.d.ts +1 -0
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js +1 -1
- package/dist/esm/components/zeroState/ZeroState.js +4 -4
- package/dist/esm/constants/Theme.d.ts +4 -0
- package/dist/esm/constants/Theme.js +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ALERT_TYPES } from "./AlertHelper";
|
|
3
|
+
export type AlertProps = {
|
|
4
|
+
type: ALERT_TYPES;
|
|
5
|
+
text: string;
|
|
6
|
+
icon?: React.FC<{
|
|
7
|
+
width: number;
|
|
8
|
+
height: number;
|
|
9
|
+
color: string;
|
|
10
|
+
}>;
|
|
11
|
+
};
|
|
12
|
+
export declare const Alert: React.FC<AlertProps>;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export declare enum ALERT_TYPES {
|
|
2
|
+
NEGATIVE = "Negative",
|
|
3
|
+
WARNING = "Warning",
|
|
4
|
+
POSITIVE = "Positive",
|
|
5
|
+
NEUTRAL = "Neutral"
|
|
6
|
+
}
|
|
7
|
+
export declare const COLOR_CONFIG_MAP: {
|
|
8
|
+
Negative: {
|
|
9
|
+
backgroundColor: string;
|
|
10
|
+
textColor: string;
|
|
11
|
+
};
|
|
12
|
+
Warning: {
|
|
13
|
+
backgroundColor: string;
|
|
14
|
+
textColor: string;
|
|
15
|
+
};
|
|
16
|
+
Positive: {
|
|
17
|
+
backgroundColor: string;
|
|
18
|
+
textColor: string;
|
|
19
|
+
};
|
|
20
|
+
Neutral: {
|
|
21
|
+
backgroundColor: string;
|
|
22
|
+
textColor: string;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Alert';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../../../zeroState/ZeroState.js"),n=require("../../../../hooks/useOutside.js"),i=require("../utils/iterationOnOptions.js"),l=require("./description/Description.js"),o=require("./menu/FreeFormMenu.js"),r=require("./menu/MenuList.js"),u=require("./menu/SelectAllMenu.js"),c=require("./multiSelect/MultiSelectDropdownBottomBar.js"),a=require("./OpennedDropdown.styled.js"),d=require("./searchbox/SearchBox.js"),p=require("./searchbox/SearchZeroState.js");const f=304,h=290;exports.OpenedDropdown=j=>{let{options:S,isSearchable:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../../../zeroState/ZeroState.js"),n=require("../../../../hooks/useOutside.js"),i=require("../utils/iterationOnOptions.js"),l=require("./description/Description.js"),o=require("./menu/FreeFormMenu.js"),r=require("./menu/MenuList.js"),u=require("./menu/SelectAllMenu.js"),c=require("./multiSelect/MultiSelectDropdownBottomBar.js"),a=require("./OpennedDropdown.styled.js"),d=require("./searchbox/SearchBox.js"),p=require("./searchbox/SearchZeroState.js");const f=304,h=290;exports.OpenedDropdown=j=>{let{options:S,isSearchable:b,isMultiSelect:O,width:x,allowFreeForm:g,height:v,onClose:m,onSelect:w}=j;const[q,y]=t.useState(null!=S?S:[]);t.useEffect((()=>{y(S)}),[S]);const[M,C]=t.useState(null!=x?x:h),[F,L]=t.useState(""),[D,A]=t.useState(null),B=t.useRef(null);n.useOutside(B,(()=>{A(null),null==m||m()}));const Z=null!=v?v:f,E="number"==typeof Z?b&&O?Z-96:b&&!O||!b&&O?Z-48:Z:Z;function H(e){if(O){const t=i.iterateOnOptions(q,{selected:e.selected},(t=>t.value===e.value));y([...t])}else null==w||w(e)}t.useEffect((()=>{const e=null!=x?x:h;if(null===D)C(e);else if("number"==typeof e)C(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));C(t)}}),[D]);const _=q.map((e=>{var t;if(F){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(F.toLowerCase()))})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(F.toLowerCase()))?e:null}return e})).filter((e=>null!==e)),k=!!b&&F&&0===_.length;return e.jsxs(a.OpennedDropdownContainer,Object.assign({ref:B,style:{width:M}},{children:[e.jsxs("div",Object.assign({style:{width:D?"50%":"100%",display:"flex",flexDirection:"column"}},{children:[!!b&&e.jsx(d.SearchBox,{onSearch:function(e){L(e)}}),_.length||F?e.jsxs(a.MenuListContainer,Object.assign({minHeight:Z,maxHeight:E},{children:[!!O&&!k&&e.jsx(u.SelectAllMenu,{options:q,onSelect:function(e){if("selectAll"===e){const e=i.iterateOnOptions(q,{selected:!0},(e=>{var t;return F?(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(F.toLowerCase()))&&!e.disabled:!e.disabled}));y([...e])}else if("notSelected"===e){const e=i.iterateOnOptions(q,{selected:!1},(e=>!e.disabled));y([...e])}}}),!g&&k&&e.jsx(p.SearchZeroState,{searchedString:F}),g&&k&&e.jsx(o.FreeFormMenu,{isMultiSelect:O,onSelect:function(e){if(!O)return void H({label:F,value:F,isFreeForm:!0,selected:!0});const t=q.map((t=>t.options?t:Object.assign(Object.assign({},t),{selected:t.label===F&&t.value===F?e:t.selected})));e&&(t.some((e=>e.label===F&&e.value===F))||t.unshift({label:F,value:F,isFreeForm:!0,selected:!0})),y([...t])},searchedString:F}),e.jsx(r.MenuList,{onSelect:H,showDescription:function(e,t){A(e&&t?{title:e,description:t}:null)},isMultiSelect:O,options:_})]})):e.jsx("div",Object.assign({style:{height:Z,display:"flex"}},{children:e.jsx(s.ZeroState,{title:"No options passed",subTitle:"Sorry we could not find any options to show"})})),!!O&&!(!_.length&&!F)&&e.jsx(c.default,{onClear:function(){const e=i.iterateOnOptions(q,{selected:!1});y([...e])},onApply:function(){const e=[];q.forEach((t=>{if(t.options){const s=t.options.filter((e=>!0===e.selected));e.push(Object.assign(Object.assign({},t),{options:[...s]}))}else t.selected&&e.push(Object.assign({},t))})),null==w||w([...e])},list:q})]})),!!D&&e.jsx(l.Description,{title:D.title,description:D.description})]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../../zeroState/ZeroState.js");exports.SearchZeroState=t=>{let{searchedString:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../../zeroState/ZeroState.js");exports.SearchZeroState=t=>{let{searchedString:s}=t;return e.jsx("div",Object.assign({style:{margin:"28px auto"}},{children:e.jsx(r.ZeroState,{title:"No results found",subTitle:`Sorry we could not find any results for "${null!=s?s:""}"`})}))};
|
|
@@ -14,4 +14,4 @@
|
|
|
14
14
|
align-items: center;
|
|
15
15
|
justify-content: center;
|
|
16
16
|
border-radius: 24px;
|
|
17
|
-
`;exports.ZeroState=t=>{let{subTitle:l,title:i,IconHolderStyle:a,style:
|
|
17
|
+
`;exports.ZeroState=t=>{let{subTitle:l,title:i,IconHolderStyle:a,style:d}=t;return e.jsxs(o,Object.assign({style:null!=d?d:{}},{children:[e.jsx(c,Object.assign({style:null!=a?a:{}},{children:e.jsx(s.default,{color:n.COLORS.content.placeholder,height:24,width:24})})),e.jsx(r.TitleRegular,Object.assign({style:{marginTop:8,color:n.COLORS.content.primary}},{children:null!=i?i:"No results found"})),!!l&&e.jsx(r.BodyCaption,Object.assign({style:{marginTop:4,color:n.COLORS.content.secondary,textAlign:"center",maxWidth:184}},{children:l}))]}))};
|
|
@@ -92,9 +92,11 @@ export declare const COLORS: {
|
|
|
92
92
|
};
|
|
93
93
|
warning: {
|
|
94
94
|
lightAlt: string;
|
|
95
|
+
vibrant: string;
|
|
95
96
|
};
|
|
96
97
|
positive: {
|
|
97
98
|
lightAlt: string;
|
|
99
|
+
vibrant: string;
|
|
98
100
|
};
|
|
99
101
|
brandLightAlt: string;
|
|
100
102
|
blue: {
|
|
@@ -370,9 +372,11 @@ export declare const DEFAULT_THEME: {
|
|
|
370
372
|
};
|
|
371
373
|
warning: {
|
|
372
374
|
lightAlt: string;
|
|
375
|
+
vibrant: string;
|
|
373
376
|
};
|
|
374
377
|
positive: {
|
|
375
378
|
lightAlt: string;
|
|
379
|
+
vibrant: string;
|
|
376
380
|
};
|
|
377
381
|
brandLightAlt: string;
|
|
378
382
|
blue: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e={brand:{900:"#28034E",800:"#4B1583",500:"#731DCF",50:"#EFE6F9"},grayscale:{900:"#212121",700:"#616161",500:"#9E9E9E",400:"#BDBDBD",200:"#E0E0E0",100:"#F0F0F0",50:"#FAFAFA",white:"#FFFFFF",alpha:"#00000088"},negative:{900:"#B92321",700:"#D53434",100:"#FFCED4",50:"#FFEBEF"},warning:{900:"#99631B",500:"#FEC02D",100:"#FFEABE",50:"#FFF7E5"},positive:{900:"#00580E",700:"#1A872C",100:"#C3E4C4",50:"#E6F4E7"}},t={background:{inactive:e.grayscale[200],base:e.grayscale[100],inverse:e.brand[900],inverseLight:e.brand[800],brand:e.brand[500],brandLight:e.brand[50],negative:{vibrant:e.negative[700],light:e.negative[50]},warning:{vibrant:e.warning[500],light:e.warning[50]},positive:{vibrant:e.positive[700],light:e.positive[50]},blue:{light:"#E5F2FF"}},icon:{placeholder:"#9E9E9E"},scrim:{standard:"#00000099"},surface:{standard:e.grayscale.white,subdued:e.grayscale[50],hovered:e.grayscale[100]},content:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],inactive:e.grayscale[400],brand:e.brand[500],primaryInverse:e.grayscale.white,secondaryInverse:"#ffffffcc",negative:e.negative[900],warning:e.warning[900],positive:e.positive[900],blue:"#28458F"},stroke:{primary:e.grayscale[200],brand:e.brand[500],negative:{lightAlt:e.negative[100],vibrant:e.negative[700]},warning:{lightAlt:e.warning[100]},positive:{lightAlt:e.positive[100]},brandLightAlt:"#DDCCF0",blue:{lightAlt:"#C3D5E5"}},special:{whatsapp:{brand:"#25D366",gradient:"linear-gradient(360deg, #20B038 0%, #60D66A 100%)",dark:"#455A64",gradientArr:["#20B038","#60D66A"]},brand:{google:"#DD4B39",facebook:"#1877F2"}},text:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],disabled:e.grayscale[400],white:e.grayscale.white,brand:e.brand[500],altPrimary:e.brand[900],altSecondary:e.brand[800]}},i={display:{fontWeight:"400",fontSize:32,lineHeight:40,letterSpacing:0},titleXLarge:{fontWeight:"600",fontSize:32,lineHeight:40,letterSpacing:0},titleLarge:{fontWeight:"600",fontSize:28,lineHeight:32,letterSpacing:0},titleMedium:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},titleRegular:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},titleSmall:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},bodyPrimary:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodyLarge:{fontWeight:"400",fontSize:20,lineHeight:28,letterSpacing:0},bodySecondary:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},caption:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},tiny:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},subHeading:{fontWeight:"600",fontSize:10,lineHeight:12,letterSpacing:0},title1:{fontWeight:"600",fontSize:24,lineHeight:32,letterSpacing:0},title1Mobile:{fontWeight:"600",fontSize:20,lineHeight:30,letterSpacing:0},title2:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},title2Mobile:{fontWeight:"600",fontSize:18,lineHeight:24,letterSpacing:0},title3:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},title3Mobile:{fontWeight:"500",fontSize:14,lineHeight:20,letterSpacing:0},title4:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},textPlaceholder:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},title4Mobile:{fontWeight:"400",fontSize:10,lineHeight:16,letterSpacing:0},bodyRegularMobile:{fontWeight:"400",fontSize:14,lineHeight:18,letterSpacing:0},bodyRegular:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodySmall:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},buttonLarge:{fontWeight:"600",fontSize:16,lineHeight:20,letterSpacing:0},buttonRegular:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},captionMobile:{fontWeight:"500",fontSize:10,lineHeight:12,letterSpacing:0},captionBold:{fontWeight:"700",fontSize:12,lineHeight:16,letterSpacing:0},text1Bold:{fontWeight:"700",fontSize:10,lineHeight:14,letterSpacing:0},toast:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},toastMobile:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0}},n={colorsV2:t,fonts:i};exports.BASE_COLORS=e,exports.COLORS=t,exports.DEFAULT_THEME=n,exports.FONTS=i;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e={brand:{900:"#28034E",800:"#4B1583",500:"#731DCF",50:"#EFE6F9"},grayscale:{900:"#212121",700:"#616161",500:"#9E9E9E",400:"#BDBDBD",200:"#E0E0E0",100:"#F0F0F0",50:"#FAFAFA",white:"#FFFFFF",alpha:"#00000088"},negative:{900:"#B92321",700:"#D53434",100:"#FFCED4",50:"#FFEBEF"},warning:{900:"#99631B",500:"#FEC02D",100:"#FFEABE",50:"#FFF7E5"},positive:{900:"#00580E",700:"#1A872C",100:"#C3E4C4",50:"#E6F4E7"}},t={background:{inactive:e.grayscale[200],base:e.grayscale[100],inverse:e.brand[900],inverseLight:e.brand[800],brand:e.brand[500],brandLight:e.brand[50],negative:{vibrant:e.negative[700],light:e.negative[50]},warning:{vibrant:e.warning[500],light:e.warning[50]},positive:{vibrant:e.positive[700],light:e.positive[50]},blue:{light:"#E5F2FF"}},icon:{placeholder:"#9E9E9E"},scrim:{standard:"#00000099"},surface:{standard:e.grayscale.white,subdued:e.grayscale[50],hovered:e.grayscale[100]},content:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],inactive:e.grayscale[400],brand:e.brand[500],primaryInverse:e.grayscale.white,secondaryInverse:"#ffffffcc",negative:e.negative[900],warning:e.warning[900],positive:e.positive[900],blue:"#28458F"},stroke:{primary:e.grayscale[200],brand:e.brand[500],negative:{lightAlt:e.negative[100],vibrant:e.negative[700]},warning:{lightAlt:e.warning[100],vibrant:e.warning[500]},positive:{lightAlt:e.positive[100],vibrant:e.positive[700]},brandLightAlt:"#DDCCF0",blue:{lightAlt:"#C3D5E5"}},special:{whatsapp:{brand:"#25D366",gradient:"linear-gradient(360deg, #20B038 0%, #60D66A 100%)",dark:"#455A64",gradientArr:["#20B038","#60D66A"]},brand:{google:"#DD4B39",facebook:"#1877F2"}},text:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],disabled:e.grayscale[400],white:e.grayscale.white,brand:e.brand[500],altPrimary:e.brand[900],altSecondary:e.brand[800]}},i={display:{fontWeight:"400",fontSize:32,lineHeight:40,letterSpacing:0},titleXLarge:{fontWeight:"600",fontSize:32,lineHeight:40,letterSpacing:0},titleLarge:{fontWeight:"600",fontSize:28,lineHeight:32,letterSpacing:0},titleMedium:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},titleRegular:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},titleSmall:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},bodyPrimary:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodyLarge:{fontWeight:"400",fontSize:20,lineHeight:28,letterSpacing:0},bodySecondary:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},caption:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},tiny:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},subHeading:{fontWeight:"600",fontSize:10,lineHeight:12,letterSpacing:0},title1:{fontWeight:"600",fontSize:24,lineHeight:32,letterSpacing:0},title1Mobile:{fontWeight:"600",fontSize:20,lineHeight:30,letterSpacing:0},title2:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},title2Mobile:{fontWeight:"600",fontSize:18,lineHeight:24,letterSpacing:0},title3:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},title3Mobile:{fontWeight:"500",fontSize:14,lineHeight:20,letterSpacing:0},title4:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},textPlaceholder:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},title4Mobile:{fontWeight:"400",fontSize:10,lineHeight:16,letterSpacing:0},bodyRegularMobile:{fontWeight:"400",fontSize:14,lineHeight:18,letterSpacing:0},bodyRegular:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodySmall:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},buttonLarge:{fontWeight:"600",fontSize:16,lineHeight:20,letterSpacing:0},buttonRegular:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},captionMobile:{fontWeight:"500",fontSize:10,lineHeight:12,letterSpacing:0},captionBold:{fontWeight:"700",fontSize:12,lineHeight:16,letterSpacing:0},text1Bold:{fontWeight:"700",fontSize:10,lineHeight:14,letterSpacing:0},toast:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},toastMobile:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0}},n={colorsV2:t,fonts:i};exports.BASE_COLORS=e,exports.COLORS=t,exports.DEFAULT_THEME=n,exports.FONTS=i;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ALERT_TYPES } from "./AlertHelper";
|
|
3
|
+
export type AlertProps = {
|
|
4
|
+
type: ALERT_TYPES;
|
|
5
|
+
text: string;
|
|
6
|
+
icon?: React.FC<{
|
|
7
|
+
width: number;
|
|
8
|
+
height: number;
|
|
9
|
+
color: string;
|
|
10
|
+
}>;
|
|
11
|
+
};
|
|
12
|
+
export declare const Alert: React.FC<AlertProps>;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export declare enum ALERT_TYPES {
|
|
2
|
+
NEGATIVE = "Negative",
|
|
3
|
+
WARNING = "Warning",
|
|
4
|
+
POSITIVE = "Positive",
|
|
5
|
+
NEUTRAL = "Neutral"
|
|
6
|
+
}
|
|
7
|
+
export declare const COLOR_CONFIG_MAP: {
|
|
8
|
+
Negative: {
|
|
9
|
+
backgroundColor: string;
|
|
10
|
+
textColor: string;
|
|
11
|
+
};
|
|
12
|
+
Warning: {
|
|
13
|
+
backgroundColor: string;
|
|
14
|
+
textColor: string;
|
|
15
|
+
};
|
|
16
|
+
Positive: {
|
|
17
|
+
backgroundColor: string;
|
|
18
|
+
textColor: string;
|
|
19
|
+
};
|
|
20
|
+
Neutral: {
|
|
21
|
+
backgroundColor: string;
|
|
22
|
+
textColor: string;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Alert';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as l,useRef as n}from"react";import{ZeroState as s}from"../../../zeroState/ZeroState.js";import{useOutside as i}from"../../../../hooks/useOutside.js";import{iterateOnOptions as r}from"../utils/iterationOnOptions.js";import{Description as c}from"./description/Description.js";import{FreeFormMenu as u}from"./menu/FreeFormMenu.js";import{MenuList as a}from"./menu/MenuList.js";import{SelectAllMenu as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as l,useRef as n}from"react";import{ZeroState as s}from"../../../zeroState/ZeroState.js";import{useOutside as i}from"../../../../hooks/useOutside.js";import{iterateOnOptions as r}from"../utils/iterationOnOptions.js";import{Description as c}from"./description/Description.js";import{FreeFormMenu as u}from"./menu/FreeFormMenu.js";import{MenuList as a}from"./menu/MenuList.js";import{SelectAllMenu as d}from"./menu/SelectAllMenu.js";import p from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as m,MenuListContainer as f}from"./OpennedDropdown.styled.js";import{SearchBox as h}from"./searchbox/SearchBox.js";import{SearchZeroState as b}from"./searchbox/SearchZeroState.js";const j=304,g=290,S=S=>{let{options:v,isSearchable:w,isMultiSelect:O,width:y,allowFreeForm:x,height:C,onClose:F,onSelect:L}=S;const[M,D]=o(null!=v?v:[]);l((()=>{D(v)}),[v]);const[A,B]=o(null!=y?y:g),[H,Z]=o(""),[k,z]=o(null),E=n(null);i(E,(()=>{z(null),null==F||F()}));const I=null!=C?C:j,N="number"==typeof I?w&&O?I-96:w&&!O||!w&&O?I-48:I:I;function T(e){if(O){const t=r(M,{selected:e.selected},(t=>t.value===e.value));D([...t])}else null==L||L(e)}l((()=>{const e=null!=y?y:g;if(null===k)B(e);else if("number"==typeof e)B(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));B(t)}}),[k]);const W=M.map((e=>{var t;if(H){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(H.toLowerCase()))})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(H.toLowerCase()))?e:null}return e})).filter((e=>null!==e)),q=!!w&&H&&0===W.length;return e(m,Object.assign({ref:E,style:{width:A}},{children:[e("div",Object.assign({style:{width:k?"50%":"100%",display:"flex",flexDirection:"column"}},{children:[!!w&&t(h,{onSearch:function(e){Z(e)}}),W.length||H?e(f,Object.assign({minHeight:I,maxHeight:N},{children:[!!O&&!q&&t(d,{options:M,onSelect:function(e){if("selectAll"===e){const e=r(M,{selected:!0},(e=>{var t;return H?(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(H.toLowerCase()))&&!e.disabled:!e.disabled}));D([...e])}else if("notSelected"===e){const e=r(M,{selected:!1},(e=>!e.disabled));D([...e])}}}),!x&&q&&t(b,{searchedString:H}),x&&q&&t(u,{isMultiSelect:O,onSelect:function(e){if(!O)return void T({label:H,value:H,isFreeForm:!0,selected:!0});const t=M.map((t=>t.options?t:Object.assign(Object.assign({},t),{selected:t.label===H&&t.value===H?e:t.selected})));e&&(t.some((e=>e.label===H&&e.value===H))||t.unshift({label:H,value:H,isFreeForm:!0,selected:!0})),D([...t])},searchedString:H}),t(a,{onSelect:T,showDescription:function(e,t){z(e&&t?{title:e,description:t}:null)},isMultiSelect:O,options:W})]})):t("div",Object.assign({style:{height:I,display:"flex"}},{children:t(s,{title:"No options passed",subTitle:"Sorry we could not find any options to show"})})),!!O&&!(!W.length&&!H)&&t(p,{onClear:function(){const e=r(M,{selected:!1});D([...e])},onApply:function(){const e=[];M.forEach((t=>{if(t.options){const o=t.options.filter((e=>!0===e.selected));e.push(Object.assign(Object.assign({},t),{options:[...o]}))}else t.selected&&e.push(Object.assign({},t))})),null==L||L([...e])},list:M})]})),!!k&&t(c,{title:k.title,description:k.description})]}))};export{S as OpenedDropdown};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as t}from"react/jsx-runtime";import{ZeroState as r}from"../../../../zeroState/ZeroState.js";const e=e=>{let{searchedString:o}=e;return t(r,{title:"No results found",subTitle:`Sorry we could not find any results for "${null!=o?o:""}"`})};export{e as SearchZeroState};
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{ZeroState as r}from"../../../../zeroState/ZeroState.js";const e=e=>{let{searchedString:o}=e;return t("div",Object.assign({style:{margin:"28px auto"}},{children:t(r,{title:"No results found",subTitle:`Sorry we could not find any results for "${null!=o?o:""}"`})}))};export{e as SearchZeroState};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-components";import{TitleRegular as r,BodyCaption as o}from"../TypographyStyle.js";import{COLORS as
|
|
2
|
-
background: ${
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-components";import{TitleRegular as r,BodyCaption as o}from"../TypographyStyle.js";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/alert.svg.js";const s=n.div`
|
|
2
|
+
background: ${i.surface.standard};
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
align-items: center;
|
|
6
6
|
justify-content: center;
|
|
7
7
|
flex: 1;
|
|
8
8
|
`,c=n.div`
|
|
9
|
-
background: ${
|
|
9
|
+
background: ${i.background.base};
|
|
10
10
|
width: 48px;
|
|
11
11
|
height: 48px;
|
|
12
12
|
display: flex;
|
|
@@ -14,4 +14,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-component
|
|
|
14
14
|
align-items: center;
|
|
15
15
|
justify-content: center;
|
|
16
16
|
border-radius: 24px;
|
|
17
|
-
`,a=n=>{let{subTitle:a,title:d,IconHolderStyle:m,style:p}=n;return e(
|
|
17
|
+
`,a=n=>{let{subTitle:a,title:d,IconHolderStyle:m,style:p}=n;return e(s,Object.assign({style:null!=p?p:{}},{children:[t(c,Object.assign({style:null!=m?m:{}},{children:t(l,{color:i.content.placeholder,height:24,width:24})})),t(r,Object.assign({style:{marginTop:8,color:i.content.primary}},{children:null!=d?d:"No results found"})),!!a&&t(o,Object.assign({style:{marginTop:4,color:i.content.secondary,textAlign:"center",maxWidth:184}},{children:a}))]}))};export{a as ZeroState};
|
|
@@ -92,9 +92,11 @@ export declare const COLORS: {
|
|
|
92
92
|
};
|
|
93
93
|
warning: {
|
|
94
94
|
lightAlt: string;
|
|
95
|
+
vibrant: string;
|
|
95
96
|
};
|
|
96
97
|
positive: {
|
|
97
98
|
lightAlt: string;
|
|
99
|
+
vibrant: string;
|
|
98
100
|
};
|
|
99
101
|
brandLightAlt: string;
|
|
100
102
|
blue: {
|
|
@@ -370,9 +372,11 @@ export declare const DEFAULT_THEME: {
|
|
|
370
372
|
};
|
|
371
373
|
warning: {
|
|
372
374
|
lightAlt: string;
|
|
375
|
+
vibrant: string;
|
|
373
376
|
};
|
|
374
377
|
positive: {
|
|
375
378
|
lightAlt: string;
|
|
379
|
+
vibrant: string;
|
|
376
380
|
};
|
|
377
381
|
brandLightAlt: string;
|
|
378
382
|
blue: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e={brand:{900:"#28034E",800:"#4B1583",500:"#731DCF",50:"#EFE6F9"},grayscale:{900:"#212121",700:"#616161",500:"#9E9E9E",400:"#BDBDBD",200:"#E0E0E0",100:"#F0F0F0",50:"#FAFAFA",white:"#FFFFFF",alpha:"#00000088"},negative:{900:"#B92321",700:"#D53434",100:"#FFCED4",50:"#FFEBEF"},warning:{900:"#99631B",500:"#FEC02D",100:"#FFEABE",50:"#FFF7E5"},positive:{900:"#00580E",700:"#1A872C",100:"#C3E4C4",50:"#E6F4E7"}},t={background:{inactive:e.grayscale[200],base:e.grayscale[100],inverse:e.brand[900],inverseLight:e.brand[800],brand:e.brand[500],brandLight:e.brand[50],negative:{vibrant:e.negative[700],light:e.negative[50]},warning:{vibrant:e.warning[500],light:e.warning[50]},positive:{vibrant:e.positive[700],light:e.positive[50]},blue:{light:"#E5F2FF"}},icon:{placeholder:"#9E9E9E"},scrim:{standard:"#00000099"},surface:{standard:e.grayscale.white,subdued:e.grayscale[50],hovered:e.grayscale[100]},content:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],inactive:e.grayscale[400],brand:e.brand[500],primaryInverse:e.grayscale.white,secondaryInverse:"#ffffffcc",negative:e.negative[900],warning:e.warning[900],positive:e.positive[900],blue:"#28458F"},stroke:{primary:e.grayscale[200],brand:e.brand[500],negative:{lightAlt:e.negative[100],vibrant:e.negative[700]},warning:{lightAlt:e.warning[100]},positive:{lightAlt:e.positive[100]},brandLightAlt:"#DDCCF0",blue:{lightAlt:"#C3D5E5"}},special:{whatsapp:{brand:"#25D366",gradient:"linear-gradient(360deg, #20B038 0%, #60D66A 100%)",dark:"#455A64",gradientArr:["#20B038","#60D66A"]},brand:{google:"#DD4B39",facebook:"#1877F2"}},text:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],disabled:e.grayscale[400],white:e.grayscale.white,brand:e.brand[500],altPrimary:e.brand[900],altSecondary:e.brand[800]}},i={display:{fontWeight:"400",fontSize:32,lineHeight:40,letterSpacing:0},titleXLarge:{fontWeight:"600",fontSize:32,lineHeight:40,letterSpacing:0},titleLarge:{fontWeight:"600",fontSize:28,lineHeight:32,letterSpacing:0},titleMedium:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},titleRegular:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},titleSmall:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},bodyPrimary:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodyLarge:{fontWeight:"400",fontSize:20,lineHeight:28,letterSpacing:0},bodySecondary:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},caption:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},tiny:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},subHeading:{fontWeight:"600",fontSize:10,lineHeight:12,letterSpacing:0},title1:{fontWeight:"600",fontSize:24,lineHeight:32,letterSpacing:0},title1Mobile:{fontWeight:"600",fontSize:20,lineHeight:30,letterSpacing:0},title2:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},title2Mobile:{fontWeight:"600",fontSize:18,lineHeight:24,letterSpacing:0},title3:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},title3Mobile:{fontWeight:"500",fontSize:14,lineHeight:20,letterSpacing:0},title4:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},textPlaceholder:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},title4Mobile:{fontWeight:"400",fontSize:10,lineHeight:16,letterSpacing:0},bodyRegularMobile:{fontWeight:"400",fontSize:14,lineHeight:18,letterSpacing:0},bodyRegular:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodySmall:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},buttonLarge:{fontWeight:"600",fontSize:16,lineHeight:20,letterSpacing:0},buttonRegular:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},captionMobile:{fontWeight:"500",fontSize:10,lineHeight:12,letterSpacing:0},captionBold:{fontWeight:"700",fontSize:12,lineHeight:16,letterSpacing:0},text1Bold:{fontWeight:"700",fontSize:10,lineHeight:14,letterSpacing:0},toast:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},toastMobile:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0}},n={colorsV2:t,fonts:i};export{e as BASE_COLORS,t as COLORS,n as DEFAULT_THEME,i as FONTS};
|
|
1
|
+
const e={brand:{900:"#28034E",800:"#4B1583",500:"#731DCF",50:"#EFE6F9"},grayscale:{900:"#212121",700:"#616161",500:"#9E9E9E",400:"#BDBDBD",200:"#E0E0E0",100:"#F0F0F0",50:"#FAFAFA",white:"#FFFFFF",alpha:"#00000088"},negative:{900:"#B92321",700:"#D53434",100:"#FFCED4",50:"#FFEBEF"},warning:{900:"#99631B",500:"#FEC02D",100:"#FFEABE",50:"#FFF7E5"},positive:{900:"#00580E",700:"#1A872C",100:"#C3E4C4",50:"#E6F4E7"}},t={background:{inactive:e.grayscale[200],base:e.grayscale[100],inverse:e.brand[900],inverseLight:e.brand[800],brand:e.brand[500],brandLight:e.brand[50],negative:{vibrant:e.negative[700],light:e.negative[50]},warning:{vibrant:e.warning[500],light:e.warning[50]},positive:{vibrant:e.positive[700],light:e.positive[50]},blue:{light:"#E5F2FF"}},icon:{placeholder:"#9E9E9E"},scrim:{standard:"#00000099"},surface:{standard:e.grayscale.white,subdued:e.grayscale[50],hovered:e.grayscale[100]},content:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],inactive:e.grayscale[400],brand:e.brand[500],primaryInverse:e.grayscale.white,secondaryInverse:"#ffffffcc",negative:e.negative[900],warning:e.warning[900],positive:e.positive[900],blue:"#28458F"},stroke:{primary:e.grayscale[200],brand:e.brand[500],negative:{lightAlt:e.negative[100],vibrant:e.negative[700]},warning:{lightAlt:e.warning[100],vibrant:e.warning[500]},positive:{lightAlt:e.positive[100],vibrant:e.positive[700]},brandLightAlt:"#DDCCF0",blue:{lightAlt:"#C3D5E5"}},special:{whatsapp:{brand:"#25D366",gradient:"linear-gradient(360deg, #20B038 0%, #60D66A 100%)",dark:"#455A64",gradientArr:["#20B038","#60D66A"]},brand:{google:"#DD4B39",facebook:"#1877F2"}},text:{primary:e.grayscale[900],secondary:e.grayscale[700],placeholder:e.grayscale[500],disabled:e.grayscale[400],white:e.grayscale.white,brand:e.brand[500],altPrimary:e.brand[900],altSecondary:e.brand[800]}},i={display:{fontWeight:"400",fontSize:32,lineHeight:40,letterSpacing:0},titleXLarge:{fontWeight:"600",fontSize:32,lineHeight:40,letterSpacing:0},titleLarge:{fontWeight:"600",fontSize:28,lineHeight:32,letterSpacing:0},titleMedium:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},titleRegular:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},titleSmall:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},bodyPrimary:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodyLarge:{fontWeight:"400",fontSize:20,lineHeight:28,letterSpacing:0},bodySecondary:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},caption:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},tiny:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},subHeading:{fontWeight:"600",fontSize:10,lineHeight:12,letterSpacing:0},title1:{fontWeight:"600",fontSize:24,lineHeight:32,letterSpacing:0},title1Mobile:{fontWeight:"600",fontSize:20,lineHeight:30,letterSpacing:0},title2:{fontWeight:"600",fontSize:20,lineHeight:28,letterSpacing:0},title2Mobile:{fontWeight:"600",fontSize:18,lineHeight:24,letterSpacing:0},title3:{fontWeight:"600",fontSize:16,lineHeight:24,letterSpacing:0},title3Mobile:{fontWeight:"500",fontSize:14,lineHeight:20,letterSpacing:0},title4:{fontWeight:"400",fontSize:14,lineHeight:20,letterSpacing:0},textPlaceholder:{fontWeight:"400",fontSize:12,lineHeight:16,letterSpacing:0},title4Mobile:{fontWeight:"400",fontSize:10,lineHeight:16,letterSpacing:0},bodyRegularMobile:{fontWeight:"400",fontSize:14,lineHeight:18,letterSpacing:0},bodyRegular:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},bodySmall:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0},buttonLarge:{fontWeight:"600",fontSize:16,lineHeight:20,letterSpacing:0},buttonRegular:{fontWeight:"600",fontSize:14,lineHeight:20,letterSpacing:0},captionMobile:{fontWeight:"500",fontSize:10,lineHeight:12,letterSpacing:0},captionBold:{fontWeight:"700",fontSize:12,lineHeight:16,letterSpacing:0},text1Bold:{fontWeight:"700",fontSize:10,lineHeight:14,letterSpacing:0},toast:{fontWeight:"400",fontSize:16,lineHeight:24,letterSpacing:0},toastMobile:{fontWeight:"400",fontSize:10,lineHeight:12,letterSpacing:0}},n={colorsV2:t,fonts:i};export{e as BASE_COLORS,t as COLORS,n as DEFAULT_THEME,i as FONTS};
|