@adecore/ui 0.19.0 → 0.20.0

package/src/workspace/TabStrip.tsx

@@ -0,0 +1,296 @@
+import {
+    createContext,
+    useContext,
+    useCallback,
+    useEffect,
+    useLayoutEffect,
+    useRef,
+    useState,
+    type DragEvent,
+    type MouseEvent,
+    type ReactNode,
+    type UIEvent,
+    type WheelEvent
+} from 'react';
+import { useRender } from '@base-ui-components/react/use-render';
+import { Pin, X } from 'lucide-react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Icon } from '../Icon.tsx';
+import { IconButton, type IconButtonProps } from '../IconButton.tsx';
+import { Tooltip } from '../Tooltip.tsx';
+import { tabGapAt } from './geometry.ts';
+
+export interface TabStripItem {
+    id: string;
+    label: string;
+    hint?: string;
+    icon?: ReactNode;
+    detail?: ReactNode;
+    attention?: ReactNode;
+    unsaved?: boolean | string;
+    pinned?: boolean;
+    closable?: boolean;
+    tabId?: string;
+    panelId?: string;
+}
+
+export interface TabStripProps extends Omit<useRender.ComponentProps<'div'>, 'children' | 'onDragStart' | 'onDragEnd' | 'onDoubleClick' | 'onContextMenu'> {
+    items: readonly TabStripItem[];
+    value: string | null;
+    onValueChange(value: string): void;
+    renderTab?(item: TabStripItem): ReactNode;
+    focused?: boolean;
+    insertAt?: number | null;
+    onClose?(id: string): void;
+    onDoubleClick?(id: string, event: MouseEvent<HTMLButtonElement>): void;
+    onContextMenu?(id: string, event: MouseEvent<HTMLSpanElement>): void;
+    onDragStart?(id: string, event: DragEvent<HTMLButtonElement>): void;
+    onDragEnd?(event: DragEvent<HTMLButtonElement>): void;
+    onTabDragOver?(index: number, event: DragEvent<HTMLDivElement>): void;
+    onTabDrop?(index: number, event: DragEvent<HTMLDivElement>): void;
+}
+
+export function TabStrip({
+    items,
+    value,
+    onValueChange,
+    renderTab,
+    focused = true,
+    insertAt,
+    onClose,
+    onDoubleClick,
+    onContextMenu,
+    onDragStart,
+    onDragEnd,
+    onTabDragOver,
+    onTabDrop,
+    render,
+    className,
+    ref,
+    ...props
+}: TabStripProps) {
+    const { t } = useTranslation('ui');
+    const strip = useRef<HTMLDivElement>(null);
+    const closingFocus = useRef<string | null>(null);
+    useLayoutEffect(() => {
+        if (closingFocus.current && !items.some((item) => item.id === closingFocus.current)) {
+            closingFocus.current = null;
+            const target = strip.current?.querySelector<HTMLElement>('[aria-selected="true"]') ?? strip.current?.querySelector<HTMLElement>('[role="tab"]');
+            target?.focus({ preventScroll: true });
+        }
+    });
+    const close = (id: string, action?: () => void): void => {
+        if (strip.current?.contains(strip.current.ownerDocument.activeElement)) {
+            closingFocus.current = id;
+        }
+        if (action) {
+            action();
+        } else {
+            onClose?.(id);
+        }
+    };
+    const [edges, setEdges] = useState({ start: false, end: false });
+    const [insertion, setInsertion] = useState(0);
+    const measure = useCallback((): void => {
+        const element = strip.current;
+        if (!element) {
+            return;
+        }
+        const start = element.scrollLeft > 0;
+        const end = element.scrollLeft + element.clientWidth < element.scrollWidth - 1;
+        setEdges((current) => (current.start === start && current.end === end ? current : { start, end }));
+        if (insertAt !== undefined && insertAt !== null) {
+            const tabs = Array.from(element.querySelectorAll<HTMLElement>('[data-document-tab]'));
+            const after = tabs[insertAt];
+            const last = tabs.at(-1);
+            setInsertion(after?.offsetLeft ?? (last ? last.offsetLeft + last.offsetWidth : 0));
+        }
+    }, [insertAt]);
+    useLayoutEffect(measure);
+    useEffect(() => {
+        const element = strip.current;
+        if (!element || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        element.querySelectorAll('[data-document-tab]').forEach((tab) => observer.observe(tab));
+        return () => observer.disconnect();
+    });
+    useEffect(() => {
+        strip.current?.querySelector('[aria-selected="true"]')?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+    }, [value]);
+    const gap = (event: DragEvent<HTMLDivElement>): number => {
+        const rects = Array.from(event.currentTarget.querySelectorAll('[data-document-tab]'), (tab) => tab.getBoundingClientRect());
+        return tabGapAt(rects, event.clientX);
+    };
+    const context: TabContextValue = {
+        items,
+        value,
+        onValueChange,
+        onClose,
+        onDoubleClick,
+        onContextMenu,
+        onDragStart,
+        onDragEnd,
+        close,
+        focus: (index) => strip.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]')[index]?.focus()
+    };
+    return useRender({
+        render,
+        ref: [strip, ref ?? null],
+        defaultTagName: 'div',
+        props: {
+            ...props,
+            role: 'tablist',
+            'aria-label': props['aria-label'] ?? t('workspace.tabs'),
+            className: clsx('ade-tab-strip scroll-fade-x', className),
+            'data-focused': focused || undefined,
+            'data-fade-start': edges.start || undefined,
+            'data-fade-end': edges.end || undefined,
+            onScroll: (event: UIEvent<HTMLDivElement>) => {
+                props.onScroll?.(event);
+                measure();
+            },
+            onWheel: (event: WheelEvent<HTMLDivElement>) => {
+                props.onWheel?.(event);
+                if (!event.defaultPrevented && !event.deltaX && event.deltaY) {
+                    event.currentTarget.scrollLeft += event.deltaY;
+                }
+            },
+            onDragOver: (event: DragEvent<HTMLDivElement>) => {
+                props.onDragOver?.(event);
+                if (!event.defaultPrevented) {
+                    onTabDragOver?.(gap(event), event);
+                }
+            },
+            onDrop: (event: DragEvent<HTMLDivElement>) => {
+                props.onDrop?.(event);
+                if (!event.defaultPrevented) {
+                    onTabDrop?.(gap(event), event);
+                }
+            },
+            children: (
+                <>
+                    {items.map((item) => (
+                        <TabContext.Provider key={item.id} value={context}>
+                            {renderTab ? renderTab(item) : <DocumentTab item={item} />}
+                        </TabContext.Provider>
+                    ))}
+                    {insertAt !== undefined && insertAt !== null && <span aria-hidden="true" className="ade-tab-insertion" style={{ left: insertion }} />}
+                </>
+            )
+        }
+    });
+}
+
+interface TabContextValue extends Pick<
+    TabStripProps,
+    'items' | 'value' | 'onValueChange' | 'onClose' | 'onDoubleClick' | 'onContextMenu' | 'onDragStart' | 'onDragEnd'
+> {
+    close(id: string, action?: () => void): void;
+    focus(index: number): void;
+}
+const TabContext = createContext<TabContextValue | null>(null);
+
+export interface DocumentTabProps extends Omit<useRender.ComponentProps<'span'>, 'children' | 'onDoubleClick' | 'onDragStart' | 'onDragEnd'> {
+    item: TabStripItem;
+    onClose?(): void;
+    closeShortcut?: IconButtonProps['kbd'];
+    onDoubleClick?: TabStripProps['onDoubleClick'];
+    onDragStart?: TabStripProps['onDragStart'];
+    onDragEnd?: TabStripProps['onDragEnd'];
+}
+
+/** A tab with application-owned metadata and menus, rendered inside TabStrip's renderTab slot. */
+export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDragStart, onDragEnd, className, render, ref, ...props }: DocumentTabProps) {
+    const context = useContext(TabContext);
+    if (!context) {
+        throw new Error('DocumentTab must be rendered inside TabStrip.');
+    }
+    const { t } = useTranslation('ui');
+    const { items, value, onValueChange } = context;
+    const index = items.findIndex((candidate) => candidate.id === item.id);
+    const close = (): void => context.close(item.id, onClose);
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'span',
+        props: {
+            ...props,
+            className: clsx('ade-document-tab', className),
+            'data-document-tab': item.id,
+            'data-active': item.id === value || undefined,
+            'data-detail': !!item.detail || undefined,
+            onContextMenu: (event: MouseEvent<HTMLSpanElement>) => {
+                props.onContextMenu?.(event);
+                context.onContextMenu?.(item.id, event);
+            },
+            children: (
+                <>
+                    <Tooltip label={item.hint ?? item.label}>
+                        <button
+                            type="button"
+                            role="tab"
+                            id={item.tabId}
+                            aria-controls={item.panelId}
+                            aria-selected={item.id === value}
+                            tabIndex={item.id === value || (value === null && index === 0) ? 0 : -1}
+                            className="ade-document-tab-open"
+                            draggable={!!(onDragStart ?? context.onDragStart)}
+                            onClick={() => onValueChange(item.id)}
+                            onDoubleClick={(event) => (onDoubleClick ?? context.onDoubleClick)?.(item.id, event)}
+                            onDragStart={(event) => {
+                                event.stopPropagation();
+                                (onDragStart ?? context.onDragStart)?.(item.id, event);
+                            }}
+                            onDragEnd={onDragEnd ?? context.onDragEnd}
+                            onKeyDown={(event) => {
+                                const next =
+                                    event.key === 'ArrowRight'
+                                        ? (index + 1) % items.length
+                                        : event.key === 'ArrowLeft'
+                                          ? (index + items.length - 1) % items.length
+                                          : event.key === 'Home'
+                                            ? 0
+                                            : event.key === 'End'
+                                              ? items.length - 1
+                                              : null;
+                                if (next !== null) {
+                                    event.preventDefault();
+                                    onValueChange(items[next]!.id);
+                                    context.focus(next);
+                                } else if (event.key === 'Delete' && item.closable !== false && (onClose || context.onClose)) {
+                                    event.preventDefault();
+                                    close();
+                                }
+                            }}
+                        >
+                            {item.icon}
+                            <span className="truncate">{item.label}</span>
+                            {item.detail}
+                            {item.attention}
+                            {item.unsaved && (
+                                <span className="ade-tab-unsaved">
+                                    <span className="sr-only">{typeof item.unsaved === 'string' ? item.unsaved : t('workspace.unsaved')}</span>
+                                </span>
+                            )}
+                        </button>
+                    </Tooltip>
+                    {item.pinned && <Icon icon={Pin} size={12} className="shrink-0 text-text-muted" />}
+                    {item.closable !== false && (onClose || context.onClose) && (
+                        <IconButton
+                            icon={X}
+                            size="2xs"
+                            label={t('workspace.closeTab', { name: item.label })}
+                            kbd={closeShortcut}
+                            className="ade-document-tab-close"
+                            onClick={close}
+                        />
+                    )}
+                </>
+            )
+        }
+    });
+}

