@dynatrace/strato-components 3.1.3 → 3.2.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/editors/base-code-editor/BaseCodeEditor.tsx"],
-  "sourcesContent": ["import { closeCompletion } from '@codemirror/autocomplete';\nimport {\n  foldedRanges,\n  forceParsing,\n  indentUnit,\n  syntaxTreeAvailable,\n} from '@codemirror/language';\nimport {\n  Compartment,\n  EditorSelection,\n  EditorState,\n  Extension,\n  Prec,\n  Transaction,\n} from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport clsx from 'clsx';\nimport {\n  forwardRef,\n  type MutableRefObject,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { editorContainerCSS } from './BaseCodeEditor.sty.js';\nimport type { EditorLanguageConfiguration } from './configuration/configuration.js';\nimport { configureLineWrap } from './configuration/configure-line-wrap.js';\nimport { configurePlaceholder } from './configuration/configure-placeholder.js';\nimport { configureReadOnly } from './configuration/configure-read-only.js';\nimport { configureSpellCheck } from './configuration/configure-spell-check.js';\nimport {\n  getMultipleLinesDefaultConfiguration,\n  getSingleLineDefaultConfiguration,\n  getDefaultConfiguration,\n} from './configuration/getDefaultConfigurations.js';\nimport type { GutterConfiguration } from './configuration/getDefaultConfigurations.js';\nimport { getLanguageConfiguration } from './configuration/language-extensions.js';\nimport { highlightExtension } from './highlight/highlight.extension.js';\nimport {\n  dataTestId as dataTestIdAttr,\n  baseCodeEditorTestId,\n  baseCodeEditorRootTestId,\n  baseCodeEditorScrollerTestId,\n} from './testIds.js';\nimport { calculateFolding } from './utils/calculate-folding.js';\nimport { getKeyMaps } from './utils/key-maps.js';\nimport { IntlProps } from './utils/render-node.js';\nimport { runFoldings } from './utils/run-foldings.js';\nimport { sanitizeText } from './utils/sanitize-text.js';\nimport { sanitizeValue } from './utils/sanitize-value.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.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 { InternalBaseItem as BaseItem } from '../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useSyncedFormControlProps } from '../../forms/forms-core/hooks/useSyncedFormControlProps.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\n\n// We disable the unstable EDIT_CONTEXT feature to ensure codemirror doesn't capture input after losing focus.\n// According to the maintainer it should be fixed with an upcoming chrome release, but we don't know about about Safari.\n// Github Issue https://github.com/codemirror/dev/issues/1537\n// @ts-expect-error - the prop exists but seems not to be included in the codemirror types.\nEditorView.EDIT_CONTEXT = false;\n\n// #region typings\n/**\n * Props used for BaseCodeEditor\n * @internal\n **/\nexport interface BaseCodeEditorProps\n  extends FormControlStateProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** The id for the DOM element */\n  id?: string;\n  /** The content of the editor\n   * @defaultValue ''\n   */\n  value?: string;\n  /** Callback that is called when the value in the editor 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  spellCheck?: boolean;\n  /**\n   * If set to true, the code 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  /** The language config */\n  configuration?: EditorLanguageConfiguration;\n  /**\n   * If set to true, the code editor allows only one line and the line number will not be displayed.\n   * @defaultValue false\n   */\n  singleLine?: boolean;\n\n  /**\n   * If set to true, the code editor will hide the line numbers\n   * @defaultValue false\n   */\n  hideLineNumbers?: boolean;\n\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  /**\n   * Provides the gutter configuration to display a gutter next to the fold gutter\n   */\n  gutterConfiguration?: GutterConfiguration;\n\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 * @internal\n */\nexport type BaseCodeEditorRef = {\n  focus: () => void;\n  selectRange: (range: { from: number; to: number }) => void;\n  readonly element: HTMLDivElement | null;\n  setCursorPosition: (position: number | 'end') => void;\n  editorView?: () => EditorView;\n};\n// #endregion typings\n\nconst languageCompartment = new Compartment();\nconst lineWrappingCompartment = new Compartment();\nconst keymapCompartment = new Compartment();\nconst placeholderCompartment = new Compartment();\nconst highlightOnChangeCompartment = new Compartment();\n\nconst getEditorConfiguration = (\n  intlProps: IntlProps,\n  options: {\n    singleLine: boolean;\n    hideLineNumbers?: boolean;\n    gutterConfiguration?: GutterConfiguration;\n    required?: boolean;\n    size?: 'default' | 'condensed';\n  },\n): Extension[] => {\n  const { singleLine, gutterConfiguration, hideLineNumbers, required, size } =\n    options;\n\n  const isRequired = required ?? false;\n  const editorSize = size ?? 'default';\n\n  if (singleLine) {\n    return getSingleLineDefaultConfiguration(intlProps, {\n      required: isRequired,\n      size: editorSize,\n    });\n  }\n  if (hideLineNumbers) {\n    return getDefaultConfiguration(intlProps, {\n      required: isRequired,\n      size: editorSize,\n    });\n  }\n  return getMultipleLinesDefaultConfiguration(intlProps, {\n    gutterConfiguration,\n    required: isRequired,\n    size: editorSize,\n  });\n};\n\nfunction useLazyEditorViewRef(): MutableRefObject<EditorView> {\n  const viewRef = useRef<EditorView | null>(null);\n\n  if (viewRef.current === null) {\n    viewRef.current = new EditorView({\n      state: EditorState.create(),\n    });\n  }\n\n  // it can never be null, the cast fixes the type\n  return viewRef as MutableRefObject<EditorView>;\n}\n\n/**\n * Creates a CodeMirror extension that attaches DOM event handlers to the editor's content element.\n *\n * @returns An extension that intercepts `keydown`, `focus`, and `blur` events.\n */\nconst getDomEventHandlers = (\n  onFocus?: (e: FocusEvent) => void,\n  onBlur?: (e: FocusEvent) => void,\n) => {\n  return EditorView.domEventHandlers({\n    // Prevent the Escape key from propagating beyond the editor.\n    // This is necessary for editors that are placed inside an overlay (e.g. Modal),\n    // where pressing `Escape` to exit the edit mode would otherwise close the overlay.\n    keydown: (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        event.stopPropagation();\n      }\n    },\n    // when the editor content element receives focus, call the provided focus handler\n    focus: (event: FocusEvent) => {\n      onFocus?.(event);\n    },\n    // when the editor content element loses focus, call the provided blur handler\n    blur: (event: FocusEvent) => {\n      onBlur?.(event);\n    },\n  });\n};\n\n/**\n * Provides a base/core component for other code editors to share a common base.\n *\n * @internal\n */\nexport const BaseCodeEditor = /* @__PURE__ */ forwardRef<\n  BaseCodeEditorRef,\n  BaseCodeEditorProps\n>((props, forwardedRef) => {\n  const {\n    controlState,\n    value,\n    readOnly = false,\n    spellCheck = false,\n    lineWrap = false,\n    onChange,\n    onFoldingChange,\n    defaultFolding,\n    folding,\n    fullHeight = false,\n    placeholder,\n    configuration,\n    singleLine = false,\n    hideLineNumbers = false,\n    size = 'default',\n    onFocus,\n    onBlur,\n    gutterConfiguration,\n    id: propId,\n    required = false,\n    style: consumerStyle,\n    className: consumerClassName,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-details': ariaDetails,\n    'aria-describedby': ariaDescribedBy,\n    'data-testid': dataTestId = baseCodeEditorRootTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n    'data-dt-component': dataDtComponent,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const intl = useIntl();\n  const [hasError, hint] = useFormControlState(controlState);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const rootRef = useMergeRefs<HTMLDivElement>([containerRef]);\n\n  /**\n   * Sanitize value\n   */\n  const sanitizedOnChange = useCallback(\n    (value: string) => onChange?.(sanitizeText(value)),\n    [onChange],\n  );\n\n  const viewRef = useLazyEditorViewRef();\n\n  const { id } = useSyncedFormControlProps({\n    propId,\n  });\n\n  const valueChangeRef = useRef<(value: string) => void>(undefined);\n  // Reference of the currently applied value, stored in a ref to be accessed correctly inside the codeMirror listeners.\n  const valueRef = useRef(value ?? '');\n  // Flag indicating that the document has been changed by someone other than the user. Mainly through setting the value prop.\n  const isMarkedDirtyRef = useRef<boolean>(false);\n\n  const [previousValue, setPreviousValue] = useState<string>('');\n  // Reference of the transaction where the doc (CodeMirror value) was last changed. Used mainly to get most up-to-date cursor position.\n  const transactionRef = useRef<Transaction | undefined>(undefined);\n\n  const { focusProps, isFocusVisible } = useFocusRing({\n    color: hasError ? 'critical' : 'neutral',\n  });\n\n  const [controlledFolding] = useControllableState<number[] | undefined>({\n    defaultValue: defaultFolding,\n    onChange: (values?: number[]) => {\n      if (values) {\n        onFoldingChange?.(values);\n      }\n    },\n    value: folding,\n  });\n\n  useImperativeHandle(\n    forwardedRef,\n    () => ({\n      element: containerRef.current,\n      editorView: () => viewRef.current,\n      focus: () => viewRef.current.focus(),\n      selectRange: (range) => {\n        const editorView = viewRef.current;\n        if (editorView && range) {\n          const docLength = editorView.state.doc.length;\n          const from = range.from < docLength ? range.from : 0;\n          const to = range.to < docLength ? range.to : docLength;\n\n          const transaction = editorView.state.update({\n            selection: EditorSelection.range(to, from),\n            scrollIntoView: true,\n          });\n          editorView.dispatch(transaction);\n          editorView.focus();\n        }\n      },\n      setCursorPosition: (position: number | 'end') => {\n        viewRef.current.dispatch({\n          selection: EditorSelection.cursor(\n            typeof position === 'number'\n              ? Math.min(\n                  Math.max(position, 0),\n                  viewRef.current.state.doc.length,\n                )\n              : viewRef.current.state.doc.length,\n          ),\n          scrollIntoView: true,\n        });\n        viewRef.current.focus();\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  // Create editor view\n  useEffect(() => {\n    const editorView = viewRef.current;\n    containerRef.current?.appendChild(editorView.dom);\n    editorView.dom.setAttribute(dataTestIdAttr, baseCodeEditorTestId);\n\n    return () => editorView.destroy();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Sets aria labels\n  useEffect(() => {\n    const { contentDOM } = viewRef.current;\n    const ariaLabelAttribute = 'aria-label';\n    const ariaLabelledByAttribute = 'aria-labelledby';\n    const ariaDetailsAttribute = 'aria-details';\n    const ariaDescribedByAttribute = 'aria-describedby';\n\n    if (ariaDescribedBy) {\n      contentDOM.setAttribute(ariaDescribedByAttribute, ariaDescribedBy);\n    }\n\n    if (ariaDetails) {\n      contentDOM.setAttribute(ariaDetailsAttribute, ariaDetails);\n    }\n\n    if (ariaLabelledBy) {\n      contentDOM.setAttribute(ariaLabelledByAttribute, ariaLabelledBy);\n    } else {\n      contentDOM.setAttribute(\n        ariaLabelAttribute,\n        ariaLabel ??\n          intl.formatMessage({\n            defaultMessage: 'Code Editor',\n            id: 'EBcYgbL0S1T6EpS2',\n            description: 'Aria-label for the code editors.',\n          }),\n      );\n    }\n\n    return () =>\n      [\n        ariaLabelAttribute,\n        ariaLabelledByAttribute,\n        ariaDetailsAttribute,\n        ariaDescribedByAttribute,\n      ].forEach((ariaAttribute) => contentDOM.removeAttribute(ariaAttribute));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ariaLabel, ariaLabelledBy, ariaDetails, ariaDescribedBy, intl]);\n\n  // to match the css applied to the .cm-content based on size we need to remeasure the height\n  // useLayoutEffect to match with the css change\n  useLayoutEffect(() => {\n    viewRef.current.requestMeasure();\n  }, [viewRef, size]);\n\n  const { messages, defaultLocale, locale } = useIntl();\n\n  // Set state and extensions of the editor\n  useEffect(() => {\n    const editorView = viewRef.current;\n\n    const handleValueChange = (transaction: Transaction) => {\n      const newValue = transaction.newDoc.toString();\n\n      if (valueRef.current !== newValue) {\n        // Save the current transaction that updates the document to grab the most up-to-date selection range (cursor position).\n        // This was done to fix cursor position resetting in APPDEV-9116.\n        transactionRef.current = transaction;\n\n        // Update the value ref\n        valueRef.current = newValue;\n\n        // Avoid calling the rest of logic including onChange if changes are coming from the value prop\n        if (isMarkedDirtyRef.current) {\n          isMarkedDirtyRef.current = false;\n        } else {\n          // Call the onChange from the editor props\n          valueChangeRef.current?.(newValue);\n        }\n      } else {\n        // Reset the marked dirty flag\n        isMarkedDirtyRef.current = false;\n      }\n      return transaction;\n    };\n\n    editorView.setState(\n      EditorState.create({\n        // Initial value of the editor\n        doc: value ?? '',\n        extensions: [\n          getDomEventHandlers(onFocus, onBlur),\n          Prec.highest(keymapCompartment.of(getKeyMaps(viewRef))),\n          languageCompartment.of([]),\n          // Indent unit is two spaces instead of tab\n          indentUnit.of('  '),\n          // Filter for transactions that gets applied before they are processed. This allows us\n          // to control which transactions go through as well as adding/editing transactions if we please.\n          EditorState.transactionFilter.of((transaction) => {\n            //TODO: Update this logic for controlled/uncontrolled implementation in APPDEV-5775\n            if (transaction.docChanged) {\n              return handleValueChange(transaction);\n            }\n            return transaction;\n          }),\n          EditorView.updateListener.of((update) => {\n            const isUndoOrRedo = update.transactions.some(\n              (transaction) =>\n                transaction.isUserEvent('undo') ||\n                transaction.isUserEvent('redo'),\n            );\n\n            // Make sure that only folding was changed in the editor\n            if (\n              update.geometryChanged &&\n              !update.docChanged &&\n              !update.focusChanged &&\n              update.heightChanged\n            ) {\n              const ranges = foldedRanges(update.state);\n              const foldValues = calculateFolding(ranges);\n\n              onFoldingChange?.(foldValues);\n            }\n            // Check if the transaction is undo or redo in order to not accidentally call onChange\n            // twice. Usually onChange is called before applying the changes. However, undo and redo\n            // are considered as transactions that occur after the view has been updated.\n            // Therefore, we explicitly call onChange if that is the case.\n            else if (update.docChanged && isUndoOrRedo) {\n              update.transactions.forEach((transaction) =>\n                handleValueChange(transaction),\n              );\n            }\n          }),\n          lineWrappingCompartment.of([]),\n          placeholderCompartment.of([]),\n          highlightOnChangeCompartment.of([]),\n        ],\n      }),\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Update language configuration\n  useEffect(() => {\n    const editorView = viewRef.current;\n    const intlProps: IntlProps = {\n      locale,\n      defaultLocale,\n      messages,\n    };\n    const extensions = [\n      ...getEditorConfiguration(intlProps, {\n        singleLine,\n        hideLineNumbers,\n        gutterConfiguration,\n        required,\n      }),\n      ...getLanguageConfiguration(configuration || {}, {\n        messages,\n        defaultLocale,\n        locale,\n      }),\n    ];\n    editorView.dispatch({\n      effects: languageCompartment.reconfigure(extensions),\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    configuration,\n    defaultLocale,\n    locale,\n    messages,\n    singleLine,\n    hideLineNumbers,\n    gutterConfiguration,\n  ]);\n\n  useEffect(() => {\n    configureReadOnly(readOnly, viewRef, keymapCompartment);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [readOnly]);\n\n  useEffect(() => {\n    configureLineWrap(lineWrap, viewRef, lineWrappingCompartment);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [lineWrap]);\n\n  useEffect(() => {\n    configurePlaceholder(placeholder, viewRef, placeholderCompartment);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [placeholder]);\n\n  useEffect(() => {\n    configureSpellCheck(spellCheck, readOnly, viewRef);\n  }, [viewRef, readOnly, spellCheck]);\n\n  // Assign new onChange method to ref that is used in the updatelistener extension\n  useEffect(() => {\n    valueChangeRef.current =\n      onChange !== undefined ? sanitizedOnChange : undefined;\n  }, [onChange, sanitizedOnChange]);\n\n  // Set the content of the code editor to the changed value\n  useEffect(() => {\n    // TODO: Update this logic for controlled/uncontrolled implementation in APPDEV-5775\n    const sanitizedValue = sanitizeValue(value);\n    if (viewRef.current.state.doc.toString() === sanitizedValue) {\n      return;\n    }\n\n    // Keep track of the previous value, mainly for highlighting purposes\n    setPreviousValue(viewRef.current.state.doc.toString());\n\n    // Set flag to true to indicate it was changed by someone other than user\n    isMarkedDirtyRef.current = true;\n\n    try {\n      let selection;\n      if (!viewRef.current.hasFocus) {\n        // If the editor doesn't have focus, replace entire doc\n        // with new value regardless of cursor position\n        selection = undefined;\n      } else {\n        // Fallback to the view cursor position at last line\n        const editorLineCount = viewRef.current.state.doc.lines;\n        const lastLine = viewRef.current.state.doc.line(editorLineCount);\n        // we use length -1 to avoid selection range error\n        const selectionPosition = Math.max(0, lastLine.length - 1);\n\n        // anchor and head define a text selection\n        // if anchor and head have the same position the cursor is placed at a fixed position with no text selection\n        selection = { anchor: selectionPosition, head: selectionPosition };\n      }\n      // Reset the transaction reference\n      transactionRef.current = undefined;\n\n      // Create a transaction to update the codeMirror document with the new value\n      const transaction: Transaction = viewRef.current.state.update({\n        changes: [\n          {\n            from: 0,\n            to: viewRef.current.state.doc.length,\n            insert: sanitizedValue,\n          },\n        ],\n        selection,\n      });\n\n      viewRef.current.dispatch(transaction);\n    } catch {\n      /*\n    Left empty on purpose. This was done to catch RangeErrors which would be thrown\n    if the user is typing very fast. The selection cursor would be outside the CodeMirror's document length in some cases.\n    Catching the error is better than crashing the entire code editor. */\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // Run the highlight extension while providing the previous value\n  useEffect(() => {\n    const editorView = viewRef.current;\n    editorView.dispatch({\n      effects: highlightOnChangeCompartment.reconfigure([\n        highlightExtension(previousValue),\n      ]),\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [previousValue]);\n\n  useEffect(() => {\n    runFoldings(controlledFolding ?? [], viewRef.current);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controlledFolding]);\n\n  // add aria-invalid if form validation returns an error\n  useEffect(() => {\n    const codeEditorInput = viewRef.current.dom.querySelector(\n      'div[contenteditable]',\n    );\n    if (codeEditorInput) {\n      hasError\n        ? codeEditorInput.setAttribute('aria-invalid', 'true')\n        : codeEditorInput.removeAttribute('aria-invalid');\n      (codeEditorInput as HTMLElement).tabIndex = -1;\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [hasError]);\n\n  // Handle clicking outside the editor while having the autocomplete open to close it.\n  const handleOutsideEditorClick = useCallback(\n    (e: MouseEvent) => {\n      const autoCompleteContainer = document.body.querySelector(\n        '.cm-tooltip-autocomplete',\n      );\n      if (!autoCompleteContainer?.contains(e.target as Node)) {\n        closeCompletion(viewRef.current);\n      }\n    },\n    [viewRef],\n  );\n\n  useEffect(() => {\n    // This way is preferred over handling it through the blur event on the editor as that closes the autocomplete\n    // if the user attempts to scroll in the autocomplete tooltip\n    // https://dev-jira.dynatrace.org/browse/ADES-4842\n    document.addEventListener('pointerdown', handleOutsideEditorClick);\n    return () => {\n      document.removeEventListener('pointerdown', handleOutsideEditorClick);\n    };\n  }, [handleOutsideEditorClick]);\n\n  // https://dev-jira.dynatrace.org/browse/EXA-5783\n  // forceParsing is a synchronous operation that blocks the main thread, but it keeps track\n  // of the already parsed content. We parse in chunks, each blocking the main thread for 100ms\n  // but pausing for 100ms after each parse attempt, this keeps the page responsive to scrolling and clicks\n  // Note: This is really only a issue for very large json content like: `fetch spans | limit 5000` ( ~ 13 MB )\n  useEffect(() => {\n    if (!value) {\n      return;\n    }\n\n    let timeoutId: number | null = null;\n    let done = false;\n\n    const cleanup = () => {\n      if (timeoutId) {\n        window.clearTimeout(timeoutId);\n      }\n    };\n\n    const tick = () => {\n      const wholeSyntaxTreeParsed = syntaxTreeAvailable(\n        viewRef.current.state,\n        viewRef.current.state.doc.length,\n      );\n\n      if (wholeSyntaxTreeParsed) {\n        cleanup();\n        return;\n      }\n\n      done = forceParsing(\n        viewRef.current,\n        viewRef.current.state.doc.length,\n        100,\n      );\n\n      if (!done) {\n        timeoutId = window.setTimeout(tick, 10);\n      }\n    };\n\n    tick();\n\n    return cleanup;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // change the editor's focus behavior\n  // only the .cm-scroll container is focusable via the keyboard, the content can be focused\n  // by pressing 'ENTER' and only by pressing 'ESCAPE' the focus is moved back\n  useEffect(() => {\n    const editorScrollContainer =\n      viewRef.current.dom.querySelector('.cm-scroller');\n    editorScrollContainer?.setAttribute('tabIndex', '0');\n    editorScrollContainer?.setAttribute(\n      dataTestIdAttr,\n      baseCodeEditorScrollerTestId,\n    );\n\n    const handleFocus = (event: Event) => {\n      if (event instanceof FocusEvent) {\n        focusProps.onFocus(event);\n      }\n    };\n    const handleBlur = (event: Event) => {\n      if (event instanceof FocusEvent) {\n        focusProps.onBlur(event);\n      }\n    };\n    const handleKeyDown = (event: Event) => {\n      if (event instanceof KeyboardEvent) {\n        if (\n          event.key === 'Enter' &&\n          !event.metaKey &&\n          !event.ctrlKey &&\n          !readOnly\n        ) {\n          event.preventDefault();\n          viewRef.current.focus();\n        }\n      }\n    };\n    editorScrollContainer?.addEventListener('focus', handleFocus);\n    editorScrollContainer?.addEventListener('blur', handleBlur);\n    editorScrollContainer?.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      editorScrollContainer?.removeEventListener('focus', handleFocus);\n      editorScrollContainer?.removeEventListener('blur', handleBlur);\n      editorScrollContainer?.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [focusProps, readOnly, viewRef]);\n\n  return (\n    <>\n      <div\n        ref={rootRef}\n        className={clsx(\n          editorContainerCSS({\n            focusVisible: isFocusVisible,\n            fullHeight,\n            hasError,\n            lineNumbers: singleLine || hideLineNumbers ? 'hidden' : undefined,\n            readOnly,\n            size,\n          }),\n          inputGroupClassName,\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...behavioralTrackingProps}\n        {...restProps}\n        data-dt-component={dataDtComponent}\n      />\n      <input\n        type=\"text\"\n        id={id}\n        disabled={readOnly}\n        tabIndex={-1}\n        onFocus={() =>\n          // forward focus to the editor\n          // we need the hidden input unfortunately since the editor does not support focus properly\n          viewRef.current.focus()\n        }\n        aria-hidden=\"true\"\n        style={{\n          position: 'absolute',\n          height: 0,\n          width: 0,\n          opacity: 0,\n          margin: 0,\n          padding: 0,\n          border: 0,\n        }}\n      />\n      {(hasError || hint) && (\n        <span\n          aria-live=\"polite\"\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n        >\n          <BaseItem variant={hasError ? 'error' : 'hint'}>{hint}</BaseItem>\n        </span>\n      )}\n    </>\n  );\n});\n\n(\n  BaseCodeEditor as typeof BaseCodeEditor & { displayName: string }\n).displayName = 'BaseCodeEditor';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { closeCompletion } from '@codemirror/autocomplete';\nimport {\n  foldedRanges,\n  forceParsing,\n  indentUnit,\n  syntaxTreeAvailable,\n} from '@codemirror/language';\nimport {\n  Compartment,\n  EditorSelection,\n  EditorState,\n  Extension,\n  Prec,\n  Transaction,\n} from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport clsx from 'clsx';\nimport {\n  forwardRef,\n  type MutableRefObject,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './BaseCodeEditor.sty.js';\nimport type { EditorLanguageConfiguration } from './configuration/configuration.js';\nimport { configureLineWrap } from './configuration/configure-line-wrap.js';\nimport { configurePlaceholder } from './configuration/configure-placeholder.js';\nimport { configureReadOnly } from './configuration/configure-read-only.js';\nimport { configureSpellCheck } from './configuration/configure-spell-check.js';\nimport {\n  getMultipleLinesDefaultConfiguration,\n  getSingleLineDefaultConfiguration,\n  getDefaultConfiguration,\n} from './configuration/getDefaultConfigurations.js';\nimport type { GutterConfiguration } from './configuration/getDefaultConfigurations.js';\nimport { getLanguageConfiguration } from './configuration/language-extensions.js';\nimport { highlightExtension } from './highlight/highlight.extension.js';\nimport {\n  dataTestId as dataTestIdAttr,\n  baseCodeEditorTestId,\n  baseCodeEditorRootTestId,\n  baseCodeEditorScrollerTestId,\n} from './testIds.js';\nimport { calculateFolding } from './utils/calculate-folding.js';\nimport { getKeyMaps } from './utils/key-maps.js';\nimport { IntlProps } from './utils/render-node.js';\nimport { runFoldings } from './utils/run-foldings.js';\nimport { sanitizeText } from './utils/sanitize-text.js';\nimport { sanitizeValue } from './utils/sanitize-value.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.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 { InternalBaseItem as BaseItem } from '../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useSyncedFormControlProps } from '../../forms/forms-core/hooks/useSyncedFormControlProps.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\n\n// We disable the unstable EDIT_CONTEXT feature to ensure codemirror doesn't capture input after losing focus.\n// According to the maintainer it should be fixed with an upcoming chrome release, but we don't know about about Safari.\n// Github Issue https://github.com/codemirror/dev/issues/1537\n// @ts-expect-error - the prop exists but seems not to be included in the codemirror types.\nEditorView.EDIT_CONTEXT = false;\n\n// #region typings\n/**\n * Props used for BaseCodeEditor\n * @internal\n **/\nexport interface BaseCodeEditorProps\n  extends FormControlStateProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * The ID for the DOM element.\n   * */\n  id?: string;\n  /**\n   * The contents of the editor.\n   * @defaultValue ''\n   */\n  value?: string;\n  /**\n   * Callback that is called when the value in the editor 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 code 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   * The language configuration.\n   */\n  configuration?: EditorLanguageConfiguration;\n  /**\n   * If set to true, the code editor allows only one line and the line number will not be displayed.\n   * @defaultValue false\n   */\n  singleLine?: boolean;\n  /**\n   * If set to true, the code editor will hide the line numbers.\n   * @defaultValue false\n   */\n  hideLineNumbers?: 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   * Provides the gutter configuration to display a marker next to the fold gutter.\n   */\n  gutterConfiguration?: GutterConfiguration;\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 * @internal\n */\nexport type BaseCodeEditorRef = {\n  focus: () => void;\n  selectRange: (range: { from: number; to: number }) => void;\n  readonly element: HTMLDivElement | null;\n  setCursorPosition: (position: number | 'end') => void;\n  editorView?: () => EditorView;\n};\n// #endregion typings\n\nconst languageCompartment = new Compartment();\nconst lineWrappingCompartment = new Compartment();\nconst keymapCompartment = new Compartment();\nconst placeholderCompartment = new Compartment();\nconst highlightOnChangeCompartment = new Compartment();\n\nconst getEditorConfiguration = (\n  intlProps: IntlProps,\n  options: {\n    singleLine: boolean;\n    hideLineNumbers?: boolean;\n    gutterConfiguration?: GutterConfiguration;\n    required?: boolean;\n    size?: 'default' | 'condensed';\n  },\n): Extension[] => {\n  const { singleLine, gutterConfiguration, hideLineNumbers, required, size } =\n    options;\n\n  const isRequired = required ?? false;\n  const editorSize = size ?? 'default';\n\n  if (singleLine) {\n    return getSingleLineDefaultConfiguration(intlProps, {\n      required: isRequired,\n      size: editorSize,\n    });\n  }\n  if (hideLineNumbers) {\n    return getDefaultConfiguration(intlProps, {\n      required: isRequired,\n      size: editorSize,\n    });\n  }\n  return getMultipleLinesDefaultConfiguration(intlProps, {\n    gutterConfiguration,\n    required: isRequired,\n    size: editorSize,\n  });\n};\n\nfunction useLazyEditorViewRef(): MutableRefObject<EditorView> {\n  const viewRef = useRef<EditorView | null>(null);\n\n  if (viewRef.current === null) {\n    viewRef.current = new EditorView({\n      state: EditorState.create(),\n    });\n  }\n\n  // it can never be null, the cast fixes the type\n  return viewRef as MutableRefObject<EditorView>;\n}\n\n/**\n * Creates a CodeMirror extension that attaches DOM event handlers to the editor's content element.\n *\n * @returns An extension that intercepts `keydown`, `focus`, and `blur` events.\n */\nconst getDomEventHandlers = (\n  onFocus?: (e: FocusEvent) => void,\n  onBlur?: (e: FocusEvent) => void,\n) => {\n  return EditorView.domEventHandlers({\n    // Prevent the Escape key from propagating beyond the editor.\n    // This is necessary for editors that are placed inside an overlay (e.g. Modal),\n    // where pressing `Escape` to exit the edit mode would otherwise close the overlay.\n    keydown: (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        event.stopPropagation();\n      }\n    },\n    // when the editor content element receives focus, call the provided focus handler\n    focus: (event: FocusEvent) => {\n      onFocus?.(event);\n    },\n    // when the editor content element loses focus, call the provided blur handler\n    blur: (event: FocusEvent) => {\n      onBlur?.(event);\n    },\n  });\n};\n\n/**\n * Provides a base/core component for other code editors to share a common base.\n *\n * @internal\n */\nexport const BaseCodeEditor = /* @__PURE__ */ forwardRef<\n  BaseCodeEditorRef,\n  BaseCodeEditorProps\n>((props, forwardedRef) => {\n  const {\n    controlState,\n    value,\n    readOnly = false,\n    spellCheck = false,\n    lineWrap = false,\n    onChange,\n    onFoldingChange,\n    defaultFolding,\n    folding,\n    fullHeight = false,\n    placeholder,\n    configuration,\n    singleLine = false,\n    hideLineNumbers = false,\n    size = 'default',\n    onFocus,\n    onBlur,\n    gutterConfiguration,\n    id: propId,\n    required = false,\n    style: consumerStyle,\n    className: consumerClassName,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-details': ariaDetails,\n    'aria-describedby': ariaDescribedBy,\n    'data-testid': dataTestId = baseCodeEditorRootTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n    'data-dt-component': dataDtComponent,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const intl = useIntl();\n  const [hasError, hint] = useFormControlState(controlState);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const rootRef = useMergeRefs<HTMLDivElement>([containerRef]);\n\n  /**\n   * Sanitize value\n   */\n  const sanitizedOnChange = useCallback(\n    (value: string) => onChange?.(sanitizeText(value)),\n    [onChange],\n  );\n\n  const viewRef = useLazyEditorViewRef();\n\n  const { id } = useSyncedFormControlProps({\n    propId,\n  });\n\n  const valueChangeRef = useRef<(value: string) => void>(undefined);\n  // Reference of the currently applied value, stored in a ref to be accessed correctly inside the codeMirror listeners.\n  const valueRef = useRef(value ?? '');\n  // Flag indicating that the document has been changed by someone other than the user. Mainly through setting the value prop.\n  const isMarkedDirtyRef = useRef<boolean>(false);\n\n  const [previousValue, setPreviousValue] = useState<string>('');\n  // Reference of the transaction where the doc (CodeMirror value) was last changed. Used mainly to get most up-to-date cursor position.\n  const transactionRef = useRef<Transaction | undefined>(undefined);\n\n  const { focusProps, isFocusVisible } = useFocusRing({\n    color: hasError ? 'critical' : 'neutral',\n  });\n\n  const [controlledFolding] = useControllableState<number[] | undefined>({\n    defaultValue: defaultFolding,\n    onChange: (values?: number[]) => {\n      if (values) {\n        onFoldingChange?.(values);\n      }\n    },\n    value: folding,\n  });\n\n  useImperativeHandle(\n    forwardedRef,\n    () => ({\n      element: containerRef.current,\n      editorView: () => viewRef.current,\n      focus: () => viewRef.current.focus(),\n      selectRange: (range) => {\n        const editorView = viewRef.current;\n        if (editorView && range) {\n          const docLength = editorView.state.doc.length;\n          const from = range.from < docLength ? range.from : 0;\n          const to = range.to < docLength ? range.to : docLength;\n\n          const transaction = editorView.state.update({\n            selection: EditorSelection.range(to, from),\n            scrollIntoView: true,\n          });\n          editorView.dispatch(transaction);\n          editorView.focus();\n        }\n      },\n      setCursorPosition: (position: number | 'end') => {\n        viewRef.current.dispatch({\n          selection: EditorSelection.cursor(\n            typeof position === 'number'\n              ? Math.min(\n                  Math.max(position, 0),\n                  viewRef.current.state.doc.length,\n                )\n              : viewRef.current.state.doc.length,\n          ),\n          scrollIntoView: true,\n        });\n        viewRef.current.focus();\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  // Create editor view\n  useEffect(() => {\n    const editorView = viewRef.current;\n    containerRef.current?.appendChild(editorView.dom);\n    editorView.dom.setAttribute(dataTestIdAttr, baseCodeEditorTestId);\n\n    return () => editorView.destroy();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Sets aria labels\n  useEffect(() => {\n    const { contentDOM } = viewRef.current;\n    const ariaLabelAttribute = 'aria-label';\n    const ariaLabelledByAttribute = 'aria-labelledby';\n    const ariaDetailsAttribute = 'aria-details';\n    const ariaDescribedByAttribute = 'aria-describedby';\n\n    if (ariaDescribedBy) {\n      contentDOM.setAttribute(ariaDescribedByAttribute, ariaDescribedBy);\n    }\n\n    if (ariaDetails) {\n      contentDOM.setAttribute(ariaDetailsAttribute, ariaDetails);\n    }\n\n    if (ariaLabelledBy) {\n      contentDOM.setAttribute(ariaLabelledByAttribute, ariaLabelledBy);\n    } else {\n      contentDOM.setAttribute(\n        ariaLabelAttribute,\n        ariaLabel ??\n          intl.formatMessage({\n            defaultMessage: 'Code Editor',\n            id: 'EBcYgbL0S1T6EpS2',\n            description: 'Aria-label for the code editors.',\n          }),\n      );\n    }\n\n    return () =>\n      [\n        ariaLabelAttribute,\n        ariaLabelledByAttribute,\n        ariaDetailsAttribute,\n        ariaDescribedByAttribute,\n      ].forEach((ariaAttribute) => contentDOM.removeAttribute(ariaAttribute));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ariaLabel, ariaLabelledBy, ariaDetails, ariaDescribedBy, intl]);\n\n  // to match the css applied to the .cm-content based on size we need to remeasure the height\n  // useLayoutEffect to match with the css change\n  useLayoutEffect(() => {\n    viewRef.current.requestMeasure();\n  }, [viewRef, size]);\n\n  const { messages, defaultLocale, locale } = useIntl();\n\n  // Set state and extensions of the editor\n  useEffect(() => {\n    const editorView = viewRef.current;\n\n    const handleValueChange = (transaction: Transaction) => {\n      const newValue = transaction.newDoc.toString();\n\n      if (valueRef.current !== newValue) {\n        // Save the current transaction that updates the document to grab the most up-to-date selection range (cursor position).\n        // This was done to fix cursor position resetting in APPDEV-9116.\n        transactionRef.current = transaction;\n\n        // Update the value ref\n        valueRef.current = newValue;\n\n        // Avoid calling the rest of logic including onChange if changes are coming from the value prop\n        if (isMarkedDirtyRef.current) {\n          isMarkedDirtyRef.current = false;\n        } else {\n          // Call the onChange from the editor props\n          valueChangeRef.current?.(newValue);\n        }\n      } else {\n        // Reset the marked dirty flag\n        isMarkedDirtyRef.current = false;\n      }\n      return transaction;\n    };\n\n    editorView.setState(\n      EditorState.create({\n        // Initial value of the editor\n        doc: value ?? '',\n        extensions: [\n          getDomEventHandlers(onFocus, onBlur),\n          Prec.highest(keymapCompartment.of(getKeyMaps(viewRef))),\n          languageCompartment.of([]),\n          // Indent unit is two spaces instead of tab\n          indentUnit.of('  '),\n          // Filter for transactions that gets applied before they are processed. This allows us\n          // to control which transactions go through as well as adding/editing transactions if we please.\n          EditorState.transactionFilter.of((transaction) => {\n            //TODO: Update this logic for controlled/uncontrolled implementation in APPDEV-5775\n            if (transaction.docChanged) {\n              return handleValueChange(transaction);\n            }\n            return transaction;\n          }),\n          EditorView.updateListener.of((update) => {\n            const isUndoOrRedo = update.transactions.some(\n              (transaction) =>\n                transaction.isUserEvent('undo') ||\n                transaction.isUserEvent('redo'),\n            );\n\n            // Make sure that only folding was changed in the editor\n            if (\n              update.geometryChanged &&\n              !update.docChanged &&\n              !update.focusChanged &&\n              update.heightChanged\n            ) {\n              const ranges = foldedRanges(update.state);\n              const foldValues = calculateFolding(ranges);\n\n              onFoldingChange?.(foldValues);\n            }\n            // Check if the transaction is undo or redo in order to not accidentally call onChange\n            // twice. Usually onChange is called before applying the changes. However, undo and redo\n            // are considered as transactions that occur after the view has been updated.\n            // Therefore, we explicitly call onChange if that is the case.\n            else if (update.docChanged && isUndoOrRedo) {\n              update.transactions.forEach((transaction) =>\n                handleValueChange(transaction),\n              );\n            }\n          }),\n          lineWrappingCompartment.of([]),\n          placeholderCompartment.of([]),\n          highlightOnChangeCompartment.of([]),\n        ],\n      }),\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Update language configuration\n  useEffect(() => {\n    const editorView = viewRef.current;\n    const intlProps: IntlProps = {\n      locale,\n      defaultLocale,\n      messages,\n    };\n    const extensions = [\n      ...getEditorConfiguration(intlProps, {\n        singleLine,\n        hideLineNumbers,\n        gutterConfiguration,\n        required,\n        size,\n      }),\n      ...getLanguageConfiguration(configuration || {}, {\n        messages,\n        defaultLocale,\n        locale,\n      }),\n    ];\n    editorView.dispatch({\n      effects: languageCompartment.reconfigure(extensions),\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    configuration,\n    defaultLocale,\n    locale,\n    messages,\n    singleLine,\n    hideLineNumbers,\n    gutterConfiguration,\n    required,\n    size,\n  ]);\n\n  useEffect(() => {\n    configureReadOnly(readOnly, viewRef, keymapCompartment);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [readOnly]);\n\n  useEffect(() => {\n    configureLineWrap(lineWrap, viewRef, lineWrappingCompartment);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [lineWrap]);\n\n  useEffect(() => {\n    configurePlaceholder(placeholder, viewRef, placeholderCompartment);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [placeholder]);\n\n  useEffect(() => {\n    configureSpellCheck(spellCheck, readOnly, viewRef);\n  }, [viewRef, readOnly, spellCheck]);\n\n  // Assign new onChange method to ref that is used in the updatelistener extension\n  useEffect(() => {\n    valueChangeRef.current =\n      onChange !== undefined ? sanitizedOnChange : undefined;\n  }, [onChange, sanitizedOnChange]);\n\n  // Set the content of the code editor to the changed value\n  useEffect(() => {\n    // TODO: Update this logic for controlled/uncontrolled implementation in APPDEV-5775\n    const sanitizedValue = sanitizeValue(value);\n    if (viewRef.current.state.doc.toString() === sanitizedValue) {\n      return;\n    }\n\n    // Keep track of the previous value, mainly for highlighting purposes\n    setPreviousValue(viewRef.current.state.doc.toString());\n\n    // Set flag to true to indicate it was changed by someone other than user\n    isMarkedDirtyRef.current = true;\n\n    try {\n      let selection;\n      if (!viewRef.current.hasFocus) {\n        // If the editor doesn't have focus, replace entire doc\n        // with new value regardless of cursor position\n        selection = undefined;\n      } else {\n        // Fallback to the view cursor position at last line\n        const editorLineCount = viewRef.current.state.doc.lines;\n        const lastLine = viewRef.current.state.doc.line(editorLineCount);\n        // we use length -1 to avoid selection range error\n        const selectionPosition = Math.max(0, lastLine.length - 1);\n\n        // anchor and head define a text selection\n        // if anchor and head have the same position the cursor is placed at a fixed position with no text selection\n        selection = { anchor: selectionPosition, head: selectionPosition };\n      }\n      // Reset the transaction reference\n      transactionRef.current = undefined;\n\n      // Create a transaction to update the codeMirror document with the new value\n      const transaction: Transaction = viewRef.current.state.update({\n        changes: [\n          {\n            from: 0,\n            to: viewRef.current.state.doc.length,\n            insert: sanitizedValue,\n          },\n        ],\n        selection,\n      });\n\n      viewRef.current.dispatch(transaction);\n    } catch {\n      /*\n    Left empty on purpose. This was done to catch RangeErrors which would be thrown\n    if the user is typing very fast. The selection cursor would be outside the CodeMirror's document length in some cases.\n    Catching the error is better than crashing the entire code editor. */\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // Run the highlight extension while providing the previous value\n  useEffect(() => {\n    const editorView = viewRef.current;\n    editorView.dispatch({\n      effects: highlightOnChangeCompartment.reconfigure([\n        highlightExtension(previousValue),\n      ]),\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [previousValue]);\n\n  useEffect(() => {\n    runFoldings(controlledFolding ?? [], viewRef.current);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controlledFolding]);\n\n  // add aria-invalid if form validation returns an error\n  useEffect(() => {\n    const codeEditorInput = viewRef.current.dom.querySelector(\n      'div[contenteditable]',\n    );\n    if (codeEditorInput) {\n      hasError\n        ? codeEditorInput.setAttribute('aria-invalid', 'true')\n        : codeEditorInput.removeAttribute('aria-invalid');\n      (codeEditorInput as HTMLElement).tabIndex = -1;\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [hasError]);\n\n  // Handle clicking outside the editor while having the autocomplete open to close it.\n  const handleOutsideEditorClick = useCallback(\n    (e: MouseEvent) => {\n      const autoCompleteContainer = document.body.querySelector(\n        '.cm-tooltip-autocomplete',\n      );\n      if (!autoCompleteContainer?.contains(e.target as Node)) {\n        closeCompletion(viewRef.current);\n      }\n    },\n    [viewRef],\n  );\n\n  useEffect(() => {\n    // This way is preferred over handling it through the blur event on the editor as that closes the autocomplete\n    // if the user attempts to scroll in the autocomplete tooltip\n    // https://dev-jira.dynatrace.org/browse/ADES-4842\n    document.addEventListener('pointerdown', handleOutsideEditorClick);\n    return () => {\n      document.removeEventListener('pointerdown', handleOutsideEditorClick);\n    };\n  }, [handleOutsideEditorClick]);\n\n  // https://dev-jira.dynatrace.org/browse/EXA-5783\n  // forceParsing is a synchronous operation that blocks the main thread, but it keeps track\n  // of the already parsed content. We parse in chunks, each blocking the main thread for 100ms\n  // but pausing for 100ms after each parse attempt, this keeps the page responsive to scrolling and clicks\n  // Note: This is really only a issue for very large json content like: `fetch spans | limit 5000` ( ~ 13 MB )\n  useEffect(() => {\n    if (!value) {\n      return;\n    }\n\n    let timeoutId: number | null = null;\n    let done = false;\n\n    const cleanup = () => {\n      if (timeoutId) {\n        window.clearTimeout(timeoutId);\n      }\n    };\n\n    const tick = () => {\n      const wholeSyntaxTreeParsed = syntaxTreeAvailable(\n        viewRef.current.state,\n        viewRef.current.state.doc.length,\n      );\n\n      if (wholeSyntaxTreeParsed) {\n        cleanup();\n        return;\n      }\n\n      done = forceParsing(\n        viewRef.current,\n        viewRef.current.state.doc.length,\n        100,\n      );\n\n      if (!done) {\n        timeoutId = window.setTimeout(tick, 10);\n      }\n    };\n\n    tick();\n\n    return cleanup;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // change the editor's focus behavior\n  // only the .cm-scroll container is focusable via the keyboard, the content can be focused\n  // by pressing 'ENTER' and only by pressing 'ESCAPE' the focus is moved back\n  useEffect(() => {\n    const editorScrollContainer =\n      viewRef.current.dom.querySelector('.cm-scroller');\n    editorScrollContainer?.setAttribute('tabIndex', '0');\n    editorScrollContainer?.setAttribute(\n      dataTestIdAttr,\n      baseCodeEditorScrollerTestId,\n    );\n\n    const handleFocus = (event: Event) => {\n      if (event instanceof FocusEvent) {\n        focusProps.onFocus(event);\n      }\n    };\n    const handleBlur = (event: Event) => {\n      if (event instanceof FocusEvent) {\n        focusProps.onBlur(event);\n      }\n    };\n    const handleKeyDown = (event: Event) => {\n      if (event instanceof KeyboardEvent) {\n        if (\n          event.key === 'Enter' &&\n          !event.metaKey &&\n          !event.ctrlKey &&\n          !readOnly\n        ) {\n          event.preventDefault();\n          viewRef.current.focus();\n        }\n      }\n    };\n    editorScrollContainer?.addEventListener('focus', handleFocus);\n    editorScrollContainer?.addEventListener('blur', handleBlur);\n    editorScrollContainer?.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      editorScrollContainer?.removeEventListener('focus', handleFocus);\n      editorScrollContainer?.removeEventListener('blur', handleBlur);\n      editorScrollContainer?.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [focusProps, readOnly, viewRef]);\n\n  return (\n    <>\n      <div\n        ref={rootRef}\n        className={clsx(\n          styles.editorContainer({\n            focusVisible: isFocusVisible,\n            fullHeight,\n            hasError,\n            lineNumbers: singleLine || hideLineNumbers ? 'hidden' : undefined,\n            readOnly,\n            size,\n          }),\n          inputGroupClassName,\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...behavioralTrackingProps}\n        {...restProps}\n        data-dt-component={dataDtComponent}\n      />\n      <input\n        type=\"text\"\n        id={id}\n        disabled={readOnly}\n        tabIndex={-1}\n        onFocus={() =>\n          // forward focus to the editor\n          // we need the hidden input unfortunately since the editor does not support focus properly\n          viewRef.current.focus()\n        }\n        aria-hidden=\"true\"\n        style={{\n          position: 'absolute',\n          height: 0,\n          width: 0,\n          opacity: 0,\n          margin: 0,\n          padding: 0,\n          border: 0,\n        }}\n      />\n      {(hasError || hint) && (\n        <span\n          aria-live=\"polite\"\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n        >\n          <BaseItem variant={hasError ? 'error' : 'hint'}>{hint}</BaseItem>\n        </span>\n      )}\n    </>\n  );\n});\n\n(\n  BaseCodeEditor as typeof BaseCodeEditor & { displayName: string }\n).displayName = 'BaseCodeEditor';\n"],
+  "mappings": "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",
   "names": ["value"]
 }

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

