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

package/src/components/lasso-tool/toolbar/actions/label-action.tsx

@@ -0,0 +1,292 @@
+import { FormatBold, FormatItalic } from '@mui/icons-material'
+import {
+  Box,
+  Checkbox,
+  FormControlLabel,
+  Popover,
+  SvgIcon,
+  TextField,
+  Typography,
+} from '@mui/material'
+import {
+  useCallback,
+  useEffect,
+  useEffectEvent,
+  useRef,
+  useState,
+  type JSX,
+  type KeyboardEvent,
+  type RefObject,
+} from 'react'
+import { TextAaIcon } from '../../icons'
+import type { LassoDrawColor } from '../../types'
+import { LassoToolbarButtonUI } from '../button'
+import { ICON_SIZE } from '../styles'
+import { ColorAction } from './color-action'
+
+export const LABEL_ACTION_LABELS = {
+  label: 'Label',
+  name: 'Name',
+  showOnMap: 'Show on map',
+  bold: 'Bold',
+  italic: 'Italic',
+} as const
+
+/** Partial map-label presentation — applied live (one undo each). */
+export interface LassoTextPresentation {
+  textVisible?: boolean
+  textColor?: LassoDrawColor
+  textBold?: boolean
+  textItalic?: boolean
+}
+
+export interface LabelActionProps {
+  /** Current geometry name (`label`), shown prefilled in the Name field. */
+  label: string
+  /** Whether the map TextLayer is enabled for this geometry. */
+  textVisible?: boolean
+  /** Effective text color (persisted or basemap default). */
+  textColor?: LassoDrawColor
+  textBold?: boolean
+  textItalic?: boolean
+  /**
+   * When true, hides the "Show on map" checkbox and treats the label as
+   * always visible (Point text annotations).
+   */
+  forceTextVisible?: boolean
+  disabled?: boolean
+  labels?: {
+    /** Tooltip/aria-label for the Label button. */
+    label?: string
+    /** TextField label for the name input. */
+    name?: string
+    showOnMap?: string
+    bold?: string
+    italic?: string
+  }
+  /** Commits a new name on Enter/blur/close (no-op on empty or unchanged). */
+  onRename: (label: string) => void
+  /** Applies presentation changes live while the popover is open. */
+  onSetTextPresentation: (partial: LassoTextPresentation) => void
+  /**
+   * Element to anchor the popover to (e.g. the toolbar Paper, so the
+   * popover spans the full bar). Defaults to the action button itself.
+   */
+  anchorRef?: RefObject<HTMLElement | null>
+  /**
+   * True while the mutually-exclusive Edit properties popover is open —
+   * closes (commits name) this one, per the "one popover at a time" rule.
+   */
+  forceClose?: boolean
+  /** Notified on open/close, so a sibling popover can enforce mutual exclusion. */
+  onOpenChange?: (open: boolean) => void
+  /**
+   * Identity of the current selection (e.g. the selected ids, joined). A
+   * change while the popover is open closes (discards name) it — same as
+   * any other discard.
+   */
+  selectionKey?: string
+}
+
+/**
+ * Label action: button + anchored popover with Name, Show on map, and a
+ * Color + Bold/Italic row. Presentation applies live; name commits on
+ * Enter/blur/close. Escape discards an in-progress name edit.
+ */
+export function LabelAction({
+  label,
+  textVisible = false,
+  forceTextVisible = false,
+  textColor = 'black',
+  textBold = false,
+  textItalic = false,
+  disabled = false,
+  labels,
+  onRename,
+  onSetTextPresentation,
+  anchorRef,
+  forceClose = false,
+  onOpenChange,
+  selectionKey,
+}: LabelActionProps): JSX.Element {
+  // Guards `onRename` to once per session — Popover `onClose` and TextField
+  // `onBlur` can both fire for a single close (and Enter blurs on unmount).
+  const committedRef = useRef(false)
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const [anchorWidth, setAnchorWidth] = useState<number>()
+  const [draft, setDraft] = useState(label)
+  const focusOnMount = useCallback((node: HTMLInputElement | null) => {
+    node?.focus()
+  }, [])
+
+  const open = Boolean(anchorEl)
+  const actionLabel = labels?.label ?? LABEL_ACTION_LABELS.label
+  const nameLabel = labels?.name ?? LABEL_ACTION_LABELS.name
+  const showOnMapLabel = labels?.showOnMap ?? LABEL_ACTION_LABELS.showOnMap
+  const boldLabel = labels?.bold ?? LABEL_ACTION_LABELS.bold
+  const italicLabel = labels?.italic ?? LABEL_ACTION_LABELS.italic
+  const effectiveVisible = forceTextVisible || textVisible
+  const presentationEnabled = effectiveVisible
+
+  const openLabel = (button: HTMLElement) => {
+    committedRef.current = false
+    setDraft(label)
+    const anchor = anchorRef?.current ?? button
+    setAnchorWidth(anchor.clientWidth)
+    setAnchorEl(anchor)
+    onOpenChange?.(true)
+  }
+
+  const commitName = () => {
+    if (!committedRef.current) {
+      committedRef.current = true
+      const next = draft.trim()
+      if (next && next !== label) {
+        onRename(next)
+      }
+    }
+  }
+
+  const close = () => {
+    commitName()
+    setAnchorEl(null)
+    onOpenChange?.(false)
+  }
+
+  // Escape discards the name edit: mark the session done so unmount blur /
+  // onClose don't fire `onRename`.
+  const cancel = () => {
+    committedRef.current = true
+    setAnchorEl(null)
+    onOpenChange?.(false)
+  }
+
+  const handleForceClose = useEffectEvent(() => {
+    if (anchorEl) close()
+  })
+  useEffect(() => {
+    if (forceClose) handleForceClose()
+  }, [forceClose])
+
+  // Selection change while open always discards the name: by the time this
+  // runs, `onRename` has rebound to the NEW selection.
+  const prevSelectionKeyRef = useRef(selectionKey)
+  const handleSelectionChange = useEffectEvent(() => {
+    if (anchorEl) cancel()
+  })
+  useEffect(() => {
+    if (prevSelectionKeyRef.current !== selectionKey) {
+      prevSelectionKeyRef.current = selectionKey
+      handleSelectionChange()
+    }
+  }, [selectionKey])
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      close()
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      cancel()
+    }
+  }
+
+  return (
+    <>
+      <LassoToolbarButtonUI
+        label={actionLabel}
+        active={open}
+        disabled={disabled}
+        onClick={(event) => openLabel(event.currentTarget)}
+        icon={
+          <SvgIcon
+            component={TextAaIcon}
+            inheritViewBox
+            sx={{ fontSize: ICON_SIZE }}
+          />
+        }
+      />
+
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={close}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        slotProps={{
+          paper: {
+            sx: { width: anchorWidth, minWidth: 220 },
+          },
+        }}
+      >
+        <Box
+          sx={{
+            p: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+          }}
+        >
+          <TextField
+            inputRef={focusOnMount}
+            fullWidth
+            label={nameLabel}
+            size='small'
+            variant='outlined'
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onBlur={commitName}
+          />
+
+          {!forceTextVisible && (
+            <FormControlLabel
+              control={
+                <Checkbox
+                  size='small'
+                  checked={textVisible}
+                  onChange={(e) =>
+                    onSetTextPresentation({ textVisible: e.target.checked })
+                  }
+                />
+              }
+              label={<Typography variant='body2'>{showOnMapLabel}</Typography>}
+            />
+          )}
+
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.5,
+            }}
+          >
+            <ColorAction
+              value={textColor}
+              disabled={!presentationEnabled}
+              disablePortal
+              onChange={(color) => onSetTextPresentation({ textColor: color })}
+            />
+            <LassoToolbarButtonUI
+              label={boldLabel}
+              active={textBold}
+              pressed={textBold}
+              disabled={!presentationEnabled}
+              onClick={() => onSetTextPresentation({ textBold: !textBold })}
+              icon={<FormatBold sx={{ fontSize: ICON_SIZE }} />}
+            />
+            <LassoToolbarButtonUI
+              label={italicLabel}
+              active={textItalic}
+              pressed={textItalic}
+              disabled={!presentationEnabled}
+              onClick={() => onSetTextPresentation({ textItalic: !textItalic })}
+              icon={<FormatItalic sx={{ fontSize: ICON_SIZE }} />}
+            />
+          </Box>
+        </Box>
+      </Popover>
+    </>
+  )
+}

