Skip to main content

Filter Search Panel Block

The FilterSearchPanel Component is a fully customizable and accessible search interface with filtering capabilities built with React and TypeScript. It provides a complete search and filter experience with modern design patterns, form validation, and flexible customization options. Built on top of MUI components for consistent styling.

๐Ÿš€ Installationโ€‹

npm install @nodeblocks/frontend-filter-search-panel-block@0.3.0

๐Ÿ“– Usageโ€‹

import {FilterSearchPanel} from '@nodeblocks/frontend-filter-search-panel-block';
Live Editor
function SimpleFilterSearchPanel() {
  const [filters, setFilters] = useState([
    {label: 'Active', key: 'status-active', groupName: 'Status'},
    {label: 'Web Development', key: 'category-web', groupName: 'Category'},
  ]);

  const handleRemoveFilter = (filter) => {
    setFilters(filters.filter(f => f.key !== filter.key));
  };

  const handleSearch = ({search}) => {
    console.log('Search submitted:', search);
    setFilters(prev => [...prev, {label: search, key: search, groupName: 'Custom'}]);
  };

  return (
    <FilterSearchPanel
      filters={filters}
      onClickRemoveFilter={handleRemoveFilter}
      onClickFilterButton={() => console.log('Filter button clicked')}
      onSearch={handleSearch}
      searchPlaceholder="Search services..."
      noFilterText="No filters applied"
      filterLabel="Filter Settings"
    >
      <FilterSearchPanel.SearchInput />
      <FilterSearchPanel.ActionGroup />
    </FilterSearchPanel>
  );
}
Result
Loading...

๐Ÿ”ง Props Referenceโ€‹

Main Component Propsโ€‹

PropTypeDefaultDescription
filtersFilterChip[][]Array of currently selected filter chips to display
defaultSearchValuestringundefinedDefault value for the search input field
onClickRemoveFilter(filter: FilterChip) => voidundefinedCallback function triggered when a filter chip is removed
onClickFilterButton() => voidundefinedCallback function triggered when the filter button is clicked
onSearchChange(event: React.ChangeEvent<HTMLInputElement>) => voidundefinedCallback function triggered when search input value changes
onSearch(data: T) => voidundefinedCallback function triggered when form is submitted with search data
searchPlaceholderstringundefinedPlaceholder text for the search input field
noFilterTextstringundefinedText displayed when no filters are selected
filterLabelstringundefinedLabel text for the filter button
spacingnumber | string1.5Spacing between child elements (MUI Stack spacing)
directionStackDirection'column'Direction of the stack layout
classNamestringundefinedAdditional CSS class name for styling the form container
sxSxProps<Theme>{ p: 2, bgcolor: 'background.default' }MUI system props for custom styling
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: This component inherits all MUI Stack component props (rendered as component="form"). The form submission is handled internally - use onSearch callback to receive form data.

Sub-Componentsโ€‹

The FilterSearchPanel component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

FilterSearchPanel.SearchInputโ€‹

Renders the search input field using MUI TextField.

PropTypeDefaultDescription
searchPlaceholderstring'ๆ–ฐ่ฆใ‚ตใƒผใƒ“ใ‚น้–‹็™บ'Placeholder text shown in the search input
onSearchChange(event: React.ChangeEvent<HTMLInputElement>) => voidContext valueCallback function triggered when input value changes
defaultSearchValuestringContext valueDefault value for the search input
namestring'search'Form field name for the input
typestring'text'HTML input type
childrenReactNodeundefinedCustom content - replaces entire TextField
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>undefinedMUI system props for custom styling

Note: This component inherits all MUI TextField component props. Default size="small". Includes a search icon button that submits the form.

FilterSearchPanel.FilterButtonโ€‹

Renders the filter settings button using MUI Button.

PropTypeDefaultDescription
filterLabelstring'็ตž่พผใฟ่จญๅฎš'Label text displayed on the filter button
onClickFilterButton() => voidContext valueCallback function triggered when button is clicked
childrenReactNodeDefault icon + labelCustom content to override default rendering
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>undefinedMUI system props for custom styling
variantButtonVariant'outlined'MUI Button variant
sizeButtonSize'small'MUI Button size

Note: This component inherits all MUI Button component props. Default content includes a Tune icon from @mui/icons-material.

FilterSearchPanel.SelectedFilterListโ€‹

Renders the list of selected filters or empty state using MUI Box.

PropTypeDefaultDescription
filtersFilterChip[]Context valueArray of filter chips to display
onClickRemoveFilter(filter: FilterChip) => voidContext valueCallback function triggered when a filter is removed
noFilterTextstring'ๆกไปถๆœช่จญๅฎš'Text displayed when no filters are selected
childrenReactNodeDefault filter listCustom content to override default rendering
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>undefinedMUI system props for custom styling

Note: This component inherits all MUI Box component props. Groups filters by groupName property and displays group labels.

FilterSearchPanel.FilterBadgeโ€‹

