@teamturing/react-kit 2.46.5 → 2.47.0

package/esm/core/Avatar/index.js

@@ -66,6 +66,6 @@ const BaseAvatar = styled(Image)`
 
   ${sx}
 `;
-var index = /*#__PURE__*/forwardRef(Avatar);
+var Avatar$1 = /*#__PURE__*/forwardRef(Avatar);
 
-export { index as default };
+export { Avatar$1 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,128 @@
+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 => {
+        return /*#__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/core/FormControl/FormControlTooltipIcon.js

@@ -14,6 +14,7 @@ const FormControlTooltipIcon = ({
 }) => /*#__PURE__*/jsxRuntimeExports.jsx(Tooltip, {
   text: text,
   direction: direction,
+  mouseOnly: false,
   children: /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
     icon: icon,
     size: size,

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.5",
+  "version": "2.47.0",
   "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": "fc093fecce517059d071cf41c0993cfafe8e2f90"
+  "gitHead": "e32009b5d122928a1b9dc24800de22aa3b39344c"
 }