lightning-base-components 1.26.4-alpha → 1.27.2-alpha

package/src/lightning/datatable/datatable.js

@@ -937,7 +937,12 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         if (!state.hasCalledUpdateRowsAndCells) {
             this.updateRowsAndCells();
         }
-        const data = unwrap(state.data);
+        let data;
+        if (isCSR) {
+            data = unwrap(state.data);
+        } else {
+            data = state.data;
+        }
         const { rows } = state;
         const selectedRows = [];
         for (let i = 0, { length: rowCount } = rows; i < rowCount; i += 1) {

package/src/lightning/datatable/icon.slds.css

@@ -132,7 +132,8 @@
     var(--slds-c-icon-sizing, var(--slds-g-sizing-9))
   );
 }
-:host([data-render-mode="shadow"][icon-name*='action']),:host([data-render-mode="shadow"])  .slds-icon_container_circle {
+:host([data-render-mode="shadow"][icon-name*='action']),:host([data-render-mode="shadow"]) 
+.slds-icon_container_circle {
   --slds-c-icon-spacing-block: var(--slds-g-sizing-3);
   --slds-c-icon-spacing-inline: var(--slds-g-sizing-3);
   --slds-c-icon-radius-border: calc(var(--slds-g-radius-border-circle) / 2);
@@ -233,5 +234,8 @@
 }
 :host([data-render-mode="shadow"]) .slds-icon_container {
   border-radius: var(--slds-c-icon-radius-border, var(--slds-s-icon-radius-border));
-  background-color: var(--slds-c-icon-color-background, var(--slds-s-icon-color-background, var(--sds-c-icon-color-background)));
+  background-color: var(
+    --slds-c-icon-color-background,
+    var(--slds-s-icon-color-background, var(--sds-c-icon-color-background))
+  );
 }

package/src/lightning/datatable/input-checkbox.slds.css

@@ -162,32 +162,32 @@
      * Base
      */
 :host([data-render-mode="shadow"]) [part='input-checkbox'] {
-    /**
+  /**
       * Remap to SLDS blueprint hooks for parity
       * https://www.lightningdesignsystem.com/components/checkbox/#Styling-Hooks-Overview
       */
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    --_slds-c-inputcheckbox-shadow: var(--slds-c-checkbox-shadow);
-    --_slds-c-inputcheckbox-shadow-focus: var(--slds-c-checkbox-shadow-focus);
-    --_slds-c-inputcheckbox-color-background: var(--slds-c-checkbox-color-background);
-    --_slds-c-inputcheckbox-color-background-checked: var(--slds-c-checkbox-color-background-checked);
-    --_slds-c-inputcheckbox-color-border: var(--slds-c-checkbox-color-border);
-    --_slds-c-inputcheckbox-color-border-checked: var(--slds-c-checkbox-color-border-checked);
-    --_slds-c-inputcheckbox-color-border-focus: var(--slds-c-checkbox-color-border-focus);
-    --_slds-c-inputcheckbox-mark-color-foreground: var(--slds-c-checkbox-mark-color-foreground);
-    --_slds-c-inputcheckbox-radius-border: var(--slds-c-checkbox-radius-border);
-    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+  --_slds-c-inputcheckbox-shadow: var(--slds-c-checkbox-shadow);
+  --_slds-c-inputcheckbox-shadow-focus: var(--slds-c-checkbox-shadow-focus);
+  --_slds-c-inputcheckbox-color-background: var(--slds-c-checkbox-color-background);
+  --_slds-c-inputcheckbox-color-background-checked: var(--slds-c-checkbox-color-background-checked);
+  --_slds-c-inputcheckbox-color-border: var(--slds-c-checkbox-color-border);
+  --_slds-c-inputcheckbox-color-border-checked: var(--slds-c-checkbox-color-border-checked);
+  --_slds-c-inputcheckbox-color-border-focus: var(--slds-c-checkbox-color-border-focus);
+  --_slds-c-inputcheckbox-mark-color-foreground: var(--slds-c-checkbox-mark-color-foreground);
+  --_slds-c-inputcheckbox-radius-border: var(--slds-c-checkbox-radius-border);
+  /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
 
-    /* We need 'flex' instead of SDS's 'inline-flex' for the responsive label-inline variant */
-    display: flex;
-  }
+  /* We need 'flex' instead of SDS's 'inline-flex' for the responsive label-inline variant */
+  display: flex;
+}
 /**
      * Label Container
      */
 :host([data-render-mode="shadow"]) [part='label-container'] {
-    /* Accounts for help-text in same row as label */
-    padding-inline-end: var(--slds-g-spacing-1);
-  }
+  /* Accounts for help-text in same row as label */
+  padding-inline-end: var(--slds-g-spacing-1);
+}
 /**
      * Label
      *
@@ -195,27 +195,27 @@
      * avoid collisions with other components using [part='label'] (e.g. slds-input-text)
      */
 :host([data-render-mode="shadow"]) [part='input-checkbox'] [part='label'] {
-    color: var(--_slds-c-inputcheckbox-label-color, var(--slds-g-color-on-surface-2));
-    margin-block-end: 0;
-    padding-block-start: calc(var(--slds-g-spacing-1) / 2);
-    padding-inline-start: var(--slds-g-spacing-2);
-  }
+  color: var(--_slds-c-inputcheckbox-label-color, var(--slds-g-color-on-surface-2));
+  margin-block-end: 0;
+  padding-block-start: calc(var(--slds-g-spacing-1) / 2);
+  padding-inline-start: var(--slds-g-spacing-2);
+}
 /**
      * Checkbox
      *
      * Hidden from view, see Indicator for visual faux checkbox.
      */
 :host([data-render-mode="shadow"]) [part='checkbox'] {
-    width: 1px;
-    height: 1px;
-    border: 0;
-    clip: rect(0 0 0 0);
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    pointer-events: auto;
-  }
+  width: 1px;
+  height: 1px;
+  border: 0;
+  clip: rect(0 0 0 0);
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  pointer-events: auto;
+}
 /**
      * Checkbox Indicator
      *
@@ -231,130 +231,136 @@
      * + LBC uses a styled <span>. Due to this divergence, we require custom CSS.
      */
 :host([data-render-mode="shadow"]) [part='indicator'] {
-    display: inline-block;
-    position: relative;
-    width: 1rem;
-    height: 1rem;
-    border-radius: var(--_slds-c-inputcheckbox-radius-border, var(--slds-g-radius-border-1));
-    border: var(--_slds-c-inputcheckbox-sizing-border, var(--slds-g-sizing-border-1)) solid
-      var(--_slds-c-inputcheckbox-color-border, var(--slds-g-color-border-2));
-    background-color: var(--_slds-c-inputcheckbox-color-background, var(--slds-g-color-surface-container-1));
-    box-shadow: var(--_slds-c-inputcheckbox-shadow);
-    transition: border 0.1s linear, background-color 0.1s linear;
-    vertical-align: middle;
-  }
+  display: inline-block;
+  position: relative;
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--_slds-c-inputcheckbox-radius-border, var(--slds-g-radius-border-1));
+  border: var(--_slds-c-inputcheckbox-sizing-border, var(--slds-g-sizing-border-1)) solid
+    var(--_slds-c-inputcheckbox-color-border, var(--slds-g-color-border-2));
+  background-color: var(--_slds-c-inputcheckbox-color-background, var(--slds-g-color-surface-container-1));
+  box-shadow: var(--_slds-c-inputcheckbox-shadow);
+  transition:
+    border 0.1s linear,
+    background-color 0.1s linear;
+  vertical-align: middle;
+}
 /**
      * Checked
      */
 :host([data-render-mode="shadow"][checked]) [part='indicator']::after {
-    content: '';
-    height: calc(1rem / 4);
-    width: calc(1rem / 2);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0) rotate(-45deg);
-    border-bottom: 2px solid
-      var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
-    border-left: 2px solid var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
-  }
+  content: '';
+  height: calc(1rem / 4);
+  width: calc(1rem / 2);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
+  border-bottom: 2px solid
+    var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
+  border-left: 2px solid
+    var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
+}
 :host([data-render-mode="shadow"][checked]) [part='indicator'] {
-    --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-checked);
-    --_slds-c-inputcheckbox-color-border: var(--_slds-c-inputcheckbox-color-border-checked);
-  }
+  --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-checked);
+  --_slds-c-inputcheckbox-color-border: var(--_slds-c-inputcheckbox-color-border-checked);
+}
 /**
      * Disabled
      */
 :host([data-render-mode="shadow"][disabled]) [part='indicator'] {
-    --_slds-c-inputcheckbox-color-background: var(
-      --_slds-c-inputcheckbox-color-background-disabled,
-      var(--slds-g-color-disabled-container-2)
-    );
-    --_slds-c-inputcheckbox-color-border: var(--_slds-c-inputcheckbox-color-border-disabled, var(--slds-g-color-border-disabled-1));
-    --_slds-c-inputcheckbox-mark-color-foreground: var(
-      --_slds-c-inputcheckbox-mark-color-foreground-disabled,
-      var(--slds-g-color-on-disabled-2)
-    );
-  }
+  --_slds-c-inputcheckbox-color-background: var(
+    --_slds-c-inputcheckbox-color-background-disabled,
+    var(--slds-g-color-disabled-container-2)
+  );
+  --_slds-c-inputcheckbox-color-border: var(
+    --_slds-c-inputcheckbox-color-border-disabled,
+    var(--slds-g-color-border-disabled-1)
+  );
+  --_slds-c-inputcheckbox-mark-color-foreground: var(
+    --_slds-c-inputcheckbox-mark-color-foreground-disabled,
+    var(--slds-g-color-on-disabled-2)
+  );
+}
 /**
      * Focused
      */
 :host(:not([disabled])) input:focus-within + .slds-checkbox__label [part='indicator'] {
-    --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-focus);
-    --_slds-c-inputcheckbox-color-border: var(
-      --_slds-c-inputcheckbox-color-border-focus,
-      var(--slds-g-color-accent-2)
-    );
-    --_slds-c-inputcheckbox-shadow: var(
-      --_slds-c-inputcheckbox-shadow-focus,
-      0 0 3px var(--slds-g-color-accent-2)
-    );
-  }
+  --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-focus);
+  --_slds-c-inputcheckbox-color-border: var(
+    --_slds-c-inputcheckbox-color-border-focus,
+    var(--slds-g-color-accent-2)
+  );
+  --_slds-c-inputcheckbox-shadow: var(
+    --_slds-c-inputcheckbox-shadow-focus,
+    0 0 3px var(--slds-g-color-accent-2)
+  );
+}
 /**
      * Invalid
      */
 :host([data-render-mode="shadow"][invalid]) [part='indicator'] {
-    --_slds-c-inputcheckbox-sizing-border: var(
-      --_slds-c-inputcheckbox-sizing-border-invalid,
-      var(--slds-g-sizing-border-2)
-    );
-    --_slds-c-inputcheckbox-color-border: var(
-      --_slds-c-inputcheckbox-color-border-invalid,
-      var(--slds-g-color-border-error-1)
-    );
-    --_slds-c-inputcheckbox-mark-color-foreground: var(
-      --_slds-c-inputcheckbox-mark-color-foreground-invalid,
-      var(--slds-g-color-error-1)
-    );
-  }
+  --_slds-c-inputcheckbox-sizing-border: var(
+    --_slds-c-inputcheckbox-sizing-border-invalid,
+    var(--slds-g-sizing-border-2)
+  );
+  --_slds-c-inputcheckbox-color-border: var(
+    --_slds-c-inputcheckbox-color-border-invalid,
+    var(--slds-g-color-border-error-1)
+  );
+  --_slds-c-inputcheckbox-mark-color-foreground: var(
+    --_slds-c-inputcheckbox-mark-color-foreground-invalid,
+    var(--slds-g-color-error-1)
+  );
+}
 :host([data-render-mode="shadow"][invalid]) [part='help-text'] {
-    color: var(--_slds-c-inputcheckbox-helptext-color-invalid, var(--slds-g-color-error-1));
-  }
+  color: var(--_slds-c-inputcheckbox-helptext-color-invalid, var(--slds-g-color-error-1));
+}
 /**
      * Label Inline Variant
      *
      * @TODO: Remove magic number for MQ
      */
 @media (width >= 48em) {
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='label-container'] {
-      float: left;
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='label-container'] {
+    float: left;
 
-      /* TODO: Get rid of these magic numbers */
-      max-width: calc(33% - 1.125rem);
-      padding-block-start: var(--slds-g-spacing-1);
-      padding-inline-start: var(--slds-g-spacing-1);
-    }
+    /* TODO: Get rid of these magic numbers */
+    max-width: calc(33% - 1.125rem);
+    padding-block-start: var(--slds-g-spacing-1);
+    padding-inline-start: var(--slds-g-spacing-1);
+  }
 
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='input-checkbox'] {
-      display: block;
-      margin-inline-start: 33%;
-      padding-block: var(--slds-g-spacing-1);
-      margin-block-end: var(--slds-g-spacing-2);
-    }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='input-checkbox'] {
+    display: block;
+    margin-inline-start: 33%;
+    padding-block: var(--slds-g-spacing-1);
+    margin-block-end: var(--slds-g-spacing-2);
+  }
 
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
-      float: left;
-      padding-block-start: var(--slds-g-spacing-1);
-    }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
+    float: left;
+    padding-block-start: var(--slds-g-spacing-1);
+  }
 
