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

package/stacklayout/StackLayout.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { StackLayoutProps } from './StackLayoutProps.js';
+import * as React from 'react';
+/**
+ * Represents the Object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom)
+ * callback of the StackLayout component.
+ */
+export interface StackLayoutHandle {
+    /**
+     * Represents the current element. If no current element is present, `element` is `null`.
+     */
+    element: HTMLDivElement | null;
+}
+/**
+ * Represents the [KendoReact StackLayout component](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout).
+ * Arranges its inner elements horizontally, or vertically in a stack. Nesting stack layouts is supported to build more complex layouts.
+ *
+ * @example
+ * ```jsx
+ *
+ * const App = () => {
+ *   return (
+ *     <StackLayout
+ *       orientation="vertical"
+ *       align={{horizontal: 'stretch', vertical: 'stretch'}}
+ *       gap={10}
+ *     >
+ *       <div>Box</div>
+ *       <div>Box</div>
+ *       <div>Box</div>
+ *       <div>Box</div>
+ *     </StackLayout>
+ *   );
+ * };
+ * ```
+ */
+export declare const StackLayout: React.ForwardRefExoticComponent<StackLayoutProps & React.RefAttributes<StackLayoutHandle | null>>;

package/stacklayout/StackLayoutProps.d.ts

@@ -0,0 +1,97 @@
+/**
+ * @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';
+/**
+ * Represents the props of the [KendoReact StackLayout component](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout).
+ */
+export interface StackLayoutProps {
+    /**
+     * The React elements that will be rendered inside the StackLayout.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS classes to the StackLayout.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the StackLayout.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `id` property of the root StackLayout element.
+     */
+    id?: string;
+    /**
+     * Specifies the gap between the inner elements ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout/layout#toc-gaps)).
+     */
+    gap?: number | string;
+    /**
+     * Specifies the StackLayout orientation.
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout/layout#toc-orientation)).
+     *
+     * The possible values are:
+     * * (Default)`horizontal`
+     * * `vertical`
+     *
+     * @default horizontal
+     */
+    orientation?: StackLayoutOrientation;
+    /**
+     * Specifies the horizontal and vertical alignment of the inner StackLayout elements.
+     * Demo ([here](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout/layout#toc-horizontal-alignment)) and ([here](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout/layout#toc-vertical-alignment)).
+     *
+     * The possible keys are:
+     * * `horizontal`—Defines the possible horizontal alignment of the inner StackLayout elements.
+     *   * `start`—Uses the start point of the container.
+     *   * `center`—Uses the central point of the container.
+     *   * `end`—Uses the end point of the container.
+     *   * (Default)`stretch`—Stretches the items to fill the width of the container.
+     * * `vertical`—Defines the possible vertical alignment of the inner StackLayout elements.
+     *   * `top`—Uses the top point of the container.
+     *   * `middle`—Uses the middle point of the container.
+     *   * `bottom`—Uses the bottom point of the container.
+     *   * (Default)`stretch`—Stretches the items to fill the height of the container.
+     */
+    align?: StackLayoutAlign;
+}
+/**
+ * Specifies the StackLayout orientation ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout/layout#toc-orientation)).
+ *
+ * The possible values are:
+ * * (Default)`horizontal`
+ * * `vertical`
+ *
+ */
+export type StackLayoutOrientation = 'horizontal' | 'vertical';
+/**
+ * Specifies the horizontal and vertical alignment of the inner StackLayout elements.
+ */
+export interface StackLayoutAlign {
+    /**
+     * Defines the possible horizontal alignment of the inner StackLayout elements
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout/layout#toc-horizontal-alignment)).
+     *
+     * The available values are:
+     * - `start`—Uses the start point of the container.
+     * - `center`—Uses the center point of the container.
+     * - `end`—Uses the end point of the container.
+     * - (Default)`stretch`—Stretches the items to fill the width of the container.
+     */
+    horizontal?: 'start' | 'center' | 'end' | 'stretch';
+    /**
+     * Defines the possible vertical alignment of the inner StackLayout elements
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stacklayout/layout#toc-vertical-alignment)).
+     *
+     * The available values are:
+     * - `top`—Uses the top point of the container.
+     * - `middle`—Uses the middle point of the container.
+     * - `bottom`—Uses the bottom point of the container.
+     * - (Default)`stretch`—Stretches the items to fill the height of the container.
+     */
+    vertical?: 'top' | 'middle' | 'bottom' | 'stretch';
+}

