lightning-base-components 1.22.2-alpha → 1.26.1-rc.0-alpha

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

@@ -6,11 +6,12 @@
         <span data-keyboard-mode="navigation" class={computedAriaLiveClassForNavMode}>{i18n.ariaLiveNavigationMode}</span>
         <span data-keyboard-mode="action" class={computedAriaLiveClassForActionMode}>{i18n.ariaLiveActionMode}</span>
     </span>
-    <div lwc:dom="manual" class="dt-width-observer" style="width: 100%; height: 0px;"></div>
-    <div part="datagrid-wrapper" class="dt-outer-container" style="height: 100%; position: relative;">
+    <div lwc:ref="widthObserver" lwc:dom="manual" class="dt-width-observer" style="width: 100%; height: 0px;"></div>
+    <div lwc:ref="outerContainer" part="datagrid-wrapper" class="dt-outer-container" style="height: 100%; position: relative;">
         <!-- Inline Edit Panel -->
         <lightning-primitive-datatable-iedit-panel
             data-iedit-panel="true"
+            custom-error-validation-message={state.inlineEdit.customErrorValidationMessage}
             visible={state.inlineEdit.isPanelVisible}
             row-key-value={state.inlineEdit.rowKeyValue}
             col-key-value={state.inlineEdit.colKeyValue}
@@ -23,10 +24,11 @@
             onmasscheckboxchange={handleMassCheckboxChange}
         ></lightning-primitive-datatable-iedit-panel>
         <!-- Table Container -->
-        <div class={computedTableContainerClass} onscroll={handleHorizontalScroll} style={computedScrollerXStyle}>
-            <div class="slds-scrollable_y" onscroll={handleVerticalScroll} style={computedScrollerYStyle}>
+        <div lwc:ref="scrollerX" class={computedTableContainerClass} onscroll={handleHorizontalScroll} style={computedScrollerXStyle}>
+            <div lwc:ref="scrollerY" class="slds-scrollable_y" onscroll={handleVerticalScroll} style={computedScrollerYStyle}>
                 <!-- Corresponds to <table> -->
-                <div class={computedTableClass}
+                <div lwc:ref="tableElement"
+                    class={computedTableClass}
                     part="datagrid"
                     role={computedTableRole}
                     style={computedTableStyle}
@@ -40,8 +42,7 @@
                     aria-rowcount={ariaRowCount}
                     aria-colcount={ariaColCount}
                     data-num-rows={data.length}
-                    data-num-selected-rows={selectedRows.length}
-                    data-last-rendered-row={_lastRenderedRow}>
+                    data-num-selected-rows={selectedRows.length}>
                     <template if:false={hasValidKeyField}>
                         <!-- empty since keyField wasn't provided -->
                     </template>
@@ -57,6 +58,7 @@
                             <div class="slds-line-height_reset table-header"
                                 role="row"
                                 aria-rowindex="1"
+                                lwc:ref="headerRow"
                                 data-row-key-value="HEADER"
                                 onprivateresizestart={handleResizeStart}
                                 onprivateresizeend={handleResizeEnd}>
@@ -65,7 +67,7 @@
                                     <div part="cell"
                                         class="column-header cell"
                                         style={def.style}
-                                        role="columnheader"
+                                        role={def.role}
                                         tabindex={def.tabIndex}
                                         aria-label={def.ariaLabel}
                                         aria-sort={def.sortAriaLabel}
@@ -77,6 +79,8 @@
                                             <lightning-primitive-header-factory
                                                 style={def.style}
                                                 def={def}
+                                                header-height={_headerHeight}
+                                                header-id={computedCheckboxColumnHeaderId}
                                                 dt-context-id={_datatableId}
                                                 key={def.colKeyValue}
                                                 row-key-value="HEADER"
@@ -84,14 +88,14 @@
                                                 col-index={colIndex}
                                                 has-focus={def.hasFocus}
                                                 actions={def.actions}
+                                                img-src={def.imgSrc}
                                                 sortable={def.sortable}
                                                 sorted={def.sorted}
                                                 sorted-direction={def.sortedDirection}
-                                                column-width={def.columnWidth}
                                                 show-checkbox={showSelectAllCheckbox}
                                                 hide-header={hideTableHeader}
-                                                onprivatecolumnheaderid={handleCheckboxHeaderId}
                                                 wrap-table-header={wrapTableHeader}
+                                                wrap-text-max-lines={state.wrapTextMaxLines}
                                                 show-actions-menu={showActionsMenu}>
                                             </lightning-primitive-header-factory>
                                         </template>
@@ -100,6 +104,8 @@
                                             <lightning-primitive-header-factory
                                                 style={def.style}
                                                 def={def}
+                                                header-height={_headerHeight}
+                                                header-id={computedCheckboxColumnHeaderId}
                                                 dt-context-id={_datatableId}
                                                 key={def.colKeyValue}
                                                 row-key-value="HEADER"
