@lion/ui 0.4.2 → 0.5.1

package/components/form-core/test-suites/choice-group/CustomChoiceGroupMixin.suite.js

@@ -0,0 +1,265 @@
+import '@lion/ui/define/lion-fieldset.js';
+import '@lion/ui/define/lion-checkbox-group.js';
+import '@lion/ui/define/lion-checkbox.js';
+import { expect, fixture, fixtureSync, html, unsafeStatic } from '@open-wc/testing';
+
+/**
+ *
+ * @typedef {import('../../test/choice-group/CustomChoiceGroupMixin.test.js').CustomChoiceGroup} CustomChoiceGroup
+ */
+
+/**
+ * @param {{ parentTagString?:string, childTagString?: string, choiceType?: string}} config
+ */
+export function runCustomChoiceGroupMixinSuite({
+  parentTagString,
+  childTagString,
+  choiceType,
+} = {}) {
+  const cfg = {
+    parentTagString: parentTagString || 'custom-choice-input-group',
+    childTagString: childTagString || 'custom-choice-input',
+    choiceType: choiceType || 'single',
+  };
+
+  const parentTag = unsafeStatic(cfg.parentTagString);
+  const childTag = unsafeStatic(cfg.childTagString);
+
+  describe(`CustomChoiceGroupMixin: ${cfg.parentTagString}`, () => {
+    if (cfg.choiceType === 'single') {
+      it('has a single modelValue representing a custom value', async () => {
+        const el = /** @type {CustomChoiceGroup} */ (
+          await fixture(html`
+          <${parentTag} allow-custom-choice name="gender[]">
+            <${childTag} .choiceValue=${'male'}></${childTag}>
+            <${childTag} checked .choiceValue=${'female'}></${childTag}>
+          </${parentTag}>
+        `)
+        );
+
+        await el.registrationComplete;
+
+        expect(el.modelValue).to.equal('female');
+        el.modelValue = 'male';
+        expect(el.modelValue).to.equal('male');
+
+        el.modelValue = 'other';
+        expect(el.modelValue).to.equal('other');
+
+        expect(el.formElements[0].checked).to.be.false;
+        expect(el.formElements[1].checked).to.be.false;
+      });
+
+      it('has a single formattedValue representing a custom value', async () => {
+        const el = /** @type {CustomChoiceGroup} */ (
+          await fixture(html`
+          <${parentTag} allow-custom-choice name="gender">
+            <${childTag} .choiceValue=${'male'}></${childTag}>
+            <${childTag} .choiceValue=${'female'} checked></${childTag}>
+          </${parentTag}>
+        `)
+        );
+
+        el.modelValue = 'other';
+        expect(el.formattedValue).to.equal('other');
+      });
+    }
+
+    it('can set initial custom modelValue on creation', async () => {
+      const el = /** @type {CustomChoiceGroup} */ (
+        await fixture(html`
+        <${parentTag} allow-custom-choice name="gender[]" .modelValue=${'other'}>
+          <${childTag} .choiceValue=${'male'}></${childTag}>
+          <${childTag} .choiceValue=${'female'}></${childTag}>
+        </${parentTag}>
+      `)
+      );
+
+      if (cfg.choiceType === 'single') {
+        expect(el.modelValue).to.equal('other');
+      } else {
+        expect(el.modelValue).to.deep.equal(['other']);
+      }
+      expect(el.formElements[0].checked).to.be.false;
+      expect(el.formElements[1].checked).to.be.false;
+    });
+
+    it('can set initial custom serializedValue on creation', async () => {
+      const el = /** @type {CustomChoiceGroup} */ (
+        await fixture(html`
+        <${parentTag} allow-custom-choice name="gender[]" .serializedValue=${'other'}>
+          <${childTag} .choiceValue=${'male'}></${childTag}>
+          <${childTag} .choiceValue=${'female'}></${childTag}>
+        </${parentTag}>
+      `)
+      );
+
+      if (cfg.choiceType === 'single') {
+        expect(el.serializedValue).to.equal('other');
+      } else {
+        expect(el.serializedValue).to.deep.equal(['other']);
+      }
+      expect(el.formElements[0].checked).to.be.false;
+      expect(el.formElements[1].checked).to.be.false;
+    });
+
+    it('can set initial custom formattedValue on creation', async () => {
+      const el = /** @type {CustomChoiceGroup} */ (
+        await fixture(html`
+        <${parentTag} allow-custom-choice name="gender[]" .formattedValue=${'other'}>
+          <${childTag} .choiceValue=${'male'}></${childTag}>
+          <${childTag} .choiceValue=${'female'}></${childTag}>
+        </${parentTag}>
+      `)
+      );
+
+      if (cfg.choiceType === 'single') {
+        expect(el.formattedValue).to.equal('other');
+      } else {
+        expect(el.formattedValue).to.deep.equal(['other']);
+      }
+      expect(el.formElements[0].checked).to.be.false;
+      expect(el.formElements[1].checked).to.be.false;
+    });
+
+    it('correctly handles custom modelValue being set before registrationComplete', async () => {
+      const el = /** @type {CustomChoiceGroup} */ (
+        fixtureSync(html`
+        <${parentTag} allow-custom-choice name="gender[]" .modelValue=${null}>
+          <${childTag} .choiceValue=${'male'}></${childTag}>
+          <${childTag} .choiceValue=${'female'}></${childTag}>
+        </${parentTag}>
+      `)
+      );
+
+      if (cfg.choiceType === 'single') {
+        el.modelValue = 'other';
+        await el.registrationComplete;
+        expect(el.modelValue).to.equal('other');
+      } else {
+        el.modelValue = ['other'];
+        await el.registrationComplete;
+        expect(el.modelValue).to.deep.equal(['other']);
+      }
+    });
+
+    it('correctly handles custom serializedValue being set before registrationComplete', async () => {
+      const el = /** @type {CustomChoiceGroup} */ (
+        fixtureSync(html`
+        <${parentTag} allow-custom-choice name="gender[]" .serializedValue=${null}>
+          <${childTag} .choiceValue=${'male'}></${childTag}>
+          <${childTag} .choiceValue=${'female'}></${childTag}>
+        </${parentTag}>
+      `)
+      );
+
+      if (cfg.choiceType === 'single') {
+        // @ts-expect-error
+        el.serializedValue = 'other';
+        await el.registrationComplete;
+        expect(el.serializedValue).to.equal('other');
+      } else {
+        // @ts-expect-error
+        el.serializedValue = ['other'];
+        await el.registrationComplete;
+        expect(el.serializedValue).to.deep.equal(['other']);
+      }
+    });
+
+    it('can be cleared, even when a custom value is selected', async () => {
+      const el = /** @type {CustomChoiceGroup} */ (
+        await fixture(html`
+        <${parentTag} allow-custom-choice name="gender[]">
+          <${childTag} .choiceValue=${'male'}></${childTag}>
+          <${childTag} .choiceValue=${'female'}></${childTag}>
+        </${parentTag}>
+      `)
+      );
+      if (cfg.choiceType === 'single') {
+        el.modelValue = 'other';
+      } else {
+        el.modelValue = ['other'];
+      }
+
+      el.clear();
+
+      if (cfg.choiceType === 'single') {
+        expect(el.serializedValue).to.deep.equal('');
+      } else {
+        expect(el.serializedValue).to.deep.equal([]);
+      }
+    });
+
+    describe('multipleChoice', () => {
+      it('has a single modelValue representing all currently checked values, including custom values', async () => {
+        const el = /** @type {CustomChoiceGroup} */ (
+          await fixture(html`
+          <${parentTag} allow-custom-choice multiple-choice name="gender[]">
+            <${childTag} .choiceValue=${'male'}></${childTag}>
+            <${childTag} .choiceValue=${'female'} checked></${childTag}>
+          </${parentTag}>
+        `)
+        );
+
+        expect(el.modelValue).to.eql(['female']);
+
+        el.modelValue = ['female', 'male'];
+        expect(el.modelValue).to.eql(['male', 'female']);
+
+        el.modelValue = ['female', 'male', 'other'];
+        expect(el.modelValue).to.eql(['male', 'female', 'other']);
+      });
+
+      it('has a single serializedValue representing all currently checked values, including custom values', async () => {
+        const el = /** @type {CustomChoiceGroup} */ (
+          await fixture(html`
+          <${parentTag} allow-custom-choice multiple-choice name="gender[]">
+            <${childTag} .choiceValue=${'male'}></${childTag}>
+            <${childTag} .choiceValue=${'female'} checked></${childTag}>
+          </${parentTag}>
+        `)
+        );
+
+        expect(el.serializedValue).to.eql(['female']);
+
+        el.modelValue = ['female', 'male', 'other'];
+        expect(el.serializedValue).to.eql(['male', 'female', 'other']);
+      });
+
+      it('has a single formattedValue representing all currently checked values', async () => {
+        const el = /** @type {CustomChoiceGroup} */ (
+          await fixture(html`
+          <${parentTag} allow-custom-choice multiple-choice name="gender[]">
+            <${childTag} .choiceValue=${'male'}></${childTag}>
+            <${childTag} .choiceValue=${'female'} checked></${childTag}>
+          </${parentTag}>
+        `)
+        );
+
+        expect(el.formattedValue).to.eql(['female']);
+
+        el.modelValue = ['female', 'male', 'other'];
+        expect(el.formattedValue).to.eql(['male', 'female', 'other']);
+      });
+
+      it('unchecks non-matching checkboxes when setting the modelValue', async () => {
+        const el = /** @type {CustomChoiceGroup} */ (
+          await fixture(html`
+          <${parentTag} allow-custom-choice multiple-choice name="gender[]">
+            <${childTag} .choiceValue=${'male'} checked></${childTag}>
+            <${childTag} .choiceValue=${'female'} checked></${childTag}>
+          </${parentTag}>
+        `)
+        );
+
+        expect(el.modelValue).to.eql(['male', 'female']);
+        expect(el.formElements[0].checked).to.be.true;
+        expect(el.formElements[1].checked).to.be.true;
+
+        el.modelValue = ['other'];
+        expect(el.formElements[0].checked).to.be.false;
+        expect(el.formElements[1].checked).to.be.false;
+      });
+    });
+  });
+}

