@eccenca/gui-elements 23.0.0-rc.0 → 23.0.0-rc.3-unofficial.0

package/dist/types/extensions/react-flow/edges/EdgeTools.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { IPopoverProps as IBlueprintPopoverProps } from "@blueprintjs/core";
+import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
 interface PosOffset {
     left: number;
     top: number;
 }
-export interface EdgeToolsProps extends IBlueprintPopoverProps {
+export interface EdgeToolsProps extends Omit<ContextOverlayProps, "children"> {
     posOffset: PosOffset;
     children: string | JSX.Element | JSX.Element[];
 }

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

@@ -7,8 +7,11 @@ export { EdgeDefault } from "./edges/EdgeDefault";
 export { EdgeStep } from "./edges/EdgeStep";
 export { EdgeTools } from "./edges/EdgeTools";
 export { edgeTypes } from "./edges/edgeTypes";
+export { MarkerArrowClosedInverse } from "./markers/MarkerArrowClosedInverse";
+export { ReactFlowMarkers } from "./markers/ReactFlowMarkers";
 export { MiniMap } from "./minimap/MiniMap";
 export { minimapNodeClassName, minimapNodeColor } from "./minimap/utils";
+export { default as nodeUtils } from "./nodes/nodeUtils";
 export type { NodeProps } from "./nodes/NodeDefault";
 export type { NodeContentProps } from "./nodes/NodeContent";
 export type { NodeContentExtensionProps } from "./nodes/NodeContentExtension";

package/dist/types/extensions/react-flow/markers/MarkerArrowClosedInverse.d.ts

@@ -0,0 +1,2 @@
+import { FC } from "react";
+export declare const MarkerArrowClosedInverse: FC;

package/dist/types/extensions/react-flow/markers/ReactFlowMarkers.d.ts

@@ -0,0 +1,2 @@
+import { FC } from "react";
+export declare const ReactFlowMarkers: FC;

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

@@ -5,4 +5,4 @@ export interface MiniMapProps extends ReactFlowMiniMapProps {
     enableNavigation?: boolean;
 }
 /** An improved mini-map for react-flow that supports navigation via the mini-map. */
-export declare const MiniMap: React.MemoExoticComponent<({ flowInstance, enableNavigation, maskColor, ...minimapProps }: MiniMapProps) => JSX.Element>;
+export declare const MiniMap: React.MemoExoticComponent<({ flowInstance, enableNavigation, maskColor, nodeClassName, nodeColor, nodeStrokeColor, ...minimapProps }: MiniMapProps) => JSX.Element>;

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

@@ -1,2 +1,3 @@
 export declare const minimapNodeClassName: (node: any) => string;
 export declare const minimapNodeColor: (node: any) => any;
+export declare const minimapBorderColor: (node: any) => any;

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

@@ -8,6 +8,10 @@ export declare type HighlightingState = "success" | "warning" | "danger" | "matc
 export interface IHandleProps extends HandleProps {
     category?: "configuration";
 }
+export declare type NodeDimensions = {
+    width: number;
+    height: number;
+};
 interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Name of icon that should be displayed before the node label.
@@ -30,6 +34,10 @@ interface NodeContentData<CONTENT_PROPS = any> {
      * Content extension, displayed at the bottom side of a node.
      */
     contentExtension?: React.ReactElement<NodeContentExtensionProps>;
+    /**
+     * If submitted then the node will display footer element.
+     */
+    footerContent?: React.ReactNode;
 }
 export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -117,11 +125,19 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * If this is allowed scrolling inside a node is not possible.
      */
     letPassWheelEvents?: boolean;
+    /**
+     * When set to true, allows nodes to be resized by dragging edges and sides
+     */
+    onNodeResize?: (data: NodeDimensions) => void;
+    /**
+     * width and height dimensions of the node (Optional)
+     */
+    nodeDimensions?: NodeDimensions;
 }
 export declare const gethighlightedStateClasses: (state: any, baseClassName: any) => 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, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherProps }: NodeContentProps<any>): JSX.Element;
+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 {};

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

@@ -13,7 +13,7 @@ export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivE
      * Click handler to manage the expanded state from outside the the element.
      * This state is not managed automatically by the element itself.
      */
-    onToggle?: (event: React.MouseEvent<HTMLElement>, isExpanded: boolean) => void;
+    setExpanded?: (event: React.MouseEvent<HTMLElement>, isCurrentlyExpanded: boolean) => boolean;
     /**
      * Single element or aray of `IconButton` and `Button` elements.
      * They will be displayed beside the closing button under the element content body.
@@ -31,4 +31,4 @@ export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivE
 /**
  * Displays an content area that can be attached to `NodeContent` elements.
  */
-export declare const NodeContentExtension: ({ children, slideOutOfNode, isExpanded, onToggle, actionButtons, tooltipExpand, tooltipReduce, ...otherProps }: NodeContentExtensionProps) => JSX.Element;
+export declare const NodeContentExtension: ({ children, slideOutOfNode, isExpanded, setExpanded, actionButtons, tooltipExpand, tooltipReduce, ...otherProps }: NodeContentExtensionProps) => JSX.Element;

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