@@ -107,15 +113,15 @@
                                                 col-index={colIndex}
                                                 has-focus={def.hasFocus}
                                                 actions={def.actions}
+                                                img-src={def.imgSrc}
                                                 sortable={def.sortable}
                                                 sorted={def.sorted}
                                                 sorted-direction={def.sortedDirection}
-                                                column-width={def.columnWidth}
                                                 resizable={hasResizebleColumns}
                                                 resizestep={widthsData.resizeStep}
                                                 hide-header={hideTableHeader}
-                                                onprivatecolumnheaderid={handleCheckboxHeaderId}
                                                 wrap-table-header={wrapTableHeader}
+                                                wrap-text-max-lines={state.wrapTextMaxLines}
                                                 show-actions-menu={showActionsMenu}>
                                             </lightning-primitive-header-factory>
                                         </template>
@@ -126,6 +132,7 @@
                         <!-- Corresponds to <tbody> -->
                         <div part="datagrid-body"
                             data-rowgroup-body
+                            lwc:ref="tableBody"
                             role="rowgroup"
                             style={computedTbodyStyle}>
                             <template for:each={renderedRows} for:item="row">
@@ -160,11 +167,13 @@
                                                     <!-- Fast Path -->
                                                     <template if:true={cell.isInlined}>
                                                         <span
+                                                            part="input-checkbox"
                                                             class="slds-checkbox"
                                                             data-inline-type="primitive-cell-checkbox"
                                                             onclick={handleInlinedCheckboxContainerClick}
                                                             onmousedown={handleInlinedCheckboxContainerMouseDown}>
                                                             <input type="checkbox"
+                                                                part="checkbox"
                                                                 name={cell.checkboxName}
                                                                 id={cell.checkboxId}
                                                                 checked={row.isSelected}
@@ -175,9 +184,10 @@
                                                                 onclick={handleInlinedCheckboxClick}>
                                                             <label
                                                                 id={cell.checkboxLabelId}
+                                                                part="label-container"
                                                                 class="slds-checkbox__label"
                                                                 for={cell.checkboxId}>
-                                                                <span class="slds-checkbox_faux"></span>
+                                                                <span part="indicator" class="slds-checkbox_faux"></span>
                                                                 <span class="slds-form-element__label slds-assistive-text">
                                                                     {cell.checkboxSelectItemAssistiveText}
                                                                 </span>
@@ -265,22 +275,24 @@
                                                         </template>
                                                         <template if:false={cell.isCustomBareLayout}>
                                                             <span class={cell.computedWrapperClass} data-cell-type={cell.columnType}>
+
+                                                                <!-- tree toggle -->
+                                                                <template if:true={cell.hasTreeData}>
+                                                                    <lightning-primitive-treegrid-cell-toggle
+                                                                        data-navigation="enable"
+                                                                        row-key-value={row.key}
+                                                                        col-key-value={cell.colKeyValue}
+                                                                        display-value={cell.displayValue}
+                                                                        url-label={cell.urlLabel}
+                                                                        value={cell.value}
+                                                                        has-children={cell.typeAttribute21}
+                                                                        is-expanded={cell.typeAttribute22}>
+                                                                    </lightning-primitive-treegrid-cell-toggle>
+                                                                </template>
+
                                                                 <div class={cell.computedCellDivClass} style={cell.computedCellDivStyle} data-editable={cell.isEditable}>
                                                                     <!-- *************** PREFIX ICONS DO NOT ADD ANY TYPE BEFORE THIS *************** -->
 
-                                                                    <!-- tree toggle -->
-                                                                    <template if:true={cell.hasTreeData}>
-                                                                        <lightning-primitive-treegrid-cell-toggle
-                                                                            data-navigation="enable"
-                                                                            row-key-value={row.key}
-                                                                            col-key-value={cell.colKeyValue}
-                                                                            display-value={cell.displayValue}
-                                                                            value={cell.value}
-                                                                            has-children={cell.typeAttribute21}
-                                                                            is-expanded={cell.typeAttribute22}>
-                                                                        </lightning-primitive-treegrid-cell-toggle>
-                                                                    </template>
-
                                                                     <!-- left icon -->
                                                                     <template if:true={cell.hasLeftIcon}>
                                                                         <lightning-icon
@@ -297,19 +309,30 @@
                                                                     <!-- boolean -->
                                                                     <template if:true={cell.isBoolean}>
                                                                         <template if:true={cell.isChecked}>
