@smwb/ui-react 2.7.0 → 2.9.0

package/dist/components/dataDisplay/chart/chart.js

@@ -1,17 +1,30 @@
-import { jsxs as K, jsx as C } from "react/jsx-runtime";
+import { jsxs as Q, jsx as C } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/chart/chart.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                     */
-import Q, { useRef as y, useState as q, useEffect as z } from "react";
-import U from "clsx";
+import U, { useRef as y, useState as q, useEffect as z } from "react";
+import V from "clsx";
 import { readChartPalette as B, samePalette as _, chartTheme as H } from "./chartTheme.js";
-import { Skeleton as V } from "../../feedBack/skeleton/skeleton.js";
-const X = (u) => typeof u == "number" ? `${u}px` : u, Y = () => import("echarts"), Z = (u) => {
+import { Skeleton as X } from "../../feedBack/skeleton/skeleton.js";
+const Y = (u) => typeof u == "number" ? `${u}px` : u, Z = () => import("echarts"), tt = (u) => {
   try {
     return JSON.stringify(u, (k, h) => typeof h == "function" ? String(h) : h);
   } catch {
     return null;
   }
-}, oe = Q.forwardRef(function({ className: k, style: h, label: J, summary: x, option: g, height: W = 240, loader: E, renderer: F = "canvas", onClick: N, onReady: S, ...$ }, p) {
+}, it = U.forwardRef(function({
+  className: k,
+  style: h,
+  label: J,
+  summary: x,
+  option: g,
+  height: W = 240,
+  loader: E,
+  renderer: F = "canvas",
+  onClick: N,
+  onReady: S,
+  "data-testid": $ = "chart",
+  ...D
+}, p) {
   const A = y(null), w = y(null), [f, M] = q(null), [b, L] = q(!1), l = y({
     module: null,
     instance: null,
@@ -21,52 +34,52 @@ const X = (u) => typeof u == "number" ? `${u}px` : u, Y = () => import("echarts"
     pending: !1
   }), s = y({ option: g, palette: f, loader: E, renderer: F, onClick: N, onReady: S });
   s.current = { option: g, palette: f, loader: E, renderer: F, onClick: N, onReady: S };
-  const D = (e) => {
-    A.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
+  const G = (t) => {
+    A.current = t, typeof p == "function" ? p(t) : p && (p.current = t);
   }, R = () => {
-    const e = w.current;
-    return !!(e && e.clientWidth > 0 && e.clientHeight > 0);
-  }, O = (e, n) => {
-    const t = e.init(w.current, H(n), { renderer: s.current.renderer });
-    return t.on("click", (a) => {
+    const t = w.current;
+    return !!(t && t.clientWidth > 0 && t.clientHeight > 0);
+  }, O = (t, n) => {
+    const e = t.init(w.current, H(n), { renderer: s.current.renderer });
+    return e.on("click", (a) => {
       var c, o;
       return (o = (c = s.current).onClick) == null ? void 0 : o.call(c, a);
-    }), l.current.themed = n, l.current.drawn = null, t;
+    }), l.current.themed = n, l.current.drawn = null, e;
   }, P = () => {
-    const e = l.current, n = s.current.palette;
-    if (!e.instance || !n) return;
+    const t = l.current, n = s.current.palette;
+    if (!t.instance || !n) return;
     if (!R()) {
-      e.pending = !0;
+      t.pending = !0;
       return;
     }
-    const t = s.current.option, a = typeof t == "function" ? t(n) : t, c = Z(a);
-    if (!(!e.pending && c !== null && c === e.drawn)) {
-      e.pending = !1;
+    const e = s.current.option, a = typeof e == "function" ? e(n) : e, c = tt(a);
+    if (!(!t.pending && c !== null && c === t.drawn)) {
+      t.pending = !1;
       try {
-        e.instance.setOption(a, { notMerge: !0 }), e.drawn = c;
+        t.instance.setOption(a, { notMerge: !0 }), t.drawn = c;
       } catch (o) {
-        e.drawn = null, console.error("[smwb] Chart: the option did not draw.", o);
+        t.drawn = null, console.error("[smwb] Chart: the option did not draw.", o);
       }
     }
-  }, G = (e) => {
+  }, I = (t) => {
     const n = l.current;
-    if (!(!n.instance || !n.module || n.themed && _(n.themed, e)))
+    if (!(!n.instance || !n.module || n.themed && _(n.themed, t)))
       if (typeof n.instance.setTheme == "function") {
         try {
-          n.instance.setTheme(H(e));
-        } catch (t) {
-          console.error("[smwb] Chart: the theme did not apply.", t);
+          n.instance.setTheme(H(t));
+        } catch (e) {
+          console.error("[smwb] Chart: the theme did not apply.", e);
         }
-        n.themed = e, n.drawn = null;
+        n.themed = t, n.drawn = null;
       } else
-        n.instance.dispose(), n.instance = O(n.module, e);
+        n.instance.dispose(), n.instance = O(n.module, t);
   };
   return z(() => {
     var j;
-    const e = A.current, n = w.current, t = l.current;
+    const t = A.current, n = w.current, e = l.current;
     let a = !1;
     const c = () => {
-      const r = B(e);
+      const r = B(t);
       M((i) => i && _(i, r) ? i : r);
     };
     c();
@@ -78,56 +91,56 @@ const X = (u) => typeof u == "number" ? `${u}px` : u, Y = () => import("echarts"
     const d = typeof window.matchMedia == "function" ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
     d == null || d.addEventListener("change", c);
     const T = () => {
-      if (a || t.instance || !t.module || !R()) return;
-      const r = B(e);
-      M((i) => i && _(i, r) ? i : r), t.instance = O(t.module, r), L(!0);
-    }, I = () => {
+      if (a || e.instance || !e.module || !R()) return;
+      const r = B(t);
+      M((i) => i && _(i, r) ? i : r), e.instance = O(e.module, r), L(!0);
+    }, K = () => {
       if (R()) {
-        if (!t.instance) {
+        if (!e.instance) {
           T();
           return;
         }
         try {
-          t.instance.resize();
+          e.instance.resize();
         } catch {
         }
-        t.pending && P();
+        e.pending && P();
       }
     };
     let v = 0;
     const m = typeof ResizeObserver == "function" ? new ResizeObserver(() => {
-      cancelAnimationFrame(v), v = requestAnimationFrame(I);
+      cancelAnimationFrame(v), v = requestAnimationFrame(K);
     }) : void 0;
-    return m == null || m.observe(n), ((j = s.current.loader) != null ? j : Y)().then(
+    return m == null || m.observe(n), ((j = s.current.loader) != null ? j : Z)().then(
       (r) => {
-        t.module = r, T();
+        e.module = r, T();
       },
       (r) => console.error("[smwb] Chart: ECharts did not load.", r)
     ), () => {
       var r;
-      a = !0, o.disconnect(), d == null || d.removeEventListener("change", c), m == null || m.disconnect(), cancelAnimationFrame(v), (r = t.instance) == null || r.dispose(), t.instance = null, t.announced = null, t.drawn = null, L(!1);
+      a = !0, o.disconnect(), d == null || d.removeEventListener("change", c), m == null || m.disconnect(), cancelAnimationFrame(v), (r = e.instance) == null || r.dispose(), e.instance = null, e.announced = null, e.drawn = null, L(!1);
     };
   }, []), z(() => {
-    var n, t;
-    const e = l.current;
-    !b || !f || !e.instance || (G(f), P(), e.instance && e.announced !== e.instance && (e.announced = e.instance, (t = (n = s.current).onReady) == null || t.call(n, e.instance)));
-  }, [b, f, g]), /* @__PURE__ */ K(
+    var n, e;
+    const t = l.current;
+    !b || !f || !t.instance || (I(f), P(), t.instance && t.announced !== t.instance && (t.announced = t.instance, (e = (n = s.current).onReady) == null || e.call(n, t.instance)));
+  }, [b, f, g]), /* @__PURE__ */ Q(
     "div",
     {
-      "data-testid": "chart",
-      ...$,
-      ref: D,
-      className: U("smwb-chart", k),
-      style: { ...h, height: X(W) },
+      "data-testid": $,
+      ...D,
+      ref: G,
+      className: V("smwb-chart", k),
+      style: { ...h, height: Y(W) },
       children: [
         /* @__PURE__ */ C("div", { ref: w, className: "smwb-chart__canvas", role: "img", "aria-label": J }),
-        b ? null : /* @__PURE__ */ C(V, { className: "smwb-chart__skeleton", variant: "rounded", width: "100%", height: "100%" }),
+        b ? null : /* @__PURE__ */ C(X, { className: "smwb-chart__skeleton", variant: "rounded", width: "100%", height: "100%" }),
         x ? /* @__PURE__ */ C("p", { className: "smwb-chart__summary", children: x }) : null
       ]
     }
   );
 });
 export {
-  oe as Chart
+  it as Chart
 };
 //# sourceMappingURL=chart.js.map

package/dist/components/dataDisplay/chart/chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart.js","sources":["../../../../src/components/dataDisplay/chart/chart.tsx"],"sourcesContent":["import React, { HTMLAttributes, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { Skeleton } from \"../../feedBack/skeleton\";\nimport { type ChartOption, type ChartPalette, chartTheme, readChartPalette, samePalette } from \"./chartTheme\";\n\n/** What an ECharts event hands its handler: the item under the pointer. */\nexport interface ChartEventParams {\n  componentType?: string;\n  seriesType?: string;\n  seriesIndex?: number;\n  seriesName?: string;\n  name?: string;\n  dataIndex?: number;\n  data?: unknown;\n  value?: unknown;\n  [key: string]: unknown;\n}\n\n/** The part of an ECharts instance the chart uses; `onReady` hands over the instance itself. */\nexport interface ChartInstance {\n  setOption(option: ChartOption, opts?: { notMerge?: boolean }): void;\n  resize(): void;\n  on(eventName: string, handler: (params: ChartEventParams) => void): void;\n  dispose(): void;\n  /** ECharts 6 switches the theme in place; with ECharts 5 the chart is created anew. */\n  setTheme?(theme: object): void;\n}\n\n/** What `loader` resolves to: `echarts`, or `echarts/core` with the charts you use registered. */\nexport interface ChartModule {\n  init(dom: HTMLElement, theme?: object | string | null, opts?: { renderer?: \"canvas\" | \"svg\" }): ChartInstance;\n}\n\nexport interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onClick\"> {\n  className?: string;\n  /** What the chart shows: its accessible name. */\n  label: string;\n  /** The chart in words, for screen readers; it is there before the chart draws, and on the server. */\n  summary?: string;\n  /**\n   * The ECharts option, or a function of the theme's palette that returns it.\n   * It is applied whole whenever it or the theme changes; an equal option\n   * passed again (an inline object on a re-render) does not redraw.\n   */\n  option: ChartOption | ((palette: ChartPalette) => ChartOption);\n  /** The chart's height: a number of pixels or any CSS length; 240 by default. It fills the width. */\n  height?: number | string;\n  /**\n   * Loads ECharts in the browser: `import(\"echarts\")` by default, the whole\n   * library. For a smaller bundle pass `() => import(\"./my-echarts\")`, a module\n   * that registers only the charts you use with `echarts/core`.\n   */\n  loader?: () => Promise<ChartModule>;\n  /** How ECharts draws: \"canvas\" (default) or \"svg\". Read once, when the chart is created. */\n  renderer?: \"canvas\" | \"svg\";\n  /** A click on an item: a bar, a point, a node. */\n  onClick?: (params: ChartEventParams) => void;\n  /** The ECharts instance, once it has drawn — for other events and actions. Called again if a theme change re-creates it. */\n  onReady?: (chart: ChartInstance) => void;\n}\n\ninterface ChartState {\n  module: ChartModule | null;\n  instance: ChartInstance | null;\n  themed: ChartPalette | null;\n  announced: ChartInstance | null;\n  /** The option last drawn, serialised; null forces the next draw. */\n  drawn: string | null;\n  pending: boolean;\n}\n\nconst cssLength = (value: number | string): string => (typeof value === \"number\" ? `${value}px` : value);\n\nconst loadECharts = (): Promise<ChartModule> => import(\"echarts\") as unknown as Promise<ChartModule>;\n\n// Functions (formatters) count by their source, so a changed formatter redraws.\nconst serialise = (option: ChartOption): string | null => {\n  try {\n    return JSON.stringify(option, (_key, value: unknown) => (typeof value === \"function\" ? String(value) : value));\n  } catch {\n    return null;\n  }\n};\n\n/**\n * An ECharts chart in the theme's palette. On the server, and until ECharts\n * loads in the browser, a skeleton of the same size stands in its place, so\n * the page does not jump; the chart follows theme switches and its box's size.\n */\nexport const Chart = React.forwardRef<HTMLDivElement, ChartProps>(function Chart(\n  { className, style, label, summary, option, height = 240, loader, renderer = \"canvas\", onClick, onReady, ...rest },\n  ref\n) {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const canvasRef = useRef<HTMLDivElement>(null);\n  const [palette, setPalette] = useState<ChartPalette | null>(null);\n  const [ready, setReady] = useState(false);\n  const state = useRef<ChartState>({\n    module: null,\n    instance: null,\n    themed: null,\n    announced: null,\n    drawn: null,\n    pending: false,\n  });\n  const latest = useRef({ option, palette, loader, renderer, onClick, onReady });\n  latest.current = { option, palette, loader, renderer, onClick, onReady };\n\n  const setRoot = (element: HTMLDivElement | null): void => {\n    rootRef.current = element;\n    if (typeof ref === \"function\") ref(element);\n    else if (ref) ref.current = element;\n  };\n\n  const hasSize = (): boolean => {\n    const canvas = canvasRef.current;\n    return Boolean(canvas && canvas.clientWidth > 0 && canvas.clientHeight > 0);\n  };\n\n  const create = (loaded: ChartModule, colours: ChartPalette): ChartInstance => {\n    const created = loaded.init(canvasRef.current!, chartTheme(colours), { renderer: latest.current.renderer });\n    created.on(\"click\", (params) => latest.current.onClick?.(params));\n    state.current.themed = colours;\n    state.current.drawn = null;\n    return created;\n  };\n\n  // Not at zero size (a hidden tab, a collapsed panel): there the graph of\n  // ECharts 6.1 inverts a degenerate matrix and throws. The option waits for\n  // the chart to get a size, and a failed redraw is caught up on the next one.\n  const draw = (): void => {\n    const current = state.current;\n    const colours = latest.current.palette;\n    if (!current.instance || !colours) return;\n    if (!hasSize()) {\n      current.pending = true;\n      return;\n    }\n    const source = latest.current.option;\n    const next = typeof source === \"function\" ? source(colours) : source;\n    const key = serialise(next);\n    if (!current.pending && key !== null && key === current.drawn) return;\n    current.pending = false;\n    try {\n      current.instance.setOption(next, { notMerge: true });\n      current.drawn = key;\n    } catch (error) {\n      current.drawn = null;\n      console.error(\"[smwb] Chart: the option did not draw.\", error);\n    }\n  };\n\n  const retheme = (colours: ChartPalette): void => {\n    const current = state.current;\n    if (!current.instance || !current.module || (current.themed && samePalette(current.themed, colours))) return;\n    if (typeof current.instance.setTheme === \"function\") {\n      try {\n        current.instance.setTheme(chartTheme(colours));\n      } catch (error) {\n        console.error(\"[smwb] Chart: the theme did not apply.\", error);\n      }\n      current.themed = colours;\n      current.drawn = null;\n    } else {\n      current.instance.dispose();\n      current.instance = create(current.module, colours);\n    }\n  };\n\n  useEffect(() => {\n    const root = rootRef.current!;\n    const canvas = canvasRef.current!;\n    const current = state.current;\n    let disposed = false;\n\n    const refresh = (): void => {\n      const next = readChartPalette(root);\n      setPalette((previous) => (previous && samePalette(previous, next) ? previous : next));\n    };\n    refresh();\n\n    // The theme switches by an attribute on <html> (data-theme, a class) or\n    // with the system setting.\n    const themeObserver = new MutationObserver(() => requestAnimationFrame(refresh));\n    themeObserver.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"data-theme\", \"class\", \"style\"],\n    });\n    const media =\n      typeof window.matchMedia === \"function\" ? window.matchMedia(\"(prefers-color-scheme: dark)\") : undefined;\n    media?.addEventListener(\"change\", refresh);\n\n    // The palette is read again here, not taken from mount: a theme set after\n    // the chart mounted (a parent's effect runs after this one) would otherwise\n    // show for a frame in the old colours.\n    const start = (): void => {\n      if (disposed || current.instance || !current.module || !hasSize()) return;\n      const colours = readChartPalette(root);\n      setPalette((previous) => (previous && samePalette(previous, colours) ? previous : colours));\n      current.instance = create(current.module, colours);\n      setReady(true);\n    };\n\n    const onResize = (): void => {\n      if (!hasSize()) return;\n      if (!current.instance) {\n        start();\n        return;\n      }\n      try {\n        current.instance.resize();\n      } catch {\n        // It catches up on the next resize.\n      }\n      if (current.pending) draw();\n    };\n    // In the next frame, not in the observer's callback: drawing there resizes\n    // what it observes, and the browser reports a ResizeObserver loop.\n    let frame = 0;\n    const resizeObserver =\n      typeof ResizeObserver === \"function\"\n        ? new ResizeObserver(() => {\n            cancelAnimationFrame(frame);\n            frame = requestAnimationFrame(onResize);\n          })\n        : undefined;\n    resizeObserver?.observe(canvas);\n\n    (latest.current.loader ?? loadECharts)().then(\n      (loaded) => {\n        current.module = loaded;\n        start();\n      },\n      (error: unknown) => console.error(\"[smwb] Chart: ECharts did not load.\", error)\n    );\n\n    return () => {\n      disposed = true;\n      themeObserver.disconnect();\n      media?.removeEventListener(\"change\", refresh);\n      resizeObserver?.disconnect();\n      cancelAnimationFrame(frame);\n      current.instance?.dispose();\n      current.instance = null;\n      current.announced = null;\n      current.drawn = null;\n      // Effects that run again with the state kept (fast refresh, a hidden\n      // <Activity>) create a new chart, and it must draw.\n      setReady(false);\n    };\n    // The chart is set up once; later props are read through `latest`.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const current = state.current;\n    if (!ready || !palette || !current.instance) return;\n    retheme(palette);\n    draw();\n    if (current.instance && current.announced !== current.instance) {\n      current.announced = current.instance;\n      latest.current.onReady?.(current.instance);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ready, palette, option]);\n\n  return (\n    <div\n      data-testid=\"chart\"\n      {...rest}\n      ref={setRoot}\n      className={cn(\"smwb-chart\", className)}\n      style={{ ...style, height: cssLength(height) }}\n    >\n      <div ref={canvasRef} className=\"smwb-chart__canvas\" role=\"img\" aria-label={label} />\n      {!ready ? <Skeleton className=\"smwb-chart__skeleton\" variant=\"rounded\" width=\"100%\" height=\"100%\" /> : null}\n      {summary ? <p className=\"smwb-chart__summary\">{summary}</p> : null}\n    </div>\n  );\n});\n\nexport default Chart;\n"],"names":["cssLength","value","loadECharts","serialise","option","_key","Chart","React","className","style","label","summary","height","loader","renderer","onClick","onReady","rest","ref","rootRef","useRef","canvasRef","palette","setPalette","useState","ready","setReady","state","latest","setRoot","element","hasSize","canvas","create","loaded","colours","created","chartTheme","params","_b","_a","draw","current","source","next","key","error","retheme","samePalette","useEffect","root","disposed","refresh","readChartPalette","previous","themeObserver","media","start","onResize","frame","resizeObserver","jsxs","cn","jsx","Skeleton"],"mappings":"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"}
+{"version":3,"file":"chart.js","sources":["../../../../src/components/dataDisplay/chart/chart.tsx"],"sourcesContent":["import React, { HTMLAttributes, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { Skeleton } from \"../../feedBack/skeleton\";\nimport { type ChartOption, type ChartPalette, chartTheme, readChartPalette, samePalette } from \"./chartTheme\";\n\n/** What an ECharts event hands its handler: the item under the pointer. */\nexport interface ChartEventParams {\n  componentType?: string;\n  seriesType?: string;\n  seriesIndex?: number;\n  seriesName?: string;\n  name?: string;\n  dataIndex?: number;\n  data?: unknown;\n  value?: unknown;\n  [key: string]: unknown;\n}\n\n/** The part of an ECharts instance the chart uses; `onReady` hands over the instance itself. */\nexport interface ChartInstance {\n  setOption(option: ChartOption, opts?: { notMerge?: boolean }): void;\n  resize(): void;\n  on(eventName: string, handler: (params: ChartEventParams) => void): void;\n  dispose(): void;\n  /** ECharts 6 switches the theme in place; with ECharts 5 the chart is created anew. */\n  setTheme?(theme: object): void;\n}\n\n/** What `loader` resolves to: `echarts`, or `echarts/core` with the charts you use registered. */\nexport interface ChartModule {\n  init(dom: HTMLElement, theme?: object | string | null, opts?: { renderer?: \"canvas\" | \"svg\" }): ChartInstance;\n}\n\nexport interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onClick\"> {\n  className?: string;\n  /** What the chart shows: its accessible name. */\n  label: string;\n  /** The chart in words, for screen readers; it is there before the chart draws, and on the server. */\n  summary?: string;\n  /**\n   * The ECharts option, or a function of the theme's palette that returns it.\n   * It is applied whole whenever it or the theme changes; an equal option\n   * passed again (an inline object on a re-render) does not redraw.\n   */\n  option: ChartOption | ((palette: ChartPalette) => ChartOption);\n  /** The chart's height: a number of pixels or any CSS length; 240 by default. It fills the width. */\n  height?: number | string;\n  /**\n   * Loads ECharts in the browser: `import(\"echarts\")` by default, the whole\n   * library. For a smaller bundle pass `() => import(\"./my-echarts\")`, a module\n   * that registers only the charts you use with `echarts/core`.\n   */\n  loader?: () => Promise<ChartModule>;\n  /** How ECharts draws: \"canvas\" (default) or \"svg\". Read once, when the chart is created. */\n  renderer?: \"canvas\" | \"svg\";\n  /** A click on an item: a bar, a point, a node. */\n  onClick?: (params: ChartEventParams) => void;\n  /** The ECharts instance, once it has drawn — for other events and actions. Called again if a theme change re-creates it. */\n  onReady?: (chart: ChartInstance) => void;\n  /** Test id of the root `<div>`; `chart` unless given. */\n  \"data-testid\"?: string;\n}\n\ninterface ChartState {\n  module: ChartModule | null;\n  instance: ChartInstance | null;\n  themed: ChartPalette | null;\n  announced: ChartInstance | null;\n  /** The option last drawn, serialised; null forces the next draw. */\n  drawn: string | null;\n  pending: boolean;\n}\n\nconst cssLength = (value: number | string): string => (typeof value === \"number\" ? `${value}px` : value);\n\nconst loadECharts = (): Promise<ChartModule> => import(\"echarts\") as unknown as Promise<ChartModule>;\n\n// Functions (formatters) count by their source, so a changed formatter redraws.\nconst serialise = (option: ChartOption): string | null => {\n  try {\n    return JSON.stringify(option, (_key, value: unknown) => (typeof value === \"function\" ? String(value) : value));\n  } catch {\n    return null;\n  }\n};\n\n/**\n * An ECharts chart in the theme's palette. On the server, and until ECharts\n * loads in the browser, a skeleton of the same size stands in its place, so\n * the page does not jump; the chart follows theme switches and its box's size.\n */\nexport const Chart = React.forwardRef<HTMLDivElement, ChartProps>(function Chart(\n  {\n    className,\n    style,\n    label,\n    summary,\n    option,\n    height = 240,\n    loader,\n    renderer = \"canvas\",\n    onClick,\n    onReady,\n    \"data-testid\": dataTestId = \"chart\",\n    ...rest\n  },\n  ref\n) {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const canvasRef = useRef<HTMLDivElement>(null);\n  const [palette, setPalette] = useState<ChartPalette | null>(null);\n  const [ready, setReady] = useState(false);\n  const state = useRef<ChartState>({\n    module: null,\n    instance: null,\n    themed: null,\n    announced: null,\n    drawn: null,\n    pending: false,\n  });\n  const latest = useRef({ option, palette, loader, renderer, onClick, onReady });\n  latest.current = { option, palette, loader, renderer, onClick, onReady };\n\n  const setRoot = (element: HTMLDivElement | null): void => {\n    rootRef.current = element;\n    if (typeof ref === \"function\") ref(element);\n    else if (ref) ref.current = element;\n  };\n\n  const hasSize = (): boolean => {\n    const canvas = canvasRef.current;\n    return Boolean(canvas && canvas.clientWidth > 0 && canvas.clientHeight > 0);\n  };\n\n  const create = (loaded: ChartModule, colours: ChartPalette): ChartInstance => {\n    const created = loaded.init(canvasRef.current!, chartTheme(colours), { renderer: latest.current.renderer });\n    created.on(\"click\", (params) => latest.current.onClick?.(params));\n    state.current.themed = colours;\n    state.current.drawn = null;\n    return created;\n  };\n\n  // Not at zero size (a hidden tab, a collapsed panel): there the graph of\n  // ECharts 6.1 inverts a degenerate matrix and throws. The option waits for\n  // the chart to get a size, and a failed redraw is caught up on the next one.\n  const draw = (): void => {\n    const current = state.current;\n    const colours = latest.current.palette;\n    if (!current.instance || !colours) return;\n    if (!hasSize()) {\n      current.pending = true;\n      return;\n    }\n    const source = latest.current.option;\n    const next = typeof source === \"function\" ? source(colours) : source;\n    const key = serialise(next);\n    if (!current.pending && key !== null && key === current.drawn) return;\n    current.pending = false;\n    try {\n      current.instance.setOption(next, { notMerge: true });\n      current.drawn = key;\n    } catch (error) {\n      current.drawn = null;\n      console.error(\"[smwb] Chart: the option did not draw.\", error);\n    }\n  };\n\n  const retheme = (colours: ChartPalette): void => {\n    const current = state.current;\n    if (!current.instance || !current.module || (current.themed && samePalette(current.themed, colours))) return;\n    if (typeof current.instance.setTheme === \"function\") {\n      try {\n        current.instance.setTheme(chartTheme(colours));\n      } catch (error) {\n        console.error(\"[smwb] Chart: the theme did not apply.\", error);\n      }\n      current.themed = colours;\n      current.drawn = null;\n    } else {\n      current.instance.dispose();\n      current.instance = create(current.module, colours);\n    }\n  };\n\n  useEffect(() => {\n    const root = rootRef.current!;\n    const canvas = canvasRef.current!;\n    const current = state.current;\n    let disposed = false;\n\n    const refresh = (): void => {\n      const next = readChartPalette(root);\n      setPalette((previous) => (previous && samePalette(previous, next) ? previous : next));\n    };\n    refresh();\n\n    // The theme switches by an attribute on <html> (data-theme, a class) or\n    // with the system setting.\n    const themeObserver = new MutationObserver(() => requestAnimationFrame(refresh));\n    themeObserver.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"data-theme\", \"class\", \"style\"],\n    });\n    const media =\n      typeof window.matchMedia === \"function\" ? window.matchMedia(\"(prefers-color-scheme: dark)\") : undefined;\n    media?.addEventListener(\"change\", refresh);\n\n    // The palette is read again here, not taken from mount: a theme set after\n    // the chart mounted (a parent's effect runs after this one) would otherwise\n    // show for a frame in the old colours.\n    const start = (): void => {\n      if (disposed || current.instance || !current.module || !hasSize()) return;\n      const colours = readChartPalette(root);\n      setPalette((previous) => (previous && samePalette(previous, colours) ? previous : colours));\n      current.instance = create(current.module, colours);\n      setReady(true);\n    };\n\n    const onResize = (): void => {\n      if (!hasSize()) return;\n      if (!current.instance) {\n        start();\n        return;\n      }\n      try {\n        current.instance.resize();\n      } catch {\n        // It catches up on the next resize.\n      }\n      if (current.pending) draw();\n    };\n    // In the next frame, not in the observer's callback: drawing there resizes\n    // what it observes, and the browser reports a ResizeObserver loop.\n    let frame = 0;\n    const resizeObserver =\n      typeof ResizeObserver === \"function\"\n        ? new ResizeObserver(() => {\n            cancelAnimationFrame(frame);\n            frame = requestAnimationFrame(onResize);\n          })\n        : undefined;\n    resizeObserver?.observe(canvas);\n\n    (latest.current.loader ?? loadECharts)().then(\n      (loaded) => {\n        current.module = loaded;\n        start();\n      },\n      (error: unknown) => console.error(\"[smwb] Chart: ECharts did not load.\", error)\n    );\n\n    return () => {\n      disposed = true;\n      themeObserver.disconnect();\n      media?.removeEventListener(\"change\", refresh);\n      resizeObserver?.disconnect();\n      cancelAnimationFrame(frame);\n      current.instance?.dispose();\n      current.instance = null;\n      current.announced = null;\n      current.drawn = null;\n      // Effects that run again with the state kept (fast refresh, a hidden\n      // <Activity>) create a new chart, and it must draw.\n      setReady(false);\n    };\n    // The chart is set up once; later props are read through `latest`.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const current = state.current;\n    if (!ready || !palette || !current.instance) return;\n    retheme(palette);\n    draw();\n    if (current.instance && current.announced !== current.instance) {\n      current.announced = current.instance;\n      latest.current.onReady?.(current.instance);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ready, palette, option]);\n\n  return (\n    <div\n      data-testid={dataTestId}\n      {...rest}\n      ref={setRoot}\n      className={cn(\"smwb-chart\", className)}\n      style={{ ...style, height: cssLength(height) }}\n    >\n      <div ref={canvasRef} className=\"smwb-chart__canvas\" role=\"img\" aria-label={label} />\n      {!ready ? <Skeleton className=\"smwb-chart__skeleton\" variant=\"rounded\" width=\"100%\" height=\"100%\" /> : null}\n      {summary ? <p className=\"smwb-chart__summary\">{summary}</p> : null}\n    </div>\n  );\n});\n\nexport default Chart;\n"],"names":["cssLength","value","loadECharts","serialise","option","_key","Chart","React","className","style","label","summary","height","loader","renderer","onClick","onReady","dataTestId","rest","ref","rootRef","useRef","canvasRef","palette","setPalette","useState","ready","setReady","state","latest","setRoot","element","hasSize","canvas","create","loaded","colours","created","chartTheme","params","_b","_a","draw","current","source","next","key","error","retheme","samePalette","useEffect","root","disposed","refresh","readChartPalette","previous","themeObserver","media","start","onResize","frame","resizeObserver","jsxs","cn","jsx","Skeleton"],"mappings":"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"}

package/dist/components/dataDisplay/chat/chat.d.ts

@@ -1,7 +1,15 @@
 import { PropsWithChildren, ReactNode } from "react";
 import type { Accept } from "./useChatFileUpload";
+import type { ComposerProps } from "../../inputs/composer/composer";
 import { ChatMessagesProps } from "./chatMessages";
 import { ChatAnchor, ChatLayoutMode, ChatMessage, ChatMessageRenderContext, ChatThemeMode } from "./types";
+/**
+ * Props for the `Composer` Chat draws as its footer. The props Chat owns itself — `onSendMessage` (the composer's
+ * `onSend`), `busy`, `onStop`, `composerPlaceholder` (`placeholder`), `composerDisabled` (`disabled`), the file upload
+ * props (`onAttach`, `accept`, `multiple`, `maxFiles`) and `dropTarget` (always `false`: the Chat shell is the drop
+ * target) — are left out, Chat passes them and does not let a caller override them.
+ */
+export type ChatFooterComposerProps = Omit<ComposerProps, "onSend" | "busy" | "onStop" | "disabled" | "placeholder" | "onAttach" | "accept" | "multiple" | "maxFiles" | "dropTarget">;
 export interface ChatProps extends PropsWithChildren, Omit<ChatMessageRenderContext, "showAvatars" | "showAttachments"> {
     className?: string;
     messages: ChatMessage[];
@@ -26,9 +34,43 @@ export interface ChatProps extends PropsWithChildren, Omit<ChatMessageRenderCont
     onLoadMore?: () => void | Promise<void>;
     hasMore?: boolean;
     onSendMessage?: (text: string) => void | Promise<void>;
+    /**
+     * The agent is replying: the composer's send button turns into Stop and calls `onStop`, the keys do not send, the
+     * text stays editable. Not the same as `loading` (the message list skeleton). The default composer only.
+     */
+    busy?: boolean;
+    /** Called when Stop is pressed while `busy` (and not `composerDisabled`). The default composer only. */
+    onStop?: () => void;
+    /**
+     * More props for the built-in `Composer`: `toolbar`, `attachments`, `maxLength`, `counter`, `minRows`, `maxRows`,
+     * `layout`, `sendKey` (default here `"enter"`), `value`/`defaultValue`/`onValueChange`, `clearOnSend`, `autoFocus`,
+     * `inputRef`, `aria-*`, `sendLabel`, `stopLabel`, `attachLabel`, `className`, `data-*`, … Chat's own props
+     * (`onSendMessage`, `busy`, `onStop`, `composerPlaceholder`, `composerDisabled`, the file upload props) win.
+     */
+    composerProps?: ChatFooterComposerProps;
+    /**
+     * Deprecated: draws the old `ChatComposer` (Enter sends, TextField DOM, `chat-composer*` test ids) instead of the
+     * built-in `Composer`. Kept for the migration and removed with `ChatComposer` in the next major; `busy`, `onStop`
+     * and `composerProps` are ignored in this mode.
+     *
+     * @deprecated Migrate to the default `Composer`; see the README section "Migrating from ChatComposer".
+     */
+    legacyComposer?: boolean;
     composerPlaceholder?: string;
     composerDisabled?: boolean;
+    /**
+     * Deprecated: works with `legacyComposer` only — the built-in `Composer` always inserts a newline on Shift+Enter.
+     * Pass it together with `legacyComposer` until that is removed.
+     *
+     * @deprecated Use `legacyComposer`; the default `Composer` has no equivalent flag.
+     */
     composerShiftEnterNewline?: boolean;
+    /**
+     * Deprecated: works with `legacyComposer` only — with the built-in `Composer` Ctrl/⌘+Enter sends. Pass it together
+     * with `legacyComposer` until that is removed.
+     *
+     * @deprecated Use `legacyComposer`; the default `Composer` has no equivalent flag.
+     */
     composerCtrlEnterNewline?: boolean;
     fileUpload?: boolean;
     onUploadFiles?: (files: File[]) => void | Promise<void>;
@@ -46,5 +88,5 @@ export interface ChatProps extends PropsWithChildren, Omit<ChatMessageRenderCont
     renderStatus?: ChatMessageRenderContext["renderStatus"];
     showCloseButton?: boolean;
 }
-export declare function Chat({ className, messages, showAvatars, showAttachments, headerTitle, headerSubtitle, headerActions, footer, children, anchor, themeMode, allowedLayouts: allowedLayoutsProp, layout: layoutProp, defaultLayout, onLayoutChange, open: openProp, defaultOpen, onOpenChange, floatingTrigger, triggerIcon, triggerLabel, onLoadMore, hasMore, onSendMessage, composerPlaceholder, composerDisabled, composerShiftEnterNewline, composerCtrlEnterNewline, fileUpload, onUploadFiles, fileUploadAccept, fileUploadMaxFiles, attachAriaLabel, loading, loadingMore, loadingSkeletonCount, renderMessage, embedded, overlayContext, showStatus, statusIcons, renderStatus, showCloseButton, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chat({ className, messages, showAvatars, showAttachments, headerTitle, headerSubtitle, headerActions, footer, children, anchor, themeMode, allowedLayouts: allowedLayoutsProp, layout: layoutProp, defaultLayout, onLayoutChange, open: openProp, defaultOpen, onOpenChange, floatingTrigger, triggerIcon, triggerLabel, onLoadMore, hasMore, onSendMessage, busy, onStop, composerProps, legacyComposer, composerPlaceholder, composerDisabled, composerShiftEnterNewline, composerCtrlEnterNewline, fileUpload, onUploadFiles, fileUploadAccept, fileUploadMaxFiles, attachAriaLabel, loading, loadingMore, loadingSkeletonCount, renderMessage, embedded, overlayContext, showStatus, statusIcons, renderStatus, showCloseButton, }: ChatProps): import("react/jsx-runtime").JSX.Element;
 export default Chat;