npm - @eccenca/gui-elements - Versions diffs - 24.1.0-rc.0 → 24.1.0-rc.2 - Mend

@eccenca/gui-elements 24.1.0-rc.0 → 24.1.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -6,6 +6,21 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ## [Unreleased]
+### Added
+-   `CntentGroup` component
+    -   Manage display of a grouped content section.
+    -   Add info, actions and context annotations by using its properties.
+    -   Can be nested into each other.
+-   `<CodeEditor />`
+    -   implemented support for linting which is enabled via `useLinting` prop
+    -   `turtle` and `javascript` are currently supported languages for linting
+    -   editor is focused on load if `autoFocus` prop is set to `true`
+    -   implemented support for `disabled` state in code editor
+    -   implemented support for `intent` states in code editor
+## [24.0.1] - 2025-02-06
 ### Changed
 -   `eslint` libraries were upgraded to v9, so `node` v18.18 or higher is required
@@ -13,7 +28,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ### Fixed
 -   `MultiSelect`:
-    -    Old suggestions might be shown for a very short time when typing in a new search query.
+    -   Old suggestions might be shown for a very short time when typing in a new search query.
+-   `CodeEditor`:
+    -   Broken highlighting for editor modes that leveraged adapted legacy modes.
 ## [24.0.0] - 2024-12-17
@@ -64,12 +81,6 @@ This is a major release, and it might be not compatible with your current usage
     -   `htmlContentBlockProps` can now be used to configure the wrapper around the Markdown content
 -   `$eccgui-selector-text-spot-highlight` SCSS config variable to specify selector that is used to create shortly highlighted spots
     -   it is highlighted when the selector is also active local anchor target or if it has the `.eccgui-typography--spothighlight` class attached to it
--   `<CodeEditor />`
-    -   implemented support for linting which is enabled via `useLinting` prop
-    -   `turtle` and `javascript` are currently supported languages for linting
-    -   editor is focused on load if `autoFocus` prop is set to `true`
-    -   implemented support for `disabled` state in code editor
-    -   implemented support for `intent` states in code editor
 ### Fixed

package/dist/cjs/components/ContentGroup/ContentGroup.js ADDED Viewed

@@ -0,0 +1,95 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentGroup = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const color_1 = __importDefault(require("color"));
+const constants_1 = require("../../configuration/constants");
+const index_1 = require("../index");
+/**
+ * Manage display of a grouped content section.
+ * Add info, actions and context annotations by using its properties.
+ * Can be nested into each other.
+ */
+const ContentGroup = (_a) => {
+    var _b;
+    var { children, className = "", title, contextInfo, annotation, actionOptions, isCollapsed = false, textToggleCollapse, handlerToggleCollapse, borderMainConnection = false, borderSubConnection = false, level = 1, minimumHeadlineLevel = 3, whitespaceSize = "small", style, stickyHeaderProps, description, hideGroupDivider, contentProps } = _a, otherContentWrapperProps = __rest(_a, ["children", "className", "title", "contextInfo", "annotation", "actionOptions", "isCollapsed", "textToggleCollapse", "handlerToggleCollapse", "borderMainConnection", "borderSubConnection", "level", "minimumHeadlineLevel", "whitespaceSize", "style", "stickyHeaderProps", "description", "hideGroupDivider", "contentProps"]);
+    const displayHeader = title || handlerToggleCollapse;
+    let borderGradient = undefined;
+    if (typeof borderSubConnection === "object") {
+        const borderColors = Array.isArray(borderSubConnection) ? borderSubConnection : [borderSubConnection];
+        borderGradient = borderColors.reduce((acc, borderColor, index) => {
+            try {
+                const color = (0, color_1.default)(borderColor);
+                acc.push(`${color.rgb().toString()} ` +
+                    `${(index / borderColors.length) * 100}% ` +
+                    `${((index + 1) / borderColors.length) * 100}%`);
+            }
+            catch (_a) {
+                // eslint-disable-next-line no-console
+                console.warn("Received invalid background color for tag: " + borderColor);
+            }
+            return acc;
+        }, []);
+    }
+    const contextInfoElements = Array.isArray(contextInfo) ? contextInfo : [contextInfo];
+    const _c = contentProps !== null && contentProps !== void 0 ? contentProps : {}, { className: contentClassName } = _c, otherContentProps = __rest(_c, ["className"]);
+    const headerContent = displayHeader ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_1.SectionHeader, { className: `${constants_1.CLASSPREFIX}-contentgroup__header` },
+            react_1.default.createElement(index_1.Toolbar, null,
+                handlerToggleCollapse && (react_1.default.createElement(index_1.ToolbarSection, null,
+                    react_1.default.createElement(index_1.IconButton, { className: `${constants_1.CLASSPREFIX}-contentgroup__header__toggler`, name: isCollapsed ? "toggler-showmore" : "toggler-showless", text: textToggleCollapse !== null && textToggleCollapse !== void 0 ? textToggleCollapse : (isCollapsed ? "Show more" : "Show less"), onClick: handlerToggleCollapse }),
+                    react_1.default.createElement(index_1.Spacing, { vertical: true, size: "small" }))),
+                title && (react_1.default.createElement(index_1.ToolbarSection, { canShrink: true },
+                    react_1.default.createElement("h" +
+                        Math.min(Math.max(minimumHeadlineLevel, level + minimumHeadlineLevel), 6).toString(), {
+                        children: react_1.default.createElement(index_1.OverflowText, null, title),
+                        className: `${constants_1.CLASSPREFIX}-contentgroup__header__title`,
+                    }),
+                    description && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(index_1.Spacing, { vertical: true, size: "tiny" }),
+                        react_1.default.createElement(index_1.Tooltip, { content: description },
+                            react_1.default.createElement(index_1.Icon, { name: "item-info", small: true, className: "dmapp--text-info" })))))),
+                contextInfoElements &&
+                    ((_b = contextInfoElements[0]) === null || _b === void 0 ? void 0 : _b.props) &&
+                    Object.values(contextInfoElements[0].props).every((v) => v !== undefined) && (react_1.default.createElement(index_1.ToolbarSection, { className: `${constants_1.CLASSPREFIX}-contentgroup__header__context`, canGrow: true },
+                    react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-contentgroup__content ` },
+                        react_1.default.createElement(index_1.Spacing, { vertical: true, size: "tiny" }),
+                        contextInfoElements))),
+                !isCollapsed && handlerToggleCollapse && actionOptions && (react_1.default.createElement(index_1.ToolbarSection, { className: `${constants_1.CLASSPREFIX}-contentgroup__header__options` },
+                    react_1.default.createElement(index_1.Spacing, { vertical: true, size: "small" }),
+                    actionOptions)))),
+        (!isCollapsed || !handlerToggleCollapse) && (react_1.default.createElement(react_1.default.Fragment, null,
+            !hideGroupDivider && react_1.default.createElement(index_1.Divider, { addSpacing: "small" }),
+            react_1.default.createElement(index_1.Spacing, { size: whitespaceSize }))))) : (react_1.default.createElement(react_1.default.Fragment, null));
+    return (react_1.default.createElement(index_1.Section, Object.assign({ className: `${constants_1.CLASSPREFIX}-contentgroup` +
+            (className ? ` ${className}` : "") +
+            (whitespaceSize ? ` ${constants_1.CLASSPREFIX}-contentgroup--padding-${whitespaceSize}` : "") +
+            (borderMainConnection ? ` ${constants_1.CLASSPREFIX}-contentgroup--border-main` : "") +
+            (borderSubConnection ? ` ${constants_1.CLASSPREFIX}-contentgroup--border-sub` : ""), style: borderGradient
+            ? Object.assign(Object.assign({}, (style !== null && style !== void 0 ? style : {})), { [`--${constants_1.CLASSPREFIX}-color-contentgroup-border-sub`]: borderGradient.join(", ") })
+            : style }, otherContentWrapperProps),
+        headerContent && stickyHeaderProps ? (react_1.default.createElement(index_1.StickyTarget, Object.assign({}, stickyHeaderProps), headerContent)) : (headerContent),
+        (!isCollapsed || !handlerToggleCollapse) && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-contentgroup__content` },
+                react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(`${constants_1.CLASSPREFIX}-contentgroup__content__body`, contentClassName) }, otherContentProps), children),
+                contextInfo && !displayHeader && (react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-contentgroup__content__context` }, contextInfoElements)),
+                annotation && react_1.default.createElement("div", null, annotation),
+                actionOptions && !displayHeader && (react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-contentgroup__content__options` }, actionOptions)))))));
+};
+exports.ContentGroup = ContentGroup;
+//# sourceMappingURL=ContentGroup.js.map

