@lion/ui 0.4.0-prerelease-bypass-export-map.0 → 0.4.0

package/components/accordion/src/LionAccordion.js

@@ -10,6 +10,7 @@ import { uuid } from '@lion/ui/core.js';
  * @property {HTMLElement} content content node
  * @property {(event: Event) => unknown} clickHandler executed on click event
  * @property {(event: Event) => unknown} keydownHandler executed on keydown event
+ * @property {(event: Event) => unknown} focusHandler executed on focusin event
  */
 
 /**
@@ -197,6 +198,7 @@ export class LionAccordion extends LitElement {
         content,
         clickHandler: this.__createInvokerClickHandler(index),
         keydownHandler: this.__handleInvokerKeydown.bind(this),
+        focusHandler: this.__createInvokerFocusHandler(index),
       };
       this._setupContent(entry);
       this._setupInvoker(entry);
@@ -248,6 +250,19 @@ export class LionAccordion extends LitElement {
     };
   }
 
+  /**
+   * @param {number} index
+   * @private
+   */
+  __createInvokerFocusHandler(index) {
+    return () => {
+      if (index === this.focusedIndex) {
+        return;
+      }
+      this.focusedIndex = index;
+    };
+  }
+
   /**
    * @param {Event} e
    * @private
@@ -304,7 +319,7 @@ export class LionAccordion extends LitElement {
    * @protected
    */
   _setupInvoker(entry) {
-    const { invoker, uid, index, clickHandler, keydownHandler } = entry;
+    const { invoker, uid, index, clickHandler, keydownHandler, focusHandler } = entry;
     invoker.style.setProperty('order', `${index + 1}`);
     const firstChild = invoker.firstElementChild;
     if (firstChild) {
@@ -312,6 +327,7 @@ export class LionAccordion extends LitElement {
       firstChild.setAttribute('aria-controls', `content-${uid}`);
       firstChild.addEventListener('click', clickHandler);
       firstChild.addEventListener('keydown', keydownHandler);
+      firstChild.addEventListener('focusin', focusHandler);
     }
   }
 
@@ -320,13 +336,14 @@ export class LionAccordion extends LitElement {
    * @protected
    */
   _cleanInvoker(entry) {
-    const { invoker, clickHandler, keydownHandler } = entry;
+    const { invoker, clickHandler, keydownHandler, focusHandler } = entry;
     const firstChild = invoker.firstElementChild;
     if (firstChild) {
       firstChild.removeAttribute('id');
       firstChild.removeAttribute('aria-controls');
       firstChild.removeEventListener('click', clickHandler);
       firstChild.removeEventListener('keydown', keydownHandler);
+      firstChild.removeEventListener('focusin', focusHandler);
     }
   }
 
@@ -424,7 +441,7 @@ export class LionAccordion extends LitElement {
    * @private
    */
   __toggleExpanded(value) {
-    const { expanded } = this;
+    const expanded = [...this.expanded];
     const index = expanded.indexOf(value);
 
     if (index === -1) {

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

@@ -80,6 +80,14 @@ describe('<lion-accordion>', () => {
       ).to.equal('invoker 1');
     });
 
+    it('updates expanded with a new array when an invoker is clicked', async () => {
+      const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
+      const invokers = getInvokers(el);
+      const oldExpanded = el.expanded;
+      invokers[1].firstElementChild?.dispatchEvent(new Event('click'));
+      expect(el.expanded).to.not.equal(oldExpanded);
+    });
+
     it('has [expanded] on current expanded invoker which serves as styling hook', async () => {
       const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
       const invokers = getInvokers(el);
@@ -213,6 +221,17 @@ describe('<lion-accordion>', () => {
       el.focusedIndex = 1;
       expect(spy).to.have.been.calledOnce;
     });
+
+    it('tabbing sets the focusedIndex correctly', async () => {
+      const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
+      const invokers = getInvokers(el);
+      el.focusedIndex = 0;
+      expect(el.focusedIndex).to.equal(0);
+      invokers[2].firstElementChild?.dispatchEvent(new Event('focusin'));
+      expect(el.focusedIndex).to.equal(2);
+      invokers[1].firstElementChild?.dispatchEvent(new Event('focusin'));
+      expect(el.focusedIndex).to.equal(1);
+    });
   });
 
   describe('Accordion Contents (slot=content)', () => {

package/components/calendar/src/LionCalendar.js

@@ -250,7 +250,10 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
   }
 
   focusCentralDate() {
-    const button = /** @type {HTMLElement} */ (this.shadowRoot?.querySelector('[tabindex="0"]'));
+    const datesTable = /** @type {HTMLElement} */ (
+      this.shadowRoot?.querySelector('#js-content-wrapper')
+    );
+    const button = /** @type {HTMLElement} */ (datesTable.querySelector('[tabindex="0"]'));
     button.focus();
     this.__focusedDate = this.centralDate;
   }
@@ -835,7 +838,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
    * @private
    */
   __dayButtonSelection(el) {
-    if (isDayButton(el)) {
+    if (isDayButton(el) && !isDisabledDayButton(el)) {
       this.__dateSelectedByUser(el.date);
     }
   }

package/components/calendar/src/utils/createMonth.js

@@ -13,7 +13,6 @@ export function createMonth(date, { firstDayOfWeek = 0 } = {}) {
   }
   const firstDayOfMonth = new Date(date);
   firstDayOfMonth.setDate(1);
-  const monthNumber = firstDayOfMonth.getMonth();
   const weekOptions = { firstDayOfWeek };
 
   const month = {
@@ -27,7 +26,7 @@ export function createMonth(date, { firstDayOfWeek = 0 } = {}) {
     const firstDayOfNextWeek = new Date(nextWeek.days[6].date); // last day of current week
     firstDayOfNextWeek.setDate(firstDayOfNextWeek.getDate() + 1); // make it first day of next week
     nextWeek = createWeek(firstDayOfNextWeek, weekOptions);
-  } while (nextWeek.days[0].date.getMonth() === monthNumber);
+  } while (month.weeks.length !== 6);
 
   return month;
 }

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

@@ -221,7 +221,7 @@ describe('<lion-calendar>', () => {
       expect(isSameDate(el.centralDate, new Date('2019/06/15'))).to.be.true;
     });
 
-    it('sends event "user-selected-date-changed" when user selects a date', async () => {
+    it('sends event "user-selected-date-changed" when user selects a date via mouse', async () => {
       const dateChangedSpy = sinon.spy();
       const el = await fixture(html`
         <lion-calendar
@@ -239,7 +239,7 @@ describe('<lion-calendar>', () => {
       ).to.equal(true);
     });
 
-    it('doesn\'t send event "user-selected-date-changed" when user selects a disabled date', async () => {
+    it('doesn\'t send event "user-selected-date-changed" when user selects a disabled date via mouse', async () => {
       const dateChangedSpy = sinon.spy();
       const disable15th = /** @param {Date} d */ d => d.getDate() === 15;
       const el = await fixture(html`
@@ -253,6 +253,57 @@ describe('<lion-calendar>', () => {
       elObj.getDayEl(15).click();
       await el.updateComplete;
       expect(dateChangedSpy.called).to.equal(false);
+      expect(isSameDate(/** @type {Date} */ (el.selectedDate), new Date('2000/12/12'))).to.be.true;
+    });
+
+    it.skip('sends event "user-selected-date-changed" when user selects a date via [Enter]', async () => {
+      /**
+       * TODO fix me
+       * The dispatchEvent of [Enter] should has to be on contentWrapperElement to be called
+       * But to get "selected" a check is done if the action comes from a button.
+       */
+      const dateChangedSpy = sinon.spy();
+      const el = await fixture(html`
+        <lion-calendar
+          .selectedDate="${new Date('2000/10/12')}"
+          @user-selected-date-changed="${dateChangedSpy}"
+        ></lion-calendar>
+      `);
+      const elObj = new CalendarObject(el);
+
+      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);
+
+      el.__contentWrapperElement?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      await el.updateComplete;
+      expect(isSameDate(/** @type {Date} */ (el.selectedDate), new Date('2000/10/11'))).to.be.true;
+      expect(dateChangedSpy.called).to.equal(true);
+    });
+
+    it('doesn\'t send event "user-selected-date-changed" when user selects a disabled date via [Enter]', async () => {
+      const dateChangedSpy = sinon.spy();
+      const el = await fixture(html`
+        <lion-calendar
+          .selectedDate="${new Date('2000/10/12')}"
+          .minDate="${new Date('2000/10/12')}"
+          @user-selected-date-changed="${dateChangedSpy}"
+        ></lion-calendar>
+      `);
+      const elObj = new CalendarObject(el);
+
+      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);
+
+      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);
     });
 
     it('exposes focusedDate getter', async () => {
@@ -1280,11 +1331,25 @@ describe('<lion-calendar>', () => {
         expect(previousMonthDayObjs[2].cellIndex).to.equal(2);
         expect(previousMonthDayObjs[2].monthday).to.equal(31);
 
-        expect(nextMonthDayObjs.length).to.equal(2);
+        expect(nextMonthDayObjs.length).to.equal(9);
         expect(nextMonthDayObjs[0].cellIndex).to.equal(5);
         expect(nextMonthDayObjs[0].monthday).to.equal(1);
         expect(nextMonthDayObjs[1].cellIndex).to.equal(6);
         expect(nextMonthDayObjs[1].monthday).to.equal(2);
+        expect(nextMonthDayObjs[2].cellIndex).to.equal(0);
+        expect(nextMonthDayObjs[2].monthday).to.equal(3);
+        expect(nextMonthDayObjs[3].cellIndex).to.equal(1);
+        expect(nextMonthDayObjs[3].monthday).to.equal(4);
+        expect(nextMonthDayObjs[4].cellIndex).to.equal(2);
+        expect(nextMonthDayObjs[4].monthday).to.equal(5);
+        expect(nextMonthDayObjs[5].cellIndex).to.equal(3);
+        expect(nextMonthDayObjs[5].monthday).to.equal(6);
+        expect(nextMonthDayObjs[6].cellIndex).to.equal(4);
+        expect(nextMonthDayObjs[6].monthday).to.equal(7);
+        expect(nextMonthDayObjs[7].cellIndex).to.equal(5);
+        expect(nextMonthDayObjs[7].monthday).to.equal(8);
+        expect(nextMonthDayObjs[8].cellIndex).to.equal(6);
+        expect(nextMonthDayObjs[8].monthday).to.equal(9);
       });
 
       it('renders days for next months in the last month of the year', async () => {
@@ -1294,11 +1359,25 @@ describe('<lion-calendar>', () => {
           `),
         );
         const { nextMonthDayObjs } = elObj;
-        expect(nextMonthDayObjs.length).to.equal(2);
+        expect(nextMonthDayObjs.length).to.equal(9);
         expect(nextMonthDayObjs[0].cellIndex).to.equal(5);
         expect(nextMonthDayObjs[0].monthday).to.equal(1);
         expect(nextMonthDayObjs[1].cellIndex).to.equal(6);
         expect(nextMonthDayObjs[1].monthday).to.equal(2);
+        expect(nextMonthDayObjs[2].cellIndex).to.equal(0);
+        expect(nextMonthDayObjs[2].monthday).to.equal(3);
+        expect(nextMonthDayObjs[3].cellIndex).to.equal(1);
+        expect(nextMonthDayObjs[3].monthday).to.equal(4);
+        expect(nextMonthDayObjs[4].cellIndex).to.equal(2);
+        expect(nextMonthDayObjs[4].monthday).to.equal(5);
+        expect(nextMonthDayObjs[5].cellIndex).to.equal(3);
+        expect(nextMonthDayObjs[5].monthday).to.equal(6);
+        expect(nextMonthDayObjs[6].cellIndex).to.equal(4);
+        expect(nextMonthDayObjs[6].monthday).to.equal(7);
+        expect(nextMonthDayObjs[7].cellIndex).to.equal(5);
+        expect(nextMonthDayObjs[7].monthday).to.equal(8);
+        expect(nextMonthDayObjs[8].cellIndex).to.equal(6);
+        expect(nextMonthDayObjs[8].monthday).to.equal(9);
       });
 
       it('renders days for previous months in the first month of the year', async () => {

package/components/calendar/test/utils/createMonth.test.js

@@ -46,4 +46,19 @@ describe('createMonth', () => {
       }),
     );
   });
+
+  it('creates exactly 6 weeks in every months', () => {
+    expect(compareMonth(createMonth(new Date('2026/02/12')))).to.deep.equal(
+      compareMonth({
+        weeks: [
+          createWeek(new Date('2026/02/01'), { firstDayOfWeek: 0 }),
+          createWeek(new Date('2026/02/08'), { firstDayOfWeek: 0 }),
+          createWeek(new Date('2026/02/15'), { firstDayOfWeek: 0 }),
+          createWeek(new Date('2026/02/22'), { firstDayOfWeek: 0 }),
+          createWeek(new Date('2026/03/01'), { firstDayOfWeek: 0 }),
+          createWeek(new Date('2026/03/08'), { firstDayOfWeek: 0 }),
+        ],
+      }),
+    );
+  });
 });

package/components/form-core/src/form-group/FormGroupMixin.js

@@ -584,6 +584,13 @@ const FormGroupMixinImplementation = superclass =>
       }
       this.__unlinkParentMessages(el);
     }
+
+    /**
+     * @override FormControlMixin
+     */
+    _isEmpty() {
+      return this.formElements.every(el => el._isEmpty?.());
+    }
   };
 
 export const FormGroupMixin = dedupeMixin(FormGroupMixinImplementation);