@hitachivantara/uikit-react-core 5.0.0-next.4 → 5.0.0-next.5

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

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.js","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport clsx from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { HvValidationMessages } from \"types/forms\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledCharCounter,\n  StyledDescription,\n  StyledError,\n  StyledFormElement,\n  StyledLabel,\n  StyledLabelContainer,\n  StyledListItem,\n  StyledTag,\n  StyledTagsList,\n  StyledInputListItem,\n  StyledInput,\n  StyledSuggestions,\n} from \"./TagsInput.styles\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport { useControlled, useIsMounted, useUniqueId } from \"hooks\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { HvTagProps } from \"components\";\nimport tagsInputClasses, { HvTagsInputClasses } from \"./tagsInputClasses\";\nimport { HvCharCounterProps, HvFormStatus } from \"../Forms\";\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material\";\n\nexport type HvTagsInputProps = HvBaseProps<\n  HTMLElement,\n  { onChange; onBlur; onFocus; onKeyDown; color }\n> & {\n  /** The form element name. */\n  name?: string;\n  /** The value of the form element. */\n  value?: string[] | HvTagProps[];\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string[] | HvTagProps[];\n  /**\n   * The label of the form element.\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that the form element is required. */\n  required?: boolean;\n  /** The function that will be executed onChange. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: Function;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: Function;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: Function;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: Function;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n  /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */\n  hideCounter?: boolean;\n  /** Text between the current char counter and max value. */\n  middleCountLabel?: string;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxTagsQuantity?: number;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\n  /** If `true` the component is resizable. */\n  resizable?: boolean;\n  /** Props passed to the HvCharCount component. */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /** If `true` the component is in multiline mode. */\n  multiline?: boolean;\n  /** The status of the form element. */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\n  /** An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. */\n  commitTagOn?: string[];\n  /** If `true` the tag will be committed when the blur event occurs. */\n  commitOnBlur?: boolean;\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */\n  suggestionListCallback?: Function;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvTagsInputClasses;\n};\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = ({\n  classes,\n  className,\n  id,\n  name,\n  value: valueProp,\n  defaultValue = [],\n  readOnly = false,\n  disabled = false,\n  required = false,\n  label: textAreaLabel,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  onChange,\n  onAdd,\n  onDelete,\n  onBlur,\n  onFocus,\n  placeholder,\n  hideCounter = false,\n  middleCountLabel = \"/\",\n  maxTagsQuantity,\n  autoFocus = false,\n  resizable = true,\n  inputProps = {},\n  countCharProps = {},\n  multiline = false,\n  status,\n  statusMessage,\n  validationMessages,\n  commitTagOn = [\"Enter\"],\n  commitOnBlur = false,\n  suggestionListCallback,\n  ...others\n}: HvTagsInputProps) => {\n  const elementId = useUniqueId(id, \"hvTagsInput\");\n\n  const hasLabel = textAreaLabel != null;\n  const hasDescription = description != null;\n\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy\n  );\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [tagInput, setTagInput] = useState(\"\");\n  const [tagCursorPos, setTagCursorPos] = useState(value.length);\n  const [stateValid, setStateValid] = useState(true);\n\n  const inputRef = useRef<any>();\n  const containerRef = useRef<any>();\n  const skipReset = useRef(false);\n  const blurTimeout = useRef<any>();\n  const materialInputRef = useRef<any>(null);\n\n  const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n  const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n  // suggestions related state\n  const [suggestionValues, setSuggestionValues] = useState(null);\n\n  const isStateInvalid = useMemo(() => {\n    return hasCounter && value.length > maxTagsQuantity;\n  }, [hasCounter, maxTagsQuantity, value.length]);\n\n  const canShowSuggestions = suggestionListCallback != null;\n  const hasSuggestions = !!suggestionValues;\n\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    [\n      validationMessages?.error,\n      validationMessages?.requiredError,\n      validationMessages?.minCharError,\n      validationMessages?.maxCharError,\n    ]\n  );\n\n  const performValidation = useCallback(\n    (currValue) => {\n      if (\n        maxTagsQuantity !== null &&\n        maxTagsQuantity !== undefined &&\n        currValue.length > maxTagsQuantity\n      ) {\n        setValidationState(validationStates.invalid);\n        setValidationMessage(errorMessages.maxCharError);\n        setStateValid(false);\n      } else {\n        setValidationState(validationStates.valid);\n        setValidationMessage(\"\");\n        setStateValid(true);\n      }\n    },\n    [\n      errorMessages.maxCharError,\n      maxTagsQuantity,\n      setValidationMessage,\n      setValidationState,\n    ]\n  );\n\n  /**\n   * Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n   * Also executes the user provided onDelete and onChange events.\n   *\n   * @param {number}  tagPos - the position at which to remove the tag\n   * @param {Event}   event  - the event associated with the delete\n   * @param {boolean} end    - whether or not to set the cursor at the end of the array\n   */\n  const deleteTag = useCallback(\n    (tagPos, event, end) => {\n      const newTagsArr = [\n        ...value.slice(0, tagPos),\n        ...value.slice(tagPos + 1),\n      ];\n      setValue(newTagsArr);\n      setTagCursorPos(\n        end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0\n      );\n      inputRef.current?.focus();\n      performValidation(newTagsArr);\n      onDelete?.(event, value[tagPos], tagPos);\n      onChange?.(event, newTagsArr);\n      skipReset.current = true;\n    },\n    [onChange, onDelete, performValidation, setValue, tagCursorPos, value]\n  );\n\n  /**\n   * Adds a Tag to the array of tags.\n   * Also executes the user provided onAdd and onDelete events.\n   *\n   * @param {Event}   event  - whatever event triggered adding a tag\n   * @param {string}  tag    - the string for the tag\n   */\n  const addTag = useCallback(\n    (event, tag) => {\n      event.preventDefault();\n      if (tag !== \"\") {\n        const newTag = { label: tag, type: \"semantic\" };\n        const newTagsArr = [...value, newTag];\n        setValue(newTagsArr);\n        performValidation(newTagsArr);\n        onAdd?.(event, newTag, newTagsArr.length - 1);\n        onChange?.(event, newTagsArr);\n      }\n    },\n    [onAdd, onChange, performValidation, setValue, value]\n  );\n\n  const canShowError =\n    (status !== undefined &&\n      status === \"invalid\" &&\n      statusMessage !== undefined) ||\n    !stateValid;\n\n  useEffect(() => {\n    if (!multiline) {\n      const element = containerRef?.current?.children[tagCursorPos];\n      // this setTimeout is a workaround for Firefox not properly dealing\n      // with setting the scrollLeft value.\n      setTimeout(() => {\n        const container = containerRef.current;\n        if (isNil(container)) return;\n        container.scrollLeft = element\n          ? element.offsetLeft -\n            container.getBoundingClientRect().width / 2 +\n            element.getBoundingClientRect().width / 2\n          : 0;\n      }, 50);\n\n      element?.focus();\n    }\n  }, [multiline, tagCursorPos]);\n\n  useEffect(() => {\n    if (!skipReset.current) {\n      setTagInput(\"\");\n      setTagCursorPos(value.length);\n    }\n    skipReset.current = false;\n  }, [value]);\n\n  const isMounted = useIsMounted();\n\n  /**\n   * Looks for the node that represent the input inside the material tree and focus it.\n   */\n  const focusInput = () => {\n    materialInputRef.current.focus();\n  };\n\n  const getSuggestions = useCallback(\n    (li) => {\n      // TODO Replace with ref\n      const listEl = document.getElementById(\n        setId(elementId, \"suggestions-list\") || \"\"\n      );\n      return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n    },\n    [elementId]\n  );\n\n  /**\n   * Clears the suggestion array.\n   */\n  const suggestionClearHandler = useCallback(() => {\n    if (isMounted.current) {\n      setSuggestionValues(null);\n    }\n  }, [isMounted]);\n\n  /**\n   * Fills of the suggestion array.\n   */\n  const suggestionHandler = useCallback(\n    (val) => {\n      const suggestionsArray = suggestionListCallback?.(val);\n      if (suggestionsArray?.[0]?.label) {\n        setSuggestionValues(suggestionsArray);\n      } else {\n        suggestionClearHandler();\n      }\n    },\n    [suggestionClearHandler, suggestionListCallback]\n  );\n\n  /**\n   * Executes the user callback adds the selection to the state and clears the suggestions.\n   */\n  const suggestionSelectedHandler = (event, item) => {\n    addTag(event, item.value || item.label);\n\n    // set the input value (only when value is uncontrolled)\n    setTagInput(item.value || item.label);\n\n    focusInput();\n    suggestionClearHandler();\n  };\n\n  /**\n   * Handler for the `onKeyDown` event on the suggestions component\n   */\n  const onSuggestionKeyDown = (event) => {\n    if (isKeypress(event, keyboardCodes.Esc)) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKeypress(event, keyboardCodes.Tab)) {\n      suggestionClearHandler();\n    }\n  };\n\n  /**\n   * Handler for the `onChange` event on the tag input\n   */\n  const onChangeHandler = useCallback(\n    (_, input) => {\n      setTagInput(input);\n\n      if (canShowSuggestions) {\n        // an edge case might be a controlled input whose onChange callback\n        // doesn't change the value (or sets another): the suggestionListCallback\n        // callback will still receive the original rejected value.\n        // a refactor is needed so the suggestionListCallback might be called only\n        // when the input is uncontrolled, providing a way to externally control\n        // the suggestion values.\n        suggestionHandler(input);\n      }\n    },\n    [canShowSuggestions, suggestionHandler]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the form element\n   */\n  const onInputKeyDownHandler = useCallback(\n    (event) => {\n      if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n        addTag(event, tagInput);\n      }\n    },\n    [addTag, canShowSuggestions, commitTagOn, tagInput]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the list container.\n   */\n  const onKeyDownHandler = useCallback(\n    (event) => {\n      if (tagInput === \"\") {\n        switch (event.code) {\n          case \"ArrowLeft\":\n            setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n            break;\n          case \"ArrowRight\":\n            setTagCursorPos(\n              tagCursorPos < value.length ? tagCursorPos + 1 : value.length\n            );\n            break;\n          case \"Backspace\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            } else {\n              setTagCursorPos(value.length - 1);\n            }\n            break;\n          case \"Delete\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            }\n            break;\n          default:\n            break;\n        }\n      } else {\n        switch (event.code) {\n          case \"ArrowDown\":\n            getSuggestions(0)?.focus();\n            break;\n          default:\n            break;\n        }\n      }\n    },\n    [\n      deleteTag,\n      getSuggestions,\n      isTagSelected,\n      tagCursorPos,\n      tagInput,\n      value.length,\n    ]\n  );\n\n  /**\n   * Handler for the `onDelete` event on the tag component\n   */\n  const onDeleteTagHandler = useCallback(\n    (event, i) => {\n      deleteTag(i, event, true);\n      setValidationState(validationStates.standBy);\n    },\n    [deleteTag, setValidationState]\n  );\n\n  /**\n   * Handler for the `onClick` event on the list container\n   */\n  const onContainerClickHandler = useCallback(() => {\n    inputRef.current?.focus();\n    clearTimeout(blurTimeout.current);\n    setTagCursorPos(value.length);\n  }, [value.length]);\n\n  const onBlurHandler = (evt) => {\n    blurTimeout.current = setTimeout(() => {\n      if (commitOnBlur) {\n        addTag(evt, tagInput);\n      }\n      onBlur?.(evt, tagInput);\n    }, 250);\n  };\n\n  const onFocusHandler = (evt) => {\n    clearTimeout(blurTimeout.current);\n    onFocus?.(evt, tagInput);\n  };\n\n  return (\n    <StyledFormElement\n      id={id}\n      name={name}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      required={required}\n      onBlur={onBlurHandler}\n      onFocus={onFocusHandler}\n      className={clsx(\n        tagsInputClasses.root,\n        classes?.root,\n        className,\n        disabled && clsx(tagsInputClasses.disabled, classes?.disabled)\n      )}\n    >\n      {(hasLabel || hasDescription) && (\n        <StyledLabelContainer\n          className={clsx(\n            tagsInputClasses.labelContainer,\n            classes?.labelContainer\n          )}\n        >\n          {hasLabel && (\n            <StyledLabel\n              className={clsx(tagsInputClasses.label, classes?.label)}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={textAreaLabel}\n            />\n          )}\n\n          {hasDescription && (\n            <StyledDescription\n              className={clsx(\n                tagsInputClasses.description,\n                classes?.description\n              )}\n              id={setId(elementId, \"description\")}\n            >\n              {description}\n            </StyledDescription>\n          )}\n        </StyledLabelContainer>\n      )}\n\n      {hasCounter && (\n        <StyledCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={clsx(\n            tagsInputClasses.characterCounter,\n            classes?.characterCounter\n          )}\n          separator={middleCountLabel}\n          currentCharQuantity={value.length}\n          maxCharQuantity={maxTagsQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <StyledTagsList\n        className={clsx(\n          tagsInputClasses.tagsList,\n          classes?.tagsList,\n          canShowError && clsx(tagsInputClasses.error, classes?.error),\n          resizable &&\n            multiline &&\n            clsx(tagsInputClasses.resizable, classes?.resizable),\n          isStateInvalid && clsx(tagsInputClasses.invalid, classes?.invalid),\n          !multiline && clsx(tagsInputClasses.singleLine, classes?.singleLine)\n        )}\n        $disabled={disabled}\n        $singleLine={!multiline}\n        $error={canShowError}\n        $resizable={resizable && multiline}\n        $invalid={isStateInvalid}\n        $readOnly={readOnly}\n        onKeyDown={onKeyDownHandler}\n        onClick={onContainerClickHandler}\n        ref={containerRef}\n      >\n        {value &&\n          value.map((t, i) => {\n            const tag =\n              typeof t === \"string\"\n                ? {\n                    label: t,\n                    type: \"semantic\",\n                  }\n                : t;\n            const { label, type, ...otherProps } = tag;\n            return (\n              <StyledListItem\n                key={`${tag.label}-${i}`}\n                tabIndex={-1}\n                className={clsx(\n                  !multiline &&\n                    clsx(tagsInputClasses.singleLine, classes?.singleLine)\n                )}\n                classes={{\n                  gutters: clsx(\n                    tagsInputClasses.listItemGutters,\n                    classes?.listItemGutters\n                  ),\n                  root: clsx(\n                    tagsInputClasses.listItemRoot,\n                    classes?.listItemRoot\n                  ),\n                }}\n                id={`tag-${i}`}\n                $singleLine={!multiline}\n              >\n                <StyledTag\n                  label={label}\n                  className={clsx(\n                    i === tagCursorPos &&\n                      clsx(tagsInputClasses.tagSelected, classes?.tagSelected)\n                  )}\n                  classes={{\n                    chipRoot: clsx(\n                      tagsInputClasses.chipRoot,\n                      classes?.chipRoot\n                    ),\n                  }}\n                  type={type}\n                  {...(!(readOnly || disabled || type === \"categorical\") && {\n                    onDelete: (event) => onDeleteTagHandler(event, i),\n                  })}\n                  deleteButtonProps={{\n                    tabIndex: -1,\n                  }}\n                  $selected={i === tagCursorPos}\n                  {...otherProps}\n                />\n              </StyledListItem>\n            );\n          })}\n        {!(disabled || readOnly) && (\n          <StyledInputListItem\n            className={clsx(\n              !multiline &&\n                clsx(tagsInputClasses.singleLine, classes?.singleLine),\n              value.length === 0\n                ? clsx(\n                    tagsInputClasses.tagInputRootEmpty,\n                    classes?.tagInputRootEmpty\n                  )\n                : \"\"\n            )}\n            classes={{\n              root: clsx(\n                tagsInputClasses.tagInputContainerRoot,\n                classes?.tagInputContainerRoot\n              ),\n              gutters: clsx(\n                tagsInputClasses.listItemGutters,\n                classes?.listItemGutters\n              ),\n            }}\n            id={`tag-${value.length}`}\n            $singleLine={!multiline}\n            $isTagSelected={!!isTagSelected}\n          >\n            <StyledInput\n              value={tagInput}\n              disableClear\n              onChange={onChangeHandler}\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              autoFocus={autoFocus}\n              className={clsx(\n                !multiline &&\n                  clsx(tagsInputClasses.singleLine, classes?.singleLine)\n              )}\n              classes={{\n                root: clsx(\n                  tagsInputClasses.tagInputRoot,\n                  classes?.tagInputRoot\n                ),\n                input: clsx(tagsInputClasses.input, classes?.input),\n                inputBorderContainer: clsx(\n                  tagsInputClasses.tagInputBorderContainer,\n                  classes?.tagInputBorderContainer\n                ),\n                inputRootFocused: clsx(\n                  tagsInputClasses.tagInputRootFocused,\n                  classes?.tagInputRootFocused\n                ),\n              }}\n              disabled={disabled}\n              readOnly={readOnly || isTagSelected}\n              inputProps={{\n                ref: materialInputRef,\n                \"aria-label\": ariaLabel,\n                \"aria-labelledby\": ariaLabelledBy,\n                \"aria-describedby\":\n                  ariaDescribedBy != null\n                    ? ariaDescribedBy\n                    : (description && setId(elementId, \"description\")) ||\n                      undefined,\n\n                ...inputProps,\n              }}\n              inputRef={inputRef}\n              $singleLine={!multiline}\n              {...others}\n            />\n          </StyledInputListItem>\n        )}\n      </StyledTagsList>\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div\n              role=\"presentation\"\n              className={clsx(\n                tagsInputClasses.inputExtension,\n                classes?.inputExtension\n              )}\n            />\n          )}\n          <StyledSuggestions\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: clsx(\n                tagsInputClasses.suggestionsContainer,\n                classes?.suggestionsContainer\n              ),\n              list: clsx(\n                tagsInputClasses.suggestionList,\n                classes?.suggestionList\n              ),\n            }}\n            expanded={hasSuggestions}\n            anchorEl={containerRef?.current?.parentElement}\n            onClose={suggestionClearHandler}\n            onKeyDown={onSuggestionKeyDown}\n            onSuggestionSelected={suggestionSelectedHandler}\n            suggestionValues={suggestionValues}\n          />\n        </>\n      )}\n      {canShowError && (\n        <StyledError\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(tagsInputClasses.error, classes?.error)}\n        >\n          {validationMessage}\n        </StyledError>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["HvTagsInput","classes","className","id","name","value","valueProp","defaultValue","readOnly","disabled","required","label","textAreaLabel","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onAdd","onDelete","onBlur","onFocus","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","status","statusMessage","validationMessages","commitTagOn","commitOnBlur","suggestionListCallback","others","elementId","useUniqueId","hasLabel","hasDescription","setValue","useControlled","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","tagInput","setTagInput","useState","tagCursorPos","setTagCursorPos","length","stateValid","setStateValid","inputRef","useRef","containerRef","skipReset","blurTimeout","materialInputRef","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","error","requiredError","minCharError","maxCharError","performValidation","useCallback","currValue","undefined","invalid","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","isNil","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKeypress","keyboardCodes","Esc","Tab","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","_a","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","StyledFormElement","clsx","tagsInputClasses","root","StyledLabelContainer","labelContainer","_jsx","StyledLabel","htmlFor","StyledDescription","StyledCharCounter","characterCounter","separator","currentCharQuantity","maxCharQuantity","_jsxs","StyledTagsList","tagsList","singleLine","$disabled","$singleLine","$error","$resizable","$invalid","$readOnly","onKeyDown","onClick","ref","map","t","otherProps","StyledListItem","tabIndex","gutters","listItemGutters","listItemRoot","StyledTag","tagSelected","chipRoot","deleteButtonProps","$selected","StyledInputListItem","tagInputRootEmpty","tagInputContainerRoot","$isTagSelected","StyledInput","disableClear","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","_Fragment","role","inputExtension","StyledSuggestions","suggestionsContainer","list","suggestionList","expanded","anchorEl","parentElement","onClose","onSuggestionSelected","StyledError","disableBorder"],"mappings":";;;;;;;;;;;;;;AAyGO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAOC;AAAAA,EACPC,eAAe,CAAE;AAAA,EACjBC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC,OAAOC;AAAAA,EACP,cAAcC;AAAAA,EACd,mBAAmBC;AAAAA,EACnBC;AAAAA,EACA,oBAAoBC;AAAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,cAAc;AAAA,EACdC,mBAAmB;AAAA,EACnBC;AAAAA,EACAC,YAAY;AAAA,EACZC,YAAY;AAAA,EACZC,aAAa,CAAC;AAAA,EACdC,iBAAiB,CAAC;AAAA,EAClBC,YAAY;AAAA,EACZC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,cAAc,CAAC,OAAO;AAAA,EACtBC,eAAe;AAAA,EACfC;AAAAA,KACGC;AACa,MAAM;;AAChBC,QAAAA,YAAYC,YAAYpC,IAAI,aAAa;AAE/C,QAAMqC,WAAW5B,iBAAiB;AAClC,QAAM6B,iBAAiB1B,eAAe;AAEtC,QAAM,CAACV,OAAOqC,QAAQ,IAAIC,cAAcrC,WAAWC,YAAY;AAE/D,QAAM,CAACqC,mBAAiBC,kBAAkB,IAAIF,cAC5CZ,QACAe,gBAAiBC,OAAO;AAE1B,QAAM,CAACC,mBAAmBC,oBAAoB,IAAIN,cAChDX,eACA,EAAE;AAGJ,QAAM,CAACkB,UAAUC,WAAW,IAAIC,SAAS,EAAE;AAC3C,QAAM,CAACC,cAAcC,eAAe,IAAIF,SAAS/C,MAAMkD,MAAM;AAC7D,QAAM,CAACC,YAAYC,aAAa,IAAIL,SAAS,IAAI;AAEjD,QAAMM,WAAWC;AACjB,QAAMC,eAAeD;AACfE,QAAAA,YAAYF,OAAO,KAAK;AAC9B,QAAMG,cAAcH;AACdI,QAAAA,mBAAmBJ,OAAY,IAAI;AAEzC,QAAMK,gBAAgBX,gBAAgB,KAAKA,eAAehD,MAAMkD;AAC1DU,QAAAA,aAAaxC,mBAAmB,QAAQ,CAACF;AAG/C,QAAM,CAAC2C,kBAAkBC,mBAAmB,IAAIf,SAAS,IAAI;AAEvDgB,QAAAA,iBAAiBC,QAAQ,MAAM;AAC5BJ,WAAAA,cAAc5D,MAAMkD,SAAS9B;AAAAA,KACnC,CAACwC,YAAYxC,iBAAiBpB,MAAMkD,MAAM,CAAC;AAE9C,QAAMe,qBAAqBlC,0BAA0B;AAC/CmC,QAAAA,iBAAiB,CAAC,CAACL;AAEnBM,QAAAA,gBAAgBH,QACpB,OAAO;AAAA,IAAE,GAAGI;AAAAA,IAAwB,GAAGxC;AAAAA,EAAmB,IAC1D,CACEA,yDAAoByC,OACpBzC,yDAAoB0C,eACpB1C,yDAAoB2C,cACpB3C,yDAAoB4C,YAAY,CACjC;AAGGC,QAAAA,oBAAoBC,YACvBC,CAAc,cAAA;AACb,QACEvD,oBAAoB,QACpBA,oBAAoBwD,UACpBD,UAAUzB,SAAS9B,iBACnB;AACAoB,yBAAmBC,gBAAiBoC,OAAO;AAC3CjC,2BAAqBuB,cAAcK,YAAY;AAC/CpB,oBAAc,KAAK;AAAA,IAAA,OACd;AACLZ,yBAAmBC,gBAAiBqC,KAAK;AACzClC,2BAAqB,EAAE;AACvBQ,oBAAc,IAAI;AAAA,IACpB;AAAA,EAAA,GAEF,CACEe,cAAcK,cACdpD,iBACAwB,sBACAJ,kBAAkB,CACnB;AAWH,QAAMuC,YAAYL,YAChB,CAACM,QAAQC,OAAOC,QAAQ;;AACtB,UAAMC,aAAa,CACjB,GAAGnF,MAAMoF,MAAM,GAAGJ,MAAM,GACxB,GAAGhF,MAAMoF,MAAMJ,SAAS,CAAC,CAAC;AAE5B3C,aAAS8C,UAAU;AACnBlC,oBACEiC,MAAMC,WAAWjC,SAASF,eAAe,IAAIA,eAAe,IAAI,CAAC;AAEnEK,KAAAA,MAAAA,SAASgC,YAAThC,gBAAAA,IAAkBiC;AAClBb,sBAAkBU,UAAU;AACjBF,yCAAAA,OAAOjF,MAAMgF,SAASA;AACjCpE,yCAAWqE,OAAOE;AAClB3B,cAAU6B,UAAU;AAAA,EAAA,GAEtB,CAACzE,UAAUE,UAAU2D,mBAAmBpC,UAAUW,cAAchD,KAAK,CAAC;AAUxE,QAAMuF,SAASb,YACb,CAACO,OAAOO,QAAQ;AACdP,UAAMQ,eAAgB;AACtB,QAAID,QAAQ,IAAI;AACd,YAAME,SAAS;AAAA,QAAEpF,OAAOkF;AAAAA,QAAKG,MAAM;AAAA,MAAA;AACnC,YAAMR,aAAa,CAAC,GAAGnF,OAAO0F,MAAM;AACpCrD,eAAS8C,UAAU;AACnBV,wBAAkBU,UAAU;AAC5BtE,qCAAQoE,OAAOS,QAAQP,WAAWjC,SAAS;AAC3CtC,2CAAWqE,OAAOE;AAAAA,IACpB;AAAA,EAAA,GAEF,CAACtE,OAAOD,UAAU6D,mBAAmBpC,UAAUrC,KAAK,CAAC;AAGvD,QAAM4F,eACHlE,WAAWkD,UACVlD,WAAW,aACXC,kBAAkBiD,UACpB,CAACzB;AAEH0C,YAAU,MAAM;;AACd,QAAI,CAACpE,WAAW;AACRqE,YAAAA,WAAUvC,MAAAA,6CAAc8B,YAAd9B,gBAAAA,IAAuBwC,SAAS/C;AAGhDgD,iBAAW,MAAM;AACf,cAAMC,YAAY1C,aAAa8B;AAC/B,YAAIa,MAAMD,SAAS;AAAG;AACtBA,kBAAUE,aAAaL,UACnBA,QAAQM,aACRH,UAAUI,sBAAAA,EAAwBC,QAAQ,IAC1CR,QAAQO,sBAAuB,EAACC,QAAQ,IACxC;AAAA,SACH,EAAE;AAELR,yCAASR;AAAAA,IACX;AAAA,EAAA,GACC,CAAC7D,WAAWuB,YAAY,CAAC;AAE5B6C,YAAU,MAAM;AACV,QAAA,CAACrC,UAAU6B,SAAS;AACtBvC,kBAAY,EAAE;AACdG,sBAAgBjD,MAAMkD,MAAM;AAAA,IAC9B;AACAM,cAAU6B,UAAU;AAAA,EAAA,GACnB,CAACrF,KAAK,CAAC;AAEV,QAAMuG,YAAYC;AAKlB,QAAMC,aAAaA,MAAM;AACvB/C,qBAAiB2B,QAAQC;EAAO;AAG5BoB,QAAAA,iBAAiBhC,YACpBiC,CAAO,OAAA;;AAEN,UAAMC,SAASC,SAASC,eACtBC,MAAM9E,WAAW,kBAAkB,KAAK,EAAE;AAE5C,WAAO0E,MAAM,QAAOC,MAAAA,iCAAQI,qBAAqB,UAA7BJ,gBAAAA,IAAqCD,MAAMC;AAAAA,EAAAA,GAEjE,CAAC3E,SAAS,CAAC;AAMPgF,QAAAA,yBAAyBvC,YAAY,MAAM;AAC/C,QAAI6B,UAAUlB,SAAS;AACrBvB,0BAAoB,IAAI;AAAA,IAC1B;AAAA,EAAA,GACC,CAACyC,SAAS,CAAC;AAKRW,QAAAA,oBAAoBxC,YACvByC,CAAQ,QAAA;;AACDC,UAAAA,mBAAmBrF,iEAAyBoF;AAC9CC,SAAAA,MAAAA,qDAAmB,OAAnBA,gBAAAA,IAAuB9G,OAAO;AAChCwD,0BAAoBsD,gBAAgB;AAAA,IAAA,OAC/B;AACmB;IAC1B;AAAA,EAAA,GAEF,CAACH,wBAAwBlF,sBAAsB,CAAC;AAM5CsF,QAAAA,4BAA4BA,CAACpC,OAAOqC,SAAS;AACjD/B,WAAON,OAAOqC,KAAKtH,SAASsH,KAAKhH,KAAK;AAG1BgH,gBAAAA,KAAKtH,SAASsH,KAAKhH,KAAK;AAExB;AACY;EAAA;AAM1B,QAAMiH,sBAAuBtC,CAAU,UAAA;AACrC,QAAIuC,WAAWvC,OAAOwC,cAAcC,GAAG,GAAG;AAChB;AACZ;IACHF,WAAAA,WAAWvC,OAAOwC,cAAcE,GAAG,GAAG;AACvB;IAC1B;AAAA,EAAA;AAMF,QAAMC,kBAAkBlD,YACtB,CAACmD,GAAGC,UAAU;AACZhF,gBAAYgF,KAAK;AAEjB,QAAI7D,oBAAoB;AAOtBiD,wBAAkBY,KAAK;AAAA,IACzB;AAAA,EAAA,GAEF,CAAC7D,oBAAoBiD,iBAAiB,CAAC;AAMnCa,QAAAA,wBAAwBrD,YAC3BO,CAAU,UAAA;AACT,QAAI,CAAChB,sBAAsBpC,YAAYmG,SAAS/C,MAAMgD,IAAI,GAAG;AAC3D1C,aAAON,OAAOpC,QAAQ;AAAA,IACxB;AAAA,KAEF,CAAC0C,QAAQtB,oBAAoBpC,aAAagB,QAAQ,CAAC;AAM/CqF,QAAAA,mBAAmBxD,YACtBO,CAAU,UAAA;;AACT,QAAIpC,aAAa,IAAI;AACnB,cAAQoC,MAAMgD,MAAI;AAAA,QAChB,KAAK;AACHhF,0BAAgBD,eAAe,IAAIA,eAAe,IAAI,CAAC;AACvD;AAAA,QACF,KAAK;AACHC,0BACED,eAAehD,MAAMkD,SAASF,eAAe,IAAIhD,MAAMkD,MAAM;AAE/D;AAAA,QACF,KAAK;AACH,cAAIS,eAAe;AACPX,sBAAAA,cAAciC,OAAO,KAAK;AAAA,UAAA,OAC/B;AACWjF,4BAAAA,MAAMkD,SAAS,CAAC;AAAA,UAClC;AACA;AAAA,QACF,KAAK;AACH,cAAIS,eAAe;AACPX,sBAAAA,cAAciC,OAAO,KAAK;AAAA,UACtC;AACA;AAAA,MAEM;AAAA,IAAA,OAEL;AACL,cAAQA,MAAMgD,MAAI;AAAA,QAChB,KAAK;AACY,WAAAE,MAAA,eAAA,CAAC,MAAD,gBAAAA,IAAI7C;AACnB;AAAA,MAEM;AAAA,IAEZ;AAAA,EAAA,GAEF,CACEP,WACA2B,gBACA/C,eACAX,cACAH,UACA7C,MAAMkD,MAAM,CACb;AAMH,QAAMkF,qBAAqB1D,YACzB,CAACO,OAAOoD,MAAM;AACFA,cAAAA,GAAGpD,OAAO,IAAI;AACxBzC,uBAAmBC,gBAAiBC,OAAO;AAAA,EAAA,GAE7C,CAACqC,WAAWvC,kBAAkB,CAAC;AAM3B8F,QAAAA,0BAA0B5D,YAAY,MAAM;;AAChDrB,KAAAA,MAAAA,SAASgC,YAAThC,gBAAAA,IAAkBiC;AAClBiD,iBAAa9E,YAAY4B,OAAO;AAChCpC,oBAAgBjD,MAAMkD,MAAM;AAAA,EAAA,GAC3B,CAAClD,MAAMkD,MAAM,CAAC;AAEjB,QAAMsF,gBAAiBC,CAAQ,QAAA;AACjBpD,gBAAAA,UAAUW,WAAW,MAAM;AACrC,UAAIlE,cAAc;AAChByD,eAAOkD,KAAK5F,QAAQ;AAAA,MACtB;AACA9B,uCAAS0H,KAAK5F;AAAAA,OACb,GAAG;AAAA,EAAA;AAGR,QAAM6F,iBAAkBD,CAAQ,QAAA;AAC9BF,iBAAa9E,YAAY4B,OAAO;AAChCrE,uCAAUyH,KAAK5F;AAAAA,EAAQ;AAGzB,8BACG8F,mBAAiB;AAAA,IAChB7I;AAAAA,IACAC;AAAAA,IACAK;AAAAA,IACAD;AAAAA,IACAuB,QAAQa;AAAAA,IACRlC;AAAAA,IACAU,QAAQyH;AAAAA,IACRxH,SAAS0H;AAAAA,IACT7I,WAAW+I,KACTC,iBAAiBC,MACjBlJ,mCAASkJ,MACTjJ,WACAO,YAAYwI,KAAKC,iBAAiBzI,UAAUR,mCAASQ,QAAQ,CAAC;AAAA,IAC9D2F,UAAA,EAEA5D,YAAYC,wCACX2G,sBAAoB;AAAA,MACnBlJ,WAAW+I,KACTC,iBAAiBG,gBACjBpJ,mCAASoJ,cAAc;AAAA,MACvBjD,UAED5D,CAAAA,YACC8G,oBAACC,aAAW;AAAA,QACVrJ,WAAW+I,KAAKC,iBAAiBvI,OAAOV,mCAASU,KAAK;AAAA,QACtDR,IAAIiH,MAAMjH,IAAI,OAAO;AAAA,QACrBqJ,SAASpC,MAAM9E,WAAW,OAAO;AAAA,QACjC3B,OAAOC;AAAAA,MAAAA,CAAc,GAIxB6B,kBACC6G,oBAACG,mBAAiB;AAAA,QAChBvJ,WAAW+I,KACTC,iBAAiBnI,aACjBd,mCAASc,WAAW;AAAA,QAEtBZ,IAAIiH,MAAM9E,WAAW,aAAa;AAAA,QAAE8D,UAEnCrF;AAAAA,MAAAA,CAEJ,CAAA;AAAA,IAAA,CAAA,GAIJkD,cACCqF,oBAACI,mBAAiB;AAAA,MAChBvJ,IAAIiH,MAAM9E,WAAW,aAAa;AAAA,MAClCpC,WAAW+I,KACTC,iBAAiBS,kBACjB1J,mCAAS0J,gBAAgB;AAAA,MAE3BC,WAAWpI;AAAAA,MACXqI,qBAAqBxJ,MAAMkD;AAAAA,MAC3BuG,iBAAiBrI;AAAAA,MAAgB,GAC7BI;AAAAA,IAAAA,CAEP,GAEDkI,qBAACC,gBAAc;AAAA,MACb9J,WAAW+I,KACTC,iBAAiBe,UACjBhK,mCAASgK,UACThE,gBAAgBgD,KAAKC,iBAAiBxE,OAAOzE,mCAASyE,KAAK,GAC3D/C,aACEG,aACAmH,KAAKC,iBAAiBvH,WAAW1B,mCAAS0B,SAAS,GACrDyC,kBAAkB6E,KAAKC,iBAAiBhE,SAASjF,mCAASiF,OAAO,GACjE,CAACpD,aAAamH,KAAKC,iBAAiBgB,YAAYjK,mCAASiK,UAAU,CAAC;AAAA,MAEtEC,WAAW1J;AAAAA,MACX2J,aAAa,CAACtI;AAAAA,MACduI,QAAQpE;AAAAA,MACRqE,YAAY3I,aAAaG;AAAAA,MACzByI,UAAUnG;AAAAA,MACVoG,WAAWhK;AAAAA,MACXiK,WAAWlC;AAAAA,MACXmC,SAAS/B;AAAAA,MACTgC,KAAK/G;AAAAA,MAAawC,UAAA,CAEjB/F,SACCA,MAAMuK,IAAI,CAACC,GAAGnC,MAAM;AACZ7C,cAAAA,MACJ,OAAOgF,MAAM,WACT;AAAA,UACElK,OAAOkK;AAAAA,UACP7E,MAAM;AAAA,QAER6E,IAAAA;AACA,cAAA;AAAA,UAAElK;AAAAA,UAAOqF;AAAAA,aAAS8E;AAAAA,QAAejF,IAAAA;AACvC,mCACGkF,gBAAc;AAAA,UAEbC,UAAU;AAAA,UACV9K,WAAW+I,KACT,CAACnH,aACCmH,KAAKC,iBAAiBgB,YAAYjK,mCAASiK,UAAU,CAAC;AAAA,UAE1DjK,SAAS;AAAA,YACPgL,SAAShC,KACPC,iBAAiBgC,iBACjBjL,mCAASiL,eAAe;AAAA,YAE1B/B,MAAMF,KACJC,iBAAiBiC,cACjBlL,mCAASkL,YAAY;AAAA,UAEzB;AAAA,UACAhL,IAAK,OAAMuI;AAAAA,UACX0B,aAAa,CAACtI;AAAAA,UAAUsE,8BAEvBgF,WAAS;AAAA,YACRzK;AAAAA,YACAT,WAAW+I,KACTP,MAAMrF,gBACJ4F,KAAKC,iBAAiBmC,aAAapL,mCAASoL,WAAW,CAAC;AAAA,YAE5DpL,SAAS;AAAA,cACPqL,UAAUrC,KACRC,iBAAiBoC,UACjBrL,mCAASqL,QAAQ;AAAA,YAErB;AAAA,YACAtF;AAAAA,YAAW,GACN,EAAExF,YAAYC,YAAYuF,SAAS,kBAAkB;AAAA,cACxD7E,UAAWmE,CAAAA,UAAUmD,mBAAmBnD,OAAOoD,CAAC;AAAA,YAClD;AAAA,YACA6C,mBAAmB;AAAA,cACjBP,UAAU;AAAA,YACZ;AAAA,YACAQ,WAAW9C,MAAMrF;AAAAA,YAAa,GAC1ByH;AAAAA,UAAAA,CAAU;AAAA,QAAA,GAvCV,GAAEjF,IAAIlF,SAAS+H,GAAG;AAAA,MA2C7B,CAAA,GACF,EAAEjI,YAAYD,iCACZiL,qBAAmB;AAAA,QAClBvL,WAAW+I,KACT,CAACnH,aACCmH,KAAKC,iBAAiBgB,YAAYjK,mCAASiK,UAAU,GACvD7J,MAAMkD,WAAW,IACb0F,KACEC,iBAAiBwC,mBACjBzL,mCAASyL,iBAAiB,IAE5B,EAAE;AAAA,QAERzL,SAAS;AAAA,UACPkJ,MAAMF,KACJC,iBAAiByC,uBACjB1L,mCAAS0L,qBAAqB;AAAA,UAEhCV,SAAShC,KACPC,iBAAiBgC,iBACjBjL,mCAASiL,eAAe;AAAA,QAE5B;AAAA,QACA/K,IAAK,OAAME,MAAMkD;AAAAA,QACjB6G,aAAa,CAACtI;AAAAA,QACd8J,gBAAgB,CAAC,CAAC5H;AAAAA,QAAcoC,8BAE/ByF,aAAW;AAAA,UACVxL,OAAO6C;AAAAA,UACP4I,cAAY;AAAA,UACZ7K,UAAUgH;AAAAA,UACVwC,WAAWrC;AAAAA,UACX9G,aAAajB,MAAMkD,WAAW,IAAIjC,cAAc;AAAA,UAChDI;AAAAA,UACAxB,WAAW+I,KACT,CAACnH,aACCmH,KAAKC,iBAAiBgB,YAAYjK,mCAASiK,UAAU,CAAC;AAAA,UAE1DjK,SAAS;AAAA,YACPkJ,MAAMF,KACJC,iBAAiB6C,cACjB9L,mCAAS8L,YAAY;AAAA,YAEvB5D,OAAOc,KAAKC,iBAAiBf,OAAOlI,mCAASkI,KAAK;AAAA,YAClD6D,sBAAsB/C,KACpBC,iBAAiB+C,yBACjBhM,mCAASgM,uBAAuB;AAAA,YAElCC,kBAAkBjD,KAChBC,iBAAiBiD,qBACjBlM,mCAASkM,mBAAmB;AAAA,UAEhC;AAAA,UACA1L;AAAAA,UACAD,UAAUA,YAAYwD;AAAAA,UACtBpC,YAAY;AAAA,YACV+I,KAAK5G;AAAAA,YACL,cAAclD;AAAAA,YACd,mBAAmBC;AAAAA,YACnB,oBACEE,mBAAmB,OACfA,kBACCD,eAAeqG,MAAM9E,WAAW,aAAa,KAC9C2C;AAAAA,YAEN,GAAGrD;AAAAA,UACL;AAAA,UACA8B;AAAAA,UACA0G,aAAa,CAACtI;AAAAA,UAAU,GACpBO;AAAAA,QAAAA,CAAM;AAAA,MAAA,CAGf,CAAA;AAAA,IAAA,CAAA,GAEFiC,sBACCyF,qBAAAqC,UAAA;AAAA,MAAAhG,UAAA,CACG7B,kBACC+E,oBAAA,OAAA;AAAA,QACE+C,MAAK;AAAA,QACLnM,WAAW+I,KACTC,iBAAiBoD,gBACjBrM,mCAASqM,cAAc;AAAA,MAAA,CAG5B,GACDhD,oBAACiD,mBAAiB;AAAA,QAChBpM,IAAIiH,MAAM9E,WAAW,aAAa;AAAA,QAClCrC,SAAS;AAAA,UACPkJ,MAAMF,KACJC,iBAAiBsD,sBACjBvM,mCAASuM,oBAAoB;AAAA,UAE/BC,MAAMxD,KACJC,iBAAiBwD,gBACjBzM,mCAASyM,cAAc;AAAA,QAE3B;AAAA,QACAC,UAAUpI;AAAAA,QACVqI,WAAUhJ,kDAAc8B,YAAd9B,mBAAuBiJ;AAAAA,QACjCC,SAASxF;AAAAA,QACTmD,WAAW7C;AAAAA,QACXmF,sBAAsBrF;AAAAA,QACtBxD;AAAAA,MAAAA,CACA,CAAA;AAAA,IAAA,CAAA,GAGL+B,gBACCqD,oBAAC0D,aAAW;AAAA,MACV7M,IAAIiH,MAAM9E,WAAW,OAAO;AAAA,MAC5B2K,eAAa;AAAA,MACb/M,WAAW+I,KAAKC,iBAAiBxE,OAAOzE,mCAASyE,KAAK;AAAA,MAAE0B,UAEvDpD;AAAAA,IAAAA,CAEJ,CAAA;AAAA,EAAA,CACiB;AAExB;"}
+{"version":3,"file":"TagsInput.js","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport clsx from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { HvValidationMessages } from \"types/forms\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledCharCounter,\n  StyledDescription,\n  StyledError,\n  StyledFormElement,\n  StyledLabel,\n  StyledLabelContainer,\n  StyledListItem,\n  StyledTag,\n  StyledTagsList,\n  StyledInputListItem,\n  StyledInput,\n  StyledSuggestions,\n} from \"./TagsInput.styles\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport { useControlled, useIsMounted, useUniqueId } from \"hooks\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { HvTagProps } from \"components\";\nimport tagsInputClasses, { HvTagsInputClasses } from \"./tagsInputClasses\";\nimport { HvCharCounterProps, HvFormStatus } from \"../Forms\";\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material\";\n\nexport type HvTagsInputProps = HvBaseProps<\n  HTMLElement,\n  { onChange; onBlur; onFocus; onKeyDown; color }\n> & {\n  /** The form element name. */\n  name?: string;\n  /** The value of the form element. */\n  value?: string[] | HvTagProps[];\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string[] | HvTagProps[];\n  /**\n   * The label of the form element.\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that the form element is required. */\n  required?: boolean;\n  /** The function that will be executed onChange. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: Function;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: Function;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: Function;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: Function;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n  /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */\n  hideCounter?: boolean;\n  /** Text between the current char counter and max value. */\n  middleCountLabel?: string;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxTagsQuantity?: number;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\n  /** If `true` the component is resizable. */\n  resizable?: boolean;\n  /** Props passed to the HvCharCount component. */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /** If `true` the component is in multiline mode. */\n  multiline?: boolean;\n  /** The status of the form element. */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\n  /** An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. */\n  commitTagOn?: string[];\n  /** If `true` the tag will be committed when the blur event occurs. */\n  commitOnBlur?: boolean;\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */\n  suggestionListCallback?: Function;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagsInputClasses;\n};\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = ({\n  classes,\n  className,\n  id,\n  name,\n  value: valueProp,\n  defaultValue = [],\n  readOnly = false,\n  disabled = false,\n  required = false,\n  label: textAreaLabel,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  onChange,\n  onAdd,\n  onDelete,\n  onBlur,\n  onFocus,\n  placeholder,\n  hideCounter = false,\n  middleCountLabel = \"/\",\n  maxTagsQuantity,\n  autoFocus = false,\n  resizable = true,\n  inputProps = {},\n  countCharProps = {},\n  multiline = false,\n  status,\n  statusMessage,\n  validationMessages,\n  commitTagOn = [\"Enter\"],\n  commitOnBlur = false,\n  suggestionListCallback,\n  ...others\n}: HvTagsInputProps) => {\n  const elementId = useUniqueId(id, \"hvTagsInput\");\n\n  const hasLabel = textAreaLabel != null;\n  const hasDescription = description != null;\n\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy\n  );\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [tagInput, setTagInput] = useState(\"\");\n  const [tagCursorPos, setTagCursorPos] = useState(value.length);\n  const [stateValid, setStateValid] = useState(true);\n\n  const inputRef = useRef<any>();\n  const containerRef = useRef<any>();\n  const skipReset = useRef(false);\n  const blurTimeout = useRef<any>();\n  const materialInputRef = useRef<any>(null);\n\n  const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n  const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n  // suggestions related state\n  const [suggestionValues, setSuggestionValues] = useState(null);\n\n  const isStateInvalid = useMemo(() => {\n    return hasCounter && value.length > maxTagsQuantity;\n  }, [hasCounter, maxTagsQuantity, value.length]);\n\n  const canShowSuggestions = suggestionListCallback != null;\n  const hasSuggestions = !!suggestionValues;\n\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    [\n      validationMessages?.error,\n      validationMessages?.requiredError,\n      validationMessages?.minCharError,\n      validationMessages?.maxCharError,\n    ]\n  );\n\n  const performValidation = useCallback(\n    (currValue) => {\n      if (\n        maxTagsQuantity !== null &&\n        maxTagsQuantity !== undefined &&\n        currValue.length > maxTagsQuantity\n      ) {\n        setValidationState(validationStates.invalid);\n        setValidationMessage(errorMessages.maxCharError);\n        setStateValid(false);\n      } else {\n        setValidationState(validationStates.valid);\n        setValidationMessage(\"\");\n        setStateValid(true);\n      }\n    },\n    [\n      errorMessages.maxCharError,\n      maxTagsQuantity,\n      setValidationMessage,\n      setValidationState,\n    ]\n  );\n\n  /**\n   * Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n   * Also executes the user provided onDelete and onChange events.\n   *\n   * @param {number}  tagPos - the position at which to remove the tag\n   * @param {Event}   event  - the event associated with the delete\n   * @param {boolean} end    - whether or not to set the cursor at the end of the array\n   */\n  const deleteTag = useCallback(\n    (tagPos, event, end) => {\n      const newTagsArr = [\n        ...value.slice(0, tagPos),\n        ...value.slice(tagPos + 1),\n      ];\n      setValue(newTagsArr);\n      setTagCursorPos(\n        end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0\n      );\n      inputRef.current?.focus();\n      performValidation(newTagsArr);\n      onDelete?.(event, value[tagPos], tagPos);\n      onChange?.(event, newTagsArr);\n      skipReset.current = true;\n    },\n    [onChange, onDelete, performValidation, setValue, tagCursorPos, value]\n  );\n\n  /**\n   * Adds a Tag to the array of tags.\n   * Also executes the user provided onAdd and onDelete events.\n   *\n   * @param {Event}   event  - whatever event triggered adding a tag\n   * @param {string}  tag    - the string for the tag\n   */\n  const addTag = useCallback(\n    (event, tag) => {\n      event.preventDefault();\n      if (tag !== \"\") {\n        const newTag = { label: tag, type: \"semantic\" };\n        const newTagsArr = [...value, newTag];\n        setValue(newTagsArr);\n        performValidation(newTagsArr);\n        onAdd?.(event, newTag, newTagsArr.length - 1);\n        onChange?.(event, newTagsArr);\n      }\n    },\n    [onAdd, onChange, performValidation, setValue, value]\n  );\n\n  const canShowError =\n    (status !== undefined &&\n      status === \"invalid\" &&\n      statusMessage !== undefined) ||\n    !stateValid;\n\n  useEffect(() => {\n    if (!multiline) {\n      const element = containerRef?.current?.children[tagCursorPos];\n      // this setTimeout is a workaround for Firefox not properly dealing\n      // with setting the scrollLeft value.\n      setTimeout(() => {\n        const container = containerRef.current;\n        if (isNil(container)) return;\n        container.scrollLeft = element\n          ? element.offsetLeft -\n            container.getBoundingClientRect().width / 2 +\n            element.getBoundingClientRect().width / 2\n          : 0;\n      }, 50);\n\n      element?.focus();\n    }\n  }, [multiline, tagCursorPos]);\n\n  useEffect(() => {\n    if (!skipReset.current) {\n      setTagInput(\"\");\n      setTagCursorPos(value.length);\n    }\n    skipReset.current = false;\n  }, [value]);\n\n  const isMounted = useIsMounted();\n\n  /**\n   * Looks for the node that represent the input inside the material tree and focus it.\n   */\n  const focusInput = () => {\n    materialInputRef.current.focus();\n  };\n\n  const getSuggestions = useCallback(\n    (li) => {\n      // TODO Replace with ref\n      const listEl = document.getElementById(\n        setId(elementId, \"suggestions-list\") || \"\"\n      );\n      return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n    },\n    [elementId]\n  );\n\n  /**\n   * Clears the suggestion array.\n   */\n  const suggestionClearHandler = useCallback(() => {\n    if (isMounted.current) {\n      setSuggestionValues(null);\n    }\n  }, [isMounted]);\n\n  /**\n   * Fills of the suggestion array.\n   */\n  const suggestionHandler = useCallback(\n    (val) => {\n      const suggestionsArray = suggestionListCallback?.(val);\n      if (suggestionsArray?.[0]?.label) {\n        setSuggestionValues(suggestionsArray);\n      } else {\n        suggestionClearHandler();\n      }\n    },\n    [suggestionClearHandler, suggestionListCallback]\n  );\n\n  /**\n   * Executes the user callback adds the selection to the state and clears the suggestions.\n   */\n  const suggestionSelectedHandler = (event, item) => {\n    addTag(event, item.value || item.label);\n\n    // set the input value (only when value is uncontrolled)\n    setTagInput(item.value || item.label);\n\n    focusInput();\n    suggestionClearHandler();\n  };\n\n  /**\n   * Handler for the `onKeyDown` event on the suggestions component\n   */\n  const onSuggestionKeyDown = (event) => {\n    if (isKeypress(event, keyboardCodes.Esc)) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKeypress(event, keyboardCodes.Tab)) {\n      suggestionClearHandler();\n    }\n  };\n\n  /**\n   * Handler for the `onChange` event on the tag input\n   */\n  const onChangeHandler = useCallback(\n    (_, input) => {\n      setTagInput(input);\n\n      if (canShowSuggestions) {\n        // an edge case might be a controlled input whose onChange callback\n        // doesn't change the value (or sets another): the suggestionListCallback\n        // callback will still receive the original rejected value.\n        // a refactor is needed so the suggestionListCallback might be called only\n        // when the input is uncontrolled, providing a way to externally control\n        // the suggestion values.\n        suggestionHandler(input);\n      }\n    },\n    [canShowSuggestions, suggestionHandler]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the form element\n   */\n  const onInputKeyDownHandler = useCallback(\n    (event) => {\n      if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n        addTag(event, tagInput);\n      }\n    },\n    [addTag, canShowSuggestions, commitTagOn, tagInput]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the list container.\n   */\n  const onKeyDownHandler = useCallback(\n    (event) => {\n      if (tagInput === \"\") {\n        switch (event.code) {\n          case \"ArrowLeft\":\n            setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n            break;\n          case \"ArrowRight\":\n            setTagCursorPos(\n              tagCursorPos < value.length ? tagCursorPos + 1 : value.length\n            );\n            break;\n          case \"Backspace\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            } else {\n              setTagCursorPos(value.length - 1);\n            }\n            break;\n          case \"Delete\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            }\n            break;\n          default:\n            break;\n        }\n      } else {\n        switch (event.code) {\n          case \"ArrowDown\":\n            getSuggestions(0)?.focus();\n            break;\n          default:\n            break;\n        }\n      }\n    },\n    [\n      deleteTag,\n      getSuggestions,\n      isTagSelected,\n      tagCursorPos,\n      tagInput,\n      value.length,\n    ]\n  );\n\n  /**\n   * Handler for the `onDelete` event on the tag component\n   */\n  const onDeleteTagHandler = useCallback(\n    (event, i) => {\n      deleteTag(i, event, true);\n      setValidationState(validationStates.standBy);\n    },\n    [deleteTag, setValidationState]\n  );\n\n  /**\n   * Handler for the `onClick` event on the list container\n   */\n  const onContainerClickHandler = useCallback(() => {\n    inputRef.current?.focus();\n    clearTimeout(blurTimeout.current);\n    setTagCursorPos(value.length);\n  }, [value.length]);\n\n  const onBlurHandler = (evt) => {\n    blurTimeout.current = setTimeout(() => {\n      if (commitOnBlur) {\n        addTag(evt, tagInput);\n      }\n      onBlur?.(evt, tagInput);\n    }, 250);\n  };\n\n  const onFocusHandler = (evt) => {\n    clearTimeout(blurTimeout.current);\n    onFocus?.(evt, tagInput);\n  };\n\n  return (\n    <StyledFormElement\n      id={id}\n      name={name}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      required={required}\n      onBlur={onBlurHandler}\n      onFocus={onFocusHandler}\n      className={clsx(\n        tagsInputClasses.root,\n        classes?.root,\n        className,\n        disabled && clsx(tagsInputClasses.disabled, classes?.disabled)\n      )}\n    >\n      {(hasLabel || hasDescription) && (\n        <StyledLabelContainer\n          className={clsx(\n            tagsInputClasses.labelContainer,\n            classes?.labelContainer\n          )}\n        >\n          {hasLabel && (\n            <StyledLabel\n              className={clsx(tagsInputClasses.label, classes?.label)}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={textAreaLabel}\n            />\n          )}\n\n          {hasDescription && (\n            <StyledDescription\n              className={clsx(\n                tagsInputClasses.description,\n                classes?.description\n              )}\n              id={setId(elementId, \"description\")}\n            >\n              {description}\n            </StyledDescription>\n          )}\n        </StyledLabelContainer>\n      )}\n\n      {hasCounter && (\n        <StyledCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={clsx(\n            tagsInputClasses.characterCounter,\n            classes?.characterCounter\n          )}\n          separator={middleCountLabel}\n          currentCharQuantity={value.length}\n          maxCharQuantity={maxTagsQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <StyledTagsList\n        className={clsx(\n          tagsInputClasses.tagsList,\n          classes?.tagsList,\n          canShowError && clsx(tagsInputClasses.error, classes?.error),\n          resizable &&\n            multiline &&\n            clsx(tagsInputClasses.resizable, classes?.resizable),\n          isStateInvalid && clsx(tagsInputClasses.invalid, classes?.invalid),\n          !multiline && clsx(tagsInputClasses.singleLine, classes?.singleLine)\n        )}\n        $disabled={disabled}\n        $singleLine={!multiline}\n        $error={canShowError}\n        $resizable={resizable && multiline}\n        $invalid={isStateInvalid}\n        $readOnly={readOnly}\n        onKeyDown={onKeyDownHandler}\n        onClick={onContainerClickHandler}\n        ref={containerRef}\n      >\n        {value &&\n          value.map((t, i) => {\n            const tag =\n              typeof t === \"string\"\n                ? {\n                    label: t,\n                    type: \"semantic\",\n                  }\n                : t;\n            const { label, type, ...otherProps } = tag;\n            return (\n              <StyledListItem\n                key={`${tag.label}-${i}`}\n                tabIndex={-1}\n                className={clsx(\n                  !multiline &&\n                    clsx(tagsInputClasses.singleLine, classes?.singleLine)\n                )}\n                classes={{\n                  gutters: clsx(\n                    tagsInputClasses.listItemGutters,\n                    classes?.listItemGutters\n                  ),\n                  root: clsx(\n                    tagsInputClasses.listItemRoot,\n                    classes?.listItemRoot\n                  ),\n                }}\n                id={`tag-${i}`}\n                $singleLine={!multiline}\n              >\n                <StyledTag\n                  label={label}\n                  className={clsx(\n                    i === tagCursorPos &&\n                      clsx(tagsInputClasses.tagSelected, classes?.tagSelected)\n                  )}\n                  classes={{\n                    chipRoot: clsx(\n                      tagsInputClasses.chipRoot,\n                      classes?.chipRoot\n                    ),\n                  }}\n                  type={type}\n                  {...(!(readOnly || disabled || type === \"categorical\") && {\n                    onDelete: (event) => onDeleteTagHandler(event, i),\n                  })}\n                  deleteButtonProps={{\n                    tabIndex: -1,\n                  }}\n                  $selected={i === tagCursorPos}\n                  {...otherProps}\n                />\n              </StyledListItem>\n            );\n          })}\n        {!(disabled || readOnly) && (\n          <StyledInputListItem\n            className={clsx(\n              !multiline &&\n                clsx(\n                  tagsInputClasses.singleLine,\n                  classes?.singleLine,\n                  value.length === 0 && tagsInputClasses.tagInputRootEmpty,\n                  value.length === 0 && classes?.tagInputRootEmpty\n                )\n            )}\n            classes={{\n              root: clsx(\n                tagsInputClasses.tagInputContainerRoot,\n                classes?.tagInputContainerRoot\n              ),\n              gutters: clsx(\n                tagsInputClasses.listItemGutters,\n                classes?.listItemGutters\n              ),\n            }}\n            id={`tag-${value.length}`}\n            $singleLine={!multiline}\n            $isTagSelected={!!isTagSelected}\n          >\n            <StyledInput\n              value={tagInput}\n              disableClear\n              onChange={onChangeHandler}\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              autoFocus={autoFocus}\n              className={clsx(\n                !multiline &&\n                  clsx(tagsInputClasses.singleLine, classes?.singleLine)\n              )}\n              classes={{\n                root: clsx(\n                  tagsInputClasses.tagInputRoot,\n                  classes?.tagInputRoot\n                ),\n                input: clsx(tagsInputClasses.input, classes?.input),\n                inputBorderContainer: clsx(\n                  tagsInputClasses.tagInputBorderContainer,\n                  classes?.tagInputBorderContainer\n                ),\n                inputRootFocused: clsx(\n                  tagsInputClasses.tagInputRootFocused,\n                  classes?.tagInputRootFocused\n                ),\n              }}\n              disabled={disabled}\n              readOnly={readOnly || isTagSelected}\n              inputProps={{\n                ref: materialInputRef,\n                \"aria-label\": ariaLabel,\n                \"aria-labelledby\": ariaLabelledBy,\n                \"aria-describedby\":\n                  ariaDescribedBy != null\n                    ? ariaDescribedBy\n                    : (description && setId(elementId, \"description\")) ||\n                      undefined,\n\n                ...inputProps,\n              }}\n              inputRef={inputRef}\n              $singleLine={!multiline}\n              {...others}\n            />\n          </StyledInputListItem>\n        )}\n      </StyledTagsList>\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div\n              role=\"presentation\"\n              className={clsx(\n                tagsInputClasses.inputExtension,\n                classes?.inputExtension\n              )}\n            />\n          )}\n          <StyledSuggestions\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: clsx(\n                tagsInputClasses.suggestionsContainer,\n                classes?.suggestionsContainer\n              ),\n              list: clsx(\n                tagsInputClasses.suggestionList,\n                classes?.suggestionList\n              ),\n            }}\n            expanded={hasSuggestions}\n            anchorEl={containerRef?.current?.parentElement}\n            onClose={suggestionClearHandler}\n            onKeyDown={onSuggestionKeyDown}\n            onSuggestionSelected={suggestionSelectedHandler}\n            suggestionValues={suggestionValues}\n          />\n        </>\n      )}\n      {canShowError && (\n        <StyledError\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(tagsInputClasses.error, classes?.error)}\n        >\n          {validationMessage}\n        </StyledError>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["HvTagsInput","classes","className","id","name","value","valueProp","defaultValue","readOnly","disabled","required","label","textAreaLabel","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onAdd","onDelete","onBlur","onFocus","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","status","statusMessage","validationMessages","commitTagOn","commitOnBlur","suggestionListCallback","others","elementId","useUniqueId","hasLabel","hasDescription","setValue","useControlled","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","tagInput","setTagInput","useState","tagCursorPos","setTagCursorPos","length","stateValid","setStateValid","inputRef","useRef","containerRef","skipReset","blurTimeout","materialInputRef","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","error","requiredError","minCharError","maxCharError","performValidation","useCallback","currValue","undefined","invalid","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","isNil","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKeypress","keyboardCodes","Esc","Tab","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","_a","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","StyledFormElement","clsx","tagsInputClasses","root","StyledLabelContainer","labelContainer","_jsx","StyledLabel","htmlFor","StyledDescription","StyledCharCounter","characterCounter","separator","currentCharQuantity","maxCharQuantity","_jsxs","StyledTagsList","tagsList","singleLine","$disabled","$singleLine","$error","$resizable","$invalid","$readOnly","onKeyDown","onClick","ref","map","t","otherProps","StyledListItem","tabIndex","gutters","listItemGutters","listItemRoot","StyledTag","tagSelected","chipRoot","deleteButtonProps","$selected","StyledInputListItem","tagInputRootEmpty","tagInputContainerRoot","$isTagSelected","StyledInput","disableClear","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","_Fragment","role","inputExtension","StyledSuggestions","suggestionsContainer","list","suggestionList","expanded","anchorEl","parentElement","onClose","onSuggestionSelected","StyledError","disableBorder"],"mappings":"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"}