lightning-base-components 1.19.11-alpha → 1.20.2-alpha

package/metadata/raptor.json

@@ -642,7 +642,7 @@
     ]
   },
   "commerceApi": {},
-  "commerceChannelsManagementApi": {},
+  "commerceChannelManagementApi": {},
   "commerceConfigurationApi": {},
   "commerceEsfApi": {},
   "commerceExtensionApi": {},
@@ -709,7 +709,9 @@
   "dataProviderApi": {},
   "datatable": {
     "minVersion": "41.0",
-    "slotNames": [],
+    "slotNames": [
+      "customdatatypes"
+    ],
     "properties": [
       {
         "name": "columnWidthsMode"
@@ -2963,6 +2965,7 @@
   },
   "placeOrderApi": {},
   "placeQuoteApi": {},
+  "platformCdpMachineLearningApi": {},
   "platformContentTaxonomyApi": {},
   "platformExternalServicesApi": {},
   "platformGlobalizationApi": {},
@@ -3325,6 +3328,9 @@
       {
         "name": "isoDate"
       },
+      {
+        "name": "labelHidden"
+      },
       {
         "name": "locale"
       },
@@ -3338,7 +3344,7 @@
         "name": "name"
       },
       {
-        "name": "readonly"
+        "name": "readOnly"
       },
       {
         "name": "required"
@@ -3636,6 +3642,9 @@
       {
         "name": "hreflang"
       },
+      {
+        "name": "label"
+      },
       {
         "name": "ping"
       },
@@ -4513,6 +4522,9 @@
   },
   "serviceDataCategoryApi": {},
   "serviceEinsteinllmApi": {},
+  "serviceKnowledgeApi": {
+    "minVersion": "60.0"
+  },
   "serviceNetworkDataCategoryApi": {},
   "serviceServiceCatalogCategoryApi": {},
   "showToastEvent": {},

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.19.11-alpha",
+    "version": "1.20.2-alpha",
     "license": "MIT",
     "files": [
         "external",

package/scopedImports/@salesforce-internal-core.appVersion.js

@@ -1 +1 @@
-export default '246';
+export default '248';

package/src/lightning/datatable/datatable.js

@@ -1230,6 +1230,21 @@ export default class LightningDatatable extends LightningElement {
 
     /************************** EVENT HANDLERS ***************************/
 
+    handleCustomTypesChange() {
+        const assignedNodes = this.template
+            .querySelector('slot[name="customdatatypes"]')
+            .assignedNodes();
+        if (assignedNodes.length) {
+            const provider = assignedNodes[0];
+            if (typeof provider.getDataTypes === 'function') {
+                this._privateTypes = new DatatableTypes(
+                    provider.getDataTypes()
+                );
+                this.updateColumns(this._columns);
+            }
+        }
+    }
+
     /**
      * Handles the `keydown` event on <table> and the
      * corresponding <div> on the role-based table

package/src/lightning/datatable/templates/div/div.html

@@ -1,4 +1,5 @@
 <template>
+    <slot onslotchange={handleCustomTypesChange} name="customdatatypes"></slot>
     <!-- aria-live region to announce the keyboard navigation mode -->
     <span aria-live="polite">
         <!-- TODO: Look to merge this to a single span -->

package/src/lightning/datatable/templates/table/table.html

@@ -1,4 +1,5 @@
 <template>
+    <slot onslotchange={handleCustomTypesChange} name="customdatatypes"></slot>
     <!-- aria-live region to announce the keyboard navigation mode -->
     <span aria-live="polite">
         <span data-keyboard-mode="navigation" class={computedAriaLiveClassForNavMode}>{i18n.ariaLiveNavigationMode}</span>
@@ -49,7 +50,7 @@
                                 <template for:each={state.columns} for:item="def" for:index="colIndex">
                                     <!-- Column Header -->
                                     <th style={def.style}
-                                        role="gridcell"
+                                        role="columnheader"
                                         scope="col"
                                         tabindex={def.tabIndex}
                                         aria-label={def.ariaLabel}

package/src/lightning/datepicker/datepicker.html

@@ -1,10 +1,10 @@
 <template>
     <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-size_1-of-1" role="group" part="input-text">
         <template if:false={hasExternalLabel}>
-            <template if:true={required}>
-                <abbr class="slds-required" title={i18n.required}>*</abbr>
-            </template>
             <label class={computedLabelClass} for="input" part="label">
+                <template if:true={required}>
+                    <abbr class="slds-required" title={i18n.required}>*</abbr>
+                </template>
                 {label}
             </label>
             <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>

package/src/lightning/input/__docs__/input.md

@@ -59,7 +59,7 @@ supports the following input types:
 -   `checkbox`
 -   `checkbox-button`
 -   `date`
--   `datetime`
+-   `datetime`/`datetime-local`
 -   `time`
 -   `email`
 -   `file`
@@ -71,7 +71,9 @@ supports the following input types:
 -   `text` (default)
 -   `toggle`
 
-The following HTML input types are not supported.
+There is no behavioral difference between the `datetime` and `datetime-local` types.
+
+The following HTML input types aren't supported.
 
 -   `button`
 -   `hidden`
@@ -79,6 +81,8 @@ The following HTML input types are not supported.
 -   `radio`
 -   `reset`
 -   `submit`
+-   `week`
+-   `month`
 
 Use [`lightning-button`](bundle/lightning-button/documentation)
 instead for input types `button`, `reset`, and
@@ -87,6 +91,8 @@ instead for input types `button`, `reset`, and
 Use [`lightning-radio-group`](bundle/lightning-radio-group/documentation)
 instead of input type `radio` for radio buttons.
 
+Use [`lightning-combobox`](bundle/lightning-combobox/documentation) or input type `number` instead of input types `week` and `month`. The `week` and `month` types are browser-dependent and may cause issues with styling, accessibility, and general functionality in specific browsers.
+
 When working with forms that interact with Salesforce records, consider using the record form components. The `lightning-record-form`, `lightning-record-view-form`, and `lightning-record-edit-form` components provide a form-based UI that's metadata-driven. The components are automatically wired up to your record data, labels, and field-level help text. For more information, see [Work with Records Using Base Components](https://developer.salesforce.com/docs/platform/lwc/guide/data-get-user-input-intro).
 
 Alternatively, to create your own custom UI to work with Salesforce records, use `lightning-input` with the `lightning/ui*Api` wire adapters and functions, such as `getRecord` and `updateRecord`. For more information, see [Use the Wire Service with Base Components](https://developer.salesforce.com/docs/platform/lwc/guide/data-wire-base-components).

package/src/lightning/input/input.js

@@ -1815,16 +1815,21 @@ export default class LightningInput extends LightningElement {
      * @returns {boolean} - wether the value is valid or not
      */
     _validateType(type) {
+        if (VALID_INPUT_TYPES.includes(type)) {
+            return true;
+        }
+
+        const invalidMsg = `<lightning-input> The type attribute value "${type}" is invalid.`;
         assert(
             type !== 'hidden',
-            `<lightning-input> The type attribute value "hidden" is invalid. Use a regular <input type="hidden"> instead.`
+            `${invalidMsg} Use a regular <input type="hidden"> instead.`
         );
         assert(
             type !== 'submit' &&
                 type !== 'reset' &&
                 type !== 'image' &&
                 type !== 'button',
-            `<lightning-input> The type attribute value "${type}" is invalid. Use <lightning:button> instead.`
+            `${invalidMsg} Use <lightning:button> instead.`
         );
         if (this.isTypeRadio) {
             assert(
@@ -1832,12 +1837,19 @@ export default class LightningInput extends LightningElement {
                 `<lightning-input> The required attribute is not supported on radio inputs directly. It should be implemented at the radio group level.`
             );
         }
+
         if (type === 'phone') {
             console.warn(
-                `<lightning-input> The type attribute value "phone" is invalid. Please use <lightning-input type="tel"> instead. Defaulting to text type.`
+                `${invalidMsg} Please use <lightning-input type="tel"> instead. Defaulting to text type.`
             );
+        } else if (type === 'week' || type === 'month') {
+            console.warn(
+                `${invalidMsg} Please use <lightning-combobox> and/or <lightning-input type="number"> instead to avoid inconsistencies and breakages across browsers.`
+            );
+        } else {
+            console.warn(`${invalidMsg} Defaulting to text type.`);
         }
-        return VALID_INPUT_TYPES.includes(type);
+        return false;
     }
 
     /**

package/src/lightning/pill/link.html

@@ -36,7 +36,6 @@
             variant="bare"
             onclick={handleRemove}
             title={computedPillRemoveLabel}
-            tabindex={_tabIndex}
             alternative-text={computedPillRemoveLabel}>
         </lightning-button-icon>
     </span>

package/src/lightning/pill/pill.js

@@ -194,6 +194,7 @@ export default class LightningPill extends LightningElement {
     }
 
     /**
+     * Reserved for internal use.
      * Specifies the aria-selected of an element.
      */
     @api
@@ -206,6 +207,7 @@ export default class LightningPill extends LightningElement {
     }
 
     /**
+     * Reserved for internal use.
      * Specifies the role of an element.
      */
     @api

package/src/lightning/pill/plainLink.html

@@ -9,8 +9,6 @@
             class="slds-pill__action"
             href={href}
             onclick={handleClick}
-            aria-selected={_ariaSelected}
-            role={_role}
             title={label}
             onfocus={handleFocus}
             onblur={handleBlur}

package/src/lightning/pillContainer/pillContainer.js

@@ -302,38 +302,9 @@ export default class LightningPillContainer extends LightningElement {
 
     switchFocus(newValue) {
         this.switchFocusedIndex(newValue);
-        this._tabFromLink = true;
         this.focus();
     }
 
-    moveFocus(shiftKeyPressed) {
-        if (shiftKeyPressed) {
-            switch (this._tabFromLink) {
-                case true:
-                    this.switchFocusedIndex(this.focusedIndex - 1);
-                    this._tabFromLink = this.focusedNode.isPlainLink
-                        ? false
-                        : true;
-                    break;
-                case false:
-                    this._tabFromLink = true;
-                    break;
-                default:
-            }
-        } else {
-            switch (this.focusedNode.isPlainLink && this._tabFromLink) {
-                case true:
-                    this._tabFromLink = false;
-                    break;
-                case false:
-                    this.switchFocusedIndex(this.focusedIndex + 1);
-                    this._tabFromLink = true;
-                    break;
-                default:
-            }
-        }
-    }
-
     handleKeyDown(event) {
         if (this.pills.length <= 0) {
             return;
@@ -350,13 +321,6 @@ export default class LightningPillContainer extends LightningElement {
                 this.switchFocus(index + 1);
                 event.preventDefault();
                 break;
-            case keyCodes.tab:
-                this.moveFocus(event.shiftKey);
-                break;
-            case keyCodes.shift:
-            case keyCodes.enter:
-            case keyCodes.space:
-                break;
             default:
         }
     }
@@ -364,10 +328,12 @@ export default class LightningPillContainer extends LightningElement {
     handlePillFocus(event) {
         if (!this._hasFocus) {
             this._hasFocus = true;
-            this._tabFromLink = true;
-            this.focusedIndex = parseInt(event.currentTarget.name, 10);
             this.dispatchEvent(new CustomEvent('focus'));
         }
+        const currentTargetIndex = parseInt(event.currentTarget?.name, 10);
+        this.focusedIndex = Number.isNaN(currentTargetIndex)
+            ? -1
+            : currentTargetIndex;
     }
 
     handlePillBlur(event) {

package/src/lightning/pillContainer/standardPillContainer.html

@@ -11,15 +11,15 @@
             part="listbox"
         >
             <template for:each={pillViewModels} for:item="pillViewModel" for:index="index">
-                <li key={pillViewModel.pill.item.label} class="slds-listbox-item" role="presentation">
-                    <lightning-pill label={pillViewModel.pill.item.label} onclick={handlePillClick}
+                <li key={pillViewModel.pill.item.label} class="slds-listbox-item">
+                    <lightning-pill label={pillViewModel.pill.item.label}
+                                    onclick={handlePillClick}
                                     name={index}
                                     href={pillViewModel.pill.item.href}
                                     onremove={handleRemove}
                                     onblur={handlePillBlur}
                                     onfocus={handlePillFocus}
-                                    variant={pillViewModel.pill.variant}
-                                    aria-selected="true">
+                                    variant={pillViewModel.pill.variant}>
                         <template if:true={pillViewModel.pill.isIcon}>
                             <lightning-icon
                                 class="slds-icon_container"

package/src/lightning/primitiveHeaderFactory/primitiveHeaderFactory.js

@@ -220,6 +220,18 @@ export default class PrimitiveHeaderFactory extends PrimitiveDatatableCell {
             ? 'slds-line-clamp_small '
             : 'slds-truncate';
     }
+    
+    /**
+     * Get th Action styles (needed for wrapping headers)
+     *
+     * @return {string} The computed classes
+     */
+    get thActionStyles() {
+        const heightStyle = this._wrapTableHeader ? 'min-height: 3rem' : '';
+        return `
+            ${heightStyle}
+        `;
+    }
 
     /**
      * Computes an option name

package/src/lightning/progressBar/progressBar.html

@@ -4,11 +4,10 @@
          aria-valuemax="100"
          aria-valuenow={percentValue}
          aria-busy={ariaBusy}
-         role="progressbar"
-         aria-label={computeAriaLabel}
-         aria-labelledby="progress-bar-assistive-text">
+         role="progressbar" 
+         aria-label={computeAriaLabel}>
         <span class="slds-progress-bar__value" style={computedStyle}>
-            <span class="slds-assistive-text" id="progress-bar-assistive-text">{assistiveText}</span>
+            <span class="slds-assistive-text">{assistiveText}</span>
         </span>
     </div>
 </template>

package/src/lightning/timepicker/timepicker.html

@@ -1,9 +1,9 @@
 <template>
     <template if:false={hasExternalLabel}>
-        <template if:true={required}>
-            <abbr class="slds-required" title={i18n.required}>*</abbr>
-        </template>
         <label class={computedLabelClass}>
+            <template if:true={required}>
+                <abbr class="slds-required" title={i18n.required}>*</abbr>
+            </template>
             {label}
         </label>
         <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>