@activecollab/components 1.0.265 → 1.0.267

package/dist/cjs/components/Autocomplete/Autocomplete.js

@@ -344,10 +344,17 @@ var Autocomplete = function Autocomplete(_ref) {
     });
   }, [filter, flatOptions, toggleSelected, handleDefaultOptionChange, handleEmpty, hover, showAddNew, showDefaultOption]);
   (0, _react.useEffect)(function () {
-    if (inputEl !== null && inputEl !== void 0 && inputEl.current) {
-      inputEl.current.onkeydown = handleOnKeyDown;
-      inputEl.current.onkeyup = handleInputChange;
+    var inputRef = inputEl === null || inputEl === void 0 ? void 0 : inputEl.current;
+    if (inputRef) {
+      inputRef.addEventListener("input", handleInputChange);
+      inputRef.addEventListener("keydown", handleOnKeyDown);
     }
+    return function () {
+      if (inputRef) {
+        inputRef.removeEventListener("input", handleInputChange);
+        inputRef.removeEventListener("keydown", handleOnKeyDown);
+      }
+    };
   }, [handleInputChange, handleOnKeyDown, inputEl]);
   var isDefaultOptionSelected = (0, _react.useCallback)(function () {
     if (preselectDefaultValue) {

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

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","names":["isOptionGroup","item","options","undefined","Autocomplete","type","inputEl","selected","emptyValue","noResultText","renderOption","option","name","defaultValue","sortDirection","handleChange","optionClassName","handleEmptyAction","disabledInternalSort","AutocompleteClassName","handleDefaultOptionChange","preselectDefaultValue","keepSameOptionsOrder","autoHeightMax","clearInputOnSelect","itemRef","useRef","listRef","selectedOptions","useMemo","Array","isArray","handleSort","useCallback","opts","sort","a","b","includes","id","sortList","localeCompare","sortedList","useState","by","hover","setHover","filter","setFilter","handleEmpty","e","button","current","focus","onAddNewMouseEnter","showAddNew","trim","every","v","toLowerCase","renderAddNew","filterOptions","trimmedFilter","isGrouped","hovered","reduce","acc","groupedOption","filteredOptions","length","list","showDefaultOption","flatOptions","handleInputChange","target","key","value","handleHoverCallback","toggleSelected","result","_id","dispatchEvent","Event","bubbles","handleMouseEnter","handleClick","preventDefault","handleRenderOption","index","highlightText","checked","onChange","handleOnMouseLeave","handleScroll","itemOffset","getClientHeight","getScrollTop","scrollTop","useEffect","offsetTop","handleOnKeyDown","handleKeyboardMovement","onkeydown","onkeyup","isDefaultOptionSelected","showNoResult","renderNoResult","onScroll","map","displayName"],"sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React, {\n  FC,\n  useCallback,\n  useState,\n  useMemo,\n  useEffect,\n  useRef,\n  ReactNode,\n  ReactElement,\n  MutableRefObject,\n} from \"react\";\nimport { Scrollbars } from \"react-custom-scrollbars-2\";\nimport highlightText from \"../../hooks/useHighlightText\";\nimport { handleKeyboardMovement } from \"./HandleKeyboard\";\nimport { IOptionItemProps, Option } from \"../Select/Option\";\nimport { IOptionGroupProps, OptionGroup } from \"../Select/OptionGroup\";\nimport {\n  StyledAutocompleteBody,\n  StyledAutocompleteNewItem,\n  StyledAutocompleteScrollShadow,\n} from \"./Styles\";\nimport { StyledOption } from \"../Select/Option/Styles\";\n\nexport function isOptionGroup(\n  item: IOptionGroupProps | IOptionItemProps\n): item is IOptionGroupProps {\n  return (item as IOptionGroupProps).options !== undefined;\n}\n\nexport interface IAutocompleteProps {\n  /** Select type: single or multiple */\n  type?: \"single\" | \"multiple\";\n  /** List of options or group options */\n  options?: (IOptionGroupProps | IOptionItemProps)[];\n  /** Selected values */\n  selected?: (string | number)[] | string | number;\n  /** Input Element. */\n  inputEl?: MutableRefObject<HTMLInputElement | null | undefined>;\n  /** Text for empty value */\n  emptyValue?: string;\n  /** Text for No result */\n  noResultText?: string;\n  /** Render option */\n  renderOption?: (\n    option: Record<string, ReactNode>,\n    data: Record<string, unknown>\n  ) => string | ReactElement;\n  /** Default value that renders on top of list */\n  defaultValue?: string;\n  /** Sort direction for labels */\n  sortDirection?: \"asc\" | \"desc\";\n  /** handleChange callback */\n  handleChange?: (\n    e: (string | number)[] | string | number | null | undefined\n  ) => void;\n  /** ClassName for single option */\n  optionClassName?: string;\n  /** handleEmptyAction */\n  handleEmptyAction?: (e: string | number) => void;\n  /** Disable sorting options */\n  disabledInternalSort?: boolean;\n  /** ClassName for Autocomplete component */\n  AutocompleteClassName?: string;\n  /** handleDefaultOptionChange callback */\n  handleDefaultOptionChange?: () => void;\n  /** Should default value be selected */\n  preselectDefaultValue?: boolean;\n  /** Should order stay the same after choosing an option */\n  keepSameOptionsOrder?: boolean;\n  /** Set max height property for scrollbars */\n  autoHeightMax?: number;\n  /** Clear input on select - works in single mode */\n  clearInputOnSelect?: boolean;\n}\n\ninterface IHover {\n  item: number | string | undefined | null;\n  by: \"mouse\" | \"keyboard\" | undefined;\n}\n\nexport const Autocomplete: FC<IAutocompleteProps> = ({\n  type,\n  options = [],\n  inputEl,\n  selected = [],\n  emptyValue,\n  noResultText,\n  renderOption = (option) => option?.name,\n  defaultValue,\n  sortDirection = \"asc\",\n  handleChange,\n  optionClassName,\n  handleEmptyAction,\n  disabledInternalSort,\n  AutocompleteClassName,\n  handleDefaultOptionChange,\n  preselectDefaultValue,\n  keepSameOptionsOrder = false,\n  autoHeightMax = 340,\n  clearInputOnSelect,\n}) => {\n  const itemRef = useRef<HTMLLIElement>(null);\n  const listRef = useRef<Scrollbars>(null);\n\n  const selectedOptions = useMemo(() => {\n    if (Array.isArray(selected)) {\n      return selected;\n    }\n    return [selected];\n  }, [selected]);\n\n  const handleSort = useCallback((opts) => {\n    if (keepSameOptionsOrder) {\n      return opts;\n    }\n    return opts.sort((a: IOptionItemProps, b: IOptionItemProps) => {\n      if (selectedOptions.includes(b.id) && !selectedOptions.includes(a.id)) {\n        return 1;\n      }\n      if (selectedOptions.includes(a.id) && !selectedOptions.includes(b.id)) {\n        return -1;\n      }\n      return 0;\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const sortList = useCallback(\n    (options) => {\n      if (disabledInternalSort) {\n        return handleSort([...options]);\n      }\n      return handleSort(\n        [...options].sort((a: IOptionItemProps, b: IOptionItemProps) =>\n          sortDirection === \"asc\"\n            ? a.name.localeCompare(b.name)\n            : b.name.localeCompare(a.name)\n        )\n      );\n    },\n    [sortDirection, disabledInternalSort, handleSort]\n  );\n\n  const sortedList = useMemo(() => sortList(options), [options, sortList]);\n\n  const [hover, setHover] = useState<IHover>({\n    item: undefined,\n    by: undefined,\n  });\n  const [filter, setFilter] = useState(\"\");\n\n  const handleEmpty = useCallback(\n    (e) => {\n      if (e && e.button !== 0) {\n        return;\n      }\n      if (handleEmptyAction) {\n        inputEl?.current?.focus();\n        setFilter(\"\");\n        handleEmptyAction(filter);\n      }\n    },\n    [filter, handleEmptyAction, inputEl]\n  );\n\n  const onAddNewMouseEnter = useCallback(\n    () => setHover({ item: \"addNew\", by: \"mouse\" }),\n    []\n  );\n\n  const showAddNew = useMemo(() => {\n    return !!(\n      emptyValue &&\n      filter.trim() &&\n      options.every((option) => {\n        if (isOptionGroup(option)) {\n          return option.options.every(\n            (v) => v.name.toLowerCase() !== filter.trim().toLowerCase()\n          );\n        }\n        return option.name.toLowerCase() !== filter.trim().toLowerCase();\n      })\n    );\n  }, [emptyValue, filter, options]);\n\n  const renderAddNew = useMemo(() => {\n    return (\n      <StyledAutocompleteNewItem\n        ref={hover.item === \"addNew\" ? itemRef : null}\n        key=\"emptyValue\"\n        hover={hover.item === \"addNew\"}\n        onMouseDown={handleEmpty}\n        onMouseEnter={onAddNewMouseEnter}\n      >\n        {emptyValue}\n      </StyledAutocompleteNewItem>\n    );\n  }, [emptyValue, handleEmpty, hover, onAddNewMouseEnter]);\n\n  const filterOptions = useCallback(\n    (options, filter) => {\n      const trimmedFilter = filter.trim();\n      const isGrouped = options[0] && isOptionGroup(options[0]);\n      if (isGrouped) {\n        let hovered = false;\n        return options.reduce((acc, groupedOption) => {\n          const filteredOptions = groupedOption.options.filter((v) =>\n            v.name.toLowerCase().includes(trimmedFilter.toLowerCase())\n          );\n          if (filteredOptions.length > 0) {\n            if (!hovered && filter) {\n              setHover({ item: filteredOptions[0].id, by: \"keyboard\" });\n            }\n            hovered = true;\n            return [...acc, { ...groupedOption, options: filteredOptions }];\n          }\n          return [...acc];\n        }, []);\n      } else {\n        const filteredOptions = options.filter((v) =>\n          v.name.toLowerCase().includes(trimmedFilter.toLowerCase())\n        );\n        if (filter && filteredOptions.length > 0) {\n          setHover({ item: filteredOptions[0].id, by: \"keyboard\" });\n        }\n        if (filteredOptions.length === 0 && emptyValue) {\n          setHover({ item: \"addNew\", by: \"keyboard\" });\n        }\n        return filteredOptions;\n      }\n    },\n    [emptyValue]\n  );\n\n  const list = useMemo(\n    () => filterOptions(sortedList, filter),\n    [filter, filterOptions, sortedList]\n  );\n\n  const showDefaultOption = useMemo(\n    () => !!defaultValue && !filter,\n    [defaultValue, filter]\n  );\n\n  const flatOptions = useMemo(() => {\n    const options = list.reduce(\n      (\n        acc: (IOptionItemProps | IOptionGroupProps | [])[],\n        option: IOptionItemProps | IOptionGroupProps\n      ) => {\n        if (!isOptionGroup(option)) {\n          return [...acc, option];\n        }\n        return [...acc, ...option.options];\n      },\n      []\n    );\n    return filterOptions(options, filter);\n  }, [filter, filterOptions, list]);\n\n  const handleInputChange = useCallback((e) => {\n    if (\n      e.target &&\n      !(e.key === \"ArrowDown\") &&\n      !(e.key === \"ArrowUp\") &&\n      !(e.key === \"Enter\")\n    ) {\n      setFilter(e.target.value);\n    }\n  }, []);\n\n  const handleHoverCallback = useCallback(\n    (e: number | string | undefined): void => {\n      setHover({ item: e, by: \"mouse\" });\n    },\n    []\n  );\n\n  const toggleSelected = useCallback(\n    (id) => {\n      let result;\n\n      if (id !== null) {\n        if (type === \"multiple\") {\n          if (selectedOptions.includes(id)) {\n            result = selectedOptions.filter((_id) => _id !== id);\n          } else {\n            result = [...selectedOptions, id];\n          }\n        } else {\n          result = id;\n        }\n        if (clearInputOnSelect && inputEl?.current) {\n          inputEl.current.value = \"\";\n          inputEl.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n        }\n        setFilter(\"\");\n      } else {\n        if (typeof handleDefaultOptionChange === \"function\") {\n          handleDefaultOptionChange();\n          return;\n        }\n      }\n\n      if (typeof handleChange === \"function\") {\n        handleChange(result);\n      }\n    },\n    [\n      clearInputOnSelect,\n      handleChange,\n      handleDefaultOptionChange,\n      inputEl,\n      selectedOptions,\n      type,\n    ]\n  );\n\n  const handleMouseEnter = useCallback((e) => {\n    if (e === undefined || e === null) {\n      return setHover({ item: null, by: \"mouse\" });\n    }\n    setHover({ item: e, by: \"mouse\" });\n  }, []);\n\n  const handleClick = useCallback(\n    (e) => {\n      e.preventDefault();\n      toggleSelected(hover.item);\n    },\n    [toggleSelected, hover]\n  );\n\n  const handleRenderOption = useCallback(\n    (item: IOptionItemProps | IOptionGroupProps, index) => {\n      if (isOptionGroup(item)) {\n        return (\n          <OptionGroup\n            checked={selectedOptions}\n            name={item.name}\n            key={item.id}\n            setHover={handleHoverCallback}\n            id={item.id}\n            hover={hover.item}\n            options={item.options}\n            renderOptions={handleRenderOption}\n            type={type}\n            onChange={handleChange}\n            filter={filter}\n          />\n        );\n      }\n      return (\n        <Option\n          name={item.name}\n          ref={itemRef}\n          key={index}\n          onMouseEnter={handleMouseEnter}\n          onClick={handleClick}\n          id={item.id}\n          hover={item.id === hover.item}\n          className={optionClassName}\n          renderOption={renderOption(\n            { ...item, name: highlightText(item.name, filter) },\n            {\n              id: `option_${item.id}`,\n              checked: selectedOptions && selectedOptions.includes(item.id),\n              hover: hover.item === item.id,\n              onChange: () => null,\n            }\n          )}\n        />\n      );\n    },\n    [\n      handleClick,\n      handleMouseEnter,\n      hover.item,\n      optionClassName,\n      renderOption,\n      filter,\n      selectedOptions,\n      handleHoverCallback,\n      type,\n      handleChange,\n    ]\n  );\n\n  const handleOnMouseLeave = useCallback(() => {\n    setHover({ item: undefined, by: \"mouse\" });\n  }, []);\n\n  const handleScroll = useCallback((list: Scrollbars, itemOffset: number) => {\n    if (list.getClientHeight() + list.getScrollTop() < itemOffset + 40) {\n      return list.scrollTop(itemOffset - list.getClientHeight() + 30);\n    }\n    if (list.getScrollTop() > itemOffset) {\n      return list.scrollTop(itemOffset);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (hover.by === \"keyboard\" && hover.item !== undefined) {\n      const item: HTMLLIElement | null = itemRef.current;\n      const list = listRef.current;\n      if (itemRef && item && list) {\n        handleScroll(list, item.offsetTop);\n      }\n    }\n  }, [handleScroll, hover]);\n\n  const handleOnKeyDown = useCallback(\n    (e) => {\n      if (e.key === \"Enter\") {\n        e.preventDefault();\n\n        if (hover.item === undefined && filter === \"\") {\n          return;\n        }\n        if (hover.item === \"addNew\") {\n          handleEmpty(null);\n          return;\n        }\n        if (hover.item === null && handleDefaultOptionChange) {\n          handleDefaultOptionChange();\n          return;\n        }\n\n        if (typeof hover.item !== \"undefined\" || hover.item !== null) {\n          toggleSelected(hover.item);\n          setFilter(\"\");\n        }\n        return;\n      }\n      setHover({\n        item: handleKeyboardMovement(\n          e,\n          hover.item,\n          flatOptions,\n          showAddNew,\n          showDefaultOption\n        ),\n        by: \"keyboard\",\n      });\n    },\n    [\n      filter,\n      flatOptions,\n      toggleSelected,\n      handleDefaultOptionChange,\n      handleEmpty,\n      hover,\n      showAddNew,\n      showDefaultOption,\n    ]\n  );\n\n  useEffect(() => {\n    if (inputEl?.current) {\n      inputEl.current.onkeydown = handleOnKeyDown;\n      inputEl.current.onkeyup = handleInputChange;\n    }\n  }, [handleInputChange, handleOnKeyDown, inputEl]);\n\n  const isDefaultOptionSelected = useCallback(() => {\n    if (preselectDefaultValue) {\n      return selectedOptions.length < 1 || selectedOptions[0] === \"\";\n    } else {\n      return (\n        selectedOptions[0] === null ||\n        selectedOptions.length === flatOptions.length\n      );\n    }\n  }, [flatOptions.length, preselectDefaultValue, selectedOptions]);\n\n  const showNoResult = useMemo(\n    () => noResultText && !showAddNew && list.length < 1,\n    [list.length, noResultText, showAddNew]\n  );\n\n  const renderNoResult = useMemo(\n    () => <StyledOption css=\"cursor: auto\">{noResultText}</StyledOption>,\n    [noResultText]\n  );\n\n  return (\n    <StyledAutocompleteScrollShadow\n      className={AutocompleteClassName}\n      $isHidden={\n        !defaultValue && !emptyValue && !noResultText && list.length < 1\n      }\n    >\n      {({ onScroll }): JSX.Element => (\n        <StyledAutocompleteBody key=\"body\" onMouseLeave={handleOnMouseLeave}>\n          <Scrollbars\n            ref={listRef}\n            key=\"scrollBar\"\n            autoHeight\n            autoHeightMax={autoHeightMax}\n            onScroll={onScroll}\n          >\n            {defaultValue && !filter && (\n              <Option\n                name={defaultValue}\n                ref={itemRef}\n                hover={hover.item === null}\n                onMouseEnter={handleMouseEnter}\n                onClick={(e) => {\n                  e.preventDefault();\n                  toggleSelected(null);\n                }}\n                renderOption={renderOption(\n                  { name: defaultValue, id: null },\n                  {\n                    checked: isDefaultOptionSelected(),\n                    hover: hover.item === null,\n                    onChange: () => null,\n                  }\n                )}\n              />\n            )}\n            {list.map((item: IOptionItemProps, index) =>\n              handleRenderOption(item, index)\n            )}\n            {showNoResult && renderNoResult}\n            {showAddNew && renderAddNew}\n          </Scrollbars>\n        </StyledAutocompleteBody>\n      )}\n    </StyledAutocompleteScrollShadow>\n  );\n};\n\nAutocomplete.displayName = \"Autocomplete\";\n"],"mappings":"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"}
+{"version":3,"file":"Autocomplete.js","names":["isOptionGroup","item","options","undefined","Autocomplete","type","inputEl","selected","emptyValue","noResultText","renderOption","option","name","defaultValue","sortDirection","handleChange","optionClassName","handleEmptyAction","disabledInternalSort","AutocompleteClassName","handleDefaultOptionChange","preselectDefaultValue","keepSameOptionsOrder","autoHeightMax","clearInputOnSelect","itemRef","useRef","listRef","selectedOptions","useMemo","Array","isArray","handleSort","useCallback","opts","sort","a","b","includes","id","sortList","localeCompare","sortedList","useState","by","hover","setHover","filter","setFilter","handleEmpty","e","button","current","focus","onAddNewMouseEnter","showAddNew","trim","every","v","toLowerCase","renderAddNew","filterOptions","trimmedFilter","isGrouped","hovered","reduce","acc","groupedOption","filteredOptions","length","list","showDefaultOption","flatOptions","handleInputChange","target","key","value","handleHoverCallback","toggleSelected","result","_id","dispatchEvent","Event","bubbles","handleMouseEnter","handleClick","preventDefault","handleRenderOption","index","highlightText","checked","onChange","handleOnMouseLeave","handleScroll","itemOffset","getClientHeight","getScrollTop","scrollTop","useEffect","offsetTop","handleOnKeyDown","handleKeyboardMovement","inputRef","addEventListener","removeEventListener","isDefaultOptionSelected","showNoResult","renderNoResult","onScroll","map","displayName"],"sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React, {\n  FC,\n  useCallback,\n  useState,\n  useMemo,\n  useEffect,\n  useRef,\n  ReactNode,\n  ReactElement,\n  MutableRefObject,\n} from \"react\";\nimport { Scrollbars } from \"react-custom-scrollbars-2\";\nimport highlightText from \"../../hooks/useHighlightText\";\nimport { handleKeyboardMovement } from \"./HandleKeyboard\";\nimport { IOptionItemProps, Option } from \"../Select/Option\";\nimport { IOptionGroupProps, OptionGroup } from \"../Select/OptionGroup\";\nimport {\n  StyledAutocompleteBody,\n  StyledAutocompleteNewItem,\n  StyledAutocompleteScrollShadow,\n} from \"./Styles\";\nimport { StyledOption } from \"../Select/Option/Styles\";\n\nexport function isOptionGroup(\n  item: IOptionGroupProps | IOptionItemProps\n): item is IOptionGroupProps {\n  return (item as IOptionGroupProps).options !== undefined;\n}\n\nexport interface IAutocompleteProps {\n  /** Select type: single or multiple */\n  type?: \"single\" | \"multiple\";\n  /** List of options or group options */\n  options?: (IOptionGroupProps | IOptionItemProps)[];\n  /** Selected values */\n  selected?: (string | number)[] | string | number;\n  /** Input Element. */\n  inputEl?: MutableRefObject<HTMLInputElement | null | undefined>;\n  /** Text for empty value */\n  emptyValue?: string;\n  /** Text for No result */\n  noResultText?: string;\n  /** Render option */\n  renderOption?: (\n    option: Record<string, ReactNode>,\n    data: Record<string, unknown>\n  ) => string | ReactElement;\n  /** Default value that renders on top of list */\n  defaultValue?: string;\n  /** Sort direction for labels */\n  sortDirection?: \"asc\" | \"desc\";\n  /** handleChange callback */\n  handleChange?: (\n    e: (string | number)[] | string | number | null | undefined\n  ) => void;\n  /** ClassName for single option */\n  optionClassName?: string;\n  /** handleEmptyAction */\n  handleEmptyAction?: (e: string | number) => void;\n  /** Disable sorting options */\n  disabledInternalSort?: boolean;\n  /** ClassName for Autocomplete component */\n  AutocompleteClassName?: string;\n  /** handleDefaultOptionChange callback */\n  handleDefaultOptionChange?: () => void;\n  /** Should default value be selected */\n  preselectDefaultValue?: boolean;\n  /** Should order stay the same after choosing an option */\n  keepSameOptionsOrder?: boolean;\n  /** Set max height property for scrollbars */\n  autoHeightMax?: number;\n  /** Clear input on select - works in single mode */\n  clearInputOnSelect?: boolean;\n}\n\ninterface IHover {\n  item: number | string | undefined | null;\n  by: \"mouse\" | \"keyboard\" | undefined;\n}\n\nexport const Autocomplete: FC<IAutocompleteProps> = ({\n  type,\n  options = [],\n  inputEl,\n  selected = [],\n  emptyValue,\n  noResultText,\n  renderOption = (option) => option?.name,\n  defaultValue,\n  sortDirection = \"asc\",\n  handleChange,\n  optionClassName,\n  handleEmptyAction,\n  disabledInternalSort,\n  AutocompleteClassName,\n  handleDefaultOptionChange,\n  preselectDefaultValue,\n  keepSameOptionsOrder = false,\n  autoHeightMax = 340,\n  clearInputOnSelect,\n}) => {\n  const itemRef = useRef<HTMLLIElement>(null);\n  const listRef = useRef<Scrollbars>(null);\n\n  const selectedOptions = useMemo(() => {\n    if (Array.isArray(selected)) {\n      return selected;\n    }\n    return [selected];\n  }, [selected]);\n\n  const handleSort = useCallback((opts) => {\n    if (keepSameOptionsOrder) {\n      return opts;\n    }\n    return opts.sort((a: IOptionItemProps, b: IOptionItemProps) => {\n      if (selectedOptions.includes(b.id) && !selectedOptions.includes(a.id)) {\n        return 1;\n      }\n      if (selectedOptions.includes(a.id) && !selectedOptions.includes(b.id)) {\n        return -1;\n      }\n      return 0;\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const sortList = useCallback(\n    (options) => {\n      if (disabledInternalSort) {\n        return handleSort([...options]);\n      }\n      return handleSort(\n        [...options].sort((a: IOptionItemProps, b: IOptionItemProps) =>\n          sortDirection === \"asc\"\n            ? a.name.localeCompare(b.name)\n            : b.name.localeCompare(a.name)\n        )\n      );\n    },\n    [sortDirection, disabledInternalSort, handleSort]\n  );\n\n  const sortedList = useMemo(() => sortList(options), [options, sortList]);\n\n  const [hover, setHover] = useState<IHover>({\n    item: undefined,\n    by: undefined,\n  });\n  const [filter, setFilter] = useState(\"\");\n\n  const handleEmpty = useCallback(\n    (e) => {\n      if (e && e.button !== 0) {\n        return;\n      }\n      if (handleEmptyAction) {\n        inputEl?.current?.focus();\n        setFilter(\"\");\n        handleEmptyAction(filter);\n      }\n    },\n    [filter, handleEmptyAction, inputEl]\n  );\n\n  const onAddNewMouseEnter = useCallback(\n    () => setHover({ item: \"addNew\", by: \"mouse\" }),\n    []\n  );\n\n  const showAddNew = useMemo(() => {\n    return !!(\n      emptyValue &&\n      filter.trim() &&\n      options.every((option) => {\n        if (isOptionGroup(option)) {\n          return option.options.every(\n            (v) => v.name.toLowerCase() !== filter.trim().toLowerCase()\n          );\n        }\n        return option.name.toLowerCase() !== filter.trim().toLowerCase();\n      })\n    );\n  }, [emptyValue, filter, options]);\n\n  const renderAddNew = useMemo(() => {\n    return (\n      <StyledAutocompleteNewItem\n        ref={hover.item === \"addNew\" ? itemRef : null}\n        key=\"emptyValue\"\n        hover={hover.item === \"addNew\"}\n        onMouseDown={handleEmpty}\n        onMouseEnter={onAddNewMouseEnter}\n      >\n        {emptyValue}\n      </StyledAutocompleteNewItem>\n    );\n  }, [emptyValue, handleEmpty, hover, onAddNewMouseEnter]);\n\n  const filterOptions = useCallback(\n    (options, filter) => {\n      const trimmedFilter = filter.trim();\n      const isGrouped = options[0] && isOptionGroup(options[0]);\n      if (isGrouped) {\n        let hovered = false;\n        return options.reduce((acc, groupedOption) => {\n          const filteredOptions = groupedOption.options.filter((v) =>\n            v.name.toLowerCase().includes(trimmedFilter.toLowerCase())\n          );\n          if (filteredOptions.length > 0) {\n            if (!hovered && filter) {\n              setHover({ item: filteredOptions[0].id, by: \"keyboard\" });\n            }\n            hovered = true;\n            return [...acc, { ...groupedOption, options: filteredOptions }];\n          }\n          return [...acc];\n        }, []);\n      } else {\n        const filteredOptions = options.filter((v) =>\n          v.name.toLowerCase().includes(trimmedFilter.toLowerCase())\n        );\n        if (filter && filteredOptions.length > 0) {\n          setHover({ item: filteredOptions[0].id, by: \"keyboard\" });\n        }\n        if (filteredOptions.length === 0 && emptyValue) {\n          setHover({ item: \"addNew\", by: \"keyboard\" });\n        }\n        return filteredOptions;\n      }\n    },\n    [emptyValue]\n  );\n\n  const list = useMemo(\n    () => filterOptions(sortedList, filter),\n    [filter, filterOptions, sortedList]\n  );\n\n  const showDefaultOption = useMemo(\n    () => !!defaultValue && !filter,\n    [defaultValue, filter]\n  );\n\n  const flatOptions = useMemo(() => {\n    const options = list.reduce(\n      (\n        acc: (IOptionItemProps | IOptionGroupProps | [])[],\n        option: IOptionItemProps | IOptionGroupProps\n      ) => {\n        if (!isOptionGroup(option)) {\n          return [...acc, option];\n        }\n        return [...acc, ...option.options];\n      },\n      []\n    );\n    return filterOptions(options, filter);\n  }, [filter, filterOptions, list]);\n\n  const handleInputChange = useCallback((e) => {\n    if (\n      e.target &&\n      !(e.key === \"ArrowDown\") &&\n      !(e.key === \"ArrowUp\") &&\n      !(e.key === \"Enter\")\n    ) {\n      setFilter(e.target.value);\n    }\n  }, []);\n\n  const handleHoverCallback = useCallback(\n    (e: number | string | undefined): void => {\n      setHover({ item: e, by: \"mouse\" });\n    },\n    []\n  );\n\n  const toggleSelected = useCallback(\n    (id) => {\n      let result;\n\n      if (id !== null) {\n        if (type === \"multiple\") {\n          if (selectedOptions.includes(id)) {\n            result = selectedOptions.filter((_id) => _id !== id);\n          } else {\n            result = [...selectedOptions, id];\n          }\n        } else {\n          result = id;\n        }\n        if (clearInputOnSelect && inputEl?.current) {\n          inputEl.current.value = \"\";\n          inputEl.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n        }\n        setFilter(\"\");\n      } else {\n        if (typeof handleDefaultOptionChange === \"function\") {\n          handleDefaultOptionChange();\n          return;\n        }\n      }\n\n      if (typeof handleChange === \"function\") {\n        handleChange(result);\n      }\n    },\n    [\n      clearInputOnSelect,\n      handleChange,\n      handleDefaultOptionChange,\n      inputEl,\n      selectedOptions,\n      type,\n    ]\n  );\n\n  const handleMouseEnter = useCallback((e) => {\n    if (e === undefined || e === null) {\n      return setHover({ item: null, by: \"mouse\" });\n    }\n    setHover({ item: e, by: \"mouse\" });\n  }, []);\n\n  const handleClick = useCallback(\n    (e) => {\n      e.preventDefault();\n      toggleSelected(hover.item);\n    },\n    [toggleSelected, hover]\n  );\n\n  const handleRenderOption = useCallback(\n    (item: IOptionItemProps | IOptionGroupProps, index) => {\n      if (isOptionGroup(item)) {\n        return (\n          <OptionGroup\n            checked={selectedOptions}\n            name={item.name}\n            key={item.id}\n            setHover={handleHoverCallback}\n            id={item.id}\n            hover={hover.item}\n            options={item.options}\n            renderOptions={handleRenderOption}\n            type={type}\n            onChange={handleChange}\n            filter={filter}\n          />\n        );\n      }\n      return (\n        <Option\n          name={item.name}\n          ref={itemRef}\n          key={index}\n          onMouseEnter={handleMouseEnter}\n          onClick={handleClick}\n          id={item.id}\n          hover={item.id === hover.item}\n          className={optionClassName}\n          renderOption={renderOption(\n            { ...item, name: highlightText(item.name, filter) },\n            {\n              id: `option_${item.id}`,\n              checked: selectedOptions && selectedOptions.includes(item.id),\n              hover: hover.item === item.id,\n              onChange: () => null,\n            }\n          )}\n        />\n      );\n    },\n    [\n      handleClick,\n      handleMouseEnter,\n      hover.item,\n      optionClassName,\n      renderOption,\n      filter,\n      selectedOptions,\n      handleHoverCallback,\n      type,\n      handleChange,\n    ]\n  );\n\n  const handleOnMouseLeave = useCallback(() => {\n    setHover({ item: undefined, by: \"mouse\" });\n  }, []);\n\n  const handleScroll = useCallback((list: Scrollbars, itemOffset: number) => {\n    if (list.getClientHeight() + list.getScrollTop() < itemOffset + 40) {\n      return list.scrollTop(itemOffset - list.getClientHeight() + 30);\n    }\n    if (list.getScrollTop() > itemOffset) {\n      return list.scrollTop(itemOffset);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (hover.by === \"keyboard\" && hover.item !== undefined) {\n      const item: HTMLLIElement | null = itemRef.current;\n      const list = listRef.current;\n      if (itemRef && item && list) {\n        handleScroll(list, item.offsetTop);\n      }\n    }\n  }, [handleScroll, hover]);\n\n  const handleOnKeyDown = useCallback(\n    (e) => {\n      if (e.key === \"Enter\") {\n        e.preventDefault();\n\n        if (hover.item === undefined && filter === \"\") {\n          return;\n        }\n        if (hover.item === \"addNew\") {\n          handleEmpty(null);\n          return;\n        }\n        if (hover.item === null && handleDefaultOptionChange) {\n          handleDefaultOptionChange();\n          return;\n        }\n\n        if (typeof hover.item !== \"undefined\" || hover.item !== null) {\n          toggleSelected(hover.item);\n          setFilter(\"\");\n        }\n        return;\n      }\n      setHover({\n        item: handleKeyboardMovement(\n          e,\n          hover.item,\n          flatOptions,\n          showAddNew,\n          showDefaultOption\n        ),\n        by: \"keyboard\",\n      });\n    },\n    [\n      filter,\n      flatOptions,\n      toggleSelected,\n      handleDefaultOptionChange,\n      handleEmpty,\n      hover,\n      showAddNew,\n      showDefaultOption,\n    ]\n  );\n\n  useEffect(() => {\n    const inputRef = inputEl?.current;\n    if (inputRef) {\n      inputRef.addEventListener(\"input\", handleInputChange);\n      inputRef.addEventListener(\"keydown\", handleOnKeyDown);\n    }\n    return () => {\n      if (inputRef) {\n        inputRef.removeEventListener(\"input\", handleInputChange);\n        inputRef.removeEventListener(\"keydown\", handleOnKeyDown);\n      }\n    };\n  }, [handleInputChange, handleOnKeyDown, inputEl]);\n\n  const isDefaultOptionSelected = useCallback(() => {\n    if (preselectDefaultValue) {\n      return selectedOptions.length < 1 || selectedOptions[0] === \"\";\n    } else {\n      return (\n        selectedOptions[0] === null ||\n        selectedOptions.length === flatOptions.length\n      );\n    }\n  }, [flatOptions.length, preselectDefaultValue, selectedOptions]);\n\n  const showNoResult = useMemo(\n    () => noResultText && !showAddNew && list.length < 1,\n    [list.length, noResultText, showAddNew]\n  );\n\n  const renderNoResult = useMemo(\n    () => <StyledOption css=\"cursor: auto\">{noResultText}</StyledOption>,\n    [noResultText]\n  );\n\n  return (\n    <StyledAutocompleteScrollShadow\n      className={AutocompleteClassName}\n      $isHidden={\n        !defaultValue && !emptyValue && !noResultText && list.length < 1\n      }\n    >\n      {({ onScroll }): JSX.Element => (\n        <StyledAutocompleteBody key=\"body\" onMouseLeave={handleOnMouseLeave}>\n          <Scrollbars\n            ref={listRef}\n            key=\"scrollBar\"\n            autoHeight\n            autoHeightMax={autoHeightMax}\n            onScroll={onScroll}\n          >\n            {defaultValue && !filter && (\n              <Option\n                name={defaultValue}\n                ref={itemRef}\n                hover={hover.item === null}\n                onMouseEnter={handleMouseEnter}\n                onClick={(e) => {\n                  e.preventDefault();\n                  toggleSelected(null);\n                }}\n                renderOption={renderOption(\n                  { name: defaultValue, id: null },\n                  {\n                    checked: isDefaultOptionSelected(),\n                    hover: hover.item === null,\n                    onChange: () => null,\n                  }\n                )}\n              />\n            )}\n            {list.map((item: IOptionItemProps, index) =>\n              handleRenderOption(item, index)\n            )}\n            {showNoResult && renderNoResult}\n            {showAddNew && renderAddNew}\n          </Scrollbars>\n        </StyledAutocompleteBody>\n      )}\n    </StyledAutocompleteScrollShadow>\n  );\n};\n\nAutocomplete.displayName = \"Autocomplete\";\n"],"mappings":"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"}

package/dist/cjs/components/CommandPallete/CommandPallete.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactChildrenUtilities = require("react-children-utilities");
 var _Dialog = require("../Dialog");
 var _CommandPallete = require("./CommandPallete.styles");
+var _CommandPalleteCommandItem = require("./CommandPalleteCommandItem");
 var _CommandPalleteHeader = require("./CommandPalleteHeader");
 var _CommandPalleteItem = require("./CommandPalleteItem");
 var _CommandPalleteList = require("./CommandPalleteList");
@@ -57,32 +58,37 @@ var CommandPallete = function CommandPallete(_ref) {
     });
   };
   var filterChildren = (0, _react.useMemo)(function () {
-    var index = 0;
+    var itemsLength = 0;
+    var commandsLength = 0;
     var items = (0, _reactChildrenUtilities.deepMap)(children, function (child) {
       var item = child;
       var clonedElement;
       if (item && item.type === _CommandPalleteList.CommandPalleteList) {
         clonedElement = /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread({}, item.props));
       }
+      if (item && item.type === _CommandPalleteCommandItem.CommandPalleteCommandItem) {
+        clonedElement = /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
+          index: itemsLength,
+          selected: selected
+        }));
+        itemsLength++;
+        commandsLength++;
+      }
       if (item && item.type === _CommandPalleteItem.CommandPalleteItem) {
         clonedElement = /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
-          index: index,
+          index: itemsLength,
           selected: selected
         }));