@@ -1,9 +1,9 @@
 import "./BaseCodeEditor.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var autocompletionTypeTextCSS = "_mvxq7yx-3-1-3";
-var editorContainerCSS = _7a468({ defaultClassName: "_mvxq7yl-3-1-3", variantClassNames: { focusVisible: { true: "_mvxq7ym-3-1-3" }, fullHeight: { true: "_mvxq7yn-3-1-3" }, hasError: { true: "_mvxq7yo-3-1-3" }, lineNumbers: { hidden: "_mvxq7yp-3-1-3", visible: "_mvxq7yq-3-1-3" }, readOnly: { true: "_mvxq7yr-3-1-3" }, size: { "default": "_mvxq7ys-3-1-3", condensed: "_mvxq7yt-3-1-3" } }, defaultVariants: { fullHeight: false, hasError: false, lineNumbers: "visible", readOnly: false, size: "default" }, compoundVariants: [[{ hasError: true, readOnly: false }, "_mvxq7yu-3-1-3"], [{ lineNumbers: "hidden", size: "default" }, "_mvxq7yv-3-1-3"], [{ lineNumbers: "hidden", size: "condensed" }, "_mvxq7yw-3-1-3"]] });
+var autocompletionTypeText = "_mvxq7yx-3-2-0";
+var editorContainer = _7a468({ defaultClassName: "_mvxq7yl-3-2-0", variantClassNames: { focusVisible: { true: "_mvxq7ym-3-2-0" }, fullHeight: { true: "_mvxq7yn-3-2-0" }, hasError: { true: "_mvxq7yo-3-2-0" }, lineNumbers: { hidden: "_mvxq7yp-3-2-0", visible: "_mvxq7yq-3-2-0" }, readOnly: { true: "_mvxq7yr-3-2-0" }, size: { "default": "_mvxq7ys-3-2-0", condensed: "_mvxq7yt-3-2-0" } }, defaultVariants: { fullHeight: false, hasError: false, lineNumbers: "visible", readOnly: false, size: "default" }, compoundVariants: [[{ hasError: true, readOnly: false }, "_mvxq7yu-3-2-0"], [{ lineNumbers: "hidden", size: "default" }, "_mvxq7yv-3-2-0"], [{ lineNumbers: "hidden", size: "condensed" }, "_mvxq7yw-3-2-0"]] });
 export {
-  autocompletionTypeTextCSS,
-  editorContainerCSS
+  autocompletionTypeText,
+  editorContainer
 };
 //# sourceMappingURL=BaseCodeEditor.sty.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/editors/base-code-editor/BaseCodeEditor.css.ts"],
