@hitachivantara/uikit-react-core 5.24.3 → 5.24.4

package/dist/cjs/components/Tag/Tag.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.styles.cjs","sources":["../../../../src/components/Tag/Tag.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { CSSProperties, forwardRef } from \"react\";\n\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport Chip from \"@mui/material/Chip\";\n\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { PolymorphicRef } from \"@core/types/generic\";\n\nimport tagClasses from \"./tagClasses\";\n\nexport const StyledChip = styled(\n  Chip,\n  transientOptions\n)(\n  ({\n    $type,\n    $disabled,\n    $categoricalFocus,\n    $categoricalDisabled,\n    $baseLightColor,\n  }: {\n    $type: string;\n    $disabled: boolean;\n    $categoricalFocus: boolean;\n    $categoricalDisabled: boolean;\n    $baseLightColor: string;\n  }) => ({\n    \"&.MuiChip-root\": {\n      height: 16,\n      borderRadius: 0,\n      maxWidth: 180,\n      fontFamily: theme.fontFamily.body,\n\n      [`& .${tagClasses.focusVisible}`]: {\n        backgroundColor: hexToRgbA(theme.colors.base_light, 0.3),\n      },\n      ...($type === \"categorical\" && {\n        backgroundColor: \"red\",\n        borderRadius: 8,\n        [`&.${tagClasses.clickable}`]: {\n          cursor: \"pointer\",\n        },\n        \"&:hover\": {\n          borderRadius: 8,\n        },\n        [`& .${tagClasses.label}`]: {\n          color: theme.colors.secondary,\n        },\n        \"&:focus:not(:focus-visible)\": {\n          outline: \"0 !important\",\n          boxShadow: \"none !important\",\n        },\n      }),\n      ...($disabled && {\n        backgroundColor: theme.colors.atmo3,\n        cursor: \"not-allowed\",\n        [`& .${tagClasses.label}`]: {\n          color: theme.colors.secondary_60,\n        },\n      }),\n      ...($categoricalFocus && {\n        \"&:focus\": {\n          ...outlineStyles,\n        },\n      }),\n      ...($categoricalDisabled && {\n        backgroundColor: theme.colors.atmo3,\n        cursor: \"not-allowed\",\n        [`& .${tagClasses.label}`]: {\n          color: theme.colors.secondary_60,\n        },\n        \"&:hover\": {\n          backgroundColor: theme.colors.atmo3,\n        },\n        \"&:focus\": {\n          outline: \"none\",\n        },\n      }),\n    },\n\n    \"& .MuiChip-label\": {\n      paddingLeft: theme.space.xs,\n      paddingRight: theme.space.xs,\n      ...(theme.typography.caption1 as CSSProperties),\n      color: theme.colors.base_dark,\n      \"& p\": {\n        color: theme.colors.base_dark,\n      },\n    },\n\n    \"& .MuiChip-deleteIcon\": {\n      marginRight: 0,\n      width: 16,\n      height: 16,\n      minWidth: 16,\n      minHeight: 16,\n      padding: 0,\n      \"&:hover\": {\n        backgroundColor: `${$baseLightColor}30`,\n      },\n      \"&:focus\": {\n        ...outlineStyles,\n        borderRadius: 0,\n      },\n      \"&:focus:not(:focus-visible)\": {\n        outline: \"0 !important\",\n        boxShadow: \"none !important\",\n      },\n      ...($disabled && {\n        \"&:hover\": {\n          backgroundColor: theme.colors.atmo3,\n        },\n        \"&:focus\": {\n          backgroundColor: theme.colors.atmo3,\n          outline: \"none\",\n          boxShadow: \"none\",\n          outlineOffset: 0,\n        },\n      }),\n    },\n  })\n);\n\nexport const StyledButton = styled(\n  forwardRef((props: HvButtonProps, ref?: PolymorphicRef<\"button\">) => {\n    return <HvButton {...props} ref={ref} />;\n  })\n)({\n  \"& .MuiButton-startIcon\": {\n    width: 16,\n    height: 16,\n    minWidth: 16,\n    minHeight: 16,\n    padding: 0,\n    margin: 0,\n  },\n  \"& .MuiButton-textPrimary\": {\n    background: \"transparent\",\n  },\n});\n\nexport const StyledCloseXS = styled(\n  CloseXS,\n  transientOptions\n)(({ $color }: { $color: string }) => ({\n  \"& svg .color0\": {\n    fill: theme.colors[$color],\n  },\n}));\n"],"names":["StyledChip","Chip","process","env","NODE_ENV","_extends","target","transientOptions","label","$type","$disabled","$categoricalFocus","$categoricalDisabled","$baseLightColor","height","borderRadius","maxWidth","fontFamily","theme","body","tagClasses","focusVisible","backgroundColor","hexToRgbA","colors","base_light","clickable","cursor","color","secondary","outline","boxShadow","atmo3","secondary_60","outlineStyles","paddingLeft","space","xs","paddingRight","typography","caption1","base_dark","marginRight","width","minWidth","minHeight","padding","outlineOffset","StyledButton","_styled","forwardRef","props","ref","HvButton","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledCloseXS","CloseXS","$color","fill"],"mappings":"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"}
+{"version":3,"file":"Tag.styles.cjs","sources":["../../../../src/components/Tag/Tag.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { CSSProperties } from \"react\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n  root: {},\n\n  chipRoot: {\n    \"&.MuiChip-root\": {\n      height: 16,\n      borderRadius: 0,\n      maxWidth: 180,\n      fontFamily: theme.fontFamily.body,\n\n      \"& $focusVisible\": {\n        backgroundColor: hexToRgbA(theme.colors.base_light, 0.3),\n      },\n\n      \"&$categorical\": {\n        borderRadius: 8,\n        \"&$clickable\": {\n          cursor: \"pointer\",\n        },\n        \"&:hover\": {\n          borderRadius: 8,\n        },\n        \"& $label\": {\n          color: theme.colors.secondary,\n        },\n        \"&:focus:not(:focus-visible)\": {\n          outline: \"0 !important\",\n          boxShadow: \"none !important\",\n        },\n      },\n    },\n\n    \"& .MuiChip-label\": {\n      paddingLeft: theme.space.xs,\n      paddingRight: theme.space.xs,\n      ...(theme.typography.caption1 as CSSProperties),\n      color: theme.colors.base_dark,\n      \"& p\": {\n        color: theme.colors.base_dark,\n      },\n    },\n\n    \"& .MuiChip-deleteIcon\": {\n      marginRight: 0,\n      width: 16,\n      height: 16,\n      minWidth: 16,\n      minHeight: 16,\n      padding: 0,\n      \"&:hover\": {\n        backgroundColor: hexToRgbA(theme.colors.base_light, 0.3),\n      },\n      \"&:focus\": {\n        ...outlineStyles,\n        borderRadius: 0,\n      },\n      \"&:focus:not(:focus-visible)\": {\n        outline: \"0 !important\",\n        boxShadow: \"none !important\",\n      },\n    },\n  },\n\n  focusVisible: {},\n\n  button: {\n    background: \"transparent\",\n  },\n\n  label: {},\n\n  tagButton: {\n    width: 16,\n    height: 16,\n    minWidth: 16,\n    minHeight: 16,\n    padding: 0,\n    margin: 0,\n  },\n\n  deleteIcon: {},\n\n  disabledDeleteIcon: {\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n    \"&:focus\": {\n      backgroundColor: theme.colors.atmo3,\n      outline: \"none\",\n      boxShadow: \"none\",\n      outlineOffset: 0,\n    },\n  },\n\n  categorical: {},\n  clickable: {},\n\n  categoricalFocus: {\n    \"&:focus\": {\n      ...outlineStyles,\n    },\n  },\n\n  disabled: {\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n    \"& $label\": {\n      color: theme.colors.secondary_60,\n    },\n  },\n\n  categoricalDisabled: {\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n    \"& $label\": {\n      color: theme.colors.secondary_60,\n    },\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","chipRoot","height","borderRadius","maxWidth","fontFamily","theme","body","backgroundColor","hexToRgbA","colors","base_light","cursor","color","secondary","outline","boxShadow","paddingLeft","space","xs","paddingRight","typography","caption1","base_dark","marginRight","width","minWidth","minHeight","padding","outlineStyles","focusVisible","button","background","label","tagButton","margin","deleteIcon","disabledDeleteIcon","atmo3","outlineOffset","categorical","clickable","categoricalFocus","disabled","secondary_60","categoricalDisabled"],"mappings":"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"}

