@carto/ps-react-ui 4.11.2 → 4.12.0

package/src/widgets-v2/actions/download/icons.tsx

@@ -1,5 +1,5 @@
 import { SvgIcon, type SvgIconProps } from '@mui/material'
-import { ImageOutlined } from '@mui/icons-material'
+import { ArticleOutlined, ImageOutlined } from '@mui/icons-material'
 
 /**
  * Generic "image" glyph used for the PNG download item. Wraps MUI's
@@ -10,6 +10,15 @@ export function PNGIcon(props: SvgIconProps) {
   return <ImageOutlined {...props} />
 }
 
+/**
+ * Generic "document" glyph used for the Markdown download item. Wraps MUI's
+ * `ArticleOutlined`, mirroring {@link PNGIcon}, so the Markdown menu item
+ * carries an icon consistent with the other download formats.
+ */
+export function MarkdownIcon(props: SvgIconProps) {
+  return <ArticleOutlined {...props} />
+}
+
 /**
  * "CSV" rectangle with the letters spelled inside — matches v1 visual and is
  * easier to recognise in a download menu than a generic table glyph.

package/src/widgets-v2/actions/download/index.ts

@@ -7,7 +7,9 @@ export {
   type DownloadHandle,
   type DownloadDOMToPNGOptions,
 } from './exports'
-export { CSVIcon, PNGIcon } from './icons'
+export { CSVIcon, PNGIcon, MarkdownIcon } from './icons'
 export { buildPngDownloadItem, type BuildPngDownloadItemArgs } from './png-item'
+export { buildCsvDownloadItem, type BuildCsvDownloadItemArgs } from './csv-item'
+export { DOWNLOAD_ITEM_IDS, type DownloadItemId } from './constants'
 export type { DownloadItem } from './types'
 export { DEFAULT_DOWNLOAD_LABELS, type DownloadLabels } from './labels'

package/src/widgets-v2/actions/download/png-item.tsx

@@ -1,3 +1,4 @@
+import { DOWNLOAD_ITEM_IDS } from './constants'
 import { downloadDOMToPNG } from './exports'
 import { PNGIcon } from './icons'
 import type { DownloadItem } from './types'
@@ -29,7 +30,7 @@ export function buildPngDownloadItem(
   args: BuildPngDownloadItemArgs,
 ): DownloadItem {
   return {
-    id: 'png',
+    id: DOWNLOAD_ITEM_IDS.png,
     label: args.label ?? 'PNG',
     icon: <PNGIcon fontSize='small' />,
     resolve: async () => {

package/src/widgets-v2/actions/index.ts

@@ -54,14 +54,19 @@ export {
   toCsvString,
   triggerLinkDownload,
   buildPngDownloadItem,
+  buildCsvDownloadItem,
   CSVIcon,
   PNGIcon,
+  MarkdownIcon,
   DEFAULT_DOWNLOAD_LABELS,
+  DOWNLOAD_ITEM_IDS,
   type DownloadProps,
   type DownloadItem,
+  type DownloadItemId,
   type DownloadHandle,
   type DownloadDOMToPNGOptions,
   type BuildPngDownloadItemArgs,
+  type BuildCsvDownloadItemArgs,
   type DownloadLabels,
 } from './download'
 export {

package/src/widgets-v2/bar/download.tsx

@@ -1,7 +1,6 @@
 import {
-  CSVIcon,
+  buildCsvDownloadItem,
   buildPngDownloadItem,
-  downloadToCSV,
   type DownloadItem,
 } from '../actions/download'
 import type { BarWidgetData } from './types'
@@ -42,25 +41,20 @@ export function createBarDownloadConfig(
       }),
     )
   }
-  items.push({
-    id: 'csv',
-    label: 'CSV',
-    icon: <CSVIcon fontSize='small' />,
-    resolve: () => {
-      const data = args.getData()
-      const rows: unknown[][] = []
-      for (const [i, series] of data.entries()) {
-        if (i > 0) rows.push([])
-        rows.push(['name', 'value'])
-        for (const d of series) rows.push([d.name, d.value])
-      }
-      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[][] = []
+        for (const [i, series] of data.entries()) {
+          if (i > 0) rows.push([])
+          rows.push(['name', 'value'])
+          for (const d of series) rows.push([d.name, d.value])
+        }
+        return rows
+      },
+    }),
+  )
   return items
 }

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

@@ -37,6 +37,15 @@ describe('createCategoryDownloadConfig', () => {
     ).toEqual(['csv'])
   })
 
+  it('CSV item carries the canonical icon and short label', () => {
+    const item = createCategoryDownloadConfig({
+      filename: 'c',
+      getData: () => data,
+    }).find((i) => i.id === 'csv')!
+    expect(item.label).toBe('CSV')
+    expect(item.icon).toBeTruthy()
+  })
+
   it('prepends PNG when getCaptureEl is provided', () => {
     const items = createCategoryDownloadConfig({
       filename: 'c',

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

@@ -1,6 +1,6 @@
 import {
+  buildCsvDownloadItem,
   buildPngDownloadItem,
-  downloadToCSV,
   type DownloadItem,
 } from '../actions/download'
 import type { CategoryWidgetData } from './types'
@@ -30,25 +30,21 @@ export function createCategoryDownloadConfig(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 item of series) {
-          rows.push([seriesName, item.name, item.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 item of series) {
+            rows.push([seriesName, item.name, item.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/formula/download.tsx

@@ -1,7 +1,6 @@
 import {
-  CSVIcon,
+  buildCsvDownloadItem,
   buildPngDownloadItem,
-  downloadToCSV,
   type DownloadItem,
 } from '../actions/download'
 import type { FormulaWidgetData } from './types'
@@ -38,32 +37,27 @@ export function createFormulaDownloadConfig(
       }),
     )
   }
-  items.push({
-    id: 'csv',
-    label: 'CSV',
-    icon: <CSVIcon fontSize='small' />,
-    resolve: () => {
-      const data = args.getData()
-      const rows: unknown[][] = [
-        ['series', 'prefix', 'value', 'suffix', 'note', 'delta'],
-      ]
-      for (const d of data) {
-        rows.push([
-          d.series?.name ?? '',
-          d.prefix ?? '',
-          d.value,
-          d.suffix ?? '',
-          d.note ?? '',
-          d.delta?.value ?? '',
-        ])
-      }
-      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', 'value', 'suffix', 'note', 'delta'],
+        ]
+        for (const d of data) {
+          rows.push([
+            d.series?.name ?? '',
+            d.prefix ?? '',
+            d.value,
+            d.suffix ?? '',
+            d.note ?? '',
+            d.delta?.value ?? '',
+          ])
+        }
+        return rows
+      },
+    }),
+  )
   return items
 }

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

@@ -1,6 +1,6 @@
 import {
+  buildCsvDownloadItem,
   buildPngDownloadItem,
-  downloadToCSV,
   type DownloadItem,
 } from '../actions/download'
 import type { HistogramWidgetData } from './types'
@@ -31,30 +31,26 @@ export function createHistogramDownloadConfig(args: {
       }),
     )
   }
-  items.push({
-    id: 'csv',
-    label: 'Download as CSV',
-    resolve: () => {
-      const data = args.getData()
-      const ticks = args.getTicks()
-      const seriesCount = data.length
-      const header: unknown[] = ['bin_low', 'bin_high']
-      for (let i = 0; i < seriesCount; i++) {
-        header.push(args.seriesNames?.[i] ?? `series_${i + 1}`)
-      }
-      const rows: unknown[][] = [header]
-      for (let bin = 0; bin < Math.max(0, ticks.length - 1); bin++) {
-        const row: unknown[] = [ticks[bin], ticks[bin + 1]]
-        for (let s = 0; s < seriesCount; s++) row.push(data[s]?.[bin] ?? 0)
-        rows.push(row)
-      }
-      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 ticks = args.getTicks()
+        const seriesCount = data.length
+        const header: unknown[] = ['bin_low', 'bin_high']
+        for (let i = 0; i < seriesCount; i++) {
+          header.push(args.seriesNames?.[i] ?? `series_${i + 1}`)
+        }
+        const rows: unknown[][] = [header]
+        for (let bin = 0; bin < Math.max(0, ticks.length - 1); bin++) {
+          const row: unknown[] = [ticks[bin], ticks[bin + 1]]
+          for (let s = 0; s < seriesCount; s++) row.push(data[s]?.[bin] ?? 0)
+          rows.push(row)
+        }
+        return rows
+      },
+    }),
+  )
   return items
 }

package/src/widgets-v2/markdown/{download.ts → download.tsx}

@@ -1,4 +1,6 @@
 import {
+  DOWNLOAD_ITEM_IDS,
+  MarkdownIcon,
   buildPngDownloadItem,
   toCsvString,
   triggerLinkDownload,
@@ -31,8 +33,9 @@ export function createMarkdownDownloadConfig(args: {
     )
   }
   items.push({
-    id: 'md',
-    label: 'Download as Markdown',
+    id: DOWNLOAD_ITEM_IDS.markdown,
+    label: 'Markdown',
+    icon: <MarkdownIcon fontSize='small' />,
     resolve: () => {
       const data = args.getData()
       const blob = new Blob([data.content ?? ''], {

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 {