package/src/components/lasso-tool/toolbar/actions/lock-action.tsx

@@ -0,0 +1,40 @@
+import { LockOutlined } from '@mui/icons-material'
+import type { JSX } from 'react'
+import { LassoToolbarButtonUI } from '../button'
+import { ICON_SIZE } from '../styles'
+
+export const LOCK_ACTION_LABELS = {
+  lock: 'Lock',
+  unlock: 'Unlock',
+} as const
+
+export interface LockActionProps {
+  locked: boolean
+  disabled?: boolean
+  labels?: { lock?: string; unlock?: string }
+  /** Called with the opposite locked state. */
+  onToggleLock: (locked: boolean) => void
+}
+
+/** Lock toggle: active tint + `aria-pressed` while the geometry is locked. */
+export function LockAction({
+  locked,
+  disabled = false,
+  labels,
+  onToggleLock,
+}: LockActionProps): JSX.Element {
+  const label = locked
+    ? (labels?.unlock ?? LOCK_ACTION_LABELS.unlock)
+    : (labels?.lock ?? LOCK_ACTION_LABELS.lock)
+
+  return (
+    <LassoToolbarButtonUI
+      label={label}
+      active={locked}
+      pressed={locked}
+      disabled={disabled}
+      onClick={() => onToggleLock(!locked)}
+      icon={<LockOutlined sx={{ fontSize: ICON_SIZE }} />}
+    />
+  )
+}

