apex-grid 1.0.1 → 2.0.0

package/components/row.js

@@ -0,0 +1,239 @@
+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, queryAll } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { gridStateContext } from '../controllers/state.js';
+import { registerComponent } from '../internal/register.js';
+import { GRID_ROW_TAG } from '../internal/tags.js';
+import { getPinEdge } from '../internal/utils.js';
+import { styles } from '../styles/body-row/body-row.css.js';
+import ApexGridCell from './cell.js';
+export default class ApexGridRow extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.pinOffsets = new Map();
+        this.index = -1;
+        this.selected = false;
+        this.expanded = false;
+        this.editingKey = null;
+        this.ariaRowOffset = 1;
+    }
+    static get tagName() {
+        return GRID_ROW_TAG;
+    }
+    static { this.styles = styles; }
+    static register() {
+        registerComponent(ApexGridRow, ApexGridCell);
+    }
+    get cells() {
+        return Array.from(this._cells);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('exportparts', 'cell');
+        this.setAttribute('role', 'row');
+    }
+    willUpdate() {
+        this.selected = Boolean(this.state?.selection.isSelected(this.data));
+        this.expanded = Boolean(this.state?.expansion.isExpanded(this.data));
+        this.setAttribute('aria-rowindex', String(this.index + this.ariaRowOffset + 1));
+        if (this.state?.selection.enabled) {
+            this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
+        }
+        else {
+            this.removeAttribute('aria-selected');
+        }
+        const tree = this.state?.tree;
+        const treeMeta = tree?.enabled ? tree.getMeta(this.data) : undefined;
+        if (treeMeta) {
+            this.setAttribute('aria-level', String(treeMeta.depth + 1));
+            if (treeMeta.hasChildren) {
+                this.setAttribute('aria-expanded', tree.isExpanded(this.data) ? 'true' : 'false');
+            }
+            else {
+                this.removeAttribute('aria-expanded');
+            }
+        }
+        else {
+            this.removeAttribute('aria-level');
+            if (this.state?.expansion.enabled) {
+                this.setAttribute('aria-expanded', this.expanded ? 'true' : 'false');
+            }
+            else {
+                this.removeAttribute('aria-expanded');
+            }
+        }
+    }
+    renderExpansionToggle(colindex) {
+        const expansion = this.state?.expansion;
+        if (!expansion?.showToggleColumn)
+            return nothing;
+        const canExpand = expansion.canExpand(this.data) || expansion.isExpanded(this.data);
+        const expanded = this.expanded;
+        const handleClick = (event) => {
+            event.stopPropagation();
+            if (!canExpand)
+                return;
+            void expansion.toggleRow(this.data);
+        };
+        return html `<div
+      part="expansion-cell"
+      role="gridcell"
+      aria-colindex=${colindex}
+      data-pinned="start"
+    >
+      <button
+        type="button"
+        part="expansion-toggle"
+        aria-label=${expanded ? 'Collapse row' : 'Expand row'}
+        aria-expanded=${expanded ? 'true' : 'false'}
+        ?disabled=${!canExpand}
+        @click=${handleClick}
+      >
+        <svg
+          part="expansion-chevron"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+          width="14"
+          height="14"
+        >
+          <path
+            d="M9 6l6 6-6 6"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+    </div>`;
+    }
+    renderDetailPanel() {
+        const expansion = this.state?.expansion;
+        if (!expansion?.isExpanded(this.data))
+            return nothing;
+        const template = this.state.host.expansion?.detailTemplate;
+        if (typeof template !== 'function')
+            return nothing;
+        const content = template({
+            data: this.data,
+            rowIndex: this.index,
+            parent: this.state.host,
+        });
+        return html `<div part="detail-panel" role="region" aria-label="Row detail">${content}</div>`;
+    }
+    renderSelectionCell(colindex) {
+        if (!this.state?.selection.showCheckboxColumn)
+            return nothing;
+        const selected = this.selected;
+        const handleChange = (event) => {
+            const mouseEvent = event;
+            void mouseEvent;
+            this.state.selection.toggleRow(this.data);
+        };
+        const handleClick = (event) => {
+            event.stopPropagation();
+            if (event.shiftKey && this.state.selection.mode === 'multiple') {
+                event.preventDefault();
+                void this.state.selection.rangeToggle(this.data);
+                return;
+            }
+            if ((event.ctrlKey || event.metaKey) && this.state.selection.mode === 'multiple') {
+                event.preventDefault();
+                void this.state.selection.additiveToggle(this.data);
+                return;
+            }
+        };
+        return html `<div
+      part="selection-cell"
+      role="gridcell"
+      aria-colindex=${colindex}
+      data-pinned="start"
+    >
+      <input
+        type="checkbox"
+        part="selection-checkbox"
+        aria-label="Select row"
+        .checked=${selected}
+        @click=${handleClick}
+        @change=${handleChange}
+      />
+    </div>`;
+    }
+    render() {
+        const { column: key, row: index } = this.activeNode;
+        let colCursor = 0;
+        const selectionCol = this.state?.selection.showCheckboxColumn ? ++colCursor : 0;
+        const expansionCol = this.state?.expansion.showToggleColumn ? ++colCursor : 0;
+        return html `
+      ${this.renderSelectionCell(selectionCol)}
+      ${this.renderExpansionToggle(expansionCol)}
+      ${repeat(this.columns, (column) => String(column.key), (column, colIndex) => {
+            if (column.hidden)
+                return nothing;
+            const offset = this.pinOffsets.get(column.key);
+            const pinStyle = column.pinned && typeof offset === 'number' ? `--apex-pin-offset:${offset}px` : '';
+            const edge = getPinEdge(this.columns, colIndex);
+            const editing = this.editingKey === column.key;
+            const ariaColindex = ++colCursor;
+            return html `<apex-grid-cell
+            part="cell"
+            data-pinned=${column.pinned ?? 'none'}
+            data-pin-edge=${edge ?? 'none'}
+            data-cell-type=${column.type ?? 'string'}
+            style=${pinStyle}
+            .active=${key === column.key && index === this.index}
+            .editing=${editing}
+            .column=${column}
+            .row=${this}
+            .value=${this.data[column.key]}
+            .colindex=${ariaColindex}
+          ></apex-grid-cell>`;
+        })}
+      ${this.renderDetailPanel()}
+    `;
+    }
+}
+__decorate([
+    queryAll(ApexGridCell.tagName)
+], ApexGridRow.prototype, "_cells", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGridRow.prototype, "data", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGridRow.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGridRow.prototype, "pinOffsets", void 0);
+__decorate([
+    consume({ context: gridStateContext, subscribe: true }),
+    property({ attribute: false })
+], ApexGridRow.prototype, "state", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGridRow.prototype, "activeNode", void 0);
+__decorate([
+    property({ attribute: false, type: Number })
+], ApexGridRow.prototype, "index", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ApexGridRow.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ApexGridRow.prototype, "expanded", void 0);
+__decorate([
+    property({ attribute: false })
+], ApexGridRow.prototype, "editingKey", void 0);
+__decorate([
+    property({ attribute: false, type: Number })
+], ApexGridRow.prototype, "ariaRowOffset", void 0);
+//# sourceMappingURL=row.js.map

