@progress/kendo-react-diagram 14.3.1-develop.3

package/interfaces/DiagramTypes.d.ts

@@ -0,0 +1,208 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { NavigationOptions, DiagramChangeEvent, DiagramDomEvent, DiagramDragEvent, DiagramItemBoundsChangeEvent, DiagramPanEvent, DiagramSelectEvent, DiagramZoomEndEvent, DiagramZoomStartEvent, DiagramEditable, DiagramLayout, Pannable, Selectable } from '@progress/kendo-diagram-common';
+import { ConnectionDefaults, ConnectionModelFields, ConnectionOptions } from './ConnectionTypes.js';
+import { ShapeDefaults, ShapeModelFields, ShapeOptions } from './ShapeTypes.js';
+/**
+ * Represents a typed item or a custom data object used for data binding in the `Diagram`.
+ * When `T` is provided, the item is a known typed option (e.g., `ShapeOptions` or `ConnectionOptions`).
+ * Otherwise, it can be a custom object that will be mapped using the corresponding model fields configuration.
+ */
+export type DiagramDataItem<T> = T | Record<string, unknown>;
+/**
+ * Defines the navigation configuration options for the `Diagram`.
+ */
+export interface DiagramNavigationOptions extends Pick<NavigationOptions, 'smallStep' | 'largeStep'> {
+    /**
+     * Controls whether navigation is enabled.
+     */
+    enabled?: boolean;
+}
+/**
+ * Represents the props of the [KendoReact Diagram component](https://www.telerik.com/kendo-react-ui/components/diagram).
+ */
+export interface DiagramProps {
+    /**
+     * Defines the default configuration options applicable to all connections.
+     */
+    connectionDefaults?: ConnectionDefaults;
+    /**
+     * Defines the connections that render between the shapes in the `Diagram`.
+     * Accepts either an array of `ConnectionOptions` or an array of any objects
+     * that will be mapped using the `connectionModelFields` configuration.
+     */
+    connections?: DiagramDataItem<ConnectionOptions>[];
+    /**
+     * Defines the field mapping configuration for connections data binding.
+     * Maps source object properties to `Diagram` connection properties.
+     * Only used when `connections` is an array of custom objects instead of `ConnectionOptions`.
+     */
+    connectionModelFields?: ConnectionModelFields;
+    /**
+     * A set of settings to configure the `Diagram` behavior when the user attempts to drag, resize, or remove shapes.
+     * Changing the property value dynamically triggers a reinitialization of the `Diagram`.
+     *
+     * @default true
+     */
+    editable?: boolean | DiagramEditable;
+    /**
+     * Defines the layout configuration for arranging shapes and connections in the `Diagram`.
+     */
+    layout?: DiagramLayout;
+    /**
+     * Defines the pannable options. Use this setting to disable `Diagram` pan or change the key that activates the pan behavior.
+     *
+     * @default true
+     */
+    pannable?: boolean | Pannable;
+    /**
+     * Defines the `Diagram` selection options.
+     *
+     * @default true
+     */
+    selectable?: boolean | Selectable;
+    /**
+     * Defines the default configuration options applicable to all shapes.
+     */
+    shapeDefaults?: ShapeDefaults;
+    /**
+     * Defines the shapes that render in the `Diagram`.
+     * Accepts either an array of `ShapeOptions` or an array of any objects
+     * that will be mapped using the `shapeModelFields` configuration.
+     */
+    shapes?: DiagramDataItem<ShapeOptions>[];
+    /**
+     * Defines the field mapping configuration for shapes data binding.
+     * Maps source object properties to `Diagram` shape properties.
+     * Only used when `shapes` is an array of custom objects instead of `ShapeOptions`.
+     */
+    shapeModelFields?: ShapeModelFields;
+    /**
+     * Defines the zoom level of the `Diagram`.
+     *
+     * @default 1
+     */
+    zoom?: number;
+    /**
+     * Defines the maximum zoom level of the `Diagram`.
+     *
+     * @default 2
+     */
+    zoomMax?: number;
+    /**
+     * Defines the minimum zoom level of the `Diagram`.
+     *
+     * @default 0.1
+     */
+    zoomMin?: number;
+    /**
+     * Defines the zoom rate of the `Diagram`.
+     *
+     * @default 0.1
+     */
+    zoomRate?: number;
+    /**
+     * Enables keyboard navigation in the `Diagram`.
+     * When set to `true`, navigate between shapes using arrow keys.
+     * Alternatively, pass a `DiagramNavigationOptions` object to customize navigation behavior.
+     *
+     * @default true
+     *
+     * @remarks
+     * This property is related to accessibility.
+     */
+    navigable?: boolean | DiagramNavigationOptions;
+    /**
+     * Fires when a shape or connection is created or removed.
+     */
+    onChange?: (event: DiagramChangeEvent) => void;
+    /**
+     * Fires when the user clicks on a shape or a connection.
+     */
+    onDiagramClick?: (event: DiagramDomEvent) => void;
+    /**
+     * Fires when the user drags an item.
+     */
+    onDrag?: (event: DiagramDragEvent) => void;
+    /**
+     * Fires when the user stops dragging an item.
+     */
+    onDragEnd?: (event: DiagramDragEvent) => void;
+    /**
+     * Fires when the user starts dragging an item.
+     */
+    onDragStart?: (event: DiagramDragEvent) => void;
+    /**
+     * Fires when the location or size of an item are changed.
+     */
+    onShapeBoundsChange?: (event: DiagramItemBoundsChangeEvent) => void;
+    /**
+     * Fires when the mouse pointer enters a shape or connection.
+     */
+    onMouseEnter?: (event: DiagramDomEvent) => void;
+    /**
+     * Fires when the mouse pointer leaves a shape or connection.
+     */
+    onMouseLeave?: (event: DiagramDomEvent) => void;
+    /**
+     * Fires when the user pans the `Diagram`.
+     */
+    onPan?: (event: DiagramPanEvent) => void;
+    /**
+     * Fires when the user selects one or more items.
+     */
+    onSelect?: (event: DiagramSelectEvent) => void;
+    /**
+     * Fires when the `Diagram` has finished zooming out.
+     */
+    onZoomEnd?: (event: DiagramZoomEndEvent) => void;
+    /**
+     * Fires when the `Diagram` starts zooming in or out.
+     */
+    onZoomStart?: (event: DiagramZoomStartEvent) => void;
+    /**
+     * Fires when a tooltip should be shown for a shape or connection.
+     */
+    onTooltipShow?: (item: ShapeOptions | ConnectionOptions) => void;
+    /**
+     * Fires when a tooltip should be hidden.
+     */
+    onTooltipHide?: (item: ShapeOptions | ConnectionOptions) => void;
+    /**
+     * Sets the inline styles for the outermost wrapper element of the `Diagram`.
+     *
+     * @example
+     * ```tsx
+     * <Diagram style={{ height: 500 }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets additional CSS class names on the outermost wrapper element of the `Diagram`.
+     *
+     * @example
+     * ```tsx
+     * <Diagram className="my-diagram" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Sets the `role` attribute on the outermost wrapper element of the `Diagram`.
+     *
+     * @default 'application'
+     */
+    role?: string;
+    /**
+     * Sets the `aria-label` attribute on the outermost wrapper element of the `Diagram`.
+     */
+    ariaLabel?: string;
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+}

