typo3-typescript-sources 14.3.6 → 14.3.7

package/.last-synced-tag

@@ -1 +1 @@
-v14.3.6
+v14.3.7

package/README-TYPO3.md

@@ -75,7 +75,7 @@ with each other and with the public. Several TYPO3 teams use Slack as a
 way to communicate internally and most channels are a welcome place for
 you to join and get yourself involved.
 
-* Register: https://my.typo3.org/about-mytypo3org/slack
+* Register: https://typo3.community/meet/slack/
 * Slack: https://typo3.slack.com/
 
 ### Exchange information, ask questions, get help

package/README.md

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

package/backend/element/contextual-record-edit-trigger.ts

@@ -27,11 +27,17 @@ import labels from '~labels/backend.alt_doc';
  *
  * `url` attribute points to the contextual edit route
  * `edit-url` points to the full FormEngine route.
+ * `context` identifies what's being edited, used to persist the sheet's
+ * width independently per context. This might be just the database table
+ * (e.g. "pages" and "sys_category" are resized independently), but callers
+ * may pass a more specific value later, e.g. "tt_content.textmedia" vs.
+ * "tt_content.header", once per-CType widths are needed.
  *
  * @example
  * <typo3-backend-contextual-record-edit-trigger
  *   url="/typo3/record/edit/contextual?..."
- *   edit-url="/typo3/record/edit?...">
+ *   edit-url="/typo3/record/edit?..."
+ *   context="pages">
  *   Edit record
  * </typo3-backend-contextual-record-edit-trigger>
  */