package/dist/cjs/components/ContentGroup/ContentGroup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ContentGroup.js","sourceRoot":"","sources":["../../../../src/components/ContentGroup/ContentGroup.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/index.js CHANGED Viewed

@@ -64,5 +64,6 @@ __exportStar(require("./Tooltip/Tooltip"), exports);
 __exportStar(require("./Tree/Tree"), exports);
 __exportStar(require("./Typography"), exports);
 __exportStar(require("./Workspace"), exports);
+__exportStar(require("./ContentGroup/ContentGroup"), exports);
 __exportStar(require("./interfaces"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,gDAA8B;AAC9B,sDAAoC;AACpC,iDAA+B;AAC/B,mDAAiC;AACjC,0DAAwC;AACxC,gDAA8B;AAC9B,+CAA6B;AAC7B,kDAAgC;AAChC,yCAAuB;AACvB,sDAAoC;AACpC,mDAAiC;AACjC,wDAAsC;AACtC,2CAAyB;AACzB,mDAAiC;AACjC,yCAAuB;AACvB,yCAAuB;AACvB,8DAA4C;AAC5C,yCAAuB;AACvB,2CAAyB;AACzB,oEAAkD;AAClD,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,yCAAuB;AACvB,4DAA0C;AAC1C,wEAAsD;AACtD,iDAA+B;AAC/B,iDAA+B;AAC/B,0DAAwC;AACxC,gDAA8B;AAC9B,sDAAoC;AACpC,4DAA0C;AAC1C,kDAAgC;AAChC,uDAAqC;AACrC,uDAAqC;AACrC,sDAAoC;AACpC,oDAAkC;AAClC,2CAAyB;AACzB,8CAA4B;AAC5B,kDAAgC;AAChC,0CAAwB;AACxB,yCAAuB;AACvB,wCAAsB;AACtB,8CAA4B;AAC5B,4CAA0B;AAC1B,oDAAkC;AAClC,8CAA4B;AAC5B,+CAA6B;AAC7B,8CAA4B;~~AAE5B~~,+CAA6B"}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,gDAA8B;AAC9B,sDAAoC;AACpC,iDAA+B;AAC/B,mDAAiC;AACjC,0DAAwC;AACxC,gDAA8B;AAC9B,+CAA6B;AAC7B,kDAAgC;AAChC,yCAAuB;AACvB,sDAAoC;AACpC,mDAAiC;AACjC,wDAAsC;AACtC,2CAAyB;AACzB,mDAAiC;AACjC,yCAAuB;AACvB,yCAAuB;AACvB,8DAA4C;AAC5C,yCAAuB;AACvB,2CAAyB;AACzB,oEAAkD;AAClD,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,yCAAuB;AACvB,4DAA0C;AAC1C,wEAAsD;AACtD,iDAA+B;AAC/B,iDAA+B;AAC/B,0DAAwC;AACxC,gDAA8B;AAC9B,sDAAoC;AACpC,4DAA0C;AAC1C,kDAAgC;AAChC,uDAAqC;AACrC,uDAAqC;AACrC,sDAAoC;AACpC,oDAAkC;AAClC,2CAAyB;AACzB,8CAA4B;AAC5B,kDAAgC;AAChC,0CAAwB;AACxB,yCAAuB;AACvB,wCAAsB;AACtB,8CAA4B;AAC5B,4CAA0B;AAC1B,oDAAkC;AAClC,8CAA4B;AAC5B,+CAA6B;AAC7B,8CAA4B;AAC5B,8DAA4C;AAE5C,+CAA6B"}

package/dist/cjs/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.js CHANGED Viewed

@@ -1,20 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCodeMirrorModeExtension = exports.supportedCodeEditorModes = void 0;
+//adapted v6 modes imports
+const lang_javascript_1 = require("@codemirror/lang-javascript");
 const lang_json_1 = require("@codemirror/lang-json");
-//modes imports
 const lang_markdown_1 = require("@codemirror/lang-markdown");
+const lang_sql_1 = require("@codemirror/lang-sql");
 const lang_xml_1 = require("@codemirror/lang-xml");
+const lang_yaml_1 = require("@codemirror/lang-yaml");
 const language_1 = require("@codemirror/language");
-const javascript_1 = require("@codemirror/legacy-modes/mode/javascript");
+//legacy mode imports
 const jinja2_1 = require("@codemirror/legacy-modes/mode/jinja2");
 const mathematica_1 = require("@codemirror/legacy-modes/mode/mathematica");
 const ntriples_1 = require("@codemirror/legacy-modes/mode/ntriples");
 const python_1 = require("@codemirror/legacy-modes/mode/python");
 const sparql_1 = require("@codemirror/legacy-modes/mode/sparql");
-const sql_1 = require("@codemirror/legacy-modes/mode/sql");
 const turtle_1 = require("@codemirror/legacy-modes/mode/turtle");
-const yaml_1 = require("@codemirror/legacy-modes/mode/yaml");
 //adaptations
 const codemirrorTestHelper_1 = require("../tests/codemirrorTestHelper");
 const supportedModes = {
@@ -23,19 +24,27 @@ const supportedModes = {
     sparql: sparql_1.sparql,
     turtle: turtle_1.turtle,
     xml: lang_xml_1.xml,
-    yaml: yaml_1.yaml,
+    yaml: lang_yaml_1.yaml,
     jinja2: jinja2_1.jinja2,
     json: lang_json_1.json,
     ntriples: ntriples_1.ntriples,
     mathematica: mathematica_1.mathematica,
-    sql: sql_1.sql,
-    javascript: javascript_1.javascript,
+    sql: lang_sql_1.sql,
+    javascript: lang_javascript_1.javascript,
 };
 exports.supportedCodeEditorModes = Object.keys(supportedModes);
+const v6AdaptedModes = new Map([
+    ["json", true],
+    ["markdown", true],
+    ["xml", true],
+    ["sql", true],
+    ["yaml", true],
+    ["javascript", true],
+]);
 const useCodeMirrorModeExtension = (mode) => {
     return !mode
         ? (0, codemirrorTestHelper_1.adaptedSyntaxHighlighting)(language_1.defaultHighlightStyle)
-        : ["json", "markdown", "xml"].includes(mode)
+        : v6AdaptedModes.has(mode)
             ? (typeof supportedModes[mode] === "function" ? supportedModes[mode] : () => null)()
             : language_1.StreamLanguage === null || language_1.StreamLanguage === void 0 ? void 0 : language_1.StreamLanguage.define(supportedModes[mode]);
 };

package/dist/cjs/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCodemirrorModeExtension.hooks.js","sourceRoot":"","sources":["../../../../../src/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.ts"],"names":[],"mappings":";;;AAAA,qDAA6C;AAC7C,~~eAAe;AACf,~~6DAAqD;AACrD,mDAA2C;AAC3C,mDAA4G;AAC5G,~~yEAAsE~~;~~AACtE~~,iEAA8D;AAC9D,2EAAwE;AACxE,qEAAkE;AAClE,iEAA8D;AAC9D,iEAA8D;AAC9D,~~2DAAwD;AACxD,~~iEAA8D;~~AAC9D~~,~~6DAA0D;AAE1D,~~aAAa;AACb,wEAA0E;AAE1E,MAAM,cAAc,GAAG;IACnB,QAAQ,EAAR,wBAAQ;IACR,MAAM,EAAN,eAAM;IACN,MAAM,EAAN,eAAM;IACN,MAAM,EAAN,eAAM;IACN,GAAG,EAAH,cAAG;IACH,IAAI,EAAJ,~~WAAI~~;IACJ,MAAM,EAAN,eAAM;IACN,IAAI,EAAJ,gBAAI;IACJ,QAAQ,EAAR,mBAAQ;IACR,WAAW,EAAX,yBAAW;IACX,GAAG,EAAH,~~SAAG~~;IACH,UAAU,EAAV,~~uBAAU~~;CACJ,CAAC;AAEE,QAAA,wBAAwB,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAuC,CAAC;~~AAGnG~~,MAAM,0BAA0B,GAAG,CAAC,IAA+B,EAAE,EAAE;IAC1E,OAAO,CAAC,IAAI;QACR,CAAC,CAAC,IAAA,gDAAyB,EAAC,gCAAqB,CAAC;QAClD,CAAC,CAAC,~~CAAC~~,~~MAAM,EAAE,UAAU,EAAE,KAAK,~~CAAC,~~CAAC~~,~~QAAQ,~~CAAC,IAAI,CAAC;~~YAC5C~~,CAAC,CAAE,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAA2B,EAAE;YAC/G,CAAC,CAAC,yBAAc,aAAd,yBAAc,uBAAd,yBAAc,CAAE,MAAM,CAAC,cAAc,CAAC,IAAI,CAA0B,CAAC,CAAC;AAChF,CAAC,CAAC;AANW,QAAA,0BAA0B,8BAMrC"}
1	+ {"version":3,"file":"useCodemirrorModeExtension.hooks.js","sourceRoot":"","sources":["../../../../../src/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.ts"],"names":[],"mappings":";;;AAAA,0BAA0B;AAC1B,iEAAyD;AACzD,qDAA6C;AAC7C,6DAAqD;AACrD,mDAA2C;AAC3C,mDAA2C;AAC3C,qDAA6C;AAC7C,mDAA4G;AAC5G,qBAAqB;AACrB,iEAA8D;AAC9D,2EAAwE;AACxE,qEAAkE;AAClE,iEAA8D;AAC9D,iEAA8D;AAC9D,iEAA8D;AAE9D,aAAa;AACb,wEAA0E;AAE1E,MAAM,cAAc,GAAG;IACnB,QAAQ,EAAR,wBAAQ;IACR,MAAM,EAAN,eAAM;IACN,MAAM,EAAN,eAAM;IACN,MAAM,EAAN,eAAM;IACN,GAAG,EAAH,cAAG;IACH,IAAI,EAAJ,gBAAI;IACJ,MAAM,EAAN,eAAM;IACN,IAAI,EAAJ,gBAAI;IACJ,QAAQ,EAAR,mBAAQ;IACR,WAAW,EAAX,yBAAW;IACX,GAAG,EAAH,cAAG;IACH,UAAU,EAAV,4BAAU;CACJ,CAAC;AAEE,QAAA,wBAAwB,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAuC,CAAC;AAG1G,MAAM,cAAc,GAAmD,IAAI,GAAG,CAAC;IAC3E,CAAC,MAAM,EAAE,IAAI,CAAC;IACd,CAAC,UAAU,EAAE,IAAI,CAAC;IAClB,CAAC,KAAK,EAAE,IAAI,CAAC;IACb,CAAC,KAAK,EAAE,IAAI,CAAC;IACb,CAAC,MAAM,EAAE,IAAI,CAAC;IACd,CAAC,YAAY,EAAE,IAAI,CAAC;CACvB,CAAC,CAAC;AAEI,MAAM,0BAA0B,GAAG,CAAC,IAA+B,EAAE,EAAE;IAC1E,OAAO,CAAC,IAAI;QACR,CAAC,CAAC,IAAA,gDAAyB,EAAC,gCAAqB,CAAC;QAClD,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC;YAC1B,CAAC,CAAE,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAA2B,EAAE;YAC/G,CAAC,CAAC,yBAAc,aAAd,yBAAc,uBAAd,yBAAc,CAAE,MAAM,CAAC,cAAc,CAAC,IAAI,CAA0B,CAAC,CAAC;AAChF,CAAC,CAAC;AANW,QAAA,0BAA0B,8BAMrC"}

package/dist/esm/components/ContentGroup/ContentGroup.js ADDED Viewed

@@ -0,0 +1,100 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import classNames from "classnames";
+import Color from "color";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
+import { Divider, Icon, IconButton, OverflowText, Section, SectionHeader, Spacing, StickyTarget, Toolbar, ToolbarSection, Tooltip, } from "../index.js";
+/**
+ * Manage display of a grouped content section.
+ * Add info, actions and context annotations by using its properties.
+ * Can be nested into each other.
+ */
+export var ContentGroup = function (_a) {
+    var _b;
+    var _c;
+    var children = _a.children, _d = _a.className, className = _d === void 0 ? "" : _d, title = _a.title, contextInfo = _a.contextInfo, annotation = _a.annotation, actionOptions = _a.actionOptions, _e = _a.isCollapsed, isCollapsed = _e === void 0 ? false : _e, textToggleCollapse = _a.textToggleCollapse, handlerToggleCollapse = _a.handlerToggleCollapse, _f = _a.borderMainConnection, borderMainConnection = _f === void 0 ? false : _f, _g = _a.borderSubConnection, borderSubConnection = _g === void 0 ? false : _g, _h = _a.level, level = _h === void 0 ? 1 : _h, _j = _a.minimumHeadlineLevel, minimumHeadlineLevel = _j === void 0 ? 3 : _j, _k = _a.whitespaceSize, whitespaceSize = _k === void 0 ? "small" : _k, style = _a.style, stickyHeaderProps = _a.stickyHeaderProps, description = _a.description, hideGroupDivider = _a.hideGroupDivider, contentProps = _a.contentProps, otherContentWrapperProps = __rest(_a, ["children", "className", "title", "contextInfo", "annotation", "actionOptions", "isCollapsed", "textToggleCollapse", "handlerToggleCollapse", "borderMainConnection", "borderSubConnection", "level", "minimumHeadlineLevel", "whitespaceSize", "style", "stickyHeaderProps", "description", "hideGroupDivider", "contentProps"]);
+    var displayHeader = title || handlerToggleCollapse;
+    var borderGradient = undefined;
+    if (typeof borderSubConnection === "object") {
+        var borderColors_1 = Array.isArray(borderSubConnection) ? borderSubConnection : [borderSubConnection];
+        borderGradient = borderColors_1.reduce(function (acc, borderColor, index) {
+            try {
+                var color = Color(borderColor);
+                acc.push("".concat(color.rgb().toString(), " ") +
+                    "".concat((index / borderColors_1.length) * 100, "% ") +
+                    "".concat(((index + 1) / borderColors_1.length) * 100, "%"));
+            }
+            catch (_a) {
+                // eslint-disable-next-line no-console
+                console.warn("Received invalid background color for tag: " + borderColor);
+            }
+            return acc;
+        }, []);
+    }
+    var contextInfoElements = Array.isArray(contextInfo) ? contextInfo : [contextInfo];
+    var _l = contentProps !== null && contentProps !== void 0 ? contentProps : {}, contentClassName = _l.className, otherContentProps = __rest(_l, ["className"]);
+    var headerContent = displayHeader ? (React.createElement(React.Fragment, null,
+        React.createElement(SectionHeader, { className: "".concat(eccgui, "-contentgroup__header") },
+            React.createElement(Toolbar, null,
+                handlerToggleCollapse && (React.createElement(ToolbarSection, null,
+                    React.createElement(IconButton, { className: "".concat(eccgui, "-contentgroup__header__toggler"), name: isCollapsed ? "toggler-showmore" : "toggler-showless", text: textToggleCollapse !== null && textToggleCollapse !== void 0 ? textToggleCollapse : (isCollapsed ? "Show more" : "Show less"), onClick: handlerToggleCollapse }),
+                    React.createElement(Spacing, { vertical: true, size: "small" }))),
+                title && (React.createElement(ToolbarSection, { canShrink: true },
+                    React.createElement("h" +
+                        Math.min(Math.max(minimumHeadlineLevel, level + minimumHeadlineLevel), 6).toString(), {
+                        children: React.createElement(OverflowText, null, title),
+                        className: "".concat(eccgui, "-contentgroup__header__title"),
+                    }),
+                    description && (React.createElement(React.Fragment, null,
+                        React.createElement(Spacing, { vertical: true, size: "tiny" }),
+                        React.createElement(Tooltip, { content: description },
+                            React.createElement(Icon, { name: "item-info", small: true, className: "dmapp--text-info" })))))),
+                contextInfoElements &&
+                    ((_c = contextInfoElements[0]) === null || _c === void 0 ? void 0 : _c.props) &&
+                    Object.values(contextInfoElements[0].props).every(function (v) { return v !== undefined; }) && (React.createElement(ToolbarSection, { className: "".concat(eccgui, "-contentgroup__header__context"), canGrow: true },
+                    React.createElement("div", { className: "".concat(eccgui, "-contentgroup__content ") },
+                        React.createElement(Spacing, { vertical: true, size: "tiny" }),
+                        contextInfoElements))),
+                !isCollapsed && handlerToggleCollapse && actionOptions && (React.createElement(ToolbarSection, { className: "".concat(eccgui, "-contentgroup__header__options") },
+                    React.createElement(Spacing, { vertical: true, size: "small" }),
+                    actionOptions)))),
+        (!isCollapsed || !handlerToggleCollapse) && (React.createElement(React.Fragment, null,
+            !hideGroupDivider && React.createElement(Divider, { addSpacing: "small" }),
+            React.createElement(Spacing, { size: whitespaceSize }))))) : (React.createElement(React.Fragment, null));
+    return (React.createElement(Section, __assign({ className: "".concat(eccgui, "-contentgroup") +
+            (className ? " ".concat(className) : "") +
+            (whitespaceSize ? " ".concat(eccgui, "-contentgroup--padding-").concat(whitespaceSize) : "") +
+            (borderMainConnection ? " ".concat(eccgui, "-contentgroup--border-main") : "") +
+            (borderSubConnection ? " ".concat(eccgui, "-contentgroup--border-sub") : ""), style: borderGradient
+            ? __assign(__assign({}, (style !== null && style !== void 0 ? style : {})), (_b = {}, _b["--".concat(eccgui, "-color-contentgroup-border-sub")] = borderGradient.join(", "), _b))
+            : style }, otherContentWrapperProps),
+        headerContent && stickyHeaderProps ? (React.createElement(StickyTarget, __assign({}, stickyHeaderProps), headerContent)) : (headerContent),
+        (!isCollapsed || !handlerToggleCollapse) && (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "".concat(eccgui, "-contentgroup__content") },
+                React.createElement("div", __assign({ className: classNames("".concat(eccgui, "-contentgroup__content__body"), contentClassName) }, otherContentProps), children),
+                contextInfo && !displayHeader && (React.createElement("div", { className: "".concat(eccgui, "-contentgroup__content__context") }, contextInfoElements)),
+                annotation && React.createElement("div", null, annotation),
+                actionOptions && !displayHeader && (React.createElement("div", { className: "".concat(eccgui, "-contentgroup__content__options") }, actionOptions)))))));
+};
+//# sourceMappingURL=ContentGroup.js.map

