@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
109 lines (106 loc) • 4.29 kB
JavaScript
'use client';
import { placementMap } from "../utils/placement.mjs";
import { PopoverProvider } from "./context.mjs";
import { PopoverGroupHandleContext, PopoverGroupPropsContext } from "./groupContext.mjs";
import { parseTrigger } from "./parseTrigger.mjs";
import { PopoverArrowIcon } from "./ArrowIcon.mjs";
import { usePopoverPortalContainer } from "./PopoverPortal.mjs";
import { styles } from "./style.mjs";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
import { Popover } from "@base-ui/react/popover";
//#region src/Popover/PopoverGroup.tsx
const PopoverGroup = ({ children, contentLayoutAnimation = false, ...sharedProps }) => {
const handle = useMemo(() => Popover.createHandle(), []);
const activeItemRef = useRef(null);
const close = useCallback(() => {
handle.close();
}, [handle]);
const contextValue = useMemo(() => ({ close }), [close]);
const handleOpenChange = useCallback((open) => {
activeItemRef.current?.onOpenChange?.(open);
}, []);
const [updateKey, setUpdateKey] = useState(0);
useEffect(() => {
setUpdateKey((prev) => prev + 1);
}, [handle]);
const portalContainer = usePopoverPortalContainer();
return /* @__PURE__ */ jsx(PopoverGroupHandleContext.Provider, {
value: handle,
children: /* @__PURE__ */ jsxs(PopoverGroupPropsContext.Provider, {
value: sharedProps,
children: [children, /* @__PURE__ */ jsx(Popover.Root, {
handle,
onOpenChange: handleOpenChange,
children: ({ payload }) => {
const item = payload ?? null;
activeItemRef.current = item;
if (!item?.content) return null;
const arrow = item.inset ? false : item.arrow ?? false;
const placement = item.placement ?? "top";
const { openOnHover } = parseTrigger(item.trigger ?? "hover");
const placementConfig = placementMap[placement] ?? placementMap.top;
const baseSideOffset = arrow ? 10 : 6;
const resolvedSideOffset = item.inset ? ({ side, positioner }) => {
if (side === "left" || side === "right" || side === "inline-start" || side === "inline-end") return -positioner.width;
return -positioner.height;
} : baseSideOffset;
const resolvedClassNames = {
arrow: cx(styles.arrow, item.classNames?.arrow),
popup: cx(styles.popup, item.className),
positioner: cx(styles.positioner, item.classNames?.root),
viewport: cx(styles.viewport, item.classNames?.content)
};
const resolvedStyles = {
arrow: item.styles?.arrow,
positioner: {
...item.styles?.root,
zIndex: item.zIndex ?? 1100
},
viewport: item.styles?.content
};
const contentNode = /* @__PURE__ */ jsx(PopoverProvider, {
value: contextValue,
children: item.content
});
const popup = /* @__PURE__ */ jsx(Popover.Positioner, {
align: placementConfig.align,
className: resolvedClassNames.positioner,
"data-hover-trigger": openOnHover || void 0,
"data-placement": placement,
side: placementConfig.side,
sideOffset: resolvedSideOffset,
style: resolvedStyles.positioner,
children: /* @__PURE__ */ jsxs(Popover.Popup, {
className: resolvedClassNames.popup,
children: [arrow && /* @__PURE__ */ jsx(Popover.Arrow, {
className: resolvedClassNames.arrow,
style: resolvedStyles.arrow,
children: PopoverArrowIcon
}), contentLayoutAnimation ? /* @__PURE__ */ jsx(Popover.Viewport, {
className: resolvedClassNames.viewport,
style: resolvedStyles.viewport,
children: contentNode
}) : /* @__PURE__ */ jsx("div", {
className: resolvedClassNames.viewport,
style: resolvedStyles.viewport,
children: contentNode
})]
})
});
const resolvedPortalContainer = portalContainer;
return item.portalled ?? true ? resolvedPortalContainer ? /* @__PURE__ */ jsx(Popover.Portal, {
container: resolvedPortalContainer,
children: popup
}) : null : popup;
}
}, updateKey)]
})
});
};
PopoverGroup.displayName = "PopoverGroup";
var PopoverGroup_default = PopoverGroup;
//#endregion
export { PopoverGroup_default as default };
//# sourceMappingURL=PopoverGroup.mjs.map