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

package/collapsible.js

@@ -1,2 +1 @@
 export { LionCollapsible } from './components/collapsible/src/LionCollapsible.js';
-// export { DisclosureMixin } from '../components/collapsible/src/DisclosureMixin.js';

package/components/button/src/LionButton.js

@@ -220,8 +220,4 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
       this.click();
     }
   }
-
-  // we want to be able to identify LionButtons w/o instanceof (for perf (loose dep) and dual version support),
-  // so we use a static property for that that doesn't get renamed by minifiers
-  static ['_$isLionButton$'] = true;
 }

package/components/button/test-suites/LionButton.suite.js

@@ -279,7 +279,6 @@ export function LionButtonSuite({ klass = LionButton } = {}) {
 
         sameProperties.forEach(property => {
           it(`has same value of the property "${property}" as in native button event`, () => {
-            // @ts-ignore - dynamic property access
             expect(lionButtonEvent[property]).to.equal(nativeButtonEvent[property]);
           });
         });

package/components/calendar/src/LionCalendar.js

@@ -928,7 +928,6 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     if (type !== 'Date') {
       tmpDate.setDate(1);
     }
-    // @ts-ignore - dynamic method access
     tmpDate[`set${type}`](tmpDate[`get${type}`]() + modify);
     // if we've reset the day count,
     // restore day count as best we can
@@ -936,7 +935,6 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
       const maxDays = new Date(tmpDate.getFullYear(), tmpDate.getMonth() + 1, 0).getDate();
       tmpDate.setDate(Math.min(this.centralDate.getDate(), maxDays));
     }
-    // @ts-ignore - dynamic property access
     this[dateType] = tmpDate;
   }
 

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

@@ -3227,7 +3227,6 @@ 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,14 +352,11 @@ 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];
           }
         }
@@ -389,7 +386,6 @@ 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
               },
             );
@@ -397,7 +393,6 @@ 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];
           }
         });
@@ -411,7 +406,6 @@ 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];
@@ -442,7 +436,6 @@ 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,21 +162,15 @@ 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
@@ -200,17 +194,12 @@ 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,7 +153,6 @@ 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,9 +191,7 @@ 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,13 +1554,11 @@ 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,7 +714,6 @@ 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,7 +6,6 @@ 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

