@adecore/ui 0.16.0 → 0.17.0-beta.1

package/src/file-tree/helpers.ts

@@ -0,0 +1,204 @@
+// SPDX-License-Identifier: FSL-1.1-MIT
+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,49 @@
+// SPDX-License-Identifier: FSL-1.1-MIT
+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 };
+}

package/src/file-tree/style.ts

@@ -0,0 +1,26 @@
+// SPDX-License-Identifier: FSL-1.1-MIT
+import { treeRowStyle } from '../tree/style.ts';
+
+// beta.6 splits the extension into nested grids; flatten them to truncate the end of the entire name.
+export const FILE_TREE_CSS = `
+    ${treeRowStyle('[data-type="item"]', 'data-item-selected')}
+    [data-type="item"] { overflow: clip; padding-inline: 4px 8px; --trees-item-row-gap: var(--tree-row-gap, 6px); }
+    [data-type="item"]::after {
+        content: "";
+        flex: none;
+        order: -100;
+        margin-inline: calc(var(--adecore-tree-shift, 0px) * -1) calc(var(--trees-item-row-gap) * -1);
+    }
+    [data-icon-name="file-tree-icon-chevron"] { width: 12px; height: 12px; }
+    [data-item-section="spacing"] { padding: 0; margin-inline-end: -6px; }
+    [data-item-section="spacing-item"] { position: relative; flex: none; width: 16px; margin: 0; border: 0; background: transparent; opacity: 1; transform: none; transition: none; }
+    [data-item-section="spacing-item"] + [data-item-section="spacing-item"] { margin: 0; }
+    [data-item-section="spacing-item"]::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 7px; width: 1px; background: var(--border); }
+    [data-item-section="icon"] { width: 16px; margin-inline-start: var(--adecore-tree-control-space, 0px); }
+    [data-item-section="content"] { white-space: nowrap; max-width: none; flex: 1 1 auto; margin-inline-end: var(--adecore-tree-decoration-space, 0px); }
+    [data-item-section="content"] :where([data-truncate-group-container], [data-truncate-group-container] div, [data-truncate-container], [data-truncate-container] div) { display: inline; }
+    [data-item-section="content"] [data-truncate-content] { direction: ltr; }
+    [data-item-section="content"] :where([data-truncate-content="overflow"], [data-truncate-marker-cell], [data-truncate-fill]) { display: none; }
+    [data-tree-port] { position: absolute; z-index: 4; display: flex; align-items: center; height: 25px; pointer-events: none; }
+    [data-tree-port] > slot { pointer-events: auto; }
+`;

package/src/file-tree/use-file-tree-shift.tsx

