devextreme 22.1.2-beta → 22.1.3

package/ui/diagram.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExtreme (ui/diagram.d.ts)
-* Version: 22.1.2
-* Build date: Tue May 17 2022
+* Version: 22.1.3
+* Build date: Mon Jun 13 2022
 *
 * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -26,6 +26,73 @@ import Widget, {
     WidgetOptions,
 } from './widget/ui.widget';
 
+import {
+    Orientation,
+    PageOrientation,
+    ToolbarItemLocation,
+} from '../common';
+
+/**
+ * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
+ */
+export type DiagramAutoZoomMode = 'fitContent' | 'fitWidth' | 'disabled';
+/**
+ * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
+ */
+export type DiagramCommand = 'separator' | 'exportSvg' | 'exportPng' | 'exportJpg' | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'selectAll' | 'delete' | 'fontName' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'fontColor' | 'lineStyle' | 'lineWidth' | 'lineColor' | 'fillColor' | 'textAlignLeft' | 'textAlignCenter' | 'textAlignRight' | 'lock' | 'unlock' | 'sendToBack' | 'bringToFront' | 'insertShapeImage' | 'editShapeImage' | 'deleteShapeImage' | 'connectorLineType' | 'connectorLineStart' | 'connectorLineEnd' | 'layoutTreeTopToBottom' | 'layoutTreeBottomToTop' | 'layoutTreeLeftToRight' | 'layoutTreeRightToLeft' | 'layoutLayeredTopToBottom' | 'layoutLayeredBottomToTop' | 'layoutLayeredLeftToRight' | 'layoutLayeredRightToLeft' | 'fullScreen' | 'zoomLevel' | 'showGrid' | 'snapToGrid' | 'gridSize' | 'units' | 'pageSize' | 'pageOrientation' | 'pageColor' | 'simpleView' | 'toolbox';
+/**
+ * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
+ */
+export type DiagramConnectorLineEnd = 'none' | 'arrow' | 'outlinedTriangle' | 'filledTriangle';
+/**
+ * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
+ */
+export type DiagramConnectorLineType = 'straight' | 'orthogonal';
+/**
+ * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
+ */
+export type DiagramConnectorPosition = 'start' | 'end';
+/**
+ * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
+ */
+export type DiagramDataLayoutType = 'auto' | 'off' | 'tree' | 'layered';
+/**
+ * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
+ */
+export type DiagramExportFormat = 'svg' | 'png' | 'jpg';
+/**
+ * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
+ */
+export type DiagramItemType = 'shape' | 'connector';
+/**
+ * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
+ */
+export type DiagramModelOperation = 'addShape' | 'addShapeFromToolbox' | 'deleteShape' | 'deleteConnector' | 'changeConnection' | 'changeConnectorPoints' | 'beforeChangeShapeText' | 'changeShapeText' | 'beforeChangeConnectorText' | 'changeConnectorText' | 'resizeShape' | 'moveShape';
+/**
+ * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
+ */
+export type DiagramPanelVisibility = 'auto' | 'visible' | 'collapsed' | 'disabled';
+/**
+ * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
+ */
+export type DiagramRequestEditOperationReason = 'checkUIElementAvailability' | 'modelModification';
+/**
+ * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
+ */
+export type DiagramShapeCategory = 'general' | 'flowchart' | 'orgChart' | 'containers' | 'custom';
+/**
+ * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
+ */
+export type DiagramShapeType = 'text' | 'rectangle' | 'ellipse' | 'cross' | 'triangle' | 'diamond' | 'heart' | 'pentagon' | 'hexagon' | 'octagon' | 'star' | 'arrowLeft' | 'arrowTop' | 'arrowRight' | 'arrowBottom' | 'arrowNorthSouth' | 'arrowEastWest' | 'process' | 'decision' | 'terminator' | 'predefinedProcess' | 'document' | 'multipleDocuments' | 'manualInput' | 'preparation' | 'data' | 'database' | 'hardDisk' | 'internalStorage' | 'paperTape' | 'manualOperation' | 'delay' | 'storedData' | 'display' | 'merge' | 'connector' | 'or' | 'summingJunction' | 'verticalContainer' | 'horizontalContainer' | 'cardWithImageOnLeft' | 'cardWithImageOnTop' | 'cardWithImageOnRight';
+/**
+ * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
+ */
+export type DiagramToolboxDisplayMode = 'icons' | 'texts';
+/**
+ * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
+ */
+export type DiagramUnits = 'in' | 'cm' | 'px';
+
 export type ContentReadyEvent = EventInfo<dxDiagram>;
 
 export type CustomCommandEvent = {
@@ -51,7 +118,7 @@ export type OptionChangedEvent = EventInfo<dxDiagram> & ChangedOptionInfo;
 export type RequestEditOperationEvent = EventInfo<dxDiagram> & {
     readonly operation: 'addShape' | 'addShapeFromToolbox' | 'deleteShape' | 'deleteConnector' | 'changeConnection' | 'changeConnectorPoints';
     readonly args: dxDiagramAddShapeArgs | dxDiagramAddShapeFromToolboxArgs | dxDiagramDeleteShapeArgs | dxDiagramDeleteConnectorArgs | dxDiagramChangeConnectionArgs | dxDiagramChangeConnectorPointsArgs | dxDiagramBeforeChangeShapeTextArgs | dxDiagramChangeShapeTextArgs | dxDiagramBeforeChangeConnectorTextArgs | dxDiagramChangeConnectorTextArgs | dxDiagramResizeShapeArgs | dxDiagramMoveShapeArgs;
-    readonly reason: 'checkUIElementAvailability' | 'modelModification';
+    readonly reason: DiagramRequestEditOperationReason;
     allowed?: boolean;
 };
 
@@ -80,7 +147,7 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
     /**
      * Specifies how the Diagram UI component automatically zooms the work area.
      */
-    autoZoomMode?: 'fitContent' | 'fitWidth' | 'disabled';
+    autoZoomMode?: DiagramAutoZoomMode;
     /**
      * Configures the context menu&apos;s settings.
      */
@@ -88,7 +155,7 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
       /**
        * Lists commands in the context menu.
        */
-      commands?: Array<'separator' | 'exportSvg' | 'exportPng' | 'exportJpg' | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'selectAll' | 'delete' | 'fontName' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'lineStyle' | 'lineWidth' | 'textAlignLeft' | 'textAlignCenter' | 'textAlignRight' | 'lock' | 'unlock' | 'sendToBack' | 'bringToFront' | 'insertShapeImage' | 'editShapeImage' | 'deleteShapeImage' | 'connectorLineType' | 'connectorLineStart' | 'connectorLineEnd' | 'layoutTreeTopToBottom' | 'layoutTreeBottomToTop' | 'layoutTreeLeftToRight' | 'layoutTreeRightToLeft' | 'layoutLayeredTopToBottom' | 'layoutLayeredBottomToTop' | 'layoutLayeredLeftToRight' | 'layoutLayeredRightToLeft' | 'fullScreen' | 'zoomLevel' | 'showGrid' | 'snapToGrid' | 'gridSize' | 'units' | 'pageSize' | 'pageOrientation' | 'pageColor' | 'simpleView' | 'toolbox'>;
+      commands?: Array<DiagramCommand>;
       /**
        * Specifies whether the context menu is enabled.
        */
@@ -101,11 +168,11 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
       /**
        * Specifies the category of shapes that are displayed in the context toolbox.
        */
-      category?: 'general' | 'flowchart' | 'orgChart' | 'containers' | 'custom' | string;
+      category?: DiagramShapeCategory | string;
       /**
        * Specifies how shapes are displayed in the context toolbox.
        */
-      displayMode?: 'icons' | 'texts';
+      displayMode?: DiagramToolboxDisplayMode;
       /**
        * Specifies the context toolbox&apos;s availability.
        */
@@ -117,7 +184,7 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
       /**
        * Lists the shapes that are displayed in the context toolbox. The built-in shape types are shown in the Shape Types section.
        */
-      shapes?: Array<'text' | 'rectangle' | 'ellipse' | 'cross' | 'triangle' | 'diamond' | 'heart' | 'pentagon' | 'hexagon' | 'octagon' | 'star' | 'arrowLeft' | 'arrowTop' | 'arrowRight' | 'arrowBottom' | 'arrowNorthSouth' | 'arrowEastWest' | 'process' | 'decision' | 'terminator' | 'predefinedProcess' | 'document' | 'multipleDocuments' | 'manualInput' | 'preparation' | 'data' | 'database' | 'hardDisk' | 'internalStorage' | 'paperTape' | 'manualOperation' | 'delay' | 'storedData' | 'display' | 'merge' | 'connector' | 'or' | 'summingJunction' | 'verticalContainer' | 'horizontalContainer' | 'cardWithImageOnLeft' | 'cardWithImageOnTop' | 'cardWithImageOnRight'> | Array<string>;
+      shapes?: Array<DiagramShapeType> | Array<string>;
       /**
        * Specifies the context toolbox&apos;s width in pixels.
        */
@@ -178,7 +245,7 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
       /**
        * Specifies the base shape type for the custom shape. The built-in shape types are shown in the Shape Types section.
        */
-      baseType?: 'text' | 'rectangle' | 'ellipse' | 'cross' | 'triangle' | 'diamond' | 'heart' | 'pentagon' | 'hexagon' | 'octagon' | 'star' | 'arrowLeft' | 'arrowTop' | 'arrowRight' | 'arrowBottom' | 'arrowNorthSouth' | 'arrowEastWest' | 'process' | 'decision' | 'terminator' | 'predefinedProcess' | 'document' | 'multipleDocuments' | 'manualInput' | 'preparation' | 'data' | 'database' | 'hardDisk' | 'internalStorage' | 'paperTape' | 'manualOperation' | 'delay' | 'storedData' | 'display' | 'merge' | 'connector' | 'or' | 'summingJunction' | 'verticalContainer' | 'horizontalContainer' | 'cardWithImageOnLeft' | 'cardWithImageOnTop' | 'cardWithImageOnRight' | string;
+      baseType?: DiagramShapeType | string;
       /**
        * Specifies a category to which the custom shape belongs.
        */
@@ -316,15 +383,15 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
       /**
        * Specifies the default type of a connector.
        */
-      connectorLineType?: 'straight' | 'orthogonal';
+      connectorLineType?: DiagramConnectorLineType;
       /**
        * Specifies the default tip of a connector&apos;s start point.
        */
-      connectorLineStart?: 'none' | 'arrow' | 'outlinedTriangle' | 'filledTriangle';
+      connectorLineStart?: DiagramConnectorLineEnd;
       /**
        * Specifies the default tip of a connector&apos;s end point.
        */
-      connectorLineEnd?: 'none' | 'arrow' | 'outlinedTriangle' | 'filledTriangle';
+      connectorLineEnd?: DiagramConnectorLineEnd;
       /**
        * Specifies the default minimum width of a shape.
        */
@@ -490,15 +557,15 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
       /**
        * Specifies an auto-layout algorithm that the UI component uses to build a diagram.
        */
-      autoLayout?: 'off' | 'tree' | 'layered' | {
+      autoLayout?: DiagramDataLayoutType | {
         /**
          * Specifies the diagram layout orientation.
          */
-        orientation?: 'vertical' | 'horizontal';
+        orientation?: Orientation;
         /**
          * Specifies an auto-layout algorithm that is used to automatically arrange shapes.
          */
-        type?: 'off' | 'tree' | 'layered';
+        type?: DiagramDataLayoutType;
       };
       /**
        * Specifies whether or not a shape size is automatically changed to fit the text when the UI component is bound to a data source.
@@ -608,7 +675,7 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
     /**
      * Specifies the page orientation.
      */
-    pageOrientation?: 'portrait' | 'landscape';
+    pageOrientation?: PageOrientation;
     /**
      * Specifies a size of pages.
      */
@@ -650,7 +717,7 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
         /**
          * Lists commands in a tab.
          */
-        commands?: Array<'separator' | 'exportSvg' | 'exportPng' | 'exportJpg' | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'selectAll' | 'delete' | 'fontName' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'fontColor' | 'lineStyle' | 'lineWidth' | 'lineColor' | 'fillColor' | 'textAlignLeft' | 'textAlignCenter' | 'textAlignRight' | 'lock' | 'unlock' | 'sendToBack' | 'bringToFront' | 'insertShapeImage' | 'editShapeImage' | 'deleteShapeImage' | 'connectorLineType' | 'connectorLineStart' | 'connectorLineEnd' | 'layoutTreeTopToBottom' | 'layoutTreeBottomToTop' | 'layoutTreeLeftToRight' | 'layoutTreeRightToLeft' | 'layoutLayeredTopToBottom' | 'layoutLayeredBottomToTop' | 'layoutLayeredLeftToRight' | 'layoutLayeredRightToLeft' | 'fullScreen' | 'zoomLevel' | 'showGrid' | 'snapToGrid' | 'gridSize' | 'units' | 'pageSize' | 'pageOrientation' | 'pageColor' | 'simpleView' | 'toolbox'>;
+        commands?: Array<DiagramCommand>;
         /**
          * Contains an array of command groups in the tab.
          */
@@ -658,7 +725,7 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
           /**
            * Lists commands in a group.
            */
-          commands?: Array<'separator' | 'exportSvg' | 'exportPng' | 'exportJpg' | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'selectAll' | 'delete' | 'fontName' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'fontColor' | 'lineStyle' | 'lineWidth' | 'lineColor' | 'fillColor' | 'textAlignLeft' | 'textAlignCenter' | 'textAlignRight' | 'lock' | 'unlock' | 'sendToBack' | 'bringToFront' | 'insertShapeImage' | 'editShapeImage' | 'deleteShapeImage' | 'connectorLineType' | 'connectorLineStart' | 'connectorLineEnd' | 'layoutTreeTopToBottom' | 'layoutTreeBottomToTop' | 'layoutTreeLeftToRight' | 'layoutTreeRightToLeft' | 'layoutLayeredTopToBottom' | 'layoutLayeredBottomToTop' | 'layoutLayeredLeftToRight' | 'layoutLayeredRightToLeft' | 'fullScreen' | 'zoomLevel' | 'showGrid' | 'snapToGrid' | 'gridSize' | 'units' | 'pageSize' | 'pageOrientation' | 'pageColor' | 'simpleView' | 'toolbox'>;
+          commands?: Array<DiagramCommand>;
           /**
            * Specifies a title of the group.
            */
@@ -672,7 +739,7 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
       /**
        * Specifies the panel&apos;s visibility.
        */
-      visibility?: 'auto' | 'visible' | 'collapsed' | 'disabled';
+      visibility?: DiagramPanelVisibility;
     };
     /**
      * Specifies whether the diagram is read-only.
@@ -701,7 +768,7 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
       /**
        * Lists commands in the toolbar.
        */
-      commands?: Array<'separator' | 'exportSvg' | 'exportPng' | 'exportJpg' | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'selectAll' | 'delete' | 'fontName' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'fontColor' | 'lineStyle' | 'lineWidth' | 'lineColor' | 'fillColor' | 'textAlignLeft' | 'textAlignCenter' | 'textAlignRight' | 'lock' | 'unlock' | 'sendToBack' | 'bringToFront' | 'insertShapeImage' | 'editShapeImage' | 'deleteShapeImage' | 'connectorLineType' | 'connectorLineStart' | 'connectorLineEnd' | 'layoutTreeTopToBottom' | 'layoutTreeBottomToTop' | 'layoutTreeLeftToRight' | 'layoutTreeRightToLeft' | 'layoutLayeredTopToBottom' | 'layoutLayeredBottomToTop' | 'layoutLayeredLeftToRight' | 'layoutLayeredRightToLeft' | 'fullScreen' | 'zoomLevel' | 'showGrid' | 'snapToGrid' | 'gridSize' | 'units' | 'pageSize' | 'pageOrientation' | 'pageColor' | 'simpleView' | 'toolbox'>;
+      commands?: Array<DiagramCommand>;
       /**
        * Specifies the toolbar&apos;s visibility.
        */
@@ -714,7 +781,7 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
       /**
        * Lists commands in the history toolbar.
        */
-      commands?: Array<'separator' | 'exportSvg' | 'exportPng' | 'exportJpg' | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'selectAll' | 'delete' | 'fontName' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'fontColor' | 'lineStyle' | 'lineWidth' | 'lineColor' | 'fillColor' | 'textAlignLeft' | 'textAlignCenter' | 'textAlignRight' | 'lock' | 'unlock' | 'sendToBack' | 'bringToFront' | 'insertShapeImage' | 'editShapeImage' | 'deleteShapeImage' | 'connectorLineType' | 'connectorLineStart' | 'connectorLineEnd' | 'layoutTreeTopToBottom' | 'layoutTreeBottomToTop' | 'layoutTreeLeftToRight' | 'layoutTreeRightToLeft' | 'layoutLayeredTopToBottom' | 'layoutLayeredBottomToTop' | 'layoutLayeredLeftToRight' | 'layoutLayeredRightToLeft' | 'fullScreen' | 'zoomLevel' | 'showGrid' | 'snapToGrid' | 'gridSize' | 'units' | 'pageSize' | 'pageOrientation' | 'pageColor' | 'simpleView' | 'toolbox'>;
+      commands?: Array<DiagramCommand>;
       /**
        * Specifies the history toolbar&apos;s visibility.
        */
@@ -727,7 +794,7 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
       /**
        * Lists commands in the toolbar.
        */
-      commands?: Array<'separator' | 'exportSvg' | 'exportPng' | 'exportJpg' | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'selectAll' | 'delete' | 'fontName' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'fontColor' | 'lineStyle' | 'lineWidth' | 'lineColor' | 'fillColor' | 'textAlignLeft' | 'textAlignCenter' | 'textAlignRight' | 'lock' | 'unlock' | 'sendToBack' | 'bringToFront' | 'insertShapeImage' | 'editShapeImage' | 'deleteShapeImage' | 'connectorLineType' | 'connectorLineStart' | 'connectorLineEnd' | 'layoutTreeTopToBottom' | 'layoutTreeBottomToTop' | 'layoutTreeLeftToRight' | 'layoutTreeRightToLeft' | 'layoutLayeredTopToBottom' | 'layoutLayeredBottomToTop' | 'layoutLayeredLeftToRight' | 'layoutLayeredRightToLeft' | 'fullScreen' | 'zoomLevel' | 'showGrid' | 'snapToGrid' | 'gridSize' | 'units' | 'pageSize' | 'pageOrientation' | 'pageColor' | 'simpleView' | 'toolbox'>;
+      commands?: Array<DiagramCommand>;
       /**
        * Specifies the view toolbar&apos;s visibility.
        */
@@ -744,11 +811,11 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
         /**
          * Specifies the category of shapes that are displayed in the group.
          */
-        category?: 'general' | 'flowchart' | 'orgChart' | 'containers' | 'custom' | string;
+        category?: DiagramShapeCategory | string;
         /**
          * Specifies how shapes are displayed in the toolbox.
          */
-        displayMode?: 'icons' | 'texts';
+        displayMode?: DiagramToolboxDisplayMode;
         /**
          * Specifies whether the group is expanded.
          */
@@ -756,12 +823,12 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
         /**
          * Lists the shapes in the group. The built-in shape types are shown in the Shape Types section.
          */
-        shapes?: Array<'text' | 'rectangle' | 'ellipse' | 'cross' | 'triangle' | 'diamond' | 'heart' | 'pentagon' | 'hexagon' | 'octagon' | 'star' | 'arrowLeft' | 'arrowTop' | 'arrowRight' | 'arrowBottom' | 'arrowNorthSouth' | 'arrowEastWest' | 'process' | 'decision' | 'terminator' | 'predefinedProcess' | 'document' | 'multipleDocuments' | 'manualInput' | 'preparation' | 'data' | 'database' | 'hardDisk' | 'internalStorage' | 'paperTape' | 'manualOperation' | 'delay' | 'storedData' | 'display' | 'merge' | 'connector' | 'or' | 'summingJunction' | 'verticalContainer' | 'horizontalContainer' | 'cardWithImageOnLeft' | 'cardWithImageOnTop' | 'cardWithImageOnRight'> | Array<string>;
+        shapes?: Array<DiagramShapeType> | Array<string>;
         /**
          * Specifies the group title in the toolbox.
          */
         title?: string;
-      }> | Array<'general' | 'flowchart' | 'orgChart' | 'containers' | 'custom'>;
+      }> | Array<DiagramShapeCategory>;
       /**
        * Specifies the number of shape icons in a row.
        */
