@dynatrace/strato-components 3.12.2 → 3.13.0

package/esm/editors/base-code-editor/baseCodeEditorMessages.js

@@ -29,6 +29,26 @@ const BASE_CODE_EDITOR_MESSAGES = defineMessages({
     defaultMessage: "info",
     id: "IwwqXNaWxNjk1Su9",
     description: "Severity label for an info diagnostic, used in screen reader announcements."
+  },
+  offScreenErrorCount: {
+    defaultMessage: "{count, plural, one {# error} other {# errors}}",
+    id: "OBIv2/oXhdnWDW/Z",
+    description: "Visible label on a pill button indicating how many error-severity diagnostics are scrolled out of view. {count} is the number of errors."
+  },
+  offScreenErrorCountCapped: {
+    defaultMessage: "99+ errors",
+    id: "IAzId4iIfCf1TztP",
+    description: "Visible label on a pill button when more than 99 error-severity diagnostics are scrolled out of view."
+  },
+  offScreenErrorsAboveLabel: {
+    defaultMessage: "{count, plural, one {# error} other {# errors}} above the visible area. Activate to scroll to the nearest one.",
+    id: "NHGVmhAtHDO9Lh7I",
+    description: "Accessible label for the top pill button. {count} is the number of error-severity diagnostics above the visible area."
+  },
+  offScreenErrorsBelowLabel: {
+    defaultMessage: "{count, plural, one {# error} other {# errors}} below the visible area. Activate to scroll to the nearest one.",
+    id: "4MPw/PUwxwPT3S/6",
+    description: "Accessible label for the bottom pill button. {count} is the number of error-severity diagnostics below the visible area."
   }
 });
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/editors/base-code-editor/baseCodeEditorMessages.ts"],
-  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const BASE_CODE_EDITOR_MESSAGES = defineMessages({\n  diagnosticsSummarySingle: {\n    defaultMessage: '1 {severity} on line {line}: {message}',\n    id: 'EAU3RUdvyoar4XEO',\n    description:\n      'Screen reader announcement when there is exactly one diagnostic. {severity} is the translated severity label, {line} is the 1-based line number.',\n  },\n  diagnosticsSummaryMultiple: {\n    defaultMessage: '{count} diagnostics: {list}',\n    id: 'p7QNWYWAN7FysSqc',\n    description:\n      'Screen reader announcement when there are multiple diagnostics. {list} is a period-separated list of severity/line/message items.',\n  },\n  diagnosticsSummaryListItem: {\n    defaultMessage: '{severity} on line {line}: {message}',\n    id: 'ws6glsra1rg4EAIA',\n    description:\n      'One entry in the multiple-diagnostics list. {severity} is the translated severity label, {line} is the 1-based line number.',\n  },\n  diagnosticsSeverityError: {\n    defaultMessage: 'error',\n    id: 'RwWfbCK3X+5Ie3vr',\n    description:\n      'Severity label for an error diagnostic, used in screen reader announcements.',\n  },\n  diagnosticsSeverityWarning: {\n    defaultMessage: 'warning',\n    id: 'uLZU9AJNAIdoZ08c',\n    description:\n      'Severity label for a warning diagnostic, used in screen reader announcements.',\n  },\n  diagnosticsSeverityInfo: {\n    defaultMessage: 'info',\n    id: 'IwwqXNaWxNjk1Su9',\n    description:\n      'Severity label for an info diagnostic, used in screen reader announcements.',\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,4BAA4B,eAAe;AAAA,EACtD,0BAA0B;AAAA,IACxB,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,4BAA4B;AAAA,IAC1B,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,4BAA4B;AAAA,IAC1B,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,0BAA0B;AAAA,IACxB,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,4BAA4B;AAAA,IAC1B,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,yBAAyB;AAAA,IACvB,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AACF,CAAC;",
+  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const BASE_CODE_EDITOR_MESSAGES = defineMessages({\n  diagnosticsSummarySingle: {\n    defaultMessage: '1 {severity} on line {line}: {message}',\n    id: 'EAU3RUdvyoar4XEO',\n    description:\n      'Screen reader announcement when there is exactly one diagnostic. {severity} is the translated severity label, {line} is the 1-based line number.',\n  },\n  diagnosticsSummaryMultiple: {\n    defaultMessage: '{count} diagnostics: {list}',\n    id: 'p7QNWYWAN7FysSqc',\n    description:\n      'Screen reader announcement when there are multiple diagnostics. {list} is a period-separated list of severity/line/message items.',\n  },\n  diagnosticsSummaryListItem: {\n    defaultMessage: '{severity} on line {line}: {message}',\n    id: 'ws6glsra1rg4EAIA',\n    description:\n      'One entry in the multiple-diagnostics list. {severity} is the translated severity label, {line} is the 1-based line number.',\n  },\n  diagnosticsSeverityError: {\n    defaultMessage: 'error',\n    id: 'RwWfbCK3X+5Ie3vr',\n    description:\n      'Severity label for an error diagnostic, used in screen reader announcements.',\n  },\n  diagnosticsSeverityWarning: {\n    defaultMessage: 'warning',\n    id: 'uLZU9AJNAIdoZ08c',\n    description:\n      'Severity label for a warning diagnostic, used in screen reader announcements.',\n  },\n  diagnosticsSeverityInfo: {\n    defaultMessage: 'info',\n    id: 'IwwqXNaWxNjk1Su9',\n    description:\n      'Severity label for an info diagnostic, used in screen reader announcements.',\n  },\n  offScreenErrorCount: {\n    defaultMessage: '{count, plural, one {# error} other {# errors}}',\n    id: 'OBIv2/oXhdnWDW/Z',\n    description:\n      'Visible label on a pill button indicating how many error-severity diagnostics are scrolled out of view. {count} is the number of errors.',\n  },\n  offScreenErrorCountCapped: {\n    defaultMessage: '99+ errors',\n    id: 'IAzId4iIfCf1TztP',\n    description:\n      'Visible label on a pill button when more than 99 error-severity diagnostics are scrolled out of view.',\n  },\n  offScreenErrorsAboveLabel: {\n    defaultMessage:\n      '{count, plural, one {# error} other {# errors}} above the visible area. Activate to scroll to the nearest one.',\n    id: 'NHGVmhAtHDO9Lh7I',\n    description:\n      'Accessible label for the top pill button. {count} is the number of error-severity diagnostics above the visible area.',\n  },\n  offScreenErrorsBelowLabel: {\n    defaultMessage:\n      '{count, plural, one {# error} other {# errors}} below the visible area. Activate to scroll to the nearest one.',\n    id: '4MPw/PUwxwPT3S/6',\n    description:\n      'Accessible label for the bottom pill button. {count} is the number of error-severity diagnostics below the visible area.',\n  },\n});\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,4BAA4B,eAAe;AAAA,EACtD,0BAA0B;AAAA,IACxB,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,4BAA4B;AAAA,IAC1B,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,4BAA4B;AAAA,IAC1B,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,0BAA0B;AAAA,IACxB,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,4BAA4B;AAAA,IAC1B,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,yBAAyB;AAAA,IACvB,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,qBAAqB;AAAA,IACnB,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,2BAA2B;AAAA,IACzB,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,2BAA2B;AAAA,IACzB,gBACE;AAAA,IACF,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AAAA,EACA,2BAA2B;AAAA,IACzB,gBACE;AAAA,IACF,IAAI;AAAA,IACJ,aACE;AAAA,EACJ;AACF,CAAC;",
   "names": []
 }

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

@@ -264,7 +264,7 @@ const getDefaultConfiguration = (intlProps, options = {
         fontWeight: Typography.Code.Base.Default.Weight,
         lineHeight: Typography.Code.Base.Default.LineHeight,
         textDecoration: Typography.Code.Base.Default.TextDecoration,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        // oxlint-disable-next-line typescript/no-explicit-any
         textTransform: Typography.Code.Base.Default.TextTransform,
         flexGrow: 3,
         overflow: "hidden",

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  setSelectedCompletion,\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  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 { activeLineHighlight } from './configure-active-line.js';\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 autocompleteMouseModeCSSClass = 'cm-autocomplete-interaction-mouse';\nconst autocompleteKeyboardModeCSSClass = 'cm-autocomplete-interaction-keyboard';\n\n// Keys that move the active option inside the autocomplete listbox.\n// We intentionally exclude Enter/Escape because they accept/close the list\n// instead of navigating between options.\nconst keyboardNavigationKeys = new Set([\n  'ArrowUp',\n  'ArrowDown',\n  'PageUp',\n  'PageDown',\n  'Home',\n  'End',\n]);\n\n/**\n * Determines whether a keyboard event should be considered as navigation within the autocomplete tooltip.\n * Only unmodified ArrowUp, ArrowDown, PageUp, PageDown, Home, and End keys are considered as navigation events.\n */\nfunction isAutocompleteKeyboardNavigationEvent(event: KeyboardEvent): boolean {\n  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {\n    return false;\n  }\n\n  return keyboardNavigationKeys.has(event.key);\n}\n\nconst Source = (source: string) => () => (\n  <Text fontStyle=\"code\" textStyle=\"small-emphasized\" style={{ width: 30 }}>\n    {source}\n  </Text>\n);\n\nconst Type = (type: string) => () => (\n  <Text\n    fontStyle=\"text\"\n    textStyle=\"small\"\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  let autocompleteInteractionMode: 'mouse' | 'keyboard' = 'mouse';\n  let editorAutocompletePopup: HTMLElement | null = null;\n\n  /**\n   * Syncs the autocomplete tooltip classes with the current interaction mode so CSS can keep\n   * mouse and keyboard hover states visually separate.\n   */\n  const syncAutocompleteInteractionModeClass = (mode: 'mouse' | 'keyboard') => {\n    if (editorAutocompletePopup instanceof HTMLElement) {\n      editorAutocompletePopup.classList.remove(\n        autocompleteMouseModeCSSClass,\n        autocompleteKeyboardModeCSSClass,\n      );\n\n      editorAutocompletePopup.classList.add(\n        mode === 'mouse'\n          ? autocompleteMouseModeCSSClass\n          : autocompleteKeyboardModeCSSClass,\n      );\n    }\n  };\n\n  const selectOptionFromMouse = (option: HTMLLIElement, view: EditorView) => {\n    // CodeMirror assigns each <li> an id of \"{listId}-{globalIndex}\" (see createListBox in\n    // @codemirror/autocomplete). We extract the global index here so that hover selection still\n    // works correctly when CodeMirror is showing a paginated window of completions (e.g. page 2\n    // shows DOM positions 0\u201399 but global indices 100\u2013199). Using the DOM position instead would\n    // always map hovered items back to page 1 completions.\n    const match = /-(\\d+)$/.exec(option.id);\n    if (!match?.length) {\n      return;\n    }\n\n    const index = parseInt(match[1], 10); // radix 10 \u2014 avoids octal interpretation for strings with leading zeros\n    autocompleteInteractionMode = 'mouse';\n    syncAutocompleteInteractionModeClass(autocompleteInteractionMode);\n    view.dispatch({ effects: setSelectedCompletion(index) });\n  };\n\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: (_completion, _state, view): 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-children-name` for\n            // behavior tracking.\n            queueMicrotask(() => {\n              const option = marker.parentElement;\n              if (!(option instanceof HTMLLIElement)) {\n                return;\n              }\n\n              option.setAttribute('data-dt-children-name', 'Suggestion');\n\n              const optionPopup = option.closest('.cm-tooltip-autocomplete');\n              if (optionPopup instanceof HTMLElement) {\n                // A new DOM element means a new autocomplete session (pagination replaces the\n                // inner <ul> but keeps the same container, only valid for genuine open).\n                // Reset to keyboard mode so the initially-selected item shows the focus ring.\n                if (optionPopup !== editorAutocompletePopup) {\n                  autocompleteInteractionMode = 'keyboard';\n                }\n                editorAutocompletePopup = optionPopup;\n                syncAutocompleteInteractionModeClass(\n                  autocompleteInteractionMode,\n                );\n              }\n\n              // Keep completion info in sync with mouse interaction.\n              option.onmouseenter = () => {\n                if (autocompleteInteractionMode === 'keyboard') {\n                  return;\n                }\n\n                selectOptionFromMouse(option, view);\n              };\n\n              // Only a real pointer movement can take over from keyboard interaction.\n              option.onmousemove = (_event) => {\n                selectOptionFromMouse(option, view);\n              };\n\n              option.onmouseleave = () => {\n                if (autocompleteInteractionMode === 'keyboard') {\n                  return;\n                }\n\n                autocompleteInteractionMode = 'mouse';\n                syncAutocompleteInteractionModeClass(\n                  autocompleteInteractionMode,\n                );\n                view.dispatch({ effects: setSelectedCompletion(-1) });\n              };\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    activeLineHighlight,\n    highlightSelectionMatches(),\n    EditorView.domEventObservers({\n      keydown: (event) => {\n        if (!isAutocompleteKeyboardNavigationEvent(event)) {\n          return;\n        }\n\n        if (!editorAutocompletePopup?.isConnected) {\n          return; // autocomplete not open\n        }\n\n        autocompleteInteractionMode = 'keyboard';\n        syncAutocompleteInteractionModeClass(autocompleteInteractionMode);\n      },\n    }),\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      if (\n        completionStatus(update.state) !== null &&\n        editorAutocompletePopup?.isConnected\n      ) {\n        syncAutocompleteInteractionModeClass(autocompleteInteractionMode);\n      }\n\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        color: Colors.Text.Neutral.Subdued,\n        fontFamily: Typography.Text.Small.Default.Family,\n        fontSize: Typography.Text.Small.Default.Size,\n        fontWeight: Typography.Text.Small.Default.Weight,\n        lineHeight: `${Typography.Text.Small.Default.LineHeight} !important`,\n        padding: `${Spacings.Size8} ${Spacings.Size12} !important`,\n        opacity: '1 !important',\n        borderBottom: `1px solid ${Colors.Border.Neutral.Default} !important`,\n        marginBottom: Spacings.Size4,\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section:has(+ li[role=\"option\"].cm-empty-option)':\n        {\n          borderBottom: '0 !important',\n          marginBottom: 0,\n        },\n\n      '.cm-tooltip-autocomplete > ul > li[role=\"option\"]': {\n        display: 'flex',\n        flexWrap: 'wrap',\n        justifyContent: 'flex-start',\n        gap: Spacings.Size4,\n        alignItems: 'center',\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        color: Colors.Text.Neutral.Default,\n        transition: 'none',\n        borderRadius: Borders.Radius.Field.Default,\n        boxShadow: `inset 0 0 0 ${Borders.Width.Default} ${Colors.Border.Neutral.Accent}`,\n        backgroundColor: Colors.Background.Field.Neutral.DefaultHover,\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete.cm-autocomplete-interaction-mouse li[aria-selected]:hover':\n        {\n          boxShadow: 'none',\n        },\n\n      '.cm-tooltip.cm-tooltip-autocomplete.cm-autocomplete-interaction-keyboard li:hover:not([aria-selected])':\n        {\n          backgroundColor: 'transparent',\n          boxShadow: 'none',\n        },\n\n      '.cm-tooltip.cm-tooltip-autocomplete.cm-autocomplete-interaction-mouse li:hover':\n        {\n          backgroundColor: `${Colors.Background.Field.Neutral.DefaultHover}`,\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: `${Spacings.Size12} ${Spacings.Size16} !important`,\n        marginLeft: Spacings.Size4,\n        marginRight: Spacings.Size4,\n        width: '360px !important',\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  ];\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        // Hidden from the accessibility tree \u2014 folding is operable via foldKeymap shortcuts.\n        element.setAttribute('aria-hidden', 'true');\n        element.style.display = 'flex';\n        element.style.alignItems = 'center';\n        element.style.marginTop = size === 'condensed' ? '1px' : '2px';\n        element.style.transform = open ? 'rotate(0deg)' : 'rotate(-90deg)';\n        element.style.cursor = 'pointer';\n        element.style.minWidth = '16px';\n        element.style.minHeight = '16px';\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"],
+  "sourcesContent": ["import {\n  autocompletion,\n  closeBrackets,\n  completionStatus,\n  setSelectedCompletion,\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  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 { activeLineHighlight } from './configure-active-line.js';\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 autocompleteMouseModeCSSClass = 'cm-autocomplete-interaction-mouse';\nconst autocompleteKeyboardModeCSSClass = 'cm-autocomplete-interaction-keyboard';\n\n// Keys that move the active option inside the autocomplete listbox.\n// We intentionally exclude Enter/Escape because they accept/close the list\n// instead of navigating between options.\nconst keyboardNavigationKeys = new Set([\n  'ArrowUp',\n  'ArrowDown',\n  'PageUp',\n  'PageDown',\n  'Home',\n  'End',\n]);\n\n/**\n * Determines whether a keyboard event should be considered as navigation within the autocomplete tooltip.\n * Only unmodified ArrowUp, ArrowDown, PageUp, PageDown, Home, and End keys are considered as navigation events.\n */\nfunction isAutocompleteKeyboardNavigationEvent(event: KeyboardEvent): boolean {\n  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {\n    return false;\n  }\n\n  return keyboardNavigationKeys.has(event.key);\n}\n\nconst Source = (source: string) => () => (\n  <Text fontStyle=\"code\" textStyle=\"small-emphasized\" style={{ width: 30 }}>\n    {source}\n  </Text>\n);\n\nconst Type = (type: string) => () => (\n  <Text\n    fontStyle=\"text\"\n    textStyle=\"small\"\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  let autocompleteInteractionMode: 'mouse' | 'keyboard' = 'mouse';\n  let editorAutocompletePopup: HTMLElement | null = null;\n\n  /**\n   * Syncs the autocomplete tooltip classes with the current interaction mode so CSS can keep\n   * mouse and keyboard hover states visually separate.\n   */\n  const syncAutocompleteInteractionModeClass = (mode: 'mouse' | 'keyboard') => {\n    if (editorAutocompletePopup instanceof HTMLElement) {\n      editorAutocompletePopup.classList.remove(\n        autocompleteMouseModeCSSClass,\n        autocompleteKeyboardModeCSSClass,\n      );\n\n      editorAutocompletePopup.classList.add(\n        mode === 'mouse'\n          ? autocompleteMouseModeCSSClass\n          : autocompleteKeyboardModeCSSClass,\n      );\n    }\n  };\n\n  const selectOptionFromMouse = (option: HTMLLIElement, view: EditorView) => {\n    // CodeMirror assigns each <li> an id of \"{listId}-{globalIndex}\" (see createListBox in\n    // @codemirror/autocomplete). We extract the global index here so that hover selection still\n    // works correctly when CodeMirror is showing a paginated window of completions (e.g. page 2\n    // shows DOM positions 0\u201399 but global indices 100\u2013199). Using the DOM position instead would\n    // always map hovered items back to page 1 completions.\n    const match = /-(\\d+)$/.exec(option.id);\n    if (!match?.length) {\n      return;\n    }\n\n    const index = parseInt(match[1], 10); // radix 10 \u2014 avoids octal interpretation for strings with leading zeros\n    autocompleteInteractionMode = 'mouse';\n    syncAutocompleteInteractionModeClass(autocompleteInteractionMode);\n    view.dispatch({ effects: setSelectedCompletion(index) });\n  };\n\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: (_completion, _state, view): 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-children-name` for\n            // behavior tracking.\n            queueMicrotask(() => {\n              const option = marker.parentElement;\n              if (!(option instanceof HTMLLIElement)) {\n                return;\n              }\n\n              option.setAttribute('data-dt-children-name', 'Suggestion');\n\n              const optionPopup = option.closest('.cm-tooltip-autocomplete');\n              if (optionPopup instanceof HTMLElement) {\n                // A new DOM element means a new autocomplete session (pagination replaces the\n                // inner <ul> but keeps the same container, only valid for genuine open).\n                // Reset to keyboard mode so the initially-selected item shows the focus ring.\n                if (optionPopup !== editorAutocompletePopup) {\n                  autocompleteInteractionMode = 'keyboard';\n                }\n                editorAutocompletePopup = optionPopup;\n                syncAutocompleteInteractionModeClass(\n                  autocompleteInteractionMode,\n                );\n              }\n\n              // Keep completion info in sync with mouse interaction.\n              option.onmouseenter = () => {\n                if (autocompleteInteractionMode === 'keyboard') {\n                  return;\n                }\n\n                selectOptionFromMouse(option, view);\n              };\n\n              // Only a real pointer movement can take over from keyboard interaction.\n              option.onmousemove = (_event) => {\n                selectOptionFromMouse(option, view);\n              };\n\n              option.onmouseleave = () => {\n                if (autocompleteInteractionMode === 'keyboard') {\n                  return;\n                }\n\n                autocompleteInteractionMode = 'mouse';\n                syncAutocompleteInteractionModeClass(\n                  autocompleteInteractionMode,\n                );\n                view.dispatch({ effects: setSelectedCompletion(-1) });\n              };\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    activeLineHighlight,\n    highlightSelectionMatches(),\n    EditorView.domEventObservers({\n      keydown: (event) => {\n        if (!isAutocompleteKeyboardNavigationEvent(event)) {\n          return;\n        }\n\n        if (!editorAutocompletePopup?.isConnected) {\n          return; // autocomplete not open\n        }\n\n        autocompleteInteractionMode = 'keyboard';\n        syncAutocompleteInteractionModeClass(autocompleteInteractionMode);\n      },\n    }),\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      if (\n        completionStatus(update.state) !== null &&\n        editorAutocompletePopup?.isConnected\n      ) {\n        syncAutocompleteInteractionModeClass(autocompleteInteractionMode);\n      }\n\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        color: Colors.Text.Neutral.Subdued,\n        fontFamily: Typography.Text.Small.Default.Family,\n        fontSize: Typography.Text.Small.Default.Size,\n        fontWeight: Typography.Text.Small.Default.Weight,\n        lineHeight: `${Typography.Text.Small.Default.LineHeight} !important`,\n        padding: `${Spacings.Size8} ${Spacings.Size12} !important`,\n        opacity: '1 !important',\n        borderBottom: `1px solid ${Colors.Border.Neutral.Default} !important`,\n        marginBottom: Spacings.Size4,\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section:has(+ li[role=\"option\"].cm-empty-option)':\n        {\n          borderBottom: '0 !important',\n          marginBottom: 0,\n        },\n\n      '.cm-tooltip-autocomplete > ul > li[role=\"option\"]': {\n        display: 'flex',\n        flexWrap: 'wrap',\n        justifyContent: 'flex-start',\n        gap: Spacings.Size4,\n        alignItems: 'center',\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        // oxlint-disable-next-line typescript/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        color: Colors.Text.Neutral.Default,\n        transition: 'none',\n        borderRadius: Borders.Radius.Field.Default,\n        boxShadow: `inset 0 0 0 ${Borders.Width.Default} ${Colors.Border.Neutral.Accent}`,\n        backgroundColor: Colors.Background.Field.Neutral.DefaultHover,\n      },\n\n      '.cm-tooltip.cm-tooltip-autocomplete.cm-autocomplete-interaction-mouse li[aria-selected]:hover':\n        {\n          boxShadow: 'none',\n        },\n\n      '.cm-tooltip.cm-tooltip-autocomplete.cm-autocomplete-interaction-keyboard li:hover:not([aria-selected])':\n        {\n          backgroundColor: 'transparent',\n          boxShadow: 'none',\n        },\n\n      '.cm-tooltip.cm-tooltip-autocomplete.cm-autocomplete-interaction-mouse li:hover':\n        {\n          backgroundColor: `${Colors.Background.Field.Neutral.DefaultHover}`,\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: `${Spacings.Size12} ${Spacings.Size16} !important`,\n        marginLeft: Spacings.Size4,\n        marginRight: Spacings.Size4,\n        width: '360px !important',\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  ];\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        // Hidden from the accessibility tree \u2014 folding is operable via foldKeymap shortcuts.\n        element.setAttribute('aria-hidden', 'true');\n        element.style.display = 'flex';\n        element.style.alignItems = 'center';\n        element.style.marginTop = size === 'condensed' ? '1px' : '2px';\n        element.style.transform = open ? 'rotate(0deg)' : 'rotate(-90deg)';\n        element.style.cursor = 'pointer';\n        element.style.minWidth = '16px';\n        element.style.minHeight = '16px';\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/base-code-editor/off-screen-diagnostic-indicators/OffScreenDiagnosticIndicators.css

@@ -0,0 +1,40 @@
+@keyframes _yrohsn0-3-13-0 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes _yrohsn1-3-13-0 {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+._yrohsn2-3-13-0 {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--dt-elevations-default, 1);
+}
+._yrohsn3-3-13-0 {
+  top: var(--dt-spacings-size-8, 8px);
+  animation-name: _yrohsn0-3-13-0;
+  animation-duration: var(--dt-animations-fade-in-duration-base, 250ms);
+  animation-timing-function: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1));
+}
+._yrohsn4-3-13-0 {
+  bottom: var(--dt-spacings-size-8, 8px);
+  animation-name: _yrohsn0-3-13-0;
+  animation-duration: var(--dt-animations-fade-in-duration-base, 250ms);
+  animation-timing-function: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1));
+}
+._yrohsn5-3-13-0 {
+  animation-name: _yrohsn1-3-13-0;
+  animation-duration: var(--dt-animations-fade-out-duration-base, 250ms);
+  animation-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
+  animation-fill-mode: forwards;
+}

package/esm/editors/base-code-editor/off-screen-diagnostic-indicators/OffScreenDiagnosticIndicators.js

@@ -0,0 +1,107 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { useIntl } from "react-intl";
+import { ArrowSmallDownIcon, ArrowSmallUpIcon } from "@dynatrace/strato-icons";
+import { Button } from "../../../buttons/button/Button.js";
+import { BASE_CODE_EDITOR_MESSAGES as messages } from "../baseCodeEditorMessages.js";
+import { MAX_DISPLAYED_ERROR_COUNT } from "./off-screen-diagnostic-indicators.utils.js";
+import * as styles from "./OffScreenDiagnosticIndicators.sty.js";
+function usePillExitAnimation(count) {
+  const [isExiting, setIsExiting] = useState(false);
+  const [exitingCount, setExitingCount] = useState(0);
+  const prevCountRef = useRef(count);
+  useEffect(() => {
+    const prevCount = prevCountRef.current;
+    prevCountRef.current = count;
+    if (count === 0 && prevCount > 0) {
+      queueMicrotask(() => {
+        setExitingCount(prevCount);
+        setIsExiting(true);
+      });
+    } else if (count > 0 && isExiting) {
+      queueMicrotask(() => setIsExiting(false));
+    }
+  }, [count, isExiting]);
+  return {
+    displayedCount: isExiting ? exitingCount : count,
+    isExiting,
+    isVisible: count > 0 || isExiting,
+    handleAnimationEnd: () => {
+      if (isExiting) {
+        setIsExiting(false);
+      }
+    }
+  };
+}
+function getPillLabel(count, intl) {
+  if (count > MAX_DISPLAYED_ERROR_COUNT) {
+    return intl.formatMessage(messages.offScreenErrorCountCapped);
+  }
+  return intl.formatMessage(messages.offScreenErrorCount, {
+    count
+  });
+}
+const pillButtonConfig = {
+  variant: "emphasized",
+  color: "critical",
+  size: "condensed"
+};
+function OffScreenDiagnosticIndicators(props) {
+  const {
+    topErrorsCount,
+    bottomErrorsCount,
+    handleScrollToNearestAbove,
+    handleScrollToNearestBelow
+  } = props;
+  const intl = useIntl();
+  const topPill = usePillExitAnimation(topErrorsCount);
+  const bottomPill = usePillExitAnimation(bottomErrorsCount);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    topPill.isVisible && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ...pillButtonConfig,
+        className: styles.errorIndicatorPill({
+          direction: "top",
+          exiting: topPill.isExiting
+        }),
+        onClick: handleScrollToNearestAbove,
+        onAnimationEnd: topPill.handleAnimationEnd,
+        "aria-label": intl.formatMessage(messages.offScreenErrorsAboveLabel, {
+          count: topPill.displayedCount
+        }),
+        children: [
+          /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(ArrowSmallUpIcon, {}) }),
+          getPillLabel(topPill.displayedCount, intl)
+        ]
+      }
+    ),
+    bottomPill.isVisible && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ...pillButtonConfig,
+        className: styles.errorIndicatorPill({
+          direction: "bottom",
+          exiting: bottomPill.isExiting
+        }),
+        onClick: handleScrollToNearestBelow,
+        onAnimationEnd: bottomPill.handleAnimationEnd,
+        "aria-label": intl.formatMessage(messages.offScreenErrorsBelowLabel, {
+          count: bottomPill.displayedCount
+        }),
+        children: [
+          /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(ArrowSmallDownIcon, {}) }),
+          getPillLabel(bottomPill.displayedCount, intl)
+        ]
+      }
+    )
+  ] });
+}
+export {
+  OffScreenDiagnosticIndicators
+};
+//# sourceMappingURL=OffScreenDiagnosticIndicators.js.map

