Home > widget-integration > FilterStates

FilterStates type

Complete runtime state for an active filter widget.

Extends FilterProps with all runtime state management properties including loading states, user interactions, URL parameter mappings, and UI state.

Signature:

export type FilterStates = FilterProps & {
	isLoading: boolean;
	error: Error | null;
	latestRequestKey: string | null;
	shortParamsMap: Map<string, string>;
	longParamsMap: Map<string, string>;
	optionsMap: Record<string, FilterConfig>;
	pagination: {
		page: number;
	};
	filterTreeDesktopOpening: boolean;
	infiniteScrollLoading: boolean;
	collapseState: Record<string, any>;
	filterKeyCode: string;
	filterOptionItemSelecting: Record<string, any>;
	selectedFilter: any;
	forceRender: boolean;
	paginationInfiniteLoading: boolean;
	actionMapping: Record<string, Record<string, any>>;
	viewMoreState?: Record<string, ViewMoreState>;
	viewMoreTrigger?: {
		filterOptionId: string;
		displayType: string;
	};
	collectionId?: string | null;
	collectionHandle?: string | null;
	collectionTags?: string[] | null;
	collapseStateMultipleLevel?: Record<string, any>;
	filterCurrentFocus: string;
	filterOptionIdMobileSelected: any;
	previousFilterOptions: any;
	filterResetTimeoutId: any;
	filterTreeViewPort: any;
	rangeFilter: any;
	sort: any;
	isRendering: boolean;
	oldDOM: HTMLElement | null;
	stickyOffset: any;
	limitList: any;
	processedLabels: WeakSet<HTMLElement>;
	activeViewAsButton: any;
	isClearing?: boolean;
	filterKeyboardActive?: boolean;
};

References: FilterProps, FilterConfig, ViewMoreState

Remarks

This is the core state object used throughout the filter module. It's stored in FilterStore and accessed by FilterAPI, FilterHandler, and FilterHelper.

Technical Support teams can reference this type when extending filter behavior to understand what state properties are available for customization.

Example

Access filter state in custom handler:

window.boostWidgetIntegration.extend('FilterHandler', (FilterHandler) => {
  return class extends FilterHandler {
    async handleSort(e, actionId) {
      const state = this.filterStore.getState();
      // Access state properties
      if (state.isLoading) return;

      // Custom logic before sorting
      console.log('Current page:', state.pagination.page);
      console.log('Selected filters:', state.selectedFilter);

      return super.handleSort(e, actionId);
    }
  };
});