package/components/form-core/types/choice-group/ChoiceGroupMixinTypes.ts

@@ -25,7 +25,7 @@ export declare class ChoiceGroupHost {
     filterFn?: (el: FormControl, property?: string) => boolean,
   ): void;
   protected _throwWhenInvalidChildModelValue(child: FormControlHost): void;
-  protected _isEmpty(): void;
+  protected _isEmpty(): boolean;
   protected _checkSingleChoiceElements(ev: Event): void;
   protected _getCheckedElements(): ChoiceInputHost[];
   protected _setCheckedElements(value: any, check: boolean): void;

package/components/form-core/types/choice-group/CustomChoiceGroupMixinTypes.ts

@@ -0,0 +1,30 @@
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement } from 'lit';
+
+import { ChoiceGroupHost } from './ChoiceGroupMixinTypes.js';
+
+export declare class CustomChoiceGroupHost {
+  allowCustomChoice: boolean;
+  get modelValue(): any;
+  set modelValue(value: any);
+  get serializedValue(): string;
+  set serializedValue(value: string);
+  get formattedValue(): string;
+  set formattedValue(value: string);
+
+  clear(): void;
+  parser(value: string | string[]): string | string[];
+
+  protected _isEmpty(): boolean;
+}
+
+export declare function CustomChoiceGroupImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<CustomChoiceGroupHost> &
+  Pick<typeof CustomChoiceGroupHost, keyof typeof CustomChoiceGroupHost> &
+  Constructor<ChoiceGroupHost> &
+  Pick<typeof ChoiceGroupHost, keyof typeof ChoiceGroupHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
+
+export type CustomChoiceGroupMixin = typeof CustomChoiceGroupImplementation;

