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

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

@@ -0,0 +1,759 @@
+import { describe, test, vi, expect, beforeEach } from 'vitest'
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { LassoToolsInlineUI } from './lasso-tool-inline'
+import type { LassoToolsInlineComponentProps } from './types'
+import { DEFAULT_LASSO_TOOLS_MODES_MAPPING } from './const'
+import type { LassoToolsModes } from '../types'
+import {
+  changeLassoToolsModeOptions,
+  DEFAULT_LASSO_TOOLS_MODES,
+} from '../../../tests/config'
+
+type LassoToolsMode =
+  'polygon' | 'rectangle' | 'circle' | 'lasso' | 'select' | 'lasso-select'
+
+function FullLassoToolsInlineUI(
+  props: Omit<LassoToolsInlineComponentProps, 'children'>,
+) {
+  return (
+    <LassoToolsInlineUI {...props}>
+      <LassoToolsInlineUI.Modes />
+      <LassoToolsInlineUI.InteractionMode>
+        <LassoToolsInlineUI.UndoRedo />
+      </LassoToolsInlineUI.InteractionMode>
+      <LassoToolsInlineUI.Chips />
+      <LassoToolsInlineUI.Actions />
+    </LassoToolsInlineUI>
+  )
+}
+
+describe('LassoToolsInlineUI', () => {
+  const mockOnChangeMode = vi.fn()
+  const mockOnChipToggle = vi.fn()
+  const mockOnDelete = vi.fn()
+  const mockOnAllChipToggle = vi.fn()
+  const mockOnAllDelete = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  for (const [, label] of Object.entries(changeLassoToolsModeOptions)) {
+    test(`should change mode to ${label}`, async () => {
+      const { container } = render(
+        <Component
+          enabled
+          modeSelected='polygon'
+          mockOnChangeMode={mockOnChangeMode}
+          mockOnChipToggle={mockOnChipToggle}
+          mockOnDelete={mockOnDelete}
+          mockOnAllChipToggle={mockOnAllChipToggle}
+          mockOnAllDelete={mockOnAllDelete}
+        />,
+      )
+
+      const modeButton = within(container).getByLabelText(label)
+      await userEvent.click(modeButton)
+
+      expect(mockOnChangeMode).toHaveBeenCalled()
+    })
+  }
+
+  test('should change polygons visibility when clicking on the chip', async () => {
+    const { container } = render(
+      <Component
+        enabled
+        modeSelected='polygon'
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChipToggle={mockOnChipToggle}
+        mockOnDelete={mockOnDelete}
+        mockOnAllChipToggle={mockOnAllChipToggle}
+        mockOnAllDelete={mockOnAllDelete}
+      />,
+    )
+
+    const chip = within(container).getAllByLabelText('Show drawing')[0]!
+    await userEvent.click(chip)
+
+    expect(mockOnChipToggle).toHaveBeenCalledWith('polygon-id-1', true)
+  })
+
+  test('should remove a polygon when clicking on chip-cancel-icon', async () => {
+    render(
+      <Component
+        enabled
+        modeSelected='polygon'
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChipToggle={mockOnChipToggle}
+        mockOnDelete={mockOnDelete}
+        mockOnAllChipToggle={mockOnAllChipToggle}
+        mockOnAllDelete={mockOnAllDelete}
+      />,
+    )
+
+    const cancelButton = screen.getAllByTestId('CancelIcon')[0]!
+    await userEvent.click(cancelButton)
+
+    expect(mockOnDelete).toHaveBeenCalledWith('polygon-id-1')
+  })
+
+  test('does not render draw geometries as chips', () => {
+    render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[
+          { id: 'mask-1', label: 'Mask Area', visible: true, type: 'mask' },
+          {
+            id: 'draw-1',
+            label: 'Draw Sketch',
+            visible: true,
+            type: 'draw',
+          },
+          { id: 'legacy-1', label: 'Legacy Mask', visible: true },
+        ]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modeSelected='polygon'
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        onChangeMode={mockOnChangeMode}
+        onChipToggle={mockOnChipToggle}
+        onDelete={mockOnDelete}
+        onAllChipToggle={mockOnAllChipToggle}
+        onAllDelete={mockOnAllDelete}
+      />,
+    )
+
+    expect(screen.getByText('Mask Area')).toBeTruthy()
+    expect(screen.getByText('Legacy Mask')).toBeTruthy()
+    expect(screen.queryByText('Draw Sketch')).toBeNull()
+  })
+
+  test('should change polygons visibility when clicking on Show/Hide All', async () => {
+    const { container } = render(
+      <Component
+        enabled
+        modeSelected='polygon'
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChipToggle={mockOnChipToggle}
+        mockOnDelete={mockOnDelete}
+        mockOnAllChipToggle={mockOnAllChipToggle}
+        mockOnAllDelete={mockOnAllDelete}
+      />,
+    )
+
+    const showAllButton = within(container).getByText('Show all')
+    await userEvent.click(showAllButton)
+
+    expect(mockOnAllChipToggle).toHaveBeenCalled()
+  })
+
+  test('should remove all polygons when clicking on Delete All', async () => {
+    const { container } = render(
+      <Component
+        enabled
+        modeSelected='polygon'
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChipToggle={mockOnChipToggle}
+        mockOnDelete={mockOnDelete}
+        mockOnAllChipToggle={mockOnAllChipToggle}
+        mockOnAllDelete={mockOnAllDelete}
+      />,
+    )
+
+    const deleteAllButton = within(container).getByText('Remove all')
+    await userEvent.click(deleteAllButton)
+
+    expect(mockOnAllDelete).toHaveBeenCalled()
+  })
+})
+
+// Aux
+interface ComponentProps {
+  enabled: boolean
+  modeSelected: LassoToolsMode
+  mockOnChangeMode: () => void
+  mockOnChipToggle: () => void
+  mockOnDelete: () => void
+  mockOnAllChipToggle: () => void
+  mockOnAllDelete: () => void
+}
+
+describe('LassoToolsInlineUI branches', () => {
+  const mockOnChipToggle = vi.fn()
+  const mockOnDelete = vi.fn()
+  const mockOnAllChipToggle = vi.fn()
+  const mockOnAllDelete = vi.fn()
+  const mockOnChangeMode = vi.fn()
+  const requiredCallbacks = {
+    onChangeMode: mockOnChangeMode,
+    onAllChipToggle: mockOnAllChipToggle,
+    onAllDelete: mockOnAllDelete,
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  test('renders empty-state NoData when there are no values', () => {
+    const { container } = render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        onChipToggle={mockOnChipToggle}
+        onDelete={mockOnDelete}
+        {...requiredCallbacks}
+      />,
+    )
+    // The "no data" Typography branch should have rendered
+    expect(container.querySelector('.inline')).toBeDefined()
+  })
+
+  test('renders without onChangeMode prop (optional callback)', async () => {
+    const { container } = render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[{ id: 'p1', label: 'Polygon 1' }]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        onChipToggle={mockOnChipToggle}
+        onDelete={mockOnDelete}
+        {...requiredCallbacks}
+      />,
+    )
+    // Clicking the mode should not throw despite missing onChangeMode
+    const modeButton = within(container).getByLabelText('Rectangle')
+    await expect(userEvent.click(modeButton)).resolves.toBeUndefined()
+  })
+
+  test('uses the first mode when modeSelected is not in the modes map', () => {
+    expect(() =>
+      render(
+        <FullLassoToolsInlineUI
+          enabled
+          values={[]}
+          modes={
+            DEFAULT_LASSO_TOOLS_MODES as Partial<
+              LassoToolsModes<LassoToolsMode>
+            >
+          }
+          modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+          // bogus mode → modeExists=false → falls back to first key
+          modeSelected={'not-a-mode' as never}
+          onChipToggle={mockOnChipToggle}
+          {...requiredCallbacks}
+          onDelete={mockOnDelete}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  test('renders with modeSelectedValue=null when disabled (enabled=false)', () => {
+    expect(() =>
+      render(
+        <FullLassoToolsInlineUI
+          enabled={false}
+          values={[{ id: 'p1', label: 'P1' }]}
+          modes={
+            DEFAULT_LASSO_TOOLS_MODES as Partial<
+              LassoToolsModes<LassoToolsMode>
+            >
+          }
+          modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+          modeSelected='polygon'
+          onChipToggle={mockOnChipToggle}
+          {...requiredCallbacks}
+          onDelete={mockOnDelete}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  test('Actions block is hidden when there is only one value (Actions returns null branch)', () => {
+    const { container } = render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[{ id: 'p1', label: 'Only one' }]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        onChipToggle={mockOnChipToggle}
+        onDelete={mockOnDelete}
+        {...requiredCallbacks}
+      />,
+    )
+    // With ≤1 values, the "Show all / Delete all" buttons should not render
+    expect(within(container).queryByText(/Show all/i)).toBeNull()
+    expect(within(container).queryByText(/Delete all/i)).toBeNull()
+  })
+
+  test('uses custom labels.actions when provided', () => {
+    const { container } = render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[
+          { id: 'p1', label: 'P1', visible: false },
+          { id: 'p2', label: 'P2', visible: false },
+        ]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        labels={{
+          actions: {
+            toggleAll: {
+              active: 'Hide everything',
+              inactive: 'Show all (custom)',
+            },
+            deleteAll: 'Wipe everything',
+          },
+        }}
+        onChipToggle={mockOnChipToggle}
+        onDelete={mockOnDelete}
+        {...requiredCallbacks}
+      />,
+    )
+    expect(within(container).queryByText('Show all (custom)')).not.toBeNull()
+    expect(within(container).queryByText('Wipe everything')).not.toBeNull()
+  })
+
+  test('renders a single mode without the ModeList title (data.length <= 1)', () => {
+    expect(() =>
+      render(
+        <FullLassoToolsInlineUI
+          enabled
+          values={[]}
+          modes={
+            {
+              polygon: DEFAULT_LASSO_TOOLS_MODES.polygon,
+            } as Partial<LassoToolsModes<LassoToolsMode>>
+          }
+          modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+          modeSelected='polygon'
+          onChipToggle={mockOnChipToggle}
+          {...requiredCallbacks}
+          onDelete={mockOnDelete}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  test('keeps selection modes reachable with no drawing modes configured', () => {
+    const { container } = render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[]}
+        modes={
+          {
+            select: DEFAULT_LASSO_TOOLS_MODES.select,
+            'lasso-select': DEFAULT_LASSO_TOOLS_MODES['lasso-select'],
+          } as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='select'
+        onChipToggle={mockOnChipToggle}
+        {...requiredCallbacks}
+        onDelete={mockOnDelete}
+      />,
+    )
+    expect(within(container).getByLabelText('Select features')).toBeDefined()
+    expect(within(container).getByLabelText('Lasso select')).toBeDefined()
+    // No drawing modes to divide from: no leading orphan divider.
+    const group = container.querySelector('.MuiToggleButtonGroup-root')!
+    expect(group.querySelectorAll('.MuiDivider-root')).toHaveLength(0)
+  })
+
+  test('keeps the toggle group visible with one drawing mode plus selection modes', () => {
+    const { container } = render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[]}
+        modes={
+          {
+            polygon: DEFAULT_LASSO_TOOLS_MODES.polygon,
+            select: DEFAULT_LASSO_TOOLS_MODES.select,
+            'lasso-select': DEFAULT_LASSO_TOOLS_MODES['lasso-select'],
+          } as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        onChipToggle={mockOnChipToggle}
+        {...requiredCallbacks}
+        onDelete={mockOnDelete}
+      />,
+    )
+    expect(within(container).getByLabelText('Polygon')).toBeDefined()
+    expect(within(container).getByLabelText('Select features')).toBeDefined()
+    const group = container.querySelector('.MuiToggleButtonGroup-root')!
+    expect(group.querySelectorAll('.MuiDivider-root')).toHaveLength(1)
+  })
+
+  test('falls back to the raw value for a custom mode with no mapped label', () => {
+    const { container } = render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[]}
+        modes={
+          {
+            polygon: DEFAULT_LASSO_TOOLS_MODES.polygon,
+            'custom-mode': { value: 'custom-mode', mode: class {} },
+          } as never
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        onChipToggle={mockOnChipToggle}
+        {...requiredCallbacks}
+        onDelete={mockOnDelete}
+      />,
+    )
+    // Not empty/undefined: the toggle keeps an accessible name either way.
+    expect(within(container).getByLabelText('custom-mode')).toBeDefined()
+  })
+
+  test('does not throw with an empty modes registry (no fallback key to select)', () => {
+    expect(() =>
+      render(
+        <FullLassoToolsInlineUI
+          enabled
+          values={[]}
+          modes={{} as Partial<LassoToolsModes<LassoToolsMode>>}
+          modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+          modeSelected='polygon'
+          onChipToggle={mockOnChipToggle}
+          {...requiredCallbacks}
+          onDelete={mockOnDelete}
+        />,
+      ),
+    ).not.toThrow()
+  })
+})
+
+describe('LassoToolsInlineUI toolbar-level actions', () => {
+  const mockOnChangeMode = vi.fn()
+  const mockOnChipToggle = vi.fn()
+  const mockOnDelete = vi.fn()
+  const mockOnAllChipToggle = vi.fn()
+  const mockOnAllDelete = vi.fn()
+  const requiredCallbacks = {
+    onChangeMode: mockOnChangeMode,
+    onChipToggle: mockOnChipToggle,
+    onDelete: mockOnDelete,
+    onAllChipToggle: mockOnAllChipToggle,
+    onAllDelete: mockOnAllDelete,
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  test('does not render the mask/draw toggle without onChangeInteractionMode', () => {
+    render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        {...requiredCallbacks}
+      />,
+    )
+    expect(screen.queryByText('Mask')).toBeNull()
+    expect(screen.queryByText('Draw')).toBeNull()
+  })
+
+  test('renders the mask/draw toggle and calls onChangeInteractionMode', async () => {
+    const mockOnChangeInteractionMode = vi.fn()
+    render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        interactionMode='mask'
+        onChangeInteractionMode={mockOnChangeInteractionMode}
+        {...requiredCallbacks}
+      />,
+    )
+
+    const drawButton = screen.getByText('Draw')
+    await userEvent.click(drawButton)
+
+    expect(mockOnChangeInteractionMode).toHaveBeenCalledWith('draw')
+  })
+
+  test('does not render undo/redo without onUndo/onRedo', () => {
+    render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        {...requiredCallbacks}
+      />,
+    )
+    expect(screen.queryByLabelText('Undo')).toBeNull()
+    expect(screen.queryByLabelText('Redo')).toBeNull()
+  })
+
+  test('does not render undo/redo when disabled, even with handlers', () => {
+    render(
+      <FullLassoToolsInlineUI
+        enabled={false}
+        values={[]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        onUndo={vi.fn()}
+        onRedo={vi.fn()}
+        {...requiredCallbacks}
+      />,
+    )
+    expect(screen.queryByLabelText('Undo')).toBeNull()
+    expect(screen.queryByLabelText('Redo')).toBeNull()
+  })
+
+  test('renders undo/redo, respects canUndo/canRedo and calls the handlers', async () => {
+    const mockOnUndo = vi.fn()
+    const mockOnRedo = vi.fn()
+    render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        canUndo={false}
+        canRedo
+        onUndo={mockOnUndo}
+        onRedo={mockOnRedo}
+        {...requiredCallbacks}
+      />,
+    )
+
+    expect(
+      screen.getByRole('button', { name: 'Undo' }).hasAttribute('disabled'),
+    ).toBe(true)
+
+    const redoButton = screen.getByRole('button', { name: 'Redo' })
+    expect(redoButton.hasAttribute('disabled')).toBe(false)
+    await userEvent.click(redoButton)
+
+    expect(mockOnRedo).toHaveBeenCalled()
+  })
+
+  test('does not render the layer filters button without onLayerFilters', () => {
+    render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[{ id: 'p1', label: 'Only one' }]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        {...requiredCallbacks}
+      />,
+    )
+    expect(screen.queryByText('Layer filters')).toBeNull()
+  })
+
+  test('renders the layer filters button regardless of values length and calls onLayerFilters', async () => {
+    const mockOnLayerFilters = vi.fn()
+    render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[{ id: 'p1', label: 'Only one' }]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        onLayerFilters={mockOnLayerFilters}
+        {...requiredCallbacks}
+      />,
+    )
+
+    const layerFiltersButton = screen.getByText('Layer filters')
+    await userEvent.click(layerFiltersButton)
+
+    expect(mockOnLayerFilters).toHaveBeenCalled()
+  })
+
+  test('separates toolbar blocks with CSS borders, not top-level MuiDividers', () => {
+    // Horizontal rules between stacked blocks come from `.inline > * + *`
+    // (styles.ts). Blocks must not emit top-level `<Divider flexItem />` —
+    // those would double up when a middle block is omitted via children.
+    const { container } = render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        interactionMode='mask'
+        onChangeInteractionMode={vi.fn()}
+        canUndo
+        canRedo
+        onUndo={vi.fn()}
+        onRedo={vi.fn()}
+        {...requiredCallbacks}
+      />,
+    )
+
+    const root = container.firstElementChild!
+    expect(root.classList.contains('inline')).toBe(true)
+    // Provider is context-only: block roots are direct children of `.inline`.
+    expect(root.children.length).toBeGreaterThan(1)
+    expect(root.querySelectorAll(':scope > .MuiDivider-root')).toHaveLength(0)
+  })
+
+  test('separates bulk actions from the layer filters button with a vertical divider', () => {
+    // Here the divider sits inside a row of buttons, so vertical is correct.
+    render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[
+          { id: 'p1', label: 'P1' },
+          { id: 'p2', label: 'P2' },
+        ]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        onLayerFilters={vi.fn()}
+        {...requiredCallbacks}
+      />,
+    )
+
+    const layerFiltersButton = screen.getByText('Layer filters')
+    const actionsDivider = layerFiltersButton.previousElementSibling
+    expect(actionsDivider?.classList.contains('MuiDivider-root')).toBe(true)
+    expect(actionsDivider?.classList.contains('MuiDivider-vertical')).toBe(true)
+  })
+
+  test('children composition renders only the listed blocks', () => {
+    render(
+      <LassoToolsInlineUI
+        enabled
+        values={[{ id: 'p1', label: 'A' }]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        onUndo={vi.fn()}
+        onRedo={vi.fn()}
+        {...requiredCallbacks}
+      >
+        <LassoToolsInlineUI.Modes />
+      </LassoToolsInlineUI>,
+    )
+
+    expect(screen.getByLabelText('Polygon')).toBeTruthy()
+    expect(screen.queryByText('A')).toBeNull()
+    expect(screen.queryByLabelText('Undo')).toBeNull()
+  })
+
+  test('default composition puts interaction mode and undo/redo on one row', () => {
+    const { container } = render(
+      <FullLassoToolsInlineUI
+        enabled
+        values={[{ id: 'p1', label: 'A' }]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        interactionMode='mask'
+        onChangeInteractionMode={vi.fn()}
+        canUndo
+        canRedo
+        onUndo={vi.fn()}
+        onRedo={vi.fn()}
+        {...requiredCallbacks}
+      />,
+    )
+
+    expect(screen.getByText('Mask')).toBeTruthy()
+    expect(screen.getByText('Draw')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Undo' })).toBeTruthy()
+    expect(screen.getByText('A')).toBeTruthy()
+
+    // Mask/Draw toggles and Undo share the same flex row (UndoRedo nested in InteractionMode).
+    const row = screen
+      .getByText('Draw')
+      .closest('.MuiToggleButtonGroup-root')?.parentElement
+    const undoButton = screen.getByRole('button', { name: 'Undo' })
+    expect(row?.contains(undoButton)).toBe(true)
+
+    // Smoke: root still stacks blocks without top-level MUI dividers.
+    expect(
+      container.firstElementChild!.querySelectorAll(
+        ':scope > .MuiDivider-root',
+      ),
+    ).toHaveLength(0)
+  })
+})
+
+const Component = ({
+  enabled,
+  modeSelected,
+  mockOnChangeMode,
+  mockOnChipToggle,
+  mockOnDelete,
+  mockOnAllChipToggle,
+  mockOnAllDelete,
+}: ComponentProps) => {
+  return (
+    <FullLassoToolsInlineUI
+      enabled={enabled}
+      values={[
+        {
+          id: 'polygon-id-1',
+          label: 'Polygon 1',
+        },
+        {
+          id: 'polygon-id-2',
+          label: 'Polygon 2',
+        },
+      ]}
+      modes={
+        DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+      }
+      modeSelected={modeSelected}
+      modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+      onChangeMode={mockOnChangeMode}
+      onChipToggle={mockOnChipToggle}
+      onDelete={mockOnDelete}
+      onAllChipToggle={mockOnAllChipToggle}
+      onAllDelete={mockOnAllDelete}
+    />
+  )
+}