lightning-base-components 1.21.3-alpha → 1.21.5-alpha

package/src/lightning/button/button.js

@@ -43,10 +43,9 @@ export default class LightningButton extends LightningPrimitiveButton {
     @api label;
 
     /**
-     * Reserved for internal use only.
-     * Should be set to -1 if button should not
-     * be focused during tab navigation and should
-     * be set to 0 if button should be focused.
+     * Reserved for internal use only. Use the global tabindex attribute instead.
+     * Set tab index to -1 to prevent focus on the button during tab navigation.
+     * The default value is 0, which makes the button focusable during tab navigation.
      * @type {number}
      */
     @api tabIndex;

package/src/lightning/buttonGroup/__docs__/buttonGroup.md

@@ -73,10 +73,6 @@ To apply additional styling, use SLDS [utility classes](https://www.lightningdes
 
 You can customize the `lightning-button-*` base components you use within `lightning-button-group` using SLDS styling hooks. For more information, see the corresponding base component documentation.
 
-#### Source Code
-
-`lightning-button-group` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.
-
 #### See Also
 
 [lightning-navigation](bundle/lightning-navigation/documentation)

package/src/lightning/buttonIcon/__docs__/buttonIcon.md

@@ -205,9 +205,6 @@ Use the following accessibility and `aria` attributes on `lightning-button-icon`
 | aria-haspopup    | token             | Indicates that the button has an interactive popup element. Valid values are 'true', 'dialog', 'menu', 'listbox', 'tree', and 'grid'. To create a button that displays a list of menu items when clicked, use `lightning-button-menu` instead.                                                                                                       |
 | aria-label       | string            | Provides an assistive label where a visible label cannot be used.                                                                                                                                                                                                                                                                                    |
 | aria-live        | token             | Indicates the button can dynamically update without a page reload, and specifies how the change is announced by assistive technologies. Possible values include `off`, `polite`, and `assertive`. The default is `off`. For the screen reader to announce changes when the user is idle, use `polite`. For immediate notifications, use `assertive`. |
+| tabindex         | integer           | Specifies whether the button is focusable during tab navigation. Set tab index to -1 to prevent focus on the button during tab navigation. The default value is 0, which makes the button focusable during tab navigation. For more information, see [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).       |
 
 For more information, see the [WAI-ARIA Specification](https://www.w3.org/TR/wai-aria/).
-
-#### Source Code
-
-`lightning-button-icon` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/buttonIcon/buttonIcon.html

@@ -16,7 +16,7 @@
             part="button button-icon"
             tabindex={tabIndex}>
 
-        <lightning-primitive-icon icon-name={iconName} svg-class={computedIconClass} variant="bare"></lightning-primitive-icon>
+        <lightning-primitive-icon icon-name={iconName} svg-class={computedIconClass} variant="bare" exportparts="icon"></lightning-primitive-icon>
 
         <template if:true={alternativeText}>
             <span class="slds-assistive-text">{alternativeText}</span>

package/src/lightning/buttonIcon/buttonIcon.js

@@ -35,14 +35,15 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
     @api value;
 
     /**
-     * Reserved for internal use only.
-     * Should be set to -1 if button should not
-     * be focused during tab navigation and should
-     * be set to 0 if button should be focused.
+     * Reserved for internal use only. Use the global tabindex attribute instead.
+     * Set tab index to -1 to prevent focus on the button during tab navigation.
+     * The default value is 0, which makes the button focusable during tab navigation.
      * @type {number}
      */
     @api tabIndex;
 
+    _variant = DEFAULT_VARIANT;
+
     /**
      * The variant changes the appearance of button-icon.
      * Accepted variants include bare, container, brand, border, border-filled, bare-inverse, and border-inverse.
@@ -51,11 +52,11 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      * @type {string}
      * @default border
      */
-    _variant = DEFAULT_VARIANT;
     @api
     get variant() {
         return this._originalVariant;
     }
+
     set variant(val) {
         this._originalVariant = val;
         this._variant = this.normalizeVariant(val);
@@ -82,6 +83,8 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      */
     @api iconClass;
 
+    _size = DEFAULT_SIZE;
+
     /**
      * The size of the button-icon. For the bare variant, options include x-small, small, medium, and large.
      * For non-bare variants, options include xx-small, x-small, small, and medium.
@@ -90,8 +93,6 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      * @type {string}
      * @default medium
      */
-    _size = DEFAULT_SIZE;
-
     @api
     get size() {
         return this._originalSize;
@@ -119,16 +120,6 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      */
     @api alternativeText;
 
-    // remove-next-line-for-c-namespace
-    set tooltip(value) {
-        this.tooltipValue = value;
-        if (this._tooltip) {
-            this._tooltip.value = value;
-        } else if (value && this.rendered) {
-            this.createTooltip(value);
-        }
-    }
-
     // remove-next-line-for-c-namespace
     /**
      * Text to display when the user mouses over or focuses on the button.
@@ -141,6 +132,16 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
         return this._tooltip ? this._tooltip.value : undefined;
     }
 
+    // remove-next-line-for-c-namespace
+    set tooltip(value) {
+        this.tooltipValue = value;
+        if (this._tooltip) {
+            this._tooltip.value = value;
+        } else if (value && this.rendered) {
+            this.createTooltip(value);
+        }
+    }
+
     // remove-next-line-for-c-namespace
     _tooltip = null;
     tooltipValue = null;

package/src/lightning/buttonIconStateful/__docs__/buttonIconStateful.md

@@ -179,7 +179,3 @@ Use the following accessibility and `aria` attributes on `lightning-button-icon-
 | aria-live        | string            | Indicates whether the button will be updated, and describes the types of updates assistive technologies will make. Possible values include `off`, `polite`, and `assertive`. The default is `off`. For the screen reader to announce changes when the user is idle, use `polite`. For immediate notifications, use `assertive`. |
 
 For more information, see the [WAI-ARIA Specification](https://www.w3.org/TR/wai-aria/).
-
-#### Source Code
-
-`lightning-button-icon-stateful` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/buttonMenu/__docs__/buttonMenu.md

@@ -327,7 +327,3 @@ The event properties are as follows.
 | bubbles    | false | This event does not bubble.                                                                                |
 | cancelable | false | This event has no default behavior that can be canceled. You cannot call `preventDefault()` on this event. |
 | composed   | false | This event does not propagate outside of the component in which it was dispatched.                         |
-
-#### Source Code
-
-`lightning-button-menu` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/buttonMenu/buttonMenu.css

@@ -1 +1,6 @@
 @import './buttonMenu.lbc.native.css';
+
+.fix-slds-button_icon-border-filled {
+    height: unset;
+    line-height: var(--slds-c-button-line-height, var(--sds-c-button-line-height, 1.875rem));
+}

package/src/lightning/buttonMenu/buttonMenu.js

@@ -473,6 +473,8 @@ export default class LightningButtonMenu extends LightningShadowBaseClass {
                     this.variant === 'border' && isDropdownIcon,
                 'slds-button_icon-border-filled':
                     this.variant === 'border-filled',
+                'fix-slds-button_icon-border-filled':
+                    this.variant === 'border-filled' && this.groupOrder !== '',
                 'slds-button_icon-border-inverse':
                     this.variant === 'border-inverse',
                 'slds-button_icon-inverse': this.variant === 'bare-inverse',

package/src/lightning/buttonStateful/__docs__/buttonStateful.md

@@ -162,7 +162,3 @@ This component has usage differences from its Aura counterpart. See [Base Compon
 This component uses `aria-live="polite"`, which means the button label is read after the current user task or content.
 
 To inform screen readers that a button is disabled, set the `disabled` attribute to true.
-
-#### Source Code
-
-`lightning-button-stateful` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/buttonStateful/buttonStateful.html

@@ -4,24 +4,26 @@
             onblur={handleButtonBlur}
             onclick={handleButtonClick}
             aria-live="polite"
+            aria-relevant="additions"
+            aria-pressed={computedAriaPressed}
             part="button"
             disabled={disabled}>
 
             <span class="slds-text-not-selected">
                 <template if:true={iconNameWhenOff}>
-                    <lightning-primitive-icon part="start" icon-name={iconNameWhenOff} svg-class="slds-button__icon_stateful slds-button__icon_left" variant="bare"></lightning-primitive-icon>
+                    <lightning-primitive-icon aria-hidden="true" part="start" icon-name={iconNameWhenOff} svg-class="slds-button__icon_stateful slds-button__icon_left" variant="bare"></lightning-primitive-icon>
                 </template>
                 {privateLabelWhenOff}
             </span>
             <span class="slds-text-selected">
                 <template if:true={iconNameWhenOn}>
-                    <lightning-primitive-icon part="start" icon-name={iconNameWhenOn} svg-class="slds-button__icon_stateful slds-button__icon_left" variant="bare"></lightning-primitive-icon>
+                    <lightning-primitive-icon aria-hidden="true" part="start" icon-name={iconNameWhenOn} svg-class="slds-button__icon_stateful slds-button__icon_left" variant="bare"></lightning-primitive-icon>
                 </template>
                 {privateLabelWhenOn}
             </span>
             <span class="slds-text-selected-focus">
                 <template if:true={privateIconNameWhenHover}>
-                    <lightning-primitive-icon part="start" icon-name={privateIconNameWhenHover} svg-class="slds-button__icon_stateful slds-button__icon_left" variant="bare"></lightning-primitive-icon>
+                    <lightning-primitive-icon aria-hidden="true" part="start" icon-name={privateIconNameWhenHover} svg-class="slds-button__icon_stateful slds-button__icon_left" variant="bare"></lightning-primitive-icon>
                 </template>
                 {privateLabelWhenHover}
             </span>

package/src/lightning/buttonStateful/buttonStateful.js

@@ -239,6 +239,10 @@ export default class LightningButtonStateful extends LightningShadowBaseClass {
         this.dispatchEvent(new CustomEvent('focus'));
     }
 
+    get computedAriaPressed() {
+        return String(this.state.selected);
+    }
+
     // validate a label is a string and not zero length
     isValidLabel(labelVal) {
         // if not a string or of length 0 then label is not valid

package/src/lightning/card/__docs__/card.md

@@ -108,7 +108,3 @@ To understand how we implemented SLDS in `lightning-card`, see the **Source Code
 Icons are not available in Lightning Out, but they are available in Lightning Components for Visualforce and other experiences.
 
 This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
-
-#### Source Code
-
-`lightning-card` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/card/card.js-meta.xml

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>0.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/carousel/__docs__/carousel.md

@@ -88,7 +88,3 @@ This example creates a basic carousel with three images and disables automatic s
 
 Use the Tab key to move focus to the carousel, then tab again to focus on the indicator buttons.
 Use right and left arrow keys to scroll to the next or previous image.
-
-#### Source Code
-
-`lightning-carousel` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/checkboxGroup/__docs__/checkboxGroup.md

@@ -194,7 +194,3 @@ element. The legend contains the `label` value. The `fieldset` element enables
 grouping of related checkboxes to facilitate tabbing navigation and speech
 navigation for accessibility purposes. Similarly, the `legend` element
 improves accessibility by enabling a caption to be assigned to the `fieldset`.
-
-#### Source Code
-
-`lightning-checkbox-group` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/colorPickerCustom/colorPickerCustom.js

@@ -95,6 +95,18 @@ export default class LightningColorPickerCustom extends LightningShadowBaseClass
         this._currentColor = value;
         this._hex = fullHex;
         this._rgb = hexToRgb(fullHex);
+
+        // W-13851481 bug-fix: if canvas open, update it
+        if (this._canvas) {
+            const hue = rgbToHsl(this._rgb).hue;
+            const position = this.rgbToPosition(this._rgb);
+            const selectedColor = `#${rgbToHex(this._rgb)}`;
+
+            this.updateRainbow(hue);
+            this.setCanvasColor(hue);
+            this.setCanvasCursor(position.x, position.y);
+            this.updateSelectedColor(selectedColor);
+        }
     }
 
     @api

package/src/lightning/colorPickerPanel/colorPickerPanel.js

@@ -5,7 +5,7 @@ import labelDoneButton from '@salesforce/label/LightningColorPicker.doneButton';
 import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
-import { keyCodes } from 'lightning/utilsPrivate';
+import { keyCodes, isCSR } from 'lightning/utilsPrivate';
 
 const i18n = {
     cancelButton: labelCancelButton,
@@ -26,6 +26,16 @@ export default class LightningColorPickerPanel extends LightningShadowBaseClass
         this._selectedColor = this.currentColor || DEFAULT_COLOR;
     }
 
+    renderedCallback() {
+        // W-14600421 bug fix: prevent panel from falling outside user focus,
+        // like when viewports are too small
+        if (isCSR && typeof document.body.scrollIntoView === 'function') {
+            this.template
+                .querySelector('lightning-color-picker-custom')
+                .scrollIntoView();
+        }
+    }
+
     get i18n() {
         return i18n;
     }

package/src/lightning/combobox/__docs__/combobox.md

@@ -156,7 +156,3 @@ The `open` event does not return any parameters.
 | bubbles    | false | This event does not bubble.                                                                                |
 | cancelable | false | This event has no default behavior that can be canceled. You cannot call `preventDefault()` on this event. |
 | composed   | false | This event does not propagate outside of the component in which it was dispatched.                         |
-
-#### Source Code
-
-`lightning-combobox` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/combobox/combobox.html

@@ -17,6 +17,7 @@
                 root-aria-node={templateRootNode}
                 required={required}
                 disabled={disabled}
+                exportparts="dropdown, option"
                 placeholder={placeholder}
                 items={_items}
                 input-text={_selectedLabel}

package/src/lightning/datatable/__examples__disabled/customComponentWrapper/customComponentWrapper.html

@@ -0,0 +1,11 @@
+<template>
+  <!-- Move this component to __examples__ -->
+  <!-- In playground add <datatable-custom-component-wrapper></datatable-custom-component-wrapper> -->
+        <datatable-my-custom-type-datatable
+        key-field="Id"
+        data={data}
+        columns={columns}
+        show-row-number-column
+      >
+      </datatable-my-custom-type-datatable> 
+</template>

package/src/lightning/datatable/__examples__disabled/customComponentWrapper/customComponentWrapper.js

@@ -0,0 +1,25 @@
+import { LightningElement } from 'lwc';
+import generateData from './generateData.js';
+const columns = [
+    {
+        label: 'Custom input',
+        type: 'customInput',
+    },
+    {
+        label: 'Custom Component Buttons',
+        type: 'customComponent',
+    },
+    { label: 'Label', fieldName: 'name' },
+    { label: 'Website', fieldName: 'website', type: 'url' },
+    { label: 'Phone', fieldName: 'phone', type: 'phone' },
+    { label: 'Balance', fieldName: 'amount', type: 'currency' },
+];
+export default class MyDatatable extends LightningElement {
+    data = [];
+    columns = columns;
+    rowOffset = 0;
+
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 5 });
+    }
+}

package/src/lightning/datatable/__examples__disabled/customComponentWrapper/generateData.js

@@ -0,0 +1,15 @@
+export default function generateData({ amountOfRecords }) {
+    return [...Array(amountOfRecords)].map((_, index) => {
+        return {
+            name: `Name (${index})`,
+            website: 'www.salesforce.com',
+            amount: Math.floor(Math.random() * 100),
+            phone: `${
+                Math.floor(Math.random() * 900 + 100) * 10000000 + 5551212
+            }`,
+            closeAt: new Date(
+                Date.now() + 86400000 * Math.ceil(Math.random() * 20)
+            ),
+        };
+    });
+}

package/src/lightning/datatable/__examples__disabled/myCustomTypeDatatable/customInput.html

@@ -0,0 +1,4 @@
+<template>
+  <!-- Since this is a top level component we don't need to pass tabindex down through shadowroots -->
+  <lightning-input type="text" label="Enter some text" tabindex={internalTabIndex} data-navigation="enable"></lightning-input>
+</template>

package/src/lightning/datatable/__examples__disabled/myCustomTypeDatatable/myCustomTypeDatatable.js

@@ -0,0 +1,17 @@
+//myCustomTypeDatatable.js
+import LightningDatatable from 'lightning/datatable';
+import customInputTemplate from './customInput.html';
+import customComponentTemplate from './nestedSimpleComponentParent.html';
+
+export default class MyCustomTypeDatatable extends LightningDatatable {
+    static customTypes = {
+        customInput: {
+            template: customInputTemplate,
+            standardCellLayout: true,
+        },
+        customComponent: {
+            template: customComponentTemplate,
+            standardCellLayout: false,
+        },
+    };
+}

package/src/lightning/datatable/__examples__disabled/myCustomTypeDatatable/nestedSimpleComponentParent.html

@@ -0,0 +1,7 @@
+<template>
+    <!-- We add an internal component here so that we can garner access to a full LWC component including access to a JS file. -->
+    <!-- This is common if a custom component needs some kind of wiring up. -->
+    <!-- We pass tabindex down as we don't want this component to be shown as accessible in the dom, but we want children of it to be -->
+    <!-- We set data-navigation here as this component has children that are navigable -->
+    <datatable-simple-component-nested internal-tab-index={internalTabIndex} data-navigation="enable"></datatable-simple-component-nested>
+</template>

package/src/lightning/datatable/__examples__disabled/simpleComponentNested/simpleComponentNested.html

@@ -0,0 +1,9 @@
+<template>
+    <!-- We don't need to set data-navigation on this div as we are not traversing a shadowroot -->
+    <div>
+        <!-- Since this component needs to be navigable we set data-navigation to enable navigation. -->
+        <!-- As it is navigable we also need to set the tabindex=0 so that from a dom structure perspective it shows as navgiable. -->
+        <lightning-button variant="base" label="Base" title="Looks like a link" class="slds-m-left_x-small" data-navigation="enable" tabindex={internalTabIndex}></lightning-button>
+        <lightning-button label="Neutral" title="Non-primary action" class="slds-m-left_x-small" data-navigation="enable" tabindex={internalTabIndex}></lightning-button>
+    </div>
+</template>

package/src/lightning/datatable/__examples__disabled/simpleComponentNested/simpleComponentNested.js

@@ -0,0 +1,6 @@
+import { LightningElement, api } from 'lwc';
+
+export default class CustomComponent extends LightningElement {
+    // Passing internal tab index down from parent.
+    @api internalTabIndex;
+}

package/src/lightning/datatable/autoWidthStrategy.js

@@ -4,17 +4,6 @@ import { getColumnWidth, getTotalWidthsData } from './widthManagerShared';
 const MIN_MAX_THRESHOLD = 0.5;
 const TRUNCATION_ALLOWANCE = 20;
 
-/**
- * Determines if a column exists at a specified index
- *
- * @param {Array} columns An array of columns
- * @param {Integer} colIndex The column index to locate
- * @returns {Boolean} Whether the column exists at the specified index
- */
-function hasColumn(columns, colIndex) {
-    return columns.some((current) => current === colIndex);
-}
-
 /**
  * Calculates the total width of all columns
  *
@@ -61,34 +50,21 @@ function canAddWidth(currentWidth, widthToAdd, maxColumnWidth) {
  * @returns {Number} The expected width of the table
  */
 function getExpectedTableWidth(availableWidth, widthsData) {
-    const minExpectedTableWidth = getMinExpectedTableWidth(widthsData);
-    return widthsData.totalFlexibleColumns === 0
-        ? minExpectedTableWidth
-        : Math.max(minExpectedTableWidth, availableWidth);
-}
-
-/**
- * Determines the minimum expected table width
- *
- * @param {Object} widthsData The widths data
- * @returns {Number} The minimum expected table width
- */
-function getMinExpectedTableWidth(widthsData) {
     const minTotalFlexibleWidth =
         widthsData.totalFlexibleColumns * widthsData.minColumnWidth;
-    return (
+    const minExpectedTableWidth =
         minTotalFlexibleWidth +
         widthsData.totalFixedWidth +
-        widthsData.totalResizedWidth
-    );
+        widthsData.totalResizedWidth;
+    return widthsData.totalFlexibleColumns === 0
+        ? minExpectedTableWidth
+        : Math.max(minExpectedTableWidth, availableWidth);
 }
 
 /**
  * Strategy for columns that automatically determine their widths.
  */
 export class AutoWidthStrategy {
-    // Private variables
-
     // Instance array to hold column width ratios either calculated from visual distribution of column labels
     // or from distribution of data amongst the columns. These ratios are reused except when datatable reacts
     // to changes in data or columns and other variables at which point they are recalculated.
@@ -102,8 +78,6 @@ export class AutoWidthStrategy {
     // It is used in redistribution of extra space that is left or taken up while calculating auto widths
     columnWidthsDistribution = {};
 
-    /************************** LIFECYCLE HOOKS **************************/
-
     constructor(minColumnWidth, maxColumnWidth, wrapTextMaxLines = 3) {
         this.columnWidthData = {
             minColumnWidth,
@@ -114,8 +88,6 @@ export class AutoWidthStrategy {
         this.columnWidthsDistribution.colsWithMaxWidth = [];
     }
 
-    /************************** PRIVATE SETTERS **************************/
-
     /**
      * Sets the minimum column width
      *
@@ -182,7 +154,7 @@ export class AutoWidthStrategy {
             recomputeAutoWidthRatios &&
             this.columnWidthRatios.length !== columns.length
         ) {
-            return { expectedTableWidth, columnWidths: [] };
+            return { columnWidths: [] };
         }
 
         // First pass - Distribute widths as per ratios or defined widths if there are any
@@ -213,7 +185,7 @@ export class AutoWidthStrategy {
                 columns
             );
         }
-        return { columnWidths, expectedTableWidth };
+        return { columnWidths };
     }
 
     /**
@@ -535,7 +507,7 @@ export class AutoWidthStrategy {
                 const col = columns[colIndex];
                 const currentWidth = columnWidths[colIndex];
                 if (
-                    !hasColumn(colsWithMinWidth, colIndex) &&
+                    !colsWithMinWidth.includes(colIndex) &&
                     !getColumnWidth(col) &&
                     canRemoveWidth(
                         currentWidth,