@progress/kendo-react-layout 13.3.0 → 13.4.0-develop.2

package/panelbar/interfaces/PanelBarItemClickEventArguments.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PanelBarItem } from '../PanelBarItem.js';
+/**
+ * @hidden
+ */
+export interface PanelBarItemClickEventArguments {
+    uniquePrivateKey: number;
+    target: PanelBarItem;
+}

package/panelbar/interfaces/PanelBarItemProps.d.ts

@@ -0,0 +1,116 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SVGIcon } from '@progress/kendo-react-common';
+/**
+ * Represents the props of the PanelBarItem component.
+ */
+export interface PanelBarItemProps {
+    /**
+     * Allows individual animation control over the child ([see example](https://www.telerik.com/kendo-react-ui/components/layout/panelbar/animations)). By default, it is controlled by the PanelBar component.
+     */
+    animation?: boolean;
+    /**
+     * Can be any of PanelBar items, an array of PanelBar items, or a custom component.
+     */
+    children?: any;
+    /**
+     * The class name that is set to the PanelBarItem component.
+     */
+    className?: string;
+    /**
+     * The class name that is set to the PanelBarItem header.
+     */
+    headerClassName?: string;
+    /**
+     * Sets the initial expanded state of the PanelBarItem
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/panelbar/items/states#toc-expanded-items)). Controlled by the PanelBar component.
+     *
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * Sets the disabled state of the PanelBarItem
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/panelbar/items/states#toc-disabled-items)).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @hidden
+     */
+    onSelect?: Function;
+    /**
+     * @hidden
+     */
+    level?: number;
+    /**
+     * Defines an icon that will be rendered next to the title
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/panelbar/items/titles#toc-adding-icons)).
+     */
+    icon?: string;
+    /**
+     * Defines an SVG icon that will be rendered next to the title
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/panelbar/items/titles#toc-adding-icons)).
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Defines an icon with a custom CSS class that will be rendered next to the title
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/panelbar/items/titles#toc-adding-icons)).
+     */
+    iconClass?: string;
+    /**
+     * Defines the location of the image that will be displayed next to the title
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/panelbar/items/titles#toc-adding-images)).
+     */
+    imageUrl?: string;
+    /**
+     * Sets the initial selected state of the PanelBarItem. Controlled by the PanelBarItem component
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/panelbar/items/states#toc-selected-items)).
+     *
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Sets the title of the PanelBar item
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/panelbar/items/titles#toc-getting-started)).
+     */
+    title?: React.ReactNode;
+    /**
+     * Allows the component to set the `id` property to each item. If not set, a default `id` is applied.
+     */
+    id?: string;
+    /**
+     * Sets the initial focused state of the PanelBarItem. Controlled by the PanelBar component.
+     */
+    focused?: boolean;
+    /**
+     * @hidden
+     */
+    parentExpanded?: boolean;
+    /**
+     * @hidden
+     */
+    content?: any;
+    /**
+     * Used to identify the PanelBarItems inside the PanelBar
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/panelbar/controlling-state)). Does not depend on the state of the PanelBarItem.
+     */
+    uniquePrivateKey?: string;
+    /**
+     * @hidden
+     */
+    parentUniquePrivateKey?: string[];
+    /**
+     * @hidden
+     */
+    keepItemsMounted?: boolean;
+    /**
+     * Sets a custom property. Contained in the PanelBarItem props that are returned from the `onSelect` PanelBar event.
+     */
+    [customProp: string]: any;
+}

package/panelbar/interfaces/PanelBarProps.d.ts

