@dynatrace/strato-components 3.10.4 → 3.11.0

package/editors/base-code-editor/BaseCodeEditor.js

@@ -42,6 +42,7 @@ var styles = __toESM(require("./BaseCodeEditor.sty.js"));
 var import_configure_diagnostics = require("./configuration/configure-diagnostics.js");
 var import_configure_format_keymap = require("./configuration/configure-format-keymap.js");
 var import_configure_line_wrap = require("./configuration/configure-line-wrap.js");
+var import_configure_lint_gutter = require("./configuration/configure-lint-gutter.js");
 var import_configure_placeholder = require("./configuration/configure-placeholder.js");
 var import_configure_read_only = require("./configuration/configure-read-only.js");
 var import_configure_spell_check = require("./configuration/configure-spell-check.js");
@@ -75,6 +76,7 @@ const placeholderCompartment = new import_state.Compartment();
 const highlightOnChangeCompartment = new import_state.Compartment();
 const formatKeymapCompartment = new import_state.Compartment();
 const diagnosticsCompartment = new import_state.Compartment();
+const lintGutterCompartment = new import_state.Compartment();
 const getEditorConfiguration = (intlProps, options) => {
   const { singleLine, gutterConfiguration, hideLineNumbers, required, size } = options;
   const isRequired = required ?? false;
@@ -164,11 +166,14 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
     size = "default",
     onFocus,
     onBlur,
+    // DEPRECATION: [APPDEV-19108] BREAKING-CHANGE: Remove gutterConfiguration prop.
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     gutterConfiguration,
     id: propId,
     required = false,
     format,
     diagnostics,
+    showLintGutter = false,
     // DEPRECATION: [APPDEV-17404] BREAKING-CHANGE: Remove isControlled prop.
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     isControlled = false,
@@ -205,6 +210,7 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
   }, [format]);
   const diagnosticsRef = (0, import_react.useRef)([]);
   const isDiagnosticsEnabledRef = (0, import_react.useRef)(false);
+  const isLintGutterMarkersShownRef = (0, import_react.useRef)(false);
   const handleFormat = (0, import_react.useCallback)(() => {
     const currentFormatFunction = formatFunctionRef.current;
     if (!currentFormatFunction) {
@@ -397,6 +403,7 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
           }),
           import_state.Prec.highest(keymapCompartment.of((0, import_key_maps.getKeyMaps)(viewRef))),
           languageCompartment.of([]),
+          lintGutterCompartment.of((0, import_configure_lint_gutter.getLintGutterExtension)(false)),
           editorBaseConfigCompartment.of([]),
           // Indent unit is two spaces instead of tab
           import_language.indentUnit.of("  "),
@@ -450,16 +457,17 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
       })
     );
   }, []);