-        index++;
+        itemsLength++;
       }
       return clonedElement;
     });
     return {
       items: items,
-      index: index
+      itemsLength: itemsLength,
+      commandsLength: commandsLength
     };
   }, [children, selected]);
-  (0, _react.useEffect)(function () {
-    if (search.length === 0) {
-      setSelected(0);
-    }
-  }, [search, selected]);
   var handleChangeSelected = function handleChangeSelected(direction) {
     var items = document.querySelectorAll(".cp-item");
     var index = 0;
@@ -132,7 +138,7 @@ var CommandPallete = function CommandPallete(_ref) {
       if (e.key === "End") {
         e.preventDefault();
         scrollToBottom();
-        setSelected(filterChildren.index - 1);
+        setSelected(filterChildren.itemsLength - 1);
       }
       if (e.key === "Home") {
         e.preventDefault();
@@ -148,7 +154,9 @@ var CommandPallete = function CommandPallete(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_CommandPalleteHeader.CommandPalleteHeader, {
     search: search,
     handleChange: handleChange,
-    onChangeSearch: onChangeSearch
+    onChangeSearch: onChangeSearch,
+    commandsLength: filterChildren.commandsLength,
+    itemsLength: filterChildren.itemsLength
   })), /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPalleteWrapper, {
     ref: listWrapperRef
   }, filterChildren.items))));
