@smwb/ui-react 2.7.0 → 2.8.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/chatIconButton.d.ts

@@ -4,5 +4,5 @@ export interface ChatIconButtonProps extends React.ButtonHTMLAttributes<HTMLButt
     edge?: "start" | "end";
     color?: "default" | "primary";
 }
-export declare function ChatIconButton({ className, children, disabled, edge, color, onMouseDown: onMouseDownProp, ...rest }: ChatIconButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatIconButton({ className, children, disabled, edge, color, onMouseDown: onMouseDownProp, onPointerDown: onPointerDownProp, type, ...rest }: ChatIconButtonProps): import("react/jsx-runtime").JSX.Element;
 export default ChatIconButton;

package/dist/components/dataDisplay/chat/chatIconButton.js

@@ -1,47 +1,51 @@
-import { jsxs as b, jsx as p } from "react/jsx-runtime";
-import l from "react";
-import h from "clsx";
-import { Ripple as R } from "../../base/ripple/ripple.js";
-function d({
+import { jsxs as h, jsx as R } from "react/jsx-runtime";
+import p from "react";
+import _ from "clsx";
+import { Ripple as x } from "../../base/ripple/ripple.js";
+function w({
   className: i,
-  children: m,
+  children: r,
   disabled: t,
-  edge: o,
-  color: a = "default",
+  edge: a,
+  color: s = "default",
   onMouseDown: n,
-  ...u
+  // The button sets this on its root too; its own handler calls the caller's first.
+  onPointerDown: m,
+  // A default: the caller's type wins.
+  type: f = "button",
+  ...b
 }) {
-  const e = l.useRef(null), s = (c) => {
+  const u = p.useRef(null), l = (c) => {
     n == null || n(c);
-  }, f = (c) => {
-    var r;
-    t || (r = e.current) == null || r.onRipple(c);
+  }, o = (c) => {
+    var e;
+    m == null || m(c), t || (e = u.current) == null || e.onRipple(c);
   };
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ h(
     "button",
     {
-      type: "button",
-      className: h(
+      type: f,
+      className: _(
         "smwb-chat-icon-button",
-        o === "start" && "smwb-chat-icon-button_edge-start",
-        o === "end" && "smwb-chat-icon-button_edge-end",
-        a === "primary" && "smwb-chat-icon-button_primary",
+        a === "start" && "smwb-chat-icon-button_edge-start",
+        a === "end" && "smwb-chat-icon-button_edge-end",
+        s === "primary" && "smwb-chat-icon-button_primary",
         t && "smwb-chat-icon-button_disabled",
         i
       ),
       disabled: t,
-      onMouseDown: s,
-      onPointerDown: f,
-      ...u,
+      onMouseDown: l,
+      onPointerDown: o,
+      ...b,
       children: [
-        m,
-        t ? null : /* @__PURE__ */ p(R, { actionRef: e, center: !0 })
+        r,
+        t ? null : /* @__PURE__ */ R(x, { actionRef: u, center: !0 })
       ]
     }
   );
 }
 export {
-  d as ChatIconButton,
-  d as default
+  w as ChatIconButton,
+  w as default
 };
 //# sourceMappingURL=chatIconButton.js.map

package/dist/components/dataDisplay/chat/chatIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"chatIconButton.js","sources":["../../../../src/components/dataDisplay/chat/chatIconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\n\nexport interface ChatIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  edge?: \"start\" | \"end\";\n  color?: \"default\" | \"primary\";\n}\n\nexport function ChatIconButton({\n  className,\n  children,\n  disabled,\n  edge,\n  color = \"default\",\n  onMouseDown: onMouseDownProp,\n  ...rest\n}: ChatIconButtonProps) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement>) => {\n    if (!disabled) {\n      rippleRef.current?.onRipple(event);\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"smwb-chat-icon-button\",\n        edge === \"start\" && \"smwb-chat-icon-button_edge-start\",\n        edge === \"end\" && \"smwb-chat-icon-button_edge-end\",\n        color === \"primary\" && \"smwb-chat-icon-button_primary\",\n        disabled && \"smwb-chat-icon-button_disabled\",\n        className\n      )}\n      disabled={disabled}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {children}\n      {!disabled ? <Ripple actionRef={rippleRef} center /> : null}\n    </button>\n  );\n}\n\nexport default ChatIconButton;\n"],"names":["ChatIconButton","className","children","disabled","edge","color","onMouseDownProp","rest","rippleRef","React","onMouseDown","event","onPointerDown","_a","jsxs","cn","jsx","Ripple"],"mappings":";;;;AAUO,SAASA,EAAe;AAAA,EAC7B,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,aAAaC;AAAA,EACb,GAAGC;AACL,GAAwB;AACtB,QAAMC,IAAYC,EAAM,OAAyB,IAAI,GAE/CC,IAAc,CAACC,MAA+C;AAClE,IAAAL,KAAA,QAAAA,EAAkBK;AAAA,EACpB,GAEMC,IAAgB,CAACD,MAAiD;;AACtE,IAAKR,MACHU,IAAAL,EAAU,YAAV,QAAAK,EAAmB,SAASF;AAAA,EAEhC;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC;AAAA,QACT;AAAA,QACAX,MAAS,WAAW;AAAA,QACpBA,MAAS,SAAS;AAAA,QAClBC,MAAU,aAAa;AAAA,QACvBF,KAAY;AAAA,QACZF;AAAA,MAAA;AAAA,MAEF,UAAAE;AAAA,MACA,aAAAO;AAAA,MACA,eAAAE;AAAA,MACC,GAAGL;AAAA,MAEH,UAAA;AAAA,QAAAL;AAAA,QACCC,IAAqD,OAA1C,gBAAAa,EAACC,GAAA,EAAO,WAAWT,GAAW,QAAM,IAAC;AAAA,MAAK;AAAA,IAAA;AAAA,EAAA;AAG7D;"}
+{"version":3,"file":"chatIconButton.js","sources":["../../../../src/components/dataDisplay/chat/chatIconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\n\nexport interface ChatIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  edge?: \"start\" | \"end\";\n  color?: \"default\" | \"primary\";\n}\n\nexport function ChatIconButton({\n  className,\n  children,\n  disabled,\n  edge,\n  color = \"default\",\n  onMouseDown: onMouseDownProp,\n  // The button sets this on its root too; its own handler calls the caller's first.\n  onPointerDown: onPointerDownProp,\n  // A default: the caller's type wins.\n  type = \"button\",\n  ...rest\n}: ChatIconButtonProps) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement>) => {\n    onPointerDownProp?.(event);\n    if (!disabled) {\n      rippleRef.current?.onRipple(event);\n    }\n  };\n\n  return (\n    <button\n      type={type}\n      className={cn(\n        \"smwb-chat-icon-button\",\n        edge === \"start\" && \"smwb-chat-icon-button_edge-start\",\n        edge === \"end\" && \"smwb-chat-icon-button_edge-end\",\n        color === \"primary\" && \"smwb-chat-icon-button_primary\",\n        disabled && \"smwb-chat-icon-button_disabled\",\n        className\n      )}\n      disabled={disabled}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {children}\n      {!disabled ? <Ripple actionRef={rippleRef} center /> : null}\n    </button>\n  );\n}\n\nexport default ChatIconButton;\n"],"names":["ChatIconButton","className","children","disabled","edge","color","onMouseDownProp","onPointerDownProp","type","rest","rippleRef","React","onMouseDown","event","onPointerDown","_a","jsxs","cn","jsx","Ripple"],"mappings":";;;;AAUO,SAASA,EAAe;AAAA,EAC7B,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,aAAaC;AAAA;AAAA,EAEb,eAAeC;AAAA;AAAA,EAEf,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAwB;AACtB,QAAMC,IAAYC,EAAM,OAAyB,IAAI,GAE/CC,IAAc,CAACC,MAA+C;AAClE,IAAAP,KAAA,QAAAA,EAAkBO;AAAA,EACpB,GAEMC,IAAgB,CAACD,MAAiD;;AACtE,IAAAN,KAAA,QAAAA,EAAoBM,IACfV,MACHY,IAAAL,EAAU,YAAV,QAAAK,EAAmB,SAASF;AAAA,EAEhC;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAR;AAAA,MACA,WAAWS;AAAA,QACT;AAAA,QACAb,MAAS,WAAW;AAAA,QACpBA,MAAS,SAAS;AAAA,QAClBC,MAAU,aAAa;AAAA,QACvBF,KAAY;AAAA,QACZF;AAAA,MAAA;AAAA,MAEF,UAAAE;AAAA,MACA,aAAAS;AAAA,MACA,eAAAE;AAAA,MACC,GAAGL;AAAA,MAEH,UAAA;AAAA,QAAAP;AAAA,QACCC,IAAqD,OAA1C,gBAAAe,EAACC,GAAA,EAAO,WAAWT,GAAW,QAAM,IAAC;AAAA,MAAK;AAAA,IAAA;AAAA,EAAA;AAG7D;"}

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

@@ -15,6 +15,8 @@ export interface ChatLayoutProps extends PropsWithChildren, HTMLAttributes<HTMLD
     expandAriaLabel?: string;
     floatingAnchor?: ChatAnchor;
     chat: ChatLayoutChatProps;
+    /** Test id of the root `<div>`; `chat-layout` unless given. */
+    "data-testid"?: string;
 }
-export declare function ChatLayout({ className, contentClassName, chatClassName, side, chatWidth, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapseAriaLabel, expandAriaLabel, floatingAnchor, chat, children, style, ...rest }: ChatLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatLayout({ className, contentClassName, chatClassName, side, chatWidth, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapseAriaLabel, expandAriaLabel, floatingAnchor, chat, children, style, "data-testid": dataTestId, ...rest }: ChatLayoutProps): import("react/jsx-runtime").JSX.Element;
 export default ChatLayout;

package/dist/components/dataDisplay/chat/chatLayout.js

@@ -1,102 +1,103 @@
-import { jsxs as l, Fragment as _, jsx as t } from "react/jsx-runtime";
-import { useEffect as E } from "react";
+import { jsxs as l, Fragment as b, jsx as t } from "react/jsx-runtime";
+import { useEffect as H } from "react";
 import n from "clsx";
-import { Icon as b } from "../../base/icon/icon.js";
-import { ChatIconButton as g } from "./chatIconButton.js";
-import { useControllableState as w } from "../../../hooks/useControllableState.js";
-import { Chat as C } from "./chat.js";
-const H = (a) => typeof a == "number" ? `${a}px` : a, S = (a) => a === "left" ? "bottom-left" : "bottom-right";
-function P({
+import { Icon as g } from "../../base/icon/icon.js";
+import { ChatIconButton as w } from "./chatIconButton.js";
+import { useControllableState as C } from "../../../hooks/useControllableState.js";
+import { Chat as x } from "./chat.js";
+const S = (a) => typeof a == "number" ? `${a}px` : a, $ = (a) => a === "left" ? "bottom-left" : "bottom-right";
+function R({
   className: a,
-  contentClassName: r,
-  chatClassName: i,
+  contentClassName: i,
+  chatClassName: r,
   side: e = "right",
-  chatWidth: x = 400,
-  collapsed: k,
-  defaultCollapsed: I = !1,
-  onCollapsedChange: N,
-  collapseAriaLabel: v = "Collapse chat panel",
-  expandAriaLabel: A = "Expand chat panel",
-  floatingAnchor: c,
+  chatWidth: k = 400,
+  collapsed: I,
+  defaultCollapsed: N = !1,
+  onCollapsedChange: v,
+  collapseAriaLabel: A = "Collapse chat panel",
+  expandAriaLabel: B = "Expand chat panel",
+  floatingAnchor: s,
   chat: o,
   children: u,
   style: p,
-  ...m
+  "data-testid": m = "chat-layout",
+  ...f
 }) {
-  const [s, h] = w({
-    value: k,
-    defaultValue: I,
-    onChange: N
-  }), [B, d] = w({
+  const [c, h] = C({
+    value: I,
+    defaultValue: N,
+    onChange: v
+  }), [F, d] = C({
     defaultValue: !1
   });
-  E(() => {
-    s || d(!1);
-  }, [s, d]);
-  const F = c != null ? c : S(e), L = e === "left" ? "dock_to_left" : "dock_to_right", O = /* @__PURE__ */ t(
-    g,
+  H(() => {
+    c || d(!1);
+  }, [c, d]);
+  const L = s != null ? s : $(e), O = e === "left" ? "dock_to_left" : "dock_to_right", V = /* @__PURE__ */ t(
+    w,
     {
-      "aria-label": v,
+      "aria-label": A,
       "data-testid": "chat-layout-collapse",
       onClick: () => h(!0),
-      children: /* @__PURE__ */ t(b, { name: e === "left" ? "left_panel_close" : "right_panel_close", size: 18 })
+      children: /* @__PURE__ */ t(g, { name: e === "left" ? "left_panel_close" : "right_panel_close", size: 18 })
     }
-  ), V = /* @__PURE__ */ t(g, { "aria-label": A, "data-testid": "chat-layout-expand", onClick: () => h(!1), children: /* @__PURE__ */ t(b, { name: L, size: 18 }) }), j = /* @__PURE__ */ l(_, { children: [
-    o.headerActions,
-    O
-  ] }), z = /* @__PURE__ */ l(_, { children: [
+  ), j = /* @__PURE__ */ t(w, { "aria-label": B, "data-testid": "chat-layout-expand", onClick: () => h(!1), children: /* @__PURE__ */ t(g, { name: O, size: 18 }) }), z = /* @__PURE__ */ l(b, { children: [
     o.headerActions,
     V
-  ] }), f = {
-    "--smwb-chat-layout-w": H(x)
+  ] }), E = /* @__PURE__ */ l(b, { children: [
+    o.headerActions,
+    j
+  ] }), y = {
+    "--smwb-chat-layout-w": S(k)
   };
-  if (s)
+  if (c)
     return /* @__PURE__ */ l(
       "div",
       {
         className: n("smwb-chat-layout", "smwb-chat-layout_collapsed", a),
-        style: { ...f, ...p },
-        "data-testid": "chat-layout",
+        style: { ...y, ...p },
+        "data-testid": m,
+        ...f,
         "data-collapsed": "true",
-        ...m,
         children: [
-          /* @__PURE__ */ t("div", { className: n("smwb-chat-layout__content", r), "data-testid": "chat-layout-content", children: u }),
+          /* @__PURE__ */ t("div", { className: n("smwb-chat-layout__content", i), "data-testid": "chat-layout-content", children: u }),
           /* @__PURE__ */ t(
-            C,
+            x,
             {
               ...o,
-              className: i,
+              className: r,
               floatingTrigger: !0,
-              anchor: F,
+              anchor: L,
               allowedLayouts: ["floating"],
               layout: "floating",
-              open: B,
+              open: F,
               onOpenChange: d,
-              headerActions: z
+              headerActions: E
             }
           )
         ]
       }
     );
-  const y = /* @__PURE__ */ t("aside", { className: "smwb-chat-layout__panel", "data-testid": "chat-layout-panel", children: /* @__PURE__ */ t(C, { ...o, className: i, embedded: !0, allowedLayouts: [], headerActions: j }) });
+  const _ = /* @__PURE__ */ t("aside", { className: "smwb-chat-layout__panel", "data-testid": "chat-layout-panel", children: /* @__PURE__ */ t(x, { ...o, className: r, embedded: !0, allowedLayouts: [], headerActions: z }) });
   return /* @__PURE__ */ l(
     "div",
     {
       className: n("smwb-chat-layout", `smwb-chat-layout_${e}`, a),
-      style: { ...f, ...p },
-      "data-testid": "chat-layout",
+      style: { ...y, ...p },
+      "data-testid": m,
+      ...f,
       "data-collapsed": "false",
-      ...m,
       children: [
-        e === "left" ? y : null,
-        /* @__PURE__ */ t("div", { className: n("smwb-chat-layout__content", r), "data-testid": "chat-layout-content", children: u }),
-        e === "right" ? y : null
+        e === "left" ? _ : null,
+        /* @__PURE__ */ t("div", { className: n("smwb-chat-layout__content", i), "data-testid": "chat-layout-content", children: u }),
+        e === "right" ? _ : null
       ]
     }
   );
 }
 export {
-  P as ChatLayout,
-  P as default
+  R as ChatLayout,
+  R as default
 };
 //# sourceMappingURL=chatLayout.js.map

package/dist/components/dataDisplay/chat/chatLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"chatLayout.js","sources":["../../../../src/components/dataDisplay/chat/chatLayout.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, useEffect } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport ChatIconButton from \"./chatIconButton\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport Chat, { ChatProps } from \"./chat\";\nimport { ChatAnchor, ChatLayoutSide } from \"./types\";\n\nconst len = (value: number | string) => (typeof value === \"number\" ? `${value}px` : value);\n\nconst floatingAnchorForSide = (side: ChatLayoutSide): ChatAnchor => (side === \"left\" ? \"bottom-left\" : \"bottom-right\");\n\nexport type ChatLayoutChatProps = Omit<\n  ChatProps,\n  | \"className\"\n  | \"embedded\"\n  | \"floatingTrigger\"\n  | \"anchor\"\n  | \"allowedLayouts\"\n  | \"layout\"\n  | \"defaultLayout\"\n  | \"open\"\n  | \"defaultOpen\"\n  | \"onOpenChange\"\n  | \"onLayoutChange\"\n>;\n\nexport interface ChatLayoutProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  contentClassName?: string;\n  chatClassName?: string;\n  side?: ChatLayoutSide;\n  chatWidth?: number | string;\n  collapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  collapseAriaLabel?: string;\n  expandAriaLabel?: string;\n  floatingAnchor?: ChatAnchor;\n  chat: ChatLayoutChatProps;\n}\n\nexport function ChatLayout({\n  className,\n  contentClassName,\n  chatClassName,\n  side = \"right\",\n  chatWidth = 400,\n  collapsed: collapsedProp,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  collapseAriaLabel = \"Collapse chat panel\",\n  expandAriaLabel = \"Expand chat panel\",\n  floatingAnchor,\n  chat,\n  children,\n  style,\n  ...rest\n}: ChatLayoutProps) {\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: collapsedProp,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapsedChange,\n  });\n\n  const [floatingOpen, setFloatingOpen] = useControllableState<boolean>({\n    defaultValue: false,\n  });\n\n  useEffect(() => {\n    if (!collapsed) {\n      setFloatingOpen(false);\n    }\n  }, [collapsed, setFloatingOpen]);\n\n  const anchor = floatingAnchor ?? floatingAnchorForSide(side);\n  const dockIcon = side === \"left\" ? \"dock_to_left\" : \"dock_to_right\";\n  const collapseIcon = side === \"left\" ? \"left_panel_close\" : \"right_panel_close\";\n\n  const collapseButton = (\n    <ChatIconButton\n      aria-label={collapseAriaLabel}\n      data-testid=\"chat-layout-collapse\"\n      onClick={() => setCollapsed(true)}\n    >\n      <Icon name={collapseIcon} size={18} />\n    </ChatIconButton>\n  );\n\n  const expandButton = (\n    <ChatIconButton aria-label={expandAriaLabel} data-testid=\"chat-layout-expand\" onClick={() => setCollapsed(false)}>\n      <Icon name={dockIcon} size={18} />\n    </ChatIconButton>\n  );\n\n  const dockedHeaderActions = (\n    <>\n      {chat.headerActions}\n      {collapseButton}\n    </>\n  );\n\n  const floatingHeaderActions = (\n    <>\n      {chat.headerActions}\n      {expandButton}\n    </>\n  );\n\n  const cssVars = {\n    \"--smwb-chat-layout-w\": len(chatWidth),\n  } as CSSProperties;\n\n  if (collapsed) {\n    return (\n      <div\n        className={cn(\"smwb-chat-layout\", \"smwb-chat-layout_collapsed\", className)}\n        style={{ ...cssVars, ...style }}\n        data-testid=\"chat-layout\"\n        data-collapsed=\"true\"\n        {...rest}\n      >\n        <div className={cn(\"smwb-chat-layout__content\", contentClassName)} data-testid=\"chat-layout-content\">\n          {children}\n        </div>\n        <Chat\n          {...chat}\n          className={chatClassName}\n          floatingTrigger\n          anchor={anchor}\n          allowedLayouts={[\"floating\"]}\n          layout=\"floating\"\n          open={floatingOpen}\n          onOpenChange={setFloatingOpen}\n          headerActions={floatingHeaderActions}\n        />\n      </div>\n    );\n  }\n\n  const panel = (\n    <aside className=\"smwb-chat-layout__panel\" data-testid=\"chat-layout-panel\">\n      <Chat {...chat} className={chatClassName} embedded allowedLayouts={[]} headerActions={dockedHeaderActions} />\n    </aside>\n  );\n\n  return (\n    <div\n      className={cn(\"smwb-chat-layout\", `smwb-chat-layout_${side}`, className)}\n      style={{ ...cssVars, ...style }}\n      data-testid=\"chat-layout\"\n      data-collapsed=\"false\"\n      {...rest}\n    >\n      {side === \"left\" ? panel : null}\n      <div className={cn(\"smwb-chat-layout__content\", contentClassName)} data-testid=\"chat-layout-content\">\n        {children}\n      </div>\n      {side === \"right\" ? panel : null}\n    </div>\n  );\n}\n\nexport default ChatLayout;\n"],"names":["len","value","floatingAnchorForSide","side","ChatLayout","className","contentClassName","chatClassName","chatWidth","collapsedProp","defaultCollapsed","onCollapsedChange","collapseAriaLabel","expandAriaLabel","floatingAnchor","chat","children","style","rest","collapsed","setCollapsed","useControllableState","floatingOpen","setFloatingOpen","useEffect","anchor","dockIcon","collapseButton","jsx","ChatIconButton","Icon","expandButton","dockedHeaderActions","jsxs","Fragment","floatingHeaderActions","cssVars","cn","Chat","panel"],"mappings":"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"}
+{"version":3,"file":"chatLayout.js","sources":["../../../../src/components/dataDisplay/chat/chatLayout.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, useEffect } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport ChatIconButton from \"./chatIconButton\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport Chat, { ChatProps } from \"./chat\";\nimport { ChatAnchor, ChatLayoutSide } from \"./types\";\n\nconst len = (value: number | string) => (typeof value === \"number\" ? `${value}px` : value);\n\nconst floatingAnchorForSide = (side: ChatLayoutSide): ChatAnchor => (side === \"left\" ? \"bottom-left\" : \"bottom-right\");\n\nexport type ChatLayoutChatProps = Omit<\n  ChatProps,\n  | \"className\"\n  | \"embedded\"\n  | \"floatingTrigger\"\n  | \"anchor\"\n  | \"allowedLayouts\"\n  | \"layout\"\n  | \"defaultLayout\"\n  | \"open\"\n  | \"defaultOpen\"\n  | \"onOpenChange\"\n  | \"onLayoutChange\"\n>;\n\nexport interface ChatLayoutProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  contentClassName?: string;\n  chatClassName?: string;\n  side?: ChatLayoutSide;\n  chatWidth?: number | string;\n  collapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  collapseAriaLabel?: string;\n  expandAriaLabel?: string;\n  floatingAnchor?: ChatAnchor;\n  chat: ChatLayoutChatProps;\n  /** Test id of the root `<div>`; `chat-layout` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport function ChatLayout({\n  className,\n  contentClassName,\n  chatClassName,\n  side = \"right\",\n  chatWidth = 400,\n  collapsed: collapsedProp,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  collapseAriaLabel = \"Collapse chat panel\",\n  expandAriaLabel = \"Expand chat panel\",\n  floatingAnchor,\n  chat,\n  children,\n  style,\n  \"data-testid\": dataTestId = \"chat-layout\",\n  ...rest\n}: ChatLayoutProps) {\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: collapsedProp,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapsedChange,\n  });\n\n  const [floatingOpen, setFloatingOpen] = useControllableState<boolean>({\n    defaultValue: false,\n  });\n\n  useEffect(() => {\n    if (!collapsed) {\n      setFloatingOpen(false);\n    }\n  }, [collapsed, setFloatingOpen]);\n\n  const anchor = floatingAnchor ?? floatingAnchorForSide(side);\n  const dockIcon = side === \"left\" ? \"dock_to_left\" : \"dock_to_right\";\n  const collapseIcon = side === \"left\" ? \"left_panel_close\" : \"right_panel_close\";\n\n  const collapseButton = (\n    <ChatIconButton\n      aria-label={collapseAriaLabel}\n      data-testid=\"chat-layout-collapse\"\n      onClick={() => setCollapsed(true)}\n    >\n      <Icon name={collapseIcon} size={18} />\n    </ChatIconButton>\n  );\n\n  const expandButton = (\n    <ChatIconButton aria-label={expandAriaLabel} data-testid=\"chat-layout-expand\" onClick={() => setCollapsed(false)}>\n      <Icon name={dockIcon} size={18} />\n    </ChatIconButton>\n  );\n\n  const dockedHeaderActions = (\n    <>\n      {chat.headerActions}\n      {collapseButton}\n    </>\n  );\n\n  const floatingHeaderActions = (\n    <>\n      {chat.headerActions}\n      {expandButton}\n    </>\n  );\n\n  const cssVars = {\n    \"--smwb-chat-layout-w\": len(chatWidth),\n  } as CSSProperties;\n\n  if (collapsed) {\n    return (\n      <div\n        className={cn(\"smwb-chat-layout\", \"smwb-chat-layout_collapsed\", className)}\n        style={{ ...cssVars, ...style }}\n        data-testid={dataTestId}\n        {...rest}\n        // The collapsed state is the layout's own; it wins over the caller's.\n        data-collapsed=\"true\"\n      >\n        <div className={cn(\"smwb-chat-layout__content\", contentClassName)} data-testid=\"chat-layout-content\">\n          {children}\n        </div>\n        <Chat\n          {...chat}\n          className={chatClassName}\n          floatingTrigger\n          anchor={anchor}\n          allowedLayouts={[\"floating\"]}\n          layout=\"floating\"\n          open={floatingOpen}\n          onOpenChange={setFloatingOpen}\n          headerActions={floatingHeaderActions}\n        />\n      </div>\n    );\n  }\n\n  const panel = (\n    <aside className=\"smwb-chat-layout__panel\" data-testid=\"chat-layout-panel\">\n      <Chat {...chat} className={chatClassName} embedded allowedLayouts={[]} headerActions={dockedHeaderActions} />\n    </aside>\n  );\n\n  return (\n    <div\n      className={cn(\"smwb-chat-layout\", `smwb-chat-layout_${side}`, className)}\n      style={{ ...cssVars, ...style }}\n      data-testid={dataTestId}\n      {...rest}\n      // The collapsed state is the layout's own; it wins over the caller's.\n      data-collapsed=\"false\"\n    >\n      {side === \"left\" ? panel : null}\n      <div className={cn(\"smwb-chat-layout__content\", contentClassName)} data-testid=\"chat-layout-content\">\n        {children}\n      </div>\n      {side === \"right\" ? panel : null}\n    </div>\n  );\n}\n\nexport default ChatLayout;\n"],"names":["len","value","floatingAnchorForSide","side","ChatLayout","className","contentClassName","chatClassName","chatWidth","collapsedProp","defaultCollapsed","onCollapsedChange","collapseAriaLabel","expandAriaLabel","floatingAnchor","chat","children","style","dataTestId","rest","collapsed","setCollapsed","useControllableState","floatingOpen","setFloatingOpen","useEffect","anchor","dockIcon","collapseButton","jsx","ChatIconButton","Icon","expandButton","dockedHeaderActions","jsxs","Fragment","floatingHeaderActions","cssVars","cn","Chat","panel"],"mappings":"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"}

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

@@ -12,6 +12,8 @@ export interface ChatOverlayLayoutProps extends PropsWithChildren, HTMLAttribute
     defaultLayout?: ChatLayoutMode;
     defaultOpen?: boolean;
     chat: ChatOverlayLayoutChatProps;
+    /** Test id of the root `<div>`; `chat-overlay-layout` unless given. */
+    "data-testid"?: string;
 }
-export declare function ChatOverlayLayout({ className, contentClassName, chatClassName, side, chatWidth, allowedLayouts, defaultLayout, defaultOpen, chat, children, style, ...rest }: ChatOverlayLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatOverlayLayout({ className, contentClassName, chatClassName, side, chatWidth, allowedLayouts, defaultLayout, defaultOpen, chat, children, style, "data-testid": dataTestId, ...rest }: ChatOverlayLayoutProps): import("react/jsx-runtime").JSX.Element;
 export default ChatOverlayLayout;