react-resizable-panels 0.0.39 → 0.0.41

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.0.41
+* Add imperative `setLayout` API for `PanelGroup`.
+
+## 0.0.40
+* README changes
+
 ## 0.0.39
 * [#118](https://github.com/bvaughn/react-resizable-panels/issues/118): Fix import regression from 0.0.38.
 

package/README.md

@@ -19,6 +19,8 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 </PanelGroup>
 ```
 
+### If you like this project, 🎉 [become a sponsor](https://github.com/sponsors/bvaughn/) or ☕ [buy me a coffee](http://givebrian.coffee/)
+
 ## Props
 
 ### `PanelGroup`

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

@@ -1,4 +1,4 @@
-import { CSSProperties, ElementType, ReactNode, RefObject } from "react";
+import { CSSProperties, ElementType, ReactNode } from "react";
 type Direction = "horizontal" | "vertical";
 export type PanelGroupStorage = {
     getItem(name: string): string | null;
@@ -8,19 +8,6 @@ type PanelGroupOnLayout = (sizes: number[]) => void;
 type PanelOnCollapse = (collapsed: boolean) => void;
 type PanelOnResize = (size: number) => void;
 type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
-type PanelData = {
-    callbacksRef: RefObject<{
-        onCollapse: PanelOnCollapse | null;
-        onResize: PanelOnResize | null;
-    }>;
-    collapsible: boolean;
-    defaultSize: number;
-    id: string;
-    maxSize: number;
-    minSize: number;
-    order: number | null;
-};
-type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
 export type PanelProps = {
     children?: ReactNode;
     className?: string;
@@ -55,20 +42,10 @@ export type PanelGroupProps = {
     style?: CSSProperties;
     tagName?: ElementType;
 };
-export function PanelGroup({ autoSaveId, children, className: classNameFromProps, direction, disablePointerEventsDuringResize, id: idFromProps, onLayout, storage, style: styleFromProps, tagName: Type, }: PanelGroupProps): import("react").FunctionComponentElement<import("react").ProviderProps<{
-    activeHandleId: string;
-    collapsePanel: (id: string) => void;
-    direction: "horizontal" | "vertical";
-    expandPanel: (id: string) => void;
-    getPanelStyle: (id: string) => CSSProperties;
-    groupId: string;
-    registerPanel: (id: string, panel: PanelData) => void;
-    registerResizeHandle: (id: string) => import("types").ResizeHandler;
-    resizePanel: (id: string, percentage: number) => void;
-    startDragging: (id: string, event: ResizeEvent) => void;
-    stopDragging: () => void;
-    unregisterPanel: (id: string) => void;
-}>>;
+type ImperativePanelGroupHandle = {
+    setLayout: (panelSizes: number[]) => void;
+};
+export const PanelGroup: import("react").ForwardRefExoticComponent<PanelGroupProps & import("react").RefAttributes<ImperativePanelGroupHandle>>;
 export type PanelResizeHandleProps = {
     children?: ReactNode;
     className?: string;

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

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/react-resizable-panels/src/src/vendor/react.ts","packages/react-resizable-panels/src/src/hooks/useIsomorphicEffect.ts","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/utils/cursor.ts","packages/react-resizable-panels/src/src/utils/debounce.ts","packages/react-resizable-panels/src/src/utils/arrays.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,null,null,null,null,null,"import { Panel } from \"./Panel\";\nimport { PanelGroup } from \"./PanelGroup\";\nimport { PanelResizeHandle } from \"./PanelResizeHandle\";\n\nimport type { ImperativePanelHandle, PanelProps } from \"./Panel\";\nimport type { PanelGroupProps } from \"./PanelGroup\";\nimport type { PanelResizeHandleProps } from \"./PanelResizeHandle\";\nimport type { PanelGroupStorage } from \"./types\";\n\nexport {\n  Panel,\n  PanelGroup,\n  PanelResizeHandle,\n\n  // TypeScript types\n  ImperativePanelHandle,\n  PanelGroupProps,\n  PanelGroupStorage,\n  PanelProps,\n  PanelResizeHandleProps,\n};\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}
+{"mappings":";AGEA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AAElD,gCAAgC;IAC9B,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACrC,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5C,CAAC;AAEF,0BAAiC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;AAC3D,uBAA8B,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;AAC3D,qBAA4B,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;AACnD,mCAA0C,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;AEMxE,yBAAyB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,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,UAAU,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,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,oCAAoC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,IAAI,OAAO,CAAC;IACxB,OAAO,IAAI,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAyIF,OAAO,MAAM,mHAGZ,CAAC;AUxFF,8BAA8B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,kCAAyC;IACvC,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AA2jBF,OAAO,MAAM,kIAKZ,CAAC;AClpBF,qCAAqC;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,UAAU,CAAC,EAAE,2BAA2B,CAAC;IACzC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,kCAAkC,EAChC,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,QAAgB,EAChB,EAAE,EAAE,WAAkB,EACtB,UAAU,EACV,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,sBAAsB,0FAoJxB","sources":["packages/react-resizable-panels/src/src/vendor/react.ts","packages/react-resizable-panels/src/src/hooks/useIsomorphicEffect.ts","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/utils/assert.ts","packages/react-resizable-panels/src/src/hooks/useWindowSplitterBehavior.ts","packages/react-resizable-panels/src/src/utils/cursor.ts","packages/react-resizable-panels/src/src/utils/debounce.ts","packages/react-resizable-panels/src/src/utils/arrays.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,null,null,null,null,null,null,"import { Panel } from \"./Panel\";\nimport { PanelGroup } from \"./PanelGroup\";\nimport { PanelResizeHandle } from \"./PanelResizeHandle\";\n\nimport type { ImperativePanelHandle, PanelProps } from \"./Panel\";\nimport type { ImperativePanelGroupHandle, PanelGroupProps } from \"./PanelGroup\";\nimport type { PanelResizeHandleProps } from \"./PanelResizeHandle\";\nimport type { PanelGroupStorage } from \"./types\";\n\nexport {\n  Panel,\n  PanelGroup,\n  PanelResizeHandle,\n\n  // TypeScript types\n  ImperativePanelHandle,\n  PanelGroupProps,\n  PanelGroupStorage,\n  PanelProps,\n  PanelResizeHandleProps,\n};\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}

package/dist/react-resizable-panels.js

@@ -223,34 +223,34 @@ function $cda3cc4b1114cf23$export$f50bae335f53943c(event, panels, idBefore, idAf
             delta = delta < 0 ? baseSize - nextSize : nextSize - baseSize;
         }
     }
-    let pivotId1 = delta < 0 ? idBefore : idAfter;
-    let index1 = panelsArray.findIndex((panel)=>panel.id === pivotId1);
+    let pivotId = delta < 0 ? idBefore : idAfter;
+    let index = panelsArray.findIndex((panel)=>panel.id === pivotId);
     while(true){
-        const panel1 = panelsArray[index1];
-        const baseSize1 = baseSizes[index1];
+        const panel = panelsArray[index];
+        const baseSize = baseSizes[index];
         const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
-        const nextSize1 = $cda3cc4b1114cf23$var$safeResizePanel(panel1, 0 - deltaRemaining, baseSize1, event);
-        if (baseSize1 !== nextSize1) {
-            if (nextSize1 === 0 && baseSize1 > 0) panelSizeBeforeCollapse.set(panel1.id, baseSize1);
-            deltaApplied += baseSize1 - nextSize1;
-            nextSizes[index1] = nextSize1;
+        const nextSize = $cda3cc4b1114cf23$var$safeResizePanel(panel, 0 - deltaRemaining, baseSize, event);
+        if (baseSize !== nextSize) {
+            if (nextSize === 0 && baseSize > 0) panelSizeBeforeCollapse.set(panel.id, baseSize);
+            deltaApplied += baseSize - nextSize;
+            nextSizes[index] = nextSize;
             if (deltaApplied.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)).localeCompare(Math.abs(delta).toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)), undefined, {
                 numeric: true
             }) >= 0) break;
         }
         if (delta < 0) {
-            if (--index1 < 0) break;
+            if (--index < 0) break;
         } else {
-            if (++index1 >= panelsArray.length) break;
+            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 baseSizes;
     // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
-    pivotId1 = delta < 0 ? idAfter : idBefore;
-    index1 = panelsArray.findIndex((panel)=>panel.id === pivotId1);
-    nextSizes[index1] = baseSizes[index1] + deltaApplied;
+    pivotId = delta < 0 ? idAfter : idBefore;
+    index = panelsArray.findIndex((panel)=>panel.id === pivotId);
+    nextSizes[index] = baseSizes[index] + deltaApplied;
     return nextSizes;
 }
 function $cda3cc4b1114cf23$export$b8e48269e4faa934(panelsArray, prevSizes, nextSizes) {
@@ -325,7 +325,7 @@ function $cda3cc4b1114cf23$export$68d3a33c21dfbe27(groupId, handleId, panelsArra
     var _panelsArray_index, _panelsArray_;
     const handle = $cda3cc4b1114cf23$export$2e27d3a347680388(handleId);
     const handles = $cda3cc4b1114cf23$export$ae14931f0a0256a3(groupId);
-    const index = handles.indexOf(handle);
+    const index = handle ? handles.indexOf(handle) : -1;
     var _panelsArray_index_id;
     const idBefore = (_panelsArray_index_id = (_panelsArray_index = panelsArray[index]) === null || _panelsArray_index === void 0 ? void 0 : _panelsArray_index.id) !== null && _panelsArray_index_id !== void 0 ? _panelsArray_index_id : null;
     var _panelsArray__id;
@@ -336,7 +336,14 @@ function $cda3cc4b1114cf23$export$68d3a33c21dfbe27(groupId, handleId, panelsArra
     ];
 }
 function $cda3cc4b1114cf23$export$a861c0ad45885494(panels) {
-    return Array.from(panels.values()).sort((a, b)=>a.order - b.order);
+    return Array.from(panels.values()).sort((panelA, panelB)=>{
+        const orderA = panelA.order;
+        const orderB = panelB.order;
+        if (orderA == null && orderB == null) return 0;
+        else if (orderA == null) return -1;
+        else if (orderB == null) return 1;
+        else return orderA - orderB;
+    });
 }
 function $cda3cc4b1114cf23$var$safeResizePanel(panel, delta, prevSize, event) {
     const nextSizeUnsafe = prevSize + delta;
@@ -437,6 +444,14 @@ function $47eee9224cfec8e8$export$c4dfce035d43d1e0(event) {
 
 
 
+function $3b727a2145ecd6f8$export$a7a9523472993e97(expectedCondition, message = "Assertion failed!") {
+    if (!expectedCondition) {
+        console.error(message);
+        throw Error(message);
+    }
+}
+
+
 function $a695670cc57a5969$export$d9fcbe062527d159({ committedValuesRef: committedValuesRef , groupId: groupId , panels: panels , setSizes: setSizes , sizes: sizes , panelSizeBeforeCollapse: panelSizeBeforeCollapse  }) {
     (0, $6e687094f9ca8395$export$6d9c69b0de29b591)(()=>{
         const { direction: direction , panels: panels  } = committedValuesRef.current;
@@ -535,6 +550,7 @@ function $a695670cc57a5969$export$33b0bea6ac3ffb03({ disabled: disabled , handle
                         event.preventDefault();
                         const handles = (0, $cda3cc4b1114cf23$export$8d0cd3c32ddc045e)();
                         const index = (0, $cda3cc4b1114cf23$export$96a40be80fb6c3c8)(handleId);
+                        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(index !== null);
                         const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
                         const nextHandle = handles[nextIndex];
                         nextHandle.focus();
@@ -594,7 +610,7 @@ function $08745f7373322b05$export$d395b5dfd066a659(state) {
 function $2e8572579e31d898$export$2e2bcd8739ae039(callback, durationMs = 10) {
     let timeoutId = null;
     let callable = (...args)=>{
-        clearTimeout(timeoutId);
+        if (timeoutId !== null) clearTimeout(timeoutId);
         timeoutId = setTimeout(()=>{
             callback(...args);
         }, durationMs);
@@ -612,6 +628,7 @@ function $d31ef7445a11a6c5$export$b141efd0b0fb9174(arrayA, arrayB) {
 }
 
 
+
 // Limit the frequency of localStorage updates.
 const $cec4cafe75f3db78$var$savePanelGroupLayoutDebounced = (0, $2e8572579e31d898$export$2e2bcd8739ae039)((0, $f9cb001fbb908626$export$af183b313c61be4f), 100);
 function $cec4cafe75f3db78$var$throwServerError() {
@@ -621,7 +638,7 @@ const $cec4cafe75f3db78$var$defaultStorage = {
     getItem: typeof localStorage !== "undefined" ? (name)=>localStorage.getItem(name) : $cec4cafe75f3db78$var$throwServerError,
     setItem: typeof localStorage !== "undefined" ? (name, value)=>localStorage.setItem(name, value) : $cec4cafe75f3db78$var$throwServerError
 };
-function $cec4cafe75f3db78$export$1d05749f6f573bb({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , disablePointerEventsDuringResize: disablePointerEventsDuringResize = false , id: idFromProps = null , onLayout: onLayout = null , storage: storage = $cec4cafe75f3db78$var$defaultStorage , style: styleFromProps = {} , tagName: Type = "div"  }) {
+function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , disablePointerEventsDuringResize: disablePointerEventsDuringResize = false , forwardedRef: forwardedRef , id: idFromProps = null , onLayout: onLayout , storage: storage = $cec4cafe75f3db78$var$defaultStorage , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const groupId = (0, $b1693d8d8f570e9c$export$2e2bcd8739ae039)(idFromProps);
     const [activeHandleId, setActiveHandleId] = (0, $6e687094f9ca8395$export$60241385465d0a34)(null);
     const [panels, setPanels] = (0, $6e687094f9ca8395$export$60241385465d0a34)(new Map());
@@ -647,6 +664,13 @@ function $cec4cafe75f3db78$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         panels: panels,
         sizes: sizes
     });
+    (0, $6e687094f9ca8395$export$d5a552a76deda3c2)(forwardedRef, ()=>({
+            setLayout: (sizes)=>{
+                const total = sizes.reduce((accumulated, current)=>accumulated + current, 0);
+                (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(total === 100, "Panel sizes must add up to 100%");
+                setSizes(sizes);
+            }
+        }), []);
     (0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
         committedValuesRef.current.direction = direction;
         committedValuesRef.current.panels = panels;
@@ -694,14 +718,14 @@ function $cec4cafe75f3db78$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         return;
         // If this panel has been configured to persist sizing information,
         // default size should be restored from local storage if possible.
-        let defaultSizes = undefined;
+        let defaultSizes = null;
         if (autoSaveId) {
             const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
             defaultSizes = (0, $f9cb001fbb908626$export$9c80c6617f0386da)(autoSaveId, panelsArray, storage);
         }
         if (defaultSizes != null) setSizes(defaultSizes);
         else {
-            const panelsArray1 = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
+            const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
             let panelsWithNullDefaultSize = 0;
             let totalDefaultSize = 0;
             let totalMinSize = 0;
@@ -709,14 +733,14 @@ function $cec4cafe75f3db78$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
             // 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)=>{
+            panelsArray.forEach((panel)=>{
                 totalMinSize += panel.minSize;
                 if (panel.defaultSize === null) panelsWithNullDefaultSize++;
                 else totalDefaultSize += panel.defaultSize;
             });
             if (totalDefaultSize > 100) throw new Error(`The sum of the defaultSize of all panels in a group cannot exceed 100.`);
             else if (totalMinSize > 100) throw new Error(`The sum of the minSize of all panels in a group cannot exceed 100.`);
-            setSizes(panelsArray1.map((panel)=>{
+            setSizes(panelsArray.map((panel)=>{
                 if (panel.defaultSize === null) return (100 - totalDefaultSize) / panelsWithNullDefaultSize;
                 return panel.defaultSize;
             }));
@@ -954,10 +978,15 @@ function $cec4cafe75f3db78$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         value: context
     });
 }
+const $cec4cafe75f3db78$export$1d05749f6f573bb = (0, $6e687094f9ca8395$export$257a8862b851cb5b)((props, ref)=>(0, $6e687094f9ca8395$export$c8a8987d4410bf2d)($cec4cafe75f3db78$var$PanelGroupWithForwardedRef, {
+        ...props,
+        forwardedRef: ref
+    }));
 // 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
-$cec4cafe75f3db78$export$1d05749f6f573bb.displayName = "PanelGroup";
+$cec4cafe75f3db78$var$PanelGroupWithForwardedRef.displayName = "PanelGroup";
+$cec4cafe75f3db78$export$1d05749f6f573bb.displayName = "forwardRef(PanelGroup)";
 
 
 
@@ -965,7 +994,7 @@ $cec4cafe75f3db78$export$1d05749f6f573bb.displayName = "PanelGroup";
 
 
 
-function $3a26a712c9163348$export$8829ecf6b6b15484({ children: children = null , className: classNameFromProps = "" , disabled: disabled = false , id: idFromProps = null , onDragging: onDragging = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
+function $3a26a712c9163348$export$8829ecf6b6b15484({ children: children = null , className: classNameFromProps = "" , disabled: disabled = false , id: idFromProps = null , onDragging: onDragging , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const divElementRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)(null);
     // Use a ref to guard against users passing inline props
     const callbacksRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({