@dynatrace/strato-components 3.5.2 → 3.7.0

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  type ReactNode,\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 DQLEditorBaseProps\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   * 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 * Props for the `DQLEditor` in controlled usage.\n * @public\n */\nexport type DQLEditorControlledProps = {\n  /**\n   * The contents of the editor in controlled mode.\n   * @defaultValue ''\n   */\n  value?: string;\n  /** Not allowed in controlled mode. */\n  defaultValue?: never;\n};\n\n/**\n * Props for the `DQLEditor` in uncontrolled usage.\n * @public\n */\nexport type DQLEditorUncontrolledProps = {\n  /** Not allowed in uncontrolled mode. */\n  value?: never;\n  /** The initial contents of the editor for uncontrolled usage. */\n  defaultValue?: string;\n};\n\n/**\n * Props for the `DQLEditor` component.\n * @public\n */\nexport type DQLEditorProps = DQLEditorBaseProps &\n  (DQLEditorControlledProps | DQLEditorUncontrolledProps);\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      defaultValue,\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    const internalValueRef = useRef(value ?? defaultValue ?? '');\n    useEffect(() => {\n      if (value !== undefined) {\n        internalValueRef.current = value;\n      }\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 and extract any custom items it carries\n    let hasActionsMenu = false;\n    let actionsMenuChildren: ReactNode | undefined;\n    Children.forEach(children, (child) => {\n      if (isSlot(child, ActionsMenu)) {\n        hasActionsMenu = true;\n        actionsMenuChildren = child.props.children;\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 valueProps = (\n      value !== undefined ? { value } : { defaultValue }\n    ) satisfies Partial<{ value: string; defaultValue: string }>;\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        {...valueProps}\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\n          className={clsx(\n            actionsMenuStyles.editorWrapper,\n            fullHeight && actionsMenuStyles.editorWrapperFullHeight,\n          )}\n        >\n          {editor}\n          <ActionsMenuInternal getValue={getInternalValue} size={size}>\n            {actionsMenuChildren}\n          </ActionsMenuInternal>\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": "AAqSM,cAiCE,YAjCF;AArSN,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EAEA;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;AAuJvB,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;AAAA,MACA;AAAA,MACA;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;AAIrE,UAAM,mBAAmB,OAAO,SAAS,gBAAgB,EAAE;AAC3D,cAAU,MAAM;AACd,UAAI,UAAU,QAAW;AACvB,yBAAiB,UAAU;AAAA,MAC7B;AAAA,IACF,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,QAAI;AACJ,aAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,UAAI,OAAO,OAAO,WAAW,GAAG;AAC9B,yBAAiB;AACjB,8BAAsB,MAAM,MAAM;AAAA,MACpC;AAAA,IACF,CAAC;AAED,UAAM,kBAAkB,iBACpB;AAAA,MACE;AAAA;AAAA,MAEA,kBAAkB,sBAAsB,IAAI;AAAA,IAC9C,IACA;AAEJ,UAAM,aACJ,UAAU,SAAY,EAAE,MAAM,IAAI,EAAE,aAAa;AAGnD,UAAM,SACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAK;AAAA,QACL,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ;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;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT,kBAAkB;AAAA,YAClB,cAAc,kBAAkB;AAAA,UAClC;AAAA,UAEC;AAAA;AAAA,YACD,oBAAC,uBAAoB,UAAU,kBAAkB,MAC9C,+BACH;AAAA;AAAA;AAAA,MACF;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-7-0 {
+  position: relative;
+  width: 100%;
+}
+._1okebta1-3-7-0 {
+  display: flex;
+  flex-grow: 1;
+  max-height: 100%;
+  min-height: 100%;
+}
+._1okebta2-3-7-0 {
+  position: absolute;
+  z-index: var(--dt-elevations-default, 1);
+}
+._1okebta3-3-7-0 {
+  top: var(--dt-spacings-size-8, 8px);
+  right: var(--dt-spacings-size-8, 8px);
+}
+._1okebta4-3-7-0 {
+  top: var(--dt-spacings-size-4, 4px);
+  right: var(--dt-spacings-size-4, 4px);
+}
+._1okebta5-3-7-0 .cm-editor {
+  padding-right: var(--dt-spacings-size-40, 40px);
+}
+._1okebta6-3-7-0 .cm-editor {
+  padding-right: var(--dt-spacings-size-28, 28px);
+}

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

@@ -0,0 +1,123 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  Fragment,
+  useCallback
+} from "react";
+import { useIntl } from "react-intl";
+import { isElement } from "react-is";
+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 { devLog } from "../../../core/utils/logging.js";
+import { Group } from "../../../navigation/menu/Group.js";
+import { Intent } from "../../../navigation/menu/Intent.js";
+import { Item } from "../../../navigation/menu/Item.js";
+import { Label } from "../../../navigation/menu/Label.js";
+import { Link } from "../../../navigation/menu/Link.js";
+import { Menu } from "../../../navigation/menu/Menu.js";
+import { Sub } from "../../../navigation/menu/Sub.js";
+const ALLOWED_MENU_CHILDREN = /* @__PURE__ */ new Set([
+  Item,
+  Group,
+  Label,
+  Link,
+  Intent,
+  Sub
+]);
+function isWrapperElement(child) {
+  return child.type === Fragment || child.type === "div";
+}
+function getValidChildren(children) {
+  const validChildren = [];
+  for (const child of Children.toArray(children)) {
+    if (isElement(child)) {
+      if (isWrapperElement(child)) {
+        validChildren.push(...getValidChildren(child.props.children));
+        continue;
+      }
+      if (ALLOWED_MENU_CHILDREN.has(child.type)) {
+        validChildren.push(child);
+        continue;
+      }
+    }
+    devLog(
+      "Only Menu component items are supported as children of DQLEditor.ActionsMenu."
+    );
+  }
+  return validChildren;
+}
+const ActionsMenu = (props) => null;
+ActionsMenu.displayName = "DQLEditor.ActionsMenu";
+const ActionsMenuInternal = ({
+  getValue,
+  size,
+  children
+}) => {
+  const intl = useIntl();
+  const copyToClipboard = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(getValue());
+    } catch {
+    }
+  }, [getValue]);
+  const validChildren = getValidChildren(children);
+  const copyQueryMenuItem = /* @__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)
+      ]
+    }
+  );
+  const openDocumentationMenuItem = /* @__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)
+      ]
+    }
+  );
+  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__ */ jsxs(Menu.Group, { children: [
+        copyQueryMenuItem,
+        validChildren
+      ] }),
+      /* @__PURE__ */ jsx(Menu.Group, { children: openDocumentationMenuItem })
+    ] })
+  ] }) });
+};
+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 {\n  Children,\n  Fragment,\n  useCallback,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\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 type { WithChildren } from '../../../core/types/with-children.js';\nimport { devLog } from '../../../core/utils/logging.js';\nimport { Group } from '../../../navigation/menu/Group.js';\nimport { Intent } from '../../../navigation/menu/Intent.js';\nimport { Item } from '../../../navigation/menu/Item.js';\nimport { Label } from '../../../navigation/menu/Label.js';\nimport { Link } from '../../../navigation/menu/Link.js';\nimport { Menu } from '../../../navigation/menu/Menu.js';\nimport { Sub } from '../../../navigation/menu/Sub.js';\n\n// Menu slot components allowed as children of `DQLEditor.ActionsMenu`\nconst ALLOWED_MENU_CHILDREN = new Set<unknown>([\n  Item,\n  Group,\n  Label,\n  Link,\n  Intent,\n  Sub,\n]);\n\n/**\n * Type guard for transparent wrappers (fragments and divs) whose children are\n * flattened and validated individually.\n */\nfunction isWrapperElement(\n  child: ReactElement,\n): child is ReactElement<PropsWithChildren> {\n  return child.type === Fragment || child.type === 'div';\n}\n\n/**\n * Iterates over child nodes and keeps only supported Menu slot components.\n */\nfunction getValidChildren(children: ReactNode): ReactNode[] {\n  const validChildren: ReactNode[] = [];\n  for (const child of Children.toArray(children)) {\n    if (isElement(child)) {\n      if (isWrapperElement(child)) {\n        // Flatten fragments and divs so their children are validated individually.\n        validChildren.push(...getValidChildren(child.props.children));\n        continue;\n      }\n      if (ALLOWED_MENU_CHILDREN.has(child.type)) {\n        validChildren.push(child);\n        continue;\n      }\n    }\n    devLog(\n      'Only Menu component items are supported as children of DQLEditor.ActionsMenu.',\n    );\n  }\n\n  return validChildren;\n}\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). Custom menu items can be\n * passed as children and will be rendered between the two built-in actions.\n * @public\n */\nexport const ActionsMenu = (props: WithChildren): 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 extends PropsWithChildren {\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  children,\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  const validChildren = getValidChildren(children);\n\n  const copyQueryMenuItem = (\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  );\n\n  const openDocumentationMenuItem = (\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(dqlEditorActionsMenuMessages.openDocumentation)}\n    </Menu.Link>\n  );\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            {copyQueryMenuItem}\n            {validChildren}\n          </Menu.Group>\n          <Menu.Group>{openDocumentationMenuItem}</Menu.Group>\n        </Menu.Content>\n      </Menu>\n    </div>\n  );\n};\n"],
+  "mappings": "AA8HI,SAOI,KAPJ;AA9HJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAE1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oCAAoC;AAC7C,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,6BAA6B;AAEtC,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,WAAW;AAGpB,MAAM,wBAAwB,oBAAI,IAAa;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAMD,SAAS,iBACP,OAC0C;AAC1C,SAAO,MAAM,SAAS,YAAY,MAAM,SAAS;AACnD;AAKA,SAAS,iBAAiB,UAAkC;AAC1D,QAAM,gBAA6B,CAAC;AACpC,aAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,QAAI,UAAU,KAAK,GAAG;AACpB,UAAI,iBAAiB,KAAK,GAAG;AAE3B,sBAAc,KAAK,GAAG,iBAAiB,MAAM,MAAM,QAAQ,CAAC;AAC5D;AAAA,MACF;AACA,UAAI,sBAAsB,IAAI,MAAM,IAAI,GAAG;AACzC,sBAAc,KAAK,KAAK;AACxB;AAAA,MACF;AAAA,IACF;AACA;AAAA,MACE;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAUO,MAAM,cAAc,CAAC,UAA8B;AACzD,YAA6D,cAC5D;AAqBK,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;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,QAAM,gBAAgB,iBAAiB,QAAQ;AAE/C,QAAM,oBACJ;AAAA,IAAC,KAAK;AAAA,IAAL;AAAA,MACC,UAAU,MAAM;AACd,wBAAgB,EAAE,MAAM,MAAM,MAAM;AAAA,MACtC;AAAA,MACA,gBAAa;AAAA,MAEb;AAAA,4BAAC,KAAK,QAAL,EACC,8BAAC,YAAS,GACZ;AAAA,QACC,KAAK,cAAc,6BAA6B,SAAS;AAAA;AAAA;AAAA,EAC5D;AAGF,QAAM,4BACJ;AAAA,IAAC,KAAK;AAAA,IAAL;AAAA,MACC,MAAM;AAAA,MACN,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,gBAAa;AAAA,MAEb;AAAA,4BAAC,KAAK,QAAL,EACC,8BAAC,oBAAiB,GACpB;AAAA,QACC,KAAK,cAAc,6BAA6B,iBAAiB;AAAA;AAAA;AAAA,EACpE;AAGF,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,2BAAC,KAAK,OAAL,EACE;AAAA;AAAA,QACA;AAAA,SACH;AAAA,MACA,oBAAC,KAAK,OAAL,EAAY,qCAA0B;AAAA,OACzC;AAAA,KACF,GACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,13 @@
+import "./ActionsMenu.css";
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var actionsMenuWrapper = _7a468({ defaultClassName: "_1okebta2-3-7-0", variantClassNames: { size: { "default": "_1okebta3-3-7-0", condensed: "_1okebta4-3-7-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var editorWithActionsMenu = { "default": "_1okebta5-3-7-0", condensed: "_1okebta6-3-7-0" };
+var editorWrapper = "_1okebta0-3-7-0";
+var editorWrapperFullHeight = "_1okebta1-3-7-0";
+export {
+  actionsMenuWrapper,
+  editorWithActionsMenu,
+  editorWrapper,
+  editorWrapperFullHeight
+};
+//# 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-7-0',variantClassNames:{size:{'default':'_1okebta3-3-7-0',condensed:'_1okebta4-3-7-0'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var editorWithActionsMenu = {'default':'_1okebta5-3-7-0',condensed:'_1okebta6-3-7-0'};\nexport var editorWrapper = '_1okebta0-3-7-0';\nexport var editorWrapperFullHeight = '_1okebta1-3-7-0';"],
+  "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,EAAC,WAAU,mBAAkB,WAAU,kBAAiB;AACpF,IAAI,gBAAgB;AACpB,IAAI,0BAA0B;",
+  "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-2 {
+._yhio8f0-3-7-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-2";
+var suggestionPartSectionInfoCSS = "_yhio8f0-3-7-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-2';"],
+  "sourcesContent": ["import './SuggestionPart.css';\nexport var suggestionPartSectionInfoCSS = '_yhio8f0-3-7-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,+BAA+B;",
   "names": []
 }

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

@@ -0,0 +1,36 @@
+.cm-tooltip.cm-tooltip-autocomplete {
+  container-type: inline-size;
+  container-name: _cpuf060-3-7-0;
+}
+._cpuf061-3-7-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);
+  padding-top: var(--dt-spacings-size-8, 8px);
+  padding-bottom: var(--dt-spacings-size-8, 8px);
+  padding-left: var(--dt-spacings-size-16, 16px);
+  padding-right: var(--dt-spacings-size-16, 16px);
+  width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--dt-spacings-size-16, 16px);
+}
+._cpuf062-3-7-0 {
+  align-items: center;
+  gap: var(--dt-spacings-size-16, 16px);
+}
+._cpuf063-3-7-0 {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+}
+@container _cpuf060-3-7-0 (max-width: 289px) {
+  ._cpuf061-3-7-0 {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--dt-spacings-size-8, 8px);
+  }
+  ._cpuf062-3-7-0 {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--dt-spacings-size-8, 8px);
+  }
+}

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

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import { dqlEditorMessages as messages } from "./messages.js";
+import * as styles from "./SuggestionsInfoSection.sty.js";
+import { DQL_DOCUMENTATION_URL } from "../../../core/external-links.js";
+import { Flex } from "../../../layouts/flex/Flex.js";
+import { ExternalLink } from "../../../typography/external-link/ExternalLink.js";
+import { Text } from "../../../typography/text/Text.js";
+const SuggestionsInfoSection = () => {
+  const intl = useIntl();
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      className: styles.container,
+      "data-dt-name": "SuggestionsInfoSection",
+      flexWrap: "wrap",
+      justifyContent: "space-between",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { className: styles.shortcutsGroup, children: [
+          /* @__PURE__ */ jsxs(Flex, { alignItems: "baseline", gap: 4, children: [
+            /* @__PURE__ */ jsx(Text, { textStyle: "small-emphasized", children: "Esc" }),
+            /* @__PURE__ */ jsx(Text, { className: styles.shortcutLabel, textStyle: "small", children: intl.formatMessage(messages.closePanel) })
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { alignItems: "baseline", gap: 4, children: [
+            /* @__PURE__ */ jsx(Text, { textStyle: "small-emphasized", children: "Ctrl+Space" }),
+            /* @__PURE__ */ jsx(Text, { className: styles.shortcutLabel, textStyle: "small", children: intl.formatMessage(messages.openPanel) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(ExternalLink, { href: DQL_DOCUMENTATION_URL, "data-dt-name": "DqlSyntax", children: intl.formatMessage(messages.dqlSyntaxLink) })
+      ]
+    }
+  );
+};
+export {
+  SuggestionsInfoSection
+};
+//# sourceMappingURL=SuggestionsInfoSection.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/editors/dql-editor/dql/SuggestionsInfoSection.tsx"],
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { dqlEditorMessages as messages } from './messages.js';\nimport * as styles from './SuggestionsInfoSection.sty.js';\nimport { DQL_DOCUMENTATION_URL } from '../../../core/external-links.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { ExternalLink } from '../../../typography/external-link/ExternalLink.js';\nimport { Text } from '../../../typography/text/Text.js';\n\nexport const SuggestionsInfoSection = () => {\n  const intl = useIntl();\n\n  return (\n    <Flex\n      className={styles.container}\n      data-dt-name=\"SuggestionsInfoSection\"\n      flexWrap=\"wrap\"\n      justifyContent=\"space-between\"\n    >\n      <Flex className={styles.shortcutsGroup}>\n        <Flex alignItems=\"baseline\" gap={4}>\n          <Text textStyle=\"small-emphasized\">Esc</Text>\n          <Text className={styles.shortcutLabel} textStyle=\"small\">\n            {intl.formatMessage(messages.closePanel)}\n          </Text>\n        </Flex>\n        <Flex alignItems=\"baseline\" gap={4}>\n          <Text textStyle=\"small-emphasized\">Ctrl+Space</Text>\n          <Text className={styles.shortcutLabel} textStyle=\"small\">\n            {intl.formatMessage(messages.openPanel)}\n          </Text>\n        </Flex>\n      </Flex>\n\n      <ExternalLink href={DQL_DOCUMENTATION_URL} data-dt-name=\"DqlSyntax\">\n        {intl.formatMessage(messages.dqlSyntaxLink)}\n      </ExternalLink>\n    </Flex>\n  );\n};\n"],
+  "mappings": "AAoBQ,SACE,KADF;AApBR,SAAS,eAAe;AAExB,SAAS,qBAAqB,gBAAgB;AAC9C,YAAY,YAAY;AACxB,SAAS,6BAA6B;AACtC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AAEd,MAAM,yBAAyB,MAAM;AAC1C,QAAM,OAAO,QAAQ;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB,gBAAa;AAAA,MACb,UAAS;AAAA,MACT,gBAAe;AAAA,MAEf;AAAA,6BAAC,QAAK,WAAW,OAAO,gBACtB;AAAA,+BAAC,QAAK,YAAW,YAAW,KAAK,GAC/B;AAAA,gCAAC,QAAK,WAAU,oBAAmB,iBAAG;AAAA,YACtC,oBAAC,QAAK,WAAW,OAAO,eAAe,WAAU,SAC9C,eAAK,cAAc,SAAS,UAAU,GACzC;AAAA,aACF;AAAA,UACA,qBAAC,QAAK,YAAW,YAAW,KAAK,GAC/B;AAAA,gCAAC,QAAK,WAAU,oBAAmB,wBAAU;AAAA,YAC7C,oBAAC,QAAK,WAAW,OAAO,eAAe,WAAU,SAC9C,eAAK,cAAc,SAAS,SAAS,GACxC;AAAA,aACF;AAAA,WACF;AAAA,QAEA,oBAAC,gBAAa,MAAM,uBAAuB,gBAAa,aACrD,eAAK,cAAc,SAAS,aAAa,GAC5C;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,10 @@
+import "./SuggestionsInfoSection.css";
+var container = "_cpuf061-3-7-0";
+var shortcutLabel = "_cpuf063-3-7-0";
+var shortcutsGroup = "_cpuf062-3-7-0";
+export {
+  container,
+  shortcutLabel,
+  shortcutsGroup
+};
+//# sourceMappingURL=SuggestionsInfoSection.sty.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/editors/dql-editor/dql/SuggestionsInfoSection.css.ts"],
+  "sourcesContent": ["import './SuggestionsInfoSection.css';\nexport var container = '_cpuf061-3-7-0';\nexport var shortcutLabel = '_cpuf063-3-7-0';\nexport var shortcutsGroup = '_cpuf062-3-7-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;",
+  "names": []
+}

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

@@ -1,11 +1,12 @@
-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";
 import { openAutocomplete } from "./open-autocomplete.js";
 import { suggestionAutocompletion } from "./suggestion-autocompletions.js";
+import { suggestionsInfoSectionExtension } from "./suggestions-info-section-extension.js";
 const VALIDATION_DELAY = 500;
 function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityInfo) {
   const language = StreamLanguage.define(dql);
@@ -26,6 +27,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 +45,9 @@ function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityI
             onValidationStart,
             onValidationEnd
           );
+          if (view.composing) {
+            return [];
+          }
           setValidityInfo?.(validityResult);
           return validityResult;
         },
@@ -41,7 +55,7 @@ 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")
         );
@@ -52,17 +66,23 @@ function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityI
         if (!(isTyping || isDeleting || isFocused)) {
           return;
         }
-        if (await openAutocomplete(
+        if (update.view.composing) {
+          return;
+        }
+        void openAutocomplete(
           {
             isTyping,
             isDeleting,
             isFocused
           },
           update.state
-        )) {
-          startCompletion(update.view);
-        }
-      })
+        ).then((shouldComplete) => {
+          if (shouldComplete) {
+            startCompletion(update.view);
+          }
+        });
+      }),
+      ...readOnly ? [] : [suggestionsInfoSectionExtension]
     ],
     autocompleteOptions: readOnly ? void 0 : {
       activateOnTyping: false,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/dql-editor/dql/dql-language.ts"],
-  "sourcesContent": ["import { startCompletion } from '@codemirror/autocomplete';\nimport { StreamLanguage } from '@codemirror/language';\nimport { linter } from '@codemirror/lint';\nimport { EditorView } from '@codemirror/view';\n\nimport { EditorLanguageConfiguration } from '../../base-code-editor/configuration/configuration.js';\nimport type { DQLEditorValidityInfo } from '../dql-editor-types.js';\nimport { dqlLinter } from './dql-linter.js';\nimport { dql } from './dql.js';\nimport { openAutocomplete } from './open-autocomplete.js';\nimport { suggestionAutocompletion } from './suggestion-autocompletions.js';\n\nconst VALIDATION_DELAY = 500;\n\n/**\n * @internal\n * Gets editor configuration for DQL.\n **/\nexport function getDqlConfig(\n  readOnly: boolean,\n  onValidationStart?: () => void,\n  onValidationEnd?: (validityInfo: DQLEditorValidityInfo[]) => void,\n  setValidityInfo?: (validityInfo: DQLEditorValidityInfo[]) => void,\n): EditorLanguageConfiguration {\n  const language = StreamLanguage.define(dql);\n\n  return {\n    language,\n    extendWith: [\n      language.data.of({\n        commentTokens: {\n          block: {\n            open: '/*',\n            close: '*/',\n          },\n          line: '//',\n        },\n        closeBrackets: {\n          brackets: ['(', '[', '{', '\"'],\n          before: ')]}:;>|',\n          stringPrefixes: [],\n        },\n      }),\n      linter(\n        async (view) => {\n          const editorContent = view.state.doc.toString();\n\n          const validityResult = await dqlLinter(\n            editorContent,\n            onValidationStart,\n            onValidationEnd,\n          );\n          setValidityInfo?.(validityResult);\n          return validityResult;\n        },\n        {\n          delay: VALIDATION_DELAY,\n        },\n      ),\n      EditorView.updateListener.of(async (update) => {\n        const isTyping =\n          update.docChanged &&\n          update.transactions.some((transaction) =>\n            transaction.isUserEvent('input.type'),\n          );\n\n        const isDeleting =\n          update.docChanged &&\n          update.transactions.some((transaction) =>\n            transaction.isUserEvent('delete.backward'),\n          );\n\n        const isFocused = update.focusChanged && update.view.hasFocus;\n\n        if (!(isTyping || isDeleting || isFocused)) {\n          return;\n        }\n\n        if (\n          await openAutocomplete(\n            {\n              isTyping,\n              isDeleting,\n              isFocused,\n            },\n            update.state,\n          )\n        ) {\n          startCompletion(update.view);\n        }\n      }),\n    ],\n    autocompleteOptions: readOnly\n      ? undefined\n      : {\n          activateOnTyping: false,\n          optionClass: (completion) =>\n            completion.label.length === 0 ? 'cm-empty-option' : '',\n          providers: [suggestionAutocompletion],\n        },\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAI3B,SAAS,iBAAiB;AAC1B,SAAS,WAAW;AACpB,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AAEzC,MAAM,mBAAmB;AAMlB,SAAS,aACd,UACA,mBACA,iBACA,iBAC6B;AAC7B,QAAM,WAAW,eAAe,OAAO,GAAG;AAE1C,SAAO;AAAA,IACL;AAAA,IACA,YAAY;AAAA,MACV,SAAS,KAAK,GAAG;AAAA,QACf,eAAe;AAAA,UACb,OAAO;AAAA,YACL,MAAM;AAAA,YACN,OAAO;AAAA,UACT;AAAA,UACA,MAAM;AAAA,QACR;AAAA,QACA,eAAe;AAAA,UACb,UAAU,CAAC,KAAK,KAAK,KAAK,GAAG;AAAA,UAC7B,QAAQ;AAAA,UACR,gBAAgB,CAAC;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,MACD;AAAA,QACE,OAAO,SAAS;AACd,gBAAM,gBAAgB,KAAK,MAAM,IAAI,SAAS;AAE9C,gBAAM,iBAAiB,MAAM;AAAA,YAC3B;AAAA,YACA;AAAA,YACA;AAAA,UACF;AACA,4BAAkB,cAAc;AAChC,iBAAO;AAAA,QACT;AAAA,QACA;AAAA,UACE,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MACA,WAAW,eAAe,GAAG,OAAO,WAAW;AAC7C,cAAM,WACJ,OAAO,cACP,OAAO,aAAa;AAAA,UAAK,CAAC,gBACxB,YAAY,YAAY,YAAY;AAAA,QACtC;AAEF,cAAM,aACJ,OAAO,cACP,OAAO,aAAa;AAAA,UAAK,CAAC,gBACxB,YAAY,YAAY,iBAAiB;AAAA,QAC3C;AAEF,cAAM,YAAY,OAAO,gBAAgB,OAAO,KAAK;AAErD,YAAI,EAAE,YAAY,cAAc,YAAY;AAC1C;AAAA,QACF;AAEA,YACE,MAAM;AAAA,UACJ;AAAA,YACE;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACA,OAAO;AAAA,QACT,GACA;AACA,0BAAgB,OAAO,IAAI;AAAA,QAC7B;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,qBAAqB,WACjB,SACA;AAAA,MACE,kBAAkB;AAAA,MAClB,aAAa,CAAC,eACZ,WAAW,MAAM,WAAW,IAAI,oBAAoB;AAAA,MACtD,WAAW,CAAC,wBAAwB;AAAA,IACtC;AAAA,EACN;AACF;",
+  "sourcesContent": ["import { closeCompletion, startCompletion } from '@codemirror/autocomplete';\nimport { StreamLanguage } from '@codemirror/language';\nimport { linter, setDiagnostics } from '@codemirror/lint';\nimport { EditorView } from '@codemirror/view';\n\nimport { EditorLanguageConfiguration } from '../../base-code-editor/configuration/configuration.js';\nimport type { DQLEditorValidityInfo } from '../dql-editor-types.js';\nimport { dqlLinter } from './dql-linter.js';\nimport { dql } from './dql.js';\nimport { openAutocomplete } from './open-autocomplete.js';\nimport { suggestionAutocompletion } from './suggestion-autocompletions.js';\nimport { suggestionsInfoSectionExtension } from './suggestions-info-section-extension.js';\n\nconst VALIDATION_DELAY = 500;\n\n/**\n * @internal\n * Gets editor configuration for DQL.\n **/\nexport function getDqlConfig(\n  readOnly: boolean,\n  onValidationStart?: () => void,\n  onValidationEnd?: (validityInfo: DQLEditorValidityInfo[]) => void,\n  setValidityInfo?: (validityInfo: DQLEditorValidityInfo[]) => void,\n): EditorLanguageConfiguration {\n  const language = StreamLanguage.define(dql);\n\n  return {\n    language,\n    extendWith: [\n      language.data.of({\n        commentTokens: {\n          block: {\n            open: '/*',\n            close: '*/',\n          },\n          line: '//',\n        },\n        closeBrackets: {\n          brackets: ['(', '[', '{', '\"'],\n          before: ')]}:;>|',\n          stringPrefixes: [],\n        },\n      }),\n      EditorView.domEventObservers({\n        // Clear lint decorations when composition starts. Lint spans in the DOM\n        // corrupt CodeMirror's DOM reconciliation during IME / dead-key composition.\n        // The linter re-runs automatically after composition ends since the\n        // composed character is a document change.\n        compositionstart: (_event, view) => {\n          closeCompletion(view);\n          view.dispatch(setDiagnostics(view.state, []));\n        },\n      }),\n      linter(\n        async (view) => {\n          const editorContent = view.state.doc.toString();\n\n          const validityResult = await dqlLinter(\n            editorContent,\n            onValidationStart,\n            onValidationEnd,\n          );\n\n          if (view.composing) {\n            return [];\n          }\n\n          setValidityInfo?.(validityResult);\n          return validityResult;\n        },\n        {\n          delay: VALIDATION_DELAY,\n        },\n      ),\n      EditorView.updateListener.of((update) => {\n        const isTyping =\n          update.docChanged &&\n          update.transactions.some((transaction) =>\n            transaction.isUserEvent('input.type'),\n          );\n\n        const isDeleting =\n          update.docChanged &&\n          update.transactions.some((transaction) =>\n            transaction.isUserEvent('delete.backward'),\n          );\n\n        const isFocused = update.focusChanged && update.view.hasFocus;\n\n        if (!(isTyping || isDeleting || isFocused)) {\n          return;\n        }\n\n        if (update.view.composing) {\n          return;\n        }\n\n        void openAutocomplete(\n          {\n            isTyping,\n            isDeleting,\n            isFocused,\n          },\n          update.state,\n        ).then((shouldComplete) => {\n          if (shouldComplete) {\n            startCompletion(update.view);\n          }\n        });\n      }),\n      ...(readOnly ? [] : [suggestionsInfoSectionExtension]),\n    ],\n    autocompleteOptions: readOnly\n      ? undefined\n      : {\n          activateOnTyping: false,\n          optionClass: (completion) =>\n            completion.label.length === 0 ? 'cm-empty-option' : '',\n          providers: [suggestionAutocompletion],\n        },\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,sBAAsB;AAC/B,SAAS,QAAQ,sBAAsB;AACvC,SAAS,kBAAkB;AAI3B,SAAS,iBAAiB;AAC1B,SAAS,WAAW;AACpB,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,uCAAuC;AAEhD,MAAM,mBAAmB;AAMlB,SAAS,aACd,UACA,mBACA,iBACA,iBAC6B;AAC7B,QAAM,WAAW,eAAe,OAAO,GAAG;AAE1C,SAAO;AAAA,IACL;AAAA,IACA,YAAY;AAAA,MACV,SAAS,KAAK,GAAG;AAAA,QACf,eAAe;AAAA,UACb,OAAO;AAAA,YACL,MAAM;AAAA,YACN,OAAO;AAAA,UACT;AAAA,UACA,MAAM;AAAA,QACR;AAAA,QACA,eAAe;AAAA,UACb,UAAU,CAAC,KAAK,KAAK,KAAK,GAAG;AAAA,UAC7B,QAAQ;AAAA,UACR,gBAAgB,CAAC;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,MACD,WAAW,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,QAK3B,kBAAkB,CAAC,QAAQ,SAAS;AAClC,0BAAgB,IAAI;AACpB,eAAK,SAAS,eAAe,KAAK,OAAO,CAAC,CAAC,CAAC;AAAA,QAC9C;AAAA,MACF,CAAC;AAAA,MACD;AAAA,QACE,OAAO,SAAS;AACd,gBAAM,gBAAgB,KAAK,MAAM,IAAI,SAAS;AAE9C,gBAAM,iBAAiB,MAAM;AAAA,YAC3B;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAEA,cAAI,KAAK,WAAW;AAClB,mBAAO,CAAC;AAAA,UACV;AAEA,4BAAkB,cAAc;AAChC,iBAAO;AAAA,QACT;AAAA,QACA;AAAA,UACE,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MACA,WAAW,eAAe,GAAG,CAAC,WAAW;AACvC,cAAM,WACJ,OAAO,cACP,OAAO,aAAa;AAAA,UAAK,CAAC,gBACxB,YAAY,YAAY,YAAY;AAAA,QACtC;AAEF,cAAM,aACJ,OAAO,cACP,OAAO,aAAa;AAAA,UAAK,CAAC,gBACxB,YAAY,YAAY,iBAAiB;AAAA,QAC3C;AAEF,cAAM,YAAY,OAAO,gBAAgB,OAAO,KAAK;AAErD,YAAI,EAAE,YAAY,cAAc,YAAY;AAC1C;AAAA,QACF;AAEA,YAAI,OAAO,KAAK,WAAW;AACzB;AAAA,QACF;AAEA,aAAK;AAAA,UACH;AAAA,YACE;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACA,OAAO;AAAA,QACT,EAAE,KAAK,CAAC,mBAAmB;AACzB,cAAI,gBAAgB;AAClB,4BAAgB,OAAO,IAAI;AAAA,UAC7B;AAAA,QACF,CAAC;AAAA,MACH,CAAC;AAAA,MACD,GAAI,WAAW,CAAC,IAAI,CAAC,+BAA+B;AAAA,IACtD;AAAA,IACA,qBAAqB,WACjB,SACA;AAAA,MACE,kBAAkB;AAAA,MAClB,aAAa,CAAC,eACZ,WAAW,MAAM,WAAW,IAAI,oBAAoB;AAAA,MACtD,WAAW,CAAC,wBAAwB;AAAA,IACtC;AAAA,EACN;AACF;",
   "names": []
 }

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

@@ -2,6 +2,7 @@ import { simpleMode } from "@codemirror/legacy-modes/mode/simple-mode";
 import {
   booleanLiteralPattern,
   dqlUnitSuffixPattern,
+  nullLiteralPattern,
   parameterNamePattern,
   sortedDqlCommands
 } from "../../../core/dql/dql-common.js";
@@ -11,7 +12,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 },
@@ -48,6 +51,8 @@ const dql = simpleMode({
     // parameter, eg: scanLimitGb:
     { regex: booleanLiteralPattern, token: tokenMapping.bool },
     // boolean literals (true/false)
+    { regex: 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" },
@@ -74,7 +79,8 @@ const dql = 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: [