package/esm/editors/base-code-editor/off-screen-diagnostic-indicators/OffScreenDiagnosticIndicators.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/editors/base-code-editor/off-screen-diagnostic-indicators/OffScreenDiagnosticIndicators.tsx"],
+  "sourcesContent": ["import {\n  type MouseEvent as ReactMouseEvent,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ArrowSmallDownIcon, ArrowSmallUpIcon } from '@dynatrace/strato-icons';\n\nimport { Button, type ButtonOwnProps } from '../../../buttons/button/Button.js';\nimport { BASE_CODE_EDITOR_MESSAGES as messages } from '../baseCodeEditorMessages.js';\nimport { MAX_DISPLAYED_ERROR_COUNT } from './off-screen-diagnostic-indicators.utils.js';\nimport * as styles from './OffScreenDiagnosticIndicators.sty.js';\n\n/**\n * @internal\n */\ninterface OffScreenDiagnosticIndicatorsProps {\n  topErrorsCount: number;\n  bottomErrorsCount: number;\n  handleScrollToNearestAbove: (\n    event: ReactMouseEvent<HTMLButtonElement>,\n  ) => void;\n  handleScrollToNearestBelow: (\n    event: ReactMouseEvent<HTMLButtonElement>,\n  ) => void;\n}\n\n/**\n * Delays unmount lifecycle of a pill button so the fade-out animation\n * can complete before the element is removed from DOM\n *\n * While `count` is positive the pill is visible and in its normal (fade-in)\n * state. When `count` drops to 0 the pill enters the \"exiting\" state, keeps\n * the last non-zero count for its label, and stays in the DOM until the\n * `animationend` event fires. When `count` becomes positive again mid-exit the\n * exit is cancelled and the pill transitions back to its normal state.\n */\nfunction usePillExitAnimation(count: number): {\n  displayedCount: number;\n  isExiting: boolean;\n  isVisible: boolean;\n  handleAnimationEnd: () => void;\n} {\n  const [isExiting, setIsExiting] = useState(false);\n  const [exitingCount, setExitingCount] = useState(0);\n  const prevCountRef = useRef(count);\n\n  useEffect(() => {\n    const prevCount = prevCountRef.current;\n    prevCountRef.current = count;\n\n    if (count === 0 && prevCount > 0) {\n      queueMicrotask(() => {\n        setExitingCount(prevCount);\n        setIsExiting(true);\n      });\n    } else if (count > 0 && isExiting) {\n      queueMicrotask(() => setIsExiting(false));\n    }\n  }, [count, isExiting]);\n\n  return {\n    displayedCount: isExiting ? exitingCount : count,\n    isExiting,\n    isVisible: count > 0 || isExiting,\n    handleAnimationEnd: () => {\n      if (isExiting) {\n        setIsExiting(false);\n      }\n    },\n  };\n}\n\nfunction getPillLabel(count: number, intl: ReturnType<typeof useIntl>): string {\n  if (count > MAX_DISPLAYED_ERROR_COUNT) {\n    return intl.formatMessage(messages.offScreenErrorCountCapped);\n  }\n  return intl.formatMessage(messages.offScreenErrorCount, {\n    count,\n  });\n}\n\nconst pillButtonConfig: Pick<ButtonOwnProps, 'variant' | 'color' | 'size'> = {\n  variant: 'emphasized',\n  color: 'critical',\n  size: 'condensed',\n};\n\n/**\n * Renders floating pill buttons at the top and/or bottom edge of the editor\n * viewport, indicating how many error-severity diagnostics are scrolled out of\n * view in each direction. Clicking a pill scrolls the nearest off-screen error\n * into view.\n * @internal\n */\nexport function OffScreenDiagnosticIndicators(\n  props: Readonly<OffScreenDiagnosticIndicatorsProps>,\n) {\n  const {\n    topErrorsCount,\n    bottomErrorsCount,\n    handleScrollToNearestAbove,\n    handleScrollToNearestBelow,\n  } = props;\n\n  const intl = useIntl();\n\n  const topPill = usePillExitAnimation(topErrorsCount);\n  const bottomPill = usePillExitAnimation(bottomErrorsCount);\n\n  return (\n    <>\n      {topPill.isVisible && (\n        <Button\n          {...pillButtonConfig}\n          className={styles.errorIndicatorPill({\n            direction: 'top',\n            exiting: topPill.isExiting,\n          })}\n          onClick={handleScrollToNearestAbove}\n          onAnimationEnd={topPill.handleAnimationEnd}\n          aria-label={intl.formatMessage(messages.offScreenErrorsAboveLabel, {\n            count: topPill.displayedCount,\n          })}\n        >\n          <Button.Prefix>\n            <ArrowSmallUpIcon />\n          </Button.Prefix>\n          {getPillLabel(topPill.displayedCount, intl)}\n        </Button>\n      )}\n      {bottomPill.isVisible && (\n        <Button\n          {...pillButtonConfig}\n          className={styles.errorIndicatorPill({\n            direction: 'bottom',\n            exiting: bottomPill.isExiting,\n          })}\n          onClick={handleScrollToNearestBelow}\n          onAnimationEnd={bottomPill.handleAnimationEnd}\n          aria-label={intl.formatMessage(messages.offScreenErrorsBelowLabel, {\n            count: bottomPill.displayedCount,\n          })}\n        >\n          <Button.Prefix>\n            <ArrowSmallDownIcon />\n          </Button.Prefix>\n          {getPillLabel(bottomPill.displayedCount, intl)}\n        </Button>\n      )}\n    </>\n  );\n}\n"],
+  "mappings": "AAiHI,mBAeQ,KAbJ,YAFJ;AAjHJ;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAExB,SAAS,oBAAoB,wBAAwB;AAErD,SAAS,cAAmC;AAC5C,SAAS,6BAA6B,gBAAgB;AACtD,SAAS,iCAAiC;AAC1C,YAAY,YAAY;AA0BxB,SAAS,qBAAqB,OAK5B;AACA,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,CAAC;AAClD,QAAM,eAAe,OAAO,KAAK;AAEjC,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,iBAAa,UAAU;AAEvB,QAAI,UAAU,KAAK,YAAY,GAAG;AAChC,qBAAe,MAAM;AACnB,wBAAgB,SAAS;AACzB,qBAAa,IAAI;AAAA,MACnB,CAAC;AAAA,IACH,WAAW,QAAQ,KAAK,WAAW;AACjC,qBAAe,MAAM,aAAa,KAAK,CAAC;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,CAAC;AAErB,SAAO;AAAA,IACL,gBAAgB,YAAY,eAAe;AAAA,IAC3C;AAAA,IACA,WAAW,QAAQ,KAAK;AAAA,IACxB,oBAAoB,MAAM;AACxB,UAAI,WAAW;AACb,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF;AACF;AAEA,SAAS,aAAa,OAAe,MAA0C;AAC7E,MAAI,QAAQ,2BAA2B;AACrC,WAAO,KAAK,cAAc,SAAS,yBAAyB;AAAA,EAC9D;AACA,SAAO,KAAK,cAAc,SAAS,qBAAqB;AAAA,IACtD;AAAA,EACF,CAAC;AACH;AAEA,MAAM,mBAAuE;AAAA,EAC3E,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACR;AASO,SAAS,8BACd,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,OAAO,QAAQ;AAErB,QAAM,UAAU,qBAAqB,cAAc;AACnD,QAAM,aAAa,qBAAqB,iBAAiB;AAEzD,SACE,iCACG;AAAA,YAAQ,aACP;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,OAAO,mBAAmB;AAAA,UACnC,WAAW;AAAA,UACX,SAAS,QAAQ;AAAA,QACnB,CAAC;AAAA,QACD,SAAS;AAAA,QACT,gBAAgB,QAAQ;AAAA,QACxB,cAAY,KAAK,cAAc,SAAS,2BAA2B;AAAA,UACjE,OAAO,QAAQ;AAAA,QACjB,CAAC;AAAA,QAED;AAAA,8BAAC,OAAO,QAAP,EACC,8BAAC,oBAAiB,GACpB;AAAA,UACC,aAAa,QAAQ,gBAAgB,IAAI;AAAA;AAAA;AAAA,IAC5C;AAAA,IAED,WAAW,aACV;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,OAAO,mBAAmB;AAAA,UACnC,WAAW;AAAA,UACX,SAAS,WAAW;AAAA,QACtB,CAAC;AAAA,QACD,SAAS;AAAA,QACT,gBAAgB,WAAW;AAAA,QAC3B,cAAY,KAAK,cAAc,SAAS,2BAA2B;AAAA,UACjE,OAAO,WAAW;AAAA,QACpB,CAAC;AAAA,QAED;AAAA,8BAAC,OAAO,QAAP,EACC,8BAAC,sBAAmB,GACtB;AAAA,UACC,aAAa,WAAW,gBAAgB,IAAI;AAAA;AAAA;AAAA,IAC/C;AAAA,KAEJ;AAEJ;",
+  "names": []
+}

