@carto/ps-react-ui 5.1.0 → 6.0.0

package/package.json

@@ -1,42 +1,52 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "5.1.0",
+  "version": "6.0.0",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {
-    "@carto/meridian-ds": "2.14.0",
+    "@carto/meridian-ds": "5.1.1",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@emotion/styled": "11.14.1",
-    "@mui/icons-material": "5.18.0",
-    "@mui/material": "5.18.0",
-    "@mui/x-date-pickers": "7.29.4",
+    "@mui/icons-material": "9.4.0",
+    "@mui/material": "9.4.0",
+    "@mui/system": "9.4.0",
+    "@mui/x-date-pickers": "9.13.0",
+    "@types/jscodeshift": "^17.3.0",
     "echarts": "6.1.0",
     "html2canvas": "1.4.1",
+    "jscodeshift": "^17.4.0",
     "react-dom": "19.2.8",
     "react-markdown": "10.1.0",
     "zustand": "5.0.15",
-    "@carto/ps-utils": "2.2.0",
-    "@carto/ps-common-types": "1.0.0"
+    "@carto/ps-common-types": "1.0.0",
+    "@carto/ps-utils": "2.2.0"
   },
   "peerDependencies": {
-    "@carto/meridian-ds": "^2.0.0",
+    "@carto/meridian-ds": "^5.0.0",
     "@dnd-kit/core": "^6.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.0.0",
     "@emotion/styled": "^11.0.0",
-    "@mui/icons-material": "^5.0.0",
-    "@mui/material": "^5.0.0",
-    "@mui/x-date-pickers": "^7.0.0",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "@mui/system": "^9.0.0",
+    "@mui/x-date-pickers": "^9.0.0",
     "echarts": "^6.0.0",
     "html2canvas": "^1.4.1",
+    "jscodeshift": "^17.0.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-markdown": "^10.0.0",
     "zustand": "^5.0.0",
     "@carto/ps-utils": "2.2.0"
   },
