@iress-oss/ids-mcp-server 5.15.0 → 5.20.2

package/generated/docs/components_components-filter-docs.md

@@ -0,0 +1,4080 @@
+Filter
+======
+
+Overview
+--------
+
+A filter allows you to pick one or more options from a list (that may be searchable) and is triggered by an activator button.
+
+[](./iframe.html?id=components-filter--default)
+
+Filter
+
+None selected
+
+Hide codedrawOpen in CodeSandbox
+
+<IressFilter
+  label\="Filter"
+  options\={\[
+    {
+      label: 'Option 1',
+      value: 1
+    },
+    {
+      label: 'Option 2',
+      value: 2
+    },
+    {
+      label: 'Option 3',
+      value: 3
+    },
+    {
+      label: 'Option 4',
+      value: 4
+    },
+    {
+      label: 'Option 5',
+      value: 5
+    }
+  \]}
+  popoverProps\={{
+    container: {}
+  }}
+/>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Value of selected option for uncontrolled filter.
+
+union
+
+
+
+ | \- | Set object |
+| inputProps | 
+
+Customise the searchable `IressInput` props for your needs.
+
+Pick
+
+
+
+ | { clearable: true, prepend: <IressIcon name="search" />, watermark: true, } | Set object |
+| label\* | 
+
+Label to display in the activator button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Filter"
+
+ |
+| limitDesktop | 
+
+ | 
+
+12
+
+ | Set object |
+| limitMobile | 
+
+ | 
+
+6
+
+ | Set object |
+| multiSelect | 
+
+Multi-select mode. When `true`, multiple options can be selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the value changes.
+
+(selected?: LabelValueMeta | LabelValueMeta\[\]) => void
+
+ | \- | \- |
+| onReset | 
+
+Emitted when the value is reset.
+
+() => void
+
+ | \- | \- |
+| options | 
+
+array
+
+
+
+ | \- | 
+
+Edit JSON
+
+*   options :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 2 keys
+        
+    *   3 :
+        
+        {...} 2 keys
+        
+    *   4 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| popoverProps | 
+
+Customise the IressPopover props for your needs.
+
+FilterPopoverProps
+
+
+
+ | { align: 'bottom-start' } | 
+
+Edit JSON
+
+popoverProps :
+
+{
+
+}
+
+
+
+
+
+
+
+ |
+| searchable | 
+
+When `true` a search field is shown to search for specific filter option(s).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| searchNoResultsText | 
+
+Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selectedOptionsText | 
+
+Text displayed next to label when two or more options are selected.
+
+string
+
+
+
+ | \- | Set string |
+| value | 
+
+Value of selected option for controlled filter.
+
+union
+
+
+
+ | \- | Set object |
+| visibleResetButton | 
+
+When `true`, a reset button will be shown above the options. If provided a string, it will be used as the reset button label.
+
+union
+
+
+
+ | \- | Set object |
+
+Usage
+-----
+
+The `IressFilter` component has been built to be flexible enough to cover most application needs, allowing a user to add or remove data items from a displayed data set.
+
+This component is not designed to be used within forms and should be used to provide instant updates to rendered data. Instead, in forms, you should use components like `IressSelect`, `IressCombobox` and `IressCheckboxGroup`.
+
+Here is an example using multiple `IressFilter`s to filter an `IressTable`.
+
+[](./iframe.html?id=components-filter--search-table)
+
+Name
+
+None selected
+
+Status
+
+None selected
+
+Location
+
+None selected
+
+Gender
+
+None selected
+
+Reset filters
+
+* * *
+
+System users
+| User | Name | Status | Location | Gender |
+| --- | --- | --- | --- | --- |
+| farmboy | Luke Skywalker | Inactive | Temple Island | male |
+| nevertellmetheodds | Han Solo | Inactive | unknown | male |
+| goldenrod | C-3PO | Active | Space | n/a |
+| whistles | R2-D2 | Active | Space | n/a |
+| princess | Leia Organa | Inactive | unknown | female |
+
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressInline,
+  IressStack,
+  IressTable,
+  type LabelValueMeta,
+  IressFilter,
+  type IressFilterProps,
+  IressButton,
+  IressDivider,
+} from '@/main';
+import { useMemo, useState } from 'react';
+import { searchStarWarsCharacters } from '@/mocks/starWars';
+const toArray \= <T,\>(item?: T | T\[\]): T\[\] \=> {
+  if (Array.isArray(item)) {
+    return item;
+  }
+  return item !== undefined ? \[item\] : \[\];
+};
+const USERS \= \[
+  {
+    user: 'farmboy',
+    name: 'Luke Skywalker',
+    location: 'Temple Island',
+    gender: 'male',
+    status: 'Inactive',
+  },
+  {
+    user: 'nevertellmetheodds',
+    name: 'Han Solo',
+    location: 'unknown',
+    gender: 'male',
+    status: 'Inactive',
+  },
+  {
+    user: 'goldenrod',
+    name: 'C-3PO',
+    location: 'Space',
+    gender: 'n/a',
+    status: 'Active',
+  },
+  {
+    user: 'whistles',
+    name: 'R2-D2',
+    location: 'Space',
+    gender: 'n/a',
+    status: 'Active',
+  },
+  {
+    user: 'princess',
+    name: 'Leia Organa',
+    location: 'unknown',
+    gender: 'female',
+    status: 'Inactive',
+  },
+\];
+const getUniqueValues \= (key: string): LabelValueMeta\[\] \=> {
+  const unique: string\[\] \= \[\];
+  USERS.forEach((user) \=> {
+    const propVal \= user\[key as never\];
+    if (!unique.includes(propVal)) unique.push(propVal);
+  });
+  return unique.map((item: string) \=> ({
+    label: item,
+    value: item,
+  }));
+};
+export const FilterSearchTable \= () \=> {
+  const \[name, setName\] \= useState<LabelValueMeta\[\]\>(\[\]);
+  const \[status, setStatus\] \= useState<LabelValueMeta\[\]\>(\[\]);
+  const \[location, setLocation\] \= useState<LabelValueMeta\[\]\>(\[\]);
+  const \[gender, setGender\] \= useState<LabelValueMeta\[\]\>(\[\]);
+  const columns \= \[
+    { key: 'user', label: 'User' },
+    { key: 'name', label: 'Name' },
+    { key: 'status', label: 'Status' },
+    { key: 'location', label: 'Location' },
+    { key: 'gender', label: 'Gender' },
+  \];
+  const rows \= useMemo(() \=> {
+    const match \= (filter: LabelValueMeta\[\], detail: string): boolean \=>
+      filter.length \=== 0 ||
+      filter.some(
+        (filterItem) \=> (filterItem.value ?? filterItem.label) \=== detail,
+      );
+    return USERS.filter(
+      (user) \=>
+        match(name, user.name) &&
+        match(status, user.status) &&
+        match(location, user.location) &&
+        match(gender, user.gender),
+    );
+  }, \[name, status, location, gender\]);
+  const handleReset \= () \=> {
+    setName(\[\]);
+    setStatus(\[\]);
+    setLocation(\[\]);
+    setGender(\[\]);
+  };
+  return (
+    <IressStack gutter\={IressStack.Gutter.Md}\>
+      <IressInline gutter\={IressInline.Gutter.Md}\>
+        <IressFilter
+          {...{
+  label: 'Filter',
+  options: \[
+    {
+      label: 'Option 1',
+      value: 1,
+    },
+    {
+      label: 'Option 2',
+      value: 2,
+    },
+    {
+      label: 'Option 3',
+      value: 3,
+    },
+    {
+      label: 'Option 4',
+      value: 4,
+    },
+    {
+      label: 'Option 5',
+      value: 5,
+    },
+  \],
+  popoverProps: {
+    container: {},
+  },
+  visibleResetButton: true,
+}}
+          label\="Name"
+          options\={searchStarWarsCharacters}
+          value\={name}
+          onChange\={(value) \=> setName(toArray(value))}
+          onReset\={() \=> setName(\[\])}
+        />
+        <IressFilter
+          {...{
+  label: 'Filter',
+  options: \[
+    {
+      label: 'Option 1',
+      value: 1,
+    },
+    {
+      label: 'Option 2',
+      value: 2,
+    },
+    {
+      label: 'Option 3',
+      value: 3,
+    },
+    {
+      label: 'Option 4',
+      value: 4,
+    },
+    {
+      label: 'Option 5',
+      value: 5,
+    },
+  \],
+  popoverProps: {
+    container: {},
+  },
+  visibleResetButton: true,
+}}
+          label\="Status"
+          options\={getUniqueValues('status')}
+          value\={status}
+          onChange\={(value) \=> setStatus(toArray(value))}
+          onReset\={() \=> setStatus(\[\])}
+        />
+        <IressFilter
+          {...{
+  label: 'Filter',
+  options: \[
+    {
+      label: 'Option 1',
+      value: 1,
+    },
+    {
+      label: 'Option 2',
+      value: 2,
+    },
+    {
+      label: 'Option 3',
+      value: 3,
+    },
+    {
+      label: 'Option 4',
+      value: 4,
+    },
+    {
+      label: 'Option 5',
+      value: 5,
+    },
+  \],
+  popoverProps: {
+    container: {},
+  },
+  visibleResetButton: true,
+}}
+          label\="Location"
+          options\={getUniqueValues('location')}
+          value\={location}
+          onChange\={(value) \=> setLocation(toArray(value))}
+          onReset\={() \=> setLocation(\[\])}
+        />
+        <IressFilter
+          {...{
+  label: 'Filter',
+  options: \[
+    {
+      label: 'Option 1',
+      value: 1,
+    },
+    {
+      label: 'Option 2',
+      value: 2,
+    },
+    {
+      label: 'Option 3',
+      value: 3,
+    },
+    {
+      label: 'Option 4',
+      value: 4,
+    },
+    {
+      label: 'Option 5',
+      value: 5,
+    },
+  \],
+  popoverProps: {
+    container: {},
+  },
+  visibleResetButton: true,
+}}
+          label\="Gender"
+          options\={getUniqueValues('gender')}
+          value\={gender}
+          onChange\={(value) \=> setGender(toArray(value))}
+          onReset\={() \=> setGender(\[\])}
+        />
+        <IressButton onClick\={handleReset} mode\={IressButton.Mode.Tertiary}\>
+          Reset filters        </IressButton\>
+      </IressInline\>
+      <IressDivider />
+      <IressTable
+        caption\="System users"
+        columns\={columns}
+        rows\={rows}
+        empty\={'No results found'}
+      />
+    </IressStack\>
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Value of selected option for uncontrolled filter.
+
+union
+
+
+
+ | \- | Set object |
+| inputProps | 
+
+Customise the searchable `IressInput` props for your needs.
+
+Pick
+
+
+
+ | { clearable: true, prepend: <IressIcon name="search" />, watermark: true, } | Set object |
+| label\* | 
+
+Label to display in the activator button.
+
+ReactNode
+
+
+
+ | \- | \- |
+| limitDesktop | 
+
+ | 
+
+12
+
+ | Set object |
+| limitMobile | 
+
+ | 
+
+6
+
+ | Set object |
+| multiSelect | 
+
+Multi-select mode. When `true`, multiple options can be selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the value changes.
+
+(selected?: LabelValueMeta | LabelValueMeta\[\]) => void
+
+ | \- | \- |
+| onReset | 
+
+Emitted when the value is reset.
+
+() => void
+
+ | \- | \- |
+| options | 
+
+array
+
+
+
+ | \- | \- |
+| popoverProps | 
+
+Customise the IressPopover props for your needs.
+
+FilterPopoverProps
+
+
+
+ | { align: 'bottom-start' } | 
+
+Edit JSON
+
+popoverProps :
+
+{
+
+}
+
+
+
+
+
+
+
+ |
+| searchable | 
+
+When `true` a search field is shown to search for specific filter option(s).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| searchNoResultsText | 
+
+Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selectedOptionsText | 
+
+Text displayed next to label when two or more options are selected.
+
+string
+
+
+
+ | \- | Set string |
+| value | 
+
+Value of selected option for controlled filter.
+
+union
+
+
+
+ | \- | \- |
+| visibleResetButton | 
+
+When `true`, a reset button will be shown above the options. If provided a string, it will be used as the reset button label.
+
+union
+
+
+
+ | \- | 
+
+true
+
+ |
+
+### Label
+
+The `label` prop is required for the filter to be displayed. It is used to describe the filter to the user.
+
+When the filter has selected options, it will append the label of the first option, or the number of selected options if `multiSelect` is true and there is more than one item selected.
+
+[](./iframe.html?id=components-filter--label)
+
+Custom label
+
+None selected
+
+Hide codedrawOpen in CodeSandbox
+
+<IressFilter
+  label\="Custom label"
+  multiSelect
+  options\={\[
+    {
+      label: 'Option 1',
+      value: 1
+    },
+    {
+      label: 'Option 2',
+      value: 2
+    },
+    {
+      label: 'Option 3',
+      value: 3
+    },
+    {
+      label: 'Option 4',
+      value: 4
+    },
+    {
+      label: 'Option 5',
+      value: 5
+    }
+  \]}
+  popoverProps\={{
+    container: {}
+  }}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Value of selected option for uncontrolled filter.
+
+union
+
+
+
+ | \- | Set object |
+| inputProps | 
+
+Customise the searchable `IressInput` props for your needs.
+
+Pick
+
+
+
+ | { clearable: true, prepend: <IressIcon name="search" />, watermark: true, } | Set object |
+| label\* | 
+
+Label to display in the activator button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Custom label"
+
+ |
+| limitDesktop | 
+
+ | 
+
+12
+
+ | Set object |
+| limitMobile | 
+
+ | 
+
+6
+
+ | Set object |
+| multiSelect | 
+
+Multi-select mode. When `true`, multiple options can be selected.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| onChange | 
+
+Emitted when the value changes.
+
+(selected?: LabelValueMeta | LabelValueMeta\[\]) => void
+
+ | \- | \- |
+| onReset | 
+
+Emitted when the value is reset.
+
+() => void
+
+ | \- | \- |
+| options | 
+
+array
+
+
+
+ | \- | 
+
+Edit JSON
+
+*   options :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 2 keys
+        
+    *   3 :
+        
+        {...} 2 keys
+        
+    *   4 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| popoverProps | 
+
+Customise the IressPopover props for your needs.
+
+FilterPopoverProps
+
+
+
+ | { align: 'bottom-start' } | 
+
+Edit JSON
+
+popoverProps :
+
+{
+
+}
+
+
+
+
+
+
+
+ |
+| searchable | 
+
+When `true` a search field is shown to search for specific filter option(s).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| searchNoResultsText | 
+
+Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selectedOptionsText | 
+
+Text displayed next to label when two or more options are selected.
+
+string
+
+
+
+ | \- | Set string |
+| value | 
+
+Value of selected option for controlled filter.
+
+union
+
+
+
+ | \- | Set object |
+| visibleResetButton | 
+
+When `true`, a reset button will be shown above the options. If provided a string, it will be used as the reset button label.
+
+union
+
+
+
+ | \- | Set object |
+
+### Uncontrolled
+
+The `defaultValue` prop can be used to set the initial value of the combobox. The value will be managed by the component.
+
+**Note:** The `defaultValue` prop is not checked against the options provided, allowing it to work with asynchronous options.
+
+[](./iframe.html?id=components-filter--uncontrolled)
+
+Filter: Option 1
+
+None selected
+
+Hide codedrawOpen in CodeSandbox
+
+<IressFilter
+  defaultValue\={{
+    label: 'Option 1',
+    value: 1
+  }}
+  label\="Filter"
+  options\={\[
+    {
+      label: 'Option 1',
+      value: 1
+    },
+    {
+      label: 'Option 2',
+      value: 2
+    },
+    {
+      label: 'Option 3',
+      value: 3
+    },
+    {
+      label: 'Option 4',
+      value: 4
+    },
+    {
+      label: 'Option 5',
+      value: 5
+    }
+  \]}
+  popoverProps\={{
+    container: {}
+  }}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Value of selected option for uncontrolled filter.
+
+union
+
+
+
+ | \- | 
+
+Edit JSON
+
+defaultValue :
+
+{
+
+*   label : "Option 1"
+*   value : 1
+
+}
+
+
+
+
+
+
+
+ |
+| inputProps | 
+
+Customise the searchable `IressInput` props for your needs.
+
+Pick
+
+
+
+ | { clearable: true, prepend: <IressIcon name="search" />, watermark: true, } | Set object |
+| label\* | 
+
+Label to display in the activator button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Filter"
+
+ |
+| limitDesktop | 
+
+ | 
+
+12
+
+ | Set object |
+| limitMobile | 
+
+ | 
+
+6
+
+ | Set object |
+| multiSelect | 
+
+Multi-select mode. When `true`, multiple options can be selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the value changes.
+
+(selected?: LabelValueMeta | LabelValueMeta\[\]) => void
+
+ | \- | \- |
+| onReset | 
+
+Emitted when the value is reset.
+
+() => void
+
+ | \- | \- |
+| options | 
+
+array
+
+
+
+ | \- | 
+
+Edit JSON
+
+*   options :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 2 keys
+        
+    *   3 :
+        
+        {...} 2 keys
+        
+    *   4 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| popoverProps | 
+
+Customise the IressPopover props for your needs.
+
+FilterPopoverProps
+
+
+
+ | { align: 'bottom-start' } | 
+
+Edit JSON
+
+popoverProps :
+
+{
+
+}
+
+
+
+
+
+
+
+ |
+| searchable | 
+
+When `true` a search field is shown to search for specific filter option(s).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| searchNoResultsText | 
+
+Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selectedOptionsText | 
+
+Text displayed next to label when two or more options are selected.
+
+string
+
+
+
+ | \- | Set string |
+| value | 
+
+Value of selected option for controlled filter.
+
+union
+
+
+
+ | \- | Set object |
+| visibleResetButton | 
+
+When `true`, a reset button will be shown above the options. If provided a string, it will be used as the reset button label.
+
+union
+
+
+
+ | \- | Set object |
+
+### Controlled
+
+The `value` prop can be used to completely control the state of the component. Use the `onChange` and `onReset` props to sync your state with the component.
+
+**Note:** The `value` prop is not checked against the options provided, allowing it to work with asynchronous options.
+
+[](./iframe.html?id=components-filter--controlled)
+
+Filter
+
+None selected
+
+Hide codedrawOpen in CodeSandbox
+
+import { IressFilter, type IressFilterProps } from '@/main';
+import { useState } from 'react';
+export const FilterUsingState \= () \=> {
+  const \[value, setValue\] \= useState<IressFilterProps\['value'\]\>();
+  return (
+    <IressFilter
+      {...{
+  label: 'Filter',
+  options: \[
+    {
+      label: 'Option 1',
+      value: 1,
+    },
+    {
+      label: 'Option 2',
+      value: 2,
+    },
+    {
+      label: 'Option 3',
+      value: 3,
+    },
+    {
+      label: 'Option 4',
+      value: 4,
+    },
+    {
+      label: 'Option 5',
+      value: 5,
+    },
+  \],
+  popoverProps: {
+    container: {},
+  },
+}}
+      onChange\={(newValue) \=> setValue(newValue)}
+      onReset\={() \=> setValue(undefined)}
+      value\={value}
+    />
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Value of selected option for uncontrolled filter.
+
+union
+
+
+
+ | \- | \- |
+| inputProps | 
+
+Customise the searchable `IressInput` props for your needs.
+
+Pick
+
+
+
+ | { clearable: true, prepend: <IressIcon name="search" />, watermark: true, } | Set object |
+| label\* | 
+
+Label to display in the activator button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Filter"
+
+ |
+| limitDesktop | 
+
+ | 
+
+12
+
+ | Set object |
+| limitMobile | 
+
+ | 
+
+6
+
+ | Set object |
+| multiSelect | 
+
+Multi-select mode. When `true`, multiple options can be selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the value changes.
+
+(selected?: LabelValueMeta | LabelValueMeta\[\]) => void
+
+ | \- | \- |
+| onReset | 
+
+Emitted when the value is reset.
+
+() => void
+
+ | \- | \- |
+| options | 
+
+array
+
+
+
+ | \- | 
+
+Edit JSON
+
+*   options :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 2 keys
+        
+    *   3 :
+        
+        {...} 2 keys
+        
+    *   4 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| popoverProps | 
+
+Customise the IressPopover props for your needs.
+
+FilterPopoverProps
+
+
+
+ | { align: 'bottom-start' } | 
+
+Edit JSON
+
+popoverProps :
+
+{
+
+}
+
+
+
+
+
+
+
+ |
+| searchable | 
+
+When `true` a search field is shown to search for specific filter option(s).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| searchNoResultsText | 
+
+Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selectedOptionsText | 
+
+Text displayed next to label when two or more options are selected.
+
+string
+
+
+
+ | \- | Set string |
+| value | 
+
+Value of selected option for controlled filter.
+
+union
+
+
+
+ | \- | \- |
+| visibleResetButton | 
+
+When `true`, a reset button will be shown above the options. If provided a string, it will be used as the reset button label.
+
+union
+
+
+
+ | \- | Set object |
+
+### Multiple selection
+
+Using the `multiSelect` prop, the `IressFilter` will allow the user to make multiple selections.
+
+[](./iframe.html?id=components-filter--multi-select)
+
+Filter
+
+None selected
+
+Hide codedrawOpen in CodeSandbox
+
+<IressFilter
+  label\="Filter"
+  multiSelect
+  options\={\[
+    {
+      label: 'Option 1',
+      value: 1
+    },
+    {
+      label: 'Option 2',
+      value: 2
+    },
+    {
+      label: 'Option 3',
+      value: 3
+    },
+    {
+      label: 'Option 4',
+      value: 4
+    },
+    {
+      label: 'Option 5',
+      value: 5
+    }
+  \]}
+  popoverProps\={{
+    container: {}
+  }}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Value of selected option for uncontrolled filter.
+
+union
+
+
+
+ | \- | Set object |
+| inputProps | 
+
+Customise the searchable `IressInput` props for your needs.
+
+Pick
+
+
+
+ | { clearable: true, prepend: <IressIcon name="search" />, watermark: true, } | Set object |
+| label\* | 
+
+Label to display in the activator button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Filter"
+
+ |
+| limitDesktop | 
+
+ | 
+
+12
+
+ | Set object |
+| limitMobile | 
+
+ | 
+
+6
+
+ | Set object |
+| multiSelect | 
+
+Multi-select mode. When `true`, multiple options can be selected.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| onChange | 
+
+Emitted when the value changes.
+
+(selected?: LabelValueMeta | LabelValueMeta\[\]) => void
+
+ | \- | \- |
+| onReset | 
+
+Emitted when the value is reset.
+
+() => void
+
+ | \- | \- |
+| options | 
+
+array
+
+
+
+ | \- | 
+
+Edit JSON
+
+*   options :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 2 keys
+        
+    *   3 :
+        
+        {...} 2 keys
+        
+    *   4 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| popoverProps | 
+
+Customise the IressPopover props for your needs.
+
+FilterPopoverProps
+
+
+
+ | { align: 'bottom-start' } | 
+
+Edit JSON
+
+popoverProps :
+
+{
+
+}
+
+
+
+
+
+
+
+ |
+| searchable | 
+
+When `true` a search field is shown to search for specific filter option(s).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| searchNoResultsText | 
+
+Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selectedOptionsText | 
+
+Text displayed next to label when two or more options are selected.
+
+string
+
+
+
+ | \- | Set string |
+| value | 
+
+Value of selected option for controlled filter.
+
+union
+
+
+
+ | \- | Set object |
+| visibleResetButton | 
+
+When `true`, a reset button will be shown above the options. If provided a string, it will be used as the reset button label.
+
+union
+
+
+
+ | \- | Set object |
+
+### Providing options
+
+#### `options`
+
+The `options` prop is required for the combobox. You can provide an array of `LabelValueMeta[]` objects to the `options` prop. Filtering is done based on the `label` property.
+
+[](./iframe.html?id=components-filter--options)
+
+Filter
+
+None selected
+
+Hide codedrawOpen in CodeSandbox
+
+<IressFilter
+  label\="Filter"
+  options\={\[
+    {
+      label: 'Option 1',
+      value: 1
+    },
+    {
+      label: 'Option 2',
+      value: 2
+    },
+    {
+      label: 'Option 3',
+      value: 3
+    },
+    {
+      label: 'Option 4',
+      value: 4
+    },
+    {
+      label: 'Option 5',
+      value: 5
+    }
+  \]}
+  popoverProps\={{
+    container: {}
+  }}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Value of selected option for uncontrolled filter.
+
+union
+
+
+
+ | \- | Set object |
+| inputProps | 
+
+Customise the searchable `IressInput` props for your needs.
+
+Pick
+
+
+
+ | { clearable: true, prepend: <IressIcon name="search" />, watermark: true, } | Set object |
+| label\* | 
+
+Label to display in the activator button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Filter"
+
+ |
+| limitDesktop | 
+
+ | 
+
+12
+
+ | Set object |
+| limitMobile | 
+
+ | 
+
+6
+
+ | Set object |
+| multiSelect | 
+
+Multi-select mode. When `true`, multiple options can be selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the value changes.
+
+(selected?: LabelValueMeta | LabelValueMeta\[\]) => void
+
+ | \- | \- |
+| onReset | 
+
+Emitted when the value is reset.
+
+() => void
+
+ | \- | \- |
+| options | 
+
+array
+
+
+
+ | \- | 
+
+Edit JSON
+
+*   options :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 2 keys
+        
+    *   3 :
+        
+        {...} 2 keys
+        
+    *   4 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| popoverProps | 
+
+Customise the IressPopover props for your needs.
+
+FilterPopoverProps
+
+
+
+ | { align: 'bottom-start' } | 
+
+Edit JSON
+
+popoverProps :
+
+{
+
+}
+
+
+
+
+
+
+
+ |
+| searchable | 
+
+When `true` a search field is shown to search for specific filter option(s).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| searchNoResultsText | 
+
+Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selectedOptionsText | 
+
+Text displayed next to label when two or more options are selected.
+
+string
+
+
+
+ | \- | Set string |
+| value | 
+
+Value of selected option for controlled filter.
+
+union
+
+
+
+ | \- | Set object |
+| visibleResetButton | 
+
+When `true`, a reset button will be shown above the options. If provided a string, it will be used as the reset button label.
+
+union
+
+
+
+ | \- | Set object |
+
+#### Asynchronous `options`
+
+If you would like to render suggestions from the server, you can pass a function to the `options` prop. It accepts a string parameter and returns a promise that resolves to an array of `LabelValueMeta[]` objects. No filtering is done for asynchronous options, you must filter the options yourself using the query.
+
+**Note:** Asynchronous `options` will automatically set the `searchable` prop to true.
+
+[](./iframe.html?id=components-filter--async-options)
+
+Filter
+
+None selected
+
+Hide codedrawOpen in CodeSandbox
+
+import { IressFilter, type IressFilterProps } from '@/main';
+interface StarWarsCharacter {
+  name: string;
+  gender: string;
+}
+interface StarWarsCharacterApi {
+  results: StarWarsCharacter\[\];
+}
+export const FilterUsingAsync \= () \=> (
+  <IressFilter
+    {...{
+  label: 'Filter',
+  options: \[
+    {
+      label: 'Option 1',
+      value: 1,
+    },
+    {
+      label: 'Option 2',
+      value: 2,
+    },
+    {
+      label: 'Option 3',
+      value: 3,
+    },
+    {
+      label: 'Option 4',
+      value: 4,
+    },
+    {
+      label: 'Option 5',
+      value: 5,
+    },
+  \],
+  popoverProps: {
+    container: {},
+  },
+  searchable: true,
+}}
+    options\={async (query: string) \=> {
+      if (!query) return \[\];
+      const data \= await fetch(
+        \`https://swapi.py4e.com/api/people/?search=${query}\`,
+      ).then((response) \=> response.json() as Promise<StarWarsCharacterApi\>);
+      return data.results.map((character: StarWarsCharacter) \=> ({
+        label: character.name,
+        value: character.name,
+        meta: character.gender,
+      }));
+    }}
+  />
+);
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Value of selected option for uncontrolled filter.
+
+union
+
+
+
+ | \- | Set object |
+| inputProps | 
+
+Customise the searchable `IressInput` props for your needs.
+
+Pick
+
+
+
+ | { clearable: true, prepend: <IressIcon name="search" />, watermark: true, } | Set object |
+| label\* | 
+
+Label to display in the activator button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Filter"
+
+ |
+| limitDesktop | 
+
+ | 
+
+12
+
+ | Set object |
+| limitMobile | 
+
+ | 
+
+6
+
+ | Set object |
+| multiSelect | 
+
+Multi-select mode. When `true`, multiple options can be selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the value changes.
+
+(selected?: LabelValueMeta | LabelValueMeta\[\]) => void
+
+ | \- | \- |
+| onReset | 
+
+Emitted when the value is reset.
+
+() => void
+
+ | \- | \- |
+| options | 
+
+array
+
+
+
+ | \- | \- |
+| popoverProps | 
+
+Customise the IressPopover props for your needs.
+
+FilterPopoverProps
+
+
+
+ | { align: 'bottom-start' } | 
+
+Edit JSON
+
+popoverProps :
+
+{
+
+}
+
+
+
+
+
+
+
+ |
+| searchable | 
+
+When `true` a search field is shown to search for specific filter option(s).
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| searchNoResultsText | 
+
+Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selectedOptionsText | 
+
+Text displayed next to label when two or more options are selected.
+
+string
+
+
+
+ | \- | Set string |
+| value | 
+
+Value of selected option for controlled filter.
+
+union
+
+
+
+ | \- | Set object |
+| visibleResetButton | 
+
+When `true`, a reset button will be shown above the options. If provided a string, it will be used as the reset button label.
+
+union
+
+
+
+ | \- | Set object |
+
+#### `initialOptions`
+
+If you want to provide initial options to the user, you can use the `initialOptions` prop. This is useful when you want to provide a list of options to the user before they start typing (eg. recommended search terms).
+
+**Note:** `initialOptions` only works if `searchable` is true.
+
+[](./iframe.html?id=components-filter--initial-options)
+
+Filter
+
+None selected
+
+Hide codedrawOpen in CodeSandbox
+
+<IressFilter
+  initialOptions\={\[
+    {
+      label: 'Favourite option 1',
+      value: 'fav-1'
+    },
+    {
+      label: 'Favourite option 2',
+      value: 'fav-2'
+    },
+    {
+      label: 'Favourite option 3',
+      value: 'fav-3'
+    }
+  \]}
+  label\="Filter"
+  options\={\[
+    {
+      label: 'Option 1',
+      value: 1
+    },
+    {
+      label: 'Option 2',
+      value: 2
+    },
+    {
+      label: 'Option 3',
+      value: 3
+    },
+    {
+      label: 'Option 4',
+      value: 4
+    },
+    {
+      label: 'Option 5',
+      value: 5
+    }
+  \]}
+  popoverProps\={{
+    container: {}
+  }}
+  searchable
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Value of selected option for uncontrolled filter.
+
+union
+
+
+
+ | \- | Set object |
+| initialOptions | 
+
+array
+
+
+
+ | \- | 
+
+Edit JSON
+
+*   initialOptions :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| inputProps | 
+
+Customise the searchable `IressInput` props for your needs.
+
+Pick
+
+
+
+ | { clearable: true, prepend: <IressIcon name="search" />, watermark: true, } | Set object |
+| label\* | 
+
+Label to display in the activator button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Filter"
+
+ |
+| limitDesktop | 
+
+ | 
+
+12
+
+ | Set object |
+| limitMobile | 
+
+ | 
+
+6
+
+ | Set object |
+| multiSelect | 
+
+Multi-select mode. When `true`, multiple options can be selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the value changes.
+
+(selected?: LabelValueMeta | LabelValueMeta\[\]) => void
+
+ | \- | \- |
+| onReset | 
+
+Emitted when the value is reset.
+
+() => void
+
+ | \- | \- |
+| options | 
+
+array
+
+
+
+ | \- | 
+
+Edit JSON
+
+*   options :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 2 keys
+        
+    *   3 :
+        
+        {...} 2 keys
+        
+    *   4 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| popoverProps | 
+
+Customise the IressPopover props for your needs.
+
+FilterPopoverProps
+
+
+
+ | { align: 'bottom-start' } | 
+
+Edit JSON
+
+popoverProps :
+
+{
+
+}
+
+
+
+
+
+
+
+ |
+| searchable | 
+
+When `true` a search field is shown to search for specific filter option(s).
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| searchNoResultsText | 
+
+Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selectedOptionsText | 
+
+Text displayed next to label when two or more options are selected.
+
+string
+
+
+
+ | \- | Set string |
+| value | 
+
+Value of selected option for controlled filter.
+
+union
+
+
+
+ | \- | Set object |
+| visibleResetButton | 
+
+When `true`, a reset button will be shown above the options. If provided a string, it will be used as the reset button label.
+
+union
+
+
+
+ | \- | Set object |
+
+### Complex Options
+
+The options prop also accepts further properties for each option. This is useful for displaying other data that compliments the main label.
+
+*   append: accepts a ReactNode to append to the end of the option, usually a badge.
+*   meta: accepts a ReactNode to display additional information about the option.
+*   prepend: accepts a ReactNode to add to the start of the option, usually an icon.
+
+All `IressFilter`s accept meta as an attribute in the option array.
+
+[](./iframe.html?id=components-filter--complex-options)
+
+User
+
+None selected
+
+Hide codedrawOpen in CodeSandbox
+
+<IressFilter
+  label\="User"
+  options\={\[
+    {
+      label: 'John Smith',
+      meta: \[
+        <IressText key\="opt1-type" element\="small" mode\="muted"\>Individual</IressText\>,
+        <IressText key\="opt1-email" element\="small" mode\="muted"\>test@iress.com</IressText\>
+      \],
+      value: 'opt1'
+    },
+    {
+      label: 'Tom Wilson',
+      meta: \[
+        <IressText key\="opt2-type" element\="small" mode\="muted"\>Individual</IressText\>
+      \],
+      value: 'opt2'
+    },
+    {
+      append: <IressBadge mode\="success"\>Active</IressBadge\>,
+      label: 'Alice Kay',
+      meta: \[
+        <IressText key\="opt3-type" element\="small" mode\="muted"\>Individual</IressText\>
+      \],
+      value: 'opt3'
+    },
+    {
+      label: 'John Smith',
+      meta: \[
+        <IressText key\="opt4-type" element\="small" mode\="muted"\>Business</IressText\>,
+        <IressText key\="opt4-phone" element\="small" mode\="muted"\>0432325675</IressText\>
+      \],
+      value: 'opt4'
+    },
+    {
+      label: 'Eelin Team',
+      meta: \[
+        <IressText key\="opt5-contact" element\="small" mode\="muted"\>test2@iress.com, 0432325675</IressText\>
+      \],
+      value: 'opt5'
+    },
+    {
+      label: 'Eelin Team',
+      meta: \[
+        <IressText key\="opt6-contact" element\="small" mode\="muted"\>test3@iress.com, 0439873244</IressText\>
+      \],
+      value: 'opt6'
+    }
+  \]}
+  popoverProps\={{
+    container: {}
+  }}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Value of selected option for uncontrolled filter.
+
+union
+
+
+
+ | \- | Set object |
+| inputProps | 
+
+Customise the searchable `IressInput` props for your needs.
+
+Pick
+
+
+
+ | { clearable: true, prepend: <IressIcon name="search" />, watermark: true, } | Set object |
+| label\* | 
+
+Label to display in the activator button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"User"
+
+ |
+| limitDesktop | 
+
+ | 
+
+12
+
+ | Set object |
+| limitMobile | 
+
+ | 
+
+6
+
+ | Set object |
+| multiSelect | 
+
+Multi-select mode. When `true`, multiple options can be selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the value changes.
+
+(selected?: LabelValueMeta | LabelValueMeta\[\]) => void
+
+ | \- | \- |
+| onReset | 
+
+Emitted when the value is reset.
+
+() => void
+
+ | \- | \- |
+| options | 
+
+array
+
+
+
+ | \- | 
+
+Edit JSON
+
+*   options :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 3 keys
+        
+    *   1 :
+        
+        {...} 3 keys
+        
+    *   2 :
+        
+        {...} 4 keys
+        
+    *   3 :
+        
+        {...} 3 keys
+        
+    *   4 :
+        
+        {...} 3 keys
+        
+    *   5 :
+        
+        {...} 3 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| popoverProps | 
+
+Customise the IressPopover props for your needs.
+
+FilterPopoverProps
+
+
+
+ | { align: 'bottom-start' } | 
+
+Edit JSON
+
+popoverProps :
+
+{
+
+}
+
+
+
+
+
+
+
+ |
+| searchable | 
+
+When `true` a search field is shown to search for specific filter option(s).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| searchNoResultsText | 
+
+Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selectedOptionsText | 
+
+Text displayed next to label when two or more options are selected.
+
+string
+
+
+
+ | \- | Set string |
+| value | 
+
+Value of selected option for controlled filter.
+
+union
+
+
+
+ | \- | Set object |
+| visibleResetButton | 
+
+When `true`, a reset button will be shown above the options. If provided a string, it will be used as the reset button label.
+
+union
+
+
+
+ | \- | Set object |
+
+Behaviour
+---------
+
+*   When the activator is tapped, the filter will open
+*   Up and Down Arrow keys are used to navigate the options
+*   When focus is on the search input:
+    *   Pressing the down key will move focus to the first menu item
+    *   If `visibleResetButton` is set to true, pressing the down key will focus the reset button instead
+*   When focus is on the reset button:
+    *   Pressing the down key will move focus to the first menu item
+*   Pressing the Space or Enter keys when focussed on an option will select it
+*   Pressing the Escape key will close the filter and place focus back on to the activator button
+
+Examples
+--------
+
+### Input props
+
+You can customise some settings of the query input by setting the `inputProps`.
+
+It does have some defaults to help with user experience. `prepend` automatically has a search icon, and `clearable` and `watermark` are set to true by default.
+
+[](./iframe.html?id=components-filter--input-props)
+
+Filter
+
+None selected
+
+Hide codedrawOpen in CodeSandbox
+
+<IressFilter
+  inputProps\={{
+    placeholder: 'Search...'
+  }}
+  label\="Filter"
+  options\={\[
+    {
+      label: 'Option 1',
+      value: 1
+    },
+    {
+      label: 'Option 2',
+      value: 2
+    },
+    {
+      label: 'Option 3',
+      value: 3
+    },
+    {
+      label: 'Option 4',
+      value: 4
+    },
+    {
+      label: 'Option 5',
+      value: 5
+    }
+  \]}
+  popoverProps\={{
+    container: {}
+  }}
+  searchable
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Value of selected option for uncontrolled filter.
+
+union
+
+
+
+ | \- | Set object |
+| inputProps | 
+
+Customise the searchable `IressInput` props for your needs.
+
+Pick
+
+
+
+ | { clearable: true, prepend: <IressIcon name="search" />, watermark: true, } | 
+
+Edit JSON
+
+inputProps :
+
+{
+
+*   placeholder : "Search..."
+
+}
+
+
+
+
+
+
+
+ |
+| label\* | 
+
+Label to display in the activator button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Filter"
+
+ |
+| limitDesktop | 
+
+ | 
+
+12
+
+ | Set object |
+| limitMobile | 
+
+ | 
+
+6
+
+ | Set object |
+| multiSelect | 
+
+Multi-select mode. When `true`, multiple options can be selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the value changes.
+
+(selected?: LabelValueMeta | LabelValueMeta\[\]) => void
+
+ | \- | \- |
+| onReset | 
+
+Emitted when the value is reset.
+
+() => void
+
+ | \- | \- |
+| options | 
+
+array
+
+
+
+ | \- | 
+
+Edit JSON
+
+*   options :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 2 keys
+        
+    *   3 :
+        
+        {...} 2 keys
+        
+    *   4 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| popoverProps | 
+
+Customise the IressPopover props for your needs.
+
+FilterPopoverProps
+
+
+
+ | { align: 'bottom-start' } | 
+
+Edit JSON
+
+popoverProps :
+
+{
+
+}
+
+
+
+
+
+
+
+ |
+| searchable | 
+
+When `true` a search field is shown to search for specific filter option(s).
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| searchNoResultsText | 
+
+Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selectedOptionsText | 
+
+Text displayed next to label when two or more options are selected.
+
+string
+
+
+
+ | \- | Set string |
+| value | 
+
+Value of selected option for controlled filter.
+
+union
+
+
+
+ | \- | Set object |
+| visibleResetButton | 
+
+When `true`, a reset button will be shown above the options. If provided a string, it will be used as the reset button label.
+
+union
+
+
+
+ | \- | Set object |
+
+### Searchable
+
+When an `IressFilter` has 10 or more options, it is recommended that you enable the search functionality. This can be done by adding the `searchable` prop.
+
+**Note:** When using asynchronous options, the `searchable` prop is automatically set to true.
+
+[](./iframe.html?id=components-filter--searchable)
+
+Filter
+
+None selected
+
+Hide codedrawOpen in CodeSandbox
+
+<IressFilter
+  label\="Filter"
+  options\={\[
+    {
+      label: 'Option 1',
+      value: 1
+    },
+    {
+      label: 'Option 2',
+      value: 2
+    },
+    {
+      label: 'Option 3',
+      value: 3
+    },
+    {
+      label: 'Option 4',
+      value: 4
+    },
+    {
+      label: 'Option 5',
+      value: 5
+    }
+  \]}
+  popoverProps\={{
+    container: {}
+  }}
+  searchable
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Value of selected option for uncontrolled filter.
+
+union
+
+
+
+ | \- | Set object |
+| inputProps | 
+
+Customise the searchable `IressInput` props for your needs.
+
+Pick
+
+
+
+ | { clearable: true, prepend: <IressIcon name="search" />, watermark: true, } | Set object |
+| label\* | 
+
+Label to display in the activator button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Filter"
+
+ |
+| limitDesktop | 
+
+ | 
+
+12
+
+ | Set object |
+| limitMobile | 
+
+ | 
+
+6
+
+ | Set object |
+| multiSelect | 
+
+Multi-select mode. When `true`, multiple options can be selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the value changes.
+
+(selected?: LabelValueMeta | LabelValueMeta\[\]) => void
+
+ | \- | \- |
+| onReset | 
+
+Emitted when the value is reset.
+
+() => void
+
+ | \- | \- |
+| options | 
+
+array
+
+
+
+ | \- | 
+
+Edit JSON
+
+*   options :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 2 keys
+        
+    *   3 :
+        
+        {...} 2 keys
+        
+    *   4 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| popoverProps | 
+
+Customise the IressPopover props for your needs.
+
+FilterPopoverProps
+
+
+
+ | { align: 'bottom-start' } | 
+
+Edit JSON
+
+popoverProps :
+
+{
+
+}
+
+
+
+
+
+
+
+ |
+| searchable | 
+
+When `true` a search field is shown to search for specific filter option(s).
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| searchNoResultsText | 
+
+Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selectedOptionsText | 
+
+Text displayed next to label when two or more options are selected.
+
+string
+
+
+
+ | \- | Set string |
+| value | 
+
+Value of selected option for controlled filter.
+
+union
+
+
+
+ | \- | Set object |
+| visibleResetButton | 
+
+When `true`, a reset button will be shown above the options. If provided a string, it will be used as the reset button label.
+
+union
+
+
+
+ | \- | Set object |
+
+### Reset filters
+
+Adding the `visibleResetButton` prop adds a way for the user a way to easily reset their choices. This works for single and multiple selection filters.
+
+Below are examples of both single selects and multi selects with `visibleResetButton` enabled.
+
+[](./iframe.html?id=components-filter--reset-filters)
+
+Filter
+
+None selected
+
+Hide codedrawOpen in CodeSandbox
+
+<IressFilter
+  label\="Filter"
+  options\={\[
+    {
+      label: 'Option 1',
+      value: 1
+    },
+    {
+      label: 'Option 2',
+      value: 2
+    },
+    {
+      label: 'Option 3',
+      value: 3
+    },
+    {
+      label: 'Option 4',
+      value: 4
+    },
+    {
+      label: 'Option 5',
+      value: 5
+    }
+  \]}
+  popoverProps\={{
+    container: {}
+  }}
+  visibleResetButton
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Value of selected option for uncontrolled filter.
+
+union
+
+
+
+ | \- | Set object |
+| inputProps | 
+
+Customise the searchable `IressInput` props for your needs.
+
+Pick
+
+
+
+ | { clearable: true, prepend: <IressIcon name="search" />, watermark: true, } | Set object |
+| label\* | 
+
+Label to display in the activator button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Filter"
+
+ |
+| limitDesktop | 
+
+ | 
+
+12
+
+ | Set object |
+| limitMobile | 
+
+ | 
+
+6
+
+ | Set object |
+| multiSelect | 
+
+Multi-select mode. When `true`, multiple options can be selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the value changes.
+
+(selected?: LabelValueMeta | LabelValueMeta\[\]) => void
+
+ | \- | \- |
+| onReset | 
+
+Emitted when the value is reset.
+
+() => void
+
+ | \- | \- |
+| options | 
+
+array
+
+
+
+ | \- | 
+
+Edit JSON
+
+*   options :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 2 keys
+        
+    *   3 :
+        
+        {...} 2 keys
+        
+    *   4 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| popoverProps | 
+
+Customise the IressPopover props for your needs.
+
+FilterPopoverProps
+
+
+
+ | { align: 'bottom-start' } | 
+
+Edit JSON
+
+popoverProps :
+
+{
+
+}
+
+
+
+
+
+
+
+ |
+| searchable | 
+
+When `true` a search field is shown to search for specific filter option(s).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| searchNoResultsText | 
+
+Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selectedOptionsText | 
+
+Text displayed next to label when two or more options are selected.
+
+string
+
+
+
+ | \- | Set string |
+| value | 
+
+Value of selected option for controlled filter.
+
+union
+
+
+
+ | \- | Set object |
+| visibleResetButton | 
+
+When `true`, a reset button will be shown above the options. If provided a string, it will be used as the reset button label.
+
+union
+
+
+
+ | \- | 
+
+true
+
+ |
+
+### No results
+
+If you would like to show a message when there are no results, you can use the `searchNoResultsText` prop. It accepts any React node.
+
+[](./iframe.html?id=components-filter--no-results-text)
+
+Filter
+
+None selected
+
+Hide codedrawOpen in CodeSandbox
+
+<IressFilter
+  inputProps\={{
+    placeholder: 'Type "no" to see the no results text'
+  }}
+  label\="Filter"
+  options\={\[
+    {
+      label: 'Option 1',
+      value: 1
+    },
+    {
+      label: 'Option 2',
+      value: 2
+    },
+    {
+      label: 'Option 3',
+      value: 3
+    },
+    {
+      label: 'Option 4',
+      value: 4
+    },
+    {
+      label: 'Option 5',
+      value: 5
+    }
+  \]}
+  popoverProps\={{
+    container: {}
+  }}
+  searchNoResultsText\={<IressPanel className\="iress-u-text"\>No results found</IressPanel\>}
+  searchable
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Value of selected option for uncontrolled filter.
+
+union
+
+
+
+ | \- | Set object |
+| inputProps | 
+
+Customise the searchable `IressInput` props for your needs.
+
+Pick
+
+
+
+ | { clearable: true, prepend: <IressIcon name="search" />, watermark: true, } | 
+
+Edit JSON
+
+inputProps :
+
+{
+
+*   placeholder : "Type "no" to see the no results text"
+
+}
+
+
+
+
+
+
+
+ |
+| label\* | 
+
+Label to display in the activator button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Filter"
+
+ |
+| limitDesktop | 
+
+ | 
+
+12
+
+ | Set object |
+| limitMobile | 
+
+ | 
+
+6
+
+ | Set object |
+| multiSelect | 
+
+Multi-select mode. When `true`, multiple options can be selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the value changes.
+
+(selected?: LabelValueMeta | LabelValueMeta\[\]) => void
+
+ | \- | \- |
+| onReset | 
+
+Emitted when the value is reset.
+
+() => void
+
+ | \- | \- |
+| options | 
+
+array
+
+
+
+ | \- | 
+
+Edit JSON
+
+*   options :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 2 keys
+        
+    *   3 :
+        
+        {...} 2 keys
+        
+    *   4 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| popoverProps | 
+
+Customise the IressPopover props for your needs.
+
+FilterPopoverProps
+
+
+
+ | { align: 'bottom-start' } | 
+
+Edit JSON
+
+popoverProps :
+
+{
+
+}
+
+
+
+
+
+
+
+ |
+| searchable | 
+
+When `true` a search field is shown to search for specific filter option(s).
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| searchNoResultsText | 
+
+Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+
+ReactNode
+
+
+
+ | \- | 
+
+Edit JSON
+
+searchNoResultsText :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ children, background = "default", noBorderRadius, noGutter, padding = "md", stretch, textAlign = "inherit", className, ...restProps }) => { const classMap = { \[PanelCssClass.Stretch\]: stretch, \[PanelCssClass.NoBorderRadius\]: noBorderRadius, \[PanelCssClass.NoGutter\]: noGutter }; const cssClasses = classNames( className, PanelCssClass.Base, \`${GlobalCSSClass.TextAlignBase}--${textAlign}\`, \`${PanelCssClass.Background}--${background}\`, getResponsivePaddingClasses(padding), classMap ); return /\* @\_\_PURE\_\_ \*/ jsxDEV("div", { className: cssClasses, ...restProps, children }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Panel/Panel.tsx", lineNumber: 38, columnNumber: 5 }, this); }
+*   key : null
+*   props :
+    
+    {...} 2 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| selectedOptionsText | 
+
+Text displayed next to label when two or more options are selected.
+
+string
+
+
+
+ | \- | Set string |
+| value | 
+
+Value of selected option for controlled filter.
+
+union
+
+
+
+ | \- | Set object |
+| visibleResetButton | 
+
+When `true`, a reset button will be shown above the options. If provided a string, it will be used as the reset button label.
+
+union
+
+
+
+ | \- | Set object |
+
+### Popover props
+
+Under the hood, filter uses `IressPopover` to display the filter options. You can customise this with `popoverProps`. It accepts `align`, `className`, `container` and `displayMode`.
+
+There are two additional props that filter accepts to customise the popover: `append` and `prepend`. You can place additional content above or below the results using these props.
+
+[](./iframe.html?id=components-filter--popover-props)
+
+Filter
+
+None selected
+
+Hide codedrawOpen in CodeSandbox
+
+<IressFilter
+  label\="Filter"
+  options\={\[
+    {
+      label: 'Option 1',
+      value: 1
+    },
+    {
+      label: 'Option 2',
+      value: 2
+    },
+    {
+      label: 'Option 3',
+      value: 3
+    },
+    {
+      label: 'Option 4',
+      value: 4
+    },
+    {
+      label: 'Option 5',
+      value: 5
+    }
+  \]}
+  popoverProps\={{
+    append: <IressPanel\><IressButton\>Add an option</IressButton\></IressPanel\>,
+    container: {}
+  }}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Value of selected option for uncontrolled filter.
+
+union
+
+
+
+ | \- | Set object |
+| inputProps | 
+
+Customise the searchable `IressInput` props for your needs.
+
+Pick
+
+
+
+ | { clearable: true, prepend: <IressIcon name="search" />, watermark: true, } | Set object |
+| label\* | 
+
+Label to display in the activator button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Filter"
+
+ |
+| limitDesktop | 
+
+ | 
+
+12
+
+ | Set object |
+| limitMobile | 
+
+ | 
+
+6
+
+ | Set object |
+| multiSelect | 
+
+Multi-select mode. When `true`, multiple options can be selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onChange | 
+
+Emitted when the value changes.
+
+(selected?: LabelValueMeta | LabelValueMeta\[\]) => void
+
+ | \- | \- |
+| onReset | 
+
+Emitted when the value is reset.
+
+() => void
+
+ | \- | \- |
+| options | 
+
+array
+
+
+
+ | \- | 
+
+Edit JSON
+
+*   options :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 2 keys
+        
+    *   3 :
+        
+        {...} 2 keys
+        
+    *   4 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| popoverProps | 
+
+Customise the IressPopover props for your needs.
+
+FilterPopoverProps
+
+
+
+ | { align: 'bottom-start' } | 
+
+Edit JSON
+
+popoverProps :
+
+{
+
+*   append :
+    
+    {...} 6 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| searchable | 
+
+When `true` a search field is shown to search for specific filter option(s).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| searchNoResultsText | 
+
+Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selectedOptionsText | 
+
+Text displayed next to label when two or more options are selected.
+
+string
+
+
+
+ | \- | Set string |
+| value | 
+
+Value of selected option for controlled filter.
+
+union
+
+
+
+ | \- | Set object |
+| visibleResetButton | 
+
+When `true`, a reset button will be shown above the options. If provided a string, it will be used as the reset button label.
+
+union
+
+
+
+ | \- | Set object |
+
+### Selected options text
+
+In `multiSelect` mode, the selections options are displayed using the `selectedOptionsText` prop. You can customise this text to suit your needs. It will replace `{{numOptions}}` with the number of selected options.
+
+[](./iframe.html?id=components-filter--selected-options-text)
+
+Filter
+
+None selected
+
+Hide codedrawOpen in CodeSandbox
+
+<IressFilter
+  label\="Filter"
+  multiSelect
+  options\={\[
+    {
+      label: 'Option 1',
+      value: 1
+    },
+    {
+      label: 'Option 2',
+      value: 2
+    },
+    {
+      label: 'Option 3',
+      value: 3
+    },
+    {
+      label: 'Option 4',
+      value: 4
+    },
+    {
+      label: 'Option 5',
+      value: 5
+    }
+  \]}
+  popoverProps\={{
+    container: {}
+  }}
+  selectedOptionsText\="{{numOptions}} activated"
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Value of selected option for uncontrolled filter.
+
+union
+
+
+
+ | \- | Set object |
+| inputProps | 
+
+Customise the searchable `IressInput` props for your needs.
+
+Pick
+
+
+
+ | { clearable: true, prepend: <IressIcon name="search" />, watermark: true, } | Set object |
+| label\* | 
+
+Label to display in the activator button.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Filter"
+
+ |
+| limitDesktop | 
+
+ | 
+
+12
+
+ | Set object |
+| limitMobile | 
+
+ | 
+
+6
+
+ | Set object |
+| multiSelect | 
+
+Multi-select mode. When `true`, multiple options can be selected.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| onChange | 
+
+Emitted when the value changes.
+
+(selected?: LabelValueMeta | LabelValueMeta\[\]) => void
+
+ | \- | \- |
+| onReset | 
+
+Emitted when the value is reset.
+
+() => void
+
+ | \- | \- |
+| options | 
+
+array
+
+
+
+ | \- | 
+
+Edit JSON
+
+*   options :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 2 keys
+        
+    *   3 :
+        
+        {...} 2 keys
+        
+    *   4 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| popoverProps | 
+
+Customise the IressPopover props for your needs.
+
+FilterPopoverProps
+
+
+
+ | { align: 'bottom-start' } | 
+
+Edit JSON
+
+popoverProps :
+
+{
+
+}
+
+
+
+
+
+
+
+ |
+| searchable | 
+
+When `true` a search field is shown to search for specific filter option(s).
+
+boolean
+
+
+
+ | \- | Set boolean |
+| searchNoResultsText | 
+
+Text to be displayed when no results are found from search. Ignored when `searchable` is `false`
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selectedOptionsText | 
+
+Text displayed next to label when two or more options are selected.
+
+string
+
+
+
+ | \- | {{numOptions}} activated |
+| value | 
+
+Value of selected option for controlled filter.
+
+union
+
+
+
+ | \- | Set object |
+| visibleResetButton | 
+
+When `true`, a reset button will be shown above the options. If provided a string, it will be used as the reset button label.
+
+union
+
+
+
+ | \- | Set object |