refactor: minor update

README.md

@@ -98,7 +98,7 @@ The following snippet shows a simple script used in the demo to load polyfills v
 
   if (!window.Intl) {
     var wa = document.createElement('script');
-    /** FIXME: Pin package version due to https://github.com/andyearnshaw/Intl.js/issues/256 */
+    /** NOTE: Pin package version due to https://github.com/andyearnshaw/Intl.js/issues/256 */
     wa.src = 'https://unpkg.com/intl@1.2.4/dist/Intl.complete.js';
     wa.onload = function onLoad() { console.info('🌐 Intl polyfill loaded'); };
     wa.onerror = console.error;

src/__tests__/helpers/dispatch-custom-event.test.ts

@@ -11,13 +11,9 @@ describe(dispatchCustomEvent.name, () => {
     [undefined, null],
     [
       {
-        isKeypress: true,
-        key: 'Enter',
         year: 2020,
       },
       {
-        isKeypress: true,
-        key: 'Enter',
         year: 2020,
       },
     ],

src/__tests__/month-calendar/app-month-calendar.test.ts

@@ -243,9 +243,11 @@ describe(appMonthCalendarName, () => {
         );
         expect(newSelectedDate?.fullDate).deep.equal(calendarInit.date);
 
+        const isKeypress = testEventType === 'keydown';
         const expectedDateUpdatedEvent: DateUpdatedEvent = {
-          isKeypress: testEventType === 'keydown',
+          isKeypress,
           value: new Date('2020-02-09'),
+          ...(isKeypress && { key: testKeyPayloads[0].down }),
         };
 
         expect(dateUpdatedEvent).deep.equal(expectedDateUpdatedEvent);

src/__tests__/year-grid/app-year-grid.test.ts

@@ -137,8 +137,6 @@ describe(appYearGridName, () => {
         ]);
         const expectedYearUpdatedEvent: YearUpdatedEvent = {
           year: data.max.getUTCFullYear(),
-          isKeypress: testEventType.startsWith('key'),
-          key: testKey,
         };
 
         expect(yearGridButtonAttrsList).deep.equal([

src/date-picker/date-picker.ts

@@ -384,14 +384,10 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
     detail: { value },
   }: CustomEvent<ValueUpdatedEvent>): void {
     this.#updateSelectedAndCurrentDate(value);
-
-    // TODO: To fire value update event
   }
 
   #updateStartView(): void {
-    const isYearGrid = this.startView === 'yearGrid';
-
-    this.startView = isYearGrid ? 'calendar' : 'yearGrid';
+    this.startView = this.startView === 'yearGrid' ? 'calendar' : 'yearGrid';
   }
 
   #updateYear({

src/month-calendar/month-calendar.ts

@@ -288,10 +288,12 @@ export class MonthCalendar extends LitElement implements MonthCalendarProperties
 
     if (newSelectedDate == null) return;
 
+    const isKeypress = Boolean(key);
+
     dispatchCustomEvent(this, 'date-updated', {
-      isKeypress: Boolean(key),
-      key,
+      isKeypress,
       value: new Date(newSelectedDate),
+      ...(isKeypress && { key }),
     });
   };
 }

src/typings.ts

@@ -68,7 +68,10 @@ export interface ValueUpdatedEvent extends KeyEvent {
   value: string;
 }
 
-export interface YearUpdatedEvent extends KeyEvent {
+/**
+ * NOTE: No `KeyEvent` is needed as native `button` element will dispatch `click` event on keypress.
+ */
+export interface YearUpdatedEvent {
   year: number;
 }
 

src/year-grid/year-grid.ts

@@ -10,7 +10,7 @@ import { toClosestTarget } from '../helpers/to-closest-target.js';
 import { toResolvedDate } from '../helpers/to-resolved-date.js';
 import { toYearList } from '../helpers/to-year-list.js';
 import { baseStyling, resetButton, resetShadowRoot } from '../stylings.js';
-import type { Formatters, InferredFromSet, SupportedKey } from '../typings.js';
+import type { Formatters, InferredFromSet } from '../typings.js';
 import { yearGridStyling } from './stylings.js';
 import { toNextSelectedYear } from './to-next-selected-year.js';
 import type { YearGridChangedProperties, YearGridData, YearGridProperties, YearGridRenderButtonInit } from './typings.js';
@@ -110,10 +110,10 @@ export class YearGrid extends LitElement implements YearGridProperties {
     `;
   }
 
-  #updateYear = (event: MouseEvent | KeyboardEvent): void => {
+  #updateYear = (event: KeyboardEvent): void => {
     if (event.type === 'keydown') {
       const key =
-        (event as KeyboardEvent).key as InferredFromSet<typeof navigationKeySetGrid>;
+        event.key as InferredFromSet<typeof navigationKeySetGrid>;
 
       if (!navigationKeySetGrid.has(key)) return;
 
@@ -147,14 +147,11 @@ export class YearGrid extends LitElement implements YearGridProperties {
       /** Do nothing when not tapping on the year button */
       if (selectedYearStr == null) return;
 
-      const key = (event as KeyboardEvent).key as SupportedKey;
       const year = Number(selectedYearStr);
 
       this.$focusingYear = year;
 
       dispatchCustomEvent(this, 'year-updated', {
-        isKeypress: Boolean(key),
-        key,
         year,
       });
     }