@progress/kendo-react-diagram 16.2.0-develop.1 → 16.2.0-develop.10

package/rich-text-editing/FloatingToolbarPopup.mjs

@@ -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 l from "react";
+import { Popup as D } from "@progress/kendo-react-popup";
+import { EditingUtils as V, resolveFloatingToolbarPlacement as W } from "@progress/kendo-diagram-common";
+const { floatingToolbarStyle: M } = V.Data, Y = {
+  horizontal: "center",
+  vertical: "center"
+}, E = {
+  horizontal: "center",
+  vertical: "bottom"
+}, j = {
+  horizontal: "center",
+  vertical: "top"
+}, k = {
+  above: E,
+  below: j
+}, P = {
+  left: 0,
+  top: 0
+}, h = {
+  offset: P,
+  placement: "above",
+  visible: !1
+}, z = (e, t) => ({
+  left: e.left + (t ? t.left : 0),
+  top: e.top + (t ? t.top : 0)
+}), A = (e, t, s) => ({
+  offset: e || P,
+  placement: t,
+  visible: s
+}), q = (e) => (e == null ? void 0 : e.vertical) === "top" ? "below" : "above", w = (e, t) => e.visible === t.visible && e.offset.left === t.offset.left && e.offset.top === t.offset.top && e.placement === t.placement, I = ({
+  show: e,
+  baseAnchor: t,
+  fallbackAnchor: s = null,
+  boundaryElement: p,
+  anchorAlign: O = Y,
+  popupAlign: T = E,
+  offset: f = P,
+  children: x
+}) => {
+  const y = l.useRef(null), i = l.useRef(0), m = q(T), c = l.useMemo(() => t ? z(t, f) : null, [t, f]), v = l.useMemo(() => s ? z(s, f) : null, [s, f]), [u, b] = l.useState(() => c ? A(c, m, !0) : h), C = l.useCallback((o) => {
+    var a;
+    const r = (a = o == null ? void 0 : o.element) == null ? void 0 : a.querySelector(".k-popup");
+    y.current = r instanceof HTMLElement ? r : null, r instanceof HTMLElement && Object.keys(M).forEach((g) => {
+      const d = M[g];
+      r.style[g] = d;
+    });
+  }, []), R = e && !!t;
+  l.useLayoutEffect(() => {
+    var B, H;
+    if (!R || !c) {
+      b((n) => w(n, h) ? n : h);
+      return;
+    }
+    let o;
+    if (!p || !v) {
+      o = A(c, m, !0), b((n) => w(n, o) ? n : o);
+      return;
+    }
+    const r = ((B = y.current) == null ? void 0 : B.getBoundingClientRect().height) || i.current;
+    if (r > 0 && (i.current = r), i.current <= 0) {
+      o = A(c, m, !0), b((n) => w(n, o) ? n : o);
+      return;
+    }
+    const a = p.getBoundingClientRect(), d = (((H = p.ownerDocument) == null ? void 0 : H.defaultView) || window).scrollY;
+    o = W({
+      baseAnchor: c,
+      fallbackAnchor: v,
+      popupHeight: i.current,
+      boundaryTop: a.top + d,
+      boundaryBottom: a.bottom + d
+    }), b((n) => w(n, o) ? n : o);
+  }, [p, m, R, c, v]);
+  const F = R && (u.visible || i.current <= 0 || !p || !v), L = u.visible ? u.offset : c || P, S = u.visible ? k[u.placement] : T;
+  return /* @__PURE__ */ l.createElement(
+    D,
+    {
+      show: F,
+      anchorAlign: O,
+      popupAlign: S,
+      offset: L,
+      positionMode: "fixed",
+      ref: C,
+      animate: !1
+    },
+    x
+  );
+};
+export {
+  I as FloatingToolbarPopup
+};

package/rich-text-editing/Icons-Dropdown.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ButtonHandle } from '@progress/kendo-react-buttons';
+import { SVGIcon } from '@progress/kendo-react-common';
+import { DiagramEditorOverlayOwner } from '@progress/kendo-diagram-common';
+import * as React from 'react';
+interface IconsData {
+    label: string;
+    icon: SVGIcon;
+    value: string;
+}
+interface IconsDropdownProps {
+    value: any;
+    onSelect: (value: any) => void;
+    onOpenChange?: (open: boolean) => void;
+    data: IconsData[];
+    buttonIcon: SVGIcon;
+    buttonTitle: string;
+    columns: number;
+    active?: boolean;
+    popupClass?: string;
+    overlayOwner: DiagramEditorOverlayOwner;
+}
+/** @hidden */
+export declare const IconsDropdown: React.ForwardRefExoticComponent<IconsDropdownProps & React.RefAttributes<ButtonHandle>>;
+export {};

