@hitachivantara/uikit-react-core 5.74.0 → 5.76.0

package/dist/cjs/Badge/Badge.cjs

@@ -1,32 +1,37 @@
 "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 Badge_styles = require("./Badge.styles.cjs");
 const Typography = require("../Typography/Typography.cjs");
-const HvBadge = (props) => {
+const HvBadge = React.forwardRef((props, ref) => {
   const {
     classes: classesProp,
     className,
     showCount = false,
-    count = 0,
+    count: countProp = 0,
     maxCount = 99,
-    label = null,
-    icon = null,
-    text = null,
-    textVariant = void 0,
+    label,
+    icon,
+    text,
+    textVariant,
     ...others
   } = uikitReactUtils.useDefaultProps("HvBadge", props);
   const { classes, cx } = Badge_styles.useClasses(classesProp);
-  const renderedCount = count > maxCount ? `${maxCount}+` : count;
-  const renderedCountOrLabel = label || showCount && count > 0 && renderedCount || null;
-  const Component = icon || text && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: textVariant, children: text });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.root, className), ...others, children: [
-    Component,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: Component ? classes.badgeContainer : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const count = typeof label === "number" ? label : countProp;
+  const countValue = count > maxCount ? `${maxCount}+` : count;
+  const renderedCount = showCount && count > 0 ? countValue : "";
+  const renderedCountOrLabel = label && typeof label !== "number" ? label : renderedCount;
+  const children = icon || text && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: textVariant, children: text });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx({ [classes.badgeContainer]: children }), children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: cx(classes.badgePosition, {
+          [classes.badgeHidden]: !(count > 0 || renderedCountOrLabel),
+          // TODO: remove unnecessary classes in v6 (hoist+rename `badge` to `badgePosition`)
           [classes.badge]: !!(count > 0 || renderedCountOrLabel),
           [classes.showCount]: !!(!label && renderedCountOrLabel),
           [classes.showLabel]: !!label,
@@ -37,6 +42,6 @@ const HvBadge = (props) => {
       }
     ) })
   ] });
-};
+});
 exports.badgeClasses = Badge_styles.staticClasses;
 exports.HvBadge = HvBadge;

package/dist/cjs/Badge/Badge.styles.cjs

@@ -2,27 +2,38 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const labelBaseStyle = {
-  ...uikitStyles.theme.typography.caption2,
-  padding: "0 5px",
-  color: uikitStyles.theme.colors.atmo1,
-  lineHeight: "16px"
-};
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBadge", {
   root: { position: "relative", "&>*": { float: "left" } },
+  /** class applied to the badge container when it has content */
   badgeContainer: { width: 0 },
-  badgePosition: {},
-  badge: {
-    borderRadius: uikitStyles.theme.space.xs,
+  /** class applied to the badge */
+  badgePosition: {
+    ...uikitStyles.theme.typography.caption2,
+    color: uikitStyles.theme.colors.atmo1,
+    borderRadius: uikitStyles.theme.radii.full,
     backgroundColor: uikitStyles.theme.colors.secondary,
+    lineHeight: "16px",
+    minWidth: 8,
+    padding: "0 5px",
     float: "left",
-    minHeight: "8px",
-    minWidth: "8px"
+    wordBreak: "keep-all",
+    textAlign: "center",
+    ":empty": {
+      height: 8,
+      width: 8,
+      padding: 0
+    }
   },
-  showCount: { ...labelBaseStyle, wordBreak: "keep-all" },
-  showLabel: { ...labelBaseStyle, wordBreak: "keep-all" },
+  /** applied to the badge when it's visible */
+  badge: {},
+  /** applied to the badge when it's hidden */
+  badgeHidden: {
+    display: "none"
+  },
+  showCount: {},
+  showLabel: {},
   badgeIcon: { position: "relative", top: "1px", left: "-7px" },
-  badgeOneDigit: { padding: 0, width: "16px", textAlign: "center" }
+  badgeOneDigit: { padding: 0, width: "16px" }
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;