@dynatrace/strato-components 3.5.0 → 3.6.0

package/editors/dql-editor/DQLEditor.js

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,6 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DQLEditor_exports = {};
 __export(DQLEditor_exports, {
@@ -21,100 +31,139 @@ __export(DQLEditor_exports, {
 });
 module.exports = __toCommonJS(DQLEditor_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_react_intl = require("react-intl");
+var actionsMenuStyles = __toESM(require("./actions-menu/ActionsMenu.sty.js"));
+var import_ActionsMenu = require("./actions-menu/ActionsMenu.js");
 var import_dql_language = require("./dql/dql-language.js");
 var import_useValidationCallbacks = require("./useValidationCallbacks.js");
 var import_useValidityInfo = require("./useValidityInfo.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useSafeForwardProps = require("../../core/hooks/useSafeForwardProps.js");
+var import_is_slot = require("../../core/utils/is-slot.js");
 var import_BaseCodeEditor = require("../base-code-editor/BaseCodeEditor.js");
 const COMPONENT_NAME = "DQLEditor";
-const DQLEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
-  const intl = (0, import_react_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] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
-  const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(restProps);
-  const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(restProps, ariaLabelingProps);
-  const [editorConfig, setEditorConfig] = (0, import_react.useState)();
-  const [fireValidationStart, fireValidationEnd] = (0, import_useValidationCallbacks.useValidationCallbacks)(
-    onValidationStart,
-    onValidationEnd
-  );
-  const setValidityInfo = (0, import_useValidityInfo.useValidityInfo)(onValidityChange);
-  (0, import_react.useEffect)(() => {
-    setEditorConfig(
-      (0, import_dql_language.getDqlConfig)(
-        readOnly,
-        fireValidationStart,
-        fireValidationEnd,
-        setValidityInfo
-      )
-    );
-  }, [readOnly, setValidityInfo, fireValidationStart, fireValidationEnd]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_BaseCodeEditor.BaseCodeEditor,
-    {
+const DQLEditorFwd = /* @__PURE__ */ (0, import_react.forwardRef)(
+  (props, forwardedRef) => {
+    const intl = (0, import_react_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] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
+    const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(restProps);
+    const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(restProps, ariaLabelingProps);
+    const internalValueRef = (0, import_react.useRef)(value);
+    (0, import_react.useEffect)(() => {
+      internalValueRef.current = value;
+    }, [value]);
+    const handleChange = (0, import_react.useCallback)(
+      (newValue) => {
+        internalValueRef.current = newValue;
+        onChange?.(newValue);
+      },
+      [onChange]
+    );
+    const getInternalValue = (0, import_react.useCallback)(() => internalValueRef.current, []);
+    const [editorConfig, setEditorConfig] = (0, import_react.useState)();
+    const [fireValidationStart, fireValidationEnd] = (0, import_useValidationCallbacks.useValidationCallbacks)(
+      onValidationStart,
+      onValidationEnd
+    );
+    const setValidityInfo = (0, import_useValidityInfo.useValidityInfo)(onValidityChange);
+    (0, import_react.useEffect)(() => {
+      setEditorConfig(
+        (0, import_dql_language.getDqlConfig)(
+          readOnly,
+          fireValidationStart,
+          fireValidationEnd,
+          setValidityInfo
+        )
+      );
+    }, [readOnly, setValidityInfo, fireValidationStart, fireValidationEnd]);
+    let hasActionsMenu = false;
+    import_react.Children.forEach(children, (child) => {
+      if ((0, import_is_slot.isSlot)(child, import_ActionsMenu.ActionsMenu)) {
+        hasActionsMenu = true;
+      }
+    });
+    const editorClassName = hasActionsMenu ? (0, import_clsx.default)(
+      consumerClassName,
+      // Apply right padding on .cm-editor to prevent overlap with the menu trigger
+      actionsMenuStyles.editorWithActionsMenu({ size })
+    ) : consumerClassName;
+    const editor = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_BaseCodeEditor.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: actionsMenuStyles.editorWrapper({ fullHeight }), children: [
+        editor,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionsMenu.ActionsMenuInternal, { getValue: getInternalValue, size })
+      ] });
     }
-  );
+    return editor;
+  }
+);
+const DQLEditor = Object.assign(DQLEditorFwd, {
+  ActionsMenu: import_ActionsMenu.ActionsMenu
 });
-DQLEditor.displayName = COMPONENT_NAME;

package/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/editors/dql-editor/actions-menu/ActionsMenu.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Slot component that enables the actions menu in the DQLEditor.
+ *
+ * Rendering this component as a child of `DQLEditor` displays a kebab menu
+ * with built-in actions (Copy query, Open documentation).
+ * @public
+ */
+export declare const ActionsMenu: () => null;
+/**
+ * Props for the `ActionsMenuInternal` component.
+ * @internal
+ */
+export interface ActionsMenuInternalProps {
+    /**
+     * Returns the editor's current content, copied to clipboard when the copy action is triggered.
+     */
+    getValue: () => string;
+    /**
+     * The editor's size variant affecting the trigger button and positioning.
+     */
+    size: 'default' | 'condensed';
+}
+/**
+ * Internal component that renders the DQLEditor actions menu.
+ * @internal
+ */
+export declare const ActionsMenuInternal: ({ getValue, size, }: ActionsMenuInternalProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,100 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ActionsMenu_exports = {};
+__export(ActionsMenu_exports, {
+  ActionsMenu: () => ActionsMenu,
+  ActionsMenuInternal: () => ActionsMenuInternal
+});
+module.exports = __toCommonJS(ActionsMenu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_intl = require("react-intl");
+var import_strato_icons = require("@dynatrace/strato-icons");
+var import_actions_menu_messages = require("./actions-menu-messages.js");
+var styles = __toESM(require("./ActionsMenu.sty.js"));
+var import_Button = require("../../../buttons/button/Button.js");
+var import_external_links = require("../../../core/external-links.js");
+var import_Menu = require("../../../navigation/menu/Menu.js");
+const ActionsMenu = () => null;
+ActionsMenu.displayName = "DQLEditor.ActionsMenu";
+const ActionsMenuInternal = ({
+  getValue,
+  size
+}) => {
+  const intl = (0, import_react_intl.useIntl)();
+  const copyToClipboard = (0, import_react.useCallback)(async () => {
+    try {
+      await navigator.clipboard.writeText(getValue());
+    } catch {
+    }
+  }, [getValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.actionsMenuWrapper({ size }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Button.Button,
+      {
+        variant: "default",
+        size,
+        "aria-label": intl.formatMessage(
+          import_actions_menu_messages.dqlEditorActionsMenuMessages.triggerLabel
+        ),
+        "data-dt-name": "OpenActionsMenu",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.DotMenuIcon, {}) })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_Menu.Menu.Item,
+        {
+          onSelect: () => {
+            copyToClipboard().catch(() => void 0);
+          },
+          "data-dt-name": "CopyQuery",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.CopyIcon, {}) }),
+            intl.formatMessage(import_actions_menu_messages.dqlEditorActionsMenuMessages.copyQuery)
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_Menu.Menu.Link,
+        {
+          href: import_external_links.DQL_DOCUMENTATION_URL,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          "data-dt-name": "OpenDocumentation",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.ExternalLinkIcon, {}) }),
+            intl.formatMessage(
+              import_actions_menu_messages.dqlEditorActionsMenuMessages.openDocumentation
+            )
+          ]
+        }
+      ) })
+    ] })
+  ] }) });
+};

