lightning-base-components 1.13.9-alpha → 1.14.1-alpha

package/src/lightning/primitiveHeaderFactory/primitiveHeaderFactory.js

@@ -181,44 +181,51 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     }
 
     /**
-     * Determines if sort direction is set to ascending
+     * Computes an option name
      *
-     * @return {boolean} Whether the sort direction is ascending
+     * @return {string} The computed option name
      */
-    get isAscSorted() {
-        return this.sortedDirection === 'asc';
+    get computedOptionName() {
+        return `${this.dtContextId}-options`;
     }
 
     /**
-     * Determines if sort direction is set to descending
+     * Determines if the header has actions available
      *
-     * @return {boolean} Whether the sort direction is descending
+     * @return {boolean} Whether the header has available actions
      */
-    get isDescSorted() {
-        return this.sortedDirection === 'desc';
+    get hasActions() {
+        return (
+            this.actions.customerActions.length > 0 ||
+            this.actions.internalActions.length > 0
+        );
     }
 
     /**
-     * Returns the sort order label in the appropriate language
+     * Returns the header's aria role
      *
-     * @return {string} Language-specific sort order label
+     * @return {string|boolean} The aria role for the header
      */
-    get sortedOrderLabel() {
-        if (this.sorted) {
-            return this.sortedDirection === 'desc'
-                ? i18n.sortDesc
-                : i18n.sortAsc;
-        }
-        return i18n.sortNone;
+    get headerRole() {
+        return this.isResizable || this.sortable ? 'button' : false;
     }
 
     /**
-     * Determines if the header is selectable
+     * Determines if sort direction is set to ascending
      *
-     * @return {boolean} Whether the header is selectable
+     * @return {boolean} Whether the sort direction is ascending
      */
-    get isSelectableHeader() {
-        return this.def.type === 'SELECTABLE_CHECKBOX';
+    get isAscSorted() {
+        return this.sortedDirection === 'asc';
+    }
+
+    /**
+     * Determines if sort direction is set to descending
+     *
+     * @return {boolean} Whether the sort direction is descending
+     */
+    get isDescSorted() {
+        return this.sortedDirection === 'desc';
     }
 
     /**
@@ -239,6 +246,15 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         return this.resizable && this.def.resizable !== false;
     }
 
+    /**
+     * Determines if the header is selectable
+     *
+     * @return {boolean} Whether the header is selectable
+     */
+    get isSelectableHeader() {
+        return this.def.type === 'SELECTABLE_CHECKBOX';
+    }
+
     /**
      * Determines if the header is sortable
      *
@@ -257,15 +273,6 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
         return i18n;
     }
 
-    /**
-     * Returns the header's aria role
-     *
-     * @return {string|boolean} The aria role for the header
-     */
-    get headerRole() {
-        return this.isResizable || this.sortable ? 'button' : false;
-    }
-
     /**
      * Returns the header's resize step
      *
@@ -276,24 +283,17 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
     }
 
     /**
-     * Computes an option name
-     *
-     * @return {string} The computed option name
-     */
-    get computedOptionName() {
-        return `${this.dtContextId}-options`;
-    }
-
-    /**
-     * Determines if the header has actions available
+     * Returns the sort order label in the appropriate language
      *
-     * @return {boolean} Whether the header has available actions
+     * @return {string} Language-specific sort order label
      */
-    get hasActions() {
-        return (
-            this.actions.customerActions.length > 0 ||
-            this.actions.internalActions.length > 0
-        );
+    get sortedOrderLabel() {
+        if (this.sorted) {
+            return this.sortedDirection === 'desc'
+                ? i18n.sortDesc
+                : i18n.sortAsc;
+        }
+        return i18n.sortNone;
     }
 
     /************************** LIFECYCLE HOOKS **************************/

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

@@ -100,18 +100,16 @@ export default class LightningProgressIndicator extends LightningElement {
         const currentStepIndex = getCurrentStepIndex(steps, currentStep);
 
         let activeStepIndex = -1;
-
-        // Set activeStep index to activeStep if provided.
+        // 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 null. Use privateCurrentStep as activeStepIndex for fallback.
+        // 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) {
+        } else if (this.privateActiveStepIndex !== undefined) {
             activeStepIndex = this.privateActiveStepIndex;
         } else {
             activeStepIndex = getStepIndex(steps, this.privateCurrentStep);

package/src/lightning/progressStep/progressStep.js

@@ -87,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/utilsPrivate/utilsPrivate.js

@@ -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'
+    );
+}

package/src/lightning/utilsPrivate/contentMutation.js

@@ -1,295 +0,0 @@
-import { guid } from './guid';
-import { smartSetAttribute } from './smartSetAttribute';
-
-const CONTENT_SEPARATOR = '\n';
-
-/**
-<template>
-    <span lwc:dom="manual" class="visually-hidden"></span>
-    <input>
-</template>
-
-class Foo extends LightningElement {
-    constructor() {
-        super();
-        this.ariaObserver = new ContentMutation(this);
-    }
-
-    connectedCallback() {
-        if (!this.ariaObserver) {
-            this.ariaObserver = new ContentMutation(this);
-        }
-    }
-
-    disconnectedCallback() {
-        if (this.ariaObserver) {
-            this.ariaObserver.disconnect();
-            this.ariaObserver = undefined;
-        }
-    }
-
-    @track ariaLabeledbyValue = '';
-
-    @api
-    get ariaLabeledby() {
-        return this.ariaLabeledbyValue; // whatever they set, is what they get back.
-    }
-    set ariaLabeledby(refs) {
-        this.ariaLabeledbyValue = refs;
-        this.ariaObserver.link('input', 'aria-labeledby', refs, 'span.visually-hidden');
-    }
-
-    renderedCallback() {
-        this.ariaObserver.sync();
-    }
-}
-**/
-
-function getAttr(elm, attr) {
-    if (elm.tagName.match(/lightning/i)) {
-        return elm[attr];
-    }
-    return elm.getAttribute(attr);
-}
-
-function extractElements(root, selector) {
-    if (typeof selector !== 'string' || selector === '') {
-        return [];
-    }
-    return [].slice.call(root.querySelectorAll(selector));
-}
-
-function extractContent(elements) {
-    return elements
-        .map((element) => element.textContent)
-        .filter((text) => text.length)
-        .join(CONTENT_SEPARATOR);
-}
-
-function splitIds(ids) {
-    return (ids + '').trim().split(/\s+/);
-}
-
-function hashIds(ids) {
-    return (ids + '')
-        .trim()
-        .split(/\s+/)
-        .reduce((r, v) => {
-            r[v] = 1;
-            return r;
-        }, {});
-}
-
-// this method should check each individual id from computedIds
-// against the existing value of the attrName on elm, and dupe
-// them, and add the new ones.
-function addAriaRefWhenNeeded(elm, attrName, computedIds) {
-    const newIds = splitIds(computedIds);
-    const oldIds = getAttr(elm, attrName) || '';
-    const oldIdsHash = hashIds(oldIds);
-    const suffix = [];
-    for (let i = 0; i < newIds.length; i += 1) {
-        if (!oldIdsHash[newIds[i]]) {
-            suffix.push(newIds[i]);
-        }
-    }
-
-    if (suffix.length !== 0) {
-        smartSetAttribute(
-            elm,
-            attrName,
-            oldIds + (oldIds.length === 0 ? '' : ' ') + suffix.join(' ')
-        );
-    }
-}
-
-// this method should check each individual id from computedIds
-// against the existing value of the attrName on elm, and remove
-// them when possible in preparation for some new values.
-function removeAriaRefWhenPossible(elm, attrName, computedIds) {
-    const newIds = splitIds(computedIds);
-    const oldIds = getAttr(elm, attrName) || '';
-    const oldIdsHash = hashIds(oldIds);
-    const newValues = [];
-    for (let i = 0; i < newIds.length; i += 1) {
-        if (!oldIdsHash[newIds[i]]) {
-            newValues.push(newIds[i]);
-        }
-    }
-    smartSetAttribute(elm, attrName, newValues.join(' '));
-}
-
-export class ContentMutation {
-    constructor(component) {
-        this.component = component;
-        this.template = component.template;
-        this.isNative = this.template.constructor
-            .toString()
-            .match(/\[native code\]/);
-        this.state = {};
-        this.liveIds = {};
-        this.guid = guid();
-    }
-
-    connectLiveIdRef(refs, callback) {
-        const selector = (refs + '')
-            .trim()
-            .split(/\s+/)
-            .map((ref) => `[id*="${ref}"]`)
-            .join(',');
-        const liveId = { selector, callback };
-        this.liveIds[refs] = liveId;
-    }
-
-    link(innerSelector, attrName, ids, placeholderContainerSelector) {
-        let attrState = this.state[attrName];
-        if (attrState) {
-            // note: we don't support linking to a different innerSelector,
-            // attrName, or placeholderContainerSelector
-            if (!this.isNative) {
-                const elm = this.template.querySelector(innerSelector);
-                if (elm) {
-                    // removing the old ids if possible before setting the new ones
-                    removeAriaRefWhenPossible(elm, attrName, attrState.ids);
-                }
-                attrState.ids = ids;
-            }
-        } else {
-            attrState = this.state[attrName] = {
-                ids,
-                innerSelector,
-                placeholderContainerSelector,
-            };
-        }
-        if (this.isNative) {
-            attrState.outerSelector = (ids + '')
-                .trim()
-                .split(/\s+/)
-                .map((ref) => `#${ref}`)
-                .join(',');
-            attrState.placeholder = document.createElement('span');
-            attrState.placeholder.id = `auto-link-${attrName}-${this.guid}`;
-        }
-        if (this.component.isConnected) {
-            this.privateUpdate(attrName);
-        }
-    }
-
-    sync() {
-        if (!this.component.isConnected) {
-            throw new Error(
-                `Invalid sync invocation. It can only be invoked during renderedCallback().`
-            );
-        }
-        if (this.isNative && !this.mo) {
-            this.privateConnect();
-        }
-        for (const attrName in this.state) {
-            if (Object.prototype.hasOwnProperty.call(this.state, attrName)) {
-                this.privateUpdate(attrName);
-            }
-        }
-
-        // live idRef feature is a no-op in native
-        if (!this.isNative) {
-            this.privateUpdateLiveIds();
-        }
-    }
-
-    privateExtractIds(elements) {
-        return elements
-            .map((el) => {
-                return el.getAttribute('id');
-            })
-            .join(' ');
-    }
-
-    privateUpdateLiveIds() {
-        const root = this.template.host.getRootNode();
-
-        // if not connected do nothing
-        if (!root) {
-            return;
-        }
-        for (const liveId in this.liveIds) {
-            if (Object.prototype.hasOwnProperty.call(this.liveIds, liveId)) {
-                const thisId = this.liveIds[liveId];
-                if (!thisId.elements) {
-                    // element refs are cached
-                    thisId.elements = Array.prototype.slice.call(
-                        root.querySelectorAll(thisId.selector)
-                    );
-                }
-                const newIds = this.privateExtractIds(thisId.elements);
-                // only fire calback if the value changed
-                if (newIds !== thisId.ids) {
-                    thisId.callback(newIds);
-                    thisId.ids = newIds;
-                }
-            }
-        }
-    }
-
-    privateUpdate(attrName) {
-        const { innerSelector } = this.state[attrName];
-        const elm = this.template.querySelector(innerSelector);
-        if (!elm) {
-            return; // nothing to update
-        }
-        let computedIds;
-        if (this.isNative) {
-            const {
-                outerSelector,
-                content,
-                placeholder,
-                placeholderContainerSelector,
-            } = this.state[attrName];
-            const newContent = extractContent(
-                extractElements(this.root, outerSelector)
-            );
-            if (content !== newContent) {
-                this.state[attrName].content = placeholder.textContent =
-                    newContent;
-            }
-            if (!placeholder.parentNode) {
-                // inserting the placeholder once
-                const container = this.template.querySelector(
-                    placeholderContainerSelector
-                );
-                if (container) {
-                    container.appendChild(placeholder);
-                }
-            }
-            computedIds = placeholder.id;
-        } else {
-            computedIds = this.state[attrName].ids;
-        }
-        addAriaRefWhenNeeded(elm, attrName, computedIds);
-    }
-
-    privateConnect() {
-        // caching root ref
-        this.root = this.template.host.getRootNode();
-        // creating the observer once
-        this.mo = new MutationObserver(() => {
-            if (!this.component.isConnected) {
-                return; // do nothing when the template is not connected
-            }
-            this.sync();
-        });
-        this.mo.observe(this.root, {
-            characterData: true,
-            childList: true,
-            subtree: true,
-        });
-    }
-
-    disconnect() {
-        // MutationObservers must be disconnected manually when using @lwc/synthetic-shadow
-        // https://lwc.dev/guide/composition#:~:text=memory%20leak
-        if (this.mo) {
-            this.mo.disconnect();
-            this.mo = undefined;
-        }
-    }
-}