From c61ed9d1b62b9341218aea0bafba270e14896b85 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 16 Aug 2023 09:42:10 +0200
Subject: [PATCH 01/13] allow all div attributes on Spacing element

---
 CHANGELOG.md                          |  5 +++++
 src/components/Separation/Spacing.tsx | 20 ++++++++++++--------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47f7cef3..7bd92514 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
+
+-   `<Spacing />`
+    -   allow other `div` attributes, e.g. `style`
+
 ## [23.2.0] - 2023-07-14
 
 ### Added
diff --git a/src/components/Separation/Spacing.tsx b/src/components/Separation/Spacing.tsx
index ad38149f..a5d84332 100644
--- a/src/components/Separation/Spacing.tsx
+++ b/src/components/Separation/Spacing.tsx
@@ -1,38 +1,42 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface SpacingProps {
+export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Set the amount of white space that separates two elements.
      */
-    size?: "tiny" | "small" | "medium" | "large" | "xlarge"
+    size?: "tiny" | "small" | "medium" | "large" | "xlarge";
     /**
      * If set then is a ruler displayed in the middle of the spacing area.
      * The direction of the ruler is used from the spacing.
      */
-    hasDivider?: boolean
+    hasDivider?: boolean;
     /**
      * If set then the spacing separates two elements on the horizontal axis.
      * The spacing area then is created on a vertical axis.
      */
-    vertical?: boolean
+    vertical?: boolean;
 }
 
 /**
  * Adds horizontal or vertical space between neighbouring elements.
  * It also can add a visual ruler inside.
  */
-export const Spacing = ({ size = "medium", hasDivider = false, vertical = false }: SpacingProps) => {
+export const Spacing = ({ size = "medium", hasDivider = false, vertical = false, ...otherDivProps }: SpacingProps) => {
     const direction = vertical ? "vertical" : "horizontal";
     return (
         <div
             className={
-                `${eccgui}-separation__spacing-` + direction +
-                ` ${eccgui}-separation__spacing--` + size +
+                `${eccgui}-separation__spacing-` +
+                direction +
+                ` ${eccgui}-separation__spacing--` +
+                size +
                 (hasDivider ? ` ${eccgui}-separation__spacing--hasdivider` : "")
             }
+            {...otherDivProps}
         />
     );
-}
+};
 
 export default Spacing;

From 771c97b4b4c771bdbac543547e999f95a5affb37 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 16 Aug 2023 10:19:19 +0200
Subject: [PATCH 02/13] provide labelProps to configure automatically injected
 Label element

---
 CHANGELOG.md                                  |  5 +++++
 .../PropertyValuePair/PropertyName.tsx        | 19 +++++++++++++++----
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7bd92514..b61242ba 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]
 
+### Added
+
+-   `<PropertyName />`
+    -   provide `labelProps` to configure the automatically injected `Label` element when `PropertyName` is only a string
+
 ### Fixed
 
 -   `<Spacing />`
diff --git a/src/components/PropertyValuePair/PropertyName.tsx b/src/components/PropertyValuePair/PropertyName.tsx
index 1e3f88ad..591d0a2d 100644
--- a/src/components/PropertyValuePair/PropertyName.tsx
+++ b/src/components/PropertyValuePair/PropertyName.tsx
@@ -1,16 +1,21 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Label from "../Label/Label";
+import Label, { LabelProps } from "../Label/Label";
 
 export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Increase or decrease the width used for the property name.
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Additonal label properties, e.g. `tooltip`.
+     * It is only used if the `PropertyName` has simple text input.
+     */
+    labelProps?: LabelProps;
 }
 
