@carto/ps-react-ui 5.0.0-widgets.9 → 5.0.0

package/src/components/geolocation-controls/geolocation-controls.test.tsx

@@ -0,0 +1,148 @@
+import { describe, expect, test, vi, beforeEach } from 'vitest'
+import { render, within, fireEvent } from '@testing-library/react'
+import { GeolocationControls } from './geolocation-controls'
+
+describe('GeolocationControls', () => {
+  const mockOnChange = vi.fn()
+  const mockOnError = vi.fn()
+
+  const mockGeolocation = {
+    getCurrentPosition: vi.fn(),
+    watchPosition: vi.fn(),
+    clearWatch: vi.fn(),
+  }
+
+  const mockPermissions = {
+    query: vi.fn(),
+    state: 'granted' as const,
+    onchange: null as (() => void) | null,
+  }
+
+  const mockNavigator = {
+    geolocation: mockGeolocation,
+    permissions: mockPermissions,
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Mock navigator
+    Object.defineProperty(global, 'navigator', {
+      value: mockNavigator,
+      writable: true,
+    })
+  })
+
+  test('renders correctly with geolocation enabled', () => {
+    mockPermissions.query.mockResolvedValue(mockPermissions)
+    const { container } = render(
+      <GeolocationControls onChange={mockOnChange} onError={mockOnError} />,
+    )
+
+    const button = within(container).getByRole('button')
+    const buttonElement = button as unknown as HTMLButtonElement
+    expect(buttonElement.disabled).toBe(false)
+  })
+
+  test('handles geolocation permission denied', () => {
+    mockPermissions.query.mockResolvedValue({
+      ...mockPermissions,
+      state: 'denied',
+    })
+    const { container } = render(
+      <GeolocationControls onChange={mockOnChange} onError={mockOnError} />,
+    )
+
+    const button = within(container).getByRole('button')
+    const buttonElement = button as unknown as HTMLButtonElement
+    expect(buttonElement.disabled).toBe(false)
+  })
+
+  test('calls getCurrentPosition when clicked', () => {
+    mockPermissions.query.mockResolvedValue(mockPermissions)
+
+    const mockPosition = {
+      coords: {
+        latitude: 40.7128,
+        longitude: -74.006,
+      },
+    }
+
+    mockGeolocation.getCurrentPosition.mockImplementation(
+      (success: PositionCallback) =>
+        success(mockPosition as GeolocationPosition),
+    )
+
+    const { container } = render(
+      <GeolocationControls onChange={mockOnChange} onError={mockOnError} />,
+    )
+
+    const button = within(container).getByRole('button')
+    fireEvent.click(button)
+
+    expect(mockGeolocation.getCurrentPosition).toHaveBeenCalled()
+    expect(mockOnChange).toHaveBeenCalledWith(mockPosition.coords)
+  })
+
+  test('calls watchPosition when watch prop is true', () => {
+    mockPermissions.query.mockResolvedValue(mockPermissions)
+    const mockPosition = {
+      coords: {
+        latitude: 40.7128,
+        longitude: -74.006,
+      },
+    }
+    mockGeolocation.watchPosition.mockImplementation(
+      (success: PositionCallback) =>
+        success(mockPosition as GeolocationPosition),
+    )
+
+    const { container } = render(
+      <GeolocationControls
+        onChange={mockOnChange}
+        onError={mockOnError}
+        watch
+      />,
+    )
+
+    const button = within(container).getByRole('button')
+    fireEvent.click(button)
+
+    expect(mockGeolocation.watchPosition).toHaveBeenCalled()
+    expect(mockOnChange).toHaveBeenCalledWith(mockPosition.coords)
+  })
+
+  test('does not re-query permissions when only the onError identity changes', () => {
+    mockPermissions.query.mockResolvedValue(mockPermissions)
+
+    const { rerender } = render(
+      <GeolocationControls onChange={mockOnChange} onError={vi.fn()} />,
+    )
+    expect(mockPermissions.query).toHaveBeenCalledTimes(1)
+
+    // `onError` is read through an Effect Event, so the permission-query
+    // effect depends on `hasGeolocation` alone. A fresh callback identity
+    // must NOT re-run the query or re-register the permission listener.
+    rerender(<GeolocationControls onChange={mockOnChange} onError={vi.fn()} />)
+    expect(mockPermissions.query).toHaveBeenCalledTimes(1)
+  })
+
+  test('handles geolocation errors', () => {
+    mockPermissions.query.mockResolvedValue(mockPermissions)
+
+    const mockError = new Error('Geolocation error')
+    mockGeolocation.getCurrentPosition.mockImplementation(
+      (_, error: PositionErrorCallback) => {
+        error(mockError as unknown as GeolocationPositionError)
+      },
+    )
+
+    const { container } = render(
+      <GeolocationControls onChange={mockOnChange} onError={mockOnError} />,
+    )
+
+    const button = within(container).getByRole('button')
+    fireEvent.click(button)
+
+    expect(mockOnError).toHaveBeenCalledWith(mockError)
+  })
+})

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