Renders an individual filter chip using MUI Chip.

PropTypeDefaultDescription
filterFilterChipRequiredFilter chip object containing label, key, and optional groupName
onClickRemoveFilter(filter: FilterChip) => voidContext valueCallback function triggered when the filter is removed
childrenReactNodefilter.labelCustom content to override label text
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>undefinedMUI system props for custom styling

Note: This component inherits all MUI Chip component props. Includes a custom close icon for deletion.

FilterSearchPanel.ActionGroupโ€‹

Combines FilterButton and SelectedFilterList in a horizontal layout using MUI Stack.

PropTypeDefaultDescription
filtersFilterChip[]Context valueArray of filter chips (passed to SelectedFilterList)
onClickRemoveFilter(filter: FilterChip) => voidContext valueCallback for removing filters
filterLabelstringContext valueLabel for the filter button
noFilterTextstringContext valueText when no filters are selected
onClickFilterButton() => voidContext valueCallback for filter button click
childrenReactNodeDefault layoutCustom content to override default rendering
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>undefinedMUI system props for custom styling

Note: This component inherits all MUI Stack component props. Default direction="row" and spacing={1}. Has horizontal scrolling enabled with hidden scrollbar.

๐ŸŽจ Configuration examplesโ€‹

Custom Search Input Stylingโ€‹

<FilterSearchPanel.SearchInput 
  sx={{ 
    '& .MuiOutlinedInput-root': {
      bgcolor: 'background.paper',
      borderRadius: 2
    }
  }}
  placeholder="Custom placeholder..."
/>

Custom Filter Button Stylingโ€‹

<FilterSearchPanel.FilterButton 
  variant="contained"
  color="primary"
  sx={{ minWidth: 150 }}>
  ๐ŸŽฏ Custom Filters
</FilterSearchPanel.FilterButton>

Custom Action Group Layoutโ€‹

<FilterSearchPanel.ActionGroup 
  direction="column"
  spacing={2}
  sx={{ alignItems: 'stretch' }}
/>

๐Ÿ”ง TypeScript Supportโ€‹

Full TypeScript support with comprehensive type definitions:

import FilterSearchPanel from '@nodeblocks/frontend-filter-search-panel-block';
import {StackProps, TextFieldProps, ButtonProps, ChipProps, BoxProps} from '@mui/material';

// Filter chip structure
interface FilterChip {
  label: string;
  key: string;
  groupName?: string;
}

// Default search form data structure
interface SearchFormData {
  search: string;
}

// Main component props extend MUI StackProps (rendered as form)
interface FilterSearchPanelProps<T extends SearchFormData> 
  extends Omit<StackProps<'form'>, 'children' | 'component' | 'onSubmit'> {
  filters?: FilterChip[];
  defaultSearchValue?: string;
  onSearchChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  onClickFilterButton?: () => void;
  onClickRemoveFilter?: (filter: FilterChip) => void;
  onSearch?: (data: T) => void;
  searchPlaceholder?: string;
  noFilterText?: string;
  filterLabel?: string;
  children?: BlocksOverride;
}

function TypedFilterSearchPanel() {
  const [selectedFilters, setSelectedFilters] = useState<FilterChip[]>([
    {label: 'Active', key: 'status-active', groupName: 'Status'},
    {label: 'Premium', key: 'type-premium', groupName: 'Type'},
  ]);

  const handleSearch = (formData: SearchFormData) => {
    console.log('Search submitted:', formData);
  };

  const handleRemoveFilter = (filter: FilterChip) => {
    setSelectedFilters(prev => prev.filter(f => f.key !== filter.key));
  };

  return (
    <FilterSearchPanel
      filters={selectedFilters}
      onSearch={handleSearch}
      onClickRemoveFilter={handleRemoveFilter}
      onClickFilterButton={() => console.log('Opening filter modal')}
      searchPlaceholder="Search for services..."
      noFilterText="No filters applied"
      filterLabel="Filter Options"
      spacing={2}
      sx={{maxWidth: 600}}
    >
      <FilterSearchPanel.SearchInput sx={{bgcolor: 'background.paper'}} />
      <FilterSearchPanel.ActionGroup />
    </FilterSearchPanel>
  );
}

๐Ÿ“ Notesโ€‹

  • The component uses MUI's Stack rendered as a form element with default spacing={1.5} and direction="column"
  • Default background is bgcolor: 'background.default' with p: 2 padding
  • Form submission is handled internally - the onSearch callback receives parsed form data
  • The SearchInput includes a search icon button that submits the form
  • The FilterButton uses MUI's Tune icon from @mui/icons-material
  • SelectedFilterList groups filters by their groupName property and displays group labels
  • FilterBadge includes a custom close icon positioned before the label
  • ActionGroup has horizontal scrolling with hidden scrollbar for overflow handling
  • All sub-components support the sx prop for MUI system styling
  • Block override pattern allows inserting custom blocks between default blocks

Built with โค๏ธ using React, TypeScript, and MUI.