npm - react-resizable-panels - Versions diffs - 0.0.5 → 0.0.7 - Mend

react-resizable-panels 0.0.5 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/CHANGELOG.md +4 -0
package/README.md +13 -9
package/dist/react-resizable-panels.d.ts +5 -3
package/dist/react-resizable-panels.d.ts.map +1 -1
package/dist/react-resizable-panels.js +114 -45
package/dist/react-resizable-panels.js.map +1 -1
package/dist/react-resizable-panels.module.js +114 -46
package/dist/react-resizable-panels.module.js.map +1 -1
package/package.json +1 -1
package/src/PanelContexts.ts +8 -1
package/src/PanelGroup.tsx +46 -32
package/src/PanelResizeHandle.tsx +35 -26
package/src/hooks/useUniqueId.ts +12 -0
package/src/index.ts +2 -1
package/src/utils/serialization.ts +49 -0

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,9 @@
 # Changelog
+## 0.0.7
+* Add `PanelContext` with `activeHandleId` property identifying the resize handle currently being dragged (or `null`). This enables more customized UI/UX when resizing is in progress.
+## 0.0.6
+* [#5](https://github.com/bvaughn/react-resizable-panels/issues/5): Removed `panelBefore` and `panelAfter` props from `PanelResizeHandle`. `PanelGroup` now infers this based on position within the group.
 ## 0.0.5
 * TypeScript props type fix

package/README.md CHANGED Viewed

@@ -4,16 +4,16 @@ React components for resizable panel groups/layouts
 ```jsx
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-<PanelGroup autoSaveId="horizontal-panel" direction="horizontal">
-  <Panel defaultSize={0.3} id="sources-explorer-panel">
+<PanelGroup autoSaveId="example" direction="horizontal">
+  <Panel defaultSize={0.3} id="left">
     <SourcesExplorer />
   </Panel>
-  <Panel defaultSize={0.5} id="source-viewer-panel">
-    <PanelResizeHandle panelBefore="sources-explorer-panel" panelAfter="source-viewer-panel" />
+  <Panel defaultSize={0.5} id="middle">
+    <PanelResizeHandle />
     <SourceViewer />
-    <PanelResizeHandle panelBefore="source-viewer-panel" panelAfter="console-panel" />
+    <PanelResizeHandle />
   </Panel>
-  <Panel defaultSize={0.2} id="console-panel">
+  <Panel defaultSize={0.2} id="right">
     <Console />
   </Panel>
 </PanelGroup>
@@ -25,7 +25,7 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | prop         | type                        | description
 | :----------- | :-------------------------- | :---
 | `autoSaveId` | `?string`                   | Unique id used to auto-save group arrangement via `localStorage`
-| `children`   | `ReactNode[]`               | Arbitrary React element(s)
+| `children`   | `ReactNode`                 | Arbitrary React element(s)
 | `className`  | `?string`                   | Class name
 | `direction`  | `"horizontal" \| "vertical"` | Group orientation
 | `height`     | `number`                    | Height of group (in pixels)
@@ -47,5 +47,9 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | `children`    | `?ReactNode` | Custom drag UI; can be any arbitrary React element(s)
 | `className`   | `?string`    | Class name
 | `disabled`    | `?boolean`   | Disable 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
+| `id`          | `?string`    | Optional resize handle id (must be unique within the current group)
+### `PanelContext`
+| prop         | type                 | description
+| :----------- | :------------------- | :---
+| `activeHandleId` | `string \| null` | Resize handle currently being dragged (or `null`)

package/dist/react-resizable-panels.d.ts CHANGED Viewed

@@ -1,5 +1,8 @@
 import { ReactNode } from "react";
 type Direction = "horizontal" | "vertical";
+export const PanelContext: import("react").Context<{
+    activeHandleId: string | null;
+}>;
 export function Panel({ children, className, defaultSize, id, minSize, order, }: {
     children?: ReactNode;
     className?: string;
@@ -17,12 +20,11 @@ type Props = {
     width: number;
 };
 export function PanelGroup({ autoSaveId, children, className, direction, height, width, }: Props): JSX.Element;
-export function PanelResizeHandle({ children, className, disabled, panelAfter, panelBefore, }: {
+export function PanelResizeHandle({ children, className, disabled, id: idProp, }: {
     children?: ReactNode;
     className?: string;
     disabled?: boolean;
-    panelAfter: string;
-    panelBefore: string;
+    id?: string | null;
 }): JSX.Element;
 //# sourceMappingURL=react-resizable-panels.d.ts.map

package/dist/react-resizable-panels.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";AAAA,iBAAwB,YAAY,GAAG,UAAU,CAAC;~~AEOlD~~,sBAA8B,EAC5B,QAAe,EACf,SAAc,EACd,WAAiB,EACjB,EAAE,EACF,OAAa,EACb,KAAY,GACb,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,eAwCA;~~AC/CD~~,aAAa;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAQF,2BAAmC,EACjC,UAAU,EACV,QAAe,EACf,SAAc,EACd,SAAS,EACT,MAAM,EACN,KAAK,GACN,EAAE,KAAK,~~eA8LP~~;~~AC7ND~~,kCAA0C,EACxC,QAAe,EACf,SAAc,EACd,QAAgB,EAChB,~~UAAU~~,~~EACV~~,~~WAAW~~,~~GACZ~~,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,~~UAAU,~~EAAE,~~MAAM,~~CAAC~~;IACnB~~,~~WAAW,~~EAAE,MAAM,CAAC;~~CACrB~~,~~eAoEA~~","sources":["packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.tsx","packages/react-resizable-panels/src/src/PanelGroup.tsx","packages/react-resizable-panels/src/src/PanelResizeHandle.tsx","packages/react-resizable-panels/src/src/index.ts","packages/react-resizable-panels/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"import Panel from \"./Panel\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelGroup, PanelResizeHandle };\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map","sourceRoot":"../../../"}
1	+ {"mappings":";AAAA,iBAAwB,YAAY,GAAG,UAAU,CAAC;ACIlD,OAAO,MAAM;oBACK,MAAM,GAAG,IAAI;EAChB,CAAC;ACChB,sBAA8B,EAC5B,QAAe,EACf,SAAc,EACd,WAAiB,EACjB,EAAE,EACF,OAAa,EACb,KAAY,GACb,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,eAwCA;AE9CD,aAAa;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAQF,2BAAmC,EACjC,UAAU,EACV,QAAe,EACf,SAAc,EACd,SAAS,EACT,MAAM,EACN,KAAK,GACN,EAAE,KAAK,eAqNP;ACpPD,kCAA0C,EACxC,QAAe,EACf,SAAc,EACd,QAAgB,EAChB,EAAE,EAAE,MAAa,GAClB,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB,eA6EA","sources":["packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.tsx","packages/react-resizable-panels/src/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/src/PanelGroup.tsx","packages/react-resizable-panels/src/src/PanelResizeHandle.tsx","packages/react-resizable-panels/src/src/index.ts","packages/react-resizable-panels/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"import Panel from \"./Panel\";\nimport { PanelContext } from \"./PanelContexts\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelContext, PanelGroup, PanelResizeHandle };\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map","sourceRoot":"../../../"}

package/dist/react-resizable-panels.js CHANGED Viewed

@@ -6,11 +6,13 @@ function $parcel$export(e, n, v, s) {
 }
 $parcel$export(module.exports, "Panel", () => $6d390b7f2e6b107f$export$2e2bcd8739ae039);
+$parcel$export(module.exports, "PanelContext", () => $3251d17c1c3bce6c$export$f34532ac99e32150);
 $parcel$export(module.exports, "PanelGroup", () => $d428eaeef644efb2$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "PanelResizeHandle", () => $d578a49f00f1bdeb$export$2e2bcd8739ae039);
+const $3251d17c1c3bce6c$export$f34532ac99e32150 = (0, $b2QPe$react.createContext)(null);
 const $3251d17c1c3bce6c$export$7d8c6d083caec74a = (0, $b2QPe$react.createContext)(null);
@@ -57,8 +59,46 @@ function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null ,
+let $6d548a0d130941e3$var$counter = 0;
+function $6d548a0d130941e3$export$2e2bcd8739ae039(id = null) {
+    const idRef = (0, $b2QPe$react.useRef)(id);
+    if (idRef.current === null) idRef.current = "" + $6d548a0d130941e3$var$counter++;
+    return idRef.current;
+}
+function $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId) {
+    try {
+        const serialized = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+        if (serialized) {
+            const parsed = JSON.parse(serialized);
+            if (typeof parsed === "object" && parsed != null) return parsed;
+        }
+    } catch (error) {}
+    return null;
+}
+function $e045b0dd313f33c7$export$9c80c6617f0386da(autoSaveId, panelIds) {
+    const state = $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId);
+    if (state) return state[panelIds.join(",")] ?? null;
+    return null;
+}
+function $e045b0dd313f33c7$export$af183b313c61be4f(autoSaveId, panelIds, sizes) {
+    const state = $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId) || {};
+    state[panelIds.join(",")] = sizes;
+    try {
+        localStorage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
+    } catch (error) {
+        console.error(error);
+    }
+}
 const $d428eaeef644efb2$var$PRECISION = 5;
 function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , height: height , width: width  }) {
+    const groupId = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)();
+    const [activeHandleId, setActiveHandleId] = (0, $b2QPe$react.useState)(null);
     const [panels, setPanels] = (0, $b2QPe$react.useState)(new Map());
     // 0-1 values representing the relative size of each panel.
     const [sizes, setSizes] = (0, $b2QPe$react.useState)([]);
@@ -88,10 +128,10 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         // If this panel has been configured to persist sizing information,
         // default size should be restored from local storage if possible.
         let defaultSizes = undefined;
-        if (autoSaveId) try {
-            const value = localStorage.getItem($d428eaeef644efb2$var$createLocalStorageKey(autoSaveId, panels));
-            if (value) defaultSizes = JSON.parse(value);
-        } catch (error) {}
+        if (autoSaveId) {
+            const panelIds = $d428eaeef644efb2$var$panelsMapToSortedArray(panels).map((panel)=>panel.id);
+            defaultSizes = (0, $e045b0dd313f33c7$export$9c80c6617f0386da)(autoSaveId, panelIds);
+        }
         if (defaultSizes != null) setSizes(defaultSizes);
         else {
             const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
@@ -105,10 +145,11 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         panels
     ]);
     (0, $b2QPe$react.useEffect)(()=>{
+        // If this panel has been configured to persist sizing information, save sizes to local storage.
         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));
+            const panelIds = $d428eaeef644efb2$var$panelsMapToSortedArray(panels).map((panel)=>panel.id);
+            (0, $e045b0dd313f33c7$export$af183b313c61be4f)(autoSaveId, panelIds, sizes);
         }
     }, [
         autoSaveId,
@@ -147,18 +188,27 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             return nextPanels;
         });
     }, []);
-    const registerResizeHandle = (0, $b2QPe$react.useCallback)((idBefore, idAfter)=>{
-        return (event)=>{
+    const registerResizeHandle = (0, $b2QPe$react.useCallback)((id)=>{
+        const resizeHandler = (event)=>{
             event.preventDefault();
             const { direction: direction , height: height , panels: panels , sizes: prevSizes , width: width  } = committedValuesRef.current;
+            const handle = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
+            const handles = Array.from(document.querySelectorAll(`[data-panel-group-id="${groupId}"]`));
+            const index = handles.indexOf(handle);
+            const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
+            const idBefore = panelsArray[index]?.id ?? null;
+            const idAfter = panelsArray[index + 1]?.id ?? null;
+            if (idBefore == null || idAfter == null) return;
             const isHorizontal = direction === "horizontal";
             const movement = isHorizontal ? event.movementX : event.movementY;
             const delta = isHorizontal ? movement / width : movement / height;
             const nextSizes = $d428eaeef644efb2$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes);
             if (prevSizes !== nextSizes) setSizes(nextSizes);
         };
-    // TODO [issues/5] Add to Map
-    }, []);
+        return resizeHandler;
+    }, [
+        groupId
+    ]);
     const unregisterPanel = (0, $b2QPe$react.useCallback)((id)=>{
         setPanels((prevPanels)=>{
             if (!prevPanels.has(id)) return prevPanels;
@@ -167,32 +217,48 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             return nextPanels;
         });
     }, []);
-    const context = (0, $b2QPe$react.useMemo)(()=>({
+    const panelGroupContext = (0, $b2QPe$react.useMemo)(()=>({
             direction: direction,
             getPanelStyle: getPanelStyle,
+            groupId: groupId,
             registerPanel: registerPanel,
             registerResizeHandle: registerResizeHandle,
+            startDragging: (id)=>setActiveHandleId(id),
+            stopDragging: ()=>setActiveHandleId(null),
             unregisterPanel: unregisterPanel
         }), [
         direction,
         getPanelStyle,
+        groupId,
         registerPanel,
         registerResizeHandle,
         unregisterPanel
     ]);
-    return /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a).Provider, {
-        value: context,
-        children: /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)("div", {
-            className: className,
-            children: children
+    const panelContext = (0, $b2QPe$react.useMemo)(()=>({
+            activeHandleId: activeHandleId
+        }), [
+        activeHandleId
+    ]);
+    return /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)((0, $3251d17c1c3bce6c$export$f34532ac99e32150).Provider, {
+        value: panelContext,
+        children: /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a).Provider, {
+            value: panelGroupContext,
+            children: /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)("div", {
+                className: className,
+                children: children
+            }, void 0, false, {
+                fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
+                lineNumber: 247,
+                columnNumber: 9
+            }, this)
         }, void 0, false, {
             fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-            lineNumber: 224,
+            lineNumber: 246,
             columnNumber: 7
         }, this)
     }, void 0, false, {
         fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-        lineNumber: 223,
+        lineNumber: 245,
         columnNumber: 5
     }, this);
 }
@@ -234,11 +300,6 @@ function $d428eaeef644efb2$var$adjustByDelta(panels, idBefore, idAfter, delta, p
     nextSizes[index] = prevSizes[index] + deltaApplied;
     return nextSizes;
 }
-function $d428eaeef644efb2$var$createLocalStorageKey(autoSaveId, panels) {
-    const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
-    const panelIds = panelsArray.map((panel)=>panel.id);
-    return `PanelGroup:sizes:${autoSaveId}${panelIds.join("|")}`;
-}
 function $d428eaeef644efb2$var$getOffset(panels, id, direction, sizes, height, width) {
     const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
     let index = panelsArray.findIndex((panel)=>panel.id === id);
@@ -267,59 +328,67 @@ function $d428eaeef644efb2$var$panelsMapToSortedArray(panels) {
-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;
+function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false , id: idProp = null  }) {
+    const panelContext = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$f34532ac99e32150));
+    const panelGroupContext = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
+    if (panelContext === null || panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
+    const id = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)(idProp);
+    const { activeHandleId: activeHandleId  } = panelContext;
+    const { direction: direction , groupId: groupId , registerResizeHandle: registerResizeHandle , startDragging: startDragging , stopDragging: stopDragging  } = panelGroupContext;
+    const isDragging = activeHandleId === id;
     const [resizeHandler, setResizeHandler] = (0, $b2QPe$react.useState)(null);
-    const [isDragging, setIsDragging] = (0, $b2QPe$react.useState)(false);
     (0, $b2QPe$react.useEffect)(()=>{
         if (disabled) setResizeHandler(null);
-        else setResizeHandler(()=>registerResizeHandle(panelBefore, panelAfter));
+        else {
+            const resizeHandler = registerResizeHandle(id);
+            setResizeHandler(()=>resizeHandler);
+        }
     }, [
         disabled,
-        panelAfter,
-        panelBefore,
+        groupId,
+        id,
         registerResizeHandle
     ]);
     (0, $b2QPe$react.useEffect)(()=>{
         if (disabled || resizeHandler == null || !isDragging) return;
         document.body.style.cursor = direction === "horizontal" ? "ew-resize" : "ns-resize";
-        const onMouseLeave = (_)=>{
-            setIsDragging(false);
-        };
         const onMouseMove = (event)=>{
             resizeHandler(event);
         };
-        const onMouseUp = (_)=>{
-            setIsDragging(false);
-        };
-        document.body.addEventListener("mouseleave", onMouseLeave);
+        document.body.addEventListener("mouseleave", stopDragging);
         document.body.addEventListener("mousemove", onMouseMove);
-        document.body.addEventListener("mouseup", onMouseUp);
+        document.body.addEventListener("touchmove", onMouseMove);
+        document.body.addEventListener("mouseup", stopDragging);
         return ()=>{
             document.body.style.cursor = "";
-            document.body.removeEventListener("mouseleave", onMouseLeave);
+            document.body.removeEventListener("mouseleave", stopDragging);
             document.body.removeEventListener("mousemove", onMouseMove);
-            document.body.removeEventListener("mouseup", onMouseUp);
+            document.body.removeEventListener("touchmove", onMouseMove);
+            document.body.removeEventListener("mouseup", stopDragging);
         };
     }, [
         direction,
         disabled,
         isDragging,
-        resizeHandler
+        resizeHandler,
+        stopDragging
     ]);
     return /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)("div", {
         className: className,
-        onMouseDown: ()=>setIsDragging(true),
-        onMouseUp: ()=>setIsDragging(false),
+        "data-panel-group-id": groupId,
+        "data-panel-resize-handle-id": id,
+        onMouseDown: ()=>startDragging(id),
+        onMouseUp: stopDragging,
+        onTouchStart: ()=>startDragging(id),
+        onTouchEnd: stopDragging,
         style: {
             cursor: direction === "horizontal" ? "ew-resize" : "ns-resize"
         },
         children: children
     }, void 0, false, {
         fileName: "packages/react-resizable-panels/src/PanelResizeHandle.tsx",
-        lineNumber: 75,
+        lineNumber: 80,
         columnNumber: 5
     }, this);
 }

package/dist/react-resizable-panels.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"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","sources":["packages/react-resizable-panels/src/index.ts","packages/react-resizable-panels/src/Panel.tsx","packages/react-resizable-panels/src/PanelContexts.ts","packages/react-resizable-panels/src/PanelGroup.tsx","packages/react-resizable-panels/src/PanelResizeHandle.tsx"],"sourcesContent":["import Panel from \"./Panel\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelGroup, PanelResizeHandle };\n","import { ReactNode, useContext, useLayoutEffect } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\n\n// TODO [panels]\n// Support min pixel size too.\n// PanelGroup should warn if total width is less min pixel widths.\nexport default function Panel({\n children = null,\n className = \"\",\n defaultSize = 0.1,\n id,\n minSize = 0.1,\n order = null,\n}: {\n children?: ReactNode;\n className?: string;\n defaultSize?: number;\n id: string;\n minSize?: number;\n order?: number \| null;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `Panel components must be rendered within a PanelGroup container`\n );\n }\n\n if (minSize > defaultSize) {\n console.error(\n `Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`\n );\n\n defaultSize = minSize;\n }\n\n const { getPanelStyle, registerPanel, unregisterPanel } = context;\n\n useLayoutEffect(() => {\n const panel = {\n defaultSize,\n id,\n minSize,\n order,\n };\n\n registerPanel(id, panel);\n\n return () => {\n unregisterPanel(id);\n };\n }, [defaultSize, id, minSize, order, registerPanel, unregisterPanel]);\n\n const style = getPanelStyle(id);\n\n return (\n <div className={className} style={style}>\n {children}\n </div>\n );\n}\n","import { CSSProperties, createContext } from \"react\";\n\nimport { PanelData, ResizeHandler } from \"./types\";\n\nexport const PanelGroupContext = createContext<{\n direction: \"horizontal\" \| \"vertical\";\n getPanelStyle: (id: string) => CSSProperties;\n registerPanel: (id: string, panel: PanelData) => void;\n registerResizeHandle: (idBefore: string, idAfter: string) => ResizeHandler;\n unregisterPanel: (id: string) => void;\n} \| null>(null);\n","import {\n CSSProperties,\n ReactNode,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { Direction, PanelData } from \"./types\";\n\ntype Props = {\n autoSaveId?: string;\n children?: ReactNode[];\n className?: string;\n direction: Direction;\n height: number;\n width: number;\n};\n\nconst PRECISION = 5;\n\n// TODO [panels]\n// Within an active drag, remember original positions to refine more easily on expand.\n// Look at what the Chrome devtools Sources does.\n\nexport default function PanelGroup({\n autoSaveId,\n children = null,\n className = \"\",\n direction,\n height,\n width,\n}: Props) {\n const [panels, setPanels] = useState<Map<string, PanelData>>(new Map());\n\n // 0-1 values representing the relative size of each panel.\n const [sizes, setSizes] = useState<number[]>([]);\n\n // Store committed values to avoid unnecessarily re-running memoization/effects functions.\n const committedValuesRef = useRef<{\n direction: Direction;\n height: number;\n panels: Map<string, PanelData>;\n sizes: number[];\n width: number;\n }>({\n direction,\n height,\n panels,\n sizes,\n width,\n });\n useLayoutEffect(() => {\n committedValuesRef.current.direction = direction;\n committedValuesRef.current.height = height;\n committedValuesRef.current.panels = panels;\n committedValuesRef.current.sizes = sizes;\n committedValuesRef.current.width = width;\n });\n\n // Once all panels have registered themselves,\n // Compute the initial sizes based on default weights.\n // This assumes that panels register during initial mount (no conditional rendering)!\n useLayoutEffect(() => {\n const sizes = committedValuesRef.current.sizes;\n if (sizes.length === panels.size) {\n return;\n }\n\n // TODO [panels]\n // Validate that the total minSize is <= 1.\n\n // If this panel has been configured to persist sizing information,\n // default size should be restored from local storage if possible.\n let defaultSizes: number[] \| undefined = undefined;\n if (autoSaveId) {\n try {\n const value = localStorage.getItem(\n createLocalStorageKey(autoSaveId, panels)\n );\n if (value) {\n defaultSizes = JSON.parse(value);\n }\n } catch (error) {}\n }\n\n if (defaultSizes != null) {\n setSizes(defaultSizes);\n } else {\n const panelsArray = panelsMapToSortedArray(panels);\n const totalWeight = panelsArray.reduce((weight, panel) => {\n return weight + panel.defaultSize;\n }, 0);\n\n setSizes(panelsArray.map((panel) => panel.defaultSize / totalWeight));\n }\n }, [autoSaveId, panels]);\n\n useEffect(() => {\n if (autoSaveId) {\n if (sizes.length === 0 \|\| sizes.length !== panels.size) {\n return;\n }\n\n // If this panel has been configured to persist sizing information, save sizes to local storage.\n localStorage.setItem(\n createLocalStorageKey(autoSaveId, panels),\n JSON.stringify(sizes)\n );\n }\n }, [autoSaveId, panels, sizes]);\n\n const getPanelStyle = useCallback(\n (id: string): CSSProperties => {\n const { panels } = committedValuesRef.current;\n\n const offset = getOffset(panels, id, direction, sizes, height, width);\n const size = getSize(panels, id, direction, sizes, height, width);\n\n if (direction === \"horizontal\") {\n return {\n height: \"100%\",\n position: \"absolute\",\n left: offset,\n top: 0,\n width: size,\n };\n } else {\n return {\n height: size,\n position: \"absolute\",\n left: 0,\n top: offset,\n width: \"100%\",\n };\n }\n },\n [direction, height, sizes, width]\n );\n\n const registerPanel = useCallback((id: string, panel: PanelData) => {\n setPanels((prevPanels) => {\n if (prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.set(id, panel);\n\n return nextPanels;\n });\n }, []);\n\n const registerResizeHandle = useCallback(\n (idBefore: string, idAfter: string) => {\n return (event: MouseEvent) => {\n event.preventDefault();\n\n const {\n direction,\n height,\n panels,\n sizes: prevSizes,\n width,\n } = committedValuesRef.current;\n\n const isHorizontal = direction === \"horizontal\";\n const movement = isHorizontal ? event.movementX : event.movementY;\n const delta = isHorizontal ? movement / width : movement / height;\n\n const nextSizes = adjustByDelta(\n panels,\n idBefore,\n idAfter,\n delta,\n prevSizes\n );\n if (prevSizes !== nextSizes) {\n setSizes(nextSizes);\n }\n };\n\n // TODO [issues/5] Add to Map\n },\n []\n );\n\n const unregisterPanel = useCallback((id: string) => {\n setPanels((prevPanels) => {\n if (!prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.delete(id);\n\n return nextPanels;\n });\n }, []);\n\n const context = useMemo(\n () => ({\n direction,\n getPanelStyle,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n }),\n [\n direction,\n getPanelStyle,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n ]\n );\n\n return (\n <PanelGroupContext.Provider value={context}>\n <div className={className}>{children}</div>\n </PanelGroupContext.Provider>\n );\n}\n\nfunction adjustByDelta(\n panels: Map<string, PanelData>,\n idBefore: string,\n idAfter: string,\n delta: number,\n prevSizes: number[]\n): number[] {\n if (delta === 0) {\n return prevSizes;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const nextSizes = prevSizes.concat();\n\n let deltaApplied = 0;\n\n // A resizing panel affects the panels before or after it.\n //\n // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.\n // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.\n //\n // A positive delta means the panel immediately before the resizer should \"expand\".\n // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.\n let pivotId = delta < 0 ? idBefore : idAfter;\n let index = panelsArray.findIndex((panel) => panel.id === pivotId);\n while (true) {\n const panel = panelsArray[index];\n const prevSize = prevSizes[index];\n const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);\n if (prevSize !== nextSize) {\n deltaApplied += prevSize - nextSize;\n\n nextSizes[index] = nextSize;\n\n if (deltaApplied.toPrecision(PRECISION) >= delta.toPrecision(PRECISION)) {\n break;\n }\n }\n\n if (delta < 0) {\n if (--index < 0) {\n break;\n }\n } else {\n if (++index >= panelsArray.length) {\n break;\n }\n }\n }\n\n // If we were unable to resize any of the panels panels, return the previous state.\n // This will essentially bailout and ignore the \"mousemove\" event.\n if (deltaApplied === 0) {\n return prevSizes;\n }\n\n // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.\n pivotId = delta < 0 ? idAfter : idBefore;\n index = panelsArray.findIndex((panel) => panel.id === pivotId);\n nextSizes[index] = prevSizes[index] + deltaApplied;\n\n return nextSizes;\n}\n\nfunction createLocalStorageKey(\n autoSaveId: string,\n panels: Map<string, PanelData>\n): string {\n const panelsArray = panelsMapToSortedArray(panels);\n const panelIds = panelsArray.map((panel) => panel.id);\n\n return `PanelGroup:sizes:${autoSaveId}${panelIds.join(\"\|\")}`;\n}\n\nfunction getOffset(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const panelsArray = panelsMapToSortedArray(panels);\n\n let index = panelsArray.findIndex((panel) => panel.id === id);\n if (index < 0) {\n return 0;\n }\n\n let scaledOffset = 0;\n\n for (index = index - 1; index >= 0; index--) {\n const panel = panelsArray[index];\n scaledOffset += getSize(panels, panel.id, direction, sizes, height, width);\n }\n\n return Math.round(scaledOffset);\n}\n\nfunction getSize(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const totalSize = direction === \"horizontal\" ? width : height;\n\n if (panels.size === 1) {\n return totalSize;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const index = panelsArray.findIndex((panel) => panel.id === id);\n const size = sizes[index];\n if (size == null) {\n return 0;\n }\n\n return Math.round(size * totalSize);\n}\n\nfunction panelsMapToSortedArray(panels: Map<string, PanelData>): PanelData[] {\n return Array.from(panels.values()).sort((a, b) => a.order - b.order);\n}\n","import { ReactNode, useContext, useEffect, useState } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { ResizeHandler } from \"./types\";\n\nexport default function PanelResizeHandle({\n children = null,\n className = \"\",\n disabled = false,\n panelAfter,\n panelBefore,\n}: {\n children?: ReactNode;\n className?: string;\n disabled?: boolean;\n panelAfter: string;\n panelBefore: string;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `PanelResizeHandle components must be rendered within a PanelGroup container`\n );\n }\n\n const { direction, registerResizeHandle } = context;\n\n const [resizeHandler, setResizeHandler] = useState<ResizeHandler \| null>(\n null\n );\n const [isDragging, setIsDragging] = useState(false);\n\n useEffect(() => {\n if (disabled) {\n setResizeHandler(null);\n } else {\n setResizeHandler(() => registerResizeHandle(panelBefore, panelAfter));\n }\n }, [disabled, panelAfter, panelBefore, registerResizeHandle]);\n\n useEffect(() => {\n if (disabled \|\| resizeHandler == null \|\| !isDragging) {\n return;\n }\n\n document.body.style.cursor =\n direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\";\n\n const onMouseLeave = (_: MouseEvent) => {\n setIsDragging(false);\n };\n\n const onMouseMove = (event: MouseEvent) => {\n resizeHandler(event);\n };\n\n const onMouseUp = (_: MouseEvent) => {\n setIsDragging(false);\n };\n\n document.body.addEventListener(\"mouseleave\", onMouseLeave);\n document.body.addEventListener(\"mousemove\", onMouseMove);\n document.body.addEventListener(\"mouseup\", onMouseUp);\n\n return () => {\n document.body.style.cursor = \"\";\n\n document.body.removeEventListener(\"mouseleave\", onMouseLeave);\n document.body.removeEventListener(\"mousemove\", onMouseMove);\n document.body.removeEventListener(\"mouseup\", onMouseUp);\n };\n }, [direction, disabled, isDragging, resizeHandler]);\n\n return (\n <div\n className={className}\n onMouseDown={() => setIsDragging(true)}\n onMouseUp={() => setIsDragging(false)}\n style={{\n cursor: direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\",\n }}\n >\n {children}\n </div>\n );\n}\n"],"names":[],"version":3,"file":"react-resizable-panels.js.map","sourceRoot":"../../../"}
1	+ {"mappings":"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","sources":["packages/react-resizable-panels/src/index.ts","packages/react-resizable-panels/src/Panel.tsx","packages/react-resizable-panels/src/PanelContexts.ts","packages/react-resizable-panels/src/PanelGroup.tsx","packages/react-resizable-panels/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/utils/serialization.ts","packages/react-resizable-panels/src/PanelResizeHandle.tsx"],"sourcesContent":["import Panel from \"./Panel\";\nimport { PanelContext } from \"./PanelContexts\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelContext, PanelGroup, PanelResizeHandle };\n","import { ReactNode, useContext, useLayoutEffect } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\n\n// TODO [panels]\n// Support min pixel size too.\n// PanelGroup should warn if total width is less min pixel widths.\nexport default function Panel({\n children = null,\n className = \"\",\n defaultSize = 0.1,\n id,\n minSize = 0.1,\n order = null,\n}: {\n children?: ReactNode;\n className?: string;\n defaultSize?: number;\n id: string;\n minSize?: number;\n order?: number \| null;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `Panel components must be rendered within a PanelGroup container`\n );\n }\n\n if (minSize > defaultSize) {\n console.error(\n `Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`\n );\n\n defaultSize = minSize;\n }\n\n const { getPanelStyle, registerPanel, unregisterPanel } = context;\n\n useLayoutEffect(() => {\n const panel = {\n defaultSize,\n id,\n minSize,\n order,\n };\n\n registerPanel(id, panel);\n\n return () => {\n unregisterPanel(id);\n };\n }, [defaultSize, id, minSize, order, registerPanel, unregisterPanel]);\n\n const style = getPanelStyle(id);\n\n return (\n <div className={className} style={style}>\n {children}\n </div>\n );\n}\n","import { CSSProperties, createContext } from \"react\";\n\nimport { PanelData, ResizeHandler } from \"./types\";\n\nexport const PanelContext = createContext<{\n activeHandleId: string \| null;\n} \| null>(null);\n\nexport const PanelGroupContext = createContext<{\n direction: \"horizontal\" \| \"vertical\";\n getPanelStyle: (id: string) => CSSProperties;\n groupId: string;\n registerPanel: (id: string, panel: PanelData) => void;\n registerResizeHandle: (id: string) => ResizeHandler;\n startDragging: (id: string) => void;\n stopDragging: () => void;\n unregisterPanel: (id: string) => void;\n} \| null>(null);\n","import {\n CSSProperties,\n ReactNode,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport useUniqueId from \"./hooks/useUniqueId\";\n\nimport { PanelContext, PanelGroupContext } from \"./PanelContexts\";\nimport { Direction, PanelData } from \"./types\";\nimport { loadPanelLayout, savePanelGroupLayout } from \"./utils/serialization\";\n\ntype Props = {\n autoSaveId?: string;\n children?: ReactNode;\n className?: string;\n direction: Direction;\n height: number;\n width: number;\n};\n\nconst PRECISION = 5;\n\n// TODO [panels]\n// Within an active drag, remember original positions to refine more easily on expand.\n// Look at what the Chrome devtools Sources does.\n\nexport default function PanelGroup({\n autoSaveId,\n children = null,\n className = \"\",\n direction,\n height,\n width,\n}: Props) {\n const groupId = useUniqueId();\n\n const [activeHandleId, setActiveHandleId] = useState<string \| null>(null);\n const [panels, setPanels] = useState<Map<string, PanelData>>(new Map());\n\n // 0-1 values representing the relative size of each panel.\n const [sizes, setSizes] = useState<number[]>([]);\n\n // Store committed values to avoid unnecessarily re-running memoization/effects functions.\n const committedValuesRef = useRef<{\n direction: Direction;\n height: number;\n panels: Map<string, PanelData>;\n sizes: number[];\n width: number;\n }>({\n direction,\n height,\n panels,\n sizes,\n width,\n });\n useLayoutEffect(() => {\n committedValuesRef.current.direction = direction;\n committedValuesRef.current.height = height;\n committedValuesRef.current.panels = panels;\n committedValuesRef.current.sizes = sizes;\n committedValuesRef.current.width = width;\n });\n\n // Once all panels have registered themselves,\n // Compute the initial sizes based on default weights.\n // This assumes that panels register during initial mount (no conditional rendering)!\n useLayoutEffect(() => {\n const sizes = committedValuesRef.current.sizes;\n if (sizes.length === panels.size) {\n return;\n }\n\n // TODO [panels]\n // Validate that the total minSize is <= 1.\n\n // If this panel has been configured to persist sizing information,\n // default size should be restored from local storage if possible.\n let defaultSizes: number[] \| undefined = undefined;\n if (autoSaveId) {\n const panelIds = panelsMapToSortedArray(panels).map((panel) => panel.id);\n defaultSizes = loadPanelLayout(autoSaveId, panelIds);\n }\n\n if (defaultSizes != null) {\n setSizes(defaultSizes);\n } else {\n const panelsArray = panelsMapToSortedArray(panels);\n const totalWeight = panelsArray.reduce((weight, panel) => {\n return weight + panel.defaultSize;\n }, 0);\n\n setSizes(panelsArray.map((panel) => panel.defaultSize / totalWeight));\n }\n }, [autoSaveId, panels]);\n\n useEffect(() => {\n // If this panel has been configured to persist sizing information, save sizes to local storage.\n if (autoSaveId) {\n if (sizes.length === 0 \|\| sizes.length !== panels.size) {\n return;\n }\n\n const panelIds = panelsMapToSortedArray(panels).map((panel) => panel.id);\n savePanelGroupLayout(autoSaveId, panelIds, sizes);\n }\n }, [autoSaveId, panels, sizes]);\n\n const getPanelStyle = useCallback(\n (id: string): CSSProperties => {\n const { panels } = committedValuesRef.current;\n\n const offset = getOffset(panels, id, direction, sizes, height, width);\n const size = getSize(panels, id, direction, sizes, height, width);\n\n if (direction === \"horizontal\") {\n return {\n height: \"100%\",\n position: \"absolute\",\n left: offset,\n top: 0,\n width: size,\n };\n } else {\n return {\n height: size,\n position: \"absolute\",\n left: 0,\n top: offset,\n width: \"100%\",\n };\n }\n },\n [direction, height, sizes, width]\n );\n\n const registerPanel = useCallback((id: string, panel: PanelData) => {\n setPanels((prevPanels) => {\n if (prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.set(id, panel);\n\n return nextPanels;\n });\n }, []);\n\n const registerResizeHandle = useCallback(\n (id: string) => {\n const resizeHandler = (event: MouseEvent) => {\n event.preventDefault();\n\n const {\n direction,\n height,\n panels,\n sizes: prevSizes,\n width,\n } = committedValuesRef.current;\n\n const handle = document.querySelector(\n `[data-panel-resize-handle-id=\"${id}\"]`\n );\n const handles = Array.from(\n document.querySelectorAll(`[data-panel-group-id=\"${groupId}\"]`)\n );\n const index = handles.indexOf(handle);\n const panelsArray = panelsMapToSortedArray(panels);\n const idBefore: string \| null = panelsArray[index]?.id ?? null;\n const idAfter: string \| null = panelsArray[index + 1]?.id ?? null;\n if (idBefore == null \|\| idAfter == null) {\n return;\n }\n\n const isHorizontal = direction === \"horizontal\";\n const movement = isHorizontal ? event.movementX : event.movementY;\n const delta = isHorizontal ? movement / width : movement / height;\n\n const nextSizes = adjustByDelta(\n panels,\n idBefore,\n idAfter,\n delta,\n prevSizes\n );\n if (prevSizes !== nextSizes) {\n setSizes(nextSizes);\n }\n };\n\n return resizeHandler;\n },\n [groupId]\n );\n\n const unregisterPanel = useCallback((id: string) => {\n setPanels((prevPanels) => {\n if (!prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.delete(id);\n\n return nextPanels;\n });\n }, []);\n\n const panelGroupContext = useMemo(\n () => ({\n direction,\n getPanelStyle,\n groupId,\n registerPanel,\n registerResizeHandle,\n startDragging: (id: string) => setActiveHandleId(id),\n stopDragging: () => setActiveHandleId(null),\n unregisterPanel,\n }),\n [\n direction,\n getPanelStyle,\n groupId,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n ]\n );\n\n const panelContext = useMemo(\n () => ({\n activeHandleId,\n }),\n [activeHandleId]\n );\n\n return (\n <PanelContext.Provider value={panelContext}>\n <PanelGroupContext.Provider value={panelGroupContext}>\n <div className={className}>{children}</div>\n </PanelGroupContext.Provider>\n </PanelContext.Provider>\n );\n}\n\nfunction adjustByDelta(\n panels: Map<string, PanelData>,\n idBefore: string,\n idAfter: string,\n delta: number,\n prevSizes: number[]\n): number[] {\n if (delta === 0) {\n return prevSizes;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const nextSizes = prevSizes.concat();\n\n let deltaApplied = 0;\n\n // A resizing panel affects the panels before or after it.\n //\n // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.\n // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.\n //\n // A positive delta means the panel immediately before the resizer should \"expand\".\n // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.\n let pivotId = delta < 0 ? idBefore : idAfter;\n let index = panelsArray.findIndex((panel) => panel.id === pivotId);\n while (true) {\n const panel = panelsArray[index];\n const prevSize = prevSizes[index];\n const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);\n if (prevSize !== nextSize) {\n deltaApplied += prevSize - nextSize;\n\n nextSizes[index] = nextSize;\n\n if (deltaApplied.toPrecision(PRECISION) >= delta.toPrecision(PRECISION)) {\n break;\n }\n }\n\n if (delta < 0) {\n if (--index < 0) {\n break;\n }\n } else {\n if (++index >= panelsArray.length) {\n break;\n }\n }\n }\n\n // If we were unable to resize any of the panels panels, return the previous state.\n // This will essentially bailout and ignore the \"mousemove\" event.\n if (deltaApplied === 0) {\n return prevSizes;\n }\n\n // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.\n pivotId = delta < 0 ? idAfter : idBefore;\n index = panelsArray.findIndex((panel) => panel.id === pivotId);\n nextSizes[index] = prevSizes[index] + deltaApplied;\n\n return nextSizes;\n}\n\nfunction getOffset(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const panelsArray = panelsMapToSortedArray(panels);\n\n let index = panelsArray.findIndex((panel) => panel.id === id);\n if (index < 0) {\n return 0;\n }\n\n let scaledOffset = 0;\n\n for (index = index - 1; index >= 0; index--) {\n const panel = panelsArray[index];\n scaledOffset += getSize(panels, panel.id, direction, sizes, height, width);\n }\n\n return Math.round(scaledOffset);\n}\n\nfunction getSize(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const totalSize = direction === \"horizontal\" ? width : height;\n\n if (panels.size === 1) {\n return totalSize;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const index = panelsArray.findIndex((panel) => panel.id === id);\n const size = sizes[index];\n if (size == null) {\n return 0;\n }\n\n return Math.round(size * totalSize);\n}\n\nfunction panelsMapToSortedArray(panels: Map<string, PanelData>): PanelData[] {\n return Array.from(panels.values()).sort((a, b) => a.order - b.order);\n}\n","import { useRef } from \"react\";\n\nlet counter = 0;\n\nexport default function useUniqueId(id: string \| null = null): string {\n const idRef = useRef<string \| null>(id);\n if (idRef.current === null) {\n idRef.current = \"\" + counter++;\n }\n\n return idRef.current;\n}\n","import { PanelData } from \"../types\";\n\ntype SerializedPanelGroupState = { [panelIds: string]: number[] };\n\nfunction loadSerializedPanelGroupState(\n autoSaveId: string\n): SerializedPanelGroupState \| null {\n try {\n const serialized = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);\n if (serialized) {\n const parsed = JSON.parse(serialized);\n if (typeof parsed === \"object\" && parsed != null) {\n return parsed;\n }\n }\n } catch (error) {}\n\n return null;\n}\n\nexport function loadPanelLayout(\n autoSaveId: string,\n panelIds: string[]\n): number[] \| null {\n const state = loadSerializedPanelGroupState(autoSaveId);\n if (state) {\n return state[panelIds.join(\",\")] ?? null;\n }\n\n return null;\n}\n\nexport function savePanelGroupLayout(\n autoSaveId: string,\n panelIds: string[],\n sizes: number[]\n): void {\n const state = loadSerializedPanelGroupState(autoSaveId) \|\| {};\n state[panelIds.join(\",\")] = sizes;\n\n try {\n localStorage.setItem(\n `PanelGroup:sizes:${autoSaveId}`,\n JSON.stringify(state)\n );\n } catch (error) {\n console.error(error);\n }\n}\n","import { ReactNode, useContext, useEffect, useState } from \"react\";\n\nimport useUniqueId from \"./hooks/useUniqueId\";\nimport { PanelContext, PanelGroupContext } from \"./PanelContexts\";\nimport { ResizeHandler } from \"./types\";\n\nexport default function PanelResizeHandle({\n children = null,\n className = \"\",\n disabled = false,\n id: idProp = null,\n}: {\n children?: ReactNode;\n className?: string;\n disabled?: boolean;\n id?: string \| null;\n}) {\n const panelContext = useContext(PanelContext);\n const panelGroupContext = useContext(PanelGroupContext);\n if (panelContext === null \|\| panelGroupContext === null) {\n throw Error(\n `PanelResizeHandle components must be rendered within a PanelGroup container`\n );\n }\n\n const id = useUniqueId(idProp);\n\n const { activeHandleId } = panelContext;\n const {\n direction,\n groupId,\n registerResizeHandle,\n startDragging,\n stopDragging,\n } = panelGroupContext;\n\n const isDragging = activeHandleId === id;\n\n const [resizeHandler, setResizeHandler] = useState<ResizeHandler \| null>(\n null\n );\n\n useEffect(() => {\n if (disabled) {\n setResizeHandler(null);\n } else {\n const resizeHandler = registerResizeHandle(id);\n setResizeHandler(() => resizeHandler);\n }\n }, [disabled, groupId, id, registerResizeHandle]);\n\n useEffect(() => {\n if (disabled \|\| resizeHandler == null \|\| !isDragging) {\n return;\n }\n\n document.body.style.cursor =\n direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\";\n\n const onMouseMove = (event: MouseEvent) => {\n resizeHandler(event);\n };\n\n document.body.addEventListener(\"mouseleave\", stopDragging);\n document.body.addEventListener(\"mousemove\", onMouseMove);\n document.body.addEventListener(\"touchmove\", onMouseMove);\n document.body.addEventListener(\"mouseup\", stopDragging);\n\n return () => {\n document.body.style.cursor = \"\";\n\n document.body.removeEventListener(\"mouseleave\", stopDragging);\n document.body.removeEventListener(\"mousemove\", onMouseMove);\n document.body.removeEventListener(\"touchmove\", onMouseMove);\n document.body.removeEventListener(\"mouseup\", stopDragging);\n };\n }, [direction, disabled, isDragging, resizeHandler, stopDragging]);\n\n return (\n <div\n className={className}\n data-panel-group-id={groupId}\n data-panel-resize-handle-id={id}\n onMouseDown={() => startDragging(id)}\n onMouseUp={stopDragging}\n onTouchStart={() => startDragging(id)}\n onTouchEnd={stopDragging}\n style={{\n cursor: direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\",\n }}\n >\n {children}\n </div>\n );\n}\n"],"names":[],"version":3,"file":"react-resizable-panels.js.map","sourceRoot":"../../../"}

package/dist/react-resizable-panels.module.js CHANGED Viewed

@@ -4,6 +4,7 @@ import {useContext as $fpI56$useContext, useLayoutEffect as $fpI56$useLayoutEffe
+const $f922724f4bad4884$export$f34532ac99e32150 = (0, $fpI56$createContext)(null);
 const $f922724f4bad4884$export$7d8c6d083caec74a = (0, $fpI56$createContext)(null);
@@ -50,8 +51,46 @@ function $ad28bce87b00c2be$export$2e2bcd8739ae039({ children: children = null ,
+let $968185313205dcfa$var$counter = 0;
+function $968185313205dcfa$export$2e2bcd8739ae039(id = null) {
+    const idRef = (0, $fpI56$useRef)(id);
+    if (idRef.current === null) idRef.current = "" + $968185313205dcfa$var$counter++;
+    return idRef.current;
+}
+function $6ff1a22b27cc039d$var$loadSerializedPanelGroupState(autoSaveId) {
+    try {
+        const serialized = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+        if (serialized) {
+            const parsed = JSON.parse(serialized);
+            if (typeof parsed === "object" && parsed != null) return parsed;
+        }
+    } catch (error) {}
+    return null;
+}
+function $6ff1a22b27cc039d$export$9c80c6617f0386da(autoSaveId, panelIds) {
+    const state = $6ff1a22b27cc039d$var$loadSerializedPanelGroupState(autoSaveId);
+    if (state) return state[panelIds.join(",")] ?? null;
+    return null;
+}
+function $6ff1a22b27cc039d$export$af183b313c61be4f(autoSaveId, panelIds, sizes) {
+    const state = $6ff1a22b27cc039d$var$loadSerializedPanelGroupState(autoSaveId) || {};
+    state[panelIds.join(",")] = sizes;
+    try {
+        localStorage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
+    } catch (error) {
+        console.error(error);
+    }
+}
 const $c44ee3356398c8a1$var$PRECISION = 5;
 function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , height: height , width: width  }) {
+    const groupId = (0, $968185313205dcfa$export$2e2bcd8739ae039)();
+    const [activeHandleId, setActiveHandleId] = (0, $fpI56$useState)(null);
     const [panels, setPanels] = (0, $fpI56$useState)(new Map());
     // 0-1 values representing the relative size of each panel.
     const [sizes, setSizes] = (0, $fpI56$useState)([]);
@@ -81,10 +120,10 @@ function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         // If this panel has been configured to persist sizing information,
         // default size should be restored from local storage if possible.
         let defaultSizes = undefined;
-        if (autoSaveId) try {
-            const value = localStorage.getItem($c44ee3356398c8a1$var$createLocalStorageKey(autoSaveId, panels));
-            if (value) defaultSizes = JSON.parse(value);
-        } catch (error) {}
+        if (autoSaveId) {
+            const panelIds = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels).map((panel)=>panel.id);
+            defaultSizes = (0, $6ff1a22b27cc039d$export$9c80c6617f0386da)(autoSaveId, panelIds);
+        }
         if (defaultSizes != null) setSizes(defaultSizes);
         else {
             const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
@@ -98,10 +137,11 @@ function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         panels
     ]);
     (0, $fpI56$useEffect)(()=>{
+        // If this panel has been configured to persist sizing information, save sizes to local storage.
         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));
+            const panelIds = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels).map((panel)=>panel.id);
+            (0, $6ff1a22b27cc039d$export$af183b313c61be4f)(autoSaveId, panelIds, sizes);
         }
     }, [
         autoSaveId,
@@ -140,18 +180,27 @@ function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             return nextPanels;
         });
     }, []);
