react-resizable-panels 0.0.27 → 0.0.29

package/src/PanelGroup.ts

@@ -5,7 +5,6 @@ import {
   ReactNode,
   useCallback,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -17,13 +16,16 @@ import { loadPanelLayout, savePanelGroupLayout } from "./utils/serialization";
 import { getDragOffset, getMovement } from "./utils/coordinates";
 import {
   adjustByDelta,
+  callPanelCallbacks,
+  getBeforeAndAfterIds,
   getFlexGrow,
   getPanelGroup,
   getResizeHandlePanelIds,
   panelsMapToSortedArray,
 } from "./utils/group";
-import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterBehavior";
+import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 import useUniqueId from "./hooks/useUniqueId";
+import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterBehavior";
 import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
 
 export type CommittedValues = {
@@ -48,7 +50,7 @@ export type PanelGroupProps = {
   tagName?: ElementType;
 };
 
-export default function PanelGroup({
+export function PanelGroup({
   autoSaveId,
   children = null,
   className: classNameFromProps = "",
@@ -67,6 +69,9 @@ export default function PanelGroup({
 
   const dragOffsetRef = useRef<number>(0);
 
+  // Used to support imperative collapse/expand API.
+  const panelSizeBeforeCollapse = useRef<Map<string, number>>(new Map());
+
   // Store committed values to avoid unnecessarily re-running memoization/effects functions.
   const committedValuesRef = useRef<CommittedValues>({
     direction,
@@ -74,7 +79,7 @@ export default function PanelGroup({
     sizes,
   });
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.direction = direction;
     committedValuesRef.current.panels = panels;
     committedValuesRef.current.sizes = sizes;
@@ -91,7 +96,7 @@ export default function PanelGroup({
   // Once all panels have registered themselves,
   // Compute the initial sizes based on default weights.
   // This assumes that panels register during initial mount (no conditional rendering)!
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const sizes = committedValuesRef.current.sizes;
     if (sizes.length === panels.size) {
       // Only compute (or restore) default sizes once per panel configuration.
@@ -168,6 +173,20 @@ export default function PanelGroup({
     (id: string): CSSProperties => {
       const { panels } = committedValuesRef.current;
 
+      // Before mounting, Panels will not yet have registered themselves.
+      // This includes server rendering.
+      // At this point the best we can do is render everything with the same size.
+      if (panels.size === 0) {
+        return {
+          flexBasis: "auto",
+          flexGrow: 1,
+          flexShrink: 1,
+
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden",
+        };
+      }
+
       const flexGrow = getFlexGrow(panels, id, sizes);
 
       return {
@@ -177,9 +196,13 @@ export default function PanelGroup({
 
         // Without this, Panel sizes may be unintentionally overridden by their content.
         overflow: "hidden",
+
+        // Disable pointer events inside of a panel during resize.
+        // This avoid edge cases like nested iframes.
+        pointerEvents: activeHandleId !== null ? "none" : undefined,
       };
     },
-    [direction, sizes]
+    [activeHandleId, direction, sizes]
   );
 
   const registerPanel = useCallback((id: string, panel: PanelData) => {
@@ -261,24 +284,7 @@ export default function PanelGroup({
           setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
 
           // If resize change handlers have been declared, this is the time to call them.
-          nextSizes.forEach((nextSize, index) => {
-            const prevSize = prevSizes[index];
-            if (prevSize !== nextSize) {
-              const { onCollapse, onResize } =
-                panelsArray[index].callbacksRef.current;
-              if (onResize) {
-                onResize(nextSize);
-              }
-
-              if (onCollapse) {
-                if (prevSize === 0 && nextSize !== 0) {
-                  onCollapse(false);
-                } else if (prevSize !== 0 && nextSize === 0) {
-                  onCollapse(true);
-                }
-              }
-            }
-          });
+          callPanelCallbacks(panelsArray, prevSizes, nextSizes);
 
           setSizes(nextSizes);
         }
@@ -302,14 +308,156 @@ export default function PanelGroup({
     });
   }, []);
 
+  const collapsePanel = useCallback((id: string) => {
+    const { panels, sizes: prevSizes } = committedValuesRef.current;
+
+    const panel = panels.get(id);
+    if (panel == null || !panel.collapsible) {
+      return;
+    }
+
+    const panelsArray = panelsMapToSortedArray(panels);
+
+    const index = panelsArray.indexOf(panel);
+    if (index < 0) {
+      return;
+    }
+
+    const currentSize = prevSizes[index];
+    if (currentSize === 0) {
+      // Panel is already collapsed.
+      return;
+    }
+
+    panelSizeBeforeCollapse.current.set(id, currentSize);
+
+    const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
+    if (idBefore == null || idAfter == null) {
+      return;
+    }
+
+    const isLastPanel = index === panelsArray.length - 1;
+    const delta = isLastPanel ? currentSize : 0 - currentSize;
+
+    const nextSizes = adjustByDelta(
+      panels,
+      idBefore,
+      idAfter,
+      delta,
+      prevSizes
+    );
+    if (prevSizes !== nextSizes) {
+      // If resize change handlers have been declared, this is the time to call them.
+      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+
+      setSizes(nextSizes);
+    }
+  }, []);
+
+  const expandPanel = useCallback((id: string) => {
+    const { panels, sizes: prevSizes } = committedValuesRef.current;
+
+    const panel = panels.get(id);
+    if (panel == null) {
+      return;
+    }
+
+    const sizeBeforeCollapse =
+      panelSizeBeforeCollapse.current.get(id) || panel.minSize;
+    if (!sizeBeforeCollapse) {
+      return;
+    }
+
+    const panelsArray = panelsMapToSortedArray(panels);
+
+    const index = panelsArray.indexOf(panel);
+    if (index < 0) {
+      return;
+    }
+
+    const currentSize = prevSizes[index];
+    if (currentSize !== 0) {
+      // Panel is already expanded.
+      return;
+    }
+
+    const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
+    if (idBefore == null || idAfter == null) {
+      return;
+    }
+
+    const isLastPanel = index === panelsArray.length - 1;
+    const delta = isLastPanel ? 0 - sizeBeforeCollapse : sizeBeforeCollapse;
+
+    const nextSizes = adjustByDelta(
+      panels,
+      idBefore,
+      idAfter,
+      delta,
+      prevSizes
+    );
+    if (prevSizes !== nextSizes) {
+      // If resize change handlers have been declared, this is the time to call them.
+      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+
+      setSizes(nextSizes);
+    }
+  }, []);
+
+  const resizePanel = useCallback((id: string, nextSize: number) => {
+    const { panels, sizes: prevSizes } = committedValuesRef.current;
+
+    const panel = panels.get(id);
+    if (panel == null) {
+      return;
+    }
+
+    const panelsArray = panelsMapToSortedArray(panels);
+
+    const index = panelsArray.indexOf(panel);
+    if (index < 0) {
+      return;
+    }
+
+    const currentSize = prevSizes[index];
+    if (currentSize === nextSize) {
+      return;
+    }
+
+    const [idBefore, idAfter] = getBeforeAndAfterIds(id, panelsArray);
+    if (idBefore == null || idAfter == null) {
+      return;
+    }
+
+    const isLastPanel = index === panelsArray.length - 1;
+    const delta = isLastPanel ? currentSize - nextSize : nextSize - currentSize;
+
+    const nextSizes = adjustByDelta(
+      panels,
+      idBefore,
+      idAfter,
+      delta,
+      prevSizes
+    );
+    if (prevSizes !== nextSizes) {
+      // If resize change handlers have been declared, this is the time to call them.
+      callPanelCallbacks(panelsArray, prevSizes, nextSizes);
+
+      setSizes(nextSizes);
+    }
+  }, []);
+
   const context = useMemo(
     () => ({
       activeHandleId,
+      collapsePanel,
       direction,
+      expandPanel,
       getPanelStyle,
       groupId,
       registerPanel,
       registerResizeHandle,
+      resizePanel,
       startDragging: (id: string, event: ResizeEvent) => {
         setActiveHandleId(id);
 
@@ -323,11 +471,14 @@ export default function PanelGroup({
     }),
     [
       activeHandleId,
+      collapsePanel,
       direction,
+      expandPanel,
       getPanelStyle,
       groupId,
       registerPanel,
       registerResizeHandle,
+      resizePanel,
       unregisterPanel,
     ]
   );

package/src/PanelResizeHandle.ts

@@ -27,7 +27,7 @@ export type PanelResizeHandleProps = {
   tagName?: ElementType;
 };
 
-export default function PanelResizeHandle({
+export function PanelResizeHandle({
   children = null,
   className: classNameFromProps = "",
   disabled = false,

package/src/hooks/useIsomorphicEffect.ts

@@ -0,0 +1,13 @@
+import { useEffect, useLayoutEffect } from "react";
+
+const canUseEffectHooks = !!(
+  typeof window !== "undefined" &&
+  typeof window.document !== "undefined" &&
+  typeof window.document.createElement !== "undefined"
+);
+
+const useIsomorphicLayoutEffect = canUseEffectHooks
+  ? useLayoutEffect
+  : () => {};
+
+export default useIsomorphicLayoutEffect;

package/src/index.ts

@@ -1,5 +1,19 @@
-import Panel from "./Panel";
-import PanelGroup from "./PanelGroup";
-import PanelResizeHandle from "./PanelResizeHandle";
+import { Panel } from "./Panel";
+import { PanelGroup } from "./PanelGroup";
+import { PanelResizeHandle } from "./PanelResizeHandle";
 
-export { Panel, PanelGroup, PanelResizeHandle };
+import type { ImperativePanelHandle, PanelProps } from "./Panel";
+import type { PanelGroupProps } from "./PanelGroup";
+import type { PanelResizeHandleProps } from "./PanelResizeHandle";
+
+export {
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+
+  // TypeScript types
+  ImperativePanelHandle,
+  PanelGroupProps,
+  PanelProps,
+  PanelResizeHandleProps,
+};

package/src/utils/group.ts

@@ -83,6 +83,52 @@ export function adjustByDelta(
   return nextSizes;
 }
 
+export function callPanelCallbacks(
+  panelsArray: PanelData[],
+  prevSizes: number[],
+  nextSizes: number[]
+) {
+  nextSizes.forEach((nextSize, index) => {
+    const prevSize = prevSizes[index];
+    if (prevSize !== nextSize) {
+      const { callbacksRef } = panelsArray[index];
+      const { onCollapse, onResize } = callbacksRef.current;
+
+      if (onResize) {
+        onResize(nextSize);
+      }
+
+      if (onCollapse) {
+        if (prevSize === 0 && nextSize !== 0) {
+          onCollapse(false);
+        } else if (prevSize !== 0 && nextSize === 0) {
+          onCollapse(true);
+        }
+      }
+    }
+  });
+}
+
+export function getBeforeAndAfterIds(
+  id: string,
+  panelsArray: PanelData[]
+): [idBefore: string | null, idAFter: string | null] {
+  if (panelsArray.length < 2) {
+    return [null, null];
+  }
+
+  const index = panelsArray.findIndex((panel) => panel.id === id);
+  if (index < 0) {
+    return [null, null];
+  }
+
+  const isLastPanel = index === panelsArray.length - 1;
+  const idBefore = isLastPanel ? panelsArray[index - 1].id : id;
+  const idAfter = isLastPanel ? id : panelsArray[index + 1].id;
+
+  return [idBefore, idAfter];
+}
+
 // This method returns a number between 1 and 100 representing
 // the % of the group's overall space this panel should occupy.
 export function getFlexGrow(