lightning-base-components 1.14.2-alpha → 1.14.3-alpha

package/src/lightning/primitiveCellFactory/cellWithStandardLayout.html

@@ -215,18 +215,20 @@
 
             <!-- row number -->
             <template if:true={isRowNumber}>
-                 <lightning-primitive-datatable-tooltip data-navigation="enable"
-                                                        data-action-triggers="enter,space"
-                                                        class={rowNumberErrorClass}
-                                                        size="xx-small"
-                                                        header={typeAttribute0.title}
-                                                        content={typeAttribute0.messages}
-                                                        variant='error'
-                                                        internal-tab-index={internalTabIndex}
-                                                        alternative-text={typeAttribute0.alternativeText}>
+                <template if:true={_rowHasError}>
+                    <lightning-primitive-datatable-tooltip data-navigation="enable"
+                                                           data-action-triggers="enter,space"
+                                                           class="slds-m-horizontal_xxx-small"
+                                                           size="xx-small"
+                                                           header={typeAttribute0.title}
+                                                           content={typeAttribute0.messages}
+                                                           variant='error'
+                                                           internal-tab-index={internalTabIndex}
+                                                           alternative-text={typeAttribute0.alternativeText}>
 
-                 </lightning-primitive-datatable-tooltip>
-                <span class="slds-row-number slds-text-body_small slds-text-color_weak"></span>
+                    </lightning-primitive-datatable-tooltip>
+                </template>
+                <span class="slds-row-number slds-text-body_small slds-text-color_weak" style={computedRowNumberStyle}></span>
             </template>
 
             <!-- text -->

package/src/lightning/primitiveCellFactory/primitiveCellFactory.js

@@ -8,6 +8,9 @@ import labelEditHasError from '@salesforce/label/LightningDatatable.editHasError
 import labelTrue from '@salesforce/label/LightningDatatable.true';
 import labelFalse from '@salesforce/label/LightningDatatable.false';
 
