feat: add backwards compatible deprecated handlers

- Add onMouseDown, onTouchStart, onTouchEnd back to DividerProps as deprecated
- Create wrapper handlers that delegate to onPointerDown
- Custom dividers using old props will continue to work
- Bump version to 3.1.0 (minor, not breaking)

Author: tomkp

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-split-pane",
-  "version": "4.0.0",
+  "version": "3.1.0",
   "description": "React split-pane component with hooks and TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",

package.json

@@ -297,6 +297,45 @@ export function SplitPane(props: SplitPaneProps) {
     onResizeEnd,
   });
 
+  // Deprecated handlers for backwards compatibility
+  // These delegate to the pointer handler so custom dividers using old props still work
+  const createMouseDownHandler = useCallback(
+    (index: number) => (e: React.MouseEvent) => {
+      // Create a synthetic pointer event from the mouse event
+      const pointerEvent = {
+        ...e,
+        pointerId: 1,
+        pointerType: 'mouse',
+        nativeEvent: e.nativeEvent,
+      } as unknown as React.PointerEvent;
+      handlePointerDown(index)(pointerEvent);
+    },
+    [handlePointerDown]
+  );
+
+  const createTouchStartHandler = useCallback(
+    (index: number) => (e: React.TouchEvent) => {
+      const touch = e.touches[0];
+      if (!touch) return;
+      // Create a synthetic pointer event from the touch event
+      const pointerEvent = {
+        ...e,
+        clientX: touch.clientX,
+        clientY: touch.clientY,
+        pointerId: touch.identifier,
+        pointerType: 'touch',
+        nativeEvent: e.nativeEvent,
+      } as unknown as React.PointerEvent;
+      handlePointerDown(index)(pointerEvent);
+    },
+    [handlePointerDown]
+  );
+
+  // Touch end is now a no-op since pointer events handle cleanup
+  const handleTouchEnd = useCallback(() => {
+    // No-op - pointer events handle the end of drag
+  }, []);
+
   // Container styles
   const containerStyle: CSSProperties = {
     display: 'flex',
@@ -349,6 +388,9 @@ export function SplitPane(props: SplitPaneProps) {
             isDragging={isDragging}
             disabled={!resizable}
             onPointerDown={handlePointerDown(index)}
+            onMouseDown={createMouseDownHandler(index)}
+            onTouchStart={createTouchStartHandler(index)}
+            onTouchEnd={handleTouchEnd}
             onKeyDown={handleKeyDown(index)}
             className={dividerClassName}
             style={dividerStyle}

src/components/SplitPane.tsx

@@ -96,6 +96,24 @@ export interface DividerProps {
   /** Pointer down handler (handles mouse, touch, and pen input) */
   onPointerDown: (e: React.PointerEvent) => void;
 
+  /**
+   * Mouse down handler
+   * @deprecated Use onPointerDown instead. This is provided for backwards compatibility.
+   */
+  onMouseDown?: (e: React.MouseEvent) => void;
+
+  /**
+   * Touch start handler
+   * @deprecated Use onPointerDown instead. This is provided for backwards compatibility.
+   */
+  onTouchStart?: (e: React.TouchEvent) => void;
+
+  /**
+   * Touch end handler
+   * @deprecated Use onPointerDown instead. This is provided for backwards compatibility.
+   */
+  onTouchEnd?: (e: React.TouchEvent) => void;
+
   /** Keyboard handler */
   onKeyDown: (e: React.KeyboardEvent) => void;