typo3-typescript-sources 14.2.0 → 14.3.1

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.1

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.1`
 
 ## 🌿 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/clipboard-panel.ts

@@ -143,23 +143,26 @@ export class ClipboardPanel extends LitElement {
         </td>
         <td class="col-control nowrap">
           ${clipboardData.current !== tab.identifier ? nothing : html`
-            <div class="btn-group">
-              <input type="radio" class="btn-check" id="clipboard-copymode-copy" data-action="setCopyMode" ?checked=${clipboardData.copyMode === CopyMode.copy} @click="${(event: PointerEvent) => this.updateClipboard(event, { CB: { 'setCopyMode': '1' } })}">
-              <label class="btn btn-default btn-sm" for="clipboard-copymode-copy">
-                <typo3-backend-icon identifier="actions-edit-copy" size="small"></typo3-backend-icon>
-                ${clipboardData.labels.copyElements}
-              </label>
-              <input type="radio" class="btn-check" id="clipboard-copymode-move" data-action="setCopyMode" ?checked=${clipboardData.copyMode !== CopyMode.copy} @click="${(event: PointerEvent) => this.updateClipboard(event, { CB: { 'setCopyMode': '0' } })}">
-              <label class="btn btn-default btn-sm" for="clipboard-copymode-move">
-                <typo3-backend-icon identifier="actions-cut" size="small"></typo3-backend-icon>
-                ${clipboardData.labels.moveElements}
-              </label>
+            <div class="btn-toolbar btn-toolbar-nowrap">
+              <div class="btn-group">
+                <input type="radio" class="btn-check" id="clipboard-copymode-copy" data-action="setCopyMode" ?checked=${clipboardData.copyMode === CopyMode.copy} @click="${(event: PointerEvent) => this.updateClipboard(event, { CB: { 'setCopyMode': '1' } })}">
+                <label class="btn btn-default btn-sm" for="clipboard-copymode-copy">
+                  <typo3-backend-icon identifier="actions-edit-copy" size="small"></typo3-backend-icon>
+                  ${clipboardData.labels.copyElements}
+                </label>
+                <input type="radio" class="btn-check" id="clipboard-copymode-move" data-action="setCopyMode" ?checked=${clipboardData.copyMode !== CopyMode.copy} @click="${(event: PointerEvent) => this.updateClipboard(event, { CB: { 'setCopyMode': '0' } })}">
+                <label class="btn btn-default btn-sm" for="clipboard-copymode-move">
+                  <typo3-backend-icon identifier="actions-cut" size="small"></typo3-backend-icon>
+                  ${clipboardData.labels.moveElements}
+                </label>
+              </div>
+              ${!clipboardData.elementCount ? nothing : html`
+                <button type="button" class="btn btn-default btn-sm" title="${clipboardData.labels.removeAll}" data-action="removeAll" @click="${(event: PointerEvent) => this.updateClipboard(event, { CB: { 'removeAll': tab.identifier } })}">
+                  <typo3-backend-icon identifier="actions-minus" size="small"></typo3-backend-icon>
+                  ${clipboardData.labels.removeAll}
+                </button>
+              `}
             </div>
-            ${!clipboardData.elementCount ? nothing : html`
-              <button type="button" class="btn btn-default btn-sm" title="${clipboardData.labels.removeAll}" data-action="removeAll" @click="${(event: PointerEvent) => this.updateClipboard(event, { CB: { 'removeAll': tab.identifier } })}">
-                <typo3-backend-icon identifier="actions-minus" size="small"></typo3-backend-icon>
-                ${clipboardData.labels.removeAll}
-              </button>`}
           `}
         </td>
       </tr>
@@ -173,7 +176,7 @@ export class ClipboardPanel extends LitElement {
         <td class="col-icon nowrap ${classMap({ 'ps-4': !tabItem.identifier })}">
           ${unsafeHTML(tabItem.icon)}
         </td>
-        <td class="nowrap" style="width: 95%">
+        <td class="col-title col-responsive nowrap">
           ${unsafeHTML(tabItem.title)}
           ${tabIdentifier === 'normal' ? html`<strong>(${clipboardData.copyMode === CopyMode.copy ? html`${clipboardData.labels.copy}` : html`${clipboardData.labels.cut}`})</strong>` : nothing}
           ${tabItem.thumb ? html`<div class="d-block">${unsafeHTML(tabItem.thumb)}</div>` : nothing}

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,22 +56,24 @@ 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');
 
-    if (dow !== '') {
+    if (dow != null && dow !== '') {
       // stored number is 1-index based, convert to 0-index.
       const dowNumber = parseInt(dow, 10) - 1;
 
@@ -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/container/inline-control-container.ts

@@ -477,7 +477,8 @@ class InlineControlContainer extends HTMLElement {
 
       if (hiddenValueCheckBox !== null && hiddenValueInput !== null) {
         hiddenValueCheckBox.checked = !hiddenValueCheckBox.checked;
-        hiddenValueInput.value = hiddenValueCheckBox.checked ? '1' : '0';
+        const active = hiddenValueCheckBox.checked !== (hiddenValueCheckBox.dataset.invertStateDisplay === 'true');
+        hiddenValueInput.value = active ? '1' : '0';
         FormEngine.markFieldAsChanged(hiddenValueCheckBox);
       }
 

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';