@mantine/core/cjs/components/Popover/use-popover.cjs

React components library focused on usability, accessibility and developer experience

"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_Mantine_context = require("../../core/MantineProvider/Mantine.context.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let _floating_ui_react = require("@floating-ui/react");
//#region packages/@mantine/core/src/components/Popover/use-popover.ts
function getDefaultMiddlewares(middlewares) {
	if (middlewares === void 0) return {
		shift: true,
		flip: true
	};
	const result = { ...middlewares };
	if (middlewares.shift === void 0) result.shift = true;
	if (middlewares.flip === void 0) result.flip = true;
	return result;
}
function getPopoverMiddlewares(options, getFloating, env) {
	const middlewaresOptions = getDefaultMiddlewares(options.middlewares);
	const middlewares = [(0, _floating_ui_react.offset)(options.offset), (0, _floating_ui_react.hide)()];
	if (options.dropdownVisible && env !== "test" && options.preventPositionChangeWhenVisible) middlewaresOptions.flip = false;
	if (middlewaresOptions.flip) middlewares.push(typeof middlewaresOptions.flip === "boolean" ? (0, _floating_ui_react.flip)() : (0, _floating_ui_react.flip)(middlewaresOptions.flip));
	if (middlewaresOptions.shift) middlewares.push((0, _floating_ui_react.shift)(typeof middlewaresOptions.shift === "boolean" ? {
		limiter: (0, _floating_ui_react.limitShift)(),
		padding: 5
	} : {
		limiter: (0, _floating_ui_react.limitShift)(),
		padding: 5,
		...middlewaresOptions.shift
	}));
	if (middlewaresOptions.inline) middlewares.push(typeof middlewaresOptions.inline === "boolean" ? (0, _floating_ui_react.inline)() : (0, _floating_ui_react.inline)(middlewaresOptions.inline));
	middlewares.push((0, _floating_ui_react.arrow)({
		element: options.arrowRef,
		padding: options.arrowOffset
	}));
	if (middlewaresOptions.size || options.width === "target") middlewares.push((0, _floating_ui_react.size)({
		...typeof middlewaresOptions.size === "boolean" ? {} : middlewaresOptions.size,
		apply({ rects, availableWidth, availableHeight, ...rest }) {
			const styles = getFloating().refs.floating.current?.style ?? {};
			if (middlewaresOptions.size) if (typeof middlewaresOptions.size === "object" && !!middlewaresOptions.size.apply) middlewaresOptions.size.apply({
				rects,
				availableWidth,
				availableHeight,
				...rest
			});
			else Object.assign(styles, {
				maxWidth: `${availableWidth}px`,
				maxHeight: `${availableHeight}px`
			});
			if (options.width === "target") Object.assign(styles, { width: `${rects.reference.width}px` });
		}
	}));
	return middlewares;
}
function usePopover(options) {
	const env = require_Mantine_context.useMantineEnv();
	const [_opened, setOpened] = (0, _mantine_hooks.useUncontrolled)({
		value: options.opened,
		defaultValue: options.defaultOpened,
		finalValue: false,
		onChange: options.onChange
	});
	const previouslyOpened = (0, react.useRef)(_opened);
	const onClose = () => {
		if (_opened && !options.disabled) setOpened(false);
	};
	const onToggle = () => {
		if (!options.disabled) setOpened(!_opened);
	};
	const floating = (0, _floating_ui_react.useFloating)({
		strategy: options.strategy,
		placement: options.preventPositionChangeWhenVisible ? options.positionRef.current : options.position,
		middleware: getPopoverMiddlewares(options, () => floating, env),
		whileElementsMounted: !options.keepMounted ? _floating_ui_react.autoUpdate : void 0
	});
	(0, react.useEffect)(() => {
		if (!floating.refs.reference.current || !floating.refs.floating.current) return;
		if (_opened) return (0, _floating_ui_react.autoUpdate)(floating.refs.reference.current, floating.refs.floating.current, floating.update);
	}, [_opened, floating.update]);
	(0, _mantine_hooks.useDidUpdate)(() => {
		options.onPositionChange?.(floating.placement);
		options.positionRef.current = floating.placement;
	}, [floating.placement, options.preventPositionChangeWhenVisible]);
	(0, _mantine_hooks.useDidUpdate)(() => {
		if (_opened !== previouslyOpened.current) if (!_opened) options.onClose?.();
		else options.onOpen?.();
		previouslyOpened.current = _opened;
	}, [
		_opened,
		options.onClose,
		options.onOpen
	]);
	(0, _mantine_hooks.useIsomorphicEffect)(() => {
		let timeout = -1;
		if (_opened) timeout = window.setTimeout(() => options.setDropdownVisible(true), 4);
		return () => {
			window.clearTimeout(timeout);
		};
	}, [_opened, options.position]);
	return {
		floating,
		controlled: typeof options.opened === "boolean",
		opened: _opened,
		onClose,
		onToggle
	};
}
//#endregion
exports.usePopover = usePopover;

//# sourceMappingURL=use-popover.cjs.map