@@ -1,7 +1,7 @@
 import React from "react";
-import { IPopoverProps as IBlueprintPopoverProps } from "@blueprintjs/core";
+import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-export interface NodeToolsProps extends IBlueprintPopoverProps {
+export interface NodeToolsProps extends Omit<ContextOverlayProps, "children"> {
     children: string | JSX.Element;
     togglerElement?: ValidIconName | JSX.Element;
     togglerText?: string;

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

@@ -0,0 +1,14 @@
+import { CSSProperties } from "react";
+import { Node } from "react-flow-renderer";
+interface IStickyNote {
+    id: string;
+    content: string;
+    color: string;
+    position: number[];
+    dimension: number[];
+}
+declare const utils: {
+    generateStyleWithColor: (color: string) => CSSProperties;
+    transformNodeToStickyNode: (node: Node<any>) => IStickyNote;
+};
+export default utils;

package/dist/types/index.d.ts

@@ -51,7 +51,7 @@ import Tag from "./components/Tag/Tag";
 import TagList from "./components/Tag/TagList";
 import Notification from "./components/Notification/Notification";
 import Toast from "./components/Notification/Toast";
-import { Select } from "@blueprintjs/select";
+import Select from "./components/Select/Select";
 import MultiSelect from "./components/MultiSelect/MultiSelect";
 import { Iframe } from "./components/Iframe/Iframe";
 import { IframeModal } from "./components/Iframe/IframeModal";
@@ -92,6 +92,7 @@ declare const Utilities: {
     openInNewTab: (event: import("react").MouseEvent<HTMLElement, MouseEvent>, handler?: ((e: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined, url?: string | undefined) => void;
 };
 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, TextField, TextArea, SearchField, Switch, NumericInput, FieldItem, FieldItemRow, FieldSet, BreadcrumbList, BreadcrumbItem, Modal, SimpleDialog, AlertDialog, Card, CardHeader, CardTitle, CardOptions, CardContent, CardActions, CardActionsAux, Spacing, Divider, Tooltip, Section, SectionHeader, TitlePage, TitleMainsection, TitleSubsection, Accordion, AccordionItem, Toolbar, ToolbarSection, Tag, TagList, Pagination, Notification, Link, Spinner, PropertyName, PropertyValue, PropertyValuePair, PropertyValueList, Toast, HelperClasses, Select, // FIXME: CMEM-3742: include as own element
-MultiSelect, AutoCompleteField, ProgressBar, Iframe, IframeModal, Utilities, LegacyReplacements, };
+MultiSelect, AutoCompleteField, ProgressBar, Iframe, IframeModal, Utilities, LegacyReplacements };
 export * from "./cmem";
 export * from "./extensions";
+export * from "./components/interfaces";

package/dist/types/legacy-replacements/Tabs/Tabs.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TabsProps as BlueprintTabsProps } from "@blueprintjs/core";
-interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "large" | "id" | "renderActiveTabPanelOnly"> {
+interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "large" | "id" | "animate"> {
     activeTab: string;
     tabs: DeprecatedTabProps[];
     onTabClick?: ({ props }: any) => void;

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.0",
+  "version": "23.0.0-rc.3-unofficial.0",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
   "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -38,11 +38,13 @@
     ".": {
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
-    }
+    },
+    "./config/sassOptions": "./scripts/sassConfig.js"
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "scripts"
   ],
   "scripts": {
     "build:clean": "rimraf dist/",
@@ -50,7 +52,7 @@
     "build:cjs": "tsc --project .typescript/tsbuild-cjs.json && ./scripts/fix-cjs-dist",
     "build:all": "yarn build:clean && yarn build:esm && yarn build:cjs",
     "compile": "tsc --build tsconfig.json",
-    "compile-scss": "node-sass src/index.scss --importer=node_modules/node-sass-tilde-importer",
+    "compile-scss": "ts-node -O \"{ \\\"esModuleInterop\\\": true, \\\"module\\\": \\\"commonjs\\\"}\" ./scripts/compile-sass.ts",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "test": "jest",
@@ -60,8 +62,10 @@
     "check:package": "pjv --warnings --recommendations"
   },
   "dependencies": {
-    "@blueprintjs/core": "3.49.1",
-    "@blueprintjs/select": "3.18.1",
+    "@blueprintjs/colors": "^4.1.4",
+    "@blueprintjs/core": "^4.6.1",
+    "@blueprintjs/popover2": "^1.4.3",
+    "@blueprintjs/select": "^4.5.1",
     "@carbon/icons": "10.44.0",
     "@carbon/icons-react": "10.44.0",
     "@mavrin/remark-typograf": "^2.2.0",
@@ -72,6 +76,7 @@
     "color": "3.2.1",
     "lodash": "^4.17.21",
     "micromark": "^3.0.10",
+    "re-resizable": "6.9.9",
     "react": "^16.13.1",
     "react-codemirror2": "^7.2.1",
     "react-dom": "^16.13.1",
@@ -117,22 +122,25 @@
     "jest": "^26.6.3",
     "jest-environment-jsdom-fourteen": "1.0.1",
     "jest-pnp-resolver": "^1.2.1",
-    "node-sass": "4.14.1",
-    "node-sass-tilde-importer": "^1.0.2",
+    "node-sass-package-importer": "^5.3.2",
     "package-json-validator": "^0.6.3",
     "react-app-polyfill": "^1.0.6",
     "react-lorem-ipsum": "^1.4.9",
     "regenerator-runtime": "^0.13.9",
     "rimraf": "^3.0.2",
-    "sass-loader": "8.0.2",
+    "sass": "^1.53.0",
+    "sass-loader": "^10.3.1",
     "style-loader": "0.23.1",
+    "ts-node": "^10.9.1",
     "tsc-esm-fix": "^2.13.0",
     "typescript": "4.4.4",
     "webpack": "^4.46.0"
   },
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16"
+  },
   "resolutions": {
-    "**/@blueprintjs/core": "3.49.1",
-    "**/@blueprintjs/select": "3.18.1",
     "**/@carbon/icons": "10.44.0",
     "**/@carbon/icons-react": "10.44.0",
     "**/carbon-components": "10.44.0",

package/scripts/compile-sass.ts

@@ -0,0 +1,9 @@
+import * as sass from "sass";
+import tildeImporter from "node-sass-package-importer";
+import sassRenderSyncConfig from "./sassConfig";
+
+sass.renderSync({
+    importer: tildeImporter(),
+    ...sassRenderSyncConfig,
+    file: "src/index.scss",
+});

package/scripts/fix-cjs-dist

@@ -0,0 +1,5 @@
+cat >dist/cjs/package.json <<!EOF
+{
+    "type": "commonjs"
+}
+!EOF

package/scripts/fix-esm-dist

@@ -0,0 +1,6 @@
+yarn tsc-esm-fix --target='dist/esm'
+cat >dist/esm/package.json <<!EOF
+{
+    "type": "module"
+}
+!EOF

package/scripts/sassConfig.js

@@ -0,0 +1,13 @@
+const sass = require("sass");
+
+const functions = {
+    'svg-icon($path, $selectors: null)': function(_path, _selectors) {
+        return new sass.SassString("unset");
+    },
+};
+const sassRenderSyncConfig = {
+    quietDeps: true,
+    functions,
+};
+
+module.exports = sassRenderSyncConfig;

package/src/_shame.scss

@@ -109,3 +109,20 @@ scrollbar-color: #bbb transparent;
         background-color: #bbb;
     }
 }
