lightning-base-components 1.27.2-alpha → 1.28.3-alpha

package/src/lightning/datepicker/datepicker.js

@@ -15,40 +15,17 @@ import labelCustomErrorWithDateFormat from '@salesforce/label/LightningDateTimeP
 import labelSelectDateFor from '@salesforce/label/LightningDateTimePicker.selectDateFor';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import labelDateFormatExampleText from '@salesforce/label/LightningDateTimePicker.dateFormatExampleText';
+import formFactor from '@salesforce/client/formFactor';
+import orgHasA11yResizeReflow from '@salesforce/accessCheck/A11yResizeReflow.orgHasA11yResizeReflow';
 import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
-import {
-    getDateFormatFromStyle,
-    normalizeISODate,
-    parseFormattedDate,
-} from 'lightning/internationalizationLibrary';
-import {
-    startPositioning,
-    stopPositioning,
-    Direction,
-} from 'lightning/positionLibrary';
+import { normalizeISODate, parseFormattedDate, } from 'lightning/internationalizationLibrary';
+import { startPositioning, stopPositioning, Direction, } from 'lightning/positionLibrary';
 import { classSet, formatLabel } from 'lightning/utils';
-import {
-    normalizeBoolean,
-    normalizeAriaAttribute,
-    normalizeString,
-    synchronizeAttrs,
-    getRealDOMId,
-    computeAriaInvalid,
-    reflectAttribute,
-    isCSR,
-} from 'lightning/utilsPrivate';
-import {
-    generateUniqueId,
-    normalizeVariant,
-    VARIANT,
-} from 'lightning/inputUtils';
-import {
-    handleKeyDownOnDatePickerIcon,
-    handleBasicKeyDownBehaviour,
-} from './keyboard';
+import { normalizeBoolean, normalizeAriaAttribute, normalizeString, synchronizeAttrs, getRealDOMId, computeAriaInvalid, reflectAttribute, } from 'lightning/utilsPrivate';
+import { generateUniqueId, normalizeVariant, VARIANT, } from 'lightning/inputUtils';
+import { handleKeyDownOnDatePickerIcon, handleBasicKeyDownBehaviour, } from './keyboard';
 import AriaObserver from 'lightning/ariaObserver';
