@allxsmith/bestax-bulma 5.16.8 → 5.16.10

package/dist/index.cjs

@@ -1281,6 +1281,22 @@ const avatarSizes = [
     '96x96',
     '128x128',
 ];
+/**
+ * The roles a caller can use to say "this avatar is not a control", and so claim
+ * the non-interactive treatment for a custom `as` target we would otherwise have
+ * to guess about.
+ *
+ * Read by VALUE, not by presence. Any role at all used to count, which let
+ * `role="button"` — a claim of the opposite — route a real control into the
+ * decorative branch and come out `aria-hidden` and nameless. `img` is what the
+ * fallback itself applies; `presentation` and `none` are the standard ways to say
+ * an element carries no semantics, which is what pairs with `alt=""`.
+ */
+const NON_INTERACTIVE_ROLES = [
+    'img',
+    'presentation',
+    'none',
+];
 /**
  * Derives a small set of initials from a name (e.g. "Ada Lovelace" -> "AL").
  */
@@ -1375,13 +1391,44 @@ const Avatar = React.forwardRef(function Avatar(avatarProps, ref) {
     const combinedClasses = classNames(avatarClasses, bulmaHelperClasses, className);
     const initialsClass = usePrefixedClassNames('avatar-initials');
     const Tag = as ?? (href ? 'a' : 'figure');
-    // A custom `as` component given an href is being used as a link — the same
-    // condition under which isLinkLike forwards href/target/rel below — so it
-    // counts as interactive too. Otherwise alt="" would mark a real link
-    // decorative (aria-hidden) and it could render nameless.
+    // A custom component counts as interactive whether or not it was given OUR
+    // href: a router link takes `to`, creates the anchor itself, and cannot be
+    // classified from the props it arrives with (#668). Marking a real link as a
+    // picture is the worse failure — and `alt=""` would go further and mark it
+    // decorative (aria-hidden), leaving it nameless.
+    //
+    // A custom ELEMENT still needs the href. A hyphenated tag renders a real DOM
+    // element of that name, so nothing is hidden from us: without a link to follow
+    // it is still a picture. `Navbar.Link` draws the same line for `role="button"`.
+    //
+    // Where we are guessing, the caller settles it: an explicit `role` or
+    // `aria-hidden` states the semantics, so a custom component that really is a
+    // wrapper gets `role="img"` and its `alt=""` opt-out back. `role` alone would
+    // be a half-override — interactivity also drives the decorative opt-out and the
+    // name fallback, and overriding one of the three is worse than overriding none.
+    //
+    // An `href` ENDS the guess, so it outranks the signal. `as="a"`, `as="button"`
+    // and a target we were handed an href for are known to be interactive, and there
+    // the rule that an interactive element always carries an accessible name is not
+    // the caller's to waive: without this, `as={RouterLink} href="/x" role="img"`
+    // with `alt=""` rendered a real anchor as `aria-hidden` and nameless — the very
+    // failure #668 is about. `Navbar.Link` orders the same two the same way.
+    //
+    // The signal has to MEAN what it is used for, so both halves read a value rather
+    // than a presence — the way `Navbar.Link` reads `role === 'button'`. A role only
+    // claims to be a picture if it says so: `role="button"` or `role="link"` is the
+    // opposite claim, and taking any role as the signal handed an interactive-role
+    // element `aria-hidden` and no name. Likewise `aria-hidden={false}` denies
+    // hiding, so only a truthy one counts.
+    const ariaHidden = rest['aria-hidden'];
+    const statesItIsNotAControl = (rest.role !== undefined && NON_INTERACTIVE_ROLES.includes(rest.role)) ||
+        ariaHidden === true ||
+        ariaHidden === 'true';
+    const customTargetStatesSemantics = typeof Tag !== 'string' && href == null && statesItIsNotAControl;
     const isInteractive = Tag === 'a' ||
         Tag === 'button' ||
-        ((typeof Tag !== 'string' || isCustomElement(Tag)) && href != null);
+        (typeof Tag !== 'string' && !customTargetStatesSemantics) ||
+        (isCustomElement(Tag) && href != null);
     // Only forward link attributes when rendering an anchor or a custom (non-DOM)
     // component; a plain `as="div"` must not receive a stray `href`/`target`/`rel`.
     const isLinkLike = Tag === 'a' || typeof Tag !== 'string' || isCustomElement(Tag);
@@ -1643,18 +1690,6 @@ const Breadcrumb = ({ className, alignment, separator, size, children, ...props
  */
 const mergeBulmaStyles = (helperStyles, style) => helperStyles || style ? { ...helperStyles, ...style } : undefined;
 
-/**
- * Wrap each footer item in a `.card-footer-item` span.
- * @param {CardProps['footer']} footer - Footer content (single node or array).
- * @param {string | undefined} classPrefix - Bulma class prefix.
- * @returns {React.ReactNode[] | null} Wrapped footer items, or null if no footer.
- */
-const renderFooter = (footer, classPrefix) => {
-    if (!footer)
-        return null;
-    const items = Array.isArray(footer) ? footer : [footer];
-    return items.map((item, idx) => (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'card-footer-item'), children: item }, idx)));
-};
 /**
  * Check if children contain any Card compound sub-components.
  * @param {React.ReactNode} children - The children to inspect.
@@ -1702,6 +1737,9 @@ const CardComponent = ({ className, children, textColor, color, bgColor, hasShad
                         'is-centered': headerCentered,
                     }), children: header })), headerIcon] }));
     };
+    // Any falsy footer (including `0`) and an empty array render no footer bar,
+    // rather than a stray `0` or an empty `.card-footer`.
+    const hasFooter = Array.isArray(footer) ? footer.length > 0 : Boolean(footer);
     return (jsxRuntime.jsxs("div", { className: cardClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: [renderHeader(header, headerIcon, headerCentered, classPrefix), image && (jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'card-image'), children: typeof image === 'string' ? (jsxRuntime.jsx("figure", { className: prefixedClassNames(classPrefix, 'image'), children: jsxRuntime.jsx("img", { src: image, alt: imageAlt ?? 'Card image' }) })) : (image) })), typeof children !== 'undefined' &&
                 children !== null &&
                 children !== '' &&
@@ -1709,9 +1747,7 @@ const CardComponent = ({ className, children, textColor, color, bgColor, hasShad
                 children !== null &&
                 children !== '' &&
                 hasCompoundComponents(children) &&
-                children, footer && (jsxRuntime.jsx("footer", { className: prefixedClassNames(classPrefix, 'card-footer'), children: Array.isArray(footer)
-                    ? footer.map((item, idx) => (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'card-footer-item'), children: item }, idx)))
-                    : footer && (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'card-footer-item'), children: footer })) }))] }));
+                children, hasFooter && (jsxRuntime.jsx("footer", { className: prefixedClassNames(classPrefix, 'card-footer'), children: Array.isArray(footer) ? (footer.map((item, idx) => (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'card-footer-item'), children: item }, idx)))) : (jsxRuntime.jsx("span", { className: prefixedClassNames(classPrefix, 'card-footer-item'), children: footer })) }))] }));
 };
 /**
  * Card header compound component. Wraps children in a `.card-header` element.
@@ -1841,8 +1877,6 @@ const Card = withSubComponents(CardComponent, {
     Footer: CardFooter,
     FooterItem: CardFooterItem,
 }, 'Card');
-/** Internal test-only exports. Not part of the public API. */
-const __test_exports__ = { renderFooter };
 
 /**
  * The runtime mirror of `AnchorOnlyAttributes`, keyed so the two cannot drift.
@@ -1915,6 +1949,9 @@ function omitAttrs(props, strip) {
 
 /**
  * Checks if code is running in a browser environment.
+ * @deprecated Dropdown's internal SSR guard, exported by accident; it will
+ * be removed in the next major. Check `typeof window !== 'undefined' &&
+ * typeof document !== 'undefined'` instead.
  * @param win - Window object.
  * @param doc - Document object.
  * @returns {boolean} True if in browser, false otherwise.
@@ -2017,7 +2054,10 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
         /* istanbul ignore next: dropdownRef.current is never null once mounted */
         if (!dropdownRef.current)
             return [];
-        return Array.from(dropdownRef.current.querySelectorAll('[role="menuitem"]')).filter(el => !el.hasAttribute('disabled') &&
+        return Array.from(
+        // Every menu-item role, so an item a caller gives `menuitemcheckbox`
+        // or `menuitemradio` (a filter or sort menu) stays reachable.
+        dropdownRef.current.querySelectorAll('[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]')).filter(el => !el.hasAttribute('disabled') &&
             el.getAttribute('aria-disabled') !== 'true');
     };
     // Focus the pending menu item once the menu becomes visible; the item is
@@ -2185,7 +2225,11 @@ const DropdownItem = ((itemProps) => {
     const forwarded = Component === 'a' ? rest : omitAttrs(rest, STRIP_FROM_NON_ANCHOR$1);
     return (jsxRuntime.jsx(Component, { className: classNames(usePrefixedClassNames('dropdown-item', {
             'is-active': active,
-        }), bulmaHelperClasses, className), tabIndex: 0, role: "menuitem", "data-testid": "dropdown-item", ...forwarded, ...(Component === 'button'
+        }), bulmaHelperClasses, className), tabIndex: 0, "data-testid": "dropdown-item", ...forwarded, 
+        // After `forwarded` for the same reason as `type` below: a spread
+        // carrying `role: undefined` would otherwise erase the default, and an
+        // item with no role drops out of the menu and its arrow-key order.
+        role: forwarded.role ?? 'menuitem', ...(Component === 'button'
             ? {
                 type: forwarded.type ?? 'button',
             }
@@ -2840,7 +2884,7 @@ const NavbarBurger = React.forwardRef(function NavbarBurger({ className, active,
     });
     return (jsxRuntime.jsxs("button", { ref: ref, type: "button", className: classNames(usePrefixedClassNames('navbar-burger', {
             'is-active': active,
-        }), bulmaHelperClasses, className), "aria-label": props['aria-label'] || 'menu', "aria-expanded": props['aria-expanded'] ?? !!active, ...rest, children: [jsxRuntime.jsx("span", { "aria-hidden": "true" }), jsxRuntime.jsx("span", { "aria-hidden": "true" }), jsxRuntime.jsx("span", { "aria-hidden": "true" }), children] }));
+        }), bulmaHelperClasses, className), "aria-label": props['aria-label'] || 'menu', "aria-expanded": props['aria-expanded'] ?? !!active, ...rest, children: [jsxRuntime.jsx("span", { "aria-hidden": "true" }), jsxRuntime.jsx("span", { "aria-hidden": "true" }), jsxRuntime.jsx("span", { "aria-hidden": "true" }), jsxRuntime.jsx("span", { "aria-hidden": "true" }), children] }));
 });
 NavbarBurger.displayName = 'NavbarBurger';
 /**
@@ -2901,7 +2945,27 @@ const NavbarLink = React.forwardRef(function NavbarLink(linkProps, ref) {
     });
     const dropdownContext = React.useContext(NavbarDropdownContext);
     const hasHref = rest.href !== undefined;
-    const isNativeInteractive = Component === 'button' || hasHref;
+    // What a custom component renders cannot be read off its input props, and the
+    // prop that ends in an anchor belongs to the router, not to us — `to`, `state`,
+    // `params` and a dozen further spellings all get there. Sniffing for more names
+    // trades one wrong guess for another, so a non-string `as` counts as
+    // interactive: announcing a real anchor as a button, and layering a synthetic
+    // click over its navigation, is the worse of the two failures (#668).
+    //
+    // A custom ELEMENT stays out of it. A hyphenated tag is a real DOM element and
+    // none of those is natively interactive, so `<x-trigger>` keeps the fallback
+    // exactly like `as="span"` — the same line `Avatar` draws for `role="img"`.
+    //
+    // Where we are guessing, the caller settles it: a custom target that declares
+    // `role="button"` is saying it is a button and not a link, so it takes the
+    // whole fallback — including the click, which is the half it could not supply
+    // itself. `Avatar` gives the same escape hatch to the same guess. An `href`
+    // still wins: a target with somewhere to navigate is a link whatever role it
+    // claims.
+    const customTargetIsButton = typeof Component !== 'string' && rest.role === 'button';
+    const isNativeInteractive = Component === 'button' ||
+        (typeof Component !== 'string' && !customTargetIsButton) ||
+        hasHref;
     // Guarded like Button's disabled blocker: these run on whatever `as` renders,
     // and a custom target's callback need not take a DOM event. One declaring
     // `onKeyDown: (k: {key: string}) => void` reaches `e.preventDefault()` and
@@ -6102,6 +6166,7 @@ const notification = {
 const NotificationItem = ({ instance, onClose }) => {
     const { message, color, isLight, duration = 3000, hasDelete = true, indefinite = false, pauseOnHover = true, } = instance.options;
     const [isPaused, setIsPaused] = React.useState(false);
+    const urgent = color === 'danger' || color === 'warning';
     const handleClose = React.useCallback(() => {
         onClose(instance.id);
     }, [onClose, instance.id]);
@@ -6120,11 +6185,13 @@ const NotificationItem = ({ instance, onClose }) => {
         if (pauseOnHover)
             setIsPaused(false);
     }, [pauseOnHover]);
-    return (jsxRuntime.jsx(Notification, { color: color, isLight: isLight, hasDelete: hasDelete, onDelete: handleClose, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { pointerEvents: 'auto' }, children: message }));
+    return (jsxRuntime.jsx(Notification, { color: color, isLight: isLight, hasDelete: hasDelete, onDelete: handleClose, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { pointerEvents: 'auto' }, children: urgent ? (jsxRuntime.jsx("span", { role: "alert", "aria-live": "assertive", children: message })) : (jsxRuntime.jsx("span", { role: "status", "aria-live": "polite", children: message })) }));
 };
 /**
  * Container component for rendering programmatic notifications.
- * Place once at your app root to enable the notification API.
+ * Place once at your app root to enable the notification API. Mount it
+ * before calling `notification`: a notification shown while no container is
+ * mounted doesn't appear when one mounts, only alongside the next call.
  *
  * @function
  * @param {{ position?: NotificationPosition }} props - Container props.
@@ -13427,7 +13494,6 @@ exports.ToastContainer = ToastContainer;
 exports.Tooltip = Tooltip;
 exports.Tr = Tr;
 exports.UnorderedList = UnorderedList;
-exports.__test_exports__ = __test_exports__;
 exports.checkboxColors = checkboxColors;
 exports.checkboxSizes = checkboxSizes;
 exports.classNames = classNames;