@@ -0,0 +1,140 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PanelBarSelectEventArguments } from '../../index.js';
+/**
+ * Represents the expand modes of the KendoReact PanelBar. Defaults to `multiple`.
+ */
+export type PanelBarExpandMode = 'single' | 'multiple';
+/**
+ * Represents the props of the [KendoReact PanelBar component](https://www.telerik.com/kendo-react-ui/components/layout/panelbar).
+ */
+export interface PanelBarProps {
+    /**
+     * The child can be either a single PanelBarItem or a PanelBarItem array.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar>
+     *   <PanelBarItem title="Item 1" />
+     *   <PanelBarItem title="Item 2" />
+     * </PanelBar>
+     * ```
+     */
+    children?: React.ReactNode;
+    /**
+     * The class name that is set to the PanelBar.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar className="custom-panelbar" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Sets the animation state of the PanelBar.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar animation={false} />
+     * ```
+     *
+     * @default true
+     */
+    animation?: boolean;
+    /**
+     * Sets the expand mode of the PanelBar ([see example](https://www.telerik.com/kendo-react-ui/components/layout/panelbar/expand-modes)).
+     *
+     * The available modes are:
+     * - `"single"`&mdash;Allows you to expand only one item at a time. The expanding of an item collapses the item that was previously expanded.
+     * - `"multiple"`&mdash;Allows you to expand two or more items at a time. Items can also be toggled.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar expandMode="single" />
+     * ```
+     *
+     * @default 'multiple'
+     */
+    expandMode?: PanelBarExpandMode;
+    /**
+     * Sets the direction of the PanelBar component.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar dir="rtl" />
+     * ```
+     */
+    dir?: string;
+    /**
+     * If set, overrides the currently selected property in the PanelBar state. Takes the `id` of the item.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar selected="item1" />
+     * ```
+     */
+    selected?: string;
+    /**
+     * Sets the initial expanded state of the PanelBar. Takes the `id` of the item.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar expanded={['item1', 'item2']} />
+     * ```
+     */
+    expanded?: string[];
+    /**
+     * Sets the initial focused state of the PanelBar. Takes the `id` of the item.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar focused="item1" />
+     * ```
+     */
+    focused?: string;
+    /**
+     * Determines if the PanelBar items will be mounted after expand collapse.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar keepItemsMounted />
+     * ```
+     *
+     * @default false
+     */
+    keepItemsMounted?: boolean;
+    /**
+     * Determines if the PanelBar is going to be used in controlled state.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar isControlled />
+     * ```
+     *
+     * @default false
+     */
+    isControlled?: boolean;
+    /**
+     * Fires each time the user makes a selection ([see example](https://www.telerik.com/kendo-react-ui/components/layout/panelbar/controlling-state)).
+     *
+     * @example
+     * ```jsx
+     * <PanelBar onSelect={(event) => console.log(event.item)} />
+     * ```
+     */
+    onSelect?: (event: PanelBarSelectEventArguments) => void;
+    /**
+     * Sets additional CSS styles to the PanelBar.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar style={{ backgroundColor: 'lightblue' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+}

package/panelbar/interfaces/PanelBarSelectEventArguments.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PanelBarItemProps } from '../interfaces/PanelBarItemProps.js';
+/**
+ * The arguments that are passed to the `onSelect` callback function.
+ */
+export interface PanelBarSelectEventArguments {
+    /**
+     * The selected PanelBar item.
+     */
+    target: React.ReactElement<PanelBarItemProps>;
+    /**
+     * The new expanded PanelBar items state.
+     */
+    expandedItems: string[];
+}

package/panelbar/interfaces/RenderPanelBarItem.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PanelBarState } from '../PanelBar.js';
+/**
+ * @hidden
+ */
+export interface RenderPanelBarItem {
+    animation?: boolean;
+    keepItemsMounted?: boolean;
+    state: PanelBarState;
+    expanded: string[];
+    handleSelect: any;
+    children: React.ReactNode;
+    parentExpanded?: boolean;
+    level?: number;
+    parentPrivateKey?: string[];
+}

package/panelbar/util.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PanelBarState } from './PanelBar.js';
+import { RenderPanelBarItem } from './interfaces/RenderPanelBarItem.js';
+import { PanelBarItemProps } from '../index.js';
+import { PanelBarExpandMode } from './interfaces/PanelBarProps.js';
+import { NavigationAction } from './interfaces/NavigationAction.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export declare const renderChildren: ({ animation, keepItemsMounted, state, expanded, handleSelect, children, parentExpanded, level, parentPrivateKey }: RenderPanelBarItem) => React.ReactNode;
+/**
+ * @hidden
+ */
+export declare const getFirstId: (props: any) => any;
+/**
+ * @hidden
+ */
+export declare const getInitialState: (props: any, expandMode: PanelBarExpandMode, result?: PanelBarState, parentExpanded?: boolean, parentPrivateKey?: string[]) => PanelBarState;
+/**
+ * @hidden
+ */
+export declare function flatVisibleItems(data: any, flattedItems?: any[]): any[];
+/**
+ * @hidden
+ */
+export declare function flatChildren(children: any, flattenChildren?: any[]): any[];
+/**
+ * @hidden
+ */
+export declare function flatVisibleChildren(children: any, flattenVisibleChildren?: any[]): any[];
+/**
+ * @hidden
+ */
+export declare const isPresent: (value: any) => boolean;
+/**
+ * Represents the PanelBarUtils functions.
+ */
+export declare namespace PanelBarUtils {
+    /**
+     * Maps a collection of PanelBarItemProps to PanelBarItem components
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/panelbar/customization)).
+     * Contained in the `PanelBarUtils` object.
+     *
+     * @param items - A collection of PanelBarItemProps.
+     * @return {PanelBarItem[]} Returns an array of PanelBarItem components.
+     */
+    function mapItemsToComponents(items: Array<PanelBarItemProps>): React.ReactNode[];
+}
+/**
+ * @hidden
+ */
+export declare const isArrayEqual: (firstArray: any[], secondArray: any[]) => boolean;
+/**
+ * @hidden
+ */
+export declare const getFocusedChild: (flattenChildren: any, step: number, event: any, focused?: string, action?: NavigationAction) => any;

