@wildwinter/app-shell 0.19.0 → 0.21.0

package/dist/index.d.cts

@@ -334,6 +334,11 @@ interface GameIdEditorOptions {
     validate?: (gameId: string) => boolean;
     /** Where the panel goes, for hosts that anchor it somewhere tight. */
     prefer?: "left" | "below" | "centre";
+    /** Chrome the panel must not cover, passed through to the anchored panel: an
+     *  app with a problems bar along the bottom wants it usable while an address
+     *  is being edited. Without this the editor is the one panel in a host that
+     *  can land on top of its own bars. */
+    keepClear?: string[];
 }
 /**
  * Open it. Returns false when that click TOGGLED the panel shut, which is the
@@ -462,6 +467,12 @@ interface CommentsOptions {
     deleteMessage?: (threadId: string, index: number) => void;
     /** Where the panel sits: "centre" for a point on a canvas (see anchored.ts). */
     prefer?: "left" | "below" | "centre";
+    /**
+     * Chrome the panel must not cover. Defaults to `[".problembar"]`, which was
+     * hardcoded here and should not have been: one app's class name in shared
+     * code, and it misses any OTHER bar a host has. A second app arrived with two.
+     */
+    keepClear?: string[];
     /**
      * The text a thread is pinned to, shown above it as a quotation.
      *

package/dist/index.d.ts

@@ -334,6 +334,11 @@ interface GameIdEditorOptions {
     validate?: (gameId: string) => boolean;
     /** Where the panel goes, for hosts that anchor it somewhere tight. */
     prefer?: "left" | "below" | "centre";
+    /** Chrome the panel must not cover, passed through to the anchored panel: an
+     *  app with a problems bar along the bottom wants it usable while an address
+     *  is being edited. Without this the editor is the one panel in a host that
+     *  can land on top of its own bars. */
+    keepClear?: string[];
 }
 /**
  * Open it. Returns false when that click TOGGLED the panel shut, which is the
@@ -462,6 +467,12 @@ interface CommentsOptions {
     deleteMessage?: (threadId: string, index: number) => void;
     /** Where the panel sits: "centre" for a point on a canvas (see anchored.ts). */
     prefer?: "left" | "below" | "centre";
+    /**
+     * Chrome the panel must not cover. Defaults to `[".problembar"]`, which was
+     * hardcoded here and should not have been: one app's class name in shared
+     * code, and it misses any OTHER bar a host has. A second app arrived with two.
+     */
+    keepClear?: string[];
     /**
      * The text a thread is pinned to, shown above it as a quotation.
      *

package/dist/index.js

@@ -50,7 +50,7 @@ function tagChips(holder, onChange) {
     const chip = el("span", "shell-tag", v);
     const x = el("button", "shell-tag-x", "\u2715");
     x.type = "button";
-    x.title = `remove ${v}`;
+    x.dataset["tip"] = `remove ${v}`;
     x.setAttribute("aria-label", `remove ${v}`);
     x.addEventListener("click", () => {
       holder.values = (holder.values ?? []).filter((o) => o !== v);
@@ -307,7 +307,7 @@ function expandableRow(opts) {
     for (const d of opts.details) details.append(d);
     const toggle = el("button", "set-expand");
     toggle.type = "button";
-    toggle.title = "More";
+    toggle.dataset.tip = "More";
     toggle.setAttribute("aria-label", "More");
     toggle.setAttribute("aria-expanded", "false");
     toggle.addEventListener("click", () => {
@@ -705,7 +705,8 @@ function openGameIdEditor(opts) {
     className: "shell-id-editor",
     title: opts.title ?? "Game ID",
     width: 260,
-    ...opts.prefer !== void 0 ? { prefer: opts.prefer } : {}
+    ...opts.prefer !== void 0 ? { prefer: opts.prefer } : {},
+    ...opts.keepClear !== void 0 ? { keepClear: opts.keepClear } : {}
   });
   if (!panel) return false;
   const input = el("input", "shell-id-input");
@@ -1004,7 +1005,7 @@ function openComments(opts) {
     // want it to the left; and never over the problems bar, which an author may
     // be stepping through while reading the thread.
     prefer: opts.prefer ?? "below",
-    keepClear: [".problembar"]
+    keepClear: opts.keepClear ?? [".problembar"]
   });
   if (!panel) return;
   const { body, close } = panel;
@@ -1052,7 +1053,8 @@ function openComments(opts) {
         );
         if (opts.deleteMessage && message.deleted !== true) {
           const bin = el("button", { className: "shell-cmt-del", text: "\u2715" });
-          bin.title = "Delete this comment";
+          bin.dataset.tip = "Delete this comment";
+          bin.setAttribute("aria-label", "Delete this comment");
           bin.addEventListener("click", () => opts.deleteMessage?.(thread.id, index));
           head.append(bin);
         }