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

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

@@ -1,1433 +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: document.body
-  }}
-/>
-
-Copy
-
-[](#props)Props
----------------
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| alignRight | 
-Set input content align to right, useful for numeric inputs.
-
-booleanundefined
-
-
-
- | 
-
-false
-
- | Set object |
-| alwaysShowOnFocus | 
-
-Always shown on focus, even if the user has not interacted with the input.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| append | 
-
-Append content.
-
-ReactNode
-
-
-
- | 
-
-<IressIcon />
-
-
-
- | Set object |
-| autoSelect | 
-
-If true, the selected option becomes the value of the input when the autocomplete loses focus.
-
-booleanundefined
-
-
-
- | 
-
-true
-
- | Set object |
-| bg | 
-
-**`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
-
-We recommend using the following token values for best background contrast:
-
-*   `colour.primary.fill` for primary backgrounds that need to stand out
-*   `colour.primary.surface` for primary backgrounds that need to be less prominent
-*   `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
-*   `colour.neutral.20` for a slightly darker background color, used in neutral state components
-*   `colour.system.danger.fill` for error backgrounds that need to stand out
-*   `colour.system.danger.surface` for error backgrounds that need to be less prominent
-*   `colour.system.success.fill` for success backgrounds that need to stand out
-*   `colour.system.success.surface` for success backgrounds that need to be less prominent
-*   `colour.system.warning.fill` for warning backgrounds that need to stand out
-*   `colour.system.warning.surface` for warning backgrounds that need to be less prominent
-*   `colour.system.info.fill` for info backgrounds that need to stand out
-*   `colour.system.info.surface` for info backgrounds that need to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | Set object |
-| borderRadius | 
-
-The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **4** | **4** | **5** | **12** | **9** |
-| 1 _\-x-_ |  | 3 _\-x-_ |  |  |
-
-ResponsiveProp<RadiusToken> | undefined
-
- | \- | Set object |
-| clearable | 
-
-If `true`, then user can clear the value of the input.
-
-booleanundefined
-
-
-
- | 
-
-true
-
- | Set object |
-| color | 
-
-The **`color`** CSS property sets the foreground color value of an element's text and text decorations using the colour tokens from the design system. It also sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
-
-We recommend using the following token values for best color contrast:
-
-*   `colour.primary.onFill` used on top of `colour.primary.fill` for primary text that needs to stand out
-*   `colour.primary.text` used on top of `colour.primary.surface` or `colour.neutral.10` for primary text that needs to be less prominent
-*   `colour.neutral.70` used on top of `colour.neutral.10` or `colour.neutral.20` for muted text
-*   `colour.neutral.80` used on top of `colour.neutral.10` or `colour.neutral.20` for standard text
-*   `colour.system.danger.onFill` used on top of `colour.system.danger.fill` for error text that needs to stand out
-*   `colour.system.danger.text` used on top of `colour.system.danger.surface` for error text that needs to be less prominent
-*   `colour.system.success.onFill` used on top of `colour.system.success.fill` for success text that needs to stand out
-*   `colour.system.success.text` used on top of `colour.system.success.surface` for success text that needs to be less prominent
-*   `colour.system.warning.onFill` used on top of `colour.system.warning.fill` for warning text that needs to stand out
-*   `colour.system.warning.text` used on top of `colour.system.warning.surface` for warning text that needs to be less prominent
-*   `colour.system.info.onFill` used on top of `colour.system.info.fill` for informative text that needs to stand out
-*   `colour.system.info.text` used on top of `colour.system.info.surface` for informative text that needs to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | Set object |
-| debounceThreshold | 
-
-Time in milliseconds to wait for before performing result search. Only applies to searchable options (function).
-
-numberundefined
-
-
-
- | 
-
-500
-
- | Set object |
-| defaultValue | 
-
-The value of the input. Can be a string or a number. Use for uncontrolled inputs.
-
-stringundefined
-
-
-
- | \- | Set object |
-| errorText | 
-
-Text to be displayed when the options function errors out. It is not used when the options are provided as an array.
-
-ReactNode
-
-
-
- | 
-
-<IressAlert />
-
-
-
- | Set object |
-| focusable | 
-
-The `focusable` prop is used to apply the focus elevation when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
-
-"true""within"undefined
-
-
-
- | \- | Set object |
-| formatter | 
-
-Bring your own formatter that will be used to format the value when the input is not focused, allowing you to display the value in a different format. e.g. User type in value="dsf 987kkk123" => result after formatter: $987,123 (string)
-
-((value?: string | undefined) => string | number) | undefined
-
- | \- | \- |
-| hide | 
-
-Set **`hide`** to hide an element completely using `display: none`. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `hide: true` Hide on specific breakpoints: `hide: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-Notes:
-
-*   If you need to hide an element but allow it to be visible to screen readers, use the `srOnly` prop instead.
-*   Consider if you can conditionally render the element instead of hiding it.
-
-ResponsiveProp<boolean> | undefined
-
- | \- | Set object |
-| initialOptions | 
-
-Initial options data set, shown when the input is empty.
-
-LabelValueMeta\[\] | undefined
-
- | \- | Set object |
-| inline | 
-
-Make prepend/append element closer to the input content.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| layerStyle | 
-
-Elevate a layer by using a **`layerStyle`**. These are connected to the elevation tokens in the design system. They can be combined to create hierarchy and structure.
-
-*   `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
-*   `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
-*   `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
-
-ResponsiveProp<"elevation.raised" | "elevation.floating" | "elevation.overflow" | "elevation.focus" | "elevation.focusCompact"> | undefined
-
- | \- | Set object |
-| limitDesktop | 
-
-Maximum number of results displayed on larger screen sizes (>= 768).
-
-numberundefined
-
-
-
- | 
-
-12
-
- | Set object |
-| limitMobile | 
-
-Maximum number of results displayed on mobile screen sizes (< 768).
-
-numberundefined
-
-
-
- | 
-
-6
-
- | Set object |
-| loading | 
-
-The loading states of the input field. If provided a string, will use that text as the loading message.
-
-stringbooleanundefined
-
-
-
- | \- | Set object |
-| m | 
-
-The **`m`** property is short for `margin`, and sets the margin area on all four sides of an element.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| maxWidth | 
-
-The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **7** |
-
-ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
-
- | \- | Set object |
-| mb | 
-
-The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| minSearchLength | 
-
-Minimum number of characters required before triggering async search. Only applies to searchable options (function). Below this threshold, no search will be triggered and no loading state will be shown.
-
-numberundefined
-
-
-
- | 
-
-1
-
- | Set object |
-| ml | 
-
-The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mr | 
-
-The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mt | 
-
-The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mx | 
-
-The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| my | 
-
-The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| noGutter | 
-
-The **`noGutter`** property is used to remove the bottom margin from the last child of a component. This is useful when you want to avoid extra spacing at the end of a layout.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| noResultsText | 
-
-Text to be displayed when no results are found.
-
-ReactNode
-
-
-
- | \- | Set object |
-| onChange | 
-
-Emitted when the user changes the input. The second and third arguments are only available when the options were selected from the `options` prop.
-
-((e?: SyntheticEvent<HTMLInputElement, Event> | undefined, value?: string | undefined, option?: LabelValueMeta | undefined) => void) | undefined
-
- | \- | \- |
-| onClear | 
-
-Emitted when the input is manually cleared.
-
-((e: ChangeEvent<HTMLInputElement>) => void) | undefined
-
- | \- | \- |
-| options | 
-
-Options data set, shown when the input is not empty.
-
-LabelValueMeta\[\] | ((query: string) => Promise<LabelValueMeta\[\]>) | undefined
-
- | \- | 
-
-RAW
-
-options : \[
-
-0 : {...} 1 key
-
-1 : {...} 1 key
-
-2 : {...} 1 key
-
-3 : {...} 1 key
-
-4 : {...} 1 key
-
-\]
-
-
-
-
-
- |
-| p | 
-
-The **`p`** property is short for `padding`, and sets the padding area on all four sides of an element at once.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pb | 
-
-The **`pb`** property is short for `padding-bottom` and sets the padding area on the bottom side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pl | 
-
-The **`pl`** property is short for `padding-left` and sets the padding area on the left side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| popoverProps | 
-
-Customise the IressInputPopover props for your needs.
-
-AutocompletePopoverPropsundefined
-
-
-
- | { } | 
-
-RAW
-
-popoverProps : {
-
-container : {...} 0 keys
-
-}
-
-
-
-
-
- |
-| pr | 
-
-The **`pr`** property is short for `padding-right` and sets the padding area on the right side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| prepend | 
-
-Content to prepended to the input field, usually an icon.
-
-ReactNode
-
-
-
- | \- | Set object |
-| pt | 
-
-The **`pt`** property is short for `padding-top` and sets the padding area on the top side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| px | 
-
-The **`px`** property is short for `padding-inline`. It is a shorthand property that defines both the logical inline start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| py | 
-
-The **`py`** property is short for `padding-block`. It defines the logical block start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| rowGap | 
-
-The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.
-
-Note: It only has an effect when used as a direct child of a layout component, such as IressRow, IressStack or IressInline.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **47** | **52** | **10.1** | **16** | No |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| rows | 
-
-Number of rows in the `textarea` (when set the component renders a textarea element)
-
-undefined
-
-
-
- | \- | Set object |
-| srOnly | 
-
-Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `srOnly: true` Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-ResponsiveProp<boolean> | undefined
-
- | \- | Set object |
-| stretch | 
-
-The **`stretch`** property is used to stretch an element to fill the available space in its parent container. It sets the `height` property to `100%` and `alignSelf` to `stretch`, allowing the element to expand and contract based on the size of its parent.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| textAlign | 
-
-The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"center" | "left" | "right" | "inherit" | "justify"> | undefined
-
- | \- | Set object |
-| textStyle | 
-
-Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
-
-*   `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
-*   `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
-*   `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
-*   `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
-*   `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
-*   `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
-*   `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
-*   `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
-*   `typography.code` - Used to display code snippets in the product, such as in the API documentation.
-
-ResponsiveProp<"typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | ... 10 more ... | "typography.code"> | undefined
-
- | \- | Set object |
-| value | 
-
-The value of the input. Can be a string or a number. Use for controlled inputs.
-
-stringundefined
-
-
-
- | \- | Set object |
-| width | 
-
-The width of the input.
-
-"2""4""6""8""10""12""16""25perc"Show 4 more...
-
-
-
- | \- | Set object |
-
-[](#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.
-
-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.
-
-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: {}
-  }}
-/>
-
-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,
-  },
-  placeholder: 'Search star wars characters, or type "error" to see the error text',
-}}
-    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
-
-#### [](#minimum-search-length-for-async-options)Minimum search length for async options
-
-When using asynchronous options, you can set a minimum number of characters required before triggering the search using the `minSearchLength` prop. This prevents unnecessary API calls and loading states for very short queries.
-
-By default, async searches are triggered after 1 character. Setting a higher value (e.g., 3) means no search request will be made and no loading spinner will appear until the user types at least that many characters.
-
-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,
-  },
-  minSearchLength: 3,
-}}
-    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` is 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\>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\>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: {}
-  }}
-/>
-
-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 gap\="md"\>
-  <IressPanel\>
-    <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
-
-### [](#read-only)Read only
-
-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)
-    *   [Read only](#read-only)
-*   [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)