@progress/kendo-react-diagram 16.1.0 → 16.2.0-develop.2

package/rich-text-editing/connection-types.mjs

@@ -0,0 +1,33 @@
+/**
+ * @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 n from "react";
+import { useLocalization as l } from "@progress/kendo-react-intl";
+import { EditingUtils as i } from "@progress/kendo-diagram-common";
+import { editingConnectionType as e, messages as r, editingConnectionTypePolyline as m, editingConnectionTypeCascading as g } from "../messages/index.mjs";
+import { IconsDropdown as d } from "./Icons-Dropdown.mjs";
+import { localizeDataLabels as u, dropdownPopupClass as y } from "./utils.mjs";
+const t = i.Data.connectionTypes, T = i.Icons.diagonalLineIcon, C = {
+  cascading: g,
+  polyline: m
+}, D = (c) => {
+  const o = l(), a = o.toLanguageString(e, r[e]), s = n.useMemo(() => u(t, o, C, (p) => p.value), [o]);
+  return /* @__PURE__ */ n.createElement(
+    d,
+    {
+      ...c,
+      data: s,
+      buttonIcon: T,
+      buttonTitle: a,
+      columns: t.length,
+      popupClass: y
+    }
+  );
+};
+export {
+  D as ConnectionTypes
+};

package/rich-text-editing/default-toolbar-tools.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ToolbarTools } from './types';
+/**
+ * The default set of tools for the main toolbar.
+ *
+ * The configuration is an array of tool identifiers:
+ * - 'undo': Undo tool
+ * - 'redo': Redo tool
+ * - 'separator': Separator
+ * - 'select': Select tool
+ * - 'pan': Pan tool
+ * - 'separator': Separator
+ * - 'text': Text insertion tool
+ * - 'separator': Separator
+ * - 'shape': Shape insertion tool
+ */
+export declare const defaultMainToolbarTools: ToolbarTools;
+/**
+ * The default set of tools for the shape editing toolbar.
+ *
+ * The configuration is an array of tool identifiers:
+ * - 'type': Shape type tool
+ * - 'backColor': Fill color tool
+ * - 'separator': Separator
+ * - 'borderWidth': Border width tool
+ * - 'borderColor': Border color tool
+ * - 'borderStyle': Border style tool
+ * - 'separator': Separator
+ * - ['toFront', 'toBack']: Z-order tools in a group
+ * - 'separator': Separator
+ * - ['rotateLeft', 'rotateRight']: Rotation tools in a group
+ * - 'separator': Separator
+ * - ['duplicate', 'delete']: Duplicate and delete tools in a group
+ */
+export declare const defaultShapeToolbarTools: ToolbarTools;
+/**
+ * The default set of tools for the connection editing toolbar.
+ *
+ * The configuration is an array of tool identifiers:
+ * - 'color': Stroke color tool
+ * - 'separator': Separator
+ * - 'width': Stroke width tool
+ * - 'separator': Separator
+ * - 'style': Stroke style tool
+ * - 'separator': Separator
+ * - 'text': Text editing tool
+ * - 'separator': Separator
+ * - 'startCap': Start cap type tool
+ * - 'separator': Separator
+ * - 'type': Connection type tool
+ * - 'separator': Separator
+ * - 'endCap': End cap type tool
+ * - 'separator': Separator
+ * - 'delete': Delete tool
+ */
+export declare const defaultConnectionToolbarTools: ToolbarTools;
+/**
+ * The default set of tools for the text editing toolbar.
+ *
+ * The configuration is an array of tool identifiers:
+ * - 'color': Text color tool
+ * - 'separator': Separator
+ * - 'fontSize': Font size tool
+ * - 'separator': Separator
+ * - 'fontType': Font type tool
+ * - 'separator': Separator
+ * - ['bold', 'italic', 'underline']: Text formatting tools in a group
+ * - 'separator': Separator
+ * - 'align': Text alignment tool
+ */
+export declare const defaultTextToolbarTools: ToolbarTools;

package/rich-text-editing/default-toolbar-tools.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 o=["undo","redo","separator","select","pan","separator","text","separator","shape"],a=["type","backColor","separator","borderWidth","borderColor","borderStyle","separator",["toFront","toBack"],"separator",["rotateLeft","rotateRight"],"separator",["duplicate","delete"]],t=["color","separator","width","separator","style","separator","text","separator","startCap","separator","type","separator","endCap","separator","delete"],e=["color","separator","fontSize","separator","fontType","separator",["bold","italic","underline"],"separator","align"];exports.defaultConnectionToolbarTools=t;exports.defaultMainToolbarTools=o;exports.defaultShapeToolbarTools=a;exports.defaultTextToolbarTools=e;

package/rich-text-editing/default-toolbar-tools.mjs