@@ -773,7 +840,7 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
       /**
        * Specifies the toolbar&apos;s visibility.
        */
-      visibility?: 'auto' | 'visible' | 'collapsed' | 'disabled';
+      visibility?: DiagramPanelVisibility;
       /**
        * Specifies the toolbox&apos;s width in pixels.
        */
@@ -782,11 +849,11 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
     /**
      * Specifies the measurement unit for size properties.
      */
-    units?: 'in' | 'cm' | 'px';
+    units?: DiagramUnits;
     /**
      * Specifies the measurement unit that is displayed in user interface elements.
      */
-    viewUnits?: 'in' | 'cm' | 'px';
+    viewUnits?: DiagramUnits;
     /**
      * Specifies the zoom level.
      */
@@ -844,7 +911,7 @@ export default class dxDiagram extends Widget<dxDiagramOptions> {
     /**
      * Exports the diagram to an image format.
      */
-    exportTo(format: 'svg' | 'png' | 'jpg', callback: Function): void;
+    exportTo(format: DiagramExportFormat, callback: Function): void;
     /**
      * Imports the diagram data.
      */
@@ -934,7 +1001,7 @@ export interface dxDiagramItem {
     /**
      * Returns the type of the item.
      */
-    itemType?: 'shape' | 'connector';
+    itemType?: DiagramItemType;
 }
 
 /**
@@ -949,7 +1016,7 @@ export interface dxDiagramShape extends Item {
     /**
      * Specifies the shape type. The built-in shape types are shown in the Shape Types section.
      */
-    type?: 'text' | 'rectangle' | 'ellipse' | 'cross' | 'triangle' | 'diamond' | 'heart' | 'pentagon' | 'hexagon' | 'octagon' | 'star' | 'arrowLeft' | 'arrowTop' | 'arrowRight' | 'arrowBottom' | 'arrowNorthSouth' | 'arrowEastWest' | 'process' | 'decision' | 'terminator' | 'predefinedProcess' | 'document' | 'multipleDocuments' | 'manualInput' | 'preparation' | 'data' | 'database' | 'hardDisk' | 'internalStorage' | 'paperTape' | 'manualOperation' | 'delay' | 'storedData' | 'display' | 'merge' | 'connector' | 'or' | 'summingJunction' | 'verticalContainer' | 'horizontalContainer' | 'cardWithImageOnLeft' | 'cardWithImageOnTop' | 'cardWithImageOnRight' | string;
+    type?: DiagramShapeType | string;
     /**
      * Specifies the position of the top left shape corner relative to the top left corner of the diagram work area.
      */
@@ -1019,7 +1086,7 @@ export interface dxDiagramCustomCommand {
     /**
      * 
      */
-    location?: 'after' | 'before' | 'center';
+    location?: ToolbarItemLocation;
 }
 
 /**
@@ -1054,7 +1121,7 @@ export interface dxDiagramAddShapeFromToolboxArgs {
   /**
    * The type of the processed shape.
    */
-  shapeType?: 'text' | 'rectangle' | 'ellipse' | 'cross' | 'triangle' | 'diamond' | 'heart' | 'pentagon' | 'hexagon' | 'octagon' | 'star' | 'arrowLeft' | 'arrowTop' | 'arrowRight' | 'arrowBottom' | 'arrowNorthSouth' | 'arrowEastWest' | 'process' | 'decision' | 'terminator' | 'predefinedProcess' | 'document' | 'multipleDocuments' | 'manualInput' | 'preparation' | 'data' | 'database' | 'hardDisk' | 'internalStorage' | 'paperTape' | 'manualOperation' | 'delay' | 'storedData' | 'display' | 'merge' | 'connector' | 'or' | 'summingJunction' | 'verticalContainer' | 'horizontalContainer' | 'cardWithImageOnLeft' | 'cardWithImageOnTop' | 'cardWithImageOnRight' | string;
+  shapeType?: DiagramShapeType | string;
 }
 
 /**
@@ -1103,7 +1170,7 @@ export interface dxDiagramChangeConnectionArgs {
   /**
    * The position of the connector in the processed point.
    */