-                                                                            <lightning-primitive-icon
-                                                                                size="x-small"
-                                                                                icon-name="utility:check">
-                                                                            </lightning-primitive-icon>
+                                                                            <!-- Caution: Modify generate-inlined-icons script before changing comments -->
+                                                                            <!-- START utility:check -->
+                                                                            <template lwc:if={cell.isRTL}>
+                                                                                <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
+                                                                                    <g>
+                                                                             <path d="M191 425L26 259c-6-6-6-16 0-22l22-22c6-6 16-6 22 0l124 125a10 10 0 0015 0L452 95c6-6 16-6 22 0l22 22c6 6 6 16 0 22L213 425c-6 7-16 7-22 0z"></path>
+                                                                            </g>
+                                                                                </svg>
+                                                                            </template>
+                                                                            <template lwc:else>
+                                                                                <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
+                                                                                    <g>
+                                                                             <path d="M191 425L26 259c-6-6-6-16 0-22l22-22c6-6 16-6 22 0l124 125a10 10 0 0015 0L452 95c6-6 16-6 22 0l22 22c6 6 6 16 0 22L213 425c-6 7-16 7-22 0z"></path>
+                                                                            </g>
+                                                                                </svg>
+                                                                            </template>
+                                                                            <!-- END utility:check -->
                                                                         </template>
                                                                         <span class="slds-assistive-text">{cell.booleanCellAssistiveText}</span>
                                                                     </template>
 
                                                                     <!-- currency -->
                                                                     <template if:true={cell.isCurrency}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-number">
+                                                                        <span data-inline-type="formatted-number">
                                                                             {cell.currencyValue}
                                                                         </span>
                                                                     </template>
@@ -317,7 +340,6 @@
                                                                     <!-- custom type with standard layout -->
                                                                     <template if:true={cell.isCustomStandardLayout}>
                                                                         <lightning-primitive-custom-cell
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
                                                                             types={_privateTypes}
                                                                             row-key-value={row.key}
                                                                             col-key-value={cell.colKeyValue}
@@ -345,18 +367,14 @@
 
                                                                     <!-- date local -->
                                                                     <template if:true={cell.isDateLocal}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-date-time">
+                                                                        <span data-inline-type="formatted-date-time">
                                                                             {cell.dateLocalValue}
                                                                         </span>
                                                                     </template>
 
                                                                     <!-- date time -->
                                                                     <template if:true={cell.isDateTime}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-date-time">
+                                                                        <span data-inline-type="formatted-date-time">
                                                                             {cell.dateTimeValue}
                                                                         </span>
                                                                     </template>
@@ -365,16 +383,28 @@
                                                                     <template if:true={cell.isEmail}>
                                                                         <template if:true={cell.showEmailLink}>
                                                                             <a
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-action-triggers="enter"
                                                                                 data-navigation="enable"
                                                                                 href={cell.emailLink}
                                                                                 tabindex={cell.internalTabIndex}>
                                                                                 <template if:false={cell.emailIconHidden}>
-                                                                                    <lightning-primitive-icon
-                                                                                        icon-name="utility:email"
-                                                                                        size="x-small">
-                                                                                    </lightning-primitive-icon>
+                                                                                    <!-- Caution: Modify generate-inlined-icons script before changing comments -->
+                                                                                    <!-- START utility:email -->
+                                                                                    <template lwc:if={cell.isRTL}>
+                                                                                        <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-m-right_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
+                                                                                            <g>
+                                                                                     <path d="M249 301c6 6 15 6 21 0L496 91c4-8 3-21-13-21L36 71c-12 0-22 11-13 21zm251-128c0-10-12-16-20-9L303 327c-12 11-27 17-43 17s-31-6-43-16L41 164c-8-7-20-2-20 9-1-3-1 227-1 227a40 40 0 0040 40h400a40 40 0 0040-40z"></path>
+                                                                                    </g>
+                                                                                        </svg>
+                                                                                    </template>
+                                                                                    <template lwc:else>
+                                                                                        <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-m-right_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
+                                                                                            <g>
+                                                                                     <path d="M249 301c6 6 15 6 21 0L496 91c4-8 3-21-13-21L36 71c-12 0-22 11-13 21zm251-128c0-10-12-16-20-9L303 327c-12 11-27 17-43 17s-31-6-43-16L41 164c-8-7-20-2-20 9-1-3-1 227-1 227a40 40 0 0040 40h400a40 40 0 0040-40z"></path>
+                                                                                    </g>
+                                                                                        </svg>
+                                                                                    </template>
+                                                                                    <!-- END utility:email -->
                                                                                     <span class="slds-assistive-text">{cell.emailIconAssistiveText}</span>
                                                                                 </template> {cell.emailLabel}
                                                                             </a>
@@ -384,7 +414,7 @@
                                                                     <!-- location -->
                                                                     <template if:true={cell.isLocation}>
                                                                         <template if:true={cell.hasLeftIcon}>
-                                                                            <span class={cell.computedMarginClassWhenLeftIconExists}>{cell.locationValue}</span>
+                                                                            <span>{cell.locationValue}</span>
                                                                         </template>
                                                                         <template if:false={cell.hasLeftIcon}>
                                                                             {cell.locationValue}
@@ -393,18 +423,14 @@
 
                                                                     <!-- number -->
                                                                     <template if:true={cell.isNumber}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-number">
+                                                                        <span data-inline-type="formatted-number">
                                                                             {cell.numberValue}
                                                                         </span>
                                                                     </template>
 
                                                                     <!-- percent -->
                                                                     <template if:true={cell.isPercent}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-number">
