refactor(ui): drop the tree's disabled rows

VS Code trees have no disabled row: TreeItem has no such field, and every
aria-disabled in the workbench is an action item or a toggle, never a list
row. Ours cost a guard in the policy and seven filters in the transitions,
plus a CSS rule and a branch on every row, and nothing used it.

A row that should read as unavailable can still be dimmed through
`className`, which is how native styles one.

Author: EhabY

packages/ui/README.md

@@ -89,12 +89,10 @@ the row. Actions stay live on plain hover, as in the native list, and are
 isolated from row selection and expansion.
 
 Arrow Up/Down, Home, End, PageUp/PageDown, and buffered prefix/fuzzy typing
-move the active row through visible rows, including disabled rows. Arrow Right
+move the active row through visible rows. Arrow Right
 expands a branch or enters it; Arrow Left collapses it or moves to its parent.
-Disabled rows have `aria-disabled`, remain keyboard-navigation targets, and
-cannot be selected or expanded.
 
-`expandMode="singleClick"` is the default: clicking an enabled branch selects
+`expandMode="singleClick"` is the default: clicking a branch selects
 and toggles it, and Enter does the same. With `expandMode="doubleClick"`, a
 single click or Enter only selects and a double click toggles expansion. Space
 toggles a branch without selecting it, or selects a leaf. A normal-row twistie
@@ -111,7 +109,7 @@ can intercept shortcuts with `preventDefault()`.
 `aria-multiselectable`. `multiSelectModifier` chooses the toggle modifier:
 `"ctrlCmd"` (the default) uses Ctrl/Cmd and `"alt"` uses Alt. Shift-click and
 Shift+Arrow extend from the selection anchor; modifier clicks take precedence
-over expansion. Ctrl/Cmd+A selects enabled visible rows in the active sibling
+over expansion. Ctrl/Cmd+A selects the visible rows in the active sibling
 scope.
 
 `stickyScroll` pins ancestors against the nearest scrolling ancestor. `true`

packages/ui/src/components/Tree/Tree.css

@@ -59,9 +59,7 @@
 }
 
 /* Native skips hover on selected and focused rows, keeping their outlines. */
-.ui-tree-item:not([aria-disabled="true"]):not([aria-selected="true"]):not(
-		.ui-tree-item--focused
-	)
+.ui-tree-item:not([aria-selected="true"]):not(.ui-tree-item--focused)
 	> .ui-tree-item__row:hover {
 	color: var(--ui-list-hover-foreground);
 	background: var(--ui-list-hover-background);
@@ -81,11 +79,6 @@
 	background: var(--ui-list-active-selection-background);
 }
 
-.ui-tree-item[aria-disabled="true"] > .ui-tree-item__row {
-	color: var(--ui-disabled-foreground, currentColor);
-	cursor: default;
-}
-
 .ui-tree-item__indent {
 	position: absolute;
 	inset-block: 0;
@@ -186,8 +179,7 @@
 }
 
 @media (forced-colors: active) {
-	.ui-tree-item:not([aria-disabled="true"]):not([aria-selected="true"])
-		> .ui-tree-item__row:hover,
+	.ui-tree-item:not([aria-selected="true"]) > .ui-tree-item__row:hover,
 	.ui-tree-item[aria-selected="true"] > .ui-tree-item__row {
 		color: HighlightText;
 		background: Highlight;

packages/ui/src/components/Tree/Tree.stories.tsx

@@ -32,7 +32,7 @@ const FILES: readonly TreeDemoNode[] = [
 				}),
 				node("styles", { label: "Tree.css", icon: "symbol-color" }),
 			]),
-			node("tests", { icon: "beaker", disabled: true }),
+			node("tests", { icon: "beaker" }),
 		],
 		{ label: "src" },
 	),
@@ -102,7 +102,6 @@ const ROW_STATES = [
 		className: "story-row-action",
 		action: { icon: "trash", label: "Delete item" },
 	}),
