@hitachivantara/uikit-react-core 5.107.0 → 5.108.1

package/dist/cjs/Header/Actions/Actions.styles.cjs

@@ -2,18 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const Button_styles = require("../../Button/Button.styles.cjs");
-require("../../Button/Button.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvHeader-Actions", {
   root: {
     backgroundColor: "transparent",
     display: "flex",
     gap: uikitStyles.theme.space.xs,
     alignItems: "center",
-    marginLeft: "auto",
-    [`& .${Button_styles.staticClasses?.root}`]: {
-      "&:hover": { backgroundColor: uikitStyles.theme.colors.bgHover }
-    }
+    justifyContent: "flex-end",
+    marginLeft: "auto"
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Header/Header.styles.cjs

@@ -26,6 +26,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvHeader",
     }
   },
   fixed: { position: "fixed", top: 0, left: "auto", right: 0 },
+  /** @deprecated use `classes.root` instead */
   backgroundColor: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/OverflowTooltip/OverflowTooltip.cjs

@@ -6,7 +6,6 @@ const reactResizeDetector = require("react-resize-detector");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const OverflowTooltip_styles = require("./OverflowTooltip.styles.cjs");
 const Tooltip = require("../Tooltip/Tooltip.cjs");
-const Typography = require("../Typography/Typography.cjs");
 const isParagraph = (children = "") => /\s/.test(children);
 const HvOverflowTooltip = (props) => {
   const {
@@ -75,7 +74,8 @@ const HvOverflowTooltip = (props) => {
       disableHoverListener: !isOverflowing,
       open,
       placement,
-      title: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.tooltipData, variant: "body", children: data }),
+      classes: { tooltip: classes.tooltipData },
+      title: data,
       "aria-label": null,
       "aria-labelledby": null,
       ...tooltipsProps,

package/dist/cjs/SearchInput/SearchInput.styles.cjs

@@ -1,9 +1,8 @@
 "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("HvSearchInput", {
-  root: { paddingLeft: uikitStyles.theme.space.xs },
+  root: {},
   input: { marginLeft: 0 }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/StatusIcon/StatusIcon.styles.cjs

@@ -16,37 +16,32 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvStatusIco
     lineHeight: 0,
     flexShrink: 0,
     padding: uikitStyles.theme.space.xxs,
+    borderRadius: uikitStyles.theme.radii.base,
     "--icsize": "auto",
-    [`&[data-size=xs]`]: { borderRadius: uikitStyles.theme.radii.base },
-    [`&[data-size=sm]`]: { borderRadius: uikitStyles.theme.radii.base },
-    [`&[data-size=md]`]: { borderRadius: uikitStyles.theme.radii.round },
-    [`&[data-size=lg]`]: { borderRadius: uikitStyles.theme.radii.large },
-    [`&[data-size=xl]`]: { borderRadius: uikitStyles.theme.radii.large },
-    [`:not([data-type="simple"])`]: {
+    ":where([data-size=md])": { borderRadius: uikitStyles.theme.radii.round },
+    ":where([data-size=lg])": { borderRadius: uikitStyles.theme.radii.large },
+    ":where([data-size=xl])": { borderRadius: uikitStyles.theme.radii.large },
+    ":where([data-type=full])": {
       outline: "1px solid currentcolor"
     },
     ...Object.fromEntries(
       Object.entries(notificationMap).map(([variant, color]) => [
-        [`&[data-variant="${variant}"]`],
+        [`:where([data-variant=${variant}])`],
         {
           color: uikitStyles.theme.colors[color],
           outline: `1px solid ${uikitStyles.theme.colors[`${color}Border`]}`,
           backgroundColor: uikitStyles.theme.colors[`${color}Dimmed`],
-          [`&[data-type="simple"]`]: {
+          ":where([data-type=simple])": {
             outline: "none",
             backgroundColor: "transparent"
           }
         }
       ])
     ),
-    [`&[data-variant="default"]`]: {
+    ":where([data-variant=default][data-type=full])": {
       color: uikitStyles.theme.colors.text,
       backgroundColor: uikitStyles.theme.colors.bgPage,
-      outline: `1px solid ${uikitStyles.theme.colors.borderSubtle}`,
-      [`&[data-type="simple"]`]: {
-        outline: "none",
-        backgroundColor: "transparent"
-      }
+      outline: `1px solid ${uikitStyles.theme.colors.borderSubtle}`
     }
   },
   icon: {

package/dist/cjs/Tooltip/Tooltip.cjs

@@ -26,7 +26,7 @@ const HvTooltip = React.forwardRef(function HvTooltip2(props, ref) {
     ...others
   } = uikitReactUtils.useDefaultProps("HvTooltip", props);
   const { rootId } = uikitReactUtils.useTheme();
-  const { classes } = Tooltip_styles.useClasses(classesProp);
+  const { classes, cx } = Tooltip_styles.useClasses(classesProp);
   const [container, setContainer] = React.useState(
     () => document.getElementById(containerId ?? rootId)
   );
@@ -44,7 +44,7 @@ const HvTooltip = React.forwardRef(function HvTooltip2(props, ref) {
       TransitionProps,
       className,
       classes: {
-        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,
+        tooltip: cx(classes.tooltip, !useSingle && classes.tooltipMulti),
         popper: classes.popper
       },
       title,

package/dist/cjs/Tooltip/Tooltip.styles.cjs

@@ -5,17 +5,19 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTooltip", {
   root: {},
-  tooltip: {},
+  tooltip: {
+    ...uikitStyles.theme.typography.body,
+    display: "flex",
+    width: "fit-content",
+    maxWidth: 532,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
+    boxShadow: uikitStyles.theme.colors.shadow,
+    padding: uikitStyles.theme.space.sm,
+    borderRadius: uikitStyles.theme.radii.round
+  },
   popper: {
-    // TODO: move this to `tooltip` in v6 and make class always be applied
+    // TODO: remove these overrides in v6
     [`& .${Tooltip.tooltipClasses.tooltip}`]: {
-      ...uikitStyles.theme.typography.body,
-      display: "flex",
-      width: "fit-content",
-      maxWidth: 532,
-      backgroundColor: uikitStyles.theme.colors.bgContainer,
-      boxShadow: uikitStyles.theme.colors.shadow,
-      padding: 0,
       "& p": {
         display: "-webkit-box",
         width: "fit-content",
@@ -52,8 +54,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTooltip",
       padding: uikitStyles.theme.space.sm
     },
     "& $tooltip": {
-      padding: uikitStyles.theme.space.sm,
-      borderRadius: uikitStyles.theme.radii.round,
       "& p": {
         wordBreak: "break-word"
       }

package/dist/cjs/themes/pentahoPlus.cjs

@@ -15,6 +15,7 @@ const inputColors = {
   bg: ld("#FFFFFF", "#020617")
 };
 const popperStyles = {
+  margin: uikitStyles.theme.spacing("xxs", 0),
   backgroundColor: uikitStyles.theme.colors.bgContainer,
   border: `1px solid ${uikitStyles.theme.colors.borderSubtle}`,
   borderRadius: uikitStyles.theme.radii.large,
@@ -863,6 +864,13 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
           borderRadius: uikitStyles.theme.radii.none
         }
       }
+    },
+    HvTooltip: {
+      classes: {
+        tooltip: {
+          padding: uikitStyles.theme.spacing("xs", "sm")
+        }
+      }
     }
   }
 });

package/dist/esm/Header/Actions/Actions.styles.js

@@ -1,17 +1,13 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { staticClasses as staticClasses$1 } from "../../Button/Button.styles.js";
-import "../../Button/Button.js";
 const { staticClasses, useClasses } = createClasses("HvHeader-Actions", {
   root: {
     backgroundColor: "transparent",
     display: "flex",
     gap: theme.space.xs,
     alignItems: "center",
-    marginLeft: "auto",
-    [`& .${staticClasses$1?.root}`]: {
-      "&:hover": { backgroundColor: theme.colors.bgHover }
-    }
+    justifyContent: "flex-end",
+    marginLeft: "auto"
   }
 });
 export {

package/dist/esm/Header/Header.styles.js

@@ -24,6 +24,7 @@ const { staticClasses, useClasses } = createClasses("HvHeader", {
     }
   },
   fixed: { position: "fixed", top: 0, left: "auto", right: 0 },
+  /** @deprecated use `classes.root` instead */
   backgroundColor: {}
 });
 export {

package/dist/esm/OverflowTooltip/OverflowTooltip.js

@@ -5,7 +5,6 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./OverflowTooltip.styles.js";
 import { staticClasses } from "./OverflowTooltip.styles.js";
 import { HvTooltip } from "../Tooltip/Tooltip.js";
-import { HvTypography } from "../Typography/Typography.js";
 const isParagraph = (children = "") => /\s/.test(children);
 const HvOverflowTooltip = (props) => {
   const {
@@ -74,7 +73,8 @@ const HvOverflowTooltip = (props) => {
       disableHoverListener: !isOverflowing,
       open,
       placement,
-      title: /* @__PURE__ */ jsx(HvTypography, { className: classes.tooltipData, variant: "body", children: data }),
+      classes: { tooltip: classes.tooltipData },
+      title: data,
       "aria-label": null,
       "aria-labelledby": null,
       ...tooltipsProps,

package/dist/esm/SearchInput/SearchInput.styles.js

@@ -1,7 +1,6 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvSearchInput", {
-  root: { paddingLeft: theme.space.xs },
+  root: {},
   input: { marginLeft: 0 }
 });
 export {

package/dist/esm/StatusIcon/StatusIcon.styles.js

@@ -14,37 +14,32 @@ const { staticClasses, useClasses } = createClasses("HvStatusIcon", {
     lineHeight: 0,
     flexShrink: 0,
     padding: theme.space.xxs,
+    borderRadius: theme.radii.base,
     "--icsize": "auto",
-    [`&[data-size=xs]`]: { borderRadius: theme.radii.base },
-    [`&[data-size=sm]`]: { borderRadius: theme.radii.base },
-    [`&[data-size=md]`]: { borderRadius: theme.radii.round },
-    [`&[data-size=lg]`]: { borderRadius: theme.radii.large },
-    [`&[data-size=xl]`]: { borderRadius: theme.radii.large },
-    [`:not([data-type="simple"])`]: {
+    ":where([data-size=md])": { borderRadius: theme.radii.round },
+    ":where([data-size=lg])": { borderRadius: theme.radii.large },
+    ":where([data-size=xl])": { borderRadius: theme.radii.large },
+    ":where([data-type=full])": {
       outline: "1px solid currentcolor"
     },
     ...Object.fromEntries(
       Object.entries(notificationMap).map(([variant, color]) => [
-        [`&[data-variant="${variant}"]`],
+        [`:where([data-variant=${variant}])`],
         {
           color: theme.colors[color],
           outline: `1px solid ${theme.colors[`${color}Border`]}`,
           backgroundColor: theme.colors[`${color}Dimmed`],
-          [`&[data-type="simple"]`]: {
+          ":where([data-type=simple])": {
             outline: "none",
             backgroundColor: "transparent"
           }
         }
       ])
     ),
-    [`&[data-variant="default"]`]: {
+    ":where([data-variant=default][data-type=full])": {
       color: theme.colors.text,
       backgroundColor: theme.colors.bgPage,
-      outline: `1px solid ${theme.colors.borderSubtle}`,
-      [`&[data-type="simple"]`]: {
-        outline: "none",
-        backgroundColor: "transparent"
-      }
+      outline: `1px solid ${theme.colors.borderSubtle}`
     }
   },
   icon: {

package/dist/esm/Tooltip/Tooltip.js

@@ -22,7 +22,7 @@ const HvTooltip = forwardRef(function HvTooltip2(props, ref) {
     ...others
   } = useDefaultProps("HvTooltip", props);
   const { rootId } = useTheme();
-  const { classes } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const [container, setContainer] = useState(
     () => getElementById(containerId ?? rootId)
   );
@@ -40,7 +40,7 @@ const HvTooltip = forwardRef(function HvTooltip2(props, ref) {
       TransitionProps,
       className,
       classes: {
-        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,
+        tooltip: cx(classes.tooltip, !useSingle && classes.tooltipMulti),
         popper: classes.popper
       },
       title,

package/dist/esm/Tooltip/Tooltip.styles.js

@@ -3,17 +3,19 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvTooltip", {
   root: {},
-  tooltip: {},
+  tooltip: {
+    ...theme.typography.body,
+    display: "flex",
+    width: "fit-content",
+    maxWidth: 532,
+    backgroundColor: theme.colors.bgContainer,
+    boxShadow: theme.colors.shadow,
+    padding: theme.space.sm,
+    borderRadius: theme.radii.round
+  },
   popper: {
-    // TODO: move this to `tooltip` in v6 and make class always be applied
+    // TODO: remove these overrides in v6
     [`& .${tooltipClasses.tooltip}`]: {
-      ...theme.typography.body,
-      display: "flex",
-      width: "fit-content",
-      maxWidth: 532,
-      backgroundColor: theme.colors.bgContainer,
-      boxShadow: theme.colors.shadow,
-      padding: 0,
       "& p": {
         display: "-webkit-box",
         width: "fit-content",
@@ -50,8 +52,6 @@ const { staticClasses, useClasses } = createClasses("HvTooltip", {
       padding: theme.space.sm
     },
     "& $tooltip": {
-      padding: theme.space.sm,
-      borderRadius: theme.radii.round,
       "& p": {
         wordBreak: "break-word"
       }

package/dist/esm/themes/pentahoPlus.js

@@ -13,6 +13,7 @@ const inputColors = {
   bg: ld("#FFFFFF", "#020617")
 };
 const popperStyles = {
+  margin: theme.spacing("xxs", 0),
   backgroundColor: theme.colors.bgContainer,
   border: `1px solid ${theme.colors.borderSubtle}`,
   borderRadius: theme.radii.large,
@@ -861,6 +862,13 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
           borderRadius: theme.radii.none
         }
       }
+    },
+    HvTooltip: {
+      classes: {
+        tooltip: {
+          padding: theme.spacing("xs", "sm")
+        }
+      }
     }
   }
 });

package/dist/types/index.d.ts

@@ -1078,7 +1078,7 @@ export declare interface HvAccordionProps extends HvBaseProps<HTMLDivElement, "o
     /** Content to be rendered. */
     children: React.ReactNode;
     /** The accordion label button. */
-    label?: string;
+    label?: React.ReactNode;
     /** The function that will be executed whenever the accordion toggles. It will receive the state of the accordion. */
     onChange?: (event: React.SyntheticEvent, value: boolean) => void;
     /** Whether the accordion is open or not. If this property is defined the accordion must be fully controlled. */
@@ -1437,7 +1437,7 @@ export declare interface HvBannerProps extends Omit<SnackbarProps, "anchorOrigin
      * */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /** The message to display. */
-    label?: string;
+    label?: React.ReactNode;
     /** The anchor of the Snackbar. */
     anchorOrigin?: "top" | "bottom";
     /** Variant of the snackbar. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.107.0",
+  "version": "5.108.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Core React components.",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "e34acd74656ecb0ad2c31d6afaed30a00d58a8ca",
+  "gitHead": "56ce37eb93012ec3cfc42d95912896cad5a912c3",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",