+  const effectiveGutterConfiguration = showLintGutter ? void 0 : gutterConfiguration;
   (0, import_react.useEffect)(() => {
     const editorView = viewRef.current;
     const prev = prevEditorConfigRef.current;
-    if (prev !== void 0 && prev.singleLine === singleLine && prev.hideLineNumbers === hideLineNumbers && prev.gutterConfiguration === gutterConfiguration && prev.required === required && prev.size === size && prev.locale === locale && prev.defaultLocale === defaultLocale && prev.messages === messages) {
+    if (prev !== void 0 && prev.singleLine === singleLine && prev.hideLineNumbers === hideLineNumbers && prev.gutterConfiguration === effectiveGutterConfiguration && prev.required === required && prev.size === size && prev.locale === locale && prev.defaultLocale === defaultLocale && prev.messages === messages) {
       return;
     }
     prevEditorConfigRef.current = {
       singleLine,
       hideLineNumbers,
-      gutterConfiguration,
+      gutterConfiguration: effectiveGutterConfiguration,
       required,
       size,
       locale,
@@ -472,7 +480,7 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
         getEditorConfiguration(intlProps, {
           singleLine,
           hideLineNumbers,
-          gutterConfiguration,
+          gutterConfiguration: effectiveGutterConfiguration,
           required,
           size
         })
@@ -481,7 +489,7 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
   }, [
     singleLine,
     hideLineNumbers,
-    gutterConfiguration,
+    effectiveGutterConfiguration,
     required,
     size,
     locale,
@@ -540,6 +548,15 @@ const BaseCodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forw
       diagnosticsCompartment
     );
   }, [diagnostics]);
+  (0, import_react.useEffect)(() => {
+    (0, import_configure_lint_gutter.configureLintGutter)(
+      showLintGutter,
+      diagnostics,
+      viewRef,
+      lintGutterCompartment,
+      isLintGutterMarkersShownRef
+    );
+  }, [showLintGutter, diagnostics]);
   (0, import_react.useEffect)(() => {
     valueChangeRef.current = onChange !== void 0 ? sanitizedOnChange : void 0;
   }, [onChange, sanitizedOnChange]);

package/editors/base-code-editor/BaseCodeEditor.sty.js

@@ -22,7 +22,8 @@ __export(BaseCodeEditor_css_exports, {
 });
 module.exports = __toCommonJS(BaseCodeEditor_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
+var import_diagnostic_tooltip_css_ts_vanilla = require("../../core/styles/diagnostic-tooltip.css");
 var import_BaseCodeEditor_css_ts_vanilla = require("./BaseCodeEditor.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var autocompletionTypeText = "_mvxq7yw-3-10-4";
-var editorContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mvxq7yk-3-10-4", variantClassNames: { focusVisible: { true: "_mvxq7yl-3-10-4" }, fullHeight: { true: "_mvxq7ym-3-10-4" }, hasError: { true: "_mvxq7yn-3-10-4" }, lineNumbers: { hidden: "_mvxq7yo-3-10-4", visible: "_mvxq7yp-3-10-4" }, readOnly: { true: "_mvxq7yq-3-10-4" }, size: { "default": "_mvxq7yr-3-10-4", condensed: "_mvxq7ys-3-10-4" } }, defaultVariants: { fullHeight: false, hasError: false, lineNumbers: "visible", readOnly: false, size: "default" }, compoundVariants: [[{ hasError: true, readOnly: false }, "_mvxq7yt-3-10-4"], [{ lineNumbers: "hidden", size: "default" }, "_mvxq7yu-3-10-4"], [{ lineNumbers: "hidden", size: "condensed" }, "_mvxq7yv-3-10-4"]] });
+var autocompletionTypeText = "_mvxq7yx-3-11-0";
+var editorContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mvxq7yl-3-11-0", variantClassNames: { focusVisible: { true: "_mvxq7ym-3-11-0" }, fullHeight: { true: "_mvxq7yn-3-11-0" }, hasError: { true: "_mvxq7yo-3-11-0" }, lineNumbers: { hidden: "_mvxq7yp-3-11-0", visible: "_mvxq7yq-3-11-0" }, readOnly: { true: "_mvxq7yr-3-11-0" }, size: { "default": "_mvxq7ys-3-11-0", condensed: "_mvxq7yt-3-11-0" } }, defaultVariants: { fullHeight: false, hasError: false, lineNumbers: "visible", readOnly: false, size: "default" }, compoundVariants: [[{ hasError: true, readOnly: false }, "_mvxq7yu-3-11-0"], [{ lineNumbers: "hidden", size: "default" }, "_mvxq7yv-3-11-0"], [{ lineNumbers: "hidden", size: "condensed" }, "_mvxq7yw-3-11-0"]] });

package/editors/base-code-editor/configuration/configure-diagnostics.js

@@ -22,12 +22,20 @@ __export(configure_diagnostics_exports, {
 });
 module.exports = __toCommonJS(configure_diagnostics_exports);
 var import_lint = require("@codemirror/lint");
+var import_diagnostic_tooltip_css = require("../../../core/styles/diagnostic-tooltip.sty.js");
+var import_render_diagnostic_message = require("../../../core/utils/diagnostic-tooltip/render-diagnostic-message.js");
 function mapInlineDiagnostic(d) {
+  const severity = d.severity ?? "error";
   return {
     from: d.from,
     to: d.to,
     message: d.message,
-    severity: d.severity ?? "error"
+    severity,
+    renderMessage: (0, import_render_diagnostic_message.renderDiagnosticMessage)(
+      severity,
+      d.message,
+      import_diagnostic_tooltip_css.editorDiagnosticWrapperClass
+    )
   };
 }
 function getDiagnosticsExtension(diagnosticsRef) {

package/editors/base-code-editor/configuration/configure-lint-gutter.d.ts

@@ -0,0 +1,41 @@
+import type { Compartment } from '@codemirror/state';
+import type { EditorView } from '@codemirror/view';
+import type { RefObject } from 'react';
+import type { InlineDiagnostic } from '../../code-editor/inline-diagnostic.js';
+type GutterSeverity = 'error' | 'warning';
+/**
+ * Minimal shape shared by CodeMirror's `Diagnostic` and our `InlineDiagnostic`,
+ * covering only the fields the gutter needs — avoids casting between the two.
+ */
+type LineDiagnosticInput = {
+    from: number;
+    severity?: 'hint' | 'info' | 'warning' | 'error';
+};
+/**
+ * Returns the highest severity (`error` beats `warning`) among the diagnostics
+ * that start on the line at `lineFrom`. Multi-line diagnostics are attributed to
+ * the line containing `d.from`; `info`/`hint` diagnostics are ignored. Returns
+ * `null` when the line has no `error`/`warning` diagnostic.
+ *
+ * @param diagnostics - all diagnostics in the editor
+ * @param lineFrom - document offset of the line's first character
+ * @param getLineFrom - maps any document position to its line's start offset
+ * @internal
+ */
+export declare function _buildLineMarker(diagnostics: readonly LineDiagnosticInput[], lineFrom: number, getLineFrom: (pos: number) => number): GutterSeverity | null;
+/**
+ * Builds the lint gutter extension. The column is always rendered (matching the fold
+ * gutter) so the editor never reflows when markers appear or disappear.
+ *
+ * @internal
+ */
+export declare function getLintGutterExtension(shouldShowMarkers: boolean): import("@codemirror/state").Extension;
+/**
+ * Updates the lint gutter extension in `lintGutterCompartment` to show or hide markers.
+ * The gutter column itself is always installed; only marker visibility toggles.
+ *
+ * @internal
+ */
+export declare function configureLintGutter(showLintGutter: boolean | undefined, diagnostics: InlineDiagnostic[] | undefined, editorViewRef: RefObject<EditorView>, lintGutterCompartment: Compartment, isLintGutterMarkersShownRef: RefObject<boolean>): void;
+export {};
+//# sourceMappingURL=configure-lint-gutter.d.ts.map

package/editors/base-code-editor/configuration/configure-lint-gutter.js

@@ -0,0 +1,110 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var configure_lint_gutter_exports = {};
+__export(configure_lint_gutter_exports, {
+  _buildLineMarker: () => _buildLineMarker,
+  configureLintGutter: () => configureLintGutter,
+  getLintGutterExtension: () => getLintGutterExtension
+});
+module.exports = __toCommonJS(configure_lint_gutter_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lint = require("@codemirror/lint");
+var import_view = require("@codemirror/view");
+var import_client = require("react-dom/client");
+var import_HealthIndicator = require("../../../content/health-indicator/HealthIndicator.js");
+const gutterRoots = /* @__PURE__ */ new WeakMap();
+class LintGutterMarker extends import_view.GutterMarker {
+  constructor(_severity) {
+    super();
+    this._severity = _severity;
+  }
+  _severity;
+  eq(other) {
+    return other instanceof LintGutterMarker && this._severity === other._severity;
+  }
+  toDOM() {
+    const element = document.createElement("div");
+    element.setAttribute("aria-hidden", "true");
+    element.dataset.severity = this._severity;
+    const root = (0, import_client.createRoot)(element);
+    gutterRoots.set(element, root);
+    root.render(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_HealthIndicator.HealthIndicator,
+        {
+          status: this._severity === "error" ? "critical" : "warning",
+          visual: "shape"
+        }
+      )
+    );
+    return element;
+  }
+  destroy(dom) {
+    gutterRoots.get(dom)?.unmount();
+    gutterRoots.delete(dom);
+  }
+}
+function _buildLineMarker(diagnostics, lineFrom, getLineFrom) {
+  let severity = null;
+  for (const d of diagnostics) {
+    if (d.severity !== "error" && d.severity !== "warning") {
+      continue;
+    }
+    if (getLineFrom(d.from) !== lineFrom) {
+      continue;
+    }
+    if (d.severity === "error") {
+      return "error";
+    }
+    severity = "warning";
+  }
+  return severity;
+}
+function getLintGutterExtension(shouldShowMarkers) {
+  return (0, import_view.gutter)({
+    class: "cm-gutter-lint-indicators",
+    lineMarker(view, line) {
+      if (!shouldShowMarkers) {
+        return null;
+      }
+      const all = [];
+      (0, import_lint.forEachDiagnostic)(view.state, (d) => {
+        all.push(d);
+      });
+      const severity = _buildLineMarker(
+        all,
+        line.from,
+        (pos) => view.state.doc.lineAt(pos).from
+      );
+      return severity === null ? null : new LintGutterMarker(severity);
+    },
+    lineMarkerChange: () => true
+  });
+}
+function configureLintGutter(showLintGutter, diagnostics, editorViewRef, lintGutterCompartment, isLintGutterMarkersShownRef) {
+  const shouldShow = showLintGutter === true && diagnostics !== void 0 && diagnostics.length > 0;
+  if (shouldShow === isLintGutterMarkersShownRef.current) {
+    return;
+  }
+  isLintGutterMarkersShownRef.current = shouldShow;
+  editorViewRef.current.dispatch({
+    effects: lintGutterCompartment.reconfigure(
+      getLintGutterExtension(shouldShow)
+    )
+  });
+}

package/editors/base-code-editor/configuration/getDefaultConfigurations.js

@@ -72,8 +72,8 @@ const Source = (source) => () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(imp
 const Type = (type) => () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   import_Text.Text,
   {
-    fontStyle: "code",
-    textStyle: "base",
+    fontStyle: "text",
+    textStyle: "small",
     as: "span",
     className: editorStyles.autocompletionTypeText,
     children: type
@@ -235,13 +235,22 @@ const getDefaultConfiguration = (intlProps, options = {
         width: "500px"
       },
       ".cm-tooltip-below": {
-        marginTop: ` ${import_spacings.default.Size4}`
+        marginTop: import_spacings.default.Size4
       },
       ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
         whiteSpace: "normal",
         textOverflow: "initial",
         wordBreak: "normal",
-        overflowWrap: "anywhere"
+        overflowWrap: "anywhere",
+        color: import_colors.default.Text.Neutral.Subdued,
+        fontFamily: import_typography.default.Text.Small.Default.Family,
+        fontSize: import_typography.default.Text.Small.Default.Size,
+        fontWeight: import_typography.default.Text.Small.Default.Weight,
+        lineHeight: `${import_typography.default.Text.Small.Default.LineHeight} !important`,
+        padding: `${import_spacings.default.Size8} ${import_spacings.default.Size12} !important`,
+        opacity: "1 !important",
+        borderBottom: `1px solid ${import_colors.default.Border.Neutral.Default} !important`,
+        marginBottom: import_spacings.default.Size4
       },
       '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section:has(+ li[role="option"].cm-empty-option)': {
         borderBottom: "0 !important"
@@ -344,16 +353,14 @@ const getMultipleLinesDefaultConfiguration = (intlProps, options) => {
     (0, import_language.foldGutter)({
       markerDOM: (open) => {
         const element = document.createElement("div");
+        element.setAttribute("aria-hidden", "true");
         element.style.display = "flex";
         element.style.alignItems = "center";
-        element.style.marginTop = "2px";
-        element.style.transform = "rotate(-90deg)";
+        element.style.marginTop = size === "condensed" ? "1px" : "2px";
+        element.style.transform = open ? "rotate(0deg)" : "rotate(-90deg)";
         element.style.cursor = "pointer";
         element.style.minWidth = "16px";
         element.style.minHeight = "16px";
-        if (open) {
-          element.style.transform = "rotate(0deg)";
-        }
         const root = (0, import_client.createRoot)(element);
         root.render(
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/editors/base-code-editor/utils/string-utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Converts a string in UPPER_SNAKE_CASE to sentence case.
+ * Example: "EXAMPLE_STRING" → "Example string"
+ */
+export declare function upperSnakeCaseToSentenceCase(value: string): string;
+//# sourceMappingURL=string-utils.d.ts.map

package/editors/base-code-editor/utils/string-utils.js

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var string_utils_exports = {};
+__export(string_utils_exports, {
+  upperSnakeCaseToSentenceCase: () => upperSnakeCaseToSentenceCase
+});
+module.exports = __toCommonJS(string_utils_exports);
+function upperSnakeCaseToSentenceCase(value) {
+  const words = value.toLowerCase().split("_");
+  words[0] = words[0].charAt(0).toUpperCase() + words[0].slice(1);
+  return words.join(" ");
+}

package/editors/code-editor/CodeEditor.d.ts

@@ -18,6 +18,8 @@ export interface CodeEditorBaseProps extends SharedBaseCodeEditorProps {
     language?: 'json' | 'js' | 'jsx' | 'ts' | 'tsx' | 'md' | 'yaml' | 'other';
     /**
      * Provides the gutter configuration to display a marker next to the fold gutter.
+     * @deprecated Use the `diagnostics` and `showLintGutter` props for per-line validation markers instead.
+     * Will be removed in a future major release.
      */
     gutterConfiguration?: GutterConfiguration;
     /**
@@ -25,6 +27,13 @@ export interface CodeEditorBaseProps extends SharedBaseCodeEditorProps {
      * When provided, the built-in JSON linter is overridden.
      */
     diagnostics?: InlineDiagnostic[];
+    /**
+     * When `true`, shows a severity marker in a gutter column next to each diagnostic line.
+     * Has no effect when `diagnostics` is `undefined` or empty. Takes precedence over
+     * `gutterConfiguration` when both are set.
+     * @defaultValue false
+     */
+    showLintGutter?: boolean;
 }
 /**
  * Props for the `CodeEditor` in controlled usage.
@@ -89,7 +98,7 @@ export type CodeEditorRef = {
 /**
  * The `CodeEditor` provides a text input field that is specifically designed for editing code.
  * It further offers properties to configure e.g. syntax highlighting, spell checks or line wrapping.
- * Once the editor is focused via the keyboard, the user must press "Enter" to start editing and "Escape" to quit editing and return to the keyboard navigation flow.
+ * Once the editor is focused via the keyboard, the user must press `Enter` to start editing and `Escape` to quit editing and return to the keyboard navigation flow.
  * @public
  */
 export declare const CodeEditor: (props: CodeEditorProps & import("react").RefAttributes<CodeEditorRef>) => import("react").ReactElement | null;

package/editors/code-editor/CodeEditor.js

@@ -54,8 +54,11 @@ const CodeEditorInner = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
     onChange,
     onBlur,
     onFocus,
+    // DEPRECATION: [APPDEV-19108] BREAKING-CHANGE: Remove gutterConfiguration prop.
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     gutterConfiguration,
     diagnostics,
+    showLintGutter = false,
     size = "default",
     required = false,
     // DEPRECATION: [APPDEV-17404] BREAKING-CHANGE: Remove isControlled prop.
@@ -101,6 +104,7 @@ const CodeEditorInner = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
       onFocus,
       gutterConfiguration,
       diagnostics,
+      showLintGutter,
       size,
       required,
       isControlled,

package/editors/code-editor/languages/languages.js

@@ -27,14 +27,25 @@ var import_lang_markdown = require("@codemirror/lang-markdown");
 var import_language = require("@codemirror/language");
 var import_yaml = require("@codemirror/legacy-modes/mode/yaml");
 var import_lint = require("@codemirror/lint");
+var import_diagnostic_tooltip_css = require("../../../core/styles/diagnostic-tooltip.sty.js");
+var import_render_diagnostic_message = require("../../../core/utils/diagnostic-tooltip/render-diagnostic-message.js");
 var import_javascript = require("../auto-completion/javascript.js");
+const withStyledTooltip = (diagnostic) => ({
+  ...diagnostic,
+  renderMessage: (0, import_render_diagnostic_message.renderDiagnosticMessage)(
+    diagnostic.severity === "hint" ? "info" : diagnostic.severity,
+    diagnostic.message,
+    import_diagnostic_tooltip_css.editorDiagnosticWrapperClass
+  )
+});
+const jsonLintSource = (0, import_lang_json.jsonParseLinter)();
 const codeEditorLanguages = {
   other: {
     extendWith: []
   },
   json: {
     language: (0, import_lang_json.json)().language,
-    extendWith: [(0, import_lint.linter)((0, import_lang_json.jsonParseLinter)())]
+    extendWith: [(0, import_lint.linter)((view) => jsonLintSource(view).map(withStyledTooltip))]
   },
   js: {
     language: (0, import_lang_javascript.javascript)().language,

package/editors/dql-editor/DQLEditor.d.ts

@@ -84,8 +84,8 @@ export type DQLEditorRef = {
  * The `DQLEditor` is specifically designed for editing DQL queries.
  *
  * It further offers syntax highlighting and autocomplete functionality specific to the Dynatrace Query Language (DQL).
- * Once the editor is focused via the keyboard, the user must press "Enter" to start editing
- * and "Escape" to quit editing and return to the keyboard navigation flow.
+ * Once the editor is focused via the keyboard, the user must press `Enter` to start editing
+ * and `Escape` to quit editing and return to the keyboard navigation flow.
  * @public
  */
 export declare const DQLEditor: ((props: DQLEditorProps & import("react").RefAttributes<DQLEditorRef>) => import("react").ReactElement | null) & {

package/editors/dql-editor/actions-menu/ActionsMenu.css

@@ -1,42 +1,42 @@
-._1okebta0-3-10-4 {
+._1okebta0-3-11-0 {
   position: relative;
   width: 100%;
 }
-._1okebta1-3-10-4 {
+._1okebta1-3-11-0 {
   display: flex;
   flex-grow: 1;
   max-height: 100%;
   min-height: 100%;
 }
-._1okebta2-3-10-4 {
+._1okebta2-3-11-0 {
   position: absolute;
   z-index: var(--dt-elevations-default, 1);
   top: 0;
   right: 0;
 }
-._1okebta3-3-10-4 {
+._1okebta3-3-11-0 {
   top: calc(var(--dt-spacings-size-6, 6px) + var(--dt-borders-width-emphasized, 2px));
   right: calc(var(--dt-spacings-size-6, 6px) + var(--dt-borders-width-emphasized, 2px));
 }
-._1jgl8s50-3-10-4 ._1okebta3-3-10-4 {
+._1jgl8s50-3-11-0 ._1okebta3-3-11-0 {
   top: calc(var(--dt-spacings-size-6, 6px) + var(--dt-borders-width-default, 1px));
   right: calc(var(--dt-spacings-size-6, 6px) + var(--dt-borders-width-default, 1px));
 }
-._1okebta4-3-10-4 {
+._1okebta4-3-11-0 {
   top: calc(var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-emphasized, 2px));
   right: calc(var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-emphasized, 2px));
 }
-._1jgl8s50-3-10-4 ._1okebta4-3-10-4 {
+._1jgl8s50-3-11-0 ._1okebta4-3-11-0 {
   top: calc(var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-default, 1px));
   right: calc(var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-default, 1px));
 }
-._1okebta5-3-10-4 .cm-editor {
+._1okebta5-3-11-0 .cm-editor {
   padding-right: calc(var(--dt-spacings-size-40, 40px) + var(--dt-spacings-size-4, 4px));
 }
-._1okebta6-3-10-4 .cm-editor {
+._1okebta6-3-11-0 .cm-editor {
   padding-right: calc(var(--dt-spacings-size-28, 28px) + var(--dt-spacings-size-4, 4px));
 }
-._1okebta7-3-10-4 {
+._1okebta7-3-11-0 {
   white-space: nowrap;
   margin-left: var(--dt-spacings-size-8, 8px);
 }

package/editors/dql-editor/actions-menu/ActionsMenu.sty.js

@@ -27,8 +27,8 @@ module.exports = __toCommonJS(ActionsMenu_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
 var import_ActionsMenu_css_ts_vanilla = require("./ActionsMenu.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var actionsMenuWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1okebta2-3-10-4", variantClassNames: { size: { "default": "_1okebta3-3-10-4", condensed: "_1okebta4-3-10-4" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var editorWithActionsMenu = { "default": "_1okebta5-3-10-4", condensed: "_1okebta6-3-10-4" };
-var editorWrapper = "_1okebta0-3-10-4";
-var editorWrapperFullHeight = "_1okebta1-3-10-4";
-var formatQueryShortcut = "_1okebta7-3-10-4";
+var actionsMenuWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1okebta2-3-11-0", variantClassNames: { size: { "default": "_1okebta3-3-11-0", condensed: "_1okebta4-3-11-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var editorWithActionsMenu = { "default": "_1okebta5-3-11-0", condensed: "_1okebta6-3-11-0" };
+var editorWrapper = "_1okebta0-3-11-0";
+var editorWrapperFullHeight = "_1okebta1-3-11-0";
+var formatQueryShortcut = "_1okebta7-3-11-0";

package/editors/dql-editor/dql/SuggestionPart.css

@@ -1,4 +1,4 @@
-._yhio8f0-3-10-4 {
+._yhio8f0-3-11-0 {
   display: inline;
   margin-right: 0.5ch;
 }

package/editors/dql-editor/dql/SuggestionPart.sty.js

@@ -21,4 +21,4 @@ __export(SuggestionPart_css_exports, {
 });
 module.exports = __toCommonJS(SuggestionPart_css_exports);
 var import_SuggestionPart_css_ts_vanilla = require("./SuggestionPart.css");
-var suggestionPartSectionInfoCSS = "_yhio8f0-3-10-4";
+var suggestionPartSectionInfoCSS = "_yhio8f0-3-11-0";

package/editors/dql-editor/dql/SuggestionsInfoSection.css

@@ -1,8 +1,8 @@
 .cm-tooltip.cm-tooltip-autocomplete {
   container-type: inline-size;
-  container-name: _cpuf060-3-10-4;
+  container-name: _cpuf060-3-11-0;
 }
-._cpuf061-3-10-4 {
+._cpuf061-3-11-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
@@ -15,20 +15,20 @@
   align-items: center;
   gap: var(--dt-spacings-size-16, 16px);
 }
-._cpuf062-3-10-4 {
+._cpuf062-3-11-0 {
   align-items: center;
   gap: var(--dt-spacings-size-16, 16px);
 }
-._cpuf063-3-10-4 {
+._cpuf063-3-11-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-@container _cpuf060-3-10-4 (max-width: 289px) {
-  ._cpuf061-3-10-4 {
+@container _cpuf060-3-11-0 (max-width: 289px) {
+  ._cpuf061-3-11-0 {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--dt-spacings-size-8, 8px);
   }
-  ._cpuf062-3-10-4 {
+  ._cpuf062-3-11-0 {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--dt-spacings-size-8, 8px);

package/editors/dql-editor/dql/SuggestionsInfoSection.sty.js

@@ -23,6 +23,6 @@ __export(SuggestionsInfoSection_css_exports, {
 });
 module.exports = __toCommonJS(SuggestionsInfoSection_css_exports);
 var import_SuggestionsInfoSection_css_ts_vanilla = require("./SuggestionsInfoSection.css");
-var container = "_cpuf061-3-10-4";
-var shortcutLabel = "_cpuf063-3-10-4";
-var shortcutsGroup = "_cpuf062-3-10-4";
+var container = "_cpuf061-3-11-0";
+var shortcutLabel = "_cpuf063-3-11-0";
+var shortcutsGroup = "_cpuf062-3-11-0";

package/editors/dql-editor/dql/dql-language.js

@@ -74,7 +74,7 @@ function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityI
             return [];
           }
           setValidityInfo?.(validityResult);
-          return validityResult;
+          return (0, import_dql_linter.toDiagnostics)(validityResult);
         },
         {
           delay: VALIDATION_DELAY

package/editors/dql-editor/dql/dql-linter.d.ts

@@ -1,5 +1,15 @@
+import { Diagnostic } from '@codemirror/lint';
 import { VerifyResponse } from '@dynatrace-sdk/client-query';
 import { DQLEditorValidityInfo } from '../dql-editor-types.js';
+/**
+ * Maps validity info to CodeMirror diagnostics, attaching the styled tooltip renderer.
+ *
+ * `renderMessage` is intentionally kept off {@link DQLEditorValidityInfo} (the public
+ * `onValidationEnd` / `onValidityChange` payload) and added only here, at the CodeMirror
+ * boundary, so the internal tooltip renderer never leaks into the public callback objects.
+ * @internal
+ */
+export declare const toDiagnostics: (validityInfo: DQLEditorValidityInfo[]) => Diagnostic[];
 /**
  * Validates the syntax of the given DQL query.
  *