package/rich-text-editing/Icons-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 F=require("react"),q=require("@progress/kendo-react-buttons"),P=require("@progress/kendo-react-common"),z=require("@progress/kendo-react-popup"),H=require("@progress/kendo-svg-icons"),S=require("./DiagramEditorContext.js"),K=require("./utils.js");function L(r){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const a in r)if(a!=="default"){const g=Object.getOwnPropertyDescriptor(r,a);Object.defineProperty(m,a,g.get?g:{enumerable:!0,get:()=>r[a]})}}return m.default=r,Object.freeze(m)}const t=L(F),_=t.forwardRef((r,m)=>{var C;const a=t.useRef(null),g=t.useRef(null),b=t.useRef(null),w=t.useRef(null),i=t.useRef(null),p=t.useRef(!1),{controller:I}=S.useDiagramEditorContext(),{open:f,setOpen:O}=S.useControlledDiagramOverlay(r.overlayOwner),{columns:v}=r,y=t.useRef(r);y.current=r,t.useImperativeHandle(m,()=>a.current,[]);const d=t.useCallback(e=>{var c,u;const n=typeof e=="function"?e(f):e;n!==f&&((u=(c=y.current).onOpenChange)==null||u.call(c,n),O(n))},[O,f]),M=t.useCallback(()=>{d(e=>(e&&(p.current=!0),!e))},[d]),N=t.useCallback(()=>{var R,E,T;let e=[];const n=(o,s)=>{var k;const D=e.indexOf(o)+s;(k=e.at(D%e.length))==null||k.focus()},c=(o,s)=>{var k;const D=e.indexOf(o)-s;(k=e.at((D+e.length)%e.length))==null||k.focus()};b.current=new P.Navigation({root:g,selectors:["button"],keyboardEvents:{keydown:{ArrowRight:(o,s,l)=>{l.preventDefault(),s.focusNext(o)},ArrowLeft:(o,s,l)=>{l.preventDefault(),s.focusPrevious(o)},ArrowDown:(o,s,l)=>{l.preventDefault(),n(o,v)},ArrowUp:(o,s,l)=>{l.preventDefault(),c(o,v)},Escape:(o,s,l)=>{l.preventDefault(),p.current=!0,d(!1)}}},tabIndex:0}),e=(R=b.current)==null?void 0:R.elements;const u=y.current.data.findIndex(o=>o.value===y.current.value);u>=0?(E=e[u])==null||E.focus():(T=b.current.first)==null||T.focus()},[v,d]),x=t.useCallback(()=>{var e,n;b.current=null,p.current&&((n=(e=a.current)==null?void 0:e.element)==null||n.focus(),p.current=!1)},[]),j=t.useCallback(e=>{var c,u;(c=i.current)==null||c.call(i);const n=(u=e==null?void 0:e.element)==null?void 0:u.querySelector(".k-popup");if(f&&n instanceof HTMLElement){w.current=n,i.current=I.registerSurface(n);return}w.current=null,i.current=null},[I,f]);t.useEffect(()=>{f||x()},[x,f]);const B=t.useMemo(()=>v!==4?{gridTemplateColumns:`repeat(${v}, max-content)`}:{},[v]),A=t.useCallback(e=>{var n;(n=b.current)==null||n.triggerKeyboardEvent(e)},[]),h=t.useCallback(e=>{var n,c,u,R;!((c=(n=a.current)==null?void 0:n.element)!=null&&c.contains(e.relatedTarget))&&!((u=g.current)!=null&&u.contains(e.relatedTarget))&&!((R=w.current)!=null&&R.contains(e.relatedTarget))&&d(!1)},[d]);return t.useEffect(()=>()=>{var e;(e=i.current)==null||e.call(i),i.current=null},[]),t.createElement(t.Fragment,null,t.createElement(q.Button,{svgIcon:r.buttonIcon,endIcon:t.createElement(P.SvgIcon,{icon:H.chevronDownIcon}),onClick:M,ref:a,type:"button",fillMode:"flat",togglable:r.active!==void 0,selected:r.active===!0,title:r.buttonTitle,"aria-label":r.buttonTitle}),t.createElement(z.Popup,{anchor:(C=a.current)==null?void 0:C.element,show:f,popupClass:r.popupClass,onOpen:N,ref:j},t.createElement("div",{className:"k-diagram-shapes-container",style:B,onKeyDown:A,ref:g,onBlur:h},r.data.map(({label:e,icon:n,value:c},u)=>t.createElement(q.Button,{key:e+u,fillMode:"flat",title:e,"aria-label":e,onClick:()=>{p.current=!0,d(!1),r.onSelect(c)},togglable:!0,selected:r.value===c,type:"button",svgIcon:n,iconSize:"large",...K.preventFocusSteal})))))});_.displayName="IconsDropdown";exports.IconsDropdown=_;