@@ -0,0 +1,126 @@
+import { Paper, IconButton } from '@mui/material'
+import {
+  MyLocationOutlined,
+  LocationDisabledOutlined,
+} from '@mui/icons-material'
+import type { GeolocationControlProps } from './types'
+import {
+  useCallback,
+  useEffect,
+  useEffectEvent,
+  useReducer,
+  useRef,
+  type JSX,
+} from 'react'
+import { ariaLabel, tooltipLabelsDefault } from './const'
+import { Tooltip } from '../tooltip/tooltip'
+
+/**
+ * Provides a seamless interface for accessing device location through the browser's Geolocation API, with permission handling, continuous tracking, and error management.
+ *
+ * @example
+ * ```tsx
+ * <GeolocationControls
+ *   onChange={(coords) => console.log(coords.latitude, coords.longitude)}
+ *   onError={(error) => console.error(error.message)}
+ * />
+ * ```
+ */
+export function GeolocationControls({
+  disabled,
+  labels,
+  PaperProps,
+  TooltipProps,
+  watch,
+  onChange,
+  onError,
+}: GeolocationControlProps): JSX.Element {
+  const watchRef = useRef<number>(null)
+  const hasGeolocation = 'geolocation' in navigator
+
+  const [allowed, dispatch] = useReducer(
+    (_: boolean, action: 'granted' | 'denied') => action === 'granted',
+    hasGeolocation,
+  )
+
+  // Read the latest `onError` without making the permission-query effect
+  // re-run (and re-register the `result.onchange` permission listener)
+  // whenever the consumer passes a fresh callback identity.
+  const notifyError = useEffectEvent(
+    (error: Parameters<PositionErrorCallback>[0]): void => {
+      onError?.(error)
+    },
+  )
+
+  useEffect(() => {
+    if (hasGeolocation) {
+      navigator.permissions
+        .query({ name: 'geolocation' })
+        .then((result) => {
+          dispatch(result.state === 'granted' ? 'granted' : 'denied')
+          result.onchange = () => {
+            dispatch(result.state === 'granted' ? 'granted' : 'denied')
+          }
+        })
+        .catch((error: Parameters<PositionErrorCallback>[0]) => {
+          dispatch('denied')
+          notifyError(error)
+        })
+    }
+
+    return () => {
+      if (watchRef.current) {
+        navigator.geolocation.clearWatch(watchRef.current)
+      }
+    }
+  }, [hasGeolocation])
+
+  const success = useCallback(
+    (position: Parameters<PositionCallback>[0]) => {
+      onChange(position.coords)
+    },
+    [onChange],
+  )
+
+  const error = useCallback(
+    (error: Parameters<PositionErrorCallback>[0]) => {
+      dispatch('denied')
+      onError?.(error)
+    },
+    [onError],
+  )
+
+  const handleClick = useCallback(() => {
+    if (watchRef.current) {
+      navigator.geolocation.clearWatch(watchRef.current)
+    }
+
+    if (watch) {
+      watchRef.current = navigator.geolocation.watchPosition(success, error)
+      return
+    }
+
+    navigator.geolocation.getCurrentPosition(success, error)
+  }, [watch, success, error])
+
+  const tooltipLabels = labels?.tooltip ?? tooltipLabelsDefault
+
+  return (
+    <Paper {...PaperProps}>
+      <Tooltip
+        arrow
+        placement='right'
+        title={tooltipLabels[allowed ? 'enabled' : 'disabled']}
+        {...TooltipProps}
+      >
+        <IconButton
+          onClick={handleClick}
+          aria-label={labels?.ariaLabel ?? ariaLabel}
+          disabled={!hasGeolocation || disabled}
+        >
+          {allowed ? <MyLocationOutlined /> : <LocationDisabledOutlined />}
+        </IconButton>
+      </Tooltip>
+    </Paper>
+  )
+}

