@allxsmith/bestax-bulma 5.4.2 → 5.5.0

package/dist/index.esm.js

@@ -794,16 +794,26 @@ 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);
                 } }, src)), showInitials && (jsx("span", { className: initialsClass, children: resolvedInitials })), showIcon && icon, showDefaultIcon && jsx(DefaultAvatarIcon, {})] }));
@@ -823,7 +833,7 @@ function flattenChildren(children, keyPrefix = '') {
         ];
     });
 }
-const Avatars = ({ className, max, size, shape, spacing = 'md', spaced = false, style, children, ...props }) => {
+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', {
@@ -846,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;
@@ -872,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)
@@ -894,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)