* ```
*
* ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing.
*
* ⚠️ Panel elements must be direct DOM children of their parent Group elements.
*/
declare function Panel({ children, className, collapsedSize, collapsedThreshold, collapsible, defaultSize, disabled, elementRef: elementRefProp, groupResizeBehavior, id: idProp, maxSize, minSize, onResize: onResizeUnstable, panelRef, style, ...rest }: PanelProps): JSX.Element;
declare namespace Panel {
var displayName: string;
}
/**
* Imperative Panel API
*
* ℹ️ The `usePanelRef` and `usePanelCallbackRef` hooks are exported for convenience use in TypeScript projects.
*/
declare interface PanelImperativeHandle {
/**
* Collapse the Panel to it's `collapsedSize`.
*
* ⚠️ This method will do nothing if the Panel is not `collapsible` or if it is already collapsed.
*/
collapse: () => void;
/**
* Expand a collapsed Panel to its most recent size.
*
* ⚠️ This method will do nothing if the Panel is not currently collapsed.
*/
expand: () => void;
/**
* Get the current size of the Panel in pixels as well as a percentage of the parent group (0..100).
*
* @return Panel size (in pixels and as a percentage of the parent group)
*/
getSize: () => {
asPercentage: number;
inPixels: number;
};
/**
* The Panel is currently collapsed.
*/
isCollapsed: () => boolean;
/**
* Update the Panel's size.
*
* Size can be in the following formats:
* - Percentage of the parent Group (0..100)
* - Pixels
* - Relative font units (em, rem)
* - Viewport relative units (vh, vw)
*
* ℹ️ Numeric values are assumed to be pixels.
* Strings without explicit units are assumed to be percentages (0%..100%).
* Percentages may also be specified as strings ending with "%" (e.g. "33%")
* Pixels may also be specified as strings ending with the unit "px".
* Other units should be specified as strings ending with their CSS property units (e.g. 1rem, 50vh)
*
* @param size New panel size
* @return Applied size (after validation)
*/
resize: (size: number | string) => void;
}
declare type PanelProps = BasePanelAttributes & {
/**
* CSS class name.
*
* ⚠️ Class is applied to nested `HTMLDivElement` to avoid styles that interfere with Flex layout.
*/
className?: string | undefined;
/**
* Panel size when collapsed; defaults to 0%.
*/
collapsedSize?: number | string | undefined;
/**
* Distance a collapsible panel must be resized past its `minSize` to collapse,
* or past its `collapsedSize` to expand.
* Defaults to half the distance between `collapsedSize` and `minSize`.
*
* For example if a panel declares `collapsedSize="5%"`, `collapsedThreshold="5%"`, and `minSize="25%"`,
* it will collapse when resized below 20% and expands when resized above 10%.
*
* ℹ️ Interpretation rules:
* - Numbers are interpreted as pixels (e.g. `minSize={200}` is 200 pixels)
* - Strings without explicit units are interpreted as percentage (e.g. `minSize="50"` is 50 percent)
* - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation
*/
collapsedThreshold?: number | string | undefined;
/**
* This panel can be collapsed.
*
* ℹ️ A collapsible panel will collapse when it's size is less than of the specified `minSize`
*/
collapsible?: boolean | undefined;
/**
* Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels.
*
* ℹ️ Interpretation rules:
* - Numbers are interpreted as pixels (e.g. `defaultSize={200}` is 200 pixels)
* - Strings without explicit units are interpreted as percentage (e.g. `defaultSize="50"` is 50 percent)
* - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation
*
* ⚠️ Percentage based sizes may cause slight layout shift when server-rendering.
* For more information see the documentation.
*/
defaultSize?: number | string | undefined;
/**
* When disabled, a panel cannot be resized either directly or indirectly (by resizing another panel).
*/
disabled?: boolean | undefined;
/**
* Ref attached to the root `HTMLDivElement`.
*/
elementRef?: Ref
| undefined;
/**
* How should this Panel behave if the parent Group is resized?
* Defaults to `preserve-relative-size`.
*
* - `preserve-relative-size`: Retain the current relative size (as a percentage of the Group)
* - `preserve-pixel-size`: Retain its current size (in pixels)
*
* ℹ️ Panel min/max size constraints may impact this behavior.
*
* ⚠️ A Group must contain at least one Panel with `preserve-relative-size` resize behavior.
*/
groupResizeBehavior?: "preserve-relative-size" | "preserve-pixel-size" | undefined;
/**
* Uniquely identifies this panel within the parent group.
* Falls back to `useId` when not provided.
*
* ℹ️ This prop is used to associate persisted group layouts with the original panel.
*
* ℹ️ This value will also be assigned to the `data-panel` attribute.
*/
id?: string | number | undefined;
/**
* Maximum size of Panel within its parent group; defaults to `"100%"`.
*
* ℹ️ Interpretation rules:
* - Numbers are interpreted as pixels (e.g. `maxSize={200}` is 200 pixels)
* - Strings without explicit units are interpreted as percentage (e.g. `maxSize="50"` is 50 percent)
* - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation
*/
maxSize?: number | string | undefined;
/**
* Minimum size of Panel within its parent group; defaults to 0%.
*
* ℹ️ Interpretation rules:
* - Numbers are interpreted as pixels (e.g. `minSize={200}` is 200 pixels)
* - Strings without explicit units are interpreted as percentage (e.g. `minSize="50"` is 50 percent)
* - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation
*/
minSize?: number | string | undefined;
/**
* Called when panel sizes change.
*
* @param panelSize Panel size (both as a percentage of the parent Group and in pixels)
* @param id Panel id (if one was provided as a prop)
* @param prevPanelSize Previous panel size (will be undefined on mount)
*/
onResize?: ((panelSize: PanelSize, id: string | number | undefined, prevPanelSize: PanelSize | undefined) => void) | undefined;
/**
* Exposes the following imperative API:
* - `collapse(): void`
* - `expand(): void`
* - `getSize(): number`
* - `isCollapsed(): boolean`
* - `resize(size: number): void`
*
* ℹ️ The `usePanelRef` and `usePanelCallbackRef` hooks are exported for convenience use in TypeScript projects.
*/
panelRef?: Ref | undefined;
/**
* CSS properties.
*
* ⚠️ The default inline styles cannot be overridden, except for [`overflow`](https://react-resizable-panels.vercel.app/examples/overflow).
*/
style?: CSSProperties | undefined;
};
declare type PanelSize = {
asPercentage: number;
inPixels: number;
};
declare type ResizePreviewMode = "panel" | "separator";
/**
* Separators are not _required_ but they are _recommended_ as they improve keyboard accessibility.
*
* ⚠️ Separator elements must be direct DOM children of their parent Group elements.
*
* Separator elements always include the following attributes:
*
* ```html
*
* ```
*
* ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing.
*
* ℹ️ In addition to the attributes shown above, separator also renders all required [WAI-ARIA properties](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/separator_role#associated_wai-aria_roles_states_and_properties).
*/
declare function Separator({ children, className, disabled, disableDoubleClick, elementRef: elementRefProp, id: idProp, preview, style, ...rest }: SeparatorProps): JSX.Element;
declare namespace Separator {
var displayName: string;
}
/**
* Customizes separator previews when resizePreviewMode is "separator".
* Render within a `Group` to style all overlay previews, or pass to an individual `Separator` to style its overlay preview.
*
* Use `data-separator-overlay="active"` to style the separator being dragged,
* or `data-separator-overlay="inactive"` for separators moved indirectly.
*
* Set `width` (horizontal groups) or `height` (vertical groups) using `style` or `className`.
*/
declare function SeparatorOverlay(props: SeparatorOverlayProps): null;
declare namespace SeparatorOverlay {
var displayName: string;
}
declare type SeparatorOverlayProps = HTMLAttributes
;
declare type SeparatorProps = BaseSeparatorAttributes & {
/**
* CSS class name.
*
* ℹ️ Use the `data-separator` attribute for custom _hover_ and _active_ styles
*
* ⚠️ The following properties cannot be overridden: `flex-grow`, `flex-shrink`
*/
className?: string | undefined;
/**
* When disabled, the separator cannot be used to resize its neighboring panels.
*
* ℹ️ The panels may still be resized indirectly (while other panels are being resized).
* To prevent a panel from being resized at all, it needs to also be disabled.
*/
disabled?: boolean | undefined;
/**
* When true, double-clicking this `Separator` will not reset its `Panel` to its default size.
*/
disableDoubleClick?: boolean;
/**
* Ref attached to the root `HTMLDivElement`.
*/
elementRef?: Ref | undefined;
/**
* Uniquely identifies the separator within the parent group.
* Falls back to `useId` when not provided.
*
* ℹ️ This value will also be assigned to the `data-separator` attribute.
*/
id?: string | number | undefined;
/**
* Overrides the `Group` default preview for this `Separator` when `resizePreviewMode` is "separator".
*/
preview?: ReactNode;
/**
* CSS properties.
*
* ℹ️ Use the `data-separator` attribute for custom _hover_ and _active_ styles
*
* ⚠️ The following properties cannot be overridden: `flex-grow`, `flex-shrink`
*/
style?: CSSProperties | undefined;
};
declare type SizeUnit = "px" | "%" | "em" | "rem" | "vh" | "vw";
/**
* Saves and restores group layouts between page loads.
* It can be configured to store values using `localStorage`, `sessionStorage`, cookies, or any other persistence layer that makes sense for your application.
*/
declare function useDefaultLayout({ debounceSaveMs, onlySaveAfterUserInteractions, panelIds, storage, ...rest }: {
/**
* Debounce save operation by the specified number of milliseconds; defaults to 100ms
*
* @deprecated Use the {@link onLayoutChanged} callback instead; it does not require debouncing
*/
debounceSaveMs?: number;
/**
* Only auto-save layouts that were directly caused by user input (e.g. keyboard or mouse events).
* Ignore layout changes resulting from imperative API calls or window resize events.
*/
onlySaveAfterUserInteractions?: boolean;
/**
* For Groups that contain conditionally-rendered Panels, this prop can be used to save and restore multiple layouts.
*
* ℹ️ This prevents layout shift for server-rendered apps.
*
* ⚠️ Panel ids must match the Panels rendered within the Group during mount or the initial layout will be incorrect.
*/
panelIds?: string[] | undefined;
/**
* Storage implementation; supports localStorage, sessionStorage, and custom implementations
* Refer to documentation site for example integrations.
*
*/
storage?: LayoutStorage;
} & ({
/**
* Group id; must be unique in order for layouts to be saved separately.
* @deprecated Use the {@link id} param instead
*/
groupId: string;
} | {
/**
* Uniquely identifies a specific group/layout.
*/
id: string;
})): {
/**
* Pass this value to `Group` as the `defaultLayout` prop.
*/
defaultLayout: Layout | undefined;
/**
* Attach this callback on the `Group` as the `onLayoutChange` prop.
*
* @deprecated Use the {@link onLayoutChanged} prop instead.
*/
onLayoutChange: (layout: Layout) => void | undefined;
/**
* Attach this callback on the `Group` as the `onLayoutChanged` prop.
*/
onLayoutChanged: (layout: Layout, meta: LayoutChangedMeta) => void;
};
/**
* Convenience hook to return a properly typed ref callback for the Group component.
*
* Use this hook when you need to share the ref with another component or hook.
*/
declare function useGroupCallbackRef(): [GroupImperativeHandle | null, Dispatch>];
/**
* Convenience hook to return a properly typed ref for the Group component.
*/
declare function useGroupRef(): RefObject;
/**
* Convenience hook to return a properly typed ref callback for the Panel component.
*
* Use this hook when you need to share the ref with another component or hook.
*/
declare function usePanelCallbackRef(): [PanelImperativeHandle | null, Dispatch>];
/**
* Convenience hook to return a properly typed ref for the Panel component.
*/
declare function usePanelRef(): RefObject;
export { Group, Panel, Separator, SeparatorOverlay, isCoarsePointer, useDefaultLayout, useGroupCallbackRef, useGroupRef, usePanelCallbackRef, usePanelRef };
export type { GroupImperativeHandle, GroupProps, Layout, LayoutChangedMeta, LayoutStorage, OnGroupLayoutChange, OnPanelResize, Orientation, PanelImperativeHandle, PanelProps, PanelSize, SeparatorOverlayProps, SeparatorProps, SizeUnit };