@@ -0,0 +1,63 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+const o = [
+  "undo",
+  "redo",
+  "separator",
+  "select",
+  "pan",
+  "separator",
+  "text",
+  "separator",
+  "shape"
+], a = [
+  "type",
+  "backColor",
+  "separator",
+  "borderWidth",
+  "borderColor",
+  "borderStyle",
+  "separator",
+  ["toFront", "toBack"],
+  "separator",
+  ["rotateLeft", "rotateRight"],
+  "separator",
+  ["duplicate", "delete"]
+], r = [
+  "color",
+  "separator",
+  "width",
+  "separator",
+  "style",
+  "separator",
+  "text",
+  "separator",
+  "startCap",
+  "separator",
+  "type",
+  "separator",
+  "endCap",
+  "separator",
+  "delete"
+], t = [
+  "color",
+  "separator",
+  "fontSize",
+  "separator",
+  "fontType",
+  "separator",
+  ["bold", "italic", "underline"],
+  "separator",
+  "align"
+];
+export {
+  r as defaultConnectionToolbarTools,
+  o as defaultMainToolbarTools,
+  a as defaultShapeToolbarTools,
+  t as defaultTextToolbarTools
+};

package/rich-text-editing/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+export { DiagramEditor } from './DiagramEditor.js';
+export { defaultTextToolbarTools } from './default-toolbar-tools.js';
+export * from './types';

package/rich-text-editing/shapes-dropdown.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FlowchartShapeType, DiagramEditorOverlayOwner } from '@progress/kendo-diagram-common';
+import { ButtonHandle } from '@progress/kendo-react-buttons';
+import * as React from 'react';
+/** @hidden */
+export interface ShapeSelectorProps {
+    onSelect: (type: FlowchartShapeType) => void;
+    onOpenChange?: (open: boolean) => void;
+    value: FlowchartShapeType | null;
+    active?: boolean;
+    buttonTitle: string;
+    shapes?: FlowchartShapeType[];
+    popupClass?: string;
+    overlayOwner: DiagramEditorOverlayOwner;
+}
+/** @hidden */
+export declare const ShapeSelector: React.ForwardRefExoticComponent<ShapeSelectorProps & React.RefAttributes<ButtonHandle>>;

package/rich-text-editing/shapes-dropdown.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 u=require("react"),e=require("@progress/kendo-diagram-common"),g=require("@progress/kendo-react-intl"),t=require("../messages/index.js"),d=require("./Icons-Dropdown.js"),y=require("@progress/kendo-svg-icons"),w=require("./utils.js");function T(o){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const i in o)if(i!=="default"){const r=Object.getOwnPropertyDescriptor(o,i);Object.defineProperty(a,i,r.get?r:{enumerable:!0,get:()=>o[i]})}}return a.default=o,Object.freeze(a)}const h=T(u),{shapesData:D}=e.EditingUtils.Icons,{workflowShapes:m}=e.EditingUtils.Data,F={[e.FlowchartShapeType.Collate]:t.editingShapeCollate,[e.FlowchartShapeType.OnPageConnector]:t.editingShapeConnector,[e.FlowchartShapeType.DataStorage]:t.editingShapeDataStorage,[e.FlowchartShapeType.Database]:t.editingShapeDatabase,[e.FlowchartShapeType.Decision]:t.editingShapeDecision,[e.FlowchartShapeType.Delay]:t.editingShapeDelay,[e.FlowchartShapeType.DirectAccessStorage]:t.editingShapeDirectAccessStorage,[e.FlowchartShapeType.Display]:t.editingShapeDisplay,[e.FlowchartShapeType.Document]:t.editingShapeDocument,[e.FlowchartShapeType.Extract]:t.editingShapeExtract,[e.FlowchartShapeType.DataInputOutput]:t.editingShapeInputOutput,[e.FlowchartShapeType.InternalStorage]:t.editingShapeInternalStorage,[e.FlowchartShapeType.LogicalOr]:t.editingShapeLogicalOr,[e.FlowchartShapeType.ManualInputOutput]:t.editingShapeManualInputOutput,[e.FlowchartShapeType.ManualOperation]:t.editingShapeManualOperation,[e.FlowchartShapeType.Merge]:t.editingShapeMerge,[e.FlowchartShapeType.MultipleDocuments]:t.editingShapeMultipleDocuments,[e.FlowchartShapeType.OffPageConnector]:t.editingShapeOffPageConnector,[e.FlowchartShapeType.PredefinedProcess]:t.editingShapePredefinedProcess,[e.FlowchartShapeType.Preparation]:t.editingShapePreparation,[e.FlowchartShapeType.Process]:t.editingShapeProcess,[e.FlowchartShapeType.Sort]:t.editingShapeSort,[e.FlowchartShapeType.SummingJunction]:t.editingShapeSummingJunction,[e.FlowchartShapeType.Terminator]:t.editingShapeTerminator},f=h.forwardRef(function(a,i){const r=g.useLocalization(),p=h.useMemo(()=>w.localizeDataLabels(D,r,F,l=>l.type),[r]),s=h.useMemo(()=>{const l=new Map(p.map(({label:c,icon:n,type:S})=>[S,{icon:n,label:c}]));return(a.shapes||m).map(c=>{const n=l.get(c);return{label:(n==null?void 0:n.label)||p[0].label,icon:(n==null?void 0:n.icon)||p[0].icon,value:c}})},[p,a.shapes]);return h.createElement(d.IconsDropdown,{...a,ref:i,data:s,buttonIcon:y.shapesIcon,buttonTitle:a.buttonTitle,columns:4})});exports.ShapeSelector=f;

