typo3-typescript-sources 14.3.4 → 14.3.5

package/.last-synced-tag

@@ -1 +1 @@
-v14.3.4
+v14.3.5

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.4`
+- **Current TYPO3 Version:** `v14.3.5`
 
 ## 🌿 Branches
 

package/backend/drag-uploader.ts

@@ -47,6 +47,8 @@ enum Mode {
   BROWSE = 'browse',
 }
 
+const uploadFinishedEventName = 'typo3:drag-uploader:upload-finished';
+
 /**
  * Properties of a file as returned from the AJAX action; essential, this is a serialized instance of
  * \TYPO3\CMS\Core\Resource\File plus some extra properties (see FileController::flattenResultDataValue())
@@ -208,6 +210,8 @@ export default class DragUploader {
     dropzoneCloseButton.addEventListener('click', this.hideDropzone);
     this.dropzone.append(dropzoneCloseButton);
 
+    document.addEventListener(uploadFinishedEventName, this.closeDropzone);
+
     // no filelist then create own progress table
     if (this.fileList === null) {
       this.fileList = document.createElement('table');
@@ -289,6 +293,18 @@ export default class DragUploader {
     this.dropzone.removeAttribute('hidden');
   }
 
+  public closeDropzone = (): void => {
+    this.dropzone.hidden = true;
+    this.dropzone.classList.remove('drop-status-ok');
+
+    if (this.irreObjectUid !== undefined) {
+      // Hide artificial file table in IRRE context
+      this.fileList.parentElement.hidden = true;
+    }
+    // User manually hides the dropzone, so we can reset the flag
+    this.manuallyTriggered = false;
+  };
+
   /**
    *
    * @param {Event} event
@@ -296,10 +312,7 @@ export default class DragUploader {
   public hideDropzone = (event: Event): void => {
     event.stopPropagation();
     event.preventDefault();
-    this.dropzone.setAttribute('hidden', 'hidden');
-    this.dropzone.classList.remove('drop-status-ok');
-    // User manually hides the dropzone, so we can reset the flag
-    this.manuallyTriggered = false;
+    this.closeDropzone();
   };
 
   /**
@@ -442,6 +455,8 @@ export default class DragUploader {
     if (this.queueLength > 0) {
       this.queueLength--;
       if (this.queueLength === 0) {
+        document.dispatchEvent(new CustomEvent(uploadFinishedEventName));
+
         const timeout: number = messages && messages.length ? 5000 : 0;
         if (timeout) {
           for (const flashMessage of messages) {
@@ -612,6 +627,8 @@ export default class DragUploader {
 
     modal.addEventListener('typo3-modal-hidden', () => {
       this.askForOverride = [];
+
+      document.dispatchEvent(new CustomEvent(uploadFinishedEventName));
     });
   }
 }

package/backend/element/editable-page-title.ts

@@ -211,9 +211,11 @@ export class EditablePageTitle extends LitElement {
     return this.editable && this.pageId > 0;
   }
 
-  private endEditing(): void {
+  private async endEditing(): Promise<void> {
     if (this.isEditable()) {
       this._isEditing = false;
+      await new Promise<void>((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+      this.shadowRoot.querySelector<HTMLButtonElement>('button[data-action="edit"]')?.focus();
     }
   }
 

package/backend/element/status-indicator-element.ts

@@ -0,0 +1,93 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { customElement, property } from 'lit/decorators.js';
+import { html, LitElement, nothing, type TemplateResult } from 'lit';
+import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
+
+// The first group are the base colours; the second group are semantic states
+// that map to one of those base colours in the stylesheet, so a recurring
+// domain concept looks identical wherever it appears in the backend. Keep the
+// semantic group small and curated rather than introducing new colours.
+export type StatusIndicatorState =
+  | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'notice' | 'default'
+  | 'active' | 'online' | 'running' | 'disabled';
+
+// A semantic state may also imply a motion modifier, so a single state carries
+// both the colour and the activity animation of the concept it names.
+const semanticMotion: Partial<Record<StatusIndicatorState, 'live' | 'loading'>> = {
+  online: 'live',
+  running: 'loading',
+};
+
+/**
+ * Module: @typo3/backend/element/status-indicator-element
+ *
+ * A small dot that flags the state of a record, task or interface element.
+ * Add the `live` attribute to signal that an element is active or live, or the
+ * `loading` attribute to signal an operation in progress. Provide a `label` to
+ * expose an accessible name (rendered as role="img" + aria-label) and a hover
+ * tooltip (via title); without it the indicator is purely decorative and hidden
+ * from assistive technology.
+ *
+ * The `state` accepts either a base colour (success, danger, …) or a semantic
+ * state (active, online, running, disabled) that resolves to one of those
+ * colours and may carry its own motion, so `state="running"` is already
+ * animated while `state="active"` is a plain dot.
+ *
+ * @example
+ * <typo3-backend-status-indicator state="success" label="Online"></typo3-backend-status-indicator>
+ * <typo3-backend-status-indicator state="success" live label="Live"></typo3-backend-status-indicator>
+ * <typo3-backend-status-indicator state="info" loading label="Loading"></typo3-backend-status-indicator>
+ * <typo3-backend-status-indicator state="running" label="Running"></typo3-backend-status-indicator>
+ */
+@customElement('typo3-backend-status-indicator')
+export class StatusIndicatorElement extends LitElement {
+  @property({ type: String }) state: StatusIndicatorState = 'default';
+  @property({ type: Boolean }) live: boolean = false;
+  @property({ type: Boolean }) loading: boolean = false;
+  @property({ type: String }) label: string = null;
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    const labelled = this.label !== null && this.label !== '';
+    return html`
+      <span
+        class=${classMap(this.getClasses())}
+        title=${labelled ? this.label : nothing}
+        role=${labelled ? 'img' : nothing}
+        aria-label=${labelled ? this.label : nothing}
+        aria-hidden=${labelled ? nothing : 'true'}
+      ></span>
+    `;
+  }
+
+  private getClasses(): ClassInfo {
+    const motion = semanticMotion[this.state];
+    return {
+      ['status-indicator']: true,
+      ['status-indicator-' + this.state]: true,
+      ['status-indicator-live']: this.live || motion === 'live',
+      ['status-indicator-loading']: this.loading || motion === 'loading',
+    };
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-status-indicator': StatusIndicatorElement;
+  }
+}

package/backend/form-engine/container/inline-control-container.ts

@@ -642,6 +642,13 @@ class InlineControlContainer extends HTMLElement {
           const recordContainer = this.getRecordContainer(objectId);
           this.removeUsed(recordContainer);
         }
+      }).catch((reason: Error): void => {
+        if (reason instanceof DOMException && reason.name === 'AbortError') {
+          // Request was aborted because the record was collapsed again before
+          // loading finished. Nothing to do, the abort handling already cleaned up.
+          return;
+        }
+        throw reason;
       });
 
       this.requestQueue[objectId] = ajaxRequest;

package/backend/form-engine/field-wizard/shortcut-validation.ts

@@ -0,0 +1,61 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import DocumentService from '@typo3/core/document-service';
+import FormEngine from '@typo3/backend/form-engine';
+
+/**
+ * Client-side logic to toggle required state of "shortcut" based on "shortcut_mode".
+ *
+ * @internal
+ */
+class ShortcutValidation {
+  constructor() {
+    DocumentService.ready().then((): void => {
+      this.run();
+    });
+  }
+
+  private run(): void {
+    const shortcut = document.querySelector<HTMLInputElement>('[name$="[shortcut]"]');
+    const shortcut_mode = document.querySelector<HTMLInputElement>('[name$="[shortcut_mode]"]');
+    const form = shortcut?.closest<HTMLFormElement>('form');
+
+    if (!shortcut || !shortcut_mode || !form) {
+      return;
+    }
+
+    shortcut_mode.addEventListener('change', () => {
+      this.apply(shortcut, form, shortcut_mode);
+    });
+  }
+
+  private async apply(shortcut: HTMLInputElement, form: HTMLFormElement, shortcut_mode: HTMLInputElement): Promise<void> {
+    const isRequired = parseInt(shortcut_mode.value, 10) === 0;
+    const rules = JSON.parse(shortcut.dataset.formengineValidationRules || '[]');
+    const existingRequiredIndex = rules.findIndex((r: any) => r.type === 'required');
+
+    if (isRequired && existingRequiredIndex === -1) {
+      rules.push({ type: 'required' });
+    } else if (!isRequired && existingRequiredIndex !== -1) {
+      rules.splice(existingRequiredIndex, 1);
+    }
+
+    shortcut.dataset.formengineValidationRules = JSON.stringify(rules);
+    FormEngine.reinitialize();
+    FormEngine.Validation.initializeInputFields();
+    FormEngine.Validation.validate(form);
+  }
+}
+
+export default new ShortcutValidation();

package/backend/form-engine/inline-relation/ajax-dispatcher.ts

@@ -62,6 +62,11 @@ export class AjaxDispatcher {
       return this.processResponse(await response.resolve());
     });
     sentRequest.catch((reason: Error): void => {
+      if (reason instanceof DOMException && reason.name === 'AbortError') {
+        // The request was deliberately aborted (e.g. a record was collapsed again
+        // before loading finished), this is not an error worth notifying about.
+        return;
+      }
       Notification.error('Error ' + reason.message);
     });
 

package/backend/image-manipulation.ts

@@ -385,7 +385,7 @@ class ImageManipulation {
         // Initialize current crop variant
         this.update(this.currentCropVariant);
       },
-      crop: this.cropMoveHandler.bind(this),
+      crop: this.cropMoveHandler,
       data: this.currentCropVariant.cropArea,
     }));
 

package/backend/settings/type/stringlist.ts

@@ -66,6 +66,13 @@ export class StringlistTypeElement extends BaseElement<string[]> {
 
   protected override render(): TemplateResult {
     const value = this.value || [];
+    if (value.length === 0) {
+      return html`
+        <button id=${this.formid} class="btn btn-default" type="button" ?disabled=${this.readonly} @click=${() => this.addValue(0)}>
+          <typo3-backend-icon identifier="actions-plus" size="small"></typo3-backend-icon>
+        </button>
+      `;
+    }
     return html`
       <div class="form-control-wrap">
         <div class="table-fit">

