typo3-typescript-sources 14.3.10 → 14.3.11

package/.last-synced-tag

@@ -1 +1 @@
-v14.3.10
+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.10`
+- **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

@@ -1120,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;
       }
@@ -1210,7 +1210,7 @@ export class BookmarkManagerButtonElement extends PseudoButtonLitElement {
   protected override buttonActivated(): void {
     // Create element in top frame to avoid adoptedStyleSheets cross-document issues
     const targetDocument = topDocument;
-    const managerElement = targetDocument.createElement('typo3-backend-bookmark-manager-content') as BookmarkManagerContentElement;
+    const managerElement = targetDocument.createElement('typo3-backend-bookmark-manager-content');
     if (this.editId !== undefined) {
       managerElement.editId = this.editId;
     }

package/backend/clipboard-panel.ts

@@ -105,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>
@@ -133,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}
@@ -146,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">
@@ -182,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`

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';
@@ -52,13 +54,17 @@ class ContextMenuActions {
       overrideVals = '&overrideVals[pages][sys_language_uid]=' + pageLanguageId;
     }
 
-    Viewport.ContentContainer.setUrl(
-      topWindow.TYPO3.settings.FormEngine.moduleUrl
-      + '&edit[' + table + '][' + uid + ']=edit'
+    const editParameters = '&edit[' + table + '][' + uid + ']=edit'
       + overrideVals
       + '&module=' + encodeURIComponent(topWindow.TYPO3.ModuleMenu.App.getCurrentModule())
-      + '&returnUrl=' + ContextMenuActions.getReturnUrl(),
-    );
+      + '&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 {
@@ -197,12 +203,21 @@ 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(
       topWindow.TYPO3.settings.RecordCommit.moduleUrl
       + '&data[' + table + '][' + uid + '][' + disableFieldName + ']=1'
       + '&redirect=' + ContextMenuActions.getReturnUrl(),
+      ContextMenuActions.createRecordCommitRequest(),
     );
   }
 
@@ -212,6 +227,7 @@ class ContextMenuActions {
       topWindow.TYPO3.settings.RecordCommit.moduleUrl
       + '&data[' + table + '][' + uid + '][' + disableFieldName + ']=0'
       + '&redirect=' + ContextMenuActions.getReturnUrl(),
+      ContextMenuActions.createRecordCommitRequest(),
     );
   }
 
@@ -220,6 +236,7 @@ class ContextMenuActions {
       topWindow.TYPO3.settings.RecordCommit.moduleUrl
       + '&data[' + table + '][' + uid + '][nav_hide]=0'
       + '&redirect=' + ContextMenuActions.getReturnUrl(),
+      ContextMenuActions.createRecordCommitRequest(),
     );
   }
 
@@ -228,6 +245,7 @@ class ContextMenuActions {
       topWindow.TYPO3.settings.RecordCommit.moduleUrl
       + '&data[' + table + '][' + uid + '][nav_hide]=1'
       + '&redirect=' + ContextMenuActions.getReturnUrl(),
+      ContextMenuActions.createRecordCommitRequest(),
     );
   }
 

package/backend/context-menu.ts

@@ -155,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;
 
