@wix/design-system
Version:
@wix/design-system
39 lines • 2.46 kB
JavaScript
import React, { forwardRef, useContext } from 'react';
import { FloatingPortal, FloatingFocusManager, FloatingOverlay, useMergeRefs, FloatingArrow, } from '@floating-ui/react';
import { usePopoverNextContext } from '../../hooks/usePopoverNextContext';
import { st, classes } from './Content.st.css.js';
import { APPEND_TO } from '../../PopoverNext.constants';
import { WixDesignSystemContext } from '../../../WixDesignSystemProvider/context';
const Content = forwardRef(function Content({ style, ...props }, propRef) {
const { dataHook, placement, focusManagerEnabled, context, appendTo, portalRoot, zIndex, popoverStyles, interactions, open, skin, transitionStyles, overlay, style: styleFromUser, showArrow, contentClassName, arrowProps, } = usePopoverNextContext();
const { contextClassName } = useContext(WixDesignSystemContext);
const ref = useMergeRefs([context.refs.setFloating, propRef]);
const { className, ...floatingProps } = interactions.getFloatingProps(props);
if (!open) {
return null;
}
const mergedStyles = {
...popoverStyles,
zIndex,
...transitionStyles,
...styleFromUser,
...style,
};
const content = (React.createElement(FloatingFocusManager, { context: context, disabled: !focusManagerEnabled },
React.createElement(React.Fragment, null,
overlay === true ? React.createElement(FloatingOverlay, null) : (overlay ?? null),
React.createElement("div", { ref: ref, "data-hook": `${dataHook}-content`, "data-zindex": zIndex, className: st(classes.root, { skin, placement, showArrow }, className, contextClassName), style: mergedStyles, ...floatingProps },
showArrow && (React.createElement(FloatingArrow, { ...arrowProps, className: st(classes.arrow, { skin }) })),
React.createElement("div", { className: st(classes.contentWrapper, {}, contentClassName) }, props.children)))));
if (appendTo === APPEND_TO.window || appendTo === APPEND_TO.viewport) {
return (React.createElement(FloatingPortal, null,
React.createElement("div", { "data-hook": "popover-portal" }, content)));
}
if (portalRoot) {
return (React.createElement(FloatingPortal, { root: portalRoot, preserveTabOrder: false },
React.createElement("div", { "data-hook": "popover-portal" }, content)));
}
return content;
});
export default Content;
//# sourceMappingURL=Content.js.map