@lion/ui 0.19.1 → 0.20.0-menu-system.0

package/components/collapsible/types/DisclosureMixinTypes.ts

@@ -0,0 +1,48 @@
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement } from 'lit';
+
+export declare class DisclosureHost {
+  public opened: Boolean;
+
+  protected get _invokerNode(): HTMLElement;
+
+  protected get _contentNode(): HTMLElement;
+
+  public toggle(): void;
+
+  public open(): void;
+
+  public close(): void;
+
+  protected _onOpenedChanged(): Promise<void>;
+
+  protected _onDisclosureShow(): void;
+
+  protected _onDisclosureHide(): void;
+
+  protected _showAnimation(cfg: object): Promise<void>;
+
+  protected _hideAnimation(cfg: object): Promise<void>;
+
+  protected _refreshAnimateCompletePromise(): void;
+
+  protected _setupOpenCloseListeners(): void;
+
+  protected _teardownOpenCloseListeners(): void;
+
+  private __setupAnimation(): void;
+
+  private __teardownAnimation(): void;
+
+  private __handleAnimateComplete(): void;
+}
+
+export declare function DisclosureImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<DisclosureHost> &
+  DisclosureHost &
+  Pick<typeof DisclosureHost, keyof typeof DisclosureHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
+
+export type DisclosureMixin = typeof DisclosureImplementation;

package/components/combobox/test/lion-combobox.test.js

