@flood-md/react 0.2.11 → 0.2.13

package/dist/waterfall-chart.js

@@ -0,0 +1,89 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import { Surface, Text, VisuallyHidden } from "./index.js";
+const number = new Intl.NumberFormat("en", { maximumSignificantDigits: 21 });
+export const WaterfallPlot = /* @__PURE__ */ forwardRef(function WaterfallPlot({ label, steps, domain, formatValue = number.format, changeLabel = "Change", totalLabel = "Total", emptyLabel = "No steps", navigationLabel = "Use arrow keys to explore steps, or Home and End to jump.", className, ...props }, ref) {
+    const instructions = useId();
+    const [cursor, setCursor] = useState(0);
+    const [hovered, setHovered] = useState();
+    const [tapped, setTapped] = useState();
+    const [focused, setFocused] = useState(false);
+    const ids = new Set();
+    let running = 0;
+    let low = 0;
+    let high = 0;
+    const bars = steps.map(step => {
+        if (!step.id.trim() || ids.has(step.id) || !step.label.trim() || !Number.isFinite(step.value)) {
+            throw new Error("Flood WaterfallChart needs unique step IDs, labels and finite values");
+        }
+        ids.add(step.id);
+        const total = step.kind === "total";
+        const start = total ? 0 : running;
+        const end = start + step.value;
+        if (!Number.isFinite(end))
+            throw new RangeError("Flood WaterfallChart running totals must be finite");
+        low = Math.min(low, start, end);
+        high = Math.max(high, start, end);
+        running = end;
+        return { ...step, start, end, total };
+    });
+    if (domain && (!Number.isFinite(domain[0]) || !Number.isFinite(domain[1]) ||
+        domain[0] >= domain[1] || domain[0] > low || domain[1] < high)) {
+        throw new RangeError("Flood WaterfallChart domain must contain zero and all running totals");
+    }
+    const [min, max] = domain ?? [low, low === high ? 1 : high];
+    const span = max - min;
+    const percent = (value) => 100 * (Number.isFinite(span)
+        ? (value - min) / span
+        : (value / 2 - min / 2) / (max / 2 - min / 2));
+    const last = bars.length - 1;
+    const active = Math.min(last, hovered ?? tapped ?? cursor);
+    const current = bars[active];
+    const inspecting = hovered !== undefined || tapped !== undefined || focused;
+    const change = current && !current.total ? `${current.value > 0 ? "+" : ""}${formatValue(current.value)}` : undefined;
+    const total = current ? formatValue(current.end) : undefined;
+    const accessible = current && [current.label, ...(change === undefined ? [] : [`${changeLabel}: ${change}`]), `${totalLabel}: ${total}`].join(", ");
+    const navigate = (event) => {
+        let next;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                next = active + 1;
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                next = active - 1;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = last;
+                break;
+            case "Escape":
+                setHovered(undefined);
+                setTapped(undefined);
+                setFocused(false);
+                return;
+            default: return;
+        }
+        event.preventDefault();
+        setHovered(undefined);
+        setTapped(undefined);
+        setFocused(true);
+        setCursor(Math.max(0, Math.min(next, last)));
+    };
+    return _jsx("div", { ...props, ref: ref, className: ["flood-waterfall-chart", className].filter(Boolean).join(" "), role: "group", "aria-label": label, children: current ? _jsxs(_Fragment, { children: [last > 0 && _jsx(VisuallyHidden, { id: instructions, children: navigationLabel }), _jsxs("div", { className: "flood-waterfall-chart__plot", dir: "ltr", role: last > 0 ? "slider" : "img", tabIndex: last > 0 ? 0 : undefined, "aria-label": last > 0 ? label : accessible, "aria-describedby": last > 0 ? instructions : undefined, "aria-valuemin": last > 0 ? 1 : undefined, "aria-valuemax": last > 0 ? bars.length : undefined, "aria-valuenow": last > 0 ? active + 1 : undefined, "aria-valuetext": last > 0 ? accessible : undefined, style: { "--flood-waterfall-columns": bars.length, "--flood-waterfall-zero": 1 - percent(0) / 100 }, onFocus: event => setFocused(event.currentTarget.matches(":focus-visible")), onBlur: () => setFocused(false), onKeyDown: navigate, onPointerLeave: () => setHovered(undefined), children: [_jsx("div", { className: "flood-waterfall-chart__columns", "aria-hidden": "true", children: bars.map((bar, index) => {
+                                const start = percent(bar.start);
+                                const end = percent(bar.end);
+                                const next = bars[index + 1];
+                                const connectBefore = index > 0 && (!bar.total || bars[index - 1].end === bar.end);
+                                const connectAfter = next && (!next.total || bar.end === next.end);
+                                return _jsxs("div", { className: "flood-waterfall-chart__column", "data-active": inspecting && index === active || undefined, onPointerEnter: event => { if (event.pointerType !== "touch")
+                                        setHovered(index); }, onPointerUp: event => { if (event.pointerType === "touch")
+                                        setTapped(previous => previous === index ? undefined : index); }, children: [_jsxs("div", { className: "flood-waterfall-chart__track", children: [connectBefore && _jsx("span", { className: "flood-waterfall-chart__connector", "data-side": "before", style: { insetBlockEnd: `${bar.total ? end : start}%` } }), connectAfter && _jsx("span", { className: "flood-waterfall-chart__connector", "data-side": "after", style: { insetBlockEnd: `${end}%` } }), _jsx("span", { className: "flood-waterfall-chart__bar", "data-kind": bar.total ? "total" : bar.value < 0 ? "decrease" : "increase", "data-flat": start === end || undefined, style: { insetBlockEnd: `${Math.min(start, end)}%`, blockSize: `${Math.abs(start - end)}%` } })] }), _jsx(Text, { className: "flood-waterfall-chart__category", size: "helper", tone: "subtle", dir: "auto", title: bar.label, children: bar.label })] }, bar.id);
+                            }) }), inspecting && _jsxs(Surface, { className: "flood-chart__tooltip flood-waterfall-chart__tooltip", elevation: "raised", padding: "2", "aria-hidden": "true", style: {
+                                "--flood-waterfall-position": `${(active + .5) / bars.length * 100}%`,
+                                "--flood-waterfall-tip-side": active >= bars.length / 2 ? -1 : 0,
+                            }, children: [_jsx(Text, { size: "helper", children: current.label }), change !== undefined && _jsxs("div", { className: "flood-waterfall-chart__reading", children: [_jsx(Text, { size: "helper", tone: "subtle", children: changeLabel }), _jsx(Text, { size: "helper", children: change })] }), _jsxs("div", { className: "flood-waterfall-chart__reading", children: [_jsx(Text, { size: "helper", tone: "subtle", children: totalLabel }), _jsx(Text, { size: "helper", children: total })] })] })] })] }) : _jsx(Text, { className: "flood-waterfall-chart__empty", size: "compact", tone: "subtle", children: emptyLabel }) });
+});

package/package.json

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