@carto/ps-react-ui 4.11.3 → 4.12.0

package/src/widgets-v2/pie/download.ts

@@ -1,6 +1,6 @@
 import {
+  buildCsvDownloadItem,
   buildPngDownloadItem,
-  downloadToCSV,
   type DownloadItem,
 } from '../actions/download'
 import type { PieWidgetData } from './types'
@@ -31,25 +31,21 @@ export function createPieDownloadConfig(args: {
       }),
     )
   }
-  items.push({
-    id: 'csv',
-    label: 'Download as CSV',
-    resolve: () => {
-      const data = args.getData()
-      const rows: unknown[][] = [['series', 'name', 'value']]
-      for (const [i, series] of data.entries()) {
-        const seriesName = args.seriesNames?.[i] ?? `series_${i + 1}`
-        for (const slice of series) {
-          rows.push([seriesName, slice.name, slice.value])
+  items.push(
+    buildCsvDownloadItem({
+      filename: args.filename,
+      getRows: () => {
+        const data = args.getData()
+        const rows: unknown[][] = [['series', 'name', 'value']]
+        for (const [i, series] of data.entries()) {
+          const seriesName = args.seriesNames?.[i] ?? `series_${i + 1}`
+          for (const slice of series) {
+            rows.push([seriesName, slice.name, slice.value])
+          }
         }
-      }
-      const handle = downloadToCSV(rows)
-      return Promise.resolve({
-        url: handle.url,
-        filename: `${args.filename}.csv`,
-        revoke: handle.revoke,
-      })
-    },
-  })
+        return rows
+      },
+    }),
+  )
   return items
 }

package/src/widgets-v2/scatterplot/download.ts

@@ -1,6 +1,6 @@
 import {
+  buildCsvDownloadItem,
   buildPngDownloadItem,
-  downloadToCSV,
   type DownloadItem,
 } from '../actions/download'
 import type { ScatterplotWidgetData } from './types'
@@ -30,25 +30,21 @@ export function createScatterplotDownloadConfig(args: {
       }),
     )
   }
-  items.push({
-    id: 'csv',
-    label: 'Download as CSV',
-    resolve: () => {
-      const data = args.getData()
-      const rows: unknown[][] = [['series', 'x', 'y']]
-      for (const [i, series] of data.entries()) {
-        const seriesName = args.seriesNames?.[i] ?? `series_${i + 1}`
-        for (const [x, y] of series) {
-          rows.push([seriesName, x, y])
+  items.push(
+    buildCsvDownloadItem({
+      filename: args.filename,
+      getRows: () => {
+        const data = args.getData()
+        const rows: unknown[][] = [['series', 'x', 'y']]
+        for (const [i, series] of data.entries()) {
+          const seriesName = args.seriesNames?.[i] ?? `series_${i + 1}`
+          for (const [x, y] of series) {
+            rows.push([seriesName, x, y])
+          }
         }
-      }
-      const handle = downloadToCSV(rows)
-      return Promise.resolve({
-        url: handle.url,
-        filename: `${args.filename}.csv`,
-        revoke: handle.revoke,
-      })
-    },
-  })
+        return rows
+      },
+    }),
+  )
   return items
 }

package/src/widgets-v2/spread/download.ts

@@ -1,6 +1,6 @@
 import {
+  buildCsvDownloadItem,
   buildPngDownloadItem,
-  downloadToCSV,
   type DownloadItem,
 } from '../actions/download'
 import type { SpreadWidgetData } from './types'
@@ -29,31 +29,27 @@ export function createSpreadDownloadConfig(args: {
       }),
     )
   }
-  items.push({
-    id: 'csv',
-    label: 'Download as CSV',
-    resolve: () => {
-      const data = args.getData()
-      const rows: unknown[][] = [
-        ['series', 'prefix', 'min', 'max', 'suffix', 'note'],
-      ]
-      for (const item of data) {
-        rows.push([
-          item.series?.name ?? '',
-          item.prefix ?? '',
-          item.min,
-          item.max,
-          item.suffix ?? '',
-          item.note ?? '',
-        ])
-      }
-      const handle = downloadToCSV(rows)
-      return Promise.resolve({
-        url: handle.url,
-        filename: `${args.filename}.csv`,
-        revoke: handle.revoke,
-      })
-    },
-  })
+  items.push(
+    buildCsvDownloadItem({
+      filename: args.filename,
+      getRows: () => {
+        const data = args.getData()
+        const rows: unknown[][] = [
+          ['series', 'prefix', 'min', 'max', 'suffix', 'note'],
+        ]
+        for (const item of data) {
+          rows.push([
+            item.series?.name ?? '',
+            item.prefix ?? '',
+            item.min,
+            item.max,
+            item.suffix ?? '',
+            item.note ?? '',
+          ])
+        }
+        return rows
+      },
+    }),
+  )
   return items
 }

