@adecore/ui 0.38.0 → 0.40.0

package/src/file-tree/highlight.ts

@@ -11,12 +11,15 @@ export function matchHighlight(): Highlight | null {
     if (typeof CSS === 'undefined' || !('highlights' in CSS) || typeof Highlight === 'undefined') {
         return null;
     }
+
     if (shared === null) {
         shared = new Highlight();
     }
+
     if (CSS.highlights.get(MATCH_HIGHLIGHT) !== shared) {
         CSS.highlights.set(MATCH_HIGHLIGHT, shared);
     }
+
     return shared;
 }
 
@@ -24,51 +27,66 @@ export function matchHighlight(): Highlight | null {
 export function matchRanges(text: string, query: string): [number, number][] {
     const wanted = query.toLowerCase();
     const haystack = text.toLowerCase();
+
     // A letter that lowercases to more than one would shift every offset after it.
     if (wanted === '' || haystack.length !== text.length) {
         return [];
     }
+
     const found: [number, number][] = [];
     let at = haystack.indexOf(wanted);
+
     while (at !== -1) {
         found.push([at, at + wanted.length]);
         at = haystack.indexOf(wanted, at + wanted.length);
     }
+
     return found;
 }
 
 /* The ranges over the visible text of each row's name where `query` occurs. */
 export function rangesOfMatches(rows: readonly HTMLElement[], query: string): Range[] {
     const ranges: Range[] = [];
+
     if (query === '') {
         return ranges;
     }
+
     for (const row of rows) {
         const content = row.querySelector('[data-item-section="content"]');
+
         if (content === null) {
             continue;
         }
+
         const nodes: Text[] = [];
         const walker = row.ownerDocument.createTreeWalker(content, NodeFilter.SHOW_TEXT);
+
         for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
             if (node.parentElement?.closest(HIDDEN_PARTS) === null) {
                 nodes.push(node as Text);
             }
         }
+
         const starts: number[] = [];
         let text = '';
+
         for (const node of nodes) {
             starts.push(text.length);
             text += node.data;
         }
+
         // The node an offset falls in, and the offset inside it; an end may sit at the end of a node.
         const locate = (offset: number, end: boolean): [Text, number] => {
             let index = nodes.length - 1;
+
             while (index > 0 && (end ? starts[index]! >= offset : starts[index]! > offset)) {
                 index--;
             }
+
             return [nodes[index]!, offset - starts[index]!];
         };
+
         for (const [start, end] of matchRanges(text, query)) {
             const range = row.ownerDocument.createRange();
             range.setStart(...locate(start, false));
@@ -76,5 +94,6 @@ export function rangesOfMatches(rows: readonly HTMLElement[], query: string): Ra
             ranges.push(range);
         }
     }
+
     return ranges;
 }

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

@@ -1,5 +1,6 @@
 export { FileTreeRoot as Root } from './parts.tsx';
 export { TreeCheckbox as Checkbox, TreeControl as Control, TreeDecoration as Decoration } from '../tree/parts.tsx';
