@activecollab/components 1.0.285 → 1.0.287

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { IconButton } from "../IconButton";
 import { CloseIcon, HashtagIcon, SearchLargeIcon } from "../Icons";
 import { Tooltip } from "../Tooltip";
@@ -6,7 +6,6 @@ import { StyledActionWrapper, StyledCommandPaletteHeader, StyledInput, StyledPar
 import { useSelectedContext } from "./context";
 import { useModeContext } from "./context/ModeContext";
 import { useSearchContext } from "./context/SearchContext";
-var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
 export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
   var handleChange = _ref.handleChange,
     _ref$loading = _ref.loading,
@@ -16,7 +15,8 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
   var inputRef = useRef(null);
   var _useModeContext = useModeContext(),
     mode = _useModeContext.mode,
-    setMode = _useModeContext.setMode;
+    setMode = _useModeContext.setMode,
+    idModeEnabled = _useModeContext.idModeEnabled;
   var _useSelectedContext = useSelectedContext(),
     setSelected = _useSelectedContext.setSelected,
     selected = _useSelectedContext.selected;
@@ -33,10 +33,6 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
       onChangeSearch("");
     }
   };
-  var checkIfNumber = function checkIfNumber(event) {
-    var regex = new RegExp(/(^\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight)/);
-    return !event.key.match(regex) && event.preventDefault();
-  };
   useEffect(function () {
     if (search.length > 0) {
       if (itemsLength > commandsLength) {
@@ -46,12 +42,24 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
       }
     }
   }, [search, commandsLength, itemsLength, setSelected]);
