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

package/calendar-suites.js

@@ -0,0 +1 @@
+export { runCalendarSuite } from './components/calendar/test-suites/LionCalendar.suite.js';

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

@@ -298,7 +298,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
       this.__contentWrapperElement.addEventListener('click', this.__boundClickDateDelegation);
       this.__contentWrapperElement.addEventListener('focus', this.__boundFocusDateDelegation);
       this.__contentWrapperElement.addEventListener('blur', this.__boundBlurDateDelegation);
-      this.__contentWrapperElement.addEventListener('keydown', this.__boundKeyboardNavigationEvent);
+      this.__contentWrapperElement.addEventListener('keyup', this.__boundKeyboardNavigationEvent);
       this.__eventsAdded = true;
     }
   }
@@ -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/calendar/test/lion-calendar.test.js

@@ -4,8 +4,10 @@ import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 import { expect, fixture as _fixture } from '@open-wc/testing';
 import sinon from 'sinon';
 import '@lion/ui/define/lion-calendar.js';
+import { sendKeys } from '@web/test-runner-commands';
 import { isSameDate } from '@lion/ui/calendar.js';
 import { CalendarObject, DayObject } from '@lion/ui/calendar-test-helpers.js';
+import { runCalendarSuite } from '../test-suites/LionCalendar.suite.js';
 
 /**
  * @typedef {import('../src/LionCalendar.js').LionCalendar} LionCalendar
@@ -13,6 +15,16 @@ import { CalendarObject, DayObject } from '@lion/ui/calendar-test-helpers.js';
  */
 
 const fixture = /** @type {(arg: TemplateResult) => Promise<LionCalendar>} */ (_fixture);
+/**
+ * @param {HTMLElement} el
+ * @returns {HTMLElement | null | undefined}
+ */
+const getSelectedDateEl = el => el?.shadowRoot?.querySelector('.calendar__day-button[selected]');
+/**
+ * @param {HTMLElement} el
+ * @returns {void}
+ */
+const focusSelectedDate = el => getSelectedDateEl(el)?.focus();
 
 describe('<lion-calendar>', () => {
   const localizeManager = getLocalizeManager();
@@ -294,13 +306,14 @@ describe('<lion-calendar>', () => {
       `);
       const elObj = new CalendarObject(el);
 
-      el.__contentWrapperElement?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
+      focusSelectedDate(el);
+      await sendKeys({ press: 'ArrowLeft' });
       await el.updateComplete;
       expect(elObj.activeMonth).to.equal('October');
       expect(elObj.activeYear).to.equal('2000');
       expect(elObj.focusedDayObj?.monthday).to.equal(11);
 
-      el.__contentWrapperElement?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      await sendKeys({ press: 'Enter' });
       await el.updateComplete;
       expect(isSameDate(/** @type {Date} */ (el.selectedDate), new Date('2000/10/12'))).to.be.true;
       expect(dateChangedSpy.called).to.equal(false);
@@ -1120,16 +1133,14 @@ describe('<lion-calendar>', () => {
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
 
-          el.__contentWrapperElement?.dispatchEvent(
-            new KeyboardEvent('keydown', { key: 'PageUp' }),
-          );
+          focusSelectedDate(el);
+          await sendKeys({ press: 'PageUp' });
+
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('December');
           expect(elObj.activeYear).to.equal('2000');
 
-          el.__contentWrapperElement?.dispatchEvent(
-            new KeyboardEvent('keydown', { key: 'PageDown' }),
-          );
+          await sendKeys({ press: 'PageDown' });
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
@@ -1139,20 +1150,36 @@ describe('<lion-calendar>', () => {
           const el = await fixture(html`
             <lion-calendar .selectedDate="${new Date('2001/01/02')}"></lion-calendar>
           `);
+          focusSelectedDate(el);
+
           const elObj = new CalendarObject(el);
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
 
-          el.__contentWrapperElement?.dispatchEvent(
-            new KeyboardEvent('keydown', { key: 'PageDown', altKey: true }),
-          );
+          await sendKeys({
+            down: 'Alt',
+          });
+          await sendKeys({
+            press: 'PageDown',
+          });
+          await sendKeys({
+            up: 'Alt',
+          });
+
           await el.updateComplete;
+          focusSelectedDate(el);
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2002');
 
-          el.__contentWrapperElement?.dispatchEvent(
-            new KeyboardEvent('keydown', { key: 'PageUp', altKey: true }),
-          );
+          await sendKeys({
+            down: 'Alt',
+          });
+          await sendKeys({
+            press: 'PageUp',
+          });
+          await sendKeys({
+            up: 'Alt',
+          });
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
@@ -1165,9 +1192,8 @@ describe('<lion-calendar>', () => {
             `);
             const elObj = new CalendarObject(el);
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowDown' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowDown' });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(2 + 7);
           });
