lightning-base-components 1.15.1-alpha → 1.15.4-alpha

package/src/lightning/datatable/__examples__/withRowNumbers/withRowNumbers.js

@@ -1,5 +1,5 @@
 import { LightningElement } from 'lwc';
-import fetchDataHelper from './fetchDataHelper';
+import generateData from './generateData';
 
 const columns = [
     { label: 'Label', fieldName: 'name' },
@@ -14,9 +14,8 @@ export default class BasicDatatable extends LightningElement {
     columns = columns;
     rowOffset = 0;
 
-    // eslint-disable-next-line @lwc/lwc/no-async-await
-    async connectedCallback() {
-        this.data = await fetchDataHelper({ amountOfRecords: 100 });
+    connectedCallback() {
+        this.data = generateData({ amountOfRecords: 100 });
     }
 
     increaseRowOffset() {

package/src/lightning/datatable/__wdio__/utam/utam.html

@@ -1,6 +1,7 @@
 <template>
     <div style="height:160px">
         <lightning-datatable
+            data-render-mode="default"
             key-field="id"
             columns={columns}
             data={data}
@@ -11,6 +12,20 @@
             is-loading={loading}>
         </lightning-datatable>
     </div>
+    <div style="height:160px">
+        <lightning-datatable
+            data-render-mode="role-based"
+            key-field="id"
+            columns={columns}
+            data={data}
+            default-sort-direction={defaultSortDirection}
+            sorted-direction={sortDirection}
+            sorted-by={sortedBy}
+            onsort={onHandleSort}
+            is-loading={loading}
+            render-mode="role-based">
+        </lightning-datatable>
+    </div>
     
     <lightning-button label="Enable Loading State" onclick={handleLoadingClick}></lightning-button>
     <lightning-button label="Add More Rows" onclick={handleMoreRowsClick}></lightning-button>

package/src/lightning/datatable/__wdio__/utam/utam.spec.js

@@ -1,189 +1,214 @@
 const Datatable = require('pageobjects/datatable');
 const Button = require('pageobjects/button');
 
-describe('datatable utam test', () => {
-    let root;
-
-    beforeEach(async () => {
-        await browser.url('/datatable/utam');
-        root = await $('datatable-utam');
-        await root.waitForDisplayed();
-    });
-    it('should get the cell value by row and column index', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        const cellValue = await datatable.getCellValueByIndex(1, 2);
-        expect(cellValue).toBe('Billy Simmons');
-    });
-    it('should get the cell value by row index and column label', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        const cellValue = await datatable.getCellValueByLabel(2, 'Age');
-        expect(cellValue).toBe('35');
-    });
-    it('should get the number of rows in the table', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        const cellValue = await datatable.getNumRows();
-        expect(cellValue).toBe(4);
-    });
-    it('should tell if the table has any rows', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        const cellValue = await datatable.hasRows();
-        expect(cellValue).toBe(true);
-    });
-    it('should toggle selection of row - comprehensive', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        for (let i = 1; i <= 4; i++) {
-            expect(await datatable.isRowSelected(i)).toBe('false');
-        }
-
-        await datatable.toggleRowSelection(1);
-        expect(await datatable.isRowSelected(1)).toBe('true');
-        [2, 3, 4].forEach(async (i) => {
-            expect(await datatable.isRowSelected(i)).toBe('false');
+const tableTypes = {
+    default: '[data-render-mode="default"]',
+    roleBased: '[data-render-mode="role-based"]',
+};
+
+describe('Datatable UTAM Page Object Tests', () => {
+    Object.keys(tableTypes).forEach((type) => {
+        describe(`${type} table`, () => {
+            const TABLE_SELECTOR = tableTypes[type];
+
+            let root;
+
+            beforeEach(async () => {
+                await browser.url('/datatable/utam');
+                root = await $('datatable-utam');
+                await root.waitForDisplayed();
+            });
+
+            it('should get the cell value by row and column index', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                const cellValue = await datatable.getCellValueByIndex(1, 2);
+                expect(cellValue).toBe('Billy Simmons');
+            });
+            it('should get the cell value by row index and column label', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                const cellValue = await datatable.getCellValueByLabel(2, 'Age');
+                expect(cellValue).toBe('35');
+            });
+            it('should get the number of rows in the table', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                const cellValue = await datatable.getNumRows();
+                expect(cellValue).toBe(4);
+            });
+            it('should tell if the table has any rows', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                const cellValue = await datatable.hasRows();
+                expect(cellValue).toBe(true);
+            });
+            it('should toggle selection of row - comprehensive', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                for (let i = 1; i <= 4; i++) {
+                    expect(await datatable.isRowSelected(i)).toBe('false');
+                }
+
+                await datatable.toggleRowSelection(1);
+                expect(await datatable.isRowSelected(1)).toBe('true');
+                [2, 3, 4].forEach(async (i) => {
+                    expect(await datatable.isRowSelected(i)).toBe('false');
+                });
+
+                await datatable.toggleRowSelection(2);
+                expect(await datatable.isRowSelected(2)).toBe('true');
+                [3, 4].forEach(async (i) => {
+                    expect(await datatable.isRowSelected(i)).toBe('false');
+                });
+
+                await datatable.toggleRowSelection(3);
+                expect(await datatable.isRowSelected(3)).toBe('true');
+                expect(await datatable.isRowSelected(4)).toBe('false');
+
+                await datatable.toggleRowSelection(4);
+                expect(await datatable.isRowSelected(4)).toBe('true');
+            });
+            it('should toggle selection of row', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                await datatable.toggleRowSelection(3);
+                expect(await datatable.isRowSelected(3)).toBe('true');
+
+                await datatable.toggleRowSelection(3);
+                expect(await datatable.isRowSelected(3)).toBe('false');
+            });
+            it('should get the number of selected rows when not all rows are selected', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                await datatable.toggleRowSelection(3);
+                expect(await datatable.getNumSelectedRows()).toBe(1);
+
+                await datatable.toggleRowSelection(2);
+                expect(await datatable.getNumSelectedRows()).toBe(2);
+            });
+            it('should get the number of selected rows when all rows are selected', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                await datatable.clickSelectAllCheckbox();
+                expect(await datatable.getNumSelectedRows()).toBe(4);
+            });
+            it('should get the number of columns in the table', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.getNumColumns()).toBe(5);
+            });
+            it('should tell whether or not a column is sortable', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.isSortableColumn('Age')).toBe(true);
+
+                // Need to speak to UTAM (about isPresent) or find a better way to write this method
+                // If column is not sortable, the test fails with the error:
+                // "Can't find elements with locator 'lightning-primitive-header-factory.slds-is-sortable' inside its scope element."
+                // expect(await datatable.isSortableColumn('Name')).toBe(false);
+            });
+            it('should tell whether or not the row is selectable', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.isSelectableRow(1)).toBe(true);
+            });
+            it('should get the width of a column', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                const datatableElement = await root.shadow$(
+                    'lightning-datatable'
+                );
+                const columnHeader = await datatableElement.shadow$(
+                    '[aria-label="Name"]'
+                );
+
+                // Remove intermediate white spaces
+                let expectedWidth = await columnHeader.getAttribute('style');
+                expectedWidth = expectedWidth.replace(/\s/g, '');
+                let actualWidth = await datatable.getWidth('Name');
+                actualWidth = actualWidth.replace(/\s/g, '');
+
+                // Using indexOf in case of presence of ';'
+                expect(actualWidth.indexOf(expectedWidth) >= 0).toBe(true);
+            });
+            it('should tell whether or not a column has header actions', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.hasHeaderActions('Name')).toBe(true);
+                expect(await datatable.hasHeaderActions('Age')).toBe(true);
+                // false fails; need to check for true or null; check with UTAM if expected
+                expect(await datatable.hasHeaderActions('Email')).toBe(null);
+            });
+            it('should get the text of the rowheader cell of the specified row', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.getRowHeaderText(2)).toBe(
+                    'Kelsey Denesik'
+                );
+            });
+            it('should click column header of the sortable column', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                let cellValue = await datatable.getCellValueByLabel(1, 'Age');
+                expect(cellValue).toBe('40');
+
+                await datatable.clickSortHeaderButton('Age');
+
+                cellValue = await datatable.getCellValueByLabel(1, 'Age');
+                expect(cellValue).toBe('35');
+            });
+            it('should tell whether the specified row has row actions or not', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.hasRowActionInRow(2)).toBe(true);
+            });
+            it('should tell whether or not the datatable has the loading indicator visible', async () => {
+                const datatable = await utam.load(Datatable, {
+                    element: await root.shadow$(TABLE_SELECTOR),
+                });
+
+                expect(await datatable.isLoading()).toBe(false);
+
+                const button = await utam.load(Button, {
+                    element: await root.shadow$('lightning-button'),
+                });
+                await button.click();
+
+                expect(await datatable.isLoading()).toBe(true);
+            });
         });
