@wix/design-system

### inputElement - type: element - description: Use a customized input component instead of the default @wix/design-system `<Input/>` component ### closeOnSelect - type: boolean - description: Closes DropdownLayout on option selection ### customDropdown - type: node - description: Node which is displayed in dropdown ### onManuallyInput - type: func - 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 ### onOptionsShow - type: func - description: A callback which is called when options dropdown is shown ### onOptionsHide - type: func - description: A callback which is called when options dropdown is hidden ### valueParser - type: func - description: Function that receives an option, and should return the value to be displayed. ### dropdownWidth - type: string - description: Sets the width of the dropdown ### dropdownOffsetLeft - type: string - description: Sets the offset of the dropdown from the left ### showOptionsIfEmptyInput - type: bool - description: Controls whether to show options if input is empty ### highlight - type: bool - description: Mark in bold word parts based on search pattern ### native - type: bool - description: Indicates whether to render using the native select element ### popoverProps - type: shape - description: common popover props ### onSelect - type: (option: DropdownLayoutValueOption, sameOptionWasPicked: boolean) => void - description: Callback function called whenever the user selects a different option in the list ### 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/>`. ### 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 ### 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. ### dropDirectionUp - type: boolean - description: No description ### 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, optionElementId?: string) => 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) => 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 ### selectedId - type: string | number - description: The id of the selected option in the list ### tabIndex - type: number - description: Indicates that element can be focused and where it participates in sequential keyboard navigation ### onClickOutside - type: (e: TouchEvent | MouseEvent) => void - description: No description ### fixedHeader - type: ReactNode - description: A fixed header to the list ### fixedFooter - type: ReactNode - description: A fixed footer 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: No description ### onMouseEnter - type: MouseEventHandler<HTMLElement> - description: Callback function called whenever the user entered with the mouse to the dropdown layout. ### onMouseLeave - type: MouseEventHandler<HTMLElement> - description: Callback function called whenever the user exited with the mouse from the dropdown layout. ### onMouseDown - type: MouseEventHandler<HTMLElement> - description: Callback function called whenever the user clicks the dropdown layout. ### itemHeight - type: DropdownLayoutItemHeight - description: No description ### size - type: InputSize - description: Controls the size of the input. Default value: `medium` ### selectedHighlight - type: boolean - description: Whether the selected option will be highlighted when dropdown reopened. ### 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 | boolean - 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: Overflow - 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: ListType - description: Defines type of behavior applied in list ### autoFocus - type: boolean - description: Focus the element on mount (standard React input autoFocus) ### scrollbar - type: "overlay" | "fixed" - description: Controls which type of scrollbar to render ### listboxId - type: string - description: Defines the id for the listbox ### overlayScrollbarProps - type: { OverlayScrollbarHostElement: React.FunctionComponent<any>; OverlayScrollbarContentElement: React.ForwardRefExoticComponent<any>; } - description: No description ### RefAttributes - type: All props from RefAttributes that comes from @types/react/index.d.ts - description: No description ### 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 ### autoSelect - type: boolean - description: Automatically selects the entire input text ### defaultValue - type: InputValue - description: Defines the initial value of an input ### disabled - type: boolean - description: Specifies whether input should be disabled or not ### status - type: InputStatus - description: Specify the status of a field ### statusMessage - type: ReactNode - description: Defines the message to display on status icon hover. If not given or empty there will be no tooltip. ### 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: "standard" | "round" | "bottomLine" | "none" - 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<HTMLInputElement> - description: Defines a standard input onBlur callback ### onChange - type: ChangeEventHandler<HTMLInputElement> - description: Defines a standard input onChange callback ### onClear - type: (event: MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent<HTMLButtonElement>) => 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<HTMLInputElement> - description: Defines a standard input onFocus callback ### onInputClicked - type: MouseEventHandler<HTMLInputElement | HTMLDivElement> - 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 ### readOnly - type: boolean - description: Specifies whether input is read only ### disableEditing - type: boolean - description: Restricts input editing ### rtl - type: boolean - description: No description ### suffix - type: ReactNode - description: Pass a component you want to show as the suffix of the input, e.g., text, icon ### textOverflow - type: "clip" | "ellipsis" - description: Handles text overflow behavior. It can either `clip` (default) or display `ellipsis`. ### tooltipPlacement - type: Placement - description: Controls placement of a status tooltip ### 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 ### customInput - type: Function | ReactNode - description: Render a custom input instead of the default html input tag ### 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 ### Attributes - type: All props from Attributes that comes from @types/react/index.d.ts - description: No description