react-resizable-panels 2.1.6 → 2.1.7

package/src/utils/calculateUnsafeDefaultLayout.ts

@@ -1,50 +0,0 @@
-import { PanelData } from "../Panel";
-import { assert } from "./assert";
-
-export function calculateUnsafeDefaultLayout({
-  panelDataArray,
-}: {
-  panelDataArray: PanelData[];
-}): number[] {
-  const layout = Array<number>(panelDataArray.length);
-
-  const panelConstraintsArray = panelDataArray.map(
-    (panelData) => panelData.constraints
-  );
-
-  let numPanelsWithSizes = 0;
-  let remainingSize = 100;
-
-  // Distribute default sizes first
-  for (let index = 0; index < panelDataArray.length; index++) {
-    const panelConstraints = panelConstraintsArray[index];
-    assert(panelConstraints, `Panel constraints not found for index ${index}`);
-    const { defaultSize } = panelConstraints;
-
-    if (defaultSize != null) {
-      numPanelsWithSizes++;
-      layout[index] = defaultSize;
-      remainingSize -= defaultSize;
-    }
-  }
-
-  // Remaining size should be distributed evenly between panels without default sizes
-  for (let index = 0; index < panelDataArray.length; index++) {
-    const panelConstraints = panelConstraintsArray[index];
-    assert(panelConstraints, `Panel constraints not found for index ${index}`);
-    const { defaultSize } = panelConstraints;
-
-    if (defaultSize != null) {
-      continue;
-    }
-
-    const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
-    const size = remainingSize / numRemainingPanels;
-
-    numPanelsWithSizes++;
-    layout[index] = size;
-    remainingSize -= size;
-  }
-
-  return layout;
-}

package/src/utils/callPanelCallbacks.ts

@@ -1,49 +0,0 @@
-import { PanelData } from "../Panel";
-import { assert } from "./assert";
-import { fuzzyNumbersEqual } from "./numbers/fuzzyCompareNumbers";
-
-// Layout should be pre-converted into percentages
-export function callPanelCallbacks(
-  panelsArray: PanelData[],
-  layout: number[],
-  panelIdToLastNotifiedSizeMap: Record<string, number>
-) {
-  layout.forEach((size, index) => {
-    const panelData = panelsArray[index];
-    assert(panelData, `Panel data not found for index ${index}`);
-
-    const { callbacks, constraints, id: panelId } = panelData;
-    const { collapsedSize = 0, collapsible } = constraints;
-
-    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId];
-    if (lastNotifiedSize == null || size !== lastNotifiedSize) {
-      panelIdToLastNotifiedSizeMap[panelId] = size;
-
-      const { onCollapse, onExpand, onResize } = callbacks;
-
-      if (onResize) {
-        onResize(size, lastNotifiedSize);
-      }
-
-      if (collapsible && (onCollapse || onExpand)) {
-        if (
-          onExpand &&
-          (lastNotifiedSize == null ||
-            fuzzyNumbersEqual(lastNotifiedSize, collapsedSize)) &&
-          !fuzzyNumbersEqual(size, collapsedSize)
-        ) {
-          onExpand();
-        }
-
-        if (
-          onCollapse &&
-          (lastNotifiedSize == null ||
-            !fuzzyNumbersEqual(lastNotifiedSize, collapsedSize)) &&
-          fuzzyNumbersEqual(size, collapsedSize)
-        ) {
-          onCollapse();
-        }
-      }
-    }
-  });
-}

package/src/utils/compareLayouts.test.ts

@@ -1,9 +0,0 @@
-import { compareLayouts } from "./compareLayouts";
-
-describe("compareLayouts", () => {
-  it("should work", () => {
-    expect(compareLayouts([1, 2], [1])).toBe(false);
-    expect(compareLayouts([1], [1, 2])).toBe(false);
-    expect(compareLayouts([1, 2, 3], [1, 2, 3])).toBe(true);
-  });
-});

package/src/utils/compareLayouts.ts

@@ -1,12 +0,0 @@
-export function compareLayouts(a: number[], b: number[]) {
-  if (a.length !== b.length) {
-    return false;
-  } else {
-    for (let index = 0; index < a.length; index++) {
-      if (a[index] != b[index]) {
-        return false;
-      }
-    }
-  }
-  return true;
-}

