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

package/components/form-core/src/validate/validators/NumberValidators.js

@@ -16,7 +16,7 @@ export class IsNumber extends Validator {
   }
 
   /**
-   * @param {?} value
+   * @param {any} value
    */
   // eslint-disable-next-line class-methods-use-this
   execute(value) {
@@ -34,7 +34,7 @@ export class MinNumber extends Validator {
   }
 
   /**
-   * @param {?} value
+   * @param {any} value
    */
   execute(value, min = this.param) {
     let isEnabled = false;
@@ -51,7 +51,7 @@ export class MaxNumber extends Validator {
   }
 
   /**
-   * @param {?} value
+   * @param {any} value
    */
   execute(value, max = this.param) {
     let isEnabled = false;
@@ -68,7 +68,7 @@ export class MinMaxNumber extends Validator {
   }
 
   /**
-   * @param {?} value
+   * @param {any} value
    */
   execute(value, { min = 0, max = 0 } = this.param) {
     let isEnabled = false;

package/components/form-core/src/validate/validators/Required.js

@@ -45,9 +45,10 @@ export class Required extends Validator {
   /**
    * @param {FormControlHost & HTMLElement} formControl
    */
-  // @ts-ignore [allow-protected] we are allowed to know FormControl protected props in form-core
   // eslint-disable-next-line class-methods-use-this
-  onFormControlConnect({ _inputNode: inputNode }) {
+  onFormControlConnect(formControl) {
+    // @ts-ignore [allow-protected] we are allowed to know FormControl protected props in form-core
+    const inputNode = formControl._inputNode;
     if (inputNode) {
       const role = inputNode.getAttribute('role') || '';
       const elementTagName = inputNode.tagName.toLowerCase();
@@ -61,9 +62,10 @@ export class Required extends Validator {
   /**
    * @param {FormControlHost & HTMLElement} formControl
    */
-  // @ts-ignore [allow-protected] we are allowed to know FormControl protected props in form-core
   // eslint-disable-next-line class-methods-use-this
-  onFormControlDisconnect({ _inputNode: inputNode }) {
+  onFormControlDisconnect(formControl) {
+    // @ts-ignore [allow-protected] we are allowed to know FormControl protected props in form-core
+    const inputNode = formControl._inputNode;
     if (inputNode) {
       inputNode.removeAttribute('aria-required');
     }

package/components/form-core/src/validate/validators/StringValidators.js

@@ -2,7 +2,7 @@
 import { Validator } from '../Validator.js';
 
 /**
- * @param {?} value
+ * @param {any} value
  */
 const isString = value => typeof value === 'string';
 
@@ -12,7 +12,7 @@ export class IsString extends Validator {
   }
 
   /**
-   * @param {?} value
+   * @param {any} value
    */
   // eslint-disable-next-line class-methods-use-this
   execute(value) {
@@ -30,7 +30,7 @@ export class EqualsLength extends Validator {
   }
 
   /**
-   * @param {?} value
+   * @param {any} value
    */
   execute(value, length = this.param) {
     let hasError = false;
@@ -47,7 +47,7 @@ export class MinLength extends Validator {
   }
 
   /**
-   * @param {?} value
+   * @param {any} value
    */
   execute(value, min = this.param) {
     let hasError = false;
@@ -64,7 +64,7 @@ export class MaxLength extends Validator {
   }
 
   /**
-   * @param {?} value
+   * @param {any} value
    */
   execute(value, max = this.param) {
     let hasError = false;
@@ -81,7 +81,7 @@ export class MinMaxLength extends Validator {
   }
 
   /**
-   * @param {?} value
+   * @param {any} value
    */
   execute(value, { min = 0, max = 0 } = this.param) {
     let hasError = false;
@@ -100,7 +100,7 @@ export class IsEmail extends Validator {
   }
 
   /**
-   * @param {?} value
+   * @param {any} value
    */
   // eslint-disable-next-line class-methods-use-this
   execute(value) {
@@ -113,7 +113,7 @@ export class IsEmail extends Validator {
 }
 
 /**
- * @param {?} value
+ * @param {any} value
  * @param {RegExp} pattern
  */
 const hasPattern = (value, pattern) => pattern.test(value);
@@ -123,7 +123,7 @@ export class Pattern extends Validator {
   }
 
   /**
-   * @param {?} value
+   * @param {any} value
    */
   // eslint-disable-next-line class-methods-use-this
   execute(value, pattern = this.param) {

package/components/form-core/test/FocusMixin.test.js

@@ -28,8 +28,10 @@ function mockFocusVisible(focusableEl, { phase, hasKeyboardInteraction }) {
   const originalMatches = focusableEl.matches;
   if (typeof windowWithOptionalPolyfill.applyFocusVisiblePolyfill !== 'function') {
     // eslint-disable-next-line no-param-reassign
-    focusableEl.matches = selector =>
-      selector === ':focus-visible' || originalMatches.call(focusableEl, selector);
+    focusableEl.matches = /** @type {typeof focusableEl.matches} */ (
+      /** @param {string} selector */
+      selector => selector === ':focus-visible' || originalMatches.call(focusableEl, selector)
+    );
     return () => {
       // eslint-disable-next-line no-param-reassign
       focusableEl.matches = originalMatches;

package/components/form-core/test/FormControlMixin.test.js

@@ -153,6 +153,7 @@ describe('FormControlMixin', () => {
         el.shadowRoot?.querySelector('.form-field__label'),
       );
       Object.entries(expectedValues).forEach(([key, val]) => {
+        // @ts-ignore [dynamic-property-access]
         expect(labelStyle[key]).to.equal(val);
       });
     });

package/components/form-core/test/validate/Validator.test.js

@@ -108,7 +108,7 @@ describe('Validator', () => {
       }
 
       /**
-       * @param {Object.<string,?>} _data
+       * @param {Object.<string,any>} _data
        */
       static async getMessage(_data) {
         data = _data;
@@ -191,7 +191,9 @@ 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 [dynamic-key-access-in-test]
     expect(myValidator.constructor['_$isValidator$']).to.exist;
+    // @ts-ignore [dynamic-key-access-in-test]
     expect(myValidator.constructor['_$isValidator$']).to.be.true;
   });
 

package/components/form-core/test-helpers/mimicUserInput.js

@@ -1,7 +1,7 @@
 // @ts-nocheck
 /**
  * @param {HTMLElement} formControl
- * @param {?} newViewValue
+ * @param {any} newViewValue
  * @param {{caretIndex?:number}} config
  */
 export function mimicUserInput(formControl, newViewValue, { caretIndex } = {}) {

package/components/form-core/test-suites/FormatMixin.suite.js

@@ -279,9 +279,9 @@ export function runFormatMixinSuite(customConfig) {
       const nonFormat = /** @type {FormatClass} */ (
         await fixture(html`
           <${tag}
-            .formatter="${/** @param {?} v */ v => v}"
+            .formatter="${/** @param {any} v */ v => v}"
             .parser="${/** @param {string} v */ v => v}"
-            .serializer="${/** @param {?} v */ v => v}"
+            .serializer="${/** @param {any} v */ v => v}"
             .deserializer="${/** @param {string} v */ v => v}"
           >
             <input slot="input">
@@ -594,9 +594,9 @@ export function runFormatMixinSuite(customConfig) {
           const formatterSpy = sinon.spy(value => `foo: ${value}`);
 
           const generatedModelValue = generateValueBasedOnType();
-          /** @type {?} */
+          /** @type {any} */
           const generatedViewValue = generateValueBasedOnType({ viewValue: true });
-          /** @type {?} */
+          /** @type {any} */
           const generatedViewValueAlt = generateValueBasedOnType({
             viewValue: true,
             toggleValue: true,
@@ -800,7 +800,7 @@ export function runFormatMixinSuite(customConfig) {
 
       describe('Parser', () => {
         it('only calls the parser for defined values', async () => {
-          /** @type {?} */
+          /** @type {any} */
           const generatedValue = generateValueBasedOnType();
           const parserSpy = sinon.spy();
           const el = /** @type {FormatClass} */ (

package/components/form-core/test-suites/ValidateMixin.suite.js

@@ -829,6 +829,7 @@ export function runValidateMixinSuite(customConfig) {
       const withSuccessTagString = defineCE(
         class extends ValidateMixin(LitElement) {
           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, 'success'];
           }
         },
@@ -1306,6 +1307,7 @@ export function runValidateMixinSuite(customConfig) {
       const customTypeTagString = defineCE(
         class extends ValidateMixin(LitElement) {
           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, 'x', 'y'];
           }
         },
@@ -1423,6 +1425,7 @@ export function runValidateMixinSuite(customConfig) {
         it('can add helpers for validation types', async () => {
           class ValidateHasX extends ValidateMixin(LitElement) {
             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, 'x'];
             }
 
@@ -1472,12 +1475,13 @@ export function runValidateMixinSuite(customConfig) {
           const elTagString = defineCE(
             class extends ValidateMixin(LitElement) {
               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, 'x'];
               }
 
               /**
                * @param {string} name
-               * @param {?} oldValue
+               * @param {any} oldValue
                */
               updateSync(name, oldValue) {
                 super.updateSync(name, oldValue);
@@ -1554,11 +1558,13 @@ export function runValidateMixinSuite(customConfig) {
           // eslint-disable-next-line no-restricted-syntax
           for (const state of ['dirty', 'touched', 'prefilled', 'submitted']) {
             counter += 1;
+            // @ts-ignore [dynamic-key-access-in-test]
             el[state] = false;
             // eslint-disable-next-line no-await-in-loop
             await el.updateComplete;
             expect(spy.callCount).to.equal(counter);
             counter += 1;
+            // @ts-ignore [dynamic-key-access-in-test]
             el[state] = true;
             // eslint-disable-next-line no-await-in-loop
             await el.updateComplete;

package/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.js

@@ -43,7 +43,7 @@ export function runValidateMixinFeedbackPart() {
       }
 
       /**
-       * @param {?} modelValue
+       * @param {any} modelValue
        */
       execute(modelValue) {
         const hasError = !modelValue.includes('a');
@@ -57,7 +57,7 @@ export function runValidateMixinFeedbackPart() {
       }
 
       /**
-       * @param {?} modelValue
+       * @param {any} modelValue
        */
       execute(modelValue) {
         const hasError = !modelValue.includes('cat');
@@ -96,6 +96,7 @@ export function runValidateMixinFeedbackPart() {
     it('reflects .showsFeedbackFor as attribute joined with "," to be used as a style hook', async () => {
       class ValidateElementCustomTypes extends ValidateMixin(LitElement) {
         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, 'x'];
         }
       }
@@ -714,6 +715,7 @@ export function runValidateMixinFeedbackPart() {
             const results = {
               'a-string-instead-of-bool': 'Msg based on enum output',
             };
+            // @ts-ignore [dynamic-key-access-in-test]
             return results[/** @type {string} */ (outcome)];
           }
         }

package/components/form-core/test-suites/form-group/FormGroupMixin-input.suite.js

@@ -47,7 +47,7 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
 
   describe('FormGroupMixin with LionField', () => {
     it('serializes undefined values as "" (nb radios/checkboxes are always serialized)', async () => {
-      const fieldset = /**  @type {FormGroup} */ (
+      const fieldset = /**  @type {InstanceType<typeof FormGroup>} */ (
         await fixture(html`
         <${tag}>
           <${childTag} name="custom[]"></${childTag}>
@@ -81,7 +81,7 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
       childAriaFixture = async (
         msgSlotType = 'feedback', // eslint-disable-line no-shadow
       ) => {
-        const dom = /**  @type {FormGroup} */ (
+        const dom = /**  @type {InstanceType<typeof FormGroup>} */ (
           await fixture(html`
         <${tag} name="l1_g">
           <${childTag} name="l1_fa">
@@ -123,17 +123,29 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
 
       childAriaTest = async (
         // eslint-disable-next-line no-shadow
-        /** @type {FormGroup} */ childAriaFixture,
+        /** @type {InstanceType<typeof FormGroup>} */ childAriaFixture,
         { cleanupPhase = false } = {},
       ) => {
         /* eslint-disable camelcase */
         // Message elements: all elements pointed at by inputs
-        const msg_l1_g = /** @type {FormGroup} */ (childAriaFixture.querySelector('#msg_l1_g'));
-        const msg_l1_fa = /** @type {FormChild} */ (childAriaFixture.querySelector('#msg_l1_fa'));
-        const msg_l1_fb = /** @type {FormChild} */ (childAriaFixture.querySelector('#msg_l1_fb'));
-        const msg_l2_g = /** @type {FormGroup} */ (childAriaFixture.querySelector('#msg_l2_g'));
-        const msg_l2_fa = /** @type {FormChild} */ (childAriaFixture.querySelector('#msg_l2_fa'));
-        const msg_l2_fb = /** @type {FormChild} */ (childAriaFixture.querySelector('#msg_l2_fb'));
+        const msg_l1_g = /** @type {InstanceType<typeof FormGroup>} */ (
+          childAriaFixture.querySelector('#msg_l1_g')
+        );
+        const msg_l1_fa = /** @type {InstanceType<typeof FormChild>} */ (
+          childAriaFixture.querySelector('#msg_l1_fa')
+        );
+        const msg_l1_fb = /** @type {InstanceType<typeof FormChild>} */ (
+          childAriaFixture.querySelector('#msg_l1_fb')
+        );
+        const msg_l2_g = /** @type {InstanceType<typeof FormGroup>} */ (
+          childAriaFixture.querySelector('#msg_l2_g')
+        );
+        const msg_l2_fa = /** @type {InstanceType<typeof FormChild>} */ (
+          childAriaFixture.querySelector('#msg_l2_fa')
+        );
+        const msg_l2_fb = /** @type {InstanceType<typeof FormChild>} */ (
+          childAriaFixture.querySelector('#msg_l2_fb')
+        );
 
         // Field elements: all inputs pointing to message elements
         const input_l1_fa = /** @type {HTMLInputElement} */ (
@@ -253,7 +265,9 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
           );
 
           // Check cleanup of FormGroup on disconnect
-          const l2_g = /** @type {FormGroup} */ (childAriaFixture.querySelector('[name=l2_g]'));
+          const l2_g = /** @type {InstanceType<typeof FormGroup>} */ (
+            childAriaFixture.querySelector('[name=l2_g]')
+          );
           // @ts-ignore [allow-private] in test
           expect(l2_g.__descriptionElementsInParentChain.size).to.not.equal(0);
           // @ts-expect-error removeChild should always be inherited via LitElement?

package/components/form-core/test-suites/form-group/FormGroupMixin.suite.js

@@ -807,7 +807,7 @@ export function runFormGroupMixinSuite(cfg = {}) {
             return 'Input1IsTen';
           }
 
-          /** @param {?} value */
+          /** @param {any} value */
           execute(value) {
             const hasError = value.input1 !== 10;
             return hasError;
@@ -863,7 +863,7 @@ export function runFormGroupMixinSuite(cfg = {}) {
         const fieldset = /**  @type {FormGroup} */ (
           await fixture(html`<${tag}>${inputSlots}</${tag}>`)
         );
-        fieldset.formElements['hobbies[]'][0].serializer = /** @param {?} v */ v =>
+        fieldset.formElements['hobbies[]'][0].serializer = /** @param {any} v */ v =>
           `${v.value}-serialized`;
         fieldset.formElements['hobbies[]'][0].modelValue = { checked: false, value: 'Bar' };
         fieldset.formElements['hobbies[]'][1].modelValue = { checked: false, value: 'rugby' };

package/components/form-core/types/choice-group/ChoiceGroupMixinTypes.ts

@@ -6,10 +6,8 @@ import { InteractionStateHost } from '../InteractionStateMixinTypes.js';
 import { FormRegistrarHost } from '../registration/FormRegistrarMixinTypes.js';
 import { ChoiceInputHost } from './ChoiceInputMixinTypes.js';
 
-export declare class ChoiceGroupHost {
+export declare class ChoiceGroupHost extends FormControlHost {
   multipleChoice: boolean;
-  get modelValue(): any;
-  set modelValue(value: any);
   get serializedValue(): string;
   set serializedValue(value: string);
   get formattedValue(): string;

package/components/form-core/types/choice-group/CustomChoiceGroupMixinTypes.ts

@@ -3,14 +3,8 @@ import { LitElement } from 'lit';
 
 import { ChoiceGroupHost } from './ChoiceGroupMixinTypes.js';
 
-export declare class CustomChoiceGroupHost {
+export declare class CustomChoiceGroupHost extends ChoiceGroupHost {
   allowCustomChoice: boolean;
-  get modelValue(): any;
-  set modelValue(value: any);
-  get serializedValue(): string;
-  set serializedValue(value: string);
-  get formattedValue(): string;
-  set formattedValue(value: string);
 
   clear(): void;
   parser(value: string | string[]): string | string[];

package/components/form-core/types/validate/ValidateMixinTypes.ts

@@ -92,7 +92,8 @@ export declare class ValidateHost {
    * ```
    */
   defaultValidators: Validator[];
-  fieldName: string;
+  get fieldName(): string;
+  set fieldName(arg: string);
   validateComplete: Promise<void>;
   feedbackComplete: Promise<void>;
 

package/components/form-integrations/test/form-validation-integrations.test.js

@@ -18,8 +18,8 @@ describe('Form Validation Integrations', () => {
       class WarnValidator extends Validator {
         /**
          *
-         * @param {?} [param]
-         * @param {Object.<string,?>} [config]
+         * @param {any} [param]
+         * @param {Object.<string,any>} [config]
          */
         constructor(param, config) {
           super(param, config);

package/components/form-integrations/test/model-value-event.test.js

@@ -96,7 +96,7 @@ describe('model value event', () => {
   });
 
   describe('signature', () => {
-    /** @type {?} */
+    /** @type {any} */
     let e;
     beforeEach(async () => {
       const spy = sinon.spy();

package/components/helpers/src/sortEachDepth.js

@@ -15,7 +15,7 @@
  * @param {Array.<[]>} orderPerDepth array of arrays giving the order of each level
  */
 export function sortEachDepth(orderPerDepth) {
-  return (/** @type {Array.<?>} */ a, /** @type {Array.<?>} */ b) => {
+  return (/** @type {Array.<any>} */ a, /** @type {Array.<any>} */ b) => {
     // If the two stories have the same story kind, then use the default
     // ordering, which is the order they are defined in the story file.
     if (a[1].kind === b[1].kind) {
@@ -28,7 +28,7 @@ export function sortEachDepth(orderPerDepth) {
     let nameB;
     let indexA;
     let indexB;
-    /** @type {Array.<?>} */
+    /** @type {Array.<any>} */
     let ordering = orderPerDepth[0] || [];
     if (ordering.indexOf('...') !== -1 && ordering.indexOf('...abc') !== -1) {
       throw new Error(

package/components/icon/src/IconManager.js

@@ -1,11 +1,13 @@
 /**
- * @typedef {import('lit-html').nothing} nothing
+ * @typedef {typeof import('lit').nothing} nothing
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
 
 export class IconManager {
+  /** @private */
+  __iconResolvers;
+
   constructor() {
-    /** @private */
     this.__iconResolvers = new Map();
   }
 

package/components/icon/src/LionIcon.js

@@ -8,7 +8,7 @@ import { icons } from './icons.js';
  */
 
 /**
- * @param {?} wrappedSvgObject
+ * @param {any} wrappedSvgObject
  */
 function unwrapSvg(wrappedSvgObject) {
   const svgObject =
@@ -17,7 +17,7 @@ function unwrapSvg(wrappedSvgObject) {
 }
 
 /**
- * @param {TemplateResult|nothing} svg
+ * @param {TemplateResult|typeof import('lit').nothing} svg
  */
 function validateSvg(svg) {
   if (!(svg === nothing || isTemplateResult(svg))) {
@@ -93,14 +93,16 @@ export class LionIcon extends LitElement {
     ];
   }
 
+  /**
+   * @private
+   * @type {TemplateResult|typeof nothing|TagFunction}
+   */
+  __svg;
+
   constructor() {
     super();
     this.ariaLabel = '';
     this.iconId = '';
-    /**
-     * @private
-     * @type {TemplateResult|nothing|TagFunction}
-     */
     this.__svg = nothing;
   }
 
@@ -136,7 +138,7 @@ export class LionIcon extends LitElement {
   /**
    * On IE11, svgs without focusable false appear in the tab order
    * so make sure to have <svg focusable="false"> in svg files
-   * @param {TemplateResult|nothing|TagFunction} svg
+   * @param {TemplateResult|typeof nothing|TagFunction} svg
    */
   set svg(svg) {
     this.__svg = svg;
@@ -148,7 +150,7 @@ export class LionIcon extends LitElement {
   }
 
   /**
-   * @type {TemplateResult|nothing|TagFunction}
+   * @type {TemplateResult|typeof nothing|TagFunction}
    */
   get svg() {
     return this.__svg;
@@ -165,7 +167,7 @@ export class LionIcon extends LitElement {
   }
 
   /**
-   * @param {TemplateResult | nothing} svgObject
+   * @param {TemplateResult | typeof nothing} svgObject
    * @protected
    */
   _renderSvg(svgObject) {

package/components/icon/test/IconManager.test.js

@@ -31,7 +31,7 @@ describe('IconManager', () => {
     /**
      * @param {string} iconset
      * @param {string} icon
-     * @return {TemplateResult | Promise<TemplateResult> | nothing | Promise<nothing>}
+     * @return {TemplateResult | Promise<TemplateResult> | typeof nothing | Promise<typeof nothing>}
      */
     // eslint-disable-next-line no-unused-vars
     const resolver = (iconset, icon) => nothing;

package/components/input/src/LionInput.js

@@ -103,7 +103,9 @@ export class LionInput extends NativeTextFieldMixin(LionField) {
     }
 
     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);
     }
   }