@allxsmith/bestax-bulma 5.34.2 → 5.35.0

package/dist/index.cjs

@@ -3581,6 +3581,10 @@ const STRIP_FROM_NON_LINK = { href: true };
 /**
  * MenuItem supports `as` prop for custom link components, e.g., react-router-dom Link.
  *
+ * Give each item an `href`, a router link through `as`, or `as="button"`, so
+ * the keyboard can reach it: an `<a>` with no `href` isn't a link, and Tab
+ * skips it.
+ *
  * @function
  * @param {MenuItemProps} props - Props for the MenuItem component.
  * @param {React.Ref} ref - Forwarded ref to the inner element `as` renders.
@@ -3623,7 +3627,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 || undefined, ...linkProps, ...(Component === 'button'
+    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, "aria-current": active ? 'page' : undefined, ...linkProps, ...(Component === 'button'
                     ? { type: buttonType(linkProps.type) }
                     : {}), children: labelChildren }), nestedMenuLists] }));
 });
@@ -3834,12 +3838,85 @@ function Portal({ children, container, disabled = false }) {
     return reactDom.createPortal(children, resolveContainer(container));
 }
 
+// INTERNAL: deliberately not exported from src/index.ts.
 /**
- * Every currently active modal, in the order they opened. Only the last entry
- * — the topmost modal — reacts to Escape and Tab, so one keypress can't
- * dismiss a whole stack (e.g. a `Dialog` opened on top of a `Modal`).
+ * `useLayoutEffect` in the browser, `useEffect` on the server. A server
+ * render runs neither, and React 18 warns about a layout effect there, so the
+ * server is handed the plain one.
  */
