@adecore/ui 0.16.0 → 0.17.0-beta.1

package/src/file-tree/use-file-tree.ts

@@ -0,0 +1,31 @@
+import type { FileTreeOptions as PierreOptions } from '@pierre/trees';
+import { useFileTree as usePierreFileTree } from '@pierre/trees/react';
+import { useLayoutEffect, useRef } from 'react';
+import { FILE_TREE_ICONS } from '../file-icon.ts';
+import { TREE_ROW_HEIGHT } from '../tree/style.ts';
+import { compareRows } from './helpers.ts';
+import { FILE_TREE_CSS } from './style.ts';
+
+type WithoutSizing<Options> = Options extends unknown ? Omit<Options, 'itemHeight' | 'density'> : never;
+export type FileTreeOptions = WithoutSizing<PierreOptions>;
+
+// Model options are initial; paths and status can subsequently change through the model's mutation methods.
+export function useFileTree(options: FileTreeOptions) {
+    const latest = useRef(options.onSelectionChange);
+    useLayoutEffect(() => {
+        latest.current = options.onSelectionChange;
+    }, [options.onSelectionChange]);
+    return usePierreFileTree({
+        composition: { contextMenu: { enabled: false } },
+        icons: FILE_TREE_ICONS,
+        initialExpansion: 'closed',
+        search: false,
+        stickyFolders: false,
+        sort: compareRows,
+        ...options,
+        density: 'compact',
+        itemHeight: TREE_ROW_HEIGHT,
+        onSelectionChange: (paths) => latest.current?.(paths),
+        unsafeCSS: `${FILE_TREE_CSS}\n${options.unsafeCSS ?? ''}`
+    });
+}

package/src/file-tree/use-slots.ts