-export const PropertyName = ({ className = "", size, children, ...otherProps }: PropertyNameProps) => {
+export const PropertyName = ({ className = "", size, children, labelProps, ...otherDtProps }: PropertyNameProps) => {
     return (
         <dt
             className={
@@ -18,9 +23,15 @@ export const PropertyName = ({ className = "", size, children, ...otherProps }:
                 (size ? ` ${eccgui}-propertyvalue__property--${size}` : "") +
                 (className ? " " + className : "")
             }
-            {...otherProps}
+            {...otherDtProps}
         >
-            <div>{typeof children === "string" ? <Label text={children} isLayoutForElement="span" /> : children}</div>
+            <div>
+                {typeof children === "string" ? (
+                    <Label text={children} isLayoutForElement="span" {...labelProps} />
+                ) : (
+                    children
+                )}
+            </div>
         </dt>
     );
 };

From 94fc4bb740d64afb8aaf7d3e15d7bdb5f4a94328 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 21 Aug 2023 16:34:47 +0200
Subject: [PATCH 03/13] add canonical icon for keyboard hotkeys

---
 src/components/Icon/canonicalIconNames.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Icon/canonicalIconNames.tsx b/src/components/Icon/canonicalIconNames.tsx
index e73c115b..fe501793 100644
--- a/src/components/Icon/canonicalIconNames.tsx
+++ b/src/components/Icon/canonicalIconNames.tsx
@@ -13,6 +13,7 @@ export type ValidIconName =
     | "application-useraccount"
     | "application-vocabularies"
     | "application-warning"
+    | "application-hotkeys"
     | "artefact-commit"
     | "artefact-customtask"
     | "artefact-dataset"
@@ -162,6 +163,7 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
     "application-useraccount": icons.UserAvatar,
     "application-vocabularies": icons.Catalog,
     "application-warning": icons.WarningAlt,
+    "application-hotkeys": icons.Keyboard,
 
     "artefact-commit": icons.Commit,
     "artefact-customtask": icons.Script,

From f503df5d68f0a2d27fe8d1258fd20af955c8500f Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 24 Aug 2023 14:05:38 +0200
Subject: [PATCH 04/13] fix typo

---
 src/components/PropertyValuePair/PropertyName.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PropertyValuePair/PropertyName.tsx b/src/components/PropertyValuePair/PropertyName.tsx
index 591d0a2d..23089ecc 100644
--- a/src/components/PropertyValuePair/PropertyName.tsx
+++ b/src/components/PropertyValuePair/PropertyName.tsx
@@ -9,7 +9,7 @@ export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {
      */
     size?: "small" | "medium" | "large";
     /**
-     * Additonal label properties, e.g. `tooltip`.
+     * Additional label properties, e.g. `tooltip`.
      * It is only used if the `PropertyName` has simple text input.
      */
     labelProps?: LabelProps;

From 76b63a60c58c433eb2357d288b7cc7262b5b37e7 Mon Sep 17 00:00:00 2001
From: Andreas Schultz <andreas.schultz@eccenca.com>
Date: Fri, 25 Aug 2023 13:28:51 +0200
Subject: [PATCH 05/13] Add TextField.escapeToBlur: If set to true the input
 field blurs/de-focuces when the Escape key is pressed

---
 CHANGELOG.md                           |  5 ++++
 src/components/TextField/TextField.tsx | 38 ++++++++++++++++++++++----
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47f7cef3..d4ee2192 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]
 
+### Added
+
+-   `<TextField />`:
+    - Parameter `escapeToBlur`: If set to true the input field blurs/de-focuces when the `Escape` key is pressed.
+
 ## [23.2.0] - 2023-07-14
 
 ### Added
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index eb72c6c4..e5ba5605 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -1,15 +1,15 @@
-import React from "react";
+import React, {KeyboardEventHandler, RefObject} from "react";
 import {
-    InputGroup as BlueprintInputGroup,
     Classes as BlueprintClassNames,
-    Intent as BlueprintIntent,
-    MaybeElement,
     HTMLInputProps,
+    InputGroup as BlueprintInputGroup,
     InputGroupProps2,
+    Intent as BlueprintIntent,
+    MaybeElement,
 } from "@blueprintjs/core";
-import { IntentTypes, Definitions as IntentDefinitions } from "../../common/Intent";
+import {Definitions as IntentDefinitions, IntentTypes} from "../../common/Intent";
 import Icon from "../Icon/Icon";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 import {ValidIconName} from "../Icon/canonicalIconNames";
 import {InvisibleCharacterWarningProps, useTextValidation} from "./useTextValidation";
 
@@ -50,6 +50,9 @@ export interface TextFieldProps extends Partial<Omit<InputGroupProps2, "intent"
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
     invisibleCharacterWarning?: InvisibleCharacterWarningProps
+
+    /** If true pressing the Escape key will blur/de-focus the input field. Default: false */
+    escapeToBlur?: boolean
 }
 
 /**
@@ -64,8 +67,10 @@ export const TextField = ({
   fullWidth = true,
   leftIcon,
   invisibleCharacterWarning,
+  escapeToBlur = false,
   ...otherProps
 }: TextFieldProps) => {
+    const inputRef = React.useRef<HTMLInputElement | null>(null)
   let deprecatedIntent;
   switch (true) {
     case hasStatePrimary:
@@ -84,6 +89,25 @@ export const TextField = ({
       break;
   }
 
+    const handleLabelEscape = React.useCallback(() => {
+        inputRef.current?.blur()
+        if(otherProps.inputRef) {
+            const otherInputRef = otherProps.inputRef as RefObject<HTMLInputElement>
+            if(otherInputRef.current) {
+                otherInputRef.current.blur()
+            }
+        }
+    }, [])
+
+    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = React.useCallback((event) => {
+        if(escapeToBlur && event.key === "Escape") {
+            event.preventDefault()
+            handleLabelEscape()
+            return false
+        }
+        otherProps.onKeyDown?.(event)
+    }, [otherProps.onKeyDown, escapeToBlur])
+
   const {
       intent = deprecatedIntent,
       ...otherBlueprintInputGroupProps
@@ -110,6 +134,7 @@ export const TextField = ({
 
   return (
     <BlueprintInputGroup
+        inputRef={inputRef}
       className={
           `${eccgui}-textfield` +
           (intent ? ` ${eccgui}-intent--${intent}` : "") +
@@ -133,6 +158,7 @@ export const TextField = ({
       }
       dir={"auto"}
       onChange={maybeWrappedOnChange}
+        onKeyDown={otherProps.onKeyDown || escapeToBlur ? onKeyDown : undefined}
     />
   );
 }

From d84176ace75107ffd2c73b56ef20fef66dcdaa5a Mon Sep 17 00:00:00 2001
From: Andreas Schultz <andreas.schultz@eccenca.com>
Date: Mon, 28 Aug 2023 10:49:34 +0200
Subject: [PATCH 06/13] Make Modal by default focusable in order to e.g.
 trigger Escape key presses on it in order to close it

---
 CHANGELOG.md                    |  4 ++++
 src/components/Dialog/Modal.tsx | 11 ++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d4ee2192..e7a40e8f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 -   `<TextField />`:
     - Parameter `escapeToBlur`: If set to true the input field blurs/de-focuces when the `Escape` key is pressed.
+-   `<Modal />`:
+    - Parameter `modalFocusable: boolean`: When `true` the outer `div` element of the modal can be focused by clicking on it.
+                                           This is needed e.g. when key (down, up) events should trigger on the modal in order
+                                           to bubble up to its parent elements.
 
 ## [23.2.0] - 2023-07-14
 
diff --git a/src/components/Dialog/Modal.tsx b/src/components/Dialog/Modal.tsx
index 24215adb..1b4f396e 100644
--- a/src/components/Dialog/Modal.tsx
+++ b/src/components/Dialog/Modal.tsx
@@ -23,11 +23,14 @@ export interface ModalProps extends OverlayProps, IOverlayState {
   preventBackdrop?: boolean;
     /** Optional props for the wrapper div element inside the modal overlay. */
   wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+    /** Make the modal focusable, e.g. when clicking somewhere on it. This is needed, e.g. when capturing key (down, up) events that
+     * should bubble to the modal's parent elements. */
+    modalFocusable?: boolean
 }
 
 /**
  * Displays contents on top of other elements, used to create dialogs.
- * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficent.
+ * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficient.
  * Otherwise this element can be used to create own modal elements and edge cases for modal dialogs.
  * Then it is recommended to use the `Card` element inside.
  */
