@dynatrace/strato-components 3.7.1 → 3.9.0

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

@@ -39,6 +39,7 @@ 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_KeyboardShortcut = require("../../../content/keyboard-shortcut/KeyboardShortcut.js");
 var import_external_links = require("../../../core/external-links.js");
 var import_logging = require("../../../core/utils/logging.js");
 var import_Group = require("../../../navigation/menu/Group.js");
@@ -59,6 +60,9 @@ const ALLOWED_MENU_CHILDREN = /* @__PURE__ */ new Set([
 function isWrapperElement(child) {
   return child.type === import_react.Fragment || child.type === "div";
 }
+function isMacPlatform() {
+  return typeof navigator !== "undefined" && navigator.userAgent.toLowerCase().includes("mac");
+}
 function getValidChildren(children) {
   const validChildren = [];
   for (const child of import_react.Children.toArray(children)) {
@@ -83,7 +87,8 @@ ActionsMenu.displayName = "DQLEditor.ActionsMenu";
 const ActionsMenuInternal = ({
   getValue,
   size,
-  children
+  children,
+  onFormat
 }) => {
   const intl = (0, import_react_intl.useIntl)();
   const copyToClipboard = (0, import_react.useCallback)(async () => {
@@ -119,6 +124,17 @@ const ActionsMenuInternal = ({
       ]
     }
   );
+  const formatQueryMenuItem = onFormat ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Item, { onSelect: onFormat, "data-dt-name": "FormatQuery", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.CodeIcon, {}) }),
+    intl.formatMessage(import_actions_menu_messages.dqlEditorActionsMenuMessages.formatQuery),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Suffix, { className: styles.formatQueryShortcut, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_KeyboardShortcut.KeyboardShortcut,
+      {
+        keys: isMacPlatform() ? "Cmd+Shift+F" : "Control+Shift+F",
+        variant: "minimal"
+      }
+    ) })
+  ] }) : null;
   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,
@@ -135,6 +151,7 @@ const ActionsMenuInternal = ({
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Content, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu.Group, { children: [
         copyQueryMenuItem,
+        formatQueryMenuItem,
         validChildren
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Group, { children: openDocumentationMenuItem })

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

@@ -3,13 +3,26 @@ export declare const editorWrapperFullHeight: string;
 export declare const actionsMenuWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
         default: {
-            top: string;
-            right: string;
+            top: `calc(${string} + ${string})`;
+            right: `calc(${string} + ${string})`;
+            selectors: {
+                [x: string]: {
+                    top: `calc(${string} + ${string})`;
+                    right: `calc(${string} + ${string})`;
+                };
+            };
         };
         condensed: {
-            top: string;
-            right: string;
+            top: `calc(${string} + ${string})`;
+            right: `calc(${string} + ${string})`;
+            selectors: {
+                [x: string]: {
+                    top: `calc(${string} + ${string})`;
+                    right: `calc(${string} + ${string})`;
+                };
+            };
         };
     };
 }>;
 export declare const editorWithActionsMenu: Record<"default" | "condensed", string>;
+export declare const formatQueryShortcut: string;

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

@@ -20,12 +20,15 @@ __export(ActionsMenu_css_exports, {
   actionsMenuWrapper: () => actionsMenuWrapper,
   editorWithActionsMenu: () => editorWithActionsMenu,
   editorWrapper: () => editorWrapper,
-  editorWrapperFullHeight: () => editorWrapperFullHeight
+  editorWrapperFullHeight: () => editorWrapperFullHeight,
+  formatQueryShortcut: () => formatQueryShortcut
 });
 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-7-1", variantClassNames: { size: { "default": "_1okebta3-3-7-1", condensed: "_1okebta4-3-7-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var editorWithActionsMenu = { "default": "_1okebta5-3-7-1", condensed: "_1okebta6-3-7-1" };
-var editorWrapper = "_1okebta0-3-7-1";
-var editorWrapperFullHeight = "_1okebta1-3-7-1";
+var actionsMenuWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1okebta2-3-9-0", variantClassNames: { size: { "default": "_1okebta3-3-9-0", condensed: "_1okebta4-3-9-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var editorWithActionsMenu = { "default": "_1okebta5-3-9-0", condensed: "_1okebta6-3-9-0" };
+var editorWrapper = "_1okebta0-3-9-0";
+var editorWrapperFullHeight = "_1okebta1-3-9-0";
+var formatQueryShortcut = "_1okebta7-3-9-0";

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

@@ -14,4 +14,9 @@ export declare const dqlEditorActionsMenuMessages: {
         id: string;
         description: string;
     };
+    formatQuery: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
 };

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

