@carto/ps-react-ui 4.13.0 → 4.14.0

package/src/components/lasso-tool/geometry-toolbar.tsx

@@ -0,0 +1,258 @@
+import { DeleteOutlined, LockOutlined } from '@mui/icons-material'
+import {
+  Box,
+  Divider,
+  IconButton,
+  Paper,
+  Popover,
+  SvgIcon,
+  TextField,
+  type SxProps,
+  type Theme,
+} from '@mui/material'
+import {
+  useRef,
+  useState,
+  type JSX,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from 'react'
+import { Tooltip } from '../tooltip/tooltip'
+import { SpatialMaskIcon, TextAaIcon } from './icons'
+import type { LassoGeometryToolbarUIProps } from './types'
+
+const ICON_SIZE = 18
+
+const containerSx = {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  width: 'fit-content',
+  gap: ({ spacing }) => spacing(0.5),
+  p: ({ spacing }) => spacing(0.5),
+  borderRadius: ({ spacing }) => spacing(0.5),
+  backgroundColor: ({ palette }) => palette.background.paper,
+} satisfies SxProps<Theme>
+
+const baseButtonSx = {
+  p: ({ spacing }) => spacing(0.375),
+  borderRadius: ({ spacing }) => spacing(0.5),
+  '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
+    borderRadius: ({ spacing }) => spacing(0.5),
+  },
+} satisfies SxProps<Theme>
+
+/** Active = Figma toggle "selected" treatment (primary tint); inactive = gray. */
+const toggleButtonSx = (active: boolean): SxProps<Theme> => ({
+  ...baseButtonSx,
+  color: ({ palette }) =>
+    active ? palette.primary.main : palette.text.secondary,
+  backgroundColor: active ? 'rgba(3, 111, 226, 0.08)' : 'transparent',
+  '&:hover': {
+    backgroundColor: ({ palette }) =>
+      active ? 'rgba(3, 111, 226, 0.12)' : palette.action.hover,
+  },
+})
+
+/**
+ * Contextual toolbar for a single lasso geometry: toggle mask/draw, rename,
+ * lock, and delete. Purely presentational — position it over the map and wire
+ * the callbacks to the lasso store (see `LassoTools.GeometryToolbar` in
+ * `@carto/ps-react-maps`).
+ *
+ * Each button keeps a fixed icon and toggles an active highlight: the mask
+ * button is active when `type === 'mask'`, the lock button is active when
+ * `locked`. When `locked`, every action but the lock toggle is disabled.
+ */
+export function LassoGeometryToolbarUI({
+  type,
+  label,
+  locked = false,
+  onToggleType,
+  onRename,
+  onToggleLock,
+  onDelete,
+  labels,
+  PaperProps: { sx, ...PaperProps } = {},
+}: LassoGeometryToolbarUIProps): JSX.Element {
+  const paperRef = useRef<HTMLDivElement>(null)
+  // Guards `onRename` to once per rename session — the Popover `onClose` and the
+  // 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 [barWidth, setBarWidth] = useState<number>()
+  const [draft, setDraft] = useState(label)
+
+  const renaming = Boolean(anchorEl)
+
+  const toggleTypeLabel =
+    type === 'mask'
+      ? (labels?.toggleType?.draw ?? 'Switch to drawing')
+      : (labels?.toggleType?.mask ?? 'Switch to mask')
+  const renameLabel = labels?.rename ?? 'Rename'
+  const renameInputLabel = labels?.renameInput ?? renameLabel
+  const lockLabel = locked
+    ? (labels?.lock?.unlock ?? 'Unlock')
+    : (labels?.lock?.lock ?? 'Lock')
+  const deleteLabel = labels?.delete ?? 'Delete'
+
+  const openRename = () => {
+    committedRef.current = false
+    setDraft(label)
+    setBarWidth(paperRef.current?.clientWidth)
+    setAnchorEl(paperRef.current)
+  }
+
+  const commitRename = () => {
+    if (!committedRef.current) {
+      committedRef.current = true
+      const next = draft.trim()
+      if (next && next !== label) {
+        onRename(next)
+      }
+    }
+    setAnchorEl(null)
+  }
+
+  // Escape discards the edit: mark the session done so the unmount blur / onClose
+  // don't fire `onRename`.
+  const cancelRename = () => {
+    committedRef.current = true
+    setAnchorEl(null)
+  }
+
+  const handleRenameKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      commitRename()
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      cancelRename()
+    }
+  }
+
+  return (
+    <Paper
+      ref={paperRef}
+      elevation={6}
+      sx={{ ...containerSx, ...sx }}
+      {...PaperProps}
+    >
+      <ToolbarButton
+        label={toggleTypeLabel}
+        active={type === 'mask'}
+        pressed={type === 'mask'}
+        disabled={locked}
+        onClick={() => onToggleType(type === 'mask' ? 'draw' : 'mask')}
+        icon={
+          <SvgIcon
+            component={SpatialMaskIcon}
+            inheritViewBox
+            sx={{ fontSize: ICON_SIZE }}
+          />
+        }
+      />
+
+      <Divider orientation='vertical' flexItem />
+
+      <ToolbarButton
+        label={renameLabel}
+        active={renaming}
+        disabled={locked}
+        onClick={openRename}
+        icon={
+          <SvgIcon
+            component={TextAaIcon}
+            inheritViewBox
+            sx={{ fontSize: ICON_SIZE }}
+          />
+        }
+      />
+
+      <Divider orientation='vertical' flexItem />
+
+      <ToolbarButton
+        label={lockLabel}
+        active={locked}
+        pressed={locked}
+        onClick={() => onToggleLock(!locked)}
+        icon={<LockOutlined sx={{ fontSize: ICON_SIZE }} />}
+      />
+
+      <Divider orientation='vertical' flexItem />
+
+      <ToolbarButton
+        label={deleteLabel}
+        disabled={locked}
+        onClick={onDelete}
+        icon={<DeleteOutlined sx={{ fontSize: ICON_SIZE }} />}
+        color='error'
+      />
+
+      <Popover
+        open={renaming}
+        anchorEl={anchorEl}
+        onClose={commitRename}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        slotProps={{
+          paper: {
+            sx: { width: barWidth, minWidth: 180 },
+          },
+        }}
+      >
+        <Box sx={{ p: 1 }}>
+          <TextField
+            inputRef={(node: HTMLInputElement | null) => node?.focus()}
+            fullWidth
+            label={renameInputLabel}
+            size='small'
+            variant='outlined'
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={handleRenameKeyDown}
+            onBlur={commitRename}
+          />
+        </Box>
+      </Popover>
+    </Paper>
+  )
+}
+
+function ToolbarButton({
+  label,
+  icon,
+  active = false,
+  pressed,
+  disabled = false,
+  color,
+  onClick,
+}: {
+  label: string
+  icon: ReactNode
+  active?: boolean
+  /** When set, exposes `aria-pressed` so the button reads as a toggle. */
+  pressed?: boolean
+  disabled?: boolean
+  color?: 'error'
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void
+}): ReactNode {
+  return (
+    <Tooltip title={label} placement='top'>
+      <span>
+        <IconButton
+          aria-label={label}
+          aria-pressed={pressed}
+          disabled={disabled}
+          color={color}
+          onClick={onClick}
+          sx={color ? baseButtonSx : toggleButtonSx(active)}
+        >
+          {icon}
+        </IconButton>
+      </span>
+    </Tooltip>
+  )
+}