package/dist/esm/components/ContentGroup/ContentGroup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ContentGroup.js","sourceRoot":"","sources":["../../../../src/components/ContentGroup/ContentGroup.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/index.js CHANGED Viewed

@@ -48,5 +48,6 @@ export * from "./Tooltip/Tooltip.js";
 export * from "./Tree/Tree.js";
 export * from "./Typography/index.js";
 export * from "./Workspace/index.js";
+export * from "./ContentGroup/ContentGroup.js";
 export * from "./interfaces.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC;AAClD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;~~AAE5B~~,cAAc,cAAc,CAAC"}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC;AAClD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAE5C,cAAc,cAAc,CAAC"}

package/dist/esm/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.js CHANGED Viewed

@@ -1,17 +1,18 @@
+//adapted v6 modes imports
+import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
-//modes imports
 import { markdown } from "@codemirror/lang-markdown";
+import { sql } from "@codemirror/lang-sql";
 import { xml } from "@codemirror/lang-xml";
+import { yaml } from "@codemirror/lang-yaml";
 import { defaultHighlightStyle, StreamLanguage } from "@codemirror/language";
-import { javascript } from "@codemirror/legacy-modes/mode/javascript.js";
+//legacy mode imports
 import { jinja2 } from "@codemirror/legacy-modes/mode/jinja2.js";
 import { mathematica } from "@codemirror/legacy-modes/mode/mathematica.js";
 import { ntriples } from "@codemirror/legacy-modes/mode/ntriples.js";
 import { python } from "@codemirror/legacy-modes/mode/python.js";
 import { sparql } from "@codemirror/legacy-modes/mode/sparql.js";
