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

package/src/components/AutocompleteField/AutoCompleteField.stories.tsx

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

package/src/components/AutocompleteField/index.ts

@@ -1,6 +0,0 @@
-import { createNewItemRendererFactory } from "./autoCompleteFieldUtils";
-export * from "./AutoCompleteField";
-export * from "./interfaces";
-export const autoCompleteFieldUtils = {
-    createNewItemRendererFactory,
-};

package/src/components/CodeAutocompleteField/CodeAutocompleteField.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import AutoSuggestion, { AutoSuggestionProps } from "../AutoSuggestion/AutoSuggestion";
-
-export interface CodeAutocompleteFieldProps extends AutoSuggestionProps {}
-
-/**
- * Input component that allows partial, fine-grained auto-completion, i.e. of sub-strings of the input string.
- * This is comparable to a one line code editor.
- *
- * Example usage: input of a path string offering auto-completion for each single part of the path.
- */
-export function CodeAutocompleteField({ className, ...otherProps }: CodeAutocompleteFieldProps) {
-    // Currently this works only as an alias element for `AutoSuggestion`.
-    return (
-        <AutoSuggestion
-            className={`${eccgui}-codeautocompletefield` + (className ? ` ${className}` : "")}
-            {...otherProps}
-        />
-    );
-}

package/src/components/MultiSuggestField/MultiSuggestField.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import MultiSelect, { MultiSelectProps, MultiSelectSelectionProps } from "../MultiSelect/MultiSelect";
-
-export type MultiSuggestFieldSelectionProps<T> = MultiSelectSelectionProps<T>;
-
-export interface MultiSuggestFieldProps<T> extends Omit<MultiSelectProps<T>, "onSelection"> {
-    /**
-     *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
-     */
-    onSelection?: (params: MultiSuggestFieldSelectionProps<T>) => void;
-}
-
-/**
- * Element behaves very similar to `SuggestField` but allows multiple selections.
- * Its value does not represent a string but a stack of objects.
- *
- * Example usage: input field for user created tags.
- */
-export function MultiSuggestField<T>({ className, ...otherProps }: MultiSuggestFieldProps<T>) {
-    // Currently this works only as an alias element for `MultiSelect`.
-    return (
-        <MultiSelect<T>
-            className={`${eccgui}-multisuggestfield` + (className ? ` ${className}` : "")}
-            {...(otherProps as MultiSelectProps<T>)}
-        />
-    );
-}
-
-// we still return the Blueprint element here because it was already used like that
-/**
- * @deprecated (v25) use directly <MultiSelect<TYPE>> (`ofType` also returns the original BlueprintJS element, not ours!)
- */
-MultiSuggestField.ofType = MultiSelect.ofType;

package/src/components/SuggestField/SuggestField.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import AutoCompleteField, { AutoCompleteFieldProps } from "../AutocompleteField/AutoCompleteField";
-
-/**
- * Parameters for the auto-complete field parameterized by T and U.
- * @param T is the input data structure/type of the items that can be selected.
- * @param UPDATE_VALUE The value type that will be pushed into the onChange callback.
- */
-export type SuggestFieldProps<T, UPDATE_VALUE> = AutoCompleteFieldProps<T, UPDATE_VALUE>;
-
-/**
- * A component with the appearance of an input field that allows to select and optionally create new items.
- * It shows suggestions for the entered text from which the user can select any option.
- * It has the following fixed behavior:
- *
- * - When not focused, a different representation of the item value can be shown, e.g. the label of the value.
- * - When changing an existing item the input text is set to the original value in order to be able to edit the original value.
- * - When for a specific input text, the only item returns is the currently set item itself, all items are shown below it, to make
- *   clear that there are still other items to choose from.
- * - The suggestions are fetched with a short delay, so not too many unnecessary requests are fired.
- * - Items where itemRenderer returns a string have a default representation, i.e. highlighting of search words, active flag etc.
- */
-export function SuggestField<T, UPDATE_VALUE>({ className, ...otherProps }: SuggestFieldProps<T, UPDATE_VALUE>) {
-    // Currently this works only as an alias element for `AutoCompleteField`.
-    return (
-        <AutoCompleteField<T, UPDATE_VALUE>
-            className={`${eccgui}-suggestfield` + (className ? ` ${className}` : "")}
-            {...otherProps}
-        />
-    );
-}

package/src/extensions/react-flow/edges/edgeTypes.ts