-    const registerResizeHandle = (0, $fpI56$useCallback)((idBefore, idAfter)=>{
-        return (event)=>{
+    const registerResizeHandle = (0, $fpI56$useCallback)((id)=>{
+        const resizeHandler = (event)=>{
             event.preventDefault();
             const { direction: direction , height: height , panels: panels , sizes: prevSizes , width: width  } = committedValuesRef.current;
+            const handle = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
+            const handles = Array.from(document.querySelectorAll(`[data-panel-group-id="${groupId}"]`));
+            const index = handles.indexOf(handle);
+            const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
+            const idBefore = panelsArray[index]?.id ?? null;
+            const idAfter = panelsArray[index + 1]?.id ?? null;
+            if (idBefore == null || idAfter == null) return;
             const isHorizontal = direction === "horizontal";
             const movement = isHorizontal ? event.movementX : event.movementY;
             const delta = isHorizontal ? movement / width : movement / height;
             const nextSizes = $c44ee3356398c8a1$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes);
             if (prevSizes !== nextSizes) setSizes(nextSizes);
         };
-    // TODO [issues/5] Add to Map
-    }, []);
+        return resizeHandler;
+    }, [
+        groupId
+    ]);
     const unregisterPanel = (0, $fpI56$useCallback)((id)=>{
         setPanels((prevPanels)=>{
             if (!prevPanels.has(id)) return prevPanels;
@@ -160,32 +209,48 @@ function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             return nextPanels;
         });
     }, []);
