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

package/src/modal/Modal.tsx

@@ -1,370 +1,243 @@
 import {
   useCallback,
-  useEffect,
   useId,
   useRef,
-  useState,
   type CSSProperties,
   type FormEventHandler,
-  type PointerEvent as ReactPointerEvent,
+  type MouseEvent,
   type ReactNode,
+  type RefObject,
 } from 'react';
 import { cx } from '../utils/cx';
+import { ModalResizeHandles } from './ModalResizeHandles';
+import { ModalTitlebar } from './ModalTitlebar';
+import { useModalFocusTrap } from './useModalFocusTrap';
+import { useModalWindowFrame } from './useModalWindowFrame';
+import {
+  resolveWorkbenchWindowChromeDataAttributes,
+  type WorkbenchWindowChromeMode,
+} from '../workbench/chrome/workbenchPlatformChrome';
 
-export interface ModalPosition {
-  x: number;
-  y: number;
-}
+export type { ModalBounds, ModalPosition, ModalSize } from './modalTypes';
+
+export type ModalBodyLayout = 'block' | 'stack';
+export type ModalBodyPadding = 'none' | 'md' | 'lg';
 
 export interface ModalProps {
+  chrome?: WorkbenchWindowChromeMode;
   title: ReactNode;
-  titleSuffix?: ReactNode | undefined;
+  titleSuffix?: ReactNode;
   children: ReactNode;
-  footer?: ReactNode | undefined;
-  className?: string | undefined;
-  bodyClassName?: string | undefined;
-  closeLabel?: string | undefined;
-  defaultMaximized?: boolean | undefined;
-  labelledBy?: string | undefined;
-  maximizable?: boolean | undefined;
-  maximizeLabel?: string | undefined;
-  movable?: boolean | undefined;
+  footer?: ReactNode;
+  className?: string;
+  bodyClassName?: string;
+  bodyLayout?: ModalBodyLayout;
+  bodyPadding?: ModalBodyPadding;
+  bodyScroll?: 'auto' | 'hidden';
+  /** When true (default), Escape calls `onClose`. */
+  closeOnEscape?: boolean;
+  closeLabel?: string;
+  defaultHeight?: number;
+  defaultMaximized?: boolean;
+  defaultWidth?: number;
+  /** Optional element to focus when the modal mounts (must be inside the dialog). */
+  initialFocusRef?: RefObject<HTMLElement | null>;
+  labelledBy?: string;
+  maximizeLabel?: string;
+  minHeight?: number;
+  minWidth?: number;
   onClose: () => void;
-  onSubmit?: FormEventHandler<HTMLFormElement> | undefined;
-  restoreLabel?: string | undefined;
+  onSubmit?: FormEventHandler<HTMLFormElement>;
+  /** When true (default), restore focus to the previously focused element on unmount. */
+  restoreFocusOnClose?: boolean;
+  restoreLabel?: string;
 }
 
