@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/Avatar/Avatar.js

@@ -1,116 +1,71 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import MuiAvatar from "@mui/material/Avatar";
-import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
-import { getColor } from "@hitachivantara/uikit-styles";
+import { HvIcon } from "../icons.js";
 import { useAvatarGroupContext } from "../AvatarGroup/AvatarGroupContext.js";
 import { useImageLoaded } from "../hooks/useImageLoaded.js";
-import { HvIcon } from "../icons.js";
 import { useClasses } from "./Avatar.styles.js";
-import { staticClasses } from "./Avatar.styles.js";
-const decreaseSizeMap = {
-  xl: "lg",
-  lg: "md",
-  md: "sm",
-  sm: "xs",
-  xs: "xs"
+import { getColor } from "@hitachivantara/uikit-styles";
+import { mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import MuiAvatar from "@mui/material/Avatar";
+//#region src/Avatar/Avatar.tsx
+var decreaseSizeMap = {
+	xl: "lg",
+	lg: "md",
+	md: "sm",
+	sm: "xs",
+	xs: "xs"
 };
-const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
-  const {
-    className,
-    style,
-    classes: classesProp,
-    children: childrenProp,
-    component = "div",
-    size: sizeProp,
-    backgroundColor,
-    color: colorProp,
-    src,
-    srcSet,
-    sizes,
-    alt,
-    imgProps,
-    status,
-    badge,
-    variant = "circular",
-    avatarProps,
-    ...others
-  } = useDefaultProps("HvAvatar", props);
-  const { classes, cx } = useClasses(classesProp);
-  const color = props.backgroundColor ? props.color || "bgContainer" : colorProp;
-  const avatarGroupContext = useAvatarGroupContext();
-  const size = sizeProp || avatarGroupContext?.size || "sm";
-  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
-      }
-    );
-  } else if (childrenProp != null) {
-    children = childrenProp;
-  } else if (alt) {
-    [children] = alt;
-  } else {
-    children = /* @__PURE__ */ jsx(
-      HvIcon,
-      {
-        name: "User",
-        size: decreaseSizeMap[size],
-        className: classes.fallback
-      }
-    );
-  }
-  const statusColor = getColor(status, "positive");
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: cx(classes.container, classes[variant]),
-      style: mergeStyles(void 0, {
-        // we're using the boxShadow to have the border inside the container and not on its edge.
-        boxShadow: status && `inset 0px 0px 0px 2px ${statusColor}`
-      }),
-      ...others,
-      children: [
-        badge && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classes.badge,
-            style: { backgroundColor: getColor(badge, "positive") }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MuiAvatar,
-          {
-            component,
-            className: cx(classes.root, classes.avatar, classes[size], className),
-            "data-color": color,
-            style: mergeStyles(style, {
-              "--bgColor": !hasImgNotFailing && getColor(backgroundColor, "text"),
-              "--textColor": !hasImgNotFailing && getColor(color, "bgContainer"),
-              borderRadius: component != null && typeof component !== "string" && "50%"
-            }),
-            variant,
-            size,
-            ...avatarProps,
-            children
-          }
-        )
-      ]
-    }
-  );
+/**
+* Avatars represent a user or brand and can display an image, icon, or initials.
+*/
+var HvAvatar = forwardRef(function HvAvatar(props, ref) {
+	const { className, style, classes: classesProp, children: childrenProp, component = "div", size: sizeProp, backgroundColor, color: colorProp, src, srcSet, sizes, alt, imgProps, status, badge, variant = "circular", avatarProps, ...others } = useDefaultProps("HvAvatar", props);
+	const { classes, cx } = useClasses(classesProp);
+	const color = props.backgroundColor ? props.color || "bgContainer" : colorProp;
+	const avatarGroupContext = useAvatarGroupContext();
+	const size = sizeProp || avatarGroupContext?.size || "sm";
+	let children;
+	const imageLoaded = useImageLoaded(src, srcSet);
+	const hasImgNotFailing = (src || srcSet) && imageLoaded !== "error";
+	if (hasImgNotFailing) children = /* @__PURE__ */ jsx("img", {
+		alt,
+		src,
+		srcSet,
+		sizes,
+		className: classes.img,
+		...imgProps
+	});
+	else if (childrenProp != null) children = childrenProp;
+	else if (alt) [children] = alt;
+	else children = /* @__PURE__ */ jsx(HvIcon, {
+		name: "User",
+		size: decreaseSizeMap[size],
+		className: classes.fallback
+	});
+	const statusColor = getColor(status, "positive");
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx(classes.container, classes[variant]),
+		style: mergeStyles(void 0, { boxShadow: status && `inset 0px 0px 0px 2px ${statusColor}` }),
+		...others,
+		children: [badge && /* @__PURE__ */ jsx("div", {
+			className: classes.badge,
+			style: { backgroundColor: getColor(badge, "positive") }
+		}), /* @__PURE__ */ jsx(MuiAvatar, {
+			component,
+			className: cx(classes.root, classes.avatar, classes[size], className),
+			"data-color": color,
+			style: mergeStyles(style, {
+				"--bgColor": !hasImgNotFailing && getColor(backgroundColor, "text"),
+				"--textColor": !hasImgNotFailing && getColor(color, "bgContainer"),
+				borderRadius: component != null && typeof component !== "string" && "50%"
+			}),
+			variant,
+			size,
+			...avatarProps,
+			children
+		})]
+	});
 });
