typo3-typescript-sources 14.3.6 → 14.3.7

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

@@ -0,0 +1,215 @@
+/*
+ * 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 SelectBoxFilter from '@typo3/backend/form-engine/element/extra/select-box-filter.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/backend/form-engine/element/extra/select-box-filter', () => {
+  let root: HTMLElement;
+  let filterField: HTMLInputElement | HTMLSelectElement;
+
+  const optionLabels: string[] = ['Crème brûlée', 'Müller', 'Sirup (Vanille)', 'Cremeschnitte', 'Tiramisu'];
+
+  const options = (labels: string[]): string => labels.map((label: string): string => `<option>${label}</option>`).join('');
+
+  const mount = (selectContent: string, filterMarkup: string = '<input type="text" class="t3js-formengine-multiselect-filter-textfield">'): void => {
+    root = document.createElement('div');
+    root.innerHTML = `
+      <div class="form-wizards-wrap">
+        ${filterMarkup}
+        <select multiple>${selectContent}</select>
+      </div>`;
+    document.body.appendChild(root);
+    new SelectBoxFilter(root.querySelector('select[multiple]'));
+  };
+
+  afterEach((): void => {
+    root.remove();
+  });
+
+  const visibleOptions = (): string[] => Array
+    .from(root.querySelectorAll('select[multiple] option'))
+    .filter((option: HTMLOptionElement): boolean => !option.hidden)
+    .map((option: HTMLOptionElement): string => option.textContent);
+
+  const filterBy = (value: string): void => {
+    filterField.value = value;
+    filterField.dispatchEvent(new Event('input', { bubbles: true }));
+  };
+
+  describe('text field', () => {
+    beforeEach((): void => {
+      mount(options(optionLabels));
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-textfield');
+    });
+
+    it('shows all options for an empty filter', (): void => {
+      filterBy('');
+      expect(visibleOptions()).to.eql(optionLabels);
+    });
+
+    it('matches case insensitively', (): void => {
+      filterBy('MÜLLER');
+      expect(visibleOptions()).to.eql(['Müller']);
+    });
+
+    it('matches a plain substring anywhere in the label', (): void => {
+      filterBy('schnitte');
+      expect(visibleOptions()).to.eql(['Cremeschnitte']);
+    });
+
+    it('matches labels with diacritics when typing without them', (): void => {
+      filterBy('creme');
+      expect(visibleOptions()).to.eql(['Crème brûlée', 'Cremeschnitte']);
+    });
+
+    it('matches labels without diacritics when typing with them', (): void => {
+      filterBy('crèm');
+      expect(visibleOptions()).to.eql(['Crème brûlée', 'Cremeschnitte']);
+    });
+
+    it('treats regular expression meta characters as literal text', (): void => {
+      filterBy('(Vanille)');
+      expect(visibleOptions()).to.eql(['Sirup (Vanille)']);
+    });
+
+    it('hides everything when nothing matches', (): void => {
+      filterBy('.*');
+      expect(visibleOptions()).to.eql([]);
+    });
+  });
+
+  describe('Latin letters that do not decompose', () => {
+    const labels: string[] = ['Straße', 'Müller', 'Ærø', 'Łódź'];
+
+    beforeEach((): void => {
+      mount(options(labels));
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-textfield');
+    });
+
+    it('finds the sharp s when it is typed as a double s', (): void => {
+      filterBy('strasse');
+      expect(visibleOptions()).to.eql(['Straße']);
+    });
+
+    it('finds the sharp s when it is typed as written', (): void => {
+      filterBy('straße');
+      expect(visibleOptions()).to.eql(['Straße']);
+    });
+
+    it('finds the slashed o and the ligature typed as ASCII', (): void => {
+      filterBy('aero');
+      expect(visibleOptions()).to.eql(['Ærø']);
+    });
+
+    it('finds the stroked l typed as a plain l', (): void => {
+      filterBy('lodz');
+      expect(visibleOptions()).to.eql(['Łódź']);
+    });
+
+    it('does not resolve an umlaut to its transcription', (): void => {
+      filterBy('mueller');
+      expect(visibleOptions()).to.eql([]);
+    });
+  });
+
+  describe('characters the editor cannot see in the label', () => {
+    const nbsp = 'Cr\u00e8me\u00a0br\u00fbl\u00e9e';
+    const softHyphen = 'Do\u00adnau';
+    const zeroWidth = 'Ti\u200bramisu';
+    const labels: string[] = [nbsp, softHyphen, zeroWidth];
+
+    beforeEach((): void => {
+      mount(options(labels));
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-textfield');
+    });
+
+    it('matches across a no-break space when a plain space is typed', (): void => {
+      filterBy('creme brulee');
+      expect(visibleOptions()).to.eql([nbsp]);
+    });
+
+    it('matches across a soft hyphen', (): void => {
+      filterBy('donau');
+      expect(visibleOptions()).to.eql([softHyphen]);
+    });
+
+    it('matches across a zero width space', (): void => {
+      filterBy('tiramisu');
+      expect(visibleOptions()).to.eql([zeroWidth]);
+    });
+  });
+
+  describe('scripts whose combining marks carry meaning', () => {
+    // Thai vowel signs are nonspacing marks, but they distinguish syllables rather
+    // than accent them. Removing them would fold these three labels into one and
+    // the filter would stop narrowing anything for Thai.
+    const labels: string[] = ['กิน', 'กีฬา', 'กุญแจ'];
+
+    beforeEach((): void => {
+      mount(options(labels));
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-textfield');
+    });
+
+    it('keeps Thai vowel signs, so the filter still narrows', (): void => {
+      filterBy('กิ');
+      expect(visibleOptions()).to.eql(['กิน']);
+    });
+  });
+
+  describe('predefined filter items', () => {
+    beforeEach((): void => {
+      mount(
+        options(optionLabels),
+        `<select class="t3js-formengine-multiselect-filter-dropdown">
+          <option value=""></option>
+          <option value="creme">creme</option>
+        </select>`
+      );
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-dropdown');
+    });
+
+    it('applies a predefined filter value on change', (): void => {
+      filterField.value = 'creme';
+      filterField.dispatchEvent(new Event('change', { bubbles: true }));
+      expect(visibleOptions()).to.eql(['Crème brûlée', 'Cremeschnitte']);
+    });
+  });
+
+  describe('option groups', () => {
+    beforeEach((): void => {
+      mount(`
+        <optgroup label="Desserts">${options(['Crème brûlée', 'Tiramisu'])}</optgroup>
+        <optgroup label="Namen">${options(['Müller'])}</optgroup>`);
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-textfield');
+    });
+
+    const visibleGroups = (): string[] => Array
+      .from(root.querySelectorAll('optgroup'))
+      .filter((group: HTMLOptGroupElement): boolean => !group.hidden)
+      .map((group: HTMLOptGroupElement): string => group.label);
+
+    it('hides a group once all of its options are filtered away', (): void => {
+      filterBy('creme');
+      expect(visibleOptions()).to.eql(['Crème brûlée']);
+      expect(visibleGroups()).to.eql(['Desserts']);
+    });
+
+    it('shows every group again for an empty filter', (): void => {
+      filterBy('creme');
+      filterBy('');
+      expect(visibleGroups()).to.eql(['Desserts', 'Namen']);
+    });
+  });
+});

package/backend/tests/form-engine/element/select-tree-test.ts

@@ -0,0 +1,121 @@
+/*
+ * 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!
+ */
+
+// Imported for its side effect, the module registers the custom element used below
+import '@typo3/backend/form-engine/element/select-tree.js';
+import type { SelectTree } from '@typo3/backend/form-engine/element/select-tree.js';
+import type { TreeNodeInterface } from '@typo3/backend/tree/tree-node.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/backend/form-engine/element/select-tree', () => {
+  let tree: SelectTree;
+
+  const createNode = (identifier: string, name: string, parents: string[]): TreeNodeInterface => {
+    return <TreeNodeInterface><unknown>{
+      identifier,
+      name,
+      parents,
+      depth: parents.length,
+      __parents: parents,
+      __treeIdentifier: identifier,
+      __processed: true,
+      __hidden: false,
+      __expanded: false,
+    };
+  };
+
+  beforeEach((): void => {
+    tree = <SelectTree>document.createElement('typo3-backend-form-selecttree');
+    tree.nodes = [
+      createNode('root', 'Root', []),
+      createNode('vanilla', 'Vanille', ['root']),
+      createNode('syrup', 'Sirup (Vanille)', ['root']),
+      createNode('cocoa', 'Kakao', ['root', 'syrup']),
+    ];
+  });
+
+  const visibleNodes = (): string[] => tree.nodes
+    .filter((node: TreeNodeInterface): boolean => node.identifier !== 'root' && !node.__hidden)
+    .map((node: TreeNodeInterface): string => node.name);
+
+  it('matches case insensitively', (): void => {
+    tree.filter('VANILLE');
+    expect(visibleNodes()).to.eql(['Vanille', 'Sirup (Vanille)', 'Kakao']);
+  });
+
+  it('treats regular expression meta characters as literal text', (): void => {
+    tree.filter('(Vanille)');
+    expect(visibleNodes()).to.eql(['Sirup (Vanille)', 'Kakao']);
+  });
+
+  it('does not throw on an unbalanced meta character', (): void => {
+    expect((): void => tree.filter('(')).to.not.throw();
+    expect(visibleNodes()).to.eql(['Sirup (Vanille)', 'Kakao']);
+  });
+
+  it('shows all nodes for an empty search term', (): void => {
+    tree.filter('');
+    expect(visibleNodes()).to.eql(['Vanille', 'Sirup (Vanille)', 'Kakao']);
+  });
+
+  it('hides everything when nothing matches', (): void => {
+    tree.filter('Erdbeere');
+    expect(visibleNodes()).to.eql([]);
+  });
+
+  describe('folding of the search term and the node names', () => {
+    beforeEach((): void => {
+      tree.nodes = [
+        createNode('root', 'Root', []),
+        createNode('creme', 'Crème brûlée', ['root']),
+        createNode('cremeschnitte', 'Cremeschnitte', ['root']),
+        createNode('strasse', 'Straße', ['root']),
+      ];
+    });
+
+    it('matches a name with diacritics when they are not typed', (): void => {
+      tree.filter('creme');
+      expect(visibleNodes()).to.eql(['Crème brûlée', 'Cremeschnitte']);
+    });
+
+    it('matches a name without diacritics when they are typed', (): void => {
+      tree.filter('crèm');
+      expect(visibleNodes()).to.eql(['Crème brûlée', 'Cremeschnitte']);
+    });
+
+    it('matches a Latin letter that does not decompose by its ASCII spelling', (): void => {
+      tree.filter('strasse');
+      expect(visibleNodes()).to.eql(['Straße']);
+    });
+
+    it('ignores a character the reader cannot see in the name', (): void => {
+      tree.nodes = [
+        createNode('root', 'Root', []),
+        createNode('creme', 'Creme\u00adschnitte', ['root']),
+      ];
+      tree.filter('cremeschnitte');
+      expect(visibleNodes()).to.eql(['Creme\u00adschnitte']);
+    });
+
+    it('shows the parents of a node matched without its diacritics', (): void => {
+      tree.nodes = [
+        createNode('root', 'Root', []),
+        createNode('sweets', 'Süßwaren', ['root']),
+        createNode('creme', 'Crème brûlée', ['root', 'sweets']),
+      ];
+      tree.filter('creme');
+      expect(visibleNodes()).to.eql(['Süßwaren', 'Crème brûlée']);
+    });
+  });
+});