-  connectorPosition?: 'start' | 'end';
+  connectorPosition?: DiagramConnectorPosition;
 }
 
 /**

package/ui/dialog.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExtreme (ui/dialog.d.ts)
-* Version: 22.1.2
-* Build date: Tue May 17 2022
+* Version: 22.1.3
+* Build date: Mon Jun 13 2022
 *
 * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/

package/ui/draggable.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExtreme (ui/draggable.d.ts)
-* Version: 22.1.2
-* Build date: Tue May 17 2022
+* Version: 22.1.3
+* Build date: Mon Jun 13 2022
 *
 * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -29,6 +29,10 @@ import {
 
 import dxSortable from './sortable';
 
+import {
+    DragDirection,
+} from '../common';
+
 /**
  * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
  */
@@ -65,7 +69,7 @@ export interface DraggableBaseOptions<TComponent> extends DOMComponentOptions<TC
     /**
      * Specifies the directions in which an item can be dragged.
      */
-    dragDirection?: 'both' | 'horizontal' | 'vertical';
+    dragDirection?: DragDirection;
     /**
      * Allows you to group several UI components, so that users can drag and drop items between them.
      */

package/ui/drawer.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExtreme (ui/drawer.d.ts)
-* Version: 22.1.2
-* Build date: Tue May 17 2022
+* Version: 22.1.3
+* Build date: Mon Jun 13 2022
 *
 * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -30,6 +30,10 @@ import Widget, {
     WidgetOptions,
 } from './widget/ui.widget';
 
