@eifi1/ui-kit 0.53.0 → 0.55.0

package/dist/components/treemap.d.ts

@@ -20,8 +20,8 @@ export interface TreemapNode {
     id: string;
     name: string;
     /** The tile's area. A node whose value is not a positive finite number is NOT
-     *  drawn — an area cannot be negative, and recharts lays a negative size out as
-     *  nonsense rather than refusing it. Saying so is the caller's job: a group that
+     *  drawn — an area cannot be negative, and a squarified layout handed a negative size
+     *  draws nonsense rather than refusing it. Saying so is the caller's job: a group that
      *  vanishes silently between two views of the same data is a bug report.
      *
      *  A GROUP's own `value` is not read: its area is its drawn children's together. Pass
@@ -256,11 +256,11 @@ export interface TreemapCellProps {
     onNodeClick?: (id: string, name: string, groups?: readonly string[]) => void;
     /** A group's cell's click; see {@link TreemapProps.onGroupClick}. */
     onGroupClick?: (id: string, name: string, groups?: readonly string[]) => void;
-    /** The ids of the groups round the node, outermost first. `Treemap` puts it on every
-     *  node it hands recharts; a cell drawn in a caller's own map has it if the data does. */
+    /** The ids of the groups round the node, outermost first. `Treemap` gives it every tile
+     *  it draws; a cell drawn in a caller's own map has it if the data does. */
     groups?: readonly string[];
-    /** The node's place in the tree, which `Treemap` puts on every node it hands recharts:
-     *  its key in the map's keyboard, where an id may repeat between a group and a tile. */
+    /** The node's place in the tree, which `Treemap` gives every tile it draws: its key in
+     *  the map's keyboard, where an id may repeat between a group and a tile. */
     path?: string;
     /** Filled in by recharts for a GROUP: the nodes laid out inside it. A cell with
      *  children draws a frame, not a tile (0.52). */
@@ -278,8 +278,8 @@ export interface TreemapCellProps {
     edges?: TreemapEdges;
 }
 /**
- * One tile. Exported so a caller drawing its own recharts `<Treemap>` gets the same
- * label rules.
+ * One tile, for a caller drawing its own recharts `<Treemap>`: the `content` that gives it
+ * the map's label rules. `Treemap` itself draws the same tile (0.55, "The picture").
  *
  * recharts' default cell inherits the chart-level `stroke`, an SVG presentation
  * attribute that lands on the `<svg>` root and cascades into the label — so the glyphs
@@ -288,15 +288,15 @@ export interface TreemapCellProps {
  * (`paint-order: stroke`), which defeats any inherited stroke and keeps the text solid
  * where it overlaps a lighter or darker part of its own tile.
  *
- * Inside a `Treemap` it is one stop of the map's keyboard, named with its value and
- * share (0.52); drawn on its own it is a stop only as a button (`onNodeClick`), named by
- * `name`.
+ * Drawn on its own it is a stop only as a button (`onNodeClick`), named by `name`; a
+ * `Treemap`'s tile is one stop of the map's keyboard, named with its value and share
+ * (0.52).
  *
  * A node with `children` is a GROUP (0.52): the cell draws a frame in the well's colour
  * (`--bg-surface-2`), with the group's name in a band along its top where the group has
- * the room (61px at Normal, treemap-layout's `BODY_SHARE`). Inside a `Treemap` its tiles are laid out
- * in the frame's body; in a caller's own nested recharts `<Treemap>` they are drawn where
- * recharts lays them, over the frame — only `Treemap` makes the room.
+ * the room (61px at Normal, treemap-layout's `BODY_SHARE`). In a caller's own nested
+ * recharts `<Treemap>` the group's tiles are drawn where recharts lays them, over the
+ * frame — only `Treemap` makes the room, laying them out in the frame's body.
  */
 export declare function TreemapCell(props: TreemapCellProps): import("react").JSX.Element;
 /**
@@ -312,6 +312,8 @@ export declare function TreemapCell(props: TreemapCellProps): import("react").JS
  * Renders nothing when no node has a positive value — an empty box is a hole in the
  * card, and the caller's own sentence is the better answer there.
  *
- * Needs `recharts`, like everything behind `@eifi1/ui-kit/chart`.
+ * Drawn by the kit (0.55): the layout, the SVG and the tooltip are the map's own, inside the
+ * chart shell every chart shares, `ChartContainer` — whose `ResponsiveContainer` is all of
+ * `recharts` it still needs.
  */
 export declare function Treemap({ data, valueFormatter, height, onNodeClick, onGroupClick, redactNames, shareInValue, nodeNote, maxTiles, colors, edges, description, labels: labelsProp, style, ...rest }: TreemapProps): import("react").JSX.Element | null;

package/dist/components/treemap.js

@@ -1,26 +1,28 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
-  createContext,
+  cloneElement,
+  memo,
   useCallback,
-  useContext,
+  useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
   useState,
   useSyncExternalStore
 } from "react";
