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

package/tabstrip/TabStripNavigation.d.ts

@@ -0,0 +1,144 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { TabStripSize, ScrollButtons, ScrollButtonsPosition } from './TabStrip.js';
+import { ButtonProps } from '@progress/kendo-react-buttons';
+import * as React from 'react';
+/**
+ * The props that are passed to the TabStripNavigation by the TabStrip.
+ */
+export interface TabStripNavigationProps {
+    /**
+     * Sets the index of the selected tab. Controlled by the TabStrip component.
+     */
+    selected?: number;
+    /**
+     * @hidden
+     */
+    tabIndex?: number;
+    /**
+     * @hidden
+     */
+    onKeyDown?: any;
+    /**
+     * @hidden
+     */
+    tabPosition?: string;
+    /**
+     * @hidden
+     */
+    tabAlignment?: string;
+    /**
+     * @hidden
+     */
+    children?: any;
+    /**
+     * @hidden
+     */
+    onSelect?(idx: number): void;
+    /**
+     * @hidden
+     */
+    onScroll?(): void;
+    /**
+     * @hidden
+     */
+    scrollable?: boolean;
+    /**
+     * @hidden
+     */
+    scrollButtons?: ScrollButtons;
+    /**
+     * @hidden
+     */
+    scrollButtonsPosition?: ScrollButtonsPosition;
+    /**
+     * @hidden
+     */
+    size?: TabStripSize;
+    /**
+     * @hidden
+     */
+    buttonScrollSpeed?: number;
+    /**
+     * @hidden
+     */
+    mouseScrollSpeed?: number;
+    /**
+     * @hidden
+     */
+    prevButton?: React.ComponentType<ButtonProps>;
+    /**
+     * @hidden
+     */
+    nextButton?: React.ComponentType<ButtonProps>;
+    /**
+     * @hidden
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * @hidden
+     */
+    contentPanelId?: string;
+    /**
+     * @hidden
+     */
+    navItemId?: string;
+    /**
+     * @hidden
+     */
+    renderAllContent?: boolean;
+    /**
+     * @hidden
+     */
+    containerScrollPosition?: 'start' | 'end' | 'top' | 'bottom' | 'middle' | null;
+    /**
+     * @hidden
+     */
+    itemsNavRef?: React.RefObject<HTMLUListElement | null>;
+}
+export declare class TabStripNavigation extends React.Component<TabStripNavigationProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[] | null | undefined>>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        selected: PropTypes.Requireable<number>;
+        tabIndex: PropTypes.Requireable<number>;
+        scrollable: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
+        scrollButtons: PropTypes.Requireable<string>;
+        scrollButtonsPosition: PropTypes.Requireable<string>;
+        containerScrollPosition: PropTypes.Requireable<string | null>;
+    };
+    private itemsNavRef;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(prevProps: Readonly<TabStripNavigationProps>): void;
+    private onScroll;
+    /**
+     * @hidden
+     */
+    render(): React.JSX.Element;
+    private scrollToSelected;
+    private horizontalScroll;
+    private isRtl;
+    private arrowClickPrev;
+    private arrowClickNext;
+    private handleArrowClick;
+    private setNewScrollPosition;
+    private renderArrow;
+}

package/tabstrip/TabStripNavigation.mjs

@@ -10,9 +10,9 @@ import n from "prop-types";
 import { TabStripNavigationItem as x } from "./TabStripNavigationItem.mjs";
 import { classNames as v } from "@progress/kendo-react-common";
 import { Button as M } from "@progress/kendo-react-buttons";
-import { caretAltRightIcon as k, caretAltLeftIcon as I, caretAltUpIcon as D, caretAltDownIcon as H } from "@progress/kendo-svg-icons";
+import { caretAltLeftIcon as k, caretAltRightIcon as I, caretAltDownIcon as D, caretAltUpIcon as H } from "@progress/kendo-svg-icons";
 import { provideLocalizationService as y } from "@progress/kendo-react-intl";
