@wix/design-system

### size - type: "small" | "medium" - description: Controls the size of internally rendered ListItemSelect or ListItemAction components - default: 'medium' ### 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 ### 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/>`. ### 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. ### tabIndex - type: number - description: Specifies the tab order of the component. ### autoFocus - type: boolean - description: Specifies whether first list item should be focused ### 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 ### selectedId - type: string | number - description: The id of the selected option in the list ### onClickOutside - type: (e: MouseEvent | TouchEvent) => void - description: Do not use this prop. - deprecated ### 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: Do not use this prop. - deprecated ### closeOnSelect - type: boolean - description: Closes DropdownLayout on option selection - default: true ### itemHeight - type: "small" | "big" - description: Do not use this prop. - deprecated ### selectedHighlight - type: boolean - description: Whether the selected option will be highlighted when dropdown reopened. - default: true ### 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. ### overlayScrollbarProps - type: { OverlayScrollbarHostElement: OverlayScrollbarHost; OverlayScrollbarContentElement: OverlayScrollbarContent; } - description: No description ### ref - type: null | string | (instance: DropdownLayout | null) => void | RefObject<DropdownLayout> - description: Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).