@@ -0,0 +1,191 @@
+import { useEffect, useId, useState } from 'react';
+import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
+import { pathOfRow, visibleRows } from './helpers.ts';
+import { FILE_TREE_CSS } from './style.ts';
+
+export interface RowSlot {
+    row: FileTreeVisibleRow;
+    control: HTMLElement;
+    decoration: HTMLElement;
+}
+
+interface Port {
+    rowElement: HTMLElement;
+    control: HTMLElement;
+    decoration: HTMLElement;
+    lightControl: HTMLElement;
+    lightDecoration: HTMLElement;
+}
+
+// beta.6 owns button rows. Sibling slots keep real controls outside those buttons and in the app's stylesheet.
+export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, label: string) {
+    const prefix = useId().replaceAll(':', '');
+    const [slots, setSlots] = useState<RowSlot[]>([]);
+
+    useEffect(() => {
+        if (frame === null) {
+            return;
+        }
+        const ports = new Map<HTMLElement, Port>();
+        let shadow: ShadowRoot | null = null;
+        let style: HTMLStyleElement | null = null;
+        let serial = 0;
+        let disposed = false;
+        let pending = false;
+        let snapshot: string | null = null;
+
+        const position = (): void => {
+            for (const port of ports.values()) {
+                const row = port.rowElement;
+                const content = row.querySelector<HTMLElement>('[data-item-section="content"]');
+                const icon = row.querySelector<HTMLElement>('[data-item-section="icon"]');
+                const control = port.lightControl;
+                const decoration = port.lightDecoration;
+                const controlSpace = control.childNodes.length > 0 ? Math.ceil(control.getBoundingClientRect().width) + 6 : 0;
+                const decorationSpace = decoration.childNodes.length > 0 ? Math.ceil(decoration.getBoundingClientRect().width) + 6 : 0;
+                row.style.setProperty('--adecore-tree-control-space', `${controlSpace}px`);
+                row.style.setProperty('--adecore-tree-decoration-space', `${decorationSpace}px`);
+                port.control.style.top = `${row.offsetTop}px`;
+                port.control.style.left = `${row.offsetLeft + (icon?.offsetLeft ?? 4) - controlSpace}px`;
+                port.decoration.style.top = `${row.offsetTop}px`;
+                port.decoration.style.left = `${row.offsetLeft + (content === null ? row.offsetWidth - decorationSpace - 2 : content.offsetLeft + content.offsetWidth + 6)}px`;
+            }
+        };
+
+        const resize = new ResizeObserver(position);
+        const scan = (): void => {
+            pending = false;
+            if (disposed) {
+                return;
+            }
+            const current = model.getFileTreeContainer();
+            if (!current?.shadowRoot) {
+                return;
+            }
+            if (shadow !== current.shadowRoot) {
+                shadow = current.shadowRoot;
+                style = document.createElement('style');
+                style.dataset.adecoreTreeStyle = 'true';
+                style.textContent = FILE_TREE_CSS;
+                shadow.append(style);
+                changes.observe(shadow, {
+                    childList: true,
+                    subtree: true,
+                    attributes: true,
+                    attributeFilter: ['data-item-path', 'aria-selected', 'aria-expanded']
+                });
+                changes.observe(current, { childList: true, subtree: true });
+                resize.observe(current);
+            }
+            shadow.querySelector('[role="tree"]')?.setAttribute('aria-label', label);
+            const rows = visibleRows(model);
+            const byPath = new Map(rows.map((row) => [pathOfRow(row), row]));
+            const elements = [
+                ...shadow.querySelectorAll<HTMLElement>('[data-type="item"]:not([data-item-parked="true"]):not([data-file-tree-sticky-row="true"])')
+            ];
+            const live = new Set(elements);
+            for (const [element, port] of ports) {
+                if (!live.has(element)) {
+                    port.control.remove();
+                    port.decoration.remove();
+                    resize.unobserve(port.lightControl);
+                    resize.unobserve(port.lightDecoration);
+                    port.lightControl.remove();
+                    port.lightDecoration.remove();
+                    ports.delete(element);
+                }
+            }
+            const next: RowSlot[] = [];
+            for (const element of elements) {
+                const path = element.dataset.itemPath;
+                const row = path === undefined ? undefined : byPath.get(path);
+                if (row === undefined) {
+                    continue;
+                }
+                element.dataset.interactive = 'true';
+                element.dataset.joinedStart = String(row.isSelected && rows[row.index - 1]?.isSelected === true);
+                element.dataset.joinedEnd = String(row.isSelected && rows[row.index + 1]?.isSelected === true);
+                let port = ports.get(element);
+                if (port === undefined) {
+                    const makePort = (kind: string): { container: HTMLElement; target: HTMLElement } => {
+                        const container = document.createElement('span');
+                        container.dataset.treePort = kind;
+                        const slot = document.createElement('slot');
+                        slot.name = `${prefix}-${kind}-${serial}`;
+                        container.append(slot);
+                        element.parentElement?.append(container);
+                        const target = document.createElement('span');
+                        target.slot = slot.name;
+                        target.dataset.treeSlot = kind;
+                        target.className = kind === 'control' ? 'adecore-tree-control' : 'adecore-tree-decoration';
+                        // React delegates to this portal target before the event reaches the engine's shadow tree.
+                        for (const type of ['click', 'dblclick', 'keydown', 'keyup', 'pointerdown', 'dragstart']) {
+                            target.addEventListener(type, (event) => event.stopPropagation());
+                        }
+                        current.append(target);
+                        resize.observe(target);
+                        return { container, target };
+                    };
+                    serial++;
+                    const control = makePort('control');
+                    const decoration = makePort('decoration');
+                    port = {
+                        rowElement: element,
+                        control: control.container,
+                        decoration: decoration.container,
+                        lightControl: control.target,
+                        lightDecoration: decoration.target
+                    };
+                    ports.set(element, port);
+                }
+                if (port.control.dataset.itemPath !== row.path) {
+                    port.control.dataset.itemPath = row.path;
+                }
+                if (port.decoration.dataset.itemPath !== row.path) {
+                    port.decoration.dataset.itemPath = row.path;
+                }
+                port.lightControl.dataset.itemPath = row.path;
+                port.lightDecoration.dataset.itemPath = row.path;
+                next.push({ row, control: port.lightControl, decoration: port.lightDecoration });
+            }
+            const key = next
+                .map(({ row, control }) => `${control.slot}:${row.path}:${row.isSelected}:${row.isExpanded}:${row.isFocused}:${row.name}`)
+                .join('|');
+            if (snapshot !== key) {
+                snapshot = key;
+                setSlots(next);
+            }
+            position();
+        };
+        const schedule = (): void => {
+            if (!pending && !disposed) {
+                pending = true;
+                queueMicrotask(scan);
+            }
+        };
+        const shifts = new MutationObserver(position);
+        shifts.observe(frame, { attributes: true, attributeFilter: ['style'] });
+        const changes = new MutationObserver(schedule);
+        changes.observe(frame, { childList: true, subtree: true });
+        const unsubscribe = model.subscribe(schedule);
+        schedule();
+        return () => {
+            disposed = true;
+            unsubscribe();
+            changes.disconnect();
+            shifts.disconnect();
+            resize.disconnect();
+            style?.remove();
+            for (const port of ports.values()) {
+                port.rowElement.style.removeProperty('--adecore-tree-control-space');
+                port.rowElement.style.removeProperty('--adecore-tree-decoration-space');
+                port.control.remove();
+                port.decoration.remove();
+                port.lightControl.remove();
+                port.lightDecoration.remove();
+            }
+        };
+    }, [frame, model, label, prefix]);
+
+    return slots;
+}