@@ -3227,6 +3227,7 @@ describe('lion-combobox', () => {
         const [el, options] = await fruitFixture({ autocomplete: 'both', matchMode: 'all' });
         await mimicUserTyping(/** @type {LionCombobox} */ (el), 'choke');
         await el.updateComplete;
+        // @ts-ignore - array index access
         const labelledElement = options[0].querySelector('span[aria-label="Artichoke"]');
         expect(labelledElement).to.not.be.null;
         expect(labelledElement.innerText).to.equal('Artichoke');

package/components/form-core/src/form-group/FormGroupMixin.js

@@ -352,11 +352,14 @@ const FormGroupMixinImplementation = superclass =>
       this.formElements._keys().forEach(name => {
         const elem = this.formElements[name];
         if (elem instanceof FormControlsCollection) {
+          // @ts-ignore - dynamic property access
           result[name] = elem.filter(el => _filterFn(el, property)).map(el => el[property]);
         } else if (_filterFn(elem, property)) {
           if (typeof elem._getFromAllFormElements === 'function') {
+            // @ts-ignore - dynamic property access
             result[name] = elem._getFromAllFormElements(property);
           } else {
+            // @ts-ignore - dynamic property access
             result[name] = elem[property];
           }
         }
@@ -386,6 +389,7 @@ const FormGroupMixinImplementation = superclass =>
           if (Array.isArray(this.formElements[name])) {
             this.formElements[name].forEach(
               (/** @type {FormControl} */ el, /** @type {number} */ index) => {
+                // @ts-ignore - dynamic property access
                 el[property] = values[name][index]; // eslint-disable-line no-param-reassign
               },
             );
@@ -393,6 +397,7 @@ const FormGroupMixinImplementation = superclass =>
           if (this.formElements[name]) {
             this.formElements[name][property] = values[name];
           } else {
+            // @ts-ignore - dynamic property access
             this.__pendingValues[property][name] = values[name];
           }
         });
@@ -406,6 +411,7 @@ const FormGroupMixinImplementation = superclass =>
     _anyFormElementHas(property) {
       return Object.keys(this.formElements).some(name => {
         if (Array.isArray(this.formElements[name])) {
+          // @ts-ignore - dynamic property access
           return this.formElements[name].some((/** @type {FormControl} */ el) => !!el[property]);
         }
         return !!this.formElements[name][property];
@@ -436,6 +442,7 @@ const FormGroupMixinImplementation = superclass =>
     _everyFormElementHas(property) {
       return Object.keys(this.formElements).every(name => {
         if (Array.isArray(this.formElements[name])) {
+          // @ts-ignore - dynamic property access
           return this.formElements[name].every((/** @type {FormControl} */ el) => !!el[property]);
         }
         return !!this.formElements[name][property];

package/components/form-core/src/registration/FormRegistrarMixin.js

@@ -162,15 +162,21 @@ const FormRegistrarMixinImplementation = superclass =>
         }
 
         if (name.substr(-2) === '[]') {
+          // @ts-ignore - dynamic named access to form elements
           if (!Array.isArray(this.formElements[name])) {
+            // @ts-ignore
             this.formElements[name] = new FormControlsCollection();
           }
           if (indexToInsertAt > 0) {
+            // @ts-ignore
             this.formElements[name].splice(indexToInsertAt, 0, child);
           } else {
+            // @ts-ignore
             this.formElements[name].push(child);
           }
+          // @ts-ignore
         } else if (!this.formElements[name]) {
+          // @ts-ignore
           this.formElements[name] = child;
         } else {
           console.info('Error Node:', child); // eslint-disable-line no-console
@@ -194,12 +200,17 @@ const FormRegistrarMixinImplementation = superclass =>
       // 2. Handle name based object keys
       if (this._isFormOrFieldset) {
         const { name } = child; // FIXME: <-- ElementWithParentFormGroup should become LionFieldWithParentFormGroup so that "name" exists
+        // @ts-ignore - dynamic named access to form elements
         if (name.substr(-2) === '[]' && this.formElements[name]) {
+          // @ts-ignore
           const idx = this.formElements[name].indexOf(child);
           if (idx > -1) {
+            // @ts-ignore
             this.formElements[name].splice(idx, 1);
           }
+          // @ts-ignore
         } else if (this.formElements[name]) {
+          // @ts-ignore
           delete this.formElements[name];
         }
       }

package/components/form-core/test/FormControlMixin.test.js

@@ -153,6 +153,7 @@ describe('FormControlMixin', () => {
         el.shadowRoot?.querySelector('.form-field__label'),
       );
       Object.entries(expectedValues).forEach(([key, val]) => {
+        // @ts-ignore - dynamic style property access
         expect(labelStyle[key]).to.equal(val);
       });
     });

package/components/form-core/test/validate/Validator.test.js

@@ -191,7 +191,9 @@ describe('Validator', () => {
   it('adds static ["_$isValidator$"] property as a marker to identify the Validator class across different lion versions (as instanceof cannot be used)', async () => {
     const myValidator = new Validator();
 
+    // @ts-ignore - static property access
     expect(myValidator.constructor['_$isValidator$']).to.exist;
+    // @ts-ignore - static property access
     expect(myValidator.constructor['_$isValidator$']).to.be.true;
   });
 

package/components/form-core/test-suites/ValidateMixin.suite.js

@@ -1554,11 +1554,13 @@ export function runValidateMixinSuite(customConfig) {
           // eslint-disable-next-line no-restricted-syntax
           for (const state of ['dirty', 'touched', 'prefilled', 'submitted']) {
             counter += 1;
+            // @ts-ignore - test property access
             el[state] = false;
             // eslint-disable-next-line no-await-in-loop
             await el.updateComplete;
             expect(spy.callCount).to.equal(counter);
             counter += 1;
+            // @ts-ignore - test property access
             el[state] = true;
             // eslint-disable-next-line no-await-in-loop
             await el.updateComplete;

package/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.js

@@ -714,6 +714,7 @@ export function runValidateMixinFeedbackPart() {
             const results = {
               'a-string-instead-of-bool': 'Msg based on enum output',
             };
+            // @ts-ignore - test data structure
             return results[/** @type {string} */ (outcome)];
           }
         }

package/components/input-datepicker/src/localizeNamespaceLoader.js

@@ -6,6 +6,7 @@ async function combineLocalizeImports(importPromises) {
   const combinedResult = localizeObjects[0];
   for (const localizeObject of localizeObjects.slice(1)) {
     Object.entries(localizeObject.default).forEach(([key, val]) => {
+      // @ts-ignore - dynamic property access
       combinedResult.default[key] = val;
     });
   }

package/components/input-datepicker/test/lion-input-datepicker.test.js

@@ -4,12 +4,11 @@ import { IsDateDisabled, MaxDate, MinDate, MinMaxDate } from '@lion/ui/form-core
 import { aTimeout, defineCE, expect, fixture as _fixture, nextFrame } from '@open-wc/testing';
 import { mimicClick } from '@lion/ui/overlays-test-helpers.js';
 import sinon from 'sinon';
-import { sendKeys, setViewport } from '@web/test-runner-commands';
+import { setViewport } from '@web/test-runner-commands';
 import { DatepickerInputObject } from '@lion/ui/input-datepicker-test-helpers.js';
 import { LionInputDatepicker } from '@lion/ui/input-datepicker.js';
 
 import '@lion/ui/define/lion-input-datepicker.js';
-import { runDatepickerSuite } from '../test-suites/LionInputDatepicker.suite.js';
 
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
@@ -480,14 +479,10 @@ describe('<lion-input-datepicker>', () => {
       // Open the calendar
       await elObj.openCalendar();
 
-      const selectedDateEl = calendarEl?.shadowRoot?.querySelector(
-        '.calendar__day-button[selected]',
-      );
-      // @ts-ignore
-      selectedDateEl?.focus();
-
       // Move focus to 18th of December
-      await sendKeys({ press: 'ArrowRight' });
+      calendarEl.shadowRoot
+        ?.querySelector('#js-content-wrapper')
+        ?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
 
       expect(/** @type {Date} */ (calendarEl.focusedDate).getTime()).to.equal(
         new Date('December 18, 2020 03:24:00 GMT+0000').getTime(),
@@ -602,12 +597,11 @@ describe('<lion-input-datepicker>', () => {
         <lion-input-datepicker label="End date" name="endDate"></lion-input-datepicker>
       `);
 
-      // @ts-expect-error
-      const elements = el.parentElement.children;
-      // @ts-expect-error
-      const startLabel = elements.startDate.querySelector('button').ariaLabel;
-      // @ts-expect-error
-      const endLabel = elements.endDate.querySelector('button').ariaLabel;
+      const elements = el.parentElement?.children;
+      // @ts-ignore - accessing by name property
+      const startLabel = elements?.startDate?.querySelector('button')?.ariaLabel;
+      // @ts-ignore - accessing by name property
+      const endLabel = elements?.endDate?.querySelector('button')?.ariaLabel;
 
       expect(startLabel).to.not.equal(endLabel);
     });
@@ -839,8 +833,4 @@ describe('<lion-input-datepicker>', () => {
       ).to.be.true;
     });
   });
-
-  describe('Run suite', () => {
-    runDatepickerSuite();
-  });
 });

package/components/input-email/src/LionInputEmail.js

@@ -10,8 +10,6 @@ import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 export class LionInputEmail extends LocalizeMixin(LionInput) {
   constructor() {
     super();
-    this.autocomplete = 'email';
-
     // local-part@domain where the local part may be up to 64 characters long
     // and the domain may have a maximum of 255 characters.
     // @see https://www.wikiwand.com/en/Email_address

package/components/input-email/test/lion-input-email.test.js

@@ -15,12 +15,6 @@ describe('<lion-input-email>', () => {
     expect(_inputNode.type).to.equal('text');
   });
 
-  it('sets autocomplete to "email"', async () => {
-    const el = await fixture(`<lion-input-email></lion-input-email>`);
-    // @ts-expect-error [allow-protected] inside tests
-    expect(el._inputNode.getAttribute('autocomplete')).to.equal('email');
-  });
-
   it('has validator "IsEmail" applied by default', async () => {
     // More elaborate tests can be found in lion-validate/test/StringValidators.test.js
     const el = await fixture(`<lion-input-email></lion-input-email>`);

package/components/input-file/src/validators.js

@@ -2,14 +2,13 @@ import { Validator } from '@lion/ui/form-core.js';
 import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 
 /**
- * @typedef {import('../../form-core/types/validate/index.js').FeedbackMessageData} FeedbackMessageData
  * @typedef {import('../../form-core/types/validate/validate.js').ValidatorConfig} ValidatorConfig
  * @typedef {import('../../form-core/types/validate/validate.js').ValidatorParam} ValidatorParam
  * @typedef {import('../../form-core/types/validate/validate.js').ValidatorOutcome} ValidatorOutcome
  * @typedef {import('../types/input-file.js').InputFile} InputFile
  */
 
-/* eslint max-classes-per-file: ["error", 3] */
+/* eslint max-classes-per-file: ["error", 2] */
 export class IsAcceptedFile extends Validator {
   static validatorName = 'IsAcceptedFile';
 
@@ -113,32 +112,3 @@ export class DuplicateFileNames extends Validator {
     return localizeManager.msg('lion-input-file:uploadTextDuplicateFileName');
   }
 }
-
-export class MaxFileCount extends Validator {
-  static get validatorName() {
-    return 'MaxFileCount';
-  }
-
-  /**
-   * @param {Partial<FeedbackMessageData>} [data]
-   * @returns {Promise<string|Element>}
-   */
-  static async getMessage(data) {
-    const localizeManager = getLocalizeManager();
-    if (!data?.params || typeof data.params !== 'number' || data.params <= 0) {
-      return 'Invalid MaxFileCount parameter. Please provide a valid number greater than 0.';
-    }
-    return localizeManager.msg('lion-input-file:maxFileCountExceeded', {
-      maxFileCount: data.params,
-    });
-  }
-
-  /**
-   * @param {File[]} value
-   * @param {number} maxFiles
-   * @returns {boolean}
-   */
-  execute(value, maxFiles = this.param || 0) {
-    return maxFiles > 0 && value.length > maxFiles;
-  }
-}

package/components/input-file/test/FileValidators.test.js

@@ -1,5 +1,4 @@
 import { expect } from '@open-wc/testing';
-import { MaxFileCount } from '@lion/ui/input-file.js';
 import { IsAcceptedFile } from '../src/validators.js';
 
 describe('lion-input-file: IsAcceptedFile', () => {
@@ -168,34 +167,4 @@ describe('lion-input-file: IsAcceptedFile', () => {
       expect(returnVal).to.be.true;
     });
   });
-
-  describe('Max File Count', () => {
-    /**
-     *
-     * @param {string} filename
-     * @returns {File}
-     */
-    const newFile = filename => new File([], filename);
-
-    it('Allow up to 2 files', () => {
-      const validator = new MaxFileCount(2);
-      expect(MaxFileCount.validatorName).to.equal('MaxFileCount');
-
-      let isEnabled = validator.execute([newFile('file1.txt'), newFile('file2.txt')]);
-      expect(isEnabled).to.be.false;
-
-      isEnabled = validator.execute([
-        newFile('file1.txt'),
-        newFile('file2.txt'),
-        newFile('file3.txt'),
-      ]);
-      expect(isEnabled).to.be.true;
-    });
-
-    it('Allow any number of files with empty param', () => {
-      const validator = new MaxFileCount();
-      const isEnabled = validator.execute([newFile('file1.txt'), newFile('file2.txt')]);
-      expect(isEnabled).to.be.false;
-    });
-  });
 });

package/components/input-file/translations/bg.js

@@ -17,5 +17,4 @@ export default {
   selectTextDuplicateFileName: 'Файл със същото име на файл вече е налице.',
   selectTextMultipleFile: 'Избор на файлове',
   selectTextSingleFile: 'Избор на файл',
-  maxFileCountExceeded: 'Броят на качените файлове не може да надвишава {maxFileCount}.',
 };

package/components/input-file/translations/cs.js

@@ -18,5 +18,4 @@ export default {
   selectTextDuplicateFileName: 'Soubor se stejným názvem byl již přítomen.',
   selectTextMultipleFile: 'Vybrat soubory',
   selectTextSingleFile: 'Vybrat soubor',
-  maxFileCountExceeded: 'Počet nahraných souborů nesmí překročit {maxFileCount}.',
 };

package/components/input-file/translations/de.js

@@ -17,6 +17,4 @@ export default {
   selectTextDuplicateFileName: 'Eine Datei mit demselben Dateinamen war bereits vorhanden.',
   selectTextMultipleFile: 'Dateien auswählen',
   selectTextSingleFile: 'Datei auswählen',
-  maxFileCountExceeded:
-    'Die Anzahl der hochgeladenen Dateien darf {maxFileCount} nicht überschreiten.',
 };

package/components/input-file/translations/en.js

@@ -16,5 +16,4 @@ export default {
   selectTextDuplicateFileName: 'A file with same filename was already present.',
   selectTextMultipleFile: 'Select files',
   selectTextSingleFile: 'Select file',
-  maxFileCountExceeded: 'The number of uploaded files must not exceed {maxFileCount}.',
 };

package/components/input-file/translations/es.js

@@ -17,5 +17,4 @@ export default {
   selectTextDuplicateFileName: 'Ya había un archivo con el mismo nombre de archivo.',
   selectTextMultipleFile: 'Seleccionar archivos',
   selectTextSingleFile: 'Seleccionar archivo',
-  maxFileCountExceeded: 'El número de archivos cargados no puede superar {maxFileCount}.',
 };

package/components/input-file/translations/fr.js

@@ -18,5 +18,4 @@ export default {
   selectTextDuplicateFileName: 'Un fichier portant le même nom de fichier était déjà présent.',
   selectTextMultipleFile: 'Sélectionnez des fichiers',
   selectTextSingleFile: 'Sélectionnez un fichier',
-  maxFileCountExceeded: 'Le nombre de fichiers téléchargés ne peut pas dépasser {maxFileCount}.',
 };

package/components/input-file/translations/hu.js

@@ -17,5 +17,4 @@ export default {
   selectTextDuplicateFileName: 'Már volt ilyen nevű fájl.',
   selectTextMultipleFile: 'Fájl(ok) kiválasztása',
   selectTextSingleFile: 'Fájl kiválasztása',
-  maxFileCountExceeded: 'A feltöltött fájlok száma nem haladhatja meg a {maxFileCount}-ot.',
 };

package/components/input-file/translations/id.js

@@ -16,5 +16,4 @@ export default {
   selectTextDuplicateFileName: 'File dengan nama file yang sama sudah ada.',
   selectTextMultipleFile: 'Pilih beberapa file',
   selectTextSingleFile: 'Pilih berkas',
-  maxFileCountExceeded: 'Jumlah file yang diunggah tidak boleh melebihi {maxFileCount}.',
 };

package/components/input-file/translations/it.js

@@ -17,5 +17,4 @@ export default {
   selectTextDuplicateFileName: 'Un file con lo stesso nome file era già presente.',
   selectTextMultipleFile: 'Seleziona file',
   selectTextSingleFile: 'Seleziona file',
-  maxFileCountExceeded: 'Il numero di file caricati non può superare {maxFileCount}.',
 };

package/components/input-file/translations/nl.js

@@ -17,5 +17,4 @@ export default {
   selectTextDuplicateFileName: 'Er bestaat al een bestand met dezelfde bestandsnaam.',
   selectTextMultipleFile: 'Selecteer bestanden',
   selectTextSingleFile: 'Selecteer bestand',
-  maxFileCountExceeded: 'Het aantal geüploade bestanden mag niet meer dan {maxFileCount} zijn.',
 };

package/components/input-file/translations/pl.js

@@ -17,5 +17,4 @@ export default {
   selectTextDuplicateFileName: 'Plik o tej samej nazwie już istnieje.',
   selectTextMultipleFile: 'Wybierz pliki',
   selectTextSingleFile: 'Wybierz plik',
-  maxFileCountExceeded: 'Liczba przesłanych plików nie może przekraczać {maxFileCount}.',
 };

package/components/input-file/translations/ro.js

@@ -17,5 +17,4 @@ export default {
   selectTextDuplicateFileName: 'Există deja un fişier cu acelaşi nume de fişier.',
   selectTextMultipleFile: 'Selectare fișiere',
   selectTextSingleFile: 'Selectare fișier',
-  maxFileCountExceeded: 'Numărul de fișiere încărcate nu poate depăși {maxFileCount}.',
 };

package/components/input-file/translations/ru.js

@@ -16,5 +16,4 @@ export default {
   selectTextDuplicateFileName: 'Файл с таким названием уже существует.',
   selectTextMultipleFile: 'Выберите файлы',
   selectTextSingleFile: 'Выберите файл',
-  maxFileCountExceeded: 'Количество загруженных файлов не может превышать {maxFileCount}.',
 };

package/components/input-file/translations/sk.js

@@ -17,5 +17,4 @@ export default {
   selectTextDuplicateFileName: 'Súbor s rovnakým názvom súboru už existoval.',
   selectTextMultipleFile: 'Vybrať súbory',
   selectTextSingleFile: 'Vybrať súbor',
-  maxFileCountExceeded: 'Počet nahratých súborov nesmie prekročiť {maxFileCount}.',
 };

package/components/input-file/translations/uk.js

@@ -17,5 +17,4 @@ export default {
   selectTextDuplicateFileName: 'Файл із такою назвою вже існував.',
   selectTextMultipleFile: 'Виберіть файли',
   selectTextSingleFile: 'Виберіть файл',
-  maxFileCountExceeded: 'Кількість завантажених файлів не може перевищувати {maxFileCount}.',
 };

package/components/input-file/translations/zh.js

@@ -17,5 +17,4 @@ export default {
   selectTextDuplicateFileName: '已存在具有相同文件名的文件。',
   selectTextMultipleFile: '选择多个文件',
   selectTextSingleFile: '选择文件',
-  maxFileCountExceeded: '上传的文件数量不能超过 {maxFileCount} 个。',
 };

package/components/input-tel/src/LionInputTel.js

@@ -137,7 +137,6 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
    */
   constructor() {
     super();
-    this.autocomplete = 'tel';
 
     /**
      * Determines what the formatter output should look like.
@@ -193,6 +192,7 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
    */
   firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
+
     // This will trigger the right keyboard on mobile
     this._inputNode.inputMode = 'tel';
   }

package/components/input-tel/test-suites/LionInputTel.suite.js

@@ -222,13 +222,6 @@ export function runInputTelSuite({ klass = LionInputTel } = {}) {
         expect(el._inputNode.inputMode).to.equal('tel');
       });
 
-      it('sets autocomplete to "tel"', async () => {
-        const el = await fixture(html` <${tag}></${tag}> `);
-        await el.updateComplete;
-        // @ts-expect-error [allow-protected] inside tests
-        expect(el._inputNode.getAttribute('autocomplete')).to.equal('tel');
-      });
-
       it('formats according to locale', async () => {
         const el = await fixture(
           html` <${tag} .modelValue="${'+31612345678'}" .allowedRegions="${['NL']}"></${tag}> `,

package/components/localize/test/date/formatDate.test.js

@@ -210,6 +210,7 @@ describe('formatDate', () => {
           locale,
         };
         const parsedDate = /** @type {Date} */ (parseDate('12.10.2019'));
+        // @ts-ignore - dynamic locale key access
         expect(formatDate(parsedDate, options)).to.equal(LOCALE_FORMATTED_DATE_MAP[locale]);
       });
     });

package/components/menu/CHANGELOG.md

@@ -0,0 +1,37 @@
+Allow advanced preprocessing
+
+- Turn '1' into '01-__-____'
+- Turn ’20’ into ’20-’, -> ’20-4’ into ’20-04’ etc…
+
+See: https://nosir.github.io/cleave.js/(But we should enhance the UX when editing the middle of a date)So:
+
+```js
+/**  * @returns {string | { viewValue:string, caretIndex:number } } */
+preprocessor(viewValue, { previousViewValue = ‘’, currentCaretIndex }) {
+  const diff = viewValue.length - previousViewValue.length;
+  if (diff === -1) && !isNaN(Number(previousViewValue[currentCaretIndex]))) {
+    // don’t respond to delete actions
+    return viewValue;
+  }
+
+  let newValue = '';
+  const strippedVal = viewValue.replace('-', '');
+  let dashesPlaced = 0;
+  let newCaretIndex;
+  for (let i = 0; i < 10; i+= 1) {
+    if (i === 2 || i === 4) {
+      newValue += ‘-’;
+      dashesPlaced += 1;
+      }
+    else if (i < strippedVal.length + dashesPlaced) {
+      newValue += strippedVal[i];
+    } else {
+      newValue += ‘_’;
+      if (newCaretIndex === undefined) {
+        newCaretIndex = i;
+      }
+    }
+  }
+  return { viewValue: newValue, caretIndex: newCaretIndex };
+}
+```