igniteui-grid-lite 0.9.0 → 0.10.0

package/components/header.d.ts

@@ -7,13 +7,22 @@ export default class IgcGridLiteHeader<T extends object> extends LitElement {
     static styles: import("lit").CSSResult;
     static register(): void;
     private readonly _adoptedStylesController;
+    private readonly _a11y;
     protected get context(): IgcHeaderContext<T>;
     protected get isSortable(): boolean;
     protected get resizeController(): import("../controllers/resize.js").ResizeController<T>;
     state: StateController<T>;
     column: ColumnConfiguration<T>;
     adoptRootStyles: boolean;
+    /**
+     * Position of the header among the visible columns. Written as its 1-based
+     * `aria-colindex`.
+     *
+     * @internal
+     */
+    _colIndex: number;
     constructor();
+    private get _shouldAdoptStyles();
     protected update(props: PropertyValues<this>): void;
     private _handleThemeChange;
     protected renderSortPart(): import("lit-html").TemplateResult<1> | typeof nothing;

package/components/header.js

@@ -8,6 +8,7 @@ import { consume } from '@lit/context';
 import { θaddAdoptedStylesController as addAdoptedStylesController, θaddThemingController as addThemingController, IgcIconComponent, } from 'igniteui-webcomponents';
 import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { addA11y } from '../internal/a11y.js';
 import { MIN_COL_RESIZE_WIDTH, SORT_ICON_ASCENDING, SORT_ICON_DESCENDING, } from '../internal/constants.js';
 import { GRID_STATE_CONTEXT } from '../internal/context.js';
 import { partMap } from '../internal/part-map.js';
@@ -38,7 +39,9 @@ export default class IgcGridLiteHeader extends LitElement {
     constructor() {
         super();
         this._adoptedStylesController = addAdoptedStylesController(this);
+        this._a11y = addA11y(this, 'columnheader');
         this.adoptRootStyles = false;
+        this._colIndex = -1;
         this.#handleResize = ({ clientX }) => {
             const { left } = this.getBoundingClientRect();
             const width = Math.max(clientX - left, MIN_COL_RESIZE_WIDTH);
@@ -55,15 +58,25 @@ export default class IgcGridLiteHeader extends LitElement {
             themeChange: this._handleThemeChange,
         });
     }
+    get _shouldAdoptStyles() {
+        return this.adoptRootStyles && this.column.headerTemplate != null;
+    }
     update(props) {
-        if (props.has('adoptRootStyles')) {
-            this._adoptedStylesController.shouldAdoptStyles(this.adoptRootStyles && this.column.headerTemplate != null);
+        if (props.has('adoptRootStyles') || props.has('column')) {
+            this._adoptedStylesController.shouldAdoptStyles(this._shouldAdoptStyles);
         }
+        this._a11y.set({ ariaColIndex: `${this._colIndex}`, ariaSort: this.#ariaSort() });
         super.update(props);
     }
+    #ariaSort() {
+        if (!this.isSortable) {
+            return null;
+        }
+        return this.state.sorting.state.get(this.column.field)?.direction ?? 'none';
+    }
     _handleThemeChange() {
         this._adoptedStylesController.invalidateCache(this.ownerDocument);
-        this._adoptedStylesController.shouldAdoptStyles(this.adoptRootStyles && this.column.headerTemplate != null);
+        this._adoptedStylesController.shouldAdoptStyles(this._shouldAdoptStyles);
     }
     #addResizeEventHandlers() {
         const config = { once: true };
@@ -90,26 +103,23 @@ export default class IgcGridLiteHeader extends LitElement {
     #handleAutosize;
     renderSortPart() {
         const state = this.state.sorting.state.get(this.column.field);
-        const idx = Array.from(this.state.sorting.state.values()).indexOf(state);
-        const attr = this.state.host.sortingOptions.mode === 'multiple' ? (idx > -1 ? idx + 1 : nothing) : nothing;
-        const icon = state
-            ? state.direction === 'ascending'
-                ? SORT_ICON_ASCENDING
-                : SORT_ICON_DESCENDING
-            : SORT_ICON_ASCENDING;
-        return state || this.isSortable
-            ? html `<span
-          part=${partMap({ action: true, sorted: !!state?.direction })}
-          @click=${this.isSortable ? this.#handleClick : nothing}
-        >
-          <igc-icon
-            part=${partMap({ 'sorting-action': !!state })}
-            data-sortIndex=${attr}
-            name=${icon}
-            collection="internal"
-          ></igc-icon>
-        </span>`
-            : nothing;
+        if (!(state || this.isSortable)) {
+            return nothing;
+        }
+        const position = Array.from(this.state.sorting.state.keys()).indexOf(this.column.field);
+        const multiple = this.state.host.sortingOptions.mode === 'multiple';
+        const icon = state?.direction === 'descending' ? SORT_ICON_DESCENDING : SORT_ICON_ASCENDING;
+        return html `<span
+      part=${partMap({ action: true, sorted: !!state?.direction })}
+      @click=${this.isSortable ? this.#handleClick : nothing}
+    >
+      <igc-icon
+        part=${partMap({ 'sorting-action': !!state })}
+        data-sortIndex=${multiple && position > -1 ? position + 1 : nothing}
+        name=${icon}
+        collection="internal"
+      ></igc-icon>
+    </span>`;
     }
     renderContentPart() {
         const defaultContent = this.column.header ?? this.column.field;
@@ -155,4 +165,7 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], IgcGridLiteHeader.prototype, "adoptRootStyles", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcGridLiteHeader.prototype, "_colIndex", void 0);
 //# sourceMappingURL=header.js.map

package/components/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/components/header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EACL,2BAA2B,IAAI,0BAA0B,EACzD,qBAAqB,IAAI,oBAAoB,EAC7C,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EACL,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,wCAAwC,CAAC;AAE7D,MAAM,CAAC,OAAO,OAAO,iBAAoC,SAAQ,UAAU;IAClE,MAAM,KAAK,OAAO;QACvB,OAAO,eAAe,CAAC;IACzB,CAAC;aAEsB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEhC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACzD,CAAC;IAID,IAAc,OAAO;QACnB,OAAO;YACL,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;IACJ,CAAC;IAED,IAAc,UAAU;QACtB,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC;IAED,IAAc,gBAAgB;QAC5B,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;IAYD;QACE,KAAK,EAAE,CAAC;QA5BO,6BAAwB,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;QAyBtE,oBAAe,GAAG,KAAK,CAAC;QA+C/B,kBAAa,GAAG,CAAC,EAAE,OAAO,EAAgB,EAAE,EAAE;YAC5C,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,EAAE,oBAAoB,CAAC,CAAC;YAC7D,MAAM,CAAC,GAAG,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YAElC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACtD,CAAC,CAAC;QAaF,uBAAkB,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,gBAAgB,CAAC,eAAe,GAAG,KAAK,CAAC;YAC9C,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YAC5D,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;QAC/B,CAAC,CAAC;QAEF,oBAAe,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAnExE,oBAAoB,CAAC,IAAI,EAAE,GAAG,EAAE;YAC9B,WAAW,EAAE,IAAI,CAAC,kBAAkB;SACrC,CAAC,CAAC;IACL,CAAC;IAEkB,MAAM,CAAC,KAA2B;QACnD,IAAI,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,wBAAwB,CAAC,iBAAiB,CAC7C,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,MAAM,CAAC,cAAc,IAAI,IAAI,CAC3D,CAAC;QACJ,CAAC;QAED,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,wBAAwB,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAClE,IAAI,CAAC,wBAAwB,CAAC,iBAAiB,CAC7C,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,MAAM,CAAC,cAAc,IAAI,IAAI,CAC3D,CAAC;IACJ,CAAC;IAED,uBAAuB;QACrB,MAAM,MAAM,GAA4B,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAEvD,IAAI,CAAC,gBAAgB,CACnB,mBAAmB,EACnB,GAAG,EAAE;YACH,IAAI,CAAC,gBAAgB,CAAC,eAAe,GAAG,IAAI,CAAC;QAC/C,CAAC,EACD,MAAM,CACP,CAAC;QACF,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;QAC7E,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;QAC3F,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC3D,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,mBAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACtD,CAAC;IAED,aAAa,CAMX;IAEF,kBAAkB,CAAC,EAAgB;QACjC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;QAEjC,EAAE,CAAC,cAAc,EAAE,CAAC;QAEpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAEjC,MAAsB,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACvD,CAAC;IAED,kBAAkB,CAIhB;IAEF,eAAe,CAA2D;IAEhE,cAAc;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9D,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,KAAM,CAAC,CAAC;QAC1E,MAAM,IAAI,GACR,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QAChG,MAAM,IAAI,GAAG,KAAK;YAChB,CAAC,CAAC,KAAK,CAAC,SAAS,KAAK,WAAW;gBAC/B,CAAC,CAAC,mBAAmB;gBACrB,CAAC,CAAC,oBAAoB;YACxB,CAAC,CAAC,mBAAmB,CAAC;QAExB,OAAO,KAAK,IAAI,IAAI,CAAC,UAAU;YAC7B,CAAC,CAAC,IAAI,CAAA;iBACK,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC;mBACnD,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO;;;mBAG7C,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;6BAC5B,IAAI;mBACd,IAAI;;;gBAGP;YACV,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAES,iBAAiB;QACzB,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;QAC/D,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;QAE5C,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,cAAc,EAAE;;KAEtE,CAAC;IACJ,CAAC;IAES,gBAAgB;QACxB,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS;YAC1B,CAAC,CAAC,IAAI,CAAA;;sBAEU,IAAI,CAAC,eAAe;yBACjB,IAAI,CAAC,kBAAkB;iBAC/B;YACX,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;eAEA,OAAO,CAAC;YACb,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,UAAU;YACzB,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,eAAe;SAChD,CAAC;;UAEA,IAAI,CAAC,iBAAiB,EAAE;8BACJ,IAAI,CAAC,cAAc,EAAE;;QAE3C,IAAI,CAAC,gBAAgB,EAAE;KAC1B,CAAC;IACJ,CAAC;;AA7IM;IAFN,OAAO,CAAC,EAAE,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACzD,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;gDACG;AAG3B;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDACQ;AAGhC;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0DACA","sourcesContent":["import { consume } from '@lit/context';\nimport {\n  θaddAdoptedStylesController as addAdoptedStylesController,\n  θaddThemingController as addThemingController,\n  IgcIconComponent,\n} from 'igniteui-webcomponents';\nimport { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { StateController } from '../controllers/state.js';\nimport {\n  MIN_COL_RESIZE_WIDTH,\n  SORT_ICON_ASCENDING,\n  SORT_ICON_DESCENDING,\n} from '../internal/constants.js';\nimport { GRID_STATE_CONTEXT } from '../internal/context.js';\nimport { partMap } from '../internal/part-map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_HEADER_TAG } from '../internal/tags.js';\nimport type { ColumnConfiguration, IgcHeaderContext } from '../internal/types.js';\nimport { styles } from '../styles/header-cell/header-cell.css.js';\nimport { all } from '../styles/themes/grid-header-themes.js';\n\nexport default class IgcGridLiteHeader<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_HEADER_TAG;\n  }\n\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(IgcGridLiteHeader, IgcIconComponent);\n  }\n\n  private readonly _adoptedStylesController = addAdoptedStylesController(this);\n\n  protected get context(): IgcHeaderContext<T> {\n    return {\n      parent: this,\n      column: this.column,\n    };\n  }\n\n  protected get isSortable() {\n    return Boolean(this.column.sortable);\n  }\n\n  protected get resizeController() {\n    return this.state.resizing;\n  }\n\n  @consume({ context: GRID_STATE_CONTEXT, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  @property({ attribute: false })\n  public column!: ColumnConfiguration<T>;\n\n  @property({ attribute: false })\n  public adoptRootStyles = false;\n\n  constructor() {\n    super();\n\n    addThemingController(this, all, {\n      themeChange: this._handleThemeChange,\n    });\n  }\n\n  protected override update(props: PropertyValues<this>): void {\n    if (props.has('adoptRootStyles')) {\n      this._adoptedStylesController.shouldAdoptStyles(\n        this.adoptRootStyles && this.column.headerTemplate != null\n      );\n    }\n\n    super.update(props);\n  }\n\n  private _handleThemeChange() {\n    this._adoptedStylesController.invalidateCache(this.ownerDocument);\n    this._adoptedStylesController.shouldAdoptStyles(\n      this.adoptRootStyles && this.column.headerTemplate != null\n    );\n  }\n\n  #addResizeEventHandlers() {\n    const config: AddEventListenerOptions = { once: true };\n\n    this.addEventListener(\n      'gotpointercapture',\n      () => {\n        this.resizeController.indicatorActive = true;\n      },\n      config\n    );\n    this.addEventListener('lostpointercapture', this.#handlePointerLost, config);\n    this.addEventListener('pointerup', (e) => this.releasePointerCapture(e.pointerId), config);\n    this.addEventListener('pointermove', this.#handleResize);\n  }\n\n  #handleClick(e: Event) {\n    e.stopPropagation();\n    this.state.sorting.sortFromHeaderClick(this.column);\n  }\n\n  #handleResize = ({ clientX }: PointerEvent) => {\n    const { left } = this.getBoundingClientRect();\n    const width = Math.max(clientX - left, MIN_COL_RESIZE_WIDTH);\n    const x = this.offsetLeft + width;\n\n    this.resizeController.resize(this.column, width, x);\n  };\n\n  #handleResizeStart(ev: PointerEvent) {\n    const { target, pointerId } = ev;\n\n    ev.preventDefault();\n\n    this.#addResizeEventHandlers();\n    this.resizeController.start(this);\n\n    (target as HTMLElement).setPointerCapture(pointerId);\n  }\n\n  #handlePointerLost = () => {\n    this.resizeController.indicatorActive = false;\n    this.removeEventListener('pointermove', this.#handleResize);\n    this.resizeController.stop();\n  };\n\n  #handleAutosize = () => this.resizeController.autosize(this.column, this);\n\n  protected renderSortPart() {\n    const state = this.state.sorting.state.get(this.column.field);\n    const idx = Array.from(this.state.sorting.state.values()).indexOf(state!);\n    const attr =\n      this.state.host.sortingOptions.mode === 'multiple' ? (idx > -1 ? idx + 1 : nothing) : nothing;\n    const icon = state\n      ? state.direction === 'ascending'\n        ? SORT_ICON_ASCENDING\n        : SORT_ICON_DESCENDING\n      : SORT_ICON_ASCENDING;\n\n    return state || this.isSortable\n      ? html`<span\n          part=${partMap({ action: true, sorted: !!state?.direction })}\n          @click=${this.isSortable ? this.#handleClick : nothing}\n        >\n          <igc-icon\n            part=${partMap({ 'sorting-action': !!state })}\n            data-sortIndex=${attr}\n            name=${icon}\n            collection=\"internal\"\n          ></igc-icon>\n        </span>`\n      : nothing;\n  }\n\n  protected renderContentPart() {\n    const defaultContent = this.column.header ?? this.column.field;\n    const template = this.column.headerTemplate;\n\n    return html`\n      <span part=\"title\">\n        <span>${template ? template(this.context) : html`${defaultContent}`}</span>\n      </span>\n    `;\n  }\n\n  protected renderResizePart() {\n    return this.column.resizable\n      ? html`<span\n          part=\"resizable\"\n          @dblclick=${this.#handleAutosize}\n          @pointerdown=${this.#handleResizeStart}\n        ></span>`\n      : nothing;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=${partMap({\n          content: true,\n          sortable: this.isSortable,\n          resizing: this.resizeController.indicatorActive,\n        })}\n      >\n        ${this.renderContentPart()}\n        <div part=\"actions\">${this.renderSortPart()}</div>\n      </div>\n      ${this.renderResizePart()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteHeader.tagName]: IgcGridLiteHeader<object>;\n  }\n}\n"]}
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/components/header.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport {\n  θaddAdoptedStylesController as addAdoptedStylesController,\n  θaddThemingController as addThemingController,\n  IgcIconComponent,\n} from 'igniteui-webcomponents';\nimport { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { StateController } from '../controllers/state.js';\nimport { addA11y } from '../internal/a11y.js';\nimport {\n  MIN_COL_RESIZE_WIDTH,\n  SORT_ICON_ASCENDING,\n  SORT_ICON_DESCENDING,\n} from '../internal/constants.js';\nimport { GRID_STATE_CONTEXT } from '../internal/context.js';\nimport { partMap } from '../internal/part-map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_HEADER_TAG } from '../internal/tags.js';\nimport type { ColumnConfiguration, IgcHeaderContext } from '../internal/types.js';\nimport { styles } from '../styles/header-cell/header-cell.css.js';\nimport { all } from '../styles/themes/grid-header-themes.js';\n\nexport default class IgcGridLiteHeader<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_HEADER_TAG;\n  }\n\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(IgcGridLiteHeader, IgcIconComponent);\n  }\n\n  private readonly _adoptedStylesController = addAdoptedStylesController(this);\n  private readonly _a11y = addA11y(this, 'columnheader');\n\n  protected get context(): IgcHeaderContext<T> {\n    return {\n      parent: this,\n      column: this.column,\n    };\n  }\n\n  protected get isSortable() {\n    return Boolean(this.column.sortable);\n  }\n\n  protected get resizeController() {\n    return this.state.resizing;\n  }\n\n  @consume({ context: GRID_STATE_CONTEXT, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  @property({ attribute: false })\n  public column!: ColumnConfiguration<T>;\n\n  @property({ attribute: false })\n  public adoptRootStyles = false;\n\n  /**\n   * Position of the header among the visible columns. Written as its 1-based\n   * `aria-colindex`.\n   *\n   * @internal\n   */\n  @property({ attribute: false })\n  public _colIndex = -1;\n\n  constructor() {\n    super();\n\n    addThemingController(this, all, {\n      themeChange: this._handleThemeChange,\n    });\n  }\n\n  private get _shouldAdoptStyles(): boolean {\n    return this.adoptRootStyles && this.column.headerTemplate != null;\n  }\n\n  protected override update(props: PropertyValues<this>): void {\n    if (props.has('adoptRootStyles') || props.has('column')) {\n      this._adoptedStylesController.shouldAdoptStyles(this._shouldAdoptStyles);\n    }\n\n    // Sort state reaches the header as a context ping, not a property change, so\n    // the ARIA state is resolved on each update instead of dirty-checked.\n    this._a11y.set({ ariaColIndex: `${this._colIndex}`, ariaSort: this.#ariaSort() });\n\n    super.update(props);\n  }\n\n  /** `aria-sort` applies only to a sortable header. */\n  #ariaSort(): string | null {\n    if (!this.isSortable) {\n      return null;\n    }\n\n    return this.state.sorting.state.get(this.column.field)?.direction ?? 'none';\n  }\n\n  private _handleThemeChange() {\n    this._adoptedStylesController.invalidateCache(this.ownerDocument);\n    this._adoptedStylesController.shouldAdoptStyles(this._shouldAdoptStyles);\n  }\n\n  #addResizeEventHandlers() {\n    const config: AddEventListenerOptions = { once: true };\n\n    this.addEventListener(\n      'gotpointercapture',\n      () => {\n        this.resizeController.indicatorActive = true;\n      },\n      config\n    );\n    this.addEventListener('lostpointercapture', this.#handlePointerLost, config);\n    this.addEventListener('pointerup', (e) => this.releasePointerCapture(e.pointerId), config);\n    this.addEventListener('pointermove', this.#handleResize);\n  }\n\n  #handleClick(e: Event) {\n    e.stopPropagation();\n    this.state.sorting.sortFromHeaderClick(this.column);\n  }\n\n  #handleResize = ({ clientX }: PointerEvent) => {\n    const { left } = this.getBoundingClientRect();\n    const width = Math.max(clientX - left, MIN_COL_RESIZE_WIDTH);\n    const x = this.offsetLeft + width;\n\n    this.resizeController.resize(this.column, width, x);\n  };\n\n  #handleResizeStart(ev: PointerEvent) {\n    const { target, pointerId } = ev;\n\n    ev.preventDefault();\n\n    this.#addResizeEventHandlers();\n    this.resizeController.start(this);\n\n    (target as HTMLElement).setPointerCapture(pointerId);\n  }\n\n  #handlePointerLost = () => {\n    this.resizeController.indicatorActive = false;\n    this.removeEventListener('pointermove', this.#handleResize);\n    this.resizeController.stop();\n  };\n\n  #handleAutosize = () => this.resizeController.autosize(this.column, this);\n\n  protected renderSortPart() {\n    const state = this.state.sorting.state.get(this.column.field);\n\n    if (!(state || this.isSortable)) {\n      return nothing;\n    }\n\n    // The 1-based position of the column in the multi-sort order.\n    const position = Array.from(this.state.sorting.state.keys()).indexOf(this.column.field);\n    const multiple = this.state.host.sortingOptions.mode === 'multiple';\n    const icon = state?.direction === 'descending' ? SORT_ICON_DESCENDING : SORT_ICON_ASCENDING;\n\n    return html`<span\n      part=${partMap({ action: true, sorted: !!state?.direction })}\n      @click=${this.isSortable ? this.#handleClick : nothing}\n    >\n      <igc-icon\n        part=${partMap({ 'sorting-action': !!state })}\n        data-sortIndex=${multiple && position > -1 ? position + 1 : nothing}\n        name=${icon}\n        collection=\"internal\"\n      ></igc-icon>\n    </span>`;\n  }\n\n  protected renderContentPart() {\n    const defaultContent = this.column.header ?? this.column.field;\n    const template = this.column.headerTemplate;\n\n    return html`\n      <span part=\"title\">\n        <span>${template ? template(this.context) : html`${defaultContent}`}</span>\n      </span>\n    `;\n  }\n\n  protected renderResizePart() {\n    return this.column.resizable\n      ? html`<span\n          part=\"resizable\"\n          @dblclick=${this.#handleAutosize}\n          @pointerdown=${this.#handleResizeStart}\n        ></span>`\n      : nothing;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=${partMap({\n          content: true,\n          sortable: this.isSortable,\n          resizing: this.resizeController.indicatorActive,\n        })}\n      >\n        ${this.renderContentPart()}\n        <div part=\"actions\">${this.renderSortPart()}</div>\n      </div>\n      ${this.renderResizePart()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteHeader.tagName]: IgcGridLiteHeader<object>;\n  }\n}\n"]}

package/components/row.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 import type { ActiveNode, ColumnConfiguration } from '../internal/types.js';
 import IgcGridLiteCell from './cell.js';
 /**
@@ -8,12 +8,15 @@ export default class IgcGridLiteRow<T extends object> extends LitElement {
     static get tagName(): "igc-grid-lite-row";
     static styles: import("lit").CSSResult;
     static register(): void;
+    private readonly _a11y;
     adoptRootStyles: boolean;
     data?: T;
     columns: Array<ColumnConfiguration<T>>;
     activeNode?: ActiveNode<T>;
     index: number;
     get cells(): IgcGridLiteCell<T>[];
+    protected update(props: PropertyValues<this>): void;
+    protected updated(): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/row.js

@@ -7,14 +7,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { addA11y, headerRowsFor } from '../internal/a11y.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_ROW_TAG } from '../internal/tags.js';
 import { resolveFieldValue } from '../internal/utils.js';
 import { styles } from '../styles/body-row/body-row.css.js';
 import IgcGridLiteCell from './cell.js';
+const ACTIVE_ROW_Z_INDEX = '3';
 export default class IgcGridLiteRow extends LitElement {
     constructor() {
         super(...arguments);
+        this._a11y = addA11y(this, 'row');
         this.adoptRootStyles = false;
         this.columns = [];
         this.index = -1;
@@ -29,14 +32,22 @@ export default class IgcGridLiteRow extends LitElement {
     get cells() {
         return Array.from(this.renderRoot.querySelectorAll(IgcGridLiteCell.tagName));
     }
+    update(props) {
+        this._a11y.set({ ariaRowIndex: `${this.index + headerRowsFor(this.columns) + 1}` });
+        super.update(props);
+    }
+    updated() {
+        this.style.zIndex = this.activeNode?.row === this.index ? ACTIVE_ROW_Z_INDEX : '';
+    }
     render() {
         const { column: key, row: index } = this.activeNode ?? {};
         const data = this.data ?? {};
         const columns = this.columns.filter((column) => !column.hidden);
         return html `
-      ${repeat(columns, (column) => column, (column) => html `
+      ${repeat(columns, (column) => column.field, (column, colIndex) => html `
           <igc-grid-lite-cell
             part="cell"
+            ._colIndex=${colIndex + 1}
             .adoptRootStyles=${this.adoptRootStyles}
             .active=${key === column.field && index === this.index}
             .column=${column}

package/components/row.js.map

@@ -1 +1 @@
-{"version":3,"file":"row.js","sourceRoot":"","sources":["../../src/components/row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,eAAe,MAAM,WAAW,CAAC;AAKxC,MAAM,CAAC,OAAO,OAAO,cAAiC,SAAQ,UAAU;IAAxE;;QAWS,oBAAe,GAAG,KAAK,CAAC;QAMxB,YAAO,GAAkC,EAAE,CAAC;QAM5C,UAAK,GAAG,CAAC,CAAC,CAAC;IAiCpB,CAAC;IAvDQ,MAAM,KAAK,OAAO;QACvB,OAAO,YAAY,CAAC;IACtB,CAAC;aACsB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEhC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;IACrD,CAAC;IAiBD,IAAW,KAAK;QACd,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAqB,eAAe,CAAC,OAAO,CAAC,CAC9E,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC;QAC1D,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAK,EAAQ,CAAC;QAEpC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAEhE,OAAO,IAAI,CAAA;QACP,MAAM,CACN,OAAO,EACP,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,EAClB,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAA;;;+BAGO,IAAI,CAAC,eAAe;sBAC7B,GAAG,KAAK,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK;sBAC5C,MAAM;4BACA,MAAM,CAAC,YAAY;mBAC5B,IAAyB;wBACpB,IAAI,CAAC,KAAK;qBACb,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC;;SAEjD,CACF;KACF,CAAC;IACJ,CAAC;;AA5CM;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;uDACA;AAGxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CACf;AAGT;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CACoB;AAG5C;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kDACG;AAG3B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAC3B","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_ROW_TAG } from '../internal/tags.js';\nimport type { ActiveNode, ColumnConfiguration } from '../internal/types.js';\nimport { resolveFieldValue } from '../internal/utils.js';\nimport { styles } from '../styles/body-row/body-row.css.js';\nimport IgcGridLiteCell from './cell.js';\n\n/**\n * Component representing the DOM row in the IgcGridLite.\n */\nexport default class IgcGridLiteRow<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_ROW_TAG;\n  }\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(IgcGridLiteRow, IgcGridLiteCell);\n  }\n\n  @property({ attribute: false })\n  public adoptRootStyles = false;\n\n  @property({ attribute: false })\n  public data?: T;\n\n  @property({ attribute: false })\n  public columns: Array<ColumnConfiguration<T>> = [];\n\n  @property({ attribute: false })\n  public activeNode?: ActiveNode<T>;\n\n  @property({ type: Number, attribute: false })\n  public index = -1;\n\n  public get cells(): IgcGridLiteCell<T>[] {\n    return Array.from(\n      this.renderRoot.querySelectorAll<IgcGridLiteCell<T>>(IgcGridLiteCell.tagName)\n    );\n  }\n\n  protected override render() {\n    const { column: key, row: index } = this.activeNode ?? {};\n    const data = this.data ?? ({} as T);\n\n    const columns = this.columns.filter((column) => !column.hidden);\n\n    return html`\n      ${repeat(\n        columns,\n        (column) => column,\n        (column) => html`\n          <igc-grid-lite-cell\n            part=\"cell\"\n            .adoptRootStyles=${this.adoptRootStyles}\n            .active=${key === column.field && index === this.index}\n            .column=${column}\n            .cellTemplate=${column.cellTemplate}\n            .row=${this as IgcGridLiteRow<T>}\n            .rowIndex=${this.index}\n            .value=${resolveFieldValue(data, column.field)}\n          ></igc-grid-lite-cell>\n        `\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteRow.tagName]: IgcGridLiteRow<object>;\n  }\n}\n"]}
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../src/components/row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,eAAe,MAAM,WAAW,CAAC;AAExC,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAK/B,MAAM,CAAC,OAAO,OAAO,cAAiC,SAAQ,UAAU;IAAxE;;QAUmB,UAAK,GAAG,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAGvC,oBAAe,GAAG,KAAK,CAAC;QAMxB,YAAO,GAAkC,EAAE,CAAC;QAM5C,UAAK,GAAG,CAAC,CAAC,CAAC;IA+CpB,CAAC;IAvEQ,MAAM,KAAK,OAAO;QACvB,OAAO,YAAY,CAAC;IACtB,CAAC;aACsB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEhC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;IACrD,CAAC;IAmBD,IAAW,KAAK;QACd,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAqB,eAAe,CAAC,OAAO,CAAC,CAC9E,CAAC;IACJ,CAAC;IAEkB,MAAM,CAAC,KAA2B;QAEnD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC;QAEpF,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAEkB,OAAO;QAGxB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpF,CAAC;IAEkB,MAAM;QACvB,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC;QAC1D,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAK,EAAQ,CAAC;QAEpC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAEhE,OAAO,IAAI,CAAA;QACP,MAAM,CACN,OAAO,EACP,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EACxB,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAA;;;yBAGT,QAAQ,GAAG,CAAC;+BACN,IAAI,CAAC,eAAe;sBAC7B,GAAG,KAAK,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK;sBAC5C,MAAM;4BACA,MAAM,CAAC,YAAY;mBAC5B,IAAyB;wBACpB,IAAI,CAAC,KAAK;qBACb,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC;;SAEjD,CACF;KACF,CAAC;IACJ,CAAC;;AA1DM;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;uDACA;AAGxB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CACf;AAGT;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CACoB;AAG5C;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kDACG;AAG3B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAC3B","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { addA11y, headerRowsFor } from '../internal/a11y.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_ROW_TAG } from '../internal/tags.js';\nimport type { ActiveNode, ColumnConfiguration } from '../internal/types.js';\nimport { resolveFieldValue } from '../internal/utils.js';\nimport { styles } from '../styles/body-row/body-row.css.js';\nimport IgcGridLiteCell from './cell.js';\n\nconst ACTIVE_ROW_Z_INDEX = '3';\n\n/**\n * Component representing the DOM row in the IgcGridLite.\n */\nexport default class IgcGridLiteRow<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_ROW_TAG;\n  }\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(IgcGridLiteRow, IgcGridLiteCell);\n  }\n\n  private readonly _a11y = addA11y(this, 'row');\n\n  @property({ attribute: false })\n  public adoptRootStyles = false;\n\n  @property({ attribute: false })\n  public data?: T;\n\n  @property({ attribute: false })\n  public columns: Array<ColumnConfiguration<T>> = [];\n\n  @property({ attribute: false })\n  public activeNode?: ActiveNode<T>;\n\n  @property({ type: Number, attribute: false })\n  public index = -1;\n\n  public get cells(): IgcGridLiteCell<T>[] {\n    return Array.from(\n      this.renderRoot.querySelectorAll<IgcGridLiteCell<T>>(IgcGridLiteCell.tagName)\n    );\n  }\n\n  protected override update(props: PropertyValues<this>): void {\n    // Data rows come after the header rows in the 1-based row index space.\n    this._a11y.set({ ariaRowIndex: `${this.index + headerRowsFor(this.columns) + 1}` });\n\n    super.update(props);\n  }\n\n  protected override updated(): void {\n    // The active row paints above its neighbors so that the focus outline is not\n    // clipped. Set after commit: the first render writes the full style attribute.\n    this.style.zIndex = this.activeNode?.row === this.index ? ACTIVE_ROW_Z_INDEX : '';\n  }\n\n  protected override render() {\n    const { column: key, row: index } = this.activeNode ?? {};\n    const data = this.data ?? ({} as T);\n\n    const columns = this.columns.filter((column) => !column.hidden);\n\n    return html`\n      ${repeat(\n        columns,\n        (column) => column.field,\n        (column, colIndex) => html`\n          <igc-grid-lite-cell\n            part=\"cell\"\n            ._colIndex=${colIndex + 1}\n            .adoptRootStyles=${this.adoptRootStyles}\n            .active=${key === column.field && index === this.index}\n            .column=${column}\n            .cellTemplate=${column.cellTemplate}\n            .row=${this as IgcGridLiteRow<T>}\n            .rowIndex=${this.index}\n            .value=${resolveFieldValue(data, column.field)}\n          ></igc-grid-lite-cell>\n        `\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcGridLiteRow.tagName]: IgcGridLiteRow<object>;\n  }\n}\n"]}

package/components/virtualizer.d.ts

@@ -1,9 +1,11 @@
 import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';
 export default class IgcVirtualizer extends LitVirtualizer {
-    static get tagName(): "igc-virtualizer";
+    #private;
+    static get tagName(): "igc-grid-lite-virtualizer";
     layout: LitVirtualizer['layout'];
     static register(): void;
     scroller: boolean;
+    constructor();
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/virtualizer.js

@@ -1,20 +1,49 @@
 import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';
+import { addA11y } from '../internal/a11y.js';
+import { FOCUS_WITHIN } from '../internal/constants.js';
 import { registerComponent } from '../internal/register.js';
-import { GRID_BODY } from '../internal/tags.js';
+import { GRID_VIRTUALIZER_TAG } from '../internal/tags.js';
 import { IgcFlowLayout } from '../internal/virt-flow-layout.js';
+const RANGE_CHANGED = 'rangeChanged';
 export default class IgcVirtualizer extends LitVirtualizer {
+    static get tagName() {
+        return GRID_VIRTUALIZER_TAG;
+    }
+    static register() {
+        registerComponent(IgcVirtualizer);
+    }
+    #ownsFocus;
     constructor() {
-        super(...arguments);
+        super();
         this.layout = {
             type: IgcFlowLayout,
         };
         this.scroller = true;
+        this.#ownsFocus = false;
+        this.#handleFocusOut = (event) => {
+            const { relatedTarget } = event;
+            if (relatedTarget instanceof Node) {
+                this.#ownsFocus = this.contains(relatedTarget);
+                return;
+            }
+            const [origin] = event.composedPath();
+            queueMicrotask(() => {
+                this.#ownsFocus = !origin.isConnected;
+                this.#reclaimFocus();
+            });
+        };
+        addA11y(this, 'rowgroup');
+        this.addEventListener('focusin', () => {
+            this.#ownsFocus = true;
+        });
+        this.addEventListener('focusout', this.#handleFocusOut);
+        this.addEventListener(RANGE_CHANGED, () => this.#reclaimFocus());
     }
-    static get tagName() {
-        return GRID_BODY;
-    }
-    static register() {
-        registerComponent(IgcVirtualizer);
+    #handleFocusOut;
+    #reclaimFocus() {
+        if (this.#ownsFocus && !this.matches(FOCUS_WITHIN)) {
+            this.focus({ preventScroll: true });
+        }
     }
 }
 //# sourceMappingURL=virtualizer.js.map

package/components/virtualizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"virtualizer.js","sourceRoot":"","sources":["../../src/components/virtualizer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAEhE,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,cAAc;IAA1D;;QAKkB,WAAM,GAA6B;YACjD,IAAI,EAAE,aAAa;SACpB,CAAC;QAMc,aAAQ,GAAG,IAAI,CAAC;IAClC,CAAC;IAbQ,MAAM,KAAK,OAAO;QACvB,OAAO,SAAS,CAAC;IACnB,CAAC;IAMM,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACpC,CAAC;CAGF","sourcesContent":["import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_BODY } from '../internal/tags.js';\nimport { IgcFlowLayout } from '../internal/virt-flow-layout.js';\n\nexport default class IgcVirtualizer extends LitVirtualizer {\n  public static get tagName() {\n    return GRID_BODY;\n  }\n\n  public override layout: LitVirtualizer['layout'] = {\n    type: IgcFlowLayout,\n  };\n\n  public static register(): void {\n    registerComponent(IgcVirtualizer);\n  }\n\n  public override scroller = true;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcVirtualizer.tagName]: IgcVirtualizer;\n  }\n}\n"]}
+{"version":3,"file":"virtualizer.js","sourceRoot":"","sources":["../../src/components/virtualizer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAEhE,MAAM,aAAa,GAAG,cAAc,CAAC;AAErC,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,cAAc;IACjD,MAAM,KAAK,OAAO;QACvB,OAAO,oBAAoB,CAAC;IAC9B,CAAC;IAMM,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACpC,CAAC;IAKD,UAAU,CAAS;IAEnB;QACE,KAAK,EAAE,CAAC;QAdM,WAAM,GAA6B;YACjD,IAAI,EAAE,aAAa;SACpB,CAAC;QAMc,aAAQ,GAAG,IAAI,CAAC;QAGhC,eAAU,GAAG,KAAK,CAAC;QAkBnB,oBAAe,GAAG,CAAC,KAAiB,EAAQ,EAAE;YAC5C,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;YAEhC,IAAI,aAAa,YAAY,IAAI,EAAE,CAAC;gBAClC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;gBAC/C,OAAO;YACT,CAAC;YAKD,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;YAEtC,cAAc,CAAC,GAAG,EAAE;gBAClB,IAAI,CAAC,UAAU,GAAG,CAAE,MAAe,CAAC,WAAW,CAAC;gBAChD,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QA1BA,OAAO,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAE1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE;YACpC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACxD,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IACnE,CAAC;IAED,eAAe,CAiBb;IAMF,aAAa;QACX,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;YACnD,IAAI,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;CACF","sourcesContent":["import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';\nimport { addA11y } from '../internal/a11y.js';\nimport { FOCUS_WITHIN } from '../internal/constants.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_VIRTUALIZER_TAG } from '../internal/tags.js';\nimport { IgcFlowLayout } from '../internal/virt-flow-layout.js';\n\nconst RANGE_CHANGED = 'rangeChanged';\n\nexport default class IgcVirtualizer extends LitVirtualizer {\n  public static get tagName() {\n    return GRID_VIRTUALIZER_TAG;\n  }\n\n  public override layout: LitVirtualizer['layout'] = {\n    type: IgcFlowLayout,\n  };\n\n  public static register(): void {\n    registerComponent(IgcVirtualizer);\n  }\n\n  public override scroller = true;\n\n  /** True while DOM focus is inside the data area. */\n  #ownsFocus = false;\n\n  constructor() {\n    super();\n\n    // The data area is the tab stop of the grid. Navigation moves DOM focus onto\n    // the active cell (roving focus). `aria-activedescendant` is not an option:\n    // the cell is in a row shadow root and IDREF lookups do not cross shadow\n    // boundaries.\n    addA11y(this, 'rowgroup');\n\n    this.addEventListener('focusin', () => {\n      this.#ownsFocus = true;\n    });\n    this.addEventListener('focusout', this.#handleFocusOut);\n    this.addEventListener(RANGE_CHANGED, () => this.#reclaimFocus());\n  }\n\n  #handleFocusOut = (event: FocusEvent): void => {\n    const { relatedTarget } = event;\n\n    if (relatedTarget instanceof Node) {\n      this.#ownsFocus = this.contains(relatedTarget);\n      return;\n    }\n\n    // No element gained focus. Either the user focused empty space, or\n    // virtualization removes the focused cell. The event fires while the cell is\n    // still connected, so the two cases become distinct one microtask later.\n    const [origin] = event.composedPath();\n\n    queueMicrotask(() => {\n      this.#ownsFocus = !(origin as Node).isConnected;\n      this.#reclaimFocus();\n    });\n  };\n\n  /**\n   * A long scroll removes the focused cell and focus falls back to the document\n   * body. Take the focus back so that keyboard navigation continues to work.\n   */\n  #reclaimFocus(): void {\n    if (this.#ownsFocus && !this.matches(FOCUS_WITHIN)) {\n      this.focus({ preventScroll: true });\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [IgcVirtualizer.tagName]: IgcVirtualizer;\n  }\n}\n"]}

package/controllers/data-operation.d.ts

@@ -9,10 +9,6 @@ declare class DataOperationsController<T extends object> implements ReactiveCont
     protected filtering: FilterDataOperation<T>;
     constructor(host: GridHost<T>);
     hostConnected(): void;
-    protected get hasCustomSort(): boolean;
-    protected get hasCustomFilter(): boolean;
-    protected get customFilter(): import("../index.js").DataPipelineHook<T>;
-    protected get customSort(): import("../index.js").DataPipelineHook<T>;
     apply(data: T[], state: StateController<T>): Promise<T[]>;
 }
 declare function createDataOperationsController<T extends object>(host: GridHost<T>): DataOperationsController<T>;

package/controllers/data-operation.js

@@ -1,4 +1,3 @@
-import { isDefined } from '../internal/is-defined.js';
 import FilterDataOperation from '../operations/filter.js';
 import SortDataOperation from '../operations/sort.js';
 class DataOperationsController {
@@ -9,28 +8,14 @@ class DataOperationsController {
         this.host.addController(this);
     }
     hostConnected() { }
-    get hasCustomSort() {
-        return isDefined(this.host.dataPipelineConfiguration?.sort);
-    }
-    get hasCustomFilter() {
-        return isDefined(this.host.dataPipelineConfiguration?.filter);
-    }
-    get customFilter() {
-        return this.host.dataPipelineConfiguration.filter;
-    }
-    get customSort() {
-        return this.host.dataPipelineConfiguration.sort;
-    }
     async apply(data, state) {
-        const { filtering, sorting } = state;
-        let transformed;
-        transformed = this.hasCustomFilter
-            ? await this.customFilter({ data, grid: this.host, type: 'filter' })
-            : this.filtering.apply(data, filtering.state);
-        transformed = this.hasCustomSort
-            ? await this.customSort({ data: transformed, grid: this.host, type: 'sort' })
-            : this.sorting.apply(transformed, sorting.state);
-        return transformed;
+        const { filter, sort } = this.host.dataPipelineConfiguration ?? {};
+        const filtered = filter
+            ? await filter({ data, grid: this.host, type: 'filter' })
+            : this.filtering.apply(data, state.filtering.state);
+        return sort
+            ? await sort({ data: filtered, grid: this.host, type: 'sort' })
+            : this.sorting.apply(filtered, state.sorting.state);
     }
 }
 function createDataOperationsController(host) {

package/controllers/data-operation.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-operation.js","sourceRoot":"","sources":["../../src/controllers/data-operation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,mBAAmB,MAAM,yBAAyB,CAAC;AAC1D,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AAGtD,MAAM,wBAAwB;IAI5B,YAAsB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QAH7B,YAAO,GAAG,IAAI,iBAAiB,EAAK,CAAC;QACrC,cAAS,GAAG,IAAI,mBAAmB,EAAK,CAAC;QAGjD,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEM,aAAa,KAAI,CAAC;IAEzB,IAAc,aAAa;QACzB,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,CAAC,CAAC;IAC9D,CAAC;IAED,IAAc,eAAe;QAC3B,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC;IAChE,CAAC;IAED,IAAc,YAAY;QACxB,OAAO,IAAI,CAAC,IAAI,CAAC,yBAA0B,CAAC,MAAO,CAAC;IACtD,CAAC;IAED,IAAc,UAAU;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,yBAA0B,CAAC,IAAK,CAAC;IACpD,CAAC;IAEM,KAAK,CAAC,KAAK,CAAC,IAAS,EAAE,KAAyB;QACrD,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;QACrC,IAAI,WAAgB,CAAC;QAErB,WAAW,GAAG,IAAI,CAAC,eAAe;YAChC,CAAC,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;YACpE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;QAEhD,WAAW,GAAG,IAAI,CAAC,aAAa;YAC9B,CAAC,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;YAC7E,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QAEnD,OAAO,WAAW,CAAC;IACrB,CAAC;CACF;AAED,SAAS,8BAA8B,CACrC,IAAiB;IAEjB,OAAO,IAAI,wBAAwB,CAAI,IAAI,CAAC,CAAC;AAC/C,CAAC;AAGD,OAAO,EAAE,8BAA8B,EAAE,CAAC","sourcesContent":["import type { ReactiveController } from 'lit';\nimport { isDefined } from '../internal/is-defined.js';\nimport type { GridHost } from '../internal/types.js';\nimport FilterDataOperation from '../operations/filter.js';\nimport SortDataOperation from '../operations/sort.js';\nimport type { StateController } from './state.js';\n\nclass DataOperationsController<T extends object> implements ReactiveController {\n  protected sorting = new SortDataOperation<T>();\n  protected filtering = new FilterDataOperation<T>();\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public hostConnected() {}\n\n  protected get hasCustomSort() {\n    return isDefined(this.host.dataPipelineConfiguration?.sort);\n  }\n\n  protected get hasCustomFilter() {\n    return isDefined(this.host.dataPipelineConfiguration?.filter);\n  }\n\n  protected get customFilter() {\n    return this.host.dataPipelineConfiguration!.filter!;\n  }\n\n  protected get customSort() {\n    return this.host.dataPipelineConfiguration!.sort!;\n  }\n\n  public async apply(data: T[], state: StateController<T>) {\n    const { filtering, sorting } = state;\n    let transformed: T[];\n\n    transformed = this.hasCustomFilter\n      ? await this.customFilter({ data, grid: this.host, type: 'filter' })\n      : this.filtering.apply(data, filtering.state);\n\n    transformed = this.hasCustomSort\n      ? await this.customSort({ data: transformed, grid: this.host, type: 'sort' })\n      : this.sorting.apply(transformed, sorting.state);\n\n    return transformed;\n  }\n}\n\nfunction createDataOperationsController<T extends object>(\n  host: GridHost<T>\n): DataOperationsController<T> {\n  return new DataOperationsController<T>(host);\n}\n\nexport type { DataOperationsController };\nexport { createDataOperationsController };\n"]}
+{"version":3,"file":"data-operation.js","sourceRoot":"","sources":["../../src/controllers/data-operation.ts"],"names":[],"mappings":"AAEA,OAAO,mBAAmB,MAAM,yBAAyB,CAAC;AAC1D,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AAGtD,MAAM,wBAAwB;IAI5B,YAAsB,IAAiB;QAAjB,SAAI,GAAJ,IAAI,CAAa;QAH7B,YAAO,GAAG,IAAI,iBAAiB,EAAK,CAAC;QACrC,cAAS,GAAG,IAAI,mBAAmB,EAAK,CAAC;QAGjD,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEM,aAAa,KAAI,CAAC;IAElB,KAAK,CAAC,KAAK,CAAC,IAAS,EAAE,KAAyB;QAErD,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,yBAAyB,IAAI,EAAE,CAAC;QAEnE,MAAM,QAAQ,GAAG,MAAM;YACrB,CAAC,CAAC,MAAM,MAAM,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;YACzD,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAEtD,OAAO,IAAI;YACT,CAAC,CAAC,MAAM,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;YAC/D,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACxD,CAAC;CACF;AAED,SAAS,8BAA8B,CACrC,IAAiB;IAEjB,OAAO,IAAI,wBAAwB,CAAI,IAAI,CAAC,CAAC;AAC/C,CAAC;AAGD,OAAO,EAAE,8BAA8B,EAAE,CAAC","sourcesContent":["import type { ReactiveController } from 'lit';\nimport type { GridHost } from '../internal/types.js';\nimport FilterDataOperation from '../operations/filter.js';\nimport SortDataOperation from '../operations/sort.js';\nimport type { StateController } from './state.js';\n\nclass DataOperationsController<T extends object> implements ReactiveController {\n  protected sorting = new SortDataOperation<T>();\n  protected filtering = new FilterDataOperation<T>();\n\n  constructor(protected host: GridHost<T>) {\n    this.host.addController(this);\n  }\n\n  public hostConnected() {}\n\n  public async apply(data: T[], state: StateController<T>) {\n    // A hook, when configured, replaces the built-in operation.\n    const { filter, sort } = this.host.dataPipelineConfiguration ?? {};\n\n    const filtered = filter\n      ? await filter({ data, grid: this.host, type: 'filter' })\n      : this.filtering.apply(data, state.filtering.state);\n\n    return sort\n      ? await sort({ data: filtered, grid: this.host, type: 'sort' })\n      : this.sorting.apply(filtered, state.sorting.state);\n  }\n}\n\nfunction createDataOperationsController<T extends object>(\n  host: GridHost<T>\n): DataOperationsController<T> {\n  return new DataOperationsController<T>(host);\n}\n\nexport type { DataOperationsController };\nexport { createDataOperationsController };\n"]}

package/controllers/dom.d.ts

@@ -1,18 +1,37 @@
 import type { ReactiveController } from 'lit';
 import type { StyleInfo } from 'lit/directives/style-map.js';
-import type { GridHost } from '../internal/types.js';
-import type { StateController } from './state.js';
+import type IgcFilterRow from '../components/filter-row.js';
+import type IgcGridLiteHeaderRow from '../components/header-row.js';
+import type IgcGridLiteRow from '../components/row.js';
+import type IgcVirtualizer from '../components/virtualizer.js';
+import type { ColumnConfiguration, GridHost } from '../internal/types.js';
+/**
+ * Owns the DOM concerns of the grid: element queries into the render root, the
+ * derived column track sizes, and the scrollbar offset measurement.
+ */
 declare class GridDOMController<T extends object> implements ReactiveController {
+    #private;
     protected readonly _host: GridHost<T>;
-    protected readonly _state: StateController<T>;
-    constructor(host: GridHost<T>, state: StateController<T>);
+    constructor(host: GridHost<T>);
     columnSizes: StyleInfo;
+    /** Returns the header row element of the grid. */
+    get headerRow(): IgcGridLiteHeaderRow<T> | null;
+    /** Returns the filter row element of the grid. */
+    get filterRow(): IgcFilterRow<T> | null;
+    /** Returns the data row elements of the grid. */
+    get rows(): IgcGridLiteRow<T>[];
+    /** Returns the virtualizer element of the grid. */
+    get virtualizer(): IgcVirtualizer | null;
     hostConnected(): void;
-    hostUpdate(): void;
-    setScrollOffset(): void;
-    protected setGridColumnSizes(): void;
-    getActiveRowStyles(index: number): StyleInfo;
+    hostDisconnected(): void;
+    /** Scrolls the data area back to the top. */
+    resetScrollPosition(): void;
+    /**
+     * Re-derives the column track sizes. Column configurations are immutable: an
+     * unchanged array identity means the current sizes are still correct.
+     */
+    setColumns(columns: ColumnConfiguration<T>[]): void;
 }
-declare function createDomController<T extends object>(host: GridHost<T>, state: StateController<T>): GridDOMController<T>;
+declare function createDomController<T extends object>(host: GridHost<T>): GridDOMController<T>;
 export type { GridDOMController };
 export { createDomController };

package/controllers/dom.js

@@ -1,40 +1,90 @@
 import { registerGridIcons } from '../internal/icon-registry.js';
+import { GRID_FILTER_ROW_TAG, GRID_HEADER_ROW_TAG, GRID_ROW_TAG, GRID_VIRTUALIZER_TAG, } from '../internal/tags.js';
 import { applyColumnWidths } from '../internal/utils.js';
+const SCROLLBAR_OFFSET_VAR = '--scrollbar-offset';
+const VISIBILITY_CHANGED = 'visibilityChanged';
 class GridDOMController {
-    constructor(host, state) {
+    #observed;
+    #resizeObserver;
+    #scrollOffset;
+    #pendingFrame;
+    #columns;
+    #onScrollbarChange;
+    constructor(host) {
+        this.#scrollOffset = -1;
+        this.#onScrollbarChange = () => {
+            if (this.#pendingFrame !== undefined) {
+                return;
+            }
+            this.#pendingFrame = requestAnimationFrame(() => {
+                this.#pendingFrame = undefined;
+                this.#applyScrollOffset();
+            });
+        };
         this.columnSizes = {};
         this._host = host;
-        this._state = state;
         this._host.addController(this);
     }
+    get headerRow() {
+        return this._host.renderRoot.querySelector(GRID_HEADER_ROW_TAG);
+    }
+    get filterRow() {
+        return this._host.renderRoot.querySelector(GRID_FILTER_ROW_TAG);
+    }
+    get rows() {
+        return Array.from(this._host.renderRoot.querySelectorAll(GRID_ROW_TAG));
+    }
+    get virtualizer() {
+        return this._host.renderRoot.querySelector(GRID_VIRTUALIZER_TAG);
+    }
     hostConnected() {
         registerGridIcons();
-        this.setGridColumnSizes();
         this._host.updateComplete.then(() => {
-            this._state.virtualizer?.addEventListener('visibilityChanged', () => {
-                this.setScrollOffset();
-            }, { once: true });
+            this.#observeVirtualizer();
         });
     }
-    hostUpdate() {
-        this.setScrollOffset();
-        this.setGridColumnSizes();
+    hostDisconnected() {
+        if (this.#pendingFrame !== undefined) {
+            cancelAnimationFrame(this.#pendingFrame);
+            this.#pendingFrame = undefined;
+        }
+        this.#resizeObserver?.disconnect();
+        this.#resizeObserver = undefined;
+        this.#observed?.removeEventListener(VISIBILITY_CHANGED, this.#onScrollbarChange);
+        this.#observed = undefined;
+    }
+    #observeVirtualizer() {
+        const virtualizer = this.virtualizer;
+        if (!virtualizer || virtualizer === this.#observed) {
+            return;
+        }
+        this.#observed = virtualizer;
+        virtualizer.addEventListener(VISIBILITY_CHANGED, this.#onScrollbarChange);
+        this.#resizeObserver = new ResizeObserver(this.#onScrollbarChange);
+        this.#resizeObserver.observe(virtualizer);
     }
-    setScrollOffset() {
-        const size = this._state.virtualizer
-            ? this._state.virtualizer.offsetWidth - this._state.virtualizer.clientWidth
-            : 0;
-        this._host.style.setProperty('--scrollbar-offset', `${size}px`);
+    #applyScrollOffset() {
+        const virtualizer = this.#observed;
+        const offset = virtualizer ? virtualizer.offsetWidth - virtualizer.clientWidth : 0;
+        if (offset === this.#scrollOffset) {
+            return;
+        }
+        this.#scrollOffset = offset;
+        this._host.style.setProperty(SCROLLBAR_OFFSET_VAR, `${offset}px`);
     }
-    setGridColumnSizes() {
-        this.columnSizes = applyColumnWidths(this._state.columns);
+    resetScrollPosition() {
+        this.virtualizer?.scrollTo({ top: 0 });
     }
-    getActiveRowStyles(index) {
-        return this._state.active.row === index ? { 'z-index': '3' } : {};
+    setColumns(columns) {
+        if (columns === this.#columns) {
+            return;
+        }
+        this.#columns = columns;
+        this.columnSizes = applyColumnWidths(columns);
     }
 }
-function createDomController(host, state) {
-    return new GridDOMController(host, state);
+function createDomController(host) {
+    return new GridDOMController(host);
 }
 export { createDomController };
 //# sourceMappingURL=dom.js.map