package/src/workspace/Workspace.tsx

@@ -0,0 +1,72 @@
+import type { ReactNode } from 'react';
+import clsx from 'clsx';
+import { useRender } from '@base-ui-components/react/use-render';
+import { WorkspaceContext, type WorkspaceLayout } from './context.ts';
+
+export interface WorkspaceProps extends useRender.ComponentProps<'div'> {
+    layout?: WorkspaceLayout;
+    toolbar?: ReactNode;
+    sidebar?: ReactNode;
+    sidePanel?: ReactNode;
+    /** Auto-sized regions keep their own width, separators and opening animation. */
+    sidebarWidth?: number | 'auto';
+    sidePanelWidth?: number | 'auto';
+    sidebarOpen?: boolean;
+    sidePanelOpen?: boolean;
+}
+
+export function Workspace({
+    layout = 'standard',
+    toolbar,
+    sidebar,
+    sidePanel,
+    sidebarWidth = 248,
+    sidePanelWidth = 320,
+    sidebarOpen,
+    sidePanelOpen,
+    children,
+    className,
+    ref,
+    render,
+    style,
+    ...props
+}: WorkspaceProps) {
+    const hasSidebar = sidebar !== undefined && sidebar !== null && sidebar !== false;
+    const hasPanel = sidePanel !== undefined && sidePanel !== null && sidePanel !== false;
+    const leftOpen = hasSidebar && (sidebarOpen ?? true);
+    const rightOpen = hasPanel && (sidePanelOpen ?? true);
+    const hasToolbar = toolbar !== undefined && toolbar !== null && toolbar !== false;
+    const element = useRender({
+        render,
+        ref,
+        defaultTagName: 'div',
+        props: {
+            ...props,
+            className: clsx('ade-workspace', className),
+            style,
+            'data-layout': layout,
+            'data-toolbar': hasToolbar || undefined,
+            'data-sidebar': leftOpen || undefined,
+            'data-side-panel': rightOpen || undefined,
+            children: (
+                <>
+                    {hasSidebar && (
+                        <aside className="ade-workspace-sidebar" data-auto={sidebarWidth === 'auto' || undefined} style={{ width: sidebarWidth }}>
+                            {sidebar}
+                        </aside>
+                    )}
+                    <div className="ade-workspace-center">
+                        {hasToolbar && <div className="ade-workspace-toolbar">{toolbar}</div>}
+                        <div className="ade-workspace-content">{children}</div>
+                    </div>
+                    {hasPanel && (
+                        <aside className="ade-workspace-side-panel" data-auto={sidePanelWidth === 'auto' || undefined} style={{ width: sidePanelWidth }}>
+                            {sidePanel}
+                        </aside>
+                    )}
+                </>
+            )
+        }
+    });
+    return <WorkspaceContext value={{ layout, edges: { top: !hasToolbar, right: !rightOpen, bottom: true, left: !leftOpen } }}>{element}</WorkspaceContext>;
+}

