@truenas/ui-components 0.4.9 → 0.4.11

package/fesm2022/truenas-ui-components.mjs

@@ -9584,21 +9584,20 @@ class TnSelectComponent {
             return;
         }
         this.isOpen.set(true);
-        // Seed keyboard focus at the current selection when there is one;
-        // otherwise leave it unset so the next ArrowDown lands on the first item.
+        // Seed keyboard focus at the current selection when there is one, else at
+        // the first navigable row. Something is ALWAYS highlighted while the panel
+        // is open (matching mat-select): a freshly-opened select must be operable
+        // with Enter/Space straight away, without an ArrowDown first.
         const selected = this.selectedValue();
-        if (selected !== null && selected !== undefined) {
-            const idx = this.navigableOptions().findIndex((x) => x.kind === 'option' && this.compareValues(x.option.value, selected));
-            this.focusedIndex.set(idx);
-        }
-        else if (this.emptyOption()) {
-            // A cleared value means the empty option (always first) is the current
-            // selection — seed keyboard focus there.
-            this.focusedIndex.set(0);
-        }
-        else {
-            this.focusedIndex.set(-1);
-        }
+        const idx = selected === null || selected === undefined
+            ? -1
+            : this.navigableOptions().findIndex((x) => x.kind === 'option' && this.compareValues(x.option.value, selected));
+        // findIndex can also miss (e.g. the selected option is disabled, so it
+        // isn't navigable) — fall back to the first row there too. `-1` would
+        // leave the panel with nothing highlighted, which is the state we're
+        // avoiding. When `allowEmpty` is set the first row IS the empty option,
+        // so a cleared value lands on it for free.
+        this.focusedIndex.set(idx >= 0 ? idx : 0);
         this.attachOverlay();
     }
     /**
@@ -9931,10 +9930,9 @@ class TnSelectComponent {
             case 'ArrowDown':
                 event.preventDefault();
                 if (!this.isOpen()) {
+                    // openDropdown() already seeds the highlight (selection, else first),
+                    // so opening must not also advance a row.
                     this.openDropdown();
-                    if (this.focusedIndex() < 0) {
-                        this.moveFocus('first');
-                    }
                 }
                 else {
                     this.moveFocus(1);
@@ -11298,36 +11296,47 @@ class TnTableComponent {
      * Cells wrap regardless of this (that is the table's default), so reach for it only when equal
      * columns are actually wanted: it gives up the `auto` layout's content-proportional sizing,
      * which a table with one long text column among short ones usually wants to keep.
+     *
+     * Changes the layout algorithm only — the table still shrinks with its container, with no floor
+     * unless {@link minColumnWidth} or {@link minWidth} sets one.
      */
     fixedLayout = input(false, ...(ngDevMode ? [{ debugName: "fixedLayout" }] : []));
     /**
      * Smallest width a column is allowed to shrink to before the host scrolls horizontally instead.
-     * Any CSS length.
+     * Any CSS length. Empty (the default) applies no floor.
+     *
+     * `fixedLayout` makes the table fit its container exactly, so past a certain width the columns
+     * keep shrinking and wrap every cell to a couple of characters per line: technically visible,
+     * unreadable, and never scrollable. Set this to scroll instead once a column would go below it.
+     * The floor is derived as this times the column count, so it scales with the table rather than
+     * needing a hand-picked number per page.
      *
-     * `fixedLayout` makes the table fit its container exactly — so without a floor a narrow viewport
-     * just keeps shrinking the columns, wrapping every cell to a couple of characters per line:
-     * technically visible, unreadable, and never scrollable. The floor is derived as this times the
-     * column count, so it scales with the table rather than needing a hand-picked number per page.
+     * Opt-in rather than on by default, because a derived floor cannot know the table's container: a
+     * full-width page table has room for one, while the same table in a dashboard card or beside a
+     * details pane would just scroll at every ordinary window size. Only the consumer knows which it
+     * is — reach for it when the table can actually get narrow enough to matter, typically a
+     * full-width table on a phone.
      *
      * Only applies with `fixedLayout`. Without it the table lays out `auto`, sizing to its content
      * and overflowing the host — which scrolls on its own.
      */
-    minColumnWidth = input('120px', ...(ngDevMode ? [{ debugName: "minColumnWidth" }] : []));
+    minColumnWidth = input('', ...(ngDevMode ? [{ debugName: "minColumnWidth" }] : []));
     /**
      * Explicit width floor, overriding the {@link minColumnWidth} derivation. Any CSS length. Reach
      * for this only when a specific table needs a floor its column count doesn't imply.
      */
     minWidth = input('', ...(ngDevMode ? [{ debugName: "minWidth" }] : []));
-    /** The floor actually applied to the table — explicit if given, else derived. */
+    /** The floor actually applied to the table — explicit if given, else derived, else none. */
     resolvedMinWidth = computed(() => {
         const explicit = this.minWidth();
         if (explicit) {
             return explicit;
         }
-        if (!this.fixedLayout()) {
+        const perColumn = this.minColumnWidth();
+        if (!perColumn || !this.fixedLayout()) {
             return null;
         }
-        return `calc(${this.minColumnWidth()} * ${this.effectiveDisplayedColumns().length})`;
+        return `calc(${perColumn} * ${this.effectiveDisplayedColumns().length})`;
     }, ...(ngDevMode ? [{ debugName: "resolvedMinWidth" }] : []));
     // --- Outputs ---
     sortChange = output();