+                                                                        <span data-inline-type="formatted-number">
                                                                             {cell.percentValue}
                                                                         </span>
                                                                     </template>
@@ -413,7 +439,6 @@
                                                                     <template if:true={cell.isPhone}>
                                                                         <template if:true={cell.showPhoneLink}>
                                                                             <a
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-action-triggers="enter"
                                                                                 data-inline-type="formatted-phone"
                                                                                 data-navigation="enable"
@@ -428,7 +453,6 @@
                                                                     <template if:true={cell.isLookup}>
                                                                         <template if:true={cell.lookupIsNavigable}>
                                                                             <a
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-action-triggers="enter"
                                                                                 data-inline-type="formatted-lookup"
                                                                                 data-navigation="enable"
@@ -440,7 +464,6 @@
                                                                         </template>
                                                                         <template if:false={cell.lookupIsNavigable}>
                                                                             <span
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-inline-type="formatted-lookup"
                                                                                 data-navigation="enable"
                                                                                 data-action-triggers="enter">
@@ -471,11 +494,11 @@
                                                                     <template if:true={cell.isText}>
                                                                         <template if:false={cell.shouldFormatText}>
                                                                             <template if:true={cell.ignoreRTL}>
-                                                                                <span dir="ltr" class={cell.computedMarginClassWhenLeftIconExists}>{cell.textValue}</span>
+                                                                                <span dir="ltr">{cell.textValue}</span>
                                                                             </template>
                                                                             <template if:false={cell.ignoreRTL}>
                                                                                 <template if:true={cell.hasLeftIcon}>
-                                                                                    <span class={cell.computedMarginClassWhenLeftIconExists}>{cell.textValue}</span>
+                                                                                    <span>{cell.textValue}</span>
                                                                                 </template>
                                                                                 <template if:false={cell.hasLeftIcon}>
                                                                                     {cell.textValue}
@@ -483,7 +506,7 @@
                                                                             </template>
                                                                         </template>
                                                                         <template if:true={cell.shouldFormatText}>
-                                                                            <span class={cell.computedMarginClassWhenLeftIconExists}>
+                                                                            <span>
                                                                                 <template for:each={cell.textParts} for:item="part">
                                                                                     <template if:true={part.isLink}>
                                                                                         <a key={part.key} target='_blank' href={part.href} rel="noopener">{part.value}</a>
@@ -500,7 +523,6 @@
                                                                     <template if:true={cell.isURL}>
                                                                         <template if:true={cell.showUrlLink}>
                                                                             <a
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-action-triggers="enter"
                                                                                 data-inline-type="formatted-url"
                                                                                 data-navigation="enable"
@@ -529,18 +551,32 @@
 
                                                                 </div>
                                                                 <template if:true={cell.isEditable}>
-                                                                    <button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small"
+                                                                    <button part="button button-icon"
+                                                                            class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small"
+                                                                            aria-labelledby={cell.editLabelId}
                                                                             data-action-edit="true"
                                                                             data-action-triggers="enter,space"
                                                                             data-navigation="enable"
                                                                             tabindex={cell.internalTabIndex}
                                                                             onclick={handleInlinedEditButtonClick}>
-                                                                        <lightning-primitive-icon
-                                                                            icon-name="utility:edit"
-                                                                            size="xx-small"
-                                                                            svg-class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small slds-button__icon_edit">
-                                                                        </lightning-primitive-icon>
-                                                                        <span class="slds-assistive-text">
+                                                                        <!-- Caution: Modify generate-inlined-icons script before changing comments -->
+                                                                        <!-- START utility:edit -->
+                                                                        <template lwc:if={cell.isRTL}>
+                                                                            <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
+                                                                                <g>
+                                                                         <path d="M95 334l89 89c4 4 10 4 14 0l222-223c4-4 4-10 0-14l-88-88a10 10 0 00-14 0L95 321c-4 4-4 10 0 13zM361 57a10 10 0 000 14l88 88c4 4 10 4 14 0l25-25a38 38 0 000-55l-47-47a40 40 0 00-57 0zM21 482c-2 10 7 19 17 17l109-26c4-1 7-3 9-5l2-2c2-2 3-9-1-13l-90-90c-4-4-11-3-13-1l-2 2a20 20 0 00-5 9z"></path>
+                                                                        </g>
+                                                                            </svg>
+                                                                        </template>
+                                                                        <template lwc:else>
+                                                                            <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
+                                                                                <g>
+                                                                         <path d="M95 334l89 89c4 4 10 4 14 0l222-223c4-4 4-10 0-14l-88-88a10 10 0 00-14 0L95 321c-4 4-4 10 0 13zM361 57a10 10 0 000 14l88 88c4 4 10 4 14 0l25-25a38 38 0 000-55l-47-47a40 40 0 00-57 0zM21 482c-2 10 7 19 17 17l109-26c4-1 7-3 9-5l2-2c2-2 3-9-1-13l-90-90c-4-4-11-3-13-1l-2 2a20 20 0 00-5 9z"></path>
+                                                                        </g>
+                                                                            </svg>
+                                                                        </template>
+                                                                        <!-- END utility:edit -->
+                                                                        <span hidden id={cell.editLabelId}>
                                                                             {cell.editIconAssistiveText}
                                                                         </span>
                                                                     </button>