package/interfaces/ShapeTypes.d.ts

@@ -0,0 +1,139 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ShapeDefaultsBase, ShapeOptionsBase } from '@progress/kendo-diagram-common';
+import { TooltipOptions } from './TooltipTypes.js';
+/**
+ * Defines the configuration options for diagram shapes.
+ * Extends the base shape options and adds tooltip support.
+ */
+export interface ShapeOptions extends Omit<ShapeOptionsBase, ''> {
+    /**
+     * Configures the tooltip that displays when you hover over the shape.
+     */
+    tooltip?: TooltipOptions;
+    /**
+     * Sets the text content displayed in the tooltip.
+     */
+    tooltipText?: string;
+}
+/**
+ * Defines the default configuration options for all shapes in the `Diagram`.
+ * These settings apply to shapes unless overridden by individual shape options.
+ */
+export interface ShapeDefaults extends Omit<ShapeDefaultsBase, ''> {
+    /**
+     * Configures the default tooltip settings for all shapes.
+     */
+    tooltip?: TooltipOptions;
+}
+/**
+ * Defines the field mapping configuration for shapes data binding.
+ * Maps source object properties to `Diagram` shape properties.
+ */
+export interface ShapeModelFields {
+    /**
+     * The field that contains the unique identifier of the shape.
+     */
+    id?: string;
+    /**
+     * The field that contains the connectors configuration.
+     */
+    connectors?: string;
+    /**
+     * The field that contains the connector defaults configuration.
+     */
+    connectorDefaults?: string;
+    /**
+     * The field that contains the content configuration.
+     */
+    content?: string;
+    /**
+     * The field that contains the editable configuration.
+     */
+    editable?: string;
+    /**
+     * The field that contains the fill configuration.
+     */
+    fill?: string;
+    /**
+     * The field that contains the height value.
+     */
+    height?: string;
+    /**
+     * The field that contains the hover configuration.
+     */
+    hover?: string;
+    /**
+     * The field that contains the minimum height value.
+     */
+    minHeight?: string;
+    /**
+     * The field that contains the minimum width value.
+     */
+    minWidth?: string;
+    /**
+     * The field that contains the path configuration.
+     */
+    path?: string;
+    /**
+     * The field that contains the rotation configuration.
+     */
+    rotation?: string;
+    /**
+     * The field that contains the selectable configuration.
+     */
+    selectable?: string;
+    /**
+     * The field that contains the source configuration.
+     */
+    source?: string;
+    /**
+     * The field that contains the stroke configuration.
+     */
+    stroke?: string;
+    /**
+     * The field that contains the type configuration.
+     */
+    type?: string;
+    /**
+     * The field that contains the visual configuration.
+     */
+    visual?: string;
+    /**
+     * The field that contains the width value.
+     */
+    width?: string;
+    /**
+     * The field that contains the x coordinate.
+     */
+    x?: string;
+    /**
+     * The field that contains the y coordinate.
+     */
+    y?: string;
+    /**
+     * The field that contains the corner radius value.
+     */
+    cornerRadius?: string;
+    /**
+     * The field that contains the center configuration.
+     */
+    center?: string;
+    /**
+     * The field that contains the radius value.
+     */
+    radius?: string;
+    /**
+     * The field that contains the data item reference.
+     */
+    dataItem?: string;
+    /**
+     * The field that contains the tooltip text.
+     */
+    tooltipText?: string;
+}

