@allxsmith/bestax-bulma 5.20.0 → 5.23.0

package/dist/index.esm.js

@@ -1683,12 +1683,12 @@ Avatar.displayName = 'Avatar';
  * prefixing the fragment's own key — otherwise a fragment sibling of a direct
  * child would collide (both ".0") and trigger duplicate-key warnings.
  */
-function flattenChildren(children, keyPrefix = '') {
+function flattenChildren$1(children, keyPrefix = '') {
     return React.Children.toArray(children).flatMap(child => {
         if (!React.isValidElement(child))
             return [];
         if (child.type === React.Fragment) {
-            return flattenChildren(child.props.children, keyPrefix + child.key);
+            return flattenChildren$1(child.props.children, keyPrefix + child.key);
         }
         const el = child;
         return [
@@ -1722,7 +1722,7 @@ const AvatarsComponent = ({ className, max, size, shape, spacing = 'md', spaced
         : undefined;
     const surplusClass = usePrefixedClassNames('is-surplus');
     const combinedClasses = classNames(avatarsClasses, bulmaHelperClasses, className);
-    const childArray = flattenChildren(children);
+    const childArray = flattenChildren$1(children);
     const maxCount = typeof max === 'number' && Number.isInteger(max) && max >= 0
         ? max
         : undefined;
@@ -2254,10 +2254,12 @@ function getActiveElementInTree(node) {
  * opener sits in. A closed shadow root cannot be entered, so focus inside one
  * reads as its host.
  *
+ * @param doc - The document to start from: the component's own, when it may
+ * render into one other than the page's (an iframe's). Defaults to `document`.
  * @returns The focused element, or `null` when the document has none.
  */
-function getDeepestActiveElement() {
-    let active = document.activeElement;
+function getDeepestActiveElement(doc = document) {
+    let active = doc.activeElement;
     while (active?.shadowRoot?.activeElement) {
         active = active.shadowRoot.activeElement;
     }
@@ -2794,6 +2796,32 @@ function useScrollLock(active) {
     }, [active]);
 }
 
+// "Are we past hydration?" as a store that never changes: React reads the
+// server snapshot both while server-rendering and while hydrating, and the
+// client snapshot from the first post-hydration render onward.
+const subscribeToNothing = () => () => { };
+const getClientSnapshot = () => true;
+const getServerSnapshot = () => false;
+/**
+ * Reports whether the component has passed hydration.
+ *
+ * Returns `false` during server rendering and during the hydrating client
+ * render, then `true` from the commit that follows. Use it to defer
+ * DOM-only behaviour (such as portalling) past hydration so the first client
+ * render matches the server markup instead of tripping hydration recovery.
+ *
+ * Only a component that hydrates ever sees `false` on the client. One that
+ * mounts later (after a route change, or in an app with no server rendering)
+ * gets `true` on its first render, so it pays for no extra render. It
+ * subscribes to nothing, so no later render flips it back.
+ *
+ * @function useIsHydrated
+ * @returns `true` once the hydrating render has completed, otherwise `false`.
+ */
+function useIsHydrated() {
+    return useSyncExternalStore(subscribeToNothing, getClientSnapshot, getServerSnapshot);
+}
+
 /**
  * Resolves a portal target: an `HTMLElement` is used directly, a non-empty
  * `string` is treated as a `document.querySelector` selector (falling back to
@@ -2817,26 +2845,49 @@ function resolvePortalContainer(container) {
     }
     return container;
 }
-
-// "Are we past hydration?" as a store that never changes: React reads the
-// server snapshot both while server-rendering and while hydrating, and the
-// client snapshot from the first post-hydration render onward.
-const subscribeToNothing = () => () => { };
-const getClientSnapshot = () => true;
-const getServerSnapshot = () => false;
 /**
- * Reports whether the component has passed hydration.
+ * Renders its children into another part of the page, `document.body` unless `container` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.
  *
- * Returns `false` during server rendering and during the hydrating client
- * render, then `true` from the commit that follows. Use it to defer
- * DOM-only behaviour (such as portalling) past hydration so the first client
- * render matches the server markup instead of tripping hydration recovery.
+ * React's server renderer can't render a portal, so `Portal` renders nothing
+ * on the server and during hydration, and mounts its children in the commit
+ * that follows. The first client render then matches the server markup. In an app
+ * without server rendering it portals on the first render.
  *
- * @function useIsHydrated
- * @returns `true` once the hydrating render has completed, otherwise `false`.
- */
-function useIsHydrated() {
-    return useSyncExternalStore(subscribeToNothing, getClientSnapshot, getServerSnapshot);
+ * React context, such as `ConfigProvider`'s class prefix, reaches the
+ * portaled children, and their React events bubble through the React tree.
+ * CSS inheritance follows the DOM instead: a scoped (non-`isRoot`) `Theme`
+ * sets its variables on a wrapper element the portaled content has left, so
+ * that content sees the page-level theme. Point `container` at an element
+ * inside the themed area to keep it.
+ *
+ * Tab order and focus follow the DOM too. Content portaled from inside a
+ * focus trap is no longer inside the trapped element, so the trap neither
+ * reaches it nor holds focus there: render nested overlays inside the
+ * trapped element, or give them a trap of their own.
+ *
+ * @function
+ * @param {PortalProps} props - Props for the Portal component.
+ * @returns The portal, the children in place when `disabled`, or nothing
+ * before hydration.
+ *
+ * @example
+ * <Portal>
+ *   <div className="box">Rendered at the end of document.body</div>
+ * </Portal>
+ *
+ * @example
+ * // Into a dedicated overlay root
+ * <Portal container="#overlays">
+ *   <CommandPalette />
+ * </Portal>
+ */
+function Portal({ children, container, disabled = false }) {
+    const hydrated = useIsHydrated();
+    if (disabled)
+        return jsx(Fragment, { children: children });
+    if (!hydrated)
+        return null;
+    return createPortal(children, resolvePortalContainer(container));
 }
 
 /**
@@ -2850,7 +2901,7 @@ const activeModalStack = [];
  * excluded because `focus()` on them is a no-op, which would leave focus
  * outside the modal.
  */
-const FOCUSABLE_SELECTOR$1 = 'button:not(:disabled), [href], input:not(:disabled):not([type="hidden"]), select:not(:disabled), textarea:not(:disabled), [tabindex]';
+const FOCUSABLE_SELECTOR = 'button:not(:disabled), [href], input:not(:disabled):not([type="hidden"]), select:not(:disabled), textarea:not(:disabled), [tabindex]';
 /**
  * The modal's tab stops, in document order. The selector alone is not the
  * tabbable set — `[href]` and `button` match regardless of `tabindex`, so an
@@ -2859,7 +2910,7 @@ const FOCUSABLE_SELECTOR$1 = 'button:not(:disabled), [href], input:not(:disabled
  * resolved value, so filtering on it drops every negative index (not just
  * `-1`) without a second selector to keep in sync.
  */
-const getTabbable = (node) => Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR$1)).filter(el => el.tabIndex >= 0);
+const getTabbable = (node) => Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR)).filter(el => el.tabIndex >= 0);
 /**
  * Modal.Background - Renders the modal background overlay.
  *
@@ -4255,6 +4306,35 @@ const Loading = ({ active = false, isFullPage = false, size, color, canCancel =
     return (jsxs("div", { className: combinedClasses, role: "alert", "aria-busy": "true", "aria-label": "Loading", ...rest, children: [jsx("div", { className: combinedOverlayClasses, onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { className: loadingContentClass, children: [indicator ? (jsx("span", { className: loadingIconCustomClass, children: indicator })) : (jsx("span", { className: combinedIconClasses })), children && jsx("div", { className: loadingTextClass, children: children }), canCancel && (jsx("button", { type: "button", className: loadingCancelClass, onClick: onCancel, "aria-label": "Cancel loading", children: "Cancel" }))] })] }));
 };
 
+// INTERNAL: deliberately not exported from src/index.ts.
+/** The major version of the React this bundle is running against. */
+const runningMajor = () => Number(React.version.split('.')[0]);
+/**
+ * The prop that makes an element inert, spelled for the React in use, or
+ * nothing when `inert` is false.
+ *
+ * Both majors must render `inert=""`, and each warns on the other's spelling
+ * and then drops the attribute. React 19 treats `inert` as a boolean and
+ * rejects the empty string. React 18 does not know the attribute, so it
+ * passes a string through and rejects `true`.
+ */
+const inertProps = (inert, major = runningMajor()) => {
+    if (!inert)
+        return {};
+    // The cast is for React 18's spelling: this package's types are React 19's,
+    // where `inert` is a boolean.
+    return (major >= 19
+        ? { inert: true }
+        : { inert: '' });
+};
+
+/**
+ * `null` outside a group. A `Collapse` also resets it to `null` for its own
+ * subtree, so a Collapse nested in an item's content keeps its own state
+ * instead of answering to its ancestor's slot in the group.
+ */
+const CollapsesItemContext = createContext(null);
+
 /**
  * The `Collapse` component provides an expandable/collapsible content panel.
  *
@@ -4269,12 +4349,9 @@ const Loading = ({ active = false, isFullPage = false, size, color, canCancel =
  * </Collapse>
  *
  * @example
- * // Controlled collapse
+ * // Controlled collapse, driven by its own trigger
  * const [isOpen, setIsOpen] = useState(false);
- * <Collapse
- *   open={isOpen}
- *   trigger={<button onClick={() => setIsOpen(!isOpen)}>Toggle</button>}
- * >
+ * <Collapse open={isOpen} onOpenChange={setIsOpen} trigger={<strong>Toggle</strong>}>
  *   <p>Content</p>
  * </Collapse>
  *
@@ -4288,14 +4365,49 @@ const Loading = ({ active = false, isFullPage = false, size, color, canCancel =
  *   <p>Content</p>
  * </Collapse>
  */
-const Collapse = ({ open: controlledOpen, defaultOpen = false, onOpen, onClose, trigger, animation = 'fade', position = 'top', ariaId, bordered, children, className, triggerClassName, contentClassName, ...props }) => {
+const Collapse = ({ open: controlledOpen, defaultOpen = false, onOpen, onClose, onOpenChange, trigger, animation = 'fade', position = 'top', ariaId, bordered, children, className, triggerClassName, contentClassName, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const contentRef = useRef(null);
-    const [height, setHeight] = useState(defaultOpen ? 'auto' : 0);
-    // Determine if controlled or uncontrolled
+    // Three possible owners of the open state, in order: the caller when `open`
+    // is set, an enclosing Collapses group, and this Collapse itself. A caller's
+    // `open` wins over the group, which is how the group leaves such an item
+    // alone.
     const isControlled = controlledOpen !== undefined;
+    const group = useContext(CollapsesItemContext);
+    const groupItem = isControlled ? null : group;
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
-    const isOpen = isControlled ? controlledOpen : internalOpen;
+    const isOpen = controlledOpen ?? groupItem?.open ?? internalOpen;
+    // A group owns the state of the items it manages, so these props do
+    // nothing there. That is easy to miss, so development says which ones and
+    // what to use instead, once per combination (the way Avatar keys its
+    // warning), and `warnOnce` keeps production silent.
+    if (groupItem) {
+        const ignored = [
+            defaultOpen && 'defaultOpen',
+            onOpen && 'onOpen',
+            onClose && 'onClose',
+        ].filter((name) => Boolean(name));
+        if (ignored.length > 0) {
+            const callbacks = ignored.filter(name => name !== 'defaultOpen');
+            warnOnce(`Collapse:ignored-in-Collapses:${ignored.join('+')}`, `[bestax-bulma] <Collapse ${ignored.join(' ')}> inside <Collapses>: ` +
+                [
+                    ignored.includes('defaultOpen') &&
+                        `defaultOpen has no effect, because the group decides which ` +
+                            `items start open. Pass the item's index in the group's ` +
+                            `defaultValue instead.`,
+                    callbacks.length > 0 &&
+                        `${callbacks.join(' and ')} never fire${callbacks.length > 1 ? '' : 's'}, ` +
+                            `because the group holds the item's open state. Use the ` +
+                            `item's onOpenChange, or the group's onChange, instead.`,
+                ]
+                    .filter(Boolean)
+                    .join(' '));
+        }
+    }
+    // Start from the resolved state rather than `defaultOpen`, so an item that
+    // mounts open through `open` or a group is not first painted (or rendered
+    // on the server) at height 0 under the slide animation.
+    const [height, setHeight] = useState(isOpen ? 'auto' : 0);
     // Generate unique ID for accessibility (useId is SSR-safe and stable across
     // renders; works in React 18 and 19).
     const generatedId = useId();
@@ -4340,19 +4452,25 @@ const Collapse = ({ open: controlledOpen, defaultOpen = false, onOpen, onClose,
         // excluded from the deps.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isOpen, animation]);
-    // Handle toggle
+    // The trigger reports in every mode, then changes only the state this
+    // Collapse owns. `onOpen`/`onClose` belong to that last case alone.
     const handleToggle = useCallback(() => {
-        if (!isControlled) {
-            const newOpen = !internalOpen;
-            setInternalOpen(newOpen);
-            if (newOpen) {
-                onOpen?.();
-            }
-            else {
-                onClose?.();
-            }
+        const next = !isOpen;
+        onOpenChange?.(next);
+        if (isControlled)
+            return;
+        if (groupItem) {
+            groupItem.setOpen(next);
+            return;
         }
-    }, [isControlled, internalOpen, onOpen, onClose]);
+        setInternalOpen(next);
+        if (next) {
+            onOpen?.();
+        }
+        else {
+            onClose?.();
+        }
+    }, [isOpen, isControlled, groupItem, onOpenChange, onOpen, onClose]);
     // Handle keyboard interaction
     const handleKeyDown = useCallback((e) => {
         if (e.key === 'Enter' || e.key === ' ') {
@@ -4393,9 +4511,99 @@ const Collapse = ({ open: controlledOpen, defaultOpen = false, onOpen, onClose,
         };
     }
     const triggerElement = (jsx("div", { className: combinedTriggerClasses, onClick: handleToggle, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, "aria-expanded": isOpen, "aria-controls": uniqueId, children: trigger }));
-    const contentElement = (jsx("div", { style: contentWrapperStyle, children: jsx("div", { ref: contentRef, id: uniqueId, className: combinedContentClasses, "aria-hidden": !isOpen, children: children }) }));
-    return (jsx("div", { className: combinedClasses, ...rest, children: position === 'bottom' ? (jsxs(Fragment, { children: [contentElement, triggerElement] })) : (jsxs(Fragment, { children: [triggerElement, contentElement] })) }));
+    const contentElement = (jsx("div", { style: contentWrapperStyle, children: jsx("div", { ref: contentRef, id: uniqueId, className: combinedContentClasses, "aria-hidden": !isOpen, ...inertProps(!isOpen), children: children }) }));
+    // The group's item context stops here: a Collapse nested in this one's
+    // content is not an item of this one's group.
+    return (jsx(CollapsesItemContext.Provider, { value: null, children: jsx("div", { className: combinedClasses, ...rest, children: position === 'bottom' ? (jsxs(Fragment, { children: [contentElement, triggerElement] })) : (jsxs(Fragment, { children: [triggerElement, contentElement] })) }) }));
+};
+
+/** Either mode's value as the list of open indexes. */
+function toIndexes(value) {
+    if (Array.isArray(value))
+        return value;
+    return typeof value === 'number' ? [value] : [];
+}
+/**
+ * Flattens Fragment children (recursively) so each item inside one gets its
+ * own index rather than sharing the fragment's. Children.toArray keys restart
+ * at ".0" inside each fragment, so those children are re-keyed with the
+ * fragment's own key as a prefix, the way Avatars does it.
+ */
+function flattenChildren(children, keyPrefix = '') {
+    return React.Children.toArray(children).flatMap(child => {
+        if (!React.isValidElement(child))
+            return [child];
+        if (child.type === React.Fragment) {
+            return flattenChildren(child.props.children, keyPrefix + child.key);
+        }
+        return [
+            keyPrefix
+                ? React.cloneElement(child, { key: keyPrefix + child.key })
+                : child,
+        ];
+    });
+}
+/**
+ * The `Collapses` component groups `Collapse` items into an accordion that keeps one item open at a time, or any number with `multiple`.
+ *
+ * @function
+ * @param {CollapsesProps} props - Props for the Collapses component.
+ * @returns {JSX.Element} The rendered group.
+ *
+ * @example
+ * // Accordion: one item open at a time, the first to start with
+ * <Collapses defaultValue={0}>
+ *   <Collapse bordered trigger={<strong>Shipping</strong>}>…</Collapse>
+ *   <Collapse bordered trigger={<strong>Returns</strong>}>…</Collapse>
+ * </Collapses>
+ *
+ * @example
+ * // Controlled, with items that open independently
+ * const [open, setOpen] = useState<number[]>([]);
+ * <Collapses multiple value={open} onChange={setOpen}>…</Collapses>
+ */
+const CollapsesComponent = ({ multiple = false, value, defaultValue, onChange, seamless = false, className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    // Controlled vs uncontrolled, as in Tabs. State is held as a list of open
+    // indexes in both modes; `multiple` only decides how a change is computed
+    // and which shape `onChange` receives.
+    const isControlled = value !== undefined;
+    const [internalOpen, setInternalOpen] = useState(() => toIndexes(defaultValue));
+    const openIndexes = isControlled ? toIndexes(value) : internalOpen;
+    // Each mode types `onChange` for its own shape, and the value built below
+    // always matches `multiple`, the union's discriminant.
+    const reportChange = onChange;
+    const setItemOpen = (index, open) => {
+        const others = openIndexes.filter(i => i !== index);
+        // Single mode keeps at most one item open, so opening one drops the rest.
+        // Ascending order, whatever order the items were opened in, so the value
+        // reads and compares the same way however the user got there.
+        const next = (open ? (multiple ? [...others, index] : [index]) : others).sort((a, b) => a - b);
+        if (!isControlled)
+            setInternalOpen(next);
+        reportChange?.(multiple ? next : (next[0] ?? null));
+    };
+    const groupClasses = usePrefixedClassNames('collapses', {
+        'is-seamless': seamless,
+    });
+    const combinedClasses = classNames(groupClasses, bulmaHelperClasses, className);
+    const items = [];
+    let index = 0;
+    for (const child of flattenChildren(children)) {
+        if (!React.isValidElement(child)) {
+            items.push(child);
+            continue;
+        }
+        const itemIndex = index;
+        index += 1;
+        items.push(jsx(CollapsesItemContext.Provider, { value: {
+                open: openIndexes.includes(itemIndex),
+                setOpen: open => setItemOpen(itemIndex, open),
+            }, children: child }, child.key));
+    }
+    return (jsx("div", { className: combinedClasses, ...rest, children: items }));
 };
+const Collapses = withSubComponents(CollapsesComponent, { Collapse }, 'Collapses');
 
 /**
  * The `Tooltip` component displays helpful information when users hover over or focus on an element.
@@ -10762,63 +10970,395 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min, max,
 };
 Calendar.displayName = 'Calendar';
 
-const FOCUSABLE_SELECTOR = [
-    'a[href]',
-    'button:not([disabled])',
-    'input:not([disabled]):not([type="hidden"])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
-    '[tabindex]:not([tabindex="-1"])',
-].join(',');
-function useFocusTrap(containerRef, active, options = {}) {
-    const { initialFocusRef, restoreFocus = true } = options;
+/**
+ * Whether `el` is editable while its parent is not, which makes it an editing
+ * host: the one tab stop an editable region gets. `contenteditable="false"`
+ * turns editing off, and a missing or unknown value inherits the parent's.
+ */
+function isEditingHost(el) {
+    const editable = (node) => {
+        const value = node.getAttribute('contenteditable')?.toLowerCase();
+        if (value === undefined)
+            return null;
+        if (value === '' || value === 'true' || value === 'plaintext-only') {
+            return true;
+        }
+        return value === 'false' ? false : null;
+    };
+    if (editable(el) !== true)
+        return false;
+    for (let node = el.parentElement; node; node = node.parentElement) {
+        const state = editable(node);
+        if (state !== null)
+            return !state;
+    }
+    return true;
+}
+/** Whether `el` is the summary of its `<details>`: the first one, not a stray. */
+const isDetailsSummary = (el) => el.parentElement?.localName === 'details' &&
+    Array.from(el.parentElement.children).find(child => child.localName === 'summary') === el;
+/**
+ * Whether the browser puts `el` in the tab order, before anything that hides
+ * or disables it. The `tabIndex` property can't answer this on its own: it
+ * can read `-1` for an editable region or an `<embed>` that Tab still visits,
+ * and `0` for a `<video>` without controls that it doesn't. So a valid
+ * `tabindex` attribute decides, and otherwise the element's kind does.
+ */
+function isTabbableKind(el) {
+    const tabindex = el.getAttribute('tabindex');
+    if (tabindex !== null && /^\s*[+-]?\d/.test(tabindex)) {
+        return el.tabIndex >= 0;
+    }
+    switch (el.localName) {
+        case 'a':
+        case 'area':
+            return el.hasAttribute('href');
+        case 'input':
+            return el.type !== 'hidden';
+        case 'button':
+        case 'select':
+        case 'textarea':
+        case 'iframe':
+        case 'embed':
+        case 'object':
+            return true;
+        case 'audio':
+        case 'video':
+            return el.hasAttribute('controls');
+        case 'summary':
+            return isDetailsSummary(el);
+        default:
+            return isEditingHost(el);
+    }
+}
+/**
+ * The node's parent in the flattened tree, the one the browser renders and
+ * tabs through: the slot it is assigned to, else its parent, else the host of
+ * the shadow root it tops, and nothing above the document. A closed shadow
+ * root hides its slots (`assignedSlot` reads `null` under one), so a child of
+ * its host goes straight to the host, whether a slot takes it or not.
+ */
+const flatParent = (node) => node.assignedSlot ??
+    node.parentElement ??
+    node.parentNode?.host ??
+    null;
+/**
+ * The element's children in the flattened tree, in the order they render: a
+ * host's shadow root content, a slot's assigned elements (or its fallback
+ * content when nothing is assigned), anything else's own children. A host
+ * whose shadow root is closed has no root to read, so its own children stand
+ * in, including any that no slot takes and that aren't rendered.
+ */
+function flatChildren(el) {
+    if (el.shadowRoot)
+        return Array.from(el.shadowRoot.children);
+    if (el.localName === 'slot') {
+        const assigned = el.assignedNodes();
+        if (assigned.length > 0) {
+            return assigned.filter((node) => node.nodeType === Node.ELEMENT_NODE);
+        }
+    }
+    return Array.from(el.children);
+}
+const isShown = (el) => !el.hasAttribute('inert') && getComputedStyle(el).display !== 'none';
+const isVisible = (el) => {
+    const { visibility } = getComputedStyle(el);
+    return visibility !== 'hidden' && visibility !== 'collapse';
+};
+/**
+ * Whether nothing from `el` up to `top` hides it: `inert`, `display: none`
+ * (not inherited, so each element is checked) or a closed `<details>` it
+ * isn't the summary of. `top` itself isn't checked, and `null` walks to the
+ * top of the page.
+ */
+function isShownUpTo(el, top) {
+    let below = null;
+    for (let node = el; node && node !== top; node = flatParent(node)) {
+        if (!isShown(node))
+            return false;
+        if (below &&
+            node.localName === 'details' &&
+            !node.hasAttribute('open') &&
+            !isDetailsSummary(below)) {
+            return false;
+        }
+        below = node;
+    }
+    return true;
+}
+/**
+ * The images that use the image map `area` belongs to. An image names its
+ * map with `usemap="#…"`, matching the map's `name` or `id`.
+ */
+function imagesUsingMapOf(area) {
+    const map = area.closest('map');
+    if (!map)
+        return [];
+    const names = [map.getAttribute('name'), map.id].filter(name => name);
+    return Array.from(area.getRootNode().querySelectorAll('img[usemap]')).filter(img => {
+        const ref = img.getAttribute('usemap');
+        return ref.startsWith('#') && names.includes(ref.slice(1));
+    });
+}
+/**
+ * Whether an image map area is shown. An area has no box of its own: the
+ * HTML rendering rules give it `display: none`, though a browser may not
+ * report that. So it counts where an image using its map is shown, as long
+ * as nothing makes it inert.
+ */
+function isAreaShown(area, container) {
+    for (let node = area; node && node !== container; node = flatParent(node)) {
+        if (node.hasAttribute('inert'))
+            return false;
+    }
+    return imagesUsingMapOf(area).some(img => isShownUpTo(img, null) && isVisible(img));
+}
+/**
+ * Whether Tab can land on `el`, one of the kinds it visits. A disabled control
+ * (including one inside a disabled `<fieldset>`), an inert subtree and
+ * anything not rendered are skipped. `visibility` is inherited, so the
+ * element's own computed value covers its ancestors.
+ */
+function isRenderedAndEnabled(el, container) {
+    if (el.matches(':disabled'))
+        return false;
+    if (el.localName === 'area')
+        return isAreaShown(el, container);
+    return isShownUpTo(el, container) && isVisible(el);
+}
+/** A radio button with a name, which shares one tab stop with its group. */
+const isGroupedRadio = (el) => el.localName === 'input' &&
+    el.type === 'radio' &&
+    el.name !== '';
+/** The flattened-tree ancestors of `node` below the container, outermost first, then `node`. */
+function flatChain(node, container) {
+    const chain = [];
+    for (let n = node; n && n !== container; n = flatParent(n)) {
+        chain.unshift(n);
+    }
+    return chain;
+}
+/**
+ * Whether `node` is inside the container in the flattened tree: in it, in a
+ * shadow root it holds, or slotted into it. A child of a closed-root host
+ * counts as inside wherever the host is, as its slot can't be seen.
+ */
+function inside(container, node) {
+    for (let n = node; n; n = flatParent(n)) {
+        if (n === container)
+            return true;
+    }
+    return false;
+}
+/**
+ * `true` when Tab reaches `b` after `a`, which is their order in the
+ * flattened tree: a shadow host comes before its shadow root's content, and
+ * slotted content comes where its slot is. A closed root's slots can't be
+ * seen, so its host's children keep their place in the light DOM. Two
+ * flattened-tree siblings are always in one DOM tree, so their document
+ * position decides between them.
+ */
+function follows(container, a, b) {
+    const chainA = flatChain(a, container);
+    const chainB = flatChain(b, container);
+    for (let i = 0; i < Math.max(chainA.length, chainB.length); i++) {
+        const [x, y] = [chainA[i], chainB[i]];
+        if (x === y)
+            continue;
+        if (!x)
+            return true;
+        if (!y)
+            return false;
+        return Boolean(x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING);
+    }
+    return false;
+}
+/**
+ * Every element of a tabbable kind under `el` in the flattened tree, depth
+ * first, which is the order Tab visits them. Under a host whose shadow root
+ * is closed, that takes in the host's own children instead, rendered or not.
+ */
+function collectCandidates(el, out = []) {
+    for (const child of flatChildren(el)) {
+        if (isTabbableKind(child))
+            out.push(child);
+        collectCandidates(child, out);
+    }
+    return out;
+}
+/**
+ * The first and last tab stops inside `container`, or `null` when there are
+ * none. Only the ends matter for wrapping, so the style checks run from each
+ * end until they find a stop rather than over every candidate.
+ *
+ * A radio group is one stop, the way the browser treats it: its checked
+ * button, or its first when none is checked. Counting every button would make
+ * the group's last one an end, and Tab from the checked one would leave.
+ */
+function findTabStops(container) {
+    const candidates = collectCandidates(container);
+    const checked = new Map();
+    const usable = (el) => {
+        let ok = checked.get(el);
+        if (ok === undefined) {
+            ok = isRenderedAndEnabled(el, container);
+            checked.set(el, ok);
+        }
+        return ok;
+    };
+    const groupStop = (radio) => {
+        const group = candidates.filter((el) => isGroupedRadio(el) &&
+            el.name === radio.name &&
+            el.form === radio.form &&
+            el.getRootNode() === radio.getRootNode());
+        return group.find(el => el.checked && usable(el)) ?? group.find(usable);
+    };
+    const isStop = (el) => usable(el) && (!isGroupedRadio(el) || groupStop(el) === el);
+    const first = candidates.find(isStop);
+    if (!first)
+        return null;
+    let last = first;
+    for (let i = candidates.length - 1; candidates[i] !== first; i--) {
+        if (isStop(candidates[i])) {
+            last = candidates[i];
+            break;
+        }
+    }
+    return {
+        first,
+        last,
+        stopFor: node => (isGroupedRadio(node) && groupStop(node)) || node,
+    };
+}
+/**
+ * The element that has focus in the container's own document (an iframe's,
+ * when it renders into one), inside open shadow roots too. Focus inside a
+ * closed one reads as its host, which the comparisons above place like any
+ * other element. Browsers fall back to <body> when nothing has
+ * focus. jsdom, where consumers run their tests, reports nothing once focus
+ * was inside a shadow root that was removed, so this falls back for it.
+ */
+const focusedElement = (doc) => getDeepestActiveElement(doc) ?? doc.body;
+/**
+ * Keeps keyboard focus inside a container while it is active: focus moves in
+ * when the trap turns on, Tab and Shift+Tab wrap between the first and last
+ * tab stops, and focus goes back where it came from when the trap turns off.
+ *
+ * Tab stops are what the browser's Tab visits, in document order: links,
+ * form controls, frames, media with controls, a `<details>` summary, editable
+ * regions, anything with `tabIndex={0}`, and the content of open shadow
+ * roots. Hidden, disabled, inert and `tabIndex={-1}` elements are skipped,
+ * and a radio group counts once. Give the container `tabIndex={-1}` so it can
+ * hold focus itself when nothing inside can. The trap listens on the
+ * container, so a trap nested inside another handles Tab first and the outer
+ * one stands aside.
+ *
+ * The trap is about Tab. If a Tab it let through still takes focus out (a
+ * browser can leave out a stop the page has, such as links when its settings
+ * say to), it sends focus back to the other end. A pointer or a script moving
+ * focus out is left alone, because pulling focus back from a click is modal
+ * behaviour, and a modal also has to block the page behind it, which `Modal`
+ * does. Content the container renders through a portal lives elsewhere in
+ * the DOM, so it is outside the trap: render nested overlays inside the
+ * container, or give them a trap of their own.
+ *
+ * The container has to be in the DOM when the trap turns on. The trap waits
+ * for hydration, so a container that only appears once the page has
+ * hydrated, the way portaled content does, still has it attach in the commit
+ * where the container appears.
+ *
+ * @function useFocusTrap
+ * @param containerRef - Ref to the element focus stays inside.
+ * @param options - When the trap is on, and where focus starts and ends.
+ *
+ * @example
+ * const panelRef = useRef<HTMLDivElement>(null);
+ * useFocusTrap(panelRef, { active: isOpen });
+ * return isOpen ? (
+ *   <div ref={panelRef} role="dialog" aria-label="Filters" tabIndex={-1}>
+ *     …
+ *   </div>
+ * ) : null;
+ */
+function useFocusTrap(containerRef, options = {}) {
+    const { active = true, initialFocusRef, restoreFocus = true } = options;
+    // Portaled content has no server-rendered counterpart, so a portaled
+    // container only exists from the commit after hydration.
+    const hydrated = useIsHydrated();
     useEffect(() => {
-        if (!active)
+        if (!active || !hydrated)
             return undefined;
         const container = containerRef.current;
         if (!container)
             return undefined;
-        const previouslyFocused = typeof document !== 'undefined'
-            ? document.activeElement
-            : null;
-        const focusInitial = () => {
-            if (initialFocusRef?.current) {
-                initialFocusRef.current.focus();
-                return;
-            }
-            const focusables = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(el => !el.hasAttribute('disabled'));
-            const target = focusables[0] ?? container;
-            target.focus();
-        };
-        focusInitial();
+        const doc = container.ownerDocument;
+        const opener = focusedElement(doc);
+        (initialFocusRef?.current ??
+            findTabStops(container)?.first ??
+            container).focus();
+        // Where focus goes if a Tab the trap let the browser handle takes it out,
+        // held until that Tab has finished moving focus.
+        let wrapTo = null;
+        let wrapTimer;
         const handleKeyDown = (e) => {
-            if (e.key !== 'Tab')
+            // A trap nested inside this one has already wrapped focus.
+            if (e.key !== 'Tab' || e.defaultPrevented)
                 return;
-            const focusables = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(el => !el.hasAttribute('disabled'));
-            if (focusables.length === 0) {
+            const stops = findTabStops(container);
+            if (!stops) {
                 e.preventDefault();
+                container.focus();
                 return;
             }
-            const first = focusables[0];
-            const last = focusables[focusables.length - 1];
-            const activeEl = document.activeElement;
-            if (e.shiftKey && activeEl === first) {
-                e.preventDefault();
-                last.focus();
-            }
-            else if (!e.shiftKey && activeEl === last) {
+            const current = stops.stopFor(focusedElement(doc));
+            // Wrap whenever the browser has no stop left in that direction inside
+            // the container. Comparing positions rather than testing `=== first`
+            // also covers focus resting on the container or on an element outside
+            // the tab order, which the browser would otherwise walk straight out of.
+            if (e.shiftKey
+                ? !follows(container, stops.first, current)
+                : !follows(container, current, stops.last)) {
                 e.preventDefault();
-                first.focus();
+                (e.shiftKey ? stops.last : stops.first).focus();
+                return;
             }
+            wrapTo = e.shiftKey ? stops.last : stops.first;
+            clearTimeout(wrapTimer);
+            wrapTimer = setTimeout(() => {
+                wrapTo = null;
+            });
+        };
+        // The browser moves focus as soon as the keydown is over, so focus that
+        // lands outside while `wrapTo` is set got there by that Tab.
+        const handleFocusIn = (e) => {
+            if (!wrapTo || inside(container, e.composedPath()[0]))
+                return;
+            const target = wrapTo;
+            wrapTo = null;
+            target.focus();
         };
         container.addEventListener('keydown', handleKeyDown);
+        doc.addEventListener('focusin', handleFocusIn, true);
         return () => {
             container.removeEventListener('keydown', handleKeyDown);
-            if (restoreFocus && previouslyFocused?.focus) {
-                previouslyFocused.focus();
+            doc.removeEventListener('focusin', handleFocusIn, true);
+            clearTimeout(wrapTimer);
+            let target = restoreFocus ? opener : null;
+            // `null` is an object too, and a caller without types can pass it.
+            if (restoreFocus && typeof restoreFocus === 'object') {
+                // Read now rather than when the trap turned on: a trigger that
+                // re-mounted in between has a new node.
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                target = restoreFocus.current;
+            }
+            // Hand focus back only while the trap still holds it: inside the
+            // container, or dropped to <body> because the container left the page.
+            const now = focusedElement(doc);
+            if (target && (now === doc.body || inside(container, now))) {
+                target.focus();
             }
         };
-    }, [active, containerRef, initialFocusRef, restoreFocus]);
+    }, [active, hydrated, containerRef, initialFocusRef, restoreFocus]);
 }
 
 const isBrowser = typeof window !== 'undefined';
@@ -10925,7 +11465,7 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
         document.addEventListener('keydown', handler);
         return () => document.removeEventListener('keydown', handler);
     }, [isOpen, closeOnEscape, onClose]);
-    useFocusTrap(panelRef, isOpen && trapFocus);
+    useFocusTrap(panelRef, { active: isOpen && trapFocus });
     const panelClass = usePrefixedClassNames('picker-popover', {
         'is-active': isOpen,
         [`is-${resolved.position}`]: true,
@@ -14128,6 +14668,33 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
     return isRoot ? (jsx(Fragment, { children: children })) : (jsx("div", { className: combinedClassName || undefined, style: style, ...rest, children: children }));
 };
 
+/**
+ * Renders its children only in the browser, after hydration, and a `fallback` until then, so content that depends on browser-only state doesn't cause a hydration mismatch.
+ *
+ * The server render and the hydrating client render both show `fallback`,
+ * which keeps them identical; the children replace it in the commit that
+ * follows. In an app without server rendering the children show on the first
+ * render.
+ *
+ * @function
+ * @param {ClientOnlyProps} props - Props for the ClientOnly component.
+ * @returns The children once hydrated, otherwise the fallback.
+ *
+ * @example
+ * // The server's time zone is not the reader's.
+ * <ClientOnly fallback={<Skeleton variant="lines" lines={1} />}>
+ *   {() => (
+ *     <p>Times are shown in {Intl.DateTimeFormat().resolvedOptions().timeZone}.</p>
+ *   )}
+ * </ClientOnly>
+ */
+function ClientOnly({ children, fallback = null }) {
+    const hydrated = useIsHydrated();
+    if (!hydrated)
+        return jsx(Fragment, { children: fallback });
+    return jsx(Fragment, { children: typeof children === 'function' ? children() : children });
+}
+
 /**
  * The `Container` component provides a responsive and flexible layout wrapper for your Bulma React UI.
  *
@@ -14474,5 +15041,5 @@ const Section = ({ size, className, children, color, bgColor, textColor, style,
     return (jsx("section", { className: sectionClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
-export { Autocomplete, Avatar, Avatars, Badge, Block, Box, Breadcrumb, Button, Buttons, Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, Code, Collapse, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loader, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, NumberInput, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, TagInput, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, mergeBulmaStyles, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useColorStyles, useConfig, useFlexboxClasses, useIconLibrary, useInsideControl, useInsideField, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validAspectRatios, validAxisOverflows, validColorShades, validColors, validCursors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFloats, validFontFamilies, validInteractions, validJustifyContents, validOverflows, validPositions, validRadii, validResponsives, validSchemeColors, validShadows, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
+export { Autocomplete, Avatar, Avatars, Badge, Block, Box, Breadcrumb, Button, Buttons, Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, ClientOnly, Code, Collapse, Collapses, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loader, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, NumberInput, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Portal, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, TagInput, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, mergeBulmaStyles, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useColorStyles, useConfig, useFlexboxClasses, useFocusTrap, useIconLibrary, useInsideControl, useInsideField, useIsHydrated, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validAspectRatios, validAxisOverflows, validColorShades, validColors, validCursors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFloats, validFontFamilies, validInteractions, validJustifyContents, validOverflows, validPositions, validRadii, validResponsives, validSchemeColors, validShadows, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
 //# sourceMappingURL=index.esm.js.map