@lobehub/ui 2.8.2 → 2.8.4

package/es/GroupAvatar/GroupAvatar.js

@@ -1,7 +1,7 @@
 'use client';
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["className", "style", "avatars", "size", "cornerShape", "avatarShape"];
+var _excluded = ["className", "style", "avatars", "size", "grid", "cornerShape", "avatarShape"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -23,6 +23,8 @@ var GroupAvatar = /*#__PURE__*/memo(function (_ref) {
     avatars = _ref$avatars === void 0 ? [] : _ref$avatars,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 32 : _ref$size,
+    _ref$grid = _ref.grid,
+    grid = _ref$grid === void 0 ? 2 : _ref$grid,
     _ref$cornerShape = _ref.cornerShape,
     cornerShape = _ref$cornerShape === void 0 ? 'squircle' : _ref$cornerShape,
     _ref$avatarShape = _ref.avatarShape,
@@ -32,21 +34,29 @@ var GroupAvatar = /*#__PURE__*/memo(function (_ref) {
     cx = _useStyles.cx,
     styles = _useStyles.styles;
   var calcSize = useMemo(function () {
+    var length = avatars.length;
+    var isAutoGrid = grid === 'auto';
+    var gridSize = isAutoGrid ? length > 4 ? 3 : 2 : grid;
     var isCircle = cornerShape === 'circle';
-    var avatarSize = Math.floor(size / 2 * (isCircle ? 0.65 : 0.75));
-    var gapSize = Math.floor((size - avatarSize * 2) / (isCircle ? 6 : 4));
+    var avatarSize = Math.floor(size / gridSize * (isCircle ? 0.65 : 0.75));
+    var gapSize = Math.floor((size - avatarSize * gridSize) / (isCircle ? 6 : 4));
     return {
       avatarSize: avatarSize,
       gapSize: gapSize,
-      gridWidth: avatarSize * 2 + gapSize,
+      gridSize: gridSize,
+      gridWidth: avatarSize * gridSize + gapSize,
       maxItemWidth: avatarSize - 1
     };
-  }, [size, cornerShape]);
+  }, [avatars, grid, size, cornerShape]);
+  var calcAvatars = useMemo(function () {
+    return avatars === null || avatars === void 0 ? void 0 : avatars.slice(0, calcSize.gridSize * calcSize.gridSize);
+  }, [avatars, calcSize.gridSize]);
   var variants = useMemo(function () {
     return cva(styles.root, {
       defaultVariants: {
         cornerShape: 'squircle'
       },
+      /* eslint-disable sort-keys-fix/sort-keys-fix */
       variants: {
         cornerShape: {
           circle: styles.circle,
@@ -72,17 +82,15 @@ var GroupAvatar = /*#__PURE__*/memo(function (_ref) {
   }, rest), {}, {
     children: /*#__PURE__*/_jsx(Grid, {
       gap: calcSize.gapSize,
-      maxItemWidth: calcSize.maxItemWidth,
-      rows: 2,
+      maxItemWidth: 0,
+      rows: calcSize.gridSize,
       width: calcSize.gridWidth,
-      children: avatars === null || avatars === void 0 ? void 0 : avatars.slice(0, 4).map(function (item, index) {
-        if (typeof item === 'string') {
-          return /*#__PURE__*/_jsx(Avatar, {
-            avatar: item,
-            shape: avatarShape,
-            size: calcSize.avatarSize
-          }, index);
-        }
+      children: calcAvatars.map(function (item, index) {
+        if (typeof item === 'string') return /*#__PURE__*/_jsx(Avatar, {
+          avatar: item,
+          shape: avatarShape,
+          size: calcSize.avatarSize
+        }, index);
         return /*#__PURE__*/_jsx(Avatar, _objectSpread(_objectSpread({}, item), {}, {
           shape: avatarShape,
           size: calcSize.avatarSize

package/es/GroupAvatar/style.js

@@ -6,7 +6,7 @@ export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   var baseRoot = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n    flex: none;\n\n    /* Fallback for browsers without mask support */\n    border-radius: 15%;\n\n    /* Apply smooth corners mask with fallback */\n    @supports (mask-image: url('data:image/svg+xml;base64,')) {\n      border-radius: 0;\n    }\n  "])));
   var createCornerVariant = function createCornerVariant(cornerType) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    /* WebKit prefix for better browser support */\n    mask-image: url('", "');\n\n    mask-image: url('", "');\n    mask-position: center;\n    mask-position: center;\n    mask-repeat: no-repeat;\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n    mask-size: 100% 100%;\n  "])), SMOOTH_CORNER_MASKS[cornerType], SMOOTH_CORNER_MASKS[cornerType]);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    mask-image: url('", "');\n    mask-position: center;\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n  "])), SMOOTH_CORNER_MASKS[cornerType]);
   };
   return {
     circle: createCornerVariant('circle'),

package/es/GroupAvatar/type.d.ts

@@ -7,6 +7,7 @@ export interface GroupAvatarProps extends Omit<BlockProps, 'width' | 'height' |
     avatarShape?: AvatarProps['shape'];
     avatars?: AvatarItem[];
     cornerShape?: keyof typeof SMOOTH_CORNER_MASKS;
+    grid?: 2 | 3 | 'auto';
     ref?: Ref<HTMLDivElement>;
     size?: number;
 }

package/es/ScrollShadow/ScrollShadow.js

@@ -1,7 +1,7 @@
 'use client';
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["className", "children", "orientation", "hideScrollBar", "size", "offset", "visibility", "isEnabled", "onVisibilityChange", "style"];
+var _excluded = ["className", "children", "orientation", "hideScrollBar", "size", "offset", "visibility", "isEnabled", "onVisibilityChange", "style", "ref"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -12,6 +12,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { cva } from 'class-variance-authority';
 import { memo, useMemo, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import { mergeRefs } from 'react-merge-refs';
 import { useStyles } from "./style";
 import { useScrollOverflow } from "./useScrollOverflow";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -32,6 +33,7 @@ var ScrollShadow = /*#__PURE__*/memo(function (_ref) {
     isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
     onVisibilityChange = _ref.onVisibilityChange,
     style = _ref.style,
+    ref = _ref.ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(size),
     cx = _useStyles.cx,
@@ -143,7 +145,7 @@ var ScrollShadow = /*#__PURE__*/memo(function (_ref) {
       orientation: orientation,
       scrollPosition: scrollPosition
     }), className),
-    ref: domRef,
+    ref: mergeRefs([domRef, ref]),
     style: style
   }, dataAttributes), rest), {}, {
     children: children

package/es/ScrollShadow/type.d.ts

@@ -1,3 +1,4 @@
+import type { Ref } from 'react';
 import type { FlexboxProps } from 'react-layout-kit';
 export interface ScrollShadowProps extends FlexboxProps {
     hideScrollBar?: boolean;
@@ -10,6 +11,7 @@ export interface ScrollShadowProps extends FlexboxProps {
         top?: boolean;
     }) => void;
     orientation?: 'vertical' | 'horizontal';
+    ref?: Ref<HTMLDivElement>;
     size?: number;
     visibility?: 'auto' | 'always' | 'never';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",