-import { sql } from "@codemirror/legacy-modes/mode/sql.js";
 import { turtle } from "@codemirror/legacy-modes/mode/turtle.js";
-import { yaml } from "@codemirror/legacy-modes/mode/yaml.js";
 //adaptations
 import { adaptedSyntaxHighlighting } from "../tests/codemirrorTestHelper.js";
 var supportedModes = {
@@ -29,10 +30,18 @@ var supportedModes = {
     javascript: javascript,
 };
 export var supportedCodeEditorModes = Object.keys(supportedModes);
+var v6AdaptedModes = new Map([
+    ["json", true],
+    ["markdown", true],
+    ["xml", true],
+    ["sql", true],
+    ["yaml", true],
+    ["javascript", true],
+]);
 export var useCodeMirrorModeExtension = function (mode) {
     return !mode
         ? adaptedSyntaxHighlighting(defaultHighlightStyle)
-        : ["json", "markdown", "xml"].includes(mode)
+        : v6AdaptedModes.has(mode)
             ? (typeof supportedModes[mode] === "function" ? supportedModes[mode] : function () { return null; })()
             : StreamLanguage === null || StreamLanguage === void 0 ? void 0 : StreamLanguage.define(supportedModes[mode]);
 };

package/dist/esm/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCodemirrorModeExtension.hooks.js","sourceRoot":"","sources":["../../../../../src/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,~~IAAI~~,EAAE,MAAM,~~uBAAuB~~,CAAC;~~AAC7C~~,~~eAAe;AACf,~~OAAO,EAAE,~~QAAQ~~,EAAE,MAAM,~~2BAA2B~~,CAAC;~~AACrD~~,OAAO,EAAE,~~GAAG~~,EAAE,MAAM,~~sBAAsB~~,CAAC;~~AAC3C~~,OAAO,EAAE,~~qBAAqB~~,~~EAAmB~~,~~cAAc,EAAgB,~~MAAM,sBAAsB,CAAC;~~AAC5G~~,OAAO,EAAE,~~UAAU~~,EAAE,MAAM,~~0CAA0C~~,CAAC;~~AACtE~~,OAAO,EAAE,~~MAAM~~,EAAE,MAAM,~~sCAAsC~~,CAAC;~~AAC9D~~,OAAO,EAAE,~~WAAW~~,~~EAAE~~,MAAM,~~2CAA2C~~,CAAC;~~AACxE~~,OAAO,EAAE,~~QAAQ~~,EAAE,MAAM,~~wCAAwC~~,CAAC;~~AAClE~~,OAAO,EAAE,~~MAAM~~,EAAE,MAAM,~~sCAAsC~~,CAAC;~~AAC9D~~,OAAO,EAAE,~~MAAM~~,EAAE,MAAM,~~sCAAsC~~,CAAC;~~AAC9D~~,OAAO,EAAE,~~GAAG~~,EAAE,MAAM,~~mCAAmC~~,CAAC;~~AACxD~~,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,~~IAAI~~,EAAE,MAAM,~~oCAAoC~~,CAAC;~~AAE1D~~,aAAa;AACb,OAAO,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;AAE1E,IAAM,cAAc,GAAG;IACnB,QAAQ,UAAA;IACR,MAAM,QAAA;IACN,MAAM,QAAA;IACN,MAAM,QAAA;IACN,GAAG,KAAA;IACH,IAAI,MAAA;IACJ,MAAM,QAAA;IACN,IAAI,MAAA;IACJ,QAAQ,UAAA;IACR,WAAW,aAAA;IACX,GAAG,KAAA;IACH,UAAU,YAAA;CACJ,CAAC;AAEX,MAAM,CAAC,IAAM,wBAAwB,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAuC,CAAC;AAG1G,MAAM,CAAC,IAAM,0BAA0B,GAAG,UAAC,IAA+B;IACtE,OAAO,CAAC,IAAI;QACR,CAAC,CAAC,yBAAyB,CAAC,qBAAqB,CAAC;QAClD,CAAC,CAAC,~~CAAC~~,~~MAAM,EAAE,UAAU,EAAE,KAAK,~~CAAC,~~CAAC~~,~~QAAQ,~~CAAC,IAAI,CAAC;~~YAC5C~~,CAAC,CAAE,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,cAAM,OAAA,IAAI,EAAJ,CAAI,CAA2B,EAAE;YAC/G,CAAC,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,CAAC,cAAc,CAAC,IAAI,CAA0B,CAAC,CAAC;AAChF,CAAC,CAAC"}
1	+ {"version":3,"file":"useCodemirrorModeExtension.hooks.js","sourceRoot":"","sources":["../../../../../src/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.ts"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,qBAAqB,EAAmB,cAAc,EAAgB,MAAM,sBAAsB,CAAC;AAC5G,qBAAqB;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAE9D,aAAa;AACb,OAAO,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;AAE1E,IAAM,cAAc,GAAG;IACnB,QAAQ,UAAA;IACR,MAAM,QAAA;IACN,MAAM,QAAA;IACN,MAAM,QAAA;IACN,GAAG,KAAA;IACH,IAAI,MAAA;IACJ,MAAM,QAAA;IACN,IAAI,MAAA;IACJ,QAAQ,UAAA;IACR,WAAW,aAAA;IACX,GAAG,KAAA;IACH,UAAU,YAAA;CACJ,CAAC;AAEX,MAAM,CAAC,IAAM,wBAAwB,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAuC,CAAC;AAG1G,IAAM,cAAc,GAAmD,IAAI,GAAG,CAAC;IAC3E,CAAC,MAAM,EAAE,IAAI,CAAC;IACd,CAAC,UAAU,EAAE,IAAI,CAAC;IAClB,CAAC,KAAK,EAAE,IAAI,CAAC;IACb,CAAC,KAAK,EAAE,IAAI,CAAC;IACb,CAAC,MAAM,EAAE,IAAI,CAAC;IACd,CAAC,YAAY,EAAE,IAAI,CAAC;CACvB,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,0BAA0B,GAAG,UAAC,IAA+B;IACtE,OAAO,CAAC,IAAI;QACR,CAAC,CAAC,yBAAyB,CAAC,qBAAqB,CAAC;QAClD,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC;YAC1B,CAAC,CAAE,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,cAAM,OAAA,IAAI,EAAJ,CAAI,CAA2B,EAAE;YAC/G,CAAC,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,CAAC,cAAc,CAAC,IAAI,CAA0B,CAAC,CAAC;AAChF,CAAC,CAAC"}

package/dist/types/components/ContentGroup/ContentGroup.d.ts ADDED Viewed

@@ -0,0 +1,78 @@
+import React from "react";
+import { TestableComponent } from "../../components/interfaces";
+import { StickyTargetProps } from "../index";
+export interface ContentGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, TestableComponent {
+    /**
+     * Title of the content group.
+     */
+    title?: string;
+    /**
+     * Level of the content group.
+     */
+    level?: number;
+    /**
+     * Context information to display in the header.
+     */
+    contextInfo?: React.ReactElement | React.ReactElement[];
+    /**
+     * Annotation to display in the content.
+     */
+    annotation?: React.ReactElement | React.ReactElement[];
+    /**
+     * Action options to display in the header.
+     */
+    actionOptions?: React.ReactElement | React.ReactElement[];
+    /**
+     * Flag to collapse the content group.
+     */
+    isCollapsed?: boolean;
+    /**
+     * Text to display when the callapse button is hovered.
+     * If not set then it uses "Show more" or "Show less".
+     */
+    textToggleCollapse?: string;
+    /**
+     * Event handler to toggle the collapse state.
+     */
+    handlerToggleCollapse?: () => void;
+    /**
+     * Use a border on the left side to visually connect the whole content content group.
+     */
+    borderMainConnection?: boolean;
+    /**
+     * Use a border on the left side to visually emphase the content group.
+     * If it is set to an array of color codes then the border is multi colored.
+     */
+    borderSubConnection?: boolean | string[];
+    /**
+     * Whitespace size between header and the content.
+     */
+    whitespaceSize?: "tiny" | "small" | "medium" | "large" | "xlarge";
+    /**
+     * Title minimum headline level.
+     */
+    minimumHeadlineLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Props to pass to `StickyTarget`.
+     */
+    stickyHeaderProps?: Omit<StickyTargetProps, "children">;
+    /**
+     * Description of the content group.
+     * Added as tooltip to an info icon placed in the content group header.
+     */
+    description?: string;
+    /**
+     * Flag to hide the group divider.
+     */
+    hideGroupDivider?: boolean;
+    /**
+     * Additional props to pass to the content container.
+     */
+    contentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+}
+/**
+ * Manage display of a grouped content section.
+ * Add info, actions and context annotations by using its properties.
+ * Can be nested into each other.
+ */
+export declare const ContentGroup: ({ children, className, title, contextInfo, annotation, actionOptions, isCollapsed, textToggleCollapse, handlerToggleCollapse, borderMainConnection, borderSubConnection, level, minimumHeadlineLevel, whitespaceSize, style, stickyHeaderProps, description, hideGroupDivider, contentProps, ...otherContentWrapperProps }: ContentGroupProps) => React.JSX.Element;

package/dist/types/components/index.d.ts CHANGED Viewed

@@ -48,4 +48,5 @@ export * from "./Tooltip/Tooltip";
 export * from "./Tree/Tree";
 export * from "./Typography";
 export * from "./Workspace";
+export * from "./ContentGroup/ContentGroup";
 export * from "./interfaces";

package/dist/types/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.d.ts CHANGED Viewed

@@ -1,21 +1,23 @@
+import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
 import { markdown } from "@codemirror/lang-markdown";
+import { sql } from "@codemirror/lang-sql";
 import { xml } from "@codemirror/lang-xml";
+import { yaml } from "@codemirror/lang-yaml";
 import { StreamParser } from "@codemirror/language";
-import { sql } from "@codemirror/legacy-modes/mode/sql";
 declare const supportedModes: {
     readonly markdown: typeof markdown;
     readonly python: StreamParser<unknown>;
     readonly sparql: StreamParser<unknown>;
     readonly turtle: StreamParser<unknown>;
     readonly xml: typeof xml;
-    readonly yaml: StreamParser<unknown>;
+    readonly yaml: typeof yaml;
     readonly jinja2: StreamParser<unknown>;
     readonly json: typeof json;
     readonly ntriples: StreamParser<unknown>;
     readonly mathematica: StreamParser<unknown>;
     readonly sql: typeof sql;
-    readonly javascript: StreamParser<unknown>;
+    readonly javascript: typeof javascript;
 };
 export declare const supportedCodeEditorModes: Array<keyof typeof supportedModes>;
 export type SupportedCodeEditorModes = (typeof supportedCodeEditorModes)[number];

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.1.0-rc.0",
+    "version": "24.1.0-rc.2",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -72,12 +72,16 @@
         "@blueprintjs/core": "^5.16.2",
         "@blueprintjs/select": "^5.3.7",
         "@carbon/icons": "^11.53.0",
-        "@carbon/react": "^1.72.0",
+        "@carbon/react": "1.72.0",
+        "@codemirror/lang-javascript": "^6.2.2",
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-markdown": "^6.3.1",
+        "@codemirror/lang-sql": "^6.8.0",
         "@codemirror/lang-xml": "^6.1.0",
+        "@codemirror/lang-yaml": "^6.1.2",
         "@codemirror/legacy-modes": "^6.4.2",
         "@mavrin/remark-typograf": "^2.2.0",
+        "classnames": "^2.5.1",
         "codemirror": "^6.0.1",
         "color": "^4.2.3",
         "compute-scroll-into-view": "^3.1.0",

package/src/components/ContentGroup/ContentGroup.stories.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+import { Badge, ContentGroup, HtmlContentBlock, IconButton, Tag } from "../../../index";
+export default {
+    title: "Components/ContentGroup",
+    component: ContentGroup,
+    argTypes: {
+        handlerToggleCollapse: {
+            action: "toggle collapse",
+        },
+    },
+} as Meta<typeof ContentGroup>;
+const TemplateFull: StoryFn<typeof ContentGroup> = (args) => <ContentGroup {...args} />;
+export const BasicExample = TemplateFull.bind({});
+BasicExample.args = {
+    title: "Content group title",
+    contextInfo: <Badge children={100} maxLength={3} intent={"warning"} title="Found warnings context." />,
+    annotation: (
+        <Tag backgroundColor={"purple"} round>
+            Context tag
+        </Tag>
+    ),
+    actionOptions: (
+        <>
+            <IconButton name="item-remove" text="Example remove tooltip" disruptive />
+        </>
+    ),
+    isCollapsed: false,
+    handlerToggleCollapse: () => {},
+    borderMainConnection: true,
+    borderSubConnection: ["red", "blue"],
+    level: 1,
+    minimumHeadlineLevel: 5,
+    whitespaceSize: "small",
+    description: "More context description by tooltip.",
+    hideGroupDivider: false,
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={3} avgSentencesPerParagraph={4} random={false} />
+        </HtmlContentBlock>
+    ),
+};

package/src/components/ContentGroup/ContentGroup.tsx ADDED Viewed

@@ -0,0 +1,256 @@
+import React from "react";
+import classNames from "classnames";
+import Color from "color";
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {
+    Divider,
+    Icon,
+    IconButton,
+    OverflowText,
+    Section,
+    SectionHeader,
+    Spacing,
+    StickyTarget,
+    StickyTargetProps,
+    Toolbar,
+    ToolbarSection,
+    Tooltip,
+} from "../index";
+export interface ContentGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, TestableComponent {
+    /**
+     * Title of the content group.
+     */
+    title?: string;
+    /**
+     * Level of the content group.
+     */
+    level?: number;
+    /**
+     * Context information to display in the header.
+     */
+    contextInfo?: React.ReactElement | React.ReactElement[];
+    /**
+     * Annotation to display in the content.
+     */
+    annotation?: React.ReactElement | React.ReactElement[];
+    /**
+     * Action options to display in the header.
+     */
+    actionOptions?: React.ReactElement | React.ReactElement[];
+    /**
+     * Flag to collapse the content group.
+     */
+    isCollapsed?: boolean;
+    /**
+     * Text to display when the callapse button is hovered.
+     * If not set then it uses "Show more" or "Show less".
+     */
+    textToggleCollapse?: string;
+    /**
+     * Event handler to toggle the collapse state.
+     */
+    handlerToggleCollapse?: () => void;
+    /**
+     * Use a border on the left side to visually connect the whole content content group.
+     */
+    borderMainConnection?: boolean;
+    /**
+     * Use a border on the left side to visually emphase the content group.
+     * If it is set to an array of color codes then the border is multi colored.
+     */
+    borderSubConnection?: boolean | string[];
+    /**
+     * Whitespace size between header and the content.
+     */
+    whitespaceSize?: "tiny" | "small" | "medium" | "large" | "xlarge";
+    /**
+     * Title minimum headline level.
+     */
+    minimumHeadlineLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Props to pass to `StickyTarget`.
+     */
+    stickyHeaderProps?: Omit<StickyTargetProps, "children">;
+    /**
+     * Description of the content group.
+     * Added as tooltip to an info icon placed in the content group header.
+     */
+    description?: string;
+    /**
+     * Flag to hide the group divider.
+     */
+    hideGroupDivider?: boolean;
+    /**
+     * Additional props to pass to the content container.
+     */
+    contentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+}
+/**
+ * Manage display of a grouped content section.
+ * Add info, actions and context annotations by using its properties.
+ * Can be nested into each other.
+ */
+export const ContentGroup = ({
+    children,
+    className = "",
+    title,
+    contextInfo,
+    annotation,
+    actionOptions,
+    isCollapsed = false,
+    textToggleCollapse,
+    handlerToggleCollapse,
+    borderMainConnection = false,
+    borderSubConnection = false,
+    level = 1,
+    minimumHeadlineLevel = 3,
+    whitespaceSize = "small",
+    style,
+    stickyHeaderProps,
+    description,
+    hideGroupDivider,
+    contentProps,
+    ...otherContentWrapperProps
+}: ContentGroupProps) => {
+    const displayHeader = title || handlerToggleCollapse;
+    let borderGradient: string[] | undefined = undefined;
+    if (typeof borderSubConnection === "object") {
+        const borderColors: string[] = Array.isArray(borderSubConnection) ? borderSubConnection : [borderSubConnection];
+        borderGradient = borderColors.reduce((acc: string[], borderColor: string, index: number): string[] => {
+            try {
+                const color = Color(borderColor);
+                acc.push(
+                    `${color.rgb().toString()} ` +
+                        `${(index / borderColors.length) * 100}% ` +
+                        `${((index + 1) / borderColors.length) * 100}%`
+                );
+            } catch {
+                // eslint-disable-next-line no-console
+                console.warn("Received invalid background color for tag: " + borderColor);
+            }
+            return acc;
+        }, []);
+    }
+    const contextInfoElements = Array.isArray(contextInfo) ? contextInfo : [contextInfo];
+    const { className: contentClassName, ...otherContentProps } = contentProps ?? {};
+    const headerContent = displayHeader ? (
+        <>
+            <SectionHeader className={`${eccgui}-contentgroup__header`}>
+                <Toolbar>
+                    {handlerToggleCollapse && (
+                        <ToolbarSection>
+                            <IconButton
+                                className={`${eccgui}-contentgroup__header__toggler`}
+                                name={isCollapsed ? "toggler-showmore" : "toggler-showless"}
+                                text={textToggleCollapse ?? (isCollapsed ? "Show more" : "Show less")}
+                                onClick={handlerToggleCollapse}
+                            />
+                            <Spacing vertical size="small" />
+                        </ToolbarSection>
+                    )}
+                    {title && (
+                        <ToolbarSection canShrink>
+                            {React.createElement(
+                                "h" +
+                                    Math.min(
+                                        Math.max(minimumHeadlineLevel, level + minimumHeadlineLevel),
+                                        6
+                                    ).toString(),
+                                {
+                                    children: <OverflowText>{title}</OverflowText>,
+                                    className: `${eccgui}-contentgroup__header__title`,
+                                }
+                            )}
+                            {description && (
+                                <>
+                                    <Spacing vertical size="tiny" />
+                                    <Tooltip content={description}>
+                                        <Icon name="item-info" small className="dmapp--text-info" />
+                                    </Tooltip>
+                                </>
+                            )}
+                        </ToolbarSection>
+                    )}
+                    {contextInfoElements &&
+                        contextInfoElements[0]?.props &&
+                        Object.values(contextInfoElements[0].props).every((v) => v !== undefined) && (
+                            <ToolbarSection className={`${eccgui}-contentgroup__header__context`} canGrow>
+                                <div className={`${eccgui}-contentgroup__content `}>
+                                    <Spacing vertical size="tiny" />
+                                    {contextInfoElements}
+                                </div>
+                            </ToolbarSection>
+                        )}
+                    {!isCollapsed && handlerToggleCollapse && actionOptions && (
+                        <ToolbarSection className={`${eccgui}-contentgroup__header__options`}>
+                            <Spacing vertical size="small" />
+                            {actionOptions}
+                        </ToolbarSection>
+                    )}
+                </Toolbar>
+            </SectionHeader>
+            {(!isCollapsed || !handlerToggleCollapse) && (
+                <>
+                    {!hideGroupDivider && <Divider addSpacing="small" />}
+                    <Spacing size={whitespaceSize} />
+                </>
+            )}
+        </>
+    ) : (
+        <></>
+    );
+    return (
+        <Section
+            className={
+                `${eccgui}-contentgroup` +
+                (className ? ` ${className}` : "") +
+                (whitespaceSize ? ` ${eccgui}-contentgroup--padding-${whitespaceSize}` : "") +
+                (borderMainConnection ? ` ${eccgui}-contentgroup--border-main` : "") +
+                (borderSubConnection ? ` ${eccgui}-contentgroup--border-sub` : "")
+            }
+            style={
+                borderGradient
+                    ? ({
+                          ...(style ?? {}),
+                          [`--${eccgui}-color-contentgroup-border-sub`]: borderGradient.join(", "),
+                      } as React.CSSProperties)
+                    : style
+            }
+            {...otherContentWrapperProps}
+        >
+            {headerContent && stickyHeaderProps ? (
+                <StickyTarget {...stickyHeaderProps}>{headerContent}</StickyTarget>
+            ) : (
+                headerContent
+            )}
+            {(!isCollapsed || !handlerToggleCollapse) && (
+                <>
+                    <div className={`${eccgui}-contentgroup__content`}>
+                        <div
+                            className={classNames(`${eccgui}-contentgroup__content__body`, contentClassName)}
+                            {...otherContentProps}
+                        >
+                            {children}
+                        </div>
+                        {contextInfo && !displayHeader && (
+                            <div className={`${eccgui}-contentgroup__content__context`}>{contextInfoElements}</div>
+                        )}
+                        {annotation && <div>{annotation}</div>}
+                        {actionOptions && !displayHeader && (
+                            <div className={`${eccgui}-contentgroup__content__options`}>{actionOptions}</div>
+                        )}
+                    </div>
+                </>
+            )}
+        </Section>
+    );
+};

package/src/components/ContentGroup/_contentgroup.scss ADDED Viewed

@@ -0,0 +1,56 @@
+$eccgui-color-scontentgroup-border-main: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted) !default;
+$eccgui-color-scontentgroup-border-sub: rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled) !default;
+.#{$eccgui}-contentgroup {
+    --#{$eccgui}-color-contentgroup-border-main: #{$eccgui-color-scontentgroup-border-main};
+    --#{$eccgui}-color-contentgroup-border-sub: #{$eccgui-color-scontentgroup-border-sub};
+}
+.#{$eccgui}-contentgroup--border-main {
+    border-left: 0.25 * $eccgui-size-block-whitespace solid
+        var(--#{$eccgui}-color-contentgroup-border-main, #{$eccgui-color-scontentgroup-border-main});
+    &.#{$eccgui}-contentgroup--padding-small {
+        padding-left: 0.5 * $eccgui-size-block-whitespace;
+    }
+}
+.#{$eccgui}-contentgroup--border-sub {
+    position: relative;
+    border-right: 0.25 * $eccgui-size-block-whitespace solid transparent;
+    &::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 100%;
+        width: 0.25 * $eccgui-size-block-whitespace;
+        content: " ";
+        background-color: var(--#{$eccgui}-color-contentgroup-border-sub, #{$eccgui-color-scontentgroup-border-sub});
+        background-image: linear-gradient(to bottom, var(--#{$eccgui}-color-contentgroup-border-sub));
+    }
+    &.#{$eccgui}-contentgroup--padding-small {
+        padding-right: 0.5 * $eccgui-size-block-whitespace;
+    }
+}
+.#{$eccgui}-contentgroup--padding-small {
+    + .#{$eccgui}-contentgroup {
+        margin-top: 0.5 * $eccgui-size-block-whitespace;
+    }
+    > .#{$eccgui}-contentgroup__content {
+        column-gap: 0.5 * $eccgui-size-block-whitespace;
+    }
+}
+.#{$eccgui}-contentgroup__content {
+    display: flex;
+}
+.#{$eccgui}-contentgroup__content__body {
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: 100%;
+}

package/src/components/index.scss CHANGED Viewed

@@ -41,3 +41,4 @@
 @import "./Badge/badge";
 @import "./PropertyValuePair/propertyvalue";
 @import "./MultiSuggestField/multisuggestfield";
+@import "./ContentGroup/contentgroup";

package/src/components/index.ts CHANGED Viewed

@@ -48,5 +48,6 @@ export * from "./Tooltip/Tooltip";
 export * from "./Tree/Tree";
 export * from "./Typography";
 export * from "./Workspace";
+export * from "./ContentGroup/ContentGroup";
 export * from "./interfaces";

package/src/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.ts CHANGED Viewed

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