@eccenca/gui-elements 24.0.0-rc.2 → 24.0.0-rc.4

package/src/extensions/react-flow/nodes/NodeContent.tsx

@@ -13,8 +13,8 @@ import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupp
 
 import { HandleDefault, HandleNextProps, HandleProps } from "./../handles/HandleDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
-import { NodeProps } from "./NodeDefault";
-import { HighlightingState, NodeHighlightColor } from "./sharedTypes";
+import { NodeDefaultProps } from "./NodeDefault";
+import { NodeHighlightColor } from "./sharedTypes";
 
 type NodeContentHandleLegacyProps = HandleProps;
 
@@ -22,14 +22,7 @@ type NodeContentHandleNextProps = HandleNextProps;
 
 export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps;
 
-// @deprecated use `NodeContentProps<any>['highlightedState']` (or import from `src/extensions/react-flow/nodes/sharedTypes`)
-export type { HighlightingState };
-
-// @deprecated use `HandleDefaultProps`
-export type IHandleProps = NodeContentHandleLegacyProps;
-
-// @deprecated use `NodeContentProps<any>['nodeDimensions']`
-export type NodeDimensions = {
+type NodeDimensions = {
     width: number;
     height: number;
 };
@@ -112,12 +105,6 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * Also the depiction is displayed larger.
      */
     enlargeHeader?: boolean;
-    /**
-     * @deprecated
-     * Set the type of used highlights to mark the node.
-     * Replaced by `intent` and `highlightColor` properties.
-     */
-    highlightedState?: HighlightingState | HighlightingState[];
     /**
      * Defines how the borders of a node are displayed.
      * Use this property to overwrite default styles.
@@ -171,7 +158,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * 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: NodeProps<NODE_DATA>) => NodeContentData;
+    getMinimalTooltipData?: (node: NodeDefaultProps<NODE_DATA>) => NodeContentData;
     /**
      * Set if a handle is displayed even if it does not allow a connection to an edge.
      */
@@ -288,11 +275,6 @@ const addHandles = (
     });
 };
 
-const gethighlightedStateClasses = (state: HighlightingState | HighlightingState[], baseClassName: string) => {
-    const hightlights = typeof state === "string" ? [state] : state;
-    return hightlights.map((item: HighlightingState) => `${baseClassName}--highlight-${item}`).join(" ");
-};
-
 const MemoHandler = React.memo(
     (props: MemoHandlerProps) => <HandleDefault {...props} />,
     (prev, next) => {
@@ -329,7 +311,6 @@ export function NodeContent<CONTENT_PROPS = any>({
     footerContent,
     size = "small",
     minimalShape = "circular",
-    highlightedState,
     intent,
     border,
     highlightColor,
@@ -513,9 +494,6 @@ export function NodeContent<CONTENT_PROPS = any>({
                               .map((highlight) => ` ${eccgui}-graphviz__node--highlight-${highlight}`)
                               .join("")
                         : "") +
-                    (highlightedState
-                        ? " " + gethighlightedStateClasses(highlightedState, `${eccgui}-graphviz__node`)
-                        : "") +
                     (animated ? ` ${eccgui}-graphviz__node--animated` : "") +
                     (introductionTime && !introductionDone ? ` ${eccgui}-graphviz__node--introduction` : "") +
                     (showUnconnectableHandles === false ? ` ${eccgui}-graphviz__node--hidehandles` : "") +
@@ -696,5 +674,4 @@ const evaluateHighlightColors = (
 
 export const nodeContentUtils = {
     evaluateHighlightColors,
-    gethighlightedStateClasses,
 };

package/src/extensions/react-flow/nodes/NodeDefault.tsx

@@ -16,9 +16,6 @@ export interface NodeDefaultProps<NODE_DATA, NODE_CONTENT_PROPS = any>
     data: NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS>;
 }
 
-// @deprecated use NodeDefaultProps
-export type NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> = NodeDefaultProps<NODE_DATA, NODE_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/src/extensions/react-flow/nodes/_nodes.scss

@@ -555,58 +555,3 @@
     flex-shrink: 0;
     text-align: center;
 }
-
-// Node highlights (@deprecated) // FIXME: remove in v24.0.0
-
-.#{$eccgui}-graphviz__node--highlight-success,
-.#{$eccgui}-graphviz__node--highlight-warning,
-.#{$eccgui}-graphviz__node--highlight-danger {
-    &::before {
-        position: absolute;
-        inset: -2 * $reactflow-node-border-width;
-        z-index: -1;
-        display: block;
-        content: " ";
-        border-radius: inherit;
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-danger-text !important;
-    }
-}
-
-.#{$eccgui}-graphviz__node--highlight-match,
-.#{$eccgui}-graphviz__node--highlight-altmatch {
-    &::after {
-        position: absolute;
-        inset: -2 * $reactflow-node-border-width;
-        z-index: -1;
-        display: block;
-        content: " ";
-        border-radius: inherit;
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-accent;
-    }
-
-    &.#{$eccgui}-graphviz__node--highlight-success,
-    &.#{$eccgui}-graphviz__node--highlight-warning,
-    &.#{$eccgui}-graphviz__node--highlight-danger {
-        &::after {
-            inset: -4 * $reactflow-node-border-width;
-        }
-    }
-}
-
-.#{$eccgui}-graphviz__node--highlight-success {
-    &::before {
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-success-text !important;
-    }
-}
-
-.#{$eccgui}-graphviz__node--highlight-warning {
-    &::before {
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-warning-text !important;
-    }
-}
-
-.#{$eccgui}-graphviz__node--highlight-altmatch {
-    &::after {
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width color.complement($eccgui-color-primary) !important;
-    }
-}

