@hitachivantara/uikit-react-core 5.104.0 → 5.104.1

package/dist/cjs/Tag/Tag.cjs

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const CheckBoxIcon = require("../BaseCheckBox/CheckBoxIcon.cjs");
+const useControlled = require("../hooks/useControlled.cjs");
+const icons = require("../icons.cjs");
+const keyboardUtils = require("../utils/keyboardUtils.cjs");
+const Tag_styles = require("./Tag.styles.cjs");
+const ButtonBase = require("../ButtonBase/ButtonBase.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const colorMap = {
+  positive_20: "positive",
+  negative_20: "negative",
+  warning_20: "warning",
+  neutral_20: "info"
+};
+const HvTag = React.forwardRef(function HvTag2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    component,
+    style,
+    label,
+    disabled,
+    size = "xs",
+    variant,
+    type = "semantic",
+    selectable,
+    selected,
+    defaultSelected = false,
+    showSelectIcon = selectable,
+    color: colorProp,
+    icon: iconProp,
+    deleteIcon: deleteIconProp,
+    onDelete,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    deleteButtonArialLabel,
+    deleteButtonProps,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvTag", props);
+  const { classes, cx } = Tag_styles.useClasses(classesProp);
+  const { activeTheme } = uikitReactUtils.useTheme();
+  const [isSelected, setIsSelected] = useControlled.useControlled(
+    selected,
+    Boolean(defaultSelected)
+  );
+  const handleDeleteClick = (event) => {
+    event.stopPropagation();
+    onDelete?.(event);
+  };
+  const color = activeTheme?.name === "pentahoPlus" && colorMap[colorProp] || colorProp;
+  const tagColor = (
+    // backwards-compatibility for `type` prop
+    type === "categorical" && uikitStyles.theme.alpha(color || "cat1", 0.2) || // use the palette color if it matches
+    uikitStyles.theme.palette[color]?.[600] || uikitStyles.getColor(color)
+  );
+  const isClickable = !!(onClick || onDelete || selectable);
+  const deleteIcon = deleteIconProp && React.isValidElement(deleteIconProp) ? React.cloneElement(deleteIconProp, {
+    className: cx(classes.deleteIcon, {
+      [classes.disabledDeleteIcon]: disabled
+    }),
+    onClick: handleDeleteClick
+  }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    icons.HvIcon,
+    {
+      compact: true,
+      name: "Close",
+      onClick: handleDeleteClick,
+      className: cx(classes.deleteIcon, classes.button, classes.tagButton),
+      ...deleteButtonProps
+    }
+  ) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ButtonBase.HvButtonBase,
+    {
+      ref,
+      component: isClickable ? ButtonBase.HvButtonBase : "div",
+      disabled,
+      "data-color": color,
+      style: uikitReactUtils.mergeStyles(style, {
+        "--tagColor": tagColor
+      }),
+      className: cx(classes.root, classes.chipRoot, classes[size], className, {
+        [classes.hasIcon]: iconProp || selectable && showSelectIcon,
+        [classes.clickable]: isClickable && !disabled,
+        [classes.selected]: isSelected,
+        [classes.disabled]: disabled,
+        [classes.outlined]: variant === "outlined",
+        [classes.categorical]: type === "categorical",
+        [classes.categoricalFocus]: type === "categorical" && !disabled,
+        [classes.categoricalDisabled]: type === "categorical" && disabled
+      }),
+      onKeyUp: (event) => {
+        if (event.currentTarget === event.target && keyboardUtils.isDeleteKey(event)) {
+          onDelete?.(event);
+        }
+        onKeyUp?.(event);
+      },
+      onClick: (event) => {
+        if (disabled) return;
+        if (selectable) setIsSelected(!isSelected);
+        onClick?.(event, !isSelected);
+      },
+      selected: isClickable && isSelected,
+      ...others,
+      children: [
+        iconProp,
+        selectable && showSelectIcon && /* @__PURE__ */ jsxRuntime.jsx(
+          CheckBoxIcon.HvCheckBoxIcon,
+          {
+            className: classes.icon,
+            variant: isSelected ? "checked" : "default",
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Typography.HvTypography,
+          {
+            noWrap: true,
+            variant: "caption2",
+            component: "span",
+            className: classes.label,
+            children: label
+          }
+        ),
+        onDelete && !disabled && deleteIcon
+      ]
+    }
+  );
+});
+exports.tagClasses = Tag_styles.staticClasses;
+exports.HvTag = HvTag;

package/dist/cjs/TagsInput/TagsInput.cjs

@@ -0,0 +1,424 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const utils = require("@mui/material/utils");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const validations = require("../BaseInput/validations.cjs");
+const LabelContainer = require("../FormElement/LabelContainer.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");
+const setId = require("../utils/setId.cjs");
+const TagsInput_styles = require("./TagsInput.styles.cjs");
+const CharCounter = require("../FormElement/CharCounter/CharCounter.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
+const Tag = require("../Tag/Tag.cjs");
+const WarningText = require("../FormElement/WarningText/WarningText.cjs");
+const HvTagsInput = React.forwardRef(
+  function HvTagsInput2(props, ref) {
+    const {
+      classes: classesProp,
+      className,
+      id,
+      name,
+      value: valueProp,
+      defaultValue = [],
+      readOnly,
+      disabled,
+      required,
+      label,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      description,
+      "aria-describedby": ariaDescribedBy,
+      onChange,
+      onAdd,
+      onDelete,
+      onBlur,
+      onFocus,
+      placeholder,
+      startAdornment,
+      endAdornment,
+      hideCounter,
+      middleCountLabel = "/",
+      maxTagsQuantity,
+      resizable,
+      inputProps,
+      countCharProps,
+      multiline,
+      status,
+      statusMessage,
+      validationMessages,
+      commitTagOn = ["Enter"],
+      commitOnBlur,
+      suggestionListCallback,
+      suggestionValidation,
+      suggestionsLoose,
+      ...others
+    } = uikitReactUtils.useDefaultProps("HvTagsInput", props);
+    const { classes, cx } = TagsInput_styles.useClasses(classesProp);
+    const elementId = useUniqueId.useUniqueId(id);
+    const [value, setValue] = useControlled.useControlled(valueProp, defaultValue);
+    const [validationState, setValidationState] = useControlled.useControlled(
+      status,
+      "standBy"
+    );
+    const [validationMessage, setValidationMessage] = useControlled.useControlled(
+      statusMessage,
+      ""
+    );
+    const [stateValid, setStateValid] = React.useState(true);
+    const inputRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    const skipReset = React.useRef(false);
+    const blurTimeout = React.useRef(null);
+    const focusUtils = useFocus.useFocus({ containerRef });
+    const forkedContainerRef = utils.useForkRef(ref, containerRef);
+    const hasCounter = maxTagsQuantity != null && !hideCounter;
+    const [suggestionValues, setSuggestionValues] = React.useState(null);
+    const isStateInvalid = React.useMemo(() => {
+      return hasCounter && value.length > maxTagsQuantity;
+    }, [hasCounter, maxTagsQuantity, value.length]);
+    const canShowSuggestions = suggestionListCallback != null;
+    const hasSuggestions = !!suggestionValues;
+    const errorMessages = React.useMemo(
+      () => ({ ...validations.DEFAULT_ERROR_MESSAGES, ...validationMessages }),
+      [validationMessages]
+    );
+    const performValidation = React.useCallback(
+      (currValue) => {
+        if (maxTagsQuantity !== null && maxTagsQuantity !== void 0 && currValue.length > maxTagsQuantity) {
+          setValidationState("invalid");
+          setValidationMessage(errorMessages.maxCharError || "");
+          setStateValid(false);
+        } else {
+          setValidationState("valid");
+          setValidationMessage("");
+          setStateValid(true);
+        }
+      },
+      [
+        errorMessages.maxCharError,
+        maxTagsQuantity,
+        setValidationMessage,
+        setValidationState
+      ]
+    );
+    const deleteTag = React.useCallback(
+      (tagPos, event, refocus = false) => {
+        const newTagsArr = [
+          ...value.slice(0, tagPos),
+          ...value.slice(tagPos + 1)
+        ];
+        setValue(newTagsArr);
+        if (refocus) {
+          setTimeout(() => focusUtils.focusChild(tagPos), 10);
+        }
+        performValidation(newTagsArr);
+        onDelete?.(event, value[tagPos], tagPos);
+        onChange?.(event, newTagsArr);
+        skipReset.current = true;
+      },
+      [focusUtils, onChange, onDelete, performValidation, setValue, value]
+    );
+    const addTag = React.useCallback(
+      (event, tagInput) => {
+        event.preventDefault();
+        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 (skipReset.current || !inputRef.current) return;
+      inputRef.current.value = "";
+      skipReset.current = false;
+    }, [value]);
+    const isMounted = useIsMounted.useIsMounted();
+    const focusInput = () => {
+      inputRef.current?.focus();
+    };
+    const getSuggestions = React.useCallback(
+      (li) => {
+        const listEl = document.getElementById(
+          setId.setId(elementId, "suggestions-list") || ""
+        );
+        return li != null ? listEl?.getElementsByTagName("li")?.[li] : listEl;
+      },
+      [elementId]
+    );
+    const suggestionClearHandler = React.useCallback(() => {
+      if (isMounted.current) {
+        setSuggestionValues(null);
+      }
+    }, [isMounted]);
+    const suggestionHandler = React.useCallback(
+      (val) => {
+        const suggestionsArray = suggestionListCallback?.(val);
+        if (suggestionsArray?.[0]?.label) {
+          setSuggestionValues(suggestionsArray);
+        } else {
+          suggestionClearHandler();
+        }
+      },
+      [suggestionClearHandler, suggestionListCallback]
+    );
+    const suggestionSelectedHandler = (event, item) => {
+      addTag(event, item.value || String(item.label));
+      focusInput();
+      suggestionClearHandler();
+    };
+    const onSuggestionKeyDown = (event) => {
+      if (keyboardUtils.isKey(event, "Esc")) {
+        suggestionClearHandler();
+        focusInput();
+      } else if (keyboardUtils.isKey(event, "Tab")) {
+        suggestionClearHandler();
+      }
+    };
+    const onChangeHandler = React.useCallback(
+      (event) => {
+        if (canShowSuggestions) {
+          suggestionHandler(event.target.value);
+        }
+      },
+      [canShowSuggestions, suggestionHandler]
+    );
+    const onInputKeyDownHandler = React.useCallback(
+      (event) => {
+        if (!canShowSuggestions && commitTagOn.includes(event.code)) {
+          addTag(event);
+        }
+      },
+      [addTag, canShowSuggestions, commitTagOn]
+    );
+    const onKeyDownHandler = React.useCallback(
+      (event) => {
+        const tagInput = inputRef.current?.value || "";
+        if (tagInput === "") {
+          switch (event.code) {
+            case "ArrowLeft":
+              focusUtils.focusPrevious();
+              return;
+            case "ArrowRight":
+              focusUtils.focusNext();
+              return;
+            case "End":
+              focusUtils.focusLast();
+              return;
+            case "Home":
+              focusUtils.focusFirst();
+              return;
+            case "Backspace":
+            case "Delete": {
+              if (document.activeElement === inputRef.current) {
+                deleteTag(value.length - 1, event);
+              }
+              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,
+        suggestionClearHandler,
+        suggestionValidation,
+        suggestionsLoose,
+        value.length
+      ]
+    );
+    const onDeleteTagHandler = React.useCallback(
+      (event, i) => {
+        deleteTag(i, event, true);
+        setValidationState("standBy");
+      },
+      [deleteTag, setValidationState]
+    );
+    const onContainerClickHandler = React.useCallback(() => {
+      inputRef.current?.focus();
+      clearTimeout(blurTimeout.current);
+    }, []);
+    const onBlurHandler = (evt) => {
+      blurTimeout.current = setTimeout(() => {
+        if (commitOnBlur) {
+          addTag(evt);
+        }
+        onBlur?.(evt, inputRef.current?.value || "");
+      }, 10);
+    };
+    const onFocusHandler = (evt) => {
+      clearTimeout(blurTimeout.current);
+      onFocus?.(evt, inputRef.current?.value || "");
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      FormElement.HvFormElement,
+      {
+        id,
+        name,
+        disabled,
+        readOnly,
+        status: validationState,
+        required,
+        onBlur: onBlurHandler,
+        onFocus: onFocusHandler,
+        className: cx(
+          classes.root,
+          {
+            [classes.readOnly]: readOnly,
+            [classes.disabled]: disabled
+          },
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LabelContainer.HvLabelContainer,
+            {
+              label,
+              description,
+              inputId: setId.setId(elementId, "input"),
+              labelId: setId.setId(elementId, "label"),
+              descriptionId: setId.setId(elementId, "description"),
+              classes: {
+                root: classes.labelContainer,
+                label: classes.label,
+                description: classes.description
+              },
+              children: hasCounter && /* @__PURE__ */ jsxRuntime.jsx(
+                CharCounter.HvCharCounter,
+                {
+                  disableGutter: true,
+                  id: setId.setId(elementId, "charCounter"),
+                  className: classes.characterCounter,
+                  separator: middleCountLabel,
+                  currentCharQuantity: value.length,
+                  maxCharQuantity: maxTagsQuantity,
+                  ...countCharProps
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: forkedContainerRef,
+              className: cx(classes.tagsList, {
+                [classes.error]: canShowError,
+                [classes.resizable]: resizable && multiline,
+                [classes.invalid]: isStateInvalid,
+                [classes.singleLine]: !multiline
+              }),
+              onKeyDown: onKeyDownHandler,
+              onClick: onContainerClickHandler,
+              children: [
+                value?.map((t, i) => {
+                  const tag = typeof t === "string" ? { label: t, type: "semantic" } : t;
+                  const { label: label2, type, ...otherProps } = tag;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    Tag.HvTag,
+                    {
+                      type,
+                      label: label2,
+                      disabled,
+                      tabIndex: -1,
+                      className: cx(classes.chipRoot, classes.listItemRoot),
+                      ...!(readOnly || disabled || type === "categorical") && {
+                        onDelete: (event) => onDeleteTagHandler(event, i)
+                      },
+                      ...otherProps
+                    },
+                    `${label2}-${i}`
+                  );
+                }),
+                !disabled && !readOnly && startAdornment,
+                !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.tagInputContainerRoot,
+                      classes.tagInputRoot,
+                      classes.input
+                    ),
+                    ref: inputRef,
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
+                    "aria-describedby": ariaDescribedBy ?? (description ? setId.setId(elementId, "description") : void 0),
+                    ...inputProps,
+                    ...others
+                  }
+                ),
+                !disabled && !readOnly && endAdornment
+              ]
+            }
+          ),
+          canShowSuggestions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            hasSuggestions && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "presentation", className: classes.inputExtension }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Suggestions.HvSuggestions,
+              {
+                id: setId.setId(elementId, "suggestions"),
+                classes: {
+                  root: classes.suggestionsContainer,
+                  list: classes.suggestionList
+                },
+                open: hasSuggestions,
+                anchorEl: containerRef?.current,
+                onClose: suggestionClearHandler,
+                onKeyDown: onSuggestionKeyDown,
+                onSuggestionSelected: suggestionSelectedHandler,
+                suggestionValues
+              }
+            )
+          ] }),
+          canShowError && /* @__PURE__ */ jsxRuntime.jsx(
+            WarningText.HvWarningText,
+            {
+              id: setId.setId(elementId, "error"),
+              disableBorder: true,
+              className: classes.error,
+              children: validationMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+exports.tagsInputClasses = TagsInput_styles.staticClasses;
+exports.HvTagsInput = HvTagsInput;