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

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

@@ -1,754 +0,0 @@
-[](#autocomplete)Autocomplete
-=============================
-
-Overview
---------
-
-Autocomplete allow for users to fill in their input by providing suggestions as they type.
-
-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; }
-
-<IressAutocomplete
-  options\={\[
-    {
-      label: 'Option 1'
-    },
-    {
-      label: 'Option 2'
-    },
-    {
-      label: 'Option 3'
-    },
-    {
-      label: 'Option 4'
-    },
-    {
-      label: 'Option 5'
-    }
-  \]}
-  popoverProps\={{
-    container: {}
-  }}
-/>
-
-Copy
-
-[](#usage)Usage
----------------
-
-The `IressAutocomplete` element extends `IressInput` with additional functionality to provide suggestions to the user as they type.
-
-There is no validation done between the suggestions and the input value. They are strictly suggestions to improve the user experience. If you would like to restrict the input to the suggestions, you can use `IressCombobox`.
-
-### [](#uncontrolled)Uncontrolled
-
-The `defaultValue` prop can be used to set the initial value of the input. The value will be managed by the component.
-
-×Clear
-
-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; }
-
-<IressAutocomplete
-  defaultValue\="Option 1"
-  options\={\[
-    {
-      label: 'Option 1'
-    },
-    {
-      label: 'Option 2'
-    },
-    {
-      label: 'Option 3'
-    },
-    {
-      label: 'Option 4'
-    },
-    {
-      label: 'Option 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 `onClear` props to sync your state with the component.
-
-×Clear
-
-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 { IressAutocomplete, IressAutocompleteProps } from '@iress-oss/ids-components';
-import { useState } from 'react';
-export const AutocompleteUsingState \= () \=> {
-  const \[value, setValue\] \= useState('Option 1');
-  return (
-    <IressAutocomplete
-      {...{
-  popoverProps: {
-    container: document.body,
-  },
-  options: \[
-    {
-      label: 'Option 1',
-    },
-    {
-      label: 'Option 2',
-    },
-    {
-      label: 'Option 3',
-    },
-    {
-      label: 'Option 4',
-    },
-    {
-      label: 'Option 5',
-    },
-  \],
-}}
-      onChange\={(\_e, newValue) \=> setValue(newValue ?? '')}
-      onClear\={() \=> setValue('')}
-      value\={value}
-    />
-  );
-};
-
-Copy
-
-### [](#providing-suggestions)Providing suggestions
-
-#### [](#options)`options`
-
-To use the suggestion functionality, you can provide an array of `LabelValueMeta[]` objects to the `options` prop.
-
-**Note:** If `value` is provided on a suggestion item, it will be used (casted to a string) instead of the `label` key. This is useful when you want to display a different value to the user than what is used for filtering.
-
-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; }
-
-<IressAutocomplete
-  options\={\[
-    {
-      label: 'Option 1'
-    },
-    {
-      label: 'Option 2'
-    },
-    {
-      label: 'Option 3'
-    },
-    {
-      label: 'Option 4'
-    },
-    {
-      label: 'Option 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.
-
-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 { IressAutocomplete, IressAutocompleteProps } from '@iress-oss/ids-components';
-interface StarWarsCharacter {
-  name: string;
-  gender: string;
-}
-interface StarWarsCharacterApi {
-  results: StarWarsCharacter\[\];
-}
-export const AutocompleteUsingAsync \= () \=> (
-  <IressAutocomplete
-    {...{
-  popoverProps: {
-    container: document.body,
-  },
-}}
-    options\={async (query: string) \=> {
-      if (query \=== 'error') {
-        throw new Error('This is an 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,
-      }));
-    }}
-  />
-);
-
-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).
-
-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; }
-
-<IressAutocomplete
-  initialOptions\={\[
-    {
-      label: 'Favourite option 1'
-    },
-    {
-      label: 'Favourite option 2'
-    },
-    {
-      label: 'Favourite option 3'
-    }
-  \]}
-  options\={\[
-    {
-      label: 'Option 1'
-    },
-    {
-      label: 'Option 2'
-    },
-    {
-      label: 'Option 3'
-    },
-    {
-      label: 'Option 4'
-    },
-    {
-      label: 'Option 5'
-    }
-  \]}
-  popoverProps\={{
-    container: document.body
-  }}
-/>
-
-Copy
-
-[](#behaviour)Behaviour
------------------------
-
-*   As long as there is a single character in the input, the suggestions will be displayed in a popover. Unless `initialOptions` are provided where the popover will be displayed immediately on focus.
-*   The popover will close when the input is empty, unless `initialOptions` are provided.
-*   The suggestions will be filtered based on the input value.
-*   Tapping on a suggestion with the mouse will change the input value to the selection and close the popover.
-*   When the user presses the arrows keys while the input is focussed, suggestions will be highlighted, but focus remains on the input.
-*   When the user presses the enter key while a suggestion is highlighted, the suggestion will be selected and the popover will close.
-*   When the user presses the down key while the popover is closed, it will open the popover.
-*   When the user pressed the up key while the first suggestion is highlighted, it will close the popover.
-*   When the user tabs away while no suggestion is highlighted, the input will not be changed.
-*   When the user tabs away while a suggestion is highlighted, the suggestion will be selected.
-*   When the user tabs away while the popover is open, the popover will close.
-
-[](#accessibility)Accessibility
--------------------------------
-
-The autocomplete component follows the [WAI combobox pattern: List autocomplete with manual selection](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#:~:text=List%20autocomplete%20with%20manual,value%20in%20the%20popup). An example of this pattern outside of IDS can be seen at [WAI-ARIA combobox example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).
-
-There is a key difference:
-
-*   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.
-
-[](#examples)Examples
----------------------
-
-### [](#autoselect)`autoSelect`
-
-The `autoSelect` prop will automatically select the highlighted option when the user blurs the autocomplete. This is set to true by default, but can be switched off.
-
-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; }
-
-<IressAutocomplete
-  autoSelect\={false}
-  options\={\[
-    {
-      label: 'Option 1'
-    },
-    {
-      label: 'Option 2'
-    },
-    {
-      label: 'Option 3'
-    },
-    {
-      label: 'Option 4'
-    },
-    {
-      label: 'Option 5'
-    }
-  \]}
-  placeholder\="Should no longer auto-select when an item is highlighted"
-  popoverProps\={{
-    container: document.body
-  }}
-/>
-
-Copy
-
-### [](#input-props)Input props
-
-Autocomplete extends `IressInput`, hence it has the same properties as `IressInput`.
-
-It does have some defaults to help with user experience. `append` automatically has a search icon, and `clearable` and `watermark` are set to true by default.
-
-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; }
-
-<IressAutocomplete
-  append\={<IressPopover activator\={<IressButton mode\="tertiary"\><IressIcon name\="cog" /></IressButton\>} align\="bottom-end" container\={document.body}\><IressPanel className\="iress-u-text"\>Some settings in here</IressPanel\></IressPopover\>}
-  options\={\[
-    {
-      label: 'Option 1'
-    },
-    {
-      label: 'Option 2'
-    },
-    {
-      label: 'Option 3'
-    },
-    {
-      label: 'Option 4'
-    },
-    {
-      label: 'Option 5'
-    }
-  \]}
-  popoverProps\={{
-    container: document.body
-  }}
-  prepend\={<IressIcon name\="search" />}
-  width\="12"
-/>
-
-Copy
-
-### [](#no-results)No results
-
-If you would like to show a message when there are no results, you can use the `noResultsText` prop. It accepts any React node.
-
-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; }
-
-<IressAutocomplete
-  noResultsText\={<IressPanel className\="iress-u-text"\>No results found</IressPanel\>}
-  options\={\[
-    {
-      label: 'Option 1'
-    },
-    {
-      label: 'Option 2'
-    },
-    {
-      label: 'Option 3'
-    },
-    {
-      label: 'Option 4'
-    },
-    {
-      label: 'Option 5'
-    }
-  \]}
-  placeholder\="Type &quot;no&quot; to see the no results text"
-  popoverProps\={{
-    container: document.body
-  }}
-/>
-
-Copy
-
-### [](#popover-props)Popover props
-
-Under the hood, autocomplete uses `IressInputPopover` to display the suggestions. It accepts `autoHighlight`, `align`, `className` and `displayMode`.
-
-There are two additional props that autocomplete accepts to customise the popover: `append` and `prepend`. You can place additional content above or below the results using these props.
-
-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; }
-
-<IressAutocomplete
-  options\={\[
-    {
-      label: 'Option 1'
-    },
-    {
-      label: 'Option 2'
-    },
-    {
-      label: 'Option 3'
-    },
-    {
-      label: 'Option 4'
-    },
-    {
-      label: 'Option 5'
-    }
-  \]}
-  popoverProps\={{
-    append: <IressPanel\><IressButton\>Add an option</IressButton\></IressPanel\>,
-    container: document.body
-  }}
-/>
-
-Copy
-
-### [](#debounce-threshold)Debounce threshold
-
-The `debounceThreshold` prop can be used to set the time in milliseconds to wait before making a request to the `options` function. This is useful when you want to prevent making too many requests to the server.
-
-By default there is a debounce, but it can be removed by setting it to `0`.
-
-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; }
-
-<IressAutocomplete
-  debounceThreshold\={0}
-  options\={\[
-    {
-      label: 'Option 1'
-    },
-    {
-      label: 'Option 2'
-    },
-    {
-      label: 'Option 3'
-    },
-    {
-      label: 'Option 4'
-    },
-    {
-      label: 'Option 5'
-    }
-  \]}
-  placeholder\="Instant search!"
-  popoverProps\={{
-    container: document.body
-  }}
-/>
-
-Copy
-
-### [](#result-limits)Result limits
-
-You can limit the maximum amount of search results displayed in the suggestions by setting the `limitDesktop` prop. This defaults to 12.
-
-On smaller screens (< 768px), the number of options is further reduced by using the `limitMobile` prop, which defaults to 6.
-
-`limitMobile` works by filtering the search results that have been filtered by `limitDesktop`, so must be a smaller value. For example:
-
-\[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;
-}
-
-// 12 results on large screens, 6 on small screens (default values)
-<IressAutocomplete options\={...} />
-// 4 results on large screens, 3 on small screens
-<IressAutocomplete resultLimitDesktop\={4} resultLimitMobile\={3} options\={...} />
-// 4 results on all screens (resultLimitMobile > resultLimitDesktop so has no effect)
-<IressAutocomplete resultLimitDesktop\={4} resultLimitMobile\={5} options\={...} />
-
-Copy
-
-The result limits will also affect the number of initial options displayed, if the `initialOptions` prop is set.
-
-**xl** breakpoint (1200px - 1499px)
-
-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"\>
-  <IressPanel className\="iress-u-text"\>
-    <CurrentBreakpoint />
-  </IressPanel\>
-  <IressAutocomplete
-    limitDesktop\={6}
-    limitMobile\={3}
-    options\={\[
-      {
-        label: 'Option 1'
-      },
-      {
-        label: 'Option 2'
-      },
-      {
-        label: 'Option 3'
-      },
-      {
-        label: 'Option 4'
-      },
-      {
-        label: 'Option 5'
-      },
-      {
-        label: 'Option 6'
-      },
-      {
-        label: 'Option 7'
-      },
-      {
-        label: 'Option 8'
-      },
-      {
-        label: 'Option 9'
-      },
-      {
-        label: 'Option 10'
-      },
-      {
-        label: 'Option 11'
-      },
-      {
-        label: 'Option 12'
-      },
-      {
-        label: 'Option 13'
-      },
-      {
-        label: 'Option 14'
-      },
-      {
-        label: 'Option 15'
-      }
-    \]}
-    popoverProps\={{
-      container: document.body
-    }}
-  />
-</IressStack\>
-
-Copy
-
-### [](#readonly)Readonly
-
-The `readonly` prop can be set to `true` to prevent the user from changing the value of the autocomplete. This will change the input to a custom read-only style and the user will not be able to interact with the input.
-
-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
-
-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; }
-
-<IressAutocomplete
-  defaultValue\="Option 1"
-  options\={\[
-    {
-      label: 'Option 1'
-    },
-    {
-      label: 'Option 2'
-    },
-    {
-      label: 'Option 3'
-    },
-    {
-      label: 'Option 4'
-    },
-    {
-      label: 'Option 5'
-    }
-  \]}
-  popoverProps\={{
-    container: document.body
-  }}
-  readOnly
-/>
-
-Copy
-
-[](#testing)Testing
--------------------
-
-To help you effectively test the autocomplete component, we have provided a few tips based on the behaviour of the component and our own experience.
-
-**Note:** These are suggestions and not requirements. You should test the component in a way that best suits your use case.
-
-### [](#partial-query-matching)Partial query matching
-
-The suggestions are filtered based on the input value. If the input value only matches a part of the option, the input value is highlighted by a `<b />` tag in each option. You will need to account for this in your tests, either using an exact string match with a space to denote the highlighted value, or using a regex to match the string.
-
-If you are using `meta`, `prepend` or `append` props in `LabelValueMeta`, you should also consider this in your search query for the option.
-
-\[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(
-  <IressAutocomplete
-    options\={\[
-      { label: 'Luke Skywalker', value: 'Luke Skywalker', meta: 'male' },
-    \]}
-  />,
-);
-const autocomplete \= screen.getByRole('combobox');
-await user.type(autocomplete, 'lu');
-// Exact string match with a space to denote the highlighted value
-const option \= await screen.findByRole('option', {
-  name: 'Lu ke Skywalker male',
-});
-expect(option).toBeInTheDocument();
-// Using a regex to match the string
-const option \= await screen.findByRole('option', { name: /Skywalker/ });
-expect(option).toBeInTheDocument();
-
-Copy
-
-### [](#query-for-minimal-characters)Query for minimal characters
-
-If you are testing if a specific option appears in the autocomplete that returns asynchronous `options`, it is recommended to use the shortest possible query to return the desired result. The longer the query, the longer it will take to see the results.
-
-\[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(<IressAutocomplete options\={searchStarWarsCharacters} />);
-const autocomplete \= screen.getByRole('combobox');
-// DO: Use the shortest query to return the desired result
-await user.type(autocomplete, 'lu');
-const option \= await screen.findAllByRole('option');
-// DON'T: Use a long query to return the desired result
-await user.type(autocomplete, 'luke skywalker');
-const option \= await screen.findAllByRole('option');
-
-Copy
-
-### [](#use-mocking-when-testing-apis)Use mocking when testing APIs
-
-When testing the autocomplete component with asynchronous `options`, you should mock the API call to return a known set of results, rather than rely on a public prototyping API (eg. [https://swapi.py4e.com/](https://swapi.py4e.com/)). This will allow you to test the component in isolation without relying on the API to return the expected results, as well as reduce chance of flakiness due to timeouts in your tests.
-
-We recommend using [Mock Service Worker](https://mswjs.io/) to mock the API calls in your tests.
-
-\[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;
-}
-
-// src/mocks/handlers.ts
-import { http, HttpResponse } from 'msw';
-export const handlers \= \[
-  // Intercept "GET https://swapi.py4e.com/api/people" requests...
-  http.get('https://swapi.py4e.com/api/people', () \=> {
-    // ...and respond to them using this JSON response.
-    return HttpResponse.json(\[
-      { name: 'Luke Skywalker', gender: 'male' },
-      { name: 'Leia Skywalker', gender: 'female' },
-    \]);
-  }),
-\];
-// src/mocks/node.js
-import { setupServer } from 'msw/node';
-import { handlers } from './handlers';
-export const server \= setupServer(...handlers);
-// src/CustomAutocomplete.test.tsx
-import { server } from './mocks/node';
-server.listen();
-render(<IressAutocomplete options\={searchStarWarsCharacters} />);
-const autocomplete \= screen.getByRole('combobox');
-await user.type(autocomplete, 'lu');
-const option \= await screen.findAllByRole('option');
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [Uncontrolled](#uncontrolled)
-    *   [Controlled](#controlled)
-    *   [Providing suggestions](#providing-suggestions)
-*   [Behaviour](#behaviour)
-*   [Accessibility](#accessibility)
-*   [Examples](#examples)
-    *   [autoSelect](#autoselect)
-    *   [Input props](#input-props)
-    *   [No results](#no-results)
-    *   [Popover props](#popover-props)
-    *   [Debounce threshold](#debounce-threshold)
-    *   [Result limits](#result-limits)
-    *   [Readonly](#readonly)
-*   [Testing](#testing)
-    *   [Partial query matching](#partial-query-matching)
-    *   [Query for minimal characters](#query-for-minimal-characters)
-    *   [Use mocking when testing APIs](#use-mocking-when-testing-apis)