typo3-typescript-sources 14.3.9 → 14.3.11

package/.last-synced-tag

@@ -1 +1 @@
-v14.3.9
+v14.3.11

package/README.md

@@ -23,7 +23,7 @@ npm install github:maikschneider/typo3-typescript-sources#main
 
 - **Original Repository:** [TYPO3/typo3](https://github.com/TYPO3/typo3)
 - **Source Path:** `Build/Sources/TypeScript/`
-- **Current TYPO3 Version:** `v14.3.9`
+- **Current TYPO3 Version:** `v14.3.11`
 
 ## 🌿 Branches
 

package/adminpanel/admin-panel.ts

@@ -36,7 +36,7 @@
     private readonly trigger: HTMLElement;
 
     constructor() {
-      this.adminPanel = document.querySelector(AdminPanelSelectors.adminPanelRole) as HTMLFormElement;
+      this.adminPanel = document.querySelector<HTMLFormElement>(AdminPanelSelectors.adminPanelRole);
       this.modules = this.querySelectorAll(AdminPanelSelectors.moduleTriggerRole).map(
         (moduleTrigger) => {
           const moduleParent = moduleTrigger.closest(AdminPanelSelectors.moduleParentClass);
@@ -60,7 +60,7 @@
           new AdminPanelContentSetting(contentSettingElement, contentSettingTrigger);
         },
       );
-      this.trigger = document.querySelector(AdminPanelSelectors.triggerRole) as HTMLElement;
+      this.trigger = document.querySelector<HTMLElement>(AdminPanelSelectors.triggerRole);
 
       this.initializeEvents();
       this.addBackdropListener();

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';
@@ -1119,7 +1120,7 @@ export class BookmarkManagerContentElement extends LitElement {
 
   private async handleDropBookmark(draggedBookmark: Bookmark, target: Bookmark | BookmarkGroup | BookmarkGroupId, dropPosition?: 'before' | 'after'): Promise<void> {
     if (typeof target === 'object' && 'route' in target) {
-      const targetBookmark = target as Bookmark;
+      const targetBookmark = target;
       if (draggedBookmark.id === targetBookmark.id) {
         return;
       }
@@ -1208,8 +1209,8 @@ 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 managerElement = targetDocument.createElement('typo3-backend-bookmark-manager-content') as BookmarkManagerContentElement;
+    const targetDocument = topDocument;
+    const managerElement = targetDocument.createElement('typo3-backend-bookmark-manager-content');
     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';
 
@@ -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> => {
@@ -99,11 +105,17 @@ export class ClipboardPanel extends LitElement {
           const clipboardData: ClipboardData = resolvedBody.data;
           return html`
             <div class="panel panel-default" data-clipboard-panel>
-              <div class="panel-heading">
+              <div class="panel-heading" id="clipboard-panel-heading">
                 ${clipboardData.labels.clipboard}
               </div>
               <div class="table-fit">
-                <table class="table">
+                <table class="table" aria-labelledby="clipboard-panel-heading">
+                  <thead>
+                    <tr>
+                      <th scope="col" colspan="2" class="p-0 border-0"><span class="visually-hidden">${clipboardData.labels.element}</span></th>
+                      <th scope="col" class="p-0 border-0"><span class="visually-hidden">${clipboardData.labels.control}</span></th>
+                    </tr>
+                  </thead>
                   <tbody>
                     ${clipboardData.tabs.map((tab): TemplateResult => this.renderTab(tab, clipboardData))}
                   </tbody>
@@ -127,8 +139,8 @@ export class ClipboardPanel extends LitElement {
   private renderTab(tab: ClipboardTab, clipboardData: ClipboardData): TemplateResult {
     return html`
       <tr>
-        <td colspan="2" class="nowrap">
-          <button type="button" class="btn btn-link" aria-checked="${clipboardData.current === tab.identifier}" title="${tab.description}" data-action="setP" @click="${(event: PointerEvent) => this.updateClipboard(event, { CB: { 'setP': tab.identifier } })}">
+        <th scope="row" colspan="2" class="nowrap fw-normal">
+          <button type="button" class="btn btn-link" aria-current="${clipboardData.current === tab.identifier ? 'true' : nothing}" title="${tab.description}" data-action="setP" @click="${(event: PointerEvent) => this.updateClipboard(event, { CB: { 'setP': tab.identifier } })}">
             ${clipboardData.current === tab.identifier ? html`
               <typo3-backend-icon identifier="actions-check-circle-alt" size="small"></typo3-backend-icon>
               ${tab.title}
@@ -140,7 +152,7 @@ export class ClipboardPanel extends LitElement {
               </span>
             `}
           </button>
-        </td>
+        </th>
         <td class="col-control nowrap">
           ${clipboardData.current !== tab.identifier ? nothing : html`
             <div class="btn-toolbar btn-toolbar-nowrap">
@@ -176,11 +188,11 @@ export class ClipboardPanel extends LitElement {
         <td class="col-icon nowrap ${classMap({ 'ps-4': !tabItem.identifier })}">
           ${unsafeHTML(tabItem.icon)}
         </td>
-        <td class="col-title col-responsive nowrap">
+        <th scope="row" class="col-title col-responsive nowrap fw-normal">
           ${unsafeHTML(tabItem.title)}
           ${tabIdentifier === 'normal' ? html`<strong>(${clipboardData.copyMode === CopyMode.copy ? html`${clipboardData.labels.copy}` : html`${clipboardData.labels.cut}`})</strong>` : nothing}
           ${tabItem.thumb ? html`<div class="d-block">${unsafeHTML(tabItem.thumb)}</div>` : nothing}
-        </td>
+        </th>
         <td class="col-control nowrap">
           <div class="btn-group">
             ${!tabItem.infoDataDispatch ? nothing : html`
@@ -202,7 +214,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/language/typoscript.ts

@@ -47,7 +47,7 @@ export function typoscript() {
 
 const tsCodeCompletionInitializer = (async (): Promise<TsCodeCompletion> => {
   await DocumentService.ready();
-  const effectivePid = parseInt((document.querySelector('input[name="effectivePid"]') as HTMLInputElement)?.value, 10);
+  const effectivePid = parseInt((document.querySelector<HTMLInputElement>('input[name="effectivePid"]'))?.value, 10);
   return new TsCodeCompletion(effectivePid);
 })();
 

package/backend/column-selector-button.ts

@@ -168,7 +168,7 @@ export class ColumnSelectorButton extends PseudoButtonLitElement {
   }
 
   private processSelection(currentModal: HTMLElement): void {
-    const form: HTMLFormElement = currentModal.querySelector('form') as HTMLFormElement;
+    const form = currentModal.querySelector('form');
     if (form === null) {
       this.abortSelection();
       return;
@@ -192,7 +192,7 @@ export class ColumnSelectorButton extends PseudoButtonLitElement {
   }
 
   private handleModalContentLoaded(currentModal: HTMLElement): void {
-    const form: HTMLFormElement = currentModal.querySelector('form') as HTMLFormElement;
+    const form = currentModal.querySelector('form');
     if (form === null) {
       // Early return if modal content does not include a form
       return;

package/backend/context-menu-actions.ts

@@ -15,6 +15,8 @@ import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
 import { SeverityEnum } from './enum/severity';
 import AjaxDataHandler from './ajax-data-handler';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import ClientRequest from './event/client-request';
+import { isContextualRecordEditOpen, openContextualRecordEdit } from './element/contextual-record-edit-trigger';
 import InfoWindow from './info-window';
 import Modal, { type ModalElement } from './modal';
 import ModuleMenu from './module-menu';
@@ -23,6 +25,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 +41,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 {
@@ -50,13 +54,17 @@ class ContextMenuActions {
       overrideVals = '&overrideVals[pages][sys_language_uid]=' + pageLanguageId;
     }
 
-    Viewport.ContentContainer.setUrl(
-      top.TYPO3.settings.FormEngine.moduleUrl
-      + '&edit[' + table + '][' + uid + ']=edit'
+    const editParameters = '&edit[' + table + '][' + uid + ']=edit'
       + overrideVals
-      + '&module=' + encodeURIComponent(top.TYPO3.ModuleMenu.App.getCurrentModule())
-      + '&returnUrl=' + ContextMenuActions.getReturnUrl(),
-    );
+      + '&module=' + encodeURIComponent(topWindow.TYPO3.ModuleMenu.App.getCurrentModule())
+      + '&returnUrl=' + ContextMenuActions.getReturnUrl();
+
+    if (isContextualRecordEditOpen()) {
+      openContextualRecordEdit(topWindow.TYPO3.settings.FormEngine.contextualUrl + editParameters, table);
+      return;
+    }
+
+    Viewport.ContentContainer.setUrl(topWindow.TYPO3.settings.FormEngine.moduleUrl + editParameters);
   }
 
   public static viewRecord(table: string, uid: number, dataset: DOMStringMap): void {
@@ -112,7 +120,7 @@ class ContextMenuActions {
           pageId: uid
         },
       });
-      top.document.dispatchEvent(event);
+      topDocument.dispatchEvent(event);
     }
   }
 
@@ -152,13 +160,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(),
     );
   }
 
@@ -195,37 +203,49 @@ class ContextMenuActions {
     }
   }
 
+  /**
+   * Marks a navigation that commits a record and returns to the current
+   * module, so it is not handled as leaving the current view.
+   */
+  public static createRecordCommitRequest(): ClientRequest {
+    return new ClientRequest('typo3.recordCommit');
+  }
+
   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(),
+      ContextMenuActions.createRecordCommitRequest(),
     );
   }
 
   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(),
+      ContextMenuActions.createRecordCommitRequest(),
     );
   }
 
   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(),
+      ContextMenuActions.createRecordCommitRequest(),
     );
   }
 
   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(),
+      ContextMenuActions.createRecordCommitRequest(),
     );
   }
 