-
 const i18n = {
     invalidDate: labelInvalidDate,
     rangeOverflow: labelRangeOverflow,
@@ -63,7 +40,6 @@ const i18n = {
     customErrorWithDateFormat: labelCustomErrorWithDateFormat,
     dateFormatExampleText: labelDateFormatExampleText,
 };
-
 const ARIA_CONTROLS = 'aria-controls';
 const ARIA_DETAILS = 'aria-details';
 const ARIA_LABEL = 'aria-label';
@@ -77,19 +53,28 @@ const DATE_STYLE = {
     MEDIUM: 'medium',
     LONG: 'long',
 };
-
+const DATE_EXAMPLE = '2024-12-31';
 export default class LightningDatePicker extends LightningShadowBaseClass {
-    @track _disabled = false;
-    @track _readonly = false;
-    @track _required = false;
-    @track _value = null;
-    @track _calendarVisible = false;
-    @track _displayValue = null;
-    @track _errorMessage = '';
-    @track _fieldLevelHelp;
-    @track _variant;
-    @api accessKey;
-
+    @track
+    _disabled = false;
+    @track
+    _readonly = false;
+    @track
+    _required = false;
+    @track
+    _value = null;
+    @track
+    _calendarVisible = false;
+    @track
+    _displayValue = null;
+    @track
+    _errorMessage = '';
+    @track
+    _fieldLevelHelp;
+    @track
+    _variant;
+    @api
+    accessKey;
     _min;
     _max;
     _messageWhenValueMissing;
@@ -100,21 +85,18 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     _dateStyle = DATE_STYLE.MEDIUM;
     showFormatHelpText = false;
     clickedOutsideDatepicker;
-
-    @api label;
-    @api name;
-    @api placeholder;
-    @api externalErrorMessage;
-    @api parentErrorMessageElement;
-
-    /**
-     * Controls auto-filling of the input. Set the attribute to pass
-     * through autocomplete values to be interpreted by the browser.
-     * By default autocomplete is off to avoid overlap of dropdown.
-     * @type {string}
-     */
-    @api autocomplete = 'off';
-
+    @api
+    label;
+    @api
+    name;
+    @api
+    placeholder;
+    @api
+    externalErrorMessage;
+    @api
+    parentErrorMessageElement;
+    @api
+    autocomplete = 'off';
     connectAriaErrorMessage() {
         if (this.ariaObserver && this._rendered) {
             this.ariaObserver.connect({
@@ -124,17 +106,14 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             });
         }
     }
-
     @api
     get ariaErrorMessageElement() {
         return this._ariaErrorMessage;
     }
-
     set ariaErrorMessageElement(el) {
         this._ariaErrorMessage = el;
         this.connectAriaErrorMessage();
     }
-
     @api
     get rootAriaNode() {
         if (this.ariaObserver) {
@@ -142,158 +121,106 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         }
         return null;
     }
-
     set rootAriaNode(root) {
         if (this.ariaObserver) {
             this.ariaObserver.root = root;
         }
     }
-
     setNormalisedIsoDateMin() {
-        const normalizedDate = normalizeISODate(
-            this._userMinValue,
-            this._dateStyle
-        );
+        const normalizedDate = normalizeISODate(this._userMinValue, this._dateStyle);
         if (normalizedDate.isoValue) {
             this._min = normalizedDate.isoValue;
             this._displayMin = normalizedDate.displayValue;
         }
     }
-
     @api
     get min() {
         return this._min;
     }
     set min(value) {
-        // W-7702418: We previously always set the raw value and should continue to do so unless
-        // normalization of the given value is possible.
         this._min = value;
         this._displayMin = value;
         this._userMinValue = value;
-
         this.setNormalisedIsoDateMin();
     }
-
     setNormalisedIsoDateMax() {
-        const normalizedDate = normalizeISODate(
-            this._userMaxValue,
-            this._dateStyle
-        );
+        const normalizedDate = normalizeISODate(this._userMaxValue, this._dateStyle);
         if (normalizedDate.isoValue) {
             this._max = normalizedDate.isoValue;
             this._displayMax = normalizedDate.displayValue;
         }
     }
-
     @api
     get max() {
         return this._max;
     }
     set max(value) {
-        // W-7702418: We previously always set the raw value and should continue to do so unless
-        // normalization of the given value is possible.
         this._max = value;
         this._displayMax = value;
         this._userMaxValue = value;
-
         this.setNormalisedIsoDateMax();
     }
-
     @api
     get messageWhenValueMissing() {
         if (this._messageWhenValueMissing) {
-            return formatLabel(
-                this.i18n.customErrorWithDateFormat,
-                this._messageWhenValueMissing,
-                this.dateFormatExample
-            );
-        }
-
-        return formatLabel(
-            this.i18n.valueMissingWithDateFormat,
-            this.dateFormatExample
-        );
+            return formatLabel(this.i18n.customErrorWithDateFormat, this._messageWhenValueMissing, this.dateFormatExample);
+        }
+        return formatLabel(this.i18n.valueMissingWithDateFormat, this.dateFormatExample);
     }
     set messageWhenValueMissing(message) {
         this._messageWhenValueMissing = message;
     }
-
     @api
     get messageWhenBadInput() {
         if (this._messageWhenBadInput) {
-            return formatLabel(
-                this.i18n.customErrorWithDateFormat,
-                this._messageWhenBadInput,
-                this.dateFormatExample
-            );
+            return formatLabel(this.i18n.customErrorWithDateFormat, this._messageWhenBadInput, this.dateFormatExample);
         }
-
         return formatLabel(this.i18n.invalidDate, this.dateFormatExample);
     }
     set messageWhenBadInput(message) {
         this._messageWhenBadInput = message;
     }
-
     @api
     get messageWhenRangeOverflow() {
         if (this._messageWhenRangeOverflow) {
-            return formatLabel(
-                this.i18n.customErrorWithDateFormat,
-                this._messageWhenRangeOverflow,
-                this.dateFormatExample
-            );
+            return formatLabel(this.i18n.customErrorWithDateFormat, this._messageWhenRangeOverflow, this.dateFormatExample);
         }
-
         return formatLabel(this.i18n.rangeOverflow, this._displayMax);
     }
     set messageWhenRangeOverflow(message) {
         this._messageWhenRangeOverflow = message;
     }
-
     @api
     get messageWhenRangeUnderflow() {
         if (this._messageWhenRangeUnderflow) {
-            return formatLabel(
-                this.i18n.customErrorWithDateFormat,
-                this._messageWhenRangeUnderflow,
-                this.dateFormatExample
-            );
+            return formatLabel(this.i18n.customErrorWithDateFormat, this._messageWhenRangeUnderflow, this.dateFormatExample);
         }
-
         return formatLabel(this.i18n.rangeUnderflow, this._displayMin);
     }
     set messageWhenRangeUnderflow(message) {
         this._messageWhenRangeUnderflow = message;
     }
-
-    // setter is required to properly trigger update
     @api
     get ariaLabel() {
         return this._ariaLabel;
     }
-
     set ariaLabel(val) {
         this._ariaLabel = val;
         this.synchronizeA11y();
     }
-
     @api
     get ariaDisabled() {
         return this._ariaDisabled;
     }
-
     set ariaDisabled(val) {
         this._ariaDisabled = val;
         this.synchronizeA11y();
     }
-
     _ariaLabelledBy;
     _ariaControls;
-
     _ariaDetails;
     _ariaDescribedBy = [];
     _ariaErrorMessage;
-
     set ariaLabelledByElement(el) {
         this._ariaLabelledBy = el;
         if (this.ariaObserver) {
@@ -304,12 +231,10 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             });
         }
     }
