@activecollab/components 1.0.288 → 1.0.290

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

@@ -44,9 +44,6 @@ var _CommandPalette = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     selected = _useState2[0],
     setSelected = _useState2[1];
   var listWrapperRef = (0, _react.useRef)(null);
-  var handleChange = function handleChange(e) {
-    onChangeSearch(e.target.value);
-  };
   var scrollToTop = function scrollToTop() {
     var _listWrapperRef$curre;
     (_listWrapperRef$curre = listWrapperRef.current) === null || _listWrapperRef$curre === void 0 ? void 0 : _listWrapperRef$curre.scrollTo({
@@ -164,7 +161,6 @@ var _CommandPalette = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       idModeEnabled: idModeEnabled
     }
   }, /*#__PURE__*/_react.default.createElement(_CommandPaletteHeader.CommandPaletteHeader, {
-    handleChange: handleChange,
     commandsLength: filterChildren.commandsLength,
     itemsLength: filterChildren.itemsLength,
     loading: loading

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

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.js","names":["_CommandPalette","forwardRef","ref","children","onChangeSearch","search","mode","setMode","loading","idModeEnabled","rest","useState","selected","setSelected","listWrapperRef","useRef","handleChange","e","target","value","scrollToTop","current","scrollTo","top","behavior","scrollToBottom","scrollHeight","filterChildren","useMemo","itemsLength","commandsLength","items","deepMap","child","item","clonedElement","type","CommandPaletteList","cloneElement","props","CommandPaletteCommandItem","index","CommandPaletteItem","handleChangeSelected","direction","document","querySelectorAll","newIndex","newItem","forEach","_","i","length","scrollIntoView","block","key","preventDefault","displayName","CommandPalette","Object","assign","List","Item","CommandItem"],"sources":["../../../../src/components/CommandPalette/CommandPalette.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  cloneElement,\n  forwardRef,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n  StyledCommandPalette,\n  StyledCommandPaletteWrapper,\n} from \"./CommandPalette.styles\";\nimport { CommandPaletteCommandItem } from \"./CommandPaletteCommandItem\";\nimport { CommandPaletteHeader } from \"./CommandPaletteHeader\";\nimport {\n  CommandPaletteItem,\n  CommandPaletteItemProps,\n} from \"./CommandPaletteItem\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\n\nimport {\n  ModeContextProvider,\n  SelectedContextProvider,\n  SearchContextProvider,\n} from \"./context\";\n\nimport { deepMap } from \"../../utils/deepChildrenMap\";\n\nexport interface SearchContext {\n  name: string;\n  class: string;\n}\n\nexport interface CommandPaletteProps extends DialogProps {\n  onChangeSearch: (search: string) => void;\n  search: string;\n  mode: string | SearchContext;\n  setMode: (value: string) => void;\n  loading?: boolean;\n  idModeEnabled?: boolean;\n}\n\nexport const _CommandPalette = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<CommandPaletteProps>\n>(\n  (\n    {\n      children,\n      onChangeSearch,\n      search,\n      mode,\n      setMode,\n      loading,\n      idModeEnabled = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const [selected, setSelected] = useState<number>(0);\n    const listWrapperRef = useRef<HTMLDivElement>(null);\n\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChangeSearch(e.target.value);\n    };\n\n    const scrollToTop = () => {\n      listWrapperRef.current?.scrollTo({ top: 0, behavior: \"smooth\" });\n    };\n\n    const scrollToBottom = () => {\n      listWrapperRef.current?.scrollTo({\n        top: listWrapperRef.current.scrollHeight,\n        behavior: \"smooth\",\n      });\n    };\n\n    const filterChildren = useMemo(() => {\n      let itemsLength = 0;\n      let commandsLength = 0;\n\n      const items = deepMap(children, (child) => {\n        const item = child as ReactElement<CommandPaletteItemProps>;\n        let clonedElement;\n\n        if (item && item.type === CommandPaletteList) {\n          clonedElement = cloneElement(item, {\n            ...item.props,\n          });\n        }\n\n        if (item && item.type === CommandPaletteCommandItem) {\n          clonedElement = cloneElement(item, {\n            ...item.props,\n            index: itemsLength,\n            selected,\n          });\n\n          itemsLength++;\n          commandsLength++;\n        }\n\n        if (item && item.type === CommandPaletteItem) {\n          clonedElement = cloneElement(item, {\n            ...item.props,\n            index: itemsLength,\n            selected,\n          });\n\n          itemsLength++;\n        }\n\n        return clonedElement;\n      });\n\n      return { items, itemsLength, commandsLength };\n    }, [children, selected]);\n\n    const handleChangeSelected = (direction?: \"up\" | \"down\") => {\n      const items = document.querySelectorAll(\".cp-item\");\n\n      let index = 0;\n      let newIndex = 0;\n      let newItem: Element | null = null;\n\n      if (direction === \"down\") {\n        items.forEach((_, i) => {\n          if (i === selected) {\n            index = i;\n          }\n        });\n\n        newIndex = index === items.length - 1 ? 0 : index + 1;\n      } else if (direction === \"up\") {\n        items.forEach((_, i) => {\n          if (i === selected) {\n            index = i;\n          }\n        });\n\n        newIndex = !index ? items.length - 1 : index - 1;\n      } else {\n        setSelected(0);\n      }\n\n      newItem = items[newIndex];\n\n      if (newItem && typeof newIndex === \"number\") {\n        setSelected(newIndex);\n\n        newItem.scrollIntoView({\n          behavior: \"smooth\",\n          block: newIndex ? \"center\" : \"end\",\n        });\n      }\n    };\n\n    return (\n      <Dialog {...rest} ref={ref}>\n        <SearchContextProvider value={{ search, onChangeSearch }}>\n          <SelectedContextProvider value={{ selected: selected, setSelected }}>\n            <StyledCommandPalette\n              onKeyDown={(e) => {\n                if (e.key === \"ArrowDown\") {\n                  e.preventDefault();\n                  handleChangeSelected(\"down\");\n                }\n\n                if (e.key === \"ArrowUp\") {\n                  e.preventDefault();\n                  handleChangeSelected(\"up\");\n                }\n\n                if (e.key === \"End\") {\n                  e.preventDefault();\n                  scrollToBottom();\n                  setSelected(filterChildren.itemsLength - 1);\n                }\n\n                if (e.key === \"Home\") {\n                  e.preventDefault();\n                  scrollToTop();\n                  setSelected(0);\n                }\n              }}\n            >\n              <ModeContextProvider value={{ mode, setMode, idModeEnabled }}>\n                <CommandPaletteHeader\n                  handleChange={handleChange}\n                  commandsLength={filterChildren.commandsLength}\n                  itemsLength={filterChildren.itemsLength}\n                  loading={loading}\n                />\n              </ModeContextProvider>\n\n              <StyledCommandPaletteWrapper ref={listWrapperRef}>\n                {filterChildren.items}\n              </StyledCommandPaletteWrapper>\n            </StyledCommandPalette>\n          </SelectedContextProvider>\n        </SearchContextProvider>\n      </Dialog>\n    );\n  }\n);\n\n_CommandPalette.displayName = \"CommandPalette\";\n\n// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757\nexport const CommandPalette = Object.assign({}, _CommandPalette, {\n  List: CommandPaletteList,\n  Item: CommandPaletteItem,\n  CommandItem: CommandPaletteCommandItem,\n});\n"],"mappings":"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"}
+{"version":3,"file":"CommandPalette.js","names":["_CommandPalette","forwardRef","ref","children","onChangeSearch","search","mode","setMode","loading","idModeEnabled","rest","useState","selected","setSelected","listWrapperRef","useRef","scrollToTop","current","scrollTo","top","behavior","scrollToBottom","scrollHeight","filterChildren","useMemo","itemsLength","commandsLength","items","deepMap","child","item","clonedElement","type","CommandPaletteList","cloneElement","props","CommandPaletteCommandItem","index","CommandPaletteItem","handleChangeSelected","direction","document","querySelectorAll","newIndex","newItem","forEach","_","i","length","scrollIntoView","block","e","key","preventDefault","displayName","CommandPalette","Object","assign","List","Item","CommandItem"],"sources":["../../../../src/components/CommandPalette/CommandPalette.tsx"],"sourcesContent":["import React, {\n  cloneElement,\n  forwardRef,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n  StyledCommandPalette,\n  StyledCommandPaletteWrapper,\n} from \"./CommandPalette.styles\";\nimport { CommandPaletteCommandItem } from \"./CommandPaletteCommandItem\";\nimport { CommandPaletteHeader } from \"./CommandPaletteHeader\";\nimport {\n  CommandPaletteItem,\n  CommandPaletteItemProps,\n} from \"./CommandPaletteItem\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\n\nimport {\n  ModeContextProvider,\n  SelectedContextProvider,\n  SearchContextProvider,\n} from \"./context\";\n\nimport { deepMap } from \"../../utils/deepChildrenMap\";\n\nexport interface SearchContext {\n  name: string;\n  class: string;\n}\n\nexport interface CommandPaletteProps extends DialogProps {\n  onChangeSearch: (search: string) => void;\n  search: string;\n  mode: string | SearchContext;\n  setMode: (value: string) => void;\n  loading?: boolean;\n  idModeEnabled?: boolean;\n}\n\nexport const _CommandPalette = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<CommandPaletteProps>\n>(\n  (\n    {\n      children,\n      onChangeSearch,\n      search,\n      mode,\n      setMode,\n      loading,\n      idModeEnabled = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const [selected, setSelected] = useState<number>(0);\n    const listWrapperRef = useRef<HTMLDivElement>(null);\n\n    const scrollToTop = () => {\n      listWrapperRef.current?.scrollTo({ top: 0, behavior: \"smooth\" });\n    };\n\n    const scrollToBottom = () => {\n      listWrapperRef.current?.scrollTo({\n        top: listWrapperRef.current.scrollHeight,\n        behavior: \"smooth\",\n      });\n    };\n\n    const filterChildren = useMemo(() => {\n      let itemsLength = 0;\n      let commandsLength = 0;\n\n      const items = deepMap(children, (child) => {\n        const item = child as ReactElement<CommandPaletteItemProps>;\n        let clonedElement;\n\n        if (item && item.type === CommandPaletteList) {\n          clonedElement = cloneElement(item, {\n            ...item.props,\n          });\n        }\n\n        if (item && item.type === CommandPaletteCommandItem) {\n          clonedElement = cloneElement(item, {\n            ...item.props,\n            index: itemsLength,\n            selected,\n          });\n\n          itemsLength++;\n          commandsLength++;\n        }\n\n        if (item && item.type === CommandPaletteItem) {\n          clonedElement = cloneElement(item, {\n            ...item.props,\n            index: itemsLength,\n            selected,\n          });\n\n          itemsLength++;\n        }\n\n        return clonedElement;\n      });\n\n      return { items, itemsLength, commandsLength };\n    }, [children, selected]);\n\n    const handleChangeSelected = (direction?: \"up\" | \"down\") => {\n      const items = document.querySelectorAll(\".cp-item\");\n\n      let index = 0;\n      let newIndex = 0;\n      let newItem: Element | null = null;\n\n      if (direction === \"down\") {\n        items.forEach((_, i) => {\n          if (i === selected) {\n            index = i;\n          }\n        });\n\n        newIndex = index === items.length - 1 ? 0 : index + 1;\n      } else if (direction === \"up\") {\n        items.forEach((_, i) => {\n          if (i === selected) {\n            index = i;\n          }\n        });\n\n        newIndex = !index ? items.length - 1 : index - 1;\n      } else {\n        setSelected(0);\n      }\n\n      newItem = items[newIndex];\n\n      if (newItem && typeof newIndex === \"number\") {\n        setSelected(newIndex);\n\n        newItem.scrollIntoView({\n          behavior: \"smooth\",\n          block: newIndex ? \"center\" : \"end\",\n        });\n      }\n    };\n\n    return (\n      <Dialog {...rest} ref={ref}>\n        <SearchContextProvider value={{ search, onChangeSearch }}>\n          <SelectedContextProvider value={{ selected: selected, setSelected }}>\n            <StyledCommandPalette\n              onKeyDown={(e) => {\n                if (e.key === \"ArrowDown\") {\n                  e.preventDefault();\n                  handleChangeSelected(\"down\");\n                }\n\n                if (e.key === \"ArrowUp\") {\n                  e.preventDefault();\n                  handleChangeSelected(\"up\");\n                }\n\n                if (e.key === \"End\") {\n                  e.preventDefault();\n                  scrollToBottom();\n                  setSelected(filterChildren.itemsLength - 1);\n                }\n\n                if (e.key === \"Home\") {\n                  e.preventDefault();\n                  scrollToTop();\n                  setSelected(0);\n                }\n              }}\n            >\n              <ModeContextProvider value={{ mode, setMode, idModeEnabled }}>\n                <CommandPaletteHeader\n                  commandsLength={filterChildren.commandsLength}\n                  itemsLength={filterChildren.itemsLength}\n                  loading={loading}\n                />\n              </ModeContextProvider>\n\n              <StyledCommandPaletteWrapper ref={listWrapperRef}>\n                {filterChildren.items}\n              </StyledCommandPaletteWrapper>\n            </StyledCommandPalette>\n          </SelectedContextProvider>\n        </SearchContextProvider>\n      </Dialog>\n    );\n  }\n);\n\n_CommandPalette.displayName = \"CommandPalette\";\n\n// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757\nexport const CommandPalette = Object.assign({}, _CommandPalette, {\n  List: CommandPaletteList,\n  Item: CommandPaletteItem,\n  CommandItem: CommandPaletteCommandItem,\n});\n"],"mappings":"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"}

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