@@ -39,6 +45,7 @@ import labels from '~labels/backend.alt_doc';
 export class ContextualRecordEditTriggerElement extends PseudoButtonLitElement {
   @property({ type: String }) url: string;
   @property({ type: String, attribute: 'edit-url' }) editUrl: string;
+  @property({ type: String }) context: string = '';
 
   protected override async buttonActivated(): Promise<void> {
     if (Persistent.isset('contextualRecordEdit') && Persistent.get('contextualRecordEdit') == 0) {
@@ -54,6 +61,7 @@ export class ContextualRecordEditTriggerElement extends PseudoButtonLitElement {
       size: Sizes.expand,
       position: Positions.sheet,
       hideHeader: true,
+      resizeIdentifier: `contextualEdit${this.context ? `.${this.context}` : ''}`,
     });
     this.setupMessageHandling(modal);
   }

package/backend/form-engine/element/extra/select-box-filter.ts

@@ -12,6 +12,7 @@
  */
 
 import RegularEvent from '@typo3/core/event/regular-event';
+import TextNormalizer from '@typo3/core/utility/text-normalizer';
 
 enum Selectors {
   fieldContainerSelector = '.t3js-formengine-field-group',
@@ -25,6 +26,7 @@ enum Selectors {
 class SelectBoxFilter {
   private readonly selectElement: HTMLSelectElement = null;
   private availableOptions: NodeListOf<HTMLOptionElement> = null;
+  private foldedLabels: string[] = null;
 
   constructor(selectElement: HTMLSelectElement) {
     this.selectElement = selectElement;
@@ -73,14 +75,15 @@ class SelectBoxFilter {
   private filter(filterText: string): void {
     if (this.availableOptions === null) {
       this.availableOptions = this.selectElement.querySelectorAll('option');
+      this.foldedLabels = Array.from(this.availableOptions, (option: HTMLOptionElement): string =>
+        TextNormalizer.foldCaseAndDiacritics(TextNormalizer.normalizeInvisibleCharacters(option.textContent)));
     }
 
-    // Escape filter text to prevent RegExp() exceptions
-    const escapedFilterText = filterText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    // A plain substring match, no RegExp involved, therefore nothing to escape either
+    const foldedFilterText = TextNormalizer.foldCaseAndDiacritics(TextNormalizer.normalizeInvisibleCharacters(filterText));
 
-    const matchFilter = new RegExp(escapedFilterText, 'i');
-    this.availableOptions.forEach((option: HTMLOptionElement): void => {
-      option.hidden = filterText.length > 0 && option.textContent.match(matchFilter) === null;
+    this.availableOptions.forEach((option: HTMLOptionElement, index: number): void => {
+      option.hidden = filterText.length > 0 && !this.foldedLabels[index].includes(foldedFilterText);
       SelectBoxFilter.toggleOptGroup(option);
     });
   }

package/backend/form-engine/element/select-tree.ts

@@ -14,6 +14,7 @@
 import { html, type TemplateResult } from 'lit';
 import { Tree, type TreeSettings } from '@typo3/backend/tree/tree';
 import { customElement, state } from 'lit/decorators.js';
+import TextNormalizer from '@typo3/core/utility/text-normalizer';
 import type { TreeNodeInterface } from '@typo3/backend/tree/tree-node';
 
 interface SelectTreeSettings extends TreeSettings {
@@ -48,6 +49,18 @@ export class SelectTree extends Tree
     this.addEventListener('typo3:tree:nodes-prepared', this.prepareLoadedNodes);
   }
 
+  /**
+   * Fold both sides of the comparison the filter performs, so that a node is
+   * found whether or not the diacritics of its name are typed.
+   *
+   * The names are folded on every keystroke rather than kept beside the node,
+   * because writing to a node triggers a re-render and the nodes are replaced
+   * whenever a part of the tree is loaded.
+   */
+  private static fold(value: string): string {
+    return TextNormalizer.foldCaseAndDiacritics(TextNormalizer.normalizeInvisibleCharacters(value));
+  }
+
   /**
    * Expand all nodes and refresh view
    */
@@ -89,7 +102,8 @@ export class SelectTree extends Tree
       this.nodes[0].__expanded = false;
     }
     const firstNode = this.nodes[0];
-    const regex = new RegExp(searchTerm, 'i');
+    // A plain substring match, no RegExp involved, therefore nothing to escape either
+    const foldedSearchTerm = SelectTree.fold(searchTerm ?? '');
 
     this.nodes.forEach((node: any) => {
       // skip the root node in searches
@@ -100,7 +114,7 @@ export class SelectTree extends Tree
       node.__expanded = false;
       node.__hidden = true;
 
-      if (regex.test(node.name)) {
+      if (SelectTree.fold(node.name).includes(foldedSearchTerm)) {
         results.push(node);
       }
     });

package/backend/form-engine/field-control/add-record.ts

@@ -33,7 +33,33 @@ class AddRecord {
   private readonly registerClickHandler = (e: Event): void => {
     e.preventDefault();
 
-    FormEngine.preventFollowLinkIfNotSaved(this.controlElement.getAttribute('href'));
+    const href = this.controlElement.getAttribute('href');
+    const url = new URL(href, window.location.origin);
+    const ownerUid = url.searchParams.get('P[uid]') || '';
+    if (ownerUid.startsWith('NEW')) {
+      // The record this field belongs to is itself still unsaved:
+      // Wizard/AddController can only link a newly created record back into
+      // an already-persisted uid, so a plain "leave without saving?" prompt
+      // would both discard this record AND silently fail to link anything.
+      // Deliberately not passing along this href's own P[returnUrl] here: for
+      // a field belonging to an inline/IRRE child that was itself added via
+      // AJAX (record_inline_create), that value is whatever URL rendered the
+      // child's markup at ajax-creation time. The ajax endpoint's own URL,
+      // not a real, navigable page. EditDocumentController computes the
+      // correct return-to-this-document URL itself once the save completes.
+      FormEngine.preventFollowAddRecordLinkIfNotSaved({
+        originalUid: ownerUid,
+        ownerTable: url.searchParams.get('P[table]') || '',
+        ownerField: url.searchParams.get('P[field]') || '',
+        table: url.searchParams.get('P[params][table]') || '',
+        pid: url.searchParams.get('P[params][pid]') || '',
+        setValue: url.searchParams.get('P[params][setValue]') || 'append',
+        flexFormPath: url.searchParams.get('P[flexFormPath]') || '',
+      });
+      return;
+    }
+
+    FormEngine.preventFollowLinkIfNotSaved(href);
   };
 }
 

package/backend/form-engine.ts

@@ -62,6 +62,7 @@ const enum FormAction {
   saveAndView = '_savedokview',
   saveAndNew = '_savedoknew',
   duplicate = '_duplicatedoc',
+  saveAndAddRecord = '_savedokaddrecord',
 }
 
 type OnChangeFieldHandlerCallback = (data: object, e: Event) => void;
@@ -134,7 +135,7 @@ export default (function() {
           btnClass: 'btn-' + Severity.getCssClass(Severity.warning),
           name: 'ok',
           trigger: () => {
-            FormEngine.closeModalsRecursive();
+            modal.hideModal();
             saveDocumentWithoutValidation();
           }
         }
@@ -900,6 +901,84 @@ export default (function() {
     }
   };
 
+  /**
+   * Show modal to confirm following a "+ add related record" (fieldControl.addRecord)
+   * link whose OWN record is itself still new/unsaved. Since Wizard/AddController
+   * can only link a newly created record back into an already-persisted uid,
+   * discarding here means abandoning the whole attempt (closing the document,
+   * same as preventExitIfNotSavedCallback) rather than following through to
+   * create an orphaned record that could never be linked back anyway. The
+   * only way to actually continue to the add-record wizard is "save first".
+   *
+   * @param {Object.<string, string>} addRecordParams
+   * @returns {Boolean}
+   */
+  FormEngine.preventFollowAddRecordLinkIfNotSaved = function(addRecordParams: {[key: string]: string}): boolean {
+    const title = backendAltDocLabels.get('label.confirm.add_record_unsaved_parent.title');
+    const content = backendAltDocLabels.get('label.confirm.add_record_unsaved_parent.content');
+    const buttons: Array<{text: string, btnClass: string, name: string, active?: boolean}> = [
+      {
+        text: backendAltDocLabels.get('buttons.confirm.close_without_save.no'),
+        btnClass: 'btn-default',
+        name: 'no'
+      },
+      {
+        text: backendAltDocLabels.get('buttons.confirm.close_without_save.yes'),
+        btnClass: 'btn-default',
+        name: 'yes'
+      }
+    ];
+    if (document.querySelector('.has-error') === null) {
+      buttons.push({
+        text: backendAltDocLabels.get('buttons.confirm.add_record_unsaved_parent.save'),
+        btnClass: 'btn-primary',
+        name: 'save',
+        active: true
+      });
+    }
+
+    const modal = Modal.confirm(title, content, Severity.warning, buttons);
+    modal.addEventListener('button.clicked', function(e: Event) {
+      modal.hideModal();
+      const name = (e.target as HTMLButtonElement).name;
+      if (name === 'yes') {
+        FormEngine.closeDocument();
+      } else if (name === 'save') {
+        FormEngine.saveAndContinueToAddRecord(addRecordParams);
+      }
+    });
+    return false;
+  };
+
+  /**
+   * Saves the current document, then (server-side, once the record this
+   * addRecordParams.originalUid placeholder was saved under is known)
+   * redirects on to Wizard/AddController for the field identified by
+   * addRecordParams, see FormAction::savedokaddrecord() /
+   * EditDocumentController::processData().
+   *
+   * @param {Object.<string, string>} addRecordParams
+   */
+  FormEngine.saveAndContinueToAddRecord = function(addRecordParams: {[key: string]: string}): void {
+    Object.keys(addRecordParams).forEach((key: string): void => {
+      const input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = 'addRecordAfterSave[' + key + ']';
+      input.value = addRecordParams[key];
+      FormEngine.formElement.append(input);
+    });
+    const actionInput = document.createElement('input');
+    actionInput.type = 'hidden';
+    actionInput.name = FormAction.saveAndAddRecord;
+    actionInput.value = '1';
+    FormEngine.formElement.append(actionInput);
+    // Submitted as a regular save on top: "_savedokaddrecord" is only understood by
+    // EditDocumentController, while other hosts of FormEngine forms (site configuration,
+    // constant editor, ...) test "_savedok" literally. Without it, such a form would
+    // neither save nor create anything and silently discard the submitted data.
+    submitFormWithAction(FormAction.save);
+  };
+
   /**
    * Show modal to confirm closing the document without saving
    */

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/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>
@@ -480,6 +505,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 +635,8 @@ class Modal {
     ajaxCallback: null,
     staticBackdrop: false,
     hideCloseButton: false,
-    hideHeader: false
+    hideHeader: false,
+    resizeIdentifier: '',
   };
 
   constructor() {
@@ -691,6 +810,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 +935,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;
     }