@wix/design-system

### predicate - type: func - description: Defines a custom function for options filtering ### enableSearch - type: bool - description: Sets whether to enable search in the dropdown ### emptyStateMessage - type: string - description: Defines a message to be displayed instead of options when no options exist or no options pass the predicate filter function. ### getSelectedOptionsText - type: func - description: Defines a callback function to get the text for the selected options ### 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: bool - description: Focus the element on mount (standard React input autoFocus) ### border - type: enum - description: Control the border style of input ### className - type: string - description: Specifies a CSS class name to be appended to the component’s root element. ### clearButton - type: bool - description: Displays clear button (X) on a non-empty input ### clearButtonAriaLabel - type: string - description: Aria label for the clear button ### closeOnSelect - type: bool - description: Closes `DropdownLayout` when option is selected ### dataHook - type: string - description: Applies a data-hook HTML attribute that can be used in the tests ### defaultValue - type: string - description: Sets a default value for those who want to use this component un-controlled ### delimiter - type: string - description: Specifies the delimiter symbol to be displayed between the selected options in the input ### disabled - type: bool - description: Specifies whether input should be disabled or not ### dropdownWidth - type: string - description: Sets the width of the dropdown in pixels ### fixedFooter - type: node - description: Adds a fixed footer container at the bottom of options list in `<DropdownLayout/>` ### fixedHeader - type: node - description: Adds a fixed header container at the top of options list in `<DropdownLayout/>` ### focusOnOption - type: union - description: Highlights and scrolls view to the specified option when dropdown layout is opened. It does not select the specified option. ### focusOnSelectedOption - type: bool - description: Scrolls view to the selected option when dropdown layout is opened ### forceFocus - type: bool - description: USED FOR TESTING - forces focus state on the input ### forceHover - type: bool - description: USED FOR TESTING - forces hover state on the input ### hasMore - type: bool - description: Specifies whether there are more items to be loaded ### hideStatusSuffix - type: bool - description: Specifies whether status suffix should be hidden ### highlight - type: bool - description: Highlight word parts that match search criteria in bold ### id - type: string - description: Assigns an unique identifier for the root element ### infiniteScroll - type: bool - description: Specifies whether lazy loading of the dropdown layout items is enabled ### loadMore - type: func - description: Defines a callback function which is called on a request to render more list items ### markedOption - type: union - description: Sets the default hover behavior: - `false` - no initially hovered list item - `true` - hover first selectable option - any `number/string` specify the id of an option to be hovered ### maxHeightPixels - type: union - description: Sets the maximum height of the `dropdownLayout` in pixels ### maxLength - type: number - description: Sets the maximum number of characters that can be entered into a field ### menuArrow - type: bool - description: Specifies whether input should have a dropdown menu arrow on the right side ### minWidthPixels - type: union - description: Sets the minimum width of `dropdownLayout` in pixels ### name - type: string - description: Reference element data when a form is submitted ### noLeftBorderRadius - type: bool - description: Specifies whether input shouldn’t have rounded corners on its left ### noRightBorderRadius - type: bool - description: Specifies whether input shouldn’t have rounded corners on its right ### onBlur - type: func - description: Defines a standard input `onBlur` callback ### onClear - type: func - description: Displays clear button (X) on a non-empty input and calls a callback function with no arguments ### onClose - type: func - description: Defines a callback function which is called whenever the user presses the escape key ### onCompositionChange - type: func - description: Defines a callback function called on `compositionstart`/`compositionend` events ### onDeselect - type: func - description: Defines a callback function called on option deselect. Function receives the id of the unselected option as the first argument, and the actual option object as the second argument. ### onEnterPressed - type: func - description: Defines a callback handler that is called when user presses -enter- ### onEscapePressed - type: func - description: Defines a callback handler that is called when user presses -escape- ### onFocus - type: func - description: Defines a standard input `onFocus` callback ### onInputClicked - type: func - description: Defines a standard input `onClick` callback. ### onKeyDown - type: func - description: Defines a standard input `onKeyDown` callback ### onKeyUp - type: func - description: Defines a standard input `onKeyUp` callback ### onManuallyInput - type: func - description: Defines a callback function which is called when 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. ### onMouseEnter - type: func - description: Defines a callback function which is called whenever the user enters dropdown layout with the mouse cursor ### onMouseLeave - type: func - description: Defines a callback function which is called whenever the user exits from dropdown layout with a mouse cursor ### onOptionMarked - type: func - description: Defines a callback function which is called whenever an option becomes focused (hovered/active). Receives the relevant option object from the original `props.options` array. ### onOptionsHide - type: func - description: Defines a callback function which is called when options dropdown is hidden ### onOptionsShow - type: func - description: Defines a callback function which is called when options dropdown is shown ### onPaste - type: func - description: Defines a callback handler that is called when user pastes text from a clipboard (using mouse or keyboard shortcut) ### onSelect - type: func - description: Defines a callback function which is called whenever user selects a different option in the list ### options - type: arrayOf - 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/>`. ### overflow - type: string - description: Handles container overflow ### pattern - type: string - description: Sets a pattern that typed value must match to be valid (regex) ### placeholder - type: string - description: Sets a placeholder message to display ### popoverProps - type: shape - description: Allows to pass all common popover props. Check `<Popover/>` API for a full list. ### prefix - type: node - description: Pass a component you want to show as the prefix of the input, e.g., text string, icon ### readOnly - type: bool - description: Specifies whether input is read only ### required - type: bool - description: Specifies whether input is mandatory ### selectedId - type: union - description: Specifies selected option by its id ### selectedOptions - type: array - description: Specifies an array of selected options ids ### showOptionsIfEmptyInput - type: bool - description: Controls whether to show options if input is empty ### size - type: enum - description: Controls the size of the input ### status - type: enum - description: Specify the status of a field ### statusMessage - type: node - description: Defines the message to display on status icon hover. If not given or empty there will be no tooltip. ### suffix - type: node - description: Pass a component you want to show as the suffix of the input, e.g., text string, icon ### tabIndex - type: number - description: Indicates that element can be focused and where it participates in sequential keyboard navigation ### textOverflow - type: string - description: Handles text overflow behavior. It can either `clip` (default) or display `ellipsis`. ### tooltipPlacement - type: string - description: Controls placement of a status tooltip ### type - type: string - description: Specifies the type of `<input>` element to display. Default type is text. ### value - type: union - description: Specifies the current value of the element ### valueParser - type: func - description: No description ### disableEditing - type: bool - description: Specifies if the input can be edited ### clearOnBlur - type: any - description: No description