@hitachivantara/uikit-react-core 4.0.3 → 4.0.4

package/dist/modern/TagsInput/TagsInput.js

@@ -1,13 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["classes", "className", "id", "name", "value", "defaultValue", "readOnly", "disabled", "required", "label", "aria-label", "aria-labelledby", "description", "aria-describedby", "onChange", "onAdd", "onDelete", "onBlur", "onFocus", "placeholder", "hideCounter", "middleCountLabel", "maxTagsQuantity", "autoFocus", "resizable", "inputProps", "countCharProps", "multiline", "status", "statusMessage", "validationMessages", "commitTagOn", "commitOnBlur", "suggestionListCallback"],
-      _excluded2 = ["label", "type"];
-
+  _excluded2 = ["label", "type"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import "core-js/modules/web.dom-collections.iterator.js";
 import React, { useRef, useState, useCallback, useMemo, useEffect } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
@@ -18,55 +14,52 @@ import { HvFormElement, HvListContainer, HvListItem, HvTag, HvInput, HvLabel, Hv
 import validationStates from "../Forms/FormElement/validationStates";
 import { DEFAULT_ERROR_MESSAGES } from "../BaseInput/validations";
 import styles from "./styles";
+
 /**
  * A tags input is a single or multiline control that allows the input of tags.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-
 const HvTagsInput = props => {
   var _containerRef$current2;
-
   const {
-    classes,
-    className,
-    id,
-    name,
-    value: valueProp,
-    defaultValue = [],
-    readOnly = false,
-    disabled = false,
-    required = false,
-    label: textAreaLabel,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    description,
-    "aria-describedby": ariaDescribedBy,
-    onChange,
-    onAdd,
-    onDelete,
-    onBlur,
-    onFocus,
-    placeholder,
-    hideCounter = false,
-    middleCountLabel = "/",
-    maxTagsQuantity,
-    autoFocus = false,
-    resizable = true,
-    inputProps = {},
-    countCharProps = {},
-    multiline = false,
-    status,
-    statusMessage,
-    validationMessages,
-    commitTagOn = ["Enter"],
-    commitOnBlur = false,
-    suggestionListCallback
-  } = props,
-        others = _objectWithoutProperties(props, _excluded);
-
+      classes,
+      className,
+      id,
+      name,
+      value: valueProp,
+      defaultValue = [],
+      readOnly = false,
+      disabled = false,
+      required = false,
+      label: textAreaLabel,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      description,
+      "aria-describedby": ariaDescribedBy,
+      onChange,
+      onAdd,
+      onDelete,
+      onBlur,
+      onFocus,
+      placeholder,
+      hideCounter = false,
+      middleCountLabel = "/",
+      maxTagsQuantity,
+      autoFocus = false,
+      resizable = true,
+      inputProps = {},
+      countCharProps = {},
+      multiline = false,
+      status,
+      statusMessage,
+      validationMessages,
+      commitTagOn = ["Enter"],
+      commitOnBlur = false,
+      suggestionListCallback
+    } = props,
+    others = _objectWithoutProperties(props, _excluded);
   const elementId = useUniqueId(id, "hvTagsInput");
   const hasLabel = textAreaLabel != null;
   const hasDescription = description != null;
@@ -82,15 +75,17 @@ const HvTagsInput = props => {
   const blurTimeout = useRef();
   const materialInputRef = useRef(null);
   const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;
-  const hasCounter = maxTagsQuantity != null && !hideCounter; // suggestions related state
+  const hasCounter = maxTagsQuantity != null && !hideCounter;
 
+  // suggestions related state
   const [suggestionValues, setSuggestionValues] = useState(null);
   const isStateInvalid = useMemo(() => {
     return hasCounter && value.length > maxTagsQuantity;
   }, [hasCounter, maxTagsQuantity, value.length]);
   const canShowSuggestions = suggestionListCallback != null;
   const hasSuggestions = !!suggestionValues;
-  const errorMessages = useMemo(() => _objectSpread(_objectSpread({}, DEFAULT_ERROR_MESSAGES), validationMessages), // eslint-disable-next-line react-hooks/exhaustive-deps
+  const errorMessages = useMemo(() => _objectSpread(_objectSpread({}, DEFAULT_ERROR_MESSAGES), validationMessages),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   [validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.error, validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.requiredError, validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.minCharError, validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.maxCharError]);
   const performValidation = useCallback(currValue => {
     if (maxTagsQuantity !== null && currValue.length > maxTagsQuantity) {
@@ -103,6 +98,7 @@ const HvTagsInput = props => {
       setStateValid(true);
     }
   }, [errorMessages.maxCharError, maxTagsQuantity, setValidationMessage, setValidationState]);
+
   /**
    * Deletes a Tag from the array of tags and sets the new position for the tag cursor.
    * Also executes the user provided onDelete and onChange events.
@@ -111,13 +107,11 @@ const HvTagsInput = props => {
    * @param {Event}   event  - the event associated with the delete
    * @param {boolean} end    - whether or not to set the cursor at the end of the array
    */
-
   const deleteTag = useCallback((tagPos, event, end) => {
     var _inputRef$current;
-
     const newTagsArr = [...value.slice(0, tagPos), ...value.slice(tagPos + 1)];
-    setValue(newTagsArr); // eslint-disable-next-line no-nested-ternary
-
+    setValue(newTagsArr);
+    // eslint-disable-next-line no-nested-ternary
     setTagCursorPos(end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0);
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     performValidation(newTagsArr);
@@ -125,6 +119,7 @@ const HvTagsInput = props => {
     onChange === null || onChange === void 0 ? void 0 : onChange(event, newTagsArr);
     skipReset.current = true;
   }, [onChange, onDelete, performValidation, setValue, tagCursorPos, value]);
+
   /**
    * Adds a Tag to the array of tags.
    * Also executes the user provided onAdd and onDelete events.
@@ -132,10 +127,8 @@ const HvTagsInput = props => {
    * @param {Event}   event  - whatever event triggered adding a tag
    * @param {string}  tag    - the string for the tag
    */
-
   const addTag = useCallback((event, tag) => {
     event.preventDefault();
-
     if (tag !== "") {
       const newTag = {
         label: tag,
@@ -152,10 +145,9 @@ const HvTagsInput = props => {
   useEffect(() => {
     if (!multiline) {
       var _containerRef$current;
-
-      const element = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.children[tagCursorPos]; // this setTimeout is a workaround for Firefox not properly dealing
+      const element = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.children[tagCursorPos];
+      // this setTimeout is a workaround for Firefox not properly dealing
       // with setting the scrollLeft value.
-
       setTimeout(() => {
         const container = containerRef.current;
         if (isNil(container)) return;
@@ -169,65 +161,60 @@ const HvTagsInput = props => {
       setTagInput("");
       setTagCursorPos(value.length);
     }
-
     skipReset.current = false;
   }, [value]);
   const isMounted = useIsMounted();
+
   /**
    * Looks for the node that represent the input inside the material tree and focus it.
    */
-
   const focusInput = () => {
     materialInputRef.current.focus();
   };
-
   const getSuggestions = useCallback(li => {
     var _listEl$getElementsBy;
-
     // TODO Replace with ref
     const listEl = document.getElementById(setId(elementId, "suggestions-list"));
     return li != null ? listEl === null || listEl === void 0 ? void 0 : (_listEl$getElementsBy = listEl.getElementsByTagName("li")) === null || _listEl$getElementsBy === void 0 ? void 0 : _listEl$getElementsBy[li] : listEl;
   }, [elementId]);
+
   /**
    * Clears the suggestion array.
    */
-
   const suggestionClearHandler = useCallback(() => {
     if (isMounted.current) {
       setSuggestionValues(null);
     }
   }, [isMounted]);
+
   /**
    * Fills of the suggestion array.
    */
-
   const suggestionHandler = useCallback(val => {
     var _suggestionsArray$;
-
     const suggestionsArray = suggestionListCallback === null || suggestionListCallback === void 0 ? void 0 : suggestionListCallback(val);
-
     if (suggestionsArray !== null && suggestionsArray !== void 0 && (_suggestionsArray$ = suggestionsArray[0]) !== null && _suggestionsArray$ !== void 0 && _suggestionsArray$.label) {
       setSuggestionValues(suggestionsArray);
     } else {
       suggestionClearHandler();
     }
   }, [suggestionClearHandler, suggestionListCallback]);
+
   /**
    * Executes the user callback adds the selection to the state and clears the suggestions.
    */
-
   const suggestionSelectedHandler = (event, item) => {
-    addTag(event, item.value || item.label); // set the input value (only when value is uncontrolled)
+    addTag(event, item.value || item.label);
 
+    // set the input value (only when value is uncontrolled)
     setTagInput(item.value || item.label);
     focusInput();
     suggestionClearHandler();
   };
+
   /**
    * Handler for the `onKeyDown` event on the suggestions component
    */
-
-
   const onSuggestionKeyDown = event => {
     if (isKeypress(event, KeyboardCodes.Esc)) {
       suggestionClearHandler();
@@ -236,14 +223,12 @@ const HvTagsInput = props => {
       suggestionClearHandler();
     }
   };
+
   /**
    * Handler for the `onChange` event on the tag input
    */
-
-
   const onChangeHandler = useCallback((event, input) => {
     setTagInput(input);
-
     if (canShowSuggestions) {
       // an edge case might be a controlled input whose onChange callback
       // doesn't change the value (or sets another): the suggestionListCallback
@@ -254,48 +239,41 @@ const HvTagsInput = props => {
       suggestionHandler(input);
     }
   }, [canShowSuggestions, suggestionHandler]);
+
   /**
    * Handler for the `onKeyDown` event on the form element
    */
-
   const onInputKeyDownHandler = useCallback(event => {
     if (!canShowSuggestions && commitTagOn.includes(event.code)) {
       addTag(event, tagInput);
     }
   }, [addTag, canShowSuggestions, commitTagOn, tagInput]);
+
   /**
    * Handler for the `onKeyDown` event on the list container.
    */
-
   const onKeyDownHandler = useCallback(event => {
     var _getSuggestions;
-
     if (tagInput === "") {
       switch (event.code) {
         case "ArrowLeft":
           setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);
           break;
-
         case "ArrowRight":
           setTagCursorPos(tagCursorPos < value.length ? tagCursorPos + 1 : value.length);
           break;
-
         case "Backspace":
           if (isTagSelected) {
             deleteTag(tagCursorPos, event, false);
           } else {
             setTagCursorPos(value.length - 1);
           }
-
           break;
-
         case "Delete":
           if (isTagSelected) {
             deleteTag(tagCursorPos, event, false);
           }
-
           break;
-
         default:
           break;
       }
@@ -304,47 +282,41 @@ const HvTagsInput = props => {
         case "ArrowDown":
           (_getSuggestions = getSuggestions(0)) === null || _getSuggestions === void 0 ? void 0 : _getSuggestions.focus();
           break;
-
         default:
           break;
       }
     }
   }, [deleteTag, getSuggestions, isTagSelected, tagCursorPos, tagInput, value.length]);
+
   /**
    * Handler for the `onDelete` event on the tag component
    */
-
   const onDeleteTagHandler = useCallback((event, i) => {
     deleteTag(i, event, true);
     setValidationState(validationStates.standBy);
   }, [deleteTag, setValidationState]);
+
   /**
    * Handler for the `onClick` event on the list container
    */
-
   const onContainerClickHandler = useCallback(() => {
     var _inputRef$current2;
-
     (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
     clearTimeout(blurTimeout.current);
     setTagCursorPos(value.length);
   }, [value.length]);
-
   const onBlurHandler = evt => {
     blurTimeout.current = setTimeout(() => {
       if (commitOnBlur) {
         addTag(evt, tagInput);
       }
-
       onBlur === null || onBlur === void 0 ? void 0 : onBlur(evt, tagInput);
     }, 250);
   };
-
   const onFocusHandler = evt => {
     clearTimeout(blurTimeout.current);
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(evt, tagInput);
   };
-
   return /*#__PURE__*/_jsxs(HvFormElement, {
     id: id,
     name: name,
@@ -383,14 +355,13 @@ const HvTagsInput = props => {
           label: t,
           type: "semantic"
         } : t;
-
         const {
-          label,
-          type
-        } = tag,
-              otherProps = _objectWithoutProperties(tag, _excluded2);
-
-        return /*#__PURE__*/_jsx(HvListItem // eslint-disable-next-line react/no-array-index-key
+            label,
+            type
+          } = tag,
+          otherProps = _objectWithoutProperties(tag, _excluded2);
+        return /*#__PURE__*/_jsx(HvListItem
+        // eslint-disable-next-line react/no-array-index-key
         , {
           tabIndex: -1,
           className: clsx(!multiline && classes.singleLine),
@@ -471,13 +442,11 @@ const HvTagsInput = props => {
     })]
   });
 };
-
 process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
   /**
    * Class names to be applied.
    */
   className: PropTypes.string,
-
   /**
    * A Jss Object used to override or extend the component styles applied.
    */
@@ -486,138 +455,111 @@ process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
      * Styles applied to the input element.
      */
     input: PropTypes.string,
-
     /**
      * Styles applied to the list item gutters.
      */
     listItemGutters: PropTypes.string,
-
     /**
      * Styles applied to the list item element.
      */
     listItemRoot: PropTypes.string,
-
     /**
      * Styles applied to the root container of the textarea.
      */
     root: PropTypes.string,
-
     /**
      *
      */
     chipRoot: PropTypes.string,
-
     /**
      * Style applied to the root when resizable is `true`.
      */
     disabled: PropTypes.string,
-
     /**
      * Style applied to the root when resizable is `true`.
      */
     resizable: PropTypes.string,
-
     /**
      * Style applied to the root when invalid.
      */
     invalid: PropTypes.string,
-
     /**
      * Styles applied to text area container that holds the label, description and counter.
      */
     labelContainer: PropTypes.string,
-
     /**
      * Styles applied to the label element.
      */
     label: PropTypes.string,
-
     /**
      * Styles applied to the label element.
      */
     description: PropTypes.string,
-
     /**
      * Style applied on the character counter.
      */
     characterCounter: PropTypes.string,
-
     /**
      * Styles applied to the tags list container element.
      */
     tagsList: PropTypes.string,
-
     /**
      * Styles applied to the tag input container element.
      */
     tagInputContainerRoot: PropTypes.string,
-
     /**
      * Styles applied to the tag input element.
      */
     tagInputRoot: PropTypes.string,
-
     /**
      * Styles applied to a tag element when selected
      */
     tagSelected: PropTypes.string,
-
     /**
      * Styles applied to the input element border.
      */
     tagInputBorderContainer: PropTypes.string,
-
     /**
      * Styles applied to the input element when focused.
      */
     tagInputRootFocused: PropTypes.string,
-
     /**
      * Styles applied to the container when in single line mode.
      */
     singleLine: PropTypes.string,
-
     /**
      * Styles applied to the tags list when an error occurred.
      */
     error: PropTypes.string,
-
     /**
      * Styles applied to the input extension shown when the suggestions list is visible.
      */
     inputExtension: PropTypes.string,
-
     /**
      * Styles applied to the container of the suggestions list.
      */
     suggestionsContainer: PropTypes.string,
-
     /**
      * Styles applied to the suggestions list.
      */
     suggestionList: PropTypes.string
   }).isRequired,
-
   /**
    * Id to be applied to the form element root node.
    */
   id: PropTypes.string,
-
   /**
    * The form element name.
    */
   name: PropTypes.string,
-
   /**
    * The value of the form element.
    */
   value: PropTypes.array,
-
   /**
    * When uncontrolled, defines the initial input value.
    */
   defaultValue: PropTypes.array,
-
   /**
    * The label of the form element.
    *
@@ -625,123 +567,99 @@ process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
    * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.
    */
   label: PropTypes.node,
-
   /**
    * @ignore
    */
   "aria-label": PropTypes.string,
-
   /**
    * @ignore
    */
   "aria-labelledby": PropTypes.string,
-
   /**
    * Provide additional descriptive text for the form element.
    */
   description: PropTypes.node,
-
   /**
    * @ignore
    */
   "aria-describedby": PropTypes.string,
-
   /**
    * Indicates that the form element is disabled.
    */
   disabled: PropTypes.bool,
-
   /**
    * Indicates that the form element is not editable.
    */
   readOnly: PropTypes.bool,
-
   /**
    * Indicates that the form element is required.
    */
   required: PropTypes.bool,
-
   /**
    * The function that will be executed onChange.
    */
   onChange: PropTypes.func,
-
   /**
    * The function that will be executed when the element is focused.
    */
   onFocus: PropTypes.func,
-
   /**
    * The function that will be executed when the element is blurred.
    */
   onBlur: PropTypes.func,
-
   /**
    * The function that will be executed when a tag is deleted.
    */
   onDelete: PropTypes.func,
-
   /**
    * The function that will be executed when a tag is added.
    */
   onAdd: PropTypes.func,
-
   /**
    * The placeholder value of the input.
    */
   placeholder: PropTypes.string,
-
   /**
    * If `true` the character counter isn't shown even if maxTagsQuantity is set.
    */
   hideCounter: PropTypes.bool,
-
   /**
    * Text between the current char counter and max value.
    */
   middleCountLabel: PropTypes.string,
-
   /**
    * The maximum allowed length of the characters, if this value is null no check
    * will be performed.
    */
   maxTagsQuantity: PropTypes.number,
-
   /**
    * Attributes applied to the input element.
    */
   inputProps: PropTypes.instanceOf(Object),
-
   /**
    * If `true` it should autofocus.
    */
   autoFocus: PropTypes.bool,
-
   /**
    * If `true` the component is resizable.
    */
   resizable: PropTypes.bool,
-
   /**
    * Props passed to the HvCharCount component.
    */
   countCharProps: PropTypes.instanceOf(Object),
-
   /**
    * If `true` the component is in multiline mode.
    */
   multiline: PropTypes.bool,
-
   /**
    * The status of the form element.
    */
   status: PropTypes.string,
-
   /**
    * The error message to show when `status` is "invalid".
    */
   statusMessage: PropTypes.string,
-
   /**
    * An Object containing the various texts associated with the input.
    */
@@ -750,34 +668,28 @@ process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
      * The value when a validation fails.
      */
     error: PropTypes.string,
-
     /**
      * The message that appears when there are too many characters.
      */
     maxCharError: PropTypes.string,
-
     /**
      * The message that appears when there are too few characters.
      */
     minCharError: PropTypes.string,
-
     /**
      * The message that appears when the input is empty and required.
      */
     requiredError: PropTypes.string
   }),
-
   /**
    * 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.
    */
   commitTagOn: PropTypes.arrayOf(PropTypes.string),
-
   /**
    * If `true` the tag will be commited when the blur event occurs.
    */
   commitOnBlur: PropTypes.bool,
-
   /**
    * The function that will be executed to received an array of objects that has a label and id to create list of suggestion
    */