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

package/src/layout/sidebar/SidebarActionIconBar.tsx

@@ -0,0 +1,242 @@
+import './sidebar-chrome.css';
+import { useCallback } from 'react';
+
+import type { ComponentPropsWithRef, MouseEvent as ReactMouseEvent } from 'react';
+
+import { ContextMenu, type ContextMenuItem } from '../../overlay/ContextMenu';
+import { useContextMenuState } from '../../overlay/useContextMenuState';
+
+import type { WorkbenchIconInput } from '../../icons/types';
+
+import { IconButton } from '../../primitives/icon-button';
+
+import { cx } from '../../utils/cx';
+
+import { type ActivityBarOrientation } from '../../workbench/shell/activityBarOrder';
+
+import {
+  mergeWorkbenchSidebarViewPlacementDropZoneProps,
+  useWorkbenchSidebarViewPlacementDropZone,
+} from '../../workbench/shell/useWorkbenchSidebarViewPlacementDropZone';
+
+import { useWorkbenchSidebarActionBarDnd } from '../../workbench/shell/useWorkbenchSidebarActionBarDnd';
+
+import { SidebarToolbar } from './SidebarToolbar';
+
+export interface SidebarActionIconDescriptor {
+  readonly active?: boolean | undefined;
+
+  readonly dataAttributes?: Readonly<Record<string, string | undefined>> | undefined;
+
+  readonly disabled?: boolean | undefined;
+
+  readonly icon: WorkbenchIconInput;
+
+  readonly id: string;
+
+  readonly label: string;
+
+  readonly onSelect: () => void;
+}
+
+export interface SidebarActionIconBarProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+  readonly acceptSidebarViewPlacementDrop?: ((viewId: string) => boolean) | undefined;
+  readonly actions?: readonly SidebarActionIconDescriptor[] | undefined;
+
+  readonly onActionsReorder?: ((actionIds: string[]) => void) | undefined;
+
+  readonly onSidebarViewPlacementDrop?: ((viewId: string) => void) | undefined;
+
+  readonly orientation?: ActivityBarOrientation | undefined;
+
+  readonly overflowActions?: readonly SidebarActionIconDescriptor[] | undefined;
+
+  readonly overflowMenuLabel?: string | undefined;
+
+  readonly placementDraggable?: boolean | undefined;
+
+  readonly reorderable?: boolean | undefined;
+
+  readonly sidebarViewPlacementDropZoneId?: string | undefined;
+}
+
+function toContextMenuItems(actions: readonly SidebarActionIconDescriptor[]): ContextMenuItem[] {
+  return actions.map((action) => ({
+    disabled: action.disabled,
+    icon: typeof action.icon === 'string' ? action.icon : undefined,
+    id: action.id,
+    label: action.label,
+    onSelect: action.onSelect,
+  }));
+}
+
+function resolveActionDataAttributes(
+  dataAttributes: SidebarActionIconDescriptor['dataAttributes'],
+): Record<string, string | undefined> {
+  return dataAttributes ?? {};
+}
+
+export function SidebarActionIconBar({
+  acceptSidebarViewPlacementDrop,
+  actions = [],
+
+  className,
+
+  onActionsReorder,
+
+  onSidebarViewPlacementDrop,
+
+  orientation = 'horizontal',
+
+  overflowActions = [],
+
+  overflowMenuLabel = 'More actions',
+
+  placementDraggable = false,
+
+  reorderable = false,
+
+  sidebarViewPlacementDropZoneId,
+
+  ...toolbarProps
+}: SidebarActionIconBarProps) {
+  const {
+    close: closeOverflowMenu,
+    openAt: openOverflowMenuAt,
+    state: overflowMenu,
+  } = useContextMenuState<'overflow'>();
+
+  const { draggingItemId, getDropPosition, getItemDragHandlers } = useWorkbenchSidebarActionBarDnd({
+    itemIds: actions.map((action) => action.id),
+    onReorder: onActionsReorder,
+    orientation,
+    placementDraggable,
+    reorderable,
+  });
+
+  const placementDropZoneProps = useWorkbenchSidebarViewPlacementDropZone({
+    acceptViewForDrop:
+      onSidebarViewPlacementDrop === undefined
+        ? () => false
+        : (acceptSidebarViewPlacementDrop ??
+          ((viewId) => !actions.some((action) => action.id === viewId))),
+    onDropView: onSidebarViewPlacementDrop ?? (() => undefined),
+    zoneId: sidebarViewPlacementDropZoneId,
+  });
+
+  const mergedToolbarProps =
+    onSidebarViewPlacementDrop === undefined
+      ? toolbarProps
+      : mergeWorkbenchSidebarViewPlacementDropZoneProps(placementDropZoneProps, toolbarProps);
+
+  const openOverflowMenu = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement>) => {
+      const rect = event.currentTarget.getBoundingClientRect();
+      openOverflowMenuAt({ x: rect.left, y: rect.bottom + 4 }, 'overflow');
+    },
+    [openOverflowMenuAt],
+  );
+  if (actions.length === 0 && overflowActions.length === 0) {
+    return null;
+  }
+
+  const renderAction = (action: SidebarActionIconDescriptor) => {
+    const dropPosition = getDropPosition(action.id);
+    const dragHandlers = getItemDragHandlers(action.id, { disabled: action.disabled });
+
+    const button = (
+      <IconButton
+        aria-pressed={action.active ? true : undefined}
+        className={cx(
+          'ui-sidebar-action-icon-bar__button',
+          action.active && 'ui-sidebar-action-icon-bar__button--active',
+        )}
+        compact
+        data-drop-position={dropPosition}
+        disabled={action.disabled}
+        icon={action.icon}
+        label={action.label}
+        title={action.label}
+        onClick={action.onSelect}
+        {...resolveActionDataAttributes(action.dataAttributes)}
+      />
+    );
+
+    if (dragHandlers === null) {
+      return button;
+    }
+
+    return (
+      <span
+        className={cx(
+          'ui-sidebar-action-icon-bar__item-host',
+          reorderable && 'ui-sidebar-action-icon-bar__item-host--reorderable',
+          placementDraggable && 'ui-sidebar-action-icon-bar__item-host--placement-draggable',
+          draggingItemId === action.id && 'ui-sidebar-action-icon-bar__item-host--dragging',
+        )}
+        {...dragHandlers}
+      >
+        {dropPosition !== undefined ? (
+          <span
+            aria-hidden
+            className={cx(
+              'ui-sidebar-action-icon-bar__drop-indicator',
+              dropPosition === 'before'
+                ? 'ui-sidebar-action-icon-bar__drop-indicator--before'
+                : 'ui-sidebar-action-icon-bar__drop-indicator--after',
+            )}
+          />
+        ) : null}
+        {button}
+      </span>
+    );
+  };
+
+  return (
+    <>
+      <SidebarToolbar
+        className={cx(
+          'ui-sidebar-action-icon-bar',
+
+          orientation === 'horizontal' && 'ui-sidebar-action-icon-bar--horizontal',
+
+          reorderable && 'ui-sidebar-action-icon-bar--reorderable',
+
+          className,
+        )}
+        data-ui-sidebar-action-icon-bar="true"
+        {...mergedToolbarProps}
+      >
+        {actions.map((action) => (
+          <span key={action.id} className="ui-sidebar-action-icon-bar__item">
+            {renderAction(action)}
+          </span>
+        ))}
+
+        {overflowActions.length > 0 ? (
+          <IconButton
+            aria-expanded={overflowMenu !== null}
+            aria-haspopup="menu"
+            className="ui-sidebar-action-icon-bar__overflow"
+            compact
+            icon="ellipsis"
+            label={overflowMenuLabel}
+            title={overflowMenuLabel}
+            onClick={openOverflowMenu}
+          />
+        ) : null}
+      </SidebarToolbar>
+
+      {overflowMenu && overflowActions.length > 0 ? (
+        <ContextMenu
+          ariaLabel={overflowMenuLabel}
+          className="ui-sidebar-action-icon-bar__menu"
+          items={toContextMenuItems(overflowActions)}
+          x={overflowMenu.x}
+          y={overflowMenu.y}
+          onClose={closeOverflowMenu}
+        />
+      ) : null}
+    </>
+  );
+}

