intelicoreact 2.0.20 → 2.0.21

package/dist/es/Molecular/InputCustomFetch/InputCustomFetch.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputCustomFetch.js","names":[],"sources":["../../../../src/Molecular/InputCustomFetch/InputCustomFetch.tsx"],"sourcesContent":["import type { InputCustomFetchProps } from './model/types';\nimport cn from 'classnames';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { AlertTriangle, X } from 'react-feather';\nimport Input from '../../Atomic/FormElements/Input/Input';\nimport Spinner from '../../Atomic/Layout/Spinner/Spinner';\nimport Hint from '../../Atomic/UI/Hint/Hint';\n\nimport useIsMobile from '../../Functions/useIsMobile/useIsMobile';\n\nimport { useDebouncedCallback } from './lib/hooks/useDebouncedCallback';\nimport { useFetchWithAbort } from './lib/hooks/useFetchWithAbort';\nimport { compareValues, getIsValidNumber } from './lib/utils';\n\nimport './InputCustomFetch.scss';\n\nconst RC = 'input-custom-fetch';\nconst DEFAULT_HINT_MESSAGE = 'Please select a valid option from the list';\n\nfunction noop(): void {}\n\nfunction InputCustomFetch<TOption = any, TValue = any>(\n  props: InputCustomFetchProps<TOption, TValue>,\n): JSX.Element {\n  const {\n    label,\n    className = '',\n    isClearable = true,\n    isKeyboardControlled = true,\n    fieldKey = '',\n    testId = '',\n    throttle: throttleTime = 500,\n    loader = '',\n    noItemsMessage = '',\n    error,\n    value = '' as TValue,\n    onChange = noop,\n    onChangeValueTransformer,\n    disabled,\n    isDisabled,\n    noValidate = false,\n    attributesOfNativeInput,\n    optionToValue,\n    valueToSearchString,\n    isValidValue,\n    renderSelectedItem,\n    renderListItem,\n    renderHintMessage,\n  } = props;\n\n  const { isMobile } = useIsMobile();\n\n  // Refs\n  const inputRef = useRef<any>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const listOverlayRef = useRef<HTMLDivElement>(null);\n  const listWrapperRef = useRef<HTMLDivElement>(null);\n  const listHeaderRef = useRef<HTMLDivElement>(null);\n  const previousValueRef = useRef<TValue>(value);\n\n  // State\n  const [isScrollableList] = useState<boolean | null>(null);\n  const [scrollTop] = useState(0);\n\n  const [innerValue, setInnerValue] = useState<TValue>(value);\n  const [tempInnerValue, setTempInnerValue] = useState<TValue | null>(null);\n\n  const [listItems, setListItems] = useState<TOption[]>([]);\n  const [isLoading] = useState(false);\n  const [isListLoading, setIsListLoading] = useState(false);\n\n  const [hightlightedIndex, setHightlightedIndex] = useState<number | null>(null);\n\n  const [isFocused, setIsFocused] = useState(false);\n  const [isListVisible, setIsListVisible] = useState(false);\n\n  // ===================== FETCH LOGIC =====================\n\n  const { fetchWithAbort, abortControllerRef } = useFetchWithAbort(props);\n\n  const execute = useCallback(\n    async (searchQuery: string): Promise<void> => {\n      if (!searchQuery?.length) return;\n\n      setIsListLoading(true);\n      try {\n        const items = await fetchWithAbort(searchQuery);\n        setListItems(items);\n      }\n      catch {\n        setListItems([]);\n      }\n      finally {\n        setIsListLoading(false);\n      }\n    },\n    [fetchWithAbort],\n  );\n\n  const debouncedExecute = useDebouncedCallback(\n    execute,\n    getIsValidNumber(throttleTime) ? throttleTime : 0,\n  );\n\n  const getOptionsList = useCallback(() => {\n    const searchString = valueToSearchString(innerValue);\n    if (!searchString?.length) return;\n\n    debouncedExecute(searchString);\n  }, [innerValue, valueToSearchString, debouncedExecute]);\n\n  // ===================== VALIDATION =====================\n\n  const isWrongValue = useMemo(() => {\n    if (noValidate) return false;\n\n    const searchString = valueToSearchString(innerValue);\n    if (searchString === '') return false;\n\n    if (isValidValue) {\n      return !isValidValue(innerValue);\n    }\n\n    return false;\n  }, [innerValue, noValidate, isValidValue, valueToSearchString]);\n\n  // ===================== HANDLERS =====================\n\n  const setItemAsInnerValue = useCallback(\n    (e: React.MouseEvent | null, item: TOption) => {\n      if (e instanceof Event) {\n        e.preventDefault();\n        e.stopPropagation();\n      }\n\n      setTimeout(() => {\n        const newValue = optionToValue(item);\n        setInnerValue(newValue);\n\n        if (isMobile) {\n          setIsListVisible(false);\n        }\n      }, 0);\n    },\n    [optionToValue, isMobile],\n  );\n\n  const onClearClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (!isMobile) {\n        setIsListVisible(false);\n      }\n\n      setInnerValue('' as TValue);\n\n      inputRef?.current?.focus();\n      setTimeout(() => setIsFocused(true), 0);\n    },\n    [isMobile],\n  );\n\n  const onOverlayClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === listOverlayRef?.current) {\n        e.stopPropagation();\n        e.preventDefault();\n        setIsListVisible(false);\n        if (tempInnerValue !== null) {\n          setInnerValue(tempInnerValue);\n          onChange(\n            !onChangeValueTransformer || typeof onChangeValueTransformer !== 'function'\n              ? tempInnerValue\n              : onChangeValueTransformer(tempInnerValue),\n          );\n        }\n      }\n    },\n    [tempInnerValue, onChange, onChangeValueTransformer],\n  );\n\n  const onKeyDown = useCallback(\n    (keyCode: number | string): void => {\n      if (!isListVisible || !isKeyboardControlled) return;\n\n      if (keyCode === 13) {\n        // Enter\n        if (hightlightedIndex !== null && listItems[hightlightedIndex]) {\n          setItemAsInnerValue(null, listItems[hightlightedIndex]);\n          setHightlightedIndex(null);\n          inputRef?.current?.blur();\n        }\n      }\n      else {\n        let newHightlightedIndex: number | null = null;\n        const listItemsElements = document.getElementsByClassName(\n          `${RC}__list--item`,\n        );\n\n        const listHeight = listRef?.current?.getBoundingClientRect()?.height || 0;\n        const listScrollTop = listRef?.current?.scrollTop || 0;\n        const lastItemIndex = listItems.length - 1;\n\n        if (keyCode === 40) {\n          // Down\n          if (hightlightedIndex === null || hightlightedIndex === lastItemIndex) {\n            newHightlightedIndex = 0;\n          }\n          else if (hightlightedIndex + 1 < listItems.length) {\n            newHightlightedIndex = hightlightedIndex + 1;\n          }\n        }\n        else if (keyCode === 38) {\n          // Up\n          if (hightlightedIndex === null || hightlightedIndex === 0) {\n            newHightlightedIndex = lastItemIndex;\n          }\n          else if (hightlightedIndex - 1 >= 0) {\n            newHightlightedIndex = hightlightedIndex - 1;\n          }\n        }\n\n        if (newHightlightedIndex !== null) {\n          const newHightlightedElement = listItemsElements[\n            newHightlightedIndex\n          ] as HTMLElement;\n          const newHightlightedElementHeight\n            = newHightlightedElement?.getBoundingClientRect()?.height || 0;\n          const newHightlightedElementTopInList\n            = newHightlightedElement?.offsetTop || 0;\n\n          if (\n            newHightlightedElementTopInList + newHightlightedElementHeight\n            > listScrollTop + listHeight\n          ) {\n            if (\n              Math.abs(\n                newHightlightedElementTopInList\n                + newHightlightedElementHeight\n                - (listScrollTop + listHeight),\n              ) <= newHightlightedElementHeight\n            ) {\n              listRef?.current?.scrollTo(\n                0,\n                listScrollTop + newHightlightedElementHeight,\n              );\n            }\n            else {\n              listRef?.current?.scrollTo(0, newHightlightedElementTopInList);\n            }\n          }\n          else if (newHightlightedElementTopInList < listScrollTop) {\n            if (\n              Math.abs(newHightlightedElementTopInList - listScrollTop)\n              < newHightlightedElementHeight\n            ) {\n              listRef?.current?.scrollTo(\n                0,\n                listScrollTop - newHightlightedElementHeight,\n              );\n            }\n            else {\n              listRef?.current?.scrollTo(0, newHightlightedElementTopInList);\n            }\n          }\n\n          if (!isMobile) setHightlightedIndex(newHightlightedIndex);\n        }\n      }\n    },\n    [\n      isListVisible,\n      isKeyboardControlled,\n      hightlightedIndex,\n      listItems,\n      isMobile,\n      setItemAsInnerValue,\n    ],\n  );\n\n  // ===================== RENDER HELPERS =====================\n\n  const getHintMessage = useCallback((): string => {\n    if (!renderHintMessage || typeof renderHintMessage !== 'function')\n      return DEFAULT_HINT_MESSAGE;\n\n    return renderHintMessage(innerValue);\n  }, [renderHintMessage, innerValue]);\n\n  const getSelectedItemLabel = useCallback(\n    (val: TValue = innerValue): string => {\n      if (!val) return '';\n\n      const searchString = valueToSearchString(val);\n      if (typeof searchString === 'string') return searchString;\n\n      if (typeof renderSelectedItem === 'function') {\n        return renderSelectedItem(val);\n      }\n\n      return String(val);\n    },\n    [innerValue, valueToSearchString, renderSelectedItem],\n  );\n\n  const getListItemLabel = useCallback(\n    (item: TOption): React.ReactNode => {\n      if (!renderListItem || typeof renderListItem !== 'function') {\n        return String(item);\n      }\n\n      return renderListItem(item);\n    },\n    [renderListItem],\n  );\n\n  const setListHeight = useCallback(() => {\n    if (listWrapperRef?.current && listHeaderRef?.current && listRef.current) {\n      const listWrapperHeight\n        = listWrapperRef?.current?.getBoundingClientRect()?.height || 0;\n      const listWrapperStyles = getComputedStyle(listWrapperRef?.current);\n\n      const listHeaderHeight\n        = listHeaderRef?.current?.getBoundingClientRect()?.height || 0;\n\n      const listHeight\n        = listWrapperHeight\n          - listHeaderHeight\n          - Number.parseInt(listWrapperStyles.paddingBottom || '0', 10);\n\n      listRef.current.style.maxHeight = `${listHeight}px`;\n    }\n  }, []);\n\n  const resetListHeight = useCallback(() => {\n    if (listRef.current) {\n      listRef.current.style.maxHeight = `initial`;\n    }\n  }, []);\n\n  // ===================== EFFECTS =====================\n\n  useEffect(() => {\n    if (!compareValues(innerValue, previousValueRef.current)) {\n      const searchString = valueToSearchString(innerValue);\n\n      if (searchString) {\n        onChange(\n          !onChangeValueTransformer || typeof onChangeValueTransformer !== 'function'\n            ? innerValue\n            : onChangeValueTransformer(innerValue),\n        );\n\n        if (!isListVisible) setIsListVisible(true);\n        if (isFocused) getOptionsList();\n      }\n      else {\n        onChange(innerValue);\n      }\n    }\n  }, [innerValue, valueToSearchString, onChange, onChangeValueTransformer, isListVisible, isFocused, getOptionsList]);\n\n  useEffect(() => {\n    if (!isFocused && !isMobile) {\n      setIsListVisible(false);\n      setHightlightedIndex(null);\n    }\n  }, [isFocused, isMobile]);\n\n  useEffect(() => {\n    if (!isListVisible) {\n      setListItems([]);\n      resetListHeight();\n    }\n\n    if (isMobile && isListVisible) {\n      setTempInnerValue(innerValue);\n      setListHeight();\n    }\n  }, [isListVisible, isMobile, innerValue, resetListHeight, setListHeight]);\n\n  useEffect(() => {\n    if (!compareValues(value, innerValue)) {\n      setInnerValue(value);\n    }\n\n    previousValueRef.current = value;\n  }, [value, innerValue]);\n\n  // Cleanup abort controller on unmount\n  useEffect(() => {\n    return () => {\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n    };\n  }, [abortControllerRef]);\n\n  // ===================== RENDER COMPONENTS =====================\n\n  const renderSearchableInput = (): JSX.Element => {\n    const inputValue = getSelectedItemLabel();\n\n    return (\n      <div className={cn(`${RC}__input-wrapper`)}>\n        <Input\n          ref={inputRef}\n          testId={`${RC}--input--key-${testId || fieldKey}`}\n          className={cn(`${RC}__input`, className)}\n          value={inputValue}\n          onChange={(val: string) => setInnerValue(val as TValue)}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          onKeyDown={onKeyDown}\n          attributesOfNativeInput={attributesOfNativeInput}\n          disabled={disabled || isDisabled}\n        />\n        {isWrongValue && (\n          <div\n            className={cn(`${RC}__alert`, {\n              [`${RC}__alert--visible`]: !isFocused,\n            })}\n          >\n            <Hint\n              side=\"left\"\n              hint={getHintMessage()}\n              icon={<AlertTriangle />}\n              handleOpenType=\"hover\"\n            />\n          </div>\n        )}\n        {isClearable && (!isWrongValue || isFocused) && !(disabled || isDisabled) && inputValue && (\n          <div\n            className={cn(`${RC}__clear-query`, {\n              [`${RC}__clear-query--input-focused`]: isFocused,\n            })}\n          >\n            <X onClick={onClearClick} />\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  const renderInput = (): JSX.Element => {\n    const inputValue = getSelectedItemLabel(\n      isListVisible ? tempInnerValue || innerValue : innerValue,\n    );\n\n    return (\n      <div className={cn(`${RC}__input-wrapper`)}>\n        <Input\n          testId={`${RC}--input--key-${testId || fieldKey}`}\n          className={cn(`${RC}__input`, className)}\n          value={inputValue}\n          onChange={(val: string) => setInnerValue(val as TValue)}\n          onFocus={(e: any) => {\n            setIsListVisible(true);\n            e?.target?.blur();\n            setTimeout(() => inputRef?.current?.focus(), 200);\n          }}\n          disabled={disabled || isDisabled}\n        />\n      </div>\n    );\n  };\n\n  const renderLoader = (): JSX.Element => {\n    return (\n      <div className={`${RC}__list--loader`}>\n        {loader || 'Loading...'}\n      </div>\n    );\n  };\n\n  const renderList = (): JSX.Element => {\n    const renderListItemComponent = (item: TOption, i: number): JSX.Element => {\n      return (\n        <div\n          key={`${RC}__list-item${i}`}\n          className={cn(`${RC}__list--item`, {\n            [`${RC}__list--item-hightlighted`]: i === hightlightedIndex,\n          })}\n          onMouseDown={e => setItemAsInnerValue(e, item)}\n        >\n          {getListItemLabel(item)}\n        </div>\n      );\n    };\n\n    const renderNoItems = (): JSX.Element => {\n      return (\n        <div className={`${RC}__list--no-items`}>\n          {isMobile && !valueToSearchString(innerValue)?.length\n            ? 'Please begin typing'\n            : noItemsMessage || 'No Items'}\n        </div>\n      );\n    };\n\n    const renderListDesktop = (): JSX.Element => {\n      return (\n        <div className={`${RC}__list-wrapper`} ref={listWrapperRef}>\n          <div className={`${RC}__list`} ref={listRef}>\n            {isListLoading\n              ? renderLoader()\n              : listItems?.length\n                ? listItems?.map(renderListItemComponent)\n                : renderNoItems()}\n          </div>\n        </div>\n      );\n    };\n\n    const renderListMobile = (): JSX.Element => {\n      return (\n        <div\n          className={`${RC}__list-overlay`}\n          ref={listOverlayRef}\n          onClick={onOverlayClick}\n        >\n          <div className={`${RC}__list-wrapper`} ref={listWrapperRef}>\n            {isMobile && (\n              <div\n                ref={listHeaderRef}\n                className={cn(`${RC}__list-header`, {\n                  [`${RC}__list-header-with-shadow`]:\n                    isScrollableList && isMobile,\n                  [`${RC}__list-header-with-shadow-hidden`]: scrollTop === 0,\n                })}\n              >\n                <div className={cn(`${RC}__list-header-row`)}>\n                  <div className={cn(`${RC}__list-label`)}>\n                    {label || 'Select'}\n                  </div>\n                  <div\n                    className={cn(`${RC}__list-close-icon`)}\n                    onClick={() => setIsListVisible(false)}\n                  >\n                    <X onClick={() => setIsListVisible(false)} />\n                  </div>\n                </div>\n                <div className={cn(`${RC}__list-header-row`)}>\n                  {renderSearchableInput()}\n                </div>\n              </div>\n            )}\n            <div className={`${RC}__list`} ref={listRef}>\n              {isListLoading\n                ? renderLoader()\n                : listItems?.length\n                  ? listItems?.map(renderListItemComponent)\n                  : renderNoItems()}\n            </div>\n          </div>\n        </div>\n      );\n    };\n\n    return isMobile ? renderListMobile() : renderListDesktop();\n  };\n\n  return (\n    <div\n      className={cn(RC, {\n        [`${RC}--error`]: error || (isWrongValue && !isFocused),\n        [`${RC}--disabled`]: disabled || isDisabled,\n      })}\n    >\n      {isLoading && <Spinner size=\"small\" />}\n      {isMobile ? renderInput() : renderSearchableInput()}\n      {isListVisible && renderList()}\n    </div>\n  );\n}\n\nexport default InputCustomFetch;\n"],"mappings":"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"}
+{"version":3,"file":"InputCustomFetch.js","names":[],"sources":["../../../../src/Molecular/InputCustomFetch/InputCustomFetch.tsx"],"sourcesContent":["import type { InputCustomFetchProps } from './model/types';\nimport cn from 'classnames';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { AlertTriangle, X } from 'react-feather';\nimport Input from '../../Atomic/FormElements/Input/Input';\nimport Spinner from '../../Atomic/Layout/Spinner/Spinner';\nimport Hint from '../../Atomic/UI/Hint/Hint';\n\nimport useIsMobile from '../../Functions/useIsMobile/useIsMobile';\n\nimport { useDebouncedCallback } from './lib/hooks/useDebouncedCallback';\nimport { useFetchWithAbort } from './lib/hooks/useFetchWithAbort';\nimport { compareValues, getIsValidNumber } from './lib/utils';\n\nimport './InputCustomFetch.scss';\n\nconst RC = 'input-custom-fetch';\nconst DEFAULT_HINT_MESSAGE = 'Please select a valid option from the list';\n\nfunction noop(): void {}\n\nfunction InputCustomFetch<TOption = any, TValue = any>(\n  props: InputCustomFetchProps<TOption, TValue>,\n): JSX.Element {\n  const {\n    label,\n    className = '',\n    isClearable = true,\n    isKeyboardControlled = true,\n    fieldKey = '',\n    testId = '',\n    throttle: throttleTime = 500,\n    loader = '',\n    noItemsMessage = '',\n    error,\n    value = '' as TValue,\n    onChange = noop,\n    onChangeValueTransformer,\n    disabled,\n    isDisabled,\n    noValidate = false,\n    attributesOfNativeInput,\n    optionToValue,\n    valueToSearchString,\n    isValidValue,\n    renderSelectedItem,\n    renderListItem,\n    renderHintMessage,\n  } = props;\n\n  const { isMobile } = useIsMobile();\n\n  // Refs\n  const inputRef = useRef<any>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const listOverlayRef = useRef<HTMLDivElement>(null);\n  const listWrapperRef = useRef<HTMLDivElement>(null);\n  const listHeaderRef = useRef<HTMLDivElement>(null);\n  const previousValueRef = useRef<TValue>(value);\n\n  // State\n  const [isScrollableList] = useState<boolean | null>(null);\n  const [scrollTop] = useState(0);\n\n  const [innerValue, setInnerValue] = useState<TValue>(value);\n  const [tempInnerValue, setTempInnerValue] = useState<TValue | null>(null);\n\n  const [listItems, setListItems] = useState<TOption[]>([]);\n  const [isLoading] = useState(false);\n  const [isListLoading, setIsListLoading] = useState(false);\n\n  const [hightlightedIndex, setHightlightedIndex] = useState<number | null>(null);\n\n  const [isFocused, setIsFocused] = useState(false);\n  const [isListVisible, setIsListVisible] = useState(false);\n\n  // ===================== FETCH LOGIC =====================\n\n  const { fetchWithAbort, abortControllerRef } = useFetchWithAbort(props);\n\n  const execute = useCallback(\n    async (searchQuery: string): Promise<void> => {\n      if (!searchQuery?.length) return;\n\n      setIsListLoading(true);\n      try {\n        const items = await fetchWithAbort(searchQuery);\n        setListItems(items);\n      }\n      catch {\n        setListItems([]);\n      }\n      finally {\n        setIsListLoading(false);\n      }\n    },\n    [fetchWithAbort],\n  );\n\n  const debouncedExecute = useDebouncedCallback(\n    execute,\n    getIsValidNumber(throttleTime) ? throttleTime : 0,\n  );\n\n  const getOptionsList = useCallback(() => {\n    const searchString = valueToSearchString(innerValue);\n    if (!searchString?.length) return;\n\n    debouncedExecute(searchString);\n  }, [innerValue, valueToSearchString, debouncedExecute]);\n\n  // ===================== VALIDATION =====================\n\n  const isWrongValue = useMemo(() => {\n    if (noValidate) return false;\n\n    const searchString = valueToSearchString(innerValue);\n    if (searchString === '') return false;\n\n    if (isValidValue) {\n      return !isValidValue(innerValue);\n    }\n\n    return false;\n  }, [innerValue, noValidate, isValidValue, valueToSearchString]);\n\n  // ===================== HANDLERS =====================\n\n  const setItemAsInnerValue = useCallback(\n    (e: React.MouseEvent | null, item: TOption) => {\n      if (e instanceof Event) {\n        e.preventDefault();\n        e.stopPropagation();\n      }\n\n      setTimeout(() => {\n        const newValue = optionToValue(item);\n        setInnerValue(newValue);\n\n        if (isMobile) {\n          setIsListVisible(false);\n        }\n      }, 0);\n    },\n    [optionToValue, isMobile],\n  );\n\n  const onClearClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (!isMobile) {\n        setIsListVisible(false);\n      }\n\n      setInnerValue('' as TValue);\n\n      inputRef?.current?.focus();\n      setTimeout(() => setIsFocused(true), 0);\n    },\n    [isMobile],\n  );\n\n  const onOverlayClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === listOverlayRef?.current) {\n        e.stopPropagation();\n        e.preventDefault();\n        setIsListVisible(false);\n        if (tempInnerValue !== null) {\n          setInnerValue(tempInnerValue);\n          onChange(\n            !onChangeValueTransformer || typeof onChangeValueTransformer !== 'function'\n              ? tempInnerValue\n              : onChangeValueTransformer(tempInnerValue),\n          );\n        }\n      }\n    },\n    [tempInnerValue, onChange, onChangeValueTransformer],\n  );\n\n  const onKeyDown = useCallback(\n    (keyCode: number | string): void => {\n      if (!isListVisible || !isKeyboardControlled) return;\n\n      if (keyCode === 13) {\n        // Enter\n        if (hightlightedIndex !== null && listItems[hightlightedIndex]) {\n          setItemAsInnerValue(null, listItems[hightlightedIndex]);\n          setHightlightedIndex(null);\n          inputRef?.current?.blur();\n        }\n      }\n      else {\n        let newHightlightedIndex: number | null = null;\n        const listItemsElements = document.getElementsByClassName(\n          `${RC}__list--item`,\n        );\n\n        const listHeight = listRef?.current?.getBoundingClientRect()?.height || 0;\n        const listScrollTop = listRef?.current?.scrollTop || 0;\n        const lastItemIndex = listItems.length - 1;\n\n        if (keyCode === 40) {\n          // Down\n          if (hightlightedIndex === null || hightlightedIndex === lastItemIndex) {\n            newHightlightedIndex = 0;\n          }\n          else if (hightlightedIndex + 1 < listItems.length) {\n            newHightlightedIndex = hightlightedIndex + 1;\n          }\n        }\n        else if (keyCode === 38) {\n          // Up\n          if (hightlightedIndex === null || hightlightedIndex === 0) {\n            newHightlightedIndex = lastItemIndex;\n          }\n          else if (hightlightedIndex - 1 >= 0) {\n            newHightlightedIndex = hightlightedIndex - 1;\n          }\n        }\n\n        if (newHightlightedIndex !== null) {\n          const newHightlightedElement = listItemsElements[\n            newHightlightedIndex\n          ] as HTMLElement;\n          const newHightlightedElementHeight\n            = newHightlightedElement?.getBoundingClientRect()?.height || 0;\n          const newHightlightedElementTopInList\n            = newHightlightedElement?.offsetTop || 0;\n\n          if (\n            newHightlightedElementTopInList + newHightlightedElementHeight\n            > listScrollTop + listHeight\n          ) {\n            if (\n              Math.abs(\n                newHightlightedElementTopInList\n                + newHightlightedElementHeight\n                - (listScrollTop + listHeight),\n              ) <= newHightlightedElementHeight\n            ) {\n              listRef?.current?.scrollTo(\n                0,\n                listScrollTop + newHightlightedElementHeight,\n              );\n            }\n            else {\n              listRef?.current?.scrollTo(0, newHightlightedElementTopInList);\n            }\n          }\n          else if (newHightlightedElementTopInList < listScrollTop) {\n            if (\n              Math.abs(newHightlightedElementTopInList - listScrollTop)\n              < newHightlightedElementHeight\n            ) {\n              listRef?.current?.scrollTo(\n                0,\n                listScrollTop - newHightlightedElementHeight,\n              );\n            }\n            else {\n              listRef?.current?.scrollTo(0, newHightlightedElementTopInList);\n            }\n          }\n\n          if (!isMobile) setHightlightedIndex(newHightlightedIndex);\n        }\n      }\n    },\n    [\n      isListVisible,\n      isKeyboardControlled,\n      hightlightedIndex,\n      listItems,\n      isMobile,\n      setItemAsInnerValue,\n    ],\n  );\n\n  // ===================== RENDER HELPERS =====================\n\n  const getHintMessage = useCallback((): string => {\n    if (!renderHintMessage || typeof renderHintMessage !== 'function')\n      return DEFAULT_HINT_MESSAGE;\n\n    return renderHintMessage(innerValue);\n  }, [renderHintMessage, innerValue]);\n\n  const getSelectedItemLabel = useCallback(\n    (val: TValue = innerValue): string => {\n      if (!val) return '';\n\n      const searchString = valueToSearchString(val);\n      if (typeof searchString === 'string') return searchString;\n\n      if (typeof renderSelectedItem === 'function') {\n        return renderSelectedItem(val);\n      }\n\n      return String(val);\n    },\n    [innerValue, valueToSearchString, renderSelectedItem],\n  );\n\n  const getListItemLabel = useCallback(\n    (item: TOption): React.ReactNode => {\n      if (!renderListItem || typeof renderListItem !== 'function') {\n        return String(item);\n      }\n\n      return renderListItem(item);\n    },\n    [renderListItem],\n  );\n\n  const setListHeight = useCallback(() => {\n    if (listWrapperRef?.current && listHeaderRef?.current && listRef.current) {\n      const listWrapperHeight\n        = listWrapperRef?.current?.getBoundingClientRect()?.height || 0;\n      const listWrapperStyles = getComputedStyle(listWrapperRef?.current);\n\n      const listHeaderHeight\n        = listHeaderRef?.current?.getBoundingClientRect()?.height || 0;\n\n      const listHeight\n        = listWrapperHeight\n          - listHeaderHeight\n          - Number.parseInt(listWrapperStyles.paddingBottom || '0', 10);\n\n      listRef.current.style.maxHeight = `${listHeight}px`;\n    }\n  }, []);\n\n  const resetListHeight = useCallback(() => {\n    if (listRef.current) {\n      listRef.current.style.maxHeight = `initial`;\n    }\n  }, []);\n\n  // ===================== EFFECTS =====================\n\n  useEffect(() => {\n    if (!compareValues(innerValue, previousValueRef.current)) {\n      const searchString = valueToSearchString(innerValue);\n\n      if (searchString) {\n        onChange(\n          !onChangeValueTransformer || typeof onChangeValueTransformer !== 'function'\n            ? innerValue\n            : onChangeValueTransformer(innerValue),\n        );\n\n        if (!isListVisible) setIsListVisible(true);\n        if (isFocused) getOptionsList();\n      }\n      else {\n        onChange(innerValue);\n      }\n    }\n  }, [innerValue, valueToSearchString, onChange, onChangeValueTransformer, isListVisible, isFocused, getOptionsList]);\n\n  useEffect(() => {\n    if (!isFocused && !isMobile) {\n      setIsListVisible(false);\n      setHightlightedIndex(null);\n    }\n  }, [isFocused, isMobile]);\n\n  useEffect(() => {\n    if (!isListVisible) {\n      setListItems([]);\n      resetListHeight();\n    }\n\n    if (isMobile && isListVisible) {\n      setTempInnerValue(innerValue);\n      setListHeight();\n    }\n  }, [isListVisible, isMobile, innerValue, resetListHeight, setListHeight]);\n\n  useEffect(() => {\n    if (!compareValues(value, innerValue)) {\n      setInnerValue(value);\n    }\n\n    previousValueRef.current = value;\n  }, [value, innerValue]);\n\n  // Cleanup abort controller on unmount\n  useEffect(() => {\n    return () => {\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n    };\n  }, [abortControllerRef]);\n\n  // ===================== RENDER COMPONENTS =====================\n\n  const renderSearchableInput = (): JSX.Element => {\n    const inputValue = getSelectedItemLabel();\n\n    return (\n      <div className={cn(`${RC}__input-wrapper`)}>\n        <Input\n          ref={inputRef}\n          testId={`${RC}--input--key-${testId || fieldKey}`}\n          className={cn(`${RC}__input`, className)}\n          value={inputValue}\n          onChange={(val: string) => setInnerValue(val as TValue)}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          onKeyDown={onKeyDown}\n          attributesOfNativeInput={attributesOfNativeInput}\n          disabled={disabled || isDisabled}\n        />\n        {isWrongValue && (\n          <div\n            className={cn(`${RC}__alert`, {\n              [`${RC}__alert--visible`]: !isFocused,\n            })}\n          >\n            <Hint\n              side=\"left\"\n              hint={getHintMessage()}\n              icon={<AlertTriangle />}\n              handleOpenType=\"hover\"\n            />\n          </div>\n        )}\n        {isClearable && (!isWrongValue || isFocused) && !(disabled || isDisabled) && inputValue && (\n          <div\n            className={cn(`${RC}__clear-query`, {\n              [`${RC}__clear-query--input-focused`]: isFocused,\n            })}\n          >\n            <X onClick={onClearClick} />\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  const renderInput = (): JSX.Element => {\n    const inputValue = getSelectedItemLabel(\n      isListVisible ? tempInnerValue || innerValue : innerValue,\n    );\n\n    return (\n      <div className={cn(`${RC}__input-wrapper`)}>\n        <Input\n          testId={`${RC}--input--key-${testId || fieldKey}`}\n          className={cn(`${RC}__input`, className)}\n          value={inputValue}\n          onChange={(val: string) => setInnerValue(val as TValue)}\n          onFocus={(e: any) => {\n            setIsListVisible(true);\n            e?.target?.blur();\n            setTimeout(() => inputRef?.current?.focus(), 200);\n          }}\n          disabled={disabled || isDisabled}\n        />\n      </div>\n    );\n  };\n\n  const renderLoader = (): JSX.Element => {\n    return (\n      <div className={`${RC}__list--loader`}>\n        {loader || 'Loading...'}\n      </div>\n    );\n  };\n\n  const renderList = (): JSX.Element => {\n    const renderListItemComponent = (item: TOption, i: number): JSX.Element => {\n      return (\n        <div\n          key={`${RC}__list-item${i}`}\n          className={cn(`${RC}__list--item`, {\n            [`${RC}__list--item-hightlighted`]: i === hightlightedIndex,\n          })}\n          onMouseDown={e => setItemAsInnerValue(e, item)}\n        >\n          {getListItemLabel(item)}\n        </div>\n      );\n    };\n\n    const renderNoItems = (): JSX.Element => {\n      return (\n        <div className={`${RC}__list--no-items`}>\n          {isMobile && !valueToSearchString(innerValue)?.length\n            ? 'Please begin typing'\n            : noItemsMessage || 'No Items'}\n        </div>\n      );\n    };\n\n    const renderListDesktop = (): JSX.Element => {\n      return (\n        <div className={`${RC}__list-wrapper`} ref={listWrapperRef}>\n          <div className={`${RC}__list`} ref={listRef}>\n            {isListLoading\n              ? renderLoader()\n              : listItems?.length\n                ? listItems?.map(renderListItemComponent)\n                : renderNoItems()}\n          </div>\n        </div>\n      );\n    };\n\n    const renderListMobile = (): JSX.Element => {\n      return (\n        <div\n          className={`${RC}__list-overlay`}\n          ref={listOverlayRef}\n          onClick={onOverlayClick}\n        >\n          <div className={`${RC}__list-wrapper`} ref={listWrapperRef}>\n            {isMobile && (\n              <div\n                ref={listHeaderRef}\n                className={cn(`${RC}__list-header`, {\n                  [`${RC}__list-header-with-shadow`]:\n                    isScrollableList && isMobile,\n                  [`${RC}__list-header-with-shadow-hidden`]: scrollTop === 0,\n                })}\n              >\n                <div className={cn(`${RC}__list-header-row`)}>\n                  <div className={cn(`${RC}__list-label`)}>\n                    {label || 'Select'}\n                  </div>\n                  <div\n                    className={cn(`${RC}__list-close-icon`)}\n                    onClick={() => setIsListVisible(false)}\n                  >\n                    <X onClick={() => setIsListVisible(false)} />\n                  </div>\n                </div>\n                <div className={cn(`${RC}__list-header-row`)}>\n                  {renderSearchableInput()}\n                </div>\n              </div>\n            )}\n            <div className={`${RC}__list`} ref={listRef}>\n              {isListLoading\n                ? renderLoader()\n                : listItems?.length\n                  ? listItems?.map(renderListItemComponent)\n                  : renderNoItems()}\n            </div>\n          </div>\n        </div>\n      );\n    };\n\n    return isMobile ? renderListMobile() : renderListDesktop();\n  };\n\n  return (\n    <div\n      className={cn(RC, {\n        [`${RC}--error`]: error || (isWrongValue && !isFocused),\n        [`${RC}--disabled`]: disabled || isDisabled,\n      })}\n    >\n      {isLoading && <Spinner size=\"small\" />}\n      {isMobile ? renderInput() : renderSearchableInput()}\n      {isListVisible && renderList()}\n    </div>\n  );\n}\n\nexport default InputCustomFetch;\n"],"mappings":";;;;;;;;;;;;;AAiBA,IAAM,KAAK;AACX,IAAM,uBAAuB;AAE7B,SAAS,OAAa,CAAC;AAEvB,SAAS,iBACP,OACa;CACb,MAAM,EACJ,OACA,YAAY,IACZ,cAAc,MACd,uBAAuB,MACvB,WAAW,IACX,SAAS,IACT,UAAU,eAAe,KACzB,SAAS,IACT,iBAAiB,IACjB,OACA,QAAQ,IACR,WAAW,MACX,0BACA,UACA,YACA,aAAa,OACb,yBACA,eACA,qBACA,cACA,oBACA,gBACA,sBACE;CAEJ,MAAM,EAAE,aAAa,YAAY;CAGjC,MAAM,WAAW,OAAY,IAAI;CACjC,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,iBAAiB,OAAuB,IAAI;CAClD,MAAM,iBAAiB,OAAuB,IAAI;CAClD,MAAM,gBAAgB,OAAuB,IAAI;CACjD,MAAM,mBAAmB,OAAe,KAAK;CAG7C,MAAM,CAAC,oBAAoB,SAAyB,IAAI;CACxD,MAAM,CAAC,aAAa,SAAS,CAAC;CAE9B,MAAM,CAAC,YAAY,iBAAiB,SAAiB,KAAK;CAC1D,MAAM,CAAC,gBAAgB,qBAAqB,SAAwB,IAAI;CAExE,MAAM,CAAC,WAAW,gBAAgB,SAAoB,CAAC,CAAC;CACxD,MAAM,CAAC,aAAa,SAAS,KAAK;CAClC,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CAExD,MAAM,CAAC,mBAAmB,wBAAwB,SAAwB,IAAI;CAE9E,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CAIxD,MAAM,EAAE,gBAAgB,uBAAuB,kBAAkB,KAAK;CAEtE,MAAM,UAAU,YACd,OAAO,gBAAuC;EAC5C,IAAI,CAAC,aAAa,QAAQ;EAE1B,iBAAiB,IAAI;EACrB,IAAI;GACF,MAAM,QAAQ,MAAM,eAAe,WAAW;GAC9C,aAAa,KAAK;EACpB,QACM;GACJ,aAAa,CAAC,CAAC;EACjB,UACQ;GACN,iBAAiB,KAAK;EACxB;CACF,GACA,CAAC,cAAc,CACjB;CAEA,MAAM,mBAAmB,qBACvB,SACA,iBAAiB,YAAY,IAAI,eAAe,CAClD;CAEA,MAAM,iBAAiB,kBAAkB;EACvC,MAAM,eAAe,oBAAoB,UAAU;EACnD,IAAI,CAAC,cAAc,QAAQ;EAE3B,iBAAiB,YAAY;CAC/B,GAAG;EAAC;EAAY;EAAqB;CAAgB,CAAC;CAItD,MAAM,eAAe,cAAc;EACjC,IAAI,YAAY,OAAO;EAGvB,IADqB,oBAAoB,UACrC,MAAiB,IAAI,OAAO;EAEhC,IAAI,cACF,OAAO,CAAC,aAAa,UAAU;EAGjC,OAAO;CACT,GAAG;EAAC;EAAY;EAAY;EAAc;CAAmB,CAAC;CAI9D,MAAM,sBAAsB,aACzB,GAA4B,SAAkB;EAC7C,IAAI,aAAa,OAAO;GACtB,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB;EAEA,iBAAiB;GACf,MAAM,WAAW,cAAc,IAAI;GACnC,cAAc,QAAQ;GAEtB,IAAI,UACF,iBAAiB,KAAK;EAE1B,GAAG,CAAC;CACN,GACA,CAAC,eAAe,QAAQ,CAC1B;CAEA,MAAM,eAAe,aAClB,MAAwB;EACvB,EAAE,eAAe;EACjB,EAAE,gBAAgB;EAElB,IAAI,CAAC,UACH,iBAAiB,KAAK;EAGxB,cAAc,EAAY;EAE1B,UAAU,SAAS,MAAM;EACzB,iBAAiB,aAAa,IAAI,GAAG,CAAC;CACxC,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,iBAAiB,aACpB,MAAwB;EACvB,IAAI,EAAE,WAAW,gBAAgB,SAAS;GACxC,EAAE,gBAAgB;GAClB,EAAE,eAAe;GACjB,iBAAiB,KAAK;GACtB,IAAI,mBAAmB,MAAM;IAC3B,cAAc,cAAc;IAC5B,SACE,CAAC,4BAA4B,OAAO,6BAA6B,aAC7D,iBACA,yBAAyB,cAAc,CAC7C;GACF;EACF;CACF,GACA;EAAC;EAAgB;EAAU;CAAwB,CACrD;CAEA,MAAM,YAAY,aACf,YAAmC;EAClC,IAAI,CAAC,iBAAiB,CAAC,sBAAsB;EAE7C,IAAI,YAAY,IAEV;OAAA,sBAAsB,QAAQ,UAAU,oBAAoB;IAC9D,oBAAoB,MAAM,UAAU,kBAAkB;IACtD,qBAAqB,IAAI;IACzB,UAAU,SAAS,KAAK;GAC1B;SAEG;GACH,IAAI,uBAAsC;GAC1C,MAAM,oBAAoB,SAAS,uBACjC,GAAG,GAAG,aACR;GAEA,MAAM,aAAa,SAAS,SAAS,sBAAsB,CAAC,EAAE,UAAU;GACxE,MAAM,gBAAgB,SAAS,SAAS,aAAa;GACrD,MAAM,gBAAgB,UAAU,SAAS;GAEzC,IAAI,YAAY,IAAI;IAElB,IAAI,sBAAsB,QAAQ,sBAAsB,eACtD,uBAAuB;SAEpB,IAAI,oBAAoB,IAAI,UAAU,QACzC,uBAAuB,oBAAoB;GAE/C,OACK,IAAI,YAAY,IAAI;IAEvB,IAAI,sBAAsB,QAAQ,sBAAsB,GACtD,uBAAuB;SAEpB,IAAI,oBAAoB,KAAK,GAChC,uBAAuB,oBAAoB;GAE/C;GAEA,IAAI,yBAAyB,MAAM;IACjC,MAAM,yBAAyB,kBAC7B;IAEF,MAAM,+BACF,wBAAwB,sBAAsB,CAAC,EAAE,UAAU;IAC/D,MAAM,kCACF,wBAAwB,aAAa;IAEzC,IACE,kCAAkC,+BAChC,gBAAgB,YAClB;KACA,IACE,KAAK,IACH,kCACE,gCACC,gBAAgB,WACrB,KAAK,8BAEL,SAAS,SAAS,SAChB,GACA,gBAAgB,4BAClB;UAGA,SAAS,SAAS,SAAS,GAAG,+BAA+B;IAEjE,OACK,IAAI,kCAAkC,eAAe;KACxD,IACE,KAAK,IAAI,kCAAkC,aAAa,IACtD,8BAEF,SAAS,SAAS,SAChB,GACA,gBAAgB,4BAClB;UAGA,SAAS,SAAS,SAAS,GAAG,+BAA+B;IAEjE;IAEA,IAAI,CAAC,UAAU,qBAAqB,oBAAoB;GAC1D;EACF;CACF,GACA;EACE;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAIA,MAAM,iBAAiB,kBAA0B;EAC/C,IAAI,CAAC,qBAAqB,OAAO,sBAAsB,YACrD,OAAO;EAET,OAAO,kBAAkB,UAAU;CACrC,GAAG,CAAC,mBAAmB,UAAU,CAAC;CAElC,MAAM,uBAAuB,aAC1B,MAAc,eAAuB;EACpC,IAAI,CAAC,KAAK,OAAO;EAEjB,MAAM,eAAe,oBAAoB,GAAG;EAC5C,IAAI,OAAO,iBAAiB,UAAU,OAAO;EAE7C,IAAI,OAAO,uBAAuB,YAChC,OAAO,mBAAmB,GAAG;EAG/B,OAAO,OAAO,GAAG;CACnB,GACA;EAAC;EAAY;EAAqB;CAAkB,CACtD;CAEA,MAAM,mBAAmB,aACtB,SAAmC;EAClC,IAAI,CAAC,kBAAkB,OAAO,mBAAmB,YAC/C,OAAO,OAAO,IAAI;EAGpB,OAAO,eAAe,IAAI;CAC5B,GACA,CAAC,cAAc,CACjB;CAEA,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,gBAAgB,WAAW,eAAe,WAAW,QAAQ,SAAS;GACxE,MAAM,oBACF,gBAAgB,SAAS,sBAAsB,CAAC,EAAE,UAAU;GAChE,MAAM,oBAAoB,iBAAiB,gBAAgB,OAAO;GAKlE,MAAM,aACF,qBAHA,eAAe,SAAS,sBAAsB,CAAC,EAAE,UAAU,KAKzD,OAAO,SAAS,kBAAkB,iBAAiB,KAAK,EAAE;GAEhE,QAAQ,QAAQ,MAAM,YAAY,GAAG,WAAW;EAClD;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,kBAAkB,kBAAkB;EACxC,IAAI,QAAQ,SACV,QAAQ,QAAQ,MAAM,YAAY;CAEtC,GAAG,CAAC,CAAC;CAIL,gBAAgB;EACd,IAAI,CAAC,cAAc,YAAY,iBAAiB,OAAO,GAAG;GAGxD,IAFqB,oBAAoB,UAErC,GAAc;IAChB,SACE,CAAC,4BAA4B,OAAO,6BAA6B,aAC7D,aACA,yBAAyB,UAAU,CACzC;IAEA,IAAI,CAAC,eAAe,iBAAiB,IAAI;IACzC,IAAI,WAAW,eAAe;GAChC,OAEE,SAAS,UAAU;EAEvB;CACF,GAAG;EAAC;EAAY;EAAqB;EAAU;EAA0B;EAAe;EAAW;CAAc,CAAC;CAElH,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,UAAU;GAC3B,iBAAiB,KAAK;GACtB,qBAAqB,IAAI;EAC3B;CACF,GAAG,CAAC,WAAW,QAAQ,CAAC;CAExB,gBAAgB;EACd,IAAI,CAAC,eAAe;GAClB,aAAa,CAAC,CAAC;GACf,gBAAgB;EAClB;EAEA,IAAI,YAAY,eAAe;GAC7B,kBAAkB,UAAU;GAC5B,cAAc;EAChB;CACF,GAAG;EAAC;EAAe;EAAU;EAAY;EAAiB;CAAa,CAAC;CAExE,gBAAgB;EACd,IAAI,CAAC,cAAc,OAAO,UAAU,GAClC,cAAc,KAAK;EAGrB,iBAAiB,UAAU;CAC7B,GAAG,CAAC,OAAO,UAAU,CAAC;CAGtB,gBAAgB;EACd,aAAa;GACX,IAAI,mBAAmB,SACrB,mBAAmB,QAAQ,MAAM;EAErC;CACF,GAAG,CAAC,kBAAkB,CAAC;CAIvB,MAAM,8BAA2C;EAC/C,MAAM,aAAa,qBAAqB;EAExC,OACE,qBAAC,OAAD;GAAK,WAAW,GAAG,GAAG,GAAG,gBAAgB;GAAzC,UAAA;IACE,oBAAC,OAAD;KACE,KAAK;KACL,QAAQ,GAAG,GAAG,eAAe,UAAU;KACvC,WAAW,GAAG,GAAG,GAAG,UAAU,SAAS;KACvC,OAAO;KACP,WAAW,QAAgB,cAAc,GAAa;KACtD,eAAe,aAAa,IAAI;KAChC,cAAc,aAAa,KAAK;KACrB;KACc;KACzB,UAAU,YAAY;IACvB,CAAA;IACA,gBACC,oBAAC,OAAD;KACE,WAAW,GAAG,GAAG,GAAG,UAAU,GAC3B,GAAG,GAAG,oBAAoB,CAAC,UAC9B,CAAC;KAED,UAAA,oBAAC,MAAD;MACE,MAAK;MACL,MAAM,eAAe;MACrB,MAAM,oBAAC,eAAD,CAAgB,CAAA;MACtB,gBAAe;KAChB,CAAA;IACE,CAAA;IAEN,gBAAgB,CAAC,gBAAgB,cAAc,EAAE,YAAY,eAAe,cAC3E,oBAAC,OAAD;KACE,WAAW,GAAG,GAAG,GAAG,gBAAgB,GACjC,GAAG,GAAG,gCAAgC,UACzC,CAAC;KAED,UAAA,oBAAC,GAAD,EAAG,SAAS,aAAe,CAAA;IACxB,CAAA;GAEJ;;CAET;CAEA,MAAM,oBAAiC;EACrC,MAAM,aAAa,qBACjB,gBAAgB,kBAAkB,aAAa,UACjD;EAEA,OACE,oBAAC,OAAD;GAAK,WAAW,GAAG,GAAG,GAAG,gBAAgB;GACvC,UAAA,oBAAC,OAAD;IACE,QAAQ,GAAG,GAAG,eAAe,UAAU;IACvC,WAAW,GAAG,GAAG,GAAG,UAAU,SAAS;IACvC,OAAO;IACP,WAAW,QAAgB,cAAc,GAAa;IACtD,UAAU,MAAW;KACnB,iBAAiB,IAAI;KACrB,GAAG,QAAQ,KAAK;KAChB,iBAAiB,UAAU,SAAS,MAAM,GAAG,GAAG;IAClD;IACA,UAAU,YAAY;GACvB,CAAA;EACE,CAAA;CAET;CAEA,MAAM,qBAAkC;EACtC,OACE,oBAAC,OAAD;GAAK,WAAW,GAAG,GAAG;GACnB,UAAA,UAAU;EACR,CAAA;CAET;CAEA,MAAM,mBAAgC;EACpC,MAAM,2BAA2B,MAAe,MAA2B;GACzE,OACE,oBAAC,OAAD;IAEE,WAAW,GAAG,GAAG,GAAG,eAAe,GAChC,GAAG,GAAG,6BAA6B,MAAM,kBAC5C,CAAC;IACD,cAAa,MAAK,oBAAoB,GAAG,IAAI;IAE5C,UAAA,iBAAiB,IAAI;GACnB,GAPE,GAAG,GAAG,aAAa,GAOrB;EAET;EAEA,MAAM,sBAAmC;GACvC,OACE,oBAAC,OAAD;IAAK,WAAW,GAAG,GAAG;IACnB,UAAA,YAAY,CAAC,oBAAoB,UAAU,CAAC,EAAE,SAC3C,wBACA,kBAAkB;GACnB,CAAA;EAET;EAEA,MAAM,0BAAuC;GAC3C,OACE,oBAAC,OAAD;IAAK,WAAW,GAAG,GAAG;IAAiB,KAAK;IAC1C,UAAA,oBAAC,OAAD;KAAK,WAAW,GAAG,GAAG;KAAS,KAAK;KACjC,UAAA,gBACG,aAAa,IACb,WAAW,SACT,WAAW,IAAI,uBAAuB,IACtC,cAAc;IACjB,CAAA;GACF,CAAA;EAET;EAEA,MAAM,yBAAsC;GAC1C,OACE,oBAAC,OAAD;IACE,WAAW,GAAG,GAAG;IACjB,KAAK;IACL,SAAS;IAET,UAAA,qBAAC,OAAD;KAAK,WAAW,GAAG,GAAG;KAAiB,KAAK;KAA5C,UAAA,CACG,YACC,qBAAC,OAAD;MACE,KAAK;MACL,WAAW,GAAG,GAAG,GAAG,gBAAgB;QACjC,GAAG,GAAG,6BACL,oBAAoB;QACrB,GAAG,GAAG,oCAAoC,cAAc;MAC3D,CAAC;MANH,UAAA,CAQE,qBAAC,OAAD;OAAK,WAAW,GAAG,GAAG,GAAG,kBAAkB;OAA3C,UAAA,CACE,oBAAC,OAAD;QAAK,WAAW,GAAG,GAAG,GAAG,aAAa;QACnC,UAAA,SAAS;OACP,CAAA,GACL,oBAAC,OAAD;QACE,WAAW,GAAG,GAAG,GAAG,kBAAkB;QACtC,eAAe,iBAAiB,KAAK;QAErC,UAAA,oBAAC,GAAD,EAAG,eAAe,iBAAiB,KAAK,EAAI,CAAA;OACzC,CAAA,CACF;MACL,CAAA,GAAA,oBAAC,OAAD;OAAK,WAAW,GAAG,GAAG,GAAG,kBAAkB;OACxC,UAAA,sBAAsB;MACpB,CAAA,CACF;KAEP,CAAA,GAAA,oBAAC,OAAD;MAAK,WAAW,GAAG,GAAG;MAAS,KAAK;MACjC,UAAA,gBACG,aAAa,IACb,WAAW,SACT,WAAW,IAAI,uBAAuB,IACtC,cAAc;KACjB,CAAA,CACF;;GACF,CAAA;EAET;EAEA,OAAO,WAAW,iBAAiB,IAAI,kBAAkB;CAC3D;CAEA,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,IAAI;IACf,GAAG,GAAG,WAAW,SAAU,gBAAgB,CAAC;IAC5C,GAAG,GAAG,cAAc,YAAY;EACnC,CAAC;EAJH,UAAA;GAMG,aAAa,oBAAC,SAAD,EAAS,MAAK,QAAS,CAAA;GACpC,WAAW,YAAY,IAAI,sBAAsB;GACjD,iBAAiB,WAAW;EAC1B;;AAET"}

package/dist/es/Molecular/InputPassword/InputPassword.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputPassword.js","names":[],"sources":["../../../../src/Molecular/InputPassword/InputPassword.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport type { IInputPasswordProps } from './InputPassword.interface';\nimport cn from 'classnames';\nimport { useRef, useState } from 'react';\n\nimport { Eye, EyeOff } from 'react-feather';\nimport Input from '../../Atomic/FormElements/Input/Input';\n\nimport { setCarretToEnd } from '../../Functions/utils';\nimport './InputPassword.scss';\n\nfunction InputPassword({ field = { value: '' }, onChange = () => {}, testId = 'input-password' }: IInputPasswordProps): ReactElement {\n  const [showPassword, setSP] = useState(false);\n  const inputWrapper = useRef<HTMLDivElement>(null);\n\n  const handle = {\n    changeView: () => {\n      const input = inputWrapper?.current?.querySelector('input');\n\n      if (input instanceof HTMLInputElement) {\n        input?.focus();\n        setCarretToEnd(input);\n        setSP(!showPassword);\n      }\n    },\n  };\n\n  return (\n    <div data-testid={testId} className=\"password\" ref={inputWrapper}>\n      <Input\n        key={field.key}\n        value={field.value}\n        testId={`inputPassword--input--key-${testId || field.key}`}\n        className={cn('input-fin', field?.key)}\n        onChange={onChange}\n        type={showPassword ? 'text' : 'password'}\n      />\n      <span\n        className=\"password-eye-holder\"\n        data-testid=\"password-eye-holder\"\n        onClick={handle.changeView}\n      >\n        {' '}\n        {showPassword\n          ? (\n              <EyeOff strokeWidth={1} className=\"password-icon\" />\n            )\n          : (\n              <Eye strokeWidth={1} className=\"password-icon\" />\n            )}\n      </span>\n    </div>\n  );\n}\n\nexport default InputPassword;\n"],"mappings":";;;;;;;;AAYA,SAAS,cAAc,EAAE,QAAQ,EAAE,OAAO,GAAG,GAAG,iBAAiB,CAAC,GAAG,SAAS,oBAAuD;CACnI,MAAM,CAAC,cAAc,SAAS,SAAS,KAAK;CAC5C,MAAM,eAAe,OAAuB,IAAI;CAchD,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAU;EAAW,KAAK;YAApD,CACE,oBAAC,OAAD;GAEE,OAAO,MAAM;GACb,QAAQ,6BAA6B,UAAU,MAAM;GACrD,WAAW,GAAG,aAAa,OAAO,GAAG;GAC3B;GACV,MAAM,eAAe,SAAS;EAC/B,GANM,MAAM,GAMZ,GACD,qBAAC,QAAD;GACE,WAAU;GACV,eAAY;GACZ,SAAS,EAxBb,kBAAkB;IAChB,MAAM,QAAQ,cAAc,SAAS,cAAc,OAAO;IAE1D,IAAI,iBAAiB,kBAAkB;KACrC,OAAO,MAAM;KACb,eAAe,KAAK;KACpB,MAAM,CAAC,YAAY;IACrB;GACF,EAgBa,EAAO;aAHlB,CAKG,KACA,eAEK,oBAAC,QAAD;IAAQ,aAAa;IAAG,WAAU;GAAiB,CAAA,IAGnD,oBAAC,KAAD;IAAK,aAAa;IAAG,WAAU;GAAiB,CAAA,CAElD;IACH;;AAET"}
+{"version":3,"file":"InputPassword.js","names":[],"sources":["../../../../src/Molecular/InputPassword/InputPassword.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport type { IInputPasswordProps } from './InputPassword.interface';\nimport cn from 'classnames';\nimport { useRef, useState } from 'react';\n\nimport { Eye, EyeOff } from 'react-feather';\nimport Input from '../../Atomic/FormElements/Input/Input';\n\nimport { setCarretToEnd } from '../../Functions/utils';\nimport './InputPassword.scss';\n\nfunction InputPassword({ field = { value: '' }, onChange = () => {}, testId = 'input-password' }: IInputPasswordProps): ReactElement {\n  const [showPassword, setSP] = useState(false);\n  const inputWrapper = useRef<HTMLDivElement>(null);\n\n  const handle = {\n    changeView: () => {\n      const input = inputWrapper?.current?.querySelector('input');\n\n      if (input instanceof HTMLInputElement) {\n        input?.focus();\n        setCarretToEnd(input);\n        setSP(!showPassword);\n      }\n    },\n  };\n\n  return (\n    <div data-testid={testId} className=\"password\" ref={inputWrapper}>\n      <Input\n        key={field.key}\n        value={field.value}\n        testId={`inputPassword--input--key-${testId || field.key}`}\n        className={cn('input-fin', field?.key)}\n        onChange={onChange}\n        type={showPassword ? 'text' : 'password'}\n      />\n      <span\n        className=\"password-eye-holder\"\n        data-testid=\"password-eye-holder\"\n        onClick={handle.changeView}\n      >\n        {' '}\n        {showPassword\n          ? (\n              <EyeOff strokeWidth={1} className=\"password-icon\" />\n            )\n          : (\n              <Eye strokeWidth={1} className=\"password-icon\" />\n            )}\n      </span>\n    </div>\n  );\n}\n\nexport default InputPassword;\n"],"mappings":";;;;;;;;AAYA,SAAS,cAAc,EAAE,QAAQ,EAAE,OAAO,GAAG,GAAG,iBAAiB,CAAC,GAAG,SAAS,oBAAuD;CACnI,MAAM,CAAC,cAAc,SAAS,SAAS,KAAK;CAC5C,MAAM,eAAe,OAAuB,IAAI;CAchD,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAU;EAAW,KAAK;EAApD,UAAA,CACE,oBAAC,OAAD;GAEE,OAAO,MAAM;GACb,QAAQ,6BAA6B,UAAU,MAAM;GACrD,WAAW,GAAG,aAAa,OAAO,GAAG;GAC3B;GACV,MAAM,eAAe,SAAS;EAC/B,GANM,MAAM,GAMZ,GACD,qBAAC,QAAD;GACE,WAAU;GACV,eAAY;GACZ,SAAS,EAxBb,kBAAkB;IAChB,MAAM,QAAQ,cAAc,SAAS,cAAc,OAAO;IAE1D,IAAI,iBAAiB,kBAAkB;KACrC,OAAO,MAAM;KACb,eAAe,KAAK;KACpB,MAAM,CAAC,YAAY;IACrB;GACF,EAgBa,EAAO;GAHlB,UAAA,CAKG,KACA,eAEK,oBAAC,QAAD;IAAQ,aAAa;IAAG,WAAU;GAAiB,CAAA,IAGnD,oBAAC,KAAD;IAAK,aAAa;IAAG,WAAU;GAAiB,CAAA,CAElD;EACH,CAAA,CAAA;;AAET"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
   "type": "module",
-  "version": "2.0.20",
+  "version": "2.0.21",
   "description": "IntelicoKit UI component library",
   "author": "Andrey Isakov",
   "license": "ISC",