@eifi1/ui-kit 0.51.6 → 0.52.0

package/dist/components/treemap.js

@@ -1,37 +1,40 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
-import { Treemap as RechartsTreemap } from "recharts";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+import { Treemap as RechartsTreemap, useChartHeight, useChartWidth } from "recharts";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
-import { PALETTE_HEX, PALETTE_SIZE, textOn } from "../theme/chart-palette.js";
-import { resolveChartColor, useChartEdge } from "./chart-edge.js";
+import { CHART_ROLES, PALETTE_HEX, PALETTE_SIZE, lerpHex, textOn } from "../theme/chart-palette.js";
+import { resolveChartColor, useChartEdge, useEdgesInForce } from "./chart-edge.js";
 import { parseHex } from "../theme/color.js";
-import { dirOf } from "../lib/direction.js";
+import { dirOf, rovingTarget } from "../lib/direction.js";
+import { shareFormat } from "../lib/share-format.js";
 import { cn } from "../lib/cn.js";
 import { useTextSize } from "../theme/text-size.js";
 import { chartHeightProps } from "./chart-height.js";
 import { formatWithMinus } from "../lib/minus.js";
-function subscribeContrast(onChange) {
-  if (typeof MutationObserver === "undefined" || typeof document === "undefined") return () => {
-  };
-  const observer = new MutationObserver(onChange);
-  observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-contrast"] });
-  return () => observer.disconnect();
-}
-const readMoreContrast = () => typeof document !== "undefined" && document.documentElement.getAttribute("data-contrast") === "more";
-function useTileEdges(edges) {
-  const more = useSyncExternalStore(subscribeContrast, readMoreContrast, () => false);
-  return edges === "auto" ? more ? "contrast" : "uniform" : edges;
-}
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { DEFAULT_TREEMAP_LABELS } from "./treemap-labels.js";
+import { groupBody, layoutTreemap } from "./treemap-layout.js";
 const CHART_TOKENS = PALETTE_SIZE;
 function readChartTokens() {
   const root = document.documentElement;
   const fallback = root.classList.contains("dark") ? PALETTE_HEX.dark : PALETTE_HEX.light;
   const style = getComputedStyle(root);
-  return Array.from({ length: CHART_TOKENS }, (_, i) => {
+  const ramp = Array.from({ length: CHART_TOKENS }, (_, i) => {
     const v = style.getPropertyValue(`--chart-${i + 1}`).trim();
     return parseHex(v) ? v : fallback[i];
   }).join(",");
+  const card = style.getPropertyValue("--bg-surface").trim();
+  return `${ramp}|${parseHex(card) ? card : ""}`;
 }
 function subscribeChartTokens(onChange) {
   const observer = new MutationObserver(onChange);
@@ -41,10 +44,13 @@ function subscribeChartTokens(onChange) {
   });
   return () => observer.disconnect();
 }
-const SERVER_TOKENS = PALETTE_HEX.light.join(",");
+const SERVER_TOKENS = `${PALETTE_HEX.light.join(",")}|`;
 function useChartTokenHex() {
   const joined = useSyncExternalStore(subscribeChartTokens, readChartTokens, () => SERVER_TOKENS);
-  return joined.split(",");
+  return useMemo(() => {
+    const [ramp = "", card = ""] = joined.split("|");
+    return { ramp: ramp.split(","), card: card || null };
+  }, [joined]);
 }
 const CHART_TOKEN_REF = /^var\(\s*--chart-(\d+)\s*\)$/;
 function measurableFill(fill, tokens) {
@@ -55,6 +61,7 @@ function measurableFill(fill, tokens) {
   if (typeof document === "undefined") return null;
   return resolveChartColor(fill, getComputedStyle(document.documentElement));
 }
+const TreemapTiles = createContext(null);
 const LABEL_FONT_SIZE = 12;
 const NOTE_FONT_SIZE = 11;
 function fitLabel(name, boxWidth, fontSize) {
@@ -62,7 +69,32 @@ function fitLabel(name, boxWidth, fontSize) {
   if (max < 3) return null;
   return name.length <= max ? name : `${name.slice(0, max - 1).trimEnd()}\u2026`;
 }
-function TreemapCell({
+const haloOf = (halo) => ({
+  stroke: halo,
+  strokeWidth: 2.5,
+  strokeLinejoin: "round",
+  paintOrder: "stroke"
+});
+const BAND_INK = { fill: "var(--text-primary)", stroke: "none" };
+function TreemapCell(props) {
+  const map = useContext(TreemapTiles);
+  return map ? /* @__PURE__ */ jsx(MapTile, { ...props, map }) : /* @__PURE__ */ jsx(StandaloneTile, { ...props });
+}
+function MapTile(props) {
+  const width = useChartWidth();
+  const height = useChartHeight();
+  const { scale } = useTextSize();
+  const place = props.path !== void 0 && width && height ? props.map.layout?.(width, height, scale).get(props.path) : void 0;
+  return /* @__PURE__ */ jsx(Tile, { ...props, place });
+}
+function StandaloneTile(props) {
+  const tokens = useChartTokenHex().ramp;
+  const edgeFor = useChartEdge();
+  const edges = useEdgesInForce(props.edges ?? "auto");
+  const map = useMemo(() => ({ tokens, edgeFor, edges }), [tokens, edgeFor, edges]);
+  return /* @__PURE__ */ jsx(Tile, { ...props, map });
+}
+function Tile({
   depth,
   x = 0,
   y = 0,
@@ -73,48 +105,66 @@ function TreemapCell({
   labelColor,
   id,
   onNodeClick,
+  onGroupClick,
+  groups,
+  path,
+  children,
   redactNames,
   nodeNote,
   dir = "ltr",
-  edges: edgesProp = "auto"
+  map,
+  place
 }) {
-  const tokenHex = useChartTokenHex();
   const { scale } = useTextSize();
-  const edgeFor = useChartEdge();
-  const edges = useTileEdges(edgesProp);
+  const { tokens: tokenHex, edgeFor, edges, keys } = map;
   if (!depth) return null;
-  const px = Math.round(x);
-  const py = Math.round(y);
-  const pw = Math.round(width);
-  const ph = Math.round(height);
+  const box = place?.box ?? { x, y, width, height };
+  const px = Math.round(box.x);
+  const py = Math.round(box.y);
+  const pw = Math.round(box.width);
+  const ph = Math.round(box.height);
+  const isGroup = children != null && children.length > 0;
+  const group = !isGroup ? void 0 : place?.body ? { banded: place.banded ?? false, body: place.body } : groupBody({ x: px, y: py, width: pw, height: ph }, scale);
   const tileFill = fill ?? "var(--chart-1)";
   const measured = measurableFill(tileFill, tokenHex);
   const ink = labelColor ?? (measured ? textOn(measured) : "currentColor");
-  const edge = edges === "contrast" && measured ? edgeFor(measured) : void 0;
+  const edge = edges !== "contrast" ? void 0 : group ? CHART_ROLES.outline : measured ? edgeFor(measured) : void 0;
   const halo = measured ? tileFill : "none";
   const labelSize = LABEL_FONT_SIZE * scale;
   const noteSize = NOTE_FONT_SIZE * scale;
-  const label = pw >= 44 * scale && ph >= 20 * scale ? fitLabel(name ?? "", pw, labelSize) : null;
-  const rawNote = id != null && nodeNote ? nodeNote(id) : void 0;
+  const roomForName = group ? group.banded : pw >= 44 * scale && ph >= 20 * scale;
+  const label = roomForName ? fitLabel(name ?? "", pw, labelSize) : null;
+  const rawNote = !group && id != null && nodeNote ? nodeNote(id) : void 0;
   const note = label != null && rawNote != null && ph >= 36 * scale ? fitLabel(rawNote, pw, noteSize) : null;
   const textX = dir === "rtl" ? px + pw - 6 : px + 6;
-  const activate = id != null && onNodeClick ? () => onNodeClick(id, name ?? "") : void 0;
-  const onKeyDown = activate ? (e) => {
-    if (e.key !== "Enter" && e.key !== " ") return;
+  const click = group ? onGroupClick : onNodeClick;
+  const activate = id != null && click ? () => groups && groups.length > 0 ? click(id, name ?? "", groups) : click(id, name ?? "") : void 0;
+  const roving = path != null && keys ? keys : void 0;
+  const focusable = roving !== void 0 || activate !== void 0;
+  const onKeyDown = focusable ? (e) => {
+    if (roving?.move(path, e)) {
+      e.preventDefault();
+      return;
+    }
+    if (!activate || e.key !== "Enter" && e.key !== " ") return;
     e.preventDefault();
     activate();
   } : void 0;
   return /* @__PURE__ */ jsxs(
     "g",
     {
+      ref: roving ? refFor(roving.register, path) : void 0,
       onClick: activate,
       onKeyDown,
-      role: activate ? "button" : void 0,
-      tabIndex: activate ? 0 : void 0,
-      "aria-label": activate ? name : void 0,
-      "data-private": activate && redactNames ? "" : void 0,
+      onFocus: roving ? () => roving.onFocus(path) : void 0,
+      onMouseEnter: map.hover ? () => map.hover({ x: px, y: py, width: pw, height: ph }) : void 0,
+      role: activate ? "button" : roving ? "img" : void 0,
+      tabIndex: roving ? -1 : activate ? 0 : void 0,
+      "aria-label": focusable ? roving?.name(path) ?? name : void 0,
+      "data-private": focusable && redactNames ? "" : void 0,
+      "data-group": group ? "" : void 0,
       cursor: activate ? "pointer" : void 0,
-      className: activate ? "outline-none [&:focus-visible>rect]:stroke-[var(--brand)]" : void 0,
+      className: focusable ? "outline-none [&:focus-visible>rect]:stroke-[var(--brand)]" : void 0,
       children: [
         /* @__PURE__ */ jsx(
           "rect",
@@ -123,7 +173,7 @@ function TreemapCell({
             y: py,
             width: pw,
             height: ph,
-            fill: tileFill,
+            fill: group ? "var(--bg-surface-2)" : tileFill,
             stroke: edges === "contrast" ? "var(--bg-surface)" : "var(--bg-page)",
             strokeWidth: 2,
             rx: 3
@@ -149,13 +199,9 @@ function TreemapCell({
           {
             "data-private": redactNames ? "" : void 0,
             x: textX,
-            y: py + 15 * scale,
+            y: py + (group ? 14 : 15) * scale,
             direction: dir,
-            fill: ink,
-            stroke: halo,
-            strokeWidth: 2.5,
-            strokeLinejoin: "round",
-            paintOrder: "stroke",
+            ...group ? BAND_INK : { fill: ink, ...haloOf(halo) },
             fontSize: labelSize,
             fontWeight: 600,
             style: { pointerEvents: "none" },
@@ -170,10 +216,7 @@ function TreemapCell({
             direction: dir,
             fill: ink,
             fillOpacity: 0.85,
-            stroke: halo,
-            strokeWidth: 2.5,
-            strokeLinejoin: "round",
-            paintOrder: "stroke",
+            ...haloOf(halo),
             fontSize: noteSize,
             fontWeight: 500,
             style: { pointerEvents: "none" },
@@ -188,73 +231,257 @@ const TREEMAP_CONFIG = {};
 function RedactedTooltipContent(props) {
   return /* @__PURE__ */ jsx("div", { "data-private": true, children: /* @__PURE__ */ jsx(ChartTooltipContent, { ...props }) });
 }
-const DEFAULT_NUMBER = new Intl.NumberFormat();
+function createAnchor() {
+  let at = null;
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    read: () => at,
+    subscribe: (onChange) => {
+      listeners.add(onChange);
+      return () => listeners.delete(onChange);
+    },
+    set: (box) => {
+      if (at && at.x === box.x && at.y === box.y && at.width === box.width && at.height === box.height) return;
+      at = box;
+      listeners.forEach((onChange) => onChange());
+    }
+  };
+}
+function TreemapTooltip({ content, anchor }) {
+  const at = useSyncExternalStore(anchor.subscribe, anchor.read, anchor.read);
+  const width = useChartWidth() ?? 0;
+  const height = useChartHeight() ?? 0;
+  if (!at) return /* @__PURE__ */ jsx(ChartTooltip, { content });
+  const cx = at.x + at.width / 2;
+  const cy = at.y + at.height / 2;
+  const left = cx > width / 2;
+  const up = cy > height / 2;
+  return /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content,
+      position: { x: cx + (left ? -10 : 10), y: cy + (up ? -10 : 10) },
+      wrapperStyle: { translate: `${left ? "-100%" : "0"} ${up ? "-100%" : "0"}` }
+    }
+  );
+}
+function mapNodes(data, ramp, maxTiles, shaded) {
+  let left = maxTiles == null ? Infinity : Number.isNaN(maxTiles) ? 0 : Math.floor(maxTiles);
+  const walk = (list, groups, paint) => list.flatMap((d, idx) => {
+    const fill = d.fill ?? paint?.fill ?? ramp[idx % ramp.length];
+    const labelColor = d.labelColor ?? (d.fill === void 0 ? paint?.labelColor : void 0);
+    const shade = d.shade ?? paint?.shade;
+    if (d.children && d.children.length > 0) {
+      const children = walk(d.children, [...groups, d.id], { fill, labelColor, shade });
+      if (children.length === 0) return [];
+      const size = children.reduce((acc, c) => acc + c.size, 0);
+      return [{ id: d.id, name: d.name, size, fill, groups, path: pathOf(groups, d.id), children }];
+    }
+    if (!(Number.isFinite(d.value) && d.value > 0) || left <= 0) return [];
+    left -= 1;
+    const drawn = shaded(fill, shade);
+    const ink = d.labelColor ?? (drawn === fill ? labelColor : void 0);
+    return [
+      { id: d.id, name: d.name, size: d.value, fill: drawn, labelColor: ink, groups, path: pathOf(groups, d.id) }
+    ];
+  });
+  return walk(data, [], void 0);
+}
+const LAYOUTS = /* @__PURE__ */ new WeakMap();
+function layoutFor(nodes, width, height, scale) {
+  const key = `${width}x${height}@${scale}`;
+  const last = LAYOUTS.get(nodes);
+  if (last?.key === key) return last.placed;
+  const placed = layoutTreemap(nodes, width, height, scale);
+  LAYOUTS.set(nodes, { key, placed });
+  return placed;
+}
+const REFS = /* @__PURE__ */ new WeakMap();
+function refFor(register, path) {
+  let byPath = REFS.get(register);
+  if (!byPath) {
+    byPath = /* @__PURE__ */ new Map();
+    REFS.set(register, byPath);
+  }
+  let ref = byPath.get(path);
+  if (!ref) {
+    ref = (element) => register(path, element);
+    byPath.set(path, ref);
+  }
+  return ref;
+}
+const pathOf = (groups, id) => JSON.stringify([...groups, id]);
+function depthFirst(nodes) {
+  return nodes.flatMap((n) => [n, ...n.children ? depthFirst(n.children) : []]);
+}
 function Treemap({
   data,
   valueFormatter,
   height = "20rem",
   onNodeClick,
+  onGroupClick,
   redactNames = false,
   nodeNote,
   maxTiles,
   colors,
   edges = "auto",
+  description,
+  labels: labelsProp,
   style,
   ...rest
 }) {
-  const tokenHex = useChartTokenHex();
+  const { ramp: tokenHex, card } = useChartTokenHex();
+  const edgeFor = useChartEdge();
+  const edgesInForce = useEdgesInForce(edges);
+  const labels = useKitLabels("treemap", DEFAULT_TREEMAP_LABELS, labelsProp);
+  const locale = useKitLocale();
+  const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+  const shareText = useMemo(() => shareFormat(locale), [locale]);
   const rootRef = useRef(null);
   const [dir, setDir] = useState("ltr");
   useLayoutEffect(() => {
     setDir(dirOf(rootRef.current));
   }, [data]);
   const ramp = colors && colors.length > 0 ? colors : tokenHex;
-  const nodes = data.map((d, idx) => ({
-    id: d.id,
-    name: d.name,
-    size: d.value,
-    fill: d.fill ?? ramp[idx % ramp.length],
-    // recharts hands each node's fields to its cell; a field left out of this map
-    // never reaches `TreemapCell` (0.8.0 shipped `labelColor` without it — keksdose).
-    labelColor: d.labelColor
-  })).filter((n) => Number.isFinite(n.size) && n.size > 0).slice(0, maxTiles ?? void 0);
-  if (nodes.length === 0) return null;
-  const box = chartHeightProps(height);
-  const total = nodes.reduce((acc, n) => acc + n.size, 0);
-  const format = (v) => {
-    const share = total > 0 ? v / total : void 0;
-    return valueFormatter ? valueFormatter(v, share) : formatWithMinus(DEFAULT_NUMBER, v);
-  };
-  const Content = redactNames ? RedactedTooltipContent : ChartTooltipContent;
-  return /* @__PURE__ */ jsx(
-    ChartContainer,
-    {
-      ...rest,
-      ref: rootRef,
-      config: TREEMAP_CONFIG,
-      className: cn(box.className, rest.className),
-      style: { ...style, ...box.style },
-      children: /* @__PURE__ */ jsx(
-        RechartsTreemap,
-        {
-          data: nodes,
-          dataKey: "size",
-          fill: "var(--chart-1)",
-          isAnimationActive: false,
-          content: /* @__PURE__ */ jsx(
-            TreemapCell,
-            {
-              onNodeClick,
-              redactNames,
-              nodeNote,
-              dir,
-              edges
-            }
-          ),
-          children: /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(Content, { hideLabel: true, valueFormatter: format }) })
+  const nodes = useMemo(
+    () => mapNodes(data, ramp, maxTiles, (fill, shade) => {
+      if (shade === void 0 || !Number.isFinite(shade) || shade >= 1 || !card) return fill;
+      const hex = measurableFill(fill, tokenHex);
+      return hex ? lerpHex(card, hex, shade) : fill;
+    }),
+    [data, ramp, maxTiles, tokenHex, card]
+  );
+  const order = useMemo(() => depthFirst(nodes), [nodes]);
+  const layout = useMemo(
+    () => (width, height2, scale) => layoutFor(nodes, width, height2, scale),
+    [nodes]
+  );
+  const [anchor] = useState(createAnchor);
+  const tiles = useRef(/* @__PURE__ */ new Map());
+  const orderRef = useRef(order);
+  const stopRef = useRef(void 0);
+  const restoreRef = useRef(null);
+  const stopOf = useCallback(() => {
+    const drawn = orderRef.current;
+    return drawn.some((n) => n.path === stopRef.current) ? stopRef.current : drawn[0]?.path;
+  }, []);
+  const applyStop = useCallback(() => {
+    const at = stopOf();
+    tiles.current.forEach((el, path) => el.setAttribute("tabindex", path === at ? "0" : "-1"));
+    return at;
+  }, [stopOf]);
+  const register = useCallback(
+    (path, element) => {
+      if (element) {
+        tiles.current.set(path, element);
+        element.setAttribute("tabindex", path === stopOf() ? "0" : "-1");
+        if (restoreRef.current === path) {
+          restoreRef.current = null;
+          element.focus();
         }
-      )
+        return;
+      }
+      if (tiles.current.get(path) === document.activeElement) {
+        restoreRef.current = path;
+        queueMicrotask(() => {
+          if (restoreRef.current === path) restoreRef.current = null;
+        });
+      }
+      tiles.current.delete(path);
+    },
+    [stopOf]
+  );
+  const onFocus = useCallback(
+    (path) => {
+      stopRef.current = path;
+      applyStop();
+    },
+    [applyStop]
+  );
+  useLayoutEffect(() => {
+    orderRef.current = order;
+    const refs = REFS.get(register);
+    if (refs) {
+      const drawn = new Set(order.map((n) => n.path));
+      for (const path of refs.keys()) if (!drawn.has(path)) refs.delete(path);
     }
+    const at = applyStop();
+    if (restoreRef.current === null) return;
+    restoreRef.current = null;
+    if (at) tiles.current.get(at)?.focus();
+  }, [order, applyStop, register]);
+  const move = useCallback((path, event) => {
+    const drawn = orderRef.current;
+    const at = drawn.findIndex((n) => n.path === path);
+    const to = at < 0 ? void 0 : rovingTarget(event.key, "ltr", at, drawn.length, false);
+    if (to === void 0) return false;
+    const target = drawn[to];
+    if (target) tiles.current.get(target.path)?.focus();
+    return true;
+  }, []);
+  const total = useMemo(() => nodes.reduce((acc, n) => acc + n.size, 0), [nodes]);
+  const format = useCallback(
+    (v) => valueFormatter ? valueFormatter(v, total > 0 ? v / total : void 0) : formatWithMinus(numberFormat, v),
+    [valueFormatter, total, numberFormat]
+  );
+  const names = useMemo(() => {
+    const valueText = (v) => {
+      const out = format(v);
+      return typeof out === "string" || typeof out === "number" ? String(out) : formatWithMinus(numberFormat, v);
+    };
+    const groupName = new Map(order.filter((n) => n.children).map((n) => [n.path, n.name]));
+    return new Map(
+      order.map((n) => {
+        const say = n.children ? labels.group : labels.tile;
+        const own = say(n.name, valueText(n.size), shareText(total > 0 ? n.size / total : 0));
+        const named = n.groups.map((g, i) => groupName.get(pathOf(n.groups.slice(0, i), g)) ?? g).reduceRight((acc, group) => labels.inGroup(acc, group), own);
+        return [n.path, named];
+      })
+    );
+  }, [order, labels, format, numberFormat, shareText, total]);
+  const keys = useMemo(
+    () => ({ name: (path) => names.get(path), onFocus, register, move }),
+    [names, onFocus, register, move]
+  );
+  const context = useMemo(
+    () => ({ tokens: tokenHex, edgeFor, edges: edgesInForce, keys, layout, hover: anchor.set }),
+    [tokenHex, edgeFor, edgesInForce, keys, layout, anchor]
+  );
+  const Content = redactNames ? RedactedTooltipContent : ChartTooltipContent;
+  const cell = useMemo(
+    () => /* @__PURE__ */ jsx(
+      TreemapCell,
+      {
+        onNodeClick,
+        onGroupClick,
+        redactNames,
+        nodeNote,
+        dir
+      }
+    ),
+    [onNodeClick, onGroupClick, redactNames, nodeNote, dir]
+  );
+  const tooltip = useMemo(
+    () => /* @__PURE__ */ jsx(TreemapTooltip, { content: /* @__PURE__ */ jsx(Content, { hideLabel: true, valueFormatter: format }), anchor }),
+    [Content, format, anchor]
+  );
+  if (nodes.length === 0) return null;
+  const box = chartHeightProps(height);
+  return (
+    // Round the container, not inside it: ResponsiveContainer sizes its ONE child, the chart.
+    /* @__PURE__ */ jsx(TreemapTiles.Provider, { value: context, children: /* @__PURE__ */ jsx(
+      ChartContainer,
+      {
+        role: "figure",
+        ...rest,
+        description,
+        ref: rootRef,
+        config: TREEMAP_CONFIG,
+        className: cn(box.className, rest.className),
+        style: { ...style, ...box.style },
+        children: /* @__PURE__ */ jsx(RechartsTreemap, { data: nodes, dataKey: "size", fill: "var(--chart-1)", isAnimationActive: false, content: cell, children: tooltip })
+      }
+    ) })
   );
 }
 export {