-interface ModalDragState {
-  pointerId: number;
-  rect: DOMRect;
-  startClientX: number;
-  startClientY: number;
-  startPosition: ModalPosition;
+interface ModalFrameProps {
+  bodyClassName?: string;
+  bodyLayout: ModalBodyLayout;
+  bodyPadding: ModalBodyPadding;
+  bodyScroll: 'auto' | 'hidden';
+  children: ReactNode;
+  dataAttrs: Record<string, string | undefined>;
+  footer?: ReactNode;
+  frameRef: (node: HTMLDivElement | HTMLFormElement | null) => void;
+  modalClassName: string;
+  resolvedLabelledBy: string;
+  resizeHandles?: ReactNode;
+  style?: CSSProperties;
+  titlebar: ReactNode;
+  onSubmit?: FormEventHandler<HTMLFormElement>;
 }
 
-function ModalContent({
-  title,
-  titleSuffix,
+function ModalFrame({
+  bodyClassName,
+  bodyLayout,
+  bodyPadding,
+  bodyScroll,
   children,
+  dataAttrs,
   footer,
-  bodyClassName,
-  closeLabel = 'Close modal',
-  labelledBy,
-  maximizable,
-  maximized,
-  maximizeLabel = 'Maximize modal',
-  movable,
-  onClose,
-  onTitlebarDoubleClick,
-  onTitlebarPointerDown,
-  onToggleMaximized,
-  restoreLabel = 'Restore modal',
-}: Omit<ModalProps, 'className' | 'defaultMaximized' | 'onSubmit'> & {
-  maximized: boolean;
-  onTitlebarDoubleClick: () => void;
-  onTitlebarPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
-  onToggleMaximized: () => void;
-}) {
-  const maximizeTitle = maximized ? restoreLabel : maximizeLabel;
-
-  return (
+  frameRef,
+  modalClassName,
+  resolvedLabelledBy,
+  resizeHandles,
+  style,
+  titlebar,
+  onSubmit,
+}: ModalFrameProps) {
+  const content = (
     <>
-      <div
-        className="ui-modal__titlebar"
-        data-draggable={movable && !maximized ? 'true' : undefined}
-        onDoubleClick={onTitlebarDoubleClick}
-        onPointerDown={onTitlebarPointerDown}
-      >
-        <span id={labelledBy} className="ui-modal__title">
-          {title}
-          {titleSuffix}
-        </span>
-        <div className="ui-modal__controls">
-          {maximizable ? (
-            <button
-              type="button"
-              className="ui-modal__control"
-              aria-label={maximizeTitle}
-              title={maximizeTitle}
-              onClick={onToggleMaximized}
-            >
-              <i
-                aria-hidden="true"
-                className={cx(
-                  'codicon',
-                  maximized ? 'codicon-chrome-restore' : 'codicon-chrome-maximize',
-                )}
-              />
-            </button>
-          ) : null}
-          <button
-            type="button"
-            className="ui-modal__control ui-modal__close"
-            aria-label={closeLabel}
-            title={closeLabel}
-            onClick={onClose}
+      {titlebar}
+      <div className="ui-modal__surface">
+        <div className="ui-modal__content">
+          <div
+            className={cx(
+              'ui-modal__body',
+              bodyLayout !== 'block' && `ui-modal__body--${bodyLayout}`,
+              bodyPadding !== 'none' && `ui-modal__body--padding-${bodyPadding}`,
+              bodyScroll === 'auto' &&
+                'ui-scroll-area ui-scroll-area--both ui-scroll-area--stable-gutter ui-workbench-scrollbar',
+              bodyClassName,
+            )}
           >
-            <i aria-hidden="true" className="codicon codicon-close" />
-          </button>
+            {children}
+          </div>
+          {footer ? <div className="ui-modal__footer">{footer}</div> : null}
         </div>
+        {resizeHandles}
       </div>
-      <div className={cx('ui-modal__body', bodyClassName)}>{children}</div>
-      {footer && <div className="ui-modal__footer">{footer}</div>}
     </>
   );
+
+  const dialogProps = {
+    ref: frameRef,
+    'aria-labelledby': resolvedLabelledBy,
+    'aria-modal': 'true' as const,
+    className: modalClassName,
+    role: 'dialog' as const,
+    style,
+    onClick: (event: MouseEvent) => event.stopPropagation(),
+    ...dataAttrs,
+  };
+
+  if (onSubmit) {
+    return (
+      <form {...dialogProps} onSubmit={onSubmit}>
+        {content}
+      </form>
+    );
+  }
+
+  return <div {...dialogProps}>{content}</div>;
 }
 
 export function Modal({
+  chrome = 'platform',
   title,
   titleSuffix,
   children,
   footer,
   className,
   bodyClassName,
+  bodyLayout = 'block',
+  bodyPadding = 'none',
+  bodyScroll = 'hidden',
+  closeOnEscape = true,
   closeLabel,
+  defaultHeight,
   defaultMaximized = false,
+  defaultWidth,
+  initialFocusRef,
   labelledBy,
-  maximizable = false,
   maximizeLabel,
-  movable = false,
+  minHeight = 200,
+  minWidth = 320,
   onClose,
   onSubmit,
+  restoreFocusOnClose = true,
   restoreLabel,
 }: ModalProps) {
   const modalClassName = cx('ui-modal', className);
+  const chromeAttributes = resolveWorkbenchWindowChromeDataAttributes(chrome);
   const generatedLabelId = useId();
   const resolvedLabelledBy = labelledBy ?? generatedLabelId;
-  const modalRef = useRef<HTMLDivElement | HTMLFormElement>(null);
-  const dragStateRef = useRef<ModalDragState | null>(null);
-  const [position, setPosition] = useState<ModalPosition>({ x: 0, y: 0 });
-  const [dragging, setDragging] = useState(false);
-  const [maximized, setMaximized] = useState(defaultMaximized);
-  const modalStyle = createModalPositionStyle(position, maximized);
-
-  const handleToggleMaximized = useCallback(() => {
-    if (!maximizable) {
-      return;
-    }
-
-    setMaximized((current) => !current);
-    setDragging(false);
-  }, [maximizable]);
-
-  const handleFormRef = useCallback((node: HTMLFormElement | null) => {
-    modalRef.current = node;
-  }, []);
-
-  const handleFrameRef = useCallback((node: HTMLDivElement | null) => {
-    modalRef.current = node;
-  }, []);
-
-  const handleTitlebarDoubleClick = useCallback(() => {
-    handleToggleMaximized();
-  }, [handleToggleMaximized]);
-
-  const handleTitlebarPointerDown = useCallback(
-    (event: ReactPointerEvent<HTMLDivElement>) => {
-      if (!movable || maximized || event.button !== 0 || isModalTitlebarControl(event.target)) {
-        return;
-      }
-
-      const modal = modalRef.current;
-      if (!modal) {
-        return;
-      }
-
-      dragStateRef.current = {
-        pointerId: event.pointerId,
-        rect: modal.getBoundingClientRect(),
-        startClientX: event.clientX,
-        startClientY: event.clientY,
-        startPosition: position,
-      };
-
-      event.preventDefault();
-      try {
-        event.currentTarget.setPointerCapture(event.pointerId);
-      } catch {
-        // Some test and embedded browser environments do not expose pointer capture.
-      }
-      setDragging(true);
+  const dialogRef = useRef<HTMLElement | null>(null);
+
+  const {
+    assignFrameRef,
+    bounds,
+    handleResizeStart,
+    handleTitlebarPointerDown,
+    handleToggleMaximized,
+    isContained,
+    maximized,
+    windowStyle,
+  } = useModalWindowFrame({
+    defaultHeight,
+    defaultMaximized,
+    defaultWidth,
+    minHeight,
+    minWidth,
+  });
+
+  const setFrameRef = useCallback(
+    (node: HTMLDivElement | HTMLFormElement | null) => {
+      dialogRef.current = node;
+      assignFrameRef(node);
     },
-    [maximized, movable, position],
+    [assignFrameRef],
   );
 
-  useEffect(() => {
-    if (!dragging) {
-      return undefined;
-    }
-
-    const previousCursor = document.body.style.cursor;
-    const previousUserSelect = document.body.style.userSelect;
-
-    document.body.style.cursor = 'move';
-    document.body.style.userSelect = 'none';
-
-    const handlePointerMove = (event: PointerEvent) => {
-      const dragState = dragStateRef.current;
-      if (!dragState || event.pointerId !== dragState.pointerId) {
-        return;
-      }
-
-      event.preventDefault();
-      const nextPosition = {
-        x: dragState.startPosition.x + event.clientX - dragState.startClientX,
-        y: dragState.startPosition.y + event.clientY - dragState.startClientY,
-      };
-
-      setPosition(clampModalPosition(nextPosition, dragState.startPosition, dragState.rect));
-    };
-
-    const handlePointerUp = (event: PointerEvent) => {
-      const dragState = dragStateRef.current;
-      if (dragState && event.pointerId !== dragState.pointerId) {
-        return;
-      }
-
-      dragStateRef.current = null;
-      setDragging(false);
-    };
-
-    window.addEventListener('pointermove', handlePointerMove, { passive: false });
-    window.addEventListener('pointerup', handlePointerUp);
-    window.addEventListener('pointercancel', handlePointerUp);
-
-    return () => {
-      document.body.style.cursor = previousCursor;
-      document.body.style.userSelect = previousUserSelect;
-      window.removeEventListener('pointermove', handlePointerMove);
-      window.removeEventListener('pointerup', handlePointerUp);
-      window.removeEventListener('pointercancel', handlePointerUp);
-    };
-  }, [dragging]);
-
-  useEffect(() => {
-    if (typeof window === 'undefined' || maximized) {
-      return undefined;
-    }
-
-    const handleResize = () => {
-      const modal = modalRef.current;
-      if (!modal) {
-        return;
-      }
-
-      setPosition((current) => clampModalPosition(current, current, modal.getBoundingClientRect()));
-    };
-
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [maximized]);
-
-  const contentProps = {
-    title,
-    titleSuffix,
-    bodyClassName,
-    closeLabel,
-    labelledBy: resolvedLabelledBy,
-    maximizable,
-    maximized,
-    maximizeLabel,
-    movable,
+  useModalFocusTrap({
+    closeOnEscape,
+    containerRef: dialogRef,
+    initialFocusRef,
     onClose,
-    onTitlebarDoubleClick: handleTitlebarDoubleClick,
-    onTitlebarPointerDown: handleTitlebarPointerDown,
-    onToggleMaximized: handleToggleMaximized,
-    restoreLabel,
-    footer,
-  } satisfies Omit<ModalProps, 'className' | 'children' | 'defaultMaximized' | 'onSubmit'> & {
-    maximized: boolean;
-    onTitlebarDoubleClick: () => void;
-    onTitlebarPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
-    onToggleMaximized: () => void;
-  };
+    restoreFocusOnClose,
+  });
 
-  if (onSubmit) {
-    return (
-      <div className="ui-modal-overlay" onClick={onClose}>
-        <form
-          ref={handleFormRef}
-          className={modalClassName}
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby={resolvedLabelledBy}
-          data-dragging={dragging ? 'true' : undefined}
-          data-maximized={maximized ? 'true' : undefined}
-          onClick={(event) => event.stopPropagation()}
-          onSubmit={onSubmit}
-          style={modalStyle}
-        >
-          <ModalContent {...contentProps}>{children}</ModalContent>
-        </form>
-      </div>
-    );
-  }
+  const isPositioned = bounds !== null || maximized;
 
   return (
     <div className="ui-modal-overlay" onClick={onClose}>
-      <div
-        ref={handleFrameRef}
-        className={modalClassName}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={resolvedLabelledBy}
-        data-dragging={dragging ? 'true' : undefined}
-        data-maximized={maximized ? 'true' : undefined}
-        onClick={(event) => event.stopPropagation()}
-        style={modalStyle}
+      <ModalFrame
+        bodyClassName={bodyClassName}
+        bodyLayout={bodyLayout}
+        bodyPadding={bodyPadding}
+        bodyScroll={bodyScroll}
+        dataAttrs={{
+          'data-contained': isContained ? 'true' : undefined,
+          'data-maximized': maximized ? 'true' : undefined,
+          'data-ready': isPositioned ? undefined : 'false',
+          ...(chromeAttributes ?? {}),
+        }}
+        footer={footer}
+        frameRef={setFrameRef}
+        modalClassName={modalClassName}
+        resolvedLabelledBy={resolvedLabelledBy}
+        resizeHandles={maximized ? null : <ModalResizeHandles onResizeStart={handleResizeStart} />}
+        style={windowStyle}
+        titlebar={
+          <ModalTitlebar
+            chrome={chrome}
+            closeLabel={closeLabel}
+            labelledBy={resolvedLabelledBy}
+            maximized={maximized}
+            maximizeLabel={maximizeLabel}
+            restoreLabel={restoreLabel}
+            title={title}
+            titleSuffix={titleSuffix}
+            onClose={onClose}
+            onDoubleClick={handleToggleMaximized}
+            onPointerDown={handleTitlebarPointerDown}
+            onToggleMaximized={handleToggleMaximized}
+          />
+        }
+        onSubmit={onSubmit}
       >
-        <ModalContent {...contentProps}>{children}</ModalContent>
-      </div>
+        {children}
+      </ModalFrame>
     </div>
   );
 }
-
-function createModalPositionStyle(
-  position: ModalPosition,
-  maximized: boolean,
-): CSSProperties | undefined {
-  if (maximized || (position.x === 0 && position.y === 0)) {
-    return undefined;
-  }
-
-  return {
-    transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
-  };
-}
-
-function clampModalPosition(
-  nextPosition: ModalPosition,
-  basePosition: ModalPosition,
-  rect: DOMRect,
-): ModalPosition {
-  if (typeof window === 'undefined') {
-    return nextPosition;
-  }
-
-  const padding = 8;
-  const deltaX = nextPosition.x - basePosition.x;
-  const deltaY = nextPosition.y - basePosition.y;
-  const minDeltaX = padding - rect.left;
-  const maxDeltaX = window.innerWidth - padding - rect.right;
-  const minDeltaY = padding - rect.top;
-  const maxDeltaY = window.innerHeight - padding - rect.bottom;
-
-  return {
-    x: basePosition.x + clamp(deltaX, minDeltaX, maxDeltaX),
-    y: basePosition.y + clamp(deltaY, minDeltaY, maxDeltaY),
-  };
-}
-
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}
-
-function isModalTitlebarControl(target: EventTarget | null): boolean {
-  return target instanceof Element && Boolean(target.closest('.ui-modal__controls'));
-}

package/src/modal/ModalResizeHandles.tsx

@@ -0,0 +1,40 @@
+import type { PointerEvent as ReactPointerEvent } from 'react';
+import type { ModalResizeEdge } from './modalTypes';
+
+export interface ModalResizeHandlesProps {
+  onResizeStart: (edge: ModalResizeEdge, event: ReactPointerEvent<HTMLDivElement>) => void;
+}
+
+const RESIZE_HANDLES: Array<{ edge: ModalResizeEdge; className: string }> = [
+  { edge: 'n', className: 'ui-modal__resize-handle--n' },
+  { edge: 's', className: 'ui-modal__resize-handle--s' },
+  { edge: 'e', className: 'ui-modal__resize-handle--e' },
+  { edge: 'w', className: 'ui-modal__resize-handle--w' },
+  { edge: 'ne', className: 'ui-modal__resize-handle--ne' },
+  { edge: 'nw', className: 'ui-modal__resize-handle--nw' },
+  { edge: 'se', className: 'ui-modal__resize-handle--se' },
+  { edge: 'sw', className: 'ui-modal__resize-handle--sw' },
+];
+
+export function ModalResizeHandles({ onResizeStart }: ModalResizeHandlesProps) {
+  return (
+    <>
+      {RESIZE_HANDLES.map(({ edge, className }) => (
+        <div
+          key={edge}
+          aria-hidden="true"
+          className={`ui-modal__resize-handle ${className}`}
+          onPointerDown={(event) => {
+            if (event.button !== 0) {
+              return;
+            }
+
+            event.preventDefault();
+            event.stopPropagation();
+            onResizeStart(edge, event);
+          }}
+        />
+      ))}
+    </>
+  );
+}

package/src/modal/ModalTitlebar.tsx

@@ -0,0 +1,86 @@
+import type { PointerEvent as ReactPointerEvent, ReactNode } from 'react';
+
+import { useWorkbenchHostPlatform } from '../workbench/chrome/WorkbenchPlatformContext';
+import {
+  shouldUseDarwinPlatformChrome,
+  WorkbenchWindowChromeControls,
+} from '../workbench/shell/WorkbenchWindowChromeControls';
+import {
+  resolveWorkbenchWindowChromeDataAttributes,
+  type WorkbenchWindowChromeMode,
+} from '../workbench/chrome/workbenchPlatformChrome';
+
+export interface ModalTitlebarProps {
+  chrome?: WorkbenchWindowChromeMode;
+  closeLabel?: string;
+  labelledBy: string;
+  maximized: boolean;
+  maximizeLabel?: string;
+  onClose: () => void;
+  onDoubleClick: () => void;
+  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onToggleMaximized: () => void;
+  restoreLabel?: string;
+  title: ReactNode;
+  titleSuffix?: ReactNode;
+}
+
+export function ModalTitlebar({
+  chrome = 'platform',
+  closeLabel = 'Close modal',
+  labelledBy,
+  maximized,
+  maximizeLabel = 'Maximize modal',
+  onClose,
+  onDoubleClick,
+  onPointerDown,
+  onToggleMaximized,
+  restoreLabel = 'Restore modal',
+  title,
+  titleSuffix,
+}: ModalTitlebarProps) {
+  const platform = useWorkbenchHostPlatform();
+  const useDarwinChrome = shouldUseDarwinPlatformChrome(chrome, platform);
+  const chromeAttributes = resolveWorkbenchWindowChromeDataAttributes(chrome);
+
+  return (
+    <div className="ui-modal__titlebar" {...(chromeAttributes ?? {})}>
+      {useDarwinChrome ? (
+        <WorkbenchWindowChromeControls
+          chrome={chrome}
+          closeLabel={closeLabel}
+          isMaximized={maximized}
+          maximizeLabel={maximizeLabel}
+          restoreLabel={restoreLabel}
+          showMinimize={false}
+          surface="modal"
+          onClose={onClose}
+          onToggleMaximized={onToggleMaximized}
+        />
+      ) : null}
+      <div
+        className="ui-modal__titlebar-drag"
+        onDoubleClick={onDoubleClick}
+        onPointerDown={onPointerDown}
+      >
+        <span id={labelledBy} className="ui-modal__title">
+          {title}
+          {titleSuffix}
+        </span>
+      </div>
+      {!useDarwinChrome ? (
+        <WorkbenchWindowChromeControls
+          chrome={chrome}
+          closeLabel={closeLabel}
+          isMaximized={maximized}
+          maximizeLabel={maximizeLabel}
+          restoreLabel={restoreLabel}
+          showMinimize={false}
+          surface="modal"
+          onClose={onClose}
+          onToggleMaximized={onToggleMaximized}
+        />
+      ) : null}
+    </div>
+  );
+}