@carto/ps-react-ui 6.4.0 → 6.5.1

package/src/widgets/scatterplot/options.ts

@@ -12,6 +12,7 @@ import {
 import { ZOOM_LAYOUT } from '../actions/zoom-toggle'
 import type { OptionFactory } from '../echart'
 import { mergeOptions, resolveThemeColor } from '../utils'
+import { spacingPx } from '../utils/spacing-px'
 import { createItemColorResolver } from '../utils/item-color'
 import { getScatterplotXY } from './points'
 import type {
@@ -45,9 +46,9 @@ export function scatterplotOptions({
 }: ScatterplotOptionsInput): ScatterplotEChartsOption {
   return {
     grid: {
-      left: parseInt(theme.spacing(1)),
-      top: parseInt(theme.spacing(3)),
-      right: parseInt(theme.spacing(1)),
+      left: spacingPx(theme, 1),
+      top: spacingPx(theme, 3),
+      right: spacingPx(theme, 1),
       // Default: no legend. Merger bumps `bottom` when there are >1 series.
       ...buildGridConfig(false, theme),
       containLabel: true,
@@ -58,7 +59,7 @@ export function scatterplotOptions({
       trigger: 'item',
       backgroundColor: theme.palette.grey[900],
       borderWidth: 0,
-      padding: [parseInt(theme.spacing(1)), parseInt(theme.spacing(1))],
+      padding: [spacingPx(theme, 1), spacingPx(theme, 1)],
       textStyle: {
         color: theme.palette.common.white,
         fontSize: 11,
@@ -86,7 +87,7 @@ export function scatterplotOptions({
       axisTick: { show: false },
       axisLabel: {
         ...buildAxisLabelStyle(theme),
-        margin: parseInt(theme.spacing(1)),
+        margin: spacingPx(theme, 1),
         hideOverlap: true,
         showMinLabel: true,
         showMaxLabel: true,
@@ -103,7 +104,7 @@ export function scatterplotOptions({
       axisTick: { show: false },
       axisLabel: {
         ...buildAxisLabelStyle(theme),
-        margin: parseInt(theme.spacing(1)),
+        margin: spacingPx(theme, 1),
         hideOverlap: true,
         showMinLabel: true,
         showMaxLabel: true,

package/src/widgets/timeseries/options.ts

@@ -12,6 +12,7 @@ import {
 import { ZOOM_LAYOUT } from '../actions/zoom-toggle'
 import type { OptionFactory } from '../echart'
 import { mergeOptions, resolveThemeColor } from '../utils'
+import { spacingPx } from '../utils/spacing-px'
 import { createItemColorResolver } from '../utils/item-color'
 import { positionDataZoomForLegend } from '../utils/data-zoom-layout'
 import type {
@@ -53,9 +54,9 @@ export function timeseriesOptions({
 
   return {
     grid: {
-      left: parseInt(theme.spacing(1)),
-      top: parseInt(theme.spacing(3)),
-      right: parseInt(theme.spacing(1)),
+      left: spacingPx(theme, 1),
+      top: spacingPx(theme, 3),
+      right: spacingPx(theme, 1),
       // Default: no legend. Merger bumps this when there are >1 series.
       ...buildGridConfig(false, theme),
       containLabel: true,
@@ -64,7 +65,7 @@ export function timeseriesOptions({
       trigger: 'axis',
       backgroundColor: theme.palette.grey[900],
       borderWidth: 0,
-      padding: [parseInt(theme.spacing(1)), parseInt(theme.spacing(1))],
+      padding: [spacingPx(theme, 1), spacingPx(theme, 1)],
       textStyle: {
         color: theme.palette.common.white,
         fontSize: 11,
@@ -93,7 +94,7 @@ export function timeseriesOptions({
       axisTick: { show: false },
       axisLabel: {
         ...buildAxisLabelStyle(theme),
-        padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],
+        padding: [spacingPx(theme, 0.5), 0, 0, 0],
         margin: 0,
         hideOverlap: true,
         ...(labelFormatter && {
@@ -119,7 +120,7 @@ export function timeseriesOptions({
       },
       axisLabel: {
         ...buildAxisLabelStyle(theme),
-        margin: parseInt(theme.spacing(1)),
+        margin: spacingPx(theme, 1),
         show: true,
         showMaxLabel: true,
         showMinLabel: true,

package/src/widgets/toolbox/toolbox.test.tsx

@@ -4,6 +4,9 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { IconButton } from '@mui/material'
 import { Star as StarIcon } from '@mui/icons-material'
 import { Toolbox } from './toolbox'
+import { Provider } from '../provider/widget-provider'
+import { Wrapper } from '../wrapper/widget-wrapper'
+import { Content } from '../wrapper/widget-content'
 
 function makeChildren(n: number) {
   return Array.from({ length: n }).map((_, i) => (
@@ -197,4 +200,29 @@ describe('<Toolbox>', () => {
       expect(isItemVisible(`Tool ${i}`)).toBe(true)
     }
   })
+
+  it('closes the overflow popper when its Wrapper collapses', () => {
+    render(
+      <Provider id='toolbox-collapse' data={[]}>
+        <Wrapper title='Spam'>
+          <Content>
+            <Toolbox visibleCount={2}>{makeChildren(5)}</Toolbox>
+          </Content>
+        </Wrapper>
+      </Provider>,
+    )
+    fireEvent.click(screen.getByLabelText('More actions'))
+    expect(isItemVisible('Tool 5')).toBe(true)
+
+    // The Accordion keeps its details mounted, so without this the portalled
+    // popper stayed floating over the page after the widget collapsed.
+    fireEvent.click(screen.getByRole('button', { name: 'Collapse' }))
+    expect(screen.queryByLabelText('Close')).toBeNull()
+    expect(isItemVisible('Tool 5')).toBe(false)
+
+    // Expanding again shows the closed toolbox, not the popper.
+    fireEvent.click(screen.getByRole('button', { name: 'Expand' }))
+    expect(screen.getByLabelText('More actions')).toBeTruthy()
+    expect(isItemVisible('Tool 5')).toBe(false)
+  })
 })

package/src/widgets/toolbox/toolbox.tsx

@@ -26,6 +26,7 @@ import { Close as CloseIcon } from '@mui/icons-material'
 import { WidgetOptions } from '@carto/meridian-ds/custom-icons'
 import { Tooltip } from '../../components'
 import { DEFAULT_TOOLBOX_LABELS, type ToolboxLabels } from './labels'
+import { useWrapperCollapsed } from '../wrapper/collapsed-context'
 import { styles } from './style'
 
 export interface ToolboxProps {
@@ -166,6 +167,14 @@ export function Toolbox({
     setOpen(false)
   }
 
+  // Same pattern when the enclosing Wrapper collapses: its Accordion keeps
+  // the details mounted, so the portalled popper would otherwise stay open
+  // over the page with no visible trigger.
+  const collapsed = useWrapperCollapsed()
+  if (collapsed && open) {
+    setOpen(false)
+  }
+
   // Reparent the host into the active shell whenever `open` (or either
   // shell) changes. `useLayoutEffect` runs synchronously after commit
   // (after refs have been written), so the popover Paper ref is already

package/src/widgets/utils/css-variables-theme.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { createCartoTheme } from '../../theme/create-carto-theme'
+import { barOptions } from '../bar/options'
+import { histogramOptions } from '../histogram/options'
+import { pieOptions } from '../pie/options'
+import { scatterplotOptions } from '../scatterplot/options'
+import { timeseriesOptions } from '../timeseries/options'
+
+const theme = createCartoTheme()
+
+function nanPaths(value: unknown, path = '$'): string[] {
+  if (typeof value === 'number') return Number.isNaN(value) ? [path] : []
+  if (Array.isArray(value))
+    return value.flatMap((v, i) => nanPaths(v, `${path}[${i}]`))
+  if (value && typeof value === 'object')
+    return Object.entries(value).flatMap(([k, v]) =>
+      nanPaths(v, `${path}.${k}`),
+    )
+  return []
+}
+
+describe('ECharts options with a cssVariables theme', () => {
+  it.each([
+    ['bar', () => barOptions({ theme })],
+    ['histogram', () => histogramOptions({ theme })],
+    ['pie', () => pieOptions({ theme })],
+    ['scatterplot', () => scatterplotOptions({ theme })],
+    ['timeseries', () => timeseriesOptions({ theme })],
+  ])('%s has no NaN in its options', (_name, build) => {
+    expect(nanPaths(build())).toEqual([])
+  })
+})

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

@@ -4,6 +4,7 @@ import type {
   CallbackDataParams,
   TopLevelFormatterParams,
 } from 'echarts/types/dist/shared'
+import { spacingPx } from './spacing-px'
 
 /**
  * Shared EChart configuration builders for chart widgets
@@ -61,8 +62,8 @@ export function buildLegendConfig({
  */
 export function buildGridConfig(hasLegend: boolean, theme: Theme) {
   return {
-    ...(!hasLegend && { bottom: parseInt(theme.spacing(3)) }),
-    ...(hasLegend && { bottom: parseInt(theme.spacing(7)) }),
+    ...(!hasLegend && { bottom: spacingPx(theme, 3) }),
+    ...(hasLegend && { bottom: spacingPx(theme, 7) }),
   }
 }
 
@@ -106,10 +107,7 @@ export function createTooltipPositioner(theme: Theme) {
     _rect: unknown,
     size: { contentSize: [number, number]; viewSize: [number, number] },
   ) {
-    const position = { top: parseInt(theme.spacing(0.5)) } as Record<
-      string,
-      number
-    >
+    const position = { top: spacingPx(theme, 0.5) } as Record<string, number>
 
     // Position tooltip left or right based on available space
     if (size.contentSize[0] < size.viewSize[0] - point[0]) {

package/src/widgets/utils/spacing-px.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { createTheme, responsiveFontSizes, type Theme } from '@mui/material'
+import {
+  cartoThemeOptions,
+  theme as cartoTheme,
+} from '@carto/meridian-ds/theme'
+import { createCartoTheme } from '../../theme/create-carto-theme'
+import { spacingPx } from './spacing-px'
+
+const FACTORS = [0.5, 1, 3, 4, 7]
+
+describe('spacingPx', () => {
+  it('matches the previous parseInt(theme.spacing(n)) for the current CARTO theme', () => {
+    const theme = createTheme(cartoTheme)
+    for (const factor of FACTORS) {
+      expect(spacingPx(theme, factor)).toBe(parseInt(theme.spacing(factor)))
+    }
+  })
+
+  it('resolves numbers for a CARTO theme with cssVariables', () => {
+    const theme = responsiveFontSizes(
+      createTheme({ ...cartoThemeOptions, cssVariables: true }),
+    )
+    expect(theme.spacing(1)).toContain('var(')
+    expect(FACTORS.map((f) => spacingPx(theme, f))).toEqual([4, 8, 24, 32, 56])
+  })
+
+  it('falls back to 8px per unit for a plain MUI theme with cssVariables', () => {
+    const theme = createTheme({ cssVariables: true }) as unknown as Theme
+    expect(FACTORS.map((f) => spacingPx(theme, f))).toEqual([4, 8, 24, 32, 56])
+  })
+
+  it('honours a numeric spacing override on createCartoTheme', () => {
+    const theme = createCartoTheme({ spacing: 4 })
+    expect(FACTORS.map((f) => spacingPx(theme, f))).toEqual([2, 4, 12, 16, 28])
+  })
+
+  it('honours a function spacing override under cssVariables', () => {
+    const theme = createCartoTheme({ spacing: (f: number) => f * 6 })
+    expect(spacingPx(theme, 1)).toBe(6)
+  })
+})

package/src/widgets/utils/spacing-px.ts

@@ -0,0 +1,24 @@
+import type { Theme } from '@mui/material'
+
+/**
+ * Theme spacing as a pixel number, for APIs that need numbers (ECharts).
+ *
+ * `theme.spacing(n)` returns `"8px"` for a regular theme but
+ * `"var(--mui-spacing, 8px)"` / `"calc(...)"` once the theme uses
+ * `cssVariables`, which does not parse. Resolution order:
+ * 1. `parseFloat` of `theme.spacing(factor)` (regular themes);
+ * 2. the px unit MUI writes into `theme.spacing(1)` (`var(--mui-spacing, Npx)`),
+ *    which honours a `spacing` override such as `createCartoTheme({ spacing: 4 })`;
+ * 3. meridian's numeric `spacingValue`, or MUI's default 8px.
+ */
+export function spacingPx(theme: Theme, factor: number): number {
+  const parsed = parseFloat(theme.spacing(factor))
+  if (Number.isFinite(parsed)) return parsed
+  // `spacing(1)` is `var(--mui-spacing, Npx)`; larger factors are
+  // `calc(f * var(--mui-spacing, Npx))`, so read the unit from the former.
+  const fallback = /,\s*(-?[\d.]+)px\)\s*$/.exec(theme.spacing(1))
+  const px = fallback ? Number(fallback[1]) : NaN
+  if (Number.isFinite(px)) return px * factor
+  const unit = (theme.spacingValue as number | undefined) ?? 8
+  return unit * factor
+}

package/src/widgets/wrapper/collapsed-context.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react'
+
+/**
+ * Whether the enclosing `<Wrapper>` is collapsed. The Accordion keeps its
+ * details mounted, so content that opens portalled UI (the Toolbox popper)
+ * reads this to close it. `false` outside a Wrapper.
+ */
+export const WrapperCollapsedContext = createContext(false)
+
+export function useWrapperCollapsed(): boolean {
+  return useContext(WrapperCollapsedContext)
+}

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

@@ -24,6 +24,7 @@ import { useWidget, useWidgetId } from '../stores'
 import { Actions, Options } from './widget-actions'
 import { styles } from './style'
 import { DEFAULT_WRAPPER_LABELS, type WrapperLabels } from './labels'
+import { WrapperCollapsedContext } from './collapsed-context'
 
 export interface WrapperProps {
   title: string
@@ -192,7 +193,11 @@ export function Wrapper({
           </Box>
         )}
       </Box>
-      <AccordionDetails sx={styles.detail}>{detailsSlots}</AccordionDetails>
+      <AccordionDetails sx={styles.detail}>
+        <WrapperCollapsedContext.Provider value={effectiveCollapsed}>
+          {detailsSlots}
+        </WrapperCollapsedContext.Provider>
+      </AccordionDetails>
     </Accordion>
   )
 }