@carto/ps-react-ui 5.1.0 → 6.0.0

package/src/components/index.ts

@@ -1,5 +1,7 @@
 export type {
   // Common types
+  CssColor,
+  PaletteColor,
   // Measurement tools
   CustomMeasureMode,
   MeasurementMode,
@@ -148,9 +150,6 @@ export { GeolocationControls } from './geolocation-controls/geolocation-controls
 export type { ZoomControlProps } from './zoom-controls/types'
 export { ZoomControlsUI } from './zoom-controls/zoom-controls'
 
-export type { ListDataProps, DataItem } from './list-data/types'
-export { ListDataUI } from './list-data/list-data'
-
 export { BasemapsUI } from './basemaps/basemaps'
 export type { BasemapsUIProps } from './basemaps/types'
 

package/src/components/lasso-tool/geometry-toolbar.tsx

@@ -40,7 +40,7 @@ import {
  * </LassoTools.GeometryToolbar>
  * ```
  *
- * Same contract as widgets-v2: the actions take no data props (they read the
+ * Same contract as widgets: the actions take no data props (they read the
  * context) and each one renders nothing when its handler is missing, so a
  * composition can list every action safely. Pre-composed toolbars are
  * application-level code and live outside this library — see

package/src/components/lasso-tool/lasso-tool-inline.tsx

@@ -134,9 +134,13 @@ function InteractionModeWrapperBase({
       {showToggles && (
         <Typography
           variant='subtitle2'
-          color='text.secondary'
-          sx={styles.options.title}
           className='inline'
+          sx={[
+            {
+              color: 'text.secondary',
+            },
+            styles.options.title,
+          ]}
         >
           {title}
         </Typography>
@@ -214,9 +218,13 @@ function ModesWrapperBase({
     <Box>
       <Typography
         variant='subtitle2'
-        color='text.secondary'
-        sx={styles.options.title}
         className='inline'
+        sx={[
+          {
+            color: 'text.secondary',
+          },
+          styles.options.title,
+        ]}
       >
         {modeTitle}
       </Typography>

package/src/components/lasso-tool/lasso-tool.tsx

@@ -217,18 +217,21 @@ function Options({
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}
-        MenuListProps={{
-          sx: styles.options.menu,
-          // Focus the LIST on open. The menu's children come from a render
-          // prop (a component element), so MUI can never index an item to
-          // auto-focus: focus would stay on the Paper and the first ArrowDown
-          // would escape to the focus-trap sentinel — keyboard-unreachable.
-          // With the list focused, arrow keys traverse the DOM children.
-          autoFocus: true,
-        }}
         // The paper carries the same height ceiling as the list — it clips it
         // otherwise. `slotProps.paper` because `PaperProps` is deprecated.
-        slotProps={{ paper: { sx: styles.options.paper } }}
+        slotProps={{
+          paper: { sx: styles.options.paper },
+
+          list: {
+            sx: styles.options.menu,
+            // Focus the LIST on open. The menu's children come from a render
+            // prop (a component element), so MUI can never index an item to
+            // auto-focus: focus would stay on the Paper and the first ArrowDown
+            // would escape to the focus-trap sentinel — keyboard-unreachable.
+            // With the list focused, arrow keys traverse the DOM children.
+            autoFocus: true,
+          },
+        }}
         {...MenuProps}
       >
         {/* No wrapper: MenuList expects its MenuItem/Divider children
@@ -258,8 +261,12 @@ function ModeList({
     <>
       <Typography
         variant='subtitle2'
-        color='text.secondary'
-        sx={styles.options.title}
+        sx={[
+          {
+            color: 'text.secondary',
+          },
+          styles.options.title,
+        ]}
       >
         {modeTitle}
       </Typography>
@@ -575,8 +582,12 @@ const OptionsWrapperBase = function OptionsWrapperBase({
           <Divider />
           <Typography
             variant='subtitle2'
-            color='text.secondary'
-            sx={styles.options.title}
+            sx={[
+              {
+                color: 'text.secondary',
+              },
+              styles.options.title,
+            ]}
           >
             {selectionTitle}
           </Typography>
@@ -621,7 +632,7 @@ const OptionsWrapperBase = function OptionsWrapperBase({
 //
 // Every block works two ways: with explicit props (how the default composition
 // spreads them) or bare inside `children`, where it reads them from the
-// toolbar's context — the widgets-v2 contract.
+// toolbar's context — the widgets contract.
 
 type BlockProps = Parameters<typeof ActionsWrapperBase>[0]
 

package/src/components/lasso-tool/layer-filters.tsx

@@ -128,7 +128,12 @@ export function LassoLayerFiltersUI({
       {...DialogProps}
     >
       <DialogTitle component='div' sx={titleSx}>
-        <Typography variant='subtitle1' fontWeight={500}>
+        <Typography
+          variant='subtitle1'
+          sx={{
+            fontWeight: 500,
+          }}
+        >
           {title}
         </Typography>
         <IconButton aria-label='close' size='small' onClick={onClose}>
@@ -137,7 +142,13 @@ export function LassoLayerFiltersUI({
       </DialogTitle>
 
       <DialogContent sx={{ pt: 1, px: 2, pb: 3 }}>
-        <Typography variant='body2' color='text.secondary' sx={{ mb: 2 }}>
+        <Typography
+          variant='body2'
+          sx={{
+            color: 'text.secondary',
+            mb: 2,
+          }}
+        >
           {description}
         </Typography>
 
@@ -179,20 +190,30 @@ export function LassoLayerFiltersUI({
                       sx={{ p: 0.5 }}
                       checked={allChecked}
                       indeterminate={!allChecked && someChecked}
-                      inputProps={{ 'aria-labelledby': `${labelId}-all` }}
+                      slotProps={{
+                        input: { 'aria-labelledby': `${labelId}-all` },
+                      }}
                     />
                   </ListItemIcon>
                   <ListItemText
                     id={`${labelId}-all`}
                     primary={allSelectedLabel}
-                    primaryTypographyProps={{ variant: 'body2' }}
+                    slotProps={{
+                      primary: { variant: 'body2' },
+                    }}
                   />
                 </ListItemButton>
                 <Divider />
               </>
             )}
             {filtered.length === 0 ? (
-              <Typography variant='body2' color='text.secondary' sx={{ p: 2 }}>
+              <Typography
+                variant='body2'
+                sx={{
+                  color: 'text.secondary',
+                  p: 2,
+                }}
+              >
                 {empty}
               </Typography>
             ) : (
@@ -210,18 +231,22 @@ export function LassoLayerFiltersUI({
                       disableRipple
                       sx={{ p: 0.5 }}
                       checked={draft.has(layer.id)}
-                      inputProps={{
-                        'aria-labelledby': `${labelId}-${layer.id}`,
+                      slotProps={{
+                        input: {
+                          'aria-labelledby': `${labelId}-${layer.id}`,
+                        },
                       }}
                     />
                   </ListItemIcon>
                   <ListItemText
                     id={`${labelId}-${layer.id}`}
                     primary={layer.label}
-                    primaryTypographyProps={{
-                      variant: 'body2',
-                      noWrap: true,
-                      title: layer.label,
+                    slotProps={{
+                      primary: {
+                        variant: 'body2',
+                        noWrap: true,
+                        title: layer.label,
+                      },
                     }}
                   />
                 </ListItemButton>

package/src/components/lasso-tool/options-sections.test.tsx

@@ -2,9 +2,16 @@
  * Tests for the composable lasso options-menu sections.
  */
 import { describe, it, expect, vi } from 'vitest'
-import { render, fireEvent, screen } from '@testing-library/react'
+import { render as rtlRender, fireEvent, screen } from '@testing-library/react'
+import { MenuList } from '@mui/material'
+import type { ReactElement } from 'react'
 import { InteractionModeSection } from './options-sections'
 
+// MUI v9 makes `MenuItem` throw outside a `Menu` / `MenuList`. These sections
+// always render inside the options `<Menu>` in lasso-tool.tsx; the wrapper
+// reproduces that context without building the whole menu.
+const render = (ui: ReactElement) => rtlRender(<MenuList>{ui}</MenuList>)
+
 describe('InteractionModeSection', () => {
   it('renders the title and both options with mask selected', () => {
     render(<InteractionModeSection value='mask' onChange={vi.fn()} />)
@@ -67,7 +74,11 @@ describe('InteractionModeSection', () => {
     render(<InteractionModeSection value='mask' onChange={vi.fn()} />)
 
     const item = screen.getByRole('menuitemradio', { name: 'Mask' })
-    expect(item.getAttribute('tabindex')).toBe('-1')
+    // MUI v9 runs a roving tabindex inside MenuList: the active item carries
+    // tabindex="0" and the rest "-1". Either value means the item is reachable
+    // by arrow keys, so assert it is *in* the menu's tab management rather
+    // than pinning the specific value.
+    expect(['0', '-1']).toContain(item.getAttribute('tabindex'))
     expect(item.querySelector('input')!.getAttribute('tabindex')).toBe('-1')
     expect(item.querySelector('input')!.getAttribute('aria-hidden')).toBe(
       'true',

package/src/components/lasso-tool/options-sections.tsx

@@ -53,8 +53,12 @@ export function InteractionModeSection({
     <>
       <Typography
         variant='subtitle2'
-        color='text.secondary'
-        sx={styles.options.title}
+        sx={[
+          {
+            color: 'text.secondary',
+          },
+          styles.options.title,
+        ]}
       >
         {labels?.title ?? LASSO_TOOLS_LABELS.options.interactionMode.title}
       </Typography>
@@ -86,14 +90,20 @@ export function InteractionModeSection({
                 // the MenuItem's click (`readOnly` silences the
                 // controlled-without-onChange warning).
                 sx={{ p: 0, pointerEvents: 'none' }}
-                inputProps={{
-                  'aria-hidden': true,
-                  tabIndex: -1,
-                  readOnly: true,
+                slotProps={{
+                  input: {
+                    'aria-hidden': true,
+                    tabIndex: -1,
+                    readOnly: true,
+                  },
                 }}
               />
             </ListItemIcon>
-            <ListItemText primaryTypographyProps={{ variant: 'body2' }}>
+            <ListItemText
+              slotProps={{
+                primary: { variant: 'body2' },
+              }}
+            >
               {label}
             </ListItemText>
           </MenuItem>

package/src/components/lasso-tool/toolbar/connected.tsx

@@ -36,7 +36,7 @@ import {
 import type { LassoDrawColor } from '../types'
 
 /**
- * Connected actions for `LassoGeometryToolbarUI`: same widgets-v2 contract as
+ * Connected actions for `LassoGeometryToolbarUI`: same widgets contract as
  * `Widget.StackToggle` — no data props at the call site, state comes from the
  * toolbar's context. Each one **renders nothing when its handler is missing**,
  * so a composition can list every action and the ones the controller doesn't

package/src/components/lasso-tool/toolbar/context.tsx

@@ -9,7 +9,7 @@ import type { LassoGeometryToolbarUIProps } from '../types'
 /**
  * Everything the connected actions need, derived once by
  * `LassoGeometryToolbarUI` from the props it gets from the controller. Mirrors
- * the widgets-v2 contract: an action reads its state from here instead of
+ * the widgets contract: an action reads its state from here instead of
  * having it threaded through the call site.
  */
 export interface LassoGeometryToolbarContextValue extends Omit<

package/src/components/measurement-tools/measurement-tools.tsx

@@ -279,9 +279,11 @@ function Options({
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}
-        MenuListProps={{
-          'aria-labelledby': 'basic-button',
-          sx: styles.options.menu,
+        slotProps={{
+          list: {
+            'aria-labelledby': 'basic-button',
+            sx: styles.options.menu,
+          },
         }}
       >
         <div>
@@ -289,8 +291,12 @@ function Options({
             <>
               <Typography
                 variant='subtitle2'
-                color='text.secondary'
-                sx={styles.options.title}
+                sx={[
+                  {
+                    color: 'text.secondary',
+                  },
+                  styles.options.title,
+                ]}
               >
                 {modeTitle}
               </Typography>
@@ -322,8 +328,12 @@ function Options({
                 <ListItemText>{unitTitle}</ListItemText>
                 <Typography
                   variant='caption'
-                  fontWeight={500}
-                  sx={styles.options.tag}
+                  sx={[
+                    {
+                      fontWeight: 500,
+                    },
+                    styles.options.tag,
+                  ]}
                 >
                   {unitSelectedValue.short}
                 </Typography>
@@ -400,12 +410,17 @@ function UnitsModal({
       component={Box}
       onClose={onClose}
       maxWidth='xs'
-      PaperProps={{
-        component: 'form',
-        onSubmit: (e: FormEvent<HTMLFormElement>) => {
-          e.preventDefault()
-          const formData = new FormData(e.currentTarget)
-          onSubmit(formData.get('unit-value') as string)
+      slotProps={{
+        paper: {
+          component: 'form',
+          // v9 types the paper slot's `onSubmit` against the slot's own
+          // element (a div), not the `component` it renders as, so
+          // `currentTarget` needs narrowing back to the form it actually is.
+          onSubmit: (e: FormEvent<HTMLElement>) => {
+            e.preventDefault()
+            const formData = new FormData(e.currentTarget as HTMLFormElement)
+            onSubmit(formData.get('unit-value') as string)
+          },
         },
       }}
     >

package/src/components/no-data-alert/no-data-alert.tsx

@@ -42,7 +42,11 @@ interface AlertBodyProps {
 function AlertBody({ color, children }: AlertBodyProps) {
   if (children) {
     return (
-      <Box mt={0.5}>
+      <Box
+        sx={{
+          mt: 0.5,
+        }}
+      >
         <Typography
           component='div'
           variant='caption'
@@ -55,5 +59,11 @@ function AlertBody({ color, children }: AlertBodyProps) {
     )
   }
 
-  return <Box mt={-1} />
+  return (
+    <Box
+      sx={{
+        mt: -1,
+      }}
+    />
+  )
 }

package/src/components/responsive-drawer/responsive-drawer.tsx

@@ -203,7 +203,6 @@ export function ResponsiveDrawer<
       onClose={modal ? () => onChangeCollapsed(true) : undefined}
       hideBackdrop={!modal}
       disableScrollLock={!modal}
-      disableEscapeKeyDown={!modal}
       disableAutoFocus={!modal}
       disableEnforceFocus={!modal}
       disableRestoreFocus={!modal}

package/src/components/types.ts

@@ -1 +1,18 @@
 export * from './common-types'
+
+/**
+ * A theme palette path (`'primary.main'`, `'text.secondary'`) or a literal CSS
+ * color, for a prop the component resolves into `sx` itself.
+ *
+ * Never forwarded as Material UI's own `color` prop: since v9 that prop only
+ * matches generated variants (`'primary'`, `'textSecondary'`), so a palette
+ * path reaches the DOM as an inert attribute and the styling silently
+ * disappears.
+ */
+export type PaletteColor = string
+
+/**
+ * A literal CSS color that arrives as data — a ramp entry, a category swatch,
+ * a series tint — and is painted as given. Not resolved against the theme.
+ */
+export type CssColor = string

package/src/components/zoom-controls/zoom-controls.tsx

@@ -100,10 +100,12 @@ export function ZoomControlsUI({
         <>
           <Box sx={styles.zoom}>
             <Typography
-              display='block'
               align='center'
               color='textSecondary'
               variant='overline'
+              sx={{
+                display: 'block',
+              }}
             >
               {displayZoom}
             </Typography>

package/src/legend/components/legend-actions/legend-actions.tsx

@@ -13,7 +13,7 @@ export interface LegendActionsProps {
 }
 
 /**
- * Header actions slot for `Legend.Row` / `Legend.Group` (widgets-v2 `Actions`
+ * Header actions slot for `Legend.Row` / `Legend.Group` (widgets `Actions`
  * parity): the wrapper partitions its children by component identity and
  * renders this slot inside the header, wrapped in the hover-fade group
  * (`PsLegend-rowFade` in rows, `PsLegend-groupFade` in group headers —
@@ -38,7 +38,7 @@ export function LegendActions({ children }: LegendActionsProps) {
  * Splits a wrapper's children by component identity: `<Legend.Actions>`
  * elements belong in the header, everything else in the collapsible body.
  * Identity comparison works because consumers import the slot from the same
- * module (same pattern as widgets-v2 `Wrapper`).
+ * module (same pattern as widgets `Wrapper`).
  */
 export function partitionLegendChildren(children: ReactNode): {
   actions: ReactNode[]

package/src/legend/components/legend-category/legend-category-ui.tsx

@@ -66,8 +66,8 @@ export function LegendCategoryUI({ data }: LegendCategoryUIProps) {
           </Box>
           <Typography
             variant='caption'
-            color='text.primary'
             sx={{
+              color: 'text.primary',
               ...styles.label,
               ...(horizontal ? styles.labelHorizontal : null),
             }}
@@ -78,8 +78,12 @@ export function LegendCategoryUI({ data }: LegendCategoryUIProps) {
             <Typography
               className='PsLegend-value'
               variant='caption'
-              color='text.secondary'
-              sx={styles.value}
+              sx={[
+                {
+                  color: 'text.secondary',
+                },
+                styles.value,
+              ]}
             >
               {item.value}
             </Typography>

package/src/legend/components/legend-config-select/legend-config-select.tsx

@@ -69,9 +69,13 @@ export function LegendConfigSelect() {
             <Typography
               key={`${section.id}-title`}
               variant='overline'
-              color='text.secondary'
               component='li'
-              sx={styles.sectionTitle}
+              sx={[
+                {
+                  color: 'text.secondary',
+                },
+                styles.sectionTitle,
+              ]}
             >
               {section.title}
             </Typography>

package/src/legend/components/legend-group/legend-group.tsx

@@ -82,9 +82,13 @@ export function LegendGroup({ groupId, children }: LegendGroupProps) {
                 <Typography
                   ref={ref}
                   variant='button'
-                  fontWeight='bold'
                   color={hidden ? 'text.disabled' : 'text.primary'}
-                  sx={styles.label}
+                  sx={[
+                    {
+                      fontWeight: 'bold',
+                    },
+                    styles.label,
+                  ]}
                 >
                   {group.label}
                 </Typography>

package/src/legend/components/legend-group/styles.ts

@@ -41,7 +41,7 @@ export const styles = {
     // Distinct from the row header / panel body (both `background.paper`) so
     // the group header visually separates from the rest.
     backgroundColor: 'background.default',
-    // Hover-fade group actions (widgets-v2 Wrapper parity). Scoped to the
+    // Hover-fade group actions (widgets Wrapper parity). Scoped to the
     // header itself (not the group root) so hovering a member row's body
     // below never lights up the group's own actions/handle — only hovering
     // the header (title/handle/actions) does. A control carrying `.active`

package/src/legend/components/legend-icon/legend-icon-ui.tsx

@@ -31,8 +31,8 @@ export function LegendIconUI({ data }: LegendIconUIProps) {
           <Box component='img' src={item.icon} alt='' sx={styles.icon} />
           <Typography
             variant='caption'
-            color='text.primary'
             sx={{
+              color: 'text.primary',
               ...styles.label,
               ...(horizontal ? styles.labelHorizontal : null),
             }}
@@ -43,8 +43,12 @@ export function LegendIconUI({ data }: LegendIconUIProps) {
             <Typography
               className='PsLegend-value'
               variant='caption'
-              color='text.secondary'
-              sx={styles.value}
+              sx={[
+                {
+                  color: 'text.secondary',
+                },
+                styles.value,
+              ]}
             >
               {item.value}
             </Typography>

package/src/legend/components/legend-opacity/legend-opacity.tsx

@@ -93,7 +93,13 @@ function OpacityInline() {
   return (
     <Box sx={styles.inline}>
       <Box sx={styles.inlineHeader}>
-        <Typography variant='caption' fontWeight='medium' color='text.primary'>
+        <Typography
+          variant='caption'
+          sx={{
+            fontWeight: 'medium',
+            color: 'text.primary',
+          }}
+        >
           {labels.opacity}
         </Typography>
         <Tooltip title={labels.close}>
@@ -114,11 +120,11 @@ function OpacityInline() {
           step={1}
           value={percent}
           onChange={(_, value) => {
-            setDragPercent(value as number)
+            setDragPercent(value)
             setDraft(null)
           }}
           onChangeCommitted={(_, value) => {
-            commitPercent(value as number)
+            commitPercent(value)
             setDragPercent(null)
           }}
           aria-label={labels.opacity}

package/src/legend/components/legend-proportion/legend-proportion-ui.tsx

@@ -84,10 +84,20 @@ export function LegendProportionUI({
     <Box sx={styles.root}>
       {attribute && (
         <Box sx={styles.attribute}>
-          <Typography variant='overline' color='text.secondary'>
+          <Typography
+            variant='overline'
+            sx={{
+              color: 'text.secondary',
+            }}
+          >
             {labels.radiusRangeBy}
           </Typography>
-          <Typography variant='caption' color='text.primary'>
+          <Typography
+            variant='caption'
+            sx={{
+              color: 'text.primary',
+            }}
+          >
             {attribute}
           </Typography>
         </Box>
@@ -111,7 +121,13 @@ export function LegendProportionUI({
 
         <Box sx={{ ...styles.labels, height: MAX_DIAMETER }}>
           {breaks.map((value, i) => (
-            <Typography key={i} variant='caption' color='text.secondary'>
+            <Typography
+              key={i}
+              variant='caption'
+              sx={{
+                color: 'text.secondary',
+              }}
+            >
               {labelFor(value, i)}
             </Typography>
           ))}