+
 export {
     ancestorDirsOf,
     applyExpansion,

package/src/file-tree/parts.tsx

@@ -27,16 +27,20 @@ export type FileTreeRootProps = useRender.ComponentProps<'div'> & {
     onExpandedPathsChange?(paths: readonly string[]): void;
     renderControl?(row: FileTreeVisibleRow): ReactNode;
     renderDecoration?(row: FileTreeVisibleRow): ReactNode;
-    /* `after-status` draws the decoration after the engine's git status column instead of between the name and that column. */
     decorationOrder?: FileTreeDecorationOrder;
-    /* A Lucide icon in place of the row's own glyph (the file icon, or a directory's chevron); undefined keeps that glyph. */
+
+    /* In place of the row's own glyph (the file icon, or a directory's chevron); undefined keeps that glyph. */
     rowIcon?(row: FileTreeVisibleRow): LucideIcon | undefined;
-    /* As tall as its rows, up to the height its container leaves it, instead of filling that container. */
+
+    /* As tall as its rows, up to the height its container leaves it. */
     fitContent?: boolean;
-    /* Marks where this occurs in every name, ignoring case, such as the query a list was filtered by. */
+
+    /* Marks where this occurs in every name, ignoring case. */
     highlight?: string;
-    /* The line under an open directory with nothing in it; undefined draws none, such as while its children still load. */
+
+    /* The line under an open, empty directory; undefined draws none, such as while its children still load. */
     emptyLabel?: FileTreeEmptyLabel;
+
     treeProps?: Omit<PierreProps, 'model'>;
 };
 
@@ -75,20 +79,26 @@ export function FileTreeRoot({
     const { t } = useTranslation('ui');
     const [frame, setFrame] = useState<HTMLDivElement | null>(null);
     const { attach, bar } = useFileTreeShift(model, resetKey);
+
     const frameRef = (node: Element | null) => {
         setFrame(node as HTMLDivElement | null);
         attach(node as HTMLElement | null);
         mergeRefs<Element>(ref)(node);
     };
+
     const subscribeToRows = (listener: () => void): (() => void) => (fitContent ? model.subscribe(listener) : () => {});
+
     const countRows = (): number => model.getVisibleCount();
+
     const rowCount = useSyncExternalStore(subscribeToRows, countRows, countRows);
     const slots = useFileTreeSlots(model, frame, label ?? t('tree.label'), { order: decorationOrder, rowIcon, highlight, emptyLabel });
     const passEmptyLine = useEmptyLines(model, frame, emptyLabel);
     const latestLoads = useRef({ onLoadChildren, onExpandedPathsChange });
+
     useLayoutEffect(() => {
         latestLoads.current = { onLoadChildren, onExpandedPathsChange };
     }, [onLoadChildren, onExpandedPathsChange]);
+
     const cancelFocus = useRef<(() => void) | undefined>(undefined);
 
     useEffect(() => () => cancelFocus.current?.(), [model]);
@@ -97,37 +107,47 @@ export function FileTreeRoot({
         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();
@@ -138,33 +158,43 @@ export function FileTreeRoot({
         if (frame === null) {
             return;
         }
+
         const onClickRow = (event: MouseEvent): void => {
             if (event.defaultPrevented || inSlot(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(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);
             }
+
             passEmptyLine(event);
+
             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 {
@@ -172,23 +202,28 @@ export function FileTreeRoot({
                 }
             }
         };
+
         const withTargets =
             <RowEvent extends Event>(handle?: (path: string, targets: readonly string[], event: RowEvent) => void) =>
             (event: RowEvent): void => {
                 if (inSlot(event)) {
                     return;
                 }
+
                 const path = rowPathOf({ nativeEvent: event });
+
                 if (path !== null) {
                     handle?.(path, menuTargetsOf(path, model.getSelectedPaths()), event);
                 }
             };
+
         const onContext = withTargets(onRowContextMenu);
         const onDrag = withTargets(onRowDragStart);
         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);
@@ -212,6 +247,7 @@ export function FileTreeRoot({
                     <PierreFileTree {...treeProps} model={model} className={clsx('adecore-file-tree-host', treeProps?.className)} />
                     {slots.map(({ row, control, decoration, icon }) => {
                         const ownIcon = icon === null ? undefined : rowIcon?.(row);
+
                         return (
                             <span key={control.slot} style={{ display: 'contents' }}>
                                 {createPortal(renderControl?.(row), control)}

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

@@ -9,11 +9,7 @@ function onEmptyLine(event: Event): boolean {
     return event.composedPath().some((node) => node instanceof HTMLElement && node.dataset.emptyLine === 'true');
 }
 
-/*
- * Keeps a line under every open directory that is known to be empty, and keeps the line out of
- * reach: a pointer on it does nothing and a key passes it. Returns what to call with every key the
- * tree hears, after anything that notes where focus was.
- */
+/* A pointer on a line does nothing and a key passes it. Call what it returns with every key the tree hears, after anything that notes where focus was. */
 export function useEmptyLines(model: FileTree, frame: HTMLElement | null, emptyLabel: FileTreeEmptyLabel | undefined): (event: KeyboardEvent) => void {
     const latest = useRef(emptyLabel);
     const reconcile = useRef<(() => void) | undefined>(undefined);
@@ -30,49 +26,64 @@ export function useEmptyLines(model: FileTree, frame: HTMLElement | null, emptyL
         if (!enabled) {
             return;
         }
+
         const added = new Set<string>();
         let pending = false;
         let disposed = false;
+
         const run = (): void => {
             pending = false;
             const labelOf = latest.current;
+
             if (disposed || labelOf === undefined) {
                 return;
             }
+
             const selectedLines = model.getSelectedPaths().filter(isEmptyLine);
+
             for (const path of selectedLines) {
                 model.getItem(path)?.deselect();
             }
+
             // A selection that followed focus onto the line follows it on to where it went.
             const focused = skipEmptyLine(model, lastKey.current) ? model.getFocusedPath() : null;
+
             if (focused !== null && selectedLines.length > 0) {
                 model.getItem(focused)?.select();
             }
+
             const { add, remove } = emptyLineChanges(visibleRows(model), labelOf, (path) => model.getItem(path) !== null, added);
+
             for (const path of remove) {
                 added.delete(path);
             }
+
             for (const path of add) {
                 added.add(path);
             }
+
             if (add.length > 0 || remove.length > 0) {
                 model.batch([...remove.map((path) => ({ type: 'remove' as const, path })), ...add.map((path) => ({ type: 'add' as const, path }))]);
             }
         };
+
         const schedule = (): void => {
             if (!pending && !disposed) {
                 pending = true;
                 queueMicrotask(run);
             }
         };
+
         reconcile.current = schedule;
         const unsubscribe = model.subscribe(schedule);
         run();
+
         return () => {
             disposed = true;
             reconcile.current = undefined;
             unsubscribe();
             const left = [...added].filter((path) => model.getItem(path) !== null);
+
             if (left.length > 0) {
                 model.batch(left.map((path) => ({ type: 'remove' as const, path })));
             }
@@ -83,15 +94,18 @@ export function useEmptyLines(model: FileTree, frame: HTMLElement | null, emptyL
         if (frame === null) {
             return;
         }
+
         const block = (event: Event): void => {
             if (onEmptyLine(event)) {
                 event.preventDefault();
                 event.stopImmediatePropagation();
             }
         };
+
         for (const type of POINTER_EVENTS) {
             frame.addEventListener(type, block, true);
         }
+
         return () => {
             for (const type of POINTER_EVENTS) {
                 frame.removeEventListener(type, block, true);
@@ -102,12 +116,15 @@ export function useEmptyLines(model: FileTree, frame: HTMLElement | null, emptyL
     return (event: KeyboardEvent): void => {
         lastKey.current = event.key;
         const past = latest.current !== undefined && movesFocus(event) ? pastEmptyLine(model, event.key) : null;
+
         if (past === null) {
             return;
         }
+
         // The engine never sees this key, so focus never lands on the line for a moment.
         event.preventDefault();
         event.stopPropagation();
+
         if (past !== model.getFocusedPath()) {
             model.scrollToPath(past, { focus: true, offset: 'nearest' });
         }

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

@@ -13,28 +13,37 @@ function limitOf(row: HTMLElement, content: Element, gap: number): number {
     const start = content.getBoundingClientRect().left;
     const contentMargin = Number.parseFloat(getComputedStyle(content).marginInlineEnd) || 0;
     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 - contentMargin;
     }
+
     return row.getBoundingClientRect().right - Number.parseFloat(getComputedStyle(row).paddingInlineEnd) - contentMargin;
 }
 
 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);
 }
 
@@ -45,5 +54,6 @@ export function useFileTreeShift(model: FileTree, resetKey?: string): { attach(n
         rows: (root) => [...root.querySelectorAll<HTMLElement>(ROWS)],
         need: needOf
     };
+
     return useTreeShift(source, resetKey);
 }

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

@@ -13,9 +13,11 @@ 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,