-const activeModalStack = [];
+const useClientLayoutEffect = typeof document === 'undefined' ? React.useEffect : React.useLayoutEffect;
+
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * A ref holding the value from the latest commit, for a listener that is
+ * added once and calls whatever callback it was given most recently.
+ *
+ * A listener whose effect lists a callback prop is taken off and added again
+ * each time that callback changes, and an inline one changes on every render
+ * of its parent. React can render between two listeners for the same
+ * keypress, and the browser runs neither a listener taken off mid-event nor
+ * one added mid-event, so that keypress never reaches it (#1088). Reading the
+ * callback from here keeps the listener where it is.
+ *
+ * It's updated before paint on each commit, so a listener reads the props of
+ * the render that's on screen.
+ *
+ * @function useLatestRef
+ * @param value - The value to keep current, usually a callback prop.
+ * @returns A ref whose `current` is `value` as of the latest commit.
+ */
+function useLatestRef(value) {
+    const ref = React.useRef(value);
+    useClientLayoutEffect(() => {
+        ref.current = value;
+    });
+    return ref;
+}
+
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * The open overlays that take part, in the order they opened. Only the last
+ * one answers Escape, so one keypress closes one layer. It's touched in
+ * effects and key handlers, never while rendering, so a server render leaves
+ * it alone.
+ */
+const openOverlays = [];
+/**
+ * Holds this overlay's place in the stack of open overlays while `inStack`
+ * is true, from the effect after it opens until the one after it closes.
+ * Opening again puts it back on top.
+ *
+ * Returns a check for whether nothing in the stack sits above this overlay,
+ * to call when a key arrives. For an overlay in the stack, that's whether it
+ * is the topmost one. For one that isn't, such as a Toast, it's whether no
+ * overlay is open at all.
+ *
+ * @function useOverlayStack
+ * @param inStack - Whether this overlay is open and takes part.
+ * @returns A check for whether nothing in the stack is above this overlay.
+ */
+function useOverlayStack(inStack) {
+    const tokenRef = React.useRef({});
+    React.useEffect(() => {
+        if (!inStack)
+            return undefined;
+        const token = tokenRef.current;
+        openOverlays.push(token);
+        // Takes out this effect's own push. Should it ever be gone already, the
+        // stack is left as it is: splicing at -1 would take the topmost overlay
+        // instead.
+        return () => {
+            const index = openOverlays.indexOf(token);
+            if (index !== -1)
+                openOverlays.splice(index, 1);
+        };
+    }, [inStack]);
+    return React.useCallback(() => {
+        const top = openOverlays[openOverlays.length - 1];
+        return top === undefined || top === tokenRef.current;
+    }, []);
+}
+
 /**
  * Controls the modal can hand focus to. Disabled and hidden controls are
  * excluded because `focus()` on them is a no-op, which would leave focus
@@ -3998,8 +4075,8 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
     // Cleanup returned by a consumer's callback ref on attach, held until detach.
     const consumerCleanupRef = React.useRef(null);
     // The forwarded ref and the internal one must both see the node: focus
-    // management, the scroll lock and the topmost-modal check all read
-    // `modalRootRef`, while consumers expect their own ref to resolve.
+    // management and the Tab trap read `modalRootRef`, while consumers expect
+    // their own ref to resolve.
     const combinedRef = React.useCallback((node) => {
         modalRootRef.current =
             node;
@@ -4030,7 +4107,6 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
         }
     }, [ref]);
     const previouslyFocusedRef = React.useRef(null);
-    const stackTokenRef = React.useRef({});
     const generatedTitleId = React.useId();
     // A portal has no server-rendered counterpart, so the server render and the
     // hydrating render have to stay inline and only move into the portal once
@@ -4048,35 +4124,31 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
     // to it moves nothing, so it mustn't re-run the effects either.
     const defaultTarget = isPortaled && portal === true ? portalContainer : undefined;
     useScrollLock(isModalActive && lockScroll);
-    // Record open order so keyboard handling only applies to the topmost modal.
-    React.useEffect(() => {
-        if (!isModalActive)
-            return undefined;
-        const token = stackTokenRef.current;
-        activeModalStack.push(token);
-        return () => {
-            const index = activeModalStack.indexOf(token);
-            if (index !== -1)
-                activeModalStack.splice(index, 1);
-        };
-    }, [isModalActive]);
-    // Escape closes; Tab cycles inside the modal. Both only for the topmost one.
-    // The listener is on `window`, where a keydown arrives last, so everything
-    // inside the modal has had the key first: React's handlers, and `document`
-    // listeners added after this one, such as a date picker's.
+    // Read when Escape arrives, so the key listener stays put while `onClose`
+    // changes identity, as an inline one does on every render of the parent.
+    const onCloseRef = useLatestRef(onClose);
+    // Joins the stack of open overlays, so the keyboard handling below only
+    // applies while this modal is the topmost overlay.
+    const isTopmost = useOverlayStack(isModalActive);
+    // Escape closes; Tab cycles inside the modal. Both only for the topmost
+    // overlay. The listener is on `window`, where a keydown arrives last, so
+    // everything inside the modal has had the key first: React's handlers, and
+    // `document` listeners added after this one, such as a date picker's.
     React.useEffect(() => {
         if (!isModalActive)
             return undefined;
         const handleKeyDown = (e) => {
             const node = modalRootRef.current;
-            if (activeModalStack[activeModalStack.length - 1] !== stackTokenRef.current) {
+            if (!isTopmost())
                 return;
-            }
             if (e.key === 'Escape') {
                 // Something inside already used this Escape, such as a popup that
-                // closed on it, so the modal waits for the next one.
-                if (closeOnEscape && !e.defaultPrevented)
-                    onClose?.();
+                // closed on it, so the modal waits for the next one. One the modal
+                // closes on is marked used, so nothing under it acts on it as well.
+                if (closeOnEscape && onCloseRef.current && !e.defaultPrevented) {
+                    e.preventDefault();
+                    onCloseRef.current();
+                }
                 return;
             }
             // A trap inside the modal, such as a portaled popup's, already moved
@@ -4108,7 +4180,7 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [isModalActive, closeOnEscape, onClose]);
+    }, [isModalActive, closeOnEscape, onCloseRef, isTopmost]);
     // Move focus into the modal on open, restore it on close
     React.useEffect(() => {
         if (!isModalActive)
@@ -5105,14 +5177,6 @@ const Tabs = withSubComponents(TabsComponent, {
     Content: TabsContent,
 }, 'Tabs');
 
-// INTERNAL: deliberately not exported from src/index.ts.
-/**
- * `useLayoutEffect` in the browser, `useEffect` on the server. A server
- * render runs neither, and React 18 warns about a layout effect there, so the
- * server is handed the plain one.
- */
-const useClientLayoutEffect = typeof document === 'undefined' ? React.useEffect : React.useLayoutEffect;
-
 // Not exported, so it stays out of the public API that `index.ts` re-exports.
 const SegmentedControlContext = React.createContext(null);
 /** Sorts mounted segments into the order they sit in the page. */
@@ -5387,19 +5451,30 @@ const Loading = ({ active = false, isFullPage = false, size, color, canCancel =
             onCancel();
         }
     };
+    // Read when Escape arrives, so the key listener stays put while `onCancel`
+    // changes identity, as an inline one does on every render of the parent.
+    const onCancelRef = useLatestRef(onCancel);
+    const hasOnCancel = Boolean(onCancel);
+    // A full-page loading covers everything under it, so it joins the stack of
+    // open overlays and takes Escape from them while it's on top. One inside a
+    // container covers only that, so it stays out and waits, as a Toast does,
+    // until no overlay is open.
+    const isTopmost = useOverlayStack(active && isFullPage);
     // Handle escape key. On `window`, as in `Modal`, so a popup on the page has
-    // had the key first, and an Escape it closed on doesn't cancel as well.
+    // had the key first, and an Escape it closed on doesn't cancel as well. One
+    // that cancels is marked used, so nothing under it acts on it too.
     React.useEffect(() => {
-        if (!active || !canCancel || !onCancel)
+        if (!active || !canCancel || !hasOnCancel)
             return;
         const handleKeyDown = (e) => {
-            if (e.key === 'Escape' && !e.defaultPrevented) {
-                onCancel();
-            }
+            if (e.key !== 'Escape' || e.defaultPrevented || !isTopmost())
+                return;
+            e.preventDefault();
+            onCancelRef.current?.();
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [active, canCancel, onCancel]);
+    }, [active, canCancel, hasOnCancel, onCancelRef, isTopmost]);
     // Prevent body scroll when full page loading is active. Ref-counted through
     // the shared helper so an overlapping Modal/Dialog/Sidebar doesn't have its
     // lock cleared when this one releases.
@@ -6672,10 +6747,9 @@ const Tooltip = ({ label, content, position = 'top', color, size, active: always
         openOnTap,
     });
     // Auto-placement and overflow correction
-    React.useLayoutEffect(() => {
+    useClientLayoutEffect(() => {
         const isAuto = position === 'auto';
         if (!isAuto) {
-            // eslint-disable-next-line react-hooks/set-state-in-effect -- layout measurement effect resolves placement
             setResolvedPosition(position);
         }
         const showing = isVisible || alwaysActive;
@@ -7657,23 +7731,21 @@ const Step = ({ isActive = false, isCompleted = false, label, icon, clickable =
     const stepsMarkerClass = usePrefixedClassNames('steps-marker');
     const stepsContentClass = usePrefixedClassNames('steps-content');
     const stepsTitleClass = usePrefixedClassNames('steps-title');
-    const handleClick = () => {
-        if (clickable && onClick) {
-            onClick();
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (clickable && onClick && (e.key === 'Enter' || e.key === ' ')) {
-            e.preventDefault();
-            onClick();
-        }
-    };
     const resolvedCompletedIcon = completedIcon === undefined ? '\u2713' : completedIcon;
     const markerContent = icon ||
         (isCompleted && resolvedCompletedIcon
             ? resolvedCompletedIcon
             : (stepNumber ?? null));
-    return (jsxRuntime.jsx("li", { className: stepClasses, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: clickable ? 0 : undefined, role: clickable ? 'button' : undefined, "aria-current": isActive ? 'step' : undefined, ...rest, children: jsxRuntime.jsxs("div", { className: stepsLinkClass, children: [jsxRuntime.jsx("span", { className: stepsMarkerClass, children: markerContent }), (label || children) && (jsxRuntime.jsx("div", { className: stepsContentClass, children: jsxRuntime.jsx("p", { className: stepsTitleClass, children: label || children }) }))] }) }));
+    const title = label || children;
+    const current = isActive ? 'step' : undefined;
+    // The step stays a list item, and a real button inside it does the
+    // clicking, so the list keeps its items and the button brings Enter, Space
+    // and focus with it. A button holds only phrasing content, so its parts
+    // are spans.
+    if (clickable) {
+        return (jsxRuntime.jsx("li", { className: stepClasses, ...rest, children: jsxRuntime.jsxs("button", { type: "button", className: stepsLinkClass, onClick: () => onClick?.(), "aria-current": current, children: [jsxRuntime.jsx("span", { className: stepsMarkerClass, children: markerContent }), title && (jsxRuntime.jsx("span", { className: stepsContentClass, children: jsxRuntime.jsx("span", { className: stepsTitleClass, children: title }) }))] }) }));
+    }
+    return (jsxRuntime.jsx("li", { className: stepClasses, "aria-current": current, ...rest, children: jsxRuntime.jsxs("div", { className: stepsLinkClass, children: [jsxRuntime.jsx("span", { className: stepsMarkerClass, children: markerContent }), title && (jsxRuntime.jsx("div", { className: stepsContentClass, children: jsxRuntime.jsx("p", { className: stepsTitleClass, children: title }) }))] }) }));
 };
 /**
  * The `Steps` component provides a multi-step progress indicator for wizard flows, checkout processes, or any multi-step workflow.
@@ -7754,7 +7826,10 @@ const StepsComponent = ({ value = 0, items, size, color, hasMarker = true, anima
         }
         return null;
     };
-    return (jsxRuntime.jsxs("div", { className: combinedClasses, ...rest, children: [jsxRuntime.jsx("ul", { className: listClasses, children: renderSteps() }), hasNavigation && (jsxRuntime.jsxs("div", { className: stepsNavigationClass, children: [jsxRuntime.jsx("button", { type: "button", className: prevButtonClass, disabled: value === 0, onClick: onPrev ?? (() => onStepClick?.(value - 1)), children: prevLabel ?? 'Previous' }), jsxRuntime.jsx("button", { type: "button", className: nextButtonClass, disabled: value === totalSteps - 1, onClick: onNext ?? (() => onStepClick?.(value + 1)), children: nextLabel ?? 'Next' })] }))] }));
+    // role="list" restates the <ul>'s own role, for Safari: WebKit stops
+    // exposing a list as one once its markers are hidden, as they are here,
+    // unless the role is set explicitly.
+    return (jsxRuntime.jsxs("div", { className: combinedClasses, ...rest, children: [jsxRuntime.jsx("ul", { className: listClasses, role: "list", children: renderSteps() }), hasNavigation && (jsxRuntime.jsxs("div", { className: stepsNavigationClass, children: [jsxRuntime.jsx("button", { type: "button", className: prevButtonClass, disabled: value === 0, onClick: onPrev ?? (() => onStepClick?.(value - 1)), children: prevLabel ?? 'Previous' }), jsxRuntime.jsx("button", { type: "button", className: nextButtonClass, disabled: value === totalSteps - 1, onClick: onNext ?? (() => onStepClick?.(value + 1)), children: nextLabel ?? 'Next' })] }))] }));
 };
 // Attach Step as static property
 const Steps = withSubComponents(StepsComponent, { Step }, 'Steps');
@@ -7808,19 +7883,29 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
             handleClose();
         }
     }, [overlayClose, handleClose]);
+    // Read when Escape arrives, so the key listener stays put while
+    // `onClose` changes identity, as an inline one does on every render of
+    // the parent.
+    const handleCloseRef = useLatestRef(handleClose);
+    // Joins the stack of open overlays, so the sidebar answers Escape only
+    // while it's the topmost overlay, and keeps it from those under it.
+    const isTopmost = useOverlayStack(isOpen);
+    const closesOnEscape = escapeClose && canCancel && Boolean(onClose);
     // Handle escape key. On `window`, as in `Modal`, so everything inside the
-    // sidebar has had the key first, and an Escape it used is left to it.
+    // sidebar has had the key first, and an Escape it used is left to it. One
+    // the sidebar closes on is marked used, so nothing under it acts on it.
     React.useEffect(() => {
-        if (!isOpen || !escapeClose)
+        if (!isOpen || !closesOnEscape)
             return;
         const handleKeyDown = (e) => {
-            if (e.key === 'Escape' && !e.defaultPrevented) {
-                handleClose();
-            }
+            if (e.key !== 'Escape' || e.defaultPrevented || !isTopmost())
+                return;
+            e.preventDefault();
+            handleCloseRef.current();
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [isOpen, escapeClose, handleClose]);
+    }, [isOpen, closesOnEscape, handleCloseRef, isTopmost]);
     // Prevent body scroll when sidebar is open. Ref-counted through the shared
     // helper so an overlapping Modal/Dialog/Loading doesn't unlock underneath.
     useScrollLock(isOpen && overlay);
@@ -7830,6 +7915,7 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
     React.useEffect(() => {
         if (isOpen) {
             const element = sidebarRef.current;
+            /* istanbul ignore else: the aside renders whenever the sidebar is open, so its ref is set before this runs */
             if (element) {
                 // Focus first focusable element or sidebar itself
                 const focusable = element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -8038,14 +8124,19 @@ const Toast = React.forwardRef(({ message, type = 'default', actionType, positio
         onAction?.();
         handleClose();
     }, [onAction, handleClose]);
+    // Read when the timer runs out, a click lands outside or Escape arrives,
+    // so the timer and the listeners stay put while `onClose` changes
+    // identity, as an inline one does on every render of the parent. An
+    // inline one from `ToastContainer` changes whenever another toast shows.
+    const handleCloseRef = useLatestRef(handleClose);
     React.useEffect(() => {
         if (indefinite || duration === 0 || isPaused)
             return undefined;
         const timer = setTimeout(() => {
-            handleClose();
+            handleCloseRef.current();
         }, duration);
         return () => clearTimeout(timer);
-    }, [duration, indefinite, isPaused, handleClose]);
+    }, [duration, indefinite, isPaused, handleCloseRef]);
     const handleMouseEnter = React.useCallback(() => {
         if (pauseOnHover) {
             setIsPaused(true);
@@ -8063,7 +8154,7 @@ const Toast = React.forwardRef(({ message, type = 'default', actionType, positio
             return undefined;
         const handleDocumentClick = (e) => {
             if (toastRef.current && !isEventInside(e, toastRef.current)) {
-                handleClose();
+                handleCloseRef.current();
             }
         };
         const raf = requestAnimationFrame(() => {
@@ -8073,20 +8164,24 @@ const Toast = React.forwardRef(({ message, type = 'default', actionType, positio
             cancelAnimationFrame(raf);
             document.removeEventListener('click', handleDocumentClick);
         };
-    }, [dismissible, isVisible, handleClose]);
+    }, [dismissible, isVisible, handleCloseRef]);
+    // A toast is a notification rather than a layer, so it never joins the
+    // stack of open overlays. Asking the stack tells it whether one is open:
+    // an Escape while one is belongs to the overlay, and the toast waits.
+    const isTopmost = useOverlayStack(false);
     // On `window`, as in `Modal`, so a popup on the page has had the key
     // first, and an Escape it closed on doesn't dismiss the toast as well.
     React.useEffect(() => {
         if (!cancelable || !isVisible)
             return undefined;
         const handleKeyDown = (e) => {
-            if (e.key === 'Escape' && !e.defaultPrevented) {
-                handleClose();
+            if (e.key === 'Escape' && !e.defaultPrevented && isTopmost()) {
+                handleCloseRef.current();
             }
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [cancelable, isVisible, handleClose]);
+    }, [cancelable, isVisible, handleCloseRef, isTopmost]);
     const containerClasses = usePrefixedClassNames('toast-container', {
         [`is-${position}`]: true,
     });
@@ -9754,7 +9849,8 @@ const ListItem = ({ className, textColor, bgColor, children, ...props }) => {
  *
  * The ring is `1em` square, so `textSize` scales it. It is exposed as an
  * indeterminate `progressbar` named by `ariaLabel`, and it stops spinning
- * under `prefers-reduced-motion: reduce` while staying drawn.
+ * under `prefers-reduced-motion: reduce` while staying drawn. In forced
+ * colors its two open sides take the page's color, so it stays open.
  *
  * @function
  * @param {LoaderProps} props - Props for the Loader component.
@@ -10835,11 +10931,39 @@ const checkboxSizes = ['small', 'normal', 'medium', 'large'];
  *   <Checkbox value="vue">Vue</Checkbox>
  * </Checkboxes>
  */
-const Checkbox = React.forwardRef(({ color, size, className, children, textColor, disabled, name, value, checked, defaultChecked, onChange, ...props }, ref) => {
+const Checkbox = React.forwardRef(({ color, size, className, children, textColor, disabled, name, value, checked, defaultChecked, indeterminate, onChange, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         ...props,
     });
+    // The input's own ref, merged with the forwarded one. A callback ref's
+    // return value is handed back, so React 19 still runs a cleanup it
+    // returns, as it did when the ref went straight to the input.
+    const inputRef = React.useRef(null);
+    const setRefs = React.useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === 'function')
+            return ref(node);
+        if (ref)
+            ref.current = node;
+    }, [ref]);
+    // `indeterminate` is a DOM property with no attribute, so it's set on the
+    // input rather than rendered. A click clears it, so this runs after every
+    // render, not only when the prop changes. Unset, it's left alone, so a
+    // ref that sets the property itself still works. `ownsIndeterminateRef`
+    // remembers that this component set it, so a prop that goes back to unset
+    // clears the dash once instead of leaving it on.
+    const ownsIndeterminateRef = React.useRef(false);
+    useClientLayoutEffect(() => {
+        if (indeterminate !== undefined) {
+            ownsIndeterminateRef.current = true;
+            inputRef.current.indeterminate = indeterminate;
+        }
+        else if (ownsIndeterminateRef.current) {
+            ownsIndeterminateRef.current = false;
+            inputRef.current.indeterminate = false;
+        }
+    });
     // Inherit name + selection state from a surrounding <Checkboxes> group.
     // Local props always win over the group (explicit > implicit).
     const group = useCheckboxesGroup();
@@ -10854,6 +10978,10 @@ const Checkbox = React.forwardRef(({ color, size, className, children, textColor
     // the controlled/uncontrolled React warning.
     const effectiveDefaultChecked = groupManaged ? undefined : defaultChecked;
     const handleChange = React.useCallback((e) => {
+        // The click that got here cleared the mixed state. Put it back now,
+        // since a click that changes no state renders nothing to do it.
+        if (indeterminate !== undefined)
+            e.target.indeterminate = indeterminate;
         // Local onChange always fires.
         onChange?.(e);
         // Dispatch to the group additionally — toggle this value's
@@ -10868,7 +10996,7 @@ const Checkbox = React.forwardRef(({ color, size, className, children, textColor
                 : currentArr.filter(v => v !== valStr);
             group.onChange(next);
         }
-    }, [onChange, group, value]);
+    }, [onChange, group, value, indeterminate]);
     const mainClass = usePrefixedClassNames('styled-checkbox', 'checkbox', {
         [`is-${color}`]: color && checkboxColors.includes(color),
         [`is-${size}`]: size && checkboxSizes.includes(size),
@@ -10876,7 +11004,7 @@ const Checkbox = React.forwardRef(({ color, size, className, children, textColor
     const checkboxClass = classNames(mainClass, bulmaHelperClasses, className);
     const checkClass = usePrefixedClassNames('check');
     const controlLabelClass = usePrefixedClassNames('control-label');
-    return (jsxRuntime.jsxs("label", { className: checkboxClass, children: [jsxRuntime.jsx("input", { ref: ref, type: "checkbox", disabled: disabled, name: effectiveName, value: value, checked: effectiveChecked, defaultChecked: effectiveDefaultChecked, onChange: handleChange, ...rest }), jsxRuntime.jsx("span", { className: checkClass }), children && jsxRuntime.jsx("span", { className: controlLabelClass, children: children })] }));
+    return (jsxRuntime.jsxs("label", { className: checkboxClass, children: [jsxRuntime.jsx("input", { ref: setRefs, type: "checkbox", disabled: disabled, name: effectiveName, value: value, checked: effectiveChecked, defaultChecked: effectiveDefaultChecked, onChange: handleChange, ...rest }), jsxRuntime.jsx("span", { className: checkClass }), children && jsxRuntime.jsx("span", { className: controlLabelClass, children: children })] }));
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -12029,7 +12157,7 @@ const Slider = React.forwardRef((props, ref) => {
         }
         return 0;
     }, []);
-    React.useLayoutEffect(() => {
+    useClientLayoutEffect(() => {
         if (isVertical)
             return;
         const wrapper = wrapperRef.current;
@@ -12043,7 +12171,7 @@ const Slider = React.forwardRef((props, ref) => {
             setNudgeX(computeNudge(el, wrapper, pct, thumbPx));
         }
     });
-    React.useLayoutEffect(() => {
+    useClientLayoutEffect(() => {
         if (isVertical || !range)
             return;
         const wrapper = wrapperRef.current;
@@ -12057,7 +12185,7 @@ const Slider = React.forwardRef((props, ref) => {
         }
     });
     // Detect vertical tooltip overflow: flip to left if no space on right
-    React.useLayoutEffect(() => {
+    useClientLayoutEffect(() => {
         if (!isVertical)
             return;
         const wrapper = wrapperRef.current;
@@ -12646,6 +12774,18 @@ Rate.displayName = 'Rate';
 // it's handed while that content is on screen because of the user's typing.
 const typedNoMatches = [{ id: 'empty' }];
 const nothingToAnnounce = [];
+// A press on an option would take focus from the field, since an option
+// can't hold it, and nothing would put it back. Cancelling the press keeps
+// it there, as the ARIA Authoring Practices' combobox does, and the click
+// still picks the option.
+const keepFocus = (e) => e.preventDefault();
+// An IME that's composing owns every key: Enter confirms what it composed,
+// and the arrows move through its candidates. Safari can say so with
+// `keyCode` 229 rather than `isComposing`.
+const isComposing = (e) => e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
+// Whether an option can be picked. The arrows still reach a disabled one, so
+// a screen reader user finds it.
+const isEnabled = (item) => typeof item === 'string' || !item.disabled;
 /**
  * The `Autocomplete` component provides an input field with dropdown suggestions that filter based on user input.
  *
@@ -12805,13 +12945,17 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     }, [keepFirst, isActive, filteredData.length, inputValue]);
     // Handle keyboard navigation
     const handleKeyDown = React.useCallback((e) => {
-        if (disabled)
+        if (disabled || isComposing(e))
             return;
         switch (e.key) {
             case 'ArrowDown':
                 e.preventDefault();
                 if (!isActive) {
+                    // A closed list opens on its first enabled option, as the ARIA
+                    // Authoring Practices' combobox does. Alt+Down Arrow opens it
+                    // without a highlight.
                     setIsActive(true);
+                    setHighlightedIndex(e.altKey ? -1 : filteredData.map(isEnabled).indexOf(true));
                 }
                 else {
                     setHighlightedIndex(prev => prev < filteredData.length - 1 ? prev + 1 : prev);
@@ -12819,13 +12963,30 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                 break;
             case 'ArrowUp':
                 e.preventDefault();
-                setHighlightedIndex(prev => (prev > 0 ? prev - 1 : prev));
+                if (!isActive) {
+                    // And Up Arrow opens it on its last enabled option.
+                    setIsActive(true);
+                    setHighlightedIndex(filteredData.map(isEnabled).lastIndexOf(true));
+                }
+                else {
+                    setHighlightedIndex(prev => (prev > 0 ? prev - 1 : prev));
+                }
                 break;
             case 'Enter':
-                e.preventDefault();
-                if (highlightedIndex >= 0 && filteredData[highlightedIndex]) {
+                // With the list open on a highlighted option it can pick, Enter
+                // is that option's. Otherwise it closes the list and goes on, so
+                // a form around the field submits, as it would from any text
+                // field.
+                if (isActive &&
+                    highlightedIndex >= 0 &&
+                    filteredData[highlightedIndex] &&
+                    isEnabled(filteredData[highlightedIndex])) {
+                    e.preventDefault();
                     handleSelect(filteredData[highlightedIndex]);
                 }
+                else {
+                    setIsActive(false);
+                }
                 break;
             case 'Escape':
                 // Only closing the dropdown claims the key. With it closed, the
@@ -12836,7 +12997,9 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                 setHighlightedIndex(-1);
                 break;
             case 'Tab':
-                if (highlightedIndex >= 0 && filteredData[highlightedIndex]) {
+                if (isActive &&
+                    highlightedIndex >= 0 &&
+                    filteredData[highlightedIndex]) {
                     handleSelect(filteredData[highlightedIndex]);
                 }
                 setIsActive(false);
@@ -12949,17 +13112,17 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
             return null;
         return spokenText(node);
     }, []);
-    const autocompleteElement = (jsxRuntime.jsxs("div", { ref: containerRef, className: combinedClasses, ...rest, children: [jsxRuntime.jsxs("div", { className: controlClasses, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: placeholder, disabled: disabled, name: name, form: form, required: required, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, role: "combobox", "aria-expanded": listOpen, "aria-controls": listOpen ? listboxId : undefined, "aria-activedescendant": activeOptionId, "aria-haspopup": "listbox", "aria-autocomplete": "list", autoComplete: "off" }), showClear && (jsxRuntime.jsx("button", { type: "button", className: iconRightClickableClass, onClick: handleClear, "aria-label": "Clear", children: jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", "aria-hidden": "true", children: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), menuOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, onScroll: handleDropdownScroll, children: [header && jsxRuntime.jsx("div", { className: dropdownHeaderClass, children: header }), listOpen ? (jsxRuntime.jsx("div", { id: listboxId, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', children: filteredData.map((item, index) => {
+    const autocompleteElement = (jsxRuntime.jsxs("div", { ref: containerRef, className: combinedClasses, ...rest, children: [jsxRuntime.jsxs("div", { className: controlClasses, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: placeholder, disabled: disabled, name: name, form: form, required: required, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, role: "combobox", "aria-expanded": listOpen, "aria-controls": listOpen ? listboxId : undefined, "aria-activedescendant": activeOptionId, "aria-haspopup": "listbox", "aria-autocomplete": "list", autoComplete: "off" }), showClear && (jsxRuntime.jsx("button", { type: "button", className: iconRightClickableClass, onClick: handleClear, "aria-label": "Clear", children: jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", "aria-hidden": "true", children: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), menuOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, onScroll: handleDropdownScroll, children: [header && jsxRuntime.jsx("div", { className: dropdownHeaderClass, children: header }), listOpen ? (jsxRuntime.jsx("div", { id: listboxId, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', onMouseDown: keepFocus, children: filteredData.map((item, index) => {
                                 const isDisabled = typeof item !== 'string' && item.disabled;
                                 const isHighlighted = index === highlightedIndex;
                                 const itemClasses = prefixedClassNames(classPrefix, 'dropdown-item', {
                                     'is-active': isHighlighted,
                                     'is-disabled': isDisabled,
                                 });
-                                return (jsxRuntime.jsx("a", { id: `${listboxId}-${index}`, "data-index": index, className: itemClasses, onClick: () => !isDisabled && handleSelect(item), onMouseEnter: () => !isDisabled && setHighlightedIndex(index), role: "option", "aria-selected": isHighlighted, "aria-disabled": isDisabled, children: itemTemplate
+                                return (jsxRuntime.jsx("a", { id: `${listboxId}-${index}`, "data-index": index, className: itemClasses, onClick: () => !isDisabled && handleSelect(item), onMouseEnter: () => !isDisabled && setHighlightedIndex(index), role: "option", "aria-selected": isHighlighted && !isDisabled, "aria-disabled": isDisabled, children: itemTemplate
                                         ? itemTemplate(item)
                                         : getDisplayValue(item) }, index));
-                            }) })) : (jsxRuntime.jsx("div", { ref: emptyRef, className: emptyItemClasses, children: empty })), footer && jsxRuntime.jsx("div", { className: dropdownFooterClass, children: footer })] }) })), jsxRuntime.jsx(StatusRegion, { items: emptyItems, describe: describeEmpty })] }));
+                            }) })) : (jsxRuntime.jsx("div", { ref: emptyRef, className: emptyItemClasses, onMouseDown: keepFocus, children: empty })), footer && jsxRuntime.jsx("div", { className: dropdownFooterClass, children: footer })] }) })), jsxRuntime.jsx(StatusRegion, { items: emptyItems, describe: describeEmpty })] }));
     if (!insideField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [autocompleteElement, messageEl] }));
     }
@@ -13054,7 +13217,10 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         const hasInput = inputValue || (openOnFocus && isActive);
         return matchesInput && notAlreadyAdded && hasInput;
     });
-    const listOpen = isActive && filteredData.length > 0;
+    // At the tag limit the input isn't rendered, so the list isn't either.
+    // Left open it would be a listbox with no combobox, offering tags past
+    // the limit (#1087).
+    const listOpen = isActive && !isMaxReached && filteredData.length > 0;
     // keepFirst: auto-highlight first item when dropdown opens
     React.useEffect(() => {
         if (keepFirst && isActive && filteredData.length > 0) {
@@ -13068,17 +13234,16 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         }
         onChange?.(newTags);
     }, [controlledValue, onChange]);
-    // Add tag
+    // Add a tag from text typed, pasted or picked from the list. Only
+    // `createTag` turns it into an object.
     const addTag = React.useCallback((value) => {
         if (disabled || readonly)
             return;
-        const tagValue = typeof value === 'string' ? value.trim() : value;
-        const displayValue = typeof tagValue === 'string' ? tagValue : getDisplayValue(tagValue);
+        const displayValue = value.trim();
         if (!displayValue)
             return;
-        // Check max tags
-        if (maxTags && tags.length >= maxTags)
-            return;
+        // No maxTags check: only the input and the list call this, neither
+        // renders at the limit, and each call adds at most one tag.
         // Check duplicates
         if (!allowDuplicates) {
             const exists = tags.some(tag => getDisplayValue(tag).toLowerCase() === displayValue.toLowerCase());
@@ -13095,7 +13260,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         if (beforeAdding && !beforeAdding(displayValue))
             return;
         // createTag transformation
-        const finalTag = createTag ? createTag(displayValue) : tagValue;
+        const finalTag = createTag ? createTag(displayValue) : displayValue;
         const newTags = [...tags, finalTag];
         updateTags(newTags);
         onAdd?.(finalTag);
@@ -13108,7 +13273,6 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         disabled,
         readonly,
         tags,
-        maxTags,
         allowDuplicates,
         allowNew,
         data,
@@ -13174,6 +13338,17 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
             setIsActive(true);
         }
     }, [openOnFocus, data.length, disabled]);
+    // Reaching the limit dismisses the list the way a click outside does, so
+    // making room later doesn't bring it back unasked. It's an effect, not a
+    // step in addTag, because a click on a suggestion also bubbles to the
+    // container, whose focus on the input reopens the list in that same
+    // event, and because a controlled value can reach the limit too.
+    React.useEffect(() => {
+        if (isMaxReached) {
+            setIsActive(false);
+            setHighlightedIndex(-1);
+        }
+    }, [isMaxReached]);
     // Handle click outside
     React.useEffect(() => {
         if (!isActive)
@@ -15132,7 +15307,15 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
             left: resolved.left,
         }
         : {};
-    const panel = (jsxRuntime.jsx("div", { ref: panelRef, id: id, role: role, "aria-modal": role === 'dialog' ? 'false' : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, tabIndex: -1, className: classNames(panelClass, className), style: style, children: children }));
+    const panel = (jsxRuntime.jsx("div", { ref: panelRef, id: id, role: role, "aria-modal": role === 'dialog' ? 'false' : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, tabIndex: -1, className: classNames(panelClass, className), style: style, 
+        // An Escape pressed in the panel is the picker's, and the listener
+        // above claims it. A Dropdown menu around the picker hears Escape in a
+        // React handler, which runs before that listener, so the panel claims
+        // it here too, where React gets to it first.
+        onKeyDown: e => {
+            if (closeOnEscape && e.key === 'Escape')
+                e.preventDefault();
+        }, children: children }));
     if (appendToBody && isBrowser) {
         return reactDom.createPortal(panel, resolveContainer());
     }
@@ -15546,7 +15729,7 @@ function useSegmentedEntry(params) {
     // any of its effects, so a focus in between is the one handed back.
     const closingRef = React.useRef(false);
     const wasOpenRef = React.useRef(isOpen);
-    React.useLayoutEffect(() => {
+    useClientLayoutEffect(() => {
         if (wasOpenRef.current && !isOpen) {
             closingRef.current = true;
             if (!value && isUntouched(text))
@@ -15576,12 +15759,12 @@ function useSegmentedEntry(params) {
         setText(formatFn(next, format, locale));
     }, [commitValue, isAllowed, formatFn, format, locale, setText]);
     // After every segment-driven change, restore the system selection on the
-    // active segment's char range. useLayoutEffect runs synchronously before
+    // active segment's char range. A layout effect runs synchronously before
     // paint so the user never sees a stray caret position. We deliberately do
     // NOT gate on document.activeElement: when openOnFocus is true the focus
     // trap moves focus into the popover, but setSelectionRange on an unfocused
     // input is well-defined and the selection becomes visible on refocus.
-    React.useLayoutEffect(() => {
+    useClientLayoutEffect(() => {
         if (activeSegmentIdx === null || !segmentMap || !inputRef.current)
             return;
         const seg = segmentMap.segments[activeSegmentIdx];