typo3-typescript-sources 14.3.8 → 14.3.10

package/adminpanel/admin-panel.ts

@@ -37,23 +37,23 @@
 
     constructor() {
       this.adminPanel = document.querySelector(AdminPanelSelectors.adminPanelRole) as HTMLFormElement;
-      this.modules = (this.querySelectorAll(AdminPanelSelectors.moduleTriggerRole) as Element[]).map(
-        (moduleTrigger: HTMLElement) => {
+      this.modules = this.querySelectorAll(AdminPanelSelectors.moduleTriggerRole).map(
+        (moduleTrigger) => {
           const moduleParent = moduleTrigger.closest(AdminPanelSelectors.moduleParentClass);
           return new AdminPanelModule(this, moduleParent, moduleTrigger);
         },
       );
       this.popups = this.querySelectorAll(AdminPanelSelectors.popupTriggerRole).map(
-        (popupTrigger: HTMLElement) => new AdminPanelPopup(this, popupTrigger),
+        (popupTrigger) => new AdminPanelPopup(this, popupTrigger),
       );
       this.querySelectorAll(AdminPanelSelectors.panelTriggerRole).forEach(
-        (panelTrigger: HTMLElement) => {
+        (panelTrigger) => {
           const panelParent = panelTrigger.closest(AdminPanelSelectors.panelParentClass);
           new AdminPanelPanel(panelParent, panelTrigger);
         },
       );
       this.querySelectorAll(AdminPanelSelectors.contentSettingsTriggerRole).forEach(
-        (contentSettingTrigger: HTMLElement) => {
+        (contentSettingTrigger) => {
           const contentSettingElement = contentSettingTrigger
             .closest(AdminPanelSelectors.contentParentClass)
             .querySelector(AdminPanelSelectors.contentSettingsParentClass);
@@ -67,11 +67,11 @@
     }
 
     disableModules(): void {
-      this.modules.forEach((module: AdminPanelModule) => module.disable());
+      this.modules.forEach((module) => module.disable());
     }
 
     disablePopups(): void {
-      this.popups.forEach((popup: AdminPanelPopup) => popup.disable());
+      this.popups.forEach((popup) => popup.disable());
     }
 
     renderBackdrop(): void {
@@ -93,33 +93,33 @@
       }
     }
 
-    private querySelectorAll(selectors: string, subject: Element = null): Node[] {
+    private querySelectorAll<T extends HTMLElement = HTMLElement>(selectors: string, subject: Element = null): T[] {
       if (subject === null) {
-        return Array.from(document.querySelectorAll(selectors));
+        return Array.from(document.querySelectorAll<T>(selectors));
       }
-      return Array.from(subject.querySelectorAll(selectors));
+      return Array.from(subject.querySelectorAll<T>(selectors));
     }
 
     private initializeEvents(): void {
       this
         .querySelectorAll(AdminPanelSelectors.contentTabRole)
-        .forEach((tab: HTMLElement) => tab.addEventListener('click', this.switchTab.bind(this)));
+        .forEach((tab) => tab.addEventListener('click', this.switchTab.bind(this)));
       this
         .querySelectorAll(AdminPanelSelectors.zoomTarget)
-        .forEach((zoomTrigger: HTMLElement) => zoomTrigger.addEventListener('click', this.openZoom.bind(this)));
+        .forEach((zoomTrigger) => zoomTrigger.addEventListener('click', this.openZoom.bind(this)));
       this
         .querySelectorAll(AdminPanelSelectors.zoomClose)
-        .forEach((zoomTrigger: HTMLElement) => zoomTrigger.addEventListener('click', this.closeZoom.bind(this)));
+        .forEach((zoomTrigger) => zoomTrigger.addEventListener('click', this.closeZoom.bind(this)));
       this
         .querySelectorAll(AdminPanelSelectors.triggerRole)
-        .forEach((trigger: HTMLElement) => trigger.addEventListener('click', this.toggleAdminPanelState.bind(this)));
+        .forEach((trigger) => trigger.addEventListener('click', this.toggleAdminPanelState.bind(this)));
       this
         .querySelectorAll(AdminPanelSelectors.saveButtonRole)
-        .forEach((elm: HTMLElement) => elm.addEventListener('click', this.sendAdminPanelForm.bind(this)));
+        .forEach((elm) => elm.addEventListener('click', this.sendAdminPanelForm.bind(this)));
 
       this
         .querySelectorAll('[data-typo3-role=typo3-adminPanel-content-close]')
-        .forEach((elm: HTMLElement) => {
+        .forEach((elm) => {
           elm.addEventListener('click', () => {
             this.disableModules();
             this.removeBackdrop();
@@ -127,7 +127,7 @@
         });
       this
         .querySelectorAll('.typo3-adminPanel-table th, .typo3-adminPanel-table td')
-        .forEach((elm: HTMLElement) => {
+        .forEach((elm) => {
           elm.addEventListener('click', () => {
             elm.focus();
             try {
@@ -149,9 +149,9 @@
       const contentTabs = this.querySelectorAll(AdminPanelSelectors.contentTabRole, currentContent);
       const contentPanes = this.querySelectorAll(AdminPanelSelectors.contentPaneRole, currentContent);
 
-      contentTabs.forEach((element: HTMLElement) => element.classList.remove(activeTabClass));
+      contentTabs.forEach((element) => element.classList.remove(activeTabClass));
       currentTab.classList.add(activeTabClass);
-      contentPanes.forEach((element: HTMLElement) => element.classList.remove(activePaneClass));
+      contentPanes.forEach((element) => element.classList.remove(activePaneClass));
 
       const activePane = document.querySelector('[data-typo3-tab-id=' + currentTab.dataset.typo3TabTarget + ']');
       activePane.classList.add(activePaneClass);
@@ -196,7 +196,7 @@
      */
     private getCleanReloadUrl(): string {
       const urlParams: string[] = [];
-      location.search.substr(1).split('&').forEach((item: string): void => {
+      location.search.substr(1).split('&').forEach((item): void => {
         if (item && !item.includes('ADMCMD_')) {
           urlParams.push(item);
         }
@@ -208,12 +208,12 @@
 
     private addBackdropListener(): void {
       this.querySelectorAll('.' + AdminPanelClasses.backdrop)
-        .forEach((elm: HTMLElement) => {
+        .forEach((elm) => {
           elm.addEventListener('click', () => {
             this.removeBackdrop();
             this
               .querySelectorAll(AdminPanelSelectors.moduleTriggerRole)
-              .forEach((innerElm: HTMLElement) => {
+              .forEach((innerElm) => {
                 innerElm.closest(AdminPanelSelectors.moduleParentClass)
                   .classList.remove(AdminPanelClasses.activeModule);
               });

package/adminpanel/modules/cache.ts

@@ -1,11 +1,11 @@
 ((): void => {
   class AdminPanelCache {
-    private readonly buttons: NodeList;
+    private readonly buttons: NodeListOf<HTMLElement>;
 
     constructor() {
-      this.buttons = document.querySelectorAll('[data-typo3-role="clearCacheButton"]');
+      this.buttons = document.querySelectorAll<HTMLElement>('[data-typo3-role="clearCacheButton"]');
 
-      this.buttons.forEach((element: HTMLElement): void => {
+      this.buttons.forEach((element): void => {
         element.addEventListener('click', (): void => {
           const url = element.dataset.typo3AjaxUrl;
           const request = new XMLHttpRequest();

package/backend/action-dispatcher.ts

@@ -19,6 +19,11 @@ import documentService from '@typo3/core/document-service';
 import Utility from '@typo3/backend/utility';
 
 declare type ActionDispatchArgument = unknown;
+/**
+ * Delegates are invoked with arguments resolved from the DOM, so their concrete
+ * signature is only known to the registering side.
+ */
+declare type ActionDispatchDelegate = (...args: never[]) => void;
 
 /**
  * Module: @typo3/backend/action-dispatcher
@@ -33,7 +38,7 @@ declare type ActionDispatchArgument = unknown;
  *  data-dispatch-disabled>
  */
 class ActionDispatcher {
-  private delegates: {[key: string]: (...args: ActionDispatchArgument[]) => void} = {};
+  private delegates: Record<string, ActionDispatchDelegate> = {};
 
   public constructor() {
     this.createDelegates();
@@ -82,7 +87,7 @@ class ActionDispatcher {
     const action = target.dataset.dispatchAction;
     let args: ActionDispatchArgument[] = ActionDispatcher.resolveArguments(target);
     if (args instanceof Array) {
-      args = args.map((arg: string): ActionDispatchArgument => {
+      args = args.map((arg): ActionDispatchArgument => {
         switch (arg) {
           case '{$target}':
             return target;
@@ -94,7 +99,7 @@ class ActionDispatcher {
       });
     }
     if (this.delegates[action]) {
-      this.delegates[action].apply(null, args || []);
+      this.delegates[action].apply(null, (args || []) as never[]);
     }
   }
 }

package/backend/bookmark/bookmark-manager.ts

@@ -21,6 +21,7 @@ import Modal from '../modal';
 import Notification from '../notification';
 import { SeverityEnum } from '../enum/severity';
 import { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
+import { topDocument } from '@typo3/core/utility/top-window';
 import '@typo3/backend/element/spinner-element';
 import '@typo3/backend/element/icon-element';
 import labels from '~labels/core.bookmarks';
@@ -1208,7 +1209,7 @@ export class BookmarkManagerButtonElement extends PseudoButtonLitElement {
 
   protected override buttonActivated(): void {
     // Create element in top frame to avoid adoptedStyleSheets cross-document issues
-    const targetDocument = top?.document ?? document;
+    const targetDocument = topDocument;
     const managerElement = targetDocument.createElement('typo3-backend-bookmark-manager-content') as BookmarkManagerContentElement;
     if (this.editId !== undefined) {
       managerElement.editId = this.editId;

package/backend/bookmark/bookmark-store.ts

@@ -20,6 +20,7 @@ import Notification from '../notification';
 import { SeverityEnum } from '../enum/severity';
 import { BroadcastMessage, type BroadcastEvent } from '@typo3/backend/broadcast-message';
 import BroadcastService from '@typo3/backend/broadcast-service';
+import { topWindow } from '@typo3/core/utility/top-window';
 
 export const BookmarkStoreChangedEvent = 'typo3:bookmark-store:changed';
 
@@ -159,10 +160,10 @@ class BookmarkStore {
     let bookmarks = await this.getBookmarks();
 
     if (options?.accessibleOnly) {
-      bookmarks = bookmarks.filter((b: Bookmark) => b.accessible);
+      bookmarks = bookmarks.filter((b) => b.accessible);
     }
     if (options?.groupId !== undefined) {
-      bookmarks = bookmarks.filter((b: Bookmark) => b.groupId === options.groupId);
+      bookmarks = bookmarks.filter((b) => b.groupId === options.groupId);
     }
     if (options?.limit !== undefined && options.limit > 0 && bookmarks.length > options.limit) {
       bookmarks = bookmarks.slice(0, options.limit);
@@ -178,8 +179,8 @@ class BookmarkStore {
       groupSortingMap.set(group.id, group.sorting);
     });
 
-    const groupIds = [...new Set(bookmarks.map((b: Bookmark) => b.groupId))];
-    const sortedBookmarkGroupIds = groupIds.sort((a: BookmarkGroupId, b: BookmarkGroupId) => {
+    const groupIds = [...new Set(bookmarks.map((b) => b.groupId))];
+    const sortedBookmarkGroupIds = groupIds.sort((a, b) => {
       // First sort by priority (lower values first)
       const priorityA = groupPriorityMap.get(a) ?? Number.MAX_SAFE_INTEGER;
       const priorityB = groupPriorityMap.get(b) ?? Number.MAX_SAFE_INTEGER;
@@ -195,7 +196,7 @@ class BookmarkStore {
     });
 
     for (const groupId of sortedBookmarkGroupIds) {
-      const groupBookmarks = bookmarks.filter((b: Bookmark) => b.groupId === groupId);
+      const groupBookmarks = bookmarks.filter((b) => b.groupId === groupId);
       if (groupBookmarks.length > 0) {
         grouped.set(groupId, groupBookmarks);
       }
@@ -683,19 +684,14 @@ class BookmarkStore {
  * Returns singleton instance from top frame, creating it if needed.
  */
 function getOrCreateInstance(): BookmarkStore {
-  try {
-    if (top?.TYPO3?.BookmarkStore) {
-      return top.TYPO3.BookmarkStore;
-    }
-    const instance = new BookmarkStore();
-    if (top?.TYPO3) {
-      top.TYPO3.BookmarkStore = instance;
-    }
-    return instance;
-  } catch {
-    // Cross-origin access denied, create local instance
-    return new BookmarkStore();
+  if (topWindow.TYPO3?.BookmarkStore) {
+    return topWindow.TYPO3.BookmarkStore;
+  }
+  const instance = new BookmarkStore();
+  if (topWindow.TYPO3) {
+    topWindow.TYPO3.BookmarkStore = instance;
   }
+  return instance;
 }
 
 export default getOrCreateInstance();

package/backend/clipboard-panel.ts

@@ -21,6 +21,7 @@ import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
 import Notification from '@typo3/backend/notification';
 import '@typo3/backend/element/spinner-element';
 import '@typo3/backend/element/icon-element';
+import { topWindow } from '@typo3/core/utility/top-window';
 
 enum CopyMode {
   cut = 'cut',
@@ -60,11 +61,12 @@ interface DispatchArgs {
  * Module: @typo3/backend/clipboard-panel
  *
  * @example
- * <typo3-backend-clipboard-panel return-url="/typo3/module" table="_FILE"></typo3-backend-clipboard-panel>
+ * <typo3-backend-clipboard-panel return-url="/typo3/module" module-url="/typo3/clipboard/process" table="_FILE"></typo3-backend-clipboard-panel>
  */
 @customElement('typo3-backend-clipboard-panel')
 export class ClipboardPanel extends LitElement {
   @property({ type: String, attribute: 'return-url' }) returnUrl: string = '';
+  @property({ type: String, attribute: 'module-url' }) moduleUrl: string = '';
   @property({ type: String }) table: string = '';
 
   private static renderLoader(): TemplateResult {
@@ -89,8 +91,12 @@ export class ClipboardPanel extends LitElement {
     `;
   }
 
+  private getModuleUrl(): string {
+    return this.moduleUrl || topWindow.TYPO3.settings.Clipboard.moduleUrl;
+  }
+
   private renderPanel(): Promise<TemplateResult> {
-    return (new AjaxRequest(top.TYPO3.settings.Clipboard.moduleUrl))
+    return (new AjaxRequest(this.getModuleUrl()))
       .withQueryArguments({ action: 'getClipboardData' })
       .post({ table: this.table })
       .then(async (response: AjaxResponse): Promise<TemplateResult> => {
@@ -105,7 +111,7 @@ export class ClipboardPanel extends LitElement {
               <div class="table-fit">
                 <table class="table">
                   <tbody>
-                    ${clipboardData.tabs.map((tab: ClipboardTab): TemplateResult => this.renderTab(tab, clipboardData))}
+                    ${clipboardData.tabs.map((tab): TemplateResult => this.renderTab(tab, clipboardData))}
                   </tbody>
                 </table>
               </div>
@@ -166,7 +172,7 @@ export class ClipboardPanel extends LitElement {
           `}
         </td>
       </tr>
-      ${clipboardData.current === tab.identifier && tab.items ? tab.items.map((tabItem: ClipboardTabItem): TemplateResult => this.renderTabItem(tabItem, tab.identifier, clipboardData)) : nothing}
+      ${clipboardData.current === tab.identifier && tab.items ? tab.items.map((tabItem): TemplateResult => this.renderTabItem(tabItem, tab.identifier, clipboardData)) : nothing}
     `;
   }
 
@@ -202,7 +208,7 @@ export class ClipboardPanel extends LitElement {
   private updateClipboard(event: PointerEvent, payload: object): void {
     event.preventDefault();
     const target: HTMLElement = event.currentTarget as HTMLElement;
-    (new AjaxRequest(top.TYPO3.settings.Clipboard.moduleUrl))
+    (new AjaxRequest(this.getModuleUrl()))
       .post(payload)
       .then(async (response: AjaxResponse): Promise<void> => {
         const resolvedBody = await response.resolve();

package/backend/code-editor/element/code-mirror-element.ts

@@ -163,7 +163,7 @@ export class CodeMirrorElement extends LitElement {
       root: document.body
     };
     const observer = new IntersectionObserver((entries: IntersectionObserverEntry[]): void => {
-      entries.forEach((entry: IntersectionObserverEntry): void => {
+      entries.forEach((entry): void => {
         if (entry.intersectionRatio > 0) {
           observer.unobserve(entry.target);
           if (this.firstElementChild && this.firstElementChild.nodeName.toLowerCase() === 'textarea') {

package/backend/code-editor/language/typoscript.ts

@@ -90,7 +90,7 @@ export async function complete(context: CompletionContext): Promise<CompletionRe
   const completions = getCompletions(tokenValue, keywords);
   return {
     from: completionStart,
-    options: completions.map((result: string) => {
+    options: completions.map((result) => {
       return { label: result, type: 'keyword' };
     })
   };
@@ -129,7 +129,7 @@ function extractCodemirror5StyleLineTokens(lineCount: number, context: Completio
     // stream parser doesn't perform proper tokenization.
     // Insert content as null-type token into the lineToken array.
     if (lastToken < start) {
-      context.state.sliceDoc(lastToken, start).split(context.state.lineBreak).forEach((part: string) => {
+      context.state.sliceDoc(lastToken, start).split(context.state.lineBreak).forEach((part) => {
         if (part) {
           lineTokens[Math.min(lineNumber - 1, lineCount - 1)].push({ type: null, string: part, start: lastToken, end: lastToken + part.length });
           lineNumber++;
@@ -162,7 +162,7 @@ function tokenIsSubStringOfKeywords(token: string, keywords: string[]): boolean
 }
 
 function getCompletions(token: string, keywords: string[]) {
-  const found = new Set();
+  const found = new Set<string>();
 
   const maybeAdd = (str: string) => {
     if (str.lastIndexOf(token, 0) === 0 && !found.has(str)) {

package/backend/code-editor/stream-parser/typoscript.ts

@@ -8,8 +8,8 @@ type Keyword = {
 };
 
 type CombinatorReturnType = boolean | undefined;
-type CombinatorFunction = (type?: Type, value?: unknown) => CombinatorReturnType;
-type CombinatorLexFunction = ((type?: Type, value?: unknown) => CombinatorReturnType) & { lex: true };
+type CombinatorFunction = (type?: Type, value?: Value) => CombinatorReturnType;
+type CombinatorLexFunction = ((type?: Type, value?: Value) => CombinatorReturnType) & { lex: true };
 type CC = CombinatorFunction | CombinatorLexFunction;
 
 type CX = {

package/backend/color-picker.ts

@@ -107,7 +107,7 @@ export class Typo3BackendColorPicker extends LitElement {
 
     // input: react on user input
     // change: react on indirect changes, e.g. a value picker
-    ['input', 'change'].forEach((eventName: string): void => {
+    ['input', 'change'].forEach((eventName): void => {
       new RegularEvent(eventName, (e: Event): void => {
         const input = (e.target as HTMLInputElement);
         this.color = input.value;
@@ -151,7 +151,7 @@ class LegacyColorPicker {
     }
 
     const colorPicker = document.createElement('typo3-backend-color-picker');
-    colorPicker.swatches = options.swatches.map((swatch: string) => ({ color: swatch, label: swatch }));
+    colorPicker.swatches = options.swatches.map((swatch) => ({ color: swatch, label: swatch }));
     colorPicker.opacity = options.opacity ?? false;
     element.parentNode.insertBefore(colorPicker, element);
     colorPicker.appendChild(element);

package/backend/column-selector-button.ts

@@ -116,7 +116,7 @@ export class ColumnSelectorButton extends PseudoButtonLitElement {
    * @private
    */
   private static filterColumns(columnsFilter: HTMLInputElement, columns: NodeListOf<HTMLInputElement>): void {
-    columns.forEach((column: HTMLInputElement) => {
+    columns.forEach((column) => {
       const columnContainer: HTMLDivElement = column.closest(Selectors.columnsContainerSelector);
       if (!column.disabled && columnContainer !== null) {
         const filterValue: string = columnContainer.querySelector('.form-check-label')?.textContent;
@@ -218,7 +218,7 @@ export class ColumnSelectorButton extends PseudoButtonLitElement {
     ColumnSelectorButton.toggleSelectorActions(columns, selectAll, selectNone, true);
 
     // Add event listener for each column to toggle the selector actions after change
-    columns.forEach((column: HTMLInputElement) => {
+    columns.forEach((column) => {
       column.addEventListener('change', (): void => {
         ColumnSelectorButton.toggleSelectorActions(columns, selectAll, selectNone);
       });
@@ -248,7 +248,7 @@ export class ColumnSelectorButton extends PseudoButtonLitElement {
 
     // Add event listener for all columns select actions. querySelectorAll will return
     // at least two actions (selectAll and selectNone) which we checked above already
-    columnsSelectorActions.querySelectorAll('button[data-action]').forEach((action: HTMLButtonElement) => {
+    columnsSelectorActions.querySelectorAll<HTMLButtonElement>('button[data-action]').forEach((action) => {
       action.addEventListener('click', (e: Event): void => {
         e.preventDefault();
 
@@ -261,21 +261,21 @@ export class ColumnSelectorButton extends PseudoButtonLitElement {
         // Perform requested action
         switch (target.dataset.action) {
           case SelectorActions.toggle:
-            columns.forEach((column: HTMLInputElement) => {
+            columns.forEach((column) => {
               if (!column.disabled && !ColumnSelectorButton.isColumnHidden(column)) {
                 column.checked = !column.checked;
               }
             });
             break;
           case SelectorActions.all:
-            columns.forEach((column: HTMLInputElement) => {
+            columns.forEach((column) => {
               if (!column.disabled && !ColumnSelectorButton.isColumnHidden(column)) {
                 column.checked = true;
               }
             });
             break;
           case SelectorActions.none:
-            columns.forEach((column: HTMLInputElement) => {
+            columns.forEach((column) => {
               if (!column.disabled && !ColumnSelectorButton.isColumnHidden(column)) {
                 column.checked = false;
               }

package/backend/context-help.ts

@@ -32,8 +32,8 @@ class ContextHelp {
 
   public async initialize(): Promise<void> {
     await DocumentService.ready();
-    const elements = document.querySelectorAll(this.selector);
-    elements.forEach((element: HTMLElement): void => {
+    const elements = document.querySelectorAll<HTMLElement>(this.selector);
+    elements.forEach((element): void => {
       element.dataset.bsHtml = 'true';
       element.dataset.bsPlacement = this.placement;
       element.dataset.bsTrigger = this.trigger;
@@ -56,7 +56,7 @@ class ContextHelp {
 
     new RegularEvent('click', (e: Event): void => {
       const me = e.target as HTMLElement;
-      elements.forEach((element: HTMLElement): void => {
+      elements.forEach((element): void => {
         if (!element.isEqualNode(me)) {
           Popover.hide(element);
         }

package/backend/context-menu-actions.ts

@@ -23,6 +23,7 @@ import Viewport from './viewport';
 import '@typo3/backend/new-record-wizard';
 import Utility from '@typo3/backend/utility';
 import { topLevelModuleImport } from '@typo3/backend/utility/top-level-module-import';
+import { topWindow, topDocument } from '@typo3/core/utility/top-window';
 import { html } from 'lit';
 import coreCommonLabels from '~labels/core.common';
 import cacheLabels from '~labels/core.cache';
@@ -38,7 +39,8 @@ class ContextMenuActions {
    * @returns {string}
    */
   public static getReturnUrl(): string {
-    return encodeURIComponent(top.list_frame.document.location.pathname + top.list_frame.document.location.search);
+    const location = topWindow.list_frame.document.location;
+    return encodeURIComponent(location.pathname + location.search);
   }
 
   public static editRecord(table: string, uid: number, dataset: DOMStringMap): void {
@@ -51,10 +53,10 @@ class ContextMenuActions {
     }
 
     Viewport.ContentContainer.setUrl(
-      top.TYPO3.settings.FormEngine.moduleUrl
+      topWindow.TYPO3.settings.FormEngine.moduleUrl
       + '&edit[' + table + '][' + uid + ']=edit'
       + overrideVals
-      + '&module=' + encodeURIComponent(top.TYPO3.ModuleMenu.App.getCurrentModule())
+      + '&module=' + encodeURIComponent(topWindow.TYPO3.ModuleMenu.App.getCurrentModule())
       + '&returnUrl=' + ContextMenuActions.getReturnUrl(),
     );
   }
@@ -112,7 +114,7 @@ class ContextMenuActions {
           pageId: uid
         },
       });
-      top.document.dispatchEvent(event);
+      topDocument.dispatchEvent(event);
     }
   }
 
@@ -152,13 +154,13 @@ class ContextMenuActions {
     }
 
     Viewport.ContentContainer.setUrl(
-      top.TYPO3.settings.FormEngine.moduleUrl + '&edit[' + table + '][' + (table !== 'pages' ? '-' : '') + uid + ']=new&returnUrl=' + ContextMenuActions.getReturnUrl(),
+      topWindow.TYPO3.settings.FormEngine.moduleUrl + '&edit[' + table + '][' + (table !== 'pages' ? '-' : '') + uid + ']=new&returnUrl=' + ContextMenuActions.getReturnUrl(),
     );
   }
 
   public static openHistoryPopUp(table: string, uid: number): void {
     Viewport.ContentContainer.setUrl(
-      top.TYPO3.settings.RecordHistory.moduleUrl + '&element=' + table + ':' + uid + '&returnUrl=' + ContextMenuActions.getReturnUrl(),
+      topWindow.TYPO3.settings.RecordHistory.moduleUrl + '&element=' + table + ':' + uid + '&returnUrl=' + ContextMenuActions.getReturnUrl(),
     );
   }
 
@@ -198,7 +200,7 @@ class ContextMenuActions {
   public static disableRecord(table: string, uid: number, dataset: DOMStringMap): void {
     const disableFieldName = dataset.disableField || 'hidden';
     Viewport.ContentContainer.setUrl(
-      top.TYPO3.settings.RecordCommit.moduleUrl
+      topWindow.TYPO3.settings.RecordCommit.moduleUrl
       + '&data[' + table + '][' + uid + '][' + disableFieldName + ']=1'
       + '&redirect=' + ContextMenuActions.getReturnUrl(),
     );
@@ -207,7 +209,7 @@ class ContextMenuActions {
   public static enableRecord(table: string, uid: number, dataset: DOMStringMap): void {
     const disableFieldName = dataset.disableField || 'hidden';
     Viewport.ContentContainer.setUrl(
-      top.TYPO3.settings.RecordCommit.moduleUrl
+      topWindow.TYPO3.settings.RecordCommit.moduleUrl
       + '&data[' + table + '][' + uid + '][' + disableFieldName + ']=0'
       + '&redirect=' + ContextMenuActions.getReturnUrl(),
     );
@@ -215,7 +217,7 @@ class ContextMenuActions {
 
   public static showInMenus(table: string, uid: number): void {
     Viewport.ContentContainer.setUrl(
-      top.TYPO3.settings.RecordCommit.moduleUrl
+      topWindow.TYPO3.settings.RecordCommit.moduleUrl
       + '&data[' + table + '][' + uid + '][nav_hide]=0'
       + '&redirect=' + ContextMenuActions.getReturnUrl(),
     );
@@ -223,7 +225,7 @@ class ContextMenuActions {
 
   public static hideInMenus(table: string, uid: number): void {
     Viewport.ContentContainer.setUrl(
-      top.TYPO3.settings.RecordCommit.moduleUrl
+      topWindow.TYPO3.settings.RecordCommit.moduleUrl
       + '&data[' + table + '][' + uid + '][nav_hide]=1'
       + '&redirect=' + ContextMenuActions.getReturnUrl(),
     );
@@ -350,7 +352,7 @@ class ContextMenuActions {
         + '&redirect=' + ContextMenuActions.getReturnUrl();
 
       Viewport.ContentContainer.setUrl(
-        top.TYPO3.settings.RecordCommit.moduleUrl + url,
+        topWindow.TYPO3.settings.RecordCommit.moduleUrl + url,
       );
     };
     if (!dataset.title) {
@@ -384,7 +386,7 @@ class ContextMenuActions {
   }
 
   private static refreshPageTree(): void {
-    top.document.dispatchEvent(new CustomEvent('typo3:pagetree:refresh'));
+    topDocument.dispatchEvent(new CustomEvent('typo3:pagetree:refresh'));
   }
 }
 

package/backend/context-menu.ts

@@ -18,6 +18,7 @@ import '@typo3/backend/element/spinner-element';
 import { customElement, queryAll, state } from 'lit/decorators.js';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import { delay } from '@typo3/core/lit-helper';
+import { topDocument } from '@typo3/core/utility/top-window';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { Task, initialState } from '@lit/task';
@@ -99,7 +100,7 @@ class ContextMenu {
       bubbles: true,
       composed: true
     });
-    top.document.dispatchEvent(contextMenuEvent);
+    topDocument.dispatchEvent(contextMenuEvent);
   }
 
   private handleTriggerEvent(event: PointerEvent): void {
@@ -192,11 +193,11 @@ export class ContextMenuElement extends LitElement {
     onComplete: () => {
       this.focusFirstElement = true;
     },
-    onError: (error: Error|AjaxResponse) => {
+    onError: (error: unknown) => {
       if (error instanceof AjaxResponse) {
         Notification.error('', error.response.status + ' ' + error.response.statusText, 5);
       } else {
-        Notification.error('', error.message);
+        Notification.error('', (error as Error).message);
       }
     },
   });
@@ -551,7 +552,7 @@ export class ContextMenuElement extends LitElement {
 
   private getNodeByIdentifier(identifier: string): MenuItemInterface | null {
     const flattenedNodes = this.flattenMenuItems(this.nodes);
-    return flattenedNodes.find((node: MenuItemInterface) => {
+    return flattenedNodes.find((node) => {
       return this.getNodeIdentifier(node) === identifier;
     }) ?? null;
   }
@@ -748,4 +749,9 @@ declare global {
   interface HTMLElementTagNameMap {
     'typo3-backend-context-menu': ContextMenuElement;
   }
+
+  interface DocumentEventMap {
+    [ContextMenuEvent.open]: CustomEvent<ContextMenuEventDetail>;
+    [ContextMenuEvent.close]: CustomEvent<ContextMenuEventDetail>;
+  }
 }

package/backend/contextual-record-edit.ts

@@ -15,6 +15,7 @@ import FormEngine from '@typo3/backend/form-engine';
 import Modal from '@typo3/backend/modal';
 import Severity from '@typo3/backend/severity';
 import DocumentService from '@typo3/core/document-service';
+import { topWindow } from '@typo3/core/utility/top-window';
 import '@typo3/backend/element/icon-element';
 import labels from '~labels/backend.alt_doc';
 
@@ -78,7 +79,7 @@ class ContextualRecordEdit {
         document.querySelectorAll('.has-change').forEach((el) => el.classList.remove('has-change'));
         // Navigate the content frame directly (same-origin access) — using
         // postMessage for this failed silently in Firefox.
-        top?.TYPO3?.Backend?.ContentContainer?.setUrl(this.fullscreenButton.href);
+        topWindow.TYPO3?.Backend?.ContentContainer?.setUrl(this.fullscreenButton.href);
         // Tell the parent to close the modal
         window.parent.postMessage(
           { actionName: 'typo3:editform:navigate' },