@gfazioli/mantine-split-pane 1.0.3 → 1.1.0

package/dist/esm/Resizer/SplitPaneResizer.mjs

@@ -1,6 +1,6 @@
 'use client';
-import { createVarsResolver, parseThemeColor, getSize, rgba, getRadius, getThemeColor, factory, useProps, useStyles, UnstyledButton } from '@mantine/core';
 import React, { useRef } from 'react';
+import { createVarsResolver, parseThemeColor, getSize, rgba, getRadius, getThemeColor, factory, useProps, useStyles, UnstyledButton } from '@mantine/core';
 import classes from './SplitPaneResizer.module.css.mjs';
 
 const varsResolver = createVarsResolver(
@@ -43,32 +43,17 @@ const varsResolver = createVarsResolver(
       root: {
         "--split-resizer-size": getSize(size, "split-resizer-size"),
         "--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-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"
@@ -96,192 +81,179 @@ 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) => {
+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")) {
       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;
+      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 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")) {
-        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
-      }
-    );
-  }
-);
+      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";