@mantine/core/cjs/components/Splitter/Splitter.cjs

React components library focused on usability, accessibility and developer experience

"use client";
const require_rem = require("../../core/utils/units-converters/rem.cjs");
const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const require_get_theme_color = require("../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.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_Box = require("../../core/Box/Box.cjs");
const require_DirectionProvider = require("../../core/DirectionProvider/DirectionProvider.cjs");
const require_GripIcon = require("./GripIcon.cjs");
const require_Splitter_context = require("./Splitter.context.cjs");
const require_Splitter_module = require("./Splitter.module.cjs");
const require_SplitterPane = require("./SplitterPane/SplitterPane.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/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 = require_create_vars_resolver.createVarsResolver((theme, { lineSize, handleColor }) => ({ root: {
	"--splitter-line-size": require_rem.rem(lineSize),
	"--splitter-handle-color": handleColor ? require_get_theme_color.getThemeColor(handleColor, theme) : void 0
} }));
const Splitter = require_factory.factory((_props) => {
	const props = require_use_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 } = require_DirectionProvider.useDirection();
	const paneChildren = react.Children.toArray(children);
	const splitter = (0, _mantine_hooks.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
	});
	(0, react.useImperativeHandle)(splitterRef, () => splitter, [splitter]);
	const getPaneStyle = (index) => getPaneFlexStyle(splitter.sizes[index], splitter.pixelMode);
	const mergedRef = (0, _mantine_hooks.useMergedRef)(ref, splitter.ref);
	const getStyles = require_use_styles.useStyles({
		name: "Splitter",
		classes: require_Splitter_module.default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const thumbIcon = handleIcon !== void 0 ? handleIcon : orientation === "vertical" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GripIcon.GripHorizontalIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GripIcon.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__ */ (0, react.createElement)(require_Box.Box, {
				...getStyles("handle"),
				key: `handle-${index - 1}`,
				...handleProps
			}, withHandle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				...getStyles("thumb"),
				"data-orientation": orientation,
				"data-active": isActive || void 0,
				children: thumbIcon
			})));
		}
		items.push((0, react.cloneElement)(child, {
			key: `pane-${index}`,
			__index: index
		}));
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Splitter_context.SplitterProvider, {
		value: {
			getStyles,
			sizes: splitter.sizes,
			collapsed: splitter.collapsed,
			orientation,
			getPaneStyle
		},
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
			ref: mergedRef,
			...getStyles("root"),
			mod: [{ orientation }, mod],
			...others,
			children: items
		})
	});
});
Splitter.classes = require_Splitter_module.default;
Splitter.varsResolver = varsResolver;
Splitter.displayName = "@mantine/core/Splitter";
Splitter.Pane = require_SplitterPane.SplitterPane;
//#endregion
exports.Splitter = Splitter;

//# sourceMappingURL=Splitter.cjs.map