package/rich-text-editing/Icons-Dropdown.mjs

@@ -0,0 +1,160 @@
+/**
+ * @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 t from "react";
+import { Button as T } from "@progress/kendo-react-buttons";
+import { Navigation as F, SvgIcon as H } from "@progress/kendo-react-common";
+import { Popup as K } from "@progress/kendo-react-popup";
+import { chevronDownIcon as L } from "@progress/kendo-svg-icons";
+import { useDiagramEditorContext as S, useControlledDiagramOverlay as q } from "./DiagramEditorContext.mjs";
+import { preventFocusSteal as z } from "./utils.mjs";
+const U = t.forwardRef((o, N) => {
+  var C;
+  const d = t.useRef(null), x = t.useRef(null), v = t.useRef(null), k = t.useRef(null), s = t.useRef(null), g = t.useRef(!1), { controller: y } = S(), { open: f, setOpen: E } = q(o.overlayOwner), { columns: m } = o, R = t.useRef(o);
+  R.current = o, t.useImperativeHandle(N, () => d.current, []);
+  const i = t.useCallback(
+    (e) => {
+      var c, l;
+      const n = typeof e == "function" ? e(f) : e;
+      n !== f && ((l = (c = R.current).onOpenChange) == null || l.call(c, n), E(n));
+    },
+    [E, f]
+  ), A = t.useCallback(() => {
+    i((e) => (e && (g.current = !0), !e));
+  }, [i]), M = t.useCallback(() => {
+    var p, D, O;
+    let e = [];
+    const n = (r, a) => {
+      var b;
+      const w = e.indexOf(r) + a;
+      (b = e.at(w % e.length)) == null || b.focus();
+    }, c = (r, a) => {
+      var b;
+      const w = e.indexOf(r) - a;
+      (b = e.at((w + e.length) % e.length)) == null || b.focus();
+    };
+    v.current = new F({
+      root: x,
+      selectors: ["button"],
+      keyboardEvents: {
+        keydown: {
+          ArrowRight: (r, a, u) => {
+            u.preventDefault(), a.focusNext(r);
+          },
+          ArrowLeft: (r, a, u) => {
+            u.preventDefault(), a.focusPrevious(r);
+          },
+          ArrowDown: (r, a, u) => {
+            u.preventDefault(), n(r, m);
+          },
+          ArrowUp: (r, a, u) => {
+            u.preventDefault(), c(r, m);
+          },
+          Escape: (r, a, u) => {
+            u.preventDefault(), g.current = !0, i(!1);
+          }
+        }
+      },
+      tabIndex: 0
+    }), e = (p = v.current) == null ? void 0 : p.elements;
+    const l = R.current.data.findIndex((r) => r.value === R.current.value);
+    l >= 0 ? (D = e[l]) == null || D.focus() : (O = v.current.first) == null || O.focus();
+  }, [m, i]), I = t.useCallback(() => {
+    var e, n;
+    v.current = null, g.current && ((n = (e = d.current) == null ? void 0 : e.element) == null || n.focus(), g.current = !1);
+  }, []), P = t.useCallback(
+    (e) => {
+      var c, l;
+      (c = s.current) == null || c.call(s);
+      const n = (l = e == null ? void 0 : e.element) == null ? void 0 : l.querySelector(".k-popup");
+      if (f && n instanceof HTMLElement) {
+        k.current = n, s.current = y.registerSurface(n);
+        return;
+      }
+      k.current = null, s.current = null;
+    },
+    [y, f]
+  );
+  t.useEffect(() => {
+    f || I();
+  }, [I, f]);
+  const _ = t.useMemo(
+    () => m !== 4 ? {
+      // 4 columns is the default from the theme, so we don't need to set a style for that case
+      gridTemplateColumns: `repeat(${m}, max-content)`
+    } : {},
+    [m]
+  ), h = t.useCallback((e) => {
+    var n;
+    (n = v.current) == null || n.triggerKeyboardEvent(e);
+  }, []), B = t.useCallback(
+    (e) => {
+      var n, c, l, p;
+      !((c = (n = d.current) == null ? void 0 : n.element) != null && c.contains(e.relatedTarget)) && !((l = x.current) != null && l.contains(e.relatedTarget)) && !((p = k.current) != null && p.contains(e.relatedTarget)) && i(!1);
+    },
+    [i]
+  );
+  return t.useEffect(() => () => {
+    var e;
+    (e = s.current) == null || e.call(s), s.current = null;
+  }, []), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+    T,
+    {
+      svgIcon: o.buttonIcon,
+      endIcon: /* @__PURE__ */ t.createElement(H, { icon: L }),
+      onClick: A,
+      ref: d,
+      type: "button",
+      fillMode: "flat",
+      togglable: o.active !== void 0,
+      selected: o.active === !0,
+      title: o.buttonTitle,
+      "aria-label": o.buttonTitle
+    }
+  ), /* @__PURE__ */ t.createElement(
+    K,
+    {
+      anchor: (C = d.current) == null ? void 0 : C.element,
+      show: f,
+      popupClass: o.popupClass,
+      onOpen: M,
+      ref: P
+    },
+    /* @__PURE__ */ t.createElement(
+      "div",
+      {
+        className: "k-diagram-shapes-container",
+        style: _,
+        onKeyDown: h,
+        ref: x,
+        onBlur: B
+      },
+      o.data.map(({ label: e, icon: n, value: c }, l) => /* @__PURE__ */ t.createElement(
+        T,
+        {
+          key: e + l,
+          fillMode: "flat",
+          title: e,
+          "aria-label": e,
+          onClick: () => {
+            g.current = !0, i(!1), o.onSelect(c);
+          },
+          togglable: !0,
+          selected: o.value === c,
+          type: "button",
+          svgIcon: n,
+          iconSize: "large",
+          ...z
+        }
+      ))
+    )
+  ));
+});
+U.displayName = "IconsDropdown";
+export {
+  U as IconsDropdown
+};

