lightning-base-components 1.13.6-alpha → 1.14.1-alpha

package/src/lightning/primitiveHeaderFactory/selectableHeader.html

@@ -1,30 +1,32 @@
 <template>
-    <div class="slds-th__action slds-th__action_form slds-cell-fixed"
-         style={columnStyles}>
+    <!-- Header Content -->
+    <div class="slds-th__action slds-th__action_form slds-cell-fixed" style={columnStyles}>
         <template if:true={showCheckbox}>
-                 <span class="slds-checkbox">
-                    <input
-                        type="checkbox"
-                        class="datatable-select-all"
-                        name={computedOptionName}
-                        id="lgt-dt-header-factory-id"
-                        onclick={handleSelectAllRows}
-                        tabindex={internalTabIndex}
-                        data-navigation="enable"
-                        disabled={def.isBulkSelectionDisabled}
-                    >
-                    <label class="slds-checkbox__label" for="lgt-dt-header-factory-id">
-                        <span class="slds-checkbox_faux"></span>
-                        <span class="slds-form-element__label slds-assistive-text">
-                            {i18n.selectAll}
-                        </span>
-                    </label>
-                 </span>
+            <span class="slds-checkbox">
+                
+                <!-- Selectable Checkbox -->
+                <input
+                    type="checkbox"
+                    class="datatable-select-all"
+                    name={computedOptionName}
+                    id="lgt-dt-header-factory-id"
+                    onclick={handleSelectAllRows}
+                    tabindex={internalTabIndex}
+                    data-navigation="enable"
+                    disabled={def.isBulkSelectionDisabled}>
+
+                <label class="slds-checkbox__label" for="lgt-dt-header-factory-id">
+                    <span class="slds-checkbox_faux"></span>
+                    <span class="slds-form-element__label slds-assistive-text">
+                        {i18n.selectAll}
+                    </span>
+                </label>
+            </span>
         </template>
         <template if:false={showCheckbox}>
-                 <span id="column-group-header" class="slds-assistive-text" data-column-header>
-                     {i18n.chooseARow}
-                 </span>
+            <span id="column-group-header" class="slds-assistive-text" data-column-header>
+                {i18n.chooseARow}
+            </span>
         </template>
     </div>
 </template>

package/src/lightning/primitiveHeaderFactory/sortableHeader.html

@@ -1,19 +1,19 @@
 <template>
-    <span
-        class={computedClass}
-        tabindex={internalTabIndex}
-        style={columnStyles}
-    >
+    <!-- Header Content -->
+    <span class={computedClass} tabindex={internalTabIndex} style={columnStyles}>
+        
         <a href="javascript:void(0);"
            class={computedSortClass}
            role={headerRole}
            tabindex={internalTabIndex}
            data-navigation="enable"
            onclick={handleSortingClick}
-           style={columnStyles} data-action-triggers="enter">
+           style={columnStyles}
+           data-action-triggers="enter">
 
             <span class="slds-assistive-text">{i18n.sort}</span>
 
+            <!-- Icon to display to the left/start of the header text -->
             <template if:true={def.iconName}>
                 <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                     <lightning-icon icon-name={def.iconName} size="x-small" class="slds-icon_container slds-m-right_xx-small" alternative-text={def.label} title={def.label}></lightning-icon>
@@ -21,17 +21,18 @@
                         <span class="slds-truncate">{def.label}</span>
                     </template>
 
+                    <!-- Arrow Icon - Rotates based on sorting direction -->
                     <lightning-primitive-icon
                          class="slds-icon_container"
                          svg-class="slds-icon slds-icon-text-default slds-is-sortable__icon"
                          icon-name="utility:arrowdown"
                          size="x-small">
                     </lightning-primitive-icon>
-
                 </div>
             </template>
             <template if:false={def.iconName}>
                 <span class="slds-truncate" title={def.label}>{def.label}</span>
+                <!-- Arrow Icon - Rotates based on sorting direction -->
                     <lightning-primitive-icon
                          class="slds-icon_container"
                          svg-class="slds-icon slds-icon-text-default slds-is-sortable__icon"
@@ -41,17 +42,20 @@
             </template>
         </a>
 
+        <!-- Aria Live Region to announce sorting order -->
         <span class="slds-assistive-text" aria-live="polite" aria-atomic="true">{sortedOrderLabel}</span>
 
+        <!-- Header Actions -->
         <template if:true={hasActions}>
             <lightning-primitive-header-actions
                 col-key-value={def.colKeyValue}
                 actions={actions}
                 tabindex={internalTabIndex}
-                data-navigation="enable"
-            ></lightning-primitive-header-actions>
+                data-navigation="enable">
+            </lightning-primitive-header-actions>
         </template>
 
