@bikdotai/bik-component-library 0.0.875-beta.3 → 0.0.876-beta.0
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 +14 -11
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js.map +1 -1
- package/dist/cjs/components/toaster/Toaster.styled.js +20 -35
- package/dist/cjs/components/toaster/Toaster.styled.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js +46 -44
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts +3 -0
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js +29 -25
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/type.d.ts +5 -0
- package/dist/esm/components/toaster/Toaster.styled.js +22 -37
- package/dist/esm/components/toaster/Toaster.styled.js.map +1 -1
- 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"),E=require("../zeroState/ZeroState.js"),m=require("../../constants/Theme.js"),_=require("../dropdown/OpenedDropdown/components/searchbox/SearchBox.js"),F=require("./MenuList.js"),a=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:b,onDropdownItemClick:q,refElement:C,topOffset:R,leftOffset:w,isDropdownOpen:d,onDropdownOutsideClick:c,allowParentSelection:M,maxLevels:O,hideGroupLabel:v,version:s="1.0",footer:j})=>{const f=z.default.useRef(null),[h,S]=u.useState(t),y=x=>{const o=Array.isArray(t)?[...t]:[],L=[];for(;o.length>0;){const e=o.shift();e&&e.label.toLowerCase().includes(x.toLowerCase())&&L.push(e),e&&"children"in e&&e.children?o.push(...e.children):e&&"options"in e&&e.options&&o.push(...e.options)}const p=e=>e.map(r=>{if(L.includes(r))return r;if("children"in r&&r.children){const i=p(r.children);if(i.length>0)return{...r,children:i}}if("options"in r&&r.options){const i=p(r.options);if(i.length>0)return{...r,options:i}}return null}).filter(r=>r!==null);S(p(t))},g=x=>{f.current&&!f.current.contains(x.target)?c&&c(!0):c&&c(!1)};return u.useEffect(()=>{d&&y("")},[d]),u.useEffect(()=>(document.addEventListener("mousedown",g),()=>{document.removeEventListener("mousedown",g)}),[]),u.useEffect(()=>{S(t)},[t]),n.jsx(N.Floater,{refElement:C,topOffset:R,leftOffset:w,children:d&&n.jsx("div",{ref:f,style:{backgroundColor:m.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(a.DropdownContainer,{width:l,version:s,children:[b&&n.jsx("div",{style:{padding:s==="3.0"?"0px":"4px",width:l??"200px"},children:n.jsx(_.SearchBox,{onSearch:y,version:s==="3.0"?"3.0":"2.0"})}),n.jsx(a.OptionsContainer,{width:l,version:s,children:(h??[]).length>0&&n.jsx(F.MenuList,{width:l??"200px",onDropdownItemClick:q,options:h,parents:[],allowParentSelection:M,maxLevels:O,hideGroupLabel:v,currentLevel:1,version:s})}),(h??[]).length===0&&n.jsx(a.NoResultsContainer,{style:{width:l??"200px"},version:s,children:s==="3.0"?n.jsx("span",{style:{fontSize:"12px",color:m.COLORS.content.placeholder,lineHeight:"16px"},children:"No results found!"}):n.jsx(E.ZeroState,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})}),j&&n.jsx(a.FooterContainer,{children:j})]})})})};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\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":"
|
|
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\tFooterContainer,\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\tfooter,\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\n\t\t\t\t\t\t{footer && <FooterContainer>{footer}</FooterContainer>}\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","footer","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","FooterContainer"],"mappings":"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"}
|
|
@@ -13,26 +13,29 @@
|
|
|
13
13
|
width: 0px;
|
|
14
14
|
}
|
|
15
15
|
`,c=e.default.div`
|
|
16
|
+
border-top: 1px solid ${n.COLORS.stroke.primary};
|
|
17
|
+
padding: 4px;
|
|
18
|
+
`,x=e.default.div`
|
|
16
19
|
margin-top: ${({version:t})=>t==="3.0"?0:64}px;
|
|
17
20
|
height: ${({version:t})=>t==="3.0"?236:200}px;
|
|
18
21
|
width: ${({width:t})=>t||"200px"};
|
|
19
22
|
display: ${({version:t})=>t==="3.0"?"flex":"block"};
|
|
20
23
|
align-items: center;
|
|
21
24
|
justify-content: center;
|
|
22
|
-
`,
|
|
25
|
+
`,f=e.default.div`
|
|
23
26
|
width: 100%;
|
|
24
27
|
justify-content: center;
|
|
25
28
|
cursor: pointer;
|
|
26
29
|
align-items: center;
|
|
27
30
|
justify-content: space-between;
|
|
28
31
|
margin: ${({version:t})=>t==="3.0"?"0":"4px 0"};
|
|
29
|
-
`,
|
|
32
|
+
`,g=e.default.div`
|
|
30
33
|
z-index: 1000;
|
|
31
34
|
position: relative;
|
|
32
35
|
margin: 0px;
|
|
33
36
|
padding: 0px;
|
|
34
37
|
width: 100%;
|
|
35
|
-
`,
|
|
38
|
+
`,b=e.default.div`
|
|
36
39
|
position: relative;
|
|
37
40
|
padding: ${({version:t})=>t==="3.0"?"0px":"1px 4px"};
|
|
38
41
|
cursor: pointer;
|
|
@@ -41,7 +44,7 @@
|
|
|
41
44
|
&:focus-within > .submenu {
|
|
42
45
|
display: block;
|
|
43
46
|
}
|
|
44
|
-
`,
|
|
47
|
+
`,C=e.default.div`
|
|
45
48
|
position: relative;
|
|
46
49
|
padding: ${({version:t})=>t==="3.0"?"8px":"4px 8px"};
|
|
47
50
|
transition: background-color 0.2s;
|
|
@@ -57,7 +60,7 @@
|
|
|
57
60
|
&:hover {
|
|
58
61
|
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};
|
|
59
62
|
}
|
|
60
|
-
`,
|
|
63
|
+
`,h=e.default.div`
|
|
61
64
|
display: flex;
|
|
62
65
|
align-items: center;
|
|
63
66
|
gap: 8px;
|
|
@@ -65,7 +68,7 @@
|
|
|
65
68
|
z-index: 1001;
|
|
66
69
|
position: fixed;
|
|
67
70
|
border-left: 4px solid transparent;
|
|
68
|
-
`,
|
|
71
|
+
`,O=e.default.div`
|
|
69
72
|
margin: 4px;
|
|
70
73
|
background-color: ${n.COLORS.surface.standard};
|
|
71
74
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
@@ -78,25 +81,25 @@
|
|
|
78
81
|
&::-webkit-scrollbar {
|
|
79
82
|
display: none;
|
|
80
83
|
}
|
|
81
|
-
`,
|
|
84
|
+
`,m=e.default.div`
|
|
82
85
|
width: 16px;
|
|
83
86
|
height: 16px;
|
|
84
87
|
display: flex;
|
|
85
88
|
align-items: center;
|
|
86
89
|
justify-content: center;
|
|
87
90
|
margin-right: 4px;
|
|
88
|
-
`,
|
|
91
|
+
`,v=e.default.div`
|
|
89
92
|
width: 16px;
|
|
90
93
|
height: 16px;
|
|
91
94
|
display: flex;
|
|
92
95
|
align-items: center;
|
|
93
96
|
justify-content: center;
|
|
94
97
|
margin-left: 4px;
|
|
95
|
-
`,
|
|
98
|
+
`,y=e.default.div`
|
|
96
99
|
width: ${t=>t.width};
|
|
97
|
-
`,
|
|
100
|
+
`,S=e.default(r)`
|
|
98
101
|
width: ${t=>t.width};
|
|
99
102
|
top: ${t=>t.top}px;
|
|
100
103
|
left: ${t=>t.left}px;
|
|
101
|
-
`;exports.ContentContainer=
|
|
104
|
+
`;exports.ContentContainer=h;exports.DropdownContainer=u;exports.FooterContainer=c;exports.GroupedMenuListContainer=f;exports.LeadingIconContainer=m;exports.MenuItemContainer=C;exports.MenuItemWrapper=b;exports.NoResultsContainer=x;exports.OptionsContainer=l;exports.StyledMenuList=g;exports.StyledSubMenuWrapper=S;exports.SubMenuContainer=y;exports.SubMenuListContainer=O;exports.SubMenuWrapper=r;exports.TrailingIconContainer=v;
|
|
102
105
|
//# 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\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","
|
|
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\tpadding: 4px;\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,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),o=require("../../constants/Theme.js"),i=require("../../constants/zindex.js"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=a(e),s=r.default.div`
|
|
2
2
|
--toastify-color-light: #fff;
|
|
3
3
|
--toastify-color-dark: #121212;
|
|
4
4
|
--toastify-text-color-success: ${o.COLORS.content.primary};
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
--toastify-toast-min-height: ${t=>t.height||(t.isSubTextIncluded?"70px":"56px")};
|
|
15
15
|
--toastify-toast-max-height: ${t=>t.height||"fit-content"};
|
|
16
16
|
font-family: inherit;
|
|
17
|
-
z-index: ${t=>t.zIndex||
|
|
17
|
+
z-index: ${t=>t.zIndex||i.ComponentZindex.TOASTER};
|
|
18
18
|
|
|
19
19
|
.custom-position {
|
|
20
20
|
position: relative;
|
|
@@ -25,46 +25,28 @@
|
|
|
25
25
|
max-width: 90vw;
|
|
26
26
|
overflow: visible;
|
|
27
27
|
|
|
28
|
+
/* On mobile every position collapses to the same centred, near-full-width
|
|
29
|
+
container: a 16px gutter on each side. The translate does the centring, so
|
|
30
|
+
there must be no horizontal margin or it lands off-centre again. */
|
|
28
31
|
@media (max-width: 768px) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
/* Mobile positioning - only for top-right (default) */
|
|
35
|
-
.Toastify__toast-container--top-right {
|
|
36
|
-
@media (max-width: 768px) {
|
|
37
|
-
top: 2%;
|
|
38
|
-
left: 35%;
|
|
39
|
-
transform: translateX(-50%);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
/* Mobile positioning - for top-left */
|
|
44
|
-
.Toastify__toast-container--top-left {
|
|
45
|
-
@media (max-width: 768px) {
|
|
46
|
-
top: 2%;
|
|
32
|
+
width: calc(100vw - 32px);
|
|
33
|
+
max-width: calc(100vw - 32px);
|
|
34
|
+
margin: 0;
|
|
47
35
|
left: 50%;
|
|
36
|
+
right: auto;
|
|
48
37
|
transform: translateX(-50%);
|
|
38
|
+
align-items: center;
|
|
49
39
|
}
|
|
50
40
|
}
|
|
51
41
|
|
|
52
|
-
/* Mobile positioning -
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
.Toastify__toast-container--
|
|
56
|
-
|
|
57
|
-
left: 50%;
|
|
58
|
-
transform: translateX(-50%);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
/* Mobile positioning - for top-center */
|
|
42
|
+
/* Mobile positioning - top positions sit just below the viewport top. Horizontal
|
|
43
|
+
centring comes from the container rule above; redeclaring left/transform here
|
|
44
|
+
would override it, since these selectors are equally specific but later. */
|
|
45
|
+
.Toastify__toast-container--top-right,
|
|
46
|
+
.Toastify__toast-container--top-left,
|
|
63
47
|
.Toastify__toast-container--top-center {
|
|
64
48
|
@media (max-width: 768px) {
|
|
65
49
|
top: 2%;
|
|
66
|
-
left: 50%;
|
|
67
|
-
transform: translateX(-50%);
|
|
68
50
|
}
|
|
69
51
|
}
|
|
70
52
|
|
|
@@ -99,8 +81,11 @@
|
|
|
99
81
|
overflow: hidden;
|
|
100
82
|
|
|
101
83
|
@media (max-width: 768px) {
|
|
102
|
-
|
|
103
|
-
|
|
84
|
+
/* Fill the container rather than sizing itself, so the toast keeps the
|
|
85
|
+
container's 16px gutters instead of overflowing or under-filling. */
|
|
86
|
+
width: 100%;
|
|
87
|
+
min-width: 0;
|
|
88
|
+
max-width: 100%;
|
|
104
89
|
padding: ${t=>t.isSubTextIncluded?"16px 16px":"12px 16px"};
|
|
105
90
|
}
|
|
106
91
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.styled.js","sources":["../../../../src/components/toaster/Toaster.styled.tsx"],"sourcesContent":["import { TypeOptions } from 'react-toastify';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\n\nexport const ToasterStyled = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tzIndex?: number;\n\tisSubTextIncluded?: boolean;\n\ttype?: TypeOptions;\n}>`\n\t--toastify-color-light: #fff;\n\t--toastify-color-dark: #121212;\n\t--toastify-text-color-success: ${COLORS.content.primary};\n\t--toastify-text-color-error: ${COLORS.content.primary};\n\t--toastify-text-color-warning: ${COLORS.content.primary};\n\t--toastify-text-color-info: ${COLORS.content.primary};\n\t--toastify-color-info: ${COLORS.background.brandLight};\n\t--toastify-color-success: ${COLORS.background.positive.light};\n\t--toastify-color-error: ${COLORS.background.negative.light};\n\t--toastify-color-warning: ${COLORS.background.warning.light};\n\t--toastify-text-color-light: ${COLORS.content.primary};\n\t--toastify-toast-width: fit-content;\n\t--toastify-toast-min-height: ${(props) =>\n\t\tprops.height || (props.isSubTextIncluded ? '70px' : '56px')};\n\t--toastify-toast-max-height: ${(props) => props.height || 'fit-content'};\n\tfont-family: inherit;\n\tz-index: ${(props) => props.zIndex || ComponentZindex.TOASTER};\n\n\t.custom-position {\n\t\tposition: relative;\n\t}\n\t.Toastify__toast-container {\n\t\tpadding: 0;\n\t\twidth: auto;\n\t\tmax-width: 90vw;\n\t\toverflow: visible;\n\n\t\t
|
|
1
|
+
{"version":3,"file":"Toaster.styled.js","sources":["../../../../src/components/toaster/Toaster.styled.tsx"],"sourcesContent":["import { TypeOptions } from 'react-toastify';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\n\nexport const ToasterStyled = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tzIndex?: number;\n\tisSubTextIncluded?: boolean;\n\ttype?: TypeOptions;\n}>`\n\t--toastify-color-light: #fff;\n\t--toastify-color-dark: #121212;\n\t--toastify-text-color-success: ${COLORS.content.primary};\n\t--toastify-text-color-error: ${COLORS.content.primary};\n\t--toastify-text-color-warning: ${COLORS.content.primary};\n\t--toastify-text-color-info: ${COLORS.content.primary};\n\t--toastify-color-info: ${COLORS.background.brandLight};\n\t--toastify-color-success: ${COLORS.background.positive.light};\n\t--toastify-color-error: ${COLORS.background.negative.light};\n\t--toastify-color-warning: ${COLORS.background.warning.light};\n\t--toastify-text-color-light: ${COLORS.content.primary};\n\t--toastify-toast-width: fit-content;\n\t--toastify-toast-min-height: ${(props) =>\n\t\tprops.height || (props.isSubTextIncluded ? '70px' : '56px')};\n\t--toastify-toast-max-height: ${(props) => props.height || 'fit-content'};\n\tfont-family: inherit;\n\tz-index: ${(props) => props.zIndex || ComponentZindex.TOASTER};\n\n\t.custom-position {\n\t\tposition: relative;\n\t}\n\t.Toastify__toast-container {\n\t\tpadding: 0;\n\t\twidth: auto;\n\t\tmax-width: 90vw;\n\t\toverflow: visible;\n\n\t\t/* On mobile every position collapses to the same centred, near-full-width\n\t\t container: a 16px gutter on each side. The translate does the centring, so\n\t\t there must be no horizontal margin or it lands off-centre again. */\n\t\t@media (max-width: 768px) {\n\t\t\twidth: calc(100vw - 32px);\n\t\t\tmax-width: calc(100vw - 32px);\n\t\t\tmargin: 0;\n\t\t\tleft: 50%;\n\t\t\tright: auto;\n\t\t\ttransform: translateX(-50%);\n\t\t\talign-items: center;\n\t\t}\n\t}\n\n\t/* Mobile positioning - top positions sit just below the viewport top. Horizontal\n\t centring comes from the container rule above; redeclaring left/transform here\n\t would override it, since these selectors are equally specific but later. */\n\t.Toastify__toast-container--top-right,\n\t.Toastify__toast-container--top-left,\n\t.Toastify__toast-container--top-center {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t}\n\t}\n\n\t.Toastify__toast--success {\n\t\tborder: 1px solid ${COLORS.stroke.positive.lightAlt};\n\t}\n\n\t.Toastify__toast--info {\n\t\tborder: 1px solid ${COLORS.stroke.brandLightAlt};\n\t}\n\n\t.Toastify__toast--default {\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t}\n\n\t.Toastify__toast--error {\n\t\tborder: 1px solid ${COLORS.stroke.negative.lightAlt};\n\t}\n\n\t.Toastify__toast--warning {\n\t\tborder: 1px solid ${COLORS.stroke.warning.lightAlt};\n\t}\n\n\t.Toastify__toast {\n\t\tpadding: ${(props) => (props.isSubTextIncluded ? '16px 8px' : '12px 8px')};\n\t\tmax-width: ${(props) => props.width || '600px'};\n\t\tmin-width: 320px;\n\t\tborder-radius: 8px;\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t\t/* Clips the absolutely positioned progress bar to the 8px radius */\n\t\toverflow: hidden;\n\n\t\t@media (max-width: 768px) {\n\t\t\t/* Fill the container rather than sizing itself, so the toast keeps the\n\t\t\t container's 16px gutters instead of overflowing or under-filling. */\n\t\t\twidth: 100%;\n\t\t\tmin-width: 0;\n\t\t\tmax-width: 100%;\n\t\t\tpadding: ${(props) =>\n\t\t\t\tprops.isSubTextIncluded ? '16px 16px' : '12px 16px'};\n\t\t}\n\t}\n\n\t.Toastify__progress-bar {\n\t\theight: 4px;\n\t}\n\n\t/* NOTE: no .Toastify__close-button rule here — the close button is always a\n\t custom element passed via the closeButton option, and react-toastify\n\t clones it without adding that class. It is positioned inline instead. */\n\n\t.Toastify__toast-icon {\n\t\talign-self: center;\n\t\tmargin-inline-end: 12px;\n\t\theight: ${(props) => (props.isSubTextIncluded ? '38px' : '20px')};\n\t}\n\n\t.Toastify__toast-body {\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default {\n\t\tbackground: ${COLORS.content.brand};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info {\n\t\tbackground: ${COLORS.content.brand};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning {\n\t\tbackground: ${COLORS.content.warning};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success {\n\t\tbackground: ${COLORS.content.positive};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {\n\t\tbackground: ${COLORS.content.negative};\n\t}\n\n\t.Toastify__toast-body > div:last-child {\n\t\tdisplay: flex;\n\t}\n\n\t.Toastify__slide-enter {\n\t\tanimation: slideIn 1s ease forwards,\n\t\t\tbounce cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s both;\n\t}\n\t.Toastify__slide-exit {\n\t\tanimation: slideOut 0.5s ease-in-out forwards;\n\t}\n\t@keyframes bounce {\n\t\t0%,\n\t\t20%,\n\t\t50%,\n\t\t80%,\n\t\t100% {\n\t\t\ttransform: translateY(0); /* Start and end at the original position */\n\t\t}\n\t\t40% {\n\t\t\ttransform: translateX(-20px); /* Bouncing up */\n\t\t}\n\t\t60% {\n\t\t\ttransform: translateX(20px); /* Small bounce before settling */\n\t\t}\n\t}\n\t@keyframes slideIn {\n\t\t0% {\n\t\t\ttransform: translateX(-100%); /* Start off-screen to the left */\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(0); /* End at the original position */\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes slideOut {\n\t\t0% {\n\t\t\ttransform: translateX(0); /* Start from the original position */\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(100%); /* Slide out to the right */\n\t\t\topacity: 0;\n\t\t}\n\t}\n`;\n"],"names":["ToasterStyled","styled","COLORS","props","ComponentZindex"],"mappings":"iQAKaA,EAAgBC,EAAAA,QAAO;AAAA;AAAA;AAAA,kCASFC,EAAAA,OAAO,QAAQ,OAAO;AAAA,gCACxBA,EAAAA,OAAO,QAAQ,OAAO;AAAA,kCACpBA,EAAAA,OAAO,QAAQ,OAAO;AAAA,+BACzBA,EAAAA,OAAO,QAAQ,OAAO;AAAA,0BAC3BA,EAAAA,OAAO,WAAW,UAAU;AAAA,6BACzBA,SAAO,WAAW,SAAS,KAAK;AAAA,2BAClCA,SAAO,WAAW,SAAS,KAAK;AAAA,6BAC9BA,SAAO,WAAW,QAAQ,KAAK;AAAA,gCAC5BA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,gCAErBC,GAC/BA,EAAM,SAAWA,EAAM,kBAAoB,OAAS,OAAO;AAAA,gCAC5BA,GAAUA,EAAM,QAAU,aAAa;AAAA;AAAA,YAE3DA,GAAUA,EAAM,QAAUC,EAAAA,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAqCxCF,SAAO,OAAO,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA,sBAI/BA,EAAAA,OAAO,OAAO,aAAa;AAAA;AAAA;AAAA;AAAA,sBAI3BA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIrBA,SAAO,OAAO,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA,sBAI/BA,SAAO,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,aAItCC,GAAWA,EAAM,kBAAoB,WAAa,UAAW;AAAA,eAC3DA,GAAUA,EAAM,OAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAcjCA,GACXA,EAAM,kBAAoB,YAAc,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAe1CA,GAAWA,EAAM,kBAAoB,OAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASlDD,EAAAA,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,gBAIpBA,EAAAA,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,gBAIpBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA,gBAItBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,gBAIvBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
|
|
@@ -1,34 +1,35 @@
|
|
|
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 L } from "../../constants/Theme.js";
|
|
5
|
+
import { SearchBox as M } from "../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";
|
|
6
|
+
import { MenuList as _ } from "./MenuList.js";
|
|
7
|
+
import { DropdownContainer as q, OptionsContainer as B, NoResultsContainer as H, FooterContainer as I } from "./MultiLevelDropdown.styled.js";
|
|
8
|
+
import { Floater as T } from "../floater/floater.js";
|
|
9
|
+
const W = ({
|
|
10
10
|
options: l,
|
|
11
11
|
width: i,
|
|
12
|
-
isSearchable:
|
|
13
|
-
onDropdownItemClick:
|
|
12
|
+
isSearchable: b,
|
|
13
|
+
onDropdownItemClick: C,
|
|
14
14
|
refElement: w,
|
|
15
|
-
topOffset:
|
|
16
|
-
leftOffset:
|
|
17
|
-
isDropdownOpen:
|
|
15
|
+
topOffset: R,
|
|
16
|
+
leftOffset: E,
|
|
17
|
+
isDropdownOpen: d,
|
|
18
18
|
onDropdownOutsideClick: o,
|
|
19
|
-
allowParentSelection:
|
|
19
|
+
allowParentSelection: F,
|
|
20
20
|
maxLevels: N,
|
|
21
21
|
hideGroupLabel: O,
|
|
22
|
-
version: n = "1.0"
|
|
22
|
+
version: n = "1.0",
|
|
23
|
+
footer: m
|
|
23
24
|
}) => {
|
|
24
|
-
const
|
|
25
|
-
const c = Array.isArray(l) ? [...l] : [],
|
|
25
|
+
const u = v.useRef(null), [a, x] = z(l), g = (f) => {
|
|
26
|
+
const c = Array.isArray(l) ? [...l] : [], S = [];
|
|
26
27
|
for (; c.length > 0; ) {
|
|
27
28
|
const e = c.shift();
|
|
28
|
-
e && e.label.toLowerCase().includes(
|
|
29
|
+
e && e.label.toLowerCase().includes(f.toLowerCase()) && S.push(e), e && "children" in e && e.children ? c.push(...e.children) : e && "options" in e && e.options && c.push(...e.options);
|
|
29
30
|
}
|
|
30
31
|
const h = (e) => e.map((r) => {
|
|
31
|
-
if (
|
|
32
|
+
if (S.includes(r))
|
|
32
33
|
return r;
|
|
33
34
|
if ("children" in r && r.children) {
|
|
34
35
|
const s = h(
|
|
@@ -46,36 +47,36 @@ const U = ({
|
|
|
46
47
|
}
|
|
47
48
|
return null;
|
|
48
49
|
}).filter((r) => r !== null);
|
|
49
|
-
|
|
50
|
-
},
|
|
51
|
-
|
|
50
|
+
x(h(l));
|
|
51
|
+
}, y = (f) => {
|
|
52
|
+
u.current && !u.current.contains(f.target) ? o && o(!0) : o && o(!1);
|
|
52
53
|
};
|
|
53
54
|
return p(() => {
|
|
54
|
-
|
|
55
|
-
}, [
|
|
56
|
-
document.removeEventListener("mousedown",
|
|
55
|
+
d && g("");
|
|
56
|
+
}, [d]), p(() => (document.addEventListener("mousedown", y), () => {
|
|
57
|
+
document.removeEventListener("mousedown", y);
|
|
57
58
|
}), []), p(() => {
|
|
58
|
-
|
|
59
|
+
x(l);
|
|
59
60
|
}, [l]), /* @__PURE__ */ t(
|
|
60
|
-
|
|
61
|
+
T,
|
|
61
62
|
{
|
|
62
63
|
refElement: w,
|
|
63
|
-
topOffset:
|
|
64
|
-
leftOffset:
|
|
65
|
-
children:
|
|
64
|
+
topOffset: R,
|
|
65
|
+
leftOffset: E,
|
|
66
|
+
children: d && /* @__PURE__ */ t(
|
|
66
67
|
"div",
|
|
67
68
|
{
|
|
68
|
-
ref:
|
|
69
|
+
ref: u,
|
|
69
70
|
style: {
|
|
70
|
-
backgroundColor:
|
|
71
|
+
backgroundColor: L.surface.standard,
|
|
71
72
|
zIndex: 99999,
|
|
72
73
|
borderRadius: n === "3.0" ? "4px" : "8px",
|
|
73
74
|
overflow: "hidden",
|
|
74
75
|
boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.12)",
|
|
75
76
|
whiteSpace: "normal"
|
|
76
77
|
},
|
|
77
|
-
children: /* @__PURE__ */ j(
|
|
78
|
-
|
|
78
|
+
children: /* @__PURE__ */ j(q, { width: i, version: n, children: [
|
|
79
|
+
b && /* @__PURE__ */ t(
|
|
79
80
|
"div",
|
|
80
81
|
{
|
|
81
82
|
style: {
|
|
@@ -83,30 +84,30 @@ const U = ({
|
|
|
83
84
|
width: i ?? "200px"
|
|
84
85
|
},
|
|
85
86
|
children: /* @__PURE__ */ t(
|
|
86
|
-
|
|
87
|
+
M,
|
|
87
88
|
{
|
|
88
|
-
onSearch:
|
|
89
|
+
onSearch: g,
|
|
89
90
|
version: n === "3.0" ? "3.0" : "2.0"
|
|
90
91
|
}
|
|
91
92
|
)
|
|
92
93
|
}
|
|
93
94
|
),
|
|
94
|
-
/* @__PURE__ */ t(
|
|
95
|
-
|
|
95
|
+
/* @__PURE__ */ t(B, { width: i, version: n, children: (a ?? []).length > 0 && /* @__PURE__ */ t(
|
|
96
|
+
_,
|
|
96
97
|
{
|
|
97
98
|
width: i ?? "200px",
|
|
98
|
-
onDropdownItemClick:
|
|
99
|
-
options:
|
|
99
|
+
onDropdownItemClick: C,
|
|
100
|
+
options: a,
|
|
100
101
|
parents: [],
|
|
101
|
-
allowParentSelection:
|
|
102
|
+
allowParentSelection: F,
|
|
102
103
|
maxLevels: N,
|
|
103
104
|
hideGroupLabel: O,
|
|
104
105
|
currentLevel: 1,
|
|
105
106
|
version: n
|
|
106
107
|
}
|
|
107
108
|
) }),
|
|
108
|
-
(
|
|
109
|
-
|
|
109
|
+
(a ?? []).length === 0 && /* @__PURE__ */ t(
|
|
110
|
+
H,
|
|
110
111
|
{
|
|
111
112
|
style: { width: i ?? "200px" },
|
|
112
113
|
version: n,
|
|
@@ -115,7 +116,7 @@ const U = ({
|
|
|
115
116
|
{
|
|
116
117
|
style: {
|
|
117
118
|
fontSize: "12px",
|
|
118
|
-
color:
|
|
119
|
+
color: L.content.placeholder,
|
|
119
120
|
lineHeight: "16px"
|
|
120
121
|
},
|
|
121
122
|
children: "No results found!"
|
|
@@ -128,7 +129,8 @@ const U = ({
|
|
|
128
129
|
}
|
|
129
130
|
)
|
|
130
131
|
}
|
|
131
|
-
)
|
|
132
|
+
),
|
|
133
|
+
m && /* @__PURE__ */ t(I, { children: m })
|
|
132
134
|
] })
|
|
133
135
|
}
|
|
134
136
|
)
|
|
@@ -136,6 +138,6 @@ const U = ({
|
|
|
136
138
|
);
|
|
137
139
|
};
|
|
138
140
|
export {
|
|
139
|
-
|
|
141
|
+
W as MultiLevelDropdown
|
|
140
142
|
};
|
|
141
143
|
//# 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\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":";;;;;;;;
|
|
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\tFooterContainer,\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\tfooter,\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\n\t\t\t\t\t\t{footer && <FooterContainer>{footer}</FooterContainer>}\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","footer","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","FooterContainer"],"mappings":"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"}
|
|
@@ -11,6 +11,9 @@ 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;
|
|
14
17
|
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"> & {
|
|
15
18
|
style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
|
|
16
19
|
}, {
|
|
@@ -15,26 +15,29 @@ const c = n.div`
|
|
|
15
15
|
width: 0px;
|
|
16
16
|
}
|
|
17
17
|
`, l = n.div`
|
|
18
|
+
border-top: 1px solid ${e.stroke.primary};
|
|
19
|
+
padding: 4px;
|
|
20
|
+
`, u = n.div`
|
|
18
21
|
margin-top: ${({ version: t }) => t === "3.0" ? 0 : 64}px;
|
|
19
22
|
height: ${({ version: t }) => t === "3.0" ? 236 : 200}px;
|
|
20
23
|
width: ${({ width: t }) => t || "200px"};
|
|
21
24
|
display: ${({ version: t }) => t === "3.0" ? "flex" : "block"};
|
|
22
25
|
align-items: center;
|
|
23
26
|
justify-content: center;
|
|
24
|
-
`,
|
|
27
|
+
`, g = n.div`
|
|
25
28
|
width: 100%;
|
|
26
29
|
justify-content: center;
|
|
27
30
|
cursor: pointer;
|
|
28
31
|
align-items: center;
|
|
29
32
|
justify-content: space-between;
|
|
30
33
|
margin: ${({ version: t }) => t === "3.0" ? "0" : "4px 0"};
|
|
31
|
-
`,
|
|
34
|
+
`, b = n.div`
|
|
32
35
|
z-index: 1000;
|
|
33
36
|
position: relative;
|
|
34
37
|
margin: 0px;
|
|
35
38
|
padding: 0px;
|
|
36
39
|
width: 100%;
|
|
37
|
-
`,
|
|
40
|
+
`, h = n.div`
|
|
38
41
|
position: relative;
|
|
39
42
|
padding: ${({ version: t }) => t === "3.0" ? "0px" : "1px 4px"};
|
|
40
43
|
cursor: pointer;
|
|
@@ -43,7 +46,7 @@ const c = n.div`
|
|
|
43
46
|
&:focus-within > .submenu {
|
|
44
47
|
display: block;
|
|
45
48
|
}
|
|
46
|
-
`,
|
|
49
|
+
`, f = n.div`
|
|
47
50
|
position: relative;
|
|
48
51
|
padding: ${({ version: t }) => t === "3.0" ? "8px" : "4px 8px"};
|
|
49
52
|
transition: background-color 0.2s;
|
|
@@ -55,8 +58,8 @@ const c = n.div`
|
|
|
55
58
|
isHovered: i,
|
|
56
59
|
isSubMenuOpen: o,
|
|
57
60
|
isDisabled: r,
|
|
58
|
-
version:
|
|
59
|
-
}) => r ? e.surface.standard : t || o ?
|
|
61
|
+
version: p
|
|
62
|
+
}) => r ? e.surface.standard : t || o ? p === "3.0" ? e.background.brandLight : e.background.positive.light : i ? e.surface.hovered : e.surface.standard};
|
|
60
63
|
color: ${({ isSelected: t, isSubMenuOpen: i, version: o }) => t || i ? o === "3.0" ? e.text.primary : e.content.positive : e.content.primary};
|
|
61
64
|
display: flex;
|
|
62
65
|
align-items: center;
|
|
@@ -65,15 +68,15 @@ const c = n.div`
|
|
|
65
68
|
&:hover {
|
|
66
69
|
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};
|
|
67
70
|
}
|
|
68
|
-
`,
|
|
71
|
+
`, m = n.div`
|
|
69
72
|
display: flex;
|
|
70
73
|
align-items: center;
|
|
71
74
|
gap: 8px;
|
|
72
|
-
`,
|
|
75
|
+
`, a = n.div`
|
|
73
76
|
z-index: 1001;
|
|
74
77
|
position: fixed;
|
|
75
78
|
border-left: 4px solid transparent;
|
|
76
|
-
`,
|
|
79
|
+
`, v = n.div`
|
|
77
80
|
margin: 4px;
|
|
78
81
|
background-color: ${e.surface.standard};
|
|
79
82
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
@@ -86,41 +89,42 @@ const c = n.div`
|
|
|
86
89
|
&::-webkit-scrollbar {
|
|
87
90
|
display: none;
|
|
88
91
|
}
|
|
89
|
-
`,
|
|
92
|
+
`, $ = n.div`
|
|
90
93
|
width: 16px;
|
|
91
94
|
height: 16px;
|
|
92
95
|
display: flex;
|
|
93
96
|
align-items: center;
|
|
94
97
|
justify-content: center;
|
|
95
98
|
margin-right: 4px;
|
|
96
|
-
`,
|
|
99
|
+
`, w = n.div`
|
|
97
100
|
width: 16px;
|
|
98
101
|
height: 16px;
|
|
99
102
|
display: flex;
|
|
100
103
|
align-items: center;
|
|
101
104
|
justify-content: center;
|
|
102
105
|
margin-left: 4px;
|
|
103
|
-
`,
|
|
106
|
+
`, y = n.div`
|
|
104
107
|
width: ${(t) => t.width};
|
|
105
|
-
`,
|
|
108
|
+
`, k = n(a)`
|
|
106
109
|
width: ${(t) => t.width};
|
|
107
110
|
top: ${(t) => t.top}px;
|
|
108
111
|
left: ${(t) => t.left}px;
|
|
109
112
|
`;
|
|
110
113
|
export {
|
|
111
|
-
|
|
114
|
+
m as ContentContainer,
|
|
112
115
|
c as DropdownContainer,
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
116
|
+
l as FooterContainer,
|
|
117
|
+
g as GroupedMenuListContainer,
|
|
118
|
+
$ as LeadingIconContainer,
|
|
119
|
+
f as MenuItemContainer,
|
|
120
|
+
h as MenuItemWrapper,
|
|
121
|
+
u as NoResultsContainer,
|
|
118
122
|
x as OptionsContainer,
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
123
|
+
b as StyledMenuList,
|
|
124
|
+
k as StyledSubMenuWrapper,
|
|
125
|
+
y as SubMenuContainer,
|
|
126
|
+
v as SubMenuListContainer,
|
|
127
|
+
a as SubMenuWrapper,
|
|
128
|
+
w as TrailingIconContainer
|
|
125
129
|
};
|
|
126
130
|
//# 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\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","
|
|
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\tpadding: 4px;\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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"}
|
|
@@ -9,6 +9,11 @@ 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;
|
|
12
17
|
onDropdownOutsideClick?: (isOutsideClick: any) => void;
|
|
13
18
|
onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
14
19
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e from "styled-components";
|
|
2
2
|
import { COLORS as t } from "../../constants/Theme.js";
|
|
3
|
-
import { ComponentZindex as
|
|
4
|
-
const n =
|
|
3
|
+
import { ComponentZindex as i } from "../../constants/zindex.js";
|
|
4
|
+
const n = e.div`
|
|
5
5
|
--toastify-color-light: #fff;
|
|
6
6
|
--toastify-color-dark: #121212;
|
|
7
7
|
--toastify-text-color-success: ${t.content.primary};
|
|
@@ -17,7 +17,7 @@ const n = i.div`
|
|
|
17
17
|
--toastify-toast-min-height: ${(o) => o.height || (o.isSubTextIncluded ? "70px" : "56px")};
|
|
18
18
|
--toastify-toast-max-height: ${(o) => o.height || "fit-content"};
|
|
19
19
|
font-family: inherit;
|
|
20
|
-
z-index: ${(o) => o.zIndex ||
|
|
20
|
+
z-index: ${(o) => o.zIndex || i.TOASTER};
|
|
21
21
|
|
|
22
22
|
.custom-position {
|
|
23
23
|
position: relative;
|
|
@@ -28,46 +28,28 @@ const n = i.div`
|
|
|
28
28
|
max-width: 90vw;
|
|
29
29
|
overflow: visible;
|
|
30
30
|
|
|
31
|
+
/* On mobile every position collapses to the same centred, near-full-width
|
|
32
|
+
container: a 16px gutter on each side. The translate does the centring, so
|
|
33
|
+
there must be no horizontal margin or it lands off-centre again. */
|
|
31
34
|
@media (max-width: 768px) {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
/* Mobile positioning - only for top-right (default) */
|
|
38
|
-
.Toastify__toast-container--top-right {
|
|
39
|
-
@media (max-width: 768px) {
|
|
40
|
-
top: 2%;
|
|
41
|
-
left: 35%;
|
|
42
|
-
transform: translateX(-50%);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
/* Mobile positioning - for top-left */
|
|
47
|
-
.Toastify__toast-container--top-left {
|
|
48
|
-
@media (max-width: 768px) {
|
|
49
|
-
top: 2%;
|
|
35
|
+
width: calc(100vw - 32px);
|
|
36
|
+
max-width: calc(100vw - 32px);
|
|
37
|
+
margin: 0;
|
|
50
38
|
left: 50%;
|
|
39
|
+
right: auto;
|
|
51
40
|
transform: translateX(-50%);
|
|
41
|
+
align-items: center;
|
|
52
42
|
}
|
|
53
43
|
}
|
|
54
44
|
|
|
55
|
-
/* Mobile positioning -
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
.Toastify__toast-container--
|
|
59
|
-
|
|
60
|
-
left: 50%;
|
|
61
|
-
transform: translateX(-50%);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
/* Mobile positioning - for top-center */
|
|
45
|
+
/* Mobile positioning - top positions sit just below the viewport top. Horizontal
|
|
46
|
+
centring comes from the container rule above; redeclaring left/transform here
|
|
47
|
+
would override it, since these selectors are equally specific but later. */
|
|
48
|
+
.Toastify__toast-container--top-right,
|
|
49
|
+
.Toastify__toast-container--top-left,
|
|
66
50
|
.Toastify__toast-container--top-center {
|
|
67
51
|
@media (max-width: 768px) {
|
|
68
52
|
top: 2%;
|
|
69
|
-
left: 50%;
|
|
70
|
-
transform: translateX(-50%);
|
|
71
53
|
}
|
|
72
54
|
}
|
|
73
55
|
|
|
@@ -102,8 +84,11 @@ const n = i.div`
|
|
|
102
84
|
overflow: hidden;
|
|
103
85
|
|
|
104
86
|
@media (max-width: 768px) {
|
|
105
|
-
|
|
106
|
-
|
|
87
|
+
/* Fill the container rather than sizing itself, so the toast keeps the
|
|
88
|
+
container's 16px gutters instead of overflowing or under-filling. */
|
|
89
|
+
width: 100%;
|
|
90
|
+
min-width: 0;
|
|
91
|
+
max-width: 100%;
|
|
107
92
|
padding: ${(o) => o.isSubTextIncluded ? "16px 16px" : "12px 16px"};
|
|
108
93
|
}
|
|
109
94
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.styled.js","sources":["../../../../src/components/toaster/Toaster.styled.tsx"],"sourcesContent":["import { TypeOptions } from 'react-toastify';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\n\nexport const ToasterStyled = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tzIndex?: number;\n\tisSubTextIncluded?: boolean;\n\ttype?: TypeOptions;\n}>`\n\t--toastify-color-light: #fff;\n\t--toastify-color-dark: #121212;\n\t--toastify-text-color-success: ${COLORS.content.primary};\n\t--toastify-text-color-error: ${COLORS.content.primary};\n\t--toastify-text-color-warning: ${COLORS.content.primary};\n\t--toastify-text-color-info: ${COLORS.content.primary};\n\t--toastify-color-info: ${COLORS.background.brandLight};\n\t--toastify-color-success: ${COLORS.background.positive.light};\n\t--toastify-color-error: ${COLORS.background.negative.light};\n\t--toastify-color-warning: ${COLORS.background.warning.light};\n\t--toastify-text-color-light: ${COLORS.content.primary};\n\t--toastify-toast-width: fit-content;\n\t--toastify-toast-min-height: ${(props) =>\n\t\tprops.height || (props.isSubTextIncluded ? '70px' : '56px')};\n\t--toastify-toast-max-height: ${(props) => props.height || 'fit-content'};\n\tfont-family: inherit;\n\tz-index: ${(props) => props.zIndex || ComponentZindex.TOASTER};\n\n\t.custom-position {\n\t\tposition: relative;\n\t}\n\t.Toastify__toast-container {\n\t\tpadding: 0;\n\t\twidth: auto;\n\t\tmax-width: 90vw;\n\t\toverflow: visible;\n\n\t\t
|
|
1
|
+
{"version":3,"file":"Toaster.styled.js","sources":["../../../../src/components/toaster/Toaster.styled.tsx"],"sourcesContent":["import { TypeOptions } from 'react-toastify';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\n\nexport const ToasterStyled = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tzIndex?: number;\n\tisSubTextIncluded?: boolean;\n\ttype?: TypeOptions;\n}>`\n\t--toastify-color-light: #fff;\n\t--toastify-color-dark: #121212;\n\t--toastify-text-color-success: ${COLORS.content.primary};\n\t--toastify-text-color-error: ${COLORS.content.primary};\n\t--toastify-text-color-warning: ${COLORS.content.primary};\n\t--toastify-text-color-info: ${COLORS.content.primary};\n\t--toastify-color-info: ${COLORS.background.brandLight};\n\t--toastify-color-success: ${COLORS.background.positive.light};\n\t--toastify-color-error: ${COLORS.background.negative.light};\n\t--toastify-color-warning: ${COLORS.background.warning.light};\n\t--toastify-text-color-light: ${COLORS.content.primary};\n\t--toastify-toast-width: fit-content;\n\t--toastify-toast-min-height: ${(props) =>\n\t\tprops.height || (props.isSubTextIncluded ? '70px' : '56px')};\n\t--toastify-toast-max-height: ${(props) => props.height || 'fit-content'};\n\tfont-family: inherit;\n\tz-index: ${(props) => props.zIndex || ComponentZindex.TOASTER};\n\n\t.custom-position {\n\t\tposition: relative;\n\t}\n\t.Toastify__toast-container {\n\t\tpadding: 0;\n\t\twidth: auto;\n\t\tmax-width: 90vw;\n\t\toverflow: visible;\n\n\t\t/* On mobile every position collapses to the same centred, near-full-width\n\t\t container: a 16px gutter on each side. The translate does the centring, so\n\t\t there must be no horizontal margin or it lands off-centre again. */\n\t\t@media (max-width: 768px) {\n\t\t\twidth: calc(100vw - 32px);\n\t\t\tmax-width: calc(100vw - 32px);\n\t\t\tmargin: 0;\n\t\t\tleft: 50%;\n\t\t\tright: auto;\n\t\t\ttransform: translateX(-50%);\n\t\t\talign-items: center;\n\t\t}\n\t}\n\n\t/* Mobile positioning - top positions sit just below the viewport top. Horizontal\n\t centring comes from the container rule above; redeclaring left/transform here\n\t would override it, since these selectors are equally specific but later. */\n\t.Toastify__toast-container--top-right,\n\t.Toastify__toast-container--top-left,\n\t.Toastify__toast-container--top-center {\n\t\t@media (max-width: 768px) {\n\t\t\ttop: 2%;\n\t\t}\n\t}\n\n\t.Toastify__toast--success {\n\t\tborder: 1px solid ${COLORS.stroke.positive.lightAlt};\n\t}\n\n\t.Toastify__toast--info {\n\t\tborder: 1px solid ${COLORS.stroke.brandLightAlt};\n\t}\n\n\t.Toastify__toast--default {\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t}\n\n\t.Toastify__toast--error {\n\t\tborder: 1px solid ${COLORS.stroke.negative.lightAlt};\n\t}\n\n\t.Toastify__toast--warning {\n\t\tborder: 1px solid ${COLORS.stroke.warning.lightAlt};\n\t}\n\n\t.Toastify__toast {\n\t\tpadding: ${(props) => (props.isSubTextIncluded ? '16px 8px' : '12px 8px')};\n\t\tmax-width: ${(props) => props.width || '600px'};\n\t\tmin-width: 320px;\n\t\tborder-radius: 8px;\n\t\tword-wrap: break-word;\n\t\toverflow-wrap: break-word;\n\t\t/* Clips the absolutely positioned progress bar to the 8px radius */\n\t\toverflow: hidden;\n\n\t\t@media (max-width: 768px) {\n\t\t\t/* Fill the container rather than sizing itself, so the toast keeps the\n\t\t\t container's 16px gutters instead of overflowing or under-filling. */\n\t\t\twidth: 100%;\n\t\t\tmin-width: 0;\n\t\t\tmax-width: 100%;\n\t\t\tpadding: ${(props) =>\n\t\t\t\tprops.isSubTextIncluded ? '16px 16px' : '12px 16px'};\n\t\t}\n\t}\n\n\t.Toastify__progress-bar {\n\t\theight: 4px;\n\t}\n\n\t/* NOTE: no .Toastify__close-button rule here — the close button is always a\n\t custom element passed via the closeButton option, and react-toastify\n\t clones it without adding that class. It is positioned inline instead. */\n\n\t.Toastify__toast-icon {\n\t\talign-self: center;\n\t\tmargin-inline-end: 12px;\n\t\theight: ${(props) => (props.isSubTextIncluded ? '38px' : '20px')};\n\t}\n\n\t.Toastify__toast-body {\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--default {\n\t\tbackground: ${COLORS.content.brand};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info {\n\t\tbackground: ${COLORS.content.brand};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning {\n\t\tbackground: ${COLORS.content.warning};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success {\n\t\tbackground: ${COLORS.content.positive};\n\t}\n\n\t.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {\n\t\tbackground: ${COLORS.content.negative};\n\t}\n\n\t.Toastify__toast-body > div:last-child {\n\t\tdisplay: flex;\n\t}\n\n\t.Toastify__slide-enter {\n\t\tanimation: slideIn 1s ease forwards,\n\t\t\tbounce cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s both;\n\t}\n\t.Toastify__slide-exit {\n\t\tanimation: slideOut 0.5s ease-in-out forwards;\n\t}\n\t@keyframes bounce {\n\t\t0%,\n\t\t20%,\n\t\t50%,\n\t\t80%,\n\t\t100% {\n\t\t\ttransform: translateY(0); /* Start and end at the original position */\n\t\t}\n\t\t40% {\n\t\t\ttransform: translateX(-20px); /* Bouncing up */\n\t\t}\n\t\t60% {\n\t\t\ttransform: translateX(20px); /* Small bounce before settling */\n\t\t}\n\t}\n\t@keyframes slideIn {\n\t\t0% {\n\t\t\ttransform: translateX(-100%); /* Start off-screen to the left */\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(0); /* End at the original position */\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes slideOut {\n\t\t0% {\n\t\t\ttransform: translateX(0); /* Start from the original position */\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\ttransform: translateX(100%); /* Slide out to the right */\n\t\t\topacity: 0;\n\t\t}\n\t}\n`;\n"],"names":["ToasterStyled","styled","COLORS","props","ComponentZindex"],"mappings":";;;AAKO,MAAMA,IAAgBC,EAAO;AAAA;AAAA;AAAA,kCASFC,EAAO,QAAQ,OAAO;AAAA,gCACxBA,EAAO,QAAQ,OAAO;AAAA,kCACpBA,EAAO,QAAQ,OAAO;AAAA,+BACzBA,EAAO,QAAQ,OAAO;AAAA,0BAC3BA,EAAO,WAAW,UAAU;AAAA,6BACzBA,EAAO,WAAW,SAAS,KAAK;AAAA,2BAClCA,EAAO,WAAW,SAAS,KAAK;AAAA,6BAC9BA,EAAO,WAAW,QAAQ,KAAK;AAAA,gCAC5BA,EAAO,QAAQ,OAAO;AAAA;AAAA,gCAEtB,CAACC,MAC/BA,EAAM,WAAWA,EAAM,oBAAoB,SAAS,OAAO;AAAA,gCAC7B,CAACA,MAAUA,EAAM,UAAU,aAAa;AAAA;AAAA,YAE5D,CAACA,MAAUA,EAAM,UAAUC,EAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAqCxCF,EAAO,OAAO,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA,sBAI/BA,EAAO,OAAO,aAAa;AAAA;AAAA;AAAA;AAAA,sBAI3BA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIrBA,EAAO,OAAO,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA,sBAI/BA,EAAO,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,aAIvC,CAACC,MAAWA,EAAM,oBAAoB,aAAa,UAAW;AAAA,eAC5D,CAACA,MAAUA,EAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAclC,CAACA,MACXA,EAAM,oBAAoB,cAAc,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAe3C,CAACA,MAAWA,EAAM,oBAAoB,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASlDD,EAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,gBAIpBA,EAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,gBAIpBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA,gBAItBA,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,gBAIvBA,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
|