react-resizable-panels 0.0.8 → 0.0.9

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 0.0.9
+* [#13](https://github.com/bvaughn/react-resizable-panels/issues/13): `PanelResizeHandle` should declare "separator" role and implement the recommended ["Window Splitter" pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/)
+
 ## 0.0.8
 * [#7](https://github.com/bvaughn/react-resizable-panels/issues/7): Support "touch" events for mobile compatibility.
 
@@ -8,7 +11,7 @@
 ## 0.0.6
 * [#5](https://github.com/bvaughn/react-resizable-panels/issues/5): Removed `panelBefore` and `panelAfter` props from `PanelResizeHandle`. `PanelGroup` now infers this based on position within the group.
 ## 0.0.5
-* TypeScript props type fix
+* TypeScript props type fix for `PanelGroup`'s `children` prop.
 
 ## 0.0.4
 * [#8](https://github.com/bvaughn/react-resizable-panels/issues/8): Added optional `order` prop to `Panel` to improve conditional rendering.

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

@@ -1 +1 @@
-{"mappings":";AAAA,iBAAwB,YAAY,GAAG,UAAU,CAAC;ACIlD,OAAO,MAAM;oBACK,MAAM,GAAG,IAAI;EAChB,CAAC;ACChB,sBAA8B,EAC5B,QAAe,EACf,SAAc,EACd,WAAiB,EACjB,EAAE,EACF,OAAa,EACb,KAAY,GACb,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,eAwCA;AI5CD,aAAa;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAQF,2BAAmC,EACjC,UAAU,EACV,QAAe,EACf,SAAc,EACd,SAAS,EACT,MAAM,EACN,KAAK,GACN,EAAE,KAAK,eA6OP;AC9QD,kCAA0C,EACxC,QAAe,EACf,SAAc,EACd,QAAgB,EAChB,EAAE,EAAE,MAAa,GAClB,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB,eA+EA","sources":["packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.tsx","packages/react-resizable-panels/src/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/src/utils/serialization.ts","packages/react-resizable-panels/src/src/utils/touch.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,"import Panel from \"./Panel\";\nimport { PanelContext } from \"./PanelContexts\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelContext, PanelGroup, PanelResizeHandle };\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}
+{"mappings":";AAAA,iBAAwB,YAAY,GAAG,UAAU,CAAC;ACIlD,OAAO,MAAM;oBACK,MAAM,GAAG,IAAI;EAChB,CAAC;ACChB,sBAA8B,EAC5B,QAAe,EACf,SAAc,EACd,WAAiB,EACjB,EAAE,EACF,OAAa,EACb,KAAY,GACb,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,eA6CA;AO/BD,aAAa;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAMF,2BAAmC,EACjC,UAAU,EACV,QAAe,EACf,SAAc,EACd,SAAS,EACT,MAAM,EACN,KAAK,GACN,EAAE,KAAK,eA8OP;AC9RD,kCAA0C,EACxC,QAAe,EACf,SAAc,EACd,QAAgB,EAChB,EAAE,EAAE,MAAa,GAClB,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB,eAyFA","sources":["packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.tsx","packages/react-resizable-panels/src/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/src/utils/serialization.ts","packages/react-resizable-panels/src/src/utils/coordinates.ts","packages/react-resizable-panels/src/src/constants.ts","packages/react-resizable-panels/src/src/utils/group.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 { PanelContext } from \"./PanelContexts\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelContext, PanelGroup, PanelResizeHandle };\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map","sourceRoot":"../../../"}

package/dist/react-resizable-panels.js

@@ -46,6 +46,8 @@ function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null ,
     const style = getPanelStyle(id);
     return /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)("div", {
         className: className,
+        "data-panel-id": id,
+        id: `data-panel-id-${id}`,
         style: style,
         children: children
     }, void 0, false, {
@@ -95,10 +97,56 @@ function $e045b0dd313f33c7$export$af183b313c61be4f(autoSaveId, panelIds, sizes)
 }
 
 
-function $37410a9246dfda64$export$70637efcd850e4ef(event, prevCoordinates) {
+const $f5af57c8e042a4ad$var$element = document.createElement("div");
+$f5af57c8e042a4ad$var$element.getBoundingClientRect();
+function $f5af57c8e042a4ad$export$70637efcd850e4ef(event, prevCoordinates, dimensions, direction) {
     const { screenX: prevScreenX , screenY: prevScreenY  } = prevCoordinates;
+    const { height: height , width: width  } = dimensions;
     const getMovementBetween = (current, prev)=>prev === 0 ? 0 : current - prev;
-    if ($37410a9246dfda64$export$ce897e7f0aa63661(event)) {
+    if ($f5af57c8e042a4ad$export$e7bf60a870f429b0(event)) {
+        let movementX = 0;
+        let movementY = 0;
+        const size = direction === "horizontal" ? width : height;
+        const denominator = event.shiftKey ? 10 : 100;
+        const delta = size / denominator;
+        switch(event.key){
+            case "ArrowDown":
+                movementY = delta;
+                break;
+            case "ArrowLeft":
+                movementX = -delta;
+                break;
+            case "ArrowRight":
+                movementX = delta;
+                break;
+            case "ArrowUp":
+                movementY = -delta;
+                break;
+            case "End":
+                if (direction === "horizontal") movementX = size;
+                else movementY = size;
+                break;
+            case "Home":
+                if (direction === "horizontal") movementX = -size;
+                else movementY = -size;
+                break;
+        }
+        // Estimate screen X/Y to be the center of the resize handle.
+        // Otherwise the first mouse/touch event after a keyboard event will appear to "jump"
+        let screenX = 0;
+        let screenY = 0;
+        if (document.activeElement) {
+            const rect = document.activeElement.getBoundingClientRect();
+            screenX = rect.left + rect.width / 2;
+            screenY = rect.top + rect.height / 2;
+        }
+        return {
+            movementX: movementX,
+            movementY: movementY,
+            screenX: screenX,
+            screenY: screenY
+        };
+    } else if ($f5af57c8e042a4ad$export$ce897e7f0aa63661(event)) {
         const firstTouch = event.touches[0];
         return {
             movementX: getMovementBetween(firstTouch.screenX, prevScreenX),
@@ -106,20 +154,223 @@ function $37410a9246dfda64$export$70637efcd850e4ef(event, prevCoordinates) {
             screenX: firstTouch.screenX,
             screenY: firstTouch.screenY
         };
-    }
-    return {
+    } else if ($f5af57c8e042a4ad$export$5107d838cdd17dee(event)) return {
         movementX: getMovementBetween(event.screenX, prevScreenX),
         movementY: getMovementBetween(event.screenY, prevScreenY),
         screenX: event.screenX,
         screenY: event.screenY
     };
+    else throw Error(`Unsupported event type: "${event.type}"`);
 }
-function $37410a9246dfda64$export$ce897e7f0aa63661(event) {
+function $f5af57c8e042a4ad$export$e7bf60a870f429b0(event) {
+    return event.type === "keydown";
+}
+function $f5af57c8e042a4ad$export$5107d838cdd17dee(event) {
+    return event.type === "mousemove";
+}
+function $f5af57c8e042a4ad$export$ce897e7f0aa63661(event) {
     return event.type === "touchmove";
 }
 
 
-const $d428eaeef644efb2$var$PRECISION = 5;
+const $3237bc4a138172cd$export$d6d3992f3becc879 = 5;
+
+
+function $d520236daad9c5d5$export$f50bae335f53943c(panels, idBefore, idAfter, delta, prevSizes) {
+    if (delta === 0) return prevSizes;
+    const panelsArray = $d520236daad9c5d5$export$a861c0ad45885494(panels);
+    const nextSizes = prevSizes.concat();
+    let deltaApplied = 0;
+    // A resizing panel affects the panels before or after it.
+    //
+    // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.
+    // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
+    //
+    // 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){
+        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;
+            if (deltaApplied.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879)) >= delta.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879))) break;
+        }
+        if (delta < 0) {
+            if (--index < 0) break;
+        } else {
+            if (++index >= 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;
+    return nextSizes;
+}
+function $d520236daad9c5d5$export$622cea445a1c5b7d(panels, id, direction, sizes, height, width) {
+    const panelsArray = $d520236daad9c5d5$export$a861c0ad45885494(panels);
+    let index = panelsArray.findIndex((panel)=>panel.id === id);
+    if (index < 0) return 0;
+    let scaledOffset = 0;
+    for(index = index - 1; index >= 0; index--){
+        const panel = panelsArray[index];
+        scaledOffset += $d520236daad9c5d5$export$31b21d0167753bb4(panels, panel.id, direction, sizes, height, width);
+    }
+    return Math.round(scaledOffset);
+}
+function $d520236daad9c5d5$export$7361ed18ff57179e(id) {
+    const element = document.querySelector(`[data-panel-id="${id}"]`);
+    if (element) return element;
+    return null;
+}
+function $d520236daad9c5d5$export$2e27d3a347680388(id) {
+    const element = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
+    if (element) return element;
+    return null;
+}
+function $d520236daad9c5d5$export$96a40be80fb6c3c8(id) {
+    const handles = $d520236daad9c5d5$export$8d0cd3c32ddc045e();
+    const index = handles.findIndex((handle)=>handle.getAttribute("data-panel-resize-handle-id") === id);
+    return index ?? null;
+}
+function $d520236daad9c5d5$export$8d0cd3c32ddc045e() {
+    return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id]`));
+}
+function $d520236daad9c5d5$export$ae14931f0a0256a3(groupId) {
+    return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
+}
+function $d520236daad9c5d5$export$68d3a33c21dfbe27(groupId, handleId, panelsArray) {
+    const handle = $d520236daad9c5d5$export$2e27d3a347680388(handleId);
+    const handles = $d520236daad9c5d5$export$ae14931f0a0256a3(groupId);
+    const index = handles.indexOf(handle);
+    const idBefore = panelsArray[index]?.id ?? null;
+    const idAfter = panelsArray[index + 1]?.id ?? null;
+    return [
+        idBefore,
+        idAfter
+    ];
+}
+function $d520236daad9c5d5$export$a861c0ad45885494(panels) {
+    return Array.from(panels.values()).sort((a, b)=>a.order - b.order);
+}
+function $d520236daad9c5d5$export$31b21d0167753bb4(panels, id, direction, sizes, height, width) {
+    const totalSize = direction === "horizontal" ? width : height;
+    if (panels.size === 1) return totalSize;
+    const panelsArray = $d520236daad9c5d5$export$a861c0ad45885494(panels);
+    const index = panelsArray.findIndex((panel)=>panel.id === id);
+    const size = sizes[index];
+    if (size == null) return 0;
+    return Math.round(size * totalSize);
+}
+
+
+
+
+
+function $63be9a96d8675f03$export$d9fcbe062527d159({ committedValuesRef: committedValuesRef , groupId: groupId , panels: panels , setSizes: setSizes , sizes: sizes  }) {
+    (0, $b2QPe$react.useEffect)(()=>{
+        const { direction: direction , height: height , panels: panels , width: width  } = committedValuesRef.current;
+        const handles = (0, $d520236daad9c5d5$export$ae14931f0a0256a3)(groupId);
+        const cleanupFunctions = handles.map((handle)=>{
+            const handleId = handle.getAttribute("data-panel-resize-handle-id");
+            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;
+            }, 1);
+            const ariaValueMin = panelsArray.find((panel)=>panel.id == idBefore)?.minSize ?? 0;
+            const size = (0, $d520236daad9c5d5$export$31b21d0167753bb4)(panels, idBefore, direction, sizes, height, width);
+            const ariaValueNow = size / (direction === "horizontal" ? width : height);
+            handle.setAttribute("aria-valuemax", "" + Math.round(100 * ariaValueMax));
+            handle.setAttribute("aria-valuemin", "" + Math.round(100 * ariaValueMin));
+            handle.setAttribute("aria-valuenow", "" + Math.round(100 * ariaValueNow));
+            const onKeyDown = (event)=>{
+                switch(event.key){
+                    case "Enter":
+                        {
+                            const index = panelsArray.findIndex((panel)=>panel.id === idBefore);
+                            if (index >= 0) {
+                                const panelData = panelsArray[index];
+                                const size = sizes[index];
+                                if (size != null) {
+                                    let delta = 0;
+                                    if (size.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879)) <= panelData.minSize.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
+                                    else delta = -(direction === "horizontal" ? width : height);
+                                    const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, sizes);
+                                    if (sizes !== nextSizes) setSizes(nextSizes);
+                                }
+                            }
+                            break;
+                        }
+                }
+            };
+            handle.addEventListener("keydown", onKeyDown);
+            const panelBefore = (0, $d520236daad9c5d5$export$7361ed18ff57179e)(idBefore);
+            if (panelBefore != null) handle.setAttribute("aria-controls", panelBefore.id);
+            return ()=>{
+                handle.removeAttribute("aria-valuemax");
+                handle.removeAttribute("aria-valuemin");
+                handle.removeAttribute("aria-valuenow");
+                handle.removeEventListener("keydown", onKeyDown);
+                if (panelBefore != null) handle.removeAttribute("aria-controls");
+            };
+        });
+        return ()=>{
+            cleanupFunctions.forEach((cleanupFunction)=>cleanupFunction());
+        };
+    }, [
+        groupId,
+        panels,
+        sizes
+    ]);
+}
+function $63be9a96d8675f03$export$33b0bea6ac3ffb03({ disabled: disabled , handleId: handleId , resizeHandler: resizeHandler  }) {
+    (0, $b2QPe$react.useEffect)(()=>{
+        if (disabled || resizeHandler == null) return;
+        const handleElement = (0, $d520236daad9c5d5$export$2e27d3a347680388)(handleId);
+        if (handleElement == null) return;
+        const onKeyDown = (event)=>{
+            switch(event.key){
+                case "ArrowDown":
+                case "ArrowLeft":
+                case "ArrowRight":
+                case "ArrowUp":
+                case "End":
+                case "Home":
+                    resizeHandler(event);
+                    break;
+                case "F6":
+                    {
+                        const handles = (0, $d520236daad9c5d5$export$8d0cd3c32ddc045e)();
+                        const index = (0, $d520236daad9c5d5$export$96a40be80fb6c3c8)(handleId);
+                        const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
+                        const nextHandle = handles[nextIndex];
+                        nextHandle.focus();
+                        break;
+                    }
+            }
+        };
+        handleElement.addEventListener("keydown", onKeyDown);
+        return ()=>{
+            handleElement.removeEventListener("keydown", onKeyDown);
+        };
+    }, [
+        disabled,
+        handleId,
+        resizeHandler
+    ]);
+}
+
+
 function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , height: height , width: width  }) {
     const groupId = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)();
     const [activeHandleId, setActiveHandleId] = (0, $b2QPe$react.useState)(null);
@@ -147,6 +398,13 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         committedValuesRef.current.sizes = sizes;
         committedValuesRef.current.width = width;
     });
+    (0, $63be9a96d8675f03$export$d9fcbe062527d159)({
+        committedValuesRef: committedValuesRef,
+        groupId: groupId,
+        panels: panels,
+        setSizes: setSizes,
+        sizes: sizes
+    });
     // Once all panels have registered themselves,
     // Compute the initial sizes based on default weights.
     // This assumes that panels register during initial mount (no conditional rendering)!
@@ -159,12 +417,12 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         // default size should be restored from local storage if possible.
         let defaultSizes = undefined;
         if (autoSaveId) {
-            const panelIds = $d428eaeef644efb2$var$panelsMapToSortedArray(panels).map((panel)=>panel.id);
+            const panelIds = (0, $d520236daad9c5d5$export$a861c0ad45885494)(panels).map((panel)=>panel.id);
             defaultSizes = (0, $e045b0dd313f33c7$export$9c80c6617f0386da)(autoSaveId, panelIds);
         }
         if (defaultSizes != null) setSizes(defaultSizes);
         else {
-            const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
+            const panelsArray = (0, $d520236daad9c5d5$export$a861c0ad45885494)(panels);
             const totalWeight = panelsArray.reduce((weight, panel)=>{
                 return weight + panel.defaultSize;
             }, 0);
@@ -178,7 +436,7 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         // If this panel has been configured to persist sizing information, save sizes to local storage.
         if (autoSaveId) {
             if (sizes.length === 0 || sizes.length !== panels.size) return;
-            const panelIds = $d428eaeef644efb2$var$panelsMapToSortedArray(panels).map((panel)=>panel.id);
+            const panelIds = (0, $d520236daad9c5d5$export$a861c0ad45885494)(panels).map((panel)=>panel.id);
             (0, $e045b0dd313f33c7$export$af183b313c61be4f)(autoSaveId, panelIds, sizes);
         }
     }, [
@@ -188,8 +446,8 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
     ]);
     const getPanelStyle = (0, $b2QPe$react.useCallback)((id)=>{
         const { panels: panels  } = committedValuesRef.current;
-        const offset = $d428eaeef644efb2$var$getOffset(panels, id, direction, sizes, height, width);
-        const size = $d428eaeef644efb2$var$getSize(panels, id, direction, sizes, height, width);
+        const offset = (0, $d520236daad9c5d5$export$622cea445a1c5b7d)(panels, id, direction, sizes, height, width);
+        const size = (0, $d520236daad9c5d5$export$31b21d0167753bb4)(panels, id, direction, sizes, height, width);
         if (direction === "horizontal") return {
             height: "100%",
             position: "absolute",
@@ -218,18 +476,17 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             return nextPanels;
         });
     }, []);
-    const registerResizeHandle = (0, $b2QPe$react.useCallback)((id)=>{
+    const registerResizeHandle = (0, $b2QPe$react.useCallback)((handleId)=>{
         const resizeHandler = (event)=>{
             event.preventDefault();
             const { direction: direction , height: height , panels: panels , sizes: prevSizes , width: width  } = committedValuesRef.current;
-            const handle = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
-            const handles = Array.from(document.querySelectorAll(`[data-panel-group-id="${groupId}"]`));
-            const index = handles.indexOf(handle);
-            const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
-            const idBefore = panelsArray[index]?.id ?? null;
-            const idAfter = panelsArray[index + 1]?.id ?? null;
+            const panelsArray = (0, $d520236daad9c5d5$export$a861c0ad45885494)(panels);
+            const [idBefore, idAfter] = (0, $d520236daad9c5d5$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
             if (idBefore == null || idAfter == null) return;
-            const nextCoordinates = (0, $37410a9246dfda64$export$70637efcd850e4ef)(event, prevCoordinatesRef.current);
+            const nextCoordinates = (0, $f5af57c8e042a4ad$export$70637efcd850e4ef)(event, prevCoordinatesRef.current, {
+                height: height,
+                width: width
+            }, direction);
             prevCoordinatesRef.current = {
                 screenX: nextCoordinates.screenX,
                 screenY: nextCoordinates.screenY
@@ -237,7 +494,7 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             const isHorizontal = direction === "horizontal";
             const movement = isHorizontal ? nextCoordinates.movementX : nextCoordinates.movementY;
             const delta = isHorizontal ? movement / width : movement / height;
-            const nextSizes = $d428eaeef644efb2$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes);
+            const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes);
             if (prevSizes !== nextSizes) setSizes(nextSizes);
         };
         return resizeHandler;
@@ -289,81 +546,21 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
                 children: children
             }, void 0, false, {
                 fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-                lineNumber: 273,
+                lineNumber: 290,
                 columnNumber: 9
             }, this)
         }, void 0, false, {
             fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-            lineNumber: 272,
+            lineNumber: 289,
             columnNumber: 7
         }, this)
     }, void 0, false, {
         fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-        lineNumber: 271,
+        lineNumber: 288,
         columnNumber: 5
     }, this);
 }
-function $d428eaeef644efb2$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes) {
-    if (delta === 0) return prevSizes;
-    const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
-    const nextSizes = prevSizes.concat();
-    let deltaApplied = 0;
-    // A resizing panel affects the panels before or after it.
-    //
-    // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.
-    // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
-    //
-    // 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){
-        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;
-            if (deltaApplied.toPrecision($d428eaeef644efb2$var$PRECISION) >= delta.toPrecision($d428eaeef644efb2$var$PRECISION)) break;
-        }
-        if (delta < 0) {
-            if (--index < 0) break;
-        } else {
-            if (++index >= 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;
-    return nextSizes;
-}
-function $d428eaeef644efb2$var$getOffset(panels, id, direction, sizes, height, width) {
-    const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
-    let index = panelsArray.findIndex((panel)=>panel.id === id);
-    if (index < 0) return 0;
-    let scaledOffset = 0;
-    for(index = index - 1; index >= 0; index--){
-        const panel = panelsArray[index];
-        scaledOffset += $d428eaeef644efb2$var$getSize(panels, panel.id, direction, sizes, height, width);
-    }
-    return Math.round(scaledOffset);
-}
-function $d428eaeef644efb2$var$getSize(panels, id, direction, sizes, height, width) {
-    const totalSize = direction === "horizontal" ? width : height;
-    if (panels.size === 1) return totalSize;
-    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);
-}
+
 
 
 
@@ -387,7 +584,6 @@ function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null ,
         }
     }, [
         disabled,
-        groupId,
         id,
         registerResizeHandle
     ]);
@@ -415,23 +611,31 @@ function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null ,
         resizeHandler,
         stopDragging
     ]);
+    (0, $63be9a96d8675f03$export$33b0bea6ac3ffb03)({
+        disabled: disabled,
+        handleId: id,
+        resizeHandler: resizeHandler
+    });
     return /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)("div", {
         className: className,
         "data-panel-group-id": groupId,
+        "data-panel-resize-handle-enabled": !disabled,
         "data-panel-resize-handle-id": id,
         onMouseDown: ()=>startDragging(id),
         onMouseUp: stopDragging,
         onTouchCancel: stopDragging,
         onTouchEnd: stopDragging,
         onTouchStart: ()=>startDragging(id),
+        role: "separator",
         style: {
             cursor: direction === "horizontal" ? "ew-resize" : "ns-resize",
             touchAction: "none"
         },
+        tabIndex: 0,
         children: children
     }, void 0, false, {
         fileName: "packages/react-resizable-panels/src/PanelResizeHandle.tsx",
-        lineNumber: 80,
+        lineNumber: 87,
         columnNumber: 5
     }, this);
 }