fix(React SSR): avoid dynamic import for the Cally calendar web component used on bq-date-picker

packages/beeq/package.json

@@ -15,8 +15,7 @@
   "dependencies": {
     "@floating-ui/core": "^1.6.9",
     "@floating-ui/dom": "^1.6.13",
-    "@stencil/core": "^4.25.1",
-    "cally": "^0.7.2"
+    "@stencil/core": "^4.25.1"
   },
   "repository": {
     "type": "git",

packages/beeq/src/components/accordion/bq-accordion.tsx

@@ -237,6 +237,7 @@ export class BqAccordion {
   componentDidLoad() {
     this.handleJsAnimation();
     this.handleExpandedChange();
+    this.handleSlotChange();
   }
 
   // Listeners
@@ -286,11 +287,8 @@ export class BqAccordion {
     this.bqBlur.emit(this.el);
   };
 
-  private handlePrefixSlotChange = () => {
+  private handleSlotChange = () => {
     this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');
-  };
-
-  private handleSuffixSlotChange = () => {
     this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');
   };
 
@@ -336,7 +334,7 @@ export class BqAccordion {
             class={{ 'bq-accordion__header--prefix': true, '!hidden': !this.hasPrefix }}
             part="prefix"
           >
-            <slot name="prefix" onSlotchange={this.handlePrefixSlotChange} />
+            <slot name="prefix" onSlotchange={this.handleSlotChange} />
           </div>
           <div class="bq-accordion__header--text" part="text">
             <slot name="header" />
@@ -346,7 +344,7 @@ export class BqAccordion {
             class={{ 'bq-accordion__header--suffix': true, '!hidden': !this.hasSuffix }}
             part="suffix"
           >
-            <slot name="suffix" onSlotchange={this.handleSuffixSlotChange} />
+            <slot name="suffix" onSlotchange={this.handleSlotChange} />
           </div>
           <div
             class={{

packages/beeq/src/components/alert/bq-alert.tsx

@@ -203,6 +203,8 @@ export class BqAlert {
   }
 
   componentDidLoad() {
+    this.handleSlotChange();
+
     if (!this.open) {
       this.el.classList.add('is-hidden');
     }
@@ -262,11 +264,8 @@ export class BqAlert {
     this.bqAfterHide.emit();
   };
 
-  private handleContentSlotChange = () => {
+  private handleSlotChange = () => {
     this.hasContent = hasSlotContent(this.bodyElem, 'body');
-  };
-
-  private handleFooterSlotChange = () => {
     this.hasFooter = hasSlotContent(this.footerElem, 'footer');
   };
 
@@ -356,7 +355,7 @@ export class BqAlert {
                 ref={(div) => (this.bodyElem = div)}
                 part="body"
               >
-                <slot name="body" onSlotchange={this.handleContentSlotChange} />
+                <slot name="body" onSlotchange={this.handleSlotChange} />
               </div>
             </div>
             {/* FOOTER */}
@@ -365,7 +364,7 @@ export class BqAlert {
               ref={(div) => (this.footerElem = div)}
               part="footer"
             >
-              <slot name="footer" onSlotchange={this.handleFooterSlotChange} />
+              <slot name="footer" onSlotchange={this.handleSlotChange} />
             </div>
           </div>
         </div>

packages/beeq/src/components/badge/bq-badge.tsx

@@ -94,6 +94,10 @@ export class BqBadge {
     this.handleSizePropChange();
   }
 
+  componentDidLoad() {
+    this.handleSlotChange();
+  }
+
   disconnectedCallback() {
     this.observer?.disconnect();
   }
@@ -113,7 +117,7 @@ export class BqBadge {
   // These methods cannot be called from the host element.
   // =======================================================
 
-  private onSlotChange = () => {
+  private handleSlotChange = () => {
     const slot = this.slot;
 
     if (isNil(slot)) return;
@@ -159,7 +163,7 @@ export class BqBadge {
           part="base"
         >
           <span ref={(element) => (this.spanElement = element)} class="text-xs font-bold leading-small" part="number">
-            <slot onSlotchange={this.onSlotChange}></slot>
+            <slot onSlotchange={this.handleSlotChange}></slot>
           </span>
         </div>
       </Host>

packages/beeq/src/components/breadcrumb/bq-breadcrumb.tsx

@@ -62,6 +62,10 @@ export class BqBreadcrumb {
   // Ordered by their natural call order
   // =====================================
 
+  componentDidLoad() {
+    this.handleSlotChange();
+  }
+
   // Listeners
   // ==============
 

packages/beeq/src/components/button/bq-button.tsx

@@ -180,6 +180,10 @@ export class BqButton {
     this.checkPropValues();
   }
 
+  componentDidLoad() {
+    this.handleSlotChange();
+  }
+
   // Listeners
   // ==============
 

packages/beeq/src/components/date-picker/bq-date-picker.tsx

@@ -11,9 +11,9 @@ import {
   State,
   Watch,
 } from '@stencil/core';
-import { CalendarDate } from 'cally';
 
-import { DATE_PICKER_TYPE, DaysOfWeek, TDatePickerType } from './bq-date-picker.types';
+import { DATE_PICKER_TYPE, DaysOfWeek, TCalendarDate, TDatePickerType } from './bq-date-picker.types';
+import { isCallyLibraryLoaded, loadCallyLibrary } from './helper/callyLibrary';
 import { Placement } from '../../services/interfaces';
 import {
   hasSlotContent,
@@ -160,7 +160,7 @@ export class BqDatePicker {
   // Own Properties
   // ====================
 
-  private callyElem?: InstanceType<typeof CalendarDate>;
+  private callyElem?: TCalendarDate;
   private inputElem?: HTMLInputElement;
   private labelElem?: HTMLElement;
   private prefixElem?: HTMLElement;
@@ -184,6 +184,7 @@ export class BqDatePicker {
   // Inlined decorator, alphabetical order
   // =======================================
 
+  @State() isCallyLoaded = false;
   @State() focusedDate: string;
   @State() displayDate: string;
   @State() hasLabel = false;
@@ -309,7 +310,8 @@ export class BqDatePicker {
 
   @Watch('value')
   handleValueChange() {
-    const { formatDisplayValue, internals, value } = this;
+    const { formatDisplayValue, internals, isCallyLoaded, value } = this;
+    if (!isCallyLoaded) return;
 
     internals.setFormValue(!isNil(value) ? `${value}` : undefined);
     this.updateFormValidity();
@@ -354,12 +356,18 @@ export class BqDatePicker {
   // =====================================
 
   async connectedCallback() {
-    if (!isClient()) return;
+    if (!isClient() || this.isCallyLoaded) return;
 
-    await import('cally');
+    try {
+      await loadCallyLibrary();
+      this.isCallyLoaded = isCallyLibraryLoaded();
+    } catch (error) {
+      console.error(error);
+    }
   }
 
-  componentWillLoad() {
+  async componentDidLoad() {
+    this.handleSlotChange();
     this.handleValueChange();
   }
 
@@ -437,10 +445,11 @@ export class BqDatePicker {
   };
 
   private setFocusedDate = () => {
-    if (!this.callyElem) return;
+    const { callyElem, formatFocusedDate, isCallyLoaded, value } = this;
+    if (!(callyElem && isCallyLoaded)) return;
     // We need to set the focused date in the calendar component via a ref
     // because it doesn't work when passed as a prop (the Cally element does not re-render)
-    this.focusedDate = this.value ? this.formatFocusedDate(this.value) : new Date().toLocaleDateString('fr-CA');
+    this.focusedDate = value ? formatFocusedDate(value) : new Date().toLocaleDateString('fr-CA');
     this.callyElem.focusedDate = this.focusedDate;
   };
 
@@ -496,19 +505,15 @@ export class BqDatePicker {
     ev.stopPropagation();
   };
 
-  private handleLabelSlotChange = () => {
+  private handleSlotChange = () => {
     this.hasLabel = hasSlotContent(this.labelElem);
-  };
-
-  private handlePrefixSlotChange = () => {
     this.hasPrefix = hasSlotContent(this.prefixElem);
-  };
-
-  private handleSuffixSlotChange = () => {
     this.hasSuffix = hasSlotContent(this.suffixElem);
   };
 
-  private generateCalendarMonth = (offset?: number, className = ''): Element => {
+  private generateCalendarMonth = (offset?: number, className = ''): Element | null => {
+    if (!this.isCallyLoaded) return null;
+
     return (
       <calendar-month
         offset={offset}
@@ -532,6 +537,8 @@ export class BqDatePicker {
    * @returns {Element[]} An array of elements representing the calendar months.
    */
   private generateCalendarMonths = (): Element[] => {
+    if (!this.isCallyLoaded) return [];
+
     if (this.type === 'range' || (this.type === 'multi' && this.months)) {
       return Array.from({ length: this.months }, (_, i) => {
         const offset = i > 0 ? i : undefined;
@@ -625,7 +632,7 @@ export class BqDatePicker {
           ref={(labelElem: HTMLSpanElement) => (this.labelElem = labelElem)}
           part="label"
         >
-          <slot name="label" onSlotchange={this.handleLabelSlotChange} />
+          <slot name="label" onSlotchange={this.handleSlotChange} />
         </label>
         {/* Select date picker dropdown */}
         <bq-dropdown
@@ -655,7 +662,7 @@ export class BqDatePicker {
               ref={(spanElem: HTMLSpanElement) => (this.prefixElem = spanElem)}
               part="prefix"
             >
-              <slot name="prefix" onSlotchange={this.handlePrefixSlotChange} />
+              <slot name="prefix" onSlotchange={this.handleSlotChange} />
             </span>
             {/* HTML Input */}
             <input
@@ -706,33 +713,35 @@ export class BqDatePicker {
               ref={(spanElem: HTMLSpanElement) => (this.suffixElem = spanElem)}
               part="suffix"
             >
-              <slot name="suffix" onSlotchange={this.handleSuffixSlotChange}>
+              <slot name="suffix" onSlotchange={this.handleSlotChange}>
                 <bq-icon name="calendar-blank" class="flex" />
               </slot>
             </span>
           </div>
-          <CallyCalendar
-            isDateDisallowed={this.isDateDisallowed}
-            locale={this.locale as string}
-            value={this.value}
-            min={this.min}
-            max={this.max}
-            months={this.months}
-            tentative={this.tentative}
-            pageBy={this.monthsPerView}
-            firstDayOfWeek={this.firstDayOfWeek}
-            showOutsideDays={this.showOutsideDays}
-            onChange={this.handleCalendarChange}
-            onRangestart={this.handleCalendarRangeStart}
-            onRangeend={this.handleCalendarRangeEnd}
-            exportparts="container:calendar__container,header:calendar__header,button:calendar__button,previous:calendar__previous,next:calendar__next,disabled:calendar__disabled,heading:calendar__heading"
-            ref={(elem) => (this.callyElem = elem as InstanceType<typeof CalendarDate>)}
-          >
-            <bq-icon color="text--primary" slot="previous" name="caret-left" label="Previous" />
-            <bq-icon color="text--primary" slot="next" name="caret-right" label="Next" />
+          {this.isCallyLoaded && (
+            <CallyCalendar
+              isDateDisallowed={this.isDateDisallowed}
+              locale={this.locale as string}
+              value={this.value}
+              min={this.min}
+              max={this.max}
+              months={this.months}
+              tentative={this.tentative}
+              pageBy={this.monthsPerView}
+              firstDayOfWeek={this.firstDayOfWeek}
+              showOutsideDays={this.showOutsideDays}
+              onChange={this.handleCalendarChange}
+              onRangestart={this.handleCalendarRangeStart}
+              onRangeend={this.handleCalendarRangeEnd}
+              exportparts="container:calendar__container,header:calendar__header,button:calendar__button,previous:calendar__previous,next:calendar__next,disabled:calendar__disabled,heading:calendar__heading"
+              ref={(elem: TCalendarDate) => (this.callyElem = elem)}
+            >
+              <bq-icon color="text--primary" slot="previous" name="caret-left" label="Previous" />
+              <bq-icon color="text--primary" slot="next" name="caret-right" label="Next" />
 
-            <div class="flex flex-wrap justify-center gap-[--bq-spacing-m]">{this.generateCalendarMonths()}</div>
-          </CallyCalendar>
+              <div class="flex flex-wrap justify-center gap-[--bq-spacing-m]">{this.generateCalendarMonths()}</div>
+            </CallyCalendar>
+          )}
         </bq-dropdown>
       </div>
     );

packages/beeq/src/components/date-picker/bq-date-picker.types.ts

@@ -2,3 +2,20 @@ export type DaysOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
 export const DATE_PICKER_TYPE = ['single', 'multi', 'range'] as const;
 export type TDatePickerType = (typeof DATE_PICKER_TYPE)[number];
+
+export type TCalendarDate = {
+  focusedDate: string;
+  value: string;
+  min?: string;
+  max?: string;
+  months?: number;
+  tentative?: string;
+  pageBy?: 'single' | 'months';
+  firstDayOfWeek?: number;
+  showOutsideDays?: boolean;
+  isDateDisallowed?: (date: Date) => boolean;
+  locale?: string;
+  onChange?: (ev: Event) => void;
+  onRangestart?: (ev: CustomEvent) => void;
+  onRangeend?: (ev: CustomEvent) => void;
+};