@@ -157,4 +165,5 @@ exports.CommandPallete = CommandPallete;
 CommandPallete.displayName = "CommandPallete";
 CommandPallete.List = _CommandPalleteList.CommandPalleteList;
 CommandPallete.Item = _CommandPalleteItem.CommandPalleteItem;
+CommandPallete.CommandItem = _CommandPalleteCommandItem.CommandPalleteCommandItem;
 //# sourceMappingURL=CommandPallete.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CommandPallete.js","names":["CommandPallete","children","onChangeSearch","search","mode","setMode","rest","useState","selected","setSelected","listWrapperRef","useRef","handleChange","e","target","value","scrollToTop","current","scrollTo","top","behavior","scrollToBottom","scrollHeight","filterChildren","useMemo","index","items","deepMap","child","item","clonedElement","type","CommandPalleteList","cloneElement","props","CommandPalleteItem","useEffect","length","handleChangeSelected","direction","document","querySelectorAll","newIndex","newItem","forEach","_","i","scrollIntoView","block","key","preventDefault","displayName","List","Item"],"sources":["../../../../src/components/CommandPallete/CommandPallete.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { deepMap } from \"react-children-utilities\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n  StyledCommandPallete,\n  StyledCommandPalleteWrapper,\n} from \"./CommandPallete.styles\";\nimport { CommandPalleteHeader } from \"./CommandPalleteHeader\";\nimport {\n  CommandPalleteItem,\n  CommandPalleteItemProps,\n} from \"./CommandPalleteItem\";\nimport { CommandPalleteList } from \"./CommandPalleteList\";\n\nimport { ModeContextProvider, SelectedContextProvider } from \"./context\";\n\nexport interface CommandPalleteProps extends DialogProps {\n  onChangeSearch: (search: string) => void;\n  search: string;\n  commands: { visible: boolean; title: string; renderIcon: () => ReactNode }[];\n  mode: string;\n  setMode: (value: string) => void;\n  loading?: boolean;\n}\n\nexport const CommandPallete = ({\n  children,\n  onChangeSearch,\n  search,\n  mode,\n  setMode,\n  ...rest\n}: PropsWithChildren<CommandPalleteProps>) => {\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 index = 0;\n\n    const items = deepMap(children, (child) => {\n      const item = child as ReactElement<CommandPalleteItemProps>;\n      let clonedElement;\n\n      if (item && item.type === CommandPalleteList) {\n        clonedElement = cloneElement(item, {\n          ...item.props,\n        });\n      }\n\n      if (item && item.type === CommandPalleteItem) {\n        clonedElement = cloneElement(item, {\n          ...item.props,\n          index,\n          selected,\n        });\n\n        index++;\n      }\n\n      return clonedElement;\n    });\n\n    return { items, index };\n  }, [children, selected]);\n\n  useEffect(() => {\n    if (search.length === 0) {\n      setSelected(0);\n    }\n  }, [search, 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}>\n      <SelectedContextProvider value={{ selected: selected, setSelected }}>\n        <StyledCommandPallete\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.index - 1);\n            }\n\n            if (e.key === \"Home\") {\n              e.preventDefault();\n              scrollToTop();\n              setSelected(0);\n            }\n          }}\n        >\n          <ModeContextProvider value={{ mode, setMode }}>\n            <CommandPalleteHeader\n              search={search}\n              handleChange={handleChange}\n              onChangeSearch={onChangeSearch}\n            />\n          </ModeContextProvider>\n\n          <StyledCommandPalleteWrapper ref={listWrapperRef}>\n            {filterChildren.items}\n          </StyledCommandPalleteWrapper>\n        </StyledCommandPallete>\n      </SelectedContextProvider>\n    </Dialog>\n  );\n};\n\nCommandPallete.displayName = \"CommandPallete\";\n\nCommandPallete.List = CommandPalleteList;\nCommandPallete.Item = CommandPalleteItem;\n"],"mappings":"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"}