package/src/layout/sidebar/SidebarSectionNestingContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext, type ReactNode } from 'react';
+
+const SidebarSectionNestingContext = createContext(0);
+
+export function useSidebarSectionBaseDepth(): number {
+  return useContext(SidebarSectionNestingContext);
+}
+
+export function SidebarSectionNestingProvider({
+  baseDepth,
+  children,
+}: {
+  baseDepth: number;
+  children: ReactNode;
+}) {
+  return (
+    <SidebarSectionNestingContext.Provider value={baseDepth}>
+      {children}
+    </SidebarSectionNestingContext.Provider>
+  );
+}

package/src/layout/sidebar/SidebarSlotChrome.tsx

@@ -0,0 +1,32 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+
+import { cx } from '../../utils/cx';
+import { PanelHeader } from '../panel/Panel';
+
+export interface SidebarSlotChromeProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+  readonly actions?: ReactNode;
+  readonly leading?: ReactNode;
+  readonly reserveActionsSlot?: boolean;
+}
+
+/**
+ * Shared primary/secondary sidebar slot header: leading title or tab strip, trailing actions.
+ */
+export function SidebarSlotChrome({
+  actions,
+  className,
+  leading,
+  reserveActionsSlot,
+  ...props
+}: SidebarSlotChromeProps): ReactNode {
+  return (
+    <PanelHeader
+      actions={actions}
+      className={cx('ui-sidebar-view__header', 'ui-sidebar-slot-chrome', className)}
+      reserveActionsSlot={reserveActionsSlot ?? Boolean(actions)}
+      {...props}
+    >
+      {leading}
+    </PanelHeader>
+  );
+}