package/src/components/lasso-tool/toolbar/actions/redo-action.tsx

@@ -0,0 +1,35 @@
+import { RedoOutlined } from '@mui/icons-material'
+import type { JSX } from 'react'
+import { LassoToolbarButtonUI } from '../button'
+import { ICON_SIZE } from '../styles'
+
+export const REDO_ACTION_LABELS = {
+  redo: 'Redo',
+} as const
+
+export interface RedoActionProps {
+  /** Usually `!canRedo`. */
+  disabled?: boolean
+  label?: string
+  /** Keyboard-shortcut hint appended to the tooltip, e.g. `"⌘⇧Z"`. */
+  shortcut?: string
+  onRedo: () => void
+}
+
+/** Re-apply the last undone lasso modification. */
+export function RedoAction({
+  disabled = false,
+  label,
+  shortcut,
+  onRedo,
+}: RedoActionProps): JSX.Element {
+  return (
+    <LassoToolbarButtonUI
+      label={label ?? REDO_ACTION_LABELS.redo}
+      shortcut={shortcut}
+      disabled={disabled}
+      onClick={onRedo}
+      icon={<RedoOutlined sx={{ fontSize: ICON_SIZE }} />}
+    />
+  )
+}

package/src/components/lasso-tool/toolbar/actions/split-action.tsx

@@ -0,0 +1,33 @@
+import { CallSplitOutlined } from '@mui/icons-material'
+import type { JSX } from 'react'
+import { LassoToolbarButtonUI } from '../button'
+import { ICON_SIZE } from '../styles'
+
+export const SPLIT_ACTION_LABELS = {
+  split: 'Split geometry',
+} as const
+
+export interface SplitActionProps {
+  disabled?: boolean
+  label?: string
+  onSplit: () => void
+}
+
+/**
+ * Splits a MultiPolygon into its parts (the inverse of the merge action on
+ * disjoint inputs). Only meaningful with a single MultiPolygon selected.
+ */
+export function SplitAction({
+  disabled = false,
+  label,
+  onSplit,
+}: SplitActionProps): JSX.Element {
+  return (
+    <LassoToolbarButtonUI
+      label={label ?? SPLIT_ACTION_LABELS.split}
+      disabled={disabled}
+      onClick={onSplit}
+      icon={<CallSplitOutlined sx={{ fontSize: ICON_SIZE }} />}
+    />
+  )
+}

package/src/components/lasso-tool/toolbar/actions/stroke-action.tsx

