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

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

@@ -1,1109 +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.
-
-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
-
-[](#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 |
-| --- | --- | --- | --- | --- |
-| 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 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 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: document.body,
-  },
-  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: document.body,
-  },
-  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: document.body,
-  },
-  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: document.body,
-  },
-  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\>
-  );
-};
-
-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 \= () \=> {
-  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: 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: document.body
-  }}
-/>
-
-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 \= () \=> (
-  <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" 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: 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` and `watermark` are 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: {}
-  }}
-  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 className\="iress-u-text"\>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: `append` and `prepend`. 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\={{
-    append: <IressPanel\><IressButton\>Add an option</IressButton\></IressPanel\>,
-    container: document.body
-  }}
-/>
-
-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: document.body
-  }}
-  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)