react-resizable-panels 0.0.38 → 0.0.40

package/src/hooks/useWindowSplitterBehavior.ts

@@ -1,4 +1,4 @@
-import { RefObject, useEffect } from "react";
+import { RefObject, useEffect } from "../vendor/react";
 import { PRECISION } from "../constants";
 
 import { CommittedValues, PanelDataMap } from "../PanelGroup";
@@ -15,6 +15,7 @@ import {
   getFlexGrow,
   panelsMapToSortedArray,
 } from "../utils/group";
+import { assert } from "../utils/assert";
 
 // https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
 
@@ -34,14 +35,14 @@ export function useWindowSplitterPanelGroupBehavior({
   panelSizeBeforeCollapse: RefObject<Map<string, number>>;
 }): void {
   useEffect(() => {
-    const { direction, panels } = committedValuesRef.current;
+    const { direction, panels } = committedValuesRef.current!;
 
-    const groupElement = getPanelGroup(groupId);
+    const groupElement = getPanelGroup(groupId)!;
     const { height, width } = groupElement.getBoundingClientRect();
 
     const handles = getResizeHandlesForGroup(groupId);
     const cleanupFunctions = handles.map((handle) => {
-      const handleId = handle.getAttribute("data-panel-resize-handle-id");
+      const handleId = handle.getAttribute("data-panel-resize-handle-id")!;
       const panelsArray = panelsMapToSortedArray(panels);
 
       const [idBefore, idAfter] = getResizeHandlePanelIds(
@@ -114,7 +115,7 @@ export function useWindowSplitterPanelGroupBehavior({
                   idAfter,
                   delta,
                   sizes,
-                  panelSizeBeforeCollapse.current,
+                  panelSizeBeforeCollapse.current!,
                   null
                 );
                 if (sizes !== nextSizes) {
@@ -150,7 +151,14 @@ export function useWindowSplitterPanelGroupBehavior({
     return () => {
       cleanupFunctions.forEach((cleanupFunction) => cleanupFunction());
     };
-  }, [groupId, panels, sizes]);
+  }, [
+    committedValuesRef,
+    groupId,
+    panels,
+    panelSizeBeforeCollapse,
+    setSizes,
+    sizes,
+  ]);
 }
 
 export function useWindowSplitterResizeHandlerBehavior({
@@ -195,6 +203,8 @@ export function useWindowSplitterResizeHandlerBehavior({
           const handles = getResizeHandles();
           const index = getResizeHandleIndex(handleId);
 
+          assert(index !== null);
+
           const nextIndex = event.shiftKey
             ? index > 0
               ? index - 1

package/src/types.ts

@@ -1,4 +1,4 @@
-import { RefObject } from "react";
+import { RefObject } from "./vendor/react";
 
 export type Direction = "horizontal" | "vertical";
 
@@ -18,7 +18,7 @@ export type PanelData = {
     onResize: PanelOnResize | null;
   }>;
   collapsible: boolean;
-  defaultSize: number;
+  defaultSize: number | null;
   id: string;
   maxSize: number;
   minSize: number;

package/src/utils/assert.ts

@@ -0,0 +1,10 @@
+export function assert(
+  expectedCondition: boolean,
+  message: string = "Assertion failed!"
+): asserts expectedCondition {
+  if (!expectedCondition) {
+    console.error(message);
+
+    throw Error(message);
+  }
+}

package/src/utils/coordinates.ts

@@ -36,7 +36,7 @@ export function getDragOffset(
     return 0;
   }
 
-  const handleElement = getResizeHandle(handleId);
+  const handleElement = getResizeHandle(handleId)!;
   const rect =
     initialHandleElementRect || handleElement.getBoundingClientRect();
   const elementOffset = isHorizontal ? rect.left : rect.top;
@@ -67,7 +67,7 @@ export function getMovement(
   if (isKeyDown(event)) {
     const isHorizontal = direction === "horizontal";
 
-    const groupElement = getPanelGroup(groupId);
+    const groupElement = getPanelGroup(groupId)!;
     const rect = groupElement.getBoundingClientRect();
     const groupSizeInPixels = isHorizontal ? rect.width : rect.height;
 

package/src/utils/debounce.ts

@@ -5,7 +5,9 @@ export default function debounce<T extends Function>(
   let timeoutId: NodeJS.Timeout | null = null;
 
   let callable = (...args: any) => {
-    clearTimeout(timeoutId);
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
 
     timeoutId = setTimeout(() => {
       callback(...args);

package/src/utils/group.ts

@@ -124,7 +124,7 @@ export function callPanelCallbacks(
     const prevSize = prevSizes[index];
     if (prevSize !== nextSize) {
       const { callbacksRef, collapsible } = panelsArray[index];
-      const { onCollapse, onResize } = callbacksRef.current;
+      const { onCollapse, onResize } = callbacksRef.current!;
 
       if (onResize) {
         onResize(nextSize);
@@ -238,7 +238,7 @@ export function getResizeHandlePanelIds(
 ): [idBefore: string | null, idAfter: string | null] {
   const handle = getResizeHandle(handleId);
   const handles = getResizeHandlesForGroup(groupId);
-  const index = handles.indexOf(handle);
+  const index = handle ? handles.indexOf(handle) : -1;
 
   const idBefore: string | null = panelsArray[index]?.id ?? null;
   const idAfter: string | null = panelsArray[index + 1]?.id ?? null;
@@ -249,7 +249,19 @@ export function getResizeHandlePanelIds(
 export function panelsMapToSortedArray(
   panels: Map<string, PanelData>
 ): PanelData[] {
-  return Array.from(panels.values()).sort((a, b) => a.order - b.order);
+  return Array.from(panels.values()).sort((panelA, panelB) => {
+    const orderA = panelA.order;
+    const orderB = panelB.order;
+    if (orderA == null && orderB == null) {
+      return 0;
+    } else if (orderA == null) {
+      return -1;
+    } else if (orderB == null) {
+      return 1;
+    } else {
+      return orderA - orderB;
+    }
+  });
 }
 
 function safeResizePanel(

package/src/vendor/react.ts

@@ -0,0 +1,61 @@
+// This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
+// and limitations with ParcelJS parsing of the useId workaround (used below).
+// For the time being, all react-resizable-panels must import "react" with the "* as React" syntax.
+// To avoid mistakes, we use the ESLint "no-restricted-imports" to prevent "react" imports except in this file.
+// See https://github.com/bvaughn/react-resizable-panels/issues/118
+
+// eslint-disable-next-line no-restricted-imports
+import * as React from "react";
+
+// eslint-disable-next-line no-restricted-imports
+import type {
+  CSSProperties,
+  ElementType,
+  ForwardedRef,
+  MouseEvent,
+  ReactNode,
+  RefObject,
+  TouchEvent,
+} from "react";
+
+const {
+  createElement,
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} = React;
+
+// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = (React as any)["useId".toString()] as () => string;
+
+export {
+  createElement,
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+};
+
+export type {
+  CSSProperties,
+  ElementType,
+  ForwardedRef,
+  MouseEvent,
+  ReactNode,
+  RefObject,
+  TouchEvent,
+};