@bikdotai/bik-component-library 0.0.876-beta.2 → 0.0.876
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/MultiLevelDropdown.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js.map +1 -1
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js +19 -24
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js +44 -46
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts +0 -3
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js +31 -37
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/type.d.ts +0 -5
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("react"),v=require("../zeroState/ZeroState.js"),L=require("../../constants/Theme.js"),E=require("../dropdown/OpenedDropdown/components/searchbox/SearchBox.js"),_=require("./MenuList.js"),p=require("./MultiLevelDropdown.styled.js"),N=require("../floater/floater.js"),T=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},z=T(u),A=({options:t,width:l,isSearchable:m,onDropdownItemClick:b,refElement:q,topOffset:R,leftOffset:w,isDropdownOpen:a,onDropdownOutsideClick:c,allowParentSelection:C,maxLevels:M,hideGroupLabel:O,version:s="1.0"})=>{const d=z.default.useRef(null),[f,S]=u.useState(t),j=h=>{const o=Array.isArray(t)?[...t]:[],g=[];for(;o.length>0;){const e=o.shift();e&&e.label.toLowerCase().includes(h.toLowerCase())&&g.push(e),e&&"children"in e&&e.children?o.push(...e.children):e&&"options"in e&&e.options&&o.push(...e.options)}const x=e=>e.map(r=>{if(g.includes(r))return r;if("children"in r&&r.children){const i=x(r.children);if(i.length>0)return{...r,children:i}}if("options"in r&&r.options){const i=x(r.options);if(i.length>0)return{...r,options:i}}return null}).filter(r=>r!==null);S(x(t))},y=h=>{d.current&&!d.current.contains(h.target)?c&&c(!0):c&&c(!1)};return u.useEffect(()=>{a&&j("")},[a]),u.useEffect(()=>(document.addEventListener("mousedown",y),()=>{document.removeEventListener("mousedown",y)}),[]),u.useEffect(()=>{S(t)},[t]),n.jsx(N.Floater,{refElement:q,topOffset:R,leftOffset:w,children:a&&n.jsx("div",{ref:d,style:{backgroundColor:L.COLORS.surface.standard,zIndex:99999,borderRadius:s==="3.0"?"4px":"8px",overflow:"hidden",boxShadow:"0 2px 8px 0 rgba(0, 0, 0, 0.12)",whiteSpace:"normal"},children:n.jsxs(p.DropdownContainer,{width:l,version:s,children:[m&&n.jsx("div",{style:{padding:s==="3.0"?"0px":"4px",width:l??"200px"},children:n.jsx(E.SearchBox,{onSearch:j,version:s==="3.0"?"3.0":"2.0"})}),n.jsx(p.OptionsContainer,{width:l,version:s,children:(f??[]).length>0&&n.jsx(_.MenuList,{width:l??"200px",onDropdownItemClick:b,options:f,parents:[],allowParentSelection:C,maxLevels:M,hideGroupLabel:O,currentLevel:1,version:s})}),(f??[]).length===0&&n.jsx(p.NoResultsContainer,{style:{width:l??"200px"},version:s,children:s==="3.0"?n.jsx("span",{style:{fontSize:"12px",color:L.COLORS.content.placeholder,lineHeight:"16px"},children:"No results found!"}):n.jsx(v.ZeroState,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})})]})})})};exports.MultiLevelDropdown=A;
|
|
2
2
|
//# sourceMappingURL=MultiLevelDropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiLevelDropdown.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { COLORS } from '@src/constants/Theme';\nimport { SearchBox } from '../dropdown/OpenedDropdown/components/searchbox/SearchBox';\nimport { Floater } from '../floater';\nimport { MenuList } from './MenuList';\nimport {\n\tDropdownContainer,\n\
|
|
1
|
+
{"version":3,"file":"MultiLevelDropdown.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { COLORS } from '@src/constants/Theme';\nimport { SearchBox } from '../dropdown/OpenedDropdown/components/searchbox/SearchBox';\nimport { Floater } from '../floater';\nimport { MenuList } from './MenuList';\nimport {\n\tDropdownContainer,\n\tNoResultsContainer,\n\tOptionsContainer,\n} from './MultiLevelDropdown.styled';\nimport { MultiLevelDropdownOption, MultiLevelDropdownProps } from './type';\n\nexport const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({\n\toptions,\n\twidth,\n\tisSearchable,\n\tonDropdownItemClick,\n\trefElement,\n\ttopOffset,\n\tleftOffset,\n\tisDropdownOpen,\n\tonDropdownOutsideClick,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tversion = '1.0',\n}) => {\n\tconst dropdownRef = React.useRef<HTMLDivElement>(null);\n\tconst [filteredOptions, setFilteredOptions] =\n\t\tuseState<MultiLevelDropdownOption[]>(options);\n\n\tconst search = (searchString: string) => {\n\t\tconst queue = Array.isArray(options) ? [...options] : [];\n\t\tconst result: MultiLevelDropdownOption[] = [];\n\n\t\twhile (queue.length > 0) {\n\t\t\tconst current = queue.shift();\n\t\t\tif (\n\t\t\t\tcurrent &&\n\t\t\t\tcurrent.label.toLowerCase().includes(searchString.toLowerCase())\n\t\t\t) {\n\t\t\t\tresult.push(current);\n\t\t\t}\n\t\t\tif (current && 'children' in current && current.children) {\n\t\t\t\tqueue.push(...current.children);\n\t\t\t} else if (current && 'options' in current && current.options) {\n\t\t\t\tqueue.push(...current.options);\n\t\t\t}\n\t\t}\n\n\t\tconst filterOptions = (options: MultiLevelDropdownOption[]) => {\n\t\t\treturn options\n\t\t\t\t.map((option: MultiLevelDropdownOption) => {\n\t\t\t\t\tif (result.includes(option)) {\n\t\t\t\t\t\treturn option;\n\t\t\t\t\t}\n\t\t\t\t\tif ('children' in option && option.children) {\n\t\t\t\t\t\tconst filteredChildren = filterOptions(\n\t\t\t\t\t\t\toption.children as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredChildren.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, children: filteredChildren };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif ('options' in option && option.options) {\n\t\t\t\t\t\tconst filteredOptions = filterOptions(\n\t\t\t\t\t\t\toption.options as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredOptions.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, options: filteredOptions };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn null;\n\t\t\t\t})\n\t\t\t\t.filter((option) => option !== null);\n\t\t};\n\n\t\tsetFilteredOptions(filterOptions(options) as MultiLevelDropdownOption[]);\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(true);\n\t\t\t}\n\t\t} else {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (isDropdownOpen) {\n\t\t\tsearch('');\n\t\t}\n\t}, [isDropdownOpen]);\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tsetFilteredOptions(options);\n\t}, [options]);\n\n\treturn (\n\t\t<Floater\n\t\t\trefElement={refElement}\n\t\t\ttopOffset={topOffset}\n\t\t\tleftOffset={leftOffset}\n\t\t>\n\t\t\t{isDropdownOpen && (\n\t\t\t\t<div\n\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\tzIndex: 99999,\n\t\t\t\t\t\tborderRadius: version === '3.0' ? '4px' : '8px',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tboxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\n\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<DropdownContainer width={width} version={version}>\n\t\t\t\t\t\t{isSearchable && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tpadding: version === '3.0' ? '0px' : '4px',\n\t\t\t\t\t\t\t\t\twidth: width ?? '200px',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<SearchBox\n\t\t\t\t\t\t\t\t\tonSearch={search}\n\t\t\t\t\t\t\t\t\tversion={version === '3.0' ? '3.0' : '2.0'}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<OptionsContainer width={width} version={version}>\n\t\t\t\t\t\t\t{(filteredOptions ?? []).length > 0 && (\n\t\t\t\t\t\t\t\t<MenuList\n\t\t\t\t\t\t\t\t\twidth={width ?? '200px'}\n\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\toptions={filteredOptions}\n\t\t\t\t\t\t\t\t\tparents={[]}\n\t\t\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\t\t\t\t\t\t\tcurrentLevel={1}\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</OptionsContainer>\n\n\t\t\t\t\t\t{(filteredOptions ?? []).length === 0 && (\n\t\t\t\t\t\t\t<NoResultsContainer\n\t\t\t\t\t\t\t\tstyle={{ width: width ?? '200px' }}\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{version === '3.0' ? (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\t\t\t\t\t\tcolor: COLORS.content.placeholder,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: '16px',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tNo results found!\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\t\t\t\ttitle=\"No results found!\"\n\t\t\t\t\t\t\t\t\t\tsubTitle={`Sorry, we are unable to find any results for your search.`}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</NoResultsContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownContainer>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Floater>\n\t);\n};\n"],"names":["MultiLevelDropdown","options","width","isSearchable","onDropdownItemClick","refElement","topOffset","leftOffset","isDropdownOpen","onDropdownOutsideClick","allowParentSelection","maxLevels","hideGroupLabel","version","dropdownRef","React","filteredOptions","setFilteredOptions","useState","search","searchString","queue","result","current","filterOptions","option","filteredChildren","handleClickOutside","event","useEffect","jsx","Floater","COLORS","jsxs","DropdownContainer","SearchBox","OptionsContainer","MenuList","NoResultsContainer","ZeroState"],"mappings":"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"}
|
|
@@ -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"),n=require("../../constants/Theme.js"),s=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=s(p),u=e.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=e.default.div`
|
|
7
7
|
width: ${({width:t})=>t||"200px"};
|
|
8
8
|
max-width: 300px;
|
|
9
9
|
max-height: 280px;
|
|
@@ -12,32 +12,27 @@
|
|
|
12
12
|
&::-webkit-scrollbar {
|
|
13
13
|
width: 0px;
|
|
14
14
|
}
|
|
15
|
-
`,c=
|
|
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`
|
|
15
|
+
`,c=e.default.div`
|
|
21
16
|
margin-top: ${({version:t})=>t==="3.0"?0:64}px;
|
|
22
17
|
height: ${({version:t})=>t==="3.0"?236:200}px;
|
|
23
18
|
width: ${({width:t})=>t||"200px"};
|
|
24
19
|
display: ${({version:t})=>t==="3.0"?"flex":"block"};
|
|
25
20
|
align-items: center;
|
|
26
21
|
justify-content: center;
|
|
27
|
-
`,
|
|
22
|
+
`,x=e.default.div`
|
|
28
23
|
width: 100%;
|
|
29
24
|
justify-content: center;
|
|
30
25
|
cursor: pointer;
|
|
31
26
|
align-items: center;
|
|
32
27
|
justify-content: space-between;
|
|
33
28
|
margin: ${({version:t})=>t==="3.0"?"0":"4px 0"};
|
|
34
|
-
`,f=
|
|
29
|
+
`,f=e.default.div`
|
|
35
30
|
z-index: 1000;
|
|
36
31
|
position: relative;
|
|
37
32
|
margin: 0px;
|
|
38
33
|
padding: 0px;
|
|
39
34
|
width: 100%;
|
|
40
|
-
`,
|
|
35
|
+
`,g=e.default.div`
|
|
41
36
|
position: relative;
|
|
42
37
|
padding: ${({version:t})=>t==="3.0"?"0px":"1px 4px"};
|
|
43
38
|
cursor: pointer;
|
|
@@ -46,33 +41,33 @@
|
|
|
46
41
|
&:focus-within > .submenu {
|
|
47
42
|
display: block;
|
|
48
43
|
}
|
|
49
|
-
`,
|
|
44
|
+
`,b=e.default.div`
|
|
50
45
|
position: relative;
|
|
51
46
|
padding: ${({version:t})=>t==="3.0"?"8px":"4px 8px"};
|
|
52
47
|
transition: background-color 0.2s;
|
|
53
48
|
width: 100%;
|
|
54
49
|
border-radius: ${({version:t})=>t==="3.0"?0:8}px;
|
|
55
50
|
justify-content: center;
|
|
56
|
-
background-color: ${({isSelected:t,isHovered:i,isSubMenuOpen:o,isDisabled:a,version:d})=>a?
|
|
57
|
-
color: ${({isSelected:t,isSubMenuOpen:i,version:o})=>t||i?o==="3.0"?
|
|
51
|
+
background-color: ${({isSelected:t,isHovered:i,isSubMenuOpen:o,isDisabled:a,version:d})=>a?n.COLORS.surface.standard:t||o?d==="3.0"?n.COLORS.background.brandLight:n.COLORS.background.positive.light:i?n.COLORS.surface.hovered:n.COLORS.surface.standard};
|
|
52
|
+
color: ${({isSelected:t,isSubMenuOpen:i,version:o})=>t||i?o==="3.0"?n.COLORS.text.primary:n.COLORS.content.positive:n.COLORS.content.primary};
|
|
58
53
|
display: flex;
|
|
59
54
|
align-items: center;
|
|
60
55
|
justify-content: space-between;
|
|
61
56
|
|
|
62
57
|
&:hover {
|
|
63
|
-
background-color: ${({isSelected:t,isDisabled:i,version:o})=>i?
|
|
58
|
+
background-color: ${({isSelected:t,isDisabled:i,version:o})=>i?n.COLORS.surface.standard:t?o==="3.0"?n.COLORS.background.brandLight:n.COLORS.background.positive.light:n.COLORS.surface.hovered};
|
|
64
59
|
}
|
|
65
|
-
`,
|
|
60
|
+
`,C=e.default.div`
|
|
66
61
|
display: flex;
|
|
67
62
|
align-items: center;
|
|
68
63
|
gap: 8px;
|
|
69
|
-
`,r=
|
|
64
|
+
`,r=e.default.div`
|
|
70
65
|
z-index: 1001;
|
|
71
66
|
position: fixed;
|
|
72
67
|
border-left: 4px solid transparent;
|
|
73
|
-
`,
|
|
68
|
+
`,h=e.default.div`
|
|
74
69
|
margin: 4px;
|
|
75
|
-
background-color: ${
|
|
70
|
+
background-color: ${n.COLORS.surface.standard};
|
|
76
71
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
77
72
|
border-radius: ${({version:t})=>t==="3.0"?4:8}px;
|
|
78
73
|
padding-top: ${({version:t})=>t==="3.0"?0:4}px;
|
|
@@ -83,25 +78,25 @@
|
|
|
83
78
|
&::-webkit-scrollbar {
|
|
84
79
|
display: none;
|
|
85
80
|
}
|
|
86
|
-
`,
|
|
81
|
+
`,O=e.default.div`
|
|
87
82
|
width: 16px;
|
|
88
83
|
height: 16px;
|
|
89
84
|
display: flex;
|
|
90
85
|
align-items: center;
|
|
91
86
|
justify-content: center;
|
|
92
87
|
margin-right: 4px;
|
|
93
|
-
`,
|
|
88
|
+
`,m=e.default.div`
|
|
94
89
|
width: 16px;
|
|
95
90
|
height: 16px;
|
|
96
91
|
display: flex;
|
|
97
92
|
align-items: center;
|
|
98
93
|
justify-content: center;
|
|
99
94
|
margin-left: 4px;
|
|
100
|
-
`,v=
|
|
95
|
+
`,v=e.default.div`
|
|
101
96
|
width: ${t=>t.width};
|
|
102
|
-
`,y=
|
|
97
|
+
`,y=e.default(r)`
|
|
103
98
|
width: ${t=>t.width};
|
|
104
99
|
top: ${t=>t.top}px;
|
|
105
100
|
left: ${t=>t.left}px;
|
|
106
|
-
`;exports.ContentContainer=
|
|
101
|
+
`;exports.ContentContainer=C;exports.DropdownContainer=u;exports.GroupedMenuListContainer=x;exports.LeadingIconContainer=O;exports.MenuItemContainer=b;exports.MenuItemWrapper=g;exports.NoResultsContainer=c;exports.OptionsContainer=l;exports.StyledMenuList=f;exports.StyledSubMenuWrapper=y;exports.SubMenuContainer=v;exports.SubMenuListContainer=h;exports.SubMenuWrapper=r;exports.TrailingIconContainer=m;
|
|
107
102
|
//# 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\
|
|
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\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","NoResultsContainer","GroupedMenuListContainer","StyledMenuList","MenuItemWrapper","MenuItemContainer","isSelected","isHovered","isSubMenuOpen","isDisabled","COLORS","ContentContainer","SubMenuWrapper","SubMenuListContainer","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper"],"mappings":"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"}
|
|
@@ -1,35 +1,34 @@
|
|
|
1
1
|
import { jsx as t, jsxs as j } from "react/jsx-runtime";
|
|
2
2
|
import v, { useState as z, useEffect as p } from "react";
|
|
3
3
|
import { ZeroState as A } from "../zeroState/ZeroState.js";
|
|
4
|
-
import { COLORS as
|
|
5
|
-
import { SearchBox as
|
|
6
|
-
import { MenuList as
|
|
7
|
-
import { DropdownContainer as
|
|
8
|
-
import { Floater as
|
|
9
|
-
const
|
|
4
|
+
import { COLORS as S } from "../../constants/Theme.js";
|
|
5
|
+
import { SearchBox as F } from "../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";
|
|
6
|
+
import { MenuList as M } from "./MenuList.js";
|
|
7
|
+
import { DropdownContainer as _, OptionsContainer as q, NoResultsContainer as B } from "./MultiLevelDropdown.styled.js";
|
|
8
|
+
import { Floater as H } from "../floater/floater.js";
|
|
9
|
+
const U = ({
|
|
10
10
|
options: l,
|
|
11
11
|
width: i,
|
|
12
|
-
isSearchable:
|
|
13
|
-
onDropdownItemClick:
|
|
12
|
+
isSearchable: L,
|
|
13
|
+
onDropdownItemClick: b,
|
|
14
14
|
refElement: w,
|
|
15
|
-
topOffset:
|
|
16
|
-
leftOffset:
|
|
17
|
-
isDropdownOpen:
|
|
15
|
+
topOffset: C,
|
|
16
|
+
leftOffset: R,
|
|
17
|
+
isDropdownOpen: u,
|
|
18
18
|
onDropdownOutsideClick: o,
|
|
19
|
-
allowParentSelection:
|
|
19
|
+
allowParentSelection: E,
|
|
20
20
|
maxLevels: N,
|
|
21
21
|
hideGroupLabel: O,
|
|
22
|
-
version: n = "1.0"
|
|
23
|
-
footer: m
|
|
22
|
+
version: n = "1.0"
|
|
24
23
|
}) => {
|
|
25
|
-
const
|
|
26
|
-
const c = Array.isArray(l) ? [...l] : [],
|
|
24
|
+
const d = v.useRef(null), [f, m] = z(l), x = (a) => {
|
|
25
|
+
const c = Array.isArray(l) ? [...l] : [], y = [];
|
|
27
26
|
for (; c.length > 0; ) {
|
|
28
27
|
const e = c.shift();
|
|
29
|
-
e && e.label.toLowerCase().includes(
|
|
28
|
+
e && e.label.toLowerCase().includes(a.toLowerCase()) && y.push(e), e && "children" in e && e.children ? c.push(...e.children) : e && "options" in e && e.options && c.push(...e.options);
|
|
30
29
|
}
|
|
31
30
|
const h = (e) => e.map((r) => {
|
|
32
|
-
if (
|
|
31
|
+
if (y.includes(r))
|
|
33
32
|
return r;
|
|
34
33
|
if ("children" in r && r.children) {
|
|
35
34
|
const s = h(
|
|
@@ -47,36 +46,36 @@ const W = ({
|
|
|
47
46
|
}
|
|
48
47
|
return null;
|
|
49
48
|
}).filter((r) => r !== null);
|
|
50
|
-
|
|
51
|
-
},
|
|
52
|
-
|
|
49
|
+
m(h(l));
|
|
50
|
+
}, g = (a) => {
|
|
51
|
+
d.current && !d.current.contains(a.target) ? o && o(!0) : o && o(!1);
|
|
53
52
|
};
|
|
54
53
|
return p(() => {
|
|
55
|
-
|
|
56
|
-
}, [
|
|
57
|
-
document.removeEventListener("mousedown",
|
|
54
|
+
u && x("");
|
|
55
|
+
}, [u]), p(() => (document.addEventListener("mousedown", g), () => {
|
|
56
|
+
document.removeEventListener("mousedown", g);
|
|
58
57
|
}), []), p(() => {
|
|
59
|
-
|
|
58
|
+
m(l);
|
|
60
59
|
}, [l]), /* @__PURE__ */ t(
|
|
61
|
-
|
|
60
|
+
H,
|
|
62
61
|
{
|
|
63
62
|
refElement: w,
|
|
64
|
-
topOffset:
|
|
65
|
-
leftOffset:
|
|
66
|
-
children:
|
|
63
|
+
topOffset: C,
|
|
64
|
+
leftOffset: R,
|
|
65
|
+
children: u && /* @__PURE__ */ t(
|
|
67
66
|
"div",
|
|
68
67
|
{
|
|
69
|
-
ref:
|
|
68
|
+
ref: d,
|
|
70
69
|
style: {
|
|
71
|
-
backgroundColor:
|
|
70
|
+
backgroundColor: S.surface.standard,
|
|
72
71
|
zIndex: 99999,
|
|
73
72
|
borderRadius: n === "3.0" ? "4px" : "8px",
|
|
74
73
|
overflow: "hidden",
|
|
75
74
|
boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.12)",
|
|
76
75
|
whiteSpace: "normal"
|
|
77
76
|
},
|
|
78
|
-
children: /* @__PURE__ */ j(
|
|
79
|
-
|
|
77
|
+
children: /* @__PURE__ */ j(_, { width: i, version: n, children: [
|
|
78
|
+
L && /* @__PURE__ */ t(
|
|
80
79
|
"div",
|
|
81
80
|
{
|
|
82
81
|
style: {
|
|
@@ -84,30 +83,30 @@ const W = ({
|
|
|
84
83
|
width: i ?? "200px"
|
|
85
84
|
},
|
|
86
85
|
children: /* @__PURE__ */ t(
|
|
87
|
-
|
|
86
|
+
F,
|
|
88
87
|
{
|
|
89
|
-
onSearch:
|
|
88
|
+
onSearch: x,
|
|
90
89
|
version: n === "3.0" ? "3.0" : "2.0"
|
|
91
90
|
}
|
|
92
91
|
)
|
|
93
92
|
}
|
|
94
93
|
),
|
|
95
|
-
/* @__PURE__ */ t(
|
|
96
|
-
|
|
94
|
+
/* @__PURE__ */ t(q, { width: i, version: n, children: (f ?? []).length > 0 && /* @__PURE__ */ t(
|
|
95
|
+
M,
|
|
97
96
|
{
|
|
98
97
|
width: i ?? "200px",
|
|
99
|
-
onDropdownItemClick:
|
|
100
|
-
options:
|
|
98
|
+
onDropdownItemClick: b,
|
|
99
|
+
options: f,
|
|
101
100
|
parents: [],
|
|
102
|
-
allowParentSelection:
|
|
101
|
+
allowParentSelection: E,
|
|
103
102
|
maxLevels: N,
|
|
104
103
|
hideGroupLabel: O,
|
|
105
104
|
currentLevel: 1,
|
|
106
105
|
version: n
|
|
107
106
|
}
|
|
108
107
|
) }),
|
|
109
|
-
(
|
|
110
|
-
|
|
108
|
+
(f ?? []).length === 0 && /* @__PURE__ */ t(
|
|
109
|
+
B,
|
|
111
110
|
{
|
|
112
111
|
style: { width: i ?? "200px" },
|
|
113
112
|
version: n,
|
|
@@ -116,7 +115,7 @@ const W = ({
|
|
|
116
115
|
{
|
|
117
116
|
style: {
|
|
118
117
|
fontSize: "12px",
|
|
119
|
-
color:
|
|
118
|
+
color: S.content.placeholder,
|
|
120
119
|
lineHeight: "16px"
|
|
121
120
|
},
|
|
122
121
|
children: "No results found!"
|
|
@@ -129,8 +128,7 @@ const W = ({
|
|
|
129
128
|
}
|
|
130
129
|
)
|
|
131
130
|
}
|
|
132
|
-
)
|
|
133
|
-
m && /* @__PURE__ */ t(I, { children: m })
|
|
131
|
+
)
|
|
134
132
|
] })
|
|
135
133
|
}
|
|
136
134
|
)
|
|
@@ -138,6 +136,6 @@ const W = ({
|
|
|
138
136
|
);
|
|
139
137
|
};
|
|
140
138
|
export {
|
|
141
|
-
|
|
139
|
+
U as MultiLevelDropdown
|
|
142
140
|
};
|
|
143
141
|
//# sourceMappingURL=MultiLevelDropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiLevelDropdown.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { COLORS } from '@src/constants/Theme';\nimport { SearchBox } from '../dropdown/OpenedDropdown/components/searchbox/SearchBox';\nimport { Floater } from '../floater';\nimport { MenuList } from './MenuList';\nimport {\n\tDropdownContainer,\n\
|
|
1
|
+
{"version":3,"file":"MultiLevelDropdown.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { COLORS } from '@src/constants/Theme';\nimport { SearchBox } from '../dropdown/OpenedDropdown/components/searchbox/SearchBox';\nimport { Floater } from '../floater';\nimport { MenuList } from './MenuList';\nimport {\n\tDropdownContainer,\n\tNoResultsContainer,\n\tOptionsContainer,\n} from './MultiLevelDropdown.styled';\nimport { MultiLevelDropdownOption, MultiLevelDropdownProps } from './type';\n\nexport const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({\n\toptions,\n\twidth,\n\tisSearchable,\n\tonDropdownItemClick,\n\trefElement,\n\ttopOffset,\n\tleftOffset,\n\tisDropdownOpen,\n\tonDropdownOutsideClick,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tversion = '1.0',\n}) => {\n\tconst dropdownRef = React.useRef<HTMLDivElement>(null);\n\tconst [filteredOptions, setFilteredOptions] =\n\t\tuseState<MultiLevelDropdownOption[]>(options);\n\n\tconst search = (searchString: string) => {\n\t\tconst queue = Array.isArray(options) ? [...options] : [];\n\t\tconst result: MultiLevelDropdownOption[] = [];\n\n\t\twhile (queue.length > 0) {\n\t\t\tconst current = queue.shift();\n\t\t\tif (\n\t\t\t\tcurrent &&\n\t\t\t\tcurrent.label.toLowerCase().includes(searchString.toLowerCase())\n\t\t\t) {\n\t\t\t\tresult.push(current);\n\t\t\t}\n\t\t\tif (current && 'children' in current && current.children) {\n\t\t\t\tqueue.push(...current.children);\n\t\t\t} else if (current && 'options' in current && current.options) {\n\t\t\t\tqueue.push(...current.options);\n\t\t\t}\n\t\t}\n\n\t\tconst filterOptions = (options: MultiLevelDropdownOption[]) => {\n\t\t\treturn options\n\t\t\t\t.map((option: MultiLevelDropdownOption) => {\n\t\t\t\t\tif (result.includes(option)) {\n\t\t\t\t\t\treturn option;\n\t\t\t\t\t}\n\t\t\t\t\tif ('children' in option && option.children) {\n\t\t\t\t\t\tconst filteredChildren = filterOptions(\n\t\t\t\t\t\t\toption.children as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredChildren.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, children: filteredChildren };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif ('options' in option && option.options) {\n\t\t\t\t\t\tconst filteredOptions = filterOptions(\n\t\t\t\t\t\t\toption.options as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredOptions.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, options: filteredOptions };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn null;\n\t\t\t\t})\n\t\t\t\t.filter((option) => option !== null);\n\t\t};\n\n\t\tsetFilteredOptions(filterOptions(options) as MultiLevelDropdownOption[]);\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(true);\n\t\t\t}\n\t\t} else {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (isDropdownOpen) {\n\t\t\tsearch('');\n\t\t}\n\t}, [isDropdownOpen]);\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tsetFilteredOptions(options);\n\t}, [options]);\n\n\treturn (\n\t\t<Floater\n\t\t\trefElement={refElement}\n\t\t\ttopOffset={topOffset}\n\t\t\tleftOffset={leftOffset}\n\t\t>\n\t\t\t{isDropdownOpen && (\n\t\t\t\t<div\n\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\tzIndex: 99999,\n\t\t\t\t\t\tborderRadius: version === '3.0' ? '4px' : '8px',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tboxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\n\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<DropdownContainer width={width} version={version}>\n\t\t\t\t\t\t{isSearchable && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tpadding: version === '3.0' ? '0px' : '4px',\n\t\t\t\t\t\t\t\t\twidth: width ?? '200px',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<SearchBox\n\t\t\t\t\t\t\t\t\tonSearch={search}\n\t\t\t\t\t\t\t\t\tversion={version === '3.0' ? '3.0' : '2.0'}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<OptionsContainer width={width} version={version}>\n\t\t\t\t\t\t\t{(filteredOptions ?? []).length > 0 && (\n\t\t\t\t\t\t\t\t<MenuList\n\t\t\t\t\t\t\t\t\twidth={width ?? '200px'}\n\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\toptions={filteredOptions}\n\t\t\t\t\t\t\t\t\tparents={[]}\n\t\t\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\t\t\t\t\t\t\tcurrentLevel={1}\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</OptionsContainer>\n\n\t\t\t\t\t\t{(filteredOptions ?? []).length === 0 && (\n\t\t\t\t\t\t\t<NoResultsContainer\n\t\t\t\t\t\t\t\tstyle={{ width: width ?? '200px' }}\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{version === '3.0' ? (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\t\t\t\t\t\tcolor: COLORS.content.placeholder,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: '16px',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tNo results found!\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\t\t\t\ttitle=\"No results found!\"\n\t\t\t\t\t\t\t\t\t\tsubTitle={`Sorry, we are unable to find any results for your search.`}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</NoResultsContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownContainer>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Floater>\n\t);\n};\n"],"names":["MultiLevelDropdown","options","width","isSearchable","onDropdownItemClick","refElement","topOffset","leftOffset","isDropdownOpen","onDropdownOutsideClick","allowParentSelection","maxLevels","hideGroupLabel","version","dropdownRef","React","filteredOptions","setFilteredOptions","useState","search","searchString","queue","result","current","filterOptions","option","filteredChildren","handleClickOutside","event","useEffect","jsx","Floater","COLORS","jsxs","DropdownContainer","SearchBox","OptionsContainer","MenuList","NoResultsContainer","ZeroState"],"mappings":"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"}
|
|
@@ -11,9 +11,6 @@ export declare const OptionsContainer: import('styled-components/dist/types').IS
|
|
|
11
11
|
width?: string | undefined;
|
|
12
12
|
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
13
13
|
}>> & string;
|
|
14
|
-
export declare const FooterContainer: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
|
|
15
|
-
style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
|
|
16
|
-
}> & string;
|
|
17
14
|
export declare const NoResultsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
|
|
18
15
|
style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
|
|
19
16
|
}, {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { COLORS as
|
|
3
|
-
const c =
|
|
1
|
+
import n from "styled-components";
|
|
2
|
+
import { COLORS as e } from "../../constants/Theme.js";
|
|
3
|
+
const c = n.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 = n.div`
|
|
9
9
|
width: ${({ width: t }) => t || "200px"};
|
|
10
10
|
max-width: 300px;
|
|
11
11
|
max-height: 280px;
|
|
@@ -14,32 +14,27 @@ const c = e.div`
|
|
|
14
14
|
&::-webkit-scrollbar {
|
|
15
15
|
width: 0px;
|
|
16
16
|
}
|
|
17
|
-
`, l =
|
|
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`
|
|
17
|
+
`, l = n.div`
|
|
23
18
|
margin-top: ${({ version: t }) => t === "3.0" ? 0 : 64}px;
|
|
24
19
|
height: ${({ version: t }) => t === "3.0" ? 236 : 200}px;
|
|
25
20
|
width: ${({ width: t }) => t || "200px"};
|
|
26
21
|
display: ${({ version: t }) => t === "3.0" ? "flex" : "block"};
|
|
27
22
|
align-items: center;
|
|
28
23
|
justify-content: center;
|
|
29
|
-
`,
|
|
24
|
+
`, u = n.div`
|
|
30
25
|
width: 100%;
|
|
31
26
|
justify-content: center;
|
|
32
27
|
cursor: pointer;
|
|
33
28
|
align-items: center;
|
|
34
29
|
justify-content: space-between;
|
|
35
30
|
margin: ${({ version: t }) => t === "3.0" ? "0" : "4px 0"};
|
|
36
|
-
`,
|
|
31
|
+
`, g = n.div`
|
|
37
32
|
z-index: 1000;
|
|
38
33
|
position: relative;
|
|
39
34
|
margin: 0px;
|
|
40
35
|
padding: 0px;
|
|
41
36
|
width: 100%;
|
|
42
|
-
`,
|
|
37
|
+
`, b = n.div`
|
|
43
38
|
position: relative;
|
|
44
39
|
padding: ${({ version: t }) => t === "3.0" ? "0px" : "1px 4px"};
|
|
45
40
|
cursor: pointer;
|
|
@@ -48,7 +43,7 @@ const c = e.div`
|
|
|
48
43
|
&:focus-within > .submenu {
|
|
49
44
|
display: block;
|
|
50
45
|
}
|
|
51
|
-
`,
|
|
46
|
+
`, h = n.div`
|
|
52
47
|
position: relative;
|
|
53
48
|
padding: ${({ version: t }) => t === "3.0" ? "8px" : "4px 8px"};
|
|
54
49
|
transition: background-color 0.2s;
|
|
@@ -61,26 +56,26 @@ const c = e.div`
|
|
|
61
56
|
isSubMenuOpen: o,
|
|
62
57
|
isDisabled: r,
|
|
63
58
|
version: a
|
|
64
|
-
}) => r ?
|
|
65
|
-
color: ${({ isSelected: t, isSubMenuOpen: i, version: o }) => t || i ? o === "3.0" ?
|
|
59
|
+
}) => r ? e.surface.standard : t || o ? a === "3.0" ? e.background.brandLight : e.background.positive.light : i ? e.surface.hovered : e.surface.standard};
|
|
60
|
+
color: ${({ isSelected: t, isSubMenuOpen: i, version: o }) => t || i ? o === "3.0" ? e.text.primary : e.content.positive : e.content.primary};
|
|
66
61
|
display: flex;
|
|
67
62
|
align-items: center;
|
|
68
63
|
justify-content: space-between;
|
|
69
64
|
|
|
70
65
|
&:hover {
|
|
71
|
-
background-color: ${({ isSelected: t, isDisabled: i, version: o }) => i ?
|
|
66
|
+
background-color: ${({ isSelected: t, isDisabled: i, version: o }) => i ? e.surface.standard : t ? o === "3.0" ? e.background.brandLight : e.background.positive.light : e.surface.hovered};
|
|
72
67
|
}
|
|
73
|
-
`,
|
|
68
|
+
`, f = n.div`
|
|
74
69
|
display: flex;
|
|
75
70
|
align-items: center;
|
|
76
71
|
gap: 8px;
|
|
77
|
-
`, p =
|
|
72
|
+
`, p = n.div`
|
|
78
73
|
z-index: 1001;
|
|
79
74
|
position: fixed;
|
|
80
75
|
border-left: 4px solid transparent;
|
|
81
|
-
`,
|
|
76
|
+
`, m = n.div`
|
|
82
77
|
margin: 4px;
|
|
83
|
-
background-color: ${
|
|
78
|
+
background-color: ${e.surface.standard};
|
|
84
79
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
85
80
|
border-radius: ${({ version: t }) => t === "3.0" ? 4 : 8}px;
|
|
86
81
|
padding-top: ${({ version: t }) => t === "3.0" ? 0 : 4}px;
|
|
@@ -91,42 +86,41 @@ const c = e.div`
|
|
|
91
86
|
&::-webkit-scrollbar {
|
|
92
87
|
display: none;
|
|
93
88
|
}
|
|
94
|
-
`,
|
|
89
|
+
`, v = n.div`
|
|
95
90
|
width: 16px;
|
|
96
91
|
height: 16px;
|
|
97
92
|
display: flex;
|
|
98
93
|
align-items: center;
|
|
99
94
|
justify-content: center;
|
|
100
95
|
margin-right: 4px;
|
|
101
|
-
`,
|
|
96
|
+
`, $ = n.div`
|
|
102
97
|
width: 16px;
|
|
103
98
|
height: 16px;
|
|
104
99
|
display: flex;
|
|
105
100
|
align-items: center;
|
|
106
101
|
justify-content: center;
|
|
107
102
|
margin-left: 4px;
|
|
108
|
-
`,
|
|
103
|
+
`, w = n.div`
|
|
109
104
|
width: ${(t) => t.width};
|
|
110
|
-
`,
|
|
105
|
+
`, y = n(p)`
|
|
111
106
|
width: ${(t) => t.width};
|
|
112
107
|
top: ${(t) => t.top}px;
|
|
113
108
|
left: ${(t) => t.left}px;
|
|
114
109
|
`;
|
|
115
110
|
export {
|
|
116
|
-
|
|
111
|
+
f as ContentContainer,
|
|
117
112
|
c as DropdownContainer,
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
u as NoResultsContainer,
|
|
113
|
+
u as GroupedMenuListContainer,
|
|
114
|
+
v as LeadingIconContainer,
|
|
115
|
+
h as MenuItemContainer,
|
|
116
|
+
b as MenuItemWrapper,
|
|
117
|
+
l as NoResultsContainer,
|
|
124
118
|
x as OptionsContainer,
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
119
|
+
g as StyledMenuList,
|
|
120
|
+
y as StyledSubMenuWrapper,
|
|
121
|
+
w as SubMenuContainer,
|
|
122
|
+
m as SubMenuListContainer,
|
|
129
123
|
p as SubMenuWrapper,
|
|
130
|
-
|
|
124
|
+
$ as TrailingIconContainer
|
|
131
125
|
};
|
|
132
126
|
//# 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\
|
|
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\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","NoResultsContainer","GroupedMenuListContainer","StyledMenuList","MenuItemWrapper","MenuItemContainer","isSelected","isHovered","isSubMenuOpen","isDisabled","COLORS","ContentContainer","SubMenuWrapper","SubMenuListContainer","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper"],"mappings":"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"}
|
|
@@ -9,11 +9,6 @@ export interface MultiLevelDropdownProps extends FloaterProps {
|
|
|
9
9
|
maxLevels?: number;
|
|
10
10
|
hideGroupLabel?: boolean;
|
|
11
11
|
version?: '1.0' | '2.0' | '3.0';
|
|
12
|
-
/**
|
|
13
|
-
* Pinned below the options list, outside the scroll area — for actions that
|
|
14
|
-
* must stay reachable however long the list is, e.g. "＋ New label".
|
|
15
|
-
*/
|
|
16
|
-
footer?: ReactNode;
|
|
17
12
|
onDropdownOutsideClick?: (isOutsideClick: any) => void;
|
|
18
13
|
onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
19
14
|
}
|