@wix/design-system/dist/esm/PopoverNext/PopoverNext.js

@wix/design-system

import React, { useEffect, useRef } from 'react';
import Trigger from './components/Trigger/Trigger';
import Content from './components/Content/Content';
import { usePopover } from './hooks/usePopover';
import { PopoverNextContext } from './PopoverNext.context';
import { st, classes } from './PopoverNext.st.css.js';
import deprecationLog from '../utils/deprecationLog';
function PopoverNext({ children, appendTo, dataHook, className, onMouseEnter, onMouseLeave, onShow, onHide, onKeyDown, fluid, open = false, skin = 'light', theme, // deprecated
shown, // deprecated
dataListType, ...restOptions }) {
    const rootRef = useRef(null);
    const prevOpenRef = useRef(undefined);
    const popover = usePopover({
        ...restOptions,
        skin: theme || skin,
        open: shown ?? open,
        appendTo,
        onMouseEnter,
        onMouseLeave,
        dataHook,
        rootRef,
    });
    useEffect(() => {
        if (theme) {
            deprecationLog('<PopoverNext /> - `theme` prop is deprecated and will be removed in next major version, please use `skin` instead');
        }
        if (shown !== undefined) {
            deprecationLog('<PopoverNext /> - `shown` prop is deprecated and will be removed in next major version, please use `open` instead');
        }
    }, [theme, shown]);
    useEffect(() => {
        if (prevOpenRef.current === undefined) {
            prevOpenRef.current = popover.open;
            if (popover.open) {
                onShow?.();
            }
            return;
        }
        if (popover.open !== prevOpenRef.current) {
            prevOpenRef.current = popover.open;
            if (popover.open) {
                onShow?.();
            }
            else {
                onHide?.();
            }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [popover.open]);
    return (React.createElement(PopoverNextContext.Provider, { value: popover },
        React.createElement("div", { ref: rootRef, "data-hook": dataHook, "data-popover-root": true, "data-list-type": dataListType, className: st(classes.root, { fluid }, className), onKeyDown: onKeyDown }, children)));
}
PopoverNext.displayName = 'PopoverNext';
PopoverNext.Trigger = Trigger;
PopoverNext.Content = Content;
export default PopoverNext;
//# sourceMappingURL=PopoverNext.js.map