@carto/ps-react-ui 4.3.8 → 4.3.10

package/src/components/list-data/list-data.tsx

@@ -12,8 +12,10 @@ const DEFAULT_LABELS = {
   showLess: 'Show Less',
 } as const
 
+const EMPTY_DATA: ListDataProps['data'] = []
+
 export function ListDataUI({
-  data = [],
+  data = EMPTY_DATA,
   isLoading = false,
   maxItems = 5,
   labels = DEFAULT_LABELS,
@@ -47,11 +49,11 @@ export function ListDataUI({
   return (
     <>
       <List id='expandable-list' role='list'>
-        {items.map((item, idx) => (
+        {items.map((item) => (
           <SmartTooltip<HTMLLIElement>
             // Default tooltip props
             followCursor={false}
-            key={`list-item-${idx}`}
+            key={item.id}
             placement='top'
             arrow
             title={item.tooltipTitle}

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

@@ -49,6 +49,10 @@ import type {
 } from '../types'
 import { Tooltip } from '../tooltip/tooltip'
 
+const EMPTY_PAPER_PROPS: NonNullable<
+  MeasurementToolsComponentProps['PaperProps']
+> = {}
+
 export function MeasurementToolsUI({
   enabled,
   actionProps,
@@ -57,7 +61,7 @@ export function MeasurementToolsUI({
   modesMapping = DEFAULT_MEASUREMENT_TOOLS_MODES_MAPPING,
   unitsMapping = DEFAULT_MEASUREMENT_TOOLS_UNITS_MAPPING,
   modeSelected,
-  PaperProps: { sx, ...PaperProps } = {},
+  PaperProps: { sx, ...PaperProps } = EMPTY_PAPER_PROPS,
   units,
   unitSelected,
   onActionToggle,

package/src/components/smart-tooltip/smart-tooltip.tsx

@@ -2,9 +2,11 @@ import type { TooltipProps } from '@mui/material'
 import { useLayoutEffect, useRef, useState, type JSX, type Ref } from 'react'
 import { Tooltip } from '../tooltip/tooltip'
 
+const EMPTY_DEPENDENCIES: unknown[] = []
+
 export function SmartTooltip<T extends HTMLElement>({
   title,
-  dependencies = [],
+  dependencies = EMPTY_DEPENDENCIES,
   timeout = 500,
   TooltipProps,
   children,

package/src/widgets/_shared/chart-config/option-builders.test.ts

@@ -6,8 +6,8 @@ describe('niceNum', () => {
     expect(niceNum(0)).toBe(0)
   })
 
-  it('should return 0 for negative values', () => {
-    expect(niceNum(-5)).toBe(0)
+  it('should return the same negative value for negative numbers', () => {
+    expect(niceNum(-5)).toBe(-5)
   })
 
   it('should round 547 to 600', () => {

package/src/widgets/_shared/chart-config/option-builders.ts

@@ -13,12 +13,14 @@ import type {
  * Rounds a value up to the nearest "nice" number.
  * A nice number is a multiple of 10^floor(log10(value)).
  *
- * Examples: 547 → 600, 200 → 200, 1200 → 2000, 18 → 20, 5 → 5
+ * Examples: 547 → 600, 200 → 200, 1200 → 2000, 18 → 20, 5 → 5, -547 → -500
  */
 export function niceNum(value: number): number {
-  if (value <= 0) return 0
-  const base = Math.pow(10, Math.floor(Math.log10(value)))
-  return Math.ceil(value / base) * base
+  if (value === 0) return 0
+  const absValue = Math.abs(value)
+  const base = Math.pow(10, Math.floor(Math.log10(absValue)))
+  const rounded = Math.ceil(absValue / base) * base
+  return value < 0 ? -rounded : rounded
 }
 
 /**

package/src/widgets/actions/download/download.test.tsx

@@ -271,8 +271,12 @@ describe('Download', () => {
     const parentClickHandler = vi.fn()
 
     render(
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-      <div onClick={parentClickHandler}>
+      <div
+        role='button'
+        tabIndex={0}
+        onClick={parentClickHandler}
+        onKeyDown={parentClickHandler}
+      >
         <Download id={widgetId} items={mockDownload} />
       </div>,
     )

package/src/widgets/actions/download/download.tsx

@@ -12,10 +12,12 @@ import { useState, type MouseEvent } from 'react'
 import { useWidgetStore } from '../../../widgets'
 import { useShallow } from 'zustand/shallow'
 
+const EMPTY_LABELS: NonNullable<DownloadProps['labels']> = {}
+
 export function Download({
   id,
   items,
-  labels = {},
+  labels = EMPTY_LABELS,
   Icon,
   IconButtonProps,
 }: DownloadProps) {

package/src/widgets/actions/fullscreen/fullscreen.tsx

@@ -15,13 +15,20 @@ import type {
 import { styles } from './styles'
 import { useShallow } from 'zustand/shallow'
 
+const EMPTY_DIALOG_CONTENT_PROPS: NonNullable<
+  FullScreenProps['DialogContentProps']
+> = {}
+
 export function FullScreen({
   id,
   labels,
   children,
   Icon,
   IconButtonProps,
-  DialogContentProps: { sx, ...DialogContentProps } = {},
+  DialogContentProps: {
+    sx,
+    ...DialogContentProps
+  } = EMPTY_DIALOG_CONTENT_PROPS,
   DialogProps,
 }: FullScreenProps) {
   const isFullScreen = useWidgetStore(

package/src/widgets/actions/relative-data/relative-data.tsx

@@ -73,13 +73,9 @@ export function RelativeData({
     return () => unregisterTool(id, RELATIVE_DATA_TOOL_ID)
   }, [id, order, registerTool, unregisterTool, isRelative])
 
-  // Update enabled flag when toggle changes
-  useEffect(() => {
-    setToolEnabled(id, RELATIVE_DATA_TOOL_ID, isRelative)
-  }, [id, isRelative, setToolEnabled])
-
   const handleToggle = useCallback(() => {
     const newIsRelative = !isRelative
+    setToolEnabled(id, RELATIVE_DATA_TOOL_ID, newIsRelative)
     let max = previousMaxValue.current
 
     if (newIsRelative) {
@@ -110,7 +106,7 @@ export function RelativeData({
           }
         : originalFormatter.current,
     })
-  }, [isRelative, setWidget, id, getWidget])
+  }, [isRelative, setWidget, id, getWidget, setToolEnabled])
 
   const tooltipLabel = isRelative
     ? (labels?.absolute ?? 'Show absolute values')

package/src/widgets/actions/searcher/searcher.tsx

@@ -53,7 +53,6 @@ export function Searcher({
   const setWidget = useWidgetStore((state) => state.setWidget)
   const registerTool = useWidgetStore((state) => state.registerTool)
   const unregisterTool = useWidgetStore((state) => state.unregisterTool)
-  const setToolEnabled = useWidgetStore((state) => state.setToolEnabled)
   const updateToolConfig = useWidgetStore((state) => state.updateToolConfig)
 
   const setSearchText = useCallback(
@@ -85,11 +84,6 @@ export function Searcher({
     return () => unregisterTool(id, SEARCHER_TOOL_ID)
   }, [id, order, filter, registerTool, unregisterTool, enabled, searchText])
 
-  // Update enabled flag when it changes
-  useEffect(() => {
-    setToolEnabled(id, SEARCHER_TOOL_ID, enabled)
-  }, [id, enabled, setToolEnabled])
-
   // Update config when search text changes (debounced)
   const debouncedUpdateConfig = useCallback(
     (text: string) => {

package/src/widgets/bar/config.ts

@@ -47,6 +47,7 @@ function getOption({
 }: BarConfig): EchartOptionsProps {
   const hasLegend = (data?.length ?? 0) > 1
 
+  let niceMin = 0
   let niceMax = 1
 
   return {
@@ -67,23 +68,26 @@ function getOption({
     },
     yAxis: {
       type: 'value' as const,
-      min: 0,
+      min: (extent: { min: number }) => {
+        niceMin = extent.min < 0 ? niceNum(extent.min) : 0
+        return niceMin
+      },
       max: (extent: { min: number; max: number }) => {
         niceMax = extent.max <= 0 ? 1 : niceNum(extent.max)
         return niceMax
       },
-      splitNumber: 1,
       axisLabel: {
         fontSize: theme.typography.overlineDelicate.fontSize,
         fontFamily: theme.typography.overlineDelicate.fontFamily,
         margin: parseInt(theme.spacing(1)),
         show: true,
         showMaxLabel: true,
-        showMinLabel: false,
+        showMinLabel: true,
         verticalAlign: 'bottom' as const,
         inside: true,
         formatter: (value: number) => {
-          if (value !== niceMax) return ''
+          if (value !== niceMax && value !== niceMin) return ''
+          if (value === 0) return ''
           return formatter ? formatter(value) : String(value)
         },
       },

package/src/widgets/bar/skeleton.tsx

@@ -43,7 +43,7 @@ export function BarSkeleton() {
           .fill(0)
           .map((_, i) => (
             <Box
-              key={i}
+              key={`skeleton-${i}`}
               sx={{
                 display: 'flex',
                 alignItems: 'center',

package/src/widgets/category/components/category-row-multi.tsx

@@ -30,7 +30,7 @@ export function CategoryRowMulti({
       <Typography sx={styles.rowLabel}>{name}</Typography>
       <Box sx={styles.barContainer}>
         {values.map((value, index) => (
-          <Box key={`${name}-${value}-${index}`} sx={styles.multiBarRow}>
+          <Box key={`${name}-${value}`} sx={styles.multiBarRow}>
             <Box sx={styles.multiBarContainer}>
               <CategoryBar
                 value={value}

package/src/widgets/category/config.ts

@@ -4,22 +4,12 @@ import type {
   CategoryWidgetConfig,
   CategoryWidgetData,
   CategorySeriesConfig,
-  CategoryLabels,
 } from './types'
 
-export interface CategoryDownloadConfigProps extends ConfigProps {
+interface CategoryDownloadConfigProps extends ConfigProps {
   series?: CategorySeriesConfig[]
 }
 
-export interface CategoryConfigProps {
-  data?: CategoryWidgetData
-  series?: CategorySeriesConfig[]
-  formatter?: (value: number) => string
-  maxItems?: number
-  labels?: CategoryLabels
-  max?: number
-}
-
 export function categoryDownloadConfig({
   refUI,
   series,

package/src/widgets/formula/components/row.tsx

@@ -11,7 +11,7 @@ export function Row(props: RowProps) {
 
   return data?.map((_, index) => {
     return (
-      <Box sx={styles.row} key={index}>
+      <Box sx={styles.row} key={`row-${index}`}>
         {typeof props.children === 'function'
           ? props.children({ index })
           : props.children}

package/src/widgets/histogram/config.ts

@@ -49,6 +49,7 @@ function getOption({
 }: HistogramConfig): EchartOptionsProps {
   const hasLegend = (data?.length ?? 0) > 1
 
+  let niceMin = 0
   let niceMax = 1
 
   return {
@@ -86,7 +87,10 @@ function getOption({
     },
     yAxis: {
       type: 'value' as const,
-      min: 0,
+      min: (extent: { min: number }) => {
+        niceMin = extent.min < 0 ? niceNum(extent.min) : 0
+        return niceMin
+      },
       max: (extent: { min: number; max: number }) => {
         niceMax = extent.max <= 0 ? 1 : niceNum(extent.max)
         return niceMax
@@ -101,7 +105,8 @@ function getOption({
         showMinLabel: true,
         verticalAlign: 'bottom' as const,
         formatter: (value: number) => {
-          if (value !== niceMax) return ''
+          if (value !== niceMax && value !== niceMin) return ''
+          if (value === 0) return ''
           return formatter ? formatter(value) : String(value)
         },
       },

package/src/widgets/histogram/skeleton.tsx

@@ -22,7 +22,7 @@ export function HistogramSkeleton() {
             const height = `${heights[i]}%`
             return (
               <Skeleton
-                key={i}
+                key={`skeleton-bar-${i}`}
                 variant='rectangular'
                 sx={{
                   flex: 1,
@@ -44,7 +44,7 @@ export function HistogramSkeleton() {
         {Array(4)
           .fill(0)
           .map((_, i) => (
-            <Skeleton key={i} width={32} height={8} />
+            <Skeleton key={`skeleton-label-${i}`} width={32} height={8} />
           ))}
       </Box>
     </Box>

package/src/widgets/pie/skeleton.tsx

@@ -53,7 +53,7 @@ export function PieSkeleton() {
           .fill(0)
           .map((_, i) => (
             <Box
-              key={i}
+              key={`skeleton-${i}`}
               sx={{
                 display: 'flex',
                 alignItems: 'center',

package/src/widgets/range/config.ts

@@ -1,10 +1,5 @@
 import type { RangeWidgetConfig } from './types'
 
-export interface RangeConfigProps {
-  formatter?: (value: number) => string
-  onChange?: (value: number[], index: number) => void
-}
-
 export function rangeConfig(): RangeWidgetConfig {
   return {}
 }

package/src/widgets/scatterplot/skeleton.tsx

@@ -24,7 +24,7 @@ export function ScatterplotSkeleton() {
     <Box sx={styles.skeleton.graph.container}>
       {SCATTER_POINTS.map((point, index) => (
         <Skeleton
-          key={index}
+          key={`skeleton-point-${index}`}
           variant='circular'
           width={12}
           height={12}
@@ -42,7 +42,7 @@ export function ScatterplotSkeleton() {
           .fill(0)
           .map((_, i) => (
             <Box
-              key={i}
+              key={`skeleton-${i}`}
               sx={{
                 display: 'flex',
                 alignItems: 'center',

package/src/widgets/spread/config.ts

@@ -1,12 +1,6 @@
 import { downloadToCSV, downloadToPNG, type DownloadItem } from '../actions'
 import type { ConfigProps } from '../loader/types'
 import type { SpreadWidgetConfig, SpreadWidgetData } from './types'
-import type { SeriesConfig } from '../formula/types'
-
-export interface SpreadConfigProps {
-  formatter?: (value: number) => string
-  series?: SeriesConfig[]
-}
 
 export function spreadDownloadConfig({
   refUI,

package/src/widgets/table/components/cell.tsx

@@ -1,6 +1,6 @@
 import { TableCell as MuiTableCell, Link, Typography } from '@mui/material'
 import ReactMarkdown, { type Components } from 'react-markdown'
-import type { TableColumn } from '../types'
+import type { TableColumn, TableRow } from '../types'
 import { getCellValue } from '../helpers'
 import type { ReactNode } from 'react'
 
@@ -10,6 +10,8 @@ import type { ReactNode } from 'react'
 export interface CellProps {
   /** Column definition */
   column: TableColumn
+  /** Full table row for context */
+  row: TableRow
   /** Cell value */
   value: unknown
 }
@@ -54,12 +56,12 @@ const CELL_MARKDOWN_COMPONENTS: Components = {
  * Markdown is rendered when the raw value is a string and no formatter is defined.
  * If a formatter is used, its output is rendered directly without markdown parsing.
  */
-export function Cell({ column, value }: CellProps) {
+export function Cell({ column, row, value }: CellProps) {
   // If formatter is defined, use it directly without markdown
   if (column.formatter) {
     return (
       <MuiTableCell align={column.align}>
-        {column.formatter(value)}
+        {column.formatter(value, row)}
       </MuiTableCell>
     )
   }

package/src/widgets/table/components/row.tsx

@@ -53,7 +53,12 @@ export function Row({
         </TableCell>
       )}
       {columns.map((column) => (
-        <Cell key={column.id} column={column} value={row[column.id]} />
+        <Cell
+          key={column.id}
+          row={row}
+          column={column}
+          value={row[column.id]}
+        />
       ))}
     </MuiTableRow>
   )

package/src/widgets/table/config.ts

@@ -8,7 +8,7 @@ import type {
   SortDirection,
 } from './types'
 
-export const DEFAULT_MODE: Mode = 'local'
+const DEFAULT_MODE: Mode = 'local'
 export const DEFAULT_PAGE = 0
 export const DEFAULT_ROWS_PER_PAGE = 10
 export const DEFAULT_ROWS_PER_PAGE_OPTIONS = [5, 10, 25, 50]

package/src/widgets/table/table-ui.tsx

@@ -18,7 +18,7 @@ import type { TableUIProps } from './types'
 /**
  * Props for the base Table component
  */
-export interface TableComponentProps extends MuiTableProps {
+interface TableComponentProps extends MuiTableProps {
   /** Table element ref */
   ref?: Ref<HTMLTableElement>
 }

package/src/widgets/table/types.ts

@@ -27,7 +27,7 @@ export interface TableColumn {
   /** Enable sorting for this column */
   sortable?: boolean
   /** Custom cell value formatter */
-  formatter?: (value: unknown) => ReactNode
+  formatter?: (value: unknown, row: TableRow) => ReactNode
 }
 
 /**

package/src/widgets/timeseries/skeleton.tsx

@@ -38,7 +38,7 @@ export function TimeseriesSkeleton() {
           .fill(0)
           .map((_, i) => (
             <Box
-              key={i}
+              key={`skeleton-${i}`}
               sx={{
                 display: 'flex',
                 alignItems: 'center',

package/src/widgets/wrapper/components/actions.test.tsx

@@ -42,8 +42,12 @@ describe('Actions', () => {
     ]
 
     render(
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-      <div onClick={parentOnClick}>
+      <div
+        role='button'
+        tabIndex={0}
+        onClick={parentOnClick}
+        onKeyDown={parentOnClick}
+      >
         <Actions actions={actions} />
       </div>,
     )

package/src/widgets/wrapper/components/actions.tsx

@@ -2,7 +2,9 @@ import { Box } from '@mui/material'
 import type { WrapperActionsProps } from '../types'
 import { styles } from '../styles'
 
-export function Actions({ actions = [] }: WrapperActionsProps) {
+const EMPTY_ACTIONS: NonNullable<WrapperActionsProps['actions']> = []
+
+export function Actions({ actions = EMPTY_ACTIONS }: WrapperActionsProps) {
   return (
     <Box sx={styles.actions} className='widget-wrapper-actions'>
       {actions.map((action, index) => {

package/src/widgets/wrapper/components/options.test.tsx

@@ -88,8 +88,12 @@ describe('Options', () => {
     ]
 
     render(
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-      <div onClick={parentOnClick}>
+      <div
+        role='button'
+        tabIndex={0}
+        onClick={parentOnClick}
+        onKeyDown={parentOnClick}
+      >
         <Options options={options} />
       </div>,
     )
@@ -112,8 +116,12 @@ describe('Options', () => {
     ]
 
     render(
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-      <div onClick={parentOnClick}>
+      <div
+        role='button'
+        tabIndex={0}
+        onClick={parentOnClick}
+        onKeyDown={parentOnClick}
+      >
         <Options options={options} />
       </div>,
     )

package/src/widgets/wrapper/components/options.tsx

@@ -10,7 +10,12 @@ import type { WrapperOptionsProps } from '../types'
 import { useState } from 'react'
 import { styles } from '../styles'
 
-export function Options({ labels, options = [] }: WrapperOptionsProps) {
+const EMPTY_OPTIONS: NonNullable<WrapperOptionsProps['options']> = []
+
+export function Options({
+  labels,
+  options = EMPTY_OPTIONS,
+}: WrapperOptionsProps) {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
 
   const handleOptionAction = (
@@ -57,9 +62,9 @@ export function Options({ labels, options = [] }: WrapperOptionsProps) {
           },
         }}
       >
-        {options.map((option, idx) => (
+        {options.map((option) => (
           <MenuItem
-            key={`${option.label}-${idx}`}
+            key={option.label}
             disabled={option.disabled}
             onClick={(e) => handleOptionAction(e, option)}
           >

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

@@ -12,13 +12,16 @@ import { Actions } from './components/actions'
 import { useWidgetStore } from '../stores/widget-store'
 import { useShallow } from 'zustand/shallow'
 
+const EMPTY_ACTIONS: NonNullable<WrapperUIProps['actions']> = []
+const EMPTY_OPTIONS: NonNullable<WrapperUIProps['options']> = []
+
 export function WrapperUI({
   children,
   id,
-  actions = [],
+  actions = EMPTY_ACTIONS,
   sx,
   labels,
-  options = [],
+  options = EMPTY_OPTIONS,
   onChangeCollapsed,
 }: WrapperUIProps) {
   const title = useWidgetStore(

package/src/widgets/wrapper/wrapper.tsx

@@ -1,7 +1,7 @@
 import type { WrapperProps, WrapperState } from './types'
 import { WrapperUI } from './wrapper-ui'
 import { useWidgetStore } from '../stores/widget-store'
-import { useEffect } from 'react'
+import { useLayoutEffect } from 'react'
 
 export function WidgetWrapper({
   id,
@@ -17,9 +17,7 @@ export function WidgetWrapper({
 }: WrapperProps) {
   const setWidget = useWidgetStore((state) => state.setWidget)
 
-  // Consolidated effect: batch all wrapper state updates into a single store update
-  // This prevents 3 separate re-render cycles on mount and prop changes
-  useEffect(() => {
+  useLayoutEffect(() => {
     setWidget<WrapperState>(id, {
       collapsed: defaultCollapsed,
       disabled,