@@ -551,11 +587,23 @@
                                                                 <template if:true={cell.shouldDisplayReadOnlyIcon}>
                                                                     <!-- TODO: Update the svg-classes once the SLDS team updates their read only icon design to not use classes that have the word 'button'
                                                                     in them in cases when the cell is read only and hence no button is actually rendered -->
-                                                                    <lightning-primitive-icon
-                                                                        icon-name="utility:lock"
-                                                                        size="xx-small"
-                                                                        svg-class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small">
-                                                                    </lightning-primitive-icon>
+                                                                    <!-- Caution: Modify generate-inlined-icons script before changing comments -->
+                                                                    <!-- START utility:lock -->
+                                                                    <template lwc:if={cell.isRTL}>
+                                                                        <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
+                                                                            <g>
+                                                                     <path d="M110 190h40c6 0 10-3 10-9v-1A100 100 0 01267 80c53 4 93 50 93 104v-3c0 6 4 9 10 9h40c6 0 10-3 10-9v-1A160 160 0 00252 20c-85 4-150 76-152 161 1 5 5 9 10 9zm-10-9v4zm360 89a40 40 0 00-40-40H100a40 40 0 00-40 40v190a40 40 0 0040 40h320a40 40 0 0040-40zM306 427c2 6-3 13-10 13h-73c-7 0-11-6-10-13l18-60a48 48 0 01-21-48 50 50 0 0139-38c32-6 60 17 60 47 0 16-8 31-21 39z"></path>
+                                                                    </g>
+                                                                        </svg>
+                                                                    </template>
+                                                                    <template lwc:else>
+                                                                        <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
+                                                                            <g>
+                                                                     <path d="M110 190h40c6 0 10-3 10-9v-1A100 100 0 01267 80c53 4 93 50 93 104v-3c0 6 4 9 10 9h40c6 0 10-3 10-9v-1A160 160 0 00252 20c-85 4-150 76-152 161 1 5 5 9 10 9zm-10-9v4zm360 89a40 40 0 00-40-40H100a40 40 0 00-40 40v190a40 40 0 0040 40h320a40 40 0 0040-40zM306 427c2 6-3 13-10 13h-73c-7 0-11-6-10-13l18-60a48 48 0 01-21-48 50 50 0 0139-38c32-6 60 17 60 47 0 16-8 31-21 39z"></path>
+                                                                    </g>
+                                                                        </svg>
+                                                                    </template>
+                                                                    <!-- END utility:lock -->
                                                                 </template>
                                                             </span>
                                                         </template>
@@ -582,6 +630,8 @@
                                                             icon-label={cell.iconLabel}
                                                             icon-position={cell.iconPosition}
                                                             icon-alternative-text={cell.iconAlternativeText}
+                                                            is-custom-type={cell.isCustom}
+                                                            is-custom-bare-layout={cell.isCustomBareLayout}
                                                             editable={cell.editable}
                                                             display-read-only-icon={cell.displayReadOnlyIcon}
                                                             type-attribute-0={cell.typeAttribute0}
@@ -650,22 +700,24 @@
                                                         </template>
                                                         <template if:false={cell.isCustomBareLayout}>
                                                             <span class={cell.computedWrapperClass} data-cell-type={cell.columnType}>
+
+                                                                <!-- tree toggle -->
+                                                                <template if:true={cell.hasTreeData}>
+                                                                    <lightning-primitive-treegrid-cell-toggle
+                                                                        data-navigation="enable"
+                                                                        row-key-value={row.key}
+                                                                        col-key-value={cell.colKeyValue}
+                                                                        display-value={cell.displayValue}
+                                                                        url-label={cell.urlLabel}
+                                                                        value={cell.value}
+                                                                        has-children={cell.typeAttribute21}
+                                                                        is-expanded={cell.typeAttribute22}>
+                                                                    </lightning-primitive-treegrid-cell-toggle>
+                                                                </template>
+
                                                                 <div class={cell.computedCellDivClass} style={cell.computedCellDivStyle} data-editable={cell.isEditable}>
                                                                     <!-- *************** PREFIX ICONS DO NOT ADD ANY TYPE BEFORE THIS *************** -->
 
-                                                                    <!-- tree toggle -->
-                                                                    <template if:true={cell.hasTreeData}>
-                                                                        <lightning-primitive-treegrid-cell-toggle
-                                                                            data-navigation="enable"
-                                                                            row-key-value={row.key}
-                                                                            col-key-value={cell.colKeyValue}
-                                                                            display-value={cell.displayValue}
-                                                                            value={cell.value}
-                                                                            has-children={cell.typeAttribute21}
-                                                                            is-expanded={cell.typeAttribute22}>
-                                                                        </lightning-primitive-treegrid-cell-toggle>
-                                                                    </template>
-
                                                                     <!-- left icon -->
                                                                     <template if:true={cell.hasLeftIcon}>
                                                                         <lightning-icon
