@flood-md/react 0.2.12 → 0.2.13

package/dist/dumbbell-chart.js

@@ -0,0 +1,80 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import { Inline, Surface, Text, VisuallyHidden } from "./index.js";
+const number = new Intl.NumberFormat("en", { maximumSignificantDigits: 21 });
+export const DumbbellPlot = /* @__PURE__ */ forwardRef(function DumbbellPlot({ label, items, domain, beforeLabel = "Before", afterLabel = "After", missingLabel = "No data", emptyLabel = "No observations", formatValue = number.format, navigationLabel = "Use arrow keys to explore groups, or Home and End to jump.", className, ...props }, ref) {
+    const instructions = useId();
+    const [cursor, setCursor] = useState(0);
+    const [hover, setHover] = useState();
+    const [tap, setTap] = useState();
+    const [focused, setFocused] = useState(false);
+    const ids = new Set();
+    let low = Infinity;
+    let high = -Infinity;
+    for (const item of items) {
+        if (!item.id.trim() || ids.has(item.id) || !item.label.trim())
+            throw new Error("Flood DumbbellChart needs unique IDs and nonempty labels");
+        ids.add(item.id);
+        for (const value of [item.before, item.after]) {
+            if (value === null)
+                continue;
+            if (!Number.isFinite(value))
+                throw new RangeError("Flood DumbbellChart endpoints must be finite");
+            low = Math.min(low, value);
+            high = Math.max(high, value);
+        }
+    }
+    if (domain && (!Number.isFinite(domain[0]) || !Number.isFinite(domain[1]) ||
+        domain[0] >= domain[1] || domain[0] > low || domain[1] < high)) {
+        throw new RangeError("Flood DumbbellChart domain must contain all observed endpoints and have finite increasing bounds");
+    }
+    const [min, max] = domain ?? [low, high];
+    const span = max - min;
+    const position = (value) => span === 0 ? 50 : 100 * (Number.isFinite(span)
+        ? (value - min) / span : (value / 2 - min / 2) / (max / 2 - min / 2));
+    const last = items.length - 1;
+    const active = Math.min(last, hover ?? tap ?? cursor);
+    const item = items[active];
+    const inspecting = hover !== undefined || tap !== undefined || focused;
+    const values = item ? [item.before, item.after].map(value => value === null ? missingLabel : formatValue(value)) : [];
+    const valueText = item && `${item.label}, ${beforeLabel}: ${values[0]}, ${afterLabel}: ${values[1]}`;
+    const navigate = (event) => {
+        let next;
+        switch (event.key) {
+            case "ArrowDown":
+            case "ArrowRight":
+                next = active + 1;
+                break;
+            case "ArrowUp":
+            case "ArrowLeft":
+                next = active - 1;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = last;
+                break;
+            case "Escape":
+                if (inspecting)
+                    event.preventDefault();
+                setHover(undefined);
+                setTap(undefined);
+                setFocused(false);
+                return;
+            default: return;
+        }
+        event.preventDefault();
+        setHover(undefined);
+        setTap(undefined);
+        setFocused(true);
+        setCursor(Math.max(0, Math.min(last, next)));
+    };
+    return _jsx("div", { ...props, ref: ref, className: ["flood-dumbbell-chart", className].filter(Boolean).join(" "), role: "group", "aria-label": label, children: low <= high ? _jsxs(_Fragment, { children: [last > 0 && _jsx(VisuallyHidden, { id: instructions, children: navigationLabel }), _jsxs("div", { className: "flood-dumbbell-chart__plot", dir: "ltr", role: last > 0 ? "slider" : "img", tabIndex: 0, "aria-label": last > 0 ? label : `${label}. ${valueText}`, "aria-describedby": last > 0 ? instructions : undefined, "aria-valuemin": last > 0 ? 1 : undefined, "aria-valuemax": last > 0 ? items.length : undefined, "aria-valuenow": last > 0 ? active + 1 : undefined, "aria-valuetext": last > 0 ? valueText : undefined, onFocus: event => setFocused(event.currentTarget.matches(":focus-visible")), onBlur: () => setFocused(false), onKeyDown: navigate, onPointerLeave: () => setHover(undefined), children: [_jsx("div", { className: "flood-dumbbell-chart__rows", "aria-hidden": "true", children: items.map(({ id, label: name, before, after }, index) => {
+                                const start = before === null ? undefined : position(before);
+                                const end = after === null ? undefined : position(after);
+                                return _jsxs("div", { className: "flood-dumbbell-chart__row", "data-active": inspecting && index === active || undefined, onPointerEnter: event => { if (event.pointerType !== "touch")
+                                        setHover(index); }, onPointerUp: event => { if (event.pointerType === "touch")
+                                        setTap(previous => previous === index ? undefined : index); }, children: [_jsx(Text, { className: "flood-dumbbell-chart__name", size: "helper", tone: "subtle", dir: "auto", title: name, children: name }), _jsxs("div", { className: "flood-dumbbell-chart__track", children: [start !== undefined && end !== undefined && _jsx("span", { className: "flood-dumbbell-chart__connector", style: { left: `${Math.min(start, end)}%`, width: `${Math.abs(end - start)}%` } }), start !== undefined && _jsx("span", { className: "flood-dumbbell-chart__point", "data-point": "before", style: { left: `${start}%` } }), end !== undefined && _jsx("span", { className: "flood-dumbbell-chart__point", "data-point": "after", style: { left: `${end}%` } })] }), inspecting && index === active && _jsxs(Surface, { className: "flood-chart__tooltip flood-dumbbell-chart__tooltip", padding: "2", elevation: "raised", "data-side": index < items.length / 2 ? "below" : "above", style: { "--flood-dumbbell-anchor": (end ?? start ?? 50) / 100 }, children: [_jsx(Text, { size: "helper", dir: "auto", children: name }), _jsxs(Inline, { gap: "2", className: "flood-dumbbell-chart__reading", children: [_jsx(Text, { size: "helper", tone: "subtle", children: beforeLabel }), _jsx(Text, { size: "helper", children: values[0] })] }), _jsxs(Inline, { gap: "2", className: "flood-dumbbell-chart__reading", children: [_jsx(Text, { size: "helper", tone: "subtle", children: afterLabel }), _jsx(Text, { size: "helper", children: values[1] })] })] })] }, id);
+                            }) }), _jsxs("div", { className: "flood-dumbbell-chart__axis", "aria-hidden": "true", children: [_jsx(Text, { size: "helper", tone: "subtle", children: formatValue(min) }), min !== max && _jsx(Text, { size: "helper", tone: "subtle", children: formatValue(max) })] })] }), _jsxs(Inline, { gap: "4", className: "flood-dumbbell-chart__legend", "aria-hidden": "true", children: [_jsxs(Inline, { gap: "2", align: "center", children: [_jsx("span", { className: "flood-dumbbell-chart__key", "data-point": "before" }), _jsx(Text, { size: "helper", tone: "subtle", children: beforeLabel })] }), _jsxs(Inline, { gap: "2", align: "center", children: [_jsx("span", { className: "flood-dumbbell-chart__key", "data-point": "after" }), _jsx(Text, { size: "helper", tone: "subtle", children: afterLabel })] })] })] }) : _jsx(Text, { size: "compact", tone: "subtle", children: emptyLabel }) });
+});

