react-resizable-panels 2.1.5 → 2.1.7

package/src/PanelGroupContext.ts

@@ -1,42 +0,0 @@
-import { PanelConstraints, PanelData } from "./Panel";
-import { CSSProperties, createContext } from "./vendor/react";
-
-// The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
-export type ResizeEvent = KeyboardEvent | PointerEvent | MouseEvent;
-export type ResizeHandler = (event: ResizeEvent) => void;
-
-export type DragState = {
-  dragHandleId: string;
-  dragHandleRect: DOMRect;
-  initialCursorPosition: number;
-  initialLayout: number[];
-};
-
-export type TPanelGroupContext = {
-  collapsePanel: (panelData: PanelData) => void;
-  direction: "horizontal" | "vertical";
-  dragState: DragState | null;
-  expandPanel: (panelData: PanelData, minSizeOverride?: number) => void;
-  getPanelSize: (panelData: PanelData) => number;
-  getPanelStyle: (
-    panelData: PanelData,
-    defaultSize: number | undefined
-  ) => CSSProperties;
-  groupId: string;
-  isPanelCollapsed: (panelData: PanelData) => boolean;
-  isPanelExpanded: (panelData: PanelData) => boolean;
-  reevaluatePanelConstraints: (
-    panelData: PanelData,
-    prevConstraints: PanelConstraints
-  ) => void;
-  registerPanel: (panelData: PanelData) => void;
-  registerResizeHandle: (dragHandleId: string) => ResizeHandler;
-  resizePanel: (panelData: PanelData, size: number) => void;
-  startDragging: (dragHandleId: string, event: ResizeEvent) => void;
-  stopDragging: () => void;
-  unregisterPanel: (panelData: PanelData) => void;
-  panelGroupElement: ParentNode | null;
-};
-export const PanelGroupContext = createContext<TPanelGroupContext | null>(null);
-
-PanelGroupContext.displayName = "PanelGroupContext";

package/src/PanelResizeHandle.test.tsx

