@hitachivantara/uikit-react-core 5.87.3 → 5.88.0

package/dist/cjs/TagsInput/TagsInput.cjs

@@ -4,10 +4,10 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const utils = require("@mui/material/utils");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const validations = require("../BaseInput/validations.cjs");
 const Suggestions = require("../FormElement/Suggestions/Suggestions.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
+const useFocus = require("../hooks/useFocus.cjs");
 const useIsMounted = require("../hooks/useIsMounted.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
@@ -18,11 +18,7 @@ const utils$1 = require("../FormElement/utils.cjs");
 const FormElement = require("../FormElement/FormElement.cjs");
 const Label = require("../FormElement/Label/Label.cjs");
 const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
-const ListContainer = require("../ListContainer/ListContainer.cjs");
-const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
 const Tag = require("../Tag/Tag.cjs");
-const BaseInput_styles = require("../BaseInput/BaseInput.styles.cjs");
-const Input = require("../Input/Input.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const HvTagsInput = React.forwardRef(
   function HvTagsInput2(props, ref) {
@@ -47,10 +43,11 @@ const HvTagsInput = React.forwardRef(
       onBlur,
       onFocus,
       placeholder,
+      endAdornment,
       hideCounter,
       middleCountLabel = "/",
       maxTagsQuantity,
-      resizable = true,
+      resizable,
       inputProps,
       countCharProps,
       multiline,
@@ -64,7 +61,7 @@ const HvTagsInput = React.forwardRef(
       suggestionsLoose,
       ...others
     } = uikitReactUtils.useDefaultProps("HvTagsInput", props);
-    const { classes, cx, css } = TagsInput_styles.useClasses(classesProp);
+    const { classes, cx } = TagsInput_styles.useClasses(classesProp);
     const elementId = useUniqueId.useUniqueId(id);
     const hasLabel = textAreaLabel != null;
     const hasDescription = description != null;
@@ -77,16 +74,13 @@ const HvTagsInput = React.forwardRef(
       statusMessage,
       ""
     );
-    const [tagInput, setTagInput] = React.useState("");
-    const [tagCursorPos, setTagCursorPos] = React.useState(value.length);
     const [stateValid, setStateValid] = React.useState(true);
-    const inputRef = React.useRef();
-    const containerRef = React.useRef();
+    const inputRef = React.useRef(null);
+    const containerRef = React.useRef(null);
     const skipReset = React.useRef(false);
     const blurTimeout = React.useRef();
-    const materialInputRef = React.useRef(null);
+    const focusUtils = useFocus.useFocus({ containerRef });
     const forkedContainerRef = utils.useForkRef(ref, containerRef);
-    const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;
     const hasCounter = maxTagsQuantity != null && !hideCounter;
     const [suggestionValues, setSuggestionValues] = React.useState(null);
     const isStateInvalid = React.useMemo(() => {
@@ -118,59 +112,46 @@ const HvTagsInput = React.forwardRef(
       ]
     );
     const deleteTag = React.useCallback(
-      (tagPos, event, end) => {
+      (tagPos, event, refocus = false) => {
         const newTagsArr = [
           ...value.slice(0, tagPos),
           ...value.slice(tagPos + 1)
         ];
         setValue(newTagsArr);
-        setTagCursorPos(
-          end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0
-        );
-        inputRef.current?.focus();
+        if (refocus) {
+          setTimeout(() => focusUtils.focusChild(tagPos), 10);
+        }
         performValidation(newTagsArr);
         onDelete?.(event, value[tagPos], tagPos);
         onChange?.(event, newTagsArr);
         skipReset.current = true;
       },
-      [onChange, onDelete, performValidation, setValue, tagCursorPos, value]
+      [focusUtils, onChange, onDelete, performValidation, setValue, value]
     );
     const addTag = React.useCallback(
-      (event, tag) => {
+      (event, tagInput) => {
         event.preventDefault();
-        if (tag !== "") {
-          const newTag = { label: tag, type: "semantic" };
-          const newTagsArr = [...value, newTag];
-          setValue(newTagsArr);
-          performValidation(newTagsArr);
-          onAdd?.(event, newTag, newTagsArr.length - 1);
-          onChange?.(event, newTagsArr);
-        }
+        const tag = tagInput ?? inputRef.current?.value ?? "";
+        if (tag === "") return;
+        const newTag = { label: tag, type: "semantic" };
+        const newTagsArr = [...value, newTag];
+        setValue(newTagsArr);
+        performValidation(newTagsArr);
+        onAdd?.(event, newTag, newTagsArr.length - 1);
+        onChange?.(event, newTagsArr);
+        inputRef.current.value = "";
       },
       [onAdd, onChange, performValidation, setValue, value]
     );
     const canShowError = status !== void 0 && status === "invalid" && statusMessage !== void 0 || !stateValid;
     React.useEffect(() => {
-      if (!multiline) {
-        const element = containerRef?.current?.children[tagCursorPos];
-        setTimeout(() => {
-          const container = containerRef.current;
-          if (container == null) return;
-          container.scrollLeft = element ? element.offsetLeft - container.getBoundingClientRect().width / 2 + element.getBoundingClientRect().width / 2 : 0;
-        }, 10);
-        element?.focus();
-      }
-    }, [multiline, tagCursorPos]);
-    React.useEffect(() => {
-      if (!skipReset.current) {
-        setTagInput("");
-        setTagCursorPos(value.length);
-      }
+      if (skipReset.current || !inputRef.current) return;
+      inputRef.current.value = "";
       skipReset.current = false;
     }, [value]);
     const isMounted = useIsMounted.useIsMounted();
     const focusInput = () => {
-      materialInputRef.current.focus();
+      inputRef.current?.focus();
     };
     const getSuggestions = React.useCallback(
       (li) => {
@@ -198,8 +179,7 @@ const HvTagsInput = React.forwardRef(
       [suggestionClearHandler, suggestionListCallback]
     );
     const suggestionSelectedHandler = (event, item) => {
-      addTag(event, item.value || item.label);
-      setTagInput(item.value || item.label);
+      addTag(event, item.value || String(item.label));
       focusInput();
       suggestionClearHandler();
     };
@@ -212,10 +192,9 @@ const HvTagsInput = React.forwardRef(
       }
     };
     const onChangeHandler = React.useCallback(
-      (event, input) => {
-        setTagInput(input);
+      (event) => {
         if (canShowSuggestions) {
-          suggestionHandler(input);
+          suggestionHandler(event.target.value);
         }
       },
       [canShowSuggestions, suggestionHandler]
@@ -223,63 +202,63 @@ const HvTagsInput = React.forwardRef(
     const onInputKeyDownHandler = React.useCallback(
       (event) => {
         if (!canShowSuggestions && commitTagOn.includes(event.code)) {
-          addTag(event, tagInput);
+          addTag(event);
         }
       },
-      [addTag, canShowSuggestions, commitTagOn, tagInput]
+      [addTag, canShowSuggestions, commitTagOn]
     );
     const onKeyDownHandler = React.useCallback(
       (event) => {
+        const tagInput = inputRef.current?.value || "";
         if (tagInput === "") {
           switch (event.code) {
             case "ArrowLeft":
-              setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);
-              break;
+              focusUtils.focusPrevious();
+              return;
             case "ArrowRight":
-              setTagCursorPos(
-                tagCursorPos < value.length ? tagCursorPos + 1 : value.length
-              );
-              break;
+              focusUtils.focusNext();
+              return;
+            case "End":
+              focusUtils.focusLast();
+              return;
+            case "Home":
+              focusUtils.focusFirst();
+              return;
             case "Backspace":
-              if (isTagSelected) {
-                deleteTag(tagCursorPos, event, false);
-              } else {
-                setTagCursorPos(value.length - 1);
-              }
-              break;
-            case "Delete":
-              if (isTagSelected) {
-                deleteTag(tagCursorPos, event, false);
+            case "Delete": {
+              if (document.activeElement === inputRef.current) {
+                deleteTag(value.length - 1, event);
               }
-              break;
-          }
-        } else {
-          switch (event.code) {
-            case "ArrowDown":
-              getSuggestions(0)?.focus();
-              break;
-            case "Enter":
-              if (canShowSuggestions && suggestionsLoose && (suggestionValidation?.(tagInput) || !suggestionValidation)) {
-                addTag(event, tagInput);
-                setTagInput(tagInput);
-                focusInput();
-                suggestionClearHandler();
-              }
-              break;
+              return;
+            }
+            default:
+              return;
           }
         }
+        switch (event.code) {
+          case "ArrowDown":
+            getSuggestions(0)?.focus();
+            return;
+          case "Enter":
+            if (canShowSuggestions && suggestionsLoose && (suggestionValidation?.(tagInput) || !suggestionValidation)) {
+              addTag(event);
+              focusInput();
+              suggestionClearHandler();
+            }
+            return;
+          default:
+            return;
+        }
       },
       [
         addTag,
         canShowSuggestions,
         deleteTag,
+        focusUtils,
         getSuggestions,
-        isTagSelected,
         suggestionClearHandler,
         suggestionValidation,
         suggestionsLoose,
-        tagCursorPos,
-        tagInput,
         value.length
       ]
     );
@@ -293,19 +272,18 @@ const HvTagsInput = React.forwardRef(
     const onContainerClickHandler = React.useCallback(() => {
       inputRef.current?.focus();
       clearTimeout(blurTimeout.current);
-      setTagCursorPos(value.length);
-    }, [value.length]);
+    }, []);
     const onBlurHandler = (evt) => {
       blurTimeout.current = setTimeout(() => {
         if (commitOnBlur) {
-          addTag(evt, tagInput);
+          addTag(evt);
         }
-        onBlur?.(evt, tagInput);
+        onBlur?.(evt, inputRef.current?.value || "");
       }, 10);
     };
     const onFocusHandler = (evt) => {
       clearTimeout(blurTimeout.current);
-      onFocus?.(evt, tagInput);
+      onFocus?.(evt, inputRef.current?.value || "");
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(
       FormElement.HvFormElement,
@@ -320,7 +298,10 @@ const HvTagsInput = React.forwardRef(
         onFocus: onFocusHandler,
         className: cx(
           classes.root,
-          { [classes.disabled]: disabled, [classes.readOnly]: readOnly },
+          {
+            [classes.disabled]: disabled,
+            [classes.readOnly]: readOnly
+          },
           className
         ),
         children: [
@@ -356,8 +337,9 @@ const HvTagsInput = React.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(
-            ListContainer.HvListContainer,
+            "div",
             {
+              ref: forkedContainerRef,
               className: cx(classes.tagsList, {
                 [classes.error]: canShowError,
                 [classes.resizable]: resizable && multiline,
@@ -366,96 +348,48 @@ const HvTagsInput = React.forwardRef(
               }),
               onKeyDown: onKeyDownHandler,
               onClick: onContainerClickHandler,
-              ref: forkedContainerRef,
               children: [
                 value?.map((t, i) => {
-                  const tag = typeof t === "string" ? {
-                    label: t,
-                    type: "semantic"
-                  } : t;
+                  const tag = typeof t === "string" ? { label: t, type: "semantic" } : t;
                   const { label, type, ...otherProps } = tag;
                   return /* @__PURE__ */ jsxRuntime.jsx(
-                    ListItem.HvListItem,
+                    Tag.HvTag,
                     {
+                      type,
+                      label,
+                      disabled,
                       tabIndex: -1,
-                      className: cx({ [classes.singleLine]: !multiline }),
-                      classes: {
-                        gutters: classes.listItemGutters,
-                        root: classes.listItemRoot
+                      className: cx(classes.chipRoot, classes.listItemRoot),
+                      ...!(readOnly || disabled || type === "categorical") && {
+                        onDelete: (event) => onDeleteTagHandler(event, i)
                       },
-                      id: setId.setId(elementId, `tag-${i}`),
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        Tag.HvTag,
-                        {
-                          label,
-                          className: cx(classes.chipRoot, {
-                            [classes.tagSelected]: i === tagCursorPos
-                          }),
-                          type,
-                          ...!(readOnly || disabled || type === "categorical") && {
-                            onDelete: (event) => onDeleteTagHandler(event, i)
-                          },
-                          deleteButtonProps: {
-                            tabIndex: -1
-                          },
-                          ...otherProps
-                        }
-                      )
+                      ...otherProps
                     },
-                    `${tag.label}-${i}`
+                    `${label}-${i}`
                   );
                 }),
-                !(disabled || readOnly) && /* @__PURE__ */ jsxRuntime.jsx(
-                  ListItem.HvListItem,
+                !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
                   {
+                    id: setId.setId(elementId, "input"),
+                    onChange: onChangeHandler,
+                    autoComplete: "off",
+                    onKeyDown: onInputKeyDownHandler,
+                    placeholder: value.length === 0 ? placeholder : "",
                     className: cx(
-                      {
-                        [classes.singleLine]: !multiline,
-                        [classes.tagInputRootEmpty]: value.length === 0
-                      },
-                      !!isTagSelected && css({
-                        [`& .${BaseInput_styles.staticClasses.inputRoot}`]: {
-                          backgroundColor: uikitStyles.theme.colors.atmo1
-                        }
-                      })
+                      classes.tagInputContainerRoot,
+                      classes.tagInputRoot,
+                      classes.input
                     ),
-                    classes: {
-                      root: classes.tagInputContainerRoot,
-                      gutters: classes.listItemGutters
-                    },
-                    id: setId.setId(elementId, `tag-${value.length}`),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      Input.HvInput,
-                      {
-                        value: tagInput,
-                        disableClear: true,
-                        onChange: onChangeHandler,
-                        onKeyDown: onInputKeyDownHandler,
-                        placeholder: value.length === 0 ? placeholder : "",
-                        className: cx({
-                          [classes.singleLine]: !multiline
-                        }),
-                        classes: {
-                          root: classes.tagInputRoot,
-                          input: classes.input,
-                          inputBorderContainer: classes.tagInputBorderContainer,
-                          inputRootFocused: classes.tagInputRootFocused
-                        },
-                        disabled,
-                        readOnly: readOnly || isTagSelected,
-                        inputProps: {
-                          ref: materialInputRef,
-                          "aria-label": ariaLabel,
-                          "aria-labelledby": ariaLabelledBy,
-                          "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId.setId(elementId, "description") || void 0,
-                          ...inputProps
-                        },
-                        ref: inputRef,
-                        ...others
-                      }
-                    )
+                    ref: inputRef,
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
+                    "aria-describedby": ariaDescribedBy ?? (description ? setId.setId(elementId, "description") : void 0),
+                    ...inputProps,
+                    ...others
                   }
-                )
+                ),
+                !disabled && !readOnly && endAdornment
               ]
             }
           ),
@@ -469,8 +403,8 @@ const HvTagsInput = React.forwardRef(
                   root: classes.suggestionsContainer,
                   list: classes.suggestionList
                 },
-                expanded: hasSuggestions,
-                anchorEl: containerRef?.current?.parentElement,
+                open: hasSuggestions,
+                anchorEl: containerRef?.current,
                 onClose: suggestionClearHandler,
                 onKeyDown: onSuggestionKeyDown,
                 onSuggestionSelected: suggestionSelectedHandler,

package/dist/cjs/TagsInput/TagsInput.styles.cjs

@@ -2,46 +2,30 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const BaseInput_styles = require("../BaseInput/BaseInput.styles.cjs");
-require("../BaseInput/BaseInput.cjs");
-const Suggestions_styles = require("../FormElement/Suggestions/Suggestions.styles.cjs");
+const focusUtils = require("../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput", {
-  input: {
-    width: "100%",
-    ...uikitStyles.theme.typography.caption1
-  },
-  listItemGutters: { padding: "0 5px" },
-  listItemRoot: {
-    marginBottom: 2,
-    height: 24,
-    lineHeight: "24px",
-    "&:not(:last-child)": {
-      marginBottom: 2
-    },
-    "&$singleLine": {
-      display: "table-cell",
-      paddingTop: "2px"
-    }
-  },
+  /** @deprecated unused */
+  listItemGutters: {},
+  /** @deprecated use `chipRoot` */
+  listItemRoot: {},
   root: { display: "inline-block", width: "100%" },
+  // TODO: consider renaming this
   chipRoot: {
     maxWidth: "none"
   },
   disabled: {
     "& $tagsList": {
       backgroundColor: uikitStyles.theme.colors.atmo2,
-      border: `1px solid ${uikitStyles.theme.colors.atmo4}`,
-      "&:focus-within, &:hover": {
-        border: `1px solid ${uikitStyles.theme.colors.atmo4}`
+      "&,:hover": {
+        borderColor: uikitStyles.theme.colors.atmo4
       }
     }
   },
   readOnly: {
     "& $tagsList": {
       backgroundColor: uikitStyles.theme.colors.atmo2,
-      border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
-      "&:hover": {
-        border: `1px solid ${uikitStyles.theme.colors.secondary_60}`
+      "&,:hover": {
+        borderColor: uikitStyles.theme.colors.secondary_60
       }
     }
   },
@@ -58,112 +42,67 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
   },
   tagsList: {
     display: "flex",
+    alignItems: "center",
     alignContent: "flex-start",
-    float: "left",
-    clear: "both",
+    gap: uikitStyles.theme.spacing("xxs", "xs"),
+    cursor: "text",
     width: "100%",
-    maxWidth: "100%",
-    height: "32px",
-    padding: 5,
+    minHeight: 32,
+    padding: uikitStyles.theme.spacing("xxs", "xs"),
     overflow: "auto",
     position: "relative",
     flexDirection: "row",
     flexWrap: "wrap",
     backgroundColor: uikitStyles.theme.colors.atmo1,
-    border: `1px solid ${uikitStyles.theme.colors.secondary_80}`,
+    borderWidth: 1,
+    borderColor: uikitStyles.theme.colors.secondary_80,
     borderRadius: uikitStyles.theme.radii.base,
     "&:hover": {
-      cursor: "text",
-      border: `1px solid ${uikitStyles.theme.colors.primary}`
-    },
-    [`& .${BaseInput_styles.staticClasses.inputRoot}`]: {
-      border: "none"
+      borderColor: uikitStyles.theme.colors.primary
     },
-    "&:focus, &:focus-within, &:focus-visible": {
-      outlineColor: "#52A8EC",
-      outlineStyle: "solid",
-      outlineWidth: "0px",
-      outlineOffset: "-1px",
-      boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
+    "&:focus-within, &:focus-visible": {
+      ...focusUtils.outlineStyles
     },
     "&$singleLine": {
-      overflowX: "hidden",
-      overflowY: "hidden",
-      height: 32,
-      display: "table-row",
-      paddingTop: 0
+      flexWrap: "nowrap"
     },
     "&$error": {
-      border: `1px solid ${uikitStyles.theme.colors.negative_120}`
+      borderColor: uikitStyles.theme.colors.negative_120
     },
     "&$invalid": {
-      border: `1px solid ${uikitStyles.theme.colors.negative_120}`
+      borderColor: uikitStyles.theme.colors.negative_120
     }
   },
-  tagInputContainerRoot: {
+  /** @deprecated use `classes.input` instead */
+  tagInputContainerRoot: {},
+  /** @deprecated use `classes.input` instead */
+  tagInputRoot: {},
+  input: {
     display: "flex",
-    flexGrow: 1,
-    height: 24,
-    lineHeight: "24px",
-    "&$singleLine": {
-      display: "table-cell",
-      minWidth: 60,
-      width: "100%",
-      paddingTop: "3px",
-      verticalAlign: "middle"
-    }
-  },
-  tagInputRoot: {
-    [`& .${BaseInput_styles.staticClasses.root}`]: {
-      width: "100%",
-      border: "none"
-    },
-    [`&& .${BaseInput_styles.staticClasses.inputRoot}`]: {
-      marginLeft: 0,
-      marginRight: 0,
-      flex: "1 1 auto",
-      height: 24,
-      lineHeight: "24px",
-      padding: 0,
-      border: "none"
-    },
-    [`& .${BaseInput_styles.staticClasses.inputRootFocused}`]: {
-      outline: "none",
-      boxShadow: "none"
-    },
-    [`& .${BaseInput_styles.staticClasses.root} .${BaseInput_styles.staticClasses.inputRootReadOnly}`]: {
-      backgroundColor: "transparent",
-      border: "none",
-      "&:hover": {
-        border: "none"
-      }
-    },
-    [`&& .${BaseInput_styles.staticClasses.input}`]: {
-      marginLeft: 0
-    }
-  },
-  tagSelected: {
-    outlineColor: "#52A8EC",
-    outlineStyle: "solid",
-    outlineWidth: "0px",
-    outlineOffset: "-1px",
-    boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
+    flex: "1 0 auto",
+    height: "auto",
+    width: 0,
+    minWidth: 60,
+    border: "none",
+    margin: 0,
+    padding: 0,
+    ...uikitStyles.theme.typography.caption1,
+    backgroundColor: "transparent",
+    outline: "none",
+    boxShadow: "none"
   },
+  /** @deprecated unused.  use `:focus` or `:focus-visible` instead */
+  tagSelected: {},
   /** @deprecated unused. use `::after` instead */
   tagInputBorderContainer: {},
+  /** @deprecated unused. use `:focus` or `:focus-visible` instead */
   tagInputRootFocused: {},
+  /** @deprecated unused */
   tagInputRootEmpty: {},
   singleLine: {},
   error: { float: "left" },
   inputExtension: {},
-  suggestionsContainer: {
-    width: "100%",
-    position: "relative",
-    top: 59,
-    [`& .${Suggestions_styles.staticClasses.root} .${Suggestions_styles.staticClasses.list} &`]: {
-      width: "100%"
-    }
-  },
+  suggestionsContainer: {},
   suggestionList: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/TextArea/TextArea.cjs

@@ -83,7 +83,6 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   const performValidation = React.useCallback(() => {
     const inputValidity = validations.validateInput(
       inputRef.current,
-      String(value),
       required,
       minCharQuantity,
       maxCharQuantity,
@@ -104,8 +103,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
     required,
     setValidationMessage,
     setValidationState,
-    validation,
-    value
+    validation
   ]);
   const limitValue = (currentValue) => {
     if (currentValue === void 0 || !blockMax) return currentValue;