package/src/workspace/context.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import type { SplitEdges } from './geometry.ts';
+
+export type WorkspaceLayout = 'standard' | 'roomy';
+export const WorkspaceContext = createContext<{ layout: WorkspaceLayout; edges: SplitEdges }>({
+    layout: 'standard',
+    edges: { top: true, right: true, bottom: true, left: true }
+});

package/src/workspace/geometry.ts

@@ -0,0 +1,190 @@
+import { findSplitNode, type SplitAxis, type SplitLayout, type SplitNode, type SplitPane, type SplitSide } from './model.ts';
+
+export interface SplitRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface SplitEdges {
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+}
+export interface SplitMinimum {
+    width: number;
+    height: number;
+}
+export interface SplitPaneRect extends SplitRect {
+    pane: SplitPane;
+}
+export interface SplitDivider extends SplitRect {
+    splitId: string;
+    index: number;
+    axis: SplitAxis;
+    lengths: number[];
+    minimums: number[];
+}
+export interface SplitGeometry {
+    panes: SplitPaneRect[];
+    dividers: SplitDivider[];
+}
+
+function distribute(total: number, weights: number[], minimums: number[]): number[] {
+    const floor = minimums.reduce((sum, size) => sum + size, 0);
+    if (floor >= total) {
+        return minimums.map((size) => (floor ? (size * total) / floor : total / minimums.length));
+    }
+    const result = weights.map(() => 0);
+    const pending = new Set(weights.map((_, i) => i));
+    let remaining = total;
+    while (pending.size) {
+        const sum = [...pending].reduce((value, i) => value + weights[i]!, 0);
+        const small = [...pending].filter((i) => (remaining * weights[i]!) / sum < minimums[i]!);
+        if (!small.length) {
+            pending.forEach((i) => {
+                result[i] = (remaining * weights[i]!) / sum;
+            });
+            break;
+        }
+        small.forEach((i) => {
+            result[i] = minimums[i]!;
+            remaining -= minimums[i]!;
+            pending.delete(i);
+        });
+    }
+    return result;
+}
+
+export function splitGeometry(layout: SplitLayout, width: number, height: number, gap: number, minimum: (pane: SplitPane) => SplitMinimum): SplitGeometry {
+    const result: SplitGeometry = { panes: [], dividers: [] };
+    const minimums = new Map<string, SplitMinimum>();
+    const measure = (node: SplitNode): SplitMinimum => {
+        if (node.type === 'pane') {
+            const value = minimum(node);
+            const safe = {
+                width: Math.max(0, Number.isFinite(value.width) ? value.width : 0),
+                height: Math.max(0, Number.isFinite(value.height) ? value.height : 0)
+            };
+            minimums.set(node.id, safe);
+            return safe;
+        }
+        const children = node.children.map(measure);
+        const horizontal = node.axis === 'horizontal';
+        const value = {
+            width: horizontal
+                ? children.reduce((sum, item) => sum + item.width, 0) + gap * (children.length - 1)
+                : Math.max(...children.map((item) => item.width)),
+            height: horizontal
+                ? Math.max(...children.map((item) => item.height))
+                : children.reduce((sum, item) => sum + item.height, 0) + gap * (children.length - 1)
+        };
+        minimums.set(node.id, value);
+        return value;
+    };
+    const walk = (node: SplitNode, rect: SplitRect): void => {
+        if (node.type === 'pane') {
+            result.panes.push({ ...rect, pane: node });
+            return;
+        }
+        const horizontal = node.axis === 'horizontal';
+        const axisLength = horizontal ? rect.width : rect.height;
+        const spacing = Math.min(gap, axisLength / (node.children.length - 1));
+        const available = Math.max(0, axisLength - spacing * (node.children.length - 1));
+        const limits = node.children.map((child) => minimums.get(child.id)![horizontal ? 'width' : 'height']);
+        const lengths = distribute(available, node.sizes, limits);
+        let offset = 0;
+        node.children.forEach((child, i) => {
+            const end = Math.round(offset + lengths[i]!);
+            const start = Math.round(offset);
+            walk(child, horizontal ? { ...rect, x: rect.x + start, width: end - start } : { ...rect, y: rect.y + start, height: end - start });
+            if (i < node.children.length - 1) {
+                result.dividers.push({
+                    ...rect,
+                    ...(horizontal ? { x: rect.x + end, width: spacing } : { y: rect.y + end, height: spacing }),
+                    splitId: node.id,
+                    index: i,
+                    axis: node.axis,
+                    lengths,
+                    minimums: limits
+                });
+            }
+            offset += lengths[i]! + spacing;
+        });
+    };
+    const root = layout.maximized ? (findSplitNode(layout.root, layout.maximized) ?? layout.root) : layout.root;
+    measure(root);
+    walk(root, { x: 0, y: 0, width: Math.max(0, width), height: Math.max(0, height) });
+    return result;
+}
+
+export function resizeSplit(divider: SplitDivider, delta: number, symmetric = false, snapDistance = 0, minimumShare = 0): number[] {
+    const lengths = [...divider.lengths];
+    const { index } = divider;
+    const total = lengths.reduce((sum, size) => sum + size, 0);
+    if (total <= 0 || lengths.some((size) => size <= 0)) {
+        return lengths.map(() => 1 / lengths.length);
+    }
+    const mirror = lengths.length - divider.index - 2;
+    const affected = new Set([index, index + 1, ...(symmetric ? [mirror, mirror + 1] : [])]);
+    const span = [...affected].reduce((sum, i) => sum + lengths[i]!, 0);
+    const share = Number.isFinite(minimumShare) ? Math.max(0, Math.min(1 / affected.size, minimumShare)) : 0;
+    const min = divider.minimums.map((size, i) => Math.min(lengths[i]!, Math.max(size, affected.has(i) ? span * share : 0)));
+    if (symmetric && mirror !== index) {
+        const changes = lengths.map(() => 0);
+        changes[index]!++;
+        changes[index + 1]!--;
+        changes[mirror]!--;
+        changes[mirror + 1]!++;
+        let lower = -Infinity;
+        let upper = Infinity;
+        changes.forEach((coefficient, i) => {
+            if (coefficient > 0) {
+                lower = Math.max(lower, (min[i]! - lengths[i]!) / coefficient);
+            }
+            if (coefficient < 0) {
+                upper = Math.min(upper, (lengths[i]! - min[i]!) / -coefficient);
+            }
+        });
+        const change = Math.max(lower, Math.min(delta, upper));
+        return lengths.map((size, i) => Math.max(Number.EPSILON, (size + changes[i]! * change) / total));
+    }
+    const change = Math.max(min[index]! - lengths[index]!, Math.min(delta, lengths[index + 1]! - min[index + 1]!));
+    const pair = lengths[index]! + lengths[index + 1]!;
+    const middle = pair / 2;
+    const next = lengths[index]! + change;
+    // A snap must not cross either pane's minimum, including minimums inherited from nested splits.
+    lengths[index] = Math.abs(next - middle) <= snapDistance && middle >= min[index]! && middle >= min[index + 1]! ? middle : next;
+    lengths[index + 1] = pair - lengths[index]!;
+    return lengths.map((size) => Math.max(Number.EPSILON, size / total));
+}
+
+export function paneRadius(rect: SplitRect, width: number, height: number, edges: SplitEdges, radius: number): string {
+    const left = rect.x === 0 && edges.left;
+    const top = rect.y === 0 && edges.top;
+    const right = rect.x + rect.width >= width && edges.right;
+    const bottom = rect.y + rect.height >= height && edges.bottom;
+    return [top || left, top || right, bottom || right, bottom || left].map((flush) => `${flush ? 0 : radius}px`).join(' ');
+}
+
+export function splitSideAt(rect: SplitRect, x: number, y: number): SplitSide | undefined {
+    const horizontal = (x - rect.x) / rect.width;
+    const vertical = (y - rect.y) / rect.height;
+    const nearest = Math.min(horizontal, 1 - horizontal, vertical, 1 - vertical);
+    if (nearest > 0.25) {
+        return undefined;
+    }
+    if (nearest === horizontal) {
+        return 'left';
+    }
+    if (nearest === 1 - horizontal) {
+        return 'right';
+    }
+    return nearest === vertical ? 'top' : 'bottom';
+}
+
+export function tabGapAt(rects: readonly { left: number; right: number }[], x: number): number {
+    const index = rects.findIndex((rect) => x < (rect.left + rect.right) / 2);
+    return index < 0 ? rects.length : index;
+}