+{"version":3,"file":"CommandPallete.js","names":["CommandPallete","children","onChangeSearch","search","mode","setMode","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","CommandPalleteList","cloneElement","props","CommandPalleteCommandItem","index","CommandPalleteItem","handleChangeSelected","direction","document","querySelectorAll","newIndex","newItem","forEach","_","i","length","scrollIntoView","block","key","preventDefault","displayName","List","Item","CommandItem"],"sources":["../../../../src/components/CommandPallete/CommandPallete.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { deepMap } from \"react-children-utilities\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n  StyledCommandPallete,\n  StyledCommandPalleteWrapper,\n} from \"./CommandPallete.styles\";\nimport { CommandPalleteCommandItem } from \"./CommandPalleteCommandItem\";\nimport { CommandPalleteHeader } from \"./CommandPalleteHeader\";\nimport {\n  CommandPalleteItem,\n  CommandPalleteItemProps,\n} from \"./CommandPalleteItem\";\nimport { CommandPalleteList } from \"./CommandPalleteList\";\n\nimport { ModeContextProvider, SelectedContextProvider } from \"./context\";\n\nexport interface CommandPalleteProps extends DialogProps {\n  onChangeSearch: (search: string) => void;\n  search: string;\n  mode: string;\n  setMode: (value: string) => void;\n  loading?: boolean;\n}\n\nexport const CommandPallete = ({\n  children,\n  onChangeSearch,\n  search,\n  mode,\n  setMode,\n  ...rest\n}: PropsWithChildren<CommandPalleteProps>) => {\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<CommandPalleteItemProps>;\n      let clonedElement;\n\n      if (item && item.type === CommandPalleteList) {\n        clonedElement = cloneElement(item, {\n          ...item.props,\n        });\n      }\n\n      if (item && item.type === CommandPalleteCommandItem) {\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 === CommandPalleteItem) {\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}>\n      <SelectedContextProvider value={{ selected: selected, setSelected }}>\n        <StyledCommandPallete\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 }}>\n            <CommandPalleteHeader\n              search={search}\n              handleChange={handleChange}\n              onChangeSearch={onChangeSearch}\n              commandsLength={filterChildren.commandsLength}\n              itemsLength={filterChildren.itemsLength}\n            />\n          </ModeContextProvider>\n\n          <StyledCommandPalleteWrapper ref={listWrapperRef}>\n            {filterChildren.items}\n          </StyledCommandPalleteWrapper>\n        </StyledCommandPallete>\n      </SelectedContextProvider>\n    </Dialog>\n  );\n};\n\nCommandPallete.displayName = \"CommandPallete\";\n\nCommandPallete.List = CommandPalleteList;\nCommandPallete.Item = CommandPalleteItem;\nCommandPallete.CommandItem = CommandPalleteCommandItem;\n"],"mappings":";;;;;;;AAAA;AASA;AACA;AACA;AAIA;AACA;AACA;AAIA;AAEA;AAAyE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUlE,IAAMA,cAAc,GAAG,SAAjBA,cAAc,OAOmB;EAAA,IAN5CC,QAAQ,QAARA,QAAQ;IACRC,cAAc,QAAdA,cAAc;IACdC,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACJC,IAAI;EAEP,gBAAgC,IAAAC,eAAQ,EAAS,CAAC,CAAC;IAAA;IAA5CC,QAAQ;IAAEC,WAAW;EAC5B,IAAMC,cAAc,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAEnD,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,CAAgC,EAAK;IACzDX,cAAc,CAACW,CAAC,CAACC,MAAM,CAACC,KAAK,CAAC;EAChC,CAAC;EAED,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IAAA;IACxB,yBAAAN,cAAc,CAACO,OAAO,0DAAtB,sBAAwBC,QAAQ,CAAC;MAAEC,GAAG,EAAE,CAAC;MAAEC,QAAQ,EAAE;IAAS,CAAC,CAAC;EAClE,CAAC;EAED,IAAMC,cAAc,GAAG,SAAjBA,cAAc,GAAS;IAAA;IAC3B,0BAAAX,cAAc,CAACO,OAAO,2DAAtB,uBAAwBC,QAAQ,CAAC;MAC/BC,GAAG,EAAET,cAAc,CAACO,OAAO,CAACK,YAAY;MACxCF,QAAQ,EAAE;IACZ,CAAC,CAAC;EACJ,CAAC;EAED,IAAMG,cAAc,GAAG,IAAAC,cAAO,EAAC,YAAM;IACnC,IAAIC,WAAW,GAAG,CAAC;IACnB,IAAIC,cAAc,GAAG,CAAC;IAEtB,IAAMC,KAAK,GAAG,IAAAC,+BAAO,EAAC3B,QAAQ,EAAE,UAAC4B,KAAK,EAAK;MACzC,IAAMC,IAAI,GAAGD,KAA8C;MAC3D,IAAIE,aAAa;MAEjB,IAAID,IAAI,IAAIA,IAAI,CAACE,IAAI,KAAKC,sCAAkB,EAAE;QAC5CF,aAAa,gBAAG,IAAAG,mBAAY,EAACJ,IAAI,oBAC5BA,IAAI,CAACK,KAAK,EACb;MACJ;MAEA,IAAIL,IAAI,IAAIA,IAAI,CAACE,IAAI,KAAKI,oDAAyB,EAAE;QACnDL,aAAa,gBAAG,IAAAG,mBAAY,EAACJ,IAAI,kCAC5BA,IAAI,CAACK,KAAK;UACbE,KAAK,EAAEZ,WAAW;UAClBjB,QAAQ,EAARA;QAAQ,GACR;QAEFiB,WAAW,EAAE;QACbC,cAAc,EAAE;MAClB;MAEA,IAAII,IAAI,IAAIA,IAAI,CAACE,IAAI,KAAKM,sCAAkB,EAAE;QAC5CP,aAAa,gBAAG,IAAAG,mBAAY,EAACJ,IAAI,kCAC5BA,IAAI,CAACK,KAAK;UACbE,KAAK,EAAEZ,WAAW;UAClBjB,QAAQ,EAARA;QAAQ,GACR;QAEFiB,WAAW,EAAE;MACf;MAEA,OAAOM,aAAa;IACtB,CAAC,CAAC;IAEF,OAAO;MAAEJ,KAAK,EAALA,KAAK;MAAEF,WAAW,EAAXA,WAAW;MAAEC,cAAc,EAAdA;IAAe,CAAC;EAC/C,CAAC,EAAE,CAACzB,QAAQ,EAAEO,QAAQ,CAAC,CAAC;EAExB,IAAM+B,oBAAoB,GAAG,SAAvBA,oBAAoB,CAAIC,SAAyB,EAAK;IAC1D,IAAMb,KAAK,GAAGc,QAAQ,CAACC,gBAAgB,CAAC,UAAU,CAAC;IAEnD,IAAIL,KAAK,GAAG,CAAC;IACb,IAAIM,QAAQ,GAAG,CAAC;IAChB,IAAIC,OAAuB,GAAG,IAAI;IAElC,IAAIJ,SAAS,KAAK,MAAM,EAAE;MACxBb,KAAK,CAACkB,OAAO,CAAC,UAACC,CAAC,EAAEC,CAAC,EAAK;QACtB,IAAIA,CAAC,KAAKvC,QAAQ,EAAE;UAClB6B,KAAK,GAAGU,CAAC;QACX;MACF,CAAC,CAAC;MAEFJ,QAAQ,GAAGN,KAAK,KAAKV,KAAK,CAACqB,MAAM,GAAG,CAAC,GAAG,CAAC,GAAGX,KAAK,GAAG,CAAC;IACvD,CAAC,MAAM,IAAIG,SAAS,KAAK,IAAI,EAAE;MAC7Bb,KAAK,CAACkB,OAAO,CAAC,UAACC,CAAC,EAAEC,CAAC,EAAK;QACtB,IAAIA,CAAC,KAAKvC,QAAQ,EAAE;UAClB6B,KAAK,GAAGU,CAAC;QACX;MACF,CAAC,CAAC;MAEFJ,QAAQ,GAAG,CAACN,KAAK,GAAGV,KAAK,CAACqB,MAAM,GAAG,CAAC,GAAGX,KAAK,GAAG,CAAC;IAClD,CAAC,MAAM;MACL5B,WAAW,CAAC,CAAC,CAAC;IAChB;IAEAmC,OAAO,GAAGjB,KAAK,CAACgB,QAAQ,CAAC;IAEzB,IAAIC,OAAO,IAAI,OAAOD,QAAQ,KAAK,QAAQ,EAAE;MAC3ClC,WAAW,CAACkC,QAAQ,CAAC;MAErBC,OAAO,CAACK,cAAc,CAAC;QACrB7B,QAAQ,EAAE,QAAQ;QAClB8B,KAAK,EAAEP,QAAQ,GAAG,QAAQ,GAAG;MAC/B,CAAC,CAAC;IACJ;EACF,CAAC;EAED,oBACE,6BAAC,cAAM,EAAKrC,IAAI,eACd,6BAAC,gCAAuB;IAAC,KAAK,EAAE;MAAEE,QAAQ,EAAEA,QAAQ;MAAEC,WAAW,EAAXA;IAAY;EAAE,gBAClE,6BAAC,oCAAoB;IACnB,SAAS,EAAE,mBAACI,CAAC,EAAK;MAChB,IAAIA,CAAC,CAACsC,GAAG,KAAK,WAAW,EAAE;QACzBtC,CAAC,CAACuC,cAAc,EAAE;QAClBb,oBAAoB,CAAC,MAAM,CAAC;MAC9B;MAEA,IAAI1B,CAAC,CAACsC,GAAG,KAAK,SAAS,EAAE;QACvBtC,CAAC,CAACuC,cAAc,EAAE;QAClBb,oBAAoB,CAAC,IAAI,CAAC;MAC5B;MAEA,IAAI1B,CAAC,CAACsC,GAAG,KAAK,KAAK,EAAE;QACnBtC,CAAC,CAACuC,cAAc,EAAE;QAClB/B,cAAc,EAAE;QAChBZ,WAAW,CAACc,cAAc,CAACE,WAAW,GAAG,CAAC,CAAC;MAC7C;MAEA,IAAIZ,CAAC,CAACsC,GAAG,KAAK,MAAM,EAAE;QACpBtC,CAAC,CAACuC,cAAc,EAAE;QAClBpC,WAAW,EAAE;QACbP,WAAW,CAAC,CAAC,CAAC;MAChB;IACF;EAAE,gBAEF,6BAAC,4BAAmB;IAAC,KAAK,EAAE;MAAEL,IAAI,EAAJA,IAAI;MAAEC,OAAO,EAAPA;IAAQ;EAAE,gBAC5C,6BAAC,0CAAoB;IACnB,MAAM,EAAEF,MAAO;IACf,YAAY,EAAES,YAAa;IAC3B,cAAc,EAAEV,cAAe;IAC/B,cAAc,EAAEqB,cAAc,CAACG,cAAe;IAC9C,WAAW,EAAEH,cAAc,CAACE;EAAY,EACxC,CACkB,eAEtB,6BAAC,2CAA2B;IAAC,GAAG,EAAEf;EAAe,GAC9Ca,cAAc,CAACI,KAAK,CACO,CACT,CACC,CACnB;AAEb,CAAC;AAAC;AAEF3B,cAAc,CAACqD,WAAW,GAAG,gBAAgB;AAE7CrD,cAAc,CAACsD,IAAI,GAAGrB,sCAAkB;AACxCjC,cAAc,CAACuD,IAAI,GAAGjB,sCAAkB;AACxCtC,cAAc,CAACwD,WAAW,GAAGpB,oDAAyB"}

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

