@eccenca/gui-elements 23.8.0-rc.0 → 23.8.0-rc.1

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": "23.8.0-rc.0",
+    "version": "23.8.0-rc.1",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -166,7 +166,10 @@
         "**/word-wrap": "^1.2.4",
         "**/webpack-dev-middleware": "^6.1.2",
         "**/braces": "^3.0.3",
-        "**/ws": "^8.17.1"
+        "**/ws": "^8.17.1",
+        "**/ejs": "^3.1.10",
+        "**/tar": "^6.2.1",
+        "**/express": "^4.19.2"
     },
     "husky": {
         "hooks": {

package/src/_shame.scss

@@ -19,33 +19,6 @@
     border: 0;
 }
 
-.uppy-DragDrop-container {
-    color: inherit;
-    background-color: $data-table-zebra-color;
-    // TODO: create own file upload elements
-
-    border-width: 1px;
-
-    //border-style: dotted;
-    border-radius: 3px;
-
-    .uppy-DragDrop-inner {
-        padding: 1rem;
-        line-height: inherit;
-    }
-
-    .uppy-DragDrop-arrow {
-        width: 2rem;
-        height: 2rem;
-        margin-bottom: 0.5rem;
-    }
-
-    .uppy-DragDrop-label {
-        margin-bottom: 0.5rem;
-        font-size: inherit;
-    }
-}
-
 /*
     WORKAROUND: thinner scrollbars
 */

package/src/cmem/react-flow/ReactFlow/ReactFlow.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { default as ReactFlowOriginal, ReactFlowProps as ReactFlowOriginalProps } from "react-flow-renderer";
 
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { ReactFlowMarkers } from "../../../extensions/react-flow/markers/ReactFlowMarkers";
 import { ReactFlowHotkeyContext } from "../extensions/ReactFlowHotkeyContext";
 import { useReactFlowScrollOnDrag } from "../extensions/scrollOnDragHook";
@@ -16,6 +17,11 @@ export interface ReactFlowProps extends ReactFlowOriginalProps {
      */
     configuration?: "unspecified" | "graph" | "workflow" | "linking";
 
+    /**
+     * Types data transfers that can be dragged in and dropped on the canvas.
+     */
+    dropzoneFor?: string[];
+
     /** If defined the canvas scrolls on all drag operations (node, selection, edge connect)
      * when the mouse pointer comes near the canvas borders or goes beyond them.
      * The `id` property of the ReactFlow component must be set in order for this to work.
@@ -37,7 +43,37 @@ export interface ReactFlowProps extends ReactFlowOriginalProps {
  * Corporate Memory tools.
  */
 export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>(
-    ({ configuration = "unspecified", scrollOnDrag, children, ...originalProps }, ref) => {
+    ({ configuration = "unspecified", scrollOnDrag, dropzoneFor, children, className, ...originalProps }, outerRef) => {
+        const innerRef = React.useRef<HTMLDivElement>(null);
+        React.useImperativeHandle(outerRef, () => innerRef.current!, []);
+
+        React.useEffect(() => {
+            const reactflowContainer = innerRef?.current;
+
+            if (reactflowContainer && dropzoneFor) {
+                const addDragover = (event: DragEvent) => {
+                    reactflowContainer.classList.add(`${eccgui}-graphviz__canvas--draghover`);
+                    event.preventDefault();
+                };
+
+                const removeDragover = (event: DragEvent) => {
+                    if (reactflowContainer === event.target) {
+                        reactflowContainer.classList.remove(`${eccgui}-graphviz__canvas--draghover`);
+                    }
+                };
+
+                reactflowContainer.addEventListener("dragover", addDragover);
+                reactflowContainer.addEventListener("dragleave", removeDragover);
+                reactflowContainer.addEventListener("drop", removeDragover);
+                return () => {
+                    reactflowContainer.removeEventListener("dragover", addDragover);
+                    reactflowContainer.removeEventListener("dragleave", removeDragover);
+                    reactflowContainer.removeEventListener("drop", removeDragover);
+                };
+            }
+            return;
+        }, [innerRef, dropzoneFor]);
+
         /** If the hot keys should be disabled. By default, they are always disabled. */
         const { hotKeysDisabled } = React.useContext(ReactFlowHotkeyContext);
 
@@ -57,11 +93,13 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>(
 
         return (
             <ReactFlowOriginal
-                ref={ref}
+                ref={innerRef}
+                className={`${eccgui}-graphviz__canvas` + className ? ` ${className}` : ""}
                 nodeTypes={configReactFlow[configuration].nodeTypes}
                 edgeTypes={configReactFlow[configuration].edgeTypes}
                 {...originalProps}
                 {...scrollOnDragFunctions}
+                data-dropzone-for={dropzoneFor ? dropzoneFor.join(" ") : undefined}
                 selectionKeyCode={hotKeysDisabled ? null : (selectionKeyCode as any)}
                 deleteKeyCode={hotKeysDisabled ? null : (deleteKeyCode as any)}
                 multiSelectionKeyCode={hotKeysDisabled ? null : (multiSelectionKeyCode as any)}

package/src/cmem/react-flow/_canvas.scss

@@ -0,0 +1,15 @@
+.eccgui-graphviz__canvas--draghover {
+    body[data-monitor-dropzone~="application/reactflow"] &[data-dropzone-for~="application/reactflow"],
+    body[data-monitor-dropzone~="Files"] &[data-dropzone-for~="Files"] {
+        background-color: rgba($eccgui-color-accent, $eccgui-opacity-ghostly);
+        box-shadow: 0 0 $eccgui-size-block-whitespace $eccgui-color-accent inset;
+
+        & > * {
+            opacity: $eccgui-opacity-narrow;
+        }
+
+        .react-flow__node {
+            pointer-events: none !important;
+        }
+    }
+}

package/src/cmem/react-flow/_index.scss

@@ -1,4 +1,5 @@
 @import "./configuration/colors";
+@import "canvas";
 @import "edges";
 @import "handles";
 @import "minimap";

package/src/components/Accordion/Accordion.tsx

@@ -3,13 +3,24 @@ import { Accordion as CarbonAccordion, AccordionProps as CarbonAccordionProps }
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+import { AccordionItemProps } from "./AccordionItem";
+
 export interface AccordionProps extends Omit<CarbonAccordionProps, "className" | "size"> {
     /**
      * Additional CSS classes.
      */
     className?: string;
+    /**
+     * Defines how much whitespace is used on top and bottom inside the header and content of an accordion item.
+     */
+    whitespaceSize?: AccordionItemProps["whitespaceSize"];
+    /**
+     * Defines how much space is used for the separation between an accordion item and the next one.
+     */
+    separationSize?: AccordionItemProps["separationSize"];
     /**
      * How much space is used for the header of the each of the accordion items.
+     * @deprecated Use ẁhitespaceSize` on `Accordion` or `AccordionItem` instead.
      */
     size?: "small" | "medium" | "large";
 }
@@ -24,12 +35,28 @@ export const Accordion = ({
     children,
     className = "",
     align = "start",
+    whitespaceSize = "medium",
+    separationSize = "none",
     size = "medium",
     ...otherProps
 }: AccordionProps) => {
+    const headerWhitespaceSize = typeof whitespaceSize === "string" ? whitespaceSize : whitespaceSize.header;
+    const contentWhitespaceSize = typeof whitespaceSize === "string" ? whitespaceSize : whitespaceSize.content;
     return (
         <CarbonAccordion
-            className={`${eccgui}-accordion__container ` + className}
+            className={
+                `${eccgui}-accordion__container` +
+                (headerWhitespaceSize !== "medium"
+                    ? ` ${eccgui}-accordion__container--global-headerspace-${headerWhitespaceSize}`
+                    : "") +
+                (contentWhitespaceSize !== "medium"
+                    ? ` ${eccgui}-accordion__container--global-contentspace-${contentWhitespaceSize}`
+                    : "") +
+                (separationSize !== "none"
+                    ? ` ${eccgui}-accordion__container--global-separationspace-${separationSize}`
+                    : "") +
+                (className ? ` ${className}` : "")
+            }
             align={align}
             size={carbonAccordionSizeMapping[size]}
             {...otherProps}

package/src/components/Accordion/AccordionItem.tsx

@@ -6,6 +6,8 @@ import {
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+type sizeOptions = "none" | "small" | "medium" | "large";
+
 export interface AccordionItemProps
     extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando"> {
     /**
@@ -20,8 +22,18 @@ export interface AccordionItemProps
      * use full available width for content
      */
     fullWidth?: boolean;
+    /**
+     * Defines how much whitespace is used on top and bottom inside the header and content of an accordion item.
+     * Seeting on `AccordionItem` overwrites the global setting on `Accordion`.
+     */
+    whitespaceSize?: sizeOptions | { header: sizeOptions; content: sizeOptions };
+    /**
+     * Defines how much space is used for the separation between the accordion item and the next one.
+     */
+    separationSize?: sizeOptions;
     /**
      * minimize white space and paddings
+     * @deprecated Use `whitespaceSize="none"` on `Accordion` or `AccordionItem` instead.
      */
     condensed?: boolean;
     /**
@@ -40,10 +52,14 @@ export const AccordionItem = ({
     className = "",
     fullWidth = false,
     elevated = false,
+    whitespaceSize = "medium",
+    separationSize = "none",
     condensed = false,
     noBorder = false,
     ...otherProps
 }: AccordionItemProps) => {
+    const headerWhitespaceSize = typeof whitespaceSize === "string" ? whitespaceSize : whitespaceSize.header;
+    const contentWhitespaceSize = typeof whitespaceSize === "string" ? whitespaceSize : whitespaceSize.content;
     return (
         <CarbonAccordionItem
             className={
@@ -51,6 +67,13 @@ export const AccordionItem = ({
                 (className ? " " + className : "") +
                 (fullWidth ? ` ${eccgui}-accordion__item--fullwidth` : "") +
                 (elevated ? ` ${eccgui}-accordion__item--elevated` : "") +
+                (headerWhitespaceSize !== "medium"
+                    ? ` ${eccgui}-accordion__item--headerspace-${headerWhitespaceSize}`
+                    : "") +
+                (contentWhitespaceSize !== "medium"
+                    ? ` ${eccgui}-accordion__item--contentspace-${contentWhitespaceSize}`
+                    : "") +
+                (separationSize !== "none" ? ` ${eccgui}-accordion__item--separationspace-${separationSize}` : "") +
                 (condensed ? ` ${eccgui}-accordion__item--condensed` : "") +
                 (noBorder ? ` ${eccgui}-accordion__item--noborder` : "")
             }

package/src/components/Accordion/Stories/Accordion.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { Accordion, AccordionItem } from "../../../../index";
 import { Default as AccordionStoryItem } from "../Stories/AccordionItem.stories";
@@ -13,14 +13,22 @@ export default {
             control: "none",
             description: "Elements to include into the Accordion component",
         },
+        whitespaceSize: {
+            control: "select",
+            options: ["none", "small", "medium", "large"],
+        },
+        separationSize: {
+            control: "select",
+            options: ["none", "small", "medium", "large"],
+        },
     },
-} as ComponentMeta<typeof Accordion>;
+} as Meta<typeof Accordion>;
 
-const TemplateIcons: ComponentStory<typeof Accordion> = (args) => <Accordion {...args} />;
+const TemplateIcons: StoryFn<typeof Accordion> = (args) => <Accordion {...args} />;
 export const Default = TemplateIcons.bind({});
 Default.args = {
     children: [
-        <AccordionItem {...AccordionStoryItem.args} label="Accordion item 1" />,
+        <AccordionItem {...AccordionStoryItem.args} label="Accordion item 1" fullWidth />,
         <AccordionItem {...AccordionStoryItem.args} label="Accordion item 2 (elevated)" elevated />,
         <AccordionItem {...AccordionStoryItem.args} label="Accordion item 3 (initially opened)" open />,
         <AccordionItem {...AccordionStoryItem.args} label="Accordion item 4 (disabled)" disabled />,

package/src/components/Accordion/Stories/AccordionItem.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 { Accordion, AccordionItem, HtmlContentBlock } from "../../../../index";
 
@@ -12,10 +12,18 @@ export default {
             control: "none",
             description: "content of accordion item",
         },
+        whitespaceSize: {
+            control: "select",
+            options: ["none", "small", "medium", "large"],
+        },
+        separationSize: {
+            control: "select",
+            options: ["none", "small", "medium", "large"],
+        },
     },
-} as ComponentMeta<typeof AccordionItem>;
+} as Meta<typeof AccordionItem>;
 
-const Template: ComponentStory<typeof AccordionItem> = (args) => (
+const Template: StoryFn<typeof AccordionItem> = (args) => (
     <Accordion>
         <AccordionItem {...args} />
     </Accordion>

package/src/components/Accordion/accordion.scss

@@ -1,21 +1,85 @@
 // lib import
+@use "sass:color";
 @use "~@carbon/styles/scss/components/accordion/accordion";
 @include accordion.accordion;
 
 // own vars
 $eccgui-color-accordion-background-elevated: rgba($eccgui-color-accent, 0.1) !default;
 $eccgui-color-accordion-toggler-hover: $menu-item-color-hover !default;
-$eccgui-color-accordion-toggler-elevated-hover: mix(
+$eccgui-color-accordion-toggler-elevated-hover: color.mix(
     $eccgui-color-accordion-background-elevated,
     $eccgui-color-accordion-toggler-hover,
     50%
 ) !default;
+$eccgui-size-accordion-header-baseheight: mini-units(5) !default;
+$eccgui-size-accordion-content-basespace: $eccgui-size-block-whitespace * 0.5 !default;
+$eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default;
 
 // changes
 
+.#{$prefix}--accordion {
+    --#{$eccgui}-accordion-header-height: #{$eccgui-size-accordion-header-baseheight};
+    --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-accordion-content-basespace};
+    --#{$eccgui}-accordion-separation: 0;
+}
+.#{$eccgui}-accordion__item--condensed,
+.#{$eccgui}-accordion__container--global-headerspace-none,
+.#{$eccgui}-accordion__item--headerspace-none {
+    --#{$eccgui}-accordion-header-height: 0;
+}
+.#{$eccgui}-accordion__item--condensed,
+.#{$eccgui}-accordion__container--global-contentspace-none,
+.#{$eccgui}-accordion__item--contentspace-none {
+    --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-block-whitespace * 0.25};
+}
+.#{$eccgui}-accordion__container--global-headerspace-small,
+.#{$eccgui}-accordion__item--headerspace-small {
+    --#{$eccgui}-accordion-header-height: calc(
+        #{$eccgui-size-accordion-header-baseheight} - #{$eccgui-size-block-whitespace * 0.5}
+    );
+}
+.#{$eccgui}-accordion__container--global-contentspace-small,
+.#{$eccgui}-accordion__item--contentspace-small {
+    --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-accordion-content-basespace * 0.5};
+}
+.#{$eccgui}-accordion__container--global-headerspace-large,
+.#{$eccgui}-accordion__item--headerspace-large {
+    --#{$eccgui}-accordion-header-height: calc(
+        #{$eccgui-size-accordion-header-baseheight} + #{$eccgui-size-block-whitespace * 0.5}
+    );
+}
+.#{$eccgui}-accordion__container--global-contentspace-large,
+.#{$eccgui}-accordion__item--contentspace-large {
+    --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-accordion-content-basespace * 1.5};
+}
+
+.#{$eccgui}-accordion__container--global-separationspace-small,
+.#{$eccgui}-accordion__item--separationspace-small {
+    --#{$eccgui}-accordion-separation: #{$eccgui-size-accordion-separation * 0.5};
+}
+.#{$eccgui}-accordion__container--global-separationspace-medium,
+.#{$eccgui}-accordion__item--separationspace-medium {
+    --#{$eccgui}-accordion-separation: #{$eccgui-size-accordion-separation};
+}
+.#{$eccgui}-accordion__container--global-separationspace-large,
+.#{$eccgui}-accordion__item--separationspace-large {
+    --#{$eccgui}-accordion-separation: #{$eccgui-size-accordion-separation * 1.5};
+}
+
+.#{$eccgui}-accordion__item {
+    &:not(:last-child) {
+        margin-bottom: var(--#{$eccgui}-accordion-separation);
+    }
+
+    [class*="#{$eccgui}-accordion__container--global-separationspace-"] &:not(.#{$eccgui}-accordion__item--noborder),
+    &[class*="#{$eccgui}-accordion__item--separationspace-"]:not(.#{$eccgui}-accordion__item--noborder) {
+        border-bottom: 1px solid var(--#{$prefix}-border-subtle);
+    }
+}
+
 .#{$prefix}--accordion__heading {
     align-items: center;
-    min-height: mini-units(5);
+    min-height: var(--#{$eccgui}-accordion-header-height, mini-units(5));
     color: inherit;
 
     .#{$prefix}--accordion__arrow {
@@ -25,6 +89,23 @@ $eccgui-color-accordion-toggler-elevated-hover: mix(
             margin: 0 0 0 $eccgui-size-block-whitespace * 0.5;
         }
     }
+
+    .#{$eccgui}-accordion__item--condensed &,
+    .#{$eccgui}-accordion__container--global-contentspace-none &,
+    .#{$eccgui}-accordion__item--contentspace-none & {
+        .#{$prefix}--accordion__arrow {
+            margin: 0;
+        }
+
+        .#{$prefix}--accordion__title {
+            margin: 0 0 0 $eccgui-size-block-whitespace * 0.25;
+        }
+    }
+
+    &:hover::before,
+    &:focus::before {
+        background-color: $eccgui-color-accordion-toggler-hover;
+    }
 }
 
 .#{$prefix}--accordion__title {
@@ -43,15 +124,15 @@ $eccgui-color-accordion-toggler-elevated-hover: mix(
     position: fixed;
     left: -5000em;
     display: block;
-    padding: $eccgui-size-block-whitespace * 0.5;
+    padding: 0 $eccgui-size-block-whitespace * 0.5;
     margin: 0 calc(1rem + #{$eccgui-size-block-whitespace * 0.5}) 0 $eccgui-size-block-whitespace * 0.5;
     opacity: 0;
 
     .#{$prefix}--accordion__item--active & {
         position: static;
         left: auto;
-        padding: $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace
-            $eccgui-size-block-whitespace * 0.5;
+        padding: calc(0.75 * var(--#{$eccgui}-accordion-content-whitespace)) $eccgui-size-block-whitespace * 0.5
+            calc(1.25 * var(--#{$eccgui}-accordion-content-whitespace)) $eccgui-size-block-whitespace * 0.5;
         opacity: 1;
     }
 
@@ -63,6 +144,23 @@ $eccgui-color-accordion-toggler-elevated-hover: mix(
         margin: 0;
     }
 
+    .#{$eccgui}-accordion__item--condensed &,
+    .#{$eccgui}-accordion__container--global-contentspace-none &,
+    .#{$eccgui}-accordion__item--contentspace-none & {
+        padding-right: 0;
+        padding-left: 0;
+    }
+
+    .#{$eccgui}-accordion__item--condensed:not(.#{$eccgui}-accordion__item--fullwidth) &,
+    .#{$prefix}--accordion--start.#{$eccgui}-accordion__container--global-contentspace-none
+        :not(.#{$eccgui}-accordion__item--fullwidth)
+        &,
+    .#{$prefix}--accordion--start
+        .#{$eccgui}-accordion__item--contentspace-none:not(.#{$eccgui}-accordion__item--fullwidth)
+        & {
+        margin-left: calc(1rem + #{$eccgui-size-block-whitespace * 0.25});
+    }
+
     *,
     *::before,
     *::after {
@@ -70,13 +168,6 @@ $eccgui-color-accordion-toggler-elevated-hover: mix(
     }
 }
 
-.#{$prefix}--accordion__heading {
-    &:hover::before,
-    &:focus::before {
-        background-color: $eccgui-color-accordion-toggler-hover;
-    }
-}
-
 .#{$eccgui}-accordion__item--elevated {
     background-color: $eccgui-color-accordion-background-elevated;
 
@@ -95,35 +186,3 @@ $eccgui-color-accordion-toggler-elevated-hover: mix(
         border-bottom: none;
     }
 }
-
-.#{$eccgui}-accordion__item--condensed {
-    .#{$prefix}--accordion__heading {
-        min-height: 0;
-        padding: 0;
-        line-height: 1em;
-
-        .#{$prefix}--accordion__arrow {
-            margin: 0;
-
-            .#{$prefix}--accordion--start & {
-                margin: 0;
-            }
-        }
-
-        .#{$prefix}--accordion__title {
-            margin: 0 0 0 $eccgui-size-block-whitespace * 0.25;
-
-            .#{$prefix}--accordion--start & {
-                margin: 0 0 0 $eccgui-size-block-whitespace * 0.25;
-            }
-        }
-    }
-
-    .#{$prefix}--accordion__content {
-        padding: $eccgui-size-block-whitespace * 0.25 0;
-
-        .#{$prefix}--accordion__item--active & {
-            padding: $eccgui-size-block-whitespace * 0.25 0;
-        }
-    }
-}

package/src/components/Application/ApplicationContainer.tsx

@@ -3,12 +3,28 @@ import { OverlaysProvider } from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type ApplicationContainerProps = React.HTMLAttributes<HTMLDivElement>;
+import { useDropzoneMonitor } from "./helper";
+
+export interface ApplicationContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * If set then the `element` is extended automatically by a `monitor-dropzone` data attribute.
+     * This need to match with a `dropzone-for` data attribute on available dropzones for dragged elements.
+     */
+    monitorDropzonesFor?: string[];
+}
+
+export const ApplicationContainer = ({
+    children,
+    className = "",
+    monitorDropzonesFor = [],
+    ...otherDivProps
+}: ApplicationContainerProps) => {
+    const containerRef = React.useRef<any>(null);
+    useDropzoneMonitor(monitorDropzonesFor);
 
-export const ApplicationContainer = ({ children, className = "", ...otherDivProps }: ApplicationContainerProps) => {
     return (
         <OverlaysProvider>
-            <div className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
+            <div ref={containerRef} className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
                 {children}
             </div>
         </OverlaysProvider>

package/src/components/Application/_dropzone.scss

@@ -0,0 +1,36 @@
+[data-dropzone-for] {
+    transition: box-shadow 500ms;
+}
+
+body[data-monitor-dropzone] {
+    & > * {
+        pointer-events: none;
+    }
+    .#{$eccgui}-application__container,
+    .#{$eccgui}-dialog__portal {
+        *:not([data-dropzone-for], .uppy-DragDrop--isDragDropSupported) {
+            pointer-events: none;
+        }
+    }
+}
+
+body[data-monitor-dropzone~="application/reactflow"] [data-dropzone-for~="application/reactflow"],
+body[data-monitor-dropzone~="Files"] [data-dropzone-for~="Files"],
+body[data-monitor-dropzone~="Files"] .uppy-DragDrop--isDragDropSupported {
+    pointer-events: all !important;
+    box-shadow: 0 0 $eccgui-size-inline-whitespace $eccgui-color-accent inset;
+
+    & > * {
+        pointer-events: all;
+        opacity: $eccgui-opacity-regular;
+    }
+}
+
+body[data-monitor-dropzone]:has(.#{$eccgui}-dialog__portal > .#{$ns}-overlay-open) {
+    & > *:not(.#{$eccgui}-dialog__portal) {
+        &,
+        & * {
+            pointer-events: none !important;
+        }
+    }
+}

package/src/components/Application/application.scss

@@ -8,3 +8,4 @@
 
 // @import '~@carbon/styles/scss/components/ui-shell/navigation-menu';
 @import "content";
+@import "dropzone";

package/src/components/Application/helper.ts

@@ -19,3 +19,42 @@ export const useApplicationHeaderOverModals = (elevate: boolean, className: stri
         }
     }, [elevate, className]);
 };
+
+/**
+ * Tracks drag operations over the application.
+ * Sets different data attributes to the body element.
+ * They can be used to apply styling rules.
+ */
+export const useDropzoneMonitor = (enabledTypes: string[]) => {
+    React.useEffect(() => {
+        const monitor = window.document.body;
+
+        const addMonitor = (event: DragEvent) => {
+            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();
+        };
+
+        const removeMonitor = (event: DragEvent) => {
+            if (event.type === "drop" || monitor === event.target) {
+                delete monitor.dataset.monitorDropzone;
+                event.preventDefault();
+            }
+        };
+
+        if (monitor) {
+            monitor.addEventListener("dragover", addMonitor);
+            monitor.addEventListener("dragleave", removeMonitor);
+            monitor.addEventListener("drop", removeMonitor);
+            return () => {
+                monitor.removeEventListener("dragover", addMonitor);
+                monitor.removeEventListener("dragleave", removeMonitor);
+                monitor.removeEventListener("drop", removeMonitor);
+            };
+        }
+        return;
+    }, []);
+};

package/src/configuration/_variables.scss

@@ -72,6 +72,7 @@ $eccgui-opacity-regular: 1 !default;
 $eccgui-opacity-narrow: 0.8 !default;
 $eccgui-opacity-muted: 0.61 !default;
 $eccgui-opacity-disabled: 0.39 !default;
+$eccgui-opacity-ghostly: 0.2 !default;
 $eccgui-opacity-invisible: 0 !default;
 
 // -- Configuration stack of z-indexes -----------------------------------------

package/src/extensions/_index.scss

@@ -5,3 +5,5 @@ CodeMirror styles are already included by the base component styles
 because it is used as lib for elements there already. 
 @import "./codemirror/codemirror";
 */
+
+@import "./uppy/fileupload";