@@ -1178,9 +1204,8 @@ describe('<lion-calendar>', () => {
             `);
             const elObj = new CalendarObject(el);
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowUp' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowUp' });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(26); // of month before
           });
@@ -1192,9 +1217,8 @@ describe('<lion-calendar>', () => {
             `);
             const elObj = new CalendarObject(el);
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowLeft' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowLeft' });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(12 - 1);
           });
@@ -1206,9 +1230,8 @@ describe('<lion-calendar>', () => {
             `);
             const elObj = new CalendarObject(el);
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowRight' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowRight' });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(12 + 1);
           });
@@ -1224,9 +1247,8 @@ describe('<lion-calendar>', () => {
             `);
             const elObj = new CalendarObject(el);
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowRight' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowRight' });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(3);
           });
@@ -1238,9 +1260,8 @@ describe('<lion-calendar>', () => {
             const elObj = new CalendarObject(el);
             expect(elObj.centralDayObj?.weekdayNameShort).to.equal('Sat');
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowRight' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowRight' });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(6);
             expect(elObj.focusedDayObj?.weekdayNameShort).to.equal('Sun');
@@ -1253,9 +1274,8 @@ describe('<lion-calendar>', () => {
             const elObj = new CalendarObject(el);
             expect(elObj.centralDayObj?.weekdayNameShort).to.equal('Sun');
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowLeft' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowLeft' });
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(5);
             expect(elObj.focusedDayObj?.weekdayNameShort).to.equal('Sat');
@@ -1269,9 +1289,8 @@ describe('<lion-calendar>', () => {
             expect(elObj.activeMonth).to.equal('December');
             expect(elObj.activeYear).to.equal('2000');
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowRight' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowRight' });
             await el.updateComplete;
             expect(elObj.activeMonth).to.equal('January');
             expect(elObj.activeYear).to.equal('2001');
@@ -1286,9 +1305,8 @@ describe('<lion-calendar>', () => {
             expect(elObj.activeMonth).to.equal('January');
             expect(elObj.activeYear).to.equal('2001');
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowLeft' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowLeft' });
             await el.updateComplete;
             expect(elObj.activeMonth).to.equal('December');
             expect(elObj.activeYear).to.equal('2000');
@@ -1303,9 +1321,8 @@ describe('<lion-calendar>', () => {
             expect(elObj.activeMonth).to.equal('December');
             expect(elObj.activeYear).to.equal('2000');
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowDown' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowDown' });
             await el.updateComplete;
             expect(elObj.activeMonth).to.equal('January');
             expect(elObj.activeYear).to.equal('2001');
@@ -1320,9 +1337,8 @@ describe('<lion-calendar>', () => {
             expect(elObj.activeMonth).to.equal('January');
             expect(elObj.activeYear).to.equal('2001');
 
-            el.__contentWrapperElement?.dispatchEvent(
-              new KeyboardEvent('keydown', { key: 'ArrowUp' }),
-            );
+            focusSelectedDate(el);
+            await sendKeys({ press: 'ArrowUp' });
             await el.updateComplete;
             expect(elObj.activeMonth).to.equal('December');
             expect(elObj.activeYear).to.equal('2000');
@@ -1659,4 +1675,8 @@ describe('<lion-calendar>', () => {
       expect(el).not.to.be.displayed;
     });
   });
+
+  describe('Run suite', () => {
+    runCalendarSuite();
+  });
 });

package/components/calendar/test-suites/LionCalendar.suite.js

