@hitachivantara/uikit-react-core/dist/esm/AvatarGroup/AvatarGroup.js

Core React components for the NEXT Design System.

import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef, Children } from "react";
import { useDefaultProps, mergeStyles, useCss } from "@hitachivantara/uikit-react-utils";
import { theme } from "@hitachivantara/uikit-styles";
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 "xs":
      return spacing === "compact" ? 24 : 16;
    case "sm":
      return spacing === "compact" ? 30 : 18;
    case "md":
      return spacing === "compact" ? 36 : 20;
    case "lg":
      return spacing === "compact" ? 44 : 24;
    case "xl":
      return spacing === "compact" ? 72 : 34;
    default:
      return spacing === "compact" ? 30 : 18;
  }
};
const getFontSize = (size) => {
  switch (size) {
    case "xs":
      return "1em";
    case "sm":
      return "1.25em";
    case "md":
      return "1.5em";
    case "lg":
      return "1.75em";
    case "xl":
      return "3em";
    default:
      return "1em";
  }
};
const Overflow = ({
  direction,
  childrenToShow,
  spacingValue,
  overflowComponent,
  totalChildren,
  maxVisible,
  size
}) => {
  const { css } = useCss();
  return /* @__PURE__ */ jsx(
    "div",
    {
      style: {
        marginLeft: direction === "row" && childrenToShow.length > 0 ? -spacingValue : 0,
        marginTop: direction === "column" && childrenToShow.length > 0 ? -spacingValue : 0,
        zIndex: 0
      },
      children: overflowComponent ? overflowComponent(totalChildren - maxVisible) : /* @__PURE__ */ jsxs(
        HvAvatar,
        {
          size,
          backgroundColor: theme.colors.border,
          classes: {
            avatar: css({
              [`&.HvAvatar-${size}`]: {
                fontSize: getFontSize(size)
              }
            })
          },
          children: [
            "+",
            totalChildren - maxVisible
          ]
        }
      )
    }
  );
};
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 spacingValue = getSpacingValue(spacing, size);
    const totalChildren = Children.count(children);
    const willOverflow = totalChildren > maxVisible;
    const childrenToShow = Children.toArray(children).slice(0, maxVisible);
    if (toBack) childrenToShow.reverse();
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: cx(
          classes.root,
          classes[direction],
          {
            [classes.highlight]: highlight,
            [classes.toBack]: toBack
          },
          className
        ),
        style: mergeStyles(style, {
          "--spacing": `-${spacingValue}px`
        }),
        ref,
        ...others,
        children: /* @__PURE__ */ jsxs(HvAvatarGroupProvider, { size, children: [
          toBack && willOverflow && /* @__PURE__ */ jsx(
            Overflow,
            {
              childrenToShow,
              direction,
              maxVisible,
              overflowComponent,
              size,
              spacingValue,
              totalChildren
            }
          ),
          childrenToShow,
          !toBack && willOverflow && /* @__PURE__ */ jsx(
            Overflow,
            {
              childrenToShow,
              direction,
              maxVisible,
              overflowComponent,
              size,
              spacingValue,
              totalChildren
            }
          )
        ] })
      }
    );
  }
);
export {
  HvAvatarGroup,
  staticClasses as avatarGroupClasses
};