lightning-base-components 1.27.2-alpha → 1.27.5-alpha

package/src/lightning/datatable/types.js

@@ -3,7 +3,6 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-import { features } from 'lightning/features';
 import { assert } from 'lightning/utilsPrivate';
 
 const STANDARD_TYPE_NAME_ENTRIES = [
@@ -145,33 +144,6 @@ const EDITABLE_STANDARD_TYPES = new Set([
     'date',
 ]);
 
-// TODO: Delete when removing ENABLE_TREE_GRID_CUSTOM_TYPES gate
-/**
- * Determines if a supplied type is a valid datatable type.
- *
- * @param {String} typeName The type to validate
- * @returns {Boolean} Whether the supplied type is valid
- */
-export function isValidType(typeName) {
-    return STANDARD_TYPE_NAMES.has(typeName);
-}
-
-// TODO: Delete when removing ENABLE_TREE_GRID_CUSTOM_TYPES gate
-/**
- * Retrieves the attributes for a given type. Additionally, verifies
- * the supplied type is valid.
- *
- * @param {String} typeName The type to get the attributes for
- * @returns {Array} An array of attributes for the supplied type
- */
-export function getAttributesNames(typeName) {
-    assert(
-        isValidType(typeName),
-        `You are trying to access an invalid type (${typeName})`
-    );
-    return STANDARD_TYPE_NAMES.get(typeName) || [];
-}
-
 /**
  * A class for handling valid datatable types.
  */
@@ -303,12 +275,9 @@ export default class DatatableTypes {
      * @returns {Boolean} Whether the supplied type is valid for a tree
      */
     isValidTypeForTree(typeName) {
-        if (features.ENABLE_TREE_GRID_CUSTOM_TYPES) {
-            return (
-                TREE_SUPPORTED_TYPES.has(typeName) ||
-                this.isStandardCellLayoutForCustomType(typeName)
-            );
-        }
-        return TREE_SUPPORTED_TYPES.has(typeName);
+        return (
+            TREE_SUPPORTED_TYPES.has(typeName) ||
+            this.isStandardCellLayoutForCustomType(typeName)
+        );
     }
 }

package/src/lightning/datatable/utils.js

@@ -3,7 +3,9 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
+import { getRowByKey } from './indexes';
 import { classSetToString } from 'lightning/utilsPrivate';
+import { features } from 'lightning/features';
 
 const CLASS_SET_PROTOTYPE = {
     add(className) {
@@ -254,7 +256,74 @@ export function isLoadMore(prevData, newData) {
                   JSON.stringify(cleanNewData[0])
             : false;
     } catch (e) {
-        console.warn(`Invalid data attribute, could not stringify`);
+        console.warn(`Invalid data attribute, could not stringify`); // eslint-disable-line no-console
         return false;
     }
 }
+
+/*
+ * Sets the computedClass for cells in a given row to use the highlightClass
+ * @param {Object} state - The state object
+ * @param {String} rowKeyValue - The key value of the row
+ */
+export function setHighlightedRowClasses(state, rowKeyValue) {
+    if (!features.enableDatatableHoverStyling || !state.hasHighlightStyling) {
+        return;
+    }
+    const row = getRowByKey(state, rowKeyValue);
+    const cells = row?.cells || [];
+    for (let i = 0; i < cells.length; i++) {
+        const cell = row.cells[i];
+        cell.computedClass = `${cell.highlightClass || cell.class} ${cell.defaultClass}`;
+    }
+}
+
+/*
+ * Removes the highlightClass from the cells in a given row if the row is not focused or hovered
+ * @param {Object} state - The state object
+ * @param {String} rowKeyValue - The key value of the row
+ */
+export function unsetHighlightedRowClasses(state, rowKeyValue, isHoverEvent) {
+    if (
+        !features.enableDatatableHoverStyling ||
+        !state.hasHighlightStyling ||
+        !rowKeyValue
+    ) {
+        return;
+    }
+    const otherRowKeyValue = isHoverEvent
+        ? state.focusedRowKeyValue
+        : state.hoveredRowKeyValue;
+    if (otherRowKeyValue !== rowKeyValue) {
+        const row = getRowByKey(state, rowKeyValue);
+        const cells = row?.cells || [];
+        for (let i = 0; i < cells.length; i++) {
+            const cell = row.cells[i];
+            cell.computedClass = `${cell.class} ${cell.defaultClass}`;
+        }
+    }
+}
+
+/**
+ * Removes the highlightClass from the previously focused row if needed
+ * and sets the highlightClass and state for the newly focused row
+ * @param {Object} state - The state object
+ * @param {String} rowKeyValue - The key value of the row
+ */
+export function resetHighlightedRowClasses(state, rowKeyValue) {
+    if (!features.enableDatatableHoverStyling || !state.hasHighlightStyling) {
+        return;
+    }
+    const currentRowKeyValue = state.focusedRowKeyValue;
+    if (currentRowKeyValue !== rowKeyValue) {
+        if (currentRowKeyValue) {
+            unsetHighlightedRowClasses(state, currentRowKeyValue);
+        }
+        if (rowKeyValue) {
+            setHighlightedRowClasses(state, rowKeyValue);
+        }
+    }
+    // Convert rowKeyValue to string since it will get converted to a string
+    // when set as a data-attribute on the row element and we need to compare
+    state.focusedRowKeyValue = rowKeyValue.toString();
+}

package/src/lightning/datatable/virtualization.js

@@ -62,7 +62,7 @@ export function handleVariableRowHeights(template, state, renderedRows, refs) {
     };
     let adjustFromIndex;
     let adjustmentValue = 0;
-    let offsetRangeIndex = findOffsetRangeIndex(
+    const offsetRangeIndex = findOffsetRangeIndex(
         state.offsetRanges,
         currentRange.start
     );
@@ -113,7 +113,7 @@ export function findFirstVisibleIndex(state, scrollTop) {
     let end = offsetRanges.length - 1;
 
     while (start <= end) {
-        let mid = Math.floor((start + end) / 2);
+        const mid = Math.floor((start + end) / 2);
         const prevRange = offsetRanges[mid];
         const nextRange = offsetRanges[mid + 1];
         const startOffset = offsets[prevRange.start];
@@ -190,7 +190,7 @@ function findOffsetRangeIndex(offsetRanges, rowIndex) {
     let start = 0;
     let end = offsetRanges.length - 1;
     while (start <= end) {
-        let mid = Math.floor((start + end) / 2);
+        const mid = Math.floor((start + end) / 2);
         const currentRangeStartsBeforeRowIndex =
             offsetRanges[mid].start <= rowIndex;
         const nextRangeStartsBeforeRowIndex =
@@ -225,7 +225,7 @@ function findOffsetRangeIndex(offsetRanges, rowIndex) {
  * @param {number} height - height of row's node
  */
 function setOffset(state, row, offsetRangeIndex, height) {
-    let currentRange = state.offsetRanges[offsetRangeIndex];
+    const currentRange = state.offsetRanges[offsetRangeIndex];
     let currentOffset = state.offsets[row.rowIndex];
     // if no offset is set for current row, estimate it
     // based on most recent offset and default rowHeight
@@ -261,8 +261,8 @@ function updateOffsetRanges(
     adjustmentValue
 ) {
     const { offsets, offsetRanges } = state;
-    let prevRange = offsetRanges[offsetRangeIndex];
-    let nextRange = offsetRanges[offsetRangeIndex + 1];
+    const prevRange = offsetRanges[offsetRangeIndex];
+    const nextRange = offsetRanges[offsetRangeIndex + 1];
     const overlapsWithPrevRange =
         prevRange && checkOverlap(prevRange, currentRange);
     const overlapsWithNextRange =
@@ -272,7 +272,7 @@ function updateOffsetRanges(
     // adjustment value if we're overlapping it
     if (overlapsWithNextRange && adjustmentValue) {
         for (let i = adjustFromIndex; i <= nextRange.end; i++) {
-            offsets[i] = offsets[i] + adjustmentValue;
+            offsets[i] += adjustmentValue;
         }
     }
 
@@ -288,12 +288,12 @@ function updateOffsetRanges(
         nextRange.end = Math.max(currentRange.end, nextRange.end);
         // increase offsetRangeIndex; since it's values have already been updated
         // we want to skip it when adjusting offsets in later ranges
-        offsetRangeIndex = offsetRangeIndex + 1;
+        offsetRangeIndex += 1;
     } else {
         state.offsetRanges.splice(offsetRangeIndex + 1, 0, currentRange);
         // need to increase offsetRangeIndex so we don't
         // unnecessarily add adjustmentValue to currentRange
-        offsetRangeIndex = offsetRangeIndex + 1;
+        offsetRangeIndex += 1;
     }
 
     // loop through every offset range after the current one
@@ -302,7 +302,7 @@ function updateOffsetRanges(
         for (let i = offsetRangeIndex + 1; i < offsetRanges.length; i++) {
             const { start: rangeStart, end: rangeEnd } = offsetRanges[i];
             for (let j = rangeStart; j <= rangeEnd; j++) {
-                offsets[j] = offsets[j] + adjustmentValue;
+                offsets[j] += adjustmentValue;
             }
         }
     }
@@ -338,7 +338,7 @@ function updateVirtualizeStyles(template, state, renderedRows, refs) {
     renderedRows.forEach((row, index) => {
         let top = state.offsets[row.rowIndex];
         if (addOffset && !index) {
-            top = top + 1; // reset first rendered row to offset in state
+            top += 1; // reset first rendered row to offset in state
         }
         row.style = `position:absolute;top:${top}px;`;
     });

package/src/lightning/datatable/wrapText.js

@@ -24,7 +24,7 @@ const i18n = {
     wrapText: labelWrapText,
 };
 
-/************************** WRAP TEXT STATE **************************/
+/** ************************ WRAP TEXT STATE **************************/
 
 /**
  * Normalizes the value for the column's wrapText property
@@ -40,7 +40,7 @@ export function setWrapTextState(col) {
     }
 }
 
-/************************** WRAP TEXT MAX LINES **************************/
+/** ************************ WRAP TEXT MAX LINES **************************/
 
 /**
  * Normalizes and sets wrapTextMaxLines in datatable state object.
@@ -74,7 +74,7 @@ function updateWrapTextAndMaxLinesValuesInCells(state, colIndex) {
     }
 }
 
-/************************** HEADER ACTIONS **************************/
+/** ************************ HEADER ACTIONS **************************/
 
 /**
  * Returns an object representing the two internal header actions that datatable

package/src/lightning/datatableKeyboardMixins/baseNavigation.js

@@ -5,7 +5,7 @@
  */
 import { api, track } from 'lwc';
 import { queryFocusable } from 'lightning/utils';
-import { privateContext } from 'lightning/utilsPrivate';
+import { privateContext } from 'lightning/utilsInternal';
 
 const handleArrowLeft = Symbol('handleArrowLeft');
 const handleArrowRight = Symbol('handleArrowRight');

package/src/lightning/datepicker/datepicker.html

@@ -3,7 +3,7 @@
         <template if:false={hasExternalLabel}>
             <label class={computedLabelClass} for="input" part="label">
                 <template if:true={required}>
-                    <abbr class="slds-required" title={i18n.required}>*</abbr>
+                    <abbr class="slds-required" title={i18n.required} aria-hidden="true">*</abbr>
                 </template>
                 {label}
             </label>

package/src/lightning/datepicker/datepicker.js

@@ -15,10 +15,12 @@ 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';
+// eslint-disable-next-line @lwc/lwc/ssr-no-form-factor
+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';
@@ -36,18 +38,19 @@ import {
     getRealDOMId,
     computeAriaInvalid,
     reflectAttribute,
-    isCSR,
 } from 'lightning/utilsPrivate';
 import {
     generateUniqueId,
     normalizeVariant,
     VARIANT,
 } from 'lightning/inputUtils';
+import { isValidISODateTimeString } from 'lightning/iso8601Utils';
 import {
     handleKeyDownOnDatePickerIcon,
     handleBasicKeyDownBehaviour,
 } from './keyboard';
 import AriaObserver from 'lightning/ariaObserver';
+import { features } from 'lightning/features';
 
 const i18n = {
     invalidDate: labelInvalidDate,
@@ -77,6 +80,7 @@ const DATE_STYLE = {
     MEDIUM: 'medium',
     LONG: 'long',
 };
+const DATE_EXAMPLE = '2024-12-31';
 
 export default class LightningDatePicker extends LightningShadowBaseClass {
     @track _disabled = false;
@@ -389,11 +393,15 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
 
     renderedCallback() {
         if (this.showFormatHelpText && !this.pointerEventAdded) {
+            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
             document.addEventListener('pointerdown', this.handlePointerDown);
+            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
             document.addEventListener('pointerup', this.handlePointerUp);
             this.pointerEventAdded = true;
         } else if (!this.showFormatHelpText && this.pointerEventAdded) {
+            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
             document.removeEventListener('pointerdown', this.handlePointerDown);
+            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
             document.removeEventListener('pointerup', this.handlePointerUp);
             this.pointerEventAdded = false;
         }
@@ -484,7 +492,12 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
 
     @api
     hasBadInput() {
-        return !!this._displayValue && this._value === null;
+        return (
+            !!this._displayValue &&
+            (this._value === null ||
+                (features.enableDateInvalidYearHandling &&
+                    !isValidISODateTimeString(this.value)))
+        );
     }
 
     @api
@@ -543,7 +556,7 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     }
 
     get dateFormatExample() {
-        return getDateFormatFromStyle(this.dateStyle, true);
+        return normalizeISODate(DATE_EXAMPLE, this.dateStyle).displayValue;
     }
 
     get dateFormatText() {
@@ -748,6 +761,7 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         }
 
         if (!this._focused) {
+            // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
             this.dispatchEvent(new CustomEvent('focus'));
         }
         this._focused = true;
@@ -761,11 +775,12 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     onFocusOut() {
         // This assumes that a focusin will be dispatched after a focusout
         this._pendingFocusOut = true;
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
+        // eslint-disable-next-line @lwc/lwc/no-async-operation, @lwc/lwc/ssr-no-restricted-browser-globals
         requestAnimationFrame(() => {
             if (this._pendingFocusOut) {
                 this._focused = false;
                 this.hideCalendar();
+                // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
                 this.dispatchEvent(new CustomEvent('blur'));
             }
         });
@@ -818,8 +833,9 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     showAndFocusCalendar() {
         this.showCalendar();
 
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
+        // eslint-disable-next-line @lwc/lwc/no-async-operation, @lwc/lwc/ssr-no-restricted-browser-globals
         requestAnimationFrame(() => {
+            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
             this.focusCalendar();
         });
     }
@@ -827,7 +843,7 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     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
@@ -835,6 +851,7 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
             } else {
                 this.calendarTrigger.focus();
             }
+        }
     }
 
     focusCalendar() {
@@ -845,6 +862,20 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     }
 
     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: () =>
@@ -865,6 +896,7 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
                 },
                 autoFlip: true, // Auto flip direction if not have enough space
                 leftAsBoundary: true, // horizontal flip uses target left as boundary
+                ...reflowResizeConfig,
             });
         } else {
             this._relationship.reposition();
@@ -908,8 +940,25 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
         return this.template.querySelector('lightning-button-icon');
     }
 
+    // Lightning calendar DOM
+    get lightningCalendarElement() {
+        return this.template.querySelector('lightning-calendar');
+    }
+
+    get isReflowResizeActivated() {
+        return (
+            this.lightningCalendarElement &&
+            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
+            window.innerWidth < 641 &&
+            formFactor === 'Large' &&
+            orgHasA11yResizeReflow
+        );
+    }
+
     dispatchChangeEvent() {
+        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
         this.dispatchEvent(
+            // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
             new CustomEvent('change', {
                 composed: true,
                 bubbles: true,
@@ -944,7 +993,7 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     }
 
     get computedAriaInvalid() {
-        const dataAriaInvalid = isCSR
+        const dataAriaInvalid = !import.meta.env.SSR
             ? this.template.host.getAttribute('data-aria-invalid')
             : null;
         const isAriaInvalid = dataAriaInvalid || this._errorMessage;

package/src/lightning/datepicker/input-text.slds.css

@@ -1,5 +1,5 @@
 /*******************************************
-* Imported dependency from @salesforce-ux/sds-primitives/src/sds/inputText/inputText.css
+* Imported dependency from @salesforce-ux/sds-components/src/sds/inputText/inputText.css
 *******************************************/
 /**
  * Input container
@@ -466,6 +466,10 @@
 .slds-input-has-icon_left-right .slds-input__icon_left {
   inset-inline-start: var(--slds-g-spacing-3);
 }
+:host([data-render-mode="shadow"]) .slds-input-has-icon_left lightning-primitive-icon::part(icon) {
+  /* Native Shadow CSS deviates from synthetic in that it does not require different styling for inline variant */
+  left: var(--slds-g-spacing-2);
+}
 /**
    * Has Icon Right
    */

package/src/lightning/datetimepicker/datetimepicker.html

@@ -2,10 +2,12 @@
     <div class="slds-form" tabindex="-1">
         <fieldset class="slds-form-element slds-form-element_compound">
             <template if:false={hasExternalLabel}>
-                <legend class={computedLabelClass}>
-                    {label}
-                </legend>
-                <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
+                <legend class={computedLabelClass}>{label}</legend>
+                <lightning-helptext
+                    if:true={fieldLevelHelp}
+                    content={fieldLevelHelp}
+                    alternative-text={helptextAlternativeText}
+                ></lightning-helptext>
             </template>
             <div class="slds-form-element__control">
                 <div class="slds-form-element__group">
@@ -33,7 +35,6 @@
                             external-error-message={customErrorMessage}
                         >
                         </lightning-datepicker>
-
                         <lightning-timepicker
                             data-aria-invalid={computedTimeAriaInvalid}
                             class="slds-form-element"
@@ -46,6 +47,7 @@
                             readonly={readOnly}
                             required={required}
                             disabled={disabled}
+                            time-step-minutes={timeStepMinutes}
                             onfocus={handleTimepickerFocus}
                             onblur={handleTimepickerBlur}
                             onchange={handleTimeChange}
@@ -57,8 +59,15 @@
                     </div>
                 </div>
             </div>
-            <div data-error-message id="errormessage" data-name={name} class="slds-form-element__help" aria-live="polite">{customErrorMessage}</div>
-
+            <div
+                data-error-message
+                id="errormessage"
+                data-name={name}
+                class="slds-form-element__help"
+                aria-live="polite"
+            >
+                {customErrorMessage}
+            </div>
         </fieldset>
     </div>
 </template>

package/src/lightning/datetimepicker/datetimepicker.js

@@ -19,14 +19,13 @@ import {
     synchronizeAttrs,
     computeAriaInvalid,
     reflectAttribute,
-    isCSR,
 } from 'lightning/utilsPrivate';
 import {
     getCurrentTimeString,
-    getDateFormatFromStyle,
     normalizeISODateTime,
     normalizeFormattedDateTime,
     isAuraL10NAvailable,
+    normalizeISODate,
 } from 'lightning/internationalizationLibrary';
 import { TIME_SEPARATOR } from 'lightning/iso8601Utils';
 import {
@@ -45,6 +44,7 @@ const i18n = {
     valueMissingWithDateFormat: labelValueMissingWithDateFormat,
     customErrorWithDateFormat: labelCustomErrorWithDateFormat,
 };
+const DATE_EXAMPLE = '2024-12-31';
 
 export default class LightningDateTimePicker extends LightningShadowBaseClass {
     static delegatesFocus = true;
@@ -76,6 +76,15 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
 
     @api rootAriaNode;
 
+    /**
+     * Specifies the time interval in minutes for the dropdown options.
+     * Any positive integer above or equal to 5 is valid.
+     * The default is 15 minutes.
+     * @type {number}
+     * @default 15
+     */
+    @api timeStepMinutes;
+
     /**
      * Controls auto-filling of the input. Set the attribute to pass
      * through autocomplete values to be interpreted by the browser.
@@ -261,7 +270,7 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
         } else if (isAuraL10NAvailable) {
             return sfTimeZone;
         }
-        return Intl.DateTimeFormat().resolvedOptions().timeZone;
+        return new Intl.DateTimeFormat().resolvedOptions().timeZone;
     }
 
     @api
@@ -424,7 +433,7 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
     }
 
     get dateFormatExample() {
-        return getDateFormatFromStyle(this.dateStyle, true);
+        return normalizeISODate(DATE_EXAMPLE, this.dateStyle).displayValue;
     }
 
     get i18n() {
@@ -444,7 +453,7 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
     }
 
     get errorMessageElement() {
-        return isCSR
+        return !import.meta.env.SSR
             ? this.template.querySelector('[data-error-message]')
             : null;
     }
@@ -466,7 +475,7 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
     }
 
     synchronizeA11y() {
-        if (!isCSR) {
+        if (import.meta.env.SSR) {
             return;
         }
         const datepicker = this.template.querySelector('lightning-datepicker');
@@ -509,10 +518,12 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
         });
 
         this.interactingState.onenter(() => {
+            // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
             this.dispatchEvent(new CustomEvent('focus'));
         });
 
         this.interactingState.onleave(() => {
+            // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
             this.dispatchEvent(new CustomEvent('blur'));
         });
     }
@@ -633,6 +644,7 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
     }
 
     dispatchChangeEvent() {
+        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
         this.dispatchEvent(
             new CustomEvent('change', {
                 composed: true,
@@ -721,10 +733,16 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
     }
 
     get computedDateAriaInvalid() {
-        return computeAriaInvalid(this._customErrorMessage, this._dateValue);
+        return (
+            computeAriaInvalid(this._customErrorMessage, this._dateValue) ||
+            undefined
+        );
     }
     get computedTimeAriaInvalid() {
-        return computeAriaInvalid(this._customErrorMessage, this._timeValue);
+        return (
+            computeAriaInvalid(this._customErrorMessage, this._timeValue) ||
+            undefined
+        );
     }
 
     get helptextAlternativeText() {

package/src/lightning/datetimepicker/input-text.slds.css

@@ -1,5 +1,5 @@
 /*******************************************
-* Imported dependency from @salesforce-ux/sds-primitives/src/sds/inputText/inputText.css
+* Imported dependency from @salesforce-ux/sds-components/src/sds/inputText/inputText.css
 *******************************************/
 /**
  * Input container
@@ -466,6 +466,10 @@
 .slds-input-has-icon_left-right .slds-input__icon_left {
   inset-inline-start: var(--slds-g-spacing-3);
 }
+:host([data-render-mode="shadow"]) .slds-input-has-icon_left lightning-primitive-icon::part(icon) {
+  /* Native Shadow CSS deviates from synthetic in that it does not require different styling for inline variant */
+  left: var(--slds-g-spacing-2);
+}
 /**
    * Has Icon Right
    */