package/backend/tests/settings/type/stringlist-test.ts

@@ -0,0 +1,90 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { StringlistTypeElement } from '@typo3/backend/settings/type/stringlist.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/backend/settings/type/stringlist', () => {
+  let root: HTMLElement;
+
+  beforeEach((): void => {
+    root = document.createElement('div');
+    document.body.appendChild(root);
+  });
+
+  afterEach((): void => {
+    root.remove();
+    root = null;
+  });
+
+  it('renders one button when the value list is empty', async () => {
+    const element = new StringlistTypeElement;
+    element.formid = 'setting-test';
+    element.value = [];
+    root.appendChild(element);
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    const inputs = element.querySelectorAll<HTMLInputElement>('input[type="text"]');
+    expect(inputs).to.have.lengthOf(0);
+
+    const buttons = element.querySelectorAll<HTMLButtonElement>('button');
+    expect(buttons).to.have.lengthOf(1);
+  });
+
+  it('renders one empty input when the value list is a single empty string', async () => {
+    const element = new StringlistTypeElement;
+    element.formid = 'setting-test';
+    element.value = [''];
+    root.appendChild(element);
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    const inputs = element.querySelectorAll<HTMLInputElement>('input[type="text"]');
+    expect(inputs).to.have.lengthOf(1);
+    expect(inputs[0].id).to.equal('setting-test');
+  });
+
+  it('hides the remove button when only one row is shown', async () => {
+    const element = new StringlistTypeElement;
+    element.value = [];
+    root.appendChild(element);
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(element.querySelectorAll('button')).to.have.lengthOf(1);
+  });
+
+  it('adds a row when the add button is clicked on an empty list', async () => {
+    const element = new StringlistTypeElement;
+    element.value = [];
+    root.appendChild(element);
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    const addButton = element.querySelectorAll<HTMLButtonElement>('button:not([disabled])')[0];
+    addButton.click();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(element.value).to.deep.equal(['']);
+    expect(element.querySelectorAll('input[type="text"]')).to.have.lengthOf(1);
+  });
+
+  it('renders per-row controls for each entry when value has multiple entries', async () => {
+    const element = new StringlistTypeElement;
+    element.value = ['/typo3', '/fileadmin'];
+    root.appendChild(element);
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(element.querySelectorAll('input[type="text"]')).to.have.lengthOf(2);
+    // Two rows, each with + and - buttons.
+    expect(element.querySelectorAll('button')).to.have.lengthOf(4);
+  });
+});