@@ -32,7 +32,7 @@ exports.StyledSearchIcon = StyledSearchIcon;
 var StyledInput = _styledComponents.default.input.withConfig({
   displayName: "CommandPalletestyles__StyledInput",
   componentId: "sc-16m145d-4"
-})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{display:none;}::placeholder{color:var(--color-theme-transparent-500);}"], _BreakPoints.screen.sm);
+})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}"], _BreakPoints.screen.sm);
 exports.StyledInput = StyledInput;
 var StyledParameter = _styledComponents.default.span.withConfig({
   displayName: "CommandPalletestyles__StyledParameter",

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

@@ -1 +1 @@
-{"version":3,"file":"CommandPallete.styles.js","names":["StyledCommandPallete","styled","div","FontStyle","StyledCommandPalleteWrapper","StyledCommandPalleteHeader","StyledSearchIcon","StyledInput","input","screen","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPalleteList","ul","StyledHeading","p","StyledCommandPalleteItem","li","$selected","StyledSpinnerLoader","SpinnerLoader"],"sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { SpinnerLoader } from \"../Loaders\";\n\nexport const StyledCommandPallete = 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\nexport const StyledCommandPalleteWrapper = 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 StyledCommandPalleteHeader = 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    display: none;\n  }\n\n  ::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n`;\n\nexport const StyledParameter = styled.span`\n  color: var(--color-theme-transparent-500);\n  margin-right: 8px;\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 StyledCommandPalleteList = 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 StyledCommandPalleteItem = 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 StyledSpinnerLoader = styled(SpinnerLoader)`\n  margin-right: 4px;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAA2C;AAEpC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,+GAC1CC,oBAAS,CAKZ;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,qSAMnCC,mBAAM,CAACC,EAAE,CAeZ;AAAC;AAEK,IAAMC,eAAe,GAAGV,yBAAM,CAACW,IAAI;EAAA;EAAA;AAAA,8IAItCH,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,mBAAmB,GAAG,IAAArB,yBAAM,EAACsB,sBAAa,CAAC;EAAA;EAAA;AAAA,yBAEvD;AAAC"}
+{"version":3,"file":"CommandPallete.styles.js","names":["StyledCommandPallete","styled","div","FontStyle","StyledCommandPalleteWrapper","StyledCommandPalleteHeader","StyledSearchIcon","StyledInput","input","screen","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPalleteList","ul","StyledHeading","p","StyledCommandPalleteItem","li","$selected","StyledSpinnerLoader","SpinnerLoader"],"sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { SpinnerLoader } from \"../Loaders\";\n\nexport const StyledCommandPallete = 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\nexport const StyledCommandPalleteWrapper = 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 StyledCommandPalleteHeader = 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\nexport const StyledParameter = styled.span`\n  color: var(--color-theme-transparent-500);\n  margin-right: 8px;\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 StyledCommandPalleteList = 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 StyledCommandPalleteItem = 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 StyledSpinnerLoader = styled(SpinnerLoader)`\n  margin-right: 4px;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAA2C;AAEpC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,+GAC1CC,oBAAS,CAKZ;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,uWAMnCC,mBAAM,CAACC,EAAE,CAoBZ;AAAC;AAEK,IAAMC,eAAe,GAAGV,yBAAM,CAACW,IAAI;EAAA;EAAA;AAAA,8IAItCH,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,mBAAmB,GAAG,IAAArB,yBAAM,EAACsB,sBAAa,CAAC;EAAA;EAAA;AAAA,yBAEvD;AAAC"}

package/dist/cjs/components/CommandPallete/CommandPalleteCommandItem.js

@@ -0,0 +1,55 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CommandPalleteCommandItem = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _Icons = require("../Icons");
+var _Typography = require("../Typography/Typography");
+var _CommandPallete = require("./CommandPallete.styles");
+var _context = require("./context");
+var _excluded = ["title", "renderIcon", "className", "index"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var CommandPalleteCommandItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var title = _ref.title,
+    renderIcon = _ref.renderIcon,
+    className = _ref.className,
+    index = _ref.index,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var icon = renderIcon();
+  var _useSelectedContext = (0, _context.useSelectedContext)(),
+    selected = _useSelectedContext.selected,
+    setSelected = _useSelectedContext.setSelected;
+  var onMouseOver = function onMouseOver() {
+    setSelected(index);
+  };
+  return /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPalleteItem, _extends({}, rest, {
+    ref: ref,
+    className: (0, _classnames.default)("cp-item cp-command", className),
+    tabIndex: 1,
+    "aria-selected": selected === index,
+    onMouseOver: onMouseOver,
+    $selected: index === selected
+  }), /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledIcon, null, icon), /*#__PURE__*/_react.default.createElement(_StyledTypography, {
+    overflow: "truncate",
+    whitespace: "no-wrap",
+    variant: "Body 1",
+    color: "primary"
+  }, title), /*#__PURE__*/_react.default.createElement(_Icons.ArrowRightIcon, null));
+});
+exports.CommandPalleteCommandItem = CommandPalleteCommandItem;
+CommandPalleteCommandItem.displayName = "CommandPalleteCommandItem";
+var _StyledTypography = (0, _styledComponents.default)(_Typography.Typography).withConfig({
+  displayName: "CommandPalleteCommandItem___StyledTypography",
+  componentId: "sc-12i2mxl-0"
+})(["flex:1;"]);
+//# sourceMappingURL=CommandPalleteCommandItem.js.map

