@carto/ps-react-ui 4.6.3 → 4.7.0

package/dist/{download-config-C3I0jWIL.js → download-config-DNLkypdN.js}

@@ -11,7 +11,8 @@ import "./cjs-D4KH3azB.js";
 import "@dnd-kit/core";
 import "@dnd-kit/sortable";
 import "@dnd-kit/utilities";
-function E(r) {
+import "react-dom";
+function T(r) {
   const o = [];
   if (r.length > 0 && (r[0]?.length ?? 0) > 0) {
     const i = r?.[0]?.[0] ?? {}, t = Object.keys(i);
@@ -24,7 +25,7 @@ function E(r) {
     });
   }), o;
 }
-function T(r) {
+function b(r) {
   const o = [];
   return o.push(["x", "y"]), r.forEach((i) => {
     i.forEach((t) => {
@@ -32,7 +33,7 @@ function T(r) {
     });
   }), o;
 }
-function b(r) {
+function j(r) {
   return function({
     refUI: o
   }) {
@@ -49,8 +50,8 @@ function b(r) {
   };
 }
 export {
-  b as c,
-  E as f,
-  T as s
+  j as c,
+  T as f,
+  b as s
 };
-//# sourceMappingURL=download-config-C3I0jWIL.js.map
+//# sourceMappingURL=download-config-DNLkypdN.js.map

package/dist/{download-config-C3I0jWIL.js.map → download-config-DNLkypdN.js.map}

@@ -1 +1 @@
-{"version":3,"file":"download-config-C3I0jWIL.js","sources":["../src/widgets/utils/chart-config/csv-modifiers.ts","../src/widgets/utils/chart-config/download-config.ts"],"sourcesContent":["/**\n * Shared CSV export modifiers for chart widgets\n */\n\n/**\n * Flattens object array data into CSV-ready rows.\n * Used by bar, pie, histogram, and timeseries widgets.\n *\n * @param data - Array of series, where each series is an array of data objects\n * @returns CSV rows with headers and values\n */\nexport function flattenObjectArrayToCSV<T extends Record<string, unknown>>(\n  data: T[][],\n): string[][] {\n  const rows: string[][] = []\n\n  // Add headers from first data point if available\n  if (data.length > 0 && (data[0]?.length ?? 0) > 0) {\n    const firstDataPoint = data?.[0]?.[0] ?? {}\n    const headers = Object.keys(firstDataPoint)\n    rows.push(headers)\n  }\n\n  // Add data rows from all series\n  data.forEach((series) => {\n    series.forEach((dataPoint) => {\n      const values = Object.values(dataPoint).map((v) => String(v))\n      rows.push(values)\n    })\n  })\n\n  return rows\n}\n\n/**\n * Creates CSV rows for scatterplot data.\n * Scatterplot uses array format [x, y] instead of objects.\n *\n * @param data - Array of series, where each series is an array of [x, y] tuples\n * @returns CSV rows with ['x', 'y'] headers\n */\nexport function scatterplotDataToCSV(data: number[][][]): string[][] {\n  const rows: string[][] = []\n\n  // Add headers\n  rows.push(['x', 'y'])\n\n  // Add data rows from all series\n  data.forEach((series) => {\n    series.forEach((dataPoint) => {\n      rows.push([String(dataPoint[0]), String(dataPoint[1])])\n    })\n  })\n\n  return rows\n}\n","import { downloadToCSV, downloadToPNG, type DownloadItem } from '../../actions'\nimport type { ConfigProps } from '../../loader/types'\n\nexport function createChartDownloadConfig<TData>(\n  csvModifier: (data: TData) => string[][],\n) {\n  return function ({ refUI }: ConfigProps): DownloadItem<TData>[] {\n    return [\n      {\n        ...downloadToPNG,\n        modifier: () => downloadToPNG.modifier(refUI),\n      },\n      {\n        ...downloadToCSV,\n        modifier: async (data) => {\n          const rows = csvModifier(data)\n          return downloadToCSV.modifier(rows)\n        },\n      },\n    ]\n  }\n}\n"],"names":["flattenObjectArrayToCSV","data","rows","length","firstDataPoint","headers","Object","keys","push","forEach","series","dataPoint","values","map","v","String","scatterplotDataToCSV","createChartDownloadConfig","csvModifier","refUI","downloadToPNG","modifier","downloadToCSV"],"mappings":";;;;;;;;;;;;;AAWO,SAASA,EACdC,GACY;AACZ,QAAMC,IAAmB,CAAA;AAGzB,MAAID,EAAKE,SAAS,MAAMF,EAAK,CAAC,GAAGE,UAAU,KAAK,GAAG;AACjD,UAAMC,IAAiBH,IAAO,CAAC,IAAI,CAAC,KAAK,CAAA,GACnCI,IAAUC,OAAOC,KAAKH,CAAc;AAC1CF,IAAAA,EAAKM,KAAKH,CAAO;AAAA,EACnB;AAGAJ,SAAAA,EAAKQ,QAASC,CAAAA,MAAW;AACvBA,IAAAA,EAAOD,QAASE,CAAAA,MAAc;AAC5B,YAAMC,IAASN,OAAOM,OAAOD,CAAS,EAAEE,IAAKC,CAAAA,MAAMC,OAAOD,CAAC,CAAC;AAC5DZ,MAAAA,EAAKM,KAAKI,CAAM;AAAA,IAClB,CAAC;AAAA,EACH,CAAC,GAEMV;AACT;AASO,SAASc,EAAqBf,GAAgC;AACnE,QAAMC,IAAmB,CAAA;AAGzBA,SAAAA,EAAKM,KAAK,CAAC,KAAK,GAAG,CAAC,GAGpBP,EAAKQ,QAASC,CAAAA,MAAW;AACvBA,IAAAA,EAAOD,QAASE,CAAAA,MAAc;AAC5BT,MAAAA,EAAKM,KAAK,CAACO,OAAOJ,EAAU,CAAC,CAAC,GAAGI,OAAOJ,EAAU,CAAC,CAAC,CAAC,CAAC;AAAA,IACxD,CAAC;AAAA,EACH,CAAC,GAEMT;AACT;ACpDO,SAASe,EACdC,GACA;AACA,SAAO,SAAU;AAAA,IAAEC,OAAAA;AAAAA,EAAAA,GAA6C;AAC9D,WAAO,CACL;AAAA,MACE,GAAGC;AAAAA,MACHC,UAAUA,MAAMD,EAAcC,SAASF,CAAK;AAAA,IAAA,GAE9C;AAAA,MACE,GAAGG;AAAAA,MACHD,UAAU,OAAOpB,MAAS;AACxB,cAAMC,IAAOgB,EAAYjB,CAAI;AAC7B,eAAOqB,EAAcD,SAASnB,CAAI;AAAA,MACpC;AAAA,IAAA,CACD;AAAA,EAEL;AACF;"}
+{"version":3,"file":"download-config-DNLkypdN.js","sources":["../src/widgets/utils/chart-config/csv-modifiers.ts","../src/widgets/utils/chart-config/download-config.ts"],"sourcesContent":["/**\n * Shared CSV export modifiers for chart widgets\n */\n\n/**\n * Flattens object array data into CSV-ready rows.\n * Used by bar, pie, histogram, and timeseries widgets.\n *\n * @param data - Array of series, where each series is an array of data objects\n * @returns CSV rows with headers and values\n */\nexport function flattenObjectArrayToCSV<T extends Record<string, unknown>>(\n  data: T[][],\n): string[][] {\n  const rows: string[][] = []\n\n  // Add headers from first data point if available\n  if (data.length > 0 && (data[0]?.length ?? 0) > 0) {\n    const firstDataPoint = data?.[0]?.[0] ?? {}\n    const headers = Object.keys(firstDataPoint)\n    rows.push(headers)\n  }\n\n  // Add data rows from all series\n  data.forEach((series) => {\n    series.forEach((dataPoint) => {\n      const values = Object.values(dataPoint).map((v) => String(v))\n      rows.push(values)\n    })\n  })\n\n  return rows\n}\n\n/**\n * Creates CSV rows for scatterplot data.\n * Scatterplot uses array format [x, y] instead of objects.\n *\n * @param data - Array of series, where each series is an array of [x, y] tuples\n * @returns CSV rows with ['x', 'y'] headers\n */\nexport function scatterplotDataToCSV(data: number[][][]): string[][] {\n  const rows: string[][] = []\n\n  // Add headers\n  rows.push(['x', 'y'])\n\n  // Add data rows from all series\n  data.forEach((series) => {\n    series.forEach((dataPoint) => {\n      rows.push([String(dataPoint[0]), String(dataPoint[1])])\n    })\n  })\n\n  return rows\n}\n","import { downloadToCSV, downloadToPNG, type DownloadItem } from '../../actions'\nimport type { ConfigProps } from '../../loader/types'\n\nexport function createChartDownloadConfig<TData>(\n  csvModifier: (data: TData) => string[][],\n) {\n  return function ({ refUI }: ConfigProps): DownloadItem<TData>[] {\n    return [\n      {\n        ...downloadToPNG,\n        modifier: () => downloadToPNG.modifier(refUI),\n      },\n      {\n        ...downloadToCSV,\n        modifier: async (data) => {\n          const rows = csvModifier(data)\n          return downloadToCSV.modifier(rows)\n        },\n      },\n    ]\n  }\n}\n"],"names":["flattenObjectArrayToCSV","data","rows","length","firstDataPoint","headers","Object","keys","push","forEach","series","dataPoint","values","map","v","String","scatterplotDataToCSV","createChartDownloadConfig","csvModifier","refUI","downloadToPNG","modifier","downloadToCSV"],"mappings":";;;;;;;;;;;;;;AAWO,SAASA,EACdC,GACY;AACZ,QAAMC,IAAmB,CAAA;AAGzB,MAAID,EAAKE,SAAS,MAAMF,EAAK,CAAC,GAAGE,UAAU,KAAK,GAAG;AACjD,UAAMC,IAAiBH,IAAO,CAAC,IAAI,CAAC,KAAK,CAAA,GACnCI,IAAUC,OAAOC,KAAKH,CAAc;AAC1CF,IAAAA,EAAKM,KAAKH,CAAO;AAAA,EACnB;AAGAJ,SAAAA,EAAKQ,QAASC,CAAAA,MAAW;AACvBA,IAAAA,EAAOD,QAASE,CAAAA,MAAc;AAC5B,YAAMC,IAASN,OAAOM,OAAOD,CAAS,EAAEE,IAAKC,CAAAA,MAAMC,OAAOD,CAAC,CAAC;AAC5DZ,MAAAA,EAAKM,KAAKI,CAAM;AAAA,IAClB,CAAC;AAAA,EACH,CAAC,GAEMV;AACT;AASO,SAASc,EAAqBf,GAAgC;AACnE,QAAMC,IAAmB,CAAA;AAGzBA,SAAAA,EAAKM,KAAK,CAAC,KAAK,GAAG,CAAC,GAGpBP,EAAKQ,QAASC,CAAAA,MAAW;AACvBA,IAAAA,EAAOD,QAASE,CAAAA,MAAc;AAC5BT,MAAAA,EAAKM,KAAK,CAACO,OAAOJ,EAAU,CAAC,CAAC,GAAGI,OAAOJ,EAAU,CAAC,CAAC,CAAC,CAAC;AAAA,IACxD,CAAC;AAAA,EACH,CAAC,GAEMT;AACT;ACpDO,SAASe,EACdC,GACA;AACA,SAAO,SAAU;AAAA,IAAEC,OAAAA;AAAAA,EAAAA,GAA6C;AAC9D,WAAO,CACL;AAAA,MACE,GAAGC;AAAAA,MACHC,UAAUA,MAAMD,EAAcC,SAASF,CAAK;AAAA,IAAA,GAE9C;AAAA,MACE,GAAGG;AAAAA,MACHD,UAAU,OAAOpB,MAAS;AACxB,cAAMC,IAAOgB,EAAYjB,CAAI;AAC7B,eAAOqB,EAAcD,SAASnB,CAAI;AAAA,MACpC;AAAA,IAAA,CACD;AAAA,EAEL;AACF;"}

package/dist/shared-resize-observer-98b1SK1e.js

@@ -0,0 +1,17 @@
+const s = /* @__PURE__ */ new Map();
+let o = null;
+function t() {
+  return o ??= new ResizeObserver((e) => {
+    for (const r of e)
+      s.get(r.target)?.();
+  }), o;
+}
+function n(e, r) {
+  return s.set(e, r), t().observe(e), () => {
+    s.delete(e), t().unobserve(e);
+  };
+}
+export {
+  n as o
+};
+//# sourceMappingURL=shared-resize-observer-98b1SK1e.js.map

package/dist/shared-resize-observer-98b1SK1e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-resize-observer-98b1SK1e.js","sources":["../src/widgets/echart/shared-resize-observer.ts"],"sourcesContent":["/**\n * Shared ResizeObserver singleton for all ECharts instances.\n *\n * Instead of creating 100+ individual ResizeObserver instances (one per chart),\n * this module provides a single shared observer that efficiently handles resize\n * callbacks for all registered elements.\n */\n\ntype ResizeCallback = () => void\n\nconst callbacks = new Map<Element, ResizeCallback>()\n\nlet observer: ResizeObserver | null = null\n\nfunction getObserver(): ResizeObserver {\n  observer ??= new ResizeObserver((entries) => {\n    for (const entry of entries) {\n      const callback = callbacks.get(entry.target)\n      callback?.()\n    }\n  })\n  return observer\n}\n\nexport function observeResize(\n  element: Element,\n  callback: ResizeCallback,\n): () => void {\n  callbacks.set(element, callback)\n  getObserver().observe(element)\n\n  return () => {\n    callbacks.delete(element)\n    getObserver().unobserve(element)\n  }\n}\n\n/** Reset the shared observer (for testing only). */\nexport function resetSharedResizeObserver(): void {\n  if (observer) {\n    observer.disconnect()\n    observer = null\n  }\n  callbacks.clear()\n}\n"],"names":["callbacks","Map","observer","getObserver","ResizeObserver","entries","entry","callback","get","target","observeResize","element","set","observe","delete","unobserve"],"mappings":"AAUA,MAAMA,wBAAgBC,IAAAA;AAEtB,IAAIC,IAAkC;AAEtC,SAASC,IAA8B;AACrCD,SAAAA,MAAa,IAAIE,eAAgBC,CAAAA,MAAY;AAC3C,eAAWC,KAASD;AAElBE,MADiBP,EAAUQ,IAAIF,EAAMG,MAAM,IAC3CF;AAAAA,EAEJ,CAAC,GACML;AACT;AAEO,SAASQ,EACdC,GACAJ,GACY;AACZP,SAAAA,EAAUY,IAAID,GAASJ,CAAQ,GAC/BJ,EAAAA,EAAcU,QAAQF,CAAO,GAEtB,MAAM;AACXX,IAAAA,EAAUc,OAAOH,CAAO,GACxBR,EAAAA,EAAcY,UAAUJ,CAAO;AAAA,EACjC;AACF;"}

package/dist/types/widgets/actions/brush-toggle/brush-overlay.d.ts

@@ -0,0 +1,24 @@
+interface BrushOverlayProps {
+    id: string;
+    multiBrush?: boolean;
+}
+/**
+ * Portaled overlay rendered inside the ECharts chart `<div>`. Handles brush
+ * drawing entirely in DOM, independent of ECharts' built-in brush.
+ *
+ * Rectangles are stored in x-axis data coords (category indices) in the
+ * widget store. The overlay re-projects them to pixel coords on every chart
+ * `finished` event and container resize, so `setOption({ notMerge: true })`
+ * by the config pipeline is a non-event.
+ *
+ * Pointer capture and rectangle rendering are both clamped to the ECharts
+ * grid (plot area), so the legend, axis labels, and other chart chrome
+ * receive their usual events and aren't visually covered.
+ *
+ * Hit-testing happens on `pointerup` using `hitTestRects` against the widget's
+ * data length (derived from `widget.data`). The result is written to
+ * `brushSelection` in the store; `BrushToggle` subscribes to that and invokes
+ * the consumer's `onBrushSelected` callback.
+ */
+export declare function BrushOverlay({ id, multiBrush }: BrushOverlayProps): import('react').ReactPortal | null;
+export {};

package/dist/types/widgets/actions/brush-toggle/brush-toggle.d.ts

@@ -1,17 +1,22 @@
 import { BrushToggleProps } from './types';
+/**
+ * Kept for backwards compatibility. The tool is no longer registered with the
+ * widget store — brush state is now owned directly by this component and the
+ * associated DOM overlay instead of being driven through the config pipeline.
+ * Existing code that looks this constant up in `registeredTools` will simply
+ * find no match.
+ */
 export declare const BRUSH_TOGGLE_TOOL_ID = "brush-toggle";
 /**
- * Widget action to toggle EChart brush selection functionality.
- *
- * Registers as a config pipeline tool so that brush configuration is automatically
- * re-applied when the base config is updated (e.g., by WidgetLoader).
+ * Widget action to toggle brush-style selection on bar and histogram widgets.
  *
- * Brush state is stored in the widget store root, and the tool derives its
- * `enabled` flag from the store. This keeps state accessible across component instances.
+ * Renders a toggle button and a portaled overlay rendered inside the chart's
+ * `<div>`. The overlay handles all pointer interactions, draws selection
+ * rectangles in DOM, and hit-tests against the widget data. All state lives
+ * in the widget store — rectangles survive config-pipeline re-renders
+ * (`setOption({ notMerge: true })`) automatically.
  *
- * When brush is active, users can drag across bars to select a range.
- * Selection clearing is handled via the chart's brush interactions/toolbox configuration.
- * Only intended for use in fullscreen ToolbarActions for bar and histogram widgets.
+ * Only intended for bar and histogram widgets (both use `xAxis.type === 'category'`).
  *
  * @example
  * ```tsx
@@ -21,4 +26,4 @@ export declare const BRUSH_TOGGLE_TOOL_ID = "brush-toggle";
  * />
  * ```
  */
-export declare function BrushToggle({ id, onBrushSelected, labels, Icon, IconButtonProps, }: BrushToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function BrushToggle({ id, onBrushSelected, multiBrush, selections, defaultEnabled, labels, Icon, IconButtonProps, }: BrushToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/actions/brush-toggle/hit-test.d.ts

@@ -0,0 +1,19 @@
+import { BrushRect } from './types';
+/**
+ * Returns integer dataIndices covered by a brush rectangle on a category axis.
+ *
+ * `xStart` / `xEnd` come from `instance.convertFromPixel({ xAxisIndex: 0 }, …)`
+ * which, for a category axis, returns fractional positions around integer
+ * category indices (e.g. `1.3` lands between categories 1 and 2). We snap the
+ * range outward (`floor` / `ceil`) so a drag that visually covers any part of
+ * a category's bar includes that index.
+ *
+ * Results are clamped to `[0, dataLength - 1]` and returned in ascending order.
+ */
+export declare function hitTestCategoryRange(xStart: number, xEnd: number, dataLength: number): number[];
+/**
+ * Union of `hitTestCategoryRange` across multiple rectangles. Used for
+ * multi-brush selections where each drawn rectangle contributes to the
+ * combined selection.
+ */
+export declare function hitTestRects(rects: BrushRect[], dataLength: number): number[];

package/dist/types/widgets/actions/brush-toggle/hit-test.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/widgets/actions/brush-toggle/style.d.ts

@@ -1,4 +1,5 @@
 import { Theme } from '@mui/material';
+import { CSSProperties } from 'react';
 export declare const styles: {
     container: {
         display: "flex";
@@ -11,3 +12,10 @@ export declare const styles: {
         };
     };
 };
+/**
+ * Plain CSS objects for the brush overlay — we're outside MUI's sx pipeline
+ * here because the rectangles are rendered via a React portal into the chart
+ * div (not part of the MUI tree). Colors borrow from the base palette; if
+ * theme-aware styling is needed later, move to styled components.
+ */
+export declare const overlayStyles: Record<string, CSSProperties>;

package/dist/types/widgets/actions/brush-toggle/types.d.ts

@@ -12,10 +12,29 @@ export interface BrushSelectedItems {
     seriesIndex: number;
 }
 /**
- * State stored in widget store for brush functionality
+ * A selection rectangle in x-axis data coords. Stored in the widget store so
+ * it survives config-pipeline re-renders (which call `setOption` with
+ * `notMerge: true` and wipe any ECharts-side state). The overlay re-projects
+ * these to pixel positions on every chart render / resize.
+ *
+ * Both bar and histogram widgets use `xAxis.type === 'category'`, so the
+ * coords are category indices (possibly fractional — `convertFromPixel`
+ * returns floats like `1.3` between categories 1 and 2).
+ */
+export interface BrushRect {
+    xStart: number;
+    xEnd: number;
+}
+/**
+ * State stored in widget store for brush functionality.
  */
 export interface BrushConfig {
+    /** Whether brush mode is enabled. */
     brush?: boolean;
+    /** Persisted selection rectangles in data-axis coords. */
+    brushRects?: BrushRect[];
+    /** Last selection emitted to the `onBrushSelected` callback. */
+    brushSelection?: BrushSelectedItems;
 }
 export type BrushState<T = unknown> = BaseWidgetState<T & BrushConfig>;
 export interface BrushToggleProps {
@@ -23,6 +42,21 @@ export interface BrushToggleProps {
     id: string;
     /** Callback fired when items are selected via brush */
     onBrushSelected?: (items: BrushSelectedItems) => void;
+    /** When true, allows multiple brush selection areas. Brush stays active after each selection. */
+    multiBrush?: boolean;
+    /**
+     * Initial brush-enabled state. Only applied on first mount if the widget
+     * store has no `brush` value yet — subsequent remounts preserve whatever
+     * state the user has toggled to.
+     */
+    defaultEnabled?: boolean;
+    /**
+     * Current selection count from the consumer (e.g. `selectedItems.length`).
+     * When this transitions to `0` (typically when the user presses the clear
+     * button in `WidgetSelectionSummary`), BrushToggle clears its persisted
+     * brush rectangles and the on-chart selection.
+     */
+    selections?: number;
     /** Custom labels for the action */
     labels?: {
         /** Tooltip when brush is disabled (button will enable brush) */