apex-grid 3.3.0 → 3.5.0

package/components/filter-row.js

@@ -24,13 +24,51 @@ export default class ApexFilterRow extends LitElement {
         this.column = DEFAULT_COLUMN_CONFIG;
         this.#handleDropdownItemClick = (event) => {
             event.stopPropagation();
-            const target = event.target.closest('[data-value]');
-            if (!target)
+            this.#selectOption(event.target.closest('[data-value]'));
+        };
+        this.#handleTriggerKeydown = (event) => {
+            if (event.key !== 'ArrowDown' && event.key !== 'Down')
                 return;
-            const value = target.dataset.value;
-            this.#applyCondition(value);
-            this.dropdownOpen = false;
-            this.input?.focus();
+            event.preventDefault();
+            event.stopPropagation();
+            this.dropdownOpen = true;
+            this.#focusDropdownOption();
+        };
+        this.#handleDropdownKeydown = (event) => {
+            const options = this.#dropdownOptions();
+            const current = options.findIndex((option) => option.matches(':focus'));
+            switch (event.key) {
+                case 'ArrowDown':
+                case 'Down':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    options[Math.min(current + 1, options.length - 1)]?.focus();
+                    return;
+                case 'ArrowUp':
+                case 'Up':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    options[Math.max(current - 1, 0)]?.focus();
+                    return;
+                case 'Home':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    options[0]?.focus();
+                    return;
+                case 'End':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    options[options.length - 1]?.focus();
+                    return;
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.#selectOption(options[current] ?? null);
+                    return;
+                default:
+                    return;
+            }
         };
         this.#handleOutsidePointer = (event) => {
             const path = event.composedPath();
@@ -91,7 +129,26 @@ export default class ApexFilterRow extends LitElement {
         }
         this.requestUpdate();
     }
+    #selectOption(target) {
+        if (!target)
+            return;
+        const value = target.dataset.value;
+        this.#applyCondition(value);
+        this.dropdownOpen = false;
+        this.input?.focus();
+    }
     #handleDropdownItemClick;
+    #dropdownOptions() {
+        return Array.from(this.dropdown?.querySelectorAll('[role="option"]') ?? []);
+    }
+    #focusDropdownOption() {
+        requestAnimationFrame(() => {
+            const options = this.#dropdownOptions();
+            (options.find((option) => option.matches('[aria-selected="true"]')) ?? options[0])?.focus();
+        });
+    }
+    #handleTriggerKeydown;
+    #handleDropdownKeydown;
     #handleOutsidePointer;
     #handleDocumentKey;
     #handleInput(event) {
