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

package/src/components/lasso-tool/toolbar/index.ts

@@ -0,0 +1,70 @@
+export type { LassoToolbarUIProps } from './toolbar'
+export type { LassoToolbarButtonUIProps } from './button'
+export type { ToggleTypeActionProps } from './actions/toggle-type-action'
+export type {
+  LabelActionProps,
+  LassoTextPresentation,
+} from './actions/label-action'
+export type { EditPropertiesActionProps } from './actions/edit-properties-action'
+export type { LockActionProps } from './actions/lock-action'
+export type { DeleteActionProps } from './actions/delete-action'
+export type { ColorActionProps } from './actions/color-action'
+export type { FillActionProps } from './actions/fill-action'
+export type { StrokeActionProps } from './actions/stroke-action'
+export type { UndoActionProps } from './actions/undo-action'
+export type { RedoActionProps } from './actions/redo-action'
+export type { EditGeometryActionProps } from './actions/edit-geometry-action'
+export type { UnionActionProps } from './actions/union-action'
+export type { SplitActionProps } from './actions/split-action'
+export type { SubtractActionProps } from './actions/subtract-action'
+export type { IntersectActionProps } from './actions/intersect-action'
+export type { DuplicateActionProps } from './actions/duplicate-action'
+export type { AcceptActionProps } from './actions/accept-action'
+export type { CancelActionProps } from './actions/cancel-action'
+
+export { LassoToolbarUI } from './toolbar'
+export { LassoToolbarButtonUI } from './button'
+export {
+  ToggleTypeAction,
+  TOGGLE_TYPE_ACTION_LABELS,
+} from './actions/toggle-type-action'
+export { LabelAction, LABEL_ACTION_LABELS } from './actions/label-action'
+export {
+  EditPropertiesAction,
+  EDIT_PROPERTIES_ACTION_LABELS,
+} from './actions/edit-properties-action'
+export { LockAction, LOCK_ACTION_LABELS } from './actions/lock-action'
+export { DeleteAction, DELETE_ACTION_LABELS } from './actions/delete-action'
+export {
+  ColorAction,
+  ColorDot,
+  COLOR_ACTION_LABELS,
+  LASSO_DRAW_COLOR_HEX,
+  isLassoDrawColorPreset,
+  normalizeHex,
+} from './actions/color-action'
+export { FillAction, FILL_ACTION_LABELS } from './actions/fill-action'
+export { StrokeAction, STROKE_ACTION_LABELS } from './actions/stroke-action'
+export { UndoAction, UNDO_ACTION_LABELS } from './actions/undo-action'
+export { RedoAction, REDO_ACTION_LABELS } from './actions/redo-action'
+export {
+  EditGeometryAction,
+  EDIT_GEOMETRY_ACTION_LABELS,
+} from './actions/edit-geometry-action'
+export { UnionAction, UNION_ACTION_LABELS } from './actions/union-action'
+export { SplitAction, SPLIT_ACTION_LABELS } from './actions/split-action'
+export {
+  SubtractAction,
+  SUBTRACT_ACTION_LABELS,
+} from './actions/subtract-action'
+export {
+  IntersectAction,
+  INTERSECT_ACTION_LABELS,
+} from './actions/intersect-action'
+export {
+  DuplicateAction,
+  DUPLICATE_ACTION_LABELS,
+} from './actions/duplicate-action'
+export { AcceptAction, ACCEPT_ACTION_LABELS } from './actions/accept-action'
+export { CancelAction, CANCEL_ACTION_LABELS } from './actions/cancel-action'
+export { ICON_SIZE } from './styles'

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

@@ -0,0 +1,42 @@
+import type { SxProps, Theme } from '@mui/material'
+
+/** Icon font-size shared by every toolbar action. */
+export const ICON_SIZE = 18
+
+const container = {
+  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 baseButton = {
+  p: ({ spacing }) => spacing(0.375),
+  borderRadius: ({ spacing }) => spacing(0.5),
+  '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
+    borderRadius: ({ spacing }) => spacing(0.5),
+  },
+  // ColorDot (and other non-currentColor icons) ignore `color: action.disabled`;
+  // opacity is what makes the swatch look disabled like SVG icons.
+  '&.Mui-disabled': {
+    opacity: ({ palette }) => palette.action.disabledOpacity,
+  },
+} satisfies SxProps<Theme>
+
+/** Active = Figma toggle "selected" treatment (primary tint); inactive = gray. */
+const toggleButton = (active: boolean): SxProps<Theme> => ({
+  ...baseButton,
+  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,
+  },
+})
+
+export const styles = { container, baseButton, toggleButton }

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

