@tanstack/angular-table 9.0.0-alpha.45 → 9.0.0-alpha.47

package/dist/fesm2022/tanstack-angular-table.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, inject, Directive, reflectComponentType, Injectable, KeyValueDiffers, ChangeDetectorRef, OutputEmitterRef, TemplateRef, Type, runInInjectionContext, computed, effect, untracked, Injector, ViewContainerRef, DestroyRef, signal, assertInInjectionContext } from '@angular/core';
+import { InjectionToken, input, inject, Directive, reflectComponentType, Injectable, KeyValueDiffers, ChangeDetectorRef, OutputEmitterRef, TemplateRef, Type, runInInjectionContext, computed, effect, untracked, Injector, ViewContainerRef, DestroyRef, NgZone, signal, assertInInjectionContext } from '@angular/core';
 import { constructTable, createColumnHelper } from '@tanstack/table-core';
 export * from '@tanstack/table-core';
-import { injectSelector, shallow } from '@tanstack/angular-store';
 import { toObservable } from '@angular/core/rxjs-interop';
+export { shallow } from '@tanstack/angular-store';
 
 /**
  * Injection token that provides access to the current cell.
@@ -55,15 +55,15 @@ class TanStackTableCell {
      * Provided as a required signal input so DI consumers always read the latest value.
      */
     cell = input.required({ ...(ngDevMode ? { debugName: "cell" } : /* istanbul ignore next */ {}), alias: 'tanStackTableCell' });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TanStackTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: TanStackTableCell, isStandalone: true, selector: "[tanStackTableCell]", inputs: { cell: { classPropertyName: "cell", publicName: "tanStackTableCell", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TanStackTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: TanStackTableCell, isStandalone: true, selector: "[tanStackTableCell]", inputs: { cell: { classPropertyName: "cell", publicName: "tanStackTableCell", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             {
                 provide: TanStackTableCellToken,
                 useFactory: () => inject(TanStackTableCell).cell,
             },
         ], exportAs: ["cell"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TanStackTableCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TanStackTableCell, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tanStackTableCell]',
@@ -132,15 +132,15 @@ class TanStackTableHeader {
      * Provided as a required signal input so DI consumers always read the latest value.
      */
     header = input.required({ ...(ngDevMode ? { debugName: "header" } : /* istanbul ignore next */ {}), alias: 'tanStackTableHeader' });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TanStackTableHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: TanStackTableHeader, isStandalone: true, selector: "[tanStackTableHeader]", inputs: { header: { classPropertyName: "header", publicName: "tanStackTableHeader", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TanStackTableHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: TanStackTableHeader, isStandalone: true, selector: "[tanStackTableHeader]", inputs: { header: { classPropertyName: "header", publicName: "tanStackTableHeader", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             {
                 provide: TanStackTableHeaderToken,
                 useFactory: () => inject(TanStackTableHeader).header,
             },
         ], exportAs: ["header"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TanStackTableHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TanStackTableHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tanStackTableHeader]',
@@ -211,15 +211,15 @@ class TanStackTable {
      * Provided as a required signal input so DI consumers always read the latest value.
      */
     table = input.required({ ...(ngDevMode ? { debugName: "table" } : /* istanbul ignore next */ {}), alias: 'tanStackTable' });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TanStackTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: TanStackTable, isStandalone: true, selector: "[tanStackTable]", inputs: { table: { classPropertyName: "table", publicName: "tanStackTable", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TanStackTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: TanStackTable, isStandalone: true, selector: "[tanStackTable]", inputs: { table: { classPropertyName: "table", publicName: "tanStackTable", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             {
                 provide: TanStackTableToken,
                 useFactory: () => inject(TanStackTable).table,
             },
         ], exportAs: ["table"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TanStackTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TanStackTable, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tanStackTable]',
@@ -355,6 +355,10 @@ class FlexRenderComponentInstance {
     }
 }
 
+/**
+ * Creates and manages Angular component instances used by flex-rendered table
+ * content.
+ */
 class FlexRenderComponentFactory {
     #viewContainerRef;
     constructor(viewContainerRef) {
@@ -374,12 +378,18 @@ class FlexRenderComponentFactory {
             view.setOutputs(outputs);
         return view;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FlexRenderComponentFactory, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FlexRenderComponentFactory });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FlexRenderComponentFactory, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FlexRenderComponentFactory });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FlexRenderComponentFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FlexRenderComponentFactory, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
+/**
+ * Runtime wrapper around an Angular component rendered by `FlexRenderDirective`.
+ *
+ * It diffs inputs and outputs across table updates so component renderers can
+ * be reused instead of recreated on every cell/header render.
+ */
 class FlexRenderComponentRef {
     componentRef;
     componentInjector;
@@ -531,6 +541,13 @@ class FlexRenderComponentOutputManager {
     }
 }
 
+/**
+ * Normalizes arbitrary Angular flex-render content into the renderer's internal
+ * tagged representation.
+ *
+ * This lets the directive decide whether to reuse, update, or recreate an
+ * embedded view or component view.
+ */
 function mapToFlexRenderTypedContent(content) {
     if (content === null || content === undefined) {
         return { kind: 'null' };
@@ -570,6 +587,12 @@ class FlexRenderView {
         this.#content = content;
     }
 }
+/**
+ * Tracks an Angular embedded template view rendered by `FlexRenderDirective`.
+ *
+ * Template views receive updated props through their proxied context and can be
+ * reused while the rendered content kind stays compatible.
+ */
 class FlexRenderTemplateView extends FlexRenderView {
     constructor(initialContent, view) {
         super(initialContent, view);
@@ -600,6 +623,12 @@ class FlexRenderTemplateView extends FlexRenderView {
                 this.content.content === compare.content));
     }
 }
+/**
+ * Tracks an Angular component view rendered by `FlexRenderDirective`.
+ *
+ * Component views own input/output updates for `flexRenderComponent(...)`
+ * results and component classes rendered directly from column definitions.
+ */
 class FlexRenderComponentView extends FlexRenderView {
     constructor(initialContent, view) {
         super(initialContent, view);
@@ -955,10 +984,10 @@ class FlexRenderCell {
             renderer.destroy();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FlexRenderCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: FlexRenderCell, isStandalone: true, selector: "ng-template[flexRenderCell], ng-template[flexRenderFooter], ng-template[flexRenderHeader]", inputs: { cell: { classPropertyName: "cell", publicName: "flexRenderCell", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "flexRenderHeader", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "flexRenderFooter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FlexRenderCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: FlexRenderCell, isStandalone: true, selector: "ng-template[flexRenderCell], ng-template[flexRenderFooter], ng-template[flexRenderHeader]", inputs: { cell: { classPropertyName: "cell", publicName: "flexRenderCell", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "flexRenderHeader", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "flexRenderFooter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FlexRenderCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FlexRenderCell, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[flexRenderCell], ng-template[flexRenderFooter], ng-template[flexRenderHeader]',
@@ -1032,10 +1061,10 @@ class FlexRenderDirective {
             renderer.destroy();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FlexRenderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: FlexRenderDirective, isStandalone: true, selector: "ng-template[flexRender]", inputs: { content: { classPropertyName: "content", publicName: "flexRender", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "flexRenderProps", isSignal: true, isRequired: false, transformFunction: null }, injector: { classPropertyName: "injector", publicName: "flexRenderInjector", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FlexRenderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: FlexRenderDirective, isStandalone: true, selector: "ng-template[flexRender]", inputs: { content: { classPropertyName: "content", publicName: "flexRender", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "flexRenderProps", isSignal: true, isRequired: false, transformFunction: null }, injector: { classPropertyName: "injector", publicName: "flexRenderInjector", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FlexRenderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FlexRenderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[flexRender]',
@@ -1105,9 +1134,19 @@ function signalToWritableAtom(signal, injector) {
         },
     });
 }
+/**
+ * Creates the table-core reactivity bindings used by the Angular adapter.
+ *
+ * Readonly table atoms are backed by Angular `computed` signals and writable
+ * atoms by Angular `signal`. Subscriptions bridge through `toObservable` with
+ * the caller's injector so table APIs can be consumed from Angular `computed`
+ * and `effect` calls.
+ */
 function angularReactivity(injector) {
+    const ngZone = injector.get(NgZone);
     return {
         createOptionsStore: true,
+        schedule: (fn) => ngZone.runOutsideAngular(() => queueMicrotask(fn)),
         createReadonlyAtom: (fn, options) => {
             const signal = computed(() => fn(), {
                 equal: options?.compare,
@@ -1183,10 +1222,11 @@ function angularReactivity(injector) {
  *
  * @returns An Angular-reactive TanStack Table instance.
  */
-function injectTable(options, selector) {
+function injectTable(options) {
     assertInInjectionContext(injectTable);
     const injector = inject(Injector);
-    return lazyInit(() => {
+    const ngZone = inject(NgZone);
+    return ngZone.runOutsideAngular(() => lazyInit(() => {
         const table = constructTable({
             ...options(),
             _features: {
@@ -1206,27 +1246,29 @@ function injectTable(options, selector) {
                 ...newOptions,
             })));
         }, { injector, debugName: 'tableOptionsUpdate' });
-        table.computed = function Subscribe(props) {
-            const source = props.source ?? table.store;
-            return injectSelector(source, props.selector, {
-                compare: props.equal ?? shallow,
-                injector,
-            });
-        };
-        Object.defineProperty(table, 'state', {
-            value: computed(() => selector?.(table.store.get()) ?? table.store.get()),
-        });
-        Object.defineProperty(table, 'value', {
-            value: computed(() => {
-                table.store.get();
-                table.optionsStore.get();
-                return table;
-            }, { equal: () => false }),
-        });
         return table;
-    });
+    }));
 }
 
+/**
+ * Creates app-scoped Angular table helpers with features, row models, and
+ * renderable component maps pre-bound.
+ *
+ * Use this when an app or design system wants typed `injectAppTable`,
+ * pre-bound column helpers, and typed table/cell/header context injection
+ * helpers without repeating the same feature and component generics.
+ *
+ * @example
+ * ```ts
+ * const { injectAppTable, createAppColumnHelper } = createTableHook({
+ *   _features,
+ *   _rowModels: {},
+ *   tableComponents: {},
+ *   cellComponents: {},
+ *   headerComponents: {},
+ * })
+ * ```
+ */
 function createTableHook({ tableComponents, cellComponents, headerComponents, ...defaultTableOptions }) {
     function injectTableContext$1() {
         return injectTableContext();
@@ -1243,7 +1285,7 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
     function injectFlexRenderCellContext() {
         return injectFlexRenderContext();
     }
-    function injectAppTable(tableOptions, selector) {
+    function injectAppTable(tableOptions) {
         function appCell(cell) {
             return cell;
         }
@@ -1265,7 +1307,7 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
             },
         };
         return injectTable(() => {
-            const options = {
+            return {
                 ...defaultTableOptions,
                 ...tableOptions(),
                 _features: {
@@ -1273,8 +1315,7 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
                     appTableFeatures,
                 },
             };
-            return options;
-        }, selector);
+        });
     }
     function createAppColumnHelper() {
         // The runtime implementation is the same - components are attached at render time