diginet-core-ui 1.4.39 → 1.4.40

package/src/components/popover/index.js

@@ -0,0 +1,718 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import OptionWrapper from 'components/others/option-wrapper';
+import PropTypes from 'prop-types';
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import {
+    bgColor,
+    borderBottom,
+    borderRadius4px,
+    displayFlex,
+    displayNone,
+    flexCol,
+    inset,
+    justifyBetween,
+    overflowAuto,
+    parseMaxWidthHeight,
+    parseMinWidthHeight,
+    parseWidthHeight,
+    pointerEventsInitial,
+    pointerEventsNone,
+    positionAbsolute,
+    positionFixed,
+    positionRelative,
+    shadowLarge,
+} from 'styles/general';
+import { makeStyles, useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp, isMobile, refType as ref } from 'utils';
+
+const eventMap = new Map([
+    ['click', ['click']],
+    ['hover', ['mouseenter', 'mouseleave']],
+    ['focus', ['focus', 'blur']],
+]);
+
+const getArrowPosition = (anchorOrigin, transformOrigin, translate) => {
+    if (anchorOrigin.horizontal === 'right' && transformOrigin.horizontal === 'left') {
+        translate.left = -6;
+        translate.transform = 'rotateZ(270deg)';
+        return 'left';
+    } else if (anchorOrigin.horizontal === 'left' && transformOrigin.horizontal === 'right') {
+        translate.left = 6;
+        translate.transform = 'rotateZ(90deg)';
+        return 'right';
+    } else if (transformOrigin.vertical === 'bottom') {
+        translate.top = 6;
+        // translate.transform = 'rotateZ(180deg)';
+        return 'bottom';
+    } else {
+        translate.top = -6;
+        return 'top';
+    }
+};
+
+const calPosition = (position, originBounding) => {
+    const { width, height } = originBounding;
+    switch (position) {
+        case 'bottom':
+        case 'right': {
+            return [height, width];
+        }
+        case 'center': {
+            return [height / 2, width / 2];
+        }
+        default:
+            return [0, 0];
+    }
+};
+
+const getDirectionPopover = direction => {
+    switch (direction) {
+        case 'center':
+            return {
+                anchorOrigin: { vertical: 'center', horizontal: 'center' },
+                transformOrigin: { vertical: 'center', horizontal: 'center' },
+            };
+        case 'top':
+            return {
+                anchorOrigin: { vertical: 'top', horizontal: 'center' },
+                transformOrigin: { vertical: 'bottom', horizontal: 'center' },
+            };
+        case 'left':
+            return {
+                anchorOrigin: { vertical: 'center', horizontal: 'left' },
+                transformOrigin: { vertical: 'center', horizontal: 'right' },
+            };
+        case 'right':
+            return {
+                anchorOrigin: { vertical: 'center', horizontal: 'right' },
+                transformOrigin: { vertical: 'center', horizontal: 'left' },
+            };
+        default:
+            return {
+                anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
+                transformOrigin: { vertical: 'top', horizontal: 'center' },
+            };
+    }
+};
+
+const Popover = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+        const { colors, spacing, zIndex: zIndexTheme } = theme;
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'Popover' });
+        const {
+            action = {},
+            anchor: anchorProp,
+            anchorOrigin: anchorOriginProp,
+            arrow,
+            bgColor: bgColorProp,
+            children,
+            className,
+            clickOutsideToClose,
+            direction,
+            fullScreen,
+            height,
+            marginThreshold = spacing(4),
+            onClose,
+            onOpen,
+            open,
+            pressESCToClose,
+            style,
+            transformOrigin: transformOriginProp,
+            trigger: triggerProp,
+            width,
+            zIndex = zIndexTheme(1),
+        } = props;
+
+        let anchor = anchorProp;
+        let anchorOrigin = anchorOriginProp;
+        let transformOrigin = transformOriginProp;
+        let trigger = triggerProp;
+        if (isMobile.any() && triggerProp === 'hover') trigger = 'click';
+
+        const ref = useRef(null);
+        const arrowRef = useRef(null);
+        // const overflow = useRef(null);
+        const anchorRef = useRef(anchor);
+
+        const [openState, setOpenState] = useState(open);
+        const [element, setElement] = useState(null);
+
+        const arrowSize = arrow ? 6 : 0;
+
+        const bgColor = getProp(colors, bgColorProp, bgColorProp);
+
+        const useStyles = makeStyles({
+            noScroll: {
+                key: props => `DGN-Popover-${props}`,
+                overflow: 'hidden',
+                paddingRight: `${
+                    Math.abs(window.innerWidth - document.documentElement.clientWidth) + // scrollbar width
+                    parseInt(getComputedStyle(document.body).getPropertyValue('padding-right')) // body padding-right
+                }px`,
+            },
+        });
+
+        const _PortalPopoverCSS = PortalPopoverCSS(zIndex, fullScreen);
+        const _PopoverContainerCSS = PopoverContainerCSS(bgColor, width, height, theme);
+        const _PopoverArrowCSS = PopoverArrowCSS(bgColor, arrowSize);
+
+        if (direction) {
+            const directionObject = getDirectionPopover(direction);
+            anchorOrigin = directionObject.anchorOrigin;
+            transformOrigin = directionObject.transformOrigin;
+        }
+
+        const onOpenPopover = () => {
+            if (!openState) setOpenState(true);
+            onOpen && onOpen();
+        };
+
+        const onClosePopover = (event, reason) => {
+            if (openState) {
+                if (ref.current) ref.current.style.opacity = 0;
+                onClose && onClose(event, reason);
+                setOpenState(false);
+            }
+        };
+
+        const pressESCHandler = event => {
+            if (event.key === 'Escape') {
+                onClosePopover(event, `key${event.key}`);
+            }
+        };
+
+        const onClickOutside = event => {
+            if (!ref.current) {
+                document.removeEventListener('click', onClickOutside);
+                return;
+            }
+            const _anchor = anchor?.element || anchor?.current?.element || anchor?.current || anchor;
+            if (
+                clickOutsideToClose &&
+                !ref.current?.contains(event?.toElement || event?.target) &&
+                (!fullScreen || ref.current?.parentNode?.contains(event?.target)) &&
+                !_anchor?.contains(event?.toElement || event?.target) &&
+                openState
+            ) {
+                onClosePopover(event, 'clickOutside');
+            }
+        };
+
+        const updatePositionPopover = (el = null, cb) => {
+            if (el instanceof Element) setElement(el);
+            if (!ref.current) {
+                window.removeEventListener('resize', updatePositionPopover);
+                return;
+            }
+            let top = 0,
+                left = 0,
+                vertical = 0,
+                verticalCenter = 0,
+                horizontal = 0,
+                horizontalCenter = 0,
+                arrowPosition = { display: 'block' },
+                translate = { left: 0, top: 0 },
+                anchorRect = null,
+                aPosition = '',
+                newDirectionObject = null;
+
+            if (transformOrigin === 'center') {
+                transformOrigin = {
+                    vertical: 'center',
+                    horizontal: 'center',
+                };
+            }
+            if (element || anchor) {
+                if (element) anchor = element;
+                else if (anchor && !(anchor instanceof Element)) {
+                    anchor = anchor?.element || anchor.current?.element || anchor.current;
+                }
+                if (!document.body.contains(anchor)) return;
+                if (
+                    arrow &&
+                    anchorOrigin.vertical !== anchorOrigin.horizontal &&
+                    transformOrigin.vertical !== transformOrigin.horizontal
+                ) {
+                    aPosition = getArrowPosition(anchorOrigin, transformOrigin, translate);
+                }
+                anchorRect = anchor.getBoundingClientRect();
+                vertical = anchorRect.y + calPosition(anchorOrigin.vertical, anchorRect)[0] - translate.top;
+                verticalCenter = anchorRect.y + calPosition('center', anchorRect)[0];
+                horizontal = anchorRect.x + calPosition(anchorOrigin.horizontal, anchorRect)[1] - translate.left;
+                horizontalCenter = anchorRect.x + calPosition('center', anchorRect)[1];
+            }
+
+            // Calculate element positioning
+            const containerWindow = { width: window?.innerWidth || 0, height: window?.innerHeight || 0 };
+            const popoverHeight = ref.current.offsetHeight;
+            const popoverWidth = ref.current.offsetWidth;
+            switch (transformOrigin.vertical) {
+                case 'center':
+                    top = vertical - popoverHeight / 2;
+                    break;
+                case 'bottom':
+                    top = vertical - popoverHeight;
+                    break;
+                default:
+                    top = vertical;
+                    break;
+            }
+            switch (transformOrigin.horizontal) {
+                case 'center':
+                    left = horizontal - popoverWidth / 2;
+                    break;
+                case 'right':
+                    left = horizontal - popoverWidth;
+                    break;
+                default:
+                    left = horizontal;
+                    break;
+            }
+
+            // Variables for check if needs shifting
+            const heightThreshold = containerWindow.height - marginThreshold;
+            const widthThreshold = containerWindow.width - marginThreshold;
+
+            const bottomOfAnchor = top + anchor?.offsetHeight;
+            const topPos = anchorRect?.bottom + arrowSize;
+            const verticalCenterPos = verticalCenter - popoverHeight / 2;
+            const bottomPos = anchorRect?.top - (popoverHeight + arrowSize);
+
+            const rightOfAnchor = left + anchor?.offsetWidth;
+            const leftPos = anchorRect?.right + arrowSize;
+            const horizontalCenterPos = horizontalCenter - popoverWidth / 2;
+            const rightPos = anchorRect?.left - (popoverWidth + arrowSize);
+
+            // Check if the vertical axis needs shifting
+            if (top < marginThreshold) {
+                if (topPos > heightThreshold) {
+                    top = verticalCenterPos;
+                    newDirectionObject = getDirectionPopover('center');
+                    aPosition = '';
+                } else if (top < 0 || transformOrigin.vertical === 'bottom') {
+                    top = topPos;
+                    newDirectionObject = getDirectionPopover('bottom');
+                    aPosition = getArrowPosition(
+                        newDirectionObject.anchorOrigin,
+                        newDirectionObject.transformOrigin,
+                        translate
+                    );
+                }
+            } else if (top + popoverHeight > containerWindow.height) {
+                if (bottomPos < bottomOfAnchor && bottomPos < marginThreshold) {
+                    top = verticalCenterPos;
+                    newDirectionObject = getDirectionPopover('center');
+                    aPosition = '';
+                } else {
+                    top = bottomPos;
+                    newDirectionObject = getDirectionPopover('top');
+                    aPosition = getArrowPosition(
+                        newDirectionObject.anchorOrigin,
+                        newDirectionObject.transformOrigin,
+                        translate
+                    );
+                }
+            }
+
+            // Check if the horizontal axis needs shifting
+            if (left < marginThreshold) {
+                if (leftPos > widthThreshold) {
+                    left = horizontalCenterPos;
+                    newDirectionObject = getDirectionPopover('center');
+                    aPosition = '';
+                } else if (leftPos < 0 || transformOrigin.horizontal === 'right') {
+                    left = leftPos;
+                    newDirectionObject = getDirectionPopover('right');
+                    aPosition = getArrowPosition(
+                        newDirectionObject.anchorOrigin,
+                        newDirectionObject.transformOrigin,
+                        translate
+                    );
+                }
+            } else if (left + popoverWidth > containerWindow.width) {
+                if (rightPos < rightOfAnchor && rightPos < marginThreshold) {
+                    left = horizontalCenterPos;
+                    newDirectionObject = getDirectionPopover('center');
+                    aPosition = '';
+                } else {
+                    left = rightPos;
+                    newDirectionObject = getDirectionPopover('left');
+                    aPosition = getArrowPosition(
+                        newDirectionObject.anchorOrigin,
+                        newDirectionObject.transformOrigin,
+                        translate
+                    );
+                }
+            }
+
+            // Valid mean popover not at top-left, top-right, bottom-left, bottom-right
+            const validVerticalArrow =
+                left >= anchorRect?.left + anchorRect?.width / 2 - popoverWidth &&
+                left <= anchorRect?.right - anchorRect?.width / 2 + popoverWidth;
+            const validHorizontalArrow =
+                top >= anchorRect?.top + anchorRect?.height / 2 - popoverHeight &&
+                top <= anchorRect?.bottom - anchorRect?.height / 2;
+
+            // Get arrow's position
+            if (arrow && translate) {
+                switch (aPosition) {
+                    case 'top':
+                        if (validVerticalArrow) {
+                            arrowPosition.left = anchorRect?.width / 2 + anchorRect?.left - arrowSize + 'px';
+                            arrowPosition.top = Math.round(top) - arrowSize + 'px';
+                        }
+                        break;
+                    case 'bottom':
+                        if (validVerticalArrow) {
+                            arrowPosition.left = anchorRect?.width / 2 + anchorRect?.left - arrowSize + 'px';
+                            arrowPosition.top = Math.round(top) + popoverHeight + 'px';
+                        }
+                        break;
+                    case 'left':
+                        if (validHorizontalArrow) {
+                            arrowPosition.top = anchorRect?.height / 2 + anchorRect?.top - arrowSize / 2 + 'px';
+                            arrowPosition.left = Math.round(left) - 1.5 * arrowSize + 'px';
+                        }
+                        break;
+                    case 'right':
+                        if (validHorizontalArrow) {
+                            arrowPosition.top = anchorRect?.height / 2 + anchorRect?.top - arrowSize / 2 + 'px';
+                            arrowPosition.left = Math.round(left) + popoverWidth - arrowSize / 2 + 'px';
+                        }
+                        break;
+                    default:
+                        break;
+                }
+
+                if (arrowRef.current) {
+                    Object.assign(arrowRef.current.style, arrowPosition, {
+                        transform: translate.transform,
+                        display: newDirectionObject === 'center' || !arrowPosition?.top ? 'none' : 'block',
+                    });
+                }
+            }
+
+            if (top < marginThreshold) top = marginThreshold;
+            if (left < marginThreshold) left = marginThreshold;
+            const isVerticalOverFlow = left + popoverWidth > containerWindow.width;
+            ref.current.style.maxHeight = `calc(100% - ${spacing(8) + top}px)`;
+            ref.current.style.top = `${Math.round(top)}px`;
+            if (isVerticalOverFlow) {
+                ref.current.style.left = 0;
+                ref.current.style.margin = 'auto';
+            } else ref.current.style.left = `${Math.round(left)}px`;
+            ref.current.style.transformOrigin = `${
+                newDirectionObject?.transformOrigin?.horizontal || transformOrigin?.horizontal || 'left'
+            } ${newDirectionObject?.transformOrigin?.vertical || transformOrigin?.vertical || 'top'}`;
+            ref.current.style.opacity = 1;
+            cb?.();
+        };
+
+        const handleEventTrigger = e => {
+            if (!openState) {
+                onOpenPopover();
+            } else {
+                onClickOutside(e);
+            }
+        };
+
+        useEffect(() => {
+            return () => {
+                if (pressESCToClose) {
+                    document.removeEventListener('keydown', pressESCHandler);
+                }
+                document.removeEventListener('click', onClickOutside);
+                window.removeEventListener('resize', updatePositionPopover);
+            };
+        }, []);
+
+        useEffect(() => {
+            anchorRef.current = anchor;
+        }, [anchor]);
+
+        useEffect(() => {
+            const anchorEl = anchor?.element || anchor?.current || anchor;
+            if (anchorEl?.disabled || anchorRef.current?.props?.disabled) return;
+            const eventArr = eventMap.get(trigger) || [];
+            if (anchorEl && open === undefined && eventArr?.length > 0) {
+                eventArr.forEach(evt => anchorEl.addEventListener(evt, handleEventTrigger, false));
+                return () => {
+                    eventArr.forEach(evt => anchorEl.removeEventListener(evt, handleEventTrigger, false));
+                };
+            }
+        }, [anchor, trigger, openState]);
+
+        useEffect(() => {
+            if (open !== undefined) setOpenState(open);
+        }, [open]);
+
+        useEffect(() => {
+            if (openState && ref.current) {
+                // if (document.body.style.overflow !== 'hidden') {
+                //     overflow.current = document.body.style.overflow; // store overflow of <body /> before open
+                //     document.body.style.overflow = 'hidden';
+                // }
+                const timestamp = Date.now();
+                const classes = useStyles(timestamp);
+                const noScrollClass = classes.noScroll.split(' ');
+                document.body.classList.add(...noScrollClass);
+                // Position's anchor
+                updatePositionPopover();
+
+                // Allow press ESC to close popup
+                if (pressESCToClose) {
+                    document.addEventListener('keydown', pressESCHandler);
+                }
+                // Click out popover to close popover
+                document.addEventListener('click', onClickOutside);
+
+                // Update position popover on resize
+                window.addEventListener('resize', updatePositionPopover);
+
+                if (trigger === 'hover') ref.current.addEventListener('mouseleave', handleEventTrigger, false);
+
+                return () => {
+                    document.body.classList.remove(...noScrollClass);
+                    // document.body.style.overflow = overflow.current; // reset overflow of <body /> before open
+                    if (pressESCToClose) {
+                        document.removeEventListener('keydown', pressESCHandler);
+                    }
+                    document.removeEventListener('click', onClickOutside);
+                    window.removeEventListener('resize', updatePositionPopover);
+                    if (trigger === 'hover' && ref.current)
+                        ref.current.removeEventListener('mouseleave', handleEventTrigger, false);
+                };
+            }
+            // else if (!openState) {
+            //     document.documentElement.style.overflow = overflow.current;
+            // }
+        }, [openState]);
+
+        useEffect(() => {
+            clickOutsideToClose
+                ? document.addEventListener('click', onClickOutside)
+                : document.removeEventListener('click', onClickOutside);
+        }, [clickOutsideToClose]);
+
+        useEffect(() => {
+            updatePositionPopover();
+        }, [children]);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                show: el => {
+                    if (el) setElement(el);
+                    !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover();
+                },
+                close: () => onClosePopover(null, 'ref'),
+                setPosition: el => updatePositionPopover(el),
+                ...action,
+            }; // methods
+            _instance.__proto__ = { hide: () => onClosePopover() }; // hidden methods
+            currentRef.instance = _instance;
+            currentRef.show = el => {
+                if (el) setElement(el);
+                !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover();
+            };
+            currentRef.close = onClosePopover;
+            currentRef.setPosition = el => updatePositionPopover(el);
+            return currentRef;
+        });
+
+        const renderAnchor = () => {
+            if (!anchor?.type) return null;
+            const AnchorTag = React.cloneElement(anchor, {
+                ref: ref => {
+                    anchor = ref;
+                },
+                style: { cursor: 'pointer', ...(anchor?.props?.style || {}) },
+            });
+            return AnchorTag;
+        };
+
+        const PopoverView = useMemo(() => {
+            if (openState) {
+                const node = (
+                    <div css={_PortalPopoverCSS} className={'DGN-UI-Portal DGN-UI-Popover'}>
+                        <div
+                            css={_PopoverContainerCSS}
+                            ref={ref}
+                            style={style}
+                            className={classNames('DGN-UI-Popover-Container', className)}
+                        >
+                            {children}
+                        </div>
+                        {arrow ? <span ref={arrowRef} css={_PopoverArrowCSS} /> : null}
+                    </div>
+                );
+                return createPortal(node, document.body);
+            }
+            return null;
+        }, [
+            openState,
+            theme,
+            arrow,
+            bgColorProp,
+            children,
+            className,
+            clickOutsideToClose,
+            fullScreen,
+            height,
+            style,
+            width,
+            zIndex,
+        ]);
+
+        return (
+            <>
+                {renderAnchor()}
+                {PopoverView}
+            </>
+        );
+    })
+);
+
+const PortalPopoverCSS = (zIndex, fullScreen) => css`
+    ${positionFixed};
+    ${fullScreen ? pointerEventsInitial : pointerEventsNone};
+    ${inset(0)};
+    z-index: ${zIndex};
+`;
+
+const PopoverContainerCSS = (bgCl, width, height, { spacing, typography }) => css`
+    ${displayFlex};
+    ${flexCol};
+    ${positionRelative};
+    ${justifyBetween};
+    ${overflowAuto};
+    ${borderRadius4px};
+    ${typography.paragraph1};
+    ${pointerEventsInitial};
+    ${parseWidthHeight(width, height)};
+    ${parseMinWidthHeight(spacing([4]))};
+    ${parseMaxWidthHeight(`calc(100% - ${spacing([8])})`)};
+    ${bgColor(bgCl)};
+    transition: opacity 0.3s ease;
+    opacity: 0;
+    ${shadowLarge};
+`;
+
+const PopoverArrowCSS = (bgCl, arrowSize) => css`
+    ${displayNone};
+    ${positionAbsolute};
+    ${parseWidthHeight(0)};
+    ${borderBottom(arrowSize, bgCl)};
+    border-left: ${arrowSize}px solid transparent;
+    border-right: ${arrowSize}px solid transparent;
+`;
+
+// Popover.defaultProps = {
+//     anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
+//     arrow: false,
+//     bgColor: 'system/standard',
+//     className: '',
+//     clickOutsideToClose: true,
+//     fullScreen: true,
+//     height: 'max-content',
+//     marginThreshold: spacing(4),
+//     pressESCToClose: true,
+//     style: {},
+//     transformOrigin: { vertical: 'top', horizontal: 'center' },
+//     trigger: 'click',
+//     width: 'max-content',
+//     zIndex: zIndexCORE(1),
+// };
+
+Popover.propTypes = {
+    /** An HTML element, or a function that returns one. It's used to set the position of the popover. */
+    anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object, PropTypes.node, ref]),
+    /**
+     * This is the point on the anchor where the popover's anchor will attach to.
+     * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+     */
+    anchorOrigin: PropTypes.shape({
+        horizontal: PropTypes.oneOf(['center', 'left', 'right']),
+        vertical: PropTypes.oneOf(['bottom', 'center', 'top']),
+    }),
+    /** If `true`, arrow is shown. */
+    arrow: PropTypes.bool,
+    /** Background color of the component. */
+    bgColor: PropTypes.string,
+    /** The content of the component. */
+    children: PropTypes.node,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** If `true`, click outside will close component. */
+    clickOutsideToClose: PropTypes.bool,
+    /**
+     * Direction when Popover shown.
+     * Note: This prop will overwrite anchorOrigin & transformOrigin.
+     *
+     * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
+     * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
+     * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
+     * * bottom: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
+     */
+    direction: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
+    /** Height of the component. */
+    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** Specifies how close to the edge of the window the popover can appear. */
+    marginThreshold: PropTypes.number,
+    /** Callback fired when the component requests to be closed. */
+    onClose: PropTypes.func,
+    /** Callback fired when the component requests to be opened. */
+    onOpen: PropTypes.func,
+    /** If `true`, the component is shown. */
+    open: PropTypes.bool,
+    /** If `true`, hitting escape will close component. */
+    pressESCToClose: PropTypes.bool,
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /**
+     * This is the point on the popover which will attach to the anchor's origin.
+     * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+     */
+    transformOrigin: PropTypes.shape({
+        horizontal: PropTypes.oneOf(['center', 'left', 'right']),
+        vertical: PropTypes.oneOf(['bottom', 'center', 'top']),
+    }),
+    /** Trigger mode of the component. Will not work when use with `open` prop. */
+    trigger: PropTypes.oneOf(['click', 'hover', 'focus']),
+    /** Width of the component. */
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** Config z-index of the component. */
+    zIndex: PropTypes.number,
+    /**
+     * ref methods (ref.current.instance.*method*)
+     *
+     * * show: Show popover
+     * * close: Close popover
+     * * setPosition(element): Set position of popover
+     *  * @param {element} - element
+     *
+     * * option(): Gets all UI component properties
+     *  * Returns value - object
+     * * option(optionName): Gets the value of a single property
+     *  * @param {optionName} - string
+     *  * Returns value - any
+     * * option(optionName, optionValue): Updates the value of a single property
+     *  * @param {optionName} - string
+     *  * @param {optionValue} - any
+     * * option(options): Updates the values of several properties
+     *  * @param {options} - object
+     */
+};
+
+export { Popover };
+export default OptionWrapper(Popover);