@truenas/ui-components 0.3.26 → 0.4.0

package/package.json

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

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

@@ -5933,6 +5933,15 @@ declare class TnTableComponent<T = unknown> implements OnInit {
      * the row by id in your data source before assigning here.
      */
     activeRow: _angular_core.InputSignal<T | null>;
+    /**
+     * Optional predicate marking rows as active, in addition to `activeRow`.
+     * Use when several rows can be active at once (e.g. multi-selection
+     * highlighting) or when matching by key rather than by reference. Active
+     * rows get the same `tn-table__row--active` styling and, when `clickable`,
+     * `aria-selected`. Re-evaluated on each change detection, so it may depend
+     * on signals — keep it cheap and pure.
+     */
+    activeWhen: _angular_core.InputSignal<((row: T) => boolean) | undefined>;
     /**
      * Overrides the active-row background color. Accepts any CSS color value
      * (`#hex`, `rgb()`, `var(--token)`). Defaults to `--tn-bg3` when null.
@@ -5961,6 +5970,13 @@ declare class TnTableComponent<T = unknown> implements OnInit {
     selectionChange: _angular_core.OutputEmitterRef<T[]>;
     /** Emits the row when a clickable row is activated (click or Enter/Space). */
     rowClick: _angular_core.OutputEmitterRef<T>;
+    /**
+     * Emits the row when a clickable row is double-clicked. Double-click has no
+     * keyboard equivalent (Enter/Space emit `rowClick`), so consumers must
+     * provide an accessible alternative for the same action — e.g. a dedicated
+     * button inside the row, as the file picker does for entering directories.
+     */
+    rowDoubleClick: _angular_core.OutputEmitterRef<T>;
     columnDefs: _angular_core.Signal<readonly TnTableColumnDirective[]>;
     detailRowDef: _angular_core.Signal<TnDetailRowDefDirective | undefined>;
     sortColumn: _angular_core.WritableSignal<string>;
@@ -5997,6 +6013,7 @@ declare class TnTableComponent<T = unknown> implements OnInit {
     isRowExpanded(row: T): boolean;
     isRowActive(row: T): boolean;
     onRowClick(row: T): void;
+    onRowDoubleClick(row: T): void;
     onRowKeydown(event: KeyboardEvent, row: T): void;
     toggleSelectAll(): void;
     toggleRowSelection(row: T): void;
@@ -6004,7 +6021,7 @@ declare class TnTableComponent<T = unknown> implements OnInit {
     getColumnDef(columnName: string): TnTableColumnDirective | undefined;
     getCellValue(row: T, column: string): unknown;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnTableComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnTableComponent<any>, "tn-table", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "displayedColumns": { "alias": "displayedColumns"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyIcon": { "alias": "emptyIcon"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "isRowExpandable": { "alias": "isRowExpandable"; "required": false; "isSignal": true; }; "activeRow": { "alias": "activeRow"; "required": false; "isSignal": true; }; "activeBg": { "alias": "activeBg"; "required": false; "isSignal": true; }; "activeIndicator": { "alias": "activeIndicator"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "sortChange": "sortChange"; "selectionChange": "selectionChange"; "rowClick": "rowClick"; }, ["columnDefs", "detailRowDef"], never, true, [{ directive: typeof TnTestIdDirective; inputs: { "tnTestId": "testId"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnTableComponent<any>, "tn-table", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "displayedColumns": { "alias": "displayedColumns"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyIcon": { "alias": "emptyIcon"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "isRowExpandable": { "alias": "isRowExpandable"; "required": false; "isSignal": true; }; "activeRow": { "alias": "activeRow"; "required": false; "isSignal": true; }; "activeWhen": { "alias": "activeWhen"; "required": false; "isSignal": true; }; "activeBg": { "alias": "activeBg"; "required": false; "isSignal": true; }; "activeIndicator": { "alias": "activeIndicator"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "sortChange": "sortChange"; "selectionChange": "selectionChange"; "rowClick": "rowClick"; "rowDoubleClick": "rowDoubleClick"; }, ["columnDefs", "detailRowDef"], never, true, [{ directive: typeof TnTestIdDirective; inputs: { "tnTestId": "testId"; }; outputs: {}; }]>;
 }
 
 /**
@@ -6136,6 +6153,14 @@ declare class TnTableHarness extends ComponentHarness {
      * @param rowIndex Zero-based index of the data row.
      */
     clickRow(rowIndex: number): Promise<void>;
+    /**
+     * Double-clicks a row (for tables with `clickable` enabled), triggering
+     * `rowDoubleClick`. Note that a real double-click also fires two single
+     * clicks first; this helper dispatches only the `dblclick` event.
+     *
+     * @param rowIndex Zero-based index of the data row.
+     */
+    doubleClickRow(rowIndex: number): Promise<void>;
     /**
      * Sends a keyboard event to a row (Enter/Space activate clickable rows).
      *
@@ -7455,53 +7480,6 @@ declare function labelMarkupToHtml(value: string): string;
  */
 declare function labelMarkupToText(value: string): string;
 
-declare class StripMntPrefixPipe implements PipeTransform {
-    transform(path: string | null | undefined): string;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StripMntPrefixPipe, never>;
-    static ɵpipe: _angular_core.ɵɵPipeDeclaration<StripMntPrefixPipe, "tnStripMntPrefix", true>;
-}
-
-interface FileSystemItem {
-    path: string;
-    name: string;
-    type: 'file' | 'folder' | 'dataset' | 'zvol' | 'mountpoint';
-    size?: number;
-    modified?: Date;
-    permissions?: 'read' | 'write' | 'none';
-    icon?: string;
-    disabled?: boolean;
-    isCreating?: boolean;
-    tempId?: string;
-    creationError?: string;
-}
-interface FilePickerCallbacks {
-    getChildren?: (path: string) => Promise<FileSystemItem[]>;
-    validatePath?: (path: string) => Promise<boolean>;
-    createFolder?: (parentPath: string, name: string) => Promise<string>;
-    createDataset?: (parentPath: string) => Promise<string>;
-    createZvol?: (parentPath: string) => Promise<string>;
-}
-interface CreateFolderEvent {
-    parentPath: string;
-    folderName: string;
-}
-interface FilePickerError {
-    type: 'navigation' | 'permission' | 'creation' | 'validation';
-    message: string;
-    path?: string;
-}
-interface PathSegment {
-    name: string;
-    path: string;
-}
-type FilePickerMode = 'file' | 'folder' | 'dataset' | 'zvol' | 'any';
-
-declare class TruncatePathPipe implements PipeTransform {
-    transform(path: string): PathSegment[];
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TruncatePathPipe, never>;
-    static ɵpipe: _angular_core.ɵɵPipeDeclaration<TruncatePathPipe, "tnTruncatePath", true>;
-}
-
 type SpinnerMode = 'determinate' | 'indeterminate';
 declare class TnSpinnerComponent {
     mode: _angular_core.InputSignal<SpinnerMode>;
@@ -9045,12 +9023,89 @@ interface StepperHarnessFilters extends BaseHarnessFilters {
     orientation?: 'horizontal' | 'vertical';
 }
 
+interface FileSystemItem {
+    path: string;
+    name: string;
+    type: 'file' | 'folder' | 'dataset' | 'zvol' | 'mountpoint';
+    size?: number;
+    modified?: Date;
+    permissions?: 'read' | 'write' | 'none';
+    /**
+     * Fully-qualified sprite icon id overriding the type-based default, e.g.
+     * 'mdi-folder' or 'tn-dataset'. Mark the icon for sprite inclusion with
+     * `tnIconMarker` in the consuming code.
+     */
+    icon?: string;
+    disabled?: boolean;
+}
+interface FilePickerCallbacks {
+    getChildren?: (path: string) => Promise<FileSystemItem[]>;
+    validatePath?: (path: string) => Promise<boolean>;
+}
+/**
+ * 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`).
+ */
+interface FilePickerCreateAction {
+    /** Identifies the action in `createAction` events, e.g. 'dataset'. */
+    id: string;
+    /** Button label. */
+    label: string;
+    /**
+     * Fully-qualified sprite icon id shown in the inline creation row,
+     * e.g. 'tn-dataset'. Defaults to 'mdi-folder'.
+     */
+    icon?: string;
+    /**
+     * Opts into the built-in inline creation row. Pressing the action's button
+     * then renders an editable name row at the top of the listing instead of
+     * emitting `createAction`; submitting calls this with the browsed directory
+     * and the entered name — the implementation does the real work (e.g. a
+     * websocket API call). Resolve with the created path: the picker refreshes
+     * the listing and selects it. Reject with an Error to show its message as
+     * the inline error and keep the row editable for retry. Name validation
+     * (duplicates, invalid characters, …) belongs in this callback.
+     *
+     * The row auto-submits when it loses focus with a non-empty name
+     * (matching inline-rename conventions), so this callback can also fire
+     * when the user clicks away — including on a click that navigates
+     * elsewhere, which abandons the row and silently discards the resolved
+     * path even though the item was created. Implementations should tolerate
+     * that (e.g. creation is cheap to leave behind, or idempotent).
+     */
+    create?: (parentPath: string, name: string) => Promise<string>;
+}
+interface FilePickerCreateActionEvent {
+    actionId: string;
+    /** Directory being browsed when the action was triggered. */
+    parentPath: string;
+}
+interface FilePickerError {
+    type: 'navigation' | 'permission' | 'creation' | 'validation';
+    message: string;
+    path?: string;
+}
+interface PathSegment {
+    name: string;
+    path: string;
+}
+type FileSystemItemType = FileSystemItem['type'];
+type FilePickerMode = 'file' | 'folder' | 'dataset' | 'zvol' | 'any';
+
 declare class TnFilePickerComponent implements ControlValueAccessor, OnInit, OnDestroy {
-    mode: _angular_core.InputSignal<FilePickerMode>;
+    /**
+     * What can be selected: a single mode, or an explicit list of selectable
+     * item types, e.g. ['folder', 'dataset']. Whenever a directory-like type
+     * (folder, dataset, mountpoint) is selectable, an empty selection stands
+     * for the directory being browsed and submitting it picks `currentPath` —
+     * this keeps empty directories selectable.
+     */
+    mode: _angular_core.InputSignal<FilePickerMode | ("file" | "folder" | "dataset" | "zvol" | "mountpoint")[]>;
     multiSelect: _angular_core.InputSignal<boolean>;
-    allowCreate: _angular_core.InputSignal<boolean>;
-    allowDatasetCreate: _angular_core.InputSignal<boolean>;
-    allowZvolCreate: _angular_core.InputSignal<boolean>;
+    /** Consumer-defined creation flows shown as buttons in the popup footer. */
+    createActions: _angular_core.InputSignal<FilePickerCreateAction[]>;
     allowManualInput: _angular_core.InputSignal<boolean>;
     placeholder: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
@@ -9060,12 +9115,14 @@ declare class TnFilePickerComponent implements ControlValueAccessor, OnInit, OnD
      */
     testId: _angular_core.InputSignal<TnTestIdValue>;
     startPath: _angular_core.InputSignal<string>;
+    /** Restricts navigation — users cannot navigate above this path. */
     rootPath: _angular_core.InputSignal<string | undefined>;
     fileExtensions: _angular_core.InputSignal<string[] | undefined>;
     callbacks: _angular_core.InputSignal<FilePickerCallbacks | undefined>;
     selectionChange: _angular_core.OutputEmitterRef<string | string[]>;
     pathChange: _angular_core.OutputEmitterRef<string>;
-    createFolder: _angular_core.OutputEmitterRef<CreateFolderEvent>;
+    /** Re-emitted from the popup when one of the `createActions` buttons is pressed. */
+    createAction: _angular_core.OutputEmitterRef<FilePickerCreateActionEvent>;
     error: _angular_core.OutputEmitterRef<FilePickerError>;
     wrapperEl: _angular_core.Signal<ElementRef<HTMLDivElement>>;
     filePickerTemplate: _angular_core.Signal<TemplateRef<unknown>>;
@@ -9079,10 +9136,9 @@ declare class TnFilePickerComponent implements ControlValueAccessor, OnInit, OnD
     selectedItems: _angular_core.WritableSignal<string[]>;
     loading: _angular_core.WritableSignal<boolean>;
     hasError: _angular_core.WritableSignal<boolean>;
-    creatingItemTempId: _angular_core.WritableSignal<string | null>;
-    creationLoading: _angular_core.WritableSignal<boolean>;
     private formDisabled;
     isDisabled: _angular_core.Signal<boolean>;
+    effectiveRootPath: _angular_core.Signal<string>;
     private onChange;
     private onTouched;
     private overlay;
@@ -9094,7 +9150,13 @@ declare class TnFilePickerComponent implements ControlValueAccessor, OnInit, OnD
     registerOnChange(fn: (value: string | string[]) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
-    onPathInput(event: Event): void;
+    /**
+     * Commits a manually typed path. Bound to the input's `change` event
+     * (Enter or blur), not `input`: validating per keystroke would emit an
+     * error for every incomplete prefix of a valid path ('/m', '/mn', …)
+     * and spam `validatePath` with paths the user never meant.
+     */
+    onPathCommit(event: Event): void;
     openFilePicker(): void;
     close(): void;
     onItemClick(item: FileSystemItem): void;
@@ -9102,104 +9164,213 @@ declare class TnFilePickerComponent implements ControlValueAccessor, OnInit, OnD
     onSubmit(): void;
     onCancel(): void;
     navigateToPath(path: string): void;
-    onCreateFolder(): void;
+    /** An inline `create` flow finished — show the new item selected and applied. */
+    onCreated(path: string): void;
+    /**
+     * Re-fetches the listing of the directory currently being browsed. Call it
+     * when the directory changed outside the picker, e.g. after a
+     * `createAction` flow created something in it.
+     */
+    refresh(): Promise<void>;
+    /**
+     * Programmatically selects `path`, e.g. the mountpoint a `createAction`
+     * flow just created: browses to its parent so the refreshed listing shows
+     * the new item selected, and applies the path as the picker's value (form
+     * value and `selectionChange`). The popup stays open so the user can
+     * confirm with Select or keep browsing. Paths outside `rootPath` are
+     * rejected with a `validation` error — the picker's value honors the same
+     * confinement as navigation and manual input.
+     *
+     * This is a single-path operation: like a manually typed path, it
+     * REPLACES any pending multi-selection rather than appending to it —
+     * the intent is to focus the one path (e.g. a just-created item), not to
+     * merge it into picks the user may have abandoned.
+     */
+    selectPath(path: string): Promise<void>;
+    private clampToRoot;
+    /**
+     * Browsing to another directory drops a not-yet-applied single-select
+     * selection: keeping it would leave the footer claiming an item from a
+     * directory the user is no longer looking at, and would mask the implicit
+     * current-directory selection. Multi-select keeps its selection so items
+     * can be picked across directories. The applied value (`selectedPath`,
+     * form value) is untouched either way.
+     */
+    private clearStalePendingSelection;
     onClearSelection(): void;
-    onSubmitFolderName(name: string, tempId: string): Promise<void>;
-    onCancelFolderCreation(tempId: string): void;
-    private removePendingItem;
-    private updateCreatingItemError;
-    private validateFolderName;
     private loadDirectory;
     private getMockFileItems;
+    /**
+     * Applies `path` as the picker's whole value. In multi-select this
+     * replaces the selection with the single path — both callers (typed
+     * paths, `selectPath()`) express one deliberate choice, so appending
+     * would be the surprising behavior.
+     */
     private updateSelection;
-    private updateSelectionFromItems;
-    private toFullPath;
     private emitError;
     private createOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnFilePickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnFilePickerComponent, "tn-file-picker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "multiSelect": { "alias": "multiSelect"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "allowDatasetCreate": { "alias": "allowDatasetCreate"; "required": false; "isSignal": true; }; "allowZvolCreate": { "alias": "allowZvolCreate"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "startPath": { "alias": "startPath"; "required": false; "isSignal": true; }; "rootPath": { "alias": "rootPath"; "required": false; "isSignal": true; }; "fileExtensions": { "alias": "fileExtensions"; "required": false; "isSignal": true; }; "callbacks": { "alias": "callbacks"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "pathChange": "pathChange"; "createFolder": "createFolder"; "error": "error"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnFilePickerComponent, "tn-file-picker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "multiSelect": { "alias": "multiSelect"; "required": false; "isSignal": true; }; "createActions": { "alias": "createActions"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "startPath": { "alias": "startPath"; "required": false; "isSignal": true; }; "rootPath": { "alias": "rootPath"; "required": false; "isSignal": true; }; "fileExtensions": { "alias": "fileExtensions"; "required": false; "isSignal": true; }; "callbacks": { "alias": "callbacks"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "pathChange": "pathChange"; "createAction": "createAction"; "error": "error"; }, never, never, true, never>;
 }
 
-declare class TnFilePickerPopupComponent implements OnInit, AfterViewInit, AfterViewChecked {
-    mode: _angular_core.InputSignal<FilePickerMode>;
+/** State of an open inline creation row. */
+interface InlineCreationState {
+    action: FilePickerCreateAction;
+    /** Name entered so far, mirrored from the input on every keystroke. */
+    name: string;
+    loading: boolean;
+    error?: string;
+}
+/** FileSystemItem decorated for display, plus the synthetic inline-create row. */
+interface DisplayedFileItem extends FileSystemItem {
+    /** Dim only items with no interaction left. */
+    dimmed: boolean;
+    /** Marks the synthetic first row hosting the inline creation input. */
+    inlineCreate?: boolean;
+}
+declare class TnFilePickerPopupComponent implements AfterViewChecked {
+    /**
+     * What can be selected: a single mode, or an explicit list of selectable
+     * item types, e.g. ['folder', 'dataset'].
+     */
+    mode: _angular_core.InputSignal<FilePickerMode | ("file" | "folder" | "dataset" | "zvol" | "mountpoint")[]>;
     multiSelect: _angular_core.InputSignal<boolean>;
-    allowCreate: _angular_core.InputSignal<boolean>;
-    allowDatasetCreate: _angular_core.InputSignal<boolean>;
-    allowZvolCreate: _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.
+     */
+    createActions: _angular_core.InputSignal<FilePickerCreateAction[]>;
     currentPath: _angular_core.InputSignal<string>;
+    /**
+     * Topmost path the breadcrumb can navigate to. It is always the first
+     * breadcrumb segment, rendered with its leading slash drawn as a separator
+     * so the path reads "/ mnt / showcase".
+     */
+    rootPath: _angular_core.InputSignal<string>;
     fileItems: _angular_core.InputSignal<FileSystemItem[]>;
     selectedItems: _angular_core.InputSignal<string[]>;
     loading: _angular_core.InputSignal<boolean>;
-    creationLoading: _angular_core.InputSignal<boolean>;
     fileExtensions: _angular_core.InputSignal<string[] | undefined>;
     private iconRegistry;
+    private elementRef;
     constructor();
     /**
-     * Register MDI icon library with all icons used by the file picker component
-     * This makes the component self-contained with zero configuration required
+     * Requests a focus of the inline creation input on the next view check.
+     * 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.
      */
-    private registerMdiIcons;
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
     ngAfterViewChecked(): void;
     itemClick: _angular_core.OutputEmitterRef<FileSystemItem>;
     itemDoubleClick: _angular_core.OutputEmitterRef<FileSystemItem>;
     pathNavigate: _angular_core.OutputEmitterRef<string>;
-    createFolder: _angular_core.OutputEmitterRef<CreateFolderEvent>;
+    /** Emits when a `createActions` button without a `create` callback is pressed. */
+    createAction: _angular_core.OutputEmitterRef<FilePickerCreateActionEvent>;
+    /** Emits the created path when an inline `create` flow succeeds. */
+    created: _angular_core.OutputEmitterRef<string>;
     clearSelection: _angular_core.OutputEmitterRef<void>;
     close: _angular_core.OutputEmitterRef<void>;
     submit: _angular_core.OutputEmitterRef<void>;
     cancel: _angular_core.OutputEmitterRef<void>;
-    submitFolderName: _angular_core.OutputEmitterRef<{
-        name: string;
-        tempId: string;
-    }>;
-    cancelFolderCreation: _angular_core.OutputEmitterRef<string>;
     displayedColumns: string[];
-    filteredFileItems: _angular_core.Signal<{
-        disabled: boolean;
-        path: string;
-        name: string;
-        type: "file" | "folder" | "dataset" | "zvol" | "mountpoint";
-        size?: number;
-        modified?: Date;
-        permissions?: "read" | "write" | "none";
-        icon?: string;
-        isCreating?: boolean;
-        tempId?: string;
-        creationError?: string;
-    }[]>;
+    /**
+     * Whether an empty selection stands for the directory being browsed: true
+     * whenever the selectable types include a directory-like type. The footer
+     * then names the implicit selection and the Select button stays enabled; on
+     * `submit` with no `selectedItems`, consumers treat `currentPath` as the
+     * selection.
+     */
+    allowCurrentDirectorySelection: _angular_core.Signal<boolean>;
+    filteredFileItems: _angular_core.Signal<DisplayedFileItem[]>;
     onItemClick(item: FileSystemItem): void;
     onItemDoubleClick(item: FileSystemItem): void;
+    onNavigateClick(event: Event, item: FileSystemItem): void;
     navigateToPath(path: string): void;
-    onCreateFolder(): void;
+    onCreateAction(action: FilePickerCreateAction): void;
+    /**
+     * Inline creation state while a `create`-capable action's row is open.
+     * The consumer's `create` callback does the real work; the row shows its
+     * rejection message as the inline error. The entered name lives here (not
+     * only in the DOM) so a listing re-render can't wipe it.
+     */
+    inlineCreation: _angular_core.WritableSignal<InlineCreationState | null>;
+    /** Links the inline creation input to its error message for screen readers. */
+    inlineErrorId: string;
+    submitInlineCreation(): Promise<void>;
+    onInlineCreationKeyDown(event: KeyboardEvent): void;
+    /**
+     * Mirrors the typed name into the creation state and clears a shown error
+     * as soon as the name is edited, re-arming blur submit.
+     */
+    onInlineCreationInput(event: Event): void;
+    onInlineCreationBlur(): void;
     onClearSelection(): void;
     onSubmit(): void;
     onCancel(): void;
-    onFolderNameSubmit(event: Event, item: FileSystemItem): void;
-    onFolderNameCancel(item: FileSystemItem): void;
-    onFolderNameInputBlur(event: Event, item: FileSystemItem): void;
-    onFolderNameKeyDown(event: KeyboardEvent, item: FileSystemItem): void;
-    isCreateDisabled(): boolean;
     isNavigatable(item: FileSystemItem): boolean;
-    getItemIcon(item: FileSystemItem): string;
-    getFileIcon(filename: string): string;
     /**
-     * Get the library type for the icon
-     * @param item FileSystemItem
-     * @returns 'custom' for TrueNAS custom icons, 'mdi' for Material Design Icons
+     * Fully-qualified sprite icon name for an item. `tnIconMarker`/`libIconMarker`
+     * calls double as build-time markers that pull these icons into the sprite.
      */
-    getItemIconLibrary(item: FileSystemItem): 'mdi' | 'custom';
+    getItemIcon(item: FileSystemItem): string;
+    getFileIcon(filename: string): string;
     getZfsBadge(item: FileSystemItem): string;
     isZfsObject(item: FileSystemItem): boolean;
     isSelected(item: FileSystemItem): boolean;
-    getRowClass: (row: FileSystemItem) => string | string[];
-    getFileInfo(item: FileSystemItem): string;
-    formatFileSize(bytes: number): string;
-    getTypeDisplayName(type: string): string;
+    /**
+     * Highlights selected rows through the table's supported active-row
+     * styling (`activeWhen`) instead of reaching into its DOM.
+     */
+    isRowSelected: (row: FileSystemItem) => boolean;
     formatDate(date: Date): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnFilePickerPopupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnFilePickerPopupComponent, "tn-file-picker-popup", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "multiSelect": { "alias": "multiSelect"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "allowDatasetCreate": { "alias": "allowDatasetCreate"; "required": false; "isSignal": true; }; "allowZvolCreate": { "alias": "allowZvolCreate"; "required": false; "isSignal": true; }; "currentPath": { "alias": "currentPath"; "required": false; "isSignal": true; }; "fileItems": { "alias": "fileItems"; "required": false; "isSignal": true; }; "selectedItems": { "alias": "selectedItems"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "creationLoading": { "alias": "creationLoading"; "required": false; "isSignal": true; }; "fileExtensions": { "alias": "fileExtensions"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "itemDoubleClick": "itemDoubleClick"; "pathNavigate": "pathNavigate"; "createFolder": "createFolder"; "clearSelection": "clearSelection"; "close": "close"; "submit": "submit"; "cancel": "cancel"; "submitFolderName": "submitFolderName"; "cancelFolderCreation": "cancelFolderCreation"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnFilePickerPopupComponent, "tn-file-picker-popup", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "multiSelect": { "alias": "multiSelect"; "required": false; "isSignal": true; }; "createActions": { "alias": "createActions"; "required": false; "isSignal": true; }; "currentPath": { "alias": "currentPath"; "required": false; "isSignal": true; }; "rootPath": { "alias": "rootPath"; "required": false; "isSignal": true; }; "fileItems": { "alias": "fileItems"; "required": false; "isSignal": true; }; "selectedItems": { "alias": "selectedItems"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fileExtensions": { "alias": "fileExtensions"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "itemDoubleClick": "itemDoubleClick"; "pathNavigate": "pathNavigate"; "createAction": "createAction"; "created": "created"; "clearSelection": "clearSelection"; "close": "close"; "submit": "submit"; "cancel": "cancel"; }, never, never, true, never>;
+}
+
+/** Item types selectable under `mode`; null means every type is selectable. */
+declare function getSelectableTypes(mode: FilePickerMode | FileSystemItemType[]): FileSystemItemType[] | null;
+/**
+ * Whether the browsed directory itself is a valid selection under `mode`,
+ * i.e. whether any selectable type is directory-like. An empty selection
+ * then stands for the current directory, which keeps empty directories
+ * selectable.
+ */
+declare function allowsCurrentDirectorySelection(mode: FilePickerMode | FileSystemItemType[]): boolean;
+
+/**
+ * Whether `path` is `root` itself or nested anywhere beneath it. A plain
+ * prefix check is not enough: '/mntx' is not within '/mnt', and a path
+ * containing relative segments ('/mnt/../etc') could resolve outside the
+ * root even though it starts with it — such paths are never within the root.
+ */
+declare function isPathWithinRoot(path: string, root: string): boolean;
+/**
+ * Collapses trailing slashes so root comparisons are exact: '/mnt/backups/'
+ * would otherwise never equal the '/mnt/backups' produced by navigation.
+ * '/' stays '/'.
+ */
+declare function normalizeRootPath(root: string): string;
+
+declare class TruncatePathPipe implements PipeTransform {
+    transform(path: string, rootPath?: string): PathSegment[];
+    /**
+     * Collapses the middle of deep paths into an "…" segment that navigates to the
+     * parent of the first visible directory, e.g. /mnt/a/b/c/d/e/f → /mnt … d e f.
+     */
+    private truncateMiddle;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TruncatePathPipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<TruncatePathPipe, "tnTruncatePath", true>;
 }
 
 type TnEmptySize = 'default' | 'compact';
@@ -9763,5 +9934,5 @@ declare const TN_THEME_DEFINITIONS: readonly TnThemeDefinition[];
  */
 declare const THEME_MAP: Map<TnTheme, TnThemeDefinition>;
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeDataSource, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeHarness, TnTreeNodeComponent, TnTreeNodeHarness, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, controlTestId, createFlatTreeControl, createLucideLibrary, createNestedTreeControl, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, injectTnFormFieldAria, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, optionTestId, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
-export type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, ButtonToggleHarnessFilters, CalendarCell, CheckboxHarnessFilters, ChipColor, ChipHarnessFilters, CreateFolderEvent, DateInputHarnessFilters, DateRange, DateRangeInputHarnessFilters, DialogHarnessFilters, EmptyHarnessFilters, ExpansionPanelHarnessFilters, FileInputHarnessFilters, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, FlatTreeControlOptions, FormFieldHarnessFilters, FormSectionHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelMarkupSegment, LabelMarkupSegmentType, LabelType, LucideIconOptions, MenuHarnessFilters, MockIconRegistry, MockSpriteLoader, NestedTreeControlOptions, PathSegment, PlatformType, ProgressBarMode, RadioHarnessFilters, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SizeStandard, SlideToggleColor, SlideToggleHarnessFilters, SpinnerMode, SpriteConfig, StepperHarnessFilters, SubscriptSizing, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnAutocompleteOption, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnChipInputHarnessFilters, TnChipInputOption, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnDrawerMode, TnDrawerPosition, TnEmptySize, TnFlatTreeNode, TnFormFieldAriaBindings, TnFormFieldContext, TnFormFieldErrorMessage, TnFormFieldErrorMessages, TnFormFieldErrorResolver, TnMenuItem, TnOptionTestIdSource, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnSortEvent, TnTableDataProvider, TnTableDataSource, TnTableHarnessFilters, TnTablePagerHarnessFilters, TnTablePagerLabels, TnTablePagination, TnTestAttrName, TnTestIdValue, TnThemeDefinition, TnToastCall, TnToastConfig, TnTreeExpansion, TnTreeHarnessFilters, TnTreeNodeHarnessFilters, TnTreeVirtualNodeData, TnTreeVirtualScrollViewHarnessFilters, TooltipPosition, YearCell };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeDataSource, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeHarness, TnTreeNodeComponent, TnTreeNodeHarness, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, allowsCurrentDirectorySelection, composeTestId, controlTestId, createFlatTreeControl, createLucideLibrary, createNestedTreeControl, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, getSelectableTypes, injectTnFormFieldAria, isPathWithinRoot, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, normalizeRootPath, optionTestId, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
+export type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, ButtonToggleHarnessFilters, CalendarCell, CheckboxHarnessFilters, ChipColor, ChipHarnessFilters, DateInputHarnessFilters, DateRange, DateRangeInputHarnessFilters, DialogHarnessFilters, EmptyHarnessFilters, ExpansionPanelHarnessFilters, FileInputHarnessFilters, FilePickerCallbacks, FilePickerCreateAction, FilePickerCreateActionEvent, FilePickerError, FilePickerMode, FileSystemItem, FileSystemItemType, FlatTreeControlOptions, FormFieldHarnessFilters, FormSectionHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelMarkupSegment, LabelMarkupSegmentType, LabelType, LucideIconOptions, MenuHarnessFilters, MockIconRegistry, MockSpriteLoader, NestedTreeControlOptions, PathSegment, PlatformType, ProgressBarMode, RadioHarnessFilters, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SizeStandard, SlideToggleColor, SlideToggleHarnessFilters, SpinnerMode, SpriteConfig, StepperHarnessFilters, SubscriptSizing, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnAutocompleteOption, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnChipInputHarnessFilters, TnChipInputOption, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnDrawerMode, TnDrawerPosition, TnEmptySize, TnFlatTreeNode, TnFormFieldAriaBindings, TnFormFieldContext, TnFormFieldErrorMessage, TnFormFieldErrorMessages, TnFormFieldErrorResolver, TnMenuItem, TnOptionTestIdSource, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnSortEvent, TnTableDataProvider, TnTableDataSource, TnTableHarnessFilters, TnTablePagerHarnessFilters, TnTablePagerLabels, TnTablePagination, TnTestAttrName, TnTestIdValue, TnThemeDefinition, TnToastCall, TnToastConfig, TnTreeExpansion, TnTreeHarnessFilters, TnTreeNodeHarnessFilters, TnTreeVirtualNodeData, TnTreeVirtualScrollViewHarnessFilters, TooltipPosition, YearCell };