package/rich-text-editing/MainToolbar.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
+ *-------------------------------------------------------------------------------------------
+ */
+import { Diagram } from '@progress/kendo-diagram-common';
+import { MainToolbarOptions } from './types';
+import * as React from 'react';
+/** @hidden */
+export type MainToolbarMode = 'select' | 'hand' | 'text' | 'shape';
+/** @hidden */
+export type MainToolbarPosition = 'top' | 'bottom';
+interface MainToolbarProps extends MainToolbarOptions {
+    diagram: Diagram | null;
+    visible?: boolean;
+}
+/** @hidden */
+export declare const MainToolbar: (props: MainToolbarProps) => React.ReactPortal | null;
+export {};

package/rich-text-editing/MainToolbar.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 D=require("react"),B=require("react-dom"),a=require("@progress/kendo-react-buttons"),L=require("@progress/kendo-react-popup"),w=require("@progress/kendo-diagram-common"),u=require("@progress/kendo-svg-icons"),O=require("@progress/kendo-react-intl"),e=require("../messages/index.js"),j=require("./shapes-dropdown.js"),m=require("./utils.js"),f=require("./DiagramEditorContext.js");function U(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const s in n)if(s!=="default"){const p=Object.getOwnPropertyDescriptor(n,s);Object.defineProperty(t,s,p.get?p:{enumerable:!0,get:()=>n[s]})}}return t.default=n,Object.freeze(t)}const c=U(D),{floatingToolbarStyle:v}=w.EditingUtils.Data,S=2,z=10,N=n=>{const{diagram:t,tools:s,position:p="top",shapes:h,visible:d=!0}=n,{controller:i,snapshot:T}=f.useDiagramEditorContext(),P=f.useRegisteredSurfaceRef(i),k=f.useDiagramEditorPopupProps("main-toolbar"),r=T.activeTool,x=!!(t&&t.canUndo()),C=!!(t&&t.canRedo()),l=O.useLocalization();c.useEffect(()=>{if(!t)return;const{element:o}=t,y=o.ownerDocument.defaultView;if(!y||y.getComputedStyle(o).position!=="static")return;const M=o.style.position;return o.style.position="relative",()=>{o.style.position=M}},[t]);const g=c.useCallback(o=>{i.dispatch({type:"setActiveTool",tool:o})},[i]),I=o=>{g({type:"insert-shape",shape:o})},E={undo:{component:a.Button,props:{svgIcon:u.undoIcon,fillMode:"flat",onClick:()=>i.execute({type:"undo"}),disabled:!x,title:l.toLanguageString(e.editingUndo,e.messages[e.editingUndo])}},redo:{component:a.Button,props:{svgIcon:u.redoIcon,fillMode:"flat",onClick:()=>i.execute({type:"redo"}),disabled:!C,title:l.toLanguageString(e.editingRedo,e.messages[e.editingRedo])}},select:{component:a.Button,props:{svgIcon:u.pointerIcon,fillMode:"flat",onClick:()=>g({type:"select"}),togglable:!0,selected:r.type==="select",title:l.toLanguageString(e.editingSelect,e.messages[e.editingSelect])}},pan:{component:a.Button,props:{svgIcon:u.handIcon,fillMode:"flat",onClick:()=>g({type:"pan"}),togglable:!0,selected:r.type==="pan",title:l.toLanguageString(e.editingPan,e.messages[e.editingPan])}},text:{component:a.Button,props:{svgIcon:u.freeTextIcon,fillMode:"flat",onClick:()=>g({type:"insert-text"}),togglable:!0,selected:r.type==="insert-text",title:l.toLanguageString(e.editingText,e.messages[e.editingText])}},shape:{component:j.ShapeSelector,props:{onSelect:I,value:r.type==="insert-shape"?r.shape:null,active:r.type==="insert-shape",buttonTitle:l.toLanguageString(e.editingShape,e.messages[e.editingShape]),shapes:h,popupClass:m.mainToolbarPopupClass,overlayOwner:"main-toolbar"}},separator:{component:a.ToolbarSeparator,props:{}}},b=m.mapTools(s,E);if(!t||b.length===0)return null;const R={position:"absolute",left:0,right:0,top:p==="top"?S:void 0,bottom:p==="bottom"?S+z:void 0,display:"flex",justifyContent:"center",pointerEvents:"none",zIndex:1},q={opacity:d?1:0,visibility:d?"visible":"hidden",pointerEvents:d?"auto":"none",transition:d?"opacity 140ms ease":"opacity 140ms ease, visibility 0s linear 140ms",...v};return B.createPortal(c.createElement("div",{style:R,className:"k-animation-container k-animation-container-shown"},c.createElement("div",{ref:P,className:"k-popup k-diagram-top-toolbar-container",style:q,onPointerEnter:()=>i.handlePointerEnter(),onPointerLeave:()=>i.handlePointerLeave()},c.createElement(L.PopupPropsContext.Provider,{value:k},c.createElement(a.Toolbar,{fillMode:"flat",style:v,buttons:m.floatingToolbarButtons},b)))),t.element)};exports.MainToolbar=N;

