@lion/ui 0.17.0-menu-system.0 → 0.17.0

package/components/overlays/src/OverlayMixin.js

@@ -33,7 +33,10 @@ export const OverlayMixinImplementation = superclass => {
   class OverlayMixin extends superclass {
     static get properties() {
       return {
-        opened: { type: Boolean, reflect: true },
+        opened: {
+          type: Boolean,
+          reflect: true,
+        },
       };
     }
 
@@ -59,17 +62,6 @@ export const OverlayMixinImplementation = superclass => {
       this.open = this.open.bind(this);
       /** @type {EventListener} */
       this.close = this.close.bind(this);
-
-      // // By default, we go for disclosure behavior
-      // // TODO: in the future, bring disclosure behavior to a controller (and therefore directive).
-      // // Take inspiration from VisibilityToggleCtrl of portal elements
-      // /**
-      //  * Terminology aligned with https://open-ui.org/components/openable.explainer/
-      //  * @type {'disclosure'|'overlay'}
-      //  */
-      // this.openableMode = 'disclosure';
-
-      // allow hybrid disclosure/overlay components
     }
 
     get config() {
@@ -169,8 +161,6 @@ export const OverlayMixinImplementation = superclass => {
      */
     // eslint-disable-next-line class-methods-use-this
     _setupOpenCloseListeners() {
-      // Keeps the close-overlay event private for the controller.
-      // (we already have )
       /**
        * @param {{ stopPropagation: () => void; }} ev
        */
@@ -228,11 +218,11 @@ export const OverlayMixinImplementation = superclass => {
     // @ts-expect-error
     static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
 
-    // get _overlayInvokerNode() {
-    //   return /** @type {HTMLElement | undefined} */ (
-    //     Array.from(this.children).find(child => child.slot === 'invoker')
-    //   );
-    // }
+    get _overlayInvokerNode() {
+      return /** @type {HTMLElement | undefined} */ (
+        Array.from(this.children).find(child => child.slot === 'invoker')
+      );
+    }
 
     /**
      * @overridable
@@ -266,46 +256,13 @@ export const OverlayMixinImplementation = superclass => {
       );
     }
 
-    /**
-     * @param {Element} focusableElOrWrapper
-     * @returns {Element|null}
-     */
-    static _getFocusableInvokerEl(focusableElOrWrapper) {
-      // return focusableElOrWrapper;
-      return (
-        focusableElOrWrapper &&
-        (focusableElOrWrapper.hasAttribute('tabindex') || focusableElOrWrapper.tagName === 'BUTTON'
-          ? focusableElOrWrapper
-          : focusableElOrWrapper.querySelector('[role=button], button'))
-      );
-    }
-
-    get _overlayInvokerNode() {
-      const ctor = /** @type {typeof OverlayMixin} */ (this.constructor);
-      if (!this.__invokerNode) {
-        const slottedNode = Array.from(this.children).find(child => child.slot === 'invoker');
-        if (slottedNode) {
-          this.__invokerNode = ctor._getFocusableInvokerEl(slottedNode);
-        } else {
-          // Look for preceeding sibling with [data-invoker] attribute, and try to find a focusable element in it (either itself or a child)
-          this.__invokerNode =
-            this.previousElementSibling?.hasAttribute('data-invoker') &&
-            ctor._getFocusableInvokerEl(this.previousElementSibling);
-        }
-      }
-      return this.__invokerNode;
-    }
-
     /** @protected */
     _setupOverlayCtrl() {
       if (this.#hasSetup) return;
-
-      const invokerNode = this._overlayInvokerNode;
-
       const config = {
         contentNode: this._overlayContentNode,
         contentWrapperNode: this._overlayContentWrapperNode,
-        invokerNode: invokerNode && invokerNode instanceof HTMLElement ? invokerNode : undefined,
+        invokerNode: this._overlayInvokerNode,
         referenceNode: this._overlayReferenceNode,
         backdropNode: this._overlayBackdropNode,
       };
@@ -325,8 +282,6 @@ export const OverlayMixinImplementation = superclass => {
 
     /** @protected */
     _teardownOverlayCtrl() {
-      // Make sure that dynamic behavior (e.g. responsive) is possible by allowing multiple setups and teardowns of the overlay controller.
-      this.#hasSetup = false;
       if (!this._overlayCtrl) return;
 
       this._teardownOpenCloseListeners();
@@ -479,7 +434,6 @@ export const OverlayMixinImplementation = superclass => {
   for (const postProcessor of overlayMixinPostProcessors) {
     postProcessor(OverlayMixin);
   }
-  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
-  return OverlayMixin;
+  return /** @type {* & OverlayMixin} */ (OverlayMixin);
 };
 export const OverlayMixin = dedupeMixin(OverlayMixinImplementation);

package/components/overlays/src/OverlaysManager.js

@@ -209,9 +209,9 @@ export class OverlaysManager {
           const newMarginBottom = this.__bodySizeVars.marginBottom + scrollbarHeight;
           // @ts-expect-error [external]: CSS not yet typed
           if (window.CSS?.number && document.body.attributeStyleMap?.set) {
-            // @ts-ignore - CSS Typed OM not fully typed
+            // @ts-ignore
             document.body.attributeStyleMap.set('margin-right', CSS.px(newMarginRight));
-            // @ts-ignore - CSS Typed OM not fully typed
+            // @ts-ignore
             document.body.attributeStyleMap.set('margin-bottom', CSS.px(newMarginBottom));
           } else {
             document.body.style.marginRight = `${newMarginRight}px`;

package/components/overlays/src/utils/adopt-styles.js

@@ -56,8 +56,7 @@ function adoptStyleWhenAdoptedStylesheetsNotSupported(
     const styleEl = document.createElement('style');
     // keep notation, so it's not renamed in minification/build
     // eslint-disable-next-line dot-notation
-    // @ts-ignore - litNonce is a custom property
-    const nonce = window.litNonce;
+    const nonce = window['litNonce'];
     if (nonce !== undefined) {
       styleEl.setAttribute('nonce', nonce);
     }

package/components/overlays/src/utils/get-focusable-elements.js

@@ -8,7 +8,6 @@ import { isVisible } from './is-visible.js';
 import { sortByTabIndex } from './sort-by-tabindex.js';
 
 // IE11 supports matches as 'msMatchesSelector'
-/** @type {'matches' | 'msMatchesSelector'} */
 const matchesFunc = 'matches' in Element.prototype ? 'matches' : 'msMatchesSelector';
 
 /**
@@ -17,14 +16,11 @@ const matchesFunc = 'matches' in Element.prototype ? 'matches' : 'msMatchesSelec
  */
 function isFocusable(element) {
   // Elements that cannot be focused if they have [disabled] attribute.
-  // @ts-ignore - msMatchesSelector is legacy
   if (element[matchesFunc]('input, select, textarea, button, object')) {
-    // @ts-ignore
     return element[matchesFunc](':not([disabled])');
   }
 
   // Elements that can be focused even if they have [disabled] attribute.
-  // @ts-ignore
   return element[matchesFunc]('a[href], area[href], iframe, [tabindex], [contentEditable]');
 }
 

package/components/overlays/src/utils/is-equal-config.js

@@ -19,9 +19,6 @@ export function isEqualConfig(a, b) {
   if (aProps.length !== bProps.length) {
     return false;
   }
-  const isEqual =
-    /** @param {string} prop */
-    // @ts-ignore - dynamic property access
-    prop => isEqualConfig(a[prop], b[prop]);
+  const isEqual = /** @param {string} prop */ prop => isEqualConfig(a[prop], b[prop]);
   return aProps.every(isEqual);
 }

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

@@ -403,7 +403,7 @@ describe('OverlayController', () => {
               { ignoreAttributes: ['closedby'] },
             );
 
-            expect(el).lightDom.to.equal(`<div data-content="" slot="content">projected</div>`);
+            expect(el).lightDom.to.equal(`<div slot="content">projected</div>`);
           });
         });
 
@@ -425,7 +425,7 @@ describe('OverlayController', () => {
               `
               <dialog data-overlay-outer-wrapper="" open="" role="none" style="${wrappingDialogNodeStyle}">
                 <div data-id="content-wrapper">
-                  <div data-content="" id="content">non projected</div>
+                  <div id="content">non projected</div>
                 </div>
               </dialog>
           `,

package/components/overlays/types/OverlayConfig.ts

@@ -21,6 +21,7 @@ export type OverlayPhase =
   | 'add'
   | 'remove';
 
+
 export interface ViewportConfig {
   placement: ViewportPlacement;
 }
@@ -96,20 +97,14 @@ export interface OverlayConfig {
   /** By default, the tooltip content is a 'description' for the invoker (uses aria-describedby) Setting this property to 'label' makes the content function as a label (via aria-labelledby) */
   invokerRelation?: 'label' | 'description';
 
+  /** render a div instead of dialog */
+  _noDialogEl?: Boolean;
+
   /**
    * Determines the conditions hiding/showing should be based on. It gets the OverlayController as input and returns an object with
    * functions with Overlay phases as keys
    */
   visibilityTriggerFunction?: Function;
+}
 
-  /**
-   * Whether the overlay content should receive focus when shown.
-   */
-  focusContentOnOpen?: boolean;
 
-  /*
-   * By default, we function either as overlay or disclosure. In some cases, this should be dynamically set (think of responsive changes).
-   * or it depends on the context (a top level menu is not openable (unless it's a context menu), its children menus are).
-   */
-  isOpenable?: boolean;
-}

package/components/select-rich/test/lion-select-rich.test.js

@@ -832,7 +832,6 @@ describe('lion-select-rich', () => {
         await waitUntil(isSelectRichRendered);
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
-        // @ts-ignore - NodeList array access
         const optionBlue = /** @type { HTMLElement | undefined } */ (
           wrapperElementShadowRoot?.querySelectorAll('lion-option')
         )?.[1];
@@ -956,7 +955,6 @@ describe('lion-select-rich', () => {
         await waitUntil(isSelectRichRendered);
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
-        // @ts-ignore - NodeList array access
         const optionBlue = /** @type { HTMLElement | undefined } */ (
           wrapperElementShadowRoot?.querySelectorAll('lion-option')
         )?.[1];
@@ -1084,7 +1082,6 @@ describe('lion-select-rich', () => {
         await waitUntil(isSelectRichRendered);
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
-        // @ts-ignore - NodeList array access
         const optionBlue = /** @type { HTMLElement | undefined } */ (
           wrapperElementShadowRoot?.querySelectorAll('lion-option')
         )?.[1];