@tangle-network/ui 11.51.19 → 11.51.20

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 11.51.20
+
+### Patch Changes
+
+- 9d50cbe: `FileTabs`: `onClose` is optional. Without it the tabs render no close buttons and Delete does nothing, for tab strips that only switch between files.
+
 ## 11.51.19
 
 ### Patch Changes

package/dist/files/file-tabs.d.ts

@@ -15,7 +15,7 @@ export interface FileTabsProps {
   tabs: FileTabData[];
   activeId?: string;
   onSelect: (id: string) => void;
-  onClose: (id: string) => void;
+  onClose?: (id: string) => void;
   /** Accessible name of the tab list. Defaults to "Open files". */
   label?: string;
   className?: string;

package/dist/files/file-tabs.js

@@ -64,14 +64,14 @@ function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open files", cla
 			Home: 0,
 			End: last
 		}[event.key];
-		if (at < 0 || next === void 0 && event.key !== "Delete") return;
+		if (at < 0 || next === void 0 && (event.key !== "Delete" || !onClose)) return;
 		event.preventDefault();
 		if (next !== void 0) {
 			tabButtons()[next]?.focus();
 			onSelect(tabs[next].id);
 			return;
 		}
-		onClose(tabs[at].id);
+		onClose?.(tabs[at].id);
 		requestAnimationFrame(() => (tabButtons().find((tab) => tab.getAttribute("aria-selected") === "true") ?? tabButtons().at(-1))?.focus());
 	};
 	return /* @__PURE__ */ jsx("div", {
@@ -96,7 +96,7 @@ function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open files", cla
 					"aria-label": `${tab.name}${hint ? ` in ${hint}` : ""}${tab.dirty ? ", unsaved changes" : ""}`,
 					tabIndex: isActive || !activeId && tab === tabs[0] ? 0 : -1,
 					onClick: () => onSelect(tab.id),
-					className: cn("flex h-full min-w-0 items-center gap-1.5 rounded-t-lg pl-3 pr-1", focusRingInset),
+					className: cn("flex h-full min-w-0 items-center gap-1.5 rounded-t-lg pl-3", onClose ? "pr-1" : "pr-3", focusRingInset),
 					children: [
 						/* @__PURE__ */ jsx(Icon, {
 							"aria-hidden": true,
@@ -121,12 +121,12 @@ function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open files", cla
 							className: "size-1.5 shrink-0 rounded-full bg-[var(--accent-text)]"
 						})
 					]
-				}), /* @__PURE__ */ jsx("button", {
+				}), onClose && /* @__PURE__ */ jsx("button", {
 					type: "button",
 					tabIndex: -1,
 					"aria-label": `Close ${tab.name}`,
 					onClick: () => onClose(tab.id),
-					className: cn("mr-1.5 grid size-5 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-[var(--ix-hover-bg)] hover:text-foreground", controlMotion, !isActive && "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"),
+					className: cn("mr-1.5 grid size-5 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-[var(--ix-hover-bg)] hover:text-foreground", "[transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none", !isActive && "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"),
 					children: /* @__PURE__ */ jsx(X, {
 						"aria-hidden": true,
 						className: "size-3"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.51.19",
+  "version": "11.51.20",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -216,7 +216,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.31.4",
+    "@tangle-network/brand": "^1.31.8",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/files/file-tabs.tsx

@@ -23,7 +23,7 @@ export interface FileTabsProps {
   tabs: FileTabData[];
   activeId?: string;
   onSelect: (id: string) => void;
-  onClose: (id: string) => void;
+  onClose?: (id: string) => void; // without it the tabs have no close buttons and Delete does nothing
   /** Accessible name of the tab list. Defaults to "Open files". */
   label?: string;
   className?: string;
@@ -84,14 +84,14 @@ export function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open file
     const at = tabButtons().indexOf(event.target as HTMLButtonElement);
     const last = tabs.length - 1;
     const next = ({ ArrowRight: at === last ? 0 : at + 1, ArrowLeft: at === 0 ? last : at - 1, Home: 0, End: last } as Record<string, number>)[event.key];
-    if (at < 0 || (next === undefined && event.key !== "Delete")) return;
+    if (at < 0 || (next === undefined && (event.key !== "Delete" || !onClose))) return;
     event.preventDefault();
     if (next !== undefined) {
       tabButtons()[next]?.focus();
       onSelect(tabs[next]!.id);
       return;
     }
-    onClose(tabs[at]!.id);
+    onClose?.(tabs[at]!.id);
     // Once the host has re-rendered, keep focus on the tab it opened.
     requestAnimationFrame(() => (tabButtons().find((tab) => tab.getAttribute("aria-selected") === "true") ?? tabButtons().at(-1))?.focus());
   };
@@ -136,7 +136,7 @@ export function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open file
               aria-label={`${tab.name}${hint ? ` in ${hint}` : ""}${tab.dirty ? ", unsaved changes" : ""}`}
               tabIndex={isActive || (!activeId && tab === tabs[0]) ? 0 : -1}
               onClick={() => onSelect(tab.id)}
-              className={cn("flex h-full min-w-0 items-center gap-1.5 rounded-t-lg pl-3 pr-1", focusRingInset)}
+              className={cn("flex h-full min-w-0 items-center gap-1.5 rounded-t-lg pl-3", onClose ? "pr-1" : "pr-3", focusRingInset)}
             >
               <Icon aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />
               <span className="flex min-w-0">
@@ -146,7 +146,7 @@ export function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open file
               {hint && <span className="min-w-0 truncate text-muted-foreground">· {hint}</span>}
               {tab.dirty && <span aria-hidden className="size-1.5 shrink-0 rounded-full bg-[var(--accent-text)]" />}
             </button>
-            <button
+            {onClose && <button
               type="button"
               tabIndex={-1}
               aria-label={`Close ${tab.name}`}
@@ -158,7 +158,7 @@ export function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open file
               )}
             >
               <X aria-hidden className="size-3" />
-            </button>
+            </button>}
           </div>
         );
       })}