package/esm/editors/base-code-editor/off-screen-diagnostic-indicators/OffScreenDiagnosticIndicators.sty.js

@@ -0,0 +1,7 @@
+import "./OffScreenDiagnosticIndicators.css";
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var errorIndicatorPill = _7a468({ defaultClassName: "_yrohsn2-3-13-0", variantClassNames: { direction: { top: "_yrohsn3-3-13-0", bottom: "_yrohsn4-3-13-0" }, exiting: { true: "_yrohsn5-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+export {
+  errorIndicatorPill
+};
+//# sourceMappingURL=OffScreenDiagnosticIndicators.sty.js.map

package/esm/editors/base-code-editor/off-screen-diagnostic-indicators/OffScreenDiagnosticIndicators.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/editors/base-code-editor/off-screen-diagnostic-indicators/OffScreenDiagnosticIndicators.css.ts"],
+  "sourcesContent": ["import './OffScreenDiagnosticIndicators.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var errorIndicatorPill = _7a468({defaultClassName:'_yrohsn2-3-13-0',variantClassNames:{direction:{top:'_yrohsn3-3-13-0',bottom:'_yrohsn4-3-13-0'},exiting:{true:'_yrohsn5-3-13-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,KAAI,mBAAkB,QAAO,kBAAiB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "names": []
+}

package/esm/editors/base-code-editor/off-screen-diagnostic-indicators/off-screen-diagnostic-indicators.utils.js

@@ -0,0 +1,104 @@
+import { forEachDiagnostic } from "@codemirror/lint";
+const MIN_HEIGHT_FOR_ANY_INDICATOR = 80;
+const MIN_HEIGHT_FOR_BOTH_INDICATORS = 140;
+const MAX_DISPLAYED_ERROR_COUNT = 99;
+function collectLintStateDiagnostics(state) {
+  const result = [];
+  forEachDiagnostic(state, (diagnostic, from, to) => {
+    result.push({
+      from,
+      to,
+      message: diagnostic.message,
+      severity: diagnostic.severity === "hint" ? "info" : diagnostic.severity
+    });
+  });
+  return result;
+}
+const getScrollViewport = (view) => {
+  const scroller = view.scrollDOM;
+  const scrollTop = scroller.scrollTop;
+  const scrollBottom = scrollTop + scroller.clientHeight;
+  const docLength = view.state.doc.length;
+  return {
+    scrollTop,
+    scrollBottom,
+    lineBoundsFor: (pos) => {
+      if (pos < 0 || pos > docLength) {
+        return null;
+      }
+      const block = view.lineBlockAt(pos);
+      return { top: block.top, bottom: block.bottom };
+    }
+  };
+};
+function classifyOffScreenErrors(diagnostics, scrollViewport, callback) {
+  for (const diagnostic of diagnostics) {
+    if ((diagnostic.severity ?? "error") !== "error") {
+      continue;
+    }
+    const bounds = scrollViewport.lineBoundsFor(diagnostic.from);
+    if (bounds === null) {
+      continue;
+    }
+    if (bounds.bottom <= scrollViewport.scrollTop) {
+      callback(diagnostic, "above", bounds.bottom);
+    } else if (bounds.bottom > scrollViewport.scrollBottom) {
+      callback(diagnostic, "below", bounds.top);
+    }
+  }
+}
+function countOffScreenErrors(diagnostics, scrollViewport) {
+  let above = 0;
+  let below = 0;
+  classifyOffScreenErrors(diagnostics, scrollViewport, (_, direction) => {
+    if (direction === "above") {
+      above++;
+    } else {
+      below++;
+    }
+  });
+  return { above, below };
+}
+function findNearestOffScreenError(diagnostics, scrollViewport, direction) {
+  let nearestPos = null;
+  let nearestEdge = direction === "above" ? -Infinity : Infinity;
+  classifyOffScreenErrors(
+    diagnostics,
+    scrollViewport,
+    (diagnostic, dir, proximityEdge) => {
+      if (dir !== direction) {
+        return;
+      }
+      if (direction === "above" && proximityEdge > nearestEdge || direction === "below" && proximityEdge < nearestEdge) {
+        nearestEdge = proximityEdge;
+        nearestPos = diagnostic.from;
+      }
+    }
+  );
+  return nearestPos;
+}
+function resolveVisibleIndicators(counts, availableHeight) {
+  if (availableHeight < MIN_HEIGHT_FOR_ANY_INDICATOR) {
+    return { showTop: false, showBottom: false };
+  }
+  const showTop = counts.above > 0;
+  const showBottom = counts.below > 0;
+  if (availableHeight > MIN_HEIGHT_FOR_BOTH_INDICATORS) {
+    return { showTop, showBottom };
+  }
+  return {
+    showTop,
+    showBottom: showBottom && !showTop
+  };
+}
+export {
+  MAX_DISPLAYED_ERROR_COUNT,
+  MIN_HEIGHT_FOR_ANY_INDICATOR,
+  MIN_HEIGHT_FOR_BOTH_INDICATORS,
+  collectLintStateDiagnostics,
+  countOffScreenErrors,
+  findNearestOffScreenError,
+  getScrollViewport,
+  resolveVisibleIndicators
+};
+//# sourceMappingURL=off-screen-diagnostic-indicators.utils.js.map

package/esm/editors/base-code-editor/off-screen-diagnostic-indicators/off-screen-diagnostic-indicators.utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/editors/base-code-editor/off-screen-diagnostic-indicators/off-screen-diagnostic-indicators.utils.ts"],
+  "sourcesContent": ["import { forEachDiagnostic } from '@codemirror/lint';\nimport type { EditorState } from '@codemirror/state';\nimport type { EditorView } from '@codemirror/view';\n\nimport type { InlineDiagnostic } from '../../code-editor/inline-diagnostic.js';\n\n/**\n * Counts of error-severity diagnostics that lie above and below the current\n * editor viewport.\n * @internal\n */\nexport interface OffScreenErrorCounts {\n  above: number;\n  below: number;\n}\n\n/**\n * Injectable geometry interface for viewport math \u2014 decouples the counting\n * and nearest-error logic from a live `EditorView` so both can be unit-tested\n * without a DOM or CodeMirror layout pass.\n * @internal\n */\nexport interface OffScreenErrorGeometry {\n  scrollTop: number;\n  scrollBottom: number;\n  /**\n   * Returns the pixel bounds of the line block containing `pos`, or `null`\n   * when `pos` is out of range (negative or past the document end).\n   */\n  lineBoundsFor: (pos: number) => { top: number; bottom: number } | null;\n}\n\n/**\n * Below this height neither indicator is shown \u2014 there is not enough vertical\n * space for even one pill without it overlapping the editor content heavily.\n * @internal\n */\nexport const MIN_HEIGHT_FOR_ANY_INDICATOR = 80;\n\n/**\n * Above this height both the top and bottom indicator may be shown\n * simultaneously when errors exist in both directions.\n * @internal\n */\nexport const MIN_HEIGHT_FOR_BOTH_INDICATORS = 140;\n\n/**\n * Maximum error count shown verbatim in a pill label. Counts above this value\n * are displayed as \"99+ errors\".\n * @internal\n */\nexport const MAX_DISPLAYED_ERROR_COUNT = 99;\n\n/**\n * Reads the active CodeMirror lint state and returns it as an array of\n * {@link InlineDiagnostic} objects.\n *\n * Uses the `from`/`to` positions supplied by the `forEachDiagnostic` callback\n * rather than `diagnostic.from`/`.to`, which can go stale after document edits.\n * Maps CodeMirror's `'hint'` severity level to `'info'`.\n * @internal\n */\nexport function collectLintStateDiagnostics(\n  state: EditorState,\n): InlineDiagnostic[] {\n  const result: InlineDiagnostic[] = [];\n  forEachDiagnostic(state, (diagnostic, from, to) => {\n    result.push({\n      from,\n      to,\n      message: diagnostic.message,\n      severity: diagnostic.severity === 'hint' ? 'info' : diagnostic.severity,\n    });\n  });\n  return result;\n}\n\n/**\n * Builds a snapshot of the current scroll viewport for a CodeMirror editor view.\n *\n * The returned object captures the visible vertical range at the moment of the\n * call and provides a function to map any document position to its pixel bounds.\n * It satisfies the {@link OffScreenErrorGeometry} interface consumed by the\n * off-screen error indicator utilities.\n *\n * @param view - The CodeMirror editor view to snapshot.\n */\nexport const getScrollViewport = (view: EditorView): OffScreenErrorGeometry => {\n  const scroller = view.scrollDOM;\n  const scrollTop = scroller.scrollTop;\n  const scrollBottom = scrollTop + scroller.clientHeight;\n  const docLength = view.state.doc.length;\n\n  return {\n    scrollTop,\n    scrollBottom,\n    lineBoundsFor: (pos: number) => {\n      if (pos < 0 || pos > docLength) {\n        return null;\n      }\n      const block = view.lineBlockAt(pos);\n      return { top: block.top, bottom: block.bottom };\n    },\n  };\n};\n\n/**\n * Iterates every error-severity diagnostic that lies outside the current\n * viewport and invokes `callback` for each one.\n *\n * `proximityEdge` is the pixel value that measures closeness to the viewport\n * boundary: `bounds.bottom` for `'above'` errors (higher = closer to the top\n * of the viewport) and `bounds.top` for `'below'` errors (lower = closer to\n * the bottom of the viewport).\n */\nfunction classifyOffScreenErrors(\n  diagnostics: readonly InlineDiagnostic[],\n  scrollViewport: OffScreenErrorGeometry,\n  callback: (\n    diagnostic: InlineDiagnostic,\n    direction: 'above' | 'below',\n    proximityEdge: number,\n  ) => void,\n): void {\n  for (const diagnostic of diagnostics) {\n    if ((diagnostic.severity ?? 'error') !== 'error') {\n      continue;\n    }\n\n    const bounds = scrollViewport.lineBoundsFor(diagnostic.from);\n    if (bounds === null) {\n      continue;\n    }\n\n    if (bounds.bottom <= scrollViewport.scrollTop) {\n      callback(diagnostic, 'above', bounds.bottom);\n    } else if (bounds.bottom > scrollViewport.scrollBottom) {\n      callback(diagnostic, 'below', bounds.top);\n    }\n  }\n}\n\n/**\n * Counts how many error-severity diagnostics lie above and below the current\n * editor viewport, using the geometry from editorView to resolve pixel positions.\n *\n * Only `error`-severity items are counted \u2014 `warning` and `info` are ignored,\n * consistent with the `aria-invalid` behaviour. A missing `severity` field\n * defaults to `'error'`.\n * @internal\n */\nexport function countOffScreenErrors(\n  diagnostics: readonly InlineDiagnostic[],\n  scrollViewport: OffScreenErrorGeometry,\n): OffScreenErrorCounts {\n  let above = 0;\n  let below = 0;\n\n  classifyOffScreenErrors(diagnostics, scrollViewport, (_, direction) => {\n    if (direction === 'above') {\n      above++;\n    } else {\n      below++;\n    }\n  });\n\n  return { above, below };\n}\n\n/**\n * Returns the document position of the nearest off-screen error in the given\n * direction, or `null` if no off-screen errors exist in that direction.\n *\n * \"Nearest above\" is the error whose line block bottom is closest to\n * `scrollTop` \u2014 the minimum scroll distance to bring it into view.\n * \"Nearest below\" is the error whose line block top is closest to\n * `scrollBottom`.\n * @internal\n */\nexport function findNearestOffScreenError(\n  diagnostics: readonly InlineDiagnostic[],\n  scrollViewport: OffScreenErrorGeometry,\n  direction: 'above' | 'below',\n): number | null {\n  let nearestPos: number | null = null;\n  let nearestEdge = direction === 'above' ? -Infinity : Infinity;\n\n  classifyOffScreenErrors(\n    diagnostics,\n    scrollViewport,\n    (diagnostic, dir, proximityEdge) => {\n      if (dir !== direction) {\n        return;\n      }\n\n      if (\n        (direction === 'above' && proximityEdge > nearestEdge) ||\n        (direction === 'below' && proximityEdge < nearestEdge)\n      ) {\n        nearestEdge = proximityEdge;\n        nearestPos = diagnostic.from;\n      }\n    },\n  );\n\n  return nearestPos;\n}\n\n/**\n * Resolves which indicator pills should be visible given the current error\n * counts and the available height of the editor scroller.\n *\n * @internal\n */\nexport function resolveVisibleIndicators(\n  counts: OffScreenErrorCounts,\n  availableHeight: number,\n): { showTop: boolean; showBottom: boolean } {\n  if (availableHeight < MIN_HEIGHT_FOR_ANY_INDICATOR) {\n    return { showTop: false, showBottom: false };\n  }\n\n  const showTop = counts.above > 0;\n  const showBottom = counts.below > 0;\n\n  if (availableHeight > MIN_HEIGHT_FOR_BOTH_INDICATORS) {\n    return { showTop, showBottom };\n  }\n\n  // Single-indicator band: top wins; bottom shows only when there is nothing above.\n  return {\n    showTop,\n    showBottom: showBottom && !showTop,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,yBAAyB;AAqC3B,MAAM,+BAA+B;AAOrC,MAAM,iCAAiC;AAOvC,MAAM,4BAA4B;AAWlC,SAAS,4BACd,OACoB;AACpB,QAAM,SAA6B,CAAC;AACpC,oBAAkB,OAAO,CAAC,YAAY,MAAM,OAAO;AACjD,WAAO,KAAK;AAAA,MACV;AAAA,MACA;AAAA,MACA,SAAS,WAAW;AAAA,MACpB,UAAU,WAAW,aAAa,SAAS,SAAS,WAAW;AAAA,IACjE,CAAC;AAAA,EACH,CAAC;AACD,SAAO;AACT;AAYO,MAAM,oBAAoB,CAAC,SAA6C;AAC7E,QAAM,WAAW,KAAK;AACtB,QAAM,YAAY,SAAS;AAC3B,QAAM,eAAe,YAAY,SAAS;AAC1C,QAAM,YAAY,KAAK,MAAM,IAAI;AAEjC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,eAAe,CAAC,QAAgB;AAC9B,UAAI,MAAM,KAAK,MAAM,WAAW;AAC9B,eAAO;AAAA,MACT;AACA,YAAM,QAAQ,KAAK,YAAY,GAAG;AAClC,aAAO,EAAE,KAAK,MAAM,KAAK,QAAQ,MAAM,OAAO;AAAA,IAChD;AAAA,EACF;AACF;AAWA,SAAS,wBACP,aACA,gBACA,UAKM;AACN,aAAW,cAAc,aAAa;AACpC,SAAK,WAAW,YAAY,aAAa,SAAS;AAChD;AAAA,IACF;AAEA,UAAM,SAAS,eAAe,cAAc,WAAW,IAAI;AAC3D,QAAI,WAAW,MAAM;AACnB;AAAA,IACF;AAEA,QAAI,OAAO,UAAU,eAAe,WAAW;AAC7C,eAAS,YAAY,SAAS,OAAO,MAAM;AAAA,IAC7C,WAAW,OAAO,SAAS,eAAe,cAAc;AACtD,eAAS,YAAY,SAAS,OAAO,GAAG;AAAA,IAC1C;AAAA,EACF;AACF;AAWO,SAAS,qBACd,aACA,gBACsB;AACtB,MAAI,QAAQ;AACZ,MAAI,QAAQ;AAEZ,0BAAwB,aAAa,gBAAgB,CAAC,GAAG,cAAc;AACrE,QAAI,cAAc,SAAS;AACzB;AAAA,IACF,OAAO;AACL;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO,EAAE,OAAO,MAAM;AACxB;AAYO,SAAS,0BACd,aACA,gBACA,WACe;AACf,MAAI,aAA4B;AAChC,MAAI,cAAc,cAAc,UAAU,YAAY;AAEtD;AAAA,IACE;AAAA,IACA;AAAA,IACA,CAAC,YAAY,KAAK,kBAAkB;AAClC,UAAI,QAAQ,WAAW;AACrB;AAAA,MACF;AAEA,UACG,cAAc,WAAW,gBAAgB,eACzC,cAAc,WAAW,gBAAgB,aAC1C;AACA,sBAAc;AACd,qBAAa,WAAW;AAAA,MAC1B;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAQO,SAAS,yBACd,QACA,iBAC2C;AAC3C,MAAI,kBAAkB,8BAA8B;AAClD,WAAO,EAAE,SAAS,OAAO,YAAY,MAAM;AAAA,EAC7C;AAEA,QAAM,UAAU,OAAO,QAAQ;AAC/B,QAAM,aAAa,OAAO,QAAQ;AAElC,MAAI,kBAAkB,gCAAgC;AACpD,WAAO,EAAE,SAAS,WAAW;AAAA,EAC/B;AAGA,SAAO;AAAA,IACL;AAAA,IACA,YAAY,cAAc,CAAC;AAAA,EAC7B;AACF;",
+  "names": []
+}

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

@@ -17,7 +17,7 @@ const CodeEditorInner = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const intl = useIntl();
   const {
     id,
-    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
     controlState,
     defaultFolding,
     folding,
@@ -34,14 +34,15 @@ const CodeEditorInner = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     onBlur,
     onFocus,
     // DEPRECATION: [APPDEV-19108] BREAKING-CHANGE: Remove gutterConfiguration prop.
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    // oxlint-disable-next-line typescript/no-deprecated
     gutterConfiguration,
     diagnostics,
     showLintGutter = false,
+    showOffScreenDiagnosticIndicators = false,
     size = "default",
     required = false,
     // DEPRECATION: [APPDEV-17404] BREAKING-CHANGE: Remove isControlled prop.
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    // oxlint-disable-next-line typescript/no-deprecated
     isControlled = false,
     className: consumerClassName,
     style: consumerStyle,
@@ -84,6 +85,7 @@ const CodeEditorInner = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       gutterConfiguration,
       diagnostics,
       showLintGutter,
+      showOffScreenDiagnosticIndicators,
       size,
       required,
       isControlled,

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';\nimport { ErrorBoundary } from 'react-error-boundary';\nimport { useIntl } from 'react-intl';\n\nimport { PLACEHOLDER_MESSAGES } from './codeEditorMessages.js';\nimport type { InlineDiagnostic } from './inline-diagnostic.js';\nimport { codeEditorLanguages } from './languages/languages.js';\nimport { ErrorFallback as EditorErrorFallback } from '../../core/components/error-fallback/ErrorFallback.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { createStratoLogger } from '../../core/sdk/sdk-logger.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 {\n  BaseCodeEditor,\n  type SharedBaseCodeEditorProps,\n} 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 * Props for the `CodeEditor` component.\n * @public\n */\nexport interface CodeEditorBaseProps extends SharedBaseCodeEditorProps {\n  /**\n   * The language for syntax highlighting and autocompletion.\n   * @defaultValue 'other'\n   */\n  language?: 'json' | 'js' | 'jsx' | 'ts' | 'tsx' | 'md' | 'yaml' | 'other';\n  // DEPRECATION: [APPDEV-19108] BREAKING-CHANGE: Remove `gutterConfiguration`.\n  /**\n   * Provides the gutter configuration to display a marker next to the fold gutter.\n   * @deprecated Use the `diagnostics` and `showLintGutter` props for per-line validation markers instead.\n   * Will be removed in a future major release.\n   */\n  gutterConfiguration?: GutterConfiguration;\n  /**\n   * Diagnostics to render inside the editor (underlines, hover tooltips).\n   * When provided, the built-in JSON linter is overridden.\n   */\n  diagnostics?: InlineDiagnostic[];\n  /**\n   * When `true`, shows a severity marker in a gutter column next to each diagnostic line.\n   * Has no effect when `diagnostics` is `undefined` or empty. Takes precedence over\n   * `gutterConfiguration` when both are set.\n   * @defaultValue false\n   */\n  showLintGutter?: boolean;\n}\n\n/**\n * Props for the `CodeEditor` in controlled usage.\n * @public\n */\nexport type CodeEditorControlledProps = {\n  /**\n   * The value of the editor in controlled mode.\n   * @defaultValue ''\n   */\n  value?: string;\n  /** Not allowed in controlled mode. */\n  defaultValue?: never;\n};\n\n/**\n * Props for the `CodeEditor` in uncontrolled usage.\n * @public\n */\nexport type CodeEditorUncontrolledProps = {\n  /** Not allowed in uncontrolled mode. */\n  value?: never;\n  /**\n   * The default value of the editor for uncontrolled usage.\n   */\n  defaultValue?: string;\n  /**\n   * `isControlled` has no effect without `value`.\n   * @deprecated [APPDEV-17404] BREAKING-CHANGE: Will be removed when controlled behaviour becomes the default.\n   */\n  isControlled?: never;\n};\n\n/**\n * Props for the `CodeEditor` component.\n * @public\n */\nexport type CodeEditorProps = CodeEditorBaseProps &\n  (CodeEditorControlledProps | CodeEditorUncontrolledProps);\n\n/**\n * Ref handle exposed by the `CodeEditor` component.\n * @public\n */\nexport type CodeEditorRef = {\n  /**\n   * Moves focus to the editor.\n   */\n  focus: () => void;\n  /**\n   * Selects the text within the given character-offset range.\n   */\n  selectRange: (range: { from: number; to: number }) => void;\n  /**\n   * The underlying editor container DOM element.\n   */\n  readonly element: HTMLDivElement | null;\n  /**\n   * Moves the cursor to the given character offset, or to the end of the document when `'end'` is passed.\n   */\n  setCursorPosition: (position: number | 'end') => void;\n};\n\nconst CodeEditorInner = /* @__PURE__ */ forwardRef<\n  CodeEditorRef,\n  CodeEditorProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const {\n    id,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n    controlState,\n    defaultFolding,\n    folding,\n    onFoldingChange,\n    spellCheck = false,\n    language = 'other',\n    placeholder = intl.formatMessage(PLACEHOLDER_MESSAGES[language]),\n    readOnly = false,\n    lineWrap = false,\n    fullHeight = false,\n    value,\n    defaultValue,\n    onChange,\n    onBlur,\n    onFocus,\n    // DEPRECATION: [APPDEV-19108] BREAKING-CHANGE: Remove gutterConfiguration prop.\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    gutterConfiguration,\n    diagnostics,\n    showLintGutter = false,\n    size = 'default',\n    required = false,\n    // DEPRECATION: [APPDEV-17404] BREAKING-CHANGE: Remove isControlled prop.\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    isControlled = 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 hasDiagnostics = diagnostics !== undefined;\n  const config = useMemo((): EditorLanguageConfiguration => {\n    return getLanguageConfig(\n      codeEditorLanguages[language],\n      readOnly,\n      hasDiagnostics,\n    );\n  }, [language, readOnly, hasDiagnostics]);\n\n  const valueProps = (\n    value !== undefined ? { value } : { defaultValue }\n  ) satisfies Partial<{ value: string; defaultValue: string }>;\n\n  return (\n    <BaseCodeEditor\n      id={id}\n      ref={forwardedRef}\n      placeholder={placeholder}\n      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n      controlState={controlState}\n      readOnly={readOnly}\n      folding={folding}\n      defaultFolding={defaultFolding}\n      onFoldingChange={onFoldingChange}\n      lineWrap={lineWrap}\n      {...valueProps}\n      onChange={onChange}\n      spellCheck={spellCheck}\n      fullHeight={fullHeight}\n      configuration={config}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      // DEPRECATION: [APPDEV-19108] BREAKING-CHANGE: Remove gutterConfiguration prop.\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      gutterConfiguration={gutterConfiguration}\n      diagnostics={diagnostics}\n      showLintGutter={showLintGutter}\n      size={size}\n      required={required}\n      // DEPRECATION: [APPDEV-17404] BREAKING-CHANGE: Remove isControlled prop.\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      isControlled={isControlled}\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 * 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, ref) => {\n  const stratoLogger = useMemo(\n    () => createStratoLogger.bind({ id: props.id })(COMPONENT_NAME),\n    [props.id],\n  );\n\n  return (\n    <ErrorBoundary\n      onError={(error) => stratoLogger.error(error?.message, error)}\n      FallbackComponent={(fallbackProps) => (\n        <EditorErrorFallback {...fallbackProps} />\n      )}\n    >\n      <CodeEditorInner {...props} ref={ref} />\n    </ErrorBoundary>\n  );\n});\n\n/**\n * If readOnly is true then there is no autocompletion.\n * When custom diagnostics are supplied, built-in language linter extensions\n * (e.g. jsonParseLinter) are stripped from `extendWith` so they don't conflict\n * with the consumer-supplied diagnostics.\n * @param languageConfig - standard language config\n * @param readOnly - whether the editor is readOnly\n * @param hasDiagnostics - whether the consumer supplies custom diagnostics\n * @returns new config with appropriate values\n * @internal\n */\nexport function getLanguageConfig(\n  languageConfig: EditorLanguageConfiguration,\n  readOnly: boolean,\n  hasDiagnostics: boolean = false,\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    // When the consumer provides custom diagnostics, strip built-in linter\n    // extensions so they don't conflict with external diagnostics.\n    extendWith: hasDiagnostics ? [] : languageConfig.extendWith,\n  };\n}\n\n(\n  CodeEditorInner as typeof CodeEditorInner & { displayName: string }\n).displayName = COMPONENT_NAME;\n(CodeEditor as typeof CodeEditor & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Language } from '@codemirror/language';\nimport { Extension } from '@codemirror/state';\nimport { forwardRef, useMemo } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\nimport { useIntl } from 'react-intl';\n\nimport { PLACEHOLDER_MESSAGES } from './codeEditorMessages.js';\nimport type { InlineDiagnostic } from './inline-diagnostic.js';\nimport { codeEditorLanguages } from './languages/languages.js';\nimport { ErrorFallback as EditorErrorFallback } from '../../core/components/error-fallback/ErrorFallback.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { createStratoLogger } from '../../core/sdk/sdk-logger.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 {\n  BaseCodeEditor,\n  type SharedBaseCodeEditorProps,\n} 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 * Props for the `CodeEditor` component.\n * @public\n */\nexport interface CodeEditorBaseProps extends SharedBaseCodeEditorProps {\n  /**\n   * The language for syntax highlighting and autocompletion.\n   * @defaultValue 'other'\n   */\n  language?: 'json' | 'js' | 'jsx' | 'ts' | 'tsx' | 'md' | 'yaml' | 'other';\n  // DEPRECATION: [APPDEV-19108] BREAKING-CHANGE: Remove `gutterConfiguration`.\n  /**\n   * Provides the gutter configuration to display a marker next to the fold gutter.\n   * @deprecated Use the `diagnostics` and `showLintGutter` props for per-line validation markers instead.\n   * Will be removed in a future major release.\n   */\n  gutterConfiguration?: GutterConfiguration;\n  /**\n   * Diagnostics to render inside the editor (underlines, hover tooltips).\n   * When provided, the built-in JSON linter is overridden.\n   */\n  diagnostics?: InlineDiagnostic[];\n  /**\n   * When `true`, shows a severity marker in a gutter column next to each diagnostic line.\n   * Has no effect when `diagnostics` is `undefined` or empty. Takes precedence over\n   * `gutterConfiguration` when both are set.\n   * @defaultValue false\n   */\n  showLintGutter?: boolean;\n  /**\n   * Renders floating pill buttons at the top and/or bottom edge of the editor\n   * when one or more `error`-severity diagnostics are scrolled out of the visible area.\n   *\n   * Has no effect when there are no `error`-severity diagnostics in the editor \u2014\n   * whether provided via the `diagnostics` prop or produced by a built-in\n   * CodeMirror linter (e.g. when `language=\"json\"`).\n   * @defaultValue false\n   */\n  showOffScreenDiagnosticIndicators?: boolean;\n}\n\n/**\n * Props for the `CodeEditor` in controlled usage.\n * @public\n */\nexport type CodeEditorControlledProps = {\n  /**\n   * The value of the editor in controlled mode.\n   * @defaultValue ''\n   */\n  value?: string;\n  /** Not allowed in controlled mode. */\n  defaultValue?: never;\n};\n\n/**\n * Props for the `CodeEditor` in uncontrolled usage.\n * @public\n */\nexport type CodeEditorUncontrolledProps = {\n  /** Not allowed in uncontrolled mode. */\n  value?: never;\n  /**\n   * The default value of the editor for uncontrolled usage.\n   */\n  defaultValue?: string;\n  /**\n   * `isControlled` has no effect without `value`.\n   * @deprecated [APPDEV-17404] BREAKING-CHANGE: Will be removed when controlled behaviour becomes the default.\n   */\n  isControlled?: never;\n};\n\n/**\n * Props for the `CodeEditor` component.\n * @public\n */\nexport type CodeEditorProps = CodeEditorBaseProps &\n  (CodeEditorControlledProps | CodeEditorUncontrolledProps);\n\n/**\n * Ref handle exposed by the `CodeEditor` component.\n * @public\n */\nexport type CodeEditorRef = {\n  /**\n   * Moves focus to the editor.\n   */\n  focus: () => void;\n  /**\n   * Selects the text within the given character-offset range.\n   */\n  selectRange: (range: { from: number; to: number }) => void;\n  /**\n   * The underlying editor container DOM element.\n   */\n  readonly element: HTMLDivElement | null;\n  /**\n   * Moves the cursor to the given character offset, or to the end of the document when `'end'` is passed.\n   */\n  setCursorPosition: (position: number | 'end') => void;\n};\n\nconst CodeEditorInner = /* @__PURE__ */ forwardRef<\n  CodeEditorRef,\n  CodeEditorProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const {\n    id,\n    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n    controlState,\n    defaultFolding,\n    folding,\n    onFoldingChange,\n    spellCheck = false,\n    language = 'other',\n    placeholder = intl.formatMessage(PLACEHOLDER_MESSAGES[language]),\n    readOnly = false,\n    lineWrap = false,\n    fullHeight = false,\n    value,\n    defaultValue,\n    onChange,\n    onBlur,\n    onFocus,\n    // DEPRECATION: [APPDEV-19108] BREAKING-CHANGE: Remove gutterConfiguration prop.\n    // oxlint-disable-next-line typescript/no-deprecated\n    gutterConfiguration,\n    diagnostics,\n    showLintGutter = false,\n    showOffScreenDiagnosticIndicators = false,\n    size = 'default',\n    required = false,\n    // DEPRECATION: [APPDEV-17404] BREAKING-CHANGE: Remove isControlled prop.\n    // oxlint-disable-next-line typescript/no-deprecated\n    isControlled = 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 hasDiagnostics = diagnostics !== undefined;\n  const config = useMemo((): EditorLanguageConfiguration => {\n    return getLanguageConfig(\n      codeEditorLanguages[language],\n      readOnly,\n      hasDiagnostics,\n    );\n  }, [language, readOnly, hasDiagnostics]);\n\n  const valueProps = (\n    value !== undefined ? { value } : { defaultValue }\n  ) satisfies Partial<{ value: string; defaultValue: string }>;\n\n  return (\n    <BaseCodeEditor\n      id={id}\n      ref={forwardedRef}\n      placeholder={placeholder}\n      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n      controlState={controlState}\n      readOnly={readOnly}\n      folding={folding}\n      defaultFolding={defaultFolding}\n      onFoldingChange={onFoldingChange}\n      lineWrap={lineWrap}\n      {...valueProps}\n      onChange={onChange}\n      spellCheck={spellCheck}\n      fullHeight={fullHeight}\n      configuration={config}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      // DEPRECATION: [APPDEV-19108] BREAKING-CHANGE: Remove gutterConfiguration prop.\n      // oxlint-disable-next-line typescript/no-deprecated\n      gutterConfiguration={gutterConfiguration}\n      diagnostics={diagnostics}\n      showLintGutter={showLintGutter}\n      showOffScreenDiagnosticIndicators={showOffScreenDiagnosticIndicators}\n      size={size}\n      required={required}\n      // DEPRECATION: [APPDEV-17404] BREAKING-CHANGE: Remove isControlled prop.\n      // oxlint-disable-next-line typescript/no-deprecated\n      isControlled={isControlled}\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 * 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, ref) => {\n  const stratoLogger = useMemo(\n    () => createStratoLogger.bind({ id: props.id })(COMPONENT_NAME),\n    [props.id],\n  );\n\n  return (\n    <ErrorBoundary\n      onError={(error) => stratoLogger.error(error?.message, error)}\n      FallbackComponent={(fallbackProps) => (\n        <EditorErrorFallback {...fallbackProps} />\n      )}\n    >\n      <CodeEditorInner {...props} ref={ref} />\n    </ErrorBoundary>\n  );\n});\n\n/**\n * If readOnly is true then there is no autocompletion.\n * When custom diagnostics are supplied, built-in language linter extensions\n * (e.g. jsonParseLinter) are stripped from `extendWith` so they don't conflict\n * with the consumer-supplied diagnostics.\n * @param languageConfig - standard language config\n * @param readOnly - whether the editor is readOnly\n * @param hasDiagnostics - whether the consumer supplies custom diagnostics\n * @returns new config with appropriate values\n * @internal\n */\nexport function getLanguageConfig(\n  languageConfig: EditorLanguageConfiguration,\n  readOnly: boolean,\n  hasDiagnostics: boolean = false,\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    // When the consumer provides custom diagnostics, strip built-in linter\n    // extensions so they don't conflict with external diagnostics.\n    extendWith: hasDiagnostics ? [] : languageConfig.extendWith,\n  };\n}\n\n(\n  CodeEditorInner as typeof CodeEditorInner & { displayName: string }\n).displayName = COMPONENT_NAME;\n(CodeEditor as typeof CodeEditor & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -42,7 +42,7 @@ const DQLEditorFwd = /* @__PURE__ */ forwardRef(
       id,
       defaultValue,
       value,
-      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
       controlState,
       onChange,
       folding,
@@ -62,7 +62,7 @@ const DQLEditorFwd = /* @__PURE__ */ forwardRef(
       size = "default",
       required,
       // DEPRECATION: [APPDEV-17404] BREAKING-CHANGE: Remove isControlled prop.
-      // eslint-disable-next-line @typescript-eslint/no-deprecated
+      // oxlint-disable-next-line typescript/no-deprecated
       isControlled = false,
       children,
       className: consumerClassName,