@gfazioli/mantine-split-pane/dist/cjs/Split.cjs

A Mantine 9 React component for resizable split pane layouts with 7 resizer variants, context-based prop inheritance, responsive orientation, and dynamic pane generation.

'use client';
'use strict';

var core = require('@mantine/core');
var hooks = require('@mantine/hooks');
var React = require('react');
var SplitDynamic = require('./Dynamic/SplitDynamic.cjs');
var useResponsiveValue = require('./hooks/use-responsive-value.cjs');
var useSplitResizerOrientation = require('./hooks/use-split-resizer-orientation.cjs');
var SplitPane = require('./Pane/SplitPane.cjs');
var SplitResizer = require('./Resizer/SplitResizer.cjs');
var Split_context = require('./Split.context.cjs');
var Split_module = require('./Split.module.css.cjs');

const defaultProps = {
  inline: false,
  autoResizers: false,
  ...SplitResizer.defaultProps
};
const varsResolver = core.createVarsResolver((_, { inline }) => ({
  root: {
    "--split-inline": inline ? "inline-flex" : "flex"
  }
}));
const Split = core.factory((_props) => {
  const { ref, ...restProps } = _props;
  const props = core.useProps("Split", defaultProps, restProps);
  const {
    inline,
    autoResizers,
    orientation: propOrientation,
    opacity,
    size,
    radius,
    withKnob,
    knobAlwaysOn,
    knobSize,
    knobOpacity,
    knobRadius,
    knobColor,
    knobHoverColor,
    spacing,
    step,
    shiftStep,
    snapPoints,
    snapTolerance,
    snapFrom,
    cursorVertical,
    cursorHorizontal,
    color,
    hoverColor,
    variant,
    gradient,
    hoverGradient,
    classNames,
    style,
    styles,
    unstyled,
    vars,
    mod,
    children,
    className,
    ...others
  } = props;
  const orientation = useSplitResizerOrientation.useSplitResizerOrientation(propOrientation ?? "vertical");
  const resolvedSize = useResponsiveValue.useResponsiveValue(size) ?? SplitResizer.defaultProps.size;
  const resolvedSpacing = useResponsiveValue.useResponsiveValue(spacing) ?? SplitResizer.defaultProps.spacing;
  const resolvedKnobSize = useResponsiveValue.useResponsiveValue(knobSize) ?? SplitResizer.defaultProps.knobSize;
  const [resizeObserverRef, containerRect] = hooks.useResizeObserver();
  const [containerSize, setContainerSize] = React.useState({
    width: 0,
    height: 0
  });
  React.useEffect(() => {
    if (containerRect.width > 0 || containerRect.height > 0) {
      setContainerSize({ width: containerRect.width, height: containerRect.height });
    }
  }, [containerRect.width, containerRect.height]);
  const mergedRef = hooks.useMergedRef(ref, resizeObserverRef);
  const getStyles = core.useStyles({
    name: "Split",
    props,
    classes: Split_module,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  const childrenCount = React.Children.count(children);
  const childRefs = React.useMemo(
    () => Array.from(
      { length: childrenCount },
      () => React.createRef()
    ),
    [childrenCount]
  );
  let clonedChildren;
  if (autoResizers) {
    const elementsWithResizers = [];
    let resizerIndex = 0;
    let paneIndex = 0;
    const paneRefs = [];
    React.Children.forEach(children, (child, index) => {
      if (React.isValidElement(child) && child.type === SplitPane.SplitPane) {
        const ref2 = childRefs[index];
        paneRefs.push(ref2);
        elementsWithResizers.push(
          React.cloneElement(child, {
            key: child.key ?? `pane-${paneIndex}`,
            ref: ref2
          })
        );
        paneIndex++;
      }
    });
    const finalElements = [];
    elementsWithResizers.forEach((pane, index) => {
      finalElements.push(pane);
      if (index < elementsWithResizers.length - 1) {
        const beforeRef = paneRefs[index];
        const afterRef = paneRefs[index + 1];
        finalElements.push(
          /* @__PURE__ */ React.createElement(
            SplitResizer.SplitResizer,
            {
              key: `auto-resizer-${resizerIndex++}`,
              __beforeRef: beforeRef,
              __afterRef: afterRef
            }
          )
        );
      }
    });
    clonedChildren = finalElements;
  } else {
    clonedChildren = React.Children.map(children, (child, index) => {
      if (React.isValidElement(child)) {
        if (child.type === SplitResizer.SplitResizer) {
          const beforeRef = childRefs[index - 1];
          const afterRef = childRefs[index + 1];
          return React.cloneElement(child, {
            __beforeRef: beforeRef,
            __afterRef: afterRef
          });
        } else if (child.type === SplitPane.SplitPane) {
          return React.cloneElement(child, {
            ref: childRefs[index]
          });
        }
        return child;
      }
      return child;
    }) ?? [];
  }
  return /* @__PURE__ */ React.createElement(
    Split_context.SplitContextProvider,
    {
      value: {
        orientation,
        size: resolvedSize,
        opacity,
        radius,
        color,
        hoverColor,
        knobSize: resolvedKnobSize,
        knobOpacity,
        knobRadius,
        knobColor,
        knobHoverColor,
        variant,
        withKnob,
        knobAlwaysOn,
        spacing: resolvedSpacing,
        step,
        shiftStep,
        snapPoints,
        snapTolerance,
        snapFrom,
        cursorVertical,
        cursorHorizontal,
        gradient,
        hoverGradient,
        containerSize
      }
    },
    /* @__PURE__ */ React.createElement(core.Box, { ref: mergedRef, mod: { orientation }, ...getStyles("root"), ...others }, clonedChildren)
  );
});
Split.classes = Split_module;
Split.displayName = "Split";
Split.Pane = SplitPane.SplitPane;
Split.Resizer = SplitResizer.SplitResizer;
Split.Dynamic = SplitDynamic.SplitDynamic;

exports.Split = Split;
//# sourceMappingURL=Split.cjs.map