@allxsmith/bestax-bulma 5.18.1 → 5.18.2

package/dist/index.esm.js

@@ -1235,6 +1235,27 @@ const ColumnsComponent = ({ className, textColor, color: _fieldColor, bgColor, i
 };
 const Columns = withSubComponents(ColumnsComponent, { Column }, 'Columns');
 
+/**
+ * The `type` to render on a `<button>` a component defaults to `button`: the
+ * caller's own value when it is `button`, `submit` or `reset`, and `button`
+ * otherwise.
+ *
+ * A missing `type` is not the only way a button ends up submitting the form
+ * around it. HTML reads an invalid value, such as the anchor's MIME-type
+ * `type="text/html"`, as submit too, and a props spread carrying
+ * `type: undefined` removes the attribute outright. Both can arrive through a
+ * spread or an untyped caller the component's own types never see, so this
+ * checks the value rather than trusting where it came from.
+ *
+ * Call it AFTER the forwarded props are spread and pass it the forwarded
+ * `type`, so its result is the attribute that renders.
+ */
+function buttonType(given) {
+    return given === 'submit' || given === 'reset' || given === 'button'
+        ? given
+        : 'button';
+}
+
 /**
  * Whether an `as` target is a custom element rather than a built-in tag.
  *
@@ -1532,7 +1553,7 @@ const Avatar = forwardRef(function Avatar(avatarProps, ref) {
     // The decorative opt-out never applies to an interactive avatar — a link or
     // button must always expose an accessible name.
     const isDecorative = alt === '' && !isInteractive;
-    const a11yProps = showImage
+    const a11yDefaults = showImage
         ? isInteractive && !accessibleName
             ? // The img alt normally names the control; with no alt/name (an API
                 // returning only a photo URL) the link/button would be nameless.
@@ -1544,10 +1565,18 @@ const Avatar = forwardRef(function Avatar(avatarProps, ref) {
                 ...(isInteractive ? {} : { role: 'img' }),
                 'aria-label': accessibleName || name || 'Avatar',
             };
-    // A clickable avatar inside a form must not submit it; default the native
-    // button type (an explicit type passed through rest still wins).
-    const buttonTypeProps = Tag === 'button' ? { type: 'button' } : {};
-    return (jsxs(Tag, { ref: ref, className: combinedClasses, style: { ...sizeStyle, ...style }, ...buttonTypeProps, ...linkProps, ...a11yProps, ...rest, children: [showImage && (jsx("img", { ...imageProps, ref: imgRef, src: src, alt: accessibleName ?? '', onError: e => {
+    // Each default yields to a value the caller passed, and is applied after
+    // `rest` reading through it rather than spread before it. React treats an
+    // `undefined` attribute as "remove it", and a spread carrying the key with no
+    // value is how that arrives, so a default spread first was erased by it: an
+    // `aria-label: undefined` left a button avatar nameless, and `role` and
+    // `aria-hidden` went the same way. The button `type` below has the same
+    // shape (#690).
+    const a11yProps = Object.fromEntries(Object.entries(a11yDefaults).map(([key, fallback]) => [
+        key,
+        rest[key] ?? fallback,
+    ]));
+    return (jsxs(Tag, { ref: ref, className: combinedClasses, style: { ...sizeStyle, ...style }, ...linkProps, ...rest, ...a11yProps, ...(Tag === 'button' ? { type: buttonType(rest.type) } : {}), 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, {})] }));
@@ -2047,7 +2076,6 @@ const CardFooterItem = ({ as = 'span', className, children, color, bgColor, text
     }
     const forwarded = omitAttrs(rest, STRIP_FROM_NON_ANCHOR$1);
     if (as === 'button') {
-        const forwardedType = forwarded.type;
         return (jsx("button", { className: itemClasses, ...forwarded, 
             // A footer item button must not submit an enclosing form by default —
             // `<button>` defaults to `type="submit"`, and a Save/Cancel action row
@@ -2057,13 +2085,9 @@ const CardFooterItem = ({ as = 'span', className, children, color, bgColor, text
             // typed here as the `<a>` MIME string (`STRIP_FROM_NON_ANCHOR` above
             // says why it is not withheld), so `as="button" type="text/html"`
             // compiles, and HTML's INVALID-value default for a button's `type` is
-            // submit too. So anything that is not one of the three native button
-            // types falls back to `button` rather than being forwarded.
-            type: forwardedType === 'submit' ||
-                forwardedType === 'reset' ||
-                forwardedType === 'button'
-                ? forwardedType
-                : 'button', children: children }));
+            // submit too. `buttonType` keeps `button`, `submit` and `reset` and
+            // turns anything else into `button`.
+            type: buttonType(forwarded.type), children: children }));
     }
     return (jsx("span", { className: itemClasses, ...omitAttrs(forwarded, STRIP_FROM_NON_BUTTON), children: children }));
 };
@@ -2400,9 +2424,7 @@ const DropdownItem = ((itemProps) => {
         // 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',
-            }
+            ? { type: buttonType(forwarded.type) }
             : {}), children: children }));
 });
 /**
@@ -2511,7 +2533,9 @@ const MenuItem = forwardRef(function MenuItem(itemProps, ref) {
             labelChildren.push(child);
         }
     });
-    return (jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsx(Component, { ref: ref, className: itemClass || undefined, ...linkProps, children: labelChildren }), nestedMenuLists] }));
+    return (jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsx(Component, { ref: ref, className: itemClass || undefined, ...linkProps, ...(Component === 'button'
+                    ? { type: buttonType(linkProps.type) }
+                    : {}), children: labelChildren }), nestedMenuLists] }));
 });
 MenuItem.displayName = 'MenuItem';
 // Attach static subcomponents
@@ -4711,6 +4735,48 @@ const Sidebar = withSubComponents(SidebarComponent, {
     Footer: SidebarFooter,
 }, 'Sidebar');
 
+/**
+ * Splits the items a container shows into one stack per position in use. An
+ * item goes to its own position when it has one and to the container's
+ * otherwise. A position with no items gets no stack.
+ *
+ * Stacks come back in `order`, so their order in the page follows the screen
+ * rather than which position happened to be used first, and a stack keeps its
+ * place while the others come and go. A position missing from `order` sorts
+ * after the known ones.
+ *
+ * @function groupIntoPositionStacks
+ * @param items - The items the container shows, in the order they were shown.
+ * @param positionOf - Reads an item's own position, if it has one.
+ * @param containerPosition - Where an item without a position of its own goes.
+ * @param order - Every known position, in the order stacks should render.
+ * @returns One stack per position in use.
+ */
+function groupIntoPositionStacks(items, positionOf, containerPosition, order) {
+    const byPosition = new Map();
+    for (const item of items) {
+        const position = positionOf(item) ?? containerPosition;
+        const stack = byPosition.get(position);
+        if (stack) {
+            stack.push(item);
+        }
+        else {
+            byPosition.set(position, [item]);
+        }
+    }
+    const rank = (position) => {
+        const index = order.indexOf(position);
+        return index === -1 ? order.length : index;
+    };
+    // Array.prototype.sort is stable, so unknown positions keep the order they
+    // were first used in.
+    return Array.from(byPosition, ([position, stackItems]) => ({
+        key: position === containerPosition ? 'container' : `at-${position}`,
+        position,
+        items: stackItems,
+    })).sort((a, b) => rank(a.position) - rank(b.position));
+}
+
 /**
  * The `Toast` component provides brief notification messages with optional action and cancel buttons.
  *
@@ -4987,25 +5053,38 @@ const toast = {
         return () => toastListeners.delete(listener);
     },
 };
+// The order ToastContainer renders its stacks in: across the top of the
+// screen, then across the bottom.
+const toastStackOrder = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+];
 /**
  * Container component for rendering programmatic toasts.
- * Place once at your app root to enable the toast API.
+ * Place once at your app root to enable the toast API. A toast shown with a
+ * `position` appears there, and one shown without goes to the container's
+ * `position`.
  *
  * @function
  * @param {{ position?: ToastPosition }} props - Container props.
  * @returns {JSX.Element | null} The rendered toast container, or null if empty.
  */
-const ToastContainer = ({ position = 'top-right', }) => {
+const ToastContainer = ({ position = 'top-right' }) => {
     // Starts from the toasts already showing instead of an empty list, then
     // follows changes.
     const toastList = useSyncExternalStore(toast.subscribe, getVisibleToasts, getServerToasts);
     if (typeof document === 'undefined' || toastList.length === 0) {
         return null;
     }
-    return createPortal(jsx("div", { className: `toast-container is-${position}`, children: toastList.map(t => {
+    const stacks = groupIntoPositionStacks(toastList, t => t.props.position, position, toastStackOrder);
+    return createPortal(stacks.map(stack => (jsx("div", { className: `toast-container is-${stack.position}`, children: stack.items.map(t => {
             const { queue: _queue, ...toastProps } = t.props;
-            return (jsx(Toast, { ...toastProps, position: position, onClose: () => toast.close(t.id) }, t.id));
-        }) }), document.body);
+            return (jsx(Toast, { ...toastProps, position: stack.position, onClose: () => toast.close(t.id) }, t.id));
+        }) }, stack.key))), document.body);
 };
 
 /**
@@ -6449,25 +6528,28 @@ const NotificationItem = ({ instance, onClose }) => {
     }, [pauseOnHover]);
     return (jsx(Notification, { color: color, isLight: isLight, hasDelete: hasDelete, onDelete: handleClose, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { pointerEvents: 'auto' }, children: urgent ? (jsx("span", { role: "alert", "aria-live": "assertive", children: message })) : (jsx("span", { role: "status", "aria-live": "polite", children: message })) }));
 };
+// The order NotificationContainer renders its stacks in: across the top of the
+// screen, then across the bottom.
+const notificationStackOrder = [
+    'top-left',
+    'top',
+    'top-right',
+    'bottom-left',
+    'bottom',
+    'bottom-right',
+];
 /**
- * Container component for rendering programmatic notifications.
- * Place once at your app root to enable the notification API.
+ * Inline style that fixes a stack of notifications to its place on the screen.
  *
  * @function
- * @param {{ position?: NotificationPosition }} props - Container props.
- * @returns {JSX.Element | null} The rendered notification container, or null if empty.
+ * @param {NotificationPosition} position - Where the stack sits.
+ * @returns {React.CSSProperties} The stack's style.
  */
-const NotificationContainer = ({ position = 'top-right' }) => {
-    // Starts from the notifications already showing instead of an empty list,
-    // then follows changes.
-    const items = useSyncExternalStore(notification.subscribe, getVisibleNotifications, getServerNotifications);
-    if (typeof document === 'undefined' || items.length === 0) {
-        return null;
-    }
+const notificationStackStyle = (position) => {
     const isBottom = position.startsWith('bottom');
     const isCenter = position === 'top' || position === 'bottom';
     const isRight = position.endsWith('right');
-    const containerStyle = {
+    return {
         position: 'fixed',
         zIndex: 100,
         display: 'flex',
@@ -6483,7 +6565,27 @@ const NotificationContainer = ({ position = 'top-right' }) => {
                 ? { right: 0, alignItems: 'flex-end' }
                 : { left: 0, alignItems: 'flex-start' }),
     };
-    return createPortal(jsx("div", { style: containerStyle, children: items.map(item => (jsx(NotificationItem, { instance: item, onClose: notification.close }, item.id))) }), document.body);
+};
+/**
+ * Container component for rendering programmatic notifications.
+ * Place once at your app root to enable the notification API. A notification
+ * shown with a `position` appears there, and one shown without goes to the
+ * container's `position`, so the container renders a stack for each position
+ * in use.
+ *
+ * @function
+ * @param {{ position?: NotificationPosition }} props - Container props.
+ * @returns {JSX.Element | null} The rendered notification container, or null if empty.
+ */
+const NotificationContainer = ({ position = 'top-right' }) => {
+    // Starts from the notifications already showing instead of an empty list,
+    // then follows changes.
+    const items = useSyncExternalStore(notification.subscribe, getVisibleNotifications, getServerNotifications);
+    if (typeof document === 'undefined' || items.length === 0) {
+        return null;
+    }
+    const stacks = groupIntoPositionStacks(items, item => item.options.position, position, notificationStackOrder);
+    return createPortal(stacks.map(stack => (jsx("div", { style: notificationStackStyle(stack.position), children: stack.items.map(item => (jsx(NotificationItem, { instance: item, onClose: notification.close }, item.id))) }, stack.key))), document.body);
 };
 
 /**