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

package/collapsible.js

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

package/components/button/src/LionButton.js

@@ -220,4 +220,8 @@ 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,6 +279,7 @@ 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('keyup', this.__boundKeyboardNavigationEvent);
+      this.__contentWrapperElement.addEventListener('keydown', this.__boundKeyboardNavigationEvent);
       this.__eventsAdded = true;
     }
   }
@@ -928,6 +928,7 @@ 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
@@ -935,6 +936,7 @@ 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,10 +4,8 @@ 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
@@ -15,16 +13,6 @@ import { runCalendarSuite } from '../test-suites/LionCalendar.suite.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();
@@ -306,14 +294,13 @@ describe('<lion-calendar>', () => {
       `);
       const elObj = new CalendarObject(el);
 
-      focusSelectedDate(el);
-      await sendKeys({ press: 'ArrowLeft' });
+      el.__contentWrapperElement?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
       await el.updateComplete;
       expect(elObj.activeMonth).to.equal('October');
       expect(elObj.activeYear).to.equal('2000');
       expect(elObj.focusedDayObj?.monthday).to.equal(11);
 
-      await sendKeys({ press: 'Enter' });
+      el.__contentWrapperElement?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
       await el.updateComplete;
       expect(isSameDate(/** @type {Date} */ (el.selectedDate), new Date('2000/10/12'))).to.be.true;
       expect(dateChangedSpy.called).to.equal(false);
@@ -1133,14 +1120,16 @@ describe('<lion-calendar>', () => {
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
 
-          focusSelectedDate(el);
-          await sendKeys({ press: 'PageUp' });
-
+          el.__contentWrapperElement?.dispatchEvent(
+            new KeyboardEvent('keydown', { key: 'PageUp' }),
+          );
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('December');
           expect(elObj.activeYear).to.equal('2000');
 
-          await sendKeys({ press: 'PageDown' });
+          el.__contentWrapperElement?.dispatchEvent(
+            new KeyboardEvent('keydown', { key: 'PageDown' }),
+          );
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
@@ -1150,36 +1139,20 @@ 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');
 
-          await sendKeys({
-            down: 'Alt',
-          });
-          await sendKeys({
-            press: 'PageDown',
-          });
-          await sendKeys({
-            up: 'Alt',
-          });
-
+          el.__contentWrapperElement?.dispatchEvent(
+            new KeyboardEvent('keydown', { key: 'PageDown', altKey: true }),
+          );
           await el.updateComplete;
-          focusSelectedDate(el);
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2002');
 
-          await sendKeys({
-            down: 'Alt',
-          });
-          await sendKeys({
-            press: 'PageUp',
-          });
-          await sendKeys({
-            up: 'Alt',
-          });
+          el.__contentWrapperElement?.dispatchEvent(
+            new KeyboardEvent('keydown', { key: 'PageUp', altKey: true }),
+          );
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
@@ -1192,8 +1165,9 @@ describe('<lion-calendar>', () => {
             `);
             const elObj = new CalendarObject(el);
 
-            focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowDown' });
+            el.__contentWrapperElement?.dispatchEvent(
+              new KeyboardEvent('keydown', { key: 'ArrowDown' }),
+            );
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(2 + 7);
           });
@@ -1204,8 +1178,9 @@ describe('<lion-calendar>', () => {
             `);
             const elObj = new CalendarObject(el);
 
-            focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowUp' });
+            el.__contentWrapperElement?.dispatchEvent(
+              new KeyboardEvent('keydown', { key: 'ArrowUp' }),
+            );
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(26); // of month before
           });
@@ -1217,8 +1192,9 @@ describe('<lion-calendar>', () => {
             `);
             const elObj = new CalendarObject(el);
 
-            focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowLeft' });
+            el.__contentWrapperElement?.dispatchEvent(
+              new KeyboardEvent('keydown', { key: 'ArrowLeft' }),
+            );
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(12 - 1);
           });
@@ -1230,8 +1206,9 @@ describe('<lion-calendar>', () => {
             `);
             const elObj = new CalendarObject(el);
 
-            focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowRight' });
+            el.__contentWrapperElement?.dispatchEvent(
+              new KeyboardEvent('keydown', { key: 'ArrowRight' }),
+            );
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(12 + 1);
           });
@@ -1247,8 +1224,9 @@ describe('<lion-calendar>', () => {
             `);
             const elObj = new CalendarObject(el);
 
-            focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowRight' });
+            el.__contentWrapperElement?.dispatchEvent(
+              new KeyboardEvent('keydown', { key: 'ArrowRight' }),
+            );
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(3);
           });
