@eccenca/gui-elements 24.0.0-rc.5 → 24.0.1

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/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);

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/Icon/canonicalIconNames.tsx

@@ -124,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/MultiSelect/MultiSelect.tsx

@@ -323,6 +323,7 @@ function MultiSelect<T>({
      * @param query
      */
     const onQueryChange = (query: string) => {
+        setFilteredItems([]);
         if (query.length && query !== requestState.current.query) {
             requestState.current.query = query;
             if (requestState.current.timeoutId) {

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/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.ts

@@ -1,18 +1,18 @@
-import { defaultHighlightStyle, StreamLanguage, StreamParser, LanguageSupport } from "@codemirror/language";
-
-//modes imports
-import { markdown } from "@codemirror/lang-markdown";
+//adapted v6 modes imports
+import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
+import { markdown } from "@codemirror/lang-markdown";
+import { sql } from "@codemirror/lang-sql";
 import { xml } from "@codemirror/lang-xml";
-import { javascript } from "@codemirror/legacy-modes/mode/javascript";
+import { yaml } from "@codemirror/lang-yaml";
+import { defaultHighlightStyle, LanguageSupport, StreamLanguage, StreamParser } from "@codemirror/language";
+//legacy mode imports
+import { jinja2 } from "@codemirror/legacy-modes/mode/jinja2";
+import { mathematica } from "@codemirror/legacy-modes/mode/mathematica";
+import { ntriples } from "@codemirror/legacy-modes/mode/ntriples";
 import { python } from "@codemirror/legacy-modes/mode/python";
 import { sparql } from "@codemirror/legacy-modes/mode/sparql";
-import { sql } from "@codemirror/legacy-modes/mode/sql";
 import { turtle } from "@codemirror/legacy-modes/mode/turtle";
-import { jinja2 } from "@codemirror/legacy-modes/mode/jinja2";
-import { yaml } from "@codemirror/legacy-modes/mode/yaml";
-import { ntriples } from "@codemirror/legacy-modes/mode/ntriples";
-import { mathematica } from "@codemirror/legacy-modes/mode/mathematica";
 
 //adaptations
 import { adaptedSyntaxHighlighting } from "../tests/codemirrorTestHelper";
@@ -35,10 +35,19 @@ const supportedModes = {
 export const supportedCodeEditorModes = Object.keys(supportedModes) as Array<keyof typeof supportedModes>;
 export type SupportedCodeEditorModes = (typeof supportedCodeEditorModes)[number];
 
+const v6AdaptedModes: ReadonlyMap<SupportedCodeEditorModes, boolean> = new Map([
+    ["json", true],
+    ["markdown", true],
+    ["xml", true],
+    ["sql", true],
+    ["yaml", true],
+    ["javascript", true],
+]);
+
 export const useCodeMirrorModeExtension = (mode?: SupportedCodeEditorModes) => {
     return !mode
         ? adaptedSyntaxHighlighting(defaultHighlightStyle)
-        : ["json", "markdown", "xml"].includes(mode)
+        : v6AdaptedModes.has(mode)
         ? ((typeof supportedModes[mode] === "function" ? supportedModes[mode] : () => {}) as () => LanguageSupport)()
         : StreamLanguage?.define(supportedModes[mode] as StreamParser<unknown>);
 };