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

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

@@ -1,2433 +0,0 @@
-[](#rich-select)Rich select
-===========================
-
-Overview
---------
-
-Rich selects provide select and multi-select functionality with the benefit of live filtering.
-
-* * *
-
-Beta
-
-Replaces IressCombobox and IressMultiCombobox
-
-This component is in beta and will replace IressCombobox and IressMultiCombobox in the next major version.
-
-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; }
-
-<IressRichSelect
-  container\={document.body}
-  options\={\[
-    {
-      label: 'Option 1',
-      meta: \[
-        'Some',
-        <IressText key\="0-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '1'
-    },
-    {
-      label: 'Option 2',
-      meta: \[
-        'Some',
-        <IressText key\="1-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '2'
-    },
-    {
-      label: 'Option 3',
-      meta: \[
-        'Some',
-        <IressText key\="2-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '3'
-    },
-    {
-      label: 'Option 4',
-      meta: \[
-        'Some',
-        <IressText key\="3-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '4'
-    },
-    {
-      label: 'Option 5',
-      meta: \[
-        'Some',
-        <IressText key\="4-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '5'
-    }
-  \]}
-  placeholder\=""
-/>
-
-Copy
-
-[](#usage)Usage
----------------
-
-`IressRichSelect` is an alternative to `IressSelect` when you have a large number of options and want to provide a search functionality to help the user find the option they are looking for.
-
-### [](#when-to-use)When To Use
-
-*   If you have less than 5 options to choose from, consider using `IressRadioGroup` instead.
-*   If your application is expected to be used on mobile devices, consider using `IressSelect` instead to make use of the native select functionality.
-*   You probably need `IressAutoComplete` if you're looking for an input box that can be typed.
-*   Otherwise, `IressRichSelect` is the way to go.
-
-[](#accessibility)Accessibility
--------------------------------
-
-This component follows the [WAI combobox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
-
-There are two key differences:
-
-*   For better usability, virtual focus is used to highlight the suggestions inside the popover. This means focus remains on the input, but the suggestions are highlighted as if they are in focus, allowing the user to type and navigate the suggestions with the arrow keys. To denote the highlighted suggestion to screen readers, the aria-activedescendant attribute is used.
-*   Instead of displaying the input to filter options directly, the input is only shown once the user has activated the dropdown. This allows for an intuitive user experience by separating the display of the current value, and the filtering of options.
-
-[](#examples)Examples
----------------------
-
-### [](#single-select)Single select
-
-The `options` prop is required for `IressRichSelect`. You can provide an array of `LabelValueMeta[]` objects to the `options` prop.
-
-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; }
-
-<IressRichSelect
-  container\={document.body}
-  options\={\[
-    {
-      label: 'Option 1',
-      meta: \[
-        'Some',
-        <IressText key\="0-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '1'
-    },
-    {
-      label: 'Option 2',
-      meta: \[
-        'Some',
-        <IressText key\="1-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '2'
-    },
-    {
-      label: 'Option 3',
-      meta: \[
-        'Some',
-        <IressText key\="2-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '3'
-    },
-    {
-      label: 'Option 4',
-      meta: \[
-        'Some',
-        <IressText key\="3-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '4'
-    },
-    {
-      label: 'Option 5',
-      meta: \[
-        'Some',
-        <IressText key\="4-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '5'
-    }
-  \]}
-  placeholder\=""
-/>
-
-Copy
-
-### [](#multi-select)Multi-select
-
-Adding the `multiSelect` prop will allow the user to select multiple options.
-
-Selected: None
-
-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; }
-
-<IressRichSelect
-  container\={document.body}
-  multiSelect
-  options\={\[
-    {
-      label: 'Option 1',
-      meta: \[
-        'Some',
-        <IressText key\="0-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '1'
-    },
-    {
-      label: 'Option 2',
-      meta: \[
-        'Some',
-        <IressText key\="1-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '2'
-    },
-    {
-      label: 'Option 3',
-      meta: \[
-        'Some',
-        <IressText key\="2-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '3'
-    },
-    {
-      label: 'Option 4',
-      meta: \[
-        'Some',
-        <IressText key\="3-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '4'
-    },
-    {
-      label: 'Option 5',
-      meta: \[
-        'Some',
-        <IressText key\="4-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '5'
-    }
-  \]}
-  placeholder\=""
-/>
-
-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.
-
-The user experience slightly changes as well. Instead of displaying the options immediately, the user will see a search input that will filter the options as they type.
-
-No filtering is done for asynchronous options, you must filter the options yourself using the query. However, the results are automatically highlighted based on the query when rendered in the UI.
-
-Single select
-
-Multi-select
-
-Selected: None
-
-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; }
-
-interface StarWarsCharacter {
-  name: string;
-  gender: string;
-}
-interface StarWarsCharacterApi {
-  results: StarWarsCharacter\[\];
-}
-const options \= async (query: string) \=> {
-  if (!query) return \[\];
-  if (query \=== 'error') {
-    throw new Error();
-  }
-  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,
-  }));
-};
-export const SelectAsync \= () \=> (
-  <IressRow gutter\="md"\>
-    <IressCol\>
-      <IressField label\="Single select" htmlFor\="single-select"\>
-        <IressRichSelect
-          container\={document.body}
-          options\={options}
-          id\="single-select"
-        />
-      </IressField\>
-    </IressCol\>
-    <IressCol\>
-      <IressField label\="Multi-select" htmlFor\="multi-select"\>
-        <IressRichSelect
-          container\={document.body}
-          options\={options}
-          id\="multi-select"
-          multiSelect
-        />
-      </IressField\>
-    </IressCol\>
-  </IressRow\>
-);
-
-Copy
-
-### [](#initial-options)Initial options
-
-If you are using asynchronous options, you can provide an initial set of options to display before the user has interacted with the select using the `initialOptions` prop.
-
-Selected: None
-
-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; }
-
-export const SelectInitialOptions \= () \=> (
-  <IressRichSelect
-    container\={document.body}
-    initialOptions\={\[
-      { label: 'Frequently selected 1', value: 'freq-1' },
-      { label: 'Frequently selected 2', value: 'freq-2' },
-    \]}
-    multiSelect
-    options\={async () \=>
-      Promise.resolve(\[
-        { label: 'Option 1', value: 'option-1' },
-        { label: 'Option 2', value: 'option-2' },
-        { label: 'Option 3', value: 'option-3' },
-        { label: 'Option 4', value: 'option-4' },
-        { label: 'Option 5', value: 'option-5' },
-      \])
-    }
-    virtualFocus\={false}
-  />
-);
-
-Copy
-
-### [](#sizing)Sizing
-
-Rich selects can be resized to suit a specific number of characters. This sets an expectation of what data is to be presented; for example using the `16` width for a credit card number.
-
-Widths can also be set as a percentage, allowing the select to take up a proportion of the width of its container.
-
-2
-
-4
-
-6
-
-8
-
-10
-
-12
-
-16
-
-25perc
-
-50perc
-
-75perc
-
-100perc
-
-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; }
-
-<IressStack gutter\="md"\>
-  <div\>
-    <IressRichSelect
-      container\={document.body}
-      options\={\[
-        {
-          label: 'Option 1',
-          meta: \[
-            'Some',
-            <IressText key\="0-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '1'
-        },
-        {
-          label: 'Option 2',
-          meta: \[
-            'Some',
-            <IressText key\="1-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '2'
-        },
-        {
-          label: 'Option 3',
-          meta: \[
-            'Some',
-            <IressText key\="2-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '3'
-        },
-        {
-          label: 'Option 4',
-          meta: \[
-            'Some',
-            <IressText key\="3-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '4'
-        },
-        {
-          label: 'Option 5',
-          meta: \[
-            'Some',
-            <IressText key\="4-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '5'
-        }
-      \]}
-      placeholder\="2"
-      width\="2"
-    />
-  </div\>
-  <div\>
-    <IressRichSelect
-      container\={document.body}
-      options\={\[
-        {
-          label: 'Option 1',
-          meta: \[
-            'Some',
-            <IressText key\="0-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '1'
-        },
-        {
-          label: 'Option 2',
-          meta: \[
-            'Some',
-            <IressText key\="1-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '2'
-        },
-        {
-          label: 'Option 3',
-          meta: \[
-            'Some',
-            <IressText key\="2-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '3'
-        },
-        {
-          label: 'Option 4',
-          meta: \[
-            'Some',
-            <IressText key\="3-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '4'
-        },
-        {
-          label: 'Option 5',
-          meta: \[
-            'Some',
-            <IressText key\="4-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '5'
-        }
-      \]}
-      placeholder\="4"
-      width\="4"
-    />
-  </div\>
-  <div\>
-    <IressRichSelect
-      container\={document.body}
-      options\={\[
-        {
-          label: 'Option 1',
-          meta: \[
-            'Some',
-            <IressText key\="0-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '1'
-        },
-        {
-          label: 'Option 2',
-          meta: \[
-            'Some',
-            <IressText key\="1-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '2'
-        },
-        {
-          label: 'Option 3',
-          meta: \[
-            'Some',
-            <IressText key\="2-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '3'
-        },
-        {
-          label: 'Option 4',
-          meta: \[
-            'Some',
-            <IressText key\="3-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '4'
-        },
-        {
-          label: 'Option 5',
-          meta: \[
-            'Some',
-            <IressText key\="4-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '5'
-        }
-      \]}
-      placeholder\="6"
-      width\="6"
-    />
-  </div\>
-  <div\>
-    <IressRichSelect
-      container\={document.body}
-      options\={\[
-        {
-          label: 'Option 1',
-          meta: \[
-            'Some',
-            <IressText key\="0-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '1'
-        },
-        {
-          label: 'Option 2',
-          meta: \[
-            'Some',
-            <IressText key\="1-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '2'
-        },
-        {
-          label: 'Option 3',
-          meta: \[
-            'Some',
-            <IressText key\="2-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '3'
-        },
-        {
-          label: 'Option 4',
-          meta: \[
-            'Some',
-            <IressText key\="3-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '4'
-        },
-        {
-          label: 'Option 5',
-          meta: \[
-            'Some',
-            <IressText key\="4-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '5'
-        }
-      \]}
-      placeholder\="8"
-      width\="8"
-    />
-  </div\>
-  <div\>
-    <IressRichSelect
-      container\={document.body}
-      options\={\[
-        {
-          label: 'Option 1',
-          meta: \[
-            'Some',
-            <IressText key\="0-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '1'
-        },
-        {
-          label: 'Option 2',
-          meta: \[
-            'Some',
-            <IressText key\="1-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '2'
-        },
-        {
-          label: 'Option 3',
-          meta: \[
-            'Some',
-            <IressText key\="2-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '3'
-        },
-        {
-          label: 'Option 4',
-          meta: \[
-            'Some',
-            <IressText key\="3-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '4'
-        },
-        {
-          label: 'Option 5',
-          meta: \[
-            'Some',
-            <IressText key\="4-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '5'
-        }
-      \]}
-      placeholder\="10"
-      width\="10"
-    />
-  </div\>
-  <div\>
-    <IressRichSelect
-      container\={document.body}
-      options\={\[
-        {
-          label: 'Option 1',
-          meta: \[
-            'Some',
-            <IressText key\="0-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '1'
-        },
-        {
-          label: 'Option 2',
-          meta: \[
-            'Some',
-            <IressText key\="1-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '2'
-        },
-        {
-          label: 'Option 3',
-          meta: \[
-            'Some',
-            <IressText key\="2-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '3'
-        },
-        {
-          label: 'Option 4',
-          meta: \[
-            'Some',
-            <IressText key\="3-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '4'
-        },
-        {
-          label: 'Option 5',
-          meta: \[
-            'Some',
-            <IressText key\="4-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '5'
-        }
-      \]}
-      placeholder\="12"
-      width\="12"
-    />
-  </div\>
-  <div\>
-    <IressRichSelect
-      container\={document.body}
-      options\={\[
-        {
-          label: 'Option 1',
-          meta: \[
-            'Some',
-            <IressText key\="0-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '1'
-        },
-        {
-          label: 'Option 2',
-          meta: \[
-            'Some',
-            <IressText key\="1-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '2'
-        },
-        {
-          label: 'Option 3',
-          meta: \[
-            'Some',
-            <IressText key\="2-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '3'
-        },
-        {
-          label: 'Option 4',
-          meta: \[
-            'Some',
-            <IressText key\="3-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '4'
-        },
-        {
-          label: 'Option 5',
-          meta: \[
-            'Some',
-            <IressText key\="4-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '5'
-        }
-      \]}
-      placeholder\="16"
-      width\="16"
-    />
-  </div\>
-  <div\>
-    <IressRichSelect
-      container\={document.body}
-      options\={\[
-        {
-          label: 'Option 1',
-          meta: \[
-            'Some',
-            <IressText key\="0-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '1'
-        },
-        {
-          label: 'Option 2',
-          meta: \[
-            'Some',
-            <IressText key\="1-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '2'
-        },
-        {
-          label: 'Option 3',
-          meta: \[
-            'Some',
-            <IressText key\="2-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '3'
-        },
-        {
-          label: 'Option 4',
-          meta: \[
-            'Some',
-            <IressText key\="3-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '4'
-        },
-        {
-          label: 'Option 5',
-          meta: \[
-            'Some',
-            <IressText key\="4-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '5'
-        }
-      \]}
-      placeholder\="25perc"
-      width\="25perc"
-    />
-  </div\>
-  <div\>
-    <IressRichSelect
-      container\={document.body}
-      options\={\[
-        {
-          label: 'Option 1',
-          meta: \[
-            'Some',
-            <IressText key\="0-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '1'
-        },
-        {
-          label: 'Option 2',
-          meta: \[
-            'Some',
-            <IressText key\="1-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '2'
-        },
-        {
-          label: 'Option 3',
-          meta: \[
-            'Some',
-            <IressText key\="2-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '3'
-        },
-        {
-          label: 'Option 4',
-          meta: \[
-            'Some',
-            <IressText key\="3-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '4'
-        },
-        {
-          label: 'Option 5',
-          meta: \[
-            'Some',
-            <IressText key\="4-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '5'
-        }
-      \]}
-      placeholder\="50perc"
-      width\="50perc"
-    />
-  </div\>
-  <div\>
-    <IressRichSelect
-      container\={document.body}
-      options\={\[
-        {
-          label: 'Option 1',
-          meta: \[
-            'Some',
-            <IressText key\="0-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '1'
-        },
-        {
-          label: 'Option 2',
-          meta: \[
-            'Some',
-            <IressText key\="1-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '2'
-        },
-        {
-          label: 'Option 3',
-          meta: \[
-            'Some',
-            <IressText key\="2-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '3'
-        },
-        {
-          label: 'Option 4',
-          meta: \[
-            'Some',
-            <IressText key\="3-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '4'
-        },
-        {
-          label: 'Option 5',
-          meta: \[
-            'Some',
-            <IressText key\="4-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '5'
-        }
-      \]}
-      placeholder\="75perc"
-      width\="75perc"
-    />
-  </div\>
-  <div\>
-    <IressRichSelect
-      container\={document.body}
-      options\={\[
-        {
-          label: 'Option 1',
-          meta: \[
-            'Some',
-            <IressText key\="0-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '1'
-        },
-        {
-          label: 'Option 2',
-          meta: \[
-            'Some',
-            <IressText key\="1-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '2'
-        },
-        {
-          label: 'Option 3',
-          meta: \[
-            'Some',
-            <IressText key\="2-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '3'
-        },
-        {
-          label: 'Option 4',
-          meta: \[
-            'Some',
-            <IressText key\="3-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '4'
-        },
-        {
-          label: 'Option 5',
-          meta: \[
-            'Some',
-            <IressText key\="4-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '5'
-        }
-      \]}
-      placeholder\="100perc"
-      width\="100perc"
-    />
-  </div\>
-</IressStack\>
-
-Copy
-
-### [](#custom-label)Custom label
-
-You can provide a custom label for the selected options by passing a function to the `renderLabel` prop. It expects a function that returns a ReactNode.
-
-It passes `SelectLabelRenderProps` as an argument, which contains the selected options and some other useful properties for customising a label.
-
-As per the example here, you can use this prop to render `IressSelectLabel` as a simple text label instead of tags when using the `multiSelect` prop.
-
-**Note:** As the label is expected to activate the dropdown, it is best to provide a button or other interactive element as the label. If the interactive element is nested, it should have the `role="combobox"` to indicate the intention that it will be activating the dropdown (as is the case of `IressSelectTags` which has multiple Buttons, but adds the combobox role to the chevron).
-
-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; }
-
-const CustomLabel: IressRichSelectProps\['renderLabel'\] \= ({ value }) \=> (
-  <IressSelectLabel role\="combobox" selected\={value} />
-);
-export const SelectCustomLabel \= () \=> (
-  <IressRichSelect
-    multiSelect
-    options\={\[
-      { label: 'Option 1', value: 'option-1' },
-      { label: 'Option 2', value: 'option-2' },
-    \]}
-    placeholder\="Select an item"
-    renderLabel\={CustomLabel}
-    container\={document.body}
-  />
-);
-
-Copy
-
-### [](#custom-options)Custom options
-
-In some cases, you may need to customise the options that are displayed. You can pass a function to the `renderOptions` prop. It expects a function that returns a ReactNode.
-
-It passes `SelectOptionRenderProps` as an argument, which contains the options and some other useful properties for customising the options.
-
-Selected: None
-
-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; }
-
-const CustomOptions: IressRichSelectProps\['renderOptions'\] \= ({
-  loading,
-  query,
-  results,
-  setQuery,
-  setValue,
-  value,
-}) \=> {
-  const valueArray \= Array.isArray(value) ? value : \[value\];
-  const selected \= value ? (valueArray as LabelValueMeta\[\]) : \[\];
-  const simpleSelected \= selected.map(
-    (selectedItem: FormattedLabelValueMeta) \=> {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- We only need the unformatted object keys when displaying the selected value
-      const { formattedLabel, ...unformatted } \= selectedItem;
-      return unformatted;
-    },
-  );
-  const hasResults \= !!results.length || (query && !loading);
-  const hasSelected \= !!selected.length;
-  const hasResultsAndSelected \= hasResults && hasSelected;
-  return (
-    <IressSelectSearch
-      activator\={
-        <IressSelectSearchInput
-          onChange\={(e) \=> setQuery(e.currentTarget.value)}
-          value\={query}
-          loading\={loading}
-          placeholder\="Search and select"
-        />
-      }
-      style\={{
-        maxHeight: '210px',
-      }}
-    \>
-      {hasSelected && (
-        <IressSelectMenu
-          heading\={\`Selected (${selected.length})\`}
-          items\={simpleSelected}
-          multiSelect
-          onChange\={setValue}
-          selected\={value}
-        />
-      )}
-      {hasResultsAndSelected && <IressMenuDivider gutter\="xs" />}
-      {hasResults && (
-        <IressSelectMenu
-          heading\={query ? 'Search results' : 'All options'}
-          items\={results}
-          multiSelect
-          noResults\={query ? 'No results found' : undefined}
-          onChange\={setValue}
-          selected\={value}
-          hideSelectedItems
-        />
-      )}
-    </IressSelectSearch\>
-  );
-};
-export const SelectCustomOptions \= () \=> (
-  <IressRichSelect
-    container\={document.body}
-    multiSelect
-    options\={\[
-      { label: 'Option 1', value: 'option-1' },
-      { label: 'Option 2', value: 'option-2' },
-      { label: 'Option 3', value: 'option-3' },
-      { label: 'Option 4', value: 'option-4' },
-      { label: 'Option 5', value: 'option-5' },
-    \]}
-    renderOptions\={CustomOptions}
-    virtualFocus\={false}
-  />
-);
-
-Copy
-
-### [](#create-new-option)Create new option
-
-You can use the `renderOptions` prop to add additional functionality to the options list. This is useful for allowing users to create new options.
-
-Select an item
-
-Selected: None
-
-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; }
-
-const FREQUENTLY\_SELECTED \= \[
-  { label: 'Frequently selected 1', value: 'freq-1' },
-  { label: 'Frequently selected 2', value: 'freq-2' },
-\];
-const OPTIONS \= \[
-  { label: 'Option 1', value: 'option-1' },
-  { label: 'Option 2', value: 'option-2' },
-  { label: 'Option 3', value: 'option-3' },
-  { label: 'Option 4', value: 'option-4' },
-  { label: 'Option 5', value: 'option-5' },
-\];
-const WithNewOption: IressRichSelectProps\['renderOptions'\] \= ({
-  loading,
-  debouncedQuery,
-  query,
-  results,
-  setQuery,
-  setValue,
-  value,
-}) \=> {
-  const selectedArray \= toArray(value);
-  const simpleSelected \= selectedArray.map(
-    (selectedItem: FormattedLabelValueMeta) \=> {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- We only need the unformatted object keys when displaying the selected value
-      const { formattedLabel, ...unformatted } \= selectedItem;
-      return unformatted;
-    },
-  );
-  const hasResults \=
-    (!!results.length && results !== OPTIONS) || (debouncedQuery && !loading);
-  const hasSelected \= !!selectedArray.length;
-  const hasResultsAndSelected \= hasResults && hasSelected;
-  const showFrequentlySelected \=
-    !hasResults &&
-    !FREQUENTLY\_SELECTED.every((frequent) \=>
-      selectedArray.some((selected) \=> selected.value \=== frequent.value),
-    );
-  const canCreate \=
-    debouncedQuery &&
-    !results.some((result) \=> result.label \=== debouncedQuery) &&
-    !selectedArray.some((selected) \=> selected.label \=== debouncedQuery);
-  const hasFrequentlyAndOther \=
-    showFrequentlySelected && (hasResults || hasSelected);
-  const headingId \= useId();
-  const inputRef \= useRef<InputRef | null\>(null);
-  return (
-    <IressSelectSearch
-      activator\={
-        <IressSelectSearchInput
-          onChange\={(e) \=> setQuery(e.currentTarget.value)}
-          value\={query}
-          loading\={loading}
-          placeholder\="Search for items"
-          ref\={inputRef}
-        />
-      }
-    \>
-      <IressSelectBody        header={
-          canCreate && (
-            <IressSelectCreate
-              heading\="Add custom option"
-              label\={debouncedQuery}
-              loading\={loading}
-              onCreate\={() \=> {
-                setValue(\[...selectedArray, { label: query, value: query }\]);
-                setQuery('');
-                close();
-              }}
-            />
-          )
-        }
-      >        {hasSelected && (
-          <IressSelectMenu
-            aria-labelledby\={headingId}
-            heading\={
-              <IressSelectHeading
-                clearAll
-                onClearAll\={() \=> {
-                  setValue(\[\]);
-                  inputRef.current?.focus();
-                }}
-              \>
-                <h2 id\={headingId}\>Selected ({selectedArray.length})</h2\>
-              </IressSelectHeading\>
-            }
-            items\={simpleSelected}
-            multiSelect
-            onChange\={setValue}
-            selected\={value}
-          />
-        )}
-        {hasResultsAndSelected && <IressMenuDivider gutter\="xs" />}
-        {hasResults && (
-          <IressSelectMenu
-            heading\="Search results"
-            items\={results}
-            multiSelect
-            noResults\={debouncedQuery ? 'No results found' : undefined}
-            onChange\={setValue}
-            selected\={value}
-            hideSelectedItems
-          />
-        )}
-        {hasFrequentlyAndOther && <IressMenuDivider gutter\="xs" />}
-        {showFrequentlySelected && (
-          <IressSelectMenu
-            heading\="Frequently selected"
-            items\={FREQUENTLY\_SELECTED}
-            multiSelect
-            onChange\={setValue}
-            selected\={value}
-            hideSelectedItems
-          />
-        )}
-      </IressSelectBody\>
-    </IressSelectSearch\>
-  );
-};
-export const SelectNewOption \= () \=> (
-  <IressRichSelect
-    container\={document.body}
-    multiSelect
-    options\={OPTIONS}
-    placeholder\="Select an item"
-    renderOptions\={WithNewOption}
-    virtualFocus\={false}
-  />
-);
-
-Copy
-
-### [](#header-and-footer)Header and Footer
-
-Use the `header` `footer` prop to add a header/footer to the select panel. They can be any component you like, but you need to manage the styling on your own. If you want to keep the padding align with option items, try to wrap inside `<IressMenuText>` (it's essentially a div container, see the example below):
-
-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; }
-
-<IressRichSelect
-  container\={document.body}
-  footer\={<\><IressDivider style\={{marginBottom: 0}} /><IressMenuText\><IressInline gutter\="sm"\><IressButton\>Button 1</IressButton\><IressButton\>Button 2</IressButton\></IressInline\></IressMenuText\></\>}
-  header\={<\><IressMenuText\><IressText element\="h3" style\={{margin: 0}}\>Header</IressText\></IressMenuText\><IressDivider style\={{marginTop: 0}} /></\>}
-  options\={\[
-    {
-      label: 'Option 1',
-      meta: \[
-        'Some',
-        <IressText key\="0-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '1'
-    },
-    {
-      label: 'Option 2',
-      meta: \[
-        'Some',
-        <IressText key\="1-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '2'
-    },
-    {
-      label: 'Option 3',
-      meta: \[
-        'Some',
-        <IressText key\="2-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '3'
-    },
-    {
-      label: 'Option 4',
-      meta: \[
-        'Some',
-        <IressText key\="3-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '4'
-    },
-    {
-      label: 'Option 5',
-      meta: \[
-        'Some',
-        <IressText key\="4-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '5'
-    }
-  \]}
-  placeholder\=""
-/>
-
-Copy
-
-### [](#readonly)Readonly
-
-The `readonly` prop can be set to `true` to prevent the user from changing the value of the select. This will change the select to a custom read-only style, and will display multiple values seperated with a comma.
-
-If you need more control over the read-only state (for example, rendering a stylised version of the value), you can use the [`IressReadonly` component](?path=/docs/components-readonly--docs).
-
-Option 1, Option 2, Option 3, Option 4, Option 5
-
-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; }
-
-<IressRichSelect
-  container\={document.body}
-  multiSelect
-  options\={\[
-    {
-      label: 'Option 1',
-      meta: \[
-        'Some',
-        <IressText key\="0-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '1'
-    },
-    {
-      label: 'Option 2',
-      meta: \[
-        'Some',
-        <IressText key\="1-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '2'
-    },
-    {
-      label: 'Option 3',
-      meta: \[
-        'Some',
-        <IressText key\="2-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '3'
-    },
-    {
-      label: 'Option 4',
-      meta: \[
-        'Some',
-        <IressText key\="3-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '4'
-    },
-    {
-      label: 'Option 5',
-      meta: \[
-        'Some',
-        <IressText key\="4-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '5'
-    }
-  \]}
-  placeholder\=""
-  readonly
-  value\={\[
-    {
-      label: 'Option 1',
-      meta: \[
-        'Some',
-        <IressText key\="0-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '1'
-    },
-    {
-      label: 'Option 2',
-      meta: \[
-        'Some',
-        <IressText key\="1-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '2'
-    },
-    {
-      label: 'Option 3',
-      meta: \[
-        'Some',
-        <IressText key\="2-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '3'
-    },
-    {
-      label: 'Option 4',
-      meta: \[
-        'Some',
-        <IressText key\="3-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '4'
-    },
-    {
-      label: 'Option 5',
-      meta: \[
-        'Some',
-        <IressText key\="4-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '5'
-    }
-  \]}
-/>
-
-Copy
-
-[](#sub-components)Sub-components
----------------------------------
-
-`IressRichSelect` is composed of several sub-components that can be used to customise the appearance and behaviour of the select.
-
-These are completely optional, the default behaviour should be sufficient for most use cases. They have been exposed to allow you to customise the select based on any use case.
-
-Below is a mapping of the available sub-components to the previous [Create new option example](#create-new-option).
-
-![](/@fs/app/packages/components/src/components/RichSelect/assets/ids-rich-select--sub-component-mapping.svg)
-
-### [](#iressselectbody)IressSelectBody
-
-A container for the options list. It accepts `header` and `footer` props, allowing you to fix content to the top or bottom of the dropdown.
-
-Add custom option
------------------
-
-New option
-
-* * *
-
-Option 1Some
-
-Active
-
-Option 2Some
-
-Active
-
-Option 3Some
-
-Active
-
-Option 4Some
-
-Active
-
-Option 5Some
-
-Active
-
-Option 6Some
-
-Active
-
-Option 7Some
-
-Active
-
-Option 8Some
-
-Active
-
-Option 9Some
-
-Active
-
-Option 10Some
-
-Active
-
-Option 11Some
-
-Active
-
-Option 12Some
-
-Active
-
-Option 13Some
-
-Active
-
-Option 14Some
-
-Active
-
-Option 15Some
-
-Active
-
-This will always be fixed to the bottom
-
-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; }
-
-<IressSelectBody
-  footer\={<IressPanel\>This will always be fixed to the bottom</IressPanel\>}
-  header\={<\><IressSelectCreate heading\="Add custom option" /><IressMenuDivider gutter\="none" /></\>}
-  style\={{
-    border: '1px solid var(--iress-g-border-color)'
-  }}
-\>
-  <IressSelectMenu
-    fluid
-    items\={\[
-      {
-        label: 'Option 1',
-        meta: \[
-          'Some',
-          <IressText key\="0-active" mode\="success"\>Active</IressText\>
-        \],
-        value: '1'
-      },
-      {
-        label: 'Option 2',
-        meta: \[
-          'Some',
-          <IressText key\="1-active" mode\="success"\>Active</IressText\>
-        \],
-        value: '2'
-      },
-      {
-        label: 'Option 3',
-        meta: \[
-          'Some',
-          <IressText key\="2-active" mode\="success"\>Active</IressText\>
-        \],
-        value: '3'
-      },
-      {
-        label: 'Option 4',
-        meta: \[
-          'Some',
-          <IressText key\="3-active" mode\="success"\>Active</IressText\>
-        \],
-        value: '4'
-      },
-      {
-        label: 'Option 5',
-        meta: \[
-          'Some',
-          <IressText key\="4-active" mode\="success"\>Active</IressText\>
-        \],
-        value: '5'
-      },
-      {
-        label: 'Option 6',
-        meta: \[
-          'Some',
-          <IressText key\="5-active" mode\="success"\>Active</IressText\>
-        \],
-        value: '6'
-      },
-      {
-        label: 'Option 7',
-        meta: \[
-          'Some',
-          <IressText key\="6-active" mode\="success"\>Active</IressText\>
-        \],
-        value: '7'
-      },
-      {
-        label: 'Option 8',
-        meta: \[
-          'Some',
-          <IressText key\="7-active" mode\="success"\>Active</IressText\>
-        \],
-        value: '8'
-      },
-      {
-        label: 'Option 9',
-        meta: \[
-          'Some',
-          <IressText key\="8-active" mode\="success"\>Active</IressText\>
-        \],
-        value: '9'
-      },
-      {
-        label: 'Option 10',
-        meta: \[
-          'Some',
-          <IressText key\="9-active" mode\="success"\>Active</IressText\>
-        \],
-        value: '10'
-      },
-      {
-        label: 'Option 11',
-        meta: \[
-          'Some',
-          <IressText key\="10-active" mode\="success"\>Active</IressText\>
-        \],
-        value: '11'
-      },
-      {
-        label: 'Option 12',
-        meta: \[
-          'Some',
-          <IressText key\="11-active" mode\="success"\>Active</IressText\>
-        \],
-        value: '12'
-      },
-      {
-        label: 'Option 13',
-        meta: \[
-          'Some',
-          <IressText key\="12-active" mode\="success"\>Active</IressText\>
-        \],
-        value: '13'
-      },
-      {
-        label: 'Option 14',
-        meta: \[
-          'Some',
-          <IressText key\="13-active" mode\="success"\>Active</IressText\>
-        \],
-        value: '14'
-      },
-      {
-        label: 'Option 15',
-        meta: \[
-          'Some',
-          <IressText key\="14-active" mode\="success"\>Active</IressText\>
-        \],
-        value: '15'
-      }
-    \]}
-  />
-</IressSelectBody\>
-
-Copy
-
-### [](#iressselectcreate)IressSelectCreate
-
-A button designed to create an option if the desired option is not in the list. Use the `onCreate` prop to handle the creation of the new option.
-
-Add custom option
------------------
-
-WX
-
-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; }
-
-<IressSelectCreate
-  heading\="Add custom option"
-  label\="WX"
-/>
-
-Copy
-
-### [](#iressselectheading)IressSelectHeading
-
-A heading designed to allow clearing of a list. To show the clear all button, you can set `clearAll` (it can be a string if you want to override the text). Use the `onClearAll` prop to handle the clearing of the list.
-
-Selected (2)
-------------
-
-Clear all
-
-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; }
-
-<IressSelectHeading clearAll\>
-  <h2\>
-    Selected (2)  </h2\>
-</IressSelectHeading\>
-
-Copy
-
-### [](#iressselectlabel)IressSelectLabel
-
-A button designed to display a text representation of the selected items. It supports both single and multiple selected items.
-
-It is used to render the activator of the `IressRichSelect` in single select mode when no `renderLabel` prop is provided.
-
-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; }
-
-<IressSelectLabel placeholder\="" />
-
-Copy
-
-Option 1
-
-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; }
-
-<IressSelectLabel
-  placeholder\=""
-  selected\={{
-    label: 'Option 1',
-    meta: \[
-      'Some',
-      <IressText key\="0-active" mode\="success"\>Active</IressText\>
-    \],
-    value: '1'
-  }}
-/>
-
-Copy
-
-5 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; }
-
-<IressSelectLabel
-  placeholder\=""
-  selected\={\[
-    {
-      label: 'Option 1',
-      meta: \[
-        'Some',
-        <IressText key\="0-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '1'
-    },
-    {
-      label: 'Option 2',
-      meta: \[
-        'Some',
-        <IressText key\="1-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '2'
-    },
-    {
-      label: 'Option 3',
-      meta: \[
-        'Some',
-        <IressText key\="2-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '3'
-    },
-    {
-      label: 'Option 4',
-      meta: \[
-        'Some',
-        <IressText key\="3-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '4'
-    },
-    {
-      label: 'Option 5',
-      meta: \[
-        'Some',
-        <IressText key\="4-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '5'
-    }
-  \]}
-/>
-
-Copy
-
-#### [](#select-label-props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| append | 
-Append content.
-
-ReactNode
-
-
-
- | 
-
-<IressIcon />
-
-
-
- | Set object |
-| placeholder | 
-
-Placeholder, shown when there is nothing selected.
-
-ReactNode
-
-
-
- | \- | 
-
-""
-
- |
-| prepend | 
-
-Prepend content.
-
-ReactNode
-
-
-
- | \- | Set object |
-| selected | 
-
-Selected items.
-
-LabelValueMeta | LabelValueMeta\[\] | undefined
-
- | \- | Set object |
-| selectedOptionsText | 
-
-Text displayed next to label when two or more options are selected.
-
-stringundefined
-
-
-
- | {{numOptions}} selected | Set object |
-
-### [](#iressselectmenu)IressSelectMenu
-
-A menu component designed to transform an array of `LabelValueMeta[]` into a listbox menu. It accepts a `heading` and `noResults` prop to provide context to the user in certain scenarios. It also accepts a range of other props to customise appearance and behaviour.
-
-It is used to render the available options of the `IressRichSelect` in single select mode when no `renderOptions` prop is provided.
-
-Search results
---------------
-
-Option 1Option 2Option 3Option 4Option 5
-
-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; }
-
-<IressSelectMenu
-  fluid
-  heading\="Search results"
-  items\={\[
-    {
-      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'
-    }
-  \]}
-  noResults\="No results found"
-/>
-
-Copy
-
-Search results
---------------
-
-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; }
-
-<IressSelectMenu
-  fluid
-  heading\="Search results"
-  items\={\[\]}
-  noResults\="No results found"
-/>
-
-Copy
-
-#### [](#select-menu-props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| defaultSelected | 
-Initially selected values of menu when `role` is listbox. Used for uncontrolled menus.
-
-MenuSelectedundefined
-
-
-
- | \- | Set object |
-| heading | 
-
-Heading slot. Often used for a title or description. If a string, will automatically provide an id for aria-labelledby.
-
-ReactNode
-
-
-
- | \- | 
-
-"Search results"
-
- |
-| hideSelectedItems | 
-
-Hide selected items from menu. Useful for autocomplete scenarios.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| items | 
-
-Items to be displayed in the menu, array of FormattedLabelValueMeta.
-
-FormattedLabelValueMeta\[\] | undefined
-
- | \[\] | 
-
-RAW
-
-items : \[
-
-0 : {...} 2 keys
-
-1 : {...} 2 keys
-
-2 : {...} 2 keys
-
-3 : {...} 2 keys
-
-4 : {...} 2 keys
-
-\]
-
-
-
-
-
- |
-| limitDesktop | 
-
-Maximum number of results displayed on larger screen sizes (>= 768).
-
-numberundefined
-
-
-
- | \- | Set object |
-| limitMobile | 
-
-Maximum number of results displayed on mobile screen sizes (< 768).
-
-numberundefined
-
-
-
- | \- | Set object |
-| multiSelect | 
-
-If set to true, menu items will contain checkboxes.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| noResults | 
-
-No results text to display when no items are found.
-
-ReactNode
-
-
-
- | \- | 
-
-"No results found"
-
- |
-| onChange | 
-
-Emitted when the value changes when item is selected from the menu
-
-((selected?: LabelValueMeta | LabelValueMeta\[\] | undefined) => void) | undefined
-
- | \- | \- |
-| selected | 
-
-Selected items.
-
-LabelValueMeta | LabelValueMeta\[\] | undefined
-
- | \- | Set object |
-| selectedFirst | 
-
-Set whether to display selected items first in the menu.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| Show Menu props itemsMenu props | Show Menu props items |
-
-### [](#iressselectsearch)IressSelectSearch
-
-A custom inline search navigator, designed to create a search experience within a dropdown. The activator passed in will be pinned on the top of the dropdown when used in `IressRichSelect`. It can be combined with other components to create a rich select experience, including:
-
-*   Keeping focus on the input while the user navigates the options with the arrow keys.
-*   Combine with different components such as `IressSelectBody`, `IressSelectCreate` and `IressSelectMenu` to allow multiple items to be pinned to the top of the dropdown.
-
-It is used to filter the available options of the `IressRichSelect` when an asynchronous `options` function is used and no `renderOptions` prop is provided.
-
-Add custom option
------------------
-
-New option
-
-* * *
-
-Option 1Some
-
-Active
-
-Option 2Some
-
-Active
-
-Option 3Some
-
-Active
-
-Option 4Some
-
-Active
-
-Option 5Some
-
-Active
-
-Option 6Some
-
-Active
-
-Option 7Some
-
-Active
-
-Option 8Some
-
-Active
-
-Option 9Some
-
-Active
-
-Option 10Some
-
-Active
-
-Option 11Some
-
-Active
-
-Option 12Some
-
-Active
-
-Option 13Some
-
-Active
-
-Option 14Some
-
-Active
-
-Option 15Some
-
-Active
-
-This will always be fixed to the bottom
-
-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; }
-
-<IressSelectSearch
-  activator\={<IressSelectSearchInput placeholder\="Search and select" />}
-  style\={{
-    border: '1px solid var(--iress-g-border-color)',
-    maxHeight: 400
-  }}
-\>
-  <IressSelectBody
-    footer\={<IressPanel\>This will always be fixed to the bottom</IressPanel\>}
-    header\={<\><IressSelectCreate heading\="Add custom option" /><IressMenuDivider gutter\="none" /></\>}
-  \>
-    <IressSelectMenu
-      fluid
-      items\={\[
-        {
-          label: 'Option 1',
-          meta: \[
-            'Some',
-            <IressText key\="0-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '1'
-        },
-        {
-          label: 'Option 2',
-          meta: \[
-            'Some',
-            <IressText key\="1-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '2'
-        },
-        {
-          label: 'Option 3',
-          meta: \[
-            'Some',
-            <IressText key\="2-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '3'
-        },
-        {
-          label: 'Option 4',
-          meta: \[
-            'Some',
-            <IressText key\="3-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '4'
-        },
-        {
-          label: 'Option 5',
-          meta: \[
-            'Some',
-            <IressText key\="4-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '5'
-        },
-        {
-          label: 'Option 6',
-          meta: \[
-            'Some',
-            <IressText key\="5-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '6'
-        },
-        {
-          label: 'Option 7',
-          meta: \[
-            'Some',
-            <IressText key\="6-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '7'
-        },
-        {
-          label: 'Option 8',
-          meta: \[
-            'Some',
-            <IressText key\="7-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '8'
-        },
-        {
-          label: 'Option 9',
-          meta: \[
-            'Some',
-            <IressText key\="8-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '9'
-        },
-        {
-          label: 'Option 10',
-          meta: \[
-            'Some',
-            <IressText key\="9-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '10'
-        },
-        {
-          label: 'Option 11',
-          meta: \[
-            'Some',
-            <IressText key\="10-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '11'
-        },
-        {
-          label: 'Option 12',
-          meta: \[
-            'Some',
-            <IressText key\="11-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '12'
-        },
-        {
-          label: 'Option 13',
-          meta: \[
-            'Some',
-            <IressText key\="12-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '13'
-        },
-        {
-          label: 'Option 14',
-          meta: \[
-            'Some',
-            <IressText key\="13-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '14'
-        },
-        {
-          label: 'Option 15',
-          meta: \[
-            'Some',
-            <IressText key\="14-active" mode\="success"\>Active</IressText\>
-          \],
-          value: '15'
-        }
-      \]}
-    />
-  </IressSelectBody\>
-</IressSelectSearch\>
-
-Copy
-
-### [](#iressselectsearchinput)IressSelectSearchInput
-
-A custom input designed specifically to be used inside a dropdown. It has a simple appearance, with only a single border used to divide it from the rest of the dropdown. The border will change depending on its location inside the dropdown. It should not be used outside of a dropdown.
-
-It is used to filter the available options of the `IressRichSelect` when an asynchronous `options` function is used and no `renderOptions` prop is provided.
-
-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; }
-
-<IressSelectSearchInput />
-
-Copy
-
-### [](#iressselecttags)IressSelectTags
-
-A component designed to display multiple selected items as tags, as well as providing functionality to delete each tag without having to open the dropdown. It supports both single and multiple selected items.
-
-It is used to render the activator of the `IressRichSelect` if `multiSelect` has been set and no `renderLabel` prop is provided.
-
-Select an item
-
-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; }
-
-<IressSelectTags placeholder\="Select an item" />
-
-Copy
-
-Option 1
-
-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; }
-
-<IressSelectTags
-  placeholder\="Select an item"
-  selected\={{
-    label: 'Option 1',
-    meta: \[
-      'Some',
-      <IressText key\="0-active" mode\="success"\>Active</IressText\>
-    \],
-    value: '1'
-  }}
-/>
-
-Copy
-
-#### [](#select-tags-props)Props
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| append | 
-Append content.
-
-ReactNode
-
-
-
- | 
-
-<IressButton />
-
-
-
- | Set object |
-| limit | 
-
-Limit of tags to display before shortening to `selectedOptionsText`
-
-numberundefined
-
-
-
- | 
-
-5
-
- | Set object |
-| onDelete | 
-
-Emitted when a tag is deleted.
-
-((item?: LabelValueMeta | undefined, e?: SyntheticEvent<ButtonRef, Event> | undefined) => void) | undefined
-
- | \- | \- |
-| onDeleteAll | 
-
-Emitted when the combined tag delete button is clicked.
-
-((e: SyntheticEvent<ButtonRef, Event>) => void) | undefined
-
- | \- | \- |
-| onToggleActions | 
-
-Emitted when actions are toggled.
-
-((open?: boolean | undefined) => void) | undefined
-
- | \- | \- |
-| placeholder | 
-
-Placeholder, shown when there is nothing selected.
-
-ReactNode
-
-
-
- | \- | 
-
-"Select an item"
-
- |
-| prepend | 
-
-Prepend content.
-
-ReactNode
-
-
-
- | \- | Set object |
-| selected | 
-
-Selected items.
-
-LabelValueMeta | LabelValueMeta\[\] | undefined
-
- | \- | Set object |
-| selectedOptionsText | 
-
-Text displayed next to label when two or more options are selected.
-
-stringundefined
-
-
-
- | {{numOptions}} selected | Set object |
-
-#### [](#maximum-tag-limit)Maximum tag limit
-
-By default, the maximum number of tags that can be displayed is 5. If more than 5 tags are selected, the label will display the number of selected items. This can be changed using the `limit` prop.
-
-5 selected
-
-Expand allDelete all
-
-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; }
-
-<IressSelectTags
-  limit\={3}
-  placeholder\="Select an item"
-  selected\={\[
-    {
-      label: 'Option 1',
-      meta: \[
-        'Some',
-        <IressText key\="0-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '1'
-    },
-    {
-      label: 'Option 2',
-      meta: \[
-        'Some',
-        <IressText key\="1-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '2'
-    },
-    {
-      label: 'Option 3',
-      meta: \[
-        'Some',
-        <IressText key\="2-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '3'
-    },
-    {
-      label: 'Option 4',
-      meta: \[
-        'Some',
-        <IressText key\="3-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '4'
-    },
-    {
-      label: 'Option 5',
-      meta: \[
-        'Some',
-        <IressText key\="4-active" mode\="success"\>Active</IressText\>
-      \],
-      value: '5'
-    }
-  \]}
-/>
-
-Copy
-
-[](#testing)Testing
--------------------
-
-### [](#getting-the-value)Getting the value
-
-The value of the rich select is not accessed the same way as other inputs because it is not an input but a button. To get the value, you need to use `getByText` instead of `getByValue`.
-
-\[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;
-}
-
-render(<IressRichSelect options\={options} value\={{ label: 'Option 1' }} />);
-const select \= screen.getByRole('combobox');
-// Will work
-expect(select).toHaveTextContent('Option 1');
-// Won't work
-expect(select).toHaveValue('Option 1');
-
-Copy
-
-If the `multiSelect` prop is set to true, the value will be prefixed by the text `Selected:` , as per below.
-
-\[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;
-}
-
-render(
-  <IressRichSelect
-    options\={options}
-    value\={\[{ label: 'Option 1' }\]}
-    multiSelect
-  />,
-);
-const select \= screen.getByRole('combobox');
-// Will work
-expect(select).toHaveTextContent('Selected: Option 1');
-// Won't work
-expect(select).toHaveValue('Option 1');
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [When To Use](#when-to-use)
-*   [Accessibility](#accessibility)
-*   [Examples](#examples)
-    *   [Single select](#single-select)
-    *   [Multi-select](#multi-select)
-    *   [Asynchronous options](#asynchronous-options)
-    *   [Initial options](#initial-options)
-    *   [Sizing](#sizing)
-    *   [Custom label](#custom-label)
-    *   [Custom options](#custom-options)
-    *   [Create new option](#create-new-option)
-    *   [Header and Footer](#header-and-footer)
-    *   [Readonly](#readonly)
-*   [Sub-components](#sub-components)
-    *   [IressSelectBody](#iressselectbody)
-    *   [IressSelectCreate](#iressselectcreate)
-    *   [IressSelectHeading](#iressselectheading)
-    *   [IressSelectLabel](#iressselectlabel)
-    *   [IressSelectMenu](#iressselectmenu)
-    *   [IressSelectSearch](#iressselectsearch)
-    *   [IressSelectSearchInput](#iressselectsearchinput)
-    *   [IressSelectTags](#iressselecttags)
-*   [Testing](#testing)
-    *   [Getting the value](#getting-the-value)