package/src/utils/computePanelFlexBoxStyle.test.ts

@@ -1,123 +0,0 @@
-import { PanelConstraints, PanelData } from "../Panel";
-import { computePanelFlexBoxStyle } from "./computePanelFlexBoxStyle";
-
-describe("computePanelFlexBoxStyle", () => {
-  function createPanelData(constraints: PanelConstraints = {}): PanelData {
-    return {
-      callbacks: {},
-      constraints,
-      id: "fake",
-      idIsFromProps: false,
-      order: undefined,
-    };
-  }
-
-  it("should observe a panel's default size if group layout has not yet been computed", () => {
-    expect(
-      computePanelFlexBoxStyle({
-        defaultSize: 0.1233456789,
-        dragState: null,
-        layout: [],
-        panelData: [
-          createPanelData({
-            defaultSize: 0.1233456789,
-          }),
-          createPanelData(),
-        ],
-        panelIndex: 0,
-        precision: 2,
-      })
-    ).toMatchInlineSnapshot(`
-{
-  "flexBasis": 0,
-  "flexGrow": "0.12",
-  "flexShrink": 1,
-  "overflow": "hidden",
-  "pointerEvents": undefined,
-}
-`);
-  });
-
-  it("should always fill the full width for single-panel groups", () => {
-    expect(
-      computePanelFlexBoxStyle({
-        defaultSize: undefined,
-        dragState: null,
-        layout: [],
-        panelData: [createPanelData()],
-        panelIndex: 0,
-        precision: 2,
-      })
-    ).toMatchInlineSnapshot(`
-{
-  "flexBasis": 0,
-  "flexGrow": "1",
-  "flexShrink": 1,
-  "overflow": "hidden",
-  "pointerEvents": undefined,
-}
-`);
-  });
-
-  it("should round sizes to avoid floating point precision errors", () => {
-    const layout = [0.25435, 0.5758, 0.1698];
-    const panelData = [createPanelData(), createPanelData(), createPanelData()];
-
-    expect(
-      computePanelFlexBoxStyle({
-        defaultSize: undefined,
-        dragState: null,
-        layout,
-        panelData,
-        panelIndex: 0,
-        precision: 2,
-      })
-    ).toMatchInlineSnapshot(`
-{
-  "flexBasis": 0,
-  "flexGrow": "0.25",
-  "flexShrink": 1,
-  "overflow": "hidden",
-  "pointerEvents": undefined,
-}
-`);
-
-    expect(
-      computePanelFlexBoxStyle({
-        defaultSize: undefined,
-        dragState: null,
-        layout,
-        panelData,
-        panelIndex: 1,
-        precision: 2,
-      })
-    ).toMatchInlineSnapshot(`
-{
-  "flexBasis": 0,
-  "flexGrow": "0.58",
-  "flexShrink": 1,
-  "overflow": "hidden",
-  "pointerEvents": undefined,
-}
-`);
-
-    expect(
-      computePanelFlexBoxStyle({
-        defaultSize: undefined,
-        dragState: null,
-        layout,
-        panelData,
-        panelIndex: 2,
-        precision: 2,
-      })
-    ).toMatchInlineSnapshot(`
-{
-  "flexBasis": 0,
-  "flexGrow": "0.17",
-  "flexShrink": 1,
-  "overflow": "hidden",
-  "pointerEvents": undefined,
-}
-`);
-  });
-});

package/src/utils/computePanelFlexBoxStyle.ts

@@ -1,50 +0,0 @@
-// This method returns a number between 1 and 100 representing
-
-import { PanelData } from "../Panel";
-import { DragState } from "../PanelGroupContext";
-import { CSSProperties } from "../vendor/react";
-
-// the % of the group's overall space this panel should occupy.
-export function computePanelFlexBoxStyle({
-  defaultSize,
-  dragState,
-  layout,
-  panelData,
-  panelIndex,
-  precision = 3,
-}: {
-  defaultSize: number | undefined;
-  layout: number[];
-  dragState: DragState | null;
-  panelData: PanelData[];
-  panelIndex: number;
-  precision?: number;
-}): CSSProperties {
-  const size = layout[panelIndex];
-
-  let flexGrow;
-  if (size == null) {
-    // Initial render (before panels have registered themselves)
-    // In order to support server rendering, fall back to default size if provided
-    flexGrow =
-      defaultSize != undefined ? defaultSize.toPrecision(precision) : "1";
-  } else if (panelData.length === 1) {
-    // Special case: Single panel group should always fill full width/height
-    flexGrow = "1";
-  } else {
-    flexGrow = size.toPrecision(precision);
-  }
-
-  return {
-    flexBasis: 0,
-    flexGrow,
-    flexShrink: 1,
-
-    // Without this, Panel sizes may be unintentionally overridden by their content
-    overflow: "hidden",
-
-    // Disable pointer events inside of a panel during resize
-    // This avoid edge cases like nested iframes
-    pointerEvents: dragState !== null ? "none" : undefined,
-  };
-}

