@aurodesignsystem-dev/auro-formkit 0.0.0-pr1156.1 → 0.0.0-pr1160.0

package/components/datepicker/demo/api.min.js

@@ -14284,6 +14284,15 @@ class AuroCalendar extends RangeDatepicker {
         type: Object
       },
 
+      /**
+       * Mobile breakpoint for responsive design.
+       * @private
+       */
+      mobileBreakpoint: {
+        type: Number,
+        reflect: false
+      },
+
       /**
        * @private
        */
@@ -29057,11 +29066,21 @@ class AuroDatePicker extends AuroElement$1 {
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
       this.notifyDatepickerToggled();
 
+      // This forces the calendar to render when the dropdown is opened.
+      // It is not rendered by default
       this.calendar.visible = this.dropdown.isPopoverVisible;
 
-      if (this.dropdown.getAttribute('data-show') && this.forceScrollOnNextMobileCalendarRender) {
-        this.calendar.scrollMonthIntoView(this.formattedFocusDate);
-        this.forceScrollOnNextMobileCalendarRender = false;
+      // If on mobile, and the calendar is opened, scroll the focus date into view if the flag is set
+      if (this.dropdown.isPopoverVisible && this.forceScrollOnNextMobileCalendarRender) {
+
+        // Since the calendar is not rendered until the dropdown is opened,
+        // and the auroDropdown-toggled event fires before the popover is actually open,
+        // we need to wait until the next frame to ensure the calendar is fully rendered
+        // and the area we're trying to scroll to is present in the DOM.
+        setTimeout(() => {
+          this.calendar.scrollMonthIntoView(this.formattedFocusDate);
+          this.forceScrollOnNextMobileCalendarRender = false;
+        }, 0);
       }
     });
   }
