react-resizable-panels 1.0.0-rc.2 → 1.0.0-rc.3

package/dist/react-resizable-panels.node.cjs.js

@@ -1116,7 +1116,7 @@ function PanelGroupWithForwardedRef({
         // Store size before collapse;
         // This is the size that gets restored if the expand() API is used.
         panelSizeBeforeCollapseRef.current.set(panelData.id, panelSize);
-        const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
         const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
@@ -1158,7 +1158,7 @@ function PanelGroupWithForwardedRef({
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
         const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
-        const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
         const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
@@ -1197,7 +1197,7 @@ function PanelGroupWithForwardedRef({
     const {
       panelDataArray
     } = eagerValuesRef.current;
-    const panelIndex = panelDataArray.indexOf(panelData);
+    const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
       dragState,
       layout,
@@ -1245,6 +1245,19 @@ function PanelGroupWithForwardedRef({
       layout: prevLayout,
       panelDataArray
     } = eagerValuesRef.current;
+
+    // HACK
+    // This appears to be triggered by some React Suspense+Offscreen+StrictMode bug;
+    // see app.replay.io/recording/17b6e11d-4500-4173-b23d-61dfd141fed1
+    const index = findPanelDataIndex(panelDataArray, panelData);
+    if (index >= 0) {
+      if (panelData.idIsFromProps) {
+        console.warn(`Panel with id "${panelData.id}" registered twice`);
+      } else {
+        console.warn(`Panel registered twice`);
+      }
+      return;
+    }
     panelDataArray.push(panelData);
     panelDataArray.sort((panelA, panelB) => {
       const orderA = panelA.order;
@@ -1386,7 +1399,7 @@ function PanelGroupWithForwardedRef({
       pivotIndices
     } = panelDataHelper(panelDataArray, panelData, prevLayout);
     assert(panelSize != null);
-    const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+    const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
     const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
     const nextLayout = adjustLayoutByDelta({
       delta,
@@ -1437,7 +1450,7 @@ function PanelGroupWithForwardedRef({
       layout: prevLayout,
       panelDataArray
     } = eagerValuesRef.current;
-    const index = panelDataArray.indexOf(panelData);
+    const index = findPanelDataIndex(panelDataArray, panelData);
     if (index >= 0) {
       panelDataArray.splice(index, 1);
       unregisterPanelRef.current.pendingPanelIds.add(panelData.id);
@@ -1453,7 +1466,7 @@ function PanelGroupWithForwardedRef({
       const {
         pendingPanelIds
       } = unregisterPanelRef.current;
-      const map = panelIdToLastNotifiedSizeMapRef.current;
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
 
       // TRICKY
       // Strict effects mode
@@ -1464,15 +1477,15 @@ function PanelGroupWithForwardedRef({
           id
         }) => id === panelId) != null) {
           unmountDueToStrictMode = true;
-
+        } else {
           // TRICKY
           // When a panel is removed from the group, we should delete the most recent prev-size entry for it.
           // If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
           // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
-          delete map[panelData.id];
+          delete panelIdToLastNotifiedSizeMap[panelId];
         }
       });
-      if (!unmountDueToStrictMode) {
+      if (unmountDueToStrictMode) {
         return;
       }
       if (panelDataArray.length === 0) {
@@ -1545,9 +1558,12 @@ const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwar
 }));
 PanelGroupWithForwardedRef.displayName = "PanelGroup";
 PanelGroup.displayName = "forwardRef(PanelGroup)";
+function findPanelDataIndex(panelDataArray, panelData) {
+  return panelDataArray.findIndex(prevPanelData => prevPanelData === panelData || prevPanelData.id === panelData.id);
+}
 function panelDataHelper(panelDataArray, panelData, layout) {
   const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
-  const panelIndex = panelDataArray.indexOf(panelData);
+  const panelIndex = findPanelDataIndex(panelDataArray, panelData);
   const panelConstraints = panelConstraintsArray[panelIndex];
   const isLastPanel = panelIndex === panelDataArray.length - 1;
   const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];

package/dist/react-resizable-panels.node.esm.js

@@ -1092,7 +1092,7 @@ function PanelGroupWithForwardedRef({
         // Store size before collapse;
         // This is the size that gets restored if the expand() API is used.
         panelSizeBeforeCollapseRef.current.set(panelData.id, panelSize);
-        const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
         const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
@@ -1134,7 +1134,7 @@ function PanelGroupWithForwardedRef({
         // Restore this panel to the size it was before it was collapsed, if possible.
         const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
         const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
-        const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
         const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
         const nextLayout = adjustLayoutByDelta({
           delta,
@@ -1173,7 +1173,7 @@ function PanelGroupWithForwardedRef({
     const {
       panelDataArray
     } = eagerValuesRef.current;
-    const panelIndex = panelDataArray.indexOf(panelData);
+    const panelIndex = findPanelDataIndex(panelDataArray, panelData);
     return computePanelFlexBoxStyle({
       dragState,
       layout,
@@ -1221,6 +1221,19 @@ function PanelGroupWithForwardedRef({
       layout: prevLayout,
       panelDataArray
     } = eagerValuesRef.current;
+
+    // HACK
+    // This appears to be triggered by some React Suspense+Offscreen+StrictMode bug;
+    // see app.replay.io/recording/17b6e11d-4500-4173-b23d-61dfd141fed1
+    const index = findPanelDataIndex(panelDataArray, panelData);
+    if (index >= 0) {
+      if (panelData.idIsFromProps) {
+        console.warn(`Panel with id "${panelData.id}" registered twice`);
+      } else {
+        console.warn(`Panel registered twice`);
+      }
+      return;
+    }
     panelDataArray.push(panelData);
     panelDataArray.sort((panelA, panelB) => {
       const orderA = panelA.order;
@@ -1362,7 +1375,7 @@ function PanelGroupWithForwardedRef({
       pivotIndices
     } = panelDataHelper(panelDataArray, panelData, prevLayout);
     assert(panelSize != null);
-    const isLastPanel = panelDataArray.indexOf(panelData) === panelDataArray.length - 1;
+    const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
     const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
     const nextLayout = adjustLayoutByDelta({
       delta,
@@ -1413,7 +1426,7 @@ function PanelGroupWithForwardedRef({
       layout: prevLayout,
       panelDataArray
     } = eagerValuesRef.current;
-    const index = panelDataArray.indexOf(panelData);
+    const index = findPanelDataIndex(panelDataArray, panelData);
     if (index >= 0) {
       panelDataArray.splice(index, 1);
       unregisterPanelRef.current.pendingPanelIds.add(panelData.id);
@@ -1429,7 +1442,7 @@ function PanelGroupWithForwardedRef({
       const {
         pendingPanelIds
       } = unregisterPanelRef.current;
-      const map = panelIdToLastNotifiedSizeMapRef.current;
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
 
       // TRICKY
       // Strict effects mode
@@ -1440,15 +1453,15 @@ function PanelGroupWithForwardedRef({
           id
         }) => id === panelId) != null) {
           unmountDueToStrictMode = true;
-
+        } else {
           // TRICKY
           // When a panel is removed from the group, we should delete the most recent prev-size entry for it.
           // If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
           // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
-          delete map[panelData.id];
+          delete panelIdToLastNotifiedSizeMap[panelId];
         }
       });
-      if (!unmountDueToStrictMode) {
+      if (unmountDueToStrictMode) {
         return;
       }
       if (panelDataArray.length === 0) {
@@ -1521,9 +1534,12 @@ const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwar
 }));
 PanelGroupWithForwardedRef.displayName = "PanelGroup";
 PanelGroup.displayName = "forwardRef(PanelGroup)";
+function findPanelDataIndex(panelDataArray, panelData) {
+  return panelDataArray.findIndex(prevPanelData => prevPanelData === panelData || prevPanelData.id === panelData.id);
+}
 function panelDataHelper(panelDataArray, panelData, layout) {
   const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
-  const panelIndex = panelDataArray.indexOf(panelData);
+  const panelIndex = findPanelDataIndex(panelDataArray, panelData);
   const panelConstraints = panelConstraintsArray[panelIndex];
   const isLastPanel = panelIndex === panelDataArray.length - 1;
   const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.3",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

package/src/NewPanelGroup.ts

@@ -0,0 +1,149 @@
+import { isDevelopment } from "#is-development";
+import { PanelData } from "./Panel";
+import { DragState, PanelGroupContext, ResizeEvent } from "./PanelGroupContext";
+import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
+import useUniqueId from "./hooks/useUniqueId";
+import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterPanelGroupBehavior";
+import { Direction } from "./types";
+import { adjustLayoutByDelta } from "./utils/adjustLayoutByDelta";
+import { areEqual } from "./utils/arrays";
+import { assert } from "./utils/assert";
+import { calculateDeltaPercentage } from "./utils/calculateDeltaPercentage";
+import { calculateUnsafeDefaultLayout } from "./utils/calculateUnsafeDefaultLayout";
+import { callPanelCallbacks } from "./utils/callPanelCallbacks";
+import { compareLayouts } from "./utils/compareLayouts";
+import { computePanelFlexBoxStyle } from "./utils/computePanelFlexBoxStyle";
+import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
+import debounce from "./utils/debounce";
+import { determinePivotIndices } from "./utils/determinePivotIndices";
+import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup";
+import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement";
+import { isKeyDown, isMouseEvent, isTouchEvent } from "./utils/events";
+import { getResizeEventCursorPosition } from "./utils/getResizeEventCursorPosition";
+import { initializeDefaultStorage } from "./utils/initializeDefaultStorage";
+import { loadPanelLayout, savePanelGroupLayout } from "./utils/serialization";
+import { validatePanelConstraints } from "./utils/validatePanelConstraints";
+import { validatePanelGroupLayout } from "./utils/validatePanelGroupLayout";
+import {
+  CSSProperties,
+  ElementType,
+  ForwardedRef,
+  HTMLAttributes,
+  PropsWithChildren,
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "./vendor/react";
+
+const LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
+
+export type ImperativePanelGroupHandle = {
+  getId: () => string;
+  getLayout: () => number[];
+  setLayout: (layout: number[]) => void;
+};
+
+export type PanelGroupStorage = {
+  getItem(name: string): string | null;
+  setItem(name: string, value: string): void;
+};
+
+export type PanelGroupOnLayout = (layout: number[]) => void;
+
+const defaultStorage: PanelGroupStorage = {
+  getItem: (name: string) => {
+    initializeDefaultStorage(defaultStorage);
+    return defaultStorage.getItem(name);
+  },
+  setItem: (name: string, value: string) => {
+    initializeDefaultStorage(defaultStorage);
+    defaultStorage.setItem(name, value);
+  },
+};
+
+export type PanelGroupProps = Omit<HTMLAttributes<ElementType>, "id"> &
+  PropsWithChildren<{
+    autoSaveId?: string | null;
+    className?: string;
+    direction: Direction;
+    id?: string | null;
+    keyboardResizeBy?: number | null;
+    onLayout?: PanelGroupOnLayout | null;
+    storage?: PanelGroupStorage;
+    style?: CSSProperties;
+    tagName?: ElementType;
+  }>;
+
+const debounceMap: {
+  [key: string]: typeof savePanelGroupLayout;
+} = {};
+
+function PanelGroupWithForwardedRef({
+  autoSaveId = null,
+  children,
+  className: classNameFromProps = "",
+  direction,
+  forwardedRef,
+  id: idFromProps = null,
+  onLayout = null,
+  keyboardResizeBy = null,
+  storage = defaultStorage,
+  style: styleFromProps,
+  tagName: Type = "div",
+  ...rest
+}: PanelGroupProps & {
+  forwardedRef: ForwardedRef<ImperativePanelGroupHandle>;
+}) {
+  const groupId = useUniqueId(idFromProps);
+
+  const stateRef = useRef<{
+    layout: number[];
+  }>({
+    layout: [],
+  });
+
+  const context = null as any;
+
+  const style: CSSProperties = {
+    display: "flex",
+    flexDirection: direction === "horizontal" ? "row" : "column",
+    height: "100%",
+    overflow: "hidden",
+    width: "100%",
+  };
+
+  return createElement(
+    PanelGroupContext.Provider,
+    { value: context },
+    createElement(Type, {
+      ...rest,
+
+      children,
+      className: classNameFromProps,
+      style: {
+        ...style,
+        ...styleFromProps,
+      },
+
+      // CSS selectors
+      "data-panel-group": "",
+      "data-panel-group-direction": direction,
+      "data-panel-group-id": groupId,
+    })
+  );
+}
+
+export const PanelGroup = forwardRef<
+  ImperativePanelGroupHandle,
+  PanelGroupProps
+>((props: PanelGroupProps, ref: ForwardedRef<ImperativePanelGroupHandle>) =>
+  createElement(PanelGroupWithForwardedRef, { ...props, forwardedRef: ref })
+);
+
+PanelGroupWithForwardedRef.displayName = "PanelGroup";
+PanelGroup.displayName = "forwardRef(PanelGroup)";