@lion/ui 0.20.0 → 0.21.1-menu-system.0

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

@@ -366,13 +366,16 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       `)
       );
       await OverlayController.popperModule;
+      // @ts-ignore [popper-instance-access-in-test]
       sinon.spy(el._overlayCtrl._popper, 'update');
       el.repositionOverlay();
+      // @ts-ignore [popper-instance-access-in-test]
       expect(el._overlayCtrl._popper.update).to.have.been.been.calledOnce;
 
       if (!el._overlayCtrl.isTooltip) {
         el.config = { ...el.config, placementMode: 'global' };
         el.repositionOverlay();
+        // @ts-ignore [popper-instance-access-in-test]
         expect(el._overlayCtrl._popper.update).to.have.been.been.calledOnce;
       }
     });
@@ -459,11 +462,11 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
 
       const dialogEl = /** @type {HTMLDialogElement} */ (el._overlayCtrl.__wrappingDialogNode);
 
-      // @ts-expect-error [allow-protected-in-tests]
+      // @ts-ignore [checkVisibility lives on the polyfilled dialog]
       expect(dialogEl.checkVisibility()).to.be.true;
       // @ts-expect-error [allow-protected-in-tests]
       await mimicEscapePress(el._overlayContentNode);
-      // @ts-expect-error [allow-protected-in-tests]
+      // @ts-ignore [checkVisibility lives on the polyfilled dialog]
       expect(dialogEl.checkVisibility()).to.be.true;
     });
 
@@ -537,13 +540,13 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       it('works with cache directive when reconnected', async () => {
         class CachingContext extends LitElement {
           static properties = {
-            switched: { type: Boolean },
+            showOverlay: { type: Boolean },
           };
 
           constructor() {
             super();
 
-            this.switched = false;
+            this.showOverlay = true;
           }
 
           get overlayEl() {
@@ -552,12 +555,12 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
 
           render() {
             return html`${cache(
-              this.switched
-                ? html`something else`
-                : html`<${tag} id="myOverlay">
+              this.showOverlay
+                ? html`<${tag} id="myOverlay">
               <div slot="content">content b</div>
               <button slot="invoker">invoker button b</button>
-            </${tag}>`,
+            </${tag}>`
+                : html`something else`,
             )}`;
           }
         }
@@ -578,7 +581,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         // @ts-expect-error [allow-protected] in tests
         const setupSpy = sinon.spy(el.overlayEl, '_setupOverlayCtrl');
 
-        el.switched = true;
+        el.showOverlay = false;
         // render the new content
         await el.updateComplete;
         // wait for the teardown to complete
@@ -588,7 +591,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         expect(teardownSpy.callCount).to.equal(1);
         expect(setupSpy.callCount).to.equal(0);
 
-        el.switched = false;
+        el.showOverlay = true;
         await el.updateComplete;
         expect(setupSpy.callCount).to.equal(1);
 

package/components/overlays/types/OverlayConfig.ts

@@ -21,7 +21,6 @@ export type OverlayPhase =
   | 'add'
   | 'remove';
 
-
 export interface ViewportConfig {
   placement: ViewportPlacement;
 }
@@ -97,14 +96,30 @@ 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.
+   */
+  elementToFocusOnShow?: 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).
+   */
+  isActivated?: boolean;
+
+  /**
+   * By default, an error is thrown when contentNode is not connected to the DOM.
+   * This allows to prepare nodes and later connect them to dom.
+   */
+  requireConnectedNodes?: boolean;
+
+  syncChildrenCloseState?: boolean;
 
+  _shouldTeardownDomStructure?: boolean;
+}

package/components/overlays/types/OverlayMixinTypes.ts

@@ -17,6 +17,8 @@ export interface DefineOverlayConfig {
 }
 
 export declare class OverlayHost {
+  static _getFocusableInvokerEl(focusableElOrWrapper: Element): Element | null;
+
   opened: Boolean;
   get config(): Partial<OverlayConfig>;
   set config(value: Partial<OverlayConfig>);

package/components/pagination/src/LionPagination.js

@@ -116,9 +116,11 @@ export class LionPagination extends LocalizeMixin(LitElement) {
     return this.__current || 0;
   }
 
+  /** @private */
+  __visiblePages;
+
   constructor() {
     super();
-    /** @private */
     this.__visiblePages = 5;
     this.current = 1;
     this.count = 0;

package/components/progress-indicator/src/LionProgressIndicator.js

@@ -90,7 +90,6 @@ export class LionProgressIndicator extends LocalizeMixin(LitElement) {
   }
 
   /**
-   * @readonly
    * @type {boolean}
    */
   get indeterminate() {

package/components/select/src/LionSelect.js

@@ -98,7 +98,9 @@ export class LionSelect extends LionFieldWithSelect {
     }
 
     if (changedProperties.has('autocomplete')) {
-      this._inputNode.autocomplete = /** @type {string} */ (this.autocomplete);
+      // the DOM lib types `autocomplete` as `AutoFill` only in newer TypeScript;
+      // cast keeps this valid on both compilers without widening the public type
+      this._inputNode.autocomplete = /** @type {any} */ (this.autocomplete);
     }
   }
 

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

@@ -28,6 +28,7 @@ function detectInteractionMode() {
 export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(LionListbox))) {
   static get scopedElements() {
     return {
+      // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
       ...super.scopedElements,
       'lion-select-invoker': LionSelectInvoker,
     };
@@ -91,7 +92,6 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    * @protected
    * @configure FocusMixin
    */
-  // @ts-ignore
   get _focusableNode() {
     return this._invokerNode;
   }
@@ -108,6 +108,9 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
     );
   }
 
+  /** @protected */
+  _arrowWidth;
+
   constructor() {
     super();
 
@@ -125,7 +128,6 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
     this.interactionMode = 'auto';
 
     this.singleOption = false;
-    /** @protected */
     this._arrowWidth = 28;
 
     /** @private */
@@ -428,6 +430,10 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
   _teardownOverlayCtrl() {
     super._teardownOverlayCtrl();
 
+    if (!this._overlayCtrl) {
+      return;
+    }
+
     this._overlayCtrl.removeEventListener('show', this.__overlayOnShow);
     this._overlayCtrl.removeEventListener('before-show', this.__overlayBeforeShow);
     this._overlayCtrl.removeEventListener('hide', this.__overlayOnHide);
@@ -499,6 +505,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
       return;
     }
 
+    // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; Lit reactive property: read through a typed local instead (e.g. const next = this.x ?? DEFAULT) - a class field would shadow the accessor Lit creates from static properties
     if (this.opened) {
       return;
     }

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

@@ -832,6 +832,7 @@ describe('lion-select-rich', () => {
         await waitUntil(isSelectRichRendered);
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
+        // @ts-ignore [dynamic-key-access-in-test]
         const optionBlue = /** @type { HTMLElement | undefined } */ (
           wrapperElementShadowRoot?.querySelectorAll('lion-option')
         )?.[1];
@@ -955,6 +956,7 @@ describe('lion-select-rich', () => {
         await waitUntil(isSelectRichRendered);
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
+        // @ts-ignore [dynamic-key-access-in-test]
         const optionBlue = /** @type { HTMLElement | undefined } */ (
           wrapperElementShadowRoot?.querySelectorAll('lion-option')
         )?.[1];
@@ -1082,6 +1084,7 @@ describe('lion-select-rich', () => {
         await waitUntil(isSelectRichRendered);
         getInvoker()?.click();
         await waitUntil(isDialogVisible);
+        // @ts-ignore [dynamic-key-access-in-test]
         const optionBlue = /** @type { HTMLElement | undefined } */ (
           wrapperElementShadowRoot?.querySelectorAll('lion-option')
         )?.[1];
@@ -1100,6 +1103,13 @@ describe('lion-select-rich', () => {
   });
 
   describe('Teardown', () => {
+    it('does not throw when tearing down before the overlay controller is set up', () => {
+      const el = /** @type {LionSelectRich} */ (document.createElement('lion-select-rich'));
+
+      // @ts-expect-error [allow-private] in tests
+      expect(() => el._teardownOverlayCtrl()).not.to.throw();
+    });
+
     it('correctly removes event listeners when disconnected from dom', async () => {
       const el = await fixture(html`
         <lion-select-rich label="age">

