@carto/ps-react-ui 4.20.2 → 4.21.1

package/dist/widgets-v2/table.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p } from "../table-BfTG6rrs.js";
+import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p } from "../table-CNQijNNB.js";
 export { o as DEFAULT_TABLE_LABELS, r as DEFAULT_TABLE_PAGE_SIZE, l as DEFAULT_TABLE_PAGE_SIZE_OPTIONS, i as Table, u as TableSkeleton, n as TableUI, e as compareValues, s as createTableDownloadConfig, c as deriveVisibleRows, f as filterTableByLockedRows, d as paginateRows, t as resolveColumns, a as sortRows, p as tableDataToCsv };

package/dist/widgets-v2/timeseries.js

@@ -1,7 +1,7 @@
-import { r as e } from "../zoom-toggle-CA0ifG23.js";
-import { n as t, t as n } from "../download-BT6qBamM.js";
-import { n as r, r as i, t as a } from "../utils-DtvTjjMq.js";
-import { a as o, d as s, f as c, i as l, s as u, u as d } from "../chart-config-BGt7wkK7.js";
+import { r as e } from "../zoom-toggle-KA63b6-J.js";
+import { n as t, t as n } from "../download-C7he8mSh.js";
+import { n as r, r as i, t as a } from "../utils-ClB6nn4w.js";
+import { a as o, d as s, f as c, i as l, s as u, u as d } from "../chart-config-BWxjodlt.js";
 import { c as f } from "react/compiler-runtime";
 import { Box as p, Skeleton as m } from "@mui/material";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";

package/dist/widgets-v2/utils.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../utils-DtvTjjMq.js";
+import { n as e, r as t, t as n } from "../utils-ClB6nn4w.js";
 export { t as mergeOptions, e as positionDataZoomForLegend, n as resolveThemeColor };

package/dist/widgets-v2.js

@@ -1,18 +1,18 @@
 import { t as e } from "./tooltip-DJUGNZxY.js";
-import "./components-DDt4mOQn.js";
+import "./components-DKjBezcJ.js";
 import { t } from "./smart-tooltip-CwGHCqab.js";
 import { C as n, S as r, T as i, _ as a, h as o, l as s, m as c, p as l, w as u, x as d, y as f } from "./stores-BVFMfgyo.js";
 import { i as p, n as m, o as h, r as g } from "./echart-DSz2Tu0z.js";
 import { t as _ } from "./markdown-content-BzKoX3eu.js";
-import { C as v, S as y, c as b, f as x, g as S, o as C, r as w, t as T, y as E } from "./actions-Dy9JVr7F.js";
-import { t as D } from "./zoom-toggle-CA0ifG23.js";
-import { s as O } from "./download-BT6qBamM.js";
-import { i as k, r as A } from "./formula-Dsru_p-g.js";
-import { i as j, r as M } from "./markdown-DnSJMPjQ.js";
-import { a as N, i as P } from "./spread-Dy8pshpN.js";
+import { C as v, S as y, c as b, f as x, g as S, o as C, r as w, t as T, y as E } from "./actions-C7ZAO0FG.js";
+import { t as D } from "./zoom-toggle-KA63b6-J.js";
+import { s as O } from "./download-C7he8mSh.js";
+import { i as k, r as A } from "./formula-Cqj84ZGX.js";
+import { i as j, r as M } from "./markdown-CV_KP-at.js";
+import { a as N, i as P } from "./spread-C8T12Nfh.js";
 import { n as F, r as I } from "./range-BPWVrAsY.js";
-import { i as L, r as R } from "./category-DHZscHaS.js";
-import { d as z, i as B } from "./table-BfTG6rrs.js";
+import { i as L, r as R } from "./category-DZt6yiST.js";
+import { d as z, i as B } from "./table-CNQijNNB.js";
 import { c as V } from "react/compiler-runtime";
 import { Children as H, Component as U, isValidElement as W, useEffect as G, useLayoutEffect as K, useRef as q, useState as J } from "react";
 import { Accordion as ee, AccordionDetails as te, AccordionSummary as ne, Alert as re, AlertTitle as ie, Box as Y, Button as ae, Divider as oe, Grow as se, IconButton as ce, LinearProgress as le, Link as ue, Paper as de, Popper as fe, Typography as X } from "@mui/material";

