react-resizable-panels 0.0.22 → 0.0.23

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.0.23
+* [#40](https://github.com/bvaughn/react-resizable-panels/issues/40): Add optional `maxSize` prop to `Panel`.
+* [#41](https://github.com/bvaughn/react-resizable-panels/issues/41): Add optional `onResize` prop to `Panel`. This prop can be used (along with `defaultSize`) to persistence layouts somewhere externally.
+* [#42](https://github.com/bvaughn/react-resizable-panels/issues/42): Don't cancel resize operations when exiting the window. Only cancel when a `"mouseup"` (or `"touchend"`) event is fired.
+
 ## 0.0.22
 * Replaced the `"ew-resize"` and `"ns-resize"` cursor style with `"col-resize"` and `"row-resize"`.
 

package/README.md

@@ -33,16 +33,18 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | `tagName`    | `?string = "div"`           | Optional HTML element tag name for root element
 
 ### `Panel`
-| prop          | type              | description
-| :------------ | :---------------- | :---
-| `children`    | `ReactNode`       | Arbitrary React element(s)
-| `className`   | `?string`         | Optional class name to attach to root element
-| `defaultSize` | `?number`         | Initial size of panel (numeric value between 1-100)
-| `id`          | `?string`         | Optional panel id (unique within group); falls back to `useId` when not provided
-| `minSize`     | `?number`         | Minimum allowable size of panel (numeric value between 1-100)
-| `order`       | `?number`         | Order of panel within group; required for groups with conditionally rendered panels
-| `style`       | `?CSSProperties`  | Optional CSS style to attach to root element
-| `tagName`     | `?string = "div"` | Optional HTML element tag name for root element
+| prop          | type                      | description
+| :------------ | :------------------------ | :---
+| `children`    | `ReactNode`               | Arbitrary React element(s)
+| `className`   | `?string`                 | Optional class name to attach to root element
+| `defaultSize` | `?number`                 | Initial size of panel (numeric value between 1-100)
+| `id`          | `?string`                 | Optional panel id (unique within group); falls back to `useId` when not provided
+| `maxSize`     | `?number`                 | Maximum allowable size of panel (numeric value between 1-100)
+| `minSize`     | `?number`                 | Minimum allowable size of panel (numeric value between 1-100)
+| `onResize`    | `?(size: number) => void` | Optional function to be called when panel is resized; `size` parameter is a numeric value between 1-100
+| `order`       | `?number`                 | Order of panel within group; required for groups with conditionally rendered panels
+| `style`       | `?CSSProperties`          | Optional CSS style to attach to root element
+| `tagName`     | `?string = "div"`         | Optional HTML element tag name for root element
 
 ### `PanelResizeHandle`
 | prop          | type              | description

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

@@ -1,16 +1,29 @@
-import { CSSProperties, ElementType, ReactNode } from "react";
+import { RefObject, CSSProperties, ElementType, ReactNode } from "react";
 type Direction = "horizontal" | "vertical";
-export function Panel({ children, className: classNameFromProps, defaultSize, id: idFromProps, minSize, order, style: styleFromProps, tagName: Type, }: {
+type PanelOnResize = (size: number) => void;
+type PanelData = {
+    defaultSize: number;
+    id: string;
+    maxSize: number;
+    minSize: number;
+    onResizeRef: RefObject<PanelOnResize | null>;
+    order: number | null;
+};
+type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
+type PanelProps = {
     children?: ReactNode;
     className?: string;
     defaultSize?: number | null;
     id?: string | null;
+    maxSize?: number;
     minSize?: number;
+    onResize?: PanelOnResize | null;
     order?: number | null;
     style?: CSSProperties;
     tagName?: ElementType;
-}): JSX.Element;
-export function PanelGroup({ autoSaveId, children, className: classNameFromProps, direction, id: idFromProps, style: styleFromProps, tagName: Type, }: {
+};
+export function Panel({ children, className: classNameFromProps, defaultSize, id: idFromProps, maxSize, minSize, onResize, order, style: styleFromProps, tagName: Type, }: PanelProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+type PanelGroupProps = {
     autoSaveId?: string;
     children?: ReactNode;
     className?: string;
@@ -18,14 +31,26 @@ export function PanelGroup({ autoSaveId, children, className: classNameFromProps
     id?: string | null;
     style?: CSSProperties;
     tagName?: ElementType;
-}): JSX.Element;
-export function PanelResizeHandle({ children, className: classNameFromProps, disabled, id: idFromProps, style: styleFromProps, tagName: Type, }: {
+};
+export function PanelGroup({ autoSaveId, children, className: classNameFromProps, direction, id: idFromProps, style: styleFromProps, tagName: Type, }: PanelGroupProps): import("react").FunctionComponentElement<import("react").ProviderProps<{
+    activeHandleId: string;
+    direction: "horizontal" | "vertical";
+    getPanelStyle: (id: string) => CSSProperties;
+    groupId: string;
+    registerPanel: (id: string, panel: PanelData) => void;
+    registerResizeHandle: (id: string) => import("types").ResizeHandler;
+    startDragging: (id: string, event: ResizeEvent) => void;
+    stopDragging: () => void;
+    unregisterPanel: (id: string) => void;
+}>>;
+type PanelResizeHandleProps = {
     children?: ReactNode;
     className?: string;
     disabled?: boolean;
     id?: string | null;
     style?: CSSProperties;
     tagName?: ElementType;
-}): JSX.Element;
+};
+export function PanelResizeHandle({ children, className: classNameFromProps, disabled, id: idFromProps, style: styleFromProps, tagName: Type, }: PanelResizeHandleProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 
 //# sourceMappingURL=react-resizable-panels.d.ts.map

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

@@ -1 +1 @@
-{"mappings":";ACAA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AEclD,sBAA8B,EAC5B,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,WAAkB,EAClB,EAAE,EAAE,WAAkB,EACtB,OAAY,EACZ,KAAY,EACZ,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,eA4DA;AMtDD,2BAAmC,EACjC,UAAU,EACV,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,SAAS,EACT,EAAE,EAAE,WAAkB,EACtB,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE;IACD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,eA2PA;AC/RD,kCAA0C,EACxC,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,QAAgB,EAChB,EAAE,EAAE,WAAkB,EACtB,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,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;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,eAuHA","sources":["packages/react-resizable-panels/src/src/hooks/useUniqueId.ts","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/utils/serialization.ts","packages/react-resizable-panels/src/src/constants.ts","packages/react-resizable-panels/src/src/utils/group.ts","packages/react-resizable-panels/src/src/utils/coordinates.ts","packages/react-resizable-panels/src/src/hooks/useWindowSplitterBehavior.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,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"}
+{"mappings":";ACEA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AAElD,qBAA4B,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;AAEnD,iBAAwB;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,UAAU,aAAa,GAAG,IAAI,CAAC,CAAC;IAC7C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,mBAA0B,aAAa,GAAG,UAAU,GAAG,UAAU,CAAC;AEDlE,kBAAyB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,sBAA8B,EAC5B,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,WAAkB,EAClB,EAAE,EAAE,WAAkB,EACtB,OAAa,EACb,OAAY,EACZ,QAAe,EACf,KAAY,EACZ,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,UAAU,0FAwEZ;AMvED,uBAA8B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,2BAAmC,EACjC,UAAU,EACV,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,SAAS,EACT,EAAE,EAAE,WAAkB,EACtB,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,eAAe;;;;;;;;;;IA0QjB;AChTD,8BAAqC;IACnC,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;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,kCAA0C,EACxC,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,QAAgB,EAChB,EAAE,EAAE,WAAkB,EACtB,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,sBAAsB,0FAoHxB","sources":["packages/react-resizable-panels/src/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.ts","packages/react-resizable-panels/src/src/utils/serialization.ts","packages/react-resizable-panels/src/src/constants.ts","packages/react-resizable-panels/src/src/utils/group.ts","packages/react-resizable-panels/src/src/utils/coordinates.ts","packages/react-resizable-panels/src/src/hooks/useWindowSplitterBehavior.ts","packages/react-resizable-panels/src/src/PanelGroup.ts","packages/react-resizable-panels/src/src/PanelResizeHandle.ts","packages/react-resizable-panels/src/src/index.ts","packages/react-resizable-panels/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,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"}

package/dist/react-resizable-panels.js

@@ -1,14 +1,12 @@
-var $b2QPe$reactjsxruntime = require("react/jsx-runtime");
 var $b2QPe$react = require("react");
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 
-$parcel$export(module.exports, "Panel", () => $6d390b7f2e6b107f$export$2e2bcd8739ae039);
-$parcel$export(module.exports, "PanelGroup", () => $d428eaeef644efb2$export$2e2bcd8739ae039);
-$parcel$export(module.exports, "PanelResizeHandle", () => $d578a49f00f1bdeb$export$2e2bcd8739ae039);
-
+$parcel$export(module.exports, "Panel", () => $4b51bd7b90b9da8b$export$2e2bcd8739ae039);
+$parcel$export(module.exports, "PanelGroup", () => $19bf0050f73d236b$export$2e2bcd8739ae039);
+$parcel$export(module.exports, "PanelResizeHandle", () => $01377e07790cf46f$export$2e2bcd8739ae039);
 
 
 let $6d548a0d130941e3$var$counter = 0;
@@ -28,24 +26,29 @@ const $3251d17c1c3bce6c$export$7d8c6d083caec74a = (0, $b2QPe$react.createContext
 $3251d17c1c3bce6c$export$7d8c6d083caec74a.displayName = "PanelGroupContext";
 
 
-function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null , className: classNameFromProps = "" , defaultSize: defaultSize = null , id: idFromProps = null , minSize: minSize = 10 , order: order = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
+function $4b51bd7b90b9da8b$export$2e2bcd8739ae039({ children: children = null , className: classNameFromProps = "" , defaultSize: defaultSize = null , id: idFromProps = null , maxSize: maxSize = 100 , minSize: minSize = 10 , onResize: onResize = null , order: order = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const context = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
     if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
-    const panelId = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)(idFromProps);
+    const onResizeRef = (0, $b2QPe$react.useRef)(onResize);
+    // Basic props validation
     if (minSize < 0 || minSize > 100) throw Error(`Panel minSize must be between 0 and 100, but was ${minSize}`);
-    if (defaultSize !== null) {
+    else if (maxSize < 0 || maxSize > 100) throw Error(`Panel maxSize must be between 0 and 100, but was ${maxSize}`);
+    else if (defaultSize !== null) {
         if (defaultSize < 0 || defaultSize > 100) throw Error(`Panel defaultSize must be between 0 and 100, but was ${defaultSize}`);
         else if (minSize > defaultSize) {
             console.error(`Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`);
             defaultSize = minSize;
         }
     }
+    const panelId = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)(idFromProps);
     const { getPanelStyle: getPanelStyle , registerPanel: registerPanel , unregisterPanel: unregisterPanel  } = context;
     (0, $b2QPe$react.useLayoutEffect)(()=>{
         const panel = {
             defaultSize: defaultSize,
             id: panelId,
+            maxSize: maxSize,
             minSize: minSize,
+            onResizeRef: onResizeRef,
             order: order
         };
         registerPanel(panelId, panel);
@@ -55,28 +58,28 @@ function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null ,
     }, [
         defaultSize,
         panelId,
+        maxSize,
         minSize,
         order,
         registerPanel,
         unregisterPanel
     ]);
     const style = getPanelStyle(panelId);
-    return /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)(Type, {
+    return (0, $b2QPe$react.createElement)(Type, {
+        children: children,
         className: classNameFromProps,
         "data-panel-id": panelId,
         id: `data-panel-id-${panelId}`,
         style: {
             ...style,
             ...styleFromProps
-        },
-        children: children
+        }
     });
 }
 // Workaround for Parcel scope hoisting (which renames objects/functions).
 // Casting to :any is required to avoid corrupting the generated TypeScript types.
 // See github.com/parcel-bundler/parcel/issues/8724
-$6d390b7f2e6b107f$export$2e2bcd8739ae039.displayName = "Panel";
-
+$4b51bd7b90b9da8b$export$2e2bcd8739ae039.displayName = "Panel";
 
 
 
@@ -136,30 +139,40 @@ function $d520236daad9c5d5$export$f50bae335f53943c(panels, idBefore, idAfter, de
     //
     // A positive delta means the panel immediately before the resizer should "expand".
     // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.
-    let pivotId = delta < 0 ? idBefore : idAfter;
-    let index = panelsArray.findIndex((panel)=>panel.id === pivotId);
-    while(true){
+    // Max-bounds check the panel being expanded first.
+    {
+        const pivotId = delta < 0 ? idAfter : idBefore;
+        const index = panelsArray.findIndex((panel)=>panel.id === pivotId);
         const panel = panelsArray[index];
         const prevSize = prevSizes[index];
-        const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);
-        if (prevSize !== nextSize) {
-            deltaApplied += prevSize - nextSize;
-            nextSizes[index] = nextSize;
+        const nextSize = $d520236daad9c5d5$var$safeResizePanel(panel, Math.abs(delta), prevSize);
+        if (prevSize === nextSize) return prevSizes;
+        else delta = delta < 0 ? prevSize - nextSize : nextSize - prevSize;
+    }
+    let pivotId1 = delta < 0 ? idBefore : idAfter;
+    let index1 = panelsArray.findIndex((panel)=>panel.id === pivotId1);
+    while(true){
+        const panel1 = panelsArray[index1];
+        const prevSize1 = prevSizes[index1];
+        const nextSize1 = $d520236daad9c5d5$var$safeResizePanel(panel1, 0 - Math.abs(delta), prevSize1);
+        if (prevSize1 !== nextSize1) {
+            deltaApplied += prevSize1 - nextSize1;
+            nextSizes[index1] = nextSize1;
             if (deltaApplied.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879)) >= delta.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879))) break;
         }
         if (delta < 0) {
-            if (--index < 0) break;
+            if (--index1 < 0) break;
         } else {
-            if (++index >= panelsArray.length) break;
+            if (++index1 >= panelsArray.length) break;
         }
     }
     // If we were unable to resize any of the panels panels, return the previous state.
     // This will essentially bailout and ignore the "mousemove" event.
     if (deltaApplied === 0) return prevSizes;
     // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
-    pivotId = delta < 0 ? idAfter : idBefore;
-    index = panelsArray.findIndex((panel)=>panel.id === pivotId);
-    nextSizes[index] = prevSizes[index] + deltaApplied;
+    pivotId1 = delta < 0 ? idAfter : idBefore;
+    index1 = panelsArray.findIndex((panel)=>panel.id === pivotId1);
+    nextSizes[index1] = prevSizes[index1] + deltaApplied;
     return nextSizes;
 }
 function $d520236daad9c5d5$export$6f43503e166de6fb(panels, id, sizes) {
@@ -210,6 +223,11 @@ function $d520236daad9c5d5$export$68d3a33c21dfbe27(groupId, handleId, panelsArra
 function $d520236daad9c5d5$export$a861c0ad45885494(panels) {
     return Array.from(panels.values()).sort((a, b)=>a.order - b.order);
 }
+function $d520236daad9c5d5$var$safeResizePanel(panel, delta, prevSize) {
+    const nextSizeUnsafe = prevSize + delta;
+    const nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSizeUnsafe));
+    return nextSize;
+}
 
 
 function $f5af57c8e042a4ad$export$ec391ce65b083ed4(event, handleId, direction, initialOffset = 0) {
@@ -243,11 +261,9 @@ function $f5af57c8e042a4ad$export$354b17c0684607ed(event, groupId, handleId, dir
             case "ArrowUp":
                 return isHorizontal ? 0 : -delta;
             case "End":
-                if (isHorizontal) return size;
-                else return size;
+                return size;
             case "Home":
-                if (isHorizontal) return -size;
-                else return -size;
+                return -size;
         }
     } else return $f5af57c8e042a4ad$export$ec391ce65b083ed4(event, handleId, direction, initialOffset);
 }
@@ -277,11 +293,22 @@ function $63be9a96d8675f03$export$d9fcbe062527d159({ committedValuesRef: committ
             const panelsArray = (0, $d520236daad9c5d5$export$a861c0ad45885494)(panels);
             const [idBefore, idAfter] = (0, $d520236daad9c5d5$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
             if (idBefore == null || idAfter == null) return ()=>{};
-            const ariaValueMax = panelsArray.reduce((difference, panel)=>{
-                if (panel.id !== idBefore) return difference - panel.minSize;
-                return difference;
-            }, 100);
-            const ariaValueMin = panelsArray.find((panel)=>panel.id == idBefore)?.minSize ?? 0;
+            let minSize = 0;
+            let maxSize = 100;
+            let totalMinSize = 0;
+            let totalMaxSize = 0;
+            // A panel's effective min/max sizes also need to account for other panel's sizes.
+            panelsArray.forEach((panelData)=>{
+                if (panelData.id === idBefore) {
+                    maxSize = panelData.maxSize;
+                    minSize = panelData.minSize;
+                } else {
+                    totalMinSize += panelData.minSize;
+                    totalMaxSize += panelData.maxSize;
+                }
+            });
+            const ariaValueMax = Math.min(maxSize, 100 - totalMinSize);
+            const ariaValueMin = Math.max(minSize, (panelsArray.length - 1) * 100 - totalMaxSize);
             const flexGrow = (0, $d520236daad9c5d5$export$6f43503e166de6fb)(panels, idBefore, sizes);
             handle.setAttribute("aria-valuemax", "" + Math.round(ariaValueMax));
             handle.setAttribute("aria-valuemin", "" + Math.round(ariaValueMin));
@@ -365,7 +392,7 @@ function $63be9a96d8675f03$export$33b0bea6ac3ffb03({ disabled: disabled , handle
 
 
 
-function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
+function $19bf0050f73d236b$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const groupId = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)(idFromProps);
     const [activeHandleId, setActiveHandleId] = (0, $b2QPe$react.useState)(null);
     const [panels, setPanels] = (0, $b2QPe$react.useState)(new Map());
@@ -395,7 +422,8 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
     // This assumes that panels register during initial mount (no conditional rendering)!
     (0, $b2QPe$react.useLayoutEffect)(()=>{
         const sizes = committedValuesRef.current.sizes;
-        if (sizes.length === panels.size) return;
+        if (sizes.length === panels.size) // Only compute (or restore) default sizes once per panel configuration.
+        return;
         // If this panel has been configured to persist sizing information,
         // default size should be restored from local storage if possible.
         let defaultSizes = undefined;
@@ -409,6 +437,10 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             let panelsWithNullDefaultSize = 0;
             let totalDefaultSize = 0;
             let totalMinSize = 0;
+            // TODO
+            // Implicit default size calculations below do not account for inferred min/max size values.
+            // e.g. if Panel A has a maxSize of 40 then Panels A and B can't both have an implicit default size of 50.
+            // For now, these logic edge cases are left to the user to handle via props.
             panelsArray1.forEach((panel)=>{
                 totalMinSize += panel.minSize;
                 if (panel.defaultSize === null) panelsWithNullDefaultSize++;
@@ -474,7 +506,17 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             const size = isHorizontal ? rect.width : rect.height;
             const delta = movement / size * 100;
             const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes);
-            if (prevSizes !== nextSizes) setSizes(nextSizes);
+            if (prevSizes !== nextSizes) {
+                // If resize change handlers have been declared, this is the time to call them.
+                nextSizes.forEach((nextSize, index)=>{
+                    const prevSize = prevSizes[index];
+                    if (prevSize !== nextSize) {
+                        const onResize = panelsArray[index].onResizeRef.current;
+                        if (onResize) onResize(nextSize);
+                    }
+                });
+                setSizes(nextSizes);
+            }
         };
         return resizeHandler;
     }, [
@@ -519,32 +561,31 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         overflow: "hidden",
         width: "100%"
     };
-    return /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a).Provider, {
-        value: context,
-        children: /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)(Type, {
+    return (0, $b2QPe$react.createElement)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a).Provider, {
+        children: (0, $b2QPe$react.createElement)(Type, {
+            children: children,
             className: classNameFromProps,
             "data-panel-group-direction": direction,
             "data-panel-group-id": groupId,
             style: {
                 ...style,
                 ...styleFromProps
-            },
-            children: children
-        })
+            }
+        }),
+        value: context
     });
 }
 // Workaround for Parcel scope hoisting (which renames objects/functions).
 // Casting to :any is required to avoid corrupting the generated TypeScript types.
 // See github.com/parcel-bundler/parcel/issues/8724
-$d428eaeef644efb2$export$2e2bcd8739ae039.displayName = "PanelGroup";
-
+$19bf0050f73d236b$export$2e2bcd8739ae039.displayName = "PanelGroup";
 
 
 
 
 
 
-function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null , className: classNameFromProps = "" , disabled: disabled = false , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
+function $01377e07790cf46f$export$2e2bcd8739ae039({ children: children = null , className: classNameFromProps = "" , disabled: disabled = false , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const divElementRef = (0, $b2QPe$react.useRef)(null);
     const panelGroupContext = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
     if (panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
@@ -580,17 +621,17 @@ function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null ,
             resizeHandler(event);
         };
         document.body.addEventListener("contextmenu", stopDraggingAndBlur);
-        document.body.addEventListener("mouseleave", stopDraggingAndBlur);
         document.body.addEventListener("mousemove", onMove);
         document.body.addEventListener("touchmove", onMove);
-        document.body.addEventListener("mouseup", stopDraggingAndBlur);
+        window.addEventListener("mouseup", stopDraggingAndBlur);
+        window.addEventListener("touchend", stopDraggingAndBlur);
         return ()=>{
             document.body.style.cursor = "";
             document.body.removeEventListener("contextmenu", stopDraggingAndBlur);
-            document.body.removeEventListener("mouseleave", stopDraggingAndBlur);
             document.body.removeEventListener("mousemove", onMove);
             document.body.removeEventListener("touchmove", onMove);
-            document.body.removeEventListener("mouseup", stopDraggingAndBlur);
+            window.removeEventListener("mouseup", stopDraggingAndBlur);
+            window.removeEventListener("touchend", stopDraggingAndBlur);
         };
     }, [
         direction,
@@ -609,7 +650,8 @@ function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null ,
         touchAction: "none",
         userSelect: "none"
     };
-    return /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)(Type, {
+    return (0, $b2QPe$react.createElement)(Type, {
+        children: children,
         className: classNameFromProps,
         "data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
         "data-panel-group-direction": direction,
@@ -629,14 +671,13 @@ function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null ,
             ...style,
             ...styleFromProps
         },
-        tabIndex: 0,
-        children: children
+        tabIndex: 0
     });
 }
 // Workaround for Parcel scope hoisting (which renames objects/functions).
 // Casting to :any is required to avoid corrupting the generated TypeScript types.
 // See github.com/parcel-bundler/parcel/issues/8724
-$d578a49f00f1bdeb$export$2e2bcd8739ae039.displayName = "PanelResizeHandle";
+$01377e07790cf46f$export$2e2bcd8739ae039.displayName = "PanelResizeHandle";