-	node("disabled", { label: "Disabled item", disabled: true }),
 ];
 const rowStateParameters = {
 	pseudo: { hover: [".story-row-action > .ui-tree-item__row"] },

packages/ui/src/components/Tree/TreeRow.tsx

@@ -50,9 +50,7 @@ function TreeRowSurface({
 			{tooltip ? <Tooltip content={tooltip}>{label}</Tooltip> : label}
 			{/* Native keeps a row's actions live on plain hover; CSS reveals them. */}
 			{node.action ? (
-				<span className="ui-tree-item__action" inert={node.disabled}>
-					{node.action}
-				</span>
+				<span className="ui-tree-item__action">{node.action}</span>
 			) : null}
 		</div>
 	);
@@ -91,8 +89,7 @@ export function TreeRow(props: TreeRowProps): React.JSX.Element {
 			aria-level={row.level}
 			aria-posinset={row.posInSet}
 			aria-setsize={row.setSize}
-			aria-selected={node.disabled ? undefined : selected}
-			aria-disabled={node.disabled ? true : undefined}
+			aria-selected={selected}
 			aria-expanded={expanded}
 			tabIndex={-1}
 			className={cx(

packages/ui/src/components/Tree/treeModel.ts

@@ -19,7 +19,6 @@ export type TreeNode = TreeNodeLabel & {
 	icon?: CodiconName;
 	/** Hover content; defaults to the text value, `null` opts out. */
 	tooltip?: ReactNode;
-	disabled?: boolean;
 	action?: ReactNode;
 	className?: string;
 	children?: readonly TreeNode[];

packages/ui/src/components/Tree/treePolicy.ts

@@ -116,7 +116,6 @@ export function pointerCommands(
 	input: PointerCommandInput,
 ): readonly TreeCommand[] {
 	const { row, source, onTwistie, modifiers } = input;
-	if (row.node.disabled) return [];
 	const id = row.node.id;
 	if (isSelectionGesture(modifiers, input)) {
 		const select = selectCommand(id, {
@@ -188,7 +187,7 @@ export function keyboardCommands(input: KeyboardCommandInput) {
 	const selectionModifier = isSelectionModifier(modifiers, input);
 	switch (key) {
 		case "ArrowRight": {
-			if (row.expanded === false && !row.node.disabled) {
+			if (row.expanded === false) {
 				return result([toggleCommand(id)]);
 			}
 			const child = row.expanded ? rows[rows.indexOf(row) + 1] : undefined;
@@ -197,14 +196,13 @@ export function keyboardCommands(input: KeyboardCommandInput) {
 			);
 		}
 		case "ArrowLeft": {
-			if (row.expanded === true && !row.node.disabled) {
+			if (row.expanded === true) {
 				return result([toggleCommand(id)]);
 			}
 			const parent = parentId(row);
 			return result(parent ? [rowCommand("focus", parent)] : []);
 		}
 		case "Enter":
-			if (row.node.disabled) return result([]);
 			if (selectionModifier && modifiers.shiftKey) {
 				return result([selectCommand(id, { toggle: true })]);
 			}
@@ -215,7 +213,6 @@ export function keyboardCommands(input: KeyboardCommandInput) {
 					: []),
 			]);
 		case " ":
-			if (row.node.disabled) return result([]);
 			return result([
 				row.expanded === undefined
 					? selectCommand(id, { toggle: selectionModifier })

packages/ui/src/components/Tree/treeTransition.ts

@@ -66,9 +66,7 @@ export function deriveTreeInteractionView(
 	}
 
 	const controlledKey = selectionKey(controlledIds);
-	const selectedIds = new Set(
-		controlledIds.filter((id) => !rowsById.get(id)?.node.disabled),
-	);
+	const selectedIds = new Set(controlledIds);
 	const focusedId =
 		nextState.focusTarget && visibleIds.has(nextState.focusTarget.id)
 			? nextState.focusTarget.id
@@ -145,21 +143,18 @@ function selectionRange(
 	anchorId: string,
 	targetId: string,
 ): Set<string> | undefined {
-	const enabledIds = rows
-		.filter((row) => !row.node.disabled)
-		.map((row) => row.node.id);
-	const anchor = enabledIds.indexOf(anchorId);
-	const target = enabledIds.indexOf(targetId);
+	const rowIds = rows.map((row) => row.node.id);
+	const anchor = rowIds.indexOf(anchorId);
+	const target = rowIds.indexOf(targetId);
 	if (anchor < 0 || target < 0) return undefined;
 
 	const ids = new Set(selectedIds);
 	let start = anchor;
 	let end = anchor;
-	while (start > 0 && ids.has(enabledIds[start - 1] ?? "")) start--;
-	while (end < enabledIds.length - 1 && ids.has(enabledIds[end + 1] ?? ""))
-		end++;
-	for (const id of enabledIds.slice(start, end + 1)) ids.delete(id);
-	for (const id of enabledIds.slice(
+	while (start > 0 && ids.has(rowIds[start - 1] ?? "")) start--;
+	while (end < rowIds.length - 1 && ids.has(rowIds[end + 1] ?? "")) end++;
+	for (const id of rowIds.slice(start, end + 1)) ids.delete(id);
+	for (const id of rowIds.slice(
 		Math.min(anchor, target),
 		Math.max(anchor, target) + 1,
 	)) {
@@ -176,7 +171,7 @@ function selectRow(
 	row: TreeRowModel | undefined,
 	{ toggle, range, preserveHidden = true }: SelectCommandOptions = {},
 ): readonly [Set<string>, string] | undefined {
-	if (!row || row.node.disabled) return undefined;
+	if (!row) return undefined;
 	const id = row.node.id;
 	if (!multiSelect) return [new Set([id]), id];
 
@@ -204,15 +199,12 @@ function scopedSelection(
 ): Set<string> {
 	const scopeId = parentId(row);
 	const descendants = model.rows.filter(
-		(candidate) =>
-			!candidate.node.disabled &&
-			(scopeId === undefined || candidate.pathIds.includes(scopeId)),
+		(candidate) => scopeId === undefined || candidate.pathIds.includes(scopeId),
 	);
 	const ids = new Set(descendants.map((candidate) => candidate.node.id));
 	const scope = scopeId ? model.rowsById.get(scopeId) : undefined;
 	if (
 		scope &&
-		!scope.node.disabled &&
 		descendants.every((candidate) => selectedIds.has(candidate.node.id))
 	) {
 		ids.add(scope.node.id);
@@ -230,7 +222,6 @@ function toggleBranches(
 	const affected = recursive
 		? model.allRows.filter(
 				(candidate) =>
-					!candidate.node.disabled &&
 					candidate.node.children &&
 					(candidate === row || candidate.pathIds.includes(row.node.id)),
 			)
@@ -298,7 +289,7 @@ export function transitionTree(
 	};
 	const emit = (ids: ReadonlySet<string>, nextAnchor?: string): void => {
 		selection = model.allRows
-			.filter((row) => ids.has(row.node.id) && !row.node.disabled)
+			.filter((row) => ids.has(row.node.id))
 			.map((row) => row.node.id);
 		selectedIds = new Set(selection);
 		currentKey = selectionKey(selection);
@@ -354,7 +345,7 @@ export function transitionTree(
 				break;
 			}
 			case "toggle":
-				if (row && !row.node.disabled && row.expanded !== undefined) {
+				if (row?.expanded !== undefined) {
 					expandedIds = toggleBranches(
 						row,
 						model,

packages/ui/storybook/Tree.demo.tsx

@@ -12,7 +12,6 @@ export interface TreeDemoNode {
 	label: string;
 	icon?: CodiconName;
 	action?: { icon: CodiconName; label: string };
-	disabled?: boolean;
 	className?: string;
 	/** Branches start expanded unless this says otherwise. */
 	collapsed?: boolean;
@@ -51,7 +50,6 @@ function toTreeNodes(nodes: readonly TreeDemoNode[]): readonly TreeNode[] {
 		id: node.id,
 		label: node.label,
 		icon: node.icon,
-		disabled: node.disabled,
 		className: node.className,
 		action: node.action && (
 			<IconButton icon={node.action.icon} label={node.action.label} />

test/webview/ui/tree.core.test.tsx

@@ -65,8 +65,6 @@ describe("Tree", () => {
 		expect(child).toHaveAttribute("aria-selected", "true");
 		expect(child).toHaveAttribute("aria-posinset", "1");
 		expect(child).toHaveAttribute("aria-setsize", "2");
-		expect(treeItem("Disabled")).toHaveAttribute("aria-disabled", "true");
-		expect(treeItem("Disabled")).not.toHaveAttribute("aria-selected");
 		expect(treeItem("Last")).not.toHaveAttribute("aria-expanded");
 		expect(screen.queryByRole("group")).toBeNull();
 	});

test/webview/ui/tree.keyboard.test.tsx

@@ -38,7 +38,6 @@ const NAV_NODES: readonly TreeNode[] = [
 		id: "alpha",
 		label: "Alpha",
 		children: [
-			{ id: "disabled", label: "Disabled", disabled: true },
 			{ id: "apricot", label: "Apricot" },
 			{ id: "amber", label: "Amber" },
 		],
@@ -80,23 +79,17 @@ function NavTree({
 }
 
 describe("Tree keyboard navigation", () => {
-	it("moves through visible and disabled rows with arrows, Home, and End", () => {
+	it("moves through visible rows with arrows, Home, and End", () => {
 		render(<NavTree />);
 		for (const [from, key, to] of [
-			["Alpha", "ArrowDown", "Disabled"],
-			["Disabled", "ArrowDown", "Apricot"],
+			["Alpha", "ArrowDown", "Apricot"],
 			["Apricot", "ArrowDown", "Amber"],
 			["Amber", "End", "Bravo"],
 			["Bravo", "Home", "Alpha"],
 			["Alpha", "ArrowUp", "Alpha"],
 		] as const) {
 			press(from, key, to);
 		}
-		const disabled = treeItem("Disabled");
-		act(() => disabled.focus());
-		press("Disabled", "ArrowDown", "Apricot");
-		act(() => disabled.focus());
-		press("Disabled", "ArrowUp", "Alpha");
 	});
 	it("expands, enters, returns to, and collapses a branch", () => {
 		const onExpandedChange = vi.fn();