-  "sourcesContent": ["import './BaseCodeEditor.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var autocompletionTypeTextCSS = '_mvxq7yx-3-1-3';\nexport var editorContainerCSS = _7a468({defaultClassName:'_mvxq7yl-3-1-3',variantClassNames:{focusVisible:{true:'_mvxq7ym-3-1-3'},fullHeight:{true:'_mvxq7yn-3-1-3'},hasError:{true:'_mvxq7yo-3-1-3'},lineNumbers:{hidden:'_mvxq7yp-3-1-3',visible:'_mvxq7yq-3-1-3'},readOnly:{true:'_mvxq7yr-3-1-3'},size:{'default':'_mvxq7ys-3-1-3',condensed:'_mvxq7yt-3-1-3'}},defaultVariants:{fullHeight:false,hasError:false,lineNumbers:'visible',readOnly:false,size:'default'},compoundVariants:[[{hasError:true,readOnly:false},'_mvxq7yu-3-1-3'],[{lineNumbers:'hidden',size:'default'},'_mvxq7yv-3-1-3'],[{lineNumbers:'hidden',size:'condensed'},'_mvxq7yw-3-1-3']]});"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,4BAA4B;AAChC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,cAAa,EAAC,MAAK,iBAAgB,GAAE,YAAW,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,GAAE,aAAY,EAAC,QAAO,kBAAiB,SAAQ,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,GAAE,MAAK,EAAC,WAAU,kBAAiB,WAAU,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,YAAW,OAAM,UAAS,OAAM,aAAY,WAAU,UAAS,OAAM,MAAK,UAAS,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,aAAY,UAAS,MAAK,UAAS,GAAE,gBAAgB,GAAE,CAAC,EAAC,aAAY,UAAS,MAAK,YAAW,GAAE,gBAAgB,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import './BaseCodeEditor.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var autocompletionTypeText = '_mvxq7yx-3-2-0';\nexport var editorContainer = _7a468({defaultClassName:'_mvxq7yl-3-2-0',variantClassNames:{focusVisible:{true:'_mvxq7ym-3-2-0'},fullHeight:{true:'_mvxq7yn-3-2-0'},hasError:{true:'_mvxq7yo-3-2-0'},lineNumbers:{hidden:'_mvxq7yp-3-2-0',visible:'_mvxq7yq-3-2-0'},readOnly:{true:'_mvxq7yr-3-2-0'},size:{'default':'_mvxq7ys-3-2-0',condensed:'_mvxq7yt-3-2-0'}},defaultVariants:{fullHeight:false,hasError:false,lineNumbers:'visible',readOnly:false,size:'default'},compoundVariants:[[{hasError:true,readOnly:false},'_mvxq7yu-3-2-0'],[{lineNumbers:'hidden',size:'default'},'_mvxq7yv-3-2-0'],[{lineNumbers:'hidden',size:'condensed'},'_mvxq7yw-3-2-0']]});"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,yBAAyB;AAC7B,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,cAAa,EAAC,MAAK,iBAAgB,GAAE,YAAW,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,GAAE,aAAY,EAAC,QAAO,kBAAiB,SAAQ,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,GAAE,MAAK,EAAC,WAAU,kBAAiB,WAAU,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,YAAW,OAAM,UAAS,OAAM,aAAY,WAAU,UAAS,OAAM,MAAK,UAAS,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,aAAY,UAAS,MAAK,UAAS,GAAE,gBAAgB,GAAE,CAAC,EAAC,aAAY,UAAS,MAAK,YAAW,GAAE,gBAAgB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -34,7 +34,7 @@ import Spacings from "@dynatrace/strato-design-tokens/spacings";
 import Typography from "@dynatrace/strato-design-tokens/typography";
 import { ChevronDownSmallIcon } from "@dynatrace/strato-icons";
 import { Text } from "../../../typography/text/Text.js";
-import { autocompletionTypeTextCSS } from "../BaseCodeEditor.sty.js";
+import * as editorStyles from "../BaseCodeEditor.sty.js";
 import { baseCodeEditorContentTestId, dataTestId } from "../testIds.js";
 import { render } from "../utils/render-node.js";
 const Source = (source) => () => /* @__PURE__ */ jsx(Text, { fontStyle: "code", textStyle: "small-emphasized", style: { width: 30 }, children: source });
@@ -44,7 +44,7 @@ const Type = (type) => () => /* @__PURE__ */ jsx(
     fontStyle: "code",
     textStyle: "base",
     as: "span",
-    className: autocompletionTypeTextCSS,
+    className: editorStyles.autocompletionTypeText,
     children: type
   }
 );