package/splitter/Splitter.d.ts

@@ -0,0 +1,150 @@
+/**
+ * @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;
+}

package/splitter/SplitterBar.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SplitterPaneExtendedProps } from './SplitterPane.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface SplitterBarProps {
+    orientation: 'vertical' | 'horizontal';
+    index: number;
+    prev: SplitterPaneExtendedProps;
+    next: SplitterPaneExtendedProps;
+    ariaLabel?: string;
+    isRtl?: boolean;
+    onDrag: (event: any, element: HTMLDivElement, index: number, isFirst: boolean, isLast: boolean) => void;
+    onToggle: (index: number, nativeEvent: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) => void;
+    onKeyboardResize: (element: HTMLDivElement, index: number, delta: number, nativeEvent: React.KeyboardEvent<HTMLDivElement>) => void;
+}
+/**
+ * @hidden
+ */
+export interface SplitterBarState {
+    focused: boolean;
+}
+/**
+ * @hidden
+ */
+export declare class SplitterBar extends React.Component<SplitterBarProps, SplitterBarState> {
+    private draggable;
+    private spliterBarRef;
+    private navigation?;
+    private get isStatic();
+    private get isDraggable();
+    private get isHorizontal();
+    constructor(props: SplitterBarProps);
+    /** @hidden */
+    componentDidMount(): void;
+    render(): React.JSX.Element;
+    private onDrag;
+    private onFocus;
+    private onBlur;
+    private onToggle;
+    private onPrevToggle;
+    private onNextToggle;
+    private onKeyDown;
+}

package/splitter/SplitterPane.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
+import * as React from 'react';
+/**
+ * Represents the pane options of the Splitter.
+ */
+export interface SplitterPaneProps extends KendoReactComponentBaseProps {
+    /**
+     * Sets the size of the pane ([see example](https://www.telerik.com/kendo-react-ui/components/layout/splitter/panes#toc-dimensions)). Has to be between the `min` and `max` properties.
+     */
+    size?: string;
+    /**
+     * Sets the minimum possible size of the pane ([see example](https://www.telerik.com/kendo-react-ui/components/layout/splitter/panes#toc-dimensions)).
+     */
+    min?: string;
+    /**
+     * Sets the maximum possible size of the pane ([see example](https://www.telerik.com/kendo-react-ui/components/layout/splitter/panes#toc-dimensions)).
+     */
+    max?: string;
+    /**
+     * Specifies if the user is allowed to resize the pane and provide space for other panes
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/splitter/panes#toc-resizing)).
+     * If `resizable` is not specified, the resizing of the pane will be enabled.
+     *
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     * Specifies if the user is allowed to hide the pane and provide space for other panes
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/splitter/panes#toc-collapsing)).
+     *
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Specifies the pane collapsed state
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/splitter/panes#toc-collapsing)).
+     *
+     * @default false
+     */
+    collapsed?: boolean;
+    /**
+     * Specifies if overflowing content is scrollable or hidden
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/splitter/panes#toc-scrolling)).
+     * If `scrollable` is not specified, the content will be scrollable.
+     *
+     * @default true
+     */
+    scrollable?: boolean;
+    /**
+     * Specifies if the children of the pane should be mounted when it's in collapsed state.
+     *
+     * @default false
+     */
+    keepMounted?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface SplitterPaneExtendedProps extends SplitterPaneProps {
+    orientation: 'vertical' | 'horizontal';
+    overlay: boolean;
+    containsSplitter: boolean;
+}
+/**
+ * @hidden
+ */
+export declare class SplitterPane extends React.Component<SplitterPaneExtendedProps, {}> {
+    render(): React.JSX.Element;
+}

package/splitter/messages/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare const splitBarLabel = "splitBarLabel";
+/**
+ * @hidden
+ */
+export declare const messages: {
+    splitBarLabel: string;
+};