react-resizable-panels - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/react-resizable-panels.d.ts

 import { ReactNode } from "react";
 type Direction = "horizontal" | "vertical";
-type PanelId = string;
 export function Panel({ children, className, defaultSize, id, minSize, }: {
-    children: ReactNode;
+    children?: ReactNode;
     className?: string;
     defaultSize?: number;
-    id: PanelId;
+    id: string;
     minSize?: number;
-}): any;
+}): JSX.Element;
 type Props = {
     autoSaveId?: string;
-    children: ReactNode[];
+    children?: ReactNode[];
     className?: string;
@@ -19,3 +18,3 @@ direction: Direction;
 };
-export function PanelGroup({ autoSaveId, children, className, direction, height, width }: Props): any;
+export function PanelGroup({ autoSaveId, children, className, direction, height, width, }: Props): JSX.Element;
 export function PanelResizeHandle({ children, className, disabled, panelAfter, panelBefore, }: {
@@ -25,6 +24,6 @@ children?: ReactNode;
     disabled?: boolean;
-    panelAfter: PanelId;
-    panelBefore: PanelId;
-}): any;
+    panelAfter: string;
+    panelBefore: string;
+}): JSX.Element;
 
 //# sourceMappingURL=react-resizable-panels.d.ts.map

dist/react-resizable-panels.js

@@ -1,3 +0,3 @@
-var $8zHUo$reactjsxruntime = require("react/jsx-runtime");
-var $8zHUo$react = require("react");
+var $b2QPe$reactjsxdevruntime = require("react/jsx-dev-runtime");
+var $b2QPe$react = require("react");
 
@@ -8,16 +8,20 @@ function $parcel$export(e, n, v, s) {
 
-$parcel$export(module.exports, "Panel", () => $e4ec07a709221854$export$2e2bcd8739ae039);
-$parcel$export(module.exports, "PanelGroup", () => $da932bb3fa0f399b$export$2e2bcd8739ae039);
-$parcel$export(module.exports, "PanelResizeHandle", () => $4eb88cfd3116c797$export$2e2bcd8739ae039);
+$parcel$export(module.exports, "Panel", () => $6d390b7f2e6b107f$export$2e2bcd8739ae039);
+$parcel$export(module.exports, "PanelGroup", () => $d428eaeef644efb2$export$2e2bcd8739ae039);
+$parcel$export(module.exports, "PanelResizeHandle", () => $d578a49f00f1bdeb$export$2e2bcd8739ae039);
 
 
 
-const $3cc6571444f2cb80$export$7d8c6d083caec74a = (0, $8zHUo$react.createContext)(null);
+const $3251d17c1c3bce6c$export$7d8c6d083caec74a = (0, $b2QPe$react.createContext)(null);
 
 
-function $e4ec07a709221854$export$2e2bcd8739ae039({ children: children , className: className = "" , defaultSize: defaultSize = 0.1 , id: id , minSize: minSize = 0.1  }) {
-    const context = (0, $8zHUo$react.useContext)((0, $3cc6571444f2cb80$export$7d8c6d083caec74a));
+function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null , className: className = "" , defaultSize: defaultSize = 0.1 , id: id , minSize: minSize = 0.1  }) {
+    const context = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
     if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
-    const { getPanelStyle: getPanelStyle , registerPanel: registerPanel  } = context;
-    (0, $8zHUo$react.useLayoutEffect)(()=>{
+    if (minSize > defaultSize) {
+        console.error(`Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`);
+        defaultSize = minSize;
+    }
+    const { getPanelStyle: getPanelStyle , registerPanel: registerPanel , unregisterPanel: unregisterPanel  } = context;
+    (0, $b2QPe$react.useLayoutEffect)(()=>{
         const panel = {
@@ -29,14 +33,22 @@ defaultSize: defaultSize,
         registerPanel(id, panel);
+        return ()=>{
+            unregisterPanel(id);
+        };
     }, [
         defaultSize,
+        id,
         minSize,
         registerPanel,
-        id
+        unregisterPanel
     ]);
     const style = getPanelStyle(id);
-    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+    return /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)("div", {
         className: className,
         style: style,
         children: children
-    });
+    }, void 0, false, {
+        fileName: "packages/react-resizable-panels/src/Panel.tsx",
+        lineNumber: 55,
+        columnNumber: 5
+    }, this);
 }
@@ -48,17 +60,19 @@
 