package/src/components/lasso-tool/icons.tsx

@@ -89,3 +89,43 @@ export function SelectToolIcon(props: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
+
+/** Spatial-mask glyph (circle with horizontal "globe" stripes) for the lasso
+ * geometry toolbar's mask/draw toggle. From Figma node 5960:14347. */
+export function SpatialMaskIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 15 15'
+      {...props}
+    >
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M15 7.5C15 11.6421 11.6421 15 7.5 15C3.35786 15 0 11.6421 0 7.5C0 3.35786 3.35786 0 7.5 0C11.6421 0 15 3.35786 15 7.5ZM13.5 7.5C13.5 10.8137 10.8137 13.5 7.5 13.5C6.44531 13.5 5.45418 13.2279 4.59299 12.75H6.85607C7.29596 12.3013 7.67991 11.7975 7.99663 11.25H2.81597C2.62675 11.014 2.45501 10.7633 2.30269 10.5H8.37593C8.58402 10.0237 8.74407 9.52171 8.84997 9H1.68903C1.62614 8.75568 1.57826 8.50533 1.54642 8.25H8.96297C8.98746 8.00332 9 7.75312 9 7.5C9 7.24688 8.98746 6.99668 8.96297 6.75H1.54642C1.57826 6.49467 1.62614 6.24432 1.68903 6H8.84997C8.74407 5.47829 8.58402 4.97625 8.37593 4.5H2.30269C2.45501 4.2367 2.62675 3.98604 2.81597 3.75H7.99663C7.67991 3.20248 7.29596 2.69872 6.85607 2.25H4.59299C5.45418 1.77213 6.44531 1.5 7.5 1.5C10.8137 1.5 13.5 4.18629 13.5 7.5Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
+
+/** "Aa" glyph for the lasso geometry toolbar's rename action. From Figma node
+ * 5960:14347. */
+export function TextAaIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 15.877 10.6875'
+      {...props}
+    >
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M5.4 0L9.18 10.5H7.56L6.72 8.085H2.475L1.62 10.5H0L3.795 0H5.4ZM4.605 1.95C4.515 2.31 4.395 2.705 4.245 3.135L2.955 6.705H6.24L4.965 3.135C4.785 2.645 4.665 2.25 4.605 1.95ZM12.9247 2.5875C13.3083 2.5875 13.6514 2.6203 13.9542 2.68591C14.257 2.75152 14.5649 2.87769 14.8778 3.06442C15.1907 3.25114 15.4355 3.55143 15.6121 3.96526C15.7887 4.37909 15.877 4.88881 15.877 5.49442V10.5058H14.363V9.83965C13.818 10.4049 13.1114 10.6875 12.2434 10.6875C11.4258 10.6875 10.7622 10.4629 10.2525 10.0138C9.74275 9.5646 9.48789 8.92619 9.48789 8.09853C9.48789 7.26077 9.77555 6.62488 10.3509 6.19086C10.9262 5.75685 11.6277 5.53984 12.4554 5.53984C13.2124 5.53984 13.8483 5.69124 14.363 5.99404V5.57012C14.363 4.99479 14.2318 4.586 13.9694 4.34376C13.707 4.10152 13.2881 3.9804 12.7127 3.9804C11.8649 3.9804 11.1281 4.21255 10.5023 4.67685L10.0329 3.38993C10.8101 2.85498 11.7741 2.5875 12.9247 2.5875ZM12.7127 6.90245C12.2081 6.90245 11.7968 7.00086 11.4788 7.19769C11.1609 7.39451 11.0019 7.69479 11.0019 8.09853C11.0019 8.47199 11.1331 8.7647 11.3955 8.97666C11.658 9.18862 12.0365 9.2946 12.5311 9.2946C13.2578 9.2946 13.8684 9.01703 14.363 8.46189V7.28096C13.8886 7.02862 13.3385 6.90245 12.7127 6.90245Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

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

@@ -1,4 +1,8 @@
-import { ArrowDropDown, MoreVertOutlined } from '@mui/icons-material'
+import {
+  ArrowDropDown,
+  LayersOutlined,
+  MoreVertOutlined,
+} from '@mui/icons-material'
 import {
   Box,
   Divider,
@@ -73,6 +77,7 @@ export function LassoToolsUI({
   onChangeMode,
   onAllChipToggle,
   onAllDelete,
+  onLayerFilters,
   ChipsSlot = LassoToolsUI.Chips,
   ActionSlot = LassoToolsUI.Action,
   SecondaryActionsSlot = LassoToolsUI.SecondaryActions,
@@ -94,6 +99,7 @@ export function LassoToolsUI({
     onChangeMode,
     onAllChipToggle,
     onAllDelete,
+    onLayerFilters,
   }
   return (
     <Paper
@@ -506,6 +512,24 @@ LassoToolsUI.Options = function OptionsWrapper({
           />
         </>
       )}
+      {!!props.onLayerFilters && (
+        <>
+          <Divider />
+          <MenuItem
+            onClick={() => {
+              props.onLayerFilters?.()
+              props.onClose()
+            }}
+          >
+            <ListItemIcon sx={styles.options.icons}>
+              <LayersOutlined />
+            </ListItemIcon>
+            <ListItemText>
+              {labels?.options?.layerFilters ?? 'Layer filters'}
+            </ListItemText>
+          </MenuItem>
+        </>
+      )}
     </>
   )
 }

package/src/components/lasso-tool/layer-filters.test.tsx

@@ -0,0 +1,90 @@
+/**
+ * Tests for the LassoLayerFiltersUI dialog — renders layer checkboxes from the
+ * committed selection, edits a draft, commits only on Apply (Cancel/close
+ * discards), supports "All selected" and search.
+ */
+import { describe, it, expect, vi } from 'vitest'
+import { render, fireEvent, screen, within } from '@testing-library/react'
+import { LassoLayerFiltersUI } from './layer-filters'
+
+const layers = [
+  { id: 'a', label: 'Blocks', checked: true },
+  { id: 'b', label: 'Roads', checked: false },
+]
+
+function setup(props: Partial<Parameters<typeof LassoLayerFiltersUI>[0]> = {}) {
+  const handlers = { onClose: vi.fn(), onApply: vi.fn() }
+  render(<LassoLayerFiltersUI open layers={layers} {...handlers} {...props} />)
+  return handlers
+}
+
+const dialog = () => screen.getByRole('dialog')
+
+describe('LassoLayerFiltersUI', () => {
+  it('renders the title and a checkbox per layer (+ All selected)', () => {
+    setup()
+    expect(screen.getByText('Layer Filters')).toBeDefined()
+    // 2 layers + the "All selected" master = 3 checkboxes.
+    expect(within(dialog()).getAllByRole('checkbox')).toHaveLength(3)
+  })
+
+  it('reflects the committed selection in the draft', () => {
+    setup()
+    expect(
+      within(dialog()).getByRole<HTMLInputElement>('checkbox', {
+        name: 'Blocks',
+      }).checked,
+    ).toBe(true)
+    expect(
+      within(dialog()).getByRole<HTMLInputElement>('checkbox', {
+        name: 'Roads',
+      }).checked,
+    ).toBe(false)
+  })
+
+  it('commits the edited selection only on Apply', () => {
+    const { onApply, onClose } = setup()
+    fireEvent.click(within(dialog()).getByRole('checkbox', { name: 'Roads' }))
+    // Not committed yet.
+    expect(onApply).not.toHaveBeenCalled()
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }))
+    expect(onApply).toHaveBeenCalledWith(['a', 'b'])
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  it('discards the draft on Cancel', () => {
+    const { onApply, onClose } = setup()
+    fireEvent.click(within(dialog()).getByRole('checkbox', { name: 'Blocks' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(onApply).not.toHaveBeenCalled()
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  it('"All selected" toggles every layer', () => {
+    const { onApply } = setup()
+    // Currently only "Blocks" checked → master is indeterminate; clicking selects all.
+    fireEvent.click(
+      within(dialog()).getByRole('checkbox', { name: 'All selected' }),
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }))
+    expect(onApply).toHaveBeenCalledWith(['a', 'b'])
+  })
+
+  it('filters the list by search text', () => {
+    setup()
+    fireEvent.change(within(dialog()).getByRole('textbox'), {
+      target: { value: 'road' },
+    })
+    expect(
+      within(dialog()).queryByRole('checkbox', { name: 'Blocks' }),
+    ).toBeNull()
+    expect(
+      within(dialog()).getByRole('checkbox', { name: 'Roads' }),
+    ).toBeDefined()
+  })
+
+  it('does not render when closed', () => {
+    setup({ open: false })
+    expect(screen.queryByRole('dialog')).toBeNull()
+  })
+})

package/src/components/lasso-tool/layer-filters.tsx

@@ -0,0 +1,236 @@
+import { Close, Search } from '@mui/icons-material'
+import {
+  Box,
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  IconButton,
+  InputBase,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+  type SxProps,
+  type Theme,
+} from '@mui/material'
+import { useId, useState, type JSX } from 'react'
+import type { LassoLayerFiltersUIProps } from './types'
+
+const titleSx = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 1,
+  p: 2,
+} satisfies SxProps<Theme>
+
+// One rounded group on the grey "default" background, holding the search row,
+// a divider, and the scrollable list (Figma node 5960-14780).
+const groupSx = {
+  borderRadius: ({ spacing }) => spacing(0.5),
+  overflow: 'hidden',
+  backgroundColor: ({ palette }) => palette.background.default,
+} satisfies SxProps<Theme>
+
+const searchSx = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 1,
+  height: 32,
+  px: 1.5,
+  color: ({ palette }) => palette.text.secondary,
+} satisfies SxProps<Theme>
+
+const rowSx = {
+  px: 2,
+  py: 0.5,
+} satisfies SxProps<Theme>
+
+const checkboxSlotSx = {
+  minWidth: 0,
+  mr: 1,
+} satisfies SxProps<Theme>
+
+/**
+ * "Layer filters" dialog: choose which map layers the lasso mask clips. The
+ * selection is a draft committed on Apply (Cancel/close discards it). Wire it
+ * to the lasso store via `LassoTools.LayerFilters` in `@carto/ps-react-maps`,
+ * and open it from the drawing-tool menu's "Layer filters" item
+ * (`LassoToolsUI` `onLayerFilters`).
+ */
+export function LassoLayerFiltersUI({
+  open,
+  onClose,
+  layers,
+  onApply,
+  labels,
+  DialogProps,
+}: LassoLayerFiltersUIProps): JSX.Element {
+  const labelId = useId()
+  const [draft, setDraft] = useState<Set<string>>(() => new Set())
+  const [search, setSearch] = useState('')
+
+  // Reset the draft from the committed selection when the dialog opens, by
+  // adjusting state during render (the React-recommended pattern — no effect,
+  // and later `layers` changes don't discard in-progress edits).
+  const [wasOpen, setWasOpen] = useState(false)
+  if (open !== wasOpen) {
+    setWasOpen(open)
+    if (open) {
+      setDraft(new Set(layers.filter((l) => l.checked).map((l) => l.id)))
+      setSearch('')
+    }
+  }
+
+  const title = labels?.title ?? 'Layer Filters'
+  const description =
+    labels?.description ??
+    'Select the layers you want to filter with this polygon'
+  const allSelectedLabel = labels?.allSelected ?? 'All selected'
+  const empty = labels?.empty ?? 'No layers to filter'
+
+  const allChecked = layers.length > 0 && layers.every((l) => draft.has(l.id))
+  const someChecked = layers.some((l) => draft.has(l.id))
+
+  const toggle = (id: string) =>
+    setDraft((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+
+  const toggleAll = () =>
+    setDraft(allChecked ? new Set() : new Set(layers.map((l) => l.id)))
+
+  const handleApply = () => {
+    // Emit ids in `layers` order (stable, diff-friendly), not Set-insertion order.
+    onApply(layers.filter((l) => draft.has(l.id)).map((l) => l.id))
+    onClose()
+  }
+
+  const normalized = search.trim().toLowerCase()
+  const filtered = normalized
+    ? layers.filter((l) => l.label.toLowerCase().includes(normalized))
+    : layers
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      maxWidth='xs'
+      fullWidth
+      {...DialogProps}
+    >
+      <DialogTitle component='div' sx={titleSx}>
+        <Typography variant='subtitle1' fontWeight={500}>
+          {title}
+        </Typography>
+        <IconButton aria-label='close' size='small' onClick={onClose}>
+          <Close fontSize='small' />
+        </IconButton>
+      </DialogTitle>
+
+      <DialogContent sx={{ pt: 1, px: 2, pb: 3 }}>
+        <Typography variant='body2' color='text.secondary' sx={{ mb: 2 }}>
+          {description}
+        </Typography>
+
+        <Box sx={groupSx}>
+          <Box sx={searchSx}>
+            <Search sx={{ fontSize: 18 }} />
+            <InputBase
+              fullWidth
+              placeholder={labels?.search ?? 'Search layers'}
+              inputProps={{ 'aria-label': labels?.search ?? 'Search layers' }}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              sx={{ fontSize: 13, color: 'text.primary' }}
+            />
+          </Box>
+          <Divider />
+          <List
+            component='div'
+            role='list'
+            disablePadding
+            sx={{
+              maxHeight: 240,
+              overflowY: 'auto',
+              // MUI gives dividers inside a List an 8px vertical margin; the
+              // "All selected" separator should sit flush like the rows.
+              '& .MuiDivider-root': { my: 0 },
+            }}
+          >
+            <ListItemButton dense sx={rowSx} onClick={toggleAll}>
+              <ListItemIcon sx={checkboxSlotSx}>
+                <Checkbox
+                  edge='start'
+                  tabIndex={-1}
+                  disableRipple
+                  sx={{ p: 0.5 }}
+                  checked={allChecked}
+                  indeterminate={!allChecked && someChecked}
+                  inputProps={{ 'aria-labelledby': `${labelId}-all` }}
+                />
+              </ListItemIcon>
+              <ListItemText
+                id={`${labelId}-all`}
+                primary={allSelectedLabel}
+                primaryTypographyProps={{ variant: 'body2' }}
+              />
+            </ListItemButton>
+            <Divider />
+            {filtered.length === 0 ? (
+              <Typography variant='body2' color='text.secondary' sx={{ p: 2 }}>
+                {empty}
+              </Typography>
+            ) : (
+              filtered.map((layer) => (
+                <ListItemButton
+                  key={layer.id}
+                  dense
+                  sx={rowSx}
+                  onClick={() => toggle(layer.id)}
+                >
+                  <ListItemIcon sx={checkboxSlotSx}>
+                    <Checkbox
+                      edge='start'
+                      tabIndex={-1}
+                      disableRipple
+                      sx={{ p: 0.5 }}
+                      checked={draft.has(layer.id)}
+                      inputProps={{
+                        'aria-labelledby': `${labelId}-${layer.id}`,
+                      }}
+                    />
+                  </ListItemIcon>
+                  <ListItemText
+                    id={`${labelId}-${layer.id}`}
+                    primary={layer.label}
+                    primaryTypographyProps={{
+                      variant: 'body2',
+                      noWrap: true,
+                      title: layer.label,
+                    }}
+                  />
+                </ListItemButton>
+              ))
+            )}
+          </List>
+        </Box>
+      </DialogContent>
+
+      <DialogActions sx={{ p: 2 }}>
+        <Button onClick={onClose}>{labels?.cancel ?? 'Cancel'}</Button>
+        <Button variant='contained' onClick={handleApply}>
+          {labels?.apply ?? 'Apply'}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

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

@@ -27,7 +27,7 @@ export const styles = {
   },
   options: {
     menu: {
-      paddingTop: ({ spacing }) => spacing(1),
+      paddingY: ({ spacing }) => spacing(1),
       '&.inline': {
         boxShadow: 'none',
         backgroundColor: 'transparent',