@wix/design-system
Version:
@wix/design-system
117 lines (111 loc) • 4.32 kB
Markdown
### 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).