package/src/components/geolocation-controls/types.ts

@@ -0,0 +1,17 @@
+import type { PaperProps, TooltipProps } from '@mui/material'
+
+export interface GeolocationControlProps {
+  disabled?: boolean
+  labels?: {
+    tooltip: {
+      enabled: string
+      disabled: string
+    }
+    ariaLabel: string
+  }
+  PaperProps?: PaperProps
+  TooltipProps?: Omit<TooltipProps, 'title'>
+  watch?: boolean
+  onChange: (props: Parameters<PositionCallback>[0]['coords']) => void
+  onError?: (error: Parameters<PositionErrorCallback>[0]) => void
+}

package/src/components/index.ts

@@ -0,0 +1,163 @@
+export type {
+  // Common types
+  // Measurement tools
+  CustomMeasureMode,
+  MeasurementMode,
+  MeasurementModeOption,
+  MeasurementModes,
+  MeasurementModesMapping,
+  MeasurementOptionsMode,
+  MeasurementOptionsUnit,
+  MeasurementSystem,
+  MeasurementUnit,
+  MeasurementUnitImperialDistance,
+  MeasurementUnitMetricDistance,
+  MeasurementUnitOption,
+  MeasurementUnits,
+  // Lasso tools
+  LassoToolsMode,
+  LassoToolsModeOption,
+  LassoToolsModes,
+  LassoToolOptionsMode,
+  LassoToolsModesMapping,
+} from './types'
+export type {
+  LassoToolsComponentProps,
+  LassoToolsInlineComponentProps,
+  LassoGeometryToolbarUIProps,
+  LassoToolsUIContextValue,
+  LassoGeometryType,
+  LassoDrawColor,
+  LassoDrawColorPreset,
+  LassoDrawFill,
+  LassoDrawStroke,
+  LassoDrawStyle,
+  LassoLayerFiltersUIProps,
+  LassoLayerFilterItem,
+  LassoMessageUIProps,
+} from './lasso-tool/types'
+export type { InteractionModeSectionProps } from './lasso-tool/options-sections'
+export { InteractionModeSection } from './lasso-tool/options-sections'
+export { LassoToolsUI } from './lasso-tool/lasso-tool'
+export { LassoToolsInlineUI } from './lasso-tool/lasso-tool-inline'
+export { LassoGeometryToolbarUI } from './lasso-tool/geometry-toolbar'
+export { LassoLayerFiltersUI } from './lasso-tool/layer-filters'
+export { LassoMessageUI } from './lasso-tool/message'
+export {
+  DEFAULT_LASSO_TOOLS_MODES_MAPPING,
+  LASSO_TOOLS_LABELS,
+} from './lasso-tool/const'
+export {
+  DrawCircleIcon,
+  DrawLassoIcon,
+  DrawPolygonIcon,
+  DrawSquareIcon,
+  LassoSelectIcon,
+  SelectToolIcon,
+  SpatialMaskIcon,
+  TextAaIcon,
+  UnionIcon,
+} from './lasso-tool/icons'
+export type {
+  LassoToolbarUIProps,
+  LassoToolbarButtonUIProps,
+  ToggleTypeActionProps,
+  LabelActionProps,
+  LassoTextPresentation,
+  EditPropertiesActionProps,
+  LockActionProps,
+  DeleteActionProps,
+  ColorActionProps,
+  FillActionProps,
+  StrokeActionProps,
+  UndoActionProps,
+  RedoActionProps,
+  EditGeometryActionProps,
+  UnionActionProps,
+  SplitActionProps,
+  SubtractActionProps,
+  IntersectActionProps,
+  DuplicateActionProps,
+  AcceptActionProps,
+  CancelActionProps,
+} from './lasso-tool/toolbar'
+export type { LassoGeometryToolbarContextValue } from './lasso-tool/toolbar/context'
+export { useLassoGeometryToolbarAction } from './lasso-tool/toolbar/context'
+export { useLassoToolsUIArgs } from './lasso-tool/tools-context'
+export {
+  LassoToolbarUI,
+  LassoToolbarButtonUI,
+  ToggleTypeAction,
+  LabelAction,
+  ColorDot,
+  EditPropertiesAction,
+  LockAction,
+  DeleteAction,
+  ColorAction,
+  FillAction,
+  StrokeAction,
+  UndoAction,
+  RedoAction,
+  EditGeometryAction,
+  UnionAction,
+  SplitAction,
+  SubtractAction,
+  IntersectAction,
+  DuplicateAction,
+  AcceptAction,
+  CancelAction,
+  EDIT_GEOMETRY_ACTION_LABELS,
+  UNION_ACTION_LABELS,
+  SPLIT_ACTION_LABELS,
+  SUBTRACT_ACTION_LABELS,
+  INTERSECT_ACTION_LABELS,
+  DUPLICATE_ACTION_LABELS,
+  ACCEPT_ACTION_LABELS,
+  CANCEL_ACTION_LABELS,
+  TOGGLE_TYPE_ACTION_LABELS,
+  LABEL_ACTION_LABELS,
+  EDIT_PROPERTIES_ACTION_LABELS,
+  LOCK_ACTION_LABELS,
+  DELETE_ACTION_LABELS,
+  COLOR_ACTION_LABELS,
+  FILL_ACTION_LABELS,
+  STROKE_ACTION_LABELS,
+  UNDO_ACTION_LABELS,
+  REDO_ACTION_LABELS,
+  LASSO_DRAW_COLOR_HEX,
+  isLassoDrawColorPreset,
+  normalizeHex,
+} from './lasso-tool/toolbar'
+export type { LassoUndoRedoUIProps } from './lasso-tool/undo-redo'
+export { LassoUndoRedoUI } from './lasso-tool/undo-redo'
+export type { LassoEditConfirmToolbarUIProps } from './lasso-tool/edit-confirm-toolbar'
+export { LassoEditConfirmToolbarUI } from './lasso-tool/edit-confirm-toolbar'
+
+export type { MeasurementToolsComponentProps } from './measurement-tools/types'
+export {
+  DEFAULT_MEASUREMENT_TOOLS_LABELS,
+  DEFAULT_MEASUREMENT_TOOLS_UNITS_MAPPING,
+  DEFAULT_MEASUREMENT_TOOLS_MODES_MAPPING,
+} from './measurement-tools/const'
+export { AreaIcon, BufferIcon, RulerIcon } from './measurement-tools/icons'
+export { MeasurementToolsUI } from './measurement-tools/measurement-tools'
+
+export type { GeolocationControlProps } from './geolocation-controls/types'
+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'
+
+export { Tooltip, setTooltipEnterDelay } from './tooltip/tooltip'
+export { SmartTooltip } from './smart-tooltip/smart-tooltip'
+
+export { ResponsiveDrawer } from './responsive-drawer/responsive-drawer'
+
+export type { CopyButtonProps } from './copy-button/types'
+export { CopyButton } from './copy-button/copy-button'

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