package/src/utils/csp.ts

@@ -1,9 +0,0 @@
-let nonce: string | null;
-
-export function getNonce(): string | null {
-  return nonce;
-}
-
-export function setNonce(value: string | null) {
-  nonce = value;
-}

package/src/utils/cursor.ts

@@ -1,103 +0,0 @@
-import {
-  EXCEEDED_HORIZONTAL_MAX,
-  EXCEEDED_HORIZONTAL_MIN,
-  EXCEEDED_VERTICAL_MAX,
-  EXCEEDED_VERTICAL_MIN,
-} from "../PanelResizeHandleRegistry";
-import { getNonce } from "./csp";
-
-type CursorState = "horizontal" | "intersection" | "vertical";
-
-let currentCursorStyle: string | null = null;
-let enabled: boolean = true;
-let styleElement: HTMLStyleElement | null = null;
-
-export function disableGlobalCursorStyles() {
-  enabled = false;
-}
-
-export function enableGlobalCursorStyles() {
-  enabled = true;
-}
-
-export function getCursorStyle(
-  state: CursorState,
-  constraintFlags: number
-): string {
-  if (constraintFlags) {
-    const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
-    const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
-    const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
-    const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
-
-    if (horizontalMin) {
-      if (verticalMin) {
-        return "se-resize";
-      } else if (verticalMax) {
-        return "ne-resize";
-      } else {
-        return "e-resize";
-      }
-    } else if (horizontalMax) {
-      if (verticalMin) {
-        return "sw-resize";
-      } else if (verticalMax) {
-        return "nw-resize";
-      } else {
-        return "w-resize";
-      }
-    } else if (verticalMin) {
-      return "s-resize";
-    } else if (verticalMax) {
-      return "n-resize";
-    }
-  }
-
-  switch (state) {
-    case "horizontal":
-      return "ew-resize";
-    case "intersection":
-      return "move";
-    case "vertical":
-      return "ns-resize";
-  }
-}
-
-export function resetGlobalCursorStyle() {
-  if (styleElement !== null) {
-    document.head.removeChild(styleElement);
-
-    currentCursorStyle = null;
-    styleElement = null;
-  }
-}
-
-export function setGlobalCursorStyle(
-  state: CursorState,
-  constraintFlags: number
-) {
-  if (!enabled) {
-    return;
-  }
-
-  const style = getCursorStyle(state, constraintFlags);
-
-  if (currentCursorStyle === style) {
-    return;
-  }
-
-  currentCursorStyle = style;
-
-  if (styleElement === null) {
-    styleElement = document.createElement("style");
-
-    const nonce = getNonce();
-    if (nonce) {
-      styleElement.setAttribute("nonce", nonce);
-    }
-
-    document.head.appendChild(styleElement);
-  }
-
-  styleElement.innerHTML = `*{cursor: ${style}!important;}`;
-}

package/src/utils/debounce.ts

@@ -1,18 +0,0 @@
-export default function debounce<T extends Function>(
-  callback: T,
-  durationMs: number = 10
-) {
-  let timeoutId: NodeJS.Timeout | null = null;
-
-  let callable = (...args: any) => {
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-    }
-
-    timeoutId = setTimeout(() => {
-      callback(...args);
-    }, durationMs);
-  };
-
-  return callable as unknown as T;
-}

package/src/utils/determinePivotIndices.ts

