@allxsmith/bestax-bulma 5.4.2 → 5.6.0

package/dist/index.esm.js

@@ -680,7 +680,13 @@ const Column = ({ className, textColor, color: _fieldColor, bgColor, size, sizeM
     return (jsx("div", { className: columnClasses, ...rest, children: children }));
 };
 
-const Columns = ({ className, textColor, color: _fieldColor, bgColor, isCentered, isGapless, isMultiline, isVCentered, isMobile, isDesktop, gapSize, gapSizeMobile, gapSizeTablet, gapSizeDesktop, gapSizeWidescreen, gapSizeFullhd, children, ...props }) => {
+const Columns = ({ className, textColor, color: _fieldColor, bgColor, isCentered, isGapless, isMultiline, isVCentered, isMobile, isDesktop, gap, gapMobile, gapTablet, gapDesktop, gapWidescreen, gapFullhd, gapSize, gapSizeMobile, gapSizeTablet, gapSizeDesktop, gapSizeWidescreen, gapSizeFullhd, children, ...props }) => {
+    const resolvedGap = gap ?? gapSize;
+    const resolvedGapMobile = gapMobile ?? gapSizeMobile;
+    const resolvedGapTablet = gapTablet ?? gapSizeTablet;
+    const resolvedGapDesktop = gapDesktop ?? gapSizeDesktop;
+    const resolvedGapWidescreen = gapWidescreen ?? gapSizeWidescreen;
+    const resolvedGapFullhd = gapFullhd ?? gapSizeFullhd;
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -688,12 +694,12 @@ const Columns = ({ className, textColor, color: _fieldColor, bgColor, isCentered
     });
     const mainClass = usePrefixedClassNames('columns');
     const gapClasses = usePrefixedClassNames('', {
-        [`is-${gapSize}`]: gapSize !== undefined && gapSize !== null,
-        [`is-${gapSizeMobile}-mobile`]: gapSizeMobile !== undefined && gapSizeMobile !== null,
-        [`is-${gapSizeTablet}-tablet`]: gapSizeTablet !== undefined && gapSizeTablet !== null,
-        [`is-${gapSizeDesktop}-desktop`]: gapSizeDesktop !== undefined && gapSizeDesktop !== null,
-        [`is-${gapSizeWidescreen}-widescreen`]: gapSizeWidescreen !== undefined && gapSizeWidescreen !== null,
-        [`is-${gapSizeFullhd}-fullhd`]: gapSizeFullhd !== undefined && gapSizeFullhd !== null,
+        [`is-${resolvedGap}`]: resolvedGap !== undefined && resolvedGap !== null,
+        [`is-${resolvedGapMobile}-mobile`]: resolvedGapMobile !== undefined && resolvedGapMobile !== null,
+        [`is-${resolvedGapTablet}-tablet`]: resolvedGapTablet !== undefined && resolvedGapTablet !== null,
+        [`is-${resolvedGapDesktop}-desktop`]: resolvedGapDesktop !== undefined && resolvedGapDesktop !== null,
+        [`is-${resolvedGapWidescreen}-widescreen`]: resolvedGapWidescreen !== undefined && resolvedGapWidescreen !== null,
+        [`is-${resolvedGapFullhd}-fullhd`]: resolvedGapFullhd !== undefined && resolvedGapFullhd !== null,
         'is-centered': !!isCentered,
         'is-gapless': !!isGapless,
         'is-multiline': !!isMultiline,
@@ -794,16 +800,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 +839,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 +862,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 +888,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 +911,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)