@@ -17,12 +17,12 @@ exports.StyledCommandPalette = StyledCommandPalette;
 var StyledCommandPaletteWrapper = _styledComponents.default.div.withConfig({
   displayName: "CommandPalettestyles__StyledCommandPaletteWrapper",
   componentId: "sc-na3mad-1"
-})(["overflow-x:hidden;overflow-y:auto;max-height:450px;&:not(:empty){padding-bottom:8px;padding-top:8px;}"]);
+})(["overflow-x:hidden;overflow-y:auto;max-height:450px;&:not(:empty){border-top:1px solid var(--color-theme-400);padding-bottom:8px;padding-top:8px;}"]);
 exports.StyledCommandPaletteWrapper = StyledCommandPaletteWrapper;
 var StyledCommandPaletteHeader = _styledComponents.default.div.withConfig({
   displayName: "CommandPalettestyles__StyledCommandPaletteHeader",
   componentId: "sc-na3mad-2"
-})(["align-items:center;display:flex;padding-bottom:12px;padding-left:16px;padding-right:16px;padding-top:12px;border-bottom:1px solid var(--color-theme-400);"]);
+})(["align-items:center;display:flex;padding-bottom:12px;padding-left:16px;padding-right:16px;padding-top:12px;"]);
 exports.StyledCommandPaletteHeader = StyledCommandPaletteHeader;
 var StyledSearchIcon = _styledComponents.default.div.withConfig({
   displayName: "CommandPalettestyles__StyledSearchIcon",

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

@@ -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","li","$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    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  border-bottom: 1px solid var(--color-theme-400);\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.li<{$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,6GASpD;AAAC;AAEK,IAAMG,0BAA0B,GAAGJ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,iKAQnD;AAAC;AAEK,IAAMI,gBAAgB,GAAGL,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAAC;AAEK,IAAMK,WAAW,GAAGN,yBAAM,CAACO,KAAK;EAAA;EAAA;AAAA,wZAMnCC,mBAAM,CAACC,EAAE,CAwBZ;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,EAAE;EAAA;EAAA;AAAA,2WAS3B;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"}
+{"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","li","$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.li<{$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,wZAMnCC,mBAAM,CAACC,EAAE,CAwBZ;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,EAAE;EAAA;EAAA;AAAA,2WAS3B;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"}

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

@@ -16,8 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
-  var handleChange = _ref.handleChange,
-    _ref$loading = _ref.loading,
+  var _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
     commandsLength = _ref.commandsLength,
     itemsLength = _ref.itemsLength;
@@ -39,6 +38,7 @@ var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
   };
   var clearInput = function clearInput() {
     if (inputRef && inputRef.current) {
+      inputRef.current.value = "";
       onChangeSearch("");
     }
   };
@@ -63,6 +63,31 @@ var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
     }
     return "Search or jump to";
   }, [mode]);
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === "Backspace" && mode !== "default" && e.target.value === "") {
+      setMode("default");
+      clearInput();
+    }
+    if (e.key === "Enter") {
+      var selectedItem = document.querySelectorAll(".cp-item")[selected];
+      if (itemsLength > 0) {
+        selectedItem.click();
+      }
+    }
+
+    // mode === 'id' TYPE NUMBER PREVENTING KEYS
+
+    if (mode === "id") {
+      // enableNumbers && key combos
+      var isNumber = isFinite(e.key);
+      var enabledKeyCombos = e.metaKey && "a" || e.metaKey && "c" || e.metaKey && "v" || e.metaKey && "x" || e.key === "Backspace" || e.key === "Tab";
+
+      // check conditions and remove keys
+      if (!enabledKeyCombos && !isNumber) {
+        e.preventDefault();
+      }
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteHeader, {
     className: "cp-header"
   }, /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledSearchIcon, null, /*#__PURE__*/_react.default.createElement(_Icons.SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledParameter, null, "ID#:") : null, _typeof(mode) === "object" ? /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledParameter, null, mode.name.length > 10 ? mode.name.slice(0, 10) + "..." : mode.name, "/") : null, /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledInput, {
@@ -77,31 +102,23 @@ var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
     role: "combobox",
     spellCheck: false,
     value: search,
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === "Backspace" && mode !== "default" && e.target.value === "") {
-        setMode("default");
-        clearInput();
-      }
-      if (e.key === "Enter") {
-        var selectedItem = document.querySelectorAll(".cp-item")[selected];
-        if (itemsLength > 0) {
-          selectedItem.click();
-        }
-      }
-    },
+    onKeyDown: handleKeyDown,
     onChange: function onChange(e) {
       var inputText = e.target.value;
       if (inputText.startsWith("#") && idModeEnabled) {
         setMode("id");
         clearInput();
-        return false;
+        return;
       }
-      handleChange(e);
+      onChangeSearch(inputText);
     },
     onPaste: function onPaste(e) {
+      e.preventDefault();
       var pastedText = e.clipboardData.getData("text");
       if (pastedText.startsWith("#") && idModeEnabled) {
+        pastedText = pastedText.split("#")[1];
         setMode("id");
+        onChangeSearch(pastedText);
       }
     }
   }), /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledActionWrapper, null, loading ? /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledSpinnerLoader, {

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

@@ -1 +1 @@
-{"version":3,"file":"CommandPaletteHeader.js","names":["CommandPaletteHeader","handleChange","loading","commandsLength","itemsLength","inputRef","useRef","useModeContext","mode","setMode","idModeEnabled","useSelectedContext","setSelected","selected","useSearchContext","search","onChangeSearch","focusInput","current","focus","clearInput","useEffect","length","handleInputPlaceholder","useMemo","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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"}
+{"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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAOhD,OAAO,EAEL,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAW9B,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,GAAG,aAAa,CAAC;IAC7B,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,eAAe;;wCAkK3B,CAAC;AAKF,eAAO,MAAM,cAAc;;;;;;;;;CAIzB,CAAC"}
+{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAOhD,OAAO,EAEL,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAW9B,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,GAAG,aAAa,CAAC;IAC7B,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,eAAe;;wCA6J3B,CAAC;AAKF,eAAO,MAAM,cAAc;;;;;;;;;CAIzB,CAAC"}

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

@@ -24,9 +24,6 @@ export var _CommandPalette = /*#__PURE__*/forwardRef(function (_ref, ref) {
     selected = _useState[0],
     setSelected = _useState[1];
   var listWrapperRef = useRef(null);
-  var handleChange = function handleChange(e) {
-    onChangeSearch(e.target.value);
-  };
   var scrollToTop = function scrollToTop() {
     var _listWrapperRef$curre;
     (_listWrapperRef$curre = listWrapperRef.current) == null ? void 0 : _listWrapperRef$curre.scrollTo({
@@ -144,7 +141,6 @@ export var _CommandPalette = /*#__PURE__*/forwardRef(function (_ref, ref) {
       idModeEnabled: idModeEnabled
     }
   }, /*#__PURE__*/React.createElement(CommandPaletteHeader, {
-    handleChange: handleChange,
     commandsLength: filterChildren.commandsLength,
     itemsLength: filterChildren.itemsLength,
     loading: loading

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

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.js","names":["React","cloneElement","forwardRef","useMemo","useRef","useState","Dialog","StyledCommandPalette","StyledCommandPaletteWrapper","CommandPaletteCommandItem","CommandPaletteHeader","CommandPaletteItem","CommandPaletteList","ModeContextProvider","SelectedContextProvider","SearchContextProvider","deepMap","_CommandPalette","ref","children","onChangeSearch","search","mode","setMode","loading","idModeEnabled","rest","selected","setSelected","listWrapperRef","handleChange","e","target","value","scrollToTop","current","scrollTo","top","behavior","scrollToBottom","scrollHeight","filterChildren","itemsLength","commandsLength","items","child","item","clonedElement","type","props","index","handleChangeSelected","direction","document","querySelectorAll","newIndex","newItem","forEach","_","i","length","scrollIntoView","block","key","preventDefault","displayName","CommandPalette","Object","assign","List","Item","CommandItem"],"sources":["../../../../src/components/CommandPalette/CommandPalette.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  cloneElement,\n  forwardRef,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n  StyledCommandPalette,\n  StyledCommandPaletteWrapper,\n} from \"./CommandPalette.styles\";\nimport { CommandPaletteCommandItem } from \"./CommandPaletteCommandItem\";\nimport { CommandPaletteHeader } from \"./CommandPaletteHeader\";\nimport {\n  CommandPaletteItem,\n  CommandPaletteItemProps,\n} from \"./CommandPaletteItem\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\n\nimport {\n  ModeContextProvider,\n  SelectedContextProvider,\n  SearchContextProvider,\n} from \"./context\";\n\nimport { deepMap } from \"../../utils/deepChildrenMap\";\n\nexport interface SearchContext {\n  name: string;\n  class: string;\n}\n\nexport interface CommandPaletteProps extends DialogProps {\n  onChangeSearch: (search: string) => void;\n  search: string;\n  mode: string | SearchContext;\n  setMode: (value: string) => void;\n  loading?: boolean;\n  idModeEnabled?: boolean;\n}\n\nexport const _CommandPalette = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<CommandPaletteProps>\n>(\n  (\n    {\n      children,\n      onChangeSearch,\n      search,\n      mode,\n      setMode,\n      loading,\n      idModeEnabled = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const [selected, setSelected] = useState<number>(0);\n    const listWrapperRef = useRef<HTMLDivElement>(null);\n\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChangeSearch(e.target.value);\n    };\n\n    const scrollToTop = () => {\n      listWrapperRef.current?.scrollTo({ top: 0, behavior: \"smooth\" });\n    };\n\n    const scrollToBottom = () => {\n      listWrapperRef.current?.scrollTo({\n        top: listWrapperRef.current.scrollHeight,\n        behavior: \"smooth\",\n      });\n    };\n\n    const filterChildren = useMemo(() => {\n      let itemsLength = 0;\n      let commandsLength = 0;\n\n      const items = deepMap(children, (child) => {\n        const item = child as ReactElement<CommandPaletteItemProps>;\n        let clonedElement;\n\n        if (item && item.type === CommandPaletteList) {\n          clonedElement = cloneElement(item, {\n            ...item.props,\n          });\n        }\n\n        if (item && item.type === CommandPaletteCommandItem) {\n          clonedElement = cloneElement(item, {\n            ...item.props,\n            index: itemsLength,\n            selected,\n          });\n\n          itemsLength++;\n          commandsLength++;\n        }\n\n        if (item && item.type === CommandPaletteItem) {\n          clonedElement = cloneElement(item, {\n            ...item.props,\n            index: itemsLength,\n            selected,\n          });\n\n          itemsLength++;\n        }\n\n        return clonedElement;\n      });\n\n      return { items, itemsLength, commandsLength };\n    }, [children, selected]);\n\n    const handleChangeSelected = (direction?: \"up\" | \"down\") => {\n      const items = document.querySelectorAll(\".cp-item\");\n\n      let index = 0;\n      let newIndex = 0;\n      let newItem: Element | null = null;\n\n      if (direction === \"down\") {\n        items.forEach((_, i) => {\n          if (i === selected) {\n            index = i;\n          }\n        });\n\n        newIndex = index === items.length - 1 ? 0 : index + 1;\n      } else if (direction === \"up\") {\n        items.forEach((_, i) => {\n          if (i === selected) {\n            index = i;\n          }\n        });\n\n        newIndex = !index ? items.length - 1 : index - 1;\n      } else {\n        setSelected(0);\n      }\n\n      newItem = items[newIndex];\n\n      if (newItem && typeof newIndex === \"number\") {\n        setSelected(newIndex);\n\n        newItem.scrollIntoView({\n          behavior: \"smooth\",\n          block: newIndex ? \"center\" : \"end\",\n        });\n      }\n    };\n\n    return (\n      <Dialog {...rest} ref={ref}>\n        <SearchContextProvider value={{ search, onChangeSearch }}>\n          <SelectedContextProvider value={{ selected: selected, setSelected }}>\n            <StyledCommandPalette\n              onKeyDown={(e) => {\n                if (e.key === \"ArrowDown\") {\n                  e.preventDefault();\n                  handleChangeSelected(\"down\");\n                }\n\n                if (e.key === \"ArrowUp\") {\n                  e.preventDefault();\n                  handleChangeSelected(\"up\");\n                }\n\n                if (e.key === \"End\") {\n                  e.preventDefault();\n                  scrollToBottom();\n                  setSelected(filterChildren.itemsLength - 1);\n                }\n\n                if (e.key === \"Home\") {\n                  e.preventDefault();\n                  scrollToTop();\n                  setSelected(0);\n                }\n              }}\n            >\n              <ModeContextProvider value={{ mode, setMode, idModeEnabled }}>\n                <CommandPaletteHeader\n                  handleChange={handleChange}\n                  commandsLength={filterChildren.commandsLength}\n                  itemsLength={filterChildren.itemsLength}\n                  loading={loading}\n                />\n              </ModeContextProvider>\n\n              <StyledCommandPaletteWrapper ref={listWrapperRef}>\n                {filterChildren.items}\n              </StyledCommandPaletteWrapper>\n            </StyledCommandPalette>\n          </SelectedContextProvider>\n        </SearchContextProvider>\n      </Dialog>\n    );\n  }\n);\n\n_CommandPalette.displayName = \"CommandPalette\";\n\n// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757\nexport const CommandPalette = Object.assign({}, _CommandPalette, {\n  List: CommandPaletteList,\n  Item: CommandPaletteItem,\n  CommandItem: CommandPaletteCommandItem,\n});\n"],"mappings":"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"}
+{"version":3,"file":"CommandPalette.js","names":["React","cloneElement","forwardRef","useMemo","useRef","useState","Dialog","StyledCommandPalette","StyledCommandPaletteWrapper","CommandPaletteCommandItem","CommandPaletteHeader","CommandPaletteItem","CommandPaletteList","ModeContextProvider","SelectedContextProvider","SearchContextProvider","deepMap","_CommandPalette","ref","children","onChangeSearch","search","mode","setMode","loading","idModeEnabled","rest","selected","setSelected","listWrapperRef","scrollToTop","current","scrollTo","top","behavior","scrollToBottom","scrollHeight","filterChildren","itemsLength","commandsLength","items","child","item","clonedElement","type","props","index","handleChangeSelected","direction","document","querySelectorAll","newIndex","newItem","forEach","_","i","length","scrollIntoView","block","e","key","preventDefault","displayName","CommandPalette","Object","assign","List","Item","CommandItem"],"sources":["../../../../src/components/CommandPalette/CommandPalette.tsx"],"sourcesContent":["import React, {\n  cloneElement,\n  forwardRef,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n  StyledCommandPalette,\n  StyledCommandPaletteWrapper,\n} from \"./CommandPalette.styles\";\nimport { CommandPaletteCommandItem } from \"./CommandPaletteCommandItem\";\nimport { CommandPaletteHeader } from \"./CommandPaletteHeader\";\nimport {\n  CommandPaletteItem,\n  CommandPaletteItemProps,\n} from \"./CommandPaletteItem\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\n\nimport {\n  ModeContextProvider,\n  SelectedContextProvider,\n  SearchContextProvider,\n} from \"./context\";\n\nimport { deepMap } from \"../../utils/deepChildrenMap\";\n\nexport interface SearchContext {\n  name: string;\n  class: string;\n}\n\nexport interface CommandPaletteProps extends DialogProps {\n  onChangeSearch: (search: string) => void;\n  search: string;\n  mode: string | SearchContext;\n  setMode: (value: string) => void;\n  loading?: boolean;\n  idModeEnabled?: boolean;\n}\n\nexport const _CommandPalette = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<CommandPaletteProps>\n>(\n  (\n    {\n      children,\n      onChangeSearch,\n      search,\n      mode,\n      setMode,\n      loading,\n      idModeEnabled = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const [selected, setSelected] = useState<number>(0);\n    const listWrapperRef = useRef<HTMLDivElement>(null);\n\n    const scrollToTop = () => {\n      listWrapperRef.current?.scrollTo({ top: 0, behavior: \"smooth\" });\n    };\n\n    const scrollToBottom = () => {\n      listWrapperRef.current?.scrollTo({\n        top: listWrapperRef.current.scrollHeight,\n        behavior: \"smooth\",\n      });\n    };\n\n    const filterChildren = useMemo(() => {\n      let itemsLength = 0;\n      let commandsLength = 0;\n\n      const items = deepMap(children, (child) => {\n        const item = child as ReactElement<CommandPaletteItemProps>;\n        let clonedElement;\n\n        if (item && item.type === CommandPaletteList) {\n          clonedElement = cloneElement(item, {\n            ...item.props,\n          });\n        }\n\n        if (item && item.type === CommandPaletteCommandItem) {\n          clonedElement = cloneElement(item, {\n            ...item.props,\n            index: itemsLength,\n            selected,\n          });\n\n          itemsLength++;\n          commandsLength++;\n        }\n\n        if (item && item.type === CommandPaletteItem) {\n          clonedElement = cloneElement(item, {\n            ...item.props,\n            index: itemsLength,\n            selected,\n          });\n\n          itemsLength++;\n        }\n\n        return clonedElement;\n      });\n\n      return { items, itemsLength, commandsLength };\n    }, [children, selected]);\n\n    const handleChangeSelected = (direction?: \"up\" | \"down\") => {\n      const items = document.querySelectorAll(\".cp-item\");\n\n      let index = 0;\n      let newIndex = 0;\n      let newItem: Element | null = null;\n\n      if (direction === \"down\") {\n        items.forEach((_, i) => {\n          if (i === selected) {\n            index = i;\n          }\n        });\n\n        newIndex = index === items.length - 1 ? 0 : index + 1;\n      } else if (direction === \"up\") {\n        items.forEach((_, i) => {\n          if (i === selected) {\n            index = i;\n          }\n        });\n\n        newIndex = !index ? items.length - 1 : index - 1;\n      } else {\n        setSelected(0);\n      }\n\n      newItem = items[newIndex];\n\n      if (newItem && typeof newIndex === \"number\") {\n        setSelected(newIndex);\n\n        newItem.scrollIntoView({\n          behavior: \"smooth\",\n          block: newIndex ? \"center\" : \"end\",\n        });\n      }\n    };\n\n    return (\n      <Dialog {...rest} ref={ref}>\n        <SearchContextProvider value={{ search, onChangeSearch }}>\n          <SelectedContextProvider value={{ selected: selected, setSelected }}>\n            <StyledCommandPalette\n              onKeyDown={(e) => {\n                if (e.key === \"ArrowDown\") {\n                  e.preventDefault();\n                  handleChangeSelected(\"down\");\n                }\n\n                if (e.key === \"ArrowUp\") {\n                  e.preventDefault();\n                  handleChangeSelected(\"up\");\n                }\n\n                if (e.key === \"End\") {\n                  e.preventDefault();\n                  scrollToBottom();\n                  setSelected(filterChildren.itemsLength - 1);\n                }\n\n                if (e.key === \"Home\") {\n                  e.preventDefault();\n                  scrollToTop();\n                  setSelected(0);\n                }\n              }}\n            >\n              <ModeContextProvider value={{ mode, setMode, idModeEnabled }}>\n                <CommandPaletteHeader\n                  commandsLength={filterChildren.commandsLength}\n                  itemsLength={filterChildren.itemsLength}\n                  loading={loading}\n                />\n              </ModeContextProvider>\n\n              <StyledCommandPaletteWrapper ref={listWrapperRef}>\n                {filterChildren.items}\n              </StyledCommandPaletteWrapper>\n            </StyledCommandPalette>\n          </SelectedContextProvider>\n        </SearchContextProvider>\n      </Dialog>\n    );\n  }\n);\n\n_CommandPalette.displayName = \"CommandPalette\";\n\n// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757\nexport const CommandPalette = Object.assign({}, _CommandPalette, {\n  List: CommandPaletteList,\n  Item: CommandPaletteItem,\n  CommandItem: CommandPaletteCommandItem,\n});\n"],"mappings":"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"}

package/dist/esm/components/CommandPalette/CommandPalette.styles.d.ts.map

@@ -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,oEASvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oEAQtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,sEA8BvB,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;eAAyB,OAAO;SA4BpE,CAAC;AAEF,eAAO,MAAM,+BAA+B;eA9BkB,OAAO;SAgCpE,CAAC;AAEF,eAAO,MAAM,mBAAmB,uzJAE/B,CAAC;AAEF,eAAO,MAAM,8BAA8B,oEAU1C,CAAC"}
+{"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,sEA8BvB,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;eAAyB,OAAO;SA4BpE,CAAC;AAEF,eAAO,MAAM,+BAA+B;eA9BkB,OAAO;SAgCpE,CAAC;AAEF,eAAO,MAAM,mBAAmB,uzJAE/B,CAAC;AAEF,eAAO,MAAM,8BAA8B,oEAU1C,CAAC"}

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

@@ -9,11 +9,11 @@ export var StyledCommandPalette = styled.div.withConfig({
 export var StyledCommandPaletteWrapper = styled.div.withConfig({
   displayName: "CommandPalettestyles__StyledCommandPaletteWrapper",
   componentId: "sc-na3mad-1"
-})(["overflow-x:hidden;overflow-y:auto;max-height:450px;&:not(:empty){padding-bottom:8px;padding-top:8px;}"]);
+})(["overflow-x:hidden;overflow-y:auto;max-height:450px;&:not(:empty){border-top:1px solid var(--color-theme-400);padding-bottom:8px;padding-top:8px;}"]);
 export var StyledCommandPaletteHeader = styled.div.withConfig({
   displayName: "CommandPalettestyles__StyledCommandPaletteHeader",
   componentId: "sc-na3mad-2"
-})(["align-items:center;display:flex;padding-bottom:12px;padding-left:16px;padding-right:16px;padding-top:12px;border-bottom:1px solid var(--color-theme-400);"]);
+})(["align-items:center;display:flex;padding-bottom:12px;padding-left:16px;padding-right:16px;padding-top:12px;"]);
 export var StyledSearchIcon = styled.div.withConfig({
   displayName: "CommandPalettestyles__StyledSearchIcon",
   componentId: "sc-na3mad-3"

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

@@ -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","li","$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    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  border-bottom: 1px solid var(--color-theme-400);\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.li<{$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,6GASpD;AAED,OAAO,IAAME,0BAA0B,GAAGP,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,iKAQnD;AAED,OAAO,IAAMG,gBAAgB,GAAGR,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAED,OAAO,IAAMI,WAAW,GAAGT,MAAM,CAACU,KAAK;EAAA;EAAA;AAAA,wZAMnCR,MAAM,CAACS,EAAE,CAwBZ;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,EAAE;EAAA;EAAA;AAAA,2WAS3B;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"}
+{"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","li","$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.li<{$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,wZAMnCR,MAAM,CAACS,EAAE,CAwBZ;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,EAAE;EAAA;EAAA;AAAA,2WAS3B;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"}

package/dist/esm/components/CommandPalette/CommandPaletteHeader.d.ts

@@ -1,12 +1,11 @@
-import { ChangeEvent } from "react";
+/// <reference types="react" />
 export interface CommandPaletteHeaderProps {
-    handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
     loading?: boolean;
     commandsLength: number;
     itemsLength: number;
 }
 export declare const CommandPaletteHeader: {
-    ({ handleChange, loading, commandsLength, itemsLength, }: CommandPaletteHeaderProps): JSX.Element;
+    ({ loading, commandsLength, itemsLength, }: CommandPaletteHeaderProps): JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=CommandPaletteHeader.d.ts.map

package/dist/esm/components/CommandPalette/CommandPaletteHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPaletteHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAA8B,MAAM,OAAO,CAAC;AAiBvE,MAAM,WAAW,yBAAyB;IACxC,YAAY,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB;8DAK9B,yBAAyB;;CAuK3B,CAAC"}
+{"version":3,"file":"CommandPaletteHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"names":[],"mappings":";AAiBA,MAAM,WAAW,yBAAyB;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB;gDAI9B,yBAAyB;;CAgM3B,CAAC"}

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

@@ -7,8 +7,7 @@ import { useSelectedContext } from "./context";
 import { useModeContext } from "./context/ModeContext";
 import { useSearchContext } from "./context/SearchContext";
 export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
-  var handleChange = _ref.handleChange,
-    _ref$loading = _ref.loading,
+  var _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
     commandsLength = _ref.commandsLength,
     itemsLength = _ref.itemsLength;
@@ -30,6 +29,7 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
   };
   var clearInput = function clearInput() {
     if (inputRef && inputRef.current) {
+      inputRef.current.value = "";
       onChangeSearch("");
     }
   };
@@ -54,6 +54,31 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
     }
     return "Search or jump to";
   }, [mode]);
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === "Backspace" && mode !== "default" && e.target.value === "") {
+      setMode("default");
+      clearInput();
+    }
+    if (e.key === "Enter") {
+      var selectedItem = document.querySelectorAll(".cp-item")[selected];
+      if (itemsLength > 0) {
+        selectedItem.click();
+      }
+    }
+
+    // mode === 'id' TYPE NUMBER PREVENTING KEYS
+
+    if (mode === "id") {
+      // enableNumbers && key combos
+      var isNumber = isFinite(e.key);
+      var enabledKeyCombos = e.metaKey && "a" || e.metaKey && "c" || e.metaKey && "v" || e.metaKey && "x" || e.key === "Backspace" || e.key === "Tab";
+
+      // check conditions and remove keys
+      if (!enabledKeyCombos && !isNumber) {
+        e.preventDefault();
+      }
+    }
+  };
   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, typeof mode === "object" ? /*#__PURE__*/React.createElement(StyledParameter, null, mode.name.length > 10 ? mode.name.slice(0, 10) + "..." : mode.name, "/") : null, /*#__PURE__*/React.createElement(StyledInput, {
@@ -68,31 +93,23 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
     role: "combobox",
     spellCheck: false,
     value: search,
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === "Backspace" && mode !== "default" && e.target.value === "") {
-        setMode("default");
-        clearInput();
-      }
-      if (e.key === "Enter") {
-        var selectedItem = document.querySelectorAll(".cp-item")[selected];
-        if (itemsLength > 0) {
-          selectedItem.click();
-        }
-      }
-    },
+    onKeyDown: handleKeyDown,
     onChange: function onChange(e) {
       var inputText = e.target.value;
       if (inputText.startsWith("#") && idModeEnabled) {
         setMode("id");
         clearInput();
-        return false;
+        return;
       }
-      handleChange(e);
+      onChangeSearch(inputText);
     },
     onPaste: function onPaste(e) {
+      e.preventDefault();
       var pastedText = e.clipboardData.getData("text");
       if (pastedText.startsWith("#") && idModeEnabled) {
+        pastedText = pastedText.split("#")[1];
         setMode("id");
+        onChangeSearch(pastedText);
       }
     }
   }), /*#__PURE__*/React.createElement(StyledActionWrapper, null, loading ? /*#__PURE__*/React.createElement(StyledSpinnerLoader, {

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","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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"}
+{"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":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACzD,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,SAAS,EAAEC,WAAW,EAAEC,eAAe,QAAQ,UAAU;AAClE,SAASC,OAAO,QAAQ,YAAY;AACpC,SACEC,mBAAmB,EACnBC,0BAA0B,EAC1BC,WAAW,EACXC,eAAe,EACfC,gBAAgB,EAChBC,mBAAmB,QACd,yBAAyB;AAChC,SAASC,kBAAkB,QAAQ,WAAW;AAE9C,SAASC,cAAc,QAAQ,uBAAuB;AACtD,SAASC,gBAAgB,QAAQ,yBAAyB;AAQ1D,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,OAIA;EAAA,wBAH/BC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,WAAW,QAAXA,WAAW;EAEX,IAAMC,QAAQ,GAAGnB,MAAM,CAAmB,IAAI,CAAC;EAC/C,sBAAyCa,cAAc,EAAE;IAAjDO,IAAI,mBAAJA,IAAI;IAAEC,OAAO,mBAAPA,OAAO;IAAEC,aAAa,mBAAbA,aAAa;EACpC,0BAAkCV,kBAAkB,EAAE;IAA9CW,WAAW,uBAAXA,WAAW;IAAEC,QAAQ,uBAARA,QAAQ;EAC7B,wBAAmCV,gBAAgB,EAAE;IAA7CW,MAAM,qBAANA,MAAM;IAAEC,cAAc,qBAAdA,cAAc;EAE9B,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,IAAIR,QAAQ,IAAIA,QAAQ,CAACS,OAAO,EAAE;MAChCT,QAAQ,CAACS,OAAO,CAACC,KAAK,EAAE;IAC1B;EACF,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,IAAIX,QAAQ,IAAIA,QAAQ,CAACS,OAAO,EAAE;MAChCT,QAAQ,CAACS,OAAO,CAACG,KAAK,GAAG,EAAE;MAC3BL,cAAc,CAAC,EAAE,CAAC;IACpB;EACF,CAAC;EAED5B,SAAS,CAAC,YAAM;IACd,IAAI2B,MAAM,CAACO,MAAM,GAAG,CAAC,EAAE;MACrB,IAAId,WAAW,GAAGD,cAAc,EAAE;QAChCM,WAAW,CAACN,cAAc,CAAC;MAC7B,CAAC,MAAM;QACLM,WAAW,CAAC,CAAC,CAAC;MAChB;IACF;EACF,CAAC,EAAE,CAACE,MAAM,EAAER,cAAc,EAAEC,WAAW,EAAEK,WAAW,CAAC,CAAC;EAEtDzB,SAAS,CAAC,YAAM;IACd6B,UAAU,EAAE;EACd,CAAC,EAAE,CAACP,IAAI,CAAC,CAAC;EAEV,IAAMa,sBAAsB,GAAGlC,OAAO,CAAC,YAAM;IAC3C,IAAI,OAAOqB,IAAI,KAAK,QAAQ,EAAE;MAC5B,OAAO,QAAQ;IACjB;IAEA,IAAIA,IAAI,KAAK,IAAI,EAAE;MACjB,OAAO,IAAI;IACb;IAEA,OAAO,mBAAmB;EAC5B,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,IAAMc,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAC,EAAK;IAC3B,IACEA,CAAC,CAACC,GAAG,KAAK,WAAW,IACrBhB,IAAI,KAAK,SAAS,IACjBe,CAAC,CAACE,MAAM,CAAsBN,KAAK,KAAK,EAAE,EAC3C;MACAV,OAAO,CAAC,SAAS,CAAC;MAClBS,UAAU,EAAE;IACd;IAEA,IAAIK,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;MACrB,IAAME,YAAY,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,UAAU,CAAC,CACxDhB,QAAQ,CACM;MAEhB,IAAIN,WAAW,GAAG,CAAC,EAAE;QACnBoB,YAAY,CAACG,KAAK,EAAE;MACtB;IACF;;IAEA;;IAEA,IAAIrB,IAAI,KAAK,IAAI,EAAE;MACjB;MACA,IAAMsB,QAAQ,GAAGC,QAAQ,CAACR,CAAC,CAACC,GAAG,CAAC;MAChC,IAAMQ,gBAAgB,GACnBT,CAAC,CAACU,OAAO,IAAI,GAAG,IAChBV,CAAC,CAACU,OAAO,IAAI,GAAI,IACjBV,CAAC,CAACU,OAAO,IAAI,GAAI,IACjBV,CAAC,CAACU,OAAO,IAAI,GAAI,IAClBV,CAAC,CAACC,GAAG,KAAK,WAAW,IACrBD,CAAC,CAACC,GAAG,KAAK,KAAK;;MAEjB;MACA,IAAI,CAACQ,gBAAgB,IAAI,CAACF,QAAQ,EAAE;QAClCP,CAAC,CAACW,cAAc,EAAE;MACpB;IACF;EACF,CAAC;EAED,oBACE,oBAAC,0BAA0B;IAAC,SAAS,EAAC;EAAW,gBAC/C,oBAAC,gBAAgB,qBACf,oBAAC,eAAe,OAAG,CACF,EAElB1B,IAAI,KAAK,IAAI,gBAAG,oBAAC,eAAe,eAAuB,GAAG,IAAI,EAC9D,OAAOA,IAAI,KAAK,QAAQ,gBACvB,oBAAC,eAAe,QACbA,IAAI,CAAC2B,IAAI,CAACf,MAAM,GAAG,EAAE,GAAGZ,IAAI,CAAC2B,IAAI,CAACC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,KAAK,GAAG5B,IAAI,CAAC2B,IAAI,MACnD,GAChB,IAAI,eAER,oBAAC,WAAW;IACV,GAAG,EAAE5B,QAAS;IACd,SAAS;IACT,WAAW,EAAEc,sBAAuB;IACpC,IAAI,EAAEb,IAAI,KAAK,IAAI,GAAG,QAAQ,GAAG,MAAO;IACxC,qBAAkB,MAAM;IACxB,cAAc,EAAC,MAAM;IACrB,YAAY,EAAC,KAAK;IAClB,WAAW,EAAC,KAAK;IACjB,IAAI,EAAC,UAAU;IACf,UAAU,EAAE,KAAM;IAClB,KAAK,EAAEK,MAAO;IACd,SAAS,EAAES,aAAc;IACzB,QAAQ,EAAE,kBAACC,CAAC,EAAK;MACf,IAAMc,SAAS,GAAGd,CAAC,CAACE,MAAM,CAACN,KAAK;MAEhC,IAAIkB,SAAS,CAACC,UAAU,CAAC,GAAG,CAAC,IAAI5B,aAAa,EAAE;QAC9CD,OAAO,CAAC,IAAI,CAAC;QACbS,UAAU,EAAE;QACZ;MACF;MAEAJ,cAAc,CAACuB,SAAS,CAAC;IAC3B,CAAE;IACF,OAAO,EAAE,iBAACd,CAAC,EAAK;MACdA,CAAC,CAACW,cAAc,EAAE;MAClB,IAAIK,UAAU,GAAGhB,CAAC,CAACiB,aAAa,CAACC,OAAO,CAAC,MAAM,CAAC;MAEhD,IAAIF,UAAU,CAACD,UAAU,CAAC,GAAG,CAAC,IAAI5B,aAAa,EAAE;QAC/C6B,UAAU,GAAGA,UAAU,CAACG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACrCjC,OAAO,CAAC,IAAI,CAAC;QACbK,cAAc,CAACyB,UAAU,CAAC;MAC5B;IACF;EAAE,EACF,eAEF,oBAAC,mBAAmB,QACjBnC,OAAO,gBACN,oBAAC,mBAAmB;IAClB,aAAW,IAAK;IAChB,cAAW,YAAY;IACvB,iBAAe,GAAI;IACnB,iBAAe,CAAE;IACjB,IAAI,EAAC;EAAa,EAClB,GACA,IAAI,EAEPI,IAAI,KAAK,IAAI,IACd,OAAOA,IAAI,KAAK,QAAQ,IACxBE,aAAa,IACbG,MAAM,CAACO,MAAM,KAAK,CAAC,gBACjB,oBAAC,OAAO;IAAC,KAAK,EAAC,cAAc;IAAC,SAAS,EAAC;EAAK,gBAC3C,oBAAC,UAAU;IACT,UAAU,EAAE,oBAACG,CAAC,EAAK;MACjB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;QACrBf,OAAO,CAAC,IAAI,CAAC;QACbS,UAAU,EAAE;MACd;IACF,CAAE;IACF,OAAO,EAAE,mBAAM;MACbT,OAAO,CAAC,IAAI,CAAC;MACbS,UAAU,EAAE;IACd,CAAE;IACF,OAAO,EAAC;EAAW,gBAEnB,oBAAC,WAAW,OAAG,CACJ,CACL,GACR,IAAI,EAEPL,MAAM,CAACO,MAAM,GAAG,CAAC,IAAIZ,IAAI,KAAK,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,gBAC7D,oBAAC,OAAO;IAAC,KAAK,EAAC,OAAO;IAAC,SAAS,EAAC;EAAK,gBACpC,oBAAC,UAAU;IACT,OAAO,EAAC,WAAW;IACnB,UAAU,EAAE,oBAACe,CAAC,EAAK;MACjB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;QACrBf,OAAO,CAAC,SAAS,CAAC;QAClBS,UAAU,EAAE;QACZH,UAAU,EAAE;MACd;IACF,CAAE;IACF,OAAO,EAAE,mBAAM;MACbN,OAAO,CAAC,SAAS,CAAC;MAClBS,UAAU,EAAE;MACZH,UAAU,EAAE;IACd;EAAE,gBAEF,oBAAC,SAAS,OAAG,CACF,CACL,GACR,IAAI,CACY,CACK;AAEjC,CAAC;AAEDZ,oBAAoB,CAACwC,WAAW,GAAG,oBAAoB"}