package/src/widgets-v2/table/download.test.ts

@@ -61,6 +61,16 @@ describe('createTableDownloadConfig', () => {
     expect(csvText).toBe('Name,Score\nAlpha,10\nBeta,20')
   })
 
+  it('CSV guards formula-injection cells end-to-end', async () => {
+    const items = createTableDownloadConfig({
+      filename: 't',
+      getData: () => [{ id: 1, name: '=HYPERLINK("x")', score: 1 }],
+      columns,
+    })
+    await items.find((i) => i.id === 'csv')!.resolve()
+    expect(csvText).toBe('Name,Score\n"\'=HYPERLINK(""x"")",1')
+  })
+
   it('CSV calls getData() at click time (not at config creation)', async () => {
     let snapshot: TableWidgetData = data
     const items = createTableDownloadConfig({

package/src/widgets-v2/table/download.ts

@@ -1,4 +1,8 @@
-import { buildPngDownloadItem, type DownloadItem } from '../actions/download'
+import {
+  buildCsvDownloadItem,
+  buildPngDownloadItem,
+  type DownloadItem,
+} from '../actions/download'
 import { tableDataToCsv } from './helpers'
 import type { TableColumn, TableWidgetData } from './types'
 
@@ -29,19 +33,11 @@ export function createTableDownloadConfig(opts: {
       }),
     )
   }
-  items.push({
-    id: 'csv',
-    label: 'Download as CSV',
-    resolve: () => {
-      const csv = tableDataToCsv(opts.getData(), opts.columns)
-      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
-      const url = URL.createObjectURL(blob)
-      return Promise.resolve({
-        url,
-        filename: `${opts.filename}.csv`,
-        revoke: () => URL.revokeObjectURL(url),
-      })
-    },
-  })
+  items.push(
+    buildCsvDownloadItem({
+      filename: opts.filename,
+      getCsv: () => tableDataToCsv(opts.getData(), opts.columns),
+    }),
+  )
   return items
 }

package/src/widgets-v2/table/helpers.test.ts

@@ -211,4 +211,23 @@ describe('tableDataToCsv', () => {
     expect(csv).toContain('"[""x"",""y""]"')
     expect(csv).toContain('"{""z"":1}"')
   })
+
+  it('guards against formula injection by prefixing leading =,+,-,@', () => {
+    const csv = tableDataToCsv(
+      [
+        { id: 1, name: '=SUM(A1)', score: '+1' },
+        { id: 2, name: '-2', score: '@cmd' },
+      ],
+      cols,
+    )
+    const lines = csv.split('\n')
+    expect(lines[1]).toBe("'=SUM(A1),'+1")
+    expect(lines[2]).toBe("'-2,'@cmd")
+  })
+
+  it('still wraps a formula cell that also contains a comma', () => {
+    const csv = tableDataToCsv([{ id: 1, name: '=A1,B2', score: 1 }], cols)
+    // Prefixed against injection, then quoted for the embedded comma.
+    expect(csv.split('\n')[1]).toBe('"\'=A1,B2",1')
+  })
 })

package/src/widgets-v2/table/helpers.ts

