@carto/ps-react-ui 5.5.0 → 5.6.1

package/src/widgets-v2/index.ts

@@ -155,6 +155,7 @@ export type {
   ZoomToggleProps,
   BrushToggleProps,
   RelativeDataProps,
+  RelativeScale,
   DownloadProps,
   DownloadItem,
   DownloadContext,

package/src/widgets-v2/scatterplot/options.test.ts

@@ -213,6 +213,18 @@ describe('createScatterplotOptionFactory', () => {
     expect(out.yAxis.min).toBe(0)
   })
 
+  it("pins the y ends a config transform set (RelativeData 'total')", () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const out = merge({ yAxis: { min: -100, max: 100 } }, [
+      [
+        [1, 47],
+        [2, 3],
+      ],
+    ]) as { yAxis: { min: number; max: number } }
+    expect(out.yAxis.max).toBe(100)
+    expect(out.yAxis.min).toBe(0)
+  })
+
   it('always emits itemStyle.color as a callback (passthrough when no selection)', () => {
     const merge = createScatterplotOptionFactory({ theme })
     const out = merge({}, [[[1, 2]]]) as {

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

@@ -21,6 +21,7 @@ import type {
   ScatterplotItem,
   ScatterplotWidgetData,
 } from './types'
+import { fixedAxisBounds } from '../actions/relative-data/scale'
 
 /**
  * Builds the **structural** ECharts option for a scatterplot widget — both
@@ -189,8 +190,12 @@ export function createScatterplotOptionFactory(
 
     const reactiveFormatter = ctx?.formatter
 
-    const { niceMinX, niceMaxX, niceMinY, niceMaxY } =
-      computeScatterBounds(seriesArr)
+    const { niceMinX, niceMaxX, niceMinY, niceMaxY } = computeScatterBounds(
+      seriesArr,
+      // A config transform (RelativeData's `'total'` scale) may pin the
+      // y ends; each applies only on the side the data reaches.
+      fixedAxisBounds(baseYAxis),
+    )
 
     // Dim non-selected points via `series.itemStyle.color`. The selection
     // key is `${seriesIndex}:${dataIndex}`; we read those off the params
@@ -410,6 +415,7 @@ function buildScatterTooltipFormatter(
 
 function computeScatterBounds(
   seriesArr: ScatterplotWidgetData<ScatterplotItem>,
+  fixedY: { min?: number; max?: number } = {},
 ): {
   niceMinX: number
   niceMaxX: number
@@ -439,8 +445,16 @@ function computeScatterBounds(
   // negative mins, and floor max=0 to 1 so the chart always has range.
   // Scatter can have free coordinates so we apply this per-axis.
   const niceMaxX = Number.isFinite(maxX) ? (maxX <= 0 ? 1 : niceNum(maxX)) : 1
-  const niceMaxY = Number.isFinite(maxY) ? (maxY <= 0 ? 1 : niceNum(maxY)) : 1
+  const niceMaxY = Number.isFinite(maxY)
+    ? maxY <= 0
+      ? 1
+      : (fixedY.max ?? niceNum(maxY))
+    : 1
   const niceMinX = Number.isFinite(minX) ? (minX < 0 ? niceNum(minX) : 0) : 0
-  const niceMinY = Number.isFinite(minY) ? (minY < 0 ? niceNum(minY) : 0) : 0
+  const niceMinY = Number.isFinite(minY)
+    ? minY < 0
+      ? (fixedY.min ?? niceNum(minY))
+      : 0
+    : 0
   return { niceMinX, niceMaxX, niceMinY, niceMaxY }
 }

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

@@ -20,6 +20,7 @@ import type {
   TimeseriesOptionsInput,
   TimeseriesWidgetData,
 } from './types'
+import { fixedAxisBounds } from '../actions/relative-data/scale'
 
 /**
  * Builds the **structural** ECharts option for a timeseries widget —
@@ -188,6 +189,7 @@ export function createTimeseriesOptionFactory(
       typeof option.yAxis === 'object' && !Array.isArray(option.yAxis)
         ? option.yAxis
         : {}
+    const fixedY = fixedAxisBounds(baseYAxis)
     const baseGrid =
       typeof option.grid === 'object' && !Array.isArray(option.grid)
         ? option.grid
@@ -302,12 +304,14 @@ export function createTimeseriesOptionFactory(
       ...(dataZoomLayout ? { dataZoom: dataZoomLayout } : {}),
       yAxis: {
         ...baseYAxis,
+        // A config transform (RelativeData's `'total'` scale) may pin the
+        // ends; each applies only on the side the data reaches.
         min: (extent: { min: number }) => {
-          niceMin = extent.min < 0 ? niceNum(extent.min) : 0
+          niceMin = extent.min < 0 ? (fixedY.min ?? niceNum(extent.min)) : 0
           return niceMin
         },
         max: (extent: { min: number; max: number }) => {
-          niceMax = extent.max <= 0 ? 1 : niceNum(extent.max)
+          niceMax = extent.max <= 0 ? 1 : (fixedY.max ?? niceNum(extent.max))
           return niceMax
         },
         axisLabel: {

package/src/widgets-v2/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-v2/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-v2/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-v2/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
@@ -188,7 +189,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>
   )
 }