+  useEffect(function () {
+    focusInput();
+  }, [mode]);
+  var handleInputPlaceholder = useMemo(function () {
+    if (typeof mode === "object") {
+      return "Search";
+    }
+    if (mode === "id") {
+      return "22";
+    }
+    return "Search or jump to";
+  }, [mode]);
   return /*#__PURE__*/React.createElement(StyledCommandPaletteHeader, {
     className: "cp-header"
-  }, /*#__PURE__*/React.createElement(StyledSearchIcon, null, /*#__PURE__*/React.createElement(SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/React.createElement(StyledParameter, null, "ID#:") : null, /*#__PURE__*/React.createElement(StyledInput, {
+  }, /*#__PURE__*/React.createElement(StyledSearchIcon, null, /*#__PURE__*/React.createElement(SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/React.createElement(StyledParameter, null, "ID#:") : null, typeof mode === "object" ? /*#__PURE__*/React.createElement(StyledParameter, null, mode.name.length > 10 ? mode.name.slice(0, 10) + "..." : mode.name, "/") : null, /*#__PURE__*/React.createElement(StyledInput, {
     ref: inputRef,
     autoFocus: true,
-    placeholder: mode === "id" ? "22" : "Search or jump to",
+    placeholder: handleInputPlaceholder,
     type: mode === "id" ? "number" : "text",
     "aria-autocomplete": "list",
     autoCapitalize: "none",
@@ -61,11 +69,9 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
     spellCheck: false,
     value: search,
     onKeyDown: function onKeyDown(e) {
-      if (e.key === "Backspace" && mode !== "default" && search.length === 0) {
+      if (e.key === "Backspace" && mode !== "default" && e.target.value === "") {
         setMode("default");
-      }
-      if (mode === "id" && !isChrome) {
-        checkIfNumber(e);
+        clearInput();
       }
       if (e.key === "Enter") {
         var selectedItem = document.querySelectorAll(".cp-item")[selected];
@@ -76,17 +82,17 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
     },
     onChange: function onChange(e) {
       var inputText = e.target.value;
-      if (inputText.startsWith("#")) {
+      if (inputText.startsWith("#") && idModeEnabled) {
         setMode("id");
         clearInput();
+        return false;
       }
       handleChange(e);
     },
     onPaste: function onPaste(e) {
       var pastedText = e.clipboardData.getData("text");
-      if (pastedText.startsWith("#")) {
+      if (pastedText.startsWith("#") && idModeEnabled) {
         setMode("id");
-        !isChrome && onChangeSearch(pastedText.slice(1));
       }
     }
   }), /*#__PURE__*/React.createElement(StyledActionWrapper, null, loading ? /*#__PURE__*/React.createElement(StyledSpinnerLoader, {
@@ -95,7 +101,7 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
     "aria-valuemax": 100,
     "aria-valuemin": 0,
     role: "progressbar"
-  }) : null, mode !== "id" && search.length === 0 ? /*#__PURE__*/React.createElement(Tooltip, {
+  }) : null, mode !== "id" && typeof mode !== "object" && idModeEnabled && search.length === 0 ? /*#__PURE__*/React.createElement(Tooltip, {
     title: "Search by ID",
     placement: "top"
   }, /*#__PURE__*/React.createElement(IconButton, {
@@ -103,17 +109,15 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
       if (e.key === "Enter") {
         setMode("id");
         clearInput();
-        focusInput();
       }
     },
     onClick: function onClick() {
       setMode("id");
       clearInput();
-      focusInput();
     },
     variant: "text gray"
-  }, /*#__PURE__*/React.createElement(HashtagIcon, null))) : null, search.length > 0 || mode === "id" ? /*#__PURE__*/React.createElement(Tooltip, {
-    title: mode === "id" ? "Close ID mode" : "Clear",
+  }, /*#__PURE__*/React.createElement(HashtagIcon, null))) : null, search.length > 0 || mode === "id" || typeof mode === "object" ? /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Clear",
     placement: "top"
   }, /*#__PURE__*/React.createElement(IconButton, {
     variant: "text gray",

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

@@ -1 +1 @@
-{"version":3,"file":"CommandPaletteHeader.js","names":["React","useEffect","useRef","IconButton","CloseIcon","HashtagIcon","SearchLargeIcon","Tooltip","StyledActionWrapper","StyledCommandPaletteHeader","StyledInput","StyledParameter","StyledSearchIcon","StyledSpinnerLoader","useSelectedContext","useModeContext","useSearchContext","isChrome","test","navigator","userAgent","vendor","CommandPaletteHeader","handleChange","loading","commandsLength","itemsLength","inputRef","mode","setMode","setSelected","selected","search","onChangeSearch","focusInput","current","focus","clearInput","checkIfNumber","event","regex","RegExp","key","match","preventDefault","length","e","selectedItem","document","querySelectorAll","click","inputText","target","value","startsWith","pastedText","clipboardData","getData","slice","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useEffect, useRef, KeyboardEvent } 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\nconst isChrome =\n  /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);\n\nexport interface CommandPaletteHeaderProps {\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n  commandsLength: number;\n  itemsLength: number;\n}\n\nexport const CommandPaletteHeader = ({\n  handleChange,\n  loading = false,\n  commandsLength,\n  itemsLength,\n}: CommandPaletteHeaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { mode, setMode } = 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      onChangeSearch(\"\");\n    }\n  };\n\n  const checkIfNumber = (event: KeyboardEvent<HTMLInputElement>) => {\n    const regex = new RegExp(\n      /(^\\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight)/\n    );\n\n    return !event.key.match(regex) && event.preventDefault();\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  return (\n    <StyledCommandPaletteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n\n      <StyledInput\n        ref={inputRef}\n        autoFocus\n        placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\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={(e) => {\n          if (\n            e.key === \"Backspace\" &&\n            mode !== \"default\" &&\n            search.length === 0\n          ) {\n            setMode(\"default\");\n          }\n\n          if (mode === \"id\" && !isChrome) {\n            checkIfNumber(e);\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        onChange={(e) => {\n          const inputText = e.target.value;\n\n          if (inputText.startsWith(\"#\")) {\n            setMode(\"id\");\n            clearInput();\n          }\n\n          handleChange(e);\n        }}\n        onPaste={(e) => {\n          const pastedText = e.clipboardData.getData(\"text\");\n\n          if (pastedText.startsWith(\"#\")) {\n            setMode(\"id\");\n            !isChrome && onChangeSearch(pastedText.slice(1));\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\" && 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                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"id\");\n                clearInput();\n                focusInput();\n              }}\n              variant=\"text gray\"\n            >\n              <HashtagIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n\n        {search.length > 0 || mode === \"id\" ? (\n          <Tooltip\n            title={mode === \"id\" ? \"Close ID mode\" : \"Clear\"}\n            placement=\"top\"\n          >\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","handleChange","loading","commandsLength","itemsLength","inputRef","mode","setMode","idModeEnabled","setSelected","selected","search","onChangeSearch","focusInput","current","focus","clearInput","length","handleInputPlaceholder","name","slice","e","key","target","value","selectedItem","document","querySelectorAll","click","inputText","startsWith","pastedText","clipboardData","getData","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, 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  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n  commandsLength: number;\n  itemsLength: number;\n}\n\nexport const CommandPaletteHeader = ({\n  handleChange,\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      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  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={(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        onChange={(e) => {\n          const inputText = e.target.value;\n\n          if (inputText.startsWith(\"#\") && idModeEnabled) {\n            setMode(\"id\");\n            clearInput();\n            return false;\n          }\n\n          handleChange(e);\n        }}\n        onPaste={(e) => {\n          const pastedText = e.clipboardData.getData(\"text\");\n\n          if (pastedText.startsWith(\"#\") && idModeEnabled) {\n            setMode(\"id\");\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/context/ModeContext.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+import { SearchContext } from "../CommandPalette";
 interface ModeContextProps {
-    mode: string;
+    mode: string | SearchContext;
     setMode: (value: string) => void;
+    idModeEnabled: boolean;
 }
 export declare const ModeContext: import("react").Context<ModeContextProps>;
 export declare const ModeContextProvider: import("react").Provider<ModeContextProps>;

package/dist/esm/components/CommandPalette/context/ModeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModeContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/CommandPalette/context/ModeContext.tsx"],"names":[],"mappings":";AAEA,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,2CAGtB,CAAC;AAEH,eAAO,MAAM,mBAAmB,4CAAuB,CAAC;AAExD,eAAO,MAAM,cAAc,QAAO,gBAA2C,CAAC"}
+{"version":3,"file":"ModeContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/CommandPalette/context/ModeContext.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,GAAG,aAAa,CAAC;IAC7B,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,2CAItB,CAAC;AAEH,eAAO,MAAM,mBAAmB,4CAAuB,CAAC;AAExD,eAAO,MAAM,cAAc,QAAO,gBAA2C,CAAC"}

package/dist/esm/components/CommandPalette/context/ModeContext.js

@@ -3,7 +3,8 @@ export var ModeContext = /*#__PURE__*/createContext({
   mode: "default",
   setMode: function setMode() {
     return null;
-  }
+  },
+  idModeEnabled: false
 });
 export var ModeContextProvider = ModeContext.Provider;
 export var useModeContext = function useModeContext() {

package/dist/esm/components/CommandPalette/context/ModeContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModeContext.js","names":["createContext","useContext","ModeContext","mode","setMode","ModeContextProvider","Provider","useModeContext"],"sources":["../../../../../src/components/CommandPalette/context/ModeContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\ninterface ModeContextProps {\n  mode: string;\n  setMode: (value: string) => void;\n}\n\nexport const ModeContext = createContext<ModeContextProps>({\n  mode: \"default\",\n  setMode: () => null,\n});\n\nexport const ModeContextProvider = ModeContext.Provider;\n\nexport const useModeContext = (): ModeContextProps => useContext(ModeContext);\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAOjD,OAAO,IAAMC,WAAW,gBAAGF,aAAa,CAAmB;EACzDG,IAAI,EAAE,SAAS;EACfC,OAAO,EAAE;IAAA,OAAM,IAAI;EAAA;AACrB,CAAC,CAAC;AAEF,OAAO,IAAMC,mBAAmB,GAAGH,WAAW,CAACI,QAAQ;AAEvD,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAc;EAAA,OAA2BN,UAAU,CAACC,WAAW,CAAC;AAAA"}
+{"version":3,"file":"ModeContext.js","names":["createContext","useContext","ModeContext","mode","setMode","idModeEnabled","ModeContextProvider","Provider","useModeContext"],"sources":["../../../../../src/components/CommandPalette/context/ModeContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { SearchContext } from \"../CommandPalette\";\n\ninterface ModeContextProps {\n  mode: string | SearchContext;\n  setMode: (value: string) => void;\n  idModeEnabled: boolean;\n}\n\nexport const ModeContext = createContext<ModeContextProps>({\n  mode: \"default\",\n  setMode: () => null,\n  idModeEnabled: false,\n});\n\nexport const ModeContextProvider = ModeContext.Provider;\n\nexport const useModeContext = (): ModeContextProps => useContext(ModeContext);\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AASjD,OAAO,IAAMC,WAAW,gBAAGF,aAAa,CAAmB;EACzDG,IAAI,EAAE,SAAS;EACfC,OAAO,EAAE;IAAA,OAAM,IAAI;EAAA;EACnBC,aAAa,EAAE;AACjB,CAAC,CAAC;AAEF,OAAO,IAAMC,mBAAmB,GAAGJ,WAAW,CAACK,QAAQ;AAEvD,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAc;EAAA,OAA2BP,UAAU,CAACC,WAAW,CAAC;AAAA"}

package/dist/index.js

@@ -16023,7 +16023,7 @@
   var StyledParameter = styled__default["default"].span.withConfig({
     displayName: "CommandPalettestyles__StyledParameter",
     componentId: "sc-na3mad-5"
-  })(["color:var(--color-theme-transparent-500);margin-right:8px;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}"], screen.sm);
+  })(["color:var(--color-theme-transparent-500);margin-right:8px;flex-shrink:0;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}"], screen.sm);
   var StyledActionWrapper = styled__default["default"].div.withConfig({
     displayName: "CommandPalettestyles__StyledActionWrapper",
     componentId: "sc-na3mad-6"
@@ -16069,7 +16069,8 @@
     mode: "default",
     setMode: function setMode() {
       return null;
-    }
+    },
+    idModeEnabled: false
   });
   var ModeContextProvider = ModeContext.Provider;
   var useModeContext = function useModeContext() {
@@ -16132,7 +16133,6 @@
     componentId: "sc-1t486ve-0"
   })(["flex:1;"]);
 
-  var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
   var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
     var handleChange = _ref.handleChange,
       _ref$loading = _ref.loading,
@@ -16142,7 +16142,8 @@
     var inputRef = React.useRef(null);
     var _useModeContext = useModeContext(),
       mode = _useModeContext.mode,
-      setMode = _useModeContext.setMode;
+      setMode = _useModeContext.setMode,
+      idModeEnabled = _useModeContext.idModeEnabled;
     var _useSelectedContext = useSelectedContext(),
       setSelected = _useSelectedContext.setSelected,
       selected = _useSelectedContext.selected;
@@ -16159,10 +16160,6 @@
         onChangeSearch("");
       }
     };
-    var checkIfNumber = function checkIfNumber(event) {
-      var regex = new RegExp(/(^\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight)/);
-      return !event.key.match(regex) && event.preventDefault();
-    };
     React.useEffect(function () {
       if (search.length > 0) {
         if (itemsLength > commandsLength) {
@@ -16172,12 +16169,24 @@
         }
       }
     }, [search, commandsLength, itemsLength, setSelected]);
+    React.useEffect(function () {
+      focusInput();
+    }, [mode]);
+    var handleInputPlaceholder = React.useMemo(function () {
+      if (_typeof(mode) === "object") {
+        return "Search";
+      }
+      if (mode === "id") {
+        return "22";
+      }
+      return "Search or jump to";
+    }, [mode]);
     return /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteHeader, {
       className: "cp-header"
-    }, /*#__PURE__*/React__default["default"].createElement(StyledSearchIcon, null, /*#__PURE__*/React__default["default"].createElement(SearchLargeIcon$1, null)), mode === "id" ? /*#__PURE__*/React__default["default"].createElement(StyledParameter, null, "ID#:") : null, /*#__PURE__*/React__default["default"].createElement(StyledInput, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledSearchIcon, null, /*#__PURE__*/React__default["default"].createElement(SearchLargeIcon$1, null)), mode === "id" ? /*#__PURE__*/React__default["default"].createElement(StyledParameter, null, "ID#:") : null, _typeof(mode) === "object" ? /*#__PURE__*/React__default["default"].createElement(StyledParameter, null, mode.name.length > 10 ? mode.name.slice(0, 10) + "..." : mode.name, "/") : null, /*#__PURE__*/React__default["default"].createElement(StyledInput, {
       ref: inputRef,
       autoFocus: true,
-      placeholder: mode === "id" ? "22" : "Search or jump to",
+      placeholder: handleInputPlaceholder,
       type: mode === "id" ? "number" : "text",
       "aria-autocomplete": "list",
       autoCapitalize: "none",
@@ -16187,11 +16196,9 @@
       spellCheck: false,
       value: search,
       onKeyDown: function onKeyDown(e) {
-        if (e.key === "Backspace" && mode !== "default" && search.length === 0) {
+        if (e.key === "Backspace" && mode !== "default" && e.target.value === "") {
           setMode("default");
-        }
-        if (mode === "id" && !isChrome) {
-          checkIfNumber(e);
+          clearInput();
         }
         if (e.key === "Enter") {
           var selectedItem = document.querySelectorAll(".cp-item")[selected];
@@ -16202,17 +16209,17 @@
       },
       onChange: function onChange(e) {
         var inputText = e.target.value;
-        if (inputText.startsWith("#")) {
+        if (inputText.startsWith("#") && idModeEnabled) {
           setMode("id");
           clearInput();
+          return false;
         }
         handleChange(e);
       },
       onPaste: function onPaste(e) {
         var pastedText = e.clipboardData.getData("text");
-        if (pastedText.startsWith("#")) {
+        if (pastedText.startsWith("#") && idModeEnabled) {
           setMode("id");
-          !isChrome && onChangeSearch(pastedText.slice(1));
         }
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledActionWrapper, null, loading ? /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader, {
@@ -16221,7 +16228,7 @@
       "aria-valuemax": 100,
       "aria-valuemin": 0,
       role: "progressbar"
-    }) : null, mode !== "id" && search.length === 0 ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+    }) : null, mode !== "id" && _typeof(mode) !== "object" && idModeEnabled && search.length === 0 ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
       title: "Search by ID",
       placement: "top"
     }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -16229,17 +16236,15 @@
         if (e.key === "Enter") {
           setMode("id");
           clearInput();
-          focusInput();
         }
       },
       onClick: function onClick() {
         setMode("id");
         clearInput();
-        focusInput();
       },
       variant: "text gray"
-    }, /*#__PURE__*/React__default["default"].createElement(HashtagIcon$1, null))) : null, search.length > 0 || mode === "id" ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
-      title: mode === "id" ? "Close ID mode" : "Clear",
+    }, /*#__PURE__*/React__default["default"].createElement(HashtagIcon$1, null))) : null, search.length > 0 || mode === "id" || _typeof(mode) === "object" ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+      title: "Clear",
       placement: "top"
     }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
       variant: "text gray",
@@ -16372,7 +16377,7 @@
     });
   };
 
-  var _excluded = ["children", "onChangeSearch", "search", "mode", "setMode", "loading"];
+  var _excluded = ["children", "onChangeSearch", "search", "mode", "setMode", "loading", "idModeEnabled"];
   var _CommandPalette = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       onChangeSearch = _ref.onChangeSearch,
@@ -16380,6 +16385,8 @@
       mode = _ref.mode,
       setMode = _ref.setMode,
       loading = _ref.loading,
+      _ref$idModeEnabled = _ref.idModeEnabled,
+      idModeEnabled = _ref$idModeEnabled === void 0 ? false : _ref$idModeEnabled,
       rest = _objectWithoutProperties(_ref, _excluded);
     var _useState = React.useState(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -16502,7 +16509,8 @@
     }, /*#__PURE__*/React__default["default"].createElement(ModeContextProvider, {
       value: {
         mode: mode,
-        setMode: setMode
+        setMode: setMode,
+        idModeEnabled: idModeEnabled
       }
     }, /*#__PURE__*/React__default["default"].createElement(CommandPaletteHeader, {
       handleChange: handleChange,