package/dist/cjs/components/CommandPallete/CommandPalleteCommandItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalleteCommandItem.js","names":["CommandPalleteCommandItem","forwardRef","ref","title","renderIcon","className","index","rest","icon","useSelectedContext","selected","setSelected","onMouseOver","classNames","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteCommandItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledCommandPalleteItem, StyledIcon } from \"./CommandPallete.styles\";\nimport { useSelectedContext } from \"./context\";\n\nexport interface CommandPalleteCommandItemProps\n  extends ComponentPropsWithoutRef<\"li\"> {\n  title: string;\n  renderIcon: () => ReactNode;\n  className?: string;\n  index?: number;\n  selected?: number;\n}\n\nexport const CommandPalleteCommandItem = forwardRef(\n  (\n    {\n      title,\n      renderIcon,\n      className,\n      index,\n      ...rest\n    }: CommandPalleteCommandItemProps,\n    ref: Ref<HTMLLIElement>\n  ) => {\n    const icon = renderIcon();\n    const { selected, setSelected } = useSelectedContext();\n\n    const onMouseOver = () => {\n      setSelected(index as number);\n    };\n\n    return (\n      <StyledCommandPalleteItem\n        {...rest}\n        ref={ref}\n        className={classNames(\"cp-item cp-command\", className)}\n        tabIndex={1}\n        aria-selected={selected === index}\n        onMouseOver={onMouseOver}\n        $selected={index === selected}\n      >\n        <StyledIcon>{icon}</StyledIcon>\n        <Typography\n          overflow=\"truncate\"\n          whitespace=\"no-wrap\"\n          variant=\"Body 1\"\n          color=\"primary\"\n          css={`\n            flex: 1;\n          `}\n        >\n          {title}\n        </Typography>\n        <ArrowRightIcon />\n      </StyledCommandPalleteItem>\n    );\n  }\n);\n\nCommandPalleteCommandItem.displayName = \"CommandPalleteCommandItem\";\n"],"mappings":";;;;;;;;AAAA;AACA;AAMA;AACA;AACA;AACA;AAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWxC,IAAMA,yBAAyB,gBAAG,IAAAC,iBAAU,EACjD,gBAQEC,GAAuB,EACpB;EAAA,IAPDC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACFC,IAAI;EAIT,IAAMC,IAAI,GAAGJ,UAAU,EAAE;EACzB,0BAAkC,IAAAK,2BAAkB,GAAE;IAA9CC,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAE7B,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACxBD,WAAW,CAACL,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,6BAAC,wCAAwB,eACnBC,IAAI;IACR,GAAG,EAAEL,GAAI;IACT,SAAS,EAAE,IAAAW,mBAAU,EAAC,oBAAoB,EAAER,SAAS,CAAE;IACvD,QAAQ,EAAE,CAAE;IACZ,iBAAeK,QAAQ,KAAKJ,KAAM;IAClC,WAAW,EAAEM,WAAY;IACzB,SAAS,EAAEN,KAAK,KAAKI;EAAS,iBAE9B,6BAAC,0BAAU,QAAEF,IAAI,CAAc,eAC/B;IACE,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC;EAAS,GAKdL,KAAK,CACK,eACb,6BAAC,qBAAc,OAAG,CACO;AAE/B,CAAC,CACF;AAAC;AAEFH,yBAAyB,CAACc,WAAW,GAAG,2BAA2B;AAAC;EAAA;EAAA;AAAA"}

