react-resizable-panels 0.0.3 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 0.0.4
+* [#8](https://github.com/bvaughn/react-resizable-panels/issues/8): Added optional `order` prop to `Panel` to improve conditional rendering.
+
 ## 0.0.3
 * [#3](https://github.com/bvaughn/react-resizable-panels/issues/3): `Panel`s can be conditionally rendered within a group. `PanelGroup` will persist separate layouts for each combination of visible panels.
 

package/README.md

@@ -39,6 +39,7 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | `defaultSize` | `?number`   | Initial size of panel (relative to other panels within the group)
 | `id`          | `string`    | Panel id (must be unique within the current group)
 | `minSize`     | `?number`   | Minum allowable size of panel (0.0 - 1.0)
+| `order`       | `?number`   | Order of panel within group; required for groups with conditionally rendered panels
 
 ### `PanelResizeHandle`
 | prop          | type         | description

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

@@ -1,11 +1,12 @@
 import { ReactNode } from "react";
 type Direction = "horizontal" | "vertical";
-export function Panel({ children, className, defaultSize, id, minSize, }: {
+export function Panel({ children, className, defaultSize, id, minSize, order, }: {
     children?: ReactNode;
     className?: string;
     defaultSize?: number;
     id: string;
     minSize?: number;
+    order?: number | null;
 }): JSX.Element;
 type Props = {
     autoSaveId?: string;

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

@@ -1 +1 @@
-{"mappings":";AAAA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AEOlD,sBAA8B,EAC5B,QAAe,EACf,SAAc,EACd,WAAiB,EACjB,EAAE,EACF,OAAa,GACd,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;CAClB,eAuCA;AC5CD,aAAa;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;IACvB,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":"../../../"}
+{"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,EAAE,CAAC;IACvB,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":"../../../"}

package/dist/react-resizable-panels.js

@@ -14,7 +14,7 @@ $parcel$export(module.exports, "PanelResizeHandle", () => $d578a49f00f1bdeb$expo
 const $3251d17c1c3bce6c$export$7d8c6d083caec74a = (0, $b2QPe$react.createContext)(null);
 
 
-function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null , className: className = "" , defaultSize: defaultSize = 0.1 , id: id , minSize: minSize = 0.1  }) {
+function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null , className: className = "" , defaultSize: defaultSize = 0.1 , id: id , minSize: minSize = 0.1 , order: order = null  }) {
     const context = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
     if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
     if (minSize > defaultSize) {
@@ -26,7 +26,8 @@ function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null ,
         const panel = {
             defaultSize: defaultSize,
             id: id,
-            minSize: minSize
+            minSize: minSize,
+            order: order
         };
         registerPanel(id, panel);
         return ()=>{
@@ -36,6 +37,7 @@ function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null ,
         defaultSize,
         id,
         minSize,
+        order,
         registerPanel,
         unregisterPanel
     ]);
@@ -46,7 +48,7 @@ function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null ,
         children: children
     }, void 0, false, {
         fileName: "packages/react-resizable-panels/src/Panel.tsx",
-        lineNumber: 55,
+        lineNumber: 58,
         columnNumber: 5
     }, this);
 }
@@ -92,7 +94,7 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         } catch (error) {}
         if (defaultSizes != null) setSizes(defaultSizes);
         else {
-            const panelsArray = Array.from(panels.values());
+            const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
             const totalWeight = panelsArray.reduce((weight, panel)=>{
                 return weight + panel.defaultSize;
             }, 0);
@@ -196,7 +198,7 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
 }
 function $d428eaeef644efb2$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes) {
     if (delta === 0) return prevSizes;
-    const panelsArray = Array.from(panels.values());
+    const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
     const nextSizes = prevSizes.concat();
     let deltaApplied = 0;
     // A resizing panel affects the panels before or after it.
@@ -233,11 +235,12 @@ function $d428eaeef644efb2$var$adjustByDelta(panels, idBefore, idAfter, delta, p
     return nextSizes;
 }
 function $d428eaeef644efb2$var$createLocalStorageKey(autoSaveId, panels) {
-    const panelIds = Array.from(panels.keys()).sort();
+    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 = Array.from(panels.values());
+    const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
     let index = panelsArray.findIndex((panel)=>panel.id === id);
     if (index < 0) return 0;
     let scaledOffset = 0;
@@ -250,12 +253,15 @@ function $d428eaeef644efb2$var$getOffset(panels, id, direction, sizes, height, w
 function $d428eaeef644efb2$var$getSize(panels, id, direction, sizes, height, width) {
     const totalSize = direction === "horizontal" ? width : height;
     if (panels.size === 1) return totalSize;
-    const panelsArray = Array.from(panels.values());
+    const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
     const index = panelsArray.findIndex((panel)=>panel.id === id);
     const size = sizes[index];
     if (size == null) return 0;
     return Math.round(size * totalSize);
 }
+function $d428eaeef644efb2$var$panelsMapToSortedArray(panels) {
+    return Array.from(panels.values()).sort((a, b)=>a.order - b.order);
+}
 
 
 

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

@@ -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}: {\n  children?: ReactNode;\n  className?: string;\n  defaultSize?: number;\n  id: string;\n  minSize?: number;\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    };\n\n    registerPanel(id, panel);\n\n    return () => {\n      unregisterPanel(id);\n    };\n  }, [defaultSize, id, minSize, 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: PanelData[] = Array.from(panels.values());\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: PanelData[] = Array.from(panels.values());\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 panelIds = Array.from(panels.keys()).sort();\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: PanelData[] = Array.from(panels.values());\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: PanelData[] = Array.from(panels.values());\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","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":"../../../"}
+{"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":"../../../"}

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

@@ -7,7 +7,7 @@ import {useContext as $fpI56$useContext, useLayoutEffect as $fpI56$useLayoutEffe
 const $f922724f4bad4884$export$7d8c6d083caec74a = (0, $fpI56$createContext)(null);
 
 
-function $ad28bce87b00c2be$export$2e2bcd8739ae039({ children: children = null , className: className = "" , defaultSize: defaultSize = 0.1 , id: id , minSize: minSize = 0.1  }) {
+function $ad28bce87b00c2be$export$2e2bcd8739ae039({ children: children = null , className: className = "" , defaultSize: defaultSize = 0.1 , id: id , minSize: minSize = 0.1 , order: order = null  }) {
     const context = (0, $fpI56$useContext)((0, $f922724f4bad4884$export$7d8c6d083caec74a));
     if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
     if (minSize > defaultSize) {
@@ -19,7 +19,8 @@ function $ad28bce87b00c2be$export$2e2bcd8739ae039({ children: children = null ,
         const panel = {
             defaultSize: defaultSize,
             id: id,
-            minSize: minSize
+            minSize: minSize,
+            order: order
         };
         registerPanel(id, panel);
         return ()=>{
@@ -29,6 +30,7 @@ function $ad28bce87b00c2be$export$2e2bcd8739ae039({ children: children = null ,
         defaultSize,
         id,
         minSize,
+        order,
         registerPanel,
         unregisterPanel
     ]);
@@ -39,7 +41,7 @@ function $ad28bce87b00c2be$export$2e2bcd8739ae039({ children: children = null ,
         children: children
     }, void 0, false, {
         fileName: "packages/react-resizable-panels/src/Panel.tsx",
-        lineNumber: 55,
+        lineNumber: 58,
         columnNumber: 5
     }, this);
 }
@@ -85,7 +87,7 @@ function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         } catch (error) {}
         if (defaultSizes != null) setSizes(defaultSizes);
         else {
-            const panelsArray = Array.from(panels.values());
+            const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
             const totalWeight = panelsArray.reduce((weight, panel)=>{
                 return weight + panel.defaultSize;
             }, 0);
@@ -189,7 +191,7 @@ function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
 }
 function $c44ee3356398c8a1$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes) {
     if (delta === 0) return prevSizes;
-    const panelsArray = Array.from(panels.values());
+    const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
     const nextSizes = prevSizes.concat();
     let deltaApplied = 0;
     // A resizing panel affects the panels before or after it.
@@ -226,11 +228,12 @@ function $c44ee3356398c8a1$var$adjustByDelta(panels, idBefore, idAfter, delta, p
     return nextSizes;
 }
 function $c44ee3356398c8a1$var$createLocalStorageKey(autoSaveId, panels) {
-    const panelIds = Array.from(panels.keys()).sort();
+    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 = Array.from(panels.values());
+    const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
     let index = panelsArray.findIndex((panel)=>panel.id === id);
     if (index < 0) return 0;
     let scaledOffset = 0;
@@ -243,12 +246,15 @@ function $c44ee3356398c8a1$var$getOffset(panels, id, direction, sizes, height, w
 function $c44ee3356398c8a1$var$getSize(panels, id, direction, sizes, height, width) {
     const totalSize = direction === "horizontal" ? width : height;
     if (panels.size === 1) return totalSize;
-    const panelsArray = Array.from(panels.values());
+    const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
     const index = panelsArray.findIndex((panel)=>panel.id === id);
     const size = sizes[index];
     if (size == null) return 0;
     return Math.round(size * totalSize);
 }
+function $c44ee3356398c8a1$var$panelsMapToSortedArray(panels) {
+    return Array.from(panels.values()).sort((a, b)=>a.order - b.order);
+}
 
 
 

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

@@ -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}: {\n  children?: ReactNode;\n  className?: string;\n  defaultSize?: number;\n  id: string;\n  minSize?: number;\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    };\n\n    registerPanel(id, panel);\n\n    return () => {\n      unregisterPanel(id);\n    };\n  }, [defaultSize, id, minSize, 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: PanelData[] = Array.from(panels.values());\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: PanelData[] = Array.from(panels.values());\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 panelIds = Array.from(panels.keys()).sort();\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: PanelData[] = Array.from(panels.values());\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: PanelData[] = Array.from(panels.values());\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","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":"../../../"}
+{"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":"../../../"}

package/package.json

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

package/src/Panel.tsx

@@ -11,12 +11,14 @@ export default function Panel({
   defaultSize = 0.1,
   id,
   minSize = 0.1,
+  order = null,
 }: {
   children?: ReactNode;
   className?: string;
   defaultSize?: number;
   id: string;
   minSize?: number;
+  order?: number | null;
 }) {
   const context = useContext(PanelGroupContext);
   if (context === null) {
@@ -40,6 +42,7 @@ export default function Panel({
       defaultSize,
       id,
       minSize,
+      order,
     };
 
     registerPanel(id, panel);
@@ -47,7 +50,7 @@ export default function Panel({
     return () => {
       unregisterPanel(id);
     };
-  }, [defaultSize, id, minSize, registerPanel, unregisterPanel]);
+  }, [defaultSize, id, minSize, order, registerPanel, unregisterPanel]);
 
   const style = getPanelStyle(id);
 

package/src/PanelGroup.tsx

@@ -91,7 +91,7 @@ export default function PanelGroup({
     if (defaultSizes != null) {
       setSizes(defaultSizes);
     } else {
-      const panelsArray: PanelData[] = Array.from(panels.values());
+      const panelsArray = panelsMapToSortedArray(panels);
       const totalWeight = panelsArray.reduce((weight, panel) => {
         return weight + panel.defaultSize;
       }, 0);
@@ -237,7 +237,7 @@ function adjustByDelta(
     return prevSizes;
   }
 
-  const panelsArray: PanelData[] = Array.from(panels.values());
+  const panelsArray = panelsMapToSortedArray(panels);
 
   const nextSizes = prevSizes.concat();
 
@@ -295,7 +295,8 @@ function createLocalStorageKey(
   autoSaveId: string,
   panels: Map<string, PanelData>
 ): string {
-  const panelIds = Array.from(panels.keys()).sort();
+  const panelsArray = panelsMapToSortedArray(panels);
+  const panelIds = panelsArray.map((panel) => panel.id);
 
   return `PanelGroup:sizes:${autoSaveId}${panelIds.join("|")}`;
 }
@@ -308,7 +309,7 @@ function getOffset(
   height: number,
   width: number
 ): number {
-  const panelsArray: PanelData[] = Array.from(panels.values());
+  const panelsArray = panelsMapToSortedArray(panels);
 
   let index = panelsArray.findIndex((panel) => panel.id === id);
   if (index < 0) {
@@ -339,7 +340,7 @@ function getSize(
     return totalSize;
   }
 
-  const panelsArray: PanelData[] = Array.from(panels.values());
+  const panelsArray = panelsMapToSortedArray(panels);
 
   const index = panelsArray.findIndex((panel) => panel.id === id);
   const size = sizes[index];
@@ -349,3 +350,7 @@ function getSize(
 
   return Math.round(size * totalSize);
 }
+
+function panelsMapToSortedArray(panels: Map<string, PanelData>): PanelData[] {
+  return Array.from(panels.values()).sort((a, b) => a.order - b.order);
+}

package/src/types.ts

@@ -4,6 +4,7 @@ export type PanelData = {
   defaultSize: number;
   id: string;
   minSize: number;
+  order: number | null;
 };
 
 export type ResizeHandler = (event: MouseEvent) => void;