Fixed ESLint config linkage to TSConfig file

packages/react-resizable-panels/.eslintrc.cjs

@@ -0,0 +1,28 @@
+const { join } = require("path");
+
+/* eslint-env node */
+module.exports = {
+  ignorePatterns: [".parcel-cache", "dist", "node_modules"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "../../tsconfig.json",
+    tsconfigRootDir: __dirname,
+  },
+  plugins: ["@typescript-eslint", "no-restricted-imports", "react-hooks"],
+  root: true,
+  rules: {
+    "no-restricted-imports": [
+      "error",
+      {
+        paths: ["react"],
+      },
+    ],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      {
+        additionalHooks: "(useIsomorphicLayoutEffect)",
+      },
+    ],
+  },
+};

packages/react-resizable-panels/src/new/PanelGroup.ts

@@ -3,7 +3,6 @@ import useIsomorphicLayoutEffect from "../hooks/useIsomorphicEffect";
 import useUniqueId from "../hooks/useUniqueId";
 import { resetGlobalCursorStyle, setGlobalCursorStyle } from "../utils/cursor";
 import debounce from "../utils/debounce";
-import { getAvailableGroupSizePixels, getResizeHandle } from "../utils/group";
 import {
   CSSProperties,
   ElementType,
@@ -26,6 +25,8 @@ import { computePanelFlexBoxStyle } from "./utils/computePanelFlexBoxStyle";
 import { computePercentagePanelConstraints } from "./utils/computePercentagePanelConstraints";
 import { convertPercentageToPixels } from "./utils/convertPercentageToPixels";
 import { determinePivotIndices } from "./utils/determinePivotIndices";
+import { calculateAvailablePanelSizeInPixels } from "./utils/dom/calculateAvailablePanelSizeInPixels";
+import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
 import { isMouseEvent, isTouchEvent } from "./utils/events";
 import { getResizeEventCursorPosition } from "./utils/getResizeEventCursorPosition";
 import { initializeDefaultStorage } from "./utils/initializeDefaultStorage";
@@ -147,7 +148,7 @@ export function PanelGroup({
       unsafeLayout = loadPanelLayout(autoSaveId, panelDataArray, storage);
     }
 
-    const groupSizePixels = getAvailableGroupSizePixels(groupId);
+    const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
 
     if (unsafeLayout == null) {
       unsafeLayout = calculateDefaultLayout({
@@ -363,7 +364,7 @@ export function PanelGroup({
         delta = -delta;
       }
 
-      const groupSizePixels = getAvailableGroupSizePixels(groupId);
+      const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
       const panelConstraints = panelDataArray.map(
         (panelData) => panelData.constraints
       );
@@ -448,7 +449,7 @@ export function PanelGroup({
     (dragHandleId: string, event: ResizeEvent) => {
       const { direction, layout } = committedValuesRef.current;
 
-      const handleElement = getResizeHandle(dragHandleId)!;
+      const handleElement = getResizeHandleElement(dragHandleId)!;
 
       const initialCursorPosition = getResizeEventCursorPosition(
         direction,
@@ -561,7 +562,7 @@ function panelDataHelper(
   const panelIndex = panelDataArray.indexOf(panelData);
   const panelConstraints = panelConstraintsArray[panelIndex];
 
-  const groupSizePixels = getAvailableGroupSizePixels(groupId);
+  const groupSizePixels = calculateAvailablePanelSizeInPixels(groupId);
 
   const percentagePanelConstraints = computePercentagePanelConstraints(
     panelConstraintsArray,

packages/react-resizable-panels/src/new/utils/calculateDeltaPercentage.ts

@@ -1,8 +1,8 @@
-import { getPanelGroup } from "../../utils/group";
 import { DragState, ResizeEvent } from "../PanelGroupContext";
 import { Direction } from "../types";
-import { isKeyDown } from "./events";
 import { calculateDragOffsetPercentage } from "./calculateDragOffsetPercentage";
+import { getPanelGroupElement } from "./dom/getPanelGroupElement";
+import { isKeyDown } from "./events";
 
 // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
 export function calculateDeltaPercentage(
@@ -15,7 +15,7 @@ export function calculateDeltaPercentage(
   if (isKeyDown(event)) {
     const isHorizontal = direction === "horizontal";
 
-    const groupElement = getPanelGroup(groupId)!;
+    const groupElement = getPanelGroupElement(groupId)!;
     const rect = groupElement.getBoundingClientRect();
     const groupSizeInPixels = isHorizontal ? rect.width : rect.height;
 

packages/react-resizable-panels/src/new/utils/calculateDragOffsetPercentage.ts

@@ -1,6 +1,7 @@
-import { getPanelGroup, getResizeHandle } from "../../utils/group";
 import { DragState, ResizeEvent } from "../PanelGroupContext";
 import { Direction } from "../types";
+import { getPanelGroupElement } from "./dom/getPanelGroupElement";
+import { getResizeHandleElement } from "./dom/getResizeHandleElement";
 import { getResizeEventCursorPosition } from "./getResizeEventCursorPosition";
 
 export function calculateDragOffsetPercentage(
@@ -11,14 +12,14 @@ export function calculateDragOffsetPercentage(
 ): number {
   const isHorizontal = direction === "horizontal";
 
-  const handleElement = getResizeHandle(dragHandleId)!;
+  const handleElement = getResizeHandleElement(dragHandleId)!;
   const groupId = handleElement.getAttribute("data-panel-group-id")!;
 
   let { initialCursorPosition } = initialDragState;
 
   const cursorPosition = getResizeEventCursorPosition(direction, event);
 
-  const groupElement = getPanelGroup(groupId)!;
+  const groupElement = getPanelGroupElement(groupId)!;
   const groupRect = groupElement.getBoundingClientRect();
   const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
 

packages/react-resizable-panels/src/new/utils/determinePivotIndices.ts

@@ -1,12 +1,10 @@
-import { getResizeHandle, getResizeHandlesForGroup } from "../../utils/group";
+import { getResizeHandleElementIndex } from "./dom/getResizeHandleElementIndex";
 
 export function determinePivotIndices(
   groupId: string,
   dragHandleId: string
 ): [indexBefore: number, indexAfter: number] {
-  const handle = getResizeHandle(dragHandleId);
-  const handles = getResizeHandlesForGroup(groupId);
-  const index = handle ? handles.indexOf(handle) : -1;
+  const index = getResizeHandleElementIndex(groupId, dragHandleId);
 
-  return [index, index + 1];
+  return index != null ? [index, index + 1] : [-1, -1];
 }