@@ -597,11 +597,12 @@ describe('<lion-input-datepicker>', () => {
         <lion-input-datepicker label="End date" name="endDate"></lion-input-datepicker>
       `);
 
-      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;
+      // @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;
 
       expect(startLabel).to.not.equal(endLabel);
     });

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

@@ -210,7 +210,6 @@ 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/overlays/src/OverlayController.js

@@ -106,21 +106,6 @@ async function preloadPopper() {
 
 const childDialogsClosedInEventLoopWeakmap = new WeakMap();
 
-/**
- * @param {HTMLElement | null} el
- * @param {string} selector
- * @returns {HTMLElement | null}
- */
-function deepClosest(el, selector) {
-  // @ts-ignore - comparing HTMLElement to document/window for safety
-  return (
-    // @ts-ignore - type comparison check
-    (el && el !== document && el !== window && el.closest(selector)) ||
-    // @ts-ignore - host property on ShadowRoot
-    deepClosest(el.getRootNode().host, selector)
-  );
-}
-
 /**
  * OverlayController is the fundament for every single type of overlay. With the right
  * configuration, it can be used to build (modal) dialogs, tooltips, dropdowns, popovers,
@@ -211,19 +196,10 @@ export class OverlayController extends EventTarget {
         placement: 'center',
       },
       zIndex: 9999,
-      isOpenable: true,
-      focusContentOnOpen: false,
-      // This means that content will have visually-hidden / sr-only styles. This is handy for:
-      // - hidden menus that should be "indexable" by screen readers (like the Links list in VO: https://support.apple.com/en-gb/guide/voiceover/mchlp2719/mac)
-      // - "more" menus that put content in a dropdown that do not fit in the current row
-      // - menus that should generally open on tab.
-      // @ts-ignore - hideVisually is an extension property
-      hideVisually: false,
     };
 
     /** @protected */
     this._contentId = `overlay-content--${Math.random().toString(36).slice(2, 10)}`;
-
     /** @private */
     this.__originalAttrs = new Map();
     /** @private */
@@ -244,8 +220,6 @@ export class OverlayController extends EventTarget {
     this.__escKeyHandlerCalled = false;
   }
 
-  #hasSetup = false;
-
   /**
    * The invokerNode
    * @type {HTMLElement | undefined}
@@ -264,7 +238,7 @@ export class OverlayController extends EventTarget {
 
   /**
    * Determines the connection point in DOM (body vs next to invoker).
-   * @type {'global' | 'local' | 'custom' | undefined}
+   * @type {'global' | 'local' | undefined}
    */
   get placementMode() {
     return this.config?.placementMode;
@@ -519,6 +493,8 @@ export class OverlayController extends EventTarget {
     this.__validateConfiguration(this.config);
     /** @protected */
     this._init();
+    /** @private */
+    this.__elementToFocusAfterHide = undefined;
 
     if (!this.#isRegisteredOnManager()) {
       this.manager.add(this);
@@ -540,7 +516,7 @@ export class OverlayController extends EventTarget {
         '[OverlayController] You need to provide a .placementMode ("global"|"local")',
       );
     }
-    if (!['global', 'local', 'custom'].includes(newConfig.placementMode)) {
+    if (!['global', 'local'].includes(newConfig.placementMode)) {
       throw new Error(
         `[OverlayController] "${newConfig.placementMode}" is not a valid .placementMode, use ("global"|"local")`,
       );
@@ -559,8 +535,6 @@ export class OverlayController extends EventTarget {
    * @protected
    */
   _init() {
-    if (!this.config.isOpenable) return;
-
     if (!this.__contentHasBeenInitialized) {
       this.__initContentDomStructure();
       this.__contentHasBeenInitialized = true;
@@ -578,27 +552,8 @@ export class OverlayController extends EventTarget {
     }
     this.__handleOverlayStyles({ phase: 'init' });
     this._handleFeatures({ phase: 'init' });
-
-    /** @private */
-    this.__elementToFocusAfterHide = undefined;
-
-    this.contentNode.dataset.content = '';
-
-    // Use event delegation to listen for clicks on close buttons...
-    this.contentNode.addEventListener('click', this.#hideOnCloseButtonClick);
-
-    this.#hasSetup = true;
   }
 
-  #hideOnCloseButtonClick = (/** @type {{ target: any; }} */ ev) => {
-    const isOurCloseButton =
-      ev.target.hasAttribute('data-close') &&
-      deepClosest(ev.target, '[data-content]') === this.contentNode;
-    if (!isOurCloseButton) return;
-
-    this.hide();
-  };
-
   /**
    * @param {{ phase: OverlayPhase }} config
    * @private
@@ -639,97 +594,84 @@ export class OverlayController extends EventTarget {
    * @private
    */
   __initContentDomStructure() {
-    if (this.placementMode !== 'custom') {
-      const wrappingDialogElement = document.createElement('dialog');
-      // We use a dialog for its visual capabilities: it renders to the top layer.
-      // A11y will depend on the type of overlay and is arranged on contentNode level.
-      // Also see: https://www.scottohara.me/blog/2019/03/05/open-dialog.html
-      //
-      // The role="dialog" is set on the contentNode (or another role), so role="none"
-      // is valid here, although AXE complains about this setup.
-      // For now we need to add `ignoredRules: ['aria-allowed-role']` in your AXE tests.
-      // see: https://lion.js.org/fundamentals/systems/overlays/rationale/#considerations
-      wrappingDialogElement.setAttribute('role', 'none');
-      wrappingDialogElement.setAttribute('data-overlay-outer-wrapper', '');
-      // N.B. position: fixed is needed to escape out of 'overflow: hidden'
-      // We give a high z-index for non-modal dialogs, so that we at least win from all siblings of our
-      // parent stacking context
-      // padding reset so we don't get a weird dialog visual square showing up
-      wrappingDialogElement.style.cssText = `display:none; z-index: ${this.config.zIndex}; padding: 0;`;
-      // @ts-ignore - 'custom' is a valid extension of placementMode
-      if (this.config.placementMode === 'custom') {
-        // The user should have full freedom to control the content node, so its wrapper nodes should remain neutral.
-        wrappingDialogElement.style.cssText += `position: static;`;
-      }
-      this.__wrappingDialogNode = wrappingDialogElement;
+    const wrappingDialogElement = document.createElement('dialog');
+    // We use a dialog for its visual capabilities: it renders to the top layer.
+    // A11y will depend on the type of overlay and is arranged on contentNode level.
+    // Also see: https://www.scottohara.me/blog/2019/03/05/open-dialog.html
+    //
+    // The role="dialog" is set on the contentNode (or another role), so role="none"
+    // is valid here, although AXE complains about this setup.
+    // For now we need to add `ignoredRules: ['aria-allowed-role']` in your AXE tests.
+    // see: https://lion.js.org/fundamentals/systems/overlays/rationale/#considerations
+    wrappingDialogElement.setAttribute('role', 'none');
+    wrappingDialogElement.setAttribute('data-overlay-outer-wrapper', '');
+    // N.B. position: fixed is needed to escape out of 'overflow: hidden'
+    // We give a high z-index for non-modal dialogs, so that we at least win from all siblings of our
+    // parent stacking context
+    // padding reset so we don't get a weird dialog visual square showing up
+    wrappingDialogElement.style.cssText = `display:none; z-index: ${this.config.zIndex}; padding: 0;`;
+    this.__wrappingDialogNode = wrappingDialogElement;
 
-      /**
-       * Based on the configuration of the developer, multiple scenarios are accounted for
-       * A. We already have a contentWrapperNode ()
-       */
-      if (!this.config?.contentWrapperNode) {
-        this.__contentWrapperNode = document.createElement('div');
-      }
-      this.contentWrapperNode.setAttribute('data-id', 'content-wrapper');
-      // 'hack' that makes sure popperjs (that is applied one level lower) works correctly in deeply nested shadow roots
-      this.contentWrapperNode.style.transform = 'translateZ(0px)';
-
-      rearrangeNodes({
-        wrappingDialogNodeL1: wrappingDialogElement,
-        contentWrapperNodeL2: this.contentWrapperNode,
-        contentNodeL3: this.contentNode,
-      });
-      wrappingDialogElement.open = true;
+    /**
+     * Based on the configuration of the developer, multiple scenarios are accounted for
+     * A. We already have a contentWrapperNode ()
+     */
+    if (!this.config?.contentWrapperNode) {
+      this.__contentWrapperNode = document.createElement('div');
+    }
+    this.contentWrapperNode.setAttribute('data-id', 'content-wrapper');
+    // 'hack' that makes sure popperjs (that is applied one level lower) works correctly in deeply nested shadow roots
+    this.contentWrapperNode.style.transform = 'translateZ(0px)';
 
-      if (this.isTooltip) {
-        // needed to prevent tooltip getting focus in Safari and Firefox
-        wrappingDialogElement.setAttribute('tabindex', '-1');
-      }
-      this.contentWrapperNode.style.zIndex = '1';
-      if (getComputedStyle(this.contentNode).position === 'absolute') {
-        // Having a _contWrapperNode and a contentNode with 'position:absolute' results in
-        // computed height of 0...
-        this.contentNode.style.position = 'static';
-      }
+    rearrangeNodes({
+      wrappingDialogNodeL1: wrappingDialogElement,
+      contentWrapperNodeL2: this.contentWrapperNode,
+      contentNodeL3: this.contentNode,
+    });
+    wrappingDialogElement.open = true;
 
-      // Here we prevent any interference of the native <dialog> element with the keyboard behavior
-      // as defined by the OverlayController. This is needed until we can configure `closedby="none"`
-      // on the native dialog for all browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby
-      const hasClosedBySupport = HTMLDialogElement && 'closedBy' in HTMLDialogElement.prototype;
-      if (hasClosedBySupport) {
-        // @ts-ignore - closedBy is a newer property not in all TypeScript versions
-        wrappingDialogElement.closedBy = 'none';
-      } else {
-        wrappingDialogElement.addEventListener(
-          'keydown',
-          (/** @type {* & KeyboardEvent} */ event) => {
-            if (event.key === 'Escape') {
-              event.preventDefault();
-            }
-          },
-        );
-        wrappingDialogElement.addEventListener(
-          'keyup',
-          (/** @type {* & KeyboardEvent} */ event) => {
-            if (event.key === 'Escape') {
-              event.preventDefault();
-            }
-          },
-        );
-        wrappingDialogElement.addEventListener('cancel', event => {
-          event.stopPropagation();
-        });
-        wrappingDialogElement.addEventListener('close', event => {
-          event.stopPropagation();
-        });
-      }
-    } else {
-      // quick hack to make none-overlay flows work...
-      this.__contentWrapperNode = this.contentNode;
-      this.__wrappingDialogNode = this.contentNode;
+    if (this.isTooltip) {
+      // needed to prevent tooltip getting focus in Safari and Firefox
+      wrappingDialogElement.setAttribute('tabindex', '-1');
     }
 
     this.__wrappingDialogNode.style.display = 'none';
+    this.contentWrapperNode.style.zIndex = '1';
+
+    if (getComputedStyle(this.contentNode).position === 'absolute') {
+      // Having a _contWrapperNode and a contentNode with 'position:absolute' results in
+      // computed height of 0...
+      this.contentNode.style.position = 'static';
+    }
+
+    // Here we prevent any interference of the native <dialog> element with the keyboard behavior
+    // as defined by the OverlayController. This is needed until we can configure `closedby="none"`
+    // on the native dialog for all browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby
+    const hasClosedBySupport = HTMLDialogElement && 'closedBy' in HTMLDialogElement.prototype;
+    if (hasClosedBySupport) {
+      // @ts-expect-error
+      wrappingDialogElement.closedBy = 'none';
+    } else {
+      wrappingDialogElement.addEventListener(
+        'keydown',
+        (/** @type {* & KeyboardEvent} */ event) => {
+          if (event.key === 'Escape') {
+            event.preventDefault();
+          }
+        },
+      );
+      wrappingDialogElement.addEventListener('keyup', (/** @type {* & KeyboardEvent} */ event) => {
+        if (event.key === 'Escape') {
+          event.preventDefault();
+        }
+      });
+      wrappingDialogElement.addEventListener('cancel', event => {
+        event.stopPropagation();
+      });
+      wrappingDialogElement.addEventListener('close', event => {
+        event.stopPropagation();
+      });
+    }
   }
 
   /**
@@ -800,7 +742,6 @@ export class OverlayController extends EventTarget {
    * @private
    */
   __storeOriginalAttrs(node, attrs) {
-    /** @type {Record<string, string | null>} */
     const attrMap = {};
     attrs.forEach(attrName => {
       attrMap[attrName] = node.getAttribute(attrName);
@@ -870,11 +811,6 @@ export class OverlayController extends EventTarget {
         contentNode: this.contentNode,
       });
     }
-
-    if (this.config.focusContentOnOpen) {
-      this.contentNode.focus();
-    }
-
     /** @type {function} */
     (this._showResolve)();
   }
@@ -907,7 +843,6 @@ export class OverlayController extends EventTarget {
       await this.__createPopperInstance();
       this._popper.forceUpdate();
     }
-    // N.B. leave it up to the user if placementMode === 'custom'
   }
 
   /**
@@ -927,9 +862,6 @@ export class OverlayController extends EventTarget {
    * @event hide right after the overlay is hidden
    */
   async hide() {
-    // Function like a no-op for dynamic edge cases...
-    if (!this.config.isOpenable) return;
-
     this._hideComplete = new Promise(resolve => {
       this._hideResolve = resolve;
     });
@@ -1081,15 +1013,6 @@ export class OverlayController extends EventTarget {
     if (this.visibilityTriggerFunction) {
       this._handleVisibilityTriggers({ phase });
     }
-
-    if (phase === 'init' && this.config.focusContentOnOpen) {
-      this.contentNode?.setAttribute('tabindex', '-1');
-    }
-
-    if (phase === 'teardown' && this.config.focusContentOnOpen) {
-      // TODO: capture initial attr, use Resettable mechanism of VisibilityToggleCtrl in whole Controller
-      this.contentNode?.removeAttribute('tabindex');
-    }
   }
 
   /**
@@ -1263,9 +1186,7 @@ export class OverlayController extends EventTarget {
     if (phase === 'show') {
       this.#handleShiftKeyPress();
       this.#handleFocusInsideDialog();
-      // @ts-ignore - HTMLDialogElement methods
       this.__wrappingDialogNode?.close();
-      // @ts-ignore - HTMLDialogElement methods
       this.__wrappingDialogNode?.showModal();
       /**
        * At this moment `#handleFocusInsideDialog` should handle the focus.
@@ -1516,7 +1437,6 @@ export class OverlayController extends EventTarget {
   }
 
   teardown() {
-    if (!this.#hasSetup) return;
     this.__handleOverlayStyles({ phase: 'teardown' });
     if (this.isShown) {
       this._keepBodySize({ phase: 'teardown' });
@@ -1525,10 +1445,6 @@ export class OverlayController extends EventTarget {
     if (this.#isRegisteredOnManager()) {
       this.manager.remove(this);
     }
-
-    this.contentNode?.removeEventListener('click', this.#hideOnCloseButtonClick);
-
-    this.#hasSetup = false;
   }
 
   /** @private */