@workbench-kit/react 0.0.2-prototype.0.2.4 → 0.0.2-prototype.0.2.6

package/src/workbench/CommandGroupShell.tsx

@@ -1,131 +1,131 @@
-import { useId, useMemo, type ComponentPropsWithRef, type ReactNode } from 'react';
-import { EmptyState } from '../primitives/empty-state';
-import { cx } from '../utils/cx';
-import { WorkbenchCommandList } from './CommandList';
-import {
-  filterWorkbenchCommands,
-  groupWorkbenchCommands,
-  type WorkbenchCommandDescriptor,
-  type WorkbenchCommandGroupBy,
-  type WorkbenchCommandRunContext,
-} from './command-model';
-
-export interface WorkbenchCommandGroupShellProps extends Omit<
-  ComponentPropsWithRef<'div'>,
-  'children' | 'onSelect'
-> {
-  activeCommandId?: string | undefined;
-  commands: readonly WorkbenchCommandDescriptor[];
-  emptyLabel?: ReactNode | undefined;
-  fallbackGroupLabel?: string | undefined;
-  groupBy?: WorkbenchCommandGroupBy | undefined;
-  groupNavLabel?: string | undefined;
-  onActiveCommandChange?: ((commandId: string) => void) | undefined;
-  onRunCommand?:
-    | ((command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => void)
-    | undefined;
-  query?: string | undefined;
-  showGroupCounts?: boolean | undefined;
-  showGroupNav?: boolean | undefined;
-}
-
-export function WorkbenchCommandGroupShell({
-  activeCommandId,
-  className,
-  commands,
-  emptyLabel = 'No commands available',
-  fallbackGroupLabel = 'Other',
-  groupBy = 'category',
-  groupNavLabel = 'Command groups',
-  onActiveCommandChange,
-  onRunCommand,
-  query = '',
-  showGroupCounts = true,
-  showGroupNav = true,
-  ...props
-}: WorkbenchCommandGroupShellProps) {
-  const generatedId = useId().replace(/:/g, '');
-  const filteredCommands = useMemo(
-    () => filterWorkbenchCommands({ commands, query }),
-    [commands, query],
-  );
-  const groups = useMemo(
-    () => groupWorkbenchCommands({ commands: filteredCommands, fallbackGroupLabel, groupBy }),
-    [fallbackGroupLabel, filteredCommands, groupBy],
-  );
-
-  if (groups.length === 0) {
-    return (
-      <div
-        className={cx('ui-workbench-command-group-shell', className)}
-        data-show-group-nav={showGroupNav ? 'true' : 'false'}
-        {...props}
-      >
-        <EmptyState compact icon="codicon-symbol-keyword">
-          {emptyLabel}
-        </EmptyState>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cx('ui-workbench-command-group-shell', className)}
-      data-show-group-nav={showGroupNav ? 'true' : 'false'}
-      {...props}
-    >
-      {showGroupNav ? (
-        <nav
-          aria-label={groupNavLabel}
-          className="ui-workbench-command-group-shell__nav ui-workbench-scrollbar"
-        >
-          {groups.map((group) => (
-            <a
-              key={group.id}
-              className="ui-workbench-command-group-shell__nav-link"
-              href={`#${generatedId}-${group.id}`}
-            >
-              <span>{group.label}</span>
-              {showGroupCounts ? <em>{group.commands.length}</em> : null}
-            </a>
-          ))}
-        </nav>
-      ) : null}
-      <div className="ui-workbench-command-group-shell__content ui-workbench-scrollbar">
-        {groups.map((group) => {
-          const titleId = `${generatedId}-${group.id}-title`;
-
-          return (
-            <section
-              key={group.id}
-              id={`${generatedId}-${group.id}`}
-              className="ui-workbench-command-group-shell__section"
-              aria-labelledby={titleId}
-            >
-              <div className="ui-workbench-command-group-shell__section-header">
-                <h2 id={titleId}>{group.label}</h2>
-                {showGroupCounts ? <span>{group.commands.length}</span> : null}
-              </div>
-              <WorkbenchCommandList
-                activeCommandId={activeCommandId}
-                aria-label={`${group.label} commands`}
-                commands={group.commands}
-                emptyLabel={emptyLabel}
-                query={query}
-                source="grouped-list"
-                onActiveCommandChange={onActiveCommandChange}
-                onRunCommand={(command, context) =>
-                  onRunCommand?.(command, {
-                    ...context,
-                    groupId: group.id,
-                    groupLabel: group.label,
-                  })
-                }
-              />
-            </section>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
+import { useId, useMemo, type ComponentPropsWithRef, type ReactNode } from 'react';
+import { EmptyState } from '../primitives/empty-state';
+import { cx } from '../utils/cx';
+import { WorkbenchCommandList } from './CommandList';
+import {
+  filterWorkbenchCommands,
+  groupWorkbenchCommands,
+  type WorkbenchCommandDescriptor,
+  type WorkbenchCommandGroupBy,
+  type WorkbenchCommandRunContext,
+} from './command-model';
+
+export interface WorkbenchCommandGroupShellProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  'children' | 'onSelect'
+> {
+  activeCommandId?: string | undefined;
+  commands: readonly WorkbenchCommandDescriptor[];
+  emptyLabel?: ReactNode | undefined;
+  fallbackGroupLabel?: string | undefined;
+  groupBy?: WorkbenchCommandGroupBy | undefined;
+  groupNavLabel?: string | undefined;
+  onActiveCommandChange?: ((commandId: string) => void) | undefined;
+  onRunCommand?:
+    | ((command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => void)
+    | undefined;
+  query?: string | undefined;
+  showGroupCounts?: boolean | undefined;
+  showGroupNav?: boolean | undefined;
+}
+
+export function WorkbenchCommandGroupShell({
+  activeCommandId,
+  className,
+  commands,
+  emptyLabel = 'No commands available',
+  fallbackGroupLabel = 'Other',
+  groupBy = 'category',
+  groupNavLabel = 'Command groups',
+  onActiveCommandChange,
+  onRunCommand,
+  query = '',
+  showGroupCounts = true,
+  showGroupNav = true,
+  ...props
+}: WorkbenchCommandGroupShellProps) {
+  const generatedId = useId().replace(/:/g, '');
+  const filteredCommands = useMemo(
+    () => filterWorkbenchCommands({ commands, query }),
+    [commands, query],
+  );
+  const groups = useMemo(
+    () => groupWorkbenchCommands({ commands: filteredCommands, fallbackGroupLabel, groupBy }),
+    [fallbackGroupLabel, filteredCommands, groupBy],
+  );
+
+  if (groups.length === 0) {
+    return (
+      <div
+        className={cx('ui-workbench-command-group-shell', className)}
+        data-show-group-nav={showGroupNav ? 'true' : 'false'}
+        {...props}
+      >
+        <EmptyState compact icon="codicon-symbol-keyword">
+          {emptyLabel}
+        </EmptyState>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cx('ui-workbench-command-group-shell', className)}
+      data-show-group-nav={showGroupNav ? 'true' : 'false'}
+      {...props}
+    >
+      {showGroupNav ? (
+        <nav
+          aria-label={groupNavLabel}
+          className="ui-workbench-command-group-shell__nav ui-workbench-scrollbar"
+        >
+          {groups.map((group) => (
+            <a
+              key={group.id}
+              className="ui-workbench-command-group-shell__nav-link"
+              href={`#${generatedId}-${group.id}`}
+            >
+              <span>{group.label}</span>
+              {showGroupCounts ? <em>{group.commands.length}</em> : null}
+            </a>
+          ))}
+        </nav>
+      ) : null}
+      <div className="ui-workbench-command-group-shell__content ui-workbench-scrollbar">
+        {groups.map((group) => {
+          const titleId = `${generatedId}-${group.id}-title`;
+
+          return (
+            <section
+              key={group.id}
+              id={`${generatedId}-${group.id}`}
+              className="ui-workbench-command-group-shell__section"
+              aria-labelledby={titleId}
+            >
+              <div className="ui-workbench-command-group-shell__section-header">
+                <h2 id={titleId}>{group.label}</h2>
+                {showGroupCounts ? <span>{group.commands.length}</span> : null}
+              </div>
+              <WorkbenchCommandList
+                activeCommandId={activeCommandId}
+                aria-label={`${group.label} commands`}
+                commands={group.commands}
+                emptyLabel={emptyLabel}
+                query={query}
+                source="grouped-list"
+                onActiveCommandChange={onActiveCommandChange}
+                onRunCommand={(command, context) =>
+                  onRunCommand?.(command, {
+                    ...context,
+                    groupId: group.id,
+                    groupLabel: group.label,
+                  })
+                }
+              />
+            </section>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/workbench/CommandList.tsx

@@ -1,167 +1,167 @@
-import { useEffect, useId, useRef, type ComponentPropsWithRef, type ReactNode } from 'react';
-import { Button } from '../primitives/button';
-import { EmptyState } from '../primitives/empty-state';
-import { cxCodicon } from '../utils/codicon';
-import { cx } from '../utils/cx';
-import {
-  getWorkbenchCommandExecutionLabel,
-  getWorkbenchCommandStatusLabel,
-  isWorkbenchCommandRunnable,
-  type WorkbenchCommandDescriptor,
-  type WorkbenchCommandRunContext,
-  type WorkbenchCommandRunSource,
-} from './command-model';
-import { isWorkbenchStatusBusy } from './status';
-
-function commandIcon(command: WorkbenchCommandDescriptor) {
-  if (!command.icon) return null;
-  return <i aria-hidden="true" className={cxCodicon(command.icon)} />;
-}
-
-function commandStatus(command: WorkbenchCommandDescriptor) {
-  const status = command.status ?? (command.disabled ? 'disabled' : 'idle');
-
-  return (
-    <span
-      aria-label={getWorkbenchCommandStatusLabel(status)}
-      className="ui-workbench-command-item__status"
-      title={getWorkbenchCommandStatusLabel(status)}
-    >
-      <span aria-hidden="true" className="ui-workbench-command-item__status-dot" />
-    </span>
-  );
-}
-
-function commandExecution(command: WorkbenchCommandDescriptor) {
-  if (!command.execution) return null;
-
-  return (
-    <span className="ui-workbench-command-item__chip">
-      {getWorkbenchCommandExecutionLabel(command.execution)}
-    </span>
-  );
-}
-
-export interface WorkbenchCommandListProps extends Omit<
-  ComponentPropsWithRef<'div'>,
-  'children' | 'onSelect'
-> {
-  activeCommandId?: string | undefined;
-  commands: readonly WorkbenchCommandDescriptor[];
-  emptyLabel?: ReactNode | undefined;
-  onActiveCommandChange?: ((commandId: string) => void) | undefined;
-  onRunCommand?:
-    | ((command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => void)
-    | undefined;
-  query?: string | undefined;
-  source?: WorkbenchCommandRunSource | undefined;
-}
-
-export function WorkbenchCommandList({
-  activeCommandId,
-  className,
-  commands,
-  emptyLabel = 'No commands available',
-  id,
-  onActiveCommandChange,
-  onRunCommand,
-  query = '',
-  source = 'list',
-  ...props
-}: WorkbenchCommandListProps) {
-  const generatedId = useId();
-  const listId = id ?? generatedId;
-  const listRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!activeCommandId) return;
-
-    const activeElement = Array.from(
-      listRef.current?.querySelectorAll<HTMLElement>('[data-command-id]') ?? [],
-    ).find((element) => element.dataset.commandId === activeCommandId);
-
-    activeElement?.scrollIntoView?.({ block: 'nearest' });
-  }, [activeCommandId, commands]);
-
-  if (commands.length === 0) {
-    return (
-      <div
-        id={id}
-        className={cx('ui-workbench-command-list', 'ui-workbench-scrollbar', className)}
-        {...props}
-      >
-        <EmptyState compact icon="codicon-search">
-          {emptyLabel}
-        </EmptyState>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      id={id}
-      aria-label={props['aria-label'] ?? 'Commands'}
-      className={cx('ui-workbench-command-list', 'ui-workbench-scrollbar', className)}
-      role="listbox"
-      {...props}
-      ref={listRef}
-    >
-      {commands.map((command, index) => {
-        const active = command.id === activeCommandId;
-        const disabled = !isWorkbenchCommandRunnable(command);
-        const itemId = `${listId}-${command.id}`;
-        const descriptionId = command.description ? `${itemId}-description` : undefined;
-        const disabledReasonId = command.disabledReason ? `${itemId}-disabled` : undefined;
-
-        return (
-          <Button
-            key={command.id}
-            id={itemId}
-            aria-busy={command.status && isWorkbenchStatusBusy(command.status) ? true : undefined}
-            aria-describedby={
-              [descriptionId, disabledReasonId].filter(Boolean).join(' ') || undefined
-            }
-            aria-selected={active}
-            className="ui-workbench-command-item"
-            data-active={active ? 'true' : undefined}
-            data-command-id={command.id}
-            data-danger={command.danger ? 'true' : undefined}
-            data-status={command.status ?? (command.disabled ? 'disabled' : 'idle')}
-            disabled={disabled}
-            role="option"
-            onClick={() => onRunCommand?.(command, { index, query, source })}
-            onMouseDown={(event) => {
-              if (source === 'suggest') event.preventDefault();
-            }}
-            onMouseEnter={() => onActiveCommandChange?.(command.id)}
-          >
-            <span className="ui-workbench-command-item__icon">{commandIcon(command)}</span>
-            <span className="ui-workbench-command-item__content">
-              <span className="ui-workbench-command-item__label">{command.label}</span>
-              {command.description ? (
-                <span id={descriptionId} className="ui-workbench-command-item__description">
-                  {command.description}
-                </span>
-              ) : null}
-              {command.disabledReason ? (
-                <span id={disabledReasonId} className="ui-visually-hidden">
-                  {command.disabledReason}
-                </span>
-              ) : null}
-            </span>
-            <span className="ui-workbench-command-item__meta">
-              {command.category ? (
-                <span className="ui-workbench-command-item__category">{command.category}</span>
-              ) : null}
-              {commandExecution(command)}
-              {command.shortcut ? (
-                <kbd className="ui-workbench-command-item__shortcut">{command.shortcut}</kbd>
-              ) : null}
-              {commandStatus(command)}
-            </span>
-          </Button>
-        );
-      })}
-    </div>
-  );
-}
+import { useEffect, useId, useRef, type ComponentPropsWithRef, type ReactNode } from 'react';
+import { Button } from '../primitives/button';
+import { EmptyState } from '../primitives/empty-state';
+import { cxCodicon } from '../utils/codicon';
+import { cx } from '../utils/cx';
+import {
+  getWorkbenchCommandExecutionLabel,
+  getWorkbenchCommandStatusLabel,
+  isWorkbenchCommandRunnable,
+  type WorkbenchCommandDescriptor,
+  type WorkbenchCommandRunContext,
+  type WorkbenchCommandRunSource,
+} from './command-model';
+import { isWorkbenchStatusBusy } from './status';
+
+function commandIcon(command: WorkbenchCommandDescriptor) {
+  if (!command.icon) return null;
+  return <i aria-hidden="true" className={cxCodicon(command.icon)} />;
+}
+
+function commandStatus(command: WorkbenchCommandDescriptor) {
+  const status = command.status ?? (command.disabled ? 'disabled' : 'idle');
+
+  return (
+    <span
+      aria-label={getWorkbenchCommandStatusLabel(status)}
+      className="ui-workbench-command-item__status"
+      title={getWorkbenchCommandStatusLabel(status)}
+    >
+      <span aria-hidden="true" className="ui-workbench-command-item__status-dot" />
+    </span>
+  );
+}
+
+function commandExecution(command: WorkbenchCommandDescriptor) {
+  if (!command.execution) return null;
+
+  return (
+    <span className="ui-workbench-command-item__chip">
+      {getWorkbenchCommandExecutionLabel(command.execution)}
+    </span>
+  );
+}
+
+export interface WorkbenchCommandListProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  'children' | 'onSelect'
+> {
+  activeCommandId?: string | undefined;
+  commands: readonly WorkbenchCommandDescriptor[];
+  emptyLabel?: ReactNode | undefined;
+  onActiveCommandChange?: ((commandId: string) => void) | undefined;
+  onRunCommand?:
+    | ((command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => void)
+    | undefined;
+  query?: string | undefined;
+  source?: WorkbenchCommandRunSource | undefined;
+}
+
+export function WorkbenchCommandList({
+  activeCommandId,
+  className,
+  commands,
+  emptyLabel = 'No commands available',
+  id,
+  onActiveCommandChange,
+  onRunCommand,
+  query = '',
+  source = 'list',
+  ...props
+}: WorkbenchCommandListProps) {
+  const generatedId = useId();
+  const listId = id ?? generatedId;
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!activeCommandId) return;
+
+    const activeElement = Array.from(
+      listRef.current?.querySelectorAll<HTMLElement>('[data-command-id]') ?? [],
+    ).find((element) => element.dataset.commandId === activeCommandId);
+
+    activeElement?.scrollIntoView?.({ block: 'nearest' });
+  }, [activeCommandId, commands]);
+
+  if (commands.length === 0) {
+    return (
+      <div
+        id={id}
+        className={cx('ui-workbench-command-list', 'ui-workbench-scrollbar', className)}
+        {...props}
+      >
+        <EmptyState compact icon="codicon-search">
+          {emptyLabel}
+        </EmptyState>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      id={id}
+      aria-label={props['aria-label'] ?? 'Commands'}
+      className={cx('ui-workbench-command-list', 'ui-workbench-scrollbar', className)}
+      role="listbox"
+      {...props}
+      ref={listRef}
+    >
+      {commands.map((command, index) => {
+        const active = command.id === activeCommandId;
+        const disabled = !isWorkbenchCommandRunnable(command);
+        const itemId = `${listId}-${command.id}`;
+        const descriptionId = command.description ? `${itemId}-description` : undefined;
+        const disabledReasonId = command.disabledReason ? `${itemId}-disabled` : undefined;
+
+        return (
+          <Button
+            key={command.id}
+            id={itemId}
+            aria-busy={command.status && isWorkbenchStatusBusy(command.status) ? true : undefined}
+            aria-describedby={
+              [descriptionId, disabledReasonId].filter(Boolean).join(' ') || undefined
+            }
+            aria-selected={active}
+            className="ui-workbench-command-item"
+            data-active={active ? 'true' : undefined}
+            data-command-id={command.id}
+            data-danger={command.danger ? 'true' : undefined}
+            data-status={command.status ?? (command.disabled ? 'disabled' : 'idle')}
+            disabled={disabled}
+            role="option"
+            onClick={() => onRunCommand?.(command, { index, query, source })}
+            onMouseDown={(event) => {
+              if (source === 'suggest') event.preventDefault();
+            }}
+            onMouseEnter={() => onActiveCommandChange?.(command.id)}
+          >
+            <span className="ui-workbench-command-item__icon">{commandIcon(command)}</span>
+            <span className="ui-workbench-command-item__content">
+              <span className="ui-workbench-command-item__label">{command.label}</span>
+              {command.description ? (
+                <span id={descriptionId} className="ui-workbench-command-item__description">
+                  {command.description}
+                </span>
+              ) : null}
+              {command.disabledReason ? (
+                <span id={disabledReasonId} className="ui-visually-hidden">
+                  {command.disabledReason}
+                </span>
+              ) : null}
+            </span>
+            <span className="ui-workbench-command-item__meta">
+              {command.category ? (
+                <span className="ui-workbench-command-item__category">{command.category}</span>
+              ) : null}
+              {commandExecution(command)}
+              {command.shortcut ? (
+                <kbd className="ui-workbench-command-item__shortcut">{command.shortcut}</kbd>
+              ) : null}
+              {commandStatus(command)}
+            </span>
+          </Button>
+        );
+      })}
+    </div>
+  );
+}