@hitachivantara/uikit-react-core 5.93.1 → 5.94.0

package/dist/esm/DropDownMenu/DropDownMenu.styles.js

@@ -9,21 +9,7 @@ const { staticClasses, useClasses } = createClasses("HvDropDownMenu", {
   },
   /** @deprecated use `classes.root` instead */
   container: {},
-  baseContainer: {
-    "--r": theme.radii.base,
-    "&[data-popper-placement=bottom-end] .HvBaseDropdown-panel": {
-      borderRadius: "var(--r) 0 var(--r) var(--r)"
-    },
-    "&[data-popper-placement=bottom-start] .HvBaseDropdown-panel": {
-      borderRadius: "0 var(--r) var(--r) var(--r)"
-    },
-    "&[data-popper-placement=top-start] .HvBaseDropdown-panel": {
-      borderRadius: "var(--r) var(--r) var(--r) 0"
-    },
-    "&[data-popper-placement=top-end] .HvBaseDropdown-panel": {
-      borderRadius: "var(--r) var(--r) 0 var(--r)"
-    }
-  },
+  baseContainer: {},
   /** @deprecated use `classes.root` instead */
   icon: {},
   iconSelected: {

package/dist/esm/DropdownButton/DropdownButton.styles.js

@@ -28,14 +28,7 @@ const { staticClasses, useClasses } = createClasses("HvDropdownButton", {
     ...disabledStyle
   },
   open: {
-    "--r": theme.radii.base,
-    backgroundColor: theme.colors.bgContainer,
-    "&[data-popper-placement*='top']": {
-      borderRadius: "0px 0px var(--r) var(--r)"
-    },
-    "&[data-popper-placement*='bottom']": {
-      borderRadius: "var(--r) var(--r) 0px 0px"
-    }
+    backgroundColor: theme.colors.bgContainer
   },
   selection: {
     color: "inherit",

package/dist/esm/FormElement/CharCounter/CharCounter.js

@@ -15,7 +15,7 @@ const HvCharCounter = (props) => {
     className,
     id: idProp,
     disabled: disabledProp,
-    disableGutter = false,
+    disableGutter,
     ...others
   } = useDefaultProps("HvCharCounter", props);
   const { classes, cx } = useClasses(classesProp);

package/dist/esm/FormElement/Suggestions/Suggestions.styles.js

@@ -5,6 +5,7 @@ const { staticClasses, useClasses } = createClasses("HvSuggestions", {
   list: {
     backgroundColor: theme.colors.bgContainer,
     border: `1px solid ${theme.colors.text}`,
+    borderRadius: theme.radii.round,
     boxShadow: theme.colors.shadow,
     padding: theme.space.xs,
     width: "100%"
@@ -14,7 +15,12 @@ const { staticClasses, useClasses } = createClasses("HvSuggestions", {
     position: "absolute",
     zIndex: theme.zIndices.tooltip,
     ":not($portal)": {
-      transform: "translate3d(0, -1px, 0) !important"
+      "&[data-popper-placement*='top']": {
+        transform: "translate3d(0, -28px, 0) !important"
+      },
+      "&[data-popper-placement*='bottom']": {
+        transform: "translate3d(0, 2px, 0) !important"
+      }
     }
   },
   portal: {}

package/dist/esm/IconContainer/IconContainer.js

@@ -7,7 +7,7 @@ const { staticClasses, useClasses } = createClasses("HvIconContainer", {
     display: "inline-flex",
     flex: "0 0 auto",
     // ensure icon doesn't flex grow/shrink
-    fontSize: `var(--icsize, 16px)`,
+    fontSize: `var(--isize, 16px)`,
     // default size of 16px
     transition: "rotate 0.2s ease",
     justifyContent: "center",
@@ -39,21 +39,21 @@ const HvIconContainer = forwardRef(function HvIconContainer2(props, ref) {
     classes: classesProp,
     style,
     color,
-    size: sizeProp = "S",
+    size = "S",
     rotate,
     children,
     ...others
   } = useDefaultProps("HvIconContainer", props);
   const { cx, classes } = useClasses(classesProp);
-  const size = mapSizes(sizeProp);
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       className: cx(classes.root, className, {
-        [classes[size]]: size
+        [classes[mapSizes(size)]]: size
       }),
       style: mergeStyles(style, {
+        "--isize": typeof size === "number" ? `${size}px` : void 0,
         color: getColor(color),
         rotate: rotate ? "180deg" : void 0,
         ...style

package/dist/esm/Input/Input.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useMemo, useCallback, useEffect } from "react";
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
@@ -443,27 +443,24 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
             ...others
           }
         ),
-        canShowSuggestions && /* @__PURE__ */ jsxs(Fragment, { children: [
-          hasSuggestions && /* @__PURE__ */ jsx("div", { role: "presentation", className: classes.inputExtension }),
-          /* @__PURE__ */ jsx(
-            HvSuggestions,
-            {
-              id: setId(elementId, "suggestions"),
-              classes: {
-                root: classes.suggestionsContainer,
-                list: classes.suggestionList
-              },
-              expanded: hasSuggestions,
-              anchorEl: inputRef.current?.parentElement,
-              onClose: suggestionClearHandler,
-              onKeyDown: onSuggestionKeyDown,
-              onSuggestionSelected: suggestionSelectedHandler,
-              suggestionValues,
-              enablePortal,
-              popperProps: { ref: suggestionsRef }
-            }
-          )
-        ] }),
+        canShowSuggestions && /* @__PURE__ */ jsx(
+          HvSuggestions,
+          {
+            id: setId(elementId, "suggestions"),
+            classes: {
+              root: classes.suggestionsContainer,
+              list: classes.suggestionList
+            },
+            expanded: hasSuggestions,
+            anchorEl: inputRef.current?.parentElement,
+            onClose: suggestionClearHandler,
+            onKeyDown: onSuggestionKeyDown,
+            onSuggestionSelected: suggestionSelectedHandler,
+            suggestionValues,
+            enablePortal,
+            popperProps: { ref: suggestionsRef }
+          }
+        ),
         canShowError && /* @__PURE__ */ jsx(
           HvWarningText,
           {

package/dist/esm/Input/Input.styles.js

@@ -1,5 +1,4 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { staticClasses as staticClasses$1 } from "../FormElement/Suggestions/Suggestions.styles.js";
 import "../FormElement/Suggestions/Suggestions.js";
 const { staticClasses, useClasses } = createClasses("HvInput", {
@@ -29,11 +28,8 @@ const { staticClasses, useClasses } = createClasses("HvInput", {
       width: "100%"
     }
   },
-  inputExtension: {
-    height: theme.space.xs,
-    backgroundColor: theme.colors.bgContainer,
-    boxShadow: `0px 8px 0px ${theme.colors.bgContainer}, 0px 0px 9px 0px rgba(65,65,65,.12)`
-  },
+  /** @deprecated unused. use `classes.suggestionsContainer ::before` instead */
+  inputExtension: {},
   input: {},
   inputRoot: {
     ":is(:hover,:focus-within) $iconClear": {

package/dist/esm/Select/Select.styles.js

@@ -9,22 +9,15 @@ const { staticClasses, useClasses } = createClasses("HvSelect", {
   },
   disabled: {},
   readOnly: {},
-  invalid: {
-    borderColor: theme.form.errorColor
-  },
+  invalid: {},
   labelContainer: {},
   label: {},
   description: {},
-  select: {},
+  select: {
+    "&&$invalid": { borderColor: theme.form.errorColor }
+  },
   popper: {
-    zIndex: theme.zIndices.popover,
-    "--r": theme.radii.base,
-    "&[data-popper-placement*='top'] $panel": {
-      borderRadius: `var(--r) var(--r) 0 0`
-    },
-    "&[data-popper-placement*='bottom'] $panel": {
-      borderRadius: `0 0 var(--r) var(--r)`
-    }
+    zIndex: theme.zIndices.popover
   },
   panel: {
     maxHeight: 400,

package/dist/esm/TagsInput/TagsInput.js

@@ -40,6 +40,7 @@ const HvTagsInput = forwardRef(
       onBlur,
       onFocus,
       placeholder,
+      startAdornment,
       endAdornment,
       hideCounter,
       middleCountLabel = "/",
@@ -316,6 +317,7 @@ const HvTagsInput = forwardRef(
               children: hasCounter && /* @__PURE__ */ jsx(
                 HvCharCounter,
                 {
+                  disableGutter: true,
                   id: setId(elementId, "charCounter"),
                   className: classes.characterCounter,
                   separator: middleCountLabel,
@@ -358,6 +360,7 @@ const HvTagsInput = forwardRef(
                     `${label2}-${i}`
                   );
                 }),
+                !disabled && !readOnly && startAdornment,
                 !disabled && !readOnly && /* @__PURE__ */ jsx(
                   "input",
                   {

package/dist/esm/TagsInput/TagsInput.styles.js

@@ -54,7 +54,7 @@ const { staticClasses, useClasses } = createClasses("HvTagsInput", {
     backgroundColor: theme.colors.bgContainer,
     borderWidth: 1,
     borderColor: theme.colors.textSubtle,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.round,
     "&:hover": {
       borderColor: theme.colors.primary
     },

package/dist/esm/TextArea/TextArea.js

@@ -213,6 +213,7 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
             children: hasCounter && /* @__PURE__ */ jsx(
               HvCharCounter,
               {
+                disableGutter: true,
                 id: setId(elementId, "charCounter"),
                 className: classes.characterCounter,
                 separator: middleCountLabel,

package/dist/esm/VerticalNavigation/VerticalNavigation.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useMemo, useCallback } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { fillDataWithParentId, getParentItemById, getNavigationItemById } from "./NavigationSlider/utils.js";
-import { hasChildNavigationItems } from "./utils/VerticalNavigation.utils.js";
 import { useClasses } from "./VerticalNavigation.styles.js";
 import { staticClasses } from "./VerticalNavigation.styles.js";
 import { VerticalNavigationContext } from "./VerticalNavigationContext.js";
@@ -30,7 +29,7 @@ const HvVerticalNavigation = forwardRef(function HvVerticalNavigation2(props, re
   );
   const [parentItem, setParentItem] = useState(initialParentItem);
   const hasAnyChildWithData = useMemo(
-    () => hasChildNavigationItems(parentData),
+    () => parentData.some((item) => item.data && item.data.length > 0),
     [parentData]
   );
   const headerTitle = useMemo(() => parentItem?.label, [parentItem]);

package/dist/esm/icons.js

@@ -19,8 +19,8 @@ const SvgBase = styled("svg")({
   flexShrink: 0,
   transition: "rotate 0.2s ease"
 });
-const Svg = styled(SvgBase)(({ size, color, compact, rotate }) => ({
-  rotate: rotate ? "180deg" : void 0,
+const Svg = styled(SvgBase)(({ size, color, compact, rotation }) => ({
+  rotate: rotation ? "180deg" : void 0,
   margin: compact ? 0 : size === "xs" ? 10 : 8,
   color: getColor(color) ?? "inherit",
   fontSize: svgSizeMap[size] ?? size ?? svgSizeMap.sm
@@ -63,31 +63,29 @@ const defaultIconPathMap = {
   Remove: "M0 7.5h16v1H0z"
 };
 function HvIconInternal(props, ref) {
-  const { name, title, "aria-label": ariaLabel, children, ...others } = props;
+  const { name, title, "aria-label": ariaLabel, rotate, ...others } = props;
   const { activeTheme } = useTheme();
   const iconsPathMap = useMemo(
     () => ({ ...defaultIconPathMap, ...activeTheme?.icons }),
     [activeTheme?.icons]
   );
   const isDefaultIcon = iconsPathMap[name] === defaultIconPathMap[name];
-  return (
-    // @ts-expect-error `rotate` is fine
-    /* @__PURE__ */ jsxs(
-      Svg,
-      {
-        ref,
-        "data-name": name,
-        viewBox: !isDefaultIcon && activeTheme?.icons?.viewBox || "0 0 16 16",
-        focusable: false,
-        "aria-label": ariaLabel,
-        role: title || ariaLabel ? "img" : "none",
-        ...others,
-        children: [
-          title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
-          /* @__PURE__ */ jsx("path", { d: iconsPathMap[name] })
-        ]
-      }
-    )
+  return /* @__PURE__ */ jsxs(
+    Svg,
+    {
+      ref,
+      "data-name": name,
+      rotation: rotate,
+      viewBox: !isDefaultIcon && activeTheme?.icons?.viewBox || "0 0 16 16",
+      focusable: false,
+      "aria-label": ariaLabel,
+      role: title || ariaLabel ? "img" : "none",
+      ...others,
+      children: [
+        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+        /* @__PURE__ */ jsx("path", { d: iconsPathMap[name] })
+      ]
+    }
   );
 }
 const HvIcon = memo(forwardRef(HvIconInternal));

package/dist/esm/utils/Callout.js

@@ -12,7 +12,8 @@ const { useClasses } = createClasses("HvCallout", {
     position: "relative",
     boxShadow: "none",
     flexWrap: "nowrap",
-    padding: 0
+    padding: 0,
+    borderRadius: theme.radii.round
   },
   success: {
     backgroundColor: theme.colors.positiveDimmed
@@ -44,7 +45,8 @@ const { useClasses } = createClasses("HvCallout", {
     wordBreak: "break-word"
   },
   messageIcon: {
-    lineHeight: 0
+    lineHeight: 0,
+    flexShrink: 0
   },
   messageTitle: {
     display: "block",

package/dist/esm/utils/focusUtils.js

@@ -1,4 +1,6 @@
 const outlineStyles = {
+  outline: "none",
+  // remove the default outlines
   boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
 };
 export {