package/dist/{zoom-toggle-CA0ifG23.js → zoom-toggle-KA63b6-J.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./tooltip-DJUGNZxY.js";
-import "./components-DDt4mOQn.js";
+import "./components-DKjBezcJ.js";
 import { T as t, f as n, n as r } from "./stores-BVFMfgyo.js";
 import { c as i } from "react/compiler-runtime";
 import "react";
@@ -161,4 +161,4 @@ function y(l) {
 //#endregion
 export { f as a, p as i, g as n, h as r, y as t };
 
-//# sourceMappingURL=zoom-toggle-CA0ifG23.js.map
+//# sourceMappingURL=zoom-toggle-KA63b6-J.js.map

package/dist/{zoom-toggle-CA0ifG23.js.map → zoom-toggle-KA63b6-J.js.map}

@@ -1 +1 @@
-{"version":3,"file":"zoom-toggle-CA0ifG23.js","names":["Theme","SLIDER_HANDLE_ICON","SLIDER_HEIGHT","SLIDER_BOTTOM","ZoomAxis","CreateAddZoomOptions","axes","createAddZoom","theme","options","option","includeX","includes","includeY","sliderStyles","getZoomSliderStyles","baseSliderProps","throttle","showDetail","brushSelect","moveHandleSize","handleSize","cfg","Record","dataZoom","push","type","xAxisIndex","yAxisIndex","height","bottom","handleIcon","width","right","addZoom","secondary","palette","main","fillerColor","borderColor","borderWidth","backgroundColor","borderRadius","dataBackground","lineStyle","opacity","areaStyle","color","selectedDataBackground","handleStyle","common","white","shadowBlur","shadowColor","shadowOffsetX","shadowOffsetY","textStyle","black","text","primary","fontSize","parseInt","typography","overlineDelicate","fontFamily","caption","ZOOM_LAYOUT","sliderHeight","sliderGap","sliderBottomWithLegend","const","ZoomToggleLabels","on","off","DEFAULT_ZOOM_TOGGLE_LABELS","SxProps","Theme","styles","toggle","p","fontSize","toggleActive","background","theme","palette","primary","relatedLight","Record","useCallback","useMemo","ComponentType","IconButton","useTheme","SvgIconProps","ZoomIn","ZoomInIcon","Tooltip","getEchartInstance","useSingleTransform","useWidgetId","createAddZoom","ZoomAxis","DEFAULT_ZOOM_TOGGLE_LABELS","ZoomToggleLabels","styles","ZOOM_DESCRIPTOR","id","type","const","order","ZoomToggleProps","initialEnabled","labels","Partial","icon","iconProps","axes","ZoomToggle","t0","$","_c","t1","t2","undefined","Icon","theme","t3","_labels","t4","includes","includeX","t5","includeY","t6","resolved","push","transform","t7","enabled","toggle","t8","setOption","replaceMerge","handleToggle","tooltip","on","off","t9","t10","toggleActive","t11","t12","t13","t14"],"sources":["../src/widgets-v2/actions/zoom-toggle/transforms.ts","../src/widgets-v2/actions/zoom-toggle/labels.ts","../src/widgets-v2/actions/zoom-toggle/style.ts","../src/widgets-v2/actions/zoom-toggle/zoom-toggle.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\n\n/**\n * v1's slider handle — 9×36 SVG with a white pill body, secondary-colored\n * stroke, and three grip lines. Inlined as a data URL so the chart can\n * render it without a network fetch.\n */\nconst SLIDER_HANDLE_ICON =\n  'image://data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDkgMzYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjAuNSIgeT0iLTAuNSIgd2lkdGg9IjgiIGhlaWdodD0iMTgiIHJ4PSI0IiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDI3KSIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzM1OEJFNyIvPgo8cmVjdCB3aWR0aD0iMyIgaGVpZ2h0PSIyIiByeD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMyAyMykiIGZpbGw9IiMzNThCRTciLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMiIgcng9IjEiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDMgMTkpIiBmaWxsPSIjMzU4QkU3Ii8+CjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHJ4PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAzIDE1KSIgZmlsbD0iIzM1OEJFNyIvPgo8L3N2Zz4='\n\nconst SLIDER_HEIGHT = 32\nconst SLIDER_BOTTOM = 0\n\n/** Which chart axis (or axes) zoom applies to. */\nexport type ZoomAxis = 'x' | 'y'\n\nexport interface CreateAddZoomOptions {\n  /**\n   * Axes to enable zoom on. Default `['x']` (matches bar / histogram /\n   * timeseries — horizontal pan/zoom on the category axis). Pass\n   * `['x', 'y']` for a scatterplot-style 2D zoom (mouse-wheel scales both\n   * axes; a horizontal slider sits at the bottom for x-range and a\n   * vertical slider sits on the right for y-range).\n   */\n  axes?: readonly ZoomAxis[]\n}\n\n/**\n * Theme-bound zoom config transform: adds one inside `dataZoom`\n * (mouse-wheel + drag) per axis plus a styled slider per axis with the\n * v1 chrome (blue-tinted filler, secondary-color data preview, white\n * pill handles, CARTO typography). The x-slider is horizontal at the\n * bottom; the y-slider is vertical on the right.\n *\n * Returned function has stable identity for a given theme + axes\n * combination; pair with `useMemo` at the call site.\n *\n * **No `start` / `end`** are emitted: ECharts defaults to `0–100` on the\n * first `setOption` and then keeps the runtime slider state across\n * subsequent merges (no `replaceMerge` for `dataZoom`). Re-running the\n * transform on data/formatter/RelativeData updates therefore preserves the\n * user's dragged range instead of snapping it back.\n */\nexport function createAddZoom(\n  theme: Theme,\n  options: CreateAddZoomOptions = {},\n): (option: unknown) => unknown {\n  const axes = options.axes ?? ['x']\n  const includeX = axes.includes('x')\n  const includeY = axes.includes('y')\n  const sliderStyles = getZoomSliderStyles(theme)\n  const baseSliderProps = {\n    throttle: 0,\n    showDetail: false,\n    brushSelect: false,\n    moveHandleSize: 8,\n    handleSize: '100%',\n    ...sliderStyles,\n  }\n  return (option: unknown): unknown => {\n    if (option == null || typeof option !== 'object') return option\n    const cfg = option as Record<string, unknown>\n    const dataZoom: object[] = []\n    if (includeX) {\n      dataZoom.push({ type: 'inside', xAxisIndex: [0], throttle: 0 })\n    }\n    if (includeY) {\n      dataZoom.push({ type: 'inside', yAxisIndex: [0], throttle: 0 })\n    }\n    if (includeX) {\n      dataZoom.push({\n        type: 'slider',\n        xAxisIndex: [0],\n        height: SLIDER_HEIGHT,\n        bottom: SLIDER_BOTTOM,\n        handleIcon: SLIDER_HANDLE_ICON,\n        ...baseSliderProps,\n      })\n    }\n    if (includeY) {\n      // Vertical slider — `width` is its thickness, `right` pins it to\n      // the right edge. We omit `handleIcon` so ECharts renders its\n      // default vertical handle (the inline SVG is shaped for a\n      // horizontal slider and looks wrong when rotated).\n      dataZoom.push({\n        type: 'slider',\n        yAxisIndex: [0],\n        width: SLIDER_HEIGHT,\n        right: SLIDER_BOTTOM,\n        ...baseSliderProps,\n      })\n    }\n    return { ...cfg, dataZoom }\n  }\n}\n\n/**\n * Back-compat untyped transform — produces the bare `dataZoom` config from\n * the original v2 implementation. Use {@link createAddZoom} when a theme is\n * available so the slider matches the v1 styling.\n *\n * `start` / `end` are intentionally omitted so ECharts preserves the user's\n * runtime range across subsequent `setOption` merges (see {@link createAddZoom}).\n */\nexport const addZoom = (option: unknown): unknown => {\n  if (option == null || typeof option !== 'object') return option\n  const cfg = option as Record<string, unknown>\n  return {\n    ...cfg,\n    dataZoom: [\n      { type: 'inside' },\n      {\n        type: 'slider',\n        height: SLIDER_HEIGHT,\n        bottom: SLIDER_BOTTOM,\n      },\n    ],\n  }\n}\n\n/** Style block matching v1's `getEChartZoomSliderStyles`. */\nfunction getZoomSliderStyles(theme: Theme) {\n  const secondary = theme.palette.secondary?.main ?? '#358BE7'\n  return {\n    fillerColor: 'rgba(53, 139, 231, 0.25)',\n    borderColor: 'rgba(53, 139, 231, 0.3)',\n    borderWidth: 0.5,\n    backgroundColor: 'transparent',\n    borderRadius: 4,\n    dataBackground: {\n      lineStyle: { opacity: 0 },\n      areaStyle: { opacity: 1, color: secondary },\n    },\n    selectedDataBackground: {\n      lineStyle: { opacity: 0 },\n      areaStyle: { opacity: 1, color: secondary },\n    },\n    handleStyle: {\n      color: theme.palette.common?.white ?? '#fff',\n      borderColor: 'rgba(3, 111, 226, 0.08)',\n      borderWidth: 1,\n      shadowBlur: 3,\n      shadowColor: 'rgba(0, 0, 0, 0.1)',\n      shadowOffsetX: 0,\n      shadowOffsetY: 1,\n    },\n    textStyle: {\n      color: theme.palette.black?.[60] ?? theme.palette.text?.primary,\n      fontSize: parseInt(\n        (theme.typography.overlineDelicate?.fontSize as string | undefined) ??\n          '11',\n      ),\n      fontFamily:\n        theme.typography.overlineDelicate?.fontFamily ??\n        theme.typography.caption?.fontFamily,\n    },\n  }\n}\n\n/**\n * Visual layout constants used by the data-fusion mergers (bar, histogram,\n * timeseries) when laying out the slider against the legend / grid.\n */\nexport const ZOOM_LAYOUT = {\n  /** Slider height in px (matches `createAddZoom` output). */\n  sliderHeight: SLIDER_HEIGHT,\n  /** Vertical gap between chart grid and the slider. */\n  sliderGap: 8,\n  /** Slider `bottom` when a legend is shown — sits above the legend row. */\n  sliderBottomWithLegend: 28,\n} as const\n","export interface ZoomToggleLabels {\n  on: string\n  off: string\n}\n\nexport const DEFAULT_ZOOM_TOGGLE_LABELS: ZoomToggleLabels = {\n  on: 'Disable zoom',\n  off: 'Enable zoom',\n}\n","import type { SxProps, Theme } from '@mui/material'\n\nexport const styles = {\n  toggle: {\n    p: 0.5,\n    '& .MuiSvgIcon-root': { fontSize: 20 },\n  },\n  toggleActive: {\n    background: (theme: Theme) => theme.palette.primary.relatedLight,\n  },\n} satisfies Record<string, SxProps<Theme>>\n","import { useCallback, useMemo, type ComponentType } from 'react'\nimport { IconButton, useTheme, type SvgIconProps } from '@mui/material'\nimport { ZoomIn as ZoomInIcon } from '@mui/icons-material'\nimport { Tooltip } from '../../../components'\nimport {\n  getEchartInstance,\n  useSingleTransform,\n  useWidgetId,\n} from '../../stores'\nimport { createAddZoom, type ZoomAxis } from './transforms'\nimport { DEFAULT_ZOOM_TOGGLE_LABELS, type ZoomToggleLabels } from './labels'\nimport { styles } from './style'\n\nconst ZOOM_DESCRIPTOR = {\n  id: 'zoom-toggle',\n  type: 'config' as const,\n  order: 20,\n}\n\nexport interface ZoomToggleProps {\n  initialEnabled?: boolean\n  labels?: Partial<ZoomToggleLabels>\n  icon?: ComponentType<SvgIconProps>\n  iconProps?: SvgIconProps\n  /**\n   * Which axes the zoom controls. Default `['x']` — matches bar /\n   * histogram / timeseries (horizontal pan on the category axis). Pass\n   * `['x', 'y']` for 2D zoom on a scatterplot-style chart (mouse-wheel\n   * scales both axes; horizontal slider at bottom + vertical slider on\n   * the right).\n   */\n  axes?: readonly ZoomAxis[]\n}\n\n/**\n * Toggle a `dataZoom` slider + wheel-zoom on the chart. The transform is\n * theme-bound so the slider gets v1's CARTO chrome (blue-tinted filler,\n * secondary-color preview, white pill handles).\n *\n * `dataZoom` is intentionally NOT in `replaceMergeKeys` — ECharts merges\n * subsequent `setOption` calls so the user's dragged range survives\n * unrelated re-renders (data updates, formatter swaps, RelativeData toggles).\n *\n * On disable the transform is unregistered, but ECharts' merge semantics\n * would otherwise *keep* the live `dataZoom` component visible. To remove\n * the slider immediately we issue a one-shot\n * `setOption({}, { replaceMerge: ['dataZoom'] })` against the live chart\n * instance via {@link getEchartInstance} — this bypasses the pipeline so\n * unrelated transforms aren't disturbed.\n */\nexport function ZoomToggle({\n  initialEnabled = false,\n  labels,\n  icon: Icon = ZoomInIcon,\n  iconProps,\n  axes,\n}: ZoomToggleProps) {\n  const id = useWidgetId()\n  const theme = useTheme()\n  const _labels = { ...DEFAULT_ZOOM_TOGGLE_LABELS, ...labels }\n  // Reduce `axes` to two structural booleans before memoizing so the memo\n  // depends on stable primitive values, not an array reference (callers\n  // typically pass an inline `axes={['x', 'y']}` literal that changes\n  // identity each render). Default — no `axes` prop — is x-axis only,\n  // matching `createAddZoom`'s default.\n  const includeX = axes ? axes.includes('x') : true\n  const includeY = axes ? axes.includes('y') : false\n  const transform = useMemo(() => {\n    const resolved: ZoomAxis[] = []\n    if (includeX) resolved.push('x')\n    if (includeY) resolved.push('y')\n    return createAddZoom(theme, { axes: resolved })\n  }, [theme, includeX, includeY])\n  const { enabled, toggle } = useSingleTransform(\n    id,\n    ZOOM_DESCRIPTOR,\n    transform,\n    { initialEnabled },\n  )\n\n  const handleToggle = useCallback(() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }, [enabled, toggle, id])\n\n  const tooltip = enabled ? _labels.on : _labels.off\n\n  return (\n    <Tooltip title={tooltip}>\n      <IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"zoom-toggle-KA63b6-J.js","names":["Theme","SLIDER_HANDLE_ICON","SLIDER_HEIGHT","SLIDER_BOTTOM","ZoomAxis","CreateAddZoomOptions","axes","createAddZoom","theme","options","option","includeX","includes","includeY","sliderStyles","getZoomSliderStyles","baseSliderProps","throttle","showDetail","brushSelect","moveHandleSize","handleSize","cfg","Record","dataZoom","push","type","xAxisIndex","yAxisIndex","height","bottom","handleIcon","width","right","addZoom","secondary","palette","main","fillerColor","borderColor","borderWidth","backgroundColor","borderRadius","dataBackground","lineStyle","opacity","areaStyle","color","selectedDataBackground","handleStyle","common","white","shadowBlur","shadowColor","shadowOffsetX","shadowOffsetY","textStyle","black","text","primary","fontSize","parseInt","typography","overlineDelicate","fontFamily","caption","ZOOM_LAYOUT","sliderHeight","sliderGap","sliderBottomWithLegend","const","ZoomToggleLabels","on","off","DEFAULT_ZOOM_TOGGLE_LABELS","SxProps","Theme","styles","toggle","p","fontSize","toggleActive","background","theme","palette","primary","relatedLight","Record","useCallback","useMemo","ComponentType","IconButton","useTheme","SvgIconProps","ZoomIn","ZoomInIcon","Tooltip","getEchartInstance","useSingleTransform","useWidgetId","createAddZoom","ZoomAxis","DEFAULT_ZOOM_TOGGLE_LABELS","ZoomToggleLabels","styles","ZOOM_DESCRIPTOR","id","type","const","order","ZoomToggleProps","initialEnabled","labels","Partial","icon","iconProps","axes","ZoomToggle","t0","$","_c","t1","t2","undefined","Icon","theme","t3","_labels","t4","includes","includeX","t5","includeY","t6","resolved","push","transform","t7","enabled","toggle","t8","setOption","replaceMerge","handleToggle","tooltip","on","off","t9","t10","toggleActive","t11","t12","t13","t14"],"sources":["../src/widgets-v2/actions/zoom-toggle/transforms.ts","../src/widgets-v2/actions/zoom-toggle/labels.ts","../src/widgets-v2/actions/zoom-toggle/style.ts","../src/widgets-v2/actions/zoom-toggle/zoom-toggle.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\n\n/**\n * v1's slider handle — 9×36 SVG with a white pill body, secondary-colored\n * stroke, and three grip lines. Inlined as a data URL so the chart can\n * render it without a network fetch.\n */\nconst SLIDER_HANDLE_ICON =\n  'image://data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDkgMzYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjAuNSIgeT0iLTAuNSIgd2lkdGg9IjgiIGhlaWdodD0iMTgiIHJ4PSI0IiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDI3KSIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzM1OEJFNyIvPgo8cmVjdCB3aWR0aD0iMyIgaGVpZ2h0PSIyIiByeD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMyAyMykiIGZpbGw9IiMzNThCRTciLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMiIgcng9IjEiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDMgMTkpIiBmaWxsPSIjMzU4QkU3Ii8+CjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHJ4PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAzIDE1KSIgZmlsbD0iIzM1OEJFNyIvPgo8L3N2Zz4='\n\nconst SLIDER_HEIGHT = 32\nconst SLIDER_BOTTOM = 0\n\n/** Which chart axis (or axes) zoom applies to. */\nexport type ZoomAxis = 'x' | 'y'\n\nexport interface CreateAddZoomOptions {\n  /**\n   * Axes to enable zoom on. Default `['x']` (matches bar / histogram /\n   * timeseries — horizontal pan/zoom on the category axis). Pass\n   * `['x', 'y']` for a scatterplot-style 2D zoom (mouse-wheel scales both\n   * axes; a horizontal slider sits at the bottom for x-range and a\n   * vertical slider sits on the right for y-range).\n   */\n  axes?: readonly ZoomAxis[]\n}\n\n/**\n * Theme-bound zoom config transform: adds one inside `dataZoom`\n * (mouse-wheel + drag) per axis plus a styled slider per axis with the\n * v1 chrome (blue-tinted filler, secondary-color data preview, white\n * pill handles, CARTO typography). The x-slider is horizontal at the\n * bottom; the y-slider is vertical on the right.\n *\n * Returned function has stable identity for a given theme + axes\n * combination; pair with `useMemo` at the call site.\n *\n * **No `start` / `end`** are emitted: ECharts defaults to `0–100` on the\n * first `setOption` and then keeps the runtime slider state across\n * subsequent merges (no `replaceMerge` for `dataZoom`). Re-running the\n * transform on data/formatter/RelativeData updates therefore preserves the\n * user's dragged range instead of snapping it back.\n */\nexport function createAddZoom(\n  theme: Theme,\n  options: CreateAddZoomOptions = {},\n): (option: unknown) => unknown {\n  const axes = options.axes ?? ['x']\n  const includeX = axes.includes('x')\n  const includeY = axes.includes('y')\n  const sliderStyles = getZoomSliderStyles(theme)\n  const baseSliderProps = {\n    throttle: 0,\n    showDetail: false,\n    brushSelect: false,\n    moveHandleSize: 8,\n    handleSize: '100%',\n    ...sliderStyles,\n  }\n  return (option: unknown): unknown => {\n    if (option == null || typeof option !== 'object') return option\n    const cfg = option as Record<string, unknown>\n    const dataZoom: object[] = []\n    if (includeX) {\n      dataZoom.push({ type: 'inside', xAxisIndex: [0], throttle: 0 })\n    }\n    if (includeY) {\n      dataZoom.push({ type: 'inside', yAxisIndex: [0], throttle: 0 })\n    }\n    if (includeX) {\n      dataZoom.push({\n        type: 'slider',\n        xAxisIndex: [0],\n        height: SLIDER_HEIGHT,\n        bottom: SLIDER_BOTTOM,\n        handleIcon: SLIDER_HANDLE_ICON,\n        ...baseSliderProps,\n      })\n    }\n    if (includeY) {\n      // Vertical slider — `width` is its thickness, `right` pins it to\n      // the right edge. We omit `handleIcon` so ECharts renders its\n      // default vertical handle (the inline SVG is shaped for a\n      // horizontal slider and looks wrong when rotated).\n      dataZoom.push({\n        type: 'slider',\n        yAxisIndex: [0],\n        width: SLIDER_HEIGHT,\n        right: SLIDER_BOTTOM,\n        ...baseSliderProps,\n      })\n    }\n    return { ...cfg, dataZoom }\n  }\n}\n\n/**\n * Back-compat untyped transform — produces the bare `dataZoom` config from\n * the original v2 implementation. Use {@link createAddZoom} when a theme is\n * available so the slider matches the v1 styling.\n *\n * `start` / `end` are intentionally omitted so ECharts preserves the user's\n * runtime range across subsequent `setOption` merges (see {@link createAddZoom}).\n */\nexport const addZoom = (option: unknown): unknown => {\n  if (option == null || typeof option !== 'object') return option\n  const cfg = option as Record<string, unknown>\n  return {\n    ...cfg,\n    dataZoom: [\n      { type: 'inside' },\n      {\n        type: 'slider',\n        height: SLIDER_HEIGHT,\n        bottom: SLIDER_BOTTOM,\n      },\n    ],\n  }\n}\n\n/** Style block matching v1's `getEChartZoomSliderStyles`. */\nfunction getZoomSliderStyles(theme: Theme) {\n  const secondary = theme.palette.secondary?.main ?? '#358BE7'\n  return {\n    fillerColor: 'rgba(53, 139, 231, 0.25)',\n    borderColor: 'rgba(53, 139, 231, 0.3)',\n    borderWidth: 0.5,\n    backgroundColor: 'transparent',\n    borderRadius: 4,\n    dataBackground: {\n      lineStyle: { opacity: 0 },\n      areaStyle: { opacity: 1, color: secondary },\n    },\n    selectedDataBackground: {\n      lineStyle: { opacity: 0 },\n      areaStyle: { opacity: 1, color: secondary },\n    },\n    handleStyle: {\n      color: theme.palette.common?.white ?? '#fff',\n      borderColor: 'rgba(3, 111, 226, 0.08)',\n      borderWidth: 1,\n      shadowBlur: 3,\n      shadowColor: 'rgba(0, 0, 0, 0.1)',\n      shadowOffsetX: 0,\n      shadowOffsetY: 1,\n    },\n    textStyle: {\n      color: theme.palette.black?.[60] ?? theme.palette.text?.primary,\n      fontSize: parseInt(\n        (theme.typography.overlineDelicate?.fontSize as string | undefined) ??\n          '11',\n      ),\n      fontFamily:\n        theme.typography.overlineDelicate?.fontFamily ??\n        theme.typography.caption?.fontFamily,\n    },\n  }\n}\n\n/**\n * Visual layout constants used by the data-fusion mergers (bar, histogram,\n * timeseries) when laying out the slider against the legend / grid.\n */\nexport const ZOOM_LAYOUT = {\n  /** Slider height in px (matches `createAddZoom` output). */\n  sliderHeight: SLIDER_HEIGHT,\n  /** Vertical gap between chart grid and the slider. */\n  sliderGap: 8,\n  /** Slider `bottom` when a legend is shown — sits above the legend row. */\n  sliderBottomWithLegend: 28,\n} as const\n","export interface ZoomToggleLabels {\n  on: string\n  off: string\n}\n\nexport const DEFAULT_ZOOM_TOGGLE_LABELS: ZoomToggleLabels = {\n  on: 'Disable zoom',\n  off: 'Enable zoom',\n}\n","import type { SxProps, Theme } from '@mui/material'\n\nexport const styles = {\n  toggle: {\n    p: 0.5,\n    '& .MuiSvgIcon-root': { fontSize: 20 },\n  },\n  toggleActive: {\n    background: (theme: Theme) => theme.palette.primary.relatedLight,\n  },\n} satisfies Record<string, SxProps<Theme>>\n","import { useCallback, useMemo, type ComponentType } from 'react'\nimport { IconButton, useTheme, type SvgIconProps } from '@mui/material'\nimport { ZoomIn as ZoomInIcon } from '@mui/icons-material'\nimport { Tooltip } from '../../../components'\nimport {\n  getEchartInstance,\n  useSingleTransform,\n  useWidgetId,\n} from '../../stores'\nimport { createAddZoom, type ZoomAxis } from './transforms'\nimport { DEFAULT_ZOOM_TOGGLE_LABELS, type ZoomToggleLabels } from './labels'\nimport { styles } from './style'\n\nconst ZOOM_DESCRIPTOR = {\n  id: 'zoom-toggle',\n  type: 'config' as const,\n  order: 20,\n}\n\nexport interface ZoomToggleProps {\n  initialEnabled?: boolean\n  labels?: Partial<ZoomToggleLabels>\n  icon?: ComponentType<SvgIconProps>\n  iconProps?: SvgIconProps\n  /**\n   * Which axes the zoom controls. Default `['x']` — matches bar /\n   * histogram / timeseries (horizontal pan on the category axis). Pass\n   * `['x', 'y']` for 2D zoom on a scatterplot-style chart (mouse-wheel\n   * scales both axes; horizontal slider at bottom + vertical slider on\n   * the right).\n   */\n  axes?: readonly ZoomAxis[]\n}\n\n/**\n * Toggle a `dataZoom` slider + wheel-zoom on the chart. The transform is\n * theme-bound so the slider gets v1's CARTO chrome (blue-tinted filler,\n * secondary-color preview, white pill handles).\n *\n * `dataZoom` is intentionally NOT in `replaceMergeKeys` — ECharts merges\n * subsequent `setOption` calls so the user's dragged range survives\n * unrelated re-renders (data updates, formatter swaps, RelativeData toggles).\n *\n * On disable the transform is unregistered, but ECharts' merge semantics\n * would otherwise *keep* the live `dataZoom` component visible. To remove\n * the slider immediately we issue a one-shot\n * `setOption({}, { replaceMerge: ['dataZoom'] })` against the live chart\n * instance via {@link getEchartInstance} — this bypasses the pipeline so\n * unrelated transforms aren't disturbed.\n */\nexport function ZoomToggle({\n  initialEnabled = false,\n  labels,\n  icon: Icon = ZoomInIcon,\n  iconProps,\n  axes,\n}: ZoomToggleProps) {\n  const id = useWidgetId()\n  const theme = useTheme()\n  const _labels = { ...DEFAULT_ZOOM_TOGGLE_LABELS, ...labels }\n  // Reduce `axes` to two structural booleans before memoizing so the memo\n  // depends on stable primitive values, not an array reference (callers\n  // typically pass an inline `axes={['x', 'y']}` literal that changes\n  // identity each render). Default — no `axes` prop — is x-axis only,\n  // matching `createAddZoom`'s default.\n  const includeX = axes ? axes.includes('x') : true\n  const includeY = axes ? axes.includes('y') : false\n  const transform = useMemo(() => {\n    const resolved: ZoomAxis[] = []\n    if (includeX) resolved.push('x')\n    if (includeY) resolved.push('y')\n    return createAddZoom(theme, { axes: resolved })\n  }, [theme, includeX, includeY])\n  const { enabled, toggle } = useSingleTransform(\n    id,\n    ZOOM_DESCRIPTOR,\n    transform,\n    { initialEnabled },\n  )\n\n  const handleToggle = useCallback(() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }, [enabled, toggle, id])\n\n  const tooltip = enabled ? _labels.on : _labels.off\n\n  return (\n    <Tooltip title={tooltip}>\n      <IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "4.20.2",
+  "version": "4.21.1",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {
@@ -17,7 +17,7 @@
     "react-dom": "19.2.8",
     "react-markdown": "10.1.0",
     "zustand": "5.0.15",
-    "@carto/ps-utils": "2.1.0",
+    "@carto/ps-utils": "2.1.1",
     "@carto/ps-common-types": "1.0.0"
   },
   "peerDependencies": {
@@ -35,7 +35,7 @@
     "react-dom": "^19.2.0",
     "react-markdown": "^10.0.0",
     "zustand": "^5.0.0",
-    "@carto/ps-utils": "2.1.0"
+    "@carto/ps-utils": "2.1.1"
   },
   "exports": {
     "./chat": {
@@ -244,7 +244,8 @@
   "dependencies": {
     "rehype-raw": "7.0.0",
     "rehype-sanitize": "6.0.0",
-    "remark-gfm": "4.0.1"
+    "remark-gfm": "4.0.1",
+    "type-fest": "5.8.0"
   },
   "scripts": {
     "dev": "vite build --watch --emptyOutDir=false",

package/src/chat/bubbles/styles.ts

@@ -1,15 +1,34 @@
-import { styled, Typography, type SxProps, type Theme } from '@mui/material'
+import {
+  styled,
+  Typography,
+  type SxProps,
+  type Theme,
+  type TypographyProps,
+} from '@mui/material'
+import type { CSSObject } from '@mui/material/styles'
+import type { FC } from 'react'
 
-export const ChatMessageOverflow = styled(Typography)(() => ({
-  whiteSpace: 'pre-wrap',
-  overflowX: 'clip',
-  overflowWrap: 'break-word',
-  maxWidth: '100%',
-}))
+// The explicit annotation is what keeps this file's .d.ts emittable: the type
+// `styled()` infers can only be named through a pnpm-internal @mui/system path
+// (TS2742), and vite-plugin-dts drops the whole declaration when that happens.
+//
+// ponytail: `component` and `ref` still typecheck, but the prop re-typing that
+// comes with them does not — `component="a" href="#"` is rejected here and
+// accepted on `Typography` itself. Restoring it needs `OverridableComponent`,
+// which a MUI v5 `styled()` result isn't assignable to under React 19 types.
+// Consumers who need the polymorphism use `Typography` directly.
+export const ChatMessageOverflow: FC<TypographyProps> = styled(Typography)(
+  () => ({
+    whiteSpace: 'pre-wrap',
+    overflowX: 'clip',
+    overflowWrap: 'break-word',
+    maxWidth: '100%',
+  }),
+)
 ChatMessageOverflow.displayName = 'ChatMessageOverflow'
 
 export const styles = {
-  agentMessageContainer: (theme: Theme) => ({
+  agentMessageContainer: (theme: Theme): CSSObject => ({
     ...theme.typography.body2,
     width: '100%',
     display: 'flex',

package/src/chat/feedback/chat-actions-container.tsx

@@ -1,6 +1,9 @@
-import { Box, styled } from '@mui/material'
+import { Box, styled, type BoxProps } from '@mui/material'
+import type { FC } from 'react'
 
-export const ChatActionsContainer = styled(Box)(({ theme }) => ({
+// See chat/bubbles/styles.ts: the annotation keeps the declaration emittable,
+// and what it gives up on `component=`.
+export const ChatActionsContainer: FC<BoxProps> = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(0.5),

package/src/chat/feedback/styles.ts

@@ -121,12 +121,14 @@ export const styles = {
     padding: ({ spacing }) => spacing(1),
     borderRadius: ({ spacing }) => spacing(0.5),
     backgroundColor: ({ palette }) => palette.background.default,
-    fontFamily: ({ typography }) =>
+    fontFamily: ({ typography }): string =>
       typography.code3?.fontFamily ??
       typography.code1?.fontFamily ??
       'monospace',
-    fontSize: ({ typography }) => typography.code3?.fontSize ?? '0.75rem',
-    lineHeight: ({ typography }) => typography.code3?.lineHeight ?? 1.333,
+    fontSize: ({ typography }): string | number =>
+      typography.code3?.fontSize ?? '0.75rem',
+    lineHeight: ({ typography }): string | number =>
+      typography.code3?.lineHeight ?? 1.333,
     whiteSpace: 'pre-wrap',
     wordBreak: 'break-word',
     overflowY: 'auto',
@@ -164,11 +166,12 @@ export const styles = {
     padding: ({ spacing }) => spacing(1),
     background: ({ palette, spacing }) =>
       `linear-gradient(to right, ${palette.action.hover} calc(${spacing(1)} + 3em), ${palette.background.default} calc(${spacing(1)} + 3em))`,
-    fontFamily: ({ typography }) =>
+    fontFamily: ({ typography }): string =>
       typography.code3?.fontFamily ??
       typography.code1?.fontFamily ??
       'monospace',
-    fontSize: ({ typography }) => typography.code3?.fontSize ?? '0.75rem',
+    fontSize: ({ typography }): string | number =>
+      typography.code3?.fontSize ?? '0.75rem',
     whiteSpace: 'pre-wrap',
     wordBreak: 'break-word',
     lineHeight: 1.6,

package/src/components/basemaps/basemaps.tsx

@@ -40,7 +40,7 @@ export function BasemapsUI({
   onChange,
   TooltipProps,
 }: BasemapsUIProps): JSX.Element {
-  const [toggleRef, setToggleRef] = useState<HTMLButtonElement | null>(null)
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
   const [isOpen, setIsOpen] = useState(false)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
   const [timer, setTimer] = useState<number | null>(null)
@@ -55,7 +55,7 @@ export function BasemapsUI({
   const groupCount = Object.keys(groups).length
 
   const handleClose = () => {
-    setToggleRef(null)
+    setAnchorEl(null)
     setIsOpen(false)
   }
 
@@ -93,7 +93,7 @@ export function BasemapsUI({
         <IconButton
           sx={styles.toggle}
           onClick={(e) => {
-            setToggleRef(e.currentTarget as HTMLButtonElement)
+            setAnchorEl(e.currentTarget as HTMLButtonElement)
             setIsOpen(true)
           }}
         >
@@ -105,7 +105,7 @@ export function BasemapsUI({
       </Tooltip>
 
       <ResponsiveDrawer
-        ref={toggleRef}
+        anchorEl={anchorEl}
         slotProps={{
           paper: {
             sx: {

package/src/components/responsive-drawer/responsive-drawer.test.tsx

@@ -10,8 +10,8 @@ const theme = createTheme()
 describe('ResponsiveDrawer', () => {
   const mockOnChangeCollapsed = vi.fn()
 
-  // A real anchor element: the desktop Popover only opens when `ref != null`
-  // (the open-by-default guard), and positioning needs a DOM node.
+  // A real anchor element: the desktop Popover only opens when the anchor is
+  // non-null (the open-by-default guard), and positioning needs a DOM node.
   let anchor: HTMLElement
 
   const defaultProps = {
@@ -32,10 +32,20 @@ describe('ResponsiveDrawer', () => {
     anchor.remove()
   })
 
+  test('accepts the anchor through the deprecated `ref` alias', () => {
+    render(
+      <ThemeProvider theme={theme}>
+        <ResponsiveDrawer ref={anchor} {...defaultProps} />
+      </ThemeProvider>,
+    )
+
+    expect(screen.getByTestId('drawer-content')).toBeDefined()
+  })
+
   test('renders in desktop mode when isMobile is false', () => {
     const { container } = render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} />
       </ThemeProvider>,
     )
 
@@ -50,12 +60,12 @@ describe('ResponsiveDrawer', () => {
     expect(presentationElements.length).toBe(0)
   })
 
-  test('does not open the desktop popover until the anchor ref resolves', () => {
-    // Open-by-default guard: collapsed=false but ref=null → stays closed so the
-    // popover never renders with a null anchorEl.
+  test('does not open the desktop popover until the anchor resolves', () => {
+    // Open-by-default guard: collapsed=false but anchorEl=null → stays closed so
+    // the popover never renders with a null anchorEl.
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={null} {...defaultProps} />
+        <ResponsiveDrawer anchorEl={null} {...defaultProps} />
       </ThemeProvider>,
     )
     expect(screen.queryByTestId('drawer-content')).toBeNull()
@@ -64,7 +74,7 @@ describe('ResponsiveDrawer', () => {
   test('renders in mobile mode when isMobile is true', () => {
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} isMobile={true} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} isMobile={true} />
       </ThemeProvider>,
     )
 
@@ -82,7 +92,11 @@ describe('ResponsiveDrawer', () => {
   test('hides content when collapsed is true in desktop mode', () => {
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} collapsed={true} />
+        <ResponsiveDrawer
+          anchorEl={anchor}
+          {...defaultProps}
+          collapsed={true}
+        />
       </ThemeProvider>,
     )
 
@@ -94,7 +108,7 @@ describe('ResponsiveDrawer', () => {
   test('closes drawer when clicking outside in mobile mode', () => {
     const { container } = render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} isMobile={true} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} isMobile={true} />
       </ThemeProvider>,
     )
 
@@ -119,7 +133,7 @@ describe('ResponsiveDrawer', () => {
         render(
           <ThemeProvider theme={theme}>
             <ResponsiveDrawer
-              ref={anchor}
+              anchorEl={anchor}
               {...defaultProps}
               position={position}
             />
@@ -132,7 +146,7 @@ describe('ResponsiveDrawer', () => {
   test('modal (default): renders an (invisible) backdrop', () => {
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} />
       </ThemeProvider>,
     )
     // The popover portals to document.body, so query the whole document.
@@ -145,7 +159,7 @@ describe('ResponsiveDrawer', () => {
       render(
         <ThemeProvider theme={theme}>
           <ResponsiveDrawer
-            ref={anchor}
+            anchorEl={anchor}
             {...defaultProps}
             slotProps={slotProps}
           />
@@ -157,7 +171,7 @@ describe('ResponsiveDrawer', () => {
   test('defaults to portaling into document.body when container is omitted', () => {
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} />
       </ThemeProvider>,
     )
     const content = screen.getByTestId('drawer-content')
@@ -172,7 +186,7 @@ describe('ResponsiveDrawer', () => {
       render(
         <ThemeProvider theme={theme}>
           <ResponsiveDrawer
-            ref={anchor}
+            anchorEl={anchor}
             {...defaultProps}
             container={customContainer}
           />
@@ -197,7 +211,7 @@ describe('ResponsiveDrawer', () => {
       render(
         <ThemeProvider theme={theme}>
           <ResponsiveDrawer
-            ref={anchor}
+            anchorEl={anchor}
             {...defaultProps}
             container={customContainer}
           />
@@ -225,7 +239,7 @@ describe('ResponsiveDrawer', () => {
   test('leaves paper maxHeight unset when no container is given', () => {
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} />
       </ThemeProvider>,
     )
     const paper = document.querySelector<HTMLElement>('.MuiPopover-paper')!
@@ -247,7 +261,7 @@ describe('ResponsiveDrawer', () => {
       render(
         <ThemeProvider theme={theme}>
           <ResponsiveDrawer
-            ref={anchor}
+            anchorEl={anchor}
             {...defaultProps}
             container={customContainer}
           />
@@ -271,7 +285,7 @@ describe('ResponsiveDrawer', () => {
       render(
         <ThemeProvider theme={theme}>
           <ResponsiveDrawer
-            ref={anchor}
+            anchorEl={anchor}
             {...defaultProps}
             container={customContainer}
             slotProps={
@@ -297,7 +311,7 @@ describe('ResponsiveDrawer', () => {
       render(
         <ThemeProvider theme={theme}>
           <ResponsiveDrawer
-            ref={anchor}
+            anchorEl={anchor}
             {...defaultProps}
             sx={{ zIndex: 9999 }}
           />
@@ -311,7 +325,7 @@ describe('ResponsiveDrawer', () => {
   test('non-modal: renders no backdrop', () => {
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} modal={false} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} modal={false} />
       </ThemeProvider>,
     )
     expect(document.querySelector('.MuiBackdrop-root')).toBeNull()
@@ -322,7 +336,7 @@ describe('ResponsiveDrawer', () => {
   test('non-modal: Escape does not close the panel', () => {
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} modal={false} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} modal={false} />
       </ThemeProvider>,
     )
     // Fire on a node inside the Modal root so it reaches the Modal's key handler.
@@ -336,7 +350,7 @@ describe('ResponsiveDrawer', () => {
   test('modal (default): Escape closes the panel', () => {
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} />
       </ThemeProvider>,
     )
     fireEvent.keyDown(screen.getByTestId('drawer-content'), {

package/src/components/responsive-drawer/responsive-drawer.tsx

@@ -14,10 +14,7 @@ import {
 } from 'react'
 
 type ResponsiveDrawerPosition =
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right'
+  'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
 
 /** Placement of the panel relative to its anchor (desktop popover only). */
 export type ResponsiveDrawerPlacement = 'side' | 'overlay'
@@ -59,6 +56,7 @@ export function ResponsiveDrawer<
     slotProps?: PopoverProps['slotProps']
   },
 >({
+  anchorEl,
   ref,
   children,
   collapsed,
@@ -72,8 +70,15 @@ export function ResponsiveDrawer<
   placement = 'side',
 }: Required<Pick<T, 'collapsed' | 'onChangeCollapsed' | 'position'>> &
   Pick<PopoverProps, 'slotProps' | 'sx' | 'container'> & {
-    ref: HTMLElement | null
-    isMobile: boolean
+    /** Element the desktop popover is anchored to. */
+    anchorEl?: HTMLElement | null
+    /**
+     * @deprecated Use `anchorEl`. A JSX prop named `ref` is non-reactive under
+     * the React Compiler, so a state-held anchor stays frozen at its initial
+     * `null` and the popover never opens. Removed in the next major.
+     */
+    ref?: HTMLElement | null
+    isMobile?: boolean
     children: ReactNode
     /**
      * When `false`, the desktop popover is **non-modal**: no backdrop, clicks
@@ -91,6 +96,8 @@ export function ResponsiveDrawer<
     placement?: ResponsiveDrawerPlacement
   }) {
   // Popover position is frozen on open — re-measure on content resize (callback ref: portal mounts after open).
+  const anchor = anchorEl ?? ref ?? null
+
   const popoverActions = useRef<PopoverActions>(null)
   const observerRef = useRef<ResizeObserver | null>(null)
   const observeContent = useCallback((el: HTMLDivElement | null) => {
@@ -191,8 +198,8 @@ export function ResponsiveDrawer<
       action={popoverActions}
       sx={sx}
       container={container}
-      anchorEl={ref}
-      open={!collapsed && ref != null}
+      anchorEl={anchor}
+      open={!collapsed && anchor != null}
       onClose={modal ? () => onChangeCollapsed(true) : undefined}
       hideBackdrop={!modal}
       disableScrollLock={!modal}

package/src/legend/components/legend-row/legend-row.test.tsx

@@ -177,6 +177,25 @@ describe('<LegendRow> composition', () => {
     // …and the note renders exactly once, after all variables.
     expect(screen.getAllByText('One note for the whole layer.')).toHaveLength(1)
   })
+
+  // These render with no ThemeProvider, i.e. MUI's default theme, whose
+  // defaultVariantMapping has no `caption` entry and falls back to a `span`.
+  // An inline box ignores the line-height, so the type must not depend on a
+  // theme-level variantMapping to come out as a block.
+  it('renders the note and the subtitle as blocks, not inline', () => {
+    renderRow('boxes', [
+      {
+        id: 'a',
+        name: 'A',
+        subtitle: 'Zoom 0-12',
+        helperText: 'A note.',
+        variables: [cat],
+      },
+    ])
+
+    expect(screen.getByText('A note.').tagName).toBe('P')
+    expect(screen.getByText('Zoom 0-12').tagName).toBe('P')
+  })
 })
 
 describe('<LegendRow> grouped (inside Legend.Group)', () => {

package/src/legend/components/legend-row/legend-row.tsx

@@ -112,7 +112,11 @@ export function LegendRow({ layerId, children }: LegendRowProps) {
               )}
             </Box>
             {layer.subtitle && !effectivelyCollapsed && (
-              <Typography variant='caption' color='text.secondary'>
+              <Typography
+                variant='caption'
+                color='text.secondary'
+                component='p'
+              >
                 {layer.subtitle}
               </Typography>
             )}
@@ -136,7 +140,16 @@ export function LegendRow({ layerId, children }: LegendRowProps) {
           {layer.helperText && (
             <Box sx={[styles.footer, inGroup && styles.footerGrouped]}>
               {typeof layer.helperText === 'string' ? (
-                <Typography variant='caption' color='text.secondary'>
+                // `component` is load-bearing: MUI's defaultVariantMapping has
+                // no entry for `caption`, so it falls back to a `span` and the
+                // line-height stops governing the box. Meridian maps it to `p`
+                // by theme, which makes the box type depend on the consumer's
+                // theme rather than on this component.
+                <Typography
+                  variant='caption'
+                  color='text.secondary'
+                  component='p'
+                >
                   {layer.helperText}
                 </Typography>
               ) : (

package/src/widgets/utils/chart-config/option-builders.ts

@@ -79,7 +79,11 @@ export function buildGridConfig(hasLegend: boolean, theme: Theme) {
  * @param theme - MUI theme providing the typography token and palette
  * @returns `{ fontSize, fontFamily, color }` for an ECharts `axisLabel`
  */
-export function buildAxisLabelStyle(theme: Theme) {
+export function buildAxisLabelStyle(theme: Theme): {
+  fontSize: string | number | undefined
+  fontFamily: string | undefined
+  color: string
+} {
   return {
     fontSize: theme.typography.overlineDelicate?.fontSize,
     fontFamily: theme.typography.overlineDelicate?.fontFamily,