package/editors/dql-editor/actions-menu/ActionsMenu.sty.d.ts

@@ -0,0 +1,28 @@
+export declare const editorWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+    fullHeight: {
+        true: {
+            display: "flex";
+            flexGrow: number;
+            maxHeight: "100%";
+            minHeight: "100%";
+        };
+    };
+}>;
+export declare const actionsMenuWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        default: {
+            top: string;
+            right: string;
+        };
+        condensed: {
+            top: string;
+            right: string;
+        };
+    };
+}>;
+export declare const editorWithActionsMenu: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        default: {};
+        condensed: {};
+    };
+}>;

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

@@ -0,0 +1,29 @@
+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 ActionsMenu_css_exports = {};
+__export(ActionsMenu_css_exports, {
+  actionsMenuWrapper: () => actionsMenuWrapper,
+  editorWithActionsMenu: () => editorWithActionsMenu,
+  editorWrapper: () => editorWrapper
+});
+module.exports = __toCommonJS(ActionsMenu_css_exports);
+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-6-0", variantClassNames: { size: { "default": "_1okebta3-3-6-0", condensed: "_1okebta4-3-6-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var editorWithActionsMenu = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1okebta5-3-6-0", variantClassNames: { size: { "default": "_1okebta6-3-6-0", condensed: "_1okebta7-3-6-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var editorWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1okebta0-3-6-0", variantClassNames: { fullHeight: { true: "_1okebta1-3-6-0" } }, defaultVariants: { fullHeight: false }, compoundVariants: [] });

package/editors/dql-editor/actions-menu/actions-menu-messages.d.ts

@@ -0,0 +1,17 @@
+export declare const dqlEditorActionsMenuMessages: {
+    triggerLabel: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
+    copyQuery: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
+    openDocumentation: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
+};

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

@@ -0,0 +1,40 @@
+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 actions_menu_messages_exports = {};
+__export(actions_menu_messages_exports, {
+  dqlEditorActionsMenuMessages: () => dqlEditorActionsMenuMessages
+});
+module.exports = __toCommonJS(actions_menu_messages_exports);
+var import_react_intl = require("react-intl");
+const dqlEditorActionsMenuMessages = (0, import_react_intl.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."
+  }
+});

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

