apex-grid 3.2.0 → 3.4.0

package/components/group-header-row.js

@@ -0,0 +1,125 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { gridStateContext } from '../controllers/state.js';
+import { registerComponent } from '../internal/register.js';
+import { GRID_GROUP_HEADER_ROW_TAG } from '../internal/tags.js';
+import { styles } from '../styles/group-header-row/group-header-row.css.js';
+export default class ApexGridGroupHeaderRow extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.pinOffsets = new Map();
+        this.groups = [];
+        this.#warned = new Set();
+    }
+    static get tagName() {
+        return GRID_GROUP_HEADER_ROW_TAG;
+    }
+    static { this.styles = styles; }
+    static register() {
+        registerComponent(ApexGridGroupHeaderRow);
+    }
+    #warned;
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'row');
+        this.setAttribute('aria-rowindex', '1');
+    }
+    #chromeCount() {
+        return ((this.state?.selection.showCheckboxColumn ? 1 : 0) +
+            (this.state?.expansion.showToggleColumn ? 1 : 0));
+    }
+    render() {
+        const groupsById = new Map(this.groups.map((group) => [group.id, group]));
+        const visible = this.columns.filter((column) => !column.hidden);
+        const chrome = this.#chromeCount();
+        const seen = new Set();
+        const cells = [];
+        let i = 0;
+        while (i < visible.length) {
+            const column = visible[i];
+            const group = column.group ? groupsById.get(column.group) : undefined;
+            const startLine = chrome + i + 1;
+            if (!group) {
+                cells.push(html `<div part="group-spacer" style=${styleMap({ gridColumn: `${startLine} / span 1` })}></div>`);
+                i += 1;
+                continue;
+            }
+            let end = i;
+            while (end + 1 < visible.length &&
+                visible[end + 1].group === column.group &&
+                (visible[end + 1].pinned ?? null) === (column.pinned ?? null)) {
+                end += 1;
+            }
+            if (seen.has(group.id)) {
+                if (!this.#warned.has(group.id)) {
+                    this.#warned.add(group.id);
+                    console.warn(`[apex-grid] Column group "${group.id}" is not contiguous within a single pin region; its spanning header was skipped for the out-of-place members.`);
+                }
+                for (let k = i; k <= end; k += 1) {
+                    const line = chrome + k + 1;
+                    cells.push(html `<div part="group-spacer" style=${styleMap({ gridColumn: `${line} / span 1` })}></div>`);
+                }
+                i = end + 1;
+                continue;
+            }
+            seen.add(group.id);
+            cells.push(this.#renderGroupCell(group, visible[i], visible[end], startLine, end, chrome));
+            i = end + 1;
+        }
+        return html `${chrome > 0
+            ? html `<div part="group-spacer" style=${styleMap({ gridColumn: `1 / span ${chrome}` })}></div>`
+            : nothing}${cells}`;
+    }
+    #renderGroupCell(group, first, last, startLine, endIndex, chrome) {
+        const span = endIndex - (startLine - chrome - 1) + 1;
+        const endLine = startLine + span;
+        const pinned = first.pinned ?? null;
+        const style = { gridColumn: `${startLine} / ${endLine}` };
+        if (pinned === 'start') {
+            const offset = this.pinOffsets.get(first.key);
+            if (typeof offset === 'number')
+                style['--apex-pin-offset'] = `${offset}px`;
+        }
+        else if (pinned === 'end') {
+            const offset = this.pinOffsets.get(last.key);
+            if (typeof offset === 'number')
+                style['--apex-pin-offset'] = `${offset}px`;
+        }
+        const content = group.headerTemplate
+            ? group.headerTemplate({ group, span })
+            : group.headerText;
+        return html `<div
+      part="group-header"
+      role="columnheader"
+      aria-colindex=${startLine}
+      aria-colspan=${span}
+      data-pinned=${pinned ?? 'none'}
+      style=${styleMap(style)}
+    >
+      <span part="group-header-label">${content}</span>
+    </div>`;
+    }
+}
+__decorate([
+    consume({ context: gridStateContext, subscribe: true }),
+    property({ attribute: false })
+], ApexGridGroupHeaderRow.prototype, "state", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGridGroupHeaderRow.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGridGroupHeaderRow.prototype, "pinOffsets", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGridGroupHeaderRow.prototype, "groups", void 0);
+//# sourceMappingURL=group-header-row.js.map

