@lion/ui 0.15.0 → 0.15.2

package/components/listbox/src/ListboxMixin.js

@@ -4,6 +4,7 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { ChoiceGroupMixin, FormControlMixin, FormRegistrarMixin } from '@lion/ui/form-core.js';
 import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
 import { LionOptions } from './LionOptions.js';
+import { moveUserProvidedDefaultSlottablesToTarget } from '../../core/src/SlotMixin.js';
 
 // TODO: extract ListNavigationWithActiveDescendantMixin that can be reused in [role="menu"]
 // having children with [role="menuitem|menuitemcheckbox|menuitemradio|option"] and
@@ -21,39 +22,6 @@ import { LionOptions } from './LionOptions.js';
 
 // TODO: consider adding methods below to @lion/helpers
 
-/**
- * Sometimes, we want to provide best DX (direct slottables) and be accessible
- * at the same time.
- * In the first example below, we need to wrap our options in light dom in an element with
- * [role=listbox]. We could achieve this via the second example, but it would affect our
- * public api negatively. not allowing us to be forward compatible with the AOM spec:
- * https://wicg.github.io/aom/explainer.html
- * With this method, it's possible to watch elements in the default slot and move them
- * to the desired target (the element with [role=listbox]) in light dom.
- *
- * @example
- * # desired api
- * <sel-ect>
- *  <opt-ion></opt-ion>
- * </sel-ect>
- * # desired end state
- * <sel-ect>
- *  <div role="listbox" slot="lisbox">
- *    <opt-ion></opt-ion>
- *  </div>
- * </sel-ect>
- * @param {HTMLElement} source host of ShadowRoot with default <slot>
- * @param {HTMLElement} target the desired target in light dom
- */
-function moveDefaultSlottablesToTarget(source, target) {
-  Array.from(source.childNodes).forEach((/** @type {* & Element} */ c) => {
-    const isNamedSlottable = c.hasAttribute && c.hasAttribute('slot');
-    if (!isNamedSlottable) {
-      target.appendChild(c);
-    }
-  });
-}
-
 /**
  * @type {ListboxMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
@@ -899,9 +867,9 @@ const ListboxMixinImplementation = superclass =>
       );
 
       if (slot) {
-        moveDefaultSlottablesToTarget(this, this._listboxNode);
+        moveUserProvidedDefaultSlottablesToTarget(this, this._listboxNode);
         slot.addEventListener('slotchange', () => {
-          moveDefaultSlottablesToTarget(this, this._listboxNode);
+          moveUserProvidedDefaultSlottablesToTarget(this, this._listboxNode);
         });
       }
     }

package/components/overlays/src/ArrowMixin.js

@@ -64,8 +64,11 @@ export const ArrowMixinImplementation = superclass =>
 
           [data-popper-placement^='left'] .arrow {
             right: calc(
-              -1 * (var(--tooltip-arrow-height) +
-                    (var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2)
+              -1 *
+                (
+                  var(--tooltip-arrow-height) +
+                    (var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2
+                )
             );
           }
 
@@ -75,8 +78,11 @@ export const ArrowMixinImplementation = superclass =>
 
           [data-popper-placement^='right'] .arrow {
             left: calc(
-              -1 * (var(--tooltip-arrow-height) +
-                    (var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2)
+              -1 *
+                (
+                  var(--tooltip-arrow-height) +
+                    (var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2
+                )
             );
           }
 

package/components/overlays/src/OverlayController.js

@@ -197,15 +197,24 @@ export class OverlayController extends EventTarget {
     this._contentId = `overlay-content--${Math.random().toString(36).slice(2, 10)}`;
     /** @private */
     this.__originalAttrs = new Map();
+    /** @private */
+    this.__escKeyHandler = this.__escKeyHandler.bind(this);
     this.updateConfig(config);
     /** @private */
     this.__hasActiveTrapsKeyboardFocus = false;
     /** @private */
     this.__hasActiveBackdrop = true;
     /** @private */
-    this.__escKeyHandler = this.__escKeyHandler.bind(this);
-    /** @private */
     this.__cancelHandler = this.__cancelHandler.bind(this);