@@ -29220,10 +29239,13 @@ class AuroDatePicker extends AuroElement$1 {
   handleReadOnly() {
     // --ds-grid-breakpoint-sm
     const docStyle = getComputedStyle(document.documentElement);
-    const mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
+
+    // We need to store this so that we can pass it to calendar
+    this.mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
+    const isMobile = window.innerWidth < this.mobileBreakpoint;
 
     this.inputList.forEach((input) => {
-      if (window.innerWidth < mobileBreakpoint) {
+      if (isMobile) {
         input.setAttribute('readonly', true);
       } else {
         input.removeAttribute('readonly');
@@ -29410,6 +29432,9 @@ class AuroDatePicker extends AuroElement$1 {
       if (!this.calendarFocusDate && this.util.validDateStr(this.value, this.format)) {
         if (!this.dropdown.isPopoverVisible) {
           this.calendarFocusDate = this.value;
+
+          // Let the calendar know to scroll to the focus date when it is next rendered on mobile
+          this.forceScrollOnNextMobileCalendarRender = true;
         }
       }
 
@@ -30032,6 +30057,7 @@ class AuroDatePicker extends AuroElement$1 {
         .maxDate="${this.maxDate}"
         .minDate="${this.minDate}"
         .monthNames="${this.monthNames}"
+        .mobileBreakpoint="${this.mobileBreakpoint}"
         part="calendar"
       >
         <slot name="ariaLabel.bib.close" slot="ariaLabel.close" @slotchange="${this.handleSlotToSlot}">Close</slot>

package/components/datepicker/demo/index.min.js

@@ -14025,6 +14025,15 @@ class AuroCalendar extends RangeDatepicker {
         type: Object
       },
 
+      /**
+       * Mobile breakpoint for responsive design.
+       * @private
+       */
+      mobileBreakpoint: {
+        type: Number,
+        reflect: false
+      },
+
       /**
        * @private
        */
@@ -28798,11 +28807,21 @@ class AuroDatePicker extends AuroElement$1 {
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
       this.notifyDatepickerToggled();
 
+      // This forces the calendar to render when the dropdown is opened.
+      // It is not rendered by default
       this.calendar.visible = this.dropdown.isPopoverVisible;
 
-      if (this.dropdown.getAttribute('data-show') && this.forceScrollOnNextMobileCalendarRender) {
-        this.calendar.scrollMonthIntoView(this.formattedFocusDate);
-        this.forceScrollOnNextMobileCalendarRender = false;
+      // If on mobile, and the calendar is opened, scroll the focus date into view if the flag is set
+      if (this.dropdown.isPopoverVisible && this.forceScrollOnNextMobileCalendarRender) {
+
+        // Since the calendar is not rendered until the dropdown is opened,
+        // and the auroDropdown-toggled event fires before the popover is actually open,
+        // we need to wait until the next frame to ensure the calendar is fully rendered
+        // and the area we're trying to scroll to is present in the DOM.
+        setTimeout(() => {
+          this.calendar.scrollMonthIntoView(this.formattedFocusDate);
+          this.forceScrollOnNextMobileCalendarRender = false;
+        }, 0);
       }
     });
   }
@@ -28961,10 +28980,13 @@ class AuroDatePicker extends AuroElement$1 {
   handleReadOnly() {
     // --ds-grid-breakpoint-sm
     const docStyle = getComputedStyle(document.documentElement);
-    const mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
+
+    // We need to store this so that we can pass it to calendar
+    this.mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
+    const isMobile = window.innerWidth < this.mobileBreakpoint;
 
     this.inputList.forEach((input) => {
-      if (window.innerWidth < mobileBreakpoint) {
+      if (isMobile) {
         input.setAttribute('readonly', true);
       } else {
         input.removeAttribute('readonly');
@@ -29151,6 +29173,9 @@ class AuroDatePicker extends AuroElement$1 {
       if (!this.calendarFocusDate && this.util.validDateStr(this.value, this.format)) {
         if (!this.dropdown.isPopoverVisible) {
           this.calendarFocusDate = this.value;
+
+          // Let the calendar know to scroll to the focus date when it is next rendered on mobile
+          this.forceScrollOnNextMobileCalendarRender = true;
         }
       }
 
@@ -29773,6 +29798,7 @@ class AuroDatePicker extends AuroElement$1 {
         .maxDate="${this.maxDate}"
         .minDate="${this.minDate}"
         .monthNames="${this.monthNames}"
+        .mobileBreakpoint="${this.mobileBreakpoint}"
         part="calendar"
       >
         <slot name="ariaLabel.bib.close" slot="ariaLabel.close" @slotchange="${this.handleSlotToSlot}">Close</slot>

package/components/datepicker/dist/auro-calendar.d.ts

@@ -62,6 +62,14 @@ export class AuroCalendar extends RangeDatepicker {
         dropdown: {
             type: ObjectConstructor;
         };
+        /**
+         * Mobile breakpoint for responsive design.
+         * @private
+         */
+        mobileBreakpoint: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
         /**
          * @private
          */

package/components/datepicker/dist/auro-datepicker.d.ts

@@ -541,6 +541,7 @@ export class AuroDatePicker extends AuroElement {
      * @returns {void}
      */
     private handleReadOnly;
+    mobileBreakpoint: number;
     /**
      * Keep the datepicker in sync with the calendar's central date.
      * @private

package/components/datepicker/dist/index.js

@@ -13975,6 +13975,15 @@ class AuroCalendar extends RangeDatepicker {
         type: Object
       },
 
+      /**
+       * Mobile breakpoint for responsive design.
+       * @private
+       */
+      mobileBreakpoint: {
+        type: Number,
+        reflect: false
+      },
+
       /**
        * @private
        */
@@ -28723,11 +28732,21 @@ class AuroDatePicker extends AuroElement$1 {
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
       this.notifyDatepickerToggled();
 
+      // This forces the calendar to render when the dropdown is opened.
+      // It is not rendered by default
       this.calendar.visible = this.dropdown.isPopoverVisible;
 
-      if (this.dropdown.getAttribute('data-show') && this.forceScrollOnNextMobileCalendarRender) {
-        this.calendar.scrollMonthIntoView(this.formattedFocusDate);
-        this.forceScrollOnNextMobileCalendarRender = false;
+      // If on mobile, and the calendar is opened, scroll the focus date into view if the flag is set
+      if (this.dropdown.isPopoverVisible && this.forceScrollOnNextMobileCalendarRender) {
+
+        // Since the calendar is not rendered until the dropdown is opened,
+        // and the auroDropdown-toggled event fires before the popover is actually open,
+        // we need to wait until the next frame to ensure the calendar is fully rendered
+        // and the area we're trying to scroll to is present in the DOM.
+        setTimeout(() => {
+          this.calendar.scrollMonthIntoView(this.formattedFocusDate);
+          this.forceScrollOnNextMobileCalendarRender = false;
+        }, 0);
       }
     });
   }
@@ -28886,10 +28905,13 @@ class AuroDatePicker extends AuroElement$1 {
   handleReadOnly() {
     // --ds-grid-breakpoint-sm
     const docStyle = getComputedStyle(document.documentElement);
-    const mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
+
+    // We need to store this so that we can pass it to calendar
+    this.mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
+    const isMobile = window.innerWidth < this.mobileBreakpoint;
 
     this.inputList.forEach((input) => {
-      if (window.innerWidth < mobileBreakpoint) {
+      if (isMobile) {
         input.setAttribute('readonly', true);
       } else {
         input.removeAttribute('readonly');
@@ -29076,6 +29098,9 @@ class AuroDatePicker extends AuroElement$1 {
       if (!this.calendarFocusDate && this.util.validDateStr(this.value, this.format)) {
         if (!this.dropdown.isPopoverVisible) {
           this.calendarFocusDate = this.value;
+
+          // Let the calendar know to scroll to the focus date when it is next rendered on mobile
+          this.forceScrollOnNextMobileCalendarRender = true;
         }
       }
 
@@ -29698,6 +29723,7 @@ class AuroDatePicker extends AuroElement$1 {
         .maxDate="${this.maxDate}"
         .minDate="${this.minDate}"
         .monthNames="${this.monthNames}"
+        .mobileBreakpoint="${this.mobileBreakpoint}"
         part="calendar"
       >
         <slot name="ariaLabel.bib.close" slot="ariaLabel.close" @slotchange="${this.handleSlotToSlot}">Close</slot>

package/components/datepicker/dist/registered.js

@@ -13975,6 +13975,15 @@ class AuroCalendar extends RangeDatepicker {
         type: Object
       },
 
+      /**
+       * Mobile breakpoint for responsive design.
+       * @private
+       */
+      mobileBreakpoint: {
+        type: Number,
+        reflect: false
+      },
+
       /**
        * @private
        */
@@ -28723,11 +28732,21 @@ class AuroDatePicker extends AuroElement$1 {
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
       this.notifyDatepickerToggled();
 
+      // This forces the calendar to render when the dropdown is opened.
+      // It is not rendered by default
       this.calendar.visible = this.dropdown.isPopoverVisible;
 
-      if (this.dropdown.getAttribute('data-show') && this.forceScrollOnNextMobileCalendarRender) {
-        this.calendar.scrollMonthIntoView(this.formattedFocusDate);
-        this.forceScrollOnNextMobileCalendarRender = false;
+      // If on mobile, and the calendar is opened, scroll the focus date into view if the flag is set
+      if (this.dropdown.isPopoverVisible && this.forceScrollOnNextMobileCalendarRender) {
+
+        // Since the calendar is not rendered until the dropdown is opened,
+        // and the auroDropdown-toggled event fires before the popover is actually open,
+        // we need to wait until the next frame to ensure the calendar is fully rendered
+        // and the area we're trying to scroll to is present in the DOM.
+        setTimeout(() => {
+          this.calendar.scrollMonthIntoView(this.formattedFocusDate);
+          this.forceScrollOnNextMobileCalendarRender = false;
+        }, 0);
       }
     });
   }
@@ -28886,10 +28905,13 @@ class AuroDatePicker extends AuroElement$1 {
   handleReadOnly() {
     // --ds-grid-breakpoint-sm
     const docStyle = getComputedStyle(document.documentElement);
-    const mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
+
+    // We need to store this so that we can pass it to calendar
+    this.mobileBreakpoint = Number(docStyle.getPropertyValue('--ds-grid-breakpoint-sm').replace("px", ""));
+    const isMobile = window.innerWidth < this.mobileBreakpoint;
 
     this.inputList.forEach((input) => {
-      if (window.innerWidth < mobileBreakpoint) {
+      if (isMobile) {
         input.setAttribute('readonly', true);
       } else {
         input.removeAttribute('readonly');
@@ -29076,6 +29098,9 @@ class AuroDatePicker extends AuroElement$1 {
       if (!this.calendarFocusDate && this.util.validDateStr(this.value, this.format)) {
         if (!this.dropdown.isPopoverVisible) {
           this.calendarFocusDate = this.value;
+
+          // Let the calendar know to scroll to the focus date when it is next rendered on mobile
+          this.forceScrollOnNextMobileCalendarRender = true;
         }
       }
 
@@ -29698,6 +29723,7 @@ class AuroDatePicker extends AuroElement$1 {
         .maxDate="${this.maxDate}"
         .minDate="${this.minDate}"
         .monthNames="${this.monthNames}"
+        .mobileBreakpoint="${this.mobileBreakpoint}"
         part="calendar"
       >
         <slot name="ariaLabel.bib.close" slot="ariaLabel.close" @slotchange="${this.handleSlotToSlot}">Close</slot>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr1156.1",
+  "version": "0.0.0-pr1160.0",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {