typo3-typescript-sources 14.3.5 → 14.3.6

package/.last-synced-tag

@@ -1 +1 @@
-v14.3.5
+v14.3.6

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

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

@@ -88,7 +88,7 @@ class SlugElement {
   }
 
   private registerEvents(): void {
-    const fieldsToListenOnList = Object.values(this.getAvailableFieldsForProposalGeneration()).map((field: HTMLElement) => `[id="${field.id}"]`);
+    const fieldsToListenOnList = Object.values(this.getAvailableFieldsForProposalGeneration()).map((field: HTMLElement) => field.dataset.slugSelector);
     const recreateButton: HTMLButtonElement = this.fullElement.querySelector(Selectors.recreateButton);
 
     // Listen on 'listenerFieldNames' for new pages. This is typically the 'title' field
@@ -217,12 +217,20 @@ class SlugElement {
   private getAvailableFieldsForProposalGeneration(): { [key: string]: HTMLElement } {
     const availableFields: { [key: string]: HTMLElement } = {};
     for (const [fieldName, selector] of Object.entries(this.fieldsToListenOn)) {
-      let field = document.querySelector('[data-formengine-input-name="' + selector + '"]') as HTMLElement;
-      if (field === null) {
+      const selectorCandidates = [
+        '[data-formengine-input-name="' + selector + '"]',
         // Also check for fields, which do not point to a hidden input field (e.g. "input type=hidden", readOnly, or select fields)
-        field = document.querySelector('[name="' + selector + '"]') as HTMLElement;
-      }
+        '[name="' + selector + '"]'
+      ];
+      let field: HTMLElement;
+      let usedSelector = '';
+      selectorCandidates.some((testSelector: string) => {
+        field = document.querySelector(testSelector) as HTMLElement;
+        usedSelector = testSelector;
+        return field !== null;
+      });
       if (field !== null) {
+        field.dataset.slugSelector = usedSelector;
         availableFields[fieldName] = field;
       }
     }

package/backend/layout-module/sticky-language-header.ts

@@ -0,0 +1,186 @@
+/*
+ * 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 { css, html, LitElement, type TemplateResult } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+/**
+ * Module: @typo3/backend/layout-module/sticky-language-header
+ *
+ * Carries the header information of a language column twice: the default slot
+ * stays in the flow, the "sticky" slot holds a copy that is placed below the
+ * doc header, aligned with its column, for as long as the header itself is
+ * scrolled out of view. Without a "sticky" slot the element is inert.
+ */
+@customElement('typo3-backend-page-layout-sticky-language-header')
+export class PageLayoutStickyLanguageHeader extends LitElement {
+  static override styles = css`
+    /* the global border-box reset does not cross the shadow boundary */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    :host {
+      display: block;
+    }
+
+    .sticky {
+      display: flex;
+      align-items: center;
+      gap: .5rem;
+      position: fixed;
+      z-index: calc(var(--typo3-zindex-header) - 2);
+      padding: .5rem .75rem;
+      white-space: nowrap;
+      overflow: hidden;
+      pointer-events: none;
+      color: var(--typo3-component-color);
+      background-color: var(--typo3-component-bg);
+      border: var(--typo3-component-border-width) solid var(--typo3-component-border-color);
+      border-top: 0;
+      border-radius: 0 0 var(--pagemodule-grid-cell-border-radius) var(--pagemodule-grid-cell-border-radius);
+      box-shadow: var(--typo3-component-box-shadow-flyout);
+      opacity: 0;
+      /*
+       * The doc header is overlapped by a pixel: it ends on a fractional
+       * position, and two boxes meeting there round apart when they are
+       * rasterized, which lets the page show through the seam. Offset via top,
+       * a transform on a fixed element causes repaint artifacts.
+       */
+      top: calc(var(--sticky-top, 0px) - 1px - .5rem);
+      transition: opacity .2s ease-out, top .2s ease-out;
+    }
+
+    .sticky-active {
+      opacity: 1;
+      top: calc(var(--sticky-top, 0px) - 1px);
+    }
+
+    ::slotted([slot="sticky"]) {
+      display: flex;
+      align-items: center;
+      gap: .5rem;
+      min-width: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .sticky {
+        transition: none;
+      }
+    }
+  `;
+
+  // how far the box shadow reaches beyond the border box
+  private static readonly shadowBleed: number = 64;
+
+  @state() protected active: boolean = false;
+
+  @query('.inline') private readonly inline: HTMLElement;
+  @query('.sticky') private readonly sticky: HTMLElement;
+
+  private scrollEvent: RegularEvent | null = null;
+  private resizeEvent: RegularEvent | null = null;
+  private ticking: boolean = false;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    const sticky = this.querySelector(':scope > [slot="sticky"]');
+    if (sticky === null) {
+      return;
+    }
+    // the slot is rendered with [hidden] so it does not flash before the element
+    // is upgraded, and the global reset declares that one !important
+    sticky.removeAttribute('hidden');
+    this.scrollEvent = new RegularEvent('scroll', this.scheduleSync, true);
+    this.scrollEvent.bindTo(document);
+    this.resizeEvent = new RegularEvent('resize', this.scheduleSync);
+    this.resizeEvent.bindTo(window);
+  }
+
+  public override disconnectedCallback(): void {
+    this.scrollEvent?.release();
+    this.resizeEvent?.release();
+    this.scrollEvent = null;
+    this.resizeEvent = null;
+    super.disconnectedCallback();
+  }
+
+  protected override firstUpdated(): void {
+    this.scheduleSync();
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="inline"><slot></slot></div>
+      <div class="sticky${this.active ? ' sticky-active' : ''}" aria-hidden="true">
+        <slot name="sticky"></slot>
+      </div>`;
+  }
+
+  private readonly scheduleSync = (): void => {
+    if (this.ticking) {
+      return;
+    }
+    this.ticking = true;
+    requestAnimationFrame((): void => {
+      this.ticking = false;
+      this.sync();
+    });
+  };
+
+  private sync(): void {
+    const container = this.closest('.t3-grid-container');
+    if (container === null || !this.inline || !this.sticky) {
+      return;
+    }
+    // the lower edge of the doc header in viewport coordinates, which is where the
+    // element is placed: whichever of its bars still reaches into the viewport wins,
+    // so it holds for a missing button bar and for a bar that wrapped into two rows
+    const topOffset: number = Math.max(0, ...Array.from(
+      this.ownerDocument.querySelectorAll('.module-docheader'),
+      (bar: Element): number => bar.getBoundingClientRect().bottom,
+    ));
+    const containerRect = container.getBoundingClientRect();
+    const inlineRect = this.inline.getBoundingClientRect();
+    this.active = inlineRect.bottom <= topOffset && containerRect.bottom > topOffset;
+    if (!this.active) {
+      return;
+    }
+    this.sticky.style.setProperty('--sticky-top', topOffset + 'px');
+    this.sticky.style.left = inlineRect.left + 'px';
+    this.sticky.style.width = inlineRect.width + 'px';
+    const cutStart = Math.max(0, containerRect.left - inlineRect.left);
+    const cutEnd = Math.max(0, inlineRect.right - containerRect.right);
+    if (cutStart > 0 || cutEnd > 0) {
+      // clip-path takes the border box as its reference, so the region has to reach
+      // beyond it on every side that is not cut, or the box shadow is clipped away too
+      const bleed = -PageLayoutStickyLanguageHeader.shadowBleed + 'px';
+      const start = cutStart > 0 ? cutStart + 'px' : bleed;
+      const end = cutEnd > 0 ? cutEnd + 'px' : bleed;
+      this.sticky.style.clipPath = `inset(${bleed} ${end} ${bleed} ${start})`;
+    } else {
+      this.sticky.style.clipPath = '';
+    }
+    this.sticky.style.visibility = cutStart < inlineRect.width && cutEnd < inlineRect.width ? '' : 'hidden';
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-page-layout-sticky-language-header': PageLayoutStickyLanguageHeader;
+  }
+}

package/backend/live-search/element/result/item/item.ts

@@ -27,8 +27,10 @@ export interface ResultItemInterface {
   defaultAction: ResultItemActionInterface;
   icon: Record<string, string>;
   language: ResultItemLanguageInterface | null;
+  thumbnailUrl: string | null;
   itemTitle: string;
   typeLabel: string;
+  properties: Record<string, string>;
   extraData: { [key: string]: any }
 }
 

package/backend/live-search/element/result/result-detail-container.ts

@@ -32,12 +32,25 @@ export class ResultDetailContainer extends LitElement {
       return nothing;
     }
 
+    const propertyEntries = Object.entries(this.resultItem.properties ?? {});
+
     return html`
       <div class="livesearch-detail-preamble">
-        <typo3-backend-icon identifier="${this.resultItem.icon.identifier}" overlay="${this.resultItem.icon.overlay}" size="large"></typo3-backend-icon>
+        ${this.resultItem.thumbnailUrl
+    ? html`<div class="livesearch-detail-preamble-thumbnail"><img src="${this.resultItem.thumbnailUrl}" loading="lazy" alt=""></div>`
+    : html`<typo3-backend-icon identifier="${this.resultItem.icon.identifier}" overlay="${this.resultItem.icon.overlay}" size="large"></typo3-backend-icon>`
+}
         <h3>${this.resultItem.itemTitle}</h3>
         <p class="livesearch-detail-preamble-type">${this.resultItem.typeLabel}</p>
       </div>
+      ${propertyEntries.length > 0 ? html`
+        <dl class="livesearch-detail-properties">
+          ${propertyEntries.map(([label, value]: [string, string]) => html`
+            <dt>${label}</dt>
+            <dd>${value}</dd>
+          `)}
+        </dl>
+      ` : nothing}
       <typo3-backend-live-search-result-item-action-container .resultItem="${this.resultItem}"></typo3-backend-live-search-result-item-action-container>
     `;
   }

package/backend/module-docheader.ts

@@ -0,0 +1,58 @@
+/*
+ * 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';
+
+enum Selectors {
+  wrapper = '.module-docheader-wrapper',
+  navigation = '.t3js-module-docheader-navigation',
+}
+
+/**
+ * Module: @typo3/backend/module-docheader
+ *
+ * Publishes the measured docheader heights as CSS custom properties, because
+ * both bars wrap and the stylesheet cannot know how much of it stays pinned.
+ */
+class ModuleDocHeader {
+  private readonly resizeObserver: ResizeObserver;
+  private wrapper: HTMLElement | null = null;
+  private navigation: HTMLElement | null = null;
+
+  constructor() {
+    this.resizeObserver = new ResizeObserver((): void => this.publish());
+    DocumentService.ready().then((): void => this.observe());
+  }
+
+  private observe(): void {
+    this.wrapper = document.querySelector(Selectors.wrapper);
+    if (this.wrapper === null) {
+      return;
+    }
+
+    this.navigation = this.wrapper.querySelector(Selectors.navigation);
+    // observing delivers an initial record, which is what publishes the first values
+    this.resizeObserver.observe(this.wrapper);
+    if (this.navigation !== null) {
+      this.resizeObserver.observe(this.navigation);
+    }
+  }
+
+  private publish(): void {
+    const style = document.documentElement.style;
+    style.setProperty('--module-docheader-height', `${this.wrapper.getBoundingClientRect().height}px`);
+    style.setProperty('--module-docheader-navigation-height', `${this.navigation?.getBoundingClientRect().height ?? 0}px`);
+  }
+}
+
+export default new ModuleDocHeader();

package/backend/page-wizard/steps/position-step.ts

@@ -80,6 +80,7 @@ export class PositionStep implements WizardStepInterface, WizardStepValueInterfa
         .activePageId="${currentValue?.pageUid}"
         .insertPosition="${currentValue?.insertPosition}"
         @typo3:page-position-select-tree:insert-position-change=${(event: CustomEvent) => this.handleInsertPositionChange(event)}
+        @typo3:page-position-select-tree:insert-position-confirm=${() => this.handleInsertPositionConfirm()}
       >
       </typo3-backend-component-page-position-select>
     `;
@@ -141,6 +142,10 @@ export class PositionStep implements WizardStepInterface, WizardStepValueInterfa
     });
   }
 
+  private handleInsertPositionConfirm(): void {
+    this.context.dispatchAutoAdvance();
+  }
+
   private initSummaryTask(): void {
     this.summaryTask = new Task(this.context.wizard, {
       task: async ([pageUid]: [number]): Promise<PageDetail> => {

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

@@ -56,6 +56,21 @@ export class InsertPositionChangeEvent extends CustomEvent<{pageUid: number, pos
     });
   }
 }
+
+export class InsertPositionConfirmEvent extends CustomEvent<{pageUid: number, position: Position}> {
+  static readonly eventName = 'typo3:page-position-select-tree:insert-position-confirm';
+  constructor(pageUid: number, position: Position) {
+    super(InsertPositionConfirmEvent.eventName, {
+      detail: {
+        pageUid: pageUid,
+        position: position,
+      },
+      bubbles: true,
+      composed: true
+    });
+  }
+}
+
 @customElement('typo3-backend-component-page-position-select-tree')
 export class PagePositionSelectTree extends PageTree {
 
@@ -140,6 +155,16 @@ export class PagePositionSelect extends LitElement {
 
   private async handleNodeSelected(event: CustomEvent): Promise<void> {
     const selectedNode: TreeNodeInterface = event.detail.node;
+
+    // Re-selecting the active node confirms it and advances the wizard.
+    if (this.isActivePagePositionNode(selectedNode)) {
+      this.dispatchEvent(new InsertPositionConfirmEvent(
+        this.activePageId,
+        this.insertPosition
+      ));
+      return;
+    }
+
     const [pageUid, insertPosition] = selectedNode.identifier.split('-');
     this.insertPosition = (insertPosition ?? 'inside') as Position;
     this.activePageId = Number(pageUid);

package/backend/wizard/finisher/event-finisher.ts

@@ -0,0 +1,62 @@
+/*
+ * 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 type { FinisherInterface } from '@typo3/backend/wizard/finisher/finisher-interface';
+import type { FinisherConfig } from '@typo3/backend/wizard/finisher/finisher-config';
+
+/**
+ * Event finisher - dispatches the event supplied via `config.data.event` when
+ * the wizard finishes.
+ *
+ * The wizard runs in the top window while backend modules live in content
+ * frames, so the event is broadcast to the top document and every child frame,
+ * where the module that opened the wizard (e.g. the dashboard) can listen for
+ * it on its own document and update in place instead of reloading.
+ */
+export default class EventFinisher implements FinisherInterface {
+  private config!: FinisherConfig;
+
+  public setConfig(config: FinisherConfig): void {
+    this.config = config;
+  }
+
+  async render(): Promise<TemplateResult> {
+    return html`
+      <typo3-backend-alert
+        severity="0"
+        heading="${this.config.labels.successTitle}"
+        message="${this.config.labels.successDescription}"
+        show-icon
+      ></typo3-backend-alert>
+    `;
+  }
+
+  async execute(): Promise<void> {
+    const event = this.config.data.event;
+
+    if (!(event instanceof Event)) {
+      console.warn('Event finisher called without an event to dispatch');
+      return;
+    }
+
+    document.dispatchEvent(event);
+    for (let i = 0; i < window.frames.length; i++) {
+      try {
+        window.frames[i].document.dispatchEvent(event);
+      } catch {
+        // Cross-origin frame, skip
+      }
+    }
+  }
+}

package/backend/wizard/wizard.ts

@@ -14,6 +14,8 @@
 import { html, LitElement, nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref, type Ref } from 'lit/directives/ref.js';
+import { KeyTypesEnum } from '@typo3/backend/enum/key-types';
 import Modal from '@typo3/backend/modal';
 import '@typo3/backend/element/alert-element';
 import '@typo3/backend/element/icon-element';
@@ -41,6 +43,7 @@ type DataStoreKey = keyof DataStore;
 export class Wizard extends LitElement {
   @property({ type: Array, attribute: false }) steps: WizardStepInterface[] = [];
   @property({ type: String, attribute: 'confirm-button-label' }) confirmButtonLabel: string;
+  @property({ type: Boolean, attribute: 'skip-summary' }) skipSummary: boolean = false;
   @property({ type: Object, attribute: false }) submissionService: SubmissionServiceInterface;
 
   @state() protected currentStepIndex: number = 0;
@@ -49,6 +52,8 @@ export class Wizard extends LitElement {
   @state() protected allSteps: WizardStepInterface[] = [];
 
   private progressTracker: ProgressTrackerElement | null = null;
+  private readonly primaryButtonRef: Ref<HTMLButtonElement> = createRef();
+  private focusPendingStep: WizardStepInterface | null = null;
 
   override connectedCallback(): void {
     super.connectedCallback();
@@ -144,7 +149,7 @@ export class Wizard extends LitElement {
     return html`
       <div class="wizard">
         <div class="wizard-progress">${this.renderProgressTracker()}</div>
-        <div class="wizard-content" aria-live="polite">${this.currentStep?.render()}</div>
+        <div class="wizard-content" aria-live="polite" @keydown=${this.handleContentKeydown}>${this.currentStep?.render()}</div>
         <div class="wizard-actions">${this.renderWizardButtons()}</div>
       </div>
     `;
@@ -177,7 +182,7 @@ export class Wizard extends LitElement {
     ) {
       this.allSteps = [
         ...this.steps,
-        new ConfirmStep(this),
+        ...(this.skipSummary ? [] : [new ConfirmStep(this)]),
         new FinisherStep(this, this.submissionService),
       ];
 
@@ -188,13 +193,87 @@ export class Wizard extends LitElement {
     }
 
     if (this.currentStep && _changedProperties.has('currentStep')) {
+      // Optional per-step readiness hook (e.g. reinitialising FormEngine).
       if (this.hasAfterRender(this.currentStep)) {
         await this.currentStep.afterRender();
         this.requestUpdate();
       }
+      this.focusPendingStep = this.currentStep;
+    }
+
+    await this.moveFocusIntoStep();
+  }
+
+  /**
+   * Move focus into the current step's content once present. Async steps (e.g.
+   * @lit/task) re-render the wizard when their data settles, so retry on every
+   * update until a focus target is found — no per-step focus wiring required.
+   */
+  private async moveFocusIntoStep(): Promise<void> {
+    const step = this.focusPendingStep;
+    if (!step || step !== this.currentStep) {
+      this.focusPendingStep = null; // no request, or navigated on since
+      return;
+    }
+    await this.updateComplete;
+    if (step === this.currentStep && this.focusStepContent()) {
+      this.focusPendingStep = null;
     }
   }
 
+  /**
+   * Focus the selected radio, otherwise the first form control. Returns whether
+   * focus settled on the step's own content; the primary-button fall back
+   * returns `false` so async content can still claim focus once it renders.
+   */
+  private focusStepContent(): boolean {
+    const content = this.renderRoot.querySelector('.wizard-content');
+    if (content) {
+      // Don't steal focus if the step already has a focus.
+      if (content.contains(this.ownerDocument.activeElement)) {
+        return true;
+      }
+
+      const target = this.findFocusTarget(content);
+      if (target) {
+        // autofocus makes an opening modal <dialog> pick this over the close
+        // button; focus() covers later step transitions.
+        target.setAttribute('autofocus', '');
+        target.focus();
+        return true;
+      }
+    }
+
+    // No focusable content (yet): fall back to the primary button, but not if
+    // focus already rests on an action button (don't steal it on re-renders).
+    const actions = this.renderRoot.querySelector('.wizard-actions');
+    if (!actions?.contains(this.ownerDocument.activeElement)) {
+      this.primaryButtonRef.value?.focus();
+    }
+
+    return false;
+  }
+
+  /**
+   * Explicit autofocus wins, then the selected radio, then the first control
+   * that is enabled and visible. Shadow roots are not pierced — custom
+   * elements take part by declaring autofocus or tabindex="0" on their host.
+   */
+  private findFocusTarget(content: Element): HTMLElement | null {
+    const firstOperable = (selector: string): HTMLElement | null => {
+      for (const element of content.querySelectorAll<HTMLElement>(selector)) {
+        if (!element.matches(':disabled') && element.checkVisibility()) {
+          return element;
+        }
+      }
+      return null;
+    };
+
+    return firstOperable('[autofocus]')
+      ?? firstOperable('input[type="radio"]:checked')
+      ?? firstOperable('input:not([type="hidden"]):not([type="radio"]):not([readonly]), select, button, textarea:not([readonly]), [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])');
+  }
+
   private hasAfterRender(step: WizardStepInterface): step is WizardStepInterface & WizardStepAfterRenderInterface {
     return step && typeof (step as any).afterRender === 'function';
   }
@@ -211,6 +290,23 @@ export class Wizard extends LitElement {
     this.tryAutoAdvance();
   };
 
+  /**
+   * Enter inside a bare input advances the wizard, emulating a form submit.
+   * Controls with their own Enter behaviour are left alone: inputs inside a
+   * <form>, search inputs, checkboxes and non-input controls.
+   */
+  private readonly handleContentKeydown = (event: KeyboardEvent): void => {
+    if (event.key !== KeyTypesEnum.ENTER) {
+      return;
+    }
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement) || target.form || target.type === 'search' || target.type === 'checkbox') {
+      return;
+    }
+    event.preventDefault();
+    void this.handleNext();
+  };
+
   private renderWizardButtons(): TemplateResult {
     return html`
       ${this.renderPreviousButton()}
@@ -261,7 +357,7 @@ export class Wizard extends LitElement {
     return html`
       <div>
         ${resetButtonHtml}
-        <button type="button" class="${classMap({ 'btn': true, 'btn-primary': true, 'disabled': !isComplete })}"
+        <button type="button" ${ref(this.primaryButtonRef)} class="${classMap({ 'btn': true, 'btn-primary': true, 'disabled': !isComplete })}"
           @click="${this.handleNext}"
         >
           ${buttonLabel}