apex-grid 3.5.0 → 4.0.0-beta.1

package/components/cell.js

@@ -4,14 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var _a;
 import { consume } from '@lit/context';
 import { html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { gridStateContext } from '../controllers/state.js';
 import { getColumnTypeRenderer } from '../internal/column-types.js';
 import { registerComponent } from '../internal/register.js';
-import { GRID_CELL_TAG } from '../internal/tags.js';
+import { GRID_CELL_TAG, GRID_ROW_TAG } from '../internal/tags.js';
 import { styles } from '../styles/body-cell/body-cell.css.js';
 function isErrorLike(value) {
     return (typeof value === 'object' &&
@@ -19,16 +18,65 @@ function isErrorLike(value) {
         typeof value.code === 'string' &&
         value.code.startsWith('#'));
 }
-class ApexGridCell extends LitElement {
+function renderedRows(body) {
+    if (!body)
+        return [];
+    return Array.from(body.children).filter((element) => element.localName === GRID_ROW_TAG);
+}
+function tabTarget(count, from, keys, key, step, isFullWidth) {
+    const column = keys[keys.indexOf(key) + step];
+    if (column !== undefined)
+        return { row: from, column };
+    const wrapColumn = keys[step > 0 ? 0 : keys.length - 1];
+    for (let index = from + step; index >= 0 && index < count; index += step) {
+        if (!isFullWidth(index))
+            return { row: index, column: wrapColumn };
+    }
+    return null;
+}
+function nearestCellRow(count, start, step, isFullWidth) {
+    const origin = Math.min(Math.max(start, 0), count - 1);
+    for (let distance = 0; distance < count; distance++) {
+        for (const index of [origin + distance * step, origin - distance * step]) {
+            if (index >= 0 && index < count && !isFullWidth(index))
+                return index;
+        }
+    }
+    return -1;
+}
+function findRenderedCell(body, node) {
+    return renderedRows(body)
+        .find((row) => row.index === node.row)
+        ?.cells.find((cell) => cell.column.key === node.column);
+}
+function scrollRowIntoRange(scroller, body, index) {
+    const rows = renderedRows(body).sort((a, b) => a.index - b.index);
+    const first = rows.at(0);
+    const last = rows.at(-1);
+    if (!first || !last)
+        return;
+    const top = first.getBoundingClientRect().top;
+    const height = (last.getBoundingClientRect().bottom - top) / (last.index - first.index + 1);
+    const view = scroller.getBoundingClientRect();
+    const rowCentre = top + (index - first.index + 0.5) * height;
+    scroller.scrollTop += rowCentre - (view.top + scroller.clientHeight / 2);
+}
+export default class ApexGridCell extends LitElement {
     constructor() {
         super(...arguments);
         this.active = false;
         this.editing = false;
         this.colindex = 0;
+        this.rowIndex = -1;
         this.decorationVersion = 0;
+        this.dataVersion = 0;
         this.validationVersion = 0;
         this.#decoratedKeys = [];
         this.#errors = null;
+        this.#staged = false;
+        this.#resumed = null;
+        this.#reconnected = false;
+        this.#rebound = false;
         this.#handleClick = (event) => {
             if (this.isEditing) {
                 event.stopPropagation();
@@ -56,9 +104,7 @@ class ApexGridCell extends LitElement {
             this.#startEdit();
         };
         this.#refocusAfterEdit = false;
-        this.#commitWith = async (value) => {
-            return this.editingController.commitCell(value ?? this.#pendingValue);
-        };
+        this.#commit = () => this.editingController.commitCell();
         this.#cancel = () => {
             this.editingController.cancelCell();
         };
@@ -68,7 +114,7 @@ class ApexGridCell extends LitElement {
                 case 'Enter':
                     event.preventDefault();
                     this.#refocusAfterEdit = true;
-                    this.#commitWith();
+                    this.#commit();
                     return;
                 case 'Escape':
                     event.preventDefault();
@@ -76,24 +122,12 @@ class ApexGridCell extends LitElement {
                     this.#cancel();
                     return;
                 case 'Tab':
-                    event.preventDefault();
-                    this.#refocusAfterEdit = true;
-                    this.#commitWith();
+                    this.#commitAndTab(event);
                     return;
                 default:
                     return;
             }
         };
-        this.#handleBlur = () => {
-            if (!this.isEditing)
-                return;
-            if (this.editingController.mode === 'cell') {
-                this.#commitWith();
-            }
-            else {
-                this.editingController.commitCell(this.#pendingValue);
-            }
-        };
         this.#handleCellKeydown = (event) => {
             if (!this.isEditing)
                 return;
@@ -103,11 +137,8 @@ class ApexGridCell extends LitElement {
                 this.#cancel();
                 return;
             }
-            if (event.key === 'Tab') {
-                event.preventDefault();
-                this.#refocusAfterEdit = true;
-                this.#commitWith();
-            }
+            if (event.key === 'Tab')
+                this.#commitAndTab(event);
         };
         this.#handleCellFocusOut = (event) => {
             if (!this.isEditing)
@@ -115,26 +146,23 @@ class ApexGridCell extends LitElement {
             const next = event.relatedTarget;
             if (next && (this.contains(next) || this.shadowRoot?.contains(next)))
                 return;
-            if (this.editingController.mode === 'cell') {
-                this.#commitWith();
-            }
-            else {
-                this.editingController.commitCell(this.#pendingValue);
-            }
+            this.#refocusAfterEdit = false;
+            this.#commit();
         };
         this.#handleTextInput = (event) => {
             const target = event.target;
-            if (this.column.type === 'number') {
+            if (this.#isNumeric) {
                 const numeric = target.valueAsNumber;
-                this.#pendingValue = target.value === '' || Number.isNaN(numeric) ? null : numeric;
+                this.editingController.setDraft(target.value === '' || Number.isNaN(numeric) ? null : numeric);
                 return;
             }
-            this.#pendingValue = target.value;
+            this.editingController.setDraft(target.value);
         };
-        this.#handleCheckboxChange = (event) => {
+        this.#handleCheckboxChange = async (event) => {
             const target = event.target;
-            this.#pendingValue = target.checked;
-            this.#commitWith(target.checked);
+            if (!(await this.editingController.commitCell(target.checked))) {
+                target.checked = !target.checked;
+            }
         };
     }
     static get tagName() {
@@ -142,17 +170,20 @@ class ApexGridCell extends LitElement {
     }
     static { this.styles = styles; }
     static register() {
-        registerComponent(_a);
+        registerComponent(ApexGridCell);
     }
     get context() {
+        const data = this.row.data;
+        const key = this.column.key;
         const ctx = {
             parent: this,
             row: this.row,
             column: this.column,
             value: this.value,
+            data,
         };
         if (this.isEditable) {
-            ctx.commit = (next) => this.editingController.commitImmediate(this.row.index, this.column.key, next);
+            ctx.commit = (next) => this.editingController.commitImmediate(data, key, next);
         }
         return ctx;
     }
@@ -167,10 +198,21 @@ class ApexGridCell extends LitElement {
             return false;
         return this.editingController.isEditable(this.column);
     }
+    get #inPinnedBand() {
+        const pin = this.state.rowPin;
+        return pin.hasPinnedRows && pin.enabled && pin.isPinned(this.row.data);
+    }
+    get #recycledBody() {
+        return Boolean(this.state.host.rowRecycling) && !this.#inPinnedBand;
+    }
     #decoratedKeys;
-    static #ERROR_ID = 'apex-cell-error';
     #errors;
+    #staged;
+    #resumed;
+    #reconnected;
+    #rebound;
     connectedCallback() {
+        this.#reconnected = this.hasUpdated && !this.isUpdatePending;
         super.connectedCallback();
         this.setAttribute('role', 'gridcell');
         this.addEventListener('click', this.#handleClick);
@@ -185,7 +227,30 @@ class ApexGridCell extends LitElement {
         this.removeEventListener('focusout', this.#handleCellFocusOut);
         super.disconnectedCallback();
     }
-    willUpdate() {
+    shouldUpdate(changed) {
+        const reconnected = this.#reconnected;
+        this.#reconnected = false;
+        if (!this.hasUpdated || (!changed.size && !reconnected))
+            return true;
+        const tree = this.state?.tree;
+        const readsRow = this.column.cellTemplate || (tree?.enabled && tree.isGroupColumn(this.column.key));
+        for (const key of changed.keys()) {
+            const token = key === 'rowIndex' || key === 'dataVersion';
+            if (key !== 'decorationVersion' && (readsRow || !token))
+                return true;
+        }
+        if (changed.has('decorationVersion') || changed.has('rowIndex'))
+            this.#applyDecoration();
+        return false;
+    }
+    willUpdate(changed) {
+        this.#rebound = this.hasUpdated && changed.has('record');
+        this.#applyStaged();
+        if (changed.has('editing') || this.#rebound) {
+            this.#resumed = this.editing
+                ? this.editingController.heldDraft(this.row.data, this.column.key)
+                : null;
+        }
         if (this.colindex > 0) {
             this.setAttribute('aria-colindex', String(this.colindex));
         }
@@ -210,6 +275,20 @@ class ApexGridCell extends LitElement {
         this.#applyValidation();
         this.#applyDecoration();
     }
+    #applyStaged() {
+        const staged = this.state?.editing?.activeRow
+            ? this.editingController.stagedValues(this.row.data)
+            : null;
+        const key = this.column.key;
+        if (staged?.has(key)) {
+            this.value = staged.get(key);
+            this.#staged = true;
+        }
+        else if (this.#staged) {
+            this.#staged = false;
+            this.value = this.row.data[key];
+        }
+    }
     #applyValidation() {
         const errors = this.state && this.row?.data
             ? (this.editingController?.getCellErrors(this.row.data, this.column.key) ?? null)
@@ -217,13 +296,11 @@ class ApexGridCell extends LitElement {
         this.#errors = errors && errors.length > 0 ? errors : null;
         if (this.#errors) {
             this.setAttribute('aria-invalid', 'true');
-            this.setAttribute('aria-errormessage', _a.#ERROR_ID);
             this.setAttribute('data-invalid', '');
             this.setAttribute('title', this.#errors.join('; '));
         }
         else {
             this.removeAttribute('aria-invalid');
-            this.removeAttribute('aria-errormessage');
             this.removeAttribute('data-invalid');
             this.removeAttribute('title');
         }
@@ -233,16 +310,17 @@ class ApexGridCell extends LitElement {
             return null;
         return html `<span
       part="cell-error"
-      id=${_a.#ERROR_ID}
       role="alert"
       >${this.#errors.join('; ')}</span
     >`;
     }
     #applyDecoration() {
+        if (!this.state?.hasCellDecorators && !this.#decoratedKeys.length)
+            return;
         const decoration = this.state && this.row
             ? this.state.decorateCell({
                 row: this.row.data,
-                rowIndex: this.row.index,
+                rowIndex: this.#inPinnedBand ? -1 : this.rowIndex,
                 column: this.column,
                 value: this.value,
             })
@@ -266,9 +344,16 @@ class ApexGridCell extends LitElement {
     }
     updated(changed) {
         if (this.isEditing) {
+            if (!changed.has('editing'))
+                return;
             const editor = this.editorElement;
-            editor?.focus();
-            if (editor instanceof HTMLInputElement) {
+            const resumed = this.#resumed !== null || this.#rebound;
+            if (resumed && this.#recycledBody && !this.state.navigation.ownsFocus)
+                return;
+            if (resumed)
+                editor?.getBoundingClientRect();
+            editor?.focus(resumed ? { preventScroll: true } : undefined);
+            if (!resumed && editor instanceof HTMLInputElement) {
                 if (editor.type === 'text' || editor.type === 'number') {
                     editor.select();
                 }
@@ -277,6 +362,8 @@ class ApexGridCell extends LitElement {
         }
         if (changed.get('editing') === true && this.#refocusAfterEdit) {
             this.#refocusAfterEdit = false;
+            if (this.#rebound && this.editingController.activeCell)
+                return;
             this.focus();
         }
     }
@@ -285,22 +372,94 @@ class ApexGridCell extends LitElement {
     #startEdit() {
         if (!this.row)
             return;
-        this.editingController.editCell(this.row.index, this.column.key);
+        this.editingController.editRecord(this.row.data, this.column.key);
     }
-    #pendingValue;
     #refocusAfterEdit;
-    #commitWith;
+    #commit;
     #cancel;
+    #commitAndTab(event) {
+        event.preventDefault();
+        if (this.#inPinnedBand) {
+            this.#refocusAfterEdit = true;
+            void this.#commit();
+            return;
+        }
+        const step = event.shiftKey ? -1 : 1;
+        const host = this.state.host;
+        const body = this.row.parentElement;
+        const record = this.row.data;
+        const origin = this.row.index;
+        const key = this.column.key;
+        const columns = this.row.columns;
+        const keys = this.row.cells.map((cell) => cell.column.key);
+        const settle = async () => {
+            await host.updateComplete;
+            await body?.updateComplete;
+            await Promise.all(renderedRows(body).map((row) => row.updateComplete));
+        };
+        void this.#commit().then(async (committed) => {
+            if (!committed)
+                return;
+            await settle();
+            const items = host.pageItems;
+            const isFullWidth = (index) => items[index] == null ||
+                this.state.presentRow(items[index], { columns, rowIndex: index }) !== null;
+            const from = items.indexOf(record);
+            let target;
+            if (from >= 0) {
+                target = tabTarget(items.length, from, keys, key, step, isFullWidth) ?? {
+                    row: from,
+                    column: key,
+                };
+            }
+            else {
+                const row = nearestCellRow(items.length, origin, step, isFullWidth);
+                target = row < 0 ? null : { row, column: key };
+            }
+            if (!target) {
+                body?.focus({ preventScroll: true });
+                return;
+            }
+            this.state.active = target;
+            await settle();
+            let cell = findRenderedCell(body, target);
+            for (let attempt = 0; !cell && attempt < 3; attempt++) {
+                scrollRowIntoRange(host, body, target.row);
+                await new Promise(requestAnimationFrame);
+                await new Promise(requestAnimationFrame);
+                await settle();
+                cell = findRenderedCell(body, target);
+            }
+            if (!cell) {
+                body?.focus({ preventScroll: true });
+                return;
+            }
+            cell.focus({ preventScroll: true });
+            cell.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            await new Promise(requestAnimationFrame);
+            await new Promise(requestAnimationFrame);
+            const active = this.state.active;
+            const dropped = !document.activeElement || document.activeElement === document.body;
+            if (dropped && active.row === target.row && active.column === target.column) {
+                findRenderedCell(body, target)?.focus({ preventScroll: true });
+            }
+        });
+    }
     #handleKeydown;
-    #handleBlur;
     #handleCellKeydown;
     #handleCellFocusOut;
+    get #isNumeric() {
+        const type = this.column.type;
+        return type === 'number' || type === 'currency';
+    }
     #handleTextInput;
     #handleCheckboxChange;
+    get #editorValue() {
+        return this.#resumed ? this.#resumed.value : this.value;
+    }
     renderDefaultEditor() {
-        const value = this.value;
+        const value = this.#editorValue;
         if (this.column.type === 'boolean') {
-            this.#pendingValue = Boolean(value);
             return html `<input
         type="checkbox"
         part="editor"
@@ -308,11 +467,9 @@ class ApexGridCell extends LitElement {
         ?checked=${Boolean(value)}
         @change=${this.#handleCheckboxChange}
         @keydown=${this.#handleKeydown}
-        @blur=${this.#handleBlur}
       />`;
         }
-        if (this.column.type === 'number') {
-            this.#pendingValue = value;
+        if (this.#isNumeric) {
             return html `<input
         type="number"
         part="editor"
@@ -320,10 +477,8 @@ class ApexGridCell extends LitElement {
         .value=${value == null ? '' : String(value)}
         @input=${this.#handleTextInput}
         @keydown=${this.#handleKeydown}
-        @blur=${this.#handleBlur}
       />`;
         }
-        this.#pendingValue = value;
         return html `<input
       type="text"
       part="editor"
@@ -331,7 +486,6 @@ class ApexGridCell extends LitElement {
       .value=${value == null ? '' : String(value)}
       @input=${this.#handleTextInput}
       @keydown=${this.#handleKeydown}
-      @blur=${this.#handleBlur}
     />`;
     }
     renderEditor() {
@@ -340,17 +494,17 @@ class ApexGridCell extends LitElement {
             parent: this,
             row: this.row,
             column: this.column,
-            value: this.value,
+            value: this.#editorValue,
+            data: this.row.data,
             commit: (next) => this.editingController.commitCell(next),
             cancel: () => this.editingController.cancelCell(),
+            setDraft: (next) => this.editingController.setDraft(next),
         };
         if (template) {
-            this.#pendingValue = this.value;
             return template(ctx);
         }
         const typeRenderer = getColumnTypeRenderer(this.column.type);
         if (typeRenderer?.editor) {
-            this.#pendingValue = this.value;
             return typeRenderer.editor(ctx);
         }
         return this.renderDefaultEditor();
@@ -446,11 +600,12 @@ class ApexGridCell extends LitElement {
         return html `${this.renderCellBody()}${error}`;
     }
 }
-_a = ApexGridCell;
-export default ApexGridCell;
 __decorate([
     property({ attribute: false })
 ], ApexGridCell.prototype, "value", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGridCell.prototype, "record", void 0);
 __decorate([
     property({ attribute: false })
 ], ApexGridCell.prototype, "column", void 0);
@@ -470,9 +625,15 @@ __decorate([
 __decorate([
     property({ attribute: false, type: Number })
 ], ApexGridCell.prototype, "colindex", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGridCell.prototype, "rowIndex", void 0);
 __decorate([
     property({ attribute: false, type: Number })
 ], ApexGridCell.prototype, "decorationVersion", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGridCell.prototype, "dataVersion", void 0);
 __decorate([
     property({ attribute: false, type: Number })
 ], ApexGridCell.prototype, "validationVersion", void 0);