@hitachivantara/uikit-react-core 5.106.1 → 6.0.0-next.1

package/dist/cjs/Tag/Tag.cjs

@@ -1,137 +0,0 @@
-"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/Tag/Tag.styles.cjs

@@ -1,107 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
-  root: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "default",
-    color: uikitStyles.theme.colors.textDark,
-    borderColor: uikitStyles.theme.colors.border,
-    borderRadius: uikitStyles.theme.radii.round,
-    maxWidth: 180,
-    whiteSpace: "nowrap",
-    transition: "background-color 0.3s ease",
-    "&,:hover,:focus-visible": {
-      backgroundColor: "var(--tagColor)"
-    },
-    "& div:has($deleteIcon)": {
-      // ensure icon container doesn't grow into $label
-      width: "max-content",
-      lineHeight: 0
-    }
-  },
-  hasIcon: {
-    paddingLeft: uikitStyles.theme.space.xxs
-  },
-  /** @deprecated */
-  outlined: {
-    outlineStyle: "solid"
-  },
-  /** @deprecated */
-  categorical: {
-    borderRadius: 8,
-    "& $label": {
-      color: uikitStyles.theme.colors.text
-    },
-    "& $icon": {
-      display: "none"
-    }
-  },
-  xs: {
-    height: 16
-  },
-  sm: {
-    height: 24,
-    "& $label": {
-      ...uikitStyles.theme.typography.caption1,
-      color: "inherit"
-    }
-  },
-  md: {
-    height: 32,
-    "& $label": {
-      ...uikitStyles.theme.typography.body,
-      color: "inherit"
-    }
-  },
-  disabled: {
-    "&,:hover,:focus-visible": {
-      backgroundColor: uikitStyles.theme.colors.bgDisabled
-    },
-    "& $label": {
-      color: uikitStyles.theme.colors.textDisabled
-    }
-  },
-  label: {
-    padding: uikitStyles.theme.spacing(0, "xs"),
-    color: "inherit"
-  },
-  deleteIcon: {
-    margin: 0,
-    marginRight: uikitStyles.theme.space.xxs,
-    padding: 2,
-    ":hover": {
-      backgroundColor: uikitStyles.theme.colors.bgHover
-    }
-  },
-  selected: {},
-  clickable: {
-    cursor: "pointer"
-  },
-  // TODO: remove in favour of `hasIcon` once it's no longer needed
-  icon: {
-    fontSize: 12
-  },
-  /** @deprecated use `root` instead */
-  chipRoot: {},
-  /** @deprecated unused */
-  // TODO: redundant - use deleteIcon. remove in v6
-  /** @deprecated */
-  button: {},
-  /** @deprecated */
-  tagButton: {},
-  // TODO: redundant - use $clickable or :not($disabled). remove in v6
-  /** @deprecated */
-  focusVisible: {},
-  /** @deprecated */
-  disabledDeleteIcon: {},
-  /** @deprecated */
-  categoricalFocus: {},
-  /** @deprecated */
-  categoricalDisabled: {}
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/TagsInput/TagsInput.cjs

@@ -1,424 +0,0 @@
-"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;