@@ -1,367 +0,0 @@
-import { Root, createRoot } from "react-dom/client";
-import { act } from "react-dom/test-utils";
-import {
-  Panel,
-  PanelGroup,
-  PanelResizeHandle,
-  type PanelResizeHandleProps,
-} from ".";
-import { assert } from "./utils/assert";
-import * as cursorUtils from "./utils/cursor";
-import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
-import {
-  dispatchPointerEvent,
-  mockBoundingClientRect,
-  verifyAttribute,
-} from "./utils/test-utils";
-
-jest.mock("./utils/cursor", () => ({
-  getCursorStyle: jest.fn(),
-  resetGlobalCursorStyle: jest.fn(),
-  setGlobalCursorStyle: jest.fn(),
-}));
-
-describe("PanelResizeHandle", () => {
-  let expectedWarnings: string[] = [];
-  let root: Root;
-  let container: HTMLElement;
-
-  beforeEach(() => {
-    // @ts-expect-error
-    global.IS_REACT_ACT_ENVIRONMENT = true;
-    container = document.createElement("div");
-    document.body.appendChild(container);
-
-    expectedWarnings = [];
-    root = createRoot(container);
-
-    jest.spyOn(console, "warn").mockImplementation((actualMessage: string) => {
-      const match = expectedWarnings.findIndex((expectedMessage) => {
-        return actualMessage.includes(expectedMessage);
-      });
-
-      if (match >= 0) {
-        expectedWarnings.splice(match, 1);
-        return;
-      }
-
-      throw Error(`Unexpected warning: ${actualMessage}`);
-    });
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    jest.resetModules();
-
-    act(() => {
-      root.unmount();
-    });
-
-    expect(expectedWarnings).toHaveLength(0);
-  });
-
-  it("should support ...rest attributes", () => {
-    act(() => {
-      root.render(
-        <PanelGroup direction="horizontal">
-          <Panel />
-          <PanelResizeHandle
-            data-test-name="foo"
-            id="handle"
-            tabIndex={123}
-            title="bar"
-          />
-          <Panel />
-        </PanelGroup>
-      );
-    });
-
-    const element = getResizeHandleElement("handle", container);
-    assert(element, "");
-    expect(element.tabIndex).toBe(123);
-    expect(element.getAttribute("data-test-name")).toBe("foo");
-    expect(element.title).toBe("bar");
-  });
-
-  function setupMockedGroup({
-    leftProps = {},
-    rightProps = {},
-  }: {
-    leftProps?: Partial<PanelResizeHandleProps>;
-    rightProps?: Partial<PanelResizeHandleProps>;
-  } = {}) {
-    act(() => {
-      root.render(
-        <PanelGroup direction="horizontal" id="test-group">
-          <Panel />
-          <PanelResizeHandle id="handle-left" tabIndex={1} {...leftProps} />
-          <Panel />
-          <PanelResizeHandle id="handle-right" tabIndex={2} {...rightProps} />
-          <Panel />
-        </PanelGroup>
-      );
-    });
-
-    const leftElement = getResizeHandleElement("handle-left", container);
-    const rightElement = getResizeHandleElement("handle-right", container);
-
-    assert(leftElement, "");
-    assert(rightElement, "");
-
-    // JSDom doesn't properly handle bounding rects
-    mockBoundingClientRect(leftElement, {
-      x: 50,
-      y: 0,
-      height: 50,
-      width: 2,
-    });
-    mockBoundingClientRect(rightElement, {
-      x: 100,
-      y: 0,
-      height: 50,
-      width: 2,
-    });
-
-    return {
-      leftElement,
-      rightElement,
-    };
-  }
-
-  describe("callbacks", () => {
-    describe("onDragging", () => {
-      it("should fire when dragging starts/stops", () => {
-        const onDragging = jest.fn();
-
-        const { leftElement } = setupMockedGroup({
-          leftProps: { onDragging },
-        });
-
-        act(() => {
-          dispatchPointerEvent("pointermove", leftElement);
-        });
-        expect(onDragging).not.toHaveBeenCalled();
-
-        act(() => {
-          dispatchPointerEvent("pointerdown", leftElement);
-        });
-        expect(onDragging).toHaveBeenCalledTimes(1);
-        expect(onDragging).toHaveBeenCalledWith(true);
-
-        act(() => {
-          dispatchPointerEvent("pointerup", leftElement);
-        });
-        expect(onDragging).toHaveBeenCalledTimes(2);
-        expect(onDragging).toHaveBeenCalledWith(false);
-      });
-
-      it("should only fire for the handle that has been dragged", () => {
-        const onDraggingLeft = jest.fn();
-        const onDraggingRight = jest.fn();
-
-        const { leftElement } = setupMockedGroup({
-          leftProps: { onDragging: onDraggingLeft },
-          rightProps: { onDragging: onDraggingRight },
-        });
-
-        act(() => {
-          dispatchPointerEvent("pointermove", leftElement);
-        });
-        expect(onDraggingLeft).not.toHaveBeenCalled();
-        expect(onDraggingRight).not.toHaveBeenCalled();
-
-        act(() => {
-          dispatchPointerEvent("pointerdown", leftElement);
-        });
-        expect(onDraggingLeft).toHaveBeenCalledTimes(1);
-        expect(onDraggingLeft).toHaveBeenCalledWith(true);
-        expect(onDraggingRight).not.toHaveBeenCalled();
-
-        act(() => {
-          dispatchPointerEvent("pointerup", leftElement);
-        });
-        expect(onDraggingLeft).toHaveBeenCalledTimes(2);
-        expect(onDraggingLeft).toHaveBeenCalledWith(false);
-        expect(onDraggingRight).not.toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe("data attributes", () => {
-    it("should initialize with the correct props based attributes", () => {
-      const { leftElement, rightElement } = setupMockedGroup();
-
-      verifyAttribute(leftElement, "data-panel-group-id", "test-group");
-      verifyAttribute(leftElement, "data-resize-handle", "");
-      verifyAttribute(leftElement, "data-panel-group-direction", "horizontal");
-      verifyAttribute(leftElement, "data-panel-resize-handle-enabled", "true");
-      verifyAttribute(
-        leftElement,
-        "data-panel-resize-handle-id",
-        "handle-left"
-      );
-
-      verifyAttribute(rightElement, "data-panel-group-id", "test-group");
-      verifyAttribute(rightElement, "data-resize-handle", "");
-      verifyAttribute(rightElement, "data-panel-group-direction", "horizontal");
-      verifyAttribute(rightElement, "data-panel-resize-handle-enabled", "true");
-      verifyAttribute(
-        rightElement,
-        "data-panel-resize-handle-id",
-        "handle-right"
-      );
-    });
-
-    it("should update data-resize-handle-active and data-resize-handle-state when dragging starts/stops", () => {
-      const { leftElement, rightElement } = setupMockedGroup();
-      verifyAttribute(leftElement, "data-resize-handle-active", null);
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
-      verifyAttribute(leftElement, "data-resize-handle-state", "inactive");
-      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
-
-      act(() => {
-        dispatchPointerEvent("pointermove", leftElement);
-      });
-      verifyAttribute(leftElement, "data-resize-handle-active", null);
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
-      verifyAttribute(leftElement, "data-resize-handle-state", "hover");
-      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
-
-      act(() => {
-        dispatchPointerEvent("pointerdown", leftElement);
-      });
-      verifyAttribute(leftElement, "data-resize-handle-active", "pointer");
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
-      verifyAttribute(leftElement, "data-resize-handle-state", "drag");
-      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
-
-      act(() => {
-        dispatchPointerEvent("pointermove", leftElement);
-      });
-      verifyAttribute(leftElement, "data-resize-handle-active", "pointer");
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
-      verifyAttribute(leftElement, "data-resize-handle-state", "drag");
-      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
-
-      act(() => {
-        dispatchPointerEvent("pointerup", leftElement);
-      });
-      verifyAttribute(leftElement, "data-resize-handle-active", null);
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
-      verifyAttribute(leftElement, "data-resize-handle-state", "hover");
-      verifyAttribute(rightElement, "data-resize-handle-state", "inactive");
-
-      act(() => {
-        dispatchPointerEvent("pointermove", rightElement);
-      });
-      verifyAttribute(leftElement, "data-resize-handle-active", null);
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
-      verifyAttribute(leftElement, "data-resize-handle-state", "inactive");
-      verifyAttribute(rightElement, "data-resize-handle-state", "hover");
-    });
-
-    it("should update data-resize-handle-active when focused", () => {
-      const { leftElement, rightElement } = setupMockedGroup();
-      verifyAttribute(leftElement, "data-resize-handle-active", null);
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
-
-      act(() => {
-        leftElement.focus();
-      });
-      expect(document.activeElement).toBe(leftElement);
-      verifyAttribute(leftElement, "data-resize-handle-active", "keyboard");
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
-
-      act(() => {
-        leftElement.blur();
-      });
-      expect(document.activeElement).not.toBe(leftElement);
-      verifyAttribute(leftElement, "data-resize-handle-active", null);
-      verifyAttribute(rightElement, "data-resize-handle-active", null);
-    });
-  });
-
-  describe("a11y", () => {
-    it("should pass explicit id prop to DOM", () => {
-      act(() => {
-        root.render(
-          <PanelGroup direction="horizontal">
-            <Panel />
-            <PanelResizeHandle id="explicit-id" />
-            <Panel />
-          </PanelGroup>
-        );
-      });
-
-      const element = container.querySelector("[data-resize-handle]");
-
-      expect(element).not.toBeNull();
-      expect(element?.getAttribute("id")).toBe("explicit-id");
-    });
-
-    it("should not pass auto-generated id prop to DOM", () => {
-      act(() => {
-        root.render(
-          <PanelGroup direction="horizontal">
-            <Panel />
-            <PanelResizeHandle />
-            <Panel />
-          </PanelGroup>
-        );
-      });
-
-      const element = container.querySelector("[data-resize-handle]");
-
-      expect(element).not.toBeNull();
-      expect(element?.getAttribute("id")).toBeNull();
-    });
-  });
-
-  it("resets the global cursor style on unmount", () => {
-    const onDraggingLeft = jest.fn();
-
-    const { leftElement } = setupMockedGroup({
-      leftProps: { onDragging: onDraggingLeft },
-      rightProps: {},
-    });
-
-    act(() => {
-      dispatchPointerEvent("pointermove", leftElement);
-    });
-
-    act(() => {
-      dispatchPointerEvent("pointerdown", leftElement);
-    });
-    expect(onDraggingLeft).toHaveBeenCalledTimes(1);
-    expect(onDraggingLeft).toHaveBeenCalledWith(true);
-
-    expect(cursorUtils.resetGlobalCursorStyle).not.toHaveBeenCalled();
-    expect(cursorUtils.setGlobalCursorStyle).toHaveBeenCalled();
-
-    onDraggingLeft.mockReset();
-
-    act(() => {
-      dispatchPointerEvent("pointermove", leftElement);
-    });
-    expect(onDraggingLeft).not.toHaveBeenCalled();
-
-    act(() => {
-      dispatchPointerEvent("pointerup", leftElement);
-    });
-    expect(onDraggingLeft).toHaveBeenCalledTimes(1);
-    expect(onDraggingLeft).toHaveBeenCalledWith(false);
-
-    onDraggingLeft.mockReset();
-
-    act(() => {
-      dispatchPointerEvent("pointermove", leftElement);
-    });
-    expect(onDraggingLeft).not.toHaveBeenCalled();
-
-    act(() => {
-      root.unmount();
-    });
-
-    expect(cursorUtils.resetGlobalCursorStyle).toHaveBeenCalled();
-  });
-});

package/src/PanelResizeHandle.ts

@@ -1,246 +0,0 @@
-import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
-import useUniqueId from "./hooks/useUniqueId";
-import { useWindowSplitterResizeHandlerBehavior } from "./hooks/useWindowSplitterBehavior";
-import {
-  PanelGroupContext,
-  ResizeEvent,
-  ResizeHandler,
-} from "./PanelGroupContext";
-import {
-  PointerHitAreaMargins,
-  registerResizeHandle,
-  ResizeHandlerAction,
-} from "./PanelResizeHandleRegistry";
-import { assert } from "./utils/assert";
-import {
-  createElement,
-  CSSProperties,
-  HTMLAttributes,
-  PropsWithChildren,
-  ReactElement,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "./vendor/react";
-
-export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
-export type ResizeHandlerState = "drag" | "hover" | "inactive";
-
-export type PanelResizeHandleProps = Omit<
-  HTMLAttributes<keyof HTMLElementTagNameMap>,
-  "id" | "onBlur" | "onFocus"
-> &
-  PropsWithChildren<{
-    className?: string;
-    disabled?: boolean;
-    hitAreaMargins?: PointerHitAreaMargins;
-    id?: string | null;
-    onBlur?: () => void;
-    onDragging?: PanelResizeHandleOnDragging;
-    onFocus?: () => void;
-    style?: CSSProperties;
-    tabIndex?: number;
-    tagName?: keyof HTMLElementTagNameMap;
-  }>;
-
-export function PanelResizeHandle({
-  children = null,
-  className: classNameFromProps = "",
-  disabled = false,
-  hitAreaMargins,
-  id: idFromProps,
-  onBlur,
-  onDragging,
-  onFocus,
-  style: styleFromProps = {},
-  tabIndex = 0,
-  tagName: Type = "div",
-  ...rest
-}: PanelResizeHandleProps): ReactElement {
-  const elementRef = useRef<HTMLElement>(null);
-
-  // Use a ref to guard against users passing inline props
-  const callbacksRef = useRef<{
-    onDragging: PanelResizeHandleOnDragging | undefined;
-  }>({ onDragging });
-  useEffect(() => {
-    callbacksRef.current.onDragging = onDragging;
-  });
-
-  const panelGroupContext = useContext(PanelGroupContext);
-  if (panelGroupContext === null) {
-    throw Error(
-      `PanelResizeHandle components must be rendered within a PanelGroup container`
-    );
-  }
-
-  const {
-    direction,
-    groupId,
-    registerResizeHandle: registerResizeHandleWithParentGroup,
-    startDragging,
-    stopDragging,
-    panelGroupElement,
-  } = panelGroupContext;
-
-  const resizeHandleId = useUniqueId(idFromProps);
-
-  const [state, setState] = useState<ResizeHandlerState>("inactive");
-
-  const [isFocused, setIsFocused] = useState(false);
-
-  const [resizeHandler, setResizeHandler] = useState<ResizeHandler | null>(
-    null
-  );
-
-  const committedValuesRef = useRef<{
-    state: ResizeHandlerState;
-  }>({
-    state,
-  });
-
-  useIsomorphicLayoutEffect(() => {
-    committedValuesRef.current.state = state;
-  });
-
-  useEffect(() => {
-    if (disabled) {
-      setResizeHandler(null);
-    } else {
-      const resizeHandler = registerResizeHandleWithParentGroup(resizeHandleId);
-      setResizeHandler(() => resizeHandler);
-    }
-  }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
-
-  // Extract hit area margins before passing them to the effect's dependency array
-  // so that inline object values won't trigger re-renders
-  const coarseHitAreaMargins = hitAreaMargins?.coarse ?? 15;
-  const fineHitAreaMargins = hitAreaMargins?.fine ?? 5;
-
-  useEffect(() => {
-    if (disabled || resizeHandler == null) {
-      return;
-    }
-
-    const element = elementRef.current;
-    assert(element, "Element ref not attached");
-
-    const setResizeHandlerState = (
-      action: ResizeHandlerAction,
-      isActive: boolean,
-      event: ResizeEvent | null
-    ) => {
-      if (isActive) {
-        switch (action) {
-          case "down": {
-            setState("drag");
-
-            assert(event, 'Expected event to be defined for "down" action');
-
-            startDragging(resizeHandleId, event);
-
-            const { onDragging } = callbacksRef.current;
-            if (onDragging) {
-              onDragging(true);
-            }
-            break;
-          }
-          case "move": {
-            const { state } = committedValuesRef.current;
-
-            if (state !== "drag") {
-              setState("hover");
-            }
-
-            assert(event, 'Expected event to be defined for "move" action');
-
-            resizeHandler(event);
-            break;
-          }
-          case "up": {
-            setState("hover");
-
-            stopDragging();
-
-            const { onDragging } = callbacksRef.current;
-            if (onDragging) {
-              onDragging(false);
-            }
-            break;
-          }
-        }
-      } else {
-        setState("inactive");
-      }
-    };
-
-    return registerResizeHandle(
-      resizeHandleId,
-      element,
-      direction,
-      {
-        coarse: coarseHitAreaMargins,
-        fine: fineHitAreaMargins,
-      },
-      setResizeHandlerState
-    );
-  }, [
-    coarseHitAreaMargins,
-    direction,
-    disabled,
-    fineHitAreaMargins,
-    registerResizeHandleWithParentGroup,
-    resizeHandleId,
-    resizeHandler,
-    startDragging,
-    stopDragging,
-  ]);
-
-  useWindowSplitterResizeHandlerBehavior({
-    disabled,
-    handleId: resizeHandleId,
-    resizeHandler,
-    panelGroupElement,
-  });
-
-  const style: CSSProperties = {
-    touchAction: "none",
-    userSelect: "none",
-  };
-
-  return createElement(Type, {
-    ...rest,
-
-    children,
-    className: classNameFromProps,
-    id: idFromProps,
-    onBlur: () => {
-      setIsFocused(false);
-      onBlur?.();
-    },
-    onFocus: () => {
-      setIsFocused(true);
-      onFocus?.();
-    },
-    ref: elementRef,
-    role: "separator",
-    style: {
-      ...style,
-      ...styleFromProps,
-    },
-    tabIndex,
-
-    // CSS selectors
-    "data-panel-group-direction": direction,
-    "data-panel-group-id": groupId,
-    "data-resize-handle": "",
-    "data-resize-handle-active":
-      state === "drag" ? "pointer" : isFocused ? "keyboard" : undefined,
-    "data-resize-handle-state": state,
-    "data-panel-resize-handle-enabled": !disabled,
-    "data-panel-resize-handle-id": resizeHandleId,
-  });
-}
-
-PanelResizeHandle.displayName = "PanelResizeHandle";