@flood-md/react 0.2.4 → 0.2.6

package/dist/overlay-runtime.js

@@ -51,6 +51,9 @@ export function registerLayer(document, layer) {
         }
         else if (path.includes(layer.panel) || path.includes(layer.anchor()))
             return;
+        // A modal backdrop must not move focus to the document after close cleanup.
+        if (layer.modal)
+            event.preventDefault();
         (layer.outside ?? layer.close)();
     };
     const focus = (event) => {
@@ -68,24 +71,42 @@ export function registerLayer(document, layer) {
 }
 const locks = new WeakMap();
 export function lockScroll(document) {
-    const style = document.documentElement.style;
+    const root = document.documentElement, style = root.style;
     let lock = locks.get(document);
     if (!lock) {
-        const reserve = (document.defaultView?.innerWidth ?? 0) - document.documentElement.clientWidth > 0;
-        lock = { count: 0, overflow: style.getPropertyValue("overflow"), overflowPriority: style.getPropertyPriority("overflow"), gutter: style.getPropertyValue("scrollbar-gutter"), gutterPriority: style.getPropertyPriority("scrollbar-gutter") };
+        const view = document.defaultView;
+        const computed = getComputedStyle(root);
+        const rect = root.getBoundingClientRect();
+        // Chromium can include a stable thin gutter in clientWidth while excluding it
+        // from the root's actual layout box. Preserve that box, not just clientWidth.
+        const gutter = Math.max(0, (view?.innerWidth ?? root.clientWidth) - Math.min(root.clientWidth, rect.width));
+        const leftGutter = Math.min(gutter, Math.max(0, rect.left));
+        const rightGutter = gutter - leftGutter;
+        const paddingLeft = parseFloat(computed.paddingLeft) || 0;
+        const paddingRight = parseFloat(computed.paddingRight) || 0;
+        lock = { count: 0, saved: ["overflow", "scrollbar-gutter", "padding-left", "padding-right"].map(key => [key, style.getPropertyValue(key), style.getPropertyPriority(key)]) };
         locks.set(document, lock);
+        // A stable root gutter clips top-layer painting even when its rect fills the viewport.
+        // Replace the gutter with normal-flow padding while keeping fixed modal edges flush.
+        style.setProperty("scrollbar-gutter", "auto", "important");
         style.setProperty("overflow", "hidden", "important");
-        if (reserve)
-            style.setProperty("scrollbar-gutter", "stable", "important");
+        if (leftGutter)
+            style.setProperty("padding-left", `${paddingLeft + leftGutter}px`, "important");
+        if (rightGutter)
+            style.setProperty("padding-right", `${paddingRight + rightGutter}px`, "important");
     }
     lock.count++;
-    return () => { if (--lock.count !== 0)
-        return; for (const [key, value, priority] of [["overflow", lock.overflow, lock.overflowPriority], ["scrollbar-gutter", lock.gutter, lock.gutterPriority]]) {
-        if (value)
-            style.setProperty(key, value, priority);
-        else
-            style.removeProperty(key);
-    } locks.delete(document); };
+    return () => {
+        if (--lock.count !== 0)
+            return;
+        for (const [key, value, priority] of lock.saved) {
+            if (value)
+                style.setProperty(key, value, priority);
+            else
+                style.removeProperty(key);
+        }
+        locks.delete(document);
+    };
 }
 export function positionLayer(anchor, panel, side, align) {
     const view = panel.ownerDocument.defaultView;

package/dist/overlays.d.ts

@@ -3,5 +3,11 @@ type AnchoredProps = (TooltipProps | PopoverProps) & {
     kind: "tooltip" | "popover";
 };
 export declare const AnchoredOverlay: import("react").ForwardRefExoticComponent<AnchoredProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ModalOverlay: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDialogElement>>;
+interface ModalOverlayProps extends DialogProps {
+    showCloseButton?: boolean;
+    role?: "dialog" | "alertdialog";
+    scrollBody?: boolean;
+    footer?: import("react").ReactNode;
+}
+export declare const ModalOverlay: import("react").ForwardRefExoticComponent<ModalOverlayProps & import("react").RefAttributes<HTMLDialogElement>>;
 export {};

package/dist/overlays.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
-import { IconButton } from "./index.js";
+import { IconButton, ScrollArea } from "./index.js";
 import { positionLayer, registerLayer, returnFocus, lockScroll, tabbables } from "./overlay-runtime.js";
 import { mergeDescriptions } from "./field-state.js";
 const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
@@ -113,7 +113,7 @@ export const AnchoredOverlay = forwardRef(function AnchoredOverlay(allProps, for
                     leave();
                 } }, children: kind === "tooltip" ? tip.content : _jsxs(_Fragment, { children: [_jsxs("div", { className: "flood-overlay-header", children: [_jsx("h2", { id: `${id}-title`, className: "flood-overlay-title", children: pop.title }), _jsx(OverlayClose, { label: pop.closeLabel ?? "Close", onClick: close })] }), open && _jsx("div", { className: "flood-overlay-body", children: pop.children })] }) })] });
 });
