@truenas/ui-components 0.8.14 → 0.8.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenas/ui-components",
-  "version": "0.8.14",
+  "version": "0.8.16",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"

package/types/truenas-ui-components.d.ts

@@ -15,7 +15,7 @@
  * which is the whole promise being made here — that a mock goes in.
  */
 import * as i0 from "@angular/core";
-import { AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectorRef, ComponentRef, DoCheck, ElementRef, InjectionToken, OnChanges, OnDestroy, OnInit, PipeTransform, Provider, Renderer2, Signal, SimpleChanges, TemplateRef, TrackByFunction, ViewContainerRef } from "@angular/core";
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ComponentRef, DoCheck, ElementRef, InjectionToken, OnChanges, OnDestroy, OnInit, PipeTransform, Provider, Renderer2, Signal, SimpleChanges, TemplateRef, TrackByFunction, ViewContainerRef } from "@angular/core";
 import { AbstractControl, ControlValueAccessor, NgControl, ValidationErrors } from "@angular/forms";
 import { BehaviorSubject, Observable } from "rxjs";
 import { BaseHarnessFilters, ComponentHarness, HarnessLoader, HarnessPredicate, ModifierKeys as ModifierKeys$1, TestKey } from "@angular/cdk/testing";
@@ -18214,14 +18214,33 @@ export interface FileSystemItem {
   disabled?: boolean;
 }
 export interface FilePickerCallbacks {
+  /**
+   * Lists a directory. Reject with an Error to fail the navigation: the popup
+   * shows its message above the listing (and `error` emits a `navigation`
+   * error) until a later listing succeeds.
+   */
   getChildren?: (path: string) => Promise<FileSystemItem[]>;
   validatePath?: (path: string) => Promise<boolean>;
 }
