@allxsmith/bestax-bulma 5.34.3 → 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.
+/**
+ * `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;
+
+// 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.
 /**
- * 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`).
+ * 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 activeModalStack = [];
+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;
@@ -13089,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) {
@@ -13103,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());
@@ -13130,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);
@@ -13143,7 +13273,6 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         disabled,
         readonly,
         tags,
-        maxTags,
         allowDuplicates,
         allowNew,
         data,
@@ -13209,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)
@@ -15167,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());
     }
@@ -15581,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))
@@ -15611,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];