lightning-base-components 1.18.7-ssr → 1.18.8-alpha

package/src/lightning/combobox/combobox.js

@@ -1,8 +1,7 @@
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     classListMutation,
@@ -30,7 +29,7 @@ const i18n = {
  * A widget that provides an input field that is readonly,
  * accompanied by a dropdown list of selectable options.
  */
-export default class LightningCombobox extends LightningShadowBaseClass {
+export default class LightningCombobox extends LightningElement {
     static delegatesFocus = true;
     static validationOptOut = ['class'];
 
@@ -96,7 +95,6 @@ export default class LightningCombobox extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.interactingState = new InteractingState();

package/src/lightning/datatable/datatable.js

@@ -1534,6 +1534,7 @@ export default class LightningDatatable extends LightningElement {
         if (!customerEvent.defaultPrevented) {
             cancelInlineEdit(this);
         }
+        updateActiveCellTabIndexAfterSync(this.state);
     }
 
     /**

package/src/lightning/datepicker/datepicker.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './input-text.slds.css';
-@import './form-element.slds.css';
+@import './form-element.slds.css'; */

package/src/lightning/datepicker/datepicker.js

@@ -7,8 +7,7 @@ import labelMinAndMaxRangeMessage from '@salesforce/label/LightningDateTimePicke
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelSelectDateFor from '@salesforce/label/LightningDateTimePicker.selectDateFor';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     normalizeISODate,
     parseFormattedDate,
@@ -64,7 +63,7 @@ const DATE_STYLE = {
     LONG: 'long',
 };
 
-export default class LightningDatePicker extends LightningShadowBaseClass {
+export default class LightningDatePicker extends LightningElement {
     static delegatesFocus = true;
 
     @track _disabled = false;
@@ -382,7 +381,6 @@ export default class LightningDatePicker extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.connected = true;
 
         this.keyboardInterface = this.datepickerKeyboardInterface();

package/src/lightning/datetimepicker/datetimepicker.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './input-text.slds.css';
-@import './form-element.slds.css';
+@import './form-element.slds.css'; */

package/src/lightning/datetimepicker/datetimepicker.js

@@ -4,8 +4,7 @@ import labelRangeUnderflow from '@salesforce/label/LightningDateTimePicker.range
 import labelTime from '@salesforce/label/LightningDateTimePicker.timeLabel';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
 import sfTimeZone from '@salesforce/i18n/timeZone';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -35,7 +34,7 @@ const i18n = {
     helpTextAlternativeText: labelHelpTextAlternativeText,
 };
 
-export default class LightningDateTimePicker extends LightningShadowBaseClass {
+export default class LightningDateTimePicker extends LightningElement {
     static delegatesFocus = true;
 
     @track _disabled = false;
@@ -410,7 +409,6 @@ export default class LightningDateTimePicker extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.connected = true;
 
         // we set the initial values here in order to make sure timezone is available.

package/src/lightning/dualListbox/dualListbox.css

@@ -1,7 +1,7 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import "./form-element.slds.css";
 @import './listbox.slds.css';
-@import './dual-listbox.slds.css';
+@import './dual-listbox.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/dualListbox/dualListbox.js

@@ -17,8 +17,7 @@ import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
 import labelMovedOptionsSingular from '@salesforce/label/LightningDualListbox.movedOptionsSingular';
 import labelMovedOptionsPlural from '@salesforce/label/LightningDualListbox.movedOptionsPlural';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { handleKeyDownOnOption } from './keyboard';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
@@ -60,7 +59,7 @@ const i18n = {
 /**
  * A pair of listboxes that enables multiple options to be selected and reordered.
  */
-export default class LightningDualListbox extends LightningShadowBaseClass {
+export default class LightningDualListbox extends LightningElement {
     // Component attributes
     /**
      * Label for the source options listbox.
@@ -355,7 +354,6 @@ export default class LightningDualListbox extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.keyboardInterface = this.selectKeyboardInterface();

package/src/lightning/dynamicIcon/dynamicIcon.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 import eqHtml from './eq.html';
@@ -13,7 +12,7 @@ import defaultHtml from './default.html';
 /**
  * Represents various animated icons with different states.
  */
-export default class LightningDynamicIcon extends LightningShadowBaseClass {
+export default class LightningDynamicIcon extends LightningElement {
     /**
      * The alternative text used to describe the dynamic icon.
      * This text should describe what's happening.

package/src/lightning/dynamicIcon/ellie.css

@@ -1 +1 @@
-@import './dynamic-icon-ellie.slds.css';
+/* @import './dynamic-icon-ellie.slds.css'; */

package/src/lightning/dynamicIcon/eq.css

@@ -1 +1 @@
-@import './dynamic-icon-eq.slds.css';
+/* @import './dynamic-icon-eq.slds.css'; */

package/src/lightning/dynamicIcon/score.css

@@ -1 +1 @@
-@import './dynamic-icon-score.slds.css';
+/* @import './dynamic-icon-score.slds.css'; */

package/src/lightning/dynamicIcon/strength.css

@@ -1 +1 @@
-@import './dynamic-icon-strength.slds.css';
+/* @import './dynamic-icon-strength.slds.css'; */

package/src/lightning/dynamicIcon/trend.css

@@ -1 +1 @@
-@import './dynamic-icon-trend.slds.css';
+/* @import './dynamic-icon-trend.slds.css'; */

package/src/lightning/dynamicIcon/waffle.css

@@ -1 +1 @@
-@import './dynamic-icon-waffle.slds.css';
+/* @import './dynamic-icon-waffle.slds.css'; */

package/src/lightning/formattedDateTime/formattedDateTime.js

@@ -36,7 +36,7 @@ export default class LightningFormattedDateTime extends LightningElement {
     @api year;
 
     /**
-     * Allowed values are 2-digit, narrow, short, or long.
+     * Allowed values are 2-digit, numeric, narrow, short, or long.
      * @type {string}
      *
      */

package/src/lightning/formattedRichText/formattedRichText.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './formatted-rich-text.slds.css';
-@import 'lightning/sldsUtilsThemes';
+@import 'lightning/sldsUtilsThemes'; */

package/src/lightning/formattedRichText/formattedRichText.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import sanitizeHTML from 'lightning/purifyLib';
 import { linkify } from './linkify';
 import { richTextConfig } from './richTextConfig';
@@ -13,7 +12,7 @@ import {
  * Displays rich text that's formatted with allowed tags and attributes.
  * Other tags and attributes are removed and only their text content is displayed.
  */
-export default class LightningFormattedRichText extends LightningShadowBaseClass {
+export default class LightningFormattedRichText extends LightningElement {
     static validationOptOut = ['class'];
     /**
      * If present, the component does not create links in the rich text.
@@ -59,7 +58,6 @@ export default class LightningFormattedRichText extends LightningShadowBaseClass
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-rich-text-editor__output');
         this.connected = true;
     }

package/src/lightning/formattedText/formattedText.css

@@ -1 +1 @@
-@import 'lightning/sldsCommon'
+/* @import 'lightning/sldsCommon' */

package/src/lightning/formattedText/formattedText.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     normalizeBoolean,
     parseToFormattedLinkifiedParts,
@@ -9,7 +8,7 @@ import {
 /**
  * Displays text, replaces newlines with line breaks, and linkifies if requested.
  */
-export default class FormattedText extends LightningShadowBaseClass {
+export default class FormattedText extends LightningElement {
     /**
      * Sets the text to display.
      * @type {string}

package/src/lightning/helptext/helptext.css

@@ -1,3 +1,3 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import './help-text.slds.css';
-@import './form-element.slds.css';
+@import "./form-element.slds.css"; */

package/src/lightning/helptext/helptext.js

@@ -1,6 +1,5 @@
 import labelButtonAlternativeText from '@salesforce/label/LightningHelptext.buttonAlternativeText';
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { isValidName } from 'lightning/iconUtils';
 import { normalizeString } from 'lightning/utilsPrivate';
 import { TooltipType } from 'lightning/tooltipLibrary';
@@ -12,7 +11,7 @@ const DEFAULT_ICON_VARIANT = 'bare';
 /**
  * An icon with a text popover used for tooltips.
  */
-export default class LightningHelptext extends LightningShadowBaseClass {
+export default class LightningHelptext extends LightningElement {
     // TODO: future refactoring to remove this.state convention
     @track
     state = {

package/src/lightning/icon/icon.css

@@ -1,2 +1,2 @@
-@import 'lightning/sldsCommon';
-@import './icon.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './icon.slds.css'; */

package/src/lightning/icon/icon.js

@@ -1,5 +1,4 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 import {
     classListMutation,
     normalizeString,
@@ -17,9 +16,8 @@ import { normalizeVariant } from './util';
 /**
  * Represents a visual element that provides context and enhances usability.
  */
-export default class LightningIcon extends LightningShadowBaseClass {
+export default class LightningIcon extends LightningElement {
     static validationOptOut = ['class'];
-
     _src;
     _privateIconName;
     _iconName;
@@ -162,7 +160,6 @@ export default class LightningIcon extends LightningShadowBaseClass {
     }
 
     connectedCallback() {
-        super.connectedCallback();
         this.classList.add('slds-icon_container');
     }
 

package/src/lightning/input/input.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './form-element.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './form-element.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/layout/layout.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import 'lightning/sldsUtilsGrid';
+/* @import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsGrid'; */
 
 @media all and (-ms-high-contrast: none),
 (-ms-high-contrast: active) {

package/src/lightning/layout/layout.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     normalizeParam,
     computeLayoutClass,
@@ -12,9 +11,8 @@ import { normalizeBoolean } from 'lightning/utilsPrivate';
 /**
  * Represents a responsive grid system for arranging containers on a page.
  */
-export default class LightningLayout extends LightningShadowBaseClass {
+export default class LightningLayout extends LightningElement {
     static validationOptOut = ['class'];
-
     /**
      * Determines how to spread the layout items horizontally.
      * The alignment options are center, space, spread, and end.
@@ -82,7 +80,6 @@ export default class LightningLayout extends LightningShadowBaseClass {
     _layoutClass = [];
 
     connectedCallback() {
-        super.connectedCallback();
         this.updateClassList();
     }
 

package/src/lightning/layoutItem/layoutItem.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
+/* @import 'lightning/sldsCommon';
 @import 'lightning/sldsUtilsBox';
 @import 'lightning/sldsUtilsGrid';
 @import 'lightning/sldsUtilsPadding';
-@import 'lightning/sldsUtilsSizing';
+@import 'lightning/sldsUtilsSizing'; */

package/src/lightning/layoutItem/layoutItem.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import {
     normalizeFlexibility,
     normalizePadding,
@@ -14,9 +13,8 @@ import {
  * A layout item groups information together to define visual grids, spacing, and sections.
  * @slot default Placeholder for your content in lightning-layout-item.
  */
-export default class LightningLayoutItem extends LightningShadowBaseClass {
+export default class LightningLayoutItem extends LightningElement {
     static validationOptOut = ['class'];
-
     /**
      * Make the item fluid so that it absorbs any extra space in its
      * container or shrinks when there is less space. Allowed values are:
@@ -139,7 +137,6 @@ export default class LightningLayoutItem extends LightningShadowBaseClass {
     _layoutClass = [];
 
     connectedCallback() {
-        super.connectedCallback();
         this.updateClassList();
     }
 

package/src/lightning/menuDivider/menuDivider.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './menu-divider.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './menu-divider.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/menuDivider/menuDivider.js

@@ -1,16 +1,14 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import { normalizeString as normalize } from 'lightning/utilsPrivate';
 
 /**
  * Creates a divider in the list of items for lightning-button-menu.
  */
-export default class LightningMenuDivider extends LightningShadowBaseClass {
+export default class LightningMenuDivider extends LightningElement {
     @track _variant = 'standard';
 
     connectedCallback() {
-        super.connectedCallback();
         this.setAttribute('role', 'separator');
     }
 

package/src/lightning/menuItem/menuItem.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './menu-item.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './menu-item.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/menuItem/menuItem.js

@@ -1,5 +1,4 @@
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
 import {
     normalizeBoolean,
@@ -11,7 +10,7 @@ import { sanitizeURL, FALLBACK_URL } from 'lightning/utilsPrivate';
 /**
  * Represents a list item in a menu.
  */
-export default class LightningMenuItem extends LightningShadowBaseClass {
+export default class LightningMenuItem extends LightningElement {
     /**
      * A value associated with the menu item.
      * @type {string}
@@ -63,7 +62,6 @@ export default class LightningMenuItem extends LightningShadowBaseClass {
     @api draftAlternativeText;
 
     connectedCallback() {
-        super.connectedCallback();
         this.setAttribute('role', 'presentation');
     }
 

package/src/lightning/menuSubheader/menuSubheader.css

@@ -1,5 +1,5 @@
-@import 'lightning/sldsCommon';
-@import './menu-subheader.slds.css';
+/* @import 'lightning/sldsCommon';
+@import './menu-subheader.slds.css'; */
 
 :host {
     display: block;

package/src/lightning/menuSubheader/menuSubheader.js

@@ -1,10 +1,9 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api } from 'lwc';
 
 /**
  * Creates a subheader in the list of items in lightning-button-menu.
  */
-export default class LightningMenuSubheader extends LightningShadowBaseClass {
+export default class LightningMenuSubheader extends LightningElement {
     /**
      * The text displayed in the subheader.
      * @type {string}
@@ -12,7 +11,6 @@ export default class LightningMenuSubheader extends LightningShadowBaseClass {
     @api label;
 
     connectedCallback() {
-        super.connectedCallback();
         this.setAttribute('role', 'separator');
     }
 }

package/src/lightning/modal/__examples__disabled/basic/basic.css

@@ -4,4 +4,4 @@
     background: #FFF;
     box-shadow: 0 1px 0.25rem rgb(0 0 0 / 20%);
     padding: 1rem;
-}
+}

package/src/lightning/modal/__examples__disabled/demoallform/demoallform.css

@@ -1,5 +1,3 @@
-@import 'lightning/sldsCommon';
-
-:host([data-render-mode="shadow"]) [id='all-footer'] lightning-button:not(:first-child) {
-    margin-left: var(--sds-g-spacing-2, 0.5rem);
+lightning-input .slds-checkbox_toggle .slds-checkbox_faux_container {
+    display: block !important;
 }

package/src/lightning/modal/__examples__disabled/demoallformfull/demoallformfull.css

@@ -1,5 +1,3 @@
-@import 'lightning/sldsCommon';
-
-:host([data-render-mode="shadow"]) [id='all-footer'] lightning-button:not(:first-child) {
-    margin-left: var(--sds-g-spacing-2, 0.5rem);
+lightning-input .slds-checkbox_toggle .slds-checkbox_faux_container {
+    display: block !important;
 }

package/src/lightning/modal/__modalUtils__/modalContainerTestConstants.js

@@ -7,10 +7,6 @@
 
 // buttons that open modals
 const BUTTON_MODAL_ALL = '[data-modal-button-all]';
-const BUTTON_MODAL_ALL_SMALL = '[data-modal-button-all-small]';
-const BUTTON_MODAL_ALL_MEDIUM = '[data-modal-button-all-medium]';
-const BUTTON_MODAL_ALL_LARGE = '[data-modal-button-all-large]';
-
 const BUTTON_MODAL_ALL_TWO = '[data-modal-button-all-two]';
 const BUTTON_MODAL_HEADLESS = '[data-modal-button-headless]';
 const BUTTON_MODAL_HEADLESS_NO_LABEL = '[data-modal-button-headless-no-label]';
@@ -108,9 +104,6 @@ const MODAL_RENDER_PAUSE = 1250;
 const SELECTORS = {
     // main testing options
     all: BUTTON_MODAL_ALL,
-    'all-small': BUTTON_MODAL_ALL_SMALL,
-    'all-medium': BUTTON_MODAL_ALL_MEDIUM,
-    'all-large': BUTTON_MODAL_ALL_LARGE,
     'all-form': BUTTON_MODAL_FORM,
     headless: BUTTON_MODAL_HEADLESS,
     footless: BUTTON_MODAL_FOOTLESS,
@@ -124,11 +117,6 @@ const SELECTORS = {
     'multi-modals': BUTTON_MODAL_MULTI,
 };
 
-// private attributes on modal components
-const DATA_VARIANT_HEADLESS_ATTRIBUTE = 'data-variant-headless';
-const DATA_VARIANT_FOOTLESS_ATTRIBUTE = 'data-variant-footless';
-const DATA_SIZE_ATTRIBUTE = 'data-size';
-
 // modal type to size api value mapping
 const NAME_TO_SIZE = {
     all: MODAL_SIZE_FULL,
@@ -276,7 +264,4 @@ module.exports = {
     ARIA_LABELLEDBY,
     ARIA_LABEL,
     KEY,
-    DATA_VARIANT_FOOTLESS_ATTRIBUTE,
-    DATA_VARIANT_HEADLESS_ATTRIBUTE,
-    DATA_SIZE_ATTRIBUTE,
 };

package/src/lightning/modalBase/modalBase.css

@@ -1,6 +1,3 @@
-@import 'lightning/sldsCommon';
-@import './modal-base.slds.css';
-
 /* Modal close button */
 
 /* Required for autofocus to work correctly:
@@ -8,14 +5,12 @@
      the moment that they are being reviewed for eligibility
      for focus in focus.js at isElementVisible()
 */
-.fix-slds-modal,
-:host([data-render-mode="shadow"]) .fix-slds-modal {
+.fix-slds-modal {
     visibility: visible;
     z-index: unset;
 }
 
 /* Required for z-index */
-.fix-slds-backdrop,
-:host([data-render-mode="shadow"]) .fix-slds-backdrop {
+.fix-slds-backdrop {
     z-index: unset;
 }

package/src/lightning/modalBase/modalBase.html

@@ -1,7 +1,6 @@
 <template>
     <div
         class={modalBackdropCssClasses}
-        part="modal-backdrop"
         role="presentation"
         data-backdrop
     ></div>
@@ -11,7 +10,6 @@
             tabindex="-1"
             aria-modal="true"
             class={modalCssClasses}
-            part="modal"
             onkeydown={handleModalKeyDown}
             onprivatemodalheaderregister={handleHeaderRegister}
             onprivatemodalbodyregister={handleBodyRegister}