@@ -682,19 +734,30 @@
                                                                     <!-- boolean -->
                                                                     <template if:true={cell.isBoolean}>
                                                                         <template if:true={cell.isChecked}>
-                                                                            <lightning-primitive-icon
-                                                                                size="x-small"
-                                                                                icon-name="utility:check">
-                                                                            </lightning-primitive-icon>
+                                                                            <!-- Caution: Modify generate-inlined-icons script before changing comments -->
+                                                                            <!-- START utility:check -->
+                                                                            <template lwc:if={cell.isRTL}>
+                                                                                <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
+                                                                                    <g>
+                                                                             <path d="M191 425L26 259c-6-6-6-16 0-22l22-22c6-6 16-6 22 0l124 125a10 10 0 0015 0L452 95c6-6 16-6 22 0l22 22c6 6 6 16 0 22L213 425c-6 7-16 7-22 0z"></path>
+                                                                            </g>
+                                                                                </svg>
+                                                                            </template>
+                                                                            <template lwc:else>
+                                                                                <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
+                                                                                    <g>
+                                                                             <path d="M191 425L26 259c-6-6-6-16 0-22l22-22c6-6 16-6 22 0l124 125a10 10 0 0015 0L452 95c6-6 16-6 22 0l22 22c6 6 6 16 0 22L213 425c-6 7-16 7-22 0z"></path>
+                                                                            </g>
+                                                                                </svg>
+                                                                            </template>
+                                                                            <!-- END utility:check -->
                                                                         </template>
                                                                         <span class="slds-assistive-text">{cell.booleanCellAssistiveText}</span>
                                                                     </template>
 
                                                                     <!-- currency -->
                                                                     <template if:true={cell.isCurrency}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-number">
+                                                                        <span data-inline-type="formatted-number">
                                                                             {cell.currencyValue}
                                                                         </span>
                                                                     </template>
@@ -702,7 +765,6 @@
                                                                     <!-- custom type with standard layout -->
                                                                     <template if:true={cell.isCustomStandardLayout}>
                                                                         <lightning-primitive-custom-cell
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
                                                                             types={_privateTypes}
                                                                             row-key-value={row.key}
                                                                             col-key-value={cell.colKeyValue}
@@ -730,18 +792,14 @@
 
                                                                     <!-- date local -->
                                                                     <template if:true={cell.isDateLocal}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-date-time">
+                                                                        <span data-inline-type="formatted-date-time">
                                                                             {cell.dateLocalValue}
                                                                         </span>
                                                                     </template>
 
                                                                     <!-- date time -->
                                                                     <template if:true={cell.isDateTime}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-date-time">
+                                                                        <span data-inline-type="formatted-date-time">
                                                                             {cell.dateTimeValue}
                                                                         </span>
                                                                     </template>
@@ -750,16 +808,28 @@
                                                                     <template if:true={cell.isEmail}>
                                                                         <template if:true={cell.showEmailLink}>
                                                                             <a
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-navigation="enable"
                                                                                 data-action-triggers="enter"
                                                                                 href={cell.emailLink}
                                                                                 tabindex={cell.internalTabIndex}>
                                                                                 <template if:false={cell.emailIconHidden}>
-                                                                                    <lightning-primitive-icon
-                                                                                        icon-name="utility:email"
-                                                                                        size="x-small">
-                                                                                    </lightning-primitive-icon>
+                                                                                    <!-- Caution: Modify generate-inlined-icons script before changing comments -->
+                                                                                    <!-- START utility:email -->
+                                                                                    <template lwc:if={cell.isRTL}>
+                                                                                        <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-m-right_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
+                                                                                            <g>
+                                                                                     <path d="M249 301c6 6 15 6 21 0L496 91c4-8 3-21-13-21L36 71c-12 0-22 11-13 21zm251-128c0-10-12-16-20-9L303 327c-12 11-27 17-43 17s-31-6-43-16L41 164c-8-7-20-2-20 9-1-3-1 227-1 227a40 40 0 0040 40h400a40 40 0 0040-40z"></path>
+                                                                                    </g>
+                                                                                        </svg>
+                                                                                    </template>
+                                                                                    <template lwc:else>
+                                                                                        <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-m-right_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
+                                                                                            <g>
+                                                                                     <path d="M249 301c6 6 15 6 21 0L496 91c4-8 3-21-13-21L36 71c-12 0-22 11-13 21zm251-128c0-10-12-16-20-9L303 327c-12 11-27 17-43 17s-31-6-43-16L41 164c-8-7-20-2-20 9-1-3-1 227-1 227a40 40 0 0040 40h400a40 40 0 0040-40z"></path>
+                                                                                    </g>
+                                                                                        </svg>
+                                                                                    </template>
+                                                                                    <!-- END utility:email -->
                                                                                     <span class="slds-assistive-text">{cell.emailIconAssistiveText}</span>
                                                                                 </template> {cell.emailLabel}
                                                                             </a>