@@ -40,9 +43,14 @@ export const Modal = ({
     canEscapeKeyClose=false,
     preventBackdrop=false,
     wrapperDivProps,
+    modalFocusable = true,
     ...otherProps
 }: ModalProps) => {
 
+    const focusableProps = modalFocusable ? {
+        tabIndex: 0
+    } : undefined
+
     const alteredChildren = React.Children.map(children, (child) => {
         if ((child as React.ReactElement).type && (child  as React.ReactElement).type === Card) {
             return React.cloneElement(
@@ -71,6 +79,7 @@ export const Modal = ({
                 className={BlueprintClassNames.DIALOG_CONTAINER}
                 // this is a workaround because data attribute on SimpleDialog is not correctly routed to the overlay by blueprint js
                 data-test-id={(otherProps as any)["data-test-id"] ?? "simpleDialogWidget"}
+                {...focusableProps}
             >
                 <section
                     className={

From 6412f69450a83608f95dfbaea04fd17ae4c8025b Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Tue, 29 Aug 2023 17:08:14 +0200
Subject: [PATCH 07/13] upgrae carbon styles library

---
 package.json |  2 +-
 yarn.lock    | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 307c9788..7bacf3ce 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
         "@blueprintjs/select": "^4.9.14",
         "@carbon/icons": "^11.19.0",
         "@carbon/icons-react": "^11.19.0",
-        "@carbon/styles": "^1.28.0",
+        "@carbon/styles": "^1.36.0",
         "@mavrin/remark-typograf": "^2.2.0",
         "carbon-components-react": "^8.28.0",
         "codemirror": "^5.65.13",
diff --git a/yarn.lock b/yarn.lock
index cc75aaad..a9bf7852 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1392,11 +1392,21 @@
   resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-11.14.0.tgz#cdf73558dca2f63b6167a962cb26a8cae843b0e1"
   integrity sha512-SkjAmmUwdLEvu/JKPOcslbx+mrvqp+ZSvBvFP/7tjv0HYC0Khs3ltjYeSiusg/KpCoSyFM+fzEJm2qdURxC1+w==
 
+"@carbon/colors@^11.19.0":
+  version "11.19.0"
+  resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-11.19.0.tgz#c5f062b9e2033bb390eac7915e451d82ece0d6c3"
+  integrity sha512-cRDnv9GfktZo+p/t/Lsy2B3yvMbDI1Ht2ECU0rAikClQHVnOffz791Q4m2gy2STPdISnzjFSPmoRxGKLfYhLRA==
+
 "@carbon/feature-flags@^0.13.0":
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/@carbon/feature-flags/-/feature-flags-0.13.0.tgz#f0903233e9e38b9170bfaf2ff38fea292bb2efc3"
   integrity sha512-nca4aTE8Ss5NzjjK6fxR+mM63e0hDmH3nT3zDZ2pRQ23QoJzcmhZmaWQoLGd6ONa52vAuPWcVPPg/bynN07Q9w==
 
+"@carbon/feature-flags@^0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@carbon/feature-flags/-/feature-flags-0.16.0.tgz#0896249e14d6e581639608a3061b7f38e1810bf8"
+  integrity sha512-hCrfVZ6oVnPjjupelbvQX4D0i6GlZuKVverAf0LkOydXHrPjSyuEmg+czsylyCBg4r/hxtSTu91Tq6aqz/DsHg==
+
 "@carbon/grid@^11.13.0":
   version "11.13.0"
   resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-11.13.0.tgz#563164b4e596a789e80b5b6f7f69e117dbe6dd07"
@@ -1404,6 +1414,13 @@
   dependencies:
     "@carbon/layout" "^11.13.0"
 
+"@carbon/grid@^11.19.0":
+  version "11.19.0"
+  resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-11.19.0.tgz#a0af90b4625fd60bb9ad947b7f8360af09488e3f"
+  integrity sha512-Ie8C0yifTPOF58rhkeRhINJ6KPiTVbdJwPCE+aEWTpUrwGSnuqIYZ8zQBlYQtNGQX72TSfnGY0qijPmpnIwNsg==
+  dependencies:
+    "@carbon/layout" "^11.19.0"
+
 "@carbon/icon-helpers@^10.39.0":
   version "10.39.0"
   resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.39.0.tgz#a1dfd75397a399892af488963ea1187c218861d5"
@@ -1428,11 +1445,21 @@
   resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-11.13.0.tgz#ba16018727e0846c1289a79b3d7af3e3f0ea880f"
   integrity sha512-MWVyk9NdWEpvfMSqEy1aBS9QA0Km3ADyEWW7D5c8r8+ZMrhPpJnmuCRMbBOkJYtZDfs4+7EuuKcacJ/kY51x7w==
 
+"@carbon/layout@^11.19.0":
+  version "11.19.0"
+  resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-11.19.0.tgz#cd0f97457a91058792d13b09293281270d2b7d91"
+  integrity sha512-BI9ct+yVKrgL90l4nijMhj8dokXGBJu1Xtve9fz/lcveTyxxn7YvRu8mosGhCyw77KSU6vN2yRLJnQwqwqrLJQ==
+
 "@carbon/motion@^11.10.0":
   version "11.10.0"
   resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-11.10.0.tgz#7674652557dc1fe650eb506c38e8bf722c9d0018"
   integrity sha512-eKQTBvfgTI+txk4BjRTjObOnQ9/uWSRurzIQK4qXsRJZuxvyJTChw+0pKMjohfpzOOnv5E1XxyfM3MWURaGe6Q==
 
+"@carbon/motion@^11.15.0":
+  version "11.15.0"
+  resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-11.15.0.tgz#a4f8239c06a3f71ac25f780b22a3338ecb203656"
+  integrity sha512-l7SIZMwTmv8BHPvDsQ26Y/dBLKnLGZUvD5bGcDppoUInUcKv2Dg4J0r5JONUsB2OagpBmbj/a5skcahzlaL1JQ==
+
 "@carbon/react@^1.28.0":
   version "1.28.0"
   resolved "https://registry.yarnpkg.com/@carbon/react/-/react-1.28.0.tgz#b88a18fcc49e6f9259f66fe624b722215adcbc95"
@@ -1474,6 +1501,20 @@
     "@carbon/type" "^11.17.0"
     "@ibm/plex" "6.0.0-next.6"
 
+"@carbon/styles@^1.36.0":
+  version "1.36.0"
+  resolved "https://registry.yarnpkg.com/@carbon/styles/-/styles-1.36.0.tgz#9e4b81e8b58714141fdaa3c1dd24c91a7a3d095d"
+  integrity sha512-UKr0FdNT/QSJVfsrjn03zF364qP2XwOW6+/VaR7SijfEKR1qx9Z6MQbzNMR9OP5hvT/rr3pora1S7R3h6mtz3A==
+  dependencies:
+    "@carbon/colors" "^11.19.0"
+    "@carbon/feature-flags" "^0.16.0"
+    "@carbon/grid" "^11.19.0"
+    "@carbon/layout" "^11.19.0"
+    "@carbon/motion" "^11.15.0"
+    "@carbon/themes" "^11.24.0"
+    "@carbon/type" "^11.23.0"
+    "@ibm/plex" "6.0.0-next.6"
+
 "@carbon/telemetry@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@carbon/telemetry/-/telemetry-0.1.0.tgz#57b331cd5a855b4abbf55457456da8211624d879"
@@ -1489,6 +1530,16 @@
     "@carbon/type" "^11.17.0"
     color "^4.0.0"
 
+"@carbon/themes@^11.24.0":
+  version "11.24.0"
+  resolved "https://registry.yarnpkg.com/@carbon/themes/-/themes-11.24.0.tgz#d7010605f8ba2d25e2c829275c722f3b094c1fe4"
+  integrity sha512-afVMSQ8by3yR4646UNwOmVGeyI8n0dIvehpuy4IUGQ52WXsRuveMY/F6KpATy0OadJR/C/7SZo2mqI7L8aTREA==
+  dependencies:
+    "@carbon/colors" "^11.19.0"
+    "@carbon/layout" "^11.19.0"
+    "@carbon/type" "^11.23.0"
+    color "^4.0.0"
+
 "@carbon/type@^11.17.0":
   version "11.17.0"
   resolved "https://registry.yarnpkg.com/@carbon/type/-/type-11.17.0.tgz#e0820164547d02fcaf613a2bb000fc38aec25c06"
@@ -1497,6 +1548,14 @@
     "@carbon/grid" "^11.13.0"
     "@carbon/layout" "^11.13.0"
 
+"@carbon/type@^11.23.0":
+  version "11.23.0"
+  resolved "https://registry.yarnpkg.com/@carbon/type/-/type-11.23.0.tgz#144c8106e9dc1d6d6a461f91d516d867c89d340b"
+  integrity sha512-bp3D2q7Su03B2Re5CHt0OdNNmAbTOJaBgKgRKKdLP97F+M27y/kk9iOAFctC0pCgmQ2qSndWRTSb3zVg5TmiEw==
+  dependencies:
+    "@carbon/grid" "^11.19.0"
+    "@carbon/layout" "^11.19.0"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"

From 53af3a0da0c2845891d4b8f1b307830f28a8fe64 Mon Sep 17 00:00:00 2001
From: Andreas Schultz <andreas.schultz@eccenca.com>
Date: Wed, 30 Aug 2023 08:49:21 +0200
Subject: [PATCH 08/13] Fix escape key to close mechanism in Modal after
 clicking on the backdrop

---
 CHANGELOG.md                    | 5 +++++
 src/components/Dialog/Modal.tsx | 7 +++++++
 2 files changed, 12 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e7a40e8f..78b3b506 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
                                            This is needed e.g. when key (down, up) events should trigger on the modal in order
                                            to bubble up to its parent elements.
 
+### Fixed
+
+-   `<Modal />`:
+    - Escape key to close does not work anymore after clicking on the backdrop for `canOutsideClickClose=false` and `canEscapeKeyClose=true`. 
+
 ## [23.2.0] - 2023-07-14
 
 ### Added
diff --git a/src/components/Dialog/Modal.tsx b/src/components/Dialog/Modal.tsx
index 1b4f396e..bce3ddf8 100644
--- a/src/components/Dialog/Modal.tsx
+++ b/src/components/Dialog/Modal.tsx
@@ -47,6 +47,12 @@ export const Modal = ({
     ...otherProps
 }: ModalProps) => {
 
+    const backdropProps: React.HTMLProps<HTMLDivElement> | undefined = !canOutsideClickClose && canEscapeKeyClose ? {
+        ...otherProps.backdropProps,
+        // Escape key won't work anymore otherwise after clicking on the backdrop
+        tabIndex: 0
+    } : otherProps.backdropProps
+
     const focusableProps = modalFocusable ? {
         tabIndex: 0
     } : undefined
@@ -68,6 +74,7 @@ export const Modal = ({
     return (
         <BlueprintOverlay
             {...otherProps}
+            backdropProps={backdropProps}
             className={overlayClassName}
             backdropClassName={`${eccgui}-dialog__backdrop`}
             canOutsideClickClose={canOutsideClickClose}

From 9696110a3ee353d1abfb459b640364f6924f19be Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 30 Aug 2023 13:49:48 +0200
Subject: [PATCH 09/13] limit version of @carbon/styles package because of
 compilation issues in DI

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

diff --git a/package.json b/package.json
index 7bacf3ce..6ac243d6 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
         "@blueprintjs/select": "^4.9.14",
         "@carbon/icons": "^11.19.0",
         "@carbon/icons-react": "^11.19.0",
-        "@carbon/styles": "^1.36.0",
+        "@carbon/styles": "1.32.0",
         "@mavrin/remark-typograf": "^2.2.0",
         "carbon-components-react": "^8.28.0",
         "codemirror": "^5.65.13",
@@ -146,6 +146,7 @@
         "yargs": "^17.7.2"
     },
     "peerDependencies": {
+        "@carbon/styles": "<1.33.0",
         "@types/carbon-components-react": ">=7",
         "react": ">=16",
         "react-dom": ">=16"

From 373191bb4727700141dcc0b653331f20fb39a853 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 30 Aug 2023 14:42:20 +0200
Subject: [PATCH 10/13] fix calculation of tooltip position

---
 src/components/Application/_toolbar.scss | 53 ++++++++++--------------
 1 file changed, 21 insertions(+), 32 deletions(-)

diff --git a/src/components/Application/_toolbar.scss b/src/components/Application/_toolbar.scss
index e2dbd82e..63a3ae8f 100644
--- a/src/components/Application/_toolbar.scss
+++ b/src/components/Application/_toolbar.scss
@@ -6,29 +6,31 @@
     own rule patches.
 */
 
+@use "sass:color";
+
 /// Header-panel background
 $shell-panel-bg-01: $eccgui-color-applicationheader-background !default;
 
 /// Panel item hover background
-$shell-panel-bg-02: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%) !default;
+$shell-panel-bg-02: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%) !default;
 
 /// Panel item focus and active background
-$shell-panel-bg-03: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-panel-bg-03: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%) !default;
 
 /// Panel item link selected background
-$shell-panel-bg-04: adjust-color($eccgui-color-applicationheader-background, $lightness: 5%) !default;
+$shell-panel-bg-04: color.adjust($eccgui-color-applicationheader-background, $lightness: 5%) !default;
 
 /// Panel border
-$shell-panel-border: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-panel-border: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%) !default;
 
 /// Header panel text
-$shell-panel-text-01: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%) !default;
+$shell-panel-text-01: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%) !default;
 
 /// Header panel secondary text
 $shell-panel-text-02: $eccgui-color-applicationheader-text !default;
 
 /// Header panel focus border
-$shell-panel-focus: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%) !default;
+$shell-panel-focus: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%) !default;
 
 @import "~@carbon/styles/scss/components/ui-shell/header-panel/index";
 
@@ -36,53 +38,40 @@ $shell-panel-focus: adjust-color($eccgui-color-applicationheader-text, $lightnes
 
 .#{$prefix}--header-panel {
     top: mini-units(8);
+    padding: $eccgui-size-block-whitespace;
+    color: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%);
+    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
 }
 
 .#{$prefix}--header-panel--expanded {
-    //width: carbon--mini-units(32);
+    border-right-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
+    border-left-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
 }
 
 .#{$eccgui}-application__toolbar__panel-backdrop--onleave,
 .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
     position: fixed;
-    top: mini-units(8);
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: mini-units(8) 0 0 0;
 }
 
 .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
     top: 0;
 }
 
