@flood-md/react 0.2.3 → 0.2.4

package/dist/select.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { resolveFieldStatus } from "./field-state.js";
 import { Children, Fragment, forwardRef, isValidElement, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
-import { OverlayScrollArea } from "./scroll-area.js";
+import { ScrollArea } from "./index.js";
+import { positionLayer, registerLayer, returnFocus } from "./overlay-runtime.js";
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const text = (children) => Children.toArray(children).map((child) => typeof child === "string" || typeof child === "number" ? String(child) : isValidElement(child) ? text(child.props.children) : "").join("");
 function initialChoices(children, group, groupDisabled = false, groupHidden = false) {
@@ -28,8 +29,9 @@ export const SingleSelect = forwardRef(function SingleSelect({ children, value,
     const [choices, setChoices] = useState(() => initialChoices(children));
     const [selected, setSelected] = useState(() => String(defaultValue ?? initialChoices(children).find((choice) => !choice.disabled && !choice.hidden)?.value ?? ""));
     const [open, setOpen] = useState(false), [active, setActive] = useState(-1);
+    const activeIndex = useRef(active);
+    activeIndex.current = active;
     const [validation, setValidation] = useState("");
-    const [position, setPosition] = useState({ left: 0, top: 0, width: 0, maxHeight: 0, viewportHeight: 0 });
     const controlled = value !== undefined;
     const currentValue = controlled ? String(value) : selected;
     const current = useRef({ controlled, value: currentValue });
@@ -152,54 +154,101 @@ export const SingleSelect = forwardRef(function SingleSelect({ children, value,
             }
         }
     }
+    function revealOption(index) {
+        const option = menu.current?.querySelector(`[data-option-index="${index}"]`), viewport = scrollViewport.current;
+        if (!option || !viewport)
+            return;
+        const item = option.getBoundingClientRect(), bounds = viewport.getBoundingClientRect();
+        if (item.top < bounds.top)
+            viewport.scrollTop -= bounds.top - item.top;
+        else if (item.bottom > bounds.bottom)
+            viewport.scrollTop += item.bottom - bounds.bottom;
+    }
     useBrowserLayoutEffect(() => {
         if (!open || !menu.current || !trigger.current)
             return;
-        const popup = menu.current, button = trigger.current;
-        if (typeof popup.showPopover === "function" && !popup.matches(":popover-open"))
+        const popup = menu.current, button = trigger.current, document = popup.ownerDocument, view = document.defaultView;
+        let alive = true, frame = 0, lastViewportHeight = -1, unregister = () => { };
+        const assign = (element, property, value) => {
+            if (element.style.getPropertyValue(property) !== value)
+                element.style.setProperty(property, value);
+        };
+        const update = () => {
+            if (!alive)
+                return;
+            if (!button.isConnected || !button.getClientRects().length) {
+                setOpen(false);
+                return;
+            }
+            const rect = button.getBoundingClientRect(), visual = view.visualViewport;
+            const viewportTop = visual?.offsetTop ?? 0, viewportWidth = visual?.width ?? view.innerWidth, viewportHeight = visual?.height ?? view.innerHeight;
+            const rootSize = parseFloat(view.getComputedStyle(document.documentElement).fontSize);
+            const length = (name) => { const raw = view.getComputedStyle(button).getPropertyValue(name).trim(); return parseFloat(raw) * (raw.endsWith("rem") ? rootSize : 1); };
+            const gap = length("--flood-sys-space-2") || 0;
+            const below = Math.max(0, viewportTop + viewportHeight - rect.bottom - gap * 2), above = Math.max(0, rect.top - viewportTop - gap * 2);
+            const maxHeight = Math.min(length("--flood-sys-control-md-height") * 8, Math.max(below, above));
+            assign(popup, "width", `${Math.min(rect.width, Math.max(0, viewportWidth - gap * 2))}px`);
+            assign(popup, "max-height", `${maxHeight}px`);
+            // The shared positioner reads column-gap as its placement gap. On this
+            // block listbox it does not add layout space between options.
+            assign(popup, "column-gap", "var(--flood-sys-space-2)");
+            const css = view.getComputedStyle(popup);
+            const inset = parseFloat(css.paddingTop) + parseFloat(css.paddingBottom) + parseFloat(css.borderTopWidth) + parseFloat(css.borderBottomWidth);
+            const optionHeight = Math.max(0, maxHeight - inset);
+            if (scrollViewport.current)
+                assign(scrollViewport.current, "max-height", `${optionHeight}px`);
+            positionLayer(button, popup, "bottom", "start");
+            if (optionHeight !== lastViewportHeight) {
+                lastViewportHeight = optionHeight;
+                revealOption(activeIndex.current);
+            }
+            frame = view.requestAnimationFrame(update);
+        };
+        const start = () => {
+            if (!alive || !button.isConnected)
+                return;
+            const parent = button.closest("dialog");
+            if (parent && !parent.open) {
+                frame = view.requestAnimationFrame(start);
+                return;
+            }
+            if (typeof popup.showPopover !== "function")
+                throw new Error("Flood Select requires the native Popover API");
+            popup.style.visibility = "hidden";
             popup.showPopover();
-        const rect = button.getBoundingClientRect();
-        const rootSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        const length = (name) => { const raw = getComputedStyle(button).getPropertyValue(name).trim(); return parseFloat(raw) * (raw.endsWith("rem") ? rootSize : 1); };
-        const gap = length("--flood-sys-space-2") || 0;
-        const below = Math.max(0, innerHeight - rect.bottom - gap * 2), above = Math.max(0, rect.top - gap * 2);
-        const maxHeight = Math.min(length("--flood-sys-control-md-height") * 8, Math.max(below, above));
-        const width = Math.min(rect.width, Math.max(0, innerWidth - gap * 2));
-        popup.style.width = `${width}px`;
-        popup.style.maxHeight = `${maxHeight}px`;
-        const popupStyle = getComputedStyle(popup);
-        const inset = parseFloat(popupStyle.paddingTop) + parseFloat(popupStyle.paddingBottom) + parseFloat(popupStyle.borderTopWidth) + parseFloat(popupStyle.borderBottomWidth);
-        const viewportHeight = Math.max(0, maxHeight - inset);
-        if (scrollViewport.current)
-            scrollViewport.current.style.maxHeight = `${viewportHeight}px`;
-        const height = popup.getBoundingClientRect().height;
-        const top = below >= height || below >= above ? rect.bottom + gap : Math.max(gap, rect.top - gap - height);
-        setPosition({ left: Math.max(gap, Math.min(rect.left, innerWidth - gap - width)), top, width, maxHeight, viewportHeight });
-    }, [open, choices]);
+            update();
+            unregister = registerLayer(document, {
+                panel: popup,
+                // Native callbacks are mirrored on the hidden select inside this span.
+                // Those synthetic focus events belong to this control, not outside it.
+                anchor: () => trigger.current?.parentElement ?? trigger.current,
+                close: () => setOpen(false),
+            });
+        };
+        const toggle = (event) => {
+            if (alive && event.newState === "closed" && !popup.matches(":popover-open"))
+                setOpen(false);
+        };
+        popup.addEventListener("toggle", toggle);
+        start();
+        return () => {
+            alive = false;
+            view.cancelAnimationFrame(frame);
+            unregister();
+            popup.removeEventListener("toggle", toggle);
+            returnFocus(popup, trigger.current);
+            if (popup.matches(":popover-open"))
+                popup.hidePopover();
+        };
+    }, [open]);
     useEffect(() => {
         if (!open || (choices[active] && enabled(choices[active])))
             return;
         const selectedIndex = choices.findIndex((choice) => choice.value === currentValue && enabled(choice));
         setActive(selectedIndex >= 0 ? selectedIndex : choices.findIndex(enabled));
     }, [choices, open, active, currentValue]);
-    useEffect(() => {
-        if (!open)
-            return;
-        menu.current?.querySelector(`[data-option-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
-    }, [open, active]);
-    useEffect(() => {
-        if (!open)
-            return;
-        const outside = (event) => { if (event.target instanceof Node && !trigger.current?.contains(event.target) && !menu.current?.contains(event.target))
-            setOpen(false); };
-        const scroll = (event) => { if (event.target instanceof Node && menu.current?.contains(event.target))
-            return; setOpen(false); };
-        const resize = () => setOpen(false);
-        document.addEventListener("pointerdown", outside, true);
-        document.addEventListener("scroll", scroll, true);
-        window.addEventListener("resize", resize);
-        return () => { document.removeEventListener("pointerdown", outside, true); document.removeEventListener("scroll", scroll, true); window.removeEventListener("resize", resize); };
-    }, [open]);
+    useEffect(() => { if (open)
+        revealOption(active); }, [open, active]);
     const displayed = choices.find((choice) => choice.value === currentValue)?.label ?? "Select an option";
     const descriptions = [describedBy, validation && validationId].filter(Boolean).join(" ") || undefined;
     const visibleAttributes = Object.fromEntries(Object.entries(nativeProps).filter(([key]) => key.startsWith("data-") || key.startsWith("aria-")));
@@ -214,14 +263,13 @@ export const SingleSelect = forwardRef(function SingleSelect({ children, value,
         else
             groups.push({ label: choice.group, items: [{ choice, index }] });
     });
-    const renderOption = ({ choice, index }) => _jsxs("div", { id: `${menuId}-${index}`, role: "option", "aria-selected": choice.value === currentValue, "aria-disabled": choice.disabled || undefined, className: "flood-select__option", "data-active": index === active || undefined, "data-option-index": index, onPointerDown: (event) => event.preventDefault(), onPointerMove: () => { if (enabled(choice))
-            setActive(index); }, onClick: () => { if (enabled(choice)) {
-            commit(index);
-            trigger.current?.focus();
-        } }, children: [_jsx("span", { children: choice.label }), _jsx("span", { className: "flood-select__selected", "aria-hidden": "true", children: choice.value === currentValue ? "✓" : "" })] }, `${index}-${choice.value}`);
+    const renderOption = ({ choice, index }) => _jsxs("div", { id: `${menuId}-${index}`, role: "option", "aria-selected": choice.value === currentValue, "aria-disabled": choice.disabled || undefined, className: "flood-select__option", "data-active": index === active || undefined, "data-option-index": index, onPointerDown: (event) => { if (event.pointerType === "mouse")
+            event.preventDefault(); }, onPointerMove: () => { if (enabled(choice))
+            setActive(index); }, onClick: () => { if (enabled(choice))
+            commit(index); }, children: [_jsx("span", { children: choice.label }), _jsx("span", { className: "flood-select__selected", "aria-hidden": "true", children: choice.value === currentValue ? "✓" : "" })] }, `${index}-${choice.value}`);
     return _jsxs("span", { className: `flood-select flood-select--custom flood-control--${controlSize}`, dir: nativeProps.dir, lang: nativeProps.lang, hidden: nativeProps.hidden, children: [_jsx("button", { ...visibleAttributes, ref: trigger, id: triggerId, type: "button", role: "combobox", disabled: disabled, tabIndex: nativeProps.tabIndex, accessKey: nativeProps.accessKey, dir: nativeProps.dir, lang: nativeProps.lang, hidden: nativeProps.hidden, className: ["flood-input flood-select__control", `flood-control--${controlSize}`, className].filter(Boolean).join(" "), style: style, title: title, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": descriptions, "data-status": resolveFieldStatus(status, invalid || Boolean(validation), ariaInvalid), "aria-invalid": invalid || status === "error" || ariaInvalid || Boolean(validation) || undefined, "aria-required": required || undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": menuId, "aria-activedescendant": open && active >= 0 && choices[active] && !choices[active].hidden ? `${menuId}-${active}` : undefined, onFocus: (event) => { if (onFocus)
                     mirror(new FocusEvent("focusin", { bubbles: true, relatedTarget: event.relatedTarget })); }, onBlur: (event) => { if (onBlur)
-                    mirror(new FocusEvent("focusout", { bubbles: true, relatedTarget: event.relatedTarget })); setOpen(false); }, onClick: () => { if (onClick && !mirror(new MouseEvent("click", { bubbles: true, cancelable: true })))
+                    mirror(new FocusEvent("focusout", { bubbles: true, relatedTarget: event.relatedTarget })); }, onClick: () => { if (onClick && !mirror(new MouseEvent("click", { bubbles: true, cancelable: true })))
                     return; if (open)
                     setOpen(false);
                 else
@@ -280,5 +328,6 @@ export const SingleSelect = forwardRef(function SingleSelect({ children, value,
                 onKeyDown: (event) => { onKeyDown?.(event); event.stopPropagation(); }, onKeyUp: onKeyUp, onClick: onClick, onInvalid: (event) => { onInvalid?.(event); const prevented = event.defaultPrevented; event.preventDefault(); if (!prevented) {
                     setValidation(event.currentTarget.validationMessage);
                     trigger.current?.focus();
-                } }, children: children }), open && _jsx("div", { ref: menu, id: menuId, role: "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : labelledBy ?? triggerId, popover: "manual", className: "flood-select__menu", onPointerDown: (event) => event.preventDefault(), onClick: (event) => event.preventDefault(), style: { left: position.left, top: position.top, width: position.width, maxHeight: position.maxHeight || undefined }, children: _jsxs(OverlayScrollArea, { ref: scrollViewport, orientation: "vertical", tabIndex: -1, className: "flood-select__viewport", style: { maxHeight: position.viewportHeight || undefined }, children: [!choices.some((choice) => !choice.hidden) && _jsx("div", { className: "flood-select__empty", children: "No options" }), groups.map((group, index) => group.label ? _jsxs("div", { role: "group", "aria-label": group.label, children: [_jsx("div", { className: "flood-select__group", "aria-hidden": "true", children: group.label }), group.items.map(renderOption)] }, index) : _jsx(Fragment, { children: group.items.map(renderOption) }, index))] }) }), validation && _jsx("span", { className: "flood-select__validation", id: validationId, role: "alert", children: validation })] });
+                } }, children: children }), open && _jsx("div", { ref: menu, id: menuId, role: "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : labelledBy ?? triggerId, popover: "manual", className: "flood-select__menu", onPointerDown: (event) => { if (event.pointerType === "mouse")
+                    event.preventDefault(); }, onClick: (event) => event.preventDefault(), children: _jsxs(ScrollArea, { ref: scrollViewport, orientation: "vertical", tabIndex: -1, className: "flood-select__viewport", children: [!choices.some((choice) => !choice.hidden) && _jsx("div", { className: "flood-select__empty", children: "No options" }), groups.map((group, index) => group.label ? _jsxs("div", { role: "group", "aria-label": group.label, children: [_jsx("div", { className: "flood-select__group", "aria-hidden": "true", children: group.label }), group.items.map(renderOption)] }, index) : _jsx(Fragment, { children: group.items.map(renderOption) }, index))] }) }), validation && _jsx("span", { className: "flood-select__validation", id: validationId, role: "alert", children: validation })] });
 });

package/dist/styles.css

@@ -1,6 +1,15 @@
 @import "@flood-md/tokens/tokens.css";
 @import "./foundations.css";
 
+/* A named loading indicator; buttons opt into decorative presentation. */
+.flood-loading { --flood-loading-size: 1.25rem; display: inline-flex; position: relative; flex: none; vertical-align: middle; inline-size: var(--flood-loading-size); block-size: var(--flood-loading-size); }
+.flood-loading[data-size="sm"] { --flood-loading-size: 1rem; }
+.flood-loading[data-size="lg"] { --flood-loading-size: 1.5rem; }
+.flood-loading > .flood-spinner { display: block; box-sizing: border-box; width: 100%; height: 100%; }
+.flood-root .flood-loading .flood-spinner { inline-size: 100%; block-size: 100%; }
+.flood-root .flood-button .flood-loading { --flood-loading-size: var(--flood-control-icon); }
+.flood-loading[hidden] { display: none; }
+
 :where(.flood-button, .flood-input, .flood-choice, .flood-field, .flood-link) {
   box-sizing: border-box;
   font-family: var(--flood-font-sans);

package/dist/toolbar.d.ts

@@ -0,0 +1,2 @@
+import type { ToolbarProps } from "./index.js";
+export declare const RovingToolbar: import("react").ForwardRefExoticComponent<ToolbarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/toolbar.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const selector = 'button:not([role]),button[role="button"],a[href]:not([role]),a[href][role="link"]';
+const independent = '[role="menu"],[role="tablist"],[role="radiogroup"],[role="listbox"],[role="combobox"],.flood-toggle-group';
+export const RovingToolbar = forwardRef(function RovingToolbar({ label, orientation = "horizontal", loop = true, className, onKeyDown, onKeyDownCapture, onFocus, ...props }, ref) {
+    const root = useRef(null), current = useRef(null), within = useRef(false);
+    const refresh = useRef(() => []);
+    useImperativeHandle(ref, () => root.current, []);
+    useBrowserLayoutEffect(() => {
+        const element = root.current, document = element.ownerDocument, view = document.defaultView;
+        const original = new Map();
+        let alive = true;
+        const restore = (node) => { const value = original.get(node); if (value == null)
+            node.removeAttribute("tabindex");
+        else
+            node.setAttribute("tabindex", value); };
+        const sync = () => {
+            if (!alive)
+                return [];
+            const owned = Array.from(element.querySelectorAll(selector)).filter(node => node.closest('[role="toolbar"]') === element && !node.closest(independent));
+            const active = document.activeElement;
+            const hadFocus = active === element || original.has(active) || (active === document.body && within.current);
+            for (const node of original.keys())
+                if (!owned.includes(node)) {
+                    restore(node);
+                    original.delete(node);
+                }
+            const enabled = owned.filter(node => !node.matches(':disabled,[aria-disabled="true"]') && !node.closest('[hidden],[inert]') && node.getClientRects().length > 0 && getComputedStyle(node).visibility !== "hidden");
+            const entry = enabled.includes(active) ? active : enabled.includes(current.current) ? current.current : enabled[0] ?? null;
+            current.current = entry;
+            for (const node of owned) {
+                if (!original.has(node))
+                    original.set(node, node.getAttribute("tabindex"));
+                const value = node === entry ? "0" : "-1";
+                if (node.getAttribute("tabindex") !== value)
+                    node.setAttribute("tabindex", value);
+            }
+            const value = entry ? "-1" : "0";
+            if (element.getAttribute("tabindex") !== value)
+                element.setAttribute("tabindex", value);
+            if (hadFocus && active !== entry && !enabled.includes(active) && element.getClientRects().length)
+                (entry ?? element).focus({ preventScroll: true });
+            return enabled;
+        };
+        refresh.current = sync;
+        sync();
+        const observer = new MutationObserver(records => { if (records.some(record => !(record.target instanceof Element) || !record.target.closest(independent)))
+            sync(); });
+        observer.observe(element, { subtree: true, childList: true, attributes: true, attributeFilter: ["disabled", "aria-disabled", "hidden", "inert", "style", "class", "tabindex", "href", "role"] });
+        const resize = typeof ResizeObserver === "function" ? new ResizeObserver(() => sync()) : undefined;
+        resize?.observe(element);
+        const focus = (event) => { within.current = element.contains(event.target); };
+        document.addEventListener("focusin", focus);
+        view.addEventListener("resize", sync);
+        return () => { alive = false; observer.disconnect(); resize?.disconnect(); document.removeEventListener("focusin", focus); view.removeEventListener("resize", sync); for (const node of original.keys())
+            restore(node); refresh.current = () => []; };
+    }, []);
+    const move = (event) => {
+        const controls = refresh.current(), index = controls.indexOf(event.target);
+        if (index < 0 || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
+            return;
+        const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+        const nextKey = orientation === "vertical" ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight", previousKey = orientation === "vertical" ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+        const step = event.key === nextKey ? 1 : event.key === previousKey ? -1 : 0;
+        const wanted = event.key === "Home" ? 0 : event.key === "End" ? controls.length - 1 : step ? index + step : -1;
+        if (wanted < 0 && !step)
+            return;
+        const next = loop ? (wanted + controls.length) % controls.length : Math.max(0, Math.min(controls.length - 1, wanted));
+        event.preventDefault();
+        current.current = controls[next];
+        controls[next].focus({ preventScroll: true });
+        controls[next].scrollIntoView({ block: "nearest", inline: "nearest" });
+        refresh.current();
+    };
+    return _jsx("div", { ...props, ref: root, role: "toolbar", "aria-label": label, "aria-orientation": orientation, tabIndex: -1, "data-orientation": orientation, className: ["flood-toolbar", className].filter(Boolean).join(" "), onFocus: event => { onFocus?.(event); if (event.defaultPrevented)
+            return; within.current = true; refresh.current(); }, onKeyDownCapture: event => { onKeyDownCapture?.(event); if (!event.defaultPrevented && orientation === "vertical" && event.target.getAttribute("aria-haspopup") === "menu" && ["ArrowUp", "ArrowDown"].includes(event.key))
+            move(event); }, onKeyDown: event => { onKeyDown?.(event); if (!event.defaultPrevented)
+            move(event); } });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flood-md/react",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "type": "module",
   "description": "Original Flood components for React and Next.js.",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "dependencies": {
-    "@flood-md/tokens": "0.2.3"
+    "@flood-md/tokens": "0.2.4"
   },
   "publishConfig": {
     "access": "public"