@hitachivantara/uikit-react-core 5.63.0 → 5.63.2

package/dist/cjs/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs

@@ -6,49 +6,44 @@ const focusUtils = require("../../../utils/focusUtils.cjs");
 const name = "HvHorizontalScrollListItem";
 const { staticClasses, useClasses } = classes.createClasses(name, {
   root: {
-    padding: "10px 0"
+    padding: uikitStyles.theme.spacing("xs", 0),
+    maxWidth: 120
   },
   button: {
     display: "flex",
+    flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
-    height: "48px",
-    cursor: "pointer",
-    borderBottom: "none",
-    "&:hover": {
-      backgroundColor: "transparent",
-      "& $notSelected": {
-        height: "6px",
-        width: "6px",
-        backgroundColor: uikitStyles.theme.colors.secondary
-      },
-      "& $notSelectedRoot": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
-      }
-    },
-    "&:focus": {
-      outline: "none"
-    },
     "&:focus-visible": {
       ...focusUtils.outlineStyles
     }
   },
   text: {
+    margin: uikitStyles.theme.spacing("xs", "xs", "0")
+  },
+  selected: {
+    fontWeight: uikitStyles.theme.typography.label.fontWeight
+  },
+  bullet: {
     display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
     justifyContent: "center",
-    height: "48px",
-    borderBottom: "none",
-    "& p": {
-      padding: "3px 10px",
-      maxWidth: "120px",
-      textOverflow: "ellipsis",
-      overflow: "hidden"
+    alignItems: "center",
+    minHeight: 24,
+    height: 24,
+    width: 24,
+    fontSize: 4,
+    color: uikitStyles.theme.colors.secondary_60,
+    "& > span": {
+      margin: "auto",
+      width: "1em",
+      height: "1em",
+      backgroundColor: "currentcolor",
+      borderRadius: "50%"
     }
   },
-  selected: {
-    borderBottom: "none"
+  bulletSelected: {
+    fontSize: 6,
+    color: uikitStyles.theme.colors.secondary
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/ScrollTo/Horizontal/ScrollToHorizontal.cjs

@@ -1,18 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const React = require("react");
 const styles = require("@mui/material/styles");
 const useMediaQuery = require("@mui/material/useMediaQuery");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
-const useTheme = require("../../hooks/useTheme.cjs");
-const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const setId = require("../../utils/setId.cjs");
 const useScrollTo = require("../useScrollTo.cjs");
-const withTooltip = require("../withTooltip.cjs");
 const ScrollToHorizontal_styles = require("./ScrollToHorizontal.styles.cjs");
 const HorizontalScrollListItem = require("./HorizontalScrollListItem/HorizontalScrollListItem.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -40,8 +35,6 @@ const HvScrollToHorizontal = (props) => {
   const muiTheme = styles.useTheme();
   const downSm = useMediaQuery__default.default(muiTheme.breakpoints.down("sm"));
   const upMd = useMediaQuery__default.default(muiTheme.breakpoints.up("md"));
-  const { activeTheme } = useTheme.useTheme();
-  const elementId = useUniqueId.useUniqueId(id);
   const [selectedIndex, setScrollTo, elements] = useScrollTo.useScrollTo(
     defaultSelectedIndex,
     scrollElementId,
@@ -51,65 +44,34 @@ const HvScrollToHorizontal = (props) => {
     options,
     onChange
   );
-  const handleSelection = (event, value, index) => {
-    event.preventDefault();
-    const wrappedOnChange = () => {
-      onChange?.(event, index);
-    };
-    setScrollTo(event, value, index, wrappedOnChange);
-  };
-  const tooltipWrappers = React.useMemo(() => {
-    return options.map((option) => {
-      return withTooltip.withTooltip(option.label, "div", tooltipPosition);
-    });
-  }, [options, tooltipPosition]);
-  const NotSelected = React.useCallback(() => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.notSelectedRoot, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.notSelected }) });
-  }, [classes.notSelectedRoot, classes.notSelected]);
-  const Selected = React.useCallback(() => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      uikitReactIcons.CurrentStep,
-      {
-        height: activeTheme?.scrollTo.dotSelectedSize,
-        width: activeTheme?.scrollTo.dotSelectedSize,
-        className: classes.selected
-      }
-    );
-  }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);
-  const tabs = elements.map((option, index) => {
-    const selected = selectedIndex === index;
-    const tooltipWrapper = tooltipWrappers[index];
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      HorizontalScrollListItem.HvHorizontalScrollListItem,
-      {
-        id: setId.setId(elementId, `item-${index}`),
-        onClick: (event) => {
-          if (navigationMode !== "none") {
-            event.preventDefault();
-          }
-          handleSelection(event, option.value, index);
-          onClick?.(event, index);
-        },
-        onKeyDown: (event) => {
-          if (keyboardUtils.isKey(event, "Enter") === true) {
-            if (navigationMode !== "none") {
-              event.preventDefault();
-            }
-            handleSelection(event, option.value, index);
-            onEnter?.(event, index);
-          }
-        },
-        href: navigationMode !== "none" ? option.href : void 0,
-        tooltipWrapper,
-        selected,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { children: option.label }),
-          selected ? /* @__PURE__ */ jsxRuntime.jsx(Selected, {}) : /* @__PURE__ */ jsxRuntime.jsx(NotSelected, {})
-        ]
+  const tabs = elements.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    HorizontalScrollListItem.HvHorizontalScrollListItem,
+    {
+      id: setId.setId(id, `item-${index}`),
+      onClick: (event) => {
+        event.preventDefault();
+        setScrollTo(event, option.value, index, () => onChange?.(event, index));
+        onClick?.(event, index);
+      },
+      onKeyDown: (event) => {
+        if (keyboardUtils.isKey(event, "Enter") !== true)
+          return;
+        event.preventDefault();
+        setScrollTo(event, option.value, index, () => onChange?.(event, index));
+        onEnter?.(event, index);
       },
-      option.key || option.label
-    );
-  });
+      href: navigationMode !== "none" ? option.href : void 0,
+      tooltipPlacement: tooltipPosition,
+      selected: selectedIndex === index,
+      label: option.label,
+      iconClasses: cx({
+        [classes.selected]: selectedIndex === index,
+        [classes.notSelected]: selectedIndex !== index,
+        [classes.notSelectedRoot]: selectedIndex !== index
+      })
+    },
+    option.key || option.label
+  ));
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ol",
     {
@@ -128,7 +90,7 @@ const HvScrollToHorizontal = (props) => {
         },
         className
       ),