package/rich-text-editing/shapes-dropdown.mjs

@@ -0,0 +1,66 @@
+/**
+ * @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 o from "react";
+import { EditingUtils as c, FlowchartShapeType as e } from "@progress/kendo-diagram-common";
+import { useLocalization as S } from "@progress/kendo-react-intl";
+import { editingShapeTerminator as u, editingShapeSummingJunction as h, editingShapeSort as d, editingShapeProcess as m, editingShapePreparation as D, editingShapePredefinedProcess as f, editingShapeOffPageConnector as M, editingShapeMultipleDocuments as O, editingShapeMerge as P, editingShapeManualOperation as I, editingShapeManualInputOutput as b, editingShapeLogicalOr as y, editingShapeInternalStorage as w, editingShapeInputOutput as C, editingShapeExtract as T, editingShapeDocument as z, editingShapeDisplay as E, editingShapeDirectAccessStorage as L, editingShapeDelay as x, editingShapeDecision as A, editingShapeDatabase as J, editingShapeDataStorage as R, editingShapeConnector as k, editingShapeCollate as v } from "../messages/index.mjs";
+import { IconsDropdown as B } from "./Icons-Dropdown.mjs";
+import { shapesIcon as F } from "@progress/kendo-svg-icons";
+import { localizeDataLabels as K } from "./utils.mjs";
+const { shapesData: U } = c.Icons, { workflowShapes: j } = c.Data, q = {
+  [e.Collate]: v,
+  [e.OnPageConnector]: k,
+  [e.DataStorage]: R,
+  [e.Database]: J,
+  [e.Decision]: A,
+  [e.Delay]: x,
+  [e.DirectAccessStorage]: L,
+  [e.Display]: E,
+  [e.Document]: z,
+  [e.Extract]: T,
+  [e.DataInputOutput]: C,
+  [e.InternalStorage]: w,
+  [e.LogicalOr]: y,
+  [e.ManualInputOutput]: b,
+  [e.ManualOperation]: I,
+  [e.Merge]: P,
+  [e.MultipleDocuments]: O,
+  [e.OffPageConnector]: M,
+  [e.PredefinedProcess]: f,
+  [e.Preparation]: D,
+  [e.Process]: m,
+  [e.Sort]: d,
+  [e.SummingJunction]: h,
+  [e.Terminator]: u
+}, Y = o.forwardRef(function(a, s) {
+  const p = S(), n = o.useMemo(() => K(U, p, q, (r) => r.type), [p]), l = o.useMemo(() => {
+    const r = new Map(n.map(({ label: i, icon: t, type: g }) => [g, { icon: t, label: i }]));
+    return (a.shapes || j).map((i) => {
+      const t = r.get(i);
+      return {
+        label: (t == null ? void 0 : t.label) || n[0].label,
+        icon: (t == null ? void 0 : t.icon) || n[0].icon,
+        value: i
+      };
+    });
+  }, [n, a.shapes]);
+  return /* @__PURE__ */ o.createElement(
+    B,
+    {
+      ...a,
+      ref: s,
+      data: l,
+      buttonIcon: F,
+      buttonTitle: a.buttonTitle,
+      columns: 4
+    }
+  );
+});
+export {
+  Y as ShapeSelector
+};

package/rich-text-editing/types.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 { DiagramEditorOptions } from '@progress/kendo-diagram-common';
+export type { ToolbarTools, FontTypeItem, FontSizeItem, ConnectionToolbarOptions, MainToolbarOptions, ShapeToolbarOptions, TextToolbarOptions } from '@progress/kendo-diagram-common';
+/**
+ * The props of the `DiagramEditor` component.
+ */
+export interface DiagramEditorProps extends DiagramEditorOptions {
+}

