@mantine/core/esm/components/FloatingWindow/FloatingWindow.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { getDefaultZIndex } from "../../core/utils/get-default-z-index/get-default-z-index.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { Paper } from "../Paper/Paper.mjs";
import { OptionalPortal } from "../Portal/OptionalPortal.mjs";
import { FloatingWindowProvider } from "./FloatingWindow.context.mjs";
import { FloatingWindowResizeHandle } from "./FloatingWindowResizeHandle.mjs";
import FloatingWindow_module_default from "./FloatingWindow.module.mjs";
import { useImperativeHandle, useRef } from "react";
import { useFloatingWindow, useMergedRef } from "@mantine/hooks";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/FloatingWindow/FloatingWindow.tsx
const defaultProps = {
	constrainToViewport: true,
	zIndex: 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 = factory((_props) => {
	const 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 = useRef(null);
	const getStyles = useStyles({
		name: "FloatingWindow",
		classes: FloatingWindow_module_default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		vars
	});
	const floatingWindow = useFloatingWindow({
		enabled,
		constrainToViewport,
		constrainOffset,
		dragHandleSelector,
		excludeDragHandleSelector,
		axis,
		initialPosition,
		onPositionChange,
		onDragStart,
		onDragEnd
	});
	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__ */ jsx(FloatingWindowProvider, {
		value: {
			rootRef,
			dimensions,
			constrainToViewport,
			constrainOffset,
			onSizeChange,
			onResizeStart,
			onResizeEnd
		},
		children: /* @__PURE__ */ jsx(OptionalPortal, {
			withinPortal,
			...portalProps,
			children: /* @__PURE__ */ jsx(Paper, {
				ref: useMergedRef(ref, floatingWindow.ref, rootRef),
				mod: [{ dragging: floatingWindow.isDragging }, mod],
				...getStyles("root"),
				...others,
				__vars: cssVars
			})
		})
	});
});
FloatingWindow.displayName = "@mantine/core/FloatingWindow";
FloatingWindow.classes = FloatingWindow_module_default;
FloatingWindow.ResizeHandle = FloatingWindowResizeHandle;
//#endregion
export { FloatingWindow };

//# sourceMappingURL=FloatingWindow.mjs.map