@@ -769,7 +839,7 @@
                                                                     <!-- location -->
                                                                     <template if:true={cell.isLocation}>
                                                                         <template if:true={cell.hasLeftIcon}>
-                                                                            <span class={cell.computedMarginClassWhenLeftIconExists}>{cell.locationValue}</span>
+                                                                            <span>{cell.locationValue}</span>
                                                                         </template>
                                                                         <template if:false={cell.hasLeftIcon}>
                                                                             {cell.locationValue}
@@ -778,18 +848,14 @@
 
                                                                     <!-- number -->
                                                                     <template if:true={cell.isNumber}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-number">
+                                                                        <span data-inline-type="formatted-number">
                                                                             {cell.numberValue}
                                                                         </span>
                                                                     </template>
 
                                                                     <!-- percent -->
                                                                     <template if:true={cell.isPercent}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-number">
+                                                                        <span data-inline-type="formatted-number">
                                                                             {cell.percentValue}
                                                                         </span>
                                                                     </template>
@@ -798,7 +864,6 @@
                                                                     <template if:true={cell.isPhone}>
                                                                         <template if:true={cell.showPhoneLink}>
                                                                             <a
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-inline-type="formatted-phone"
                                                                                 data-navigation="enable"
                                                                                 data-action-triggers="enter"
@@ -813,7 +878,6 @@
                                                                     <template if:true={cell.isLookup}>
                                                                         <template if:true={cell.lookupIsNavigable}>
                                                                             <a
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-inline-type="formatted-lookup"
                                                                                 data-navigation="enable"
                                                                                 data-action-triggers="enter"
@@ -825,7 +889,6 @@
                                                                         </template>
                                                                         <template if:false={cell.lookupIsNavigable}>
                                                                             <span
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-inline-type="formatted-lookup"
                                                                                 data-navigation="enable"
                                                                                 data-action-triggers="enter">
@@ -859,11 +922,11 @@
                                                                     <template if:true={cell.isText}>
                                                                         <template if:false={cell.shouldFormatText}>
                                                                             <template if:true={cell.ignoreRTL}>
-                                                                                <span dir="ltr" class={cell.computedMarginClassWhenLeftIconExists}>{cell.textValue}</span>
+                                                                                <span dir="ltr">{cell.textValue}</span>
                                                                             </template>
                                                                             <template if:false={cell.ignoreRTL}>
                                                                                 <template if:true={cell.hasLeftIcon}>
-                                                                                    <span class={cell.computedMarginClassWhenLeftIconExists}>{cell.textValue}</span>
+                                                                                    <span>{cell.textValue}</span>
                                                                                 </template>
                                                                                 <template if:false={cell.hasLeftIcon}>
                                                                                     {cell.textValue}
@@ -871,7 +934,7 @@
                                                                             </template>
                                                                         </template>
                                                                         <template if:true={cell.shouldFormatText}>
-                                                                            <span class={cell.computedMarginClassWhenLeftIconExists}>
+                                                                            <span>
                                                                                 <template for:each={cell.textParts} for:item="part">
                                                                                     <template if:true={part.isLink}>
                                                                                         <a key={part.key} target='_blank' href={part.href} rel="noopener">{part.value}</a>
@@ -888,7 +951,6 @@
                                                                     <template if:true={cell.isURL}>
                                                                         <template if:true={cell.showUrlLink}>
                                                                             <a
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-inline-type="formatted-url"
                                                                                 data-navigation="enable"
                                                                                 data-action-triggers="enter"
@@ -917,18 +979,32 @@
 
                                                                 </div>
                                                                 <template if:true={cell.isEditable}>
-                                                                    <button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small"
+                                                                    <button part="button button-icon"
+                                                                            class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small"
+                                                                            aria-labelledby={cell.editLabelId}
                                                                             data-action-edit="true"
                                                                             data-action-triggers="enter,space"
                                                                             data-navigation="enable"
                                                                             tabindex={cell.internalTabIndex}
                                                                             onclick={handleInlinedEditButtonClick}>
