@carto/ps-react-ui 4.3.3 → 4.3.5

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

@@ -0,0 +1,479 @@
+import { ArrowDropDown, MoreVertOutlined } from '@mui/icons-material'
+import {
+  Box,
+  Divider,
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Paper,
+  SvgIcon,
+  ToggleButton,
+  Typography,
+  type SxProps,
+  type Theme,
+} from '@mui/material'
+import deepmerge from 'deepmerge'
+import {
+  useMemo,
+  useState,
+  type ComponentProps,
+  type JSX,
+  type MouseEvent,
+  type PropsWithChildren,
+  type ReactNode,
+} from 'react'
+import type { PickDeep } from 'type-fest'
+import { Tooltip } from '../tooltip/tooltip'
+import type { LassoToolsModes } from '../types'
+import { LassoToolsUIChip } from './chip'
+import { LASSO_TOOLS_LABELS } from './const'
+import { styles } from './styles'
+import type { LassoToolsComponentProps, OptionsChildrenProps } from './types'
+
+export function LassoToolsUI({
+  enabled,
+  values = [],
+  actionProps,
+  chipProps,
+  labels,
+  modes,
+  modesMapping,
+  modeSelected,
+  PaperProps: { sx, ...PaperProps } = {},
+  onActionToggle,
+  onChipToggle,
+  onDelete,
+  onChangeMode,
+  onAllChipToggle,
+  onAllDelete,
+  ChipsSlot = LassoToolsUI.Chips,
+  ActionSlot = LassoToolsUI.Action,
+  SecondaryActionsSlot = LassoToolsUI.SecondaryActions,
+  OptionsSlot = LassoToolsUI.Options,
+}: LassoToolsComponentProps): JSX.Element {
+  const slotArgs = {
+    enabled,
+    values,
+    actionProps,
+    chipProps,
+    labels,
+    modes,
+    modesMapping,
+    modeSelected,
+    PaperProps,
+    onActionToggle,
+    onChipToggle,
+    onDelete,
+    onChangeMode,
+    onAllChipToggle,
+    onAllDelete,
+  }
+  return (
+    <Paper
+      sx={{
+        ...styles.container,
+        ...sx,
+      }}
+      {...PaperProps}
+    >
+      {!!ActionSlot && <ActionSlot {...slotArgs} />}
+      {!!OptionsSlot && (
+        <Options>
+          {(props) => {
+            return <OptionsSlot {...slotArgs} {...props} />
+          }}
+        </Options>
+      )}
+      {!!ChipsSlot && <ChipsSlot {...slotArgs} />}
+      {!!SecondaryActionsSlot && <SecondaryActionsSlot {...slotArgs} />}
+    </Paper>
+  )
+}
+
+function LassoToolsUIAction({
+  actionProps,
+  labels,
+  enabled,
+  children,
+  onActionToggle,
+}: PropsWithChildren<
+  Pick<
+    LassoToolsComponentProps,
+    'actionProps' | 'enabled' | 'onActionToggle'
+  > & {
+    labels?: PickDeep<LassoToolsComponentProps['labels'], 'action'>['action']
+  }
+>) {
+  const actionState = enabled ? 'active' : 'inactive'
+  const actionLabel =
+    labels?.tooltip?.[actionState] ??
+    LASSO_TOOLS_LABELS.action.tooltip[actionState]
+
+  return (
+    <Tooltip
+      title={actionLabel}
+      placement='right'
+      {...actionProps?.TooltipProps}
+    >
+      <ToggleButton
+        value='toggle'
+        sx={styles.actions.icon}
+        onClick={() => onActionToggle(!enabled)}
+        aria-label={actionLabel}
+        selected={enabled}
+      >
+        {children}
+      </ToggleButton>
+    </Tooltip>
+  )
+}
+
+function Options({
+  TriggerProps: { Icon = <ArrowDropDown />, sx } = {},
+  MenuProps,
+  children,
+}: {
+  TriggerProps?: {
+    Icon?: ReactNode
+    sx?: SxProps<Theme>
+  }
+  MenuProps?: Partial<ComponentProps<typeof Menu>>
+  children: (props: OptionsChildrenProps) => JSX.Element
+}) {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+
+  const open = Boolean(anchorEl)
+
+  const handleToggle = (event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  return (
+    <>
+      <IconButton
+        sx={{
+          ...styles.options.icon,
+          ...sx,
+        }}
+        onClick={handleToggle}
+      >
+        {Icon}
+      </IconButton>
+      <Menu
+        id='lasso-menu'
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': 'lasso-button',
+          sx: styles.options.menu,
+        }}
+        {...MenuProps}
+      >
+        <div>
+          {children({
+            onClose: handleClose,
+          })}
+        </div>
+      </Menu>
+    </>
+  )
+}
+
+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}
+      >
+        {modeTitle}
+      </Typography>
+      {children}
+    </>
+  )
+}
+
+function OptionsList({
+  data,
+  modeSelected,
+  labels,
+  onChangeMode,
+  onClose,
+}: Required<Pick<LassoToolsComponentProps, 'modeSelected' | 'onChangeMode'>> & {
+  labels?: PickDeep<LassoToolsComponentProps['labels'], 'options'>['options']
+  data: (LassoToolsComponentProps['modes'] &
+    LassoToolsComponentProps['modesMapping'])[keyof LassoToolsModes][]
+  onClose: OptionsChildrenProps['onClose']
+}) {
+  const handleClick = (
+    e: MouseEvent<HTMLLIElement>,
+    value: (typeof data)[number]['value'],
+  ) => {
+    e.preventDefault()
+    onChangeMode?.(value)
+    onClose()
+  }
+
+  return data.map((mode) => {
+    const options =
+      labels?.mode?.options ?? LASSO_TOOLS_LABELS.options.mode.options
+    const label = options[mode.value]
+
+    return (
+      <MenuItem
+        key={mode.value}
+        disabled={!!mode.disabled}
+        onClick={(e) => handleClick(e, mode.value)}
+        selected={mode.value === modeSelected}
+      >
+        <ListItemIcon sx={styles.options.icons}>
+          <SvgIcon>{mode.icon}</SvgIcon>
+        </ListItemIcon>
+        <ListItemText>{label}</ListItemText>
+      </MenuItem>
+    )
+  })
+}
+
+function SecondaryActionsWrapper({
+  values,
+  labels,
+  onAllChipToggle,
+  onAllDelete,
+}: Partial<
+  Omit<
+    LassoToolsComponentProps,
+    'ChipsSlot' | 'ActionsSlot' | 'OptionsSlot' | 'SecondaryActionsSlot'
+  >
+>) {
+  if (!values?.length || values.length <= 1) {
+    return null
+  }
+
+  const hasVisible = values?.some((value) => value.visible)
+
+  const toggleAllLabel = hasVisible
+    ? (labels?.actions?.toggleAll?.active ??
+      LASSO_TOOLS_LABELS.actions.toggleAll.active)
+    : (labels?.actions?.toggleAll?.inactive ??
+      LASSO_TOOLS_LABELS.actions.toggleAll.inactive)
+
+  const deleteAllLabel =
+    labels?.actions?.deleteAll ?? LASSO_TOOLS_LABELS.actions.deleteAll
+
+  return (
+    <>
+      <Divider orientation='vertical' flexItem />
+      <Options
+        TriggerProps={{ Icon: <MoreVertOutlined />, sx: styles.options.more }}
+        MenuProps={{
+          anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'right',
+          },
+          transformOrigin: {
+            vertical: 'top',
+            horizontal: 'right',
+          },
+        }}
+      >
+        {(props) => {
+          return (
+            <>
+              <MenuItem
+                color='inherit'
+                onClick={() => {
+                  onAllChipToggle?.()
+                  props.onClose()
+                }}
+              >
+                {toggleAllLabel}
+              </MenuItem>
+              <Divider />
+              <MenuItem
+                color='error'
+                onClick={() => {
+                  onAllDelete?.()
+                  props.onClose()
+                }}
+              >
+                <Typography variant='body2' color='error'>
+                  {deleteAllLabel}
+                </Typography>
+              </MenuItem>
+            </>
+          )
+        }}
+      </Options>
+    </>
+  )
+}
+
+LassoToolsUI.Action = function ActionsWrapper({
+  modes,
+  modesMapping,
+  modeSelected,
+  actionProps,
+  enabled,
+  labels,
+  onActionToggle,
+}: Partial<
+  Omit<
+    LassoToolsComponentProps,
+    'ChipsSlot' | 'ActionsSlot' | 'OptionsSlot' | 'SecondaryActionsSlot'
+  >
+> & {
+  labels?: PickDeep<LassoToolsComponentProps['labels'], 'actions'>['actions']
+}) {
+  const data = useMemo(() => {
+    return deepmerge(modes ?? {}, modesMapping ?? {})
+  }, [modes, modesMapping])
+
+  const handleToggle: LassoToolsComponentProps['onActionToggle'] = (data) => {
+    return onActionToggle?.(data)
+  }
+
+  const modeExists = modeSelected ? modeSelected in (modes ?? {}) : false
+
+  const mode = (
+    modeExists ? modeSelected : Object.keys(data)[0]
+  ) as keyof typeof data
+
+  const modeSelectedValue = data[mode]
+
+  return (
+    <LassoToolsUIAction
+      actionProps={actionProps}
+      labels={labels?.action}
+      enabled={enabled ?? false}
+      onActionToggle={handleToggle}
+    >
+      {modeSelectedValue?.icon}
+    </LassoToolsUIAction>
+  )
+}
+
+LassoToolsUI.Chips = function ChipsWrapper({
+  values,
+  labels,
+  chipProps,
+  onDelete,
+  onChipToggle,
+  onActionToggle,
+}: Partial<
+  Omit<
+    LassoToolsComponentProps,
+    'ChipsSlot' | 'ActionsSlot' | 'OptionsSlot' | 'SecondaryActionsSlot'
+  >
+>) {
+  const handleDelete: LassoToolsComponentProps['onDelete'] = (valueId) => {
+    onActionToggle?.(false)
+    return onDelete?.(valueId)
+  }
+
+  return (
+    !!values?.length && (
+      <Box sx={styles.chip.container}>
+        {values?.map((value) => (
+          <LassoToolsUIChip
+            key={value.id}
+            value={value}
+            labels={labels?.chip}
+            chipProps={chipProps}
+            onDelete={handleDelete}
+            onChipToggle={(id, data) => onChipToggle?.(id, data)}
+          />
+        ))}
+      </Box>
+    )
+  )
+}
+
+LassoToolsUI.SecondaryActions = SecondaryActionsWrapper
+
+LassoToolsUI.Options = function OptionsWrapper({
+  values,
+  modes,
+  modesMapping,
+  modeSelected,
+  labels,
+  onChangeMode,
+  ...props
+}: Partial<
+  Omit<
+    LassoToolsComponentProps,
+    'ChipsSlot' | 'ActionsSlot' | 'OptionsSlot' | 'SecondaryActionsSlot'
+  >
+> &
+  OptionsChildrenProps) {
+  const data = useMemo(() => {
+    return deepmerge(modes ?? {}, modesMapping ?? {})
+  }, [modes, modesMapping])
+
+  const { edit, ..._modes } = data
+
+  const modeExists = modeSelected ? modeSelected in (modes ?? {}) : false
+
+  const mode = (
+    modeExists ? modeSelected : Object.keys(data)[0]
+  ) as keyof typeof data
+
+  const modesValues = Object.values(_modes)
+
+  const handleChangeMode: LassoToolsComponentProps['onChangeMode'] = (data) => {
+    return onChangeMode?.(data)
+  }
+
+  return (
+    <>
+      <ModeList data={modesValues} labels={labels?.options}>
+        <OptionsList
+          {...props}
+          labels={labels?.options}
+          data={modesValues}
+          modeSelected={mode}
+          onChangeMode={handleChangeMode}
+        />
+      </ModeList>
+      {!!edit && (
+        <>
+          <Divider />
+          <OptionsList
+            {...props}
+            labels={labels?.options}
+            data={[
+              {
+                ...edit,
+                disabled: !values?.length,
+              },
+            ]}
+            modeSelected={mode}
+            onChangeMode={handleChangeMode}
+          />
+        </>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,143 @@
+import { alpha, type SxProps, type Theme } from '@mui/material'
+
+export const styles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    overflow: 'hidden',
+
+    '&.inline': {
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      gap: ({ spacing }) => spacing(1),
+    },
+  },
+  actions: {
+    icon: {
+      width: ({ spacing }) => spacing(4),
+      height: ({ spacing }) => spacing(4),
+      borderRadius: 0,
+      '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
+        borderRadius: 0,
+      },
+    },
+  },
+  options: {
+    menu: {
+      paddingTop: ({ 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>>