@@ -36,5 +36,10 @@ const dqlEditorActionsMenuMessages = (0, import_react_intl.defineMessages)({
     defaultMessage: "Open documentation",
     id: "XmYqCKn9iEfBoSSL",
     description: "Menu item label to open the DQL documentation in a new browser tab."
+  },
+  formatQuery: {
+    defaultMessage: "Format query",
+    id: "7/hGI/teTlqSMko6",
+    description: "Menu item label to format the DQL query."
   }
 });

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

@@ -1,4 +1,4 @@
-._yhio8f0-3-7-1 {
+._yhio8f0-3-9-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-7-1";
+var suggestionPartSectionInfoCSS = "_yhio8f0-3-9-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-7-1;
+  container-name: _cpuf060-3-9-0;
 }
-._cpuf061-3-7-1 {
+._cpuf061-3-9-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-7-1 {
+._cpuf062-3-9-0 {
   align-items: center;
   gap: var(--dt-spacings-size-16, 16px);
 }
-._cpuf063-3-7-1 {
+._cpuf063-3-9-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-@container _cpuf060-3-7-1 (max-width: 289px) {
-  ._cpuf061-3-7-1 {
+@container _cpuf060-3-9-0 (max-width: 289px) {
+  ._cpuf061-3-9-0 {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--dt-spacings-size-8, 8px);
   }
-  ._cpuf062-3-7-1 {
+  ._cpuf062-3-9-0 {
     flex-direction: column;
     align-items: flex-start;
     gap: var(--dt-spacings-size-8, 8px);

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

@@ -36,6 +36,7 @@ var import_messages = require("./messages.js");
 var styles = __toESM(require("./SuggestionsInfoSection.sty.js"));
 var import_external_links = require("../../../core/external-links.js");
 var import_Flex = require("../../../layouts/flex/Flex.js");
+var import_textStyle_css = require("../../../styles/textStyle.sty.js");
 var import_ExternalLink = require("../../../typography/external-link/ExternalLink.js");
 var import_Text = require("../../../typography/text/Text.js");
 const SuggestionsInfoSection = () => {
@@ -58,7 +59,15 @@ const SuggestionsInfoSection = () => {
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { className: styles.shortcutLabel, textStyle: "small", children: intl.formatMessage(import_messages.dqlEditorMessages.openPanel) })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ExternalLink.ExternalLink, { href: import_external_links.DQL_DOCUMENTATION_URL, "data-dt-name": "DqlSyntax", children: intl.formatMessage(import_messages.dqlEditorMessages.dqlSyntaxLink) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ExternalLink.ExternalLink,
+          {
+            href: import_external_links.DQL_DOCUMENTATION_URL,
+            className: (0, import_textStyle_css.textStyle)({ textStyle: "small" }),
+            "data-dt-name": "DqlSyntax",
+            children: intl.formatMessage(import_messages.dqlEditorMessages.dqlSyntaxLink)
+          }
+        )
       ]
     }
   );

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-7-1";
-var shortcutLabel = "_cpuf063-3-7-1";
-var shortcutsGroup = "_cpuf062-3-7-1";
+var container = "_cpuf061-3-9-0";
+var shortcutLabel = "_cpuf063-3-9-0";
+var shortcutsGroup = "_cpuf062-3-9-0";

package/editors/dql-editor/dql/dql-fold-service.d.ts

@@ -0,0 +1,9 @@
+import { StateField } from '@codemirror/state';
+/**
+ * Provides foldable regions for DQL:
+ *  - multi-line block comments
+ *  - multi-line subqueries
+ * Used with StreamLanguage which has no syntax tree and therefore no built-in fold ranges.
+ * @internal
+ */
+export declare const dqlFoldService: (import("@codemirror/state").Extension | StateField<readonly [number, number][]>)[];

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

@@ -0,0 +1,181 @@
+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 dql_fold_service_exports = {};
+__export(dql_fold_service_exports, {
+  dqlFoldService: () => dqlFoldService
+});
+module.exports = __toCommonJS(dql_fold_service_exports);
+var import_language = require("@codemirror/language");
+var import_state = require("@codemirror/state");
+function computeBlockCommentRanges(state) {
+  const text = state.doc.sliceString(0, state.doc.length);
+  const ranges = [];
+  let i = 0;
+  while (i < text.length) {
+    if (text[i] === '"') {
+      i = skipStringLiteral(text, i);
+    } else if (text[i] === "/" && text[i + 1] === "/") {
+      i = skipLineComment(text, i);
+    } else if (text[i] === "/" && text[i + 1] === "*") {
+      const start = i;
+      i = skipBlockComment(text, i);
+      ranges.push([start, i]);
+    } else {
+      i++;
+    }
+  }
+  return ranges;
+}
+const blockCommentRangesField = import_state.StateField.define({
+  create: computeBlockCommentRanges,
+  update: (value, transaction) => transaction.docChanged ? computeBlockCommentRanges(transaction.state) : value
+});
+function isInsideBlockComment(ranges, lineStart) {
+  for (const [start, end] of ranges) {
+    if (start >= lineStart) {
+      break;
+    }
+    if (end > lineStart) {
+      return true;
+    }
+  }
+  return false;
+}
+function skipLineComment(docSlice, from) {
+  const newline = docSlice.indexOf("\n", from);
+  return newline >= 0 ? newline + 1 : docSlice.length;
+}
+function skipBlockComment(docSlice, from) {
+  const close = docSlice.indexOf("*/", from + 2);
+  return close >= 0 ? close + 2 : docSlice.length;
+}
+function skipStringLiteral(docSlice, from) {
+  let i = from + 1;
+  while (i < docSlice.length) {
+    const ch = docSlice[i];
+    if (ch === "\\") {
+      i += 2;
+    } else if (ch === '"') {
+      return i + 1;
+    } else if (ch === "\n") {
+      return i + 1;
+    } else {
+      i++;
+    }
+  }
+  return docSlice.length;
+}
+function scanLineTokens(lineText) {
+  let i = 0;
+  let blockComment = -1;
+  let bracket = -1;
+  while (i < lineText.length) {
+    const ch = lineText[i];
+    if (ch === '"') {
+      i = skipStringLiteral(lineText, i);
+      continue;
+    }
+    if (ch === "/" && lineText[i + 1] === "/") {
+      return { blockComment, lineComment: i, bracket };
+    }
+    if (ch === "/" && lineText[i + 1] === "*" && blockComment < 0) {
+      blockComment = i;
+    }
+    if (ch === "[" && bracket < 0) {
+      bracket = i;
+    }
+    i++;
+  }
+  return { blockComment, lineComment: -1, bracket };
+}
+function findMatchingBracketEnd(docSlice, lineStart, bracketIdx) {
+  let depth = 0;
+  let i = 0;
+  while (i < docSlice.length) {
+    const ch = docSlice[i];
+    if (ch === '"') {
+      i = skipStringLiteral(docSlice, i);
+      continue;
+    }
+    if (ch === "/" && docSlice[i + 1] === "/") {
+      i = skipLineComment(docSlice, i);
+      continue;
+    }
+    if (ch === "/" && docSlice[i + 1] === "*") {
+      i = skipBlockComment(docSlice, i);
+      continue;
+    }
+    if (ch === "[") {
+      depth++;
+    } else if (ch === "]") {
+      depth--;
+      if (depth === 0) {
+        return lineStart + bracketIdx + i;
+      }
+    }
+    i++;
+  }
+  return -1;
+}
+function findBlockCommentFold(state, lineStart, lineEnd, blockCommentIdx) {
+  if (blockCommentIdx < 0) {
+    return null;
+  }
+  const docSlice = state.doc.sliceString(lineStart + blockCommentIdx);
+  const closeOffset = docSlice.indexOf("*/", 2);
+  if (closeOffset < 0) {
+    return null;
+  }
+  const closeEnd = lineStart + blockCommentIdx + closeOffset + 2;
+  const closeLine = state.doc.lineAt(closeEnd - 1);
+  if (closeLine.from <= lineEnd) {
+    return null;
+  }
+  const closeLineText = state.doc.sliceString(closeLine.from, closeLine.to);
+  const delimOffset = closeLineText.indexOf("*/");
+  return {
+    from: lineEnd,
+    to: closeLine.from + (delimOffset >= 0 ? delimOffset : 0)
+  };
+}
+function findSubqueryFold(state, lineStart, lineEnd, bracketIdx) {
+  if (bracketIdx < 0) {
+    return null;
+  }
+  const docSlice = state.doc.sliceString(lineStart + bracketIdx);
+  const closePos = findMatchingBracketEnd(docSlice, lineStart, bracketIdx);
+  if (closePos < 0) {
+    return null;
+  }
+  const closeLine = state.doc.lineAt(closePos);
+  if (closeLine.from <= lineEnd) {
+    return null;
+  }
+  return { from: lineEnd, to: closePos };
+}
+const dqlFoldService = [
+  blockCommentRangesField,
+  import_language.foldService.of((state, lineStart, lineEnd) => {
+    if (isInsideBlockComment(state.field(blockCommentRangesField), lineStart)) {
+      return null;
+    }
+    const lineText = state.doc.sliceString(lineStart, lineEnd);
+    const { blockComment, bracket } = scanLineTokens(lineText);
+    return findBlockCommentFold(state, lineStart, lineEnd, blockComment) ?? findSubqueryFold(state, lineStart, lineEnd, bracket);
+  })
+];

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

@@ -24,6 +24,7 @@ var import_autocomplete = require("@codemirror/autocomplete");
 var import_language = require("@codemirror/language");
 var import_lint = require("@codemirror/lint");
 var import_view = require("@codemirror/view");
+var import_dql_fold_service = require("./dql-fold-service.js");
 var import_dql_linter = require("./dql-linter.js");
 var import_dql = require("./dql.js");
 var import_open_autocomplete = require("./open-autocomplete.js");
@@ -32,9 +33,11 @@ var import_suggestions_info_section_extension = require("./suggestions-info-sect
 const VALIDATION_DELAY = 500;
 function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityInfo) {
   const language = import_language.StreamLanguage.define(import_dql.dql);
+  const suggestionCache = /* @__PURE__ */ new Map();
   return {
     language,
     extendWith: [
+      import_dql_fold_service.dqlFoldService,
       language.data.of({
         commentTokens: {
           block: {
@@ -109,7 +112,7 @@ function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityI
     autocompleteOptions: readOnly ? void 0 : {
       activateOnTyping: false,
       optionClass: (completion) => completion.label.length === 0 ? "cm-empty-option" : "",
-      providers: [import_suggestion_autocompletions.suggestionAutocompletion]
+      providers: [(0, import_suggestion_autocompletions.createSuggestionAutocompletion)(suggestionCache)]
     }
   };
 }

package/editors/dql-editor/dql/get-suggestions.d.ts

@@ -3,5 +3,8 @@ export type SuggestionCache = Map<string, {
     suggestions: AutocompleteSuggestion[];
     ttl?: number;
 }>;
-/** Gets memoized suggestions. */
-export declare const getSuggestions: (query: string, cursor?: number, maxDataSuggestions?: number, cache?: SuggestionCache) => Promise<AutocompleteSuggestion[]>;
+/**
+ * Gets memoized suggestions. The `cache` is owned by the calling editor
+ * instance so entries never outlive the editor or leak between editors.
+ */
+export declare const getSuggestions: (query: string, cursor: number | undefined, maxDataSuggestions: number | undefined, cache: SuggestionCache) => Promise<AutocompleteSuggestion[]>;

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

@@ -21,8 +21,7 @@ __export(get_suggestions_exports, {
 });
 module.exports = __toCommonJS(get_suggestions_exports);
 var import_client_query = require("@dynatrace-sdk/client-query");
-const globalCache = /* @__PURE__ */ new Map();
-const getSuggestions = async (query, _cursor, maxDataSuggestions, cache = globalCache) => {
+const getSuggestions = async (query, _cursor, maxDataSuggestions, cache) => {
   const cursor = _cursor ?? query.length;
   const key = JSON.stringify({ query, cursor });
   const currentTime = (/* @__PURE__ */ new Date()).getTime();

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

@@ -23,22 +23,34 @@ __export(open_autocomplete_exports, {
 module.exports = __toCommonJS(open_autocomplete_exports);
 var import_autocomplete = require("@codemirror/autocomplete");
 var import_dql_linter = require("./dql-linter.js");
+const SUBQUERY_PREFIX_LOOKBACK_CHARS = 100;
 function isStartOfCommandOrParameter(context) {
   return context.matchBefore(/[,|]\s+$/) !== null;
 }
 function isTypingCommandPrefixAtCommandBoundary(context) {
   return context.matchBefore(/(?:^|[|,]\s*|\*\/\s*)[A-Za-z][A-Za-z0-9]*$/) !== null;
 }
+function isTypingCommandPrefixAtSubqueryStart(context) {
+  const slice = context.state.doc.sliceString(
+    Math.max(0, context.pos - SUBQUERY_PREFIX_LOOKBACK_CHARS),
+    context.pos
+  );
+  return /\[\s*[A-Za-z]+$/.test(slice);
+}
 function isTypingParameterPrefixAfterCommand(context) {
   const commandAndParameter = context.matchBefore(
     /^[A-Za-z][A-Za-z0-9]*\s+[A-Za-z_][A-Za-z0-9_.]*\s*$/
   );
   return commandAndParameter !== null;
 }
-function isBeforeCommentOrEndOfContent(state) {
+function isTypingNumericContext(context) {
+  return context.matchBefore(/\d[\w.]*$/) !== null;
+}
+function isAtTokenBoundary(state) {
   const afterCursor = state.doc.slice(state.selection.main.to).toString();
+  const immediateCharacterAfterCursor = afterCursor.slice(0, 1);
   const afterCursorTrimmed = afterCursor.trimStart();
-  return afterCursorTrimmed === "" || afterCursorTrimmed.startsWith("//") || afterCursorTrimmed.startsWith("/*");
+  return immediateCharacterAfterCursor.trim().length === 0 || afterCursorTrimmed.startsWith("//") || afterCursorTrimmed.startsWith("/*");
 }
 async function isInvalidAtEnd(query) {
   const trimmedQuery = query.trimEnd();
@@ -51,7 +63,16 @@ async function isInvalidAtEnd(query) {
 async function openAutocomplete(update, state) {
   const { isTyping, isDeleting, isFocused } = update;
   const context = new import_autocomplete.CompletionContext(state, state.selection.main.to, false);
-  if (isTyping && (isTypingCommandPrefixAtCommandBoundary(context) || isTypingParameterPrefixAfterCommand(context)) && isBeforeCommentOrEndOfContent(state)) {
+  if (isDeleting) {
+    const beforeCursor = state.doc.sliceString(
+      Math.max(0, state.selection.main.to - 2),
+      state.selection.main.to
+    );
+    if (/\s\s$/.test(beforeCursor)) {
+      return false;
+    }
+  }
+  if (isTyping && (isTypingCommandPrefixAtCommandBoundary(context) || isTypingCommandPrefixAtSubqueryStart(context) || isTypingParameterPrefixAfterCommand(context) || isTypingNumericContext(context)) && isAtTokenBoundary(state)) {
     return true;
   }
   if (isFocused && state.doc.toString().trim() === "") {

package/editors/dql-editor/dql/suggestion-autocompletions.d.ts

@@ -1,2 +1,9 @@
+import { type SuggestionCache } from './get-suggestions.js';
 import type { AutocompleteProvider } from '../../base-code-editor/auto-completion/autocompletion.extension.js';
-export declare const suggestionAutocompletion: AutocompleteProvider;
+/**
+ * Creates the DQL autocomplete provider bound to a `cache` owned by the calling
+ * editor instance. Keeping the cache per-instance ensures suggestions never
+ * outlive the editor or leak between editors (or between dev-app stories).
+ * @param cache - the suggestion cache owned by the editor instance.
+ */
+export declare const createSuggestionAutocompletion: (cache: SuggestionCache) => AutocompleteProvider;

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

@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var suggestion_autocompletions_exports = {};
 __export(suggestion_autocompletions_exports, {
-  suggestionAutocompletion: () => suggestionAutocompletion
+  createSuggestionAutocompletion: () => createSuggestionAutocompletion
 });
 module.exports = __toCommonJS(suggestion_autocompletions_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -25,12 +25,16 @@ var import_dql_linter = require("./dql-linter.js");
 var import_fuzzy_match = require("./fuzzy-match.js");
 var import_get_suggestions = require("./get-suggestions.js");
 var import_SuggestionPart = require("./SuggestionPart.js");
+var import_dql_common = require("../../../core/dql/dql-common.js");
 var import_Flex = require("../../../layouts/flex/Flex.js");
 var import_Text = require("../../../typography/text/Text.js");
-function getMatchPattern(content) {
-  const match = content.match(/\W?([\w.]*)$/);
-  const capture = match?.[1];
-  return capture ?? "";
+function extractWordToken(content) {
+  const rawCapture = /\W?([\w.]*)$/.exec(content)?.[1] ?? "";
+  const trimmedCapture = rawCapture.replace(/^\d+(\.\d+)?/, "");
+  return { rawCapture, trimmedCapture };
+}
+function getIsTypingUnitAlias(rawCapture, trimmedCapture) {
+  return trimmedCapture.length > 0 && trimmedCapture !== rawCapture && import_dql_common.combinedDurationUnits.some((unit) => unit.startsWith(trimmedCapture));
 }
 function hasInfo(suggestions) {
   return suggestions.some(
@@ -63,7 +67,7 @@ function getRequestString(autocompleteContent, patternLength, requestLength) {
   );
 }
 const MAX_DATA_SUGGESTIONS = 1e4;
-async function getFilteredSuggestions(autocompleteContent, patternLength, explicit) {
+async function getFilteredSuggestions(autocompleteContent, patternLength, explicit, cache) {
   const requestString = getRequestString(
     autocompleteContent,
     patternLength,
@@ -72,7 +76,8 @@ async function getFilteredSuggestions(autocompleteContent, patternLength, explic
   const suggestions = await (0, import_get_suggestions.getSuggestions)(
     requestString,
     requestString.length,
-    MAX_DATA_SUGGESTIONS
+    MAX_DATA_SUGGESTIONS,
+    cache
   );
   const pattern = autocompleteContent.slice(
     autocompleteContent.length - patternLength
@@ -85,26 +90,38 @@ async function getFilteredSuggestions(autocompleteContent, patternLength, explic
     explicit
   );
 }
-const suggestionAutocompletion = async (context) => {
+function buildSuggestionInfoPopup(suggestion) {
+  const infoParts = suggestion.parts.filter((part) => !!part.info);
+  if (infoParts.length === 0) {
+    return void 0;
+  }
+  return () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Flex.Flex, { flexDirection: "column", gap: 16, children: infoParts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SuggestionPart.SuggestionPart, { suggestionPart: part }, part.info)) });
+}
+const createSuggestionAutocompletion = (cache) => async (context) => {
   if (context.matchBefore(/[^\w.]/) && !context.explicit) {
     return null;
   }
   const autocompleteContent = context.state.doc.slice(0, context.pos).toString();
-  const pattern = getMatchPattern(autocompleteContent);
+  const { rawCapture, trimmedCapture: pattern } = extractWordToken(autocompleteContent);
   const infoSuggestions = await (0, import_get_suggestions.getSuggestions)(
-    getRequestString(autocompleteContent, pattern.length, 0)
+    getRequestString(autocompleteContent, pattern.length, 0),
+    void 0,
+    void 0,
+    cache
   );
   let filteredSuggestions = await getFilteredSuggestions(
     autocompleteContent,
     pattern.length,
-    pattern.length <= 1
+    pattern.length <= 1 || getIsTypingUnitAlias(rawCapture, pattern) || pattern.endsWith("."),
+    cache
   );
   if (filteredSuggestions.length === 0) {
     if (pattern.length > 1) {
       filteredSuggestions = await getFilteredSuggestions(
         autocompleteContent,
         pattern.length,
-        true
+        true,
+        cache
       );
     }
   }
@@ -132,12 +149,9 @@ const suggestionAutocompletion = async (context) => {
   const section = infoSuggestions.filter((suggestion) => !suggestion.suggestion).flatMap((suggestion) => suggestion.parts.map((part) => part.info)).filter((text) => !!text).join(" ");
   return {
     suggestions: filteredSuggestions.map((suggestion) => {
-      const hasInfo2 = suggestion.parts.some((part) => !!part.info);
       const shouldBeTruncated = (0, import_fuzzy_match.labelShouldBeTruncated)(suggestion.suggestion);
       const middleEllipsisText = shouldBeTruncated ? (0, import_fuzzy_match.convertToMiddleEllipsis)(suggestion.suggestion) : suggestion.suggestion;
-      const infoPopup = hasInfo2 ? () => {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Flex.Flex, { flexDirection: "column", gap: 16, children: suggestion.parts.filter((part) => !!part.info).map((part) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SuggestionPart.SuggestionPart, { suggestionPart: part }, part.info)) });
-      } : void 0;
+      const infoPopup = buildSuggestionInfoPopup(suggestion);
       return {
         ...suggestion,
         label: middleEllipsisText,
@@ -164,6 +178,9 @@ const suggestionAutocompletion = async (context) => {
     from: autocompletePos,
     async reopen(completion) {
       const queryToEnd = context.state.doc.slice(context.pos).toString();
+      if (queryToEnd.trim().length > 0) {
+        return false;
+      }
       const completedQuery = autocompleteContent.slice(0, completion.startPos) + completion.suggestion + queryToEnd;
       const { valid = true } = await (0, import_dql_linter.verifyQuery)(completedQuery) ?? {};
       return !valid;

package/editors/index.d.ts

@@ -1,5 +1,5 @@
 export { BaseCodeEditor as _BaseCodeEditor } from './base-code-editor/BaseCodeEditor.js';
-export type { BaseCodeEditorBaseProps as _BaseCodeEditorBaseProps, BaseCodeEditorControlledProps as _BaseCodeEditorControlledProps, BaseCodeEditorProps as _BaseCodeEditorProps, BaseCodeEditorRef as _BaseCodeEditorRef, BaseCodeEditorUncontrolledProps as _BaseCodeEditorUncontrolledProps, } from './base-code-editor/BaseCodeEditor.js';
+export type { BaseCodeEditorBaseProps as _BaseCodeEditorBaseProps, BaseCodeEditorControlledProps as _BaseCodeEditorControlledProps, BaseCodeEditorProps as _BaseCodeEditorProps, BaseCodeEditorRef as _BaseCodeEditorRef, BaseCodeEditorUncontrolledProps as _BaseCodeEditorUncontrolledProps, SharedBaseCodeEditorProps as _SharedBaseCodeEditorProps, } from './base-code-editor/BaseCodeEditor.js';
 export type { AutocompleteProvider as _AutocompleteProvider, AutocompletionResult as _AutocompletionResult, Suggestion as _Suggestion, } from './base-code-editor/auto-completion/autocompletion.extension.js';
 export type { ListAutocompletionConfig as _ListAutocompletionConfig } from './base-code-editor/auto-completion/list/list-autocompletion-types.js';
 export type { AutocompletionOptions as _AutocompletionOptions, EditorLanguageConfiguration as _EditorLanguageConfiguration, } from './base-code-editor/configuration/configuration.js';