@@ -0,0 +1,57 @@
+import { LineWeightOutlined } from '@mui/icons-material'
+import type { JSX } from 'react'
+import type { LassoDrawStroke } from '../../types'
+import { ICON_SIZE } from '../styles'
+import { ActionMenu } from './action-menu'
+
+export const STROKE_ACTION_LABELS = {
+  tooltip: 'Stroke',
+  options: {
+    thick: 'Thick',
+    default: 'Default',
+    thin: 'Thin',
+    none: 'None',
+  },
+} as const
+
+const STROKE_VALUES: LassoDrawStroke[] = ['thick', 'default', 'thin', 'none']
+
+export interface StrokeActionProps {
+  value: LassoDrawStroke
+  disabled?: boolean
+  /**
+   * Disables just the `none` option — set it when the fill is already
+   * `none`, since the store refuses to make both invisible at once.
+   */
+  disableNone?: boolean
+  labels?: {
+    tooltip?: string
+    options?: Partial<Record<LassoDrawStroke, string>>
+  }
+  onChange: (value: LassoDrawStroke) => void
+}
+
+/** Stroke-width picker for `draw` geometries: thick / default / thin / none. */
+export function StrokeAction({
+  value,
+  disabled = false,
+  disableNone = false,
+  labels,
+  onChange,
+}: StrokeActionProps): JSX.Element {
+  return (
+    <ActionMenu
+      label={labels?.tooltip ?? STROKE_ACTION_LABELS.tooltip}
+      icon={<LineWeightOutlined sx={{ fontSize: ICON_SIZE }} />}
+      disabled={disabled}
+      value={value}
+      options={STROKE_VALUES.map((stroke) => ({
+        value: stroke,
+        label:
+          labels?.options?.[stroke] ?? STROKE_ACTION_LABELS.options[stroke],
+        disabled: stroke === 'none' && disableNone,
+      }))}
+      onChange={onChange}
+    />
+  )
+}

package/src/components/lasso-tool/toolbar/actions/style-actions.test.tsx

