@adecore/ui 0.16.0 → 0.17.0-beta.2

package/dist/tree/parts.js

@@ -0,0 +1,113 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 } from '../Checkbox.js';
+import { Icon } from '../Icon.js';
+import { treeRowStyle } from './style.js';
+export function TreeRoot({ render, className, ref, children, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'div',
+        props: {
+            role: 'tree',
+            ...props,
+            className: clsx('adecore-tree', className),
+            children: (_jsxs(_Fragment, { children: [_jsx("style", { children: treeRowStyle('.adecore-tree-row') }), children] }))
+        }
+    });
+}
+export function TreeRow({ level = 1, selected = false, joinedStart = false, joinedEnd = false, interactive = true, render, className, ref, style, children, ...props }) {
+    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: (_jsxs(_Fragment, { children: [Array.from({ length: Math.max(0, level - 1) }, (_, index) => (_jsx("span", { "aria-hidden": true, className: "adecore-tree-guide", style: { insetInlineStart: 11 + index * 16 } }, index))), children] }))
+        }
+    });
+}
+export function TreeChevronSlot({ render, className, ref, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'span',
+        props: { 'aria-hidden': true, ...props, className: clsx('adecore-tree-chevron-slot', className) }
+    });
+}
+export function TreeChevron({ expanded, onExpandedChange, render, className, ref, onClick, onDoubleClick, ...props }) {
+    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) => {
+                event.stopPropagation();
+                onClick?.(event);
+                if (!event.defaultPrevented) {
+                    onExpandedChange?.(!expanded);
+                }
+            },
+            onDoubleClick: (event) => {
+                event.stopPropagation();
+                onDoubleClick?.(event);
+            },
+            children: _jsx(Icon, { icon: ChevronRight, size: 12, className: expanded ? 'rotate-90' : undefined })
+        }
+    });
+}
+export function TreeLabel({ render, className, ref, ...props }) {
+    return useRender({ render, ref, defaultTagName: 'span', props: { ...props, className: clsx('adecore-tree-label', className) } });
+}
+export function TreeDecoration({ render, className, ref, ...props }) {
+    return useRender({ render, ref, defaultTagName: 'span', props: { ...props, className: clsx('adecore-tree-decoration', className) } });
+}
+export function TreeControl({ render, className, ref, onClick, onDoubleClick, onKeyDown, onPointerDown, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'span',
+        props: {
+            ...props,
+            'data-tree-control': true,
+            className: clsx('adecore-tree-control', className),
+            onClick: (event) => {
+                event.stopPropagation();
+                onClick?.(event);
+            },
+            onDoubleClick: (event) => {
+                event.stopPropagation();
+                onDoubleClick?.(event);
+            },
+            onKeyDown: (event) => {
+                event.stopPropagation();
+                onKeyDown?.(event);
+            },
+            onPointerDown: (event) => {
+                event.stopPropagation();
+                onPointerDown?.(event);
+            }
+        }
+    });
+}
+export function TreeCheckbox(props) {
+    return (_jsx(TreeControl, { children: _jsx(UICheckbox, { ...props }) }));
+}

package/dist/tree/style.d.ts

@@ -0,0 +1,2 @@
+export declare const TREE_ROW_HEIGHT = 25;
+export declare function treeRowStyle(selector: string, selected?: string): string;

package/dist/tree/style.js