+export type OpenedStateMode = 'overlap' | 'shrink' | 'push';
+export type PanelLocation = 'left' | 'right' | 'top' | 'bottom' | 'before' | 'after';
+export type RevealMode = 'slide' | 'expand';
+
 export type DisposingEvent = EventInfo<dxDrawer>;
 
 export type InitializedEvent = InitializedEventInfo<dxDrawer>;
@@ -68,15 +72,15 @@ export interface dxDrawerOptions extends WidgetOptions<dxDrawer> {
     /**
      * Specifies how the drawer interacts with the view in the opened state.
      */
-    openedStateMode?: 'overlap' | 'shrink' | 'push';
+    openedStateMode?: OpenedStateMode;
     /**
      * Specifies the drawer&apos;s position in relation to the view.
      */
-    position?: 'left' | 'right' | 'top' | 'bottom' | 'before' | 'after';
+    position?: PanelLocation;
     /**
      * Specifies the drawer&apos;s reveal mode.
      */
-    revealMode?: 'slide' | 'expand';
+    revealMode?: RevealMode;
     /**
      * Specifies whether to shade the view when the drawer is opened.
      */

package/ui/drop_down_box.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExtreme (ui/drop_down_box.d.ts)
-* Version: 22.1.2
-* Build date: Tue May 17 2022
+* Version: 22.1.3
+* Build date: Mon Jun 13 2022
 *
 * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -59,7 +59,7 @@ export type FocusOutEvent = NativeEventInfo<dxDropDownBox, FocusEvent>;
 
 export type InitializedEvent = InitializedEventInfo<dxDropDownBox>;
 
-export type InputEvent = NativeEventInfo<dxDropDownBox, UIEvent>;
+export type InputEvent = NativeEventInfo<dxDropDownBox, UIEvent & { target: HTMLInputElement }>;
 
 export type KeyDownEvent = NativeEventInfo<dxDropDownBox, KeyboardEvent>;
 

package/ui/drop_down_button.d.ts

@@ -1,11 +1,15 @@
 /**
 * DevExtreme (ui/drop_down_button.d.ts)
-* Version: 22.1.2
-* Build date: Tue May 17 2022
+* Version: 22.1.3
+* Build date: Mon Jun 13 2022
 *
 * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
+import {
+    ButtonStyle,
+} from '../common';
+
 import {
     UserDefinedElement,
     DxElement,
@@ -40,6 +44,10 @@ import Widget, {
     WidgetOptions,
 } from './widget/ui.widget';
 
+export {
+    ButtonStyle,
+};
+
 export type ButtonClickEvent = NativeEventInfo<dxDropDownButton, KeyboardEvent | MouseEvent | PointerEvent> & {
     readonly selectedItem?: any;
 };
@@ -150,7 +158,7 @@ export interface dxDropDownButtonOptions extends WidgetOptions<dxDropDownButton>
     /**
      * Specifies how the button is styled.
      */
-    stylingMode?: 'text' | 'outlined' | 'contained';
+    stylingMode?: ButtonStyle;
     /**
      * Specifies the button&apos;s text. Applies only if useSelectMode is false.
      */

package/ui/drop_down_editor/ui.drop_down_editor.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExtreme (ui/drop_down_editor/ui.drop_down_editor.d.ts)
-* Version: 22.1.2
-* Build date: Tue May 17 2022
+* Version: 22.1.3
+* Build date: Mon Jun 13 2022
 *
 * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -36,6 +36,12 @@ import {
     EventInfo,
 } from '../../events/index';
 
+import {
+    ApplyValueMode,
+} from '../../common';
+
+export type DropDownPredefinedButton = 'clear' | 'dropDown';
+
 /**
  * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
  */
@@ -59,7 +65,7 @@ export interface dxDropDownEditorOptions<TComponent> extends dxTextBoxOptions<TC
     /**
      * Specifies the way an end-user applies the selected value.
      */
-    applyValueMode?: 'instantly' | 'useButtons';
+    applyValueMode?: ApplyValueMode;
     /**
      * Configures the drop-down field which holds the content.
      */
@@ -67,7 +73,7 @@ export interface dxDropDownEditorOptions<TComponent> extends dxTextBoxOptions<TC
     /**
      * Allows you to add custom buttons to the input text field.
      */
-    buttons?: Array<'clear' | 'dropDown' | dxTextEditorButton>;
+    buttons?: Array<DropDownPredefinedButton | dxTextEditorButton>;
     /**
      * Specifies whether to render the drop-down field&apos;s content when it is displayed. If false, the content is rendered immediately.
      */

package/ui/drop_down_editor/ui.drop_down_list.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExtreme (ui/drop_down_editor/ui.drop_down_list.d.ts)
-* Version: 22.1.2
-* Build date: Tue May 17 2022
+* Version: 22.1.3
+* Build date: Mon Jun 13 2022
 *
 * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -35,6 +35,10 @@ import dxDropDownEditor, {
     dxDropDownEditorOptions,
 } from './ui.drop_down_editor';
 
+import {
+    SimplifiedSearchMode,
+} from '../../common';
+
 /**
  * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
  */
@@ -89,7 +93,7 @@ export interface dxDropDownListOptions<TComponent> extends DataExpressionMixinOp
     /**
      * Specifies a comparison operation used to search UI component items.
      */
-    searchMode?: 'contains' | 'startswith';
+    searchMode?: SimplifiedSearchMode;
     /**
      * Specifies the time delay, in milliseconds, after the last character has been typed in, before a search is executed.
      */

package/ui/editor/editor.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExtreme (ui/editor/editor.d.ts)
-* Version: 22.1.2
-* Build date: Tue May 17 2022
+* Version: 22.1.3
+* Build date: Mon Jun 13 2022
 *
 * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -14,6 +14,12 @@ import Widget, {
     WidgetOptions,
 } from '../widget/ui.widget';
 
+import {
+    EditorStyle,
+    ValidationMessageMode,
+    ValidationStatus,
+} from '../../common';
+
 /**
  * @deprecated Attention! This type is for internal purposes only. If you used it previously, please describe your scenario in the following GitHub Issue, and we will suggest a public alternative: {@link https://github.com/DevExpress/DevExtreme/issues/17885|Internal Types}.
  */
@@ -49,11 +55,11 @@ export interface EditorOptions<TComponent> extends WidgetOptions<TComponent> {
     /**
      * Specifies how the message about the validation rules that are not satisfied by this editor&apos;s value is displayed.
      */
-    validationMessageMode?: 'always' | 'auto';
+    validationMessageMode?: ValidationMessageMode;
     /**
      * Indicates or specifies the current validation status.
      */
-    validationStatus?: 'valid' | 'invalid' | 'pending';
+    validationStatus?: ValidationStatus;
     /**
      * Specifies the UI component&apos;s value.
      */
@@ -61,7 +67,7 @@ export interface EditorOptions<TComponent> extends WidgetOptions<TComponent> {
     /**
      * 
      */
-    stylingMode?: 'outlined' | 'underlined' | 'filled';
+    stylingMode?: EditorStyle;
 }
 /**
  * A base class for editors.

package/ui/editor/ui.data_expression.d.ts

@@ -1,7 +1,7 @@
 /**
 * DevExtreme (ui/editor/ui.data_expression.d.ts)
-* Version: 22.1.2
-* Build date: Tue May 17 2022
+* Version: 22.1.3
+* Build date: Mon Jun 13 2022
 *
 * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/