package/rich-text-editing/MainToolbar.mjs

@@ -0,0 +1,143 @@
+/**
+ * @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 a from "react";
+import { createPortal as U } from "react-dom";
+import { Toolbar as z, ToolbarSeparator as A, Button as l } from "@progress/kendo-react-buttons";
+import { PopupPropsContext as N } from "@progress/kendo-react-popup";
+import { EditingUtils as O } from "@progress/kendo-diagram-common";
+import { freeTextIcon as W, handIcon as j, pointerIcon as V, redoIcon as q, undoIcon as F } from "@progress/kendo-svg-icons";
+import { useLocalization as G } from "@progress/kendo-react-intl";
+import { editingShape as u, messages as r, editingText as g, editingPan as f, editingSelect as y, editingRedo as b, editingUndo as v } from "../messages/index.mjs";
+import { ShapeSelector as H } from "./shapes-dropdown.mjs";
+import { mapTools as J, floatingToolbarButtons as K, mainToolbarPopupClass as Q } from "./utils.mjs";
+import { useDiagramEditorContext as X, useRegisteredSurfaceRef as Y, useDiagramEditorPopupProps as Z } from "./DiagramEditorContext.mjs";
+const { floatingToolbarStyle: h } = O.Data, S = 2, _ = 10, pt = (T) => {
+  const { diagram: t, tools: P, position: c = "top", shapes: x, visible: s = !0 } = T, { controller: e, snapshot: C } = X(), E = Y(e), I = Z("main-toolbar"), n = C.activeTool, k = !!(t && t.canUndo()), L = !!(t && t.canRedo()), i = G();
+  a.useEffect(() => {
+    if (!t)
+      return;
+    const { element: o } = t, d = o.ownerDocument.defaultView;
+    if (!d || d.getComputedStyle(o).position !== "static")
+      return;
+    const D = o.style.position;
+    return o.style.position = "relative", () => {
+      o.style.position = D;
+    };
+  }, [t]);
+  const p = a.useCallback(
+    (o) => {
+      e.dispatch({ type: "setActiveTool", tool: o });
+    },
+    [e]
+  ), M = (o) => {
+    p({ type: "insert-shape", shape: o });
+  }, R = {
+    undo: {
+      component: l,
+      props: {
+        svgIcon: F,
+        fillMode: "flat",
+        onClick: () => e.execute({ type: "undo" }),
+        disabled: !k,
+        title: i.toLanguageString(v, r[v])
+      }
+    },
+    redo: {
+      component: l,
+      props: {
+        svgIcon: q,
+        fillMode: "flat",
+        onClick: () => e.execute({ type: "redo" }),
+        disabled: !L,
+        title: i.toLanguageString(b, r[b])
+      }
+    },
+    select: {
+      component: l,
+      props: {
+        svgIcon: V,
+        fillMode: "flat",
+        onClick: () => p({ type: "select" }),
+        togglable: !0,
+        selected: n.type === "select",
+        title: i.toLanguageString(y, r[y])
+      }
+    },
+    pan: {
+      component: l,
+      props: {
+        svgIcon: j,
+        fillMode: "flat",
+        onClick: () => p({ type: "pan" }),
+        togglable: !0,
+        selected: n.type === "pan",
+        title: i.toLanguageString(f, r[f])
+      }
+    },
+    text: {
+      component: l,
+      props: {
+        svgIcon: W,
+        fillMode: "flat",
+        onClick: () => p({ type: "insert-text" }),
+        togglable: !0,
+        selected: n.type === "insert-text",
+        title: i.toLanguageString(g, r[g])
+      }
+    },
+    shape: {
+      component: H,
+      props: {
+        onSelect: M,
+        value: n.type === "insert-shape" ? n.shape : null,
+        active: n.type === "insert-shape",
+        buttonTitle: i.toLanguageString(u, r[u]),
+        shapes: x,
+        popupClass: Q,
+        overlayOwner: "main-toolbar"
+      }
+    },
+    separator: { component: A, props: {} }
+  }, m = J(P, R);
+  if (!t || m.length === 0)
+    return null;
+  const w = {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: c === "top" ? S : void 0,
+    bottom: c === "bottom" ? S + _ : void 0,
+    display: "flex",
+    justifyContent: "center",
+    pointerEvents: "none",
+    zIndex: 1
+  }, B = {
+    opacity: s ? 1 : 0,
+    visibility: s ? "visible" : "hidden",
+    pointerEvents: s ? "auto" : "none",
+    transition: s ? "opacity 140ms ease" : "opacity 140ms ease, visibility 0s linear 140ms",
+    ...h
+  };
+  return U(
+    /* @__PURE__ */ a.createElement("div", { style: w, className: "k-animation-container k-animation-container-shown" }, /* @__PURE__ */ a.createElement(
+      "div",
+      {
+        ref: E,
+        className: "k-popup k-diagram-top-toolbar-container",
+        style: B,
+        onPointerEnter: () => e.handlePointerEnter(),
+        onPointerLeave: () => e.handlePointerLeave()
+      },
+      /* @__PURE__ */ a.createElement(N.Provider, { value: I }, /* @__PURE__ */ a.createElement(z, { fillMode: "flat", style: h, buttons: K }, m))
+    )),
+    t.element
+  );
+};
+export {
+  pt as MainToolbar
+};