package/dist/cjs/components/TagsInput/TagsInput.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const clsx = require("clsx");
 const isNil = require("lodash/isNil");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const useControlled = require("../../hooks/useControlled.cjs");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const useIsMounted = require("../../hooks/useIsMounted.cjs");
@@ -12,14 +12,24 @@ const setId = require("../../utils/setId.cjs");
 const validationStates = require("../Forms/FormElement/validationStates.cjs");
 const validations = require("../BaseInput/validations.cjs");
 const TagsInput_styles = require("./TagsInput.styles.cjs");
-const tagsInputClasses = require("./tagsInputClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Tag = require("../Tag/Tag.cjs");
+const Input = require("../Input/Input.cjs");
+const FormElement = require("../Forms/FormElement/FormElement.cjs");
+const Label = require("../Forms/Label/Label.cjs");
+const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
+const CharCounter = require("../Forms/CharCounter/CharCounter.cjs");
+const ListContainer = require("../ListContainer/ListContainer.cjs");
+const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
+const BaseInput_styles = require("../BaseInput/BaseInput.styles.cjs");
+const Suggestions = require("../Forms/Suggestions/Suggestions.cjs");
+const WarningText = require("../Forms/WarningText/WarningText.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const isNil__default = /* @__PURE__ */ _interopDefault(isNil);
 const HvTagsInput = (props) => {
   var _a;
   const {
-    classes,
+    classes: classesProp,
     className,
     id,
     name,
@@ -55,6 +65,11 @@ const HvTagsInput = (props) => {
     suggestionListCallback,
     ...others
   } = useDefaultProps.useDefaultProps("HvTagsInput", props);
+  const {
+    classes,
+    cx,
+    css
+  } = TagsInput_styles.useClasses(classesProp);
   const elementId = useUniqueId.useUniqueId(id, "hvTagsInput");
   const hasLabel = textAreaLabel != null;
   const hasDescription = description != null;
@@ -239,7 +254,7 @@ const HvTagsInput = (props) => {
     clearTimeout(blurTimeout.current);
     onFocus == null ? void 0 : onFocus(evt, tagInput);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(TagsInput_styles.StyledFormElement, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
     id,
     name,
     disabled,
@@ -248,34 +263,36 @@ const HvTagsInput = (props) => {
     required,
     onBlur: onBlurHandler,
     onFocus: onFocusHandler,
-    className: clsx.clsx(tagsInputClasses.default.root, classes == null ? void 0 : classes.root, className, disabled && clsx.clsx(tagsInputClasses.default.disabled, classes == null ? void 0 : classes.disabled)),
-    children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs(TagsInput_styles.StyledLabelContainer, {
-      className: clsx.clsx(tagsInputClasses.default.labelContainer, classes == null ? void 0 : classes.labelContainer),
-      children: [hasLabel && /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledLabel, {
-        className: clsx.clsx(tagsInputClasses.default.label, classes == null ? void 0 : classes.label),
+    className: cx(classes.root, {
+      [classes.disabled]: disabled,
+      [classes.readOnly]: readOnly
+    }, className),
+    children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: classes.labelContainer,
+      children: [hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
+        className: classes.label,
         id: setId.setId(id, "label"),
         htmlFor: setId.setId(elementId, "input"),
         label: textAreaLabel
-      }), hasDescription && /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledDescription, {
-        className: clsx.clsx(tagsInputClasses.default.description, classes == null ? void 0 : classes.description),
+      }), hasDescription && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
+        className: classes.description,
         id: setId.setId(elementId, "description"),
         children: description
       })]
-    }), hasCounter && /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledCharCounter, {
+    }), hasCounter && /* @__PURE__ */ jsxRuntime.jsx(CharCounter.HvCharCounter, {
       id: setId.setId(elementId, "charCounter"),
-      className: clsx.clsx(tagsInputClasses.default.characterCounter, classes == null ? void 0 : classes.characterCounter),
+      className: classes.characterCounter,
       separator: middleCountLabel,
       currentCharQuantity: value.length,
       maxCharQuantity: maxTagsQuantity,
       ...countCharProps
-    }), /* @__PURE__ */ jsxRuntime.jsxs(TagsInput_styles.StyledTagsList, {
-      className: clsx.clsx(tagsInputClasses.default.tagsList, classes == null ? void 0 : classes.tagsList, canShowError && clsx.clsx(tagsInputClasses.default.error, classes == null ? void 0 : classes.error), resizable && multiline && clsx.clsx(tagsInputClasses.default.resizable, classes == null ? void 0 : classes.resizable), isStateInvalid && clsx.clsx(tagsInputClasses.default.invalid, classes == null ? void 0 : classes.invalid), !multiline && clsx.clsx(tagsInputClasses.default.singleLine, classes == null ? void 0 : classes.singleLine)),
-      $disabled: disabled,
-      $singleLine: !multiline,
-      $error: canShowError,
-      $resizable: resizable && multiline,
-      $invalid: isStateInvalid,
-      $readOnly: readOnly,
+    }), /* @__PURE__ */ jsxRuntime.jsxs(ListContainer.HvListContainer, {
+      className: cx(classes.tagsList, {
+        [classes.error]: canShowError,
+        [classes.resizable]: resizable && multiline,
+        [classes.invalid]: isStateInvalid,
+        [classes.singleLine]: !multiline
+      }),
       onKeyDown: onKeyDownHandler,
       onClick: onContainerClickHandler,
       ref: containerRef,
@@ -289,20 +306,23 @@ const HvTagsInput = (props) => {
           type,
           ...otherProps
         } = tag;
-        return /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledListItem, {
+        return /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, {
           tabIndex: -1,
-          className: clsx.clsx(!multiline && clsx.clsx(tagsInputClasses.default.singleLine, classes == null ? void 0 : classes.singleLine)),
+          className: cx({
+            [classes.singleLine]: !multiline
+          }),
           classes: {
-            gutters: clsx.clsx(tagsInputClasses.default.listItemGutters, classes == null ? void 0 : classes.listItemGutters),
-            root: clsx.clsx(tagsInputClasses.default.listItemRoot, classes == null ? void 0 : classes.listItemRoot)
+            gutters: classes.listItemGutters,
+            root: classes.listItemRoot
           },
           id: `tag-${i}`,
-          $singleLine: !multiline,
-          children: /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledTag, {
+          children: /* @__PURE__ */ jsxRuntime.jsx(Tag.HvTag, {
             label,
-            className: clsx.clsx(i === tagCursorPos && clsx.clsx(tagsInputClasses.default.tagSelected, classes == null ? void 0 : classes.tagSelected)),
+            className: cx({
+              [classes.tagSelected]: i === tagCursorPos
+            }),
             classes: {
-              chipRoot: clsx.clsx(tagsInputClasses.default.chipRoot, classes == null ? void 0 : classes.chipRoot)
+              chipRoot: classes.chipRoot
             },
             type,
             ...!(readOnly || disabled || type === "categorical") && {
@@ -311,32 +331,38 @@ const HvTagsInput = (props) => {
             deleteButtonProps: {
               tabIndex: -1
             },
-            $selected: i === tagCursorPos,
             ...otherProps
           })
         }, `${tag.label}-${i}`);
-      }), !(disabled || readOnly) && /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledInputListItem, {
-        className: clsx.clsx(!multiline && clsx.clsx(tagsInputClasses.default.singleLine, classes == null ? void 0 : classes.singleLine, value.length === 0 && clsx.clsx(tagsInputClasses.default.tagInputRootEmpty, classes == null ? void 0 : classes.tagInputRootEmpty))),
+      }), !(disabled || readOnly) && /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, {
+        className: cx({
+          [classes.singleLine]: !multiline,
+          [classes.tagInputRootEmpty]: value.length === 0
+        }, !!isTagSelected && css({
+          [`& .${BaseInput_styles.staticClasses.inputRoot}`]: {
+            backgroundColor: uikitStyles.theme.colors.atmo1
+          }
+        })),
         classes: {
-          root: clsx.clsx(tagsInputClasses.default.tagInputContainerRoot, classes == null ? void 0 : classes.tagInputContainerRoot),
-          gutters: clsx.clsx(tagsInputClasses.default.listItemGutters, classes == null ? void 0 : classes.listItemGutters)
+          root: classes.tagInputContainerRoot,
+          gutters: classes.listItemGutters
         },
         id: `tag-${value.length}`,
-        $singleLine: !multiline,
-        $isTagSelected: !!isTagSelected,
-        children: /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledInput, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
           value: tagInput,
           disableClear: true,
           onChange: onChangeHandler,
           onKeyDown: onInputKeyDownHandler,
           placeholder: value.length === 0 ? placeholder : "",
           autoFocus,
-          className: clsx.clsx(!multiline && clsx.clsx(tagsInputClasses.default.singleLine, classes == null ? void 0 : classes.singleLine)),
+          className: cx({
+            [classes.singleLine]: !multiline
+          }),
           classes: {
-            root: clsx.clsx(tagsInputClasses.default.tagInputRoot, classes == null ? void 0 : classes.tagInputRoot),
-            input: clsx.clsx(tagsInputClasses.default.input, classes == null ? void 0 : classes.input),
-            inputBorderContainer: clsx.clsx(tagsInputClasses.default.tagInputBorderContainer, classes == null ? void 0 : classes.tagInputBorderContainer),
-            inputRootFocused: clsx.clsx(tagsInputClasses.default.tagInputRootFocused, classes == null ? void 0 : classes.tagInputRootFocused)
+            root: classes.tagInputRoot,
+            input: classes.input,
+            inputBorderContainer: classes.tagInputBorderContainer,
+            inputRootFocused: classes.tagInputRootFocused
           },
           disabled,
           readOnly: readOnly || isTagSelected,
@@ -348,19 +374,18 @@ const HvTagsInput = (props) => {
             ...inputProps
           },
           inputRef,
-          $singleLine: !multiline,
           ...others
         })
       })]
     }), canShowSuggestions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [hasSuggestions && /* @__PURE__ */ jsxRuntime.jsx("div", {
         role: "presentation",
-        className: clsx.clsx(tagsInputClasses.default.inputExtension, classes == null ? void 0 : classes.inputExtension)
-      }), /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledSuggestions, {
+        className: classes.inputExtension
+      }), /* @__PURE__ */ jsxRuntime.jsx(Suggestions.HvSuggestions, {
         id: setId.setId(elementId, "suggestions"),
         classes: {
-          root: clsx.clsx(tagsInputClasses.default.suggestionsContainer, classes == null ? void 0 : classes.suggestionsContainer),
-          list: clsx.clsx(tagsInputClasses.default.suggestionList, classes == null ? void 0 : classes.suggestionList)
+          root: classes.suggestionsContainer,
+          list: classes.suggestionList
         },
         expanded: hasSuggestions,
         anchorEl: (_a = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a.parentElement,
@@ -369,13 +394,14 @@ const HvTagsInput = (props) => {
         onSuggestionSelected: suggestionSelectedHandler,
         suggestionValues
       })]
-    }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(TagsInput_styles.StyledError, {
+    }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
       id: setId.setId(elementId, "error"),
       disableBorder: true,
-      className: clsx.clsx(tagsInputClasses.default.error, classes == null ? void 0 : classes.error),
+      className: classes.error,
       children: validationMessage
     })]
   });
 };
