@eccenca/gui-elements 23.2.0-rc.1 → 23.2.0

package/CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+## [23.2.0] - 2023-07-14
+
 ### Added
 
 -   linting the code automatically via git hook on commit action
@@ -73,6 +75,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<IconButton />`
     -   prevent double tab index when it comes with an extra tooltip element attached to it
     -   prevent tooltip tab selection when button is disabled or has set inactive tabindex itself
+-   `<SimpleDialog />`
+    -   `enforceFocus: false` is set by default, so that searchable selects keep focus on their search input field
 
 ### Fixed
 

package/dist/cjs/components/Dialog/SimpleDialog.js

@@ -17,25 +17,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SimpleDialog = void 0;
 const react_1 = __importDefault(require("react"));
 const constants_1 = require("../../configuration/constants");
+const IconButton_1 = __importDefault(require("../Icon/IconButton"));
 const Card_1 = require("./../Card");
 const Divider_1 = __importDefault(require("./../Separation/Divider"));
 const Modal_1 = __importDefault(require("./Modal"));
-const IconButton_1 = __importDefault(require("../Icon/IconButton"));
 /**
  * Simplifies the dialog display by providing a direct `Card` template for the `Modal` element.
  * Inherits all properties from `Modal`.
  */
 const SimpleDialog = (_a) => {
     var _b;
-    var { children, canOutsideClickClose = false, canEscapeKeyClose = false, title = "", actions = null, notifications = null, hasBorder = false, preventSimpleClosing = false, intent, headerOptions, showFullScreenToggler = false, startInFullScreenMode = false, size } = _a, otherProps = __rest(_a, ["children", "canOutsideClickClose", "canEscapeKeyClose", "title", "actions", "notifications", "hasBorder", "preventSimpleClosing", "intent", "headerOptions", "showFullScreenToggler", "startInFullScreenMode", "size"]);
+    var { children, canOutsideClickClose = false, canEscapeKeyClose = false, title = "", actions = null, notifications = null, hasBorder = false, preventSimpleClosing = false, enforceFocus = false, intent, headerOptions, showFullScreenToggler = false, startInFullScreenMode = false, size } = _a, otherProps = __rest(_a, ["children", "canOutsideClickClose", "canEscapeKeyClose", "title", "actions", "notifications", "hasBorder", "preventSimpleClosing", "enforceFocus", "intent", "headerOptions", "showFullScreenToggler", "startInFullScreenMode", "size"]);
     const [displayFullscreen, setDisplayFullscreen] = react_1.default.useState(startInFullScreenMode);
     const showToggler = startInFullScreenMode || showFullScreenToggler;
     const intentClassName = intent ? `${constants_1.CLASSPREFIX}-intent--${intent}` : "";
-    return (react_1.default.createElement(Modal_1.default, Object.assign({}, otherProps, { "data-test-id": (_b = otherProps["data-test-id"]) !== null && _b !== void 0 ? _b : "simpleDialogWidget", canOutsideClickClose: canOutsideClickClose || !preventSimpleClosing, canEscapeKeyClose: canEscapeKeyClose || !preventSimpleClosing, size: displayFullscreen ? "fullscreen" : size }),
+    return (react_1.default.createElement(Modal_1.default, Object.assign({ enforceFocus: enforceFocus }, otherProps, { "data-test-id": (_b = otherProps["data-test-id"]) !== null && _b !== void 0 ? _b : "simpleDialogWidget", canOutsideClickClose: canOutsideClickClose || !preventSimpleClosing, canEscapeKeyClose: canEscapeKeyClose || !preventSimpleClosing, size: displayFullscreen ? "fullscreen" : size }),
         react_1.default.createElement(Card_1.Card, { className: intentClassName },
-            (title || headerOptions || showToggler) ? (react_1.default.createElement(Card_1.CardHeader, null,
+            title || headerOptions || showToggler ? (react_1.default.createElement(Card_1.CardHeader, null,
                 react_1.default.createElement(Card_1.CardTitle, { className: intentClassName }, title),
-                (headerOptions || showToggler) ? (react_1.default.createElement(Card_1.CardOptions, null,
+                headerOptions || showToggler ? (react_1.default.createElement(Card_1.CardOptions, null,
                     headerOptions,
                     showToggler && (react_1.default.createElement(IconButton_1.default, { name: displayFullscreen ? "toggler-minimize" : "toggler-maximize", onClick: () => setDisplayFullscreen(!displayFullscreen) })))) : (react_1.default.createElement(react_1.default.Fragment, null)))) : null,
             hasBorder && react_1.default.createElement(Divider_1.default, null),

package/dist/cjs/components/Dialog/SimpleDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleDialog.js","sourceRoot":"","sources":["../../../../src/components/Dialog/SimpleDialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,6DAAsE;AAEtE,oCAOmB;AACnB,sEAA8C;AAC9C,oDAA4C;AAE5C,oEAA4C;AAwC5C;;;GAGG;AACI,MAAM,YAAY,GAAG,CAAC,EAeT,EAAE,EAAE;;QAfK,EACzB,QAAQ,EACR,oBAAoB,GAAG,KAAK,EAC5B,iBAAiB,GAAG,KAAK,EACzB,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,IAAI,EACd,aAAa,GAAG,IAAI,EACpB,SAAS,GAAG,KAAK,EACjB,oBAAoB,GAAG,KAAK,EAC5B,MAAM,EACN,aAAa,EACb,qBAAqB,GAAG,KAAK,EAC7B,qBAAqB,GAAG,KAAK,EAC7B,IAAI,OAEY,EADb,UAAU,cAdY,wNAe5B,CADgB;IAEb,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAU,qBAAqB,CAAC,CAAC;IACjG,MAAM,WAAW,GAAG,qBAAqB,IAAI,qBAAqB,CAAA;IAClE,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,uBAAM,YAAY,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACpE,OAAO,CACH,8BAAC,eAAK,oBACE,UAAU,oBAEA,MAAA,UAAU,CAAC,cAAc,CAAC,mCAAI,oBAAoB,EAChE,oBAAoB,EAAE,oBAAoB,IAAI,CAAC,oBAAoB,EACnE,iBAAiB,EAAE,iBAAiB,IAAI,CAAC,oBAAoB,EAC7D,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI;QAE7C,8BAAC,WAAI,IAAC,SAAS,EAAE,eAAe;YAE3B,CAAC,KAAK,IAAI,aAAa,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC,CACvC,8BAAC,iBAAU;gBACP,8BAAC,gBAAS,IACN,SAAS,EAAE,eAAe,IAEzB,KAAK,CACE;gBACX,CAAC,aAAa,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC,CAC9B,8BAAC,kBAAW;oBACN,aAAa;oBACd,WAAW,IAAI,CACZ,8BAAC,oBAAU,IACP,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,EACjE,OAAO,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,CAAC,iBAAiB,CAAC,GACzD,CACL,CACS,CACjB,CAAC,CAAC,CAAC,CACA,6DAAK,CACR,CACQ,CAChB,CAAC,CAAC,CAAC,IAAI;YACP,SAAS,IAAI,8BAAC,iBAAO,OAAG;YACzB,8BAAC,kBAAW,QAAE,QAAQ,CAAe;YACpC,SAAS,IAAI,8BAAC,iBAAO,OAAG;YACxB,CAAC,CAAC,aAAa,IAAI,CAChB,8BAAC,kBAAW,IAAC,SAAS,EAAE,GAAG,uBAAM,wBAAwB,IACpD,aAAa,CACJ,CACjB;YACA,OAAO,IAAI,CACR,8BAAC,kBAAW,IACR,gBAAgB,QAChB,SAAS,EAAE,eAAe,IAEzB,OAAO,CACE,CACjB,CACE,CACH,CACX,CAAC;AACN,CAAC,CAAA;AAvEY,QAAA,YAAY,gBAuExB;AAED,kBAAe,oBAAY,CAAC"}
+{"version":3,"file":"SimpleDialog.js","sourceRoot":"","sources":["../../../../src/components/Dialog/SimpleDialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAG1B,6DAAsE;AACtE,oEAA4C;AAG5C,oCAA+F;AAC/F,sEAA8C;AAC9C,oDAA4C;AAwC5C;;;GAGG;AACI,MAAM,YAAY,GAAG,CAAC,EAgBT,EAAE,EAAE;;QAhBK,EACzB,QAAQ,EACR,oBAAoB,GAAG,KAAK,EAC5B,iBAAiB,GAAG,KAAK,EACzB,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,IAAI,EACd,aAAa,GAAG,IAAI,EACpB,SAAS,GAAG,KAAK,EACjB,oBAAoB,GAAG,KAAK,EAC5B,YAAY,GAAG,KAAK,EACpB,MAAM,EACN,aAAa,EACb,qBAAqB,GAAG,KAAK,EAC7B,qBAAqB,GAAG,KAAK,EAC7B,IAAI,OAEY,EADb,UAAU,cAfY,wOAgB5B,CADgB;IAEb,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAU,qBAAqB,CAAC,CAAC;IACjG,MAAM,WAAW,GAAG,qBAAqB,IAAI,qBAAqB,CAAC;IACnE,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,uBAAM,YAAY,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACpE,OAAO,CACH,8BAAC,eAAK,kBACF,YAAY,EAAE,YAAY,IACtB,UAAU,oBAEA,MAAA,UAAU,CAAC,cAAc,CAAC,mCAAI,oBAAoB,EAChE,oBAAoB,EAAE,oBAAoB,IAAI,CAAC,oBAAoB,EACnE,iBAAiB,EAAE,iBAAiB,IAAI,CAAC,oBAAoB,EAC7D,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI;QAE7C,8BAAC,WAAI,IAAC,SAAS,EAAE,eAAe;YAC3B,KAAK,IAAI,aAAa,IAAI,WAAW,CAAC,CAAC,CAAC,CACrC,8BAAC,iBAAU;gBACP,8BAAC,gBAAS,IAAC,SAAS,EAAE,eAAe,IAAG,KAAK,CAAa;gBACzD,aAAa,IAAI,WAAW,CAAC,CAAC,CAAC,CAC5B,8BAAC,kBAAW;oBACP,aAAa;oBACb,WAAW,IAAI,CACZ,8BAAC,oBAAU,IACP,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,EACjE,OAAO,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,CAAC,iBAAiB,CAAC,GACzD,CACL,CACS,CACjB,CAAC,CAAC,CAAC,CACA,6DAAK,CACR,CACQ,CAChB,CAAC,CAAC,CAAC,IAAI;YACP,SAAS,IAAI,8BAAC,iBAAO,OAAG;YACzB,8BAAC,kBAAW,QAAE,QAAQ,CAAe;YACpC,SAAS,IAAI,8BAAC,iBAAO,OAAG;YACxB,CAAC,CAAC,aAAa,IAAI,CAChB,8BAAC,kBAAW,IAAC,SAAS,EAAE,GAAG,uBAAM,wBAAwB,IAAG,aAAa,CAAe,CAC3F;YACA,OAAO,IAAI,CACR,8BAAC,kBAAW,IAAC,gBAAgB,QAAC,SAAS,EAAE,eAAe,IACnD,OAAO,CACE,CACjB,CACE,CACH,CACX,CAAC;AACN,CAAC,CAAC;AA/DW,QAAA,YAAY,gBA+DvB;AAEF,kBAAe,oBAAY,CAAC"}

package/dist/cjs/components/Select/Select.js

@@ -38,6 +38,7 @@ function Select(_a) {
 exports.Select = Select;
 /** @deprecated: instead of `const MySelect = Select.ofType<MyType>()` use directly `<Select<MyType> {...props} />` */
 function ofType() {
+    console.warn("Usage of `ofType()` is deprecated! Instead of `const MySelect = Select.ofType<MyType>()` use directly `<Select<MyType> {...props} />`");
     return (props) => react_1.default.createElement(Select, Object.assign({}, props));
 }
 Select.ofType = ofType;

package/dist/cjs/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,gDAAuG;AAEvG,6DAAsE;AAEtE,yCAA6F;AAkC7F;;;;;GAKG;AACH,SAAgB,MAAM,CAAI,EAYT;;QAZS,EACtB,mBAAmB,EACnB,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,WAAW,GAAG,iBAAiB,EAC/B,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,UAAU,EACV,eAAe,GAAG,iBAAiB,OAEtB,EADV,gBAAgB,cAXG,mJAYzB,CADsB;IAEnB,OAAO,CACH,8BAAC,gBAAe,kBACZ,YAAY,kBACR,OAAO,EAAE,IAAI,EACb,gBAAgB,EAAE,MAAA,gBAAgB,CAAC,IAAI,mCAAI,KAAK,IAC7C,mBAAmB,GAE1B,UAAU,kBACN,KAAK,EAAE,IAAI,IACR,UAAU,GAEjB,SAAS,EAAE,GAAG,uBAAM,SAAS,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAC9D,gBAAgB,GAEnB,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CACT,8BAAC,cAAM,IACH,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,8BAAC,oBAAY,QAAE,IAAI,CAAgB,CAAC,CAAC,CAAC,8BAAC,oBAAY,QAAE,WAAW,CAAgB,EAC7F,SAAS,EAAC,MAAM,EAChB,QAAQ,QACR,IAAI,EAAE,MAAA,gBAAgB,CAAC,IAAI,mCAAI,KAAK,EACpC,QAAQ,EAAE,MAAA,gBAAgB,CAAC,QAAQ,mCAAI,KAAK,EAC5C,IAAI,EAAE,IAAI,EACV,SAAS,EACL;YACK,kBAAkB,IAAI,IAAI,IAAI,CAC3B,8BAAC,YAAI,IACD,IAAI,EAAC,iBAAiB,EACtB,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EAC1D,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACX,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,kBAAkB,EAAE,CAAC;gBACzB,CAAC,GACH,CACL;YACA,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7B,8BAAC,YAAI,IAAC,IAAI,EAAE,SAAS,GAAI,CAC5B,CAAC,CAAC,CAAC,CACA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,8BAAC,YAAI,IAAC,IAAI,EAAE,mBAAmB,GAAI,CACnD,CACF,GAET,CACL,CACa,CACrB,CAAC;AACN,CAAC;AA1DD,wBA0DC;AAED,sHAAsH;AACtH,SAAS,MAAM;IACX,OAAO,CAAC,KAAqB,EAAE,EAAE,CAAC,8BAAC,MAAM,oBAAQ,KAAK,EAAI,CAAC;AAC/D,CAAC;AAED,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;AAEvB,kBAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,gDAAuG;AAEvG,6DAAsE;AAEtE,yCAA6F;AAkC7F;;;;;GAKG;AACH,SAAgB,MAAM,CAAI,EAYT;;QAZS,EACtB,mBAAmB,EACnB,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,WAAW,GAAG,iBAAiB,EAC/B,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,UAAU,EACV,eAAe,GAAG,iBAAiB,OAEtB,EADV,gBAAgB,cAXG,mJAYzB,CADsB;IAEnB,OAAO,CACH,8BAAC,gBAAe,kBACZ,YAAY,kBACR,OAAO,EAAE,IAAI,EACb,gBAAgB,EAAE,MAAA,gBAAgB,CAAC,IAAI,mCAAI,KAAK,IAC7C,mBAAmB,GAE1B,UAAU,kBACN,KAAK,EAAE,IAAI,IACR,UAAU,GAEjB,SAAS,EAAE,GAAG,uBAAM,SAAS,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAC9D,gBAAgB,GAEnB,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CACT,8BAAC,cAAM,IACH,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,8BAAC,oBAAY,QAAE,IAAI,CAAgB,CAAC,CAAC,CAAC,8BAAC,oBAAY,QAAE,WAAW,CAAgB,EAC7F,SAAS,EAAC,MAAM,EAChB,QAAQ,QACR,IAAI,EAAE,MAAA,gBAAgB,CAAC,IAAI,mCAAI,KAAK,EACpC,QAAQ,EAAE,MAAA,gBAAgB,CAAC,QAAQ,mCAAI,KAAK,EAC5C,IAAI,EAAE,IAAI,EACV,SAAS,EACL;YACK,kBAAkB,IAAI,IAAI,IAAI,CAC3B,8BAAC,YAAI,IACD,IAAI,EAAC,iBAAiB,EACtB,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EAC1D,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACX,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,kBAAkB,EAAE,CAAC;gBACzB,CAAC,GACH,CACL;YACA,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7B,8BAAC,YAAI,IAAC,IAAI,EAAE,SAAS,GAAI,CAC5B,CAAC,CAAC,CAAC,CACA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,8BAAC,YAAI,IAAC,IAAI,EAAE,mBAAmB,GAAI,CACnD,CACF,GAET,CACL,CACa,CACrB,CAAC;AACN,CAAC;AA1DD,wBA0DC;AAED,sHAAsH;AACtH,SAAS,MAAM;IACX,OAAO,CAAC,IAAI,CACR,uIAAuI,CAC1I,CAAC;IACF,OAAO,CAAC,KAAqB,EAAE,EAAE,CAAC,8BAAC,MAAM,oBAAQ,KAAK,EAAI,CAAC;AAC/D,CAAC;AAED,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;AAEvB,kBAAe,MAAM,CAAC"}

package/dist/esm/components/Dialog/SimpleDialog.js

@@ -38,25 +38,25 @@ var __read = (this && this.__read) || function (o, n) {
 };
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
-import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle, } from "./../Card/index.js";
+import IconButton from "../Icon/IconButton.js";
+import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle } from "./../Card/index.js";
 import Divider from "./../Separation/Divider.js";
 import Modal from "./Modal.js";
-import IconButton from "../Icon/IconButton.js";
 /**
  * Simplifies the dialog display by providing a direct `Card` template for the `Modal` element.
  * Inherits all properties from `Modal`.
  */
 export var SimpleDialog = function (_a) {
     var _b;
-    var children = _a.children, _c = _a.canOutsideClickClose, canOutsideClickClose = _c === void 0 ? false : _c, _d = _a.canEscapeKeyClose, canEscapeKeyClose = _d === void 0 ? false : _d, _e = _a.title, title = _e === void 0 ? "" : _e, _f = _a.actions, actions = _f === void 0 ? null : _f, _g = _a.notifications, notifications = _g === void 0 ? null : _g, _h = _a.hasBorder, hasBorder = _h === void 0 ? false : _h, _j = _a.preventSimpleClosing, preventSimpleClosing = _j === void 0 ? false : _j, intent = _a.intent, headerOptions = _a.headerOptions, _k = _a.showFullScreenToggler, showFullScreenToggler = _k === void 0 ? false : _k, _l = _a.startInFullScreenMode, startInFullScreenMode = _l === void 0 ? false : _l, size = _a.size, otherProps = __rest(_a, ["children", "canOutsideClickClose", "canEscapeKeyClose", "title", "actions", "notifications", "hasBorder", "preventSimpleClosing", "intent", "headerOptions", "showFullScreenToggler", "startInFullScreenMode", "size"]);
-    var _m = __read(React.useState(startInFullScreenMode), 2), displayFullscreen = _m[0], setDisplayFullscreen = _m[1];
+    var children = _a.children, _c = _a.canOutsideClickClose, canOutsideClickClose = _c === void 0 ? false : _c, _d = _a.canEscapeKeyClose, canEscapeKeyClose = _d === void 0 ? false : _d, _e = _a.title, title = _e === void 0 ? "" : _e, _f = _a.actions, actions = _f === void 0 ? null : _f, _g = _a.notifications, notifications = _g === void 0 ? null : _g, _h = _a.hasBorder, hasBorder = _h === void 0 ? false : _h, _j = _a.preventSimpleClosing, preventSimpleClosing = _j === void 0 ? false : _j, _k = _a.enforceFocus, enforceFocus = _k === void 0 ? false : _k, intent = _a.intent, headerOptions = _a.headerOptions, _l = _a.showFullScreenToggler, showFullScreenToggler = _l === void 0 ? false : _l, _m = _a.startInFullScreenMode, startInFullScreenMode = _m === void 0 ? false : _m, size = _a.size, otherProps = __rest(_a, ["children", "canOutsideClickClose", "canEscapeKeyClose", "title", "actions", "notifications", "hasBorder", "preventSimpleClosing", "enforceFocus", "intent", "headerOptions", "showFullScreenToggler", "startInFullScreenMode", "size"]);
+    var _o = __read(React.useState(startInFullScreenMode), 2), displayFullscreen = _o[0], setDisplayFullscreen = _o[1];
     var showToggler = startInFullScreenMode || showFullScreenToggler;
     var intentClassName = intent ? eccgui + "-intent--" + intent : "";
-    return (React.createElement(Modal, __assign({}, otherProps, { "data-test-id": (_b = otherProps["data-test-id"]) !== null && _b !== void 0 ? _b : "simpleDialogWidget", canOutsideClickClose: canOutsideClickClose || !preventSimpleClosing, canEscapeKeyClose: canEscapeKeyClose || !preventSimpleClosing, size: displayFullscreen ? "fullscreen" : size }),
+    return (React.createElement(Modal, __assign({ enforceFocus: enforceFocus }, otherProps, { "data-test-id": (_b = otherProps["data-test-id"]) !== null && _b !== void 0 ? _b : "simpleDialogWidget", canOutsideClickClose: canOutsideClickClose || !preventSimpleClosing, canEscapeKeyClose: canEscapeKeyClose || !preventSimpleClosing, size: displayFullscreen ? "fullscreen" : size }),
         React.createElement(Card, { className: intentClassName },
-            (title || headerOptions || showToggler) ? (React.createElement(CardHeader, null,
+            title || headerOptions || showToggler ? (React.createElement(CardHeader, null,
                 React.createElement(CardTitle, { className: intentClassName }, title),
-                (headerOptions || showToggler) ? (React.createElement(CardOptions, null,
+                headerOptions || showToggler ? (React.createElement(CardOptions, null,
                     headerOptions,
                     showToggler && (React.createElement(IconButton, { name: displayFullscreen ? "toggler-minimize" : "toggler-maximize", onClick: function () { return setDisplayFullscreen(!displayFullscreen); } })))) : (React.createElement(React.Fragment, null)))) : null,
             hasBorder && React.createElement(Divider, null),

package/dist/esm/components/Dialog/SimpleDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleDialog.js","sourceRoot":"","sources":["../../../../src/components/Dialog/SimpleDialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,EACH,IAAI,EACJ,WAAW,EACX,WAAW,EACX,UAAU,EACV,WAAW,EACX,SAAS,GACZ,MAAM,WAAW,CAAC;AACnB,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,KAAqB,MAAM,SAAS,CAAC;AAE5C,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAwC5C;;;GAGG;AACH,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,EAeT;;IAdhB,IAAA,QAAQ,cAAA,EACR,4BAA4B,EAA5B,oBAAoB,mBAAG,KAAK,KAAA,EAC5B,yBAAyB,EAAzB,iBAAiB,mBAAG,KAAK,KAAA,EACzB,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA,EACd,qBAAoB,EAApB,aAAa,mBAAG,IAAI,KAAA,EACpB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,4BAA4B,EAA5B,oBAAoB,mBAAG,KAAK,KAAA,EAC5B,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,6BAA6B,EAA7B,qBAAqB,mBAAG,KAAK,KAAA,EAC7B,6BAA6B,EAA7B,qBAAqB,mBAAG,KAAK,KAAA,EAC7B,IAAI,UAAA,EACD,UAAU,cAdY,wNAe5B,CADgB;IAEP,IAAA,KAAA,OAA4C,KAAK,CAAC,QAAQ,CAAU,qBAAqB,CAAC,IAAA,EAAzF,iBAAiB,QAAA,EAAE,oBAAoB,QAAkD,CAAC;IACjG,IAAM,WAAW,GAAG,qBAAqB,IAAI,qBAAqB,CAAA;IAClE,IAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAI,MAAM,iBAAY,MAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IACpE,OAAO,CACH,oBAAC,KAAK,eACE,UAAU,oBAEA,MAAA,UAAU,CAAC,cAAc,CAAC,mCAAI,oBAAoB,EAChE,oBAAoB,EAAE,oBAAoB,IAAI,CAAC,oBAAoB,EACnE,iBAAiB,EAAE,iBAAiB,IAAI,CAAC,oBAAoB,EAC7D,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI;QAE7C,oBAAC,IAAI,IAAC,SAAS,EAAE,eAAe;YAE3B,CAAC,KAAK,IAAI,aAAa,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC,CACvC,oBAAC,UAAU;gBACP,oBAAC,SAAS,IACN,SAAS,EAAE,eAAe,IAEzB,KAAK,CACE;gBACX,CAAC,aAAa,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC,CAC9B,oBAAC,WAAW;oBACN,aAAa;oBACd,WAAW,IAAI,CACZ,oBAAC,UAAU,IACP,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,EACjE,OAAO,EAAE,cAAM,OAAA,oBAAoB,CAAC,CAAC,iBAAiB,CAAC,EAAxC,CAAwC,GACzD,CACL,CACS,CACjB,CAAC,CAAC,CAAC,CACA,yCAAK,CACR,CACQ,CAChB,CAAC,CAAC,CAAC,IAAI;YACP,SAAS,IAAI,oBAAC,OAAO,OAAG;YACzB,oBAAC,WAAW,QAAE,QAAQ,CAAe;YACpC,SAAS,IAAI,oBAAC,OAAO,OAAG;YACxB,CAAC,CAAC,aAAa,IAAI,CAChB,oBAAC,WAAW,IAAC,SAAS,EAAK,MAAM,2BAAwB,IACpD,aAAa,CACJ,CACjB;YACA,OAAO,IAAI,CACR,oBAAC,WAAW,IACR,gBAAgB,QAChB,SAAS,EAAE,eAAe,IAEzB,OAAO,CACE,CACjB,CACE,CACH,CACX,CAAC;AACN,CAAC,CAAA;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SimpleDialog.js","sourceRoot":"","sources":["../../../../src/components/Dialog/SimpleDialog.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Select/Select.js

@@ -42,6 +42,7 @@ export function Select(_a) {
 }
 /** @deprecated: instead of `const MySelect = Select.ofType<MyType>()` use directly `<Select<MyType> {...props} />` */
 function ofType() {
+    console.warn("Usage of `ofType()` is deprecated! Instead of `const MySelect = Select.ofType<MyType>()` use directly `<Select<MyType> {...props} />`");
     return function (props) { return React.createElement(Select, __assign({}, props)); };
 }
 Select.ofType = ofType;

package/dist/esm/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,eAAe,EAAwC,MAAM,qBAAqB,CAAC;AAEvG,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAoC,IAAI,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAkC7F;;;;;GAKG;AACH,MAAM,UAAU,MAAM,CAAI,EAYT;;IAXb,IAAA,mBAAmB,yBAAA,EACnB,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,mBAA+B,EAA/B,WAAW,mBAAG,iBAAiB,KAAA,EAC/B,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,kBAAkB,wBAAA,EAClB,UAAU,gBAAA,EACV,uBAAmC,EAAnC,eAAe,mBAAG,iBAAiB,KAAA,EAChC,gBAAgB,cAXG,mJAYzB,CADsB;IAEnB,OAAO,CACH,oBAAC,eAAe,aACZ,YAAY,aACR,OAAO,EAAE,IAAI,EACb,gBAAgB,EAAE,MAAA,gBAAgB,CAAC,IAAI,mCAAI,KAAK,IAC7C,mBAAmB,GAE1B,UAAU,aACN,KAAK,EAAE,IAAI,IACR,UAAU,GAEjB,SAAS,EAAK,MAAM,YAAS,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,MAAI,SAAW,CAAC,CAAC,CAAC,EAAE,CAAC,IAC9D,gBAAgB,GAEnB,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CACT,oBAAC,MAAM,IACH,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,oBAAC,YAAY,QAAE,IAAI,CAAgB,CAAC,CAAC,CAAC,oBAAC,YAAY,QAAE,WAAW,CAAgB,EAC7F,SAAS,EAAC,MAAM,EAChB,QAAQ,QACR,IAAI,EAAE,MAAA,gBAAgB,CAAC,IAAI,mCAAI,KAAK,EACpC,QAAQ,EAAE,MAAA,gBAAgB,CAAC,QAAQ,mCAAI,KAAK,EAC5C,IAAI,EAAE,IAAI,EACV,SAAS,EACL;YACK,kBAAkB,IAAI,IAAI,IAAI,CAC3B,oBAAC,IAAI,IACD,IAAI,EAAC,iBAAiB,EACtB,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EAC1D,OAAO,EAAE,UAAC,CAAC;oBACP,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,kBAAkB,EAAE,CAAC;gBACzB,CAAC,GACH,CACL;YACA,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7B,oBAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAI,CAC5B,CAAC,CAAC,CAAC,CACA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,mBAAmB,GAAI,CACnD,CACF,GAET,CACL,CACa,CACrB,CAAC;AACN,CAAC;AAED,sHAAsH;AACtH,SAAS,MAAM;IACX,OAAO,UAAC,KAAqB,IAAK,OAAA,oBAAC,MAAM,eAAQ,KAAK,EAAI,EAAxB,CAAwB,CAAC;AAC/D,CAAC;AAED,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;AAEvB,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,eAAe,EAAwC,MAAM,qBAAqB,CAAC;AAEvG,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAoC,IAAI,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAkC7F;;;;;GAKG;AACH,MAAM,UAAU,MAAM,CAAI,EAYT;;IAXb,IAAA,mBAAmB,yBAAA,EACnB,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,mBAA+B,EAA/B,WAAW,mBAAG,iBAAiB,KAAA,EAC/B,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,kBAAkB,wBAAA,EAClB,UAAU,gBAAA,EACV,uBAAmC,EAAnC,eAAe,mBAAG,iBAAiB,KAAA,EAChC,gBAAgB,cAXG,mJAYzB,CADsB;IAEnB,OAAO,CACH,oBAAC,eAAe,aACZ,YAAY,aACR,OAAO,EAAE,IAAI,EACb,gBAAgB,EAAE,MAAA,gBAAgB,CAAC,IAAI,mCAAI,KAAK,IAC7C,mBAAmB,GAE1B,UAAU,aACN,KAAK,EAAE,IAAI,IACR,UAAU,GAEjB,SAAS,EAAK,MAAM,YAAS,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,MAAI,SAAW,CAAC,CAAC,CAAC,EAAE,CAAC,IAC9D,gBAAgB,GAEnB,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CACT,oBAAC,MAAM,IACH,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,oBAAC,YAAY,QAAE,IAAI,CAAgB,CAAC,CAAC,CAAC,oBAAC,YAAY,QAAE,WAAW,CAAgB,EAC7F,SAAS,EAAC,MAAM,EAChB,QAAQ,QACR,IAAI,EAAE,MAAA,gBAAgB,CAAC,IAAI,mCAAI,KAAK,EACpC,QAAQ,EAAE,MAAA,gBAAgB,CAAC,QAAQ,mCAAI,KAAK,EAC5C,IAAI,EAAE,IAAI,EACV,SAAS,EACL;YACK,kBAAkB,IAAI,IAAI,IAAI,CAC3B,oBAAC,IAAI,IACD,IAAI,EAAC,iBAAiB,EACtB,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EAC1D,OAAO,EAAE,UAAC,CAAC;oBACP,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,kBAAkB,EAAE,CAAC;gBACzB,CAAC,GACH,CACL;YACA,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7B,oBAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAI,CAC5B,CAAC,CAAC,CAAC,CACA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,mBAAmB,GAAI,CACnD,CACF,GAET,CACL,CACa,CACrB,CAAC;AACN,CAAC;AAED,sHAAsH;AACtH,SAAS,MAAM;IACX,OAAO,CAAC,IAAI,CACR,uIAAuI,CAC1I,CAAC;IACF,OAAO,UAAC,KAAqB,IAAK,OAAA,oBAAC,MAAM,eAAQ,KAAK,EAAI,EAAxB,CAAwB,CAAC;AAC/D,CAAC;AAED,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;AAEvB,eAAe,MAAM,CAAC"}

package/dist/types/components/Dialog/SimpleDialog.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { IntentTypes } from "../../common/Intent";
-import { ModalProps } from "./Modal";
 import { TestableComponent } from "../interfaces";
+import { ModalProps } from "./Modal";
 export interface SimpleDialogProps extends ModalProps, TestableComponent {
     /**
      * The title of the dialog.
@@ -43,5 +43,5 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
  * Simplifies the dialog display by providing a direct `Card` template for the `Modal` element.
  * Inherits all properties from `Modal`.
  */
-export declare const SimpleDialog: ({ children, canOutsideClickClose, canEscapeKeyClose, title, actions, notifications, hasBorder, preventSimpleClosing, intent, headerOptions, showFullScreenToggler, startInFullScreenMode, size, ...otherProps }: SimpleDialogProps) => React.JSX.Element;
+export declare const SimpleDialog: ({ children, canOutsideClickClose, canEscapeKeyClose, title, actions, notifications, hasBorder, preventSimpleClosing, enforceFocus, intent, headerOptions, showFullScreenToggler, startInFullScreenMode, size, ...otherProps }: SimpleDialogProps) => React.JSX.Element;
 export default SimpleDialog;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "23.2.0-rc.1",
+    "version": "23.2.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

package/src/components/Application/_header.scss

@@ -5,32 +5,37 @@
     own rule patches.
 */
 
+@use "sass:color";
+
 /// Header bar background
 $shell-header-bg-01: $eccgui-color-applicationheader-background !default;
 
 /// Header menu trigger hover, Header nav link hover
-$shell-header-bg-02: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-header-bg-02: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%) !default;
 
 /// Header action active background
-$shell-header-bg-03: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%) !default;
+$shell-header-bg-03: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%) !default;
 
 /// Header submenu link hover
-$shell-header-bg-04: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default; //TODO needs color var gray-90-hover
+$shell-header-bg-04: color.adjust(
+    $eccgui-color-applicationheader-background,
+    $lightness: -5%
+) !default; // TODO needs color var gray-90-hover
 
 /// Header nav link active and focus background
-$shell-header-bg-05: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-header-bg-05: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%) !default;
 
 /// Header nav link submenu
-$shell-header-bg-06: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%) !default;
+$shell-header-bg-06: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%) !default;
 
 /// Header border bottom
 $shell-header-border-01: transparent !default;
 
 /// Header focus
-$shell-header-focus: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%) !default;
+$shell-header-focus: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%) !default;
 
 /// Primary text in header, Title text
-$shell-header-text-01: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%) !default;
+$shell-header-text-01: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%) !default;
 
 /// Secondary text in header, Menu item nav text
 $shell-header-text-02: $eccgui-color-applicationheader-text !default;
@@ -48,7 +53,7 @@ $shell-header-icon-03: $eccgui-color-applicationheader-text !default;
 $shell-header-link: $blue-60 !default;
 
 // load library sub component
-@import '~@carbon/styles/scss/components/ui-shell/header/index';
+@import "~@carbon/styles/scss/components/ui-shell/header/index";
 
 // tweack original layout
 
@@ -62,11 +67,10 @@ $shell-header-link: $blue-60 !default;
 }
 
 .#{$prefix}--header__menu-trigger {
-    margin-right: 0;
     flex-shrink: 0;
+    margin-right: 0;
 }
 
-
 span.#{$prefix}--header__name {
     // @extend a.#{$prefix}--header__name;
     @extend .#{$prefix}--header__name;
@@ -79,15 +83,19 @@ span.#{$prefix}--header__name {
 }
 
 .#{$eccgui}-application__title--withsidebar {
-    width: mini-units(40 - 8);
     flex-shrink: 0;
+    width: mini-units(40 - 8);
 }
 
 .#{$eccgui}-application__title--content {
-    white-space: nowrap;
     display: inline-block;
     overflow: hidden;
+    font-size: $eccgui-size-typo-caption;
+    font-weight: $eccgui-font-weight-bold;
+    line-height: $eccgui-size-typo-caption-lineheight;
     text-overflow: ellipsis;
+    letter-spacing: $eccgui-font-spacing-wide;
+    white-space: nowrap;
 }
 
 .#{$eccgui}-application__title--depiction {
@@ -98,38 +106,23 @@ span.#{$prefix}--header__name {
         display: none;
     }
 
-    & > img, & > svg {
+    & > img,
+    & > svg {
         display: inline;
+        width: auto;
+        max-width: mini-units(5);
+        height: auto;
+        max-height: mini-units(5);
         padding: 0;
         margin: mini-units(1.4) 0 mini-units(1.6) 0;
-        max-height: mini-units(5);
-        max-width: mini-units(5);
-        width: auto;
-        height:auto;
         vertical-align: middle;
     }
 }
 
-.#{$prefix}--header__nav {
-    // padding-left: mini-units(2);
-}
-
-a.#{$prefix}--header__menu-item {
-    // padding: 0 mini-units(2);
-}
-
-.#{$prefix}--header__menu-title[aria-expanded='true'] + .#{$prefix}--header__menu {
-    // width: mini-units(25);
-}
-
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item {
     height: mini-units(8);
 }
 
-.#{$prefix}--header__menu-arrow {
-    // margin-left: mini-units(1);
-}
-
 // tweak original colors (as long as config does not work properly)
 
 // $shell-header-bg-01
@@ -137,38 +130,40 @@ a.#{$prefix}--header__menu-item {
 .#{$prefix}--skip-to-content:focus {
     background-color: $eccgui-color-applicationheader-background;
 }
+
 // $shell-header-bg-02
 a.#{$prefix}--header__menu-item:hover {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
+    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
 }
 .#{$prefix}--header__menu-trigger:hover {
-    fill: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
+    fill: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
 }
 
 // $shell-header-bg-03
 .#{$prefix}--header__action:active,
-.#{$prefix}--header__menu-title[aria-expanded='true'] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:active,
-.#{$prefix}--header__action:active,
+.#{$prefix}--header__menu-title[aria-expanded="true"] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:active,
 a.#{$prefix}--header__menu-item:active {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%);
+    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%);
 }
 
 // $shell-header-bg-04
 .#{$prefix}--header__action:hover,
-.#{$prefix}--header__menu-title[aria-expanded='true'] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%);
+.#{$prefix}--header__menu-title[aria-expanded="true"] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
+    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%);
 }
 
 // $shell-header-bg-05
 .#{$prefix}--header__action--active {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
-    border-bottom-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
+    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
+    border-right-color: transparent;
+    border-bottom-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
+    border-left-color: transparent;
 }
 
 // $shell-header-bg-06
-.#{$prefix}--header__menu-title[aria-expanded='true'],
+.#{$prefix}--header__menu-title[aria-expanded="true"],
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%);
+    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%);
 }
 
 // $shell-header-border-01
@@ -176,10 +171,6 @@ a.#{$prefix}--header__menu-item:active {
 .#{$prefix}--header__action {
     border-bottom: none;
 }
-.#{$prefix}--header__action--active {
-    border-left-color: transparent;
-    border-right-color: transparent;
-}
 .#{$prefix}--header__nav {
     &::before {
         background-color: transparent;
@@ -187,13 +178,13 @@ a.#{$prefix}--header__menu-item:active {
 }
 
 // $shell-header-focus
-.#{$prefix}--header__action:focus ,
+.#{$prefix}--header__action:focus,
 a.#{$prefix}--header__name:focus,
 a.#{$prefix}--header__menu-item:focus {
-    border-color: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%);
+    border-color: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%);
 }
-.#{$prefix}--header__menu-title[aria-expanded='true'] {
-    color: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%);
+.#{$prefix}--header__menu-title[aria-expanded="true"] {
+    color: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%);
 }
 
 // $shell-header-text-01
@@ -205,34 +196,34 @@ a.#{$prefix}--header__menu-item:active,
 a.#{$prefix}--header__menu-item:focus,
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover,
 .#{$prefix}--skip-to-content:focus {
-  color: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%);
+    color: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%);
 }
 
 // $shell-header-text-02
 a.#{$prefix}--header__menu-item {
-  color: $eccgui-color-applicationheader-text;
+    color: $eccgui-color-applicationheader-text;
 }
 
 // $shell-header-icon-01
 .#{$prefix}--header__action,
 .#{$prefix}--header__action:hover,
 .#{$prefix}--header__action:active,
- .#{$prefix}--header__action:focus {
+.#{$prefix}--header__action:focus {
     color: $eccgui-color-applicationheader-text;
 }
 .#{$prefix}--header__menu-trigger > svg,
 a.#{$prefix}--header__menu-item:hover > svg,
 a.#{$prefix}--header__menu-item:active > svg,
 a.#{$prefix}--header__menu-item:focus > svg {
-  fill: $eccgui-color-applicationheader-text;
+    fill: $eccgui-color-applicationheader-text;
 }
 
 // $shell-header-icon-02
 .#{$prefix}--header__action > svg {
-  fill: $eccgui-color-applicationheader-text;
+    fill: $eccgui-color-applicationheader-text;
 }
 
 // $shell-header-icon-03
 .#{$prefix}--header__menu-arrow {
-  fill: $eccgui-color-applicationheader-text;
+    fill: $eccgui-color-applicationheader-text;
 }

package/src/components/Dialog/SimpleDialog.tsx

@@ -1,18 +1,13 @@
 import React from "react";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import { IntentTypes } from "../../common/Intent";
-import {
-    Card,
-    CardActions,
-    CardContent,
-    CardHeader,
-    CardOptions,
-    CardTitle,
-} from "./../Card";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import IconButton from "../Icon/IconButton";
+import { TestableComponent } from "../interfaces";
+
+import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle } from "./../Card";
 import Divider from "./../Separation/Divider";
 import Modal, { ModalProps } from "./Modal";
-import {TestableComponent} from "../interfaces";
-import IconButton from "../Icon/IconButton";
 
 export interface SimpleDialogProps extends ModalProps, TestableComponent {
     /**
@@ -45,11 +40,11 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
      */
     intent?: IntentTypes;
     /** Optional props for the wrapper div element inside the modal. */
-    wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+    wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
     /** If a full screen toggler is shown that will allow to switch to full screen mode. */
-    showFullScreenToggler?: boolean
+    showFullScreenToggler?: boolean;
     /** Starts the modal in full screen mode. The show full screen toggler will be automatically enabled. */
-    startInFullScreenMode?: boolean
+    startInFullScreenMode?: boolean;
 }
 
 /**
@@ -65,6 +60,7 @@ export const SimpleDialog = ({
     notifications = null,
     hasBorder = false,
     preventSimpleClosing = false,
+    enforceFocus = false,
     intent,
     headerOptions,
     showFullScreenToggler = false,
@@ -73,10 +69,11 @@ export const SimpleDialog = ({
     ...otherProps
 }: SimpleDialogProps) => {
     const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startInFullScreenMode);
-    const showToggler = startInFullScreenMode || showFullScreenToggler
+    const showToggler = startInFullScreenMode || showFullScreenToggler;
     const intentClassName = intent ? `${eccgui}-intent--${intent}` : "";
     return (
         <Modal
+            enforceFocus={enforceFocus}
             {...otherProps}
             // set default test id if not given
             data-test-id={otherProps["data-test-id"] ?? "simpleDialogWidget"}
@@ -84,18 +81,13 @@ export const SimpleDialog = ({
             canEscapeKeyClose={canEscapeKeyClose || !preventSimpleClosing}
             size={displayFullscreen ? "fullscreen" : size}
         >
-            <Card className={intentClassName}
-            >
-                {(title || headerOptions || showToggler) ? (
+            <Card className={intentClassName}>
+                {title || headerOptions || showToggler ? (
                     <CardHeader>
-                        <CardTitle
-                            className={intentClassName}
-                        >
-                            {title}
-                        </CardTitle>
-                        {(headerOptions || showToggler) ? (
+                        <CardTitle className={intentClassName}>{title}</CardTitle>
+                        {headerOptions || showToggler ? (
                             <CardOptions>
-                                { headerOptions }
+                                {headerOptions}
                                 {showToggler && (
                                     <IconButton
                                         name={displayFullscreen ? "toggler-minimize" : "toggler-maximize"}
@@ -112,21 +104,16 @@ export const SimpleDialog = ({
                 <CardContent>{children}</CardContent>
                 {hasBorder && <Divider />}
                 {!!notifications && (
-                    <CardContent className={`${eccgui}-dialog__notifications`}>
-                        {notifications}
-                    </CardContent>
+                    <CardContent className={`${eccgui}-dialog__notifications`}>{notifications}</CardContent>
                 )}
                 {actions && (
-                    <CardActions
-                        inverseDirection
-                        className={intentClassName}
-                    >
+                    <CardActions inverseDirection className={intentClassName}>
                         {actions}
                     </CardActions>
                 )}
             </Card>
         </Modal>
     );
-}
+};
 
 export default SimpleDialog;

package/src/components/Select/Select.tsx

@@ -105,6 +105,9 @@ export function Select<T>({
 
 /** @deprecated: instead of `const MySelect = Select.ofType<MyType>()` use directly `<Select<MyType> {...props} />` */
 function ofType<U>() {
+    console.warn(
+        "Usage of `ofType()` is deprecated! Instead of `const MySelect = Select.ofType<MyType>()` use directly `<Select<MyType> {...props} />`"
+    );
     return (props: SelectProps<U>) => <Select<U> {...props} />;
 }
 

package/src/components/Select/_select.scss

@@ -3,7 +3,7 @@
 .#{$ns}-select-popover {
     .#{$ns}-menu {
         max-width: unset;
-        max-height: unset;
+        max-height: 40vh;
     }
 }