package/stepper/Step.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { StepHandle } from './interfaces/StepHandle.js';
+import { StepProps } from './interfaces/StepProps.js';
+import * as React from 'react';
+/**
+ * Represents the [KendoReact Step component](https://www.telerik.com/kendo-react-ui/components/layout/stepper).
+ *
+ * @example
+ * ```jsx
+ * const steps = [
+ *    { label: 'Step 1' },
+ *    { label: 'Step 2' },
+ *    { label: 'Step 3', optional: true }
+ * ];
+ *
+ * const App = () => {
+ *   return (
+ *       <Stepper items={steps} value={1}/>
+ *   );
+ * };
+ * ```
+ */
+export declare const Step: React.ForwardRefExoticComponent<Omit<StepProps, "ref"> & React.RefAttributes<StepHandle | null>>;

package/stepper/Stepper.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { StepperProps } from './interfaces/StepperProps.js';
+import { StepperHandle } from './interfaces/StepperHandle.js';
+import * as React from 'react';
+/**
+ * Represents the [KendoReact Stepper component](https://www.telerik.com/kendo-react-ui/components/layout/stepper).
+ *
+ * @example
+ * ```jsx
+ * const steps = [
+ *    { label: 'Step 1' },
+ *    { label: 'Step 2' },
+ *    { label: 'Step 3', optional: true }
+ * ];
+ *
+ * const App = () => {
+ *   return (
+ *       <Stepper items={steps} value={1} />
+ *   );
+ * };
+ * ```
+ */
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<StepperHandle | null>>;

package/stepper/contants.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
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare const DEFAULT_ANIMATION_DURATION = 400;
+/**
+ * @hidden
+ */
+export declare const NO_ANIMATION = 0;

package/stepper/context/StepperContext.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { StepProps } from '../interfaces/StepProps.js';
+import { StepChangeEvent } from '../interfaces/StepChangeEvent.js';
+import { StepFocusEvent } from '../interfaces/StepFocusEvent.js';
+import { SVGIcon } from '@progress/kendo-react-common';
+import * as React from 'react';
+/** @hidden */
+export type StepperContextType = {
+    animationDuration?: number | boolean;
+    isVertical?: boolean;
+    item?: React.ComponentType<StepProps>;
+    linear?: boolean;
+    mode?: 'steps' | 'labels';
+    numOfSteps?: number;
+    value: number;
+    successIcon?: string;
+    errorIcon?: string;
+    successSVGIcon?: SVGIcon;
+    errorSVGIcon?: SVGIcon;
+    onChange?: (event: StepChangeEvent) => void;
+    onFocus?: (event: StepFocusEvent) => void;
+};
+/** @hidden */
+export declare const StepperContext: React.Context<StepperContextType>;

package/stepper/interfaces/StepChangeEvent.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { StepHandle } from './StepHandle.js';
+import { BaseEvent } from '@progress/kendo-react-common';
+/**
+ * The arguments for the `onChange` Step event.
+ */
+export interface StepChangeEvent extends BaseEvent<StepHandle> {
+    /**
+     * The index of the selected Step.
+     */
+    value: number;
+}

package/stepper/interfaces/StepFocusEvent.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { StepHandle } from './StepHandle.js';
+import { BaseEvent } from '@progress/kendo-react-common';
+/**
+ * The arguments for the `onFocus` Step event.
+ */
+export interface StepFocusEvent extends BaseEvent<StepHandle> {
+}

