npm - @truenas/ui-components - Versions diffs - 0.7.10 → 0.7.11 - Mend

@truenas/ui-components 0.7.10 → 0.7.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/truenas-ui-components.mjs +380 -38
package/fesm2022/truenas-ui-components.mjs.map +1 -1
package/package.json +1 -1
package/types/truenas-ui-components.d.ts +155 -1

package/package.json CHANGED Viewed

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

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

@@ -562,12 +562,34 @@ declare class TnSelectComponent<T = unknown> implements ControlValueAccessor, On
      * - **Enter / Space** opens the dropdown if closed; if open and an option
      *   is highlighted, selects that option (in single mode) or toggles it
      *   (in multiple mode).
-     * - **Escape** closes the dropdown without changing the selection.
+     * - **Escape** is NOT here: it closes the dropdown without changing the
+     *   selection, from `onHostKeydown` on this component's host element,
+     *   because it also has to consume the key.
      *
      * All navigation keys call `event.preventDefault()` so the page does not
      * scroll while the user is moving through options.
      */
     onKeydown(event: KeyboardEvent): void;
+    /**
+     * Escape, which closes the dropdown and CONSUMES the key.
+     *
+     * Consuming matters because of what is usually underneath: since #322 a
+     * `tn-side-panel` is a CDK overlay listening for Escape through
+     * `OverlayKeyboardDispatcher`, which delivers to the top-most attached
+     * overlay that has subscribers. Closing the dropdown disposes this select's
+     * overlay mid-keystroke, taking it out of that stack — so an Escape left to
+     * carry on reached `<body>`, found the panel as the new top-most subscriber,
+     * and closed the whole form along with the dropdown (#324). A `tn-drawer` in
+     * `over` mode has a keydown handler of its own and closed the same way.
+     *
+     * Why this sits on the HOST rather than beside the other keys on the trigger:
+     * `stopPropagation()` stops ANCESTOR listeners, not other listeners on the
+     * same element. Called from the trigger it also hid Escape from a `tnTooltip`
+     * on this component, which dismisses a visible tooltip from a host listener —
+     * so the tooltip stayed up. From here, that directive still sees the key and
+     * only the containers ABOVE this select stop seeing it.
+     */
+    protected onHostKeydown(event: KeyboardEvent): void;
     private moveFocus;
     private activateFocusedOption;
     private scrollFocusedIntoView;
@@ -1146,6 +1168,31 @@ declare class TnAutocompleteComponent<T = unknown> implements ControlValueAccess
      */
     private runAction;
     onKeydown(event: KeyboardEvent): void;
+    /**
+     * Escape, which cancels the draft, dismisses the panel, and — while the panel
+     * is open — CONSUMES the key.
+     *
+     * Consuming matters because of what is usually underneath: since #322 a
+     * `tn-side-panel` is a CDK overlay listening for Escape through
+     * `OverlayKeyboardDispatcher`, which delivers to the top-most attached
+     * overlay that has subscribers. Dismissing disposes this panel's overlay
+     * mid-keystroke, taking it out of that stack — so an Escape left to carry on
+     * reached `<body>`, found the side panel as the new top-most subscriber, and
+     * closed the whole form along with the panel (#324). A `tn-drawer` in `over`
+     * mode has a keydown handler of its own and closed the same way.
+     *
+     * With the panel already closed the key is NOT consumed: there is nothing to
+     * dismiss and it belongs to whatever contains this field. The draft still
+     * reverts, which is what the blur that follows would otherwise commit.
+     *
+     * Why this sits on the HOST rather than beside the other keys on the input:
+     * `stopPropagation()` stops ANCESTOR listeners, not other listeners on the
+     * same element. Called from the input it also hid Escape from a `tnTooltip`
+     * on this component, which dismisses a visible tooltip from a host listener —
+     * so the tooltip stayed up. From here, that directive still sees the key and
+     * only the containers ABOVE this field stop seeing it.
+     */
+    protected onHostKeydown(event: KeyboardEvent): void;
     /**
      * `loadMore` normally fires from a scroll event, which never happens when
      * the current page is too short to overflow the panel — pagination would
@@ -1264,6 +1311,13 @@ declare class TnAutocompleteComponent<T = unknown> implements ControlValueAccess
      * matches its width to the input. Mirrors TnSelectComponent's approach.
      */
     private attachOverlay;
