@workbench-kit/react 0.0.2-prototype.0.2.13 → 0.0.2-prototype.0.2.15

package/src/workbench/commands/WorkbenchQuickOpen.tsx

@@ -0,0 +1,410 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type KeyboardEvent,
+  type ReactNode,
+} from 'react';
+import { useModalFocusTrap } from '../../modal/useModalFocusTrap';
+import { Button } from '../../primitives/button';
+import { EmptyState } from '../../primitives/empty-state';
+import { IconButton } from '../../primitives/icon-button';
+import { TextInput } from '../../primitives/text-input';
+import { cxCodicon } from '../../utils/codicon';
+import { cx } from '../../utils/cx';
+import {
+  DEFAULT_QUICK_OPEN_SEARCH_DEBOUNCE_MS,
+  getNextQuickOpenItemIndex,
+  isQuickOpenItemSelectable,
+  type QuickOpenItem,
+  type QuickOpenProvider,
+  type QuickOpenSelectContext,
+} from './quick-open-model';
+
+interface WorkbenchQuickOpenKeyEvent {
+  key: string;
+  preventDefault: () => void;
+}
+
+function useControllableQuery({
+  defaultQuery = '',
+  query,
+  onQueryChange,
+}: {
+  defaultQuery?: string | undefined;
+  query?: string | undefined;
+  onQueryChange?: ((query: string) => void) | undefined;
+}) {
+  const [uncontrolledQuery, setUncontrolledQuery] = useState(defaultQuery);
+  const resolvedQuery = query ?? uncontrolledQuery;
+
+  const setQuery = (nextQuery: string) => {
+    if (query === undefined) {
+      setUncontrolledQuery(nextQuery);
+    }
+    onQueryChange?.(nextQuery);
+  };
+
+  return [resolvedQuery, setQuery] as const;
+}
+
+export interface WorkbenchQuickOpenProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  'children' | 'onSelect' | 'title'
+> {
+  activeItemId?: string | undefined;
+  closeLabel?: string | undefined;
+  debounceMs?: number | undefined;
+  defaultQuery?: string | undefined;
+  emptyLabel?: ReactNode | undefined;
+  onActiveItemChange?: ((itemId: string) => void) | undefined;
+  onClose: () => void;
+  onQueryChange?: ((query: string) => void) | undefined;
+  onSelectItem?: ((item: QuickOpenItem, context: QuickOpenSelectContext) => void) | undefined;
+  open?: boolean | undefined;
+  placeholder?: string | undefined;
+  /** When omitted, the first provider is used. */
+  providerId?: string | undefined;
+  providers: readonly QuickOpenProvider[];
+  query?: string | undefined;
+  restoreFocusOnClose?: boolean | undefined;
+  title?: ReactNode | undefined;
+}
+
+export function WorkbenchQuickOpen({
+  activeItemId,
+  className,
+  closeLabel = 'Close Quick Open',
+  debounceMs = DEFAULT_QUICK_OPEN_SEARCH_DEBOUNCE_MS,
+  defaultQuery,
+  emptyLabel = 'No matching files',
+  onActiveItemChange,
+  onClose,
+  onQueryChange,
+  onSelectItem,
+  open = true,
+  placeholder = 'Search files by name',
+  providerId,
+  providers,
+  query,
+  restoreFocusOnClose = true,
+  title = 'Quick Open',
+  ...props
+}: WorkbenchQuickOpenProps) {
+  const titleId = useId();
+  const listId = useId();
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [uncontrolledActiveItemId, setUncontrolledActiveItemId] = useState<string>();
+  const [items, setItems] = useState<QuickOpenItem[]>([]);
+  const [searching, setSearching] = useState(false);
+  const [resolvedQuery, setResolvedQuery] = useControllableQuery({
+    defaultQuery,
+    onQueryChange,
+    query,
+  });
+
+  const activeProvider = useMemo(() => {
+    if (providerId) {
+      return providers.find((provider) => provider.id === providerId) ?? providers[0];
+    }
+    return providers[0];
+  }, [providerId, providers]);
+
+  const resolvedActiveItemId = activeItemId ?? uncontrolledActiveItemId ?? items[0]?.id;
+  const activeIndex = items.findIndex((item) => item.id === resolvedActiveItemId);
+  const activeItem = activeIndex >= 0 ? items[activeIndex] : items.find(isQuickOpenItemSelectable);
+
+  const updateActiveItem = useCallback(
+    (itemId: string | undefined) => {
+      if (!itemId) return;
+      if (activeItemId === undefined) {
+        setUncontrolledActiveItemId(itemId);
+      }
+      onActiveItemChange?.(itemId);
+    },
+    [activeItemId, onActiveItemChange],
+  );
+
+  useModalFocusTrap({
+    enabled: open,
+    containerRef: dialogRef,
+    initialFocusRef: inputRef,
+    onClose,
+    restoreFocusOnClose,
+  });
+
+  useEffect(() => {
+    if (!open || !activeProvider) {
+      setItems([]);
+      setSearching(false);
+      return undefined;
+    }
+
+    let cancelled = false;
+    const runSearch = async () => {
+      setSearching(true);
+      try {
+        const nextItems = await Promise.resolve(activeProvider.search(resolvedQuery));
+        if (!cancelled) {
+          setItems(nextItems);
+        }
+      } finally {
+        if (!cancelled) {
+          setSearching(false);
+        }
+      }
+    };
+
+    // Empty query (recent / top-level) should paint immediately; debounce typed queries.
+    const delay = resolvedQuery.trim() ? Math.max(0, debounceMs) : 0;
+    if (delay === 0) {
+      void runSearch();
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    const timer = window.setTimeout(() => {
+      void runSearch();
+    }, delay);
+
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+    };
+  }, [activeProvider, debounceMs, open, resolvedQuery]);
+
+  useEffect(() => {
+    if (!open) return;
+    if (activeItemId !== undefined) return;
+
+    setUncontrolledActiveItemId((currentItemId) => {
+      const nextItemId = items.find(isQuickOpenItemSelectable)?.id;
+      return currentItemId === nextItemId ? currentItemId : nextItemId;
+    });
+  }, [activeItemId, items, open]);
+
+  const selectItem = useCallback(
+    (item: QuickOpenItem, index: number) => {
+      if (!isQuickOpenItemSelectable(item) || !activeProvider) return;
+      onSelectItem?.(item, {
+        index,
+        providerId: activeProvider.id,
+        query: resolvedQuery,
+      });
+    },
+    [activeProvider, onSelectItem, resolvedQuery],
+  );
+
+  const handleQuickOpenKeyDown = useCallback(
+    (event: WorkbenchQuickOpenKeyEvent) => {
+      if (
+        event.key !== 'ArrowDown' &&
+        event.key !== 'ArrowUp' &&
+        event.key !== 'Home' &&
+        event.key !== 'End' &&
+        event.key !== 'PageDown' &&
+        event.key !== 'PageUp' &&
+        event.key !== 'Enter'
+      ) {
+        return;
+      }
+
+      if (event.key === 'Enter') {
+        if (!activeItem) return;
+        event.preventDefault();
+        selectItem(activeItem, Math.max(activeIndex, 0));
+        return;
+      }
+
+      event.preventDefault();
+
+      const direction =
+        event.key === 'ArrowUp' || event.key === 'End' || event.key === 'PageUp'
+          ? 'previous'
+          : 'next';
+      const stepCount = event.key === 'PageDown' || event.key === 'PageUp' ? 5 : 1;
+      let nextIndex =
+        event.key === 'Home'
+          ? getNextQuickOpenItemIndex({
+              currentIndex: -1,
+              direction: 'next',
+              items,
+            })
+          : event.key === 'End'
+            ? getNextQuickOpenItemIndex({
+                currentIndex: 0,
+                direction: 'previous',
+                items,
+              })
+            : activeIndex;
+
+      if (event.key !== 'Home' && event.key !== 'End') {
+        for (let step = 0; step < stepCount; step += 1) {
+          const steppedIndex = getNextQuickOpenItemIndex({
+            currentIndex: nextIndex,
+            direction,
+            items,
+          });
+
+          if (steppedIndex < 0 || steppedIndex === nextIndex) break;
+          nextIndex = steppedIndex;
+        }
+      }
+
+      if (nextIndex >= 0) {
+        updateActiveItem(items[nextIndex]?.id);
+      }
+    },
+    [activeIndex, activeItem, items, selectItem, updateActiveItem],
+  );
+
+  useEffect(() => {
+    if (!open) return undefined;
+
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      handleQuickOpenKeyDown(event);
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [handleQuickOpenKeyDown, open]);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    handleQuickOpenKeyDown(event);
+  };
+
+  useEffect(() => {
+    if (!resolvedActiveItemId) return;
+
+    const activeElement = Array.from(
+      dialogRef.current?.querySelectorAll<HTMLElement>('[data-quick-open-id]') ?? [],
+    ).find((element) => element.dataset.quickOpenId === resolvedActiveItemId);
+
+    activeElement?.scrollIntoView?.({ block: 'nearest' });
+  }, [items, resolvedActiveItemId]);
+
+  if (!open) return null;
+
+  return (
+    <div className="ui-workbench-command-palette-overlay" onClick={onClose}>
+      <div
+        aria-labelledby={titleId}
+        aria-modal="true"
+        className={cx('ui-workbench-command-palette', className)}
+        data-testid="workbench-quick-open"
+        role="dialog"
+        {...props}
+        ref={dialogRef}
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="ui-workbench-command-palette__header">
+          <span id={titleId} className="ui-workbench-command-palette__title">
+            {title}
+          </span>
+          <IconButton
+            className="ui-workbench-command-palette__close"
+            icon="codicon-close"
+            label={closeLabel}
+            onClick={onClose}
+          />
+        </div>
+        <div className="ui-workbench-command-palette__search">
+          <i aria-hidden="true" className="codicon codicon-search" />
+          <TextInput
+            ref={inputRef}
+            aria-activedescendant={
+              activeItem ? `${listId}-${activeItem.id.replace(/[^\w-]/g, '_')}` : undefined
+            }
+            aria-controls={listId}
+            aria-label={placeholder}
+            className="ui-workbench-command-palette__input"
+            controlWidth="full"
+            placeholder={placeholder}
+            type="search"
+            value={resolvedQuery}
+            onValueChange={setResolvedQuery}
+            onKeyDown={handleKeyDown}
+          />
+        </div>
+        <div
+          id={listId}
+          aria-busy={searching || undefined}
+          aria-label="Quick Open results"
+          className={cx('ui-workbench-command-list', 'ui-workbench-scrollbar')}
+          role="listbox"
+        >
+          {items.length === 0 ? (
+            <EmptyState compact icon="codicon-search">
+              {emptyLabel}
+            </EmptyState>
+          ) : (
+            items.map((item, index) => {
+              const active = item.id === resolvedActiveItemId;
+              const itemDomId = `${listId}-${item.id.replace(/[^\w-]/g, '_')}`;
+              const descriptionId = item.description ? `${itemDomId}-description` : undefined;
+
+              return (
+                <Button
+                  key={item.id}
+                  id={itemDomId}
+                  aria-describedby={descriptionId}
+                  aria-selected={active}
+                  className="ui-workbench-command-item"
+                  data-active={active ? 'true' : undefined}
+                  data-quick-open-id={item.id}
+                  disabled={item.disabled}
+                  role="option"
+                  onClick={() => selectItem(item, index)}
+                  onMouseEnter={() => updateActiveItem(item.id)}
+                >
+                  <span className="ui-workbench-command-item__icon">
+                    {item.icon ? <i aria-hidden="true" className={cxCodicon(item.icon)} /> : null}
+                  </span>
+                  <span className="ui-workbench-command-item__content">
+                    <span className="ui-workbench-command-item__label">{item.label}</span>
+                    {item.description ? (
+                      <span id={descriptionId} className="ui-workbench-command-item__description">
+                        {item.description}
+                      </span>
+                    ) : null}
+                  </span>
+                  <span className="ui-workbench-command-item__meta">
+                    {item.detail ? (
+                      <span className="ui-workbench-command-item__category">{item.detail}</span>
+                    ) : activeProvider ? (
+                      <span className="ui-workbench-command-item__category">
+                        {activeProvider.label}
+                      </span>
+                    ) : null}
+                  </span>
+                </Button>
+              );
+            })
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export type { QuickOpenItem, QuickOpenProvider, QuickOpenSelectContext } from './quick-open-model';
+export {
+  DEFAULT_QUICK_OPEN_SEARCH_DEBOUNCE_MS,
+  getNextQuickOpenItemIndex,
+  isQuickOpenItemSelectable,
+} from './quick-open-model';
+export {
+  WORKSPACE_FILES_QUICK_OPEN_PROVIDER_ID,
+  createWorkspaceFilesQuickOpenProvider,
+  resolveQuickOpenItemPath,
+} from './createWorkspaceFilesQuickOpenProvider';
+export type { CreateWorkspaceFilesQuickOpenProviderOptions } from './createWorkspaceFilesQuickOpenProvider';

package/src/workbench/commands/command-ui.ts

@@ -0,0 +1,3 @@
+export * from './CommandPalette';
+export * from './ShortcutCommandBridge';
+export * from './WorkbenchQuickOpen';

package/src/workbench/commands/createWorkspaceFilesQuickOpenProvider.ts

@@ -0,0 +1,86 @@
+import { searchWorkspaceFiles, type WorkspaceFile } from '@workbench-kit/workspace';
+
+import type { QuickOpenItem, QuickOpenProvider } from './quick-open-model';
+
+export const WORKSPACE_FILES_QUICK_OPEN_PROVIDER_ID = 'workspace.files' as const;
+
+export interface CreateWorkspaceFilesQuickOpenProviderOptions {
+  /** Current workspace files, or a getter read on each search. */
+  files: readonly WorkspaceFile[] | (() => readonly WorkspaceFile[]);
+  id?: string | undefined;
+  label?: string | undefined;
+  /**
+   * When the query is empty, these paths appear first (still present in `files`).
+   * Remaining files follow in `searchWorkspaceFiles` order.
+   */
+  recentPaths?: readonly string[] | undefined;
+}
+
+function resolveFiles(
+  files: CreateWorkspaceFilesQuickOpenProviderOptions['files'],
+): readonly WorkspaceFile[] {
+  return typeof files === 'function' ? files() : files;
+}
+
+function toQuickOpenItem(path: string, matchedBy?: string, preview?: string): QuickOpenItem {
+  const segments = path.split('/');
+  const label = segments[segments.length - 1] || path;
+  const parent = segments.length > 1 ? segments.slice(0, -1).join('/') : undefined;
+
+  return {
+    data: { path },
+    description: parent,
+    detail: matchedBy ?? preview,
+    icon: 'codicon-file',
+    id: path,
+    label,
+  };
+}
+
+export function createWorkspaceFilesQuickOpenProvider(
+  options: CreateWorkspaceFilesQuickOpenProviderOptions,
+): QuickOpenProvider {
+  const providerId = options.id ?? WORKSPACE_FILES_QUICK_OPEN_PROVIDER_ID;
+  const providerLabel = options.label ?? 'Files';
+
+  return {
+    id: providerId,
+    label: providerLabel,
+    search(query: string) {
+      const files = [...resolveFiles(options.files)];
+      const results = searchWorkspaceFiles(files, query);
+      const items = results.map((result) =>
+        toQuickOpenItem(result.path, result.matchedBy, result.preview),
+      );
+
+      if (query.trim() || !options.recentPaths?.length) {
+        return items;
+      }
+
+      const recentSet = new Set(options.recentPaths);
+      const byPath = new Map(items.map((item) => [item.id, item]));
+      const recentItems: QuickOpenItem[] = [];
+
+      for (const path of options.recentPaths) {
+        const item = byPath.get(path);
+        if (item) {
+          recentItems.push({ ...item, detail: 'Recent' });
+        }
+      }
+
+      const rest = items.filter((item) => !recentSet.has(item.id));
+      return [...recentItems, ...rest];
+    },
+  };
+}
+
+export function resolveQuickOpenItemPath(item: QuickOpenItem): string | undefined {
+  if (typeof item.data === 'object' && item.data !== null && 'path' in item.data) {
+    const path = (item.data as { path?: unknown }).path;
+    if (typeof path === 'string' && path.length > 0) {
+      return path;
+    }
+  }
+
+  return item.id || undefined;
+}

package/src/workbench/commands/quick-open-model.ts

@@ -0,0 +1,57 @@
+export interface QuickOpenItem {
+  /** Stable item id (often a workspace path). */
+  id: string;
+  label: string;
+  description?: string | undefined;
+  detail?: string | undefined;
+  icon?: string | undefined;
+  disabled?: boolean | undefined;
+  /** Provider-specific payload (e.g. `{ path }`). */
+  data?: unknown;
+}
+
+export interface QuickOpenProvider {
+  id: string;
+  label: string;
+  search: (query: string) => Promise<QuickOpenItem[]> | QuickOpenItem[];
+}
+
+export interface QuickOpenSelectContext {
+  index: number;
+  providerId: string;
+  query: string;
+}
+
+export function isQuickOpenItemSelectable(item: QuickOpenItem) {
+  return !item.disabled;
+}
+
+export function getNextQuickOpenItemIndex({
+  currentIndex,
+  direction,
+  items,
+}: {
+  currentIndex: number;
+  direction: 'next' | 'previous';
+  items: readonly QuickOpenItem[];
+}) {
+  if (items.length === 0) {
+    return -1;
+  }
+
+  const step = direction === 'next' ? 1 : -1;
+  let nextIndex = currentIndex;
+
+  for (let attempt = 0; attempt < items.length; attempt += 1) {
+    nextIndex = (nextIndex + step + items.length) % items.length;
+    const item = items[nextIndex];
+    if (item && isQuickOpenItemSelectable(item)) {
+      return nextIndex;
+    }
+  }
+
+  return -1;
+}
+
+/** Default debounce for provider search while typing. */
+export const DEFAULT_QUICK_OPEN_SEARCH_DEBOUNCE_MS = 200;

package/src/workbench/index.ts

@@ -59,6 +59,15 @@ export {
   isWorkbenchCommandRunnable,
   resolveWorkbenchCommandExecutionPolicy,
 } from './commands/CommandPalette';
+export {
+  DEFAULT_QUICK_OPEN_SEARCH_DEBOUNCE_MS,
+  WORKSPACE_FILES_QUICK_OPEN_PROVIDER_ID,
+  WorkbenchQuickOpen,
+  createWorkspaceFilesQuickOpenProvider,
+  getNextQuickOpenItemIndex,
+  isQuickOpenItemSelectable,
+  resolveQuickOpenItemPath,
+} from './commands/WorkbenchQuickOpen';
 export { WorkbenchMarkdownPreview } from './markdown/MarkdownPreview';
 export type { WorkbenchMarkdownPreviewProps } from './markdown/MarkdownPreview';
 export { sanitizeMarkdownHref } from './markdown/sanitizeMarkdownHref';
@@ -215,6 +224,13 @@ export type {
   WorkbenchCommandSuggestProps,
 } from './commands/CommandPalette';
 export type { ResolveWorkbenchCommandExecutionPolicyInput } from './commands/CommandPalette';
+export type {
+  CreateWorkspaceFilesQuickOpenProviderOptions,
+  QuickOpenItem,
+  QuickOpenProvider,
+  QuickOpenSelectContext,
+  WorkbenchQuickOpenProps,
+} from './commands/WorkbenchQuickOpen';
 export type {
   UseWorkbenchShortcutCommandsOptions,
   WorkbenchShortcutCommandBinding,

package/src/workbench/management/ExtensionManagementPanel.tsx

@@ -8,6 +8,7 @@ import {
   formatExtensionCategoryLabel,
 } from './extension-category-display.js';
 import { resolveExtensionInstallOptions } from './extension-install-approval.js';
+import { filterBrowseEntries, filterInstalledEntries } from './extension-management-filters.js';
 import { ManagementFilterChips } from './ManagementFilterChips.js';
 import { ManagementCard, ManagementCardList } from './ManagementCard.js';
 import { ManagementGroup, ManagementGroups } from './ManagementGroup.js';
@@ -491,37 +492,3 @@ function groupBrowseEntries(entries: readonly ExtensionCatalogBrowseEntry[]) {
     })
     .map(([category, categoryEntries]) => ({ category, entries: categoryEntries }));
 }
-
-function filterInstalledEntries(entries: readonly ExtensionManagementEntry[], query: string) {
-  const normalized = query.trim().toLowerCase();
-  if (!normalized) {
-    return entries;
-  }
-
-  return entries.filter((entry) =>
-    [entry.displayName, entry.id, entry.category, entry.description ?? '']
-      .join(' ')
-      .toLowerCase()
-      .includes(normalized),
-  );
-}
-
-function filterBrowseEntries(
-  entries: readonly ExtensionCatalogBrowseEntry[],
-  query: string,
-  category?: string,
-) {
-  const normalized = query.trim().toLowerCase();
-  return entries.filter((entry) => {
-    if (category && entry.category !== category) {
-      return false;
-    }
-    if (!normalized) {
-      return true;
-    }
-    return [entry.displayName, entry.id, entry.category, entry.description]
-      .join(' ')
-      .toLowerCase()
-      .includes(normalized);
-  });
-}

package/src/workbench/management/ExtensionManagementSidebar.tsx

@@ -18,6 +18,7 @@ import {
   formatExtensionCategoryLabel,
 } from './extension-category-display.js';
 import { resolveExtensionInstallOptions } from './extension-install-approval.js';
+import { filterBrowseEntries, filterInstalledEntries } from './extension-management-filters.js';
 import { ManagementFilterChips } from './ManagementFilterChips.js';
 import type {
   ExtensionCatalogBrowseEntry,
@@ -473,37 +474,3 @@ function formatFeatureBadge(label: string, count: number) {
 
   return `${label} ${count}`;
 }
-
-function filterInstalledEntries(entries: readonly ExtensionManagementEntry[], query: string) {
-  const normalized = query.trim().toLowerCase();
-  if (!normalized) {
-    return entries;
-  }
-
-  return entries.filter((entry) =>
-    [entry.displayName, entry.id, entry.category, entry.description ?? '']
-      .join(' ')
-      .toLowerCase()
-      .includes(normalized),
-  );
-}
-
-function filterBrowseEntries(
-  entries: readonly ExtensionCatalogBrowseEntry[],
-  query: string,
-  category?: string,
-) {
-  const normalized = query.trim().toLowerCase();
-  return entries.filter((entry) => {
-    if (category && entry.category !== category) {
-      return false;
-    }
-    if (!normalized) {
-      return true;
-    }
-    return [entry.displayName, entry.id, entry.category, entry.description]
-      .join(' ')
-      .toLowerCase()
-      .includes(normalized);
-  });
-}

package/src/workbench/management/IntegrationSettingsSurface.tsx

@@ -7,6 +7,7 @@ import {
   WorkbenchPropertySection,
   WorkbenchPropertyStack,
 } from '../../primitives/index';
+import { cx } from '../../utils/cx';
 
 type IntegrationSettingsDensity = 'compact' | 'default';
 type IntegrationSettingsInset = 'default' | 'flush';
@@ -206,7 +207,7 @@ export function IntegrationAccountRowEditor({
 export function IntegrationBodyText({ children, size = 'default' }: IntegrationBodyTextProps) {
   return (
     <WorkbenchPropertyHint
-      className={joinClasses('block', size === 'compact' ? 'text-xs' : undefined)}
+      className={cx('block', size === 'compact' ? 'text-xs' : undefined)}
       data-size={size}
     >
       {children}
@@ -284,7 +285,3 @@ function IntegrationEditorDescription({ children }: { children?: ReactNode }) {
 function hasRenderableNode(node: ReactNode | undefined): boolean {
   return node !== undefined && node !== null && node !== false;
 }
-
-function joinClasses(...classes: Array<string | undefined>): string {
-  return classes.filter(Boolean).join(' ');
-}