@@ -0,0 +1,79 @@
+import { LionCalendar } from '@lion/ui/calendar.js';
+import { expect, html, fixture, waitUntil, unsafeStatic, defineCE } from '@open-wc/testing';
+import sinon from 'sinon';
+import '@lion/ui/define/lion-calendar.js';
+import { sendKeys } from '@web/test-runner-commands';
+
+export function runCalendarSuite({ klass = LionCalendar } = {}) {
+  const tagStringCalendar = defineCE(class extends klass {});
+  const tagCalendar = unsafeStatic(tagStringCalendar);
+
+  it('should fire keyboard press events on keyup and not on keydown', async () => {
+    /**
+     * This test covers a corner case where `keydown`, `keyup`, and `focus` events happen across different elements.
+     *
+     * Setup:
+     * - There is a dialog invoker button that has a keyup handler.
+     * - The dialog invoker button gets focused (important!) and then opens the dialog on click.
+     * - The dialog contains lion-calendar.
+     * - When a date is selected, the dialog closes.
+     *
+     * Expected behavior:
+     * - The dialog invoker button's `keyup` handler should not run when a date is selected in the calendar.
+     *
+     * The problem:
+     * - Pressing Enter on a date is handled by `keydown` inside `lion-calendar`.
+     * - The dialog then closes on `user-selected-date-changed` event.
+     * - The browser automatically returns focus to the previously focused element (the dialog invoker button).
+     * - The keyup event then fires on the now-focused dialog invoker button, triggering its keyup
+     *     handler unexpectedly.
+     *
+     * Fix being verified:
+     * - Fire `user-selected-date-changed` on `keyup` instead of `keydown`.
+     * - This prevents the dialog invoker button from receiving and handling that `keyup` after the dialog closes.
+     */
+
+    /** @type {HTMLElement} */
+    let el;
+    const keyUpSpy = sinon.spy();
+    const getDialogEl = () => el.querySelector('dialog');
+    const openDialogButtonClickHandler = () => getDialogEl()?.showModal();
+    const userSelectedDateChangedHandler = () => getDialogEl()?.close();
+
+    el = await fixture(html`
+      <div>
+        <button 
+          @keyup="${keyUpSpy}" 
+          @click="${openDialogButtonClickHandler}"
+        >
+          Open Dialog
+        </button>
+        <dialog>
+          <${tagCalendar} 
+            .selectedDate="${new Date('2000/10/12')}" 
+            @user-selected-date-changed="${userSelectedDateChangedHandler}"
+          >
+          </${tagCalendar}>
+        </dialog>
+      </div>
+    `);
+
+    const openDialogButton = el.querySelector('button');
+    const calendarEl = /** @type {LionCalendar} */ (el.querySelector(tagStringCalendar));
+    await calendarEl?.updateComplete;
+
+    openDialogButton?.focus();
+    openDialogButton?.click();
+    /**
+     * @returns {HTMLElement | null | undefined}
+     */
+    const getSelectedDateEl = () =>
+      calendarEl?.shadowRoot?.querySelector('.calendar__day-button[selected]');
+    await waitUntil(getSelectedDateEl);
+    getSelectedDateEl()?.focus();
+    await sendKeys({ press: 'ArrowLeft' });
+    await sendKeys({ press: 'Enter' });
+
+    expect(keyUpSpy.called).to.equal(false);
+  });
+}

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/FormatMixin.js

@@ -2,9 +2,9 @@
 
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
-import { ValidateMixin } from './validate/ValidateMixin.js';
 import { FormControlMixin } from './FormControlMixin.js';
 import { Unparseable } from './validate/Unparseable.js';
+import { ValidateMixin } from './validate/ValidateMixin.js';
 
 /**
  * @typedef {import('../types/FormControlMixinTypes.js').ModelValueEventDetails} ModelValueEventDetails
@@ -89,7 +89,12 @@ const FormatMixinImplementation = superclass =>
     requestUpdate(name, oldValue, options) {
       super.requestUpdate(name, oldValue, options);
 
-      if (name === 'modelValue' && this.modelValue !== oldValue) {
+      const didModelValueChange = () =>
+        options?.hasChanged
+          ? options.hasChanged(this.modelValue, oldValue)
+          : this.modelValue !== oldValue;
+
+      if (name === 'modelValue' && didModelValueChange()) {
         this._onModelValueChanged({ modelValue: this.modelValue }, { modelValue: oldValue });
       }
       if (name === 'serializedValue' && this.serializedValue !== oldValue) {

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/FormatMixin.test.js

@@ -1,3 +1,6 @@
 import { runFormatMixinSuite } from '../test-suites/FormatMixin.suite.js';
 
-runFormatMixinSuite();
+runFormatMixinSuite({
+  tagString: null,
+  modelValueType: String,
+});

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;
   });