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

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-featureimproveprintstylescmem6985.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",
@@ -86,17 +87,17 @@
         "codemirror": "^6.0.1",
         "color": "^4.2.3",
         "compute-scroll-into-view": "^3.1.1",
+        "he": "^1.2.0",
         "jshint": "^2.13.6",
         "lodash": "^4.17.21",
         "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",
@@ -134,10 +135,12 @@
         "@testing-library/react": "^12.1.5",
         "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
+        "@types/he": "^1.2.3",
         "@types/jest": "^29.5.14",
         "@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",
@@ -149,8 +152,8 @@
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^30.0.5",
-        "jest-environment-jsdom": "^30.0.5",
+        "jest": "^30.2.0",
+        "jest-environment-jsdom": "^30.2.0",
         "jest-pnp-resolver": "^1.2.3",
         "lint-staged": "^15.5.1",
         "node-sass-package-importer": "^5.3.3",
@@ -174,8 +177,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/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -83,4 +83,4 @@ function firstNonEmptyLine(preview: string) {
 
 export const stringPreviewContentBlobTogglerUtils = {
     firstNonEmptyLine,
-};
+};

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,21 +1,15 @@
 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";
 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 +35,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 +54,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, 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 +166,7 @@ export const Markdown = ({
     };
 
     if (reHypePlugins) {
-        reactMarkdownProperties.rehypePlugins = reactMarkdownProperties.rehypePlugins.concat(
-            reHypePlugins as PluggableListUnified
-        );
+        reactMarkdownProperties.rehypePlugins = reactMarkdownProperties.rehypePlugins.concat(reHypePlugins);
     }
 
     const markdownDisplay = <ReactMarkdown {...reactMarkdownProperties} />;