@@ -0,0 +1,170 @@
+// SPDX-License-Identifier: FSL-1.1-MIT
+import { useEffect, useState, type ReactElement } from 'react';
+import type { FileTree } from '@pierre/trees';
+import { clampShift, maxShift, SHIFT_PROPERTY, shiftNeed, shiftThumb, sidewaysDelta } from './shift.ts';
+
+const ROWS = '[data-type="item"]:not([data-item-parked="true"])';
+
+const HIDE_AFTER = 900;
+
+const NEAR_BOTTOM = 16;
+
+function boxesOf(element: Element): Element[] {
+    return element.getClientRects().length > 0 ? [element] : [...element.children].flatMap((child) => boxesOf(child));
+}
+
+function limitOf(row: HTMLElement, content: Element, gap: number): number {
+    const start = content.getBoundingClientRect().left;
+    let limit = Number.POSITIVE_INFINITY;
+    for (const part of [...row.children].filter((child) => child !== content).flatMap((child) => boxesOf(child))) {
+        const rect = part.getBoundingClientRect();
+        if (rect.width === 0 || rect.left < start) {
+            continue;
+        }
+        if (part.childNodes.length === 0 && Number.parseFloat(getComputedStyle(part).flexGrow) > 0) {
+            continue;
+        }
+        limit = Math.min(limit, rect.left - gap);
+    }
+    if (limit !== Number.POSITIVE_INFINITY) {
+        return limit - (Number.parseFloat(getComputedStyle(content).marginInlineEnd) || 0);
+    }
+    return (
+        row.getBoundingClientRect().right -
+        Number.parseFloat(getComputedStyle(row).paddingInlineEnd) -
+        (Number.parseFloat(getComputedStyle(content).marginInlineEnd) || 0)
+    );
+}
+
+function needOf(row: HTMLElement, shift: number, gap: number, range: Range): number | null {
+    const content = row.querySelector(':scope > [data-item-section="content"]');
+    if (content === null || row.getBoundingClientRect().width === 0) {
+        return null;
+    }
+    range.selectNodeContents(content);
+    return shiftNeed(range.getBoundingClientRect().right, limitOf(row, content, gap), shift);
+}
+
+export function useFileTreeShift(model: FileTree, resetKey?: string): { attach(node: HTMLElement | null): void; bar: ReactElement } {
+    const [frame, setFrame] = useState<HTMLElement | null>(null);
+    const [track, setTrack] = useState<HTMLDivElement | null>(null);
+    const [thumb, setThumb] = useState<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        if (frame === null || track === null || thumb === null) {
+            return;
+        }
+        const range = document.createRange();
+        let root: ShadowRoot | null = null;
+        let exact = 0;
+        let drawn = 0;
+        let max = 0;
+        let pending = 0;
+        let hideTimer = 0;
+        let scrolling = false;
+        let near = false;
+
+        const draw = (): void => {
+            const shift = Math.round(exact);
+            if (shift !== drawn) {
+                drawn = shift;
+                frame.style.setProperty(SHIFT_PROPERTY, `${shift}px`);
+            }
+            const { left, width } = shiftThumb(shift, max, track.clientWidth, frame.clientWidth);
+            thumb.style.left = `${left}px`;
+            thumb.style.width = `${width}px`;
+            track.toggleAttribute('data-visible', max > 0 && (scrolling || near));
+        };
+
+        const measure = (): void => {
+            pending = 0;
+            if (root === null) {
+                root = model.getFileTreeContainer()?.shadowRoot ?? null;
+                if (root === null) {
+                    return;
+                }
+                rows.observe(root, { childList: true, subtree: true, characterData: true });
+            }
+            const drawnRows = [...root.querySelectorAll<HTMLElement>(ROWS)];
+            const gap = drawnRows.length === 0 ? 0 : Number.parseFloat(getComputedStyle(drawnRows[0]!).columnGap) || 0;
+            max = maxShift(drawnRows.map((row) => needOf(row, drawn, gap, range)).filter((need) => need !== null));
+            exact = clampShift(exact, max);
+            draw();
+        };
+
+        const schedule = (): void => {
+            if (pending === 0) {
+                pending = requestAnimationFrame(measure);
+            }
+        };
+
+        const rows = new MutationObserver(schedule);
+        const mounts = new MutationObserver(schedule);
+        mounts.observe(frame, { childList: true, subtree: true });
+        const sizes = new ResizeObserver(schedule);
+        sizes.observe(frame);
+
+        const onWheel = (event: WheelEvent): void => {
+            const delta = sidewaysDelta(event, frame.clientWidth);
+            if (delta === 0 || max === 0) {
+                return;
+            }
+            scrolling = true;
+            window.clearTimeout(hideTimer);
+            hideTimer = window.setTimeout(() => {
+                scrolling = false;
+                draw();
+            }, HIDE_AFTER);
+            const next = clampShift(exact + delta, max);
+            if (next !== exact) {
+                event.preventDefault();
+                exact = next;
+            }
+            draw();
+        };
+
+        const onPointerMove = (event: PointerEvent): void => {
+            const bottom = track.getBoundingClientRect().bottom;
+            const isNear = event.clientY >= bottom - NEAR_BOTTOM;
+            if (isNear !== near) {
+                near = isNear;
+                draw();
+            }
+        };
+
+        const onPointerLeave = (): void => {
+            if (near) {
+                near = false;
+                draw();
+            }
+        };
+
+        frame.addEventListener('wheel', onWheel, { passive: false });
+        frame.addEventListener('pointermove', onPointerMove);
+        frame.addEventListener('pointerleave', onPointerLeave);
+        schedule();
+
+        return () => {
+            frame.removeEventListener('wheel', onWheel);
+            frame.removeEventListener('pointermove', onPointerMove);
+            frame.removeEventListener('pointerleave', onPointerLeave);
+            rows.disconnect();
+            mounts.disconnect();
+            sizes.disconnect();
+            cancelAnimationFrame(pending);
+            window.clearTimeout(hideTimer);
+            frame.style.removeProperty(SHIFT_PROPERTY);
+            track.removeAttribute('data-visible');
+        };
+    }, [frame, track, thumb, model, resetKey]);
+
+    const bar = (
+        <div aria-hidden className="adecore-tree-shift">
+            <div ref={setTrack} className="adecore-tree-shift-track">
+                <div ref={setThumb} className="adecore-tree-shift-thumb" />
+            </div>
+        </div>
+    );
+
+    return { attach: setFrame, bar };
+}