@@ -211,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 {
@@ -218,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 {
@@ -232,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() {
@@ -265,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);
@@ -295,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
@@ -594,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[] {

package/backend/contextual-record-edit.ts

@@ -12,12 +12,15 @@
  */
 
 import FormEngine from '@typo3/backend/form-engine';
-import Modal from '@typo3/backend/modal';
+import type { Consumable } from '@typo3/backend/event/consumable';
+import type TriggerRequest from '@typo3/backend/event/trigger-request';
+import Modal, { type ModalElement } 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 { topDocument, topWindow } from '@typo3/core/utility/top-window';
 import '@typo3/backend/element/icon-element';
 import labels from '~labels/backend.alt_doc';
+import coreCommonLabels from '~labels/core.common';
 
 type ContextualRecordEditOptions = {
   justSaved?: boolean;
@@ -38,6 +41,8 @@ class ContextualRecordEdit {
   private closeButton: HTMLButtonElement | null = null;
   private fullscreenButton: HTMLAnchorElement | null = null;
   private readonly options: ContextualRecordEditOptions;
+  // "<table>:<uid>" of the edited record
+  private readonly record: string = ContextualRecordEdit.resolveRecord();
 
   constructor(options: ContextualRecordEditOptions = {}) {
     this.options = options;
@@ -48,11 +53,22 @@ class ContextualRecordEdit {
     });
   }
 
+  private static resolveRecord(): string {
+    for (const key of new URL(window.location.href).searchParams.keys()) {
+      const match = key.match(/^edit\[([^\]]+)]\[(\d+)]$/);
+      if (match !== null) {
+        return match[1] + ':' + match[2];
+      }
+    }
+    return '';
+  }
+
   private initialize(): void {
     this.initializeCloseButton();
     this.initializeFullscreenButton();
     this.initializeEscapeKey();
     this.initializeParentMessages();
+    this.initializeNavigationGuard();
     this.handlePostSaveState();
     if (!this.options.justSaved) {
       this.focusFirstElement();
@@ -74,42 +90,101 @@ class ContextualRecordEdit {
     }
     this.fullscreenButton.addEventListener('click', (e: Event): void => {
       e.preventDefault();
-      const navigate = (): void => {
-        // Clear FormEngine's dirty tracking so it doesn't show its own confirmation after ours
-        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.
+      // Navigate the content frame directly (same-origin access), using
+      // postMessage for this failed silently in Firefox. The navigation
+      // guard asks to discard unsaved changes and closes the sheet.
+      FormEngine.ready().then((): void => {
         topWindow.TYPO3?.Backend?.ContentContainer?.setUrl(this.fullscreenButton.href);
-        // Tell the parent to close the modal
-        window.parent.postMessage(
-          { actionName: 'typo3:editform:navigate' },
-          window.location.origin
-        );
-      };
-      if (FormEngine.hasChange()) {
-        Modal.confirm(
-          labels.get('label.confirm.close_without_save.title'),
-          labels.get('label.confirm.close_without_save.content'),
-          Severity.warning,
-          [
-            {
-              text: labels.get('buttons.confirm.close_without_save.no'),
-              btnClass: 'btn-default',
-              trigger: (_e, modal): void => { modal.hideModal(); },
-            },
-            {
-              text: labels.get('buttons.confirm.close_without_save.yes'),
-              btnClass: 'btn-warning',
-              trigger: (_e, modal): void => { modal.hideModal(); navigate(); },
-            },
-          ]
-        );
-      } else {
-        navigate();
+      });
+    });
+  }
+
+  /**
+   * Navigating the content frame while the sheet is open (e.g. via a context
+   * menu action) would load the target behind the sheet. The sheet therefore
+   * replaces FormEngine as navigation guard and closes itself instead.
+   */
+  private initializeNavigationGuard(): void {
+    const consumerScope = topWindow.TYPO3?.Backend?.consumerScope;
+    if (!consumerScope) {
+      return;
+    }
+    const navigationGuard: Consumable = {
+      consume: (interactionRequest: TriggerRequest): Promise<void> | null => {
+        if (!interactionRequest.concernsTypes(['typo3.setUrl'])) {
+          return null;
+        }
+        // Stays pending if the user keeps editing, which cancels the navigation
+        return new Promise<void>((resolve): void => {
+          if (interactionRequest.concernsTypes(['typo3.recordCommit'])) {
+            // A record commit returns to the current module, so the sheet stays
+            // open and is reloaded once the commit is done to show its result.
+            this.confirmDiscardChanges((): void => {
+              topDocument.addEventListener('typo3-module-loaded', () => this.reload(), { once: true });
+              resolve();
+            });
+            return;
+          }
+          this.confirmDiscardChanges((): void => {
+            resolve();
+            window.parent.postMessage(
+              { actionName: 'typo3:editform:navigate' },
+              window.location.origin
+            );
+          });
+        });
+      },
+    };
+    let pageHidden = false;
+    window.addEventListener('pagehide', (): void => {
+      pageHidden = true;
+      consumerScope.detach(navigationGuard);
+    }, { once: true });
+    FormEngine.ready().then((): void => {
+      if (pageHidden) {
+        return;
       }
+      consumerScope.detach(FormEngine);
+      consumerScope.attach(navigationGuard);
     });
   }
 
+  private reload(): void {
+    const url = new URL(window.location.href);
+    url.searchParams.delete('justSaved');
+    window.location.replace(url.toString());
+  }
+
+  private confirmDiscardChanges(onDiscard: () => void, onSave: (() => void) | null = null): void {
+    if (!FormEngine.hasChange()) {
+      onDiscard();
+      return;
+    }
+    Modal.confirm(
+      labels.get('label.confirm.close_without_save.title'),
+      labels.get('label.confirm.close_without_save.content'),
+      Severity.warning,
+      [
+        {
+          text: labels.get('buttons.confirm.close_without_save.no'),
+          btnClass: 'btn-default',
+          trigger: (_e, modal): void => { modal.hideModal(); },
+        },
+        {
+          text: labels.get('buttons.confirm.close_without_save.yes'),
+          btnClass: 'btn-default',
+          trigger: (_e, modal): void => { modal.hideModal(); onDiscard(); },
+        },
+        ...(onSave !== null && document.querySelector('.has-error') === null ? [{
+          text: coreCommonLabels.get('save'),
+          btnClass: 'btn-primary',
+          active: true,
+          trigger: (_e: Event, modal: ModalElement): void => { modal.hideModal(); onSave(); },
+        }] : []),
+      ]
+    );
+  }
+
   private initializeEscapeKey(): void {
     document.addEventListener('keydown', (e: KeyboardEvent): void => {
       if (e.key === 'Escape') {
@@ -127,6 +202,11 @@ class ContextualRecordEdit {
       if (event.data?.actionName === 'typo3:editform:requestclose') {
         this.requestClose();
       }
+      if (event.data?.actionName === 'typo3:editform:reload') {
+        // Saving the stale form of the record that was just saved elsewhere would revert that change
+        const canSave = event.data.savedRecord !== this.record;
+        this.confirmDiscardChanges((): void => this.reload(), canSave ? (): void => FormEngine.saveDocument() : null);
+      }
     });
   }
 
@@ -139,6 +219,7 @@ class ContextualRecordEdit {
         {
           actionName: 'typo3:editform:saved',
           recordTitle: this.options.savedRecordTitle ?? '',
+          record: this.record,
         },
         window.location.origin
       );

package/backend/date-time-picker.ts

@@ -145,7 +145,7 @@ class DateTimePicker {
    */
   private getScrollEvent(): ThrottleEvent {
     return new ThrottleEvent('scroll', (): void => {
-      const activeFlatpickrElement = document.querySelector('.flatpickr-input.active') as FlatpickrInputElement;
+      const activeFlatpickrElement = document.querySelector<FlatpickrInputElement>('.flatpickr-input.active');
       if (activeFlatpickrElement === null) {
         return;
       }