typo3-typescript-sources 14.3.0 → 14.3.1

package/.last-synced-tag

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

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/date-time-picker.ts

@@ -73,7 +73,7 @@ class DateTimePicker {
     // 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;
 

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/layout-module/velocity-scroll.ts

@@ -0,0 +1,123 @@
+/*
+ * 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!
+ */
+
+/**
+ * Module: @typo3/backend/layout-module/velocity-scroll
+ *
+ * Enables auto-scrolling while dragging near the viewport edge.
+ *
+ * Self-binds a delegated `dragstart` listener for all `[draggable="true"]`
+ * elements on the page. May also be invoked directly:
+ *
+ * ```js
+ *    // inside a dragstart event handler:
+ *    initVelocityScroll(event);
+ * ```
+ */
+import DocumentService from '@typo3/core/document-service';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+const EDGE_RATIO = 0.2;
+const MAX_STRENGTH_RATIO = 2.5;
+
+DocumentService.ready().then((): void => {
+  new RegularEvent('dragstart', (event: Event): void => {
+    initVelocityScroll(event as DragEvent);
+  }).delegateTo(document, '[draggable="true"]');
+});
+
+export function initVelocityScroll(event: DragEvent): void {
+  const scrollingElement = document.scrollingElement;
+  if (!(scrollingElement instanceof HTMLElement)) {
+    console.warn('Scrolling element is not an HTMLElement. Velocity scroll will not work.');
+    return;
+  }
+
+  // Horizontal scrolling may live on an inner container (e.g. the page module's
+  // .t3-grid-container with overflow-x: auto) rather than the document, so target
+  // the nearest horizontally scrollable ancestor of the drag source if any exists.
+  const horizontalElement = findHorizontalScrollAncestor(event.target as Element | null) ?? scrollingElement;
+
+  let scrollSpeedVertical = 0;
+  let scrollSpeedHorizontal = 0;
+  let running = true;
+  let lastFrameTime = performance.now();
+
+  // Disable smooth scrolling for the duration of the drag and restore on dragend
+  const originalVerticalScrollBehavior = scrollingElement.style.scrollBehavior;
+  const originalHorizontalScrollBehavior = horizontalElement.style.scrollBehavior;
+  scrollingElement.style.scrollBehavior = 'auto';
+  horizontalElement.style.scrollBehavior = 'auto';
+
+  const tick = (now: number): void => {
+    const dt = (now - lastFrameTime) / 1000;
+    lastFrameTime = now;
+
+    const maxVertical = scrollingElement.scrollHeight - scrollingElement.clientHeight;
+    const maxHorizontal = horizontalElement.scrollWidth - horizontalElement.clientWidth;
+    scrollingElement.scrollTop = Math.max(0, Math.min(scrollingElement.scrollTop + scrollSpeedVertical * dt, maxVertical));
+    horizontalElement.scrollLeft = Math.max(0, Math.min(horizontalElement.scrollLeft + scrollSpeedHorizontal * dt, maxHorizontal));
+
+    if (running) {
+      requestAnimationFrame(tick);
+    }
+  };
+  requestAnimationFrame(tick);
+
+  // Progress within the edge zone goes from 0 (just entered) to 1 (at the edge).
+  // Squaring it makes scrolling accelerate noticeably near the edge.
+  const axisStrength = (distance: number, edge: number, max: number): number =>
+    distance < edge ? ((1 - distance / edge) ** 2) * max : 0;
+
+  const autoScroll = (event: DragEvent): void => {
+    const verticalEdge = window.innerHeight * EDGE_RATIO;
+    const horizontalEdge = window.innerWidth * EDGE_RATIO;
+    const maxVerticalStrength = window.innerHeight * MAX_STRENGTH_RATIO;
+    const maxHorizontalStrength = window.innerWidth * MAX_STRENGTH_RATIO;
+
+    scrollSpeedVertical =
+      axisStrength(window.innerHeight - event.clientY, verticalEdge, maxVerticalStrength) -
+      axisStrength(event.clientY, verticalEdge, maxVerticalStrength);
+    scrollSpeedHorizontal =
+      axisStrength(window.innerWidth - event.clientX, horizontalEdge, maxHorizontalStrength) -
+      axisStrength(event.clientX, horizontalEdge, maxHorizontalStrength);
+  };
+  autoScroll(event);
+  window.addEventListener('dragover', autoScroll);
+
+  // Bind teardown on window: the source element may be detached or replaced
+  // during the drop (drag-drop.ts re-renders content via AJAX), in which case
+  // a `dragend` listener on the source element would never fire.
+  window.addEventListener('dragend', (): void => {
+    window.removeEventListener('dragover', autoScroll);
+    scrollSpeedVertical = 0;
+    scrollSpeedHorizontal = 0;
+    running = false;
+    scrollingElement.style.scrollBehavior = originalVerticalScrollBehavior;
+    horizontalElement.style.scrollBehavior = originalHorizontalScrollBehavior;
+  }, { once: true });
+}
+
+function findHorizontalScrollAncestor(element: Element | null): HTMLElement | null {
+  let current = element;
+  while (current instanceof HTMLElement) {
+    if (current.scrollWidth > current.clientWidth) {
+      const overflowX = window.getComputedStyle(current).overflowX;
+      if (overflowX === 'auto' || overflowX === 'scroll') {
+        return current;
+      }
+    }
+    current = current.parentElement;
+  }
+  return null;
+}

package/backend/live-search/live-search.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import Modal from '@typo3/backend/modal';
+import Modal, { Sizes } from '@typo3/backend/modal';
 import '@typo3/backend/element/icon-element';
 import '@typo3/backend/live-search/element/hint';
 import '@typo3/backend/live-search/element/result/result-pagination';
@@ -105,7 +105,7 @@ class LiveSearch {
       content: url.toString(),
       title: coreLabels.get('labels.search'),
       severity: SeverityEnum.notice,
-      size: Modal.sizes.medium,
+      size: Sizes.large,
       ajaxCallback: (): void => {
         const liveSearchContainer = modal.querySelector('typo3-backend-live-search');
         const searchForm = liveSearchContainer.querySelector('form');

package/backend/modal.ts

@@ -46,6 +46,30 @@ export enum Sizes {
   expand = 'expand',
 }
 
+export enum Size {
+  small = 'small',
+  default = 'default',
+  medium = 'medium',
+  large = 'large',
+  full = 'full',
+}
+
+export type SizeConfig = { width?: Size; height?: Size };
+
+const isValidSize = (value: unknown): value is Sizes | SizeConfig => {
+  if (typeof value === 'string') {
+    return value in Sizes;
+  }
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+  const config = value as SizeConfig;
+  return Object.keys(value).length > 0
+    && Object.keys(value).every(key => key === 'width' || key === 'height')
+    && (config.width === undefined || config.width in Size)
+    && (config.height === undefined || config.height in Size);
+};
+
 export enum Positions {
   center = 'center',
   top = 'top',
@@ -89,7 +113,7 @@ export interface Configuration {
   severity: SeverityEnum;
   buttons: Array<Button>;
   style: Styles;
-  size: Sizes;
+  size: Sizes | SizeConfig;
   position: Positions;
   additionalCssClasses: Array<string>;
   callback: ModalCallbackFunction | null;
@@ -110,7 +134,6 @@ export class ModalElement extends LitElement {
   @property({ type: String, reflect: true }) type: Types = Types.default;
   @property({ type: String, reflect: true }) severity: SeverityEnum = SeverityEnum.notice;
   @property({ type: String, reflect: true }) variant: Styles = Styles.default;
-  @property({ type: String, reflect: true }) size: Sizes = Sizes.default;
   @property({ type: String, reflect: true }) position: Positions = Positions.center;
   @property({ type: Boolean }) staticBackdrop: boolean = false;
   @property({ type: Boolean }) hideCloseButton: boolean = false;
@@ -128,6 +151,7 @@ export class ModalElement extends LitElement {
   public userData: { [key: string]: any } = {};
 
   private readonly uniqueId: number;
+  #size: Sizes | SizeConfig = Sizes.default;
 
   constructor() {
     super();
@@ -135,6 +159,43 @@ export class ModalElement extends LitElement {
     this.uniqueId = ++uniqueIdCounter;
   }
 
+  @property({
+    reflect: true,
+    converter: {
+      toAttribute: (value: Sizes | SizeConfig): string =>
+        typeof value === 'string' ? value : JSON.stringify(value),
+      fromAttribute: (value: string | null): unknown => {
+        if (value === null) {
+          return Sizes.default;
+        }
+        if (isValidSize(value)) {
+          return value;
+        }
+        try {
+          return JSON.parse(value);
+        } catch {
+          return value;
+        }
+      },
+    },
+  })
+  get size(): Sizes | SizeConfig {
+    return this.#size;
+  }
+  set size(value: unknown) {
+    const valid = isValidSize(value);
+    this.#size = valid ? value : Sizes.default;
+    if (!valid && this.isConnected) {
+      // Input was invalid and got sanitized: force the attribute to match,
+      // because Lit suppresses attribute reflection on the attribute → property
+      // path, which would otherwise leave the invalid string in the DOM.
+      const expected = typeof this.#size === 'string' ? this.#size : JSON.stringify(this.#size);
+      if (this.getAttribute('size') !== expected) {
+        this.setAttribute('size', expected);
+      }
+    }
+  }
+
   public setContent(content: TemplateResult | JQuery | Element | DocumentFragment): void {
     this.templateResultContent = content;
   }
@@ -201,7 +262,7 @@ export class ModalElement extends LitElement {
       `modal-type-${this.type}`,
       `modal-style-${this.variant}`,
       `modal-severity-${Severity.getCssClass(this.severity)}`,
-      `modal-size-${this.size}`,
+      ...this.getSizeClasses(),
       `modal-position-${this.position}`,
       ...this.additionalCssClasses,
     ]);
@@ -236,6 +297,20 @@ export class ModalElement extends LitElement {
     `;
   }
 
+  private getSizeClasses(): string[] {
+    if (typeof this.size === 'string') {
+      return [`modal-size-${this.size}`];
+    }
+    const classes: string[] = [];
+    if (this.size.width !== undefined) {
+      classes.push(`modal-width-${this.size.width}`);
+    }
+    if (this.size.height !== undefined) {
+      classes.push(`modal-height-${this.size.height}`);
+    }
+    return classes;
+  }
+
   private handleDialogClose(): void {
     this.trigger('typo3-modal-hidden');
   }
@@ -599,7 +674,7 @@ class Modal {
       ? configuration.severity
       : this.defaultConfiguration.severity;
     configuration.buttons = <Array<Button>>configuration.buttons || this.defaultConfiguration.buttons;
-    configuration.size = typeof configuration.size === 'string' && configuration.size in Sizes
+    configuration.size = isValidSize(configuration.size)
       ? configuration.size
       : this.defaultConfiguration.size;
     configuration.style = typeof configuration.style === 'string' && configuration.style in Styles

package/backend/page-wizard/helper/wizard-helper.ts

@@ -13,7 +13,7 @@
 
 import { topLevelModuleImport } from '@typo3/backend/utility/top-level-module-import';
 import { html } from 'lit';
-import Modal from '@typo3/backend/modal';
+import Modal, { Size } from '@typo3/backend/modal';
 import { SeverityEnum } from '@typo3/backend/enum/severity';
 import backendLayoutLabels from '~labels/backend.layout';
 import type { PageWizardConfiguration } from '@typo3/backend/page-wizard/page-wizard-configuration';
@@ -25,7 +25,10 @@ export const openPageWizardModal = async(configuration?: PageWizardConfiguration
     title: backendLayoutLabels.get('newPage'),
     content:  html`<typo3-backend-page-wizard .configuration="${configuration}"></typo3-backend-page-wizard>`,
     severity: SeverityEnum.notice,
-    size: Modal.sizes.medium,
+    size: {
+      width: Size.medium,
+      height: Size.large
+    },
     staticBackdrop: true,
     buttons: []
   });

package/backend/setup-module.ts

@@ -72,7 +72,7 @@ class SetupModule {
         if (typeof evt.data.objectGroup === 'undefined') {
           throw new Error('No object group defined for message');
         }
-        const avatarMatches = evt.data.objectGroup.match(/avatar-(.+)$/);
+        const avatarMatches = evt.data.objectGroup.match(/(?:^|-)avatar-(.+)$/);
         if (avatarMatches === null) {
           // Received message isn't provisioned for current InlineControlContainer instance
           return;

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

@@ -1821,10 +1821,10 @@ export function renderRequiredValidatorEditor(
         getCurrentlySelectedFormElement().set(propertyPath, propertyValue);
       }
     } else {
-      getPublisherSubscriber().publish('view/inspector/removeCollectionElement/perform', [validatorIdentifier, 'validators']);
       if (getUtility().isNonEmptyString(propertyPath)) {
         getCurrentlySelectedFormElement().unset(propertyPath);
       }
+      getPublisherSubscriber().publish('view/inspector/removeCollectionElement/perform', [validatorIdentifier, 'validators']);
       propertyData = getCurrentlySelectedFormElement().get(validationErrorMessagePropertyPath);
       if (getUtility().isUndefinedOrNull(propertyData)) { propertyData = []; }
       getCurrentlySelectedFormElement().set(validationErrorMessagePropertyPath, renewValidationErrorMessages(

package/package.json

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

package/workspaces/renderable/record-table.ts

@@ -89,7 +89,7 @@ export class RecordTableElement extends LitElement {
           <thead>
           <tr>
             <th>
-              <div class="btn-group dropdown">
+              <div class="dropdown">
                 <button type="button" class="dropdown-toggle dropdown-toggle-link t3js-multi-record-selection-check-actions-toggle" data-bs-toggle="dropdown" data-bs-boundary="window" aria-expanded="false" aria-label="${coreLabels.get('labels.openSelectionOptions')}">
                   <typo3-backend-icon identifier="actions-selection" size="small"></typo3-backend-icon>
                 </button>