@@ -65,6 +65,18 @@ const getDefaultConfiguration = (intlProps, options = {
         return completion.type ? `cm-completionOption-${completion.type}` : "";
       },
       addToOptions: [
+        {
+          position: 0,
+          render: () => {
+            const marker = document.createElement("span");
+            marker.setAttribute("aria-hidden", "true");
+            marker.style.display = "none";
+            queueMicrotask(() => {
+              marker.parentElement?.setAttribute("data-dt-name", "Suggestion");
+            });
+            return marker;
+          }
+        },
         {
           position: 21,
           render: (completion) => render(
@@ -251,6 +263,9 @@ const getMultipleLinesDefaultConfiguration = (intlProps, options) => {
           return null;
         }
         const { lineNumber, marker } = gutterConfiguration;
+        if (lineNumber < 1 || lineNumber > view.state.doc.lines) {
+          return null;
+        }
         const { from, to } = view.state.doc.line(lineNumber);
         return line.from === from && line.to === to ? new class extends GutterMarker {
           toDOM() {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/editors/base-code-editor/configuration/getDefaultConfigurations.tsx"],
-  "sourcesContent": ["import {\n  autocompletion,\n  closeBrackets,\n  completionStatus,\n} from '@codemirror/autocomplete';\nimport { history } from '@codemirror/commands';\nimport {\n  bracketMatching,\n  foldGutter,\n  syntaxHighlighting,\n} from '@codemirror/language';\nimport { linter } from '@codemirror/lint';\nimport { highlightSelectionMatches } from '@codemirror/search';\nimport { EditorState, Extension } from '@codemirror/state';\nimport {\n  closeHoverTooltips,\n  EditorView,\n  gutter,\n  GutterMarker,\n  hasHoverTooltips,\n  highlightActiveLine,\n  highlightActiveLineGutter,\n  lineNumbers,\n  rectangularSelection,\n  tooltips,\n} from '@codemirror/view';\nimport { classHighlighter } from '@lezer/highlight';\nimport { type ReactNode } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport Borders from '@dynatrace/strato-design-tokens/borders';\nimport BoxShadows from '@dynatrace/strato-design-tokens/box-shadows';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport Typography from '@dynatrace/strato-design-tokens/typography';\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { Text } from '../../../typography/text/Text.js';\nimport type { Suggestion } from '../auto-completion/autocompletion.extension.js';\nimport { autocompletionTypeTextCSS } from '../BaseCodeEditor.sty.js';\nimport { baseCodeEditorContentTestId, dataTestId } from '../testIds.js';\nimport type { IntlProps } from '../utils/render-node.js';\nimport { render } from '../utils/render-node.js';\n\nconst Source = (source: string) => () =>\n  (\n    <Text fontStyle=\"code\" textStyle=\"small-emphasized\" style={{ width: 30 }}>\n      {source}\n    </Text>\n  );\n\nconst Type = (type: string) => () =>\n  (\n    <Text\n      fontStyle=\"code\"\n      textStyle=\"base\"\n      as=\"span\"\n      className={autocompletionTypeTextCSS}\n    >\n      {type}\n    </Text>\n  );\n\n// add options object + required\nexport const getDefaultConfiguration = (\n  intlProps: IntlProps,\n  options: { required: boolean; size: 'default' | 'condensed' } = {\n    required: false,\n    size: 'default',\n  },\n): Extension[] => {\n  const isSizeDefault = options.size === 'default';\n  return [\n    history(),\n    EditorState.allowMultipleSelections.of(true),\n    bracketMatching(),\n    closeBrackets(),\n    autocompletion({\n      closeOnBlur: false,\n      icons: false,\n      optionClass: (completion) => {\n        return completion.type ? `cm-completionOption-${completion.type}` : '';\n      },\n      addToOptions: [\n        {\n          position: 21,\n          render: (completion: Suggestion) =>\n            render(\n              completion,\n              typeof completion.prefix === 'string'\n                ? Source(completion.prefix)\n                : completion.prefix,\n              intlProps,\n            ),\n        },\n        {\n          position: 51,\n          render: (completion: Suggestion) =>\n            render(\n              completion,\n              typeof completion.postfix === 'string'\n                ? Type(completion.postfix)\n                : completion.postfix,\n              intlProps,\n            ),\n        },\n      ],\n    }),\n    linter(() => []), // empty linter to enable theme for linter errors\n    syntaxHighlighting(classHighlighter),\n    rectangularSelection(),\n    highlightActiveLine(),\n    highlightActiveLineGutter(),\n    highlightSelectionMatches(),\n    EditorView.contentAttributes.of({\n      [dataTestId]: baseCodeEditorContentTestId,\n      'aria-haspopup': 'listbox',\n      'aria-required': options.required ? 'true' : 'false',\n    }),\n    EditorView.updateListener.of((update) => {\n      // prevent hover tooltips and autocompletion to be open at the same time\n      // if hover tooltips are visible and the autocompletion was opened\n      // then close the hover tooltips\n      if (\n        hasHoverTooltips(update.state) &&\n        completionStatus(update.state) !== null\n      ) {\n        update.view.dispatch({\n          effects: closeHoverTooltips,\n        });\n      }\n    }),\n    // By default the `DQLEditor` tooltip has `position: fixed` except for when the editor is placed\n    // inside a transformed element. In that case, the tooltip has `position: absolute` and is cut off\n    // in some scenarios due to the new stacking context created by the transformed element.\n    // This extension ensures that the tooltip remains visible / is never cut off.\n    tooltips({ parent: document.body }),\n    EditorView.baseTheme({\n      '.cm-tooltip': {\n        background: `${Colors.Background.Surface.Default} !important`,\n        color: Colors.Text.Neutral.Default,\n        maxWidth: '500px',\n        padding: Spacings.Size4,\n        borderRadius: Borders.Radius.Surface.Subdued,\n        boxShadow: BoxShadows.Surface.Floating.Rest,\n        border: 'none !important',\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete': {\n        width: '500px',\n      },\n\n      '.cm-tooltip-below': {\n        marginTop: ` ${Spacings.Size4}`,\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {\n        whiteSpace: 'normal',\n        textOverflow: 'initial',\n        wordBreak: 'normal',\n        overflowWrap: 'anywhere',\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section:has(+ li[role=\"option\"].cm-empty-option)':\n        {\n          borderBottom: '0 !important',\n        },\n\n      '.cm-tooltip-autocomplete > ul > li[role=\"option\"]': {\n        display: 'flex',\n        flexWrap: 'wrap',\n        justifyContent: 'flex-start',\n        alignItems: 'center',\n        gap: Spacings.Size4,\n        padding: `${Spacings.Size6} ${Spacings.Size12} !important`,\n      },\n\n      '.cm-tooltip-autocomplete > ul > li[role=\"option\"].cm-empty-option': {\n        visibility: 'hidden',\n        height: 0,\n        overflow: 'hidden',\n        fontSize: 0,\n        lineHeight: 0,\n        padding: '0 !important',\n        margin: 0,\n      },\n\n      '.cm-completionLabel': {\n        fontSize: isSizeDefault\n          ? Typography.Code.Base.Default.Size\n          : Typography.Code.Small.Default.Size,\n        fontFamily: isSizeDefault\n          ? Typography.Code.Base.Default.Family\n          : Typography.Code.Small.Default.Family,\n        color: Colors.Text.Neutral.Default,\n        fontWeight: Typography.Code.Base.Default.Weight,\n        lineHeight: Typography.Code.Base.Default.LineHeight,\n        textDecoration: Typography.Code.Base.Default.TextDecoration,\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        textTransform: Typography.Code.Base.Default.TextTransform as any,\n        flexGrow: 3,\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n      },\n\n      '.cm-tooltip.cm-tooltip-hover': {\n        minWidth: 'auto',\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete > ul': {\n        maxHeight: '20em !important',\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {\n        position: 'relative',\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete > ul > li::after': {\n        position: 'absolute',\n        /* Required or else the outline would be cut off by the listbox boundaries */\n        inset: Spacings.Size2,\n        borderRadius: 'inherit',\n        content: ' ',\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete li': {\n        borderRadius: Borders.Radius.Field.Default,\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete li[aria-selected]': {\n        boxShadow: `inset 0 0 0 ${Borders.Width.Emphasized} ${Colors.Border.Neutral.Accent}, inset 0 0 0 calc(${Borders.Width.Emphasized} + 1px) ${Colors.Border.Neutral.Default}`,\n        backgroundColor: 'transparent',\n        color: Colors.Text.Neutral.Default,\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete li[aria-selected]:focus-visible': {\n        outline: 'none',\n      },\n\n      '.cm-tooltip.cm-completionInfo': {\n        padding: `calc(${Spacings.Size4} + ${Spacings.Size6}) ${Spacings.Size16} !important`,\n        marginLeft: Spacings.Size4,\n        marginRight: Spacings.Size4,\n        maxWidth: '500px',\n        minWidth: '200px',\n      },\n\n      '.cm-tooltip-autocomplete > ul > li.cm-completionOption-action > div': {\n        width: '100%',\n      },\n\n      '.cm-completionOption-action .cm-completionLabel': {\n        display: 'none',\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete li:hover': {\n        backgroundColor: `${Colors.Background.Field.Neutral.DefaultHover}`,\n      },\n    }),\n  ];\n};\n\n/**\n * @internal\n */\nexport const getSingleLineDefaultConfiguration = (\n  intlProps: IntlProps,\n  options: { required: boolean; size: 'default' | 'condensed' },\n): Extension[] => {\n  return [\n    EditorState.transactionFilter.of((tr) => (tr.newDoc.lines > 1 ? [] : [tr])),\n    ...getDefaultConfiguration(intlProps, options),\n  ];\n};\n\n/**\n * @public\n */\nexport type GutterConfiguration = {\n  lineNumber: number;\n  marker: ReactNode;\n};\n\n/**\n * @internal\n */\nexport const getMultipleLinesDefaultConfiguration = (\n  intlProps: IntlProps,\n  options: {\n    gutterConfiguration?: GutterConfiguration;\n    required: boolean;\n    size: 'default' | 'condensed';\n  },\n): Extension[] => {\n  const { required, gutterConfiguration, size } = options;\n\n  return [\n    lineNumbers(),\n    foldGutter({\n      markerDOM: (open) => {\n        const element = document.createElement('div');\n        element.style.display = 'flex';\n        element.style.alignItems = 'center';\n        element.style.marginTop = '2px';\n        element.style.transform = 'rotate(-90deg)';\n        element.style.cursor = 'pointer';\n        element.style.minWidth = '16px';\n        element.style.minHeight = '16px';\n\n        if (open) {\n          element.style.transform = 'rotate(0deg)';\n        }\n\n        const root = createRoot(element);\n        root.render(\n          <ChevronDownSmallIcon\n            size=\"small\"\n            style={{ width: Spacings.Size16, height: Spacings.Size16 }}\n          />,\n        );\n\n        return element;\n      },\n    }),\n    gutter({\n      lineMarker: (view, line) => {\n        const length = view.state.doc.length;\n        if (length === 0 || !gutterConfiguration) {\n          return null;\n        }\n        const { lineNumber, marker } = gutterConfiguration;\n        const { from, to } = view.state.doc.line(lineNumber);\n        return line.from === from && line.to === to\n          ? new (class extends GutterMarker {\n              toDOM() {\n                const element = document.createElement('div');\n                const root = createRoot(element);\n                root.render(marker);\n                return element;\n              }\n            })()\n          : null;\n      },\n    }),\n    ...getDefaultConfiguration(intlProps, { required, size }),\n  ];\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  autocompletion,\n  closeBrackets,\n  completionStatus,\n} from '@codemirror/autocomplete';\nimport { history } from '@codemirror/commands';\nimport {\n  bracketMatching,\n  foldGutter,\n  syntaxHighlighting,\n} from '@codemirror/language';\nimport { linter } from '@codemirror/lint';\nimport { highlightSelectionMatches } from '@codemirror/search';\nimport { EditorState, Extension } from '@codemirror/state';\nimport {\n  closeHoverTooltips,\n  EditorView,\n  gutter,\n  GutterMarker,\n  hasHoverTooltips,\n  highlightActiveLine,\n  highlightActiveLineGutter,\n  lineNumbers,\n  rectangularSelection,\n  tooltips,\n} from '@codemirror/view';\nimport { classHighlighter } from '@lezer/highlight';\nimport { type ReactNode } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport Borders from '@dynatrace/strato-design-tokens/borders';\nimport BoxShadows from '@dynatrace/strato-design-tokens/box-shadows';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport Typography from '@dynatrace/strato-design-tokens/typography';\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { Text } from '../../../typography/text/Text.js';\nimport type { Suggestion } from '../auto-completion/autocompletion.extension.js';\nimport * as editorStyles from '../BaseCodeEditor.sty.js';\nimport { baseCodeEditorContentTestId, dataTestId } from '../testIds.js';\nimport type { IntlProps } from '../utils/render-node.js';\nimport { render } from '../utils/render-node.js';\n\nconst Source = (source: string) => () =>\n  (\n    <Text fontStyle=\"code\" textStyle=\"small-emphasized\" style={{ width: 30 }}>\n      {source}\n    </Text>\n  );\n\nconst Type = (type: string) => () =>\n  (\n    <Text\n      fontStyle=\"code\"\n      textStyle=\"base\"\n      as=\"span\"\n      className={editorStyles.autocompletionTypeText}\n    >\n      {type}\n    </Text>\n  );\n\n// add options object + required\nexport const getDefaultConfiguration = (\n  intlProps: IntlProps,\n  options: { required: boolean; size: 'default' | 'condensed' } = {\n    required: false,\n    size: 'default',\n  },\n): Extension[] => {\n  const isSizeDefault = options.size === 'default';\n  return [\n    history(),\n    EditorState.allowMultipleSelections.of(true),\n    bracketMatching(),\n    closeBrackets(),\n    autocompletion({\n      closeOnBlur: false,\n      icons: false,\n      optionClass: (completion) => {\n        return completion.type ? `cm-completionOption-${completion.type}` : '';\n      },\n      addToOptions: [\n        {\n          position: 0,\n          render: (): Node => {\n            const marker = document.createElement('span');\n            marker.setAttribute('aria-hidden', 'true');\n            marker.style.display = 'none';\n            // At the time `render` is called by CodeMirror, the returned node has not yet been\n            // inserted into the DOM, so `marker.parentElement` is still `null`.\n            // `queueMicrotask` defers the attribute assignment to the next microtask checkpoint,\n            // by which point CodeMirror has already appended the node and the parent `<li>` element\n            // is available. This lets us tag each suggestion row with `data-dt-name` for\n            // behavior tracking.\n            queueMicrotask(() => {\n              marker.parentElement?.setAttribute('data-dt-name', 'Suggestion');\n            });\n            return marker;\n          },\n        },\n        {\n          position: 21,\n          render: (completion: Suggestion) =>\n            render(\n              completion,\n              typeof completion.prefix === 'string'\n                ? Source(completion.prefix)\n                : completion.prefix,\n              intlProps,\n            ),\n        },\n        {\n          position: 51,\n          render: (completion: Suggestion) =>\n            render(\n              completion,\n              typeof completion.postfix === 'string'\n                ? Type(completion.postfix)\n                : completion.postfix,\n              intlProps,\n            ),\n        },\n      ],\n    }),\n    linter(() => []), // empty linter to enable theme for linter errors\n    syntaxHighlighting(classHighlighter),\n    rectangularSelection(),\n    highlightActiveLine(),\n    highlightActiveLineGutter(),\n    highlightSelectionMatches(),\n    EditorView.contentAttributes.of({\n      [dataTestId]: baseCodeEditorContentTestId,\n      'aria-haspopup': 'listbox',\n      'aria-required': options.required ? 'true' : 'false',\n    }),\n    EditorView.updateListener.of((update) => {\n      // prevent hover tooltips and autocompletion to be open at the same time\n      // if hover tooltips are visible and the autocompletion was opened\n      // then close the hover tooltips\n      if (\n        hasHoverTooltips(update.state) &&\n        completionStatus(update.state) !== null\n      ) {\n        update.view.dispatch({\n          effects: closeHoverTooltips,\n        });\n      }\n    }),\n    // By default the `DQLEditor` tooltip has `position: fixed` except for when the editor is placed\n    // inside a transformed element. In that case, the tooltip has `position: absolute` and is cut off\n    // in some scenarios due to the new stacking context created by the transformed element.\n    // This extension ensures that the tooltip remains visible / is never cut off.\n    tooltips({ parent: document.body }),\n    EditorView.baseTheme({\n      '.cm-tooltip': {\n        background: `${Colors.Background.Surface.Default} !important`,\n        color: Colors.Text.Neutral.Default,\n        maxWidth: '500px',\n        padding: Spacings.Size4,\n        borderRadius: Borders.Radius.Surface.Subdued,\n        boxShadow: BoxShadows.Surface.Floating.Rest,\n        border: 'none !important',\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete': {\n        width: '500px',\n      },\n\n      '.cm-tooltip-below': {\n        marginTop: ` ${Spacings.Size4}`,\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {\n        whiteSpace: 'normal',\n        textOverflow: 'initial',\n        wordBreak: 'normal',\n        overflowWrap: 'anywhere',\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section:has(+ li[role=\"option\"].cm-empty-option)':\n        {\n          borderBottom: '0 !important',\n        },\n\n      '.cm-tooltip-autocomplete > ul > li[role=\"option\"]': {\n        display: 'flex',\n        flexWrap: 'wrap',\n        justifyContent: 'flex-start',\n        alignItems: 'center',\n        gap: Spacings.Size4,\n        padding: `${Spacings.Size6} ${Spacings.Size12} !important`,\n      },\n\n      '.cm-tooltip-autocomplete > ul > li[role=\"option\"].cm-empty-option': {\n        visibility: 'hidden',\n        height: 0,\n        overflow: 'hidden',\n        fontSize: 0,\n        lineHeight: 0,\n        padding: '0 !important',\n        margin: 0,\n      },\n\n      '.cm-completionLabel': {\n        fontSize: isSizeDefault\n          ? Typography.Code.Base.Default.Size\n          : Typography.Code.Small.Default.Size,\n        fontFamily: isSizeDefault\n          ? Typography.Code.Base.Default.Family\n          : Typography.Code.Small.Default.Family,\n        color: Colors.Text.Neutral.Default,\n        fontWeight: Typography.Code.Base.Default.Weight,\n        lineHeight: Typography.Code.Base.Default.LineHeight,\n        textDecoration: Typography.Code.Base.Default.TextDecoration,\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        textTransform: Typography.Code.Base.Default.TextTransform as any,\n        flexGrow: 3,\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n      },\n\n      '.cm-tooltip.cm-tooltip-hover': {\n        minWidth: 'auto',\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete > ul': {\n        maxHeight: '20em !important',\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {\n        position: 'relative',\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete > ul > li::after': {\n        position: 'absolute',\n        /* Required or else the outline would be cut off by the listbox boundaries */\n        inset: Spacings.Size2,\n        borderRadius: 'inherit',\n        content: ' ',\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete li': {\n        borderRadius: Borders.Radius.Field.Default,\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete li[aria-selected]': {\n        boxShadow: `inset 0 0 0 ${Borders.Width.Emphasized} ${Colors.Border.Neutral.Accent}, inset 0 0 0 calc(${Borders.Width.Emphasized} + 1px) ${Colors.Border.Neutral.Default}`,\n        backgroundColor: 'transparent',\n        color: Colors.Text.Neutral.Default,\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete li[aria-selected]:focus-visible': {\n        outline: 'none',\n      },\n\n      '.cm-tooltip.cm-completionInfo': {\n        padding: `calc(${Spacings.Size4} + ${Spacings.Size6}) ${Spacings.Size16} !important`,\n        marginLeft: Spacings.Size4,\n        marginRight: Spacings.Size4,\n        maxWidth: '500px',\n        minWidth: '200px',\n      },\n\n      '.cm-tooltip-autocomplete > ul > li.cm-completionOption-action > div': {\n        width: '100%',\n      },\n\n      '.cm-completionOption-action .cm-completionLabel': {\n        display: 'none',\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete li:hover': {\n        backgroundColor: `${Colors.Background.Field.Neutral.DefaultHover}`,\n      },\n    }),\n  ];\n};\n\n/**\n * @internal\n */\nexport const getSingleLineDefaultConfiguration = (\n  intlProps: IntlProps,\n  options: { required: boolean; size: 'default' | 'condensed' },\n): Extension[] => {\n  return [\n    EditorState.transactionFilter.of((tr) => (tr.newDoc.lines > 1 ? [] : [tr])),\n    ...getDefaultConfiguration(intlProps, options),\n  ];\n};\n\n/**\n * @public\n */\nexport type GutterConfiguration = {\n  lineNumber: number;\n  marker: ReactNode;\n};\n\n/**\n * @internal\n */\nexport const getMultipleLinesDefaultConfiguration = (\n  intlProps: IntlProps,\n  options: {\n    gutterConfiguration?: GutterConfiguration;\n    required: boolean;\n    size: 'default' | 'condensed';\n  },\n): Extension[] => {\n  const { required, gutterConfiguration, size } = options;\n\n  return [\n    lineNumbers(),\n    foldGutter({\n      markerDOM: (open) => {\n        const element = document.createElement('div');\n        element.style.display = 'flex';\n        element.style.alignItems = 'center';\n        element.style.marginTop = '2px';\n        element.style.transform = 'rotate(-90deg)';\n        element.style.cursor = 'pointer';\n        element.style.minWidth = '16px';\n        element.style.minHeight = '16px';\n\n        if (open) {\n          element.style.transform = 'rotate(0deg)';\n        }\n\n        const root = createRoot(element);\n        root.render(\n          <ChevronDownSmallIcon\n            size=\"small\"\n            style={{ width: Spacings.Size16, height: Spacings.Size16 }}\n          />,\n        );\n\n        return element;\n      },\n    }),\n    gutter({\n      lineMarker: (view, line) => {\n        // Skip rendering when the editor is empty or no gutter configuration was provided.\n        const length = view.state.doc.length;\n        if (length === 0 || !gutterConfiguration) {\n          return null;\n        }\n\n        const { lineNumber, marker } = gutterConfiguration;\n\n        // Guard against out-of-bounds line numbers (e.g. 0, negative, or beyond\n        // the last line). `view.state.doc.line()` below would throw for such values.\n        if (lineNumber < 1 || lineNumber > view.state.doc.lines) {\n          return null;\n        }\n\n        // Resolve the character range of the target line and only render the\n        // marker on the gutter cell that belongs to exactly that line.\n        const { from, to } = view.state.doc.line(lineNumber);\n        return line.from === from && line.to === to\n          ? new (class extends GutterMarker {\n              toDOM() {\n                const element = document.createElement('div');\n                const root = createRoot(element);\n                root.render(marker);\n                return element;\n              }\n            })()\n          : null;\n      },\n    }),\n    ...getDefaultConfiguration(intlProps, { required, size }),\n  ];\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/editors/code-editor/CodeEditor.js

@@ -23,6 +23,7 @@ const CodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     onChange,
     onBlur,
     onFocus,
+    gutterConfiguration,
     size = "default",
     required = false,
     className: consumerClassName,
@@ -57,6 +58,7 @@ const CodeEditor = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       configuration: config,
       onBlur,
       onFocus,
+      gutterConfiguration,
       size,
       required,
       className: consumerClassName,

package/esm/editors/code-editor/CodeEditor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/editors/code-editor/CodeEditor.tsx"],
-  "sourcesContent": ["import { Language } from '@codemirror/language';\nimport { Extension } from '@codemirror/state';\nimport { forwardRef, useMemo } from 'react';\n\nimport { codeEditorLanguages } from './languages/languages.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 { AutocompleteProvider } from '../base-code-editor/auto-completion/autocompletion.extension.js';\nimport type { ListAutocompletionConfig } from '../base-code-editor/auto-completion/list/list-autocompletion-types.js';\nimport { BaseCodeEditor } from '../base-code-editor/BaseCodeEditor.js';\nimport type { EditorLanguageConfiguration } from '../base-code-editor/configuration/configuration.js';\nimport type { GutterConfiguration } from '../base-code-editor/configuration/getDefaultConfigurations.js';\n\nconst COMPONENT_NAME = 'CodeEditor';\n\n/**\n * @public\n */\nexport interface CodeEditorProps\n  extends FormControlStateProps,\n    StylingProps,\n    DataTestId,\n    AriaLabelingProps,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** The language for syntax highlighting and autocompletion.\n   * @defaultValue 'other'\n   */\n  language?: 'json' | 'js' | 'jsx' | 'ts' | 'tsx' | 'md' | 'yaml' | 'other';\n  /** The ID for the DOM element. */\n  id?: string;\n  /** The value (i.e. contents) of the editor.\n   * @defaultValue ''\n   */\n  value?: string;\n  /** Callback that is called when the value in the editor 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 code 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  /**\n   * Provides the gutter configuration to display a gutter next to the fold gutter\n   */\n  gutterConfiguration?: GutterConfiguration;\n\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 CodeEditorRef = {\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 `CodeEditor` provides a text input field that is specifically designed for editing code.\n * It further offers properties to configure e.g. syntax highlighting, spell checks or line wrapping.\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 CodeEditor = /* @__PURE__ */ forwardRef<\n  CodeEditorRef,\n  CodeEditorProps\n>((props, forwardedRef) => {\n  const {\n    id,\n    controlState,\n    defaultFolding,\n    folding,\n    onFoldingChange,\n    spellCheck = false,\n    language = 'other',\n    placeholder,\n    readOnly = false,\n    lineWrap = false,\n    fullHeight = false,\n    value = '',\n    onChange,\n    onBlur,\n    onFocus,\n    size = 'default',\n    required = false,\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 config = useMemo((): EditorLanguageConfiguration => {\n    return getLanguageConfig(codeEditorLanguages[language], readOnly);\n  }, [language, readOnly]);\n\n  return (\n    <BaseCodeEditor\n      id={id}\n      ref={forwardedRef}\n      placeholder={placeholder}\n      controlState={controlState}\n      readOnly={readOnly}\n      folding={folding}\n      defaultFolding={defaultFolding}\n      onFoldingChange={onFoldingChange}\n      lineWrap={lineWrap}\n      value={value}\n      onChange={onChange}\n      spellCheck={spellCheck}\n      fullHeight={fullHeight}\n      configuration={config}\n      onBlur={onBlur}\n      onFocus={onFocus}\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\n/**\n * If readOnly is true then there is no autocompletion.\n * @param languageConfig - standard language config\n * @param readOnly - whether the editor is readOnly\n * @returns new config with appropriate values\n * @internal\n */\nexport function getLanguageConfig(\n  languageConfig: EditorLanguageConfiguration,\n  readOnly: boolean,\n): {\n  language: Language | undefined;\n  autocompleteOptions:\n    | {\n        activateOnTyping: boolean;\n        providers: (AutocompleteProvider | ListAutocompletionConfig)[];\n      }\n    | undefined;\n  extendWith: readonly Extension[] | undefined;\n} {\n  return {\n    language: languageConfig.language,\n    autocompleteOptions: readOnly\n      ? undefined\n      : {\n          activateOnTyping: true,\n          providers: languageConfig.autocompleteOptions?.providers ?? [],\n        },\n    extendWith: languageConfig.extendWith,\n  };\n}\n\n(CodeEditor as typeof CodeEditor & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AAoJI;AAlJJ,SAAS,YAAY,eAAe;AAEpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AASpC,SAAS,sBAAsB;AAI/B,MAAM,iBAAiB;AAwFhB,MAAM,aAA6B,2BAGxC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,WAAW;AAAA,IACX,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,SAAS,QAAQ,MAAmC;AACxD,WAAO,kBAAkB,oBAAoB,QAAQ,GAAG,QAAQ;AAAA,EAClE,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,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;AASM,SAAS,kBACd,gBACA,UAUA;AACA,SAAO;AAAA,IACL,UAAU,eAAe;AAAA,IACzB,qBAAqB,WACjB,SACA;AAAA,MACE,kBAAkB;AAAA,MAClB,WAAW,eAAe,qBAAqB,aAAa,CAAC;AAAA,IAC/D;AAAA,IACJ,YAAY,eAAe;AAAA,EAC7B;AACF;AAEC,WAA2D,cAC1D;",
+  "sourcesContent": ["import { Language } from '@codemirror/language';\nimport { Extension } from '@codemirror/state';\nimport { forwardRef, useMemo } from 'react';\n\nimport { codeEditorLanguages } from './languages/languages.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 { AutocompleteProvider } from '../base-code-editor/auto-completion/autocompletion.extension.js';\nimport type { ListAutocompletionConfig } from '../base-code-editor/auto-completion/list/list-autocompletion-types.js';\nimport { BaseCodeEditor } from '../base-code-editor/BaseCodeEditor.js';\nimport type { EditorLanguageConfiguration } from '../base-code-editor/configuration/configuration.js';\nimport type { GutterConfiguration } from '../base-code-editor/configuration/getDefaultConfigurations.js';\n\nconst COMPONENT_NAME = 'CodeEditor';\n\n/**\n * @public\n */\nexport interface CodeEditorProps\n  extends FormControlStateProps,\n    StylingProps,\n    DataTestId,\n    AriaLabelingProps,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * The language for syntax highlighting and autocompletion.\n   * @defaultValue 'other'\n   */\n  language?: 'json' | 'js' | 'jsx' | 'ts' | 'tsx' | 'md' | 'yaml' | 'other';\n  /**\n   * The ID for the DOM element.\n   */\n  id?: string;\n  /**\n   * The contents of the editor.\n   * @defaultValue ''\n   */\n  value?: string;\n  /**\n   * Callback that is called when the value in the editor 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 code 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   * Provides the gutter configuration to display a marker next to the fold gutter.\n   */\n  gutterConfiguration?: GutterConfiguration;\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 CodeEditorRef = {\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 `CodeEditor` provides a text input field that is specifically designed for editing code.\n * It further offers properties to configure e.g. syntax highlighting, spell checks or line wrapping.\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 CodeEditor = /* @__PURE__ */ forwardRef<\n  CodeEditorRef,\n  CodeEditorProps\n>((props, forwardedRef) => {\n  const {\n    id,\n    controlState,\n    defaultFolding,\n    folding,\n    onFoldingChange,\n    spellCheck = false,\n    language = 'other',\n    placeholder,\n    readOnly = false,\n    lineWrap = false,\n    fullHeight = false,\n    value = '',\n    onChange,\n    onBlur,\n    onFocus,\n    gutterConfiguration,\n    size = 'default',\n    required = false,\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 config = useMemo((): EditorLanguageConfiguration => {\n    return getLanguageConfig(codeEditorLanguages[language], readOnly);\n  }, [language, readOnly]);\n\n  return (\n    <BaseCodeEditor\n      id={id}\n      ref={forwardedRef}\n      placeholder={placeholder}\n      controlState={controlState}\n      readOnly={readOnly}\n      folding={folding}\n      defaultFolding={defaultFolding}\n      onFoldingChange={onFoldingChange}\n      lineWrap={lineWrap}\n      value={value}\n      onChange={onChange}\n      spellCheck={spellCheck}\n      fullHeight={fullHeight}\n      configuration={config}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      gutterConfiguration={gutterConfiguration}\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\n/**\n * If readOnly is true then there is no autocompletion.\n * @param languageConfig - standard language config\n * @param readOnly - whether the editor is readOnly\n * @returns new config with appropriate values\n * @internal\n */\nexport function getLanguageConfig(\n  languageConfig: EditorLanguageConfiguration,\n  readOnly: boolean,\n): {\n  language: Language | undefined;\n  autocompleteOptions:\n    | {\n        activateOnTyping: boolean;\n        providers: (AutocompleteProvider | ListAutocompletionConfig)[];\n      }\n    | undefined;\n  extendWith: readonly Extension[] | undefined;\n} {\n  return {\n    language: languageConfig.language,\n    autocompleteOptions: readOnly\n      ? undefined\n      : {\n          activateOnTyping: true,\n          providers: languageConfig.autocompleteOptions?.providers ?? [],\n        },\n    extendWith: languageConfig.extendWith,\n  };\n}\n\n(CodeEditor as typeof CodeEditor & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AAwKI;AAtKJ,SAAS,YAAY,eAAe;AAEpC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AASpC,SAAS,sBAAsB;AAI/B,MAAM,iBAAiB;AA2GhB,MAAM,aAA6B,2BAGxC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,WAAW;AAAA,IACX,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,SAAS,QAAQ,MAAmC;AACxD,WAAO,kBAAkB,oBAAoB,QAAQ,GAAG,QAAQ;AAAA,EAClE,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,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;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;AASM,SAAS,kBACd,gBACA,UAUA;AACA,SAAO;AAAA,IACL,UAAU,eAAe;AAAA,IACzB,qBAAqB,WACjB,SACA;AAAA,MACE,kBAAkB;AAAA,MAClB,WAAW,eAAe,qBAAqB,aAAa,CAAC;AAAA,IAC/D;AAAA,IACJ,YAAY,eAAe;AAAA,EAC7B;AACF;AAEC,WAA2D,cAC1D;",
   "names": []
 }

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

@@ -18,7 +18,7 @@ const DocumentationLink = ({
   suggestionPart
 }) => {
   const docUrl = generateDocumentationLink(suggestionPart);
-  return docUrl ? /* @__PURE__ */ jsx(ExternalLink, { href: docUrl, children: "Learn more" }) : null;
+  return docUrl ? /* @__PURE__ */ jsx(ExternalLink, { href: docUrl, "data-dt-name": "LearnMoreLink", children: "Learn more" }) : null;
 };
 export {
   DocumentationLink,

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 ? <ExternalLink href={docUrl}>Learn more</ExternalLink> : null;\n};\n"],
-  "mappings": "AAyCkB;AAvClB,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,SAAS,oBAAC,gBAAa,MAAM,QAAQ,wBAAU,IAAkB;AAC1E;",
+  "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=\"LearnMoreLink\">\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,iBAAgB,wBAEzD,IACE;AACN;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._yhio8f0-3-1-3 {
+._yhio8f0-3-2-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-1-3";
+var suggestionPartSectionInfoCSS = "_yhio8f0-3-2-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-1-3';"],
+  "sourcesContent": ["import './SuggestionPart.css';\nexport var suggestionPartSectionInfoCSS = '_yhio8f0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,+BAA+B;",
   "names": []
 }

package/esm/filters/filter/MoreMenu.js

@@ -100,6 +100,7 @@ const MoreMenu = ({ children }) => {
         multiple: true,
         clearable: true,
         ref: selectRef,
+        "data-dt-name": "AddFilter",
         children: [
           /* @__PURE__ */ jsx(Select.CustomTrigger, { children: /* @__PURE__ */ jsxs(Button, { as: "div", id: labelId, className: focusClassName, children: [
             label,

package/esm/filters/filter/MoreMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/filter/MoreMenu.tsx"],
-  "sourcesContent": ["import {\n  type ReactNode,\n  useMemo,\n  useRef,\n  Children,\n  type ReactElement,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { useFilterBarContext } from './hooks/useFilterBarContext.js';\nimport { Item } from './Item.js';\nimport { FilterBarActions } from './types/filter-state.types.js';\nimport { getTextFromNode } from './utils/getTextFromNode.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Select } from '../../forms/select/Select.js';\nimport { SelectMultiValue } from '../../forms/select/types.js';\nimport { FormControlWithOverlayRef } from '../../forms/shared-types.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\ntype MoreMenuProps = {\n  children: ReactNode[];\n};\n\n/**\n * The moreMenu allows to hide and show further filters. All filterBar.Items inside are hidden initially.\n * @internal\n */\nexport const MoreMenu = ({ children }: MoreMenuProps) => {\n  const intl = useIntl();\n  const label = intl.formatMessage({\n    defaultMessage: 'Add filter',\n    id: '+BUznwQEJTiILiAa',\n    description:\n      'Message to display by default for adding more Filters to the FilterBar.',\n  });\n\n  const { focusClassName, focusProps } = useFocusRing({\n    color: 'neutral',\n    focusWithin: true,\n  });\n\n  const { dispatch, setLastAddedItem, state } = useFilterBarContext(),\n    { itemsPinnedState } = state;\n\n  const selectRef = useRef<FormControlWithOverlayRef | null>(null);\n\n  const allPinnableFilters = useMemo<\n    Record<string, { elem: ReactElement; label: string }>\n  >(() => {\n    const temp: Record<string, { elem: ReactElement; label: string }> = {};\n    for (const child of Children.toArray(children)) {\n      if (isSlot(child, Item)) {\n        const uniqueName: string = child.props.name;\n        temp[uniqueName] = {\n          elem: child,\n          label: getTextFromNode(child.props.label, intl, uniqueName),\n        };\n      }\n    }\n    return temp;\n  }, [children, intl]);\n\n  const optionalPinnedItems = useMemo(\n    () =>\n      Object.entries(itemsPinnedState || {}).reduce((keys, [key, value]) => {\n        if (value === 'pinned-optional') {\n          keys.push(key);\n        }\n        return keys;\n      }, [] as Array<string | number>),\n    [itemsPinnedState],\n  );\n\n  const handleSelectChange = (newValues: SelectMultiValue<string | number>) => {\n    setLastAddedItem(null);\n\n    const union = new Set([\n      ...(newValues ?? []),\n      ...(optionalPinnedItems || []),\n    ]);\n\n    // Check for newly selected items and pin those\n    if (\n      !optionalPinnedItems ||\n      (newValues && optionalPinnedItems.length < newValues.length)\n    ) {\n      const filtersToPin = [...union].filter(\n        (key) => !optionalPinnedItems?.includes(key),\n      );\n\n      selectRef?.current?.close();\n      filtersToPin?.length && setLastAddedItem(filtersToPin[0]?.toString());\n\n      dispatch({\n        type: FilterBarActions.PIN,\n        payload: {\n          keys: filtersToPin,\n        },\n      });\n\n      return;\n    }\n\n    // Check for newly unselected items and unpin those\n    if (!newValues) {\n      dispatch({\n        type: FilterBarActions.UNPIN,\n        payload: {\n          keys: optionalPinnedItems ?? [],\n        },\n      });\n    } else if (\n      optionalPinnedItems &&\n      optionalPinnedItems.length > newValues.length\n    ) {\n      const keys = [...union].filter((key) => !newValues?.includes(key));\n\n      dispatch({\n        type: FilterBarActions.UNPIN,\n        payload: { keys },\n      });\n    }\n  };\n\n  const labelId = useId();\n\n  return (\n    <>\n      {optionalPinnedItems.map(\n        (key) =>\n          allPinnableFilters[key] && (\n            <Flex key={key} gap={2} alignItems=\"flex-end\">\n              {allPinnableFilters[key].elem}\n            </Flex>\n          ),\n      )}\n      <div style={{ maxWidth: '100%' }} {...focusProps}>\n        <Select\n          value={optionalPinnedItems}\n          onChange={handleSelectChange}\n          id=\"user-select\"\n          multiple={true}\n          clearable\n          ref={selectRef}\n        >\n          <Select.CustomTrigger>\n            <Button as=\"div\" id={labelId} className={focusClassName}>\n              {label}\n              <Button.Suffix>\n                <ChevronDownSmallIcon />\n              </Button.Suffix>\n            </Button>\n          </Select.CustomTrigger>\n          <Select.Content width=\"fit-content\">\n            <Select.Filter />\n            {Object.keys(allPinnableFilters).map((key) => (\n              <Select.Option value={key} key={key}>\n                {allPinnableFilters[key].label}\n              </Select.Option>\n            ))}\n          </Select.Content>\n        </Select>\n      </div>\n    </>\n  );\n};\n\n(MoreMenu as typeof MoreMenu & { displayName: string }).displayName =\n  'FilterBar.MoreMenu';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type ReactNode,\n  useMemo,\n  useRef,\n  Children,\n  type ReactElement,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { useFilterBarContext } from './hooks/useFilterBarContext.js';\nimport { Item } from './Item.js';\nimport { FilterBarActions } from './types/filter-state.types.js';\nimport { getTextFromNode } from './utils/getTextFromNode.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Select } from '../../forms/select/Select.js';\nimport { SelectMultiValue } from '../../forms/select/types.js';\nimport { FormControlWithOverlayRef } from '../../forms/shared-types.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\ntype MoreMenuProps = {\n  children: ReactNode[];\n};\n\n/**\n * The moreMenu allows to hide and show further filters. All filterBar.Items inside are hidden initially.\n * @internal\n */\nexport const MoreMenu = ({ children }: MoreMenuProps) => {\n  const intl = useIntl();\n  const label = intl.formatMessage({\n    defaultMessage: 'Add filter',\n    id: '+BUznwQEJTiILiAa',\n    description:\n      'Message to display by default for adding more Filters to the FilterBar.',\n  });\n\n  const { focusClassName, focusProps } = useFocusRing({\n    color: 'neutral',\n    focusWithin: true,\n  });\n\n  const { dispatch, setLastAddedItem, state } = useFilterBarContext(),\n    { itemsPinnedState } = state;\n\n  const selectRef = useRef<FormControlWithOverlayRef | null>(null);\n\n  const allPinnableFilters = useMemo<\n    Record<string, { elem: ReactElement; label: string }>\n  >(() => {\n    const temp: Record<string, { elem: ReactElement; label: string }> = {};\n    for (const child of Children.toArray(children)) {\n      if (isSlot(child, Item)) {\n        const uniqueName: string = child.props.name;\n        temp[uniqueName] = {\n          elem: child,\n          label: getTextFromNode(child.props.label, intl, uniqueName),\n        };\n      }\n    }\n    return temp;\n  }, [children, intl]);\n\n  const optionalPinnedItems = useMemo(\n    () =>\n      Object.entries(itemsPinnedState || {}).reduce((keys, [key, value]) => {\n        if (value === 'pinned-optional') {\n          keys.push(key);\n        }\n        return keys;\n      }, [] as Array<string | number>),\n    [itemsPinnedState],\n  );\n\n  const handleSelectChange = (newValues: SelectMultiValue<string | number>) => {\n    setLastAddedItem(null);\n\n    const union = new Set([\n      ...(newValues ?? []),\n      ...(optionalPinnedItems || []),\n    ]);\n\n    // Check for newly selected items and pin those\n    if (\n      !optionalPinnedItems ||\n      (newValues && optionalPinnedItems.length < newValues.length)\n    ) {\n      const filtersToPin = [...union].filter(\n        (key) => !optionalPinnedItems?.includes(key),\n      );\n\n      selectRef?.current?.close();\n      filtersToPin?.length && setLastAddedItem(filtersToPin[0]?.toString());\n\n      dispatch({\n        type: FilterBarActions.PIN,\n        payload: {\n          keys: filtersToPin,\n        },\n      });\n\n      return;\n    }\n\n    // Check for newly unselected items and unpin those\n    if (!newValues) {\n      dispatch({\n        type: FilterBarActions.UNPIN,\n        payload: {\n          keys: optionalPinnedItems ?? [],\n        },\n      });\n    } else if (\n      optionalPinnedItems &&\n      optionalPinnedItems.length > newValues.length\n    ) {\n      const keys = [...union].filter((key) => !newValues?.includes(key));\n\n      dispatch({\n        type: FilterBarActions.UNPIN,\n        payload: { keys },\n      });\n    }\n  };\n\n  const labelId = useId();\n\n  return (\n    <>\n      {optionalPinnedItems.map(\n        (key) =>\n          allPinnableFilters[key] && (\n            <Flex key={key} gap={2} alignItems=\"flex-end\">\n              {allPinnableFilters[key].elem}\n            </Flex>\n          ),\n      )}\n      <div style={{ maxWidth: '100%' }} {...focusProps}>\n        <Select\n          value={optionalPinnedItems}\n          onChange={handleSelectChange}\n          id=\"user-select\"\n          multiple={true}\n          clearable\n          ref={selectRef}\n          data-dt-name=\"AddFilter\"\n        >\n          <Select.CustomTrigger>\n            <Button as=\"div\" id={labelId} className={focusClassName}>\n              {label}\n              <Button.Suffix>\n                <ChevronDownSmallIcon />\n              </Button.Suffix>\n            </Button>\n          </Select.CustomTrigger>\n          <Select.Content width=\"fit-content\">\n            <Select.Filter />\n            {Object.keys(allPinnableFilters).map((key) => (\n              <Select.Option value={key} key={key}>\n                {allPinnableFilters[key].label}\n              </Select.Option>\n            ))}\n          </Select.Content>\n        </Select>\n      </div>\n    </>\n  );\n};\n\n(MoreMenu as typeof MoreMenu & { displayName: string }).displayName =\n  'FilterBar.MoreMenu';\n"],
+  "mappings": "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",
   "names": []
 }