@@ -0,0 +1,212 @@
+/**
+ * Tests for the draw-style toolbar actions: ColorAction (preset menu + custom
+ * native picker), FillAction (filled/opacity/none) and StrokeAction
+ * (thick/default/thin/none).
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, fireEvent, screen, act } from '@testing-library/react'
+import {
+  ColorAction,
+  normalizeHex,
+  isLassoDrawColorPreset,
+} from './color-action'
+import { FillAction } from './fill-action'
+import { StrokeAction } from './stroke-action'
+
+describe('normalizeHex', () => {
+  it('normalizes 6-digit hex to lowercase #rrggbb', () => {
+    expect(normalizeHex('#AABBCC')).toBe('#aabbcc')
+    expect(normalizeHex('aabbcc')).toBe('#aabbcc')
+  })
+
+  it('expands 3-digit hex', () => {
+    expect(normalizeHex('#abc')).toBe('#aabbcc')
+  })
+
+  it('returns undefined for invalid input', () => {
+    expect(normalizeHex('nope')).toBeUndefined()
+  })
+})
+
+describe('isLassoDrawColorPreset', () => {
+  it('recognizes presets and rejects hex', () => {
+    expect(isLassoDrawColorPreset('yellow')).toBe(true)
+    expect(isLassoDrawColorPreset('#f6cf71')).toBe(false)
+  })
+})
+
+describe('ColorAction', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('opens the preset menu and emits the picked color', () => {
+    const onChange = vi.fn()
+    render(<ColorAction value='yellow' onChange={onChange} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Color' }))
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Pink' }))
+
+    expect(onChange).toHaveBeenCalledWith('pink')
+  })
+
+  it('marks the current color as selected', () => {
+    render(<ColorAction value='green' onChange={vi.fn()} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Color' }))
+
+    expect(screen.getByRole('menuitem', { name: 'Green' }).className).toContain(
+      'Mui-selected',
+    )
+  })
+
+  it('marks Custom as selected when value is a hex string', () => {
+    render(<ColorAction value='#ff5500' onChange={vi.fn()} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Color' }))
+
+    expect(
+      screen.getByRole('menuitem', { name: 'Custom' }).className,
+    ).toContain('Mui-selected')
+  })
+
+  it('opens the native color picker from Custom and emits normalized hex', () => {
+    const onChange = vi.fn()
+    const { container } = render(
+      <ColorAction value='yellow' onChange={onChange} />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Color' }))
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Custom' }))
+
+    act(() => {
+      vi.runAllTimers()
+    })
+
+    const input = container.querySelector<HTMLInputElement>(
+      'input[type="color"]',
+    )!
+    expect(input).toBeTruthy()
+    // Seeded from the current preset hex (lowercase).
+    expect(input.value).toBe('#f6cf71')
+
+    fireEvent.change(input, { target: { value: '#FF5500' } })
+    expect(onChange).toHaveBeenCalledWith('#ff5500')
+  })
+
+  it('supports custom labels including Custom', () => {
+    render(
+      <ColorAction
+        value='yellow'
+        labels={{ options: { custom: 'Personalizado', pink: 'Rosa' } }}
+        onChange={vi.fn()}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Color' }))
+
+    expect(
+      screen.getByRole('menuitem', { name: 'Personalizado' }),
+    ).toBeDefined()
+    expect(screen.getByRole('menuitem', { name: 'Rosa' })).toBeDefined()
+  })
+
+  it('is disabled when disabled', () => {
+    render(<ColorAction value='yellow' disabled onChange={vi.fn()} />)
+    expect(
+      screen.getByRole('button', { name: 'Color' }).hasAttribute('disabled'),
+    ).toBe(true)
+  })
+
+  it('exposes menu-trigger semantics (aria-haspopup / aria-expanded)', () => {
+    render(<ColorAction value='yellow' onChange={vi.fn()} />)
+    const trigger = screen.getByRole('button', { name: 'Color' })
+
+    expect(trigger.getAttribute('aria-haspopup')).toBe('menu')
+    expect(trigger.getAttribute('aria-expanded')).toBeNull()
+
+    fireEvent.click(trigger)
+    expect(trigger.getAttribute('aria-expanded')).toBe('true')
+  })
+})
+
+describe('FillAction', () => {
+  it('emits the picked fill', () => {
+    const onChange = vi.fn()
+    render(<FillAction value='none' onChange={onChange} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Fill' }))
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Opacity' }))
+
+    expect(onChange).toHaveBeenCalledWith('opacity')
+  })
+
+  it('marks the current fill as selected', () => {
+    render(<FillAction value='filled' onChange={vi.fn()} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Fill' }))
+
+    expect(
+      screen.getByRole('menuitem', { name: 'Filled' }).className,
+    ).toContain('Mui-selected')
+  })
+
+  it('disables only the None option when disableNone', () => {
+    render(<FillAction value='filled' disableNone onChange={vi.fn()} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Fill' }))
+
+    expect(
+      screen
+        .getByRole('menuitem', { name: 'None' })
+        .getAttribute('aria-disabled'),
+    ).toBe('true')
+    expect(
+      screen
+        .getByRole('menuitem', { name: 'Opacity' })
+        .getAttribute('aria-disabled'),
+    ).toBeNull()
+  })
+})
+
+describe('StrokeAction', () => {
+  it('emits the picked stroke', () => {
+    const onChange = vi.fn()
+    render(<StrokeAction value='default' onChange={onChange} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Stroke' }))
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Thick' }))
+
+    expect(onChange).toHaveBeenCalledWith('thick')
+  })
+
+  it('supports custom labels', () => {
+    render(
+      <StrokeAction
+        value='default'
+        labels={{ tooltip: 'Grosor', options: { thin: 'Fino' } }}
+        onChange={vi.fn()}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Grosor' }))
+
+    expect(screen.getByRole('menuitem', { name: 'Fino' })).toBeDefined()
+  })
+
+  it('disables only the None option when disableNone', () => {
+    render(<StrokeAction value='default' disableNone onChange={vi.fn()} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Stroke' }))
+
+    expect(
+      screen
+        .getByRole('menuitem', { name: 'None' })
+        .getAttribute('aria-disabled'),
+    ).toBe('true')
+  })
+})

package/src/components/lasso-tool/toolbar/actions/subtract-action.tsx

@@ -0,0 +1,33 @@
+import { JoinLeftOutlined } from '@mui/icons-material'
+import type { JSX } from 'react'
+import { LassoToolbarButtonUI } from '../button'
+import { ICON_SIZE } from '../styles'
+
+export const SUBTRACT_ACTION_LABELS = {
+  subtract: 'Subtract geometries',
+} as const
+
+export interface SubtractActionProps {
+  disabled?: boolean
+  label?: string
+  onSubtract: () => void
+}
+
+/**
+ * Subtracts every other selected geometry from the first one (a contained
+ * geometry carves a hole). Only meaningful with 2+ geometries selected.
+ */
+export function SubtractAction({
+  disabled = false,
+  label,
+  onSubtract,
+}: SubtractActionProps): JSX.Element {
+  return (
+    <LassoToolbarButtonUI
+      label={label ?? SUBTRACT_ACTION_LABELS.subtract}
+      disabled={disabled}
+      onClick={onSubtract}
+      icon={<JoinLeftOutlined sx={{ fontSize: ICON_SIZE }} />}
+    />
+  )
+}