package/backend/toolbar/system-information-menu.ts

@@ -17,6 +17,7 @@ import Icons from '../icons';
 import PersistentStorage from '../storage/persistent';
 import Viewport from '../viewport';
 import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import '../element/status-indicator-element';
 
 /**
  * Explicit selectors to avoid nesting queries

package/install/router.ts

@@ -25,6 +25,7 @@ import RegularEvent from '@typo3/core/event/regular-event';
 import '@typo3/backend/element/progress-bar-element';
 import { ScaffoldState } from '@typo3/backend/viewport/scaffold-state';
 import '@typo3/backend/element/sidebar-toggle-element';
+import 'bootstrap'; // required for panels in `handleAjaxError()`
 
 class Router {
   private readonly rootSelector: string = '.t3js-body';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typo3-typescript-sources",
-  "version": "14.3.4",
+  "version": "14.3.5",
   "description": "TYPO3 Core TypeScript Sources - Extracted from TYPO3/typo3 repository",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "typo3": {
     "sourceRepository": "https://github.com/TYPO3/typo3",
-    "sourceTag": "v14.3.4",
+    "sourceTag": "v14.3.5",
     "sourcePath": "Build/Sources/TypeScript"
   }
 }

package/redirects/event-handler.ts

@@ -89,9 +89,9 @@ class EventHandler {
   }
 
   private revert(correlationIds: string[]): Promise<AjaxResponse> {
-    const request = new AjaxRequest(TYPO3.settings.ajaxUrls.redirects_revert_correlation).withQueryArguments({
-      correlation_ids: correlationIds
-    }).get();
+    const request = new AjaxRequest(TYPO3.settings.ajaxUrls.redirects_revert_correlation).post({
+      correlation_ids: correlationIds,
+    });
 
     request.then(async (response: AjaxResponse): Promise<void> => {
       const json = await response.resolve();

package/scheduler/scheduler.ts

@@ -90,14 +90,14 @@ class Scheduler {
         // Schedule selected tasks for next cron run
         const goCron: HTMLInputElement = document.createElement('input');
         goCron.setAttribute('type', 'hidden');
-        goCron.setAttribute('name', 'scheduleCron');
+        goCron.setAttribute('name', 'action[scheduleCron]');
         goCron.setAttribute('value', taskIds.join(','));
         form.append(goCron);
       } else {
         // Execute selected tasks directly
         const executeTasks: HTMLInputElement = document.createElement('input');
         executeTasks.setAttribute('type', 'hidden');
-        executeTasks.setAttribute('name', 'execute');
+        executeTasks.setAttribute('name', 'action[execute]');
         executeTasks.setAttribute('value', taskIds.join(','));
         form.append(executeTasks);
       }

package/workspaces/renderable/record-table.ts

@@ -278,7 +278,7 @@ export class RecordTableElement extends LitElement {
   private renderElementActions(data: RecordData): TemplateResult[] {
     return [
       this.getAction(
-        data.allowedAction_view,
+        (data.allowedAction_view && data.previewUrl !== ''),
         'preview',
         'actions-version-workspace-preview',
         {

package/workspaces/workspace-state.ts

@@ -30,7 +30,7 @@ export interface Workspace {
 }
 
 interface WorkspaceInfoResponse {
-  current: Workspace;
+  current: Workspace | null;
   workspaces: Workspace[];
 }