@dynatrace/strato-components 3.5.0 → 3.6.0

package/esm/editors/dql-editor/DQLEditor.js

@@ -1,101 +1,150 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import {
+  Children,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
 import { useIntl } from "react-intl";
+import * as actionsMenuStyles from "./actions-menu/ActionsMenu.sty.js";
+import {
+  ActionsMenu,
+  ActionsMenuInternal
+} from "./actions-menu/ActionsMenu.js";
 import { getDqlConfig } from "./dql/dql-language.js";
 import { useValidationCallbacks } from "./useValidationCallbacks.js";
 import { useValidityInfo } from "./useValidityInfo.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
+import { isSlot } from "../../core/utils/is-slot.js";
 import { BaseCodeEditor } from "../base-code-editor/BaseCodeEditor.js";
 const COMPONENT_NAME = "DQLEditor";
-const DQLEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
-  const intl = useIntl();
-  const defaultPlaceholder = intl.formatMessage({
-    defaultMessage: "Add DQL",
-    id: "Ir0YCuBX6vOM4t0J",
-    description: "Default placeholder for the DQLEditor."
-  });
-  const {
-    id,
-    value = "",
-    controlState,
-    onChange,
-    folding,
-    onFoldingChange,
-    defaultFolding,
-    fullHeight = false,
-    lineWrap = false,
-    placeholder = defaultPlaceholder,
-    readOnly = false,
-    spellCheck = false,
-    onValidationStart,
-    onValidationEnd,
-    onValidityChange,
-    onFocus,
-    onBlur,
-    size = "default",
-    required,
-    className: consumerClassName,
-    style: consumerStyle,
-    "data-testid": dataTestId,
-    "data-dtrum-mask": dataDtrumMask,
-    "data-dtrum-allow": dataDtrumAllow,
-    ...remainingProps
-  } = props;
-  const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
-  const ariaLabelingProps = useAriaLabelingProps(restProps);
-  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
-  const [editorConfig, setEditorConfig] = useState();
-  const [fireValidationStart, fireValidationEnd] = useValidationCallbacks(
-    onValidationStart,
-    onValidationEnd
-  );
-  const setValidityInfo = useValidityInfo(onValidityChange);
-  useEffect(() => {
-    setEditorConfig(
-      getDqlConfig(
-        readOnly,
-        fireValidationStart,
-        fireValidationEnd,
-        setValidityInfo
-      )
-    );
-  }, [readOnly, setValidityInfo, fireValidationStart, fireValidationEnd]);
-  return /* @__PURE__ */ jsx(
-    BaseCodeEditor,
-    {
+const DQLEditorFwd = /* @__PURE__ */ forwardRef(
+  (props, forwardedRef) => {
+    const intl = useIntl();
+    const defaultPlaceholder = intl.formatMessage({
+      defaultMessage: "Add DQL",
+      id: "Ir0YCuBX6vOM4t0J",
+      description: "Default placeholder for the DQLEditor."
+    });
+    const {
       id,
-      ref: forwardedRef,
-      onChange,
-      placeholder,
+      value = "",
       controlState,
-      readOnly,
-      defaultFolding,
-      lineWrap,
-      value,
-      spellCheck,
-      fullHeight,
+      onChange,
       folding,
       onFoldingChange,
-      configuration: editorConfig,
+      defaultFolding,
+      fullHeight = false,
+      lineWrap = false,
+      placeholder = defaultPlaceholder,
+      readOnly = false,
+      spellCheck = false,
+      onValidationStart,
+      onValidationEnd,
+      onValidityChange,
       onFocus,
       onBlur,
-      size,
+      size = "default",
       required,
+      children,
       className: consumerClassName,
       style: consumerStyle,
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      ...ariaLabelingProps,
-      ...behavioralTrackingProps,
-      ...forwardProps,
-      "data-dt-component": COMPONENT_NAME
+      ...remainingProps
+    } = props;
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+    const ariaLabelingProps = useAriaLabelingProps(restProps);
+    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
+    const internalValueRef = useRef(value);
+    useEffect(() => {
+      internalValueRef.current = value;
+    }, [value]);
+    const handleChange = useCallback(
+      (newValue) => {
+        internalValueRef.current = newValue;
+        onChange?.(newValue);
+      },
+      [onChange]
+    );
+    const getInternalValue = useCallback(() => internalValueRef.current, []);
+    const [editorConfig, setEditorConfig] = useState();
+    const [fireValidationStart, fireValidationEnd] = useValidationCallbacks(
+      onValidationStart,
+      onValidationEnd
+    );
+    const setValidityInfo = useValidityInfo(onValidityChange);
+    useEffect(() => {
+      setEditorConfig(
+        getDqlConfig(
+          readOnly,
+          fireValidationStart,
+          fireValidationEnd,
+          setValidityInfo
+        )
+      );
+    }, [readOnly, setValidityInfo, fireValidationStart, fireValidationEnd]);
+    let hasActionsMenu = false;
+    Children.forEach(children, (child) => {
+      if (isSlot(child, ActionsMenu)) {
+        hasActionsMenu = true;
+      }
+    });
+    const editorClassName = hasActionsMenu ? clsx(
+      consumerClassName,
+      // Apply right padding on .cm-editor to prevent overlap with the menu trigger
+      actionsMenuStyles.editorWithActionsMenu({ size })
+    ) : consumerClassName;
+    const editor = /* @__PURE__ */ jsx(
+      BaseCodeEditor,
+      {
+        id,
+        ref: forwardedRef,
+        onChange: handleChange,
+        placeholder,
+        controlState,
+        readOnly,
+        defaultFolding,
+        lineWrap,
+        value,
+        spellCheck,
+        fullHeight,
+        folding,
+        onFoldingChange,
+        configuration: editorConfig,
+        onFocus,
+        onBlur,
+        size,
+        required,
+        className: editorClassName,
+        style: consumerStyle,
+        "data-testid": dataTestId,
+        "data-dtrum-mask": dataDtrumMask,
+        "data-dtrum-allow": dataDtrumAllow,
+        ...ariaLabelingProps,
+        ...behavioralTrackingProps,
+        ...forwardProps,
+        "data-dt-component": COMPONENT_NAME
+      }
+    );
+    if (hasActionsMenu) {
+      return /* @__PURE__ */ jsxs("div", { className: actionsMenuStyles.editorWrapper({ fullHeight }), children: [
+        editor,
+        /* @__PURE__ */ jsx(ActionsMenuInternal, { getValue: getInternalValue, size })
+      ] });
     }
-  );
+    return editor;
+  }
+);
+const DQLEditor = Object.assign(DQLEditorFwd, {
+  ActionsMenu
 });
-DQLEditor.displayName = COMPONENT_NAME;
 export {
   DQLEditor
 };

package/esm/editors/dql-editor/DQLEditor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/editors/dql-editor/DQLEditor.tsx"],
-  "sourcesContent": ["import { forwardRef, useEffect, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { getDqlConfig } from './dql/dql-language.js';\nimport type { DQLEditorValidityInfo } from './dql-editor-types.js';\nimport { useValidationCallbacks } from './useValidationCallbacks.js';\nimport { useValidityInfo } from './useValidityInfo.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlStateProps } from '../../core/types/form-control-state.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport { BaseCodeEditor } from '../base-code-editor/BaseCodeEditor.js';\nimport type { EditorLanguageConfiguration } from '../base-code-editor/configuration/configuration.js';\n\nconst COMPONENT_NAME = 'DQLEditor';\n\n/**\n * @public\n */\nexport interface DQLEditorProps\n  extends FormControlStateProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** The ID for the DOM element. */\n  id?: string;\n  /**\n   * Test id used for matching the editor container.\n   * @defaultValue 'dql-editor'\n   */\n  'data-testid'?: string;\n  /** The value (i.e. contents) of the editor.\n   * @defaultValue ''\n   */\n  value?: string;\n  /** Handler that is called when the value changes. */\n  onChange?: (value: string) => void;\n  /** Displayed initially in the editor when there is no other content. */\n  placeholder?: string;\n  /** Whether spellcheck should be enabled.\n   * @defaultValue false\n   */\n  spellCheck?: boolean;\n  /**\n   * If set to true, the DQL editor uses the full height available in its parent.\n   * @defaultValue false\n   */\n  fullHeight?: boolean;\n  /** The start indices (character position) that should be folded initially in uncontrolled scenarios. */\n  defaultFolding?: number[];\n  /** The start indices (character position) that should be folded initially in controlled scenarios.*/\n  folding?: number[];\n  /** Callback that is called when folding changes. */\n  onFoldingChange?: (values: number[]) => void;\n  /** Whether the input is readonly\n   * @defaultValue false\n   */\n  readOnly?: boolean;\n  /** Whether long lines should be wrapped.\n   * @defaultValue false\n   */\n  lineWrap?: boolean;\n  /** Callback that is called when the editor loses focus. */\n  onBlur?: (e: FocusEvent) => void;\n  /** Callback that is called when the editor receives focus. */\n  onFocus?: (e: FocusEvent) => void;\n  /**\n   * Callback fired when DQL validation starts.\n   * This can be used for setting a status that validation is in progress.\n   */\n  onValidationStart?: () => void;\n  /**\n   * Callback fired when DQL validation ends.\n   * This can be used for resetting a status that validation is in progress and to get the validation result.\n   */\n  onValidationEnd?: (validityInfo: DQLEditorValidityInfo[]) => void;\n  /**\n   * Callback fired when new diagnostic information is available.\n   * This can be used to get the validation result from outside the editor.\n   */\n  onValidityChange?: (validityInfo: DQLEditorValidityInfo[]) => void;\n  /**\n   * Editor layout size, 'default' for standard spacing and 'condensed' for reduced font-size, padding and margins.\n   * @defaultValue 'default'\n   */\n  size?: 'default' | 'condensed';\n  /**\n   * If set to true, `aria-required` will be set to true on the input element.\n   * @defaultValue false\n   */\n  required?: boolean;\n}\n\n/**\n * public ref type\n * @public\n */\nexport type DQLEditorRef = {\n  focus: () => void;\n  selectRange: (range: { from: number; to: number }) => void;\n  readonly element: HTMLDivElement | null;\n  setCursorPosition: (position: number | 'end') => void;\n};\n\n/**\n * The `DQLEditor` is specifically designed for editing DQL queries. It further offers\n * syntax highlighting and autocomplete functionality specific to the Dynatrace Query Language.\n * 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.\n * @public\n */\nexport const DQLEditor = /* @__PURE__ */ forwardRef<\n  DQLEditorRef,\n  DQLEditorProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage({\n    defaultMessage: 'Add DQL',\n    id: 'Ir0YCuBX6vOM4t0J',\n    description: 'Default placeholder for the DQLEditor.',\n  });\n\n  const {\n    id,\n    value = '',\n    controlState,\n    onChange,\n    folding,\n    onFoldingChange,\n    defaultFolding,\n    fullHeight = false,\n    lineWrap = false,\n    placeholder = defaultPlaceholder,\n    readOnly = false,\n    spellCheck = false,\n    onValidationStart,\n    onValidationEnd,\n    onValidityChange,\n    onFocus,\n    onBlur,\n    size = 'default',\n    required,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n  const [editorConfig, setEditorConfig] =\n    useState<EditorLanguageConfiguration>();\n\n  const [fireValidationStart, fireValidationEnd] = useValidationCallbacks(\n    onValidationStart,\n    onValidationEnd,\n  );\n  const setValidityInfo = useValidityInfo(onValidityChange);\n\n  useEffect(() => {\n    setEditorConfig(\n      getDqlConfig(\n        readOnly,\n        fireValidationStart,\n        fireValidationEnd,\n        setValidityInfo,\n      ),\n    );\n  }, [readOnly, setValidityInfo, fireValidationStart, fireValidationEnd]);\n\n  return (\n    <BaseCodeEditor\n      id={id}\n      ref={forwardedRef}\n      onChange={onChange}\n      placeholder={placeholder}\n      controlState={controlState}\n      readOnly={readOnly}\n      defaultFolding={defaultFolding}\n      lineWrap={lineWrap}\n      value={value}\n      spellCheck={spellCheck}\n      fullHeight={fullHeight}\n      folding={folding}\n      onFoldingChange={onFoldingChange}\n      configuration={editorConfig}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      size={size}\n      required={required}\n      className={consumerClassName}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...ariaLabelingProps}\n      {...behavioralTrackingProps}\n      {...forwardProps}\n      data-dt-component={COMPONENT_NAME}\n    />\n  );\n});\n(DQLEditor as typeof DQLEditor & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AAuLI;AAvLJ,SAAS,YAAY,WAAW,gBAAgB;AAChD,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAE7B,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAOpC,SAAS,sBAAsB;AAG/B,MAAM,iBAAiB;AAkGhB,MAAM,YAA4B,2BAGvC,CAAC,OAAO,iBAAiB;AACzB,QAAM,OAAO,QAAQ;AAErB,QAAM,qBAAqB,KAAK,cAAc;AAAA,IAC5C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,WAAW;AAAA,IACX,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,QAAM,oBAAoB,qBAAqB,SAAS;AACxD,QAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,QAAM,CAAC,cAAc,eAAe,IAClC,SAAsC;AAExC,QAAM,CAAC,qBAAqB,iBAAiB,IAAI;AAAA,IAC/C;AAAA,IACA;AAAA,EACF;AACA,QAAM,kBAAkB,gBAAgB,gBAAgB;AAExD,YAAU,MAAM;AACd;AAAA,MACE;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,iBAAiB,qBAAqB,iBAAiB,CAAC;AAEtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MACjB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA;AAAA,EACrB;AAEJ,CAAC;AACA,UAAyD,cACxD;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as actionsMenuStyles from './actions-menu/ActionsMenu.sty.js';\nimport {\n  ActionsMenu,\n  ActionsMenuInternal,\n} from './actions-menu/ActionsMenu.js';\nimport { getDqlConfig } from './dql/dql-language.js';\nimport type { DQLEditorValidityInfo } from './dql-editor-types.js';\nimport { useValidationCallbacks } from './useValidationCallbacks.js';\nimport { useValidityInfo } from './useValidityInfo.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlStateProps } from '../../core/types/form-control-state.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { BaseCodeEditor } from '../base-code-editor/BaseCodeEditor.js';\nimport type { EditorLanguageConfiguration } from '../base-code-editor/configuration/configuration.js';\n\nconst COMPONENT_NAME = 'DQLEditor';\n\n/**\n * Props for the `DQLEditor` component.\n * @public\n */\nexport interface DQLEditorProps\n  extends FormControlStateProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps,\n    WithChildren {\n  /**\n   * The ID for the DOM element.\n   */\n  id?: string;\n  /**\n   * The value (i.e. contents) of the editor.\n   * @defaultValue ''\n   */\n  value?: string;\n  /**\n   * Handler that is called when the value changes.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Displayed initially in the editor when there is no other content.\n   */\n  placeholder?: string;\n  /**\n   * Whether spellcheck should be enabled.\n   * @defaultValue false\n   */\n  spellCheck?: boolean;\n  /**\n   * If set to true, the DQL editor uses the full height available in its parent.\n   * @defaultValue false\n   */\n  fullHeight?: boolean;\n  /**\n   * The start indices (character position) that should be folded initially in uncontrolled scenarios.\n   */\n  defaultFolding?: number[];\n  /**\n   * The start indices (character position) that should be folded initially in controlled scenarios.\n   */\n  folding?: number[];\n  /**\n   * Callback that is called when folding changes.\n   */\n  onFoldingChange?: (values: number[]) => void;\n  /**\n   * Whether the input is readonly.\n   * @defaultValue false\n   */\n  readOnly?: boolean;\n  /**\n   * Whether long lines should be wrapped.\n   * @defaultValue false\n   */\n  lineWrap?: boolean;\n  /**\n   * Callback that is called when the editor loses focus.\n   */\n  onBlur?: (e: FocusEvent) => void;\n  /**\n   * Callback that is called when the editor receives focus.\n   */\n  onFocus?: (e: FocusEvent) => void;\n  /**\n   * Callback fired when DQL validation starts.\n   * This can be used for setting a status that validation is in progress.\n   */\n  onValidationStart?: () => void;\n  /**\n   * Callback fired when DQL validation ends.\n   * This can be used for resetting a status that validation is in progress and to get the validation result.\n   */\n  onValidationEnd?: (validityInfo: DQLEditorValidityInfo[]) => void;\n  /**\n   * Callback fired when new diagnostic information is available.\n   * This can be used to get the validation result from outside the editor.\n   */\n  onValidityChange?: (validityInfo: DQLEditorValidityInfo[]) => void;\n  /**\n   * Editor layout size, 'default' for standard spacing and 'condensed' for reduced font-size, padding and margins.\n   * @defaultValue 'default'\n   */\n  size?: 'default' | 'condensed';\n  /**\n   * If set to true, `aria-required` will be set to true on the input element.\n   * @defaultValue false\n   */\n  required?: boolean;\n}\n\n/**\n * Ref handle exposed by the `DQLEditor` component.\n * @public\n */\nexport type DQLEditorRef = {\n  /**\n   * Moves focus to the editor.\n   */\n  focus: () => void;\n  /**\n   * Selects the text within the given character-offset range.\n   */\n  selectRange: (range: { from: number; to: number }) => void;\n  /**\n   * The underlying editor container DOM element.\n   */\n  readonly element: HTMLDivElement | null;\n  /**\n   * Moves the cursor to the given character offset, or to the end of the document when `'end'` is passed.\n   */\n  setCursorPosition: (position: number | 'end') => void;\n};\n\n/**\n * @internal\n */\nconst DQLEditorFwd = /* @__PURE__ */ forwardRef<DQLEditorRef, DQLEditorProps>(\n  (props, forwardedRef) => {\n    const intl = useIntl();\n\n    const defaultPlaceholder = intl.formatMessage({\n      defaultMessage: 'Add DQL',\n      id: 'Ir0YCuBX6vOM4t0J',\n      description: 'Default placeholder for the DQLEditor.',\n    });\n\n    const {\n      id,\n      value = '',\n      controlState,\n      onChange,\n      folding,\n      onFoldingChange,\n      defaultFolding,\n      fullHeight = false,\n      lineWrap = false,\n      placeholder = defaultPlaceholder,\n      readOnly = false,\n      spellCheck = false,\n      onValidationStart,\n      onValidationEnd,\n      onValidityChange,\n      onFocus,\n      onBlur,\n      size = 'default',\n      required,\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    // Tracks the live editor content so the ActionsMenu can copy the current value,\n    // not the stale `value` prop (which never updates in uncontrolled usage).\n    // TODO (APPDEV-17373): also initialise from `defaultValue` once Phase 1 lands.\n    const internalValueRef = useRef(value);\n    useEffect(() => {\n      internalValueRef.current = value;\n    }, [value]);\n\n    const handleChange = useCallback(\n      (newValue: string) => {\n        internalValueRef.current = newValue;\n        onChange?.(newValue);\n      },\n      [onChange],\n    );\n\n    const getInternalValue = useCallback(() => internalValueRef.current, []);\n\n    const [editorConfig, setEditorConfig] =\n      useState<EditorLanguageConfiguration>();\n\n    const [fireValidationStart, fireValidationEnd] = useValidationCallbacks(\n      onValidationStart,\n      onValidationEnd,\n    );\n    const setValidityInfo = useValidityInfo(onValidityChange);\n\n    useEffect(() => {\n      setEditorConfig(\n        getDqlConfig(\n          readOnly,\n          fireValidationStart,\n          fireValidationEnd,\n          setValidityInfo,\n        ),\n      );\n    }, [readOnly, setValidityInfo, fireValidationStart, fireValidationEnd]);\n\n    // Detect ActionsMenu slot in children\n    let hasActionsMenu = false;\n    Children.forEach(children, (child) => {\n      if (isSlot(child, ActionsMenu)) {\n        hasActionsMenu = true;\n      }\n    });\n\n    const editorClassName = hasActionsMenu\n      ? clsx(\n          consumerClassName,\n          // Apply right padding on .cm-editor to prevent overlap with the menu trigger\n          actionsMenuStyles.editorWithActionsMenu({ size }),\n        )\n      : consumerClassName;\n\n    const editor = (\n      <BaseCodeEditor\n        id={id}\n        ref={forwardedRef}\n        onChange={handleChange}\n        placeholder={placeholder}\n        controlState={controlState}\n        readOnly={readOnly}\n        defaultFolding={defaultFolding}\n        lineWrap={lineWrap}\n        value={value}\n        spellCheck={spellCheck}\n        fullHeight={fullHeight}\n        folding={folding}\n        onFoldingChange={onFoldingChange}\n        configuration={editorConfig}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        size={size}\n        required={required}\n        className={editorClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...ariaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      />\n    );\n\n    if (hasActionsMenu) {\n      return (\n        <div className={actionsMenuStyles.editorWrapper({ fullHeight })}>\n          {editor}\n          <ActionsMenuInternal getValue={getInternalValue} size={size} />\n        </div>\n      );\n    }\n\n    return editor;\n  },\n);\n\n/**\n * The `DQLEditor` is specifically designed for editing DQL queries.\n *\n * It further offers syntax highlighting and autocomplete functionality specific to the Dynatrace Query Language (DQL).\n * Once the editor is focused via the keyboard, the user must press \"Enter\" to start editing\n * and \"Escape\" to quit editing and return to the keyboard navigation flow.\n * @public\n */\nexport const DQLEditor = Object.assign(DQLEditorFwd, {\n  ActionsMenu,\n});\n"],
+  "mappings": "AAiQM,cAiCE,YAjCF;AAjQN,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAExB,YAAY,uBAAuB;AACnC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAE7B,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAQpC,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAG/B,MAAM,iBAAiB;AA4HvB,MAAM,eAA+B;AAAA,EACnC,CAAC,OAAO,iBAAiB;AACvB,UAAM,OAAO,QAAQ;AAErB,UAAM,qBAAqB,KAAK,cAAc;AAAA,MAC5C,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf,CAAC;AAED,UAAM;AAAA,MACJ;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,WAAW;AAAA,MACX,cAAc;AAAA,MACd,WAAW;AAAA,MACX,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,UAAM,oBAAoB,qBAAqB,SAAS;AACxD,UAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAKrE,UAAM,mBAAmB,OAAO,KAAK;AACrC,cAAU,MAAM;AACd,uBAAiB,UAAU;AAAA,IAC7B,GAAG,CAAC,KAAK,CAAC;AAEV,UAAM,eAAe;AAAA,MACnB,CAAC,aAAqB;AACpB,yBAAiB,UAAU;AAC3B,mBAAW,QAAQ;AAAA,MACrB;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AAEA,UAAM,mBAAmB,YAAY,MAAM,iBAAiB,SAAS,CAAC,CAAC;AAEvE,UAAM,CAAC,cAAc,eAAe,IAClC,SAAsC;AAExC,UAAM,CAAC,qBAAqB,iBAAiB,IAAI;AAAA,MAC/C;AAAA,MACA;AAAA,IACF;AACA,UAAM,kBAAkB,gBAAgB,gBAAgB;AAExD,cAAU,MAAM;AACd;AAAA,QACE;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF,GAAG,CAAC,UAAU,iBAAiB,qBAAqB,iBAAiB,CAAC;AAGtE,QAAI,iBAAiB;AACrB,aAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,UAAI,OAAO,OAAO,WAAW,GAAG;AAC9B,yBAAiB;AAAA,MACnB;AAAA,IACF,CAAC;AAED,UAAM,kBAAkB,iBACpB;AAAA,MACE;AAAA;AAAA,MAEA,kBAAkB,sBAAsB,EAAE,KAAK,CAAC;AAAA,IAClD,IACA;AAEJ,UAAM,SACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAK;AAAA,QACL,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QACjB,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA;AAAA,IACrB;AAGF,QAAI,gBAAgB;AAClB,aACE,qBAAC,SAAI,WAAW,kBAAkB,cAAc,EAAE,WAAW,CAAC,GAC3D;AAAA;AAAA,QACD,oBAAC,uBAAoB,UAAU,kBAAkB,MAAY;AAAA,SAC/D;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT;AACF;AAUO,MAAM,YAAY,OAAO,OAAO,cAAc;AAAA,EACnD;AACF,CAAC;",
   "names": []
 }

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

@@ -0,0 +1,28 @@
+._1okebta0-3-6-0 {
+  position: relative;
+  width: 100%;
+}
+._1okebta1-3-6-0 {
+  display: flex;
+  flex-grow: 1;
+  max-height: 100%;
+  min-height: 100%;
+}
+._1okebta2-3-6-0 {
+  position: absolute;
+  z-index: var(--dt-elevations-default, 1);
+}
+._1okebta3-3-6-0 {
+  top: var(--dt-spacings-size-8, 8px);
+  right: var(--dt-spacings-size-8, 8px);
+}
+._1okebta4-3-6-0 {
+  top: var(--dt-spacings-size-4, 4px);
+  right: var(--dt-spacings-size-4, 4px);
+}
+._1okebta6-3-6-0 .cm-editor {
+  padding-right: var(--dt-spacings-size-40, 40px);
+}
+._1okebta7-3-6-0 .cm-editor {
+  padding-right: var(--dt-spacings-size-28, 28px);
+}

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

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useIntl } from "react-intl";
+import {
+  CopyIcon,
+  DotMenuIcon,
+  ExternalLinkIcon
+} from "@dynatrace/strato-icons";
+import { dqlEditorActionsMenuMessages } from "./actions-menu-messages.js";
+import * as styles from "./ActionsMenu.sty.js";
+import { Button } from "../../../buttons/button/Button.js";
+import { DQL_DOCUMENTATION_URL } from "../../../core/external-links.js";
+import { Menu } from "../../../navigation/menu/Menu.js";
+const ActionsMenu = () => null;
+ActionsMenu.displayName = "DQLEditor.ActionsMenu";
+const ActionsMenuInternal = ({
+  getValue,
+  size
+}) => {
+  const intl = useIntl();
+  const copyToClipboard = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(getValue());
+    } catch {
+    }
+  }, [getValue]);
+  return /* @__PURE__ */ jsx("div", { className: styles.actionsMenuWrapper({ size }), children: /* @__PURE__ */ jsxs(Menu, { children: [
+    /* @__PURE__ */ jsx(Menu.Trigger, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "default",
+        size,
+        "aria-label": intl.formatMessage(
+          dqlEditorActionsMenuMessages.triggerLabel
+        ),
+        "data-dt-name": "OpenActionsMenu",
+        children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(DotMenuIcon, {}) })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Menu.Content, { children: [
+      /* @__PURE__ */ jsx(Menu.Group, { children: /* @__PURE__ */ jsxs(
+        Menu.Item,
+        {
+          onSelect: () => {
+            copyToClipboard().catch(() => void 0);
+          },
+          "data-dt-name": "CopyQuery",
+          children: [
+            /* @__PURE__ */ jsx(Menu.Prefix, { children: /* @__PURE__ */ jsx(CopyIcon, {}) }),
+            intl.formatMessage(dqlEditorActionsMenuMessages.copyQuery)
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Menu.Group, { children: /* @__PURE__ */ jsxs(
+        Menu.Link,
+        {
+          href: DQL_DOCUMENTATION_URL,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          "data-dt-name": "OpenDocumentation",
+          children: [
+            /* @__PURE__ */ jsx(Menu.Prefix, { children: /* @__PURE__ */ jsx(ExternalLinkIcon, {}) }),
+            intl.formatMessage(
+              dqlEditorActionsMenuMessages.openDocumentation
+            )
+          ]
+        }
+      ) })
+    ] })
+  ] }) });
+};
+export {
+  ActionsMenu,
+  ActionsMenuInternal
+};
+//# sourceMappingURL=ActionsMenu.js.map

package/esm/editors/dql-editor/actions-menu/ActionsMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/editors/dql-editor/actions-menu/ActionsMenu.tsx"],
+  "sourcesContent": ["import { useCallback } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  CopyIcon,\n  DotMenuIcon,\n  ExternalLinkIcon,\n} from '@dynatrace/strato-icons';\n\nimport { dqlEditorActionsMenuMessages } from './actions-menu-messages.js';\nimport * as styles from './ActionsMenu.sty.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { DQL_DOCUMENTATION_URL } from '../../../core/external-links.js';\nimport { Menu } from '../../../navigation/menu/Menu.js';\n\n/**\n * Slot component that enables the actions menu in the DQLEditor.\n *\n * Rendering this component as a child of `DQLEditor` displays a kebab menu\n * with built-in actions (Copy query, Open documentation).\n * @public\n */\n// TODO (APPDEV-17376): Introduce ActionsMenuProps with `children` to support custom menu items rendered between the built-in actions.\nexport const ActionsMenu = (): null => null;\n(ActionsMenu as typeof ActionsMenu & { displayName: string }).displayName =\n  'DQLEditor.ActionsMenu';\n\n/**\n * Props for the `ActionsMenuInternal` component.\n * @internal\n */\nexport interface ActionsMenuInternalProps {\n  /**\n   * Returns the editor's current content, copied to clipboard when the copy action is triggered.\n   */\n  getValue: () => string;\n  /**\n   * The editor's size variant affecting the trigger button and positioning.\n   */\n  size: 'default' | 'condensed';\n}\n\n/**\n * Internal component that renders the DQLEditor actions menu.\n * @internal\n */\nexport const ActionsMenuInternal = ({\n  getValue,\n  size,\n}: ActionsMenuInternalProps) => {\n  const intl = useIntl();\n  // getValue() is called at copy time (not at render time) so it always reads\n  // the current editor content from the ref, regardless of re-renders.\n  const copyToClipboard = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(getValue());\n    } catch {\n      // For now, we silently ignore clipboard write errors.\n    }\n  }, [getValue]);\n\n  return (\n    <div className={styles.actionsMenuWrapper({ size })}>\n      <Menu>\n        <Menu.Trigger>\n          <Button\n            variant=\"default\"\n            size={size}\n            aria-label={intl.formatMessage(\n              dqlEditorActionsMenuMessages.triggerLabel,\n            )}\n            data-dt-name=\"OpenActionsMenu\"\n          >\n            <Button.Prefix>\n              <DotMenuIcon />\n            </Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.Group>\n            <Menu.Item\n              onSelect={() => {\n                copyToClipboard().catch(() => void 0);\n              }}\n              data-dt-name=\"CopyQuery\"\n            >\n              <Menu.Prefix>\n                <CopyIcon />\n              </Menu.Prefix>\n              {intl.formatMessage(dqlEditorActionsMenuMessages.copyQuery)}\n            </Menu.Item>\n          </Menu.Group>\n          <Menu.Group>\n            <Menu.Link\n              href={DQL_DOCUMENTATION_URL}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              data-dt-name=\"OpenDocumentation\"\n            >\n              <Menu.Prefix>\n                <ExternalLinkIcon />\n              </Menu.Prefix>\n              {intl.formatMessage(\n                dqlEditorActionsMenuMessages.openDocumentation,\n              )}\n            </Menu.Link>\n          </Menu.Group>\n        </Menu.Content>\n      </Menu>\n    </div>\n  );\n};\n"],
+  "mappings": "AA0Ec,cAMF,YANE;AA1Ed,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oCAAoC;AAC7C,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,YAAY;AAUd,MAAM,cAAc,MAAY;AACtC,YAA6D,cAC5D;AAqBK,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,OAAO,QAAQ;AAGrB,QAAM,kBAAkB,YAAY,YAAY;AAC9C,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,SAAS,CAAC;AAAA,IAChD,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE,oBAAC,SAAI,WAAW,OAAO,mBAAmB,EAAE,KAAK,CAAC,GAChD,+BAAC,QACC;AAAA,wBAAC,KAAK,SAAL,EACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,cAAY,KAAK;AAAA,UACf,6BAA6B;AAAA,QAC/B;AAAA,QACA,gBAAa;AAAA,QAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,eAAY,GACf;AAAA;AAAA,IACF,GACF;AAAA,IACA,qBAAC,KAAK,SAAL,EACC;AAAA,0BAAC,KAAK,OAAL,EACC;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,MAAM;AACd,4BAAgB,EAAE,MAAM,MAAM,MAAM;AAAA,UACtC;AAAA,UACA,gBAAa;AAAA,UAEb;AAAA,gCAAC,KAAK,QAAL,EACC,8BAAC,YAAS,GACZ;AAAA,YACC,KAAK,cAAc,6BAA6B,SAAS;AAAA;AAAA;AAAA,MAC5D,GACF;AAAA,MACA,oBAAC,KAAK,OAAL,EACC;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,MAAM;AAAA,UACN,QAAO;AAAA,UACP,KAAI;AAAA,UACJ,gBAAa;AAAA,UAEb;AAAA,gCAAC,KAAK,QAAL,EACC,8BAAC,oBAAiB,GACpB;AAAA,YACC,KAAK;AAAA,cACJ,6BAA6B;AAAA,YAC/B;AAAA;AAAA;AAAA,MACF,GACF;AAAA,OACF;AAAA,KACF,GACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,11 @@
+import "./ActionsMenu.css";
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var actionsMenuWrapper = _7a468({ defaultClassName: "_1okebta2-3-6-0", variantClassNames: { size: { "default": "_1okebta3-3-6-0", condensed: "_1okebta4-3-6-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var editorWithActionsMenu = _7a468({ defaultClassName: "_1okebta5-3-6-0", variantClassNames: { size: { "default": "_1okebta6-3-6-0", condensed: "_1okebta7-3-6-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var editorWrapper = _7a468({ defaultClassName: "_1okebta0-3-6-0", variantClassNames: { fullHeight: { true: "_1okebta1-3-6-0" } }, defaultVariants: { fullHeight: false }, compoundVariants: [] });
+export {
+  actionsMenuWrapper,
+  editorWithActionsMenu,
+  editorWrapper
+};
+//# sourceMappingURL=ActionsMenu.sty.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/editors/dql-editor/actions-menu/ActionsMenu.css.ts"],
+  "sourcesContent": ["import './ActionsMenu.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var actionsMenuWrapper = _7a468({defaultClassName:'_1okebta2-3-6-0',variantClassNames:{size:{'default':'_1okebta3-3-6-0',condensed:'_1okebta4-3-6-0'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var editorWithActionsMenu = _7a468({defaultClassName:'_1okebta5-3-6-0',variantClassNames:{size:{'default':'_1okebta6-3-6-0',condensed:'_1okebta7-3-6-0'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var editorWrapper = _7a468({defaultClassName:'_1okebta0-3-6-0',variantClassNames:{fullHeight:{true:'_1okebta1-3-6-0'}},defaultVariants:{fullHeight:false},compoundVariants:[]});"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5M,IAAI,wBAAwB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/M,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,YAAW,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "names": []
+}

package/esm/editors/dql-editor/actions-menu/actions-menu-messages.js

@@ -0,0 +1,22 @@
+import { defineMessages } from "react-intl";
+const dqlEditorActionsMenuMessages = defineMessages({
+  triggerLabel: {
+    defaultMessage: "DQL editor actions",
+    id: "VYHp9Wzie7wOmBmf",
+    description: "Aria label for the DQL editor actions menu trigger button."
+  },
+  copyQuery: {
+    defaultMessage: "Copy query",
+    id: "NwDE2g2nYFjxPG9v",
+    description: "Menu item label to copy the DQL query to the clipboard."
+  },
+  openDocumentation: {
+    defaultMessage: "Open documentation",
+    id: "XmYqCKn9iEfBoSSL",
+    description: "Menu item label to open the DQL documentation in a new browser tab."
+  }
+});
+export {
+  dqlEditorActionsMenuMessages
+};
+//# sourceMappingURL=actions-menu-messages.js.map

package/esm/editors/dql-editor/actions-menu/actions-menu-messages.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/editors/dql-editor/actions-menu/actions-menu-messages.ts"],
+  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const dqlEditorActionsMenuMessages = defineMessages({\n  triggerLabel: {\n    defaultMessage: 'DQL editor actions',\n    id: 'VYHp9Wzie7wOmBmf',\n    description: 'Aria label for the DQL editor actions menu trigger button.',\n  },\n  copyQuery: {\n    defaultMessage: 'Copy query',\n    id: 'NwDE2g2nYFjxPG9v',\n    description: 'Menu item label to copy the DQL query to the clipboard.',\n  },\n  openDocumentation: {\n    defaultMessage: 'Open documentation',\n    id: 'XmYqCKn9iEfBoSSL',\n    description:\n      'Menu item label to open the DQL documentation in a new browser tab.',\n  },\n});\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,+BAA+B,eAAe;AAAA,EACzD,cAAc;AAAA,IACZ,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf;AAAA,EACA,WAAW;AAAA,IACT,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf;AAAA,EACA,mBAAmB;AAAA,IACjB,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AACF,CAAC;",
+  "names": []
+}

package/esm/editors/dql-editor/dql/DocumentationLink.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import { DQL_DOCUMENTATION_URL_PREFIX } from "../../../core/external-links.js";
 import { ExternalLink } from "../../../typography/external-link/ExternalLink.js";
-const URL_PREFIX = "https://dt-url.net/dql_";
 function generateDocumentationLink(suggestion) {
   const supportedTypes = /* @__PURE__ */ new Map();
   supportedTypes.set("COMMAND_NAME", "command");
@@ -12,7 +12,7 @@ function generateDocumentationLink(suggestion) {
   const encoded = encodeURI(
     `${supportedTypes.get(suggestion.type)}_${suggestion.suggestion}`
   );
-  return `${URL_PREFIX}${encoded}`;
+  return `${DQL_DOCUMENTATION_URL_PREFIX}${encoded}`;
 }
 const DocumentationLink = ({
   suggestionPart
@@ -22,7 +22,6 @@ const DocumentationLink = ({
 };
 export {
   DocumentationLink,
-  URL_PREFIX,
   generateDocumentationLink
 };
 //# sourceMappingURL=DocumentationLink.js.map

package/esm/editors/dql-editor/dql/DocumentationLink.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/dql-editor/dql/DocumentationLink.tsx"],
-  "sourcesContent": ["import type { AutocompleteSuggestionPart } from '@dynatrace-sdk/client-query';\n\nimport { ExternalLink } from '../../../typography/external-link/ExternalLink.js';\n\nexport const URL_PREFIX = 'https://dt-url.net/dql_';\n\n/**\n * Generates URLs to the docs for DQL commands and functions.\n * Maps supported token types to static URL parts ('COMMAND_NAME' to 'command', 'FUNCTION_NAME' to 'function', 'TIMESERIES_AGGREGATION' to 'timeseries').\n * FIXME: This is a tempory solution (EXA-4874) and will be replaced by URLs provided by the server (EXA-5121).\n * @param suggestion - the autocomplete suggestion as returned by the endpoint\n * @returns the generated URL, or 'undefined' if any other token type then 'COMMAND_NAME' or 'FUNCTION_NAME'\n */\nexport function generateDocumentationLink(\n  suggestion: AutocompleteSuggestionPart | undefined,\n): string | undefined {\n  const supportedTypes = new Map<string, string>();\n  supportedTypes.set('COMMAND_NAME', 'command');\n  supportedTypes.set('FUNCTION_NAME', 'function');\n  supportedTypes.set('TIMESERIES_AGGREGATION', 'timeseries');\n\n  if (\n    !suggestion?.type ||\n    !Array.from(supportedTypes.keys()).includes(suggestion.type)\n  ) {\n    return undefined;\n  }\n\n  const encoded = encodeURI(\n    `${supportedTypes.get(suggestion.type)}_${suggestion.suggestion}`,\n  );\n\n  return `${URL_PREFIX}${encoded}`;\n}\n\nexport const DocumentationLink = ({\n  suggestionPart,\n}: {\n  suggestionPart: AutocompleteSuggestionPart | undefined;\n}) => {\n  const docUrl = generateDocumentationLink(suggestionPart);\n  return docUrl ? (\n    <ExternalLink href={docUrl} data-dt-name=\"LearnMore\">\n      Learn more\n    </ExternalLink>\n  ) : null;\n};\n"],
-  "mappings": "AA0CI;AAxCJ,SAAS,oBAAoB;AAEtB,MAAM,aAAa;AASnB,SAAS,0BACd,YACoB;AACpB,QAAM,iBAAiB,oBAAI,IAAoB;AAC/C,iBAAe,IAAI,gBAAgB,SAAS;AAC5C,iBAAe,IAAI,iBAAiB,UAAU;AAC9C,iBAAe,IAAI,0BAA0B,YAAY;AAEzD,MACE,CAAC,YAAY,QACb,CAAC,MAAM,KAAK,eAAe,KAAK,CAAC,EAAE,SAAS,WAAW,IAAI,GAC3D;AACA,WAAO;AAAA,EACT;AAEA,QAAM,UAAU;AAAA,IACd,GAAG,eAAe,IAAI,WAAW,IAAI,CAAC,IAAI,WAAW,UAAU;AAAA,EACjE;AAEA,SAAO,GAAG,UAAU,GAAG,OAAO;AAChC;AAEO,MAAM,oBAAoB,CAAC;AAAA,EAChC;AACF,MAEM;AACJ,QAAM,SAAS,0BAA0B,cAAc;AACvD,SAAO,SACL,oBAAC,gBAAa,MAAM,QAAQ,gBAAa,aAAY,wBAErD,IACE;AACN;",
+  "sourcesContent": ["import type { AutocompleteSuggestionPart } from '@dynatrace-sdk/client-query';\n\nimport { DQL_DOCUMENTATION_URL_PREFIX } from '../../../core/external-links.js';\nimport { ExternalLink } from '../../../typography/external-link/ExternalLink.js';\n\n/**\n * Generates URLs to the docs for DQL commands and functions.\n * Maps supported token types to static URL parts ('COMMAND_NAME' to 'command', 'FUNCTION_NAME' to 'function', 'TIMESERIES_AGGREGATION' to 'timeseries').\n * FIXME: This is a tempory solution (EXA-4874) and will be replaced by URLs provided by the server (EXA-5121).\n * @param suggestion - the autocomplete suggestion as returned by the endpoint\n * @returns the generated URL, or 'undefined' if any other token type then 'COMMAND_NAME' or 'FUNCTION_NAME'\n */\nexport function generateDocumentationLink(\n  suggestion: AutocompleteSuggestionPart | undefined,\n): string | undefined {\n  const supportedTypes = new Map<string, string>();\n  supportedTypes.set('COMMAND_NAME', 'command');\n  supportedTypes.set('FUNCTION_NAME', 'function');\n  supportedTypes.set('TIMESERIES_AGGREGATION', 'timeseries');\n\n  if (\n    !suggestion?.type ||\n    !Array.from(supportedTypes.keys()).includes(suggestion.type)\n  ) {\n    return undefined;\n  }\n\n  const encoded = encodeURI(\n    `${supportedTypes.get(suggestion.type)}_${suggestion.suggestion}`,\n  );\n\n  return `${DQL_DOCUMENTATION_URL_PREFIX}${encoded}`;\n}\n\nexport const DocumentationLink = ({\n  suggestionPart,\n}: {\n  suggestionPart: AutocompleteSuggestionPart | undefined;\n}) => {\n  const docUrl = generateDocumentationLink(suggestionPart);\n  return docUrl ? (\n    <ExternalLink href={docUrl} data-dt-name=\"LearnMore\">\n      Learn more\n    </ExternalLink>\n  ) : null;\n};\n"],
+  "mappings": "AAyCI;AAvCJ,SAAS,oCAAoC;AAC7C,SAAS,oBAAoB;AAStB,SAAS,0BACd,YACoB;AACpB,QAAM,iBAAiB,oBAAI,IAAoB;AAC/C,iBAAe,IAAI,gBAAgB,SAAS;AAC5C,iBAAe,IAAI,iBAAiB,UAAU;AAC9C,iBAAe,IAAI,0BAA0B,YAAY;AAEzD,MACE,CAAC,YAAY,QACb,CAAC,MAAM,KAAK,eAAe,KAAK,CAAC,EAAE,SAAS,WAAW,IAAI,GAC3D;AACA,WAAO;AAAA,EACT;AAEA,QAAM,UAAU;AAAA,IACd,GAAG,eAAe,IAAI,WAAW,IAAI,CAAC,IAAI,WAAW,UAAU;AAAA,EACjE;AAEA,SAAO,GAAG,4BAA4B,GAAG,OAAO;AAClD;AAEO,MAAM,oBAAoB,CAAC;AAAA,EAChC;AACF,MAEM;AACJ,QAAM,SAAS,0BAA0B,cAAc;AACvD,SAAO,SACL,oBAAC,gBAAa,MAAM,QAAQ,gBAAa,aAAY,wBAErD,IACE;AACN;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./SuggestionPart.css";
-var suggestionPartSectionInfoCSS = "_yhio8f0-3-5-0";
+var suggestionPartSectionInfoCSS = "_yhio8f0-3-6-0";
 export {
   suggestionPartSectionInfoCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/dql-editor/dql/SuggestionPart.css.ts"],
-  "sourcesContent": ["import './SuggestionPart.css';\nexport var suggestionPartSectionInfoCSS = '_yhio8f0-3-5-0';"],
+  "sourcesContent": ["import './SuggestionPart.css';\nexport var suggestionPartSectionInfoCSS = '_yhio8f0-3-6-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,+BAA+B;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
-import { startCompletion } from "@codemirror/autocomplete";
+import { closeCompletion, startCompletion } from "@codemirror/autocomplete";
 import { StreamLanguage } from "@codemirror/language";
-import { linter } from "@codemirror/lint";
+import { linter, setDiagnostics } from "@codemirror/lint";
 import { EditorView } from "@codemirror/view";
 import { dqlLinter } from "./dql-linter.js";
 import { dql } from "./dql.js";
@@ -26,6 +26,16 @@ function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityI
           stringPrefixes: []
         }
       }),
+      EditorView.domEventObservers({
+        // Clear lint decorations when composition starts. Lint spans in the DOM
+        // corrupt CodeMirror's DOM reconciliation during IME / dead-key composition.
+        // The linter re-runs automatically after composition ends since the
+        // composed character is a document change.
+        compositionstart: (_event, view) => {
+          closeCompletion(view);
+          view.dispatch(setDiagnostics(view.state, []));
+        }
+      }),
       linter(
         async (view) => {
           const editorContent = view.state.doc.toString();
@@ -34,6 +44,9 @@ function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityI
             onValidationStart,
             onValidationEnd
           );
+          if (view.composing) {
+            return [];
+          }
           setValidityInfo?.(validityResult);
           return validityResult;
         },
@@ -41,31 +54,32 @@ function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityI
           delay: VALIDATION_DELAY
         }
       ),
-      EditorView.updateListener.of(async (update) => {
+      EditorView.updateListener.of((update) => {
         const isTyping = update.docChanged && update.transactions.some(
           (transaction) => transaction.isUserEvent("input.type")
         );
         const isDeleting = update.docChanged && update.transactions.some(
           (transaction) => transaction.isUserEvent("delete.backward")
         );
-        const selectionChanged = update.selectionSet && !update.transactions.some(
-          (transaction) => transaction.isUserEvent("input.complete")
-        );
         const isFocused = update.focusChanged && update.view.hasFocus;
-        if (!(isTyping || isDeleting || selectionChanged || isFocused)) {
+        if (!(isTyping || isDeleting || isFocused)) {
           return;
         }
-        if (await openAutocomplete(
+        if (update.view.composing) {
+          return;
+        }
+        void openAutocomplete(
           {
             isTyping,
             isDeleting,
-            isFocused,
-            selectionChanged
+            isFocused
           },
           update.state
-        )) {
-          startCompletion(update.view);
-        }
+        ).then((shouldComplete) => {
+          if (shouldComplete) {
+            startCompletion(update.view);
+          }
+        });
       })
     ],
     autocompleteOptions: readOnly ? void 0 : {