@carto/ps-react-ui 4.3.3 → 4.3.5

package/dist/widgets/wrapper.js

@@ -3,7 +3,7 @@ import { c as _ } from "react/compiler-runtime";
 import { Box as O, IconButton as L, MenuItem as P, ListItemIcon as j, ListItemText as z, Menu as D, Typography as H, LinearProgress as N, AccordionSummary as G, AccordionDetails as U, Accordion as V } from "@mui/material";
 import { MoreVert as q } from "@mui/icons-material";
 import { useState as J, useEffect as K } from "react";
-import "../lasso-tool-BwRzEW7k.js";
+import "../lasso-tool-wFqOD6wk.js";
 import "../cjs-D4KH3azB.js";
 import { S as Q } from "../smart-tooltip-BEtBaIdz.js";
 import { u as T } from "../widget-store-CB6Trp_0.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "4.3.3",
+  "version": "4.3.5",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {
@@ -15,6 +15,7 @@
     "html2canvas": "1.4.1",
     "react-markdown": "10.1.0",
     "zustand": "5.0.11",
+    "@carto/ps-common-types": "1.0.0",
     "@carto/ps-utils": "2.0.1"
   },
   "peerDependencies": {
@@ -134,10 +135,14 @@
     }
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "files": [
+      "dist"
+    ]
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "keywords": [
     "carto",

package/src/components/basemaps/basemaps.test.tsx

@@ -0,0 +1,196 @@
+import { describe, test, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { BasemapsUI } from './basemaps'
+import type { BasemapOption } from './types'
+
+// Mock the child components
+vi.mock('./header', () => ({
+  Header: ({ onChangeCollapsed }: { onChangeCollapsed: () => void }) => (
+    <div data-testid='mock-header'>
+      <button data-testid='close-button' onClick={onChangeCollapsed}>
+        Close
+      </button>
+    </div>
+  ),
+}))
+
+vi.mock('./group', () => ({
+  Group: ({
+    values,
+    selected,
+    onChange,
+  }: {
+    values: BasemapOption[]
+    selected: string | null
+    onChange: (id: string) => void
+  }) => (
+    <div data-testid='mock-group'>
+      {values.map((option) => (
+        <button
+          key={option.id}
+          data-testid={`basemap-option-${option.id}`}
+          data-selected={option.id === selected}
+          onClick={() => onChange(option.id)}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  ),
+}))
+
+vi.mock('./group-wrapper', () => ({
+  GroupWrapper: ({
+    title,
+    children,
+  }: {
+    title: string
+    children: React.ReactNode
+  }) => (
+    <div data-testid='mock-group-wrapper' data-title={title}>
+      {children}
+    </div>
+  ),
+}))
+
+vi.mock('../responsive-drawer/responsive-drawer', () => ({
+  ResponsiveDrawer: ({
+    children,
+    collapsed,
+  }: {
+    children: React.ReactNode
+    collapsed: boolean
+  }) => (
+    <div data-testid='mock-drawer' data-collapsed={collapsed}>
+      {children}
+    </div>
+  ),
+}))
+
+describe('BasemapsUI', () => {
+  const mockOptions: BasemapOption[] = [
+    { id: 'basemap1', label: 'Basemap 1', icon: 'icon1.png', group: 'Group 1' },
+    { id: 'basemap2', label: 'Basemap 2', icon: 'icon2.png', group: 'Group 1' },
+    { id: 'basemap3', label: 'Basemap 3', icon: 'icon3.png', group: 'Group 2' },
+  ]
+
+  const mockOnChange = vi.fn()
+
+  beforeEach(() => {
+    mockOnChange.mockReset()
+  })
+
+  test('should render with toggle button initially', () => {
+    render(
+      <BasemapsUI
+        options={mockOptions}
+        selected='basemap1'
+        onChange={mockOnChange}
+      />,
+    )
+
+    // Drawer should be collapsed initially
+    const drawer = screen.getByTestId('mock-drawer')
+    expect(drawer.getAttribute('data-collapsed')).toBe('true')
+
+    // Toggle button should be visible
+    expect(screen.getAllByRole('button')[0]).toBeDefined()
+  })
+
+  test('should show drawer when toggle button is clicked', () => {
+    render(
+      <BasemapsUI
+        options={mockOptions}
+        selected='basemap1'
+        onChange={mockOnChange}
+      />,
+    )
+
+    // Click toggle button
+    const toggleButton = screen.getAllByRole('button')[0]!
+    fireEvent.click(toggleButton)
+
+    // Drawer should not be collapsed after toggle
+    const drawer = screen.getByTestId('mock-drawer')
+    expect(drawer.getAttribute('data-collapsed')).toBe('false')
+  })
+
+  test('should pass correct props to Group component', () => {
+    render(
+      <BasemapsUI
+        options={mockOptions}
+        selected='basemap1'
+        onChange={mockOnChange}
+      />,
+    )
+
+    // Click toggle button to show drawer
+    const toggleButton = screen.getAllByRole('button')[0]!
+    fireEvent.click(toggleButton)
+
+    // Group wrappers should be rendered with correct titles
+    const groupWrappers = screen.getAllByTestId('mock-group-wrapper')
+    expect(groupWrappers.length).toBe(2) // Two groups
+    expect(groupWrappers[0]?.getAttribute('data-title')).toContain('Group 1')
+    expect(groupWrappers[1]?.getAttribute('data-title')).toContain('Group 2')
+
+    // Check basemap options are rendered
+    expect(screen.getByTestId('basemap-option-basemap1')).toBeDefined()
+    expect(screen.getByTestId('basemap-option-basemap2')).toBeDefined()
+    expect(screen.getByTestId('basemap-option-basemap3')).toBeDefined()
+  })
+
+  test('should call onChange when a basemap is selected', () => {
+    render(
+      <BasemapsUI
+        options={mockOptions}
+        selected='basemap1'
+        onChange={mockOnChange}
+      />,
+    )
+
+    // Click toggle button to show drawer
+    const toggleButton = screen.getAllByRole('button')[0]!
+    fireEvent.click(toggleButton)
+
+    // Click a basemap option
+    const basemapOption = screen.getByTestId('basemap-option-basemap2')
+    fireEvent.click(basemapOption)
+
+    // onChange should be called with correct ID
+    expect(mockOnChange).toHaveBeenCalledWith('basemap2')
+  })
+
+  test('should handle small devices correctly using media query', () => {
+    // Mock matchMedia for small devices
+    window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+      matches: query.includes('max-width'),
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }))
+
+    render(
+      <BasemapsUI
+        options={mockOptions}
+        selected='basemap1'
+        onChange={mockOnChange}
+        position='bottom-right'
+      />,
+    )
+
+    // Check if drawer behavior is appropriate for small devices
+    const drawer = screen.getByTestId('mock-drawer')
+
+    // Toggle button should still be visible on small devices
+    const toggleButton = screen.getAllByRole('button')[0]
+    expect(toggleButton).toBeDefined()
+
+    // Drawer should be collapsed initially even on small devices
+    expect(drawer.getAttribute('data-collapsed')).toBe('true')
+  })
+})

package/src/components/basemaps/basemaps.tsx

@@ -0,0 +1,128 @@
+import { IconButton, Paper, useMediaQuery, useTheme } from '@mui/material'
+import type { BasemapsUIProps } from './types'
+import { useEffect, useRef, useState, type JSX } from 'react'
+import { styles } from './styles'
+import deepmerge from 'deepmerge'
+import { DEFAULT_BASEMAPS_LABELS } from './const'
+import { Header } from './header'
+import { GroupWrapper } from './group-wrapper'
+import { Group } from './group'
+import { ResponsiveDrawer } from '../responsive-drawer/responsive-drawer'
+import { Tooltip } from '../tooltip/tooltip'
+
+export function BasemapsUI({
+  options = [],
+  labels: _labels,
+  position = 'bottom-right',
+  selected = null,
+  onChange,
+  TooltipProps,
+}: BasemapsUIProps): JSX.Element {
+  const [toggleRef, setToggleRef] = useState<HTMLButtonElement | null>(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const [timer, setTimer] = useState<number | null>(null)
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+  const labels = deepmerge(DEFAULT_BASEMAPS_LABELS, _labels ?? {})
+
+  const optionSelected = options.find((option) => option.id === selected)
+
+  const groups = Object.groupBy(options, (option) => option.group ?? 'default')
+
+  const groupCount = Object.keys(groups).length
+
+  const handleClose = () => {
+    setToggleRef(null)
+    setIsOpen(false)
+  }
+
+  useEffect(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+
+    if (!timer) {
+      return
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      handleClose()
+      return
+    }, timer)
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [timer])
+
+  const handleMouseOver = () => {
+    setTimer(null)
+  }
+  const handleMouseLeave = () => {
+    setTimer(400)
+  }
+
+  return (
+    <Paper>
+      <Tooltip title={labels.toggle.title} placement='right' {...TooltipProps}>
+        <IconButton
+          sx={styles.toggle}
+          onClick={(e) => {
+            setToggleRef(e.currentTarget as HTMLButtonElement)
+            setIsOpen(true)
+          }}
+        >
+          <img
+            src={optionSelected?.icon}
+            alt={optionSelected?.label ?? 'Basemap'}
+          />
+        </IconButton>
+      </Tooltip>
+
+      <ResponsiveDrawer
+        ref={toggleRef}
+        slotProps={{
+          paper: {
+            sx: {
+              ...styles.root,
+              transform: `translate3d(${position.endsWith('right') ? '-8px' : '8px'}, ${
+                position.startsWith('bottom') ? '-4px' : '4px'
+              }, 0) !important`,
+            },
+            onMouseOver: handleMouseOver,
+            onMouseLeave: handleMouseLeave,
+          },
+        }}
+        collapsed={!isOpen}
+        position={position}
+        isMobile={isMobile}
+        onChangeCollapsed={() => handleClose()}
+      >
+        <Header
+          isMobile={isMobile}
+          labels={labels.header}
+          onChangeCollapsed={() => handleClose()}
+        />
+        {Object.entries(groups).map(([group, values]) => (
+          <GroupWrapper
+            key={group}
+            title={group + ' ' + labels.header.title}
+            collapsed={groupCount < 2}
+          >
+            <Group
+              values={values!}
+              selected={selected}
+              onChange={(e) => {
+                handleClose()
+                onChange(e)
+              }}
+            />
+          </GroupWrapper>
+        ))}
+      </ResponsiveDrawer>
+    </Paper>
+  )
+}

package/src/components/basemaps/const.ts

@@ -0,0 +1,13 @@
+import type { BasemapsUILabels } from './types'
+
+export const DEFAULT_BASEMAPS_LABELS: BasemapsUILabels = {
+  toggle: {
+    title: 'Toggle basemaps controls',
+  },
+  header: {
+    title: 'Basemaps',
+    actions: {
+      close: 'Close',
+    },
+  },
+}

package/src/components/basemaps/group-wrapper.test.tsx

@@ -0,0 +1,38 @@
+import { describe, test, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { GroupWrapper } from './group-wrapper'
+
+describe('GroupWrapper', () => {
+  const mockTitle = 'Group Title'
+  const mockChildContent = 'Child Content'
+  const mockChild = <div>{mockChildContent}</div>
+
+  test('should render title and children when not collapsed', () => {
+    render(
+      <GroupWrapper title={mockTitle} collapsed={false}>
+        {mockChild}
+      </GroupWrapper>,
+    )
+
+    expect(screen.getByText(mockTitle)).toBeDefined()
+    expect(screen.getByText(mockChildContent)).toBeDefined()
+  })
+
+  test('should only render children when collapsed', () => {
+    render(
+      <GroupWrapper title={mockTitle} collapsed={true}>
+        {mockChild}
+      </GroupWrapper>,
+    )
+
+    expect(screen.queryByText(mockTitle)).toBeNull()
+    expect(screen.getByText(mockChildContent)).toBeDefined()
+  })
+
+  test('should default to not collapsed when collapsed prop is not provided', () => {
+    render(<GroupWrapper title={mockTitle}>{mockChild}</GroupWrapper>)
+
+    expect(screen.getByText(mockTitle)).toBeDefined()
+    expect(screen.getByText(mockChildContent)).toBeDefined()
+  })
+})

package/src/components/basemaps/group-wrapper.tsx

@@ -0,0 +1,28 @@
+import { Typography } from '@mui/material'
+import type { ReactNode } from 'react'
+import { styles } from './styles'
+
+export function GroupWrapper({
+  title,
+  children,
+  collapsed = false,
+}: {
+  title: string
+  children: ReactNode
+  collapsed?: boolean
+}) {
+  if (collapsed) return children
+
+  return (
+    <>
+      <Typography
+        variant='caption'
+        color='textSecondary'
+        sx={styles.groupWrapper.content}
+      >
+        {title}
+      </Typography>
+      {children}
+    </>
+  )
+}

package/src/components/basemaps/group.test.tsx

@@ -0,0 +1,52 @@
+import { describe, test, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Group } from './group'
+
+describe('Group', () => {
+  const mockOptions = [
+    { id: 'basemap1', label: 'Basemap 1', icon: 'icon1.png' },
+    { id: 'basemap2', label: 'Basemap 2', icon: 'icon2.png' },
+  ]
+
+  const mockOnChange = vi.fn()
+
+  test('should render all provided basemap options', () => {
+    render(
+      <Group values={mockOptions} selected={null} onChange={mockOnChange} />,
+    )
+
+    mockOptions.forEach((option) => {
+      expect(screen.getByText(option.label)).toBeDefined()
+      expect(screen.getByLabelText(option.label)).toBeDefined() // Button has aria-label equal to option.label
+      expect(screen.getByLabelText(option.label + ' icon')).toBeDefined() // Image has aria-label equal to option.label + ' icon'
+    })
+  })
+
+  test('should mark selected option correctly', () => {
+    render(
+      <Group
+        values={mockOptions}
+        selected='basemap1'
+        onChange={mockOnChange}
+      />,
+    )
+
+    const selectedImg = screen.getByLabelText('Basemap 1 icon') // The img element
+    expect(selectedImg.getAttribute('data-active')).toBe('true')
+
+    const nonSelectedImg = screen.getByLabelText('Basemap 2 icon') // The img element
+    expect(nonSelectedImg.getAttribute('data-active')).toBe('false')
+  })
+
+  test('should call onChange with correct ID when an option is clicked', () => {
+    render(
+      <Group values={mockOptions} selected={null} onChange={mockOnChange} />,
+    )
+
+    const button = screen.getByLabelText('Basemap 2')
+    fireEvent.click(button)
+
+    expect(mockOnChange).toHaveBeenCalledTimes(1)
+    expect(mockOnChange).toHaveBeenCalledWith('basemap2')
+  })
+})

package/src/components/basemaps/group.tsx

@@ -0,0 +1,42 @@
+import { Box, Typography } from '@mui/material'
+import { styles } from './styles'
+import type { BasemapOption } from './types'
+
+export function Group({
+  values,
+  selected,
+  onChange,
+}: {
+  values: Omit<BasemapOption, 'group'>[]
+  selected: string | null | undefined
+  onChange: (id: string) => void
+}) {
+  return (
+    <Box sx={styles.group}>
+      {values.map((option) => {
+        const isSelected = option.id === selected
+        return (
+          <Box
+            key={option.id}
+            sx={styles.item.container}
+            component='button'
+            aria-label={option.label}
+            onClick={() => onChange(option.id)}
+          >
+            <img
+              src={option.icon}
+              aria-label={option.label + ' icon'}
+              data-active={isSelected}
+            />
+            <Typography
+              variant='caption'
+              sx={{ ...(isSelected && styles.item.selected) }}
+            >
+              {option.label}
+            </Typography>
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}

package/src/components/basemaps/header.test.tsx

@@ -0,0 +1,54 @@
+import { describe, test, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Header } from './header'
+
+describe('Header', () => {
+  const mockLabels = {
+    title: 'Basemap Selection',
+    actions: {
+      close: 'Close Panel',
+    },
+  }
+
+  const mockOnChangeCollapsed = vi.fn()
+
+  test('should not render title and close button when not mobile', () => {
+    render(
+      <Header
+        isMobile={false}
+        labels={mockLabels}
+        onChangeCollapsed={mockOnChangeCollapsed}
+      />,
+    )
+
+    expect(screen.queryByText(mockLabels.title)).toBeNull()
+    expect(screen.queryByLabelText(mockLabels.actions.close)).toBeNull()
+  })
+
+  test('should render title and close button when mobile', () => {
+    render(
+      <Header
+        isMobile={true}
+        labels={mockLabels}
+        onChangeCollapsed={mockOnChangeCollapsed}
+      />,
+    )
+
+    expect(screen.getByText(mockLabels.title)).toBeDefined()
+    expect(screen.getByLabelText(mockLabels.actions.close)).toBeDefined()
+  })
+
+  test('should call onChangeCollapsed when close button is clicked', () => {
+    render(
+      <Header
+        isMobile={true}
+        labels={mockLabels}
+        onChangeCollapsed={mockOnChangeCollapsed}
+      />,
+    )
+
+    const closeButton = screen.getByLabelText(mockLabels.actions.close)
+    fireEvent.click(closeButton)
+    expect(mockOnChangeCollapsed).toHaveBeenCalledTimes(1)
+  })
+})

package/src/components/basemaps/header.tsx

@@ -0,0 +1,36 @@
+import { Close } from '@mui/icons-material'
+import { Box, Typography, IconButton } from '@mui/material'
+import { styles } from './styles'
+import type { BasemapsUILabels } from './types'
+import { Tooltip } from '../tooltip/tooltip'
+
+export function Header({
+  isMobile = false,
+  labels,
+  onChangeCollapsed,
+}: {
+  labels: BasemapsUILabels['header']
+  isMobile?: boolean
+  onChangeCollapsed: () => void
+}) {
+  return (
+    <Box sx={styles.header}>
+      {isMobile && (
+        <>
+          <Typography variant='caption' flexGrow={1}>
+            {labels.title}
+          </Typography>
+          <Tooltip title={labels.actions.close}>
+            <IconButton
+              size='small'
+              onClick={onChangeCollapsed}
+              aria-label={labels.actions.close}
+            >
+              <Close />
+            </IconButton>
+          </Tooltip>
+        </>
+      )}
+    </Box>
+  )
+}