fix: mouse status is now checked when entering document

src/components/SplitPane/hooks/callbacks/useHandleDragStart.ts

@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import { BeginDragCallback, ClientPosition } from '../effects/useDragState';
-import { ChildPane } from '../useSplitPaneResize';
-import { SplitPaneHooks, SplitType } from '../..';
+import { SplitPaneHooks } from '../..';
 import { useGetCurrentPaneSizes } from './useGetCurrentPaneSizes';
 
 /**
@@ -10,16 +9,12 @@ import { useGetCurrentPaneSizes } from './useGetCurrentPaneSizes';
 export function useHandleDragStart({
  isReversed,
  hooks,
- childPanes,
- split,
  beginDrag,
  setSizes,
  getCurrentPaneSizes,
 }: {
  isReversed: boolean;
- childPanes: Omit<ChildPane, 'size'>[];
  hooks?: SplitPaneHooks;
- split: SplitType;
  beginDrag: BeginDragCallback<any>;
  setSizes: React.Dispatch<React.SetStateAction<number[]>>;
  getCurrentPaneSizes: ReturnType<typeof useGetCurrentPaneSizes>;
@@ -31,6 +26,6 @@ export function useHandleDragStart({
  beginDrag(pos, { index: isReversed ? index - 1 : index });
  setSizes(clientSizes);
  },
- [beginDrag, childPanes, hooks, isReversed, split]
+ [beginDrag, getCurrentPaneSizes, hooks, isReversed, setSizes]
  );
 }

src/components/SplitPane/hooks/callbacks/useUpdateCollapsedSizes.ts

@@ -31,7 +31,6 @@ export function useUpdateCollapsedSizes({
  return movedSizes[idx]; // when collapsed store current size
  }
  if (!isCollapsed && size !== null) {
- console.log(`uncollapsing index ${idx} with size ${size}`);
  unCollapseSize({ idx, size }); // when un-collapsed clear size
  hooks?.onChange?.(sizes);
  return null;

src/components/SplitPane/hooks/effects/useDragState.ts

@@ -19,6 +19,7 @@ interface DragStateHandlers<T> {
  onMouseMove?: (event: ClientPosition) => void;
  onTouchMove?: (event: TouchEvent) => void;
  onMouseUp?: () => void;
+ onMouseEnter?: (event: MouseEvent) => void;
 }
 
 function useDragStateHandlers<T>(
@@ -55,7 +56,7 @@ function useDragStateHandlers<T>(
  return [dragState, onMouseUp];
  }, [current, dragging, onDragFinished]);
 
- const [onMouseMove, onTouchMove] = useMemo(() => {
+ const [onMouseMove, onTouchMove, onMouseEnter] = useMemo(() => {
  if (!dragging) {
  return [undefined, undefined];
  }
@@ -68,25 +69,36 @@ function useDragStateHandlers<T>(
  const onTouchMove = (event: TouchEvent): void => {
  onMouseMove(event.touches[0]);
  };
+ const onMouseEnter = (event: MouseEvent): void => {
+ const isPrimaryPressed = (event.buttons & 1) === 1;
+ if (!isPrimaryPressed) {
+ onMouseUp?.();
+ }
+ };
 
- return [onMouseMove, onTouchMove];
- }, [dragging, split]);
+ return [onMouseMove, onTouchMove, onMouseEnter];
+ }, [dragging, onMouseUp, split]);
 
- return { beginDrag, dragState, onMouseMove, onTouchMove, onMouseUp };
+ return { beginDrag, dragState, onMouseMove, onTouchMove, onMouseUp, onMouseEnter };
 }
 
 export function useDragState<T>(
  split: SplitType,
  onDragFinished: (dragState: DragState<T>) => void
 ): [DragState<T> | null, (pos: ClientPosition, extraState: T) => void] {
- const { beginDrag, dragState, onMouseMove, onTouchMove, onMouseUp } = useDragStateHandlers<T>(
- split,
- onDragFinished
- );
+ const {
+ beginDrag,
+ dragState,
+ onMouseMove,
+ onTouchMove,
+ onMouseUp,
+ onMouseEnter,
+ } = useDragStateHandlers<T>(split, onDragFinished);
 
  useEventListener('mousemove', onMouseMove);
  useEventListener('touchmove', onTouchMove);
  useEventListener('mouseup', onMouseUp);
+ useEventListener('mouseenter', onMouseEnter);
 
  return [dragState, beginDrag];
 }

src/components/SplitPane/hooks/useSplitPaneResize.ts

@@ -172,8 +172,6 @@ export function useSplitPaneResize(options: SplitPaneResizeOptions): SplitPaneRe
  setSizes,
  isReversed,
  hooks,
- split,
- childPanes,
  beginDrag,
  getCurrentPaneSizes,
  });