+    /**
+     * Escape's effect on this field: cancel the draft, then close.
+     *
+     * Shared by the overlay subscription above and `onHostKeydown`, which is
+     * where Escape arrives while focus is in the field — open panel or closed.
+     */
+    private dismiss;
     private detachOverlay;
     private scrollToHighlighted;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnAutocompleteComponent<any>, never>;
@@ -4389,6 +4443,29 @@ declare class TnChipInputComponent<T = string> implements ControlValueAccessor,
     protected onFocus(): void;
     protected onBlur(): void;
     protected onKeydown(event: KeyboardEvent): void;
+    /**
+     * Escape, which dismisses the suggestion panel and CONSUMES the key.
+     *
+     * Consuming matters because of what is usually underneath: since #322 a
+     * `tn-side-panel` is a CDK overlay listening for Escape through
+     * `OverlayKeyboardDispatcher`, which delivers to the top-most attached
+     * overlay that has subscribers. Dismissing disposes this panel's overlay
+     * mid-keystroke, taking it out of that stack — so an Escape left to carry on
+     * reached `<body>`, found the side panel as the new top-most subscriber, and
+     * closed the whole form along with the panel (#324). A `tn-drawer` in `over`
+     * mode has a keydown handler of its own and closed the same way.
+     *
+     * With the panel already closed nothing happens here and the key belongs to
+     * whatever contains this field — which is what it did before #324 too.
+     *
+     * Why this sits on the HOST rather than beside the other keys on the input:
+     * `stopPropagation()` stops ANCESTOR listeners, not other listeners on the
+     * same element. Called from the input it also hid Escape from a `tnTooltip`
+     * on this component, which dismisses a visible tooltip from a host listener —
+     * so the tooltip stayed up. From here, that directive still sees the key and
+     * only the containers ABOVE this field stop seeing it.
+     */
+    protected onHostKeydown(event: KeyboardEvent): void;
     protected onSuggestionClick(option: TnChipInputOption<T>): void;
     /** Prevents the option `mousedown` from blurring the input before the click lands. */
     protected onSuggestionMousedown(event: MouseEvent): void;
