@eccenca/gui-elements 23.0.0-rc.7 → 23.1.0-easynav.0

package/dist/types/components/Typography/index.d.ts

@@ -0,0 +1,12 @@
+import Highlighter, { HighlighterProps } from "./Highlighter";
+import { extractSearchWords, matchesAllWords, createMultiWordRegex } from "./Highlighter";
+import HtmlContentBlock, { HtmlContentBlockProps } from "./HtmlContentBlock";
+import OverflowText, { OverflowTextProps } from "./OverflowText";
+import WhiteSpaceContainer, { WhiteSpaceContainerProps } from "./WhiteSpaceContainer";
+export type { HighlighterProps, HtmlContentBlockProps, OverflowTextProps, WhiteSpaceContainerProps };
+export { Highlighter, HtmlContentBlock, OverflowText, WhiteSpaceContainer, };
+export declare const HighlighterFunctions: {
+    extractSearchWords: typeof extractSearchWords;
+    matchesAllWords: typeof matchesAllWords;
+    createMultiWordRegex: typeof createMultiWordRegex;
+};

package/dist/types/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Badge/Badge";
+export * from "./Depiction/Depiction";
+export * from "./Icon";
+export * from "./Tree/Tree";
+export * from "./Typography";

package/dist/types/extensions/react-flow/handles/HandleDefault.d.ts

@@ -1,9 +1,17 @@
 import React from 'react';
-import { HandleProps as ReactFlowHandleProps } from "react-flow-renderer";
+import { HandleProps as ReactFlowHandleLegacyProps } from "react-flow-renderer";
+import { HandleProps as ReactFlowHandleNextProps } from "react-flow-renderer-lts";
 import { HandleContentProps } from "./HandleContent";
