@allxsmith/bestax-bulma 5.4.1 → 5.5.0

package/dist/index.esm.js

@@ -759,6 +759,11 @@ function DefaultAvatarIcon() {
 }
 const Avatar = ({ className, src, alt, name, initials, icon, size, shape = 'circle', color, as, href, target, rel, imageProps, style, ...props }) => {
     const [erroredSrc, setErroredSrc] = useState(undefined);
+    const [prevSrc, setPrevSrc] = useState(src);
+    if (src !== prevSrc) {
+        setPrevSrc(src);
+        setErroredSrc(undefined);
+    }
     const imgRef = useRef(null);
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const showImage = !!src && src !== erroredSrc;
@@ -789,23 +794,46 @@ const Avatar = ({ className, src, alt, name, initials, icon, size, shape = 'circ
     const combinedClasses = classNames(avatarClasses, bulmaHelperClasses, className);
     const initialsClass = usePrefixedClassNames('avatar-initials');
     const Tag = as ?? (href ? 'a' : 'figure');
-    const isInteractive = Tag === 'a' || Tag === 'button';
+    const isInteractive = Tag === 'a' ||
+        Tag === 'button' ||
+        (typeof Tag !== 'string' && href != null);
     const isLinkLike = Tag === 'a' || typeof Tag !== 'string';
     const linkProps = isLinkLike ? { href, target, rel } : {};
+    const accessibleName = alt ?? name;
+    const isDecorative = alt === '' && !isInteractive;
     const a11yProps = showImage
-        ? {}
-        : {
-            ...(isInteractive ? {} : { role: 'img' }),
-            'aria-label': alt || name || 'Avatar',
-        };
-    return (jsxs(Tag, { className: combinedClasses, style: { ...sizeStyle, ...style }, ...linkProps, ...a11yProps, ...rest, children: [showImage && (jsx("img", { ...imageProps, ref: imgRef, src: src, alt: alt || name || '', onError: e => {
+        ? isInteractive && !accessibleName
+            ?
+                { 'aria-label': name || 'Avatar' }
+            : {}
+        : isDecorative
+            ? { 'aria-hidden': true }
+            : {
+                ...(isInteractive ? {} : { role: 'img' }),
+                'aria-label': accessibleName || name || 'Avatar',
+            };
+    const buttonTypeProps = Tag === 'button' ? { type: 'button' } : {};
+    return (jsxs(Tag, { className: combinedClasses, style: { ...sizeStyle, ...style }, ...buttonTypeProps, ...linkProps, ...a11yProps, ...rest, children: [showImage && (jsx("img", { ...imageProps, ref: imgRef, src: src, alt: accessibleName ?? '', onError: e => {
                     imageProps?.onError?.(e);
                     setErroredSrc(src);
-                } })), showInitials && (jsx("span", { className: initialsClass, children: resolvedInitials })), showIcon && icon, showDefaultIcon && jsx(DefaultAvatarIcon, {})] }));
+                } }, src)), showInitials && (jsx("span", { className: initialsClass, children: resolvedInitials })), showIcon && icon, showDefaultIcon && jsx(DefaultAvatarIcon, {})] }));
 };
 Avatar.displayName = 'Avatar';
 
-const Avatars = ({ className, max, size, shape, spacing = 'md', spaced = false, style, children, ...props }) => {
+function flattenChildren(children, keyPrefix = '') {
+    return React.Children.toArray(children).flatMap(child => {
+        if (!React.isValidElement(child))
+            return [];
+        if (child.type === React.Fragment) {
+            return flattenChildren(child.props.children, keyPrefix + child.key);
+        }
+        const el = child;
+        return [
+            keyPrefix ? React.cloneElement(el, { key: keyPrefix + el.key }) : el,
+        ];
+    });
+}
+const Avatars = ({ className, max, size, shape, spacing = 'md', spaced = false, surplusLabel, style, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const isPresetSpacing = typeof spacing === 'string';
     const avatarsClasses = usePrefixedClassNames('avatars', {
@@ -817,7 +845,7 @@ const Avatars = ({ className, max, size, shape, spacing = 'md', spaced = false,
         : undefined;
     const surplusClass = usePrefixedClassNames('is-surplus');
     const combinedClasses = classNames(avatarsClasses, bulmaHelperClasses, className);
-    const childArray = React.Children.toArray(children).filter(React.isValidElement);
+    const childArray = flattenChildren(children);
     const maxCount = typeof max === 'number' && Number.isInteger(max) && max >= 0
         ? max
         : undefined;
@@ -828,7 +856,7 @@ const Avatars = ({ className, max, size, shape, spacing = 'md', spaced = false,
     return (jsxs("div", { className: combinedClasses, style: { ...spacingStyle, ...style }, ...rest, children: [visibleChildren.map(child => React.cloneElement(child, {
                 ...(size !== undefined ? { size } : {}),
                 ...(shape !== undefined ? { shape } : {}),
-            })), overflowCount > 0 && (jsx(Avatar, { initials: `+${overflowCount}`, alt: `${overflowCount} more`, size: size, shape: shape, className: surplusClass }))] }));
+            })), overflowCount > 0 && (jsx(Avatar, { initials: `+${overflowCount}`, alt: surplusLabel?.(overflowCount) || `${overflowCount} more`, size: size, shape: shape, className: surplusClass }))] }));
 };
 Avatars.displayName = 'Avatars';
 Avatars.Avatar = Avatar;
@@ -854,7 +882,8 @@ const Badge = ({ className, badgeClassName, content, max = 99, dot = false, show
         content !== true &&
         content !== '' &&
         (!isZero || showZero);
-    const shouldRender = dot || hasContent || invisible;
+    const zeroPlaceholder = isZero && !showZero && !dot && !invisible;
+    const shouldRender = dot || hasContent || invisible || zeroPlaceholder;
     const sanitizedMax = Number.isInteger(max) && max >= 0 ? max : 99;
     const displayValue = useMemo(() => {
         if (dot || !hasContent)
@@ -876,6 +905,7 @@ const Badge = ({ className, badgeClassName, content, max = 99, dot = false, show
         'is-dot': dot,
         'is-pulse': pulse,
         'is-invisible': invisible,
+        'is-zero': zeroPlaceholder,
     });
     const pillClass = hasChildren
         ? classNames(badgeClasses, badgeClassName)