react-resizable-panels 0.0.39 → 0.0.41

package/src/hooks/useWindowSplitterBehavior.ts

@@ -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) {
@@ -202,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/index.ts

@@ -3,7 +3,7 @@ import { PanelGroup } from "./PanelGroup";
 import { PanelResizeHandle } from "./PanelResizeHandle";
 
 import type { ImperativePanelHandle, PanelProps } from "./Panel";
-import type { PanelGroupProps } from "./PanelGroup";
+import type { ImperativePanelGroupHandle, PanelGroupProps } from "./PanelGroup";
 import type { PanelResizeHandleProps } from "./PanelResizeHandle";
 import type { PanelGroupStorage } from "./types";
 

package/src/types.ts

@@ -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(