+
+/*
+    CHANGE: default focus behaviour
+*/
+
+
+:focus,
+input:focus-visible,
+textarea:focus-visible {
+    outline: none;
+    outline-offset: 0;
+}
+
+:focus-visible {
+    outline: rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
+    outline-offset: 1px;
+}

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

@@ -66,10 +66,10 @@ const actions = [
 ];
 
 const commonWidgetArgs = {
-    label: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }),
+    label: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }).toString(),
     border: true,
     activityActions: actions,
-    statusMessage: loremIpsum({ p: 1, startWithLoremIpsum: false, random: false }),
+    statusMessage: loremIpsum({ p: 1, startWithLoremIpsum: false, random: false }).toString(),
     progressSpinner: {
         intent: "none",
         value: 0.5,

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -151,15 +151,8 @@ export function ActivityControlWidget(props: IActivityControlProps) {
                                     <Tooltip
                                         content={props.statusMessage}
                                         size="large"
-                                        tooltipProps={{
-                                            position: "top-right",
-                                            boundary: "viewport",
-                                            modifiers: {
-                                                flip: {
-                                                    enabled: false
-                                                }
-                                            }
-                                        }}
+                                        placement="top-start"
+                                        rootBoundary="viewport"
                                     >
                                         {props.statusMessage}
                                     </Tooltip>
@@ -181,9 +174,11 @@ export function ActivityControlWidget(props: IActivityControlProps) {
                                 name={action.icon}
                                 text={action.tooltip}
                                 onClick={action.action}
-                                tooltipOpenDelay={200}
                                 disabled={action.disabled}
                                 hasStateWarning={action.hasStateWarning}
+                                tooltipProps={{
+                                    hoverOpenDelay: 200
+                                }}
                             />
                         );
                     })}

package/src/cmem/index.ts

@@ -13,6 +13,7 @@ export { firstNonEmptyLine } from "./ContentBlobToggler/StringPreviewContentBlob
 export { ElapsedDateTimeDisplay } from "./DateTimeDisplay/ElapsedDateTimeDisplay";
 export { Markdown } from "./markdown/Markdown";
 export { ReactFlow } from "./react-flow/ReactFlow/ReactFlow";
+export { StickyNoteModal } from "./react-flow/StickyNoteModal/StickyNoteModal";
 
 export type {
     IActivityStatus,

package/src/cmem/markdown/markdown.scss

@@ -8,7 +8,7 @@
 
     vertical-align: super;
     font-size: $eccgui-size-typo-caption;
-    margin-left: $eccgui-size-inline-whitespace / 2;
+    margin-left: $eccgui-size-inline-whitespace * 0.5;
 }
 
 .footnote-back {