@eccenca/gui-elements 24.4.1 → 25.0.0-rc.0

package/dist/types/extensions/react-flow/minimap/MiniMap.d.ts

@@ -1,10 +1,8 @@
 import React from "react";
-import { MiniMapProps as ReactFlowMiniMapProps, OnLoadParams } from "react-flow-renderer";
-export interface MiniMapProps extends ReactFlowMiniMapProps {
-    /**
-     * React-Flow instance
-     */
-    flowInstance?: OnLoadParams;
+import { MiniMapProps as ReactFlowMiniMapV9Props, OnLoadParams } from "react-flow-renderer";
+import { ReacFlowVersionSupportProps } from "../versionsupport";
+import { MiniMapV12Props } from "./MiniMapV12";
+export interface MiniMapBasicProps {
     /**
      * Enable navigating the react-flow canvas by dragging and clicking on the mini-map.
      */
@@ -15,5 +13,18 @@ export interface MiniMapProps extends ReactFlowMiniMapProps {
      */
     wrapperProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "onMouseDown" | "onMouseUp" | "onMouseMove" | "onMouseLeave">;
 }
+export interface MiniMapV9Props extends MiniMapBasicProps, ReactFlowMiniMapV9Props {
+    /**
+     * React-Flow instance
+     */
+    flowInstance?: OnLoadParams;
+}
+export type MiniMapProps = (ReacFlowVersionSupportProps & MiniMapV9Props) | (ReacFlowVersionSupportProps & MiniMapV12Props);
 /** An improved mini-map for react-flow that supports navigation via the mini-map. */
-export declare const MiniMap: React.MemoExoticComponent<({ flowInstance, enableNavigation, maskColor, nodeClassName, nodeColor, nodeStrokeColor, wrapperProps, ...minimapProps }: MiniMapProps) => React.JSX.Element>;
+export declare const MiniMap: React.MemoExoticComponent<({ flowVersion, ...otherProps }: MiniMapProps) => React.JSX.Element>;
+/**
+ * Mini-map support for for React Flow v9.
+ * @deprecated (v26) will be removed, use when `MiniMap` directly
+ */
+export declare const MiniMapV9: React.MemoExoticComponent<({ flowInstance, enableNavigation, maskColor, nodeClassName, nodeColor, nodeStrokeColor, wrapperProps, ...minimapProps }: MiniMapV9Props) => React.JSX.Element>;
+export default MiniMap;

package/dist/types/extensions/react-flow/minimap/MiniMapV12.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { MiniMapProps as ReactFlowMiniMapProps } from "@xyflow/react";
+import { MiniMapBasicProps } from "./MiniMap";
+export interface MiniMapV12Props extends MiniMapBasicProps, Omit<ReactFlowMiniMapProps, "maskColor"> {
+}
+/**
+ * Mini-map support for for React Flow v12.
+ * @deprecated (v26) will be removed when `MiniMap` supports v12 directly
+ */
+export declare const MiniMapV12: React.MemoExoticComponent<({ enableNavigation, nodeClassName, nodeColor, nodeStrokeColor, wrapperProps, ...minimapProps }: MiniMapV12Props) => React.JSX.Element>;

package/dist/types/extensions/react-flow/nodes/NodeContent.d.ts

@@ -3,15 +3,15 @@ import { Position } from "react-flow-renderer";
 import { IntentTypes } from "../../../common/Intent";
 import { DepictionProps } from "../../../components";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-import { HandleNextProps, HandleProps, HandleV12Props } from "../handles/HandleDefault";
 import { ReacFlowVersionSupportProps } from "../versionsupport";
+import { HandleDefaultProps } from "./../handles/HandleDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
 import { NodeDefaultProps } from "./NodeDefault";
 import { NodeHighlightColor } from "./sharedTypes";
-type NodeContentHandleLegacyProps = HandleProps;
-type NodeContentHandleNextProps = HandleNextProps;
-type NodeContentHandleV12Props = HandleV12Props;
-export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps | NodeContentHandleV12Props;
+/**
+ * @deprecated (v26) use `HandleDefaultProps`
+ */
+export type NodeContentHandleProps = HandleDefaultProps;
 export type NodeDimensions = {
     width?: number;
     height?: number;
@@ -78,7 +78,7 @@ interface NodeContentData<CONTENT_PROPS = any> {
      */
     footerContent?: React.ReactNode;
 }
-export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, ReacFlowVersionSupportProps, Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
+export interface NodeContentProps<CONTENT_PROPS = any> extends NodeContentData, ReacFlowVersionSupportProps, Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
     /**
      * Size of the node.
      * If `minimalShape` is not set to `none`then the configured size definition is only used for the selected node state.
@@ -125,7 +125,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
     /**
      * Set of defined buttons and icons that can be displayed.
      */
-    executionButtons?: (adjustedContentProps: Partial<NODE_CONTENT_PROPS>, setAdjustedContentProps: React.Dispatch<React.SetStateAction<Partial<NODE_CONTENT_PROPS>>>) => React.ReactElement<NODE_CONTENT_PROPS>;
+    executionButtons?: (adjustedContentProps: Partial<CONTENT_PROPS>, setAdjustedContentProps: React.Dispatch<React.SetStateAction<Partial<CONTENT_PROPS>>>) => React.ReactElement<React.HTMLAttributes<HTMLElement>>;
     /**
      * Can be used for permanent action button or context menu.
      * It is displayed at the node header right to the label.
@@ -135,7 +135,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * Array of property definition objects for `Handle` components that need to be created for the node.
      * @see https://reactflow.dev/docs/api/handle/
      */
-    handles?: NodeContentHandleProps[];
+    handles?: HandleDefaultProps[];
     /**
      * Set the minimal number of handles on left or right side of the node to activate the recalculation of the minimal height of the node.
      */
@@ -148,7 +148,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * Callback function to provide content for the tooltip on a node with a defined `minimalShape`.
      * If you do not want a tooltip in this state you need to provide a callback that returns an empty value.
      */
-    getMinimalTooltipData?: (node: NodeDefaultProps<NODE_DATA>) => NodeContentData;
+    getMinimalTooltipData?: (node: NodeDefaultProps<CONTENT_PROPS>) => NodeContentData;
     /**
      * Set if a handle is displayed even if it does not allow a connection to an edge.
      */
@@ -161,8 +161,11 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * Time in ms used for a short animation of the node to visualize it was added or updated.
      */
     introductionTime?: number | IntroductionTime;
-    /** Additional data stored in the node. */
-    businessData?: NODE_DATA;
+    /**
+     * Additional data stored in the node.
+     * @deprecated (v26) is not used anymore.
+     */
+    businessData?: never;
     /**
      * This property is only forwarded from the `NodeDefault` element.
      * If set then it will be always overwritten internally.
@@ -205,7 +208,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
  * The `NodeContent` element manages the main view of how a node is displaying which content.
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
  */
-export declare function NodeContent<CONTENT_PROPS = any>({ flowVersion, iconName, depiction, leftElement, typeLabel, label, labelSubline, enlargeHeader, fullWidth, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, intent, border, highlightColor, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, introductionTime, onNodeResize, nodeDimensions, resizeDirections, resizeMaxDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherDomProps }: NodeContentProps<any>): React.JSX.Element;
+export declare function NodeContent<CONTENT_PROPS = React.HTMLAttributes<HTMLElement>>({ flowVersion, iconName, depiction, leftElement, typeLabel, label, labelSubline, enlargeHeader, fullWidth, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, intent, border, highlightColor, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, introductionTime, onNodeResize, nodeDimensions, resizeDirections, resizeMaxDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherDomProps }: NodeContentProps<CONTENT_PROPS>): React.JSX.Element;
 export declare const nodeContentUtils: {
     evaluateHighlightColors: (baseCustomProperty: string, highlightColor?: NodeHighlightColor | NodeHighlightColor[]) => {
         highlightClassNameSuffix: string[];

package/dist/types/extensions/react-flow/nodes/NodeDefault.d.ts

@@ -1,14 +1,18 @@
 import React from "react";
-import { NodeProps as ReactFlowNodeProps } from "react-flow-renderer";
+import { NodeProps as ReactFlowNodeV9Props } from "react-flow-renderer";
+import { NodeProps as ReactFlowNodeV12Props } from "@xyflow/react";
 import { ReacFlowVersionSupportProps } from "../versionsupport";
 import { NodeContentProps } from "./NodeContent";
-export interface NodeDefaultProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlowVersionSupportProps, ReactFlowNodeProps {
+interface NodeDefaultExtendedProps<CONTENT_PROPS = any> extends ReacFlowVersionSupportProps {
     /**
      * Contains all properties for our implementation of the React-Flow node.
      * For details pls see the `NodeContent` element documentation.
      */
-    data: NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS>;
+    data: NodeContentProps<CONTENT_PROPS>;
 }
+type NodeDefaultV9Props<CONTENT_PROPS = any> = NodeDefaultExtendedProps<CONTENT_PROPS> & ReactFlowNodeV9Props;
+type NodeDefaultV12Props<CONTENT_PROPS = any> = NodeDefaultExtendedProps<CONTENT_PROPS> & Omit<ReactFlowNodeV12Props, "data">;
+export type NodeDefaultProps<CONTENT_PROPS = any> = NodeDefaultV9Props<CONTENT_PROPS> | NodeDefaultV12Props<CONTENT_PROPS>;
 /**
  * The `NodeDefault` element manages the display of React-Flow nodes.
  * This element cannot be used directly, it must be connected via a `nodeTypes` definition and all properties need to be routed through the `elements` property items inside the `ReactFlow` container.

package/dist/types/extensions/react-flow/nodes/nodeUtils.d.ts

@@ -1,15 +1,22 @@
 import { CSSProperties } from "react";
-import { Node, XYPosition } from "react-flow-renderer";
+import { Node as NodeV9, XYPosition as XYPositionV9 } from "react-flow-renderer";
+import { Node as NodeV12, XYPosition as XYPositionV12 } from "@xyflow/react";
 import { NodeDimensions } from "./NodeContent";
-/** A sticky note for display in the UI as returned from the backend. */
-export interface StickyNote {
+interface StickyNoteBase {
     id: string;
     content: string;
     color: string;
-    position: XYPosition & NodeDimensions;
 }
+interface StickyNotePositionV9 {
+    position: XYPositionV9 & NodeDimensions;
+}
+interface StickyNotePositionV12 {
+    position: XYPositionV12 & NodeDimensions;
+}
+/** A sticky note for display in the UI as returned from the backend. */
+export type StickyNote = (StickyNoteBase & StickyNotePositionV9) | (StickyNoteBase & StickyNotePositionV12);
 export declare const nodeDefaultUtils: {
     generateStyleWithColor: (color: string) => CSSProperties;
-    transformNodeToStickyNode: (node: Node<any>) => StickyNote;
+    transformNodeToStickyNode: (node: NodeV9<any> | NodeV12<any>) => StickyNote;
 };
 export default nodeDefaultUtils;

package/dist/types/extensions/react-flow/versionsupport.d.ts

@@ -1,8 +1,12 @@
+export declare const enum ReactFlowVersions {
+    NONE = "none",// mainly here in case some ReactFlow components are used without any react flow containr
+    V9 = "v9",
+    V12 = "v12"
+}
 export interface ReacFlowVersionSupportProps {
     /**
-     * Spevifies the context of the react flow renderer version that is used for the component.
-     * @deprecated (v25) `legacy` and `next` will be removed/replaced by `v##` values in future versions
+     * Specifies the context of the react flow renderer version that is used for the component.
      */
-    flowVersion?: "v12" | "legacy" | "next" | "none";
+    flowVersion?: ReactFlowVersions.V9 | ReactFlowVersions.V12 | ReactFlowVersions.NONE;
 }
-export declare const useReactFlowVersion: () => "none" | "next" | "legacy" | "v12";
+export declare const useReactFlowVersion: () => ReactFlowVersions;

package/dist/types/index.d.ts

@@ -1,7 +1,6 @@
 import { Classes as BlueprintClasses } from "@blueprintjs/core";
 import * as Skeleton from "./components/Skeleton/classnames";
 import * as TypographyClassNames from "./components/Typography/classnames";
-import * as LegacyReplacements from "./legacy-replacements";
 declare const ClassNames: {
     Blueprint: typeof BlueprintClasses;
     Intent: {
@@ -15,4 +14,4 @@ export * from "./common";
 export * from "./components";
 export * from "./extensions";
 export * from "./cmem";
-export { ClassNames, LegacyReplacements };
+export { ClassNames };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.4.1",
+    "version": "25.0.0-rc.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -73,6 +73,7 @@
         "@blueprintjs/select": "^5.3.19",
         "@carbon/icons": "^11.58.0",
         "@carbon/react": "^1.80.1",
+        "@codemirror/lang-html": "^6.4.9",
         "@codemirror/lang-javascript": "^6.2.3",
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-markdown": "^6.3.2",
@@ -91,12 +92,11 @@
         "n3": "^1.25.1",
         "re-resizable": "^6.10.3",
         "react": "^16.13.1",
-        "react-dom": "^16.13.1",
+        "react-dom": "^16.14.0",
         "react-flow-renderer": "9.7.4",
-        "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
         "react-inlinesvg": "^3.0.3",
+        "react-is": "^16.13.1",
         "react-markdown": "^10.1.0",
-        "react-markdown-deprecated": "npm:react-markdown@^8.0.7",
         "react-syntax-highlighter": "^15.6.1",
         "rehype-external-links": "^3.0.0",
         "rehype-raw": "^7.0.0",
@@ -138,6 +138,7 @@
         "@types/jshint": "^2.12.4",
         "@types/lodash": "^4.17.16",
         "@types/n3": "^1.24.2",
+        "@types/react-is": "^19.0.0",
         "@types/react-syntax-highlighter": "^15.5.13",
         "@typescript-eslint/eslint-plugin": "^8.30.1",
         "@typescript-eslint/parser": "^8.30.1",
@@ -174,8 +175,7 @@
     },
     "peerDependencies": {
         "@blueprintjs/core": ">=5",
-        "react": ">=16",
-        "react-dom": ">=16"
+        "react": ">=16"
     },
     "resolutions": {
         "**/@types/react": "^17.0.85",

package/src/_shame.scss

@@ -51,6 +51,6 @@ textarea:focus-visible {
 }
 
 :focus-visible {
-    outline: rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
+    outline: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
     outline-offset: 1px;
 }

package/src/cmem/markdown/Markdown.stories.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Blockquote } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { Markdown } from "./../../../index";

package/src/cmem/markdown/Markdown.tsx

@@ -1,9 +1,5 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
-/**
- * Recreate the old type to provide support until next major
- */
-import { PluggableList as PluggableListDeprecated } from "react-markdown-deprecated/lib/react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 // @ts-ignore: No declaration file for module (TODO: should be @ts-expect-error but GUI elements is used inside project with `noImplicitAny=false`)
 import remarkTypograf from "@mavrin/remark-typograf";
@@ -11,11 +7,10 @@ import rehypeExternalLinks from "rehype-external-links";
 import rehypeRaw from "rehype-raw";
 import { remarkDefinitionList } from "remark-definition-list";
 import remarkGfm from "remark-gfm";
-import { PluggableList as PluggableListUnified } from "unified";
+import { PluggableList } from "unified";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index";
-type PluggableList = PluggableListUnified | PluggableListDeprecated;
 
 export interface MarkdownProps extends TestableComponent {
     children: string;
@@ -41,7 +36,6 @@ export interface MarkdownProps extends TestableComponent {
     /**
      * Additional reHype plugins to execute.
      * @see https://github.com/remarkjs/react-markdown#architecture
-     * @deprecated (v25) this property won't support `PluggableList` from "react-markdown/lib/react-markdown" with the next major version, only the one from `unified` will be supported then.
      */
     reHypePlugins?: PluggableList;
     /**
@@ -61,9 +55,9 @@ const configDefault = {
         @see https://github.com/remarkjs/react-markdown#api
     */
     // @see https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
-    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableListUnified,
+    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableList,
     // @see https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
-    rehypePlugins: [] as PluggableListUnified,
+    rehypePlugins: [] as PluggableList,
     allowedElements: [
         // default markdown
         "a",
@@ -173,9 +167,7 @@ export const Markdown = ({
     };
 
     if (reHypePlugins) {
-        reactMarkdownProperties.rehypePlugins = reactMarkdownProperties.rehypePlugins.concat(
-            reHypePlugins as PluggableListUnified
-        );
+        reactMarkdownProperties.rehypePlugins = reactMarkdownProperties.rehypePlugins.concat(reHypePlugins);
     }
 
     const markdownDisplay = <ReactMarkdown {...reactMarkdownProperties} />;