package/dist/cjs/components/CommandPallete/CommandPalleteHeader.js

@@ -19,13 +19,16 @@ var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
     handleChange = _ref.handleChange,
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
+    commandsLength = _ref.commandsLength,
+    itemsLength = _ref.itemsLength,
     onChangeSearch = _ref.onChangeSearch;
   var inputRef = (0, _react.useRef)(null);
   var _useModeContext = (0, _ModeContext.useModeContext)(),
     mode = _useModeContext.mode,
     setMode = _useModeContext.setMode;
   var _useSelectedContext = (0, _context.useSelectedContext)(),
-    setSelected = _useSelectedContext.setSelected;
+    setSelected = _useSelectedContext.setSelected,
+    selected = _useSelectedContext.selected;
   var focusInput = function focusInput() {
     if (inputRef && inputRef.current) {
       inputRef.current.focus();
@@ -33,10 +36,18 @@ var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
   };
   var clearInput = function clearInput() {
     if (inputRef && inputRef.current) {
-      inputRef.current.value = "";
       onChangeSearch("");
     }
   };
+  (0, _react.useEffect)(function () {
+    if (search.length > 0) {
+      if (itemsLength > commandsLength) {
+        setSelected(commandsLength);
+      } else {
+        setSelected(0);
+      }
+    }
+  }, [search, commandsLength, itemsLength, setSelected]);
   return /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPalleteHeader, {
     className: "cp-header"
   }, /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledSearchIcon, null, /*#__PURE__*/_react.default.createElement(_Icons.SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledParameter, null, "ID#:") : null, /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledInput, {
@@ -52,9 +63,15 @@ var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
     spellCheck: false,
     value: search,
     onKeyDown: function onKeyDown(e) {
-      if (e.key === "Backspace" && mode === "id" && search.length === 0) {
+      if (e.key === "Backspace" && mode !== "default" && search.length === 0) {
         setMode("default");
       }
+      if (e.key === "Enter") {
+        var selectedItem = document.querySelectorAll(".cp-item")[selected];
+        if (itemsLength > 0) {
+          selectedItem.click();
+        }
+      }
     },
     onChange: function onChange(e) {
       var inputText = e.target.value;
@@ -63,7 +80,6 @@ var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
         clearInput();
       }
       handleChange(e);
-      setSelected(0);
     },
     onPaste: function onPaste(e) {
       var pastedText = e.clipboardData.getData("text");

package/dist/cjs/components/CommandPallete/CommandPalleteHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteHeader.js","names":["CommandPalleteHeader","search","handleChange","loading","onChangeSearch","inputRef","useRef","useModeContext","mode","setMode","useSelectedContext","setSelected","focusInput","current","focus","clearInput","value","e","key","length","inputText","target","startsWith","pastedText","clipboardData","getData","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useRef } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n  StyledActionWrapper,\n  StyledCommandPalleteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n  StyledSpinnerLoader,\n} from \"./CommandPallete.styles\";\nimport { useSelectedContext } from \"./context\";\n\nimport { useModeContext } from \"./context/ModeContext\";\n\nexport interface CommandPalleteHeaderProps {\n  search: string;\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n  onChangeSearch: (value: string) => void;\n}\n\nexport const CommandPalleteHeader = ({\n  search,\n  handleChange,\n  loading = false,\n  onChangeSearch,\n}: CommandPalleteHeaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { mode, setMode } = useModeContext();\n  const { setSelected } = useSelectedContext();\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  return (\n    <StyledCommandPalleteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n\n      <StyledInput\n        ref={inputRef}\n        autoFocus\n        placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\n        type={mode === \"id\" ? \"number\" : \"text\"}\n        aria-autocomplete=\"list\"\n        autoCapitalize=\"none\"\n        autoComplete=\"off\"\n        autoCorrect=\"off\"\n        role=\"combobox\"\n        spellCheck={false}\n        value={search}\n        onKeyDown={(e) => {\n          if (e.key === \"Backspace\" && mode === \"id\" && search.length === 0) {\n            setMode(\"default\");\n          }\n        }}\n        onChange={(e) => {\n          const inputText = e.target.value;\n\n          if (inputText.startsWith(\"#\")) {\n            setMode(\"id\");\n            clearInput();\n          }\n\n          handleChange(e);\n          setSelected(0);\n        }}\n        onPaste={(e) => {\n          const pastedText = e.clipboardData.getData(\"text\");\n\n          if (pastedText.startsWith(\"#\")) {\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\" && search.length === 0 ? (\n          <Tooltip title=\"Search by ID\" placement=\"top\">\n            <IconButton\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"id\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"id\");\n                clearInput();\n                focusInput();\n              }}\n              variant=\"text gray\"\n            >\n              <HashtagIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n\n        {search.length > 0 || mode === \"id\" ? (\n          <Tooltip\n            title={mode === \"id\" ? \"Close ID mode\" : \"Clear\"}\n            placement=\"top\"\n          >\n            <IconButton\n              variant=\"text gray\"\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"default\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"default\");\n                clearInput();\n                focusInput();\n              }}\n            >\n              <CloseIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n      </StyledActionWrapper>\n    </StyledCommandPalleteHeader>\n  );\n};\n\nCommandPalleteHeader.displayName = \"CommandPalleteItem\";\n"],"mappings":"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"}
+{"version":3,"file":"CommandPalleteHeader.js","names":["CommandPalleteHeader","search","handleChange","loading","commandsLength","itemsLength","onChangeSearch","inputRef","useRef","useModeContext","mode","setMode","useSelectedContext","setSelected","selected","focusInput","current","focus","clearInput","useEffect","length","e","key","selectedItem","document","querySelectorAll","click","inputText","target","value","startsWith","pastedText","clipboardData","getData","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useEffect, useRef } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n  StyledActionWrapper,\n  StyledCommandPalleteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n  StyledSpinnerLoader,\n} from \"./CommandPallete.styles\";\nimport { useSelectedContext } from \"./context\";\n\nimport { useModeContext } from \"./context/ModeContext\";\n\nexport interface CommandPalleteHeaderProps {\n  search: string;\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n  onChangeSearch: (value: string) => void;\n  commandsLength: number;\n  itemsLength: number;\n}\n\nexport const CommandPalleteHeader = ({\n  search,\n  handleChange,\n  loading = false,\n  commandsLength,\n  itemsLength,\n  onChangeSearch,\n}: CommandPalleteHeaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { mode, setMode } = useModeContext();\n  const { setSelected, selected } = useSelectedContext();\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  return (\n    <StyledCommandPalleteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n\n      <StyledInput\n        ref={inputRef}\n        autoFocus\n        placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\n        type={mode === \"id\" ? \"number\" : \"text\"}\n        aria-autocomplete=\"list\"\n        autoCapitalize=\"none\"\n        autoComplete=\"off\"\n        autoCorrect=\"off\"\n        role=\"combobox\"\n        spellCheck={false}\n        value={search}\n        onKeyDown={(e) => {\n          if (\n            e.key === \"Backspace\" &&\n            mode !== \"default\" &&\n            search.length === 0\n          ) {\n            setMode(\"default\");\n          }\n\n          if (e.key === \"Enter\") {\n            const selectedItem = document.querySelectorAll(\".cp-item\")[\n              selected\n            ] as HTMLElement;\n\n            if (itemsLength > 0) {\n              selectedItem.click();\n            }\n          }\n        }}\n        onChange={(e) => {\n          const inputText = e.target.value;\n\n          if (inputText.startsWith(\"#\")) {\n            setMode(\"id\");\n            clearInput();\n          }\n\n          handleChange(e);\n        }}\n        onPaste={(e) => {\n          const pastedText = e.clipboardData.getData(\"text\");\n\n          if (pastedText.startsWith(\"#\")) {\n            setMode(\"id\");\n          }\n        }}\n      />\n\n      <StyledActionWrapper>\n        {loading ? (\n          <StyledSpinnerLoader\n            aria-busy={true}\n            aria-label=\"Loading...\"\n            aria-valuemax={100}\n            aria-valuemin={0}\n            role=\"progressbar\"\n          />\n        ) : null}\n\n        {mode !== \"id\" && search.length === 0 ? (\n          <Tooltip title=\"Search by ID\" placement=\"top\">\n            <IconButton\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"id\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"id\");\n                clearInput();\n                focusInput();\n              }}\n              variant=\"text gray\"\n            >\n              <HashtagIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n\n        {search.length > 0 || mode === \"id\" ? (\n          <Tooltip\n            title={mode === \"id\" ? \"Close ID mode\" : \"Clear\"}\n            placement=\"top\"\n          >\n            <IconButton\n              variant=\"text gray\"\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"default\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"default\");\n                clearInput();\n                focusInput();\n              }}\n            >\n              <CloseIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n      </StyledActionWrapper>\n    </StyledCommandPalleteHeader>\n  );\n};\n\nCommandPalleteHeader.displayName = \"CommandPalleteItem\";\n"],"mappings":"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"}