-export {
-  HvAvatar,
-  staticClasses as avatarClasses
-};
+//#endregion
+export { HvAvatar };

package/dist/Avatar/Avatar.styles.js

@@ -1,54 +1,64 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvAvatar", {
-  // use `classes.avatar` instead
-  root: {},
-  img: {
-    width: "100%",
-    height: "100%",
-    textAlign: "center",
-    // Handle non-square image. The property isn't supported by IE 11.
-    objectFit: "cover",
-    // Hide alt text.
-    color: "transparent",
-    // Hide the image broken icon, only works on Chrome.
-    textIndent: 1e4
-  },
-  fallback: {},
-  container: {
-    display: "flex",
-    alignItems: "center",
-    position: "relative",
-    padding: theme.space.xxs,
-    height: "fit-content",
-    fontSize: "1rem"
-  },
-  xs: { "--size": "24px", fontSize: theme.fontSizes.sm },
-  sm: { "--size": "32px", fontSize: theme.fontSizes.base },
-  md: { "--size": "40px", fontSize: theme.fontSizes.xl },
-  lg: { "--size": "52px", fontSize: theme.fontSizes.xl2 },
-  xl: { "--size": "88px", fontSize: theme.fontSizes.xl3 },
-  avatar: {
-    fontSize: "1em",
-    borderRadius: "inherit",
-    color: "var(--textColor)",
-    width: "var(--size)",
-    height: "var(--size)",
-    backgroundColor: "var(--bgColor)"
-  },
-  badge: {
-    width: 8,
-    height: 8,
-    position: "absolute",
-    top: 0,
-    right: 0,
-    borderRadius: theme.radii.full,
-    zIndex: 1
-  },
-  circular: { borderRadius: theme.radii.full },
-  square: {}
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Avatar/Avatar.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvAvatar", {
+	root: {},
+	img: {
+		width: "100%",
+		height: "100%",
+		textAlign: "center",
+		objectFit: "cover",
+		color: "transparent",
+		textIndent: 1e4
+	},
+	fallback: {},
+	container: {
+		display: "flex",
+		alignItems: "center",
+		position: "relative",
+		padding: theme.space.xxs,
+		height: "fit-content",
+		fontSize: "1rem"
+	},
+	xs: {
+		"--size": "24px",
+		fontSize: theme.fontSizes.sm
+	},
+	sm: {
+		"--size": "32px",
+		fontSize: theme.fontSizes.base
+	},
+	md: {
+		"--size": "40px",
+		fontSize: theme.fontSizes.xl
+	},
+	lg: {
+		"--size": "52px",
+		fontSize: theme.fontSizes.xl2
+	},
+	xl: {
+		"--size": "88px",
+		fontSize: theme.fontSizes.xl3
+	},
+	avatar: {
+		fontSize: "1em",
+		borderRadius: "inherit",
+		color: "var(--textColor)",
+		width: "var(--size)",
+		height: "var(--size)",
+		backgroundColor: "var(--bgColor)"
+	},
+	badge: {
+		width: 8,
+		height: 8,
+		position: "absolute",
+		top: 0,
+		right: 0,
+		borderRadius: theme.radii.full,
+		zIndex: 1
+	},
+	circular: { borderRadius: theme.radii.full },
+	square: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/AvatarGroup/AvatarGroup.js

