@progress/kendo-react-layout/splitter/Splitter.d.ts

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { SplitterPaneProps } from './SplitterPane.js';
import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
import * as React from 'react';
/**
 * Represents the onChange event of the Splitter.
 */
export interface SplitterOnChangeEvent {
    /**
     * The new panes state.
     */
    newState: SplitterPaneProps[];
    /**
     * Indicates if is the last event during drag. Can be used to optimize performance.
     */
    isLast: boolean;
    /**
     * The native DOM event.
     */
    nativeEvent: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement> | any;
}
/**
 * Represents the options of the Splitter.
 */
export interface SplitterProps extends KendoReactComponentBaseProps {
    /**
     * Sets the options of the Splitter panes ([more information and examples](https://www.telerik.com/kendo-react-ui/components/layout/splitter/panes)). Can be used for controlled state.
     *
     * @example
     * ```jsx
     * <Splitter panes={[{ size: '50%' }, { size: '50%' }]} />
     * ```
     */
    panes?: SplitterPaneProps[];
    /**
     * Sets the initial options of the Splitter panes ([more information and examples](https://www.telerik.com/kendo-react-ui/components/layout/splitter/panes)). Can be used for uncontrolled state.
     *
     * @example
     * ```jsx
     * <Splitter defaultPanes={[{ size: '30%' }, { size: '70%' }]} />
     * ```
     */
    defaultPanes?: SplitterPaneProps[];
    /**
     * Specifies the orientation of the panes within the Splitter
     * ([more information and examples](https://www.telerik.com/kendo-react-ui/components/layout/splitter/orientation)).
     * Panes in a horizontal Splitter are placed horizontally. Panes in a vertical Splitter are placed vertically.
     *
     * @example
     * ```jsx
     * <Splitter orientation="vertical" />
     * ```
     *
     * @default 'horizontal'
     */
    orientation?: 'vertical' | 'horizontal';
    /**
     * Fires after a Splitter pane is resized or collapsed. Useful for updating the pane options and triggering layout calculations on components which are positioned inside the panes.
     *
     * @example
     * ```jsx
     * <Splitter onChange={(event) => console.log(event.newState)} />
     * ```
     */
    onChange?: (event: SplitterOnChangeEvent) => void;
}
/**
 * @hidden
 */
export interface SplitterState {
    isDragging: boolean;
    dragIndex?: number;
    startTime: number;
    originalX: number;
    originalY: number;
    originalPrevSize: number;
    originalNextSize: number;
    panes: SplitterPaneProps[];
}
/**
 * Represents the [KendoReact Splitter component](https://www.telerik.com/kendo-react-ui/components/layout/splitter).
 *
 * @example
 * ```jsx
 * const App = () => {
 *    return (
 *        <div>
 *            <Splitter
 *                style={{height: 400}}
 *                orientation={'vertical'}
 *            >
 *                <div>Pane 1</div>
 *                <div>Pane 2</div>
 *                <div>Pane 3</div>
 *            </Splitter>
 *        </div>
 *    );
 * }
 * ```
 */
export declare class Splitter extends React.Component<SplitterProps, SplitterState> {
    /**
     * @hidden
     */
    static displayName: string;
    /**
     * @hidden
     */
    readonly state: SplitterState;
    private panesDuringOnChange?;
    private readonly showLicenseWatermark;
    private readonly licenseMessage?;
    private get isControlledState();
    private get panes();
    private _container;
    private get orientation();
    private get isRtl();
    private get panesContent();
    /**
     * @hidden
     */
    constructor(props: SplitterProps);
    /**
     * @hidden
     */
    render(): React.JSX.Element;
    private validatePanes;
    private mapPaneOptions;
    private mapSplitterPanes;
    private onBarToggle;
    private onBarDragResize;
    private onBarKeyboardResize;
    private surroudingPanes;
    private containerSize;
    private isPercent;
    private toPixels;
    private panesOptions;
    private resetDragState;
    private elementSize;
    private clamp;
    private fixedSize;
    private resize;
    private getPaneProps;
}