-// tweak original colors
-
-// $shell-panel-bg-01
-.#{$prefix}--header-panel {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
-    padding: $eccgui-size-block-whitespace;
-}
-
-// $shell-panel-text-01
-.#{$prefix}--header-panel {
-    color: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%);
-}
-
-// $shell-panel-border
-.#{$prefix}--header-panel--expanded {
-    border-left-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
-    border-right-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
-}
-
 // add rules for own class identiiers
 
 .#{$eccgui}-application__toolbar {
-    flex-grow: 0;
     flex-basis: auto;
+    flex-grow: 0;
+
+    .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
+        // for some reason the original calculation still moves out the tooltip
+        transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
+    }
 }
 
 .#{$eccgui}-application__toolbar__section {
-    padding: 0 mini-units(1);
     display: flex;
     align-items: center;
+    padding: 0 mini-units(1);
 }

From ca214924f52037179992d8dd35370f530d45e329 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 30 Aug 2023 14:54:48 +0200
Subject: [PATCH 11/13] align display of carbon tooltips with our normal
 tooltip design

---
 src/components/Tooltip/tooltip.scss | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/Tooltip/tooltip.scss b/src/components/Tooltip/tooltip.scss
index 99cece20..4a7828f2 100644
--- a/src/components/Tooltip/tooltip.scss
+++ b/src/components/Tooltip/tooltip.scss
@@ -2,6 +2,7 @@
 $eccgui-size-typo-tooltip: $eccgui-size-typo-caption !default;
 $eccgui-size-typo-tooltip-lineheight: $eccgui-size-typo-caption-lineheight !default;
 $eccgui-size-tooltip-width: 20em !default;
