react-resizable-panels 2.1.5 → 2.1.7

package/src/PanelResizeHandleRegistry.ts

@@ -1,336 +0,0 @@
-import { Direction, ResizeEvent } from "./types";
-import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
-import { getResizeEventCoordinates } from "./utils/events/getResizeEventCoordinates";
-import { getInputType } from "./utils/getInputType";
-import { intersects } from "./utils/rects/intersects";
-import { compare } from "./vendor/stacking-order";
-
-export type ResizeHandlerAction = "down" | "move" | "up";
-export type SetResizeHandlerState = (
-  action: ResizeHandlerAction,
-  isActive: boolean,
-  event: ResizeEvent | null
-) => void;
-
-export type PointerHitAreaMargins = {
-  coarse: number;
-  fine: number;
-};
-
-export type ResizeHandlerData = {
-  direction: Direction;
-  element: HTMLElement;
-  hitAreaMargins: PointerHitAreaMargins;
-  setResizeHandlerState: SetResizeHandlerState;
-};
-
-export const EXCEEDED_HORIZONTAL_MIN = 0b0001;
-export const EXCEEDED_HORIZONTAL_MAX = 0b0010;
-export const EXCEEDED_VERTICAL_MIN = 0b0100;
-export const EXCEEDED_VERTICAL_MAX = 0b1000;
-
-const isCoarsePointer = getInputType() === "coarse";
-
-let intersectingHandles: ResizeHandlerData[] = [];
-let isPointerDown = false;
-let ownerDocumentCounts: Map<Document, number> = new Map();
-let panelConstraintFlags: Map<string, number> = new Map();
-
-const registeredResizeHandlers = new Set<ResizeHandlerData>();
-
-export function registerResizeHandle(
-  resizeHandleId: string,
-  element: HTMLElement,
-  direction: Direction,
-  hitAreaMargins: PointerHitAreaMargins,
-  setResizeHandlerState: SetResizeHandlerState
-) {
-  const { ownerDocument } = element;
-
-  const data: ResizeHandlerData = {
-    direction,
-    element,
-    hitAreaMargins,
-    setResizeHandlerState,
-  };
-
-  const count = ownerDocumentCounts.get(ownerDocument) ?? 0;
-  ownerDocumentCounts.set(ownerDocument, count + 1);
-
-  registeredResizeHandlers.add(data);
-
-  updateListeners();
-
-  return function unregisterResizeHandle() {
-    panelConstraintFlags.delete(resizeHandleId);
-    registeredResizeHandlers.delete(data);
-
-    const count = ownerDocumentCounts.get(ownerDocument) ?? 1;
-    ownerDocumentCounts.set(ownerDocument, count - 1);
-
-    updateListeners();
-
-    if (count === 1) {
-      ownerDocumentCounts.delete(ownerDocument);
-    }
-
-    // If the resize handle that is currently unmounting is intersecting with the pointer,
-    // update the global pointer to account for the change
-    if (intersectingHandles.includes(data)) {
-      const index = intersectingHandles.indexOf(data);
-      if (index >= 0) {
-        intersectingHandles.splice(index, 1);
-      }
-
-      updateCursor();
-
-      // Also instruct the handle to stop dragging; this prevents the parent group from being left in an inconsistent state
-      // See github.com/bvaughn/react-resizable-panels/issues/402
-      setResizeHandlerState("up", true, null);
-    }
-  };
-}
-
-function handlePointerDown(event: PointerEvent) {
-  const { target } = event;
-  const { x, y } = getResizeEventCoordinates(event);
-
-  isPointerDown = true;
-
-  recalculateIntersectingHandles({ target, x, y });
-  updateListeners();
-
-  if (intersectingHandles.length > 0) {
-    updateResizeHandlerStates("down", event);
-
-    event.preventDefault();
-    event.stopPropagation();
-  }
-}
-
-function handlePointerMove(event: PointerEvent) {
-  const { x, y } = getResizeEventCoordinates(event);
-
-  // Edge case (see #340)
-  // Detect when the pointer has been released outside an iframe on a different domain
-  if (isPointerDown && event.buttons === 0) {
-    isPointerDown = false;
-
-    updateResizeHandlerStates("up", event);
-  }
-
-  if (!isPointerDown) {
-    const { target } = event;
-
-    // Recalculate intersecting handles whenever the pointer moves, except if it has already been pressed
-    // at that point, the handles may not move with the pointer (depending on constraints)
-    // but the same set of active handles should be locked until the pointer is released
-    recalculateIntersectingHandles({ target, x, y });
-  }
-
-  updateResizeHandlerStates("move", event);
-
-  // Update cursor based on return value(s) from active handles
-  updateCursor();
-
-  if (intersectingHandles.length > 0) {
-    event.preventDefault();
-  }
-}
-
-function handlePointerUp(event: ResizeEvent) {
-  const { target } = event;
-  const { x, y } = getResizeEventCoordinates(event);
-
-  panelConstraintFlags.clear();
-  isPointerDown = false;
-
-  if (intersectingHandles.length > 0) {
-    event.preventDefault();
-  }
-
-  updateResizeHandlerStates("up", event);
-  recalculateIntersectingHandles({ target, x, y });
-  updateCursor();
-
-  updateListeners();
-}
-
-function recalculateIntersectingHandles({
-  target,
-  x,
-  y,
-}: {
-  target: EventTarget | null;
-  x: number;
-  y: number;
-}) {
-  intersectingHandles.splice(0);
-
-  let targetElement: HTMLElement | null = null;
-  if (target instanceof HTMLElement) {
-    targetElement = target;
-  }
-
-  registeredResizeHandlers.forEach((data) => {
-    const { element: dragHandleElement, hitAreaMargins } = data;
-
-    const dragHandleRect = dragHandleElement.getBoundingClientRect();
-    const { bottom, left, right, top } = dragHandleRect;
-
-    const margin = isCoarsePointer
-      ? hitAreaMargins.coarse
-      : hitAreaMargins.fine;
-
-    const eventIntersects =
-      x >= left - margin &&
-      x <= right + margin &&
-      y >= top - margin &&
-      y <= bottom + margin;
-
-    if (eventIntersects) {
-      // TRICKY
-      // We listen for pointers events at the root in order to support hit area margins
-      // (determining when the pointer is close enough to an element to be considered a "hit")
-      // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
-      // so at this point we need to compare stacking order of a potentially intersecting drag handle,
-      // and the element that was actually clicked/touched
-      if (
-        targetElement !== null &&
-        document.contains(targetElement) &&
-        dragHandleElement !== targetElement &&
-        !dragHandleElement.contains(targetElement) &&
-        !targetElement.contains(dragHandleElement) &&
-        // Calculating stacking order has a cost, so we should avoid it if possible
-        // That is why we only check potentially intersecting handles,
-        // and why we skip if the event target is within the handle's DOM
-        compare(targetElement, dragHandleElement) > 0
-      ) {
-        // If the target is above the drag handle, then we also need to confirm they overlap
-        // If they are beside each other (e.g. a panel and its drag handle) then the handle is still interactive
-        //
-        // It's not enough to compare only the target
-        // The target might be a small element inside of a larger container
-        // (For example, a SPAN or a DIV inside of a larger modal dialog)
-        let currentElement: HTMLElement | null = targetElement;
-        let didIntersect = false;
-        while (currentElement) {
-          if (currentElement.contains(dragHandleElement)) {
-            break;
-          } else if (
-            intersects(
-              currentElement.getBoundingClientRect(),
-              dragHandleRect,
-              true
-            )
-          ) {
-            didIntersect = true;
-            break;
-          }
-
-          currentElement = currentElement.parentElement;
-        }
-
-        if (didIntersect) {
-          return;
-        }
-      }
-
-      intersectingHandles.push(data);
-    }
-  });
-}
-
-export function reportConstraintsViolation(
-  resizeHandleId: string,
-  flag: number
-) {
-  panelConstraintFlags.set(resizeHandleId, flag);
-}
-
-function updateCursor() {
-  let intersectsHorizontal = false;
-  let intersectsVertical = false;
-
-  intersectingHandles.forEach((data) => {
-    const { direction } = data;
-
-    if (direction === "horizontal") {
-      intersectsHorizontal = true;
-    } else {
-      intersectsVertical = true;
-    }
-  });
-
-  let constraintFlags = 0;
-  panelConstraintFlags.forEach((flag) => {
-    constraintFlags |= flag;
-  });
-
-  if (intersectsHorizontal && intersectsVertical) {
-    setGlobalCursorStyle("intersection", constraintFlags);
-  } else if (intersectsHorizontal) {
-    setGlobalCursorStyle("horizontal", constraintFlags);
-  } else if (intersectsVertical) {
-    setGlobalCursorStyle("vertical", constraintFlags);
-  } else {
-    resetGlobalCursorStyle();
-  }
-}
-
-function updateListeners() {
-  ownerDocumentCounts.forEach((_, ownerDocument) => {
-    const { body } = ownerDocument;
-
-    body.removeEventListener("contextmenu", handlePointerUp);
-    body.removeEventListener("pointerdown", handlePointerDown);
-    body.removeEventListener("pointerleave", handlePointerMove);
-    body.removeEventListener("pointermove", handlePointerMove);
-  });
-
-  window.removeEventListener("pointerup", handlePointerUp);
-  window.removeEventListener("pointercancel", handlePointerUp);
-
-  if (registeredResizeHandlers.size > 0) {
-    if (isPointerDown) {
-      if (intersectingHandles.length > 0) {
-        ownerDocumentCounts.forEach((count, ownerDocument) => {
-          const { body } = ownerDocument;
-
-          if (count > 0) {
-            body.addEventListener("contextmenu", handlePointerUp);
-            body.addEventListener("pointerleave", handlePointerMove);
-            body.addEventListener("pointermove", handlePointerMove);
-          }
-        });
-      }
-
-      window.addEventListener("pointerup", handlePointerUp);
-      window.addEventListener("pointercancel", handlePointerUp);
-    } else {
-      ownerDocumentCounts.forEach((count, ownerDocument) => {
-        const { body } = ownerDocument;
-
-        if (count > 0) {
-          body.addEventListener("pointerdown", handlePointerDown, {
-            capture: true,
-          });
-          body.addEventListener("pointermove", handlePointerMove);
-        }
-      });
-    }
-  }
-}
-
-function updateResizeHandlerStates(
-  action: ResizeHandlerAction,
-  event: ResizeEvent
-) {
-  registeredResizeHandlers.forEach((data) => {
-    const { setResizeHandlerState } = data;
-
-    const isActive = intersectingHandles.includes(data);
-
-    setResizeHandlerState(action, isActive, event);
-  });
-}

package/src/constants.ts

@@ -1 +0,0 @@
-export const PRECISION = 10;

package/src/env-conditions/browser.ts

@@ -1 +0,0 @@
-export const isBrowser = true;

package/src/env-conditions/development.ts

@@ -1 +0,0 @@
-export const isDevelopment = true;

package/src/env-conditions/node.ts

@@ -1 +0,0 @@
-export const isBrowser = false;

package/src/env-conditions/production.ts

@@ -1 +0,0 @@
-export const isDevelopment = false;

package/src/env-conditions/unknown.ts

@@ -1 +0,0 @@
-export const isBrowser = typeof window !== "undefined";

package/src/hooks/useForceUpdate.ts

@@ -1,7 +0,0 @@
-import { useCallback, useState } from "../vendor/react";
-
-export function useForceUpdate() {
-  const [_, setCount] = useState(0);
-
-  return useCallback(() => setCount((prevCount) => prevCount + 1), []);
-}

package/src/hooks/useIsomorphicEffect.ts

@@ -1,8 +0,0 @@
-import { isBrowser } from "#is-browser";
-import { useLayoutEffect_do_not_use_directly } from "../vendor/react";
-
-const useIsomorphicLayoutEffect = isBrowser
-  ? useLayoutEffect_do_not_use_directly
-  : () => {};
-
-export default useIsomorphicLayoutEffect;

package/src/hooks/useUniqueId.ts

@@ -1,19 +0,0 @@
-import { useId, useRef } from "../vendor/react";
-
-const wrappedUseId: () => string | null =
-  typeof useId === "function" ? useId : (): null => null;
-
-let counter = 0;
-
-export default function useUniqueId(
-  idFromParams: string | null = null
-): string {
-  const idFromUseId = wrappedUseId();
-
-  const idRef = useRef<string | null>(idFromParams || idFromUseId || null);
-  if (idRef.current === null) {
-    idRef.current = "" + counter++;
-  }
-
-  return idFromParams ?? idRef.current;
-}

package/src/hooks/useWindowSplitterBehavior.ts

@@ -1,90 +0,0 @@
-import { ResizeHandler } from "../types";
-import { assert } from "../utils/assert";
-import { getResizeHandleElement } from "../utils/dom/getResizeHandleElement";
-import { getResizeHandleElementIndex } from "../utils/dom/getResizeHandleElementIndex";
-import { getResizeHandleElementsForGroup } from "../utils/dom/getResizeHandleElementsForGroup";
-import { useEffect } from "../vendor/react";
-
-// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
-
-export function useWindowSplitterResizeHandlerBehavior({
-  disabled,
-  handleId,
-  resizeHandler,
-  panelGroupElement,
-}: {
-  disabled: boolean;
-  handleId: string;
-  resizeHandler: ResizeHandler | null;
-  panelGroupElement: ParentNode | null;
-}): void {
-  useEffect(() => {
-    if (disabled || resizeHandler == null || panelGroupElement == null) {
-      return;
-    }
-
-    const handleElement = getResizeHandleElement(handleId, panelGroupElement);
-    if (handleElement == null) {
-      return;
-    }
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.defaultPrevented) {
-        return;
-      }
-
-      switch (event.key) {
-        case "ArrowDown":
-        case "ArrowLeft":
-        case "ArrowRight":
-        case "ArrowUp":
-        case "End":
-        case "Home": {
-          event.preventDefault();
-
-          resizeHandler(event);
-          break;
-        }
-        case "F6": {
-          event.preventDefault();
-
-          const groupId = handleElement.getAttribute("data-panel-group-id");
-          assert(groupId, `No group element found for id "${groupId}"`);
-
-          const handles = getResizeHandleElementsForGroup(
-            groupId,
-            panelGroupElement
-          );
-          const index = getResizeHandleElementIndex(
-            groupId,
-            handleId,
-            panelGroupElement
-          );
-
-          assert(
-            index !== null,
-            `No resize element found for id "${handleId}"`
-          );
-
-          const nextIndex = event.shiftKey
-            ? index > 0
-              ? index - 1
-              : handles.length - 1
-            : index + 1 < handles.length
-              ? index + 1
-              : 0;
-
-          const nextHandle = handles[nextIndex] as HTMLElement;
-          nextHandle.focus();
-
-          break;
-        }
-      }
-    };
-
-    handleElement.addEventListener("keydown", onKeyDown);
-    return () => {
-      handleElement.removeEventListener("keydown", onKeyDown);
-    };
-  }, [panelGroupElement, disabled, handleId, resizeHandler]);
-}

package/src/hooks/useWindowSplitterPanelGroupBehavior.ts

@@ -1,201 +0,0 @@
-import { isDevelopment } from "#is-development";
-import { PanelData } from "../Panel";
-import { Direction } from "../types";
-import { adjustLayoutByDelta } from "../utils/adjustLayoutByDelta";
-import { assert } from "../utils/assert";
-import { calculateAriaValues } from "../utils/calculateAriaValues";
-import { determinePivotIndices } from "../utils/determinePivotIndices";
-import { getPanelGroupElement } from "../utils/dom/getPanelGroupElement";
-import { getResizeHandleElementsForGroup } from "../utils/dom/getResizeHandleElementsForGroup";
-import { getResizeHandlePanelIds } from "../utils/dom/getResizeHandlePanelIds";
-import { fuzzyNumbersEqual } from "../utils/numbers/fuzzyNumbersEqual";
-import { RefObject, useEffect, useRef } from "../vendor/react";
-import useIsomorphicLayoutEffect from "./useIsomorphicEffect";
-
-// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
-
-export function useWindowSplitterPanelGroupBehavior({
-  committedValuesRef,
-  eagerValuesRef,
-  groupId,
-  layout,
-  panelDataArray,
-  panelGroupElement,
-  setLayout,
-}: {
-  committedValuesRef: RefObject<{
-    direction: Direction;
-  }>;
-  eagerValuesRef: RefObject<{
-    panelDataArray: PanelData[];
-  }>;
-  groupId: string;
-  layout: number[];
-  panelDataArray: PanelData[];
-  panelGroupElement: ParentNode | null;
-  setLayout: (sizes: number[]) => void;
-}): void {
-  const devWarningsRef = useRef<{
-    didWarnAboutMissingResizeHandle: boolean;
-  }>({
-    didWarnAboutMissingResizeHandle: false,
-  });
-
-  useIsomorphicLayoutEffect(() => {
-    if (!panelGroupElement) {
-      return;
-    }
-    const resizeHandleElements = getResizeHandleElementsForGroup(
-      groupId,
-      panelGroupElement
-    );
-
-    for (let index = 0; index < panelDataArray.length - 1; index++) {
-      const { valueMax, valueMin, valueNow } = calculateAriaValues({
-        layout,
-        panelsArray: panelDataArray,
-        pivotIndices: [index, index + 1],
-      });
-
-      const resizeHandleElement = resizeHandleElements[index];
-      if (resizeHandleElement == null) {
-        if (isDevelopment) {
-          const { didWarnAboutMissingResizeHandle } = devWarningsRef.current;
-
-          if (!didWarnAboutMissingResizeHandle) {
-            devWarningsRef.current.didWarnAboutMissingResizeHandle = true;
-
-            console.warn(
-              `WARNING: Missing resize handle for PanelGroup "${groupId}"`
-            );
-          }
-        }
-      } else {
-        const panelData = panelDataArray[index];
-        assert(panelData, `No panel data found for index "${index}"`);
-
-        resizeHandleElement.setAttribute("aria-controls", panelData.id);
-        resizeHandleElement.setAttribute(
-          "aria-valuemax",
-          "" + Math.round(valueMax)
-        );
-        resizeHandleElement.setAttribute(
-          "aria-valuemin",
-          "" + Math.round(valueMin)
-        );
-        resizeHandleElement.setAttribute(
-          "aria-valuenow",
-          valueNow != null ? "" + Math.round(valueNow) : ""
-        );
-      }
-    }
-
-    return () => {
-      resizeHandleElements.forEach((resizeHandleElement, index) => {
-        resizeHandleElement.removeAttribute("aria-controls");
-        resizeHandleElement.removeAttribute("aria-valuemax");
-        resizeHandleElement.removeAttribute("aria-valuemin");
-        resizeHandleElement.removeAttribute("aria-valuenow");
-      });
-    };
-  }, [groupId, layout, panelDataArray, panelGroupElement]);
-
-  useEffect(() => {
-    if (!panelGroupElement) {
-      return;
-    }
-    const eagerValues = eagerValuesRef.current;
-    assert(eagerValues, `Eager values not found`);
-
-    const { panelDataArray } = eagerValues;
-    const groupElement = getPanelGroupElement(groupId, panelGroupElement);
-    assert(groupElement != null, `No group found for id "${groupId}"`);
-
-    const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
-    assert(handles, `No resize handles found for group id "${groupId}"`);
-
-    const cleanupFunctions = handles.map((handle) => {
-      const handleId = handle.getAttribute("data-panel-resize-handle-id");
-      assert(handleId, `Resize handle element has no handle id attribute`);
-
-      const [idBefore, idAfter] = getResizeHandlePanelIds(
-        groupId,
-        handleId,
-        panelDataArray,
-        panelGroupElement
-      );
-      if (idBefore == null || idAfter == null) {
-        return () => {};
-      }
-
-      const onKeyDown = (event: KeyboardEvent) => {
-        if (event.defaultPrevented) {
-          return;
-        }
-
-        switch (event.key) {
-          case "Enter": {
-            event.preventDefault();
-
-            const index = panelDataArray.findIndex(
-              (panelData) => panelData.id === idBefore
-            );
-            if (index >= 0) {
-              const panelData = panelDataArray[index];
-              assert(panelData, `No panel data found for index ${index}`);
-
-              const size = layout[index];
-
-              const {
-                collapsedSize = 0,
-                collapsible,
-                minSize = 0,
-              } = panelData.constraints;
-
-              if (size != null && collapsible) {
-                const nextLayout = adjustLayoutByDelta({
-                  delta: fuzzyNumbersEqual(size, collapsedSize)
-                    ? minSize - collapsedSize
-                    : collapsedSize - size,
-                  initialLayout: layout,
-                  panelConstraints: panelDataArray.map(
-                    (panelData) => panelData.constraints
-                  ),
-                  pivotIndices: determinePivotIndices(
-                    groupId,
-                    handleId,
-                    panelGroupElement
-                  ),
-                  prevLayout: layout,
-                  trigger: "keyboard",
-                });
-                if (layout !== nextLayout) {
-                  setLayout(nextLayout);
-                }
-              }
-            }
-            break;
-          }
-        }
-      };
-
-      handle.addEventListener("keydown", onKeyDown);
-
-      return () => {
-        handle.removeEventListener("keydown", onKeyDown);
-      };
-    });
-
-    return () => {
-      cleanupFunctions.forEach((cleanupFunction) => cleanupFunction());
-    };
-  }, [
-    panelGroupElement,
-    committedValuesRef,
-    eagerValuesRef,
-    groupId,
-    layout,
-    panelDataArray,
-    setLayout,
-  ]);
-}