@carto/ps-react-ui 4.11.2 → 4.12.0

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/src/widgets-v2/wrapper/style.ts

@@ -48,24 +48,6 @@ export const styles = {
         opacity: 1,
       },
     },
-
-    // Disabled state — only block interaction; keep visuals unchanged.
-    // MUI's default `.Mui-disabled` rules dim the AccordionSummary's color
-    // and add a faded background; we override them so the wrapper looks
-    // identical to its enabled form. The single behavioral change is
-    // `pointer-events: none`, which propagates to every descendant.
-    '&.Mui-disabled': {
-      pointerEvents: 'none',
-      bgcolor: 'background.paper',
-      '& .MuiAccordionSummary-root.Mui-disabled': {
-        opacity: 1,
-        color: 'inherit',
-        backgroundColor: 'transparent',
-      },
-      '& .MuiAccordionSummary-expandIconWrapper': {
-        display: 'none',
-      },
-    },
   },
   loading: {
     position: 'absolute',
@@ -83,6 +65,19 @@ export const styles = {
       alignItems: 'center',
     },
   },
+  // Disabled state — only the collapse toggle is inert (enforced by the
+  // guarded `onChange` handler, not `pointer-events`). Actions and Options in
+  // the summary row, and the details panel, all keep their events. We just
+  // drop the toggle affordance: hide the chevron (handled in the component)
+  // and clear the pointer cursor. MUI's AccordionSummary sets
+  // `cursor: pointer` via `&:hover:not(.Mui-disabled)` — a two-class selector
+  // that outranks a plain `cursor` rule — so we override at matching
+  // specificity. Action/Option buttons restore their own pointer cursor.
+  summaryDisabled: {
+    '&, &:hover:not(.Mui-disabled)': {
+      cursor: 'default',
+    },
+  },
   titleCell: {
     flexGrow: 1,
     flexShrink: 1,

package/src/widgets-v2/wrapper/widget-wrapper.test.tsx

@@ -186,4 +186,70 @@ describe('<Wrapper>', () => {
     )
     expect(screen.getByTestId('body')).toBeTruthy()
   })
+
+  it('disables only the summary, leaving the details panel interactive', () => {
+    let clicks = 0
+    render(
+      withProvider(
+        'wrap-10',
+        <Wrapper title='t' disabled>
+          <Content>
+            <button data-testid='body-btn' onClick={() => (clicks += 1)}>
+              click
+            </button>
+          </Content>
+        </Wrapper>,
+      ),
+    )
+    // The details panel keeps its events even while the wrapper is disabled.
+    fireEvent.click(screen.getByTestId('body-btn'))
+    expect(clicks).toBe(1)
+  })
+
+  it('does not toggle when the disabled summary is clicked', () => {
+    let lastCollapsed: boolean | undefined
+    render(
+      withProvider(
+        'wrap-11',
+        <Wrapper
+          title='t'
+          disabled
+          onCollapseChange={(c) => (lastCollapsed = c)}
+        >
+          <Content>body</Content>
+        </Wrapper>,
+      ),
+    )
+    fireEvent.click(screen.getByText('t'))
+    expect(lastCollapsed).toBeUndefined()
+  })
+
+  it('keeps summary actions clickable while the wrapper is disabled', () => {
+    let actionClicks = 0
+    let lastCollapsed: boolean | undefined
+    render(
+      withProvider(
+        'wrap-12',
+        <Wrapper
+          title='t'
+          disabled
+          onCollapseChange={(c) => (lastCollapsed = c)}
+        >
+          <Actions>
+            <button
+              data-testid='action-btn'
+              onClick={() => (actionClicks += 1)}
+            >
+              A
+            </button>
+          </Actions>
+          <Content>body</Content>
+        </Wrapper>,
+      ),
+    )
+    fireEvent.click(screen.getByTestId('action-btn'))
+    // The action fires, and clicking it must not toggle the disabled wrapper.
+    expect(actionClicks).toBe(1)
+    expect(lastCollapsed).toBeUndefined()
+  })
 })

package/src/widgets-v2/wrapper/widget-wrapper.tsx

@@ -103,11 +103,12 @@ export function Wrapper({
   const effectiveCollapsed = isControlled ? collapsed : internalCollapsed
   const handleAccordionToggle = useCallback(
     (_: unknown, expanded: boolean) => {
+      if (disabled) return
       const next = !expanded
       onCollapseChange?.(next)
       setInternalCollapsed(next)
     },
-    [onCollapseChange],
+    [disabled, onCollapseChange],
   )
   const _labels = { ...DEFAULT_WRAPPER_LABELS, ...labels }
 
@@ -121,7 +122,6 @@ export function Wrapper({
       data-collapsed={effectiveCollapsed ? 'true' : undefined}
       expanded={!effectiveCollapsed}
       onChange={handleAccordionToggle}
-      disabled={disabled}
       disableGutters
       elevation={0}
       variant={variant}
@@ -136,9 +136,12 @@ export function Wrapper({
       ) : null}
 
       <AccordionSummary
-        expandIcon={<ExpandIcon fontSize='small' {...iconProps} />}
+        expandIcon={
+          disabled ? null : <ExpandIcon fontSize='small' {...iconProps} />
+        }
         aria-label={ariaLabel}
-        sx={styles.summary}
+        aria-disabled={disabled || undefined}
+        sx={{ ...styles.summary, ...(disabled ? styles.summaryDisabled : null) }}
       >
         <SmartTooltip title={title}>
           {({ ref }) => (

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;"}