package/src/index.ts

@@ -4,6 +4,8 @@
  */
 
 export * as ContextMenu from './context-menu/index.parts.ts';
+export * as FileTree from './file-tree/index.parts.ts';
+export * as Tree from './tree/index.parts.ts';
 export * as Dialog from './dialog/index.parts.ts';
 export * as KeyValueList from './key-value-list/index.parts.ts';
 export * as Menu from './menu/index.parts.ts';
@@ -105,3 +107,18 @@ export { useContentSize, type ContentSize } from './useContentSize.ts';
 export { useMeasuredWidth } from './useMeasuredWidth.ts';
 export { useNow, useTickingText } from './useNow.ts';
 export { ZOOM_PRESETS } from './zoom.ts';
+
+export { useFileTree, type FileTreeOptions } from './file-tree/use-file-tree.ts';
+export type { FileTreeRootProps } from './file-tree/parts.tsx';
+export type { FileTree as FileTreeModel, FileTreeVisibleRow, FileTreeDragAndDropConfig, FileTreeDropContext, FileTreeDropResult } from '@pierre/trees';
+export type { FoldKeyOf, SortRow } from './file-tree/helpers.ts';
+export type {
+    TreeRootProps,
+    TreeRowProps,
+    TreeChevronProps,
+    TreeChevronSlotProps,
+    TreeLabelProps,
+    TreeDecorationProps,
+    TreeControlProps,
+    TreeCheckboxProps
+} from './tree/parts.tsx';

package/src/locales/en.json

@@ -59,5 +59,10 @@
     "tabs": {
         "more": "More",
         "close": "Close tab"
+    },
+    "tree": {
+        "label": "Files",
+        "expand": "Expand",
+        "collapse": "Collapse"
     }
 }

package/src/locales/nl.json

@@ -59,5 +59,10 @@
     "tabs": {
         "more": "Meer",
         "close": "Tabblad sluiten"
+    },
+    "tree": {
+        "label": "Bestanden",
+        "expand": "Uitvouwen",
+        "collapse": "Invouwen"
     }
 }

package/src/theme.css

@@ -563,3 +563,106 @@
     .sliding-column[data-resizing],
     .sliding-column[data-instant] { transition: none; }
 }
