react-resizable-panels 0.0.53 → 0.0.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",
@@ -18,10 +18,30 @@
         "default": "./dist/react-resizable-panels.cjs.js"
       },
       "development": {
+        "browser": {
+          "module": "./dist/react-resizable-panels.browser.development.esm.js",
+          "import": "./dist/react-resizable-panels.browser.development.cjs.mjs",
+          "default": "./dist/react-resizable-panels.browser.development.cjs.js"
+        },
+        "node": {
+          "module": "./dist/react-resizable-panels.development.node.esm.js",
+          "import": "./dist/react-resizable-panels.development.node.cjs.mjs",
+          "default": "./dist/react-resizable-panels.development.node.cjs.js"
+        },
         "module": "./dist/react-resizable-panels.development.esm.js",
         "import": "./dist/react-resizable-panels.development.cjs.mjs",
         "default": "./dist/react-resizable-panels.development.cjs.js"
       },
+      "browser": {
+        "module": "./dist/react-resizable-panels.browser.esm.js",
+        "import": "./dist/react-resizable-panels.browser.cjs.mjs",
+        "default": "./dist/react-resizable-panels.browser.cjs.js"
+      },
+      "node": {
+        "module": "./dist/react-resizable-panels.node.esm.js",
+        "import": "./dist/react-resizable-panels.node.cjs.mjs",
+        "default": "./dist/react-resizable-panels.node.cjs.js"
+      },
       "module": "./dist/react-resizable-panels.esm.js",
       "import": "./dist/react-resizable-panels.cjs.mjs",
       "default": "./dist/react-resizable-panels.cjs.js"
@@ -32,6 +52,11 @@
     "#is-development": {
       "development": "./src/env-conditions/development.ts",
       "default": "./src/env-conditions/production.ts"
+    },
+    "#is-browser": {
+      "browser": "./src/env-conditions/browser.ts",
+      "node": "./src/env-conditions/node.ts",
+      "default": "./src/env-conditions/unknown.ts"
     }
   },
   "types": "dist/react-resizable-panels.cjs.d.ts",

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,13 +113,15 @@ function PanelWithForwardedRef({
   }>({
     size: parseSizeFromStyle(style),
   });
+
   const panelDataRef = useRef<{
     callbacksRef: PanelCallbackRef;
     collapsedSize: number;
     collapsible: boolean;
     defaultSize: number | null;
     id: string;
-    maxSize: number;
+    idWasAutoGenerated: boolean;
+    maxSize: number | null;
     minSize: number;
     order: number | null;
   }>({
@@ -134,10 +130,12 @@ function PanelWithForwardedRef({
     collapsible,
     defaultSize,
     id: panelId,
+    idWasAutoGenerated: idFromProps == null,
     maxSize,
     minSize,
     order,
   });
+
   useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.size = parseSizeFromStyle(style);
 
@@ -146,8 +144,9 @@ function PanelWithForwardedRef({
     panelDataRef.current.collapsible = collapsible;
     panelDataRef.current.defaultSize = defaultSize;
     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;
   });
 
@@ -167,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, {
@@ -195,11 +198,8 @@ export const Panel = forwardRef<ImperativePanelHandle, PanelProps>(
     createElement(PanelWithForwardedRef, { ...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
-(PanelWithForwardedRef as any).displayName = "Panel";
-(Panel as any).displayName = "forwardRef(Panel)";
+PanelWithForwardedRef.displayName = "Panel";
+Panel.displayName = "forwardRef(Panel)";
 
 // HACK
 function parseSizeFromStyle(style: CSSProperties): number {

package/src/PanelContexts.ts

@@ -1,23 +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);
 
-// 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
-(PanelGroupContext as any).displayName = "PanelGroupContext";
+PanelGroupContext.displayName = "PanelGroupContext";