package/dist/cjs/components/CommandPallete/CommandPalleteItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteItem.js","names":["CommandPalleteItem","forwardRef","ref","title","renderIcon","className","index","rest","icon","useSelectedContext","selected","setSelected","onMouseOver","classNames","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { forwardRef, HTMLAttributes, ReactNode, Ref } from \"react\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledCommandPalleteItem, StyledIcon } from \"./CommandPallete.styles\";\nimport { useSelectedContext } from \"./context\";\n\nexport interface CommandPalleteItemProps extends HTMLAttributes<HTMLLIElement> {\n  title: string;\n  renderIcon: () => ReactNode;\n  className?: string;\n  index?: number;\n  selected?: number;\n}\n\nexport const CommandPalleteItem = forwardRef(\n  (\n    { title, renderIcon, className, index, ...rest }: CommandPalleteItemProps,\n    ref: Ref<HTMLLIElement>\n  ) => {\n    const icon = renderIcon();\n    const { selected, setSelected } = useSelectedContext();\n\n    const onMouseOver = () => {\n      setSelected(index as number);\n    };\n\n    return (\n      <StyledCommandPalleteItem\n        {...rest}\n        ref={ref}\n        className={classNames(\"cp-item\", className)}\n        tabIndex={1}\n        aria-selected={selected === index}\n        onMouseOver={onMouseOver}\n        $selected={index === selected}\n      >\n        <StyledIcon>{icon}</StyledIcon>\n        <Typography\n          overflow=\"truncate\"\n          whitespace=\"no-wrap\"\n          variant=\"Body 1\"\n          color=\"primary\"\n        >\n          {title}\n        </Typography>\n      </StyledCommandPalleteItem>\n    );\n  }\n);\n\nCommandPalleteItem.displayName = \"CommandPalleteItem\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUxC,IAAMA,kBAAkB,gBAAG,IAAAC,iBAAU,EAC1C,gBAEEC,GAAuB,EACpB;EAAA,IAFDC,KAAK,QAALA,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAEC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAKC,IAAI;EAG9C,IAAMC,IAAI,GAAGJ,UAAU,EAAE;EACzB,0BAAkC,IAAAK,2BAAkB,GAAE;IAA9CC,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAE7B,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACxBD,WAAW,CAACL,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,6BAAC,wCAAwB,eACnBC,IAAI;IACR,GAAG,EAAEL,GAAI;IACT,SAAS,EAAE,IAAAW,mBAAU,EAAC,SAAS,EAAER,SAAS,CAAE;IAC5C,QAAQ,EAAE,CAAE;IACZ,iBAAeK,QAAQ,KAAKJ,KAAM;IAClC,WAAW,EAAEM,WAAY;IACzB,SAAS,EAAEN,KAAK,KAAKI;EAAS,iBAE9B,6BAAC,0BAAU,QAAEF,IAAI,CAAc,eAC/B,6BAAC,sBAAU;IACT,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC;EAAS,GAEdL,KAAK,CACK,CACY;AAE/B,CAAC,CACF;AAAC;AAEFH,kBAAkB,CAACc,WAAW,GAAG,oBAAoB"}
+{"version":3,"file":"CommandPalleteItem.js","names":["CommandPalleteItem","forwardRef","ref","title","renderIcon","className","index","rest","icon","useSelectedContext","selected","setSelected","onMouseOver","classNames","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledCommandPalleteItem, StyledIcon } from \"./CommandPallete.styles\";\nimport { useSelectedContext } from \"./context\";\n\nexport interface CommandPalleteItemProps\n  extends ComponentPropsWithoutRef<\"li\"> {\n  title: string;\n  renderIcon: () => ReactNode;\n  className?: string;\n  index?: number;\n  selected?: number;\n}\n\nexport const CommandPalleteItem = forwardRef(\n  (\n    { title, renderIcon, className, index, ...rest }: CommandPalleteItemProps,\n    ref: Ref<HTMLLIElement>\n  ) => {\n    const icon = renderIcon();\n    const { selected, setSelected } = useSelectedContext();\n\n    const onMouseOver = () => {\n      setSelected(index as number);\n    };\n\n    return (\n      <StyledCommandPalleteItem\n        {...rest}\n        ref={ref}\n        className={classNames(\"cp-item\", className)}\n        tabIndex={1}\n        aria-selected={selected === index}\n        onMouseOver={onMouseOver}\n        $selected={index === selected}\n      >\n        <StyledIcon>{icon}</StyledIcon>\n        <Typography\n          overflow=\"truncate\"\n          whitespace=\"no-wrap\"\n          variant=\"Body 1\"\n          color=\"primary\"\n        >\n          {title}\n        </Typography>\n      </StyledCommandPalleteItem>\n    );\n  }\n);\n\nCommandPalleteItem.displayName = \"CommandPalleteItem\";\n"],"mappings":";;;;;;;AAAA;AACA;AAMA;AACA;AACA;AAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWxC,IAAMA,kBAAkB,gBAAG,IAAAC,iBAAU,EAC1C,gBAEEC,GAAuB,EACpB;EAAA,IAFDC,KAAK,QAALA,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAEC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAKC,IAAI;EAG9C,IAAMC,IAAI,GAAGJ,UAAU,EAAE;EACzB,0BAAkC,IAAAK,2BAAkB,GAAE;IAA9CC,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAE7B,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACxBD,WAAW,CAACL,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,6BAAC,wCAAwB,eACnBC,IAAI;IACR,GAAG,EAAEL,GAAI;IACT,SAAS,EAAE,IAAAW,mBAAU,EAAC,SAAS,EAAER,SAAS,CAAE;IAC5C,QAAQ,EAAE,CAAE;IACZ,iBAAeK,QAAQ,KAAKJ,KAAM;IAClC,WAAW,EAAEM,WAAY;IACzB,SAAS,EAAEN,KAAK,KAAKI;EAAS,iBAE9B,6BAAC,0BAAU,QAAEF,IAAI,CAAc,eAC/B,6BAAC,sBAAU;IACT,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC;EAAS,GAEdL,KAAK,CACK,CACY;AAE/B,CAAC,CACF;AAAC;AAEFH,kBAAkB,CAACc,WAAW,GAAG,oBAAoB"}

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

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,EAAE,EAMF,SAAS,EACT,YAAY,EACZ,gBAAgB,EACjB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,gBAAgB,EAAU,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAe,MAAM,uBAAuB,CAAC;AAQvE,wBAAgB,aAAa,CAC3B,IAAI,EAAE,iBAAiB,GAAG,gBAAgB,GACzC,IAAI,IAAI,iBAAiB,CAE3B;AAED,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,uCAAuC;IACvC,OAAO,CAAC,EAAE,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,EAAE,CAAC;IACnD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,GAAG,MAAM,CAAC;IACjD,qBAAqB;IACrB,OAAO,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAChE,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EACjC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC1B,MAAM,GAAG,YAAY,CAAC;IAC3B,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC/B,4BAA4B;IAC5B,YAAY,CAAC,EAAE,CACb,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,KACxD,IAAI,CAAC;IACV,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB;IACxB,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,8BAA8B;IAC9B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,2CAA2C;IAC3C,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,yCAAyC;IACzC,yBAAyB,CAAC,EAAE,MAAM,IAAI,CAAC;IACvC,uCAAuC;IACvC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,0DAA0D;IAC1D,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAOD,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,kBAAkB,CAmc/C,CAAC"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,EAAE,EAMF,SAAS,EACT,YAAY,EACZ,gBAAgB,EACjB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,gBAAgB,EAAU,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAe,MAAM,uBAAuB,CAAC;AAQvE,wBAAgB,aAAa,CAC3B,IAAI,EAAE,iBAAiB,GAAG,gBAAgB,GACzC,IAAI,IAAI,iBAAiB,CAE3B;AAED,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,uCAAuC;IACvC,OAAO,CAAC,EAAE,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,EAAE,CAAC;IACnD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,GAAG,MAAM,CAAC;IACjD,qBAAqB;IACrB,OAAO,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAChE,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EACjC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC1B,MAAM,GAAG,YAAY,CAAC;IAC3B,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC/B,4BAA4B;IAC5B,YAAY,CAAC,EAAE,CACb,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,KACxD,IAAI,CAAC;IACV,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB;IACxB,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,8BAA8B;IAC9B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,2CAA2C;IAC3C,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,yCAAyC;IACzC,yBAAyB,CAAC,EAAE,MAAM,IAAI,CAAC;IACvC,uCAAuC;IACvC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,0DAA0D;IAC1D,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAOD,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,kBAAkB,CA0c/C,CAAC"}

package/dist/esm/components/Autocomplete/Autocomplete.js

@@ -319,10 +319,17 @@ export var Autocomplete = function Autocomplete(_ref) {
     });
   }, [filter, flatOptions, toggleSelected, handleDefaultOptionChange, handleEmpty, hover, showAddNew, showDefaultOption]);
   useEffect(function () {
-    if (inputEl != null && inputEl.current) {
-      inputEl.current.onkeydown = handleOnKeyDown;
-      inputEl.current.onkeyup = handleInputChange;
+    var inputRef = inputEl == null ? void 0 : inputEl.current;
+    if (inputRef) {
+      inputRef.addEventListener("input", handleInputChange);
+      inputRef.addEventListener("keydown", handleOnKeyDown);
     }
+    return function () {
+      if (inputRef) {
+        inputRef.removeEventListener("input", handleInputChange);
+        inputRef.removeEventListener("keydown", handleOnKeyDown);
+      }
+    };
   }, [handleInputChange, handleOnKeyDown, inputEl]);
   var isDefaultOptionSelected = useCallback(function () {
     if (preselectDefaultValue) {