package/components/group-header-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-header-row.js","sourceRoot":"","sources":["../../src/components/group-header-row.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_GROUP_HEADER_ROW_TAG } from '../internal/tags.js';\nimport type {\n  ApexColumnGroupContext,\n  ColumnConfiguration,\n  ColumnGroupConfiguration,\n} from '../internal/types.js';\nimport { styles } from '../styles/group-header-row/group-header-row.css.js';\n\n/**\n * Spanning header row rendered above the column header row. Group cells are\n * derived at render time from contiguous runs of same-`group` columns in the\n * display order, split at pin boundaries. Lays out over the same CSS grid tracks\n * as the body (the host applies `grid-template-columns`), spanning members via\n * `grid-column`.\n *\n * @csspart group-header - A spanning group header cell.\n * @csspart group-header-label - The label inside a group header cell.\n * @csspart group-spacer - A placeholder over chrome / ungrouped columns.\n */\nexport default class ApexGridGroupHeaderRow<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_GROUP_HEADER_ROW_TAG;\n  }\n\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(ApexGridGroupHeaderRow);\n  }\n\n  @consume({ context: gridStateContext, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  /** Display-ordered, pin-grouped columns (matches the body track order). */\n  @property({ attribute: false })\n  public columns: Array<ColumnConfiguration<T>> = [];\n\n  /** Cumulative pin offsets (px) keyed by column key. */\n  @property({ attribute: false })\n  public pinOffsets: Map<unknown, number> = new Map();\n\n  /** Configured column groups. */\n  @property({ attribute: false })\n  public groups: ColumnGroupConfiguration[] = [];\n\n  /** Group ids already warned about (non-contiguous), so we warn once each. */\n  #warned = new Set<string>();\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'row');\n    this.setAttribute('aria-rowindex', '1');\n  }\n\n  /** Number of leading chrome columns (selection + expansion). */\n  #chromeCount(): number {\n    return (\n      (this.state?.selection.showCheckboxColumn ? 1 : 0) +\n      (this.state?.expansion.showToggleColumn ? 1 : 0)\n    );\n  }\n\n  protected override render() {\n    const groupsById = new Map(this.groups.map((group) => [group.id, group]));\n    const visible = this.columns.filter((column) => !column.hidden);\n    const chrome = this.#chromeCount();\n    const seen = new Set<string>();\n    const cells = [];\n\n    let i = 0;\n    while (i < visible.length) {\n      const column = visible[i];\n      const group = column.group ? groupsById.get(column.group) : undefined;\n      const startLine = chrome + i + 1;\n\n      if (!group) {\n        cells.push(\n          html`<div part=\"group-spacer\" style=${styleMap({ gridColumn: `${startLine} / span 1` })}></div>`\n        );\n        i += 1;\n        continue;\n      }\n\n      // Extend the run while the next column shares the group id and pin region.\n      let end = i;\n      while (\n        end + 1 < visible.length &&\n        visible[end + 1].group === column.group &&\n        (visible[end + 1].pinned ?? null) === (column.pinned ?? null)\n      ) {\n        end += 1;\n      }\n\n      // A group whose members aren't contiguous within one pin region shows up\n      // as a second run for an id we've already rendered — warn and render the\n      // run as a plain spacer rather than a misleading duplicate header.\n      if (seen.has(group.id)) {\n        if (!this.#warned.has(group.id)) {\n          this.#warned.add(group.id);\n          // biome-ignore lint/suspicious/noConsole: intentional one-shot misconfiguration diagnostic\n          console.warn(\n            `[apex-grid] Column group \"${group.id}\" is not contiguous within a single pin region; its spanning header was skipped for the out-of-place members.`\n          );\n        }\n        for (let k = i; k <= end; k += 1) {\n          const line = chrome + k + 1;\n          cells.push(\n            html`<div part=\"group-spacer\" style=${styleMap({ gridColumn: `${line} / span 1` })}></div>`\n          );\n        }\n        i = end + 1;\n        continue;\n      }\n      seen.add(group.id);\n\n      cells.push(this.#renderGroupCell(group, visible[i], visible[end], startLine, end, chrome));\n      i = end + 1;\n    }\n\n    return html`${\n      chrome > 0\n        ? html`<div part=\"group-spacer\" style=${styleMap({ gridColumn: `1 / span ${chrome}` })}></div>`\n        : nothing\n    }${cells}`;\n  }\n\n  #renderGroupCell(\n    group: ColumnGroupConfiguration,\n    first: ColumnConfiguration<T>,\n    last: ColumnConfiguration<T>,\n    startLine: number,\n    endIndex: number,\n    chrome: number\n  ) {\n    const span = endIndex - (startLine - chrome - 1) + 1;\n    const endLine = startLine + span;\n    const pinned = first.pinned ?? null;\n\n    const style: Record<string, string> = { gridColumn: `${startLine} / ${endLine}` };\n    // Pin the group cell to the edge of its anchoring member so it tracks the\n    // frozen column(s) during horizontal scroll.\n    if (pinned === 'start') {\n      const offset = this.pinOffsets.get(first.key);\n      if (typeof offset === 'number') style['--apex-pin-offset'] = `${offset}px`;\n    } else if (pinned === 'end') {\n      const offset = this.pinOffsets.get(last.key);\n      if (typeof offset === 'number') style['--apex-pin-offset'] = `${offset}px`;\n    }\n\n    const content = group.headerTemplate\n      ? group.headerTemplate({ group, span } as ApexColumnGroupContext)\n      : group.headerText;\n\n    return html`<div\n      part=\"group-header\"\n      role=\"columnheader\"\n      aria-colindex=${startLine}\n      aria-colspan=${span}\n      data-pinned=${pinned ?? 'none'}\n      style=${styleMap(style)}\n    >\n      <span part=\"group-header-label\">${content}</span>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ApexGridGroupHeaderRow.tagName]: ApexGridGroupHeaderRow<object>;\n  }\n}\n"]}

package/components/header-row.d.ts

@@ -3,7 +3,6 @@ import { type StateController } from '../controllers/state.js';
 import type { ColumnConfiguration } from '../internal/types.js';
 import ApexGridHeader from './header.js';
 export default class ApexGridHeaderRow<T extends object> extends LitElement {
-    #private;
     static get tagName(): "apex-grid-header-row";
     static styles: import("lit").CSSResult;
     static register(): void;
@@ -12,9 +11,11 @@ export default class ApexGridHeaderRow<T extends object> extends LitElement {
     columns: Array<ColumnConfiguration<T>>;
     /** Cumulative pin offsets (px) keyed by column key. */
     pinOffsets: Map<unknown, number>;
+    /** Reveal the spreadsheet coordinates (row-number header spacer + column letters). */
+    coordinateHints: boolean;
     get headers(): ApexGridHeader<T>[];
-    constructor();
     connectedCallback(): void;
+    protected updated(): void;
     protected shouldUpdate(props: PropertyValueMap<this> | Map<PropertyKey, this>): boolean;
     /**
      * Header cell for the built-in expansion (chevron) column. Renders an
@@ -27,6 +28,16 @@ export default class ApexGridHeaderRow<T extends object> extends LitElement {
      * "select all on this page" checkbox in multi-select mode; nothing in
      * single-select mode (selecting all rows isn't meaningful there).
      */
+    /**
+     * Corner spacer aligning the header with the body's leading row-number gutter
+     * (formula coordinate hints). Shows a small "#" glyph.
+     */
+    protected renderRowNumberHeader(): import("lit-html").TemplateResult<1> | typeof nothing;
+    /**
+     * Empty corner spacer aligning the header with the body's leading grip-handle
+     * column. Rendered only in row-reorder handle mode.
+     */
+    protected renderReorderHandleHeader(): import("lit-html").TemplateResult<1> | typeof nothing;
     protected renderSelectionHeader(): import("lit-html").TemplateResult<1> | typeof nothing;
     /**
      * Floating "ghost" element that follows the cursor while a header is

package/components/header-row.js

@@ -14,10 +14,16 @@ import { gridStateContext } from '../controllers/state.js';
 import { partNameMap } from '../internal/part-map.js';
 import { registerComponent } from '../internal/register.js';
 import { GRID_HEADER_ROW_TAG } from '../internal/tags.js';
-import { getPinEdge } from '../internal/utils.js';
+import { columnLetter, getPinEdge } from '../internal/utils.js';
 import { styles } from '../styles/header-row/header-row.base.css.js';
 import ApexGridHeader from './header.js';
 export default class ApexGridHeaderRow extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.pinOffsets = new Map();
+        this.coordinateHints = false;
+    }
     static get tagName() {
         return GRID_HEADER_ROW_TAG;
     }
@@ -28,24 +34,15 @@ export default class ApexGridHeaderRow extends LitElement {
     get headers() {
         return Array.from(this._headers);
     }
-    constructor() {
-        super();
-        this.columns = [];
-        this.pinOffsets = new Map();
-        this.addEventListener('click', this.#activeFilterColumn);
-    }
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('tabindex', '0');
         this.setAttribute('role', 'row');
         this.setAttribute('aria-rowindex', '1');
     }
-    #activeFilterColumn(event) {
-        const header = event
-            .composedPath()
-            .filter((target) => target instanceof ApexGridHeader)
-            .at(0);
-        this.state.filtering.setActiveColumn(header?.column);
+    updated() {
+        const depth = this.state?.host?.columnGroupDepth ?? 0;
+        this.setAttribute('aria-rowindex', String(depth + 1));
     }
     shouldUpdate(props) {
         for (const header of this.headers) {
@@ -78,7 +75,9 @@ export default class ApexGridHeaderRow extends LitElement {
       <button
         type="button"
         part="expansion-toggle"
-        aria-label=${someExpanded ? 'Collapse all rows' : 'Expand all rows'}
+        aria-label=${someExpanded
+            ? this.state.localize('header.collapseAll')
+            : this.state.localize('header.expandAll')}
         aria-expanded=${someExpanded ? 'true' : 'false'}
         @click=${handleClick}
       >
@@ -102,6 +101,16 @@ export default class ApexGridHeaderRow extends LitElement {
       </button>
     </div>`;
     }
+    renderRowNumberHeader() {
+        if (!this.coordinateHints)
+            return nothing;
+        return html `<div part="row-number-header" data-pinned="start" aria-hidden="true">#</div>`;
+    }
+    renderReorderHandleHeader() {
+        if (!this.state?.rowReorder?.showHandleColumn)
+            return nothing;
+        return html `<div part="reorder-handle-header" data-pinned="start" aria-hidden="true"></div>`;
+    }
     renderSelectionHeader() {
         const selection = this.state?.selection;
         if (!selection?.showCheckboxColumn)
@@ -134,7 +143,7 @@ export default class ApexGridHeaderRow extends LitElement {
       <input
         type="checkbox"
         part="selection-checkbox"
-        aria-label="Select all rows"
+        aria-label=${this.state.localize('header.selectAll')}
         .checked=${allChecked}
         ${ref(syncIndeterminate)}
         @change=${handleChange}
@@ -158,14 +167,14 @@ export default class ApexGridHeaderRow extends LitElement {
     </div>`;
     }
     render() {
-        const filterRow = this.state.filtering.filterRow;
         const reorderState = this.state.reordering.state;
         let colCursor = 0;
         if (this.state?.selection.showCheckboxColumn)
             colCursor++;
         if (this.state?.expansion.showToggleColumn)
             colCursor++;
-        return html `${this.renderSelectionHeader()}${this.renderExpansionHeader()}${repeat(this.columns, (column) => String(column.key), (column, index) => {
+        let coordCol = 0;
+        return html `${this.renderRowNumberHeader()}${this.renderReorderHandleHeader()}${this.renderSelectionHeader()}${this.renderExpansionHeader()}${repeat(this.columns, (column) => String(column.key), (column, index) => {
             if (column.hidden)
                 return nothing;
             const offset = this.pinOffsets.get(column.key);
@@ -173,9 +182,11 @@ export default class ApexGridHeaderRow extends LitElement {
             const edge = getPinEdge(this.columns, index);
             const isDragSource = reorderState?.sourceKey === column.key;
             const ariaColindex = ++colCursor;
+            const coordinateLetter = this.coordinateHints ? columnLetter(coordCol) : '';
+            coordCol += 1;
             return html `<apex-grid-header
           part=${partNameMap({
-                filtered: column === filterRow?.column,
+                filtered: this.state.filtering.state.has(column.key),
                 'pinned-start': column.pinned === 'start',
                 'pinned-end': column.pinned === 'end',
                 dragging: isDragSource,
@@ -185,6 +196,7 @@ export default class ApexGridHeaderRow extends LitElement {
           style=${pinStyle}
           .column=${column}
           .colindex=${ariaColindex}
+          .coordinateLetter=${coordinateLetter}
         ></apex-grid-header>`;
         })}${this.renderDragGhost()}`;
     }
@@ -202,4 +214,7 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], ApexGridHeaderRow.prototype, "pinOffsets", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGridHeaderRow.prototype, "coordinateHints", void 0);
 //# sourceMappingURL=header-row.js.map

package/components/header-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-row.js","sourceRoot":"","sources":["../../src/components/header-row.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing, type PropertyValueMap } from 'lit';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { ref } from 'lit/directives/ref.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport { partNameMap } from '../internal/part-map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_HEADER_ROW_TAG } from '../internal/tags.js';\nimport type { ColumnConfiguration } from '../internal/types.js';\nimport { getPinEdge } from '../internal/utils.js';\nimport { styles } from '../styles/header-row/header-row.base.css.js';\nimport ApexGridHeader from './header.js';\n\nexport default class ApexGridHeaderRow<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_HEADER_ROW_TAG;\n  }\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(ApexGridHeaderRow, ApexGridHeader);\n  }\n\n  @queryAll(ApexGridHeader.tagName)\n  protected _headers!: NodeListOf<ApexGridHeader<T>>;\n\n  @consume({ context: gridStateContext, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  @property({ attribute: false })\n  public columns: Array<ColumnConfiguration<T>> = [];\n\n  /** Cumulative pin offsets (px) keyed by column key. */\n  @property({ attribute: false })\n  public pinOffsets: Map<unknown, number> = new Map();\n\n  public get headers() {\n    return Array.from(this._headers);\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.#activeFilterColumn);\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('tabindex', '0');\n    this.setAttribute('role', 'row');\n    this.setAttribute('aria-rowindex', '1');\n  }\n\n  #activeFilterColumn(event: MouseEvent) {\n    const header = event\n      .composedPath()\n      .filter((target) => target instanceof ApexGridHeader)\n      .at(0) as ApexGridHeader<T>;\n\n    this.state.filtering.setActiveColumn(header?.column);\n  }\n\n  protected override shouldUpdate(props: PropertyValueMap<this> | Map<PropertyKey, this>): boolean {\n    for (const header of this.headers) {\n      header.requestUpdate();\n    }\n\n    return super.shouldUpdate(props);\n  }\n\n  /**\n   * Header cell for the built-in expansion (chevron) column. Renders an\n   * \"expand all\" toggle that expands every row in the current view, or\n   * collapses every expanded row when at least one is open.\n   */\n  protected renderExpansionHeader() {\n    const expansion = this.state?.expansion;\n    if (!expansion?.showToggleColumn) return nothing;\n    const someExpanded = expansion.expanded.size > 0;\n    const handleClick = (event: MouseEvent) => {\n      event.stopPropagation();\n      if (someExpanded) {\n        void expansion.collapseAll();\n      } else {\n        void expansion.expandAll();\n      }\n    };\n    const selection = this.state?.selection;\n    const colindex = selection?.showCheckboxColumn ? 2 : 1;\n    return html`<div\n      part=\"expansion-header\"\n      role=\"columnheader\"\n      aria-colindex=${colindex}\n      data-pinned=\"start\"\n    >\n      <button\n        type=\"button\"\n        part=\"expansion-toggle\"\n        aria-label=${someExpanded ? 'Collapse all rows' : 'Expand all rows'}\n        aria-expanded=${someExpanded ? 'true' : 'false'}\n        @click=${handleClick}\n      >\n        <svg\n          part=\"expansion-chevron\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n          width=\"14\"\n          height=\"14\"\n          style=${someExpanded ? 'transform: rotate(90deg)' : ''}\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    </div>`;\n  }\n\n  /**\n   * Header cell for the built-in selection (checkbox) column. Renders a\n   * \"select all on this page\" checkbox in multi-select mode; nothing in\n   * single-select mode (selecting all rows isn't meaningful there).\n   */\n  protected renderSelectionHeader() {\n    const selection = this.state?.selection;\n    if (!selection?.showCheckboxColumn) return nothing;\n    if (selection.mode === 'single') {\n      // Reserve the track so cells below line up — but no select-all\n      // affordance in single-row-selection mode.\n      return html`<div part=\"selection-header\" data-pinned=\"start\"></div>`;\n    }\n    const allChecked = selection.allSelected();\n    const indeterminate = selection.someSelected();\n    const syncIndeterminate = (el: Element | undefined) => {\n      if (el instanceof HTMLInputElement) {\n        el.indeterminate = indeterminate;\n      }\n    };\n    const handleChange = (event: Event) => {\n      const checked = (event.target as HTMLInputElement).checked;\n      if (checked) {\n        void selection.selectAll();\n      } else {\n        void selection.clear();\n      }\n    };\n    return html`<div\n      part=\"selection-header\"\n      role=\"columnheader\"\n      aria-colindex=\"1\"\n      data-pinned=\"start\"\n    >\n      <input\n        type=\"checkbox\"\n        part=\"selection-checkbox\"\n        aria-label=\"Select all rows\"\n        .checked=${allChecked}\n        ${ref(syncIndeterminate)}\n        @change=${handleChange}\n      />\n    </div>`;\n  }\n\n  /**\n   * Floating \"ghost\" element that follows the cursor while a header is\n   * being dragged. Positioned via `position: fixed` so it escapes the\n   * header row's sticky containing block and follows the viewport.\n   */\n  protected renderDragGhost() {\n    const state = this.state.reordering.state;\n    if (!state) return nothing;\n    return html`<div\n      part=\"drag-ghost\"\n      style=${styleMap({\n        left: `${state.ghostX}px`,\n        top: `${state.ghostY}px`,\n        width: `${state.ghostWidth}px`,\n        height: `${state.ghostHeight}px`,\n      })}\n    >\n      ${state.label}\n    </div>`;\n  }\n\n  protected override render() {\n    const filterRow = this.state.filtering.filterRow;\n    const reorderState = this.state.reordering.state;\n\n    // Track aria-colindex across the auto chrome columns (selection + expansion)\n    // and the data columns so the same numbering is consistent across rows.\n    let colCursor = 0;\n    if (this.state?.selection.showCheckboxColumn) colCursor++;\n    if (this.state?.expansion.showToggleColumn) colCursor++;\n\n    // Keyed by column.key so the same `<apex-grid-header>` DOM element\n    // follows its column across a live reorder swap — critical for pointer\n    // capture to stay bound to the dragged column as it moves.\n    return html`${this.renderSelectionHeader()}${this.renderExpansionHeader()}${repeat(\n      this.columns,\n      (column) => String(column.key),\n      (column, index) => {\n        if (column.hidden) return nothing;\n        const offset = this.pinOffsets.get(column.key);\n        const pinStyle =\n          column.pinned && typeof offset === 'number' ? `--apex-pin-offset:${offset}px` : '';\n        const edge = getPinEdge(this.columns, index);\n        const isDragSource = reorderState?.sourceKey === column.key;\n        const ariaColindex = ++colCursor;\n        return html`<apex-grid-header\n          part=${partNameMap({\n            filtered: column === filterRow?.column,\n            'pinned-start': column.pinned === 'start',\n            'pinned-end': column.pinned === 'end',\n            dragging: isDragSource,\n          })}\n          data-pinned=${column.pinned ?? 'none'}\n          data-pin-edge=${edge ?? 'none'}\n          style=${pinStyle}\n          .column=${column}\n          .colindex=${ariaColindex}\n        ></apex-grid-header>`;\n      }\n    )}${this.renderDragGhost()}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ApexGridHeaderRow.tagName]: ApexGridHeaderRow<object>;\n  }\n}\n"]}
+{"version":3,"file":"header-row.js","sourceRoot":"","sources":["../../src/components/header-row.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing, type PropertyValueMap } from 'lit';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { ref } from 'lit/directives/ref.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport { partNameMap } from '../internal/part-map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_HEADER_ROW_TAG } from '../internal/tags.js';\nimport type { ColumnConfiguration } from '../internal/types.js';\nimport { columnLetter, getPinEdge } from '../internal/utils.js';\nimport { styles } from '../styles/header-row/header-row.base.css.js';\nimport ApexGridHeader from './header.js';\n\nexport default class ApexGridHeaderRow<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_HEADER_ROW_TAG;\n  }\n  public static override styles = styles;\n\n  public static register(): void {\n    registerComponent(ApexGridHeaderRow, ApexGridHeader);\n  }\n\n  @queryAll(ApexGridHeader.tagName)\n  protected _headers!: NodeListOf<ApexGridHeader<T>>;\n\n  @consume({ context: gridStateContext, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  @property({ attribute: false })\n  public columns: Array<ColumnConfiguration<T>> = [];\n\n  /** Cumulative pin offsets (px) keyed by column key. */\n  @property({ attribute: false })\n  public pinOffsets: Map<unknown, number> = new Map();\n\n  /** Reveal the spreadsheet coordinates (row-number header spacer + column letters). */\n  @property({ attribute: false })\n  public coordinateHints = false;\n\n  public get headers() {\n    return Array.from(this._headers);\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('tabindex', '0');\n    this.setAttribute('role', 'row');\n    this.setAttribute('aria-rowindex', '1');\n  }\n\n  protected override updated(): void {\n    // The column header is row 1, or row 2 when a group header row precedes it.\n    const depth = this.state?.host?.columnGroupDepth ?? 0;\n    this.setAttribute('aria-rowindex', String(depth + 1));\n  }\n\n  protected override shouldUpdate(props: PropertyValueMap<this> | Map<PropertyKey, this>): boolean {\n    for (const header of this.headers) {\n      header.requestUpdate();\n    }\n\n    return super.shouldUpdate(props);\n  }\n\n  /**\n   * Header cell for the built-in expansion (chevron) column. Renders an\n   * \"expand all\" toggle that expands every row in the current view, or\n   * collapses every expanded row when at least one is open.\n   */\n  protected renderExpansionHeader() {\n    const expansion = this.state?.expansion;\n    if (!expansion?.showToggleColumn) return nothing;\n    const someExpanded = expansion.expanded.size > 0;\n    const handleClick = (event: MouseEvent) => {\n      event.stopPropagation();\n      if (someExpanded) {\n        void expansion.collapseAll();\n      } else {\n        void expansion.expandAll();\n      }\n    };\n    const selection = this.state?.selection;\n    const colindex = selection?.showCheckboxColumn ? 2 : 1;\n    return html`<div\n      part=\"expansion-header\"\n      role=\"columnheader\"\n      aria-colindex=${colindex}\n      data-pinned=\"start\"\n    >\n      <button\n        type=\"button\"\n        part=\"expansion-toggle\"\n        aria-label=${\n          someExpanded\n            ? this.state.localize('header.collapseAll')\n            : this.state.localize('header.expandAll')\n        }\n        aria-expanded=${someExpanded ? 'true' : 'false'}\n        @click=${handleClick}\n      >\n        <svg\n          part=\"expansion-chevron\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n          width=\"14\"\n          height=\"14\"\n          style=${someExpanded ? 'transform: rotate(90deg)' : ''}\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    </div>`;\n  }\n\n  /**\n   * Header cell for the built-in selection (checkbox) column. Renders a\n   * \"select all on this page\" checkbox in multi-select mode; nothing in\n   * single-select mode (selecting all rows isn't meaningful there).\n   */\n  /**\n   * Corner spacer aligning the header with the body's leading row-number gutter\n   * (formula coordinate hints). Shows a small \"#\" glyph.\n   */\n  protected renderRowNumberHeader() {\n    if (!this.coordinateHints) return nothing;\n    return html`<div part=\"row-number-header\" data-pinned=\"start\" aria-hidden=\"true\">#</div>`;\n  }\n\n  /**\n   * Empty corner spacer aligning the header with the body's leading grip-handle\n   * column. Rendered only in row-reorder handle mode.\n   */\n  protected renderReorderHandleHeader() {\n    if (!this.state?.rowReorder?.showHandleColumn) return nothing;\n    return html`<div part=\"reorder-handle-header\" data-pinned=\"start\" aria-hidden=\"true\"></div>`;\n  }\n\n  protected renderSelectionHeader() {\n    const selection = this.state?.selection;\n    if (!selection?.showCheckboxColumn) return nothing;\n    if (selection.mode === 'single') {\n      // Reserve the track so cells below line up — but no select-all\n      // affordance in single-row-selection mode.\n      return html`<div part=\"selection-header\" data-pinned=\"start\"></div>`;\n    }\n    const allChecked = selection.allSelected();\n    const indeterminate = selection.someSelected();\n    const syncIndeterminate = (el: Element | undefined) => {\n      if (el instanceof HTMLInputElement) {\n        el.indeterminate = indeterminate;\n      }\n    };\n    const handleChange = (event: Event) => {\n      const checked = (event.target as HTMLInputElement).checked;\n      if (checked) {\n        void selection.selectAll();\n      } else {\n        void selection.clear();\n      }\n    };\n    return html`<div\n      part=\"selection-header\"\n      role=\"columnheader\"\n      aria-colindex=\"1\"\n      data-pinned=\"start\"\n    >\n      <input\n        type=\"checkbox\"\n        part=\"selection-checkbox\"\n        aria-label=${this.state.localize('header.selectAll')}\n        .checked=${allChecked}\n        ${ref(syncIndeterminate)}\n        @change=${handleChange}\n      />\n    </div>`;\n  }\n\n  /**\n   * Floating \"ghost\" element that follows the cursor while a header is\n   * being dragged. Positioned via `position: fixed` so it escapes the\n   * header row's sticky containing block and follows the viewport.\n   */\n  protected renderDragGhost() {\n    const state = this.state.reordering.state;\n    if (!state) return nothing;\n    return html`<div\n      part=\"drag-ghost\"\n      style=${styleMap({\n        left: `${state.ghostX}px`,\n        top: `${state.ghostY}px`,\n        width: `${state.ghostWidth}px`,\n        height: `${state.ghostHeight}px`,\n      })}\n    >\n      ${state.label}\n    </div>`;\n  }\n\n  protected override render() {\n    const reorderState = this.state.reordering.state;\n\n    // Track aria-colindex across the auto chrome columns (selection + expansion)\n    // and the data columns so the same numbering is consistent across rows.\n    let colCursor = 0;\n    if (this.state?.selection.showCheckboxColumn) colCursor++;\n    if (this.state?.expansion.showToggleColumn) colCursor++;\n    // Spreadsheet column letter index: counts only visible data columns (A = the\n    // first one), independent of the aria/chrome numbering above.\n    let coordCol = 0;\n\n    // Keyed by column.key so the same `<apex-grid-header>` DOM element\n    // follows its column across a live reorder swap — critical for pointer\n    // capture to stay bound to the dragged column as it moves.\n    return html`${this.renderRowNumberHeader()}${this.renderReorderHandleHeader()}${this.renderSelectionHeader()}${this.renderExpansionHeader()}${repeat(\n      this.columns,\n      (column) => String(column.key),\n      (column, index) => {\n        if (column.hidden) return nothing;\n        const offset = this.pinOffsets.get(column.key);\n        const pinStyle =\n          column.pinned && typeof offset === 'number' ? `--apex-pin-offset:${offset}px` : '';\n        const edge = getPinEdge(this.columns, index);\n        const isDragSource = reorderState?.sourceKey === column.key;\n        const ariaColindex = ++colCursor;\n        const coordinateLetter = this.coordinateHints ? columnLetter(coordCol) : '';\n        coordCol += 1;\n        return html`<apex-grid-header\n          part=${partNameMap({\n            filtered: this.state.filtering.state.has(column.key),\n            'pinned-start': column.pinned === 'start',\n            'pinned-end': column.pinned === 'end',\n            dragging: isDragSource,\n          })}\n          data-pinned=${column.pinned ?? 'none'}\n          data-pin-edge=${edge ?? 'none'}\n          style=${pinStyle}\n          .column=${column}\n          .colindex=${ariaColindex}\n          .coordinateLetter=${coordinateLetter}\n        ></apex-grid-header>`;\n      }\n    )}${this.renderDragGhost()}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ApexGridHeaderRow.tagName]: ApexGridHeaderRow<object>;\n  }\n}\n"]}

package/components/header.d.ts

@@ -8,6 +8,8 @@ export default class ApexGridHeader<T extends object> extends LitElement {
     static register(): void;
     protected get context(): ApexHeaderContext<T>;
     protected get isSortable(): boolean;
+    protected get isFilterable(): boolean;
+    protected get hasActiveFilter(): boolean;
     protected get resizeController(): import("../controllers/resize.js").ResizeController<T>;
     protected get reorderController(): import("../controllers/reorder.js").ReorderController<T>;
     protected get isDraggable(): boolean;
@@ -15,10 +17,19 @@ export default class ApexGridHeader<T extends object> extends LitElement {
     column: ColumnConfiguration<T>;
     /** 1-based column index passed in by the parent header row for `aria-colindex`. */
     colindex: number;
+    /**
+     * Spreadsheet column letter (A, B, C, ...) shown as a prefix while formula
+     * coordinate hints are active. Empty string hides it.
+     */
+    coordinateLetter: string;
+    protected menuOpen: boolean;
     protected updated(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected renderSortPart(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected renderFilterButton(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected renderMenuButton(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected renderColumnMenu(): import("lit-html").TemplateResult<1> | typeof nothing;
     protected renderContentPart(): import("lit-html").TemplateResult<1>;
     protected renderResizePart(): import("lit-html").TemplateResult<1> | typeof nothing;
     protected render(): import("lit-html").TemplateResult<1>;