@@ -271,6 +328,7 @@ export default class ApexFilterRow extends LitElement {
       aria-label=${this.state.localize('filter.conditionList')}
       ?hidden=${!this.dropdownOpen}
       @click=${this.#handleDropdownItemClick}
+      @keydown=${this.#handleDropdownKeydown}
     >
       ${Object.entries(getFilterOperandsFor(this.column)).map(([key, operand]) => html `
           <li
@@ -298,6 +356,7 @@ export default class ApexFilterRow extends LitElement {
       aria-haspopup="listbox"
       aria-expanded=${this.dropdownOpen ? 'true' : 'false'}
       @click=${this.#openDropdownList}
+      @keydown=${this.#handleTriggerKeydown}
     >
       <span>${conditionLabel}</span>
       ${renderIcon('chevron-down')}

package/components/filter-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-row.js","sourceRoot":"","sources":["../../src/components/filter-row.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 type { GridLocaleKey } from '../i18n/index.js';\nimport { DEFAULT_COLUMN_CONFIG } from '../internal/constants.js';\nimport { renderIcon } from '../internal/icons.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_FILTER_ROW_TAG } from '../internal/tags.js';\nimport type { ColumnConfiguration } from '../internal/types.js';\nimport { getFilterOperandsFor } from '../internal/utils.js';\nimport { watch } from '../internal/watch.js';\nimport type { FilterExpression, FilterOperation, OperandKeys } from '../operations/filter/types.js';\nimport { styles } from '../styles/filter-row/filter-row.css.js';\n\ntype ExpressionChipProps<T> = {\n  expression: FilterExpression<T>;\n  selected: boolean;\n  onRemove: (e: Event) => Promise<void>;\n  onSelect: (e: Event) => Promise<void>;\n};\n\nexport default class ApexFilterRow<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_FILTER_ROW_TAG;\n  }\n\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(ApexFilterRow);\n  }\n\n  @consume({ context: gridStateContext, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  protected get isNumeric() {\n    return this.column.type === 'number';\n  }\n\n  protected get filterController() {\n    return this.state.filtering;\n  }\n\n  protected get condition() {\n    return this.expression.condition as FilterOperation<T>;\n  }\n\n  @property({ attribute: false })\n  public active = false;\n\n  /** Bounding rect of the filter icon that opened this panel. Used for positioning. */\n  @property({ attribute: false })\n  public triggerRect: DOMRect | null = null;\n\n  @query('input')\n  public input!: HTMLInputElement;\n\n  @query('#condition')\n  public conditionElement!: HTMLElement;\n\n  @query('[part~=\"dropdown\"]')\n  public dropdown!: HTMLElement;\n\n  @state()\n  protected dropdownOpen = false;\n\n  @property({ attribute: false })\n  public column: ColumnConfiguration<T> = DEFAULT_COLUMN_CONFIG as ColumnConfiguration<T>;\n\n  @property({ attribute: false })\n  public expression!: FilterExpression<T>;\n\n  #setDefaultExpression() {\n    this.expression = this.filterController.getDefaultExpression(this.column);\n  }\n\n  #removeExpression(expression: FilterExpression<T>) {\n    this.filterController.removeExpression(expression);\n  }\n\n  #applyCondition(key: OperandKeys<T[typeof this.column.key]>) {\n    // XXX: Types\n    this.expression.condition = (getFilterOperandsFor(this.column) as any)[key] as FilterOperation<\n      T[keyof T]\n    >;\n\n    if (this.input?.value || this.expression.condition.unary) {\n      this.filterController.filterWithEvent(this.expression, 'modify');\n    }\n\n    this.requestUpdate();\n  }\n\n  #handleDropdownItemClick = (event: Event) => {\n    event.stopPropagation();\n    const target = (event.target as HTMLElement).closest<HTMLElement>('[data-value]');\n    if (!target) return;\n    const value = target.dataset.value as OperandKeys<T[typeof this.column.key]>;\n    this.#applyCondition(value);\n    this.dropdownOpen = false;\n    this.input?.focus();\n  };\n\n  #handleOutsidePointer = (event: PointerEvent) => {\n    const path = event.composedPath();\n\n    // Close the condition dropdown if clicking outside it.\n    if (this.dropdownOpen) {\n      if (!path.includes(this.dropdown) && !path.includes(this.conditionElement)) {\n        this.dropdownOpen = false;\n      }\n      return;\n    }\n\n    // Close the whole panel if clicking outside it.\n    if (this.active && !path.includes(this)) {\n      this.active = false;\n    }\n  };\n\n  #handleDocumentKey = (event: KeyboardEvent) => {\n    if (event.key !== 'Escape') return;\n\n    if (this.dropdownOpen) {\n      event.stopPropagation();\n      this.dropdownOpen = false;\n      this.conditionElement?.focus();\n      return;\n    }\n\n    if (this.active) {\n      event.stopPropagation();\n      this.active = false;\n    }\n  };\n\n  #handleInput(event: Event) {\n    event.stopPropagation();\n\n    const raw = (event.target as HTMLInputElement).value ?? '';\n    const value = this.isNumeric ? Number.parseFloat(raw) : raw;\n    const shouldUpdate = this.isNumeric ? !Number.isNaN(value as number) : !!value;\n    const type = this.filterController.get(this.expression.key)?.has(this.expression)\n      ? 'modify'\n      : 'add';\n\n    if (shouldUpdate) {\n      this.expression.searchTerm = value as any;\n      this.filterController.filterWithEvent(this.expression, type);\n    } else {\n      this.#removeExpression(this.expression);\n    }\n\n    this.requestUpdate();\n  }\n\n  #handleKeydown(event: KeyboardEvent) {\n    event.stopPropagation();\n\n    switch (event.key) {\n      case 'Enter':\n        if (this.input) this.input.value = '';\n        this.#setDefaultExpression();\n        return;\n      case 'Escape':\n        this.active = false;\n        return;\n      default:\n        return;\n    }\n  }\n\n  #handleResetClick() {\n    this.filterController.removeAllExpressions(this.column.key);\n    this.#setDefaultExpression();\n    this.requestUpdate();\n  }\n\n  #openDropdownList = () => {\n    this.dropdownOpen = !this.dropdownOpen;\n  };\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    super.disconnectedCallback();\n  }\n\n  @watch('active', { waitUntilFirstUpdate: true })\n  protected async activeChanged() {\n    if (this.active && this.triggerRect) {\n      const panelWidth = 240;\n      const viewportWidth = window.innerWidth;\n      let left = this.triggerRect.left;\n      // Clamp so the panel doesn't overflow the right edge of the viewport.\n      if (left + panelWidth > viewportWidth - 8) {\n        left = Math.max(8, viewportWidth - panelWidth - 8);\n      }\n      this.style.setProperty('--fp-top', `${this.triggerRect.bottom + 4}px`);\n      this.style.setProperty('--fp-left', `${left}px`);\n      this.setAttribute('data-active', '');\n      await this.updateComplete;\n      this.input?.select();\n    } else {\n      this.removeAttribute('data-active');\n      this.style.removeProperty('--fp-top');\n      this.style.removeProperty('--fp-left');\n      this.column = DEFAULT_COLUMN_CONFIG as ColumnConfiguration<T>;\n    }\n\n    this.state.host.requestUpdate();\n  }\n\n  #chipCriteriaFor(expression: FilterExpression<T>) {\n    return async (e: Event) => {\n      e.stopPropagation();\n      expression.criteria = expression.criteria === 'and' ? 'or' : 'and';\n      this.filterController.filterWithEvent(expression, 'modify');\n      this.requestUpdate();\n    };\n  }\n\n  #chipSelectFor(expression: FilterExpression<T>) {\n    return async (e: Event) => {\n      e.stopPropagation();\n      this.expression = expression;\n      await this.updateComplete;\n      this.input?.select();\n    };\n  }\n\n  #chipRemoveFor(expression: FilterExpression<T>) {\n    return async (e: Event) => {\n      e.stopPropagation();\n      this.#removeExpression(expression);\n\n      if (this.active && this.expression === expression) {\n        this.#setDefaultExpression();\n        await this.updateComplete;\n        this.input?.focus();\n      }\n\n      this.requestUpdate();\n    };\n  }\n\n  protected renderCriteriaButton(expr: FilterExpression<T>, index: number) {\n    return index\n      ? html`<button\n          type=\"button\"\n          part=\"criteria\"\n          @click=${this.#chipCriteriaFor(expr)}\n        >\n          ${expr.criteria}\n        </button>`\n      : nothing;\n  }\n\n  protected renderExpressionChip(props: ExpressionChipProps<T>) {\n    const { name, unary } = props.expression.condition as FilterOperation<T>;\n    const { searchTerm: term } = props.expression;\n\n    return html`<div\n      part=\"expression-chip\"\n      ?selected=${props.selected}\n    >\n      <button\n        part=\"chip-body\"\n        type=\"button\"\n        @click=${props.onSelect}\n      >\n        ${renderIcon(name)}\n        <span>${unary ? name : term}</span>\n      </button>\n      <button\n        part=\"chip-remove\"\n        type=\"button\"\n        aria-label=${this.state.localize('filter.removeFilter')}\n        @click=${props.onRemove}\n      >\n        ${renderIcon('close')}\n      </button>\n    </div>`;\n  }\n\n  protected renderActiveChips() {\n    const state = this.filterController.get(this.column.key);\n\n    return !state\n      ? nothing\n      : Array.from(state).map((expression, idx) => {\n          const props: ExpressionChipProps<T> = {\n            expression,\n            selected: this.expression === expression,\n            onRemove: this.#chipRemoveFor(expression),\n            onSelect: this.#chipSelectFor(expression),\n          };\n\n          return html`${this.renderCriteriaButton(expression, idx)}${this.renderExpressionChip(\n            props\n          )}`;\n        });\n  }\n\n  protected renderFilterActions() {\n    return html`\n      <button\n        id=\"reset\"\n        type=\"button\"\n        part=\"action\"\n        @click=${this.#handleResetClick}\n      >\n        ${renderIcon('refresh')} ${this.state.localize('filter.reset')}\n      </button>\n      <button\n        id=\"close\"\n        type=\"button\"\n        part=\"action\"\n        @click=${() => {\n          this.active = false;\n        }}\n      >\n        ${renderIcon('close')} ${this.state.localize('filter.close')}\n      </button>\n    `;\n  }\n\n  protected renderDropdown() {\n    return html`<ul\n      part=\"dropdown\"\n      role=\"listbox\"\n      aria-label=${this.state.localize('filter.conditionList')}\n      ?hidden=${!this.dropdownOpen}\n      @click=${this.#handleDropdownItemClick}\n    >\n      ${Object.entries(getFilterOperandsFor(this.column)).map(\n        ([key, operand]) => html`\n          <li\n            part=\"dropdown-item\"\n            role=\"option\"\n            tabindex=\"-1\"\n            data-value=${key}\n            aria-selected=${this.condition.name === key}\n            ?selected=${this.condition.name === key}\n          >\n            ${renderIcon(key)}<span\n              >${this.state.localize(\n                `filter.operator.${key}` as GridLocaleKey,\n                undefined,\n                operand?.label ?? key\n              )}</span\n            >\n          </li>\n        `\n      )}\n    </ul>`;\n  }\n\n  protected renderDropdownTarget() {\n    const conditionLabel = this.state.localize(\n      `filter.operator.${this.condition.name}` as GridLocaleKey,\n      undefined,\n      (this.condition as FilterOperation<T>).label ?? this.condition.name\n    );\n    return html`<button\n      id=\"condition\"\n      type=\"button\"\n      part=\"condition-trigger\"\n      aria-label=${this.state.localize('filter.changeCondition')}\n      aria-haspopup=\"listbox\"\n      aria-expanded=${this.dropdownOpen ? 'true' : 'false'}\n      @click=${this.#openDropdownList}\n    >\n      <span>${conditionLabel}</span>\n      ${renderIcon('chevron-down')}\n    </button>`;\n  }\n\n  protected renderActiveState() {\n    const hasChips = Boolean(this.filterController.get(this.column.key)?.length);\n    return html`\n      <div part=\"panel\">\n        <div part=\"condition-row\">\n          ${this.renderDropdownTarget()}\n          ${this.renderDropdown()}\n        </div>\n        ${\n          !this.condition.unary\n            ? html`<div part=\"panel-input-row\">\n              <input\n                part=\"filter-input\"\n                type=\"text\"\n                .value=${(this.expression?.searchTerm as string) ?? ''}\n                placeholder=${this.state.localize('filter.inputPlaceholder')}\n                @input=${this.#handleInput}\n                @keydown=${this.#handleKeydown}\n              />\n            </div>`\n            : nothing\n        }\n        ${hasChips ? html`<div part=\"chips-row\">${this.renderActiveChips()}</div>` : nothing}\n        <div part=\"panel-footer\">${this.renderFilterActions()}</div>\n      </div>\n    `;\n  }\n\n  protected override render() {\n    return html`${this.active ? this.renderActiveState() : nothing}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ApexFilterRow.tagName]: ApexFilterRow<object>;\n  }\n}\n"]}
+{"version":3,"file":"filter-row.js","sourceRoot":"","sources":["../../src/components/filter-row.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 type { GridLocaleKey } from '../i18n/index.js';\nimport { DEFAULT_COLUMN_CONFIG } from '../internal/constants.js';\nimport { renderIcon } from '../internal/icons.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_FILTER_ROW_TAG } from '../internal/tags.js';\nimport type { ColumnConfiguration } from '../internal/types.js';\nimport { getFilterOperandsFor } from '../internal/utils.js';\nimport { watch } from '../internal/watch.js';\nimport type { FilterExpression, FilterOperation, OperandKeys } from '../operations/filter/types.js';\nimport { styles } from '../styles/filter-row/filter-row.css.js';\n\ntype ExpressionChipProps<T> = {\n  expression: FilterExpression<T>;\n  selected: boolean;\n  onRemove: (e: Event) => Promise<void>;\n  onSelect: (e: Event) => Promise<void>;\n};\n\nexport default class ApexFilterRow<T extends object> extends LitElement {\n  public static get tagName() {\n    return GRID_FILTER_ROW_TAG;\n  }\n\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(ApexFilterRow);\n  }\n\n  @consume({ context: gridStateContext, subscribe: true })\n  @property({ attribute: false })\n  public state!: StateController<T>;\n\n  protected get isNumeric() {\n    return this.column.type === 'number';\n  }\n\n  protected get filterController() {\n    return this.state.filtering;\n  }\n\n  protected get condition() {\n    return this.expression.condition as FilterOperation<T>;\n  }\n\n  @property({ attribute: false })\n  public active = false;\n\n  /** Bounding rect of the filter icon that opened this panel. Used for positioning. */\n  @property({ attribute: false })\n  public triggerRect: DOMRect | null = null;\n\n  @query('input')\n  public input!: HTMLInputElement;\n\n  @query('#condition')\n  public conditionElement!: HTMLElement;\n\n  @query('[part~=\"dropdown\"]')\n  public dropdown!: HTMLElement;\n\n  @state()\n  protected dropdownOpen = false;\n\n  @property({ attribute: false })\n  public column: ColumnConfiguration<T> = DEFAULT_COLUMN_CONFIG as ColumnConfiguration<T>;\n\n  @property({ attribute: false })\n  public expression!: FilterExpression<T>;\n\n  #setDefaultExpression() {\n    this.expression = this.filterController.getDefaultExpression(this.column);\n  }\n\n  #removeExpression(expression: FilterExpression<T>) {\n    this.filterController.removeExpression(expression);\n  }\n\n  #applyCondition(key: OperandKeys<T[typeof this.column.key]>) {\n    // XXX: Types\n    this.expression.condition = (getFilterOperandsFor(this.column) as any)[key] as FilterOperation<\n      T[keyof T]\n    >;\n\n    if (this.input?.value || this.expression.condition.unary) {\n      this.filterController.filterWithEvent(this.expression, 'modify');\n    }\n\n    this.requestUpdate();\n  }\n\n  #selectOption(target: HTMLElement | null) {\n    if (!target) return;\n    const value = target.dataset.value as OperandKeys<T[typeof this.column.key]>;\n    this.#applyCondition(value);\n    this.dropdownOpen = false;\n    this.input?.focus();\n  }\n\n  #handleDropdownItemClick = (event: Event) => {\n    event.stopPropagation();\n    this.#selectOption((event.target as HTMLElement).closest<HTMLElement>('[data-value]'));\n  };\n\n  #dropdownOptions(): HTMLElement[] {\n    return Array.from(this.dropdown?.querySelectorAll<HTMLElement>('[role=\"option\"]') ?? []);\n  }\n\n  /** Moves focus into the dropdown, landing on the selected (or first) option. */\n  #focusDropdownOption() {\n    requestAnimationFrame(() => {\n      const options = this.#dropdownOptions();\n      (options.find((option) => option.matches('[aria-selected=\"true\"]')) ?? options[0])?.focus();\n    });\n  }\n\n  /** ArrowDown on the condition trigger opens the listbox and focuses into it. */\n  #handleTriggerKeydown = (event: KeyboardEvent) => {\n    if (event.key !== 'ArrowDown' && event.key !== 'Down') return;\n    event.preventDefault();\n    event.stopPropagation();\n    this.dropdownOpen = true;\n    this.#focusDropdownOption();\n  };\n\n  /** Listbox keyboard pattern: arrows/Home/End rove, Enter/Space pick. */\n  #handleDropdownKeydown = (event: KeyboardEvent) => {\n    const options = this.#dropdownOptions();\n    const current = options.findIndex((option) => option.matches(':focus'));\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'Down':\n        event.preventDefault();\n        event.stopPropagation();\n        options[Math.min(current + 1, options.length - 1)]?.focus();\n        return;\n      case 'ArrowUp':\n      case 'Up':\n        event.preventDefault();\n        event.stopPropagation();\n        options[Math.max(current - 1, 0)]?.focus();\n        return;\n      case 'Home':\n        event.preventDefault();\n        event.stopPropagation();\n        options[0]?.focus();\n        return;\n      case 'End':\n        event.preventDefault();\n        event.stopPropagation();\n        options[options.length - 1]?.focus();\n        return;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        event.stopPropagation();\n        this.#selectOption(options[current] ?? null);\n        return;\n      default:\n        return;\n    }\n  };\n\n  #handleOutsidePointer = (event: PointerEvent) => {\n    const path = event.composedPath();\n\n    // Close the condition dropdown if clicking outside it.\n    if (this.dropdownOpen) {\n      if (!path.includes(this.dropdown) && !path.includes(this.conditionElement)) {\n        this.dropdownOpen = false;\n      }\n      return;\n    }\n\n    // Close the whole panel if clicking outside it.\n    if (this.active && !path.includes(this)) {\n      this.active = false;\n    }\n  };\n\n  #handleDocumentKey = (event: KeyboardEvent) => {\n    if (event.key !== 'Escape') return;\n\n    if (this.dropdownOpen) {\n      event.stopPropagation();\n      this.dropdownOpen = false;\n      this.conditionElement?.focus();\n      return;\n    }\n\n    if (this.active) {\n      event.stopPropagation();\n      this.active = false;\n    }\n  };\n\n  #handleInput(event: Event) {\n    event.stopPropagation();\n\n    const raw = (event.target as HTMLInputElement).value ?? '';\n    const value = this.isNumeric ? Number.parseFloat(raw) : raw;\n    const shouldUpdate = this.isNumeric ? !Number.isNaN(value as number) : !!value;\n    const type = this.filterController.get(this.expression.key)?.has(this.expression)\n      ? 'modify'\n      : 'add';\n\n    if (shouldUpdate) {\n      this.expression.searchTerm = value as any;\n      this.filterController.filterWithEvent(this.expression, type);\n    } else {\n      this.#removeExpression(this.expression);\n    }\n\n    this.requestUpdate();\n  }\n\n  #handleKeydown(event: KeyboardEvent) {\n    event.stopPropagation();\n\n    switch (event.key) {\n      case 'Enter':\n        if (this.input) this.input.value = '';\n        this.#setDefaultExpression();\n        return;\n      case 'Escape':\n        this.active = false;\n        return;\n      default:\n        return;\n    }\n  }\n\n  #handleResetClick() {\n    this.filterController.removeAllExpressions(this.column.key);\n    this.#setDefaultExpression();\n    this.requestUpdate();\n  }\n\n  #openDropdownList = () => {\n    this.dropdownOpen = !this.dropdownOpen;\n  };\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    super.disconnectedCallback();\n  }\n\n  @watch('active', { waitUntilFirstUpdate: true })\n  protected async activeChanged() {\n    if (this.active && this.triggerRect) {\n      const panelWidth = 240;\n      const viewportWidth = window.innerWidth;\n      let left = this.triggerRect.left;\n      // Clamp so the panel doesn't overflow the right edge of the viewport.\n      if (left + panelWidth > viewportWidth - 8) {\n        left = Math.max(8, viewportWidth - panelWidth - 8);\n      }\n      this.style.setProperty('--fp-top', `${this.triggerRect.bottom + 4}px`);\n      this.style.setProperty('--fp-left', `${left}px`);\n      this.setAttribute('data-active', '');\n      await this.updateComplete;\n      this.input?.select();\n    } else {\n      this.removeAttribute('data-active');\n      this.style.removeProperty('--fp-top');\n      this.style.removeProperty('--fp-left');\n      this.column = DEFAULT_COLUMN_CONFIG as ColumnConfiguration<T>;\n    }\n\n    this.state.host.requestUpdate();\n  }\n\n  #chipCriteriaFor(expression: FilterExpression<T>) {\n    return async (e: Event) => {\n      e.stopPropagation();\n      expression.criteria = expression.criteria === 'and' ? 'or' : 'and';\n      this.filterController.filterWithEvent(expression, 'modify');\n      this.requestUpdate();\n    };\n  }\n\n  #chipSelectFor(expression: FilterExpression<T>) {\n    return async (e: Event) => {\n      e.stopPropagation();\n      this.expression = expression;\n      await this.updateComplete;\n      this.input?.select();\n    };\n  }\n\n  #chipRemoveFor(expression: FilterExpression<T>) {\n    return async (e: Event) => {\n      e.stopPropagation();\n      this.#removeExpression(expression);\n\n      if (this.active && this.expression === expression) {\n        this.#setDefaultExpression();\n        await this.updateComplete;\n        this.input?.focus();\n      }\n\n      this.requestUpdate();\n    };\n  }\n\n  protected renderCriteriaButton(expr: FilterExpression<T>, index: number) {\n    return index\n      ? html`<button\n          type=\"button\"\n          part=\"criteria\"\n          @click=${this.#chipCriteriaFor(expr)}\n        >\n          ${expr.criteria}\n        </button>`\n      : nothing;\n  }\n\n  protected renderExpressionChip(props: ExpressionChipProps<T>) {\n    const { name, unary } = props.expression.condition as FilterOperation<T>;\n    const { searchTerm: term } = props.expression;\n\n    return html`<div\n      part=\"expression-chip\"\n      ?selected=${props.selected}\n    >\n      <button\n        part=\"chip-body\"\n        type=\"button\"\n        @click=${props.onSelect}\n      >\n        ${renderIcon(name)}\n        <span>${unary ? name : term}</span>\n      </button>\n      <button\n        part=\"chip-remove\"\n        type=\"button\"\n        aria-label=${this.state.localize('filter.removeFilter')}\n        @click=${props.onRemove}\n      >\n        ${renderIcon('close')}\n      </button>\n    </div>`;\n  }\n\n  protected renderActiveChips() {\n    const state = this.filterController.get(this.column.key);\n\n    return !state\n      ? nothing\n      : Array.from(state).map((expression, idx) => {\n          const props: ExpressionChipProps<T> = {\n            expression,\n            selected: this.expression === expression,\n            onRemove: this.#chipRemoveFor(expression),\n            onSelect: this.#chipSelectFor(expression),\n          };\n\n          return html`${this.renderCriteriaButton(expression, idx)}${this.renderExpressionChip(\n            props\n          )}`;\n        });\n  }\n\n  protected renderFilterActions() {\n    return html`\n      <button\n        id=\"reset\"\n        type=\"button\"\n        part=\"action\"\n        @click=${this.#handleResetClick}\n      >\n        ${renderIcon('refresh')} ${this.state.localize('filter.reset')}\n      </button>\n      <button\n        id=\"close\"\n        type=\"button\"\n        part=\"action\"\n        @click=${() => {\n          this.active = false;\n        }}\n      >\n        ${renderIcon('close')} ${this.state.localize('filter.close')}\n      </button>\n    `;\n  }\n\n  protected renderDropdown() {\n    return html`<ul\n      part=\"dropdown\"\n      role=\"listbox\"\n      aria-label=${this.state.localize('filter.conditionList')}\n      ?hidden=${!this.dropdownOpen}\n      @click=${this.#handleDropdownItemClick}\n      @keydown=${this.#handleDropdownKeydown}\n    >\n      ${Object.entries(getFilterOperandsFor(this.column)).map(\n        ([key, operand]) => html`\n          <li\n            part=\"dropdown-item\"\n            role=\"option\"\n            tabindex=\"-1\"\n            data-value=${key}\n            aria-selected=${this.condition.name === key}\n            ?selected=${this.condition.name === key}\n          >\n            ${renderIcon(key)}<span\n              >${this.state.localize(\n                `filter.operator.${key}` as GridLocaleKey,\n                undefined,\n                operand?.label ?? key\n              )}</span\n            >\n          </li>\n        `\n      )}\n    </ul>`;\n  }\n\n  protected renderDropdownTarget() {\n    const conditionLabel = this.state.localize(\n      `filter.operator.${this.condition.name}` as GridLocaleKey,\n      undefined,\n      (this.condition as FilterOperation<T>).label ?? this.condition.name\n    );\n    return html`<button\n      id=\"condition\"\n      type=\"button\"\n      part=\"condition-trigger\"\n      aria-label=${this.state.localize('filter.changeCondition')}\n      aria-haspopup=\"listbox\"\n      aria-expanded=${this.dropdownOpen ? 'true' : 'false'}\n      @click=${this.#openDropdownList}\n      @keydown=${this.#handleTriggerKeydown}\n    >\n      <span>${conditionLabel}</span>\n      ${renderIcon('chevron-down')}\n    </button>`;\n  }\n\n  protected renderActiveState() {\n    const hasChips = Boolean(this.filterController.get(this.column.key)?.length);\n    return html`\n      <div part=\"panel\">\n        <div part=\"condition-row\">\n          ${this.renderDropdownTarget()}\n          ${this.renderDropdown()}\n        </div>\n        ${\n          !this.condition.unary\n            ? html`<div part=\"panel-input-row\">\n              <input\n                part=\"filter-input\"\n                type=\"text\"\n                .value=${(this.expression?.searchTerm as string) ?? ''}\n                placeholder=${this.state.localize('filter.inputPlaceholder')}\n                @input=${this.#handleInput}\n                @keydown=${this.#handleKeydown}\n              />\n            </div>`\n            : nothing\n        }\n        ${hasChips ? html`<div part=\"chips-row\">${this.renderActiveChips()}</div>` : nothing}\n        <div part=\"panel-footer\">${this.renderFilterActions()}</div>\n      </div>\n    `;\n  }\n\n  protected override render() {\n    return html`${this.active ? this.renderActiveState() : nothing}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ApexFilterRow.tagName]: ApexFilterRow<object>;\n  }\n}\n"]}

package/components/grid.d.ts

@@ -649,6 +649,88 @@ export interface ApexGridEventMap<T extends object> {
      */
     rowSelected: CustomEvent<ApexRowSelectedEvent<T>>;
 }
+/**
+ * Apex grid is a web component for displaying data in a tabular format quick and easy.
+ *
+ * Out of the box it provides row virtualization, sort and filter operations (client and server side),
+ * the ability to template cells and headers and column hiding.
+ *
+ * @remarks
+ * A working, styled grid requires three things:
+ *  1. Register the element: `import 'apex-grid/define'` (or `ApexGrid.register()`).
+ *  2. Give the host element a bounded height, e.g. `apex-grid { height: 480px }` —
+ *     the virtualizer collapses without one.
+ *  3. Do NOT set `display` on the host — the component declares `:host { display: grid }`
+ *     internally and any override breaks the track layout.
+ *
+ * The grid is styled out of the box through `--ag-*` CSS custom properties —
+ * there is no theme to import and no `configureTheme()` call. Override `--ag-*`
+ * tokens on the host (or any ancestor) to rebrand; where an Ignite UI palette is
+ * present, the brand tokens auto-tint from it. For dark mode, set
+ * the `theme="dark"` attribute on the host for the built-in slate dark palette
+ * (further `--ag-*` overrides still compose on top). Add `tinted` (e.g.
+ * `theme="tinted"` or `theme="dark tinted"`) to mix the brand into the chrome
+ * so the grid wears its brand even at rest. See the README "Getting Started"
+ * and "Theming" sections for the full example and token list.
+ *
+ * @element apex-grid
+ *
+ * @attr {string} theme - Space-separated theme flags. `dark` opts into the built-in dark palette; `tinted` mixes `--ag-brand` into the chrome surfaces. Combine as `theme="dark tinted"`.
+ *
+ * @fires sorting - Emitted when sorting is initiated through the UI.
+ * @fires sorted - Emitted when a sort operation initiated through the UI has completed.
+ * @fires filtering - Emitted when filtering is initiated through the UI.
+ * @fires filtered - Emitted when a filter operation initiated through the UI has completed.
+ * @fires pageChanging - Cancellable. Emitted before page/page-size changes are applied.
+ * @fires pageChanged - Emitted after a page/page-size change has been applied.
+ * @fires quickFilterChanging - Cancellable. Emitted before a quick-filter value is applied.
+ * @fires quickFilterChanged - Emitted after a quick-filter change has been applied.
+ * @fires columnPinning - Cancellable. Emitted before a column's pin position changes.
+ * @fires columnPinned - Emitted after a column's pin position has changed.
+ * @fires columnMoving - Cancellable. Emitted before a column is moved.
+ * @fires columnMoved - Emitted after a column has been moved.
+ * @fires cellValueChanging - Cancellable. Emitted before a cell value is committed.
+ * @fires cellValueChanged - Emitted after a cell value has been committed.
+ * @fires rowEditStarted - Emitted when a row enters edit mode (row mode only).
+ * @fires rowEditEnded - Emitted when a row leaves edit mode (row mode only).
+ * @fires rowSelecting - Cancellable. Emitted before a selection-set change is applied.
+ * @fires rowSelected - Emitted after a selection-set change has been applied.
+ * @fires rowExpanding - Cancellable. Emitted before the row-expansion set changes (master-detail).
+ * @fires rowExpanded - Emitted after a row-expansion change has been applied.
+ * @fires treeRowExpanding - Cancellable. Emitted before a tree-row expansion change (tree mode).
+ * @fires treeRowExpanded - Emitted after a tree-row expansion change has been applied.
+ *
+ * @csspart live-region - Visually-hidden ARIA live region used for screen-reader announcements.
+ *
+ * @cssprop [--ag-brand] - Brand color for selection, focus rings, and accents. Auto-tints from `--ig-primary-500` where an Ignite UI palette is present.
+ * @cssprop [--ag-brand-strong] - Brand color for hover / pressed states.
+ * @cssprop [--ag-grid-shadow] - Grid edge/shadow override. Default is a flat 1px hairline edge; set to `var(--ag-shadow-card)` for the elevated card look, or `none` to remove it.
+ * @cssprop [--ag-grid-bg] - Host card background. Defaults to a subtle light gradient; override with a flat color (or use `theme="dark"`) for dark themes.
+ * @cssprop [--ag-surface] - Grid card background (must be opaque).
+ * @cssprop [--ag-surface-alt] - Alternating row tint.
+ * @cssprop [--ag-surface-elevated] - Header background.
+ * @cssprop [--ag-hairline] - Header / structural gridline color.
+ * @cssprop [--ag-border] - Row separator color.
+ * @cssprop [--ag-text] - Primary text color.
+ * @cssprop [--ag-text-body] - Row text color.
+ * @cssprop [--ag-text-muted] - Muted text (roles, labels).
+ * @cssprop [--ag-row-hover] - Row hover wash.
+ * @cssprop [--ag-row-h] - Row height.
+ * @cssprop [--ag-header-h] - Header height.
+ * @cssprop [--ag-radius] - Outer card corner radius.
+ * @cssprop [--ag-font] - Grid font family.
+ * @cssprop [--ag-fs-cell] - Cell font size.
+ *
+ * @see {@link https://github.com/apexcharts/apex-grid/blob/main/packages/core/src/styles/_tokens.scss | _tokens.scss} for the complete `--ag-*` token list.
+ *
+ * @fires cellValidationFailed - Emitted when a candidate cell value is rejected by a column validator; the value is not written.
+ * @fires historyChanged - Emitted after the undo / redo stacks change; carries the current `canUndo` / `canRedo`.
+ * @fires stateChanged - Emitted (debounced) whenever the grid's restorable state changes; carries the new `getState` snapshot.
+ * @fires rowPinning - Cancellable. Emitted before a row is pinned, moved between bands, or unpinned.
+ * @fires rowPinned - Emitted after a row's pin state has changed.
+ * @fires rowMoving - Cancellable. Emitted before a row is moved via drag, keyboard, or `moveRow`.
+ * @fires rowMoved - Emitted after a row has been moved.
+ */
 export declare class ApexGrid<T extends object> extends EventEmitterBase<ApexGridEventMap<T>> {
     #private;
     static get tagName(): string;
@@ -1365,6 +1447,51 @@ export declare class ApexGrid<T extends object> extends EventEmitterBase<ApexGri
      * `rowEditEnded` in row mode.
      */
     commitEdit(): Promise<boolean>;
+    /**
+     * Applies many cell edits as a **single** operation.
+     *
+     * Every write goes through the same choke point interactive editing uses, so
+     * each one emits the cancellable `cellValueChanging` and then
+     * `cellValueChanged`, and runs the column's validators. What differs from
+     * calling {@link editCell} + {@link commitEdit} in a loop is that the whole
+     * set lands as one undo step and triggers one pipeline run, which is the
+     * point: a thousand `editCell` round-trips would be a thousand entries in the
+     * undo stack and a thousand re-renders.
+     *
+     * `rowIndex` is view-relative and matches {@link ApexGrid.pageItems}, the same
+     * as {@link editCell}. Edits naming an unknown column, a row index out of
+     * range, or a column the user could not edit either (editing off, not
+     * `editable`, or hidden — the same gate interactive editing uses) are skipped
+     * rather than throwing, so a partially-stale batch still applies what it can.
+     *
+     * @param edits Cells to write. Order is preserved, so later edits to the same
+     * cell win.
+     * @returns A per-outcome tally. `applied` counts cells whose value actually
+     * changed; `unchanged`, `invalid` and `cancelled` explain the rest, so a caller
+     * can tell a rejected batch from a no-op one.
+     *
+     * @example Bulk-clear a column for the rows the user selected
+     * ```ts
+     * grid.applyEdits(
+     *   grid.selectedRows.map((row) => ({
+     *     rowIndex: grid.pageItems.indexOf(row),
+     *     column: 'discount',
+     *     value: 0,
+     *   }))
+     * );
+     * ```
+     */
+    applyEdits(edits: ReadonlyArray<{
+        rowIndex: number;
+        column: Keys<T>;
+        value: unknown;
+    }>): {
+        applied: number;
+        unchanged: number;
+        invalid: number;
+        cancelled: number;
+        skipped: number;
+    };
     /**
      * Discards the current edit without writing back to {@link ApexGrid.data}.
      */
@@ -1506,6 +1633,11 @@ export declare class ApexGrid<T extends object> extends EventEmitterBase<ApexGri
     moveColumn(fromKey: Keys<T>, toKey: Keys<T>, position?: ColumnDropPosition): Promise<boolean>;
     protected bodyClickHandler(event: MouseEvent): void;
     protected bodyKeydownHandler(event: KeyboardEvent): void;
+    /**
+     * Tabbing into the grid body lands on the scroll container; forward focus to
+     * the active cell (when one exists) so the roving tab stop is honored.
+     */
+    protected bodyFocusHandler(event: FocusEvent): void;
     /**
      * Forwards body-cell pointer interactions (press / drag-over / release) to
      * feature modules via {@link StateController.handleCellInteraction}. Gated on

package/components/grid.js

@@ -12,7 +12,7 @@ import { DataOperationsController } from '../controllers/data-operation.js';
 import { GridDOMController } from '../controllers/dom.js';
 import { gridStateContext, StateController } from '../controllers/state.js';
 import { localize as resolveLocaleText, } from '../i18n/index.js';
-import { DEFAULT_COLUMN_CONFIG, PIPELINE } from '../internal/constants.js';
+import { DEFAULT_COLUMN_CONFIG, PIPELINE, SENTINEL_NODE } from '../internal/constants.js';
 import { buildCSV, downloadBlob, } from '../internal/export.js';
 import { EventEmitterBase } from '../internal/mixins/event-emitter.js';
 import { registerComponent } from '../internal/register.js';
@@ -68,6 +68,7 @@ export class ApexGrid extends EventEmitterBase {
         this.columnSeparator = true;
         this.coordinateHints = false;
         this.columnMenu = true;
+        this.#autoAriaLabel = null;
         this.#stateChangedListeners = 0;
         this.#lastStateJson = null;
     }
@@ -271,8 +272,28 @@ export class ApexGrid extends EventEmitterBase {
         const extras = (this.stateController.selection.showCheckboxColumn ? 1 : 0) +
             (this.stateController.expansion.showToggleColumn ? 1 : 0);
         this.setAttribute('aria-colcount', String(visibleColumns + extras));
+        const selection = this.stateController.selection;
+        if (selection.enabled && selection.mode === 'multiple') {
+            this.setAttribute('aria-multiselectable', 'true');
+        }
+        else {
+            this.removeAttribute('aria-multiselectable');
+        }
+        if (this.scrollContainer) {
+            this.scrollContainer.tabIndex = this.stateController.active === SENTINEL_NODE ? 0 : -1;
+        }
+        const currentLabel = this.getAttribute('aria-label');
+        const authorLabeled = this.hasAttribute('aria-labelledby') ||
+            (currentLabel !== null && currentLabel !== this.#autoAriaLabel);
+        if (!authorLabeled) {
+            const label = this.localize('grid.label');
+            if (currentLabel !== label)
+                this.setAttribute('aria-label', label);
+            this.#autoAriaLabel = label;
+        }
         this.#emitStateChangedIfNeeded();
     }
+    #autoAriaLabel;
     #stateChangedListeners;
     #lastStateJson;
     addEventListener(type, listener, options) {
@@ -616,6 +637,31 @@ export class ApexGrid extends EventEmitterBase {
         const editing = this.stateController.editing;
         return editing.mode === 'row' ? editing.commitRow() : editing.commitCell();
     }
+    applyEdits(edits) {
+        const tally = { applied: 0, unchanged: 0, invalid: 0, cancelled: 0, skipped: 0 };
+        if (!edits.length)
+            return tally;
+        const editing = this.stateController.editing;
+        const items = this.pageItems;
+        this.stateController.history.beginBatch();
+        try {
+            for (const { rowIndex, column, value } of edits) {
+                const record = items.at(rowIndex);
+                const config = this.getColumn(column);
+                if (!record || rowIndex < 0 || !config || !editing.isEditable(config)) {
+                    tally.skipped += 1;
+                    continue;
+                }
+                tally[editing.applyCellEdit(rowIndex, column, record, value)] += 1;
+            }
+        }
+        finally {
+            this.stateController.history.endBatch();
+        }
+        if (tally.applied > 0)
+            this.requestUpdate(PIPELINE);
+        return tally;
+    }
     cancelEdit() {
         const editing = this.stateController.editing;
         if (editing.mode === 'row') {
@@ -716,13 +762,23 @@ export class ApexGrid extends EventEmitterBase {
                 column: target.column.key,
                 row: target.row.index,
             };
+            if (!target.editing)
+                target.focus({ preventScroll: true });
         }
     }
     bodyKeydownHandler(event) {
-        if (this.scrollContainer.isSameNode(event.target)) {
+        const origin = event.composedPath()[0];
+        const fromBody = this.scrollContainer.isSameNode(event.target);
+        const fromCell = origin instanceof ApexGridCell && !origin.editing;
+        if (fromBody || fromCell) {
             this.stateController.navigation.navigate(event);
         }
     }
+    bodyFocusHandler(event) {
+        if (this.scrollContainer.isSameNode(event.target)) {
+            this.stateController.navigation.focusActiveCell();
+        }
+    }
     bodyPointerHandler(event) {
         if (this.stateController.modules.size === 0)
             return;
@@ -772,6 +828,7 @@ export class ApexGrid extends EventEmitterBase {
         .renderItem=${this.DOM.rowRenderer}
         @click=${this.bodyClickHandler}
         @keydown=${this.bodyKeydownHandler}
+        @focusin=${this.bodyFocusHandler}
         @pointerdown=${this.bodyPointerHandler}
         @pointermove=${this.bodyPointerHandler}
         @pointerup=${this.bodyPointerHandler}