@gfazioli/mantine-split-pane/dist/types/Pane/SplitPane.d.ts

A Mantine 9 React component for resizable split pane layouts with 7 resizer variants, context-based prop inheritance, responsive orientation, and dynamic pane generation.

import { BoxProps, Factory, StylesApiProps } from '@mantine/core';
import React from 'react';
import { SplitResizerVariant } from '../Resizer/SplitResizer';
import type { ResponsiveValue } from '../types';
export type SplitPaneStylesNames = 'root';
export type SplitPaneVariant = SplitResizerVariant;
export type SplitPaneCssVariables = {};
/**
 * Imperative handlers exposed via ref on `Split.Pane`.
 * Access them through `ref.current` after attaching a ref to a pane.
 */
export interface SplitPaneHandlers {
    /** Reset the pane to its initial size (triggered on resizer double-click) */
    resetInitialSize?: (e: React.MouseEvent<HTMLButtonElement>) => void;
    /** Returns the minimum width in pixels, or `undefined` if not set */
    getMinWidth?: () => number | undefined;
    /** Returns the minimum height in pixels, or `undefined` if not set */
    getMinHeight?: () => number | undefined;
    /** Returns the maximum width in pixels, or `undefined` if not set */
    getMaxWidth?: () => number | undefined;
    /** Returns the maximum height in pixels, or `undefined` if not set */
    getMaxHeight?: () => number | undefined;
    /** Returns the resolved `initialWidth` value for the current breakpoint */
    getInitialWidth?: () => number | string | undefined;
    /** Returns the resolved `initialHeight` value for the current breakpoint */
    getInitialHeight?: () => number | string | undefined;
    /** Notify the pane that a resize operation has started */
    onResizeStart?: () => void;
    /** Notify the pane with its current dimensions during resize */
    onResizing?: (size: SPLIT_PANE_SIZE) => void;
    /** Notify the pane with its final dimensions after resize */
    onResizeEnd?: (size: SPLIT_PANE_SIZE) => void;
    /**
     * Like `onResizing`, but skips the internal drag-state bookkeeping.
     * Used by the resizer when the pane size changes without a real drag
     * (e.g. after a double-click reset), so the user's `onResizing` prop
     * still fires while the pane's drag tracking stays cleared.
     */
    notifyResizing?: (size: SPLIT_PANE_SIZE) => void;
    /**
     * Like `onResizeEnd`, but skips the internal drag-state bookkeeping.
     * Used by the resizer after a double-click reset so the user's
     * `onResizeEnd` prop still fires without re-marking the pane as
     * dragged (which would otherwise cancel the reset on the next
     * container resize).
     */
    notifyResizeEnd?: (size: SPLIT_PANE_SIZE) => void;
    /** Direct reference to the underlying pane DOM element */
    splitPane?: HTMLDivElement;
}
export type SPLIT_PANE_SIZE = {
    width: number;
    height: number;
};
export interface SplitPaneBaseProps {
    /** Grow pane to fill available space */
    grow?: boolean;
    /** Initial width of the pane. Accepts a static value or a responsive breakpoint map. */
    initialWidth?: ResponsiveValue<number | string>;
    /** Initial height of the pane. Accepts a static value or a responsive breakpoint map. */
    initialHeight?: ResponsiveValue<number | string>;
    /** The minimum width of the pane when orientation is vertical. Accepts a static value or a responsive breakpoint map. */
    minWidth?: ResponsiveValue<number | string>;
    /** The minimum height of the pane when orientation is horizontal. Accepts a static value or a responsive breakpoint map. */
    minHeight?: ResponsiveValue<number | string>;
    /** The maximum width of the pane when orientation is vertical. Accepts a static value or a responsive breakpoint map. */
    maxWidth?: ResponsiveValue<number | string>;
    /** The maximum height of the pane when orientation is horizontal. Accepts a static value or a responsive breakpoint map. */
    maxHeight?: ResponsiveValue<number | string>;
    /** Event called when pane size starts changing */
    onResizeStart?: () => void;
    /** Event called when pane size changes */
    onResizing?: (size: SPLIT_PANE_SIZE) => void;
    /** Event called when pane size changes */
    onResizeEnd?: (size: SPLIT_PANE_SIZE) => void;
    /** Event called to reset initial size */
    onResetInitialSize?: (e: React.MouseEvent<HTMLButtonElement>) => void;
}
export interface SplitPaneProps extends BoxProps, SplitPaneBaseProps, StylesApiProps<SplitPaneFactory> {
    /** Split pane content */
    children: React.ReactNode;
    ref?: React.RefObject<HTMLDivElement & SplitPaneHandlers>;
}
export type SplitPaneFactory = Factory<{
    props: SplitPaneProps;
    ref: HTMLDivElement;
    stylesNames: SplitPaneStylesNames;
    vars: SplitPaneCssVariables;
    variant: SplitPaneVariant;
}>;
export declare const SplitPane: import("@mantine/core").MantineComponent<{
    props: SplitPaneProps;
    ref: HTMLDivElement;
    stylesNames: SplitPaneStylesNames;
    vars: SplitPaneCssVariables;
    variant: SplitPaneVariant;
}>;