react-resizable-panels 0.0.52 → 0.0.54

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

@@ -24,6 +24,8 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+const isBrowser = typeof window !== "undefined";
+
 // This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
 
 // eslint-disable-next-line no-restricted-imports
@@ -45,8 +47,7 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React__namespace["useId".toString()];
 
-const canUseEffectHooks = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
-const useIsomorphicLayoutEffect = canUseEffectHooks ? useLayoutEffect : () => {};
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
 
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -60,10 +61,6 @@ function useUniqueId(idFromParams = null) {
 }
 
 const PanelGroupContext = createContext(null);
-
-// Workaround for Parcel scope hoisting (which renames objects/functions).
-// Casting to :any is required to avoid corrupting the generated TypeScript types.
-// See github.com/parcel-bundler/parcel/issues/8724
 PanelGroupContext.displayName = "PanelGroupContext";
 
 function PanelWithForwardedRef({
@@ -131,6 +128,7 @@ function PanelWithForwardedRef({
     collapsible,
     defaultSize,
     id: panelId,
+    idWasAutoGenerated: idFromProps == null,
     maxSize,
     minSize,
     order
@@ -142,6 +140,7 @@ function PanelWithForwardedRef({
     panelDataRef.current.collapsible = collapsible;
     panelDataRef.current.defaultSize = defaultSize;
     panelDataRef.current.id = panelId;
+    panelDataRef.current.idWasAutoGenerated = idFromProps == null;
     panelDataRef.current.maxSize = maxSize;
     panelDataRef.current.minSize = minSize;
     panelDataRef.current.order = order;
@@ -181,10 +180,6 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
   ...props,
   forwardedRef: ref
 }));
-
-// Workaround for Parcel scope hoisting (which renames objects/functions).
-// Casting to :any is required to avoid corrupting the generated TypeScript types.
-// See github.com/parcel-bundler/parcel/issues/8724
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
@@ -286,12 +281,18 @@ function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panel
 }
 function callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
   sizes.forEach((size, index) => {
+    const panelRef = panelsArray[index];
+    if (!panelRef) {
+      // Handle initial mount (when panels are registered too late to be in the panels array)
+      // The subsequent render+effects will handle the resize notification
+      return;
+    }
     const {
       callbacksRef,
       collapsedSize,
       collapsible,
       id
-    } = panelsArray[index].current;
+    } = panelRef.current;
     const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];
     if (lastNotifiedSize !== size) {
       panelIdToLastNotifiedSizeMap[id] = size;
@@ -839,6 +840,11 @@ function PanelGroupWithForwardedRef({
   // We store the initial Panel sizes in this ref, and apply move deltas to them instead of to the current sizes.
   // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
   const initialDragStateRef = useRef(null);
+  useRef({
+    didLogDefaultSizeWarning: false,
+    didLogIdAndOrderWarning: false,
+    prevPanelIds: []
+  });
 
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef({
@@ -1286,10 +1292,6 @@ const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwar
   ...props,
   forwardedRef: ref
 }));
-
-// Workaround for Parcel scope hoisting (which renames objects/functions).
-// Casting to :any is required to avoid corrupting the generated TypeScript types.
-// See github.com/parcel-bundler/parcel/issues/8724
 PanelGroupWithForwardedRef.displayName = "PanelGroup";
 PanelGroup.displayName = "forwardRef(PanelGroup)";
 
@@ -1425,10 +1427,6 @@ function PanelResizeHandle({
     tabIndex: 0
   });
 }
-
-// Workaround for Parcel scope hoisting (which renames objects/functions).
-// Casting to :any is required to avoid corrupting the generated TypeScript types.
-// See github.com/parcel-bundler/parcel/issues/8724
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
 exports.Panel = Panel;

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

@@ -24,6 +24,8 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+const isBrowser = typeof window !== "undefined";
+
 // This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
 
 // eslint-disable-next-line no-restricted-imports
@@ -45,8 +47,7 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React__namespace["useId".toString()];
 
-const canUseEffectHooks = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
-const useIsomorphicLayoutEffect = canUseEffectHooks ? useLayoutEffect : () => {};
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
 
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -60,10 +61,6 @@ function useUniqueId(idFromParams = null) {
 }
 
 const PanelGroupContext = createContext(null);
-
-// Workaround for Parcel scope hoisting (which renames objects/functions).
-// Casting to :any is required to avoid corrupting the generated TypeScript types.
-// See github.com/parcel-bundler/parcel/issues/8724
 PanelGroupContext.displayName = "PanelGroupContext";
 
 function PanelWithForwardedRef({
@@ -131,6 +128,7 @@ function PanelWithForwardedRef({
     collapsible,
     defaultSize,
     id: panelId,
+    idWasAutoGenerated: idFromProps == null,
     maxSize,
     minSize,
     order
@@ -142,6 +140,7 @@ function PanelWithForwardedRef({
     panelDataRef.current.collapsible = collapsible;
     panelDataRef.current.defaultSize = defaultSize;
     panelDataRef.current.id = panelId;
+    panelDataRef.current.idWasAutoGenerated = idFromProps == null;
     panelDataRef.current.maxSize = maxSize;
     panelDataRef.current.minSize = minSize;
     panelDataRef.current.order = order;
@@ -181,10 +180,6 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
   ...props,
   forwardedRef: ref
 }));
-
-// Workaround for Parcel scope hoisting (which renames objects/functions).
-// Casting to :any is required to avoid corrupting the generated TypeScript types.
-// See github.com/parcel-bundler/parcel/issues/8724
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
@@ -286,12 +281,18 @@ function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panel
 }
 function callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
   sizes.forEach((size, index) => {
+    const panelRef = panelsArray[index];
+    if (!panelRef) {
+      // Handle initial mount (when panels are registered too late to be in the panels array)
+      // The subsequent render+effects will handle the resize notification
+      return;
+    }
     const {
       callbacksRef,
       collapsedSize,
       collapsible,
       id
-    } = panelsArray[index].current;
+    } = panelRef.current;
     const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];
     if (lastNotifiedSize !== size) {
       panelIdToLastNotifiedSizeMap[id] = size;
@@ -772,13 +773,6 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
   }
 }
 
-function isServerRendering() {
-  try {
-    return typeof window === undefined;
-  } catch (error) {}
-  return true;
-}
-
 const debounceMap = {};
 
 // PanelGroup might be rendering in a server-side environment where localStorage is not available
@@ -846,6 +840,11 @@ function PanelGroupWithForwardedRef({
   // We store the initial Panel sizes in this ref, and apply move deltas to them instead of to the current sizes.
   // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
   const initialDragStateRef = useRef(null);
+  const devWarningsRef = useRef({
+    didLogDefaultSizeWarning: false,
+    didLogIdAndOrderWarning: false,
+    prevPanelIds: []
+  });
 
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef({
@@ -996,6 +995,26 @@ function PanelGroupWithForwardedRef({
       }
       debounceMap[autoSaveId](autoSaveId, panelsArray, sizes, storage);
     }
+    {
+      const {
+        didLogIdAndOrderWarning,
+        prevPanelIds
+      } = devWarningsRef.current;
+      if (!didLogIdAndOrderWarning) {
+        const {
+          panels
+        } = committedValuesRef.current;
+        const panelIds = Array.from(panels.keys());
+        devWarningsRef.current.prevPanelIds = panelIds;
+        const panelsHaveChanged = prevPanelIds.length > 0 && !areEqual(prevPanelIds, panelIds);
+        if (panelsHaveChanged) {
+          if (Array.from(panels.values()).find(panel => panel.current.idWasAutoGenerated || panel.current.order == null)) {
+            devWarningsRef.current.didLogIdAndOrderWarning = true;
+            console.warn(`WARNING: Panel id and order props recommended when panels are dynamically rendered`);
+          }
+        }
+      }
+    }
   }, [autoSaveId, panels, sizes, storage]);
   const getPanelStyle = useCallback((id, defaultSize) => {
     const {
@@ -1007,8 +1026,11 @@ function PanelGroupWithForwardedRef({
     // At this point the best we can do is render everything with the same size.
     if (panels.size === 0) {
       {
-        if (isServerRendering() && defaultSize == null) {
-          console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
+        if (!devWarningsRef.current.didLogDefaultSizeWarning) {
+          if (!isBrowser && defaultSize == null) {
+            devWarningsRef.current.didLogDefaultSizeWarning = true;
+            console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
+          }
         }
       }
       return {
@@ -1298,10 +1320,6 @@ const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwar
   ...props,
   forwardedRef: ref
 }));
-
-// Workaround for Parcel scope hoisting (which renames objects/functions).
-// Casting to :any is required to avoid corrupting the generated TypeScript types.
-// See github.com/parcel-bundler/parcel/issues/8724
 PanelGroupWithForwardedRef.displayName = "PanelGroup";
 PanelGroup.displayName = "forwardRef(PanelGroup)";
 
@@ -1437,10 +1455,6 @@ function PanelResizeHandle({
     tabIndex: 0
   });
 }
-
-// Workaround for Parcel scope hoisting (which renames objects/functions).
-// Casting to :any is required to avoid corrupting the generated TypeScript types.
-// See github.com/parcel-bundler/parcel/issues/8724
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
 exports.Panel = Panel;

package/dist/react-resizable-panels.development.cjs.mjs

@@ -0,0 +1,5 @@
+export {
+  Panel,
+  PanelGroup,
+  PanelResizeHandle
+} from "./react-resizable-panels.development.cjs.js";

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+const isBrowser = typeof window !== "undefined";
+
 // This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
 
 // eslint-disable-next-line no-restricted-imports
@@ -21,8 +23,7 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React["useId".toString()];
 
-const canUseEffectHooks = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
-const useIsomorphicLayoutEffect = canUseEffectHooks ? useLayoutEffect : () => {};
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
 
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -36,10 +37,6 @@ function useUniqueId(idFromParams = null) {
 }
 
 const PanelGroupContext = createContext(null);
-
-// Workaround for Parcel scope hoisting (which renames objects/functions).
-// Casting to :any is required to avoid corrupting the generated TypeScript types.
-// See github.com/parcel-bundler/parcel/issues/8724
 PanelGroupContext.displayName = "PanelGroupContext";
 
 function PanelWithForwardedRef({
@@ -107,6 +104,7 @@ function PanelWithForwardedRef({
     collapsible,
     defaultSize,
     id: panelId,
+    idWasAutoGenerated: idFromProps == null,
     maxSize,
     minSize,
     order
@@ -118,6 +116,7 @@ function PanelWithForwardedRef({
     panelDataRef.current.collapsible = collapsible;
     panelDataRef.current.defaultSize = defaultSize;
     panelDataRef.current.id = panelId;
+    panelDataRef.current.idWasAutoGenerated = idFromProps == null;
     panelDataRef.current.maxSize = maxSize;
     panelDataRef.current.minSize = minSize;
     panelDataRef.current.order = order;
@@ -157,10 +156,6 @@ const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
   ...props,
   forwardedRef: ref
 }));
-
-// Workaround for Parcel scope hoisting (which renames objects/functions).
-// Casting to :any is required to avoid corrupting the generated TypeScript types.
-// See github.com/parcel-bundler/parcel/issues/8724
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 
@@ -262,12 +257,18 @@ function adjustByDelta(event, panels, idBefore, idAfter, delta, prevSizes, panel
 }
 function callPanelCallbacks(panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
   sizes.forEach((size, index) => {
+    const panelRef = panelsArray[index];
+    if (!panelRef) {
+      // Handle initial mount (when panels are registered too late to be in the panels array)
+      // The subsequent render+effects will handle the resize notification
+      return;
+    }
     const {
       callbacksRef,
       collapsedSize,
       collapsible,
       id
-    } = panelsArray[index].current;
+    } = panelRef.current;
     const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];
     if (lastNotifiedSize !== size) {
       panelIdToLastNotifiedSizeMap[id] = size;
@@ -748,13 +749,6 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
   }
 }
 
-function isServerRendering() {
-  try {
-    return typeof window === undefined;
-  } catch (error) {}
-  return true;
-}
-
 const debounceMap = {};
 
 // PanelGroup might be rendering in a server-side environment where localStorage is not available
@@ -822,6 +816,11 @@ function PanelGroupWithForwardedRef({
   // We store the initial Panel sizes in this ref, and apply move deltas to them instead of to the current sizes.
   // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
   const initialDragStateRef = useRef(null);
+  const devWarningsRef = useRef({
+    didLogDefaultSizeWarning: false,
+    didLogIdAndOrderWarning: false,
+    prevPanelIds: []
+  });
 
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef({
@@ -972,6 +971,26 @@ function PanelGroupWithForwardedRef({
       }
       debounceMap[autoSaveId](autoSaveId, panelsArray, sizes, storage);
     }
+    {
+      const {
+        didLogIdAndOrderWarning,
+        prevPanelIds
+      } = devWarningsRef.current;
+      if (!didLogIdAndOrderWarning) {
+        const {
+          panels
+        } = committedValuesRef.current;
+        const panelIds = Array.from(panels.keys());
+        devWarningsRef.current.prevPanelIds = panelIds;
+        const panelsHaveChanged = prevPanelIds.length > 0 && !areEqual(prevPanelIds, panelIds);
+        if (panelsHaveChanged) {
+          if (Array.from(panels.values()).find(panel => panel.current.idWasAutoGenerated || panel.current.order == null)) {
+            devWarningsRef.current.didLogIdAndOrderWarning = true;
+            console.warn(`WARNING: Panel id and order props recommended when panels are dynamically rendered`);
+          }
+        }
+      }
+    }
   }, [autoSaveId, panels, sizes, storage]);
   const getPanelStyle = useCallback((id, defaultSize) => {
     const {
@@ -983,8 +1002,11 @@ function PanelGroupWithForwardedRef({
     // At this point the best we can do is render everything with the same size.
     if (panels.size === 0) {
       {
-        if (isServerRendering() && defaultSize == null) {
-          console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
+        if (!devWarningsRef.current.didLogDefaultSizeWarning) {
+          if (!isBrowser && defaultSize == null) {
+            devWarningsRef.current.didLogDefaultSizeWarning = true;
+            console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
+          }
         }
       }
       return {
@@ -1274,10 +1296,6 @@ const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwar
   ...props,
   forwardedRef: ref
 }));
-
-// Workaround for Parcel scope hoisting (which renames objects/functions).
-// Casting to :any is required to avoid corrupting the generated TypeScript types.
-// See github.com/parcel-bundler/parcel/issues/8724
 PanelGroupWithForwardedRef.displayName = "PanelGroup";
 PanelGroup.displayName = "forwardRef(PanelGroup)";
 
@@ -1413,10 +1431,6 @@ function PanelResizeHandle({
     tabIndex: 0
   });
 }
-
-// Workaround for Parcel scope hoisting (which renames objects/functions).
-// Casting to :any is required to avoid corrupting the generated TypeScript types.
-// See github.com/parcel-bundler/parcel/issues/8724
 PanelResizeHandle.displayName = "PanelResizeHandle";
 
 export { Panel, PanelGroup, PanelResizeHandle };