@@ -0,0 +1,257 @@
+/**
+ * Tests for LassoToolsUIChip — covers both visible/invisible branches,
+ * custom label overrides, custom chip/tooltip props, and the delete +
+ * click callbacks.
+ */
+import { describe, it, expect, vi } from 'vitest'
+import { render, fireEvent, screen } from '@testing-library/react'
+import { LassoToolsUIChip } from './chip'
+import type { LassoToolsData } from './types'
+
+const baseValue: LassoToolsData = {
+  id: 'p1',
+  label: 'Polygon 1',
+  visible: true,
+}
+
+describe('LassoToolsUIChip', () => {
+  it('renders with active state when value.visible=true (color=secondary)', () => {
+    const { container } = render(
+      <LassoToolsUIChip
+        value={baseValue}
+        onChipToggle={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    )
+    // MUI Chip with color=secondary has a class containing 'colorSecondary'.
+    const chip = container.querySelector('.MuiChip-root')
+    expect(chip).not.toBeNull()
+    expect(chip!.className).toContain('colorSecondary')
+  })
+
+  it('renders with inactive state when value.visible=false (color=default)', () => {
+    const { container } = render(
+      <LassoToolsUIChip
+        value={{ ...baseValue, visible: false }}
+        onChipToggle={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    )
+    const chip = container.querySelector('.MuiChip-root')
+    expect(chip).not.toBeNull()
+    expect(chip!.className).not.toContain('colorSecondary')
+  })
+
+  it('renders the value.label as the chip text', () => {
+    render(
+      <LassoToolsUIChip
+        value={{ ...baseValue, label: 'My polygon' }}
+        onChipToggle={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    )
+    expect(screen.getByText('My polygon')).toBeDefined()
+  })
+
+  it('invokes onChipToggle with id + !visible when chip is clicked', () => {
+    const onChipToggle = vi.fn()
+    render(
+      <LassoToolsUIChip
+        value={{ ...baseValue, visible: true }}
+        onChipToggle={onChipToggle}
+        onDelete={vi.fn()}
+      />,
+    )
+    fireEvent.click(screen.getByText('Polygon 1'))
+    expect(onChipToggle).toHaveBeenCalledWith('p1', false)
+  })
+
+  it('invokes onChipToggle with id + true when starting from invisible', () => {
+    const onChipToggle = vi.fn()
+    render(
+      <LassoToolsUIChip
+        value={{ ...baseValue, visible: false }}
+        onChipToggle={onChipToggle}
+        onDelete={vi.fn()}
+      />,
+    )
+    fireEvent.click(screen.getByText('Polygon 1'))
+    expect(onChipToggle).toHaveBeenCalledWith('p1', true)
+  })
+
+  it('invokes onDelete with id when delete icon is clicked', () => {
+    const onDelete = vi.fn()
+    const { getByTestId } = render(
+      <LassoToolsUIChip
+        value={baseValue}
+        onChipToggle={vi.fn()}
+        onDelete={onDelete}
+      />,
+    )
+    // MUI Chip delete icon has data-testid='CancelIcon' by default.
+    fireEvent.click(getByTestId('CancelIcon'))
+    expect(onDelete).toHaveBeenCalledWith('p1')
+  })
+
+  it('uses custom labels.tooltip.active when provided + visible=true', () => {
+    // The tooltip is rendered lazily on hover; we just confirm the chip
+    // renders without throwing when a custom label is supplied.
+    expect(() =>
+      render(
+        <LassoToolsUIChip
+          value={{ ...baseValue, visible: true }}
+          labels={{
+            tooltip: { active: 'Hide me', inactive: 'Show me' },
+          }}
+          onChipToggle={vi.fn()}
+          onDelete={vi.fn()}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  it('uses custom labels.tooltip.inactive when provided + visible=false', () => {
+    expect(() =>
+      render(
+        <LassoToolsUIChip
+          value={{ ...baseValue, visible: false }}
+          labels={{
+            tooltip: { active: 'Hide me', inactive: 'Show me' },
+          }}
+          onChipToggle={vi.fn()}
+          onDelete={vi.fn()}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  it('falls back to default labels when labels is omitted', () => {
+    // Just renders without crashing; the labels?. chain falls back to
+    // LASSO_TOOLS_LABELS.chip.tooltip[chipState].
+    expect(() =>
+      render(
+        <LassoToolsUIChip
+          value={baseValue}
+          onChipToggle={vi.fn()}
+          onDelete={vi.fn()}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  it('shows the mask glyph by default', () => {
+    const { container } = render(
+      <LassoToolsUIChip
+        value={baseValue}
+        onChipToggle={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    )
+    expect(container.querySelector('.MuiChip-icon')).not.toBeNull()
+    expect(
+      container.querySelector('[data-testid="LockOutlinedIcon"]'),
+    ).toBeNull()
+  })
+
+  it('shows a padlock instead of the mask glyph when locked', () => {
+    const { container } = render(
+      <LassoToolsUIChip
+        value={{ ...baseValue, locked: true }}
+        onChipToggle={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    )
+    expect(
+      container.querySelector('[data-testid="LockOutlinedIcon"]'),
+    ).not.toBeNull()
+  })
+
+  it('hides the delete affordance when locked (the store refuses it anyway)', () => {
+    const { queryByTestId } = render(
+      <LassoToolsUIChip
+        value={{ ...baseValue, locked: true }}
+        onChipToggle={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    )
+    expect(queryByTestId('CancelIcon')).toBeNull()
+  })
+
+  it('merges a caller sx with the base styles instead of replacing them', () => {
+    const { container } = render(
+      <LassoToolsUIChip
+        value={baseValue}
+        chipProps={
+          {
+            // A function sx: the old object spread would have dropped it, and
+            // a plain override would have erased the base marginRight.
+            ChipsProps: { sx: () => ({ outlineStyle: 'dashed' }) },
+          } as never
+        }
+        onChipToggle={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    )
+
+    const chip = container.querySelector('.MuiChip-root')!
+    expect(getComputedStyle(chip).outlineStyle).toBe('dashed')
+    // Base style survives the caller override.
+    expect(getComputedStyle(chip).marginRight).toBe('4px')
+  })
+
+  it('composes a caller onClick with the visibility toggle instead of replacing it', () => {
+    const onChipToggle = vi.fn()
+    const trackClick = vi.fn()
+    render(
+      <LassoToolsUIChip
+        value={baseValue}
+        chipProps={
+          {
+            ChipsProps: { onClick: trackClick } as never,
+          } as never
+        }
+        onChipToggle={onChipToggle}
+        onDelete={vi.fn()}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('Polygon 1'))
+
+    // Both fire: the internal toggle isn't silently replaced by the spread.
+    expect(onChipToggle).toHaveBeenCalledWith('p1', false)
+    expect(trackClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('threads chipProps.ChipsProps onto the underlying MUI Chip', () => {
+    const { container } = render(
+      <LassoToolsUIChip
+        value={baseValue}
+        chipProps={
+          {
+            ChipsProps: { 'data-testid': 'pinned-chip' } as never,
+          } as never
+        }
+        onChipToggle={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    )
+    expect(
+      container.querySelector('[data-testid="pinned-chip"]'),
+    ).not.toBeNull()
+  })
+
+  it('threads chipProps.TooltipProps onto the wrapping Tooltip', () => {
+    // The Tooltip wrapper isn't directly assertable without rendering it
+    // open; we confirm no throw on the spread.
+    expect(() =>
+      render(
+        <LassoToolsUIChip
+          value={baseValue}
+          chipProps={{ TooltipProps: { placement: 'left' } }}
+          onChipToggle={vi.fn()}
+          onDelete={vi.fn()}
+        />,
+      ),
+    ).not.toThrow()
+  })
+})