@@ -1,5 +1,4 @@
 import type { AutocompleteSuggestionPart } from '@dynatrace-sdk/client-query';
-export declare const URL_PREFIX = "https://dt-url.net/dql_";
 /**
  * Generates URLs to the docs for DQL commands and functions.
  * Maps supported token types to static URL parts ('COMMAND_NAME' to 'command', 'FUNCTION_NAME' to 'function', 'TIMESERIES_AGGREGATION' to 'timeseries').

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

@@ -18,13 +18,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var DocumentationLink_exports = {};
 __export(DocumentationLink_exports, {
   DocumentationLink: () => DocumentationLink,
-  URL_PREFIX: () => URL_PREFIX,
   generateDocumentationLink: () => generateDocumentationLink
 });
 module.exports = __toCommonJS(DocumentationLink_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_external_links = require("../../../core/external-links.js");
 var import_ExternalLink = require("../../../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");
@@ -36,7 +35,7 @@ function generateDocumentationLink(suggestion) {
   const encoded = encodeURI(
     `${supportedTypes.get(suggestion.type)}_${suggestion.suggestion}`
   );
-  return `${URL_PREFIX}${encoded}`;
+  return `${import_external_links.DQL_DOCUMENTATION_URL_PREFIX}${encoded}`;
 }
 const DocumentationLink = ({
   suggestionPart

package/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/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-5-0";
+var suggestionPartSectionInfoCSS = "_yhio8f0-3-6-0";

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

@@ -48,6 +48,16 @@ function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityI
           stringPrefixes: []
         }
       }),
+      import_view.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) => {
+          (0, import_autocomplete.closeCompletion)(view);
+          view.dispatch((0, import_lint.setDiagnostics)(view.state, []));
+        }
+      }),
       (0, import_lint.linter)(
         async (view) => {
           const editorContent = view.state.doc.toString();
@@ -56,6 +66,9 @@ function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityI
             onValidationStart,
             onValidationEnd
           );
+          if (view.composing) {
+            return [];
+          }
           setValidityInfo?.(validityResult);
           return validityResult;
         },
@@ -63,31 +76,32 @@ function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityI
           delay: VALIDATION_DELAY
         }
       ),
-      import_view.EditorView.updateListener.of(async (update) => {
+      import_view.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 (0, import_open_autocomplete.openAutocomplete)(
+        if (update.view.composing) {
+          return;
+        }
+        void (0, import_open_autocomplete.openAutocomplete)(
           {
             isTyping,
             isDeleting,
-            isFocused,
-            selectionChanged
+            isFocused
           },
           update.state
-        )) {
-          (0, import_autocomplete.startCompletion)(update.view);
-        }
+        ).then((shouldComplete) => {
+          if (shouldComplete) {
+            (0, import_autocomplete.startCompletion)(update.view);
+          }
+        });
       })
     ],
     autocompleteOptions: readOnly ? void 0 : {

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

@@ -28,7 +28,9 @@ const tokenMapping = {
   parameter: "variableName",
   string: "string",
   number: "number",
-  bool: "bool"
+  bool: "bool",
+  null: "bool"
+  // null uses the same token as boolean literals
 };
 const startComment = [
   { regex: /\/\/.*/, token: tokenMapping.comment },
@@ -65,6 +67,8 @@ const dql = (0, import_simple_mode.simpleMode)({
     // parameter, eg: scanLimitGb:
     { regex: import_dql_common.booleanLiteralPattern, token: tokenMapping.bool },
     // boolean literals (true/false)
+    { regex: import_dql_common.nullLiteralPattern, token: tokenMapping.null },
+    // null literal
     { regex: /[A-Za-z\]]+[A-Za-z_.0-9]+/ },
     // identifier, eg: runs_on or metricsJson
     { regex: /"""/, token: tokenMapping.string, push: "tripleQuoteString" },
@@ -91,7 +95,8 @@ const dql = (0, import_simple_mode.simpleMode)({
     // start matching a new query syntax after | or [
   ],
   tripleQuoteString: [
-    { regex: /[\s\S]*"""/, token: tokenMapping.string, pop: true },
+    { regex: /"?"?(?:[^"]"?"?)*"""/, token: tokenMapping.string, pop: true },
+    // end of triple quote string: content cannot contain 3+ consecutive quotes
     { regex: /.*/, token: tokenMapping.string }
   ],
   doubleQuoteString: [

package/editors/dql-editor/dql/open-autocomplete.d.ts

@@ -17,5 +17,4 @@ export declare function openAutocomplete(update: {
     isTyping: boolean;
     isDeleting: boolean;
     isFocused: boolean;
-    selectionChanged: boolean;
 }, state: EditorState): Promise<boolean>;