-    :host([data-render-mode="shadow"][variant='label-inline']) [part='indicator'] {
-      /* @TODO: add change to SDS, removes line-height from display inline */
-      display: block;
-    }
+  :host([data-render-mode="shadow"][variant='label-inline']) [part='indicator'] {
+    /* @TODO: add change to SDS, removes line-height from display inline */
+    display: block;
   }
+}
 /**
      * Standalone Checkbox
      *
      * label-inline & label-stacked uses the "standalone" checkbox that lives outside the label
      */
 :host([data-render-mode="shadow"][variant='label-inline']) [part='checkbox'],:host([data-render-mode="shadow"][variant='label-stacked']) [part='checkbox'] {
-    width: 1rem;
-    height: 1rem;
-    margin: 0;
-    clip: auto;
-    opacity: 0;
-    z-index: 1;
-  }
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  clip: auto;
+  opacity: 0;
+  z-index: 1;
+}
 /**
    * A temporarily baked-in utility class until SLDS gets a proper utility package.
    *
@@ -374,8 +380,8 @@
   text-transform: none !important;
   white-space: nowrap !important;
 }
-:host([data-render-mode="shadow"]) .slds-checkbox [type="checkbox"]:indeterminate + .slds-checkbox__label .slds-checkbox_faux::after {
-  content: "";
+:host([data-render-mode="shadow"]) .slds-checkbox [type='checkbox']:indeterminate + .slds-checkbox__label .slds-checkbox_faux::after {
+  content: '';
   display: block;
   position: absolute;
   top: 50%;

package/src/lightning/datatable/primitive-cell-factory.slds.css

@@ -56,4 +56,3 @@
 :host([data-render-mode="shadow"]:hover) [part='button button-icon'] {
   opacity: 1;
 }
-

package/src/lightning/datatable/rows.js

@@ -464,9 +464,7 @@ export function updateCell(state, rowIndex, colIndex, rowData) {
     if (renderModeRoleBased) {
         cellClass += (cellClass.length ? ' ' : '') + ROLE_BASED_CELL_CLASS;
     }
-    // using fallback placeholder class for case where class is an empty string
-    // known LWC issue: https://github.com/salesforce/lwc/issues/4661
-    cell.class = cellClass || 'private-ssr-placeholder-class';
+    cell.class = cellClass;
     cell.style = computeCellStyles(cell, col, renderModeRoleBased, cell.style);
 
     if (cell.isInlined) {

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

@@ -18,7 +18,13 @@
 /* cell focus border color */
 [role='gridcell']:focus,
 [role='rowheader']:focus {
-    box-shadow: var(--slds-g-shadow-6, var(--lwc-shadowButtonFocus, 0 0 3px var(--slds-g-color-brand-base-50, #0176d3)));
+    box-shadow: var(
+        --slds-g-shadow-6,
+        var(
+            --lwc-shadowButtonFocus,
+            0 0 3px var(--slds-g-color-brand-base-50, #0176d3)
+        )
+    );
     outline: none;
 }
 
@@ -34,13 +40,19 @@
 
 /* Row borders */
 [data-row-key-value] {
-    border-top: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-1, #c9c9c9);
+    border-top: var(--slds-g-sizing-border-1, 1px) solid
+        var(--slds-g-color-border-1, #c9c9c9);
 }
 
 /* row border on hover */
-[data-rowgroup-body] [data-row-key-value]:hover [role='gridcell']:not(.slds-has-focus),
-[data-rowgroup-body] [data-row-key-value]:hover [role='rowheader']:not(.slds-has-focus) {
-    box-shadow: inset 0 var(--slds-g-sizing-border-1, 1px)
+[data-rowgroup-body]
+    [data-row-key-value]:hover
+    [role='gridcell']:not(.slds-has-focus),
+[data-rowgroup-body]
+    [data-row-key-value]:hover
+    [role='rowheader']:not(.slds-has-focus) {
+    box-shadow:
+        inset 0 var(--slds-g-sizing-border-1, 1px)
             var(--slds-g-color-border-1, #c9c9c9),
         inset 0 calc(var(--slds-g-sizing-border-1, 1px) * -1)
             var(--slds-g-color-border-1, #c9c9c9);
@@ -56,9 +68,9 @@
     display: flex;
 }
 
-
 /* TODO: Replace with styling hook */
-[role='row']:hover, [data-row-key-value="HEADER"] > * {
+[role='row']:hover,
+[data-row-key-value='HEADER'] > * {
     background-color: var(--slds-g-color-palette-neutral-95, #f3f2f2);
 }
 /* TODO: Replace with styling hook */
@@ -98,9 +110,10 @@ div[role='grid'][data-render-mode-inline='true']
 
 /* Spinner */
 
-[part="spinner"] {
+[part='spinner'] {
     padding: var(--slds-g-sizing-2, 0.25rem) var(--slds-g-sizing-3, 0.5rem);
-    border-top: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-1, #c9c9c9);
+    border-top: var(--slds-g-sizing-border-1, 1px) solid
+        var(--slds-g-color-border-1, #c9c9c9);
 }
 
 /* Styles to move header out of
@@ -110,25 +123,30 @@ div[role='grid'][data-render-mode-inline='true']
     display: block;
 }
 
-[data-row-key-value="HEADER"] {
+[data-row-key-value='HEADER'] {
     display: table-row;
 }
 
-[data-row-key-value="HEADER"] > * {
+[data-row-key-value='HEADER'] > * {
     display: table-cell;
     position: relative;
-    border-bottom: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-neutral-base-70, var(--lwc-colorGray5, #dddbda));
+    border-bottom: var(--slds-g-sizing-border-1, 1px) solid
+        var(--slds-g-color-neutral-base-70, var(--lwc-colorGray5, #dddbda));
     padding: 0;
     vertical-align: middle;
 }
 
-[data-row-key-value="HEADER"] > *:focus, [data-row-key-value="HEADER"] > *:hover {
+[data-row-key-value='HEADER'] > *:focus,
+[data-row-key-value='HEADER'] > *:hover {
     outline: 0;
     background-color: var(--slds-g-color-neutral-base-100, white);
 }
 
-[data-row-key-value="HEADER"] > *:focus, [data-row-key-value="HEADER"] > *.slds-has-focus {
-    box-shadow: #014486 0 0 0 1px inset, #014486 -0.25rem 0 0 inset;
+[data-row-key-value='HEADER'] > *:focus,
+[data-row-key-value='HEADER'] > *.slds-has-focus {
+    box-shadow:
+        #014486 0 0 0 1px inset,
+        #014486 -0.25rem 0 0 inset;
 }
 
 [part='datagrid-header'] {

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

@@ -6,7 +6,8 @@
 
 .slds-table_header-fixed_container > .slds-scrollable_y::before {
     width: 100%;
-    border-bottom: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-neutral-base-70, var(--lwc-colorGray5, #dddbda));
+    border-bottom: var(--slds-g-sizing-border-1, 1px) solid
+        var(--slds-g-color-neutral-base-70, var(--lwc-colorGray5, #dddbda));
     content: '';
     display: block;
 }

package/src/lightning/datepicker/form-element.slds.css

@@ -1,5 +1,4 @@
 
-
 /**
  * sldsFormElementUtils.css and form-element.css have many similarities
  * however, they are used for very different use cases, and this is why
@@ -255,7 +254,9 @@
   display: block;
 }
 
-:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {/* for rich text via lightning-quill */
+:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-label),:host([data-render-mode="shadow"][variant='label-stacked']) .slds-form-element__control,:host([data-render-mode="shadow"][variant="label-stacked"]) ::part(rich-text-editor-container) {
+  /* for rich text via lightning-quill */
+
   /* @W-14518344 The following line still exists in SLDS-internal
       but it was removed here because it was causing the input
       component to not display it's bottom border
@@ -294,8 +295,7 @@
 /* Force inner child input to not have padding and margin.
 The parent (ex. lightning-input-field) will provide it instead */
 
-:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline']
-{
+:host([data-render-mode="shadow"][variant='label-inline']) .slds-form-element,:host([data-render-mode="shadow"][variant='label-inline']) [variant='label-inline'] {
   padding: 0;
   margin-block-end: 0;
 }