@@ -0,0 +1,77 @@
+/**
+ * Tests for the generic LassoToolbarUI container: children composition,
+ * PaperProps threading and the `ref` forwarding the geometry toolbar relies on
+ * to anchor the rename popover.
+ */
+import { describe, it, expect } from 'vitest'
+import { createRef } from 'react'
+import { render, screen } from '@testing-library/react'
+import { LassoToolbarUI } from './toolbar'
+
+describe('LassoToolbarUI', () => {
+  it('renders its children inside a Paper', () => {
+    const { container } = render(
+      <LassoToolbarUI>
+        <button>action</button>
+      </LassoToolbarUI>,
+    )
+
+    expect(container.querySelector('.MuiPaper-root')).not.toBeNull()
+    expect(screen.getByRole('button', { name: 'action' })).toBeDefined()
+  })
+
+  it('attaches `ref` to the Paper element', () => {
+    const ref = createRef<HTMLDivElement>()
+
+    const { container } = render(
+      <LassoToolbarUI ref={ref}>
+        <button>action</button>
+      </LassoToolbarUI>,
+    )
+
+    // The rename popover sizes itself from this node, so a detached ref would
+    // silently break its width.
+    expect(ref.current).not.toBeNull()
+    expect(ref.current).toBe(container.querySelector('.MuiPaper-root'))
+  })
+
+  it('rejects a ref smuggled through PaperProps (it would replace the internal one)', () => {
+    const internal = createRef<HTMLDivElement>()
+    const smuggled = createRef<HTMLDivElement>()
+
+    render(
+      <LassoToolbarUI
+        ref={internal}
+        // React 19 exposes `ref` as a regular prop, and the PaperProps spread
+        // runs after `ref={ref}` — the type must reject it so the
+        // toolbar-controlled ref can't be silently replaced.
+        // @ts-expect-error -- 'ref' is deliberately omitted from PaperProps
+        PaperProps={{ ref: smuggled }}
+      >
+        <button>action</button>
+      </LassoToolbarUI>,
+    )
+  })
+
+  it('threads PaperProps onto the Paper', () => {
+    const { container } = render(
+      <LassoToolbarUI PaperProps={{ 'data-testid': 'bar' } as never}>
+        <button>action</button>
+      </LassoToolbarUI>,
+    )
+
+    expect(container.querySelector('[data-testid="bar"]')).not.toBeNull()
+  })
+
+  it('renders a vertical divider slot', () => {
+    const { container } = render(
+      <LassoToolbarUI>
+        <button>a</button>
+        <LassoToolbarUI.Divider />
+        <button>b</button>
+      </LassoToolbarUI>,
+    )
+
+    expect(container.querySelector('.MuiDivider-vertical')).not.toBeNull()
+  })
+})

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

