key is enabled as normal input, i.e. it won't have the behavior of changing to the next input element, expected in a web app.
enableTab?: boolean;
- /** Placeholder tobe shown when no text has been entered, yet. */
+ /** Placeholder to be shown when no text has been entered, yet. */
placeholder?: string;
//show scrollbar
showScrollBar?: boolean;
@@ -44,87 +44,51 @@ export interface ExtendedCodeEditorProps {
export type IEditorProps = ExtendedCodeEditorProps;
-/** A single-line code editor. */
+/** Supports single-line and multiline editing. */
export const ExtendedCodeEditor = ({
- setEditorInstance,
- onChange,
- onCursorChange,
- mode,
+ multiline = false,
initialValue = "",
- onFocusChange,
onKeyDown,
- onSelection,
enableTab = false,
- placeholder,
- showScrollBar = true,
- multiline = false,
+ mode,
+ setCM,
+ onFocusChange,
onMouseDown,
+ onChange,
+ placeholder,
+ onCursorChange,
+ onSelection,
}: ExtendedCodeEditorProps) => {
const initialContent = React.useRef(multiline ? initialValue : initialValue.replace(/[\r\n]/g, " "));
-
- const extendedEditorProps = {
- editorDidMount: (editor: any) => {
- editor.on("beforeChange", (_: any, change: any) => {
- // Prevent the user from entering new-line characters, since this is supposed to be a one-line editor.
- if (change.update && typeof change.update === "function" && change.text.length > 1) {
- change.update(change.from, change.to, [change.text.join("")]);
- }
- return true;
- });
- setEditorInstance(editor);
- },
- onBeforeChange: (_editor: CodeMirrorEditor, data: EditorChange, _: string, next: () => any) => {
- // Reduce multiple lines to a single line
- if (data.text.length > 1) {
- _editor.setValue(data.text.join(""));
- }
- next();
- },
- };
-
- const extraEditorProps = multiline
- ? {
- editorDidMount: (editor: any) => {
- setEditorInstance(editor);
- },
- }
- : extendedEditorProps;
+ const multilineExtensions = multiline
+ ? [lineNumbers(), EditorView.lineWrapping]
+ : [
+ EditorState?.transactionFilter.of((tr) => (tr.newDoc.lines > 1 ? [] : tr)), //prevent multiline,
+ ];
return (
-
- onFocusChange(true)}
- onBlur={() => onFocusChange(false)}
- options={{
- mode: mode,
- lineNumbers: multiline,
- lineWrapping: multiline,
- theme: "xq-light",
- extraKeys: enableTab ? undefined : { Tab: false },
- placeholder,
- scrollbarStyle: showScrollBar ? "native" : "null",
- }}
- onSelection={(_editor, data) => {
- if (Array.isArray(data?.ranges)) {
- onSelection(
- data.ranges
- .map((r: any) => ({ from: r.from().ch, to: r.to().ch }))
- .filter((r: any) => r.from !== r.to)
- );
- }
- }}
- onCursor={(editor, data) => {
- onCursorChange(data, editor.cursorCoords(true, "local"), editor.getScrollInfo());
- }}
- onChange={(_editor, _data, value) => {
- onChange(value);
- }}
- onMouseDown={(editor) => onMouseDown && onMouseDown(editor)}
- onKeyDown={(_, event) => onKeyDown(event)}
- {...extraEditorProps}
- />
-
+
);
};
diff --git a/src/components/AutoSuggestion/extensions/markText.ts b/src/components/AutoSuggestion/extensions/markText.ts
new file mode 100644
index 00000000..9c536cf0
--- /dev/null
+++ b/src/components/AutoSuggestion/extensions/markText.ts
@@ -0,0 +1,62 @@
+import { StateEffect, StateField } from "@codemirror/state";
+import { Decoration, EditorView } from "@codemirror/view";
+
+const addMarks = StateEffect?.define(),
+ filterMarks = StateEffect?.define();
+
+// This value must be added to the set of extensions to enable this
+export const markField = StateField?.define({
+ // Start with an empty set of decorations
+ create() {
+ return Decoration.none;
+ },
+ // This is called whenever the editor updates—it computes the new set
+ update(value: any, tr) {
+ // Move the decorations to account for document changes
+ value = value.map(tr.changes);
+ // If this transaction adds or removes decorations, apply those changes
+ for (const effect of tr.effects) {
+ if (effect.is(addMarks)) value = value.update({ add: effect.value, sort: true });
+ else if (effect.is(filterMarks)) value = value.update({ filter: effect.value });
+ }
+ return value;
+ },
+ // Indicate that this field provides a set of decorations
+ provide: (f) => EditorView.decorations.from(f),
+});
+
+type marksConfig = {
+ view: EditorView;
+ from: number;
+ to: number;
+ className?: string;
+ title?: string;
+};
+
+export const markText = (config: marksConfig) => {
+ const docLength = config.view.state.doc.length;
+ const strikeMark = Decoration.mark({
+ class: config.className,
+ attributes: {
+ title: config.title ?? "",
+ },
+ });
+ const stopRange = Math.min(config.to, docLength);
+ if (!docLength || config.from === stopRange) return { from: 0, to: 0 };
+ config.view.dispatch({
+ effects: addMarks.of([strikeMark.range(config.from, stopRange)] as any),
+ });
+ return { from: config.from, to: stopRange };
+};
+
+export const removeMarkFromText = (config: marksConfig) => {
+ const dispatch = (
+ typeof config.view.dispatch === "function" ? config.view?.dispatch : () => {}
+ ) as EditorView["dispatch"];
+
+ dispatch({
+ effects: filterMarks?.of(
+ ((from: number, to: number) => to <= config.from || from >= config.to) as unknown as null
+ ),
+ });
+};
diff --git a/src/components/AutoSuggestion/index.ts b/src/components/AutoSuggestion/index.ts
index 45d422a3..2261d0c0 100644
--- a/src/components/AutoSuggestion/index.ts
+++ b/src/components/AutoSuggestion/index.ts
@@ -1,7 +1,7 @@
-import { AutoSuggestion, AutoSuggestionProps } from "./AutoSuggestion";
+import { AutoSuggestionProps } from "./AutoSuggestion";
import { AutoSuggestionList, AutoSuggestionListProps } from "./AutoSuggestionList";
import { ExtendedCodeEditor, ExtendedCodeEditorProps } from "./ExtendedCodeEditor";
-export { AutoSuggestion, AutoSuggestionList, ExtendedCodeEditor };
+export { AutoSuggestionList, ExtendedCodeEditor };
export type { AutoSuggestionProps, AutoSuggestionListProps, ExtendedCodeEditorProps };
diff --git a/src/components/AutoSuggestion/tests/ExtendedCodeEditor.test.tsx b/src/components/AutoSuggestion/tests/ExtendedCodeEditor.test.tsx
index e5220b5f..14db3a71 100644
--- a/src/components/AutoSuggestion/tests/ExtendedCodeEditor.test.tsx
+++ b/src/components/AutoSuggestion/tests/ExtendedCodeEditor.test.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { render } from "@testing-library/react";
-import CodeMirror from "codemirror";
+import { EditorView } from "@codemirror/view";
import "@testing-library/jest-dom";
@@ -9,7 +9,7 @@ import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
describe("SingleLineCodeEditor", () => {
let props: ExtendedCodeEditorProps,
- codeMirrorEditorInstance: CodeMirror.Editor = null as any;
+ cm: EditorView | null = null;
beforeAll(() => {
document.createRange = () => {
@@ -28,15 +28,15 @@ describe("SingleLineCodeEditor", () => {
beforeEach(() => {
props = {
- setEditorInstance: jest.fn((editor) => {
- codeMirrorEditorInstance = editor;
+ setCM: jest.fn((editor) => {
+ cm = editor as EditorView;
}),
onChange: jest.fn((value) => {}),
onCursorChange: jest.fn((pos, coords) => {}),
mode: undefined,
initialValue: "",
onFocusChange: jest.fn((focused) => {}),
- onKeyDown: jest.fn((event) => {}),
+ onKeyDown: jest.fn((event) => true),
onSelection: jest.fn((ranges) => {}),
};
});
@@ -48,8 +48,8 @@ describe("SingleLineCodeEditor", () => {
it("should set the editorInstance immediately it's mounted", () => {
render();
- expect(props.setEditorInstance).toHaveBeenCalledTimes(1);
- expect(codeMirrorEditorInstance).not.toBeNull();
+ expect(props.setCM).toHaveBeenCalled();
+ expect(cm).not.toBeNull();
});
it("should set the default value on the editor input", () => {
@@ -58,18 +58,20 @@ describe("SingleLineCodeEditor", () => {
initialValue: "This is the initial input",
};
const { getByText } = render();
- expect(codeMirrorEditorInstance.getValue()).toBe(props.initialValue);
+ expect(cm?.state.doc.toString()).toBe(props.initialValue);
expect(getByText(props.initialValue)).toBeTruthy();
});
it("should not allow user to create new lines", () => {
render();
- codeMirrorEditorInstance.getDoc().setValue("I'm entering a new line \n character");
- expect(codeMirrorEditorInstance.lineCount()).toBe(1);
+ cm?.dispatch({
+ changes: { from: 0, to: cm.state.doc.length, insert: "I'm entering a new line \n character" },
+ });
+ expect(cm?.state.doc.lines).toBe(1);
});
it("should convert multiple lines to a single line", () => {
render();
- expect(codeMirrorEditorInstance.lineCount()).toBe(1);
+ expect(cm?.state.doc.lines).toBe(1);
});
});
diff --git a/src/components/AutocompleteField/AutoCompleteField.tsx b/src/components/AutocompleteField/AutoCompleteField.tsx
index 169fbc01..09bca492 100644
--- a/src/components/AutocompleteField/AutoCompleteField.tsx
+++ b/src/components/AutocompleteField/AutoCompleteField.tsx
@@ -1,9 +1,9 @@
import React, { useEffect, useState } from "react";
import {
HTMLInputProps as BlueprintHTMLInputProps,
- InputGroupProps2 as BlueprintInputGroupProps,
+ InputGroupProps as BlueprintInputGroupProps,
} from "@blueprintjs/core";
-import { Suggest2 as BlueprintSuggest } from "@blueprintjs/select";
+import { Suggest as BlueprintSuggest } from "@blueprintjs/select";
import { CLASSPREFIX as eccgui } from "../../configuration/constants";
import {
@@ -17,20 +17,13 @@ import {
Spinner,
} from "../../index";
-import { IElementWidth as IElementWidthOrig, IRenderModifiers as IRenderModifiersOrig } from "./interfaces";
-
-// @deprecated import from `src/components/AutocompleteField/interfaces`
-export type IElementWidth = IElementWidthOrig;
-// @deprecated import from `src/components/AutocompleteField/interfaces`
-export type IRenderModifiers = IRenderModifiersOrig;
+import { SuggestFieldItemRendererModifierProps } from "./interfaces";
type SearchFunction = (value: string) => T[];
type AsyncSearchFunction = (value: string) => Promise;
/**
- * 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.
+ * @deprecated (v25) replaced by SuggestFieldProps
*/
export interface AutoCompleteFieldProps {
/**
@@ -64,7 +57,12 @@ export interface AutoCompleteFieldProps {
* @param handleClick The function that needs to be called when the rendered item gets clicked. Else a selection
* via mouse is not possible. This only needs to be used when returning a JSX.Element.
*/
- itemRenderer(item: T, query: string, modifiers: IRenderModifiers, handleClick: () => any): string | JSX.Element;
+ itemRenderer(
+ item: T,
+ query: string,
+ modifiers: SuggestFieldItemRendererModifierProps,
+ handleClick: () => any
+ ): string | JSX.Element;
/** Renders the string that should be displayed in the input field after the item has been selected.
*/
@@ -120,7 +118,7 @@ export interface AutoCompleteFieldProps {
/** Renders how the option to newly create an item should look like in the selection list. */
itemRenderer: (
query: string,
- modifiers: IRenderModifiers,
+ modifiers: SuggestFieldItemRendererModifierProps,
handleClick: React.MouseEventHandler
) => JSX.Element | undefined;
@@ -160,6 +158,9 @@ export interface AutoCompleteFieldProps {
loadMoreResults?: () => Promise;
}
+/**
+ * @deprecated (v25) replaced by SuggestFieldProps
+ */
export type IAutoCompleteFieldProps = AutoCompleteFieldProps;
AutoCompleteField.defaultProps = {
@@ -172,12 +173,9 @@ AutoCompleteField.defaultProps = {
};
/**
- * **Element is deprecated.**
- * Use `SuggestField` as replacement.
- *
- * @deprecated
+ * @deprecated (support already removed) use `SuggestField` as replacement.
*/
-export function AutoCompleteField(props: AutoCompleteFieldProps) {
+function AutoCompleteField(props: AutoCompleteFieldProps) {
const {
className,
reset,
@@ -332,7 +330,7 @@ export function AutoCompleteField(props: AutoCompleteFieldProps
if (!modifiers.matchesPredicate) {
return null;
}
- const relevantModifiers: IRenderModifiers = {
+ const relevantModifiers: SuggestFieldItemRendererModifierProps = {
active: modifiers.active,
disabled: modifiers.disabled,
highlightingEnabled: highlightingEnabled,
diff --git a/src/components/AutocompleteField/index.ts b/src/components/AutocompleteField/index.ts
index 82fce258..34448810 100644
--- a/src/components/AutocompleteField/index.ts
+++ b/src/components/AutocompleteField/index.ts
@@ -1,5 +1,6 @@
import { createNewItemRendererFactory } from "./autoCompleteFieldUtils";
export * from "./AutoCompleteField";
+export * from "./interfaces";
export const autoCompleteFieldUtils = {
createNewItemRendererFactory,
};
diff --git a/src/components/AutocompleteField/interfaces.ts b/src/components/AutocompleteField/interfaces.ts
index ff59fc40..2c40ad3c 100644
--- a/src/components/AutocompleteField/interfaces.ts
+++ b/src/components/AutocompleteField/interfaces.ts
@@ -1,4 +1,4 @@
-export interface IRenderModifiers {
+export interface SuggestFieldItemRendererModifierProps {
active: boolean;
disabled?: boolean;
// The width styles that should be given to the rendered option items
@@ -6,7 +6,10 @@ export interface IRenderModifiers {
highlightingEnabled: boolean;
}
-/** Style object to be used in menu option items. */
+/** @deprecated (v25) use `SuggestFieldItemRendererModifierProps` */
+export type IRenderModifiers = SuggestFieldItemRendererModifierProps;
+
+/** @deprecated (v25) use `SuggestFieldItemRendererModifierProps["styleWidth"]` */
export interface IElementWidth {
minWidth: string;
maxWidth: string;
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
index 6b71ac75..91167e4b 100644
--- a/src/components/Badge/Badge.stories.tsx
+++ b/src/components/Badge/Badge.stories.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { LogoReact } from "@carbon/icons-react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import { helpersArgTypes } from "../../../.storybook/helpers";
import { Badge, Icon, TestIcon } from "../../../index";
@@ -23,9 +23,9 @@ export default {
...helpersArgTypes.exampleIntent,
},
},
-} as ComponentMeta;
+} as Meta;
-const TemplateFull: ComponentStory = (args) => (
+const TemplateFull: StoryFn = (args) => (
Element area
diff --git a/src/components/Breadcrumb/BreadcrumbList.tsx b/src/components/Breadcrumb/BreadcrumbList.tsx
index 2438cdbf..8fbb736b 100644
--- a/src/components/Breadcrumb/BreadcrumbList.tsx
+++ b/src/components/Breadcrumb/BreadcrumbList.tsx
@@ -31,11 +31,6 @@ export interface BreadcrumbListProps
Is only used if the breadcrumb item have not defined an own `onClick` handler.
*/
onItemClick?(itemUrl: string | undefined, event: object): boolean | void;
- /**
- native attributes for the unordered HTML list (ul)
- @deprecated will be removed because the BlueprintJS `Breadcrumbs` component does not support native `ul` attributes. Use `wrapperProps` as alternate way to add native attributes to a container `div` element.
- */
- htmlUlProps?: React.HTMLAttributes;
/**
* If set then a `div` element is used as wrapper.
* It uses the attributes given via this property.
@@ -64,7 +59,6 @@ export const BreadcrumbList = ({
className = "",
// itemDivider = "/",
onItemClick,
- htmlUlProps,
ignoreOverflow = false,
latenOverflow = false,
wrapperProps,
@@ -109,7 +103,6 @@ export const BreadcrumbList = ({
const breadcrumbs = (
";
background: none;
}
@@ -65,10 +67,15 @@
a {
@extend .#{$eccgui}-breadcrumb__item;
@extend .#{$ns}-breadcrumb;
+
+ color: $eccgui-color-breadcrumb-link;
+ cursor: pointer;
}
}
a.#{$eccgui}-breadcrumb__item {
+ color: $eccgui-color-breadcrumb-link;
+ cursor: pointer;
&:not(.#{$ns}-breadcrumb-current):not(.#{$ns}-disabled) {
text-decoration: underline;
diff --git a/src/components/Breadcrumb/stories/BreadcrumbItem.stories.tsx b/src/components/Breadcrumb/stories/BreadcrumbItem.stories.tsx
index 0bb6ce43..89e053b7 100644
--- a/src/components/Breadcrumb/stories/BreadcrumbItem.stories.tsx
+++ b/src/components/Breadcrumb/stories/BreadcrumbItem.stories.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import { BreadcrumbItem } from "./../../../index";
@@ -7,9 +7,9 @@ export default {
title: "Components/Breadcrumbs/Item",
component: BreadcrumbItem,
argTypes: {},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => ;
+const Template: StoryFn = (args) => ;
export const Default = Template.bind({});
Default.args = {
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index ad565b4d..189a39e3 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -14,11 +14,6 @@ import Icon from "../Icon/Icon";
import Badge, { BadgeProps } from "./../Badge/Badge";
import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
-/** @deprecated will be removed, there is no replacement */
-export type AnchorOrButtonProps =
- | Omit
- | Omit;
-
interface AdditionalButtonProps {
/**
* Always use this when the button triggers an affirmative action, e.g. confirm a process.
diff --git a/src/components/Card/CardHeader.tsx b/src/components/Card/CardHeader.tsx
index 48181314..54baf975 100644
--- a/src/components/Card/CardHeader.tsx
+++ b/src/components/Card/CardHeader.tsx
@@ -9,17 +9,9 @@ import CardTitle from "./CardTitle";
export interface CardHeaderProps extends Omit {
children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
- /**
- * @deprecated use `whitespaceAmount` option of ``
- */
- densityHigh?: OverviewItemProps["densityHigh"];
- /**
- * @deprecated use `whitespaceAmount` option of ``
- */
- hasSpacing?: OverviewItemProps["hasSpacing"];
}
-export const CardHeader = ({ children, className = "", densityHigh = true, ...otherProps }: CardHeaderProps) => {
+export const CardHeader = ({ children, className = "", ...otherProps }: CardHeaderProps) => {
const actions: any[] = [];
const description: any[] = [];
@@ -39,7 +31,7 @@ export const CardHeader = ({ children, className = "", densityHigh = true, ...ot
return (
-
+
{description.length > 0 && {description}}
{actions}
diff --git a/src/components/Card/stories/Card.stories.tsx b/src/components/Card/stories/Card.stories.tsx
index 4ea61e99..735088c5 100644
--- a/src/components/Card/stories/Card.stories.tsx
+++ b/src/components/Card/stories/Card.stories.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import { helpersArgTypes } from "../../../../.storybook/helpers";
import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle, Divider } from "../../../../index";
@@ -30,9 +30,9 @@ export default {
description: "Elements to include into the card container.",
},
},
-} as ComponentMeta;
+} as Meta;
-const TemplateFull: ComponentStory = (args) => (
+const TemplateFull: StoryFn = (args) => (
@@ -43,7 +43,7 @@ const TemplateFull: ComponentStory = (args) => (
);
export const FullExample = TemplateFull.bind({});
-const TemplateSimple: ComponentStory = (args) => ;
+const TemplateSimple: StoryFn = (args) => ;
export const SimpleCard = TemplateSimple.bind({});
SimpleCard.args = {
children: [
diff --git a/src/components/Card/stories/CardActions.stories.tsx b/src/components/Card/stories/CardActions.stories.tsx
index 32e18f00..c1bb5973 100644
--- a/src/components/Card/stories/CardActions.stories.tsx
+++ b/src/components/Card/stories/CardActions.stories.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import Button from "../../Button/Button";
import { CardActions, CardActionsAux } from "../index";
@@ -19,9 +19,9 @@ export default {
description: "Elements to include into the actions container.",
},
},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => ;
+const Template: StoryFn = (args) => ;
export const Default = Template.bind({});
Default.args = {
diff --git a/src/components/Card/stories/CardContent.stories.tsx b/src/components/Card/stories/CardContent.stories.tsx
index 896bd0fc..492d3fea 100644
--- a/src/components/Card/stories/CardContent.stories.tsx
+++ b/src/components/Card/stories/CardContent.stories.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { LoremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import HtmlContentBlock from "../../../components/Typography/HtmlContentBlock";
import { CardContent } from "../index";
@@ -14,9 +14,9 @@ export default {
description: "Elements for card content.",
},
},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => ;
+const Template: StoryFn = (args) => ;
export const Default = Template.bind({});
Default.args = {
diff --git a/src/components/Card/stories/CardHeader.stories.tsx b/src/components/Card/stories/CardHeader.stories.tsx
index abfb96b0..61703ea3 100644
--- a/src/components/Card/stories/CardHeader.stories.tsx
+++ b/src/components/Card/stories/CardHeader.stories.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import { CardHeader, CardOptions, CardTitle } from "../index";
@@ -19,9 +19,9 @@ export default {
description: "Elements to include into the header.",
},
},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => ;
+const Template: StoryFn = (args) => ;
export const Default = Template.bind({});
Default.args = {
diff --git a/src/components/Card/stories/CardOptions.stories.tsx b/src/components/Card/stories/CardOptions.stories.tsx
index 9d3c2864..c866e5ff 100644
--- a/src/components/Card/stories/CardOptions.stories.tsx
+++ b/src/components/Card/stories/CardOptions.stories.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import IconButton from "../../Icon/IconButton";
import { CardOptions } from "../index";
@@ -13,9 +13,9 @@ export default {
description: "Elements for user-interaction.",
},
},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => ;
+const Template: StoryFn = (args) => ;
export const Default = Template.bind({});
Default.args = {
diff --git a/src/components/Card/stories/CardTitle.stories.tsx b/src/components/Card/stories/CardTitle.stories.tsx
index 421323f7..3643587c 100644
--- a/src/components/Card/stories/CardTitle.stories.tsx
+++ b/src/components/Card/stories/CardTitle.stories.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import { CardTitle } from "../index";
@@ -12,9 +12,9 @@ export default {
description: "Elements for card title.",
},
},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => ;
+const Template: StoryFn = (args) => ;
export const Default = Template.bind({});
Default.args = {
diff --git a/src/components/Checkbox/Stories/Checkbox.stories.tsx b/src/components/Checkbox/Stories/Checkbox.stories.tsx
index 77ea4161..5027bea5 100644
--- a/src/components/Checkbox/Stories/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Stories/Checkbox.stories.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { LoremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import { Checkbox, HtmlContentBlock } from "../../../../index";
@@ -10,9 +10,9 @@ export default {
argTypes: {
onChange: { action: "clicked" },
},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => ;
+const Template: StoryFn = (args) => ;
export const SimpleTextLabel = Template.bind({});
SimpleTextLabel.args = {
diff --git a/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx b/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx
index 9233688f..bc4ff613 100644
--- a/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx
+++ b/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx
@@ -1,17 +1,24 @@
import React from "react";
+import { OverlaysProvider } from "@blueprintjs/core";
import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
import { CodeAutocompleteField, CodeAutocompleteFieldProps } from "../../../index";
-import { IPartialAutoCompleteResult } from "../AutoSuggestion/AutoSuggestion";
+import { CodeAutocompleteFieldPartialAutoCompleteResult } from "../AutoSuggestion/AutoSuggestion";
export default {
title: "Forms/CodeAutocompleteField",
component: CodeAutocompleteField,
argTypes: {},
+ args: {
+ onInputChecked: fn(),
+ },
} as Meta;
const Template: StoryFn = (args) => (
-
+
+
+
);
const resultList = ["find me", "item", "auto-completion result"];
@@ -21,7 +28,10 @@ const defaultProps: CodeAutocompleteFieldProps = {
fetchSuggestions(
inputString: string,
cursorPosition: number
- ): IPartialAutoCompleteResult | undefined | Promise {
+ ):
+ | CodeAutocompleteFieldPartialAutoCompleteResult
+ | undefined
+ | Promise {
const stringBeforeCursor = inputString.substring(0, cursorPosition);
const lastSpaceIdx = stringBeforeCursor.lastIndexOf(" ");
const searchWordStart = lastSpaceIdx >= 0 ? lastSpaceIdx + 1 : 0;
diff --git a/src/components/CodeAutocompleteField/CodeAutocompleteField.tsx b/src/components/CodeAutocompleteField/CodeAutocompleteField.tsx
index 7854b298..0215bc7d 100644
--- a/src/components/CodeAutocompleteField/CodeAutocompleteField.tsx
+++ b/src/components/CodeAutocompleteField/CodeAutocompleteField.tsx
@@ -1,9 +1,9 @@
import React from "react";
import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { AutoSuggestion, AutoSuggestionProps } from "../AutoSuggestion/AutoSuggestion";
+import AutoSuggestion, { AutoSuggestionProps } from "../AutoSuggestion/AutoSuggestion";
-export type CodeAutocompleteFieldProps = AutoSuggestionProps;
+export interface CodeAutocompleteFieldProps extends AutoSuggestionProps {}
/**
* Input component that allows partial, fine-grained auto-completion, i.e. of sub-strings of the input string.
@@ -12,7 +12,7 @@ export type CodeAutocompleteFieldProps = AutoSuggestionProps;
* 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 `MultiSelect`.
+ // Currently this works only as an alias element for `AutoSuggestion`.
return (
= (args) => (
);
+const TemplateInsideOverviewItem: StoryFn = (args) => (
+
+
+
+
+
+);
+
export const FullExample = TemplateFull.bind({});
FullExample.args = {
image: 
,
caption: "This is a test description for the image.",
};
+
+export const InsideOverviewItem = TemplateInsideOverviewItem.bind({});
+InsideOverviewItem.args = {
+ ...FullExample.args,
+ backgroundColor: "dark",
+ ratio: "1:1",
+ padding: "medium",
+ resizing: "contain",
+};
diff --git a/src/components/Dialog/AlertDialog.tsx b/src/components/Dialog/AlertDialog.tsx
index 10cb2c3f..271286b2 100644
--- a/src/components/Dialog/AlertDialog.tsx
+++ b/src/components/Dialog/AlertDialog.tsx
@@ -19,9 +19,6 @@ export interface AlertDialogProps extends Omit {
danger?: boolean;
}
-// @deprecated
-export type IAlertDialogProps = AlertDialogProps;
-
/**
* Special element to display alert notification in modal dialogs.
* Inherits all properties from `SimpleDialog`, except `intent`.
diff --git a/src/components/Dialog/Modal.tsx b/src/components/Dialog/Modal.tsx
index a9dca92c..9b058704 100644
--- a/src/components/Dialog/Modal.tsx
+++ b/src/components/Dialog/Modal.tsx
@@ -5,7 +5,7 @@ import {
Overlay2Props as BlueprintOverlayProps,
} from "@blueprintjs/core";
-import { Utilities } from "../../common";
+import { utils } from "../../common";
import { CLASSPREFIX as eccgui } from "../../configuration/constants";
import { TestableComponent } from "../interfaces";
@@ -100,12 +100,12 @@ export const Modal = ({
}
if (usePortal && forceTopPosition) {
const parentalPortal = modalElement.closest(`.${BlueprintClassNames.PORTAL}`) as HTMLElement;
- const highestTopIndex = (Utilities.getGlobalVar("highestModalTopIndex") as unknown as number) ?? 0;
+ const highestTopIndex = (utils.getGlobalVar("highestModalTopIndex") as unknown as number) ?? 0;
if (parentalPortal) {
const portalTopIndex = parseInt(getComputedStyle(parentalPortal).zIndex ?? 0, 10);
const newTopIndex = Math.max(portalTopIndex, highestTopIndex) + 1;
parentalPortal.style.zIndex = `${newTopIndex}`;
- Utilities.setGlobalVar("highestModalTopIndex", newTopIndex);
+ utils.setGlobalVar("highestModalTopIndex", newTopIndex);
}
}
};
diff --git a/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx b/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx
new file mode 100644
index 00000000..ff830566
--- /dev/null
+++ b/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx
@@ -0,0 +1,67 @@
+import React, { forwardRef } from "react"; // @see https://github.com/storybookjs/storybook/issues/8881#issuecomment-831937051
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { DividerProps } from "./../Separation/Divider";
+
+export interface FlexibleLayoutContainerProps extends React.HTMLAttributes {
+ /**
+ * Use the exact space defined by the parent element.
+ * This parent element must be displayed using a fixed, relative or absolute position.
+ */
+ useAbsoluteSpace?: boolean;
+ /**
+ * If set then the container behaves similar to a column and displays its items on a vertical axis.
+ * Children could used as rows in this situation.
+ */
+ vertical?: boolean;
+ /**
+ * If true the used amount of space for each item is related to the amout of its content compared to each other.
+ * Otherwise the items use equal amounts as long this is possible.
+ */
+ noEqualItemSpace?: boolean;
+ /**
+ * Quick way to add whitespace between container children.
+ * For more complex usecases like dividers you need to use extra `` components in combination with `` components.
+ */
+ gapSize?: DividerProps["addSpacing"];
+}
+
+/**
+ * Simple layout helper to organize items into rows and columns that are not necessarily need to be aligned.
+ * A `FlexibleLayoutContainer` can contain `FlexibleLayoutItem`s.
+ * Do not misuse it as grid because it comes without any predefined ratios for widths and heights.
+ */
+export const FlexibleLayoutContainer = forwardRef(
+ (
+ {
+ children,
+ className = "",
+ useAbsoluteSpace,
+ vertical,
+ noEqualItemSpace,
+ gapSize = "none",
+ ...otherDivProps
+ }: FlexibleLayoutContainerProps,
+ ref
+ ) => {
+ return (
+
+ {children}
+
+ );
+ }
+);
+
+export default FlexibleLayoutContainer;
diff --git a/src/components/FlexibleLayout/FlexibleLayoutItem.tsx b/src/components/FlexibleLayout/FlexibleLayoutItem.tsx
new file mode 100644
index 00000000..814d32cf
--- /dev/null
+++ b/src/components/FlexibleLayout/FlexibleLayoutItem.tsx
@@ -0,0 +1,59 @@
+import React, { forwardRef } from "react";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface FlexibleLayoutItemProps extends React.HTMLAttributes {
+ /**
+ * Defines the ability for the item to grow.
+ * The factor defines how much space the item would take up compared to the other items with a grow factor greater than zero.
+ * Must be equal or greater than zero.
+ * With a factor of `0` the item cannot grow.
+ */
+ growFactor?: number;
+ /**
+ * Defines the ability for the item to shrink.
+ * The factor defines how strong the shrink effect has impact on the item compared to the other items with a shrink factor greater than zero.
+ * Must be equal or greater than zero.
+ * With a factor of `0` the item cannot shrink.
+ */
+ shrinkFactor?: number;
+}
+
+/**
+ * Simple layout helper to organize items into rows and columns that are not necessarily need to be aligned.
+ * `FlexibleLayoutItem`s can contain `FlexibleLayoutContainer` for more partitions.
+ * `FlexibleLayoutItem` siblings will share all available space from the `FlexibleLayoutContainer` container.
+ */
+export const FlexibleLayoutItem = forwardRef(
+ (
+ {
+ children,
+ className = "",
+ growFactor = 1,
+ shrinkFactor = 1,
+ style,
+ ...otherDivProps
+ }: FlexibleLayoutItemProps,
+ ref
+ ) => {
+ const sizing = {} as any;
+ if (typeof growFactor !== "undefined" && growFactor >= 0 && growFactor !== 1) {
+ sizing[`--${eccgui}-flexible-item-grow`] = growFactor.toString(10);
+ }
+ if (typeof shrinkFactor !== "undefined" && shrinkFactor >= 0 && shrinkFactor !== 1) {
+ sizing[`--${eccgui}-flexible-item-shrink`] = shrinkFactor.toString(10);
+ }
+ return (
+
+ {children}
+
+ );
+ }
+);
+
+export default FlexibleLayoutItem;
diff --git a/src/components/FlexibleLayout/flexiblelayout.scss b/src/components/FlexibleLayout/flexiblelayout.scss
new file mode 100644
index 00000000..2efeba7a
--- /dev/null
+++ b/src/components/FlexibleLayout/flexiblelayout.scss
@@ -0,0 +1,48 @@
+.#{$eccgui}-flexible__container {
+ --#{$eccgui}-flexible-item-shrink: 1;
+ --#{$eccgui}-flexible-item-grow: 1;
+ --#{$eccgui}-flexible-container-gapsize: 0;
+
+ position: relative;
+ display: flex;
+ flex-flow: row nowrap;
+ gap: var(--#{$eccgui}-flexible-container-gapsize);
+ place-content: stretch center;
+ align-items: stretch;
+ width: 100%;
+}
+
+.#{$eccgui}-flexible__container--absolutespace {
+ position: absolute;
+ inset: 0;
+}
+
+.#{$eccgui}-flexible__container--vertical {
+ flex-direction: column;
+}
+
+.#{$eccgui}-flexible__container--gap-tiny {
+ --#{$eccgui}-flexible-container-gapsize: #{$eccgui-size-block-whitespace * 0.25};
+}
+.#{$eccgui}-flexible__container--gap-small {
+ --#{$eccgui}-flexible-container-gapsize: #{$eccgui-size-block-whitespace * 0.5};
+}
+.#{$eccgui}-flexible__container--gap-medium {
+ --#{$eccgui}-flexible-container-gapsize: #{$eccgui-size-block-whitespace};
+}
+.#{$eccgui}-flexible__container--gap-large {
+ --#{$eccgui}-flexible-container-gapsize: #{$eccgui-size-block-whitespace * 1.5};
+}
+.#{$eccgui}-flexible__container--gap-xlarge {
+ --#{$eccgui}-flexible-container-gapsize: #{$eccgui-size-block-whitespace * 2};
+}
+
+.#{$eccgui}-flexible__item {
+ position: relative;
+ flex: var(--#{$eccgui}-flexible-item-grow) var(--#{$eccgui}-flexible-item-shrink) 100%;
+ min-width: 0;
+
+ .#{$eccgui}-flexible__container--notequalitemspace > & {
+ flex-basis: auto;
+ }
+}
diff --git a/src/components/FlexibleLayout/index.ts b/src/components/FlexibleLayout/index.ts
new file mode 100644
index 00000000..7f587e05
--- /dev/null
+++ b/src/components/FlexibleLayout/index.ts
@@ -0,0 +1,2 @@
+export * from "./FlexibleLayoutContainer";
+export * from "./FlexibleLayoutItem";
diff --git a/src/components/FlexibleLayout/stories/FlexibleLayoutContainer.stories.tsx b/src/components/FlexibleLayout/stories/FlexibleLayoutContainer.stories.tsx
new file mode 100644
index 00000000..cd381fc1
--- /dev/null
+++ b/src/components/FlexibleLayout/stories/FlexibleLayoutContainer.stories.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Divider, FlexibleLayoutContainer, FlexibleLayoutItem, HtmlContentBlock } from "../../../../index";
+
+export default {
+ title: "Components/FlexibleLayout/Container",
+ component: FlexibleLayoutContainer,
+} as Meta;
+
+const Template: StoryFn = (args) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Grid/stories/GridColumn.stories.tsx b/src/components/Grid/stories/GridColumn.stories.tsx
index d20bcaf2..3d9cde38 100644
--- a/src/components/Grid/stories/GridColumn.stories.tsx
+++ b/src/components/Grid/stories/GridColumn.stories.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { LoremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import { Grid, GridColumn, GridRow, HtmlContentBlock } from "../../../../index";
@@ -12,9 +12,9 @@ export default {
control: "none",
},
},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
@@ -41,7 +41,7 @@ const otherColumn = (
);
-const TemplateWidths: ComponentStory = (args) => (
+const TemplateWidths: StoryFn = (args) => (
diff --git a/src/components/Grid/stories/GridRow.stories.tsx b/src/components/Grid/stories/GridRow.stories.tsx
index 2b176dd1..e126170a 100644
--- a/src/components/Grid/stories/GridRow.stories.tsx
+++ b/src/components/Grid/stories/GridRow.stories.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import { Grid, GridColumn, GridRow } from "../../../../index";
@@ -13,9 +13,9 @@ export default {
control: "none",
},
},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
@@ -26,7 +26,7 @@ Default.args = {
children: ,
};
-const TemplateStretched: ComponentStory = (args) => (
+const TemplateStretched: StoryFn = (args) => (
Top row.
diff --git a/src/components/HoverToggler/HoverToggler.stories.tsx b/src/components/HoverToggler/HoverToggler.stories.tsx
index aeee6861..d89d5381 100644
--- a/src/components/HoverToggler/HoverToggler.stories.tsx
+++ b/src/components/HoverToggler/HoverToggler.stories.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import { HoverToggler } from "./../../index";
@@ -7,9 +7,9 @@ export default {
title: "Components/HoverToggler",
component: HoverToggler,
argTypes: {},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => ;
+const Template: StoryFn = (args) => ;
export const Default = Template.bind({});
Default.args = {
diff --git a/src/components/Icon/BaseIcon.tsx b/src/components/Icon/BaseIcon.tsx
index c1308e85..7de20dbc 100644
--- a/src/components/Icon/BaseIcon.tsx
+++ b/src/components/Icon/BaseIcon.tsx
@@ -1,11 +1,10 @@
import React from "react";
-import { IconProps as CarbonIconProps } from "carbon-components-react";
+import { CarbonIconProps, CarbonIconType } from "@carbon/react/icons";
import { IntentTypes } from "../../common/Intent";
import { CLASSPREFIX as eccgui } from "../../configuration/constants";
import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
-import { CarbonIconType } from "./canonicalIconNames";
export interface BaseIconProps extends Omit {
/**
@@ -35,12 +34,17 @@ export interface BaseIconProps extends Omit>;
+ /**
+ * @deprecated (v25) Use `title` as replacement.
+ */
+ iconTitle?: CarbonIconProps["title"];
}
/**
@@ -55,6 +59,7 @@ function BaseIcon({
tooltipProps,
intent,
description,
+ iconTitle,
tabIndex,
...restProps
}: BaseIconProps) {
@@ -65,9 +70,11 @@ function BaseIcon({
const icon = (
{
+const findExistingIconName = (iconNames: string[], fallbackIconName: ValidIconName = "undefined"): ValidIconName => {
let foundIconName: string = fallbackIconName;
const iconNameStack = [...iconNames];
while (foundIconName === fallbackIconName && iconNameStack.length > 0) {
diff --git a/src/components/Icon/canonicalIconNames.tsx b/src/components/Icon/canonicalIconNames.tsx
index cb69f25f..88220ab8 100644
--- a/src/components/Icon/canonicalIconNames.tsx
+++ b/src/components/Icon/canonicalIconNames.tsx
@@ -1,174 +1,7 @@
-import * as icons from "@carbon/icons-react";
-import { IconProps as CarbonIconProps } from "carbon-components-react";
+import * as icons from "@carbon/react/icons";
+import { CarbonIconType as IconType } from "@carbon/react/icons";
-/** Valid icon names. */
-export type ValidIconName =
- | "application-activities"
- | "application-dataintegration"
- | "application-explore"
- | "application-homepage"
- | "application-legacygui"
- | "application-mapping"
- | "application-queries"
- | "application-useraccount"
- | "application-vocabularies"
- | "application-warning"
- | "application-hotkeys"
- | "application-notification"
- | "artefact-chatlog"
- | "artefact-commit"
- | "artefact-customtask"
- | "artefact-dataset"
- | "artefact-dataset-csv"
- | "artefact-dataset-eccencadataplatform"
- | "artefact-dataset-excel"
- | "artefact-dataset-file"
- | "artefact-dataset-jdbc"
- | "artefact-dataset-json"
- | "artefact-dataset-multicsv"
- | "artefact-dataset-neo4j"
- | "artefact-dataset-sparkview"
- | "artefact-dataset-sparqlendpoint"
- | "artefact-dataset-sqlendpoint"
- | "artefact-dataset-xml"
- | "artefact-deprecated"
- | "artefact-embedded"
- | "artefact-errorlog"
- | "artefact-file"
- | "artefact-linking"
- | "artefact-project"
- | "artefact-rawdata"
- | "artefact-remote"
- | "artefact-report"
- | "artefact-task"
- | "artefact-transform"
- | "artefact-uncategorized"
- | "artefact-workflow"
- | "data-boolean"
- | "data-sourcepath"
- | "data-targetpath"
- | "data-string"
- | "data-date"
- | "data-time"
- | "data-datetime"
- | "data-number"
- | "entity-human"
- | "entity-robot"
- | "item-add-artefact"
- | "item-clone"
- | "item-comment"
- | "item-copy"
- | "item-download"
- | "item-draggable"
- | "item-edit"
- | "item-evaluation"
- | "item-execution"
- | "item-info"
- | "item-launch"
- | "item-moremenu"
- | "item-question"
- | "item-reload"
- | "item-remove"
- | "item-reset"
- | "item-save"
- | "item-settings"
- | "item-shuffle"
- | "item-skip-forward"
- | "item-start"
- | "item-stop"
- | "item-upload"
- | "item-vertmenu"
- | "item-viewdetails"
- | "item-hidedetails"
- | "list-sort"
- | "list-sortasc"
- | "list-sortdesc"
- | "module-accesscontrol"
- | "module-annotation"
- | "module-dashboard"
- | "module-gdprsearch"
- | "module-integrations"
- | "module-linkedrules"
- | "module-reports"
- | "module-search"
- | "module-thesauri"
- | "module-timetracker"
- | "module-visualization"
- | "navigation-back"
- | "navigation-close"
- | "navigation-down"
- | "navigation-extern"
- | "navigation-first"
- | "navigation-forth"
- | "navigation-jump"
- | "navigation-last"
- | "navigation-left"
- | "navigation-next"
- | "navigation-previous"
- | "navigation-right"
- | "navigation-up"
- | "operation-aggregation"
- | "operation-autolayout"
- | "operation-clear"
- | "operation-commit"
- | "operation-comparison"
- | "operation-erase"
- | "operation-filter"
- | "operation-filteredit"
- | "operation-filterremove"
- | "operation-fix"
- | "operation-link"
- | "operation-logout"
- | "operation-magic"
- | "operation-merge"
- | "operation-redo"
- | "operation-search"
- | "operation-sharelink"
- | "operation-transform"
- | "operation-translate"
- | "operation-undo"
- | "operation-unlink"
- | "state-checked"
- | "state-checkedsimple"
- | "state-confirmed"
- | "state-danger"
- | "state-declined"
- | "state-info"
- | "state-locked"
- | "state-partlychecked"
- | "state-protected"
- | "state-success"
- | "state-unchecked"
- | "state-unlocked"
- | "state-warning"
- | "toggler-caret"
- | "toggler-caretright"
- | "toggler-caretdown"
- | "toggler-maximize"
- | "toggler-minimize"
- | "toggler-moveleft"
- | "toggler-moveright"
- | "toggler-list"
- | "toggler-rowexpand"
- | "toggler-rowcollapse"
- | "toggler-showless"
- | "toggler-showmore"
- | "toggler-star-empty"
- | "toggler-star-filled"
- | "toggler-table"
- | "toggler-tree"
- | "form-template"
- | "undefined";
-
-export type CarbonIconType = React.ComponentType;
-
-/**
- * @deprecated
- * use CarbonIconType instead
- */
-export type IconSized = CarbonIconType;
-
-const canonicalIconNames: Record = {
+const canonicalIcons = {
"application-activities": icons.Activity,
"application-dataintegration": icons.DataUnstructured,
"application-explore": icons.Explore,
@@ -184,7 +17,8 @@ const canonicalIconNames: Record = {
"artefact-chatlog": icons.Chat,
"artefact-commit": icons.Commit,
- "artefact-customtask": icons.Script,
+ "artefact-task-deleteprojectfiles": icons.TrashCan,
+ "artefact-task-downloadfile": icons.CloudDownload,
"artefact-dataset-csv": icons.Csv,
"artefact-dataset-eccencadataplatform": icons.DataVis_1,
"artefact-dataset-excel": icons.Xls,
@@ -225,9 +59,9 @@ const canonicalIconNames: Record = {
"entity-robot": icons.Bot,
"item-add-artefact": icons.AddAlt,
- "item-clone": icons.Copy,
+ "item-clone": icons.Replicate,
"item-comment": icons.AddComment,
- "item-copy": icons.CopyFile,
+ "item-copy": icons.Copy,
"item-download": icons.Download,
"item-draggable": icons.Draggable,
"item-edit": icons.Edit,
@@ -290,6 +124,7 @@ const canonicalIconNames: Record = {
"operation-filteredit": icons.FilterEdit,
"operation-filterremove": icons.FilterRemove,
"operation-filter": icons.Filter,
+ "operation-format-codeblock": icons.CodeBlock,
"operation-fix": icons.Tools,
"operation-link": icons.Link,
"operation-logout": icons.Logout,
@@ -339,4 +174,8 @@ const canonicalIconNames: Record = {
undefined: icons.Undefined,
};
+const canonicalIconNames: Record = canonicalIcons;
+
+export type CarbonIconType = IconType;
+export type ValidIconName = keyof typeof canonicalIcons;
export default canonicalIconNames;
diff --git a/src/components/Icon/stories/Icon.stories.tsx b/src/components/Icon/stories/Icon.stories.tsx
index cc9a18f2..42652a9a 100644
--- a/src/components/Icon/stories/Icon.stories.tsx
+++ b/src/components/Icon/stories/Icon.stories.tsx
@@ -4,12 +4,14 @@ import { Meta, StoryFn } from "@storybook/react";
import { Button, Icon } from "../../../../index";
import { Definitions } from "../../../common/Intent";
+import BaseIcon from "../BaseIcon";
import canonicalIcons, { ValidIconName } from "./../canonicalIconNames";
export default {
title: "Components/Icon",
component: Icon,
+ subcomponents: { BaseIcon },
argTypes: {
name: {
control: "select",
@@ -31,6 +33,7 @@ const Template: StoryFn = (args) => (
export const Default = Template.bind({});
Default.args = {
name: "undefined",
+ title: "This is the title",
};
const TemplateSizes: StoryFn = (args) => (
diff --git a/src/components/InteractionGate/InteractionGate.stories.tsx b/src/components/InteractionGate/InteractionGate.stories.tsx
index f20c5293..d4e2dbd4 100644
--- a/src/components/InteractionGate/InteractionGate.stories.tsx
+++ b/src/components/InteractionGate/InteractionGate.stories.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { LoremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import { Button, HtmlContentBlock, InteractionGate, Link, Spinner } from "./../../index";
@@ -14,9 +14,9 @@ export default {
description: "Any sub lements, could contain elements that provide options for user interactions.",
},
},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => ;
+const Template: StoryFn = (args) => ;
export const Default = Template.bind({});
Default.args = {
diff --git a/src/components/Label/Label.stories.tsx b/src/components/Label/Label.stories.tsx
index ee91df79..2c1eeba1 100644
--- a/src/components/Label/Label.stories.tsx
+++ b/src/components/Label/Label.stories.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { loremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
import { Label } from "../../index";
@@ -8,9 +8,9 @@ export default {
title: "Forms/Label",
component: Label,
argTypes: {},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => ;
+const Template: StoryFn = (args) => ;
export const Default = Template.bind({});
Default.args = {
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 1c6333f4..880678c3 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -30,6 +30,10 @@ export interface LabelProps extends React.LabelHTMLAttributes
* If there is no `isLayoutForElement` set then a `span` is used.
*/
disabled?: boolean;
+ /**
+ * visual appearance of the label
+ */
+ emphasis?: "strong" | "normal";
}
export const Label = ({
@@ -41,6 +45,7 @@ export const Label = ({
tooltip,
tooltipProps,
isLayoutForElement = "label",
+ emphasis = "normal",
...otherLabelProps
}: LabelProps) => {
let htmlElementstring = isLayoutForElement;
@@ -66,7 +71,7 @@ export const Label = ({
htmlElementstring,
{
className:
- `${eccgui}-label` +
+ `${eccgui}-label ${eccgui}-label--${emphasis}` +
(className ? " " + className : "") +
(disabled ? ` ${eccgui}-label--disabled` : ""),
...otherLabelProps,
diff --git a/src/components/Label/label.scss b/src/components/Label/label.scss
index deed42a0..2c3d5249 100644
--- a/src/components/Label/label.scss
+++ b/src/components/Label/label.scss
@@ -21,6 +21,12 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
opacity: $eccgui-opacity-disabled;
}
+.#{$eccgui}-label--strong {
+ .#{$eccgui}-label__text {
+ font-weight: bolder;
+ }
+}
+
.#{$eccgui}-label__text {
.#{$eccgui}-typography__overflowtext--passdown > .#{$eccgui}-label > & {
display: block;
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index 3a315781..5a738623 100644
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -1,12 +1,12 @@
import React from "react";
-import { Link as CarbonLink, LinkProps as CarbonLinkProps } from "carbon-components-react";
+import { Link as CarbonLink, LinkProps as CarbonLinkProps } from "@carbon/react";
import { openInNewTab } from "../../common/utils/openInNewTab";
import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-export type LinkProps = CarbonLinkProps;
+export type LinkProps = Omit, "ref">;
-export const Link = ({ className = "", children, href, onClick, ...otherProps }: CarbonLinkProps) => {
+export const Link = ({ className = "", children, href, onClick, ...otherProps }: LinkProps) => {
return (
;
diff --git a/src/components/MultiSelect/MultiSelect.tsx b/src/components/MultiSelect/MultiSelect.tsx
index 5779997d..091d83c9 100644
--- a/src/components/MultiSelect/MultiSelect.tsx
+++ b/src/components/MultiSelect/MultiSelect.tsx
@@ -12,15 +12,13 @@ import { TestableComponent } from "../interfaces";
import { ContextOverlayProps, Highlighter, IconButton, MenuItem, OverflowText, Spinner } from "./../../index";
+/** @deprecated (v25) use MultiSuggestFieldSelectionProps */
export interface MultiSelectSelectionProps {
newlySelected?: T;
selectedItems: T[];
createdItems: Partial[];
}
-// @deprecated use `MultiSelectSelectionProps`
-export type SelectedParamsType = MultiSelectSelectionProps;
-
interface MultiSelectCommonProps
extends TestableComponent,
Pick, "items" | "placeholder" | "openOnKeyDown"> {
@@ -37,7 +35,6 @@ interface MultiSelectCommonProps
* this would be used in the item selection list as well as the multi-select input
*/
itemLabel: (item: T) => string;
-
/**
* function handler that would be called anytime an item is selected/deselected or an item is created/removed
*/
@@ -117,8 +114,20 @@ interface MultiSelectCommonProps
* It uses the attributes given via this property.
*/
wrapperProps?: React.HTMLAttributes;
+ /**
+ * Function that allows us to filter values from the option list.
+ * If not provided, values are filtered by their labels
+ */
+ searchPredicate?: (item: T, query: string) => boolean;
+ /**
+ * Limits the height of the input target plus its dropdown menu when it is opened.
+ * Need to be a `number not greater than 100` (as `vh`, a unit describing a length relative to the viewport height) or `true` (equals 100).
+ * If not set than the dropdown menu cannot be larger that appr. the half of the available viewport hight.
+ */
+ limitHeightOpened?: boolean | number;
}
+/** @deprecated (v25) use MultiSuggestFieldProps */
export type MultiSelectProps = MultiSelectCommonProps &
(
| {
@@ -138,13 +147,10 @@ export type MultiSelectProps = MultiSelectCommonProps &
);
/**
- * **Element is deprecated for the current type of usage.**
- * Use `MultiSuggestField` as replacement.
- *
- * This component will be re-implemented later as a `Select` allowing multiple selections.
- * @deprecated
+ * This component will be re-implemented as `Select` like element allowing multiple selections (or a `Select` option).
+ * New name for this component is `MultiSuggestField`.
*/
-export function MultiSelect({
+function MultiSelect({
items,
selectedItems: externalSelectedItems,
prePopulateWithItems,
@@ -171,6 +177,8 @@ export function MultiSelect({
"data-test-id": dataTestId,
"data-testid": dataTestid,
wrapperProps,
+ searchPredicate,
+ limitHeightOpened,
...otherMultiSelectProps
}: MultiSelectProps) {
// Options created by a user
@@ -183,6 +191,8 @@ export function MultiSelect({
const [selectedItems, setSelectedItems] = React.useState(() =>
prePopulateWithItems ? [...items] : externalSelectedItems ? [...externalSelectedItems] : []
);
+ // Max height of the menu
+ const [calculatedMaxHeight, setCalculatedMaxHeight] = React.useState(null);
//currently focused element in popover list
const [focusedItem, setFocusedItem] = React.useState(null);
@@ -243,6 +253,29 @@ export function MultiSelect({
setSelectedItems(externalSelectedItems);
}, [externalSelectedItems?.map((item) => itemId(item)).join("|")]);
+ React.useEffect(() => {
+ const calculateMaxHeight = () => {
+ if (inputRef.current) {
+ // Get the height of the input target
+ const inputTargetHeight = inputRef.current.getBoundingClientRect().height;
+ // Calculate the menu dropdown by using the limited height reduced by the target height
+ setCalculatedMaxHeight(`calc(${maxHeightToProcess}vh - ${inputTargetHeight}px)`);
+ }
+ };
+
+ const removeListener = () => {
+ window.removeEventListener("resize", calculateMaxHeight);
+ };
+
+ if (!limitHeightOpened || (typeof limitHeightOpened === "number" && limitHeightOpened > 100))
+ return removeListener;
+ const maxHeightToProcess = typeof limitHeightOpened === "number" ? limitHeightOpened : 100;
+
+ calculateMaxHeight();
+ window.addEventListener("resize", calculateMaxHeight);
+ return removeListener;
+ }, [limitHeightOpened, selectedItems]);
+
/**
* using the equality prop specified checks if an item has already been selected
* @param matcher
@@ -261,6 +294,10 @@ export function MultiSelect({
setSelectedItems(filteredItems);
};
+ const defaultFilterPredicate = (item: T, query: string) => {
+ return itemLabel(item).toLowerCase().includes(query);
+ };
+
/**
* selects and deselects an item from selection list
* if the item exists it removes it instead
@@ -298,10 +335,10 @@ export function MultiSelect({
if (requestState.current.query === query) {
// Only use most recent request
const outsideOptions = [...(resultFromQuery ?? externalItems)];
+ const filter = searchPredicate ?? defaultFilterPredicate;
+
setFilteredItems(
- [...outsideOptions, ...createdItems.current].filter((item) =>
- itemLabel(item).toLowerCase().includes(query.toLowerCase())
- )
+ [...outsideOptions, ...createdItems.current].filter((item) => filter(item, query.toLowerCase()))
);
setShowSpinner(false);
}
@@ -429,7 +466,7 @@ export function MultiSelect({
) : undefined;
@@ -509,6 +546,11 @@ export function MultiSelect({
{
"data-test-id": dataTestId ? dataTestId + "_drowpdown" : undefined,
"data-testid": dataTestid ? dataTestid + "_dropdown" : undefined,
+ style: calculatedMaxHeight
+ ? ({
+ "--eccgui-multisuggestfield-max-height": `${calculatedMaxHeight}`,
+ } as React.CSSProperties)
+ : undefined,
} as BlueprintMultiSelectProps["popoverContentProps"]
}
/>
@@ -527,15 +569,10 @@ export function MultiSelect({
);
}
-/** @deprecated */
-/*
-function ofType() {
- return (props: MultiSelectProps) => {...props} />;
-}
-// */
-
// we still return the Blueprint element here because it was already used like that
-// MultiSelect.ofType = ofType;
+/**
+ * @deprecated (v25) use directly > (`ofType` also returns the original BlueprintJS element, not ours!)
+ */
MultiSelect.ofType = BlueprintMultiSelect.ofType;
export default MultiSelect;
diff --git a/src/components/MultiSuggestField/MultiSuggestField.stories.tsx b/src/components/MultiSuggestField/MultiSuggestField.stories.tsx
index 644a4853..370d87b7 100644
--- a/src/components/MultiSuggestField/MultiSuggestField.stories.tsx
+++ b/src/components/MultiSuggestField/MultiSuggestField.stories.tsx
@@ -1,12 +1,14 @@
import React, { useCallback, useMemo, useState } from "react";
import { loremIpsum } from "react-lorem-ipsum";
+import { OverlaysProvider } from "@blueprintjs/core";
import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
-import { MultiSelectSelectionProps, MultiSuggestField, SimpleDialog } from "./../../../index";
+import { MultiSuggestField, MultiSuggestFieldSelectionProps, SimpleDialog } from "./../../../index";
const testLabels = loremIpsum({
p: 1,
- avgSentencesPerParagraph: 5,
+ avgSentencesPerParagraph: 50,
avgWordsPerSentence: 1,
startWithLoremIpsum: false,
random: false,
@@ -15,8 +17,8 @@ const testLabels = loremIpsum({
.split(".")
.map((item) => item.trim());
-const items = new Array(5).fill(undefined).map((_, id) => {
- const testLabel = testLabels[id];
+const items = new Array(50).fill(undefined).map((_, id) => {
+ const testLabel = `${testLabels[id]}${id + 1}`;
return { testLabel, testId: `${testLabel}-id` };
});
@@ -28,13 +30,16 @@ export default {
control: "none",
},
},
+ args: {
+ onSelection: fn(),
+ },
} as Meta;
const Template: StoryFn = (args) => {
return (
-
+
-
+
);
};
@@ -87,7 +92,7 @@ const DeferredSelectionTemplate: StoryFn = () => {
const identity = useCallback((item: string): string => item, []);
return (
- <>
+
Selected items loaded: {loaded.toString()}
@@ -103,7 +108,7 @@ const DeferredSelectionTemplate: StoryFn = () => {
-
+
);
};
@@ -131,21 +136,23 @@ const CreationTemplate: StoryFn = () => {
const identity = useCallback((item: string): string => item, []);
- const handleOnSelect = useCallback((params: MultiSelectSelectionProps) => {
+ const handleOnSelect = useCallback((params: MultiSuggestFieldSelectionProps) => {
const selected = params.selectedItems;
setSelectedValues(selected);
}, []);
return (
-
- items={items}
- selectedItems={selectedValues}
- onSelection={handleOnSelect}
- itemId={identity}
- itemLabel={identity}
- createNewItemFromQuery={identity}
- />
+
+
+ items={items}
+ selectedItems={selectedValues}
+ onSelection={handleOnSelect}
+ itemId={identity}
+ itemLabel={identity}
+ createNewItemFromQuery={identity}
+ />
+
);
};
@@ -169,7 +176,7 @@ const WithResetButtonComponent = (): JSX.Element => {
};
return (
-
+