@wix/design-system

### open - type: boolean - description: Control whether the <Popover/> should be opened ### onShow - type: () => void - description: Defines a callback function which is called when dropdown is opened ### onHide - type: () => void - description: Defines a callback function which is called when dropdown is closed ### className - type: string - description: Specifies a CSS class name to be appended to the component’s root element. - internal ### popoverContentClassName - type: string - description: Specifies a CSS class name to be appended to the popover's content. - internal ### dataHook - type: string - description: Applies a data-hook HTML attribute that can be used in the tests ### placement - 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: Control popover placement - default: 'bottom' ### appendTo - type: null | Element | Predicate | "window" | "viewport" | "scrollParent" | "parent" - description: Specifies where popover should be inserted as a last child - whether `parent` or `window` containers - default: 'parent' ### showArrow - type: boolean - description: Specifies whether popover arrow should be shown - default: false ### onClickOutside - type: () => void - description: Defines a callback function which is called when user clicks outside of a dropdown ### onMouseEnter - type: () => void - description: Defines a callback function which is called on `onMouseEnter` event on the entire component ### onMouseLeave - type: () => void - description: Defines a callback function which is called on `onMouseLeave` event on the entire component ### onMouseDown - type: MouseEventHandler - description: Callback function called whenever the user clicks the dropdown layout. ### onSelect - type: (option: DropdownLayoutValueOption) => void - description: Defines a callback function which is called whenever user selects a different option in the list ### dynamicWidth - type: boolean - description: Set popover's content width to a minimum width of a trigger element, but it can expand up to the defined value of `maxWidth` - default: true ### maxWidth - type: string | number | string & {} - description: Controls the maximum width of dropdown layout ### minWidth - type: string | number | string & {} - description: Controls the minimum width of dropdown layout - default: 192 ### width - type: string | number | string & {} - description: Controls the width of dropdown layout - internal ### maxHeight - type: string | number - description: Controls the maximum height of dropdown layout - default: '260px' ### children - type: null | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | ChildrenFnArgs<any> - description: Specifies a target component to be rendered. If a regular node is passed, it'll be rendered as-is. If a function is passed, it's expected to return a React element. The function accepts an object containing the following properties: * `open` - will open the Popover * `close` - will close the Popover * `toggle` - will toggle the Popover * `isOpen` - indicates whether the items list is currently open * `delegateKeyDown` - the underlying DropdownLayout's keydown handler. It can be called inside another keyDown event in order to delegate it. * `selectedOption` - the currently selected option Check inserted component documentation for more information on available properties. ### options - type: DropdownLayoutOption[] - description: Specifies an array of options for a dropdown list. Objects must have an id and can include string value or node. If value is '-', a divider will be rendered instead (dividers do not require and id). ### selectedId - type: string | number - description: Define the selected option in the list ### overflow - type: "hidden" | "auto" | "visible" | "scroll" - description: Handles container overflow behaviour ### tabIndex - type: number - description: Indicates that element can be focused and where it participates in sequential keyboard navigation ### initialSelectedId - type: string | number - description: Sets the initially selected option in the list. Used when selection behaviour is being controlled. ### zIndex - type: number - description: Specifies the stack order (`z-index`) of a dropdown layout ### moveBy - type: MoveByOffset - description: Moves dropdown content relative to the parent on X or Y axis by a defined amount of pixels ### flip - type: boolean - description: Specifies whether to flip the <Popover/> placement when it starts to overlap the target element (<Popover.Element/>) ### fixed - type: boolean - description: Specifies whether to enable the fixed behaviour. If enabled, <Popover/> keep its original placement even when it's being positioned outside the boundary. ### fluid - type: boolean - description: Stretches trigger element to fill its parent container width - default: false ### animate - type: boolean - description: Adds enter and exit animation - default: false ### focusOnSelectedOption - type: boolean - description: Focus to the selected option when dropdown is opened ### infiniteScroll - type: boolean - description: Specifies whether lazy loading of the dropdown items is enabled ### loadMore - type: (page: number) => void - description: Defines a callback function which is called on a request to render more list items ### hasMore - type: boolean - description: Specifies whether there are more items to load ### focusOnOption - type: string | number - description: Focus to the specified option when dropdown is opened ### scrollToOption - type: string | number - description: Scrolls to the specified option when dropdown is opened without marking it ### fixedHeader - type: ReactNode - description: A fixed header to the list ### fixedFooter - type: ReactNode - description: A fixed footer to the list ### listType - type: "select" | "action" - description: Defines type of behavior applied in list - default: 'select' ### autoFocus - type: boolean - description: Specifies whether first list item should be focused ### markedOption - type: string | number | false | true - description: Sets the initial marking of an option in the list when opened: - `false` - no initially hovered list item - `true` - hover first selectable option - any `number/string` specify the id of an option to be hovered