Rkaraivanov/pre release fixes (#18)

* feat: Pre-release refactoring and fixes

- Refactored auto-generation
- Refactored filter events and behaviors
- Fixed horizontal keyboard navigation
- Updated custom-elements manifest
- Include manifest and meta
- Various bug fixes

Author: rkaraivanov

custom-elements.json

@@ -19,8 +19,14 @@
   "files": [
     "/dist/",
     "/dist/bundle.*",
-    "!/dist/test/"
+    "!/dist/test/",
+    "LICENSE",
+    "README.md",
+    "custom-elements.json"
   ],
+  "engines": {
+    "node": "^14.21.0 || >= 16.19.0"
+  },
   "scripts": {
     "analyze": "cem analyze --litelement --globs \"src/**/*.{js,ts}\" --exclude \"src/styles/**/*\"",
     "build": "npm run build:tsc && npm run dev:vite && npm run typedoc",
@@ -59,36 +65,36 @@
   "dependencies": {
     "@lit-labs/context": "^0.2.0",
     "@lit-labs/virtualizer": "^1.0.1",
-    "igniteui-theming": "^1.2.0",
-    "igniteui-webcomponents": "^4.1.1",
+    "igniteui-theming": "^1.3.0",
+    "igniteui-webcomponents": "^4.2.1",
     "lit": "^2.6.1"
   },
   "devDependencies": {
     "@blockquote/rollup-plugin-total-bundlesize": "^1.0.0",
     "@blockquote/sass-style-template": "3.0.0",
     "@blockquote/test-runner-mocha-style-reporter": "^1.4.1",
     "@custom-elements-manifest/analyzer": "^0.6.8",
-    "@open-wc/eslint-config": "^9.2.0",
+    "@open-wc/eslint-config": "^9.2.2",
     "@open-wc/testing": "^3.1.7",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
+    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@typescript-eslint/parser": "^5.51.0",
     "@web/dev-server": "^0.1.35",
     "@web/test-runner": "^0.15.0",
     "@web/test-runner-playwright": "^0.9.0",
     "concurrently": "^7.6.0",
-    "eslint": "^8.32.0",
+    "eslint": "^8.33.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-log-filenames": "^1.0.6",
     "husky": "^8.0.3",
-    "lint-staged": "^13.1.0",
-    "prettier": "^2.8.3",
+    "lint-staged": "^13.1.1",
+    "prettier": "^2.8.4",
     "sinon": "^15.0.1",
     "stylelint": "^14.16.1",
     "stylelint-config-standard-scss": "^6.1.0",
-    "tslib": "^2.4.1",
+    "tslib": "^2.5.0",
     "typedoc": "^0.23.24",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4"
+    "typescript": "^4.9.5",
+    "vite": "^4.1.1"
   },
   "customElements": "custom-elements.json"
 }

package-lock.json

@@ -6,6 +6,9 @@ import type { ApexCellContext, ColumnConfiguration, PropertyType } from '../inte
 import { styles } from '../styles/body-cell/body-cell-styles.css.js';
 import type ApexGridRow from './row.js';
 
+/**
+ * Component representing a DOM cell of the Apex grid.
+ */
 export default class ApexGridCell<T extends object> extends LitElement {
   public static get is() {
     return GRID_CELL_TAG;
@@ -17,15 +20,28 @@ export default class ApexGridCell<T extends object> extends LitElement {
     registerComponent(this);
   }
 
+  /**
+   * The value which will be rendered by the component.
+   */
   @property({ attribute: false })
   public value!: PropertyType<T>;
 
+  /**
+   * A reference to the column configuration object.
+   */
   @property({ attribute: false })
   public column!: ColumnConfiguration<T>;
 
+  /**
+   * Indicates whether this is the active cell in the grid.
+   *
+   */
   @property({ type: Boolean, reflect: true })
   public active = false;
 
+  /**
+   * The parent row component holding this cell.
+   */
   public row!: ApexGridRow<T>;
 
   protected get context(): ApexCellContext<T> {

package.json

@@ -4,7 +4,7 @@ import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { StateController, gridStateContext } from '../controllers/state.js';
-import { PIPELINE, DEFAULT_COLUMN_CONFIG } from '../internal/constants.js';
+import { DEFAULT_COLUMN_CONFIG } from '../internal/constants.js';
 import { GRID_FILTER_ROW_TAG } from '../internal/tags.js';
 import { getFilterOperandsFor } from '../internal/utils.js';
 import { registerComponent } from '../internal/register.js';
@@ -94,7 +94,7 @@ export default class ApexFilterRow<T extends object> extends LitElement {
     this.active = true;
 
     await this.updateComplete;
-    this.input.select();
+    this.input?.select();
   }
 
   #handleConditionChanged(event: CustomEvent<IgcDropdownItemComponent>) {
@@ -107,7 +107,7 @@ export default class ApexFilterRow<T extends object> extends LitElement {
     >;
 
     if (this.input.value || this.expression.condition.unary) {
-      this.filterController.filterWithEvent(this.expression);
+      this.filterController.filterWithEvent(this.expression, 'modify');
     }
 
     this.requestUpdate();
@@ -118,14 +118,18 @@ export default class ApexFilterRow<T extends object> extends LitElement {
 
     const value = this.isNumeric ? parseFloat(event.detail) : event.detail;
     const shouldUpdate = this.isNumeric ? !isNaN(value as number) : !!value;
+    const type = this.filterController.get(this.expression.key)?.has(this.expression)
+      ? 'modify'
+      : 'add';
 
     if (shouldUpdate) {
       this.expression.searchTerm = value as any;
-      this.filterController.filterWithEvent(this.expression);
+
+      this.filterController.filterWithEvent(this.expression, type);
     } else {
       this.#removeExpression(this.expression);
-      this.state.host.requestUpdate(PIPELINE);
     }
+
     this.requestUpdate();
   }
 
@@ -146,8 +150,7 @@ export default class ApexFilterRow<T extends object> extends LitElement {
   }
 
   #handleResetClick() {
-    this.filterController.reset(this.column.key);
-    this.state.host.requestUpdate(PIPELINE);
+    this.filterController.removeAllExpressions(this.column.key);
     this.requestUpdate();
   }
 
@@ -171,7 +174,7 @@ export default class ApexFilterRow<T extends object> extends LitElement {
       e.stopPropagation();
 
       expression.criteria = expression.criteria === 'and' ? 'or' : 'and';
-      this.filterController.filterWithEvent(expression);
+      this.filterController.filterWithEvent(expression, 'modify');
       this.requestUpdate();
     };
   }
@@ -181,7 +184,7 @@ export default class ApexFilterRow<T extends object> extends LitElement {
       e.stopPropagation();
       this.expression = expression;
       await this.updateComplete;
-      this.input.select();
+      this.input?.select();
     };
   }
 
@@ -196,7 +199,6 @@ export default class ApexFilterRow<T extends object> extends LitElement {
         this.input.focus();
       }
 
-      this.state.host.requestUpdate(PIPELINE);
       this.requestUpdate();
     };
   }

src/components/cell.ts

@@ -10,15 +10,14 @@ import { GridDOMController } from '../controllers/dom.js';
 import { EventEmitterBase } from '../internal/mixins/event-emitter.js';
 import { watch } from '../internal/watch.js';
 import { DEFAULT_COLUMN_CONFIG, PIPELINE } from '../internal/constants.js';
-import { asArray, getFilterOperandsFor } from '../internal/utils.js';
+import { asArray, autoGenerateColumns, getFilterOperandsFor } from '../internal/utils.js';
 
 import type {
   ColumnConfiguration,
-  GridRemoteConfig,
+  DataPipelineConfiguration,
   GridSortConfiguration,
   Keys,
 } from '../internal/types.js';
-import type { FilterExpressionTree } from '../operations/filter/tree.js';
 import type { FilterExpression } from '../operations/filter/types.js';
 import type { SortExpression } from '../operations/sort/types.js';
 
@@ -50,16 +49,42 @@ import {
  */
 export interface ApexFilteringEvent<T extends object> {
   /**
-   * The filter expression to apply.
+   * The target column for the filter operation.
    */
-  // expression: FilterExpression<T>;
+  key: Keys<T>;
+
+  /**
+   * The filter expression(s) to apply.
+   */
+  expressions: FilterExpression<T>[];
+
+  /**
+   * The type of modification which will be applied to the filter
+   * state of the column.
+   *
+   * @remarks
+   * `add` - a new filter expression will be added to the state of the column.
+   * `modify` - an existing filter expression will be modified.
+   * `remove` - the expression(s) will be removed from the state of the column.
+   */
+  type: 'add' | 'modify' | 'remove';
+}
+
+/**
+ * Event object for the filtered event of the grid.
+ */
+export interface ApexFilteredEvent<T extends object> {
   /**
-   * The filter state of the column.
+   * The target column for the filter operation.
    */
-  state: FilterExpressionTree<T>;
+  key: Keys<T>;
+
+  /**
+   * The filter state of the column after the operation.
+   */
+  state: FilterExpression<T>[];
 }
 
-// TODO: Subject to change as these are way too generic names
 /**
  * Events for the apex-grid.
  */
@@ -98,7 +123,7 @@ export interface ApexGridEventMap<T extends object> {
    *
    * @event
    */
-  filtered: CustomEvent<FilterExpressionTree<T>>;
+  filtered: CustomEvent<ApexFilteredEvent<T>>;
 }
 
 /**
@@ -121,7 +146,7 @@ export interface ApexGridEventMap<T extends object> {
   indigo,
   material,
 })
-export default class ApexGrid<T extends object> extends EventEmitterBase<ApexGridEventMap<T>> {
+export class ApexGrid<T extends object> extends EventEmitterBase<ApexGridEventMap<T>> {
   public static get is() {
     return GRID_TAG;
   }
@@ -173,12 +198,23 @@ export default class ApexGrid<T extends object> extends EventEmitterBase<ApexGri
    * data source.
    *
    * @remarks
-   * This is a one-time operation which is executed when the grid is initially added to the DOM.
+   * This is usually executed on initial rendering in the DOM. It depends on having an existing data source
+   * to infer the column configuration for the grid.
    * Passing an empty data source or having a late bound data source (such as a HTTP request) will usually
    * result in empty column configuration for the grid.
    *
    * This property is ignored if any existing column configuration already exists in the grid.
    *
+   * In a scenario where you want to bind a new data source and still keep the auto-generation behavior,
+   * make sure to reset the column collection of the grid before passing in the new data source.
+   *
+   * @example
+   * ```typescript
+   * // assuming autoGenerate is set to true
+   * grid.columns = [];
+   * grid.data = [...];
+   * ```
+   *
    * @attr auto-generate
    */
   @property({ type: Boolean, attribute: 'auto-generate' })
@@ -195,7 +231,7 @@ export default class ApexGrid<T extends object> extends EventEmitterBase<ApexGri
    * Configuration object which controls remote data operations for the grid.
    */
   @property({ attribute: false })
-  public remoteConfiguration?: GridRemoteConfig<T>;
+  public dataPipelineConfiguration!: DataPipelineConfiguration<T>;
 
   /**
    * Set the sort state for the grid.
@@ -268,6 +304,8 @@ export default class ApexGrid<T extends object> extends EventEmitterBase<ApexGri
   @watch('data')
   protected dataChanged() {
     this.dataState = structuredClone(this.data);
+    autoGenerateColumns(this);
+
     if (this.hasUpdated) {
       this.pipeline();
     }

src/components/filter-row.ts

@@ -7,6 +7,9 @@ import type { ActiveNode, ColumnConfiguration } from '../internal/types.js';
 import ApexGridCell from './cell.js';
 import { styles } from '../styles/body-row/body-row-styles.css.js';
 
+/**
+ * Component representing the DOM row in the Apex grid.
+ */
 export default class ApexGridRow<T extends object> extends LitElement {
   public static get is() {
     return GRID_ROW_TAG;

src/components/grid.ts

@@ -15,31 +15,31 @@ export class DataOperationsController<T extends object> implements ReactiveContr
 
   public hostConnected() {}
 
-  protected get hasRemoteSort() {
-    return isDefined(this.host.remoteConfiguration?.sort);
+  protected get hasCustomSort() {
+    return isDefined(this.host.dataPipelineConfiguration?.sort);
   }
 
-  protected get hasRemoteFilter() {
-    return isDefined(this.host.remoteConfiguration?.filter);
+  protected get hasCustomFilter() {
+    return isDefined(this.host.dataPipelineConfiguration?.filter);
   }
 
-  protected get remoteFilter() {
-    return this.host.remoteConfiguration!.filter!;
+  protected get customFilter() {
+    return this.host.dataPipelineConfiguration!.filter!;
   }
 
-  protected get remoteSort() {
-    return this.host.remoteConfiguration!.sort!;
+  protected get customSort() {
+    return this.host.dataPipelineConfiguration!.sort!;
   }
 
   public async apply(data: T[], state: StateController<T>) {
     const { filtering, sorting } = state;
 
-    data = this.hasRemoteFilter
-      ? await this.remoteFilter(data, filtering.state)
+    data = this.hasCustomFilter
+      ? await this.customFilter({ data, grid: this.host, type: 'filter' })
       : this.filtering.apply(data, filtering.state);
 
-    data = this.hasRemoteSort
-      ? await this.remoteSort(data, sorting.state)
+    data = this.hasCustomSort
+      ? await this.customSort({ data, grid: this.host, type: 'sort' })
       : this.sorting.apply(data, sorting.state);
 
     return data;