@activecollab/components 1.0.291 → 1.0.292

package/dist/cjs/components/CommandPalette/CommandPaletteHeader.js

@@ -59,7 +59,7 @@ var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
       return "Search";
     }
     if (mode === "id") {
-      return "22";
+      return "1";
     }
     return "Search or jump to";
   }, [mode]);

package/dist/cjs/components/CommandPalette/CommandPaletteHeader.js.map

@@ -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","isNumber","isFinite","enabledKeyCombos","metaKey","preventDefault","name","slice","inputText","startsWith","pastedText","clipboardData","getData","split","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 \"22\";\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    // mode === 'id' TYPE NUMBER PREVENTING KEYS\n\n    if (mode === \"id\") {\n      // enableNumbers && key combos\n      const isNumber = isFinite(e.key);\n      const enabledKeyCombos =\n        (e.metaKey && \"a\") ||\n        (e.metaKey && \"c\") ||\n        (e.metaKey && \"v\") ||\n        (e.metaKey && \"x\") ||\n        e.key === \"Backspace\" ||\n        e.key === \"Tab\";\n\n      // check conditions and remove keys\n      if (!enabledKeyCombos && !isNumber) {\n        e.preventDefault();\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={mode === \"id\" ? \"number\" : \"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 (inputText.startsWith(\"#\") && idModeEnabled) {\n            setMode(\"id\");\n            clearInput();\n            return;\n          }\n\n          onChangeSearch(inputText);\n        }}\n        onPaste={(e) => {\n          e.preventDefault();\n          let pastedText = e.clipboardData.getData(\"text\");\n\n          if (pastedText.startsWith(\"#\") && idModeEnabled) {\n            pastedText = pastedText.split(\"#\")[1];\n            setMode(\"id\");\n            onChangeSearch(pastedText);\n          }\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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"}
+{"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","isNumber","isFinite","enabledKeyCombos","metaKey","preventDefault","name","slice","inputText","startsWith","pastedText","clipboardData","getData","split","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    // mode === 'id' TYPE NUMBER PREVENTING KEYS\n\n    if (mode === \"id\") {\n      // enableNumbers && key combos\n      const isNumber = isFinite(e.key);\n      const enabledKeyCombos =\n        (e.metaKey && \"a\") ||\n        (e.metaKey && \"c\") ||\n        (e.metaKey && \"v\") ||\n        (e.metaKey && \"x\") ||\n        e.key === \"Backspace\" ||\n        e.key === \"Tab\";\n\n      // check conditions and remove keys\n      if (!enabledKeyCombos && !isNumber) {\n        e.preventDefault();\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={mode === \"id\" ? \"number\" : \"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 (inputText.startsWith(\"#\") && idModeEnabled) {\n            setMode(\"id\");\n            clearInput();\n            return;\n          }\n\n          onChangeSearch(inputText);\n        }}\n        onPaste={(e) => {\n          e.preventDefault();\n          let pastedText = e.clipboardData.getData(\"text\");\n\n          if (pastedText.startsWith(\"#\") && idModeEnabled) {\n            pastedText = pastedText.split(\"#\")[1];\n            setMode(\"id\");\n            onChangeSearch(pastedText);\n          }\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/esm/components/CommandPalette/CommandPaletteHeader.js

@@ -50,7 +50,7 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
       return "Search";
     }
     if (mode === "id") {
-      return "22";
+      return "1";
     }
     return "Search or jump to";
   }, [mode]);

package/dist/esm/components/CommandPalette/CommandPaletteHeader.js.map

@@ -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","isNumber","isFinite","enabledKeyCombos","metaKey","preventDefault","name","slice","inputText","startsWith","pastedText","clipboardData","getData","split","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 \"22\";\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    // mode === 'id' TYPE NUMBER PREVENTING KEYS\n\n    if (mode === \"id\") {\n      // enableNumbers && key combos\n      const isNumber = isFinite(e.key);\n      const enabledKeyCombos =\n        (e.metaKey && \"a\") ||\n        (e.metaKey && \"c\") ||\n        (e.metaKey && \"v\") ||\n        (e.metaKey && \"x\") ||\n        e.key === \"Backspace\" ||\n        e.key === \"Tab\";\n\n      // check conditions and remove keys\n      if (!enabledKeyCombos && !isNumber) {\n        e.preventDefault();\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={mode === \"id\" ? \"number\" : \"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 (inputText.startsWith(\"#\") && idModeEnabled) {\n            setMode(\"id\");\n            clearInput();\n            return;\n          }\n\n          onChangeSearch(inputText);\n        }}\n        onPaste={(e) => {\n          e.preventDefault();\n          let pastedText = e.clipboardData.getData(\"text\");\n\n          if (pastedText.startsWith(\"#\") && idModeEnabled) {\n            pastedText = pastedText.split(\"#\")[1];\n            setMode(\"id\");\n            onChangeSearch(pastedText);\n          }\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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"}
+{"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","isNumber","isFinite","enabledKeyCombos","metaKey","preventDefault","name","slice","inputText","startsWith","pastedText","clipboardData","getData","split","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    // mode === 'id' TYPE NUMBER PREVENTING KEYS\n\n    if (mode === \"id\") {\n      // enableNumbers && key combos\n      const isNumber = isFinite(e.key);\n      const enabledKeyCombos =\n        (e.metaKey && \"a\") ||\n        (e.metaKey && \"c\") ||\n        (e.metaKey && \"v\") ||\n        (e.metaKey && \"x\") ||\n        e.key === \"Backspace\" ||\n        e.key === \"Tab\";\n\n      // check conditions and remove keys\n      if (!enabledKeyCombos && !isNumber) {\n        e.preventDefault();\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={mode === \"id\" ? \"number\" : \"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 (inputText.startsWith(\"#\") && idModeEnabled) {\n            setMode(\"id\");\n            clearInput();\n            return;\n          }\n\n          onChangeSearch(inputText);\n        }}\n        onPaste={(e) => {\n          e.preventDefault();\n          let pastedText = e.clipboardData.getData(\"text\");\n\n          if (pastedText.startsWith(\"#\") && idModeEnabled) {\n            pastedText = pastedText.split(\"#\")[1];\n            setMode(\"id\");\n            onChangeSearch(pastedText);\n          }\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

@@ -16217,7 +16217,7 @@
         return "Search";
       }
       if (mode === "id") {
-        return "22";
+        return "1";
       }
       return "Search or jump to";
     }, [mode]);