-
-        await datatable.toggleRowSelection(2);
-        expect(await datatable.isRowSelected(2)).toBe('true');
-        [3, 4].forEach(async (i) => {
-            expect(await datatable.isRowSelected(i)).toBe('false');
-        });
-
-        await datatable.toggleRowSelection(3);
-        expect(await datatable.isRowSelected(3)).toBe('true');
-        expect(await datatable.isRowSelected(4)).toBe('false');
-
-        await datatable.toggleRowSelection(4);
-        expect(await datatable.isRowSelected(4)).toBe('true');
-    });
-    it('should toggle selection of row', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        await datatable.toggleRowSelection(3);
-        expect(await datatable.isRowSelected(3)).toBe('true');
-
-        await datatable.toggleRowSelection(3);
-        expect(await datatable.isRowSelected(3)).toBe('false');
-    });
-    it('should get the number of selected rows when not all rows are selected', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        await datatable.toggleRowSelection(3);
-        expect(await datatable.getNumSelectedRows()).toBe(1);
-
-        await datatable.toggleRowSelection(2);
-        expect(await datatable.getNumSelectedRows()).toBe(2);
-    });
-    it('should get the number of selected rows when all rows are selected', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        await datatable.clickSelectAllCheckbox();
-        expect(await datatable.getNumSelectedRows()).toBe(4);
-    });
-    it('should get the number of columns in the table', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        expect(await datatable.getNumColumns()).toBe(5);
-    });
-    it('should tell whether or not a column is sortable', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        expect(await datatable.isSortableColumn('Age')).toBe(true);
-
-        // Need to speak to UTAM (about isPresent) or find a better way to write this method
-        // If column is not sortable, the test fails with the error:
-        // "Can't find elements with locator 'lightning-primitive-header-factory.slds-is-sortable' inside its scope element."
-        // expect(await datatable.isSortableColumn('Name')).toBe(false);
-    });
-    it('should tell whether or not the row is selectable', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        expect(await datatable.isSelectableRow(1)).toBe(true);
-    });
-    it('should get the width of a column', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        const dt = await root.shadow$('lightning-datatable');
-        const columnHeader = await dt.shadow$('thead > tr > th:nth-child(2)');
-        const expectedWidth = await columnHeader.getAttribute('style');
-        expect(await datatable.getWidth('Name')).toBe(expectedWidth);
-    });
-    it('should tell whether or not a column has header actions', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        expect(await datatable.hasHeaderActions('Name')).toBe(true);
-        expect(await datatable.hasHeaderActions('Age')).toBe(true);
-        // false fails; need to check for true or null; check with UTAM if expected
-        expect(await datatable.hasHeaderActions('Email')).toBe(null);
-    });
-    it('should get the text of the rowheader cell of the specified row', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        expect(await datatable.getRowHeaderText(2)).toBe('Kelsey Denesik');
-    });
-    it('should click column header of the sortable column', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        let cellValue = await datatable.getCellValueByLabel(1, 'Age');
-        expect(cellValue).toBe('40');
-
-        await datatable.clickSortHeaderButton('Age');
-
-        cellValue = await datatable.getCellValueByLabel(1, 'Age');
-        expect(cellValue).toBe('35');
-    });
-    it('should tell whether the specified row has row actions or not', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        expect(await datatable.hasRowActionInRow(2)).toBe(true);
-    });
-    it('should tell whether or not the datatable has the loading indicator visible', async () => {
-        const datatable = await utam.load(Datatable, {
-            element: await root.shadow$('lightning-datatable'),
-        });
-
-        expect(await datatable.isLoading()).toBe(false);
-
-        const button = await utam.load(Button, {
-            element: await root.shadow$('lightning-button'),
-        });
-        await button.click();
-
-        expect(await datatable.isLoading()).toBe(true);
     });
 });