@@ -350,7 +370,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 +404,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 {
@@ -154,6 +155,9 @@ export class ContextMenuElement extends LitElement {
   @queryAll('.context-menu') contextMenuElements: HTMLDivElement[];
   @queryAll('.context-menu-item') contextMenuItemElements: HTMLButtonElement[];
   private readonly rootIdentifier: string = 'root';
+  // A modal <dialog> makes everything outside of it inert, so the menu is rendered
+  // into a popover that is mounted into the topmost open dialog while it is shown.
+  private readonly popoverHost: HTMLDivElement = document.createElement('div');
 
   private focusFirstElement: boolean = false;
 
@@ -210,6 +214,8 @@ export class ContextMenuElement extends LitElement {
     window.addEventListener('resize', this.hide);
     document.addEventListener(ContextMenuEvent.open, this.show);
     document.addEventListener(ContextMenuEvent.close, this.hide);
+    document.addEventListener('typo3-modal-show', this.hide);
+    document.addEventListener('typo3-modal-hide', this.hide);
   }
 
   public override disconnectedCallback(): void {
@@ -217,6 +223,8 @@ export class ContextMenuElement extends LitElement {
     window.removeEventListener('resize', this.hide);
     document.removeEventListener(ContextMenuEvent.open, this.show);
     document.removeEventListener(ContextMenuEvent.close, this.hide);
+    document.removeEventListener('typo3-modal-show', this.hide);
+    document.removeEventListener('typo3-modal-hide', this.hide);
   }
 
   protected override updated(): void {
@@ -231,7 +239,10 @@ export class ContextMenuElement extends LitElement {
   }
 
   protected override createRenderRoot(): HTMLElement | ShadowRoot {
-    return this;
+    this.popoverHost.classList.add('context-menu-host');
+    this.popoverHost.setAttribute('popover', 'manual');
+    this.append(this.popoverHost);
+    return this.popoverHost;
   }
 
   protected override render() {
@@ -264,6 +275,7 @@ export class ContextMenuElement extends LitElement {
     this.uid = detail.uid;
     this.context = detail.context;
     this.eventSource = detail.eventSource;
+    this.mountPopoverHost();
 
     if (detail.originalEvent !== null) {
       const offset = this.calculateIframeOffset(detail.originalEvent.view, window);
@@ -294,11 +306,31 @@ export class ContextMenuElement extends LitElement {
       return;
     }
     this.open = false;
+    this.unmountPopoverHost();
     this.fetchTask.run();
     await this.updateComplete;
     this.eventSource?.focus();
   };
 
+  private mountPopoverHost(): void {
+    const openDialogs = document.querySelectorAll<HTMLDialogElement>('typo3-backend-modal > dialog[open]');
+    const target: HTMLElement = openDialogs.item(openDialogs.length - 1) ?? this;
+    if (this.popoverHost.matches(':popover-open')) {
+      this.popoverHost.hidePopover();
+    }
+    if (this.popoverHost.parentElement !== target) {
+      target.append(this.popoverHost);
+    }
+    this.popoverHost.showPopover();
+  }
+
+  private unmountPopoverHost(): void {
+    if (this.popoverHost.matches(':popover-open')) {
+      this.popoverHost.hidePopover();
+    }
+    this.append(this.popoverHost);
+  }
+
   private renderOverlay(): TemplateResult {
     return html`
       <div
@@ -593,7 +625,7 @@ export class ContextMenuElement extends LitElement {
   }
 
   private getElementFromNode(node: MenuItemInterface): HTMLElement | null {
-    return this.querySelector('[data-contextmenu-id="' + this.getNodeIdentifier(node) + '"]');
+    return this.renderRoot.querySelector<HTMLElement>('[data-contextmenu-id="' + this.getNodeIdentifier(node) + '"]');
   }
 
   private enhanceNodes(parentIdentifier: string, nodes: RawMenuItemInterface[]): MenuItemInterface[] {