@hitachivantara/uikit-react-core 5.91.0 → 5.91.2

package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs

@@ -5,20 +5,13 @@ const React = require("react");
 const MuiCheckbox = require("@mui/material/Checkbox");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const BaseCheckBox_styles = require("./BaseCheckBox.styles.cjs");
-const icons$1 = require("./icons.cjs");
+const CheckBoxIcon = require("./CheckBoxIcon.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiCheckbox__default = /* @__PURE__ */ _interopDefault(MuiCheckbox);
-const icons = {
-  checkbox: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Box, {}),
-  checkboxPartial: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Partial, {}),
-  checkboxChecked: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Check, {})
-};
 const HvBaseCheckBox = React.forwardRef(function HvBaseCheckBox2(props, ref) {
   const {
-    id,
     classes: classesProp,
     className,
-    name,
     inputProps,
     onChange,
     onFocusVisible,
@@ -58,27 +51,26 @@ const HvBaseCheckBox = React.forwardRef(function HvBaseCheckBox2(props, ref) {
     },
     [onFocusVisible]
   );
+  const params = { indeterminate, disabled, semantic };
   return /* @__PURE__ */ jsxRuntime.jsx(
     MuiCheckbox__default.default,
     {
       ref,
-      id,
-      name,
       value,
       className: cx(
         classes.root,
         {
-          [classes.disabled]: disabled,
           [classes.focusVisible]: focusVisible,
           [classes.checked]: checked,
           [classes.indeterminate]: indeterminate,
-          [classes.semantic]: semantic
+          [classes.semantic]: semantic,
+          [classes.disabled]: disabled
         },
         className
       ),
-      icon: icons.checkbox,
-      indeterminateIcon: icons.checkboxPartial,
-      checkedIcon: icons.checkboxChecked,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(CheckBoxIcon.HvCheckBoxIcon, { ...params }),
+      indeterminateIcon: /* @__PURE__ */ jsxRuntime.jsx(CheckBoxIcon.HvCheckBoxIcon, { variant: "indeterminate", ...params }),
+      checkedIcon: /* @__PURE__ */ jsxRuntime.jsx(CheckBoxIcon.HvCheckBoxIcon, { variant: "checked", ...params }),
       disabled,
       required,
       readOnly,

package/dist/cjs/BaseCheckBox/BaseCheckBox.styles.cjs

@@ -14,27 +14,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseCheck
     "&:hover": {
       backgroundColor: uikitStyles.theme.colors.bgHover,
       borderRadius: uikitStyles.theme.radii.round
-    },
-    "& svg": {
-      width: 16,
-      height: 16,
-      color: uikitStyles.theme.colors.bgContainer,
-      borderRadius: uikitStyles.theme.radii.base,
-      border: `1px solid ${uikitStyles.theme.colors.borderStrong}`
     }
   },
   disabled: {
-    "&$root": {
-      cursor: "not-allowed",
-      pointerEvents: "initial",
-      "& svg": {
-        color: uikitStyles.theme.colors.bgDisabled,
-        borderColor: uikitStyles.theme.colors.borderDisabled,
-        backgroundColor: uikitStyles.theme.colors.bgDisabled
-      },
-      "&:hover": {
-        backgroundColor: "transparent"
-      }
+    cursor: "not-allowed",
+    pointerEvents: "initial",
+    "&:hover": {
+      backgroundColor: "transparent"
     }
   },
   focusVisible: {
@@ -43,38 +29,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseCheck
     }
   },
   icon: {},
-  checked: {
-    "& svg": {
-      borderColor: "transparent",
-      backgroundColor: uikitStyles.theme.colors.primaryStrong,
-      color: uikitStyles.theme.colors.bgContainer
-    },
-    "&$disabled": {
-      "& svg": {
-        color: uikitStyles.theme.colors.textDisabled,
-        borderColor: "currentcolor"
-      }
-    }
-  },
-  indeterminate: {
-    "& svg": {
-      color: uikitStyles.theme.colors.textSubtle
-    },
-    "&$disabled": {
-      "& svg": {
-        color: uikitStyles.theme.colors.textDisabled,
-        borderColor: "currentcolor"
-      }
-    }
-  },
-  semantic: {
-    "&$indeterminate": {
-      "& svg": {
-        backgroundColor: uikitStyles.theme.colors.bgContainer,
-        border: `1px solid ${uikitStyles.theme.colors.borderStrong}`
-      }
-    }
-  }
+  checked: {},
+  indeterminate: {},
+  semantic: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/BaseCheckBox/CheckBoxIcon.cjs

@@ -0,0 +1,78 @@
+"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 { useClasses } = uikitReactUtils.createClasses("HvCheckBoxIcon", {
+  root: {
+    display: "inline-flex",
+    fill: "currentcolor",
+    width: "1em",
+    height: "1em",
+    flexShrink: 0,
+    fontSize: 16,
+    color: uikitStyles.theme.colors.bgContainer,
+    borderRadius: uikitStyles.theme.radii.base,
+    border: `1px solid ${uikitStyles.theme.colors.borderStrong}`
+  },
+  checked: {
+    borderColor: "transparent",
+    backgroundColor: uikitStyles.theme.colors.primaryStrong,
+    color: uikitStyles.theme.colors.bgContainer
+  },
+  indeterminate: {
+    color: uikitStyles.theme.colors.textSubtle
+  },
+  semantic: {
+    "&[data-variant=indeterminate]": {
+      backgroundColor: uikitStyles.theme.colors.bgContainer,
+      borderColor: uikitStyles.theme.colors.borderStrong
+    }
+  },
+  disabled: {
+    color: uikitStyles.theme.colors.bgDisabled,
+    borderColor: uikitStyles.theme.colors.borderDisabled,
+    backgroundColor: uikitStyles.theme.colors.bgDisabled,
+    "&[data-variant=checked],&[data-variant=indeterminate]": {
+      color: uikitStyles.theme.colors.textDisabled,
+      borderColor: "currentcolor"
+    }
+  }
+});
+const HvCheckBoxIcon = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    variant,
+    disabled,
+    semantic
+  } = uikitReactUtils.useDefaultProps("HvCheckBoxIcon", props);
+  const { classes, cx } = useClasses(classesProp, false);
+  const d = React.useMemo(() => {
+    switch (variant) {
+      case "checked":
+        return "m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z";
+      case "indeterminate":
+        return "m3,8l8,0l0,-2l-8,0l0,2z";
+      case "default":
+      default:
+        return "m0,0l16,0l0,16l-16,0l0,-16z";
+    }
+  }, [variant]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      viewBox: "0 0 14 14",
+      "data-variant": variant,
+      className: cx(classes.root, className, {
+        [classes.checked]: variant === "checked",
+        [classes.indeterminate]: variant === "indeterminate",
+        [classes.semantic]: semantic,
+        [classes.disabled]: disabled
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d })
+    }
+  );
+};
+exports.HvCheckBoxIcon = HvCheckBoxIcon;