@@ -0,0 +1,50 @@
+import { Divider, Paper } from '@mui/material'
+import type { ComponentProps, JSX, PropsWithChildren, Ref } from 'react'
+import { mergeSx } from '../styles'
+import { styles } from './styles'
+
+export interface LassoToolbarUIProps extends PropsWithChildren {
+  /**
+   * `ref` excluded: in React 19 it travels as a regular prop inside
+   * `ComponentProps`, and the spread below would silently replace the
+   * toolbar-controlled `ref` (which e.g. anchors the rename popover in
+   * `LassoGeometryToolbarUI`). Use the toolbar's own `ref` prop instead.
+   */
+  PaperProps?: Omit<ComponentProps<typeof Paper>, 'ref'>
+  ref?: Ref<HTMLDivElement>
+}
+
+/**
+ * Generic floating toolbar for lasso actions: a `Paper` row hosting
+ * self-contained action buttons (see `toolbar/actions`). Compose any mix of
+ * actions and dividers:
+ *
+ * @example
+ * ```tsx
+ * <LassoToolbarUI>
+ *   <LabelAction label={label} onRename={onRename} onSetTextPresentation={...} />
+ *   <LassoToolbarUI.Divider />
+ *   <DeleteAction onDelete={onDelete} />
+ * </LassoToolbarUI>
+ * ```
+ */
+export function LassoToolbarUI({
+  children,
+  PaperProps: { sx, ...PaperProps } = {},
+  ref,
+}: LassoToolbarUIProps): JSX.Element {
+  return (
+    <Paper
+      ref={ref}
+      elevation={6}
+      sx={mergeSx(styles.container, sx)}
+      {...PaperProps}
+    >
+      {children}
+    </Paper>
+  )
+}
+
+LassoToolbarUI.Divider = function LassoToolbarUIDivider(): JSX.Element {
+  return <Divider orientation='vertical' flexItem />
+}

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

@@ -0,0 +1,47 @@
+import { createContext, useContext, type ReactNode } from 'react'
+import type { LassoToolsUIContextValue } from './types'
+
+/**
+ * The props `LassoToolsUI` / `LassoToolsInlineUI` publish for compound blocks.
+ *
+ * Pinned to the default mode union on purpose: the shells themselves are not
+ * generic (their context values are typed with `M = LassoToolsMode`), and
+ * widening this alone — e.g. to `LassoToolsUIContextValue<string>` — does not
+ * compile: `onChangeMode: (mode: LassoToolsMode) => void` is not assignable to
+ * `(mode: string) => void` (parameter contravariance). Supporting custom mode
+ * unions end-to-end means making the shell and its blocks generic.
+ */
+const LassoToolsUIContext = createContext<LassoToolsUIContextValue | null>(null)
+
+export function LassoToolsUIProvider({
+  value,
+  children,
+}: {
+  value: LassoToolsUIContextValue
+  children: ReactNode
+}) {
+  return (
+    <LassoToolsUIContext.Provider value={value}>
+      {children}
+    </LassoToolsUIContext.Provider>
+  )
+}
+
+/**
+ * Merges a block's own props over the toolbar's context, so the blocks work
+ * both ways: with explicit props, or written bare as children
+ * (`<LassoToolsUI.Chips />`). Explicit props always win.
+ */
+export function useLassoToolsUIArgs<T extends LassoToolsUIContextValue>(
+  props: T,
+): T & LassoToolsUIContextValue {
+  const context = useContext(LassoToolsUIContext)
+
+  if (!context) return props
+
+  const defined = Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== undefined),
+  ) as T
+
+  return { ...context, ...defined }
+}

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

