@bikdotai/bik-component-library 0.0.786-beta.2 → 0.0.786-beta.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/multi-level-dropdown/MenuItem.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts +5 -1
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js +30 -27
- package/dist/cjs/components/whats-new/WhatsNewButton.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MenuItem.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts +5 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js +28 -25
- package/dist/esm/components/whats-new/WhatsNewButton.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronRight2.svg.js"),n=require("react"),i=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),o=require("./MultiLevelDropdown.styled.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=s(n);exports.MenuItem=s=>{let{width:a,onDropdownItemClick:d,option:c,parents:u,allowParentSelection:p,maxLevels:O,currentLevel:v,renderNestedMenu:h,version:g}=s;var j,C,b,x,S,m,L;const[y,f]=l.default.useState(!1),[R,M]=l.default.useState(!1),[I,T]=l.default.useState({top:0,left:0}),w=n.useRef({top:0,left:0}),q=!!c.children&&c.children.length>0,k=q&&(void 0===O||v<O);return e.jsxs(o.MenuItemWrapper,Object.assign({onMouseEnter:e=>{k&&(f(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();T({top:t.top,left:t.right}),w.current={top:t.top,left:t.right}})(e))},onMouseLeave:()=>{f(!1)},onClick:e=>{e.stopPropagation(),(()=>{var e;!d||null!==(e=c.disabled)&&void 0!==e&&e||q&&!p||d(c,u)})()},id:"menuItemWrapper",style:{cursor:null!==(j=c.disabled)&&void 0!==j&&j?"not-allowed":"pointer",backgroundColor:null!==(C=c.disabled)&&void 0!==C&&C?i.COLORS.surface.standard:"transparent"}},{children:[c.customComponent?c.customComponent:e.jsxs(o.MenuItemContainer,Object.assign({isSelected:c.selected,isSubMenuOpen:y,isHovered:R,isDisabled:null!==(b=c.disabled)&&void 0!==b&&b,version:g},{children:[e.jsxs(o.ContentContainer,{children:[c.leadingIcon&&e.jsx(o.LeadingIconContainer,{children:c.leadingIcon}),e.jsxs("div",{children:[e.jsx(r.BodyCaption,Object.assign({style:{color:null!==(x=c.disabled)&&void 0!==x&&x?i.COLORS.content.inactive:c.selected||R?"3.0"===g?i.COLORS.text.primary:i.COLORS.content.positive:i.COLORS.content.primary}},{children:c.label})),c.subText&&e.jsx(r.BodyTiny,Object.assign({style:{color:null!==(S=c.disabled)&&void 0!==S&&S?i.COLORS.content.inactive:c.selected||R?"3.0"===g?i.COLORS.text.primary:i.COLORS.content.positive:i.COLORS.content.secondary,marginTop:"2px"}},{children:c.subText}))]})]}),q?e.jsx(o.TrailingIconContainer,{children:e.jsx(t.default,{width:16,height:16,color:!k||null!==(m=c.disabled)&&void 0!==m&&m?i.COLORS.content.inactive:c.selected||R?"3.0"===g?i.COLORS.text.primary:i.COLORS.content.positive:i.COLORS.content.primary})}):c.trailingIcon?e.jsx(o.TrailingIconContainer,{children:c.trailingIcon}):e.jsx(e.Fragment,{})]})),!(null!==(L=c.disabled)&&void 0!==L&&L)&&c.children&&c.children.length>0&&k&&y&&e.jsx(o.SubMenuContainer,Object.assign({width:a,className:"submenu",onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1)},{children:e.jsx(o.StyledSubMenuWrapper,Object.assign({width:a,top:I.top,left:I.left},{children:e.jsx(o.SubMenuListContainer,Object.assign({version:g},{children:h(c.children,[...u,c],v+1)}))}))}))]}))};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronRight2.svg.js"),n=require("react"),i=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),o=require("./MultiLevelDropdown.styled.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=s(n);exports.MenuItem=s=>{let{width:a,onDropdownItemClick:d,option:c,parents:u,allowParentSelection:p,maxLevels:O,currentLevel:v,renderNestedMenu:h,version:g}=s;var j,C,b,x,S,m,L;const[y,f]=l.default.useState(!1),[R,M]=l.default.useState(!1),[I,T]=l.default.useState({top:0,left:0}),w=n.useRef({top:0,left:0}),q=!!c.children&&c.children.length>0,k=q&&(void 0===O||v<O);return e.jsxs(o.MenuItemWrapper,Object.assign({version:g,onMouseEnter:e=>{k&&(f(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();T({top:t.top,left:t.right}),w.current={top:t.top,left:t.right}})(e))},onMouseLeave:()=>{f(!1)},onClick:e=>{e.stopPropagation(),(()=>{var e;!d||null!==(e=c.disabled)&&void 0!==e&&e||q&&!p||d(c,u)})()},id:"menuItemWrapper",style:{cursor:null!==(j=c.disabled)&&void 0!==j&&j?"not-allowed":"pointer",backgroundColor:null!==(C=c.disabled)&&void 0!==C&&C?i.COLORS.surface.standard:"transparent"}},{children:[c.customComponent?c.customComponent:e.jsxs(o.MenuItemContainer,Object.assign({isSelected:c.selected,isSubMenuOpen:y,isHovered:R,isDisabled:null!==(b=c.disabled)&&void 0!==b&&b,version:g},{children:[e.jsxs(o.ContentContainer,{children:[c.leadingIcon&&e.jsx(o.LeadingIconContainer,{children:c.leadingIcon}),e.jsxs("div",{children:[e.jsx(r.BodyCaption,Object.assign({style:{color:null!==(x=c.disabled)&&void 0!==x&&x?i.COLORS.content.inactive:c.selected||R?"3.0"===g?i.COLORS.text.primary:i.COLORS.content.positive:i.COLORS.content.primary}},{children:c.label})),c.subText&&e.jsx(r.BodyTiny,Object.assign({style:{color:null!==(S=c.disabled)&&void 0!==S&&S?i.COLORS.content.inactive:c.selected||R?"3.0"===g?i.COLORS.text.primary:i.COLORS.content.positive:i.COLORS.content.secondary,marginTop:"2px"}},{children:c.subText}))]})]}),q?e.jsx(o.TrailingIconContainer,{children:e.jsx(t.default,{width:16,height:16,color:!k||null!==(m=c.disabled)&&void 0!==m&&m?i.COLORS.content.inactive:c.selected||R?"3.0"===g?i.COLORS.text.primary:i.COLORS.content.positive:i.COLORS.content.primary})}):c.trailingIcon?e.jsx(o.TrailingIconContainer,{children:c.trailingIcon}):e.jsx(e.Fragment,{})]})),!(null!==(L=c.disabled)&&void 0!==L&&L)&&c.children&&c.children.length>0&&k&&y&&e.jsx(o.SubMenuContainer,Object.assign({width:a,className:"submenu",onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1)},{children:e.jsx(o.StyledSubMenuWrapper,Object.assign({width:a,top:I.top,left:I.left},{children:e.jsx(o.SubMenuListContainer,Object.assign({version:g},{children:h(c.children,[...u,c],v+1)}))}))}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),t=require("../zeroState/ZeroState.js"),r=require("../../constants/Theme.js"),s=require("../dropdown/OpenedDropdown/components/searchbox/SearchBox.js"),o=require("../floater/floater.js"),i=require("./MenuList.js"),l=require("./MultiLevelDropdown.styled.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=a(n);exports.MultiLevelDropdown=a=>{let{options:u,width:d,isSearchable:p,onDropdownItemClick:f,refElement:h,topOffset:j,leftOffset:x,isDropdownOpen:O,onDropdownOutsideClick:w,allowParentSelection:b,maxLevels:g,hideGroupLabel:v,version:m="1.0"}=a;const L=c.default.useRef(null),[S,y]=n.useState(u),C=e=>{const n=Array.isArray(u)?[...u]:[],t=[];for(;n.length>0;){const r=n.shift();r&&r.label.toLowerCase().includes(e.toLowerCase())&&t.push(r),r&&"children"in r&&r.children?n.push(...r.children):r&&"options"in r&&r.options&&n.push(...r.options)}const r=e=>e.map((e=>{if(t.includes(e))return e;if("children"in e&&e.children){const n=r(e.children);if(n.length>0)return Object.assign(Object.assign({},e),{children:n})}if("options"in e&&e.options){const n=r(e.options);if(n.length>0)return Object.assign(Object.assign({},e),{options:n})}return null})).filter((e=>null!==e));y(r(u))},q=e=>{L.current&&!L.current.contains(e.target)?w&&w(!0):w&&w(!1)};return n.useEffect((()=>{O&&C("")}),[O]),n.useEffect((()=>(document.addEventListener("mousedown",q),()=>{document.removeEventListener("mousedown",q)})),[]),n.useEffect((()=>{y(u)}),[u]),e.jsx(o.Floater,Object.assign({refElement:h,topOffset:j,leftOffset:x},{children:O&&e.jsx("div",Object.assign({ref:L,style:{backgroundColor:r.COLORS.surface.standard,zIndex:99999,borderRadius:"3.0"===m?"4px":"8px",whiteSpace:"normal"}},{children:e.jsxs(l.DropdownContainer,Object.assign({width:d,version:m},{children:[p&&e.jsx("div",Object.assign({style:{padding:"3.0"===m?"0px":"4px",width:null!=d?d:"200px"}},{children:e.jsx(s.SearchBox,{onSearch:C,version:"3.0"===m?"3.0":"2.0"})})),e.jsx(l.OptionsContainer,Object.assign({width:d,version:m},{children:(null!=S?S:[]).length>0&&e.jsx(i.MenuList,{width:null!=d?d:"200px",onDropdownItemClick:f,options:S,parents:[],allowParentSelection:b,maxLevels:g,hideGroupLabel:v,currentLevel:1,version:m})})),0===(null!=S?S:[]).length&&e.jsx(l.NoResultsContainer,Object.assign({style:{width:null!=d?d:"200px"},version:m},{children:"3.0"===m?e.jsx("span",Object.assign({style:{fontSize:"12px",color:r.COLORS.content.placeholder,lineHeight:"16px"}},{children:"No results found!"})):e.jsx(t.ZeroState,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})}))]}))}))}))};
|
|
@@ -4,13 +4,17 @@ export declare const DropdownContainer: import("styled-components").StyledCompon
|
|
|
4
4
|
}, never>;
|
|
5
5
|
export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, {
|
|
6
6
|
width?: string | undefined;
|
|
7
|
+
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
7
8
|
}, never>;
|
|
8
9
|
export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {
|
|
9
10
|
width?: string | undefined;
|
|
11
|
+
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
10
12
|
}, never>;
|
|
11
13
|
export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
14
|
export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
13
|
-
export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
15
|
+
export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
16
|
+
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
17
|
+
}, never>;
|
|
14
18
|
export interface MenuItemContainerProps {
|
|
15
19
|
isSelected?: boolean;
|
|
16
20
|
isHovered?: boolean;
|
|
@@ -1,98 +1,101 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(e);const i=n.default.div`
|
|
2
2
|
position: relative;
|
|
3
3
|
border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
|
|
4
4
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
5
|
-
padding-bottom:
|
|
6
|
-
`,o=
|
|
5
|
+
padding-bottom: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
|
|
6
|
+
`,o=n.default.div`
|
|
7
7
|
width: ${e=>{let{width:t}=e;return t||"200px"}};
|
|
8
8
|
max-width: 300px;
|
|
9
9
|
max-height: 280px;
|
|
10
10
|
overflow-y: scroll;
|
|
11
|
-
padding: 4px 0 0;
|
|
11
|
+
padding: ${e=>{let{version:t}=e;return"3.0"===t?"0":"4px 0 0"}};
|
|
12
12
|
&::-webkit-scrollbar {
|
|
13
13
|
width: 0px;
|
|
14
14
|
}
|
|
15
|
-
`,d=
|
|
16
|
-
margin-top:
|
|
17
|
-
height:
|
|
15
|
+
`,d=n.default.div`
|
|
16
|
+
margin-top: ${e=>{let{version:t}=e;return"3.0"===t?0:64}}px;
|
|
17
|
+
height: ${e=>{let{version:t}=e;return"3.0"===t?236:200}}px;
|
|
18
18
|
width: ${e=>{let{width:t}=e;return t||"200px"}};
|
|
19
|
-
|
|
19
|
+
display: ${e=>{let{version:t}=e;return"3.0"===t?"flex":"block"}};
|
|
20
|
+
align-items: center;
|
|
21
|
+
justify-content: center;
|
|
22
|
+
`,s=n.default.div`
|
|
20
23
|
width: 100%;
|
|
21
24
|
justify-content: center;
|
|
22
25
|
cursor: pointer;
|
|
23
26
|
align-items: center;
|
|
24
27
|
justify-content: space-between;
|
|
25
28
|
margin: 4px 0;
|
|
26
|
-
`,
|
|
29
|
+
`,a=n.default.div`
|
|
27
30
|
z-index: 1000;
|
|
28
31
|
position: relative;
|
|
29
32
|
margin: 0px;
|
|
30
33
|
padding: 0px;
|
|
31
34
|
width: 100%;
|
|
32
|
-
`,
|
|
35
|
+
`,p=n.default.div`
|
|
33
36
|
position: relative;
|
|
34
|
-
padding: 1px 4px;
|
|
37
|
+
padding: ${e=>{let{version:t}=e;return"3.0"===t?"0px":"1px 4px"}};
|
|
35
38
|
cursor: pointer;
|
|
36
39
|
width: 100%;
|
|
37
40
|
&:hover > .submenu,
|
|
38
41
|
&:focus-within > .submenu {
|
|
39
42
|
display: block;
|
|
40
43
|
}
|
|
41
|
-
`,
|
|
44
|
+
`,l=n.default.div`
|
|
42
45
|
position: relative;
|
|
43
|
-
padding:
|
|
46
|
+
padding: ${e=>{let{version:t}=e;return"3.0"===t?"8px":"4px 8px"}};
|
|
44
47
|
transition: background-color 0.2s;
|
|
45
48
|
width: 100%;
|
|
46
|
-
border-radius:
|
|
49
|
+
border-radius: ${e=>{let{version:t}=e;return"3.0"===t?0:8}}px;
|
|
47
50
|
justify-content: center;
|
|
48
|
-
background-color: ${e=>{let{isSelected:
|
|
49
|
-
color: ${e=>{let{isSelected:
|
|
51
|
+
background-color: ${e=>{let{isSelected:r,isHovered:n,isSubMenuOpen:i,isDisabled:o,version:d}=e;return o?t.COLORS.surface.standard:r||i?"3.0"===d?t.COLORS.background.brandLight:t.COLORS.background.positive.light:n?t.COLORS.surface.hovered:t.COLORS.surface.standard}};
|
|
52
|
+
color: ${e=>{let{isSelected:r,isSubMenuOpen:n,version:i}=e;return r||n?"3.0"===i?t.COLORS.text.primary:t.COLORS.content.positive:t.COLORS.content.primary}};
|
|
50
53
|
display: flex;
|
|
51
54
|
align-items: center;
|
|
52
55
|
justify-content: space-between;
|
|
53
56
|
|
|
54
57
|
&:hover {
|
|
55
|
-
background-color: ${e=>{let{isSelected:
|
|
58
|
+
background-color: ${e=>{let{isSelected:r,isDisabled:n,version:i}=e;return n?t.COLORS.surface.standard:r?"3.0"===i?t.COLORS.background.brandLight:t.COLORS.background.positive.light:t.COLORS.surface.hovered}};
|
|
56
59
|
}
|
|
57
|
-
`,
|
|
60
|
+
`,u=n.default.div`
|
|
58
61
|
display: flex;
|
|
59
62
|
align-items: center;
|
|
60
63
|
gap: 8px;
|
|
61
|
-
`,x=
|
|
64
|
+
`,x=n.default.div`
|
|
62
65
|
z-index: 1001;
|
|
63
66
|
position: fixed;
|
|
64
67
|
border-left: 4px solid transparent;
|
|
65
|
-
`,c=
|
|
68
|
+
`,c=n.default.div`
|
|
66
69
|
margin: 4px;
|
|
67
70
|
background-color: ${t.COLORS.surface.standard};
|
|
68
71
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
69
72
|
border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
|
|
70
|
-
padding-top:
|
|
73
|
+
padding-top: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
|
|
71
74
|
max-height: 480px;
|
|
72
|
-
padding-bottom:
|
|
75
|
+
padding-bottom: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
|
|
73
76
|
overflow-y: scroll;
|
|
74
77
|
|
|
75
78
|
&::-webkit-scrollbar {
|
|
76
79
|
display: none;
|
|
77
80
|
}
|
|
78
|
-
`,f=
|
|
81
|
+
`,f=n.default.div`
|
|
79
82
|
width: 16px;
|
|
80
83
|
height: 16px;
|
|
81
84
|
display: flex;
|
|
82
85
|
align-items: center;
|
|
83
86
|
justify-content: center;
|
|
84
87
|
margin-right: 4px;
|
|
85
|
-
`,
|
|
88
|
+
`,v=n.default.div`
|
|
86
89
|
width: 16px;
|
|
87
90
|
height: 16px;
|
|
88
91
|
display: flex;
|
|
89
92
|
align-items: center;
|
|
90
93
|
justify-content: center;
|
|
91
94
|
margin-left: 4px;
|
|
92
|
-
`,
|
|
95
|
+
`,g=n.default.div`
|
|
93
96
|
width: ${e=>e.width};
|
|
94
|
-
`,
|
|
97
|
+
`,b=n.default(x)`
|
|
95
98
|
width: ${e=>e.width};
|
|
96
99
|
top: ${e=>e.top}px;
|
|
97
100
|
left: ${e=>e.left}px;
|
|
98
|
-
`;exports.ContentContainer=
|
|
101
|
+
`;exports.ContentContainer=u,exports.DropdownContainer=i,exports.GroupedMenuListContainer=s,exports.LeadingIconContainer=f,exports.MenuItemContainer=l,exports.MenuItemWrapper=p,exports.NoResultsContainer=d,exports.OptionsContainer=o,exports.StyledMenuList=a,exports.StyledSubMenuWrapper=b,exports.SubMenuContainer=g,exports.SubMenuListContainer=c,exports.SubMenuWrapper=x,exports.TrailingIconContainer=v;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../assets/icons/whatsNew.svg.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../assets/icons/whatsNew.svg.js"),n=require("../../constants/Theme.js"),s=require("../icon-button/IconButton.js"),i=require("../tooltips/Tooltip.js"),o=require("./WhatsNew.styles.js");exports.WhatsNewButton=r=>{let{onClick:a,newContentCount:c=0,isOpen:d=!1,isLoading:l=!1,tooltip:u="What's new",testId:h="whats-new-button",iconWidth:j=32,iconHeight:p=32,customIcon:x}=r;return l?t.jsxs("div",Object.assign({style:{margin:"0px 8px"}},{children:[t.jsx("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),t.jsx("style",{children:"\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t"})]})):t.jsxs(o.WhatsNewIconContainer,Object.assign({count:c},{children:[t.jsx(i.Tooltip,Object.assign({body:u,placement:"bottom"},{children:t.jsx(s.IconButton,{Icon:null!=x?x:e.default,width:j,height:p,isSelected:d,iconColor:d?n.COLORS.content.brand:n.COLORS.content.primary,onClick:a,"data-testid":h})})),c>0&&t.jsx("div",Object.assign({className:"notification--count"},{children:t.jsx("div",Object.assign({className:"count--text"},{children:c}))}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight2.svg.js";import o,{useRef as r}from"react";import{COLORS as l}from"../../constants/Theme.js";import{BodyCaption as s,BodyTiny as c}from"../TypographyStyle.js";import{MenuItemWrapper as d,MenuItemContainer as a,ContentContainer as p,LeadingIconContainer as u,TrailingIconContainer as h,SubMenuContainer as m,StyledSubMenuWrapper as v,SubMenuListContainer as g}from"./MultiLevelDropdown.styled.js";const b=b=>{let{width:f,onDropdownItemClick:y,option:j,parents:x,allowParentSelection:w,maxLevels:O,currentLevel:M,renderNestedMenu:S,version:C}=b;var I,T,L,k,D,E,N;const[P,R]=o.useState(!1),[B,H]=o.useState(!1),[W,q]=o.useState({top:0,left:0}),z=r({top:0,left:0}),A=!!j.children&&j.children.length>0,F=A&&(void 0===O||M<O);return e(d,Object.assign({onMouseEnter:e=>{F&&(R(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();q({top:t.top,left:t.right}),z.current={top:t.top,left:t.right}})(e))},onMouseLeave:()=>{R(!1)},onClick:e=>{e.stopPropagation(),(()=>{var e;!y||null!==(e=j.disabled)&&void 0!==e&&e||A&&!w||y(j,x)})()},id:"menuItemWrapper",style:{cursor:null!==(I=j.disabled)&&void 0!==I&&I?"not-allowed":"pointer",backgroundColor:null!==(T=j.disabled)&&void 0!==T&&T?l.surface.standard:"transparent"}},{children:[j.customComponent?j.customComponent:e(a,Object.assign({isSelected:j.selected,isSubMenuOpen:P,isHovered:B,isDisabled:null!==(L=j.disabled)&&void 0!==L&&L,version:C},{children:[e(p,{children:[j.leadingIcon&&t(u,{children:j.leadingIcon}),e("div",{children:[t(s,Object.assign({style:{color:null!==(k=j.disabled)&&void 0!==k&&k?l.content.inactive:j.selected||B?"3.0"===C?l.text.primary:l.content.positive:l.content.primary}},{children:j.label})),j.subText&&t(c,Object.assign({style:{color:null!==(D=j.disabled)&&void 0!==D&&D?l.content.inactive:j.selected||B?"3.0"===C?l.text.primary:l.content.positive:l.content.secondary,marginTop:"2px"}},{children:j.subText}))]})]}),A?t(h,{children:t(i,{width:16,height:16,color:!F||null!==(E=j.disabled)&&void 0!==E&&E?l.content.inactive:j.selected||B?"3.0"===C?l.text.primary:l.content.positive:l.content.primary})}):j.trailingIcon?t(h,{children:j.trailingIcon}):t(n,{})]})),!(null!==(N=j.disabled)&&void 0!==N&&N)&&j.children&&j.children.length>0&&F&&P&&t(m,Object.assign({width:f,className:"submenu",onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1)},{children:t(v,Object.assign({width:f,top:W.top,left:W.left},{children:t(g,Object.assign({version:C},{children:S(j.children,[...x,j],M+1)}))}))}))]}))};export{b as MenuItem};
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight2.svg.js";import o,{useRef as r}from"react";import{COLORS as l}from"../../constants/Theme.js";import{BodyCaption as s,BodyTiny as c}from"../TypographyStyle.js";import{MenuItemWrapper as d,MenuItemContainer as a,ContentContainer as p,LeadingIconContainer as u,TrailingIconContainer as h,SubMenuContainer as m,StyledSubMenuWrapper as v,SubMenuListContainer as g}from"./MultiLevelDropdown.styled.js";const b=b=>{let{width:f,onDropdownItemClick:y,option:j,parents:x,allowParentSelection:w,maxLevels:O,currentLevel:M,renderNestedMenu:S,version:C}=b;var I,T,L,k,D,E,N;const[P,R]=o.useState(!1),[B,H]=o.useState(!1),[W,q]=o.useState({top:0,left:0}),z=r({top:0,left:0}),A=!!j.children&&j.children.length>0,F=A&&(void 0===O||M<O);return e(d,Object.assign({version:C,onMouseEnter:e=>{F&&(R(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();q({top:t.top,left:t.right}),z.current={top:t.top,left:t.right}})(e))},onMouseLeave:()=>{R(!1)},onClick:e=>{e.stopPropagation(),(()=>{var e;!y||null!==(e=j.disabled)&&void 0!==e&&e||A&&!w||y(j,x)})()},id:"menuItemWrapper",style:{cursor:null!==(I=j.disabled)&&void 0!==I&&I?"not-allowed":"pointer",backgroundColor:null!==(T=j.disabled)&&void 0!==T&&T?l.surface.standard:"transparent"}},{children:[j.customComponent?j.customComponent:e(a,Object.assign({isSelected:j.selected,isSubMenuOpen:P,isHovered:B,isDisabled:null!==(L=j.disabled)&&void 0!==L&&L,version:C},{children:[e(p,{children:[j.leadingIcon&&t(u,{children:j.leadingIcon}),e("div",{children:[t(s,Object.assign({style:{color:null!==(k=j.disabled)&&void 0!==k&&k?l.content.inactive:j.selected||B?"3.0"===C?l.text.primary:l.content.positive:l.content.primary}},{children:j.label})),j.subText&&t(c,Object.assign({style:{color:null!==(D=j.disabled)&&void 0!==D&&D?l.content.inactive:j.selected||B?"3.0"===C?l.text.primary:l.content.positive:l.content.secondary,marginTop:"2px"}},{children:j.subText}))]})]}),A?t(h,{children:t(i,{width:16,height:16,color:!F||null!==(E=j.disabled)&&void 0!==E&&E?l.content.inactive:j.selected||B?"3.0"===C?l.text.primary:l.content.positive:l.content.primary})}):j.trailingIcon?t(h,{children:j.trailingIcon}):t(n,{})]})),!(null!==(N=j.disabled)&&void 0!==N&&N)&&j.children&&j.children.length>0&&F&&P&&t(m,Object.assign({width:f,className:"submenu",onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1)},{children:t(v,Object.assign({width:f,top:W.top,left:W.left},{children:t(g,Object.assign({version:C},{children:S(j.children,[...x,j],M+1)}))}))}))]}))};export{b as MenuItem};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as n}from"react/jsx-runtime";import t,{useState as o,useEffect as r}from"react";import{ZeroState as s}from"../zeroState/ZeroState.js";import{COLORS as i}from"../../constants/Theme.js";import{SearchBox as l}from"../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";import{Floater as c}from"../floater/floater.js";import{MenuList as a}from"./MenuList.js";import{DropdownContainer as d,OptionsContainer as p,NoResultsContainer as u}from"./MultiLevelDropdown.styled.js";const h=h=>{let{options:f,width:m,isSearchable:w,onDropdownItemClick:b,refElement:g,topOffset:j,leftOffset:O,isDropdownOpen:
|
|
1
|
+
import{jsx as e,jsxs as n}from"react/jsx-runtime";import t,{useState as o,useEffect as r}from"react";import{ZeroState as s}from"../zeroState/ZeroState.js";import{COLORS as i}from"../../constants/Theme.js";import{SearchBox as l}from"../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";import{Floater as c}from"../floater/floater.js";import{MenuList as a}from"./MenuList.js";import{DropdownContainer as d,OptionsContainer as p,NoResultsContainer as u}from"./MultiLevelDropdown.styled.js";const h=h=>{let{options:f,width:m,isSearchable:w,onDropdownItemClick:b,refElement:g,topOffset:j,leftOffset:O,isDropdownOpen:x,onDropdownOutsideClick:v,allowParentSelection:L,maxLevels:y,hideGroupLabel:S,version:C="1.0"}=h;const D=t.useRef(null),[k,E]=o(f),z=e=>{const n=Array.isArray(f)?[...f]:[],t=[];for(;n.length>0;){const o=n.shift();o&&o.label.toLowerCase().includes(e.toLowerCase())&&t.push(o),o&&"children"in o&&o.children?n.push(...o.children):o&&"options"in o&&o.options&&n.push(...o.options)}const o=e=>e.map((e=>{if(t.includes(e))return e;if("children"in e&&e.children){const n=o(e.children);if(n.length>0)return Object.assign(Object.assign({},e),{children:n})}if("options"in e&&e.options){const n=o(e.options);if(n.length>0)return Object.assign(Object.assign({},e),{options:n})}return null})).filter((e=>null!==e));E(o(f))},I=e=>{D.current&&!D.current.contains(e.target)?v&&v(!0):v&&v(!1)};return r((()=>{x&&z("")}),[x]),r((()=>(document.addEventListener("mousedown",I),()=>{document.removeEventListener("mousedown",I)})),[]),r((()=>{E(f)}),[f]),e(c,Object.assign({refElement:g,topOffset:j,leftOffset:O},{children:x&&e("div",Object.assign({ref:D,style:{backgroundColor:i.surface.standard,zIndex:99999,borderRadius:"3.0"===C?"4px":"8px",whiteSpace:"normal"}},{children:n(d,Object.assign({width:m,version:C},{children:[w&&e("div",Object.assign({style:{padding:"3.0"===C?"0px":"4px",width:null!=m?m:"200px"}},{children:e(l,{onSearch:z,version:"3.0"===C?"3.0":"2.0"})})),e(p,Object.assign({width:m,version:C},{children:(null!=k?k:[]).length>0&&e(a,{width:null!=m?m:"200px",onDropdownItemClick:b,options:k,parents:[],allowParentSelection:L,maxLevels:y,hideGroupLabel:S,currentLevel:1,version:C})})),0===(null!=k?k:[]).length&&e(u,Object.assign({style:{width:null!=m?m:"200px"},version:C},{children:"3.0"===C?e("span",Object.assign({style:{fontSize:"12px",color:i.content.placeholder,lineHeight:"16px"}},{children:"No results found!"})):e(s,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})}))]}))}))}))};export{h as MultiLevelDropdown};
|
|
@@ -4,13 +4,17 @@ export declare const DropdownContainer: import("styled-components").StyledCompon
|
|
|
4
4
|
}, never>;
|
|
5
5
|
export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, {
|
|
6
6
|
width?: string | undefined;
|
|
7
|
+
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
7
8
|
}, never>;
|
|
8
9
|
export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {
|
|
9
10
|
width?: string | undefined;
|
|
11
|
+
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
10
12
|
}, never>;
|
|
11
13
|
export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
14
|
export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
13
|
-
export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
15
|
+
export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
16
|
+
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
17
|
+
}, never>;
|
|
14
18
|
export interface MenuItemContainerProps {
|
|
15
19
|
isSelected?: boolean;
|
|
16
20
|
isHovered?: boolean;
|
|
@@ -1,21 +1,24 @@
|
|
|
1
|
-
import e from"styled-components";import{COLORS as
|
|
1
|
+
import e from"styled-components";import{COLORS as t}from"../../constants/Theme.js";const i=e.div`
|
|
2
2
|
position: relative;
|
|
3
|
-
border-radius: ${e=>{let{version:
|
|
3
|
+
border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
|
|
4
4
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
5
|
-
padding-bottom:
|
|
5
|
+
padding-bottom: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
|
|
6
6
|
`,r=e.div`
|
|
7
|
-
width: ${e=>{let{width:
|
|
7
|
+
width: ${e=>{let{width:t}=e;return t||"200px"}};
|
|
8
8
|
max-width: 300px;
|
|
9
9
|
max-height: 280px;
|
|
10
10
|
overflow-y: scroll;
|
|
11
|
-
padding: 4px 0 0;
|
|
11
|
+
padding: ${e=>{let{version:t}=e;return"3.0"===t?"0":"4px 0 0"}};
|
|
12
12
|
&::-webkit-scrollbar {
|
|
13
13
|
width: 0px;
|
|
14
14
|
}
|
|
15
15
|
`,n=e.div`
|
|
16
|
-
margin-top:
|
|
17
|
-
height:
|
|
18
|
-
width: ${e=>{let{width:
|
|
16
|
+
margin-top: ${e=>{let{version:t}=e;return"3.0"===t?0:64}}px;
|
|
17
|
+
height: ${e=>{let{version:t}=e;return"3.0"===t?236:200}}px;
|
|
18
|
+
width: ${e=>{let{width:t}=e;return t||"200px"}};
|
|
19
|
+
display: ${e=>{let{version:t}=e;return"3.0"===t?"flex":"block"}};
|
|
20
|
+
align-items: center;
|
|
21
|
+
justify-content: center;
|
|
19
22
|
`,o=e.div`
|
|
20
23
|
width: 100%;
|
|
21
24
|
justify-content: center;
|
|
@@ -29,47 +32,47 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
29
32
|
margin: 0px;
|
|
30
33
|
padding: 0px;
|
|
31
34
|
width: 100%;
|
|
32
|
-
`,
|
|
35
|
+
`,s=e.div`
|
|
33
36
|
position: relative;
|
|
34
|
-
padding: 1px 4px;
|
|
37
|
+
padding: ${e=>{let{version:t}=e;return"3.0"===t?"0px":"1px 4px"}};
|
|
35
38
|
cursor: pointer;
|
|
36
39
|
width: 100%;
|
|
37
40
|
&:hover > .submenu,
|
|
38
41
|
&:focus-within > .submenu {
|
|
39
42
|
display: block;
|
|
40
43
|
}
|
|
41
|
-
`,
|
|
44
|
+
`,p=e.div`
|
|
42
45
|
position: relative;
|
|
43
|
-
padding:
|
|
46
|
+
padding: ${e=>{let{version:t}=e;return"3.0"===t?"8px":"4px 8px"}};
|
|
44
47
|
transition: background-color 0.2s;
|
|
45
48
|
width: 100%;
|
|
46
|
-
border-radius:
|
|
49
|
+
border-radius: ${e=>{let{version:t}=e;return"3.0"===t?0:8}}px;
|
|
47
50
|
justify-content: center;
|
|
48
|
-
background-color: ${e=>{let{isSelected:
|
|
49
|
-
color: ${e=>{let{isSelected:
|
|
51
|
+
background-color: ${e=>{let{isSelected:i,isHovered:r,isSubMenuOpen:n,isDisabled:o,version:d}=e;return o?t.surface.standard:i||n?"3.0"===d?t.background.brandLight:t.background.positive.light:r?t.surface.hovered:t.surface.standard}};
|
|
52
|
+
color: ${e=>{let{isSelected:i,isSubMenuOpen:r,version:n}=e;return i||r?"3.0"===n?t.text.primary:t.content.positive:t.content.primary}};
|
|
50
53
|
display: flex;
|
|
51
54
|
align-items: center;
|
|
52
55
|
justify-content: space-between;
|
|
53
56
|
|
|
54
57
|
&:hover {
|
|
55
|
-
background-color: ${e=>{let{isSelected:
|
|
58
|
+
background-color: ${e=>{let{isSelected:i,isDisabled:r,version:n}=e;return r?t.surface.standard:i?"3.0"===n?t.background.brandLight:t.background.positive.light:t.surface.hovered}};
|
|
56
59
|
}
|
|
57
60
|
`,a=e.div`
|
|
58
61
|
display: flex;
|
|
59
62
|
align-items: center;
|
|
60
63
|
gap: 8px;
|
|
61
|
-
`,
|
|
64
|
+
`,l=e.div`
|
|
62
65
|
z-index: 1001;
|
|
63
66
|
position: fixed;
|
|
64
67
|
border-left: 4px solid transparent;
|
|
65
|
-
`,
|
|
68
|
+
`,x=e.div`
|
|
66
69
|
margin: 4px;
|
|
67
|
-
background-color: ${
|
|
70
|
+
background-color: ${t.surface.standard};
|
|
68
71
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
69
|
-
border-radius: ${e=>{let{version:
|
|
70
|
-
padding-top:
|
|
72
|
+
border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
|
|
73
|
+
padding-top: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
|
|
71
74
|
max-height: 480px;
|
|
72
|
-
padding-bottom:
|
|
75
|
+
padding-bottom: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
|
|
73
76
|
overflow-y: scroll;
|
|
74
77
|
|
|
75
78
|
&::-webkit-scrollbar {
|
|
@@ -89,10 +92,10 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
89
92
|
align-items: center;
|
|
90
93
|
justify-content: center;
|
|
91
94
|
margin-left: 4px;
|
|
92
|
-
`,
|
|
95
|
+
`,v=e.div`
|
|
93
96
|
width: ${e=>e.width};
|
|
94
|
-
`,
|
|
97
|
+
`,g=e(l)`
|
|
95
98
|
width: ${e=>e.width};
|
|
96
99
|
top: ${e=>e.top}px;
|
|
97
100
|
left: ${e=>e.left}px;
|
|
98
|
-
`;export{a as ContentContainer,
|
|
101
|
+
`;export{a as ContentContainer,i as DropdownContainer,o as GroupedMenuListContainer,c as LeadingIconContainer,p as MenuItemContainer,s as MenuItemWrapper,n as NoResultsContainer,r as OptionsContainer,d as StyledMenuList,g as StyledSubMenuWrapper,v as SubMenuContainer,x as SubMenuListContainer,l as SubMenuWrapper,u as TrailingIconContainer};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as n}from"react/jsx-runtime";import
|
|
1
|
+
import{jsxs as t,jsx as n}from"react/jsx-runtime";import o from"../../assets/icons/whatsNew.svg.js";import{COLORS as i}from"../../constants/Theme.js";import{IconButton as e}from"../icon-button/IconButton.js";import{Tooltip as s}from"../tooltips/Tooltip.js";import{WhatsNewIconContainer as r}from"./WhatsNew.styles.js";const c=c=>{let{onClick:a,newContentCount:d=0,isOpen:l=!1,isLoading:m=!1,tooltip:p="What's new",testId:h="whats-new-button",iconWidth:f=32,iconHeight:b=32,customIcon:g}=c;return m?t("div",Object.assign({style:{margin:"0px 8px"}},{children:[n("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),n("style",{children:"\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t"})]})):t(r,Object.assign({count:d},{children:[n(s,Object.assign({body:p,placement:"bottom"},{children:n(e,{Icon:null!=g?g:o,width:f,height:b,isSelected:l,iconColor:l?i.content.brand:i.content.primary,onClick:a,"data-testid":h})})),d>0&&n("div",Object.assign({className:"notification--count"},{children:n("div",Object.assign({className:"count--text"},{children:d}))}))]}))};export{c as WhatsNewButton};
|