@@ -1,29 +0,0 @@
-/*
-    We need to replicate some elements from react flow because they
-
-    1. do not export all sub elements, e.g. edges
-    2. we need to add additional features for better usage
-*/
-
-import { EdgeDefault } from "./EdgeDefault";
-import { EdgeStep } from "./EdgeStep";
-
-/** @deprecated (v25) will be removed without replacement, define it yourself or use `<ReactFlow/` with `configuration` option. */
-export const edgeTypes = {
-    default: EdgeDefault,
-    straight: EdgeDefault,
-    step: EdgeStep,
-
-    success: EdgeDefault,
-    warning: EdgeDefault,
-    danger: EdgeDefault,
-
-    implicit: EdgeDefault,
-    import: EdgeDefault,
-    subclass: EdgeDefault,
-    subproperty: EdgeDefault,
-    rdftype: EdgeDefault,
-
-    value: EdgeStep,
-    score: EdgeStep,
-};

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

@@ -1,15 +0,0 @@
-import { NodeDefault } from "./NodeDefault";
-
-/** @deprecated (v25) will be removed without replacement, define it yourself or use `<ReactFlow/` with `configuration` option. */
-export const nodeTypes = {
-    default: NodeDefault,
-    graphNode: NodeDefault,
-    classNode: NodeDefault,
-    instanceNode: NodeDefault,
-    propertyNode: NodeDefault,
-    datasetNode: NodeDefault,
-    linkingNode: NodeDefault,
-    transformNode: NodeDefault,
-    taskNode: NodeDefault,
-    workflowNode: NodeDefault,
-};

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

@@ -1,12 +0,0 @@
-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}>
-            {children}
-        </ButtonReplacement>
-    );
-}

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

@@ -1,80 +0,0 @@
-import React from "react";
-
-import Button from "../../components/Button/Button";
-
-export const iconMappings: { [key: string]: any } = {
-    edit: "item-edit",
-    delete: "item-remove",
-    expand_more: "toggler-showmore",
-    expand_less: "toggler-showless",
-    arrow_nextpage: "navigation-forth",
-    arrow_back: "navigation-back",
-};
-
-/** @deprecated (v25) all legacy component support will be removed, switch to `<Button />` */
-export function ButtonReplacement({
-    children,
-    className,
-    fabSize,
-    iconName,
-    tooltip,
-    progress,
-    disabled = false,
-    affirmative = false,
-    dismissive = true,
-    disruptive = false,
-    raised = false,
-    colored = false,
-    ...otherProps
-}: any) {
-    if (process.env.NODE_ENV === "development") {
-        const debugMsg = [
-            "This button element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard element (Button).",
-        ];
-        if (typeof otherProps.accent !== "undefined") {
-            debugMsg.push("Button 'accent' property is not supported on legacy replacement element.");
-            delete otherProps.accent;
-        }
-        if (typeof otherProps.badge !== "undefined") {
-            debugMsg.push("Button 'badge' property is not supported on legacy replacement element.");
-            delete otherProps.badge;
-        }
-        if (typeof otherProps.ripple !== "undefined") {
-            debugMsg.push("Button 'ripple' property is not supported on legacy replacement element.");
-            delete otherProps.ripple;
-        }
-        if (typeof progress !== "undefined") {
-            debugMsg.push(
-                "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") {
-        delete otherProps.accent;
-    }
-    if (typeof otherProps.badge !== "undefined") {
-        delete otherProps.badge;
-    }
-    if (typeof otherProps.ripple !== "undefined") {
-        delete otherProps.ripple;
-    }
-    return (
-        <Button
-            {...otherProps}
-            className={className}
-            minimal={!!iconName && raised === false ? true : false}
-            icon={iconName ? (iconName && iconMappings[iconName] ? iconMappings[iconName] : iconName) : undefined}
-            tooltip={tooltip ? tooltip : false}
-            disabled={disabled}
-            affirmative={affirmative}
-            disruptive={disruptive}
-            hasStatePrimary={!!fabSize || colored || !dismissive}
-            large={!!fabSize && fabSize !== "mini"}
-            loading={progress ? true : false}
-        >
-            {children}
-        </Button>
-    );
-}

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

@@ -1,12 +0,0 @@
-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}>
-            {children}
-        </ButtonReplacement>
-    );
-}

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

@@ -1,12 +0,0 @@
-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}>
-            {children}
-        </ButtonReplacement>
-    );
-}

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

