@hitachivantara/uikit-react-core/dist/cjs/AvatarGroup/AvatarGroup.cjs

Core React components for the NEXT Design System.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const uikitStyles = require("@hitachivantara/uikit-styles");
const Avatar = require("../Avatar/Avatar.cjs");
const AvatarGroup_styles = require("./AvatarGroup.styles.cjs");
const AvatarGroupContext = require("./AvatarGroupContext.cjs");
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 } = uikitReactUtils.useCss();
  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
        Avatar.HvAvatar,
        {
          size,
          backgroundColor: uikitStyles.theme.colors.border,
          classes: {
            avatar: css({
              [`&.HvAvatar-${size}`]: {
                fontSize: getFontSize(size)
              }
            })
          },
          children: [
            "+",
            totalChildren - maxVisible
          ]
        }
      )
    }
  );
};
const HvAvatarGroup = React.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
    } = uikitReactUtils.useDefaultProps("HvAvatarGroup", props);
    const { classes, cx } = AvatarGroup_styles.useClasses(classesProp);
    const spacingValue = getSpacingValue(spacing, size);
    const totalChildren = React.Children.count(children);
    const willOverflow = totalChildren > maxVisible;
    const childrenToShow = React.Children.toArray(children).slice(0, maxVisible);
    if (toBack) childrenToShow.reverse();
    return /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        className: cx(
          classes.root,
          classes[direction],
          {
            [classes.highlight]: highlight,
            [classes.toBack]: toBack
          },
          className
        ),
        style: uikitReactUtils.mergeStyles(style, {
          "--spacing": `-${spacingValue}px`
        }),
        ref,
        ...others,
        children: /* @__PURE__ */ jsxRuntime.jsxs(AvatarGroupContext.HvAvatarGroupProvider, { size, children: [
          toBack && willOverflow && /* @__PURE__ */ jsxRuntime.jsx(
            Overflow,
            {
              childrenToShow,
              direction,
              maxVisible,
              overflowComponent,
              size,
              spacingValue,
              totalChildren
            }
          ),
          childrenToShow,
          !toBack && willOverflow && /* @__PURE__ */ jsxRuntime.jsx(
            Overflow,
            {
              childrenToShow,
              direction,
              maxVisible,
              overflowComponent,
              size,
              spacingValue,
              totalChildren
            }
          )
        ] })
      }
    );
  }
);
exports.avatarGroupClasses = AvatarGroup_styles.staticClasses;
exports.HvAvatarGroup = HvAvatarGroup;