[Joy] Add AvatarGroup component

[siriwatknp]

🖥 Preview

• Demos
• Playground

---

Inspired by #31958 (comment).

Get rid of internal calculation about the number of extra to show which give developers full control of the extra number logic. This approach would reduce a lot of edge cases problem because we don't use React.cloneElement anymore, developers can wrap with whatever they want. Thanks to CSS variables, we don't introduce any class selector which makes customization so easy.

// Material
<AvatarGroup max={4}>
  {items.map(() => <Avatar />}
</AvatarGroup>

// Joy
<AvatarGroup>
  {items.slice(0, 5).map(() => <Avatar />}
  <Avatar>+4</Avatar>
</AvatarGroup>

Benefits

Joy solves these existing issues:

• [AvatarGroup] Add a prop for configuring the overlap #30789

  <AvatarGroup sx={{ flexDirection: 'row-reverse' }}>
    <Avatar>+3</Avatar>
    <Avatar src="/static/images/avatar/1.jpg" />
    <Avatar src="/static/images/avatar/2.jpg" />
    <Avatar src="/static/images/avatar/3.jpg" />
  </AvatarGroup>

• [AvatarGroup] Clickable "ellipsis" #27677

  <AvatarGroup>
    <Avatar src="/static/images/avatar/1.jpg" />
    <Avatar src="/static/images/avatar/2.jpg" />
    <Avatar src="/static/images/avatar/3.jpg" />
    <IconButton
      color="neutral"
      onClick={() => alert('clicked')}
      sx={{
        borderRadius: '50%',
        marginInlineStart: 'var(--Avatar-marginInlineStart)',
        boxShadow: 'var(--Avatar-ring)',
      }}
    >
      <MoreVert />
    </IconButton>
  </AvatarGroup>

• [AvatarGroup] Add the possibility to show a tooltip when using a group #31958

  <AvatarGroup variant="contained">
    <Avatar src="/static/images/avatar/1.jpg" />
    <Avatar src="/static/images/avatar/2.jpg" />
    <Avatar src="/static/images/avatar/3.jpg" />
    <Avatar
      onMouseEnter={(event) => setAnchorEl(event.currentTarget)}
      onMouseLeave={() => setAnchorEl(null)}
    >
      <Mouse />
      <PopperUnstyled
        open={Boolean(anchorEl)}
        anchorEl={anchorEl}
        disablePortal
        placement="right-start"
        style={{ zIndex: 1 }}
      >
        ...content
      </PopperUnstyled>
    </Avatar>
  </AvatarGroup>

Benchmark

	Material	Joy	% change
Avatar	254	279	+9.84
AvatarGroup	222	131	-40.99
total	476	410	-13.87

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Details of bundle changes

@mui/joy: parsed: +1.23% , gzip: +0.97%

Generated by 🚫 dangerJS against 6e8d3f6

[danilo-leal]

Looks amazing, excellent work!