fix most lint errors

packages/react-resizable-panels/src/Panel.test.tsx

@@ -21,7 +21,7 @@ describe("PanelGroup", () => {
   }
 
   beforeEach(() => {
-    // @ts-expect-error
+    // @ts-expect-error No type definitions for global
     global.IS_REACT_ACT_ENVIRONMENT = true;
 
     uninstallMockOffsetWidthAndHeight = mockPanelGroupOffsetWidthAndHeight();
@@ -447,9 +447,9 @@ describe("PanelGroup", () => {
         );
       });
 
-      let leftElement = getPanelElement("left", container);
-      let middleElement = getPanelElement("middle", container);
-      let rightElement = getPanelElement("right", container);
+      const leftElement = getPanelElement("left", container);
+      const middleElement = getPanelElement("middle", container);
+      const rightElement = getPanelElement("right", container);
       assert(leftElement, "");
       assert(middleElement, "");
       assert(rightElement, "");
@@ -499,9 +499,9 @@ describe("PanelGroup", () => {
         );
       });
 
-      let leftElement = getPanelElement("left", container);
-      let middleElement = getPanelElement("middle", container);
-      let rightElement = getPanelElement("right", container);
+      const leftElement = getPanelElement("left", container);
+      const middleElement = getPanelElement("middle", container);
+      const rightElement = getPanelElement("right", container);
       assert(leftElement, "");
       assert(middleElement, "");
       assert(rightElement, "");
@@ -539,9 +539,9 @@ describe("PanelGroup", () => {
         );
       });
 
-      let leftElement = getPanelElement("left", container);
-      let middleElement = getPanelElement("middle", container);
-      let rightElement = getPanelElement("right", container);
+      const leftElement = getPanelElement("left", container);
+      const middleElement = getPanelElement("middle", container);
+      const rightElement = getPanelElement("right", container);
       assert(leftElement, "");
       assert(middleElement, "");
       assert(rightElement, "");
@@ -579,9 +579,9 @@ describe("PanelGroup", () => {
         );
       });
 
-      let leftElement = getPanelElement("left", container);
-      let middleElement = getPanelElement("middle", container);
-      let rightElement = getPanelElement("right", container);
+      const leftElement = getPanelElement("left", container);
+      const middleElement = getPanelElement("middle", container);
+      const rightElement = getPanelElement("right", container);
       assert(leftElement, "");
       assert(middleElement, "");
       assert(rightElement, "");
