@gfazioli/mantine-split-pane 0.3.7 → 1.0.1

package/dist/esm/Resizer/SplitPaneResizer.mjs

@@ -42,17 +42,33 @@ const varsResolver = createVarsResolver(
     return {
       root: {
         "--split-resizer-size": getSize(size, "split-resizer-size"),
-        "--split-resizer-color-light": rgba(colorLightParsed.value, Number(opacity)),
-        "--split-resizer-color-dark": rgba(colorDarkParsed.value, Number(opacity)),
-        "--split-resizer-hover-color-light": rgba(hoverColorLightParsed.value, 1),
+        "--split-resizer-color": rgba(colorLightParsed.value, Number(opacity)),
+        "--split-resizer-color-light": rgba(
+          colorLightParsed.value,
+          Number(opacity)
+        ),
+        "--split-resizer-color-dark": rgba(
+          colorDarkParsed.value,
+          Number(opacity)
+        ),
+        "--split-resizer-hover-color-light": rgba(
+          hoverColorLightParsed.value,
+          1
+        ),
         "--split-resizer-hover-color-dark": rgba(hoverColorDarkParsed.value, 1),
         "--split-resizer-radius": getRadius(radius),
-        "--split-resizer-knob-size": getSize(knobSize, "split-resizer-knob-size"),
+        "--split-resizer-knob-size": getSize(
+          knobSize,
+          "split-resizer-knob-size"
+        ),
         "--split-resizer-knob-opacity": withKnob && knobAlwaysOn && !knobVariant ? knobOpacity : "0",
         "--split-resizer-knob-hover-opacity": withKnob || knobVariant ? "1" : "0",
         "--split-resizer-knob-radius": getRadius(knobRadius),
         "--split-resizer-knob-color": getThemeColor(knobColor, theme),
-        "--split-resizer-knob-hover-color": getThemeColor(knobHoverColor, theme),
+        "--split-resizer-knob-hover-color": getThemeColor(
+          knobHoverColor,
+          theme
+        ),
         "--split-resizer-spacing": getSize(spacing, "split-resizer-spacing"),
         "--split-resizer-cursor-vertical": cursorVertical || "col-resize",
         "--split-resizer-cursor-horizontal": cursorHorizontal || "row-resize"
@@ -80,178 +96,192 @@ const defaultProps = {
   cursorVertical: "col-resize",
   cursorHorizontal: "row-resize"
 };
-const SplitPaneResizer = factory((_props, ref) => {
-  const props = useProps("Resizer", defaultProps, _props);
-  const {
-    size,
-    opacity,
-    radius,
-    color,
-    hoverColor,
-    knobSize,
-    knobOpacity,
-    knobRadius,
-    knobColor,
-    knobHoverColor,
-    minWidth,
-    minHeight,
-    maxWidth,
-    maxHeight,
-    orientation,
-    onResizeStart,
-    onResizing,
-    onResizeEnd,
-    paneRef,
-    variant,
-    withKnob,
-    knobAlwaysOn,
-    spacing,
-    step,
-    shiftStep,
-    cursorVertical,
-    cursorHorizontal,
-    className,
-    style,
-    classNames,
-    styles,
-    unstyled,
-    vars,
-    mod,
-    ...others
-  } = props;
-  const getStyles = useStyles({
-    name: "SplitPaneResizer",
-    classes,
-    props,
-    className,
-    style,
-    classNames,
-    styles,
-    unstyled,
-    vars,
-    varsResolver
-  });
-  const containerRef = useRef(null);
-  const handleStart = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    document.body.style.userSelect = "none";
-    document.body.style.webkitUserSelect = "none";
-    if (event.type === "mousedown") {
-      document.addEventListener("mousemove", handleMove);
-      document.addEventListener("mouseup", handleMouseUp);
-    }
-    if (event.type === "touchstart") {
-      document.addEventListener("touchmove", handleMove);
-      document.addEventListener("touchend", handleTouchEnd);
-    }
-    onResizeStart?.();
-    document.body.style.cursor = "col-resize";
-  };
-  const handleMove = (event) => {
-    if (!paneRef.current)
-      return;
-    event.preventDefault();
-    event.stopPropagation();
-    const computedStyle = window.getComputedStyle(containerRef.current);
-    const clientX = "clientX" in event ? event.clientX : event.touches[0].clientX;
-    const clientY = "clientY" in event ? event.clientY : event.touches[0].clientY;
-    if (orientation === "vertical") {
-      const margin = parseFloat(computedStyle.getPropertyValue("margin-left")) + 1;
-      const delta = clientX - paneRef.current.getBoundingClientRect().right - margin;
-      const width = paneRef.current.getBoundingClientRect().width + delta;
-      const widthString = `${width}px`;
-      if (minWidth && width < minWidth)
-        return;
-      if (maxWidth && width > maxWidth)
-        return;
-      onResizing?.({ width: widthString, height: paneRef.current.style.height });
-      paneRef.current.style.width = widthString;
-    } else {
-      const margin = parseFloat(computedStyle.getPropertyValue("margin-top")) + 1;
-      const delta = clientY - paneRef.current.getBoundingClientRect().bottom - margin;
-      const height = paneRef.current.getBoundingClientRect().height + delta;
-      const heightString = `${height}px`;
-      if (minHeight && height < minHeight)
-        return;
-      if (maxHeight && height > maxHeight)
-        return;
-      onResizing?.({ width: paneRef.current.style.width, height: heightString });
-      paneRef.current.style.height = heightString;
-    }
-  };
-  const handleMouseUp = () => {
-    if (!paneRef.current)
-      return;
-    document.body.style.userSelect = "initial";
-    document.body.style.webkitUserSelect = "initial";
-    document.removeEventListener("mousemove", handleMove);
-    document.removeEventListener("mouseup", handleMouseUp);
-    document.body.style.cursor = "initial";
-    const { width, height } = paneRef.current.style || {};
-    onResizeEnd?.({ width, height });
-  };
-  const handleTouchEnd = () => {
-    if (!paneRef.current)
-      return;
-    document.removeEventListener("touchmove", handleMove);
-    document.removeEventListener("touchend", handleTouchEnd);
-    document.body.style.cursor = "initial";
-    const { width, height } = paneRef.current.style || {};
-    onResizeEnd?.({ width, height });
-  };
-  const handleKeyUp = (event) => {
-    if (containerRef.current !== document.activeElement) {
-      return;
-    }
-    const delta = event.shiftKey ? shiftStep : step;
-    if (orientation === "vertical" && (event.nativeEvent.code === "ArrowRight" || event.nativeEvent.code === "ArrowLeft")) {
+const SplitPaneResizer = factory(
+  (_props, ref) => {
+    const props = useProps("Resizer", defaultProps, _props);
+    const {
+      size,
+      opacity,
+      radius,
+      color,
+      hoverColor,
+      knobSize,
+      knobOpacity,
+      knobRadius,
+      knobColor,
+      knobHoverColor,
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      orientation,
+      onResizeStart,
+      onResizing,
+      onResizeEnd,
+      paneRef,
+      variant,
+      withKnob,
+      knobAlwaysOn,
+      spacing,
+      step,
+      shiftStep,
+      cursorVertical,
+      cursorHorizontal,
+      className,
+      style,
+      classNames,
+      styles,
+      unstyled,
+      vars,
+      mod,
+      ...others
+    } = props;
+    const getStyles = useStyles({
+      name: "SplitPaneResizer",
+      classes,
+      props,
+      className,
+      style,
+      classNames,
+      styles,
+      unstyled,
+      vars,
+      varsResolver
+    });
+    const containerRef = useRef(null);
+    const handleStart = (event) => {
       event.preventDefault();
       event.stopPropagation();
-      const deltaSign = event.nativeEvent.code === "ArrowRight" ? 1 : -1;
-      const width = paneRef.current.getBoundingClientRect().width + delta * deltaSign;
-      const widthString = `${width}px`;
-      if (minWidth && width < minWidth)
-        return;
-      if (maxWidth && width > maxWidth)
+      document.body.style.userSelect = "none";
+      document.body.style.webkitUserSelect = "none";
+      if (event.type === "mousedown") {
+        document.addEventListener("mousemove", handleMove);
+        document.addEventListener("mouseup", handleMouseUp);
+      }
+      if (event.type === "touchstart") {
+        document.addEventListener("touchmove", handleMove);
+        document.addEventListener("touchend", handleTouchEnd);
+      }
+      onResizeStart?.();
+      document.body.style.cursor = "col-resize";
+    };
+    const handleMove = (event) => {
+      if (!paneRef.current)
         return;
-      onResizing?.({ width: widthString, height: paneRef.current.style.height });
-      paneRef.current.style.width = widthString;
-    }
-    if (orientation === "horizontal" && (event.nativeEvent.code === "ArrowUp" || event.nativeEvent.code === "ArrowDown")) {
       event.preventDefault();
       event.stopPropagation();
-      const deltaSign = event.nativeEvent.code === "ArrowDown" ? 1 : -1;
-      const height = paneRef.current.getBoundingClientRect().height + delta * deltaSign;
-      const heightString = `${height}px`;
-      if (minHeight && height < minHeight)
+      const computedStyle = window.getComputedStyle(containerRef.current);
+      const clientX = "clientX" in event ? event.clientX : event.touches[0].clientX;
+      const clientY = "clientY" in event ? event.clientY : event.touches[0].clientY;
+      if (orientation === "vertical") {
+        const margin = parseFloat(computedStyle.getPropertyValue("margin-left")) + 1;
+        const delta = clientX - paneRef.current.getBoundingClientRect().right - margin;
+        const width = paneRef.current.getBoundingClientRect().width + delta;
+        const widthString = `${width}px`;
+        if (minWidth && width < minWidth)
+          return;
+        if (maxWidth && width > maxWidth)
+          return;
+        onResizing?.({
+          width: widthString,
+          height: paneRef.current.style.height
+        });
+        paneRef.current.style.width = widthString;
+      } else {
+        const margin = parseFloat(computedStyle.getPropertyValue("margin-top")) + 1;
+        const delta = clientY - paneRef.current.getBoundingClientRect().bottom - margin;
+        const height = paneRef.current.getBoundingClientRect().height + delta;
+        const heightString = `${height}px`;
+        if (minHeight && height < minHeight)
+          return;
+        if (maxHeight && height > maxHeight)
+          return;
+        onResizing?.({
+          width: paneRef.current.style.width,
+          height: heightString
+        });
+        paneRef.current.style.height = heightString;
+      }
+    };
+    const handleMouseUp = () => {
+      if (!paneRef.current)
         return;
-      if (maxHeight && height > maxHeight)
+      document.body.style.userSelect = "initial";
+      document.body.style.webkitUserSelect = "initial";
+      document.removeEventListener("mousemove", handleMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "initial";
+      const { width, height } = paneRef.current.style || {};
+      onResizeEnd?.({ width, height });
+    };
+    const handleTouchEnd = () => {
+      if (!paneRef.current)
         return;
-      onResizing?.({ width: paneRef.current.style.width, height: heightString });
-      paneRef.current.style.height = heightString;
-    }
-    if (event.nativeEvent.code === "Escape") {
-      event.preventDefault();
-      event.stopPropagation();
-      containerRef.current.blur();
-    }
-  };
-  return /* @__PURE__ */ React.createElement(
-    UnstyledButton,
-    {
-      onDoubleClick: props?.onDoubleClick,
-      ref: containerRef,
-      mod: { orientation },
-      onMouseDown: handleStart,
-      onKeyDown: handleKeyUp,
-      onTouchStart: handleStart,
-      "aria-label": "Resize",
-      ...getStyles("root", { variant }),
-      ...others
-    }
-  );
-});
+      document.removeEventListener("touchmove", handleMove);
+      document.removeEventListener("touchend", handleTouchEnd);
+      document.body.style.cursor = "initial";
+      const { width, height } = paneRef.current.style || {};
+      onResizeEnd?.({ width, height });
+    };
+    const handleKeyUp = (event) => {
+      if (containerRef.current !== document.activeElement) {
+        return;
+      }
+      const delta = event.shiftKey ? shiftStep : step;
+      if (orientation === "vertical" && (event.nativeEvent.code === "ArrowRight" || event.nativeEvent.code === "ArrowLeft")) {
+        event.preventDefault();
+        event.stopPropagation();
+        const deltaSign = event.nativeEvent.code === "ArrowRight" ? 1 : -1;
+        const width = paneRef.current.getBoundingClientRect().width + delta * deltaSign;
+        const widthString = `${width}px`;
+        if (minWidth && width < minWidth)
+          return;
+        if (maxWidth && width > maxWidth)
+          return;
+        onResizing?.({
+          width: widthString,
+          height: paneRef.current.style.height
+        });
+        paneRef.current.style.width = widthString;
+      }
+      if (orientation === "horizontal" && (event.nativeEvent.code === "ArrowUp" || event.nativeEvent.code === "ArrowDown")) {
+        event.preventDefault();
+        event.stopPropagation();
+        const deltaSign = event.nativeEvent.code === "ArrowDown" ? 1 : -1;
+        const height = paneRef.current.getBoundingClientRect().height + delta * deltaSign;
+        const heightString = `${height}px`;
+        if (minHeight && height < minHeight)
+          return;
+        if (maxHeight && height > maxHeight)
+          return;
+        onResizing?.({
+          width: paneRef.current.style.width,
+          height: heightString
+        });
+        paneRef.current.style.height = heightString;
+      }
+      if (event.nativeEvent.code === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        containerRef.current.blur();
+      }
+    };
+    return /* @__PURE__ */ React.createElement(
+      UnstyledButton,
+      {
+        onDoubleClick: props?.onDoubleClick,
+        ref: containerRef,
+        mod: { orientation },
+        onMouseDown: handleStart,
+        onKeyDown: handleKeyUp,
+        onTouchStart: handleStart,
+        "aria-label": "Resize",
+        ...getStyles("root", { variant }),
+        ...others
+      }
+    );
+  }
+);
 SplitPaneResizer.classes = classes;
 SplitPaneResizer.displayName = "SplitPaneResizer";