-
     @api
     get ariaLabelledByElement() {
         return this._ariaLabelledBy;
     }
-
     set ariaControlsElement(el) {
         this._ariaControls = el;
         if (this.ariaObserver) {
@@ -320,12 +245,10 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             });
         }
     }
-
     @api
     get ariaControlsElement() {
         return this._ariaControls;
     }
-
     set ariaDetailsElements(el) {
         this._ariaDetails = el;
         if (this.ariaObserver) {
@@ -336,27 +259,24 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             });
         }
     }
-
     @api
     get ariaDetailsElements() {
         return this._ariaDetails;
     }
-
     set ariaDescribedByElements(el) {
         if (Array.isArray(el)) {
             this._ariaDescribedBy = el;
-        } else {
+        }
+        else {
             this._ariaDescribedBy = [el];
         }
         this._ariaDescribedBy.push(this.errorMessageElement);
         this.connectAriaDescribedBy();
     }
-
     @api
     get ariaDescribedByElements() {
         return this._ariaDescribedBy;
     }
-
     synchronizeA11y() {
         if (!this._rendered) {
             return;
@@ -365,34 +285,27 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         if (!input) {
             return;
         }
-
         synchronizeAttrs(input, {
             [ARIA_LABEL]: this._ariaLabel,
             [ARIA_DISABLED]: this._ariaDisabled,
             [ARIA_INVALID]: this.computedAriaInvalid,
         });
-
-        // Set aria-describedby on the calendar button that opens the calendar dialog
-        // to inform user of date validity (min/max). Same is done for input.
-        const calendarButton = this.template.querySelector(
-            'lightning-button-icon'
-        );
+        const calendarButton = this.template.querySelector('lightning-button-icon');
         calendarButton.ariaDescribedBy =
             this.computedDatepickerButtonAriaDescribedby;
-
         if (this.isConnected) {
             this.connectAriaDescribedBy();
             this.connectAriaErrorMessage();
             this.ariaObserver.sync();
         }
     }
-
     renderedCallback() {
         if (this.showFormatHelpText && !this.pointerEventAdded) {
             document.addEventListener('pointerdown', this.handlePointerDown);
             document.addEventListener('pointerup', this.handlePointerUp);
             this.pointerEventAdded = true;
-        } else if (!this.showFormatHelpText && this.pointerEventAdded) {
+        }
+        else if (!this.showFormatHelpText && this.pointerEventAdded) {
             document.removeEventListener('pointerdown', this.handlePointerDown);
             document.removeEventListener('pointerup', this.handlePointerUp);
             this.pointerEventAdded = false;
@@ -400,18 +313,15 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         this._rendered = true;
         this.synchronizeA11y();
     }
-
     @api
     get value() {
         return this._value;
     }
     set value(newValue) {
         const normalizedDate = normalizeISODate(newValue, this.dateStyle);
-
         this._value = normalizedDate.isoValue;
         this._displayValue = normalizedDate.displayValue;
     }
-
     @api
     get disabled() {
         return this._disabled;
@@ -420,7 +330,6 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         this._disabled = normalizeBoolean(value);
         reflectAttribute(this, 'disabled', this._disabled);
     }
-
     @api
     get readOnly() {
         return this._readonly;
@@ -429,7 +338,6 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         this._readonly = normalizeBoolean(value);
         reflectAttribute(this, 'readonly', this._readonly);
     }
-
     @api
     get required() {
         return this._required;
@@ -437,92 +345,75 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     set required(value) {
         this._required = normalizeBoolean(value);
     }
-
     set fieldLevelHelp(value) {
         this._fieldLevelHelp = value;
     }
-
     @api
     get fieldLevelHelp() {
         return this._fieldLevelHelp;
     }
-
     @api
     get variant() {
         return this._variant || VARIANT.STANDARD;
     }
-
     set variant(value) {
         this._variant = normalizeVariant(value);
         reflectAttribute(this, 'variant', value);
     }
-
     @api
     focus() {
         if (this.connected) {
             this.inputElement.focus();
         }
     }
-
     @api
     blur() {
         if (this.connected) {
             this.inputElement.blur();
         }
     }
-
     @api
     showHelpMessage(message) {
         if (!message) {
             this.classList.remove('slds-has-error');
             this._errorMessage = '';
-        } else {
+        }
+        else {
             this.classList.add('slds-has-error');
             this._errorMessage = message;
         }
     }
-
     @api
     hasBadInput() {
         return !!this._displayValue && this._value === null;
     }
-
     @api
     get dateStyle() {
         return this._dateStyle;
     }
-
     set dateStyle(value) {
         this._dateStyle = normalizeString(value, {
             fallbackValue: DATE_STYLE.MEDIUM,
             validValues: [DATE_STYLE.SHORT, DATE_STYLE.MEDIUM, DATE_STYLE.LONG],
         });
-
         const normalizedDate = normalizeISODate(this._value, this._dateStyle);
         this._displayValue = normalizedDate.displayValue;
-
-        // W-14161407 min and max setters are being called before dateStyle is being set
-        // hence updating the min max values
         this.setNormalisedIsoDateMax();
         this.setNormalisedIsoDateMin();
     }
-
     constructor() {
         super();
         this.uniqueId = generateUniqueId();
         this.ariaObserver = new AriaObserver(this);
     }
-
     connectedCallback() {
         super.connectedCallback();
         this.connected = true;
         if (!this.ariaObserver) {
             this.ariaObserver = new AriaObserver(this);
         }
-
         this.keyboardInterface = this.datepickerKeyboardInterface();
     }
-
     disconnectedCallback() {
         this.connected = false;
         this._rendered = false;
@@ -531,109 +422,82 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             this.ariaObserver = undefined;
         }
     }
-
     get computedClassFormatText() {
         return classSet('slds-form-element__help').add({
             'slds-assistive-text': !this.showFormatHelpText,
         });
     }
-
     get computedShowDateFormat() {
         return !this.errorMessage && !this.externalErrorMessage;
     }
-
     get dateFormatExample() {
-        return getDateFormatFromStyle(this.dateStyle, true);
+        return normalizeISODate(DATE_EXAMPLE, this.dateStyle).displayValue;
     }
-
     get dateFormatText() {
-        return formatLabel(
-            this.i18n.dateFormatExampleText,
-            this.dateFormatExample
-        );
+        return formatLabel(this.i18n.dateFormatExampleText, this.dateFormatExample);
     }
-
     get i18n() {
         return i18n;
     }
-
     get isLabelHidden() {
         return this.variant === VARIANT.LABEL_HIDDEN;
     }
-
     get computedLabelClass() {
         return classSet('slds-form-element__label')
             .add({ 'slds-assistive-text': this.isLabelHidden })
             .toString();
     }
-
     get errorMessageElement() {
         return this.template.querySelector('[data-error-message]');
     }
-
     get rangeMessageElement() {
         return this.template.querySelector('[data-range-message]');
     }
-
     get dateFormatElement() {
         return this.template.querySelector('[data-date-format]');
     }
-
     get computedUniqueRangeMessageElementId() {
         const el = this.template.querySelector('[data-range-message]');
         return getRealDOMId(el);
     }
-
     get isRangeMessageVisible() {
         return this.min || this.max;
     }
-
     get isCalendarVisible() {
         return this._calendarVisible;
     }
-
     get displayValue() {
         return this._displayValue;
     }
-
     get errorMessage() {
         return this._errorMessage;
     }
-
     get computedIconDisabledState() {
         return this.disabled || this.readOnly;
     }
-
     get ariaDescribedByElementsInternal() {
         const elements = [];
-
         if (this.errorMessage) {
             elements.push(this.errorMessageElement);
-        } else {
+        }
+        else {
             elements.push(this.dateFormatElement);
         }
-
-        // To inform user of valid date ranges that are set via min/max attributes
         if (this.isRangeMessageVisible) {
             elements.push(this.rangeMessageElement);
         }
-
         return elements;
     }
-
     get computedAriaDescribedby() {
         const ariaValues = [];
-
         this._ariaDescribedBy.forEach((item) => {
             const id = getRealDOMId(item);
             if (id) {
                 ariaValues.push(id);
             }
         });
-
         return normalizeAriaAttribute(ariaValues);
     }
-
     connectAriaDescribedBy() {
         if (this.ariaObserver && this._rendered) {
             this.ariaObserver.connect({
@@ -642,89 +506,64 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
                 relatedNodeIds: this.computedAriaDescribedby,
                 relatedNodes: [
                     ...this.ariaDescribedByElementsInternal,
-                    // Move this to connectAriaErrorMessage
-                    // instead once that has full support
                     this.parentErrorMessageElement,
                 ],
             });
         }
     }
-
     get computedDatepickerButtonAriaDescribedby() {
         if (this.isRangeMessageVisible) {
             return this.computedUniqueRangeMessageElementId;
         }
         return '';
     }
-
     get computedSelectDateLabel() {
         return formatLabel(this.i18n.selectDateFor, this.label);
     }
-
     get rangeMessage() {
         if (this.min && !this.max) {
-            // If only min is set
             return formatLabel(this.i18n.minRangeMessage, this._displayMin);
-        } else if (this.max && !this.min) {
-            // If only max is set
+        }
+        else if (this.max && !this.min) {
             return formatLabel(this.i18n.maxRangeMessage, this._displayMax);
-        } else if (this.min && this.max) {
-            // If both min and max are set
-            return formatLabel(
-                this.i18n.minAndMaxRangeMessage,
-                this._displayMin,
-                this._displayMax
-            );
+        }
+        else if (this.min && this.max) {
+            return formatLabel(this.i18n.minAndMaxRangeMessage, this._displayMin, this._displayMax);
         }
         return '';
     }
-
     handleInputChange(event) {
         event.stopPropagation();
-
-        // keeping the display value in sync with the element's value
         this._displayValue = event.currentTarget.value;
         this._value = parseFormattedDate(this._displayValue).value;
         this.dispatchChangeEvent();
     }
-
     handleInput() {
-        // keeping the display value in sync with the element's value
         this._displayValue = this.inputElement.value;
-
-        // Making sure that the focus remains on the input and we're not triggering leave
         this.hideCalendarAndFocusTrigger();
     }
-
     handleInputBlur() {
         if (this._value !== null) {
-            const normalizedDate = normalizeISODate(
-                this._value,
-                this.dateStyle
-            );
+            const normalizedDate = normalizeISODate(this._value, this.dateStyle);
             this._displayValue = normalizedDate.displayValue;
         }
         this.onFocusOut();
     }
-
     handleInputClick(event) {
         if (this.readOnly) {
             return;
         }
         this.calendarTrigger = event.target;
-
         this.showCalendar();
     }
-
     handlePointerDown = (event) => {
         const datePickerSelector = '.slds-dropdown-trigger';
         let datepickerClosestTarget = null;
         if (event.target && typeof event.target.closest === 'function') {
             datepickerClosestTarget = event.target.closest(datePickerSelector);
-        } else if (
-            event.relatedTarget &&
-            typeof event.relatedTarget.closest === 'function'
-        ) {
+        }
+        else if (event.relatedTarget &&
+            typeof event.relatedTarget.closest === 'function') {
             datepickerClosestTarget =
                 event.relatedTarget.closest(datePickerSelector);
         }
@@ -738,15 +577,10 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             this.clickedOutsideDatepicker = false;
         }
     };
-
-    /**
-     * When the element gains focus this function is called.
-     */
     onFocusIn() {
         if (this._pendingFocusOut) {
             this._pendingFocusOut = false;
         }
-
         if (!this._focused) {
             this.dispatchEvent(new CustomEvent('focus'));
         }
@@ -754,14 +588,8 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         this.showFormatHelpText = true;
         this.clickedOutsideDatepicker = false;
     }
-
-    /**
-     * When the element looses its focus this function is called.
-     */
     onFocusOut() {
-        // This assumes that a focusin will be dispatched after a focusout
         this._pendingFocusOut = true;
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
         requestAnimationFrame(() => {
             if (this._pendingFocusOut) {
                 this._focused = false;
@@ -773,88 +601,72 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             this.showFormatHelpText = false;
         }
     }
-
     handleDatePickerIconClick(event) {
         if (this.readOnly || this.disabled) {
             return;
         }
-
         this.calendarTrigger = event.target;
-
         this.showAndFocusCalendar();
     }
-
     handleInputKeydown(event) {
         this.calendarTrigger = event.target;
-
         handleBasicKeyDownBehaviour(event, this.keyboardInterface);
     }
-
     handleDatePickerIconKeyDown(event) {
         this.calendarTrigger = event.target;
-
         handleKeyDownOnDatePickerIcon(event, this.keyboardInterface);
     }
-
     handleCalendarKeyDown(event) {
         handleBasicKeyDownBehaviour(event, this.keyboardInterface);
     }
-
     handleDateSelect(event) {
         event.stopPropagation();
-
         this._value = event.detail.value;
-
-        this._displayValue = normalizeISODate(
-            this._value,
-            this.dateStyle
-        ).displayValue;
-
+        this._displayValue = normalizeISODate(this._value, this.dateStyle).displayValue;
         this.hideCalendarAndFocusTrigger();
-
         this.dispatchChangeEvent();
     }
-
     showAndFocusCalendar() {
         this.showCalendar();
-
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
         requestAnimationFrame(() => {
             this.focusCalendar();
         });
     }
-
     hideCalendarAndFocusTrigger() {
         this.hideCalendar();
-
-        if (this.calendarTrigger)
+        if (this.calendarTrigger) {
             if (this.calendarTrigger === this.calendarButtonElement) {
-                // Fix for W-14258862, focus is transferred to the input element
-                // instead of the button element when trigger is button
                 this.inputElement.focus();
-            } else {
+            }
+            else {
                 this.calendarTrigger.focus();
             }
+        }
     }
-
     focusCalendar() {
         const calendar = this.template.querySelector('lightning-calendar');
         if (calendar) {
             calendar.focus();
         }
     }
-
     startPositioning() {
+        const reflowResizeConfig = this.isReflowResizeActivated
+            ? {
+                keepInViewport: true,
+                autoShrinkHeight: true,
+            }
+            : {};
+        if (this.isReflowResizeActivated) {
+            const datePickerContainer = this.lightningCalendarElement.shadowRoot.querySelector('.slds-datepicker');
+            datePickerContainer.style.overflow = 'auto';
+            datePickerContainer.style.maxHeight = '100vh';
+        }
         if (!this._relationship) {
             this._relationship = startPositioning(this, {
-                target: () =>
-                    this.template.querySelector(
-                        'div.slds-form-element__control'
-                    ),
-                element: () =>
-                    this.template
-                        .querySelector('lightning-calendar')
-                        .shadowRoot.querySelector('div'),
+                target: () => this.template.querySelector('div.slds-form-element__control'),
+                element: () => this.template
+                    .querySelector('lightning-calendar')
+                    .shadowRoot.querySelector('div'),
                 align: {
                     horizontal: Direction.Right,
                     vertical: Direction.Top,
@@ -863,63 +675,62 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
                     horizontal: Direction.Right,
                     vertical: Direction.Bottom,
                 },
-                autoFlip: true, // Auto flip direction if not have enough space
-                leftAsBoundary: true, // horizontal flip uses target left as boundary
+                autoFlip: true,
+                leftAsBoundary: true,
+                ...reflowResizeConfig,
             });
-        } else {
+        }
+        else {
             this._relationship.reposition();
         }
     }
-
     stopPositioning() {
         if (this._relationship) {
             stopPositioning(this._relationship);
             this._relationship = null;
         }
     }
-
     showCalendar() {
         if (!this.isCalendarVisible) {
             this.rootElement.classList.add('slds-is-open');
-
             this._calendarVisible = true;
         }
     }
-
     hideCalendar() {
         if (this.isCalendarVisible) {
             this.rootElement.classList.remove('slds-is-open');
-
             this.stopPositioning();
             this._calendarVisible = false;
         }
     }
-
     get rootElement() {
         return this.template.querySelector('div');
     }
-
     @api
     get inputElement() {
         return this.template.querySelector('input');
     }
-
     get calendarButtonElement() {
         return this.template.querySelector('lightning-button-icon');
     }
-
+    get lightningCalendarElement() {
+        return this.template.querySelector('lightning-calendar');
+    }
+    get isReflowResizeActivated() {
+        return (this.lightningCalendarElement &&
+            window.innerWidth < 641 &&
+            formFactor === 'Large' &&
+            orgHasA11yResizeReflow);
+    }
     dispatchChangeEvent() {
-        this.dispatchEvent(
-            new CustomEvent('change', {
-                composed: true,
-                bubbles: true,
-                detail: {
-                    value: this._value,
-                },
-            })
-        );
+        this.dispatchEvent(new CustomEvent('change', {
+            composed: true,
+            bubbles: true,
+            detail: {
+                value: this._value,
+            },
+        }));
     }
-
     datepickerKeyboardInterface() {
         const that = this;
         return {
@@ -934,23 +745,18 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             },
         };
     }
-
     get hasExternalLabel() {
-        return (
-            this.variant === VARIANT.LABEL_HIDDEN &&
+        return (this.variant === VARIANT.LABEL_HIDDEN &&
             this.ariaLabelledByElement &&
-            this.ariaLabelledByElement.length
-        );
+            this.ariaLabelledByElement.length);
     }
-
     get computedAriaInvalid() {
-        const dataAriaInvalid = isCSR
+        const dataAriaInvalid = !import.meta.env.SSR
             ? this.template.host.getAttribute('data-aria-invalid')
             : null;
         const isAriaInvalid = dataAriaInvalid || this._errorMessage;
         return computeAriaInvalid(isAriaInvalid, this.hasBadInput() || '');
     }
-
     get helptextAlternativeText() {
         return formatLabel(i18n.helpTextAlternativeText, this.label);
     }