+
 // library vars
 $tooltip2-background-color: $eccgui-color-applicationheader-text; // !default;
 $tooltip2-text-color: $eccgui-color-applicationheader-background; // !default;
@@ -15,8 +16,8 @@ $tooltip2-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
 .#{$ns}-tooltip2 {
     font-size: $eccgui-size-typo-tooltip;
     line-height: $eccgui-size-typo-tooltip-lineheight;
-    white-space: normal;
     overflow-wrap: break-word;
+    white-space: normal;
 }
 
 .#{$eccgui}-tooltip--small {
@@ -39,3 +40,16 @@ $tooltip2-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
         text-decoration: none;
     }
 }
+
+.#{$prefix}--tooltip-content {
+    max-width: $eccgui-size-tooltip-width;
+    padding: 0.25 * $eccgui-size-block-whitespace 0.5 * $eccgui-size-block-whitespace;
+    // align Carbon tooltips, they are used automatically by a few carbon based elements, e.g. pagination buttons
+    font-size: $eccgui-size-typo-tooltip;
+    line-height: $eccgui-size-typo-tooltip-lineheight;
+    overflow-wrap: break-word;
+    white-space: normal;
+
+    --cds-popover-background-color: #{$tooltip2-background-color};
+    --cds-popover-text-color: #{$tooltip2-text-color};
+}