-export interface HandleProps extends ReactFlowHandleProps {
+import { ReacFlowVersionSupportProps } from "../versionsupport";
+interface HandleExtensionProps extends ReacFlowVersionSupportProps {
     data?: HandleContentProps;
     tooltip?: string;
     children?: JSX.Element | string;
+    onClick?: () => void;
 }
-export declare const HandleDefault: React.MemoExoticComponent<({ data, tooltip, children, ...handleProps }: HandleProps) => JSX.Element>;
+export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {
+}
+export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {
+}
+export declare const HandleDefault: React.MemoExoticComponent<({ flowVersion, data, tooltip, children, ...handleProps }: HandleProps | HandleNextProps) => JSX.Element>;
+export {};

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

@@ -1,13 +1,18 @@
 import React from "react";
 import { Position } from "react-flow-renderer";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-import { HandleProps } from "./../handles/HandleDefault";
+import { DepictionProps } from "../../../components/Depiction/Depiction";
+import { ReacFlowVersionSupportProps } from "../versionsupport";
+import { HandleProps, HandleNextProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
 export declare type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
 export interface IHandleProps extends HandleProps {
     category?: "configuration";
 }
+interface NodeContentHandleNextProps extends HandleNextProps {
+    category?: "configuration";
+}
 export declare type NodeDimensions = {
     width: number;
     height: number;
@@ -19,9 +24,14 @@ interface NodeContentData<CONTENT_PROPS = any> {
      */
     iconName?: ValidIconName;
     /**
-     * Valid and accessible URL or `data-uri` for an image that should be displayed before the node label.
+     * Depiction element that should be displayed before the node label.
+     * As alternative a valid and accessible URL or `data-uri` for an image can be set, then the Depiction element is created automatically.
+     */
+    depiction?: string | React.ReactElement<DepictionProps>;
+    /**
+     * Any element that should be displayed as depiction before the node label.
      */
-    depiction?: string;
+    leftElement?: JSX.Element;
     /**
      * Label that is displayed in the node header.
      */
@@ -39,7 +49,7 @@ interface NodeContentData<CONTENT_PROPS = any> {
      */
     footerContent?: React.ReactNode;
 }
-export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
+export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, ReacFlowVersionSupportProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Size of the node.
      * If `minimalShape` is not set to `none`then the configured size definition is only used for the selected node state.
@@ -76,7 +86,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?: IHandleProps[];
+    handles?: IHandleProps[] | NodeContentHandleNextProps[];
     /**
      * 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.
      */
@@ -139,5 +149,5 @@ export declare const gethighlightedStateClasses: (state: any, baseClassName: any
  * 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>({ iconName, depiction, typeLabel, label, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, onNodeResize, nodeDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherProps }: NodeContentProps<any>): JSX.Element;
+export declare function NodeContent<CONTENT_PROPS = any>({ flowVersion, iconName, depiction, leftElement, typeLabel, label, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, onNodeResize, nodeDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherProps }: NodeContentProps<any>): JSX.Element;
 export {};

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { NodeProps as ReactFlowNodeProps } from "react-flow-renderer";
 import { NodeContentProps } from "./NodeContent";
-export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReactFlowNodeProps {
+import { ReacFlowVersionSupportProps } from "../versionsupport";
+export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlowVersionSupportProps, ReactFlowNodeProps {
     /**
      * Contains all properties for our implementation of the React-Flow node.
      * For details pls see the `NodeContent` element documentation.

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

@@ -0,0 +1,6 @@
+export interface ReacFlowVersionSupportProps {
+    /**
+     * Spevifies the context of the react flow renderer version that is used for the component.
+     */
+    flowVersion?: "legacy" | "next";
+}

package/dist/types/index.d.ts

@@ -12,10 +12,6 @@ import ApplicationToolbarPanel from "./components/Application/ApplicationToolbar
 import AutoSuggestion from "./components/AutoSuggestion/AutoSuggestion";
 import { AutoSuggestionList } from "./components/AutoSuggestion/AutoSuggestionList";
 import SingleLineCodeEditor from "./components/AutoSuggestion/SingleLineCodeEditor";
-import HtmlContentBlock from "./components/Typography/HtmlContentBlock";
-import OverflowText from "./components/Typography/OverflowText";
-import WhiteSpaceContainer from "./components/Typography/WhiteSpaceContainer";
-import Highlighter from "./components/Typography/Highlighter";
 import Grid from "./components/Grid/Grid";
 import GridRow from "./components/Grid/GridRow";
 import GridColumn from "./components/Grid/GridColumn";
@@ -24,7 +20,6 @@ import WorkspaceContent from "./components/Workspace/WorkspaceContent";
 import WorkspaceMain from "./components/Workspace/WorkspaceMain";
 import WorkspaceSide from "./components/Workspace/WorkspaceSide";
 import WorkspaceHeader from "./components/Workspace/WorkspaceHeader";
-import Icon from "./components/Icon/Icon";
 import IconButton from "./components/Icon/IconButton";
 import Label from "./components/Label/Label";
 import Button from "./components/Button/Button";
@@ -81,22 +76,22 @@ import Link from "./components/Link/Link";
 import Spinner from "./components/Spinner/Spinner";
 import InteractionGate from "./components/InteractionGate/InteractionGate";
 import { PropertyName, PropertyValue, PropertyValuePair, PropertyValueList } from "./components/PropertyValuePair";
-import * as TypographyClassNames from "./components/Typography/classnames";
 import { ProgressBar } from "./components/ProgressBar/ProgressBar";
 import List from "./components/List/List";
 import * as LegacyReplacements from "./legacy-replacements";
+import * as TypographyClassNames from "./components/Typography/classnames";
 declare const HelperClasses: {
     Typography: typeof TypographyClassNames;
     Intent: {
-        [x: string]: string;
+        [key: string]: string;
     };
 };
 declare const Utilities: {
     openInNewTab: (event: import("react").MouseEvent<HTMLElement, MouseEvent>, handler?: ((e: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined, url?: string | undefined) => void;
     decideContrastColorValue: ({ testColor, lightColor, darkColor }: import("./common/utils/colorDecideContrastvalue").decideContrastColorValueProps) => string;
 };
-export { ApplicationContainer, ApplicationHeader, ApplicationContent, ApplicationSidebarNavigation, ApplicationSidebarToggler, ApplicationTitle, ApplicationToolbar, ApplicationToolbarSection, ApplicationToolbarAction, ApplicationToolbarPanel, AutoSuggestion, AutoSuggestionList, SingleLineCodeEditor, HtmlContentBlock, OverflowText, WhiteSpaceContainer, Highlighter, Grid, GridRow, GridColumn, List, WorkspaceContent, WorkspaceMain, WorkspaceSide, WorkspaceHeader, Menu, MenuItem, MenuDivider, ContextOverlay, ContextMenu, OverviewItem, OverviewItemDepiction, OverviewItemDescription, OverviewItemLine, OverviewItemActions, OverviewItemList, TableContainer, Table, TableHead, TableRow, TableBody, TableCell, TableHeader, Icon, IconButton, Label, Button, Checkbox, RadioButton, Tabs, Tab, TabTitle, TabPanel, TextField, TextArea, SearchField, Switch, NumericInput, FieldItem, FieldItemRow, FieldSet, BreadcrumbList, BreadcrumbItem, Modal, SimpleDialog, AlertDialog, Card, CardHeader, CardTitle, CardOptions, CardContent, CardActions, CardActionsAux, HoverToggler, Spacing, Divider, Tooltip, Section, SectionHeader, TitlePage, TitleMainsection, TitleSubsection, Accordion, AccordionItem, Toolbar, ToolbarSection, Tag, TagList, Pagination, Notification, Link, Spinner, InteractionGate, PropertyName, PropertyValue, PropertyValuePair, PropertyValueList, Toast, HelperClasses, Select, MultiSelect, AutoCompleteField, ProgressBar, Iframe, IframeModal, Utilities, LegacyReplacements, };
-export * from "./components/Tree/Tree";
-export * from "./cmem";
-export * from "./extensions";
+export { ApplicationContainer, ApplicationHeader, ApplicationContent, ApplicationSidebarNavigation, ApplicationSidebarToggler, ApplicationTitle, ApplicationToolbar, ApplicationToolbarSection, ApplicationToolbarAction, ApplicationToolbarPanel, AutoSuggestion, AutoSuggestionList, SingleLineCodeEditor, Grid, GridRow, GridColumn, List, WorkspaceContent, WorkspaceMain, WorkspaceSide, WorkspaceHeader, Menu, MenuItem, MenuDivider, ContextOverlay, ContextMenu, OverviewItem, OverviewItemDepiction, OverviewItemDescription, OverviewItemLine, OverviewItemActions, OverviewItemList, TableContainer, Table, TableHead, TableRow, TableBody, TableCell, TableHeader, IconButton, Label, Button, Checkbox, RadioButton, Tabs, Tab, TabTitle, TabPanel, TextField, TextArea, SearchField, Switch, NumericInput, FieldItem, FieldItemRow, FieldSet, BreadcrumbList, BreadcrumbItem, Modal, SimpleDialog, AlertDialog, Card, CardHeader, CardTitle, CardOptions, CardContent, CardActions, CardActionsAux, HoverToggler, Spacing, Divider, Tooltip, Section, SectionHeader, TitlePage, TitleMainsection, TitleSubsection, Accordion, AccordionItem, Toolbar, ToolbarSection, Tag, TagList, Pagination, Notification, Link, Spinner, InteractionGate, PropertyName, PropertyValue, PropertyValuePair, PropertyValueList, Toast, HelperClasses, Select, MultiSelect, AutoCompleteField, ProgressBar, Iframe, IframeModal, Utilities, LegacyReplacements, };
+export * from "./components";
 export * from "./components/interfaces";
+export * from "./extensions";
+export * from "./cmem";

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": "23.0.0-rc.7",
+  "version": "23.1.0-easynav.0",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
   "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -53,7 +53,7 @@
     "build:all": "yarn build:clean && yarn build:esm && yarn build:cjs",
     "compile": "tsc --build tsconfig.json",
     "compile-scss": "ts-node -O \"{ \\\"esModuleInterop\\\": true, \\\"module\\\": \\\"commonjs\\\"}\" ./scripts/compile-sass.ts",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6006 --no-open",
     "build-storybook": "build-storybook",
     "test": "jest",
     "test:ci": "jest --ci --reporters='default'",
@@ -66,12 +66,11 @@
     "@blueprintjs/core": "^4.9.0",
     "@blueprintjs/popover2": "^1.6.0",
     "@blueprintjs/select": "^4.6.0",
-    "@carbon/icons": "10.44.0",
-    "@carbon/icons-react": "10.44.0",
+    "@carbon/icons": "^11.11.0",
+    "@carbon/icons-react": "^11.11.0",
+    "@carbon/styles": "^1.17.0",
     "@mavrin/remark-typograf": "^2.2.0",
-    "carbon-components": "10.44.0",
-    "carbon-components-react": "7.44.1",
-    "carbon-icons": "7.0.7",
+    "carbon-components-react": "^8.17.0",
     "codemirror": "^5.61.0",
     "color": "3.2.1",
     "lodash": "^4.17.21",
@@ -81,6 +80,8 @@
     "react-codemirror2": "^7.2.1",
     "react-dom": "^16.13.1",
     "react-flow-renderer": "9.7.4",
+    "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
+    "react-inlinesvg": "^3.0.1",
     "react-markdown": "^7.0.1",
     "rehype-raw": "^6.1.0",
     "remark-definition-list": "^1.1.0",
@@ -107,7 +108,7 @@
     "@storybook/react": "^6.5.10",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
-    "@types/carbon-components-react": "7.49.0",
+    "@types/carbon-components-react": "^7.55.2",
     "@types/codemirror": "^5.60.5",
     "@types/color": "^3.0.2",
     "@types/jest": "^24.9.1",
@@ -132,24 +133,21 @@
     "sass-loader": "^10.3.1",
     "ts-node": "^10.9.1",
     "tsc-esm-fix": "^2.13.0",
-    "typescript": "4.4.4"
+    "typescript": "4.4.4",
+    "yargs": "^17.6.2"
   },
   "peerDependencies": {
+    "@types/carbon-components-react": ">=7",
     "react": ">=16",
     "react-dom": ">=16"
   },
   "resolutions": {
-    "**/@carbon/icons": "10.44.0",
-    "**/@carbon/icons-react": "10.44.0",
-    "**/carbon-components": "10.44.0",
-    "**/carbon-components-react": "7.44.1",
-    "**/carbon-icons": "7.0.7",
-    "**/@types/react": "^17.0.0",
+    "**/@types/react": "^17.0.52",
     "**/node-gyp": "^7.0.0",
     "**/glob-parent": "^5.1.2",
     "**/trim": "^0.0.3",
     "**/trim-newlines": "^3.0.1",
-    "**/minimist": "^1.2.6",
+    "**/minimist": "^1.2.7",
     "**/postcss": "^7.0.36"
   },
   "eslintConfig": {

package/scripts/compile-sass.ts

@@ -1,9 +1,17 @@
 import * as sass from "sass";
 import tildeImporter from "node-sass-package-importer";
+import yargs from "yargs";
 import sassRenderSyncConfig from "./sassConfig";
 
-sass.renderSync({
+const args = yargs(process.argv.slice(2)).argv;
+
+const styles = sass.renderSync({
     importer: tildeImporter(),
     ...sassRenderSyncConfig,
     file: "src/index.scss",
+    includePaths: ["node_modules"], // Carbon does not use tilde import syntax
 });
+
+if (args.outputCss) {
+    console.log(styles.css.toString());
+}

package/src/_shame.scss

@@ -14,7 +14,7 @@ html {
 .#{$prefix}--assistive-text,
 .#{$prefix}--visually-hidden {
     /*
-        TODO: move to better place, originally from ~carbon-components/scss/globals/scss/css--helpers
+        TODO: move to better place, originally from ~@carbon/styles/scss/css--helpers
         but we cannot use it directly because of other included rules there.
     */
     position: absolute;

package/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import { ActivityControlWidget } from "./ActivityControlWidget";
 import { loremIpsum } from "react-lorem-ipsum";
-import Tag from "../../components/Tag/Tag";
-import TagList from "../../components/Tag/TagList";
+
+import { Tag, TagList, ActivityControlWidget } from "../../../index";
+import { helpersArgTypes } from "../../../.storybook/helpers";
 
 export default {
     title: "Cmem/ActivityControlWidget",
@@ -28,6 +27,9 @@ export default {
                 type: { summary: "boolean" },
             },
         },
+        progressSpinnerFinishedIcon: {
+            ...helpersArgTypes.exampleIcon,
+        },
     },
 } as ComponentMeta<typeof ActivityControlWidget>;
 

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -20,6 +20,7 @@ import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
 import { SpinnerProps } from "../../components/Spinner/Spinner";
 import { ValidIconName } from "../../components/Icon/canonicalIconNames";
 import { IconProps } from "../../components/Icon/Icon";
+import { TestIconProps } from "../../components/Icon/TestIcon";
 
 export interface IActivityControlProps extends TestableComponent {
     /**
@@ -74,7 +75,7 @@ export interface IActivityControlProps extends TestableComponent {
     /**
      * if this is set the spinner is replaced when the progress has finished from 0 - 1
      */
-    progressSpinnerFinishedIcon?: React.ReactElement<IconProps>;
+    progressSpinnerFinishedIcon?: React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
 }
 
 interface IActivityContextMenu extends TestableComponent {
@@ -124,7 +125,7 @@ export function ActivityControlWidget(props: IActivityControlProps) {
             {(progressSpinner || progressSpinnerFinishedIcon) && (
                 <OverviewItemDepiction keepColors>
                     {progressSpinnerFinishedIcon ? (
-                        React.cloneElement(progressSpinnerFinishedIcon, { small, large: !small })
+                        React.cloneElement(progressSpinnerFinishedIcon as JSX.Element, { small, large: !small })
                     ) : (
                         <Spinner
                             position="inline"

package/src/cmem/react-flow/ReactFlow/ReactFlow.tsx

@@ -1,16 +1,33 @@
 import React from "react";
 import {default as ReactFlowOriginal, ReactFlowProps as ReactFlowOriginalProps} from "react-flow-renderer";
-import { ReactFlowMarkers } from "../../../extensions/react-flow/markers/ReactFlowMarkers";
+import {ReactFlowMarkers} from "../../../extensions/react-flow/markers/ReactFlowMarkers";
 import * as unspecifiedConfig from "./../configuration/unspecified";
 import * as graphConfig from "./../configuration/graph";
 import * as workflowConfig from "./../configuration/workflow";
 import * as linkingConfig from "./../configuration/linking";
+import {useReactFlowScrollOnDrag} from "../extensions/scrollOnDragHook";
 
 export interface ReactFlowProps extends ReactFlowOriginalProps {
     /**
      * Load `ReactFlow` component with pre-configured values for `nodeTypes` and `edgeTypes`
      */
     configuration?: "unspecified" | "graph" | "workflow" | "linking";
+
+    /** If defined the canvas scrolls on all drag operations (node, selection, edge connect)
+     * when the mouse pointer comes near the canvas borders or goes beyond them.
+     * The `id` property of the ReactFlow component must be set in order for this to work.
+     *
+     * NOTE: If scrollOnDrag is defined, a ReactFlowProvider must be wrapped around this component (or a parent). */
+    scrollOnDrag?: {
+        /** Time in milliseconds to wait before the canvas scrolls the next step. */
+        scrollInterval: number
+
+        /**
+         * The size of each scroll step.
+         * This should be a number between 0.0 - 1.0.
+         * E.g. a value of 0.25 will lead to a scroll step size of a quarter of the visible canvas. */
+        scrollStepSize: number
+    }
 }
 
 /**
@@ -20,10 +37,17 @@ export interface ReactFlowProps extends ReactFlowOriginalProps {
 export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
     {
         configuration = "unspecified",
+        scrollOnDrag,
         children,
         ...originalProps
     },
     ref) => {
+
+    const scrollOnDragFunctions = useReactFlowScrollOnDrag({
+        reactFlowProps: originalProps,
+        scrollOnDrag
+    })
+
     const configReactFlow = {
         unspecified: unspecifiedConfig,
         graph: graphConfig,
@@ -37,6 +61,7 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
             nodeTypes={ configReactFlow[configuration].nodeTypes }
             edgeTypes={ configReactFlow[configuration].edgeTypes }
             {...originalProps}
+            {...scrollOnDragFunctions}
         >
             { children }
             <ReactFlowMarkers />

package/src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx

@@ -27,13 +27,17 @@ export interface StickyNoteModalProps {
     translate: (key: StickyNoteModalTranslationKeys) => string;
 }
 
-export const StickyNoteModal: React.FC<StickyNoteModalProps> = ({ metaData, onClose, onSubmit, translate }) => {
+export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(({
+    metaData,
+    onClose,
+    onSubmit,
+    translate
+}) => {
     const refNote = React.useRef<string>(metaData?.note ?? "");
     const [color, setSelectedColor] = React.useState<string>(metaData?.color ?? "");
-    const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(([key, value]) => [
-        key,
-        value as string,
-    ]);
+    const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(
+        ([key, value]) => [key, value as string]
+    );
 
     React.useEffect(() => {
         if (!color && noteColors[0][1]) {
@@ -131,4 +135,4 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = ({ metaData, onCl
             </FieldItem>
         </SimpleDialog>
     );
-};
+});