react-resizable-panels 0.0.28 → 0.0.29

package/src/PanelGroup.ts

@@ -16,6 +16,8 @@ import { loadPanelLayout, savePanelGroupLayout } from "./utils/serialization";
 import { getDragOffset, getMovement } from "./utils/coordinates";
 import {
   adjustByDelta,
+  callPanelCallbacks,
+  getBeforeAndAfterIds,
   getFlexGrow,
   getPanelGroup,
   getResizeHandlePanelIds,
@@ -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,
@@ -191,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) => {
@@ -275,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);
         }
@@ -316,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);
 
@@ -337,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

@@ -1,6 +1,13 @@
 import { useEffect, useLayoutEffect } from "react";
 
-const useIsomorphicLayoutEffect =
-  typeof window !== "undefined" ? useLayoutEffect : useEffect;
+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(