package/dist/cjs/BaseInput/BaseInput.styles.cjs

@@ -6,10 +6,6 @@ const focusUtils = require("../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput", {
   root: {
     // #region `input` style reset
-    "input:-webkit-autofill": {
-      WebkitBoxShadow: `0 0 0px 1000px ${uikitStyles.theme.colors.textDimmed} inset`,
-      WebkitTextFillColor: uikitStyles.theme.colors.text
-    },
     // Clears number input up/down arrows in Chrome and Firefox
     "input[type=number]": {
       MozAppearance: "textfield",

package/dist/cjs/BaseRadio/BaseRadio.cjs

@@ -5,33 +5,25 @@ const React = require("react");
 const MuiRadio = require("@mui/material/Radio");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const BaseRadio_styles = require("./BaseRadio.styles.cjs");
-const icons$1 = require("./icons.cjs");
+const RadioIcon = require("./RadioIcon.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiRadio__default = /* @__PURE__ */ _interopDefault(MuiRadio);
-const icons = {
-  radio: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Unselected, {}),
-  radioChecked: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Selected, {})
-};
 const HvBaseRadio = React.forwardRef(
   function HvBaseRadio2(props, ref) {
     const {
       classes: classesProp,
       className,
-      id,
-      name,
       value = "on",
-      required = false,
-      readOnly = false,
-      disabled = false,
+      required,
+      readOnly,
+      disabled,
       checked,
       defaultChecked,
       onChange,
-      semantic = false,
+      semantic,
       inputProps,
       onFocusVisible,
       onBlur,
-      icon,
-      checkedIcon,
       ...others
     } = uikitReactUtils.useDefaultProps("HvBaseRadio", props);
     const { classes, cx } = BaseRadio_styles.useClasses(classesProp);
@@ -63,8 +55,6 @@ const HvBaseRadio = React.forwardRef(
       MuiRadio__default.default,
       {
         ref,
-        id,
-        name,
         className: cx(
           classes.root,
           {
@@ -75,8 +65,8 @@ const HvBaseRadio = React.forwardRef(
           },
           className
         ),
-        icon: icon || icons.radio,
-        checkedIcon: checkedIcon || icons.radioChecked,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(RadioIcon.HvRadioIcon, { disabled }),
+        checkedIcon: /* @__PURE__ */ jsxRuntime.jsx(RadioIcon.HvRadioIcon, { checked: true, disabled }),
         color: "default",
         disabled,
         required,

package/dist/cjs/BaseRadio/BaseRadio.styles.cjs

@@ -10,25 +10,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
     minWidth: 32,
     height: 32,
     cursor: "pointer",
-    "& svg": {
-      width: 16,
-      height: 16,
-      borderRadius: uikitStyles.theme.radii.full,
-      border: `1px solid ${uikitStyles.theme.colors.borderStrong}`,
-      backgroundColor: uikitStyles.theme.colors.bgContainer
-    },
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.bgHover,
-      borderRadius: uikitStyles.theme.radii.round
+    borderRadius: "inherit",
+    ":hover": {
+      backgroundColor: uikitStyles.theme.colors.bgHover
     }
   },
   disabled: {
     cursor: "not-allowed",
-    pointerEvents: "initial",
-    "& svg": {
-      borderColor: uikitStyles.theme.colors.textDisabled,
-      backgroundColor: uikitStyles.theme.colors.bgDisabled
-    }
+    pointerEvents: "initial"
   },
   focusVisible: {
     "& svg": {
@@ -37,20 +26,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
     }
   },
   icon: {},
-  checked: {
-    "& svg": {
-      borderColor: "transparent",
-      backgroundColor: uikitStyles.theme.colors.primaryStrong,
-      color: uikitStyles.theme.colors.bgContainer
-    },
-    "&$disabled": {
-      "& svg": {
-        borderColor: "transparent",
-        backgroundColor: uikitStyles.theme.colors.borderDisabled,
-        color: uikitStyles.theme.colors.bgDisabled
-      }
-    }
-  },
+  checked: {},
   semantic: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/BaseRadio/RadioIcon.cjs

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const { useClasses } = uikitReactUtils.createClasses("HvRadioIcon", {
+  root: {
+    display: "inline-flex",
+    fill: "currentcolor",
+    width: "1em",
+    height: "1em",
+    flexShrink: 0,
+    fontSize: 16,
+    borderRadius: uikitStyles.theme.radii.full,
+    border: `1px solid ${uikitStyles.theme.colors.borderStrong}`,
+    backgroundColor: uikitStyles.theme.colors.bgContainer
+  },
+  checked: {
+    borderColor: "transparent",
+    backgroundColor: uikitStyles.theme.colors.primaryStrong,
+    color: uikitStyles.theme.colors.bgContainer
+  },
+  disabled: {
+    borderColor: uikitStyles.theme.colors.textDisabled,
+    backgroundColor: uikitStyles.theme.colors.bgDisabled
+  },
+  checkedDisabled: {
+    borderColor: "transparent",
+    backgroundColor: uikitStyles.theme.colors.borderDisabled,
+    color: uikitStyles.theme.colors.bgDisabled
+  }
+});
+const HvRadioIcon = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    checked,
+    disabled
+  } = uikitReactUtils.useDefaultProps("HvRadioIcon", props);
+  const { classes, cx } = useClasses(classesProp, false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      className: cx(classes.root, className, {
+        [classes.checked]: checked,
+        [classes.disabled]: disabled,
+        [classes.checkedDisabled]: checked && disabled
+      }),
+      children: checked && /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "4.5" })
+    }
+  );
+};
+exports.HvRadioIcon = HvRadioIcon;

package/dist/cjs/Button/Button.styles.cjs

@@ -70,10 +70,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
     backgroundColor: "var(--color)",
     ":where(:not($disabled))": {
       ":hover, :focus-visible": {
-        backgroundColor: "color-mix(in srgb, var(--color), black 20%)"
+        backgroundColor: uikitStyles.theme.mix("var(--color)", 0.8, "black")
       },
       ":active": {
-        backgroundColor: "color-mix(in srgb, var(--color), black 30%)"
+        backgroundColor: uikitStyles.theme.mix("var(--color)", 0.7, "black")
       }
     }
   },

package/dist/cjs/DotPagination/DotPagination.styles.cjs

@@ -19,8 +19,9 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvDotPagina
     minWidth: 24,
     minHeight: 24,
     color: "inherit",
-    "&:hover": {
-      borderRadius: uikitStyles.theme.radii.full
+    borderRadius: uikitStyles.theme.radii.full,
+    ":hover,:focus-within": {
+      backgroundColor: uikitStyles.theme.colors.bgHover
     }
   },
   icon: {

package/dist/cjs/Dropdown/Dropdown.cjs

@@ -101,7 +101,7 @@ const HvDropdown = generic.fixedForwardRef(function HvDropdown2(props, ref) {
       utils.getSelectionLabel(labels, placeholder, multiSelect, values)
     );
   }, [labels, multiSelect, placeholder, values]);
-  const dropdownHeaderRef = React.useRef();
+  const dropdownHeaderRef = React.useRef(void 0);
   const {
     ref: refProp,
     dropdownHeaderRef: dropdownHeaderRefProp,

package/dist/cjs/Focus/Focus.cjs

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const browser = require("../utils/browser.cjs");
-const ConditionalWrapper = require("../utils/ConditionalWrapper.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const Focus_styles = require("./Focus.styles.cjs");
 const utils = require("./utils.cjs");
@@ -18,11 +16,9 @@ const HvFocus = ({
   focusOnClick = false,
   focusDisabled = true,
   strategy = "listbox",
-  useFalseFocus = false,
   filterClass,
   navigationJump = 4
 }) => {
-  const [showFocus, setShowFocus] = React.useState(false);
   const [childFocus, setChildFocus] = React.useState();
   const [hasRunConfig, setHasRunConfig] = React.useState(false);
   const { classes, cx } = Focus_styles.useClasses(classesProp);
@@ -88,29 +84,23 @@ const HvFocus = ({
     setHasRunConfig(true);
   };
   const addFocusClass = (evt) => {
-    if (!useFalseFocus) {
-      classes.focused.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
-      evt.currentTarget.classList.add("HvIsFocused");
-      classes?.focus?.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
-    }
+    classes.focused.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
+    evt.currentTarget.classList.add("HvIsFocused");
+    classes?.focus?.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
   };
   const removeFocusClass = () => {
-    if (!useFalseFocus) {
-      getFocuses().forEach((element) => {
-        classes.focused.split(" ").forEach((c) => element.classList.remove(c));
-        element.classList.remove("HvIsFocused");
-        classes?.focus?.split(" ").forEach((c) => element.classList.remove(c));
-      });
-    }
+    getFocuses().forEach((element) => {
+      classes.focused.split(" ").forEach((c) => element.classList.remove(c));
+      element.classList.remove("HvIsFocused");
+      classes?.focus?.split(" ").forEach((c) => element.classList.remove(c));
+    });
   };
   const onFocus = (evt) => {
     addFocusClass(evt);
-    setShowFocus(true);
     childFocus?.focus?.();
     onFocusStrategy(evt);
   };
   const onBlur = () => {
-    setShowFocus(false);
     removeFocusClass();
     onBlurStrategy();
   };
@@ -121,7 +111,6 @@ const HvFocus = ({
     setTabIndex(evt.currentTarget, 0);
     if (!focusOnClick) {
       removeFocusClass();
-      setShowFocus(false);
     }
   };
   const focusAndUpdateIndex = (nextFocus, previousFocus, focusesList) => {
@@ -297,11 +286,7 @@ const HvFocus = ({
     if (browser.isBrowser("firefox")) evt.preventDefault();
   };
   if (disabled) return children;
-  const focusWrapper = (childrenToWrap) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.externalReference, children: [
-    childrenToWrap,
-    showFocus && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.falseFocus })
-  ] });
-  return /* @__PURE__ */ jsxRuntime.jsx(ConditionalWrapper.ConditionalWrapper, { condition: useFalseFocus, wrapper: focusWrapper, children: React.cloneElement(children, {
+  return React.cloneElement(children, {
     className: cx(
       [classes.root, filterClass],
       {
@@ -318,7 +303,7 @@ const HvFocus = ({
     onKeyDown,
     onKeyUp,
     selected
-  }) });
+  });
 };
 exports.focusClasses = Focus_styles.staticClasses;
 exports.HvFocus = HvFocus;

package/dist/cjs/Focus/Focus.styles.cjs

@@ -21,23 +21,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFocus", {
       ...focusUtils.outlineStyles
     }
   },
-  externalReference: {
-    position: "relative"
-  },
-  falseFocus: {
-    width: "98%",
-    height: "98%",
-    position: "absolute",
-    zIndex: "1",
-    ...focusUtils.outlineStyles,
-    "@media (-webkit-min-device-pixel-ratio:0)": {
-      ...focusUtils.outlineStyles
-    },
-    top: 0,
-    left: "0.5%",
-    backgroundColor: "transparent",
-    pointerEvents: "none"
-  },
   focus: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/InlineEditor/InlineEditor.cjs

@@ -35,7 +35,7 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
   const [value, setValue] = useControlled.useControlled(valueProp, defaultValue);
   const [editMode, setEditMode] = React.useState(false);
   const [cachedValue, setCachedValue] = React.useState(value);
-  const inputRef = React.useRef();
+  const inputRef = React.useRef(void 0);
   const { activeTheme } = uikitReactUtils.useTheme();
   const [isOverflowing, setIsOverflowing] = React.useState(false);
   const typographyStyles = activeTheme?.typography[variant] || {};
@@ -80,7 +80,7 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
       ref,
       inputRef,
       classes: {
-        root: classes.inputRoot,
+        inputRoot: classes.inputRoot,
         input: classes.input
       },
       inputProps: {

package/dist/cjs/Tag/Tag.cjs

@@ -5,6 +5,7 @@ const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 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 keyboardUtils = require("../utils/keyboardUtils.cjs");
 const Tag_styles = require("./Tag.styles.cjs");
@@ -51,7 +52,6 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
     uikitStyles.theme.palette[color]?.[600] || uikitStyles.getColor(color)
   );
   const isClickable = !!(onClick || onDelete || selectable);
-  const CheckboxIcon = isSelected ? uikitReactIcons.CheckboxCheck : uikitReactIcons.Checkbox;
   const deleteIcon = deleteIconProp && React.isValidElement(deleteIconProp) ? React.cloneElement(deleteIconProp, {
     className: cx(classes.deleteIcon, {
       [classes.disabledDeleteIcon]: disabled
@@ -102,11 +102,11 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
       children: [
         iconProp,
         selectable && showSelectIcon && /* @__PURE__ */ jsxRuntime.jsx(
-          CheckboxIcon,
+          CheckBoxIcon.HvCheckBoxIcon,
           {
             className: classes.icon,
-            color: disabled && ["bgPageSecondary", "textDisabled"] || void 0,
-            size: "XS"
+            variant: isSelected ? "checked" : "default",
+            disabled
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/Tag/Tag.styles.cjs

@@ -77,8 +77,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
   },
   // TODO: remove in favour of `hasIcon` once it's no longer needed
   icon: {
-    width: 12,
-    height: 12
+    fontSize: 12
   },
   /** @deprecated use `root` instead */
   chipRoot: {},

package/dist/cjs/TagsInput/TagsInput.cjs

@@ -78,7 +78,7 @@ const HvTagsInput = React.forwardRef(
     const inputRef = React.useRef(null);
     const containerRef = React.useRef(null);
     const skipReset = React.useRef(false);
-    const blurTimeout = React.useRef();
+    const blurTimeout = React.useRef(null);
     const focusUtils = useFocus.useFocus({ containerRef });
     const forkedContainerRef = utils.useForkRef(ref, containerRef);
     const hasCounter = maxTagsQuantity != null && !hideCounter;

package/dist/cjs/TreeView/internals/hooks/useInstanceEventHandler.cjs

@@ -33,7 +33,7 @@ function createUseInstanceEventHandler(registryContainer2) {
       new ObjectToBeRetainedByReact()
     );
     const subscription = React__namespace.useRef(null);
-    const handlerRef = React__namespace.useRef();
+    const handlerRef = React__namespace.useRef(void 0);
     handlerRef.current = handler;
     const cleanupTokenRef = React__namespace.useRef(null);
     if (!subscription.current && handlerRef.current) {

package/dist/esm/AppSwitcher/Action/Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sources":["../../../../src/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../../Avatar\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication,\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = getColor(\n    disabled ? \"textDisabled\" : application?.color,\n    \"text\",\n  );\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClickCallback?.(event, { ...application, isSelected });\n    },\n    [application, disabled, isSelected, onClickCallback],\n  );\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id);\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className,\n      )}\n    >\n      <HvTypography\n        component=\"button\"\n        className={classes.typography}\n        onClick={handleOnClick}\n        style={{ borderColor: color }}\n        aria-label={name}\n        {...(description && { \"aria-describedby\": descriptionElementId })}\n        {...(isLink && { component: \"a\", href: url, target: target || \"_top\" })}\n      >\n        <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n        <HvOverflowTooltip\n          paragraphOverflow\n          className={classes.title}\n          placement=\"top-start\"\n          data={name}\n          classes={{\n            tooltipAnchorParagraph: classes.titleAnchor,\n          }}\n        />\n\n        {description && (\n          <HvTooltip title={description}>\n            <Info className={classes.iconInfo} id={descriptionElementId} />\n          </HvTooltip>\n        )}\n      </HvTypography>\n    </HvListItem>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAuDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,qBAAqB,MAAM;AAC7B,MAAgC;AAC9B,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,MAAM,aAAa,UAAU,aAAa,SAAS,KAAK,WAC9D;AAEF,QAAM,QAAQ;AAAA,IACZ,WAAW,iBAAiB,aAAa;AAAA,IACzC;AAAA,EACF;AAEA,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,IAAI;AAE9D,QAAM,wBAAwB,MAAM;AAClC,QAAI,aAAa;AACR,aAAA;AAAA,IAAA;AAGT,QAAI,WAAW,cAAc;AAEzB,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,KAAK;AAAA,UACL,SAAS,MAAM;AACb,4BAAgB,KAAK;AAAA,UACvB;AAAA,UACA,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAIE,UAAA,cAAc,KAAK,MAAM,GAAG;AAClC,UAAM,WACJ,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,KAC5B,YAAY,CAAC,IAAI,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,IAAI;AAGnD,WAAA,oBAAC,UAAS,EAAA,MAAK,MAAK,iBAAiB,OAAO,SAAQ,UAAS,eAAW,MACrE,UACH,SAAA,CAAA;AAAA,EAEJ;AAEM,QAAA,aAAa,mBAAmB,WAAW;AAKjD,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAA4B;AAC3B,UAAI,UAAU;AACZ,cAAM,eAAe;AACrB;AAAA,MAAA;AAGF,wBAAkB,OAAO,EAAE,GAAG,aAAa,YAAY;AAAA,IACzD;AAAA,IACA,CAAC,aAAa,UAAU,YAAY,eAAe;AAAA,EACrD;AAEA,QAAM,SAAS,OAAO;AAChB,QAAA,uBAAuB,YAAY,EAAE;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QAC/D;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,WAAW,QAAQ;AAAA,UACnB,SAAS;AAAA,UACT,OAAO,EAAE,aAAa,MAAM;AAAA,UAC5B,cAAY;AAAA,UACX,GAAI,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,UAC9D,GAAI,UAAU,EAAE,WAAW,KAAK,MAAM,KAAK,QAAQ,UAAU,OAAO;AAAA,UAErE,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MAAO,mCAAwB;AAAA,YAEvD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,mBAAiB;AAAA,gBACjB,WAAW,QAAQ;AAAA,gBACnB,WAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,kBACP,wBAAwB,QAAQ;AAAA,gBAAA;AAAA,cAClC;AAAA,YACF;AAAA,YAEC,eACC,oBAAC,WAAU,EAAA,OAAO,aAChB,UAAA,oBAAC,MAAK,EAAA,WAAW,QAAQ,UAAU,IAAI,qBAAA,CAAsB,EAC/D,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"Action.js","sources":["../../../../src/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../../Avatar\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement<any>;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication,\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = getColor(\n    disabled ? \"textDisabled\" : application?.color,\n    \"text\",\n  );\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClickCallback?.(event, { ...application, isSelected });\n    },\n    [application, disabled, isSelected, onClickCallback],\n  );\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id);\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className,\n      )}\n    >\n      <HvTypography\n        component=\"button\"\n        className={classes.typography}\n        onClick={handleOnClick}\n        style={{ borderColor: color }}\n        aria-label={name}\n        {...(description && { \"aria-describedby\": descriptionElementId })}\n        {...(isLink && { component: \"a\", href: url, target: target || \"_top\" })}\n      >\n        <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n        <HvOverflowTooltip\n          paragraphOverflow\n          className={classes.title}\n          placement=\"top-start\"\n          data={name}\n          classes={{\n            tooltipAnchorParagraph: classes.titleAnchor,\n          }}\n        />\n\n        {description && (\n          <HvTooltip title={description}>\n            <Info className={classes.iconInfo} id={descriptionElementId} />\n          </HvTooltip>\n        )}\n      </HvTypography>\n    </HvListItem>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAuDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,qBAAqB,MAAM;AAC7B,MAAgC;AAC9B,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,MAAM,aAAa,UAAU,aAAa,SAAS,KAAK,WAC9D;AAEF,QAAM,QAAQ;AAAA,IACZ,WAAW,iBAAiB,aAAa;AAAA,IACzC;AAAA,EACF;AAEA,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,IAAI;AAE9D,QAAM,wBAAwB,MAAM;AAClC,QAAI,aAAa;AACR,aAAA;AAAA,IAAA;AAGT,QAAI,WAAW,cAAc;AAEzB,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,KAAK;AAAA,UACL,SAAS,MAAM;AACb,4BAAgB,KAAK;AAAA,UACvB;AAAA,UACA,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAIE,UAAA,cAAc,KAAK,MAAM,GAAG;AAClC,UAAM,WACJ,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,KAC5B,YAAY,CAAC,IAAI,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,IAAI;AAGnD,WAAA,oBAAC,UAAS,EAAA,MAAK,MAAK,iBAAiB,OAAO,SAAQ,UAAS,eAAW,MACrE,UACH,SAAA,CAAA;AAAA,EAEJ;AAEM,QAAA,aAAa,mBAAmB,WAAW;AAKjD,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAA4B;AAC3B,UAAI,UAAU;AACZ,cAAM,eAAe;AACrB;AAAA,MAAA;AAGF,wBAAkB,OAAO,EAAE,GAAG,aAAa,YAAY;AAAA,IACzD;AAAA,IACA,CAAC,aAAa,UAAU,YAAY,eAAe;AAAA,EACrD;AAEA,QAAM,SAAS,OAAO;AAChB,QAAA,uBAAuB,YAAY,EAAE;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QAC/D;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,WAAW,QAAQ;AAAA,UACnB,SAAS;AAAA,UACT,OAAO,EAAE,aAAa,MAAM;AAAA,UAC5B,cAAY;AAAA,UACX,GAAI,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,UAC9D,GAAI,UAAU,EAAE,WAAW,KAAK,MAAM,KAAK,QAAQ,UAAU,OAAO;AAAA,UAErE,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MAAO,mCAAwB;AAAA,YAEvD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,mBAAiB;AAAA,gBACjB,WAAW,QAAQ;AAAA,gBACnB,WAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,kBACP,wBAAwB,QAAQ;AAAA,gBAAA;AAAA,cAClC;AAAA,YACF;AAAA,YAEC,eACC,oBAAC,WAAU,EAAA,OAAO,aAChB,UAAA,oBAAC,MAAK,EAAA,WAAW,QAAQ,UAAU,IAAI,qBAAA,CAAsB,EAC/D,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AAEJ;"}