fix(calendar-beta): Remove slotted days, as it was causing flickering

Author: MattCheely

packages/genesys-spark-components/src/components/beta/gux-calendar-beta/example.html

@@ -5,25 +5,6 @@ <h2>Single Date Selection</h2>
   <input type="date" value="2023-05-19" />
 </gux-calendar-beta>
 
-<h2>Customized Date Styles</h2>
-<style>
-  .my-custom-day:not([gux-selected]) {
-    background: red;
-  }
-
-  .my-custom-day:focus-within {
-    outline-color: green;
-  }
-</style>
-<gux-calendar-beta oninput="notify(event)">
-  <input type="date" value="2023-05-19" min="2023-05-10" />
-  <gux-day-beta
-    slot="2023-05-15"
-    day="2023-05-15"
-    class="my-custom-day"
-  ></gux-day-beta>
-</gux-calendar-beta>
-
 <h2>Empty Date Selection</h2>
 <gux-calendar-beta oninput="notify(event)">
   <input type="date" />
@@ -38,20 +19,20 @@ <h2>Start day of week</h2>
 <div class="container">
   <div class="item">
     <h3>Monday</h3>
-    <gux-calendar-beta oninput="notify(event)">
-      <input type="date" value="2023-07-28" start-day-of-week="1" />
+    <gux-calendar-beta start-day-of-week="1" oninput="notify(event)">
+      <input type="date" value="2023-07-28" />
     </gux-calendar-beta>
   </div>
   <div class="item">
     <h3>Saturday</h3>
-    <gux-calendar-beta oninput="notify(event)">
-      <input type="date" value="2023-07-28" start-day-of-week="6" />
+    <gux-calendar-beta start-day-of-week="6" oninput="notify(event)">
+      <input type="date" value="2023-07-28" />
     </gux-calendar-beta>
   </div>
   <div class="item">
     <h3>Sunday</h3>
-    <gux-calendar-beta oninput="notify(event)">
-      <input type="date" value="2023-07-28" start-day-of-week="7" />
+    <gux-calendar-beta start-day-of-week="7" oninput="notify(event)">
+      <input type="date" value="2023-07-28" />
     </gux-calendar-beta>
   </div>
 </div>

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

