@dnb/eufemia/components/avatar/AvatarGroup.js

DNB Eufemia Design System UI Library

"use client";

import React from 'react';
import clsx from 'clsx';
import { applySpacing } from "../space/SpacingUtils.js";
import { validateDOMAttributes, extendPropsWithContext } from "../../shared/component-helper.js";
import Context from "../../shared/Context.js";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const defaultProps = {
  label: null,
  className: null,
  maxElements: 4,
  size: 'medium',
  children: null,
  variant: 'primary',
  skeleton: false
};
export const AvatarGroupContext = React.createContext(null);
export const AvatarGroupItemContext = React.createContext(null);
const AvatarGroup = localProps => {
  const context = React.useContext(Context);
  const {
    label,
    className,
    children: childrenProp,
    size,
    maxElements: maxElementsProp,
    variant,
    backgroundColor,
    color,
    ...props
  } = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.AvatarGroup, {
    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
  });
  const maxElements = maxElementsProp && maxElementsProp > 0 ? maxElementsProp : 4;
  let children = childrenProp;
  let numOfHiddenAvatars = 0;
  if (Array.isArray(childrenProp)) {
    const total = childrenProp.length;
    if (total > maxElements) {
      numOfHiddenAvatars = total - maxElements + 1;
    }
    children = childrenProp.slice(0, total - numOfHiddenAvatars).map((child, i) => _jsx(AvatarGroupItemContext, {
      value: {
        zIndex: total - i
      },
      children: child
    }, i));
  }
  const rootProps = applySpacing(props, {
    className: clsx('dnb-avatar__group', className)
  });
  const {
    skeleton,
    ...attributes
  } = validateDOMAttributes({}, props);
  return _jsx(AvatarGroupContext, {
    value: {
      ...props,
      variant,
      size,
      color,
      backgroundColor
    },
    children: _jsxs("span", {
      ...rootProps,
      ...attributes,
      children: [_jsx("span", {
        className: "dnb-sr-only",
        children: label
      }), children, numOfHiddenAvatars ? _jsxs(ElementsHidden, {
        size: size,
        children: ["+", numOfHiddenAvatars]
      }) : null]
    })
  });
};
function ElementsHidden(props) {
  const {
    size,
    children
  } = props;
  return _jsx("span", {
    className: `dnb-avatar__group--elements-left dnb-avatar__group--elements-left--size-${size || 'medium'}`,
    children: children
  });
}
withComponentMarkers(AvatarGroup, {
  _supportsSpacingProps: true
});
export default AvatarGroup;
//# sourceMappingURL=AvatarGroup.js.map