package/stepper/interfaces/StepHandle.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The Step ref.
+ */
+export interface StepHandle {
+    /**
+     * The Step element.
+     */
+    element: HTMLLIElement | null;
+    /**
+     * Focus the Step.
+     */
+    focus: () => void;
+}

package/stepper/interfaces/StepProps.d.ts

@@ -0,0 +1,95 @@
+/**
+ * @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';
+import * as React from 'react';
+/**
+ * Represents the props of the [KendoReact Step component](https://www.telerik.com/kendo-react-ui/components/layout/stepper).
+ */
+export interface StepProps {
+    /**
+     * Represents the child elements that are passed to the Step.
+     */
+    children?: any;
+    /**
+     * Specifies a list of CSS classes that will be added to the Step element.
+     */
+    className?: string;
+    /**
+     * Represents the content that will be rendered inside each Step.
+     *
+     * @hidden
+     */
+    content?: any;
+    /**
+     * Specifies the Step as current.
+     *
+     * @default false
+     */
+    current?: boolean;
+    /**
+     * Sets a custom prop.
+     */
+    [customProp: string]: any;
+    /**
+     * Specifies if the Step is disabled
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/display_modes)).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Defines the name for an existing icon in a KendoReact theme.
+     * The icon is rendered inside the Step indicator by a `span.k-icon` element
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/display_modes)).
+     */
+    icon?: string;
+    /**
+     * Defines the SVG icon.
+     * The icon is rendered inside the Step indicator
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/display_modes)).
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Sets the index of the Step that is used to identify it.
+     */
+    index?: number;
+    /**
+     * Specifies the Step validity
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/display_modes)).
+     *
+     * @default true
+     */
+    isValid?: boolean;
+    /**
+     * Specifies the label of the Step
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/display_modes)).
+     */
+    label?: string;
+    /**
+     * Specifies if the Step is optional. The validation is not applied to these steps
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/display_modes)).
+     *
+     * @default false
+     */
+    optional?: boolean;
+    /**
+     * Sets additional CSS styles to the Step.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `tabIndex` property of the Step.
+     *
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the text content of the Step indicator
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/display_modes)).
+     */
+    text?: string;
+}

package/stepper/interfaces/StepperChangeEvent.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { StepperHandle } from '../interfaces/StepperHandle.js';
+import { BaseEvent } from '@progress/kendo-react-common';
+/**
+ * The arguments for the `onChange` Stepper event.
+ */
+export interface StepperChangeEvent extends BaseEvent<StepperHandle> {
+    /**
+     * The index of the selected Step.
+     */
+    value: number;
+}

package/stepper/interfaces/StepperFocusEvent.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { StepperHandle } from '../interfaces/StepperHandle.js';
+import { BaseEvent } from '@progress/kendo-react-common';
+/**
+ * The arguments for the `onFocus` Stepper event.
+ */
+export interface StepperFocusEvent extends BaseEvent<StepperHandle> {
+}

package/stepper/interfaces/StepperHandle.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The Stepper ref.
+ */
+export interface StepperHandle {
+    /**
+     * The Stepper element.
+     */
+    element: HTMLMenuElement | null;
+    /**
+     * Focus the Stepper's first focusable child.
+     */
+    focus: () => void;
+}

package/stepper/interfaces/StepperOnNavigateEvent.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { StepperHandle } from './../interfaces/StepperHandle.js';
+/**
+ * The `StepperOnNavigateEvent` event.
+ */
+export declare class StepperOnNavigateEvent implements BaseEvent<StepperHandle> {
+    /**
+     * The Stepper component.
+     */
+    target: StepperHandle;
+    /**
+     * The synthetic keyboard event.
+     */
+    syntheticEvent: React.KeyboardEvent;
+    /**
+     * The native DOM event.
+     */
+    nativeEvent: any;
+    /**
+     * The previous index of the Step.
+     */
+    prevIndex: number;
+    /**
+     * The new index of the Step.
+     */
+    nextIndex: number;
+    /**
+     * @hidden
+     */
+    constructor(target: StepperHandle, prevIndex: number, nextIndex: number);
+}