chore(calendar-beta): PR changes part 1

Author: MattCheely

packages/genesys-spark-components/src/components/beta/gux-calendar-beta/gux-calendar.tsx

@@ -4,7 +4,6 @@ import {
   forceUpdate,
   h,
   JSX,
-  Listen,
   Method,
   Prop,
   State
@@ -63,9 +62,12 @@ export class GuxCalendar {
   @State()
   private maxValue: Temporal.PlainDate | null;
 
-  @Listen('guxdayselected')
-  onDaySelected(event: CustomEvent<string>) {
-    const selectedDate = Temporal.PlainDate.from(event.detail);
+  detectDayClick(event: MouseEvent) {
+    if (!((event.target as HTMLElement).tagName === 'GUX-DAY-BETA')) {
+      return;
+    }
+    const dayElement = event.target as HTMLGuxDayBetaElement;
+    const selectedDate = Temporal.PlainDate.from(dayElement.day);
     this.selectDate(selectedDate);
     event.stopPropagation();
   }
@@ -311,7 +313,10 @@ export class GuxCalendar {
 
   private renderContent(): JSX.Element {
     return (
-      <div onKeyDown={e => void this.onKeyDown(e)}>
+      <div
+        onKeyDown={e => void this.onKeyDown(e)}
+        onClick={e => void this.detectDayClick(e)}
+      >
         <div class="gux-content">
           <div class="gux-week-days">
             {getWeekdays(this.locale, this.startDayOfWeek).map(

packages/genesys-spark-components/src/components/beta/gux-day/gux-day.tsx

@@ -1,14 +1,4 @@
-import {
-  Component,
-  Element,
-  Event,
-  EventEmitter,
-  h,
-  JSX,
-  Prop,
-  State,
-  Watch
-} from '@stencil/core';
+import { Component, Element, h, JSX, Prop, State, Watch } from '@stencil/core';
 import { getDesiredLocale } from 'i18n';
 import * as sparkIntl from '../../../genesys-spark-utils/intl';
 import { Temporal } from '@js-temporal/polyfill';
@@ -41,9 +31,6 @@ export class GuxDay {
     this.readDateFromProp();
   }
 
-  @Event({ eventName: 'guxdayselected' })
-  daySelected: EventEmitter<string>;
-
   /* Formatter for displaying the numeric day of the month */
   dayFormatter: Intl.DateTimeFormat;
 
@@ -61,7 +48,6 @@ export class GuxDay {
   async connectedCallback(): Promise<void> {
     this.readDateFromProp();
     const locale = getDesiredLocale(this.root);
-    this.dayFormatter = sparkIntl.dateTimeFormat(locale, { day: 'numeric' });
     this.readerFormatter = sparkIntl.dateTimeFormat(locale, {
       year: 'numeric',
       month: 'long',
@@ -71,7 +57,7 @@ export class GuxDay {
 
   render(): JSX.Element {
     return (
-      <button onClick={() => this.daySelected.emit(this.day)} type="button">
+      <button type="button">
         <slot>
           <span aria-hidden="true">{this.date.day}</span>
           <span class="gux-sr-only">

packages/genesys-spark-components/src/utils/date/temporal.ts

@@ -25,5 +25,10 @@ export function formatPlainDate(
   formatDate.setFullYear(date.year);
   formatDate.setMonth(date.month - 1);
   formatDate.setDate(date.day);
+  formatDate.setHours(12);
+  formatDate.setMinutes(0);
+  formatDate.setSeconds(0);
+  formatDate.setMilliseconds(0);
+
   return formatter.format(formatDate);
 }