-import { Treemap as RechartsTreemap, useChartHeight, useChartWidth } from "recharts";
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { ChartContainer, ChartTooltipContent } from "./chart.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, rovingTarget } from "../lib/direction.js";
+import { returnFocus } from "../lib/focus-left.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";
+import { prefersReducedMotion } from "../lib/reduced-motion.js";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { DEFAULT_TREEMAP_LABELS } from "./treemap-labels.js";
 import { groupBody, layoutTreemap } from "./treemap-layout.js";
@@ -61,7 +63,6 @@ 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) {
@@ -77,17 +78,6 @@ const haloOf = (halo) => ({
 });
 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");
@@ -158,7 +148,7 @@ function Tile({
       onClick: activate,
       onKeyDown,
       onFocus: roving ? () => roving.onFocus(path) : void 0,
-      onMouseEnter: map.hover ? () => map.hover({ x: px, y: py, width: pw, height: ph }) : void 0,
+      onMouseEnter: map.hover && path != null ? () => map.hover(path) : 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,
@@ -240,34 +230,68 @@ function RedactedTooltipContent({
 function createAnchor() {
   let at = null;
   const listeners = /* @__PURE__ */ new Set();
+  const set = (path) => {
+    if (path === at) return;
+    at = path;
+    listeners.forEach((onChange) => onChange());
+  };
   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());
-    }
+    set,
+    clear: () => set(null)
   };
 }
-function TreemapTooltip({ content, anchor }) {
+const TOOLTIP_SLIDE = "transform 400ms ease";
+function TreemapTooltip({
+  content,
+  anchor,
+  nodes,
+  placed,
+  width,
+  height
+}) {
   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 shown = at !== null;
+  useEffect(() => {
+    if (!shown) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") anchor.clear();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [shown, anchor]);
+  useEffect(() => {
+    if (at !== null && !nodes.has(at)) anchor.clear();
+  }, [at, nodes, anchor]);
+  const node = at === null ? void 0 : nodes.get(at);
+  const box = at === null ? void 0 : placed.get(at)?.box;
+  if (!node || !box) return null;
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
   const left = cx > width / 2;
   const up = cy > height / 2;
   return /* @__PURE__ */ jsx(
-    ChartTooltip,
+    "div",
     {
-      content,
-      position: { x: cx + (left ? -10 : 10), y: cy + (up ? -10 : 10) },
-      wrapperStyle: { translate: `${left ? "-100%" : "0"} ${up ? "-100%" : "0"}` }
+      className: "recharts-tooltip-wrapper",
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        pointerEvents: "none",
+        transform: `translate(${cx + (left ? -10 : 10)}px, ${cy + (up ? -10 : 10)}px)`,
+        // The bubble's corner at that point: towards the middle, whatever its size.
+        translate: `${left ? "-100%" : "0"} ${up ? "-100%" : "0"}`,
+        transition: prefersReducedMotion() ? void 0 : TOOLTIP_SLIDE
+      },
+      children: cloneElement(content, {
+        active: true,
+        payload: [{ dataKey: "size", name: node.name, value: node.size, color: node.fill, payload: node }]
+      })
     }
   );
 }
@@ -293,14 +317,76 @@ function mapNodes(data, ramp, maxTiles, shaded) {
   });
   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 PlotTile = memo(Tile);
+const TreemapPlot = memo(function TreemapPlot2({
+  width = 0,
+  height = 0,
+  nodes,
+  order,
+  options,
+  map,
+  bubble,
+  anchor
+}) {
+  const { scale } = useTextSize();
+  const placed = useMemo(
+    () => width > 0 && height > 0 ? layoutTreemap(nodes, width, height, scale) : null,
+    [nodes, width, height, scale]
+  );
+  const byPath = useMemo(() => new Map(order.map((node) => [node.path, node])), [order]);
+  if (!placed) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "relative", style: { width, height }, children: [
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width,
+        height,
+        viewBox: `0 0 ${width} ${height}`,
+        className: "block outline-none",
+        style: { direction: "ltr" },
+        onMouseLeave: anchor.clear,
+        children: order.map((node) => /* @__PURE__ */ jsx(
+          PlotTile,
+          {
+            depth: node.groups.length + 1,
+            id: node.id,
+            name: node.name,
+            fill: node.fill,
+            labelColor: node.labelColor,
+            groups: node.groups,
+            path: node.path,
+            children: node.children,
+            ...options,
+            map,
+            place: placed.get(node.path)
+          },
+          node.path
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(TreemapTooltip, { content: bubble, anchor, nodes: byPath, placed, width, height })
+  ] });
+});
+function useBoxSize(element) {
+  const [size, setSize] = useState(null);
+  useLayoutEffect(() => {
+    if (!element) return;
+    const take = (width, height) => {
+      const w = Math.round(width);
+      const h = Math.round(height);
+      setSize(
+        (last) => w > 0 && h > 0 ? last?.width === w && last.height === h ? last : { width: w, height: h } : null
+      );
+    };
+    take(element.clientWidth, element.clientHeight);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) take(entry.contentRect.width, entry.contentRect.height);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [element]);
+  return size;
 }
 const REFS = /* @__PURE__ */ new WeakMap();
 function refFor(register, path) {
@@ -345,10 +431,16 @@ function Treemap({
   const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);
   const shareText = useMemo(() => shareFormat(locale), [locale]);
   const rootRef = useRef(null);
+  const [root, setRoot] = useState(null);
+  const takeRoot = useCallback((element) => {
+    rootRef.current = element;
+    setRoot(element);
+  }, []);
   const [dir, setDir] = useState("ltr");
   useLayoutEffect(() => {
     setDir(dirOf(rootRef.current));
-  }, [data]);
+  }, [root, data]);
+  const size = useBoxSize(root);
   const ramp = colors && colors.length > 0 ? colors : tokenHex;
   const nodes = useMemo(
     () => mapNodes(data, ramp, maxTiles, (fill, shade) => {
@@ -359,10 +451,6 @@ function Treemap({
     [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);
@@ -384,7 +472,7 @@ function Treemap({
         element.setAttribute("tabindex", path === stopOf() ? "0" : "-1");
         if (restoreRef.current === path) {
           restoreRef.current = null;
-          element.focus();
+          returnFocus({ opener: element });
         }
         return;
       }
@@ -415,7 +503,7 @@ function Treemap({
     const at = applyStop();
     if (restoreRef.current === null) return;
     restoreRef.current = null;
-    if (at) tiles.current.get(at)?.focus();
+    returnFocus({ fallback: [at ? tiles.current.get(at) : null] });
   }, [order, applyStop, register]);
   const move = useCallback((path, event) => {
     const drawn = orderRef.current;
@@ -451,50 +539,44 @@ function Treemap({
     () => ({ 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 map = useMemo(
+    () => ({ tokens: tokenHex, edgeFor, edges: edgesInForce, keys, hover: anchor.set }),
+    [tokenHex, edgeFor, edgesInForce, keys, anchor]
   );
-  const cell = useMemo(
-    () => /* @__PURE__ */ jsx(
-      TreemapCell,
-      {
-        onNodeClick,
-        onGroupClick,
-        redactNames,
-        nodeNote,
-        dir
-      }
-    ),
+  const options = useMemo(
+    () => ({ onNodeClick, onGroupClick, redactNames, nodeNote, dir }),
     [onNodeClick, onGroupClick, redactNames, nodeNote, dir]
   );
-  const tooltip = useMemo(
-    () => /* @__PURE__ */ jsx(
-      TreemapTooltip,
-      {
-        content: redactNames ? /* @__PURE__ */ jsx(RedactedTooltipContent, { hideLabel: true, valueFormatter: format, groups: redactNames === true }) : /* @__PURE__ */ jsx(ChartTooltipContent, { hideLabel: true, valueFormatter: format }),
-        anchor
-      }
-    ),
-    [redactNames, format, anchor]
+  const bubble = useMemo(
+    () => redactNames ? /* @__PURE__ */ jsx(RedactedTooltipContent, { hideLabel: true, valueFormatter: format, groups: redactNames === true }) : /* @__PURE__ */ jsx(ChartTooltipContent, { hideLabel: true, valueFormatter: format }),
+    [redactNames, format]
   );
   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 })
-      }
-    ) })
+  return /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      role: "figure",
+      ...rest,
+      description,
+      ref: takeRoot,
+      config: TREEMAP_CONFIG,
+      className: cn(box.className, rest.className),
+      style: { ...style, ...box.style },
+      children: /* @__PURE__ */ jsx(
+        TreemapPlot,
+        {
+          width: size?.width,
+          height: size?.height,
+          nodes,
+          order,
+          options,
+          map,
+          bubble,
+          anchor
+        }
+      )
+    }
   );
 }
 export {