-export const ModalOverlay = forwardRef(function ModalOverlay({ title, description, trigger, children, open: controlled, defaultOpen = false, onOpenChange, disabled = false, closeLabel = "Close", closeOnOutsideClick = true, initialFocusRef, id: explicitId, className, onKeyDown, "aria-describedby": describedBy, ...props }, forwardedRef) {
+export const ModalOverlay = forwardRef(function ModalOverlay({ showCloseButton = true, scrollBody = false, footer, title, description, trigger, children, open: controlled, defaultOpen = false, onOpenChange, disabled = false, closeLabel = "Close", closeOnOutsideClick = true, initialFocusRef, id: explicitId, className, onKeyDown, "aria-describedby": describedBy, ...props }, forwardedRef) {
     const [local, setLocal] = useState(defaultOpen), open = controlled ?? local;
     const dialog = useRef(null), anchor = useRef(null), generated = useId(), id = explicitId ?? `flood-dialog-${generated}`;
     const request = (next) => { if (controlled === undefined)
@@ -138,6 +138,8 @@ export const ModalOverlay = forwardRef(function ModalOverlay({ title, descriptio
             if (typeof element.showModal !== "function")
                 throw new Error("Flood Dialog requires native showModal");
             const previous = document.activeElement;
+            if (scrollBody)
+                element.dataset.drawerDirection = getComputedStyle(element).direction;
             element.showModal();
             const unlock = lockScroll(document);
             const unregister = registerLayer(document, { panel: element, anchor: () => anchor.current, modal: true, close: () => current.current.request(false), outside: () => { if (current.current.closeOnOutsideClick)
@@ -175,5 +177,5 @@ export const ModalOverlay = forwardRef(function ModalOverlay({ title, descriptio
                         event.preventDefault();
                         first.focus();
                     }
-                }, children: [_jsxs("div", { className: "flood-overlay-header", children: [_jsx("h2", { id: `${id}-title`, className: "flood-overlay-title", children: title }), _jsx(OverlayClose, { label: closeLabel, onClick: () => request(false) })] }), description && _jsx("p", { id: `${id}-description`, className: "flood-overlay-description", children: description }), open && _jsx("div", { className: "flood-overlay-body", children: children })] })] });
+                }, children: [_jsxs("div", { className: "flood-overlay-header", children: [_jsx("h2", { id: `${id}-title`, className: "flood-overlay-title", children: title }), showCloseButton && _jsx(OverlayClose, { label: closeLabel, onClick: () => request(false) })] }), description && _jsx("p", { id: `${id}-description`, className: "flood-overlay-description", children: description }), open && (scrollBody ? _jsx("div", { className: "flood-drawer__body", children: _jsx(ScrollArea, { className: "flood-overlay-body", style: { height: "100%" }, children: children }) }) : _jsx("div", { className: "flood-overlay-body", children: children })), open && footer && _jsx("div", { className: "flood-drawer__footer", children: footer })] })] });
 });

package/dist/select.js

