Dropdown Components

The Dropdown Components provide various dropdown and menu functionality for the WorkPayCore Frontend application. These components handle selection, filtering, and action menus with consistent styling and behavior patterns.

Overview

This document covers dropdown-related components that provide selection, filtering, and menu functionality with WorkPay's branded styling and various interaction patterns.

Components Overview

Core Dropdown Components

• CustomSelectDropdown - Custom dropdown with search and filtering
• FilterDropdown - Filter dropdown for tables and lists
• ComboBoxButton - Button with dropdown menu
• TableDropdown - Simple table action dropdown
• CustomCurrencySelect - Currency selection dropdown

Dropdown Patterns

• Filter Dropdowns - Common filter dropdown patterns
• Action Dropdowns - Action menu dropdown patterns
• Selection Dropdowns - Data selection patterns

---

CustomSelectDropdown

A comprehensive dropdown component with search functionality, multiple variants, and customizable styling options.

Component Location

import CustomSelectDropdown from 'components/Selects/CustomSelect';

Props

Prop	Type	Required	Default	Description
options	{ label: string; value: string | number }[]	✓	-	Array of select options
onChange	(e: OptionType) => void	✓	-	Value change handler
onVariantChange	(e: OptionType) => void	✓	-	Variant change handler
variant	string	✓	-	Dropdown variant
name	string	✓	-	Input name/label
myValue	string	✓	-	Current selected value
queryParamValue	string	✓	-	Query parameter value
handleClick	() => void	-	-	Click handler
isClearable	boolean	-	true	Show clear button
isDisabled	boolean	-	false	Disabled state

TypeScript Interface

interface CustomSelectDropdownProps {
  options: { label: string; value: string | number }[];
  onChange: (e: OptionType) => void;
  onVariantChange: (e: OptionType) => void;
  variant: string;
  name: string;
  myValue: string;
  queryParamValue: string;
  handleClick?: () => void;
  isClearable?: boolean;
  isDisabled?: boolean;
}

interface OptionType {
  label: string;
  value: string | number;
}

Variants

Base Variant

Full-width dropdown with simple styling:

import CustomSelectDropdown from 'components/Selects/CustomSelect';

<CustomSelectDropdown
  options={[
    { label: 'All Items', value: 'all' },
    { label: 'Active Items', value: 'active' },
    { label: 'Inactive Items', value: 'inactive' },
  ]}
  onChange={handleChange}
  onVariantChange={handleVariantChange}
  variant='base'
  name='Status Filter'
  myValue={selectedValue}
  queryParamValue=''
  isClearable={true}
/>;

Filters Variant

Compact filter dropdown with pill styling:

<CustomSelectDropdown
  options={departmentOptions}
  onChange={handleDepartmentChange}
  onVariantChange={handleVariantChange}
  variant='filters'
  name='Department'
  myValue={selectedDepartment}
  queryParamValue={queryParams.department}
  isClearable={true}
/>

Usage Examples

Basic Selection

const [selectedOption, setSelectedOption] = useState('');

const handleSelectionChange = option => {
  setSelectedOption(option.value);
  // Handle selection logic
};

<CustomSelectDropdown
  options={[
    { label: 'Option 1', value: 'opt1' },
    { label: 'Option 2', value: 'opt2' },
    { label: 'Option 3', value: 'opt3' },
  ]}
  onChange={handleSelectionChange}
  onVariantChange={handleSelectionChange}
  variant='base'
  name='Select Option'
  myValue={selectedOption}
  queryParamValue=''
/>;

Filter Dropdown with URL Parameters

const [filters, setFilters] = useState({});
const [searchParams, setSearchParams] = useSearchParams();

const handleFilterChange = option => {
  const newFilters = { ...filters, category: option.value };
  setFilters(newFilters);
  setSearchParams(newFilters);
};

<CustomSelectDropdown
  options={categoryOptions}
  onChange={handleFilterChange}
  onVariantChange={handleFilterChange}
  variant='filters'
  name='Category'
  myValue={filters.category}
  queryParamValue={searchParams.get('category') || ''}
/>;

---

FilterDropdown

A specialized dropdown component for filtering tables and lists with selected filters indicator.

Component Location

import FilterDropdown from 'components/Dropdown';

Props

Prop	Type	Required	Default	Description
label	string	✓	-	Dropdown label
icon	ReactElement	✓	-	Dropdown icon
menuItems	MenuItemProps[]	✓	-	Menu items array
selectedFiltersCount	number	-	0	Number of selected filters

TypeScript Interface

interface MenuItemProps {
  label: string;
  icon: React.ReactElement;
  onClick: () => void;
  selected: boolean;
}

interface FilterDropdownProps {
  label: string;
  icon: React.ReactElement;
  menuItems: MenuItemProps[];
  selectedFiltersCount?: number;
}

Usage Examples

Basic Filter Menu

import FilterDropdown from 'components/Dropdown';
import { FilterIcon } from 'components/WPIcons';