package/interfaces/TooltipTypes.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
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Defines the tooltip configuration for shapes and connections.
+ * Controls the visibility, content, and styling of tooltips.
+ */
+export interface TooltipOptions {
+    /**
+     * Controls whether the tooltip displays when you hover over the item.
+     */
+    visible?: boolean;
+    /**
+     * Sets custom CSS classes for the Tooltip wrapper element.
+     */
+    cssClass?: string;
+}

package/interfaces/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+export * from './TooltipTypes.js';
+export * from './DiagramEventTypes.js';
+export * from './ShapeTypes.js';
+export * from './ConnectionTypes.js';
+export * from './DiagramTypes.js';

package/package-metadata.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;

package/package-metadata.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-diagram",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1775209720,version:"14.3.1-develop.3",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"});exports.packageMetadata=e;

package/package-metadata.mjs

@@ -0,0 +1,13 @@
+/**
+ * @hidden
+ */
+export const packageMetadata = Object.freeze({
+    name: '@progress/kendo-react-diagram',
+    productName: 'KendoReact',
+    productCode: 'KENDOUIREACT',
+    productCodes: ['KENDOUIREACT'],
+    publishDate: 1775209720,
+    version: '14.3.1-develop.3',
+    licensingDocsUrl:
+        'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
+});

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@progress/kendo-react-diagram",
+  "version": "14.3.1-develop.3",
+  "description": "React Diagram component. KendoReact Diagram package",
+  "author": "Progress",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "homepage": "https://www.telerik.com/kendo-react-ui",
+  "main": "./index.js",
+  "module": "./index.mjs",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./index.d.mts",
+        "default": "./index.mjs"
+      },
+      "require": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      }
+    },
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "@progress/kendo-licensing": "^1.7.2",
+    "@progress/kendo-react-common": "14.3.1-develop.3",
+    "@progress/kendo-diagram-common": "0.0.0-PLACEHOLDER",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "prop-types": "^15.6.0"
+  },
+  "keywords": [
+    "Kendo UI",
+    "React",
+    "Progress",
+    "diagram",
+    "KendoReact",
+    "reactjs",
+    "UI",
+    "components",
+    "React component",
+    "Telerik"
+  ],
+  "@progress": {
+    "friendlyName": "Diagram",
+    "framework": "KendoReact",
+    "package": {
+      "productName": "KendoReact",
+      "productCode": "KENDOUIREACT",
+      "publishDate": 1775209720,
+      "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/telerik/kendo-react.git"
+  }
+}

