typo3-typescript-sources 14.3.7 → 14.3.9

package/backend/tests/backend/utility/dom-helper-test.ts

@@ -31,9 +31,9 @@ describe('@typo3/backend/utility/dom-helper', () => {
     const wrapperElement = document.createElement('div');
     wrapperElement.append(document.createRange().createContextualFragment(markup));
 
-    const parents = DomHelper.parents(wrapperElement.querySelector('#enter-here'), '.dummy-matching-element');
+    const parents = DomHelper.parents<HTMLElement>(wrapperElement.querySelector('#enter-here'), '.dummy-matching-element');
     expect(parents).to.length(3);
-    expect(parents.map((el: HTMLElement) => el.tagName)).to.have.ordered.members(['SPAN', 'P', 'DIV']);
+    expect(parents.map((el) => el.tagName)).to.have.ordered.members(['SPAN', 'P', 'DIV']);
   });
 
   it('nextAll() returns a proper list of all next elements', () => {

package/backend/tests/fixtures/modal-autofocus.html

@@ -0,0 +1 @@
+<form id="modal-ajax-form"><input name="filter" autofocus></form>

package/backend/tests/form-engine/element/extra/select-box-filter-test.ts

@@ -39,9 +39,9 @@ describe('@typo3/backend/form-engine/element/extra/select-box-filter', () => {
   });
 
   const visibleOptions = (): string[] => Array
-    .from(root.querySelectorAll('select[multiple] option'))
-    .filter((option: HTMLOptionElement): boolean => !option.hidden)
-    .map((option: HTMLOptionElement): string => option.textContent);
+    .from(root.querySelectorAll<HTMLOptionElement>('select[multiple] option'))
+    .filter((option): boolean => !option.hidden)
+    .map((option): string => option.textContent);
 
   const filterBy = (value: string): void => {
     filterField.value = value;

package/backend/tests/form-engine-validation-test.ts

@@ -35,7 +35,7 @@ type Values = any;
  * @param {Function|Array|Object} values
  * @param {Function} func
  */
-function using(values: (() => Values)|Values, func: (...args: unknown[]) => void): void {
+function using(values: (() => Values)|Values, func: (...args: any[]) => void): void {
   if (values instanceof Function) {
     values = values();
   }

package/backend/tests/modal-test.ts

@@ -0,0 +1,91 @@
+/*
+ * 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 } from 'lit';
+import { expect } from '@open-wc/testing';
+import Modal, { type ModalElement } from '@typo3/backend/modal.js';
+import type { } from 'mocha';
+
+describe('@typo3/backend/modal', () => {
+  let modal: ModalElement;
+  const nativeRequestAnimationFrame = window.requestAnimationFrame;
+
+  const shown = (element: ModalElement): Promise<void> => new Promise(resolve => {
+    element.addEventListener('typo3-modal-shown', () => resolve(), { once: true });
+  });
+
+  before(() => {
+    // The test page runs in the background, animation frames never fire there
+    window.requestAnimationFrame = (callback: FrameRequestCallback): number => window.setTimeout(() => callback(performance.now()), 0);
+  });
+
+  after(() => {
+    window.requestAnimationFrame = nativeRequestAnimationFrame;
+  });
+
+  afterEach(() => {
+    // The dialog close event does not fire in the background either
+    modal?.hideModal();
+    modal?.remove();
+  });
+
+  it('binds a footer button to the form given by its configuration', async () => {
+    modal = Modal.advanced({
+      content: html`<form id="modal-test-form"><input name="username"><input name="password"></form>`,
+      buttons: [{ text: 'ok', btnClass: 'btn-primary', form: 'modal-test-form' }],
+    });
+    await shown(modal);
+
+    const button = modal.querySelector<HTMLButtonElement>('.modal-footer button');
+    expect(button.type).to.equal('submit');
+    expect(button.form?.id).to.equal('modal-test-form');
+  });
+
+  it('keeps the focus on an autofocus field instead of the active button', async () => {
+    modal = Modal.advanced({
+      content: html`<form><input name="password" autofocus></form>`,
+      buttons: [{ text: 'ok', btnClass: 'btn-primary', active: true }],
+    });
+    await shown(modal);
+
+    expect(document.activeElement.matches('input[name="password"]')).to.be.true;
+  });
+
+  it('focuses an autofocus field of ajax content loaded after the modal was shown', async () => {
+    const nativeFetch = window.fetch;
+    window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+      await shown(modal);
+      return nativeFetch(input, init);
+    };
+    modal = Modal.advanced({
+      type: Modal.types.ajax,
+      content: '/Build/Sources/TypeScript/backend/tests/fixtures/modal-autofocus.html',
+      buttons: [{ text: 'ok', btnClass: 'btn-primary', active: true }],
+    });
+    const loaded = new Promise<void>(resolve => modal.addEventListener('modal-loaded', () => resolve(), { once: true }));
+    await loaded;
+    window.fetch = nativeFetch;
+
+    expect(document.activeElement.matches('input[name="filter"]')).to.be.true;
+  });
+
+  it('focuses the active button when the body has no autofocus field', async () => {
+    modal = Modal.advanced({
+      content: html`<form><input name="password"></form>`,
+      buttons: [{ text: 'ok', btnClass: 'btn-primary', active: true }],
+    });
+    await shown(modal);
+
+    expect(document.activeElement.matches('.modal-footer button')).to.be.true;
+  });
+});

package/backend/tests/notification-test.ts

@@ -106,6 +106,124 @@ describe('@typo3/backend/notification:', () => {
     }
   });
 
+  describe('auto dismissal', () => {
+    async function showNotification(): Promise<{ element: LitElement, isCleared: () => boolean }> {
+      Notification.success('Title', 'Message', 1);
+      const element = document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement;
+      await element.updateComplete;
+      let cleared = false;
+      element.addEventListener('typo3-notification-clear', (): void => {
+        cleared = true;
+      });
+      // Notifications appear with a delay, the countdown starts afterwards
+      await clock.tickAsync(200);
+      return { element, isCleared: (): boolean => cleared };
+    }
+
+    it('pauses while the notification is pointed at', async () => {
+      const { element, isCleared } = await showNotification();
+
+      element.dispatchEvent(new MouseEvent('mouseenter'));
+      await clock.tickAsync(5000);
+      expect(isCleared()).to.be.false;
+
+      element.dispatchEvent(new MouseEvent('mouseleave'));
+      await clock.tickAsync(1100);
+      expect(isCleared()).to.be.true;
+    });
+
+    it('pauses while the notification has the focus', async () => {
+      const { element, isCleared } = await showNotification();
+
+      element.dispatchEvent(new FocusEvent('focusin'));
+      await clock.tickAsync(5000);
+      expect(isCleared()).to.be.false;
+
+      element.dispatchEvent(new FocusEvent('focusout'));
+      await clock.tickAsync(1100);
+      expect(isCleared()).to.be.true;
+    });
+
+    it('continues with the time that was left', async () => {
+      const { element, isCleared } = await showNotification();
+
+      await clock.tickAsync(600);
+      element.dispatchEvent(new MouseEvent('mouseenter'));
+      await clock.tickAsync(5000);
+      element.dispatchEvent(new MouseEvent('mouseleave'));
+
+      await clock.tickAsync(300);
+      expect(isCleared()).to.be.false;
+      await clock.tickAsync(200);
+      expect(isCleared()).to.be.true;
+    });
+
+    it('stays paused when the pointer leaves while the focus is still inside', async () => {
+      const { element, isCleared } = await showNotification();
+
+      element.dispatchEvent(new FocusEvent('focusin'));
+      element.dispatchEvent(new MouseEvent('mouseenter'));
+      element.dispatchEvent(new MouseEvent('mouseleave'));
+      await clock.tickAsync(5000);
+      expect(isCleared()).to.be.false;
+
+      element.dispatchEvent(new FocusEvent('focusout'));
+      await clock.tickAsync(1100);
+      expect(isCleared()).to.be.true;
+    });
+
+    it('stays paused when the pointer rests on the notification before it appeared', async () => {
+      Notification.success('Title', 'Message', 1);
+      const element = document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement;
+      await element.updateComplete;
+      let cleared = false;
+      element.addEventListener('typo3-notification-clear', (): void => {
+        cleared = true;
+      });
+
+      element.dispatchEvent(new MouseEvent('mouseenter'));
+      await clock.tickAsync(5000);
+      expect(cleared).to.be.false;
+
+      element.dispatchEvent(new MouseEvent('mouseleave'));
+      await clock.tickAsync(1100);
+      expect(cleared).to.be.true;
+    });
+
+    it('is not cleared by the countdown while an action is executing', async () => {
+      let finishAction: () => void;
+      Notification.success('Title', 'Message', 1, [
+        {
+          label: 'Undo',
+          action: new DeferredAction((): Promise<void> => new Promise((resolve): void => {
+            finishAction = resolve;
+          })),
+        },
+      ]);
+      const element = document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement;
+      await element.updateComplete;
+      let cleared = false;
+      element.addEventListener('typo3-notification-clear', (): void => {
+        cleared = true;
+      });
+      await clock.tickAsync(200);
+
+      (element.querySelector('.alert-actions a') as HTMLAnchorElement).click();
+      await clock.tickAsync(5000);
+      expect(cleared).to.be.false;
+
+      finishAction();
+      await clock.tickAsync(0);
+      expect(cleared).to.be.true;
+    });
+  });
+
+  it('announces notifications to assistive technology', async () => {
+    Notification.info('Info message', 'Some text', 1);
+    await (document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement).updateComplete;
+    expect(document.querySelector('#alert-container .alert-list').getAttribute('aria-live')).to.equal('polite');
+  });
+
   it('can render action buttons', async () => {
     Notification.info(
       'Info message',
@@ -158,4 +276,62 @@ describe('@typo3/backend/notification:', () => {
     await (document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement).updateComplete;
     expect(called).to.be.true;
   });
+
+  it('deferred action is called with its link', async () => {
+    let called = false;
+    Notification.info('Info message', 'Some text', 0, [
+      {
+        label: 'My deferred action',
+        action: new DeferredAction(async (): Promise<void> => {
+          called = true;
+        }),
+      },
+    ]);
+    const element = document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement;
+    await element.updateComplete;
+
+    (element.querySelector('.alert-actions a') as HTMLAnchorElement).click();
+    await clock.tickAsync(0);
+
+    expect(called).to.be.true;
+  });
+
+  it('executes an action only once while it is executing', async () => {
+    let calls = 0;
+    let finishAction: () => void;
+    Notification.info('Info message', 'Some text', 0, [
+      {
+        label: 'Deferred action',
+        action: new DeferredAction((): Promise<void> => {
+          calls++;
+          return new Promise((resolve): void => {
+            finishAction = resolve;
+          });
+        }),
+      },
+      {
+        label: 'Other action',
+        action: new ImmediateAction((): void => {
+          calls++;
+        }),
+      },
+    ]);
+    const element = document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement;
+    await element.updateComplete;
+    const [first, second] = Array.from(element.querySelectorAll('.alert-actions a')) as HTMLAnchorElement[];
+
+    first.click();
+    await clock.tickAsync(0);
+    // Keyboard activation still reaches a link which ignores the pointer
+    first.click();
+    second.click();
+    await clock.tickAsync(0);
+    expect(calls).to.equal(1);
+    expect(first.getAttribute('aria-disabled')).to.equal('true');
+    expect(second.getAttribute('aria-disabled')).to.equal('true');
+
+    finishAction();
+    await clock.tickAsync(0);
+    expect(calls).to.equal(1);
+  });
 });

package/backend/tests/tree/tree-test.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 { expect } from '@open-wc/testing';
+import { Tree } from '@typo3/backend/tree/tree.js';
+import type { TreeNodeInterface } from '@typo3/backend/tree/tree-node.js';
+import type { } from 'mocha';
+
+class TestTree extends Tree {
+  public enhance(nodes: TreeNodeInterface[]): TreeNodeInterface[] {
+    return this.enhanceNodes(nodes);
+  }
+}
+
+customElements.define('typo3-test-storage-tree', TestTree);
+
+describe('file storage tree search', () => {
+  it('expands every matching storage root', () => {
+    const tree = document.createElement('typo3-test-storage-tree') as TestTree;
+    tree.searchTerm = 'needle';
+    const nodes = [
+      { identifier: '1:/', depth: 0, loaded: false, hasChildren: true },
+      { identifier: '1:/needle', depth: 1, loaded: true, hasChildren: false },
+      { identifier: '2:/', depth: 0, loaded: false, hasChildren: true },
+      { identifier: '2:/needle', depth: 1, loaded: true, hasChildren: false },
+    ] as unknown as TreeNodeInterface[];
+
+    expect(tree.enhance(nodes).filter(node => node.depth === 0).map(node => node.__expanded))
+      .to.deep.equal([true, true]);
+  });
+});

package/backend/tree/file-storage-browser.ts

@@ -119,7 +119,7 @@ export class FileStorageBrowser extends LitElement {
   private readonly selectActiveNode = (evt: CustomEvent): void => {
     // Activate the current node
     const nodes = evt.detail.nodes as Array<TreeNodeInterface>;
-    evt.detail.nodes = nodes.map((node: TreeNodeInterface) => {
+    evt.detail.nodes = nodes.map((node) => {
       if (decodeURIComponent(node.identifier) === this.activeFolder) {
         node.checked = true;
       }

package/backend/tree/file-storage-tree-container.ts

@@ -62,7 +62,7 @@ export class EditableFileStorageTree extends FileStorageTree {
     const fileOperationCollection = FileOperationCollection.fromNodePositionOptions(options);
     const operationConflicts = fileOperationCollection.getConflictingOperationsForTreeNode(options.target);
     if (operationConflicts.length > 0) {
-      operationConflicts.forEach((operation: FileOperation) => {
+      operationConflicts.forEach((operation) => {
         Notification.showMessage(
           layoutLabels.get('drop.conflict'),
           layoutLabels.get('mess.drop.conflict', [
@@ -161,7 +161,7 @@ export class EditableFileStorageTree extends FileStorageTree {
         const fileOperationCollection = FileOperationCollection.fromDataTransfer(event.dataTransfer, targetResource);
         const operationConflicts = fileOperationCollection.getConflictingOperationsForTreeNode(node);
         if (operationConflicts.length > 0) {
-          operationConflicts.forEach((operation: FileOperation) => {
+          operationConflicts.forEach((operation) => {
             Notification.showMessage(
               layoutLabels.get('drop.conflict'),
               layoutLabels.get('mess.drop.conflict', [
@@ -448,12 +448,12 @@ class FileOperationCollection {
   }
 
   public getConflictingOperationsForTreeNode(node: TreeNodeInterface): FileOperation[] {
-    return this.operations.filter((operation: FileOperation) => operation.hasConflictWithTreeNode(node));
+    return this.operations.filter((operation) => operation.hasConflictWithTreeNode(node));
   }
 
   public getResources(): ResourceInterface[] {
     const resources: ResourceInterface[] = [];
-    this.operations.forEach((operation: FileOperation) => {
+    this.operations.forEach((operation) => {
       resources.push(operation.resource);
     });
 

package/backend/tree/page-browser.ts

@@ -194,7 +194,7 @@ export class PageBrowser extends LitElement {
   private readonly selectActivePageInTree = (evt: CustomEvent): void => {
     // Activate the current node
     const nodes = evt.detail.nodes as Array<TreeNodeInterface>;
-    evt.detail.nodes = nodes.map((node: TreeNodeInterface) => {
+    evt.detail.nodes = nodes.map((node) => {
       if (parseInt(node.identifier, 10) === this.activePageId) {
         node.checked = true;
       }

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

@@ -204,7 +204,7 @@ export class PagePositionSelect extends LitElement {
 
   private syncActiveInsertPositionState(): TreeNodeInterface|null {
     let activeNode: TreeNodeInterface|null = null;
-    this.tree.nodes.forEach((node: TreeNodeInterface) => {
+    this.tree.nodes.forEach((node) => {
       node.checked = this.isActivePagePositionNode(node);
       if (node.checked) {
         activeNode = node;

package/backend/tree/page-tree-element.ts

@@ -110,7 +110,9 @@ export class EditablePageTree extends PageTree {
         '&data[pages][' + data.node.identifier + '][title]=' + encodeURIComponent(newData.title) +
         '&data[pages][' + data.node.identifier + '][doktype]=' + encodeURIComponent(newData.doktype);
     } else if (data.command === TreeNodeCommandEnum.EDIT) {
-      params = '&data[pages][' + data.node.identifier + '][title]=' + encodeURIComponent(data.title);
+      // The tree may show nav_title instead of title, so write back to the field that is displayed
+      const nameSourceField = data.node.nameSourceField || 'title';
+      params = '&data[pages][' + data.node.identifier + '][' + nameSourceField + ']=' + encodeURIComponent(data.title);
     } else if (data.command === TreeNodeCommandEnum.DELETE) {
       // @todo currently it's "If uid of deleted record (data.uid) is still selected, randomly select the first node"
       const moduleStateStorage = ModuleStateStorage.current('web');
@@ -245,6 +247,11 @@ export class EditablePageTree extends PageTree {
       command: TreeNodeCommandEnum.MOVE
     };
 
+    if (!this.settings.displayCopyMoveConfirmation) {
+      this.sendChangeCommand(options);
+      return;
+    }
+
     let modalText = '';
     const languageArguments = [node.name, target.name] as const;
     switch(position) {
@@ -282,7 +289,7 @@ export class EditablePageTree extends PageTree {
       ]
     );
 
-    modal.addEventListener('button.clicked', (e: JQueryEventObject) => {
+    modal.addEventListener('button.clicked', (e: Event) => {
       const target = e.target as HTMLInputElement;
       if (target.name === 'move') {
         options.command = TreeNodeCommandEnum.MOVE;

package/backend/tree/page-tree.ts

@@ -57,7 +57,7 @@ export class PageTree extends Tree
       return Promise.resolve();
     }
 
-    if (this.nodes.find((node: TreeNodeInterface) => node.checked)) {
+    if (this.nodes.find((node) => node.checked)) {
       return Promise.resolve();
     }
 
@@ -170,3 +170,9 @@ export class PageTree extends Tree
     return false;
   }
 }
+
+declare global {
+  interface DocumentEventMap {
+    'typo3:pagetree:mountPoint': CustomEvent<{ pageId: number }>;
+  }
+}

package/backend/tree/tree-module-state.ts

@@ -26,12 +26,12 @@ export const TreeModuleState = <T extends Constructor<LitElement>>(superClass: T
 
     public override connectedCallback(): void {
       super.connectedCallback();
-      document.addEventListener('typo3:module-state-storage:update:' + this.moduleStateType, this.moduleStateUpdated);
+      document.addEventListener('typo3:module-state-storage:update:' + this.moduleStateType, this.moduleStateUpdated as unknown as EventListener);
     }
 
     public override disconnectedCallback(): void {
       super.disconnectedCallback();
-      document.removeEventListener('typo3:module-state-storage:update:' + this.moduleStateType, this.moduleStateUpdated);
+      document.removeEventListener('typo3:module-state-storage:update:' + this.moduleStateType, this.moduleStateUpdated as unknown as EventListener);
     }
 
     protected transformModuleStateIdentifierToNodeIdentifier(moduleStateIdentifier: string): string {
@@ -102,7 +102,7 @@ export const TreeModuleState = <T extends Constructor<LitElement>>(superClass: T
         return;
       }
 
-      if (this.tree.nodes.find((node: TreeNodeInterface) => node.checked)) {
+      if (this.tree.nodes.find((node) => node.checked)) {
         return;
       }
 
@@ -115,7 +115,7 @@ export const TreeModuleState = <T extends Constructor<LitElement>>(superClass: T
         /* @todo store all module state updates in a stack to be consumed by a "slow" tree initialization */
         return;
       }
-      if (identifier && identifier === e.detail.oldState.identifier && this.tree.nodes.find((node: TreeNodeInterface) => node.checked)) {
+      if (identifier && identifier === e.detail.oldState.identifier && this.tree.nodes.find((node) => node.checked)) {
         return;
       }
 
@@ -130,7 +130,7 @@ export const TreeModuleState = <T extends Constructor<LitElement>>(superClass: T
 
       const nodeIdentifier = this.transformModuleStateIdentifierToNodeIdentifier(identifier);
       const node = this.tree.nodes.find((node) => node.identifier === nodeIdentifier);
-      const selectedNode = this.tree.nodes.find((node: TreeNodeInterface) => node.checked);
+      const selectedNode = this.tree.nodes.find((node) => node.checked);
       if (node && node === selectedNode) {
         // node is already selected, only ensure parents are expanded
         await this.tree.expandNodeParents(node);

package/backend/tree/tree.ts

@@ -227,7 +227,7 @@ export class Tree extends LitElement {
       }
 
       if (parentNode !== null) {
-        nodes = nodes.filter((node: TreeNodeInterface) => {
+        nodes = nodes.filter((node) => {
           // Filter (already processed) parentNode from server response
           // (if given. note: filetree does not deliver this, pagetree does)
           return node.identifier !== parentNode.identifier;
@@ -244,7 +244,7 @@ export class Tree extends LitElement {
       }
 
       const all = await Promise.all(
-        nodes.map(async (node: TreeNodeInterface): Promise<TreeNodeInterface[]> => {
+        nodes.map(async (node): Promise<TreeNodeInterface[]> => {
           const parentNodeTreeIdentifier = node.__parents.join('_');
           const parentNode = nodes.find(p => p.__treeIdentifier === parentNodeTreeIdentifier) || null;
           const isVisible = parentNode === null || parentNode.__expanded;
@@ -535,7 +535,7 @@ export class Tree extends LitElement {
       return;
     }
     if (Array.isArray(error)) {
-      error.forEach((message: any) => { Notification.error(
+      error.forEach((message) => { Notification.error(
         message.title,
         message.message
       );});
@@ -549,7 +549,7 @@ export class Tree extends LitElement {
   }
 
   public getSelectedNodes(): TreeNodeInterface[] {
-    return this.nodes.filter((node: TreeNodeInterface) => node.checked);
+    return this.nodes.filter((node) => node.checked);
   }
 
   public getNodeByTreeIdentifier(treeIdentifier: string): TreeNodeInterface|null {
@@ -631,7 +631,7 @@ export class Tree extends LitElement {
 
       // State
       if (this.searchTerm) {
-        node.__expanded = node.loaded && node.hasChildren;
+        node.__expanded = (node.loaded || node.depth === 0) && node.hasChildren;
       } else if (node.hasChildren) {
         node.__expanded = (this.settings.expandUpToLevel !== null)
           ? node.depth < this.settings.expandUpToLevel
@@ -717,7 +717,7 @@ export class Tree extends LitElement {
       node.__hidden !== true &&
       !node.__treeParents.some(parentTreeIdentifier => this.getNodeByTreeIdentifier(parentTreeIdentifier).__expanded === false)
     ));
-    this.displayNodes.forEach((node: TreeNodeInterface, i: number) => {
+    this.displayNodes.forEach((node, i) => {
       node.__x = node.depth * this.indentWidth;
       node.__y = i * this.nodeHeight;
     });
@@ -725,7 +725,7 @@ export class Tree extends LitElement {
     this.lastRenderScrollPosition = this.currentScrollPosition;
     const visibleRows = Math.ceil(this.currentVisibleHeight / this.nodeHeight);
     const position = Math.floor(this.currentScrollPosition / this.nodeHeight);
-    const visibleNodes = this.displayNodes.filter((node: TreeNodeInterface, index: number) => {
+    const visibleNodes = this.displayNodes.filter((node, index) => {
       // first node is fallback target for tabindex, needs to be available every time
       if (this.getFirstNode() === node) {
         return true;
@@ -800,7 +800,7 @@ export class Tree extends LitElement {
   }
 
   protected resetSelectedNodes(): void {
-    this.getSelectedNodes().forEach((node: TreeNodeInterface) => {
+    this.getSelectedNodes().forEach((node) => {
       if (node.checked === true) {
         node.checked = false;
       }
@@ -1671,3 +1671,10 @@ export class Tree extends LitElement {
     }
   }
 }
+
+declare global {
+  interface HTMLElementEventMap {
+    'typo3:tree:node-selected': CustomEvent<{ node: TreeNodeInterface, propagate: boolean }>;
+    'typo3:tree:nodes-prepared': CustomEvent<{ nodes: TreeNodeInterface[] }>;
+  }
+}

package/backend/user-pass-login.ts

@@ -41,8 +41,8 @@ class UserPassLogin {
     // register submit handler
     Login.options.submitHandler = this.resetPassword;
 
-    [usernameField, passwordField].forEach((field: HTMLInputElement) => new RegularEvent('keypress', this.showCapslockWarning).bindTo(field));
-    ['input', 'change'].forEach((eventName: string) => new RegularEvent(eventName, this.showPasswordToggle).bindTo(passwordField));
+    [usernameField, passwordField].forEach((field) => new RegularEvent('keypress', this.showCapslockWarning).bindTo(field));
+    ['input', 'change'].forEach((eventName) => new RegularEvent(eventName, this.showPasswordToggle).bindTo(passwordField));
     new RegularEvent('keydown', this.toggleCopyright).bindTo(copyrightLink);
 
     // if the login screen is shown in the login_frameset window for re-login,

package/backend/utility/collapse-state-persister.ts

@@ -102,7 +102,7 @@ export class CollapseStatePersister {
 
   private recoverStates(): void {
     const collapseStateElements: NodeListOf<HTMLElement>|null = document.querySelectorAll('.collapse[data-persist-collapse-state="true"]');
-    collapseStateElements.forEach((element: HTMLElement) => {
+    collapseStateElements.forEach((element) => {
       const suffix: string = element.dataset.persistCollapseStateSuffix ?? this.localStorageKeyDefaultSuffix;
       const currentStates = this.fromStorage(suffix);
       const id: string = element.id;

package/backend/utility/collapse-state-search.ts

@@ -107,7 +107,7 @@ class CollapseStateSearch {
     numberOfSearchMatchesContainer.innerText = labels.get('collapse_state_search.numberOfSearchMatches', { count: matchingNodes.length });
     numberOfSearchMatchesContainer.classList.remove('hidden');
 
-    matchingNodes.forEach((match: Element|null): void => {
+    matchingNodes.forEach((match): void => {
       if (match === null) {
         return;
       }
@@ -153,28 +153,28 @@ class CollapseStateSearch {
   }
 
   private findNodesByIdentifier(term: string, treeContainer: HTMLElement): Element[] {
-    return Array.from(treeContainer.querySelectorAll('.treelist-label')).filter((el: Element): boolean => {
+    return Array.from(treeContainer.querySelectorAll('.treelist-label')).filter((el): boolean => {
       return el.textContent.toLowerCase().includes(term);
     });
   }
 
   private findNodesByValue(term: string, treeContainer: HTMLElement): Element[] {
-    const matchingValueNodes = Array.from(treeContainer.querySelectorAll('.treelist-value')).filter((el: Element): boolean => {
+    const matchingValueNodes = Array.from(treeContainer.querySelectorAll('.treelist-value')).filter((el): boolean => {
       return el.textContent.toLowerCase().includes(term);
     });
-    return matchingValueNodes.map((node: Element): Element => {
+    return matchingValueNodes.map((node): Element => {
       return node.previousElementSibling;
     });
   }
 
   private findNodesByComment(term: string, treeContainer: HTMLElement): Element[] {
-    return Array.from(treeContainer.querySelectorAll('.treelist-comment')).filter((el: Element): boolean => {
+    return Array.from(treeContainer.querySelectorAll('.treelist-comment')).filter((el): boolean => {
       return el.textContent.toLowerCase().includes(term);
     });
   }
 
   private findNodesByConstantSubstitution(term: string, treeContainer: HTMLElement): Element[] {
-    return Array.from(treeContainer.querySelectorAll('.treelist-constant-substitution')).filter((el: Element): boolean => {
+    return Array.from(treeContainer.querySelectorAll('.treelist-constant-substitution')).filter((el): boolean => {
       return el.textContent.toLowerCase().includes(term);
     });
   }