typo3-typescript-sources 14.2.0 → 14.3.0

package/.github/workflows/sync-and-publish.yml

@@ -90,6 +90,7 @@ jobs:
             echo "New version found: $NEW_TAG (previous: $LAST_SYNCED)"
             echo "has_new_version=true" >> $GITHUB_OUTPUT
             echo "typo3_version=$NEW_TAG" >> $GITHUB_OUTPUT
+            echo "release_tag=${NEW_TAG#v}" >> $GITHUB_OUTPUT
           fi
 
       - name: Setup Git
@@ -271,12 +272,11 @@ jobs:
           Source: https://github.com/TYPO3/typo3/tree/${TYPO3_VERSION}
           Path: Build/Sources/TypeScript/"
 
-          # Create tag (remove v-prefix)
-          NPM_VERSION="${TYPO3_VERSION#v}"
-          git tag -a "${NPM_VERSION}" -m "Release ${NPM_VERSION} from TYPO3 ${TYPO3_VERSION}"
+          RELEASE_TAG="${{ steps.check.outputs.release_tag }}"
+          git tag -a "${RELEASE_TAG}" -m "Release ${RELEASE_TAG} from TYPO3 ${TYPO3_VERSION}"
 
           git push origin "${TARGET_BRANCH}"
-          git push origin "${NPM_VERSION}"
+          git push origin "${RELEASE_TAG}"
 
       - name: Setup Node.js
         if: steps.check.outputs.has_new_version == 'true'
@@ -306,8 +306,8 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.PAT_TOKEN }}
         with:
-          tag_name: ${{ steps.check.outputs.typo3_version }}
-          release_name: TYPO3 ${{ steps.check.outputs.typo3_version }}
+          tag_name: ${{ steps.check.outputs.release_tag }}
+          release_name: TYPO3 ${{ steps.check.outputs.release_tag }}
           body: |
             Synchronized with TYPO3 Core ${{ steps.check.outputs.typo3_version }}
 

package/.last-synced-tag

@@ -1 +1 @@
-v14.2.0
+v14.3.0

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

package/backend/clear-cache.ts

