UNPKG

@wix/design-system

Version:

@wix/design-system

117 lines (111 loc) 4.32 kB
### triggerElement - type: ReactNode | FC<PopoverTriggerElementProps> - description: Defines a component that calls out a Popover menu (`<IconButton />`, `<Button />` or `<Text Button />`) ### children - type: ReactNode - description: Stores Popover menu compound components: - <PopoverMenu.MenuItem /> - <PopoverMenu.Divider /> (optional) - <PopoverMenu.SectionTitle /> (optional) `<PopoverMenu.MenuItem>` component has these fields: * `text` - Sets a label for a Popover menu item * `onClick` - Defines a callback function which is called when a Popover menu item is clicked on * `skin` - Controls the appearance of a Popover menu item (one of `standard`, `dark`, `destructive`) * `prefixIcon` - Contains an icon at the start of a Popover menu item * `dataHook` - Applies a data-hook HTML attribute to be used in the tests * `suffixIcon` - suffix icon property * `disabled` - Disables a Popover menu item * `subtitle` - Sets a text for a Popover menu item subtitle\ `<PopoverMenu.Divider>` component has these fields: * `dataHook` - Applies a data-hook HTML attribute to be used in the tests `<PopoverMenu.SectionTitle>` component has these fields: * `dataHook` - Applies a data-hook HTML attribute to be used in the tests * `title` - Acts as a title for following list items. ### maxWidth - type: string | number | string & {} - description: Sets a maximum width for a Popover menu - default: 204 ### minWidth - type: string | number | string & {} - description: Sets a minimum width for a Popover menu - default: 144 ### maxHeight - type: string | number - description: Sets a maximum height for a Popover menu - default: 'auto' ### zIndex - type: number - description: Sets the Popover z-index ### moveBy - type: MoveByOffset - description: Moves Popover menu overlay relative to its trigger element by a defined number of px: - horizontally (on X-axis) - or vertically (on Y-axis) ### 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: Defines the Popover menu’s overlay placement in relation to its trigger element: * auto-start * auto * auto-end * top-start * top * top-end * right-start * right * right-end * bottom-start * bottom * bottom-end * left-start * left * left-end - default: 'bottom' ### textSize - type: "small" | "medium" - description: Sets the size of text in Popover menu items - default: 'medium' ### ellipsis - type: boolean - description: Truncates menu item text that overflows component’s max Width - default: false ### fluid - type: boolean - description: Allows truncating the trigger element to a specified parent container width. - default: false ### appendTo - type: null | Element | "window" | "viewport" | "scrollParent" | "parent" | Predicate - description: Enables calculations in relation to a DOM element - default: 'window' ### flip - type: boolean - description: Enables the flip behaviour. This behaviour is used to flip the overlay placement when it starts to overlap the trigger element. - default: true ### fixed - type: boolean - description: Enables the fixed behaviour. This behaviour is used to keep the overlay at its original placement even when it is being positioned outside the boundary. - default: true ### showArrow - type: boolean - description: Controls visibility of the pointer arrow - default: true ### dataHook - type: string - description: Applies a data-hook HTML attribute to be used in the tests ### className - type: string - description: Specifies a CSS class name to be appended to the component’s root element. - internal ### onHide - type: () => void - description: Defines a callback function which is called when a Popover menu is closed ### onShow - type: () => void - description: Defines a callback function which is called when a Popover menu is opened ### fixedFooter - type: ReactNode - description: A fixed footer to the list ### ref - type: null | string | (instance: PopoverMenuRefHandle | null) => void | RefObject<PopoverMenuRefHandle> - 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).