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

React components library focused on usability, accessibility and developer experience

"use client";
import { rem } from "../../core/utils/units-converters/rem.mjs";
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { getThemeColor } from "../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.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 { Box } from "../../core/Box/Box.mjs";
import { useDirection } from "../../core/DirectionProvider/DirectionProvider.mjs";
import { GripHorizontalIcon, GripVerticalIcon } from "./GripIcon.mjs";
import { SplitterProvider } from "./Splitter.context.mjs";
import Splitter_module_default from "./Splitter.module.mjs";
import { SplitterPane } from "./SplitterPane/SplitterPane.mjs";
import { Children, cloneElement, createElement, useImperativeHandle } from "react";
import { useMergedRef, useSplitter } from "@mantine/hooks";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Splitter/Splitter.tsx
const PX_RE = /^(-?[\d.]+)px$/;
const REM_RE = /^(-?[\d.]+)rem$/;
function isFixedPaneSize(size) {
	return typeof size === "string" && (PX_RE.test(size) || REM_RE.test(size));
}
function getPaneFlexStyle(size, pixelMode) {
	const magnitude = typeof size === "number" ? size : parseFloat(size);
	if (!pixelMode) return { flexBasis: `${magnitude}%` };
	if (isFixedPaneSize(size)) return {
		flexGrow: 0,
		flexShrink: 1,
		flexBasis: size
	};
	return {
		flexGrow: magnitude,
		flexShrink: 1,
		flexBasis: 0
	};
}
const defaultProps = {
	orientation: "horizontal",
	lineSize: 2,
	withHandle: true,
	resetOnDoubleClick: true
};
const varsResolver = createVarsResolver((theme, { lineSize, handleColor }) => ({ root: {
	"--splitter-line-size": rem(lineSize),
	"--splitter-handle-color": handleColor ? getThemeColor(handleColor, theme) : void 0
} }));
const Splitter = factory((_props) => {
	const props = useProps("Splitter", defaultProps, _props);
	const { orientation, sizes: controlledSizes, onSizeChange, onResizeStart, onResizeEnd, onCollapseChange, redistribute, step, shiftStep, lineSize, handleColor, handleIcon, withHandle, resetOnDoubleClick, splitterRef, children, className, classNames, style, styles, unstyled, vars, mod, attributes, ref, ...others } = props;
	const { dir } = useDirection();
	const paneChildren = Children.toArray(children);
	const splitter = useSplitter({
		panels: paneChildren.map((child) => ({
			defaultSize: child.props.defaultSize,
			min: child.props.min,
			max: child.props.max,
			collapsible: child.props.collapsible,
			collapseThreshold: child.props.collapseThreshold
		})),
		orientation,
		sizes: controlledSizes,
		onSizeChange,
		onResizeStart,
		onResizeEnd,
		onCollapseChange,
		redistribute,
		step,
		shiftStep,
		dir,
		resetOnDoubleClick
	});
	useImperativeHandle(splitterRef, () => splitter, [splitter]);
	const getPaneStyle = (index) => getPaneFlexStyle(splitter.sizes[index], splitter.pixelMode);
	const mergedRef = useMergedRef(ref, splitter.ref);
	const getStyles = useStyles({
		name: "Splitter",
		classes: Splitter_module_default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const thumbIcon = handleIcon !== void 0 ? handleIcon : orientation === "vertical" ? /* @__PURE__ */ jsx(GripHorizontalIcon, {}) : /* @__PURE__ */ jsx(GripVerticalIcon, {});
	const items = [];
	paneChildren.forEach((child, index) => {
		if (index > 0) {
			const handleProps = splitter.getHandleProps({ index: index - 1 });
			const isActive = splitter.activeHandle === index - 1;
			items.push(/* @__PURE__ */ createElement(Box, {
				...getStyles("handle"),
				key: `handle-${index - 1}`,
				...handleProps
			}, withHandle && /* @__PURE__ */ jsx("div", {
				...getStyles("thumb"),
				"data-orientation": orientation,
				"data-active": isActive || void 0,
				children: thumbIcon
			})));
		}
		items.push(cloneElement(child, {
			key: `pane-${index}`,
			__index: index
		}));
	});
	return /* @__PURE__ */ jsx(SplitterProvider, {
		value: {
			getStyles,
			sizes: splitter.sizes,
			collapsed: splitter.collapsed,
			orientation,
			getPaneStyle
		},
		children: /* @__PURE__ */ jsx(Box, {
			ref: mergedRef,
			...getStyles("root"),
			mod: [{ orientation }, mod],
			...others,
			children: items
		})
	});
});
Splitter.classes = Splitter_module_default;
Splitter.varsResolver = varsResolver;
Splitter.displayName = "@mantine/core/Splitter";
Splitter.Pane = SplitterPane;
//#endregion
export { Splitter };

//# sourceMappingURL=Splitter.mjs.map