package/rich-text-editing/utils.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { messages } from '../messages/index.js';
+import { ToolbarTools } from './types';
+import * as React from 'react';
+type LocalizationLike = {
+    toLanguageString: (messageKey: string, defaultValue: string) => string;
+};
+/** @hidden */
+export declare const preventDefault: (e: {
+    preventDefault: () => void;
+}) => void;
+/** @hidden */
+export declare const preventFocusSteal: {
+    onMouseDown: (e: {
+        preventDefault: () => void;
+    }) => void;
+    onPointerDown: (e: {
+        preventDefault: () => void;
+    }) => void;
+};
+/** @hidden */
+export declare const floatingToolbarButtons: string[];
+/** @hidden */
+export declare const mapTools: (tools: ToolbarTools, toolsMap: {
+    [key: string]: {
+        component: React.ComponentType<any>;
+        props: any;
+    };
+}) => (React.JSX.Element | null)[];
+/** @hidden */
+export declare const localizeDataLabels: <T extends {
+    label: string;
+}, K extends string | number>(items: T[], localization: LocalizationLike, messageKeysMap: Partial<Record<string, keyof typeof messages>>, getItemKey: (item: T) => K) => (T & {
+    label: string;
+})[];
+/** @hidden */
+export declare const dropdownPopupClass = "k-diagram-context-toolbar-popup";
+/** @hidden */
+export declare const toolbarPopupWrapClass = "k-diagram-context-toolbar-container";
+/** @hidden */
+export declare const mainToolbarPopupClass = "k-diagram-main-toolbar-popup";
+export {};

package/rich-text-editing/utils.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 i=require("react"),b=require("@progress/kendo-react-buttons"),m=require("../messages/index.js");function g(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,n.get?n:{enumerable:!0,get:()=>t[o]})}}return e.default=t,Object.freeze(e)}const c=g(i),l=t=>t.preventDefault(),d={onMouseDown:l,onPointerDown:l},u=":not(.k-dropdownlist button):not(.k-colorpicker button):not(.k-split-button .k-split-button-arrow)",f=[`button${u}`,`.k-button-group > button${u}`,".k-colorpicker",".k-dropdownlist"],s=(t,e)=>`${t}-${e}`,p=(t,e)=>{if(!t)return null;const{component:o,props:n}=t;return c.createElement(o,{...n,key:e})},k=(t,e)=>t.map((o,n)=>Array.isArray(o)?c.createElement(b.ButtonGroup,{key:s("group",n)},o.map((r,a)=>p(e[r],s(r,a))).filter(Boolean)):p(e[o],s(o,n))).filter(Boolean),y=(t,e,o,n)=>t.map(r=>{const a=o[String(n(r))];return{...r,label:a?e.toLanguageString(a,m.messages[a]):r.label}}),P="k-diagram-context-toolbar-popup",D="k-diagram-context-toolbar-container",w="k-diagram-main-toolbar-popup";exports.dropdownPopupClass=P;exports.floatingToolbarButtons=f;exports.localizeDataLabels=y;exports.mainToolbarPopupClass=w;exports.mapTools=k;exports.preventDefault=l;exports.preventFocusSteal=d;exports.toolbarPopupWrapClass=D;

package/rich-text-editing/utils.mjs

@@ -0,0 +1,42 @@
+/**
+ * @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 c from "react";
+import { ButtonGroup as i } from "@progress/kendo-react-buttons";
+import { messages as m } from "../messages/index.mjs";
+const s = (o) => o.preventDefault(), g = {
+  onMouseDown: s,
+  onPointerDown: s
+}, l = ":not(.k-dropdownlist button):not(.k-colorpicker button):not(.k-split-button .k-split-button-arrow)", f = [
+  `button${l}`,
+  `.k-button-group > button${l}`,
+  ".k-colorpicker",
+  ".k-dropdownlist"
+], p = (o, t) => `${o}-${t}`, u = (o, t) => {
+  if (!o)
+    return null;
+  const { component: n, props: r } = o;
+  return /* @__PURE__ */ c.createElement(n, { ...r, key: t });
+}, d = (o, t) => o.map((n, r) => Array.isArray(n) ? /* @__PURE__ */ c.createElement(i, { key: p("group", r) }, n.map(
+  (e, a) => u(t[e], p(e, a))
+).filter(Boolean)) : u(t[n], p(n, r))).filter(Boolean), w = (o, t, n, r) => o.map((e) => {
+  const a = n[String(r(e))];
+  return {
+    ...e,
+    label: a ? t.toLanguageString(a, m[a]) : e.label
+  };
+}), y = "k-diagram-context-toolbar-popup", B = "k-diagram-context-toolbar-container", C = "k-diagram-main-toolbar-popup";
+export {
+  y as dropdownPopupClass,
+  f as floatingToolbarButtons,
+  w as localizeDataLabels,
+  C as mainToolbarPopupClass,
+  d as mapTools,
+  s as preventDefault,
+  g as preventFocusSteal,
+  B as toolbarPopupWrapClass
+};