@@ -1,59 +0,0 @@
-import React from "react";
-
-import Checkbox from "../../components/Checkbox/Checkbox";
-
-const extendedOnChangeBoolean = (onChangeFn: any, event: any) => {
-    if (typeof onChangeFn === "function") {
-        onChangeFn({
-            event,
-            name: event.target.name,
-            value: event.target.checked,
-            rawValue: event.target.value,
-        });
-    }
-};
-
-/** @deprecated (v25) all legacy component support will be removed, switch to `<Checkbox />` */
-export function CheckboxReplacement({
-    children = null,
-    checked = false,
-    className = null,
-    disabled = false,
-    label = null,
-    onChange,
-    ...otherProps
-}: any) {
-    if (process.env.NODE_ENV === "development") {
-        const debugMsg = [
-            "This checkbox element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard element (Checkbox).",
-        ];
-        if (typeof otherProps.ripple !== "undefined") {
-            debugMsg.push("Checkbox 'ripple' property is not supported on legacy replacement element.");
-            delete otherProps.ripple;
-        }
-        if (typeof otherProps.hideLabel !== "undefined") {
-            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") {
-        delete otherProps.ripple;
-    }
-    if (typeof otherProps.hideLabel !== "undefined") {
-        delete otherProps.hideLabel;
-    }
-    return (
-        <Checkbox
-            {...otherProps}
-            className={className}
-            disabled={disabled}
-            checked={checked}
-            onChange={extendedOnChangeBoolean.bind(null, onChange)}
-        >
-            {label}
-            {children}
-        </Checkbox>
-    );
-}

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

@@ -1,37 +0,0 @@
-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 = [
-            "This radio element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard element (RadioButton).",
-        ];
-        if (typeof otherProps.ripple !== "undefined") {
-            debugMsg.push("Radio 'ripple' property is not supported on legacy replacement element.");
-            delete otherProps.ripple;
-        }
-        if (typeof otherProps.hideLabel !== "undefined") {
-            debugMsg.push("Radio 'hideLabel' property is not supported on legacy replacement element.");
-            delete otherProps.hideLabel;
-        }
-        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") {
-        delete otherProps.ripple;
-    }
-    if (typeof otherProps.hideLabel !== "undefined") {
-        delete otherProps.hideLabel;
-    }
-    return (
-        <RadioButton {...otherProps}>
-            {label}
-            {children}
-        </RadioButton>
-    );
-}

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

@@ -1,36 +0,0 @@
-import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
-
-import { Tabs } from "./../../legacy-replacements";
-
-export default {
-    title: "Legacy/Tabs",
-    component: Tabs,
-    argTypes: {
-    },
-} as Meta<typeof Tabs>;
-
-const TemplateDeprecated: StoryFn<typeof Tabs> = (args) => <Tabs {...args} />;
-
-export const DeprecatedUsage = TemplateDeprecated.bind({});
-DeprecatedUsage.args = {
-    prefixTabNames: "deprecatedtabs",
-    activeTab: "deprecatedtab1",
-    tabs: [
-        {
-            tabId: "deprecatedtab1",
-            tabTitle: "Tab title 1",
-            tabContent: "Tab content 1",
-        },
-        {
-            tabId: "deprecatedtab2",
-            tabTitle: "Tab title 2",
-            tabContent: "Tab content 2",
-        },
-        {
-            tabId: "deprecatedtab3",
-            tabTitle: "Tab title 3",
-            tabContent: "Tab content 3",
-        },
-    ],
-};

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