package/components/form-core/types/choice-group/index.ts

@@ -1,2 +1,3 @@
 export * from './ChoiceInputMixinTypes.js';
 export * from './ChoiceGroupMixinTypes.js';
+export * from './CustomChoiceGroupMixinTypes.js';

package/components/helpers/src/SbActionLogger.js

@@ -5,6 +5,7 @@ import { css, html, LitElement, render } from 'lit';
 export class SbActionLogger extends LitElement {
   static get properties() {
     return {
+      // eslint-disable-next-line lit/no-native-attributes
       title: { type: String, reflect: true },
       simple: { type: Boolean, reflect: true },
       __logCounter: { type: Number },

package/components/icon/src/LionIcon.js

@@ -57,14 +57,6 @@ export class LionIcon extends LitElement {
         type: String,
         attribute: 'icon-id',
       },
-      /**
-       * @private
-       */
-      role: {
-        type: String,
-        attribute: 'role',
-        reflect: true,
-      },
     };
   }
 
@@ -101,7 +93,6 @@ export class LionIcon extends LitElement {
 
   constructor() {
     super();
-    this.role = 'img';
     this.ariaLabel = '';
     this.iconId = '';
     /**
@@ -131,6 +122,7 @@ export class LionIcon extends LitElement {
     // ensures that aria-hidden is set if there is no aria-label attribute
     this._onLabelChanged();
     super.connectedCallback();
+    this.setAttribute('role', 'img');
   }
 
   /**

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

@@ -185,10 +185,12 @@ describe('lion-icon', () => {
     try {
       icons.addIconResolver(
         'foo',
+        // eslint-disable-next-line no-promise-executor-return
         () => new Promise(resolve => setTimeout(() => resolve(heartSvg), 10)),
       );
       icons.addIconResolver(
         'bar',
+        // eslint-disable-next-line no-promise-executor-return
         () => new Promise(resolve => setTimeout(() => resolve(hammerSvg), 4)),
       );
       const el = await fixture(html`<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>`);

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

@@ -1,5 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { LionCalendar } from '@lion/ui/calendar.js';
+import { uuid } from '@lion/ui/core.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { html, css } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -149,7 +150,7 @@ export class LionInputDatepicker extends ScopedElementsMixin(
   constructor() {
     super();
     /** @private */
-    this.__invokerId = this.__createUniqueIdForA11y();
+    this.__invokerId = uuid(this.localName);
     /** @protected */
     this._calendarInvokerSlot = 'suffix';
 
@@ -169,11 +170,6 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     this._onCalendarUserSelectedChanged = this._onCalendarUserSelectedChanged.bind(this);
   }
 
-  /** @private */
-  __createUniqueIdForA11y() {
-    return `${this.localName}-${Math.random().toString(36).substr(2, 10)}`;
-  }
-
   /**
    * @param {string} [name]
    * @param {unknown} [oldValue]

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

@@ -19,10 +19,14 @@ describe('<lion-input-range>', () => {
       <lion-input-range .modelValue=${75} unit="${`%`}"></lion-input-range>
     `);
     expect(
-      /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.input-range__value')).innerText,
+      /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.input-range__value')
+      ).innerText,
     ).to.equal('75');
     expect(
-      /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.input-range__unit')).innerText,
+      /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.input-range__unit')
+      ).innerText,
     ).to.equal('%');
   });
 
@@ -30,12 +34,14 @@ describe('<lion-input-range>', () => {
     const el = await fixture(`<lion-input-range min="100" max="200"></lion-input-range>`);
     expect(el.shadowRoot?.querySelectorAll('.input-range__limits span').length).to.equal(2);
     expect(
-      /** @type {HTMLElement} */ (el.shadowRoot?.querySelectorAll('.input-range__limits span')[0])
-        .innerText,
+      /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits span')[0]
+      ).innerText,
     ).to.equal(el.min.toString());
     expect(
-      /** @type {HTMLElement} */ (el.shadowRoot?.querySelectorAll('.input-range__limits span')[1])
-        .innerText,
+      /** @type {HTMLElement} */ (
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('.input-range__limits span')[1]
+      ).innerText,
     ).to.equal(el.max.toString());
   });
 

