@wix/design-system

### className - type: string - description: Specifies a CSS class name to be appended to the component’s root element. - internal ### 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: The location to display the content ### shown - type: boolean - description: Is the content shown or not ### onClick - type: MouseEventHandler - description: onClick on the component ### onClickOutside - type: (event: Event) => void - description: Provides callback to invoke when clicked outside of the popover ### onTabOut - type: (event: KeyboardEvent) => void - description: Provides callback to invoke when popover loses focus ### onEscPress - type: KeyboardEventHandler<HTMLDivElement> - description: Provides callback to invoke when popover loses focus ### excludeClass - type: string - description: Clicking on elements with this excluded class will will not trigger onClickOutside callback ### onMouseEnter - type: MouseEventHandler - description: onMouseEnter on the component ### onMouseLeave - type: MouseEventHandler - description: onMouseLeave on the component ### onKeyDown - type: KeyboardEventHandler<HTMLDivElement> - description: onKeyDown on the target component ### showArrow - type: boolean - description: Show show arrow from the content ### flip - type: boolean - description: Whether to enable the flip behaviour. This behaviour is used to flip the `<Popover/>`'s placement when it starts to overlap the target element (`<Popover.Element/>`). ### flipModifier - type: ModifierFn - description: Custom modifier function for the flip behavior. Receives Popper.js data object and should return the modified data. Use this to implement custom flip logic (e.g., flipping variations on the same side). ### fixed - type: boolean - description: Whether to enable the fixed behaviour. This behaviour is used to keep the `<Popover/>` at it's original placement even when it's being positioned outside the boundary. ### moveBy - type: Partial<{ x: number; y: number; }> - description: Moves popover relative to the parent ### hideDelay - type: number - description: Hide Delay in ms ### showDelay - type: number - description: Show Delay in ms ### moveArrowTo - type: number - description: Moves arrow by amount ### appendTo - type: null | Element | "window" | "viewport" | "scrollParent" | "parent" | Predicate - description: Enables calculations in relation to a dom element ### timeout - type: number | { enter: number; exit: number; } - description: Animation timer ### style - type: object - description: Inline style ### id - type: string - description: Id ### fluid - type: boolean - description: No description ### customArrow - type: (placement: Placement, arrowProps: object) => ReactNode - description: Custom arrow element ### role - type: string - description: target element role value ### zIndex - type: string & {} | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | number & {} - description: popover z-index ### dynamicWidth - type: boolean - description: popovers content is set to minimum width of trigger element, but it can expand up to the value of maxWidth. ### minWidth - type: string | number - description: popover content minWidth value - `number` value which converts to css with `px` - `string` value that contains `px` ### maxWidth - type: string | number - description: popover content maxWidth value - `number` value which converts to css with `px` - `string` value that contains `px` ### width - type: string | number - description: popover content width value - `number` value which converts to css with `px` - `string` value that contains `px` ### disableClickOutsideWhenClosed - type: boolean - description: Breaking change: When true - onClickOutside will be called only when popover content is shown - default: true ### dataHook - type: string - description: Hook for testing purposes. ### tabIndex - type: number - description: tabindex for popover content element ### aria-label - type: string - description: No description ### aria-labelledby - type: string - description: No description ### aria-describedby - type: string - description: No description ### animate - type: boolean - description: Whether to animate the popover content when it is shown or hidden. ### skin - type: "light" | "dark" - description: Components skin value. Can be dark or light. ### theme - type: "light" | "dark" - description: use skin instead - deprecated ### onShow - type: () => void - description: Callback to invoke when popover is shown ### onHide - type: () => void - description: Callback to invoke when popover is hidden ### children - type: ReactNode - description: No description ### interactive - type: boolean - description: Enables hovering the popover content. - default: true ### overlay - type: ReactNode - description: Enables overlay for content. ### autoUpdateOptions - type: { animationFrame?: boolean | undefined; } - description: Options controlling how the popover keeps its position in sync with the trigger element while it is shown.