@@ -4778,6 +4855,7 @@ declare class TnMenuComponent implements OnDestroy {
     contextMenuTemplate: _angular_core.Signal<TemplateRef<unknown>>;
     private contextOverlayRef?;
     private contextBackdropSub?;
+    private contextKeydownSub?;
     private overlay;
     private viewContainerRef;
     onMenuItemClick(item: TnMenuItem): void;
@@ -12639,6 +12717,25 @@ declare class TnDateRangeInputComponent implements ControlValueAccessor, OnInit,
     private updateDateFromSegments;
     private focusNextSegment;
     private focusPrevSegment;
+    /**
+     * Escape, which closes the calendar and CONSUMES the key. Same reasoning as
+     * `TnDateInputComponent.onHostKeydown`, which this mirrors: opening does not
+     * move focus into the overlay, so the real keystroke starts on a date
+     * segment inside this host, where an ancestor such as a `tn-drawer` in
+     * `over` mode would stop it before CDK's keyboard dispatcher ever ran — and
+     * a calendar waiting on the dispatcher stayed open while the drawer closed
+     * underneath it (#324).
+     *
+     * Consuming it also keeps a `tn-side-panel` from acting on the same key: the
+     * panel is a CDK overlay subscribed through that dispatcher (#322), and
+     * closing this calendar disposes its overlay mid-keystroke, leaving the
+     * panel as the top-most subscriber for an Escape allowed to carry on.
+     *
+     * Closed, the key is not consumed; it belongs to whatever contains this
+     * field. On the HOST rather than the segments so that `stopPropagation()`
+     * still leaves a `tnTooltip` on this component able to see the key.
+     */
+    protected onHostKeydown(event: KeyboardEvent): void;
     openDatepicker(): void;
     close(): void;
     private createOverlay;
@@ -13404,6 +13501,34 @@ declare class TnDateInputComponent implements ControlValueAccessor, OnInit, OnDe
     private updateDateFromSegments;
     private focusNextSegment;
     private focusPrevSegment;
+    /**
+     * Escape, which closes the calendar and CONSUMES the key.
+     *
+     * Opening the calendar does not move focus into it, so the keystroke a user
+     * actually makes starts on a date segment — inside this host, not inside the
+     * overlay. That is the path the `keydownEvents()` subscription in
+     * `createOverlay` cannot serve: CDK's `OverlayKeyboardDispatcher` listens on
+     * `<body>`, so any ancestor that stops the key first means it never runs.
+     * `tn-drawer` in `over` mode is exactly such an ancestor — it calls
+     * `stopPropagation()` on Escape from a handler on its own panel element — so
+     * a calendar left waiting for the dispatcher stayed open while the drawer
+     * closed underneath it (#324).
+     *
+     * Consuming it also keeps a `tn-side-panel` from acting on the same key:
+     * since #322 the panel is a CDK overlay subscribed through that dispatcher,
+     * and closing this calendar disposes its overlay mid-keystroke, leaving the
+     * panel as the top-most subscriber for an Escape allowed to carry on.
+     *
+     * With the calendar closed the key is NOT consumed: there is nothing to
+     * close and it belongs to whatever contains this field.
+     *
+     * Why the HOST rather than the segment inputs: `stopPropagation()` stops
+     * ANCESTOR listeners, not other listeners on the same element. From here a
+     * `tnTooltip` on this component still sees Escape and dismisses itself, and
+     * only the containers ABOVE this field stop seeing it — the same placement
+     * `tn-select` and `tn-autocomplete` use.
+     */
+    protected onHostKeydown(event: KeyboardEvent): void;
     openDatepicker(): void;
     close(): void;
     private createOverlay;
@@ -15468,6 +15593,35 @@ declare class TnFilePickerComponent implements ControlValueAccessor, OnInit, OnD
     onPathCommit(event: Event): void;
     /** `openOnClick` entry point. */
     onInputClick(): void;
+    /**
+     * Escape, which closes the popup and CONSUMES the key.
+     *
+     * Opening the popup does not move focus into it, so the keystroke a user
+     * actually makes starts on the path input — inside this host, not inside the
+     * overlay. That is the path the `keydownEvents()` subscription in
+     * `createOverlay` cannot serve: CDK's `OverlayKeyboardDispatcher` listens on
+     * `<body>`, so any ancestor that stops the key first means it never runs.
+     * `tn-drawer` in `over` mode is exactly such an ancestor — it calls
+     * `stopPropagation()` on Escape from a handler on its own panel element — so
+     * a picker left waiting for the dispatcher stayed open while the drawer
+     * closed underneath it (#324).
+     *
+     * Consuming it also keeps a `tn-side-panel` from acting on the same key:
+     * since #322 the panel is a CDK overlay subscribed through that dispatcher,
+     * and closing this popup disposes its overlay mid-keystroke, leaving the
+     * panel as the top-most subscriber for an Escape allowed to carry on.
+     *
+     * With the popup closed the key is NOT consumed: there is nothing to close
+     * and it belongs to whatever contains this field. The inline-creation row is
+     * unaffected either way — it lives in the popup, whose keydowns never reach
+     * this host.
+     *
+     * Why the HOST rather than the input: `stopPropagation()` stops ANCESTOR
+     * listeners, not other listeners on the same element. From here a `tnTooltip`
+     * on this component still sees Escape and dismisses itself, and only the
+     * containers ABOVE this field stop seeing it.
+     */
+    protected onHostKeydown(event: KeyboardEvent): void;
     openFilePicker(): void;
     close(): void;
     onItemClick(item: FileSystemItem): void;