@teamturing/react-kit 2.46.6 → 2.47.1

package/esm/core/Avatar/index.js

@@ -7,24 +7,27 @@ import Image from '../Image/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
 
-const Avatar = ({
-  src,
+const DEFAULT_AVATAR_URL = 'https://cdn.teamturing.com/cms/uploads/2024-02-21/1708481300_empty-profile.png';
+const Avatar = /*#__PURE__*/forwardRef(({
+  src = DEFAULT_AVATAR_URL,
   alt = '',
   size = 'm',
   sx,
   ...props
 }, ref) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseAvatar, {
   ref: ref,
+  role: 'presentation',
   src: src,
   alt: alt,
   sx: sx,
   size: size,
   ...props
-});
+}));
 const BaseAvatar = styled(Image)`
   border-radius: ${({
   theme
 }) => forcePixelValue(theme.radii.full)};
+  object-fit: cover;
 
   ${variant({
   prop: 'size',
@@ -66,6 +69,5 @@ const BaseAvatar = styled(Image)`
 
   ${sx}
 `;
-var index = /*#__PURE__*/forwardRef(Avatar);
 
-export { index as default };
+export { Avatar as default };

package/esm/core/AvatarGroup/AvatarGroupItem.js

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import Avatar from '../Avatar/index.js';
+import Tooltip from '../Tooltip/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const AvatarGroupItem = ({
+  onClick,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseAvatarGroupItem, {
+  onClick: onClick,
+  children: /*#__PURE__*/jsxRuntimeExports.jsx(Tooltip, {
+    text: props.alt,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(Avatar, {
+      ref: ref,
+      size: 's',
+      ...props
+    })
+  })
+});
+const BaseAvatarGroupItem = styled.li`
+  display: inline-flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+`;
+var AvatarGroupItem$1 = /*#__PURE__*/forwardRef(AvatarGroupItem);
+
+export { AvatarGroupItem$1 as default };

package/esm/core/AvatarGroup/index.js

@@ -0,0 +1,126 @@
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
+import React__default, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { sx } from '../../utils/styled-system/index.js';
+import Avatar from '../Avatar/index.js';
+import Overlay from '../Overlay/index.js';
+import OverlayPopper from '../OverlayPopper/index.js';
+import Space from '../Space/index.js';
+import Text from '../Text/index.js';
+import View from '../View/index.js';
+import UnstyledButton from '../_UnstyledButton.js';
+import AvatarGroupItem from './AvatarGroupItem.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const AvatarGroup = ({
+  children: propChildren,
+  maxItemCount = 5,
+  ...props
+}, ref) => {
+  const childrenArray = React__default.Children.toArray(propChildren);
+  const isOverflown = childrenArray.length > maxItemCount;
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(AvatarGroupWrapper, {
+    ref: ref,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(BaseAvatarGroup, {
+      ...props,
+      children: [...childrenArray.slice(0, maxItemCount)].reverse()
+    }), isOverflown ? /*#__PURE__*/jsxRuntimeExports.jsx(OverlayPopper, {
+      placement: 'bottom',
+      renderOverlay: overlayProps => /*#__PURE__*/jsxRuntimeExports.jsx(Overlay, {
+        size: 's',
+        maxHeight: 300,
+        sx: {
+          overflow: 'auto'
+        },
+        onClick: e => e.stopPropagation(),
+        ...overlayProps,
+        children: /*#__PURE__*/jsxRuntimeExports.jsx(Space, {
+          px: 1,
+          py: 2,
+          children: childrenArray.slice(maxItemCount).map(({
+            key,
+            props
+          }) => /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+            sx: {
+              p: 3,
+              display: 'flex',
+              alignItems: 'center',
+              columnGap: 2
+            },
+            children: [/*#__PURE__*/jsxRuntimeExports.jsx(Avatar, {
+              size: 'xs',
+              src: props.src,
+              alt: props.alt
+            }), /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+              typography: 'xs',
+              color: 'text/neutral',
+              children: props.alt
+            })]
+          }, key))
+        })
+      }),
+      children: popperProps => /*#__PURE__*/jsxRuntimeExports.jsxs(UnstyledButton, {
+        ...popperProps,
+        onClick: e => {
+          e.stopPropagation();
+          popperProps.onClick?.(e);
+        },
+        sx: {
+          'p': 0.5,
+          'fontSize': 'xxs',
+          'fontWeight': 'medium',
+          'color': 'text/neutral/subtle',
+          'borderRadius': 'xxs',
+          '&:hover': {
+            backgroundColor: 'bg/neutral/subtlest/hovered'
+          }
+        },
+        children: ["+", childrenArray.length - maxItemCount]
+      })
+    }) : null]
+  });
+};
+const AvatarGroupWrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[1])};
+`;
+const BaseAvatarGroup = styled.ol`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  display: inline-flex;
+  flex-direction: row-reverse;
+  align-items: center;
+
+  & > * {
+    position: relative;
+    background-color: ${({
+  theme
+}) => theme.colors['border/neutral/subtle']};
+    padding: ${({
+  theme
+}) => forcePixelValue(theme.space['0.25'])};
+    border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.full)};
+
+    margin-left: ${({
+  theme
+}) => forcePixelValue(theme.space[-1])};
+
+    &:last-child {
+      margin-left: 0;
+    }
+  }
+
+  ${sx}
+`;
+var index = Object.assign( /*#__PURE__*/forwardRef(AvatarGroup), {
+  Item: AvatarGroupItem
+});
+
+export { index as default };

package/esm/index.js

@@ -1,6 +1,7 @@
 export { default as UnstyledTable } from './core/_UnstyledTable/index.js';
 export { default as ActionList } from './core/ActionList/index.js';
 export { default as Avatar } from './core/Avatar/index.js';
+export { default as AvatarGroup } from './core/AvatarGroup/index.js';
 export { default as BadgeAttacher } from './core/BadgeAttacher/index.js';
 export { default as Breadcrumbs } from './core/Breadcrumbs/index.js';
 export { default as Button } from './core/Button/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.46.6",
+  "version": "2.47.1",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "64d56dcc9ac1e605b739c05032e36050108784c8"
+  "gitHead": "d4def05b872fd881706a5a6a1598cae05aadba49"
 }