typo3-typescript-sources 14.3.6 → 14.3.8

package/backend/layout-module/drag-drop.ts

@@ -22,6 +22,7 @@ import RegularEvent from '@typo3/core/event/regular-event';
 import { DataTransferTypes } from '@typo3/backend/enum/data-transfer-types';
 import BroadcastService from '@typo3/backend/broadcast-service';
 import { BroadcastMessage } from '@typo3/backend/broadcast-message';
+import { isContentTypeAllowedInColumn } from '@typo3/backend/layout-module/column-restriction';
 import type ResponseInterface from '../ajax-data-handler/response-interface';
 import type { DragDropThumbnail, DragTooltipMetadata } from '@typo3/backend/drag-tooltip';
 import DragDropUtility from '@typo3/backend/utility/drag-drop-utility';
@@ -36,6 +37,7 @@ export type ContentElementDragDropData = {
   pid: number;
   uid: number;
   language: number;
+  cType: string;
   content: string;
   moveElementUrl: string;
 };
@@ -54,6 +56,8 @@ enum Classes {
 }
 
 class DragDrop {
+  private draggedContentType: string = '';
+
   constructor() {
     DocumentService.ready().then((): void => {
       this.initialize();
@@ -116,10 +120,13 @@ class DragDrop {
   protected onDragStart(event: DragEvent, target: HTMLElement): void {
     const content = target.closest(Identifiers.content) as HTMLElement;
 
+    this.draggedContentType = content.dataset.ctype ?? '';
+
     event.dataTransfer.setData(DataTransferTypes.content, JSON.stringify({
       pid: this.getCurrentPageId(),
       uid: parseInt(content.dataset.uid, 10),
       language: parseInt(content.dataset.languageUid, 10),
+      cType: this.draggedContentType,
       content: content.outerHTML,
       moveElementUrl: content.dataset.moveElementUrl,
     } as ContentElementDragDropData));
@@ -133,6 +140,7 @@ class DragDrop {
   }
 
   protected onDragEnd(): void {
+    this.draggedContentType = '';
     this.hideDropZones();
   }
 
@@ -176,6 +184,7 @@ class DragDrop {
 
       // the dragged elements language uid
       let language = contentElementDragDropData.language;
+      // Keep in sync with LanguageMarker::ALL_LANGUAGES on the PHP side.
       if (language !== -1) {
         // new elements language must be the same as the column the element is dropped in if element is not -1
         language = parseInt((dropContainer.closest('[data-language-uid]') as HTMLElement).dataset.languageUid, 10);
@@ -335,6 +344,9 @@ class DragDrop {
 
   protected showDropZones(): void {
     document.querySelectorAll(Identifiers.dropZone).forEach((element: HTMLElement): void => {
+      if (!isContentTypeAllowedInColumn(this.draggedContentType, element.closest('[data-colpos]'))) {
+        return;
+      }
       element.hidden = false;
       const addContentButton = element.parentElement.querySelector(Identifiers.addContent) as HTMLElement;
       if (addContentButton !== null) {

package/backend/layout-module/paste.ts

@@ -24,18 +24,21 @@ import Severity from '../severity';
 import '@typo3/backend/element/icon-element';
 import { SeverityEnum } from '../enum/severity';
 import RegularEvent from '@typo3/core/event/regular-event';
+import { isContentTypeAllowedForTarget } from '@typo3/backend/layout-module/column-restriction';
 import type ResponseInterface from '../ajax-data-handler/response-interface';
 import layoutLabels from '~labels/backend.layout';
 
 type PasteOptions = {
   itemOnClipboardUid: number;
   itemOnClipboardTitle: string;
+  itemOnClipboardCType: string;
   copyMode: string;
 };
 
 class Paste {
   private readonly itemOnClipboardUid: number = 0;
   private readonly itemOnClipboardTitle: string = '';
+  private readonly itemOnClipboardCType: string = '';
   private readonly copyMode: string = '';
   private readonly elementIdentifier: string = '.t3js-page-ce';
   private pasteAfterLinkTemplate: string = '';
@@ -47,6 +50,7 @@ class Paste {
   constructor(args: PasteOptions) {
     this.itemOnClipboardUid = args.itemOnClipboardUid;
     this.itemOnClipboardTitle = args.itemOnClipboardTitle;
+    this.itemOnClipboardCType = args.itemOnClipboardCType;
     this.copyMode = args.copyMode;
 
     DocumentService.ready().then((): void => {
@@ -96,6 +100,9 @@ class Paste {
   private activatePasteIcons(): void {
     if (this.pasteAfterLinkTemplate && this.pasteIntoLinkTemplate) {
       document.querySelectorAll('.t3js-page-new-ce').forEach((el: HTMLElement): void => {
+        if (!isContentTypeAllowedForTarget(this.itemOnClipboardCType, el)) {
+          return;
+        }
         const template = el.parentElement.dataset.page ? this.pasteIntoLinkTemplate : this.pasteAfterLinkTemplate;
         el.append(document.createRange().createContextualFragment(template));
       });

package/backend/localization/localization-wizard.ts

@@ -151,6 +151,9 @@ export class LocalizationWizard extends LitElement {
 
   private handleStepSummary(event: StepSummaryEvent) {
     const recordInfo = this.recordInfoTask.value;
+    if (recordInfo === undefined) {
+      return;
+    }
     event.detail.summaryData = [
       {
         label: recordInfo.typeName,

package/backend/localization/steps/handler-selection-step.ts

@@ -45,23 +45,18 @@ export class HandlerSelectionStep implements WizardStepInterface, WizardStepValu
           return [];
         }
 
-        try {
-          const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.wizard_localization_get_handlers)
-            .withQueryArguments({
-              recordType: recordType,
-              recordUid: recordUid,
-              sourceLanguage: sourceLanguage,
-              targetLanguage: targetLanguage,
-              mode: mode,
-            })
-            .get();
-          const handlers: LocalizationHandler[] = await response.resolve();
-
-          return handlers;
-        } catch (error) {
-          console.warn('Failed to fetch handlers:', error);
-          return [];
-        }
+        const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.wizard_localization_get_handlers)
+          .withQueryArguments({
+            recordType: recordType,
+            recordUid: recordUid,
+            sourceLanguage: sourceLanguage,
+            targetLanguage: targetLanguage,
+            mode: mode,
+          })
+          .get();
+        const handlers: LocalizationHandler[] = await response.resolve();
+
+        return handlers;
       },
       args: () => [this.context.recordType, this.context.recordUid, this.context.getStoreData('sourceLanguage'), this.context.getStoreData('targetLanguage'), this.context.getStoreData('localizationMode')],
       autoRun: false

package/backend/localization/steps/mode-step.ts

@@ -46,20 +46,15 @@ export class ModeStep implements WizardStepInterface, WizardStepValueInterface,
           return [];
         }
 
-        try {
-          const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.wizard_localization_get_modes).withQueryArguments({
-            recordType: recordType,
-            recordUid: recordUid,
-            targetLanguage: targetLanguage,
-            sourceLanguage: sourceLanguage,
-          }).get();
-          const modes: LocalizationMode[] = await response.resolve();
-
-          return modes;
-        } catch (error) {
-          console.warn('Failed to fetch localization modes:', error);
-          return [];
-        }
+        const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.wizard_localization_get_modes).withQueryArguments({
+          recordType: recordType,
+          recordUid: recordUid,
+          targetLanguage: targetLanguage,
+          sourceLanguage: sourceLanguage,
+        }).get();
+        const modes: LocalizationMode[] = await response.resolve();
+
+        return modes;
       },
       args: () => [this.context.recordType, this.context.recordUid, this.context.getStoreData('targetLanguage'), this.context.getStoreData('sourceLanguage')],
       autoRun: false

package/backend/localization/steps/source-language-step.ts

@@ -38,19 +38,14 @@ export class SourceLanguageStep implements WizardStepInterface, WizardStepValueI
           return [];
         }
 
-        try {
-          const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.wizard_localization_get_sources).withQueryArguments({
-            recordType: recordType,
-            recordUid: recordUid,
-            targetLanguage: targetLanguageId,
-          }).get();
-          const sourceLanguages: LocalizationLanguageRecord[] = await response.resolve();
-
-          return sourceLanguages;
-        } catch (error) {
-          console.warn('Failed to fetch source languages:', error);
-          return [];
-        }
+        const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.wizard_localization_get_sources).withQueryArguments({
+          recordType: recordType,
+          recordUid: recordUid,
+          targetLanguage: targetLanguageId,
+        }).get();
+        const sourceLanguages: LocalizationLanguageRecord[] = await response.resolve();
+
+        return sourceLanguages;
       },
       args: () => [this.context.recordType, this.context.recordUid, this.context.getStoreData('targetLanguage')],
       autoRun: false

package/backend/localization/steps/target-language-step.ts

@@ -37,24 +37,19 @@ export class TargetLanguageStep implements WizardStepInterface, WizardStepValueI
   constructor(private readonly context: LocalizationContext) {
     this.task = new Task(this.context.wizard, {
       task: async ([recordType, recordUid]: [string, number]): Promise<LocalizationLanguageRecord[]> => {
-        try {
-          const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.wizard_localization_get_targets).withQueryArguments({
-            recordType: recordType,
-            recordUid: recordUid,
-          }).get();
-          let targetLanguages: LocalizationLanguageRecord[] = await response.resolve();
-
-          // Filter to only the predefined target language if one exists vsia property
-          const predefinedTargetLanguage = this.context.targetLanguage;
-          if (predefinedTargetLanguage != null) {
-            targetLanguages = targetLanguages.filter(lang => lang.uid === predefinedTargetLanguage);
-          }
-
-          return targetLanguages;
-        } catch (error) {
-          console.warn('Failed to fetch target languages:', error);
-          return [];
+        const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.wizard_localization_get_targets).withQueryArguments({
+          recordType: recordType,
+          recordUid: recordUid,
+        }).get();
+        let targetLanguages: LocalizationLanguageRecord[] = await response.resolve();
+
+        // Filter to only the predefined target language if one exists vsia property
+        const predefinedTargetLanguage = this.context.targetLanguage;
+        if (predefinedTargetLanguage != null) {
+          targetLanguages = targetLanguages.filter(lang => lang.uid === predefinedTargetLanguage);
         }
+
+        return targetLanguages;
       },
       args: () => [this.context.recordType, this.context.recordUid],
       autoRun: false

package/backend/login-refresh.ts

@@ -284,15 +284,7 @@ class LoginRefresh {
           active: false,
           btnClass: 'btn-primary',
           name: 'refreshSession',
-          trigger: async (e: Event, modal: ModalElement) => {
-            modal.querySelector('form').requestSubmit();
-            const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.login_refresh).get();
-            const data = await response.resolve();
-            modal.hideModal();
-            if (!data.refresh.success) {
-              modal.dispatchEvent(new Event('show-login-form'));
-            }
-          }
+          form: 'beLoginRefresh',
         }
       ],
       content: html`

package/backend/modal.ts

@@ -16,6 +16,7 @@ import { customElement, property, state, query } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap, type StyleInfo } from 'lit/directives/style-map.js';
 import { classesArrayToClassInfo } from '@typo3/core/lit-helper';
 import RegularEvent from '@typo3/core/event/regular-event';
 import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
@@ -23,6 +24,7 @@ import type { AbstractAction } from './action-button/abstract-action';
 import type { ModalResponseEvent } from '@typo3/backend/modal-interface';
 import { SeverityEnum } from './enum/severity';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import Persistent from '@typo3/backend/storage/persistent';
 import Severity from './severity';
 import '@typo3/backend/element/icon-element';
 import '@typo3/backend/element/spinner-element';
@@ -121,6 +123,7 @@ export interface Configuration {
   staticBackdrop: boolean;
   hideCloseButton: boolean;
   hideHeader: boolean;
+  resizeIdentifier: string;
 }
 
 type PartialConfiguration = Partial<Omit<Configuration, 'buttons'> & { buttons: Array<Partial<Button>> }>;
@@ -129,6 +132,8 @@ let uniqueIdCounter = 0;
 
 @customElement('typo3-backend-modal')
 export class ModalElement extends LitElement {
+  private static readonly RESIZE_MIN_WIDTH = 400;
+
   @property({ type: String, reflect: true }) modalTitle: string = '';
   @property({ type: String, reflect: true }) content: string = '';
   @property({ type: String, reflect: true }) type: Types = Types.default;
@@ -140,10 +145,13 @@ export class ModalElement extends LitElement {
   @property({ type: Boolean }) hideHeader: boolean = false;
   @property({ type: Array }) additionalCssClasses: Array<string> = [];
   @property({ type: Array, attribute: false }) buttons: Array<Button> = [];
+  @property({ type: String, attribute: 'resize-identifier' }) resizeIdentifier: string = '';
 
   @state() templateResultContent: TemplateResult | JQuery | Element | DocumentFragment = null;
   @state() activeButton: Button = null;
   @query('dialog', true) dialog: HTMLDialogElement;
+  @state() private modalWidth?: number;
+  @state() private resizing: boolean = false;
 
   public callback: ModalCallbackFunction = null;
   public ajaxCallback: ModalCallbackFunction = null;
@@ -151,6 +159,7 @@ export class ModalElement extends LitElement {
   public userData: { [key: string]: any } = {};
 
   private readonly uniqueId: number;
+  private resizeReferencePosition: number = 0;
   #size: Sizes | SizeConfig = Sizes.default;
 
   constructor() {
@@ -196,6 +205,13 @@ export class ModalElement extends LitElement {
     }
   }
 
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    if (this.isResizable()) {
+      this.loadPersistedWidth();
+    }
+  }
+
   public setContent(content: TemplateResult | JQuery | Element | DocumentFragment): void {
     this.templateResultContent = content;
   }
@@ -256,6 +272,7 @@ export class ModalElement extends LitElement {
   }
 
   protected override render(): TemplateResult {
+    const resizable = this.isResizable();
     const classes: ClassInfo = classesArrayToClassInfo([
       'modal',
       't3js-modal',
@@ -264,11 +281,18 @@ export class ModalElement extends LitElement {
       `modal-severity-${Severity.getCssClass(this.severity)}`,
       ...this.getSizeClasses(),
       `modal-position-${this.position}`,
+      ...(resizable ? ['modal-resizable'] : []),
+      ...(this.resizing ? ['modal-resizing'] : []),
       ...this.additionalCssClasses,
     ]);
+    const dialogStyles: StyleInfo = {};
+    if (resizable && this.modalWidth) {
+      dialogStyles['--typo3-modal-width'] = `${this.modalWidth}px`;
+    }
     return html`
       <dialog
           class=${classMap(classes)}
+          style=${styleMap(dialogStyles)}
           aria-labelledby=${ifDefined(this.hideHeader ? undefined : `t3-modal-header-${this.uniqueId}`)}
           aria-label=${ifDefined(this.hideHeader ? this.modalTitle : undefined)}
           closedby=${this.hideCloseButton ? 'none' : 'closerequest'}
@@ -276,6 +300,7 @@ export class ModalElement extends LitElement {
           @cancel=${this.handleDialogCancel}
           @click=${this.handleDialogClick}
       >
+        ${resizable ? html`<div class="modal-resize-handle" @pointerdown=${this.startResize}></div>` : nothing}
         ${this.hideHeader ? nothing : html`
           <div class="modal-header t3js-modal-header">
             <div class="modal-header-title t3js-modal-title" id="t3-modal-header-${this.uniqueId}">${this.modalTitle}</div>
@@ -293,6 +318,7 @@ export class ModalElement extends LitElement {
             ${this.buttons.map(button => this.renderModalButton(button))}
           </div>
         `}
+        <div class="alert-container"></div>
       </dialog>
     `;
   }
@@ -364,6 +390,8 @@ export class ModalElement extends LitElement {
             if (this.ajaxCallback) {
               this.ajaxCallback(this);
             }
+            // Native autofocus only covers content present when the dialog opens
+            this.querySelector<HTMLElement>(`${Identifiers.body} [autofocus]`)?.focus();
             this.dispatchEvent(new CustomEvent('modal-loaded'));
           });
         })
@@ -480,6 +508,99 @@ export class ModalElement extends LitElement {
       { transform: 'translateX(0px)' },
     ], 150);
   }
+
+  /**
+   * Currently only "sheet" positioned modals (drawers docked to the viewport edge)
+   * support resizing, as it is the only position with a single free-floating edge.
+   */
+  private isResizable(): boolean {
+    return this.position === Positions.sheet;
+  }
+
+  private getResizePersistenceKey(): string | null {
+    if (!this.resizeIdentifier) {
+      return null;
+    }
+    return `resize.${this.resizeIdentifier}.modal`;
+  }
+
+  private loadPersistedWidth(): void {
+    const key = this.getResizePersistenceKey();
+    if (!key) {
+      return;
+    }
+    const stored = Persistent.get(key);
+    if (stored) {
+      const width = parseInt(stored, 10);
+      if (!isNaN(width) && width > 0) {
+        this.modalWidth = width;
+      }
+    }
+  }
+
+  private persistWidth(): void {
+    const key = this.getResizePersistenceKey();
+    if (key && this.modalWidth) {
+      Persistent.set(key, String(this.modalWidth));
+    }
+  }
+
+  private getMaxWidth(): number {
+    const computedMaxWidth = parseFloat(getComputedStyle(this.dialog).maxWidth);
+    return Number.isNaN(computedMaxWidth) ? window.innerWidth : computedMaxWidth;
+  }
+
+  private isRtl(): boolean {
+    return getComputedStyle(this).direction === 'rtl';
+  }
+
+  /**
+   * A "sheet" is docked to the inline-end edge (via margin-inline-end: 0), so its
+   * free edge to grab and drag is always the inline-start edge, in both directions.
+   */
+  private readonly startResize = (event: PointerEvent) => {
+    if (event.button !== 0) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+
+    const rect = this.dialog.getBoundingClientRect();
+    this.resizeReferencePosition = this.isRtl() ? rect.left : rect.right;
+
+    this.resizing = true;
+    const target = event.target as HTMLElement;
+    target.setPointerCapture(event.pointerId);
+    target.addEventListener('pointermove', this.handlePointerMove);
+    target.addEventListener('pointerup', this.handlePointerUp);
+    target.addEventListener('pointercancel', this.handlePointerUp);
+    target.addEventListener('lostpointercapture', this.handlePointerUp);
+  };
+
+  private readonly handlePointerMove = (event: PointerEvent) => {
+    if (!this.resizing) {
+      return;
+    }
+
+    const maxWidth = this.getMaxWidth();
+    let width = this.isRtl()
+      ? Math.round(event.clientX - this.resizeReferencePosition)
+      : Math.round(this.resizeReferencePosition - event.clientX);
+
+    width = Math.max(ModalElement.RESIZE_MIN_WIDTH, Math.min(width, maxWidth));
+    this.modalWidth = width;
+    this.dialog.style.setProperty('--typo3-modal-width', `${width}px`);
+  };
+
+  private readonly handlePointerUp = (event: PointerEvent) => {
+    const target = event.currentTarget as HTMLElement;
+    target.removeEventListener('pointermove', this.handlePointerMove);
+    target.removeEventListener('pointerup', this.handlePointerUp);
+    target.removeEventListener('pointercancel', this.handlePointerUp);
+    target.removeEventListener('lostpointercapture', this.handlePointerUp);
+    this.resizing = false;
+    this.persistWidth();
+  };
 }
 
 declare global {
@@ -517,7 +638,8 @@ class Modal {
     ajaxCallback: null,
     staticBackdrop: false,
     hideCloseButton: false,
-    hideHeader: false
+    hideHeader: false,
+    resizeIdentifier: '',
   };
 
   constructor() {
@@ -691,6 +813,9 @@ class Modal {
     configuration.hideCloseButton = configuration.hideCloseButton || this.defaultConfiguration.hideCloseButton;
     configuration.staticBackdrop = configuration.staticBackdrop || this.defaultConfiguration.staticBackdrop;
     configuration.hideHeader = configuration.hideHeader || this.defaultConfiguration.hideHeader;
+    configuration.resizeIdentifier = typeof configuration.resizeIdentifier === 'string'
+      ? configuration.resizeIdentifier
+      : this.defaultConfiguration.resizeIdentifier;
 
     return this.generate(configuration);
   }
@@ -813,6 +938,7 @@ class Modal {
     currentModal.hideCloseButton = configuration.hideCloseButton;
     currentModal.staticBackdrop = configuration.staticBackdrop;
     currentModal.hideHeader = configuration.hideHeader;
+    currentModal.resizeIdentifier = configuration.resizeIdentifier;
     if (configuration.callback) {
       currentModal.callback = configuration.callback;
     }
@@ -821,11 +947,10 @@ class Modal {
     }
 
     currentModal.addEventListener('typo3-modal-shown', (): void => {
-      // focus the button which was configured as active button
-      const activeButton = currentModal.querySelector(`${Identifiers.footer} .t3js-active`) as HTMLInputElement | null;
-      if (activeButton !== null) {
-        activeButton.focus();
-      }
+      // Prefer an autofocus field over the active button
+      const focusTarget = currentModal.querySelector<HTMLElement>(`${Identifiers.body} [autofocus]`)
+        ?? currentModal.querySelector<HTMLElement>(`${Identifiers.footer} .t3js-active`);
+      focusTarget?.focus();
     });
 
     // Remove modal from Modal.instances when hidden
@@ -834,10 +959,15 @@ class Modal {
         const lastIndex = this.instances.length - 1;
         this.instances.splice(lastIndex, 1);
         this.currentModal = this.instances[lastIndex - 1];
+        remountAlertContainer(this.currentModal);
       }
     });
 
     currentModal.addEventListener('typo3-modal-hidden', (): void => {
+      // A notification shown while the modal closes is placed in it, and must not be removed along with it
+      if (currentModal.querySelector('#alert-container') !== null) {
+        remountAlertContainer(this.currentModal);
+      }
       currentModal.remove();
     });
 
@@ -847,12 +977,38 @@ class Modal {
       this.instances.push(currentModal);
     });
 
+    currentModal.addEventListener('typo3-modal-shown', (): void => {
+      remountAlertContainer(currentModal);
+    });
+
     document.body.appendChild(currentModal);
 
     return currentModal;
   }
 }
 
+const remountAlertContainer = (modal: ModalElement | undefined) => {
+  const alertContainer = document.querySelector<HTMLDivElement>('#alert-container');
+  if (alertContainer) {
+    const isOpen = alertContainer.matches(':popover-open');
+    let target: HTMLElement = document.body;
+    if (modal) {
+      target = modal.querySelector('.alert-container') ?? target;
+    }
+
+    if ('moveBefore' in target) {
+      target.moveBefore(alertContainer, null);
+    } else {
+      (target as HTMLElement).appendChild(alertContainer);
+    }
+
+    if (isOpen) {
+      alertContainer.hidePopover();
+      alertContainer.showPopover();
+    }
+  }
+};
+
 let modalObject: Modal = null;
 try {
   if (parent && parent.window.TYPO3 && parent.window.TYPO3.Modal) {