react-resizable-panels 0.0.37 → 0.0.39

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

@@ -1,24 +1,36 @@
-import {useContext as $jhddX$useContext, useRef as $jhddX$useRef, useEffect as $jhddX$useEffect, useImperativeHandle as $jhddX$useImperativeHandle, createElement as $jhddX$createElement, forwardRef as $jhddX$forwardRef, useLayoutEffect as $jhddX$useLayoutEffect, useId as $jhddX$useId, createContext as $jhddX$createContext, useState as $jhddX$useState, useCallback as $jhddX$useCallback, useMemo as $jhddX$useMemo} from "react";
+import * as $jhddX$react from "react";
+
+// This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
+// and limitations with ParcelJS parsing of the useId workaround (used below).
+// For the time being, all react-resizable-panels must import "react" with the "* as React" syntax.
+// To avoid mistakes, we use the ESLint "no-restricted-imports" to prevent "react" imports except in this file.
+// See https://github.com/bvaughn/react-resizable-panels/issues/118
+// eslint-disable-next-line no-restricted-imports
+
+const { createElement: $ef07efbe5fa7d87e$export$c8a8987d4410bf2d , createContext: $ef07efbe5fa7d87e$export$fd42f52fd3ae1109 , forwardRef: $ef07efbe5fa7d87e$export$257a8862b851cb5b , useCallback: $ef07efbe5fa7d87e$export$35808ee640e87ca7 , useContext: $ef07efbe5fa7d87e$export$fae74005e78b1a27 , useEffect: $ef07efbe5fa7d87e$export$6d9c69b0de29b591 , useImperativeHandle: $ef07efbe5fa7d87e$export$d5a552a76deda3c2 , useLayoutEffect: $ef07efbe5fa7d87e$export$e5c5a5f917a5871c , useMemo: $ef07efbe5fa7d87e$export$1538c33de8887b59 , useRef: $ef07efbe5fa7d87e$export$b8f5890fc79d6aca , useState: $ef07efbe5fa7d87e$export$60241385465d0a34  } = $jhddX$react;
+// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
+const $ef07efbe5fa7d87e$export$f680877a34711e37 = $jhddX$react["useId".toString()];
 
 
 
 const $3f95d3e171760903$var$canUseEffectHooks = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
-const $3f95d3e171760903$var$useIsomorphicLayoutEffect = $3f95d3e171760903$var$canUseEffectHooks ? (0, $jhddX$useLayoutEffect) : ()=>{};
+const $3f95d3e171760903$var$useIsomorphicLayoutEffect = $3f95d3e171760903$var$canUseEffectHooks ? (0, $ef07efbe5fa7d87e$export$e5c5a5f917a5871c) : ()=>{};
 var $3f95d3e171760903$export$2e2bcd8739ae039 = $3f95d3e171760903$var$useIsomorphicLayoutEffect;
 
 
 
+const $e504a2438473eda9$var$wrappedUseId = typeof (0, $ef07efbe5fa7d87e$export$f680877a34711e37) === "function" ? (0, $ef07efbe5fa7d87e$export$f680877a34711e37) : ()=>null;
 let $e504a2438473eda9$var$counter = 0;
 function $e504a2438473eda9$export$2e2bcd8739ae039(idFromParams = null) {
-    const idFromUseId = typeof (0, $jhddX$useId) === "function" ? (0, $jhddX$useId)() : null;
-    const idRef = (0, $jhddX$useRef)(idFromParams || idFromUseId || null);
+    const idFromUseId = $e504a2438473eda9$var$wrappedUseId();
+    const idRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)(idFromParams || idFromUseId || null);
     if (idRef.current === null) idRef.current = "" + $e504a2438473eda9$var$counter++;
     return idRef.current;
 }
 
 
 
-const $af466b485b9d515d$export$7d8c6d083caec74a = (0, $jhddX$createContext)(null);
+const $af466b485b9d515d$export$7d8c6d083caec74a = (0, $ef07efbe5fa7d87e$export$fd42f52fd3ae1109)(null);
 // 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
