@workbench-kit/react 0.0.2-prototype.0.1.4 → 0.0.2-prototype.0.2.11

package/src/workbench/workspace/WorkspaceExplorer.tsx

@@ -10,6 +10,7 @@ import {
   type ReactNode,
 } from 'react';
 import {
+  createEmptyWorkspaceSelection,
   getWorkspaceSelectionActionPaths,
   normalizeWorkspaceSelectionPaths,
   parentPathOf,
@@ -17,20 +18,29 @@ import {
   type WorkspaceSelectionMode,
   type WorkspaceSelectionState,
 } from '@workbench-kit/workspace';
-import { SideBarList, SideBarListItem, sideBarTreeDepthStyle } from '../../layout/SideBarViewFrame';
+import { SideBarList, SideBarListItem, useSidebarSectionBaseDepth } from '../../layout/sidebar';
+import { TextInput } from '../../primitives/text-input';
 import { cxCodicon } from '../../utils/codicon';
+import { explorerTreeDepthStyle } from './explorer-tree-style';
 import { flattenWorkspaceTree } from './tree';
+import {
+  resolveWorkspaceExplorerHorizontalNavigationAction,
+  resolveWorkspaceExplorerNavigationPath,
+} from './workspaceExplorerKeyboard.js';
 import { WorkspaceFileIcon } from './WorkspaceFileIcon';
 import type { WorkspaceTreeNode } from './types';
 
 export const WORKSPACE_EXPLORER_DRAG_DATA_TYPE = 'application/x-newchobo-ui-workspace-paths';
 export const WORKSPACE_EXPLORER_DRAG_METADATA_DATA_TYPE = `${WORKSPACE_EXPLORER_DRAG_DATA_TYPE}.metadata`;
 
+export type WorkspaceExplorerSelectionChangeReason =
+  'clear' | 'click' | 'context-menu' | 'drag-start' | 'folder-click' | 'keyboard';
+
 export interface WorkspaceExplorerSelectionChangeMeta {
-  event: DragEvent<HTMLButtonElement> | MouseEvent<HTMLButtonElement>;
-  mode: WorkspaceSelectionMode;
-  node: WorkspaceTreeNode;
-  reason: 'click' | 'context-menu' | 'drag-start';
+  event?: DragEvent<HTMLButtonElement> | MouseEvent<HTMLButtonElement>;
+  mode?: WorkspaceSelectionMode;
+  node?: WorkspaceTreeNode;
+  reason: WorkspaceExplorerSelectionChangeReason;
 }
 
 export interface WorkspaceExplorerItemActionMeta {
@@ -67,10 +77,7 @@ export interface WorkspaceExplorerMoveRequestMeta {
 }
 
 export type WorkspaceExplorerInlineEditKind =
-  | 'create-file'
-  | 'create-folder'
-  | 'rename-file'
-  | 'rename-folder';
+  'create-file' | 'create-folder' | 'rename-file' | 'rename-folder';
 
 export interface WorkspaceExplorerInlineEditState {
   error?: ReactNode;
@@ -88,6 +95,8 @@ export interface WorkspaceExplorerInlineEditCommitMeta {
 
 export interface WorkspaceExplorerProps {
   activePath?: string;
+  /** Accessible name for the `role="tree"` list. Defaults to "Workspace files". */
+  ariaLabel?: string;
   dragDataType?: string;
   dragMetadataDataType?: string;
   dragMetadataFactory?: WorkspaceExplorerDragMetadataFactory;
@@ -99,6 +108,7 @@ export interface WorkspaceExplorerProps {
   onInlineEditCancel?: (edit: WorkspaceExplorerInlineEditState) => void;
   onInlineEditCommit?: (meta: WorkspaceExplorerInlineEditCommitMeta) => void;
   onInlineEditValueChange?: (value: string, edit: WorkspaceExplorerInlineEditState) => void;
+  onBackgroundContextMenu?: (event: MouseEvent<HTMLUListElement>) => void;
   onItemContextMenu?: (
     event: MouseEvent<HTMLButtonElement>,
     node: WorkspaceTreeNode,
@@ -112,20 +122,30 @@ export interface WorkspaceExplorerProps {
     meta: WorkspaceExplorerSelectionChangeMeta,
   ) => void;
   onToggleFolder: (path: string) => void;
+  focusedPath?: string | undefined;
+  renderItemActions?: (node: WorkspaceTreeNode, meta: WorkspaceExplorerItemActionMeta) => ReactNode;
   selectedPaths?: Iterable<string>;
   selectionAnchorPath?: string;
+  /**
+   * When true (default), Arrow/Home/End focus updates also emit selection
+   * (file → single `paths`; folder → `{ focusedPath, paths: [] }`).
+   */
+  selectionFollowsFocus?: boolean;
 }
 
 export function WorkspaceExplorer({
   activePath,
+  ariaLabel = 'Workspace files',
   dragDataType = WORKSPACE_EXPLORER_DRAG_DATA_TYPE,
   dragMetadataDataType = WORKSPACE_EXPLORER_DRAG_METADATA_DATA_TYPE,
   dragMetadataFactory,
   expandedPaths,
   filterQuery = '',
+  focusedPath,
   inlineEdit,
   nodes,
   onActivateFile,
+  onBackgroundContextMenu,
   onInlineEditCancel,
   onInlineEditCommit,
   onInlineEditValueChange,
@@ -135,11 +155,15 @@ export function WorkspaceExplorer({
   onRequestRename,
   onSelectionChange,
   onToggleFolder,
+  renderItemActions,
   selectedPaths = [],
   selectionAnchorPath,
+  selectionFollowsFocus = true,
 }: WorkspaceExplorerProps) {
+  const sectionBaseDepth = useSidebarSectionBaseDepth();
   const draggedPathsRef = useRef<string[]>([]);
   const inlineEditInputRef = useRef<HTMLInputElement>(null);
+  const inlineEditCommitStartedRef = useRef(false);
   const [dropTargetPath, setDropTargetPath] = useState<string | null>(null);
   const visibleNodes = useMemo(
     () => flattenWorkspaceTree({ expandedPaths, filterQuery, nodes }),
@@ -170,6 +194,7 @@ export function WorkspaceExplorer({
     : undefined;
 
   useEffect(() => {
+    inlineEditCommitStartedRef.current = false;
     const input = inlineEditInputRef.current;
     if (!input) return;
 
@@ -177,19 +202,29 @@ export function WorkspaceExplorer({
     input.select();
   }, [inlineEditKey]);
 
+  useEffect(() => {
+    // Validation failures keep the same draft id; allow Enter/blur retry after an error.
+    if (inlineEdit?.error) {
+      inlineEditCommitStartedRef.current = false;
+    }
+  }, [inlineEdit?.error]);
+
   const selectFile = (event: MouseEvent<HTMLButtonElement>, node: WorkspaceTreeNode) => {
     const mode = resolveSelectionMode(event);
+    const nextSelection = onSelectionChange
+      ? {
+          ...updateWorkspaceSelection({
+            mode,
+            orderedPaths: visibleFilePaths,
+            selection: currentSelection,
+            targetPath: node.path,
+          }),
+          focusedPath: node.path,
+        }
+      : currentSelection;
 
     if (onSelectionChange) {
-      onSelectionChange(
-        updateWorkspaceSelection({
-          mode,
-          orderedPaths: visibleFilePaths,
-          selection: currentSelection,
-          targetPath: node.path,
-        }),
-        { event, mode, node, reason: 'click' },
-      );
+      onSelectionChange(nextSelection, { event, mode, node, reason: 'click' });
     }
 
     if (mode === 'single' || !onSelectionChange) {
@@ -197,15 +232,48 @@ export function WorkspaceExplorer({
     }
   };
 
+  const selectFolder = (event: MouseEvent<HTMLButtonElement>, node: WorkspaceTreeNode) => {
+    onSelectionChange?.(
+      {
+        anchorPath: undefined,
+        focusedPath: node.path,
+        paths: [],
+      },
+      { event, mode: 'single', node, reason: 'folder-click' },
+    );
+    onToggleFolder(node.path);
+  };
+
+  const clearSelection = () => {
+    onSelectionChange?.(createEmptyWorkspaceSelection(), { reason: 'clear' });
+  };
+
   const getItemActionMeta = (node: WorkspaceTreeNode): WorkspaceExplorerItemActionMeta => {
-    const selected = node.type === 'file' && selectedPathSet.has(node.path);
-    const selection =
-      node.type === 'file' && !selected
-        ? {
-            anchorPath: node.path,
-            paths: [node.path],
-          }
-        : currentSelection;
+    if (node.type === 'folder') {
+      const selection = {
+        anchorPath: undefined,
+        focusedPath: node.path,
+        paths: [] as string[],
+      };
+
+      return {
+        actionPaths: [node.path],
+        selected: focusedPath === node.path,
+        selection,
+      };
+    }
+
+    const selected = selectedPathSet.has(node.path);
+    const selection = !selected
+      ? {
+          anchorPath: node.path,
+          focusedPath: node.path,
+          paths: [node.path],
+        }
+      : {
+          ...currentSelection,
+          focusedPath: node.path,
+        };
 
     return {
       actionPaths: getWorkspaceSelectionActionPaths({
@@ -218,27 +286,129 @@ export function WorkspaceExplorer({
   };
 
   const handleItemContextMenu = (event: MouseEvent<HTMLButtonElement>, node: WorkspaceTreeNode) => {
+    // Keep item menus from bubbling to the list background handler.
+    event.stopPropagation();
     const meta = getItemActionMeta(node);
 
     if (node.type === 'file' && !meta.selected) {
-      onSelectionChange?.(meta.selection, {
-        event,
-        mode: 'single',
-        node,
-        reason: 'context-menu',
-      });
+      onSelectionChange?.(
+        {
+          ...meta.selection,
+          focusedPath: node.path,
+        },
+        {
+          event,
+          mode: 'single',
+          node,
+          reason: 'context-menu',
+        },
+      );
+    }
+
+    if (node.type === 'folder') {
+      onSelectionChange?.(
+        {
+          anchorPath: undefined,
+          focusedPath: node.path,
+          paths: [],
+        },
+        {
+          event,
+          mode: 'single',
+          node,
+          reason: 'context-menu',
+        },
+      );
     }
 
     onItemContextMenu?.(event, node, meta);
   };
 
+  const focusPath = (path: string, node: WorkspaceTreeNode | undefined) => {
+    if (!onSelectionChange || !selectionFollowsFocus) {
+      if (onSelectionChange) {
+        onSelectionChange(
+          {
+            ...currentSelection,
+            focusedPath: path,
+            paths: node?.type === 'folder' ? [] : currentSelection.paths,
+          },
+          { mode: 'single', node, reason: 'keyboard' },
+        );
+      }
+      return;
+    }
+
+    if (node?.type === 'folder') {
+      onSelectionChange(
+        { ...currentSelection, focusedPath: path, paths: [] },
+        { mode: 'single', node, reason: 'keyboard' },
+      );
+      return;
+    }
+
+    onSelectionChange(
+      {
+        ...updateWorkspaceSelection({
+          mode: 'single',
+          orderedPaths: visibleFilePaths,
+          selection: currentSelection,
+          targetPath: path,
+        }),
+        focusedPath: path,
+      },
+      { mode: 'single', node, reason: 'keyboard' },
+    );
+  };
+
   const handleItemKeyDown = (event: KeyboardEvent<HTMLButtonElement>, node: WorkspaceTreeNode) => {
+    if (
+      event.key === 'ArrowDown' ||
+      event.key === 'ArrowUp' ||
+      event.key === 'Home' ||
+      event.key === 'End'
+    ) {
+      const nextPath = resolveWorkspaceExplorerNavigationPath(
+        visibleNodes,
+        focusedPath ?? node.path,
+        event.key,
+      );
+      if (!nextPath || nextPath === (focusedPath ?? node.path)) {
+        return;
+      }
+      event.preventDefault();
+      const nextNode = visibleNodes.find((row) => row.node.path === nextPath)?.node;
+      focusPath(nextPath, nextNode);
+      return;
+    }
+
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      const action = resolveWorkspaceExplorerHorizontalNavigationAction(
+        visibleNodes,
+        focusedPath ?? node.path,
+        expandedPaths,
+        event.key,
+        { filterActive: Boolean(filterQuery.trim()) },
+      );
+      if (!action) {
+        return;
+      }
+      event.preventDefault();
+      if (action.type === 'toggle') {
+        onToggleFolder(action.path);
+        return;
+      }
+      const nextNode = visibleNodes.find((row) => row.node.path === action.path)?.node;
+      focusPath(action.path, nextNode);
+      return;
+    }
+
     if (event.key !== 'Delete' && event.key !== 'F2') return;
 
     const meta = getItemActionMeta(node);
 
     if (event.key === 'Delete') {
-      if (node.type === 'file' && meta.actionPaths.length === 0) return;
+      if (meta.actionPaths.length === 0) return;
 
       event.preventDefault();
       onRequestDelete?.({ ...meta, event, node });
@@ -355,8 +525,10 @@ export function WorkspaceExplorer({
   };
 
   const commitInlineEdit = () => {
-    if (!inlineEdit) return;
+    if (!inlineEdit || inlineEditCommitStartedRef.current) return;
 
+    // Enter commits then blurs the same input; commit only once per draft.
+    inlineEditCommitStartedRef.current = true;
     onInlineEditCommit?.({
       edit: inlineEdit,
       value: inlineEdit.value.trim(),
@@ -393,27 +565,28 @@ export function WorkspaceExplorer({
   }) => {
     if (!inlineEdit) return null;
 
-    const depthStyle = sideBarTreeDepthStyle(depth);
+    const depthStyle = explorerTreeDepthStyle(sectionBaseDepth + depth);
 
     return (
-      <li key={key} className="ui-side-bar-list-entry">
-        <div className="ui-side-bar-inline-edit" style={depthStyle}>
+      <li key={key} className="ui-sidebar-list-entry">
+        <div className="ui-sidebar-inline-edit" style={depthStyle}>
           <span className="workbench-tree-prefix">
             <span className="workbench-tree-spacer" />
             <WorkspaceFileIcon directory={directory} mimeType={mimeType} path={path} />
           </span>
-          <input
+          <TextInput
             ref={inlineEditInputRef}
             aria-label="Workspace item name"
-            className="ui-side-bar-inline-edit__input"
+            className="ui-sidebar-inline-edit__input"
+            controlWidth="full"
             value={inlineEdit.value}
             onBlur={commitInlineEdit}
-            onChange={(event) => onInlineEditValueChange?.(event.currentTarget.value, inlineEdit)}
+            onValueChange={(value) => onInlineEditValueChange?.(value, inlineEdit)}
             onKeyDown={handleInlineEditKeyDown}
           />
         </div>
         {inlineEdit.error ? (
-          <div className="ui-side-bar-inline-edit__error" style={depthStyle}>
+          <div className="ui-sidebar-inline-edit__error" style={depthStyle}>
             {inlineEdit.error}
           </div>
         ) : null}
@@ -424,27 +597,31 @@ export function WorkspaceExplorer({
   return (
     <SideBarList
       fill
-      aria-label="Workspace files"
+      aria-keyshortcuts="ArrowLeft ArrowRight ArrowUp ArrowDown Home End Delete F2"
+      aria-label={ariaLabel}
       dropTarget={dropTargetPath === ''}
+      role="tree"
+      onContextMenu={(event) => {
+        onBackgroundContextMenu?.(event);
+      }}
       onDragLeave={(event) => handleDropTargetDragLeave(event, '')}
       onDragOver={(event) => handleDropTargetDragOver(event, '')}
       onDrop={(event) => handleDrop(event, '')}
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) {
+          clearSelection();
+        }
+      }}
     >
-      {inlineEdit?.kind.startsWith('create') && !inlineEdit.parentPath
-        ? renderInlineEdit({
-            depth: 0,
-            directory: inlineEdit.kind === 'create-folder',
-            key: `inline-edit:${inlineEditKey}`,
-            path: inlineEdit.value,
-          })
-        : null}
-      {visibleNodes.map(({ depth, node }) => {
+      {visibleNodes.map(({ depth, node }, index) => {
         const isFolder = node.type === 'folder';
         const expanded = expandedPaths.has(node.path) || Boolean(filterQuery.trim());
-        const selected = node.type === 'file' && selectedPathSet.has(node.path);
+        const isFocused = focusedPath === node.path;
+        const selected = isFocused || (node.type === 'file' && selectedPathSet.has(node.path));
         const dropTarget = isFolder && dropTargetPath === node.path;
         const editingRename =
           inlineEdit?.kind.startsWith('rename') && inlineEdit.path === node.path;
+        const tabIndex = isFocused || (!focusedPath && index === 0) ? 0 : -1;
 
         return editingRename ? (
           renderInlineEdit({
@@ -458,14 +635,28 @@ export function WorkspaceExplorer({
           <Fragment key={node.path}>
             <SideBarListItem
               active={activePath === node.path}
+              after={
+                renderItemActions ? (
+                  <span className="ui-workspace-explorer-item-actions">
+                    {renderItemActions(node, getItemActionMeta(node))}
+                  </span>
+                ) : undefined
+              }
               data-workspace-path={node.path}
               depth={depth}
               draggable={Boolean(onRequestMove)}
               dropTarget={dropTarget}
               selected={selected}
+              tabIndex={tabIndex}
+              wrapperProps={{
+                role: 'treeitem',
+                'aria-level': depth + 1,
+                'aria-selected': selected,
+                ...(isFolder ? { 'aria-expanded': expanded } : {}),
+              }}
               onClick={(event) => {
                 if (isFolder) {
-                  onToggleFolder(node.path);
+                  selectFolder(event, node);
                   return;
                 }
                 selectFile(event, node);
@@ -516,6 +707,14 @@ export function WorkspaceExplorer({
           </Fragment>
         );
       })}
+      {inlineEdit?.kind.startsWith('create') && !inlineEdit.parentPath
+        ? renderInlineEdit({
+            depth: 0,
+            directory: inlineEdit.kind === 'create-folder',
+            key: `inline-edit:${inlineEditKey}`,
+            path: inlineEdit.value,
+          })
+        : null}
       {visibleNodes.length === 0 ? <SideBarListItem disabled>No files</SideBarListItem> : null}
     </SideBarList>
   );

package/src/workbench/workspace/WorkspaceExplorerPanel.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+import { SideBarViewFrame, SidebarToolbar, WorkbenchSidebarSection } from '../../layout/sidebar';
+import { IconButton } from '../../primitives/icon-button';
+import { cx } from '../../utils/cx';
+import { WorkspaceExplorer, type WorkspaceExplorerProps } from './WorkspaceExplorer';
+
+export interface WorkspaceExplorerPanelProps extends WorkspaceExplorerProps {
+  'aria-label'?: string | undefined;
+  className?: string | undefined;
+  onNewFile?: (() => void) | undefined;
+  onNewFolder?: (() => void) | undefined;
+  onRefresh?: (() => void) | undefined;
+  refreshLabel?: string;
+  sectionTitle?: string;
+  title?: string;
+  toolbarLeading?: ReactNode;
+  toolbarStatus?: ReactNode;
+  toolbarTrailing?: ReactNode;
+}
+
+export function WorkspaceExplorerPanel({
+  'aria-label': ariaLabel,
+  className,
+  onNewFile,
+  onNewFolder,
+  onRefresh,
+  refreshLabel = 'Refresh Explorer',
+  sectionTitle = 'Workspace',
+  title = 'Explorer',
+  toolbarLeading,
+  toolbarStatus,
+  toolbarTrailing,
+  ...explorerProps
+}: WorkspaceExplorerPanelProps) {
+  const hasDefaultActions = Boolean(onNewFile || onNewFolder || onRefresh);
+  const hasToolbarSlots = Boolean(toolbarLeading || toolbarTrailing || toolbarStatus);
+  const headerActions =
+    hasDefaultActions || hasToolbarSlots ? (
+      <SidebarToolbar
+        aria-label="Explorer actions"
+        className="ui-explorer-action-bar"
+        role="toolbar"
+      >
+        {toolbarLeading}
+        {onNewFile ? (
+          <IconButton compact icon="codicon-new-file" label="New file" onClick={onNewFile} />
+        ) : null}
+        {onNewFolder ? (
+          <IconButton compact icon="codicon-new-folder" label="New folder" onClick={onNewFolder} />
+        ) : null}
+        {onRefresh ? (
+          <IconButton compact icon="codicon-refresh" label={refreshLabel} onClick={onRefresh} />
+        ) : null}
+        {toolbarTrailing}
+        {toolbarStatus ? (
+          <span className="ui-explorer-action-bar__status">{toolbarStatus}</span>
+        ) : null}
+      </SidebarToolbar>
+    ) : undefined;
+
+  return (
+    <SideBarViewFrame
+      actions={headerActions}
+      aria-label={ariaLabel}
+      className={cx('workbench-explorer-view', 'ui-workspace-explorer-panel', className)}
+      title={title}
+    >
+      <WorkbenchSidebarSection id="workspace-explorer-section" title={sectionTitle}>
+        <WorkspaceExplorer {...explorerProps} />
+      </WorkbenchSidebarSection>
+    </SideBarViewFrame>
+  );
+}