@@ -1,4 +1,14 @@
-import { Component, Element, h, JSX, Listen, State } from '@stencil/core';
+import {
+  Component,
+  Element,
+  forceUpdate,
+  h,
+  JSX,
+  Listen,
+  Method,
+  Prop,
+  State
+} from '@stencil/core';
 import { IWeekElement, GuxCalendarDayOfWeek } from './gux-calendar.types';
 import {
   getWeekdays,
@@ -27,6 +37,17 @@ export class GuxCalendar {
   @Element()
   root: HTMLElement;
 
+  // The start day of the week based on user's locale
+  // Some locales will have the start day of the week be different than others
+  @Prop()
+  startDayOfWeek: GuxCalendarDayOfWeek;
+
+  @Method()
+  async guxForceUpdate(): Promise<void> {
+    this.readSlottedInputState();
+    forceUpdate(this.root);
+  }
+
   /**
    * The date that receives focus when selecting a specific day. This also
    * determines what month is currently displayed. The corresponding element
@@ -56,14 +77,21 @@ export class GuxCalendar {
   // Total number of dates that will display for each month in the calendar
   private MONTH_DATE_COUNT: number = 42;
 
-  // Keeps track of the start day of the week based on user's locale
-  // Some locales will have the start day of the week be different than others
-  private startDayOfWeek: GuxCalendarDayOfWeek;
-
   private get slottedInput(): HTMLInputElement {
     return this.root.querySelector('input[type="date"]');
   }
 
+  private readSlottedInputState(): void {
+    // Set min value from the "min" input prop
+    if (this.slottedInput.min) {
+      this.minValue = Temporal.PlainDate.from(this.slottedInput.min);
+    }
+    // Set max value from the "max" input prop
+    if (this.slottedInput.max) {
+      this.maxValue = Temporal.PlainDate.from(this.slottedInput.max);
+    }
+  }
+
   async componentWillLoad(): Promise<void> {
     if (!this.slottedInput) {
       logError(
@@ -75,13 +103,6 @@ export class GuxCalendar {
     this.locale = getDesiredLocale(this.root);
 
     // Set start day of week
-    const startDayOfWeek = this.slottedInput.getAttribute('start-day-of-week');
-    if (startDayOfWeek?.length) {
-      this.startDayOfWeek = parseInt(
-        startDayOfWeek,
-        10
-      ) as GuxCalendarDayOfWeek;
-    }
     this.startDayOfWeek = this.startDayOfWeek || getFirstDayOfWeek(this.locale);
 
     this.i18n = await buildI18nForComponent(this.root, translationResources);
@@ -91,71 +112,29 @@ export class GuxCalendar {
       this.focusDate = selectedDate;
     }
 
-    // Set min value from the "min" input prop
-    if (this.slottedInput.min) {
-      this.minValue = Temporal.PlainDate.from(this.slottedInput.min);
-    }
-    // Set max value from the "max" input prop
-    if (this.slottedInput.max) {
-      this.maxValue = Temporal.PlainDate.from(this.slottedInput.max);
-    }
-  }
-
-  async componentDidRender() {
-    // Because the selection state may be set on slotted attributes, we have
-    // to update it after rendering.
-    this.renderDateSelection();
+    this.readSlottedInputState();
   }
 
   /**
    * Finds the `gux-day` element corresponding to the provided
-   * date string, whether rendered by this component or slotted.
+   * date string.
    * @param dateStr The date to find in ISO format
    */
   private getGuxDayForDate(dateStr: string): HTMLElement | null {
-    return (
-      this.root.shadowRoot
-        // Find the slot for the date
-        .querySelector<HTMLSlotElement>(`slot[name="${dateStr}"]`)
-        // Get the first of the rendered items for that slot
-        ?.assignedNodes({ flatten: true })[0] as HTMLElement
-    );
+    return this.root.shadowRoot.querySelector(`.day-${dateStr}`);
   }
 
   private selectDate(date: Temporal.PlainDate): void {
     if (this.isInvalidDate(date)) {
       return;
     }
-    const oldDateStr = this.slottedInput.value;
     const newDateStr = date.toString();
     this.focusDate = date;
     this.slottedInput.value = newDateStr;
 
-    afterNextRenderTimeout(() => {
-      this.renderDateSelection(oldDateStr);
-    });
-
     simulateNativeEvent(this.root, 'input');
   }
 
-  /**
-   * Clears the `gux-selected` attribute on the old element and add it
-   * to the new element. This enables styling of the selected state in
-   * the gux-day element in a way that can be used by slotted elements.
-   */
-  private renderDateSelection(oldDateStr?: string): void {
-    const selectedDate = this.getSelectedDate();
-    if (oldDateStr) {
-      const oldSelectedElement = this.getGuxDayForDate(oldDateStr);
-      oldSelectedElement?.removeAttribute('gux-selected');
-    }
-
-    if (selectedDate) {
-      const newSelectedElement = this.getGuxDayForDate(selectedDate.toString());
-      newSelectedElement?.setAttribute('gux-selected', '');
-    }
-  }
-
   /**
    * Shifts the focused date by the provided interval
    * @param interval A Temporal-compatible interval definition
@@ -347,20 +326,16 @@ export class GuxCalendar {
                     {week.dates.map(day => {
                       const isoDateStr = day.date.toString();
                       return (
-                        <gux-focus-proxy
+                        <gux-day-beta
+                          day={isoDateStr}
                           aria-current={day.selected ? 'true' : 'false'}
                           aria-disabled={day.disabled ? 'true' : 'false'}
                           tabindex={day.selected || day.focused ? '0' : '-1'}
-                        >
-                          <slot key={isoDateStr} name={isoDateStr}>
-                            <gux-day-beta
-                              day={isoDateStr}
-                              class={{
-                                'gux-muted': !day.inCurrentMonth || day.disabled
-                              }}
-                            ></gux-day-beta>
-                          </slot>
-                        </gux-focus-proxy>
+                          class={`
+                            ${!day.inCurrentMonth || day.disabled ? 'gux-muted' : ''}
+                            day-${isoDateStr}  
+                          `}
+                        ></gux-day-beta>
                       ) as JSX.Element;
                     })}
                   </div>
@@ -375,7 +350,11 @@ export class GuxCalendar {
   render(): JSX.Element {
     return (
       <div class="gux-calendar-beta">
-        <slot />
+        <slot
+          onSlotchange={() => {
+            this.readSlottedInputState();
+          }}
+        />
         {this.renderHeader()}
         {this.renderContent()}
       </div>

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

@@ -26,7 +26,7 @@
   border-radius: var(--gse-ui-calendarMenu-month-focusBorderRadius);
 }
 
-:host([gux-selected]) {
+:host([aria-current='true']) {
   color: var(--gse-ui-calendarMenu-date-selected-foregroundColor);
   background-color: var(--gse-ui-calendarMenu-date-selected-backgroundColor);
 }

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

@@ -15,9 +15,8 @@ import { Temporal } from '@js-temporal/polyfill';
 import { formatPlainDate } from '@utils/date/temporal';
 
 /**
- * The gux-day component is how we render a day within an calendar. Custom-styled
- * instances can be slotted in to exiting calendars by users of Spark, but it
- * should not be used stand-alone.
+ * The gux-day component is how we render a day within an calendar. It should
+ * not be used stand-alone.
  */
 @Component({
   styleUrl: 'gux-day.scss',
@@ -74,9 +73,7 @@ export class GuxDay {
     return (
       <button onClick={() => this.daySelected.emit(this.day)} type="button">
         <slot>
-          <span aria-hidden="true">
-            {formatPlainDate(this.dayFormatter, this.date)}
-          </span>
+          <span aria-hidden="true">{this.date.day}</span>
           <span class="gux-sr-only">
             {formatPlainDate(this.readerFormatter, this.date)}
           </span>