@hitachivantara/uikit-react-core 5.88.0 → 5.89.0

package/dist/cjs/ActionsGeneric/ActionsGeneric.cjs

@@ -64,8 +64,7 @@ const HvActionsGeneric = React.forwardRef(function HvActionsGeneric2(props, ref)
   const renderActionsGrid = () => {
     const actsVisible = actions.slice(0, maxVisibleActions);
     const actsDropdown = actions.slice(maxVisibleActions);
-    const semantic = variant === "semantic";
-    const iconColor = disabled && "secondary_60" || semantic && "base_dark" || void 0;
+    const iconColor = variant === "semantic" && "base_dark" || void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       actsVisible.map((action, idx) => renderButton(action, idx)),
       /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/AppSwitcher/Action/Action.styles.cjs

@@ -26,7 +26,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       borderLeft: `solid 2px ${uikitStyles.theme.colors.secondary}`,
       cursor: "pointer",
       textDecoration: "inherit",
-      color: "inherit",
       backgroundColor: "inherit",
       "$disabled &": {
         cursor: "not-allowed"
@@ -38,7 +37,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       textAlign: "left",
       margin: `0 ${uikitStyles.theme.space.xs}`,
       textWrap: "balance",
-      ...uikitStyles.theme.typography.label
+      ...uikitStyles.theme.typography.label,
+      color: "inherit"
     },
     titleAnchor: {
       WebkitLineClamp: 2

package/dist/cjs/Banner/Banner.cjs

@@ -19,17 +19,17 @@ const HvBanner = React.forwardRef(function HvBanner2(props, ref) {
     open,
     onClose,
     anchorOrigin = "top",
-    variant = "default",
+    variant,
     transitionDuration = 300,
     transitionDirection = "down",
     container,
-    showIcon = false,
+    showIcon,
     customIcon,
     actions,
     actionsCallback,
     // TODO - remove in v6
     onAction,
-    actionsPosition = "auto",
+    actionsPosition,
     label,
     offset = 60,
     bannerContentProps,
@@ -72,7 +72,6 @@ const HvBanner = React.forwardRef(function HvBanner2(props, ref) {
         BannerContent.HvBannerContent,
         {
           id: setId.setId(id, "content"),
-          content: label,
           variant,
           customIcon,
           showIcon,
@@ -81,7 +80,8 @@ const HvBanner = React.forwardRef(function HvBanner2(props, ref) {
           onAction,
           actionsPosition,
           onClose,
-          ...bannerContentProps
+          ...bannerContentProps,
+          children: label
         }
       )
     }

package/dist/cjs/Banner/BannerContent/BannerContent.cjs

@@ -2,107 +2,69 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const SnackbarContent = require("@mui/material/SnackbarContent");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const iconVariant = require("../../utils/iconVariant.cjs");
-const setId = require("../../utils/setId.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const Callout = require("../../utils/Callout.cjs");
 const BannerContent_styles = require("./BannerContent.styles.cjs");
-const Button = require("../../Button/Button.cjs");
-const ActionsGeneric = require("../../ActionsGeneric/ActionsGeneric.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const SnackbarContent__default = /* @__PURE__ */ _interopDefault(SnackbarContent);
-const HvBannerContent = React.forwardRef(
-  function HvBannerContent2(props, ref) {
-    const {
+const HvBannerContent = React.forwardRef(function HvBannerContent2(props, ref) {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    showIcon,
+    customIcon,
+    variant = "default",
+    onClose,
+    actions,
+    actionsCallback,
+    // TODO - remove in v6
+    onAction,
+    actionsPosition = "auto",
+    content,
+    children,
+    actionProps,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvBannerContent", props);
+  const { classes, cx } = BannerContent_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Callout.HvCallout,
+    {
+      ref,
       id,
-      classes: classesProp,
-      className,
-      showIcon = false,
+      variant,
+      showClose: true,
+      showIcon,
       customIcon,
-      variant = "default",
-      onClose,
+      classes: {
+        root: cx(
+          classes.root,
+          classes.outContainer,
+          classes.baseVariant,
+          classes[variant],
+          className
+        ),
+        message: classes.message,
+        action: classes.action,
+        messageIcon: classes.iconContainer,
+        messageContent: classes.messageContainer,
+        actionCustom: classes.messageActions,
+        actionContent: cx(
+          classes.actionContainer,
+          classes.actionsInnerContainer
+        ),
+        actionClose: classes.closeAction
+      },
       actions,
-      actionsCallback,
-      // TODO - remove in v6
-      onAction,
-      actionsPosition = "auto",
-      content,
-      children,
+      actionsPosition,
       actionProps,
-      ...others
-    } = props;
-    const { classes, cx } = BannerContent_styles.useClasses(classesProp);
-    const icon = customIcon || showIcon && iconVariant.iconVariant(variant, "base_dark");
-    const effectiveActionsPosition = actionsPosition === "auto" ? "inline" : actionsPosition;
-    const handleAction = (evt, action) => {
-      onAction?.(evt, action);
-      actionsCallback?.(evt, id, action);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      SnackbarContent__default.default,
-      {
-        ref,
-        id,
-        classes: {
-          root: classes.root,
-          message: classes.message,
-          action: classes.action
-        },
-        className: cx(classes.baseVariant, classes[variant], className),
-        message: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.iconContainer, children: icon }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              id: setId.setId(id, "message-text"),
-              className: classes.messageContainer,
-              children: children ?? content
-            }
-          ),
-          actions && effectiveActionsPosition === "inline" && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              id: setId.setId(id, "message-actions"),
-              className: classes.messageActions,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                ActionsGeneric.HvActionsGeneric,
-                {
-                  id,
-                  variant: "semantic",
-                  actions,
-                  onAction: handleAction
-                }
-              )
-            }
-          )
-        ] }),
-        action: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.actionContainer, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button.HvButton,
-            {
-              icon: true,
-              className: classes.closeAction,
-              variant: "semantic",
-              "aria-label": "Close",
-              onClick: onClose,
-              ...actionProps,
-              children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { size: "XS" })
-            }
-          ),
-          actions && effectiveActionsPosition === "bottom-right" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actionsInnerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-            ActionsGeneric.HvActionsGeneric,
-            {
-              id,
-              variant: "semantic",
-              actions,
-              onAction: handleAction
-            }
-          ) })
-        ] }),
-        ...others
-      }
-    ) });
-  }
-);
+      onClose: (evt) => onClose?.(evt),
+      onAction: (evt, action) => {
+        onAction?.(evt, action);
+        actionsCallback?.(evt, id, action);
+      },
+      ...others,
+      children: children ?? content
+    }
+  );
+});
 exports.bannerContentClasses = BannerContent_styles.staticClasses;
 exports.HvBannerContent = HvBannerContent;

