@carto/ps-react-ui 4.3.3 → 4.3.5

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

@@ -0,0 +1,168 @@
+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 { 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' | 'edit'
+
+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 [mode, 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(mode)
+      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('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
+}
+
+const Component = ({
+  enabled,
+  modeSelected,
+  mockOnChangeMode,
+  mockOnChipToggle,
+  mockOnDelete,
+  mockOnAllChipToggle,
+  mockOnAllDelete,
+}: ComponentProps) => {
+  return (
+    <LassoToolsInlineUI
+      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}
+    />
+  )
+}

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

@@ -0,0 +1,245 @@
+import {
+  Divider,
+  Typography,
+  SvgIcon,
+  ToggleButton,
+  Box,
+  ToggleButtonGroup,
+  Button,
+} from '@mui/material'
+import { useMemo, type JSX, type MouseEvent, type ReactNode } from 'react'
+import { styles } from './styles'
+import type {
+  LassoToolsComponentProps,
+  LassoToolsInlineComponentProps,
+} from './types'
+import { LASSO_TOOLS_LABELS } from './const'
+import type { PickDeep } from 'type-fest'
+import type { LassoToolsModes } from '../types'
+import deepmerge from 'deepmerge'
+import { LassoToolsUIChip } from './chip'
+import { Tooltip } from '../tooltip/tooltip'
+
+export function LassoToolsInlineUI({
+  enabled,
+  values = [],
+  chipProps,
+  labels,
+  modes,
+  modesMapping,
+  modeSelected,
+  BoxProps: { sx, ...BoxProps } = {},
+  onChipToggle,
+  onDelete,
+  onChangeMode,
+  onAllChipToggle,
+  onAllDelete,
+}: LassoToolsInlineComponentProps): JSX.Element {
+  const data = useMemo(() => {
+    return deepmerge(modes, modesMapping)
+  }, [modes, modesMapping])
+
+  const { edit, ..._modes } = data
+
+  const handleDelete: LassoToolsComponentProps['onDelete'] = (valueId) => {
+    return onDelete(valueId)
+  }
+
+  const handleClick = (
+    evt: MouseEvent<HTMLElement>,
+    mode: NonNullable<(typeof modes)[keyof typeof modes]>['value'],
+  ) => {
+    evt.preventDefault()
+    onChangeMode?.(mode)
+  }
+
+  const modeExists = (modeSelected ?? '') in modes
+
+  const mode = (
+    modeExists ? modeSelected : Object.keys(data)[0]
+  ) as keyof typeof data
+
+  const modeSelectedValue = enabled ? data[mode] : null
+
+  const modesValues = Object.values(_modes)
+
+  return (
+    <Box
+      sx={{
+        ...styles.container,
+        ...sx,
+      }}
+      {...BoxProps}
+      className='inline'
+    >
+      <ModeList data={modesValues} labels={labels?.options}>
+        <ToggleButtonGroup
+          value={modeSelectedValue?.value}
+          exclusive
+          className='inline'
+          sx={styles.options.menu}
+          onChange={handleClick}
+        >
+          <OptionsList labels={labels?.options} data={modesValues} />
+          {!!edit && (
+            <>
+              <Divider orientation='vertical' />
+              <OptionsList
+                labels={labels?.options}
+                data={[
+                  {
+                    ...edit,
+                    disabled: !values.length,
+                  },
+                ]}
+              />
+            </>
+          )}
+        </ToggleButtonGroup>
+      </ModeList>
+      <Divider flexItem />
+      <NoData hasValues={!!values.length} labels={labels?.noData} />
+      {!!values.length && (
+        <Box sx={styles.chip.container} className='inline'>
+          {values.map((value) => (
+            <LassoToolsUIChip
+              key={value.id}
+              value={value}
+              labels={labels?.chip}
+              chipProps={chipProps}
+              onDelete={handleDelete}
+              onChipToggle={onChipToggle}
+            />
+          ))}
+        </Box>
+      )}
+      <Actions
+        values={values}
+        labels={labels?.actions}
+        onAllChipToggle={onAllChipToggle}
+        onAllDelete={onAllDelete}
+      />
+    </Box>
+  )
+}
+
+function ModeList({
+  data,
+  labels,
+  children,
+}: {
+  labels?: PickDeep<LassoToolsComponentProps['labels'], 'options'>['options']
+  data: LassoToolsComponentProps['modes'][keyof LassoToolsModes][]
+  children: ReactNode
+}) {
+  if (data.length <= 1) {
+    return null
+  }
+
+  const modeTitle = labels?.mode?.title ?? LASSO_TOOLS_LABELS.options.mode.title
+
+  return (
+    <>
+      <Typography
+        variant='subtitle2'
+        color='text.secondary'
+        sx={styles.options.title}
+        className='inline'
+      >
+        {modeTitle}
+      </Typography>
+      {children}
+    </>
+  )
+}
+
+function OptionsList({
+  data,
+  labels,
+}: {
+  labels?: PickDeep<LassoToolsComponentProps['labels'], 'options'>['options']
+  data: (LassoToolsComponentProps['modes'] &
+    LassoToolsComponentProps['modesMapping'])[keyof LassoToolsModes][]
+}) {
+  return data.map((mode) => {
+    const options =
+      labels?.mode?.options ?? LASSO_TOOLS_LABELS.options.mode.options
+    const label = options[mode.value]
+
+    return (
+      <Tooltip key={mode.value} title={label} placement='bottom'>
+        <ToggleButton
+          disabled={!!mode.disabled}
+          value={mode.value}
+          aria-label={mode.value}
+        >
+          <SvgIcon>{mode.icon}</SvgIcon>
+        </ToggleButton>
+      </Tooltip>
+    )
+  })
+}
+
+function NoData({
+  hasValues,
+  labels,
+}: {
+  hasValues: boolean
+  labels: PickDeep<LassoToolsComponentProps['labels'], 'noData'>['noData']
+}) {
+  if (hasValues) {
+    return null
+  }
+
+  const title = labels?.title ?? LASSO_TOOLS_LABELS.noData.title
+  const description =
+    labels?.description ?? LASSO_TOOLS_LABELS.noData.description
+
+  return (
+    <>
+      <Typography variant='body1' color='textSecondary'>
+        {title}
+      </Typography>
+      <Typography variant='body2' color='textSecondary'>
+        {description}
+      </Typography>
+    </>
+  )
+}
+
+function Actions({
+  values,
+  labels,
+  onAllChipToggle,
+  onAllDelete,
+}: Pick<
+  LassoToolsComponentProps,
+  'values' | 'onAllChipToggle' | 'onAllDelete'
+> & {
+  labels?: PickDeep<LassoToolsComponentProps['labels'], 'actions'>['actions']
+}) {
+  if (values.length <= 1) {
+    return null
+  }
+
+  const hasVisible = values.some((value) => value.visible)
+
+  const toggleAllLabel = hasVisible
+    ? (labels?.toggleAll?.active ?? LASSO_TOOLS_LABELS.actions.toggleAll.active)
+    : (labels?.toggleAll?.inactive ??
+      LASSO_TOOLS_LABELS.actions.toggleAll.inactive)
+
+  const deleteAllLabel =
+    labels?.deleteAll ?? LASSO_TOOLS_LABELS.actions.deleteAll
+
+  return (
+    <Box>
+      <Button color='inherit' onClick={() => onAllChipToggle()}>
+        {toggleAllLabel}
+      </Button>
+      <Button color='error' onClick={() => onAllDelete()}>
+        {deleteAllLabel}
+      </Button>
+    </Box>
+  )
+}

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

@@ -0,0 +1,212 @@
+import { describe, test, vi, expect, beforeEach } from 'vitest'
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { LassoToolsUI } from './lasso-tool'
+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' | 'edit'
+
+describe('LassoToolsUI', () => {
+  const mockOnActionToggle = vi.fn()
+  const mockOnChangeMode = vi.fn()
+  const mockOnChipToggle = vi.fn()
+  const mockOnDelete = vi.fn()
+  const mockOnAllChipToggle = vi.fn()
+  const mockOnAllDelete = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  test('should enable drawing', async () => {
+    const { container } = render(
+      <Component
+        enabled={false}
+        modeSelected='polygon'
+        mockOnActionToggle={mockOnActionToggle}
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChipToggle={mockOnChipToggle}
+        mockOnDelete={mockOnDelete}
+        mockOnAllChipToggle={mockOnAllChipToggle}
+        mockOnAllDelete={mockOnAllDelete}
+      />,
+    )
+
+    const polygonButton = within(container).getByLabelText(
+      'Click on the map to draw your spatial filter',
+    )
+    await userEvent.click(polygonButton)
+
+    expect(mockOnActionToggle).toHaveBeenCalledWith(true)
+  })
+
+  for (const [mode, label] of Object.entries(changeLassoToolsModeOptions)) {
+    test(`should change mode to ${label}`, async () => {
+      const { container } = render(
+        <Component
+          enabled
+          modeSelected='polygon'
+          mockOnActionToggle={mockOnActionToggle}
+          mockOnChangeMode={mockOnChangeMode}
+          mockOnChipToggle={mockOnChipToggle}
+          mockOnDelete={mockOnDelete}
+          mockOnAllChipToggle={mockOnAllChipToggle}
+          mockOnAllDelete={mockOnAllDelete}
+        />,
+      )
+
+      const dropdownButton = within(container).getAllByRole('button')[1]!
+      await userEvent.click(dropdownButton)
+
+      const modeButton = screen.getByText(label)
+      await userEvent.click(modeButton)
+
+      expect(mockOnChangeMode).toHaveBeenCalledWith(mode)
+    })
+  }
+
+  test('should change polygons visibility when clicking on the chip', async () => {
+    const { container } = render(
+      <Component
+        enabled
+        modeSelected='polygon'
+        mockOnActionToggle={mockOnActionToggle}
+        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'
+        mockOnActionToggle={mockOnActionToggle}
+        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('should change polygons visibility when clicking on Show/Hide All', async () => {
+    render(
+      <Component
+        enabled
+        modeSelected='polygon'
+        mockOnActionToggle={mockOnActionToggle}
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChipToggle={mockOnChipToggle}
+        mockOnDelete={mockOnDelete}
+        mockOnAllChipToggle={mockOnAllChipToggle}
+        mockOnAllDelete={mockOnAllDelete}
+      />,
+    )
+
+    const optionsButton = screen.getByTestId('MoreVertOutlinedIcon')
+    await userEvent.click(optionsButton)
+
+    const showAllButton = await screen.findByRole('menuitem', {
+      name: 'Show all',
+    })
+    await userEvent.click(showAllButton)
+
+    expect(mockOnAllChipToggle).toHaveBeenCalled()
+  })
+
+  test('should remove all polygons when clicking on Delete All', async () => {
+    render(
+      <Component
+        enabled
+        modeSelected='polygon'
+        mockOnActionToggle={mockOnActionToggle}
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChipToggle={mockOnChipToggle}
+        mockOnDelete={mockOnDelete}
+        mockOnAllChipToggle={mockOnAllChipToggle}
+        mockOnAllDelete={mockOnAllDelete}
+      />,
+    )
+
+    const optionsButton = screen.getByTestId('MoreVertOutlinedIcon')
+    await userEvent.click(optionsButton)
+
+    const deleteAllButton = await screen.findByRole('menuitem', {
+      name: 'Remove all',
+    })
+    await userEvent.click(deleteAllButton)
+
+    expect(mockOnAllDelete).toHaveBeenCalled()
+  })
+})
+
+// Aux
+interface ComponentProps {
+  enabled: boolean
+  modeSelected: LassoToolsMode
+  mockOnActionToggle: () => void
+  mockOnChangeMode: () => void
+  mockOnChipToggle: () => void
+  mockOnDelete: () => void
+  mockOnAllChipToggle: () => void
+  mockOnAllDelete: () => void
+}
+
+const Component = ({
+  enabled,
+  modeSelected,
+  mockOnActionToggle,
+  mockOnChangeMode,
+  mockOnChipToggle,
+  mockOnDelete,
+  mockOnAllChipToggle,
+  mockOnAllDelete,
+}: ComponentProps) => {
+  return (
+    <LassoToolsUI
+      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}
+      onActionToggle={mockOnActionToggle}
+      onChangeMode={mockOnChangeMode}
+      onChipToggle={mockOnChipToggle}
+      onDelete={mockOnDelete}
+      onAllChipToggle={mockOnAllChipToggle}
+      onAllDelete={mockOnAllDelete}
+    />
+  )
+}