-    const context = (0, $fpI56$useMemo)(()=>({
+    const panelGroupContext = (0, $fpI56$useMemo)(()=>({
             direction: direction,
             getPanelStyle: getPanelStyle,
+            groupId: groupId,
             registerPanel: registerPanel,
             registerResizeHandle: registerResizeHandle,
+            startDragging: (id)=>setActiveHandleId(id),
+            stopDragging: ()=>setActiveHandleId(null),
             unregisterPanel: unregisterPanel
         }), [
         direction,
         getPanelStyle,
+        groupId,
         registerPanel,
         registerResizeHandle,
         unregisterPanel
     ]);
-    return /*#__PURE__*/ (0, $fpI56$jsxDEV)((0, $f922724f4bad4884$export$7d8c6d083caec74a).Provider, {
-        value: context,
-        children: /*#__PURE__*/ (0, $fpI56$jsxDEV)("div", {
-            className: className,
-            children: children
+    const panelContext = (0, $fpI56$useMemo)(()=>({
+            activeHandleId: activeHandleId
+        }), [
+        activeHandleId
+    ]);
+    return /*#__PURE__*/ (0, $fpI56$jsxDEV)((0, $f922724f4bad4884$export$f34532ac99e32150).Provider, {
+        value: panelContext,
+        children: /*#__PURE__*/ (0, $fpI56$jsxDEV)((0, $f922724f4bad4884$export$7d8c6d083caec74a).Provider, {
+            value: panelGroupContext,
+            children: /*#__PURE__*/ (0, $fpI56$jsxDEV)("div", {
+                className: className,
+                children: children
+            }, void 0, false, {
+                fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
+                lineNumber: 247,
+                columnNumber: 9
+            }, this)
         }, void 0, false, {
             fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-            lineNumber: 224,
+            lineNumber: 246,
             columnNumber: 7
         }, this)
     }, void 0, false, {
         fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-        lineNumber: 223,
+        lineNumber: 245,
         columnNumber: 5
     }, this);
 }
@@ -227,11 +292,6 @@ function $c44ee3356398c8a1$var$adjustByDelta(panels, idBefore, idAfter, delta, p
     nextSizes[index] = prevSizes[index] + deltaApplied;
     return nextSizes;
 }
-function $c44ee3356398c8a1$var$createLocalStorageKey(autoSaveId, panels) {
-    const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
-    const panelIds = panelsArray.map((panel)=>panel.id);
-    return `PanelGroup:sizes:${autoSaveId}${panelIds.join("|")}`;
-}
 function $c44ee3356398c8a1$var$getOffset(panels, id, direction, sizes, height, width) {
     const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
     let index = panelsArray.findIndex((panel)=>panel.id === id);
@@ -260,59 +320,67 @@ function $c44ee3356398c8a1$var$panelsMapToSortedArray(panels) {
-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;
+function $b067b37706bb37b8$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false , id: idProp = null  }) {
+    const panelContext = (0, $fpI56$useContext)((0, $f922724f4bad4884$export$f34532ac99e32150));
+    const panelGroupContext = (0, $fpI56$useContext)((0, $f922724f4bad4884$export$7d8c6d083caec74a));
+    if (panelContext === null || panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
+    const id = (0, $968185313205dcfa$export$2e2bcd8739ae039)(idProp);
+    const { activeHandleId: activeHandleId  } = panelContext;
+    const { direction: direction , groupId: groupId , registerResizeHandle: registerResizeHandle , startDragging: startDragging , stopDragging: stopDragging  } = panelGroupContext;
+    const isDragging = activeHandleId === id;
     const [resizeHandler, setResizeHandler] = (0, $fpI56$useState)(null);
-    const [isDragging, setIsDragging] = (0, $fpI56$useState)(false);
     (0, $fpI56$useEffect)(()=>{
         if (disabled) setResizeHandler(null);
-        else setResizeHandler(()=>registerResizeHandle(panelBefore, panelAfter));
+        else {
+            const resizeHandler = registerResizeHandle(id);
+            setResizeHandler(()=>resizeHandler);
+        }
     }, [
         disabled,
-        panelAfter,
-        panelBefore,
+        groupId,
+        id,
         registerResizeHandle
     ]);
     (0, $fpI56$useEffect)(()=>{
         if (disabled || resizeHandler == null || !isDragging) return;
         document.body.style.cursor = direction === "horizontal" ? "ew-resize" : "ns-resize";
-        const onMouseLeave = (_)=>{
-            setIsDragging(false);
-        };
         const onMouseMove = (event)=>{
             resizeHandler(event);
         };
-        const onMouseUp = (_)=>{
-            setIsDragging(false);
-        };
-        document.body.addEventListener("mouseleave", onMouseLeave);
+        document.body.addEventListener("mouseleave", stopDragging);
         document.body.addEventListener("mousemove", onMouseMove);
-        document.body.addEventListener("mouseup", onMouseUp);
+        document.body.addEventListener("touchmove", onMouseMove);
+        document.body.addEventListener("mouseup", stopDragging);
         return ()=>{
             document.body.style.cursor = "";
-            document.body.removeEventListener("mouseleave", onMouseLeave);
+            document.body.removeEventListener("mouseleave", stopDragging);
             document.body.removeEventListener("mousemove", onMouseMove);
-            document.body.removeEventListener("mouseup", onMouseUp);
+            document.body.removeEventListener("touchmove", onMouseMove);
+            document.body.removeEventListener("mouseup", stopDragging);
         };
     }, [
         direction,
         disabled,
         isDragging,
-        resizeHandler
+        resizeHandler,
+        stopDragging
     ]);
     return /*#__PURE__*/ (0, $fpI56$jsxDEV)("div", {
         className: className,
-        onMouseDown: ()=>setIsDragging(true),
-        onMouseUp: ()=>setIsDragging(false),
+        "data-panel-group-id": groupId,
+        "data-panel-resize-handle-id": id,
+        onMouseDown: ()=>startDragging(id),
+        onMouseUp: stopDragging,
+        onTouchStart: ()=>startDragging(id),
+        onTouchEnd: stopDragging,
         style: {
             cursor: direction === "horizontal" ? "ew-resize" : "ns-resize"
         },
         children: children
     }, void 0, false, {
         fileName: "packages/react-resizable-panels/src/PanelResizeHandle.tsx",
-        lineNumber: 75,
+        lineNumber: 80,
         columnNumber: 5
     }, this);
 }
@@ -320,5 +388,5 @@ function $b067b37706bb37b8$export$2e2bcd8739ae039({ children: children = null ,
-export {$ad28bce87b00c2be$export$2e2bcd8739ae039 as Panel, $c44ee3356398c8a1$export$2e2bcd8739ae039 as PanelGroup, $b067b37706bb37b8$export$2e2bcd8739ae039 as PanelResizeHandle};
+export {$ad28bce87b00c2be$export$2e2bcd8739ae039 as Panel, $f922724f4bad4884$export$f34532ac99e32150 as PanelContext, $c44ee3356398c8a1$export$2e2bcd8739ae039 as PanelGroup, $b067b37706bb37b8$export$2e2bcd8739ae039 as PanelResizeHandle};
 //# sourceMappingURL=react-resizable-panels.module.js.map

package/dist/react-resizable-panels.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"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","sources":["packages/react-resizable-panels/src/index.ts","packages/react-resizable-panels/src/Panel.tsx","packages/react-resizable-panels/src/PanelContexts.ts","packages/react-resizable-panels/src/PanelGroup.tsx","packages/react-resizable-panels/src/PanelResizeHandle.tsx"],"sourcesContent":["import Panel from \"./Panel\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelGroup, PanelResizeHandle };\n","import { ReactNode, useContext, useLayoutEffect } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\n\n// TODO [panels]\n// Support min pixel size too.\n// PanelGroup should warn if total width is less min pixel widths.\nexport default function Panel({\n children = null,\n className = \"\",\n defaultSize = 0.1,\n id,\n minSize = 0.1,\n order = null,\n}: {\n children?: ReactNode;\n className?: string;\n defaultSize?: number;\n id: string;\n minSize?: number;\n order?: number \| null;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `Panel components must be rendered within a PanelGroup container`\n );\n }\n\n if (minSize > defaultSize) {\n console.error(\n `Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`\n );\n\n defaultSize = minSize;\n }\n\n const { getPanelStyle, registerPanel, unregisterPanel } = context;\n\n useLayoutEffect(() => {\n const panel = {\n defaultSize,\n id,\n minSize,\n order,\n };\n\n registerPanel(id, panel);\n\n return () => {\n unregisterPanel(id);\n };\n }, [defaultSize, id, minSize, order, registerPanel, unregisterPanel]);\n\n const style = getPanelStyle(id);\n\n return (\n <div className={className} style={style}>\n {children}\n </div>\n );\n}\n","import { CSSProperties, createContext } from \"react\";\n\nimport { PanelData, ResizeHandler } from \"./types\";\n\nexport const PanelGroupContext = createContext<{\n direction: \"horizontal\" \| \"vertical\";\n getPanelStyle: (id: string) => CSSProperties;\n registerPanel: (id: string, panel: PanelData) => void;\n registerResizeHandle: (idBefore: string, idAfter: string) => ResizeHandler;\n unregisterPanel: (id: string) => void;\n} \| null>(null);\n","import {\n CSSProperties,\n ReactNode,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { Direction, PanelData } from \"./types\";\n\ntype Props = {\n autoSaveId?: string;\n children?: ReactNode[];\n className?: string;\n direction: Direction;\n height: number;\n width: number;\n};\n\nconst PRECISION = 5;\n\n// TODO [panels]\n// Within an active drag, remember original positions to refine more easily on expand.\n// Look at what the Chrome devtools Sources does.\n\nexport default function PanelGroup({\n autoSaveId,\n children = null,\n className = \"\",\n direction,\n height,\n width,\n}: Props) {\n const [panels, setPanels] = useState<Map<string, PanelData>>(new Map());\n\n // 0-1 values representing the relative size of each panel.\n const [sizes, setSizes] = useState<number[]>([]);\n\n // Store committed values to avoid unnecessarily re-running memoization/effects functions.\n const committedValuesRef = useRef<{\n direction: Direction;\n height: number;\n panels: Map<string, PanelData>;\n sizes: number[];\n width: number;\n }>({\n direction,\n height,\n panels,\n sizes,\n width,\n });\n useLayoutEffect(() => {\n committedValuesRef.current.direction = direction;\n committedValuesRef.current.height = height;\n committedValuesRef.current.panels = panels;\n committedValuesRef.current.sizes = sizes;\n committedValuesRef.current.width = width;\n });\n\n // Once all panels have registered themselves,\n // Compute the initial sizes based on default weights.\n // This assumes that panels register during initial mount (no conditional rendering)!\n useLayoutEffect(() => {\n const sizes = committedValuesRef.current.sizes;\n if (sizes.length === panels.size) {\n return;\n }\n\n // TODO [panels]\n // Validate that the total minSize is <= 1.\n\n // If this panel has been configured to persist sizing information,\n // default size should be restored from local storage if possible.\n let defaultSizes: number[] \| undefined = undefined;\n if (autoSaveId) {\n try {\n const value = localStorage.getItem(\n createLocalStorageKey(autoSaveId, panels)\n );\n if (value) {\n defaultSizes = JSON.parse(value);\n }\n } catch (error) {}\n }\n\n if (defaultSizes != null) {\n setSizes(defaultSizes);\n } else {\n const panelsArray = panelsMapToSortedArray(panels);\n const totalWeight = panelsArray.reduce((weight, panel) => {\n return weight + panel.defaultSize;\n }, 0);\n\n setSizes(panelsArray.map((panel) => panel.defaultSize / totalWeight));\n }\n }, [autoSaveId, panels]);\n\n useEffect(() => {\n if (autoSaveId) {\n if (sizes.length === 0 \|\| sizes.length !== panels.size) {\n return;\n }\n\n // If this panel has been configured to persist sizing information, save sizes to local storage.\n localStorage.setItem(\n createLocalStorageKey(autoSaveId, panels),\n JSON.stringify(sizes)\n );\n }\n }, [autoSaveId, panels, sizes]);\n\n const getPanelStyle = useCallback(\n (id: string): CSSProperties => {\n const { panels } = committedValuesRef.current;\n\n const offset = getOffset(panels, id, direction, sizes, height, width);\n const size = getSize(panels, id, direction, sizes, height, width);\n\n if (direction === \"horizontal\") {\n return {\n height: \"100%\",\n position: \"absolute\",\n left: offset,\n top: 0,\n width: size,\n };\n } else {\n return {\n height: size,\n position: \"absolute\",\n left: 0,\n top: offset,\n width: \"100%\",\n };\n }\n },\n [direction, height, sizes, width]\n );\n\n const registerPanel = useCallback((id: string, panel: PanelData) => {\n setPanels((prevPanels) => {\n if (prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.set(id, panel);\n\n return nextPanels;\n });\n }, []);\n\n const registerResizeHandle = useCallback(\n (idBefore: string, idAfter: string) => {\n return (event: MouseEvent) => {\n event.preventDefault();\n\n const {\n direction,\n height,\n panels,\n sizes: prevSizes,\n width,\n } = committedValuesRef.current;\n\n const isHorizontal = direction === \"horizontal\";\n const movement = isHorizontal ? event.movementX : event.movementY;\n const delta = isHorizontal ? movement / width : movement / height;\n\n const nextSizes = adjustByDelta(\n panels,\n idBefore,\n idAfter,\n delta,\n prevSizes\n );\n if (prevSizes !== nextSizes) {\n setSizes(nextSizes);\n }\n };\n\n // TODO [issues/5] Add to Map\n },\n []\n );\n\n const unregisterPanel = useCallback((id: string) => {\n setPanels((prevPanels) => {\n if (!prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.delete(id);\n\n return nextPanels;\n });\n }, []);\n\n const context = useMemo(\n () => ({\n direction,\n getPanelStyle,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n }),\n [\n direction,\n getPanelStyle,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n ]\n );\n\n return (\n <PanelGroupContext.Provider value={context}>\n <div className={className}>{children}</div>\n </PanelGroupContext.Provider>\n );\n}\n\nfunction adjustByDelta(\n panels: Map<string, PanelData>,\n idBefore: string,\n idAfter: string,\n delta: number,\n prevSizes: number[]\n): number[] {\n if (delta === 0) {\n return prevSizes;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const nextSizes = prevSizes.concat();\n\n let deltaApplied = 0;\n\n // A resizing panel affects the panels before or after it.\n //\n // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.\n // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.\n //\n // A positive delta means the panel immediately before the resizer should \"expand\".\n // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.\n let pivotId = delta < 0 ? idBefore : idAfter;\n let index = panelsArray.findIndex((panel) => panel.id === pivotId);\n while (true) {\n const panel = panelsArray[index];\n const prevSize = prevSizes[index];\n const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);\n if (prevSize !== nextSize) {\n deltaApplied += prevSize - nextSize;\n\n nextSizes[index] = nextSize;\n\n if (deltaApplied.toPrecision(PRECISION) >= delta.toPrecision(PRECISION)) {\n break;\n }\n }\n\n if (delta < 0) {\n if (--index < 0) {\n break;\n }\n } else {\n if (++index >= panelsArray.length) {\n break;\n }\n }\n }\n\n // If we were unable to resize any of the panels panels, return the previous state.\n // This will essentially bailout and ignore the \"mousemove\" event.\n if (deltaApplied === 0) {\n return prevSizes;\n }\n\n // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.\n pivotId = delta < 0 ? idAfter : idBefore;\n index = panelsArray.findIndex((panel) => panel.id === pivotId);\n nextSizes[index] = prevSizes[index] + deltaApplied;\n\n return nextSizes;\n}\n\nfunction createLocalStorageKey(\n autoSaveId: string,\n panels: Map<string, PanelData>\n): string {\n const panelsArray = panelsMapToSortedArray(panels);\n const panelIds = panelsArray.map((panel) => panel.id);\n\n return `PanelGroup:sizes:${autoSaveId}${panelIds.join(\"\|\")}`;\n}\n\nfunction getOffset(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const panelsArray = panelsMapToSortedArray(panels);\n\n let index = panelsArray.findIndex((panel) => panel.id === id);\n if (index < 0) {\n return 0;\n }\n\n let scaledOffset = 0;\n\n for (index = index - 1; index >= 0; index--) {\n const panel = panelsArray[index];\n scaledOffset += getSize(panels, panel.id, direction, sizes, height, width);\n }\n\n return Math.round(scaledOffset);\n}\n\nfunction getSize(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const totalSize = direction === \"horizontal\" ? width : height;\n\n if (panels.size === 1) {\n return totalSize;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const index = panelsArray.findIndex((panel) => panel.id === id);\n const size = sizes[index];\n if (size == null) {\n return 0;\n }\n\n return Math.round(size * totalSize);\n}\n\nfunction panelsMapToSortedArray(panels: Map<string, PanelData>): PanelData[] {\n return Array.from(panels.values()).sort((a, b) => a.order - b.order);\n}\n","import { ReactNode, useContext, useEffect, useState } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { ResizeHandler } from \"./types\";\n\nexport default function PanelResizeHandle({\n children = null,\n className = \"\",\n disabled = false,\n panelAfter,\n panelBefore,\n}: {\n children?: ReactNode;\n className?: string;\n disabled?: boolean;\n panelAfter: string;\n panelBefore: string;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `PanelResizeHandle components must be rendered within a PanelGroup container`\n );\n }\n\n const { direction, registerResizeHandle } = context;\n\n const [resizeHandler, setResizeHandler] = useState<ResizeHandler \| null>(\n null\n );\n const [isDragging, setIsDragging] = useState(false);\n\n useEffect(() => {\n if (disabled) {\n setResizeHandler(null);\n } else {\n setResizeHandler(() => registerResizeHandle(panelBefore, panelAfter));\n }\n }, [disabled, panelAfter, panelBefore, registerResizeHandle]);\n\n useEffect(() => {\n if (disabled \|\| resizeHandler == null \|\| !isDragging) {\n return;\n }\n\n document.body.style.cursor =\n direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\";\n\n const onMouseLeave = (_: MouseEvent) => {\n setIsDragging(false);\n };\n\n const onMouseMove = (event: MouseEvent) => {\n resizeHandler(event);\n };\n\n const onMouseUp = (_: MouseEvent) => {\n setIsDragging(false);\n };\n\n document.body.addEventListener(\"mouseleave\", onMouseLeave);\n document.body.addEventListener(\"mousemove\", onMouseMove);\n document.body.addEventListener(\"mouseup\", onMouseUp);\n\n return () => {\n document.body.style.cursor = \"\";\n\n document.body.removeEventListener(\"mouseleave\", onMouseLeave);\n document.body.removeEventListener(\"mousemove\", onMouseMove);\n document.body.removeEventListener(\"mouseup\", onMouseUp);\n };\n }, [direction, disabled, isDragging, resizeHandler]);\n\n return (\n <div\n className={className}\n onMouseDown={() => setIsDragging(true)}\n onMouseUp={() => setIsDragging(false)}\n style={{\n cursor: direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\",\n }}\n >\n {children}\n </div>\n );\n}\n"],"names":[],"version":3,"file":"react-resizable-panels.module.js.map","sourceRoot":"../../../"}
1	+ {"mappings":"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","sources":["packages/react-resizable-panels/src/index.ts","packages/react-resizable-panels/src/Panel.tsx","packages/react-resizable-panels/src/PanelContexts.ts","packages/react-resizable-panels/src/PanelGroup.tsx","packages/react-resizable-panels/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/utils/serialization.ts","packages/react-resizable-panels/src/PanelResizeHandle.tsx"],"sourcesContent":["import Panel from \"./Panel\";\nimport { PanelContext } from \"./PanelContexts\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelContext, PanelGroup, PanelResizeHandle };\n","import { ReactNode, useContext, useLayoutEffect } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\n\n// TODO [panels]\n// Support min pixel size too.\n// PanelGroup should warn if total width is less min pixel widths.\nexport default function Panel({\n children = null,\n className = \"\",\n defaultSize = 0.1,\n id,\n minSize = 0.1,\n order = null,\n}: {\n children?: ReactNode;\n className?: string;\n defaultSize?: number;\n id: string;\n minSize?: number;\n order?: number \| null;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `Panel components must be rendered within a PanelGroup container`\n );\n }\n\n if (minSize > defaultSize) {\n console.error(\n `Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`\n );\n\n defaultSize = minSize;\n }\n\n const { getPanelStyle, registerPanel, unregisterPanel } = context;\n\n useLayoutEffect(() => {\n const panel = {\n defaultSize,\n id,\n minSize,\n order,\n };\n\n registerPanel(id, panel);\n\n return () => {\n unregisterPanel(id);\n };\n }, [defaultSize, id, minSize, order, registerPanel, unregisterPanel]);\n\n const style = getPanelStyle(id);\n\n return (\n <div className={className} style={style}>\n {children}\n </div>\n );\n}\n","import { CSSProperties, createContext } from \"react\";\n\nimport { PanelData, ResizeHandler } from \"./types\";\n\nexport const PanelContext = createContext<{\n activeHandleId: string \| null;\n} \| null>(null);\n\nexport const PanelGroupContext = createContext<{\n direction: \"horizontal\" \| \"vertical\";\n getPanelStyle: (id: string) => CSSProperties;\n groupId: string;\n registerPanel: (id: string, panel: PanelData) => void;\n registerResizeHandle: (id: string) => ResizeHandler;\n startDragging: (id: string) => void;\n stopDragging: () => void;\n unregisterPanel: (id: string) => void;\n} \| null>(null);\n","import {\n CSSProperties,\n ReactNode,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport useUniqueId from \"./hooks/useUniqueId\";\n\nimport { PanelContext, PanelGroupContext } from \"./PanelContexts\";\nimport { Direction, PanelData } from \"./types\";\nimport { loadPanelLayout, savePanelGroupLayout } from \"./utils/serialization\";\n\ntype Props = {\n autoSaveId?: string;\n children?: ReactNode;\n className?: string;\n direction: Direction;\n height: number;\n width: number;\n};\n\nconst PRECISION = 5;\n\n// TODO [panels]\n// Within an active drag, remember original positions to refine more easily on expand.\n// Look at what the Chrome devtools Sources does.\n\nexport default function PanelGroup({\n autoSaveId,\n children = null,\n className = \"\",\n direction,\n height,\n width,\n}: Props) {\n const groupId = useUniqueId();\n\n const [activeHandleId, setActiveHandleId] = useState<string \| null>(null);\n const [panels, setPanels] = useState<Map<string, PanelData>>(new Map());\n\n // 0-1 values representing the relative size of each panel.\n const [sizes, setSizes] = useState<number[]>([]);\n\n // Store committed values to avoid unnecessarily re-running memoization/effects functions.\n const committedValuesRef = useRef<{\n direction: Direction;\n height: number;\n panels: Map<string, PanelData>;\n sizes: number[];\n width: number;\n }>({\n direction,\n height,\n panels,\n sizes,\n width,\n });\n useLayoutEffect(() => {\n committedValuesRef.current.direction = direction;\n committedValuesRef.current.height = height;\n committedValuesRef.current.panels = panels;\n committedValuesRef.current.sizes = sizes;\n committedValuesRef.current.width = width;\n });\n\n // Once all panels have registered themselves,\n // Compute the initial sizes based on default weights.\n // This assumes that panels register during initial mount (no conditional rendering)!\n useLayoutEffect(() => {\n const sizes = committedValuesRef.current.sizes;\n if (sizes.length === panels.size) {\n return;\n }\n\n // TODO [panels]\n // Validate that the total minSize is <= 1.\n\n // If this panel has been configured to persist sizing information,\n // default size should be restored from local storage if possible.\n let defaultSizes: number[] \| undefined = undefined;\n if (autoSaveId) {\n const panelIds = panelsMapToSortedArray(panels).map((panel) => panel.id);\n defaultSizes = loadPanelLayout(autoSaveId, panelIds);\n }\n\n if (defaultSizes != null) {\n setSizes(defaultSizes);\n } else {\n const panelsArray = panelsMapToSortedArray(panels);\n const totalWeight = panelsArray.reduce((weight, panel) => {\n return weight + panel.defaultSize;\n }, 0);\n\n setSizes(panelsArray.map((panel) => panel.defaultSize / totalWeight));\n }\n }, [autoSaveId, panels]);\n\n useEffect(() => {\n // If this panel has been configured to persist sizing information, save sizes to local storage.\n if (autoSaveId) {\n if (sizes.length === 0 \|\| sizes.length !== panels.size) {\n return;\n }\n\n const panelIds = panelsMapToSortedArray(panels).map((panel) => panel.id);\n savePanelGroupLayout(autoSaveId, panelIds, sizes);\n }\n }, [autoSaveId, panels, sizes]);\n\n const getPanelStyle = useCallback(\n (id: string): CSSProperties => {\n const { panels } = committedValuesRef.current;\n\n const offset = getOffset(panels, id, direction, sizes, height, width);\n const size = getSize(panels, id, direction, sizes, height, width);\n\n if (direction === \"horizontal\") {\n return {\n height: \"100%\",\n position: \"absolute\",\n left: offset,\n top: 0,\n width: size,\n };\n } else {\n return {\n height: size,\n position: \"absolute\",\n left: 0,\n top: offset,\n width: \"100%\",\n };\n }\n },\n [direction, height, sizes, width]\n );\n\n const registerPanel = useCallback((id: string, panel: PanelData) => {\n setPanels((prevPanels) => {\n if (prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.set(id, panel);\n\n return nextPanels;\n });\n }, []);\n\n const registerResizeHandle = useCallback(\n (id: string) => {\n const resizeHandler = (event: MouseEvent) => {\n event.preventDefault();\n\n const {\n direction,\n height,\n panels,\n sizes: prevSizes,\n width,\n } = committedValuesRef.current;\n\n const handle = document.querySelector(\n `[data-panel-resize-handle-id=\"${id}\"]`\n );\n const handles = Array.from(\n document.querySelectorAll(`[data-panel-group-id=\"${groupId}\"]`)\n );\n const index = handles.indexOf(handle);\n const panelsArray = panelsMapToSortedArray(panels);\n const idBefore: string \| null = panelsArray[index]?.id ?? null;\n const idAfter: string \| null = panelsArray[index + 1]?.id ?? null;\n if (idBefore == null \|\| idAfter == null) {\n return;\n }\n\n const isHorizontal = direction === \"horizontal\";\n const movement = isHorizontal ? event.movementX : event.movementY;\n const delta = isHorizontal ? movement / width : movement / height;\n\n const nextSizes = adjustByDelta(\n panels,\n idBefore,\n idAfter,\n delta,\n prevSizes\n );\n if (prevSizes !== nextSizes) {\n setSizes(nextSizes);\n }\n };\n\n return resizeHandler;\n },\n [groupId]\n );\n\n const unregisterPanel = useCallback((id: string) => {\n setPanels((prevPanels) => {\n if (!prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.delete(id);\n\n return nextPanels;\n });\n }, []);\n\n const panelGroupContext = useMemo(\n () => ({\n direction,\n getPanelStyle,\n groupId,\n registerPanel,\n registerResizeHandle,\n startDragging: (id: string) => setActiveHandleId(id),\n stopDragging: () => setActiveHandleId(null),\n unregisterPanel,\n }),\n [\n direction,\n getPanelStyle,\n groupId,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n ]\n );\n\n const panelContext = useMemo(\n () => ({\n activeHandleId,\n }),\n [activeHandleId]\n );\n\n return (\n <PanelContext.Provider value={panelContext}>\n <PanelGroupContext.Provider value={panelGroupContext}>\n <div className={className}>{children}</div>\n </PanelGroupContext.Provider>\n </PanelContext.Provider>\n );\n}\n\nfunction adjustByDelta(\n panels: Map<string, PanelData>,\n idBefore: string,\n idAfter: string,\n delta: number,\n prevSizes: number[]\n): number[] {\n if (delta === 0) {\n return prevSizes;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const nextSizes = prevSizes.concat();\n\n let deltaApplied = 0;\n\n // A resizing panel affects the panels before or after it.\n //\n // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.\n // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.\n //\n // A positive delta means the panel immediately before the resizer should \"expand\".\n // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.\n let pivotId = delta < 0 ? idBefore : idAfter;\n let index = panelsArray.findIndex((panel) => panel.id === pivotId);\n while (true) {\n const panel = panelsArray[index];\n const prevSize = prevSizes[index];\n const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);\n if (prevSize !== nextSize) {\n deltaApplied += prevSize - nextSize;\n\n nextSizes[index] = nextSize;\n\n if (deltaApplied.toPrecision(PRECISION) >= delta.toPrecision(PRECISION)) {\n break;\n }\n }\n\n if (delta < 0) {\n if (--index < 0) {\n break;\n }\n } else {\n if (++index >= panelsArray.length) {\n break;\n }\n }\n }\n\n // If we were unable to resize any of the panels panels, return the previous state.\n // This will essentially bailout and ignore the \"mousemove\" event.\n if (deltaApplied === 0) {\n return prevSizes;\n }\n\n // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.\n pivotId = delta < 0 ? idAfter : idBefore;\n index = panelsArray.findIndex((panel) => panel.id === pivotId);\n nextSizes[index] = prevSizes[index] + deltaApplied;\n\n return nextSizes;\n}\n\nfunction getOffset(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const panelsArray = panelsMapToSortedArray(panels);\n\n let index = panelsArray.findIndex((panel) => panel.id === id);\n if (index < 0) {\n return 0;\n }\n\n let scaledOffset = 0;\n\n for (index = index - 1; index >= 0; index--) {\n const panel = panelsArray[index];\n scaledOffset += getSize(panels, panel.id, direction, sizes, height, width);\n }\n\n return Math.round(scaledOffset);\n}\n\nfunction getSize(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const totalSize = direction === \"horizontal\" ? width : height;\n\n if (panels.size === 1) {\n return totalSize;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const index = panelsArray.findIndex((panel) => panel.id === id);\n const size = sizes[index];\n if (size == null) {\n return 0;\n }\n\n return Math.round(size * totalSize);\n}\n\nfunction panelsMapToSortedArray(panels: Map<string, PanelData>): PanelData[] {\n return Array.from(panels.values()).sort((a, b) => a.order - b.order);\n}\n","import { useRef } from \"react\";\n\nlet counter = 0;\n\nexport default function useUniqueId(id: string \| null = null): string {\n const idRef = useRef<string \| null>(id);\n if (idRef.current === null) {\n idRef.current = \"\" + counter++;\n }\n\n return idRef.current;\n}\n","import { PanelData } from \"../types\";\n\ntype SerializedPanelGroupState = { [panelIds: string]: number[] };\n\nfunction loadSerializedPanelGroupState(\n autoSaveId: string\n): SerializedPanelGroupState \| null {\n try {\n const serialized = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);\n if (serialized) {\n const parsed = JSON.parse(serialized);\n if (typeof parsed === \"object\" && parsed != null) {\n return parsed;\n }\n }\n } catch (error) {}\n\n return null;\n}\n\nexport function loadPanelLayout(\n autoSaveId: string,\n panelIds: string[]\n): number[] \| null {\n const state = loadSerializedPanelGroupState(autoSaveId);\n if (state) {\n return state[panelIds.join(\",\")] ?? null;\n }\n\n return null;\n}\n\nexport function savePanelGroupLayout(\n autoSaveId: string,\n panelIds: string[],\n sizes: number[]\n): void {\n const state = loadSerializedPanelGroupState(autoSaveId) \|\| {};\n state[panelIds.join(\",\")] = sizes;\n\n try {\n localStorage.setItem(\n `PanelGroup:sizes:${autoSaveId}`,\n JSON.stringify(state)\n );\n } catch (error) {\n console.error(error);\n }\n}\n","import { ReactNode, useContext, useEffect, useState } from \"react\";\n\nimport useUniqueId from \"./hooks/useUniqueId\";\nimport { PanelContext, PanelGroupContext } from \"./PanelContexts\";\nimport { ResizeHandler } from \"./types\";\n\nexport default function PanelResizeHandle({\n children = null,\n className = \"\",\n disabled = false,\n id: idProp = null,\n}: {\n children?: ReactNode;\n className?: string;\n disabled?: boolean;\n id?: string \| null;\n}) {\n const panelContext = useContext(PanelContext);\n const panelGroupContext = useContext(PanelGroupContext);\n if (panelContext === null \|\| panelGroupContext === null) {\n throw Error(\n `PanelResizeHandle components must be rendered within a PanelGroup container`\n );\n }\n\n const id = useUniqueId(idProp);\n\n const { activeHandleId } = panelContext;\n const {\n direction,\n groupId,\n registerResizeHandle,\n startDragging,\n stopDragging,\n } = panelGroupContext;\n\n const isDragging = activeHandleId === id;\n\n const [resizeHandler, setResizeHandler] = useState<ResizeHandler \| null>(\n null\n );\n\n useEffect(() => {\n if (disabled) {\n setResizeHandler(null);\n } else {\n const resizeHandler = registerResizeHandle(id);\n setResizeHandler(() => resizeHandler);\n }\n }, [disabled, groupId, id, registerResizeHandle]);\n\n useEffect(() => {\n if (disabled \|\| resizeHandler == null \|\| !isDragging) {\n return;\n }\n\n document.body.style.cursor =\n direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\";\n\n const onMouseMove = (event: MouseEvent) => {\n resizeHandler(event);\n };\n\n document.body.addEventListener(\"mouseleave\", stopDragging);\n document.body.addEventListener(\"mousemove\", onMouseMove);\n document.body.addEventListener(\"touchmove\", onMouseMove);\n document.body.addEventListener(\"mouseup\", stopDragging);\n\n return () => {\n document.body.style.cursor = \"\";\n\n document.body.removeEventListener(\"mouseleave\", stopDragging);\n document.body.removeEventListener(\"mousemove\", onMouseMove);\n document.body.removeEventListener(\"touchmove\", onMouseMove);\n document.body.removeEventListener(\"mouseup\", stopDragging);\n };\n }, [direction, disabled, isDragging, resizeHandler, stopDragging]);\n\n return (\n <div\n className={className}\n data-panel-group-id={groupId}\n data-panel-resize-handle-id={id}\n onMouseDown={() => startDragging(id)}\n onMouseUp={stopDragging}\n onTouchStart={() => startDragging(id)}\n onTouchEnd={stopDragging}\n style={{\n cursor: direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\",\n }}\n >\n {children}\n </div>\n );\n}\n"],"names":[],"version":3,"file":"react-resizable-panels.module.js.map","sourceRoot":"../../../"}

package/package.json CHANGED Viewed

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

package/src/PanelContexts.ts CHANGED Viewed

@@ -2,10 +2,17 @@ import { CSSProperties, createContext } from "react";
 import { PanelData, ResizeHandler } from "./types";
+export const PanelContext = createContext<{
+  activeHandleId: string | null;
+} | null>(null);
 export const PanelGroupContext = createContext<{
   direction: "horizontal" | "vertical";
   getPanelStyle: (id: string) => CSSProperties;
+  groupId: string;
   registerPanel: (id: string, panel: PanelData) => void;
-  registerResizeHandle: (idBefore: string, idAfter: string) => ResizeHandler;
+  registerResizeHandle: (id: string) => ResizeHandler;
+  startDragging: (id: string) => void;
+  stopDragging: () => void;
   unregisterPanel: (id: string) => void;
 } | null>(null);

package/src/PanelGroup.tsx CHANGED Viewed

@@ -8,9 +8,11 @@ import {
   useRef,
   useState,
 } from "react";
+import useUniqueId from "./hooks/useUniqueId";
-import { PanelGroupContext } from "./PanelContexts";
+import { PanelContext, PanelGroupContext } from "./PanelContexts";
 import { Direction, PanelData } from "./types";
+import { loadPanelLayout, savePanelGroupLayout } from "./utils/serialization";
 type Props = {
   autoSaveId?: string;
@@ -35,6 +37,9 @@ export default function PanelGroup({
   height,
   width,
 }: Props) {
+  const groupId = useUniqueId();
+  const [activeHandleId, setActiveHandleId] = useState<string | null>(null);
   const [panels, setPanels] = useState<Map<string, PanelData>>(new Map());
   // 0-1 values representing the relative size of each panel.
@@ -78,14 +83,8 @@ export default function PanelGroup({
     // default size should be restored from local storage if possible.
     let defaultSizes: number[] | undefined = undefined;
     if (autoSaveId) {
-      try {
-        const value = localStorage.getItem(
-          createLocalStorageKey(autoSaveId, panels)
-        );
-        if (value) {
-          defaultSizes = JSON.parse(value);
-        }
-      } catch (error) {}
+      const panelIds = panelsMapToSortedArray(panels).map((panel) => panel.id);
+      defaultSizes = loadPanelLayout(autoSaveId, panelIds);
     }
     if (defaultSizes != null) {
@@ -101,16 +100,14 @@ export default function PanelGroup({
   }, [autoSaveId, panels]);
   useEffect(() => {
+    // If this panel has been configured to persist sizing information, save sizes to local storage.
     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(
-        createLocalStorageKey(autoSaveId, panels),
-        JSON.stringify(sizes)
-      );
+      const panelIds = panelsMapToSortedArray(panels).map((panel) => panel.id);
+      savePanelGroupLayout(autoSaveId, panelIds, sizes);
     }
   }, [autoSaveId, panels, sizes]);
@@ -156,8 +153,8 @@ export default function PanelGroup({
   }, []);
   const registerResizeHandle = useCallback(
-    (idBefore: string, idAfter: string) => {
-      return (event: MouseEvent) => {
+    (id: string) => {
+      const resizeHandler = (event: MouseEvent) => {
         event.preventDefault();
         const {
@@ -168,6 +165,20 @@ export default function PanelGroup({
           width,
         } = committedValuesRef.current;
+        const handle = document.querySelector(
+          `[data-panel-resize-handle-id="${id}"]`
+        );
+        const handles = Array.from(
+          document.querySelectorAll(`[data-panel-group-id="${groupId}"]`)
+        );
+        const index = handles.indexOf(handle);
+        const panelsArray = panelsMapToSortedArray(panels);
+        const idBefore: string | null = panelsArray[index]?.id ?? null;
+        const idAfter: string | null = panelsArray[index + 1]?.id ?? null;
+        if (idBefore == null || idAfter == null) {
+          return;
+        }
         const isHorizontal = direction === "horizontal";
         const movement = isHorizontal ? event.movementX : event.movementY;
         const delta = isHorizontal ? movement / width : movement / height;
@@ -184,9 +195,9 @@ export default function PanelGroup({
         }
       };
-      // TODO [issues/5] Add to Map
+      return resizeHandler;
     },
-    []
+    [groupId]
   );
   const unregisterPanel = useCallback((id: string) => {
@@ -202,27 +213,40 @@ export default function PanelGroup({
     });
   }, []);
-  const context = useMemo(
+  const panelGroupContext = useMemo(
     () => ({
       direction,
       getPanelStyle,
+      groupId,
       registerPanel,
       registerResizeHandle,
+      startDragging: (id: string) => setActiveHandleId(id),
+      stopDragging: () => setActiveHandleId(null),
       unregisterPanel,
     }),
     [
       direction,
       getPanelStyle,
+      groupId,
       registerPanel,
       registerResizeHandle,
       unregisterPanel,
     ]
   );
+  const panelContext = useMemo(
+    () => ({
+      activeHandleId,
+    }),
+    [activeHandleId]
+  );
   return (
-    <PanelGroupContext.Provider value={context}>
-      <div className={className}>{children}</div>
-    </PanelGroupContext.Provider>
+    <PanelContext.Provider value={panelContext}>
+      <PanelGroupContext.Provider value={panelGroupContext}>
+        <div className={className}>{children}</div>
+      </PanelGroupContext.Provider>
+    </PanelContext.Provider>
   );
 }
@@ -291,16 +315,6 @@ function adjustByDelta(
   return nextSizes;
 }
-function createLocalStorageKey(
-  autoSaveId: string,
-  panels: Map<string, PanelData>
-): string {
-  const panelsArray = panelsMapToSortedArray(panels);
-  const panelIds = panelsArray.map((panel) => panel.id);
-  return `PanelGroup:sizes:${autoSaveId}${panelIds.join("|")}`;
-}
 function getOffset(
   panels: Map<string, PanelData>,
   id: string,

package/src/PanelResizeHandle.tsx CHANGED Viewed

@@ -1,42 +1,53 @@
 import { ReactNode, useContext, useEffect, useState } from "react";
-import { PanelGroupContext } from "./PanelContexts";
+import useUniqueId from "./hooks/useUniqueId";
+import { PanelContext, PanelGroupContext } from "./PanelContexts";
 import { ResizeHandler } from "./types";
 export default function PanelResizeHandle({
   children = null,
   className = "",
   disabled = false,
-  panelAfter,
-  panelBefore,
+  id: idProp = null,
 }: {
   children?: ReactNode;
   className?: string;
   disabled?: boolean;
-  panelAfter: string;
-  panelBefore: string;
+  id?: string | null;
 }) {
-  const context = useContext(PanelGroupContext);
-  if (context === null) {
+  const panelContext = useContext(PanelContext);
+  const panelGroupContext = useContext(PanelGroupContext);
+  if (panelContext === null || panelGroupContext === null) {
     throw Error(
       `PanelResizeHandle components must be rendered within a PanelGroup container`
     );
   }
-  const { direction, registerResizeHandle } = context;
+  const id = useUniqueId(idProp);
+  const { activeHandleId } = panelContext;
+  const {
+    direction,
+    groupId,
+    registerResizeHandle,
+    startDragging,
+    stopDragging,
+  } = panelGroupContext;
+  const isDragging = activeHandleId === id;
   const [resizeHandler, setResizeHandler] = useState<ResizeHandler | null>(
     null
   );
-  const [isDragging, setIsDragging] = useState(false);
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);
     } else {
-      setResizeHandler(() => registerResizeHandle(panelBefore, panelAfter));
+      const resizeHandler = registerResizeHandle(id);
+      setResizeHandler(() => resizeHandler);
     }
-  }, [disabled, panelAfter, panelBefore, registerResizeHandle]);
+  }, [disabled, groupId, id, registerResizeHandle]);
   useEffect(() => {
     if (disabled || resizeHandler == null || !isDragging) {
@@ -46,36 +57,34 @@ export default function PanelResizeHandle({
     document.body.style.cursor =
       direction === "horizontal" ? "ew-resize" : "ns-resize";
-    const onMouseLeave = (_: MouseEvent) => {
-      setIsDragging(false);
-    };
     const onMouseMove = (event: MouseEvent) => {
       resizeHandler(event);
     };
-    const onMouseUp = (_: MouseEvent) => {
-      setIsDragging(false);
-    };
-    document.body.addEventListener("mouseleave", onMouseLeave);
+    document.body.addEventListener("mouseleave", stopDragging);
     document.body.addEventListener("mousemove", onMouseMove);
-    document.body.addEventListener("mouseup", onMouseUp);
+    document.body.addEventListener("touchmove", onMouseMove);
+    document.body.addEventListener("mouseup", stopDragging);
     return () => {
       document.body.style.cursor = "";
-      document.body.removeEventListener("mouseleave", onMouseLeave);
+      document.body.removeEventListener("mouseleave", stopDragging);
       document.body.removeEventListener("mousemove", onMouseMove);
-      document.body.removeEventListener("mouseup", onMouseUp);
+      document.body.removeEventListener("touchmove", onMouseMove);
+      document.body.removeEventListener("mouseup", stopDragging);
     };
-  }, [direction, disabled, isDragging, resizeHandler]);
+  }, [direction, disabled, isDragging, resizeHandler, stopDragging]);
   return (
     <div
       className={className}
-      onMouseDown={() => setIsDragging(true)}
-      onMouseUp={() => setIsDragging(false)}
+      data-panel-group-id={groupId}
+      data-panel-resize-handle-id={id}
+      onMouseDown={() => startDragging(id)}
+      onMouseUp={stopDragging}
+      onTouchStart={() => startDragging(id)}
+      onTouchEnd={stopDragging}
       style={{
         cursor: direction === "horizontal" ? "ew-resize" : "ns-resize",
       }}

package/src/hooks/useUniqueId.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { useRef } from "react";
+let counter = 0;
+export default function useUniqueId(id: string | null = null): string {
+  const idRef = useRef<string | null>(id);
+  if (idRef.current === null) {
+    idRef.current = "" + counter++;
+  }
+  return idRef.current;
+}

package/src/index.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import Panel from "./Panel";
+import { PanelContext } from "./PanelContexts";
 import PanelGroup from "./PanelGroup";
 import PanelResizeHandle from "./PanelResizeHandle";
-export { Panel, PanelGroup, PanelResizeHandle };
+export { Panel, PanelContext, PanelGroup, PanelResizeHandle };

package/src/utils/serialization.ts ADDED Viewed

@@ -0,0 +1,49 @@
+import { PanelData } from "../types";
+type SerializedPanelGroupState = { [panelIds: string]: number[] };
+function loadSerializedPanelGroupState(
+  autoSaveId: string
+): SerializedPanelGroupState | null {
+  try {
+    const serialized = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+    if (serialized) {
+      const parsed = JSON.parse(serialized);
+      if (typeof parsed === "object" && parsed != null) {
+        return parsed;
+      }
+    }
+  } catch (error) {}
+  return null;
+}
+export function loadPanelLayout(
+  autoSaveId: string,
+  panelIds: string[]
+): number[] | null {
+  const state = loadSerializedPanelGroupState(autoSaveId);
+  if (state) {
+    return state[panelIds.join(",")] ?? null;
+  }
+  return null;
+}
+export function savePanelGroupLayout(
+  autoSaveId: string,
+  panelIds: string[],
+  sizes: number[]
+): void {
+  const state = loadSerializedPanelGroupState(autoSaveId) || {};
+  state[panelIds.join(",")] = sizes;
+  try {
+    localStorage.setItem(
+      `PanelGroup:sizes:${autoSaveId}`,
+      JSON.stringify(state)
+    );
+  } catch (error) {
+    console.error(error);
+  }
+}