@@ -1,15 +0,0 @@
-import { getResizeHandleElementIndex } from "../utils/dom/getResizeHandleElementIndex";
-
-export function determinePivotIndices(
-  groupId: string,
-  dragHandleId: string,
-  panelGroupElement: ParentNode
-): [indexBefore: number, indexAfter: number] {
-  const index = getResizeHandleElementIndex(
-    groupId,
-    dragHandleId,
-    panelGroupElement
-  );
-
-  return index != null ? [index, index + 1] : [-1, -1];
-}

package/src/utils/dom/getPanelElement.ts

@@ -1,10 +0,0 @@
-export function getPanelElement(
-  id: string,
-  scope: ParentNode | HTMLElement = document
-): HTMLElement | null {
-  const element = scope.querySelector(`[data-panel-id="${id}"]`);
-  if (element) {
-    return element as HTMLElement;
-  }
-  return null;
-}

package/src/utils/dom/getPanelElementsForGroup.ts

@@ -1,8 +0,0 @@
-export function getPanelElementsForGroup(
-  groupId: string,
-  scope: ParentNode | HTMLElement = document
-): HTMLElement[] {
-  return Array.from(
-    scope.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`)
-  );
-}

package/src/utils/dom/getPanelGroupElement.ts

@@ -1,21 +0,0 @@
-export function getPanelGroupElement(
-  id: string,
-  rootElement: ParentNode | HTMLElement = document
-): HTMLElement | null {
-  //If the root element is the PanelGroup
-  if (
-    rootElement instanceof HTMLElement &&
-    (rootElement as HTMLElement)?.dataset?.panelGroupId == id
-  ) {
-    return rootElement as HTMLElement;
-  }
-
-  //Else query children
-  const element = rootElement.querySelector(
-    `[data-panel-group][data-panel-group-id="${id}"]`
-  );
-  if (element) {
-    return element as HTMLElement;
-  }
-  return null;
-}

package/src/utils/dom/getResizeHandleElement.ts

@@ -1,10 +0,0 @@
-export function getResizeHandleElement(
-  id: string,
-  scope: ParentNode | HTMLElement = document
-): HTMLElement | null {
-  const element = scope.querySelector(`[data-panel-resize-handle-id="${id}"]`);
-  if (element) {
-    return element as HTMLElement;
-  }
-  return null;
-}

package/src/utils/dom/getResizeHandleElementIndex.ts

@@ -1,13 +0,0 @@
-import { getResizeHandleElementsForGroup } from "./getResizeHandleElementsForGroup";
-
-export function getResizeHandleElementIndex(
-  groupId: string,
-  id: string,
-  scope: ParentNode | HTMLElement = document
-): number | null {
-  const handles = getResizeHandleElementsForGroup(groupId, scope);
-  const index = handles.findIndex(
-    (handle) => handle.getAttribute("data-panel-resize-handle-id") === id
-  );
-  return index ?? null;
-}

package/src/utils/dom/getResizeHandleElementsForGroup.ts

@@ -1,10 +0,0 @@
-export function getResizeHandleElementsForGroup(
-  groupId: string,
-  scope: ParentNode | HTMLElement = document
-): HTMLElement[] {
-  return Array.from(
-    scope.querySelectorAll(
-      `[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`
-    )
-  );
-}

package/src/utils/dom/getResizeHandlePanelIds.ts

@@ -1,19 +0,0 @@
-import { PanelData } from "../../Panel";
-import { getResizeHandleElement } from "./getResizeHandleElement";
-import { getResizeHandleElementsForGroup } from "./getResizeHandleElementsForGroup";
-
-export function getResizeHandlePanelIds(
-  groupId: string,
-  handleId: string,
-  panelsArray: PanelData[],
-  scope: ParentNode | HTMLElement = document
-): [idBefore: string | null, idAfter: string | null] {
-  const handle = getResizeHandleElement(handleId, scope);
-  const handles = getResizeHandleElementsForGroup(groupId, scope);
-  const index = handle ? handles.indexOf(handle) : -1;
-
-  const idBefore: string | null = panelsArray[index]?.id ?? null;
-  const idAfter: string | null = panelsArray[index + 1]?.id ?? null;
-
-  return [idBefore, idAfter];
-}

package/src/utils/events/getResizeEventCoordinates.ts

@@ -1,23 +0,0 @@
-import { ResizeEvent } from "../../types";
-import { isMouseEvent, isPointerEvent } from ".";
-
-export function getResizeEventCoordinates(event: ResizeEvent) {
-  if (isPointerEvent(event)) {
-    if (event.isPrimary) {
-      return {
-        x: event.clientX,
-        y: event.clientY,
-      };
-    }
-  } else if (isMouseEvent(event)) {
-    return {
-      x: event.clientX,
-      y: event.clientY,
-    };
-  }
-
-  return {
-    x: Infinity,
-    y: Infinity,
-  };
-}

package/src/utils/events/getResizeEventCursorPosition.ts

@@ -1,14 +0,0 @@
-import { ResizeEvent } from "../../PanelGroupContext";
-import { Direction } from "../../types";
-import { getResizeEventCoordinates } from "./getResizeEventCoordinates";
-
-export function getResizeEventCursorPosition(
-  direction: Direction,
-  event: ResizeEvent
-): number {
-  const isHorizontal = direction === "horizontal";
-
-  const { x, y } = getResizeEventCoordinates(event);
-
-  return isHorizontal ? x : y;
-}

package/src/utils/events/index.ts

@@ -1,13 +0,0 @@
-import { ResizeEvent } from "../../PanelGroupContext";
-
-export function isKeyDown(event: ResizeEvent): event is KeyboardEvent {
-  return event.type === "keydown";
-}
-
-export function isPointerEvent(event: ResizeEvent): event is PointerEvent {
-  return event.type.startsWith("pointer");
-}
-
-export function isMouseEvent(event: ResizeEvent): event is MouseEvent {
-  return event.type.startsWith("mouse");
-}

package/src/utils/getInputType.ts

@@ -1,5 +0,0 @@
-export function getInputType(): "coarse" | "fine" | undefined {
-  if (typeof matchMedia === "function") {
-    return matchMedia("(pointer:coarse)").matches ? "coarse" : "fine";
-  }
-}

package/src/utils/initializeDefaultStorage.ts

@@ -1,26 +0,0 @@
-import { PanelGroupStorage } from "../PanelGroup";
-
-// PanelGroup might be rendering in a server-side environment where localStorage is not available
-// or on a browser with cookies/storage disabled.
-// In either case, this function avoids accessing localStorage until needed,
-// and avoids throwing user-visible errors.
-export function initializeDefaultStorage(storageObject: PanelGroupStorage) {
-  try {
-    if (typeof localStorage !== "undefined") {
-      // Bypass this check for future calls
-      storageObject.getItem = (name: string) => {
-        return localStorage.getItem(name);
-      };
-      storageObject.setItem = (name: string, value: string) => {
-        localStorage.setItem(name, value);
-      };
-    } else {
-      throw new Error("localStorage not supported in this environment");
-    }
-  } catch (error) {
-    console.error(error);
-
-    storageObject.getItem = () => null;
-    storageObject.setItem = () => {};
-  }
-}

package/src/utils/numbers/fuzzyCompareNumbers.test.ts

@@ -1,16 +0,0 @@
-import { fuzzyCompareNumbers } from "./fuzzyCompareNumbers";
-
-describe("fuzzyCompareNumbers", () => {
-  it("should return 0 when numbers are equal", () => {
-    expect(fuzzyCompareNumbers(10.123, 10.123, 5)).toBe(0);
-  });
-
-  it("should return 0 when numbers are fuzzy equal", () => {
-    expect(fuzzyCompareNumbers(0.000001, 0.000002, 5)).toBe(0);
-  });
-
-  it("should return a delta when numbers are not unequal", () => {
-    expect(fuzzyCompareNumbers(0.000001, 0.000002, 6)).toBe(-1);
-    expect(fuzzyCompareNumbers(0.000005, 0.000002, 6)).toBe(1);
-  });
-});

package/src/utils/numbers/fuzzyCompareNumbers.ts

@@ -1,21 +0,0 @@
-import { PRECISION } from "../../constants";
-
-export function fuzzyCompareNumbers(
-  actual: number,
-  expected: number,
-  fractionDigits: number = PRECISION
-): number {
-  if (actual.toFixed(fractionDigits) === expected.toFixed(fractionDigits)) {
-    return 0;
-  } else {
-    return actual > expected ? 1 : -1;
-  }
-}
-
-export function fuzzyNumbersEqual(
-  actual: number,
-  expected: number,
-  fractionDigits: number = PRECISION
-): boolean {
-  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
-}