From 3cf12881872e00a186365d8e12995e29c82545e4 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 30 Aug 2023 15:12:19 +0200
Subject: [PATCH 12/13] update yarn lock

---
 yarn.lock | 48 ++++++++++++++++++++++++------------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index a9bf7852..b25cb558 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1392,7 +1392,7 @@
   resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-11.14.0.tgz#cdf73558dca2f63b6167a962cb26a8cae843b0e1"
   integrity sha512-SkjAmmUwdLEvu/JKPOcslbx+mrvqp+ZSvBvFP/7tjv0HYC0Khs3ltjYeSiusg/KpCoSyFM+fzEJm2qdURxC1+w==
 
-"@carbon/colors@^11.19.0":
+"@carbon/colors@^11.16.0", "@carbon/colors@^11.19.0":
   version "11.19.0"
   resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-11.19.0.tgz#c5f062b9e2033bb390eac7915e451d82ece0d6c3"
   integrity sha512-cRDnv9GfktZo+p/t/Lsy2B3yvMbDI1Ht2ECU0rAikClQHVnOffz791Q4m2gy2STPdISnzjFSPmoRxGKLfYhLRA==
@@ -1402,10 +1402,10 @@
   resolved "https://registry.yarnpkg.com/@carbon/feature-flags/-/feature-flags-0.13.0.tgz#f0903233e9e38b9170bfaf2ff38fea292bb2efc3"
   integrity sha512-nca4aTE8Ss5NzjjK6fxR+mM63e0hDmH3nT3zDZ2pRQ23QoJzcmhZmaWQoLGd6ONa52vAuPWcVPPg/bynN07Q9w==
 