package/components/listbox/src/LionOptions.js

@@ -7,10 +7,6 @@ import { FormRegistrarPortalMixin } from '@lion/ui/form-core.js';
 export class LionOptions extends FormRegistrarPortalMixin(LitElement) {
   static get properties() {
     return {
-      role: {
-        type: String,
-        reflect: true,
-      },
       tabIndex: {
         type: Number,
         reflect: true,
@@ -21,10 +17,14 @@ export class LionOptions extends FormRegistrarPortalMixin(LitElement) {
 
   constructor() {
     super();
-    this.role = 'listbox';
     this.tabIndex = 0;
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'listbox');
+  }
+
   createRenderRoot() {
     return this;
   }

package/components/listbox/src/ListboxMixin.js

@@ -196,22 +196,6 @@ const ListboxMixinImplementation = superclass =>
       return this._listboxNode;
     }
 
-    /**
-     * @override ChoiceGroupMixin
-     */
-    get serializedValue() {
-      return this.modelValue;
-    }
-
-    // Duplicating from FormGroupMixin, because you cannot independently inherit/override getter + setter.
-    // If you override one, gotta override the other, they go in pairs.
-    /**
-     * @override ChoiceGroupMixin
-     */
-    set serializedValue(value) {
-      super.serializedValue = value;
-    }
-
     get activeIndex() {
       return this.formElements.findIndex(el => el.active === true);
     }
@@ -473,6 +457,7 @@ const ListboxMixinImplementation = superclass =>
     }
 
     clear() {
+      super.clear();
       this.setCheckedIndex(-1);
       this.resetInteractionState();
     }

package/components/listbox/test/lion-options.test.js

@@ -12,6 +12,6 @@ describe('lion-options', () => {
         <lion-options .registrationTarget=${registrationTargetEl}></lion-options>
       `)
     );
-    expect(el.role).to.equal('listbox');
+    expect(el.getAttribute('role')).to.equal('listbox');
   });
 });

package/components/listbox/test-suites/ListboxMixin.suite.js

@@ -163,7 +163,7 @@ export function runListboxMixinSuite(customConfig = {}) {
       });
 
       it('requests update for modelValue when checkedIndex changes', async () => {
-        const el = await fixture(html`
+        const el = /** @type {LionListbox} */ await fixture(html`
           <${tag} name="gender" .modelValue=${'other'}>
             <${optionTag} .choiceValue=${'male'}></${optionTag}>
             <${optionTag} .choiceValue=${'female'}></${optionTag}>

package/components/localize/src/date/getMonthNames.js

@@ -1,5 +1,6 @@
 import { normalizeIntlDate } from './utils/normalizeIntlDate.js';
 import { forceShortMonthNamesForEnGb } from './utils/forceShortMonthNamesForEnGb.js';
+import { forceDotsForNlnl } from './utils/forceDotsForNlnl.js';
 
 /** @type {Object.<string, Object.<string,string[]>>} */
 const monthsLocaleCache = {};
@@ -29,6 +30,8 @@ export function getMonthNames({ locale = 'en-GB', style = 'long' } = {}) {
   }
   if (locale === 'en-GB' && style === 'short') {
     months = forceShortMonthNamesForEnGb(months);
+  } else if (locale === 'nl-NL' && style === 'short') {
+    months = forceDotsForNlnl(months);
   }
   monthsLocaleCache[locale] = monthsLocaleCache[locale] || {};
   monthsLocaleCache[locale][style] = months;

package/components/localize/src/date/parseDate.js

@@ -58,8 +58,12 @@ export function parseDate(dateString) {
   }
 
   const [year, month, day] = parsedString.split('/').map(Number);
-  const parsedDate = new Date(new Date(year, month - 1, day));
+  let correctedYear = year;
+  if (year < 50) {
+    correctedYear = 2000 + year;
+  }
 
+  const parsedDate = new Date(new Date(correctedYear, month - 1, day));
   // Check if parsedDate is not `Invalid Date` or that the date has changed (e.g. the not existing 31.02.2020)
   if (
     year > 0 &&

package/components/localize/src/date/utils/forceDotsForNlnl.js

@@ -0,0 +1,11 @@
+/**
+ * @param {string[]} months
+ */
+export function forceDotsForNlnl(months) {
+  return months.map(m => {
+    if (m !== 'mei' && !m.endsWith('.')) {
+      return `${m}.`;
+    }
+    return m;
+  });
+}

package/components/localize/src/number/utils/normalize-format-number-to-parts/forceAddGroupSeparators.js

@@ -13,7 +13,7 @@ export function forceAddGroupSeparators(formattedParts, groupSeparator) {
   let integerPart;
 
   for (let i = 0; i < formattedParts.length; i += 1) {
-    if (formattedParts[i].type === 'integer') {
+    if (formattedParts[i].type === 'integer' && formattedParts[i].value.length > 3) {
       firstPart = formattedParts.splice(0, i);
       integerPart = formattedParts.splice(0, 1);
     }
@@ -66,6 +66,8 @@ export function forceAddGroupSeparators(formattedParts, groupSeparator) {
     if (firstPart) {
       concatArray = firstPart.concat(numberArray, formattedParts);
     }
+  } else {
+    return formattedParts;
   }
   return concatArray;
 }

package/components/localize/src/number/utils/normalize-format-number-to-parts/forceSymbols.js

@@ -17,6 +17,7 @@ const CURRENCY_CODE_SYMBOL_MAP = {
  * @param {string[]} currencyScope
  * @returns {FormatNumberPart[]}
  */
+// eslint-disable-next-line default-param-last
 export function forceSymbols(formattedParts, { currency, currencyDisplay } = {}, currencyScope) {
   const result = formattedParts;
   if (
@@ -44,6 +45,7 @@ export function forceSymbols(formattedParts, { currency, currencyDisplay } = {},
  */
 export function forceFRBESymbols(
   formattedParts,
+  // eslint-disable-next-line default-param-last
   { currency, currencyDisplay } = {},
   currencyScope,
 ) {

package/components/localize/src/number/utils/normalize-format-number-to-parts/normalizeIntl.js

@@ -17,6 +17,7 @@ import { forceFRBESymbols, forceSymbols } from './forceSymbols.js';
  * @param {string} _locale
  * @returns {FormatNumberPart[]}
  */
+// eslint-disable-next-line default-param-last
 export function normalizeIntl(formattedParts, options = {}, _locale) {
   let normalize = forceNormalSpaces(formattedParts);
   // Dutch and Belgian currency must be moved to end of number

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

@@ -25,6 +25,7 @@ describe('getMonthNames', () => {
     // expect(getMonthNames({ locale: 'en-GB', style: 'short' })).to.deep.equal(
     //   s`Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec`,
     // );
+    // Chromium default is leading
     expect(getMonthNames({ locale: 'nl-NL', style: 'short' })).to.deep.equal(
       s`jan. feb. mrt. apr. mei jun. jul. aug. sep. okt. nov. dec.`,
     );

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

@@ -23,6 +23,12 @@ describe('parseDate()', () => {
     localizeTearDown();
   });
 
+  it('handles year correctly', () => {
+    expect(equalsDate(parseDate('1/11/1'), new Date('2001/11/01'))).to.equal(true);
+    expect(equalsDate(parseDate('1/11/49'), new Date('2049/11/01'))).to.equal(true);
+    expect(equalsDate(parseDate('1/11/50'), new Date('1950/11/01'))).to.equal(true);
+  });
+
   it('adds leading zeros', () => {
     expect(equalsDate(parseDate('1-1-1979'), new Date('1979/01/01'))).to.equal(true);
     expect(equalsDate(parseDate('1-11-1979'), new Date('1979/11/01'))).to.equal(true);

package/components/localize/test-helpers/fake-imports.js

@@ -56,5 +56,6 @@ export async function fakeImport(path, ms = 0) {
       setTimeout(() => resolveOrReject(result, resolve, reject), ms);
     });
   }
+  // eslint-disable-next-line no-promise-executor-return
   return new Promise((resolve, reject) => resolveOrReject(result, resolve, reject));
 }

package/components/overlays/src/OverlaysManager.js

@@ -1,3 +1,5 @@
+import { browserDetection } from '@lion/ui/core.js';
+
 /**
  * @typedef {import('lit').CSSResult} CSSResult
  * @typedef {import('./OverlayController.js').OverlayController} OverlayController
@@ -5,19 +7,6 @@
 
 import { overlayDocumentStyle } from './overlayDocumentStyle.js';
 
-// Export this as protected var, so that we can easily mock it in tests
-// TODO: combine with browserDetection of core?
-export const _browserDetection = {
-  isIOS: /iPhone|iPad|iPod/i.test(navigator.userAgent),
-  isMacSafari:
-    navigator.vendor &&
-    navigator.vendor.indexOf('Apple') > -1 &&
-    navigator.userAgent &&
-    navigator.userAgent.indexOf('CriOS') === -1 &&
-    navigator.userAgent.indexOf('FxiOS') === -1 &&
-    navigator.appVersion.indexOf('Mac') !== -1,
-};
-
 /**
  * `OverlaysManager` which manages overlays which are rendered into the body
  */
@@ -182,7 +171,7 @@ export class OverlaysManager {
 
   // eslint-disable-next-line class-methods-use-this
   requestToPreventScroll() {
-    const { isIOS, isMacSafari } = _browserDetection;
+    const { isIOS, isMacSafari } = browserDetection;
     // no check as classList will dedupe it anyways
     document.body.classList.add('overlays-scroll-lock');
     if (isIOS || isMacSafari) {
@@ -203,7 +192,7 @@ export class OverlaysManager {
       return;
     }
 
-    const { isIOS, isMacSafari } = _browserDetection;
+    const { isIOS, isMacSafari } = browserDetection;
     document.body.classList.remove('overlays-scroll-lock');
     if (isIOS || isMacSafari) {
       document.body.classList.remove('overlays-scroll-lock-ios-fix');