+    /**
+     * The property is used to skip `__escKeyHandler` handler for overlays that have been closed
+     * by `__escKeyHandlerCalled` previously.
+     * `__escKeyHandlerCalled` is set to `false` right before overlay show up
+     * `__escKeyHandlerCalled` is set to `true` when `__escKeyHandler` is called at least one time
+     * after each 'show' phase
+     * @private
+     */
+    this.__escKeyHandlerCalled = false;
   }
 
   /**
@@ -1211,13 +1220,21 @@ export class OverlayController extends EventTarget {
    * @returns {void}
    */
   __escKeyHandler(event) {
-    if (event.key !== 'Escape' || childDialogsClosedInEventLoopWeakmap.has(event)) return;
+    if (
+      event.key !== 'Escape' ||
+      childDialogsClosedInEventLoopWeakmap.has(event) ||
+      (!this.isShown && this.__escKeyHandlerCalled)
+    ) {
+      return;
+    }
 
     const hasPressedInside =
       event.composedPath().includes(this.contentNode) ||
+      (this.invokerNode && event.composedPath().includes(this.invokerNode)) ||
       deepContains(this.contentNode, /** @type {HTMLElement|ShadowRoot} */ (event.target));
 
     if (hasPressedInside) {
+      this.__escKeyHandlerCalled = true;
       this.hide();
       // We could do event.stopPropagation() here, but we don't want to hide info for
       // the outside world about user interactions. Instead, we store the event in a WeakMap
@@ -1245,12 +1262,21 @@ export class OverlayController extends EventTarget {
    * @protected
    */
   _handleHidesOnEsc({ phase }) {
-    if (phase === 'show') {
+    if (phase === 'init') {
+      // we remove previously added (if any) event listener to guarantee
+      // there is only one Escape handler added here.
+      // Note `init` phase triggered on every `updateConfig` call and that
+      // could happen multiple times during the component life cycle
+      this.contentNode.removeEventListener('keyup', this.__escKeyHandler);
       this.contentNode.addEventListener('keyup', this.__escKeyHandler);
       if (this.invokerNode) {
         this.invokerNode.addEventListener('keyup', this.__escKeyHandler);
       }
-    } else if (phase === 'hide' || phase === 'teardown') {
+    }
+    if (phase === 'show') {
+      this.__escKeyHandlerCalled = false;
+    }
+    if (phase === 'teardown') {
       this.contentNode.removeEventListener('keyup', this.__escKeyHandler);
       if (this.invokerNode) {
         this.invokerNode.removeEventListener('keyup', this.__escKeyHandler);
@@ -1263,9 +1289,10 @@ export class OverlayController extends EventTarget {
    * @protected
    */
   _handleHidesOnOutsideEsc({ phase }) {
-    if (phase === 'show') {
+    if (phase === 'init') {
+      document.removeEventListener('keyup', this.#outsideEscKeyHandler);
       document.addEventListener('keyup', this.#outsideEscKeyHandler);
-    } else if (phase === 'hide' || phase === 'teardown') {
+    } else if (phase === 'teardown') {
       document.removeEventListener('keyup', this.#outsideEscKeyHandler);
     }
   }

package/components/overlays/test/OverlayController.test.js

@@ -799,6 +799,9 @@ describe('OverlayController', () => {
           const { parentOverlay, childOverlay } = await createNestedEscControllers(parentContent);
           await mimicEscapePress(childOverlay.contentNode);
 
+          // without this line, the test is unstable on FF sometimes
+          await aTimeout(0);
+
           expect(parentOverlay.isShown).to.be.false;
           expect(childOverlay.isShown).to.be.true;
 
@@ -1040,7 +1043,7 @@ describe('OverlayController', () => {
         // Don't hide on inside shadowDom click
         /** @type {ShadowRoot} */
         // @ts-expect-error
-        (ctrl.contentNode.querySelector(tagString).shadowRoot).querySelector('button').click();
+        ctrl.contentNode.querySelector(tagString).shadowRoot.querySelector('button').click();
 
         await aTimeout(0);
         expect(ctrl.isShown).to.be.true;

package/components/overlays/test/OverlayMixin.test.js

@@ -7,9 +7,9 @@ const tagString = defineCE(
   class extends OverlayMixin(LitElement) {
     render() {
       return html`
-        <button slot="invoker">invoker button</button>
+        <slot name="invoker"></slot>
         <div id="overlay-content-node-wrapper">
-          <div slot="content">content of the overlay</div>
+          <slot name="content"></slot>
         </div>
       `;
     }

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

@@ -111,6 +111,63 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       expect(el.opened).to.be.false;
     });
 
+    /**
+     * In case OverlayMixin has a handler for Escape which sets `opened` to `false`,
+     * make sure it does not conflict with the Escape handler in OverlayController.
+     * */
+    it('syncs opened between overlayController and OverlayMixin on Escape', async () => {
+      const config = { hidesOnEsc: true };
+      const el = /** @type {OverlayEl} */ (
+        await fixture(html`
+        <${tag} id="main-dialog" .config="${config}">
+          <div slot="content" id="mainContent">
+            open nested overlay:
+            <${tag} id="sub-dialog" .config="${config}">
+              <div slot="content" id="nestedContent">
+                <input id="nestedContentInput">
+              </div>
+              <button slot="invoker" id="nestedInvoker">nested invoker button</button>
+            </${tag}>
+          </div>
+          <button slot="invoker" id="mainInvoker">invoker button</button>
+        </${tag}>
+      `)
+      );
+      await el.updateComplete;
+      const subDialog = /** @type {OverlayEl} */ (el.querySelector('#sub-dialog'));
+      const nestedContentInput = /** @type {OverlayEl} */ (el.querySelector('#nestedContentInput'));
+
+      // Note, OverlayController has Escape key listener added to "#nestedContent".
+      // And the sub-dialog adds the Escape key listener to "#nestedContentInput" which is a child evelement of "#nestedContent"
+      // In this case when "#nestedContentInput" is focused and Escape is pressed, the listener of "#nestedContentInput"
+      // is always called before the listener set for "#nestedContent" inside OverlayController.
+      // This way we check the scenario when OverlayController's `hide()` is called first from
+      // The OverlayMixin and it does not prevent OverlayController `hidesOnEsc` handler from being called
+      nestedContentInput?.addEventListener('keyup', (/** @type {* & KeyboardEvent} */ event) => {
+        if (event.key === 'Escape') {
+          subDialog.opened = false;
+        }
+      });
+
+      el.opened = true;
+      await el.updateComplete;
+      await el._overlayCtrl._showComplete;
+      expect(el.opened).to.be.true;
+      expect(el._overlayCtrl.isShown).to.be.true;
+
+      subDialog.opened = true;
+      await subDialog.updateComplete;
+      await subDialog._overlayCtrl._showComplete;
+      expect(subDialog.opened).to.be.true;
+      expect(subDialog._overlayCtrl.isShown).to.be.true;
+
+      await mimicEscapePress(nestedContentInput);
+      expect(subDialog.opened).to.be.false;
+      expect(subDialog._overlayCtrl.isShown).to.be.false;
+      expect(el.opened).to.be.true;
+      expect(el._overlayCtrl.isShown).to.be.true;
+    });
+
     // TODO: put this tests in OverlayController.test.js instead?
     it('does not change the body size when opened', async () => {
       const parentNode = document.createElement('div');