@truenas/ui-components 0.1.73 → 0.1.74

package/fesm2022/truenas-ui-components.mjs

@@ -52,20 +52,24 @@ function kebabTestSegment(part) {
  * Normalizes the base — a single token or an array of segments — into a flat
  * segment array and appends the suffixes, producing a value that is itself a
  * valid {@link TnTestIdValue}. This is the canonical "derive a per-child id from
- * a parent base" operation, e.g. a dialog's close button (`[base, 'close']`) or
- * a select's per-option id (`[base, option.label]`). Centralizing it keeps the
- * `string | array` flattening contract in one place rather than re-implemented
- * at each call site.
+ * a parent base" operation, e.g. a select's per-option id
+ * (`[base, option.label]`) or a menu item's id (`[base, item.id]`). Centralizing
+ * it keeps the `string | array` flattening contract in one place rather than
+ * re-implemented at each call site.
+ *
+ * Note this is *base-first*: the suffix trails the base. Fixed chrome whose role
+ * should lead (e.g. `tn-dialog-shell`'s `button-close-<base>`) prepends the role
+ * manually instead of calling this.
  *
  * Falsy segments are preserved here (not filtered) so `composeTestId` can apply
- * its own drop/scoping rules — `scopeTestId(undefined, 'close')` yields
- * `[undefined, 'close']`, which `composeTestId('button', …)` renders as the
- * unscoped `button-close`.
+ * its own drop/scoping rules — `scopeTestId(undefined, 'edit')` yields
+ * `[undefined, 'edit']`, which `composeTestId('menu-item', …)` renders as the
+ * unscoped `menu-item-edit`.
  *
  * @example
  * scopeTestId('actions', 'edit')        // ['actions', 'edit']
  * scopeTestId(['menu', 'main'], 'edit') // ['menu', 'main', 'edit']
- * scopeTestId(undefined, 'close')       // [undefined, 'close']
+ * scopeTestId(undefined, 'edit')        // [undefined, 'edit']
  */
 function scopeTestId(base, ...suffix) {
     return [...(Array.isArray(base) ? base : [base]), ...suffix];
@@ -12585,14 +12589,32 @@ class TnDialogShellComponent {
     /**
      * Optional semantic base that scopes the shell's chrome buttons. The close
      * and fullscreen buttons emit `button-close` / `button-fullscreen` by default,
-     * or `button-<testId>-close` / `-fullscreen` when a base is provided (useful
-     * when more than one dialog can be open).
+     * or `button-close-<testId>` / `button-fullscreen-<testId>` when a base is
+     * provided (useful when more than one dialog can be open).
      */
     testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
-    /** Scoped test-id segments for the close button (`button-[<base>-]close`). */
-    closeTestId = computed(() => scopeTestId(this.testId(), 'close'), ...(ngDevMode ? [{ debugName: "closeTestId" }] : []));
-    /** Scoped test-id segments for the fullscreen button (`button-[<base>-]fullscreen`). */
-    fullscreenTestId = computed(() => scopeTestId(this.testId(), 'fullscreen'), ...(ngDevMode ? [{ debugName: "fullscreenTestId" }] : []));
+    /**
+     * The `testId` base normalized to a flat segment array. Nothing is dropped
+     * here — `composeTestId` (via the `[tnTestId]` directive) filters falsy
+     * segments, so an unset base collapses to the bare role (`button-close`).
+     */
+    baseSegments = computed(() => {
+        const base = this.testId();
+        return Array.isArray(base) ? base : [base];
+    }, ...(ngDevMode ? [{ debugName: "baseSegments" }] : []));
+    /**
+     * Role-first test-id segments for the close button: `button-close[-<base>]`.
+     *
+     * The close and fullscreen buttons are fixed dialog chrome, not content
+     * children, so the role leads rather than the base (content children are
+     * base-first via `scopeTestId`). This keeps every dialog's close button under
+     * a shared `button-close-*` prefix — it matches webui's established
+     * close-button ids and lets automation target "all close buttons" with one
+     * selector.
+     */
+    closeTestId = computed(() => ['close', ...this.baseSegments()], ...(ngDevMode ? [{ debugName: "closeTestId" }] : []));
+    /** Role-first test-id segments for the fullscreen button: `button-fullscreen[-<base>]`. */
+    fullscreenTestId = computed(() => ['fullscreen', ...this.baseSegments()], ...(ngDevMode ? [{ debugName: "fullscreenTestId" }] : []));
     /** Stable id for the title heading, referenced by the dialog's aria-labelledby. */
     titleId = `tn-dialog-title-${nextUniqueId++}`;
     isFullscreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullscreen" }] : []));