@bikdotai/bik-component-library 0.0.876-beta.0 → 0.0.876-beta.2
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/README.md +1 -0
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js +24 -22
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js +27 -25
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
- [Sanitization](docs/sanitization.md) — the HTML/CSS sanitisation layer and what it strips
|
|
10
10
|
- [Editor](docs/editor/01-overview.md) — the rich-text editor: props, ref API, toolbar, email mode, customisation
|
|
11
11
|
- [FunnelChart & ComparisonBarChart](docs/charts/funnel-and-comparison-charts.md) — the analytics charts behind the Helpdesk AI Impact tab: branching funnel geometry, the shared chart card/palette/format helpers, and the zero states
|
|
12
|
+
- [Nested dropdown](docs/nested-dropdown.md) — `childrenLayout="nested"`: children rendered inline with a tri-state parent, collapsible groups, and how the selection payload is shaped
|
|
12
13
|
- [Channel Playground](src/components/channel-playground/README.md) — driving the AI on email / WhatsApp / Instagram: the transport seam, the channel skins, and the stream frame protocol
|
|
13
14
|
- [Frontend Testing Guide](docs/testing/writing-tests.md) — test authoring, linting, mandate exceptions, required status checks
|
|
14
15
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("styled-components"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("styled-components"),e=require("../../constants/Theme.js"),s=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},n=s(p),u=n.default.div`
|
|
2
2
|
position: relative;
|
|
3
3
|
border-radius: ${({version:t})=>t==="3.0"?4:8}px;
|
|
4
4
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
5
5
|
padding-bottom: ${({version:t})=>t==="3.0"?0:4}px;
|
|
6
|
-
`,l=
|
|
6
|
+
`,l=n.default.div`
|
|
7
7
|
width: ${({width:t})=>t||"200px"};
|
|
8
8
|
max-width: 300px;
|
|
9
9
|
max-height: 280px;
|
|
@@ -12,30 +12,32 @@
|
|
|
12
12
|
&::-webkit-scrollbar {
|
|
13
13
|
width: 0px;
|
|
14
14
|
}
|
|
15
|
-
`,c=
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
`,c=n.default.div`
|
|
16
|
+
padding: 8px;
|
|
17
|
+
background-color: ${e.COLORS.surface.standard};
|
|
18
|
+
border-top: 1px solid ${e.COLORS.stroke.primary};
|
|
19
|
+
box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.12);
|
|
20
|
+
`,x=n.default.div`
|
|
19
21
|
margin-top: ${({version:t})=>t==="3.0"?0:64}px;
|
|
20
22
|
height: ${({version:t})=>t==="3.0"?236:200}px;
|
|
21
23
|
width: ${({width:t})=>t||"200px"};
|
|
22
24
|
display: ${({version:t})=>t==="3.0"?"flex":"block"};
|
|
23
25
|
align-items: center;
|
|
24
26
|
justify-content: center;
|
|
25
|
-
`,
|
|
27
|
+
`,g=n.default.div`
|
|
26
28
|
width: 100%;
|
|
27
29
|
justify-content: center;
|
|
28
30
|
cursor: pointer;
|
|
29
31
|
align-items: center;
|
|
30
32
|
justify-content: space-between;
|
|
31
33
|
margin: ${({version:t})=>t==="3.0"?"0":"4px 0"};
|
|
32
|
-
`,
|
|
34
|
+
`,f=n.default.div`
|
|
33
35
|
z-index: 1000;
|
|
34
36
|
position: relative;
|
|
35
37
|
margin: 0px;
|
|
36
38
|
padding: 0px;
|
|
37
39
|
width: 100%;
|
|
38
|
-
`,b=
|
|
40
|
+
`,b=n.default.div`
|
|
39
41
|
position: relative;
|
|
40
42
|
padding: ${({version:t})=>t==="3.0"?"0px":"1px 4px"};
|
|
41
43
|
cursor: pointer;
|
|
@@ -44,33 +46,33 @@
|
|
|
44
46
|
&:focus-within > .submenu {
|
|
45
47
|
display: block;
|
|
46
48
|
}
|
|
47
|
-
`,C=
|
|
49
|
+
`,C=n.default.div`
|
|
48
50
|
position: relative;
|
|
49
51
|
padding: ${({version:t})=>t==="3.0"?"8px":"4px 8px"};
|
|
50
52
|
transition: background-color 0.2s;
|
|
51
53
|
width: 100%;
|
|
52
54
|
border-radius: ${({version:t})=>t==="3.0"?0:8}px;
|
|
53
55
|
justify-content: center;
|
|
54
|
-
background-color: ${({isSelected:t,isHovered:i,isSubMenuOpen:o,isDisabled:a,version:d})=>a?
|
|
55
|
-
color: ${({isSelected:t,isSubMenuOpen:i,version:o})=>t||i?o==="3.0"?
|
|
56
|
+
background-color: ${({isSelected:t,isHovered:i,isSubMenuOpen:o,isDisabled:a,version:d})=>a?e.COLORS.surface.standard:t||o?d==="3.0"?e.COLORS.background.brandLight:e.COLORS.background.positive.light:i?e.COLORS.surface.hovered:e.COLORS.surface.standard};
|
|
57
|
+
color: ${({isSelected:t,isSubMenuOpen:i,version:o})=>t||i?o==="3.0"?e.COLORS.text.primary:e.COLORS.content.positive:e.COLORS.content.primary};
|
|
56
58
|
display: flex;
|
|
57
59
|
align-items: center;
|
|
58
60
|
justify-content: space-between;
|
|
59
61
|
|
|
60
62
|
&:hover {
|
|
61
|
-
background-color: ${({isSelected:t,isDisabled:i,version:o})=>i?
|
|
63
|
+
background-color: ${({isSelected:t,isDisabled:i,version:o})=>i?e.COLORS.surface.standard:t?o==="3.0"?e.COLORS.background.brandLight:e.COLORS.background.positive.light:e.COLORS.surface.hovered};
|
|
62
64
|
}
|
|
63
|
-
`,h=
|
|
65
|
+
`,h=n.default.div`
|
|
64
66
|
display: flex;
|
|
65
67
|
align-items: center;
|
|
66
68
|
gap: 8px;
|
|
67
|
-
`,r=
|
|
69
|
+
`,r=n.default.div`
|
|
68
70
|
z-index: 1001;
|
|
69
71
|
position: fixed;
|
|
70
72
|
border-left: 4px solid transparent;
|
|
71
|
-
`,O=
|
|
73
|
+
`,O=n.default.div`
|
|
72
74
|
margin: 4px;
|
|
73
|
-
background-color: ${
|
|
75
|
+
background-color: ${e.COLORS.surface.standard};
|
|
74
76
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
75
77
|
border-radius: ${({version:t})=>t==="3.0"?4:8}px;
|
|
76
78
|
padding-top: ${({version:t})=>t==="3.0"?0:4}px;
|
|
@@ -81,25 +83,25 @@
|
|
|
81
83
|
&::-webkit-scrollbar {
|
|
82
84
|
display: none;
|
|
83
85
|
}
|
|
84
|
-
`,m=
|
|
86
|
+
`,m=n.default.div`
|
|
85
87
|
width: 16px;
|
|
86
88
|
height: 16px;
|
|
87
89
|
display: flex;
|
|
88
90
|
align-items: center;
|
|
89
91
|
justify-content: center;
|
|
90
92
|
margin-right: 4px;
|
|
91
|
-
`,
|
|
93
|
+
`,S=n.default.div`
|
|
92
94
|
width: 16px;
|
|
93
95
|
height: 16px;
|
|
94
96
|
display: flex;
|
|
95
97
|
align-items: center;
|
|
96
98
|
justify-content: center;
|
|
97
99
|
margin-left: 4px;
|
|
98
|
-
`,
|
|
100
|
+
`,v=n.default.div`
|
|
99
101
|
width: ${t=>t.width};
|
|
100
|
-
`,
|
|
102
|
+
`,y=n.default(r)`
|
|
101
103
|
width: ${t=>t.width};
|
|
102
104
|
top: ${t=>t.top}px;
|
|
103
105
|
left: ${t=>t.left}px;
|
|
104
|
-
`;exports.ContentContainer=h;exports.DropdownContainer=u;exports.FooterContainer=c;exports.GroupedMenuListContainer=
|
|
106
|
+
`;exports.ContentContainer=h;exports.DropdownContainer=u;exports.FooterContainer=c;exports.GroupedMenuListContainer=g;exports.LeadingIconContainer=m;exports.MenuItemContainer=C;exports.MenuItemWrapper=b;exports.NoResultsContainer=x;exports.OptionsContainer=l;exports.StyledMenuList=f;exports.StyledSubMenuWrapper=y;exports.SubMenuContainer=v;exports.SubMenuListContainer=O;exports.SubMenuWrapper=r;exports.TrailingIconContainer=S;
|
|
105
107
|
//# sourceMappingURL=MultiLevelDropdown.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiLevelDropdown.styled.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tposition: relative;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n`;\n\nexport const OptionsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tmax-width: 300px;\n\tmax-height: 280px;\n\toverflow-y: scroll;\n\tpadding: ${({ version }) => (version === '3.0' ? '0' : '4px 0 0')};\n\t&::-webkit-scrollbar {\n\t\twidth: 0px;\n\t}\n`;\n\n// Sits outside OptionsContainer so it stays put while the options scroll\nexport const FooterContainer = styled.div`\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\
|
|
1
|
+
{"version":3,"file":"MultiLevelDropdown.styled.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tposition: relative;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n`;\n\nexport const OptionsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tmax-width: 300px;\n\tmax-height: 280px;\n\toverflow-y: scroll;\n\tpadding: ${({ version }) => (version === '3.0' ? '0' : '4px 0 0')};\n\t&::-webkit-scrollbar {\n\t\twidth: 0px;\n\t}\n`;\n\n// Sits outside OptionsContainer so it stays put while the options scroll. The\n// upward shadow lifts it off the list the way the design's z1 elevation does.\nexport const FooterContainer = styled.div`\n\tpadding: 8px;\n\tbackground-color: ${COLORS.surface.standard};\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tbox-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.12);\n`;\n\nexport const NoResultsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin-top: ${({ version }) => (version === '3.0' ? 0 : 64)}px;\n\theight: ${({ version }) => (version === '3.0' ? 236 : 200)}px;\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tdisplay: ${({ version }) => (version === '3.0' ? 'flex' : 'block')};\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const GroupedMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: 100%;\n\tjustify-content: center;\n\tcursor: pointer;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin: ${({ version }) => (version === '3.0' ? '0' : '4px 0')};\n`;\n\nexport const StyledMenuList = styled.div`\n\tz-index: 1000;\n\tposition: relative;\n\tmargin: 0px;\n\tpadding: 0px;\n\twidth: 100%;\n`;\n\nexport const MenuItemWrapper = styled.div<{ version?: '1.0' | '2.0' | '3.0' }>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '0px' : '1px 4px')};\n\tcursor: pointer;\n\twidth: 100%;\n\t&:hover > .submenu,\n\t&:focus-within > .submenu {\n\t\tdisplay: block;\n\t}\n`;\n\nexport interface MenuItemContainerProps {\n\tisSelected?: boolean;\n\tisHovered?: boolean;\n\tisSubMenuOpen?: boolean;\n\tisDisabled?: boolean;\n\tversion?: '1.0' | '2.0' | '3.0';\n}\n\nexport const MenuItemContainer = styled.div<MenuItemContainerProps>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '8px' : '4px 8px')};\n\ttransition: background-color 0.2s;\n\twidth: 100%;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 0 : 8)}px;\n\tjustify-content: center;\n\tbackground-color: ${({\n\t\tisSelected,\n\t\tisHovered,\n\t\tisSubMenuOpen,\n\t\tisDisabled,\n\t\tversion,\n\t}) =>\n\t\tisDisabled\n\t\t\t? COLORS.surface.standard\n\t\t\t: isSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t: COLORS.background.positive.light\n\t\t\t: isHovered\n\t\t\t? COLORS.surface.hovered\n\t\t\t: COLORS.surface.standard};\n\tcolor: ${({ isSelected, isSubMenuOpen, version }) =>\n\t\tisSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.text.primary\n\t\t\t\t: COLORS.content.positive\n\t\t\t: COLORS.content.primary};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t&:hover {\n\t\tbackground-color: ${({ isSelected, isDisabled, version }) =>\n\t\t\tisDisabled\n\t\t\t\t? COLORS.surface.standard\n\t\t\t\t: isSelected\n\t\t\t\t? version === '3.0'\n\t\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t\t: COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const ContentContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const SubMenuWrapper = styled.div`\n\tz-index: 1001;\n\tposition: fixed;\n\tborder-left: 4px solid transparent;\n`;\n\nexport const SubMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin: 4px;\n\tbackground-color: ${COLORS.surface.standard};\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tpadding-top: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\tmax-height: 480px;\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\toverflow-y: scroll;\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const LeadingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-right: 4px;\n`;\n\nexport const TrailingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-left: 4px;\n`;\n\nexport const SubMenuContainer = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n`;\n\nexport const StyledSubMenuWrapper = styled(SubMenuWrapper)<{\n\twidth: string;\n\ttop: number;\n\tleft: number;\n}>`\n\twidth: ${(props) => props.width};\n\ttop: ${(props) => props.top}px;\n\tleft: ${(props) => props.left}px;\n`;\n"],"names":["DropdownContainer","styled","version","OptionsContainer","width","FooterContainer","COLORS","NoResultsContainer","GroupedMenuListContainer","StyledMenuList","MenuItemWrapper","MenuItemContainer","isSelected","isHovered","isSubMenuOpen","isDisabled","ContentContainer","SubMenuWrapper","SubMenuListContainer","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper"],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { COLORS as
|
|
3
|
-
const c =
|
|
1
|
+
import e from "styled-components";
|
|
2
|
+
import { COLORS as n } from "../../constants/Theme.js";
|
|
3
|
+
const c = e.div`
|
|
4
4
|
position: relative;
|
|
5
5
|
border-radius: ${({ version: t }) => t === "3.0" ? 4 : 8}px;
|
|
6
6
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
7
7
|
padding-bottom: ${({ version: t }) => t === "3.0" ? 0 : 4}px;
|
|
8
|
-
`, x =
|
|
8
|
+
`, x = e.div`
|
|
9
9
|
width: ${({ width: t }) => t || "200px"};
|
|
10
10
|
max-width: 300px;
|
|
11
11
|
max-height: 280px;
|
|
@@ -14,30 +14,32 @@ const c = n.div`
|
|
|
14
14
|
&::-webkit-scrollbar {
|
|
15
15
|
width: 0px;
|
|
16
16
|
}
|
|
17
|
-
`, l =
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
`, l = e.div`
|
|
18
|
+
padding: 8px;
|
|
19
|
+
background-color: ${n.surface.standard};
|
|
20
|
+
border-top: 1px solid ${n.stroke.primary};
|
|
21
|
+
box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.12);
|
|
22
|
+
`, u = e.div`
|
|
21
23
|
margin-top: ${({ version: t }) => t === "3.0" ? 0 : 64}px;
|
|
22
24
|
height: ${({ version: t }) => t === "3.0" ? 236 : 200}px;
|
|
23
25
|
width: ${({ width: t }) => t || "200px"};
|
|
24
26
|
display: ${({ version: t }) => t === "3.0" ? "flex" : "block"};
|
|
25
27
|
align-items: center;
|
|
26
28
|
justify-content: center;
|
|
27
|
-
`, g =
|
|
29
|
+
`, g = e.div`
|
|
28
30
|
width: 100%;
|
|
29
31
|
justify-content: center;
|
|
30
32
|
cursor: pointer;
|
|
31
33
|
align-items: center;
|
|
32
34
|
justify-content: space-between;
|
|
33
35
|
margin: ${({ version: t }) => t === "3.0" ? "0" : "4px 0"};
|
|
34
|
-
`, b =
|
|
36
|
+
`, b = e.div`
|
|
35
37
|
z-index: 1000;
|
|
36
38
|
position: relative;
|
|
37
39
|
margin: 0px;
|
|
38
40
|
padding: 0px;
|
|
39
41
|
width: 100%;
|
|
40
|
-
`, h =
|
|
42
|
+
`, h = e.div`
|
|
41
43
|
position: relative;
|
|
42
44
|
padding: ${({ version: t }) => t === "3.0" ? "0px" : "1px 4px"};
|
|
43
45
|
cursor: pointer;
|
|
@@ -46,7 +48,7 @@ const c = n.div`
|
|
|
46
48
|
&:focus-within > .submenu {
|
|
47
49
|
display: block;
|
|
48
50
|
}
|
|
49
|
-
`, f =
|
|
51
|
+
`, f = e.div`
|
|
50
52
|
position: relative;
|
|
51
53
|
padding: ${({ version: t }) => t === "3.0" ? "8px" : "4px 8px"};
|
|
52
54
|
transition: background-color 0.2s;
|
|
@@ -58,27 +60,27 @@ const c = n.div`
|
|
|
58
60
|
isHovered: i,
|
|
59
61
|
isSubMenuOpen: o,
|
|
60
62
|
isDisabled: r,
|
|
61
|
-
version:
|
|
62
|
-
}) => r ?
|
|
63
|
-
color: ${({ isSelected: t, isSubMenuOpen: i, version: o }) => t || i ? o === "3.0" ?
|
|
63
|
+
version: a
|
|
64
|
+
}) => r ? n.surface.standard : t || o ? a === "3.0" ? n.background.brandLight : n.background.positive.light : i ? n.surface.hovered : n.surface.standard};
|
|
65
|
+
color: ${({ isSelected: t, isSubMenuOpen: i, version: o }) => t || i ? o === "3.0" ? n.text.primary : n.content.positive : n.content.primary};
|
|
64
66
|
display: flex;
|
|
65
67
|
align-items: center;
|
|
66
68
|
justify-content: space-between;
|
|
67
69
|
|
|
68
70
|
&:hover {
|
|
69
|
-
background-color: ${({ isSelected: t, isDisabled: i, version: o }) => i ?
|
|
71
|
+
background-color: ${({ isSelected: t, isDisabled: i, version: o }) => i ? n.surface.standard : t ? o === "3.0" ? n.background.brandLight : n.background.positive.light : n.surface.hovered};
|
|
70
72
|
}
|
|
71
|
-
`, m =
|
|
73
|
+
`, m = e.div`
|
|
72
74
|
display: flex;
|
|
73
75
|
align-items: center;
|
|
74
76
|
gap: 8px;
|
|
75
|
-
`,
|
|
77
|
+
`, p = e.div`
|
|
76
78
|
z-index: 1001;
|
|
77
79
|
position: fixed;
|
|
78
80
|
border-left: 4px solid transparent;
|
|
79
|
-
`, v =
|
|
81
|
+
`, v = e.div`
|
|
80
82
|
margin: 4px;
|
|
81
|
-
background-color: ${
|
|
83
|
+
background-color: ${n.surface.standard};
|
|
82
84
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
83
85
|
border-radius: ${({ version: t }) => t === "3.0" ? 4 : 8}px;
|
|
84
86
|
padding-top: ${({ version: t }) => t === "3.0" ? 0 : 4}px;
|
|
@@ -89,23 +91,23 @@ const c = n.div`
|
|
|
89
91
|
&::-webkit-scrollbar {
|
|
90
92
|
display: none;
|
|
91
93
|
}
|
|
92
|
-
`, $ =
|
|
94
|
+
`, $ = e.div`
|
|
93
95
|
width: 16px;
|
|
94
96
|
height: 16px;
|
|
95
97
|
display: flex;
|
|
96
98
|
align-items: center;
|
|
97
99
|
justify-content: center;
|
|
98
100
|
margin-right: 4px;
|
|
99
|
-
`, w =
|
|
101
|
+
`, w = e.div`
|
|
100
102
|
width: 16px;
|
|
101
103
|
height: 16px;
|
|
102
104
|
display: flex;
|
|
103
105
|
align-items: center;
|
|
104
106
|
justify-content: center;
|
|
105
107
|
margin-left: 4px;
|
|
106
|
-
`, y =
|
|
108
|
+
`, y = e.div`
|
|
107
109
|
width: ${(t) => t.width};
|
|
108
|
-
`, k =
|
|
110
|
+
`, k = e(p)`
|
|
109
111
|
width: ${(t) => t.width};
|
|
110
112
|
top: ${(t) => t.top}px;
|
|
111
113
|
left: ${(t) => t.left}px;
|
|
@@ -124,7 +126,7 @@ export {
|
|
|
124
126
|
k as StyledSubMenuWrapper,
|
|
125
127
|
y as SubMenuContainer,
|
|
126
128
|
v as SubMenuListContainer,
|
|
127
|
-
|
|
129
|
+
p as SubMenuWrapper,
|
|
128
130
|
w as TrailingIconContainer
|
|
129
131
|
};
|
|
130
132
|
//# sourceMappingURL=MultiLevelDropdown.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiLevelDropdown.styled.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tposition: relative;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n`;\n\nexport const OptionsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tmax-width: 300px;\n\tmax-height: 280px;\n\toverflow-y: scroll;\n\tpadding: ${({ version }) => (version === '3.0' ? '0' : '4px 0 0')};\n\t&::-webkit-scrollbar {\n\t\twidth: 0px;\n\t}\n`;\n\n// Sits outside OptionsContainer so it stays put while the options scroll\nexport const FooterContainer = styled.div`\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\
|
|
1
|
+
{"version":3,"file":"MultiLevelDropdown.styled.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tposition: relative;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n`;\n\nexport const OptionsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tmax-width: 300px;\n\tmax-height: 280px;\n\toverflow-y: scroll;\n\tpadding: ${({ version }) => (version === '3.0' ? '0' : '4px 0 0')};\n\t&::-webkit-scrollbar {\n\t\twidth: 0px;\n\t}\n`;\n\n// Sits outside OptionsContainer so it stays put while the options scroll. The\n// upward shadow lifts it off the list the way the design's z1 elevation does.\nexport const FooterContainer = styled.div`\n\tpadding: 8px;\n\tbackground-color: ${COLORS.surface.standard};\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tbox-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.12);\n`;\n\nexport const NoResultsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin-top: ${({ version }) => (version === '3.0' ? 0 : 64)}px;\n\theight: ${({ version }) => (version === '3.0' ? 236 : 200)}px;\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tdisplay: ${({ version }) => (version === '3.0' ? 'flex' : 'block')};\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const GroupedMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: 100%;\n\tjustify-content: center;\n\tcursor: pointer;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin: ${({ version }) => (version === '3.0' ? '0' : '4px 0')};\n`;\n\nexport const StyledMenuList = styled.div`\n\tz-index: 1000;\n\tposition: relative;\n\tmargin: 0px;\n\tpadding: 0px;\n\twidth: 100%;\n`;\n\nexport const MenuItemWrapper = styled.div<{ version?: '1.0' | '2.0' | '3.0' }>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '0px' : '1px 4px')};\n\tcursor: pointer;\n\twidth: 100%;\n\t&:hover > .submenu,\n\t&:focus-within > .submenu {\n\t\tdisplay: block;\n\t}\n`;\n\nexport interface MenuItemContainerProps {\n\tisSelected?: boolean;\n\tisHovered?: boolean;\n\tisSubMenuOpen?: boolean;\n\tisDisabled?: boolean;\n\tversion?: '1.0' | '2.0' | '3.0';\n}\n\nexport const MenuItemContainer = styled.div<MenuItemContainerProps>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '8px' : '4px 8px')};\n\ttransition: background-color 0.2s;\n\twidth: 100%;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 0 : 8)}px;\n\tjustify-content: center;\n\tbackground-color: ${({\n\t\tisSelected,\n\t\tisHovered,\n\t\tisSubMenuOpen,\n\t\tisDisabled,\n\t\tversion,\n\t}) =>\n\t\tisDisabled\n\t\t\t? COLORS.surface.standard\n\t\t\t: isSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t: COLORS.background.positive.light\n\t\t\t: isHovered\n\t\t\t? COLORS.surface.hovered\n\t\t\t: COLORS.surface.standard};\n\tcolor: ${({ isSelected, isSubMenuOpen, version }) =>\n\t\tisSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.text.primary\n\t\t\t\t: COLORS.content.positive\n\t\t\t: COLORS.content.primary};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t&:hover {\n\t\tbackground-color: ${({ isSelected, isDisabled, version }) =>\n\t\t\tisDisabled\n\t\t\t\t? COLORS.surface.standard\n\t\t\t\t: isSelected\n\t\t\t\t? version === '3.0'\n\t\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t\t: COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const ContentContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const SubMenuWrapper = styled.div`\n\tz-index: 1001;\n\tposition: fixed;\n\tborder-left: 4px solid transparent;\n`;\n\nexport const SubMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin: 4px;\n\tbackground-color: ${COLORS.surface.standard};\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tpadding-top: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\tmax-height: 480px;\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\toverflow-y: scroll;\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const LeadingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-right: 4px;\n`;\n\nexport const TrailingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-left: 4px;\n`;\n\nexport const SubMenuContainer = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n`;\n\nexport const StyledSubMenuWrapper = styled(SubMenuWrapper)<{\n\twidth: string;\n\ttop: number;\n\tleft: number;\n}>`\n\twidth: ${(props) => props.width};\n\ttop: ${(props) => props.top}px;\n\tleft: ${(props) => props.left}px;\n`;\n"],"names":["DropdownContainer","styled","version","OptionsContainer","width","FooterContainer","COLORS","NoResultsContainer","GroupedMenuListContainer","StyledMenuList","MenuItemWrapper","MenuItemContainer","isSelected","isHovered","isSubMenuOpen","isDisabled","ContentContainer","SubMenuWrapper","SubMenuListContainer","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper"],"mappings":";;AAGO,MAAMA,IAAoBC,EAAO;AAAA;AAAA,kBAKtB,CAAC,EAAE,SAAAC,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA;AAAA,mBAE3C,CAAC,EAAE,SAAAA,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA,GAGlDC,IAAmBF,EAAO;AAAA,UAI7B,CAAC,EAAE,OAAAG,EAAA,MAAaA,KAAgB,OAAQ;AAAA;AAAA;AAAA;AAAA,YAItC,CAAC,EAAE,SAAAF,EAAA,MAAeA,MAAY,QAAQ,MAAM,SAAU;AAAA;AAAA;AAAA;AAAA,GAQrDG,IAAkBJ,EAAO;AAAA;AAAA,qBAEjBK,EAAO,QAAQ,QAAQ;AAAA,yBACnBA,EAAO,OAAO,OAAO;AAAA;AAAA,GAIjCC,IAAqBN,EAAO;AAAA,eAI1B,CAAC,EAAE,SAAAC,EAAA,MAAeA,MAAY,QAAQ,IAAI,EAAG;AAAA,WACjD,CAAC,EAAE,SAAAA,EAAA,MAAeA,MAAY,QAAQ,MAAM,GAAI;AAAA,UACjD,CAAC,EAAE,OAAAE,EAAA,MAAaA,KAAgB,OAAQ;AAAA,YACtC,CAAC,EAAE,SAAAF,EAAA,MAAeA,MAAY,QAAQ,SAAS,OAAQ;AAAA;AAAA;AAAA,GAKtDM,IAA2BP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQpC,CAAC,EAAE,SAAAC,EAAA,MAAeA,MAAY,QAAQ,MAAM,OAAQ;AAAA,GAGlDO,IAAiBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQxBS,IAAkBT,EAAO;AAAA;AAAA,YAE1B,CAAC,EAAE,SAAAC,EAAA,MAAeA,MAAY,QAAQ,QAAQ,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiBvDS,IAAoBV,EAAO;AAAA;AAAA,YAE5B,CAAC,EAAE,SAAAC,EAAA,MAAeA,MAAY,QAAQ,QAAQ,SAAU;AAAA;AAAA;AAAA,kBAGlD,CAAC,EAAE,SAAAA,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA;AAAA,qBAEzC,CAAC;AAAA,EACpB,YAAAU;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAb;AACD,MACCa,IACGT,EAAO,QAAQ,WACfM,KAAcE,IACdZ,MAAY,QACXI,EAAO,WAAW,aAClBA,EAAO,WAAW,SAAS,QAC5BO,IACAP,EAAO,QAAQ,UACfA,EAAO,QAAQ,QAAQ;AAAA,UAClB,CAAC,EAAE,YAAAM,GAAY,eAAAE,GAAe,SAAAZ,EAAA,MACtCU,KAAcE,IACXZ,MAAY,QACXI,EAAO,KAAK,UACZA,EAAO,QAAQ,WAChBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAML,CAAC,EAAE,YAAAM,GAAY,YAAAG,GAAY,SAAAb,QAC9Ca,IACGT,EAAO,QAAQ,WACfM,IACAV,MAAY,QACXI,EAAO,WAAW,aAClBA,EAAO,WAAW,SAAS,QAC5BA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAIfU,IAAmBf,EAAO;AAAA;AAAA;AAAA;AAAA,GAM1BgB,IAAiBhB,EAAO;AAAA;AAAA;AAAA;AAAA,GAMxBiB,IAAuBjB,EAAO;AAAA;AAAA,qBAItBK,EAAO,QAAQ,QAAQ;AAAA;AAAA,kBAE1B,CAAC,EAAE,SAAAJ,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA,gBAC9C,CAAC,EAAE,SAAAA,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA;AAAA,mBAEzC,CAAC,EAAE,SAAAA,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQlDiB,IAAuBlB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS9BmB,IAAwBnB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS/BoB,IAAmBpB,EAAO;AAAA,UAC7B,CAACqB,MAAUA,EAAM,KAAK;AAAA,GAGnBC,IAAuBtB,EAAOgB,CAAc;AAAA,UAK/C,CAACK,MAAUA,EAAM,KAAK;AAAA,QACxB,CAACA,MAAUA,EAAM,GAAG;AAAA,SACnB,CAACA,MAAUA,EAAM,IAAI;AAAA;"}
|