@@ -0,0 +1,29 @@
+export const TREE_ROW_HEIGHT = 25;
+export function treeRowStyle(selector, selected = 'data-selected') {
+    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; }
+    `;
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@adecore/ui",
-  "version": "0.16.0",
+  "version": "0.17.0-beta.2",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
-  "license": "MIT",
+  "license": "FSL-1.1-MIT",
   "author": "Bas Milius",
   "repository": {
     "type": "git",
@@ -24,7 +24,8 @@
     "src",
     "!src/**/*.test.ts",
     "!src/**/*.test.tsx",
-    "!src/**/__snapshots__"
+    "!src/**/__snapshots__",
+    "!src/file-tree/testing"
   ],
   "exports": {
     ".": {
@@ -87,6 +88,7 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15",
-    "typescript": "^7.0.2"
+    "typescript": "^7.0.2",
+    "@happy-dom/global-registrator": "^20.14.5"
   }
 }

package/src/Select.tsx

@@ -5,6 +5,7 @@ import { ChevronDown } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from './Icon.tsx';
 import { MENU_LABEL, MenuCheck } from './menu/parts.tsx';
+import { renderPositioner } from './popup-layer.ts';
 
 export interface SelectItem<T extends string> {
     value: T;
@@ -113,7 +114,14 @@ export function Select<T extends string>({
                 </BaseSelect.Icon>
             </BaseSelect.Trigger>
             <BaseSelect.Portal>
-                <BaseSelect.Positioner className="popup-positioner" side="bottom" align={align} sideOffset={6} alignItemWithTrigger={false}>
+                <BaseSelect.Positioner
+                    className="popup-positioner"
+                    render={renderPositioner}
+                    side="bottom"
+                    align={align}
+                    sideOffset={6}
+                    alignItemWithTrigger={false}
+                >
                     <BaseSelect.Popup className="menu-popup">
                         <BaseSelect.List className="max-h-80 overflow-auto">
                             {groups

package/src/file-tree/helpers.ts

@@ -0,0 +1,203 @@
+import type { FileTree, FileTreeDirectoryHandle, FileTreeVisibleRow } from '@pierre/trees';
+
+// Expanded folders can reveal more flattened rows; cap custom-key cycles.
+const EXPANSION_PASSES = 32;
+
+export interface SortRow {
+    isDirectory: boolean;
+    segments: readonly string[];
+}
+
+export function directoryHandle(model: FileTree, path: string): FileTreeDirectoryHandle | null {
+    const item = model.getItem(path);
+    return item?.isDirectory() ? (item as FileTreeDirectoryHandle) : null;
+}
+
+export function pathOfRow(row: FileTreeVisibleRow): string {
+    return row.isFlattened ? (row.flattenedSegments?.findLast((segment) => segment.isTerminal)?.path ?? row.path) : row.path;
+}
+
+export function visibleRows(model: FileTree): FileTreeVisibleRow[] {
+    return model.getVisibleRows(0, model.getVisibleCount()).map((row) => ({ ...row, path: pathOfRow(row) }));
+}
+
+export function applyExpansion(model: FileTree, collapsed: ReadonlySet<string>, keyOf?: FoldKeyOf): void {
+    for (let pass = 0; pass < EXPANSION_PASSES; pass++) {
+        const { collapse, expand } = expansionChanges(visibleRows(model), collapsed, keyOf);
+        if (collapse.length === 0 && expand.length === 0) {
+            return;
+        }
+        for (const path of collapse) {
+            directoryHandle(model, path)?.collapse();
+        }
+        for (const path of expand) {
+            directoryHandle(model, path)?.expand();
+        }
+    }
+}
+
+export function resetExpandedPaths(model: FileTree, paths: readonly string[], expanded: ReadonlySet<string>): void {
+    model.resetPaths(paths, { initialExpandedPaths: [...expanded] });
+    // @pierre/trees beta.6 restores expansion with its default sort, so custom sorting needs a second pass.
+    for (const path of expanded) {
+        directoryHandle(model, path)?.expand();
+    }
+}
+
+export function rowPathOf(event: { nativeEvent: Event }): string | null {
+    for (const node of event.nativeEvent.composedPath()) {
+        const path = node instanceof HTMLElement ? node.dataset.itemPath : undefined;
+        if (path) {
+            return path;
+        }
+    }
+    return null;
+}
+
+export function menuTargetsOf(row: string, selected: readonly string[]): string[] {
+    return selected.includes(row) && selected.length > 1 ? [...selected] : [row];
+}
+
+export function extendsSelection(event: { shiftKey: boolean; metaKey: boolean; ctrlKey: boolean }): boolean {
+    return event.shiftKey || event.metaKey || event.ctrlKey;
+}
+
+const FOCUS_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End']);
+
+export function movesFocus(event: { key: string; shiftKey: boolean; metaKey: boolean; ctrlKey: boolean; altKey: boolean }): boolean {
+    return FOCUS_KEYS.has(event.key) && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey;
+}
+
+export function selectOnly(model: FileTree, path: string | null): void {
+    for (const selected of model.getSelectedPaths()) {
+        if (selected !== path) {
+            model.getItem(selected)?.deselect();
+        }
+    }
+    const item = path === null ? null : model.getItem(path);
+    if (item && !item.isSelected()) {
+        item.select();
+    }
+}
+
+export function followFocus(model: FileTree, onMoved?: (path: string) => void): () => void {
+    const from = model.getFocusedPath();
+    const timer = window.setTimeout(() => {
+        const path = model.getFocusedPath();
+        selectOnly(model, path);
+        if (path !== null && path !== from) {
+            onMoved?.(path);
+        }
+    }, 0);
+    return () => window.clearTimeout(timer);
+}
+
+export function focusRow(model: FileTree, path: string): boolean {
+    const selector = `[data-type="item"][data-item-path="${CSS.escape(path)}"]:not([data-item-parked="true"])`;
+    const row = model.getFileTreeContainer()?.shadowRoot?.querySelector<HTMLElement>(selector) ?? null;
+    row?.focus();
+    return row !== null;
+}
+
+export function ancestorDirsOf(treePath: string): string[] {
+    const segments = treePath.split('/').filter((segment) => segment !== '');
+    segments.pop();
+    const dirs: string[] = [];
+    let prefix = '';
+    for (const segment of segments) {
+        prefix = `${prefix}${segment}/`;
+        dirs.push(prefix);
+    }
+    return dirs;
+}
+
+export function withoutClosedBranches(open: ReadonlySet<string>, known: ReadonlySet<string>): Set<string> {
+    return new Set([...open].filter((path) => ancestorDirsOf(path).every((dir) => open.has(dir) || !known.has(dir))));
+}
+
+export function newlyExpanded(before: ReadonlySet<string>, after: ReadonlySet<string>): string[] {
+    return [...after].filter((path) => !before.has(path));
+}
+
+export function mergeExpanded(remembered: ReadonlySet<string>, reported: ReadonlySet<string>, known: ReadonlySet<string>): Set<string> {
+    const merged = new Set(reported);
+    for (const path of remembered) {
+        if (!known.has(path)) {
+            merged.add(path);
+        }
+    }
+    return merged;
+}
+
+export function compareRows(left: SortRow, right: SortRow): number {
+    const shared = Math.min(left.segments.length, right.segments.length);
+    for (let i = 0; i < shared; i++) {
+        const leftSegment = left.segments[i]!;
+        const rightSegment = right.segments[i]!;
+        if (leftSegment === rightSegment) {
+            continue;
+        }
+        const leftIsDirectory = left.isDirectory || i < left.segments.length - 1;
+        const rightIsDirectory = right.isDirectory || i < right.segments.length - 1;
+        if (leftIsDirectory !== rightIsDirectory) {
+            return leftIsDirectory ? -1 : 1;
+        }
+        // Case is not a reason to split two names apart; the raw compare only breaks a tie.
+        return leftSegment.localeCompare(rightSegment, undefined, { numeric: true, sensitivity: 'base' }) || leftSegment.localeCompare(rightSegment);
+    }
+    // One path is the head of the other, so the shorter one is the directory the longer one sits in.
+    return left.segments.length - right.segments.length;
+}
+
+export function dirPathOf(rowPath: string): string {
+    return rowPath.endsWith('/') ? rowPath.slice(0, -1) : rowPath;
+}
+
+export type FoldKeyOf = (rowPath: string) => string | null;
+
+function plainKey(rowPath: string): string | null {
+    return dirPathOf(rowPath);
+}
+
+export function collapsedPathsOf(rows: readonly FileTreeVisibleRow[], keyOf: FoldKeyOf = plainKey): string[] {
+    return rows.flatMap((row) => {
+        const key = row.kind === 'directory' && !row.isExpanded ? keyOf(row.path) : null;
+        return key === null ? [] : [key];
+    });
+}
+
+export function mergeCollapsedPaths(current: string[], rows: readonly FileTreeVisibleRow[], keyOf: FoldKeyOf = plainKey): string[] {
+    const known = new Set(rows.flatMap((row) => (row.kind === 'directory' ? [keyOf(row.path)] : [])));
+    const folded = new Set(collapsedPathsOf(rows, keyOf));
+    const next = current.filter((dir) => !known.has(dir) || folded.has(dir));
+    const existing = new Set(current);
+    for (const dir of folded) {
+        if (!existing.has(dir)) {
+            next.push(dir);
+        }
+    }
+    // Selection also notifies subscribers; unchanged folds must not restart the shared-state cycle.
+    return next.length === current.length && next.every((dir, index) => dir === current[index]) ? current : next;
+}
+
+export function expansionChanges(
+    rows: readonly FileTreeVisibleRow[],
+    collapsed: ReadonlySet<string>,
+    keyOf: FoldKeyOf = plainKey
+): { collapse: string[]; expand: string[] } {
+    const changes: { collapse: string[]; expand: string[] } = { collapse: [], expand: [] };
+    for (const row of rows) {
+        const key = row.kind === 'directory' ? keyOf(row.path) : null;
+        if (key === null) {
+            continue;
+        }
+        const folded = collapsed.has(key);
+        if (folded && row.isExpanded) {
+            changes.collapse.push(row.path);
+        }
+        if (!folded && !row.isExpanded) {
+            changes.expand.push(row.path);
+        }
+    }
+    return changes;
+}

package/src/file-tree/index.parts.ts

@@ -0,0 +1,25 @@
+export { FileTreeRoot as Root } from './parts.tsx';
+export { TreeCheckbox as Checkbox, TreeControl as Control, TreeDecoration as Decoration } from '../tree/parts.tsx';
+export {
+    ancestorDirsOf,
+    applyExpansion,
+    collapsedPathsOf,
+    compareRows,
+    directoryHandle,
+    dirPathOf,
+    expansionChanges,
+    extendsSelection,
+    focusRow,
+    followFocus,
+    menuTargetsOf,
+    mergeCollapsedPaths,
+    mergeExpanded,
+    movesFocus,
+    newlyExpanded,
+    pathOfRow,
+    resetExpandedPaths,
+    rowPathOf,
+    selectOnly,
+    visibleRows,
+    withoutClosedBranches
+} from './helpers.ts';

package/src/file-tree/parts.tsx

@@ -0,0 +1,206 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { useRender } from '@base-ui-components/react/use-render';
+import { FileTree as PierreFileTree, type FileTreeProps as PierreProps } from '@pierre/trees/react';
+import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+import { mergeRefs } from '../merge-refs.ts';
+import { directoryHandle, extendsSelection, followFocus, movesFocus, menuTargetsOf, rowPathOf, visibleRows } from './helpers.ts';
+import { useFileTreeShift } from './use-file-tree-shift.tsx';
+import { useFileTreeSlots } from './use-slots.ts';
+
+export type FileTreeRootProps = useRender.ComponentProps<'div'> & {
+    model: FileTree;
+    label?: string;
+    resetKey?: string;
+    selectionFollowsFocus?: boolean;
+    onActivate?(path: string): void;
+    onFocusMove?(path: string): void;
+    onLoadChildren?(path: string): void;
+    onRowContextMenu?(path: string, targets: readonly string[], event: MouseEvent): void;
+    onRowDragStart?(path: string, targets: readonly string[], event: DragEvent): void;
+    onExpandedPathsChange?(paths: readonly string[]): void;
+    renderControl?(row: FileTreeVisibleRow): ReactNode;
+    renderDecoration?(row: FileTreeVisibleRow): ReactNode;
+    treeProps?: Omit<PierreProps, 'model'>;
+};
+
+function inSlot(event: { nativeEvent: Event }): boolean {
+    return event.nativeEvent.composedPath().some((node) => node instanceof HTMLElement && node.hasAttribute('data-tree-slot'));
+}
+
+export function FileTreeRoot({
+    model,
+    label,
+    resetKey,
+    selectionFollowsFocus = true,
+    onActivate,
+    onFocusMove,
+    onLoadChildren,
+    onExpandedPathsChange,
+    onRowContextMenu,
+    onRowDragStart,
+    renderControl,
+    renderDecoration,
+    treeProps,
+    render,
+    className,
+    ref,
+    children,
+    onClick,
+    onKeyDownCapture,
+    ...props
+}: FileTreeRootProps) {
+    const { t } = useTranslation('ui');
+    const [frame, setFrame] = useState<HTMLDivElement | null>(null);
+    const { attach, bar } = useFileTreeShift(model, resetKey);
+    const frameRef = useCallback(
+        (node: Element | null) => {
+            setFrame(node as HTMLDivElement | null);
+            attach(node as HTMLElement | null);
+            mergeRefs<Element>(ref)(node);
+        },
+        [ref, attach]
+    );
+    const slots = useFileTreeSlots(model, frame, label ?? t('tree.label'));
+    const latestLoads = useRef({ onLoadChildren, onExpandedPathsChange });
+    useLayoutEffect(() => {
+        latestLoads.current = { onLoadChildren, onExpandedPathsChange };
+    }, [onLoadChildren, onExpandedPathsChange]);
+    const cancelFocus = useRef<(() => void) | undefined>(undefined);
+
+    useEffect(() => () => cancelFocus.current?.(), [model]);
+
+    useEffect(() => {
+        let previous = new Set<string>();
+        let disposed = false;
+        let pending = false;
+        const report = (): void => {
+            pending = false;
+            if (disposed) {
+                return;
+            }
+            const rows = visibleRows(model).filter((row) => row.kind === 'directory');
+            const known = new Set(rows.map((row) => row.path));
+            const expanded = new Set([...previous].filter((path) => !known.has(path)));
+            for (const row of rows) {
+                if (row.isExpanded) {
+                    expanded.add(row.path);
+                }
+            }
+            const opened = [...expanded].filter((path) => !previous.has(path));
+            const changed = opened.length > 0 || [...previous].some((path) => !expanded.has(path));
+            previous = expanded;
+            if (changed) {
+                latestLoads.current.onExpandedPathsChange?.([...expanded]);
+            }
+            for (const path of opened) {
+                latestLoads.current.onLoadChildren?.(path);
+            }
+        };
+        const schedule = (): void => {
+            if (!pending) {
+                pending = true;
+                queueMicrotask(report);
+            }
+        };
+        const unsubscribe = model.subscribe(schedule);
+        report();
+        return () => {
+            disposed = true;
+            unsubscribe();
+        };
+    }, [model]);
+
+    useEffect(() => {
+        if (frame === null) {
+            return;
+        }
+        const onClickRow = (event: MouseEvent): void => {
+            if (event.defaultPrevented || inSlot({ nativeEvent: event }) || extendsSelection(event)) {
+                return;
+            }
+            const path = rowPathOf({ nativeEvent: event });
+            if (path !== null && directoryHandle(model, path) === null) {
+                onActivate?.(path);
+            }
+        };
+        const onKey = (event: KeyboardEvent): void => {
+            if (event.defaultPrevented || inSlot({ nativeEvent: event })) {
+                return;
+            }
+            if (movesFocus(event) && selectionFollowsFocus) {
+                cancelFocus.current?.();
+                // beta.6 stops the key in its own handler; selection must follow after that handler moves focus.
+                cancelFocus.current = followFocus(model, onFocusMove);
+            } else if (event.key === 'Enter' && !event.altKey && !event.metaKey && !event.ctrlKey) {
+                const path = model.getFocusedPath();
+                if (path === null) {
+                    return;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                const directory = directoryHandle(model, path);
+                if (directory) {
+                    directory.toggle();
+                } else {
+                    onActivate?.(path);
+                }
+            }
+        };
+        const onContext = (event: MouseEvent): void => {
+            if (inSlot({ nativeEvent: event })) {
+                return;
+            }
+            const path = rowPathOf({ nativeEvent: event });
+            if (path !== null) {
+                onRowContextMenu?.(path, menuTargetsOf(path, model.getSelectedPaths()), event);
+            }
+        };
+        const onDrag = (event: DragEvent): void => {
+            if (inSlot({ nativeEvent: event })) {
+                return;
+            }
+            const path = rowPathOf({ nativeEvent: event });
+            if (path !== null) {
+                onRowDragStart?.(path, menuTargetsOf(path, model.getSelectedPaths()), event);
+            }
+        };
+        frame.addEventListener('click', onClickRow);
+        frame.addEventListener('keydown', onKey, true);
+        frame.addEventListener('contextmenu', onContext);
+        frame.addEventListener('dragstart', onDrag);
+        return () => {
+            frame.removeEventListener('click', onClickRow);
+            frame.removeEventListener('keydown', onKey, true);
+            frame.removeEventListener('contextmenu', onContext);
+            frame.removeEventListener('dragstart', onDrag);
+        };
+    }, [frame, model, selectionFollowsFocus, onActivate, onFocusMove, onRowContextMenu, onRowDragStart]);
+
+    return useRender({
+        render,
+        ref: frameRef,
+        defaultTagName: 'div',
+        props: {
+            ...props,
+            className: clsx('adecore-tree adecore-file-tree', className),
+            onClick,
+            onKeyDownCapture,
+            children: (
+                <>
+                    <PierreFileTree {...treeProps} model={model} className={clsx('adecore-file-tree-host', treeProps?.className)} />
+                    {slots.map(({ row, control, decoration }) => (
+                        <span key={control.slot} style={{ display: 'contents' }}>
+                            {createPortal(renderControl?.(row), control)}
+                            {createPortal(renderDecoration?.(row), decoration)}
+                        </span>
+                    ))}
+                    {children}
+                    {bar}
+                </>
+            )
+        }
+    });
+}

package/src/file-tree/shift.ts

@@ -0,0 +1,48 @@
+export const SHIFT_PROPERTY = '--adecore-tree-shift';
+
+const LINE_WIDTH = 16;
+
+const MIN_THUMB = 24;
+
+export function clampShift(value: number, max: number): number {
+    return Math.min(Math.max(value, 0), Math.max(max, 0));
+}
+
+export function shiftNeed(textRight: number, limit: number, shift: number): number {
+    return Math.max(0, Math.ceil(textRight + shift - limit));
+}
+
+export function maxShift(needs: readonly number[]): number {
+    return needs.reduce((max, need) => Math.max(max, need), 0);
+}
+
+export interface WheelStep {
+    readonly deltaX: number;
+    readonly deltaY: number;
+    readonly deltaMode: number;
+    readonly shiftKey: boolean;
+}
+
+export function sidewaysDelta(step: WheelStep, pageWidth: number): number {
+    const swapped = step.shiftKey && step.deltaX === 0;
+    const sideways = swapped ? step.deltaY : step.deltaX;
+    const across = swapped ? 0 : step.deltaY;
+    if (sideways === 0 || Math.abs(sideways) <= Math.abs(across)) {
+        return 0;
+    }
+    if (step.deltaMode === 1) {
+        return sideways * LINE_WIDTH;
+    }
+    if (step.deltaMode === 2) {
+        return sideways * pageWidth;
+    }
+    return sideways;
+}
+
+export function shiftThumb(shift: number, max: number, track: number, view: number): { left: number; width: number } {
+    if (max <= 0 || track <= 0) {
+        return { left: 0, width: Math.max(track, 0) };
+    }
+    const width = Math.min(track, Math.max(MIN_THUMB, Math.round((track * view) / (view + max))));
+    return { left: Math.round(((track - width) * clampShift(shift, max)) / max), width };
+}