@allxsmith/bestax-bulma 5.63.0 → 5.65.0

package/dist/esm/components/Lightbox.js

@@ -0,0 +1,756 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, forwardRef, useContext, useRef, useCallback, useEffect, useState, useMemo } from 'react';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { withSubComponents } from '../helpers/withSubComponents.js';
+import { buttonType } from '../helpers/buttonType.js';
+import { warnOnce, isDev } from '../helpers/devWarnings.js';
+import { useLatestRef } from '../helpers/useLatestRef.js';
+import { useIsHydrated } from '../helpers/useIsHydrated.js';
+import { useClientLayoutEffect } from '../helpers/useClientLayoutEffect.js';
+import { useNumberFormat } from '../helpers/localeFormat.js';
+import { visuallyHidden } from '../helpers/statusRegion.js';
+import { usePrefersReducedMotion } from '../helpers/usePrefersReducedMotion.js';
+import { useSwipe } from '../helpers/useSwipe.js';
+import { ChevronPrevIcon, ChevronNextIcon } from '../helpers/chevronIcons.js';
+import { Modal } from './Modal.js';
+import { Button } from '../elements/Button.js';
+import { Buttons } from '../elements/Buttons.js';
+import { Figure } from '../elements/Figure.js';
+import { Loader } from '../elements/Loader.js';
+
+const LightboxContext = createContext(null);
+/** Each zoom button or key multiplies or divides the zoom by this. */
+const ZOOM_STEP = 1.5;
+/** Where a double click or a double tap zooms to. */
+const DOUBLE_ZOOM = 2;
+/** How far an arrow key pans a zoomed image, in CSS pixels. */
+const PAN_STEP = 50;
+/** How long an image can take before the Loader shows, in milliseconds. */
+const LOADER_DELAY = 300;
+/** How long the status line waits after a change, so a quick run of moves is read once. */
+const STATUS_DELAY = 500;
+/** How far a finger can move and still tap, in CSS pixels. */
+const TAP_SLOP = 10;
+/** The longest gap between the two taps of a double tap, in milliseconds. */
+const DOUBLE_TAP_TIME = 300;
+/** How far apart the two taps of a double tap can land, in CSS pixels. */
+const DOUBLE_TAP_SLOP = 30;
+/** A pinch that ends this close to the fitted size snaps back to it. */
+const SNAP_ZOOM = 1.01;
+const FITTED = { zoom: 1, x: 0, y: 0, animate: true };
+/**
+ * Reads the image's resting box and the viewer's size.
+ *
+ * @function
+ * @param {HTMLElement} image - The image shown.
+ * @param {HTMLElement} root - The viewer, its `.modal` element.
+ * @returns {Geometry} The geometry the zoom and pan are kept within.
+ */
+function measure(image, root) {
+    let x = 0;
+    let y = 0;
+    for (let node = image; node && node !== root; node = node.offsetParent) {
+        x += node.offsetLeft;
+        y += node.offsetTop;
+    }
+    const box = root.getBoundingClientRect();
+    return {
+        cx: x + image.offsetWidth / 2,
+        cy: y + image.offsetHeight / 2,
+        width: image.offsetWidth,
+        height: image.offsetHeight,
+        viewWidth: root.clientWidth,
+        viewHeight: root.clientHeight,
+        left: box.left,
+        top: box.top,
+    };
+}
+const clamp$5 = (value, min, max) => Math.min(Math.max(value, min), max);
+/**
+ * An offset along one axis, kept to the image's edges: a zoomed image wider
+ * than the viewer can't leave a gap at either side, and one that still fits
+ * stays where it rests, moved only as far as it takes to keep it in view.
+ */
+function fitAxis(offset, centre, size, room, zoom) {
+    const half = (size * zoom) / 2;
+    // The offsets that put the image's start edge on the viewer's, and its end edge.
+    const start = half - centre;
+    const end = room - centre - half;
+    return half * 2 > room ? clamp$5(offset, end, start) : clamp$5(0, start, end);
+}
+/** The view, with its offsets kept to the image's edges. */
+function fitView(view, geometry) {
+    return {
+        ...view,
+        x: fitAxis(view.x, geometry.cx, geometry.width, geometry.viewWidth, view.zoom),
+        y: fitAxis(view.y, geometry.cy, geometry.height, geometry.viewHeight, view.zoom),
+    };
+}
+/**
+ * The view at another zoom, with the point under `(px, py)`, in the
+ * viewer's coordinates, still there.
+ */
+function zoomView(view, zoom, px, py, geometry, animate) {
+    if (zoom <= 1)
+        return { ...FITTED, animate };
+    const ratio = zoom / view.zoom;
+    const dx = px - geometry.cx;
+    const dy = py - geometry.cy;
+    return fitView({
+        zoom,
+        x: dx - (dx - view.x) * ratio,
+        y: dy - (dy - view.y) * ratio,
+        animate,
+    }, geometry);
+}
+/**
+ * Whether a button has an accessible name from what it holds: its own
+ * label, text, an image's alt or a label on an element inside, leaving out
+ * what's hidden from assistive technology and what's inside a `<figure>`,
+ * whose content doesn't name the button around it. A development check, so
+ * it reads the common sources rather than the whole name computation.
+ */
+function hasName(element) {
+    if ((element.getAttribute('aria-label') || '').trim() ||
+        (element.getAttribute('aria-labelledby') || '').trim() ||
+        (element.getAttribute('title') || '').trim()) {
+        return true;
+    }
+    return Array.from(element.childNodes).some(node => node instanceof Element
+        ? node.getAttribute('aria-hidden') !== 'true' &&
+            node.tagName !== 'FIGURE' &&
+            ((node instanceof HTMLImageElement && !!node.alt.trim()) ||
+                hasName(node))
+        : !!node.textContent.trim());
+}
+/** Text a key typed into a field is that field's, not the viewer's. */
+const isTextEntry = (target) => target.matches('input, textarea, select, [contenteditable]:not([contenteditable="false"])');
+const ZoomInIcon = () => (jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsx("circle", { cx: "11", cy: "11", r: "7" }), jsx("path", { d: "M21 21l-5-5M11 8v6M8 11h6" })] }));
+const ZoomOutIcon = () => (jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsx("circle", { cx: "11", cy: "11", r: "7" }), jsx("path", { d: "M21 21l-5-5M8 11h6" })] }));
+const ResetZoomIcon = () => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5" }) }));
+/**
+ * A button around a thumbnail, or a line of text, that opens the viewer at its `index`.
+ *
+ * @function
+ * @param {LightboxTriggerProps} props - Props for the trigger.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered button.
+ */
+const LightboxTrigger = forwardRef(function LightboxTrigger(triggerProps, ref) {
+    const { as: Component = 'button', index, className, children, onClick, 
+    // Kept from the helper classes, which read `color` as a text color: it
+    // belongs to a component `as`, as Button's `color="link"` does.
+    color, ...props } = triggerProps;
+    const lightbox = useContext(LightboxContext);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const triggerClass = usePrefixedClassNames('lightbox-trigger');
+    const buttonRef = useRef(null);
+    const setRefs = useCallback((node) => {
+        buttonRef.current = node;
+        if (typeof ref === 'function')
+            return ref(node);
+        if (ref) {
+            ref.current = node;
+        }
+        return undefined;
+    }, [ref]);
+    if (!lightbox) {
+        warnOnce('Lightbox.Trigger:outside', '[bestax-bulma] <Lightbox.Trigger> is outside a <Lightbox>, so it ' +
+            'opens nothing. Put it inside the Lightbox whose items it opens.');
+    }
+    // Its content is its name, and a thumbnail with `alt=""` leaves it
+    // nameless. Checked after each commit, since the content can change.
+    useEffect(() => {
+        // An `as` component that keeps its ref, or hands back a handle of its
+        // own, leaves no element to check.
+        const button = buttonRef.current;
+        if (isDev() && button instanceof Element && !hasName(button)) {
+            warnOnce('Lightbox.Trigger:no-name', '[bestax-bulma] <Lightbox.Trigger> has no accessible name. Give ' +
+                'the image inside it an alt, or the button some text or an ' +
+                'aria-label. An image inside a <figure>, which a ratio Image ' +
+                'renders, doesn\'t name a button, so give that Image as="div".');
+        }
+    });
+    return (jsx(Component, { ref: setRefs, className: classNames(triggerClass, bulmaHelperClasses, className), "aria-haspopup": "dialog", ...rest, ...(typeof Component === 'string' ? {} : { color }), ...(Component === 'button' || typeof Component !== 'string'
+            ? { type: buttonType(rest.type) }
+            : {}), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented || !lightbox)
+                return;
+            // Safari doesn't focus a button that's clicked, and the viewer hands
+            // focus back to whatever had it when it opened.
+            event.currentTarget.focus({ preventScroll: true });
+            lightbox.openAt(index);
+        }, children: children }));
+});
+LightboxTrigger.displayName = 'Lightbox.Trigger';
+/**
+ * The open viewer: a modal dialog showing one image, mounted only while the
+ * Lightbox is open, so each opening starts fitted.
+ *
+ * @function
+ * @param {LightboxViewerProps} props - The Lightbox's props and its state.
+ * @returns {JSX.Element} The rendered dialog.
+ */
+const LightboxViewer = forwardRef(function LightboxViewer({ items, index, onIndexChange, onClose, repeat, zoomable = true, maxZoom = 3, closeOnEscape = true, closeOnClickOutside = true, portal = true, ariaLabel = 'Image viewer', labels, className, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }, ref) {
+    const count = items.length;
+    const item = items[index];
+    const limit = Math.max(1, Number.isFinite(maxZoom) ? maxZoom : 3);
+    const formatNumber = useNumberFormat();
+    const number = (value) => formatNumber ? formatNumber(value) : String(value);
+    const words = {
+        close: labels?.close || 'Close',
+        previous: labels?.previous || 'Previous image',
+        next: labels?.next || 'Next image',
+        zoomIn: labels?.zoomIn || 'Zoom in',
+        zoomOut: labels?.zoomOut || 'Zoom out',
+        resetZoom: labels?.resetZoom || 'Reset zoom',
+        loading: labels?.loading || 'Loading image',
+        loadError: labels?.loadError || "This image didn't load.",
+        retry: labels?.retry || 'Retry',
+        progress: labels?.progress ??
+            ((current, total) => `Image ${number(current)} of ${number(total)}`),
+    };
+    const reducedMotion = usePrefersReducedMotion();
+    const hydrated = useIsHydrated();
+    const rootRef = useRef(null);
+    const setRoot = useCallback((node) => {
+        rootRef.current = node;
+        if (typeof ref === 'function')
+            return ref(node);
+        if (ref) {
+            ref.current = node;
+        }
+        return undefined;
+    }, [ref]);
+    const [image, setImage] = useState(null);
+    // The image shown and how it's doing. `leaving` is the image before it,
+    // kept on screen while the new one loads and then faded out over it. The
+    // fades are CSS animations, which start when the stylesheet's selector
+    // first matches, even for an image that was already loaded, where a
+    // transition wouldn't run.
+    const [shown, setShown] = useState({ index, item });
+    const [status, setStatus] = useState('loading');
+    const [attempt, setAttempt] = useState(0);
+    const [leaving, setLeaving] = useState();
+    const [view, setView] = useState(FITTED);
+    const zoomed = view.zoom > 1;
+    // The view as last set, for a gesture to go on from: pointer events can
+    // arrive faster than React renders.
+    const viewRef = useRef(view);
+    useClientLayoutEffect(() => {
+        viewRef.current = view;
+    });
+    const updateView = (next) => {
+        viewRef.current = next(viewRef.current);
+        setView(viewRef.current);
+    };
+    // A move starts the new image fitted and loading, and so does another
+    // image at the same index after `items` changes. Adjusted while rendering,
+    // React's pattern for state that follows a prop, so the old zoom or load
+    // state never paints on the new image.
+    if (shown.index !== index ||
+        shown.item.src !== item.src ||
+        shown.item.srcSet !== item.srcSet) {
+        setShown({ index, item });
+        setLeaving(reducedMotion ? undefined : status === 'loaded' ? shown.item : leaving);
+        setStatus('loading');
+        setAttempt(0);
+        setView(FITTED);
+    }
+    const fail = () => {
+        setStatus('error');
+        setLeaving(undefined);
+    };
+    // An image the server rendered loads or fails before hydration, so its
+    // event comes before React listens for it. A broken image is complete
+    // and has no size, and so is a loaded SVG with none of its own, so
+    // `decode()` tells those two apart.
+    useClientLayoutEffect(() => {
+        if (!image?.complete)
+            return undefined;
+        if (image.naturalWidth > 0) {
+            setStatus('loaded');
+            return undefined;
+        }
+        let live = true;
+        image.decode().then(() => live && setStatus('loaded'), () => {
+            if (!live)
+                return;
+            setStatus('error');
+            setLeaving(undefined);
+        });
+        return () => {
+            live = false;
+        };
+    }, [image]);
+    // The Loader shows only for an image that takes a while.
+    useEffect(() => {
+        if (status !== 'loading')
+            return undefined;
+        // Cleared by any change of status, so it only fires on a load still
+        // under way.
+        const timer = setTimeout(() => {
+            setStatus('slow');
+            setLeaving(undefined);
+        }, LOADER_DELAY);
+        return () => clearTimeout(timer);
+    }, [status, shown, attempt]);
+    // The images either side, fetched ahead so a move shows them at once.
+    // With `repeat` and two images, both sides are the one other image, so
+    // the indexes are deduplicated and it's fetched once.
+    const neighbours = Array.from(new Set([index - 1, index + 1].map(i => (repeat ? (i + count) % count : i))))
+        .filter(i => i >= 0 && i < count && i !== index)
+        .map(i => items[i]);
+    // None, one or two of them, in no particular order.
+    const [firstNeighbour, secondNeighbour] = neighbours;
+    const firstSrc = firstNeighbour?.src;
+    const firstSrcSet = firstNeighbour?.srcSet;
+    const firstSizes = firstNeighbour?.sizes;
+    const secondSrc = secondNeighbour?.src;
+    const secondSrcSet = secondNeighbour?.srcSet;
+    const secondSizes = secondNeighbour?.sizes;
+    useEffect(() => {
+        const fetchAhead = (src, srcSet, sizes) => {
+            if (!src)
+                return;
+            const img = document.createElement('img');
+            if (sizes)
+                img.sizes = sizes;
+            if (srcSet)
+                img.srcset = srcSet;
+            img.src = src;
+        };
+        fetchAhead(firstSrc, firstSrcSet, firstSizes);
+        fetchAhead(secondSrc, secondSrcSet, secondSizes);
+    }, [
+        firstSrc,
+        firstSrcSet,
+        firstSizes,
+        secondSrc,
+        secondSrcSet,
+        secondSizes,
+    ]);
+    // The status line, written a moment after it changes, so a quick run of
+    // moves is read once. It's written on opening too, which says which image
+    // the viewer opened at.
+    const progress = words.progress(index + 1, count);
+    const position = item.alt ? `${progress}: ${item.alt}` : progress;
+    // A failed image's line says which image failed too, so a move from one
+    // failed image to another still changes it.
+    const message = status === 'error' ? `${words.loadError} ${position}` : position;
+    const [said, setSaid] = useState('');
+    useEffect(() => {
+        const timer = setTimeout(() => setSaid(message), STATUS_DELAY);
+        return () => clearTimeout(timer);
+    }, [message]);
+    // ---- Moving -------------------------------------------------------------
+    const canPrev = repeat ? count > 1 : index > 0;
+    const canNext = repeat ? count > 1 : index < count - 1;
+    const go = (next) => {
+        if (next !== index)
+            onIndexChange(next);
+    };
+    const step = (delta) => {
+        if (delta < 0 ? !canPrev : !canNext)
+            return;
+        go((index + delta + count) % count);
+    };
+    const isRtl = (element) => getComputedStyle(element).direction === 'rtl';
+    const swipe = useSwipe({
+        enabled: !zoomed,
+        vertical: true,
+        onSwipe: direction => {
+            if (direction === 'down') {
+                onClose();
+            }
+            else if (direction !== 'up') {
+                // A swipe left brings the next image in from the right, and right
+                // to left the other way round.
+                const forward = isRtl(rootRef.current)
+                    ? 'right'
+                    : 'left';
+                step(direction === forward ? 1 : -1);
+            }
+        },
+    });
+    // ---- Zooming and panning --------------------------------------------------
+    // Zoom waits for the image: a loading one has no size to zoom, and a
+    // failed one isn't there.
+    const canZoom = zoomable && status === 'loaded';
+    // Only called with an image on screen: every way to zoom or pan checks
+    // `canZoom` first, and a pan needs a zoom.
+    const geometry = () => measure(image, rootRef.current);
+    /** Zooms to `zoom`, kept within the limits, about the viewer's centre. */
+    const zoomTo = (next) => {
+        if (!canZoom)
+            return;
+        const g = geometry();
+        updateView(v => zoomView(v, clamp$5(next(v.zoom), 1, limit), g.viewWidth / 2, g.viewHeight / 2, g, true));
+    };
+    const zoomIn = () => zoomTo(zoom => zoom * ZOOM_STEP);
+    const zoomOut = () => zoomTo(zoom => zoom / ZOOM_STEP);
+    const resetZoom = () => updateView(() => FITTED);
+    /** A double click or tap: fitted to 2x at the pointer, and back. */
+    const toggleZoomAt = (clientX, clientY) => {
+        const g = geometry();
+        updateView(v => v.zoom > 1
+            ? FITTED
+            : zoomView(v, Math.min(DOUBLE_ZOOM, limit), clientX - g.left, clientY - g.top, g, true));
+    };
+    const pan = (dx, dy) => {
+        const g = geometry();
+        updateView(v => fitView({ ...v, x: v.x + dx, y: v.y + dy, animate: true }, g));
+    };
+    // The wheel zooms at the pointer. A listener of its own, since React's
+    // wheel handlers are passive and can't stop the page from zooming too.
+    const handleWheel = useLatestRef((event) => {
+        const g = geometry();
+        const lines = event.deltaMode === 1 ? 16 : 1;
+        const delta = clamp$5(event.deltaY * lines, -100, 100);
+        updateView(v => zoomView(v, clamp$5(v.zoom * Math.exp(-delta / 300), 1, limit), event.clientX - g.left, event.clientY - g.top, g, false));
+    });
+    useEffect(() => {
+        if (!canZoom)
+            return undefined;
+        const target = image;
+        const onWheel = (event) => {
+            event.preventDefault();
+            handleWheel.current(event);
+        };
+        target.addEventListener('wheel', onWheel, { passive: false });
+        return () => target.removeEventListener('wheel', onWheel);
+    }, [image, canZoom, handleWheel]);
+    // Pointers on the image: one pans a zoomed image, two pinch. The first
+    // has to land on the image; the second can land anywhere in the viewer.
+    const pointersRef = useRef(new Map());
+    const gestureRef = useRef(null);
+    const tapRef = useRef(null);
+    const lastTapRef = useRef(null);
+    const lastPointerTypeRef = useRef('');
+    const startPan = (x, y) => {
+        gestureRef.current = {
+            kind: 'pan',
+            x,
+            y,
+            from: viewRef.current,
+            geometry: geometry(),
+        };
+    };
+    const handlePointerDown = (event) => {
+        onPointerDown?.(event);
+        lastPointerTypeRef.current = event.pointerType;
+        // A second finger is a pinch, never a swipe, whether or not anything
+        // zooms, and wherever in the viewer it lands.
+        if (!event.isPrimary)
+            swipe.cancel();
+        if (!canZoom || event.defaultPrevented)
+            return;
+        const onImage = event.target === image;
+        if (!onImage && pointersRef.current.size === 0)
+            return;
+        pointersRef.current.set(event.pointerId, {
+            x: event.clientX,
+            y: event.clientY,
+        });
+        // Two or more is a pinch, between the first two.
+        if (pointersRef.current.size > 1) {
+            const g = geometry();
+            const [a, b] = Array.from(pointersRef.current.values());
+            tapRef.current = null;
+            swipe.cancel();
+            gestureRef.current = {
+                kind: 'pinch',
+                distance: Math.hypot(a.x - b.x, a.y - b.y) || 1,
+                x: (a.x + b.x) / 2 - g.left,
+                y: (a.y + b.y) / 2 - g.top,
+                from: viewRef.current,
+                geometry: g,
+            };
+        }
+        else {
+            tapRef.current = { x: event.clientX, y: event.clientY };
+            if (zoomed) {
+                // So the pan follows a mouse that leaves the image.
+                event.target.setPointerCapture(event.pointerId);
+                startPan(event.clientX, event.clientY);
+            }
+        }
+    };
+    const handlePointerMove = (event) => {
+        onPointerMove?.(event);
+        const point = pointersRef.current.get(event.pointerId);
+        if (!point)
+            return;
+        point.x = event.clientX;
+        point.y = event.clientY;
+        if (tapRef.current &&
+            Math.hypot(event.clientX - tapRef.current.x, event.clientY - tapRef.current.y) > TAP_SLOP) {
+            tapRef.current = null;
+        }
+        const current = gestureRef.current;
+        if (current?.kind === 'pinch') {
+            const [a, b] = Array.from(pointersRef.current.values());
+            const g = current.geometry;
+            const zoom = clamp$5((current.from.zoom * Math.hypot(a.x - b.x, a.y - b.y)) /
+                current.distance, 1, limit);
+            // The point of the image under the pinch's start stays between the
+            // fingers, so they can pan as they pinch.
+            const midX = (a.x + b.x) / 2 - g.left;
+            const midY = (a.y + b.y) / 2 - g.top;
+            const imageX = (current.x - g.cx - current.from.x) / current.from.zoom;
+            const imageY = (current.y - g.cy - current.from.y) / current.from.zoom;
+            updateView(() => fitView({
+                zoom,
+                x: midX - g.cx - imageX * zoom,
+                y: midY - g.cy - imageY * zoom,
+                animate: false,
+            }, g));
+        }
+        else if (current) {
+            updateView(() => fitView({
+                ...current.from,
+                x: current.from.x + event.clientX - current.x,
+                y: current.from.y + event.clientY - current.y,
+                animate: false,
+            }, current.geometry));
+        }
+    };
+    const handlePointerEnd = (event) => {
+        if (!pointersRef.current.delete(event.pointerId))
+            return;
+        const wasPinch = gestureRef.current?.kind === 'pinch';
+        gestureRef.current = null;
+        if (wasPinch) {
+            if (viewRef.current.zoom < SNAP_ZOOM) {
+                updateView(() => FITTED);
+            }
+            else {
+                // A finger left down after a pinch carries on as a pan.
+                const [point] = Array.from(pointersRef.current.values());
+                startPan(point.x, point.y);
+            }
+        }
+        // Two quick taps in the same place zoom, the touch screen's double click.
+        if (event.type === 'pointerup' &&
+            event.pointerType === 'touch' &&
+            tapRef.current) {
+            const previous = lastTapRef.current;
+            if (previous &&
+                event.timeStamp - previous.time < DOUBLE_TAP_TIME &&
+                Math.hypot(event.clientX - previous.x, event.clientY - previous.y) <
+                    DOUBLE_TAP_SLOP) {
+                lastTapRef.current = null;
+                toggleZoomAt(event.clientX, event.clientY);
+            }
+            else {
+                lastTapRef.current = {
+                    x: event.clientX,
+                    y: event.clientY,
+                    time: event.timeStamp,
+                };
+            }
+        }
+        tapRef.current = null;
+    };
+    // ---- Keys -----------------------------------------------------------------
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey ||
+            // A key from content React portals elsewhere, such as a popover's,
+            // is that content's.
+            !event.currentTarget.contains(event.target) ||
+            isTextEntry(event.target)) {
+            return;
+        }
+        const forward = isRtl(event.currentTarget) ? -1 : 1;
+        switch (event.key) {
+            case 'ArrowLeft':
+                if (zoomed)
+                    pan(PAN_STEP, 0);
+                else
+                    step(forward === 1 ? -1 : 1);
+                break;
+            case 'ArrowRight':
+                if (zoomed)
+                    pan(-PAN_STEP, 0);
+                else
+                    step(forward === 1 ? 1 : -1);
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                if (!zoomed)
+                    return;
+                pan(0, event.key === 'ArrowUp' ? PAN_STEP : -PAN_STEP);
+                break;
+            case 'Home':
+                go(0);
+                break;
+            case 'End':
+                go(count - 1);
+                break;
+            case '+':
+            case '=':
+            case '-':
+            case '0':
+                if (!canZoom)
+                    return;
+                if (event.key === '0')
+                    resetZoom();
+                else if (event.key === '-')
+                    zoomOut();
+                else
+                    zoomIn();
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    };
+    // ---- Loading ----------------------------------------------------------------
+    const retry = () => {
+        setAttempt(n => n + 1);
+        setStatus('loading');
+        // Cleared, so a Retry that fails again is announced again.
+        setSaid('');
+        // The Retry button goes with the error, so focus waits on the dialog.
+        rootRef.current.focus();
+    };
+    // ---- Rendering --------------------------------------------------------------
+    const rootClass = usePrefixedClassNames('lightbox', {
+        'is-zoomed': zoomed,
+    });
+    const toolbarClass = usePrefixedClassNames('lightbox-toolbar');
+    const progressClass = usePrefixedClassNames('lightbox-progress');
+    const figureClass = usePrefixedClassNames('lightbox-figure');
+    const imageClass = usePrefixedClassNames('lightbox-image');
+    const loadingClass = usePrefixedClassNames('is-loading');
+    const leavingClass = usePrefixedClassNames('lightbox-image', 'is-leaving');
+    const captionClass = usePrefixedClassNames('lightbox-caption');
+    const startsSwipe = (target) => !target.closest(`button, a, input, select, textarea, .${captionClass}`);
+    const errorClass = usePrefixedClassNames('lightbox-error');
+    const previousClass = usePrefixedClassNames('lightbox-arrow', 'is-prev');
+    const nextClass = usePrefixedClassNames('lightbox-arrow', 'is-next');
+    const imageStyle = zoomed
+        ? {
+            transform: `translate(${view.x}px, ${view.y}px) scale(${view.zoom})`,
+            transition: view.animate ? undefined : 'none',
+        }
+        : view.animate
+            ? undefined
+            : { transition: 'none' };
+    const figureStyle = swipe.isSwiping
+        ? {
+            // A swipe up doesn't go anywhere, so the image doesn't follow it.
+            transform: `translate(${swipe.offsetX}px, ${Math.max(0, swipe.offsetY)}px)`,
+            transition: 'none',
+        }
+        : undefined;
+    return (jsxs(Modal, { ref: setRoot, isActive: true, onClose: onClose, closeOnEscape: closeOnEscape, portal: portal, className: classNames(rootClass, className), "aria-label": ariaLabel, ...props, onKeyDown: handleKeyDown, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: event => {
+            onPointerUp?.(event);
+            handlePointerEnd(event);
+        }, onPointerCancel: event => {
+            onPointerCancel?.(event);
+            handlePointerEnd(event);
+        }, children: [jsx(Modal.Background, { onClick: closeOnClickOutside ? onClose : undefined }), jsx(Modal.Close, { variant: "floating", size: "large", "aria-label": words.close }), jsxs("div", { className: toolbarClass, children: [count > 1 && (jsx("bdi", { className: progressClass, "aria-hidden": "true", children: `${number(index + 1)} / ${number(count)}` })), zoomable && (jsxs(Buttons, { children: [jsx(Button, { type: "button", "aria-label": words.zoomOut, "aria-disabled": !zoomed || undefined, onClick: zoomOut, children: jsx(ZoomOutIcon, {}) }), jsx(Button, { type: "button", "aria-label": words.zoomIn, "aria-disabled": !canZoom || view.zoom >= limit || undefined, onClick: zoomIn, children: jsx(ZoomInIcon, {}) }), jsx(Button, { type: "button", "aria-label": words.resetZoom, "aria-disabled": !zoomed || undefined, onClick: resetZoom, children: jsx(ResetZoomIcon, {}) })] }))] }), jsx(Modal.Content, { children: jsxs(Figure, { className: figureClass, style: figureStyle, ...swipe.handlers, onMouseDown: event => {
+                        if (startsSwipe(event.target))
+                            swipe.handlers.onMouseDown(event);
+                    }, onTouchStart: event => {
+                        // A second finger is a pinch, not a swipe.
+                        if (event.touches.length > 1)
+                            swipe.cancel();
+                        else if (startsSwipe(event.target)) {
+                            swipe.handlers.onTouchStart(event);
+                        }
+                    }, children: [status !== 'error' && (jsx("img", { ref: setImage, className: classNames(imageClass, hydrated && status !== 'loaded' && loadingClass), src: item.src, srcSet: item.srcSet, sizes: item.sizes, alt: item.alt, draggable: false, style: imageStyle, onLoad: () => setStatus('loaded'), onError: fail, onDoubleClick: event => {
+                                // A touch screen's double tap is handled as it lands.
+                                if (canZoom && lastPointerTypeRef.current !== 'touch') {
+                                    toggleZoomAt(event.clientX, event.clientY);
+                                }
+                            } }, `${index}-${item.src}-${item.srcSet}-${attempt}`)), leaving && (jsx("img", { className: leavingClass, src: leaving.src, srcSet: leaving.srcSet, sizes: leaving.sizes, alt: "", "aria-hidden": "true", draggable: false, onAnimationEnd: () => setLeaving(undefined) })), status === 'slow' && jsx(Loader, { ariaLabel: words.loading }), status === 'error' && (jsxs("div", { className: errorClass, children: [jsx("p", { children: words.loadError }), item.alt && jsx("p", { children: item.alt }), jsx(Button, { type: "button", onClick: retry, children: words.retry })] })), item.caption ? (jsx(Figure.Caption, { className: captionClass, children: item.caption })) : null] }) }), count > 1 && (jsxs(Fragment, { children: [jsx(Button, { type: "button", className: previousClass, "aria-label": words.previous, "aria-disabled": !canPrev || undefined, onClick: () => step(-1), children: jsx(ChevronPrevIcon, {}) }), jsx(Button, { type: "button", className: nextClass, "aria-label": words.next, "aria-disabled": !canNext || undefined, onClick: () => step(1), children: jsx(ChevronNextIcon, {}) })] })), jsx("div", { role: "status", "aria-live": "polite", style: visuallyHidden, children: said })] }));
+});
+/**
+ * The `Lightbox` component shows a set of images one at a time in a modal viewer, with previous and next, a counter, captions and zoom, opened from the `Lightbox.Trigger` buttons you place.
+ *
+ * It renders its children where it stands, with no wrapper, and the
+ * viewer only while it's open, into a portal by default. The viewer is a
+ * `Modal`: focus moves to its close button, Tab stays inside, Escape and a
+ * click on the background close it, and focus goes back to the trigger.
+ *
+ * @function
+ * @param {LightboxProps} props - Props for the Lightbox component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the viewer's `.modal` element, `null` while it's closed.
+ * @returns {JSX.Element} The children, and the viewer while it's open.
+ *
+ * @example
+ * <Lightbox items={photos}>
+ *   {photos.map((photo, i) => (
+ *     <Lightbox.Trigger key={photo.src} index={i}>
+ *       <Image as="div" src={photo.src} alt={photo.alt} size="4by3" />
+ *     </Lightbox.Trigger>
+ *   ))}
+ * </Lightbox>
+ */
+const LightboxRoot = forwardRef(({ items, children, open: controlledOpen, defaultOpen = false, onOpenChange, value: controlledValue, defaultValue = 0, onChange, repeat = true, ...props }, ref) => {
+    const [ownOpen, setOwnOpen] = useState(defaultOpen);
+    const open = controlledOpen ?? ownOpen;
+    const [ownValue, setOwnValue] = useState(defaultValue);
+    const count = items.length;
+    if (items.some(item => typeof item.alt !== 'string')) {
+        warnOnce('Lightbox:no-alt', '[bestax-bulma] <Lightbox> has an item with no alt. In a viewer the ' +
+            'image is the content, so give each one a text alternative.');
+    }
+    /** An index as one of the images: rounded, then held to the ends or wrapped. */
+    const fit = (value) => {
+        const whole = Number.isFinite(value) ? Math.trunc(value) : 0;
+        return repeat
+            ? ((whole % count) + count) % count
+            : clamp$5(whole, 0, count - 1);
+    };
+    const index = fit(controlledValue ?? ownValue);
+    const setOpen = (next) => {
+        if (controlledOpen === undefined)
+            setOwnOpen(next);
+        onOpenChange?.(next);
+    };
+    const setValue = (next) => {
+        if (controlledValue === undefined)
+            setOwnValue(next);
+        onChange?.(next);
+    };
+    // Read when a trigger is pressed, so the context stays the same object
+    // and the triggers don't re-render with every change here.
+    const openAt = useLatestRef((at) => {
+        if (!count)
+            return;
+        setValue(fit(at));
+        if (!open)
+            setOpen(true);
+    });
+    // When the images run out while it's open, it closes the way a user's
+    // close does, so an uncontrolled viewer doesn't open again by itself when
+    // they return. Only on the drop to none, so a viewer that opens before its
+    // images arrive (a deep link, or `defaultOpen` over data still loading)
+    // stays open for them.
+    const closeEmpty = useLatestRef(() => setOpen(false));
+    const countRef = useRef(count);
+    useEffect(() => {
+        const had = countRef.current;
+        countRef.current = count;
+        if (open && had > 0 && count === 0)
+            closeEmpty.current();
+    }, [open, count, closeEmpty]);
+    const context = useMemo(() => ({ openAt: at => openAt.current(at) }), [openAt]);
+    return (jsxs(LightboxContext.Provider, { value: context, children: [children, open && count > 0 && (jsx(LightboxViewer, { ...props, ref: ref, items: items, repeat: repeat, index: index, onIndexChange: setValue, onClose: () => setOpen(false) }))] }));
+});
+LightboxRoot.displayName = 'Lightbox';
+const Lightbox = withSubComponents(LightboxRoot, { Trigger: LightboxTrigger }, 'Lightbox');
+
+export { Lightbox, LightboxTrigger };
+//# sourceMappingURL=Lightbox.js.map