-import { prevArrowTitle as A, messages as P, nextArrowTitle as R } from "./messages/index.mjs";
+import { nextArrowTitle as A, messages as P, prevArrowTitle as R } from "./messages/index.mjs";
 const W = (z) => Array.apply(null, Array(z)), b = "smooth", f = "prev", m = "next", w = class w extends h.Component {
   constructor() {
     super(...arguments), this.itemsNavRef = this.props.itemsNavRef || h.createRef(), this.onScroll = () => {
@@ -38,14 +38,14 @@ const W = (z) => Array.apply(null, Array(z)), b = "smooth", f = "prev", m = "nex
         prev: {
           arrowTab: "k-tabstrip-prev",
           fontIcon: o ? this.isRtl() ? "caret-alt-right" : "caret-alt-left" : "caret-alt-up",
-          svgIcon: o ? this.isRtl() ? k : I : D,
-          title: s.toLanguageString(A, P[A])
+          svgIcon: o ? this.isRtl() ? I : k : H,
+          title: s.toLanguageString(R, P[R])
         },
         next: {
           arrowTab: "k-tabstrip-next",
           fontIcon: o ? this.isRtl() ? "caret-alt-left" : "caret-alt-right" : "caret-alt-down",
-          svgIcon: o ? this.isRtl() ? I : k : H,
-          title: s.toLanguageString(R, P[R])
+          svgIcon: o ? this.isRtl() ? k : I : D,
+          title: s.toLanguageString(A, P[A])
         }
       }, l = (t === f ? this.props.prevButton : this.props.nextButton) || M, i = t === f ? this.arrowClickPrev : this.arrowClickNext, e = this.props.containerScrollPosition === null || t === f && (this.props.containerScrollPosition === "start" || this.props.containerScrollPosition === "top") || t === m && (this.props.containerScrollPosition === "end" || this.props.containerScrollPosition === "bottom");
       return /* @__PURE__ */ h.createElement(

package/tabstrip/TabStripNavigationItem.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import * as React from 'react';
+/**
+ * The props that are passed by the TabStripNavigation to the TabStripNavigationItem.
+ */
+export interface TabStripNavigationItemProps {
+    /**
+     * Sets the `id` property of the top element of the TabStripNavigationItem.
+     */
+    id?: string;
+    /**
+     * Defines whether the current TabStripNavigationItem is selected.
+     */
+    active?: boolean;
+    /**
+     * Defines whether the TabStripNavigationItem is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the index of the TabStripNavigationItem that is used to identify it.
+     */
+    index: number;
+    /**
+     * Sets the title of the TabStripNavigationItem.
+     */
+    title?: React.ReactNode;
+    /**
+     * @hidden
+     */
+    first?: boolean;
+    /**
+     * @hidden
+     */
+    last?: boolean;
+    /**
+     * @hidden
+     */
+    onSelect?(idx: number): void;
+    /**
+     * @hidden
+     */
+    contentPanelId?: string;
+    /**
+     * @hidden
+     */
+    renderAllContent?: boolean;
+}
+export declare class TabStripNavigationItem extends React.Component<TabStripNavigationItemProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        active: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        index: PropTypes.Requireable<number>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        title: PropTypes.Requireable<NonNullable<string | PropTypes.ReactElementLike | null | undefined>>;
+        first: PropTypes.Requireable<boolean>;
+        last: PropTypes.Requireable<boolean>;
+    };
+    /**
+     * @hidden
+     */
+    private itemRef;
+    /**
+     * @hidden
+     */
+    focus: () => void;
+    blur: () => void;
+    /**
+     * @hidden
+     */
+    render(): React.JSX.Element;
+    private onClick;
+}

package/tabstrip/TabStripTab.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import * as React from 'react';
+/**
+ * Represents the props of the TabStrip tabs.
+ */
+export interface TabStripTabProps {
+    /**
+     * Defines whether a TabStripTab is disabled ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tabstrip/tabs#toc-disabled-items)).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets the TabStripTab title ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tabstrip/tabs#toc-titles)).
+     */
+    title?: React.ReactNode;
+    /**
+     * Specifies the CSS class names of the TabStripTab content.
+     */
+    contentClassName?: string;
+}
+/**
+ * Represents the TabStripTab component.
+ */
+export declare class TabStripTab extends React.Component<TabStripTabProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        disabled: PropTypes.Requireable<boolean>;
+        contentClassName: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+    /**
+     * @hidden
+     */
+    render(): null;
+}

package/tabstrip/messages/index.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
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare const prevArrowTitle = "prevArrow.title";
+/**
+ * @hidden
+ */
+export declare const nextArrowTitle = "nextArrow.title";
+/**
+ * @hidden
+ */
+export declare const messages: {
+    "prevArrow.title": string;
+    "nextArrow.title": string;
+};

package/tilelayout/InternalTile.d.ts

