@gfazioli/mantine-split-pane 2.7.3 → 4.0.0

package/dist/cjs/Resizer/SplitResizer.cjs

@@ -3,6 +3,7 @@
 
 var React = require('react');
 var core = require('@mantine/core');
+var useResponsiveValue = require('../hooks/use-responsive-value.cjs');
 var useSplitResizerOrientation = require('../hooks/use-split-resizer-orientation.cjs');
 var Split_context = require('../Split.context.cjs');
 var SplitResizer_module = require('./SplitResizer.module.css.cjs');
@@ -104,9 +105,10 @@ const defaultProps = {
   cursorVertical: "col-resize",
   cursorHorizontal: "row-resize"
 };
-const SplitResizer = core.factory((_props, _) => {
+const SplitResizer = core.factory((_props) => {
   const ctx = Split_context.useSplitContext();
-  const props = core.useProps("SplitResizer", { ...defaultProps, ...ctx }, _props);
+  const { containerSize: _containerSize, ...ctxResizerProps } = ctx || {};
+  const props = core.useProps("SplitResizer", { ...defaultProps, ...ctxResizerProps }, _props);
   const {
     orientation: propOrientation,
     opacity,
@@ -144,11 +146,20 @@ const SplitResizer = core.factory((_props, _) => {
     mod,
     ...rest
   } = props;
-  const orientation = useSplitResizerOrientation.useSplitResizerOrientation(propOrientation);
+  const orientation = useSplitResizerOrientation.useSplitResizerOrientation(propOrientation ?? "vertical");
+  const resolvedSize = useResponsiveValue.useResponsiveValue(size) ?? defaultProps.size;
+  const resolvedSpacing = useResponsiveValue.useResponsiveValue(spacing) ?? defaultProps.spacing;
+  const resolvedKnobSize = useResponsiveValue.useResponsiveValue(knobSize) ?? defaultProps.knobSize;
+  const resolvedProps = {
+    ...props,
+    size: resolvedSize,
+    spacing: resolvedSpacing,
+    knobSize: resolvedKnobSize
+  };
   const getStyles = core.useStyles({
     name: "SplitResizer",
     classes: SplitResizer_module,
-    props,
+    props: resolvedProps,
     className,
     style,
     classNames,
@@ -159,12 +170,18 @@ const SplitResizer = core.factory((_props, _) => {
   });
   const containerRef = React.useRef(null);
   const processVerticalSize = (deltaX = 0) => {
-    const minBeforeWidth = beforeRef.current.getMinWidth();
-    const maxBeforeWidth = beforeRef.current.getMaxWidth();
-    const minAfterWidth = afterRef.current.getMinWidth();
-    const maxAfterWidth = afterRef.current.getMaxWidth();
+    if (!beforeRef?.current || !afterRef?.current) {
+      return;
+    }
+    const minBeforeWidth = beforeRef.current.getMinWidth?.();
+    const maxBeforeWidth = beforeRef.current.getMaxWidth?.();
+    const minAfterWidth = afterRef.current.getMinWidth?.();
+    const maxAfterWidth = afterRef.current.getMaxWidth?.();
     const beforePane = beforeRef.current.splitPane;
     const afterPane = afterRef.current.splitPane;
+    if (!beforePane || !afterPane) {
+      return;
+    }
     let beforeWidth = beforePane.getBoundingClientRect().width;
     let afterWidth = afterPane.getBoundingClientRect().width;
     const isBeforeWidthMaxExceeded = maxBeforeWidth && beforeWidth + deltaX > maxBeforeWidth;
@@ -184,8 +201,8 @@ const SplitResizer = core.factory((_props, _) => {
         width: afterWidth,
         height: afterPane.getBoundingClientRect().height
       };
-      beforeRef.current.onResizing?.(beforePaneSizes);
-      afterRef.current.onResizing?.(afterPaneSizes);
+      beforeRef?.current?.onResizing?.(beforePaneSizes);
+      afterRef?.current?.onResizing?.(afterPaneSizes);
       onResizing?.({
         beforePane: beforePaneSizes,
         afterPane: afterPaneSizes
@@ -231,12 +248,18 @@ const SplitResizer = core.factory((_props, _) => {
     setVerticalSize();
   };
   const processHorizontalSize = (deltaY = 0) => {
-    const minBeforeHeight = beforeRef.current.getMinHeight();
-    const maxBeforeHeight = beforeRef.current.getMaxHeight();
-    const minAfterHeight = afterRef.current.getMinHeight();
-    const maxAfterHeight = afterRef.current.getMaxHeight();
+    if (!beforeRef?.current || !afterRef?.current) {
+      return;
+    }
+    const minBeforeHeight = beforeRef.current.getMinHeight?.();
+    const maxBeforeHeight = beforeRef.current.getMaxHeight?.();
+    const minAfterHeight = afterRef.current.getMinHeight?.();
+    const maxAfterHeight = afterRef.current.getMaxHeight?.();
     const beforePane = beforeRef.current.splitPane;
     const afterPane = afterRef.current.splitPane;
+    if (!beforePane || !afterPane) {
+      return;
+    }
     let beforeHeight = beforePane.getBoundingClientRect().height;
     let afterHeight = afterPane.getBoundingClientRect().height;
     const isBeforeHeightMaxExceeded = maxBeforeHeight && beforeHeight + deltaY > maxBeforeHeight;
@@ -260,8 +283,8 @@ const SplitResizer = core.factory((_props, _) => {
         beforePane: beforePaneSizes,
         afterPane: afterPaneSizes
       });
-      beforeRef.current.onResizing?.(beforePaneSizes);
-      afterRef.current.onResizing?.(afterPaneSizes);
+      beforeRef?.current?.onResizing?.(beforePaneSizes);
+      afterRef?.current?.onResizing?.(afterPaneSizes);
       beforePane.style.height = beforeHeightString;
       afterPane.style.height = afterHeightString;
     }
@@ -316,13 +339,13 @@ const SplitResizer = core.factory((_props, _) => {
       document.addEventListener("touchend", handleTouchEnd);
     }
     onResizeStart?.();
-    beforeRef.current.onResizeStart?.();
-    afterRef.current.onResizeStart?.();
-    document.body.style.cursor = orientation === "vertical" ? cursorVertical : cursorHorizontal;
+    beforeRef?.current?.onResizeStart?.();
+    afterRef?.current?.onResizeStart?.();
+    document.body.style.cursor = (orientation === "vertical" ? cursorVertical : cursorHorizontal) ?? "";
   };
   const handleMove = (event) => {
-    if (!beforeRef.current || !afterRef.current) {
-      throw new Error("beforeRef or afterRef is not defined");
+    if (!beforeRef?.current || !afterRef?.current) {
+      return;
     }
     event.preventDefault();
     event.stopPropagation();
@@ -341,8 +364,8 @@ const SplitResizer = core.factory((_props, _) => {
     }
   };
   const handleMouseUp = () => {
-    if (!beforeRef.current || !afterRef.current) {
-      throw new Error("beforeRef or afterRef is not defined");
+    if (!beforeRef?.current || !afterRef?.current) {
+      return;
     }
     document.body.style.userSelect = "initial";
     document.body.style.webkitUserSelect = "initial";
@@ -363,12 +386,12 @@ const SplitResizer = core.factory((_props, _) => {
       beforePane: beforePaneSizes,
       afterPane: afterPaneSizes
     });
-    beforeRef.current.onResizeEnd?.(beforePaneSizes);
-    afterRef.current.onResizeEnd?.(afterPaneSizes);
+    beforeRef?.current?.onResizeEnd?.(beforePaneSizes);
+    afterRef?.current?.onResizeEnd?.(afterPaneSizes);
   };
   const handleTouchEnd = () => {
-    if (!beforeRef.current || !afterRef.current) {
-      throw new Error("beforeRef or afterRef is not defined");
+    if (!beforeRef?.current || !afterRef?.current) {
+      return;
     }
     document.removeEventListener("touchmove", handleMove);
     document.removeEventListener("touchend", handleTouchEnd);
@@ -387,8 +410,8 @@ const SplitResizer = core.factory((_props, _) => {
       beforePane: beforePaneSizes,
       afterPane: afterPaneSizes
     });
-    beforeRef.current.onResizeEnd?.(beforePaneSizes);
-    afterRef.current.onResizeEnd?.(afterPaneSizes);
+    beforeRef?.current?.onResizeEnd?.(beforePaneSizes);
+    afterRef?.current?.onResizeEnd?.(afterPaneSizes);
   };
   const handleKeyUp = (event) => {
     if (containerRef.current !== document.activeElement) {
@@ -397,7 +420,7 @@ const SplitResizer = core.factory((_props, _) => {
     const code = event.nativeEvent.code;
     const arrowLeftRight = code === "ArrowRight" || code === "ArrowLeft";
     const arrowUpDown = code === "ArrowUp" || code === "ArrowDown";
-    const delta = event.shiftKey ? shiftStep : step;
+    const delta = (event.shiftKey ? shiftStep : step) ?? 8;
     if (orientation === "vertical" && arrowLeftRight) {
       event.preventDefault();
       event.stopPropagation();
@@ -415,14 +438,14 @@ const SplitResizer = core.factory((_props, _) => {
     if (code === "Escape") {
       event.preventDefault();
       event.stopPropagation();
-      containerRef.current.blur();
+      containerRef.current?.blur();
     }
   };
   const handleDoubleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    beforeRef.current.resetInitialSize(e);
-    afterRef.current.resetInitialSize(e);
+    beforeRef?.current?.resetInitialSize?.(e);
+    afterRef?.current?.resetInitialSize?.(e);
     onDoubleClick?.(e);
   };
   return /* @__PURE__ */ React.createElement(