apex-grid 1.1.0 → 3.0.0

package/components/cell.js

@@ -4,8 +4,11 @@ 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;
 };
+import { consume } from '@lit/context';
 import { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
+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 { styles } from '../styles/body-cell/body-cell.css.js';
@@ -13,6 +16,104 @@ export default class ApexGridCell extends LitElement {
     constructor() {
         super(...arguments);
         this.active = false;
+        this.editing = false;
+        this.colindex = 0;
+        this.#handleClick = (event) => {
+            if (this.isEditing) {
+                event.stopPropagation();
+                return;
+            }
+            if (!this.isEditable)
+                return;
+            if (this.column.type === 'boolean')
+                return;
+            if (this.editingController.trigger !== 'click')
+                return;
+            this.#startEdit();
+        };
+        this.#handleDoubleClick = (event) => {
+            if (this.isEditing) {
+                event.stopPropagation();
+                return;
+            }
+            if (!this.isEditable)
+                return;
+            if (this.column.type === 'boolean')
+                return;
+            if (this.editingController.trigger !== 'doubleClick')
+                return;
+            this.#startEdit();
+        };
+        this.#commitWith = async (value) => {
+            return this.editingController.commitCell(value ?? this.#pendingValue);
+        };
+        this.#cancel = () => {
+            this.editingController.cancelCell();
+        };
+        this.#handleKeydown = (event) => {
+            event.stopPropagation();
+            switch (event.key) {
+                case 'Enter':
+                    event.preventDefault();
+                    this.#commitWith();
+                    return;
+                case 'Escape':
+                    event.preventDefault();
+                    this.#cancel();
+                    return;
+                case 'Tab':
+                    event.preventDefault();
+                    this.#commitWith();
+                    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;
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.#cancel();
+                return;
+            }
+            if (event.key === 'Tab') {
+                event.preventDefault();
+                this.#commitWith();
+            }
+        };
+        this.#handleCellFocusOut = (event) => {
+            if (!this.isEditing)
+                return;
+            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.#handleTextInput = (event) => {
+            const target = event.target;
+            this.#pendingValue = this.column.type === 'number' ? target.valueAsNumber : target.value;
+        };
+        this.#handleCheckboxChange = (event) => {
+            const target = event.target;
+            this.#pendingValue = target.checked;
+            this.#commitWith(target.checked);
+        };
     }
     static get tagName() {
         return GRID_CELL_TAG;
@@ -22,17 +123,232 @@ export default class ApexGridCell extends LitElement {
         registerComponent(ApexGridCell);
     }
     get context() {
-        return {
+        const ctx = {
             parent: this,
             row: this.row,
             column: this.column,
             value: this.value,
         };
+        if (this.isEditable) {
+            ctx.commit = (next) => this.editingController.commitImmediate(this.row.index, this.column.key, next);
+        }
+        return ctx;
+    }
+    get editingController() {
+        return this.state.editing;
+    }
+    get isEditing() {
+        return this.editing;
+    }
+    get isEditable() {
+        if (!this.editingController)
+            return false;
+        return this.editingController.isEditable(this.column);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'gridcell');
+        this.addEventListener('click', this.#handleClick);
+        this.addEventListener('dblclick', this.#handleDoubleClick);
+        this.addEventListener('keydown', this.#handleCellKeydown);
+        this.addEventListener('focusout', this.#handleCellFocusOut);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.#handleClick);
+        this.removeEventListener('dblclick', this.#handleDoubleClick);
+        this.removeEventListener('keydown', this.#handleCellKeydown);
+        this.removeEventListener('focusout', this.#handleCellFocusOut);
+        super.disconnectedCallback();
+    }
+    willUpdate() {
+        if (this.colindex > 0) {
+            this.setAttribute('aria-colindex', String(this.colindex));
+        }
+        else {
+            this.removeAttribute('aria-colindex');
+        }
+        if (this.active) {
+            this.setAttribute('aria-current', 'true');
+        }
+        else {
+            this.removeAttribute('aria-current');
+        }
+        const tree = this.state?.tree;
+        const isGroup = tree?.enabled && this.row?.data && tree.isGroupColumn(this.column.key);
+        if (isGroup && tree.isExpanded(this.row.data)) {
+            this.setAttribute('data-tree-expanded', '');
+        }
+        else {
+            this.removeAttribute('data-tree-expanded');
+        }
+    }
+    updated() {
+        if (this.isEditing) {
+            const editor = this.editorElement;
+            editor?.focus();
+            if (editor instanceof HTMLInputElement) {
+                if (editor.type === 'text' || editor.type === 'number') {
+                    editor.select();
+                }
+            }
+        }
+    }
+    #handleClick;
+    #handleDoubleClick;
+    #startEdit() {
+        if (!this.row)
+            return;
+        this.editingController.editCell(this.row.index, this.column.key);
+    }
+    #pendingValue;
+    #commitWith;
+    #cancel;
+    #handleKeydown;
+    #handleBlur;
+    #handleCellKeydown;
+    #handleCellFocusOut;
+    #handleTextInput;
+    #handleCheckboxChange;
+    renderDefaultEditor() {
+        const value = this.value;
+        if (this.column.type === 'boolean') {
+            this.#pendingValue = Boolean(value);
+            return html `<input
+        type="checkbox"
+        part="editor"
+        data-apex-editor
+        ?checked=${Boolean(value)}
+        @change=${this.#handleCheckboxChange}
+        @keydown=${this.#handleKeydown}
+        @blur=${this.#handleBlur}
+      />`;
+        }
+        if (this.column.type === 'number') {
+            this.#pendingValue = value;
+            return html `<input
+        type="number"
+        part="editor"
+        data-apex-editor
+        .value=${value == null ? '' : String(value)}
+        @input=${this.#handleTextInput}
+        @keydown=${this.#handleKeydown}
+        @blur=${this.#handleBlur}
+      />`;
+        }
+        this.#pendingValue = value;
+        return html `<input
+      type="text"
+      part="editor"
+      data-apex-editor
+      .value=${value == null ? '' : String(value)}
+      @input=${this.#handleTextInput}
+      @keydown=${this.#handleKeydown}
+      @blur=${this.#handleBlur}
+    />`;
+    }
+    renderEditor() {
+        const template = this.column.editorTemplate;
+        const ctx = {
+            parent: this,
+            row: this.row,
+            column: this.column,
+            value: this.value,
+            commit: (next) => this.editingController.commitCell(next),
+            cancel: () => this.editingController.cancelCell(),
+        };
+        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();
+    }
+    renderTreeAffordance() {
+        const tree = this.state?.tree;
+        if (!tree?.enabled)
+            return null;
+        if (!this.row?.data)
+            return null;
+        if (!tree.isGroupColumn(this.column.key))
+            return null;
+        const data = this.row.data;
+        const meta = tree.getMeta(data);
+        if (!meta)
+            return null;
+        const indent = meta.depth * tree.childIndent;
+        const expanded = tree.isExpanded(data);
+        const handleClick = (event) => {
+            event.stopPropagation();
+            if (!meta.hasChildren)
+                return;
+            void tree.toggleRow(data);
+        };
+        const chevron = meta.hasChildren
+            ? html `<button
+          type="button"
+          part="tree-toggle"
+          aria-label=${expanded ? 'Collapse row' : 'Expand row'}
+          aria-expanded=${expanded ? 'true' : 'false'}
+          @click=${handleClick}
+        >
+          <svg
+            part="tree-chevron"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+            width="14"
+            height="14"
+          >
+            <path
+              d="M9 6l6 6-6 6"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>`
+            : html `<span part="tree-spacer" aria-hidden="true"></span>`;
+        return html `<span
+        part="tree-indent"
+        aria-hidden="true"
+        style=${`inline-size: ${indent}px`}
+      ></span>${chevron}`;
+    }
+    resolveDisplayValue() {
+        const tree = this.state?.tree;
+        if (tree?.enabled && this.row?.data && tree.isSynthesized(this.row.data)) {
+            return tree.isGroupColumn(this.column.key) ? tree.getLabel(this.row.data) : '';
+        }
+        return this.value;
+    }
+    renderCellBody() {
+        if (this.column.cellTemplate) {
+            return this.column.cellTemplate(this.context);
+        }
+        const typeRenderer = getColumnTypeRenderer(this.column.type);
+        if (typeRenderer?.display) {
+            const tree = this.state?.tree;
+            if (tree?.enabled && this.row?.data && tree.isSynthesized(this.row.data)) {
+                return html `${this.resolveDisplayValue()}`;
+            }
+            return typeRenderer.display(this.context);
+        }
+        return html `${this.resolveDisplayValue()}`;
     }
     render() {
-        return this.column.cellTemplate
-            ? this.column.cellTemplate(this.context)
-            : html `${this.value}`;
+        if (this.isEditing) {
+            return this.renderEditor();
+        }
+        const affordance = this.renderTreeAffordance();
+        if (affordance) {
+            return html `${affordance}<span part="tree-cell-content">${this.renderCellBody()}</span>`;
+        }
+        return this.renderCellBody();
     }
 }
 __decorate([
@@ -44,4 +360,17 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], ApexGridCell.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ApexGridCell.prototype, "editing", void 0);
+__decorate([
+    consume({ context: gridStateContext, subscribe: true }),
+    property({ attribute: false })
+], ApexGridCell.prototype, "state", void 0);
+__decorate([
+    query('input, [data-apex-editor]')
+], ApexGridCell.prototype, "editorElement", void 0);
+__decorate([
+    property({ attribute: false, type: Number })
+], ApexGridCell.prototype, "colindex", void 0);
 //# sourceMappingURL=cell.js.map

package/components/cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"cell.js","sourceRoot":"","sources":["../../src/components/cell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAM9D,MAAM,CAAC,OAAO,OAAO,YAA+B,SAAQ,UAAU;IAAtE;;QA4BS,WAAM,GAAG,KAAK,CAAC;IAqBxB,CAAC;IAhDQ,MAAM,KAAK,OAAO;QACvB,OAAO,aAAa,CAAC;IACvB,CAAC;aAEsB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEhC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAClC,CAAC;IA0BD,IAAc,OAAO;QACnB,OAAO;YACL,MAAM,EAAE,IAAI;YACZ,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;SACe,CAAC;IACrC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAC,MAAM,CAAC,YAAY;YAC7B,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,OAAoC,CAAC;YACrE,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;IAC1B,CAAC;;AAjCM;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CACA;AAMxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CACQ;AAOhC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACrB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_CELL_TAG } from '../internal/tags.js';\nimport type { ApexCellContext, ColumnConfiguration, PropertyType } from '../internal/types.js';\nimport { styles } from '../styles/body-cell/body-cell.css.js';\nimport type ApexGridRow from './row.js';\n\n/**\n * Component representing a DOM cell of the Apex grid.\n */\nexport default class ApexGridCell<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_CELL_TAG;\n  }\n\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(ApexGridCell);\n  }\n\n  /**\n   * The value which will be rendered by the component.\n   */\n  @property({ attribute: false })\n  public value!: PropertyType<T>;\n\n  /**\n   * A reference to the column configuration object.\n   */\n  @property({ attribute: false })\n  public column!: ColumnConfiguration<T>;\n\n  /**\n   * Indicates whether this is the active cell in the grid.\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /**\n   * The parent row component holding this cell.\n   */\n  public row!: ApexGridRow<T>;\n\n  protected get context(): ApexCellContext<T> {\n    return {\n      parent: this,\n      row: this.row,\n      column: this.column,\n      value: this.value,\n    } as unknown as ApexCellContext<T>;\n  }\n\n  protected override render() {\n    return this.column.cellTemplate\n      ? this.column.cellTemplate(this.context as ApexCellContext<T> as any)\n      : html`${this.value}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ApexGridCell.tagName]: ApexGridCell<object>;\n  }\n}\n"]}
+{"version":3,"file":"cell.js","sourceRoot":"","sources":["../../src/components/cell.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport { getColumnTypeRenderer } from '../internal/column-types.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_CELL_TAG } from '../internal/tags.js';\nimport type {\n  ApexCellContext,\n  ApexEditorContext,\n  ColumnConfiguration,\n  PropertyType,\n} from '../internal/types.js';\nimport { styles } from '../styles/body-cell/body-cell.css.js';\nimport type ApexGridRow from './row.js';\n\n/**\n * Component representing a DOM cell of the Apex grid.\n *\n * @csspart cell - The cell host element.\n * @csspart editor - The editor wrapper rendered while the cell is in edit mode.\n */\nexport default class ApexGridCell<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_CELL_TAG;\n  }\n\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(ApexGridCell);\n  }\n\n  /**\n   * The value which will be rendered by the component.\n   */\n  @property({ attribute: false })\n  public value!: PropertyType<T>;\n\n  /**\n   * A reference to the column configuration object.\n   */\n  @property({ attribute: false })\n  public column!: ColumnConfiguration<T>;\n\n  /**\n   * Indicates whether this is the active cell in the grid.\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /**\n   * Whether the cell is currently in edit mode. Set by the parent row from the\n   * editing controller's state so cells re-render on edit state changes.\n   */\n  @property({ type: Boolean, reflect: true })\n  public editing = false;\n\n  @consume({ context: gridStateContext, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  /**\n   * The parent row component holding this cell.\n   */\n  public row!: ApexGridRow<T>;\n\n  @query('input, [data-apex-editor]')\n  protected editorElement!: HTMLElement | null;\n\n  protected get context(): ApexCellContext<T> {\n    const ctx = {\n      parent: this,\n      row: this.row,\n      column: this.column,\n      value: this.value,\n    } as unknown as {\n      parent: ApexGridCell<T>;\n      row: ApexGridRow<T>;\n      column: ColumnConfiguration<T>;\n      value: PropertyType<T>;\n      commit?: (value: unknown) => Promise<boolean>;\n    };\n    // Only expose `commit` when the column is editable — non-editable\n    // interactive widgets should render as read-only.\n    if (this.isEditable) {\n      ctx.commit = (next: unknown) =>\n        this.editingController.commitImmediate(this.row.index, this.column.key, next);\n    }\n    return ctx as unknown as ApexCellContext<T>;\n  }\n\n  protected get editingController() {\n    return this.state.editing;\n  }\n\n  protected get isEditing(): boolean {\n    return this.editing;\n  }\n\n  protected get isEditable(): boolean {\n    if (!this.editingController) return false;\n    return this.editingController.isEditable(this.column);\n  }\n\n  /**\n   * 1-based column index used to populate `aria-colindex`. Accounts for the\n   * auto-rendered selection + expansion columns ahead of the data columns.\n   */\n  @property({ attribute: false, type: Number })\n  public colindex = 0;\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'gridcell');\n    this.addEventListener('click', this.#handleClick);\n    this.addEventListener('dblclick', this.#handleDoubleClick);\n    this.addEventListener('keydown', this.#handleCellKeydown);\n    this.addEventListener('focusout', this.#handleCellFocusOut);\n  }\n\n  public override disconnectedCallback(): void {\n    this.removeEventListener('click', this.#handleClick);\n    this.removeEventListener('dblclick', this.#handleDoubleClick);\n    this.removeEventListener('keydown', this.#handleCellKeydown);\n    this.removeEventListener('focusout', this.#handleCellFocusOut);\n    super.disconnectedCallback();\n  }\n\n  protected override willUpdate() {\n    if (this.colindex > 0) {\n      this.setAttribute('aria-colindex', String(this.colindex));\n    } else {\n      this.removeAttribute('aria-colindex');\n    }\n    if (this.active) {\n      this.setAttribute('aria-current', 'true');\n    } else {\n      this.removeAttribute('aria-current');\n    }\n    // Reflect tree-expanded state on the group cell so the SCSS chevron\n    // rotation triggers from this attribute (cheaper than per-render style\n    // mutations and keeps the SVG transform purely declarative).\n    const tree = this.state?.tree;\n    const isGroup = tree?.enabled && this.row?.data && tree.isGroupColumn(this.column.key);\n    if (isGroup && tree.isExpanded(this.row.data)) {\n      this.setAttribute('data-tree-expanded', '');\n    } else {\n      this.removeAttribute('data-tree-expanded');\n    }\n  }\n\n  protected override updated() {\n    if (this.isEditing) {\n      const editor = this.editorElement;\n      editor?.focus();\n      if (editor instanceof HTMLInputElement) {\n        if (editor.type === 'text' || editor.type === 'number') {\n          editor.select();\n        }\n      }\n    }\n  }\n\n  #handleClick = (event: MouseEvent) => {\n    if (this.isEditing) {\n      // Don't let clicks inside the editor bubble into navigation / outside-click commits.\n      event.stopPropagation();\n      return;\n    }\n    if (!this.isEditable) return;\n    // Boolean cells handle interaction in their display widget — clicking the\n    // checkbox commits inline via `ctx.commit`. We never enter edit mode for\n    // booleans, which avoids the visual reflow between display/editor markup\n    // and lets a single click toggle the value.\n    if (this.column.type === 'boolean') return;\n    if (this.editingController.trigger !== 'click') return;\n    this.#startEdit();\n  };\n\n  #handleDoubleClick = (event: MouseEvent) => {\n    if (this.isEditing) {\n      event.stopPropagation();\n      return;\n    }\n    if (!this.isEditable) return;\n    if (this.column.type === 'boolean') return;\n    if (this.editingController.trigger !== 'doubleClick') return;\n    this.#startEdit();\n  };\n\n  #startEdit() {\n    if (!this.row) return;\n    this.editingController.editCell(this.row.index, this.column.key);\n  }\n\n  #pendingValue: unknown;\n\n  #commitWith = async (value?: unknown): Promise<boolean> => {\n    return this.editingController.commitCell(value ?? this.#pendingValue);\n  };\n\n  #cancel = () => {\n    this.editingController.cancelCell();\n  };\n\n  #handleKeydown = (event: KeyboardEvent) => {\n    event.stopPropagation();\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        this.#commitWith();\n        return;\n      case 'Escape':\n        event.preventDefault();\n        this.#cancel();\n        return;\n      case 'Tab':\n        // Commit first; navigation moves to the next/prev cell. Editing of the\n        // landed cell stays manual (Enter to re-edit) for predictability.\n        event.preventDefault();\n        this.#commitWith();\n        return;\n      default:\n        return;\n    }\n  };\n\n  #handleBlur = () => {\n    if (!this.isEditing) return;\n    if (this.editingController.mode === 'cell') {\n      this.#commitWith();\n    } else {\n      // Row mode — stash the value and exit the cell editor; the row stays open.\n      this.editingController.commitCell(this.#pendingValue);\n    }\n  };\n\n  /**\n   * Cell-level keydown that catches keys bubbling out of registry-built\n   * editors (the default editor stops propagation on its own input).\n   *\n   * - Escape always cancels the edit.\n   * - Tab commits (or closes when there's no draft — `commitCell()` with\n   *   `undefined` value is treated as \"no change\" by the controller).\n   *\n   * Per-editor `keydown` handlers that need to consume Enter (e.g. the\n   * built-in `<select>` editor) still get the first crack — they call\n   * `event.stopPropagation()` and we never see those keys here.\n   */\n  #handleCellKeydown = (event: KeyboardEvent) => {\n    if (!this.isEditing) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.#cancel();\n      return;\n    }\n    if (event.key === 'Tab') {\n      event.preventDefault();\n      this.#commitWith();\n    }\n  };\n\n  /**\n   * Cell-level focus-out: commits the active edit when focus truly leaves\n   * the cell (clicking another cell, tabbing past the editor, blurring to\n   * the document body). The default editor's input also has `@blur` which\n   * commits first; by that time `isEditing` is false and this is a no-op.\n   *\n   * For built-in registry editors `commitCell()` with no explicit value\n   * resolves to the current data value — same shape as \"no change\", so\n   * losing focus without picking discards the open editor without writing\n   * spurious data.\n   */\n  #handleCellFocusOut = (event: FocusEvent) => {\n    if (!this.isEditing) return;\n    const next = event.relatedTarget as Node | null;\n    if (next && (this.contains(next) || this.shadowRoot?.contains(next))) return;\n    if (this.editingController.mode === 'cell') {\n      this.#commitWith();\n    } else {\n      this.editingController.commitCell(this.#pendingValue);\n    }\n  };\n\n  #handleTextInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.#pendingValue = this.column.type === 'number' ? target.valueAsNumber : target.value;\n  };\n\n  #handleCheckboxChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.#pendingValue = target.checked;\n    // Booleans commit immediately — toggling is the whole interaction.\n    this.#commitWith(target.checked);\n  };\n\n  protected renderDefaultEditor() {\n    const value = this.value as unknown;\n    if (this.column.type === 'boolean') {\n      this.#pendingValue = Boolean(value);\n      return html`<input\n        type=\"checkbox\"\n        part=\"editor\"\n        data-apex-editor\n        ?checked=${Boolean(value)}\n        @change=${this.#handleCheckboxChange}\n        @keydown=${this.#handleKeydown}\n        @blur=${this.#handleBlur}\n      />`;\n    }\n    if (this.column.type === 'number') {\n      this.#pendingValue = value;\n      return html`<input\n        type=\"number\"\n        part=\"editor\"\n        data-apex-editor\n        .value=${value == null ? '' : String(value)}\n        @input=${this.#handleTextInput}\n        @keydown=${this.#handleKeydown}\n        @blur=${this.#handleBlur}\n      />`;\n    }\n    this.#pendingValue = value;\n    return html`<input\n      type=\"text\"\n      part=\"editor\"\n      data-apex-editor\n      .value=${value == null ? '' : String(value)}\n      @input=${this.#handleTextInput}\n      @keydown=${this.#handleKeydown}\n      @blur=${this.#handleBlur}\n    />`;\n  }\n\n  protected renderEditor() {\n    const template = this.column.editorTemplate;\n    const ctx = {\n      parent: this,\n      row: this.row,\n      column: this.column,\n      value: this.value,\n      commit: (next: unknown) => this.editingController.commitCell(next),\n      cancel: () => this.editingController.cancelCell(),\n    };\n    if (template) {\n      // For custom editors we don't know the draft shape; reset pending so\n      // cell-level commit doesn't write a stale value from a previous edit.\n      this.#pendingValue = this.value;\n      return template(ctx as unknown as ApexEditorContext<T> as never);\n    }\n    const typeRenderer = getColumnTypeRenderer<T>(this.column.type);\n    if (typeRenderer?.editor) {\n      this.#pendingValue = this.value;\n      return typeRenderer.editor(ctx as never);\n    }\n    return this.renderDefaultEditor();\n  }\n\n  /**\n   * Renders the tree affordance — depth-based indent + a chevron toggle (or\n   * leaf spacer) — that prefixes the group cell when {@link ApexGrid.tree}\n   * is enabled. Returns `nothing` for every other cell.\n   */\n  protected renderTreeAffordance() {\n    const tree = this.state?.tree;\n    if (!tree?.enabled) return null;\n    if (!this.row?.data) return null;\n    if (!tree.isGroupColumn(this.column.key)) return null;\n\n    const data = this.row.data;\n    const meta = tree.getMeta(data);\n    if (!meta) return null;\n\n    const indent = meta.depth * tree.childIndent;\n    const expanded = tree.isExpanded(data);\n    const handleClick = (event: MouseEvent) => {\n      event.stopPropagation();\n      if (!meta.hasChildren) return;\n      void tree.toggleRow(data);\n    };\n\n    const chevron = meta.hasChildren\n      ? html`<button\n          type=\"button\"\n          part=\"tree-toggle\"\n          aria-label=${expanded ? 'Collapse row' : 'Expand row'}\n          aria-expanded=${expanded ? 'true' : 'false'}\n          @click=${handleClick}\n        >\n          <svg\n            part=\"tree-chevron\"\n            viewBox=\"0 0 24 24\"\n            aria-hidden=\"true\"\n            width=\"14\"\n            height=\"14\"\n          >\n            <path\n              d=\"M9 6l6 6-6 6\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>`\n      : html`<span part=\"tree-spacer\" aria-hidden=\"true\"></span>`;\n\n    return html`<span\n        part=\"tree-indent\"\n        aria-hidden=\"true\"\n        style=${`inline-size: ${indent}px`}\n      ></span>${chevron}`;\n  }\n\n  /**\n   * Resolves the value to display for the cell. Synthesized tree parents\n   * (those that appear only as a path segment with no backing data) render\n   * their last path segment in the group column and nothing elsewhere.\n   */\n  protected resolveDisplayValue(): unknown {\n    const tree = this.state?.tree;\n    if (tree?.enabled && this.row?.data && tree.isSynthesized(this.row.data)) {\n      return tree.isGroupColumn(this.column.key) ? tree.getLabel(this.row.data) : '';\n    }\n    return this.value;\n  }\n\n  protected renderCellBody() {\n    if (this.column.cellTemplate) {\n      return this.column.cellTemplate(this.context as ApexCellContext<T> as never);\n    }\n    const typeRenderer = getColumnTypeRenderer<T>(this.column.type);\n    if (typeRenderer?.display) {\n      // Synthesized parents have no real backing data — route them through\n      // a plain text render instead of the typed renderer.\n      const tree = this.state?.tree;\n      if (tree?.enabled && this.row?.data && tree.isSynthesized(this.row.data)) {\n        return html`${this.resolveDisplayValue()}`;\n      }\n      return typeRenderer.display(this.context as never);\n    }\n    return html`${this.resolveDisplayValue()}`;\n  }\n\n  protected override render() {\n    if (this.isEditing) {\n      return this.renderEditor();\n    }\n    const affordance = this.renderTreeAffordance();\n    if (affordance) {\n      return html`${affordance}<span part=\"tree-cell-content\">${this.renderCellBody()}</span>`;\n    }\n    return this.renderCellBody();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ApexGridCell.tagName]: ApexGridCell<object>;\n  }\n}\n"]}

package/components/filter-row.d.ts

@@ -1,4 +1,3 @@
-import { IgcDropdownComponent, type IgcIconComponent, IgcInputComponent } from 'igniteui-webcomponents';
 import { LitElement, nothing } from 'lit';
 import { type StateController } from '../controllers/state.js';
 import type { ColumnConfiguration } from '../internal/types.js';
@@ -20,11 +19,14 @@ export default class ApexFilterRow<T extends object> extends LitElement {
     protected get filterController(): import("../controllers/filter.js").FilterController<T>;
     protected get condition(): FilterOperation<T>;
     active: boolean;
-    input: IgcInputComponent;
-    conditionElement: IgcIconComponent;
-    dropdown: IgcDropdownComponent;
+    input: HTMLInputElement;
+    conditionElement: HTMLElement;
+    dropdown: HTMLElement;
+    protected dropdownOpen: boolean;
     column: ColumnConfiguration<T>;
     expression: FilterExpression<T>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     protected activeChanged(): void;
     protected renderCriteriaButton(expr: FilterExpression<T>, index: number): typeof nothing | import("lit-html").TemplateResult<1>;
     protected renderExpressionChip(props: ExpressionChipProps<T>): import("lit-html").TemplateResult<1>;
@@ -36,7 +38,7 @@ export default class ApexFilterRow<T extends object> extends LitElement {
     protected renderActiveState(): import("lit-html").TemplateResult<1>;
     protected renderInactiveChips(column: ColumnConfiguration<T>, state: FilterExpressionTree<T>): import("lit-html").TemplateResult<1>[];
     protected renderFilterState(column: ColumnConfiguration<T>): import("lit-html").TemplateResult<1> | import("lit-html").TemplateResult<1>[];
-    protected renderInactiveState(): (typeof nothing | import("lit-html").TemplateResult<1>)[];
+    protected renderInactiveState(): import("lit-html").TemplateResult<1>;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {