@allxsmith/bestax-bulma 5.16.9 → 5.16.11

package/dist/index.cjs

@@ -1690,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.
@@ -1749,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 !== '' &&
@@ -1756,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.
@@ -1888,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.
@@ -1962,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.
@@ -2064,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
@@ -2232,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',
             }
@@ -2292,7 +2289,7 @@ const MenuList = ({ className, children, ...props }) => {
         [usePrefixedClassNames('menu-list')]: level === 0,
     });
     // Increment level for nested MenuLists
-    return (jsxRuntime.jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsxRuntime.jsx("ul", { className: ulClass, ...rest, children: children }) }));
+    return (jsxRuntime.jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsxRuntime.jsx("ul", { className: ulClass || undefined, ...rest, children: children }) }));
 };
 /**
  * `href` alone — annotated so a typo is a compile error rather than a silent
@@ -2344,7 +2341,7 @@ const MenuItem = React.forwardRef(function MenuItem(itemProps, ref) {
             labelChildren.push(child);
         }
     });
-    return (jsxRuntime.jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsxRuntime.jsx(Component, { ref: ref, className: itemClass, ...linkProps, children: labelChildren }), nestedMenuLists] }));
+    return (jsxRuntime.jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsxRuntime.jsx(Component, { ref: ref, className: itemClass || undefined, ...linkProps, children: labelChildren }), nestedMenuLists] }));
 });
 MenuItem.displayName = 'MenuItem';
 // Attach static subcomponents
@@ -2846,9 +2843,9 @@ const NavbarComponent = React.forwardRef(function NavbarComponent({ className, t
  * @param {NavbarBrandProps} props - Props for the NavbarBrand component.
  * @returns {JSX.Element} The rendered brand area.
  */
-const NavbarBrand = ({ className, children, textColor, ...props }) => {
+const NavbarBrand = ({ className, children, textColor, color, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
+        color: textColor ?? color,
         ...props,
     });
     return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('navbar-brand'), bulmaHelperClasses, className), ...rest, children: children }));
@@ -2881,13 +2878,14 @@ NavbarItem.displayName = 'NavbarItem';
  * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the burger button element.
  * @returns {JSX.Element} The rendered burger.
  */
