@allxsmith/bestax-bulma 5.22.0 → 5.23.0

package/dist/index.cjs

@@ -2256,10 +2256,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;
     }
@@ -2796,6 +2798,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 React.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
@@ -2819,31 +2847,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.
  *
- * 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.
+ * 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.
  *
- * @function useIsHydrated
- * @returns `true` once the hydrating render has completed, otherwise `false`.
+ * 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 useIsHydrated() {
-    return React.useSyncExternalStore(subscribeToNothing, getClientSnapshot, getServerSnapshot);
+function Portal({ children, container, disabled = false }) {
+    const hydrated = useIsHydrated();
+    if (disabled)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+    if (!hydrated)
+        return null;
+    return reactDom.createPortal(children, resolvePortalContainer(container));
 }
 
 /**
@@ -2857,7 +2903,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
@@ -2866,7 +2912,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.
  *
@@ -10926,63 +10972,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();
     React.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) {
+            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();
-                last.focus();
-            }
-            else if (!e.shiftKey && activeEl === 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';
@@ -11089,7 +11467,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,
@@ -14768,6 +15146,7 @@ exports.PanelIcon = PanelIcon;
 exports.PanelInputBlock = PanelInputBlock;
 exports.PanelTabs = PanelTabs;
 exports.Paragraph = Paragraph;
+exports.Portal = Portal;
 exports.Pre = Pre;
 exports.Progress = Progress;
 exports.Radio = Radio;
@@ -14833,6 +15212,7 @@ exports.useColorClasses = useColorClasses;
 exports.useColorStyles = useColorStyles;
 exports.useConfig = useConfig;
 exports.useFlexboxClasses = useFlexboxClasses;
+exports.useFocusTrap = useFocusTrap;
 exports.useIconLibrary = useIconLibrary;
 exports.useInsideControl = useInsideControl;
 exports.useInsideField = useInsideField;