react-resizable-panels 0.0.53 → 0.0.55

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 0.0.55
+* New `units` prop added to `PanelGroup` to support pixel-based panel size constraints.
+
+This prop defaults to "percentage" but can be set to "pixels" for static, pixel based layout constraints.
+
+This can be used to add enable pixel-based min/max and default size values, e.g.:
+```tsx
+ <PanelGroup direction="horizontal" units="pixels">
+   {/* Will be constrained to 100-200 pixels (assuming group is large enough to permit this) */}
+   <Panel minSize={100} maxSize={200} />
+   <PanelResizeHandle />
+   <Panel />
+   <PanelResizeHandle />
+   <Panel />
+ </PanelGroup>
+```
+
+Imperative API methods are also able to work with either pixels or percentages now. They default to whatever units the group has been configured to use, but can be overridden with an additional, optional parameter, e.g.
+```ts
+panelRef.resize(100, "pixels");
+panelGroupRef.setLayout([25, 50, 25], "percentages");
+
+// Works for getters too, e.g.
+const percentage = panelRef.getSize("percentages");
+const pixels = panelRef.getSize("pixels");
+
+const layout = panelGroupRef.getLayout("pixels");
+```
+
+## 0.0.54
+* [172](https://github.com/bvaughn/react-resizable-panels/issues/172): Development warning added to `PanelGroup` for conditionally-rendered `Panel`(s) that don't have `id` and `order` props
+* [156](https://github.com/bvaughn/react-resizable-panels/pull/156): Package exports now used to select between node (server-rendering) and browser (client-rendering) bundles
+
 ## 0.0.53
 * Fix edge case race condition for `onResize` callbacks during initial mount
 

package/dist/declarations/src/Panel.d.ts

@@ -1,5 +1,5 @@
-import { CSSProperties, ElementType, ReactNode } from "./vendor/react";
-import { PanelOnCollapse, PanelOnResize } from "./types";
+import { CSSProperties, ElementType, ReactNode } from "./vendor/react.js";
+import { PanelOnCollapse, PanelOnResize, Units } from "./types.js";
 export type PanelProps = {
     children?: ReactNode;
     className?: string;
@@ -7,7 +7,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;
@@ -19,7 +19,8 @@ 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;
 };
 export declare const Panel: import("react").ForwardRefExoticComponent<PanelProps & import("react").RefAttributes<ImperativePanelHandle>>;

package/dist/declarations/src/PanelGroup.d.ts

@@ -1,9 +1,11 @@
-import { CSSProperties, ElementType, ReactNode } from "./vendor/react";
-import { Direction, PanelData, PanelGroupOnLayout, PanelGroupStorage } from "./types";
+import { CSSProperties, ElementType, ReactNode } from "./vendor/react.js";
+import { Direction, PanelData, PanelGroupOnLayout, PanelGroupStorage, Units } from "./types.js";
 export type CommittedValues = {
     direction: Direction;
+    id: string;
     panels: Map<string, PanelData>;
     sizes: number[];
+    units: Units;
 };
 export type PanelDataMap = Map<string, PanelData>;
 export type InitialDragState = {
@@ -22,9 +24,11 @@ export type PanelGroupProps = {
     storage?: PanelGroupStorage;
     style?: CSSProperties;
     tagName?: ElementType;
+    units?: Units;
 };
 export type ImperativePanelGroupHandle = {
-    getLayout: () => number[];
-    setLayout: (panelSizes: number[]) => void;
+    getId: () => string;
+    getLayout: (units?: Units) => number[];
+    setLayout: (panelSizes: number[], units?: Units) => void;
 };
 export declare const PanelGroup: import("react").ForwardRefExoticComponent<PanelGroupProps & import("react").RefAttributes<ImperativePanelGroupHandle>>;

package/dist/declarations/src/PanelResizeHandle.d.ts

@@ -1,5 +1,5 @@
-import { CSSProperties, ElementType, ReactNode } from "./vendor/react";
-import type { PanelResizeHandleOnDragging } from "./types";
+import { CSSProperties, ElementType, ReactNode } from "./vendor/react.js";
+import type { PanelResizeHandleOnDragging } from "./types.js";
 export type PanelResizeHandleProps = {
     children?: ReactNode;
     className?: string;
@@ -10,3 +10,6 @@ export type PanelResizeHandleProps = {
     tagName?: ElementType;
 };
 export declare function PanelResizeHandle({ children, className: classNameFromProps, disabled, id: idFromProps, onDragging, style: styleFromProps, tagName: Type, }: PanelResizeHandleProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare namespace PanelResizeHandle {
+    var displayName: string;
+}

package/dist/declarations/src/index.d.ts

@@ -1,8 +1,9 @@
-import { Panel } from "./Panel";
-import { PanelGroup } from "./PanelGroup";
-import { PanelResizeHandle } from "./PanelResizeHandle";
-import type { ImperativePanelHandle, PanelProps } from "./Panel";
-import type { ImperativePanelGroupHandle, PanelGroupProps } from "./PanelGroup";
-import type { PanelResizeHandleProps } from "./PanelResizeHandle";
-import type { PanelGroupOnLayout, PanelGroupStorage, PanelOnCollapse, PanelOnResize, PanelResizeHandleOnDragging } from "./types";
-export { ImperativePanelGroupHandle, ImperativePanelHandle, Panel, PanelOnCollapse, PanelOnResize, PanelGroup, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelProps, PanelResizeHandle, PanelResizeHandleOnDragging, PanelResizeHandleProps, };
+import { Panel } from "./Panel.js";
+import { PanelGroup } from "./PanelGroup.js";
+import { PanelResizeHandle } from "./PanelResizeHandle.js";
+import type { ImperativePanelHandle, PanelProps } from "./Panel.js";
+import type { ImperativePanelGroupHandle, PanelGroupProps } from "./PanelGroup.js";
+import type { PanelResizeHandleProps } from "./PanelResizeHandle.js";
+import { getAvailableGroupSizePixels } from "./utils/group.js";
+import type { PanelGroupOnLayout, PanelGroupStorage, PanelOnCollapse, PanelOnResize, PanelResizeHandleOnDragging, Units } from "./types.js";
+export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelOnCollapse, PanelOnResize, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, Units, Panel, PanelGroup, PanelResizeHandle, getAvailableGroupSizePixels, };

package/dist/declarations/src/types.d.ts

@@ -1,5 +1,6 @@
-import { RefObject } from "./vendor/react";
+import { RefObject } from "./vendor/react.js";
 export type Direction = "horizontal" | "vertical";
+export type Units = "percentages" | "pixels";
 export type PanelGroupStorage = {
     getItem(name: string): string | null;
     setItem(name: string, value: string): void;
@@ -19,7 +20,8 @@ export type PanelData = {
         collapsible: boolean;
         defaultSize: number | null;
         id: string;
-        maxSize: number;
+        idWasAutoGenerated: boolean;
+        maxSize: number | null;
         minSize: number;
         order: number | null;
     };

package/dist/declarations/src/utils/group.d.ts

@@ -0,0 +1,29 @@
+import { CommittedValues, InitialDragState } from "../PanelGroup.js";
+import { PanelData, ResizeEvent, Units } from "../types.js";
+export declare function adjustByDelta(event: ResizeEvent | null, committedValues: CommittedValues, idBefore: string, idAfter: string, deltaPixels: number, prevSizes: number[], panelSizeBeforeCollapse: Map<string, number>, initialDragState: InitialDragState | null): number[];
+export declare function callPanelCallbacks(panelsArray: PanelData[], sizes: number[], panelIdToLastNotifiedSizeMap: Record<string, number>): void;
+export declare function calculateDefaultLayout({ groupId, panels, units, }: {
+    groupId: string;
+    panels: Map<string, PanelData>;
+    units: Units;
+}): number[];
+export declare function getBeforeAndAfterIds(id: string, panelsArray: PanelData[]): [idBefore: string | null, idAFter: string | null];
+export declare function getAvailableGroupSizePixels(groupId: string): number;
+export declare function getFlexGrow(panels: Map<string, PanelData>, id: string, sizes: number[]): string;
+export declare function getPanel(id: string): HTMLDivElement | null;
+export declare function getPanelGroup(id: string): HTMLDivElement | null;
+export declare function getResizeHandle(id: string): HTMLDivElement | null;
+export declare function getResizeHandleIndex(id: string): number | null;
+export declare function getResizeHandles(): HTMLDivElement[];
+export declare function getResizeHandlesForGroup(groupId: string): HTMLDivElement[];
+export declare function getResizeHandlePanelIds(groupId: string, handleId: string, panelsArray: PanelData[]): [idBefore: string | null, idAfter: string | null];
+export declare function panelsMapToSortedArray(panels: Map<string, PanelData>): PanelData[];
+export declare function safeResizePanel(units: Units, groupSizePixels: number, panel: PanelData, prevSize: number, nextSize: number, event?: ResizeEvent | null): number;
+export declare function validatePanelProps(units: Units, panelData: PanelData): void;
+export declare function validatePanelGroupLayout({ groupId, panels, nextSizes, prevSizes, units, }: {
+    groupId: string;
+    panels: Map<string, PanelData>;
+    nextSizes: number[];
+    prevSizes: number[];
+    units: Units;
+}): number[];