@activecollab/components 1.0.355 → 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/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/index.js +2 -2
- 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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"}
|
|
@@ -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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"}
|
package/dist/index.js
CHANGED
|
@@ -16740,7 +16740,7 @@
|
|
|
16740
16740
|
var StyledInput = styled__default["default"].input.withConfig({
|
|
16741
16741
|
displayName: "CommandPalettestyles__StyledInput",
|
|
16742
16742
|
componentId: "sc-na3mad-4"
|
|
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=\"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);
|
|
16744
16744
|
var StyledParameter = styled__default["default"].span.withConfig({
|
|
16745
16745
|
displayName: "CommandPalettestyles__StyledParameter",
|
|
16746
16746
|
componentId: "sc-na3mad-5"
|
|
@@ -16923,7 +16923,7 @@
|
|
|
16923
16923
|
ref: inputRef,
|
|
16924
16924
|
autoFocus: true,
|
|
16925
16925
|
placeholder: handleInputPlaceholder,
|
|
16926
|
-
type: "
|
|
16926
|
+
type: "search",
|
|
16927
16927
|
"aria-autocomplete": "list",
|
|
16928
16928
|
autoCapitalize: "none",
|
|
16929
16929
|
autoComplete: "off",
|