@@ -1,3 +1,4 @@
+import { toCsvString } from '../actions/download'
 import type {
   TableColumn,
   TableRow,
@@ -102,20 +103,14 @@ export function tableDataToCsv(
   data: TableWidgetData,
   columns: readonly TableColumn[],
 ): string {
-  const head = columns.map((c) => csvEscape(stringifyHeader(c.label))).join(',')
-  const lines = [head]
+  // Pre-stringify with the table's own header/cell rules, then delegate the
+  // CSV assembly (quoting + spreadsheet formula-injection guard) to the shared
+  // `toCsvString` so escaping stays identical to every other widget's export.
+  const rows: string[][] = [columns.map((c) => stringifyHeader(c.label))]
   for (const row of data) {
-    const cells = columns.map((c) => csvEscape(stringifyCell(row[c.id])))
-    lines.push(cells.join(','))
+    rows.push(columns.map((c) => stringifyCell(row[c.id])))
   }
-  return lines.join('\n')
-}
-
-function csvEscape(value: string): string {
-  if (/[",\n\r]/.test(value)) {
-    return `"${value.replace(/"/g, '""')}"`
-  }
-  return value
+  return toCsvString(rows)
 }
 
 function stringifyHeader(label: unknown): string {

package/src/widgets-v2/timeseries/download.ts

@@ -1,6 +1,6 @@
 import {
+  buildCsvDownloadItem,
   buildPngDownloadItem,
-  downloadToCSV,
   type DownloadItem,
 } from '../actions/download'
 import type { TimeseriesWidgetData } from './types'
@@ -31,51 +31,47 @@ export function createTimeseriesDownloadConfig(args: {
       }),
     )
   }
-  items.push({
-    id: 'csv',
-    label: 'Download as CSV',
-    resolve: () => {
-      const data = args.getData()
-      const seriesCount = data.length
+  items.push(
+    buildCsvDownloadItem({
+      filename: args.filename,
+      getRows: () => {
+        const data = args.getData()
+        const seriesCount = data.length
 
-      // Collect every unique time, preserving insertion order.
-      const timeKeys: (Date | number | string)[] = []
-      const seenKeys = new Set<string>()
-      for (const series of data) {
-        for (const point of series) {
-          const key = String(point.name)
-          if (!seenKeys.has(key)) {
-            seenKeys.add(key)
-            timeKeys.push(point.name)
+        // Collect every unique time, preserving insertion order.
+        const timeKeys: (Date | number | string)[] = []
+        const seenKeys = new Set<string>()
+        for (const series of data) {
+          for (const point of series) {
+            const key = String(point.name)
+            if (!seenKeys.has(key)) {
+              seenKeys.add(key)
+              timeKeys.push(point.name)
+            }
           }
         }
-      }
 
-      // Build a quick lookup per series for O(rows × series) emit.
-      const lookups = data.map(
-        (series) => new Map(series.map((p) => [String(p.name), p.value])),
-      )
+        // Build a quick lookup per series for O(rows × series) emit.
+        const lookups = data.map(
+          (series) => new Map(series.map((p) => [String(p.name), p.value])),
+        )
 
-      const header: unknown[] = ['time']
-      for (let i = 0; i < seriesCount; i++) {
-        header.push(args.seriesNames?.[i] ?? `series_${i + 1}`)
-      }
-      const rows: unknown[][] = [header]
-      for (const key of timeKeys) {
-        const row: unknown[] = [formatTime(key)]
-        const lookupKey = String(key)
-        for (const lookup of lookups) row.push(lookup.get(lookupKey) ?? '')
-        rows.push(row)
-      }
+        const header: unknown[] = ['time']
+        for (let i = 0; i < seriesCount; i++) {
+          header.push(args.seriesNames?.[i] ?? `series_${i + 1}`)
+        }
+        const rows: unknown[][] = [header]
+        for (const key of timeKeys) {
+          const row: unknown[] = [formatTime(key)]
+          const lookupKey = String(key)
+          for (const lookup of lookups) row.push(lookup.get(lookupKey) ?? '')
+          rows.push(row)
+        }
 
-      const handle = downloadToCSV(rows)
-      return Promise.resolve({
-        url: handle.url,
-        filename: `${args.filename}.csv`,
-        revoke: handle.revoke,
-      })
-    },
-  })
+        return rows
+      },
+    }),
+  )
   return items
 }
 

package/dist/png-item-BE9uEqlD.js

@@ -1,45 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { d as a } from "./exports-Cx-f6m6U.js";
-import { c as r } from "react/compiler-runtime";
-import { SvgIcon as i } from "@mui/material";
-import { ImageOutlined as c } from "@mui/icons-material";
-function m(o) {
-  const e = r(2);
-  let l;
-  return e[0] !== o ? (l = /* @__PURE__ */ n(c, { ...o }), e[0] = o, e[1] = l) : l = e[1], l;
-}
-function s(o) {
-  const e = r(3);
-  let l;
-  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (l = /* @__PURE__ */ n("path", { fill: "currentColor", d: "M4.313 11.25h2.25v-1.125H4.688v-2.25h1.875V6.75h-2.25a.726.726 0 0 0-.535.216.726.726 0 0 0-.216.534v3c0 .213.072.39.216.534a.726.726 0 0 0 .534.216Zm2.925 0h2.25c.212 0 .39-.072.534-.216a.726.726 0 0 0 .216-.534V9.375a.931.931 0 0 0-.216-.59.658.658 0 0 0-.534-.273H8.363v-.637h1.875V6.75h-2.25a.726.726 0 0 0-.535.216.726.726 0 0 0-.216.534v1.125c0 .213.072.403.216.572a.675.675 0 0 0 .534.253h1.126v.675H7.238v1.125Zm4.95 0h1.124l1.313-4.5H13.5l-.75 2.588L12 6.75h-1.125l1.313 4.5ZM3 15c-.413 0-.766-.147-1.06-.44a1.445 1.445 0 0 1-.44-1.06v-9c0-.412.147-.766.44-1.06C2.235 3.148 2.588 3 3 3h12c.412 0 .766.147 1.06.44.293.294.44.648.44 1.06v9c0 .412-.147.766-.44 1.06-.294.293-.647.44-1.06.44H3Zm0-1.5h12v-9H3v9Z" }), e[0] = l) : l = e[0];
-  let t;
-  return e[1] !== o ? (t = /* @__PURE__ */ n(i, { viewBox: "0 0 18 18", ...o, children: l }), e[1] = o, e[2] = t) : t = e[2], t;
-}
-function b(o) {
-  return {
-    id: "png",
-    label: o.label ?? "PNG",
-    icon: /* @__PURE__ */ n(m, { fontSize: "small" }),
-    resolve: async () => {
-      const e = o.getCaptureEl();
-      if (!e)
-        throw new Error("[widgets-v2] No PNG capture element available");
-      const l = await a({
-        element: e,
-        pixelRatio: o.pixelRatio,
-        backgroundColor: o.backgroundColor
-      });
-      return {
-        url: l.url,
-        filename: `${o.filename}.png`,
-        revoke: l.revoke
-      };
-    }
-  };
-}
-export {
-  s as C,
-  m as P,
-  b
-};
-//# sourceMappingURL=png-item-BE9uEqlD.js.map

package/dist/png-item-BE9uEqlD.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"png-item-BE9uEqlD.js","sources":["../src/widgets-v2/actions/download/icons.tsx","../src/widgets-v2/actions/download/png-item.tsx"],"sourcesContent":["import { SvgIcon, type SvgIconProps } from '@mui/material'\nimport { ImageOutlined } from '@mui/icons-material'\n\n/**\n * Generic \"image\" glyph used for the PNG download item. Wraps MUI's\n * `ImageOutlined` so callers can swap it via the per-widget download\n * config's `icon` override without pulling MUI directly.\n */\nexport function PNGIcon(props: SvgIconProps) {\n  return <ImageOutlined {...props} />\n}\n\n/**\n * \"CSV\" rectangle with the letters spelled inside — matches v1 visual and is\n * easier to recognise in a download menu than a generic table glyph.\n */\nexport function CSVIcon(props: SvgIconProps) {\n  return (\n    <SvgIcon viewBox='0 0 18 18' {...props}>\n      <path\n        fill='currentColor'\n        d='M4.313 11.25h2.25v-1.125H4.688v-2.25h1.875V6.75h-2.25a.726.726 0 0 0-.535.216.726.726 0 0 0-.216.534v3c0 .213.072.39.216.534a.726.726 0 0 0 .534.216Zm2.925 0h2.25c.212 0 .39-.072.534-.216a.726.726 0 0 0 .216-.534V9.375a.931.931 0 0 0-.216-.59.658.658 0 0 0-.534-.273H8.363v-.637h1.875V6.75h-2.25a.726.726 0 0 0-.535.216.726.726 0 0 0-.216.534v1.125c0 .213.072.403.216.572a.675.675 0 0 0 .534.253h1.126v.675H7.238v1.125Zm4.95 0h1.124l1.313-4.5H13.5l-.75 2.588L12 6.75h-1.125l1.313 4.5ZM3 15c-.413 0-.766-.147-1.06-.44a1.445 1.445 0 0 1-.44-1.06v-9c0-.412.147-.766.44-1.06C2.235 3.148 2.588 3 3 3h12c.412 0 .766.147 1.06.44.293.294.44.648.44 1.06v9c0 .412-.147.766-.44 1.06-.294.293-.647.44-1.06.44H3Zm0-1.5h12v-9H3v9Z'\n      />\n    </SvgIcon>\n  )\n}\n","import { downloadDOMToPNG } from './exports'\nimport { PNGIcon } from './icons'\nimport type { DownloadItem } from './types'\n\nexport interface BuildPngDownloadItemArgs {\n  /** Base filename (without extension). The item appends `.png`. */\n  filename: string\n  /**\n   * Reads the capture element to rasterise. Called at click time so the\n   * download config doesn't capture a stale reference. Wire it to\n   * `() => getCaptureEl(id)` from `widgets-v2/stores`.\n   */\n  getCaptureEl: () => HTMLElement | null\n  /** html2canvas `scale`. Default 2. */\n  pixelRatio?: number\n  /** html2canvas `backgroundColor`. Default transparent (`null`). */\n  backgroundColor?: string | null\n  /** Override the menu label. Default `'PNG'`. */\n  label?: string\n}\n\n/**\n * Builds the standard PNG `DownloadItem` used by every per-widget download\n * config. Centralised so the menu label, icon, error message, and filename\n * suffix stay consistent across widgets without each `create*DownloadConfig`\n * re-deriving the same shape.\n */\nexport function buildPngDownloadItem(\n  args: BuildPngDownloadItemArgs,\n): DownloadItem {\n  return {\n    id: 'png',\n    label: args.label ?? 'PNG',\n    icon: <PNGIcon fontSize='small' />,\n    resolve: async () => {\n      const el = args.getCaptureEl()\n      if (!el) {\n        throw new Error('[widgets-v2] No PNG capture element available')\n      }\n      const handle = await downloadDOMToPNG({\n        element: el,\n        pixelRatio: args.pixelRatio,\n        backgroundColor: args.backgroundColor,\n      })\n      return {\n        url: handle.url,\n        filename: `${args.filename}.png`,\n        revoke: handle.revoke,\n      }\n    },\n  }\n}\n"],"names":["PNGIcon","props","$","_c","t0","jsx","ImageOutlined","CSVIcon","Symbol","for","t1","SvgIcon","buildPngDownloadItem","args","id","label","icon","resolve","el","getCaptureEl","Error","handle","downloadDOMToPNG","element","pixelRatio","backgroundColor","url","filename","revoke"],"mappings":";;;;;AAQO,SAAAA,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAA,CAAA;AAAA,MAAAC;AAAA,SAAAF,SAAAD,KACEG,IAAA,gBAAAC,EAACC,GAAA,EAAa,GAAKL,EAAAA,CAAK,GAAIC,OAAAD,GAAAC,OAAAE,KAAAA,IAAAF,EAAA,CAAA,GAA5BE;AAA4B;AAO9B,SAAAG,EAAAN,GAAA;AAAA,QAAAC,IAAAC,EAAA,CAAA;AAAA,MAAAC;AAAA,EAAAF,EAAA,CAAA,MAAAM,uBAAAC,IAAA,2BAAA,KAGDL,IAAA,gBAAAC,EAAA,QAAA,EACO,MAAA,gBACH,GAAA,gtBAA8sB,GAChtBH,OAAAE,KAAAA,IAAAF,EAAA,CAAA;AAAA,MAAAQ;AAAA,SAAAR,SAAAD,KAJJS,sBAACC,GAAA,EAAgB,SAAA,aAAW,GAAKV,GAC/BG,UAAAA,GAIF,GAAUF,OAAAD,GAAAC,OAAAQ,KAAAA,IAAAR,EAAA,CAAA,GALVQ;AAKU;ACIP,SAASE,EACdC,GACc;AACd,SAAO;AAAA,IACLC,IAAI;AAAA,IACJC,OAAOF,EAAKE,SAAS;AAAA,IACrBC,MAAM,gBAAAX,EAACL,GAAA,EAAQ,UAAS,QAAA,CAAO;AAAA,IAC/BiB,SAAS,YAAY;AACnB,YAAMC,IAAKL,EAAKM,aAAAA;AAChB,UAAI,CAACD;AACH,cAAM,IAAIE,MAAM,+CAA+C;AAEjE,YAAMC,IAAS,MAAMC,EAAiB;AAAA,QACpCC,SAASL;AAAAA,QACTM,YAAYX,EAAKW;AAAAA,QACjBC,iBAAiBZ,EAAKY;AAAAA,MAAAA,CACvB;AACD,aAAO;AAAA,QACLC,KAAKL,EAAOK;AAAAA,QACZC,UAAU,GAAGd,EAAKc,QAAQ;AAAA,QAC1BC,QAAQP,EAAOO;AAAAA,MAAAA;AAAAA,IAEnB;AAAA,EAAA;AAEJ;"}