package/src/extensions/react-flow/nodes/nodeTypes.ts

@@ -1,6 +1,6 @@
 import { NodeDefault } from "./NodeDefault";
 
-// @deprecated will be removed because it is probably not used this way anymore
+/** @deprecated (v25) will be removed without replacement, define it yourself or use `<ReactFlow/` with `configuration` option. */
 export const nodeTypes = {
     default: NodeDefault,
     graphNode: NodeDefault,

package/src/extensions/react-flow/nodes/sharedTypes.ts

@@ -1,3 +1,2 @@
 import Color from "color";
-export type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
 export type NodeHighlightColor = "default" | "alternate" | Color | string;

package/src/index.scss

@@ -50,7 +50,6 @@ $prefix-carbon: $prefix;
 // == Load basic components styles =============================================
 
 @import "./components";
-@import "./extensions/codemirror/codemirror";
 
 // set more readable variable for prefix
 $prefix-eccgui: $eccgui;

package/src/index.ts

@@ -11,8 +11,6 @@ const ClassNames = {
     Skeleton,
     Typography: TypographyClassNames,
 };
-// @deprecated use `ClassNames`
-const HelperClasses = ClassNames;
 
 export * from "./configuration/constants";
 export * from "./common";
@@ -20,4 +18,4 @@ export * from "./components";
 export * from "./extensions";
 export * from "./cmem";
 
-export { ClassNames, HelperClasses, LegacyReplacements };
+export { ClassNames, LegacyReplacements };

package/src/legacy-replacements/Button/AffirmativeButton.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { ButtonReplacement } from "./Button";
 
+/** @deprecated (v25) all legacy component support will be removed, switch to `<Button affirmative />` */
 export function AffirmativeButtonReplacement({ children, ...otherProps }: any) {
     return (
         <ButtonReplacement {...otherProps} affirmative={true}>

package/src/legacy-replacements/Button/Button.tsx

@@ -11,6 +11,7 @@ export const iconMappings: { [key: string]: any } = {
     arrow_back: "navigation-back",
 };
 
+/** @deprecated (v25) all legacy component support will be removed, switch to `<Button />` */
 export function ButtonReplacement({
     children,
     className,
@@ -47,6 +48,7 @@ export function ButtonReplacement({
                 "Button 'progress' property is not fully supported on legacy replacement element, it only shows a loading spinner in the button."
             );
         }
+        // eslint-disable-next-line no-console
         debugMsg.forEach((element) => console.debug(element));
     }
     if (typeof otherProps.accent !== "undefined") {

package/src/legacy-replacements/Button/DismissiveButton.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { ButtonReplacement } from "./Button";
 
+/** @deprecated (v25) all legacy component support will be removed, switch to `<Button dismissive />` */
 export function DismissiveButtonReplacement({ children, ...otherProps }: any) {
     return (
         <ButtonReplacement {...otherProps} dismissive={true}>

package/src/legacy-replacements/Button/DisruptiveButton.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { ButtonReplacement } from "./Button";
 
+/** @deprecated (v25) all legacy component support will be removed, switch to `<Button disruptive />` */
 export function DisruptiveButtonReplacement({ children, ...otherProps }: any) {
     return (
         <ButtonReplacement {...otherProps} disruptive={true}>

package/src/legacy-replacements/Checkbox/Checkbox.tsx

@@ -13,6 +13,7 @@ const extendedOnChangeBoolean = (onChangeFn: any, event: any) => {
     }
 };
 
+/** @deprecated (v25) all legacy component support will be removed, switch to `<Checkbox />` */
 export function CheckboxReplacement({
     children = null,
     checked = false,
@@ -34,6 +35,7 @@ export function CheckboxReplacement({
             debugMsg.push("Checkbox 'hideLabel' property is not supported on legacy replacement element.");
             delete otherProps.hideLabel;
         }
+        // eslint-disable-next-line no-console
         debugMsg.forEach((element) => console.debug(element));
     }
     if (typeof otherProps.ripple !== "undefined") {

package/src/legacy-replacements/Radio/RadioButton.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import RadioButton from "../../components/RadioButton/RadioButton";
 
+/** @deprecated (v25) all legacy component support will be removed, switch to `<RadioButton />` */
 export function RadioButtonReplacement({ children, label, ...otherProps }: any) {
     if (process.env.NODE_ENV === "development") {
         const debugMsg = [
@@ -18,6 +19,7 @@ export function RadioButtonReplacement({ children, label, ...otherProps }: any)
         if (typeof label !== "undefined") {
             debugMsg.push("Radio 'label' property is not supported exactly like at the legacy element.");
         }
+        // eslint-disable-next-line no-console
         debugMsg.forEach((element) => console.debug(element));
     }
     if (typeof otherProps.ripple !== "undefined") {

package/src/legacy-replacements/Tabs/Tabs.tsx

@@ -3,8 +3,8 @@ import { Tab, Tabs as BlueprintTabs, TabsProps as BlueprintTabsProps } from "@bl
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-// deprecated interface
-interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "large" | "id" | "animate"> {
+// legacy interface
+interface LegacyTabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "large" | "id" | "animate"> {
     activeTab: string;
     tabs: DeprecatedTabProps[];
     onTabClick?: ({ props }: any) => void;
@@ -16,7 +16,7 @@ interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "
     controlled?: boolean;
 }
 
-// deprecated interface
+/** @deprecated (v25) all legacy component support will be removed */
 export interface DeprecatedTabProps {
     tabId: string;
     tabTitle: React.ReactNode;
@@ -36,6 +36,7 @@ const createDeprecatedTab = ({
     return <Tab key={tabId} id={tabId} title={tabTitle} panel={tabContent} {...otherTabProps} {...extraStyles} />;
 };
 
+/** @deprecated (v25) all legacy component support will be removed, switch to `<Tabs />` */
 export function TabsReplacement({
     activeTab,
     tabs = [],
@@ -45,7 +46,7 @@ export function TabsReplacement({
     className = "",
     allowScrollbars,
     ...restProps
-}: TabsProps) {
+}: LegacyTabsProps) {
     const usagetype = controlled ? { selectedTabId: activeTab } : { defaultSelectedTabId: activeTab };
     return (
         <BlueprintTabs

package/src/legacy-replacements/TextField/TextField.tsx

@@ -13,6 +13,7 @@ const extendedOnChange = (onChangeFn: any, event: any) => {
     }
 };
 
+/** @deprecated (v25) all legacy component support will be removed, switch to `<TextField />`, `<TextArea />`, `<FieldItem />` */
 export function TextFieldReplacement({
     className,
     disabled = false,
@@ -36,6 +37,7 @@ export function TextFieldReplacement({
             debugMsg.push("TextField 'reducedSize' property is currently not supported on legacy replacement element.");
             delete otherProps.reducedSize;
         }
+        // eslint-disable-next-line no-console
         debugMsg.forEach((element) => console.debug(element));
     }
     if (typeof otherProps.reducedSize !== "undefined") {

package/dist/cjs/components/NumericInput/NumericInput.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NumericInput = void 0;
-const react_1 = require("react");
-const core_1 = require("@blueprintjs/core");
-// @deprecated will be remove because beside the special arrow buttons it does not add any special. Could be done also with TextField + correct `type`.
-exports.NumericInput = (0, react_1.memo)(core_1.NumericInput);
-exports.default = exports.NumericInput;
-//# sourceMappingURL=NumericInput.js.map

package/dist/cjs/components/NumericInput/NumericInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NumericInput.js","sourceRoot":"","sources":["../../../../src/components/NumericInput/NumericInput.tsx"],"names":[],"mappings":";;;AAAA,iCAA6B;AAC7B,4CAA0E;AAE1E,uJAAuJ;AAC1I,QAAA,YAAY,GAAG,IAAA,YAAI,EAAC,mBAAqB,CAAC,CAAC;AACxD,kBAAe,oBAAY,CAAC"}

package/dist/esm/components/NumericInput/NumericInput.js

@@ -1,6 +0,0 @@
-import { memo } from "react";
-import { NumericInput as BlueprintNumericInput } from "@blueprintjs/core";
-// @deprecated will be remove because beside the special arrow buttons it does not add any special. Could be done also with TextField + correct `type`.
-export var NumericInput = memo(BlueprintNumericInput);
-export default NumericInput;
-//# sourceMappingURL=NumericInput.js.map

package/dist/esm/components/NumericInput/NumericInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NumericInput.js","sourceRoot":"","sources":["../../../../src/components/NumericInput/NumericInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,uJAAuJ;AACvJ,MAAM,CAAC,IAAM,YAAY,GAAG,IAAI,CAAC,qBAAqB,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}

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

@@ -1,3 +0,0 @@
-import { NumericInput as BlueprintNumericInput } from "@blueprintjs/core";
-export declare const NumericInput: import("react").MemoExoticComponent<typeof BlueprintNumericInput>;
-export default NumericInput;

package/src/components/AutoSuggestion/AutoSuggestion.stories.tsx

@@ -1,14 +0,0 @@
-import { Meta } from "@storybook/react";
-
-import { AutoSuggestion } from "./../../../index";
-export { Default } from "../CodeAutocompleteField/CodeAutocompleteField.stories";
-
-export default {
-    title: "Forms/AutoSuggestion",
-    component: AutoSuggestion,
-    parameters: {
-        controls: {
-            exclude: /.*/g,
-        },
-    },
-} as Meta<typeof AutoSuggestion>;

package/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -1,14 +0,0 @@
-import { Meta } from "@storybook/react";
-
-import { MultiSelect } from "./../../../index";
-export { Default } from "../MultiSuggestField/MultiSuggestField.stories";
-
-export default {
-    title: "Forms/MultiSelect",
-    component: MultiSelect,
-    parameters: {
-        controls: {
-            exclude: /.*/g,
-        },
-    },
-} as Meta<typeof MultiSelect>;

package/src/components/NumericInput/NumericInput.tsx

@@ -1,6 +0,0 @@
-import { memo } from "react";
-import { NumericInput as BlueprintNumericInput } from "@blueprintjs/core";
-
-// @deprecated will be remove because beside the special arrow buttons it does not add any special. Could be done also with TextField + correct `type`.
-export const NumericInput = memo(BlueprintNumericInput);
-export default NumericInput;