const filterMenuItems = [
  {
    label: 'All',
    icon: <FilterIcon />,
    onClick: () => handleFilterChange('all'),
    selected: currentFilter === 'all',
  },
  {
    label: 'Active',
    icon: <FilterIcon />,
    onClick: () => handleFilterChange('active'),
    selected: currentFilter === 'active',
  },
  {
    label: 'Inactive',
    icon: <FilterIcon />,
    onClick: () => handleFilterChange('inactive'),
    selected: currentFilter === 'inactive',
  },
];

<FilterDropdown
  label='Status Filter'
  icon={<FilterIcon />}
  menuItems={filterMenuItems}
  selectedFiltersCount={activeFiltersCount}
/>;

Complex Filter with Multiple Options

const statusMenuItems = [
  {
    label: 'All Statuses',
    icon: <AllIcon />,
    onClick: () => setStatusFilter('all'),
    selected: statusFilter === 'all',
  },
  {
    label: 'Pending',
    icon: <PendingIcon />,
    onClick: () => setStatusFilter('pending'),
    selected: statusFilter === 'pending',
  },
  {
    label: 'Approved',
    icon: <ApprovedIcon />,
    onClick: () => setStatusFilter('approved'),
    selected: statusFilter === 'approved',
  },
  {
    label: 'Rejected',
    icon: <RejectedIcon />,
    onClick: () => setStatusFilter('rejected'),
    selected: statusFilter === 'rejected',
  },
];

<FilterDropdown
  label='Status'
  icon={<StatusIcon />}
  menuItems={statusMenuItems}
  selectedFiltersCount={getActiveFiltersCount()}
/>;

---

ComboBoxButton

A button group component with a dropdown menu for selecting actions or options.

Component Location

import ComboBoxButton from 'components/Forms/Buttons/ComboBox';

Props

Prop	Type	Required	Default	Description
data	ComboBoxItem[]	✓	-	Array of menu items
variant	string	✓	-	Button variant
size	string	✓	-	Button size
defaultIndex	number	✓	-	Default selected item index
isDisabled	boolean	-	false	Disabled state
isLoading	boolean	-	false	Loading state

TypeScript Interface

interface ComboBoxItem {
  label: string;
  value: string;
  handleClick: () => void;
}

interface ComboBoxButtonProps {
  data: ComboBoxItem[];
  variant: string;
  size: string;
  defaultIndex: number;
  isDisabled?: boolean;
  isLoading?: boolean;
}

Usage Examples

Action Selector

import ComboBoxButton from 'components/Forms/Buttons/ComboBox';

const actionItems = [
  {
    label: 'Edit',
    value: 'edit',
    handleClick: () => handleEdit(),
  },
  {
    label: 'Delete',
    value: 'delete',
    handleClick: () => handleDelete(),
  },
  {
    label: 'Duplicate',
    value: 'duplicate',
    handleClick: () => handleDuplicate(),
  },
];

<ComboBoxButton
  data={actionItems}
  variant='outline'
  size='md'
  defaultIndex={0}
  isLoading={isProcessing}
/>;

Export Options

const exportOptions = [
  {
    label: 'Export as PDF',
    value: 'pdf',
    handleClick: () => exportToPDF(),
  },
  {
    label: 'Export as Excel',
    value: 'excel',
    handleClick: () => exportToExcel(),
  },
  {
    label: 'Export as CSV',
    value: 'csv',
    handleClick: () => exportToCSV(),
  },
];

<ComboBoxButton
  data={exportOptions}
  variant='solid'
  size='sm'
  defaultIndex={0}
  isDisabled={!hasData}
/>;

---

TableDropdown

A simple dropdown component for table actions with basic styling.

Component Location

import DropDown from 'components/Tables/ActionableTable/DropDown';

Props

Prop	Type	Required	Default	Description
title	string	✓	-	Dropdown title
options	DropdownOption[]	✓	-	Array of dropdown options
selectedValue	string	-	-	Currently selected value
onItemClick	(value: string) => void	✓	-	Item click handler

TypeScript Interface

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

interface TableDropdownProps {
  title: string;
  options: DropdownOption[];
  selectedValue?: string;
  onItemClick: (value: string) => void;
}

Usage Examples

Status Selection

import DropDown from 'components/Tables/ActionableTable/DropDown';

const statusOptions = [
  { label: 'All', value: 'all' },
  { label: 'Active', value: 'active' },
  { label: 'Inactive', value: 'inactive' },
];

<DropDown
  title='Status'
  options={statusOptions}
  selectedValue={selectedStatus}
  onItemClick={handleStatusChange}
/>;

Action Selection

const actionOptions = [
  { label: 'View Details', value: 'view' },
  { label: 'Edit', value: 'edit' },
  { label: 'Delete', value: 'delete' },
];

<DropDown
  title='Actions'
  options={actionOptions}
  onItemClick={handleActionSelect}
/>;

---

CustomCurrencySelect

A specialized dropdown for currency selection with flag icons and custom styling.

Component Location

import CustomCurrencySelect from 'components/Forms/V7/CurrencyInput/CustomCurrencySelect';
// or
import CustomCurrencySelect from 'components/Forms/SelectsWithData/CurrencyAmount/CustomCurrencySelect';