@@ -328,6 +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) => { 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 })] });
+                } }, children: children }), open && _jsx("div", { ref: menu, popover: "manual", className: "flood-select__menu", onPointerDown: (event) => { if (event.pointerType === "mouse")
+                    event.preventDefault(); }, onClick: (event) => event.preventDefault(), children: _jsxs(ScrollArea, { ref: scrollViewport, id: menuId, role: "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : labelledBy ?? triggerId, 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/slider.d.ts

@@ -0,0 +1,7 @@
+import type { SliderProps, Fieldset } from "./index.js";
+interface Props extends SliderProps {
+    fieldsetComponent: typeof Fieldset;
+}
+/** Native range inputs keep keyboard/AT interaction; the shared rail handles pointer selection. */
+export declare const RangeControl: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLFieldSetElement>>;
+export {};

package/dist/slider.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { hasFieldContent, mergeDescriptions, resolveFieldStatus } from "./field-state.js";
+/** Native range inputs keep keyboard/AT interaction; the shared rail handles pointer selection. */
+export const RangeControl = forwardRef(function RangeControl({ fieldsetComponent: Group, label, value, defaultValue = [50], onValueChange, min = 0, max = 100, step = 1, thumbLabels, showValue = true, readOnly = false, controlSize = "md", disabled, className, name, onKeyDown, ...props }, ref) {
+    if (![min, max, step, max - min, (max - min) / step].every(Number.isFinite) || min >= max || step <= 0)
+        throw new Error("Flood Slider requires finite increasing bounds and a positive representable step");
+    if (!label.trim())
+        throw new Error("Flood Slider requires an accessible label");
+    const generatedId = useId();
+    const id = props.id ?? `flood-slider-${generatedId}`;
+    const hasError = hasFieldContent(props.error);
+    const status = resolveFieldStatus(props.status, hasError, props["aria-invalid"]);
+    const describedBy = mergeDescriptions(props["aria-describedby"], hasFieldContent(props.hint) && `${id}-hint`, hasError && `${id}-error`, !hasError && hasFieldContent(props.message) && `${id}-message`);
+    const snap = (number) => Number(Math.max(min, Math.min(min + Math.floor((max - min) / step + 1e-9) * step, min + Math.round((number - min) / step) * step)).toPrecision(14));
+    const normalize = (numbers) => {
+        if ((numbers.length !== 1 && numbers.length !== 2) || numbers.some(number => !Number.isFinite(number)) || (numbers.length === 2 && numbers[0] > numbers[1]))
+            throw new Error("Flood Slider accepts one value or an ordered pair of finite values");
+        return numbers.map(snap);
+    };
+    const initial = useRef(normalize(defaultValue));
+    const [local, setLocal] = useState(initial.current);
+    const values = normalize(value ?? local);
+    if (thumbLabels && (thumbLabels.length !== values.length || thumbLabels.some(text => !text.trim())))
+        throw new Error("Flood Slider needs one nonempty label per thumb");
+    const inputs = useRef([]);
+    const drag = useRef(null);
+    const valuesRef = useRef(values);
+    valuesRef.current = values;
+    const update = (index, next) => {
+        const before = valuesRef.current;
+        const number = Math.max(index === 1 ? before[0] : min, Math.min(index === 0 && before.length === 2 ? before[1] : max, snap(next)));
+        const result = before.map((old, position) => position === index ? number : old);
+        if (result.every((number, position) => number === before[position]))
+            return;
+        if (value === undefined) {
+            valuesRef.current = result;
+            setLocal(result);
+        }
+        onValueChange?.([...result]);
+    };
+    useEffect(() => {
+        const form = inputs.current[0]?.form;
+        if (!form || value !== undefined)
+            return;
+        const reset = (event) => queueMicrotask(() => { if (!event.defaultPrevented)
+            setLocal(initial.current); });
+        form.addEventListener("reset", reset);
+        return () => form.removeEventListener("reset", reset);
+    }, [value, props.form]);
+    const percent = (number) => 100 * (number - min) / (max - min);
+    const pointValue = (node, clientX) => {
+        const box = node.getBoundingClientRect();
+        const ratio = Math.max(0, Math.min(1, (clientX - box.left) / box.width));
+        return min + (node.ownerDocument.defaultView?.getComputedStyle(node).direction === "rtl" ? 1 - ratio : ratio) * (max - min);
+    };
+    const inert = (node) => disabled || readOnly || Boolean(node.closest("fieldset:disabled"));
+    const start = values.length === 1 ? 0 : percent(values[0]);
+    const end = percent(values[values.length - 1]);
+    return _jsxs(Group, { ...props, id: id, ref: ref, legend: label, name: name, disabled: disabled, className: ["flood-slider", `flood-control--${controlSize}`, className].filter(Boolean).join(" "), "data-readonly": readOnly || undefined, onKeyDown: event => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
+                return;
+            if (readOnly && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"].includes(event.key))
+                event.preventDefault();
+            const index = inputs.current.indexOf(event.target);
+            if (index < 0 || inert(event.currentTarget) || (event.key !== "ArrowLeft" && event.key !== "ArrowRight"))
+                return;
+            // Native WebKit does not reverse horizontal range keys in RTL.
+            const rtl = event.currentTarget.ownerDocument.defaultView?.getComputedStyle(event.currentTarget).direction === "rtl";
+            event.preventDefault();
+            update(index, values[index] + step * (event.key === (rtl ? "ArrowLeft" : "ArrowRight") ? 1 : -1));
+        }, children: [showValue && _jsx("div", { className: "flood-slider__value", "aria-hidden": "true", children: _jsx("bdi", { dir: "ltr", children: values.join(" – ") }) }), _jsxs("div", { className: "flood-slider__rail", style: { "--flood-slider-start": `${start}%`, "--flood-slider-end": `${100 - end}%` }, onPointerDown: event => {
+                    if (inputs.current.includes(event.target) || inert(event.currentTarget) || event.button !== 0)
+                        return;
+                    event.preventDefault();
+                    const next = pointValue(event.currentTarget, event.clientX);
+                    const lowerDistance = Math.abs(next - values[0]);
+                    const upperDistance = values.length === 2 ? Math.abs(next - values[1]) : Infinity;
+                    const index = upperDistance < lowerDistance || (values.length === 2 && upperDistance === lowerDistance && next >= values[0]) ? 1 : 0;
+                    drag.current = index;
+                    inputs.current[index]?.focus();
+                    event.currentTarget.setPointerCapture(event.pointerId);
+                    update(index, next);
+                }, onPointerMove: event => { if (drag.current !== null && !inert(event.currentTarget))
+                    update(drag.current, pointValue(event.currentTarget, event.clientX)); }, onPointerUp: () => { drag.current = null; }, onLostPointerCapture: () => { drag.current = null; }, onPointerCancel: () => { drag.current = null; }, children: [_jsx("span", { className: "flood-slider__track", "aria-hidden": "true", children: _jsx("span", { className: "flood-slider__fill" }) }), values.map((number, index) => _jsx("input", { ref: node => { inputs.current[index] = node; }, type: "range", className: "flood-slider__input", name: name, form: props.form, value: number, min: min, max: max, step: step, disabled: disabled, "aria-label": thumbLabels?.[index] ?? (values.length === 1 ? label : `${label}: ${index === 0 ? "minimum" : "maximum"}`), "aria-valuemin": index === 1 ? values[0] : min, "aria-valuemax": index === 0 && values.length === 2 ? values[1] : max, "aria-describedby": describedBy, "aria-readonly": readOnly || undefined, "aria-invalid": status === "error" || undefined, onPointerDown: event => { if (readOnly)
+                            event.preventDefault(); }, onChange: event => { if (!inert(event.currentTarget))
+                            update(index, event.currentTarget.valueAsNumber); } }, index))] })] });
+});

package/dist/text-inputs.d.ts

@@ -0,0 +1,9 @@
+import type { SearchInputProps, PasswordInputProps, InputGroup, IconButton, IconSlot } from "./index.js";
+type Parts = {
+    group: typeof InputGroup;
+    action: typeof IconButton;
+    icon: typeof IconSlot;
+};
+export declare const SearchField: import("react").ForwardRefExoticComponent<SearchInputProps & Parts & import("react").RefAttributes<HTMLInputElement>>;
+export declare const PasswordField: import("react").ForwardRefExoticComponent<PasswordInputProps & Parts & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/text-inputs.js

@@ -0,0 +1,45 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+const glyph = (kind, visible = false) => _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: kind === "search" ? _jsxs(_Fragment, { children: [_jsx("circle", { cx: "10.5", cy: "10.5", r: "6.5" }), _jsx("path", { d: "m16 16 4 4" })] }) : kind === "clear" ? _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) : _jsxs(_Fragment, { children: [_jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" }), visible && _jsx("path", { d: "m3 3 18 18" })] }) });
+export const SearchField = forwardRef(function SearchField({ group: Group, action: Action, icon: Icon, clearable = true, clearLabel = "Clear search", controlSize = "md", className, value, defaultValue, onChange, disabled, readOnly, ...props }, ref) {
+    const input = useRef(null);
+    useImperativeHandle(ref, () => input.current, []);
+    const [text, setText] = useState(String(defaultValue ?? ""));
+    const current = value === undefined ? text : String(value);
+    useEffect(() => {
+        const form = input.current?.form;
+        if (!form)
+            return;
+        const reset = (event) => setTimeout(() => { if (!event.defaultPrevented && input.current)
+            setText(input.current.value); }, 0);
+        form.addEventListener("reset", reset);
+        return () => form.removeEventListener("reset", reset);
+    }, [props.form]);
+    const clear = () => {
+        const node = input.current;
+        if (!node || readOnly || node.matches(":disabled"))
+            return;
+        const view = node.ownerDocument.defaultView;
+        Object.getOwnPropertyDescriptor(view.HTMLInputElement.prototype, "value").set.call(node, "");
+        node.dispatchEvent(new view.Event("input", { bubbles: true }));
+        node.focus();
+    };
+    return _jsx(Group, { ...props, ref: input, type: "search", controlSize: controlSize, className: ["flood-search-input", className].filter(Boolean).join(" "), value: value, defaultValue: defaultValue, disabled: disabled, readOnly: readOnly, onChange: event => { setText(event.currentTarget.value); onChange?.(event); }, start: _jsx(Icon, { size: controlSize, children: glyph("search") }), end: clearable && current.length > 0 && !readOnly ? _jsx(Action, { label: clearLabel, variant: "ghost", size: controlSize, disabled: disabled, onPointerDown: event => event.preventDefault(), onClick: clear, children: glyph("clear") }) : undefined });
+});
+export const PasswordField = forwardRef(function PasswordField({ group: Group, action: Action, icon: _Icon, visible, defaultVisible = false, onVisibleChange, showPasswordLabel = "Show password", hidePasswordLabel = "Hide password", controlSize = "md", className, disabled, ...props }, ref) {
+    const input = useRef(null);
+    useImperativeHandle(ref, () => input.current, []);
+    const [local, setLocal] = useState(defaultVisible);
+    const shown = visible ?? local;
+    return _jsx(Group, { ...props, ref: input, type: shown ? "text" : "password", disabled: disabled, controlSize: controlSize, className: ["flood-password-input", className].filter(Boolean).join(" "), end: _jsx(Action, { label: shown ? hidePasswordLabel : showPasswordLabel, variant: "ghost", size: controlSize, disabled: disabled, onPointerDown: event => event.preventDefault(), onClick: () => {
+                const node = input.current;
+                if (!node || node.matches(":disabled"))
+                    return;
+                const start = node.selectionStart, end = node.selectionEnd, direction = node.selectionDirection;
+                if (visible === undefined)
+                    setLocal(!shown);
+                onVisibleChange?.(!shown);
+                requestAnimationFrame(() => { if (start !== null && end !== null && node.isConnected)
+                    node.setSelectionRange(start, end, direction ?? undefined); });
+            }, children: glyph("eye", shown) }) });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flood-md/react",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "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.4"
+    "@flood-md/tokens": "0.2.6"
   },
   "publishConfig": {
     "access": "public"