import type { ComponentPropsWithoutRef, ReactNode, Ref } from 'react'; import type { ResizablePanelProps } from '../../split-layout/slots.js'; import type { PanelWidth } from '../../split-layout/width-utils.js'; import type { CollapsiblePanel } from '../shared/panel-state/collapsible.js'; import { type DetailsControlBarProps } from './DetailsControlBar.js'; import type { LayoutMode } from './DetailsRegionContext.js'; export type { DetailsControlBarProps }; /** @public */ export interface DetailsProps extends Omit, CollapsiblePanel { /** * The minimum width of the details panel, applied in both split and overlay * layouts. Accepts a pixel value or a percentage string. * @defaultValue 320 */ minWidth?: PanelWidth; /** * The maximum width of the details panel, applied in both split and overlay * layouts. Accepts a pixel value or a percentage string. The container edge is * always the hard ceiling. Unset by default: in split the panel is bounded by * the content keeping ~half the width, and in overlay only by the container. * In split mode, the effective maximum is also constrained by * `PageLayout.Content`'s `minWidth` (default `'50%'`); to allow a wider * details panel in split mode, lower `PageLayout.Content`'s `minWidth` * accordingly. */ maxWidth?: PanelWidth; /** * The initial width of the details panel. Accepts a pixel value or a percentage string. * @defaultValue '25%' */ defaultWidth?: PanelWidth; /** * Controlled width of the details panel. Accepts a pixel value or a * percentage string and is clamped to fit the current layout mode * (`minWidth`/`maxWidth`, always bounded by the available container width). * Pair with `onResize` to follow drag-resizing; when omitted the panel * manages its own width starting from `defaultWidth`. */ width?: PanelWidth; /** The current layout mode of the details panel (controlled). */ layout?: LayoutMode; /** * Default layout mode of the details panel (uncontrolled). * @defaultValue 'split' */ defaultLayout?: LayoutMode; /** Fired when the layout mode changes or should change. */ onLayoutChange?: (value: LayoutMode) => void; /** * Container width in pixels below which the details panel renders as a * drawer. Unlike the sidebar, the details panel never collapses itself here: * the drawer stays open until it is dismissed. * @defaultValue 600 */ breakpoint?: number; } /** @internal */ export interface ExtractedDetailsSlot { children?: ReactNode; config: { minWidth: PanelWidth; maxWidth?: PanelWidth; defaultWidth: PanelWidth; resizable: boolean; collapsed?: boolean; defaultCollapsed: boolean; onCollapsedChange?: (value: boolean) => void; onBreakpointTransition?: (value: boolean) => void; layout?: LayoutMode; defaultLayout: LayoutMode; onLayoutChange?: (value: LayoutMode) => void; breakpoint: number; onResize?: (value: number) => void; width?: PanelWidth; label?: string; }; domProps: ComponentPropsWithoutRef<'div'>; ref?: Ref; } //# sourceMappingURL=slots.d.ts.map