@mantine/core/cjs/components/FloatingWindow/FloatingWindow.cjs

React components library focused on usability, accessibility and developer experience

"use client";
const require_get_default_z_index = require("../../core/utils/get-default-z-index/get-default-z-index.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_Paper = require("../Paper/Paper.cjs");
const require_OptionalPortal = require("../Portal/OptionalPortal.cjs");
const require_FloatingWindow_context = require("./FloatingWindow.context.cjs");
const require_FloatingWindowResizeHandle = require("./FloatingWindowResizeHandle.cjs");
const require_FloatingWindow_module = require("./FloatingWindow.module.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/FloatingWindow/FloatingWindow.tsx
const defaultProps = {
	constrainToViewport: true,
	zIndex: require_get_default_z_index.getDefaultZIndex("overlay")
};
function clampDimension(value, min, max) {
	let v = value;
	if (min != null) v = Math.max(v, min);
	if (max != null) v = Math.min(v, max);
	return v;
}
const FloatingWindow = require_factory.factory((_props) => {
	const props = require_use_props.useProps("FloatingWindow", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, mod, enabled, constrainToViewport, constrainOffset, dragHandleSelector, excludeDragHandleSelector, axis, initialPosition, onPositionChange, onDragStart, onDragEnd, setPositionRef, withinPortal, portalProps, zIndex, dimensions, onSizeChange, onResizeStart, onResizeEnd, ref, ...others } = props;
	const rootRef = (0, react.useRef)(null);
	const getStyles = require_use_styles.useStyles({
		name: "FloatingWindow",
		classes: require_FloatingWindow_module.default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		vars
	});
	const floatingWindow = (0, _mantine_hooks.useFloatingWindow)({
		enabled,
		constrainToViewport,
		constrainOffset,
		dragHandleSelector,
		excludeDragHandleSelector,
		axis,
		initialPosition,
		onPositionChange,
		onDragStart,
		onDragEnd
	});
	(0, react.useImperativeHandle)(setPositionRef, () => floatingWindow.setPosition, [floatingWindow.setPosition]);
	const cssVars = { "--floating-window-z-index": zIndex.toString() };
	if (dimensions?.initialWidth != null) cssVars["--floating-window-width"] = `${clampDimension(dimensions.initialWidth, dimensions.minWidth, dimensions.maxWidth)}px`;
	if (dimensions?.initialHeight != null) cssVars["--floating-window-height"] = `${clampDimension(dimensions.initialHeight, dimensions.minHeight, dimensions.maxHeight)}px`;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingWindow_context.FloatingWindowProvider, {
		value: {
			rootRef,
			dimensions,
			constrainToViewport,
			constrainOffset,
			onSizeChange,
			onResizeStart,
			onResizeEnd
		},
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OptionalPortal.OptionalPortal, {
			withinPortal,
			...portalProps,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Paper.Paper, {
				ref: (0, _mantine_hooks.useMergedRef)(ref, floatingWindow.ref, rootRef),
				mod: [{ dragging: floatingWindow.isDragging }, mod],
				...getStyles("root"),
				...others,
				__vars: cssVars
			})
		})
	});
});
FloatingWindow.displayName = "@mantine/core/FloatingWindow";
FloatingWindow.classes = require_FloatingWindow_module.default;
FloatingWindow.ResizeHandle = require_FloatingWindowResizeHandle.FloatingWindowResizeHandle;
//#endregion
exports.FloatingWindow = FloatingWindow;

//# sourceMappingURL=FloatingWindow.cjs.map