
### selectedId
- type: string | number
- description: The id of the selected option in the list
### closeOnSelect
- type: boolean
- description: Closes list once list item is selected
- default: true
### selectedHighlight
- type: boolean
- description: Whether the selected option will be highlighted when dropdown reopened.
- default: true
### predicate
- type: (option: DropdownLayoutValueOption) => boolean
- description: Callback predicate for the filtering options function
### emptyStateMessage
- type: ReactNode
- description: Defines a message to be displayed instead of options when no options exist or no options pass the predicate filter function.
### tags
- type: MultiSelectTag[]
- description: Optional list of strings that are selected suggestions.
### maxNumRows
- type: number
- description: Max number of visible lines
### delimiters
- type: string[]
- description: Delimiters that will trigger a Submit action (call to onTagsAdded). By default it is [,] but also enter and tab keys work.
### mode
- type: "select"
- description: Passing 'select' will render a readOnly input with menuArrow suffix
### status
- type: "loading" | "error" | "warning"
- description: The status of the input
### statusMessage
- type: ReactNode
- description: Text to be shown in the status icon tooltip
### onReorder
- type: OnReorderFn
- description: When this callback function is set, tags can be reordered. The expected callback signature is `onReorder({addedIndex: number, removedIndex: number}) => void`
### onSelect
- type: (option: DropdownLayoutValueOption) => void
- description: A callback which is called when the user selects an option from the list. `onSelect(option: Option): void` - Option is the original option from the provided options prop.
### customInput
- type: ReactNode | Function
- description: Render a custom input instead of the default html input tag
### customSuffix
- type: ReactNode
- description: A node to display as input suffix when the dropdown is closed
### customPrefix
- type: ReactNode
- description: A node to display as input prefix when the dropdown is closed
### disabled
- type: boolean
- description: When set to true this component is disabled
### readOnly
- type: boolean
- description: Specifies whether input should be read only
### onRemoveTag
- type: (tagId: string) => void
- description: A callback function to be called when a tag should be removed. The expected callback signature is `onRemoveTag(tagId: number | string) => void.`
### clearOnBlur
- type: boolean
- description: When set to false, the input will not be cleared on blur
- default: true
### acceptOnBlur
- type: boolean
- description: When set to true, the input will be submitted as new tag on blur
### fixedFooter
- type: ReactNode
- description: Adds a fixed footer container at the bottom of options list.
### autocomplete
- type: string
- description: Sets the value of native autocomplete attribute (check the [HTML spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete) for possible values
- default: 'off'
### inputElement
- type: ReactElement
- description: Use a customized input component instead of the default
### onManuallyInput
- type: (values: string[]) => void
- description: A callback which is called when the user performs a Submit-Action.
Submit-Action triggers are: "Enter", "Tab", [typing any defined delimiters], Paste action.
`onManuallyInput(values: Array<string>): void - The array of strings is the result of splitting the input value by the given delimiters
### valueParser
- type: (option: DropdownLayoutValueOption) => ReactNode | RenderOptionFn
- description: Function that receives an option, and should return the value to be displayed.
### dropdownWidth
- type: string
- description: Sets the width of the dropdown
- default: null
### dropdownOffsetLeft
- type: string
- description: Sets the offset of the dropdown from the left
- default: '0'
### customDropdownContent
- type: ReactNode
- description: No description
### showOptionsIfEmptyInput
- type: boolean
- description: Controls whether to show options if input is empty
- default: true
### highlight
- type: boolean
- description: Mark in bold word parts based on search pattern
### native
- type: boolean
- description: Indicates whether to render using the native select element
- default: false
### popoverProps
- type: PopoverCommonProps
- description: common popover props
### onOptionsShow
- type: () => void
- description: A callback which is called when options dropdown is shown
### onOptionsHide
- type: () => void
- description: A callback which is called when options dropdown is hidden
### showDrawerOnMobile
- type: boolean
- description: Controls whether to show drawer on mobile devices
- default: true
### children
- type: ReactNode
- description: Sets the text of the tag
### dataHook
- type: string
- description: Applies a data-hook HTML attribute that can be used in the tests
### className
- type: string
- description: Specifies a CSS class name to be appended to the component's root element.
- internal
### id
- type: string
- description: Assigns a unique identifier for the root element
### role
- type: string
- description: Specifies the role of the input element for accessibility
### ariaControls
- type: string
- description: Associate a control with the regions that it controls
### ariaDescribedby
- type: string
- description: Associate a region with its descriptions. Similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space.
### ariaLabel
- type: string
- description: Define a string that labels the current element in case where a text label is not visible on the screen
### autoFocus
- type: boolean
- description: Focus the element on mount (standard React input autoFocus)
### autoSelect
- type: boolean
- description: Automatically selects the entire input text
### defaultValue
- type: string | number
- description: Defines the initial value of an input
### statusMessageTooltipProps
- type: TooltipCommonProps
- description: Status message tooltip props
### hideStatusSuffix
- type: boolean
- description: Specifies whether status suffix should be hidden
### forceFocus
- type: boolean
- description: USED FOR TESTING - forces focus state on the input
### forceHover
- type: boolean
- description: USED FOR TESTING - forces hover state on the input
### maxLength
- type: number
- description: Sets the maximum number of characters that can be inserted to a field
### menuArrow
- type: boolean
- description: Specifies whether input should have a dropdown menu arrow on the right side
### clearButton
- type: boolean
- description: Displays clear button (X) on a non-empty input
### focusOnClearClick
- type: boolean
- description: Specifies whether to focus the field when clear button is clicked
### name
- type: string
- description: Reference element data when a form is submitted
### border
- type: "none" | "standard" | "round" | "bottomLine"
- description: Control the border style of input
### noLeftBorderRadius
- type: boolean
- description: Specifies whether input shouldn't have rounded corners on its left
### noRightBorderRadius
- type: boolean
- description: Specifies whether input shouldn't have rounded corners on its right
### onBlur
- type: FocusEventHandler
- description: Defines a standard input onBlur callback
### onChange
- type: ChangeEventHandler
- description: Defines a standard input onChange callback
### onClear
- type: (event: KeyboardEvent<HTMLButtonElement> | MouseEvent<HTMLButtonElement, MouseEvent>) => void
- description: Displays clear button (X) on a non-empty input and calls a callback function
### onCompositionChange
- type: (isComposing: boolean) => void
- description: Defines a callback function called on compositionstart/compositionend events
### onEnterPressed
- type: KeyboardEventHandler<HTMLInputElement>
- description: Defines a callback handler that is called when the user presses -enter-
### onEscapePressed
- type: KeyboardEventHandler<HTMLInputElement>
- description: Defines a callback handler that is called when the user presses -escape-
### onFocus
- type: FocusEventHandler
- description: Defines a standard input onFocus callback
### onInputClicked
- type: MouseEventHandler
- description: Defines a standard input onClick callback
### onKeyDown
- type: KeyboardEventHandler<HTMLInputElement>
- description: Defines a standard input onKeyDown callback
### onKeyUp
- type: KeyboardEventHandler<HTMLInputElement>
- description: Defines a standard input onKeyUp callback
### onPaste
- type: ClipboardEventHandler<HTMLInputElement>
- description: Defines a callback handler that is called when user pastes text from a clipboard (using a mouse or keyboard shortcut)
### onCopy
- type: ClipboardEventHandler<HTMLInputElement>
- description: Defines a callback handler that is called when user copies text to a clipboard (using a mouse or keyboard shortcut)
### placeholder
- type: string
- description: Sets a placeholder message to display
### prefix
- type: ReactNode
- description: Pass a component you want to show as the prefix of the input, e.g., text, icon
### disableEditing
- type: boolean
- description: Restricts input editing
### rtl
- type: boolean
- description: Specifies text direction. If true, the text will be displayed from right to left
### size
- type: "tiny" | "small" | "medium" | "large"
- description: Controls the size of the input. Default value: `medium`
### suffix
- type: ReactNode
- description: Pass a component you want to show as the suffix of the input, e.g., text, icon
### tabIndex
- type: number
- description: Indicates that element can be focused and where it participates in sequential keyboard navigation
### textOverflow
- type: "ellipsis" | "clip"
- description: Handles text overflow behavior. It can either `clip` (default) or display `ellipsis`.
### tooltipPlacement
- type: "right" | "left" | "auto" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left-start"
- description: Controls placement of a status tooltip
- deprecated
### type
- type: string
- description: Specifies the type of `<input/>` element to display. Default is text.
### value
- type: string | number
- description: Specifies the current value of the element
### withSelection
- type: boolean
- description: No description
### required
- type: boolean
- description: Specifies whether input is mandatory
### min
- type: number
- description: Sets a minimum value of an input. Similar to HTML5 min attribute.
### max
- type: number
- description: Sets a maximum value of an input. Similar to html5 max attribute.
### step
- type: number
- description: Specifies the interval between number values
### pattern
- type: string
- description: Sets a pattern that typed value must match to be valid (regex)
### inputRef
- type: (input: HTMLInputElement) => void
- description: No description
### inputmode
- type: string
- description: No description
### ariaRoledescription
- type: string
- description: No description
### clearButtonTooltipContent
- type: ReactNode
- description: When provided hover will display a tooltip with content
### clearButtonTooltipProps
- type: TooltipCommonProps
- description: Clear button tooltip props
### clearButtonAriaLabel
- type: string
- description: Aria label for the clear button
### inputElementRef
- type: any
- description: Specifies reference of the input element
- internal
### options
- type: DropdownLayoutOption[]
- description: Array of objects:
- id `<string / number>` *required*: the id of the option, should be unique.
- value `<function / string / node>` *required*: can be a string, react element or a builder function.
- disabled `<bool>` *default value- false*: whether this option is disabled or not
- linkTo `<string>`: when provided the option will be an anchor to the given value
- title `<bool>`  *default value- false*  **deprecated**: please use `listItemSectionBuilder` for rendering a title.
- overrideStyle `<bool>` *default value- false*  **deprecated**: please use `overrideOptionStyle` for override option styles.
- overrideOptionStyle `<bool>` *default value- false* - when set to `true`, the option will be responsible to its own styles. No styles will be applied from the DropdownLayout itself.
- label `<string>`: the string displayed within an input when the option is selected. This is used when using `<DropdownLayout/>` with an `<Input/>`.
### onMouseEnter
- type: MouseEventHandler
- description: Callback function called whenever the user entered with the mouse to the dropdown layout.
### onMouseLeave
- type: MouseEventHandler
- description: Callback function called whenever the user exited with the mouse from the dropdown layout.
### scrollbar
- type: "fixed" | "overlay"
- description: Controls which type of scrollbar to render
### onMouseDown
- type: MouseEventHandler
- description: Callback function called whenever the user clicks the dropdown layout.
### dropDirectionUp
- type: boolean
- description: No description
- deprecated
### focusOnSelectedOption
- type: boolean
- description: Scroll view to the selected option on opening the dropdown
### onClose
- type: () => void
- description: Callback function called whenever the user press the `Escape` keyboard.
### onOptionMarked
- type: (option: DropdownLayoutValueOption | null, optionElementId?: string | undefined) => void
- description: Callback function called whenever an option becomes focused (hovered/active). Receives the relevant option object from the original props.options array.
### onOptionsNavigate
- type: (option: DropdownLayoutValueOption | null) => void
- description: Callback function called whenever the user navigates to an option (via keyboard or mouse). Receives the relevant option object from the original props.options array, or null when navigation is cleared.
### visible
- type: boolean
- description: Should show or hide the component
### onClickOutside
- type: (e: MouseEvent | TouchEvent) => void
- description: Do not use this prop.
- deprecated
### fixedHeader
- type: ReactNode
- description: A fixed header to the list
### maxHeightPixels
- type: string | number
- description: Set the max height of the dropdownLayout in pixels
### minWidthPixels
- type: string | number
- description: Set the min width of the dropdownLayout in pixels
### withArrow
- type: boolean
- description: Do not use this prop.
- deprecated
### itemHeight
- type: "small" | "big"
- description: Do not use this prop.
- deprecated
### inContainer
- type: boolean
- description: Whether the `<DropdownLayout/>` is in a container component. If `true`, some styles such as shadows, positioning and padding will be added the the component contentContainer.
### infiniteScroll
- type: boolean
- description: Set this prop for lazy loading of the dropdown layout items.
### loadMore
- type: (page: number) => void
- description: A callback called when more items are requested to be rendered.
### hasMore
- type: boolean
- description: Whether there are more items to be loaded.
### markedOption
- type: string | number | false | true
- description: Sets the default hover behavior when:
 1. `false` means no default
 2. `true` means to hover the first selectable option
 3. Any number/string represents the id of option to hover
### overflow
- type: "hidden" | "auto" | "visible" | "scroll"
- description: Set overflow of container
### focusOnOption
- type: string | number
- description: Marks (not selects) and scrolls view to the option on opening the dropdown by option id
### scrollToOption
- type: string | number
- description: Scrolls to the specified option when dropdown is opened without marking it
### listType
- type: "select" | "action"
- description: Defines type of behavior applied in list
### listboxId
- type: string
- description: Defines the id for the listbox
### onDrillIn
- type: (option: DropdownLayoutValueOption) => void
- description: Called when the user presses ArrowRight on a hovered option.
 Use to move focus into an interactive child element (e.g. an actions menu).
### onDrillOut
- type: () => void
- description: Called when the user navigates back from a drilled-in child element
 (e.g. via ArrowLeft or Escape). Use to restore focus to the trigger input.