-      id: elementId,
+      id,
       ...others,
       children: tabs
     }

package/dist/cjs/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs

@@ -25,26 +25,9 @@ const { staticClasses, useClasses } = classes.createClasses(
       top: 0,
       left: 0
     },
-    notSelectedRoot: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      height: "16px",
-      width: "16px",
-      borderRadius: "50%"
-    },
-    notSelected: {
-      height: "4px",
-      width: "4px",
-      borderRadius: "50%",
-      display: "inline-block",
-      backgroundColor: uikitStyles.theme.colors.secondary_60
-    },
-    selected: {
-      display: "flex",
-      height: "16px",
-      width: "16px"
-    }
+    notSelectedRoot: {},
+    notSelected: {},
+    selected: {}
   }
 );
 exports.staticClasses = staticClasses;

package/dist/cjs/ScrollTo/Vertical/ScrollToVertical.cjs

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
-const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const setId = require("../../utils/setId.cjs");
 const useScrollTo = require("../useScrollTo.cjs");
@@ -29,7 +28,6 @@ const HvScrollToVertical = (props) => {
     ...others
   } = useDefaultProps.useDefaultProps("HvScrollToVertical", props);
   const { classes, cx } = ScrollToVertical_styles.useClasses(classesProp);
-  const elementId = useUniqueId.useUniqueId(id);
   const [selectedIndex, setScrollTo, elements] = useScrollTo.useScrollTo(
     defaultSelectedIndex,
     scrollElementId,
@@ -39,32 +37,21 @@ const HvScrollToVertical = (props) => {
     options,
     onChange
   );
-  const handleSelection = (event, value, index) => {
-    event.preventDefault();
-    const wrappedOnChange = () => {
-      onChange?.(event, index);
-    };
-    setScrollTo(event, value, index, wrappedOnChange);
-  };
   const tabs = elements.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
     VerticalScrollListItem.HvVerticalScrollListItem,
     {
-      id: setId.setId(elementId, `item-${index}`),
+      id: setId.setId(id, `item-${index}`),
       onClick: (event) => {
-        if (navigationMode !== "none") {
-          event.preventDefault();
-        }
-        handleSelection(event, option.value, index);
+        event.preventDefault();
+        setScrollTo(event, option.value, index, () => onChange?.(event, index));
         onClick?.(event, index);
       },
       onKeyDown: (event) => {
-        if (keyboardUtils.isKey(event, "Enter") === true) {
-          if (navigationMode !== "none") {
-            event.preventDefault();
-          }
-          handleSelection(event, option.value, index);
-          onEnter?.(event, index);
-        }
+        if (keyboardUtils.isKey(event, "Enter") !== true)
+          return;
+        event.preventDefault();
+        setScrollTo(event, option.value, index, () => onChange?.(event, index));
+        onEnter?.(event, index);
       },
       href: navigationMode !== "none" ? option.href : void 0,
       tooltipPlacement: tooltipPosition,
@@ -86,7 +73,7 @@ const HvScrollToVertical = (props) => {
         className
       ),
       style: { top: `calc(50% - ${positionOffset}px)`, ...style },
-      id: elementId,
+      id,
       ...others,
       children: tabs
     }

package/dist/cjs/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
-const useTheme = require("../../../hooks/useTheme.cjs");
 const VerticalScrollListItem_styles = require("./VerticalScrollListItem.styles.cjs");
 const Tooltip = require("../../../Tooltip/Tooltip.cjs");
 const HvVerticalScrollListItem = (props) => {
@@ -13,33 +11,28 @@ const HvVerticalScrollListItem = (props) => {
     classes: classesProp,
     selected,
     label,
-    onClick,
-    onKeyDown,
     tooltipPlacement = "left",
     href,
     ...others
   } = useDefaultProps.useDefaultProps("HvVerticalScrollListItem", props);
   const { classes, cx } = VerticalScrollListItem_styles.useClasses(classesProp);
-  const { activeTheme } = useTheme.useTheme();
-  const icon = selected ? /* @__PURE__ */ jsxRuntime.jsx(
-    uikitReactIcons.CurrentStep,
-    {
-      height: activeTheme?.scrollTo.dotSelectedSize,
-      width: activeTheme?.scrollTo.dotSelectedSize
-    }
-  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.notSelected });
   const Component = href != null ? "a" : "div";
   return /* @__PURE__ */ jsxRuntime.jsx("li", { id, className: cx(classes.root, className), "aria-current": selected, children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { title: label, placement: tooltipPlacement, children: /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
       role: href == null ? "button" : void 0,
       tabIndex: 0,
-      onClick,
-      onKeyDown,
       className: cx(classes.button, classes.text),
       href,
       ...others,
-      children: icon
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cx(classes.icon, {
+            [classes.notSelected]: !selected
+          })
+        }
+      )
     }
   ) }) });
 };