-const $da932bb3fa0f399b$var$PRECISION = 5;
-function $da932bb3fa0f399b$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children , className: className = "" , direction: direction , height: height , width: width  }) {
-    const panelsRef = (0, $8zHUo$react.useRef)([]);
+const $d428eaeef644efb2$var$PRECISION = 5;
+function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , height: height , width: width  }) {
+    const [panels, setPanels] = (0, $b2QPe$react.useState)(new Map());
     // 0-1 values representing the relative size of each panel.
-    const [sizes, setSizes] = (0, $8zHUo$react.useState)([]);
+    const [sizes, setSizes] = (0, $b2QPe$react.useState)([]);
     // Store committed values to avoid unnecessarily re-running memoization/effects functions.
-    const committedValuesRef = (0, $8zHUo$react.useRef)({
+    const committedValuesRef = (0, $b2QPe$react.useRef)({
         direction: direction,
         height: height,
+        panels: panels,
         sizes: sizes,
         width: width
     });
-    (0, $8zHUo$react.useLayoutEffect)(()=>{
+    (0, $b2QPe$react.useLayoutEffect)(()=>{
         committedValuesRef.current.direction = direction;
         committedValuesRef.current.height = height;
+        committedValuesRef.current.panels = panels;
         committedValuesRef.current.sizes = sizes;
@@ -70,6 +84,7 @@ committedValuesRef.current.width = width;
     // This assumes that panels register during initial mount (no conditional rendering)!
-    (0, $8zHUo$react.useLayoutEffect)(()=>{
-        const panels = panelsRef.current;
+    (0, $b2QPe$react.useLayoutEffect)(()=>{
         const sizes = committedValuesRef.current.sizes;
-        if (sizes.length === panels.length) return;
+        if (sizes.length === panels.size) return;
+        // TODO [panels]
+        // Validate that the total minSize is <= 1.
         // If this panel has been configured to persist sizing information,
@@ -79,26 +94,32 @@ // default size should be restored from local storage if possible.
         if (autoSaveId) try {
-            const value = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+            const value = localStorage.getItem($d428eaeef644efb2$var$createLocalStorageKey(autoSaveId, panels));
             if (value) defaultSizes = JSON.parse(value);
         } catch (error) {}
-        if (sizes.length === 0 && defaultSizes != null && defaultSizes.length === panels.length) setSizes(defaultSizes);
+        if (defaultSizes != null) setSizes(defaultSizes);
         else {
-            const totalWeight = panels.reduce((weight, panel)=>{
+            const panelsArray = Array.from(panels.values());
+            const totalWeight = panelsArray.reduce((weight, panel)=>{
                 return weight + panel.defaultSize;
             }, 0);
-            setSizes(panels.map((panel)=>panel.defaultSize / totalWeight));
+            setSizes(panelsArray.map((panel)=>panel.defaultSize / totalWeight));
         }
     }, [
-        autoSaveId
+        autoSaveId,
+        panels
     ]);
-    (0, $8zHUo$react.useEffect)(()=>{
-        if (autoSaveId && sizes.length > 0) // If this panel has been configured to persist sizing information, save sizes to local storage.
-        localStorage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(sizes));
+    (0, $b2QPe$react.useEffect)(()=>{
+        if (autoSaveId) {
+            if (sizes.length === 0 || sizes.length !== panels.size) return;
+            // If this panel has been configured to persist sizing information, save sizes to local storage.
+            localStorage.setItem($d428eaeef644efb2$var$createLocalStorageKey(autoSaveId, panels), JSON.stringify(sizes));
+        }
     }, [
         autoSaveId,
+        panels,
         sizes
     ]);
-    const getPanelStyle = (0, $8zHUo$react.useCallback)((id)=>{
-        const panels = panelsRef.current;
-        const offset = $da932bb3fa0f399b$var$getOffset(panels, id, direction, sizes, height, width);
-        const size = $da932bb3fa0f399b$var$getSize(panels, id, direction, sizes, height, width);
+    const getPanelStyle = (0, $b2QPe$react.useCallback)((id)=>{
+        const { panels: panels  } = committedValuesRef.current;
+        const offset = $d428eaeef644efb2$var$getOffset(panels, id, direction, sizes, height, width);
+        const size = $d428eaeef644efb2$var$getSize(panels, id, direction, sizes, height, width);
         if (direction === "horizontal") return {
@@ -124,25 +145,36 @@ height: "100%",
     ]);
-    const registerPanel = (0, $8zHUo$react.useCallback)((id, panel)=>{
-        const panels = panelsRef.current;
-        const index = panels.findIndex((panel)=>panel.id === id);
-        if (index >= 0) panels.splice(index, 1);
-        panels.push(panel);
+    const registerPanel = (0, $b2QPe$react.useCallback)((id, panel)=>{
+        setPanels((prevPanels)=>{
+            if (prevPanels.has(id)) return prevPanels;
+            const nextPanels = new Map(prevPanels);
+            nextPanels.set(id, panel);
+            return nextPanels;
+        });
     }, []);
-    const registerResizeHandle = (0, $8zHUo$react.useCallback)((idBefore, idAfter)=>{
+    const registerResizeHandle = (0, $b2QPe$react.useCallback)((idBefore, idAfter)=>{
         return (event)=>{
             event.preventDefault();
-            const panels = panelsRef.current;
-            const { direction: direction , height: height , sizes: prevSizes , width: width  } = committedValuesRef.current;
+            const { direction: direction , height: height , panels: panels , sizes: prevSizes , width: width  } = committedValuesRef.current;
             const isHorizontal = direction === "horizontal";
             const movement = isHorizontal ? event.movementX : event.movementY;
             const delta = isHorizontal ? movement / width : movement / height;
-            const nextSizes = $da932bb3fa0f399b$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes);
+            const nextSizes = $d428eaeef644efb2$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes);
             if (prevSizes !== nextSizes) setSizes(nextSizes);
         };
+    // TODO [issues/5] Add to Map
     }, []);
-    const context = (0, $8zHUo$react.useMemo)(()=>({
+    const unregisterPanel = (0, $b2QPe$react.useCallback)((id)=>{
+        setPanels((prevPanels)=>{
+            if (!prevPanels.has(id)) return prevPanels;
+            const nextPanels = new Map(prevPanels);
+            nextPanels.delete(id);
+            return nextPanels;
+        });
+    }, []);
+    const context = (0, $b2QPe$react.useMemo)(()=>({
             direction: direction,
             getPanelStyle: getPanelStyle,
             registerPanel: registerPanel,
-            registerResizeHandle: registerResizeHandle
+            registerResizeHandle: registerResizeHandle,
+            unregisterPanel: unregisterPanel
         }), [
@@ -152,14 +184,24 @@ direction,
         registerPanel,
-        registerResizeHandle
+        registerResizeHandle,
+        unregisterPanel
     ]);
-    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $3cc6571444f2cb80$export$7d8c6d083caec74a).Provider, {
+    return /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a).Provider, {
         value: context,
-        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+        children: /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)("div", {
             className: className,
             children: children
-        })
-    });
+        }, void 0, false, {
+            fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
+            lineNumber: 224,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
+        lineNumber: 223,
+        columnNumber: 5
+    }, this);
 }
-function $da932bb3fa0f399b$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes) {
+function $d428eaeef644efb2$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes) {
     if (delta === 0) return prevSizes;
+    const panelsArray = Array.from(panels.values());
     const nextSizes = prevSizes.concat();
@@ -175,5 +217,5 @@ let deltaApplied = 0;
     let pivotId = delta < 0 ? idBefore : idAfter;
-    let index = panels.findIndex((panel)=>panel.id === pivotId);
+    let index = panelsArray.findIndex((panel)=>panel.id === pivotId);
     while(true){
-        const panel = panels[index];
+        const panel = panelsArray[index];
         const prevSize = prevSizes[index];
@@ -184,3 +226,3 @@ const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);
             nextSizes[index] = nextSize;
-            if (deltaApplied.toPrecision($da932bb3fa0f399b$var$PRECISION) >= delta.toPrecision($da932bb3fa0f399b$var$PRECISION)) break;
+            if (deltaApplied.toPrecision($d428eaeef644efb2$var$PRECISION) >= delta.toPrecision($d428eaeef644efb2$var$PRECISION)) break;
         }
@@ -190,3 +232,3 @@ if (delta < 0) {
         } else {
-            if (++index >= panels.length) break;
+            if (++index >= panelsArray.length) break;
         }
@@ -199,23 +241,29 @@ }
     pivotId = delta < 0 ? idAfter : idBefore;
-    index = panels.findIndex((panel)=>panel.id === pivotId);
+    index = panelsArray.findIndex((panel)=>panel.id === pivotId);
     nextSizes[index] = prevSizes[index] + deltaApplied;
     return nextSizes;
 }
-function $da932bb3fa0f399b$var$getOffset(panels, id, direction, sizes, height, width) {
-    let index = panels.findIndex((panel)=>panel.id === id);
+function $d428eaeef644efb2$var$createLocalStorageKey(autoSaveId, panels) {
+    const panelIds = Array.from(panels.keys()).sort();
+    return `PanelGroup:sizes:${autoSaveId}${panelIds.join("|")}`;
+}
+function $d428eaeef644efb2$var$getOffset(panels, id, direction, sizes, height, width) {
+    const panelsArray = Array.from(panels.values());
+    let index = panelsArray.findIndex((panel)=>panel.id === id);
     if (index < 0) return 0;
     let scaledOffset = 0;
     for(index = index - 1; index >= 0; index--){
-        const panel = panels[index];
-        scaledOffset += $da932bb3fa0f399b$var$getSize(panels, panel.id, direction, sizes, height, width);
+        const panel = panelsArray[index];
+        scaledOffset += $d428eaeef644efb2$var$getSize(panels, panel.id, direction, sizes, height, width);
     }
     return Math.round(scaledOffset);
 }
-function $da932bb3fa0f399b$var$getSize(panels, id, direction, sizes, height, width) {
-    const index = panels.findIndex((panel)=>panel.id === id);
+function $d428eaeef644efb2$var$getSize(panels, id, direction, sizes, height, width) {
+    const totalSize = direction === "horizontal" ? width : height;
+    if (panels.size === 1) return totalSize;
+    const panelsArray = Array.from(panels.values());
+    const index = panelsArray.findIndex((panel)=>panel.id === id);
     const size = sizes[index];
     if (size == null) return 0;
-    const totalSize = direction === "horizontal" ? width : height;
-    if (panels.length === 1) return totalSize;
-    else return Math.round(size * totalSize);
+    return Math.round(size * totalSize);
 }
@@ -227,9 +275,9 @@
 
-function $4eb88cfd3116c797$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false , panelAfter: panelAfter , panelBefore: panelBefore  }) {
-    const context = (0, $8zHUo$react.useContext)((0, $3cc6571444f2cb80$export$7d8c6d083caec74a));
+function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false , panelAfter: panelAfter , panelBefore: panelBefore  }) {
+    const context = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
     if (context === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
     const { direction: direction , registerResizeHandle: registerResizeHandle  } = context;
-    const [resizeHandler, setResizeHandler] = (0, $8zHUo$react.useState)(null);
-    const [isDragging, setIsDragging] = (0, $8zHUo$react.useState)(false);
-    (0, $8zHUo$react.useEffect)(()=>{
+    const [resizeHandler, setResizeHandler] = (0, $b2QPe$react.useState)(null);
+    const [isDragging, setIsDragging] = (0, $b2QPe$react.useState)(false);
+    (0, $b2QPe$react.useEffect)(()=>{
         if (disabled) setResizeHandler(null);
@@ -243,3 +291,3 @@ else setResizeHandler(()=>registerResizeHandle(panelBefore, panelAfter));
     ]);
-    (0, $8zHUo$react.useEffect)(()=>{
+    (0, $b2QPe$react.useEffect)(()=>{
         if (disabled || resizeHandler == null || !isDragging) return;
@@ -271,3 +319,3 @@ document.body.style.cursor = direction === "horizontal" ? "ew-resize" : "ns-resize";
     ]);
-    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+    return /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)("div", {
         className: className,
@@ -280,3 +328,7 @@ onMouseDown: ()=>setIsDragging(true),
         children: children
-    });
+    }, void 0, false, {
+        fileName: "packages/react-resizable-panels/src/PanelResizeHandle.tsx",
+        lineNumber: 75,
+        columnNumber: 5
+    }, this);
 }
@@ -283,0 +335,0 @@

dist/react-resizable-panels.module.js

@@ -1,3 +0,3 @@
-import {jsx as $hgUW1$jsx} from "react/jsx-runtime";
-import {useContext as $hgUW1$useContext, useLayoutEffect as $hgUW1$useLayoutEffect, createContext as $hgUW1$createContext, useRef as $hgUW1$useRef, useState as $hgUW1$useState, useEffect as $hgUW1$useEffect, useCallback as $hgUW1$useCallback, useMemo as $hgUW1$useMemo} from "react";
+import {jsxDEV as $fpI56$jsxDEV} from "react/jsx-dev-runtime";
+import {useContext as $fpI56$useContext, useLayoutEffect as $fpI56$useLayoutEffect, createContext as $fpI56$createContext, useState as $fpI56$useState, useRef as $fpI56$useRef, useEffect as $fpI56$useEffect, useCallback as $fpI56$useCallback, useMemo as $fpI56$useMemo} from "react";
 
@@ -7,10 +7,14 @@
 
-const $3a3142702e7d9c06$export$7d8c6d083caec74a = (0, $hgUW1$createContext)(null);
+const $f922724f4bad4884$export$7d8c6d083caec74a = (0, $fpI56$createContext)(null);
 
 
-function $be6cfb11a13b6f3f$export$2e2bcd8739ae039({ children: children , className: className = "" , defaultSize: defaultSize = 0.1 , id: id , minSize: minSize = 0.1  }) {
-    const context = (0, $hgUW1$useContext)((0, $3a3142702e7d9c06$export$7d8c6d083caec74a));
+function $ad28bce87b00c2be$export$2e2bcd8739ae039({ children: children = null , className: className = "" , defaultSize: defaultSize = 0.1 , id: id , minSize: minSize = 0.1  }) {
+    const context = (0, $fpI56$useContext)((0, $f922724f4bad4884$export$7d8c6d083caec74a));
     if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
-    const { getPanelStyle: getPanelStyle , registerPanel: registerPanel  } = context;
-    (0, $hgUW1$useLayoutEffect)(()=>{
+    if (minSize > defaultSize) {
+        console.error(`Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`);
+        defaultSize = minSize;
+    }
+    const { getPanelStyle: getPanelStyle , registerPanel: registerPanel , unregisterPanel: unregisterPanel  } = context;
+    (0, $fpI56$useLayoutEffect)(()=>{
         const panel = {
@@ -22,14 +26,22 @@ defaultSize: defaultSize,
         registerPanel(id, panel);
+        return ()=>{
+            unregisterPanel(id);
+        };
     }, [
         defaultSize,
+        id,
         minSize,
         registerPanel,
-        id
+        unregisterPanel
     ]);
     const style = getPanelStyle(id);
-    return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+    return /*#__PURE__*/ (0, $fpI56$jsxDEV)("div", {
         className: className,
         style: style,
         children: children
-    });
+    }, void 0, false, {
+        fileName: "packages/react-resizable-panels/src/Panel.tsx",
+        lineNumber: 55,
+        columnNumber: 5
+    }, this);
 }
@@ -41,17 +53,19 @@
 
-const $87c6267876d46c1c$var$PRECISION = 5;
-function $87c6267876d46c1c$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children , className: className = "" , direction: direction , height: height , width: width  }) {
-    const panelsRef = (0, $hgUW1$useRef)([]);
+const $c44ee3356398c8a1$var$PRECISION = 5;
+function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , height: height , width: width  }) {
+    const [panels, setPanels] = (0, $fpI56$useState)(new Map());
     // 0-1 values representing the relative size of each panel.
-    const [sizes, setSizes] = (0, $hgUW1$useState)([]);
+    const [sizes, setSizes] = (0, $fpI56$useState)([]);
     // Store committed values to avoid unnecessarily re-running memoization/effects functions.
-    const committedValuesRef = (0, $hgUW1$useRef)({
+    const committedValuesRef = (0, $fpI56$useRef)({
         direction: direction,
         height: height,
+        panels: panels,
         sizes: sizes,
         width: width
     });
-    (0, $hgUW1$useLayoutEffect)(()=>{
+    (0, $fpI56$useLayoutEffect)(()=>{
         committedValuesRef.current.direction = direction;
         committedValuesRef.current.height = height;
+        committedValuesRef.current.panels = panels;
         committedValuesRef.current.sizes = sizes;
@@ -63,6 +77,7 @@ committedValuesRef.current.width = width;
     // This assumes that panels register during initial mount (no conditional rendering)!
-    (0, $hgUW1$useLayoutEffect)(()=>{
-        const panels = panelsRef.current;
+    (0, $fpI56$useLayoutEffect)(()=>{
         const sizes = committedValuesRef.current.sizes;
-        if (sizes.length === panels.length) return;
+        if (sizes.length === panels.size) return;
+        // TODO [panels]
+        // Validate that the total minSize is <= 1.
         // If this panel has been configured to persist sizing information,
@@ -72,26 +87,32 @@ // default size should be restored from local storage if possible.
         if (autoSaveId) try {
-            const value = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+            const value = localStorage.getItem($c44ee3356398c8a1$var$createLocalStorageKey(autoSaveId, panels));
             if (value) defaultSizes = JSON.parse(value);
         } catch (error) {}
-        if (sizes.length === 0 && defaultSizes != null && defaultSizes.length === panels.length) setSizes(defaultSizes);
+        if (defaultSizes != null) setSizes(defaultSizes);
         else {
-            const totalWeight = panels.reduce((weight, panel)=>{
+            const panelsArray = Array.from(panels.values());
+            const totalWeight = panelsArray.reduce((weight, panel)=>{
                 return weight + panel.defaultSize;
             }, 0);
-            setSizes(panels.map((panel)=>panel.defaultSize / totalWeight));
+            setSizes(panelsArray.map((panel)=>panel.defaultSize / totalWeight));
         }
     }, [
-        autoSaveId
+        autoSaveId,
+        panels
     ]);
-    (0, $hgUW1$useEffect)(()=>{
-        if (autoSaveId && sizes.length > 0) // If this panel has been configured to persist sizing information, save sizes to local storage.
-        localStorage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(sizes));
+    (0, $fpI56$useEffect)(()=>{
+        if (autoSaveId) {
+            if (sizes.length === 0 || sizes.length !== panels.size) return;
+            // If this panel has been configured to persist sizing information, save sizes to local storage.
+            localStorage.setItem($c44ee3356398c8a1$var$createLocalStorageKey(autoSaveId, panels), JSON.stringify(sizes));
+        }
     }, [
         autoSaveId,
+        panels,
         sizes
     ]);
-    const getPanelStyle = (0, $hgUW1$useCallback)((id)=>{
-        const panels = panelsRef.current;
-        const offset = $87c6267876d46c1c$var$getOffset(panels, id, direction, sizes, height, width);
-        const size = $87c6267876d46c1c$var$getSize(panels, id, direction, sizes, height, width);
+    const getPanelStyle = (0, $fpI56$useCallback)((id)=>{
+        const { panels: panels  } = committedValuesRef.current;
+        const offset = $c44ee3356398c8a1$var$getOffset(panels, id, direction, sizes, height, width);
+        const size = $c44ee3356398c8a1$var$getSize(panels, id, direction, sizes, height, width);
         if (direction === "horizontal") return {
@@ -117,25 +138,36 @@ height: "100%",
     ]);
-    const registerPanel = (0, $hgUW1$useCallback)((id, panel)=>{
-        const panels = panelsRef.current;
-        const index = panels.findIndex((panel)=>panel.id === id);
-        if (index >= 0) panels.splice(index, 1);
-        panels.push(panel);
+    const registerPanel = (0, $fpI56$useCallback)((id, panel)=>{
+        setPanels((prevPanels)=>{
+            if (prevPanels.has(id)) return prevPanels;
+            const nextPanels = new Map(prevPanels);
+            nextPanels.set(id, panel);
+            return nextPanels;
+        });
     }, []);
-    const registerResizeHandle = (0, $hgUW1$useCallback)((idBefore, idAfter)=>{
+    const registerResizeHandle = (0, $fpI56$useCallback)((idBefore, idAfter)=>{
         return (event)=>{
             event.preventDefault();
-            const panels = panelsRef.current;
-            const { direction: direction , height: height , sizes: prevSizes , width: width  } = committedValuesRef.current;
+            const { direction: direction , height: height , panels: panels , sizes: prevSizes , width: width  } = committedValuesRef.current;
             const isHorizontal = direction === "horizontal";
             const movement = isHorizontal ? event.movementX : event.movementY;
             const delta = isHorizontal ? movement / width : movement / height;
-            const nextSizes = $87c6267876d46c1c$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes);
+            const nextSizes = $c44ee3356398c8a1$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes);
             if (prevSizes !== nextSizes) setSizes(nextSizes);
         };
+    // TODO [issues/5] Add to Map
     }, []);
-    const context = (0, $hgUW1$useMemo)(()=>({
+    const unregisterPanel = (0, $fpI56$useCallback)((id)=>{
+        setPanels((prevPanels)=>{
+            if (!prevPanels.has(id)) return prevPanels;
+            const nextPanels = new Map(prevPanels);
+            nextPanels.delete(id);
+            return nextPanels;
+        });
+    }, []);
+    const context = (0, $fpI56$useMemo)(()=>({
             direction: direction,
             getPanelStyle: getPanelStyle,
             registerPanel: registerPanel,
-            registerResizeHandle: registerResizeHandle
+            registerResizeHandle: registerResizeHandle,
+            unregisterPanel: unregisterPanel
         }), [
@@ -145,14 +177,24 @@ direction,
         registerPanel,
-        registerResizeHandle
+        registerResizeHandle,
+        unregisterPanel
     ]);
-    return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3a3142702e7d9c06$export$7d8c6d083caec74a).Provider, {
+    return /*#__PURE__*/ (0, $fpI56$jsxDEV)((0, $f922724f4bad4884$export$7d8c6d083caec74a).Provider, {
         value: context,
-        children: /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+        children: /*#__PURE__*/ (0, $fpI56$jsxDEV)("div", {
             className: className,
             children: children
-        })
-    });
+        }, void 0, false, {
+            fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
+            lineNumber: 224,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
+        lineNumber: 223,
+        columnNumber: 5
+    }, this);
 }
-function $87c6267876d46c1c$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes) {
+function $c44ee3356398c8a1$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes) {
     if (delta === 0) return prevSizes;
+    const panelsArray = Array.from(panels.values());
     const nextSizes = prevSizes.concat();
@@ -168,5 +210,5 @@ let deltaApplied = 0;
     let pivotId = delta < 0 ? idBefore : idAfter;
-    let index = panels.findIndex((panel)=>panel.id === pivotId);
+    let index = panelsArray.findIndex((panel)=>panel.id === pivotId);
     while(true){
-        const panel = panels[index];
+        const panel = panelsArray[index];
         const prevSize = prevSizes[index];
@@ -177,3 +219,3 @@ const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);
             nextSizes[index] = nextSize;
-            if (deltaApplied.toPrecision($87c6267876d46c1c$var$PRECISION) >= delta.toPrecision($87c6267876d46c1c$var$PRECISION)) break;
+            if (deltaApplied.toPrecision($c44ee3356398c8a1$var$PRECISION) >= delta.toPrecision($c44ee3356398c8a1$var$PRECISION)) break;
         }
@@ -183,3 +225,3 @@ if (delta < 0) {
         } else {
-            if (++index >= panels.length) break;
+            if (++index >= panelsArray.length) break;
         }
@@ -192,23 +234,29 @@ }
     pivotId = delta < 0 ? idAfter : idBefore;
-    index = panels.findIndex((panel)=>panel.id === pivotId);
+    index = panelsArray.findIndex((panel)=>panel.id === pivotId);
     nextSizes[index] = prevSizes[index] + deltaApplied;
     return nextSizes;
 }
-function $87c6267876d46c1c$var$getOffset(panels, id, direction, sizes, height, width) {
-    let index = panels.findIndex((panel)=>panel.id === id);
+function $c44ee3356398c8a1$var$createLocalStorageKey(autoSaveId, panels) {
+    const panelIds = Array.from(panels.keys()).sort();
+    return `PanelGroup:sizes:${autoSaveId}${panelIds.join("|")}`;
+}
+function $c44ee3356398c8a1$var$getOffset(panels, id, direction, sizes, height, width) {
+    const panelsArray = Array.from(panels.values());
+    let index = panelsArray.findIndex((panel)=>panel.id === id);
     if (index < 0) return 0;
     let scaledOffset = 0;
     for(index = index - 1; index >= 0; index--){
-        const panel = panels[index];
-        scaledOffset += $87c6267876d46c1c$var$getSize(panels, panel.id, direction, sizes, height, width);
+        const panel = panelsArray[index];
+        scaledOffset += $c44ee3356398c8a1$var$getSize(panels, panel.id, direction, sizes, height, width);
     }
     return Math.round(scaledOffset);
 }
-function $87c6267876d46c1c$var$getSize(panels, id, direction, sizes, height, width) {
-    const index = panels.findIndex((panel)=>panel.id === id);
+function $c44ee3356398c8a1$var$getSize(panels, id, direction, sizes, height, width) {
+    const totalSize = direction === "horizontal" ? width : height;
+    if (panels.size === 1) return totalSize;
+    const panelsArray = Array.from(panels.values());
+    const index = panelsArray.findIndex((panel)=>panel.id === id);
     const size = sizes[index];
     if (size == null) return 0;
-    const totalSize = direction === "horizontal" ? width : height;
-    if (panels.length === 1) return totalSize;
-    else return Math.round(size * totalSize);
+    return Math.round(size * totalSize);
 }
@@ -220,9 +268,9 @@
 
-function $74f1c1b08e3b0df5$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false , panelAfter: panelAfter , panelBefore: panelBefore  }) {
-    const context = (0, $hgUW1$useContext)((0, $3a3142702e7d9c06$export$7d8c6d083caec74a));
+function $b067b37706bb37b8$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false , panelAfter: panelAfter , panelBefore: panelBefore  }) {
+    const context = (0, $fpI56$useContext)((0, $f922724f4bad4884$export$7d8c6d083caec74a));
     if (context === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
     const { direction: direction , registerResizeHandle: registerResizeHandle  } = context;
-    const [resizeHandler, setResizeHandler] = (0, $hgUW1$useState)(null);
-    const [isDragging, setIsDragging] = (0, $hgUW1$useState)(false);
-    (0, $hgUW1$useEffect)(()=>{
+    const [resizeHandler, setResizeHandler] = (0, $fpI56$useState)(null);
+    const [isDragging, setIsDragging] = (0, $fpI56$useState)(false);
+    (0, $fpI56$useEffect)(()=>{
         if (disabled) setResizeHandler(null);
@@ -236,3 +284,3 @@ else setResizeHandler(()=>registerResizeHandle(panelBefore, panelAfter));
     ]);
-    (0, $hgUW1$useEffect)(()=>{
+    (0, $fpI56$useEffect)(()=>{
         if (disabled || resizeHandler == null || !isDragging) return;
@@ -264,3 +312,3 @@ document.body.style.cursor = direction === "horizontal" ? "ew-resize" : "ns-resize";
     ]);
-    return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
+    return /*#__PURE__*/ (0, $fpI56$jsxDEV)("div", {
         className: className,
@@ -273,3 +321,7 @@ onMouseDown: ()=>setIsDragging(true),
         children: children
-    });
+    }, void 0, false, {
+        fileName: "packages/react-resizable-panels/src/PanelResizeHandle.tsx",
+        lineNumber: 75,
+        columnNumber: 5
+    }, this);
 }
@@ -280,3 +332,3 @@
 
-export {$be6cfb11a13b6f3f$export$2e2bcd8739ae039 as Panel, $87c6267876d46c1c$export$2e2bcd8739ae039 as PanelGroup, $74f1c1b08e3b0df5$export$2e2bcd8739ae039 as PanelResizeHandle};
+export {$ad28bce87b00c2be$export$2e2bcd8739ae039 as Panel, $c44ee3356398c8a1$export$2e2bcd8739ae039 as PanelGroup, $b067b37706bb37b8$export$2e2bcd8739ae039 as PanelResizeHandle};
 //# sourceMappingURL=react-resizable-panels.module.js.map

package.json

 {
   "name": "react-resizable-panels",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "React components for resizable panel groups/layouts",
@@ -16,17 +16,9 @@ "author": "Brian Vaughn <[e-mail]>",
   "scripts": {
-    "dev": "parcel 'website/index.html'",
-    "watch": "parcel watch",
-    "build": "parcel build"
+    "build": "parcel build",
+    "watch": "parcel watch"
   },
   "devDependencies": {
-    "@parcel/packager-ts": "2.8.2",
-    "@parcel/transformer-typescript-types": "2.8.2",
-    "parcel": "latest",
-    "process": "^0.11.10",
     "react": "latest",
-    "react-dom": "latest",
-    "react-virtualized-auto-sizer": "latest",
-    "typescript": ">=3.0.0"
+    "react-dom": "latest"
   },
-  "dependencies": {},
   "peerDependencies": {
@@ -33,0 +25,0 @@ "react": "^16.14.0 || ^17.0.0 || ^18.0.0",

README.md

 # react-resizable-panels
 React components for resizable panel groups/layouts
 
-[Try a demo on Code Sandbox](https://codesandbox.io/s/react-panel-group-demo-ts9xqk)
-
 ```jsx
@@ -32,3 +30,3 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | `className`  | `?string`                   | Class name
-| `direction`  | `"horizontal" | "vertical"` | Group orientation
+| `direction`  | `"horizontal" \| "vertical"` | Group orientation
 | `height`     | `number`                    | Height of group (in pixels)
@@ -52,3 +50,3 @@ | `width`      | `number`                    | Width of group (in pixels)
 | `disabled`    | `?boolean`   | Disable drag handle
-| `panelAfter`  | `PanelId`    | Id of panel after (below or to the right of) the drag handle
-| `panelBefore` | `PanelId`    | Id of panel before (above or to the left of) the drag handle
+| `panelAfter`  | `string`     | Id of panel after (below or to the right of) the drag handle
+| `panelBefore` | `string`     | Id of panel before (above or to the left of) the drag handle

src/index.ts

@@ -5,2 +5,2 @@ import Panel from "./Panel";
 
-export { Panel, PanelGroup, PanelResizeHandle };
+export { Panel, PanelGroup, PanelResizeHandle };

src/PanelContexts.ts

 import { CSSProperties, createContext } from "react";
 
-import { Panel, PanelId, ResizeHandler } from "./types";
+import { PanelData, ResizeHandler } from "./types";
 
 export const PanelGroupContext = createContext<{
   direction: "horizontal" | "vertical";
-  getPanelStyle: (id: PanelId) => CSSProperties;
-  registerResizeHandle: (idBefore: PanelId, idAfter: PanelId) => ResizeHandler;
-  registerPanel: (id: PanelId, panel: Panel) => void;
+  getPanelStyle: (id: string) => CSSProperties;
+  registerPanel: (id: string, panel: PanelData) => void;
+  registerResizeHandle: (idBefore: string, idAfter: string) => ResizeHandler;
+  unregisterPanel: (id: string) => void;
 } | null>(null);

src/types.ts

 export type Direction = "horizontal" | "vertical";
 
-export type PanelId = string;
-
-export type Panel = {
+export type PanelData = {
   defaultSize: number;
-  id: PanelId;
+  id: string;
   minSize: number;
@@ -9,0 +7,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

2

decreased by-75%

Worsened metrics

Total package byte prevSize

86923

decreased by-97.9%

Number of package files

15

decreased by-42.31%

Lines of code

1067

decreased by-96.53%

Number of lines in readme file

50

decreased by-3.85%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes