From 9a977b4723b41aacd333fde94b7cb28aefbab200 Mon Sep 17 00:00:00 2001
From: darausi <daniel.arausi@eccenca.com>
Date: Tue, 9 Jul 2024 13:07:06 +0100
Subject: [PATCH 01/23] ignore negative time lapse

---
 src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx b/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx
index b198c84c0..c9e7885bc 100644
--- a/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx
+++ b/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx
@@ -22,7 +22,8 @@ export interface ElapsedDateTimeDisplayProps extends TestableComponent {
 
 const dateTimeToElapsedTimeInMs = (dateTime: string | number) => {
     const absoluteMs = typeof dateTime === "number" ? dateTime : new Date(dateTime).getTime();
-    return new Date().getTime() - absoluteMs;
+    const elapsed = new Date().getTime() - absoluteMs;
+    return elapsed < 0 ? 0 : elapsed;
 };
 
 /**

From eff2d4c068b9621390a63e2ddd72e63cb4e183e1 Mon Sep 17 00:00:00 2001
From: Andreas Schultz <a.schultz@fu-berlin.de>
Date: Mon, 29 Jul 2024 12:31:36 +0200
Subject: [PATCH 02/23] Generate class attached to body element based on the
 data transfer type of drag over events

---
 .../Application/ApplicationContainer.tsx      |  6 ++-
 src/components/Application/helper.ts          | 48 ++++++++++++++++++-
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/src/components/Application/ApplicationContainer.tsx b/src/components/Application/ApplicationContainer.tsx
index 7292c1376..cc8f96d60 100644
--- a/src/components/Application/ApplicationContainer.tsx
+++ b/src/components/Application/ApplicationContainer.tsx
@@ -2,13 +2,17 @@ import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {useGlobalAppDragMonitor} from "./helper";
 
 export type ApplicationContainerProps = React.HTMLAttributes<HTMLDivElement>;
+export const APPLICATION_CONTAINER_ID = "gui-elements-application-container"
 
 export const ApplicationContainer = ({ children, className = "", ...otherDivProps }: ApplicationContainerProps) => {
+    useGlobalAppDragMonitor()
+
     return (
         <OverlaysProvider>
-            <div className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
+            <div id={APPLICATION_CONTAINER_ID} className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
                 {children}
             </div>
         </OverlaysProvider>
diff --git a/src/components/Application/helper.ts b/src/components/Application/helper.ts
index 64222f8a0..0b2c7ddb2 100644
--- a/src/components/Application/helper.ts
+++ b/src/components/Application/helper.ts
@@ -1,6 +1,7 @@
 import React from "react";
 
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+import {APPLICATION_CONTAINER_ID} from "./ApplicationContainer";
 
 export const useApplicationHeaderOverModals = (elevate: boolean, className: string) => {
     return React.useEffect(() => {
@@ -19,3 +20,48 @@ export const useApplicationHeaderOverModals = (elevate: boolean, className: stri
         }
     }, [elevate, className]);
 };
+
+// Prefix of the generated class. This will be combined with the data transfer type.
+const APP_DRAG_OVER_CLASS_PREFIX = "appDragOver";
+const nonClassChars = /[^-_a-zA-Z0-9]/g;
+const DRAG_CLASS_REMOVAL_DELAY = 500
+
+/** Tracks drag operations over the application. Sets different classes to the root div. */
+export const useGlobalAppDragMonitor = () => {
+    React.useEffect(() => {
+        const applicationContainer = document.getElementById(APPLICATION_CONTAINER_ID);
+        const body = document.getElementsByTagName("body").item(0)
+        let currentTimer: any = undefined;
+        let currentClass: string | undefined = undefined;
+
+        const removeDragClass = () => {
+            currentClass && body?.classList.remove(currentClass);
+            currentClass = undefined;
+        };
+
+        const onDragOver = (event: DragEvent) => {
+            if (currentTimer) {
+                clearTimeout(currentTimer);
+            }
+            const types = new Set(event.dataTransfer?.types);
+            if (types.size === 1) {
+                const type = types.values().next().value;
+                currentClass = `${APP_DRAG_OVER_CLASS_PREFIX}_${type}`.replaceAll(nonClassChars, "");
+                body?.classList.add(currentClass);
+                currentTimer = setTimeout(removeDragClass, DRAG_CLASS_REMOVAL_DELAY);
+            }
+        };
+
+        const onDrop = () => {
+            if (currentTimer) {
+                clearTimeout(currentTimer);
+            }
+            removeDragClass();
+        };
+
+        if (applicationContainer) {
+            applicationContainer.addEventListener("dragover", onDragOver);
+            applicationContainer.addEventListener("drop", onDrop);
+        }
+    }, []);
+};

From 0ccc19767ba515f93c1ce55f5855ce17e0c03beb Mon Sep 17 00:00:00 2001
From: Andreas Schultz <a.schultz@fu-berlin.de>
Date: Mon, 29 Jul 2024 12:33:30 +0200
Subject: [PATCH 03/23] Add changelog entry

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e976c5088..879565d55 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   `intent` property to set the state, formerly used `hasStatePrimary`, `hasStateSuccess`, `hasStateWarning` and `hasStateDanger` properties are now deprecated
     -   `leftIcon`: set the left aligned icon
     -   `rightElement`: renders on right side
+-   `<ApplicationContainer />`:
+    -   Track application wide drag over events via generated class attached to body element. The class name is based on the data transfer type of drag over events.
 
 ### Fixed
 

From 694f05e2a08ab22c12e8d1619a6e862968c929b2 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 29 Jul 2024 17:18:28 +0200
Subject: [PATCH 04/23] reduce whitespace around icon button contained directly
 in textarea options

---
 src/components/TextField/TextArea.tsx   |  2 +-
 src/components/TextField/textfield.scss | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/TextField/TextArea.tsx b/src/components/TextField/TextArea.tsx
index f8514a3df..01ae7103b 100644
--- a/src/components/TextField/TextArea.tsx
+++ b/src/components/TextField/TextArea.tsx
@@ -116,7 +116,7 @@ export const TextArea = ({
                     );
                     leftIconElement.addEventListener("click", (_event: MouseEvent) => {
                         textAreaElement.focus();
-                    }); //onclick((_event: MouseEvent) => {textAreaElement.dispatchEvent("click")})
+                    });
                 }
 
                 if (rightElement && wrapperElement) {
diff --git a/src/components/TextField/textfield.scss b/src/components/TextField/textfield.scss
index e25e3d25f..9b2c23f03 100644
--- a/src/components/TextField/textfield.scss
+++ b/src/components/TextField/textfield.scss
@@ -184,6 +184,21 @@ $eccgui-map-intent-bgcolors: (
     position: absolute;
     top: 0;
     right: 0;
+
+    & > .#{$eccgui}-button--icon {
+        margin-top: -1 * $eccgui-size-textfield-padding-horizontal-regular;
+
+        &:last-of-type {
+            margin-right: -1 * $eccgui-size-textfield-padding-horizontal-regular;
+        }
+    }
+}
+.#{$ns}-input.#{$ns}-small ~ .#{$eccgui}-textarea__options > .#{$eccgui}-button--icon {
+    margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
+
+    &:last-of-type {
+        margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
+    }
 }
 
 .#{$eccgui}-textfield--justifyclearance {

From 04c534357368025bd729ca2344982a57436ea37b Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 29 Jul 2024 17:40:37 +0200
Subject: [PATCH 05/23] use colors on textarea options only for hover and focus

---
 .../TextField/stories/TextArea.stories.tsx      |  7 ++++++-
 src/components/TextField/textfield.scss         | 17 ++++++++++++-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/TextField/stories/TextArea.stories.tsx b/src/components/TextField/stories/TextArea.stories.tsx
index 708d0799e..24bfd90ad 100644
--- a/src/components/TextField/stories/TextArea.stories.tsx
+++ b/src/components/TextField/stories/TextArea.stories.tsx
@@ -25,7 +25,12 @@ export default {
                 ),
                 "2 Icon buttons": (
                     <>
-                        <IconButton name={"item-comment"} onClick={() => alert("1 clicked")} text="Button 1" />
+                        <IconButton
+                            name={"item-comment"}
+                            onClick={() => alert("1 clicked")}
+                            text="Button 1"
+                            affirmative
+                        />
                         <IconButton name={"item-edit"} onClick={() => alert("2 clicked")} text="Button 2" />
                     </>
                 ),
diff --git a/src/components/TextField/textfield.scss b/src/components/TextField/textfield.scss
index 9b2c23f03..bd73d22f8 100644
--- a/src/components/TextField/textfield.scss
+++ b/src/components/TextField/textfield.scss
@@ -184,6 +184,12 @@ $eccgui-map-intent-bgcolors: (
     position: absolute;
     top: 0;
     right: 0;
+    filter: grayscale(1);
+
+    &:hover,
+    .#{$eccgui}-textarea:focus ~ & {
+        filter: none;
+    }
 
     & > .#{$eccgui}-button--icon {
         margin-top: -1 * $eccgui-size-textfield-padding-horizontal-regular;
@@ -192,12 +198,13 @@ $eccgui-map-intent-bgcolors: (
             margin-right: -1 * $eccgui-size-textfield-padding-horizontal-regular;
         }
     }
-}
-.#{$ns}-input.#{$ns}-small ~ .#{$eccgui}-textarea__options > .#{$eccgui}-button--icon {
-    margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
 
-    &:last-of-type {
-        margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
+    .#{$ns}-input.#{$ns}-small ~ & > .#{$eccgui}-button--icon {
+        margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
+
+        &:last-of-type {
+            margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
+        }
     }
 }
 

From a45eb1caeb806fe7d5b54f2ad2530a4aa2a7f1e6 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 29 Jul 2024 17:43:29 +0200
Subject: [PATCH 06/23] update changelog

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 518f02481..52fa62515 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Fixed
+
+-   `<TextArea />`
+    -   improve visual alignment to `TextField` regarding whitespace and colors
+
 ## [23.7.0] - 2024-06-26
 
 ### Added

From 6e2bee1daf3cf11646c22f50068d0a12f9acaa0a Mon Sep 17 00:00:00 2001
From: haschek <haschek@users.noreply.github.com>
Date: Wed, 31 Jul 2024 07:54:54 +0000
Subject: [PATCH 07/23] Prepare release v23.8.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e3979afe3..6f3921827 100644
--- a/package.json
+++ b/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.7.0",
+    "version": "23.8.0-rc.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

From b25500600a6b760f7a8502ca54f6876c37349835 Mon Sep 17 00:00:00 2001
From: haschek <haschek@users.noreply.github.com>
Date: Wed, 31 Jul 2024 09:18:17 +0000
Subject: [PATCH 08/23] Bump release version to next release candidate
 23.8.0-rc.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6f3921827..fcb7ed8ce 100644
--- a/package.json
+++ b/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",

From e19f8bfa3d60584ff2e928c48e9889d45c9d312b Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 31 Jul 2024 11:34:51 +0200
Subject: [PATCH 09/23] update changelog regarding pull request #178

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 52fa62515..ed7d839a9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Fixed
 
+-   `<ElapsedDateTimeDisplay />`
+    -   negative values are not shown (e.g. in case server and browser clocks are apart)
 -   `<TextArea />`
     -   improve visual alignment to `TextField` regarding whitespace and colors
 

From e4f224b09cd20c6d2ecf2317a2c8fe952360128d Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 31 Jul 2024 14:57:45 +0200
Subject: [PATCH 10/23] provide dropzone monitoring for drag and drop
 operations, and use it for react flow canvas

---
 src/cmem/react-flow/ReactFlow/ReactFlow.tsx   | 42 +++++++++++++-
 src/cmem/react-flow/_canvas.scss              | 15 +++++
 src/cmem/react-flow/_index.scss               |  1 +
 .../Application/ApplicationContainer.tsx      |  9 +--
 src/components/Application/_dropzone.scss     | 19 +++++++
 src/components/Application/application.scss   |  1 +
 src/components/Application/helper.ts          | 57 ++++++++-----------
 7 files changed, 104 insertions(+), 40 deletions(-)
 create mode 100644 src/cmem/react-flow/_canvas.scss
 create mode 100644 src/components/Application/_dropzone.scss

diff --git a/src/cmem/react-flow/ReactFlow/ReactFlow.tsx b/src/cmem/react-flow/ReactFlow/ReactFlow.tsx
index f2b92f417..01aa61cd4 100644
--- a/src/cmem/react-flow/ReactFlow/ReactFlow.tsx
+++ b/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)}
diff --git a/src/cmem/react-flow/_canvas.scss b/src/cmem/react-flow/_canvas.scss
new file mode 100644
index 000000000..3d364b78e
--- /dev/null
+++ b/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-disabled);
+        box-shadow: 0 0 $eccgui-size-block-whitespace $eccgui-color-accent inset;
+
+        & > * {
+            opacity: $eccgui-opacity-muted;
+        }
+
+        .react-flow__node {
+            pointer-events: none !important;
+        }
+    }
+}
diff --git a/src/cmem/react-flow/_index.scss b/src/cmem/react-flow/_index.scss
index add982b89..5b598acda 100644
--- a/src/cmem/react-flow/_index.scss
+++ b/src/cmem/react-flow/_index.scss
@@ -1,4 +1,5 @@
 @import "./configuration/colors";
+@import "canvas";
 @import "edges";
 @import "handles";
 @import "minimap";
diff --git a/src/components/Application/ApplicationContainer.tsx b/src/components/Application/ApplicationContainer.tsx
index cc8f96d60..33efe8128 100644
--- a/src/components/Application/ApplicationContainer.tsx
+++ b/src/components/Application/ApplicationContainer.tsx
@@ -2,17 +2,18 @@ import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import {useGlobalAppDragMonitor} from "./helper";
+
+import { useDropzoneMonitor } from "./helper";
 
 export type ApplicationContainerProps = React.HTMLAttributes<HTMLDivElement>;
-export const APPLICATION_CONTAINER_ID = "gui-elements-application-container"
 
 export const ApplicationContainer = ({ children, className = "", ...otherDivProps }: ApplicationContainerProps) => {
-    useGlobalAppDragMonitor()
+    const containerRef = React.useRef<any>(null);
+    useDropzoneMonitor(containerRef);
 
     return (
         <OverlaysProvider>
-            <div id={APPLICATION_CONTAINER_ID} className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
+            <div ref={containerRef} className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
                 {children}
             </div>
         </OverlaysProvider>
diff --git a/src/components/Application/_dropzone.scss b/src/components/Application/_dropzone.scss
new file mode 100644
index 000000000..426fb12cb
--- /dev/null
+++ b/src/components/Application/_dropzone.scss
@@ -0,0 +1,19 @@
+[data-dropzone-for] {
+    transition: box-shadow 500ms;
+}
+
+body[data-monitor-dropzone~="application/reactflow"] [data-dropzone-for~="application/reactflow"],
+body[data-monitor-dropzone~="Files"] [data-dropzone-for~="Files"] {
+    pointer-events: all !important;
+    box-shadow: 0 0 $eccgui-size-inline-whitespace $eccgui-color-accent inset;
+
+    & > * {
+        pointer-events: all;
+        opacity: $eccgui-opacity-narrow;
+    }
+}
+
+body[data-monitor-dropzone~="application/reactflow"] .eccgui-application__container *,
+body[data-monitor-dropzone~="Files"] .eccgui-application__container * {
+    pointer-events: none;
+}
diff --git a/src/components/Application/application.scss b/src/components/Application/application.scss
index 257d2f55e..e98c18f85 100644
--- a/src/components/Application/application.scss
+++ b/src/components/Application/application.scss
@@ -8,3 +8,4 @@
 
 // @import '~@carbon/styles/scss/components/ui-shell/navigation-menu';
 @import "content";
+@import "dropzone";
diff --git a/src/components/Application/helper.ts b/src/components/Application/helper.ts
index 0b2c7ddb2..79a52c125 100644
--- a/src/components/Application/helper.ts
+++ b/src/components/Application/helper.ts
@@ -1,7 +1,6 @@
 import React from "react";
 
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
-import {APPLICATION_CONTAINER_ID} from "./ApplicationContainer";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export const useApplicationHeaderOverModals = (elevate: boolean, className: string) => {
     return React.useEffect(() => {
@@ -21,47 +20,37 @@ export const useApplicationHeaderOverModals = (elevate: boolean, className: stri
     }, [elevate, className]);
 };
 
-// Prefix of the generated class. This will be combined with the data transfer type.
-const APP_DRAG_OVER_CLASS_PREFIX = "appDragOver";
-const nonClassChars = /[^-_a-zA-Z0-9]/g;
-const DRAG_CLASS_REMOVAL_DELAY = 500
-
 /** Tracks drag operations over the application. Sets different classes to the root div. */
-export const useGlobalAppDragMonitor = () => {
+export const useDropzoneMonitor = (ref: React.MutableRefObject<any>) => {
     React.useEffect(() => {
-        const applicationContainer = document.getElementById(APPLICATION_CONTAINER_ID);
-        const body = document.getElementsByTagName("body").item(0)
-        let currentTimer: any = undefined;
-        let currentClass: string | undefined = undefined;
-
-        const removeDragClass = () => {
-            currentClass && body?.classList.remove(currentClass);
-            currentClass = undefined;
-        };
+        const elementContainer = ref.current;
+        const monitor = window.document.body;
 
-        const onDragOver = (event: DragEvent) => {
-            if (currentTimer) {
-                clearTimeout(currentTimer);
-            }
-            const types = new Set(event.dataTransfer?.types);
-            if (types.size === 1) {
-                const type = types.values().next().value;
-                currentClass = `${APP_DRAG_OVER_CLASS_PREFIX}_${type}`.replaceAll(nonClassChars, "");
-                body?.classList.add(currentClass);
-                currentTimer = setTimeout(removeDragClass, DRAG_CLASS_REMOVAL_DELAY);
+        const addMonitor = (event: DragEvent) => {
+            const types = event.dataTransfer?.types || [];
+            if (types.length > 0 && !monitor.dataset.monitorDropzone) {
+                monitor.dataset.monitorDropzone = types.join(" ");
             }
+            event.preventDefault();
         };
 
-        const onDrop = () => {
-            if (currentTimer) {
-                clearTimeout(currentTimer);
+        const removeMonitor = (event: DragEvent) => {
+            if (event.type === "drop" || elementContainer === event.target) {
+                delete monitor.dataset.monitorDropzone;
+                event.preventDefault();
             }
-            removeDragClass();
         };
 
-        if (applicationContainer) {
-            applicationContainer.addEventListener("dragover", onDragOver);
-            applicationContainer.addEventListener("drop", onDrop);
+        if (elementContainer) {
+            elementContainer.addEventListener("dragover", addMonitor);
+            elementContainer.addEventListener("dragleave", removeMonitor);
+            elementContainer.addEventListener("drop", removeMonitor);
+            return () => {
+                elementContainer.removeEventListener("dragover", addMonitor);
+                elementContainer.removeEventListener("dragleave", removeMonitor);
+                elementContainer.removeEventListener("drop", removeMonitor);
+            };
         }
+        return;
     }, []);
 };

From e6bb13937490fc0cfcb2099f268ea1be2281ed20 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 31 Jul 2024 17:54:51 +0200
Subject: [PATCH 11/23] move uppy styles to own component folder and add rules
 for the DnD dropzones

---
 src/_shame.scss                           | 27 -----------------
 src/components/Application/_dropzone.scss | 25 +++++++++++++---
 src/components/Application/helper.ts      | 22 ++++++++------
 src/extensions/_index.scss                |  2 ++
 src/extensions/uppy/_fileupload.scss      | 36 +++++++++++++++++++++++
 5 files changed, 72 insertions(+), 40 deletions(-)
 create mode 100644 src/extensions/uppy/_fileupload.scss

diff --git a/src/_shame.scss b/src/_shame.scss
index 6e1fb7315..e808a65f0 100644
--- a/src/_shame.scss
+++ b/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
 */
diff --git a/src/components/Application/_dropzone.scss b/src/components/Application/_dropzone.scss
index 426fb12cb..396698823 100644
--- a/src/components/Application/_dropzone.scss
+++ b/src/components/Application/_dropzone.scss
@@ -2,8 +2,21 @@
     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"] [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;
 
@@ -13,7 +26,11 @@ body[data-monitor-dropzone~="Files"] [data-dropzone-for~="Files"] {
     }
 }
 
-body[data-monitor-dropzone~="application/reactflow"] .eccgui-application__container *,
-body[data-monitor-dropzone~="Files"] .eccgui-application__container * {
-    pointer-events: none;
+body[data-monitor-dropzone]:has(.#{$eccgui}-dialog__portal > .#{$ns}-overlay-open) {
+    & > *:not(.#{$eccgui}-dialog__portal) {
+        &,
+        & * {
+            pointer-events: none !important;
+        }
+    }
 }
diff --git a/src/components/Application/helper.ts b/src/components/Application/helper.ts
index 79a52c125..1f5814e25 100644
--- a/src/components/Application/helper.ts
+++ b/src/components/Application/helper.ts
@@ -20,7 +20,11 @@ export const useApplicationHeaderOverModals = (elevate: boolean, className: stri
     }, [elevate, className]);
 };
 
-/** Tracks drag operations over the application. Sets different classes to the root div. */
+/**
+ * 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 = (ref: React.MutableRefObject<any>) => {
     React.useEffect(() => {
         const elementContainer = ref.current;
@@ -35,20 +39,20 @@ export const useDropzoneMonitor = (ref: React.MutableRefObject<any>) => {
         };
 
         const removeMonitor = (event: DragEvent) => {
-            if (event.type === "drop" || elementContainer === event.target) {
+            if (event.type === "drop" || monitor === event.target) {
                 delete monitor.dataset.monitorDropzone;
                 event.preventDefault();
             }
         };
 
-        if (elementContainer) {
-            elementContainer.addEventListener("dragover", addMonitor);
-            elementContainer.addEventListener("dragleave", removeMonitor);
-            elementContainer.addEventListener("drop", removeMonitor);
+        if (monitor) {
+            monitor.addEventListener("dragover", addMonitor);
+            monitor.addEventListener("dragleave", removeMonitor);
+            monitor.addEventListener("drop", removeMonitor);
             return () => {
-                elementContainer.removeEventListener("dragover", addMonitor);
-                elementContainer.removeEventListener("dragleave", removeMonitor);
-                elementContainer.removeEventListener("drop", removeMonitor);
+                monitor.removeEventListener("dragover", addMonitor);
+                monitor.removeEventListener("dragleave", removeMonitor);
+                monitor.removeEventListener("drop", removeMonitor);
             };
         }
         return;
diff --git a/src/extensions/_index.scss b/src/extensions/_index.scss
index be5ab90d6..8f23e9afd 100644
--- a/src/extensions/_index.scss
+++ b/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";
diff --git a/src/extensions/uppy/_fileupload.scss b/src/extensions/uppy/_fileupload.scss
new file mode 100644
index 000000000..e2c2efdef
--- /dev/null
+++ b/src/extensions/uppy/_fileupload.scss
@@ -0,0 +1,36 @@
+/**
+ * TODO: we need to create a own FileUpload component based on Uppy to justify its usage.
+ */
+
+.uppy-DragDrop-container {
+    color: inherit;
+    background-color: $data-table-zebra-color;
+    border-width: 1px;
+    border-radius: 3px;
+    transition: box-shadow 500ms;
+
+    .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;
+    }
+}
+
+.uppy-DragDrop--isDraggingOver.uppy-DragDrop--isDragDropSupported {
+    background-color: rgba($eccgui-color-accent, $eccgui-opacity-disabled);
+    box-shadow: 0 0 $eccgui-size-block-whitespace $eccgui-color-accent inset;
+
+    & > * {
+        opacity: $eccgui-opacity-muted;
+    }
+}

From 748b210cf4d85178c7c5bc7fc43da8b655246428 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 31 Jul 2024 18:00:26 +0200
Subject: [PATCH 12/23] element referer is not necessary anymore, element is
 only the hook to get the listeners added

---
 src/components/Application/ApplicationContainer.tsx | 2 +-
 src/components/Application/helper.ts                | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Application/ApplicationContainer.tsx b/src/components/Application/ApplicationContainer.tsx
index 33efe8128..518c2d7e7 100644
--- a/src/components/Application/ApplicationContainer.tsx
+++ b/src/components/Application/ApplicationContainer.tsx
@@ -9,7 +9,7 @@ export type ApplicationContainerProps = React.HTMLAttributes<HTMLDivElement>;
 
 export const ApplicationContainer = ({ children, className = "", ...otherDivProps }: ApplicationContainerProps) => {
     const containerRef = React.useRef<any>(null);
-    useDropzoneMonitor(containerRef);
+    useDropzoneMonitor();
 
     return (
         <OverlaysProvider>
diff --git a/src/components/Application/helper.ts b/src/components/Application/helper.ts
index 1f5814e25..5e0a76374 100644
--- a/src/components/Application/helper.ts
+++ b/src/components/Application/helper.ts
@@ -25,9 +25,8 @@ export const useApplicationHeaderOverModals = (elevate: boolean, className: stri
  * Sets different data attributes to the body element.
  * They can be used to apply styling rules.
  */
-export const useDropzoneMonitor = (ref: React.MutableRefObject<any>) => {
+export const useDropzoneMonitor = () => {
     React.useEffect(() => {
-        const elementContainer = ref.current;
         const monitor = window.document.body;
 
         const addMonitor = (event: DragEvent) => {

From cfdbdea4e84aa7a9bc5d40957a0abb8167d96c0d Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 1 Aug 2024 10:50:18 +0200
Subject: [PATCH 13/23] use style variables for uppy widget layout

---
 src/extensions/uppy/_fileupload.scss | 29 +++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/extensions/uppy/_fileupload.scss b/src/extensions/uppy/_fileupload.scss
index e2c2efdef..e3d17a72e 100644
--- a/src/extensions/uppy/_fileupload.scss
+++ b/src/extensions/uppy/_fileupload.scss
@@ -2,26 +2,35 @@
  * TODO: we need to create a own FileUpload component based on Uppy to justify its usage.
  */
 
+$eccgui-size-fileupload-border-width: $button-border-width;
+$eccgui-size-fileupload-border-radius: $button-border-radius;
+$eccgui-color-fileupload-border: rgba($black, $pt-drop-shadow-opacity);
+$eccgui-color-fileupload-background: $eccgui-color-accordion-background-elevated;
+$eccgui-color-fileupload-text: inherit;
+
 .uppy-DragDrop-container {
-    color: inherit;
-    background-color: $data-table-zebra-color;
-    border-width: 1px;
-    border-radius: 3px;
+    background-color: $eccgui-color-fileupload-background;
+    border: solid $eccgui-size-fileupload-border-width $eccgui-color-fileupload-border;
+    border-radius: $eccgui-size-fileupload-border-radius;
     transition: box-shadow 500ms;
 
+    * {
+        color: $eccgui-color-fileupload-text;
+    }
+
     .uppy-DragDrop-inner {
-        padding: 1rem;
+        padding: $eccgui-size-block-whitespace;
         line-height: inherit;
     }
 
     .uppy-DragDrop-arrow {
-        width: 2rem;
-        height: 2rem;
-        margin-bottom: 0.5rem;
+        width: 20px; // normal icon size
+        height: 20px;
+        margin-bottom: $eccgui-size-inline-whitespace;
     }
 
     .uppy-DragDrop-label {
-        margin-bottom: 0.5rem;
+        margin-bottom: $eccgui-size-inline-whitespace;
         font-size: inherit;
     }
 }
@@ -31,6 +40,8 @@
     box-shadow: 0 0 $eccgui-size-block-whitespace $eccgui-color-accent inset;
 
     & > * {
+        color: $eccgui-color-accent-contrast;
         opacity: $eccgui-opacity-muted;
+        fill: currentcolor;
     }
 }

From 8a05971c96bd7e4a95d9b908b0d6b50afa3b013c Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 12 Aug 2024 13:01:49 +0200
Subject: [PATCH 14/23] replace size and condesed by whitespaceSize property
 that can be used on Accordion and AccordionItem

---
 CHANGELOG.md                                  |   9 ++
 src/components/Accordion/Accordion.tsx        |  21 +++-
 src/components/Accordion/AccordionItem.tsx    |  17 +++
 .../Accordion/Stories/Accordion.stories.tsx   |  10 +-
 .../Stories/AccordionItem.stories.tsx         |  10 +-
 src/components/Accordion/accordion.scss       | 119 +++++++++++-------
 6 files changed, 135 insertions(+), 51 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 509d1463a..15020f397 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   monitor application wide dropzones for dragged elements via data attributes attached to body element containing the data transfer type of drag over events.
 -   `<ReactFlow />`
     -   `dropzoneFor` property can be used to mark react flow canvas as matching area to drop dragged elements.
+-   `<Accordion />`, `<AccordionItem />`
+    -   `whitespaceSize` property to define how much whitespace is used on top and bottom inside the header and content of an accordion item.
 
 ### Fixed
 
@@ -22,6 +24,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 -   basic styles for Uppy widget were improved and moved to its own component folder
 
+### Deprecated
+
+-   `<Accordion />`
+    -   `size` property in favour of `whitespaceSize`
+-   `<AccordionItem />`
+    -   `condensed` property in favour of `whitespaceSize="none"`
+
 ## [23.7.0] - 2024-06-26
 
 ### Added
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 4ca43596d..2006d0931 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -3,13 +3,20 @@ 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"];
     /**
      * 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 +31,24 @@ export const Accordion = ({
     children,
     className = "",
     align = "start",
+    whitespaceSize = "medium",
     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}`
+                    : "") +
+                (className ? ` ${className}` : "")
+            }
             align={align}
             size={carbonAccordionSizeMapping[size]}
             {...otherProps}
diff --git a/src/components/Accordion/AccordionItem.tsx b/src/components/Accordion/AccordionItem.tsx
index a20ee31d0..9057c2710 100644
--- a/src/components/Accordion/AccordionItem.tsx
+++ b/src/components/Accordion/AccordionItem.tsx
@@ -6,6 +6,8 @@ import {
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+type whitespaceSizeOptions = "none" | "small" | "medium" | "large";
+
 export interface AccordionItemProps
     extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando"> {
     /**
@@ -20,8 +22,14 @@ 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?: whitespaceSizeOptions | { header: whitespaceSizeOptions; content: whitespaceSizeOptions };
     /**
      * minimize white space and paddings
+     * @deprecated Use `whitespaceSize="none"` on `Accordion` or `AccordionItem` instead.
      */
     condensed?: boolean;
     /**
@@ -40,10 +48,13 @@ export const AccordionItem = ({
     className = "",
     fullWidth = false,
     elevated = false,
+    whitespaceSize = "medium",
     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 +62,12 @@ 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}`
+                    : "") +
                 (condensed ? ` ${eccgui}-accordion__item--condensed` : "") +
                 (noBorder ? ` ${eccgui}-accordion__item--noborder` : "")
             }
diff --git a/src/components/Accordion/Stories/Accordion.stories.tsx b/src/components/Accordion/Stories/Accordion.stories.tsx
index 2faceed48..0f7f69743 100644
--- a/src/components/Accordion/Stories/Accordion.stories.tsx
+++ b/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,10 +13,14 @@ export default {
             control: "none",
             description: "Elements to include into the Accordion component",
         },
+        whitespaceSize: {
+            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: [
diff --git a/src/components/Accordion/Stories/AccordionItem.stories.tsx b/src/components/Accordion/Stories/AccordionItem.stories.tsx
index d6b328056..d53603d42 100644
--- a/src/components/Accordion/Stories/AccordionItem.stories.tsx
+++ b/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,14 @@ export default {
             control: "none",
             description: "content of accordion item",
         },
+        whitespaceSize: {
+            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>
diff --git a/src/components/Accordion/accordion.scss b/src/components/Accordion/accordion.scss
index 26814570f..868de8e74 100644
--- a/src/components/Accordion/accordion.scss
+++ b/src/components/Accordion/accordion.scss
@@ -1,21 +1,59 @@
 // 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;
 
 // changes
 
+.#{$prefix}--accordion {
+    --#{$eccgui}-accordion-header-height: #{$eccgui-size-accordion-header-baseheight};
+    --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-accordion-content-basespace};
+}
+.#{$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};
+}
+
 .#{$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 +63,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 +98,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 +118,21 @@ $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 &,
+    .#{$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 +140,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 +158,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;
-        }
-    }
-}

From d1b989ac88933f1173ad319d939277e781465329 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 12 Aug 2024 16:57:50 +0200
Subject: [PATCH 15/23] add option to define amount of separation whitespace
 between accordion items

---
 CHANGELOG.md                                  |  1 +
 src/components/Accordion/Accordion.tsx        |  8 ++++++
 src/components/Accordion/AccordionItem.tsx    | 10 +++++--
 .../Accordion/Stories/Accordion.stories.tsx   |  4 +++
 .../Stories/AccordionItem.stories.tsx         |  6 +++++
 src/components/Accordion/accordion.scss       | 26 +++++++++++++++++++
 6 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 15020f397..651b248fa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   `dropzoneFor` property can be used to mark react flow canvas as matching area to drop dragged elements.
 -   `<Accordion />`, `<AccordionItem />`
     -   `whitespaceSize` property to define how much whitespace is used on top and bottom inside the header and content of an accordion item.
+    -   `separationSize` property defines how much space is used for the separation between an accordion item and the next one.
 
 ### Fixed
 
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 2006d0931..dfdfdf001 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -14,6 +14,10 @@ export interface AccordionProps extends Omit<CarbonAccordionProps, "className" |
      * 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.
@@ -32,6 +36,7 @@ export const Accordion = ({
     className = "",
     align = "start",
     whitespaceSize = "medium",
+    separationSize = "none",
     size = "medium",
     ...otherProps
 }: AccordionProps) => {
@@ -47,6 +52,9 @@ export const Accordion = ({
                 (contentWhitespaceSize !== "medium"
                     ? ` ${eccgui}-accordion__container--global-contentspace-${contentWhitespaceSize}`
                     : "") +
+                (separationSize !== "none"
+                    ? ` ${eccgui}-accordion__container--global-separationspace-${separationSize}`
+                    : "") +
                 (className ? ` ${className}` : "")
             }
             align={align}
diff --git a/src/components/Accordion/AccordionItem.tsx b/src/components/Accordion/AccordionItem.tsx
index 9057c2710..5b9c01939 100644
--- a/src/components/Accordion/AccordionItem.tsx
+++ b/src/components/Accordion/AccordionItem.tsx
@@ -6,7 +6,7 @@ import {
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-type whitespaceSizeOptions = "none" | "small" | "medium" | "large";
+type sizeOptions = "none" | "small" | "medium" | "large";
 
 export interface AccordionItemProps
     extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando"> {
@@ -26,7 +26,11 @@ export interface AccordionItemProps
      * 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?: whitespaceSizeOptions | { header: whitespaceSizeOptions; content: whitespaceSizeOptions };
+    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.
@@ -49,6 +53,7 @@ export const AccordionItem = ({
     fullWidth = false,
     elevated = false,
     whitespaceSize = "medium",
+    separationSize = "none",
     condensed = false,
     noBorder = false,
     ...otherProps
@@ -68,6 +73,7 @@ export const AccordionItem = ({
                 (contentWhitespaceSize !== "medium"
                     ? ` ${eccgui}-accordion__item--contentspace-${contentWhitespaceSize}`
                     : "") +
+                (separationSize !== "none" ? ` ${eccgui}-accordion__item--separationspace-${separationSize}` : "") +
                 (condensed ? ` ${eccgui}-accordion__item--condensed` : "") +
                 (noBorder ? ` ${eccgui}-accordion__item--noborder` : "")
             }
diff --git a/src/components/Accordion/Stories/Accordion.stories.tsx b/src/components/Accordion/Stories/Accordion.stories.tsx
index 0f7f69743..c435a8234 100644
--- a/src/components/Accordion/Stories/Accordion.stories.tsx
+++ b/src/components/Accordion/Stories/Accordion.stories.tsx
@@ -17,6 +17,10 @@ export default {
             control: "select",
             options: ["none", "small", "medium", "large"],
         },
+        separationSize: {
+            control: "select",
+            options: ["none", "small", "medium", "large"],
+        },
     },
 } as Meta<typeof Accordion>;
 
diff --git a/src/components/Accordion/Stories/AccordionItem.stories.tsx b/src/components/Accordion/Stories/AccordionItem.stories.tsx
index d53603d42..ccb492787 100644
--- a/src/components/Accordion/Stories/AccordionItem.stories.tsx
+++ b/src/components/Accordion/Stories/AccordionItem.stories.tsx
@@ -16,12 +16,18 @@ export default {
             control: "select",
             options: ["none", "small", "medium", "large"],
         },
+        separationSize: {
+            control: "select",
+            options: ["none", "small", "medium", "large"],
+        },
     },
 } as Meta<typeof AccordionItem>;
 
 const Template: StoryFn<typeof AccordionItem> = (args) => (
     <Accordion>
         <AccordionItem {...args} />
+        <AccordionItem {...args} />
+        <AccordionItem {...args} />
     </Accordion>
 );
 export const Default = Template.bind({});
diff --git a/src/components/Accordion/accordion.scss b/src/components/Accordion/accordion.scss
index 868de8e74..875f6aa89 100644
--- a/src/components/Accordion/accordion.scss
+++ b/src/components/Accordion/accordion.scss
@@ -13,12 +13,14 @@ $eccgui-color-accordion-toggler-elevated-hover: color.mix(
 ) !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,
@@ -51,6 +53,30 @@ $eccgui-size-accordion-content-basespace: $eccgui-size-block-whitespace * 0.5 !d
     --#{$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: var(--#{$eccgui}-accordion-header-height, mini-units(5));

From 63c94b50902035d13e8d7374c92e05f09d966eea Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 12 Aug 2024 17:05:36 +0200
Subject: [PATCH 16/23] remove extra items

---
 src/components/Accordion/Stories/AccordionItem.stories.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Accordion/Stories/AccordionItem.stories.tsx b/src/components/Accordion/Stories/AccordionItem.stories.tsx
index ccb492787..12e2bdc9b 100644
--- a/src/components/Accordion/Stories/AccordionItem.stories.tsx
+++ b/src/components/Accordion/Stories/AccordionItem.stories.tsx
@@ -26,8 +26,6 @@ export default {
 const Template: StoryFn<typeof AccordionItem> = (args) => (
     <Accordion>
         <AccordionItem {...args} />
-        <AccordionItem {...args} />
-        <AccordionItem {...args} />
     </Accordion>
 );
 export const Default = Template.bind({});

From 9892ae278c8b4cf28a50570f2dc1a9b8dc7f684a Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Tue, 13 Aug 2024 13:01:45 +0200
Subject: [PATCH 17/23] use an property to enable dropzone monitoring to
 prevent issues with some automatically set data transfer types on other DnD
 operations

---
 CHANGELOG.md                                    |  2 +-
 .../Application/ApplicationContainer.tsx        | 17 ++++++++++++++---
 src/components/Application/helper.ts            |  7 ++++---
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 82d69b5a1..9c24c788f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ### Added
 
 -   `<ApplicationContainer />`:
-    -   monitor application wide dropzones for dragged elements via data attributes attached to body element containing the data transfer type of drag over events.
+    -   `monitorDropzonesFor` property can be used to monitor application wide dropzones for dragged elements via data attributes attached to body element containing the data transfer type of drag over events.
 -   `<ReactFlow />`
     -   `dropzoneFor` property can be used to mark react flow canvas as matching area to drop dragged elements.
 -   `<Accordion />`, `<AccordionItem />`
diff --git a/src/components/Application/ApplicationContainer.tsx b/src/components/Application/ApplicationContainer.tsx
index 518c2d7e7..9ec5c1156 100644
--- a/src/components/Application/ApplicationContainer.tsx
+++ b/src/components/Application/ApplicationContainer.tsx
@@ -5,11 +5,22 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { useDropzoneMonitor } from "./helper";
 
-export type ApplicationContainerProps = React.HTMLAttributes<HTMLDivElement>;
+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 = "", ...otherDivProps }: ApplicationContainerProps) => {
+export const ApplicationContainer = ({
+    children,
+    className = "",
+    monitorDropzonesFor = [],
+    ...otherDivProps
+}: ApplicationContainerProps) => {
     const containerRef = React.useRef<any>(null);
-    useDropzoneMonitor();
+    useDropzoneMonitor(monitorDropzonesFor);
 
     return (
         <OverlaysProvider>
diff --git a/src/components/Application/helper.ts b/src/components/Application/helper.ts
index 5e0a76374..d449c9de6 100644
--- a/src/components/Application/helper.ts
+++ b/src/components/Application/helper.ts
@@ -25,14 +25,15 @@ export const useApplicationHeaderOverModals = (elevate: boolean, className: stri
  * Sets different data attributes to the body element.
  * They can be used to apply styling rules.
  */
-export const useDropzoneMonitor = () => {
+export const useDropzoneMonitor = (enabledTypes: string[]) => {
     React.useEffect(() => {
         const monitor = window.document.body;
 
         const addMonitor = (event: DragEvent) => {
             const types = event.dataTransfer?.types || [];
-            if (types.length > 0 && !monitor.dataset.monitorDropzone) {
-                monitor.dataset.monitorDropzone = types.join(" ");
+            const monitorTypes = [...new Set(types.filter((type) => enabledTypes.includes(type)))];
+            if (monitorTypes.length > 0 && !monitor.dataset.monitorDropzone) {
+                monitor.dataset.monitorDropzone = monitorTypes.join(" ");
             }
             event.preventDefault();
         };

From 3b901176e5d0d5a9a2ae0b65f3339e6090f1600c Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Tue, 13 Aug 2024 13:34:22 +0200
Subject: [PATCH 18/23] introduce new opacity variable and reduce visual effekt
 for hovered dropzones

---
 src/cmem/react-flow/_canvas.scss          | 4 ++--
 src/components/Application/_dropzone.scss | 2 +-
 src/configuration/_variables.scss         | 1 +
 src/extensions/uppy/_fileupload.scss      | 4 ++--
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/cmem/react-flow/_canvas.scss b/src/cmem/react-flow/_canvas.scss
index 3d364b78e..78311180b 100644
--- a/src/cmem/react-flow/_canvas.scss
+++ b/src/cmem/react-flow/_canvas.scss
@@ -1,11 +1,11 @@
 .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-disabled);
+        background-color: rgba($eccgui-color-accent, $eccgui-opacity-ghostly);
         box-shadow: 0 0 $eccgui-size-block-whitespace $eccgui-color-accent inset;
 
         & > * {
-            opacity: $eccgui-opacity-muted;
+            opacity: $eccgui-opacity-narrow;
         }
 
         .react-flow__node {
diff --git a/src/components/Application/_dropzone.scss b/src/components/Application/_dropzone.scss
index 396698823..5c51670f2 100644
--- a/src/components/Application/_dropzone.scss
+++ b/src/components/Application/_dropzone.scss
@@ -22,7 +22,7 @@ body[data-monitor-dropzone~="Files"] .uppy-DragDrop--isDragDropSupported {
 
     & > * {
         pointer-events: all;
-        opacity: $eccgui-opacity-narrow;
+        opacity: $eccgui-opacity-regular;
     }
 }
 
diff --git a/src/configuration/_variables.scss b/src/configuration/_variables.scss
index cd75ccacb..61d41ecdf 100644
--- a/src/configuration/_variables.scss
+++ b/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 -----------------------------------------
diff --git a/src/extensions/uppy/_fileupload.scss b/src/extensions/uppy/_fileupload.scss
index e3d17a72e..b5b01e7b1 100644
--- a/src/extensions/uppy/_fileupload.scss
+++ b/src/extensions/uppy/_fileupload.scss
@@ -36,12 +36,12 @@ $eccgui-color-fileupload-text: inherit;
 }
 
 .uppy-DragDrop--isDraggingOver.uppy-DragDrop--isDragDropSupported {
-    background-color: rgba($eccgui-color-accent, $eccgui-opacity-disabled);
+    background-color: rgba($eccgui-color-accent, $eccgui-opacity-ghostly);
     box-shadow: 0 0 $eccgui-size-block-whitespace $eccgui-color-accent inset;
 
     & > * {
         color: $eccgui-color-accent-contrast;
-        opacity: $eccgui-opacity-muted;
+        opacity: $eccgui-opacity-narrow;
         fill: currentcolor;
     }
 }

From c41cd6255d21c298f338bf0a053daac888238867 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Tue, 13 Aug 2024 17:24:03 +0200
Subject: [PATCH 19/23] fix security issues by adding resolutions for a few
 packages

---
 package.json |  5 ++++-
 yarn.lock    | 58 ++++++++++++++++++++++++++--------------------------
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index fcb7ed8ce..0608439d1 100644
--- a/package.json
+++ b/package.json
@@ -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": {
diff --git a/yarn.lock b/yarn.lock
index de0e8d7d9..e7de842ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4633,13 +4633,13 @@ bl@^4.0.3, bl@^4.1.0:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
-body-parser@1.20.1:
-  version "1.20.1"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.1.tgz#b1812a8912c195cd371a3ee5e66faa2338a5c668"
-  integrity sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==
+body-parser@1.20.2:
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.2.tgz#6feb0e21c4724d06de7ff38da36dad4f57a747fd"
+  integrity sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==
   dependencies:
     bytes "3.1.2"
-    content-type "~1.0.4"
+    content-type "~1.0.5"
     debug "2.6.9"
     depd "2.0.0"
     destroy "1.2.0"
@@ -4647,7 +4647,7 @@ body-parser@1.20.1:
     iconv-lite "0.4.24"
     on-finished "2.4.1"
     qs "6.11.0"
-    raw-body "2.5.1"
+    raw-body "2.5.2"
     type-is "~1.6.18"
     unpipe "1.0.0"
 
@@ -5275,7 +5275,7 @@ content-disposition@0.5.4:
   dependencies:
     safe-buffer "5.2.1"
 
-content-type@~1.0.4:
+content-type@~1.0.4, content-type@~1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
   integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
@@ -5295,10 +5295,10 @@ cookie-signature@1.0.6:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
 
-cookie@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
-  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
+cookie@0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.6.0.tgz#2798b04b071b0ecbff0dbb62a505a8efa4e19051"
+  integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
 
 copy-to-clipboard@^3.3.1:
   version "3.3.1"
@@ -5884,10 +5884,10 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
-ejs@^3.1.8:
-  version "3.1.9"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.9.tgz#03c9e8777fe12686a9effcef22303ca3d8eeb361"
-  integrity sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==
+ejs@^3.1.10, ejs@^3.1.8:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.10.tgz#69ab8358b14e896f80cc39e62087b88500c3ac3b"
+  integrity sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==
   dependencies:
     jake "^10.8.5"
 
@@ -6442,17 +6442,17 @@ expect@^29.0.0, expect@^29.7.0:
     jest-message-util "^29.7.0"
     jest-util "^29.7.0"
 
-express@^4.17.3:
-  version "4.18.2"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59"
-  integrity sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==
+express@^4.17.3, express@^4.19.2:
+  version "4.19.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.19.2.tgz#e25437827a3aa7f2a827bc8171bbbb664a356465"
+  integrity sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==
   dependencies:
     accepts "~1.3.8"
     array-flatten "1.1.1"
-    body-parser "1.20.1"
+    body-parser "1.20.2"
     content-disposition "0.5.4"
     content-type "~1.0.4"
-    cookie "0.5.0"
+    cookie "0.6.0"
     cookie-signature "1.0.6"
     debug "2.6.9"
     depd "2.0.0"
@@ -10533,10 +10533,10 @@ range-parser@^1.2.1, range-parser@~1.2.1:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
-raw-body@2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
-  integrity sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==
+raw-body@2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
+  integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
   dependencies:
     bytes "3.1.2"
     http-errors "2.0.0"
@@ -12010,10 +12010,10 @@ tar-stream@^2.1.4:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
-tar@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.0.tgz#b14ce49a79cb1cd23bc9b016302dea5474493f73"
-  integrity sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==
+tar@^6.2.0, tar@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.1.tgz#717549c541bc3c2af15751bea94b1dd068d4b03a"
+  integrity sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==
   dependencies:
     chownr "^2.0.0"
     fs-minipass "^2.0.0"

From f90a04cc72fd22d36e1fca1807b6bffb1f49a558 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Tue, 13 Aug 2024 17:39:38 +0200
Subject: [PATCH 20/23] provide better variables for class name prefixes

---
 CHANGELOG.md   | 4 ++++
 src/index.scss | 9 +++++++++
 2 files changed, 13 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c24c788f..866205ee4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<Accordion />`, `<AccordionItem />`
     -   `whitespaceSize` property to define how much whitespace is used on top and bottom inside the header and content of an accordion item.
     -   `separationSize` property defines how much space is used for the separation between an accordion item and the next one.
+-   class name prefixes are now available by variables with more readable names:
+    -   BlueprintJS: `$prefix-blueprintjs` (current value is `bp5`)
+    -   Carbon Design System: `$prefix-carbon` (current value is `cds`)
+    -   eccenca GUI elements: `$prefix-eccgui` (current value is `eccgui`)
 
 ### Fixed
 
diff --git a/src/index.scss b/src/index.scss
index 8838390e4..50b055559 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -22,6 +22,9 @@
 // load blueprintjs components
 @import "./includes/blueprintjs/components";
 
+// set more readable variable for prefix
+$prefix-blueprintjs: $ns;
+
 // -- Carbon Elements ----------------------------------------------------------
 
 /*
@@ -41,11 +44,17 @@
 // load carbon components
 @import "./includes/carbon-components/components";
 
+// set more readable variable for prefix
+$prefix-carbon: $prefix;
+
 // == Load basic components styles =============================================
 
 @import "./components";
 @import "./extensions/codemirror/codemirror";
 
+// set more readable variable for prefix
+$prefix-eccgui: $eccgui;
+
 // == load tweaks ==============================================================
 
 @import "./shame";

From 7a1e6083c395ea049bf298756c5ba89b154ecbd8 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 14 Aug 2024 10:44:53 +0200
Subject: [PATCH 21/23] fix Accordion without whitespace and full item width

---
 src/components/Accordion/Stories/Accordion.stories.tsx | 2 +-
 src/components/Accordion/accordion.scss                | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Accordion/Stories/Accordion.stories.tsx b/src/components/Accordion/Stories/Accordion.stories.tsx
index c435a8234..785c7e9fc 100644
--- a/src/components/Accordion/Stories/Accordion.stories.tsx
+++ b/src/components/Accordion/Stories/Accordion.stories.tsx
@@ -28,7 +28,7 @@ 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 />,
diff --git a/src/components/Accordion/accordion.scss b/src/components/Accordion/accordion.scss
index 875f6aa89..578ae93db 100644
--- a/src/components/Accordion/accordion.scss
+++ b/src/components/Accordion/accordion.scss
@@ -152,7 +152,9 @@ $eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default;
     }
 
     .#{$eccgui}-accordion__item--condensed:not(.#{$eccgui}-accordion__item--fullwidth) &,
-    .#{$prefix}--accordion--start.#{$eccgui}-accordion__container--global-contentspace-none &,
+    .#{$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)
         & {

From 30a97ecf19ba62ba34f3c4ac0f5b634af0fb9886 Mon Sep 17 00:00:00 2001
From: haschek <haschek@users.noreply.github.com>
Date: Wed, 14 Aug 2024 10:55:16 +0000
Subject: [PATCH 22/23] Bump release version to next release candidate
 23.8.0-rc.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0608439d1..3145d863a 100644
--- a/package.json
+++ b/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.1",
+    "version": "23.8.0-rc.2",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

From 9535876bab7d7e84a7f8d2c1388e9c0a3d080f0f Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 14 Aug 2024 15:14:35 +0200
Subject: [PATCH 23/23] update changelog

---
 CHANGELOG.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 866205ee4..284f5d9ea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,11 +24,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 -   `<ElapsedDateTimeDisplay />`
     -   negative values are not shown (e.g. in case server and browser clocks are apart)
--   `<TextArea />`
-    -   improve visual alignment to `TextField` regarding whitespace and colors
 
 ### Changed
 
+-   `<TextArea />`
+    -   improve visual alignment to `TextField` regarding whitespace and colors
 -   basic styles for Uppy widget were improved and moved to its own component folder
 
 ### Deprecated