+// Same constant (TOOLTIP_ALLOWANCE) as used in lightning/datatable/rowNumber.js
+// If making change to this, make sure to modify in rowNumber.js as well
+const TOOLTIP_ALLOWANCE = 20;
 const i18n = {
     edit: labelEdit,
     editHasError: labelEditHasError,
@@ -58,6 +61,7 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     @api wrapTextMaxLines;
 
     _wrapText = false;
+    _rowHasError = false;
 
     @api
     get wrapText() {
@@ -153,7 +157,13 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     get isRowNumber() {
-        return this.isType('rowNumber');
+        if (this.isType('rowNumber')) {
+            const error = this.typeAttribute0;
+            this._rowHasError = error && error.title && error.messages;
+            return true;
+        }
+
+        return false;
     }
 
     get isAction() {
@@ -285,13 +295,8 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
             .toString();
     }
 
-    get rowNumberErrorClass() {
-        const classes = classSet('slds-m-horizontal_xxx-small');
-        const error = this.typeAttribute0;
-        if (error) {
-            classes.add({ 'slds-hidden': !error.title && !error.messages });
-        }
-        return classes.toString();
+    get computedRowNumberStyle() {
+        return this._rowHasError ? '' : `padding-left: ${TOOLTIP_ALLOWANCE}px;`;
     }
 
     get editIconAssistiveText() {

package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.html

@@ -3,19 +3,21 @@
         if:true={visible}
         class="slds-popover slds-popover_edit"
         role="dialog"
+        aria-label={dialogAriaLabel}
         tabindex="-1"
         onblur={handleTypeElemBlur}
         onfocus={handleTypeElemFocus}
         onkeydown={handleCellKeydown}
-        style={computedStyle}
-    >
+        style={computedStyle}>
+
         <span class="inline-edit-form-start" tabindex="0" onfocus={handleFormStartFocus}></span>
         <div class="slds-popover__body">
             <form onsubmit={handleEditFormSubmit} novalidate>
+                <!-- Renders the required indicator -->
                 <lightning-primitive-datatable-iedit-input-wrapper
                     required={required}
-                    class="slds-grid slds-p-left_xx-small"
-                >
+                    class="slds-grid slds-p-left_xx-small">
+                    <!-- Renders the appropriate input type in the inline edit panel -->
                     <lightning-primitive-datatable-iedit-type-factory
                         required={required}
                         class="dt-type-edit-factory slds-col"
@@ -24,10 +26,11 @@
                         edited-value={editedValue}
                         onblur={handleTypeElemBlur}
                         onfocus={handleTypeElemFocus}
-                        key={inputKey}
-                    ></lightning-primitive-datatable-iedit-type-factory>
+                        key={inputKey}>
+                    </lightning-primitive-datatable-iedit-type-factory>
                 </lightning-primitive-datatable-iedit-input-wrapper>
                 <template if:true={isMassEditEnabled}>
+                    <!-- Checkbox to select in order to mass edit multiple rows -->
                     <lightning-input
                         data-mass-selection="true"
                         type="checkbox"
@@ -35,32 +38,32 @@
                         label={massEditCheckboxLabel}
                         onchange={handleMassCheckboxChange}
                         onblur={handleTypeElemBlur}
-                        onfocus={handleTypeElemFocus}
-                    ></lightning-input>
+                        onfocus={handleTypeElemFocus}>
+                    </lightning-input>
                 </template>
                 <template if:false={isMassEditEnabled}>
                     <button type="submit" aria-hidden="true" tabindex="-1" class="slds-hide" value="save"></button>
                 </template>
             </form>
         </div>
+        <!-- If in mass edit mode, render 'Cancel' and 'Apply' buttons -->
         <template if:true={isMassEditEnabled}>
             <div class="slds-popover__footer">
                 <div class="slds-grid slds-grid_align-end">
                     <lightning-button
-                        label={cancelLabel}
+                        label={i18n.cancel}
                         onblur={handleTypeElemBlur}
                         onfocus={handleTypeElemFocus}
-                        onclick={cancelEdition}
-                    ></lightning-button>
+                        onclick={cancelEditing}>
+                    </lightning-button>
                     <lightning-button
-                        label={applyLabel}
+                        label={i18n.apply}
                         style="margin-left: .25rem"
                         variant="brand"
                         onblur={handleTypeElemBlur}
                         onfocus={handleTypeElemFocus}
                         data-form-last-element="true"
-                        onclick={processSubmission}
-                    >
+                        onclick={processSubmission}>
                     </lightning-button>
                 </div>
             </div>

package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.js

@@ -1,4 +1,5 @@
 import { LightningElement, api } from 'lwc';
+import labelEdit from '@salesforce/label/LightningDatatable.edit';
 import labelUpdateSelectedItems from '@salesforce/label/LightningDatatable.updateSelectedItems';
 import labelCancel from '@salesforce/label/LightningDatatable.cancel';
 import labelApply from '@salesforce/label/LightningDatatable.apply';
@@ -6,12 +7,15 @@ import { InteractingState } from 'lightning/inputUtils';
 import { formatLabel } from 'lightning/utils';
 
 const i18n = {
+    edit: labelEdit,
     updateSelectedItems: labelUpdateSelectedItems,
     cancel: labelCancel,
     apply: labelApply,
 };
 
 export default class PrimitiveDatatableIeditPanel extends LightningElement {
+    /************************* PUBLIC PROPERTIES *************************/
+
     @api visible;
     @api rowKeyValue;
     @api colKeyValue;
@@ -21,14 +25,80 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
     @api numberOfSelectedRows;
     @api resolvedTypeAttributes;
 
-    connectedCallback() {
-        this.interactingState = new InteractingState({
-            duration: 10,
-            debounceInteraction: true,
-        });
-        this.interactingState.onleave(() => this.handlePanelLoosedFocus());
+    /**
+     * Checked when opening an edit panel to see if it's valid
+     * Logs an error if type is custom but does not have the
+     * required editTemplate with [data-inputable="true"] element
+     */
+    @api
+    get isEditableValid() {
+        if (
+            !this.columnDef.editableCustomType ||
+            this.inputableElement.isEditableCustomValid
+        ) {
+            return true;
+        } else if (this.columnDef.editableCustomType) {
+            console.error(
+                'Editable custom types must define an editTemplate that includes an element with attribute data-inputable set to "true"'
+            );
+        }
+        return false;
+    }
+
+    /**
+     * Returns whether or not the mass edit update checkbox is selected
+     */
+    @api
+    get isMassEditChecked() {
+        return (
+            this.isMassEditEnabled &&
+            this.template.querySelector('[data-mass-selection="true"]').checked
+        );
+    }
+
+    /**
+     * Returns the value of the input in the inline edit panel
+     * This is retrieved typically when processing inline edit completion
+     */
+    @api
+    get value() {
+        return this.inputableElement ? this.inputableElement.value : null;
+    }
+
+    /**
+     * Returns the validity state object of the input in the inline edit panel
+     */
+    @api
+    get validity() {
+        return this.inputableElement.validity;
+    }
+
+    /************************* PUBLIC METHODS *************************/
+
+    /**
+     * Focuses on the input element in the inline edit panel
+     */
+    @api
+    focus() {
+        const elem = this.inputableElement;
+        this.interactingState.enter();
+
+        if (elem) {
+            elem.focus();
+        }
+    }
+
+    /**
+     * Returns the <section> element which is the container of the
+     * positioned inline edit panel
+     */
+    @api
+    getPositionedElement() {
+        return this.template.querySelector('section');
     }
 
+    /************************* PRIVATE GETTERS *************************/
+
     get computedStyle() {
         const styleHash = {
             'z-index': 1000,
@@ -43,29 +113,41 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
             .join(';');
     }
 
+    get inputableElement() {
+        return this.template.querySelector('.dt-type-edit-factory');
+    }
+
     get inputKey() {
         return this.rowKeyValue + this.colKeyValue;
     }
 
+    get required() {
+        return (
+            this.columnDef.typeAttributes &&
+            this.columnDef.typeAttributes.required
+        );
+    }
+
     get massEditCheckboxLabel() {
         return formatLabel(i18n.updateSelectedItems, this.numberOfSelectedRows);
     }
 
-    get applyLabel() {
-        return i18n.apply;
+    get dialogAriaLabel() {
+        const columnName = this.columnDef.label;
+        return `${i18n.edit} ${columnName}`;
     }
 
-    get cancelLabel() {
-        return i18n.cancel;
+    get i18n() {
+        return i18n;
     }
 
-    get required() {
-        return (
-            this.columnDef.typeAttributes &&
-            this.columnDef.typeAttributes.required
-        );
-    }
+    /************************* EVENT HANDLERS *************************/
 
+    /**
+     * Handles tabbing backwards out of the inline edit panel from the first form element.
+     * If mass edit is enabled, this will set the focus on the last element in the panel - traps focus.
+     * If mass edit is not enabled, it will process completion of inline edit
+     */
     handleFormStartFocus() {
         this.interactingState.enter();
 
@@ -79,6 +161,11 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
         }
     }
 
+    /**
+     * Handles tabbing forwards out of the inline edit panel from the last form element.
+     * If mass edit is enabled, this will set focus on the first element in the panel - traps focus.
+     * If mass edit is not enabled, it will process the completion of inline edit
+     */
     handleFormEndsFocus() {
         this.interactingState.enter();
 
@@ -92,71 +179,20 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
         }
     }
 
-    triggerEditFinished(detail) {
-        detail.rowKeyValue = detail.rowKeyValue || this.rowKeyValue;
-        detail.colKeyValue = detail.colKeyValue || this.colKeyValue;
-
-        const event = new CustomEvent('ieditfinished', {
-            detail,
-        });
-        this.dispatchEvent(event);
-    }
-
-    @api
-    focus() {
-        const elem = this.inputableElement;
-        this.interactingState.enter();
-
-        if (elem) {
-            elem.focus();
-        }
-    }
-
-    get inputableElement() {
-        return this.template.querySelector('.dt-type-edit-factory');
-    }
-
     /**
-     * Checked when opening an edit panel to see if it's valid
-     * Logs an error if type is custom but does not have the
-     * required editTemplate with [data-inputable="true"] element
+     * This is executed when interactingState.leave is triggered
+     * which happens when the inline edit panel loses focus
      */
-    @api
-    get isEditableValid() {
-        if (
-            !this.columnDef.editableCustomType ||
-            this.inputableElement.isEditableCustomValid
-        ) {
-            return true;
-        } else if (this.columnDef.editableCustomType) {
-            console.error(
-                'Editable custom types must define an editTemplate that includes an element with attribute data-inputable set to "true"'
-            );
+    handlePanelLostFocus() {
+        if (this.visible) {
+            this.triggerEditFinished({
+                reason: 'lost-focus',
+            });
         }
-        return false;
-    }
-
-    @api
-    get value() {
-        return this.inputableElement ? this.inputableElement.value : null;
-    }
-
-    @api
-    get validity() {
-        return this.inputableElement.validity;
-    }
-
-    @api
-    get isMassEditChecked() {
-        return (
-            this.isMassEditEnabled &&
-            this.template.querySelector('[data-mass-selection="true"]').checked
-        );
     }
 
-    @api
-    getPositionedElement() {
-        return this.template.querySelector('section');
+    handleTypeElemFocus() {
+        this.interactingState.enter();
     }
 
     handleTypeElemBlur() {
@@ -165,10 +201,6 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
         }
     }
 
-    handleTypeElemFocus() {
-        this.interactingState.enter();
-    }
-
     handleEditFormSubmit(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -180,24 +212,71 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
         return false;
     }
 
+    /**
+     * If the Escape key is pressed on the inline edit panel,
+     * we prevent default action, stop propagation of the event
+     * and close the inline edit panel
+     *
+     * @param {KeyboardEvent} event - keydown
+     */
     handleCellKeydown(event) {
         const { keyCode } = event;
 
         if (keyCode === 27) {
             // Esc key
+            event.preventDefault();
             event.stopPropagation();
-            this.cancelEdition();
+            this.cancelEditing();
         }
     }
 
-    handlePanelLoosedFocus() {
-        if (this.visible) {
-            this.triggerEditFinished({
-                reason: 'loosed-focus',
-            });
-        }
+    /************************* EVENT DISPATCHERS *************************/
+
+    /**
+     * Change handler for the mass edit checkbox.
+     * Dispatches the `masscheckboxchange` event along with the new checked value
+     *
+     * @param {CustomEvent} event - `change` event from lightning-input
+     */
+    handleMassCheckboxChange(event) {
+        const customEvent = new CustomEvent('masscheckboxchange', {
+            detail: {
+                checked: event.detail.checked,
+            },
+        });
+
+        this.dispatchEvent(customEvent);
     }
 
+    /**
+     * Dispatches the `ieditfinished` event with the detail object containing
+     * the reason for inline edit finishing and the rowKeyValue and colKeyValue
+     * with which the particular cell which was edited can be identified.
+     *
+     * @param {Object} detail - typically contains the reason for inline edit finishing
+     */
+    triggerEditFinished(detail) {
+        detail.rowKeyValue = detail.rowKeyValue || this.rowKeyValue;
+        detail.colKeyValue = detail.colKeyValue || this.colKeyValue;
+
+        const event = new CustomEvent('ieditfinished', {
+            detail,
+        });
+        this.dispatchEvent(event);
+    }
+
+    /************************* LIFECYCLE HOOKS *************************/
+
+    connectedCallback() {
+        this.interactingState = new InteractingState({
+            duration: 10,
+            debounceInteraction: true,
+        });
+        this.interactingState.onleave(() => this.handlePanelLostFocus());
+    }
+
+    /************************* HELPER FUNCTIONS *************************/
+
     focusLastElement() {
         this.template.querySelector('[data-form-last-element="true"]').focus();
     }
@@ -210,19 +289,9 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
         }
     }
 
-    cancelEdition() {
+    cancelEditing() {
         this.triggerEditFinished({
             reason: 'edit-canceled',
         });
     }
-
-    handleMassCheckboxChange(event) {
-        const customEvent = new CustomEvent('masscheckboxchange', {
-            detail: {
-                checked: event.detail.checked,
-            },
-        });
-
-        this.dispatchEvent(customEvent);
-    }
 }