+/**
+ * Everything that decides what the picker browses and how its value is
+ * expressed, as one object — for consumers that build it from their own data
+ * source and would otherwise bind the same four inputs at every call site.
+ * Each field mirrors the input of the same name; an input that is bound
+ * explicitly wins over the field.
+ */
+export interface FilePickerSource {
+  callbacks?: FilePickerCallbacks;
+  rootPath?: string;
+  startPath?: string;
+  valueRoot?: string;
+}
 /**
  * A consumer-defined creation flow surfaced as a button in the picker footer,
  * e.g. creating a dataset or zvol through a dialog. The creation itself
- * always happens outside the picker — either in a fully consumer-owned flow
- * (`createAction` event) or through the pluggable inline flow (`create`).
+ * always happens outside the picker — through the pluggable inline flow
+ * (`create`), a consumer-owned flow the picker awaits (`run`), or, with
+ * neither, a fully consumer-owned flow driven by the `createAction` event.
  */
 export interface FilePickerCreateAction {
   /** Identifies the action in `createAction` events, e.g. 'dataset'. */
@@ -18251,6 +18270,23 @@ export interface FilePickerCreateAction {
    * that (e.g. creation is cheap to leave behind, or idempotent).
    */
   create?: (parentPath: string, name: string) => Promise<string>;
+  /**
+   * A consumer-owned creation flow the picker awaits, e.g. one that opens a
+   * dialog or side panel. Called with the browsed directory when the button is
+   * pressed (and `create` is not set). Resolve with the created path to have
+   * the picker refresh the listing and select it, exactly as after an inline
+   * `create`; resolve with `null` when the user cancelled. Reject with an
+   * Error to show its message in the popup (and emit a `creation` error).
+   * Without `create` or `run`, pressing the button emits `createAction`.
+   */
+  run?: (parentPath: string) => Promise<string | null>;
+  /**
+   * Whether the action applies in the directory being browsed. Called with
+   * that directory's path and its listed item — `null` when the picker has not
+   * listed it, e.g. the start directory or the root. The button is hidden
+   * where this returns false. Omit it to show the action everywhere.
+   */
+  canCreateAt?: (parentPath: string, directory: FileSystemItem | null) => boolean;
 }
 export interface FilePickerCreateActionEvent {
   actionId: string;
@@ -18328,6 +18364,13 @@ export declare class TnFilePickerComponent implements ControlValueAccessor, OnIn
   openOnClick: import("@angular/core").InputSignal<boolean>;
   placeholder: import("@angular/core").InputSignal<string>;
   disabled: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Shows the value without letting the user change it: the input cannot be
+   * edited and the popup cannot be opened. Unlike `disabled` (or a disabled
+   * form control) the field stays focusable and its value stays part of the
+   * form — e.g. for a user who may view a setting but not edit it.
+   */
+  readonly: import("@angular/core").InputSignal<boolean>;
   /**
    * Test-id base applied to the file-picker container (`file-picker-` prefixed)
    * and derived onto the inner chrome: the path input (`input-<base>`), the
@@ -18337,7 +18380,13 @@ export declare class TnFilePickerComponent implements ControlValueAccessor, OnIn
    * (default `data-testid`).
    */
   testId: import("@angular/core").InputSignal<TnTestIdValue>;
-  startPath: import("@angular/core").InputSignal<string>;
+  /**
+   * Bundles `callbacks`, `rootPath`, `startPath` and `valueRoot` into one
+   * object. Each of those inputs, when bound, wins over its field here.
+   */
+  source: import("@angular/core").InputSignal<FilePickerSource | undefined>;
+  /** Directory the popup opens in. Defaults to `source.startPath`, else `/mnt`. */
+  startPath: import("@angular/core").InputSignal<string | undefined>;
   /** Restricts navigation — users cannot navigate above this path. */
   rootPath: import("@angular/core").InputSignal<string | undefined>;
   /**
@@ -18359,7 +18408,10 @@ export declare class TnFilePickerComponent implements ControlValueAccessor, OnIn
    */
   itemSelectionChange: import("@angular/core").OutputEmitterRef<FilePickerSelection>;
   pathChange: import("@angular/core").OutputEmitterRef<string>;
-  /** Re-emitted from the popup when one of the `createActions` buttons is pressed. */
+  /**
+   * Emitted when one of the `createActions` buttons with neither `create` nor
+   * `run` is pressed.
+   */
   createAction: import("@angular/core").OutputEmitterRef<FilePickerCreateActionEvent>;
   error: import("@angular/core").OutputEmitterRef<FilePickerError>;
   wrapperEl: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
@@ -18374,6 +18426,11 @@ export declare class TnFilePickerComponent implements ControlValueAccessor, OnIn
   selectedItems: import("@angular/core").WritableSignal<string[]>;
   loading: import("@angular/core").WritableSignal<boolean>;
   hasError: import("@angular/core").WritableSignal<boolean>;
+  /**
+   * Message of the last failed listing or creation, shown in the popup until
+   * a listing succeeds or the popup closes.
+   */
+  popupError: import("@angular/core").WritableSignal<string | null>;
   private formDisabled;
   /**
    * Field-derived ARIA for the path input when projected into a
@@ -18390,6 +18447,11 @@ export declare class TnFilePickerComponent implements ControlValueAccessor, OnIn
    */
   private listedItems;
   isDisabled: import("@angular/core").Signal<boolean>;
+  private effectiveCallbacks;
+  private effectiveStartPath;
+  private effectiveValueRoot;
+  /** `createActions` that apply in the directory being browsed (`canCreateAt`). */
+  protected availableCreateActions: import("@angular/core").Signal<FilePickerCreateAction[]>;
   /** Explicit `testId` wins; otherwise the bound control's name (formControlName etc.). */
   protected resolvedTestId: import("@angular/core").Signal<TnTestIdValue>;
   /**
@@ -18466,6 +18528,23 @@ export declare class TnFilePickerComponent implements ControlValueAccessor, OnIn
   navigateToPath(path: string): void;
   /** An inline `create` flow finished — show the new item selected and applied. */
   onCreated(path: string): void;
+  /**
+   * A footer button for an action without `create` was pressed: await its
+   * `run` flow and select what it created, or hand the action to the consumer
+   * through `createAction`.
+   *
+   * Deliberately not named `onCreateAction`: Storybook copies a story's props
+   * onto the rendered component, and stories commonly name their
+   * `(createAction)` handler that way, which would replace this method.
+   */
+  runCreateAction(event: FilePickerCreateActionEvent): Promise<void>;
+  /**
+   * `selectPath` for an item a create action just made. The user is looking at
+   * the popup, so a path outside `rootPath` — which `selectPath` would only
+   * report as a `validation` error, never shown there — is told as a
+   * `creation` error in the popup instead of the press seeming to do nothing.
+   */
+  private selectCreatedPath;
   /**
    * Re-fetches the listing of the directory currently being browsed. Call it
    * when the directory changed outside the picker, e.g. after a
@@ -18569,11 +18648,21 @@ export declare class TnFilePickerComponent implements ControlValueAccessor, OnIn
       "required": false;
       "isSignal": true;
     };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
     "testId": {
       "alias": "testId";
       "required": false;
       "isSignal": true;
     };
+    "source": {
+      "alias": "source";
+      "required": false;
+      "isSignal": true;
+    };
     "startPath": {
       "alias": "startPath";
       "required": false;
@@ -18899,7 +18988,7 @@ interface DisplayedFileItem extends FileSystemItem {
   /** Marks the synthetic first row hosting the inline creation input. */
   inlineCreate?: boolean;
 }
-export declare class TnFilePickerPopupComponent implements AfterViewChecked {
+export declare class TnFilePickerPopupComponent {
   /**
    * What can be selected: a single mode, or an explicit list of selectable
    * item types, e.g. ['folder', 'dataset'].
@@ -18908,8 +18997,8 @@ export declare class TnFilePickerPopupComponent implements AfterViewChecked {
   multiSelect: import("@angular/core").InputSignal<boolean>;
   /**
    * Consumer-defined creation flows rendered as buttons in the footer, next to the
-   * Select button. Pressing one emits `createAction` with the action id and the
-   * currently browsed path.
+   * Select button. Pressing one without `create` emits `createAction` with the
+   * action id and the currently browsed path; the owning picker runs its `run`.
    */
   createActions: import("@angular/core").InputSignal<FilePickerCreateAction[]>;
   currentPath: import("@angular/core").InputSignal<string>;
@@ -18922,6 +19011,8 @@ export declare class TnFilePickerPopupComponent implements AfterViewChecked {
   fileItems: import("@angular/core").InputSignal<FileSystemItem[]>;
   selectedItems: import("@angular/core").InputSignal<string[]>;
   loading: import("@angular/core").InputSignal<boolean>;
+  /** Message of a failed listing or creation, shown above the listing. */
+  errorMessage: import("@angular/core").InputSignal<string | null>;
   fileExtensions: import("@angular/core").InputSignal<string[] | undefined>;
   /**
    * Test-id base the owning picker resolved (explicit `testId`, else the bound
@@ -18935,22 +19026,14 @@ export declare class TnFilePickerPopupComponent implements AfterViewChecked {
   private elementRef;
   constructor();
   /**
-   * Requests a focus of the inline creation input on the next view check.
+   * Requests a focus of the inline creation input after the next render.
    * Set when the row opens and when a failed attempt re-enables the input —
    * the two moments the input either just entered the DOM or just lost focus
-   * to the `disabled` attribute. Cleared once the focus is scheduled, so
-   * focus is NOT permanently forced back: after an error the user can still
-   * click elsewhere without being trapped in the input.
-   */
-  private pendingCreationFocus;
-  /**
-   * Focus runs here rather than at the call sites because the input may not
-   * be in the DOM (or may still be disabled) until a later view check, and a
-   * re-render can replace the element after focus() was scheduled — render
-   * scheduling differs between hosts. So the request keeps retrying on each
-   * check and is cleared only once the input actually holds focus.
+   * to the `disabled` attribute. Cleared once focus is applied, so focus is
+   * NOT permanently forced back: after an error the user can still click
+   * elsewhere without being trapped in the input.
    */
-  ngAfterViewChecked(): void;
+  private readonly creationFocusRequested;
   itemClick: import("@angular/core").OutputEmitterRef<FileSystemItem>;
   itemDoubleClick: import("@angular/core").OutputEmitterRef<FileSystemItem>;
   pathNavigate: import("@angular/core").OutputEmitterRef<string>;
@@ -18963,6 +19046,12 @@ export declare class TnFilePickerPopupComponent implements AfterViewChecked {
   submit: import("@angular/core").OutputEmitterRef<void>;
   cancel: import("@angular/core").OutputEmitterRef<void>;
   displayedColumns: string[];
+  /**
+   * The empty directory is the table's own empty state, worded for a listing —
+   * a second empty-state block here would render under it, so the popup only
+   * words and decorates the table's.
+   */
+  protected readonly emptyIcon: string;
   /**
    * Whether an empty selection stands for the directory being browsed: true
    * whenever the selectable types include a directory-like type. The footer
@@ -18984,6 +19073,7 @@ export declare class TnFilePickerPopupComponent implements AfterViewChecked {
    */
   protected readonly selectTestId: import("@angular/core").Signal<(string | number | null | undefined)[]>;
   protected readonly clearSelectionTestId: import("@angular/core").Signal<(string | number | null | undefined)[]>;
+  protected readonly errorTestId: import("@angular/core").Signal<(string | number | null | undefined)[]>;
   /** Role-first segments for the inline creation input: `input-create[-<base>]`. */
   protected readonly inlineCreateTestId: import("@angular/core").Signal<(string | number | null | undefined)[]>;
   /**
@@ -19087,6 +19177,11 @@ export declare class TnFilePickerPopupComponent implements AfterViewChecked {
       "required": false;
       "isSignal": true;
     };
+    "errorMessage": {
+      "alias": "errorMessage";
+      "required": false;
+      "isSignal": true;
+    };
     "fileExtensions": {
       "alias": "fileExtensions";
       "required": false;