+        <!-- Resize Handler -->
         <template if:true={isResizable}>
             <lightning-primitive-resize-handler
                  value={columnWidth}

package/src/lightning/progressIndicator/progressIndicator.js

@@ -93,17 +93,28 @@ export default class LightningProgressIndicator extends LightningElement {
         this.updateSteps();
     }
 
-    updateSteps(activeStep) {
+    // Added `shouldFocus` as fix for W-9862373
+    updateSteps(activeStep, shouldFocus) {
         const steps = this.getSteps();
         const { privateStepHandlers, type, hasError, currentStep } = this;
         const currentStepIndex = getCurrentStepIndex(steps, currentStep);
-        let activeStepIndex = -1;
 
+        let activeStepIndex = -1;
+        // Set activeStepIndex to activeStep if provided.
+        // This happens when focus is updated by user using arrow keys or clicking a progress step.
+        // When component re-renders, active step is not passed from renderedCallback or handleSlotChange
+        // In this scenario, use the privateActiveStepIndex to maintain the activeStep.
+        // privateActiveStepInde will have the active step before the re-render
+        // In case of initial render, privateActiveStepIndex is undefined. Use privateCurrentStep as activeStepIndex for fallback.
+        // activeStep is needed to set active class and proper tabIndex for the progress step
         if (activeStep) {
             activeStepIndex = getStepIndex(steps, activeStep);
+        } else if (this.privateActiveStepIndex !== undefined) {
+            activeStepIndex = this.privateActiveStepIndex;
         } else {
             activeStepIndex = getStepIndex(steps, this.privateCurrentStep);
         }
+
         this.privateActiveStepIndex = activeStepIndex;
 
         // cast 'steps' NodeList to an Array for crossbrowser compatibility
@@ -111,24 +122,32 @@ export default class LightningProgressIndicator extends LightningElement {
 
         stepsArray.forEach((step, index) => {
             const stepName = step.value;
-            const isActive = index === activeStepIndex;
+            const isActive = index === this.privateActiveStepIndex;
 
             if (index < currentStepIndex) {
                 privateStepHandlers[stepName](
                     STATE_COMPLETED,
                     type,
                     index,
-                    isActive
+                    isActive,
+                    shouldFocus
                 );
             } else if (index === currentStepIndex) {
                 const state = hasError ? STATE_ERROR : STATE_CURRENT;
-                privateStepHandlers[stepName](state, type, index, isActive);
+                privateStepHandlers[stepName](
+                    state,
+                    type,
+                    index,
+                    isActive,
+                    shouldFocus
+                );
             } else {
                 privateStepHandlers[stepName](
                     STATE_INCOMPLETE,
                     type,
                     index,
-                    isActive
+                    isActive,
+                    shouldFocus
                 );
             }
         });
@@ -169,15 +188,17 @@ export default class LightningProgressIndicator extends LightningElement {
                 case LEFT:
                     if (this.privateActiveStepIndex - 1 >= 0) {
                         this.updateSteps(
-                            steps[this.privateActiveStepIndex - 1].value
+                            steps[this.privateActiveStepIndex - 1].value,
+                            true // Set shouldFocus to true to focus on nthe updated progress step
                         );
                     }
                     break;
                 case DOWN:
                 case RIGHT:
-                    if (this.privateActiveStepIndex + 1 <= steps.length) {
+                    if (this.privateActiveStepIndex + 1 < steps.length) {
                         this.updateSteps(
-                            steps[this.privateActiveStepIndex + 1].value
+                            steps[this.privateActiveStepIndex + 1].value,
+                            true // Set shouldFocus to true to focus on nthe updated progress step
                         );
                     }
                     break;

package/src/lightning/progressRing/progressRing.html

@@ -29,5 +29,11 @@
                 <span class="slds-assistive-text">{computedAltText}</span>
             </span>
         </div>
+        <div class="slds-progress-ring__progress-head">
+            <svg viewBox="-1 -1 2 2">
+                <circle if:true={isProgressHeadVisible} class="slds-progress-ring__path" cx={progressHeadCenter.x} cy={progressHeadCenter.y} r="0.2">
+                </circle>
+            </svg>
+        </div>
     </div>
 </template>

package/src/lightning/progressRing/progressRing.js

@@ -1,6 +1,11 @@
 import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
 
+/**
+ * Progress head SVG element viewBox attribute is set as '-1 -1 2 2', hence viewbox height is 2 units
+ */
+export const PROGRESS_HEAD_VIEWBOX_HEIGHT = 2;
+
 /**
  * Displays a circular progress indicator to provide feedback about an action or process.
  * This component requires API version 48.0 and later.
@@ -42,6 +47,94 @@ export default class progressRing extends LightningElement {
      */
     @api size = 'medium';
 
+    arcY = 0;
+    arcX = 0;
+    radiusOfCircularMotionForProgressHead = 0;
+
+    isRendered = false;
+
+    /**
+     * Calculates the radius along which to rotate the SVG circle element present inside
+     * ".slds-progress-ring__progress-head" container element.
+     */
+    calculateRadiusOfCircularMotionForProgressHead() {
+        const progressHeadContainerHeight = parseFloat(
+            getComputedStyle(
+                this.template.querySelector(
+                    '.slds-progress-ring__progress-head'
+                )
+            ).height
+        );
+        const progressArcContainerHeight = parseFloat(
+            getComputedStyle(
+                this.template.querySelector('.slds-progress-ring__progress')
+            ).height
+        );
+        const progressContentContainerHeight = parseFloat(
+            getComputedStyle(
+                this.template.querySelector('.slds-progress-ring__content')
+            ).height
+        );
+        // NOTE:- The progress-head SVG viewbox attribute is set as '-1 -1 2 2', which means the "2" units
+        // height and width of viewbox would correspond to the actual height/width of the SVG in pixels.
+        // ex:- If the SVG's actual widthxheight in pixels is 32x32, then inside the viewbox the "32px" would
+        // correspond to "2" units. This means the viewbox scales down lengths to it's own units between 0 and 2.
+        // So to work with actual lengths in pixels inside the viewbox, you have to first convert the pixel length
+        // to "viewbox length" units.
+        // ex:- Continuing from previous example, If 32px is 2 units inside viewbox, how many units is 24px?
+        // it will be 24 * (2 / 32).
+        // Therefore, you need a "length scaling factor" to find the "viewbox length" for a given pixel length. The
+        // (2 / 32) in the previous example is the "length scaling factor"
+        const lengthScalingFactorInProgressHeadViewBox =
+            PROGRESS_HEAD_VIEWBOX_HEIGHT / progressHeadContainerHeight;
+        const radiusOfProgressArcInPixels = progressArcContainerHeight / 2;
+        const radiusOfProgressArcInProgressHeadViewBox =
+            radiusOfProgressArcInPixels *
+            lengthScalingFactorInProgressHeadViewBox;
+
+        // Note:- The progress-content container element partially overlaps the progress-arc container
+        // element like a concentric circle inside another circle. So the width of the progress arc that is visible to the user
+        // is equal to the length of the non-overlapping part between them.
+        const radiusOfProgressContentInPixels =
+            progressContentContainerHeight / 2;
+        const widthOfArcInPixels =
+            radiusOfProgressArcInPixels - radiusOfProgressContentInPixels;
+        const widthOfArcInProgressHeadViewBox =
+            widthOfArcInPixels * lengthScalingFactorInProgressHeadViewBox;
+
+        // Note:- Here the intent is to move the progress-head circle svg element
+        // along the midpoint of the progress arc width.
+        this.radiusOfCircularMotionForProgressHead =
+            radiusOfProgressArcInProgressHeadViewBox -
+            widthOfArcInProgressHeadViewBox / 2;
+    }
+
+    renderedCallback() {
+        if (this.isRendered) {
+            return;
+        }
+        this.calculateRadiusOfCircularMotionForProgressHead();
+        this.isRendered = true;
+    }
+
+    get progressHeadCenter() {
+        // Note:- Formula is x = radius * Cosine(theta), y = radius * Sine(theta), and here
+        // arcX = Cosine(theta), arcY = Sine(theta) calculated already in the method "get d()"
+        const x = this.arcX * this.radiusOfCircularMotionForProgressHead;
+        const y = this.arcY * this.radiusOfCircularMotionForProgressHead;
+        return {
+            x,
+            y,
+        };
+    }
+
+    get isProgressHeadVisible() {
+        if (this.value > 0 && this.value < 100) {
+            return true;
+        }
+        return false;
+    }
+
     get d() {
         const fillPercent = this.value / 100;
         const filldrain = this.direction === 'drain' ? 1 : 0;
@@ -50,10 +143,12 @@ export default class progressRing extends LightningElement {
 
         const subCalc = 2 * Math.PI * fillPercent;
 
-        const arcx = Math.cos(subCalc);
-        const arcy = Math.sin(subCalc) * inverter;
+        // Note:- The formula is x = radius * Cosine(theta), y = radius * Sine(theta) with appropriate signs (+ / -), and
+        // here the radius is 1 unit implicitly as per the svg's viewBox attribute.
+        this.arcX = Math.cos(subCalc);
+        this.arcY = Math.sin(subCalc) * inverter;
 
-        return `M 1 0 A 1 1 0 ${islong} ${filldrain} ${arcx} ${arcy} L 0 0`;
+        return `M 1 0 A 1 1 0 ${islong} ${filldrain} ${this.arcX} ${this.arcY} L 0 0`;
     }
 
     get iconSvg() {

package/src/lightning/progressStep/progressStep.js

@@ -33,12 +33,14 @@ export default class LightningProgressStep extends LightningElement {
 
     @track state = {};
 
-    updateInternal(newStatus, newType, newIndex, newActive) {
+    updateInternal(newStatus, newType, newIndex, newActive, shouldFocus) {
         classListMutation(
             this.classList,
             this.computeClassSet(newType, newStatus, newActive)
         );
-        if (newActive === true) {
+        // Added `shouldFocus` as fix for W-9862373
+        // This ensures progressStep is focused only when this argument is true.
+        if (newActive === true && shouldFocus) {
             this.focusPathLink();
         }
         this.state.status = newStatus;
@@ -85,7 +87,8 @@ export default class LightningProgressStep extends LightningElement {
             'slds-is-completed': !isPath && status === 'completed',
             'slds-has-error': !isPath && status === 'error',
             'slds-is-active':
-                isActive === true || (type === 'base' && status === 'current'),
+                (type !== 'base' && isActive === true) ||
+                (type === 'base' && status === 'current'),
             'slds-path__item': isPath,
             'slds-is-complete': isPath && status === 'completed',
             'slds-is-current':

package/src/lightning/timepicker/timepicker.html

@@ -18,6 +18,7 @@
             placeholder={placeholder}
             disabled={disabled}
             readonly={readOnly}
+            required={required}
             items={items}
             input-text={displayValue}
             input-icon-name="utility:clock"

package/src/lightning/utilsPrivate/aria.js

@@ -17,6 +17,7 @@ const ARIA_PROP_LIST = [
     'current',
     'describedAt',
     'describedBy',
+    'description',
     'details',
     'disabled',
     'dropEffect',
@@ -105,3 +106,32 @@ export const ARIA = getAriaLookup(ARIA_PROP_LIST);
  * Useful for converting from normal aria properties to aria camel cased values
  */
 export const ARIA_TO_CAMEL = getAriaLookup(ARIA_PROP_LIST, 'cc');
+
+/**
+ * Set either 'aria-describedby' or 'aria-description' value for accessibility
+ * based on the presence of 'description' api value and support of the newer ARIA
+ * 'aria-description'.  At launch, Firefox, Safari do not support it (and IE11 never will).
+ * https://caniuse.com/mdn-api_element_ariadescription
+ * @private
+ * @returns {boolean} true indicates aria-description is supported; false, no support
+ */
+// cached value, so check once and only once
+let ariaDescriptionSupported = null;
+
+export function isAriaDescriptionSupported() {
+    // return previously cached value, don't recheck
+    if (ariaDescriptionSupported !== null) {
+        return ariaDescriptionSupported;
+    }
+    // if not previously set, test for browser support
+    const testVal = 'test ability to set';
+    const span = document.createElement('span');
+    try {
+        span.ariaDescription = testVal;
+        const ariaDescVal = span.getAttribute(ARIA.DESCRIPTION);
+        ariaDescriptionSupported = testVal === ariaDescVal;
+    } catch (e) {
+        ariaDescriptionSupported = false;
+    }
+    return ariaDescriptionSupported;
+}

package/src/lightning/utilsPrivate/utilsPrivate.js

@@ -1,5 +1,5 @@
 export { assert } from './assert';
-export { ARIA, ARIA_TO_CAMEL } from './aria';
+export { ARIA, ARIA_TO_CAMEL, isAriaDescriptionSupported } from './aria';
 export { EventEmitter } from './eventEmitter';
 export { toNorthAmericanPhoneNumber } from './phonify';
 export * from './linkUtils';
@@ -23,7 +23,6 @@ export {
 } from './keyboard';
 export { raf } from './scroll';
 export { isChrome, isIE11, isSafari } from './browser';
-export { ContentMutation } from './contentMutation';
 export { observePosition } from './observers';
 export { hasOnlyAllowedVideoIframes } from './videoUtils';
 export {
@@ -212,3 +211,14 @@ export function buttonGroupOrderClass(groupOrder) {
         [BUTTON_GROUP_ORDER.ONLY]: 'single-button',
     }[groupOrder];
 }
+
+/**
+ * Checks if the given component is native
+ * @param {Object} cmp Component instance
+ * @returns {Boolean} Whether the component is native
+ */
+export function isNativeComponent(cmp) {
+    return !String(cmp?.template?.constructor).includes(
+        'function SyntheticShadowRoot'
+    );
+}