@iress-oss/ids-mcp-server 6.0.0-alpha.0 → 6.0.0-alpha.1-canary-20251204014525-3f0dce4

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

@@ -1,1322 +0,0 @@
-[](#filter)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.
-
-* * *
-
-Updated
-
-**Recently updated**
-
-This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
-
-Filter
-
-None selected
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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: document.body
-  }}
-/>
-
-Copy
-
-[](#props)Props
----------------
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| debounceThreshold | 
-Time in milliseconds to wait for before performing result search. Only applies to searchable options (function).
-
-numberundefined
-
-
-
- | 
-
-500
-
- | Set object |
-| defaultValue | 
-
-Value of selected option for uncontrolled filter.
-
-LabelValueMeta | LabelValueMeta\[\] | undefined
-
- | \- | Set object |
-| initialOptions | 
-
-Initial options data set, shown when the input is empty.
-
-LabelValueMeta\[\] | undefined
-
- | \- | Set object |
-| inputProps | 
-
-Customise the searchable `IressInput` props for your needs.
-
-Pick<IressInputProps, "append" | "prepend" | "placeholder" | "clearable"> | undefined
-
- | { clearable: true, prepend: <IressIcon name="search" />, } | Set object |
-| label\* | 
-
-Label to display in the activator button.
-
-ReactNode
-
-
-
- | \- | 
-
-"Filter"
-
- |
-| limitDesktop | 
-
-Maximum number of results displayed on larger screen sizes (>= 768).
-
-numberundefined
-
-
-
- | 
-
-12
-
- | Set object |
-| limitMobile | 
-
-Maximum number of results displayed on mobile screen sizes (< 768).
-
-numberundefined
-
-
-
- | 
-
-6
-
- | Set object |
-| minSearchLength | 
-
-Minimum number of characters required before triggering async search. Only applies to searchable options (function). Below this threshold, no search will be triggered and no loading state will be shown.
-
-numberundefined
-
-
-
- | 
-
-1
-
- | Set object |
-| multiSelect | 
-
-Multi-select mode. When `true`, multiple options can be selected.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| onChange | 
-
-Emitted when the value changes.
-
-((selected?: ControlledValue<LabelValueMeta, TMultiple> | undefined) => void) | undefined
-
- | \- | \- |
-| onReset | 
-
-Emitted when the value is reset.
-
-(() => void) | undefined
-
- | \- | \- |
-| options | 
-
-Options data set, shown when the input is not empty.
-
-LabelValueMeta\[\] | ((query: string) => Promise<LabelValueMeta\[\]>) | undefined
-
- | \- | 
-
-RAW
-
-options : \[
-
-0 : {...} 2 keys
-
-1 : {...} 2 keys
-
-2 : {...} 2 keys
-
-3 : {...} 2 keys
-
-4 : {...} 2 keys
-
-\]
-
-
-
-
-
- |
-| popoverProps | 
-
-Customise the IressPopover props for your needs.
-
-FilterPopoverPropsundefined
-
-
-
- | { align: 'bottom-start' } | 
-
-RAW
-
-popoverProps : {
-
-container : {...} 0 keys
-
-}
-
-
-
-
-
- |
-| ref | 
-
-ForwardedRef<FilterRef> | undefined
-
- | \- | Set object |
-| searchable | 
-
-When `true` a search field is shown to search for specific filter option(s).
-
-booleanundefined
-
-
-
- | \- | Set object |
-| 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.
-
-stringundefined
-
-
-
- | {{numOptions}} selected | Set object |
-| value | 
-
-Value of selected option for controlled filter.
-
-LabelValueMeta | LabelValueMeta\[\] | undefined
-
- | \- | 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.
-
-stringbooleanundefined
-
-
-
- | \- | Set object |
-
-[](#usage)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`.
-
-Name
-
-None selected
-
-Status
-
-None selected
-
-Location
-
-None selected
-
-Gender
-
-None selected
-
-Reset filters
-
-* * *
-
-System users
-| User | Name | Status | Location | Gender |
-| --- | --- | --- | --- | --- |
-| No results found |
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import {
-  IressInline,
-  IressStack,
-  IressTable,
-  LabelValueMeta,
-  IressFilter,
-  IressFilterProps,
-  IressButton,
-  IressDivider,
-} from '@iress-oss/ids-components';
-import { useMemo, useState } from 'react';
-import { searchStarWarsCharacters } from '@/mocks/starWars';
-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 \= (<false\>) => {
-  const \[name, setName\] \= useState<LabelValueMeta | undefined\>();
-  const \[status, setStatus\] \= useState<LabelValueMeta | undefined\>();
-  const \[location, setLocation\] \= useState<LabelValueMeta | undefined\>();
-  const \[gender, setGender\] \= useState<LabelValueMeta | undefined\>(undefined);
-  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 \= (filterItem?: LabelValueMeta, detail?: string): boolean \=>
-      (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(undefined);
-    setStatus(undefined);
-    setLocation(undefined);
-    setGender(undefined);
-  };
-  return (
-    <IressStack gap\="md"\>
-      <IressInline gap\="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: document.body,
-  },
-  visibleResetButton: true,
-}}
-          label\="Name"
-          options\={searchStarWarsCharacters}
-          value\={name}
-          onChange\={setName}
-          onReset\={() \=> setName(undefined)}
-        />
-        <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: document.body,
-  },
-  visibleResetButton: true,
-}}
-          label\="Status"
-          options\={getUniqueValues('status')}
-          value\={status}
-          onChange\={setStatus}
-          onReset\={() \=> setStatus(undefined)}
-        />
-        <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: document.body,
-  },
-  visibleResetButton: true,
-}}
-          label\="Location"
-          options\={getUniqueValues('location')}
-          value\={location}
-          onChange\={setLocation}
-          onReset\={() \=> setLocation(undefined)}
-        />
-        <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: document.body,
-  },
-  visibleResetButton: true,
-}}
-          label\="Gender"
-          options\={getUniqueValues('gender')}
-          value\={gender}
-          onChange\={setGender}
-          onReset\={() \=> setGender(undefined)}
-        />
-        <IressButton onClick\={handleReset} mode\="tertiary"\>
-          Reset filters        </IressButton\>
-      </IressInline\>
-      <IressDivider />
-      <IressTable
-        caption\="System users"
-        columns\={columns}
-        rows\={rows}
-        empty\={'No results found'}
-      />
-    </IressStack\>
-  );
-};
-
-Copy
-
-### [](#label)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.
-
-Custom label
-
-None selected
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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: document.body
-  }}
-/>
-
-Copy
-
-### [](#uncontrolled)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.
-
-Filter: Option 1
-
-None selected
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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: document.body
-  }}
-/>
-
-Copy
-
-### [](#controlled)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.
-
-Filter
-
-None selected
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import { IressFilter, IressFilterProps } from '@iress-oss/ids-components';
-import { useState } from 'react';
-export const FilterUsingState \= <TMultiple extends boolean \= false\>(
-  <TMultiple\>,
-) => {
-  const \[value, setValue\] \= useState<IressFilterProps<TMultiple\>\['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: document.body,
-  },
-}}
-      onChange\={(newValue) \=> setValue(newValue)}
-      onReset\={() \=> setValue(undefined)}
-      value\={value}
-    />
-  );
-};
-
-Copy
-
-### [](#multiple-selection)Multiple selection
-
-Using the `multiSelect` prop, the `IressFilter` will allow the user to make multiple selections.
-
-Filter
-
-None selected
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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: document.body
-  }}
-/>
-
-Copy
-
-### [](#providing-options)Providing options
-
-#### [](#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.
-
-Filter
-
-None selected
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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: {}
-  }}
-/>
-
-Copy
-
-#### [](#asynchronous-options)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.
-
-Filter
-
-None selected
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import { IressFilter, IressFilterProps } from '@iress-oss/ids-components';
-interface StarWarsCharacter {
-  name: string;
-  gender: string;
-}
-interface StarWarsCharacterApi {
-  results: StarWarsCharacter\[\];
-}
-export const FilterUsingAsync \= <TMultiple extends boolean \= false\>(
-  <TMultiple\>,
-) => (
-  <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: document.body,
-  },
-  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,
-      }));
-    }}
-  />
-);
-
-Copy
-
-#### [](#initialoptions)`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.
-
-Filter
-
-None selected
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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: document.body
-  }}
-  searchable
-/>
-
-Copy
-
-### [](#complex-options)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.
-
-User
-
-None selected
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressFilter
-  label\="User"
-  options\={\[
-    {
-      label: 'John Smith',
-      meta: \[
-        <IressText key\="opt1-type" color\="colour.neutral.70" element\="small"\>Individual</IressText\>,
-        <IressText key\="opt1-email" color\="colour.neutral.70" element\="small"\>test@iress.com</IressText\>
-      \],
-      value: 'opt1'
-    },
-    {
-      label: 'Tom Wilson',
-      meta: \[
-        <IressText key\="opt2-type" color\="colour.neutral.70" element\="small"\>Individual</IressText\>
-      \],
-      value: 'opt2'
-    },
-    {
-      append: <IressBadge mode\="success"\>Active</IressBadge\>,
-      label: 'Alice Kay',
-      meta: \[
-        <IressText key\="opt3-type" color\="colour.neutral.70" element\="small"\>Individual</IressText\>
-      \],
-      value: 'opt3'
-    },
-    {
-      label: 'John Smith',
-      meta: \[
-        <IressText key\="opt4-type" color\="colour.neutral.70" element\="small"\>Business</IressText\>,
-        <IressText key\="opt4-phone" color\="colour.neutral.70" element\="small"\>0432325675</IressText\>
-      \],
-      value: 'opt4'
-    },
-    {
-      label: 'Eelin Team',
-      meta: \[
-        <IressText key\="opt5-contact" color\="colour.neutral.70" element\="small"\>test2@iress.com, 0432325675</IressText\>
-      \],
-      value: 'opt5'
-    },
-    {
-      label: 'Eelin Team',
-      meta: \[
-        <IressText key\="opt6-contact" color\="colour.neutral.70" element\="small"\>test3@iress.com, 0439873244</IressText\>
-      \],
-      value: 'opt6'
-    }
-  \]}
-  popoverProps\={{
-    container: document.body
-  }}
-/>
-
-Copy
-
-[](#behaviour)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)Examples
----------------------
-
-### [](#input-props)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` is set to true by default.
-
-Filter
-
-None selected
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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: document.body
-  }}
-  searchable
-/>
-
-Copy
-
-### [](#searchable)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.
-
-Filter
-
-None selected
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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: document.body
-  }}
-  searchable
-/>
-
-Copy
-
-### [](#reset-filters)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.
-
-Filter
-
-None selected
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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: document.body
-  }}
-  visibleResetButton
-/>
-
-Copy
-
-### [](#no-results)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.
-
-Filter
-
-None selected
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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: document.body
-  }}
-  searchNoResultsText\={<IressPanel\>No results found</IressPanel\>}
-  searchable
-/>
-
-Copy
-
-### [](#popover-props)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: `header` and `footer`. You can place additional content above or below the results using these props.
-
-Filter
-
-None selected
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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: document.body,
-    footer: <IressPanel\><IressButton\>Add an option</IressButton\></IressPanel\>
-  }}
-/>
-
-Copy
-
-### [](#selected-options-text)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.
-
-Filter
-
-None selected
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<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"
-/>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [Label](#label)
-    *   [Uncontrolled](#uncontrolled)
-    *   [Controlled](#controlled)
-    *   [Multiple selection](#multiple-selection)
-    *   [Providing options](#providing-options)
-    *   [Complex Options](#complex-options)
-*   [Behaviour](#behaviour)
-*   [Examples](#examples)
-    *   [Input props](#input-props)
-    *   [Searchable](#searchable)
-    *   [Reset filters](#reset-filters)
-    *   [No results](#no-results)
-    *   [Popover props](#popover-props)
-    *   [Selected options text](#selected-options-text)