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

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

@@ -1,16 +1,28 @@
 import React from "react";
 export interface HtmlContentBlockProps extends React.HTMLAttributes<HTMLDivElement> {
-    className?: string;
+    /**
+     * Content block uses smaller font size.
+     */
     small?: boolean;
+    /**
+     * To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line.
+     */
+    linebreakForced?: boolean;
+    /**
+     * No automatic line breaks are inserted.
+     */
+    linebreakPrevented?: boolean;
+    /**
+     * Sub elements like code blocks are displayed without own scrollbars.
+     * This option may infer with `linebreakForced` and `linebreakPrevented`.
+     */
+    noScrollbarsOnChildren?: boolean;
     /** currently not supported */
     large?: boolean;
     /** currently not supported */
     muted?: boolean;
     /** currently not supported */
     disabled?: boolean;
-    linebreakForced?: boolean;
-    linebreakPrevented?: boolean;
-    noScrollbarsOnChildren?: boolean;
 }
 export declare const HtmlContentBlock: ({ className, children, small, large, muted, disabled, linebreakForced, linebreakPrevented, noScrollbarsOnChildren, ...otherProps }: HtmlContentBlockProps) => React.JSX.Element;
 export default HtmlContentBlock;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.0.0-rc.4",
+    "version": "24.0.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -137,6 +137,7 @@
         "jest-pnp-resolver": "^1.2.3",
         "lint-staged": "^15.2.9",
         "node-sass-package-importer": "^5.3.3",
+        "path": "^0.12.7",
         "prettier": "^2.8.8",
         "react-app-polyfill": "^3.0.0",
         "react-lorem-ipsum": "^1.4.9",
@@ -161,7 +162,9 @@
     },
     "resolutions": {
         "**/@types/react": "^17.0.80",
-        "node-sass-package-importer/**/postcss": "^8.4.41"
+        "node-sass-package-importer/**/postcss": "^8.4.41",
+        "**/cross-spawn": "^7.0.5 ",
+        "**/micromatch": "^4.0.8"
     },
     "husky": {
         "hooks": {

package/src/cmem/markdown/Markdown.tsx

@@ -9,7 +9,7 @@ import { remarkDefinitionList } from "remark-definition-list";
 import remarkGfm from "remark-gfm";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { HtmlContentBlock, TestableComponent } from "../../index";
+import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index";
 
 export interface MarkdownProps extends TestableComponent {
     children: string;
@@ -28,7 +28,8 @@ export interface MarkdownProps extends TestableComponent {
      */
     allowedElements?: string[];
     /**
-     * Do not wrap it in a content block element.
+     * Do not wrap content in a `HtmlContentBlock` component.
+     * This option is ignored if `htmlContentBlockProps` or `data-test-id` is given.
      */
     inheritBlock?: boolean;
     /**
@@ -41,6 +42,10 @@ export interface MarkdownProps extends TestableComponent {
      * Set to `false` to disable this feature.
      */
     linkTargetName?: false | string;
+    /**
+     * Configure the `HtmlContentBlock` component that is automatically used as wrapper for the parsed Markdown content.
+     */
+    htmlContentBlockProps?: Omit<HtmlContentBlockProps, "children" | "className" | "data-test-id">;
 }
 
 const configDefault = {
@@ -102,6 +107,7 @@ export const Markdown = ({
     allowedElements,
     reHypePlugins,
     linkTargetName = "_mdref",
+    htmlContentBlockProps,
     ...otherProps
 }: MarkdownProps) => {
     const configHtml = allowHtml
@@ -162,10 +168,14 @@ export const Markdown = ({
 
     // @ts-ignore because against the lib spec it does not allow a function for linkTarget.
     const markdownDisplay = <ReactMarkdown {...reactMarkdownProperties} />;
-    return inheritBlock ? (
+    return inheritBlock && !(otherProps["data-test-id"] || htmlContentBlockProps) ? (
         markdownDisplay
     ) : (
-        <HtmlContentBlock className={`${eccgui}-markdown__container`} data-test-id={otherProps["data-test-id"]}>
+        <HtmlContentBlock
+            {...htmlContentBlockProps}
+            className={`${eccgui}-markdown__container`}
+            data-test-id={otherProps["data-test-id"]}
+        >
             {markdownDisplay}
         </HtmlContentBlock>
     );

package/src/components/Application/helper.ts

@@ -28,20 +28,48 @@ export const useApplicationHeaderOverModals = (elevate: boolean, className: stri
 export const useDropzoneMonitor = (enabledTypes: string[]) => {
     React.useEffect(() => {
         const monitor = window.document.body;
+        let timestampMonitorEnabled = 0;
+        let processDragleave: any;
 
         const addMonitor = (event: DragEvent) => {
+            // stop default, so that also no files cannot executed by browser without demand
+            event.preventDefault();
+
+            if (processDragleave) {
+                // stop removeMonitor process if it happend shortly before
+                clearTimeout(processDragleave);
+            }
+
+            // only process if monitor is not already enabled
+            if (timestampMonitorEnabled > 0) {
+                return;
+            }
+
+            // stop the event here to prevent double execution
+            event.stopImmediatePropagation();
+
+            // enable monitoring only for supported types of dragged elements
             const types = event.dataTransfer?.types || [];
             const monitorTypes = [...new Set(types.filter((type) => enabledTypes.includes(type)))];
             if (monitorTypes.length > 0 && !monitor.dataset.monitorDropzone) {
                 monitor.dataset.monitorDropzone = monitorTypes.join(" ");
             }
-            event.preventDefault();
+
+            timestampMonitorEnabled = Date.now();
         };
 
         const removeMonitor = (event: DragEvent) => {
-            if (event.type === "drop" || monitor === event.target) {
+            const removeAction = () => {
                 delete monitor.dataset.monitorDropzone;
                 event.preventDefault();
+                timestampMonitorEnabled = 0;
+            };
+
+            if (event.type === "dragleave") {
+                // use timeout function for dragleave to prevent useless removeMonitor actions
+                processDragleave = setTimeout(removeAction, 250);
+            } else {
+                removeAction();
             }
         };
 

package/src/components/Application/stories/Application.stories.tsx

@@ -17,6 +17,7 @@ import {
     Button,
     Depiction,
     Icon,
+    OverviewItem,
     WorkspaceHeader,
 } from "../../../index";
 
@@ -76,7 +77,16 @@ const TemplateBasicExample: StoryFn<typeof ApplicationBasicExample> = (args) =>
                 <code>Menu</code> with <code>MenuItem</code>s.
             </ApplicationSidebarNavigation>
 
-            <WorkspaceHeader id={"ApplicationBasicExample"} />
+            <WorkspaceHeader id={"ApplicationBasicExample"}>
+                <OverviewItem>
+                    <Depiction
+                        image={<Icon name={"application-homepage"} />}
+                        backgroundColor={"dark"}
+                        padding="medium"
+                        ratio="1:1"
+                    />
+                </OverviewItem>
+            </WorkspaceHeader>
 
             <ApplicationToolbar>
                 <ApplicationToolbarSection>

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -161,6 +161,10 @@ export interface AutoSuggestionProps {
     multiline?: boolean;
     // The editor theme, e.g. "sparql"
     mode?: SupportedCodeEditorModes;
+
+    /** If this is enabled the value of the editor is replaced with the initialValue if it changes.
+     * FIXME: This property is a workaround for some "controlled" usages of the component via the initialValue property. */
+    reInitOnInitialValueChange?: boolean;
 }
 
 // Meta data regarding a request
@@ -192,6 +196,7 @@ const AutoSuggestion = ({
     validationRequestDelay = 200,
     mode,
     multiline = false,
+    reInitOnInitialValueChange = false,
 }: AutoSuggestionProps) => {
     const value = React.useRef<string>(initialValue);
     const cursorPosition = React.useRef(0);
@@ -229,6 +234,14 @@ const AutoSuggestion = ({
 
     const pathIsValid = validationResponse?.valid ?? true;
 
+    React.useEffect(() => {
+        if (reInitOnInitialValueChange && initialValue != null && cm) {
+            dispatch({
+                changes: { from: 0, to: cm?.state?.doc.length, insert: initialValue },
+            });
+        }
+    }, [initialValue, cm, reInitOnInitialValueChange]);
+
     const setCurrentIndex = (newIndex: number) => {
         editorState.index = newIndex;
         setFocusedIndex(newIndex);
@@ -240,15 +253,9 @@ const AutoSuggestion = ({
     }, [cm, editorState]);
 
     const dispatch = // eslint-disable-next-line @typescript-eslint/no-empty-function
-    (typeof editorState?.cm?.dispatch === "function" ? editorState?.cm?.dispatch : () => {}) as EditorView["dispatch"];
-
-    React.useEffect(() => {
-        if (initialValue != null && cm) {
-            dispatch({
-                changes: { from: 0, to: cm?.state?.doc.length, insert: initialValue },
-            });
-        }
-    }, [initialValue, cm]);
+        (
+            typeof editorState?.cm?.dispatch === "function" ? editorState?.cm?.dispatch : () => {}
+        ) as EditorView["dispatch"];
 
     React.useEffect(() => {
         editorState.dropdownShown = shouldShowDropdown;
@@ -610,23 +617,34 @@ const AutoSuggestion = ({
     );
 
     const codeEditor = React.useMemo(() => {
-        return <ExtendedCodeEditor
-            mode={mode}
-            setCM={setCM}
-            onChange={handleChange}
-            onCursorChange={handleCursorChange}
-            initialValue={initialValue}
-            onFocusChange={handleInputFocus}
-            onKeyDown={handleInputEditorKeyPress}
-            enableTab={useTabForCompletions}
-            placeholder={placeholder}
-            onSelection={onSelection}
-            showScrollBar={showScrollBar}
-            multiline={multiline}
-            onMouseDown={handleInputMouseDown}
-        />
-
-    }, [mode, setCM, handleChange, initialValue, useTabForCompletions, placeholder, showScrollBar, multiline, handleInputMouseDown])
+        return (
+            <ExtendedCodeEditor
+                mode={mode}
+                setCM={setCM}
+                onChange={handleChange}
+                onCursorChange={handleCursorChange}
+                initialValue={initialValue}
+                onFocusChange={handleInputFocus}
+                onKeyDown={handleInputEditorKeyPress}
+                enableTab={useTabForCompletions}
+                placeholder={placeholder}
+                onSelection={onSelection}
+                showScrollBar={showScrollBar}
+                multiline={multiline}
+                onMouseDown={handleInputMouseDown}
+            />
+        );
+    }, [
+        mode,
+        setCM,
+        handleChange,
+        initialValue,
+        useTabForCompletions,
+        placeholder,
+        showScrollBar,
+        multiline,
+        handleInputMouseDown,
+    ]);
 
     const hasError = !!value.current && !pathIsValid && !pathValidationPending;
     const autoSuggestionInput = (

package/src/components/AutoSuggestion/extensions/markText.ts

@@ -35,7 +35,6 @@ type marksConfig = {
 
 export const markText = (config: marksConfig) => {
     const docLength = config.view.state.doc.length;
-    if (!docLength) return { from: 0, to: 0 };
     const strikeMark = Decoration.mark({
         class: config.className,
         attributes: {
@@ -43,10 +42,10 @@ export const markText = (config: marksConfig) => {
         },
     });
     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 };
 };
 

package/src/components/CodeAutocompleteField/CodeAutocompleteField.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 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.

package/src/components/Depiction/stories/Depiction.stories.tsx

@@ -3,7 +3,7 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Badge, Depiction, Icon, TestIcon } from "../../../index";
+import { Badge, Depiction, Icon, OverviewItem, TestIcon } from "../../../index";
 
 import canonicalIcons from "./../../Icon/canonicalIconNames";
 import { Svg9to16 } from "./test-9to16";
@@ -81,8 +81,25 @@ const TemplateFull: StoryFn<typeof Depiction> = (args) => (
     </OverlaysProvider>
 );
 
+const TemplateInsideOverviewItem: StoryFn<typeof Depiction> = (args) => (
+    <OverlaysProvider>
+        <OverviewItem>
+            <Depiction {...args} />
+        </OverviewItem>
+    </OverlaysProvider>
+);
+
 export const FullExample = TemplateFull.bind({});
 FullExample.args = {
     image: <img src={png16to9} />,
     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",
+};

package/src/components/Icon/canonicalIconNames.tsx

@@ -17,7 +17,8 @@ const canonicalIcons = {
 
     "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,
@@ -123,6 +124,7 @@ const canonicalIcons = {
     "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,

package/src/components/OverviewItem/overviewitem.scss

@@ -46,11 +46,19 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 .#{$eccgui}-overviewitem__item {
     display: flex;
     flex-flow: row nowrap;
-    align-content: stretch;
+    place-content: stretch flex-start;
     align-items: stretch;
-    justify-content: flex-start;
     max-width: 100%;
-    height: mini-units(6);
+    height: auto;
+
+    // TODO: we may revalidate later again
+    // @see http://localhost:6006/?path=/docs/components-application--docs as testcase
+    // there is a weird bug in Firefox v132+
+    // with a fixed height the calculation of `asprect-ratio` for child elements seems to be broken in some situations (especially in combination with top/bottom `padding`)
+    // however, it is working when we set min- and max-height (what leads basically to the same layout like a fixed height)
+    // height: mini-units(6);
+    min-height: mini-units(6);
+    max-height: mini-units(6);
 
     &[tabindex]:not([tabindex="-1"]) {
         cursor: pointer;
@@ -70,7 +78,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
 .#{$eccgui}-overviewitem__item--highdensity,
 .#{$eccgui}-overviewitem__list--highdensity > li > .#{$eccgui}-overviewitem__item {
-    height: $button-height; // mini-units(4);
+    // same fix for Firefox v132+ like for the normal element height
+    // height: $button-height; // mini-units(4);
+    min-height: $button-height;
+    max-height: $button-height;
 
     & > .#{$eccgui}-overviewitem__depiction {
         width: $button-height; // mini-units(4);
@@ -107,9 +118,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
     & > * {
         display: block;
-        width: auto;
+        max-width: 100%;
         max-height: 100%;
         margin: 0 auto;
+        object-fit: contain;
     }
 
     &:not(.#{$eccgui}-overviewitem__depiction--keepcolors) {
@@ -127,9 +139,8 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     flex-direction: column;
     flex-grow: 1;
     flex-shrink: 1;
-    align-content: stretch;
+    place-content: stretch flex-start;
     align-items: stretch;
-    justify-content: flex-start;
     overflow: hidden;
 
     .#{$eccgui}-overviewitem__depiction + & {

package/src/components/OverviewItem/stories/OverviewItem.stories.tsx

@@ -13,7 +13,7 @@ import {
 } from "./../../../../index";
 import { FullExample as OtherDepictionExample } from "./../../Depiction/stories/Depiction.stories";
 import { Default as ActionsExample } from "./OverviewItemActions.stories";
-import { Default as DepictionExample } from "./OverviewItemDepiction.stories";
+import { AutoTransform as DepictionExample } from "./OverviewItemDepiction.stories";
 import { Default as DescriptionExample } from "./OverviewItemDescription.stories";
 
 export default {

package/src/components/OverviewItem/stories/OverviewItemDepiction.stories.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Depiction, Icon, OverviewItemDepiction } from "./../../../../index";
+import png16to9 from "../../Depiction/stories/test-16to9.png";
+
+import { Depiction, Icon, OverviewItem, OverviewItemDepiction } from "./../../../../index";
 import { FullExample as DepictionExample } from "./../../Depiction/stories/Depiction.stories";
 
 export default {
@@ -17,11 +19,24 @@ export default {
 } as Meta<typeof OverviewItemDepiction>;
 
 const Template: StoryFn<typeof OverviewItemDepiction> = (args) => (
-    <OverviewItemDepiction {...args}></OverviewItemDepiction>
+    <OverviewItem>
+        <OverviewItemDepiction {...args}></OverviewItemDepiction>
+    </OverviewItem>
 );
 
-export const Default = Template.bind({});
-Default.args = {
+/**
+ * If a `<Depiction/>` is used as only content then it is returned directly by `<OverviewItemDepiction/>`.
+ */
+export const UseDepictionElement = Template.bind({});
+UseDepictionElement.args = {
+    children: <Depiction {...DepictionExample.args} resizing="contain" />,
+};
+
+/**
+ * If an `<Icon/>` (or `<TestIcon/>`) is used as only content for `<OverviewItemDepiction/>` then it returns automatically a `<Depiction/>` element setting the `image` property to that icon.
+ */
+export const AutoTransform = Template.bind({});
+AutoTransform.args = {
     children: (
         <>
             <Icon name="artefact-dataset" />
@@ -29,7 +44,10 @@ Default.args = {
     ),
 };
 
-export const UseDepictionElement = Template.bind({});
-UseDepictionElement.args = {
-    children: <Depiction {...DepictionExample.args} resizing="contain" />,
+/**
+ * For all other content the `<OverviewItemDepiction/>` wrapper is set around it to keep it in the allowed size. This works mainly for image content.
+ */
+export const Default = Template.bind({});
+Default.args = {
+    children: <img src={png16to9} />,
 };

package/src/components/Pagination/pagination.scss

@@ -16,6 +16,7 @@ $eccgui-size-pagination-height-large: $pt-button-height-large !default;
     .#{$prefix}--form-item,
     .#{$prefix}--select-input {
         font-size: 100%;
+        text-overflow: clip;
     }
 }
 

package/src/components/Tooltip/Tooltip.tsx

@@ -20,7 +20,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      */
     size?: "small" | "medium" | "large";
     /**
-     * The tolltip will be attached to this element when it is hovered.
+     * The tooltip will be attached to this element when it is hovered.
      */
     children: React.ReactNode | React.ReactNode[];
     /**

package/src/components/Typography/HtmlContentBlock.tsx

@@ -7,17 +7,29 @@ import * as TypographyClassNames from "./classnames";
 // FIXME: CMEM-3742: comment + add story
 
 export interface HtmlContentBlockProps extends React.HTMLAttributes<HTMLDivElement> {
-    className?: string;
+    /**
+     * Content block uses smaller font size.
+     */
     small?: boolean;
+    /**
+     * To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line.
+     */
+    linebreakForced?: boolean;
+    /**
+     * No automatic line breaks are inserted.
+     */
+    linebreakPrevented?: boolean;
+    /**
+     * Sub elements like code blocks are displayed without own scrollbars.
+     * This option may infer with `linebreakForced` and `linebreakPrevented`.
+     */
+    noScrollbarsOnChildren?: boolean;
     /** currently not supported */
     large?: boolean;
     /** currently not supported */
     muted?: boolean;
     /** currently not supported */
     disabled?: boolean;
-    linebreakForced?: boolean;
-    linebreakPrevented?: boolean;
-    noScrollbarsOnChildren?: boolean;
 }
 
 export const HtmlContentBlock = ({

package/src/components/Typography/stories/HtmlContentBlock.stories.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import LoremIpsum, { loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { HtmlContentBlock } from "../../../index";
+
+const whiteSpaceSizeOptions = {
+    control: "select",
+    options: {
+        "not set": undefined,
+        tiny: "tiny",
+        small: "small",
+        regular: "regular",
+        large: "large",
+        xlarge: "xlarge",
+    },
+};
+
+export default {
+    title: "Components/Typography/HtmlContentBlock",
+    component: HtmlContentBlock,
+    argTypes: {
+        children: { control: false },
+    },
+} as Meta<typeof HtmlContentBlock>;
+
+const Template: StoryFn<typeof HtmlContentBlock> = (args) => <HtmlContentBlock {...args} />;
+
+const testContent = (
+    <>
+        <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+        <p>
+            <strong>
+                {loremIpsum({
+                    p: 2,
+                    avgSentencesPerParagraph: 4,
+                    random: false,
+                })
+                    .toString()
+                    .replaceAll(" ", "")}
+            </strong>
+        </p>
+        <LoremIpsum p={3} avgSentencesPerParagraph={5} random={false} />
+    </>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: testContent,
+};