+  "peerDependenciesMeta": {
+    "jscodeshift": {
+      "optional": true
+    }
+  },
   "exports": {
     "./chat": {
       "import": "./dist/chat.js",
@@ -54,86 +64,22 @@
       "import": "./dist/legend/stores.js",
       "types": "./dist/types/legend/stores/index.d.ts"
     },
-    "./widgets/actions": {
-      "import": "./dist/widgets/actions.js",
-      "types": "./dist/types/widgets/actions/index.d.ts"
-    },
-    "./widgets-v2": {
-      "import": "./dist/widgets-v2.js",
-      "types": "./dist/types/widgets-v2/index.d.ts"
-    },
-    "./widgets-v2/stores": {
-      "import": "./dist/widgets-v2/stores.js",
-      "types": "./dist/types/widgets-v2/stores/index.d.ts"
-    },
-    "./widgets-v2/utils": {
-      "import": "./dist/widgets-v2/utils.js",
-      "types": "./dist/types/widgets-v2/utils/index.d.ts"
-    },
-    "./widgets-v2/bar": {
-      "import": "./dist/widgets-v2/bar.js",
-      "types": "./dist/types/widgets-v2/bar/index.d.ts"
-    },
-    "./widgets-v2/formula": {
-      "import": "./dist/widgets-v2/formula.js",
-      "types": "./dist/types/widgets-v2/formula/index.d.ts"
-    },
-    "./widgets-v2/histogram": {
-      "import": "./dist/widgets-v2/histogram.js",
-      "types": "./dist/types/widgets-v2/histogram/index.d.ts"
-    },
-    "./widgets-v2/markdown": {
-      "import": "./dist/widgets-v2/markdown.js",
-      "types": "./dist/types/widgets-v2/markdown/index.d.ts"
-    },
-    "./widgets-v2/pie": {
-      "import": "./dist/widgets-v2/pie.js",
-      "types": "./dist/types/widgets-v2/pie/index.d.ts"
-    },
-    "./widgets-v2/timeseries": {
-      "import": "./dist/widgets-v2/timeseries.js",
-      "types": "./dist/types/widgets-v2/timeseries/index.d.ts"
-    },
-    "./widgets-v2/scatterplot": {
-      "import": "./dist/widgets-v2/scatterplot.js",
-      "types": "./dist/types/widgets-v2/scatterplot/index.d.ts"
-    },
-    "./widgets-v2/spread": {
-      "import": "./dist/widgets-v2/spread.js",
-      "types": "./dist/types/widgets-v2/spread/index.d.ts"
-    },
-    "./widgets-v2/range": {
-      "import": "./dist/widgets-v2/range.js",
-      "types": "./dist/types/widgets-v2/range/index.d.ts"
+    "./widgets": {
+      "import": "./dist/widgets.js",
+      "types": "./dist/types/widgets/index.d.ts"
     },
-    "./widgets-v2/category": {
-      "import": "./dist/widgets-v2/category.js",
-      "types": "./dist/types/widgets-v2/category/index.d.ts"
-    },
-    "./widgets-v2/table": {
-      "import": "./dist/widgets-v2/table.js",
-      "types": "./dist/types/widgets-v2/table/index.d.ts"
-    },
-    "./widgets-v2/actions": {
-      "import": "./dist/widgets-v2/actions.js",
-      "types": "./dist/types/widgets-v2/actions/index.d.ts"
+    "./widgets/stores": {
+      "import": "./dist/widgets/stores.js",
+      "types": "./dist/types/widgets/stores/index.d.ts"
     },
-    "./widgets-v2/echart": {
-      "import": "./dist/widgets-v2/echart.js",
-      "types": "./dist/types/widgets-v2/echart/index.d.ts"
+    "./widgets/utils": {
+      "import": "./dist/widgets/utils.js",
+      "types": "./dist/types/widgets/utils/index.d.ts"
     },
     "./widgets/bar": {
       "import": "./dist/widgets/bar.js",
       "types": "./dist/types/widgets/bar/index.d.ts"
     },
-    "./widgets/category": {
-      "import": "./dist/widgets/category.js",
-      "types": "./dist/types/widgets/category/index.d.ts"
-    },
-    "./widgets/echart": {
-      "import": "./dist/widgets/echart.js",
-      "types": "./dist/types/widgets/echart/index.d.ts"
-    },
     "./widgets/formula": {
       "import": "./dist/widgets/formula.js",
       "types": "./dist/types/widgets/formula/index.d.ts"
@@ -146,73 +92,41 @@
       "import": "./dist/widgets/markdown.js",
       "types": "./dist/types/widgets/markdown/index.d.ts"
     },
-    "./widgets/note": {
-      "import": "./dist/widgets/note.js",
-      "types": "./dist/types/widgets/note/index.d.ts"
-    },
-    "./widgets/no-data": {
-      "import": "./dist/widgets/no-data.js",
-      "types": "./dist/types/widgets/no-data/index.d.ts"
-    },
-    "./widgets/error": {
-      "import": "./dist/widgets/error.js",
-      "types": "./dist/types/widgets/error/index.d.ts"
-    },
     "./widgets/pie": {
       "import": "./dist/widgets/pie.js",
       "types": "./dist/types/widgets/pie/index.d.ts"
     },
-    "./widgets/range": {
-      "import": "./dist/widgets/range.js",
-      "types": "./dist/types/widgets/range/index.d.ts"
-    },
-    "./widgets/loader": {
-      "import": "./dist/widgets/loader.js",
-      "types": "./dist/types/widgets/loader/index.d.ts"
-    },
-    "./widgets/selection-summary": {
-      "import": "./dist/widgets/selection-summary.js",
-      "types": "./dist/types/widgets/selection-summary/index.d.ts"
+    "./widgets/timeseries": {
+      "import": "./dist/widgets/timeseries.js",
+      "types": "./dist/types/widgets/timeseries/index.d.ts"
     },
     "./widgets/scatterplot": {
       "import": "./dist/widgets/scatterplot.js",
       "types": "./dist/types/widgets/scatterplot/index.d.ts"
     },
-    "./widgets/skeleton-loader": {
-      "import": "./dist/widgets/skeleton-loader.js",
-      "types": "./dist/types/widgets/skeleton-loader/index.d.ts"
-    },
     "./widgets/spread": {
       "import": "./dist/widgets/spread.js",
       "types": "./dist/types/widgets/spread/index.d.ts"
     },
-    "./widgets/subheader": {
-      "import": "./dist/widgets/subheader.js",
-      "types": "./dist/types/widgets/subheader/index.d.ts"
+    "./widgets/range": {
+      "import": "./dist/widgets/range.js",
+      "types": "./dist/types/widgets/range/index.d.ts"
     },
-    "./widgets/stores": {
-      "import": "./dist/widgets/stores.js",
-      "types": "./dist/types/widgets/stores/index.d.ts"
+    "./widgets/category": {
+      "import": "./dist/widgets/category.js",
+      "types": "./dist/types/widgets/category/index.d.ts"
     },
     "./widgets/table": {
       "import": "./dist/widgets/table.js",
       "types": "./dist/types/widgets/table/index.d.ts"
     },
-    "./widgets/timeseries": {
-      "import": "./dist/widgets/timeseries.js",
-      "types": "./dist/types/widgets/timeseries/index.d.ts"
-    },
-    "./widgets/toolbar-actions": {
-      "import": "./dist/widgets/toolbar-actions.js",
-      "types": "./dist/types/widgets/toolbar-actions/index.d.ts"
-    },
-    "./widgets/utils": {
-      "import": "./dist/widgets/utils.js",
-      "types": "./dist/types/widgets/utils/index.d.ts"
+    "./widgets/actions": {
+      "import": "./dist/widgets/actions.js",
+      "types": "./dist/types/widgets/actions/index.d.ts"
     },
-    "./widgets/wrapper": {
-      "import": "./dist/widgets/wrapper.js",
-      "types": "./dist/types/widgets/wrapper/index.d.ts"
+    "./widgets/echart": {
+      "import": "./dist/widgets/echart.js",
+      "types": "./dist/types/widgets/echart/index.d.ts"
     }
   },
   "publishConfig": {

package/src/chat/bubbles/chat-agent-message-markdown.tsx

@@ -7,7 +7,7 @@ import type { ChatAgentMessageMarkdownProps } from '../types'
 // actually import this component. The Suspense fallback renders the raw text
 // until the chunk resolves.
 const MarkdownContent = lazy(() =>
-  import('../../widgets-v2/markdown/markdown-content').then((m) => ({
+  import('../../widgets/markdown/markdown-content').then((m) => ({
     default: m.MarkdownContent,
   })),
 )

package/src/chat/bubbles/chat-error-message.tsx

@@ -1,5 +1,5 @@
 import { Box, Link, Typography } from '@mui/material'
-import { ErrorOutline } from '@mui/icons-material'
+import { ErrorOutlineOutlined } from '@mui/icons-material'
 import type { ChatErrorMessageProps } from '../types'
 import { styles } from './styles'
 
@@ -11,9 +11,15 @@ export function ChatErrorMessage({
 }: ChatErrorMessageProps) {
   return (
     <Box sx={{ ...styles.errorMessage, ...sx }}>
-      {icon ?? <ErrorOutline fontSize='medium' color='error' />}
+      {icon ?? <ErrorOutlineOutlined fontSize='medium' color='error' />}
       {errors.map((error, index) => (
-        <Typography key={index} variant='subtitle2' color='error.relatedDark'>
+        <Typography
+          key={index}
+          variant='subtitle2'
+          sx={{
+            color: 'error.relatedDark',
+          }}
+        >
           {error}
         </Typography>
       ))}

package/src/chat/bubbles/chat-suggestion-button.tsx

@@ -5,7 +5,7 @@ import { styles } from './styles'
 
 export function ChatSuggestionButton({
   label,
-  color,
+  backgroundColor,
   sx,
   ...props
 }: ChatSuggestionButtonProps) {
@@ -13,12 +13,17 @@ export function ChatSuggestionButton({
     <ButtonBase
       sx={{
         ...styles.suggestionButton,
-        ...(color ? { backgroundColor: color } : undefined),
+        ...(backgroundColor ? { backgroundColor } : undefined),
         ...sx,
       }}
       {...props}
     >
-      <Typography color='inherit' variant='body2'>
+      <Typography
+        variant='body2'
+        sx={{
+          color: 'inherit',
+        }}
+      >
         {label}
       </Typography>
       <ArrowUpward />

package/src/chat/containers/chat-footer.tsx

@@ -122,8 +122,12 @@ export function ChatFooter({
                     <Typography
                       variant='caption'
                       component='span'
-                      color='inherit'
-                      sx={styles.modelSelectorLabel}
+                      sx={[
+                        {
+                          color: 'inherit',
+                        },
+                        styles.modelSelectorLabel,
+                      ]}
                     >
                       {selectedLabel}
                     </Typography>

package/src/chat/containers/chat-starter.tsx

@@ -23,12 +23,12 @@ export function ChatStarter({
     if (typeof item === 'string') {
       return {
         label: item,
-        color: DEFAULT_PALETTE[index],
+        backgroundColor: DEFAULT_PALETTE[index],
       }
     } else {
       return {
         label: item.label,
-        color: item.color ?? DEFAULT_PALETTE[index],
+        backgroundColor: item.backgroundColor ?? DEFAULT_PALETTE[index],
       }
     }
   })
@@ -49,7 +49,9 @@ export function ChatStarter({
       {description && (
         <Typography
           variant={size === 'small' ? 'body2' : 'body1'}
-          color='text.secondary'
+          sx={{
+            color: 'text.secondary',
+          }}
         >
           {description}
         </Typography>
@@ -66,7 +68,7 @@ export function ChatStarter({
             key={i}
             label={item.label}
             onClick={() => onSelect?.(item.label)}
-            color={item.color}
+            backgroundColor={item.backgroundColor}
           />
         ))}
       </Box>

package/src/chat/feedback/chat-tool-full-view-dialog.tsx

@@ -80,8 +80,10 @@ export function ChatToolFullViewDialog({
       open={open}
       onClose={onClose}
       sx={styles.fullViewDialog}
-      PaperProps={{ sx: styles.fullViewPaper }}
       fullScreen
+      slotProps={{
+        paper: { sx: styles.fullViewPaper },
+      }}
     >
       <DialogTitle sx={styles.fullViewTitle}>
         {title}

package/src/chat/feedback/chat-tool-group.test.tsx

@@ -48,7 +48,7 @@ describe('ChatToolGroup', () => {
   test('shows error count badge at group level when any tool has error', () => {
     render(<ChatToolGroup tools={tools} />)
     // New UI shows error count ("1") + error icon instead of "Error" text
-    expect(screen.getByTestId('ErrorOutlineIcon')).toBeTruthy()
+    expect(screen.getByTestId('ErrorOutlineOutlinedIcon')).toBeTruthy()
     expect(screen.getByText('1')).toBeTruthy()
   })
 

package/src/chat/feedback/chat-tool-group.tsx

@@ -1,10 +1,15 @@
 import { Box, Button, Collapse, Typography } from '@mui/material'
-import { ArrowRight, ChevronRight, ErrorOutline } from '@mui/icons-material'
+import {
+  ArrowRight,
+  ChevronRight,
+  ErrorOutlineOutlined,
+} from '@mui/icons-material'
 import type { ChatToolGroupProps } from '../types'
 import { ChatToolTrace, ChatToolTraceDetails } from './chat-tool-trace'
 import { styles } from './styles'
 import { getToolLabel } from './get-tool-label'
 import { useState } from 'react'
+import { mergeSx } from '../../components/lasso-tool/styles'
 
 function useController<T>(value: T, setter?: (value: T) => void) {
   const [_value, _setter] = useState<T>(value)
@@ -49,7 +54,15 @@ export function ChatToolGroup({
   }
 
   return (
-    <Box width='100%' sx={sx} className='PsChat--tool-group'>
+    <Box
+      className='PsChat--tool-group'
+      sx={mergeSx(
+        {
+          width: '100%',
+        },
+        sx,
+      )}
+    >
       <Button
         size='small'
         variant='text'
@@ -60,7 +73,13 @@ export function ChatToolGroup({
           pr: numErrors > 0 ? 0.5 : 0,
         }}
       >
-        <Typography variant='caption' fontWeight={600} color='text.secondary'>
+        <Typography
+          variant='caption'
+          sx={{
+            fontWeight: 600,
+            color: 'text.secondary',
+          }}
+        >
           {tools.length} {toolsUsedLabel}
         </Typography>
         <ArrowRight
@@ -72,7 +91,7 @@ export function ChatToolGroup({
         {numErrors > 0 && (
           <Typography variant='code3' sx={styles.errorBadge}>
             {numErrors}
-            <ErrorOutline sx={{ fontSize: 12 }} color='error' />
+            <ErrorOutlineOutlined sx={{ fontSize: 12 }} color='error' />
           </Typography>
         )}
       </Button>
@@ -108,15 +127,22 @@ export function ChatToolGroup({
                   sx={styles.groupHeader}
                 >
                   <Typography
-                    flexGrow={1}
-                    flexShrink={0}
                     variant='caption'
-                    color='text.secondary'
+                    sx={{
+                      flexGrow: 1,
+                      flexShrink: 0,
+                      color: 'text.secondary',
+                    }}
                   >
                     {getToolLabel(tool)}
                   </Typography>
                   {tool.status === 'error' && (
-                    <Typography variant='code3' color='error.main'>
+                    <Typography
+                      variant='code3'
+                      sx={{
+                        color: 'error.main',
+                      }}
+                    >
                       {errorLabel}
                     </Typography>
                   )}
@@ -128,7 +154,12 @@ export function ChatToolGroup({
                   />
                 </Button>
                 <Collapse in={isExpanded} unmountOnExit>
-                  <Box px={1.5} py={1}>
+                  <Box
+                    sx={{
+                      px: 1.5,
+                      py: 1,
+                    }}
+                  >
                     <ChatToolTraceDetails tool={tool} labels={labels} />
                   </Box>
                 </Collapse>

package/src/chat/feedback/chat-tool-trace.tsx

@@ -12,6 +12,7 @@ import { styles } from './styles'
 import { ChatThinking } from './chat-thinking'
 import { getToolLabel } from './get-tool-label'
 import { McpTool } from '@carto/meridian-ds/custom-icons'
+import { mergeSx } from '../../components/lasso-tool/styles'
 
 function TraceStatusIndicator({
   status,
@@ -62,15 +63,24 @@ export function ChatToolTraceDetails({
         <Box sx={styles.traceField}>
           <Typography
             variant='code3'
-            fontWeight={600}
-            color='text.secondary'
-            sx={styles.traceFieldLabel}
+            sx={[
+              {
+                fontWeight: 600,
+                color: 'text.secondary',
+              },
+              styles.traceFieldLabel,
+            ]}
           >
             {referenceLabel}
           </Typography>
           <Box sx={styles.traceReference}>
             <McpTool color='success' />
-            <Typography variant='code3' fontWeight={600}>
+            <Typography
+              variant='code3'
+              sx={{
+                fontWeight: 600,
+              }}
+            >
               {tool.reference}
             </Typography>
           </Box>
@@ -81,9 +91,13 @@ export function ChatToolTraceDetails({
         <Box sx={styles.traceField}>
           <Typography
             variant='code3'
-            fontWeight={600}
-            color='text.secondary'
-            sx={styles.traceFieldLabel}
+            sx={[
+              {
+                fontWeight: 600,
+                color: 'text.secondary',
+              },
+              styles.traceFieldLabel,
+            ]}
           >
             {durationLabel}
           </Typography>
@@ -94,9 +108,13 @@ export function ChatToolTraceDetails({
       <Box sx={styles.traceField}>
         <Typography
           variant='code3'
-          fontWeight={600}
-          color='text.secondary'
-          sx={styles.traceFieldLabel}
+          sx={[
+            {
+              fontWeight: 600,
+              color: 'text.secondary',
+            },
+            styles.traceFieldLabel,
+          ]}
         >
           {statusLabel}
         </Typography>
@@ -107,9 +125,13 @@ export function ChatToolTraceDetails({
         <Box>
           <Typography
             variant='code3'
-            fontWeight={600}
-            color='text.secondary'
-            sx={styles.traceField}
+            sx={[
+              {
+                fontWeight: 600,
+                color: 'text.secondary',
+              },
+              styles.traceField,
+            ]}
           >
             {inputArgumentsLabel}
           </Typography>
@@ -126,9 +148,13 @@ export function ChatToolTraceDetails({
         <Box>
           <Typography
             variant='code3'
-            fontWeight={600}
-            color='text.secondary'
-            sx={styles.traceField}
+            sx={[
+              {
+                fontWeight: 600,
+                color: 'text.secondary',
+              },
+              styles.traceField,
+            ]}
           >
             {outputLabel}
           </Typography>
@@ -160,10 +186,14 @@ export function ChatToolTrace({
 
   return (
     <Box
-      width='100%'
-      sx={sx}
       data-tool={tool.name}
       className={`PsChat--tool-trace`}
+      sx={mergeSx(
+        {
+          width: '100%',
+        },
+        sx,
+      )}
     >
       <Button
         size='small'
@@ -172,7 +202,13 @@ export function ChatToolTrace({
         aria-expanded={expanded}
         sx={styles.traceHeader}
       >
-        <Typography variant='caption' fontWeight={600} color='text.secondary'>
+        <Typography
+          variant='caption'
+          sx={{
+            fontWeight: 600,
+            color: 'text.secondary',
+          }}
+        >
           {toolExecutedLabel}
         </Typography>
         <ArrowRight

package/src/chat/types.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import type { ButtonBaseProps, SxProps, Theme } from '@mui/material'
+import type { PaletteColor } from '../components/types'
 
 // === Shared base props ===
 export interface ChatSxProps {
@@ -44,7 +45,8 @@ export interface ChatErrorMessageProps extends ChatSxProps {
 export interface ChatSuggestionButtonProps
   extends ChatSxProps, Omit<ButtonBaseProps, 'children'> {
   label: ReactNode
-  color?: string
+  /** Tint painted behind the suggestion. Theme path or CSS colour. */
+  backgroundColor?: PaletteColor
 }
 
 // === Feedback props ===
@@ -150,7 +152,8 @@ export interface ChatModelOption {
 // === Extras props ===
 export interface ChatStarterItem {
   label: string
-  color?: string
+  /** Tint painted behind the suggestion. Theme path or CSS colour. */
+  backgroundColor?: PaletteColor
 }
 
 export interface ChatStarterProps extends ChatSxProps {

package/src/components/basemaps/header.tsx

@@ -17,7 +17,12 @@ export function Header({
     <Box sx={styles.header}>
       {isMobile && (
         <>
-          <Typography variant='caption' flexGrow={1}>
+          <Typography
+            variant='caption'
+            sx={{
+              flexGrow: 1,
+            }}
+          >
             {labels.title}
           </Typography>
           <Tooltip title={labels.actions.close}>