package/rich-text-editing/ShapeEditingToolbar.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 { Shape, FlowchartShapeType } from '@progress/kendo-diagram-common';
+import { ToolbarTools } from './types';
+import * as React from 'react';
+interface ShapeEditingToolbarProps {
+    shape: Shape | null;
+    tools: ToolbarTools;
+    shapes?: FlowchartShapeType[];
+}
+/** @hidden */
+export declare const ShapeEditingToolbar: (props: ShapeEditingToolbarProps) => React.JSX.Element | null;
+export {};

package/rich-text-editing/ShapeEditingToolbar.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 j=require("react"),a=require("@progress/kendo-react-buttons"),y=require("@progress/kendo-react-inputs"),z=require("@progress/kendo-react-popup"),_=require("@progress/kendo-diagram-common"),N=require("@progress/kendo-react-intl"),e=require("../messages/index.js"),U=require("./shapes-dropdown.js"),l=require("@progress/kendo-svg-icons"),V=require("./border-width.js"),A=require("./border-style.js"),u=require("./utils.js"),m=require("./DiagramEditorContext.js");function G(i){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const s in i)if(s!=="default"){const c=Object.getOwnPropertyDescriptor(i,s);Object.defineProperty(r,s,c.get?c:{enumerable:!0,get:()=>i[s]})}}return r.default=i,Object.freeze(r)}const k=G(j),{Data:H}=_.EditingUtils,J=H.floatingToolbarStyle,K=i=>{var f,S,h;const{shape:r,tools:s,shapes:c}=i,{controller:o}=m.useDiagramEditorContext(),b=m.useDiagramEditorPopupProps("shape-toolbar"),n=N.useLocalization();if(!r)return null;const p=r.options,C=p.type||"rectangle",T=typeof p.fill=="string"?p.fill:((f=p.fill)==null?void 0:f.color)||"#ffffff",g=((h=(S=r.shapeVisual)==null?void 0:S.options)==null?void 0:h.stroke)||{},v=g.color||"",B=g.width||1,R=g.dashType||"solid",D=t=>{t!==C&&o.execute({type:"setShapeType",value:t})},I=t=>{o.execute({type:"setShapeFillColor",value:t})},L=t=>{o.execute({type:"setShapeStrokeColor",value:t})},x=t=>{o.execute({type:"setShapeStrokeWidth",value:t})},q=t=>{o.execute({type:"setShapeStrokeDashType",value:t})},P=()=>{o.execute({type:"shapeToFront"})},M=()=>{o.execute({type:"shapeToBack"})},F=()=>{o.execute({type:"rotateShapeLeft"})},O=()=>{o.execute({type:"rotateShapeRight"})},E=()=>{o.execute({type:"duplicateSelection"})},W=()=>{o.execute({type:"deleteSelection"})},w={type:{component:U.ShapeSelector,props:{onSelect:D,value:r.options.type,buttonTitle:n.toLanguageString(e.editingShapeType,e.messages[e.editingShapeType]),shapes:c,popupClass:u.dropdownPopupClass,overlayOwner:"shape-toolbar"}},backColor:{component:y.ColorPicker,props:{value:T,gradientSettings:{opacity:!1},fillMode:"flat",onChange:t=>I(t.value),title:n.toLanguageString(e.editingFillColor,e.messages[e.editingFillColor])}},separator:{component:a.ToolbarSeparator,props:{}},borderWidth:{component:V.BorderWidth,props:{value:B,onSelect:x,label:n.toLanguageString(e.editingBorderWidth,e.messages[e.editingBorderWidth]),overlayOwner:"shape-toolbar"}},borderColor:{component:y.ColorPicker,props:{value:v,svgIcon:l.borderColorIcon,gradientSettings:{opacity:!1},fillMode:"flat",onChange:t=>L(t.value),title:n.toLanguageString(e.editingBorderColor,e.messages[e.editingBorderColor])}},borderStyle:{component:A.BorderStyle,props:{value:R,onSelect:q,overlayOwner:"shape-toolbar"}},toFront:{component:a.Button,props:{fillMode:"flat",onClick:P,svgIcon:l.bringToFrontIcon,title:n.toLanguageString(e.editingToFront,e.messages[e.editingToFront])}},toBack:{component:a.Button,props:{fillMode:"flat",onClick:M,svgIcon:l.bringToBackIcon,title:n.toLanguageString(e.editingToBack,e.messages[e.editingToBack])}},rotateLeft:{component:a.Button,props:{fillMode:"flat",onClick:F,svgIcon:l.rotateLeftIcon,title:n.toLanguageString(e.editingRotateLeft,e.messages[e.editingRotateLeft])}},rotateRight:{component:a.Button,props:{fillMode:"flat",onClick:O,svgIcon:l.rotateRightIcon,title:n.toLanguageString(e.editingRotateRight,e.messages[e.editingRotateRight])}},duplicate:{component:a.Button,props:{fillMode:"flat",onClick:E,svgIcon:l.copyIcon,title:n.toLanguageString(e.editingDuplicate,e.messages[e.editingDuplicate])}},delete:{component:a.Button,props:{fillMode:"flat",onClick:W,svgIcon:l.trashIcon,title:n.toLanguageString(e.editingDelete,e.messages[e.editingDelete])}}},d=u.mapTools(s,w);return d.length===0?null:k.createElement(z.PopupPropsContext.Provider,{value:b},k.createElement(a.Toolbar,{fillMode:"flat",style:{...J},buttons:u.floatingToolbarButtons},d))};exports.ShapeEditingToolbar=K;

