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

package/src/components/lasso-tool/styles.ts

@@ -0,0 +1,190 @@
+import { alpha, type SxProps, type Theme } from '@mui/material'
+
+type SxEntry = Exclude<
+  NonNullable<SxProps<Theme>>,
+  readonly unknown[] | boolean
+>
+
+/**
+ * Merges a component's own `sx` with the caller's. Needed because `SxProps` is
+ * not always an object — a function or an array is silently dropped by an
+ * object spread — and MUI's array form rejects falsy entries.
+ */
+export function mergeSx(...values: (SxProps<Theme> | undefined)[]): SxEntry[] {
+  return values
+    .flat()
+    .filter((entry): entry is SxEntry => !!entry && entry !== true)
+}
+
+/**
+ * Ceiling for the options menu, replacing the design system's fixed 312px.
+ * `dvh` so it follows the mobile address bar.
+ *
+ * The 96px gutter is MUI's own allowance, and it is not decorative: MUI's
+ * Popover measures the paper mid-`Grow` (at scale 0.75), underestimates its
+ * height and then fails to shift it up, so a taller ceiling overflows the
+ * bottom of a short viewport and the last entries become unreachable — with a
+ * 32px gutter, "Layer filters" landed off-screen on a 420px-tall window. This
+ * leaves room for the anchor offset instead. The whole menu fits from a 511px
+ * viewport up and scrolls below that.
+ */
+const MENU_MAX_HEIGHT = 'calc(100dvh - 96px)'
+
+export const styles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    overflow: 'hidden',
+    width: 'fit-content',
+
+    '&.inline': {
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      gap: ({ spacing }) => spacing(1),
+      // Horizontal separators between compound blocks. Blocks own no
+      // `<Divider flexItem />` — omitting/reordering never orphans or doubles
+      // rules. Vertical Dividers inside Modes/Actions stay in those blocks.
+      '& > * + *': {
+        borderTop: 1,
+        borderColor: 'divider',
+        paddingTop: ({ spacing }) => spacing(1),
+      },
+    },
+  },
+  actions: {
+    icon: {
+      width: ({ spacing }) => spacing(4),
+      height: ({ spacing }) => spacing(4),
+      borderRadius: 0,
+      '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
+        borderRadius: 0,
+      },
+    },
+  },
+  options: {
+    // The design system caps menus and their lists at 312px ("defined by
+    // design"), but this menu is not a plain option list — interaction mode,
+    // drawing tools, selection tools and layer filters add up to 415px, so the
+    // last entries fell behind an unannounced scroll. Both the paper and the
+    // list carry the cap, and the DS selectors are self-qualified (0,2,0), so
+    // these have to be too.
+    paper: { '&.MuiMenu-paper': { maxHeight: MENU_MAX_HEIGHT } },
+    menu: {
+      '&.MuiMenu-list': { maxHeight: MENU_MAX_HEIGHT },
+      paddingY: ({ spacing }) => spacing(1),
+      '&.inline': {
+        boxShadow: 'none',
+        backgroundColor: 'transparent',
+        borderRadius: ({ spacing }) => spacing(0.5),
+
+        '& .MuiDivider-root': {
+          height: ({ spacing }) => spacing(4),
+
+          '&.MuiToggleButtonGroup-groupedHorizontal': {
+            height: ({ spacing }) => spacing(4),
+          },
+          '&.MuiToggleButtonGroup-groupedVertical': {
+            height: 'auto',
+            width: ({ spacing }) => spacing(4),
+            margin: ({ spacing }) => `${spacing(0.5, 0, 1)} !important`,
+            borderRadius: '0 !important',
+          },
+        },
+
+        '& .MuiToggleButton-sizeSmall': {
+          margin: 0,
+
+          '&.MuiToggleButtonGroup-grouped:not(.MuiDivider-root)': {
+            margin: 0,
+          },
+          '& + .MuiDivider-root.MuiToggleButtonGroup-groupedHorizontal': {
+            height: ({ spacing }) => spacing(3),
+          },
+          '& + .MuiDivider-root.MuiToggleButtonGroup-groupedVertical': {
+            height: 'auto',
+            width: ({ spacing }) => spacing(3),
+          },
+        },
+
+        '.MuiToggleButtonGroup-grouped:not(.MuiDivider-root)': {
+          margin: 0,
+
+          '&:first-of-type': {
+            marginLeft: 0,
+          },
+          '&:not(:last-of-type)': {
+            marginRight: ({ spacing }) => spacing(0.5),
+          },
+        },
+        '&.MuiToggleButtonGroup-horizontal:not(.MuiDivider-root)': {
+          '.MuiToggleButtonGroup-grouped': {
+            margin: ({ spacing }) => spacing(0, 0.5),
+          },
+        },
+        '&.MuiToggleButtonGroup-vertical:not(.MuiDivider-root)': {
+          '.MuiToggleButtonGroup-grouped': {
+            margin: ({ spacing }) => spacing(0, 0, 0.5),
+
+            '&:not(:last-of-type)': {
+              marginRight: 0,
+            },
+            '&:last-of-type': {
+              marginBottom: 0,
+            },
+          },
+        },
+      },
+    },
+    icon: {
+      borderRadius: 0,
+      width: ({ spacing }) => spacing(3),
+    },
+    title: {
+      paddingX: ({ spacing }) => spacing(2),
+      paddingBottom: ({ spacing }) => spacing(0.5),
+
+      '&.inline': {
+        paddingX: 0,
+        paddingBottom: 0,
+      },
+    },
+    icons: {
+      color: ({ palette }) => palette.text.primary,
+    },
+    tag: {
+      borderRadius: ({ spacing }) => spacing(0.25),
+      border: '1px solid',
+      borderColor: ({ palette }) => palette.primary.main,
+      paddingX: ({ spacing }) => spacing(0.5),
+      color: ({ palette }) => palette.primary.main,
+      backgroundColor: ({ palette }) => alpha(palette.primary.main, 0.08),
+    },
+    more: {
+      width: ({ spacing }) => spacing(4),
+    },
+  },
+  chip: {
+    container: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: ({ spacing }) => spacing(0.5),
+      overflowX: 'auto',
+      scrollbarWidth: 'none',
+      paddingX: ({ spacing }) => spacing(1),
+
+      '&.inline': {
+        overflowX: 'visible',
+        flexWrap: 'wrap',
+      },
+    },
+    chip: {
+      marginRight: ({ spacing }) => spacing(0.5),
+    },
+    disabled: {
+      opacity: ({ palette }) => palette.action.disabledOpacity,
+    },
+  },
+} satisfies Record<string, SxProps<Theme>>

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