package/dist/cjs/Banner/BannerContent/BannerContent.styles.cjs

@@ -5,72 +5,44 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBannerContent", {
   root: {
     minWidth: "100%",
+    width: "100%",
     position: "relative",
-    display: "flex",
-    flexWrap: "nowrap",
-    boxShadow: "none",
+    gap: uikitStyles.theme.space.xs,
     borderRadius: uikitStyles.theme.radii.none
   },
+  success: {},
+  warning: {},
+  error: {},
+  default: {},
   message: {
-    display: "flex",
-    alignItems: "center",
+    gap: uikitStyles.theme.space.xs,
     padding: uikitStyles.theme.spacing("xs", 0),
     paddingLeft: uikitStyles.theme.space.sm,
     ...uikitStyles.theme.typography.body,
     color: uikitStyles.theme.colors.base_dark
   },
   action: {
-    padding: uikitStyles.theme.spacing("xs"),
-    marginRight: 0,
+    padding: uikitStyles.theme.space.xs,
     flex: "0 0 auto",
     placeSelf: "stretch"
   },
-  baseVariant: {
-    padding: 0
-  },
-  success: {
-    backgroundColor: uikitStyles.theme.colors.positive_20
-  },
-  warning: {
-    backgroundColor: uikitStyles.theme.colors.warning_20
-  },
-  error: {
-    backgroundColor: uikitStyles.theme.colors.negative_20
-  },
-  default: {
-    backgroundColor: uikitStyles.theme.colors.neutral_20
-  },
-  outContainer: {
-    width: "100%",
-    position: "relative"
-  },
   messageContainer: {
-    wordBreak: "break-word",
-    maxWidth: 700,
-    overflow: "hidden",
-    marginRight: 10
+    maxWidth: 700
   },
   iconContainer: {
-    marginRight: uikitStyles.theme.space.xs,
-    marginLeft: -uikitStyles.theme.space.xs
+    marginLeft: uikitStyles.theme.spacing(-1)
   },
   messageActions: {
     flex: "0 0 auto"
   },
-  actionContainer: {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    justifyContent: "space-between"
-  },
-  actionsInnerContainer: {
-    flexDirection: "row",
-    marginTop: "8px"
-    // avoid overlap with close button outline focus ring
-  },
-  closeAction: {
-    alignSelf: "flex-end"
-  }
+  actionContainer: {},
+  closeAction: {},
+  /** @deprecated use ´classes.root` instead */
+  baseVariant: {},
+  /** @deprecated use `classes.root` instead */
+  outContainer: {},
+  /** @deprecated use `classes.actionContainer` instead */
+  actionsInnerContainer: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/BaseDropdown/BaseDropdown.styles.cjs

@@ -79,8 +79,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
     height: "30px",
     boxSizing: "border-box",
     paddingLeft: uikitStyles.theme.space.xs,
-    paddingRight: uikitStyles.theme.sizes.sm,
-    color: "inherit"
+    paddingRight: uikitStyles.theme.sizes.sm
   },
   selectionDisabled: {},
   placeholder: {

package/dist/cjs/Button/Button.cjs

@@ -30,7 +30,7 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
     endIcon,
     size,
     radius,
-    overrideIconColors = true,
+    overrideIconColors,
     component: Component = "button",
     focusableWhenDisabled,
     onClick: onClickProp,
@@ -68,7 +68,6 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
         classes[variant],
         classes[variantProp],
         // Placed after type and color CSS for DS3 override
-        overrideIconColors && css(Button_styles.getOverrideColors()),
         {
           [classes.icon]: icon,
           [classes.disabled]: disabled

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

@@ -130,13 +130,7 @@ const getIconSizeStyles = (size) => {
     width: height
   };
 };
-const getOverrideColors = () => ({
-  "& svg .color0": {
-    fill: "currentcolor"
-  }
-});
 exports.getIconSizeStyles = getIconSizeStyles;
-exports.getOverrideColors = getOverrideColors;
 exports.getSizeStyles = getSizeStyles;
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

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

@@ -15,6 +15,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvDotPagina
     height: 16,
     width: 16,
     minWidth: 16,
+    color: "inherit",
     "&:hover": {
       backgroundColor: uikitStyles.theme.colors.neutral_20,
       borderRadius: "100%"
@@ -24,7 +25,9 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvDotPagina
     minWidth: 0,
     width: 16,
     height: 16,
+    color: "inherit",
     "&& svg": {
+      color: "inherit",
       border: "none",
       width: "unset",
       height: "unset"

package/dist/cjs/FormElement/Adornment/Adornment.styles.cjs

@@ -1,7 +1,6 @@
 "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("HvAdornment", {
   root: {
     width: 32,
@@ -16,9 +15,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAdornment
   hideIcon: { display: "none" },
   /** @deprecated use `classes.root` */
   adornmentButton: {},
-  disabled: {
-    "& svg *.color0": { fill: uikitStyles.theme.colors.secondary_60 }
-  }
+  disabled: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/IconContainer/IconContainer.cjs

@@ -0,0 +1,81 @@
+"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 { staticClasses, useClasses } = uikitReactUtils.createClasses("HvIconContainer", {
+  root: {
+    display: "inline-flex",
+    flex: "0 0 auto",
+    // ensure icon doesn't flex grow/shrink
+    fontSize: `var(--icsize, 16px)`,
+    // default size of 16px
+    transition: "rotate 0.2s ease",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 8
+    // default padding
+    // we're assuming svg children inherits from text color and size
+  },
+  xs: {
+    fontSize: 12,
+    padding: 10
+  },
+  sm: {
+    fontSize: 16
+  },
+  md: {
+    fontSize: 32
+  },
+  lg: {
+    fontSize: 96
+  },
+  xl: {
+    fontSize: 112
+  }
+});
+const HvIconContainer = React.forwardRef(function HvIconContainer2(props, ref) {
+  const {
+    className,
+    classes: classesProp,
+    style,
+    color,
+    size: sizeProp = "S",
+    rotate,
+    children,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvIconContainer", props);
+  const { cx, classes } = useClasses(classesProp);
+  const size = mapSizes(sizeProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cx(classes.root, className, {
+        [classes[size]]: size
+      }),
+      style: uikitReactUtils.mergeStyles(style, {
+        color: uikitStyles.getColor(color),
+        rotate: rotate ? "180deg" : void 0,
+        ...style
+      }),
+      ...others,
+      children
+    }
+  );
+});
+function mapSizes(size) {
+  if (typeof size === "number") return void 0;
+  const iconSizeMap = {
+    XS: "xs",
+    S: "sm",
+    M: "md",
+    L: "lg"
+  };
+  return iconSizeMap[size] || size;
+}
+exports.HvIconContainer = HvIconContainer;
+exports.iconContainerClasses = staticClasses;
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/ListContainer/ListItem/ListItem.styles.cjs

@@ -62,9 +62,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListItem"
     "& svg": {
       boxShadow: "none !important",
       outline: "none !important"
-    },
-    "$disabled > svg *.color0": {
-      fill: uikitStyles.theme.colors.secondary_60
     }
   },
   withEndAdornment: {
@@ -72,9 +69,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListItem"
     "& svg": {
       boxShadow: "none !important",
       outline: "none !important"
-    },
-    "$disabled > svg *.color0": {
-      fill: uikitStyles.theme.colors.secondary_60
     }
   }
 });

