@activecollab/components 1.0.354 → 1.0.356
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/CommandPalette/CommandPalette.styles.js +1 -1
- package/dist/cjs/components/CommandPalette/CommandPalette.styles.js.map +1 -1
- package/dist/cjs/components/CommandPalette/CommandPaletteHeader.js +1 -1
- package/dist/cjs/components/CommandPalette/CommandPaletteHeader.js.map +1 -1
- package/dist/cjs/components/Filter/Filter.js +3 -0
- package/dist/cjs/components/Filter/Filter.js.map +1 -1
- package/dist/cjs/components/Filter/StartMenu.js +7 -2
- package/dist/cjs/components/Filter/StartMenu.js.map +1 -1
- package/dist/esm/components/CommandPalette/CommandPalette.styles.d.ts.map +1 -1
- package/dist/esm/components/CommandPalette/CommandPalette.styles.js +1 -1
- package/dist/esm/components/CommandPalette/CommandPalette.styles.js.map +1 -1
- package/dist/esm/components/CommandPalette/CommandPaletteHeader.js +1 -1
- package/dist/esm/components/CommandPalette/CommandPaletteHeader.js.map +1 -1
- package/dist/esm/components/Filter/Filter.d.ts.map +1 -1
- package/dist/esm/components/Filter/Filter.js +3 -0
- package/dist/esm/components/Filter/Filter.js.map +1 -1
- package/dist/esm/components/Filter/StartMenu.d.ts.map +1 -1
- package/dist/esm/components/Filter/StartMenu.js +7 -2
- package/dist/esm/components/Filter/StartMenu.js.map +1 -1
- package/dist/index.js +12 -4
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -32,7 +32,7 @@ exports.StyledSearchIcon = StyledSearchIcon;
|
|
|
32
32
|
var StyledInput = _styledComponents.default.input.withConfig({
|
|
33
33
|
displayName: "CommandPalettestyles__StyledInput",
|
|
34
34
|
componentId: "sc-na3mad-4"
|
|
35
|
-
})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}::selection{background:var(--color-primary-300);}"], _BreakPoints.screen.sm);
|
|
35
|
+
})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type=\"search\"]::-webkit-search-decoration,&[type=\"search\"]::-webkit-search-cancel-button,&[type=\"search\"]::-webkit-search-results-button,&[type=\"search\"]::-webkit-search-results-decoration{-webkit-appearance:none;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}::selection{background:var(--color-primary-300);}"], _BreakPoints.screen.sm);
|
|
36
36
|
exports.StyledInput = StyledInput;
|
|
37
37
|
var StyledParameter = _styledComponents.default.span.withConfig({
|
|
38
38
|
displayName: "CommandPalettestyles__StyledParameter",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalette.styles.js","names":["StyledCommandPalette","styled","div","FontStyle","StyledCommandPaletteWrapper","StyledCommandPaletteHeader","StyledSearchIcon","StyledInput","input","screen","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPaletteList","ul","StyledHeading","p","StyledCommandPaletteItem","a","$selected","StyledCommandPaletteCommandItem","StyledSpinnerLoader","SpinnerLoader","StyledCommandPaletteItemLoader"],"sources":["../../../../src/components/CommandPalette/CommandPalette.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { SpinnerLoader } from \"../Loaders\";\n\nexport const StyledCommandPalette = styled.div`\n ${FontStyle}\n background-color: var(--page-paper-main);\n border-radius: 10px;\n box-sizing: border-box;\n max-width: 600px;\n\n mark {\n background-color: var(--color-primary-300);\n color: var(--color-theme-900);\n }\n`;\n\nexport const StyledCommandPaletteWrapper = styled.div`\n overflow-x: hidden;\n overflow-y: auto;\n max-height: 450px;\n\n &:not(:empty) {\n border-top: 1px solid var(--color-theme-400);\n padding-bottom: 8px;\n padding-top: 8px;\n }\n`;\n\nexport const StyledCommandPaletteHeader = styled.div`\n align-items: center;\n display: flex;\n padding-bottom: 12px;\n padding-left: 16px;\n padding-right: 16px;\n padding-top: 12px;\n`;\n\nexport const StyledSearchIcon = styled.div`\n margin-right: 8px;\n\n svg {\n vertical-align: middle;\n }\n`;\n\nexport const StyledInput = styled.input`\n all: unset;\n caret-color: var(--color-primary);\n color: var(--color-theme-900);\n width: 100%;\n\n ${screen.sm} {\n font-size: 32px;\n font-weight: 300;\n letter-spacing: 0.5px;\n line-height: 44px;\n }\n\n ::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n\n ::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ::selection {\n background: var(--color-primary-300);\n }\n`;\n\nexport const StyledParameter = styled.span`\n color: var(--color-theme-transparent-500);\n margin-right: 8px;\n flex-shrink: 0;\n\n ${screen.sm} {\n font-size: 32px;\n font-weight: 300;\n letter-spacing: 0.5px;\n line-height: 44px;\n }\n`;\n\nexport const StyledActionWrapper = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n`;\n\nexport const StyledIcon = styled.div`\n margin-right: 8px;\n\n svg {\n vertical-align: middle;\n }\n`;\n\nexport const StyledCommandPaletteList = styled.ul`\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n &:not(:first-child) {\n border-top: 1px solid var(--color-theme-400);\n }\n`;\n\nexport const StyledHeading = styled.p`\n font-size: 12px;\n margin-top: 12px;\n margin-bottom: 4px;\n font-weight: bold;\n padding-left: 18px;\n letter-spacing: 0.5px;\n color: var(--color-theme-600);\n`;\n\n// prettier-ignore\nexport const StyledCommandPaletteItem = styled.a<{$selected: boolean}>`\n align-items: center;\n cursor: pointer;\n display: flex;\n padding-bottom: 12px;\n padding-left: 18px;\n padding-right: 18px;\n padding-top: 12px;\n position: relative;\n background-color: ${({$selected}) => $selected ? \"var(--color-theme-200)\" : \"transparent\"};\n\n &:focus {\n background-color: var(--color-theme-200);\n }\n\n &::before {\n display: ${({$selected}) => $selected ? \"block\" : \"none\"};\n background-color: var(--color-primary);\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n width: 2px;\n }\n\n &:focus {\n outline: none;\n }\n`;\n\nexport const StyledCommandPaletteCommandItem = styled(StyledCommandPaletteItem)`\n user-select: none;\n`;\n\nexport const StyledSpinnerLoader = styled(SpinnerLoader)`\n margin-right: 4px;\n`;\n\nexport const StyledCommandPaletteItemLoader = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n padding-bottom: 12px;\n padding-left: 18px;\n padding-right: 18px;\n padding-top: 12px;\n pointer-events: none;\n user-select: none;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAA2C;AAEpC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,4LAC1CC,oBAAS,CAUZ;AAAC;AAEK,IAAMC,2BAA2B,GAAGH,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,yJAUpD;AAAC;AAEK,IAAMG,0BAA0B,GAAGJ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,kHAOnD;AAAC;AAEK,IAAMI,gBAAgB,GAAGL,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAAC;AAEK,IAAMK,WAAW,GAAGN,yBAAM,CAACO,KAAK;EAAA;EAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"CommandPalette.styles.js","names":["StyledCommandPalette","styled","div","FontStyle","StyledCommandPaletteWrapper","StyledCommandPaletteHeader","StyledSearchIcon","StyledInput","input","screen","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPaletteList","ul","StyledHeading","p","StyledCommandPaletteItem","a","$selected","StyledCommandPaletteCommandItem","StyledSpinnerLoader","SpinnerLoader","StyledCommandPaletteItemLoader"],"sources":["../../../../src/components/CommandPalette/CommandPalette.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { SpinnerLoader } from \"../Loaders\";\n\nexport const StyledCommandPalette = styled.div`\n ${FontStyle}\n background-color: var(--page-paper-main);\n border-radius: 10px;\n box-sizing: border-box;\n max-width: 600px;\n\n mark {\n background-color: var(--color-primary-300);\n color: var(--color-theme-900);\n }\n`;\n\nexport const StyledCommandPaletteWrapper = styled.div`\n overflow-x: hidden;\n overflow-y: auto;\n max-height: 450px;\n\n &:not(:empty) {\n border-top: 1px solid var(--color-theme-400);\n padding-bottom: 8px;\n padding-top: 8px;\n }\n`;\n\nexport const StyledCommandPaletteHeader = styled.div`\n align-items: center;\n display: flex;\n padding-bottom: 12px;\n padding-left: 16px;\n padding-right: 16px;\n padding-top: 12px;\n`;\n\nexport const StyledSearchIcon = styled.div`\n margin-right: 8px;\n\n svg {\n vertical-align: middle;\n }\n`;\n\nexport const StyledInput = styled.input`\n all: unset;\n caret-color: var(--color-primary);\n color: var(--color-theme-900);\n width: 100%;\n\n ${screen.sm} {\n font-size: 32px;\n font-weight: 300;\n letter-spacing: 0.5px;\n line-height: 44px;\n }\n\n ::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n\n ::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ::selection {\n background: var(--color-primary-300);\n }\n`;\n\nexport const StyledParameter = styled.span`\n color: var(--color-theme-transparent-500);\n margin-right: 8px;\n flex-shrink: 0;\n\n ${screen.sm} {\n font-size: 32px;\n font-weight: 300;\n letter-spacing: 0.5px;\n line-height: 44px;\n }\n`;\n\nexport const StyledActionWrapper = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n`;\n\nexport const StyledIcon = styled.div`\n margin-right: 8px;\n\n svg {\n vertical-align: middle;\n }\n`;\n\nexport const StyledCommandPaletteList = styled.ul`\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n &:not(:first-child) {\n border-top: 1px solid var(--color-theme-400);\n }\n`;\n\nexport const StyledHeading = styled.p`\n font-size: 12px;\n margin-top: 12px;\n margin-bottom: 4px;\n font-weight: bold;\n padding-left: 18px;\n letter-spacing: 0.5px;\n color: var(--color-theme-600);\n`;\n\n// prettier-ignore\nexport const StyledCommandPaletteItem = styled.a<{$selected: boolean}>`\n align-items: center;\n cursor: pointer;\n display: flex;\n padding-bottom: 12px;\n padding-left: 18px;\n padding-right: 18px;\n padding-top: 12px;\n position: relative;\n background-color: ${({$selected}) => $selected ? \"var(--color-theme-200)\" : \"transparent\"};\n\n &:focus {\n background-color: var(--color-theme-200);\n }\n\n &::before {\n display: ${({$selected}) => $selected ? \"block\" : \"none\"};\n background-color: var(--color-primary);\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n width: 2px;\n }\n\n &:focus {\n outline: none;\n }\n`;\n\nexport const StyledCommandPaletteCommandItem = styled(StyledCommandPaletteItem)`\n user-select: none;\n`;\n\nexport const StyledSpinnerLoader = styled(SpinnerLoader)`\n margin-right: 4px;\n`;\n\nexport const StyledCommandPaletteItemLoader = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n padding-bottom: 12px;\n padding-left: 18px;\n padding-right: 18px;\n padding-top: 12px;\n pointer-events: none;\n user-select: none;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAA2C;AAEpC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,4LAC1CC,oBAAS,CAUZ;AAAC;AAEK,IAAMC,2BAA2B,GAAGH,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,yJAUpD;AAAC;AAEK,IAAMG,0BAA0B,GAAGJ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,kHAOnD;AAAC;AAEK,IAAMI,gBAAgB,GAAGL,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAAC;AAEK,IAAMK,WAAW,GAAGN,yBAAM,CAACO,KAAK;EAAA;EAAA;AAAA,wnBAMnCC,mBAAM,CAACC,EAAE,CA+BZ;AAAC;AAEK,IAAMC,eAAe,GAAGV,yBAAM,CAACW,IAAI;EAAA;EAAA;AAAA,4JAKtCH,mBAAM,CAACC,EAAE,CAMZ;AAAC;AAEK,IAAMG,mBAAmB,GAAGZ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAAC;AAEK,IAAMY,UAAU,GAAGb,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAAC;AAEK,IAAMa,wBAAwB,GAAGd,yBAAM,CAACe,EAAE;EAAA;EAAA;AAAA,iIAShD;AAAC;AAEK,IAAMC,aAAa,GAAGhB,yBAAM,CAACiB,CAAC;EAAA;EAAA;AAAA,8IAQpC;;AAED;AAAA;AACO,IAAMC,wBAAwB,GAAGlB,yBAAM,CAACmB,CAAC;EAAA;EAAA;AAAA,2WAS1B;EAAA,IAAEC,SAAS,QAATA,SAAS;EAAA,OAAMA,SAAS,GAAG,wBAAwB,GAAG,aAAa;AAAA,GAO5E;EAAA,IAAEA,SAAS,SAATA,SAAS;EAAA,OAAMA,SAAS,GAAG,OAAO,GAAG,MAAM;AAAA,EAY3D;AAAC;AAEK,IAAMC,+BAA+B,GAAG,IAAArB,yBAAM,EAACkB,wBAAwB,CAAC;EAAA;EAAA;AAAA,yBAE9E;AAAC;AAEK,IAAMI,mBAAmB,GAAG,IAAAtB,yBAAM,EAACuB,sBAAa,CAAC;EAAA;EAAA;AAAA,yBAEvD;AAAC;AAEK,IAAMC,8BAA8B,GAAGxB,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,+JAUvD;AAAC"}
|
|
@@ -81,7 +81,7 @@ var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
|
|
|
81
81
|
ref: inputRef,
|
|
82
82
|
autoFocus: true,
|
|
83
83
|
placeholder: handleInputPlaceholder,
|
|
84
|
-
type: "
|
|
84
|
+
type: "search",
|
|
85
85
|
"aria-autocomplete": "list",
|
|
86
86
|
autoCapitalize: "none",
|
|
87
87
|
autoComplete: "off",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPaletteHeader.js","names":["CommandPaletteHeader","loading","commandsLength","itemsLength","inputRef","useRef","useModeContext","mode","setMode","idModeEnabled","useSelectedContext","setSelected","selected","useSearchContext","search","onChangeSearch","focusInput","current","focus","clearInput","value","useEffect","length","handleInputPlaceholder","useMemo","handleKeyDown","e","key","target","selectedItem","document","querySelectorAll","click","name","slice","inputText","startsWith","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n StyledActionWrapper,\n StyledCommandPaletteHeader,\n StyledInput,\n StyledParameter,\n StyledSearchIcon,\n StyledSpinnerLoader,\n} from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\n\nimport { useModeContext } from \"./context/ModeContext\";\nimport { useSearchContext } from \"./context/SearchContext\";\n\nexport interface CommandPaletteHeaderProps {\n loading?: boolean;\n commandsLength: number;\n itemsLength: number;\n}\n\nexport const CommandPaletteHeader = ({\n loading = false,\n commandsLength,\n itemsLength,\n}: CommandPaletteHeaderProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const { mode, setMode, idModeEnabled } = useModeContext();\n const { setSelected, selected } = useSelectedContext();\n const { search, onChangeSearch } = useSearchContext();\n\n const focusInput = () => {\n if (inputRef && inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n const clearInput = () => {\n if (inputRef && inputRef.current) {\n inputRef.current.value = \"\";\n onChangeSearch(\"\");\n }\n };\n\n useEffect(() => {\n if (search.length > 0) {\n if (itemsLength > commandsLength) {\n setSelected(commandsLength);\n } else {\n setSelected(0);\n }\n }\n }, [search, commandsLength, itemsLength, setSelected]);\n\n useEffect(() => {\n focusInput();\n }, [mode]);\n\n const handleInputPlaceholder = useMemo(() => {\n if (typeof mode === \"object\") {\n return \"Search\";\n }\n\n if (mode === \"id\") {\n return \"1\";\n }\n\n return \"Search or jump to\";\n }, [mode]);\n\n const handleKeyDown = (e) => {\n if (\n e.key === \"Backspace\" &&\n mode !== \"default\" &&\n (e.target as HTMLInputElement).value === \"\"\n ) {\n setMode(\"default\");\n clearInput();\n }\n\n if (e.key === \"Enter\") {\n const selectedItem = document.querySelectorAll(\".cp-item\")[\n selected\n ] as HTMLElement;\n\n if (itemsLength > 0) {\n selectedItem.click();\n }\n }\n };\n\n return (\n <StyledCommandPaletteHeader className=\"cp-header\">\n <StyledSearchIcon>\n <SearchLargeIcon />\n </StyledSearchIcon>\n\n {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n {typeof mode === \"object\" ? (\n <StyledParameter>\n {mode.name.length > 10 ? mode.name.slice(0, 10) + \"...\" : mode.name}/\n </StyledParameter>\n ) : null}\n\n <StyledInput\n ref={inputRef}\n autoFocus\n placeholder={handleInputPlaceholder}\n type=\"
|
|
1
|
+
{"version":3,"file":"CommandPaletteHeader.js","names":["CommandPaletteHeader","loading","commandsLength","itemsLength","inputRef","useRef","useModeContext","mode","setMode","idModeEnabled","useSelectedContext","setSelected","selected","useSearchContext","search","onChangeSearch","focusInput","current","focus","clearInput","value","useEffect","length","handleInputPlaceholder","useMemo","handleKeyDown","e","key","target","selectedItem","document","querySelectorAll","click","name","slice","inputText","startsWith","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n StyledActionWrapper,\n StyledCommandPaletteHeader,\n StyledInput,\n StyledParameter,\n StyledSearchIcon,\n StyledSpinnerLoader,\n} from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\n\nimport { useModeContext } from \"./context/ModeContext\";\nimport { useSearchContext } from \"./context/SearchContext\";\n\nexport interface CommandPaletteHeaderProps {\n loading?: boolean;\n commandsLength: number;\n itemsLength: number;\n}\n\nexport const CommandPaletteHeader = ({\n loading = false,\n commandsLength,\n itemsLength,\n}: CommandPaletteHeaderProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const { mode, setMode, idModeEnabled } = useModeContext();\n const { setSelected, selected } = useSelectedContext();\n const { search, onChangeSearch } = useSearchContext();\n\n const focusInput = () => {\n if (inputRef && inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n const clearInput = () => {\n if (inputRef && inputRef.current) {\n inputRef.current.value = \"\";\n onChangeSearch(\"\");\n }\n };\n\n useEffect(() => {\n if (search.length > 0) {\n if (itemsLength > commandsLength) {\n setSelected(commandsLength);\n } else {\n setSelected(0);\n }\n }\n }, [search, commandsLength, itemsLength, setSelected]);\n\n useEffect(() => {\n focusInput();\n }, [mode]);\n\n const handleInputPlaceholder = useMemo(() => {\n if (typeof mode === \"object\") {\n return \"Search\";\n }\n\n if (mode === \"id\") {\n return \"1\";\n }\n\n return \"Search or jump to\";\n }, [mode]);\n\n const handleKeyDown = (e) => {\n if (\n e.key === \"Backspace\" &&\n mode !== \"default\" &&\n (e.target as HTMLInputElement).value === \"\"\n ) {\n setMode(\"default\");\n clearInput();\n }\n\n if (e.key === \"Enter\") {\n const selectedItem = document.querySelectorAll(\".cp-item\")[\n selected\n ] as HTMLElement;\n\n if (itemsLength > 0) {\n selectedItem.click();\n }\n }\n };\n\n return (\n <StyledCommandPaletteHeader className=\"cp-header\">\n <StyledSearchIcon>\n <SearchLargeIcon />\n </StyledSearchIcon>\n\n {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n {typeof mode === \"object\" ? (\n <StyledParameter>\n {mode.name.length > 10 ? mode.name.slice(0, 10) + \"...\" : mode.name}/\n </StyledParameter>\n ) : null}\n\n <StyledInput\n ref={inputRef}\n autoFocus\n placeholder={handleInputPlaceholder}\n type=\"search\"\n aria-autocomplete=\"list\"\n autoCapitalize=\"none\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n role=\"combobox\"\n spellCheck={false}\n value={search}\n onKeyDown={handleKeyDown}\n onChange={(e) => {\n const inputText = e.target.value;\n\n if (\n inputText.startsWith(\"#\") &&\n idModeEnabled &&\n search.length === 0\n ) {\n setMode(\"id\");\n onChangeSearch(inputText.slice(1));\n return;\n }\n\n onChangeSearch(inputText);\n }}\n />\n\n <StyledActionWrapper>\n {loading ? (\n <StyledSpinnerLoader\n aria-busy={true}\n aria-label=\"Loading...\"\n aria-valuemax={100}\n aria-valuemin={0}\n role=\"progressbar\"\n />\n ) : null}\n\n {mode !== \"id\" &&\n typeof mode !== \"object\" &&\n idModeEnabled &&\n search.length === 0 ? (\n <Tooltip title=\"Search by ID\" placement=\"top\">\n <IconButton\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n setMode(\"id\");\n clearInput();\n }\n }}\n onClick={() => {\n setMode(\"id\");\n clearInput();\n }}\n variant=\"text gray\"\n >\n <HashtagIcon />\n </IconButton>\n </Tooltip>\n ) : null}\n\n {search.length > 0 || mode === \"id\" || typeof mode === \"object\" ? (\n <Tooltip title=\"Clear\" placement=\"top\">\n <IconButton\n variant=\"text gray\"\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n setMode(\"default\");\n clearInput();\n focusInput();\n }\n }}\n onClick={() => {\n setMode(\"default\");\n clearInput();\n focusInput();\n }}\n >\n <CloseIcon />\n </IconButton>\n </Tooltip>\n ) : null}\n </StyledActionWrapper>\n </StyledCommandPaletteHeader>\n );\n};\n\nCommandPaletteHeader.displayName = \"CommandPaletteItem\";\n"],"mappings":"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"}
|
|
@@ -127,6 +127,9 @@ var Filter = function Filter(_ref) {
|
|
|
127
127
|
var count = (0, _react.useMemo)(function () {
|
|
128
128
|
var c = 0;
|
|
129
129
|
Object.values(filter).forEach(function (entry) {
|
|
130
|
+
if (typeof entry === "string") {
|
|
131
|
+
return c += 1;
|
|
132
|
+
}
|
|
130
133
|
return c += entry.length;
|
|
131
134
|
});
|
|
132
135
|
return c;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Filter.js","names":["Filter","data","selected","label","clearAllText","resetLabel","onChange","width","noResultText","emptyFilterText","children","icon","position","disabled","useState","open","setOpen","menu","setMenu","isLeft","setIsLeft","height","setHeight","enteredMenu","setEnteredMenu","filter","setFilter","useEffect","Object","keys","length","handleOpen","useCallback","handleClose","handleHeight","element","offsetHeight","handleItemClick","value","setIndex","handleChange","selectedArray","newFilters","handleClearAll","event","stopPropagation","handleReset","count","useMemo","c","values","forEach","entry","shouldRenderSubmenus","submenu","map","index","id","title","searchPlaceholder","disableInternalSort","isSingleSelect","defaultValue","rest","Boolean"],"sources":["../../../../src/components/Filter/Filter.tsx"],"sourcesContent":["import React, {\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\nimport { Placement } from \"@popperjs/core\";\nimport { Button } from \"../Button\";\nimport { CounterButton } from \"../CounterButton\";\nimport { FilterIcon } from \"../Icons\";\nimport { IOptionGroupProps, IOptionItemProps, Select } from \"../Select\";\nimport { ResizeTransition, SlideLeftRightTransition } from \"../Transitions\";\nimport { StartMenu } from \"./StartMenu\";\nimport { StyledMenu, StyledMenuFooter } from \"./Styles\";\nimport { Submenu } from \"./Submenu\";\n\nexport type DataType = {\n id: number | string;\n title: string;\n searchPlaceholder?: string;\n disableInternalSort?: boolean;\n submenu: Array<IOptionGroupProps | IOptionItemProps>;\n isSingleSelect?: boolean;\n defaultValue?: string;\n emptyValue?: string;\n emptyAction?: (e: string | undefined) => void;\n};\n\nexport type SelectedType = {\n [key: number | string]: Array<string>;\n};\n\nexport interface FilterProps {\n /** Data rendered in submenus */\n data: Array<DataType>;\n /** Selected data inside submenus */\n selected?: SelectedType;\n /** Main filter label */\n label: string;\n /** Filter width */\n width?: number;\n /** Text displayed for the tooltip of clear all button */\n clearAllText: string;\n /** Handler for changes on the filter */\n onChange: (selected: SelectedType) => void;\n /** Label for reset button inside submenu */\n resetLabel?: string;\n /** Text to show when search results are empty */\n noResultText: string;\n /** Text to show when there are no submenus to display */\n emptyFilterText?: string;\n /** Position of the dropped menu. */\n position?: Placement;\n /** Icon of the trigger element. */\n icon?: ReactElement;\n /** Disabled state of the trigger. */\n disabled?: boolean;\n}\n\nexport const Filter: FC<FilterProps> = ({\n data,\n selected = {},\n label,\n clearAllText,\n resetLabel = \"Reset\",\n onChange,\n width = 260,\n noResultText,\n emptyFilterText,\n children,\n icon = <FilterIcon />,\n position = \"bottom-end\",\n disabled = false,\n}) => {\n const [open, setOpen] = useState(false);\n const [menu, setMenu] = useState<number | string>(\"index\");\n const [isLeft, setIsLeft] = useState(true);\n const [height, setHeight] = useState(0);\n const [enteredMenu, setEnteredMenu] = useState<number | string>(\"index\");\n const [filter, setFilter] = useState<SelectedType>(() => selected);\n\n useEffect(() => {\n if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {\n setFilter(selected);\n }\n }, [selected, filter]);\n\n const handleOpen = useCallback(() => {\n setOpen(true);\n }, []);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n setMenu(\"index\");\n setHeight(0);\n }, []);\n\n const handleHeight = useCallback((element) => {\n setHeight(element?.offsetHeight ?? 0);\n }, []);\n\n const handleItemClick = useCallback((value) => {\n setMenu(value);\n setIsLeft(true);\n }, []);\n\n const setIndex = useCallback(() => {\n setMenu(\"index\");\n setIsLeft(false);\n }, []);\n\n const handleChange = useCallback(\n (selectedArray) => {\n let newFilters = {};\n if (selectedArray.length) {\n newFilters = {\n ...filter,\n [menu]: selectedArray,\n };\n } else {\n newFilters = { ...filter };\n delete newFilters[menu];\n }\n setFilter(newFilters);\n onChange(newFilters);\n },\n [filter, menu, onChange]\n );\n\n const handleClearAll = useCallback(\n (event) => {\n event.stopPropagation();\n setFilter({});\n onChange({});\n },\n [onChange]\n );\n\n const handleReset = useCallback(() => {\n const newFilters = { ...filter };\n delete newFilters[menu];\n setFilter(newFilters);\n onChange(newFilters);\n }, [filter, menu, onChange]);\n\n const count = useMemo(() => {\n let c = 0;\n Object.values(filter).forEach((entry) => (c += entry.length));\n return c;\n }, [filter]);\n\n const shouldRenderSubmenus = useMemo(() => {\n if (data.length === 0) {\n return false;\n }\n\n for (const entry of data) {\n if (entry.submenu?.length > 1) {\n return true;\n }\n }\n\n return false;\n }, [data]);\n\n return (\n <StyledMenu\n open={open}\n onOpen={handleOpen}\n onClose={handleClose}\n position={position}\n target={\n <CounterButton\n active={open}\n label={label}\n icon={icon}\n counter={count}\n tooltipText={clearAllText}\n onClearAll={handleClearAll}\n disabled={disabled}\n />\n }\n >\n <ResizeTransition in>\n <div style={{ height, width }}>\n <SlideLeftRightTransition\n in={menu === \"index\"}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => setEnteredMenu(\"index\")}\n >\n <MoveFocusInside>\n <StartMenu\n data={data}\n selected={filter}\n style={{ width }}\n onHeightChange={setHeight}\n onItemClick={handleItemClick}\n shouldRenderSubmenus={shouldRenderSubmenus}\n emptyFilterText={emptyFilterText}\n >\n {children}\n </StartMenu>\n </MoveFocusInside>\n </SlideLeftRightTransition>\n {shouldRenderSubmenus &&\n data.map(\n (\n {\n id,\n title,\n submenu,\n searchPlaceholder,\n disableInternalSort,\n isSingleSelect,\n defaultValue,\n ...rest\n }: DataType,\n index: number\n ) => (\n <SlideLeftRightTransition\n key={`filter-submenu-${index}`}\n in={menu === id}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => setEnteredMenu(id)}\n >\n <Submenu\n title={title}\n onBack={setIndex}\n onHeightChange={setHeight}\n style={{ width }}\n indexPage={menu === \"index\"}\n >\n <MoveFocusInside disabled={enteredMenu !== id}>\n <Select\n options={submenu}\n selected={filter[id]}\n onChange={handleChange}\n type={isSingleSelect ? \"single\" : \"multiple\"}\n autoHeightMax={255}\n placeholder={searchPlaceholder}\n noResultText={noResultText}\n keepSameOptionsOrder={Boolean(submenu.length <= 7)}\n disableSearch={Boolean(submenu.length <= 7)}\n disabledInternalSort={disableInternalSort}\n defaultValue={defaultValue}\n {...rest}\n />\n {filter[id]?.length ? (\n <StyledMenuFooter>\n <Button\n variant=\"text colored\"\n size=\"small\"\n onClick={handleReset}\n >\n {resetLabel}\n </Button>\n </StyledMenuFooter>\n ) : null}\n </MoveFocusInside>\n </Submenu>\n </SlideLeftRightTransition>\n )\n )}\n </div>\n </ResizeTransition>\n </StyledMenu>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Filter.js","names":["Filter","data","selected","label","clearAllText","resetLabel","onChange","width","noResultText","emptyFilterText","children","icon","position","disabled","useState","open","setOpen","menu","setMenu","isLeft","setIsLeft","height","setHeight","enteredMenu","setEnteredMenu","filter","setFilter","useEffect","Object","keys","length","handleOpen","useCallback","handleClose","handleHeight","element","offsetHeight","handleItemClick","value","setIndex","handleChange","selectedArray","newFilters","handleClearAll","event","stopPropagation","handleReset","count","useMemo","c","values","forEach","entry","shouldRenderSubmenus","submenu","map","index","id","title","searchPlaceholder","disableInternalSort","isSingleSelect","defaultValue","rest","Boolean"],"sources":["../../../../src/components/Filter/Filter.tsx"],"sourcesContent":["import React, {\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\nimport { Placement } from \"@popperjs/core\";\nimport { Button } from \"../Button\";\nimport { CounterButton } from \"../CounterButton\";\nimport { FilterIcon } from \"../Icons\";\nimport { IOptionGroupProps, IOptionItemProps, Select } from \"../Select\";\nimport { ResizeTransition, SlideLeftRightTransition } from \"../Transitions\";\nimport { StartMenu } from \"./StartMenu\";\nimport { StyledMenu, StyledMenuFooter } from \"./Styles\";\nimport { Submenu } from \"./Submenu\";\n\nexport type DataType = {\n id: number | string;\n title: string;\n searchPlaceholder?: string;\n disableInternalSort?: boolean;\n submenu: Array<IOptionGroupProps | IOptionItemProps>;\n isSingleSelect?: boolean;\n defaultValue?: string;\n emptyValue?: string;\n emptyAction?: (e: string | undefined) => void;\n};\n\nexport type SelectedType = {\n [key: number | string]: Array<string>;\n};\n\nexport interface FilterProps {\n /** Data rendered in submenus */\n data: Array<DataType>;\n /** Selected data inside submenus */\n selected?: SelectedType;\n /** Main filter label */\n label: string;\n /** Filter width */\n width?: number;\n /** Text displayed for the tooltip of clear all button */\n clearAllText: string;\n /** Handler for changes on the filter */\n onChange: (selected: SelectedType) => void;\n /** Label for reset button inside submenu */\n resetLabel?: string;\n /** Text to show when search results are empty */\n noResultText: string;\n /** Text to show when there are no submenus to display */\n emptyFilterText?: string;\n /** Position of the dropped menu. */\n position?: Placement;\n /** Icon of the trigger element. */\n icon?: ReactElement;\n /** Disabled state of the trigger. */\n disabled?: boolean;\n}\n\nexport const Filter: FC<FilterProps> = ({\n data,\n selected = {},\n label,\n clearAllText,\n resetLabel = \"Reset\",\n onChange,\n width = 260,\n noResultText,\n emptyFilterText,\n children,\n icon = <FilterIcon />,\n position = \"bottom-end\",\n disabled = false,\n}) => {\n const [open, setOpen] = useState(false);\n const [menu, setMenu] = useState<number | string>(\"index\");\n const [isLeft, setIsLeft] = useState(true);\n const [height, setHeight] = useState(0);\n const [enteredMenu, setEnteredMenu] = useState<number | string>(\"index\");\n const [filter, setFilter] = useState<SelectedType>(() => selected);\n\n useEffect(() => {\n if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {\n setFilter(selected);\n }\n }, [selected, filter]);\n\n const handleOpen = useCallback(() => {\n setOpen(true);\n }, []);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n setMenu(\"index\");\n setHeight(0);\n }, []);\n\n const handleHeight = useCallback((element) => {\n setHeight(element?.offsetHeight ?? 0);\n }, []);\n\n const handleItemClick = useCallback((value) => {\n setMenu(value);\n setIsLeft(true);\n }, []);\n\n const setIndex = useCallback(() => {\n setMenu(\"index\");\n setIsLeft(false);\n }, []);\n\n const handleChange = useCallback(\n (selectedArray) => {\n let newFilters = {};\n if (selectedArray.length) {\n newFilters = {\n ...filter,\n [menu]: selectedArray,\n };\n } else {\n newFilters = { ...filter };\n delete newFilters[menu];\n }\n setFilter(newFilters);\n onChange(newFilters);\n },\n [filter, menu, onChange]\n );\n\n const handleClearAll = useCallback(\n (event) => {\n event.stopPropagation();\n setFilter({});\n onChange({});\n },\n [onChange]\n );\n\n const handleReset = useCallback(() => {\n const newFilters = { ...filter };\n delete newFilters[menu];\n setFilter(newFilters);\n onChange(newFilters);\n }, [filter, menu, onChange]);\n\n const count = useMemo(() => {\n let c = 0;\n\n Object.values(filter).forEach((entry) => {\n if (typeof entry === \"string\") {\n return (c += 1);\n }\n\n return (c += entry.length);\n });\n return c;\n }, [filter]);\n\n const shouldRenderSubmenus = useMemo(() => {\n if (data.length === 0) {\n return false;\n }\n\n for (const entry of data) {\n if (entry.submenu?.length > 1) {\n return true;\n }\n }\n\n return false;\n }, [data]);\n\n return (\n <StyledMenu\n open={open}\n onOpen={handleOpen}\n onClose={handleClose}\n position={position}\n target={\n <CounterButton\n active={open}\n label={label}\n icon={icon}\n counter={count}\n tooltipText={clearAllText}\n onClearAll={handleClearAll}\n disabled={disabled}\n />\n }\n >\n <ResizeTransition in>\n <div style={{ height, width }}>\n <SlideLeftRightTransition\n in={menu === \"index\"}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => setEnteredMenu(\"index\")}\n >\n <MoveFocusInside>\n <StartMenu\n data={data}\n selected={filter}\n style={{ width }}\n onHeightChange={setHeight}\n onItemClick={handleItemClick}\n shouldRenderSubmenus={shouldRenderSubmenus}\n emptyFilterText={emptyFilterText}\n >\n {children}\n </StartMenu>\n </MoveFocusInside>\n </SlideLeftRightTransition>\n {shouldRenderSubmenus &&\n data.map(\n (\n {\n id,\n title,\n submenu,\n searchPlaceholder,\n disableInternalSort,\n isSingleSelect,\n defaultValue,\n ...rest\n }: DataType,\n index: number\n ) => (\n <SlideLeftRightTransition\n key={`filter-submenu-${index}`}\n in={menu === id}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => setEnteredMenu(id)}\n >\n <Submenu\n title={title}\n onBack={setIndex}\n onHeightChange={setHeight}\n style={{ width }}\n indexPage={menu === \"index\"}\n >\n <MoveFocusInside disabled={enteredMenu !== id}>\n <Select\n options={submenu}\n selected={filter[id]}\n onChange={handleChange}\n type={isSingleSelect ? \"single\" : \"multiple\"}\n autoHeightMax={255}\n placeholder={searchPlaceholder}\n noResultText={noResultText}\n keepSameOptionsOrder={Boolean(submenu.length <= 7)}\n disableSearch={Boolean(submenu.length <= 7)}\n disabledInternalSort={disableInternalSort}\n defaultValue={defaultValue}\n {...rest}\n />\n {filter[id]?.length ? (\n <StyledMenuFooter>\n <Button\n variant=\"text colored\"\n size=\"small\"\n onClick={handleReset}\n >\n {resetLabel}\n </Button>\n </StyledMenuFooter>\n ) : null}\n </MoveFocusInside>\n </Submenu>\n </SlideLeftRightTransition>\n )\n )}\n </div>\n </ResizeTransition>\n </StyledMenu>\n );\n};\n"],"mappings":"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"}
|
|
@@ -32,11 +32,16 @@ var StartMenu = function StartMenu(_ref) {
|
|
|
32
32
|
style: style,
|
|
33
33
|
ref: ref
|
|
34
34
|
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledStartMenuList, null, shouldRenderSubmenus ? data.map(function (_ref2, index) {
|
|
35
|
-
var _selected$id;
|
|
36
35
|
var id = _ref2.id,
|
|
37
36
|
title = _ref2.title,
|
|
38
37
|
submenu = _ref2.submenu;
|
|
39
|
-
var count =
|
|
38
|
+
var count = 0;
|
|
39
|
+
if (typeof selected[id] === "string") {
|
|
40
|
+
count += 1;
|
|
41
|
+
} else {
|
|
42
|
+
var _selected$id;
|
|
43
|
+
count = (_selected$id = selected[id]) === null || _selected$id === void 0 ? void 0 : _selected$id.length;
|
|
44
|
+
}
|
|
40
45
|
if ((submenu === null || submenu === void 0 ? void 0 : submenu.length) > 1) {
|
|
41
46
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledStartMenuListItem, {
|
|
42
47
|
key: "filter-list-item-".concat(index),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StartMenu.js","names":["StartMenu","data","selected","onItemClick","style","onHeightChange","shouldRenderSubmenus","emptyFilterText","children","ref","useRef","dimensions","useResizeObserver","height","useEffect","map","index","id","title","submenu","count","length"],"sources":["../../../../src/components/Filter/StartMenu.tsx"],"sourcesContent":["import React, { FC, useRef, useEffect, HTMLAttributes } from \"react\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { DataType, SelectedType } from \"./Filter\";\nimport {\n StyledStartMenuTitle,\n StyledStartMenuDot,\n StyledStartMenuListItem,\n StyledStartMenuList,\n StyledStartMenuNoResults,\n} from \"./Styles\";\nimport { useResizeObserver } from \"../../utils\";\n\nexport interface StartMenuProps {\n data: Array<DataType>;\n selected: SelectedType;\n onItemClick: (id: number | string) => void;\n onHeightChange: (height: number) => void;\n shouldRenderSubmenus: boolean;\n emptyFilterText?: string;\n}\n\nexport const StartMenu: FC<StartMenuProps & HTMLAttributes<HTMLDivElement>> = ({\n data,\n selected,\n onItemClick,\n style,\n onHeightChange,\n shouldRenderSubmenus,\n emptyFilterText,\n children,\n}) => {\n const ref = useRef(null);\n const dimensions = useResizeObserver(ref);\n const height = dimensions?.height;\n\n useEffect(() => {\n if (height && height > 0) {\n onHeightChange(height);\n }\n }, [height, onHeightChange]);\n\n return (\n <div style={style} ref={ref}>\n <StyledStartMenuList>\n {shouldRenderSubmenus ? (\n data.map(({ id, title, submenu }, index: number) => {\n
|
|
1
|
+
{"version":3,"file":"StartMenu.js","names":["StartMenu","data","selected","onItemClick","style","onHeightChange","shouldRenderSubmenus","emptyFilterText","children","ref","useRef","dimensions","useResizeObserver","height","useEffect","map","index","id","title","submenu","count","length"],"sources":["../../../../src/components/Filter/StartMenu.tsx"],"sourcesContent":["import React, { FC, useRef, useEffect, HTMLAttributes } from \"react\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { DataType, SelectedType } from \"./Filter\";\nimport {\n StyledStartMenuTitle,\n StyledStartMenuDot,\n StyledStartMenuListItem,\n StyledStartMenuList,\n StyledStartMenuNoResults,\n} from \"./Styles\";\nimport { useResizeObserver } from \"../../utils\";\n\nexport interface StartMenuProps {\n data: Array<DataType>;\n selected: SelectedType;\n onItemClick: (id: number | string) => void;\n onHeightChange: (height: number) => void;\n shouldRenderSubmenus: boolean;\n emptyFilterText?: string;\n}\n\nexport const StartMenu: FC<StartMenuProps & HTMLAttributes<HTMLDivElement>> = ({\n data,\n selected,\n onItemClick,\n style,\n onHeightChange,\n shouldRenderSubmenus,\n emptyFilterText,\n children,\n}) => {\n const ref = useRef(null);\n const dimensions = useResizeObserver(ref);\n const height = dimensions?.height;\n\n useEffect(() => {\n if (height && height > 0) {\n onHeightChange(height);\n }\n }, [height, onHeightChange]);\n\n return (\n <div style={style} ref={ref}>\n <StyledStartMenuList>\n {shouldRenderSubmenus ? (\n data.map(({ id, title, submenu }, index: number) => {\n let count = 0;\n\n if (typeof selected[id] === \"string\") {\n count += 1;\n } else {\n count = selected[id]?.length;\n }\n\n if (submenu?.length > 1) {\n return (\n <StyledStartMenuListItem\n key={`filter-list-item-${index}`}\n onClick={() => onItemClick(id)}\n >\n <StyledStartMenuTitle>{title}</StyledStartMenuTitle>\n {count > 0 ? (\n <StyledStartMenuDot>{count}</StyledStartMenuDot>\n ) : null}\n <ArrowRightIcon />\n </StyledStartMenuListItem>\n );\n }\n })\n ) : emptyFilterText ? (\n <StyledStartMenuNoResults>{emptyFilterText}</StyledStartMenuNoResults>\n ) : null}\n {children}\n </StyledStartMenuList>\n </div>\n );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAOA;AAAgD;AAAA;AAWzC,IAAMA,SAA8D,GAAG,SAAjEA,SAA8D,OASrE;EAAA,IARJC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,cAAc,QAAdA,cAAc;IACdC,oBAAoB,QAApBA,oBAAoB;IACpBC,eAAe,QAAfA,eAAe;IACfC,QAAQ,QAARA,QAAQ;EAER,IAAMC,GAAG,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EACxB,IAAMC,UAAU,GAAG,IAAAC,wBAAiB,EAACH,GAAG,CAAC;EACzC,IAAMI,MAAM,GAAGF,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEE,MAAM;EAEjC,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAID,MAAM,IAAIA,MAAM,GAAG,CAAC,EAAE;MACxBR,cAAc,CAACQ,MAAM,CAAC;IACxB;EACF,CAAC,EAAE,CAACA,MAAM,EAAER,cAAc,CAAC,CAAC;EAE5B,oBACE;IAAK,KAAK,EAAED,KAAM;IAAC,GAAG,EAAEK;EAAI,gBAC1B,6BAAC,2BAAmB,QACjBH,oBAAoB,GACnBL,IAAI,CAACc,GAAG,CAAC,iBAAyBC,KAAa,EAAK;IAAA,IAAxCC,EAAE,SAAFA,EAAE;MAAEC,KAAK,SAALA,KAAK;MAAEC,OAAO,SAAPA,OAAO;IAC5B,IAAIC,KAAK,GAAG,CAAC;IAEb,IAAI,OAAOlB,QAAQ,CAACe,EAAE,CAAC,KAAK,QAAQ,EAAE;MACpCG,KAAK,IAAI,CAAC;IACZ,CAAC,MAAM;MAAA;MACLA,KAAK,mBAAGlB,QAAQ,CAACe,EAAE,CAAC,iDAAZ,aAAcI,MAAM;IAC9B;IAEA,IAAI,CAAAF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE,MAAM,IAAG,CAAC,EAAE;MACvB,oBACE,6BAAC,+BAAuB;QACtB,GAAG,6BAAsBL,KAAK,CAAG;QACjC,OAAO,EAAE;UAAA,OAAMb,WAAW,CAACc,EAAE,CAAC;QAAA;MAAC,gBAE/B,6BAAC,4BAAoB,QAAEC,KAAK,CAAwB,EACnDE,KAAK,GAAG,CAAC,gBACR,6BAAC,0BAAkB,QAAEA,KAAK,CAAsB,GAC9C,IAAI,eACR,6BAAC,qBAAc,OAAG,CACM;IAE9B;EACF,CAAC,CAAC,GACAb,eAAe,gBACjB,6BAAC,gCAAwB,QAAEA,eAAe,CAA4B,GACpE,IAAI,EACPC,QAAQ,CACW,CAClB;AAEV,CAAC;AAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalette.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPalette.styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,oBAAoB,oEAWhC,CAAC;AAEF,eAAO,MAAM,2BAA2B,oEAUvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oEAOtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"CommandPalette.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPalette.styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,oBAAoB,oEAWhC,CAAC;AAEF,eAAO,MAAM,2BAA2B,oEAUvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oEAOtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,sEAqCvB,CAAC;AAEF,eAAO,MAAM,eAAe,qEAW3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,oEAI/B,CAAC;AAEF,eAAO,MAAM,UAAU,oEAMtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,mEASpC,CAAC;AAEF,eAAO,MAAM,aAAa,kEAQzB,CAAC;AAGF,eAAO,MAAM,wBAAwB;eAAwB,OAAO;SA4BnE,CAAC;AAEF,eAAO,MAAM,+BAA+B;eA9BiB,OAAO;SAgCnE,CAAC;AAEF,eAAO,MAAM,mBAAmB,uzJAE/B,CAAC;AAEF,eAAO,MAAM,8BAA8B,oEAU1C,CAAC"}
|
|
@@ -21,7 +21,7 @@ export var StyledSearchIcon = styled.div.withConfig({
|
|
|
21
21
|
export var StyledInput = styled.input.withConfig({
|
|
22
22
|
displayName: "CommandPalettestyles__StyledInput",
|
|
23
23
|
componentId: "sc-na3mad-4"
|
|
24
|
-
})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}::selection{background:var(--color-primary-300);}"], screen.sm);
|
|
24
|
+
})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type=\"search\"]::-webkit-search-decoration,&[type=\"search\"]::-webkit-search-cancel-button,&[type=\"search\"]::-webkit-search-results-button,&[type=\"search\"]::-webkit-search-results-decoration{-webkit-appearance:none;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}::selection{background:var(--color-primary-300);}"], screen.sm);
|
|
25
25
|
export var StyledParameter = styled.span.withConfig({
|
|
26
26
|
displayName: "CommandPalettestyles__StyledParameter",
|
|
27
27
|
componentId: "sc-na3mad-5"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalette.styles.js","names":["styled","FontStyle","screen","SpinnerLoader","StyledCommandPalette","div","StyledCommandPaletteWrapper","StyledCommandPaletteHeader","StyledSearchIcon","StyledInput","input","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPaletteList","ul","StyledHeading","p","StyledCommandPaletteItem","a","$selected","StyledCommandPaletteCommandItem","StyledSpinnerLoader","StyledCommandPaletteItemLoader"],"sources":["../../../../src/components/CommandPalette/CommandPalette.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { SpinnerLoader } from \"../Loaders\";\n\nexport const StyledCommandPalette = styled.div`\n ${FontStyle}\n background-color: var(--page-paper-main);\n border-radius: 10px;\n box-sizing: border-box;\n max-width: 600px;\n\n mark {\n background-color: var(--color-primary-300);\n color: var(--color-theme-900);\n }\n`;\n\nexport const StyledCommandPaletteWrapper = styled.div`\n overflow-x: hidden;\n overflow-y: auto;\n max-height: 450px;\n\n &:not(:empty) {\n border-top: 1px solid var(--color-theme-400);\n padding-bottom: 8px;\n padding-top: 8px;\n }\n`;\n\nexport const StyledCommandPaletteHeader = styled.div`\n align-items: center;\n display: flex;\n padding-bottom: 12px;\n padding-left: 16px;\n padding-right: 16px;\n padding-top: 12px;\n`;\n\nexport const StyledSearchIcon = styled.div`\n margin-right: 8px;\n\n svg {\n vertical-align: middle;\n }\n`;\n\nexport const StyledInput = styled.input`\n all: unset;\n caret-color: var(--color-primary);\n color: var(--color-theme-900);\n width: 100%;\n\n ${screen.sm} {\n font-size: 32px;\n font-weight: 300;\n letter-spacing: 0.5px;\n line-height: 44px;\n }\n\n ::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n\n ::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ::selection {\n background: var(--color-primary-300);\n }\n`;\n\nexport const StyledParameter = styled.span`\n color: var(--color-theme-transparent-500);\n margin-right: 8px;\n flex-shrink: 0;\n\n ${screen.sm} {\n font-size: 32px;\n font-weight: 300;\n letter-spacing: 0.5px;\n line-height: 44px;\n }\n`;\n\nexport const StyledActionWrapper = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n`;\n\nexport const StyledIcon = styled.div`\n margin-right: 8px;\n\n svg {\n vertical-align: middle;\n }\n`;\n\nexport const StyledCommandPaletteList = styled.ul`\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n &:not(:first-child) {\n border-top: 1px solid var(--color-theme-400);\n }\n`;\n\nexport const StyledHeading = styled.p`\n font-size: 12px;\n margin-top: 12px;\n margin-bottom: 4px;\n font-weight: bold;\n padding-left: 18px;\n letter-spacing: 0.5px;\n color: var(--color-theme-600);\n`;\n\n// prettier-ignore\nexport const StyledCommandPaletteItem = styled.a<{$selected: boolean}>`\n align-items: center;\n cursor: pointer;\n display: flex;\n padding-bottom: 12px;\n padding-left: 18px;\n padding-right: 18px;\n padding-top: 12px;\n position: relative;\n background-color: ${({$selected}) => $selected ? \"var(--color-theme-200)\" : \"transparent\"};\n\n &:focus {\n background-color: var(--color-theme-200);\n }\n\n &::before {\n display: ${({$selected}) => $selected ? \"block\" : \"none\"};\n background-color: var(--color-primary);\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n width: 2px;\n }\n\n &:focus {\n outline: none;\n }\n`;\n\nexport const StyledCommandPaletteCommandItem = styled(StyledCommandPaletteItem)`\n user-select: none;\n`;\n\nexport const StyledSpinnerLoader = styled(SpinnerLoader)`\n margin-right: 4px;\n`;\n\nexport const StyledCommandPaletteItemLoader = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n padding-bottom: 12px;\n padding-left: 18px;\n padding-right: 18px;\n padding-top: 12px;\n pointer-events: none;\n user-select: none;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,aAAa,QAAQ,YAAY;AAE1C,OAAO,IAAMC,oBAAoB,GAAGJ,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,4LAC1CJ,SAAS,CAUZ;AAED,OAAO,IAAMK,2BAA2B,GAAGN,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,yJAUpD;AAED,OAAO,IAAME,0BAA0B,GAAGP,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,kHAOnD;AAED,OAAO,IAAMG,gBAAgB,GAAGR,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAED,OAAO,IAAMI,WAAW,GAAGT,MAAM,CAACU,KAAK;EAAA;EAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"CommandPalette.styles.js","names":["styled","FontStyle","screen","SpinnerLoader","StyledCommandPalette","div","StyledCommandPaletteWrapper","StyledCommandPaletteHeader","StyledSearchIcon","StyledInput","input","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPaletteList","ul","StyledHeading","p","StyledCommandPaletteItem","a","$selected","StyledCommandPaletteCommandItem","StyledSpinnerLoader","StyledCommandPaletteItemLoader"],"sources":["../../../../src/components/CommandPalette/CommandPalette.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { SpinnerLoader } from \"../Loaders\";\n\nexport const StyledCommandPalette = styled.div`\n ${FontStyle}\n background-color: var(--page-paper-main);\n border-radius: 10px;\n box-sizing: border-box;\n max-width: 600px;\n\n mark {\n background-color: var(--color-primary-300);\n color: var(--color-theme-900);\n }\n`;\n\nexport const StyledCommandPaletteWrapper = styled.div`\n overflow-x: hidden;\n overflow-y: auto;\n max-height: 450px;\n\n &:not(:empty) {\n border-top: 1px solid var(--color-theme-400);\n padding-bottom: 8px;\n padding-top: 8px;\n }\n`;\n\nexport const StyledCommandPaletteHeader = styled.div`\n align-items: center;\n display: flex;\n padding-bottom: 12px;\n padding-left: 16px;\n padding-right: 16px;\n padding-top: 12px;\n`;\n\nexport const StyledSearchIcon = styled.div`\n margin-right: 8px;\n\n svg {\n vertical-align: middle;\n }\n`;\n\nexport const StyledInput = styled.input`\n all: unset;\n caret-color: var(--color-primary);\n color: var(--color-theme-900);\n width: 100%;\n\n ${screen.sm} {\n font-size: 32px;\n font-weight: 300;\n letter-spacing: 0.5px;\n line-height: 44px;\n }\n\n ::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n\n ::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ::selection {\n background: var(--color-primary-300);\n }\n`;\n\nexport const StyledParameter = styled.span`\n color: var(--color-theme-transparent-500);\n margin-right: 8px;\n flex-shrink: 0;\n\n ${screen.sm} {\n font-size: 32px;\n font-weight: 300;\n letter-spacing: 0.5px;\n line-height: 44px;\n }\n`;\n\nexport const StyledActionWrapper = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n`;\n\nexport const StyledIcon = styled.div`\n margin-right: 8px;\n\n svg {\n vertical-align: middle;\n }\n`;\n\nexport const StyledCommandPaletteList = styled.ul`\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n &:not(:first-child) {\n border-top: 1px solid var(--color-theme-400);\n }\n`;\n\nexport const StyledHeading = styled.p`\n font-size: 12px;\n margin-top: 12px;\n margin-bottom: 4px;\n font-weight: bold;\n padding-left: 18px;\n letter-spacing: 0.5px;\n color: var(--color-theme-600);\n`;\n\n// prettier-ignore\nexport const StyledCommandPaletteItem = styled.a<{$selected: boolean}>`\n align-items: center;\n cursor: pointer;\n display: flex;\n padding-bottom: 12px;\n padding-left: 18px;\n padding-right: 18px;\n padding-top: 12px;\n position: relative;\n background-color: ${({$selected}) => $selected ? \"var(--color-theme-200)\" : \"transparent\"};\n\n &:focus {\n background-color: var(--color-theme-200);\n }\n\n &::before {\n display: ${({$selected}) => $selected ? \"block\" : \"none\"};\n background-color: var(--color-primary);\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n width: 2px;\n }\n\n &:focus {\n outline: none;\n }\n`;\n\nexport const StyledCommandPaletteCommandItem = styled(StyledCommandPaletteItem)`\n user-select: none;\n`;\n\nexport const StyledSpinnerLoader = styled(SpinnerLoader)`\n margin-right: 4px;\n`;\n\nexport const StyledCommandPaletteItemLoader = styled.div`\n align-items: center;\n display: flex;\n gap: 8px;\n padding-bottom: 12px;\n padding-left: 18px;\n padding-right: 18px;\n padding-top: 12px;\n pointer-events: none;\n user-select: none;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,aAAa,QAAQ,YAAY;AAE1C,OAAO,IAAMC,oBAAoB,GAAGJ,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,4LAC1CJ,SAAS,CAUZ;AAED,OAAO,IAAMK,2BAA2B,GAAGN,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,yJAUpD;AAED,OAAO,IAAME,0BAA0B,GAAGP,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,kHAOnD;AAED,OAAO,IAAMG,gBAAgB,GAAGR,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAED,OAAO,IAAMI,WAAW,GAAGT,MAAM,CAACU,KAAK;EAAA;EAAA;AAAA,wnBAMnCR,MAAM,CAACS,EAAE,CA+BZ;AAED,OAAO,IAAMC,eAAe,GAAGZ,MAAM,CAACa,IAAI;EAAA;EAAA;AAAA,4JAKtCX,MAAM,CAACS,EAAE,CAMZ;AAED,OAAO,IAAMG,mBAAmB,GAAGd,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAED,OAAO,IAAMU,UAAU,GAAGf,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAED,OAAO,IAAMW,wBAAwB,GAAGhB,MAAM,CAACiB,EAAE;EAAA;EAAA;AAAA,iIAShD;AAED,OAAO,IAAMC,aAAa,GAAGlB,MAAM,CAACmB,CAAC;EAAA;EAAA;AAAA,8IAQpC;;AAED;AACA,OAAO,IAAMC,wBAAwB,GAAGpB,MAAM,CAACqB,CAAC;EAAA;EAAA;AAAA,2WAS1B;EAAA,IAAEC,SAAS,QAATA,SAAS;EAAA,OAAMA,SAAS,GAAG,wBAAwB,GAAG,aAAa;AAAA,GAO5E;EAAA,IAAEA,SAAS,SAATA,SAAS;EAAA,OAAMA,SAAS,GAAG,OAAO,GAAG,MAAM;AAAA,EAY3D;AAED,OAAO,IAAMC,+BAA+B,GAAGvB,MAAM,CAACoB,wBAAwB,CAAC;EAAA;EAAA;AAAA,yBAE9E;AAED,OAAO,IAAMI,mBAAmB,GAAGxB,MAAM,CAACG,aAAa,CAAC;EAAA;EAAA;AAAA,yBAEvD;AAED,OAAO,IAAMsB,8BAA8B,GAAGzB,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,+JAUvD"}
|
|
@@ -72,7 +72,7 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
|
|
|
72
72
|
ref: inputRef,
|
|
73
73
|
autoFocus: true,
|
|
74
74
|
placeholder: handleInputPlaceholder,
|
|
75
|
-
type: "
|
|
75
|
+
type: "search",
|
|
76
76
|
"aria-autocomplete": "list",
|
|
77
77
|
autoCapitalize: "none",
|
|
78
78
|
autoComplete: "off",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPaletteHeader.js","names":["React","useEffect","useMemo","useRef","IconButton","CloseIcon","HashtagIcon","SearchLargeIcon","Tooltip","StyledActionWrapper","StyledCommandPaletteHeader","StyledInput","StyledParameter","StyledSearchIcon","StyledSpinnerLoader","useSelectedContext","useModeContext","useSearchContext","CommandPaletteHeader","loading","commandsLength","itemsLength","inputRef","mode","setMode","idModeEnabled","setSelected","selected","search","onChangeSearch","focusInput","current","focus","clearInput","value","length","handleInputPlaceholder","handleKeyDown","e","key","target","selectedItem","document","querySelectorAll","click","name","slice","inputText","startsWith","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n StyledActionWrapper,\n StyledCommandPaletteHeader,\n StyledInput,\n StyledParameter,\n StyledSearchIcon,\n StyledSpinnerLoader,\n} from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\n\nimport { useModeContext } from \"./context/ModeContext\";\nimport { useSearchContext } from \"./context/SearchContext\";\n\nexport interface CommandPaletteHeaderProps {\n loading?: boolean;\n commandsLength: number;\n itemsLength: number;\n}\n\nexport const CommandPaletteHeader = ({\n loading = false,\n commandsLength,\n itemsLength,\n}: CommandPaletteHeaderProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const { mode, setMode, idModeEnabled } = useModeContext();\n const { setSelected, selected } = useSelectedContext();\n const { search, onChangeSearch } = useSearchContext();\n\n const focusInput = () => {\n if (inputRef && inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n const clearInput = () => {\n if (inputRef && inputRef.current) {\n inputRef.current.value = \"\";\n onChangeSearch(\"\");\n }\n };\n\n useEffect(() => {\n if (search.length > 0) {\n if (itemsLength > commandsLength) {\n setSelected(commandsLength);\n } else {\n setSelected(0);\n }\n }\n }, [search, commandsLength, itemsLength, setSelected]);\n\n useEffect(() => {\n focusInput();\n }, [mode]);\n\n const handleInputPlaceholder = useMemo(() => {\n if (typeof mode === \"object\") {\n return \"Search\";\n }\n\n if (mode === \"id\") {\n return \"1\";\n }\n\n return \"Search or jump to\";\n }, [mode]);\n\n const handleKeyDown = (e) => {\n if (\n e.key === \"Backspace\" &&\n mode !== \"default\" &&\n (e.target as HTMLInputElement).value === \"\"\n ) {\n setMode(\"default\");\n clearInput();\n }\n\n if (e.key === \"Enter\") {\n const selectedItem = document.querySelectorAll(\".cp-item\")[\n selected\n ] as HTMLElement;\n\n if (itemsLength > 0) {\n selectedItem.click();\n }\n }\n };\n\n return (\n <StyledCommandPaletteHeader className=\"cp-header\">\n <StyledSearchIcon>\n <SearchLargeIcon />\n </StyledSearchIcon>\n\n {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n {typeof mode === \"object\" ? (\n <StyledParameter>\n {mode.name.length > 10 ? mode.name.slice(0, 10) + \"...\" : mode.name}/\n </StyledParameter>\n ) : null}\n\n <StyledInput\n ref={inputRef}\n autoFocus\n placeholder={handleInputPlaceholder}\n type=\"text\"\n aria-autocomplete=\"list\"\n autoCapitalize=\"none\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n role=\"combobox\"\n spellCheck={false}\n value={search}\n onKeyDown={handleKeyDown}\n onChange={(e) => {\n const inputText = e.target.value;\n\n if (\n inputText.startsWith(\"#\") &&\n idModeEnabled &&\n search.length === 0\n ) {\n setMode(\"id\");\n onChangeSearch(inputText.slice(1));\n return;\n }\n\n onChangeSearch(inputText);\n }}\n />\n\n <StyledActionWrapper>\n {loading ? (\n <StyledSpinnerLoader\n aria-busy={true}\n aria-label=\"Loading...\"\n aria-valuemax={100}\n aria-valuemin={0}\n role=\"progressbar\"\n />\n ) : null}\n\n {mode !== \"id\" &&\n typeof mode !== \"object\" &&\n idModeEnabled &&\n search.length === 0 ? (\n <Tooltip title=\"Search by ID\" placement=\"top\">\n <IconButton\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n setMode(\"id\");\n clearInput();\n }\n }}\n onClick={() => {\n setMode(\"id\");\n clearInput();\n }}\n variant=\"text gray\"\n >\n <HashtagIcon />\n </IconButton>\n </Tooltip>\n ) : null}\n\n {search.length > 0 || mode === \"id\" || typeof mode === \"object\" ? (\n <Tooltip title=\"Clear\" placement=\"top\">\n <IconButton\n variant=\"text gray\"\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n setMode(\"default\");\n clearInput();\n focusInput();\n }\n }}\n onClick={() => {\n setMode(\"default\");\n clearInput();\n focusInput();\n }}\n >\n <CloseIcon />\n </IconButton>\n </Tooltip>\n ) : null}\n </StyledActionWrapper>\n </StyledCommandPaletteHeader>\n );\n};\n\nCommandPaletteHeader.displayName = \"CommandPaletteItem\";\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CommandPaletteHeader.js","names":["React","useEffect","useMemo","useRef","IconButton","CloseIcon","HashtagIcon","SearchLargeIcon","Tooltip","StyledActionWrapper","StyledCommandPaletteHeader","StyledInput","StyledParameter","StyledSearchIcon","StyledSpinnerLoader","useSelectedContext","useModeContext","useSearchContext","CommandPaletteHeader","loading","commandsLength","itemsLength","inputRef","mode","setMode","idModeEnabled","setSelected","selected","search","onChangeSearch","focusInput","current","focus","clearInput","value","length","handleInputPlaceholder","handleKeyDown","e","key","target","selectedItem","document","querySelectorAll","click","name","slice","inputText","startsWith","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n StyledActionWrapper,\n StyledCommandPaletteHeader,\n StyledInput,\n StyledParameter,\n StyledSearchIcon,\n StyledSpinnerLoader,\n} from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\n\nimport { useModeContext } from \"./context/ModeContext\";\nimport { useSearchContext } from \"./context/SearchContext\";\n\nexport interface CommandPaletteHeaderProps {\n loading?: boolean;\n commandsLength: number;\n itemsLength: number;\n}\n\nexport const CommandPaletteHeader = ({\n loading = false,\n commandsLength,\n itemsLength,\n}: CommandPaletteHeaderProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const { mode, setMode, idModeEnabled } = useModeContext();\n const { setSelected, selected } = useSelectedContext();\n const { search, onChangeSearch } = useSearchContext();\n\n const focusInput = () => {\n if (inputRef && inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n const clearInput = () => {\n if (inputRef && inputRef.current) {\n inputRef.current.value = \"\";\n onChangeSearch(\"\");\n }\n };\n\n useEffect(() => {\n if (search.length > 0) {\n if (itemsLength > commandsLength) {\n setSelected(commandsLength);\n } else {\n setSelected(0);\n }\n }\n }, [search, commandsLength, itemsLength, setSelected]);\n\n useEffect(() => {\n focusInput();\n }, [mode]);\n\n const handleInputPlaceholder = useMemo(() => {\n if (typeof mode === \"object\") {\n return \"Search\";\n }\n\n if (mode === \"id\") {\n return \"1\";\n }\n\n return \"Search or jump to\";\n }, [mode]);\n\n const handleKeyDown = (e) => {\n if (\n e.key === \"Backspace\" &&\n mode !== \"default\" &&\n (e.target as HTMLInputElement).value === \"\"\n ) {\n setMode(\"default\");\n clearInput();\n }\n\n if (e.key === \"Enter\") {\n const selectedItem = document.querySelectorAll(\".cp-item\")[\n selected\n ] as HTMLElement;\n\n if (itemsLength > 0) {\n selectedItem.click();\n }\n }\n };\n\n return (\n <StyledCommandPaletteHeader className=\"cp-header\">\n <StyledSearchIcon>\n <SearchLargeIcon />\n </StyledSearchIcon>\n\n {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n {typeof mode === \"object\" ? (\n <StyledParameter>\n {mode.name.length > 10 ? mode.name.slice(0, 10) + \"...\" : mode.name}/\n </StyledParameter>\n ) : null}\n\n <StyledInput\n ref={inputRef}\n autoFocus\n placeholder={handleInputPlaceholder}\n type=\"search\"\n aria-autocomplete=\"list\"\n autoCapitalize=\"none\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n role=\"combobox\"\n spellCheck={false}\n value={search}\n onKeyDown={handleKeyDown}\n onChange={(e) => {\n const inputText = e.target.value;\n\n if (\n inputText.startsWith(\"#\") &&\n idModeEnabled &&\n search.length === 0\n ) {\n setMode(\"id\");\n onChangeSearch(inputText.slice(1));\n return;\n }\n\n onChangeSearch(inputText);\n }}\n />\n\n <StyledActionWrapper>\n {loading ? (\n <StyledSpinnerLoader\n aria-busy={true}\n aria-label=\"Loading...\"\n aria-valuemax={100}\n aria-valuemin={0}\n role=\"progressbar\"\n />\n ) : null}\n\n {mode !== \"id\" &&\n typeof mode !== \"object\" &&\n idModeEnabled &&\n search.length === 0 ? (\n <Tooltip title=\"Search by ID\" placement=\"top\">\n <IconButton\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n setMode(\"id\");\n clearInput();\n }\n }}\n onClick={() => {\n setMode(\"id\");\n clearInput();\n }}\n variant=\"text gray\"\n >\n <HashtagIcon />\n </IconButton>\n </Tooltip>\n ) : null}\n\n {search.length > 0 || mode === \"id\" || typeof mode === \"object\" ? (\n <Tooltip title=\"Clear\" placement=\"top\">\n <IconButton\n variant=\"text gray\"\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n setMode(\"default\");\n clearInput();\n focusInput();\n }\n }}\n onClick={() => {\n setMode(\"default\");\n clearInput();\n focusInput();\n }}\n >\n <CloseIcon />\n </IconButton>\n </Tooltip>\n ) : null}\n </StyledActionWrapper>\n </StyledCommandPaletteHeader>\n );\n};\n\nCommandPaletteHeader.displayName = \"CommandPaletteItem\";\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/Filter.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,EAAE,EACF,YAAY,EAKb,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI3C,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAU,MAAM,WAAW,CAAC;AAMxE,oBAAY,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,KAAK,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,CAAC;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,gCAAgC;IAChC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACtB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,QAAQ,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,YAAY,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,
|
|
1
|
+
{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/Filter.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,EAAE,EACF,YAAY,EAKb,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI3C,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAU,MAAM,WAAW,CAAC;AAMxE,oBAAY,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,KAAK,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,CAAC;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,gCAAgC;IAChC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACtB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,QAAQ,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,YAAY,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAyNlC,CAAC"}
|
|
@@ -105,6 +105,9 @@ export var Filter = function Filter(_ref) {
|
|
|
105
105
|
var count = useMemo(function () {
|
|
106
106
|
var c = 0;
|
|
107
107
|
Object.values(filter).forEach(function (entry) {
|
|
108
|
+
if (typeof entry === "string") {
|
|
109
|
+
return c += 1;
|
|
110
|
+
}
|
|
108
111
|
return c += entry.length;
|
|
109
112
|
});
|
|
110
113
|
return c;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Filter.js","names":["React","useCallback","useEffect","useMemo","useState","MoveFocusInside","Button","CounterButton","FilterIcon","Select","ResizeTransition","SlideLeftRightTransition","StartMenu","StyledMenu","StyledMenuFooter","Submenu","Filter","data","selected","label","clearAllText","resetLabel","onChange","width","noResultText","emptyFilterText","children","icon","position","disabled","open","setOpen","menu","setMenu","isLeft","setIsLeft","height","setHeight","enteredMenu","setEnteredMenu","filter","setFilter","Object","keys","length","handleOpen","handleClose","handleHeight","element","offsetHeight","handleItemClick","value","setIndex","handleChange","selectedArray","newFilters","handleClearAll","event","stopPropagation","handleReset","count","c","values","forEach","entry","shouldRenderSubmenus","submenu","map","index","id","title","searchPlaceholder","disableInternalSort","isSingleSelect","defaultValue","rest","Boolean"],"sources":["../../../../src/components/Filter/Filter.tsx"],"sourcesContent":["import React, {\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\nimport { Placement } from \"@popperjs/core\";\nimport { Button } from \"../Button\";\nimport { CounterButton } from \"../CounterButton\";\nimport { FilterIcon } from \"../Icons\";\nimport { IOptionGroupProps, IOptionItemProps, Select } from \"../Select\";\nimport { ResizeTransition, SlideLeftRightTransition } from \"../Transitions\";\nimport { StartMenu } from \"./StartMenu\";\nimport { StyledMenu, StyledMenuFooter } from \"./Styles\";\nimport { Submenu } from \"./Submenu\";\n\nexport type DataType = {\n id: number | string;\n title: string;\n searchPlaceholder?: string;\n disableInternalSort?: boolean;\n submenu: Array<IOptionGroupProps | IOptionItemProps>;\n isSingleSelect?: boolean;\n defaultValue?: string;\n emptyValue?: string;\n emptyAction?: (e: string | undefined) => void;\n};\n\nexport type SelectedType = {\n [key: number | string]: Array<string>;\n};\n\nexport interface FilterProps {\n /** Data rendered in submenus */\n data: Array<DataType>;\n /** Selected data inside submenus */\n selected?: SelectedType;\n /** Main filter label */\n label: string;\n /** Filter width */\n width?: number;\n /** Text displayed for the tooltip of clear all button */\n clearAllText: string;\n /** Handler for changes on the filter */\n onChange: (selected: SelectedType) => void;\n /** Label for reset button inside submenu */\n resetLabel?: string;\n /** Text to show when search results are empty */\n noResultText: string;\n /** Text to show when there are no submenus to display */\n emptyFilterText?: string;\n /** Position of the dropped menu. */\n position?: Placement;\n /** Icon of the trigger element. */\n icon?: ReactElement;\n /** Disabled state of the trigger. */\n disabled?: boolean;\n}\n\nexport const Filter: FC<FilterProps> = ({\n data,\n selected = {},\n label,\n clearAllText,\n resetLabel = \"Reset\",\n onChange,\n width = 260,\n noResultText,\n emptyFilterText,\n children,\n icon = <FilterIcon />,\n position = \"bottom-end\",\n disabled = false,\n}) => {\n const [open, setOpen] = useState(false);\n const [menu, setMenu] = useState<number | string>(\"index\");\n const [isLeft, setIsLeft] = useState(true);\n const [height, setHeight] = useState(0);\n const [enteredMenu, setEnteredMenu] = useState<number | string>(\"index\");\n const [filter, setFilter] = useState<SelectedType>(() => selected);\n\n useEffect(() => {\n if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {\n setFilter(selected);\n }\n }, [selected, filter]);\n\n const handleOpen = useCallback(() => {\n setOpen(true);\n }, []);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n setMenu(\"index\");\n setHeight(0);\n }, []);\n\n const handleHeight = useCallback((element) => {\n setHeight(element?.offsetHeight ?? 0);\n }, []);\n\n const handleItemClick = useCallback((value) => {\n setMenu(value);\n setIsLeft(true);\n }, []);\n\n const setIndex = useCallback(() => {\n setMenu(\"index\");\n setIsLeft(false);\n }, []);\n\n const handleChange = useCallback(\n (selectedArray) => {\n let newFilters = {};\n if (selectedArray.length) {\n newFilters = {\n ...filter,\n [menu]: selectedArray,\n };\n } else {\n newFilters = { ...filter };\n delete newFilters[menu];\n }\n setFilter(newFilters);\n onChange(newFilters);\n },\n [filter, menu, onChange]\n );\n\n const handleClearAll = useCallback(\n (event) => {\n event.stopPropagation();\n setFilter({});\n onChange({});\n },\n [onChange]\n );\n\n const handleReset = useCallback(() => {\n const newFilters = { ...filter };\n delete newFilters[menu];\n setFilter(newFilters);\n onChange(newFilters);\n }, [filter, menu, onChange]);\n\n const count = useMemo(() => {\n let c = 0;\n Object.values(filter).forEach((entry) => (c += entry.length));\n return c;\n }, [filter]);\n\n const shouldRenderSubmenus = useMemo(() => {\n if (data.length === 0) {\n return false;\n }\n\n for (const entry of data) {\n if (entry.submenu?.length > 1) {\n return true;\n }\n }\n\n return false;\n }, [data]);\n\n return (\n <StyledMenu\n open={open}\n onOpen={handleOpen}\n onClose={handleClose}\n position={position}\n target={\n <CounterButton\n active={open}\n label={label}\n icon={icon}\n counter={count}\n tooltipText={clearAllText}\n onClearAll={handleClearAll}\n disabled={disabled}\n />\n }\n >\n <ResizeTransition in>\n <div style={{ height, width }}>\n <SlideLeftRightTransition\n in={menu === \"index\"}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => setEnteredMenu(\"index\")}\n >\n <MoveFocusInside>\n <StartMenu\n data={data}\n selected={filter}\n style={{ width }}\n onHeightChange={setHeight}\n onItemClick={handleItemClick}\n shouldRenderSubmenus={shouldRenderSubmenus}\n emptyFilterText={emptyFilterText}\n >\n {children}\n </StartMenu>\n </MoveFocusInside>\n </SlideLeftRightTransition>\n {shouldRenderSubmenus &&\n data.map(\n (\n {\n id,\n title,\n submenu,\n searchPlaceholder,\n disableInternalSort,\n isSingleSelect,\n defaultValue,\n ...rest\n }: DataType,\n index: number\n ) => (\n <SlideLeftRightTransition\n key={`filter-submenu-${index}`}\n in={menu === id}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => setEnteredMenu(id)}\n >\n <Submenu\n title={title}\n onBack={setIndex}\n onHeightChange={setHeight}\n style={{ width }}\n indexPage={menu === \"index\"}\n >\n <MoveFocusInside disabled={enteredMenu !== id}>\n <Select\n options={submenu}\n selected={filter[id]}\n onChange={handleChange}\n type={isSingleSelect ? \"single\" : \"multiple\"}\n autoHeightMax={255}\n placeholder={searchPlaceholder}\n noResultText={noResultText}\n keepSameOptionsOrder={Boolean(submenu.length <= 7)}\n disableSearch={Boolean(submenu.length <= 7)}\n disabledInternalSort={disableInternalSort}\n defaultValue={defaultValue}\n {...rest}\n />\n {filter[id]?.length ? (\n <StyledMenuFooter>\n <Button\n variant=\"text colored\"\n size=\"small\"\n onClick={handleReset}\n >\n {resetLabel}\n </Button>\n </StyledMenuFooter>\n ) : null}\n </MoveFocusInside>\n </Submenu>\n </SlideLeftRightTransition>\n )\n )}\n </div>\n </ResizeTransition>\n </StyledMenu>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Filter.js","names":["React","useCallback","useEffect","useMemo","useState","MoveFocusInside","Button","CounterButton","FilterIcon","Select","ResizeTransition","SlideLeftRightTransition","StartMenu","StyledMenu","StyledMenuFooter","Submenu","Filter","data","selected","label","clearAllText","resetLabel","onChange","width","noResultText","emptyFilterText","children","icon","position","disabled","open","setOpen","menu","setMenu","isLeft","setIsLeft","height","setHeight","enteredMenu","setEnteredMenu","filter","setFilter","Object","keys","length","handleOpen","handleClose","handleHeight","element","offsetHeight","handleItemClick","value","setIndex","handleChange","selectedArray","newFilters","handleClearAll","event","stopPropagation","handleReset","count","c","values","forEach","entry","shouldRenderSubmenus","submenu","map","index","id","title","searchPlaceholder","disableInternalSort","isSingleSelect","defaultValue","rest","Boolean"],"sources":["../../../../src/components/Filter/Filter.tsx"],"sourcesContent":["import React, {\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\nimport { Placement } from \"@popperjs/core\";\nimport { Button } from \"../Button\";\nimport { CounterButton } from \"../CounterButton\";\nimport { FilterIcon } from \"../Icons\";\nimport { IOptionGroupProps, IOptionItemProps, Select } from \"../Select\";\nimport { ResizeTransition, SlideLeftRightTransition } from \"../Transitions\";\nimport { StartMenu } from \"./StartMenu\";\nimport { StyledMenu, StyledMenuFooter } from \"./Styles\";\nimport { Submenu } from \"./Submenu\";\n\nexport type DataType = {\n id: number | string;\n title: string;\n searchPlaceholder?: string;\n disableInternalSort?: boolean;\n submenu: Array<IOptionGroupProps | IOptionItemProps>;\n isSingleSelect?: boolean;\n defaultValue?: string;\n emptyValue?: string;\n emptyAction?: (e: string | undefined) => void;\n};\n\nexport type SelectedType = {\n [key: number | string]: Array<string>;\n};\n\nexport interface FilterProps {\n /** Data rendered in submenus */\n data: Array<DataType>;\n /** Selected data inside submenus */\n selected?: SelectedType;\n /** Main filter label */\n label: string;\n /** Filter width */\n width?: number;\n /** Text displayed for the tooltip of clear all button */\n clearAllText: string;\n /** Handler for changes on the filter */\n onChange: (selected: SelectedType) => void;\n /** Label for reset button inside submenu */\n resetLabel?: string;\n /** Text to show when search results are empty */\n noResultText: string;\n /** Text to show when there are no submenus to display */\n emptyFilterText?: string;\n /** Position of the dropped menu. */\n position?: Placement;\n /** Icon of the trigger element. */\n icon?: ReactElement;\n /** Disabled state of the trigger. */\n disabled?: boolean;\n}\n\nexport const Filter: FC<FilterProps> = ({\n data,\n selected = {},\n label,\n clearAllText,\n resetLabel = \"Reset\",\n onChange,\n width = 260,\n noResultText,\n emptyFilterText,\n children,\n icon = <FilterIcon />,\n position = \"bottom-end\",\n disabled = false,\n}) => {\n const [open, setOpen] = useState(false);\n const [menu, setMenu] = useState<number | string>(\"index\");\n const [isLeft, setIsLeft] = useState(true);\n const [height, setHeight] = useState(0);\n const [enteredMenu, setEnteredMenu] = useState<number | string>(\"index\");\n const [filter, setFilter] = useState<SelectedType>(() => selected);\n\n useEffect(() => {\n if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {\n setFilter(selected);\n }\n }, [selected, filter]);\n\n const handleOpen = useCallback(() => {\n setOpen(true);\n }, []);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n setMenu(\"index\");\n setHeight(0);\n }, []);\n\n const handleHeight = useCallback((element) => {\n setHeight(element?.offsetHeight ?? 0);\n }, []);\n\n const handleItemClick = useCallback((value) => {\n setMenu(value);\n setIsLeft(true);\n }, []);\n\n const setIndex = useCallback(() => {\n setMenu(\"index\");\n setIsLeft(false);\n }, []);\n\n const handleChange = useCallback(\n (selectedArray) => {\n let newFilters = {};\n if (selectedArray.length) {\n newFilters = {\n ...filter,\n [menu]: selectedArray,\n };\n } else {\n newFilters = { ...filter };\n delete newFilters[menu];\n }\n setFilter(newFilters);\n onChange(newFilters);\n },\n [filter, menu, onChange]\n );\n\n const handleClearAll = useCallback(\n (event) => {\n event.stopPropagation();\n setFilter({});\n onChange({});\n },\n [onChange]\n );\n\n const handleReset = useCallback(() => {\n const newFilters = { ...filter };\n delete newFilters[menu];\n setFilter(newFilters);\n onChange(newFilters);\n }, [filter, menu, onChange]);\n\n const count = useMemo(() => {\n let c = 0;\n\n Object.values(filter).forEach((entry) => {\n if (typeof entry === \"string\") {\n return (c += 1);\n }\n\n return (c += entry.length);\n });\n return c;\n }, [filter]);\n\n const shouldRenderSubmenus = useMemo(() => {\n if (data.length === 0) {\n return false;\n }\n\n for (const entry of data) {\n if (entry.submenu?.length > 1) {\n return true;\n }\n }\n\n return false;\n }, [data]);\n\n return (\n <StyledMenu\n open={open}\n onOpen={handleOpen}\n onClose={handleClose}\n position={position}\n target={\n <CounterButton\n active={open}\n label={label}\n icon={icon}\n counter={count}\n tooltipText={clearAllText}\n onClearAll={handleClearAll}\n disabled={disabled}\n />\n }\n >\n <ResizeTransition in>\n <div style={{ height, width }}>\n <SlideLeftRightTransition\n in={menu === \"index\"}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => setEnteredMenu(\"index\")}\n >\n <MoveFocusInside>\n <StartMenu\n data={data}\n selected={filter}\n style={{ width }}\n onHeightChange={setHeight}\n onItemClick={handleItemClick}\n shouldRenderSubmenus={shouldRenderSubmenus}\n emptyFilterText={emptyFilterText}\n >\n {children}\n </StartMenu>\n </MoveFocusInside>\n </SlideLeftRightTransition>\n {shouldRenderSubmenus &&\n data.map(\n (\n {\n id,\n title,\n submenu,\n searchPlaceholder,\n disableInternalSort,\n isSingleSelect,\n defaultValue,\n ...rest\n }: DataType,\n index: number\n ) => (\n <SlideLeftRightTransition\n key={`filter-submenu-${index}`}\n in={menu === id}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => setEnteredMenu(id)}\n >\n <Submenu\n title={title}\n onBack={setIndex}\n onHeightChange={setHeight}\n style={{ width }}\n indexPage={menu === \"index\"}\n >\n <MoveFocusInside disabled={enteredMenu !== id}>\n <Select\n options={submenu}\n selected={filter[id]}\n onChange={handleChange}\n type={isSingleSelect ? \"single\" : \"multiple\"}\n autoHeightMax={255}\n placeholder={searchPlaceholder}\n noResultText={noResultText}\n keepSameOptionsOrder={Boolean(submenu.length <= 7)}\n disableSearch={Boolean(submenu.length <= 7)}\n disabledInternalSort={disableInternalSort}\n defaultValue={defaultValue}\n {...rest}\n />\n {filter[id]?.length ? (\n <StyledMenuFooter>\n <Button\n variant=\"text colored\"\n size=\"small\"\n onClick={handleReset}\n >\n {resetLabel}\n </Button>\n </StyledMenuFooter>\n ) : null}\n </MoveFocusInside>\n </Submenu>\n </SlideLeftRightTransition>\n )\n )}\n </div>\n </ResizeTransition>\n </StyledMenu>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StartMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/StartMenu.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAqB,cAAc,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAUlD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACtB,QAAQ,EAAE,YAAY,CAAC;IACvB,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,oBAAoB,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,
|
|
1
|
+
{"version":3,"file":"StartMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/StartMenu.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAqB,cAAc,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAUlD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACtB,QAAQ,EAAE,YAAY,CAAC;IACvB,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,oBAAoB,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,CAuDzE,CAAC"}
|
|
@@ -23,11 +23,16 @@ export var StartMenu = function StartMenu(_ref) {
|
|
|
23
23
|
style: style,
|
|
24
24
|
ref: ref
|
|
25
25
|
}, /*#__PURE__*/React.createElement(StyledStartMenuList, null, shouldRenderSubmenus ? data.map(function (_ref2, index) {
|
|
26
|
-
var _selected$id;
|
|
27
26
|
var id = _ref2.id,
|
|
28
27
|
title = _ref2.title,
|
|
29
28
|
submenu = _ref2.submenu;
|
|
30
|
-
var count =
|
|
29
|
+
var count = 0;
|
|
30
|
+
if (typeof selected[id] === "string") {
|
|
31
|
+
count += 1;
|
|
32
|
+
} else {
|
|
33
|
+
var _selected$id;
|
|
34
|
+
count = (_selected$id = selected[id]) == null ? void 0 : _selected$id.length;
|
|
35
|
+
}
|
|
31
36
|
if ((submenu == null ? void 0 : submenu.length) > 1) {
|
|
32
37
|
return /*#__PURE__*/React.createElement(StyledStartMenuListItem, {
|
|
33
38
|
key: "filter-list-item-" + index,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StartMenu.js","names":["React","useRef","useEffect","ArrowRightIcon","StyledStartMenuTitle","StyledStartMenuDot","StyledStartMenuListItem","StyledStartMenuList","StyledStartMenuNoResults","useResizeObserver","StartMenu","data","selected","onItemClick","style","onHeightChange","shouldRenderSubmenus","emptyFilterText","children","ref","dimensions","height","map","index","id","title","submenu","count","length"],"sources":["../../../../src/components/Filter/StartMenu.tsx"],"sourcesContent":["import React, { FC, useRef, useEffect, HTMLAttributes } from \"react\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { DataType, SelectedType } from \"./Filter\";\nimport {\n StyledStartMenuTitle,\n StyledStartMenuDot,\n StyledStartMenuListItem,\n StyledStartMenuList,\n StyledStartMenuNoResults,\n} from \"./Styles\";\nimport { useResizeObserver } from \"../../utils\";\n\nexport interface StartMenuProps {\n data: Array<DataType>;\n selected: SelectedType;\n onItemClick: (id: number | string) => void;\n onHeightChange: (height: number) => void;\n shouldRenderSubmenus: boolean;\n emptyFilterText?: string;\n}\n\nexport const StartMenu: FC<StartMenuProps & HTMLAttributes<HTMLDivElement>> = ({\n data,\n selected,\n onItemClick,\n style,\n onHeightChange,\n shouldRenderSubmenus,\n emptyFilterText,\n children,\n}) => {\n const ref = useRef(null);\n const dimensions = useResizeObserver(ref);\n const height = dimensions?.height;\n\n useEffect(() => {\n if (height && height > 0) {\n onHeightChange(height);\n }\n }, [height, onHeightChange]);\n\n return (\n <div style={style} ref={ref}>\n <StyledStartMenuList>\n {shouldRenderSubmenus ? (\n data.map(({ id, title, submenu }, index: number) => {\n
|
|
1
|
+
{"version":3,"file":"StartMenu.js","names":["React","useRef","useEffect","ArrowRightIcon","StyledStartMenuTitle","StyledStartMenuDot","StyledStartMenuListItem","StyledStartMenuList","StyledStartMenuNoResults","useResizeObserver","StartMenu","data","selected","onItemClick","style","onHeightChange","shouldRenderSubmenus","emptyFilterText","children","ref","dimensions","height","map","index","id","title","submenu","count","length"],"sources":["../../../../src/components/Filter/StartMenu.tsx"],"sourcesContent":["import React, { FC, useRef, useEffect, HTMLAttributes } from \"react\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { DataType, SelectedType } from \"./Filter\";\nimport {\n StyledStartMenuTitle,\n StyledStartMenuDot,\n StyledStartMenuListItem,\n StyledStartMenuList,\n StyledStartMenuNoResults,\n} from \"./Styles\";\nimport { useResizeObserver } from \"../../utils\";\n\nexport interface StartMenuProps {\n data: Array<DataType>;\n selected: SelectedType;\n onItemClick: (id: number | string) => void;\n onHeightChange: (height: number) => void;\n shouldRenderSubmenus: boolean;\n emptyFilterText?: string;\n}\n\nexport const StartMenu: FC<StartMenuProps & HTMLAttributes<HTMLDivElement>> = ({\n data,\n selected,\n onItemClick,\n style,\n onHeightChange,\n shouldRenderSubmenus,\n emptyFilterText,\n children,\n}) => {\n const ref = useRef(null);\n const dimensions = useResizeObserver(ref);\n const height = dimensions?.height;\n\n useEffect(() => {\n if (height && height > 0) {\n onHeightChange(height);\n }\n }, [height, onHeightChange]);\n\n return (\n <div style={style} ref={ref}>\n <StyledStartMenuList>\n {shouldRenderSubmenus ? (\n data.map(({ id, title, submenu }, index: number) => {\n let count = 0;\n\n if (typeof selected[id] === \"string\") {\n count += 1;\n } else {\n count = selected[id]?.length;\n }\n\n if (submenu?.length > 1) {\n return (\n <StyledStartMenuListItem\n key={`filter-list-item-${index}`}\n onClick={() => onItemClick(id)}\n >\n <StyledStartMenuTitle>{title}</StyledStartMenuTitle>\n {count > 0 ? (\n <StyledStartMenuDot>{count}</StyledStartMenuDot>\n ) : null}\n <ArrowRightIcon />\n </StyledStartMenuListItem>\n );\n }\n })\n ) : emptyFilterText ? (\n <StyledStartMenuNoResults>{emptyFilterText}</StyledStartMenuNoResults>\n ) : null}\n {children}\n </StyledStartMenuList>\n </div>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,MAAM,EAAEC,SAAS,QAAwB,OAAO;AACpE,SAASC,cAAc,QAAQ,UAAU;AAEzC,SACEC,oBAAoB,EACpBC,kBAAkB,EAClBC,uBAAuB,EACvBC,mBAAmB,EACnBC,wBAAwB,QACnB,UAAU;AACjB,SAASC,iBAAiB,QAAQ,aAAa;AAW/C,OAAO,IAAMC,SAA8D,GAAG,SAAjEA,SAA8D,OASrE;EAAA,IARJC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,cAAc,QAAdA,cAAc;IACdC,oBAAoB,QAApBA,oBAAoB;IACpBC,eAAe,QAAfA,eAAe;IACfC,QAAQ,QAARA,QAAQ;EAER,IAAMC,GAAG,GAAGlB,MAAM,CAAC,IAAI,CAAC;EACxB,IAAMmB,UAAU,GAAGX,iBAAiB,CAACU,GAAG,CAAC;EACzC,IAAME,MAAM,GAAGD,UAAU,oBAAVA,UAAU,CAAEC,MAAM;EAEjCnB,SAAS,CAAC,YAAM;IACd,IAAImB,MAAM,IAAIA,MAAM,GAAG,CAAC,EAAE;MACxBN,cAAc,CAACM,MAAM,CAAC;IACxB;EACF,CAAC,EAAE,CAACA,MAAM,EAAEN,cAAc,CAAC,CAAC;EAE5B,oBACE;IAAK,KAAK,EAAED,KAAM;IAAC,GAAG,EAAEK;EAAI,gBAC1B,oBAAC,mBAAmB,QACjBH,oBAAoB,GACnBL,IAAI,CAACW,GAAG,CAAC,iBAAyBC,KAAa,EAAK;IAAA,IAAxCC,EAAE,SAAFA,EAAE;MAAEC,KAAK,SAALA,KAAK;MAAEC,OAAO,SAAPA,OAAO;IAC5B,IAAIC,KAAK,GAAG,CAAC;IAEb,IAAI,OAAOf,QAAQ,CAACY,EAAE,CAAC,KAAK,QAAQ,EAAE;MACpCG,KAAK,IAAI,CAAC;IACZ,CAAC,MAAM;MAAA;MACLA,KAAK,mBAAGf,QAAQ,CAACY,EAAE,CAAC,qBAAZ,aAAcI,MAAM;IAC9B;IAEA,IAAI,CAAAF,OAAO,oBAAPA,OAAO,CAAEE,MAAM,IAAG,CAAC,EAAE;MACvB,oBACE,oBAAC,uBAAuB;QACtB,GAAG,wBAAsBL,KAAQ;QACjC,OAAO,EAAE;UAAA,OAAMV,WAAW,CAACW,EAAE,CAAC;QAAA;MAAC,gBAE/B,oBAAC,oBAAoB,QAAEC,KAAK,CAAwB,EACnDE,KAAK,GAAG,CAAC,gBACR,oBAAC,kBAAkB,QAAEA,KAAK,CAAsB,GAC9C,IAAI,eACR,oBAAC,cAAc,OAAG,CACM;IAE9B;EACF,CAAC,CAAC,GACAV,eAAe,gBACjB,oBAAC,wBAAwB,QAAEA,eAAe,CAA4B,GACpE,IAAI,EACPC,QAAQ,CACW,CAClB;AAEV,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -16143,11 +16143,16 @@
|
|
|
16143
16143
|
style: style,
|
|
16144
16144
|
ref: ref
|
|
16145
16145
|
}, /*#__PURE__*/React__default["default"].createElement(StyledStartMenuList, null, shouldRenderSubmenus ? data.map(function (_ref2, index) {
|
|
16146
|
-
var _selected$id;
|
|
16147
16146
|
var id = _ref2.id,
|
|
16148
16147
|
title = _ref2.title,
|
|
16149
16148
|
submenu = _ref2.submenu;
|
|
16150
|
-
var count =
|
|
16149
|
+
var count = 0;
|
|
16150
|
+
if (typeof selected[id] === "string") {
|
|
16151
|
+
count += 1;
|
|
16152
|
+
} else {
|
|
16153
|
+
var _selected$id;
|
|
16154
|
+
count = (_selected$id = selected[id]) === null || _selected$id === void 0 ? void 0 : _selected$id.length;
|
|
16155
|
+
}
|
|
16151
16156
|
if ((submenu === null || submenu === void 0 ? void 0 : submenu.length) > 1) {
|
|
16152
16157
|
return /*#__PURE__*/React__default["default"].createElement(StyledStartMenuListItem, {
|
|
16153
16158
|
key: "filter-list-item-".concat(index),
|
|
@@ -16284,6 +16289,9 @@
|
|
|
16284
16289
|
var count = React.useMemo(function () {
|
|
16285
16290
|
var c = 0;
|
|
16286
16291
|
Object.values(filter).forEach(function (entry) {
|
|
16292
|
+
if (typeof entry === "string") {
|
|
16293
|
+
return c += 1;
|
|
16294
|
+
}
|
|
16287
16295
|
return c += entry.length;
|
|
16288
16296
|
});
|
|
16289
16297
|
return c;
|
|
@@ -16732,7 +16740,7 @@
|
|
|
16732
16740
|
var StyledInput = styled__default["default"].input.withConfig({
|
|
16733
16741
|
displayName: "CommandPalettestyles__StyledInput",
|
|
16734
16742
|
componentId: "sc-na3mad-4"
|
|
16735
|
-
})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}::selection{background:var(--color-primary-300);}"], screen.sm);
|
|
16743
|
+
})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type=\"search\"]::-webkit-search-decoration,&[type=\"search\"]::-webkit-search-cancel-button,&[type=\"search\"]::-webkit-search-results-button,&[type=\"search\"]::-webkit-search-results-decoration{-webkit-appearance:none;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}::selection{background:var(--color-primary-300);}"], screen.sm);
|
|
16736
16744
|
var StyledParameter = styled__default["default"].span.withConfig({
|
|
16737
16745
|
displayName: "CommandPalettestyles__StyledParameter",
|
|
16738
16746
|
componentId: "sc-na3mad-5"
|
|
@@ -16915,7 +16923,7 @@
|
|
|
16915
16923
|
ref: inputRef,
|
|
16916
16924
|
autoFocus: true,
|
|
16917
16925
|
placeholder: handleInputPlaceholder,
|
|
16918
|
-
type: "
|
|
16926
|
+
type: "search",
|
|
16919
16927
|
"aria-autocomplete": "list",
|
|
16920
16928
|
autoCapitalize: "none",
|
|
16921
16929
|
autoComplete: "off",
|