@@ -0,0 +1,34 @@
+import { KeyboardReturnOutlined } from '@mui/icons-material'
+import type { JSX } from 'react'
+import { LassoToolbarButtonUI } from '../button'
+import { ICON_SIZE } from '../styles'
+
+export const ACCEPT_ACTION_LABELS = {
+  accept: 'Accept',
+} as const
+
+export interface AcceptActionProps {
+  disabled?: boolean
+  label?: string
+  /** Keyboard-shortcut hint appended to the tooltip, e.g. `"↵"`. */
+  shortcut?: string
+  onAccept: () => void
+}
+
+/** Confirms the in-progress operation (equivalent to Enter). */
+export function AcceptAction({
+  disabled = false,
+  label,
+  shortcut,
+  onAccept,
+}: AcceptActionProps): JSX.Element {
+  return (
+    <LassoToolbarButtonUI
+      label={label ?? ACCEPT_ACTION_LABELS.accept}
+      shortcut={shortcut}
+      disabled={disabled}
+      onClick={onAccept}
+      icon={<KeyboardReturnOutlined sx={{ fontSize: ICON_SIZE }} />}
+    />
+  )
+}

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

@@ -0,0 +1,103 @@
+import { ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material'
+import { useState, type JSX, type MouseEvent, type ReactNode } from 'react'
+import { LassoToolbarButtonUI } from '../button'
+
+export interface ActionMenuOption<V extends string> {
+  value: V
+  label: string
+  icon?: ReactNode
+  disabled?: boolean
+  /**
+   * When set, called instead of `onChange` (e.g. open a native color picker).
+   * The menu still closes.
+   */
+  onSelect?: () => void
+}
+
+export interface ActionMenuProps<V extends string> {
+  /** Tooltip and `aria-label` of the trigger button. */
+  label: string
+  icon: ReactNode
+  disabled?: boolean
+  value: V
+  options: ActionMenuOption<V>[]
+  onChange: (value: V) => void
+  /**
+   * Keep the Menu in the same DOM tree as its trigger (needed when nested
+   * inside a Popover so picking a color doesn't dismiss the parent).
+   */
+  disablePortal?: boolean
+}
+
+/** Internal: toolbar button that opens a single-select options menu. */
+export function ActionMenu<V extends string>({
+  label,
+  icon,
+  disabled = false,
+  value,
+  options,
+  onChange,
+  disablePortal = false,
+}: ActionMenuProps<V>): JSX.Element {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const open = Boolean(anchorEl)
+
+  return (
+    <>
+      <LassoToolbarButtonUI
+        label={label}
+        active={open}
+        disabled={disabled}
+        aria-haspopup='menu'
+        aria-expanded={open || undefined}
+        onClick={(event) => setAnchorEl(event.currentTarget)}
+        icon={icon}
+      />
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={() => setAnchorEl(null)}
+        disablePortal={disablePortal}
+        // Nested menus inside a Popover: don't steal focus / blur the name field
+        // in a way that closes the parent via outside-click heuristics.
+        disableAutoFocus={disablePortal}
+        disableEnforceFocus={disablePortal}
+        disableRestoreFocus={disablePortal}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        slotProps={
+          disablePortal
+            ? {
+                root: {
+                  onMouseDown: (event: MouseEvent) => {
+                    event.stopPropagation()
+                  },
+                },
+              }
+            : undefined
+        }
+      >
+        {options.map((option) => (
+          <MenuItem
+            key={option.value}
+            disabled={!!option.disabled}
+            selected={option.value === value}
+            onClick={() => {
+              if (option.onSelect) {
+                option.onSelect()
+              } else {
+                onChange(option.value)
+              }
+              setAnchorEl(null)
+            }}
+          >
+            {option.icon && (
+              <ListItemIcon sx={{ minWidth: 24 }}>{option.icon}</ListItemIcon>
+            )}
+            <ListItemText>{option.label}</ListItemText>
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  )
+}

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

@@ -0,0 +1,34 @@
+import { CloseOutlined } from '@mui/icons-material'
+import type { JSX } from 'react'
+import { LassoToolbarButtonUI } from '../button'
+import { ICON_SIZE } from '../styles'
+
+export const CANCEL_ACTION_LABELS = {
+  cancel: 'Cancel',
+} as const
+
+export interface CancelActionProps {
+  disabled?: boolean
+  label?: string
+  /** Keyboard-shortcut hint appended to the tooltip, e.g. `"Esc"`. */
+  shortcut?: string
+  onCancel: () => void
+}
+
+/** Discards the in-progress operation (equivalent to Escape). */
+export function CancelAction({
+  disabled = false,
+  label,
+  shortcut,
+  onCancel,
+}: CancelActionProps): JSX.Element {
+  return (
+    <LassoToolbarButtonUI
+      label={label ?? CANCEL_ACTION_LABELS.cancel}
+      shortcut={shortcut}
+      disabled={disabled}
+      onClick={onCancel}
+      icon={<CloseOutlined sx={{ fontSize: ICON_SIZE }} />}
+    />
+  )
+}

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

@@ -0,0 +1,201 @@
+import { Box } from '@mui/material'
+import { useRef, type JSX } from 'react'
+import type { LassoDrawColor, LassoDrawColorPreset } from '../../types'
+import { ActionMenu } from './action-menu'
+
+/** Hex presets for `draw` colors (CARTO qualitative Pastel scheme, from Figma). */
+export const LASSO_DRAW_COLOR_HEX: Record<LassoDrawColorPreset, string> = {
+  yellow: '#F6CF71',
+  orange: '#F89C74',
+  purple: '#DCB0F2',
+  pink: '#FE88B1',
+  green: '#8BE0A4',
+  brown: '#D3B484',
+  black: '#2C3032',
+  white: '#FFFFFF',
+} as const
+
+export const COLOR_ACTION_LABELS = {
+  tooltip: 'Color',
+  options: {
+    yellow: 'Yellow',
+    orange: 'Orange',
+    purple: 'Purple',
+    pink: 'Pink',
+    green: 'Green',
+    brown: 'Brown',
+    black: 'Black',
+    white: 'White',
+    custom: 'Custom',
+  },
+} as const
+
+const COLOR_VALUES = Object.keys(LASSO_DRAW_COLOR_HEX) as LassoDrawColorPreset[]
+
+const CUSTOM_MENU_VALUE = 'custom' as const
+
+type ColorMenuValue = LassoDrawColorPreset | typeof CUSTOM_MENU_VALUE
+
+/** True when `color` is a named preset (not a freeform hex). */
+export function isLassoDrawColorPreset(
+  color: string,
+): color is LassoDrawColorPreset {
+  return Object.prototype.hasOwnProperty.call(LASSO_DRAW_COLOR_HEX, color)
+}
+
+/**
+ * Canonical `#rrggbb` lowercase, or `undefined` if not a valid 3/6-digit hex.
+ */
+export function normalizeHex(raw: string): string | undefined {
+  const trimmed = raw.trim()
+  const hex6 = /^#?([0-9a-fA-F]{6})$/.exec(trimmed)
+  if (hex6) return `#${hex6[1]!.toLowerCase()}`
+  const hex3 = /^#?([0-9a-fA-F]{3})$/.exec(trimmed)
+  if (hex3) {
+    const [a, b, c] = hex3[1]!
+    return `#${a}${a}${b}${b}${c}${c}`.toLowerCase()
+  }
+  return undefined
+}
+
+function toPickerHex(color: LassoDrawColor): string {
+  if (isLassoDrawColorPreset(color)) {
+    return LASSO_DRAW_COLOR_HEX[color].toLowerCase()
+  }
+  return normalizeHex(color) ?? '#000000'
+}
+
+export interface ColorActionProps {
+  value: LassoDrawColor
+  disabled?: boolean
+  labels?: {
+    tooltip?: string
+    options?: Partial<Record<LassoDrawColorPreset | 'custom', string>>
+  }
+  onChange: (value: LassoDrawColor) => void
+  /**
+   * Keep the color Menu inside its parent Popover (Label presentation row).
+   * @default false
+   */
+  disablePortal?: boolean
+}
+
+export function ColorDot({
+  color,
+  size = 14,
+}: {
+  color: LassoDrawColor
+  size?: number
+}): JSX.Element {
+  const backgroundColor = isLassoDrawColorPreset(color)
+    ? LASSO_DRAW_COLOR_HEX[color]
+    : (normalizeHex(color) ?? '#cccccc')
+
+  return (
+    <Box
+      component='span'
+      sx={{
+        display: 'inline-block',
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        backgroundColor,
+        border: ({ palette }) => `1px solid ${palette.divider}`,
+      }}
+    />
+  )
+}
+
+function CustomColorDot({ size = 12 }: { size?: number }): JSX.Element {
+  return (
+    <Box
+      component='span'
+      sx={{
+        display: 'inline-block',
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        background:
+          'conic-gradient(red, yellow, lime, aqua, blue, magenta, red)',
+        border: ({ palette }) => `1px solid ${palette.divider}`,
+      }}
+    />
+  )
+}
+
+/** Color picker for `draw` geometries: dot of the current color + preset menu. */
+export function ColorAction({
+  value,
+  disabled = false,
+  labels,
+  onChange,
+  disablePortal = false,
+}: ColorActionProps): JSX.Element {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const menuValue: ColorMenuValue = isLassoDrawColorPreset(value)
+    ? value
+    : CUSTOM_MENU_VALUE
+
+  const openNativePicker = () => {
+    // Close the MUI Menu first, then open the native dialog on the next tick
+    // so focus/z-index fights don't swallow the picker.
+    window.setTimeout(() => {
+      const input = inputRef.current
+      if (!input) return
+      input.value = toPickerHex(value)
+      input.click()
+    }, 0)
+  }
+
+  return (
+    <>
+      <ActionMenu
+        label={labels?.tooltip ?? COLOR_ACTION_LABELS.tooltip}
+        icon={<ColorDot color={value} />}
+        disabled={disabled}
+        value={menuValue}
+        disablePortal={disablePortal}
+        options={[
+          ...COLOR_VALUES.map((color) => ({
+            value: color as ColorMenuValue,
+            label:
+              labels?.options?.[color] ?? COLOR_ACTION_LABELS.options[color],
+            icon: <ColorDot color={color} size={12} />,
+          })),
+          {
+            value: CUSTOM_MENU_VALUE,
+            label:
+              labels?.options?.custom ?? COLOR_ACTION_LABELS.options.custom,
+            icon: <CustomColorDot />,
+            onSelect: openNativePicker,
+          },
+        ]}
+        onChange={(next) => {
+          if (next === CUSTOM_MENU_VALUE) return
+          onChange(next)
+        }}
+      />
+      <Box
+        component='input'
+        ref={inputRef}
+        type='color'
+        aria-hidden
+        tabIndex={-1}
+        defaultValue={toPickerHex(value)}
+        onChange={(event) => {
+          const hex = normalizeHex(event.currentTarget.value)
+          if (hex) onChange(hex)
+        }}
+        sx={{
+          position: 'fixed',
+          width: 0,
+          height: 0,
+          opacity: 0,
+          pointerEvents: 'none',
+          border: 0,
+          padding: 0,
+        }}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,31 @@
+import { DeleteOutlined } from '@mui/icons-material'
+import type { JSX } from 'react'
+import { LassoToolbarButtonUI } from '../button'
+import { ICON_SIZE } from '../styles'
+
+export const DELETE_ACTION_LABELS = {
+  delete: 'Delete',
+} as const
+
+export interface DeleteActionProps {
+  disabled?: boolean
+  label?: string
+  onDelete: () => void
+}
+
+/** Destructive delete action (error color). */
+export function DeleteAction({
+  disabled = false,
+  label,
+  onDelete,
+}: DeleteActionProps): JSX.Element {
+  return (
+    <LassoToolbarButtonUI
+      label={label ?? DELETE_ACTION_LABELS.delete}
+      disabled={disabled}
+      onClick={onDelete}
+      icon={<DeleteOutlined sx={{ fontSize: ICON_SIZE }} />}
+      color='error'
+    />
+  )
+}

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

@@ -0,0 +1,30 @@
+import { ContentCopyOutlined } from '@mui/icons-material'
+import type { JSX } from 'react'
+import { LassoToolbarButtonUI } from '../button'
+import { ICON_SIZE } from '../styles'
+
+export const DUPLICATE_ACTION_LABELS = {
+  duplicate: 'Duplicate',
+} as const
+
+export interface DuplicateActionProps {
+  disabled?: boolean
+  label?: string
+  onDuplicate: () => void
+}
+
+/** Duplicates the selected geometries (slightly offset copies). */
+export function DuplicateAction({
+  disabled = false,
+  label,
+  onDuplicate,
+}: DuplicateActionProps): JSX.Element {
+  return (
+    <LassoToolbarButtonUI
+      label={label ?? DUPLICATE_ACTION_LABELS.duplicate}
+      disabled={disabled}
+      onClick={onDuplicate}
+      icon={<ContentCopyOutlined sx={{ fontSize: ICON_SIZE }} />}
+    />
+  )
+}

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

@@ -0,0 +1,44 @@
+import { SvgIcon } from '@mui/material'
+import type { JSX } from 'react'
+import { DrawPolygonIcon } from '../../icons'
+import { LassoToolbarButtonUI } from '../button'
+import { ICON_SIZE } from '../styles'
+
+export const EDIT_GEOMETRY_ACTION_LABELS = {
+  editGeometry: 'Edit geometry',
+} as const
+
+export interface EditGeometryActionProps {
+  /** Highlight while an edit session is running. */
+  active?: boolean
+  disabled?: boolean
+  label?: string
+  onEditGeometry: () => void
+}
+
+/** Starts a geometry-edit session (vertices + translate) on the selection. */
+export function EditGeometryAction({
+  active = false,
+  disabled = false,
+  label,
+  onEditGeometry,
+}: EditGeometryActionProps): JSX.Element {
+  return (
+    <LassoToolbarButtonUI
+      label={label ?? EDIT_GEOMETRY_ACTION_LABELS.editGeometry}
+      active={active}
+      pressed={active}
+      disabled={disabled}
+      onClick={onEditGeometry}
+      // Figma 6985:35312 is the polygon-vertices glyph — the same shape as the
+      // drawing tool's, so it is reused instead of duplicating the path.
+      icon={
+        <SvgIcon
+          component={DrawPolygonIcon}
+          inheritViewBox
+          sx={{ fontSize: ICON_SIZE }}
+        />
+      }
+    />
+  )
+}