package/src/layout/sidebar/SidebarToolbar.tsx

@@ -0,0 +1,10 @@
+import './sidebar-chrome.css';
+import type { ToolbarProps } from '../../primitives/toolbar';
+import { Toolbar } from '../../primitives/toolbar';
+import { cx } from '../../utils/cx';
+
+export type SidebarToolbarProps = ToolbarProps;
+
+export function SidebarToolbar({ className, ...props }: SidebarToolbarProps) {
+  return <Toolbar className={cx('ui-sidebar-toolbar', className)} {...props} />;
+}

package/src/layout/sidebar/WorkbenchActionSidebar.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+
+import { cx } from '../../utils/cx';
+import { SideBarViewFrame, type SideBarViewFrameProps } from './SideBarViewFrame';
+import {
+  WorkbenchActionList,
+  WorkbenchActionListItem,
+  type WorkbenchActionItem,
+  type WorkbenchActionListProps,
+} from './WorkbenchSidebarActions';
+
+export interface WorkbenchActionSidebarItem extends WorkbenchActionItem {
+  readonly selected?: boolean | undefined;
+  readonly showStatus?: boolean | undefined;
+  readonly testId?: string | undefined;
+  readonly title?: string | undefined;
+  readonly unavailable?: boolean | undefined;
+}
+
+export interface WorkbenchActionSidebarProps extends Omit<
+  SideBarViewFrameProps,
+  'children' | 'onSelect'
+> {
+  readonly emptyLabel?: ReactNode | undefined;
+  readonly items: readonly WorkbenchActionSidebarItem[];
+  readonly listProps?:
+    Omit<WorkbenchActionListProps, 'children' | 'empty' | 'emptyLabel'> | undefined;
+  readonly onSelect?: ((item: WorkbenchActionSidebarItem) => void) | undefined;
+  readonly renderIcon?: ((item: WorkbenchActionSidebarItem) => ReactNode) | undefined;
+}
+
+export function WorkbenchActionSidebar({
+  className,
+  emptyLabel = 'No actions',
+  items,
+  listProps,
+  onSelect,
+  renderIcon,
+  ...frameProps
+}: WorkbenchActionSidebarProps) {
+  const { className: listClassName, ...restListProps } = listProps ?? {};
+  const empty = items.length === 0;
+
+  return (
+    <SideBarViewFrame className={cx('ui-workbench-action-sidebar', className)} {...frameProps}>
+      <WorkbenchActionList
+        className={cx('ui-workbench-action-sidebar__list', listClassName)}
+        empty={empty}
+        emptyLabel={emptyLabel}
+        {...restListProps}
+      >
+        {items.map((item) => (
+          <WorkbenchActionListItem
+            key={item.id}
+            danger={item.danger}
+            data-testid={item.testId}
+            description={item.description}
+            disabledReason={item.disabledReason}
+            icon={renderIcon ? renderIcon(item) : item.icon}
+            label={item.label}
+            selected={item.selected}
+            shortcut={item.shortcut}
+            showStatus={item.showStatus ?? false}
+            status={item.status}
+            title={item.title ?? item.label}
+            unavailable={item.unavailable}
+            onClick={onSelect ? () => onSelect(item) : undefined}
+          />
+        ))}
+      </WorkbenchActionList>
+    </SideBarViewFrame>
+  );
+}

