From ab029e4be48901a970427d16f18639967af9f347 Mon Sep 17 00:00:00 2001 From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com> Date: Sun, 17 Nov 2024 15:17:42 +0330 Subject: [PATCH] fix most lint errors --- .../react-resizable-panels/src/Panel.test.tsx | 86 +++++++++---------- packages/react-resizable-panels/src/Panel.ts | 2 +- .../src/PanelGroup.test.tsx | 12 +-- .../react-resizable-panels/src/PanelGroup.ts | 5 +- .../src/PanelResizeHandle.test.tsx | 2 +- .../src/PanelResizeHandleRegistry.ts | 6 +- .../src/hooks/useIsomorphicEffect.ts | 2 +- .../src/hooks/useUniqueId.ts | 2 +- .../src/hooks/useWindowSplitterBehavior.ts | 3 +- .../useWindowSplitterPanelGroupBehavior.ts | 4 +- .../src/utils/arrays.ts | 2 +- .../src/utils/assert.ts | 2 +- .../utils/calculateDragOffsetPercentage.ts | 2 +- .../src/utils/cursor.ts | 2 +- .../src/utils/debounce.ts | 8 +- .../src/utils/dom/getPanelGroupElement.ts | 4 +- .../src/utils/initializeDefaultStorage.ts | 2 +- .../src/utils/numbers/fuzzyLayoutsEqual.ts | 6 +- .../rects/getIntersectingRectangle.test.ts | 2 +- .../src/utils/rects/intersects.test.ts | 2 +- .../src/utils/resizePanel.ts | 2 +- .../src/utils/serialization.ts | 12 +-- .../src/utils/test-utils.ts | 14 +-- .../src/vendor/react.ts | 2 + .../src/vendor/stacking-order.ts | 13 +-- 25 files changed, 101 insertions(+), 98 deletions(-) diff --git a/packages/react-resizable-panels/src/Panel.test.tsx b/packages/react-resizable-panels/src/Panel.test.tsx index 647df0698..b873d8704 100644 --- a/packages/react-resizable-panels/src/Panel.test.tsx +++ b/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(); + const panelRef = createRef(); 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(); + const panelRef = createRef(); 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(); + const onExpand = jest.fn(); + const panelRef = createRef(); 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(); + const onExpand = jest.fn(); + const panelRef = createRef(); 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(); - let onResize = jest.fn(); + const onResize = jest.fn(); + const panelRef = createRef(); 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 diff --git a/packages/react-resizable-panels/src/Panel.ts b/packages/react-resizable-panels/src/Panel.ts index 5873afc9a..3cefdb43a 100644 --- a/packages/react-resizable-panels/src/Panel.ts +++ b/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), diff --git a/packages/react-resizable-panels/src/PanelGroup.test.tsx b/packages/react-resizable-panels/src/PanelGroup.test.tsx index 223c65c24..6eda123ff 100644 --- a/packages/react-resizable-panels/src/PanelGroup.test.tsx +++ b/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(); - let panelRef = createRef(); + const onLayout = jest.fn(); + const panelGroupRef = createRef(); + const panelRef = createRef(); act(() => { root.render( diff --git a/packages/react-resizable-panels/src/PanelGroup.ts b/packages/react-resizable-panels/src/PanelGroup.ts index 82a8d1720..4408e1384 100644 --- a/packages/react-resizable-panels/src/PanelGroup.ts +++ b/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 = {}; 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; diff --git a/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx b/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx index e7c3e7111..ec613f807 100644 --- a/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx +++ b/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); diff --git a/packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts b/packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts index 3885a9ad9..562ff42d8 100644 --- a/packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts +++ b/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 = new Map(); -let panelConstraintFlags: Map = new Map(); +const ownerDocumentCounts = new Map(); +const panelConstraintFlags = new Map(); const registeredResizeHandlers = new Set(); diff --git a/packages/react-resizable-panels/src/hooks/useIsomorphicEffect.ts b/packages/react-resizable-panels/src/hooks/useIsomorphicEffect.ts index c1eac1b61..61ccb8e3e 100644 --- a/packages/react-resizable-panels/src/hooks/useIsomorphicEffect.ts +++ b/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; diff --git a/packages/react-resizable-panels/src/hooks/useUniqueId.ts b/packages/react-resizable-panels/src/hooks/useUniqueId.ts index a3d49a814..7629f9547 100644 --- a/packages/react-resizable-panels/src/hooks/useUniqueId.ts +++ b/packages/react-resizable-panels/src/hooks/useUniqueId.ts @@ -10,7 +10,7 @@ export default function useUniqueId( ): string { const idFromUseId = wrappedUseId(); - const idRef = useRef(idFromParams || idFromUseId || null); + const idRef = useRef(idFromParams ?? idFromUseId ?? null); if (idRef.current === null) { idRef.current = "" + counter++; } diff --git a/packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts b/packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts index b0123bef9..5515faa27 100644 --- a/packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts +++ b/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; diff --git a/packages/react-resizable-panels/src/hooks/useWindowSplitterPanelGroupBehavior.ts b/packages/react-resizable-panels/src/hooks/useWindowSplitterPanelGroupBehavior.ts index 4ec08cf8b..6b82e04aa 100644 --- a/packages/react-resizable-panels/src/hooks/useWindowSplitterPanelGroupBehavior.ts +++ b/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) => { diff --git a/packages/react-resizable-panels/src/utils/arrays.ts b/packages/react-resizable-panels/src/utils/arrays.ts index e49fccf3c..e87106e96 100644 --- a/packages/react-resizable-panels/src/utils/arrays.ts +++ b/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; } diff --git a/packages/react-resizable-panels/src/utils/assert.ts b/packages/react-resizable-panels/src/utils/assert.ts index efe9b462d..c78993c98 100644 --- a/packages/react-resizable-panels/src/utils/assert.ts +++ b/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) { diff --git a/packages/react-resizable-panels/src/utils/calculateDragOffsetPercentage.ts b/packages/react-resizable-panels/src/utils/calculateDragOffsetPercentage.ts index 4b051ba76..dee53307f 100644 --- a/packages/react-resizable-panels/src/utils/calculateDragOffsetPercentage.ts +++ b/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); diff --git a/packages/react-resizable-panels/src/utils/cursor.ts b/packages/react-resizable-panels/src/utils/cursor.ts index de4f903a7..b212d48b5 100644 --- a/packages/react-resizable-panels/src/utils/cursor.ts +++ b/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() { diff --git a/packages/react-resizable-panels/src/utils/debounce.ts b/packages/react-resizable-panels/src/utils/debounce.ts index c7091b50d..db6513af3 100644 --- a/packages/react-resizable-panels/src/utils/debounce.ts +++ b/packages/react-resizable-panels/src/utils/debounce.ts @@ -1,10 +1,10 @@ -export default function debounce( +export default function debounce 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); } @@ -12,7 +12,7 @@ export default function debounce( timeoutId = setTimeout(() => { callback(...args); }, durationMs); - }; + } return callable as unknown as T; } diff --git a/packages/react-resizable-panels/src/utils/dom/getPanelGroupElement.ts b/packages/react-resizable-panels/src/utils/dom/getPanelGroupElement.ts index 76d91d3e7..38dec523a 100644 --- a/packages/react-resizable-panels/src/utils/dom/getPanelGroupElement.ts +++ b/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 diff --git a/packages/react-resizable-panels/src/utils/initializeDefaultStorage.ts b/packages/react-resizable-panels/src/utils/initializeDefaultStorage.ts index 901fa33d2..91a71aded 100644 --- a/packages/react-resizable-panels/src/utils/initializeDefaultStorage.ts +++ b/packages/react-resizable-panels/src/utils/initializeDefaultStorage.ts @@ -21,6 +21,6 @@ export function initializeDefaultStorage(storageObject: PanelGroupStorage) { console.error(error); storageObject.getItem = () => null; - storageObject.setItem = () => {}; + storageObject.setItem = () => undefined; } } diff --git a/packages/react-resizable-panels/src/utils/numbers/fuzzyLayoutsEqual.ts b/packages/react-resizable-panels/src/utils/numbers/fuzzyLayoutsEqual.ts index a664e4228..4d57f4430 100644 --- a/packages/react-resizable-panels/src/utils/numbers/fuzzyLayoutsEqual.ts +++ b/packages/react-resizable-panels/src/utils/numbers/fuzzyLayoutsEqual.ts @@ -10,8 +10,10 @@ export function fuzzyLayoutsEqual( } for (let index = 0; index < actual.length; index++) { - const actualSize = actual[index] as number; - const expectedSize = expected[index] as number; + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const actualSize = actual[index]!; + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const expectedSize = expected[index]!; if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) { return false; diff --git a/packages/react-resizable-panels/src/utils/rects/getIntersectingRectangle.test.ts b/packages/react-resizable-panels/src/utils/rects/getIntersectingRectangle.test.ts index 6afa569c4..40959fc79 100644 --- a/packages/react-resizable-panels/src/utils/rects/getIntersectingRectangle.test.ts +++ b/packages/react-resizable-panels/src/utils/rects/getIntersectingRectangle.test.ts @@ -9,7 +9,7 @@ function forkRect(partial: Partial, baseRect: Rectangle = rect) { } describe("getIntersectingRectangle", () => { - let strict: boolean = false; + let strict = false; function verify(rectOne: Rectangle, rectTwo: Rectangle, expected: Rectangle) { const actual = getIntersectingRectangle(rectOne, rectTwo, strict); diff --git a/packages/react-resizable-panels/src/utils/rects/intersects.test.ts b/packages/react-resizable-panels/src/utils/rects/intersects.test.ts index e87cd62c6..2cf38eca4 100644 --- a/packages/react-resizable-panels/src/utils/rects/intersects.test.ts +++ b/packages/react-resizable-panels/src/utils/rects/intersects.test.ts @@ -9,7 +9,7 @@ function forkRect(partial: Partial, baseRect: Rectangle = rect) { } describe("intersects", () => { - let strict: boolean = false; + let strict = false; function verify(rectOne: Rectangle, rectTwo: Rectangle, expected: boolean) { const actual = intersects(rectOne, rectTwo, strict); diff --git a/packages/react-resizable-panels/src/utils/resizePanel.ts b/packages/react-resizable-panels/src/utils/resizePanel.ts index a69934383..8579eb940 100644 --- a/packages/react-resizable-panels/src/utils/resizePanel.ts +++ b/packages/react-resizable-panels/src/utils/resizePanel.ts @@ -19,7 +19,7 @@ export function resizePanel({ `Panel constraints not found for index ${panelIndex}` ); - let { + const { collapsedSize = 0, collapsible, maxSize = 100, diff --git a/packages/react-resizable-panels/src/utils/serialization.ts b/packages/react-resizable-panels/src/utils/serialization.ts index bbb3b8def..469497cda 100644 --- a/packages/react-resizable-panels/src/utils/serialization.ts +++ b/packages/react-resizable-panels/src/utils/serialization.ts @@ -2,15 +2,11 @@ import { PanelData } from "../Panel"; import { PanelGroupStorage } from "../PanelGroup"; export type PanelConfigurationState = { - expandToSizes: { - [panelId: string]: number; - }; + expandToSizes: Record; layout: number[]; }; -export type SerializedPanelGroupState = { - [panelIds: string]: PanelConfigurationState; -}; +export type SerializedPanelGroupState = Record; function getPanelGroupKey(autoSaveId: string): string { return `react-resizable-panels:${autoSaveId}`; @@ -44,12 +40,12 @@ function loadSerializedPanelGroupState( const panelGroupKey = getPanelGroupKey(autoSaveId); const serialized = storage.getItem(panelGroupKey); if (serialized) { - const parsed = JSON.parse(serialized); + const parsed = JSON.parse(serialized) as unknown; if (typeof parsed === "object" && parsed != null) { return parsed as SerializedPanelGroupState; } } - } catch (error) {} + } catch (_) {} return null; } diff --git a/packages/react-resizable-panels/src/utils/test-utils.ts b/packages/react-resizable-panels/src/utils/test-utils.ts index faa87b985..8f0f6f0e9 100644 --- a/packages/react-resizable-panels/src/utils/test-utils.ts +++ b/packages/react-resizable-panels/src/utils/test-utils.ts @@ -1,6 +1,6 @@ import { assert } from "./assert"; -const util = require("util"); +import util from "util"; export function dispatchPointerEvent(type: string, target: HTMLElement) { const rect = target.getBoundingClientRect(); @@ -46,7 +46,7 @@ export function expectToBeCloseToArray( expect(actualNumber).toBeCloseTo(expectedNumber, 1); }); - } catch (error) { + } catch (_) { expect(actualNumbers).toEqual(expectedNumbers); } } @@ -98,8 +98,10 @@ export function mockPanelGroupOffsetWidthAndHeight( Object.defineProperty(HTMLElement.prototype, "offsetHeight", { configurable: true, get: function () { + // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access if (this.hasAttribute("data-resize-handle")) { return 0; + // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access } else if (this.hasAttribute("data-panel-group")) { return mockHeight; } @@ -109,8 +111,10 @@ export function mockPanelGroupOffsetWidthAndHeight( Object.defineProperty(HTMLElement.prototype, "offsetWidth", { configurable: true, get: function () { + // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access if (this.hasAttribute("data-resize-handle")) { return 0; + // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access } else if (this.hasAttribute("data-panel-group")) { return mockWidth; } @@ -153,15 +157,15 @@ export function verifyExpandedPanelGroupLayout( } export function verifyExpectedWarnings( - callback: Function, + callback: () => void, ...expectedMessages: string[] ) { - const consoleSpy = (format: any, ...args: any[]) => { + const consoleSpy = (format: unknown, ...args: unknown[]) => { const message = util.format(format, ...args); for (let index = 0; index < expectedMessages.length; index++) { const expectedMessage = expectedMessages[index]; - if (message.includes(expectedMessage)) { + if (expectedMessage && message.includes(expectedMessage)) { expectedMessages.splice(index, 1); return; } diff --git a/packages/react-resizable-panels/src/vendor/react.ts b/packages/react-resizable-panels/src/vendor/react.ts index df7315d4c..75bdaee75 100644 --- a/packages/react-resizable-panels/src/vendor/react.ts +++ b/packages/react-resizable-panels/src/vendor/react.ts @@ -37,7 +37,9 @@ const { } = React; // `Math.random()` and `.slice(0, 5)` prevents bundlers from trying to `import { useId } from 'react'` +// eslint-disable-next-line @typescript-eslint/no-explicit-any const useId = (React as any)[ + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access `useId${Math.random()}`.slice(0, 5) ] as () => string; diff --git a/packages/react-resizable-panels/src/vendor/stacking-order.ts b/packages/react-resizable-panels/src/vendor/stacking-order.ts index 22a137b4a..043d02486 100644 --- a/packages/react-resizable-panels/src/vendor/stacking-order.ts +++ b/packages/react-resizable-panels/src/vendor/stacking-order.ts @@ -62,8 +62,9 @@ const props = /** @param {HTMLElement | SVGElement} node */ function is_flex_item(node: HTMLElement | SVGElement) { - // @ts-ignore - const display = getComputedStyle(get_parent(node) ?? node).display; + const display = getComputedStyle( + // @ts-expect-error Forced type + get_parent(node) ?? node).display; return display === "flex" || display === "inline-flex"; } @@ -92,7 +93,7 @@ function creates_stacking_context(node: HTMLElement | SVGElement) { if ("webkitFilter" in style && style.webkitFilter !== "none") return true; if ("isolation" in style && style.isolation === "isolate") return true; if (props.test(style.willChange)) return true; - // @ts-expect-error + // @ts-expect-error webkitOverflowScrolling doesn't exist on style if (style.webkitOverflowScrolling === "touch") return true; return false; @@ -113,7 +114,7 @@ function find_stacking_context(nodes: (HTMLElement | SVGElement)[]) { /** @param {HTMLElement | SVGElement} node */ function get_z_index(node: HTMLElement | SVGElement | null) { - return (node && Number(getComputedStyle(node).zIndex)) || 0; + return (node && Number(getComputedStyle(node).zIndex)) ?? 0; } /** @param {HTMLElement} node */ @@ -122,8 +123,8 @@ function get_ancestors(node: HTMLElement | SVGElement | null) { while (node) { ancestors.push(node); - // @ts-ignore - node = get_parent(node); + // @ts-expect-error Forced type + node = get_parent(node) as Element; } return ancestors; // [ node, ... , , document ]