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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.AvatarGroupItemContext = exports.AvatarGroupContext = void 0;
var _react = _interopRequireDefault(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _SpacingUtils = require("../space/SpacingUtils.js");
var _componentHelper = require("../../shared/component-helper.js");
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const defaultProps = {
  label: null,
  className: null,
  maxElements: 4,
  size: 'medium',
  children: null,
  variant: 'primary',
  skeleton: false
};
const AvatarGroupContext = exports.AvatarGroupContext = _react.default.createContext(null);
const AvatarGroupItemContext = exports.AvatarGroupItemContext = _react.default.createContext(null);
const AvatarGroup = localProps => {
  const context = _react.default.useContext(_Context.default);
  const {
    label,
    className,
    children: childrenProp,
    size,
    maxElements: maxElementsProp,
    variant,
    backgroundColor,
    color,
    ...props
  } = (0, _componentHelper.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) => (0, _jsxRuntime.jsx)(AvatarGroupItemContext, {
      value: {
        zIndex: total - i
      },
      children: child
    }, i));
  }
  const rootProps = (0, _SpacingUtils.applySpacing)(props, {
    className: (0, _clsx.default)('dnb-avatar__group', className)
  });
  const {
    skeleton,
    ...attributes
  } = (0, _componentHelper.validateDOMAttributes)({}, props);
  return (0, _jsxRuntime.jsx)(AvatarGroupContext, {
    value: {
      ...props,
      variant,
      size,
      color,
      backgroundColor
    },
    children: (0, _jsxRuntime.jsxs)("span", {
      ...rootProps,
      ...attributes,
      children: [(0, _jsxRuntime.jsx)("span", {
        className: "dnb-sr-only",
        children: label
      }), children, numOfHiddenAvatars ? (0, _jsxRuntime.jsxs)(ElementsHidden, {
        size: size,
        children: ["+", numOfHiddenAvatars]
      }) : null]
    })
  });
};
function ElementsHidden(props) {
  const {
    size,
    children
  } = props;
  return (0, _jsxRuntime.jsx)("span", {
    className: `dnb-avatar__group--elements-left dnb-avatar__group--elements-left--size-${size || 'medium'}`,
    children: children
  });
}
(0, _withComponentMarkers.default)(AvatarGroup, {
  _supportsSpacingProps: true
});
var _default = exports.default = AvatarGroup;
//# sourceMappingURL=AvatarGroup.js.map