-"@carbon/feature-flags@^0.16.0":
-  version "0.16.0"
-  resolved "https://registry.yarnpkg.com/@carbon/feature-flags/-/feature-flags-0.16.0.tgz#0896249e14d6e581639608a3061b7f38e1810bf8"
-  integrity sha512-hCrfVZ6oVnPjjupelbvQX4D0i6GlZuKVverAf0LkOydXHrPjSyuEmg+czsylyCBg4r/hxtSTu91Tq6aqz/DsHg==
+"@carbon/feature-flags@^0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@carbon/feature-flags/-/feature-flags-0.15.0.tgz#108434a0bb3008bb4f2efeff9442892fe584c357"
+  integrity sha512-pUuJ+iQ+jkrfP4+nFgsBqM3qNsgKY59y0dZX1y2amjROFOo6fn5s/L1ZqAXkLWvmtssOiR1VWbYg1zk4IMTv+g==
 
 "@carbon/grid@^11.13.0":
   version "11.13.0"
@@ -1414,7 +1414,7 @@
   dependencies:
     "@carbon/layout" "^11.13.0"
 
-"@carbon/grid@^11.19.0":
+"@carbon/grid@^11.15.0", "@carbon/grid@^11.19.0":
   version "11.19.0"
   resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-11.19.0.tgz#a0af90b4625fd60bb9ad947b7f8360af09488e3f"
   integrity sha512-Ie8C0yifTPOF58rhkeRhINJ6KPiTVbdJwPCE+aEWTpUrwGSnuqIYZ8zQBlYQtNGQX72TSfnGY0qijPmpnIwNsg==
@@ -1445,7 +1445,7 @@
   resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-11.13.0.tgz#ba16018727e0846c1289a79b3d7af3e3f0ea880f"
   integrity sha512-MWVyk9NdWEpvfMSqEy1aBS9QA0Km3ADyEWW7D5c8r8+ZMrhPpJnmuCRMbBOkJYtZDfs4+7EuuKcacJ/kY51x7w==
 
-"@carbon/layout@^11.19.0":
+"@carbon/layout@^11.15.0", "@carbon/layout@^11.19.0":
   version "11.19.0"
   resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-11.19.0.tgz#cd0f97457a91058792d13b09293281270d2b7d91"
   integrity sha512-BI9ct+yVKrgL90l4nijMhj8dokXGBJu1Xtve9fz/lcveTyxxn7YvRu8mosGhCyw77KSU6vN2yRLJnQwqwqrLJQ==
@@ -1455,7 +1455,7 @@
   resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-11.10.0.tgz#7674652557dc1fe650eb506c38e8bf722c9d0018"
   integrity sha512-eKQTBvfgTI+txk4BjRTjObOnQ9/uWSRurzIQK4qXsRJZuxvyJTChw+0pKMjohfpzOOnv5E1XxyfM3MWURaGe6Q==
 