package/src/lightning/datatable/datatable.js

@@ -211,7 +211,6 @@ export default class LightningDatatable extends LightningElement {
     _privateWidthObserver = null; // Instance of LightningDatatableResizeObserver
     _renderMode = 'table';
     _shouldResetFocus = false; // used to ensure focus isn't lost from changes in renderedRows
-    _shouldResetHeights = false;
     _suppressBottomBar = false;
 
     /************************* PUBLIC PROPERTIES *************************/
@@ -514,8 +513,8 @@ export default class LightningDatatable extends LightningElement {
      */
 
     /**
-     * Reserved for internal use.
      * Enables and configures advanced rendering modes.
+     * It supports properties 'bufferSize', 'fixedHeight', and 'rowHeight'.
      *
      * @type {RenderManagerConfig} value - config object for datatable rendering
      */
@@ -1157,7 +1156,12 @@ export default class LightningDatatable extends LightningElement {
         if (this._shouldResetFocus) {
             // since focus is now getting reset, can change this back to false
             this._shouldResetFocus = false;
-            if (state.activeCell && state.activeCell.focused) {
+            // don't return focus to active cell when inline edit panel is open
+            if (
+                state.activeCell &&
+                state.activeCell.focused &&
+                !state.inlineEdit.isPanelVisible
+            ) {
                 const cellElement = getActiveCellElement(template, state);
                 if (
                     cellElement &&
@@ -1380,7 +1384,7 @@ export default class LightningDatatable extends LightningElement {
     handleResizeEnd(event) {
         event.stopPropagation();
         this._isResizing = false;
-        this._shouldResetHeights = true;
+        this.state.shouldResetHeights = true;
     }
 
     /**
@@ -1465,7 +1469,9 @@ export default class LightningDatatable extends LightningElement {
      */
     handleTableFocusOut(event) {
         handleDatatableFocusOut.call(this, event);
-        this.state.activeCell.focused = this._shouldResetFocus;
+        if (this.state.activeCell) {
+            this.state.activeCell.focused = this._shouldResetFocus;
+        }
     }
 
     /**
@@ -1650,9 +1656,9 @@ export default class LightningDatatable extends LightningElement {
 
         // no need to handle other virtualization/row height logic
         // if heights need to be reset
-        if (this._shouldResetHeights) {
+        if (this.state.shouldResetHeights) {
             resetRowHeights(state);
-            this._shouldResetHeights = false;
+            this.state.shouldResetHeights = false;
         } else if (virtualizedRows && !state.fixedHeight) {
             // if row heights aren't fixed, we need to update items
             // in state to know where rows should be positioned

package/src/lightning/datatable/inlineEdit.js

@@ -317,11 +317,6 @@ function openInlineEdit(dt, target) {
 
     const { rowKeyValue, colKeyValue } = target;
 
-    // ensure that focus remains on inline edit panel instead of active cell
-    if (state.activeCell) {
-        state.activeCell.focused = false;
-    }
-
     inlineEdit.isPanelVisible = true;
     inlineEdit.rowKeyValue = rowKeyValue;
     inlineEdit.colKeyValue = colKeyValue;

package/src/lightning/datatable/inlineEditShared.js

@@ -14,8 +14,10 @@ export function getDirtyValueFromCell(state, rowKeyValue, colKeyValue) {
 
     if (
         dirtyValues &&
-        dirtyValues[rowKeyValue] &&
-        dirtyValues[rowKeyValue][colKeyValue]
+        // eslint-disable-next-line no-prototype-builtins
+        dirtyValues.hasOwnProperty(rowKeyValue) &&
+        // eslint-disable-next-line no-prototype-builtins
+        dirtyValues[rowKeyValue].hasOwnProperty(colKeyValue)
     ) {
         return dirtyValues[rowKeyValue][colKeyValue];
     }

package/src/lightning/datatable/keyboard.js

@@ -12,6 +12,8 @@ import { isCellEditable, getRowByKey } from './rows';
 import { isRTL, getShadowActiveElements } from 'lightning/utilsPrivate';
 import { findFirstVisibleIndex } from './virtualization';
 
+import { escapeDoubleQuotes } from './utils';
+
 // Indicator/flag for a header row
 const HEADER_ROW = 'HEADER';
 
@@ -799,7 +801,13 @@ function stillValidActiveCell(state) {
     const {
         activeCell: { rowKeyValue, colKeyValue },
     } = state;
+
+    let sortableColumns = state.columns.filter((column) => column.sortable);
+
     if (rowKeyValue === HEADER_ROW) {
+        if (state.rows.length && sortableColumns.length === 0) {
+            return false;
+        }
         return state.headerIndexes[colKeyValue] !== undefined;
     }
     return !!(
@@ -830,9 +838,7 @@ export function setFocusActiveCell(
     const { keyboardMode } = state;
     const { rowIndex, colIndex } = getIndexesActiveCell(state);
 
-    // if pressing tab on editable cell, focus will go to inline edit panel instead of cell
-    state.activeCell.focused =
-        !(info && isActiveCellEditable(state)) && isActiveCellValid(state);
+    state.activeCell.focused = !(info && isActiveCellValid(state));
     updateTabIndex(state, rowIndex, colIndex);
 
     let cellElement = getActiveCellElement(template, state);
@@ -1314,13 +1320,15 @@ function isHeaderRow(rowIndex) {
 }
 
 export function getDataRow(rowKeyValue) {
-    return `[data-row-key-value="${rowKeyValue}"]`;
+    return `[data-row-key-value="${escapeDoubleQuotes(rowKeyValue)}"]`;
 }
 
 export function getCellElementByKeys(template, rowKeyValue, colKeyValue) {
     const selector = `${getDataRow(
         rowKeyValue
-    )} [data-col-key-value="${colKeyValue}"] > :first-child`;
+    )} [data-col-key-value="${escapeDoubleQuotes(
+        colKeyValue
+    )}"] > :first-child`;
     return template.querySelector(selector);
 }
 

package/src/lightning/datatable/rowSelection.js

@@ -430,7 +430,7 @@ export function setSelectedRowsKeys(state, value) {
 export function syncSelectedRowsKeys(state, selectedRows) {
     let changed = false;
     const { selectedRowsKeys, keyField } = state;
-
+    const maxRowSelection = getMaxRowSelection(state) || getRowsTotal(state);
     if (Object.keys(selectedRowsKeys).length !== selectedRows.length) {
         changed = true;
         state.selectedRowsKeys = updateSelectedRowsKeysFromSelectedRows(
@@ -446,7 +446,13 @@ export function syncSelectedRowsKeys(state, selectedRows) {
             );
         }
     }
-
+    if (maxRowSelection > 1 && changed) {
+        if (selectedRows.length < maxRowSelection) {
+            markDeselectedRowEnabled(state);
+        } else {
+            markDeselectedRowDisabled(state);
+        }
+    }
     updateBulkSelectionState(state);
 
     return {

package/src/lightning/datatable/state.js

@@ -69,6 +69,7 @@ export const getDefaultState = function () {
         offsetRanges: [],
         firstRowOffset: 0, // how many pixels scrollTop is from top of first visible row
         tableHeight: 0,
+        shouldResetHeights: false,
 
         // inline edit
         inlineEdit: {

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

@@ -40,7 +40,7 @@
                         <!-- empty since keyField wasn't provided TODO: Why is this here? Test and remove! -->
                     </template>
                     <template if:true={hasValidKeyField}>
-                        <thead>
+                        <thead data-rowgroup-header>
                             <!-- Column Header Row -->
                             <tr class="slds-line-height_reset"
                                 data-row-key-value="HEADER"
@@ -101,7 +101,7 @@
                                 </template>
                             </tr>
                         </thead>
-                        <tbody style={computedTbodyStyle}>
+                        <tbody data-rowgroup-body style={computedTbodyStyle}>
                             <template for:each={renderedRows} for:item="row" for:index="rowIndex">
                                 <!-- Data Rows -->
                                 <tr class={row.classnames}

package/src/lightning/datatable/utils.js

@@ -20,6 +20,17 @@ const CLASSSET_PROTOTYPE = {
     },
 };
 
+/**
+ * function for escaping double quotes, later can be
+ * extended in future for any other usecase
+ */
+export function escapeDoubleQuotes(value) {
+    if (typeof value == 'string') {
+        return value.replace(/"/g, '\\"');
+    }
+    return value;
+}
+
 /**
  * Determines if a given value is object-like.
  *