@lion/ui 0.0.4 → 0.0.6

package/components/input-tel-dropdown/src/LionInputTelDropdown.js

@@ -27,7 +27,6 @@ import { getFlagSymbol } from './getFlagSymbol.js';
  * @typedef {import('../types/index.js').OnDropdownChangeEvent} OnDropdownChangeEvent
  * @typedef {import('../types/index.js').DropdownRef} DropdownRef
  * @typedef {import('../types/index.js').RegionMeta} RegionMeta
- * @typedef {* & import('awesome-phonenumber').default} AwesomePhoneNumber
  * @typedef {import('../../select-rich/src/LionSelectRich.js').LionSelectRich} LionSelectRich
  * @typedef {import('../../overlays/src/OverlayController.js').OverlayController} OverlayController
  * @typedef {TemplateDataForDropdownInputTel & {data: {regionMetaList:RegionMeta[]}}} TemplateDataForIntlInputTel
@@ -178,9 +177,7 @@ export class LionInputTelDropdown extends LionInputTel {
 
         return {
           template: templates.dropdown(this._templateDataDropdown),
-          afterRender: () => {
-            this.__syncRegionWithDropdown();
-          },
+          afterRender: this.__syncRegionWithDropdown,
         };
       },
     };
@@ -205,8 +202,6 @@ export class LionInputTelDropdown extends LionInputTel {
   _onPhoneNumberUtilReady() {
     super._onPhoneNumberUtilReady();
     this.__createRegionMeta();
-    // render dropdown (trigger render of prefix slot via SlotMixin)
-    this.requestUpdate();
   }
 
   /**
@@ -234,19 +229,27 @@ export class LionInputTelDropdown extends LionInputTel {
     /**
      * Contains everything needed for rendering region options:
      * region code, country code, display name according to locale, display name
+     * @private
      * @type {RegionMeta[]}
      */
     this.__regionMetaList = [];
 
     /**
      * A filtered `this.__regionMetaList`, containing all regions provided in `preferredRegions`
+     * @private
      * @type {RegionMeta[]}
      */
     this.__regionMetaListPreferred = [];
 
-    /** @type {EventListener} */
+    /**
+     * @protected
+     * @type {EventListener}
+     */
     this._onDropdownValueChange = this._onDropdownValueChange.bind(this);
-    /** @type {EventListener} */
+    /**
+     * @private
+     * @type {EventListener}
+     */
     this.__syncRegionWithDropdown = this.__syncRegionWithDropdown.bind(this);
   }
 
@@ -285,6 +288,9 @@ export class LionInputTelDropdown extends LionInputTel {
     }
   }
 