package/backend/wizard/steps/finisher-step.ts

@@ -33,9 +33,9 @@ export class FinisherStep implements WizardStepInterface {
   readonly autoAdvance = false;
 
   public resetButtonTitle: string = null;
+  public hasError = false;
 
   private finisherInstance: FinisherInterface | null = null;
-  private hasError = false;
   private readonly task: Task<[SubmissionServiceInterface], FinisherResult>;
 
   constructor(private readonly wizard: Wizard, private readonly finisher: SubmissionServiceInterface) {
@@ -55,7 +55,7 @@ export class FinisherStep implements WizardStepInterface {
   public isComplete(): boolean {
     // Finisher step is complete when the task has finished (success or error)
     // This allows the user to close the wizard even when there's an error
-    return this.task.status === TaskStatus.COMPLETE;
+    return this.task.status === TaskStatus.COMPLETE || this.task.status === TaskStatus.ERROR;
   }
 
   public async beforeAdvance(): Promise<void> {

package/backend/wizard/wizard.ts

@@ -332,13 +332,20 @@ export class Wizard extends LitElement {
   private renderNextButtons(): TemplateResult {
     const isComplete = this.currentStep?.isComplete();
     let buttonLabel: string;
+    let buttonIcon: string = 'actions-arrow-end-alt';
     let resetButtonHtml: TemplateResult | typeof nothing = nothing;
 
     if (this.currentStep?.key === 'finisher') {
-      buttonLabel = wizardLabels.get('wizard.buttons.finish');
-
       const finisherStep: FinisherStep = this.currentStep as FinisherStep;
-      if (finisherStep?.resetButtonTitle) {
+      if (finisherStep.hasError) {
+        // On failure the primary action only closes the wizard
+        buttonLabel = wizardLabels.get('wizard.buttons.close');
+        buttonIcon = 'actions-close';
+      } else {
+        buttonLabel = wizardLabels.get('wizard.buttons.finish');
+      }
+
+      if (!finisherStep.hasError && finisherStep?.resetButtonTitle) {
         resetButtonHtml = html`
           <button type="button" class="${classMap({ 'btn': true, 'btn-secondary': true })}"
             @click="${this.handleRestart}"
@@ -361,7 +368,7 @@ export class Wizard extends LitElement {
           @click="${this.handleNext}"
         >
           ${buttonLabel}
-          <typo3-backend-icon identifier="actions-arrow-end-alt" bidi size="small"></typo3-backend-icon>
+          <typo3-backend-icon identifier="${buttonIcon}" bidi size="small"></typo3-backend-icon>
         </button>
       </div>
     `;

package/core/ajax/ajax-request.ts

@@ -117,6 +117,24 @@ class AjaxRequest {
     return new AjaxResponse(response);
   }
 
+  /**
+   * Executes a (by default uncached) PATCH request
+   *
+   * @param {string | FormData | GenericKeyValue} data
+   * @param {RequestInit} init
+   * @return {Promise<Response>}
+   */
+  public async patch(data: string | FormData | GenericKeyValue, init: RequestInit = {}): Promise<AjaxResponse> {
+    const localDefaultOptions: RequestInit = {
+      body: typeof data === 'string' || data instanceof FormData ? data : InputTransformer.byHeader(data, init?.headers),
+      cache: 'no-cache',
+      method: 'PATCH',
+    };
+
+    const response = await this.send({ ...localDefaultOptions, ...init });
+    return new AjaxResponse(response);
+  }
+
   /**
    * Executes a regular DELETE request
    *

package/core/tests/ajax/ajax-request-test.ts

@@ -50,7 +50,7 @@ describe('@typo3/core/ajax/ajax-request', (): void => {
     expect(fetchStub).calledWithMatch(new Request('https://example.com/', { method: 'POST', body: '' }));
   });
 
-  for (const requestMethod of ['POST', 'PUT', 'DELETE']) {
+  for (const requestMethod of ['POST', 'PUT', 'PATCH', 'DELETE']) {
     describe(`send a ${requestMethod} request`, (): void => {
       function* requestDataProvider(): any {
         yield [

package/core/tests/utility/text-normalizer-test.ts

@@ -0,0 +1,138 @@
+/*
+ * 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 TextNormalizer from '@typo3/core/utility/text-normalizer.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/core/utility/text-normalizer', () => {
+  describe('foldCaseAndDiacritics', () => {
+    it('returns an empty string unchanged', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('')).to.equal('');
+    });
+
+    it('lowercases the value', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('Cremeschnitte')).to.equal('cremeschnitte');
+    });
+
+    it('removes Latin diacritics', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('Crème brûlée')).to.equal('creme brulee');
+      expect(TextNormalizer.foldCaseAndDiacritics('Müller')).to.equal('muller');
+    });
+
+    it('removes Greek and Cyrillic diacritics', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('ΆΘΗΝΑ')).to.equal('αθηνα');
+      expect(TextNormalizer.foldCaseAndDiacritics('Ёлка')).to.equal('елка');
+    });
+
+    it('removes every Vietnamese tone mark', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('Tiếng Việt')).to.equal('tieng viet');
+    });
+
+    it('folds a value that is already decomposed to the same result', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('Crème'.normalize('NFD'))).to.equal(TextNormalizer.foldCaseAndDiacritics('Crème'.normalize('NFC')));
+    });
+
+    // A locale aware mapping folds this to a dotless "ı" on a Turkish browser.
+    it('folds the capital i to a plain lowercase i', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('Import')).to.equal('import');
+      expect(TextNormalizer.foldCaseAndDiacritics('İstanbul')).to.equal('istanbul');
+    });
+
+    it('spells out the Latin letters that do not decompose', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('Straße')).to.equal('strasse');
+      expect(TextNormalizer.foldCaseAndDiacritics('Ærø')).to.equal('aero');
+      expect(TextNormalizer.foldCaseAndDiacritics('Łódź')).to.equal('lodz');
+      expect(TextNormalizer.foldCaseAndDiacritics('Þórður')).to.equal('thordur');
+      expect(TextNormalizer.foldCaseAndDiacritics('Đà Nẵng')).to.equal('da nang');
+      expect(TextNormalizer.foldCaseAndDiacritics('Ħamrun')).to.equal('hamrun');
+      expect(TextNormalizer.foldCaseAndDiacritics('Cœur')).to.equal('coeur');
+      expect(TextNormalizer.foldCaseAndDiacritics('Kız')).to.equal('kiz');
+    });
+
+    it('folds an alphabet consistently rather than half of it', (): void => {
+      // Danish: "å" decomposes and "æ"/"ø" do not, so without the expansions one
+      // half of the alphabet would fold and the other half would not.
+      expect(TextNormalizer.foldCaseAndDiacritics('Åse')).to.equal('ase');
+      expect(TextNormalizer.foldCaseAndDiacritics('Æble')).to.equal('aeble');
+      expect(TextNormalizer.foldCaseAndDiacritics('Øst')).to.equal('ost');
+    });
+
+    it('leaves the language dependent transcriptions alone', (): void => {
+      // "ü" decomposes to "u", so the German transcription to "ue" is not applied
+      // on top of it -- a value cannot fold to both.
+      expect(TextNormalizer.foldCaseAndDiacritics('Müller')).to.equal('muller');
+      expect(TextNormalizer.foldCaseAndDiacritics('Müller')).to.not.equal('mueller');
+    });
+
+    it('removes the Hebrew points', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('\u05e9\u05c1\u05b8\u05dc\u05d5\u05b9\u05dd'))
+        .to.equal(TextNormalizer.foldCaseAndDiacritics('\u05e9\u05dc\u05d5\u05dd'));
+    });
+
+    it('removes the Arabic harakat', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('\u0645\u064e\u062f\u0652\u0631\u064e\u0633\u064e\u0629'))
+        .to.equal(TextNormalizer.foldCaseAndDiacritics('\u0645\u062f\u0631\u0633\u0629'));
+    });
+
+    it('folds the Arabic alef variants onto the plain alef', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('\u0623\u062d\u0645\u062f'))
+        .to.equal(TextNormalizer.foldCaseAndDiacritics('\u0627\u062d\u0645\u062f'));
+    });
+
+    it('keeps the marks a script writes obligatorily', (): void => {
+      // Thai vowel signs, Devanagari matras and the Japanese dakuten separate
+      // words rather than accent them, so folding must leave them alone.
+      const distinct = (values: string[]): number =>
+        new Set(values.map((value: string): string => TextNormalizer.foldCaseAndDiacritics(value))).size;
+      expect(distinct(['\u0e01\u0e34', '\u0e01\u0e35', '\u0e01\u0e38'])).to.equal(3);
+      expect(distinct(['\u0915\u093f', '\u0915\u0941', '\u0915\u0947'])).to.equal(3);
+      expect(distinct(['\u304b', '\u304c', '\u3071', '\u3070'])).to.equal(4);
+    });
+
+    it('leaves Chinese untouched and unifies the compatibility ideographs', (): void => {
+      expect(TextNormalizer.foldCaseAndDiacritics('\u4e2d\u6587')).to.equal('\u4e2d\u6587');
+      expect(TextNormalizer.foldCaseAndDiacritics('\uf900')).to.equal('\u8c48');
+    });
+  });
+
+  describe('normalizeInvisibleCharacters', () => {
+    it('returns an empty string unchanged', (): void => {
+      expect(TextNormalizer.normalizeInvisibleCharacters('')).to.equal('');
+    });
+
+    it('drops a soft hyphen', (): void => {
+      expect(TextNormalizer.normalizeInvisibleCharacters('Do\u00adnau')).to.equal('Donau');
+    });
+
+    it('drops the zero width characters', (): void => {
+      expect(TextNormalizer.normalizeInvisibleCharacters('a\u200bb\u200cc\u200dd\u2060e\ufeff')).to.equal('abcde');
+    });
+
+    it('turns a no-break space into a plain space', (): void => {
+      expect(TextNormalizer.normalizeInvisibleCharacters('Cr\u00e8me\u00a0br\u00fbl\u00e9e')).to.equal('Cr\u00e8me br\u00fbl\u00e9e');
+    });
+
+    it('turns the other space variants into a plain space', (): void => {
+      expect(TextNormalizer.normalizeInvisibleCharacters('a\u2009b\u202fc\u3000d')).to.equal('a b c d');
+    });
+
+    it('leaves an ordinary label untouched', (): void => {
+      expect(TextNormalizer.normalizeInvisibleCharacters('Cremeschnitte')).to.equal('Cremeschnitte');
+    });
+
+    it('leaves casing and diacritics to the other function', (): void => {
+      expect(TextNormalizer.normalizeInvisibleCharacters('Cr\u00e8me Br\u00fbl\u00e9e')).to.equal('Cr\u00e8me Br\u00fbl\u00e9e');
+    });
+  });
+});

package/core/utility/text-normalizer.ts

@@ -0,0 +1,98 @@
+/*
+ * 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/core/utility/text-normalizer
+ *
+ * Intl.Collator is deliberately not used: it compares whole strings rather than
+ * searching inside one, its result depends on the locale it is given, and at
+ * sensitivity "base" it merges the Japanese for "school" and for "cuckoo".
+ *
+ * @internal
+ */
+class TextNormalizer {
+  // The marks a script writes optionally, one constant per script so that each
+  // range can be read and checked against Unicode on its own. The marks Thai,
+  // Devanagari, Khmer, Lao and Japanese write obligatorily are deliberately
+  // absent: there a mark separates one word from another rather than accenting
+  // it, so removing it would fold the Japanese for "school" and for "cuckoo"
+  // into one value and leave a Thai filter narrowing nothing.
+
+  /** Combining diacritical marks, written by Latin, Greek and Cyrillic. */
+  private static readonly latinGreekCyrillicMarks = /[\u0300-\u036f]/g;
+
+  /** Hebrew points and cantillation. The gaps are punctuation, not marks. */
+  private static readonly hebrewPoints = /[\u0591-\u05bd\u05bf\u05c1\u05c2\u05c4\u05c5\u05c7]/g;
+
+  /** Arabic harakat, hamza and madda, plus the superscript alef. */
+  private static readonly arabicHarakat = /[\u064b-\u065f\u0670]/g;
+
+  // Latin letters Unicode does not decompose, so stripping marks never reaches
+  // them. Without these an alphabet folds inconsistently: Danish "å" becomes "a"
+  // because it decomposes, while "æ" and "ø" would stay as they are.
+  //
+  // Only letters whose ASCII spelling is conventional rather than a matter of
+  // language are in here. The transcriptions that are a matter of language --
+  // German "ü" to "ue" rather than to "u" -- are not, because the decomposition
+  // already settles those.
+
+  /** Their conventional ASCII spelling, applied after the marks are stripped. */
+  private static readonly latinExpansions = new Map([
+    ['ß', 'ss'], ['æ', 'ae'], ['œ', 'oe'], ['þ', 'th'],
+    ['ø', 'o'], ['đ', 'd'], ['ð', 'd'], ['ł', 'l'],
+    ['ħ', 'h'], ['ı', 'i'], ['ĸ', 'k'], ['ŋ', 'n'],
+    ['ŧ', 't'],
+  ]);
+
+  /** Built from the map above so the letters are listed in one place only. */
+  private static readonly latinExpansionPattern =
+    new RegExp('[' + [...TextNormalizer.latinExpansions.keys()].join('') + ']', 'g');
+
+  /** Characters that take no width, so a reader cannot tell they are there. */
+  private static readonly zeroWidthCharacters = /[\u00ad\u200b-\u200d\u2060\ufeff]/g;
+
+  /** The space separators, all compared as a plain U+0020. */
+  private static readonly spaceVariants = /[\u00a0\u1680\u2000-\u200a\u202f\u205f\u3000]/g;
+
+  /**
+   * Lowercase, strip the optional marks and spell out the Latin letters that do
+   * not decompose, so that a filter matches "Crème" when "creme" is typed,
+   * "Straße" when "strasse" is typed, and an Arabic label carrying its harakat
+   * when it is typed without them.
+   *
+   * toLocaleLowerCase() is avoided: it follows the browser UI locale, where "I"
+   * folds to a dotless "ı".
+   */
+  public static foldCaseAndDiacritics(value: string): string {
+    return value
+      .toLowerCase()
+      .normalize('NFD')
+      .replace(TextNormalizer.latinGreekCyrillicMarks, '')
+      .replace(TextNormalizer.hebrewPoints, '')
+      .replace(TextNormalizer.arabicHarakat, '')
+      .replace(TextNormalizer.latinExpansionPattern, (letter: string): string => TextNormalizer.latinExpansions.get(letter));
+  }
+
+  /**
+   * Drop the characters a reader cannot see and unify the space variants, so
+   * that a label carrying a soft hyphen or a no-break space still matches what
+   * is typed. Both arrive in labels by pasting.
+   */
+  public static normalizeInvisibleCharacters(value: string): string {
+    return value
+      .replace(TextNormalizer.zeroWidthCharacters, '')
+      .replace(TextNormalizer.spaceVariants, ' ');
+  }
+}
+
+export default TextNormalizer;

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

@@ -802,7 +802,7 @@ export function addAbstractViewValidationResults(): void {
         const validationElement = getStage().getAbstractViewFormElementDomElement(validationResults[i].formElementIdentifierPath);
 
         // Set invalid property on Lit web component (FormElementStageItem)
-        const stageItem = validationElement.querySelector('typo3-form-form-element-stage-item') as HTMLElement | null;
+        const stageItem = validationElement?.querySelector('typo3-form-form-element-stage-item') as HTMLElement | null;
         if (stageItem && 'invalid' in stageItem) {
           (stageItem as any).invalid = true;
         }