package/components/row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../src/components/row.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_ROW_TAG } from '../internal/tags.js';\nimport type { ActiveNode, ColumnConfiguration, Keys } from '../internal/types.js';\nimport { getPinEdge } from '../internal/utils.js';\nimport { styles } from '../styles/body-row/body-row.css.js';\nimport ApexGridCell from './cell.js';\n\n/**\n * Component representing the DOM row in the Apex grid.\n */\nexport default class ApexGridRow<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(ApexGridRow, ApexGridCell);\n  }\n\n  @queryAll(ApexGridCell.tagName)\n  protected _cells!: NodeListOf<ApexGridCell<T>>;\n\n  @property({ attribute: false })\n  public data!: 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 cells() {\n    return Array.from(this._cells);\n  }\n\n  @consume({ context: gridStateContext, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  @property({ attribute: false })\n  public activeNode!: ActiveNode<T>;\n\n  @property({ attribute: false, type: Number })\n  public index = -1;\n\n  /** Reflects current selection state so SCSS can highlight the row. */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /** Reflects current expansion state so SCSS can rotate the chevron. */\n  @property({ type: Boolean, reflect: true })\n  public expanded = false;\n\n  /** The column key currently being edited in this row, or `null`. */\n  @property({ attribute: false })\n  public editingKey: Keys<T> | null = null;\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('exportparts', 'cell');\n    this.setAttribute('role', 'row');\n  }\n\n  /**\n   * The number of \"chrome\" rows (header + filter) above the body. Used to\n   * derive `aria-rowindex` from {@link index}. Set by the parent grid.\n   */\n  @property({ attribute: false, type: Number })\n  public ariaRowOffset = 1;\n\n  protected override willUpdate() {\n    this.selected = Boolean(this.state?.selection.isSelected(this.data));\n    this.expanded = Boolean(this.state?.expansion.isExpanded(this.data));\n    this.setAttribute('aria-rowindex', String(this.index + this.ariaRowOffset + 1));\n    if (this.state?.selection.enabled) {\n      this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n    } else {\n      this.removeAttribute('aria-selected');\n    }\n\n    // Tree mode reports aria-level (1-based depth) and aria-expanded for\n    // parent rows; expansion mode shares the same attribute on detail-panel\n    // rows. Tree wins when both are enabled since it's the more structural\n    // semantic (the row represents a tree node).\n    const tree = this.state?.tree;\n    const treeMeta = tree?.enabled ? tree.getMeta(this.data) : undefined;\n    if (treeMeta) {\n      this.setAttribute('aria-level', String(treeMeta.depth + 1));\n      if (treeMeta.hasChildren) {\n        this.setAttribute('aria-expanded', tree!.isExpanded(this.data) ? 'true' : 'false');\n      } else {\n        this.removeAttribute('aria-expanded');\n      }\n    } else {\n      this.removeAttribute('aria-level');\n      if (this.state?.expansion.enabled) {\n        this.setAttribute('aria-expanded', this.expanded ? 'true' : 'false');\n      } else {\n        this.removeAttribute('aria-expanded');\n      }\n    }\n  }\n\n  protected renderExpansionToggle(colindex: number) {\n    const expansion = this.state?.expansion;\n    if (!expansion?.showToggleColumn) return nothing;\n    const canExpand = expansion.canExpand(this.data) || expansion.isExpanded(this.data);\n    const expanded = this.expanded;\n    const handleClick = (event: MouseEvent) => {\n      event.stopPropagation();\n      if (!canExpand) return;\n      void expansion.toggleRow(this.data);\n    };\n    return html`<div\n      part=\"expansion-cell\"\n      role=\"gridcell\"\n      aria-colindex=${colindex}\n      data-pinned=\"start\"\n    >\n      <button\n        type=\"button\"\n        part=\"expansion-toggle\"\n        aria-label=${expanded ? 'Collapse row' : 'Expand row'}\n        aria-expanded=${expanded ? 'true' : 'false'}\n        ?disabled=${!canExpand}\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        >\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  protected renderDetailPanel() {\n    const expansion = this.state?.expansion;\n    if (!expansion?.isExpanded(this.data)) return nothing;\n    const template = this.state.host.expansion?.detailTemplate;\n    if (typeof template !== 'function') return nothing;\n    const content = template({\n      data: this.data,\n      rowIndex: this.index,\n      parent: this.state.host,\n    });\n    return html`<div part=\"detail-panel\" role=\"region\" aria-label=\"Row detail\">${content}</div>`;\n  }\n\n  protected renderSelectionCell(colindex: number) {\n    if (!this.state?.selection.showCheckboxColumn) return nothing;\n    const selected = this.selected;\n    const handleChange = (event: Event) => {\n      const mouseEvent = event as Event & {\n        shiftKey?: boolean;\n        ctrlKey?: boolean;\n        metaKey?: boolean;\n      };\n      // The native `change` event on a checkbox doesn't expose modifier keys\n      // — they're carried on the preceding `click`. We handle Shift/Ctrl in\n      // the click listener below; the change handler covers keyboard toggles\n      // (Space on a focused checkbox) which always behave as plain toggles.\n      void mouseEvent;\n      this.state.selection.toggleRow(this.data);\n    };\n    const handleClick = (event: MouseEvent) => {\n      // Prevent the click from bubbling to the grid's body click handler\n      // (which would otherwise re-target the active cell to a non-existent\n      // selection column).\n      event.stopPropagation();\n      if (event.shiftKey && this.state.selection.mode === 'multiple') {\n        event.preventDefault();\n        void this.state.selection.rangeToggle(this.data);\n        return;\n      }\n      if ((event.ctrlKey || event.metaKey) && this.state.selection.mode === 'multiple') {\n        event.preventDefault();\n        void this.state.selection.additiveToggle(this.data);\n        return;\n      }\n      // Plain click: let the default checkbox toggle proceed; `change` will\n      // commit the new state via `toggleRow`.\n    };\n    return html`<div\n      part=\"selection-cell\"\n      role=\"gridcell\"\n      aria-colindex=${colindex}\n      data-pinned=\"start\"\n    >\n      <input\n        type=\"checkbox\"\n        part=\"selection-checkbox\"\n        aria-label=\"Select row\"\n        .checked=${selected}\n        @click=${handleClick}\n        @change=${handleChange}\n      />\n    </div>`;\n  }\n\n  protected override render() {\n    const { column: key, row: index } = this.activeNode;\n\n    // Track aria-colindex (1-based) across the auto chrome columns and the\n    // data columns. Selection comes first, then expansion, then data.\n    let colCursor = 0;\n    const selectionCol = this.state?.selection.showCheckboxColumn ? ++colCursor : 0;\n    const expansionCol = this.state?.expansion.showToggleColumn ? ++colCursor : 0;\n\n    // Keyed by column.key so the same `<apex-grid-cell>` follows its\n    // column through a reorder swap — required for the column-reorder FLIP\n    // animation in ReorderController to track motion per cell.\n    return html`\n      ${this.renderSelectionCell(selectionCol)}\n      ${this.renderExpansionToggle(expansionCol)}\n      ${repeat(\n        this.columns,\n        (column) => String(column.key),\n        (column, colIndex) => {\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, colIndex);\n          const editing = this.editingKey === column.key;\n          const ariaColindex = ++colCursor;\n          return html`<apex-grid-cell\n            part=\"cell\"\n            data-pinned=${column.pinned ?? 'none'}\n            data-pin-edge=${edge ?? 'none'}\n            data-cell-type=${column.type ?? 'string'}\n            style=${pinStyle}\n            .active=${key === column.key && index === this.index}\n            .editing=${editing}\n            .column=${column}\n            .row=${this as ApexGridRow<T>}\n            .value=${this.data[column.key]}\n            .colindex=${ariaColindex}\n          ></apex-grid-cell>`;\n        }\n      )}\n      ${this.renderDetailPanel()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ApexGridRow.tagName]: ApexGridRow<object>;\n  }\n}\n"]}

package/components/toolbar.d.ts

@@ -0,0 +1,60 @@
+import { LitElement, nothing } from 'lit';
+import { type StateController } from '../controllers/state.js';
+/**
+ * Toolbar shown above the grid's header row. Hosts opt-in toolbar features
+ * such as the quick-filter (global search) input and the export menu.
+ *
+ * @element apex-grid-toolbar
+ *
+ * @csspart toolbar - The toolbar's container element.
+ * @csspart toolbar-search - The quick-filter input wrapper.
+ * @csspart search-field - The bordered field containing the icon + input.
+ * @csspart search-icon - The leading search icon.
+ * @csspart search-input - The text input itself.
+ * @csspart toolbar-actions - The trailing actions area (right side).
+ * @csspart export-trigger - The export menu trigger button.
+ * @csspart export-menu - The dropdown menu containing export options.
+ * @csspart export-menu-item - A single menu item inside the export dropdown.
+ */
+export default class ApexGridToolbar<T extends object> extends LitElement {
+    #private;
+    static get tagName(): "apex-grid-toolbar";
+    static styles: import("lit").CSSResult;
+    /**
+     * Registers the `<apex-grid-toolbar>` element. Idempotent.
+     */
+    static register(): void;
+    state: StateController<T>;
+    /**
+     * The current quick-filter value, mirrored from {@link ApexGrid.quickFilter}.
+     */
+    value: string;
+    /**
+     * The placeholder rendered in the search input.
+     */
+    placeholder: string;
+    /**
+     * Debounce window (ms) before {@link ApexGrid.quickFilter} updates.
+     */
+    debounce: number;
+    /** Whether to render the quick-filter input. Driven by the parent grid. */
+    showQuickFilter: boolean;
+    /** Whether to render the export menu trigger. Driven by the parent grid. */
+    showExport: boolean;
+    /** Optional override filename (without extension) for exports. */
+    exportFilename: string;
+    protected input: HTMLInputElement;
+    protected exportTrigger: HTMLButtonElement;
+    protected exportMenuEl: HTMLElement;
+    protected exportMenuOpen: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected renderQuickFilter(): typeof nothing | import("lit-html").TemplateResult<1>;
+    protected renderExportMenu(): typeof nothing | import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [ApexGridToolbar.tagName]: ApexGridToolbar<object>;
+    }
+}

package/components/toolbar.js

@@ -0,0 +1,275 @@
+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, query, state } from 'lit/decorators.js';
+import { gridStateContext } from '../controllers/state.js';
+import { renderIcon } from '../internal/icons.js';
+import { registerComponent } from '../internal/register.js';
+import { GRID_TOOLBAR_TAG } from '../internal/tags.js';
+import { styles } from '../styles/toolbar/toolbar.css.js';
+export default class ApexGridToolbar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.placeholder = 'Search…';
+        this.debounce = 200;
+        this.showQuickFilter = true;
+        this.showExport = false;
+        this.exportFilename = 'data';
+        this.exportMenuOpen = false;
+        this.#debounceHandle = null;
+        this.#handleInput = (event) => {
+            event.stopPropagation();
+            const next = event.target.value ?? '';
+            if (this.#debounceHandle)
+                clearTimeout(this.#debounceHandle);
+            if (this.debounce <= 0) {
+                this.#emit(next);
+                return;
+            }
+            this.#debounceHandle = setTimeout(() => {
+                this.#debounceHandle = null;
+                this.#emit(next);
+            }, this.debounce);
+        };
+        this.#handleKeydown = (event) => {
+            event.stopPropagation();
+            if (event.key === 'Escape' && this.input.value) {
+                event.preventDefault();
+                this.input.value = '';
+                if (this.#debounceHandle) {
+                    clearTimeout(this.#debounceHandle);
+                    this.#debounceHandle = null;
+                }
+                this.#emit('');
+            }
+        };
+        this.#toggleExportMenu = (event) => {
+            event?.stopPropagation();
+            this.exportMenuOpen = !this.exportMenuOpen;
+        };
+        this.#handleOutsidePointer = (event) => {
+            if (!this.exportMenuOpen)
+                return;
+            const path = event.composedPath();
+            if (path.includes(this.exportTrigger) || path.includes(this.exportMenuEl))
+                return;
+            this.#closeExportMenu();
+        };
+        this.#handleDocumentKey = (event) => {
+            if (!this.exportMenuOpen)
+                return;
+            if (event.key === 'Escape') {
+                event.stopPropagation();
+                this.#closeExportMenu(true);
+            }
+        };
+        this.#handleExport = (format) => {
+            this.#closeExportMenu();
+            const grid = this.state?.host;
+            if (!grid)
+                return;
+            if (format === 'csv') {
+                grid.exportToCSV({ filename: this.exportFilename });
+            }
+            else {
+                grid.exportToXLSX({ filename: this.exportFilename });
+            }
+        };
+        this.#handleTriggerKeydown = (event) => {
+            if (event.key === 'ArrowDown' || event.key === 'Down') {
+                event.preventDefault();
+                if (!this.exportMenuOpen)
+                    this.exportMenuOpen = true;
+                requestAnimationFrame(() => {
+                    const first = this.exportMenuEl?.querySelector('[role="menuitem"]');
+                    first?.focus();
+                });
+            }
+        };
+        this.#handleMenuKeydown = (event) => {
+            const items = Array.from(this.exportMenuEl?.querySelectorAll('[role="menuitem"]') ?? []);
+            const current = items.indexOf(document.activeElement);
+            if (event.key === 'ArrowDown' || event.key === 'Down') {
+                event.preventDefault();
+                items[(current + 1) % items.length]?.focus();
+            }
+            else if (event.key === 'ArrowUp' || event.key === 'Up') {
+                event.preventDefault();
+                items[(current - 1 + items.length) % items.length]?.focus();
+            }
+            else if (event.key === 'Home') {
+                event.preventDefault();
+                items[0]?.focus();
+            }
+            else if (event.key === 'End') {
+                event.preventDefault();
+                items[items.length - 1]?.focus();
+            }
+            else if (event.key === 'Tab') {
+                this.#closeExportMenu();
+            }
+        };
+    }
+    static get tagName() {
+        return GRID_TOOLBAR_TAG;
+    }
+    static { this.styles = styles; }
+    static register() {
+        registerComponent(ApexGridToolbar);
+    }
+    #debounceHandle;
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('pointerdown', this.#handleOutsidePointer, true);
+        document.addEventListener('keydown', this.#handleDocumentKey, true);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('pointerdown', this.#handleOutsidePointer, true);
+        document.removeEventListener('keydown', this.#handleDocumentKey, true);
+        if (this.#debounceHandle) {
+            clearTimeout(this.#debounceHandle);
+            this.#debounceHandle = null;
+        }
+        super.disconnectedCallback();
+    }
+    #emit(value) {
+        this.dispatchEvent(new CustomEvent('apex-quick-filter', {
+            detail: value,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    #handleInput;
+    #handleKeydown;
+    #toggleExportMenu;
+    #closeExportMenu(returnFocus = false) {
+        if (!this.exportMenuOpen)
+            return;
+        this.exportMenuOpen = false;
+        if (returnFocus) {
+            requestAnimationFrame(() => this.exportTrigger?.focus());
+        }
+    }
+    #handleOutsidePointer;
+    #handleDocumentKey;
+    #handleExport;
+    #handleTriggerKeydown;
+    #handleMenuKeydown;
+    renderQuickFilter() {
+        if (!this.showQuickFilter)
+            return nothing;
+        return html `<div part="toolbar-search">
+      <label part="search-field">
+        ${renderIcon('search', { part: 'search-icon' })}
+        <input
+          part="search-input"
+          type="search"
+          role="searchbox"
+          aria-label=${this.placeholder}
+          placeholder=${this.placeholder}
+          .value=${this.value}
+          @input=${this.#handleInput}
+          @keydown=${this.#handleKeydown}
+        />
+      </label>
+    </div>`;
+    }
+    renderExportMenu() {
+        if (!this.showExport)
+            return nothing;
+        const open = this.exportMenuOpen;
+        return html `<div part="export">
+      <button
+        type="button"
+        part="export-trigger"
+        aria-label="Export"
+        aria-haspopup="menu"
+        aria-expanded=${open ? 'true' : 'false'}
+        @click=${this.#toggleExportMenu}
+        @keydown=${this.#handleTriggerKeydown}
+      >
+        ${renderIcon('download', { part: 'export-icon' })}
+        ${renderIcon('chevron-down', { part: 'export-caret' })}
+      </button>
+      <ul
+        part="export-menu"
+        role="menu"
+        aria-label="Export options"
+        ?hidden=${!open}
+        @keydown=${this.#handleMenuKeydown}
+      >
+        <li role="none">
+          <button
+            type="button"
+            role="menuitem"
+            part="export-menu-item"
+            tabindex="-1"
+            @click=${() => this.#handleExport('csv')}
+          >
+            Export CSV
+          </button>
+        </li>
+        <li role="none">
+          <button
+            type="button"
+            role="menuitem"
+            part="export-menu-item"
+            tabindex="-1"
+            @click=${() => this.#handleExport('xlsx')}
+          >
+            Export XLSX
+          </button>
+        </li>
+      </ul>
+    </div>`;
+    }
+    render() {
+        return html `
+      <div part="toolbar" role="toolbar" aria-label="Grid toolbar">
+        ${this.renderQuickFilter()}
+        <div part="toolbar-actions">${this.renderExportMenu()}</div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    consume({ context: gridStateContext, subscribe: true }),
+    property({ attribute: false })
+], ApexGridToolbar.prototype, "state", void 0);
+__decorate([
+    property({ type: String })
+], ApexGridToolbar.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], ApexGridToolbar.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Number, attribute: 'debounce' })
+], ApexGridToolbar.prototype, "debounce", void 0);
+__decorate([
+    property({ attribute: false, type: Boolean })
+], ApexGridToolbar.prototype, "showQuickFilter", void 0);
+__decorate([
+    property({ attribute: false, type: Boolean })
+], ApexGridToolbar.prototype, "showExport", void 0);
+__decorate([
+    property({ attribute: false, type: String })
+], ApexGridToolbar.prototype, "exportFilename", void 0);
+__decorate([
+    query('input')
+], ApexGridToolbar.prototype, "input", void 0);
+__decorate([
+    query('[part="export-trigger"]')
+], ApexGridToolbar.prototype, "exportTrigger", void 0);
+__decorate([
+    query('[part="export-menu"]')
+], ApexGridToolbar.prototype, "exportMenuEl", void 0);
+__decorate([
+    state()
+], ApexGridToolbar.prototype, "exportMenuOpen", void 0);
+//# sourceMappingURL=toolbar.js.map

package/components/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../src/components/toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport { renderIcon } from '../internal/icons.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_TOOLBAR_TAG } from '../internal/tags.js';\nimport { styles } from '../styles/toolbar/toolbar.css.js';\n\n/**\n * Toolbar shown above the grid's header row. Hosts opt-in toolbar features\n * such as the quick-filter (global search) input and the export menu.\n *\n * @element apex-grid-toolbar\n *\n * @csspart toolbar - The toolbar's container element.\n * @csspart toolbar-search - The quick-filter input wrapper.\n * @csspart search-field - The bordered field containing the icon + input.\n * @csspart search-icon - The leading search icon.\n * @csspart search-input - The text input itself.\n * @csspart toolbar-actions - The trailing actions area (right side).\n * @csspart export-trigger - The export menu trigger button.\n * @csspart export-menu - The dropdown menu containing export options.\n * @csspart export-menu-item - A single menu item inside the export dropdown.\n */\nexport default class ApexGridToolbar<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_TOOLBAR_TAG;\n  }\n\n  public static override styles = styles;\n\n  /**\n   * Registers the `<apex-grid-toolbar>` element. Idempotent.\n   */\n  public static register() {\n    registerComponent(ApexGridToolbar);\n  }\n\n  @consume({ context: gridStateContext, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  /**\n   * The current quick-filter value, mirrored from {@link ApexGrid.quickFilter}.\n   */\n  @property({ type: String })\n  public value = '';\n\n  /**\n   * The placeholder rendered in the search input.\n   */\n  @property({ type: String })\n  public placeholder = 'Search…';\n\n  /**\n   * Debounce window (ms) before {@link ApexGrid.quickFilter} updates.\n   */\n  @property({ type: Number, attribute: 'debounce' })\n  public debounce = 200;\n\n  /** Whether to render the quick-filter input. Driven by the parent grid. */\n  @property({ attribute: false, type: Boolean })\n  public showQuickFilter = true;\n\n  /** Whether to render the export menu trigger. Driven by the parent grid. */\n  @property({ attribute: false, type: Boolean })\n  public showExport = false;\n\n  /** Optional override filename (without extension) for exports. */\n  @property({ attribute: false, type: String })\n  public exportFilename = 'data';\n\n  @query('input')\n  protected input!: HTMLInputElement;\n\n  @query('[part=\"export-trigger\"]')\n  protected exportTrigger!: HTMLButtonElement;\n\n  @query('[part=\"export-menu\"]')\n  protected exportMenuEl!: HTMLElement;\n\n  @state()\n  protected exportMenuOpen = false;\n\n  #debounceHandle: ReturnType<typeof setTimeout> | null = null;\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('pointerdown', this.#handleOutsidePointer, true);\n    document.addEventListener('keydown', this.#handleDocumentKey, true);\n  }\n\n  public override disconnectedCallback(): void {\n    document.removeEventListener('pointerdown', this.#handleOutsidePointer, true);\n    document.removeEventListener('keydown', this.#handleDocumentKey, true);\n    if (this.#debounceHandle) {\n      clearTimeout(this.#debounceHandle);\n      this.#debounceHandle = null;\n    }\n    super.disconnectedCallback();\n  }\n\n  #emit(value: string) {\n    this.dispatchEvent(\n      new CustomEvent<string>('apex-quick-filter', {\n        detail: value,\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  #handleInput = (event: Event) => {\n    event.stopPropagation();\n    const next = (event.target as HTMLInputElement).value ?? '';\n    if (this.#debounceHandle) clearTimeout(this.#debounceHandle);\n\n    if (this.debounce <= 0) {\n      this.#emit(next);\n      return;\n    }\n\n    this.#debounceHandle = setTimeout(() => {\n      this.#debounceHandle = null;\n      this.#emit(next);\n    }, this.debounce);\n  };\n\n  #handleKeydown = (event: KeyboardEvent) => {\n    // Don't let arrow keys bubble into the grid navigation controller.\n    event.stopPropagation();\n    if (event.key === 'Escape' && this.input.value) {\n      event.preventDefault();\n      this.input.value = '';\n      if (this.#debounceHandle) {\n        clearTimeout(this.#debounceHandle);\n        this.#debounceHandle = null;\n      }\n      this.#emit('');\n    }\n  };\n\n  #toggleExportMenu = (event?: Event) => {\n    event?.stopPropagation();\n    this.exportMenuOpen = !this.exportMenuOpen;\n  };\n\n  #closeExportMenu(returnFocus = false) {\n    if (!this.exportMenuOpen) return;\n    this.exportMenuOpen = false;\n    if (returnFocus) {\n      // Return focus to the trigger so keyboard users don't lose their place.\n      requestAnimationFrame(() => this.exportTrigger?.focus());\n    }\n  }\n\n  #handleOutsidePointer = (event: PointerEvent) => {\n    if (!this.exportMenuOpen) return;\n    const path = event.composedPath();\n    if (path.includes(this.exportTrigger) || path.includes(this.exportMenuEl)) return;\n    this.#closeExportMenu();\n  };\n\n  #handleDocumentKey = (event: KeyboardEvent) => {\n    if (!this.exportMenuOpen) return;\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.#closeExportMenu(true);\n    }\n  };\n\n  #handleExport = (format: 'csv' | 'xlsx') => {\n    this.#closeExportMenu();\n    const grid = this.state?.host;\n    if (!grid) return;\n    if (format === 'csv') {\n      grid.exportToCSV({ filename: this.exportFilename });\n    } else {\n      grid.exportToXLSX({ filename: this.exportFilename });\n    }\n  };\n\n  /** Lets keyboard users land in the menu when it opens via arrow-down. */\n  #handleTriggerKeydown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowDown' || event.key === 'Down') {\n      event.preventDefault();\n      if (!this.exportMenuOpen) this.exportMenuOpen = true;\n      requestAnimationFrame(() => {\n        const first = this.exportMenuEl?.querySelector<HTMLElement>('[role=\"menuitem\"]');\n        first?.focus();\n      });\n    }\n  };\n\n  #handleMenuKeydown = (event: KeyboardEvent) => {\n    const items = Array.from(\n      this.exportMenuEl?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]') ?? []\n    );\n    const current = items.indexOf(document.activeElement as HTMLElement);\n    if (event.key === 'ArrowDown' || event.key === 'Down') {\n      event.preventDefault();\n      items[(current + 1) % items.length]?.focus();\n    } else if (event.key === 'ArrowUp' || event.key === 'Up') {\n      event.preventDefault();\n      items[(current - 1 + items.length) % items.length]?.focus();\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      items[0]?.focus();\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      items[items.length - 1]?.focus();\n    } else if (event.key === 'Tab') {\n      // Tab closes the menu so focus moves naturally to the next focusable.\n      this.#closeExportMenu();\n    }\n  };\n\n  protected renderQuickFilter() {\n    if (!this.showQuickFilter) return nothing;\n    return html`<div part=\"toolbar-search\">\n      <label part=\"search-field\">\n        ${renderIcon('search', { part: 'search-icon' })}\n        <input\n          part=\"search-input\"\n          type=\"search\"\n          role=\"searchbox\"\n          aria-label=${this.placeholder}\n          placeholder=${this.placeholder}\n          .value=${this.value}\n          @input=${this.#handleInput}\n          @keydown=${this.#handleKeydown}\n        />\n      </label>\n    </div>`;\n  }\n\n  protected renderExportMenu() {\n    if (!this.showExport) return nothing;\n    const open = this.exportMenuOpen;\n    return html`<div part=\"export\">\n      <button\n        type=\"button\"\n        part=\"export-trigger\"\n        aria-label=\"Export\"\n        aria-haspopup=\"menu\"\n        aria-expanded=${open ? 'true' : 'false'}\n        @click=${this.#toggleExportMenu}\n        @keydown=${this.#handleTriggerKeydown}\n      >\n        ${renderIcon('download', { part: 'export-icon' })}\n        ${renderIcon('chevron-down', { part: 'export-caret' })}\n      </button>\n      <ul\n        part=\"export-menu\"\n        role=\"menu\"\n        aria-label=\"Export options\"\n        ?hidden=${!open}\n        @keydown=${this.#handleMenuKeydown}\n      >\n        <li role=\"none\">\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            part=\"export-menu-item\"\n            tabindex=\"-1\"\n            @click=${() => this.#handleExport('csv')}\n          >\n            Export CSV\n          </button>\n        </li>\n        <li role=\"none\">\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            part=\"export-menu-item\"\n            tabindex=\"-1\"\n            @click=${() => this.#handleExport('xlsx')}\n          >\n            Export XLSX\n          </button>\n        </li>\n      </ul>\n    </div>`;\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"toolbar\" role=\"toolbar\" aria-label=\"Grid toolbar\">\n        ${this.renderQuickFilter()}\n        <div part=\"toolbar-actions\">${this.renderExportMenu()}</div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ApexGridToolbar.tagName]: ApexGridToolbar<object>;\n  }\n}\n"]}

package/{dist/src/components → components}/virtualizer.d.ts

@@ -1,13 +1,12 @@
 import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';
 export default class ApexVirtualizer extends LitVirtualizer {
-    static get is(): "apex-virtualizer";
+    static get tagName(): "apex-virtualizer";
     static register(): void;
     scroller: boolean;
     connectedCallback(): Promise<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [ApexVirtualizer.is]: ApexVirtualizer;
+        [ApexVirtualizer.tagName]: ApexVirtualizer;
     }
 }
-//# sourceMappingURL=virtualizer.d.ts.map