package/dist/cjs/Loading/Loading.cjs

@@ -6,7 +6,6 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const helpers = require("../utils/helpers.cjs");
 const Loading_styles = require("./Loading.styles.cjs");
-const Typography = require("../Typography/Typography.cjs");
 const HvLoading = React.forwardRef(function HvLoading2(props, ref) {
   const {
     color,
@@ -51,7 +50,7 @@ const HvLoading = React.forwardRef(function HvLoading2(props, ref) {
           },
           e
         )) }),
-        label && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "caption1", className: classes.label, children: label })
+        label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.label, children: label })
       ]
     }
   );

package/dist/cjs/Loading/Loading.styles.cjs

@@ -40,7 +40,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLoading",
     ":nth-of-type(2)": { animationDelay: "0.22s" },
     ":nth-of-type(3)": { animationDelay: "0.44s" }
   },
-  label: {},
+  label: {
+    ...uikitStyles.theme.typography.caption1
+  },
   overlay: {},
   blur: {},
   hidden: { display: "none" },

package/dist/cjs/Snackbar/Snackbar.cjs

@@ -19,13 +19,13 @@ const HvSnackbar = React.forwardRef(function HvSnackbar2(props, ref) {
     id,
     open = false,
     onClose,
-    label = "",
+    label,
     anchorOrigin = { vertical: "top", horizontal: "right" },
     autoHideDuration = 5e3,
-    variant = "default",
-    showIcon = false,
-    customIcon = null,
-    action = null,
+    variant,
+    showIcon,
+    customIcon,
+    action,
     actionCallback,
     // TODO - remove in v6
     onAction,
@@ -82,6 +82,7 @@ const HvSnackbar = React.forwardRef(function HvSnackbar2(props, ref) {
           action,
           actionCallback,
           onAction,
+          onClose,
           ...snackbarContentProps
         }
       )

package/dist/cjs/Snackbar/SnackbarContent/SnackbarContent.cjs

@@ -2,14 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const SnackbarContent = require("@mui/material/SnackbarContent");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const iconVariant = require("../../utils/iconVariant.cjs");
-const setId = require("../../utils/setId.cjs");
+const Callout = require("../../utils/Callout.cjs");
 const SnackbarContent_styles = require("./SnackbarContent.styles.cjs");
-const ActionsGeneric = require("../../ActionsGeneric/ActionsGeneric.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const SnackbarContent__default = /* @__PURE__ */ _interopDefault(SnackbarContent);
+const isActionGeneric = (action) => action && typeof action === "object" && "id" in action && "label" in action;
 const HvSnackbarContent = React.forwardRef(function HvSnackbarContent2(props, ref) {
   const {
     className,
@@ -23,37 +19,33 @@ const HvSnackbarContent = React.forwardRef(function HvSnackbarContent2(props, re
     actionCallback,
     // TODO - remove in v6
     onAction,
+    onClose,
     ...others
   } = uikitReactUtils.useDefaultProps("HvSnackbarContent", props);
-  const icon = customIcon || showIcon && iconVariant.iconVariant(variant, "base_dark");
-  const innerAction = React.isValidElement(action) ? action : [action];
   const { classes, cx } = SnackbarContent_styles.useClasses(classesProp);
-  const { activeTheme } = uikitReactUtils.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SnackbarContent__default.default,
+    Callout.HvCallout,
     {
       ref,
       id,
+      variant,
       classes: {
-        root: classes.root,
-        message: classes.message
+        root: cx(classes.root, classes[variant], className),
+        message: cx(classes.message, classes.messageSpan),
+        messageIcon: classes.iconVariant,
+        messageContent: classes.messageText,
+        action: classes.action
       },
-      className: cx(classes?.[variant], className),
-      message: /* @__PURE__ */ jsxRuntime.jsxs("div", { id: setId.setId(id, "message"), className: classes.messageSpan, children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.iconVariant, children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.messageText, children: label }),
-        action && /* @__PURE__ */ jsxRuntime.jsx("div", { id: setId.setId(id, "action"), className: classes.action, children: /* @__PURE__ */ jsxRuntime.jsx(
-          ActionsGeneric.HvActionsGeneric,
-          {
-            id,
-            variant: activeTheme?.snackbar.actionButtonVariant,
-            actions: innerAction,
-            actionsCallback: actionCallback,
-            onAction
-          }
-        ) })
-      ] }),
-      ...others
+      showIcon,
+      customIcon,
+      actions: isActionGeneric(action) ? [action] : action,
+      onClose,
+      onAction: (evt, action2) => {
+        onAction?.(evt, action2);
+        actionCallback?.(evt, id, action2);
+      },
+      ...others,
+      children: label
     }
   );
 });