@hitachivantara/uikit-react-core 5.87.2 → 5.88.0

package/dist/cjs/Table/TableBody/TableBody.cjs

@@ -10,7 +10,7 @@ const TableBody_styles = require("./TableBody.styles.cjs");
 const Focus = require("../../Focus/Focus.cjs");
 const tableSectionContext = {
   type: "body",
-  filterClassName: "_grid"
+  filterClassName: "_trgrid"
 };
 const defaultComponent = "tbody";
 const HvTableBody = React.forwardRef(
@@ -36,22 +36,21 @@ const HvTableBody = React.forwardRef(
         role: Component === defaultComponent ? null : "rowgroup",
         ...others,
         children: withNavigation ? React.Children.map(children, (element) => {
-          if (React.isValidElement(element)) {
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              Focus.HvFocus,
-              {
-                id: `my-id-${element.key}`,
-                rootRef: bodyRef,
-                strategy: "grid",
-                filterClass: tableSectionContext.filterClassName,
-                navigationJump: 1,
-                focusDisabled: false,
-                selected: element.props.selected,
-                children: element
-              },
-              `row-${element.key}`
-            );
-          }
+          if (!React.isValidElement(element)) return void 0;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Focus.HvFocus,
+            {
+              id: `my-id-${element.key}`,
+              rootRef: bodyRef,
+              strategy: "grid",
+              filterClass: tableSectionContext.filterClassName,
+              navigationJump: 1,
+              focusDisabled: false,
+              selected: element.props.selected,
+              children: element
+            },
+            `row-${element.key}`
+          );
         }) : children
       }
     ) });

package/dist/cjs/TableSection/TableSection.styles.cjs

@@ -2,18 +2,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const TableContainer_styles = require("../Table/TableContainer/TableContainer.styles.cjs");
-require("../Table/TableContainer/TableContainer.cjs");
-const TableHeader_styles = require("../Table/TableHeader/TableHeader.styles.cjs");
-require("../Table/TableHeader/TableHeader.cjs");
-const TableRow_styles = require("../Table/TableRow/TableRow.styles.cjs");
-require("../Table/TableRow/TableRow.cjs");
-const TableCell_styles = require("../Table/TableCell/TableCell.styles.cjs");
-require("../Table/TableCell/TableCell.cjs");
-const BulkActions_styles = require("../BulkActions/BulkActions.styles.cjs");
-require("../BulkActions/BulkActions.cjs");
 const Pagination_styles = require("../Pagination/Pagination.styles.cjs");
 require("../Pagination/Pagination.cjs");
+const BulkActions_styles = require("../BulkActions/BulkActions.styles.cjs");
+require("../BulkActions/BulkActions.cjs");
+const TableCell_styles = require("../Table/TableCell/TableCell.styles.cjs");
+require("../Table/TableCell/TableCell.cjs");
+const TableRow_styles = require("../Table/TableRow/TableRow.styles.cjs");
+require("../Table/TableRow/TableRow.cjs");
+const TableHeader_styles = require("../Table/TableHeader/TableHeader.styles.cjs");
+require("../Table/TableHeader/TableHeader.cjs");
+const TableContainer_styles = require("../Table/TableContainer/TableContainer.styles.cjs");
+require("../Table/TableContainer/TableContainer.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableSection", {
   root: {},
   header: {

package/dist/cjs/Tag/Tag.cjs

@@ -110,7 +110,7 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
             children: label
           }
         ),
-        onDelete && deleteIcon
+        onDelete && !disabled && deleteIcon
       ]
     }
   );

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,