@@ -1,81 +1,52 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, Children } from "react";
-import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
+import { HvAvatarGroupProvider } from "./AvatarGroupContext.js";
 import { HvAvatar } from "../Avatar/Avatar.js";
 import { useClasses } from "./AvatarGroup.styles.js";
-import { staticClasses } from "./AvatarGroup.styles.js";
-import { HvAvatarGroupProvider } from "./AvatarGroupContext.js";
-const getSpacingValue = (spacing, size) => {
-  switch (size) {
-    case "xl":
-      return spacing === "compact" ? 40 : 16;
-    case "lg":
-    case "md":
-      return spacing === "compact" ? 32 : 20;
-    case "xs":
-    case "sm":
-    default:
-      return spacing === "compact" ? 24 : 12;
-  }
-};
-const HvAvatarGroup = forwardRef(
-  function HvAvatarGroup2(props, ref) {
-    const {
-      className,
-      style,
-      classes: classesProp,
-      children,
-      size = "sm",
-      spacing = "loose",
-      direction = "row",
-      maxVisible = 3,
-      overflowComponent,
-      highlight = false,
-      toBack = false,
-      ...others
-    } = useDefaultProps("HvAvatarGroup", props);
-    const { classes, cx } = useClasses(classesProp);
-    const totalChildren = Children.count(children);
-    const willOverflow = totalChildren > maxVisible;
-    const overflowValue = totalChildren - maxVisible;
-    const childrenToShow = Children.toArray(children).slice(0, maxVisible);
-    if (toBack) childrenToShow.reverse();
-    const overflowElement = /* @__PURE__ */ jsx("div", { children: overflowComponent?.(overflowValue) || /* @__PURE__ */ jsx(
-      HvAvatar,
-      {
-        size,
-        avatarProps: { ["data-color"]: "neutral" },
-        backgroundColor: "border",
-        children: `+${overflowValue}`
-      }
-    ) });
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cx(
-          classes.root,
-          classes[direction],
-          {
-            [classes.highlight]: highlight,
-            [classes.toBack]: toBack
-          },
-          className
-        ),
-        style: mergeStyles(style, {
-          "--spacing": `-${getSpacingValue(spacing, size)}px`
-        }),
-        ref,
-        ...others,
-        children: /* @__PURE__ */ jsxs(HvAvatarGroupProvider, { size, children: [
-          toBack && willOverflow && overflowElement,
-          childrenToShow,
-          !toBack && willOverflow && overflowElement
-        ] })
-      }
-    );
-  }
-);
-export {
-  HvAvatarGroup,
-  staticClasses as avatarGroupClasses
+import { mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { Children, forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/AvatarGroup/AvatarGroup.tsx
+var getSpacingValue = (spacing, size) => {
+	switch (size) {
+		case "xl": return spacing === "compact" ? 40 : 16;
+		case "lg":
+		case "md": return spacing === "compact" ? 32 : 20;
+		default: return spacing === "compact" ? 24 : 12;
+	}
 };
+/**
+*The Avatar Group displays a collection of avatars, often used to represent groups or teams.
+*/
+var HvAvatarGroup = forwardRef(function HvAvatarGroup(props, ref) {
+	const { className, style, classes: classesProp, children, size = "sm", spacing = "loose", direction = "row", maxVisible = 3, overflowComponent, highlight = false, toBack = false, ...others } = useDefaultProps("HvAvatarGroup", props);
+	const { classes, cx } = useClasses(classesProp);
+	const totalChildren = Children.count(children);
+	const willOverflow = totalChildren > maxVisible;
+	const overflowValue = totalChildren - maxVisible;
+	const childrenToShow = Children.toArray(children).slice(0, maxVisible);
+	if (toBack) childrenToShow.reverse();
+	const overflowElement = /* @__PURE__ */ jsx("div", { children: overflowComponent?.(overflowValue) || /* @__PURE__ */ jsx(HvAvatar, {
+		size,
+		avatarProps: { ["data-color"]: "neutral" },
+		backgroundColor: "border",
+		children: `+${overflowValue}`
+	}) });
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(classes.root, classes[direction], {
+			[classes.highlight]: highlight,
+			[classes.toBack]: toBack
+		}, className),
+		style: mergeStyles(style, { "--spacing": `-${getSpacingValue(spacing, size)}px` }),
+		ref,
+		...others,
+		children: /* @__PURE__ */ jsxs(HvAvatarGroupProvider, {
+			size,
+			children: [
+				toBack && willOverflow && overflowElement,
+				childrenToShow,
+				!toBack && willOverflow && overflowElement
+			]
+		})
+	});
+});
+//#endregion
+export { HvAvatarGroup };

package/dist/AvatarGroup/AvatarGroup.styles.js

@@ -1,62 +1,42 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-import "../Avatar/Avatar.js";
 import { staticClasses as staticClasses$1 } from "../Avatar/Avatar.styles.js";
-const { staticClasses, useClasses } = createClasses("HvAvatarGroup", {
-  root: {
-    display: "flex",
-    [`& .${staticClasses$1.root}`]: {
-      border: `2px solid ${theme.colors.bgPage}`,
-      boxSizing: "content-box"
-    },
-    [`& .${staticClasses$1.container}`]: {
-      padding: 2
-    }
-  },
-  row: {
-    flexDirection: "row",
-    justifyContent: "flex-start",
-    "&>*:not(:first-of-type)": {
-      marginLeft: "var(--spacing)"
-    },
-    "&$toBack": {
-      flexDirection: "row-reverse",
-      justifyContent: "flex-end",
-      "&>*": {
-        "&:last-of-type": {
-          marginLeft: 0
-        },
-        "&:not(:last-of-type)": {
-          marginLeft: "var(--spacing)"
-        }
-      }
-    }
-  },
-  column: {
-    flexDirection: "column",
-    "&>*:not(:first-of-type)": {
-      marginTop: "var(--spacing)"
-    },
-    "&$toBack": {
-      flexDirection: "column-reverse",
-      "&>*": {
-        "&:last-of-type": {
-          marginTop: 0
-        },
-        "&:not(:last-of-type)": {
-          marginTop: "var(--spacing)"
-        }
-      }
-    }
-  },
-  highlight: {
-    "&>*:hover": {
-      zIndex: theme.zIndices.popover
-    }
-  },
-  toBack: {}
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/AvatarGroup/AvatarGroup.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvAvatarGroup", {
+	root: {
+		display: "flex",
+		[`& .${staticClasses$1.root}`]: {
+			border: `2px solid ${theme.colors.bgPage}`,
+			boxSizing: "content-box"
+		},
+		[`& .${staticClasses$1.container}`]: { padding: 2 }
+	},
+	row: {
+		flexDirection: "row",
+		justifyContent: "flex-start",
+		"&>*:not(:first-of-type)": { marginLeft: "var(--spacing)" },
+		"&$toBack": {
+			flexDirection: "row-reverse",
+			justifyContent: "flex-end",
+			"&>*": {
+				"&:last-of-type": { marginLeft: 0 },
+				"&:not(:last-of-type)": { marginLeft: "var(--spacing)" }
+			}
+		}
+	},
+	column: {
+		flexDirection: "column",
+		"&>*:not(:first-of-type)": { marginTop: "var(--spacing)" },
+		"&$toBack": {
+			flexDirection: "column-reverse",
+			"&>*": {
+				"&:last-of-type": { marginTop: 0 },
+				"&:not(:last-of-type)": { marginTop: "var(--spacing)" }
+			}
+		}
+	},
+	highlight: { "&>*:hover": { zIndex: theme.zIndices.popover } },
+	toBack: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/AvatarGroup/AvatarGroupContext.js

@@ -1,19 +1,16 @@
+import { createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext, useMemo, createContext } from "react";
-const HvAvatarGroupContext = createContext(null);
-const HvAvatarGroupProvider = ({
-  size,
-  children
-}) => {
-  const value = useMemo(() => ({ size }), [size]);
-  return /* @__PURE__ */ jsx(HvAvatarGroupContext.Provider, { value, children });
+//#region src/AvatarGroup/AvatarGroupContext.tsx
+var HvAvatarGroupContext = createContext(null);
+var HvAvatarGroupProvider = ({ size, children }) => {
+	const value = useMemo(() => ({ size }), [size]);
+	return /* @__PURE__ */ jsx(HvAvatarGroupContext.Provider, {
+		value,
+		children
+	});
 };
-const useAvatarGroupContext = () => {
-  const context = useContext(HvAvatarGroupContext);
-  return context;
-};
-export {
-  HvAvatarGroupContext,
-  HvAvatarGroupProvider,
-  useAvatarGroupContext
+var useAvatarGroupContext = () => {
+	return useContext(HvAvatarGroupContext);
 };
+//#endregion
+export { HvAvatarGroupProvider, useAvatarGroupContext };