+exports.tagsInputClasses = TagsInput_styles.staticClasses;
 exports.HvTagsInput = HvTagsInput;
 //# sourceMappingURL=TagsInput.cjs.map

package/dist/cjs/components/TagsInput/TagsInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.cjs","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { clsx } from \"clsx\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material\";\n\nimport { HvTagSuggestion, HvValidationMessages } from \"@core/types/forms\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useIsMounted } from \"@core/hooks/useIsMounted\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"@core/components/BaseInput/validations\";\nimport { HvTagProps } from \"@core/components/Tag\";\nimport { HvCharCounterProps, HvFormStatus } from \"@core/components/Forms\";\n\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 tagsInputClasses, { HvTagsInputClasses } from \"./tagsInputClasses\";\n\nexport interface HvTagsInputProps\n  extends HvBaseProps<\n    HTMLElement,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\" | \"defaultValue\"\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?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps[]\n  ) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\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?: React.ReactNode;\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?: (value: string) => HvTagSuggestion[] | null;\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 = (props: HvTagsInputProps) => {\n  const {\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  } = useDefaultProps(\"HvTagsInput\", props);\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<\n    HvTagSuggestion[] | null\n  >(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    [validationMessages]\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: HvTagProps = { 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 (isKey(event, \"Esc\")) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKey(event, \"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 &&\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","props","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","useDefaultProps","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","performValidation","useCallback","currValue","undefined","invalid","maxCharError","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","isKey","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","error","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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"}
+{"version":3,"file":"TagsInput.cjs","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvListContainer, HvListItem } from \"@core/components/ListContainer\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvTagSuggestion, HvValidationMessages } from \"@core/types/forms\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useIsMounted } from \"@core/hooks/useIsMounted\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"@core/components/BaseInput/validations\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport {\n  HvCharCounter,\n  HvCharCounterProps,\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestions,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./TagsInput.styles\";\n\nexport { staticClasses as tagsInputClasses };\n\nexport type HvTagsInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagsInputProps\n  extends HvBaseProps<\n    HTMLElement,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\" | \"defaultValue\"\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?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps[]\n  ) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\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?: React.ReactNode;\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?: (value: string) => HvTagSuggestion[] | null;\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 = (props: HvTagsInputProps) => {\n  const {\n    classes: classesProp,\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  } = useDefaultProps(\"HvTagsInput\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\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<\n    HvTagSuggestion[] | null\n  >(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    [validationMessages]\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: HvTagProps = { 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 (isKey(event, \"Esc\")) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKey(event, \"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    <HvFormElement\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={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.readOnly]: readOnly },\n        className\n      )}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              className={classes.label}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={textAreaLabel}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              className={classes.description}\n              id={setId(elementId, \"description\")}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      {hasCounter && (\n        <HvCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={classes.characterCounter}\n          separator={middleCountLabel}\n          currentCharQuantity={value.length}\n          maxCharQuantity={maxTagsQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <HvListContainer\n        className={cx(classes.tagsList, {\n          [classes.error]: canShowError,\n          [classes.resizable]: resizable && multiline,\n          [classes.invalid]: isStateInvalid,\n          [classes.singleLine]: !multiline,\n        })}\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              <HvListItem\n                key={`${tag.label}-${i}`}\n                tabIndex={-1}\n                className={cx({ [classes.singleLine]: !multiline })}\n                classes={{\n                  gutters: classes.listItemGutters,\n                  root: classes.listItemRoot,\n                }}\n                id={`tag-${i}`}\n              >\n                <HvTag\n                  label={label}\n                  className={cx({ [classes.tagSelected]: i === tagCursorPos })}\n                  classes={{\n                    chipRoot: classes.chipRoot,\n                  }}\n                  type={type}\n                  {...(!(readOnly || disabled || type === \"categorical\") && {\n                    onDelete: (event) => onDeleteTagHandler(event, i),\n                  })}\n                  deleteButtonProps={{\n                    tabIndex: -1,\n                  }}\n                  {...otherProps}\n                />\n              </HvListItem>\n            );\n          })}\n        {!(disabled || readOnly) && (\n          <HvListItem\n            className={cx(\n              {\n                [classes.singleLine]: !multiline,\n                [classes.tagInputRootEmpty]: value.length === 0,\n              },\n              !!isTagSelected &&\n                css({\n                  [`& .${baseInputClasses.inputRoot}`]: {\n                    backgroundColor: theme.colors.atmo1,\n                  },\n                })\n            )}\n            classes={{\n              root: classes.tagInputContainerRoot,\n              gutters: classes.listItemGutters,\n            }}\n            id={`tag-${value.length}`}\n          >\n            <HvInput\n              value={tagInput}\n              disableClear\n              onChange={onChangeHandler}\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              autoFocus={autoFocus}\n              className={cx({\n                [classes.singleLine]: !multiline,\n              })}\n              classes={{\n                root: classes.tagInputRoot,\n                input: classes.input,\n                inputBorderContainer: classes.tagInputBorderContainer,\n                inputRootFocused: classes.tagInputRootFocused,\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              {...others}\n            />\n          </HvListItem>\n        )}\n      </HvListContainer>\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div role=\"presentation\" className={classes.inputExtension} />\n          )}\n          <HvSuggestions\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: classes.suggestionsContainer,\n              list: classes.suggestionList,\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        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["HvTagsInput","props","classes","classesProp","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","useDefaultProps","cx","css","useClasses","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","performValidation","useCallback","currValue","undefined","invalid","maxCharError","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","isKey","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","_a","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","HvFormElement","root","labelContainer","_jsx","HvLabel","htmlFor","HvInfoMessage","HvCharCounter","characterCounter","separator","currentCharQuantity","maxCharQuantity","_jsxs","HvListContainer","tagsList","error","singleLine","onKeyDown","onClick","ref","map","t","otherProps","HvListItem","tabIndex","gutters","listItemGutters","listItemRoot","HvTag","tagSelected","chipRoot","deleteButtonProps","tagInputRootEmpty","baseInputClasses","inputRoot","backgroundColor","theme","colors","atmo1","tagInputContainerRoot","HvInput","disableClear","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","_Fragment","role","inputExtension","HvSuggestions","suggestionsContainer","list","suggestionList","expanded","anchorEl","parentElement","onClose","onSuggestionSelected","HvWarningText","disableBorder"],"mappings":"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"}