+
+@layer components {
+    .adecore-tree {
+        --tree-row-height: 25px;
+        --tree-row-gap: 6px;
+        --tree-row-radius: 6px;
+        --trees-bg-override: transparent;
+        --trees-padding-inline-override: 8px;
+        --trees-bg-muted-override: var(--surface-hover);
+        --trees-fg-override: var(--text);
+        --trees-fg-muted-override: var(--text-muted);
+        --trees-selected-bg-override: var(--surface-active);
+        --trees-selected-fg-override: var(--text);
+        --trees-border-color-override: var(--border);
+        --trees-accent-override: var(--accent);
+        --trees-focus-ring-color-override: var(--accent);
+        --trees-selected-focused-border-color-override: var(--accent);
+        --trees-status-ignored-override: var(--text-faint);
+        --trees-git-ignored-color-override: var(--text-faint);
+        --trees-git-modified-color-override: var(--status-needs-you);
+        --trees-git-added-color-override: var(--status-idle);
+        --trees-git-untracked-color-override: var(--status-idle);
+        --trees-git-deleted-color-override: var(--status-error);
+        --trees-git-renamed-color-override: var(--status-running);
+        --trees-font-family-override: var(--font-sans);
+        --trees-font-size-override: var(--text-xs);
+    }
+    .adecore-tree-row {
+        margin-inline: 8px;
+        padding-inline-end: 8px;
+    }
+    .adecore-tree-guide {
+        pointer-events: none;
+        position: absolute;
+        inset-block: 0;
+        width: 1px;
+        background: var(--border);
+    }
+    .adecore-tree-chevron-slot {
+        display: grid;
+        place-items: center;
+        flex: none;
+        width: 16px;
+        height: 16px;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: var(--text-muted);
+    }
+    .adecore-tree-label {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .adecore-tree-control,
+    .adecore-tree-decoration {
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        gap: 6px;
+    }
+    .adecore-tree-decoration {
+        font-variant-numeric: tabular-nums;
+    }
+    .adecore-file-tree {
+        position: relative;
+        min-height: 0;
+        overflow: hidden;
+    }
+    .adecore-file-tree-host {
+        display: block;
+        height: 100%;
+    }
+    .adecore-tree-shift {
+        pointer-events: none;
+        position: sticky;
+        bottom: 0;
+        height: 0;
+    }
+    .adecore-tree-shift-track {
+        position: absolute;
+        inset-inline: 8px;
+        bottom: 2px;
+        height: 6px;
+        opacity: 0;
+        transition: opacity 150ms ease-out;
+    }
+    .adecore-tree-shift-track[data-visible] {
+        opacity: 1;
+    }
+    .adecore-tree-shift-thumb {
+        position: absolute;
+        inset-block: 0;
+        border-radius: 999px;
+        background: var(--text-faint);
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .adecore-tree-shift-track {
+            transition: none;
+        }
+    }
+}

package/src/tree/index.parts.ts

@@ -0,0 +1,10 @@
+export {
+    TreeRoot as Root,
+    TreeRow as Row,
+    TreeChevron as Chevron,
+    TreeChevronSlot as ChevronSlot,
+    TreeLabel as Label,
+    TreeDecoration as Decoration,
+    TreeControl as Control,
+    TreeCheckbox as Checkbox
+} from './parts.tsx';

package/src/tree/parts.tsx

@@ -0,0 +1,170 @@
+import type { MouseEvent, KeyboardEvent, PointerEvent } from 'react';
+import clsx from 'clsx';
+import { useRender } from '@base-ui-components/react/use-render';
+import { ChevronRight } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Checkbox as UICheckbox, type CheckboxProps } from '../Checkbox.tsx';
+import { Icon } from '../Icon.tsx';
+import { treeRowStyle } from './style.ts';
+
+export type TreeRootProps = useRender.ComponentProps<'div'>;
+
+export function TreeRoot({ render, className, ref, children, ...props }: TreeRootProps) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'div',
+        props: {
+            role: 'tree',
+            ...props,
+            className: clsx('adecore-tree', className),
+            children: (
+                <>
+                    <style>{treeRowStyle('.adecore-tree-row')}</style>
+                    {children}
+                </>
+            )
+        }
+    });
+}
+
+export type TreeRowProps = useRender.ComponentProps<'div'> & {
+    level?: number;
+    selected?: boolean;
+    joinedStart?: boolean;
+    joinedEnd?: boolean;
+    interactive?: boolean;
+};
+
+export function TreeRow({
+    level = 1,
+    selected = false,
+    joinedStart = false,
+    joinedEnd = false,
+    interactive = true,
+    render,
+    className,
+    ref,
+    style,
+    children,
+    ...props
+}: TreeRowProps) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'div',
+        props: {
+            role: 'treeitem',
+            'aria-level': level,
+            'aria-selected': selected,
+            ...props,
+            'data-selected': selected,
+            'data-joined-start': joinedStart,
+            'data-joined-end': joinedEnd,
+            'data-interactive': interactive,
+            className: clsx('adecore-tree-row', className),
+            style: { paddingInlineStart: 4 + (Math.max(1, level) - 1) * 16, ...style },
+            children: (
+                <>
+                    {Array.from({ length: Math.max(0, level - 1) }, (_, index) => (
+                        <span key={index} aria-hidden className="adecore-tree-guide" style={{ insetInlineStart: 11 + index * 16 }} />
+                    ))}
+                    {children}
+                </>
+            )
+        }
+    });
+}
+
+export type TreeChevronSlotProps = useRender.ComponentProps<'span'>;
+
+export function TreeChevronSlot({ render, className, ref, ...props }: TreeChevronSlotProps) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'span',
+        props: { 'aria-hidden': true, ...props, className: clsx('adecore-tree-chevron-slot', className) }
+    });
+}
+
+export type TreeChevronProps = useRender.ComponentProps<'button'> & {
+    expanded: boolean;
+    onExpandedChange?(expanded: boolean): void;
+};
+
+export function TreeChevron({ expanded, onExpandedChange, render, className, ref, onClick, onDoubleClick, ...props }: TreeChevronProps) {
+    const { t } = useTranslation('ui');
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'button',
+        props: {
+            type: 'button',
+            tabIndex: -1,
+            'aria-label': t(expanded ? 'tree.collapse' : 'tree.expand'),
+            ...props,
+            className: clsx('adecore-tree-chevron-slot', className),
+            onClick: (event: MouseEvent<HTMLButtonElement>) => {
+                event.stopPropagation();
+                onClick?.(event);
+                if (!event.defaultPrevented) {
+                    onExpandedChange?.(!expanded);
+                }
+            },
+            onDoubleClick: (event: MouseEvent<HTMLButtonElement>) => {
+                event.stopPropagation();
+                onDoubleClick?.(event);
+            },
+            children: <Icon icon={ChevronRight} size={12} className={expanded ? 'rotate-90' : undefined} />
+        }
+    });
+}
+
+export type TreeLabelProps = useRender.ComponentProps<'span'>;
+export function TreeLabel({ render, className, ref, ...props }: TreeLabelProps) {
+    return useRender({ render, ref, defaultTagName: 'span', props: { ...props, className: clsx('adecore-tree-label', className) } });
+}
+
+export type TreeDecorationProps = useRender.ComponentProps<'span'>;
+export function TreeDecoration({ render, className, ref, ...props }: TreeDecorationProps) {
+    return useRender({ render, ref, defaultTagName: 'span', props: { ...props, className: clsx('adecore-tree-decoration', className) } });
+}
+
+export type TreeControlProps = useRender.ComponentProps<'span'>;
+export function TreeControl({ render, className, ref, onClick, onDoubleClick, onKeyDown, onPointerDown, ...props }: TreeControlProps) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'span',
+        props: {
+            ...props,
+            'data-tree-control': true,
+            className: clsx('adecore-tree-control', className),
+            onClick: (event: MouseEvent<HTMLSpanElement>) => {
+                event.stopPropagation();
+                onClick?.(event);
+            },
+            onDoubleClick: (event: MouseEvent<HTMLSpanElement>) => {
+                event.stopPropagation();
+                onDoubleClick?.(event);
+            },
+            onKeyDown: (event: KeyboardEvent<HTMLSpanElement>) => {
+                event.stopPropagation();
+                onKeyDown?.(event);
+            },
+            onPointerDown: (event: PointerEvent<HTMLSpanElement>) => {
+                event.stopPropagation();
+                onPointerDown?.(event);
+            }
+        }
+    });
+}
+
+export type TreeCheckboxProps = CheckboxProps;
+export function TreeCheckbox(props: TreeCheckboxProps) {
+    return (
+        <TreeControl>
+            <UICheckbox {...props} />
+        </TreeControl>
+    );
+}

package/src/tree/style.ts

@@ -0,0 +1,30 @@
+export const TREE_ROW_HEIGHT = 25;
+
+export function treeRowStyle(selector: string, selected = 'data-selected'): string {
+    return `
+        ${selector} {
+            box-sizing: border-box;
+            display: flex;
+            position: relative;
+            align-items: center;
+            height: var(--tree-row-height, 25px);
+            min-width: 0;
+            gap: var(--tree-row-gap, 6px);
+            border: 0;
+            border-radius: var(--tree-row-radius, 6px);
+            background: transparent;
+            background-clip: padding-box;
+            color: var(--text);
+            font-family: var(--font-sans);
+            font-size: var(--text-xs);
+            line-height: var(--tree-row-height, 25px);
+            text-align: start;
+            outline: none;
+        }
+        ${selector}[data-interactive="true"]:hover { background: var(--surface-hover); }
+        ${selector}[${selected}="true"] { background: var(--surface-active); color: var(--text); }
+        ${selector}[data-joined-start="true"] { border-start-start-radius: 0; border-start-end-radius: 0; }
+        ${selector}[data-joined-end="true"] { border-end-start-radius: 0; border-end-end-radius: 0; }
+        ${selector}:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+    `;
+}