-"@carbon/motion@^11.15.0":
+"@carbon/motion@^11.12.0":
   version "11.15.0"
   resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-11.15.0.tgz#a4f8239c06a3f71ac25f780b22a3338ecb203656"
   integrity sha512-l7SIZMwTmv8BHPvDsQ26Y/dBLKnLGZUvD5bGcDppoUInUcKv2Dg4J0r5JONUsB2OagpBmbj/a5skcahzlaL1JQ==
@@ -1487,6 +1487,20 @@
     wicg-inert "^3.1.1"
     window-or-global "^1.0.1"
 
+"@carbon/styles@1.32.0":
+  version "1.32.0"
+  resolved "https://registry.yarnpkg.com/@carbon/styles/-/styles-1.32.0.tgz#fe7427aa535f1a5d7428aa42476f208dc830391e"
+  integrity sha512-oSMeLC6wwePS0KSHiw5eDg7I6cUTYK4q5GAjot5C4al60SYkaLEuoGlZgyXBNakqCyi07E+Yt81h+guiNbwt4w==
+  dependencies:
+    "@carbon/colors" "^11.16.0"
+    "@carbon/feature-flags" "^0.15.0"
+    "@carbon/grid" "^11.15.0"
+    "@carbon/layout" "^11.15.0"
+    "@carbon/motion" "^11.12.0"
+    "@carbon/themes" "^11.20.0"
+    "@carbon/type" "^11.19.0"
+    "@ibm/plex" "6.0.0-next.6"
+
 "@carbon/styles@^1.28.0":
   version "1.28.0"
   resolved "https://registry.yarnpkg.com/@carbon/styles/-/styles-1.28.0.tgz#6305b601a9f680efa96bafba16943a2423f33b6e"
@@ -1501,20 +1515,6 @@
     "@carbon/type" "^11.17.0"
     "@ibm/plex" "6.0.0-next.6"
 
-"@carbon/styles@^1.36.0":
-  version "1.36.0"
-  resolved "https://registry.yarnpkg.com/@carbon/styles/-/styles-1.36.0.tgz#9e4b81e8b58714141fdaa3c1dd24c91a7a3d095d"
-  integrity sha512-UKr0FdNT/QSJVfsrjn03zF364qP2XwOW6+/VaR7SijfEKR1qx9Z6MQbzNMR9OP5hvT/rr3pora1S7R3h6mtz3A==
-  dependencies:
-    "@carbon/colors" "^11.19.0"
-    "@carbon/feature-flags" "^0.16.0"
-    "@carbon/grid" "^11.19.0"
-    "@carbon/layout" "^11.19.0"
-    "@carbon/motion" "^11.15.0"
-    "@carbon/themes" "^11.24.0"
-    "@carbon/type" "^11.23.0"
-    "@ibm/plex" "6.0.0-next.6"
-
 "@carbon/telemetry@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@carbon/telemetry/-/telemetry-0.1.0.tgz#57b331cd5a855b4abbf55457456da8211624d879"
@@ -1530,7 +1530,7 @@
     "@carbon/type" "^11.17.0"
     color "^4.0.0"
 
-"@carbon/themes@^11.24.0":
+"@carbon/themes@^11.20.0":
   version "11.24.0"
   resolved "https://registry.yarnpkg.com/@carbon/themes/-/themes-11.24.0.tgz#d7010605f8ba2d25e2c829275c722f3b094c1fe4"
   integrity sha512-afVMSQ8by3yR4646UNwOmVGeyI8n0dIvehpuy4IUGQ52WXsRuveMY/F6KpATy0OadJR/C/7SZo2mqI7L8aTREA==
@@ -1548,7 +1548,7 @@
     "@carbon/grid" "^11.13.0"
     "@carbon/layout" "^11.13.0"
 
-"@carbon/type@^11.23.0":
+"@carbon/type@^11.19.0", "@carbon/type@^11.23.0":
   version "11.23.0"
   resolved "https://registry.yarnpkg.com/@carbon/type/-/type-11.23.0.tgz#144c8106e9dc1d6d6a461f91d516d867c89d340b"
   integrity sha512-bp3D2q7Su03B2Re5CHt0OdNNmAbTOJaBgKgRKKdLP97F+M27y/kk9iOAFctC0pCgmQ2qSndWRTSb3zVg5TmiEw==

From 593c090af0b2e84b808fa32e3660196be819901c Mon Sep 17 00:00:00 2001
From: Robert Isele <robert.isele@eccenca.com>
Date: Fri, 1 Sep 2023 14:57:20 +0200
Subject: [PATCH 13/13] Try fixing missing return in TextField.tsx

---
 src/components/TextField/TextField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index e5ba5605..ae0097ad 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -105,7 +105,7 @@ export const TextField = ({
             handleLabelEscape()
             return false
         }
-        otherProps.onKeyDown?.(event)
+        return otherProps.onKeyDown?.(event)
     }, [otherProps.onKeyDown, escapeToBlur])
 
   const {