@@ -0,0 +1,112 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { TileStrictPosition, TileLayoutItem } from './interfaces/index.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface InternalTileProps extends TileLayoutItem {
+    update: (index: number, dRow: number, dCol: number, row: number, col: number) => void;
+    index: number;
+    defaultPosition: TileStrictPosition;
+    ignoreDrag?: (event: any) => boolean;
+    onPress: () => void;
+    onRelease: () => void;
+    children?: React.ReactNode;
+}
+/**
+ * @hidden
+ */
+export interface InternalTileState {
+    rtl: boolean;
+    visibleHint: boolean;
+}
+/**
+ * @hidden
+ */
+export declare class InternalTile extends React.Component<InternalTileProps, InternalTileState> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        defaultPosition: PropTypes.Validator<object>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        hintStyle: PropTypes.Requireable<object>;
+        hintClassName: PropTypes.Requireable<string>;
+        header: PropTypes.Requireable<any>;
+        body: PropTypes.Requireable<any>;
+        item: PropTypes.Requireable<any>;
+        resizable: PropTypes.Requireable<string | boolean>;
+        reorderable: PropTypes.Requireable<boolean>;
+    };
+    /**
+     * @hidden
+     */
+    static displayName: string;
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        resizable: boolean;
+        reorderable: boolean;
+    };
+    protected get reorderable(): boolean;
+    state: {
+        rtl: boolean;
+        visibleHint: boolean;
+    };
+    oldSize: {};
+    draggable: {
+        element: HTMLElement | null;
+    } | null;
+    dragging: boolean;
+    resizing: boolean;
+    element: HTMLElement | null;
+    hintElement: HTMLElement | null;
+    get dragElement(): HTMLElement | null | undefined;
+    ignoreDrag: boolean;
+    pressOffset: {
+        x: number;
+        y: number;
+    };
+    pressXY: {
+        x: number;
+        y: number;
+    };
+    currentTranslate: {
+        x: number;
+        y: number;
+    };
+    preventDataOps: any;
+    handleResize: (e: any, q: {
+        end: boolean;
+        direction: any;
+    }) => void;
+    handlePress: (e: any) => void;
+    handleDrag: (e: any) => void;
+    handleRelease: () => void;
+    handleMouseDown: () => void;
+    handleMouseUp: () => void;
+    componentDidMount(): void;
+    render(): React.JSX.Element;
+    /**
+     * @hidden
+     */
+    getSnapshotBeforeUpdate(_: any): null;
+    /**
+     * @hidden
+     */
+    setInitialHintPosition(): void;
+    calcNewHintPosition: () => void;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(prevProps: any): void;
+}

package/tilelayout/ResizeHandlers.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface ResizeHandlersProps {
+    resizable: string | boolean;
+    onResize: (e: any, args: {
+        end: boolean;
+        direction: any;
+    }) => void;
+    onPress: (e: any) => void;
+    rtl: boolean;
+}
+/**
+ * @hidden
+ */
+export declare class ResizeHandlers extends React.Component<ResizeHandlersProps, {}> {
+    handleResize: (event: any, isEnd: boolean, direction: any) => void;
+    render(): React.JSX.Element | null;
+}

package/tilelayout/TileLayout.d.ts