@@ -1260,8 +1238,9 @@ describe('<lion-calendar>', () => {
             const elObj = new CalendarObject(el);
             expect(elObj.centralDayObj?.weekdayNameShort).to.equal('Sat');
 
-            focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowRight' });
+            el.__contentWrapperElement?.dispatchEvent(
+              new KeyboardEvent('keydown', { key: 'ArrowRight' }),
+            );
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(6);
             expect(elObj.focusedDayObj?.weekdayNameShort).to.equal('Sun');
@@ -1274,8 +1253,9 @@ describe('<lion-calendar>', () => {
             const elObj = new CalendarObject(el);
             expect(elObj.centralDayObj?.weekdayNameShort).to.equal('Sun');
 
-            focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowLeft' });
+            el.__contentWrapperElement?.dispatchEvent(
+              new KeyboardEvent('keydown', { key: 'ArrowLeft' }),
+            );
             await el.updateComplete;
             expect(elObj.focusedDayObj?.monthday).to.equal(5);
             expect(elObj.focusedDayObj?.weekdayNameShort).to.equal('Sat');
@@ -1289,8 +1269,9 @@ describe('<lion-calendar>', () => {
             expect(elObj.activeMonth).to.equal('December');
             expect(elObj.activeYear).to.equal('2000');
 
-            focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowRight' });
+            el.__contentWrapperElement?.dispatchEvent(
+              new KeyboardEvent('keydown', { key: 'ArrowRight' }),
+            );
             await el.updateComplete;
             expect(elObj.activeMonth).to.equal('January');
             expect(elObj.activeYear).to.equal('2001');
@@ -1305,8 +1286,9 @@ describe('<lion-calendar>', () => {
             expect(elObj.activeMonth).to.equal('January');
             expect(elObj.activeYear).to.equal('2001');
 
-            focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowLeft' });
+            el.__contentWrapperElement?.dispatchEvent(
+              new KeyboardEvent('keydown', { key: 'ArrowLeft' }),
+            );
             await el.updateComplete;
             expect(elObj.activeMonth).to.equal('December');
             expect(elObj.activeYear).to.equal('2000');
@@ -1321,8 +1303,9 @@ describe('<lion-calendar>', () => {
             expect(elObj.activeMonth).to.equal('December');
             expect(elObj.activeYear).to.equal('2000');
 
-            focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowDown' });
+            el.__contentWrapperElement?.dispatchEvent(
+              new KeyboardEvent('keydown', { key: 'ArrowDown' }),
+            );
             await el.updateComplete;
             expect(elObj.activeMonth).to.equal('January');
             expect(elObj.activeYear).to.equal('2001');
@@ -1337,8 +1320,9 @@ describe('<lion-calendar>', () => {
             expect(elObj.activeMonth).to.equal('January');
             expect(elObj.activeYear).to.equal('2001');
 
-            focusSelectedDate(el);
-            await sendKeys({ press: 'ArrowUp' });
+            el.__contentWrapperElement?.dispatchEvent(
+              new KeyboardEvent('keydown', { key: 'ArrowUp' }),
+            );
             await el.updateComplete;
             expect(elObj.activeMonth).to.equal('December');
             expect(elObj.activeYear).to.equal('2000');
@@ -1675,8 +1659,4 @@ describe('<lion-calendar>', () => {
       expect(el).not.to.be.displayed;
     });
   });
-
-  describe('Run suite', () => {
-    runCalendarSuite();
-  });
 });

package/components/collapsible/src/DisclosureMixin.js

@@ -0,0 +1,313 @@
+/**
+ * @typedef {import('../types/DisclosureMixinTypes.js').DisclosureHost} DisclosureHost
+ * @typedef {import('../types/DisclosureMixinTypes.js').DisclosureMixin} DisclosureMixin
+ */
+
+// /**
+//  * @type {DisclosureMixin}
+//  */
+// const DisclosureMixinImplementation = superclass =>
+//   // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+//   class DisclosureMixin extends superclass {
+//     /** @type {any} */
+//     static get properties() {
+//       return {
+//         opened: { type: Boolean, reflect: true },
+//         handleFocus: { type: Boolean, attribute: 'handle-focus' },
+//         invokerInteraction: { type: String, attribute: 'invoker-interaction' },
+//       };
+//     }
+
+//     /**
+//      * @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 _invokerNode() {
+//       const ctor = this.constructor;
+//       if (!this.__invokerNode) {
+//         const slottedNode = Array.from(this.children).find(child => child.slot === 'invoker');
+//         if (slottedNode) {
+//           this.__invokerNode = ctor._getFocusableInvokerEl(slottedNode);
+//         } else {
+//           this.__invokerNode =
+//             this.previousElementSibling?.hasAttribute('data-invoker') &&
+//             ctor._getFocusableInvokerEl(this.previousElementSibling);
+//         }
+//       }
+//       return this.__invokerNode;
+//     }
+
+//     get _contentNode() {
+//       if (!this._cachedOverlayContentNode) {
+//         this._cachedOverlayContentNode = Array.from(this.children).find(
+//           child => child.slot === 'content',
+//         );
+//       }
+//       return this._cachedOverlayContentNode;
+//     }
+
+//     constructor() {
+//       super();
+//       this.opened = false;
+//       /**
+//        * @type {'click'|'hover'}
+//        */
+//       this.invokerInteraction = 'click';
+//       /**
+//        * Puts focus on `_contentNode` on open and on `_invokerNode` on close.
+//        * @type {Boolean}
+//        */
+//       this.handleFocus = false;
+//       this.__disclosureNeedsSetup = true;
+
+//       this.toggle = this.toggle.bind(this);
+//       this.open = this.open.bind(this);
+//       this.close = this.close.bind(this);
+
+//       this.__handleAnimateComplete = this.__handleAnimateComplete.bind(this);
+
+//       this.__onInvokerMouseenter = this.__onInvokerMouseenter.bind(this);
+//       this.__onContentMouseenter = this.__onContentMouseenter.bind(this);
+//       this.__onInvokerMouseleave = this.__onInvokerMouseleave.bind(this);
+//       this.__onContentMouseleave = this.__onContentMouseleave.bind(this);
+//     }
+
+//     connectedCallback() {
+//       super.connectedCallback();
+//       // we do a setup after every connectedCallback as firstUpdated will only be called once
+//       this.__disclosureNeedsSetup = true;
+//       this.updateComplete.then(() => {
+//         if (this.__disclosureNeedsSetup) {
+//           this._setupDisclosure();
+//         }
+//         this.__disclosureNeedsSetup = false;
+//       });
+//       this.__setupAnimation();
+//     }
+
+//     disconnectedCallback() {
+//       super.disconnectedCallback();
+//       this._teardownDisclosure();
+//       this.__teardownAnimation();
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     _setupDisclosure() {
+//       console.log('_setupDisclosure', this.level);
+
+//       this._setupOpenCloseListeners();
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     _teardownDisclosure() {
+//       this._teardownOpenCloseListeners();
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     _setupOpenCloseListeners() {
+//       console.log('setup listeners', this.level);
+//       if (!this._invokerNode) {
+//         return;
+//       }
+
+//       const interactions = this.invokerInteraction.split(' ');
+
+//       if (interactions.includes('hover')) {
+//         this._invokerNode.addEventListener('mouseenter', this.__onInvokerMouseenter);
+//         this._contentNode?.addEventListener('mouseenter', this.__onContentMouseenter);
+//         this._invokerNode.addEventListener('mouseleave', this.__onInvokerMouseleave);
+//         this._contentNode?.addEventListener('mouseleave', this.__onContentMouseleave);
+//       }
+//       if (interactions.includes('click')) {
+//         this._invokerNode.addEventListener('click', this.toggle);
+//       }
+//     }
+
+//     __onInvokerMouseenter() {
+//       this.__invokerHover = true;
+//       this.open();
+//     }
+
+//     __onContentMouseenter() {
+//       this.__contentHover = true;
+//       console.log('this.__contentHover', this.__contentHover);
+//       this.open();
+//     }
+
+//     __onInvokerMouseleave() {
+//       setTimeout(() => {
+//         if (!this.__contentHover) {
+//           this.close();
+//         }
+//       });
+//       this.__invokerHover = false;
+//     }
+
+//     __onContentMouseleave() {
+//       setTimeout(() => {
+//         if (!this.__invokerHover) {
+//           this.close();
+//         }
+//       });
+//       this.__contentHover = false;
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     _teardownOpenCloseListeners() {
+//       if (!this._invokerNode) {
+//         return;
+//       }
+
+//       this._invokerNode.removeEventListener('mouseenter', this.open);
+//       this._invokerNode.removeEventListener('mouseleave', this.close);
+//       this._contentNode?.removeEventListener('mouseenter', this.open);
+//       this._contentNode?.removeEventListener('mouseleave', this.close);
+
+//       // console.log(this, 'removetCLick');
+
+//       this._invokerNode.removeEventListener('click', this.toggle);
+//     }
+
+//     // TODO: fire event on updated?
+//     /**
+//      * @override
+//      * @param {string} name
+//      * @param {any} oldValue
+//      */
+//     requestUpdate(name, oldValue) {
+//       super.requestUpdate(name, oldValue);
+//       if (name === 'opened') {
+//         this.dispatchEvent(new Event('opened-changed'));
+//       }
+//     }
+
+//     /**
+//      * @param {import('lit-element').PropertyValues } changedProperties
+//      */
+//     updated(changedProperties) {
+//       super.updated(changedProperties);
+
+//       if (changedProperties.has('opened')) {
+//         this._onOpenedChanged();
+//       }
+//     }
+
+//     /**
+//      * @param {import('lit-element').PropertyValues } changedProperties
+//      */
+//     firstUpdated(changedProperties) {
+//       super.firstUpdated(changedProperties);
+//       this._onOpenedChanged();
+
+//       if (this.handleFocus && !this._contentNode?.hasAttribute('tabindex')) {
+//         this._contentNode?.setAttribute('tabindex', '-1');
+//       }
+//     }
+
+//     /**
+//      * @overridable
+//      */
+//     async _onOpenedChanged() {
+//       this._invokerNode.setAttribute('aria-expanded', `${this.opened}`);
+
+//       if (this.opened) {
+//         this._contentNode.style.setProperty('display', '');
+//         await this._showAnimation({ contentNode: this._contentNode });
+//         this._onDisclosureShow();
+//       } else {
+//         this._onDisclosureHide();
+//         await this._hideAnimation({ contentNode: this._contentNode });
+//         this._contentNode.style.setProperty('display', 'none');
+//       }
+//     }
+
+//     _onDisclosureShow() {
+//       // if (this.checkedIndex != null) {
+//       //   this.activeIndex = this.checkedIndex;
+//       // }
+
+//       if (this.handleFocus) {
+//         this._contentNode.focus();
+//       }
+//     }
+
+//     _onDisclosureHide() {
+//       if (this.handleFocus) {
+//         this._invokerNode.focus();
+//       }
+//     }
+
+//     /**
+//      * Show animation implementation in sub-classer.
+//      * @param {{ contentNode: HTMLElement; }} cfg
+//      */
+//     // eslint-disable-next-line class-methods-use-this, no-empty-function
+//     async _showAnimation(cfg) {
+//       this._refreshAnimateCompletePromise();
+//     }
+
+//     /**
+//      * Hide animation implementation in sub-classer.
+//      * @param {{ contentNode: HTMLElement; }} cfg
+//      */
+//     // eslint-disable-next-line class-methods-use-this, no-empty-function
+//     async _hideAnimation(cfg) {
+//       this._refreshAnimateCompletePromise();
+//     }
+
+//     _refreshAnimateCompletePromise() {
+//       this._animateComplete = new Promise(resolve => {
+//         // Note that when a lib like GSAP is used, neither 'transitionend' or 'animationend' will be called.
+//         // In such a case, a subclasser needs to resolve this pending promise by calling this method
+//         this._resolveAnimateComplete = resolve;
+//       });
+//     }
+
+//     __setupAnimation() {
+//       this._contentNode.addEventListener('transitionend', this.__handleAnimateComplete);
+//       this._contentNode.addEventListener('animationend', this.__handleAnimateComplete);
+//     }
+
+//     __teardownAnimation() {
+//       this._contentNode.removeEventListener('transitionend', this.__handleAnimateComplete);
+//       this._contentNode.removeEventListener('animationend', this.__handleAnimateComplete);
+//     }
+
+//     __handleAnimateComplete() {
+//       if (typeof this._resolveAnimateComplete === 'function') {
+//         this._resolveAnimateComplete();
+//       }
+//     }
+
+//     toggle() {
+//       // console.log('toggul', this);
+//       this.opened = !this.opened;
+//     }
+
+//     open() {
+//       this.opened = true;
+//     }
+
+//     close() {
+//       this.opened = false;
+//     }
+//   };
+// export const DisclosureMixin = dedupeMixin(DisclosureMixinImplementation);

package/components/collapsible/test-suites/DisclosureMixin.suite.js

@@ -0,0 +1,30 @@
+// import { LitElement } from 'lit';
+// import { expect, html, fixture as _fixture, unsafeStatic, defineCE } from '@open-wc/testing';
+// import { DisclosureMixin } from '../src/DisclosureMixin.js';
+
+// import '@lion/ui/define/lion-menu.js';
+// import '@lion/ui/define/lion-item.js';
+
+// class DisclosureClass extends DisclosureMixin(LitElement) {}
+
+// /**
+//  * @typedef {import('lit').TemplateResult} TemplateResult
+//  */
+
+// const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ (_fixture);
+
+// /**
+//  * @param { {tagString?:string, itemTagString?:string} } [customConfig]
+//  */
+// export function runDisclosureMixinSuite(customConfig = {}) {
+//   const cfg = {
+//     tagString: 'lion-menu',
+//     ...customConfig,
+//   };
+
+//   const tagString = cfg.tagString || defineCE(DisclosureClass);
+//   const tag = unsafeStatic(tagString);
+
+//   describe('DisclosureMixin', () => {
+//   });
+// }