package/dist/feedback-actions.js

@@ -1,7 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { Button, IconButton, IconSlot, Spinner, VisuallyHidden } from "./index.js";
-export const ClipboardAction = /* @__PURE__ */ forwardRef(function ClipboardAction({ value, copyLabel = "Copy", copiedLabel = "Copied", errorLabel = "Failed", resetDelay = 2000, onCopied, onCopyError, className, disabled, size = "md", variant = "subtle", "aria-label": accessibleLabel, ...props }, ref) {
+function ClipboardGlyph({ index, pending }) {
+    if (pending)
+        return _jsx(Spinner, { decorative: true });
+    return _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: index === 1 ? _jsx("path", { d: "m5 12 4 4L19 6" }) : index === 2 ? _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) : _jsxs(_Fragment, { children: [_jsx("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }), _jsx("path", { d: "M15 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h3" })] }) });
+}
+export const ClipboardAction = /* @__PURE__ */ forwardRef(function ClipboardAction({ value, iconOnly, copyLabel = "Copy", copiedLabel = "Copied", errorLabel = "Failed", resetDelay = 2000, onCopied, onCopyError, className, disabled, size = "md", variant = "subtle", "aria-label": accessibleLabel, ...props }, ref) {
     if (!Number.isFinite(resetDelay) || resetDelay < 0)
         throw new Error("Flood CopyButton resetDelay must be finite and nonnegative");
     const [phase, setPhase] = useState("idle");
@@ -9,7 +14,9 @@ export const ClipboardAction = /* @__PURE__ */ forwardRef(function ClipboardActi
     const timer = useRef(undefined);
     const alive = useRef(true);
     useEffect(() => { alive.current = true; return () => { alive.current = false; clearTimeout(timer.current); }; }, []);
-    const label = phase === "copied" ? copiedLabel : phase === "error" ? errorLabel : copyLabel;
+    const phaseIndex = phase === "copied" ? 1 : phase === "error" ? 2 : 0;
+    const labels = [copyLabel, copiedLabel, errorLabel];
+    const label = labels[phaseIndex];
     const copy = async (node) => {
         if (pending || node.matches(":disabled"))
             return;
@@ -38,7 +45,15 @@ export const ClipboardAction = /* @__PURE__ */ forwardRef(function ClipboardActi
         }
         onCopied?.();
     };
-    return _jsxs(_Fragment, { children: [_jsx(Button, { ...props, ref: ref, type: "button", size: size, variant: variant, disabled: disabled || pending, "aria-label": accessibleLabel ? (phase === "idle" ? accessibleLabel : `${label}: ${accessibleLabel}`) : label, className: ["flood-copy-button", className].filter(Boolean).join(" "), onClick: event => { void copy(event.currentTarget); }, children: _jsx("span", { className: "flood-copy-button__labels", "aria-hidden": "true", children: [copyLabel, copiedLabel, errorLabel].map((text, index) => _jsxs("span", { "data-visible": index === (phase === "copied" ? 1 : phase === "error" ? 2 : 0) || undefined, children: [_jsx(IconSlot, { size: size, children: pending ? _jsx(Spinner, { decorative: true }) : _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: index === 1 ? _jsx("path", { d: "m5 12 4 4L19 6" }) : index === 2 ? _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) : _jsxs(_Fragment, { children: [_jsx("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }), _jsx("path", { d: "M15 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h3" })] }) }) }), _jsx("span", { children: text })] }, index)) }) }), _jsx(VisuallyHidden, { role: "status", children: phase === "idle" ? "" : label })] });
+    const buttonLabel = accessibleLabel ? (phase === "idle" ? accessibleLabel : `${label}: ${accessibleLabel}`) : label;
+    const buttonProps = {
+        ...props, ref, type: "button", size, variant, disabled: disabled || pending,
+        className: ["flood-copy-button", className].filter(Boolean).join(" "),
+        onClick: (event) => { void copy(event.currentTarget); },
+    };
+    return _jsxs(_Fragment, { children: [iconOnly
+                ? _jsx(IconButton, { ...buttonProps, label: buttonLabel, title: props.title ?? buttonLabel, children: _jsx(ClipboardGlyph, { index: phaseIndex, pending: pending }) })
+                : _jsx(Button, { ...buttonProps, "aria-label": buttonLabel, children: _jsx("span", { className: "flood-copy-button__labels", "aria-hidden": "true", children: labels.map((text, index) => _jsxs("span", { "data-visible": index === phaseIndex || undefined, children: [_jsx(IconSlot, { size: size, children: _jsx(ClipboardGlyph, { index: index, pending: pending }) }), _jsx("span", { children: text })] }, index)) }) }), _jsx(VisuallyHidden, { role: "status", children: phase === "idle" ? "" : label })] });
 });
 function TimedToast({ item, closeLabel, onDismiss }) {
     const duration = item.duration ?? (item.action || item.status === "error" ? 0 : 5000);