@@ -610,8 +610,8 @@ describe("PanelGroup", () => {
   describe("callbacks", () => {
     describe("onCollapse", () => {
       it("should be called on mount if a panels initial size is 0", () => {
-        let onCollapseLeft = jest.fn();
-        let onCollapseRight = jest.fn();
+        const onCollapseLeft = jest.fn();
+        const onCollapseRight = jest.fn();
 
         act(() => {
           root.render(
@@ -628,9 +628,9 @@ describe("PanelGroup", () => {
       });
 
       it("should be called when a panel is collapsed", () => {
-        let onCollapse = jest.fn();
+        const onCollapse = jest.fn();
 
-        let panelRef = createRef<ImperativePanelHandle>();
+        const panelRef = createRef<ImperativePanelHandle>();
 
         act(() => {
           root.render(
@@ -652,9 +652,9 @@ describe("PanelGroup", () => {
       });
 
       it("should be called with collapsedSizes that have many decimal places", () => {
-        let onCollapse = jest.fn();
+        const onCollapse = jest.fn();
 
-        let panelRef = createRef<ImperativePanelHandle>();
+        const panelRef = createRef<ImperativePanelHandle>();
 
         act(() => {
           root.render(
@@ -692,8 +692,8 @@ describe("PanelGroup", () => {
 
     describe("onExpand", () => {
       it("should be called on mount if a collapsible panels initial size is not 0", () => {
-        let onExpandLeft = jest.fn();
-        let onExpandRight = jest.fn();
+        const onExpandLeft = jest.fn();
+        const onExpandRight = jest.fn();
 
         act(() => {
           root.render(
@@ -710,9 +710,8 @@ describe("PanelGroup", () => {
       });
 
       it("should be called when a collapsible panel is expanded", () => {
-        let onExpand = jest.fn();
-
-        let panelRef = createRef<ImperativePanelHandle>();
+        const onExpand = jest.fn();
+        const panelRef = createRef<ImperativePanelHandle>();
 
         act(() => {
           root.render(
@@ -739,9 +738,8 @@ describe("PanelGroup", () => {
       });
 
       it("should be called with collapsedSizes that have many decimal places", () => {
-        let onExpand = jest.fn();
-
-        let panelRef = createRef<ImperativePanelHandle>();
+        const onExpand = jest.fn();
+        const panelRef = createRef<ImperativePanelHandle>();
 
         act(() => {
           root.render(
@@ -780,9 +778,9 @@ describe("PanelGroup", () => {
 
     describe("onResize", () => {
       it("should be called on mount", () => {
-        let onResizeLeft = jest.fn();
-        let onResizeMiddle = jest.fn();
-        let onResizeRight = jest.fn();
+        const onResizeLeft = jest.fn();
+        const onResizeMiddle = jest.fn();
+        const onResizeRight = jest.fn();
 
         act(() => {
           root.render(
@@ -810,9 +808,9 @@ describe("PanelGroup", () => {
       });
 
       it("should be called when a panel is added or removed from the group", () => {
-        let onResizeLeft = jest.fn();
-        let onResizeMiddle = jest.fn();
-        let onResizeRight = jest.fn();
+        const onResizeLeft = jest.fn();
+        const onResizeMiddle = jest.fn();
+        const onResizeRight = jest.fn();
 
         act(() => {
           root.render(
@@ -907,8 +905,8 @@ describe("PanelGroup", () => {
     });
 
     it("should support sizes with many decimal places", () => {
-      let panelRef = createRef<ImperativePanelHandle>();
-      let onResize = jest.fn();
+      const onResize = jest.fn();
+      const panelRef = createRef<ImperativePanelHandle>();
 
       act(() => {
         root.render(
@@ -1029,19 +1027,21 @@ describe("PanelGroup", () => {
   });
 
   describe("DEV warnings", () => {
-    it("should warn about server rendered panels with no default size", () => {
+    it("should warn about server rendered panels with no default size", async () => {
       jest.resetModules();
       jest.mock("#is-browser", () => ({ isBrowser: false }));
 
-      const { TextEncoder } = require("util");
+      const { TextEncoder } = await import("util");
       global.TextEncoder = TextEncoder;
 
-      const { renderToStaticMarkup } = require("react-dom/server.browser");
-      const { act } = require("react-dom/test-utils");
-      const Panel = require("./Panel").Panel;
-      const PanelGroup = require("./PanelGroup").PanelGroup;
-      const PanelResizeHandle =
-        require("./PanelResizeHandle").PanelResizeHandle;
+      const { renderToStaticMarkup } = (await import(
+        // @ts-expect-error No type definitions for server.browser
+        "react-dom/server.browser"
+      )) as typeof import("react-dom/server");
+      const { act } = await import("react-dom/test-utils");
+      const { Panel } = await import("./Panel");
+      const { PanelGroup } = await import("./PanelGroup");
+      const { PanelResizeHandle } = await import("./PanelResizeHandle");
 
       act(() => {
         // No warning expected if default sizes provided

packages/react-resizable-panels/src/Panel.ts

@@ -243,7 +243,7 @@ export function PanelWithForwardedRef({
 
     // CSS selectors
     "data-panel": "",
-    "data-panel-collapsible": collapsible || undefined,
+    "data-panel-collapsible": collapsible ?? undefined,
     "data-panel-group-id": groupId,
     "data-panel-id": panelId,
     "data-panel-size": parseFloat("" + style.flexGrow).toFixed(1),

packages/react-resizable-panels/src/PanelGroup.test.tsx

@@ -1,6 +1,6 @@
 // @ts-expect-error This is an experimental API
 // eslint-disable-next-line no-restricted-imports
-import { unstable_Activity as Activity, Fragment } from "react";
+import { unstable_Activity as Activity } from "react";
 import { Root, createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
 import {
@@ -30,7 +30,7 @@ describe("PanelGroup", () => {
   }
 
   beforeEach(() => {
-    // @ts-expect-error
+    // @ts-expect-error global.IS_REACT_ACT_ENVIRONMENT is not typed
     global.IS_REACT_ACT_ENVIRONMENT = true;
 
     // JSDom doesn't support element sizes
@@ -232,7 +232,7 @@ describe("PanelGroup", () => {
   describe("callbacks", () => {
     describe("onLayout", () => {
       it("should be called with the initial group layout on mount", () => {
-        let onLayout = jest.fn();
+        const onLayout = jest.fn();
 
         act(() => {
           root.render(
@@ -249,9 +249,9 @@ describe("PanelGroup", () => {
       });
 
       it("should be called any time the group layout changes", () => {
-        let onLayout = jest.fn();
-        let panelGroupRef = createRef<ImperativePanelGroupHandle>();
-        let panelRef = createRef<ImperativePanelHandle>();
+        const onLayout = jest.fn();
+        const panelGroupRef = createRef<ImperativePanelGroupHandle>();
+        const panelRef = createRef<ImperativePanelHandle>();
 
         act(() => {
           root.render(

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

@@ -103,9 +103,7 @@ export type PanelGroupProps = Omit<
     dir?: "auto" | "ltr" | "rtl" | undefined;
   }>;
 
-const debounceMap: {
-  [key: string]: typeof savePanelGroupState;
-} = {};
+const debounceMap: Record<string, typeof savePanelGroupState> = {};
 
 function PanelGroupWithForwardedRef({
   autoSaveId = null,
@@ -553,7 +551,6 @@ function PanelGroupWithForwardedRef({
   );
 
   // (Re)calculate group layout whenever panels are registered or unregistered.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   useIsomorphicLayoutEffect(() => {
     if (eagerValuesRef.current.panelDataArrayChanged) {
       eagerValuesRef.current.panelDataArrayChanged = false;

packages/react-resizable-panels/src/PanelResizeHandle.test.tsx

@@ -27,7 +27,7 @@ describe("PanelResizeHandle", () => {
   let container: HTMLElement;
 
   beforeEach(() => {
-    // @ts-expect-error
+    // @ts-expect-error globalThis is not typed
     global.IS_REACT_ACT_ENVIRONMENT = true;
     container = document.createElement("div");
     document.body.appendChild(container);

packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts

@@ -31,10 +31,10 @@ export const EXCEEDED_VERTICAL_MAX = 0b1000;
 
 const isCoarsePointer = getInputType() === "coarse";
 
-let intersectingHandles: ResizeHandlerData[] = [];
+const intersectingHandles: ResizeHandlerData[] = [];
 let isPointerDown = false;
-let ownerDocumentCounts: Map<Document, number> = new Map();
-let panelConstraintFlags: Map<string, number> = new Map();
+const ownerDocumentCounts = new Map<Document, number>();
+const panelConstraintFlags = new Map<string, number>();
 
 const registeredResizeHandlers = new Set<ResizeHandlerData>();
 

packages/react-resizable-panels/src/hooks/useIsomorphicEffect.ts

@@ -3,6 +3,6 @@ import { useLayoutEffect_do_not_use_directly } from "../vendor/react";
 
 const useIsomorphicLayoutEffect = isBrowser
   ? useLayoutEffect_do_not_use_directly
-  : () => {};
+  : () => undefined;
 
 export default useIsomorphicLayoutEffect;

packages/react-resizable-panels/src/hooks/useUniqueId.ts

@@ -10,7 +10,7 @@ export default function useUniqueId(
 ): string {
   const idFromUseId = wrappedUseId();
 
-  const idRef = useRef<string | null>(idFromParams || idFromUseId || null);
+  const idRef = useRef<string | null>(idFromParams ?? idFromUseId ?? null);
   if (idRef.current === null) {
     idRef.current = "" + counter++;
   }

packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts

@@ -74,7 +74,8 @@ export function useWindowSplitterResizeHandlerBehavior({
               ? index + 1
               : 0;
 
-          const nextHandle = handles[nextIndex] as HTMLElement;
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          const nextHandle = handles[nextIndex]!;
           nextHandle.focus();
 
           break;

packages/react-resizable-panels/src/hooks/useWindowSplitterPanelGroupBehavior.ts

@@ -91,7 +91,7 @@ export function useWindowSplitterPanelGroupBehavior({
     }
 
     return () => {
-      resizeHandleElements.forEach((resizeHandleElement, index) => {
+      resizeHandleElements.forEach((resizeHandleElement) => {
         resizeHandleElement.removeAttribute("aria-controls");
         resizeHandleElement.removeAttribute("aria-valuemax");
         resizeHandleElement.removeAttribute("aria-valuemin");
@@ -125,7 +125,7 @@ export function useWindowSplitterPanelGroupBehavior({
         panelGroupElement
       );
       if (idBefore == null || idAfter == null) {
-        return () => {};
+        return () => undefined;
       }
 
       const onKeyDown = (event: KeyboardEvent) => {

packages/react-resizable-panels/src/utils/arrays.ts

@@ -1,4 +1,4 @@
-export function areEqual(arrayA: any[], arrayB: any[]): boolean {
+export function areEqual(arrayA: unknown[], arrayB: unknown[]): boolean {
   if (arrayA.length !== arrayB.length) {
     return false;
   }

packages/react-resizable-panels/src/utils/assert.ts

@@ -1,5 +1,5 @@
 export function assert(
-  expectedCondition: any,
+  expectedCondition: unknown,
   message: string
 ): asserts expectedCondition {
   if (!expectedCondition) {

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

@@ -23,7 +23,7 @@ export function calculateDragOffsetPercentage(
   const groupId = handleElement.getAttribute("data-panel-group-id");
   assert(groupId, `Resize handle element has no group id attribute`);
 
-  let { initialCursorPosition } = initialDragState;
+  const { initialCursorPosition } = initialDragState;
 
   const cursorPosition = getResizeEventCursorPosition(direction, event);
 

packages/react-resizable-panels/src/utils/cursor.ts

@@ -9,7 +9,7 @@ import { getNonce } from "./csp";
 type CursorState = "horizontal" | "intersection" | "vertical";
 
 let currentCursorStyle: string | null = null;
-let enabled: boolean = true;
+let enabled = true;
 let styleElement: HTMLStyleElement | null = null;
 
 export function disableGlobalCursorStyles() {

packages/react-resizable-panels/src/utils/debounce.ts

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

packages/react-resizable-panels/src/utils/dom/getPanelGroupElement.ts

@@ -5,9 +5,9 @@ export function getPanelGroupElement(
   //If the root element is the PanelGroup
   if (
     rootElement instanceof HTMLElement &&
-    (rootElement as HTMLElement)?.dataset?.panelGroupId == id
+    rootElement?.dataset?.panelGroupId == id
   ) {
-    return rootElement as HTMLElement;
+    return rootElement;
   }
 
   //Else query children