@wordpress/components
Version:
UI components for WordPress.
60 lines (59 loc) • 2.03 kB
JavaScript
import * as Ariakit from "@ariakit/react";
import { useContext, useMemo, forwardRef, useCallback } from "@wordpress/element";
import * as Styled from "./styles";
import { Context } from "./context";
import { jsx as _jsx } from "react/jsx-runtime";
const Popover = forwardRef(function Popover2({
gutter,
children,
shift,
modal = true,
...otherProps
}, ref) {
const menuContext = useContext(Context);
const appliedPlacementSide = Ariakit.useStoreState(menuContext?.store, "currentPlacement")?.split("-")[0];
const hideOnEscape = useCallback((event) => {
event.preventDefault();
return true;
}, []);
const computedDirection = Ariakit.useStoreState(menuContext?.store, "rtl") ? "rtl" : "ltr";
const wrapperProps = useMemo(() => ({
dir: computedDirection,
style: {
direction: computedDirection
}
}), [computedDirection]);
if (!menuContext?.store) {
throw new Error("Menu.Popover can only be rendered inside a Menu component");
}
return /* @__PURE__ */ _jsx(Ariakit.Menu, {
...otherProps,
ref,
modal,
store: menuContext.store,
gutter: gutter !== null && gutter !== void 0 ? gutter : menuContext.store.parent ? 0 : 8,
shift: shift !== null && shift !== void 0 ? shift : menuContext.store.parent ? -4 : 0,
hideOnHoverOutside: false,
"data-side": appliedPlacementSide,
wrapperProps,
hideOnEscape,
unmountOnHide: true,
render: (renderProps) => (
// Two wrappers are needed for the entry animation, where the menu
// container scales with a different factor than its contents.
// The {...renderProps} are passed to the inner wrapper, so that the
// menu element is the direct parent of the menu item elements.
/* @__PURE__ */ _jsx(Styled.PopoverOuterWrapper, {
variant: menuContext.variant,
children: /* @__PURE__ */ _jsx(Styled.PopoverInnerWrapper, {
...renderProps
})
})
),
children
});
});
export {
Popover
};
//# sourceMappingURL=popover.js.map