package/src/layout/{WorkbenchSidebarActions.tsx → sidebar/WorkbenchSidebarActions.tsx}

@@ -1,20 +1,24 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
 import { forwardRef, useId, useState } from 'react';
-import { Badge } from '../primitives/Badge';
-import { cxCodicon } from '../utils/codicon';
-import { cx } from '../utils/cx';
+import { Badge } from '../../primitives/badge';
+import { cxCodicon } from '../../utils/codicon';
+import { cx } from '../../utils/cx';
 import {
   getWorkbenchStatusLabel,
   isWorkbenchStatusBusy,
   isWorkbenchStatusDisabled,
   type WorkbenchStatus,
-} from '../workbench/status';
+} from '../../workbench/shell/status';
 import {
   SideBarList,
   SideBarListItem,
   type SideBarListItemProps,
   type SideBarListProps,
 } from './SideBarViewFrame';
+import {
+  SidebarSectionNestingProvider,
+  useSidebarSectionBaseDepth,
+} from './SidebarSectionNestingContext';
 
 export type WorkbenchActionStatus = WorkbenchStatus;
 
@@ -32,6 +36,78 @@ export interface WorkbenchActionItem {
 
 type WorkbenchSidebarHeadingLevel = 2 | 3 | 4 | 5 | 6;
 
+export interface WorkbenchSidebarSectionHeaderProps {
+  actions?: ReactNode;
+  badge?: ReactNode;
+  collapsible?: boolean;
+  collapsed: boolean;
+  contentId?: string;
+  headingId: string;
+  headingLevel?: WorkbenchSidebarHeadingLevel;
+  onToggle?: () => void;
+  title: ReactNode;
+}
+
+export function WorkbenchSidebarSectionHeader({
+  actions,
+  badge,
+  collapsible = true,
+  collapsed,
+  contentId,
+  headingId,
+  headingLevel = 3,
+  onToggle,
+  title,
+}: WorkbenchSidebarSectionHeaderProps) {
+  return (
+    <div className="ui-workbench-sidebar-section__header">
+      {collapsible ? (
+        <button
+          aria-controls={contentId}
+          aria-expanded={!collapsed}
+          className="ui-workbench-sidebar-section__toggle"
+          type="button"
+          onClick={onToggle}
+        >
+          <i
+            aria-hidden="true"
+            className={cxCodicon(
+              collapsed ? 'chevron-right' : 'chevron-down',
+              'ui-workbench-sidebar-section__chevron',
+            )}
+          />
+          <span
+            id={headingId}
+            aria-level={headingLevel}
+            className="ui-workbench-sidebar-section__title"
+            role="heading"
+          >
+            {title}
+          </span>
+        </button>
+      ) : (
+        <div className="ui-workbench-sidebar-section__static-title">
+          <span className="ui-workbench-sidebar-section__chevron" />
+          <span
+            id={headingId}
+            aria-level={headingLevel}
+            className="ui-workbench-sidebar-section__title"
+            role="heading"
+          >
+            {title}
+          </span>
+        </div>
+      )}
+      {badge || actions ? (
+        <div className="ui-workbench-sidebar-section__meta">
+          {badge}
+          {actions}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
 export interface WorkbenchSidebarSectionProps extends Omit<
   ComponentPropsWithRef<'section'>,
   'title'
@@ -44,6 +120,12 @@ export interface WorkbenchSidebarSectionProps extends Omit<
   count?: number;
   defaultCollapsed?: boolean;
   headingLevel?: WorkbenchSidebarHeadingLevel;
+  /**
+   * When true (default), `SideBarListItem` depth under this section is offset by +1
+   * so rows read as children of the section header. Set false for trees that already
+   * own full indent (rare).
+   */
+  nestListItems?: boolean;
   onCollapsedChange?: (collapsed: boolean) => void;
   title: ReactNode;
 }
@@ -59,6 +141,7 @@ export function WorkbenchSidebarSection({
   defaultCollapsed = false,
   headingLevel = 3,
   id,
+  nestListItems = true,
   onCollapsedChange,
   title,
   ...props
@@ -67,8 +150,10 @@ export function WorkbenchSidebarSection({
   const sectionId = id ?? generatedId;
   const headingId = `${sectionId}-heading`;
   const contentId = `${sectionId}-content`;
+  const parentBaseDepth = useSidebarSectionBaseDepth();
   const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsed);
   const resolvedCollapsed = collapsed ?? uncontrolledCollapsed;
+  const nestedBaseDepth = nestListItems ? parentBaseDepth + 1 : parentBaseDepth;
 
   const handleToggle = () => {
     if (!collapsible) return;
@@ -90,63 +175,32 @@ export function WorkbenchSidebarSection({
       className={cx('ui-workbench-sidebar-section', className)}
       {...props}
     >
-      <div className="ui-workbench-sidebar-section__header">
-        {collapsible ? (
-          <button
-            aria-controls={contentId}
-            aria-expanded={!resolvedCollapsed}
-            className="ui-workbench-sidebar-section__toggle"
-            type="button"
-            onClick={handleToggle}
-          >
-            <i
-              aria-hidden="true"
-              className={cxCodicon(
-                resolvedCollapsed ? 'chevron-right' : 'chevron-down',
-                'ui-workbench-sidebar-section__chevron',
-              )}
-            />
-            <span
-              id={headingId}
-              aria-level={headingLevel}
-              className="ui-workbench-sidebar-section__title"
-              role="heading"
-            >
-              {title}
-            </span>
-          </button>
-        ) : (
-          <div className="ui-workbench-sidebar-section__static-title">
-            <span className="ui-workbench-sidebar-section__chevron" />
-            <span
-              id={headingId}
-              aria-level={headingLevel}
-              className="ui-workbench-sidebar-section__title"
-              role="heading"
-            >
-              {title}
-            </span>
-          </div>
-        )}
-        {resolvedBadge || actions ? (
-          <div className="ui-workbench-sidebar-section__meta">
-            {resolvedBadge}
-            {actions}
-          </div>
-        ) : null}
-      </div>
+      <WorkbenchSidebarSectionHeader
+        actions={actions}
+        badge={resolvedBadge}
+        collapsible={collapsible}
+        collapsed={resolvedCollapsed}
+        contentId={contentId}
+        headingId={headingId}
+        headingLevel={headingLevel}
+        title={title}
+        onToggle={handleToggle}
+      />
       <div
         id={contentId}
         className="ui-workbench-sidebar-section__content"
         hidden={resolvedCollapsed}
       >
-        {children}
+        <SidebarSectionNestingProvider baseDepth={nestedBaseDepth}>
+          {children}
+        </SidebarSectionNestingProvider>
       </div>
     </section>
   );
 }
 
 export interface WorkbenchActionListProps extends SideBarListProps {
+  children?: ReactNode;
   empty?: boolean;
   emptyLabel?: ReactNode;
 }
@@ -161,7 +215,7 @@ export function WorkbenchActionList({
   return (
     <SideBarList className={cx('ui-workbench-action-list', className)} {...props}>
       {empty ? (
-        <li className="ui-side-bar-list-entry">
+        <li className="ui-sidebar-list-entry">
           <div className="ui-workbench-action-list__empty">{emptyLabel}</div>
         </li>
       ) : (