package/dist/cjs/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs

@@ -13,12 +13,18 @@ const { staticClasses, useClasses } = classes.createClasses(name, {
     justifyContent: "center",
     alignItems: "center"
   },
-  notSelected: {
-    height: "4px",
-    width: "4px",
+  icon: {
+    width: "1em",
+    height: "1em",
     borderRadius: "50%",
+    fontSize: 6,
+    color: uikitStyles.theme.colors.secondary,
     display: "inline-block",
-    backgroundColor: uikitStyles.theme.colors.secondary_60
+    backgroundColor: "currentcolor"
+  },
+  notSelected: {
+    fontSize: 4,
+    color: uikitStyles.theme.colors.secondary_60
   },
   // TODO: remove in v6 (use classes.button)
   text: {},
@@ -33,9 +39,8 @@ const { staticClasses, useClasses } = classes.createClasses(name, {
     "&:hover": {
       backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
       "& $notSelected": {
-        height: "6px",
-        width: "6px",
-        backgroundColor: uikitStyles.theme.colors.secondary
+        fontSize: 6,
+        color: uikitStyles.theme.colors.secondary
       }
     },
     "&:focus": {

package/dist/cjs/providers/ThemeProvider.cjs

@@ -66,6 +66,13 @@ const HvThemeProvider = ({
     ]
   );
   const MuiTheme = styles.createTheme({
+    components: {
+      MuiButtonBase: {
+        defaultProps: {
+          disableRipple: true
+        }
+      }
+    },
     breakpoints: {
       values: {
         ...activeTheme.breakpoints.values

package/dist/esm/AppSwitcher/Action/Action.js

@@ -5,10 +5,10 @@ import { theme, getColor } from "@hitachivantara/uikit-styles";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { useClasses } from "./Action.styles.js";
 import { staticClasses } from "./Action.styles.js";
-import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
 import { HvAvatar } from "../../Avatar/Avatar.js";
 import { HvTypography } from "../../Typography/Typography.js";
 import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
+import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
 import { HvTooltip } from "../../Tooltip/Tooltip.js";
 const HvAppSwitcherAction = ({
   id,

package/dist/esm/Avatar/Avatar.js

@@ -3,6 +3,7 @@ import { forwardRef } from "react";
 import MuiAvatar from "@mui/material/Avatar";
 import { User } from "@hitachivantara/uikit-react-icons";
 import { getColor, theme } from "@hitachivantara/uikit-styles";
+import { useAvatarGroupContext } from "../AvatarGroup/AvatarGroupContext.js";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useImageLoaded } from "../hooks/useImageLoaded.js";
 import { decreaseSize } from "../utils/sizes.js";
@@ -15,7 +16,7 @@ const HvAvatar = forwardRef((props, ref) => {
     classes: classesProp,
     children: childrenProp,
     component = "div",
-    size = "sm",
+    size: sizeProp,
     backgroundColor = "secondary",
     color = "atmo1",
     src,
@@ -30,6 +31,8 @@ const HvAvatar = forwardRef((props, ref) => {
     ...others
   } = useDefaultProps("HvAvatar", props);
   const { classes, cx } = useClasses(classesProp);
+  const avatarGroupContext = useAvatarGroupContext();
+  const size = sizeProp || avatarGroupContext?.size || "sm";
   let children;
   const imageLoaded = useImageLoaded(src, srcSet);
   const hasImg = src || srcSet;

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useImageLoaded } from \"../hooks/useImageLoaded\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { decreaseSize } from \"../utils/sizes\";\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  /** 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?: React.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: React.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: React.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":";;;;;;;;;;AA0DO,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,cAAmC;AAAA,IACvC,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,oBAAyC,CAAA;AAC/C,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;"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  getColor,\n  HvColorAny,\n  HvSize,\n  theme,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { useAvatarGroupContext } from \"../AvatarGroup/AvatarGroupContext\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useImageLoaded } from \"../hooks/useImageLoaded\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { decreaseSize } from \"../utils/sizes\";\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\n/** @deprecated use `HvSize` instead */\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\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?: HvSize;\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?: React.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: sizeProp,\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  const avatarGroupContext = useAvatarGroupContext();\n\n  const size = sizeProp || avatarGroupContext?.size || \"sm\";\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: React.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: React.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":";;;;;;;;;;;AAiEO,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,MAAM;AAAA,IACN,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;AAE9C,QAAM,qBAAqB;AAErB,QAAA,OAAO,YAAY,oBAAoB,QAAQ;AAEjD,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,cAAmC;AAAA,IACvC,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,oBAAyC,CAAA;AAC/C,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;"}