react-resizable-panels 0.0.62 → 1.0.0-rc.1

package/.eslintrc.cjs

@@ -9,6 +9,7 @@ module.exports = {
   plugins: ["@typescript-eslint", "no-restricted-imports", "react-hooks"],
   root: true,
   rules: {
+    "@typescript-eslint/no-non-null-assertion": "error",
     "no-restricted-imports": [
       "error",
       {

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 1.0.0-rc.1
+
+- Remove support for pixel-based Panel constraints; props like `defaultSizePercentage` should now be `defaultSize`
+- Replaced `dataAttributes` prop with `...rest` prop that supports all HTML attributes
+
+## 0.0.63
+
+- Change default (not-yet-registered) Panel flex-grow style from 0 to 1
+
 ## 0.0.62
 
 - Edge case expand/collapse invalid size guard (#220)

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

@@ -1,23 +1,18 @@
-import { DataAttributes, MixedSizes } from "./types.js";
-import { ElementType, ForwardedRef, PropsWithChildren } from "./vendor/react.js";
+import { ElementType, ForwardedRef, HTMLAttributes, PropsWithChildren } from "./vendor/react.js";
 export type PanelOnCollapse = () => void;
 export type PanelOnExpand = () => void;
-export type PanelOnResize = (mixedSizes: MixedSizes, prevMixedSizes: MixedSizes | undefined) => void;
+export type PanelOnResize = (size: number, prevSize: number | undefined) => void;
 export type PanelCallbacks = {
     onCollapse?: PanelOnCollapse;
     onExpand?: PanelOnExpand;
     onResize?: PanelOnResize;
 };
 export type PanelConstraints = {
-    collapsedSizePercentage?: number | undefined;
-    collapsedSizePixels?: number | undefined;
+    collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
-    defaultSizePercentage?: number | undefined;
-    defaultSizePixels?: number | undefined;
-    maxSizePercentage?: number | undefined;
-    maxSizePixels?: number | undefined;
-    minSizePercentage?: number | undefined;
-    minSizePixels?: number | undefined;
+    defaultSize?: number | undefined;
+    maxSize?: number | undefined;
+    minSize?: number | undefined;
 };
 export type PanelData = {
     callbacks: PanelCallbacks;
@@ -30,24 +25,19 @@ export type ImperativePanelHandle = {
     collapse: () => void;
     expand: () => void;
     getId(): string;
-    getSize(): MixedSizes;
+    getSize(): number;
     isCollapsed: () => boolean;
     isExpanded: () => boolean;
-    resize: (size: Partial<MixedSizes>) => void;
+    resize: (size: number) => void;
 };
-export type PanelProps = PropsWithChildren<{
+export type PanelProps = Omit<HTMLAttributes<ElementType>, "id" | "onResize"> & PropsWithChildren<{
     className?: string;
-    collapsedSizePercentage?: number | undefined;
-    collapsedSizePixels?: number | undefined;
+    collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
-    dataAttributes?: DataAttributes;
-    defaultSizePercentage?: number | undefined;
-    defaultSizePixels?: number | undefined;
+    defaultSize?: number | undefined;
     id?: string;
-    maxSizePercentage?: number | undefined;
-    maxSizePixels?: number | undefined;
-    minSizePercentage?: number | undefined;
-    minSizePixels?: number | undefined;
+    maxSize?: number | undefined;
+    minSize?: number | undefined;
     onCollapse?: PanelOnCollapse;
     onExpand?: PanelOnExpand;
     onResize?: PanelOnResize;
@@ -55,25 +45,20 @@ export type PanelProps = PropsWithChildren<{
     style?: object;
     tagName?: ElementType;
 }>;
-export declare function PanelWithForwardedRef({ children, className: classNameFromProps, collapsedSizePercentage, collapsedSizePixels, collapsible, dataAttributes, defaultSizePercentage, defaultSizePixels, forwardedRef, id: idFromProps, maxSizePercentage, maxSizePixels, minSizePercentage, minSizePixels, onCollapse, onExpand, onResize, order, style: styleFromProps, tagName: Type, }: PanelProps & {
+export declare function PanelWithForwardedRef({ children, className: classNameFromProps, collapsedSize, collapsible, defaultSize, forwardedRef, id: idFromProps, maxSize, minSize, onCollapse, onExpand, onResize, order, style: styleFromProps, tagName: Type, ...rest }: PanelProps & {
     forwardedRef: ForwardedRef<ImperativePanelHandle>;
 }): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export declare namespace PanelWithForwardedRef {
     var displayName: string;
 }
-export declare const Panel: import("react").ForwardRefExoticComponent<{
+export declare const Panel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<ElementType>, "id" | "onResize"> & {
     className?: string | undefined;
-    collapsedSizePercentage?: number | undefined;
-    collapsedSizePixels?: number | undefined;
+    collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
-    dataAttributes?: DataAttributes | undefined;
-    defaultSizePercentage?: number | undefined;
-    defaultSizePixels?: number | undefined;
+    defaultSize?: number | undefined;
     id?: string | undefined;
-    maxSizePercentage?: number | undefined;
-    maxSizePixels?: number | undefined;
-    minSizePercentage?: number | undefined;
-    minSizePixels?: number | undefined;
+    maxSize?: number | undefined;
+    minSize?: number | undefined;
     onCollapse?: PanelOnCollapse | undefined;
     onExpand?: PanelOnExpand | undefined;
     onResize?: PanelOnResize | undefined;

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

@@ -1,36 +1,32 @@
-import { DataAttributes, Direction, MixedSizes } from "./types.js";
-import { CSSProperties, ElementType, PropsWithChildren } from "./vendor/react.js";
+import { Direction } from "./types.js";
+import { CSSProperties, ElementType, HTMLAttributes, PropsWithChildren } from "./vendor/react.js";
 export type ImperativePanelGroupHandle = {
     getId: () => string;
-    getLayout: () => MixedSizes[];
-    setLayout: (layout: Partial<MixedSizes>[]) => void;
+    getLayout: () => number[];
+    setLayout: (layout: number[]) => void;
 };
 export type PanelGroupStorage = {
     getItem(name: string): string | null;
     setItem(name: string, value: string): void;
 };
-export type PanelGroupOnLayout = (layout: MixedSizes[]) => void;
-export type PanelGroupProps = PropsWithChildren<{
+export type PanelGroupOnLayout = (layout: number[]) => void;
+export type PanelGroupProps = Omit<HTMLAttributes<ElementType>, "id"> & PropsWithChildren<{
     autoSaveId?: string | null;
     className?: string;
-    dataAttributes?: DataAttributes;
     direction: Direction;
     id?: string | null;
-    keyboardResizeByPercentage?: number | null;
-    keyboardResizeByPixels?: number | null;
+    keyboardResizeBy?: number | null;
     onLayout?: PanelGroupOnLayout | null;
     storage?: PanelGroupStorage;
     style?: CSSProperties;
     tagName?: ElementType;
 }>;
-export declare const PanelGroup: import("react").ForwardRefExoticComponent<{
+export declare const PanelGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<ElementType>, "id"> & {
     autoSaveId?: string | null | undefined;
     className?: string | undefined;
-    dataAttributes?: DataAttributes | undefined;
     direction: Direction;
     id?: string | null | undefined;
-    keyboardResizeByPercentage?: number | null | undefined;
-    keyboardResizeByPixels?: number | null | undefined;
+    keyboardResizeBy?: number | null | undefined;
     onLayout?: PanelGroupOnLayout | null | undefined;
     storage?: PanelGroupStorage | undefined;
     style?: CSSProperties | undefined;

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

@@ -1,17 +1,15 @@
-import { CSSProperties, ElementType, ReactNode } from "./vendor/react.js";
-import { DataAttributes } from "./types.js";
+import { CSSProperties, ElementType, HTMLAttributes, PropsWithChildren } from "./vendor/react.js";
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
-export type PanelResizeHandleProps = {
-    children?: ReactNode;
+export type PanelResizeHandleProps = Omit<HTMLAttributes<ElementType>, "id"> & PropsWithChildren<{
     className?: string;
-    dataAttributes?: DataAttributes;
     disabled?: boolean;
     id?: string | null;
     onDragging?: PanelResizeHandleOnDragging;
     style?: CSSProperties;
+    tabIndex?: number;
     tagName?: ElementType;
-};
-export declare function PanelResizeHandle({ children, className: classNameFromProps, dataAttributes, disabled, id: idFromProps, onDragging, style: styleFromProps, tagName: Type, }: PanelResizeHandleProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+}>;
+export declare function PanelResizeHandle({ children, className: classNameFromProps, disabled, id: idFromProps, onDragging, style: styleFromProps, tabIndex, tagName: Type, ...rest }: 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,8 @@
 import { Panel } from "./Panel.js";
 import { PanelGroup } from "./PanelGroup.js";
 import { PanelResizeHandle } from "./PanelResizeHandle.js";
-import type { MixedSizes } from "./types.js";
+import { assert } from "./utils/assert.js";
 import type { ImperativePanelHandle, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps } from "./Panel.js";
 import type { ImperativePanelGroupHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage } from "./PanelGroup.js";
 import type { PanelResizeHandleOnDragging, PanelResizeHandleProps } from "./PanelResizeHandle.js";
-export { ImperativePanelGroupHandle, ImperativePanelHandle, MixedSizes, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, Panel, PanelGroup, PanelResizeHandle, };
+export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, assert, Panel, PanelGroup, PanelResizeHandle, };

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

@@ -1,10 +1,3 @@
 export type Direction = "horizontal" | "vertical";
-export type MixedSizes = {
-    sizePercentage: number;
-    sizePixels: number;
-};
 export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
 export type ResizeHandler = (event: ResizeEvent) => void;
-export type DataAttributes = {
-    [attribute: string]: string | number | boolean | undefined;
-};

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

@@ -0,0 +1 @@
+export declare function assert(expectedCondition: any, message?: string): asserts expectedCondition;

package/dist/declarations/src/vendor/react.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { CSSProperties, ElementType, ForwardedRef, MouseEvent, PropsWithChildren, ReactNode, RefObject, TouchEvent } from "react";
+import type { CSSProperties, ElementType, ForwardedRef, HTMLAttributes, MouseEvent, PropsWithChildren, ReactNode, RefObject, TouchEvent } from "react";
 declare const createElement: typeof React.createElement, createContext: typeof React.createContext, createRef: typeof React.createRef, forwardRef: typeof React.forwardRef, useCallback: typeof React.useCallback, useContext: typeof React.useContext, useEffect: typeof React.useEffect, useImperativeHandle: typeof React.useImperativeHandle, useLayoutEffect: typeof React.useLayoutEffect, useMemo: typeof React.useMemo, useRef: typeof React.useRef, useState: typeof React.useState;
 declare const useId: () => string;
 export { createElement, createContext, createRef, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, };
-export type { CSSProperties, ElementType, ForwardedRef, MouseEvent, PropsWithChildren, ReactNode, RefObject, TouchEvent, };
+export type { CSSProperties, ElementType, ForwardedRef, HTMLAttributes, MouseEvent, PropsWithChildren, ReactNode, RefObject, TouchEvent, };