package/components/steps/src/LionSteps.js

@@ -50,7 +50,7 @@ export class LionSteps extends LitElement {
 
   constructor() {
     super();
-    /** @type {{[key: string]: ?}} */
+    /** @type {{[key: string]: any}} */
     this.data = {};
     this._internalCurrentSync = true; // necessary for preventing side effects on initialization
     /** @type {number} */

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

@@ -8,7 +8,7 @@ import '@lion/ui/define/lion-steps.js';
  * @typedef {import('../src/LionSteps.js').LionSteps} LionSteps
  * @typedef {import('../src/LionStep.js').LionStep} LionStep
  * @typedef {import('lit').TemplateResult} TemplateResult
- * @typedef {{[key: string]: ?}} UnknownData
+ * @typedef {{[key: string]: any}} UnknownData
  */
 
 const fixture = /** @type {(arg: TemplateResult) => Promise<LionSteps>} */ (_fixture);

package/components/switch/src/LionSwitch.js

@@ -24,6 +24,7 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
 
   static get scopedElements() {
     return {
+      // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
       ...super.scopedElements,
       'lion-switch-button': LionSwitchButton,
     };

package/components/switch/src/LionSwitchButton.js

@@ -73,6 +73,12 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
     `;
   }
 
+  /** @private */
+  __handleKeydown;
+
+  /** @private */
+  __handleKeyup;
+
   constructor() {
     super();
     // inputNode = this, which always requires a value prop
@@ -82,9 +88,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
     this.__initialized = false;
     /** @protected */
     this._toggleChecked = this._toggleChecked.bind(this);
-    /** @private */
     this.__handleKeydown = this._handleKeydown.bind(this);
-    /** @private */
     this.__handleKeyup = this._handleKeyup.bind(this);
   }
 

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

@@ -187,6 +187,7 @@ describe('lion-switch', () => {
         tagName,
         class CustomSwitch extends LionSwitch {
           static get validationTypes() {
+            // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
             return [...super.validationTypes, 'info'];
           }
 

package/components/textarea/src/LionTextarea.js

@@ -85,7 +85,9 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
     }
 
     if (changedProperties.has('autocomplete')) {
-      this._inputNode.autocomplete = /** @type {string} */ (this.autocomplete);
+      // the DOM lib types `autocomplete` as `AutoFill` only in newer TypeScript;
+      // cast keeps this valid on both compilers without widening the public type
+      this._inputNode.autocomplete = /** @type {any} */ (this.autocomplete);
     }
 
     if (changedProperties.has('disabled')) {