devextreme/ui/stepper.d.ts

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (ui/stepper.d.ts)
* Version: 25.1.3
* Build date: Wed Jun 25 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import { DataSourceLike } from '../data/data_source';

import {
  EventInfo,
  NativeEventInfo,
  InitializedEventInfo,
  ChangedOptionInfo,
  ItemInfo,
} from '../events/index';

import CollectionWidget, {
  CollectionWidgetItem,
  CollectionWidgetOptions,
  SelectionChangeInfo,
  SelectionChangingEventBase,
} from './collection/ui.collection_widget.base';

import {
  Orientation,
} from '../common';

/**
 * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
 */
type ItemLike = string | Item | any;

/**
 * The argument type in the disposing event.
 */
export type DisposingEvent<TItem extends ItemLike = any, TKey = any> = EventInfo<dxStepper<TItem, TKey>>;

/**
 * The argument type in the initialized event.
 */
export type InitializedEvent<TItem extends ItemLike = any, TKey = any> = InitializedEventInfo<dxStepper<TItem, TKey>>;

/**
 * The argument type in the itemClick event.
 */
export type ItemClickEvent<TItem extends ItemLike = any, TKey = any> = NativeEventInfo<dxStepper<TItem, TKey>, MouseEvent | PointerEvent> & ItemInfo<TItem>;

/**
 * The argument type in the itemContextMenu event.
 */
export type ItemContextMenuEvent<TItem extends ItemLike = any, TKey = any> = NativeEventInfo<dxStepper<TItem, TKey>, MouseEvent | PointerEvent | TouchEvent> & ItemInfo<TItem>;

/**
 * The argument type in the itemRendered event.
 */
export type ItemRenderedEvent<TItem extends ItemLike = any, TKey = any> = EventInfo<dxStepper<TItem, TKey>> & ItemInfo<TItem>;

/**
 * The argument type in the optionChanged event.
 */
export type OptionChangedEvent<TItem extends ItemLike = any, TKey = any> = EventInfo<dxStepper<TItem, TKey>> & ChangedOptionInfo;

/**
 * The argument type in the selectionChanging event.
 */
export type SelectionChangingEvent<TItem extends ItemLike = any, TKey = any> = SelectionChangingEventBase<dxStepper<TItem, TKey>>;

/**
 * The argument type in the selectionChanged event.
 */
export type SelectionChangedEvent<TItem extends ItemLike = any, TKey = any> = EventInfo<dxStepper<TItem, TKey>> & SelectionChangeInfo<TItem>;

/**
 * 
 * @deprecated 
 */
export interface dxStepperOptions<
  TItem extends ItemLike = any,
  TKey = any,
> extends CollectionWidgetOptions<dxStepper<TItem, TKey>, TItem, TKey> {
  /**
   * Specifies whether Stepper changes its appearance when in the active state (when an end user interacts with it).
   */
  activeStateEnabled?: boolean;
  /**
   * Specifies whether the UI component can be focused using keyboard navigation.
   */
  focusStateEnabled?: boolean;
  /**
   * Specifies whether the UI component changes its appearance when a user hovers over it.
   */
  hoverStateEnabled?: boolean;
  /**
   * Specifies if items are selected automatically when focused by keyboard.
   */
  selectOnFocus?: boolean;
  /**
   * Binds the UI component to data.
   */
  dataSource?: DataSourceLike<TItem, TKey> | null;
  /**
   * Specifies the Stepper orientation.
   */
  orientation?: Orientation;
  /**
   * Specifies a navigation mode (linear/non-linear).
   */
  linear?: boolean;
  /**
   * An array of items (steps) displayed by the Stepper component.
   */
  items?: Array<TItem>;
}

/**
 * A Stepper is a UI component that displays progress as a user moves through a sequence of steps.
 */
export default class dxStepper<
  TItem extends ItemLike = any,
  TKey = any,
> extends CollectionWidget<Properties<TItem, TKey>, TItem, TKey> { }

export type Item = dxStepperItem;

/**
 * @deprecated Use Item instead
 * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
 */
export interface dxStepperItem extends CollectionWidgetItem {
  /**
   * Specifies the indicator icon.
   */
  icon?: string;
  /**
   * Specifies the caption displayed next to the step.
   */
  label?: string;
  /**
   * Specifies the hint text that appears when an item (step) is hovered over or long-pressed.
   */
  hint?: string;
  /**
   * Marks the step as optional.
   */
  optional?: boolean;
  /**
   * Specifies a visual indicator for validation.
   */
  isValid?: boolean;
}

export type ExplicitTypes<
  TItem extends ItemLike,
  TKey,
> = {
  Properties: Properties<TItem, TKey>;
  DisposingEvent: DisposingEvent<TItem, TKey>;
  InitializedEvent: InitializedEvent<TItem, TKey>;
  ItemClickEvent: ItemClickEvent<TItem, TKey>;
  ItemContextMenuEvent: ItemContextMenuEvent<TItem, TKey>;
  ItemRenderedEvent: ItemRenderedEvent<TItem, TKey>;
  OptionChangedEvent: OptionChangedEvent<TItem, TKey>;
  SelectionChangedEvent: SelectionChangedEvent<TItem, TKey>;
  SelectionChangingEvent: SelectionChangingEvent<TItem, TKey>;
};

export type Properties<
  TItem extends ItemLike = any,
  TKey = any,
> = dxStepperOptions<TItem, TKey>;