-const NavbarBurger = React.forwardRef(function NavbarBurger({ className, active, children, ...props }, ref) {
+const NavbarBurger = React.forwardRef(function NavbarBurger({ className, active, textColor, color, children, ...props }, ref) {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
         ...props,
     });
     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';
 /**
@@ -2897,8 +2895,9 @@ NavbarBurger.displayName = 'NavbarBurger';
  * @param {NavbarMenuProps} props - Props for the NavbarMenu component.
  * @returns {JSX.Element} The rendered menu.
  */
-const NavbarMenu = ({ className, active, children, ...props }) => {
+const NavbarMenu = ({ className, active, textColor, color, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
         ...props,
     });
     return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('navbar-menu', {
@@ -2912,8 +2911,9 @@ const NavbarMenu = ({ className, active, children, ...props }) => {
  * @param {NavbarStartEndProps} props - Props for the NavbarStart component.
  * @returns {JSX.Element} The rendered start area.
  */
-const NavbarStart = ({ className, children, ...props }) => {
+const NavbarStart = ({ className, textColor, color, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
         ...props,
     });
     return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('navbar-start'), bulmaHelperClasses, className), ...rest, children: children }));
@@ -2925,8 +2925,9 @@ const NavbarStart = ({ className, children, ...props }) => {
  * @param {NavbarStartEndProps} props - Props for the NavbarEnd component.
  * @returns {JSX.Element} The rendered end area.
  */
-const NavbarEnd = ({ className, children, ...props }) => {
+const NavbarEnd = ({ className, textColor, color, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
         ...props,
     });
     return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('navbar-end'), bulmaHelperClasses, className), ...rest, children: children }));
@@ -3072,7 +3073,7 @@ const NavbarDropdownMenu = ({ className, right, up, children, ...props }) => (js
  * @param {React.HTMLAttributes<HTMLHRElement>} props - Standard hr props.
  * @returns {JSX.Element} The rendered divider.
  */
-const NavbarDivider = props => (jsxRuntime.jsx("hr", { className: usePrefixedClassNames('navbar-divider'), ...props }));
+const NavbarDivider = ({ className, ...props }) => (jsxRuntime.jsx("hr", { className: classNames(usePrefixedClassNames('navbar-divider'), className), ...props }));
 // Attach subcomponents
 const Navbar = withSubComponents(NavbarComponent, {
     Brand: NavbarBrand,
@@ -3690,7 +3691,7 @@ const TabsComponent = ({ align, size, isFullwidth, isFullWidth, fullwidth, boxed
  * @param {TabListProps} props - Props for the TabList component.
  * @returns {JSX.Element} The rendered tab list.
  */
-const TabList = ({ className, children, ...props }) => (jsxRuntime.jsx("ul", { role: "tablist", className: classNames(className), ...props, children: children }));
+const TabList = ({ className, children, ...props }) => (jsxRuntime.jsx("ul", { role: "tablist", className: classNames(className) || undefined, ...props, children: children }));
 /**
  * Individual tab button. Consumes Tabs context for active state management.
  * Renders `<a>` internally — consumers provide only the label text/children.
@@ -3709,7 +3710,7 @@ const Tab = ({ index, disabled, icon, iconLibrary, iconVariant, iconSize = 'smal
             ctx.setActiveTab(index);
         }
     }, [disabled, ctx, index]);
-    return (jsxRuntime.jsx("li", { className: classNames(activeClass, className), role: "tab", "aria-selected": isActive, tabIndex: disabled ? -1 : 0, ...props, children: jsxRuntime.jsxs("a", { onClick: handleClick, "aria-disabled": disabled || undefined, children: [icon && (jsxRuntime.jsx(Icon, { name: icon, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })), children && jsxRuntime.jsx("span", { children: children })] }) }));
+    return (jsxRuntime.jsx("li", { className: classNames(activeClass, className) || undefined, role: "tab", "aria-selected": isActive, tabIndex: disabled ? -1 : 0, ...props, children: jsxRuntime.jsxs("a", { onClick: handleClick, "aria-disabled": disabled || undefined, children: [icon && (jsxRuntime.jsx(Icon, { name: icon, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })), children && jsxRuntime.jsx("span", { children: children })] }) }));
 };
 /**
  * Each tab; accepts `active`, `onClick`, etc.
@@ -3719,7 +3720,8 @@ const Tab = ({ index, disabled, icon, iconLibrary, iconVariant, iconSize = 'smal
  * @returns {JSX.Element} The rendered tab item.
  * @deprecated Use `Tabs.Tab` with an `index` prop instead.
  */
-const TabItem = ({ active, className, children, onClick, ...props }) => (jsxRuntime.jsx("li", { className: classNames({ [usePrefixedClassNames('is-active')]: active }, className), onClick: onClick, ...props, children: children }));
+const TabItem = ({ active, className, children, onClick, ...props }) => (jsxRuntime.jsx("li", { className: classNames({ [usePrefixedClassNames('is-active')]: active }, className) ||
+        undefined, onClick: onClick, ...props, children: children }));
 /**
  * Container for tab content panels. No custom props beyond `children` and standard `<div>` HTML attributes. Applies the `.tabs-content` class.
  *
@@ -5969,7 +5971,7 @@ const Image = ({ as, className, textColor, color, bgColor, size, isRounded, isRe
         Tag = 'div';
     }
     const roundedClass = usePrefixedClassNames('is-rounded');
-    const content = children ? (children) : (jsxRuntime.jsx("img", { className: classNames({ [roundedClass]: isRounded }), src: src, alt: alt, ...(isRetina && src ? { srcSet: `${src} 2x` } : {}) }));
+    const content = children ? (children) : (jsxRuntime.jsx("img", { className: classNames({ [roundedClass]: isRounded }) || undefined, src: src, alt: alt, ...(isRetina && src ? { srcSet: `${src} 2x` } : {}) }));
     return (jsxRuntime.jsx(Tag, { className: imageClasses, ...rest, children: content }));
 };
 
@@ -6169,6 +6171,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]);
@@ -6187,11 +6190,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.
@@ -6435,7 +6440,7 @@ const Thead = ({ className, children, ...props }) => {
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const theadClasses = classNames(className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("thead", { className: theadClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("thead", { className: theadClasses || undefined, ...rest, children: children }));
 };
 
 /**
@@ -6454,7 +6459,7 @@ const Tbody = ({ className, children, ...props }) => {
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const tbodyClasses = classNames(className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("tbody", { className: tbodyClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("tbody", { className: tbodyClasses || undefined, ...rest, children: children }));
 };
 
 /**
@@ -6473,7 +6478,7 @@ const Tfoot = ({ className, children, ...props }) => {
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const tfootClasses = classNames(className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("tfoot", { className: tfootClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("tfoot", { className: tfootClasses || undefined, ...rest, children: children }));
 };
 
 /** Valid Bulma color values for table cells. */
@@ -6508,7 +6513,7 @@ const Td = ({ className, color, children, ...props }) => {
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const tdClasses = classNames(colorClass, className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("td", { className: tdClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("td", { className: tdClasses || undefined, ...rest, children: children }));
 };
 
 /**
@@ -6531,7 +6536,7 @@ const Tr = ({ className, isSelected, color, children, ...props }) => {
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const trClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("tr", { className: trClasses, ...rest, children: children }));
+    return (jsxRuntime.jsx("tr", { className: trClasses || undefined, ...rest, children: children }));
 };
 
 const validAlignments = ['left', 'right', 'centered'];
@@ -6555,7 +6560,7 @@ const Th = ({ className, isAligned, width, color, children, ...props }) => {
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const thClasses = classNames(bulmaClasses, className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("th", { className: thClasses, style: width
+    return (jsxRuntime.jsx("th", { className: thClasses || undefined, style: width
             ? { width: typeof width === 'number' ? `${width}px` : width }
             : undefined, ...rest, children: children }));
 };
@@ -13494,7 +13499,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;