@@ -0,0 +1,384 @@
+import type {
+  AlertColor,
+  AlertProps,
+  Box,
+  ChipProps,
+  DialogProps,
+  Paper,
+  SnackbarProps,
+  TooltipProps,
+} from '@mui/material'
+import type { ComponentProps, ReactNode } from 'react'
+import type {
+  LassoToolsMode,
+  LassoToolsModes,
+  LassoToolOptionsMode,
+  LassoToolsModesMapping,
+} from '../types'
+
+export interface LassoToolsData {
+  id: string
+  label: string
+  visible?: boolean
+  /** When locked, the chip shows a padlock icon instead of the mask glyph. */
+  locked?: boolean
+  /** `mask` (default) shows the mask glyph; `draw` chips have no icon unless locked. */
+  type?: LassoGeometryType
+}
+
+export type LassoGeometryType = 'mask' | 'draw'
+
+/** Preset color names for `draw` geometries (CARTO qualitative Pastel scheme). */
+export type LassoDrawColorPreset =
+  | 'yellow'
+  | 'orange'
+  | 'purple'
+  | 'pink'
+  | 'green'
+  | 'brown'
+  | 'black'
+  | 'white'
+
+/**
+ * Draw / map-label color: a named preset, or a freeform hex string (`#rrggbb`)
+ * from the Custom color picker. `string & {}` keeps presets visible to
+ * IntelliSense without collapsing the union to plain `string`.
+ */
+export type LassoDrawColor = LassoDrawColorPreset | (string & {})
+
+export type LassoDrawFill = 'filled' | 'opacity' | 'none'
+
+export type LassoDrawStroke = 'thick' | 'default' | 'thin' | 'none'
+
+/** Visual style of a `draw` geometry. */
+export interface LassoDrawStyle {
+  color: LassoDrawColor
+  fill: LassoDrawFill
+  stroke: LassoDrawStroke
+}
+
+interface LassoToolsComponentBaseProps<M extends string = LassoToolsMode> {
+  enabled: boolean
+  modes: Partial<LassoToolsModes<M>>
+  modesMapping: Partial<LassoToolsModesMapping<M>>
+  values: LassoToolsData[]
+  labels?: {
+    action?: {
+      tooltip?: {
+        active?: string
+        inactive?: string
+      }
+    }
+    chip?: {
+      tooltip?: {
+        active?: string
+        inactive?: string
+      }
+    }
+    options?: {
+      mode?: {
+        title?: string
+        options?: LassoToolOptionsMode<LassoToolsMode>
+      }
+      interactionMode?: {
+        title?: string
+        mask?: string
+        draw?: string
+      }
+      selection?: {
+        /** Heading of the "Selection tools" menu section. */
+        title?: string
+      }
+      /** Label for the optional "Layer filters" menu item. */
+      layerFilters?: string
+    }
+    noData?: {
+      title?: string
+      description?: string
+    }
+    actions: {
+      toggleAll?: {
+        active?: string
+        inactive?: string
+      }
+      deleteAll?: string
+      /** Accessible name of the secondary-actions "⋮" trigger. */
+      more?: string
+    }
+    undoRedo?: {
+      undo?: string
+      redo?: string
+    }
+  }
+  chipProps?: {
+    // `Partial` + no `children`: MUI's TooltipProps requires both, so the
+    // type would be unusable without casts for a caller passing only e.g.
+    // `placement` (the component supplies title/children itself).
+    TooltipProps?: Partial<Omit<TooltipProps, 'title' | 'children'>>
+    ChipsProps?: Omit<ChipProps, 'label' | 'onDelete'>
+  }
+  modeSelected?: M | null
+  /**
+   * When provided together with `onChangeInteractionMode`, the options menu
+   * shows an "Interaction mode" radio section (Mask/Draw) at the top.
+   */
+  interactionMode?: LassoGeometryType
+  onChangeInteractionMode?: (mode: LassoGeometryType) => void
+  /** Disables the Mask radio while e.g. the text draw mode is active. */
+  interactionModeMaskDisabled?: boolean
+  onChangeMode: (mode: M) => void
+  onChipToggle: (id: LassoToolsData['id'], data: boolean) => void
+  onDelete: (id: LassoToolsData['id']) => void
+  onAllChipToggle: () => void
+  onAllDelete: () => void
+  /**
+   * When provided, the drawing-tool menu shows a "Layer filters" item at the
+   * bottom that calls this (e.g. to open the {@link LassoLayerFiltersUI} dialog).
+   * The trigger lives in the menu; the dialog is a separate component.
+   */
+  onLayerFilters?: () => void
+  /**
+   * Undo/redo block: rendered by `.UndoRedo` (while `enabled`) when both
+   * `onUndo` and `onRedo` are provided.
+   */
+  canUndo?: boolean
+  canRedo?: boolean
+  onUndo?: () => void
+  onRedo?: () => void
+  /** Keyboard-shortcut hints appended to the undo/redo tooltips. */
+  shortcuts?: { undo?: string; redo?: string }
+}
+
+export interface LassoToolsComponentProps<
+  M extends string = LassoToolsMode,
+> extends LassoToolsComponentBaseProps<M> {
+  /**
+   * The blocks this toolbar has, in render order (`LassoToolsUI.Action`,
+   * `.OptionsMenu`, `.UndoRedo`, `.Chips`, `.SecondaryActions`). Required —
+   * without `children` the shell renders empty chrome. See
+   * `stories/modules/lasso/lasso-tools-toolbar.tsx` for the full CARTO design.
+   */
+  children: ReactNode
+  actionProps?: {
+    // See `chipProps.TooltipProps` for the Partial + no-children rationale.
+    TooltipProps?: Partial<Omit<TooltipProps, 'title' | 'children'>>
+  }
+  PaperProps?: ComponentProps<typeof Paper>
+  onActionToggle: (data: boolean) => void
+}
+
+/**
+ * Wiring props the shell publishes on context for compound blocks. Partial so
+ * blocks work when only a subset of handlers is present (they self-null).
+ */
+export type LassoToolsUIContextValue<M extends string = LassoToolsMode> =
+  Partial<Omit<LassoToolsComponentProps<M>, 'children'>>
+
+export interface LassoToolsInlineComponentProps<
+  M extends string = LassoToolsMode,
+> extends LassoToolsComponentBaseProps<M> {
+  /**
+   * The blocks this toolbar has, in render order (`LassoToolsInlineUI.Modes`,
+   * `.InteractionMode`, `.UndoRedo`, `.Chips`, `.Actions`). Required — without
+   * `children` the shell renders empty chrome. See
+   * `stories/modules/lasso/lasso-tools-inline-toolbar.tsx` for the full design.
+   */
+  children: ReactNode
+  BoxProps?: ComponentProps<typeof Box>
+}
+
+export interface OptionsChildrenProps {
+  onClose: () => void
+}
+
+export interface LassoGeometryToolbarUIProps {
+  /**
+   * The actions this toolbar has, in render order — see
+   * {@link LassoGeometryToolbarUI}. Every state prop below is optional because
+   * the composition decides which ones matter: an action whose handler is
+   * missing renders nothing.
+   */
+  children: ReactNode
+  /** Geometry type — `mask` clips layers, `draw` is annotation only. */
+  type?: LassoGeometryType
+  /** Current geometry label, shown prefilled in the rename popover. */
+  label?: string
+  /** When locked, every action but the unlock toggle is disabled. */
+  locked?: boolean
+  /**
+   * Number of selected geometries. With more than one, the single-target
+   * actions (rename, edit geometry) are disabled and the rest apply to the
+   * whole selection.
+   * @default 1
+   */
+  selectionCount?: number
+  /**
+   * True when ANY selected geometry is locked: disables every action but the
+   * lock toggle (which then locks/unlocks the whole selection). Defaults to
+   * `locked` for single-selection usage.
+   */
+  anyLocked?: boolean
+  /**
+   * Current style of a `draw` geometry. Together with `onSetStyle`, shows the
+   * Color/Fill/Stroke pickers when `type === 'draw'`.
+   */
+  style?: LassoDrawStyle
+  onToggleType?: (type: LassoGeometryType) => void
+  onRename?: (label: string) => void
+  /**
+   * Basemap-derived fallback for map-label color when `properties.textColor`
+   * is unset (`white` on dark basemaps, `black` otherwise). Connected Label
+   * derives presentation from {@link properties} + this.
+   */
+  defaultTextColor?: LassoDrawColor
+  /** Applies map-label presentation live (one undo each). */
+  onSetTextPresentation?: (partial: {
+    textVisible?: boolean
+    textColor?: LassoDrawColor
+    textBold?: boolean
+    textItalic?: boolean
+  }) => void
+  onToggleLock?: (locked: boolean) => void
+  onDelete?: () => void
+  /** Merges a partial style into the geometry (color/fill/stroke pickers). */
+  onSetStyle?: (style: Partial<LassoDrawStyle>) => void
+  /** When provided, shows the "Edit geometry" action (left of label). */
+  onEditGeometry?: () => void
+  /** Highlights the "Edit geometry" action while a session is running. */
+  editingGeometry?: boolean
+  /**
+   * When provided, shows the merge action next to the mask/draw toggle. Only
+   * enabled with 2+ geometries selected and none locked.
+   */
+  onUnion?: () => void
+  /**
+   * True when the selection is a single MultiPolygon — the only shape the
+   * Split action applies to. Gates the Split action's enabled state.
+   */
+  splittable?: boolean
+  /**
+   * When provided, shows the split action (inverse of merge). Only enabled
+   * with a single MultiPolygon selected (`splittable`) and not locked.
+   */
+  onSplit?: () => void
+  /**
+   * When provided, shows the subtract action (first selected minus the rest).
+   * Only enabled with 2+ geometries selected and none locked.
+   */
+  onSubtract?: () => void
+  /**
+   * When provided, shows the intersect action (common area of the selection).
+   * Only enabled with 2+ geometries selected and none locked.
+   */
+  onIntersect?: () => void
+  /**
+   * When provided, shows the duplicate action (copies the selection, slightly
+   * offset). Disabled while any selected geometry is locked.
+   */
+  onDuplicate?: () => void
+  /**
+   * Ids of the selected geometries. Used to detect a selection change while a
+   * popover (Label/Edit properties) is open, so an in-flight edit never
+   * lands on the wrong geometry.
+   */
+  selectedIds?: string[]
+  /**
+   * Full properties of the first selected geometry — only meaningful for a
+   * single selection. Label presentation is derived from these; Edit
+   * properties filters system keys before showing the KV editor.
+   */
+  properties?: Record<string, unknown>
+  /** Commits a full replacement of the editable properties (single-selection). */
+  onEditProperties?: (draft: Record<string, unknown>) => void
+  /**
+   * When true (Point text annotations), the Label popover hides "Show on map"
+   * and presentation updates cannot turn `textVisible` off.
+   */
+  forceTextVisible?: boolean
+  labels?: {
+    toggleType?: { mask?: string; draw?: string }
+    /** Tooltip/aria-label for the Label button. */
+    label?: string
+    /** TextField label for the name input in the Label popover. */
+    labelName?: string
+    showOnMap?: string
+    textBold?: string
+    textItalic?: string
+    lock?: { lock?: string; unlock?: string }
+    delete?: string
+    editGeometry?: string
+    union?: string
+    split?: string
+    subtract?: string
+    intersect?: string
+    duplicate?: string
+    /** Tooltip/aria-label and popover copy for the Edit properties action. */
+    editProperties?: {
+      editProperties?: string
+      keyPlaceholder?: string
+      valuePlaceholder?: string
+      addRow?: string
+      removeRow?: string
+      emptyKeyError?: string
+      duplicateKeyError?: string
+      systemKeyError?: string
+    }
+    color?: {
+      tooltip?: string
+      /** Preset names plus UI-only `custom` (never persisted as a color value). */
+      options?: Partial<Record<LassoDrawColorPreset | 'custom', string>>
+    }
+    fill?: {
+      tooltip?: string
+      options?: Partial<Record<LassoDrawFill, string>>
+    }
+    stroke?: {
+      tooltip?: string
+      options?: Partial<Record<LassoDrawStroke, string>>
+    }
+  }
+  /** Forwarded to `LassoToolbarUI`, which owns the Paper's `ref` (popover anchoring). */
+  PaperProps?: Omit<ComponentProps<typeof Paper>, 'ref'>
+}
+
+export interface LassoMessageUIProps {
+  /** Message from the lasso tools store (`LassoToolsMessage` in `@carto/ps-react-maps`). */
+  message: {
+    id: string
+    title: string
+    /** Body rendered under the title. */
+    content?: ReactNode
+    /** @default 'info' */
+    severity?: AlertColor
+    action?: ReactNode
+  }
+  onDismiss: () => void
+  AlertProps?: Omit<AlertProps, 'severity' | 'onClose' | 'children' | 'action'>
+  SnackbarProps?: Omit<SnackbarProps, 'open' | 'onClose' | 'children'>
+}
+
+export interface LassoLayerFilterItem {
+  id: string
+  label: string
+  /** Whether the mask currently clips this layer. */
+  checked: boolean
+}
+
+export interface LassoLayerFiltersUIProps {
+  open: boolean
+  onClose: () => void
+  /** Layers the mask can apply to, with their current checked state. */
+  layers: LassoLayerFilterItem[]
+  /** Commit the new selection (called on Apply). */
+  onApply: (selectedIds: string[]) => void
+  labels?: {
+    title?: string
+    description?: string
+    search?: string
+    allSelected?: string
+    cancel?: string
+    apply?: string
+    empty?: string
+  }
+  DialogProps?: Partial<Omit<DialogProps, 'open' | 'onClose'>>
+}