+  /**
+   * @protected
+   */
   _initModelValueBasedOnDropdown() {
     if (!this._initialModelValue && !this.dirty && this._phoneUtil) {
       const countryCode = this._phoneUtil.getCountryCodeForRegionCode(this.activeRegion);

package/components/listbox/src/LionOption.js

@@ -78,11 +78,13 @@ export class LionOption extends DisabledMixin(
   }
 
   /**
-   * @param {string} name
-   * @param {unknown} oldValue
+   * @param {string} [name]
+   * @param {unknown} [oldValue]
+   * @param {import('lit').PropertyDeclaration} [options]
+   * @returns {void}
    */
-  requestUpdate(name, oldValue) {
-    super.requestUpdate(name, oldValue);
+  requestUpdate(name, oldValue, options) {
+    super.requestUpdate(name, oldValue, options);
 
     if (name === 'active' && this.active !== oldValue) {
       this.dispatchEvent(new Event('active-changed', { bubbles: true }));

package/components/overlays/src/OverlayMixin.js

@@ -58,12 +58,13 @@ export const OverlayMixinImplementation = superclass =>
     }
 
     /**
-     * @override
-     * @param {string} name
-     * @param {any} oldValue
+     * @param {string} [name]
+     * @param {unknown} [oldValue]
+     * @param {import('lit').PropertyDeclaration} [options]
+     * @returns {void}
      */
-    requestUpdate(name, oldValue) {
-      super.requestUpdate(name, oldValue);
+    requestUpdate(name, oldValue, options) {
+      super.requestUpdate(name, oldValue, options);
       if (name === 'opened' && this.opened !== oldValue) {
         this.dispatchEvent(new Event('opened-changed'));
       }

package/components/overlays/src/OverlaysManager.js

@@ -6,7 +6,18 @@
 import { globalOverlaysStyle } from './globalOverlaysStyle.js';
 import { setSiblingsInert, unsetSiblingsInert } from './utils/inert-siblings.js';
 
-const isIOS = navigator.userAgent.match(/iPhone|iPad|iPod/i);
+// 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
@@ -199,21 +210,27 @@ export class OverlaysManager {
 
   // eslint-disable-next-line class-methods-use-this
   requestToPreventScroll() {
+    const { isIOS, isMacSafari } = _browserDetection;
     // no check as classList will dedupe it anyways
     document.body.classList.add('global-overlays-scroll-lock');
-    if (isIOS) {
-      // iOS has issues with overlays with input fields. This is fixed by applying
+    if (isIOS || isMacSafari) {
+      // iOS and safar for mac have issues with overlays with input fields. This is fixed by applying
       // position: fixed to the body. As a side effect, this will scroll the body to the top.
       document.body.classList.add('global-overlays-scroll-lock-ios-fix');
+    }
+    if (isIOS) {
       document.documentElement.classList.add('global-overlays-scroll-lock-ios-fix');
     }
   }
 
   requestToEnableScroll() {
+    const { isIOS, isMacSafari } = _browserDetection;
     if (!this.shownList.some(ctrl => ctrl.preventsScroll === true)) {
       document.body.classList.remove('global-overlays-scroll-lock');
-      if (isIOS) {
+      if (isIOS || isMacSafari) {
         document.body.classList.remove('global-overlays-scroll-lock-ios-fix');
+      }
+      if (isIOS) {
         document.documentElement.classList.remove('global-overlays-scroll-lock-ios-fix');
       }
     }

package/components/overlays/src/globalOverlaysStyle.js

@@ -126,4 +126,14 @@ export const globalOverlaysStyle = css`
   html.global-overlays-scroll-lock-ios-fix {
     height: 100vh;
   }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    .global-overlays .global-overlays__backdrop--animation-in {
+      animation: global-overlays-backdrop-fade-in 1ms;
+    }
+
+    .global-overlays .global-overlays__backdrop--animation-out {
+      animation: global-overlays-backdrop-fade-out 1ms;
+    }
+  }
 `;

package/components/overlays/test/OverlaysManager.test.js

@@ -1,6 +1,7 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 import { OverlayController, OverlaysManager } from '@lion/ui/overlays.js';
+import { _browserDetection } from '../src/OverlaysManager.js';
 
 /**
  * @typedef {import('../types/OverlayConfig.js').OverlayConfig} OverlayConfig
@@ -97,4 +98,79 @@ describe('OverlaysManager', () => {
     await dialog2.hide();
     expect(mngr.shownList).to.deep.equal([]);
   });
+
+  describe('Browser/device edge cases', () => {
+    const isIOSOriginal = _browserDetection.isIOS;
+    const isMacSafariOriginal = _browserDetection.isMacSafari;
+
+    function mockIOS() {
+      _browserDetection.isIOS = true;
+      _browserDetection.isMacSafari = false;
+    }
+
+    function mockMacSafari() {
+      // When we are iOS
+      _browserDetection.isIOS = false;
+      _browserDetection.isMacSafari = true;
+    }
+
+    afterEach(() => {
+      // Restore original values
+      _browserDetection.isIOS = isIOSOriginal;
+      _browserDetection.isMacSafari = isMacSafariOriginal;
+    });
+
+    describe('When initialized with "preventsScroll: true"', () => {
+      it('adds class "global-overlays-scroll-lock-ios-fix" to body and html on iOS', async () => {
+        mockIOS();
+        const dialog = new OverlayController({ ...defaultOptions, preventsScroll: true }, mngr);
+        await dialog.show();
+        expect(Array.from(document.body.classList)).to.contain(
+          'global-overlays-scroll-lock-ios-fix',
+        );
+        expect(Array.from(document.documentElement.classList)).to.contain(
+          'global-overlays-scroll-lock-ios-fix',
+        );
+        await dialog.hide();
+        expect(Array.from(document.body.classList)).to.not.contain(
+          'global-overlays-scroll-lock-ios-fix',
+        );
+        expect(Array.from(document.documentElement.classList)).to.not.contain(
+          'global-overlays-scroll-lock-ios-fix',
+        );
+
+        // When we are not iOS nor MacSafari
+        _browserDetection.isIOS = false;
+        _browserDetection.isMacSafari = false;
+
+        const dialog2 = new OverlayController({ ...defaultOptions, preventsScroll: true }, mngr);
+        await dialog2.show();
+        expect(Array.from(document.body.classList)).to.not.contain(
+          'global-overlays-scroll-lock-ios-fix',
+        );
+        expect(Array.from(document.documentElement.classList)).to.not.contain(
+          'global-overlays-scroll-lock-ios-fix',
+        );
+      });
+
+      it('adds class "global-overlays-scroll-lock-ios-fix" to body on MacSafari', async () => {
+        mockMacSafari();
+        const dialog = new OverlayController({ ...defaultOptions, preventsScroll: true }, mngr);
+        await dialog.show();
+        expect(Array.from(document.body.classList)).to.contain(
+          'global-overlays-scroll-lock-ios-fix',
+        );
+        expect(Array.from(document.documentElement.classList)).to.not.contain(
+          'global-overlays-scroll-lock-ios-fix',
+        );
+        await dialog.hide();
+        expect(Array.from(document.body.classList)).to.not.contain(
+          'global-overlays-scroll-lock-ios-fix',
+        );
+        expect(Array.from(document.documentElement.classList)).to.not.contain(
+          'global-overlays-scroll-lock-ios-fix',
+        );
+      });
+    });
+  });
 });

package/components/overlays/test-suites/OverlayMixin.suite.js

@@ -4,6 +4,7 @@ import sinon from 'sinon';
 import { overlays, OverlayController } from '@lion/ui/overlays.js';
 
 import '@lion/ui/define/lion-dialog.js';
+import { _browserDetection } from '../src/OverlaysManager.js';
 
 /**
  * @typedef {import('../types/OverlayConfig.js').OverlayConfig} OverlayConfig
@@ -77,6 +78,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       expect(el.opened).to.be.false;
     });
 
+    // TODO: put this tests in OverlayController.test.js instead?
     it('does not change the body size when opened', async () => {
       const parentNode = document.createElement('div');
       parentNode.setAttribute('style', 'height: 10000px; width: 10000px;');
@@ -91,24 +93,28 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
           { parentNode },
         )
       );
-      const { offsetWidth, offsetHeight } = /** @type {HTMLElement} */ (
-        elWithBigParent.offsetParent
+
+      // For now, we skip this test for MacSafari, since the body.global-overlays-scroll-lock-ios-fix
+      // class results in a scrollbar when preventsScroll is true.
+      // However, fully functioning interacive elements (input fields) in the dialog are more important
+      if (_browserDetection.isMacSafari && elWithBigParent._overlayCtrl.preventsScroll) {
+        return;
+      }
+
+      const elWithBigParentOffsetParent = /** @type {HTMLElement} */ (
+        elWithBigParent?.offsetParent
       );
+
+      const { offsetWidth, offsetHeight } = elWithBigParentOffsetParent;
+
       await elWithBigParent._overlayCtrl.show();
+
       expect(elWithBigParent.opened).to.be.true;
-      expect(/** @type {HTMLElement} */ (elWithBigParent?.offsetParent).offsetWidth).to.equal(
-        offsetWidth,
-      );
-      expect(/** @type {HTMLElement} */ (elWithBigParent?.offsetParent).offsetHeight).to.equal(
-        offsetHeight,
-      );
+      expect(elWithBigParentOffsetParent.offsetWidth).to.equal(offsetWidth);
+      expect(elWithBigParentOffsetParent.offsetHeight).to.equal(offsetHeight);
       await elWithBigParent._overlayCtrl.hide();
-      expect(/** @type {HTMLElement} */ (elWithBigParent?.offsetParent).offsetWidth).to.equal(
-        offsetWidth,
-      );
-      expect(/** @type {HTMLElement} */ (elWithBigParent?.offsetParent).offsetHeight).to.equal(
-        offsetHeight,
-      );
+      expect(elWithBigParentOffsetParent.offsetWidth).to.equal(offsetWidth);
+      expect(elWithBigParentOffsetParent.offsetHeight).to.equal(offsetHeight);
     });
 
     it('should respond to initially and dynamically setting the config', async () => {

package/components/select-rich/src/LionSelectRich.js

@@ -156,11 +156,13 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
   }
 
   /**
-   * @param {string} name
-   * @param {unknown} oldValue
+   * @param {string} [name]
+   * @param {unknown} [oldValue]
+   * @param {import('lit').PropertyDeclaration} [options]
+   * @returns {void}
    */
-  requestUpdate(name, oldValue) {
-    super.requestUpdate(name, oldValue);
+  requestUpdate(name, oldValue, options) {
+    super.requestUpdate(name, oldValue, options);
     if (name === 'interactionMode') {
       if (this.interactionMode === 'auto') {
         this.interactionMode = detectInteractionMode();

package/components/switch/src/LionSwitchButton.js

@@ -151,14 +151,13 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
   }
 
   /**
-   * We synchronously update aria-checked to support voice over on safari.
-   *
-   * @param {PropertyKey} name
-   * @param {?} oldValue
-   * @override
+   * @param {string} [name]
+   * @param {unknown} [oldValue]
+   * @param {import('lit').PropertyDeclaration} [options]
+   * @returns {void}
    */
-  requestUpdate(name, oldValue) {
-    super.requestUpdate(name, oldValue);
+  requestUpdate(name, oldValue, options) {
+    super.requestUpdate(name, oldValue, options);
     if (this.isConnected && name === 'checked' && this.checked !== oldValue && !this.disabled) {
       this.__checkedStateChange();
     }