@@ -0,0 +1,228 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { TileLayoutGap, TileLayoutItem, TilePosition, TileLayoutRepositionEvent, TileStrictPosition, TileLayoutAutoFlow } from './interfaces/index.js';
+import * as React from 'react';
+/**
+ * Represents the props of the [TileLayout](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout) component.
+ */
+export interface TileLayoutProps {
+    /**
+     * Sets the `id` property of the root element.
+     *
+     * @example
+     * ```jsx
+     * <TileLayout id="tile-layout" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Sets additional CSS styles to the TileLayout.
+     *
+     * @example
+     * ```jsx
+     * <TileLayout style={{ backgroundColor: 'lightgray' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets additional classes to the TileLayout.
+     *
+     * @example
+     * ```jsx
+     * <TileLayout className="custom-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Represents the `dir` HTML attribute. Use this to switch from LTR to RTL.
+     *
+     * @example
+     * ```jsx
+     * <TileLayout dir="rtl" />
+     * ```
+     */
+    dir?: string;
+    /**
+     * Specifies the gaps between the tiles ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout#toc-tilelayout-configuration-options)).
+     *
+     * * The possible keys are:
+     * * `rows`
+     * * `columns`
+     *
+     * @example
+     * ```jsx
+     * <TileLayout gap={{ rows: 10, columns: 10 }} />
+     * ```
+     */
+    gap?: TileLayoutGap;
+    /**
+     * Specifies the default number of columns ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout#toc-tilelayout-configuration-options)).
+     *
+     * @example
+     * ```jsx
+     * <TileLayout columns={4} />
+     * ```
+     */
+    columns?: number;
+    /**
+     * Specifies the default width of the columns ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout#toc-tilelayout-configuration-options)).
+     *
+     * @example
+     * ```jsx
+     * <TileLayout columnWidth={200} />
+     * ```
+     */
+    columnWidth?: number | string;
+    /**
+     * Specifies the default height of the rows ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout#toc-tilelayout-configuration-options)).
+     *
+     * @example
+     * ```jsx
+     * <TileLayout rowHeight={100} />
+     * ```
+     */
+    rowHeight?: number | string;
+    /**
+     * Represents the `key` field of the TileLayout item. Used for setting unique keys to the TileLayout items.
+     *
+     * @example
+     * ```jsx
+     * <TileLayout dataItemKey="id" />
+     * ```
+     */
+    dataItemKey?: string;
+    /**
+     * The collection of items that will be rendered in the TileLayout
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout#toc-tilelayout-configuration-options)).
+     *
+     * @example
+     * ```jsx
+     * <TileLayout items={[{ header: 'Header', body: 'Body' }]} />
+     * ```
+     */
+    items?: TileLayoutItem[];
+    /**
+     * The list of tiles' positions which are used when the TileLayout is in controlled mode
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/tiles#toc-controlling-the-position)).
+     *
+     * @example
+     * ```jsx
+     * <TileLayout positions={[{ col: 1, row: 1 }]} />
+     * ```
+     */
+    positions?: TilePosition[];
+    /**
+     * Fires when the user repositions the tile by either dragging or resizing
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/tiles#toc-controlling-the-position)).
+     *
+     * @example
+     * ```jsx
+     * <TileLayout onReposition={(e) => console.log(e.value)} />
+     * ```
+     */
+    onReposition?: (event: TileLayoutRepositionEvent) => void;
+    /**
+     * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the TileLayout.
+     * For further reference, check [grid-auto-flow CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) article.
+     *
+     * @default column
+     *
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/auto-flows)).
+     *
+     * @example
+     * ```jsx
+     * <TileLayout autoFlow="row" />
+     * ```
+     */
+    autoFlow?: TileLayoutAutoFlow;
+    /**
+     * Use this callback to prevent or allow dragging of the tiles based on specific DOM events.
+     * Setting `ignoreDrag={(e) => { return !(e.target.classList.contains("k-card-title")); }}` makes only the headers draggable.
+     * Setting `ignoreDrag={(e) => { return e.target.nodeName == "INPUT"; }}` ignores dragging input elements.
+     *
+     * @example
+     * ```jsx
+     * <TileLayout ignoreDrag={(e) => e.target.nodeName === 'INPUT'} />
+     * ```
+     */
+    ignoreDrag?: (event: any) => boolean;
+}
+/**
+ * @hidden
+ */
+export interface TileLayoutState {
+    positions: TileStrictPosition[];
+    activeHint?: boolean;
+}
+/**
+ * Represents the [KendoReact TileLayout component](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout).
+ */
+export declare class TileLayout extends React.Component<TileLayoutProps, TileLayoutState> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        id: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        dir: PropTypes.Requireable<string>;
+        gap: PropTypes.Requireable<object>;
+        columns: PropTypes.Requireable<number>;
+        columnWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        rowHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        dataItemKey: PropTypes.Requireable<string>;
+        items: PropTypes.Requireable<any[]>;
+        positions: PropTypes.Requireable<any[]>;
+        autoFlow: PropTypes.Requireable<string>;
+        onReposition: PropTypes.Requireable<(...args: any[]) => any>;
+        ignoreDrag: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    /**
+     * @hidden
+     */
+    static displayName: string;
+    /**
+     * @hidden
+     */
+    _element: HTMLDivElement | null;
+    /**
+     * @hidden
+     */
+    state: {
+        positions: ({
+            order: number;
+            rowSpan: number;
+            colSpan: number;
+        } & TilePosition)[];
+        activeHint: boolean;
+    };
+    /**
+     * Gets the HTML element of the TileLayout component.
+     */
+    get element(): HTMLDivElement | null;
+    /**
+     * @hidden
+     */
+    focus: () => void;
+    /**
+     * @hidden
+     */
+    static getDerivedStateFromProps(props: TileLayoutProps, state: TileLayoutState): {
+        positions: ({
+            order: number;
+            rowSpan: number;
+            colSpan: number;
+        } & TilePosition)[];
+    } | null;
+    /**
+     * @hidden
+     */
+    update: (index: number, dOrder: number, dCol: number, dRowSpan?: number, dColSpan?: number) => void;
+    render(): React.JSX.Element;
+}