import type * as React from 'react'; import type { PrimitivePropsWithRef } from '../utils/primitive.cjs'; /** @internal Per-panel size constraints registered with {@link ResizablePanelGroup}. */ export interface PanelConfig { defaultSize?: number | undefined; minSize: number; maxSize: number; collapsible?: boolean | undefined; collapsedSize?: number | undefined; } /** @internal Current panel order and computed sizes (percentages), owned by {@link ResizablePanelGroup}. */ export interface ResizableLayout { order: string[]; sizes: number[]; } /** @internal Shared state distributed from {@link ResizablePanelGroup} to its parts via context. */ export interface ResizableContextValue { orientation: 'horizontal' | 'vertical'; groupRef: React.RefObject; order: string[]; sizes: number[]; registerPanel: (id: string, config: PanelConfig) => void; /** Drops an unmounted panel and re-seeds the survivors, so handle indices stay true. */ unregisterPanel: (id: string) => void; registerHandle: () => number; /** A handle's index resolved from its DOM position, with the registration counter as the server-render fallback. */ resolveHandleIndex: (handle: Element, fallback: number) => number; resizePanels: (handleIndex: number, deltaPercent: number) => void; commitLayout: () => void; getPanelConfig: (index: number) => PanelConfig | undefined; /** Group-level percentage-points-per-Arrow-key default; a Handle's own `step` overrides it. */ step: number; /** Current sizes as percentages, in Panel order. The read half of the layout API. */ getSizes: () => number[]; /** Drives the layout to `sizes` (percentages, Panel order), clamped per panel and renormalised to 100. */ setSizes: (sizes: number[]) => void; /** Returns every panel to the size its `defaultSize` — or the even split — implies. */ resetSizes: () => void; } /** Props for the {@link ResizablePanelGroup} root. */ export interface ResizablePanelGroupProps extends Omit, 'onLayout'> { /** * Layout axis; selects flex direction, arrow keys, cursor, and Handle's `aria-orientation`. * @default 'horizontal' */ orientation?: 'horizontal' | 'vertical' | undefined; /** * Controlled panel sizes (percentages, in Panel order); supply to externalize layout state. * @default undefined — the group owns its sizes. */ sizes?: number[] | undefined; /** * Percentage points per Arrow key press, as a group-level default; a Handle's own `step` overrides it. * @default 2 */ step?: number | undefined; /** * Fires whenever panel sizes change, with the full sizes array; continuous during a drag. * @default undefined — no-op if omitted. */ onLayout?: ((sizes: number[]) => void) | undefined; /** * Fires once a layout change finishes (pointer release or keyboard), with the full sizes array. * @default undefined — no-op if omitted. */ onLayoutCommit?: ((sizes: number[]) => void) | undefined; /** * Fires once when a `collapsible` Panel reaches its `collapsedSize`, with the id of the panel that closed. * @default undefined — no-op if omitted. */ onCollapse?: ((detail: { panelId: string; }) => void) | undefined; /** * Fires when a collapsed Panel reopens, with the id of the panel that opened. * @default undefined — no-op if omitted. */ onExpand?: ((detail: { panelId: string; }) => void) | undefined; /** * Panels to derive with alternating Handles; ignored when `children` is given. * @default undefined — nothing is derived; compose `ResizablePanel`s (and `ResizableHandle`s) as `children`. */ panels?: readonly ResizablePanelConfig[] | undefined; /** * Size rung the skin scales the handles by, mirrored to `data-size`. * @default undefined — the skin's own default size. */ size?: 'sm' | 'lg' | (string & {}) | undefined; } /** One entry of {@link ResizablePanelGroupProps.panels} — a derived {@link ResizablePanel}'s config plus its body. */ export interface ResizablePanelConfig { /** Stable identifier used to track this panel's size across renders. */ id?: string | undefined; /** Initial size as a percentage (0-100). */ defaultSize?: number | undefined; /** Minimum size as a percentage (0-100). */ minSize?: number | undefined; /** Maximum size as a percentage (0-100). */ maxSize?: number | undefined; /** Lets this panel close entirely — see {@link ResizablePanelProps.collapsible}. */ collapsible?: boolean | undefined; /** The size, as a percentage, a `collapsible` panel takes while closed. */ collapsedSize?: number | undefined; /** The derived panel's body. */ content?: React.ReactNode | undefined; } /** Props for a single {@link ResizablePanel}. */ export interface ResizablePanelProps extends PrimitivePropsWithRef<'div'> { /** * Initial size as a percentage (0-100). Omit to split remaining space evenly with other auto-sized panels. * @default undefined — split remaining space evenly with other auto-sized panels. * @min 0 * @max 100 */ defaultSize?: number | undefined; /** * Minimum size as a percentage (0-100); the group won't shrink this panel * past it when an adjacent handle is dragged. * @default 10 * @min 0 * @max 100 */ minSize?: number | undefined; /** * Maximum size as a percentage (0-100); the group won't grow this panel * past it when an adjacent handle is dragged. * @default 90 * @min 0 * @max 100 */ maxSize?: number | undefined; /** * Allows the panel to close entirely; a resize below `minSize` snaps to `collapsedSize`. * @default false */ collapsible?: boolean | undefined; /** * The size, as a percentage, a `collapsible` panel takes while closed; carries `data-collapsed` there. * @default 0 * @min 0 * @max 100 */ collapsedSize?: number | undefined; /** * Stable identifier used to track this panel's size across renders; auto-generated if omitted. * @default undefined — an id is auto-generated. */ id?: string | undefined; } /** Props for a {@link ResizableHandle} between two panels. */ export interface ResizableHandleProps extends PrimitivePropsWithRef<'div'> { /** * Disables dragging and keyboard resizing on this handle. * @default false */ disabled?: boolean | undefined; /** * Percentage points nudged per Arrow key press, overriding the group's own * `step` for this one Handle. The unit is percentage points, not pixels. * @default undefined — inherits the group's `step` (2). */ step?: number | undefined; }