-                                                                        <lightning-primitive-icon
-                                                                            icon-name="utility:edit"
-                                                                            size="xx-small"
-                                                                            svg-class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small slds-button__icon_edit">
-                                                                        </lightning-primitive-icon>
-                                                                        <span class="slds-assistive-text">
+                                                                        <!-- Caution: Modify generate-inlined-icons script before changing comments -->
+                                                                        <!-- START utility:edit -->
+                                                                        <template lwc:if={cell.isRTL}>
+                                                                            <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
+                                                                                <g>
+                                                                         <path d="M95 334l89 89c4 4 10 4 14 0l222-223c4-4 4-10 0-14l-88-88a10 10 0 00-14 0L95 321c-4 4-4 10 0 13zM361 57a10 10 0 000 14l88 88c4 4 10 4 14 0l25-25a38 38 0 000-55l-47-47a40 40 0 00-57 0zM21 482c-2 10 7 19 17 17l109-26c4-1 7-3 9-5l2-2c2-2 3-9-1-13l-90-90c-4-4-11-3-13-1l-2 2a20 20 0 00-5 9z"></path>
+                                                                        </g>
+                                                                            </svg>
+                                                                        </template>
+                                                                        <template lwc:else>
+                                                                            <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
+                                                                                <g>
+                                                                         <path d="M95 334l89 89c4 4 10 4 14 0l222-223c4-4 4-10 0-14l-88-88a10 10 0 00-14 0L95 321c-4 4-4 10 0 13zM361 57a10 10 0 000 14l88 88c4 4 10 4 14 0l25-25a38 38 0 000-55l-47-47a40 40 0 00-57 0zM21 482c-2 10 7 19 17 17l109-26c4-1 7-3 9-5l2-2c2-2 3-9-1-13l-90-90c-4-4-11-3-13-1l-2 2a20 20 0 00-5 9z"></path>
+                                                                        </g>
+                                                                            </svg>
+                                                                        </template>
+                                                                        <!-- END utility:edit -->
+                                                                        <span hidden id={cell.editLabelId}>
                                                                             {cell.editIconAssistiveText}
                                                                         </span>
                                                                     </button>
@@ -939,11 +1015,23 @@
                                                                 <template if:true={cell.shouldDisplayReadOnlyIcon}>
                                                                     <!-- TODO: Update the svg-classes once the SLDS team updates their read only icon design to not use classes that have the word 'button'
                                                                     in them in cases when the cell is read only and hence no button is actually rendered -->
-                                                                    <lightning-primitive-icon
-                                                                        icon-name="utility:lock"
-                                                                        size="xx-small"
-                                                                        svg-class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small">
-                                                                    </lightning-primitive-icon>
+                                                                    <!-- Caution: Modify generate-inlined-icons script before changing comments -->
+                                                                    <!-- START utility:lock -->
+                                                                    <template lwc:if={cell.isRTL}>
+                                                                        <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
+                                                                            <g>
+                                                                     <path d="M110 190h40c6 0 10-3 10-9v-1A100 100 0 01267 80c53 4 93 50 93 104v-3c0 6 4 9 10 9h40c6 0 10-3 10-9v-1A160 160 0 00252 20c-85 4-150 76-152 161 1 5 5 9 10 9zm-10-9v4zm360 89a40 40 0 00-40-40H100a40 40 0 00-40 40v190a40 40 0 0040 40h320a40 40 0 0040-40zM306 427c2 6-3 13-10 13h-73c-7 0-11-6-10-13l18-60a48 48 0 01-21-48 50 50 0 0139-38c32-6 60 17 60 47 0 16-8 31-21 39z"></path>
+                                                                    </g>
+                                                                        </svg>
+                                                                    </template>
+                                                                    <template lwc:else>
+                                                                        <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
+                                                                            <g>
+                                                                     <path d="M110 190h40c6 0 10-3 10-9v-1A100 100 0 01267 80c53 4 93 50 93 104v-3c0 6 4 9 10 9h40c6 0 10-3 10-9v-1A160 160 0 00252 20c-85 4-150 76-152 161 1 5 5 9 10 9zm-10-9v4zm360 89a40 40 0 00-40-40H100a40 40 0 00-40 40v190a40 40 0 0040 40h320a40 40 0 0040-40zM306 427c2 6-3 13-10 13h-73c-7 0-11-6-10-13l18-60a48 48 0 01-21-48 50 50 0 0139-38c32-6 60 17 60 47 0 16-8 31-21 39z"></path>
+                                                                    </g>
+                                                                        </svg>
+                                                                    </template>
+                                                                    <!-- END utility:lock -->
                                                                 </template>
                                                             </span>
                                                         </template>
@@ -971,6 +1059,8 @@
                                                             icon-label={cell.iconLabel}
                                                             icon-position={cell.iconPosition}
                                                             icon-alternative-text={cell.iconAlternativeText}
+                                                            is-custom-type={cell.isCustom}
+                                                            is-custom-bare-layout={cell.isCustomBareLayout}
                                                             editable={cell.editable}
                                                             display-read-only-icon={cell.displayReadOnlyIcon}
                                                             type-attribute-0={cell.typeAttribute0}
@@ -1002,7 +1092,7 @@
                     <template if:true={isLoading}>
                         <div>
                             <div colspan={state.columns.length} part="spinner" class="slds-is-relative">
-                                <lightning-primitive-datatable-loading-indicator></lightning-primitive-datatable-loading-indicator>
+                                <lightning-primitive-datatable-loading-indicator style="height: 40px;"></lightning-primitive-datatable-loading-indicator>
                             </div>
                         </div>
                     </template>