# Types: AppliedFilter to SortOption (/themes/sdk/reference/listing/types-1)

```ts
import { … } from '@poltura/theme-sdk/listing';
```

## `AppliedFilter` [#appliedfilter]

One applied filter, as a removable chip.

<TypeTable type={{"groupId":{"description":"The group the filter belongs to.","type":"string","required":true},"optionId":{"description":"The selected option.","type":"string","required":true},"label":{"description":"The chip text in the page language.","type":"string","required":true},"remove":{"description":"Removes this filter.","type":"() => void","required":true}}} />

## `FilterGroupKind` [#filtergroupkind]

How a filter group is presented: a checklist, colour swatches, a price range or an on/off toggle.

```ts
type FilterGroupKind = 'list' | 'swatch' | 'price' | 'toggle'
```

## `FilterGroupView` [#filtergroupview]

One filter of a product list, such as brand, colour or price.

<TypeTable type={{"id":{"description":"The group's id.","type":"string","required":true},"label":{"description":"The group's title in the page language.","type":"string","required":true},"kind":{"description":"How the group is presented.","type":"FilterGroupKind","required":true},"options":{"description":"The group's choices; empty for a price group.","type":"readonly FilterOptionView[]","required":true},"open":{"description":"Whether the group starts expanded.","type":"boolean","required":true},"maxVisible":{"description":"How many choices show before \"show more\".","type":"number","required":true},"searchable":{"description":"Whether the group offers a search box over its choices.","type":"boolean","required":true},"range":{"description":"The bounds of a price group, or null for other kinds.","type":"{ readonly min: number; readonly max: number; readonly currencyCode: CurrencyCode; } | null","required":true},"activeRange":{"description":"The selected price range of a price group, or null.","type":"PriceRangeSelection | null","required":true},"priceDisplay":{"description":"How a price group takes its range.","type":"FilterPriceDisplay","required":true}}} />

## `FilterOptionView` [#filteroptionview]

One choice inside a filter group.

<TypeTable type={{"id":{"description":"The option's id inside its group.","type":"string","required":true},"label":{"description":"The option's text in the page language.","type":"string","required":true},"count":{"description":"How many products match it, or null when counts are hidden.","type":"number | null","required":true},"selected":{"description":"Whether it is selected.","type":"boolean","required":true},"swatch":{"description":"Its swatch in a swatch group, otherwise null.","type":"Swatch | null","required":true},"icon":{"description":"The icon shown before the label in a list group, as `ContentIcon` draws it, or null.","type":"IconValue | null","required":true},"children":{"description":"Nested choices, such as subcategories.","type":"readonly FilterOptionView[]","required":true}}} />

## `FilterPriceDisplay` [#filterpricedisplay]

How a price group takes its range: a slider, two amount fields, or both.

```ts
type FilterPriceDisplay = 'slider' | 'inputs' | 'both'
```

## `ListingFilterSelection` [#listingfilterselection]

The filters a product list is narrowed by.

<TypeTable type={{"options":{"description":"Selected option ids per group id.","type":"Readonly<Record<string, readonly string[]>>","required":true},"price":{"description":"The selected price range, or null.","type":"PriceRangeSelection | null","required":true}}} />

## `ListingFiltersState` [#listingfiltersstate]

The filter panel's state and the actions that change the selection.

<TypeTable type={{"groups":{"description":"The filter groups, in the merchant's order.","type":"readonly FilterGroupView[]","required":true},"selection":{"description":"The current selection.","type":"ListingFilterSelection","required":true},"toggle":{"description":"Selects or clears one option.","type":"(groupId: string, optionId: string) => void","required":true},"setPriceRange":{"description":"Narrows the list to a price range.","type":"(range: PriceRangeSelection) => void","required":true},"clear":{"description":"Clears one group, or every filter.","type":"(groupId?: string) => void","required":true},"applied":{"description":"The applied filters as removable chips.","type":"readonly AppliedFilter[]","required":true},"selectedCount":{"description":"How many options are selected.","type":"number","required":true},"isPending":{"description":"Whether the list is reloading for the new selection.","type":"boolean","required":true}}} />

## `ListingState` [#listingstate]

A collection, category or search results page with its products, sort and paging.

<TypeTable type={{"header":{"description":"The page's heading.","type":"{ readonly title: string; readonly description: RichTextValue | null; readonly countLabel: string | null; readonly searchQuery: string | null; }","required":true},"products":{"description":"The products on the current page.","type":"readonly ProductCard[]","required":true},"sort":{"description":"The sort menu and the current order.","type":"{ readonly options: readonly SortOption[]; readonly selected: ProductSort; set(sort: ProductSort): void; }","required":true},"pagination":{"description":"Where the list is and how to reach its other pages.","type":"Pagination","required":true},"goToPage":{"description":"Opens another page of the list, keeping the filters and sort, and scrolls back to the top.","type":"(page: number) => void","required":true},"clearSearch":{"description":"Drops the search terms of a results page, keeping the filters and sort.","type":"() => void","required":true},"layout":{"description":"The merchant's grid and visibility choices.","type":"{ readonly columns: { readonly desktop: number; readonly mobile: number; }; readonly imageAspectRatio: string; readonly show: ListingVisibility; }","required":true},"isEmpty":{"description":"Whether nothing matches.","type":"boolean","required":true},"isPending":{"description":"Whether a new page, sort or filter is loading.","type":"boolean","required":true}}} />

## `ListingVisibility` [#listingvisibility]

Which parts of a product list the merchant has switched on.

<TypeTable type={{"filters":{"description":"The filter panel.","type":"boolean","required":true},"appliedFilters":{"description":"The applied-filter chips.","type":"boolean","required":true},"sort":{"description":"The sort menu.","type":"boolean","required":true},"productCount":{"description":"The product count.","type":"boolean","required":true},"addToCart":{"description":"The add-to-cart button on cards.","type":"boolean","required":true},"cardPrice":{"description":"The price on cards.","type":"boolean","required":true},"cardCompareAt":{"description":"The compare-at price on cards.","type":"boolean","required":true},"cardBadge":{"description":"The badge on cards.","type":"boolean","required":true}}} />

## `Pagination` [#pagination]

Where a paged list is and how to reach its other pages.

<TypeTable type={{"page":{"description":"The current page, from 1.","type":"number","required":true},"pageCount":{"description":"How many pages there are.","type":"number","required":true},"total":{"description":"How many items match over every page.","type":"number","required":true},"href":{"description":"The path of a page of the list.","type":"(page: number) => string","required":true}}} />

## `PriceRangeSelection` [#pricerangeselection]

A price range a shopper selected, in major units; a null bound leaves that side open.

<TypeTable type={{"min":{"description":"The lowest price, or null for no lower bound.","type":"number | null","required":true},"max":{"description":"The highest price, or null for no upper bound.","type":"number | null","required":true}}} />

## `SortOption` [#sortoption]

One choice of the sort menu.

<TypeTable type={{"value":{"description":"The sort order.","type":"ProductSort","required":true},"label":{"description":"Its name in the page language.","type":"string","required":true}}} />