@@ -46,15 +46,15 @@ class ClearCache {
     const request = new AjaxRequest(TYPO3.settings.ajaxUrls.clearcache_page).post({ id: pageId });
     request.then(async (response: AjaxResponse): Promise<void> => {
       const data = await response.resolve();
-      if (data.success === true) {
-        Notification.success(
-          data.title,
-          data.message
+      if (data?.success === false) {
+        Notification.error(
+          data.title ?? cacheLabels.get('notification.error.title'),
+          data.message ?? cacheLabels.get('notification.error.message'),
         );
       } else {
-        Notification.error(
-          data.title,
-          data.message
+        Notification.success(
+          data?.title ?? cacheLabels.get('notification.success.title'),
+          data?.message ?? cacheLabels.get('notification.success.message'),
         );
       }
     }, (): void => {

package/backend/color-picker.ts

@@ -67,45 +67,53 @@ export class Typo3BackendColorPicker extends LitElement {
     await DocumentService.ready();
 
     const inputElement = this.getInputElement();
-    if (inputElement) {
-      if (!inputElement.value && this.color) {
-        inputElement.value = this.color;
-      } else {
-        this.color = inputElement.value;
-      }
+    if (!inputElement) {
+      return;
+    }
 
-      if (inputElement.disabled || inputElement.readOnly) {
-        return;
-      }
+    if (!inputElement.value && this.color) {
+      inputElement.value = this.color;
+    } else {
+      this.color = inputElement.value;
+    }
 
-      const alwan = new Alwan(inputElement, {
-        position: 'bottom-start',
-        format: 'hex',
-        opacity: this.opacity,
-        swatches: this.swatches,
-        preset: false,
-        color: this.color,
-        // Casting to `unknown` to prevent TypeScript Error
-        // > TS2589: Type instantiation is excessively deep and possibly infinite.
-        parent: (this.closest('dialog') ?? '') as unknown,
-      });
-
-      alwan.on('color', (e): void => {
-        this.color = e.hex;
-        inputElement.value = this.color;
-        inputElement.dispatchEvent(new Event('blur'));
-      });
-
-      // input: react on user input
-      // change: react on indirect changes, e.g. a value picker
-      ['input', 'change'].forEach((eventName: string): void => {
-        new RegularEvent(eventName, (e: Event): void => {
-          const input = (e.target as HTMLInputElement);
-          this.color = input.value;
-          alwan.setColor(this.color);
-        }).bindTo(inputElement);
-      });
+    if (inputElement.disabled || inputElement.readOnly) {
+      return;
     }
+
+    const alwan = new Alwan(inputElement, {
+      position: 'bottom-start',
+      format: 'hex',
+      opacity: this.opacity,
+      swatches: this.swatches,
+      preset: false,
+      color: this.color,
+      // Casting to `unknown` to prevent TypeScript Error
+      // > TS2589: Type instantiation is excessively deep and possibly infinite.
+      parent: (this.closest('dialog') ?? '') as unknown,
+    });
+
+    // When the color picker opens, the input loses focus, making value changes difficult.
+    // Restore focus to the input after the picker is opened.
+    alwan.on('open', (): void => {
+      inputElement.focus();
+    });
+
+    alwan.on('color', (e): void => {
+      this.color = e.hex;
+      inputElement.value = this.color;
+      inputElement.dispatchEvent(new Event('blur'));
+    });
+
+    // input: react on user input
+    // change: react on indirect changes, e.g. a value picker
+    ['input', 'change'].forEach((eventName: string): void => {
+      new RegularEvent(eventName, (e: Event): void => {
+        const input = (e.target as HTMLInputElement);
+        this.color = input.value;
+        alwan.setColor(this.color);
+      }).bindTo(inputElement);
+    });
   }
 
   protected override render(): TemplateResult {

package/backend/context-menu-actions.ts

@@ -304,15 +304,15 @@ class ContextMenuActions {
     (new AjaxRequest(TYPO3.settings.ajaxUrls.clearcache_page)).post({ id: uid }).then(
       async (response: AjaxResponse): Promise<void> => {
         const data = await response.resolve();
-        if (data.success === true) {
-          Notification.success(
-            data.title,
-            data.message
+        if (data?.success === false) {
+          Notification.error(
+            data.title ?? cacheLabels.get('notification.error.title'),
+            data.message ?? cacheLabels.get('notification.error.message'),
           );
         } else {
-          Notification.error(
-            data.title,
-            data.message
+          Notification.success(
+            data?.title ?? cacheLabels.get('notification.success.title'),
+            data?.message ?? cacheLabels.get('notification.success.message'),
           );
         }
       },

package/backend/date-time-picker.ts

@@ -15,6 +15,7 @@ import flatpickr from 'flatpickr';
 import Persistent from '@typo3/backend/storage/persistent';
 import ShortcutButtonsPlugin from 'shortcut-buttons-flatpickr';
 import { DateTime } from 'luxon';
+import DomHelper from '@typo3/backend/utility/dom-helper';
 import ThrottleEvent from '@typo3/core/event/throttle-event';
 import type { PostValidationEvent } from '@typo3/backend/form-engine-validation';
 import type { DateConfiguration } from '@typo3/backend/type/date-configuration';
@@ -39,7 +40,7 @@ class DateTimePicker {
    * note: this function can be called multiple times (e.g. after AJAX requests) because it only
    * applies to fields which haven't been used yet.
    */
-  public initialize(element: HTMLInputElement): void {
+  public initialize(element: HTMLInputElement, appendTo: HTMLElement | null = null): void {
     if (!(element instanceof HTMLInputElement) || typeof element.dataset.datepickerInitialized !== 'undefined') {
       return;
     }
@@ -55,17 +56,19 @@ class DateTimePicker {
 
     element.dataset.datepickerInitialized = '1';
     import('flatpickr/dist/l10n').then((): void => {
-      this.initializeField(element, userLocale as flatpickr.Options.LocaleKey);
+      this.initializeField(element, userLocale as flatpickr.Options.LocaleKey, appendTo);
     });
   }
 
   /**
    * Initialize a single field
    */
-  private initializeField(inputElement: HTMLInputElement, locale: flatpickr.Options.LocaleKey): void {
-    const scrollEvent = this.getScrollEvent();
+  private initializeField(inputElement: HTMLInputElement, locale: flatpickr.Options.LocaleKey, appendTo: HTMLElement | null = null): void {
     const options = this.getDateOptions(inputElement);
     options.locale = locale;
+    if (appendTo) {
+      options.appendTo = appendTo;
+    }
 
     // Custom "first day of week" user preference
     const dow = Persistent.get('dateTimeFirstDayOfWeek');
@@ -80,14 +83,35 @@ class DateTimePicker {
       flatpickr.l10ns.default.firstDayOfWeek = dowNumber;
     }
 
-    options.onOpen = [
-      (): void => {
-        scrollEvent.bindTo(document.querySelector('.t3js-module-body'));
-      }
-    ];
-    options.onClose = (): void => {
-      scrollEvent.release();
-    };
+    const usePopover = appendTo instanceof HTMLElement && appendTo.localName === 'typo3-formengine-element-datetime';
+
+    if (usePopover) {
+      // Disable flatpickr's own positioning; native popover + CSS anchor positioning handle it.
+      options.position = (): void => { /* handled by popover */ };
+      options.onOpen = [
+        (_dates: Date[], _currentDateString: string, self: flatpickr.Instance): void => {
+          if (!self.calendarContainer.hasAttribute('popover')) {
+            self.calendarContainer.setAttribute('popover', 'manual');
+          }
+          self.calendarContainer.showPopover();
+        }
+      ];
+      options.onClose = (_dates: Date[], _currentDateString: string, self: flatpickr.Instance): void => {
+        if (self.calendarContainer.matches(':popover-open')) {
+          self.calendarContainer.hidePopover();
+        }
+      };
+    } else {
+      const scrollEvent = this.getScrollEvent();
+      options.onOpen = [
+        (): void => {
+          scrollEvent.bindTo(DomHelper.scrollEventTarget(inputElement));
+        }
+      ];
+      options.onClose = (): void => {
+        scrollEvent.release();
+      };
+    }
 
     // initialize the date time picker on this element
     const dateTimePicker = flatpickr(inputElement, options);
@@ -116,9 +140,7 @@ class DateTimePicker {
 
   /**
    * Due to some whack CSS the scrollPosition of the document stays 0 which renders a stuck date time picker.
-   * Because of this the position is recalculated on scrolling `.t3js-module-body`.
-   *
-   * @return {ThrottleEvent}
+   * Because of this the position is recalculated on scrolling the nearest scrollable ancestor.
    */
   private getScrollEvent(): ThrottleEvent {
     return new ThrottleEvent('scroll', (): void => {

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

@@ -61,12 +61,14 @@ export class ContextualRecordEditTriggerElement extends PseudoButtonLitElement {
   private setupMessageHandling(modal: ModalElement): void {
     const messageTarget = top;
     let savedRecordTitle = '';
+    let hasSaved = false;
     let closeConfirmed = false;
     const messageHandler = (event: MessageEvent): void => {
       if (event.origin !== window.location.origin) {
         return;
       }
       if (event.data?.actionName === 'typo3:editform:saved') {
+        hasSaved = true;
         savedRecordTitle = event.data.recordTitle ?? '';
       }
       if (event.data?.actionName === 'typo3:editform:closed') {
@@ -94,14 +96,14 @@ export class ContextualRecordEditTriggerElement extends PseudoButtonLitElement {
 
     modal.addEventListener('typo3-modal-hidden', () => {
       messageTarget.removeEventListener('message', messageHandler);
-      if (savedRecordTitle !== '') {
+      if (hasSaved) {
         top.document.dispatchEvent(new CustomEvent('typo3:pagetree:refresh'));
         if (top.TYPO3?.Backend?.ContentContainer) {
           top.TYPO3.Backend.ContentContainer.refresh();
         }
         Notification.success(
           labels.get('notification.record_updated.title'),
-          labels.get('notification.record_updated.message', [savedRecordTitle]),
+          savedRecordTitle !== '' ? labels.get('notification.record_updated.message', [savedRecordTitle]) : undefined,
         );
       } else {
         this.focus();

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

@@ -84,13 +84,19 @@ export class EditablePageTitle extends LitElement {
     .wrapper {
       position: relative;
       margin: -1px 0;
+      padding-inline-end: 1.5em;
     }
 
-    div.wrapper {
-      padding-inline-end: 1.5em;
+    .wrapper:has(> form) .page-title {
+      visibility: hidden;
+      pointer-events: none;
     }
 
-    form.wrapper {
+    .wrapper > form {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
       padding-inline-end: 2.5em;
     }
 
@@ -190,18 +196,15 @@ export class EditablePageTitle extends LitElement {
       return html`<div class="wrapper"><h1>${this.pageTitle}</h1></div>`;
     }
 
-    let content;
-    if (!this._isEditing) {
-      content = html`
-        <div class="wrapper">
+    return html`
+      <div class="wrapper">
+        <div class="page-title">
           <h1 @dblclick="${(): void => { this.startEditing(); }}">${this.pageTitle}</h1>
           ${this.composeEditButton()}
-        </div>`;
-    } else {
-      content = this.composeEditForm();
-    }
-
-    return content;
+        </div>
+        ${this._isEditing ? this.composeEditForm() : nothing}
+      </div>
+    `;
   }
 
   private isEditable(): boolean {
@@ -268,7 +271,7 @@ export class EditablePageTitle extends LitElement {
 
   private composeEditForm(): TemplateResult {
     return html`
-      <form class="wrapper" @submit="${ this.updatePageTitle }">
+      <form @submit="${ this.updatePageTitle }">
         <label class="screen-reader" for="input">${this.labels.input}</label>
         <input
           autocomplete="off"

package/backend/form-engine/element/datetime-element.ts

@@ -47,7 +47,7 @@ class DatetimeElement extends HTMLElement {
 
     this.registerEventHandler();
     import('../../date-time-picker').then(({ default: DateTimePicker }): void => {
-      DateTimePicker.initialize(this.element);
+      DateTimePicker.initialize(this.element, this);
     });
   }
 

package/{styleguide/filter.ts → backend/layout-module/page-layout-event.ts}

@@ -11,12 +11,12 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import DocumentService from '@typo3/core/document-service';
-import DateTimePicker from '@typo3/backend/date-time-picker';
+export class HiddenContentCountChangedEvent extends CustomEvent<{ count: number }> {
+  static readonly eventName = 'typo3:page-layout:hidden-content-count-changed';
 
-DocumentService.ready().then(() => {
-  const dateTimePickers: NodeListOf<HTMLInputElement>|null = document.querySelectorAll('.t3js-datetimepicker');
-  dateTimePickers?.forEach((element) => {
-    DateTimePicker.initialize(element);
-  });
-});
+  constructor(count: number) {
+    super(HiddenContentCountChangedEvent.eventName, {
+      detail: { count },
+    });
+  }
+}

package/backend/layout-module/page-layout.ts

@@ -0,0 +1,102 @@
+/*
+ * 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 AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import Notification from '@typo3/backend/notification';
+import RegularEvent from '@typo3/core/event/regular-event';
+import { sudoModeInterceptor } from '@typo3/backend/security/sudo-mode-interceptor';
+import layoutLabels from '~labels/backend.layout';
+import { HiddenContentCountChangedEvent } from './page-layout-event';
+import '@typo3/backend/element/icon-element';
+import type { PageLayoutToggleHidden } from './toggle-hidden-element';
+
+/**
+ * Module: @typo3/backend/layout-module/page-layout
+ *
+ * Main entry point for the page layout module.
+ * Registers all web components and provides inline visibility toggling.
+ */
+new RegularEvent('click', async (event: Event, delegateTarget?: Element): Promise<void> => {
+  event.preventDefault();
+  event.stopPropagation();
+
+  const target = delegateTarget as HTMLButtonElement;
+  if (target.disabled) {
+    return;
+  }
+  target.disabled = true;
+
+  const contentElement = target.closest('.t3js-page-ce') as HTMLElement | null;
+  if (contentElement === null) {
+    target.disabled = false;
+    return;
+  }
+
+  const table = contentElement.dataset.table;
+  const uid = parseInt(contentElement.dataset.uid ?? '0', 10);
+  const isHidden = contentElement.classList.contains('t3js-hidden-record');
+  const iconElement = target.querySelector('typo3-backend-icon');
+
+  try {
+    const response: AjaxResponse = await new AjaxRequest(TYPO3.settings.ajaxUrls.record_toggle_visibility)
+      .addMiddleware(sudoModeInterceptor)
+      .post({
+        table: table,
+        uid: uid,
+        action: isHidden ? 'show' : 'hide',
+      });
+
+    const data = await response.resolve();
+
+    // Update hidden state classes on the content element wrapper
+    contentElement.classList.toggle('t3-page-ce-hidden', !data.isVisible);
+    contentElement.classList.toggle('t3js-hidden-record', !data.isVisible);
+
+    // If the element was just hidden and the "show hidden" toggle is inactive,
+    // hide the element from view so it disappears from the layout.
+    if (!data.isVisible) {
+      const toggleHidden = document.querySelector('typo3-backend-page-layout-toggle-hidden') as PageLayoutToggleHidden | null;
+      if (toggleHidden && !toggleHidden.active) {
+        contentElement.style.display = 'none';
+      }
+    } else {
+      contentElement.style.display = '';
+    }
+
+    // Update toggle button icon and title
+    iconElement?.setAttribute('identifier', data.isVisible ? 'actions-edit-hide' : 'actions-edit-unhide');
+    target.title = data.isVisible ? layoutLabels.get('hide') : layoutLabels.get('unHide');
+
+    // Update record icon in context menu trigger (reflects hidden overlay)
+    const recordIconElement = contentElement.querySelector('.t3-page-ce-header-left [data-contextmenu-trigger] .t3js-icon');
+    if (recordIconElement && data.icon) {
+      recordIconElement.replaceWith(document.createRange().createContextualFragment(data.icon));
+    }
+
+    // Update hidden element counter in the toolbar toggle button
+    const count = document.querySelectorAll('.t3js-hidden-record').length;
+    document.dispatchEvent(new HiddenContentCountChangedEvent(count));
+  } catch (error) {
+    if (error && typeof (error as AjaxResponse).resolve === 'function') {
+      const data = await (error as AjaxResponse).resolve();
+      for (const message of data.messages ?? []) {
+        Notification.error(message.title, message.message);
+      }
+    }
+  } finally {
+    target.disabled = false;
+  }
+}).delegateTo(document, 'button[data-action="content-element-visibility-toggle"]');
+
+export { HiddenContentCountChangedEvent } from './page-layout-event';

package/backend/layout-module/toggle-hidden-element.ts

@@ -0,0 +1,126 @@
+/*
+ * 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 { html, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
+import PersistentStorage from '@typo3/backend/storage/persistent';
+import layoutLabels from '~labels/backend.layout';
+import '@typo3/backend/element/icon-element';
+import { HiddenContentCountChangedEvent } from './page-layout-event';
+
+/**
+ * Module: @typo3/backend/layout-module/toggle-hidden-element
+ *
+ * Toolbar toggle button for showing/hiding hidden content elements
+ * in the page module. Updates its counter reactively when content
+ * elements are toggled.
+ */
+@customElement('typo3-backend-page-layout-toggle-hidden')
+export class PageLayoutToggleHidden extends PseudoButtonLitElement {
+  @property({ type: Boolean, reflect: true }) active: boolean = false;
+  @property({ type: Number }) count: number = 0;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.syncDropdownToggleStatus();
+    document.addEventListener(HiddenContentCountChangedEvent.eventName, this.onCountChanged);
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.removeEventListener(HiddenContentCountChangedEvent.eventName, this.onCountChanged);
+  }
+
+  public override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has('active')) {
+      this.syncDropdownToggleStatus();
+    }
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`<span class="dropdown-item-status"></span><typo3-backend-icon identifier="actions-eye" size="small"></typo3-backend-icon>${layoutLabels.get('hiddenCE')} (${this.count})`;
+  }
+
+  protected override buttonActivated(): void {
+    if (this.hasAttribute('disabled')) {
+      return;
+    }
+    this.setAttribute('disabled', '');
+
+    const show = !this.active;
+    const hiddenElements = document.querySelectorAll('.t3js-hidden-record') as NodeListOf<HTMLElement>;
+
+    for (const hiddenElement of hiddenElements) {
+      hiddenElement.style.display = 'flow-root';
+      const scrollHeight = hiddenElement.scrollHeight;
+
+      // Always set `overflow: clip` after storing scrollHeight
+      // * For hidden state `height: 0px` is already set.
+      // * For visible state setting `overflow: clip` is fine anyway.
+      hiddenElement.style.overflow = 'clip';
+
+      if (!show) {
+        // * Invisible elements must not be accessible/focusable by keyboard.
+        // * Spacing between content elements is kept uniform by collapsed margins,
+        //   hidden elements have a height of 0 and the margins of the surrounding elements
+        //   cannot collapse, causing a visual gap.
+        // Therefore do not display the element at all by setting `display: none`.
+        hiddenElement.addEventListener('transitionend', (): void => {
+          hiddenElement.style.display = 'none';
+          hiddenElement.style.overflow = '';
+        }, { once: true });
+
+        // We use requestAnimationFrame() as we have to set the container's height at first before resizing to
+        // collapsed-element-height. This results in a smooth animation.
+        requestAnimationFrame((): void => {
+          hiddenElement.style.height = scrollHeight + 'px';
+          requestAnimationFrame((): void => {
+            hiddenElement.style.height = '0px';
+          });
+        });
+      } else {
+        hiddenElement.addEventListener('transitionend', (): void => {
+          hiddenElement.style.display = '';
+          hiddenElement.style.overflow = '';
+          hiddenElement.style.height = '';
+        }, { once: true });
+
+        hiddenElement.style.height = scrollHeight + 'px';
+      }
+    }
+
+    this.active = show;
+    PersistentStorage.set('moduleData.web_layout.showHidden', show ? '1' : '0').then((): void => {
+      this.removeAttribute('disabled');
+    });
+  }
+
+  private syncDropdownToggleStatus(): void {
+    this.dataset.dropdowntoggleStatus = this.active ? 'active' : 'inactive';
+  }
+
+  private readonly onCountChanged = (event: Event): void => {
+    this.count = (event as HiddenContentCountChangedEvent).detail.count;
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-page-layout-toggle-hidden': PageLayoutToggleHidden;
+  }
+}

package/backend/security/element/csp-reports.ts

@@ -133,16 +133,11 @@ export class CspReports extends LitElement {
 
   protected override render(): TemplateResult {
     return html`
-      <div class="infolist-container infolist-overlay">
+      <div class="infolist-container">
         <div class="infolist">
           <div class="infolist-header">
             ${this.renderNavigation()}
           </div>
-        </div>
-      </div>
-
-      <div class="infolist-container">
-        <div class="infolist">
           <div class="infolist-content">
             <div class="table-fit mb-0">
               <table class="table table-striped">

package/backend/settings/editor/editable-setting.ts

@@ -35,8 +35,7 @@ interface SettingDefinition {
   label: string,
   description: string|null,
   readonly: boolean,
-  // @todo php json_encode encodes ['0' => 'foo'] as ['foo'] instead of {'0' => 'foo'}
-  enum: Record<string, string>|Array<string>,
+  enum: Record<string, string>,
   categories: string[],
   tags: string[],
   options: Record<string, unknown>,
@@ -119,10 +118,6 @@ export class EditableSettingElement extends LitElement {
 
   protected updateFieldAttributes(element: HTMLElement): void {
     const { definition, value } = this.setting;
-    // Force conversion to an object, as PHP json_encode encodes ['0' => 'foo'] as
-    // ['foo'] instead of {'0' => 'foo'}
-    const enumEntries = Object.entries(definition.enum || {});
-
     const attributes = {
       key: definition.key,
       formid: `setting-${definition.key}`,
@@ -130,9 +125,9 @@ export class EditableSettingElement extends LitElement {
       value: Array.isArray(value) ? JSON.stringify(value) : String(value),
       debug: this.mode === SettingsMode.advanced,
       readonly: definition.readonly,
-      enum: enumEntries.length > 0 ? JSON.stringify(Object.fromEntries(enumEntries)) : false,
+      enum: Object.keys(definition.enum).length > 0 ? JSON.stringify(definition.enum) : false,
       default: Array.isArray(definition.default) ? JSON.stringify(definition.default) : String(definition.default),
-      options: definition.options ? (Array.isArray(definition.options) && definition.options.length === 0 ? '{}' : JSON.stringify(definition.options)) : '{}',
+      options: JSON.stringify(definition.options),
     };
     for (const [key, value] of Object.entries(attributes)) {
       if (typeof value === 'boolean') {

package/backend/settings/type/base.ts

@@ -36,7 +36,7 @@ export abstract class BaseElement<
   @property({ type: String }) key: string;
   @property({ type: String }) formid: string;
   @property({ type: Boolean }) readonly: boolean = false;
-  @property({ type: Object }) enum: Record<string, string>;
+  @property({ type: Object }) enum: Record<string, string> | undefined;
   @property({ type: Boolean }) debug: boolean = false;
   @property({ type: Object }) options: OptionsType;
 

package/{setup → backend}/setup-module.ts

@@ -18,8 +18,8 @@ import RegularEvent from '@typo3/core/event/regular-event';
 import Modal from '@typo3/backend/modal';
 
 /**
- * Module: @typo3/setup/setup-module
- * @exports @typo3/setup/setup-module
+ * Module: @typo3/backend/setup-module
+ * @exports @typo3/backend/setup-module
  */
 class SetupModule {
   private avatarWindowRef: Window;

package/backend/toolbar/clear-cache-menu.ts

@@ -71,10 +71,17 @@ class ClearCacheMenu {
     (new AjaxRequest(ajaxUrl)).post({}).then(
       async (response: AjaxResponse): Promise<void> => {
         const data = await response.resolve();
-        Notification.success(
-          data.title,
-          data.message
-        );
+        if (data?.success === false) {
+          Notification.error(
+            data.title ?? cacheLabels.get('notification.error.title'),
+            data.message ?? cacheLabels.get('notification.error.message'),
+          );
+        } else {
+          Notification.success(
+            data?.title ?? cacheLabels.get('notification.success.title'),
+            data?.message ?? cacheLabels.get('notification.success.message'),
+          );
+        }
       },
       (): void => {
         Notification.error(

package/backend/tree/page-position-select.ts

@@ -108,31 +108,17 @@ export class PagePositionSelect extends LitElement {
   }
 
   protected renderTree(): TemplateResult {
-    const initialized = () => {
+    const initialized = async () => {
       // set up toolbar now with updated properties
       const toolbar = this.querySelector('typo3-backend-tree-toolbar') as TreeToolbar;
       toolbar.tree = this.tree;
-      this.tree.ensureActiveNodeLoaded(this.activePageId).then(
-        () => {
-          const currentNode = this.tree.nodes.find(n => n.identifier === String(this.activePageId));
-          if (currentNode) {
-            this.toggleDynamicInsertNodes(currentNode).then(
-              () => {
-                const activeNode = this.tree.nodes.find(n => this.isActivePagePositionNode(n));
-                if (activeNode) {
-                  activeNode.checked = true;
-                  this.updateBreadcrumb(this.tree.nodes);
-                  this.tree.requestUpdate();
-                  this.tree.updateComplete.then(() => {
-                    this.tree.scrollNodeIntoViewIfNeeded(activeNode);
-                    this.tree.focusNode(activeNode);
-                  });
-                }
-              }
-            );
-          }
-        }
-      );
+      await this.tree.ensureActiveNodeLoaded(this.activePageId);
+      const activeNode = await this.applyActiveInsertPosition();
+      if (activeNode) {
+        await this.tree.updateComplete;
+        this.tree.scrollNodeIntoViewIfNeeded(activeNode);
+        this.tree.focusNode(activeNode);
+      }
     };
 
     return html`
@@ -145,38 +131,63 @@ export class PagePositionSelect extends LitElement {
           .setup=${this.configuration}
           @tree:initialized=${initialized}
           @typo3:tree:node-selected="${this.handleNodeSelected}"
+          @typo3:tree:filter-applied=${() => this.applyActiveInsertPosition()}
+          @typo3:tree:filter-reset=${() => this.applyActiveInsertPosition()}
         >
         </typo3-backend-component-page-position-select-tree>
       `;
   }
 
-  private handleNodeSelected(event: CustomEvent): void {
+  private async handleNodeSelected(event: CustomEvent): Promise<void> {
     const selectedNode: TreeNodeInterface = event.detail.node;
     const [pageUid, insertPosition] = selectedNode.identifier.split('-');
     this.insertPosition = (insertPosition ?? 'inside') as Position;
     this.activePageId = Number(pageUid);
 
-    const callback = () => {
-      this.tree.nodes.forEach((node: TreeNodeInterface) => {
-        node.checked = this.isActivePagePositionNode(node);
-        if (node.checked) {
-          this.tree.focusNode(node);
-        }
-      });
+    const activeNode = /^\d+$/.test(selectedNode.identifier)
+      ? await this.applyActiveInsertPosition()
+      : this.syncActiveInsertPositionState();
 
-      this.updateBreadcrumb(this.tree.nodes);
-      this.dispatchEvent(new InsertPositionChangeEvent(
-        this.activePageId,
-        this.insertPosition
-      ));
-    };
+    if (activeNode) {
+      this.tree.focusNode(activeNode);
+    }
 
-    if (/^\d+$/.test(selectedNode.identifier)) {
-      this.toggleDynamicInsertNodes(selectedNode).then(callback);
-    } else {
-      callback();
-      this.tree.requestUpdate();
+    this.dispatchEvent(new InsertPositionChangeEvent(
+      this.activePageId,
+      this.insertPosition
+    ));
+  }
+
+  private async applyActiveInsertPosition(): Promise<TreeNodeInterface|null> {
+    if (this.activePageId === null || this.activePageId === undefined) {
+      return null;
     }
+    let currentNode = this.tree.nodes.find(n => n.identifier === String(this.activePageId));
+    if (!currentNode) {
+      // Load its rootline and expand the path
+      await this.tree.ensureActiveNodeLoaded(this.activePageId);
+      currentNode = this.tree.nodes.find(n => n.identifier === String(this.activePageId));
+      if (!currentNode) {
+        return null;
+      }
+    }
+
+    await this.tree.expandNodeParents(currentNode);
+    await this.toggleDynamicInsertNodes(currentNode);
+    return this.syncActiveInsertPositionState();
+  }
+
+  private syncActiveInsertPositionState(): TreeNodeInterface|null {
+    let activeNode: TreeNodeInterface|null = null;
+    this.tree.nodes.forEach((node: TreeNodeInterface) => {
+      node.checked = this.isActivePagePositionNode(node);
+      if (node.checked) {
+        activeNode = node;
+      }
+    });
+    this.updateBreadcrumb(this.tree.nodes);
+    this.tree.requestUpdate();
+    return activeNode;
   }
 
   private async toggleDynamicInsertNodes(currentNode: TreeNodeInterface): Promise<void> {

package/backend/tree/tree.ts

@@ -87,6 +87,24 @@ export class TreeNodeMap<T extends TreeNodeInterface = TreeNodeInterface> {
   }
 }
 
+export class TreeFilterAppliedEvent extends CustomEvent<{searchTerm: string, resultCount: number}> {
+  static readonly eventName = 'typo3:tree:filter-applied';
+  constructor(searchTerm: string, resultCount: number) {
+    super(TreeFilterAppliedEvent.eventName, {
+      detail: { searchTerm, resultCount },
+      bubbles: true,
+      composed: true,
+    });
+  }
+}
+
+export class TreeFilterResetEvent extends Event {
+  static readonly eventName = 'typo3:tree:filter-reset';
+  constructor() {
+    super(TreeFilterResetEvent.eventName, { bubbles: true, composed: true });
+  }
+}
+
 export class Tree extends LitElement {
   @property({ type: Object }) setup?: {[keys: string]: any} = null;
   @state() settings: TreeSettings = {
@@ -474,22 +492,25 @@ export class Tree extends LitElement {
         }).then(() => {
           this.loading = false;
           this.currentFilterRequest = null;
+          this.dispatchEvent(new TreeFilterAppliedEvent(this.searchTerm, this.searchResults));
         });
     } else {
       // restore original state without filters
-      this.resetFilter();
-      this.loading = false;
+      this.resetFilter().then(() => {
+        this.loading = false;
+        this.dispatchEvent(new TreeFilterResetEvent());
+      });
     }
   }
 
-  public resetFilter(): void
+  public async resetFilter(): Promise<void>
   {
     this.searchTerm = '';
     this.searchResults = 0;
     if (this.unfilteredNodes.length > 0) {
       const currentlySelected = this.getSelectedNodes()[0];
       if (typeof currentlySelected === 'undefined') {
-        this.loadData();
+        await this.loadData();
         return;
       }
       this.nodeMap = new TreeNodeMap(this.enhanceNodes(JSON.parse(this.unfilteredNodes)));
@@ -499,10 +520,10 @@ export class Tree extends LitElement {
       if (currentlySelectedNode) {
         this.selectNode(currentlySelectedNode, false);
       } else {
-        this.loadData();
+        await this.loadData();
       }
     } else {
-      this.loadData();
+      await this.loadData();
     }
   }
 

package/dashboard/dashboard.ts

@@ -1578,7 +1578,4 @@ declare global {
 
     [newRecordWizardEventName]: CustomEvent<NewRecordWizardItemSelectedEventInterface>;
   }
-  interface FocusOptions {
-    focusVisible: boolean;
-  }
 }

package/form/backend/form-editor/stage-component.ts

@@ -583,7 +583,7 @@ function wireAbstractViewFormElementToolbarEventListeners(toolbar: HTMLElement,
   }
 
   qs('abstractViewToolbarRemoveElement')?.addEventListener('click', function() {
-    getViewModel().showRemoveFormElementModal();
+    getViewModel().showRemoveFormElementModal(formElement);
   });
 }
 
@@ -631,7 +631,7 @@ export function createAndAddAbstractViewFormElementToolbar(
     });
 
     toolbar.addEventListener('toolbar-remove-element', () => {
-      getViewModel().showRemoveFormElementModal();
+      getViewModel().showRemoveFormElementModal(formElement);
     });
   }
 
@@ -908,7 +908,7 @@ export function renderFormElementStageItem(formElement: FormElement, template: H
   });
 
   stageItem.addEventListener('toolbar-remove-element', () => {
-    getViewModel().showRemoveFormElementModal();
+    getViewModel().showRemoveFormElementModal(formElement);
   });
 
   template.replaceChildren(stageItem);

package/form/backend/form-manager/view-model.ts

@@ -39,19 +39,21 @@ enum Identifiers {
 }
 
 function newFormSetup(formManagerApp: FormManager): void {
-  const newFormModalTrigger: HTMLElement = document.querySelector<HTMLElement>(Identifiers.newFormModalTrigger);
-  newFormModalTrigger.addEventListener('click', async (): Promise<void> => {
-    await topLevelModuleImport('@typo3/form/backend/form-wizard/form-wizard.js');
-    const content = html`<typo3-backend-form-wizard .formManager="${formManagerApp}"
-    ></typo3-backend-form-wizard>`;
-
-    Modal.advanced({
-      title: formManagerLabels.get('formManager.newFormWizard.step1.title'),
-      content: content,
-      severity: SeverityEnum.notice,
-      size: Modal.sizes.medium,
-      staticBackdrop: true,
-      buttons: []
+  document.querySelectorAll<HTMLElement>(Identifiers.newFormModalTrigger).forEach((element: HTMLElement): void => {
+    element.addEventListener('click', async (e: Event): Promise<void> => {
+      e.preventDefault();
+      await topLevelModuleImport('@typo3/form/backend/form-wizard/form-wizard.js');
+      const content = html`<typo3-backend-form-wizard .formManager="${formManagerApp}"
+      ></typo3-backend-form-wizard>`;
+
+      Modal.advanced({
+        title: formManagerLabels.get('formManager.newFormWizard.step1.title'),
+        content: content,
+        severity: SeverityEnum.notice,
+        size: Modal.sizes.medium,
+        staticBackdrop: true,
+        buttons: []
+      });
     });
   });
 }

package/linkvalidator/linkvalidator.ts

@@ -13,22 +13,17 @@
 
 import DocumentService from '@typo3/core/document-service';
 import Notification from '@typo3/backend/notification';
+import { ProgressBarElement } from '@typo3/backend/element/progress-bar-element';
 import RegularEvent from '@typo3/core/event/regular-event';
 import SortableTable from '@typo3/backend/sortable-table';
 
 enum Selectors {
-  // Check
-  linktypesSelectorCheck = '.t3js-linkvalidator-settings input[type="checkbox"].options-by-type-check',
   actionButtonSelectorCheck = '.t3js-linkvalidator-action-button-check',
-
-  // Report
-  toggleAllLinktypesSelectorReport = '.t3js-linkvalidator-settings input[type="checkbox"].options-by-type-toggle-all-report',
-  linktypesSelectorReport = '.t3js-linkvalidator-settings input[type="checkbox"].options-by-type-report',
-  actionButtonSelectorReport = '.t3js-linkvalidator-action-button-report'
+  actionButtonSelectorReport = '.t3js-linkvalidator-action-button-report',
+  reportTable = '.t3js-linkvalidator-report-table',
 }
 
 enum Identifier {
-  toggleAllLinktypesIdReport = 'options-by-type-toggle-all-report',
   brokenLinksTableIdReport = 'typo3-broken-links-table'
 }
 
@@ -36,6 +31,8 @@ enum Identifier {
  * Module: @typo3/linkvalidator/linkvalidator
  */
 class Linkvalidator {
+  private progressBar: ProgressBarElement | null = null;
+
   constructor() {
     DocumentService.ready().then((): void => {
       const linkList = document.getElementById(Identifier.brokenLinksTableIdReport);
@@ -49,51 +46,21 @@ class Linkvalidator {
     this.initializeEvents();
   }
 
-  private static allCheckBoxesAreChecked(checkBoxes: NodeListOf<HTMLInputElement>): boolean {
-    const checkboxArray = Array.from(checkBoxes);
-    return checkBoxes.length === checkboxArray.filter((checkBox: HTMLInputElement) => checkBox.checked).length;
-  }
-
-  private toggleActionButtonReport(): void {
-    document.querySelector(Selectors.actionButtonSelectorReport)?.toggleAttribute(
-      'disabled',
-      !document.querySelectorAll('input[type="checkbox"]:checked').length
-    );
-  }
-
-  /**
-   * Enables the "Toggle all" checkbox on document load if all child checkboxes are checked
-   */
-  private toggleTriggerCheckBoxReport(): void {
-    const checkBoxes: NodeListOf<HTMLInputElement> = document.querySelectorAll(Selectors.linktypesSelectorReport);
-    (document.getElementById(Identifier.toggleAllLinktypesIdReport) as HTMLInputElement).checked = Linkvalidator.allCheckBoxesAreChecked(checkBoxes);
+  private getProgress(): ProgressBarElement {
+    if (!this.progressBar || !this.progressBar.isConnected) {
+      this.progressBar = document.createElement('typo3-backend-progress-bar');
+      document.querySelector(Selectors.reportTable).prepend(this.progressBar);
+    }
+    return this.progressBar;
   }
 
   private initializeEvents(): void {
-    // toggleAll (checkboxes): on change
-    new RegularEvent('change', (e: Event, currentTarget: HTMLInputElement): void => {
-      const checkBoxes: NodeListOf<HTMLInputElement> = document.querySelectorAll(Selectors.linktypesSelectorReport);
-      const checkIt = !Linkvalidator.allCheckBoxesAreChecked(checkBoxes);
-
-      checkBoxes.forEach((checkBox: HTMLInputElement): void => {
-        checkBox.checked = checkIt;
-      });
-      currentTarget.checked = checkIt;
-      this.toggleActionButtonReport();
-    }).delegateTo(document, Selectors.toggleAllLinktypesSelectorReport);
-
-    // toggle (checkbox): on change
-    new RegularEvent('change', (): void => {
-      this.toggleTriggerCheckBoxReport();
-      this.toggleActionButtonReport();
-    }).delegateTo(document, Selectors.linktypesSelectorReport);
-
     new RegularEvent('click', (e: PointerEvent, actionButton: HTMLInputElement): void => {
       Notification.success(actionButton.dataset.notificationMessage || 'Event triggered', '', 2);
     }).delegateTo(document, Selectors.actionButtonSelectorCheck);
 
-    new RegularEvent('click', (e: PointerEvent, actionButton: HTMLInputElement): void => {
-      Notification.success(actionButton.dataset.notificationMessage || 'Event triggered', '', 2);
+    new RegularEvent('click', (): void => {
+      this.getProgress().start();
     }).delegateTo(document, Selectors.actionButtonSelectorReport);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typo3-typescript-sources",
-  "version": "14.2.0",
+  "version": "14.3.0",
   "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.2.0",
+    "sourceTag": "v14.3.0",
     "sourcePath": "Build/Sources/TypeScript"
   }
 }

package/backend/page-actions.ts

@@ -1,91 +0,0 @@
-/*
- * 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 RegularEvent from '@typo3/core/event/regular-event';
-import PersistentStorage from './storage/persistent';
-
-enum IdentifierEnum {
-  hiddenElements = '.t3js-hidden-record',
-}
-
-/**
- * Module: @typo3/backend/page-actions
- * JavaScript implementations for page actions
- */
-class PageActions {
-  constructor() {
-    DocumentService.ready().then((): void => {
-      const pageLayoutToggleShowHidden = document.getElementById('pageLayoutToggleShowHidden') as HTMLButtonElement|null;
-      if (pageLayoutToggleShowHidden !== null) {
-        new RegularEvent('click', this.toggleContentElementVisibility).bindTo(pageLayoutToggleShowHidden);
-      }
-    });
-  }
-
-  /**
-   * Toggles the "Show hidden content elements"
-   */
-  private toggleContentElementVisibility(e: Event): void {
-    const me = e.target as HTMLButtonElement;
-    const hiddenElements = document.querySelectorAll(IdentifierEnum.hiddenElements) as NodeListOf<HTMLElement>;
-    const show = me.dataset.dropdowntoggleStatus !== 'active';
-    me.disabled = true;
-
-    for (const hiddenElement of hiddenElements) {
-      hiddenElement.style.display = 'flow-root';
-      const scrollHeight = hiddenElement.scrollHeight;
-
-      // Always set `overflow: clip` after storing scrollHeight
-      // * For hidden state `height: 0px` is already set.
-      // * For visible state setting `overflow: clip` is fine anyway.
-      hiddenElement.style.overflow = 'clip';
-
-      if (!show) {
-        // * Invisible elements must not be accessible/focusable by keyboard.
-        // * Spacing between content elements is kept uniform by collapsed margins,
-        //   hidden elements have a height of 0 and the margins of the surrounding elements
-        //   cannot collapse, causing a visual gap.
-        // Therefore do not display the element at all by setting `display: none`.
-        hiddenElement.addEventListener('transitionend', (): void => {
-          hiddenElement.style.display = 'none';
-          hiddenElement.style.overflow = '';
-        }, { once: true });
-
-        // We use requestAnimationFrame() as we have to set the container's height at first before resizing to
-        // collapsed-element-height. This results in a smooth animation.
-        requestAnimationFrame(function() {
-          hiddenElement.style.height = scrollHeight + 'px';
-          requestAnimationFrame(function() {
-            hiddenElement.style.height = 0 + 'px';
-          });
-        });
-      } else {
-        hiddenElement.addEventListener('transitionend', (): void => {
-          hiddenElement.style.display = '';
-          hiddenElement.style.overflow = '';
-          hiddenElement.style.height = '';
-        }, { once: true });
-
-        hiddenElement.style.height = scrollHeight + 'px';
-      }
-    }
-
-    me.dataset.dropdowntoggleStatus = show ? 'active' : 'inactive';
-    PersistentStorage.set('moduleData.web_layout.showHidden', show ? '1' : '0').then((): void => {
-      me.disabled = false;
-    });
-  }
-}
-
-export default new PageActions();