react-resizable-panels 0.0.14 → 0.0.16

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.0.16 (unreleased)
+* Bug fix: Resize handle ARIA attributes now rendering proper min/max/now values for Window Splitter.
+* Bug fix: Up/down arrows are ignored for _horizontal_ layouts and left/right arrows are ignored for _vertical_ layouts as per Window Splitter spec.
+* [#36](https://github.com/bvaughn/react-resizable-panels/issues/36): Removed `PanelContext` in favor of adding `data-resize-handle-active` attribute to active resize handles. This attribute can be used to update the style for active handles.
+
+## 0.0.15
+* [#30](https://github.com/bvaughn/react-resizable-panels/issues/30): `PanelGroup` uses `display: flex` rather than absolute positioning. This provides several benefits: (a) more responsive resizing for nested groups, (b) no explicit `width`/`height` props, and (c) `PanelResizeHandle` components can now be rendered directly within `PanelGroup` (rather than as children of `Panel`s).
+
 ## 0.0.14
 * [#23](https://github.com/bvaughn/react-resizable-panels/issues/23): Fix small regression with `autoSaveId` that was introduced with non-deterministic `useId` ids.
 

package/README.md

@@ -5,15 +5,15 @@ React components for resizable panel groups/layouts
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
 <PanelGroup autoSaveId="example" direction="horizontal">
-  <Panel defaultSize={0.3}>
+  <Panel defaultSize={25}>
     <SourcesExplorer />
   </Panel>
-  <Panel defaultSize={0.5}>
-    <PanelResizeHandle />
+  <PanelResizeHandle />
+  <Panel>
     <SourceViewer />
-    <PanelResizeHandle />
   </Panel>
-  <Panel defaultSize={0.2}>
+  <PanelResizeHandle />
+  <Panel defaultSize={25}>
     <Console />
   </Panel>
 </PanelGroup>
@@ -28,18 +28,16 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | `children`   | `ReactNode`                 | Arbitrary React element(s)
 | `className`  | `?string`                   | Class name
 | `direction`  | `"horizontal" \| "vertical"` | Group orientation
-| `height`     | `number`                    | Height of group (in pixels)
 | `id`         | `?string`                   | Optional group id; falls back to `useId` when not provided
-| `width`      | `number`                    | Width of group (in pixels)
 
 ### `Panel`
 | prop          | type        | description
 | :------------ | :---------- | :---
 | `children`    | `ReactNode` | Arbitrary React element(s)
 | `className`   | `?string`   | Class name
-| `defaultSize` | `?number`   | Initial size of panel (relative to other panels within the group)
+| `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`   | Minum allowable size of panel (0.0 - 1.0)
+| `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
 
 ### `PanelResizeHandle`
@@ -49,8 +47,3 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | `className`   | `?string`    | Class name
 | `disabled`    | `?boolean`   | Disable drag handle
 | `id`          | `?string`    | Optional resize handle id (unique within group); falls back to `useId` when not provided
-
-### `PanelContext`
-| prop         | type                 | description
-| :----------- | :------------------- | :---
-| `activeHandleId` | `string \| null` | Resize handle currently being dragged (or `null`)

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

@@ -1,12 +1,9 @@
 import { ReactNode } from "react";
 type Direction = "horizontal" | "vertical";
-export const PanelContext: import("react").Context<{
-    activeHandleId: string | null;
-}>;
 export function Panel({ children, className, defaultSize, id: idFromProps, minSize, order, }: {
     children?: ReactNode;
     className?: string;
-    defaultSize?: number;
+    defaultSize?: number | null;
     id?: string | null;
     minSize?: number;
     order?: number | null;
@@ -16,11 +13,9 @@ type Props = {
     children?: ReactNode;
     className?: string;
     direction: Direction;
-    height: number;
     id?: string | null;
-    width: number;
 };
-export function PanelGroup({ autoSaveId, children, className, direction, height, id: idFromProps, width, }: Props): JSX.Element;
+export function PanelGroup({ autoSaveId, children, className, direction, id: idFromProps, }: Props): JSX.Element;
 export function PanelResizeHandle({ children, className, disabled, id: idFromProps, }: {
     children?: ReactNode;
     className?: string;

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

@@ -1 +1 @@
-{"mappings":";ACAA,iBAAwB,YAAY,GAAG,UAAU,CAAC;ACIlD,OAAO,MAAM;oBACK,MAAM,GAAG,IAAI;EAChB,CAAC;ACEhB,sBAA8B,EAC5B,QAAe,EACf,SAAc,EACd,WAAiB,EACjB,EAAE,EAAE,WAAkB,EACtB,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,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,eA+CA;AMlCD,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,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAMF,2BAAmC,EACjC,UAAU,EACV,QAAe,EACf,SAAc,EACd,SAAS,EACT,MAAM,EACN,EAAE,EAAE,WAAkB,EACtB,KAAK,GACN,EAAE,KAAK,eAyOP;ACpRD,kCAA0C,EACxC,QAAe,EACf,SAAc,EACd,QAAgB,EAChB,EAAE,EAAE,WAAkB,GACvB,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,eAuGA","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 { 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":";ACAA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AEQlD,sBAA8B,EAC5B,QAAe,EACf,SAAc,EACd,WAAkB,EAClB,EAAE,EAAE,WAAkB,EACtB,OAAY,EACZ,KAAY,GACb,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;CACvB,eAyDA;AM9CD,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,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB,CAAC;AAMF,2BAAmC,EACjC,UAAU,EACV,QAAe,EACf,SAAc,EACd,SAAS,EACT,EAAE,EAAE,WAAkB,GACvB,EAAE,KAAK,eA8OP;ACnRD,kCAA0C,EACxC,QAAe,EACf,SAAc,EACd,QAAgB,EAChB,EAAE,EAAE,WAAkB,GACvB,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,eA6GA","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"}

package/dist/react-resizable-panels.js

@@ -6,7 +6,6 @@ function $parcel$export(e, n, v, s) {
 }
 
 $parcel$export(module.exports, "Panel", () => $6d390b7f2e6b107f$export$2e2bcd8739ae039);
-$parcel$export(module.exports, "PanelContext", () => $3251d17c1c3bce6c$export$f34532ac99e32150);
 $parcel$export(module.exports, "PanelGroup", () => $d428eaeef644efb2$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "PanelResizeHandle", () => $d578a49f00f1bdeb$export$2e2bcd8739ae039);
 
@@ -22,17 +21,20 @@ function $6d548a0d130941e3$export$2e2bcd8739ae039(idFromParams = null) {
 
 
 
-const $3251d17c1c3bce6c$export$f34532ac99e32150 = (0, $b2QPe$react.createContext)(null);
 const $3251d17c1c3bce6c$export$7d8c6d083caec74a = (0, $b2QPe$react.createContext)(null);
 
 
-function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null , className: className = "" , defaultSize: defaultSize = 0.1 , id: idFromProps = null , minSize: minSize = 0.1 , order: order = null  }) {
+function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null , className: className = "" , defaultSize: defaultSize = null , id: idFromProps = null , minSize: minSize = 10 , order: order = null  }) {
     const context = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
     if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
     const panelId = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)(idFromProps);
-    if (minSize > defaultSize) {
-        console.error(`Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`);
-        defaultSize = minSize;
+    if (minSize < 0 || minSize > 100) throw Error(`Panel minSize must be between 0 and 100, but was ${minSize}`);
+    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 { getPanelStyle: getPanelStyle , registerPanel: registerPanel , unregisterPanel: unregisterPanel  } = context;
     (0, $b2QPe$react.useLayoutEffect)(()=>{
@@ -68,13 +70,15 @@ function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null ,
 
 
 
-
 // Note that Panel ids might be user-provided (stable) or useId generated (non-deterministic)
 // so they should not be used as part of the serialization key.
 // Using an attribute like minSize instead should work well enough.
 // Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
 function $e045b0dd313f33c7$var$getSerializationKey(panels) {
-    return panels.map((panel)=>panel.minSize.toPrecision(2)).sort().join(",");
+    return panels.map((panel)=>{
+        const { minSize: minSize , order: order  } = panel;
+        return order ? `${order}:${minSize}` : `${minSize}`;
+    }).sort((a, b)=>a.localeCompare(b)).join(",");
 }
 function $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId) {
     try {
@@ -106,7 +110,7 @@ function $e045b0dd313f33c7$export$af183b313c61be4f(autoSaveId, panels, sizes) {
 }
 
 
-const $3237bc4a138172cd$export$d6d3992f3becc879 = 5;
+const $3237bc4a138172cd$export$d6d3992f3becc879 = 10;
 
 
 function $d520236daad9c5d5$export$f50bae335f53943c(panels, idBefore, idAfter, delta, prevSizes) {
@@ -147,22 +151,24 @@ function $d520236daad9c5d5$export$f50bae335f53943c(panels, idBefore, idAfter, de
     nextSizes[index] = prevSizes[index] + deltaApplied;
     return nextSizes;
 }
-function $d520236daad9c5d5$export$622cea445a1c5b7d(panels, id, direction, sizes, height, width) {
+function $d520236daad9c5d5$export$6f43503e166de6fb(panels, id, sizes) {
+    if (panels.size === 1) return "100";
     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);
+    const index = panelsArray.findIndex((panel)=>panel.id === id);
+    const size = sizes[index];
+    if (size == null) return "0";
+    return size.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879));
 }
 function $d520236daad9c5d5$export$7361ed18ff57179e(id) {
     const element = document.querySelector(`[data-panel-id="${id}"]`);
     if (element) return element;
     return null;
 }
+function $d520236daad9c5d5$export$5e67632cf3550a9c(id) {
+    const element = document.querySelector(`[data-panel-group-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;
@@ -193,15 +199,6 @@ 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$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 $f5af57c8e042a4ad$export$ec391ce65b083ed4(event, handleId, direction, initialOffset = 0) {
@@ -217,21 +214,23 @@ function $f5af57c8e042a4ad$export$ec391ce65b083ed4(event, handleId, direction, i
     const elementOffset = isHorizontal ? rect.left : rect.top;
     return pointerOffset - elementOffset - initialOffset;
 }
-function $f5af57c8e042a4ad$export$354b17c0684607ed(event, handleId, { height: height , width: width  }, direction, initialOffset) {
+function $f5af57c8e042a4ad$export$354b17c0684607ed(event, groupId, handleId, direction, initialOffset) {
     const isHorizontal = direction === "horizontal";
-    const size = isHorizontal ? width : height;
+    const groupElement = (0, $d520236daad9c5d5$export$5e67632cf3550a9c)(groupId);
+    const rect = groupElement.getBoundingClientRect();
+    const size = isHorizontal ? rect.width : rect.height;
     if ($f5af57c8e042a4ad$export$e7bf60a870f429b0(event)) {
         const denominator = event.shiftKey ? 10 : 100;
         const delta = size / denominator;
         switch(event.key){
             case "ArrowDown":
-                return delta;
+                return isHorizontal ? 0 : delta;
             case "ArrowLeft":
-                return -delta;
+                return isHorizontal ? -delta : 0;
             case "ArrowRight":
-                return delta;
+                return isHorizontal ? delta : 0;
             case "ArrowUp":
-                return -delta;
+                return isHorizontal ? 0 : -delta;
             case "End":
                 if (isHorizontal) return size;
                 else return size;
@@ -258,7 +257,9 @@ function $f5af57c8e042a4ad$export$c4dfce035d43d1e0(event) {
 
 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 { direction: direction , panels: panels  } = committedValuesRef.current;
+        const groupElement = (0, $d520236daad9c5d5$export$5e67632cf3550a9c)(groupId);
+        const { height: height , width: width  } = groupElement.getBoundingClientRect();
         const handles = (0, $d520236daad9c5d5$export$ae14931f0a0256a3)(groupId);
         const cleanupFunctions = handles.map((handle)=>{
             const handleId = handle.getAttribute("data-panel-resize-handle-id");
@@ -268,13 +269,12 @@ function $63be9a96d8675f03$export$d9fcbe062527d159({ committedValuesRef: committ
             const ariaValueMax = panelsArray.reduce((difference, panel)=>{
                 if (panel.id !== idBefore) return difference - panel.minSize;
                 return difference;
-            }, 1);
+            }, 100);
             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 flexGrow = (0, $d520236daad9c5d5$export$6f43503e166de6fb)(panels, idBefore, sizes);
+            handle.setAttribute("aria-valuemax", "" + Math.round(ariaValueMax));
+            handle.setAttribute("aria-valuemin", "" + Math.round(ariaValueMin));
+            handle.setAttribute("aria-valuenow", "" + Math.round(parseInt(flexGrow)));
             const onKeyDown = (event)=>{
                 switch(event.key){
                     case "Enter":
@@ -354,7 +354,7 @@ function $63be9a96d8675f03$export$33b0bea6ac3ffb03({ disabled: disabled , handle
 
 
 
-function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , height: height , id: idFromProps = null , width: width  }) {
+function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , id: idFromProps = null  }) {
     const groupId = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)(idFromProps);
     const [activeHandleId, setActiveHandleId] = (0, $b2QPe$react.useState)(null);
     const [panels, setPanels] = (0, $b2QPe$react.useState)(new Map());
@@ -364,17 +364,13 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
     // Store committed values to avoid unnecessarily re-running memoization/effects functions.
     const committedValuesRef = (0, $b2QPe$react.useRef)({
         direction: direction,
-        height: height,
         panels: panels,
-        sizes: sizes,
-        width: width
+        sizes: sizes
     });
     (0, $b2QPe$react.useLayoutEffect)(()=>{
         committedValuesRef.current.direction = direction;
-        committedValuesRef.current.height = height;
         committedValuesRef.current.panels = panels;
         committedValuesRef.current.sizes = sizes;
-        committedValuesRef.current.width = width;
     });
     (0, $63be9a96d8675f03$export$d9fcbe062527d159)({
         committedValuesRef: committedValuesRef,
@@ -389,8 +385,6 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
     (0, $b2QPe$react.useLayoutEffect)(()=>{
         const sizes = committedValuesRef.current.sizes;
         if (sizes.length === panels.size) return;
-        // TODO [panels]
-        // Validate that the total minSize is <= 1.
         // If this panel has been configured to persist sizing information,
         // default size should be restored from local storage if possible.
         let defaultSizes = undefined;
@@ -401,10 +395,20 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         if (defaultSizes != null) setSizes(defaultSizes);
         else {
             const panelsArray1 = (0, $d520236daad9c5d5$export$a861c0ad45885494)(panels);
-            const totalWeight = panelsArray1.reduce((weight, panel)=>{
-                return weight + panel.defaultSize;
-            }, 0);
-            setSizes(panelsArray1.map((panel)=>panel.defaultSize / totalWeight));
+            let panelsWithNullDefaultSize = 0;
+            let totalDefaultSize = 0;
+            let totalMinSize = 0;
+            panelsArray1.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)=>{
+                if (panel.defaultSize === null) return (100 - totalDefaultSize) / panelsWithNullDefaultSize;
+                return panel.defaultSize;
+            }));
         }
     }, [
         autoSaveId,
@@ -424,27 +428,13 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
     ]);
     const getPanelStyle = (0, $b2QPe$react.useCallback)((id)=>{
         const { panels: panels  } = committedValuesRef.current;
-        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",
-            left: offset,
-            top: 0,
-            width: size
-        };
-        else return {
-            height: size,
-            position: "absolute",
-            left: 0,
-            top: offset,
-            width: "100%"
+        const size = (0, $d520236daad9c5d5$export$6f43503e166de6fb)(panels, id, sizes);
+        return {
+            flexGrow: size
         };
     }, [
         direction,
-        height,
-        sizes,
-        width
+        sizes
     ]);
     const registerPanel = (0, $b2QPe$react.useCallback)((id, panel)=>{
         setPanels((prevPanels)=>{
@@ -457,16 +447,17 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
     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 { direction: direction , panels: panels , sizes: prevSizes  } = committedValuesRef.current;
             const panelsArray = (0, $d520236daad9c5d5$export$a861c0ad45885494)(panels);
             const [idBefore, idAfter] = (0, $d520236daad9c5d5$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
             if (idBefore == null || idAfter == null) return;
-            const movement = (0, $f5af57c8e042a4ad$export$354b17c0684607ed)(event, handleId, {
-                height: height,
-                width: width
-            }, direction, dragOffsetRef.current);
+            const movement = (0, $f5af57c8e042a4ad$export$354b17c0684607ed)(event, groupId, handleId, direction, dragOffsetRef.current);
+            if (movement === 0) return;
+            const groupElement = (0, $d520236daad9c5d5$export$5e67632cf3550a9c)(groupId);
+            const rect = groupElement.getBoundingClientRect();
             const isHorizontal = direction === "horizontal";
-            const delta = isHorizontal ? movement / width : movement / height;
+            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);
         };
@@ -482,7 +473,8 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             return nextPanels;
         });
     }, []);
-    const panelGroupContext = (0, $b2QPe$react.useMemo)(()=>({
+    const context = (0, $b2QPe$react.useMemo)(()=>({
+            activeHandleId: activeHandleId,
             direction: direction,
             getPanelStyle: getPanelStyle,
             groupId: groupId,
@@ -497,6 +489,7 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             },
             unregisterPanel: unregisterPanel
         }), [
+        activeHandleId,
         direction,
         getPanelStyle,
         groupId,
@@ -504,25 +497,19 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         registerResizeHandle,
         unregisterPanel
     ]);
-    const panelContext = (0, $b2QPe$react.useMemo)(()=>({
-            activeHandleId: activeHandleId
-        }), [
-        activeHandleId
-    ]);
-    return /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)((0, $3251d17c1c3bce6c$export$f34532ac99e32150).Provider, {
-        value: panelContext,
-        children: /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a).Provider, {
-            value: panelGroupContext,
-            children: /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)("div", {
-                className: className,
-                "data-panel-group-id": groupId,
-                style: {
-                    height: height,
-                    position: "relative",
-                    width: width
-                },
-                children: children
-            })
+    const style = {
+        display: "flex",
+        flexDirection: direction === "horizontal" ? "row" : "column",
+        height: "100%",
+        width: "100%"
+    };
+    return /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a).Provider, {
+        value: context,
+        children: /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)("div", {
+            className: className,
+            "data-panel-group-id": groupId,
+            style: style,
+            children: children
         })
     });
 }
@@ -535,13 +522,12 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
 
 function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false , id: idFromProps = null  }) {
     const divElementRef = (0, $b2QPe$react.useRef)(null);
-    const panelContext = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$f34532ac99e32150));
     const panelGroupContext = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
-    if (panelContext === null || panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
-    const { activeHandleId: activeHandleId  } = panelContext;
-    const { direction: direction , groupId: groupId , registerResizeHandle: registerResizeHandle , startDragging: startDragging , stopDragging: stopDragging  } = panelGroupContext;
+    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, $6d548a0d130941e3$export$2e2bcd8739ae039)(idFromProps);
     const isDragging = activeHandleId === resizeHandleId;
+    const [isFocused, setIsFocused] = (0, $b2QPe$react.useState)(false);
     const [resizeHandler, setResizeHandler] = (0, $b2QPe$react.useState)(null);
     const stopDraggingAndBlur = (0, $b2QPe$react.useCallback)(()=>{
         // Clicking on the drag handle shouldn't leave it focused;
@@ -596,9 +582,12 @@ function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null ,
     });
     return /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)("div", {
         className: className,
+        "data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
         "data-panel-group-id": groupId,
         "data-panel-resize-handle-enabled": !disabled,
         "data-panel-resize-handle-id": resizeHandleId,
+        onBlur: ()=>setIsFocused(false),
+        onFocus: ()=>setIsFocused(true),
         onMouseDown: (event)=>startDragging(resizeHandleId, event.nativeEvent),
         onMouseUp: stopDraggingAndBlur,
         onTouchCancel: stopDraggingAndBlur,