Skip to main content

InterfaceAdminSearchFilterBarSimple

Admin Docs

Interface: InterfaceAdminSearchFilterBarSimple

Defined in: src/types/AdminSearchFilterBar/interface.ts:221

Configuration for AdminSearchFilterBar with only search functionality (no dropdowns). Use this variant when you only need search capabilities without any sorting or filtering dropdowns.

Example​

<AdminSearchFilterBar
  hasDropdowns={false}
  searchPlaceholder="Search requests"
  searchValue={searchTerm}
  onSearchChange={setSearchTerm}
/>

Extends​

  • InterfaceAdminSearchFilterBarBase

Properties​

containerClassName?​

optional containerClassName: string

Defined in: src/types/AdminSearchFilterBar/interface.ts:183

Optional custom class name for the container div. Job: Allows overriding the default container styling for different screen layouts.

Default​

"btnsContainerSearchBar"

Example​

"btnsContainer", "btnsContainerSearchBar"

Inherited from​

InterfaceAdminSearchFilterBarBase.containerClassName

debounceDelay?​

optional debounceDelay: number

Defined in: src/types/AdminSearchFilterBar/interface.ts:192

Optional delay in milliseconds for debouncing search input changes. Job: Controls how long to wait after the user stops typing before calling onSearchChange. This prevents excessive API calls while the user is actively typing.

Default​

300

Example​

300, 500, 1000

Inherited from​

InterfaceAdminSearchFilterBarBase.debounceDelay

hasDropdowns​

hasDropdowns: false

Defined in: src/types/AdminSearchFilterBar/interface.ts:228

Discriminator property indicating this variant has no dropdowns.

Job: When false, the dropdowns property must be omitted.

onSearchChange()​

onSearchChange: (value) => void

Defined in: src/types/AdminSearchFilterBar/interface.ts:143

Callback function triggered on every keystroke in the search input. Trigger: User types or deletes characters in the search field (onChange event). Job: Updates the parent component's search state immediately. Parent components should handle their own debouncing for expensive operations.

Parameters​

value​

string

The current value of the search input field

Returns​

void

Example​

onSearchChange={(value) => setSearchTerm(value)}

Inherited from​

InterfaceAdminSearchFilterBarBase.onSearchChange

onSearchSubmit()?​

optional onSearchSubmit: (value) => void

Defined in: src/types/AdminSearchFilterBar/interface.ts:159

Optional callback function triggered when the user explicitly submits the search. Trigger: User presses Enter key or clicks the search button. Job: Performs an immediate search action. Useful for triggering search on explicit user action vs typing.

Parameters​

value​

string

The current value of the search input field

Returns​

void

Example​

onSearchSubmit={(value) => {
  console.log('User explicitly searched for:', value);
  performSearch(value);
}}

Inherited from​

InterfaceAdminSearchFilterBarBase.onSearchSubmit

searchButtonTestId?​

optional searchButtonTestId: string

Defined in: src/types/AdminSearchFilterBar/interface.ts:175

Optional data-testid for the search button. Job: Enables testing frameworks to identify the search button element.

Default​

"searchButton"

Example​

"searchPluginsBtn", "searchBtn", "searchButton"

Inherited from​

InterfaceAdminSearchFilterBarBase.searchButtonTestId

searchInputTestId?​

optional searchInputTestId: string

Defined in: src/types/AdminSearchFilterBar/interface.ts:167

Optional data-testid for the search input field. Job: Enables testing frameworks to identify the search input element.

Default​

"searchInput"

Example​

"searchPlugins", "searchBy", "searchRequests"

Inherited from​

InterfaceAdminSearchFilterBarBase.searchInputTestId

searchPlaceholder​

searchPlaceholder: string

Defined in: src/types/AdminSearchFilterBar/interface.ts:122

Placeholder text displayed in the search input field. Job: Provides guidance to users about what they can search for.

Example​

"Search by volunteer", "Search requests", "Search plugins"

Inherited from​

InterfaceAdminSearchFilterBarBase.searchPlaceholder

searchValue​

searchValue: string

Defined in: src/types/AdminSearchFilterBar/interface.ts:130

The current search term value. Job: Controls the value of the search input field (controlled component pattern). This should be managed in the parent component's state.

Example​

"John Doe", "authentication", ""

Inherited from​

InterfaceAdminSearchFilterBarBase.searchValue

translations?​

optional translations: InterfaceAdminSearchFilterBarTranslations

Defined in: src/types/AdminSearchFilterBar/interface.ts:205

Optional translation overrides for accessibility and UI customization. Job: Allows customizing internal component translations while providing sensible defaults.

Example​

translations: {
  searchButtonAriaLabel: "Search for volunteers",
  dropdownAriaLabel: "Toggle {label} options"
}

Inherited from​

InterfaceAdminSearchFilterBarBase.translations