@truenas/ui-components 0.3.24 → 0.3.25

package/fesm2022/truenas-ui-components.mjs

@@ -13,7 +13,7 @@ import { mdiCheckCircle, mdiAlertCircle, mdiAlert, mdiInformation, mdiOpenInNew,
 import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
-import { firstValueFrom, BehaviorSubject, Subject, merge, animationFrameScheduler, asapScheduler, take } from 'rxjs';
+import { firstValueFrom, BehaviorSubject, merge, animationFrameScheduler, asapScheduler, Subject, take } from 'rxjs';
 import { RouterLink } from '@angular/router';
 import { filesize } from 'filesize';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
@@ -25,7 +25,7 @@ import { SelectionModel, DataSource } from '@angular/cdk/collections';
 import * as i2 from '@angular/cdk/tree';
 import { CdkTree, CdkTreeModule, CdkTreeNode, CDK_TREE_NODE_OUTLET_NODE, CdkNestedTreeNode, CdkTreeNodeOutlet, FlatTreeControl, NestedTreeControl, CdkTreeNodeOutletContext } from '@angular/cdk/tree';
 export { FlatTreeControl } from '@angular/cdk/tree';
-import { map, filter, debounceTime, distinctUntilChanged, takeUntil, auditTime } from 'rxjs/operators';
+import { map, filter, debounceTime, distinctUntilChanged, auditTime } from 'rxjs/operators';
 import { CdkVirtualScrollViewport, CdkVirtualScrollableWindow, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
 import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
 
@@ -11694,7 +11694,6 @@ class TnTreeFlatDataSource extends DataSource {
     _filteredData = new BehaviorSubject([]);
     filterValue = '';
     filterChanged$ = new BehaviorSubject('');
-    disconnect$ = new Subject();
     constructor(_treeControl, _treeFlattener) {
         super();
         this._treeControl = _treeControl;
@@ -11709,9 +11708,9 @@ class TnTreeFlatDataSource extends DataSource {
         }
         this.flattenData();
     }
-    /** The currently filtered (unflattened) data; equals `data` until `filter()` is used. */
+    /** The currently filtered (unflattened) data; equals `data` while no filter query is active. */
     get filteredData() {
-        return this._filteredData.value;
+        return this.filterValue ? this._filteredData.value : this.data;
     }
     connect() {
         return merge(this._treeControl.expansionModel.changed, this._flattenedData).pipe(map(() => {
@@ -11719,10 +11718,7 @@ class TnTreeFlatDataSource extends DataSource {
             return this._expandedData.value;
         }));
     }
-    disconnect() {
-        this.disconnect$.next();
-        this.disconnect$.complete();
-    }
+    disconnect() { }
     /** Filters the tree using `filterPredicate` (debounced). No-op until `filterPredicate` is set. */
     filter(query) {
         this.filterChanged$.next(query);
@@ -11731,8 +11727,15 @@ class TnTreeFlatDataSource extends DataSource {
         this._flattenedData.next(this._treeFlattener.flattenNodes(this.filterValue ? this._filteredData.value : this.data));
         this._treeControl.dataNodes = this._flattenedData.value;
     }
+    /**
+     * Deliberately NOT torn down in `disconnect()`: CdkTree disconnects the
+     * datasource when the tree is destroyed, but the same instance may be
+     * reconnected (e.g. a tree behind an `@if`), and filtering must survive that.
+     * The pipeline only references the datasource's own subjects, so it holds no
+     * external resources and is collected with the instance.
+     */
     detectFilterChanges() {
-        this.filterChanged$.pipe(filter(() => !!this.filterPredicate), debounceTime(200), distinctUntilChanged(), takeUntil(this.disconnect$)).subscribe((changedValue) => {
+        this.filterChanged$.pipe(filter(() => !!this.filterPredicate), debounceTime(200), distinctUntilChanged()).subscribe((changedValue) => {
             if (this.filterValue === changedValue || !this.filterPredicate) {
                 return;
             }
@@ -11823,6 +11826,10 @@ class TnNestedTreeNodeComponent extends CdkNestedTreeNode {
     /**
      * Suppresses the built-in toggle button (and its alignment spacer) so the
      * consumer can render a fully custom toggle in the projected content.
+     *
+     * The built-in button is the only keyboard/AT-operable expand control this
+     * component guarantees — when hiding it, the projected replacement must be
+     * an accessible control (a real button with an aria-label, not a bare icon).
      */
     hideToggle = input(false, { ...(ngDevMode ? { debugName: "hideToggle" } : {}), transform: booleanAttribute });
     changeDetectorRef = inject(ChangeDetectorRef);
@@ -11911,6 +11918,9 @@ class TnNestedTreeNodeComponent extends CdkNestedTreeNode {
         else {
             this._tree.toggle(this.data);
         }
+        // Mirrors CdkTreeNodeToggle's focus handling. `_keyManager` is a CDK
+        // underscore member, so a CDK upgrade may rename it — the optional call
+        // degrades to "focus not moved" rather than breaking the toggle.
         this._tree._keyManager?.focusItem(this);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnNestedTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -11959,13 +11969,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 class TnNestedTreeDataSource extends DataSource {
     /** When set, `filter(query)` re-renders the tree from `filterPredicate(data, query)`. */
     filterPredicate;
-    /** When set, incoming `data` is sorted recursively before rendering. */
+    /**
+     * When set, incoming `data` is sorted recursively before rendering.
+     *
+     * Note: sorting REWRITES `children` arrays on the caller's node objects
+     * (a new sorted array is assigned per node). Node object identity is
+     * preserved — deliberately, since tree controls track expansion state by
+     * node identity — but don't pass an object graph that is shared with code
+     * relying on the original child order.
+     */
     sortComparer;
     filterValue = '';
     filterChanged$ = new BehaviorSubject('');
     _data = new BehaviorSubject([]);
     _filteredData = new BehaviorSubject([]);
-    disconnect$ = new Subject();
     get data() {
         return this._data.value;
     }
@@ -11982,16 +11999,20 @@ class TnNestedTreeDataSource extends DataSource {
     connect(collectionViewer) {
         return merge(collectionViewer.viewChange, this._data, this._filteredData).pipe(map(() => (this.filterValue ? this._filteredData.value : this.data)));
     }
-    disconnect() {
-        this.disconnect$.next();
-        this.disconnect$.complete();
-    }
+    disconnect() { }
     /** Filters the tree using `filterPredicate` (debounced). No-op until `filterPredicate` is set. */
     filter(query) {
         this.filterChanged$.next(query);
     }
+    /**
+     * Deliberately NOT torn down in `disconnect()`: CdkTree disconnects the
+     * datasource when the tree is destroyed, but the same instance may be
+     * reconnected (e.g. a tree behind an `@if`), and filtering must survive that.
+     * The pipeline only references the datasource's own subjects, so it holds no
+     * external resources and is collected with the instance.
+     */
     detectFilterChanges() {
-        this.filterChanged$.pipe(filter(() => !!this.filterPredicate), debounceTime(200), distinctUntilChanged(), takeUntil(this.disconnect$)).subscribe((changedValue) => {
+        this.filterChanged$.pipe(filter(() => !!this.filterPredicate), debounceTime(200), distinctUntilChanged()).subscribe((changedValue) => {
             if (this.filterValue === changedValue || !this.filterPredicate) {
                 return;
             }
@@ -12128,6 +12149,10 @@ class TnTreeNodeHarness extends ComponentHarness {
     /**
      * Toggles the node together with all of its descendants (Alt+click on the
      * built-in nested-node toggle).
+     *
+     * Only nested nodes honor the Alt modifier — on a flat node the row's
+     * `cdkTreeNodeToggle` is not Alt-aware, so this degrades to a plain
+     * single-level toggle.
      */
     async toggleWithDescendants() {
         await (await this.getToggle()).click({ alt: true });