@yamada-ui/react/dist/esm/hooks/use-popper/index.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { mergeRefs } from "../../utils/ref.js";
import { useSplitProps } from "../../core/components/props.js";
import { useCallback, useMemo } from "react";
import { autoUpdate, flip, offset, shift, size, useFloating } from "@floating-ui/react-dom";

//#region src/hooks/use-popper/index.ts
const PLACEMENT_MAP = {
	"center-end": "right",
	"center-start": "left",
	end: "bottom",
	"end-center": "bottom",
	"end-end": "bottom-end",
	"end-start": "bottom-start",
	start: "top",
	"start-center": "top",
	"start-end": "top-end",
	"start-start": "top-start"
};
const usePopper = ({ autoUpdate: autoUpdateProp = true, elements, flip: flipProp = true, gutter = 8, matchWidth, middleware: middlewareProp, offset: offsetProp, open = true, placement = "start", platform, preventOverflow = true, strategy = "absolute", transform = true, whileElementsMounted: whileElementsMountedProp } = {}) => {
	const middleware = useMemo(() => {
		const middleware$1 = [];
		if (offsetProp) {
			const [mainAxis, crossAxis] = offsetProp;
			middleware$1.push(offset({
				crossAxis,
				mainAxis
			}));
		} else if (gutter) middleware$1.push(offset(gutter));
		if (flipProp) middleware$1.push(flip());
		if (preventOverflow) middleware$1.push(shift());
		if (middlewareProp) middleware$1.push(...middlewareProp);
		if (matchWidth) middleware$1.push(size({ apply({ elements: elements$1, rects }) {
			Object.assign(elements$1.floating.style, { minWidth: `${rects.reference.width}px` });
		} }));
		return middleware$1;
	}, [
		flipProp,
		gutter,
		matchWidth,
		middlewareProp,
		offsetProp,
		preventOverflow
	]);
	const whileElementsMounted = useMemo(() => {
		if (whileElementsMountedProp) return whileElementsMountedProp;
		if (autoUpdateProp) return autoUpdate;
	}, [autoUpdateProp, whileElementsMountedProp]);
	const { floatingStyles, refs,...rest } = useFloating({
		elements,
		middleware,
		open,
		placement: PLACEMENT_MAP[placement],
		platform,
		strategy,
		transform,
		whileElementsMounted
	});
	const getReferenceProps = useCallback((props) => ({
		...props,
		ref: mergeRefs(props?.ref, refs.setReference)
	}), [refs.setReference]);
	const getPopperProps = useCallback((props) => ({
		...props,
		ref: mergeRefs(props?.ref, refs.setFloating),
		style: {
			...props?.style,
			minWidth: matchWidth ? void 0 : "max-content",
			...floatingStyles
		}
	}), [
		refs.setFloating,
		matchWidth,
		floatingStyles
	]);
	return {
		...rest,
		refs,
		getPopperProps,
		getReferenceProps
	};
};
const popperProps = [
	"autoUpdate",
	"elements",
	"flip",
	"gutter",
	"matchWidth",
	"middleware",
	"offset",
	"open",
	"placement",
	"platform",
	"preventOverflow",
	"strategy",
	"transform",
	"whileElementsMounted"
];
const usePopperProps = (props, omitKeys) => {
	return useSplitProps(props, popperProps.filter((key) => !omitKeys?.includes(key)));
};

//#endregion
export { popperProps, usePopper, usePopperProps };
//# sourceMappingURL=index.js.map