package/utils/consts.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DiagramNavigationOptions, DiagramDataItem } from '../interfaces/index.js';
+import { ConnectionOptions } from '../interfaces/ConnectionTypes.js';
+import { ShapeOptions } from '../interfaces/ShapeTypes.js';
+/**
+ * @hidden
+ */
+export declare const DIAGRAM_CLASSNAME = "k-diagram";
+/**
+ * @hidden
+ */
+export declare const DEFAULT_NAVIGABLE_OPTIONS: DiagramNavigationOptions;
+/**
+ * @hidden
+ */
+export declare const diagramDefaultProps: {
+    connections: DiagramDataItem<ConnectionOptions>[];
+    shapes: DiagramDataItem<ShapeOptions>[];
+    editable: boolean;
+    pannable: {
+        enabled: boolean;
+        showScrollbars: boolean;
+        autoHideScrollbars: boolean;
+    };
+    selectable: boolean;
+    zoom: number;
+    zoomMax: number;
+    zoomMin: number;
+    zoomRate: number;
+    role: string;
+};

package/utils/consts.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={enabled:!0,smallStep:1,largeStep:5},a={connections:[],shapes:[],editable:!0,pannable:{enabled:!0,showScrollbars:!0,autoHideScrollbars:!0},selectable:!0,zoom:1,zoomMax:2,zoomMin:.1,zoomRate:.1,role:"application"};exports.DEFAULT_NAVIGABLE_OPTIONS=e;exports.diagramDefaultProps=a;

package/utils/consts.mjs

@@ -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
+ *-------------------------------------------------------------------------------------------
+ */
+const e = { enabled: !0, smallStep: 1, largeStep: 5 }, o = {
+  connections: [],
+  shapes: [],
+  editable: !0,
+  pannable: {
+    enabled: !0,
+    showScrollbars: !0,
+    autoHideScrollbars: !0
+  },
+  selectable: !0,
+  zoom: 1,
+  zoomMax: 2,
+  zoomMin: 0.1,
+  zoomRate: 0.1,
+  role: "application"
+};
+export {
+  e as DEFAULT_NAVIGABLE_OPTIONS,
+  o as diagramDefaultProps
+};

package/utils/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+export * from './consts.js';
+export * from './navigate.js';

package/utils/navigate.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
+ *-------------------------------------------------------------------------------------------
+ */
+import { DiagramNavigationOptions } from '../interfaces/index.js';
+import { NavigationOptions } from '@progress/kendo-diagram-common';
+/**
+ * @hidden
+ */
+export declare const normalizeNavigable: (navigable: boolean | DiagramNavigationOptions | undefined) => DiagramNavigationOptions;
+/**
+ * @hidden
+ */
+export declare const toNavigationOptions: (nav: DiagramNavigationOptions) => NavigationOptions;

package/utils/navigate.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./consts.js"),o=e=>{var r;return e===void 0||e===!0?t.DEFAULT_NAVIGABLE_OPTIONS:e===!1?{...t.DEFAULT_NAVIGABLE_OPTIONS,enabled:!1}:{...t.DEFAULT_NAVIGABLE_OPTIONS,...e,enabled:(r=e.enabled)!=null?r:!0}},l=e=>({disabled:!e.enabled,smallStep:e.smallStep,largeStep:e.largeStep});exports.normalizeNavigable=o;exports.toNavigationOptions=l;

package/utils/navigate.mjs

@@ -0,0 +1,24 @@
+/**
+ * @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_NAVIGABLE_OPTIONS as t } from "./consts.mjs";
+const o = (e) => {
+  var r;
+  return e === void 0 || e === !0 ? t : e === !1 ? { ...t, enabled: !1 } : {
+    ...t,
+    ...e,
+    enabled: (r = e.enabled) != null ? r : !0
+  };
+}, s = (e) => ({
+  disabled: !e.enabled,
+  smallStep: e.smallStep,
+  largeStep: e.largeStep
+});
+export {
+  o as normalizeNavigable,
+  s as toNavigationOptions
+};