react-resizable-panels 0.0.54 → 0.0.55

package/src/Panel.ts

@@ -19,7 +19,9 @@ import {
   PanelData,
   PanelOnCollapse,
   PanelOnResize,
+  Units,
 } from "./types";
+import { getAvailableGroupSizePixels } from "./utils/group";
 
 export type PanelProps = {
   children?: ReactNode;
@@ -28,7 +30,7 @@ export type PanelProps = {
   collapsible?: boolean;
   defaultSize?: number | null;
   id?: string | null;
-  maxSize?: number;
+  maxSize?: number | null;
   minSize?: number;
   onCollapse?: PanelOnCollapse | null;
   onResize?: PanelOnResize | null;
@@ -41,8 +43,9 @@ export type ImperativePanelHandle = {
   collapse: () => void;
   expand: () => void;
   getCollapsed(): boolean;
-  getSize(): number;
-  resize: (percentage: number) => void;
+  getId(): string;
+  getSize(units?: Units): number;
+  resize: (percentage: number, units?: Units) => void;
 };
 
 function PanelWithForwardedRef({
@@ -53,8 +56,8 @@ function PanelWithForwardedRef({
   defaultSize = null,
   forwardedRef,
   id: idFromProps = null,
-  maxSize = 100,
-  minSize = 10,
+  maxSize = null,
+  minSize,
   onCollapse = null,
   onResize = null,
   order = null,
@@ -75,12 +78,24 @@ function PanelWithForwardedRef({
   const {
     collapsePanel,
     expandPanel,
+    getPanelSize,
     getPanelStyle,
     registerPanel,
     resizePanel,
+    units,
     unregisterPanel,
   } = context;
 
+  if (minSize == null) {
+    if (units === "percentages") {
+      // Mimics legacy default value for percentage based panel groups
+      minSize = 10;
+    } else {
+      // There is no meaningful minimum pixel default we can provide
+      minSize = 0;
+    }
+  }
+
   // Use a ref to guard against users passing inline props
   const callbacksRef = useRef<{
     onCollapse: PanelOnCollapse | null;
@@ -91,27 +106,6 @@ function PanelWithForwardedRef({
     callbacksRef.current.onResize = onResize;
   });
 
-  // Basic props validation
-  if (minSize < 0 || minSize > 100) {
-    throw Error(`Panel minSize must be between 0 and 100, but was ${minSize}`);
-  } else if (maxSize < 0 || maxSize > 100) {
-    throw Error(`Panel maxSize must be between 0 and 100, but was ${maxSize}`);
-  } else {
-    if (defaultSize !== null) {
-      if (defaultSize < 0 || defaultSize > 100) {
-        throw Error(
-          `Panel defaultSize must be between 0 and 100, but was ${defaultSize}`
-        );
-      } else if (minSize > defaultSize && !collapsible) {
-        console.error(
-          `Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`
-        );
-
-        defaultSize = minSize;
-      }
-    }
-  }
-
   const style = getPanelStyle(panelId, defaultSize);
 
   const committedValuesRef = useRef<{
@@ -119,6 +113,7 @@ function PanelWithForwardedRef({
   }>({
     size: parseSizeFromStyle(style),
   });
+
   const panelDataRef = useRef<{
     callbacksRef: PanelCallbackRef;
     collapsedSize: number;
@@ -126,7 +121,7 @@ function PanelWithForwardedRef({
     defaultSize: number | null;
     id: string;
     idWasAutoGenerated: boolean;
-    maxSize: number;
+    maxSize: number | null;
     minSize: number;
     order: number | null;
   }>({
@@ -140,6 +135,7 @@ function PanelWithForwardedRef({
     minSize,
     order,
   });
+
   useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.size = parseSizeFromStyle(style);
 
@@ -150,7 +146,7 @@ function PanelWithForwardedRef({
     panelDataRef.current.id = panelId;
     panelDataRef.current.idWasAutoGenerated = idFromProps == null;
     panelDataRef.current.maxSize = maxSize;
-    panelDataRef.current.minSize = minSize;
+    panelDataRef.current.minSize = minSize as number;
     panelDataRef.current.order = order;
   });
 
@@ -170,12 +166,16 @@ function PanelWithForwardedRef({
       getCollapsed() {
         return committedValuesRef.current.size === 0;
       },
-      getSize() {
-        return committedValuesRef.current.size;
+      getId() {
+        return panelId;
+      },
+      getSize(units) {
+        return getPanelSize(panelId, units);
       },
-      resize: (percentage: number) => resizePanel(panelId, percentage),
+      resize: (percentage: number, units) =>
+        resizePanel(panelId, percentage, units),
     }),
-    [collapsePanel, expandPanel, panelId, resizePanel]
+    [collapsePanel, expandPanel, getPanelSize, panelId, resizePanel]
   );
 
   return createElement(Type, {

package/src/PanelContexts.ts

@@ -1,20 +1,22 @@
 import { CSSProperties, createContext } from "./vendor/react";
 
-import { PanelData, ResizeEvent, ResizeHandler } from "./types";
+import { PanelData, ResizeEvent, ResizeHandler, Units } from "./types";
 
 export const PanelGroupContext = createContext<{
   activeHandleId: string | null;
   collapsePanel: (id: string) => void;
   direction: "horizontal" | "vertical";
   expandPanel: (id: string) => void;
+  getPanelSize: (id: string, units?: Units) => number;
   getPanelStyle: (id: string, defaultSize: number | null) => CSSProperties;
   groupId: string;
   registerPanel: (id: string, panel: PanelData) => void;
   registerResizeHandle: (id: string) => ResizeHandler;
-  resizePanel: (id: string, percentage: number) => void;
+  resizePanel: (id: string, percentage: number, units?: Units) => void;
   startDragging: (id: string, event: ResizeEvent) => void;
   stopDragging: () => void;
   unregisterPanel: (id: string) => void;
+  units: Units;
 } | null>(null);
 
 PanelGroupContext.displayName = "PanelGroupContext";