@@ -26,16 +38,16 @@ $af466b485b9d515d$export$7d8c6d083caec74a.displayName = "PanelGroupContext";
 
 
 function $c33df6d7c39fd3ee$var$PanelWithForwardedRef({ children: children = null , className: classNameFromProps = "" , collapsible: collapsible = false , defaultSize: defaultSize = null , forwardedRef: forwardedRef , id: idFromProps = null , maxSize: maxSize = 100 , minSize: minSize = 10 , onCollapse: onCollapse = null , onResize: onResize = null , order: order = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
-    const context = (0, $jhddX$useContext)((0, $af466b485b9d515d$export$7d8c6d083caec74a));
+    const context = (0, $ef07efbe5fa7d87e$export$fae74005e78b1a27)((0, $af466b485b9d515d$export$7d8c6d083caec74a));
     if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
     const panelId = (0, $e504a2438473eda9$export$2e2bcd8739ae039)(idFromProps);
     const { collapsePanel: collapsePanel , expandPanel: expandPanel , getPanelStyle: getPanelStyle , registerPanel: registerPanel , resizePanel: resizePanel , unregisterPanel: unregisterPanel  } = context;
     // Use a ref to guard against users passing inline props
-    const callbacksRef = (0, $jhddX$useRef)({
+    const callbacksRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
         onCollapse: onCollapse,
         onResize: onResize
     });
-    (0, $jhddX$useEffect)(()=>{
+    (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
         callbacksRef.current.onCollapse = onCollapse;
         callbacksRef.current.onResize = onResize;
     });
@@ -74,13 +86,13 @@ function $c33df6d7c39fd3ee$var$PanelWithForwardedRef({ children: children = null
         unregisterPanel
     ]);
     const style = getPanelStyle(panelId);
-    const committedValuesRef = (0, $jhddX$useRef)({
+    const committedValuesRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
         size: $c33df6d7c39fd3ee$var$parseSizeFromStyle(style)
     });
     (0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
         committedValuesRef.current.size = $c33df6d7c39fd3ee$var$parseSizeFromStyle(style);
     });
-    (0, $jhddX$useImperativeHandle)(forwardedRef, ()=>({
+    (0, $ef07efbe5fa7d87e$export$d5a552a76deda3c2)(forwardedRef, ()=>({
             collapse: ()=>collapsePanel(panelId),
             expand: ()=>expandPanel(panelId),
             getCollapsed () {
@@ -96,7 +108,7 @@ function $c33df6d7c39fd3ee$var$PanelWithForwardedRef({ children: children = null
         panelId,
         resizePanel
     ]);
-    return (0, $jhddX$createElement)(Type, {
+    return (0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)(Type, {
         children: children,
         className: classNameFromProps,
         "data-panel": "",
@@ -110,7 +122,7 @@ function $c33df6d7c39fd3ee$var$PanelWithForwardedRef({ children: children = null
         }
     });
 }
-const $c33df6d7c39fd3ee$export$2ddb90ad54e5f587 = (0, $jhddX$forwardRef)((props, ref)=>(0, $jhddX$createElement)($c33df6d7c39fd3ee$var$PanelWithForwardedRef, {
+const $c33df6d7c39fd3ee$export$2ddb90ad54e5f587 = (0, $ef07efbe5fa7d87e$export$257a8862b851cb5b)((props, ref)=>(0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)($c33df6d7c39fd3ee$var$PanelWithForwardedRef, {
         ...props,
         forwardedRef: ref
     }));
@@ -419,7 +431,7 @@ function $8f51c2d77bf1da88$export$c4dfce035d43d1e0(event) {
 
 
 function $4a90471e7083b52f$export$d9fcbe062527d159({ committedValuesRef: committedValuesRef , groupId: groupId , panels: panels , setSizes: setSizes , sizes: sizes , panelSizeBeforeCollapse: panelSizeBeforeCollapse  }) {
-    (0, $jhddX$useEffect)(()=>{
+    (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
         const { direction: direction , panels: panels  } = committedValuesRef.current;
         const groupElement = (0, $d6f7e4c3aa9e02d7$export$5e67632cf3550a9c)(groupId);
         const { height: height , width: width  } = groupElement.getBoundingClientRect();
@@ -450,9 +462,11 @@ function $4a90471e7083b52f$export$d9fcbe062527d159({ committedValuesRef: committ
             handle.setAttribute("aria-valuemin", "" + Math.round(ariaValueMin));
             handle.setAttribute("aria-valuenow", "" + Math.round(parseInt(flexGrow)));
             const onKeyDown = (event)=>{
+                if (event.defaultPrevented) return;
                 switch(event.key){
                     case "Enter":
                         {
+                            event.preventDefault();
                             const index = panelsArray.findIndex((panel)=>panel.id === idBefore);
                             if (index >= 0) {
                                 const panelData = panelsArray[index];
@@ -484,17 +498,21 @@ function $4a90471e7083b52f$export$d9fcbe062527d159({ committedValuesRef: committ
             cleanupFunctions.forEach((cleanupFunction)=>cleanupFunction());
         };
     }, [
+        committedValuesRef,
         groupId,
         panels,
+        panelSizeBeforeCollapse,
+        setSizes,
         sizes
     ]);
 }
 function $4a90471e7083b52f$export$33b0bea6ac3ffb03({ disabled: disabled , handleId: handleId , resizeHandler: resizeHandler  }) {
-    (0, $jhddX$useEffect)(()=>{
+    (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
         if (disabled || resizeHandler == null) return;
         const handleElement = (0, $d6f7e4c3aa9e02d7$export$2e27d3a347680388)(handleId);
         if (handleElement == null) return;
         const onKeyDown = (event)=>{
+            if (event.defaultPrevented) return;
             switch(event.key){
                 case "ArrowDown":
                 case "ArrowLeft":
@@ -502,10 +520,12 @@ function $4a90471e7083b52f$export$33b0bea6ac3ffb03({ disabled: disabled , handle
                 case "ArrowUp":
                 case "End":
                 case "Home":
+                    event.preventDefault();
                     resizeHandler(event);
                     break;
                 case "F6":
                     {
+                        event.preventDefault();
                         const handles = (0, $d6f7e4c3aa9e02d7$export$8d0cd3c32ddc045e)();
                         const index = (0, $d6f7e4c3aa9e02d7$export$96a40be80fb6c3c8)(handleId);
                         const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
@@ -596,26 +616,26 @@ const $3daa5d4c086ea816$var$defaultStorage = {
 };
 function $3daa5d4c086ea816$export$1d05749f6f573bb({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , disablePointerEventsDuringResize: disablePointerEventsDuringResize = false , id: idFromProps = null , onLayout: onLayout = null , storage: storage = $3daa5d4c086ea816$var$defaultStorage , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const groupId = (0, $e504a2438473eda9$export$2e2bcd8739ae039)(idFromProps);
-    const [activeHandleId, setActiveHandleId] = (0, $jhddX$useState)(null);
-    const [panels, setPanels] = (0, $jhddX$useState)(new Map());
+    const [activeHandleId, setActiveHandleId] = (0, $ef07efbe5fa7d87e$export$60241385465d0a34)(null);
+    const [panels, setPanels] = (0, $ef07efbe5fa7d87e$export$60241385465d0a34)(new Map());
     // When resizing is done via mouse/touch event–
     // We store the initial Panel sizes in this ref, and apply move deltas to them instead of to the current sizes.
     // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
-    const initialDragStateRef = (0, $jhddX$useRef)(null);
+    const initialDragStateRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)(null);
     // Use a ref to guard against users passing inline props
-    const callbacksRef = (0, $jhddX$useRef)({
+    const callbacksRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
         onLayout: onLayout
     });
-    (0, $jhddX$useEffect)(()=>{
+    (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
         callbacksRef.current.onLayout = onLayout;
     });
     // 0-1 values representing the relative size of each panel.
-    const [sizes, setSizes] = (0, $jhddX$useState)([]);
+    const [sizes, setSizes] = (0, $ef07efbe5fa7d87e$export$60241385465d0a34)([]);
     // Used to support imperative collapse/expand API.
-    const panelSizeBeforeCollapse = (0, $jhddX$useRef)(new Map());
-    const prevDeltaRef = (0, $jhddX$useRef)(0);
+    const panelSizeBeforeCollapse = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)(new Map());
+    const prevDeltaRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)(0);
     // Store committed values to avoid unnecessarily re-running memoization/effects functions.
-    const committedValuesRef = (0, $jhddX$useRef)({
+    const committedValuesRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
         direction: direction,
         panels: panels,
         sizes: sizes
@@ -634,7 +654,7 @@ function $3daa5d4c086ea816$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         panelSizeBeforeCollapse: panelSizeBeforeCollapse
     });
     // Notify external code when sizes have changed.
-    (0, $jhddX$useEffect)(()=>{
+    (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
         const { onLayout: onLayout  } = callbacksRef.current;
         if (onLayout) {
             const { sizes: sizes  } = committedValuesRef.current;
@@ -646,7 +666,7 @@ function $3daa5d4c086ea816$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
     ]);
     // Notify Panel listeners about their initial sizes and collapsed state after mount.
     // Subsequent changes will be called by the resizeHandler.
-    const didNotifyCallbacksAfterMountRef = (0, $jhddX$useRef)(false);
+    const didNotifyCallbacksAfterMountRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)(false);
     (0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
         if (didNotifyCallbacksAfterMountRef.current) return;
         const { panels: panels , sizes: sizes  } = committedValuesRef.current;
@@ -696,9 +716,10 @@ function $3daa5d4c086ea816$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         }
     }, [
         autoSaveId,
-        panels
+        panels,
+        storage
     ]);
-    (0, $jhddX$useEffect)(()=>{
+    (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
         // 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;
@@ -708,9 +729,10 @@ function $3daa5d4c086ea816$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
     }, [
         autoSaveId,
         panels,
-        sizes
+        sizes,
+        storage
     ]);
-    const getPanelStyle = (0, $jhddX$useCallback)((id)=>{
+    const getPanelStyle = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((id)=>{
         const { panels: panels  } = committedValuesRef.current;
         // Before mounting, Panels will not yet have registered themselves.
         // This includes server rendering.
@@ -735,10 +757,10 @@ function $3daa5d4c086ea816$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         };
     }, [
         activeHandleId,
-        direction,
+        disablePointerEventsDuringResize,
         sizes
     ]);
-    const registerPanel = (0, $jhddX$useCallback)((id, panel)=>{
+    const registerPanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((id, panel)=>{
         setPanels((prevPanels)=>{
             if (prevPanels.has(id)) return prevPanels;
             const nextPanels = new Map(prevPanels);
@@ -746,7 +768,7 @@ function $3daa5d4c086ea816$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
             return nextPanels;
         });
     }, []);
-    const registerResizeHandle = (0, $jhddX$useCallback)((handleId)=>{
+    const registerResizeHandle = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((handleId)=>{
         const resizeHandler = (event)=>{
             event.preventDefault();
             const { direction: direction , panels: panels , sizes: prevSizes  } = committedValuesRef.current;
@@ -789,7 +811,7 @@ function $3daa5d4c086ea816$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
     }, [
         groupId
     ]);
-    const unregisterPanel = (0, $jhddX$useCallback)((id)=>{
+    const unregisterPanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((id)=>{
         setPanels((prevPanels)=>{
             if (!prevPanels.has(id)) return prevPanels;
             const nextPanels = new Map(prevPanels);
@@ -797,7 +819,7 @@ function $3daa5d4c086ea816$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
             return nextPanels;
         });
     }, []);
-    const collapsePanel = (0, $jhddX$useCallback)((id)=>{
+    const collapsePanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((id)=>{
         const { panels: panels , sizes: prevSizes  } = committedValuesRef.current;
         const panel = panels.get(id);
         if (panel == null || !panel.collapsible) return;
@@ -819,7 +841,7 @@ function $3daa5d4c086ea816$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
             setSizes(nextSizes);
         }
     }, []);
-    const expandPanel = (0, $jhddX$useCallback)((id)=>{
+    const expandPanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((id)=>{
         const { panels: panels , sizes: prevSizes  } = committedValuesRef.current;
         const panel = panels.get(id);
         if (panel == null) return;
@@ -842,7 +864,7 @@ function $3daa5d4c086ea816$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
             setSizes(nextSizes);
         }
     }, []);
-    const resizePanel = (0, $jhddX$useCallback)((id, nextSize)=>{
+    const resizePanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((id, nextSize)=>{
         const { panels: panels , sizes: prevSizes  } = committedValuesRef.current;
         const panel = panels.get(id);
         if (panel == null) return;
@@ -864,7 +886,7 @@ function $3daa5d4c086ea816$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
             setSizes(nextSizes);
         }
     }, []);
-    const context = (0, $jhddX$useMemo)(()=>({
+    const context = (0, $ef07efbe5fa7d87e$export$1538c33de8887b59)(()=>({
             activeHandleId: activeHandleId,
             collapsePanel: collapsePanel,
             direction: direction,
@@ -910,8 +932,8 @@ function $3daa5d4c086ea816$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         overflow: "hidden",
         width: "100%"
     };
-    return (0, $jhddX$createElement)((0, $af466b485b9d515d$export$7d8c6d083caec74a).Provider, {
-        children: (0, $jhddX$createElement)(Type, {
+    return (0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)((0, $af466b485b9d515d$export$7d8c6d083caec74a).Provider, {
+        children: (0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)(Type, {
             children: children,
             className: classNameFromProps,
             "data-panel-group": "",
@@ -937,22 +959,22 @@ $3daa5d4c086ea816$export$1d05749f6f573bb.displayName = "PanelGroup";
 
 
 function $971f2c37f9d2b98e$export$8829ecf6b6b15484({ children: children = null , className: classNameFromProps = "" , disabled: disabled = false , id: idFromProps = null , onDragging: onDragging = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
-    const divElementRef = (0, $jhddX$useRef)(null);
+    const divElementRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)(null);
     // Use a ref to guard against users passing inline props
-    const callbacksRef = (0, $jhddX$useRef)({
+    const callbacksRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
         onDragging: onDragging
     });
-    (0, $jhddX$useEffect)(()=>{
+    (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
         callbacksRef.current.onDragging = onDragging;
     });
-    const panelGroupContext = (0, $jhddX$useContext)((0, $af466b485b9d515d$export$7d8c6d083caec74a));
+    const panelGroupContext = (0, $ef07efbe5fa7d87e$export$fae74005e78b1a27)((0, $af466b485b9d515d$export$7d8c6d083caec74a));
     if (panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
     const { activeHandleId: activeHandleId , direction: direction , groupId: groupId , registerResizeHandle: registerResizeHandle , startDragging: startDragging , stopDragging: stopDragging  } = panelGroupContext;
     const resizeHandleId = (0, $e504a2438473eda9$export$2e2bcd8739ae039)(idFromProps);
     const isDragging = activeHandleId === resizeHandleId;
-    const [isFocused, setIsFocused] = (0, $jhddX$useState)(false);
-    const [resizeHandler, setResizeHandler] = (0, $jhddX$useState)(null);
-    const stopDraggingAndBlur = (0, $jhddX$useCallback)(()=>{
+    const [isFocused, setIsFocused] = (0, $ef07efbe5fa7d87e$export$60241385465d0a34)(false);
+    const [resizeHandler, setResizeHandler] = (0, $ef07efbe5fa7d87e$export$60241385465d0a34)(null);
+    const stopDraggingAndBlur = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)(()=>{
         // Clicking on the drag handle shouldn't leave it focused;
         // That would cause the PanelGroup to think it was still active.
         const div = divElementRef.current;
@@ -963,7 +985,7 @@ function $971f2c37f9d2b98e$export$8829ecf6b6b15484({ children: children = null ,
     }, [
         stopDragging
     ]);
-    (0, $jhddX$useEffect)(()=>{
+    (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
         if (disabled) setResizeHandler(null);
         else {
             const resizeHandler = registerResizeHandle(resizeHandleId);
@@ -974,20 +996,27 @@ function $971f2c37f9d2b98e$export$8829ecf6b6b15484({ children: children = null ,
         resizeHandleId,
         registerResizeHandle
     ]);
-    (0, $jhddX$useEffect)(()=>{
+    (0, $ef07efbe5fa7d87e$export$6d9c69b0de29b591)(()=>{
         if (disabled || resizeHandler == null || !isDragging) return;
         const onMove = (event)=>{
             resizeHandler(event);
         };
-        document.body.addEventListener("contextmenu", stopDraggingAndBlur);
-        document.body.addEventListener("mousemove", onMove);
-        document.body.addEventListener("touchmove", onMove);
+        const onMouseLeave = (event)=>{
+            resizeHandler(event);
+        };
+        const divElement = divElementRef.current;
+        const targetDocument = divElement.ownerDocument;
+        targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
+        targetDocument.body.addEventListener("mousemove", onMove);
+        targetDocument.body.addEventListener("touchmove", onMove);
+        targetDocument.body.addEventListener("mouseleave", onMouseLeave);
         window.addEventListener("mouseup", stopDraggingAndBlur);
         window.addEventListener("touchend", stopDraggingAndBlur);
         return ()=>{
-            document.body.removeEventListener("contextmenu", stopDraggingAndBlur);
-            document.body.removeEventListener("mousemove", onMove);
-            document.body.removeEventListener("touchmove", onMove);
+            targetDocument.body.removeEventListener("contextmenu", stopDraggingAndBlur);
+            targetDocument.body.removeEventListener("mousemove", onMove);
+            targetDocument.body.removeEventListener("touchmove", onMove);
+            targetDocument.body.removeEventListener("mouseleave", onMouseLeave);
             window.removeEventListener("mouseup", stopDraggingAndBlur);
             window.removeEventListener("touchend", stopDraggingAndBlur);
         };
@@ -1008,7 +1037,7 @@ function $971f2c37f9d2b98e$export$8829ecf6b6b15484({ children: children = null ,
         touchAction: "none",
         userSelect: "none"
     };
-    return (0, $jhddX$createElement)(Type, {
+    return (0, $ef07efbe5fa7d87e$export$c8a8987d4410bf2d)(Type, {
         children: children,
         className: classNameFromProps,
         "data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,