padding: spacing()

in public/src/components/channelManagement/MultiSelectCountryEditor.tsx [18:79]
56 lines of code
3 McCabe index (conditional complexity)

    padding: spacing(2),
  },
}));

interface Option {
  label: string;
  value: string;
}

const options: Option[] = Object.entries(countries).map(([value, label]) => ({ value, label }));

interface MultiselectAutocompleteProps {
  disabled: boolean;
  regionTargeting: RegionTargeting;
  onRegionTargetingUpdate: (regionTargeting: RegionTargeting) => void;
}

const MultiselectAutocomplete: React.FC<MultiselectAutocompleteProps> = ({
  disabled,
  regionTargeting,
  onRegionTargetingUpdate,
}: MultiselectAutocompleteProps) => {
  const classes = useStyles();

  const [inputValue, setInputValue] = React.useState<string>('');

  return (
    <div className={classes.container}>
      <span style={{ fontSize: '1rem', fontWeight: 'normal' }}>
        Additionally if you want to target by countries select from the list
      </span>
      <Autocomplete
        id={'multi-select-country'}
        multiple
        disabled={disabled}
        options={options}
        getOptionLabel={option => option.label}
        value={regionTargeting.targetedCountryCodes?.map(country => {
          const option = options.find(option => option.value === country);
          return option ?? { label: country, value: country };
        })}
        inputValue={inputValue}
        componentsProps={{
          popper: {
            modifiers: [
              {
                name: 'flip',
                enabled: false,
              },
              {
                name: 'preventOverflow',
                enabled: false,
              },
            ],
          },
        }}
        onInputChange={(event, newInputValue, reason): void => {
          if (reason === 'input') {
            setInputValue(newInputValue);
          }
        }}
        renderInput={params => (