@hitachivantara/uikit-react-core 5.39.1 → 5.39.2

package/dist/esm/components/AppSwitcher/AppSwitcher.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppSwitcher.styles.js","sources":["../../../../src/components/AppSwitcher/AppSwitcher.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAppSwitcher\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    overflow: \"hidden\",\n\n    // we need to play with the 4px because of the focus ring\n    // padding: `${theme.spacing(2) - 4}px 0 ${theme.spacing(2) - 4}px ${\n    //   theme.spacing(2) - 4\n    // }px`,\n    padding: theme.spacing(\"sm\", 0, \"sm\", \"sm\"),\n  },\n  item: {},\n  itemSelected: {},\n  itemDisabled: {},\n  itemTrigger: {},\n  itemIcon: {},\n  itemTitle: {},\n  itemInfoIcon: {},\n  actionsContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    justifyContent: \"flex-start\",\n\n    overflowY: \"auto\",\n\n    // We need to play with the 4px because of the focus ring\n    padding: \"4px 0 4px 4px\",\n  },\n  footerContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    marginTop: \"auto\",\n    height: 52,\n\n    // We need to play with the 4px because of the focus ring\n    // padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`,\n    padding: `${theme.space.sm} ${theme.space.sm} 4px 4px`,\n  },\n  open: {\n    zIndex: \"1200\",\n    position: \"absolute\",\n    top: \"50px\",\n    overflowX: \"hidden\",\n    boxShadow: theme.colors.shadow,\n  },\n  closed: { display: \"none\" },\n  title: {\n    minHeight: 36,\n\n    // we need to play with the 4px because of the focus ring\n    // padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,\n    padding: `4px ${theme.space.sm} ${theme.space.sm} 4px`,\n    ...theme.typography.label,\n  },\n  titleAnchor: {\n    WebkitLineClamp: 2,\n  },\n  single: { width: 320 },\n  dual: { width: 640 },\n  fluid: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","backgroundColor","theme","colors","atmo1","overflow","padding","spacing","item","itemSelected","itemDisabled","itemTrigger","itemIcon","itemTitle","itemInfoIcon","actionsContainer","flexWrap","justifyContent","overflowY","footerContainer","alignItems","marginTop","height","space","sm","open","zIndex","position","top","overflowX","boxShadow","shadow","closed","title","minHeight","typography","label","titleAnchor","WebkitLineClamp","single","width","dual","fluid"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMVC,SAASJ,MAAMK,QAAQ,MAAM,GAAG,MAAM,IAAI;AAAA,EAC5C;AAAA,EACAC,MAAM,CAAC;AAAA,EACPC,cAAc,CAAC;AAAA,EACfC,cAAc,CAAC;AAAA,EACfC,aAAa,CAAC;AAAA,EACdC,UAAU,CAAC;AAAA,EACXC,WAAW,CAAC;AAAA,EACZC,cAAc,CAAC;AAAA,EACfC,kBAAkB;AAAA,IAChBhB,SAAS;AAAA,IACTiB,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAEhBC,WAAW;AAAA;AAAA,IAGXZ,SAAS;AAAA,EACX;AAAA,EACAa,iBAAiB;AAAA,IACfpB,SAAS;AAAA,IACTqB,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,QAAQ;AAAA;AAAA;AAAA,IAIRhB,SAAU,GAAEJ,MAAMqB,MAAMC,EAAG,IAAGtB,MAAMqB,MAAMC,EAAG;AAAA,EAC/C;AAAA,EACAC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,WAAW;AAAA,IACXC,WAAW5B,MAAMC,OAAO4B;AAAAA,EAC1B;AAAA,EACAC,QAAQ;AAAA,IAAEjC,SAAS;AAAA,EAAO;AAAA,EAC1BkC,OAAO;AAAA,IACLC,WAAW;AAAA;AAAA;AAAA,IAIX5B,SAAU,OAAMJ,MAAMqB,MAAMC,EAAG,IAAGtB,MAAMqB,MAAMC,EAAG;AAAA,IACjD,GAAGtB,MAAMiC,WAAWC;AAAAA,EACtB;AAAA,EACAC,aAAa;AAAA,IACXC,iBAAiB;AAAA,EACnB;AAAA,EACAC,QAAQ;AAAA,IAAEC,OAAO;AAAA,EAAI;AAAA,EACrBC,MAAM;AAAA,IAAED,OAAO;AAAA,EAAI;AAAA,EACnBE,OAAO,CAAC;AACV,CAAC;"}
+{"version":3,"file":"AppSwitcher.styles.js","sources":["../../../../src/components/AppSwitcher/AppSwitcher.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAppSwitcher\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    overflow: \"hidden\",\n\n    // we need to play with the 4px because of the focus ring\n    // padding: `${theme.spacing(2) - 4}px 0 ${theme.spacing(2) - 4}px ${\n    //   theme.spacing(2) - 4\n    // }px`,\n    padding: theme.spacing(\"sm\", 0, \"sm\", \"sm\"),\n  },\n  item: {},\n  itemSelected: {},\n  itemDisabled: {},\n  itemTrigger: {},\n  itemIcon: {},\n  itemTitle: {},\n  itemInfoIcon: {},\n  actionsContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    justifyContent: \"flex-start\",\n\n    overflowY: \"auto\",\n\n    // We need to play with the 4px because of the focus ring\n    padding: \"4px 0 4px 4px\",\n  },\n  footerContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    marginTop: \"auto\",\n    height: 52,\n\n    // We need to play with the 4px because of the focus ring\n    // padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`,\n    padding: `${theme.space.sm} ${theme.space.sm} 4px 4px`,\n  },\n  open: {\n    zIndex: \"1200\",\n    position: \"absolute\",\n    top: \"50px\",\n    overflowX: \"hidden\",\n    boxShadow: theme.colors.shadow,\n  },\n  closed: { display: \"none\" },\n  title: {\n    minHeight: 36,\n\n    // we need to play with the 4px because of the focus ring\n    // padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,\n    padding: `4px ${theme.space.sm} ${theme.space.sm} 4px`,\n    ...theme.typography.label,\n  },\n  titleAnchor: {\n    WebkitLineClamp: 2,\n  },\n  single: { width: 320 },\n  dual: { width: 640 },\n  fluid: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMV,SAAS,MAAM,QAAQ,MAAM,GAAG,MAAM,IAAI;AAAA,EAC5C;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc,CAAC;AAAA,EACf,cAAc,CAAC;AAAA,EACf,aAAa,CAAC;AAAA,EACd,UAAU,CAAC;AAAA,EACX,WAAW,CAAC;AAAA,EACZ,cAAc,CAAC;AAAA,EACf,kBAAkB;AAAA,IAChB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,gBAAgB;AAAA,IAEhB,WAAW;AAAA;AAAA,IAGX,SAAS;AAAA,EACX;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA;AAAA;AAAA,IAIR,SAAS,GAAG,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,EAC9C;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,KAAK;AAAA,IACL,WAAW;AAAA,IACX,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,QAAQ,EAAE,SAAS,OAAO;AAAA,EAC1B,OAAO;AAAA,IACL,WAAW;AAAA;AAAA;AAAA,IAIX,SAAS,OAAO,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,IAChD,GAAG,MAAM,WAAW;AAAA,EACtB;AAAA,EACA,aAAa;AAAA,IACX,iBAAiB;AAAA,EACnB;AAAA,EACA,QAAQ,EAAE,OAAO,IAAI;AAAA,EACrB,MAAM,EAAE,OAAO,IAAI;AAAA,EACnB,OAAO,CAAC;AACV,CAAC;"}

package/dist/esm/components/Avatar/Avatar.js

@@ -29,22 +29,36 @@ const HvAvatar = forwardRef((props, ref) => {
     avatarProps,
     ...others
   } = useDefaultProps("HvAvatar", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   let children;
   const imageLoaded = useImageLoaded(src, srcSet);
   const hasImg = src || srcSet;
   const hasImgNotFailing = hasImg && imageLoaded !== "error";
   if (hasImgNotFailing) {
-    children = /* @__PURE__ */ jsx("img", { alt, src, srcSet, sizes, className: classes.img, ...imgProps });
+    children = /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt,
+        src,
+        srcSet,
+        sizes,
+        className: classes.img,
+        ...imgProps
+      }
+    );
   } else if (childrenProp != null) {
     children = childrenProp;
   } else if (hasImg && alt) {
     [children] = alt;
   } else {
-    children = /* @__PURE__ */ jsx(User, { color, iconSize: decreaseSize(size), className: classes.fallback });
+    children = /* @__PURE__ */ jsx(
+      User,
+      {
+        color,
+        iconSize: decreaseSize(size),
+        className: classes.fallback
+      }
+    );
   }
   const inlineStyle = {
     ...style
@@ -53,7 +67,10 @@ const HvAvatar = forwardRef((props, ref) => {
     inlineStyle.borderRadius = "50%";
   }
   if (!hasImgNotFailing) {
-    inlineStyle.backgroundColor = getColor(backgroundColor, theme.colors.secondary);
+    inlineStyle.backgroundColor = getColor(
+      backgroundColor,
+      theme.colors.secondary
+    );
     inlineStyle.color = getColor(color, theme.colors.atmo1);
   }
   const statusInlineStyle = {};
@@ -62,23 +79,34 @@ const HvAvatar = forwardRef((props, ref) => {
     statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;
   }
   const badgeColor = getColor(badge || "", theme.colors.positive);
-  return /* @__PURE__ */ jsx("div", { ref, className: classes.container, ...others, children: /* @__PURE__ */ jsxs("div", { className: cx(classes.status, classes[variant], classes[size]), style: statusInlineStyle, children: [
-    badge && /* @__PURE__ */ jsx("div", { className: classes.badge, style: {
-      backgroundColor: badgeColor
-    } }),
-    /* @__PURE__ */ jsx(
-      MuiAvatar,
-      {
-        component,
-        className: cx(classes.root, classes.avatar, classes[size], className),
-        style: inlineStyle,
-        variant,
-        size,
-        ...avatarProps,
-        children
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx("div", { ref, className: classes.container, ...others, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(classes.status, classes[variant], classes[size]),
+      style: statusInlineStyle,
+      children: [
+        badge && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classes.badge,
+            style: { backgroundColor: badgeColor }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MuiAvatar,
+          {
+            component,
+            className: cx(classes.root, classes.avatar, classes[size], className),
+            style: inlineStyle,
+            variant,
+            size,
+            ...avatarProps,
+            children
+          }
+        )
+      ]
+    }
+  ) });
 });
 export {
   HvAvatar,

package/dist/esm/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes, forwardRef } from \"react\";\n\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useImageLoaded } from \"@core/hooks/useImageLoaded\";\nimport { decreaseSize } from \"@core/utils/sizes\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" | \"square\";\n\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** The component used for the root node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Sets one of the standard sizes of the icons */\n  size?: HvAvatarSize;\n  /** A color representing the foreground color of the avatar's letters or the generic User icon fallback. */\n  color?: HvColorAny;\n  /** A String representing the background color of the avatar. */\n  backgroundColor?: HvColorAny;\n  /** The `src` attribute for the `img` element. */\n  src?: string;\n  /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */\n  srcSet?: string;\n  /** The `sizes` attribute for the `img` element. */\n  sizes?: string;\n  /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */\n  alt?: string;\n  /**\n   * Attributes applied to the `img` element if the component is used to display an image.\n   * It can be used to listen for the loading error event.\n   */\n  imgProps?: HTMLAttributes<HTMLImageElement>;\n  /** A string representing the type of avatar to display, circular or square. */\n  variant?: HvAvatarVariant;\n  /** A string representing the color of the avatar border that represents its status. */\n  status?: string;\n  /** A string representing the color of the avatar badge. */\n  badge?: string;\n  /** Attributes applied to the avatar element. */\n  avatarProps?: MuiAvatarProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarClasses;\n}\n\n/**\n * Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = forwardRef<any, HvAvatarProps>((props, ref) => {\n  const {\n    className,\n    style,\n    classes: classesProp,\n    children: childrenProp,\n    component = \"div\",\n    size = \"sm\",\n    backgroundColor = \"secondary\",\n    color = \"atmo1\",\n    src,\n    srcSet,\n    sizes,\n    alt,\n    imgProps,\n    status,\n    badge,\n    variant = \"circular\",\n    avatarProps,\n    ...others\n  } = useDefaultProps(\"HvAvatar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  let children: React.ReactNode;\n\n  // Use a hook instead of onError on the img element to support server-side rendering.\n  const imageLoaded = useImageLoaded(src, srcSet);\n  const hasImg = src || srcSet;\n  const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n  if (hasImgNotFailing) {\n    children = (\n      <img\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        className={classes.img}\n        {...imgProps}\n      />\n    );\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  } else if (hasImg && alt) {\n    [children] = alt;\n  } else {\n    children = (\n      <User\n        color={color}\n        iconSize={decreaseSize(size)}\n        className={classes.fallback}\n      />\n    );\n  }\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n  };\n\n  if (component != null && typeof component !== \"string\") {\n    // override border-radius with custom components\n    inlineStyle.borderRadius = \"50%\";\n  }\n\n  if (!hasImgNotFailing) {\n    inlineStyle.backgroundColor = getColor(\n      backgroundColor,\n      theme.colors.secondary\n    );\n    inlineStyle.color = getColor(color, theme.colors.atmo1);\n  }\n\n  const statusInlineStyle: CSSProperties = {};\n  if (status) {\n    // set the status border. we're using the boxShadow property to set the border\n    // to be inside the container and not on its edge.\n    const statusColor = getColor(status, theme.colors.positive);\n    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n  }\n\n  const badgeColor = getColor(badge || \"\", theme.colors.positive);\n\n  return (\n    <div ref={ref} className={classes.container} {...others}>\n      <div\n        className={cx(classes.status, classes[variant], classes[size])}\n        style={statusInlineStyle}\n      >\n        {badge && (\n          <div\n            className={classes.badge}\n            style={{ backgroundColor: badgeColor }}\n          />\n        )}\n        <MuiAvatar\n          component={component}\n          // Consider not using the root and className classes in this component\n          className={cx(classes.root, classes.avatar, classes[size], className)}\n          style={inlineStyle}\n          variant={variant}\n          size={size}\n          {...avatarProps}\n        >\n          {children}\n        </MuiAvatar>\n      </div>\n    </div>\n  );\n});\n"],"names":["HvAvatar","forwardRef","props","ref","className","style","classes","classesProp","children","childrenProp","component","size","backgroundColor","color","src","srcSet","sizes","alt","imgProps","status","badge","variant","avatarProps","others","useDefaultProps","cx","useClasses","imageLoaded","useImageLoaded","hasImg","hasImgNotFailing","img","decreaseSize","fallback","inlineStyle","borderRadius","getColor","theme","colors","secondary","atmo1","statusInlineStyle","statusColor","positive","boxShadow","badgeColor","container","root","avatar"],"mappings":";;;;;;;;;;AAgEO,MAAMA,WAAWC,WAA+B,CAACC,OAAOC,QAAQ;AAC/D,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,UAAUC;AAAAA,IACVC,YAAY;AAAA,IACZC,OAAO;AAAA,IACPC,kBAAkB;AAAA,IAClBC,QAAQ;AAAA,IACRC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYtB,KAAK;AAC/B,QAAA;AAAA,IAAEI;AAAAA,IAASmB;AAAAA,EAAAA,IAAOC,WAAWnB,WAAW;AAE1CC,MAAAA;AAGEmB,QAAAA,cAAcC,eAAed,KAAKC,MAAM;AAC9C,QAAMc,SAASf,OAAOC;AAChBe,QAAAA,mBAAmBD,UAAUF,gBAAgB;AAEnD,MAAIG,kBAAkB;AAElB,eAAA,oBAAC,OACC,EAAA,KACA,KACA,QACA,OACA,WAAWxB,QAAQyB,KACfb,GAAAA,SAEP,CAAA;AAAA,EAAA,WACQT,gBAAgB,MAAM;AACpBA,eAAAA;AAAAA,EAAAA,WACFoB,UAAUZ,KAAK;AACxB,KAACT,QAAQ,IAAIS;AAAAA,EAAAA,OACR;AAEH,eAAA,oBAAC,QACC,OACA,UAAUe,aAAarB,IAAI,GAC3B,WAAWL,QAAQ2B,SAEtB,CAAA;AAAA,EACH;AAEA,QAAMC,cAA6B;AAAA,IACjC,GAAG7B;AAAAA,EAAAA;AAGL,MAAIK,aAAa,QAAQ,OAAOA,cAAc,UAAU;AAEtDwB,gBAAYC,eAAe;AAAA,EAC7B;AAEA,MAAI,CAACL,kBAAkB;AACrBI,gBAAYtB,kBAAkBwB,SAC5BxB,iBACAyB,MAAMC,OAAOC,SACf;AACAL,gBAAYrB,QAAQuB,SAASvB,OAAOwB,MAAMC,OAAOE,KAAK;AAAA,EACxD;AAEA,QAAMC,oBAAmC,CAAA;AACzC,MAAItB,QAAQ;AAGV,UAAMuB,cAAcN,SAASjB,QAAQkB,MAAMC,OAAOK,QAAQ;AACxCC,sBAAAA,YAAa,yBAAwBF,WAAY;AAAA,EACrE;AAEA,QAAMG,aAAaT,SAAShB,SAAS,IAAIiB,MAAMC,OAAOK,QAAQ;AAG5D,SAAA,oBAAC,SAAI,KAAU,WAAWrC,QAAQwC,WAAW,GAAIvB,QAC/C,UAAA,qBAAC,OACC,EAAA,WAAWE,GAAGnB,QAAQa,QAAQb,QAAQe,OAAO,GAAGf,QAAQK,IAAI,CAAC,GAC7D,OAAO8B,mBAENrB,UAAAA;AAAAA,IAAAA,SACE,oBAAA,OAAA,EACC,WAAWd,QAAQc,OACnB,OAAO;AAAA,MAAER,iBAAiBiC;AAAAA,IAAAA,GAE7B;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QAEA,WAAWpB,GAAGnB,QAAQyC,MAAMzC,QAAQ0C,QAAQ1C,QAAQK,IAAI,GAAGP,SAAS;AAAA,QACpE,OAAO8B;AAAAA,QACP;AAAA,QACA;AAAA,QACA,GAAIZ;AAAAA,QAEHd;AAAAA,MAAAA;AAAAA,IACH;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes, forwardRef } from \"react\";\n\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useImageLoaded } from \"@core/hooks/useImageLoaded\";\nimport { decreaseSize } from \"@core/utils/sizes\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" | \"square\";\n\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** The component used for the root node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Sets one of the standard sizes of the icons */\n  size?: HvAvatarSize;\n  /** A color representing the foreground color of the avatar's letters or the generic User icon fallback. */\n  color?: HvColorAny;\n  /** A String representing the background color of the avatar. */\n  backgroundColor?: HvColorAny;\n  /** The `src` attribute for the `img` element. */\n  src?: string;\n  /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */\n  srcSet?: string;\n  /** The `sizes` attribute for the `img` element. */\n  sizes?: string;\n  /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */\n  alt?: string;\n  /**\n   * Attributes applied to the `img` element if the component is used to display an image.\n   * It can be used to listen for the loading error event.\n   */\n  imgProps?: HTMLAttributes<HTMLImageElement>;\n  /** A string representing the type of avatar to display, circular or square. */\n  variant?: HvAvatarVariant;\n  /** A string representing the color of the avatar border that represents its status. */\n  status?: string;\n  /** A string representing the color of the avatar badge. */\n  badge?: string;\n  /** Attributes applied to the avatar element. */\n  avatarProps?: MuiAvatarProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarClasses;\n}\n\n/**\n * Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = forwardRef<any, HvAvatarProps>((props, ref) => {\n  const {\n    className,\n    style,\n    classes: classesProp,\n    children: childrenProp,\n    component = \"div\",\n    size = \"sm\",\n    backgroundColor = \"secondary\",\n    color = \"atmo1\",\n    src,\n    srcSet,\n    sizes,\n    alt,\n    imgProps,\n    status,\n    badge,\n    variant = \"circular\",\n    avatarProps,\n    ...others\n  } = useDefaultProps(\"HvAvatar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  let children: React.ReactNode;\n\n  // Use a hook instead of onError on the img element to support server-side rendering.\n  const imageLoaded = useImageLoaded(src, srcSet);\n  const hasImg = src || srcSet;\n  const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n  if (hasImgNotFailing) {\n    children = (\n      <img\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        className={classes.img}\n        {...imgProps}\n      />\n    );\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  } else if (hasImg && alt) {\n    [children] = alt;\n  } else {\n    children = (\n      <User\n        color={color}\n        iconSize={decreaseSize(size)}\n        className={classes.fallback}\n      />\n    );\n  }\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n  };\n\n  if (component != null && typeof component !== \"string\") {\n    // override border-radius with custom components\n    inlineStyle.borderRadius = \"50%\";\n  }\n\n  if (!hasImgNotFailing) {\n    inlineStyle.backgroundColor = getColor(\n      backgroundColor,\n      theme.colors.secondary\n    );\n    inlineStyle.color = getColor(color, theme.colors.atmo1);\n  }\n\n  const statusInlineStyle: CSSProperties = {};\n  if (status) {\n    // set the status border. we're using the boxShadow property to set the border\n    // to be inside the container and not on its edge.\n    const statusColor = getColor(status, theme.colors.positive);\n    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n  }\n\n  const badgeColor = getColor(badge || \"\", theme.colors.positive);\n\n  return (\n    <div ref={ref} className={classes.container} {...others}>\n      <div\n        className={cx(classes.status, classes[variant], classes[size])}\n        style={statusInlineStyle}\n      >\n        {badge && (\n          <div\n            className={classes.badge}\n            style={{ backgroundColor: badgeColor }}\n          />\n        )}\n        <MuiAvatar\n          component={component}\n          // Consider not using the root and className classes in this component\n          className={cx(classes.root, classes.avatar, classes[size], className)}\n          style={inlineStyle}\n          variant={variant}\n          size={size}\n          {...avatarProps}\n        >\n          {children}\n        </MuiAvatar>\n      </div>\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;AAgEO,MAAM,WAAW,WAA+B,CAAC,OAAO,QAAQ;AAC/D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,kBAAkB;AAAA,IAClB,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE1C,MAAA;AAGE,QAAA,cAAc,eAAe,KAAK,MAAM;AAC9C,QAAM,SAAS,OAAO;AAChB,QAAA,mBAAmB,UAAU,gBAAgB;AAEnD,MAAI,kBAAkB;AAElB,eAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,QAAQ;AAAA,QAClB,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,WAEO,gBAAgB,MAAM;AACpB,eAAA;AAAA,EAAA,WACF,UAAU,KAAK;AACxB,KAAC,QAAQ,IAAI;AAAA,EAAA,OACR;AAEH,eAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAU,aAAa,IAAI;AAAA,QAC3B,WAAW,QAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzB;AAEA,QAAM,cAA6B;AAAA,IACjC,GAAG;AAAA,EAAA;AAGL,MAAI,aAAa,QAAQ,OAAO,cAAc,UAAU;AAEtD,gBAAY,eAAe;AAAA,EAC7B;AAEA,MAAI,CAAC,kBAAkB;AACrB,gBAAY,kBAAkB;AAAA,MAC5B;AAAA,MACA,MAAM,OAAO;AAAA,IAAA;AAEf,gBAAY,QAAQ,SAAS,OAAO,MAAM,OAAO,KAAK;AAAA,EACxD;AAEA,QAAM,oBAAmC,CAAA;AACzC,MAAI,QAAQ;AAGV,UAAM,cAAc,SAAS,QAAQ,MAAM,OAAO,QAAQ;AACxC,sBAAA,YAAY,yBAAyB,WAAW;AAAA,EACpE;AAEA,QAAM,aAAa,SAAS,SAAS,IAAI,MAAM,OAAO,QAAQ;AAE9D,6BACG,OAAI,EAAA,KAAU,WAAW,QAAQ,WAAY,GAAG,QAC/C,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,OAAO,GAAG,QAAQ,IAAI,CAAC;AAAA,MAC7D,OAAO;AAAA,MAEN,UAAA;AAAA,QACC,SAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,OAAO,EAAE,iBAAiB,WAAW;AAAA,UAAA;AAAA,QACvC;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YAEA,WAAW,GAAG,QAAQ,MAAM,QAAQ,QAAQ,QAAQ,IAAI,GAAG,SAAS;AAAA,YACpE,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YAEH;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}

package/dist/esm/components/Avatar/Avatar.styles.js

@@ -1,29 +1,11 @@
 import { outlineStyles } from "../../utils/focusUtils.js";
 import { createClasses } from "../../utils/classes.js";
-const EXTRA_SMALL = {
-  container: "32px",
-  avatar: "24px"
-};
-const SMALL = {
-  container: "40px",
-  avatar: "32px"
-};
-const MEDIUM = {
-  container: "48px",
-  avatar: "40px"
-};
-const LARGE = {
-  container: "60px",
-  avatar: "52px"
-};
-const EXTRA_LARGE = {
-  container: "96px",
-  avatar: "88px"
-};
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvAvatar", {
+const EXTRA_SMALL = { container: "32px", avatar: "24px" };
+const SMALL = { container: "40px", avatar: "32px" };
+const MEDIUM = { container: "48px", avatar: "40px" };
+const LARGE = { container: "60px", avatar: "52px" };
+const EXTRA_LARGE = { container: "96px", avatar: "88px" };
+const { staticClasses, useClasses } = createClasses("HvAvatar", {
   root: {
     fontSize: "1rem"
   },
@@ -50,26 +32,11 @@ const {
     alignItems: "center",
     justifyContent: "center",
     position: "relative",
-    "&$xs": {
-      width: EXTRA_SMALL.container,
-      height: EXTRA_SMALL.container
-    },
-    "&$sm": {
-      width: SMALL.container,
-      height: SMALL.container
-    },
-    "&$md": {
-      width: MEDIUM.container,
-      height: MEDIUM.container
-    },
-    "&$lg": {
-      width: LARGE.container,
-      height: LARGE.container
-    },
-    "&$xl": {
-      width: EXTRA_LARGE.container,
-      height: EXTRA_LARGE.container
-    }
+    "&$xs": { width: EXTRA_SMALL.container, height: EXTRA_SMALL.container },
+    "&$sm": { width: SMALL.container, height: SMALL.container },
+    "&$md": { width: MEDIUM.container, height: MEDIUM.container },
+    "&$lg": { width: LARGE.container, height: LARGE.container },
+    "&$xl": { width: EXTRA_LARGE.container, height: EXTRA_LARGE.container }
   },
   avatar: {
     "&$xs": {
@@ -77,21 +44,9 @@ const {
       height: EXTRA_SMALL.avatar,
       fontSize: "0.5rem"
     },
-    "&$sm": {
-      width: SMALL.avatar,
-      height: SMALL.avatar,
-      fontSize: "0.625rem"
-    },
-    "&$md": {
-      width: MEDIUM.avatar,
-      height: MEDIUM.avatar,
-      fontSize: "1rem"
-    },
-    "&$lg": {
-      width: LARGE.avatar,
-      height: LARGE.avatar,
-      fontSize: "1.5rem"
-    },
+    "&$sm": { width: SMALL.avatar, height: SMALL.avatar, fontSize: "0.625rem" },
+    "&$md": { width: MEDIUM.avatar, height: MEDIUM.avatar, fontSize: "1rem" },
+    "&$lg": { width: LARGE.avatar, height: LARGE.avatar, fontSize: "1.5rem" },
     "&$xl": {
       width: EXTRA_LARGE.avatar,
       height: EXTRA_LARGE.avatar,
@@ -112,9 +67,7 @@ const {
   md: {},
   lg: {},
   xl: {},
-  circular: {
-    borderRadius: "50%"
-  },
+  circular: { borderRadius: "50%" },
   square: {}
 });
 export {

package/dist/esm/components/Avatar/Avatar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.styles.js","sources":["../../../../src/components/Avatar/Avatar.styles.tsx"],"sourcesContent":["import { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nconst EXTRA_SMALL = { container: \"32px\", avatar: \"24px\" };\nconst SMALL = { container: \"40px\", avatar: \"32px\" };\nconst MEDIUM = { container: \"48px\", avatar: \"40px\" };\nconst LARGE = { container: \"60px\", avatar: \"52px\" };\nconst EXTRA_LARGE = { container: \"96px\", avatar: \"88px\" };\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAvatar\", {\n  root: {\n    fontSize: \"1rem\",\n  },\n  container: {\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      borderRadius: 0,\n    },\n  },\n  img: {\n    width: \"100%\",\n    height: \"100%\",\n    textAlign: \"center\",\n    // Handle non-square image. The property isn't supported by IE 11.\n    objectFit: \"cover\",\n    // Hide alt text.\n    color: \"transparent\",\n    // Hide the image broken icon, only works on Chrome.\n    textIndent: 10000,\n  },\n  fallback: {},\n  status: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n\n    \"&$xs\": { width: EXTRA_SMALL.container, height: EXTRA_SMALL.container },\n    \"&$sm\": { width: SMALL.container, height: SMALL.container },\n    \"&$md\": { width: MEDIUM.container, height: MEDIUM.container },\n    \"&$lg\": { width: LARGE.container, height: LARGE.container },\n    \"&$xl\": { width: EXTRA_LARGE.container, height: EXTRA_LARGE.container },\n  },\n  avatar: {\n    \"&$xs\": {\n      width: EXTRA_SMALL.avatar,\n      height: EXTRA_SMALL.avatar,\n      fontSize: \"0.5rem\",\n    },\n    \"&$sm\": { width: SMALL.avatar, height: SMALL.avatar, fontSize: \"0.625rem\" },\n    \"&$md\": { width: MEDIUM.avatar, height: MEDIUM.avatar, fontSize: \"1rem\" },\n    \"&$lg\": { width: LARGE.avatar, height: LARGE.avatar, fontSize: \"1.5rem\" },\n    \"&$xl\": {\n      width: EXTRA_LARGE.avatar,\n      height: EXTRA_LARGE.avatar,\n      fontSize: \"2rem\",\n    },\n  },\n  badge: {\n    width: 8,\n    height: 8,\n    position: \"absolute\",\n    top: 0,\n    right: 0,\n    borderRadius: \"50%\",\n    zIndex: 1,\n  },\n  xs: {},\n  sm: {},\n  md: {},\n  lg: {},\n  xl: {},\n  circular: { borderRadius: \"50%\" },\n  square: {},\n});\n"],"names":["EXTRA_SMALL","container","avatar","SMALL","MEDIUM","LARGE","EXTRA_LARGE","staticClasses","useClasses","createClasses","root","fontSize","outlineStyles","borderRadius","img","width","height","textAlign","objectFit","color","textIndent","fallback","status","display","alignItems","justifyContent","position","badge","top","right","zIndex","xs","sm","md","lg","xl","circular","square"],"mappings":";;AAGA,MAAMA,cAAc;AAAA,EAAEC,WAAW;AAAA,EAAQC,QAAQ;AAAO;AACxD,MAAMC,QAAQ;AAAA,EAAEF,WAAW;AAAA,EAAQC,QAAQ;AAAO;AAClD,MAAME,SAAS;AAAA,EAAEH,WAAW;AAAA,EAAQC,QAAQ;AAAO;AACnD,MAAMG,QAAQ;AAAA,EAAEJ,WAAW;AAAA,EAAQC,QAAQ;AAAO;AAClD,MAAMI,cAAc;AAAA,EAAEL,WAAW;AAAA,EAAQC,QAAQ;AAAO;AAE3C,MAAA;AAAA,EAAEK;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,MAAM;AAAA,IACJC,UAAU;AAAA,EACZ;AAAA,EACAV,WAAW;AAAA,IACT,mBAAmB;AAAA,MACjB,GAAGW;AAAAA,MACHC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACAC,KAAK;AAAA,IACHC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,WAAW;AAAA;AAAA,IAEXC,WAAW;AAAA;AAAA,IAEXC,OAAO;AAAA;AAAA,IAEPC,YAAY;AAAA,EACd;AAAA,EACAC,UAAU,CAAC;AAAA,EACXC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAChBC,UAAU;AAAA,IAEV,QAAQ;AAAA,MAAEX,OAAOf,YAAYC;AAAAA,MAAWe,QAAQhB,YAAYC;AAAAA,IAAU;AAAA,IACtE,QAAQ;AAAA,MAAEc,OAAOZ,MAAMF;AAAAA,MAAWe,QAAQb,MAAMF;AAAAA,IAAU;AAAA,IAC1D,QAAQ;AAAA,MAAEc,OAAOX,OAAOH;AAAAA,MAAWe,QAAQZ,OAAOH;AAAAA,IAAU;AAAA,IAC5D,QAAQ;AAAA,MAAEc,OAAOV,MAAMJ;AAAAA,MAAWe,QAAQX,MAAMJ;AAAAA,IAAU;AAAA,IAC1D,QAAQ;AAAA,MAAEc,OAAOT,YAAYL;AAAAA,MAAWe,QAAQV,YAAYL;AAAAA,IAAU;AAAA,EACxE;AAAA,EACAC,QAAQ;AAAA,IACN,QAAQ;AAAA,MACNa,OAAOf,YAAYE;AAAAA,MACnBc,QAAQhB,YAAYE;AAAAA,MACpBS,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MAAEI,OAAOZ,MAAMD;AAAAA,MAAQc,QAAQb,MAAMD;AAAAA,MAAQS,UAAU;AAAA,IAAW;AAAA,IAC1E,QAAQ;AAAA,MAAEI,OAAOX,OAAOF;AAAAA,MAAQc,QAAQZ,OAAOF;AAAAA,MAAQS,UAAU;AAAA,IAAO;AAAA,IACxE,QAAQ;AAAA,MAAEI,OAAOV,MAAMH;AAAAA,MAAQc,QAAQX,MAAMH;AAAAA,MAAQS,UAAU;AAAA,IAAS;AAAA,IACxE,QAAQ;AAAA,MACNI,OAAOT,YAAYJ;AAAAA,MACnBc,QAAQV,YAAYJ;AAAAA,MACpBS,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACAgB,OAAO;AAAA,IACLZ,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRU,UAAU;AAAA,IACVE,KAAK;AAAA,IACLC,OAAO;AAAA,IACPhB,cAAc;AAAA,IACdiB,QAAQ;AAAA,EACV;AAAA,EACAC,IAAI,CAAC;AAAA,EACLC,IAAI,CAAC;AAAA,EACLC,IAAI,CAAC;AAAA,EACLC,IAAI,CAAC;AAAA,EACLC,IAAI,CAAC;AAAA,EACLC,UAAU;AAAA,IAAEvB,cAAc;AAAA,EAAM;AAAA,EAChCwB,QAAQ,CAAC;AACX,CAAC;"}
+{"version":3,"file":"Avatar.styles.js","sources":["../../../../src/components/Avatar/Avatar.styles.tsx"],"sourcesContent":["import { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nconst EXTRA_SMALL = { container: \"32px\", avatar: \"24px\" };\nconst SMALL = { container: \"40px\", avatar: \"32px\" };\nconst MEDIUM = { container: \"48px\", avatar: \"40px\" };\nconst LARGE = { container: \"60px\", avatar: \"52px\" };\nconst EXTRA_LARGE = { container: \"96px\", avatar: \"88px\" };\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAvatar\", {\n  root: {\n    fontSize: \"1rem\",\n  },\n  container: {\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      borderRadius: 0,\n    },\n  },\n  img: {\n    width: \"100%\",\n    height: \"100%\",\n    textAlign: \"center\",\n    // Handle non-square image. The property isn't supported by IE 11.\n    objectFit: \"cover\",\n    // Hide alt text.\n    color: \"transparent\",\n    // Hide the image broken icon, only works on Chrome.\n    textIndent: 10000,\n  },\n  fallback: {},\n  status: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n\n    \"&$xs\": { width: EXTRA_SMALL.container, height: EXTRA_SMALL.container },\n    \"&$sm\": { width: SMALL.container, height: SMALL.container },\n    \"&$md\": { width: MEDIUM.container, height: MEDIUM.container },\n    \"&$lg\": { width: LARGE.container, height: LARGE.container },\n    \"&$xl\": { width: EXTRA_LARGE.container, height: EXTRA_LARGE.container },\n  },\n  avatar: {\n    \"&$xs\": {\n      width: EXTRA_SMALL.avatar,\n      height: EXTRA_SMALL.avatar,\n      fontSize: \"0.5rem\",\n    },\n    \"&$sm\": { width: SMALL.avatar, height: SMALL.avatar, fontSize: \"0.625rem\" },\n    \"&$md\": { width: MEDIUM.avatar, height: MEDIUM.avatar, fontSize: \"1rem\" },\n    \"&$lg\": { width: LARGE.avatar, height: LARGE.avatar, fontSize: \"1.5rem\" },\n    \"&$xl\": {\n      width: EXTRA_LARGE.avatar,\n      height: EXTRA_LARGE.avatar,\n      fontSize: \"2rem\",\n    },\n  },\n  badge: {\n    width: 8,\n    height: 8,\n    position: \"absolute\",\n    top: 0,\n    right: 0,\n    borderRadius: \"50%\",\n    zIndex: 1,\n  },\n  xs: {},\n  sm: {},\n  md: {},\n  lg: {},\n  xl: {},\n  circular: { borderRadius: \"50%\" },\n  square: {},\n});\n"],"names":[],"mappings":";;AAGA,MAAM,cAAc,EAAE,WAAW,QAAQ,QAAQ,OAAO;AACxD,MAAM,QAAQ,EAAE,WAAW,QAAQ,QAAQ,OAAO;AAClD,MAAM,SAAS,EAAE,WAAW,QAAQ,QAAQ,OAAO;AACnD,MAAM,QAAQ,EAAE,WAAW,QAAQ,QAAQ,OAAO;AAClD,MAAM,cAAc,EAAE,WAAW,QAAQ,QAAQ,OAAO;AAEjD,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,IACT,mBAAmB;AAAA,MACjB,GAAG;AAAA,MACH,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,KAAK;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA;AAAA,IAEX,WAAW;AAAA;AAAA,IAEX,OAAO;AAAA;AAAA,IAEP,YAAY;AAAA,EACd;AAAA,EACA,UAAU,CAAC;AAAA,EACX,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU;AAAA,IAEV,QAAQ,EAAE,OAAO,YAAY,WAAW,QAAQ,YAAY,UAAU;AAAA,IACtE,QAAQ,EAAE,OAAO,MAAM,WAAW,QAAQ,MAAM,UAAU;AAAA,IAC1D,QAAQ,EAAE,OAAO,OAAO,WAAW,QAAQ,OAAO,UAAU;AAAA,IAC5D,QAAQ,EAAE,OAAO,MAAM,WAAW,QAAQ,MAAM,UAAU;AAAA,IAC1D,QAAQ,EAAE,OAAO,YAAY,WAAW,QAAQ,YAAY,UAAU;AAAA,EACxE;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,MACN,OAAO,YAAY;AAAA,MACnB,QAAQ,YAAY;AAAA,MACpB,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ,EAAE,OAAO,MAAM,QAAQ,QAAQ,MAAM,QAAQ,UAAU,WAAW;AAAA,IAC1E,QAAQ,EAAE,OAAO,OAAO,QAAQ,QAAQ,OAAO,QAAQ,UAAU,OAAO;AAAA,IACxE,QAAQ,EAAE,OAAO,MAAM,QAAQ,QAAQ,MAAM,QAAQ,UAAU,SAAS;AAAA,IACxE,QAAQ;AAAA,MACN,OAAO,YAAY;AAAA,MACnB,QAAQ,YAAY;AAAA,MACpB,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,cAAc;AAAA,IACd,QAAQ;AAAA,EACV;AAAA,EACA,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,UAAU,EAAE,cAAc,MAAM;AAAA,EAChC,QAAQ,CAAC;AACX,CAAC;"}

package/dist/esm/components/Badge/Badge.js

@@ -16,22 +16,25 @@ const HvBadge = (props) => {
     textVariant = void 0,
     ...others
   } = useDefaultProps("HvBadge", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const renderedCount = count > maxCount ? `${maxCount}+` : count;
   const renderedCountOrLabel = label || showCount && count > 0 && renderedCount || null;
   const Component = icon || text && /* @__PURE__ */ jsx(HvTypography, { variant: textVariant, children: text });
   return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), ...others, children: [
     Component,
-    /* @__PURE__ */ jsx("div", { className: Component ? classes.badgeContainer : void 0, children: /* @__PURE__ */ jsx("div", { className: cx(classes.badgePosition, {
-      [classes.badge]: !!(count > 0 || renderedCountOrLabel),
-      [classes.showCount]: !!(!label && renderedCountOrLabel),
-      [classes.showLabel]: !!label,
-      [classes.badgeIcon]: !!icon,
-      [classes.badgeOneDigit]: String(renderedCountOrLabel).length === 1
-    }), children: renderedCountOrLabel }) })
+    /* @__PURE__ */ jsx("div", { className: Component ? classes.badgeContainer : void 0, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(classes.badgePosition, {
+          [classes.badge]: !!(count > 0 || renderedCountOrLabel),
+          [classes.showCount]: !!(!label && renderedCountOrLabel),
+          [classes.showLabel]: !!label,
+          [classes.badgeIcon]: !!icon,
+          [classes.badgeOneDigit]: String(renderedCountOrLabel).length === 1
+        }),
+        children: renderedCountOrLabel
+      }
+    ) })
   ] });
 };
 export {

package/dist/esm/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  HvTypography,\n  HvTypographyVariants,\n} from \"@core/components/Typography\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Badge.styles\";\n\nexport { staticClasses as badgeClasses };\n\nexport type HvBadgeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBadgeProps extends HvBaseProps {\n  /**\n   * Count is the number of unread notifications.\n   * Note count and label are mutually exclusive.\n   * count is ignored when label is specified at the same time.\n   */\n  count?: number;\n  /**\n   * True if count should be displayed.\n   * Note showCount and label are mutually exclusive.\n   * showCount is ignored when label is specified at the same time.\n   */\n  showCount?: boolean;\n  /** The maximum number of unread notifications to be displayed */\n  maxCount?: number;\n  /**\n   * Custom text to show in place of count.\n   * Note showCount and label are mutually exclusive.\n   * showCount is ignored when label is specified at the same time.\n   */\n  label?: string;\n  /** Icon which the notification will be attached. */\n  icon?: React.ReactNode;\n  /** Text which the notification will be attached. */\n  text?: string;\n  /** Text variant. */\n  textVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBadgeClasses;\n}\n\n/**\n * The badge is a component used to notify the user that something has occurred, in the app context.\n */\nexport const HvBadge = (props: HvBadgeProps) => {\n  const {\n    classes: classesProp,\n    className,\n    showCount = false,\n    count = 0,\n    maxCount = 99,\n    label = null,\n    icon = null,\n    text = null,\n    textVariant = undefined,\n    ...others\n  } = useDefaultProps(\"HvBadge\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const renderedCount = count > maxCount ? `${maxCount}+` : count;\n  // If label is specified and non-empty, render it.\n  // If showCount is specified and count > 0, render the count.\n  // Otherwise, render nothing on the badge.\n  // (Note count=0 should not be rendered to avoid ghosty 0.)\n  const renderedCountOrLabel =\n    label || (showCount && count > 0 && renderedCount) || null;\n  const Component =\n    icon || (text && <HvTypography variant={textVariant}>{text}</HvTypography>);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {Component}\n      <div className={Component ? classes.badgeContainer : undefined}>\n        <div\n          className={cx(classes.badgePosition, {\n            [classes.badge]: !!(count > 0 || renderedCountOrLabel),\n            [classes.showCount]: !!(!label && renderedCountOrLabel),\n            [classes.showLabel]: !!label,\n            [classes.badgeIcon]: !!icon,\n            [classes.badgeOneDigit]: String(renderedCountOrLabel).length === 1,\n          })}\n        >\n          {renderedCountOrLabel}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["HvBadge","props","classes","classesProp","className","showCount","count","maxCount","label","icon","text","textVariant","undefined","others","useDefaultProps","cx","useClasses","renderedCount","renderedCountOrLabel","Component","root","badgeContainer","badgePosition","badge","showLabel","badgeIcon","badgeOneDigit","String","length"],"mappings":";;;;;AAgDaA,MAAAA,UAAUA,CAACC,UAAwB;AACxC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,OAAO;AAAA,IACPC,cAAcC;AAAAA,IACd,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,WAAWb,KAAK;AAE9B,QAAA;AAAA,IAAEC;AAAAA,IAASa;AAAAA,EAAAA,IAAOC,WAAWb,WAAW;AAE9C,QAAMc,gBAAgBX,QAAQC,WAAY,GAAEA,QAAS,MAAKD;AAK1D,QAAMY,uBACJV,SAAUH,aAAaC,QAAQ,KAAKW,iBAAkB;AACxD,QAAME,YACJV,QAASC,4BAAS,cAAa,EAAA,SAASC,aAAcD,UAAK,KAAA,CAAA;AAG3D,SAAA,qBAAC,SAAI,WAAWK,GAAGb,QAAQkB,MAAMhB,SAAS,GAAG,GAAIS,QAC9CM,UAAAA;AAAAA,IAAAA;AAAAA,IACA,oBAAA,OAAA,EAAI,WAAWA,YAAYjB,QAAQmB,iBAAiBT,QACnD,UAAA,oBAAC,OACC,EAAA,WAAWG,GAAGb,QAAQoB,eAAe;AAAA,MACnC,CAACpB,QAAQqB,KAAK,GAAG,CAAC,EAAEjB,QAAQ,KAAKY;AAAAA,MACjC,CAAChB,QAAQG,SAAS,GAAG,CAAC,EAAE,CAACG,SAASU;AAAAA,MAClC,CAAChB,QAAQsB,SAAS,GAAG,CAAC,CAAChB;AAAAA,MACvB,CAACN,QAAQuB,SAAS,GAAG,CAAC,CAAChB;AAAAA,MACvB,CAACP,QAAQwB,aAAa,GAAGC,OAAOT,oBAAoB,EAAEU,WAAW;AAAA,IAClE,CAAA,GAEAV,UAAAA,qBACH,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  HvTypography,\n  HvTypographyVariants,\n} from \"@core/components/Typography\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Badge.styles\";\n\nexport { staticClasses as badgeClasses };\n\nexport type HvBadgeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBadgeProps extends HvBaseProps {\n  /**\n   * Count is the number of unread notifications.\n   * Note count and label are mutually exclusive.\n   * count is ignored when label is specified at the same time.\n   */\n  count?: number;\n  /**\n   * True if count should be displayed.\n   * Note showCount and label are mutually exclusive.\n   * showCount is ignored when label is specified at the same time.\n   */\n  showCount?: boolean;\n  /** The maximum number of unread notifications to be displayed */\n  maxCount?: number;\n  /**\n   * Custom text to show in place of count.\n   * Note showCount and label are mutually exclusive.\n   * showCount is ignored when label is specified at the same time.\n   */\n  label?: string;\n  /** Icon which the notification will be attached. */\n  icon?: React.ReactNode;\n  /** Text which the notification will be attached. */\n  text?: string;\n  /** Text variant. */\n  textVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBadgeClasses;\n}\n\n/**\n * The badge is a component used to notify the user that something has occurred, in the app context.\n */\nexport const HvBadge = (props: HvBadgeProps) => {\n  const {\n    classes: classesProp,\n    className,\n    showCount = false,\n    count = 0,\n    maxCount = 99,\n    label = null,\n    icon = null,\n    text = null,\n    textVariant = undefined,\n    ...others\n  } = useDefaultProps(\"HvBadge\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const renderedCount = count > maxCount ? `${maxCount}+` : count;\n  // If label is specified and non-empty, render it.\n  // If showCount is specified and count > 0, render the count.\n  // Otherwise, render nothing on the badge.\n  // (Note count=0 should not be rendered to avoid ghosty 0.)\n  const renderedCountOrLabel =\n    label || (showCount && count > 0 && renderedCount) || null;\n  const Component =\n    icon || (text && <HvTypography variant={textVariant}>{text}</HvTypography>);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {Component}\n      <div className={Component ? classes.badgeContainer : undefined}>\n        <div\n          className={cx(classes.badgePosition, {\n            [classes.badge]: !!(count > 0 || renderedCountOrLabel),\n            [classes.showCount]: !!(!label && renderedCountOrLabel),\n            [classes.showLabel]: !!label,\n            [classes.badgeIcon]: !!icon,\n            [classes.badgeOneDigit]: String(renderedCountOrLabel).length === 1,\n          })}\n        >\n          {renderedCountOrLabel}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAgDa,MAAA,UAAU,CAAC,UAAwB;AACxC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,IACP,cAAc;AAAA,IACd,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AAEpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,gBAAgB,QAAQ,WAAW,GAAG,QAAQ,MAAM;AAK1D,QAAM,uBACJ,SAAU,aAAa,QAAQ,KAAK,iBAAkB;AACxD,QAAM,YACJ,QAAS,4BAAS,cAAa,EAAA,SAAS,aAAc,UAAK,KAAA,CAAA;AAG3D,SAAA,qBAAC,SAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC9C,UAAA;AAAA,IAAA;AAAA,wBACA,OAAI,EAAA,WAAW,YAAY,QAAQ,iBAAiB,QACnD,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,eAAe;AAAA,UACnC,CAAC,QAAQ,KAAK,GAAG,CAAC,EAAE,QAAQ,KAAK;AAAA,UACjC,CAAC,QAAQ,SAAS,GAAG,CAAC,EAAE,CAAC,SAAS;AAAA,UAClC,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC;AAAA,UACvB,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC;AAAA,UACvB,CAAC,QAAQ,aAAa,GAAG,OAAO,oBAAoB,EAAE,WAAW;AAAA,QAAA,CAClE;AAAA,QAEA,UAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Badge/Badge.styles.js

@@ -6,19 +6,9 @@ const labelBaseStyle = {
   color: theme.colors.atmo1,
   lineHeight: "16px"
 };
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvBadge", {
-  root: {
-    position: "relative",
-    "&>*": {
-      float: "left"
-    }
-  },
-  badgeContainer: {
-    width: 0
-  },
+const { staticClasses, useClasses } = createClasses("HvBadge", {
+  root: { position: "relative", "&>*": { float: "left" } },
+  badgeContainer: { width: 0 },
   badgePosition: {},
   badge: {
     borderRadius: theme.space.xs,
@@ -27,24 +17,10 @@ const {
     minHeight: "8px",
     minWidth: "8px"
   },
-  showCount: {
-    ...labelBaseStyle,
-    wordBreak: "keep-all"
-  },
-  showLabel: {
-    ...labelBaseStyle,
-    wordBreak: "keep-all"
-  },
-  badgeIcon: {
-    position: "relative",
-    top: "1px",
-    left: "-7px"
-  },
-  badgeOneDigit: {
-    padding: 0,
-    width: "16px",
-    textAlign: "center"
-  }
+  showCount: { ...labelBaseStyle, wordBreak: "keep-all" },
+  showLabel: { ...labelBaseStyle, wordBreak: "keep-all" },
+  badgeIcon: { position: "relative", top: "1px", left: "-7px" },
+  badgeOneDigit: { padding: 0, width: "16px", textAlign: "center" }
 });
 export {
   staticClasses,

package/dist/esm/components/Badge/Badge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.styles.js","sources":["../../../../src/components/Badge/Badge.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst labelBaseStyle: CSSProperties = {\n  ...theme.typography.label,\n  padding: \"0 5px\",\n  color: theme.colors.atmo1,\n  lineHeight: \"16px\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBadge\", {\n  root: { position: \"relative\", \"&>*\": { float: \"left\" } },\n  badgeContainer: { width: 0 },\n  badgePosition: {},\n  badge: {\n    borderRadius: theme.space.xs,\n    backgroundColor: theme.colors.secondary,\n    float: \"left\",\n    minHeight: \"8px\",\n    minWidth: \"8px\",\n  },\n  showCount: { ...labelBaseStyle, wordBreak: \"keep-all\" },\n  showLabel: { ...labelBaseStyle, wordBreak: \"keep-all\" },\n  badgeIcon: { position: \"relative\", top: \"1px\", left: \"-7px\" },\n  badgeOneDigit: { padding: 0, width: \"16px\", textAlign: \"center\" },\n});\n"],"names":["labelBaseStyle","theme","typography","label","padding","color","colors","atmo1","lineHeight","staticClasses","useClasses","createClasses","root","position","float","badgeContainer","width","badgePosition","badge","borderRadius","space","xs","backgroundColor","secondary","minHeight","minWidth","showCount","wordBreak","showLabel","badgeIcon","top","left","badgeOneDigit","textAlign"],"mappings":";;AAMA,MAAMA,iBAAgC;AAAA,EACpC,GAAGC,MAAMC,WAAWC;AAAAA,EACpBC,SAAS;AAAA,EACTC,OAAOJ,MAAMK,OAAOC;AAAAA,EACpBC,YAAY;AACd;AAEa,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IAAEC,UAAU;AAAA,IAAY,OAAO;AAAA,MAAEC,OAAO;AAAA,IAAO;AAAA,EAAE;AAAA,EACvDC,gBAAgB;AAAA,IAAEC,OAAO;AAAA,EAAE;AAAA,EAC3BC,eAAe,CAAC;AAAA,EAChBC,OAAO;AAAA,IACLC,cAAclB,MAAMmB,MAAMC;AAAAA,IAC1BC,iBAAiBrB,MAAMK,OAAOiB;AAAAA,IAC9BT,OAAO;AAAA,IACPU,WAAW;AAAA,IACXC,UAAU;AAAA,EACZ;AAAA,EACAC,WAAW;AAAA,IAAE,GAAG1B;AAAAA,IAAgB2B,WAAW;AAAA,EAAW;AAAA,EACtDC,WAAW;AAAA,IAAE,GAAG5B;AAAAA,IAAgB2B,WAAW;AAAA,EAAW;AAAA,EACtDE,WAAW;AAAA,IAAEhB,UAAU;AAAA,IAAYiB,KAAK;AAAA,IAAOC,MAAM;AAAA,EAAO;AAAA,EAC5DC,eAAe;AAAA,IAAE5B,SAAS;AAAA,IAAGY,OAAO;AAAA,IAAQiB,WAAW;AAAA,EAAS;AAClE,CAAC;"}
+{"version":3,"file":"Badge.styles.js","sources":["../../../../src/components/Badge/Badge.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst labelBaseStyle: CSSProperties = {\n  ...theme.typography.label,\n  padding: \"0 5px\",\n  color: theme.colors.atmo1,\n  lineHeight: \"16px\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBadge\", {\n  root: { position: \"relative\", \"&>*\": { float: \"left\" } },\n  badgeContainer: { width: 0 },\n  badgePosition: {},\n  badge: {\n    borderRadius: theme.space.xs,\n    backgroundColor: theme.colors.secondary,\n    float: \"left\",\n    minHeight: \"8px\",\n    minWidth: \"8px\",\n  },\n  showCount: { ...labelBaseStyle, wordBreak: \"keep-all\" },\n  showLabel: { ...labelBaseStyle, wordBreak: \"keep-all\" },\n  badgeIcon: { position: \"relative\", top: \"1px\", left: \"-7px\" },\n  badgeOneDigit: { padding: 0, width: \"16px\", textAlign: \"center\" },\n});\n"],"names":[],"mappings":";;AAMA,MAAM,iBAAgC;AAAA,EACpC,GAAG,MAAM,WAAW;AAAA,EACpB,SAAS;AAAA,EACT,OAAO,MAAM,OAAO;AAAA,EACpB,YAAY;AACd;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,UAAU,YAAY,OAAO,EAAE,OAAO,SAAS;AAAA,EACvD,gBAAgB,EAAE,OAAO,EAAE;AAAA,EAC3B,eAAe,CAAC;AAAA,EAChB,OAAO;AAAA,IACL,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,WAAW;AAAA,IACX,UAAU;AAAA,EACZ;AAAA,EACA,WAAW,EAAE,GAAG,gBAAgB,WAAW,WAAW;AAAA,EACtD,WAAW,EAAE,GAAG,gBAAgB,WAAW,WAAW;AAAA,EACtD,WAAW,EAAE,UAAU,YAAY,KAAK,OAAO,MAAM,OAAO;AAAA,EAC5D,eAAe,EAAE,SAAS,GAAG,OAAO,QAAQ,WAAW,SAAS;AAClE,CAAC;"}

package/dist/esm/components/Banner/Banner.js

@@ -28,24 +28,48 @@ const HvBanner = (props) => {
     bannerContentProps,
     ...others
   } = useDefaultProps("HvBanner", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const anchorOriginBanner = {
     horizontal: "center",
     vertical: anchorOrigin
   };
-  const SlideTransition = useCallback((properties) => /* @__PURE__ */ jsx(Slide, { ...properties, direction: transitionDirection }), [transitionDirection]);
-  return /* @__PURE__ */ jsx(Snackbar, { id, open, className, classes: {
-    root: cx(classes.root, {
-      [classes.rootClosed]: !open
-    }),
-    anchorOriginTopCenter: classes.anchorOriginTopCenter,
-    anchorOriginBottomCenter: classes.anchorOriginBottomCenter
-  }, style: {
-    [anchorOrigin]: offset
-  }, anchorOrigin: anchorOriginBanner, TransitionComponent: SlideTransition, transitionDuration, ...others, children: /* @__PURE__ */ jsx(HvBannerContent, { id: setId(id, "content"), content: label, variant, customIcon, showIcon, actions, actionsCallback, actionsPosition, onClose, ...bannerContentProps }) });
+  const SlideTransition = useCallback(
+    (properties) => /* @__PURE__ */ jsx(Slide, { ...properties, direction: transitionDirection }),
+    [transitionDirection]
+  );
+  return /* @__PURE__ */ jsx(
+    Snackbar,
+    {
+      id,
+      open,
+      className,
+      classes: {
+        root: cx(classes.root, { [classes.rootClosed]: !open }),
+        anchorOriginTopCenter: classes.anchorOriginTopCenter,
+        anchorOriginBottomCenter: classes.anchorOriginBottomCenter
+      },
+      style: { [anchorOrigin]: offset },
+      anchorOrigin: anchorOriginBanner,
+      TransitionComponent: SlideTransition,
+      transitionDuration,
+      ...others,
+      children: /* @__PURE__ */ jsx(
+        HvBannerContent,
+        {
+          id: setId(id, "content"),
+          content: label,
+          variant,
+          customIcon,
+          showIcon,
+          actions,
+          actionsCallback,
+          actionsPosition,
+          onClose,
+          ...bannerContentProps
+        }
+      )
+    }
+  );
 };
 export {
   HvBanner,

package/dist/esm/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import { useCallback } from \"react\";\n\nimport Slide from \"@mui/material/Slide\";\n\nimport Snackbar, {\n  SnackbarProps as MuiSnackbarProps,\n  SnackbarOrigin,\n} from \"@mui/material/Snackbar\";\n\nimport { HvActionGeneric } from \"@core/components/ActionsGeneric\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useClasses, staticClasses } from \"./Banner.styles\";\nimport {\n  HvBannerContent,\n  HvBannerContentProps,\n} from \"./BannerContent/BannerContent\";\nimport { HvBannerActionPosition, HvBannerVariant } from \"./types\";\n\nexport { staticClasses as bannerClasses };\n\nexport type HvBannerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerProps\n  extends Omit<MuiSnackbarProps, \"anchorOrigin\" | \"classes\" | \"onClose\"> {\n  /** If true, the snackbar is open. */\n  open: boolean;\n  /** Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The message to display. */\n  label?: string;\n  /** The anchor of the Snackbar. */\n  anchorOrigin?: \"top\" | \"bottom\";\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Actions to display on the right side. */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /** The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** How much the transition animation last in milliseconds, if 0 no animation is played. */\n  transitionDuration?: number;\n  /** Direction of slide transition. */\n  transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n  /** Offset from top/bottom of the page, in px. Defaults to 60px. */\n  offset?: number;\n  /** Props to pass down to the Banner Wrapper. An object `actionProps` can be included to be passed as others to actions. */\n  bannerContentProps?: HvBannerContentProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerClasses;\n  /** @ignore */\n  ref?: MuiSnackbarProps[\"ref\"];\n}\n\n/**\n * A Banner displays an important and succinct message. It can also provide actions for the user to address, or dismiss.\n * It requires a user action, for it to be dismissed. Banners should appear at the top of the screen, below a top app bar.\n */\nexport const HvBanner = (props: HvBannerProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    open,\n    onClose,\n    anchorOrigin = \"top\",\n    variant = \"default\",\n    transitionDuration = 300,\n    transitionDirection = \"down\",\n    showIcon = false,\n    customIcon,\n    actions,\n    actionsCallback,\n    actionsPosition = \"auto\",\n    label,\n    offset = 60,\n    bannerContentProps,\n    ...others\n  } = useDefaultProps(\"HvBanner\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const anchorOriginBanner: SnackbarOrigin = {\n    horizontal: \"center\",\n    vertical: anchorOrigin,\n  };\n\n  const SlideTransition = useCallback<\n    NonNullable<MuiSnackbarProps[\"TransitionComponent\"]>\n  >(\n    (properties) => <Slide {...properties} direction={transitionDirection} />,\n    [transitionDirection]\n  );\n\n  return (\n    <Snackbar\n      id={id}\n      open={open}\n      className={className}\n      classes={{\n        root: cx(classes.root, { [classes.rootClosed]: !open }),\n        anchorOriginTopCenter: classes.anchorOriginTopCenter,\n        anchorOriginBottomCenter: classes.anchorOriginBottomCenter,\n      }}\n      style={{ [anchorOrigin]: offset }}\n      anchorOrigin={anchorOriginBanner}\n      TransitionComponent={SlideTransition}\n      transitionDuration={transitionDuration}\n      {...others}\n    >\n      <HvBannerContent\n        id={setId(id, \"content\")}\n        content={label}\n        variant={variant}\n        customIcon={customIcon}\n        showIcon={showIcon}\n        actions={actions}\n        actionsCallback={actionsCallback}\n        actionsPosition={actionsPosition}\n        onClose={onClose}\n        {...bannerContentProps}\n      />\n    </Snackbar>\n  );\n};\n"],"names":["HvBanner","props","id","classes","classesProp","className","open","onClose","anchorOrigin","variant","transitionDuration","transitionDirection","showIcon","customIcon","actions","actionsCallback","actionsPosition","label","offset","bannerContentProps","others","useDefaultProps","cx","useClasses","anchorOriginBanner","horizontal","vertical","SlideTransition","useCallback","properties","root","rootClosed","anchorOriginTopCenter","anchorOriginBottomCenter","setId"],"mappings":";;;;;;;;;AAqEaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,qBAAqB;AAAA,IACrBC,sBAAsB;AAAA,IACtBC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,kBAAkB;AAAA,IAClBC;AAAAA,IACAC,SAAS;AAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYpB,KAAK;AAC/B,QAAA;AAAA,IAAEE;AAAAA,IAASmB;AAAAA,EAAAA,IAAOC,WAAWnB,WAAW;AAE9C,QAAMoB,qBAAqC;AAAA,IACzCC,YAAY;AAAA,IACZC,UAAUlB;AAAAA,EAAAA;AAGZ,QAAMmB,kBAAkBC,YAGrBC,CAAe,eAAA,oBAAC,OAAUA,EAAAA,GAAAA,YAAY,WAAWlB,oBAAuB,CAAA,GACzE,CAACA,mBAAmB,CACtB;AAEA,SACG,oBAAA,UAAA,EACC,IACA,MACA,WACA,SAAS;AAAA,IACPmB,MAAMR,GAAGnB,QAAQ2B,MAAM;AAAA,MAAE,CAAC3B,QAAQ4B,UAAU,GAAG,CAACzB;AAAAA,IAAAA,CAAM;AAAA,IACtD0B,uBAAuB7B,QAAQ6B;AAAAA,IAC/BC,0BAA0B9B,QAAQ8B;AAAAA,KAEpC,OAAO;AAAA,IAAE,CAACzB,YAAY,GAAGU;AAAAA,EAAO,GAChC,cAAcM,oBACd,qBAAqBG,iBACrB,oBACIP,GAAAA,QAEJ,UAAA,oBAAC,iBACC,EAAA,IAAIc,MAAMhC,IAAI,SAAS,GACvB,SAASe,OACT,SACA,YACA,UACA,SACA,iBACA,iBACA,SACA,GAAIE,mBAAmB,CAAA,EAE3B,CAAA;AAEJ;"}
+{"version":3,"file":"Banner.js","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import { useCallback } from \"react\";\n\nimport Slide from \"@mui/material/Slide\";\n\nimport Snackbar, {\n  SnackbarProps as MuiSnackbarProps,\n  SnackbarOrigin,\n} from \"@mui/material/Snackbar\";\n\nimport { HvActionGeneric } from \"@core/components/ActionsGeneric\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useClasses, staticClasses } from \"./Banner.styles\";\nimport {\n  HvBannerContent,\n  HvBannerContentProps,\n} from \"./BannerContent/BannerContent\";\nimport { HvBannerActionPosition, HvBannerVariant } from \"./types\";\n\nexport { staticClasses as bannerClasses };\n\nexport type HvBannerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerProps\n  extends Omit<MuiSnackbarProps, \"anchorOrigin\" | \"classes\" | \"onClose\"> {\n  /** If true, the snackbar is open. */\n  open: boolean;\n  /** Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The message to display. */\n  label?: string;\n  /** The anchor of the Snackbar. */\n  anchorOrigin?: \"top\" | \"bottom\";\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Actions to display on the right side. */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /** The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** How much the transition animation last in milliseconds, if 0 no animation is played. */\n  transitionDuration?: number;\n  /** Direction of slide transition. */\n  transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n  /** Offset from top/bottom of the page, in px. Defaults to 60px. */\n  offset?: number;\n  /** Props to pass down to the Banner Wrapper. An object `actionProps` can be included to be passed as others to actions. */\n  bannerContentProps?: HvBannerContentProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerClasses;\n  /** @ignore */\n  ref?: MuiSnackbarProps[\"ref\"];\n}\n\n/**\n * A Banner displays an important and succinct message. It can also provide actions for the user to address, or dismiss.\n * It requires a user action, for it to be dismissed. Banners should appear at the top of the screen, below a top app bar.\n */\nexport const HvBanner = (props: HvBannerProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    open,\n    onClose,\n    anchorOrigin = \"top\",\n    variant = \"default\",\n    transitionDuration = 300,\n    transitionDirection = \"down\",\n    showIcon = false,\n    customIcon,\n    actions,\n    actionsCallback,\n    actionsPosition = \"auto\",\n    label,\n    offset = 60,\n    bannerContentProps,\n    ...others\n  } = useDefaultProps(\"HvBanner\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const anchorOriginBanner: SnackbarOrigin = {\n    horizontal: \"center\",\n    vertical: anchorOrigin,\n  };\n\n  const SlideTransition = useCallback<\n    NonNullable<MuiSnackbarProps[\"TransitionComponent\"]>\n  >(\n    (properties) => <Slide {...properties} direction={transitionDirection} />,\n    [transitionDirection]\n  );\n\n  return (\n    <Snackbar\n      id={id}\n      open={open}\n      className={className}\n      classes={{\n        root: cx(classes.root, { [classes.rootClosed]: !open }),\n        anchorOriginTopCenter: classes.anchorOriginTopCenter,\n        anchorOriginBottomCenter: classes.anchorOriginBottomCenter,\n      }}\n      style={{ [anchorOrigin]: offset }}\n      anchorOrigin={anchorOriginBanner}\n      TransitionComponent={SlideTransition}\n      transitionDuration={transitionDuration}\n      {...others}\n    >\n      <HvBannerContent\n        id={setId(id, \"content\")}\n        content={label}\n        variant={variant}\n        customIcon={customIcon}\n        showIcon={showIcon}\n        actions={actions}\n        actionsCallback={actionsCallback}\n        actionsPosition={actionsPosition}\n        onClose={onClose}\n        {...bannerContentProps}\n      />\n    </Snackbar>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAqEa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,UAAU;AAAA,IACV,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,qBAAqC;AAAA,IACzC,YAAY;AAAA,IACZ,UAAU;AAAA,EAAA;AAGZ,QAAM,kBAAkB;AAAA,IAGtB,CAAC,eAAe,oBAAC,SAAO,GAAG,YAAY,WAAW,qBAAqB;AAAA,IACvE,CAAC,mBAAmB;AAAA,EAAA;AAIpB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,UAAU,GAAG,CAAC,MAAM;AAAA,QACtD,uBAAuB,QAAQ;AAAA,QAC/B,0BAA0B,QAAQ;AAAA,MACpC;AAAA,MACA,OAAO,EAAE,CAAC,YAAY,GAAG,OAAO;AAAA,MAChC,cAAc;AAAA,MACd,qBAAqB;AAAA,MACrB;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,SAAS;AAAA,UACvB,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/components/Banner/Banner.styles.js

@@ -1,9 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../utils/classes.js";
-const {
-  useClasses,
-  staticClasses
-} = createClasses("HvBanner", {
+const { useClasses, staticClasses } = createClasses("HvBanner", {
   /** Styles applied to the component root class when the component is closed. */
   rootClosed: {
     display: "none"

package/dist/esm/components/Banner/Banner.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.styles.js","sources":["../../../../src/components/Banner/Banner.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBanner\", {\n  /** Styles applied to the component root class when the component is closed. */\n  rootClosed: {\n    display: \"none\",\n  },\n  /** Styles applied to the component root class. */\n  root: {\n    minWidth: `calc(100% - ${theme.space.sm})`,\n  },\n  /** Styles applied to the component when define as top. */\n  anchorOriginTopCenter: {\n    top: theme.space.xs,\n  },\n  /** Styles applied to the component when define as bottom. */\n  anchorOriginBottomCenter: {\n    bottom: theme.space.xs,\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","rootClosed","display","root","minWidth","theme","space","sm","anchorOriginTopCenter","top","xs","anchorOriginBottomCenter","bottom"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAAc,YAAY;AAAA;AAAA,EAErEC,YAAY;AAAA,IACVC,SAAS;AAAA,EACX;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAW,eAAcC,MAAMC,MAAMC,EAAG;AAAA,EAC1C;AAAA;AAAA,EAEAC,uBAAuB;AAAA,IACrBC,KAAKJ,MAAMC,MAAMI;AAAAA,EACnB;AAAA;AAAA,EAEAC,0BAA0B;AAAA,IACxBC,QAAQP,MAAMC,MAAMI;AAAAA,EACtB;AACF,CAAC;"}
+{"version":3,"file":"Banner.styles.js","sources":["../../../../src/components/Banner/Banner.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBanner\", {\n  /** Styles applied to the component root class when the component is closed. */\n  rootClosed: {\n    display: \"none\",\n  },\n  /** Styles applied to the component root class. */\n  root: {\n    minWidth: `calc(100% - ${theme.space.sm})`,\n  },\n  /** Styles applied to the component when define as top. */\n  anchorOriginTopCenter: {\n    top: theme.space.xs,\n  },\n  /** Styles applied to the component when define as bottom. */\n  anchorOriginBottomCenter: {\n    bottom: theme.space.xs,\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,YAAY,kBAAkB,cAAc,YAAY;AAAA;AAAA,EAErE,YAAY;AAAA,IACV,SAAS;AAAA,EACX;AAAA;AAAA,EAEA,MAAM;AAAA,IACJ,UAAU,eAAe,MAAM,MAAM,EAAE;AAAA,EACzC;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA,EAEA,0BAA0B;AAAA,IACxB,QAAQ,MAAM,MAAM;AAAA,EACtB;AACF,CAAC;"}

package/dist/esm/components/Banner/BannerContent/ActionContainer/ActionContainer.js

@@ -13,12 +13,30 @@ const HvActionContainer = (props) => {
     actionCallback,
     ...others
   } = props;
-  const {
-    classes
-  } = useClasses(classesProp);
+  const { classes } = useClasses(classesProp);
   return /* @__PURE__ */ jsxs("div", { className: classes.actionContainer, children: [
-    /* @__PURE__ */ jsx(HvButton, { icon: true, className: classes.closeAction, variant: "semantic", "aria-label": "Close", onClick: onClose, tabIndex: 0, ...others, children: /* @__PURE__ */ jsx(Close, { iconSize: "XS", className: classes.iconContainer, color: "base2" }) }),
-    action && /* @__PURE__ */ jsx("div", { className: classes.actionsInnerContainer, children: /* @__PURE__ */ jsx(HvActionsGeneric, { id, category: "semantic", actions: action, actionsCallback: actionCallback }) })
+    /* @__PURE__ */ jsx(
+      HvButton,
+      {
+        icon: true,
+        className: classes.closeAction,
+        variant: "semantic",
+        "aria-label": "Close",
+        onClick: onClose,
+        tabIndex: 0,
+        ...others,
+        children: /* @__PURE__ */ jsx(Close, { iconSize: "XS", className: classes.iconContainer, color: "base2" })
+      }
+    ),
+    action && /* @__PURE__ */ jsx("div", { className: classes.actionsInnerContainer, children: /* @__PURE__ */ jsx(
+      HvActionsGeneric,
+      {
+        id,
+        category: "semantic",
+        actions: action,
+        actionsCallback: actionCallback
+      }
+    ) })
   ] });
 };
 export {