@@ -1,69 +0,0 @@
-import React from "react";
-import { Tab, Tabs as BlueprintTabs, TabsProps as BlueprintTabsProps } from "@blueprintjs/core";
-
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-
-// legacy interface
-interface LegacyTabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "large" | "id" | "animate"> {
-    activeTab: string;
-    tabs: DeprecatedTabProps[];
-    onTabClick?: ({ props }: any) => void;
-    prefixTabNames: string;
-    allowScrollbars?: boolean;
-    /**
-     * If controlled usage is enable then a `onTabClick` handler is ncessary to control tab panel content and `activeTab` updates.
-     */
-    controlled?: boolean;
-}
-
-/** @deprecated (v25) all legacy component support will be removed */
-export interface DeprecatedTabProps {
-    tabId: string;
-    tabTitle: React.ReactNode;
-    tabContent?: JSX.Element;
-    dontShrink?: boolean;
-    className?: string;
-}
-
-const createDeprecatedTab = ({
-    tabId,
-    tabTitle,
-    tabContent,
-    dontShrink = false,
-    ...otherTabProps
-}: DeprecatedTabProps) => {
-    const extraStyles = dontShrink ? { style: { flexShrink: 0 } } : {};
-    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 = [],
-    onTabClick,
-    controlled = false,
-    prefixTabNames,
-    className = "",
-    allowScrollbars,
-    ...restProps
-}: LegacyTabsProps) {
-    const usagetype = controlled ? { selectedTabId: activeTab } : { defaultSelectedTabId: activeTab };
-    return (
-        <BlueprintTabs
-            id={prefixTabNames}
-            onChange={onTabClick}
-            className={className + (allowScrollbars ? ` ${eccgui}-tabs--scrollablelist` : "")}
-            {...usagetype}
-            renderActiveTabPanelOnly={true}
-            {...restProps}
-            animate={false}
-        >
-            {tabs.map((tab) => {
-                return createDeprecatedTab({
-                    className: `${prefixTabNames}-header-${tab.tabId}`,
-                    ...tab,
-                });
-            })}
-        </BlueprintTabs>
-    );
-}

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

@@ -1,89 +0,0 @@
-import React from "react";
-
-import { FieldItem, IconButton, TextArea, TextField } from "./../../index";
-
-const extendedOnChange = (onChangeFn: any, event: any) => {
-    if (typeof onChangeFn === "function") {
-        onChangeFn({
-            event,
-            name: event.target.name,
-            value: event.target.value,
-            rawValue: event.target.value,
-        });
-    }
-};
-
-/** @deprecated (v25) all legacy component support will be removed, switch to `<TextField />`, `<TextArea />`, `<FieldItem />` */
-export function TextFieldReplacement({
-    className,
-    disabled = false,
-    error,
-    inputClassName,
-    label,
-    multiline = false,
-    onChange,
-    onClearValue,
-    // reducedSize = false,
-    required = false,
-    stretch = true,
-    value,
-    ...otherProps
-}: any) {
-    if (process.env.NODE_ENV === "development") {
-        const debugMsg = [
-            "This textfield element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard elements (FieldItem, TextField, TextArea).",
-        ];
-        if (typeof otherProps.reducedSize !== "undefined") {
-            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") {
-        delete otherProps.reducedSize;
-    }
-
-    const InputElement = multiline ? TextArea : TextField;
-
-    const fieldProperties = {
-        className: className,
-        messageText: error,
-        labelProps: label ? { text: label } : {},
-    };
-
-    const inputProperties: { [key: string]: any } = {
-        className: inputClassName,
-        fullWidth: stretch,
-        value: value,
-        required: required,
-        onChange: extendedOnChange.bind(null, onChange),
-    };
-
-    if (multiline) {
-        delete inputProperties.fullWidth;
-    }
-
-    if (multiline === false && !!onClearValue && !!value) {
-        inputProperties["rightElement"] = (
-            <IconButton
-                data-test-id={otherProps["data-test-id"] && `${otherProps["data-test-id"]}-clear-btn`}
-                name="operation-clear"
-                onClick={onClearValue}
-            />
-        );
-    }
-
-    const sharedProperties = {
-        hasStateDanger: error ? true : false,
-        disabled: disabled,
-    };
-
-    return !!error || !!label ? (
-        <FieldItem {...sharedProperties} {...fieldProperties}>
-            <InputElement {...otherProps} {...sharedProperties} {...inputProperties} />
-        </FieldItem>
-    ) : (
-        <InputElement {...otherProps} {...inputProperties} />
-    );
-}

package/src/legacy-replacements/index.ts

@@ -1,11 +0,0 @@
-export { ButtonReplacement as Button } from "./Button/Button";
-export { AffirmativeButtonReplacement as AffirmativeButton } from "./Button/AffirmativeButton";
-export { DismissiveButtonReplacement as DismissiveButton } from "./Button/DismissiveButton";
-export { DisruptiveButtonReplacement as DisruptiveButton } from "./Button/DisruptiveButton";
-export { ButtonReplacement as ProgressButton } from "./Button/Button";
-export { CheckboxReplacement as Checkbox } from "./Checkbox/Checkbox";
-export { RadioButtonReplacement as Radio } from "./Radio/RadioButton";
-export { TabsReplacement as Tabs } from "./Tabs/Tabs";
-export { TextFieldReplacement as TextField } from "./TextField/TextField";
-
-export type { DeprecatedTabProps } from "./Tabs/Tabs";