package/rich-text-editing/ShapeEditingToolbar.mjs

@@ -0,0 +1,154 @@
+/**
+ * @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 u from "react";
+import { Toolbar as J, Button as r, ToolbarSeparator as K } from "@progress/kendo-react-buttons";
+import { ColorPicker as f } from "@progress/kendo-react-inputs";
+import { PopupPropsContext as N } from "@progress/kendo-react-popup";
+import { EditingUtils as Q } from "@progress/kendo-diagram-common";
+import { useLocalization as X } from "@progress/kendo-react-intl";
+import { editingDelete as d, messages as n, editingDuplicate as m, editingRotateRight as h, editingRotateLeft as S, editingToBack as y, editingToFront as k, editingBorderColor as v, editingBorderWidth as C, editingFillColor as T, editingShapeType as b } from "../messages/index.mjs";
+import { ShapeSelector as Y } from "./shapes-dropdown.mjs";
+import { trashIcon as Z, copyIcon as _, rotateRightIcon as $, rotateLeftIcon as oo, bringToBackIcon as to, bringToFrontIcon as eo, borderColorIcon as no } from "@progress/kendo-svg-icons";
+import { BorderWidth as ro } from "./border-width.mjs";
+import { BorderStyle as lo } from "./border-style.mjs";
+import { mapTools as ao, floatingToolbarButtons as io, dropdownPopupClass as po } from "./utils.mjs";
+import { useDiagramEditorContext as so, useDiagramEditorPopupProps as co } from "./DiagramEditorContext.mjs";
+const { Data: go } = Q, uo = go.floatingToolbarStyle, Io = (L) => {
+  var s, c, g;
+  const { shape: l, tools: x, shapes: I } = L, { controller: t } = so(), B = co("shape-toolbar"), e = X();
+  if (!l)
+    return null;
+  const a = l.options, D = a.type || "rectangle", M = typeof a.fill == "string" ? a.fill : ((s = a.fill) == null ? void 0 : s.color) || "#ffffff", i = ((g = (c = l.shapeVisual) == null ? void 0 : c.options) == null ? void 0 : g.stroke) || {}, R = i.color || "", F = i.width || 1, P = i.dashType || "solid", E = (o) => {
+    o !== D && t.execute({ type: "setShapeType", value: o });
+  }, W = (o) => {
+    t.execute({ type: "setShapeFillColor", value: o });
+  }, w = (o) => {
+    t.execute({ type: "setShapeStrokeColor", value: o });
+  }, O = (o) => {
+    t.execute({ type: "setShapeStrokeWidth", value: o });
+  }, z = (o) => {
+    t.execute({ type: "setShapeStrokeDashType", value: o });
+  }, U = () => {
+    t.execute({ type: "shapeToFront" });
+  }, V = () => {
+    t.execute({ type: "shapeToBack" });
+  }, j = () => {
+    t.execute({ type: "rotateShapeLeft" });
+  }, q = () => {
+    t.execute({ type: "rotateShapeRight" });
+  }, A = () => {
+    t.execute({ type: "duplicateSelection" });
+  }, G = () => {
+    t.execute({ type: "deleteSelection" });
+  }, H = {
+    type: {
+      component: Y,
+      props: {
+        onSelect: E,
+        value: l.options.type,
+        buttonTitle: e.toLanguageString(b, n[b]),
+        shapes: I,
+        popupClass: po,
+        overlayOwner: "shape-toolbar"
+      }
+    },
+    backColor: {
+      component: f,
+      props: {
+        value: M,
+        gradientSettings: { opacity: !1 },
+        fillMode: "flat",
+        onChange: (o) => W(o.value),
+        title: e.toLanguageString(T, n[T])
+      }
+    },
+    separator: { component: K, props: {} },
+    borderWidth: {
+      component: ro,
+      props: {
+        value: F,
+        onSelect: O,
+        label: e.toLanguageString(C, n[C]),
+        overlayOwner: "shape-toolbar"
+      }
+    },
+    borderColor: {
+      component: f,
+      props: {
+        value: R,
+        svgIcon: no,
+        gradientSettings: { opacity: !1 },
+        fillMode: "flat",
+        onChange: (o) => w(o.value),
+        title: e.toLanguageString(v, n[v])
+      }
+    },
+    borderStyle: {
+      component: lo,
+      props: { value: P, onSelect: z, overlayOwner: "shape-toolbar" }
+    },
+    toFront: {
+      component: r,
+      props: {
+        fillMode: "flat",
+        onClick: U,
+        svgIcon: eo,
+        title: e.toLanguageString(k, n[k])
+      }
+    },
+    toBack: {
+      component: r,
+      props: {
+        fillMode: "flat",
+        onClick: V,
+        svgIcon: to,
+        title: e.toLanguageString(y, n[y])
+      }
+    },
+    rotateLeft: {
+      component: r,
+      props: {
+        fillMode: "flat",
+        onClick: j,
+        svgIcon: oo,
+        title: e.toLanguageString(S, n[S])
+      }
+    },
+    rotateRight: {
+      component: r,
+      props: {
+        fillMode: "flat",
+        onClick: q,
+        svgIcon: $,
+        title: e.toLanguageString(h, n[h])
+      }
+    },
+    duplicate: {
+      component: r,
+      props: {
+        fillMode: "flat",
+        onClick: A,
+        svgIcon: _,
+        title: e.toLanguageString(m, n[m])
+      }
+    },
+    delete: {
+      component: r,
+      props: {
+        fillMode: "flat",
+        onClick: G,
+        svgIcon: Z,
+        title: e.toLanguageString(d, n[d])
+      }
+    }
+  }, p = ao(x, H);
+  return p.length === 0 ? null : /* @__PURE__ */ u.createElement(N.Provider, { value: B }, /* @__PURE__ */ u.createElement(J, { fillMode: "flat", style: { ...uo }, buttons: io }, p));
+};
+export {
+  Io as ShapeEditingToolbar
+};