@adecore/ui 0.39.0 → 0.40.0

package/src/command-palette/virtual.tsx

@@ -31,22 +31,28 @@ function virtualRowsOf<ItemValue, Group extends { items: readonly ItemValue[] }>
     const rows: VirtualPaletteRow<ItemValue>[] = [];
     const itemRows: number[] = [];
     let count = 0;
+
     for (const value of values) {
         const grouped = value !== null && typeof value === 'object' && 'items' in value && Array.isArray(value.items);
         const group = grouped ? (value as Group) : null;
+
         if (group !== null && group.items.length === 0) {
             continue;
         }
+
         const groupIndex = groups.length;
         groups.push(group);
+
         if (group !== null && labelled) {
             rows.push({ group: groupIndex, index: -1 });
         }
+
         for (const item of group === null ? [value as ItemValue] : group.items) {
             itemRows.push(rows.length);
             rows.push({ group: groupIndex, index: count++, item });
         }
     }
+
     return { groups, rows, itemRows, count };
 }
 
@@ -64,6 +70,7 @@ export function CommandPaletteVirtualList<ItemValue, Group extends { items: read
     const scrollRef = useRef<HTMLDivElement | null>(null);
     const labelled = groupLabel !== undefined;
     const { groups, rows, itemRows, count } = useMemo(() => virtualRowsOf<ItemValue, Group>(filtered, labelled), [filtered, labelled]);
+
     // oxlint-disable-next-line react/incompatible-library
     const virtualizer = useVirtualizer({
         count: rows.length,
@@ -74,38 +81,48 @@ export function CommandPaletteVirtualList<ItemValue, Group extends { items: read
         scrollPaddingStart: 6,
         scrollPaddingEnd: 6
     });
+
     useLayoutEffect(() => {
         if (scroll === null) {
             return;
         }
+
         const highlight = (index: number, reason: string): void => {
             const row = itemRows[index];
+
             if (row !== undefined && reason !== 'pointer') {
                 virtualizer.scrollToIndex(row, { align: reason === 'none' ? 'start' : 'auto' });
             }
         };
+
         scroll.current = highlight;
+
         return () => {
             if (scroll.current === highlight) {
                 scroll.current = null;
             }
         };
     }, [scroll, virtualizer, itemRows]);
+
     const visible = virtualizer.getVirtualItems();
     const visibleGroups = new Map<number, typeof visible>();
+
     for (const item of visible) {
         const group = rows[item.index]!.group;
         const current = visibleGroups.get(group);
+
         if (current === undefined) {
             visibleGroups.set(group, [item]);
         } else {
             current.push(item);
         }
     }
+
     const renderRows = (items: typeof visible): ReactNode =>
         items.map((item) => {
             const row = rows[item.index]!;
             const group = groups[row.group];
+
             return (
                 <div
                     key={item.key}
@@ -123,15 +140,19 @@ export function CommandPaletteVirtualList<ItemValue, Group extends { items: read
                 </div>
             );
         });
+
     return (
         <CommandPaletteList {...props} ref={mergeRefs(ref, scrollRef)}>
             <div role="presentation" className="relative" style={{ height: virtualizer.getTotalSize() }}>
                 {[...visibleGroups].map(([index, items]) => {
                     const group = groups[index];
+
                     if (group === null || group === undefined) {
                         return <Fragment key={index}>{renderRows(items)}</Fragment>;
                     }
+
                     const labelVisible = items.some((item) => rows[item.index]!.index === -1);
+
                     return (
                         <Autocomplete.Group key={index} items={group.items}>
                             {!labelVisible && groupLabel !== undefined && (

package/src/dialog/parts.tsx

@@ -5,10 +5,9 @@ import { useRender } from '@base-ui/react/use-render';
 import { withClass } from '../class-name.ts';
 import { useDialogLayer } from '../dialog-layer.ts';
 
-/* Whether the dialog is open, for its popup to decide whether it stacks over another one. */
 const DialogOpenContext = createContext(false);
 
-/* A question or a form of a few fields. Every one is as wide as the others, whatever it asks. */
+/* Every question is as wide as the others, whatever it asks. */
 const SIZE = {
     sm: 'w-[420px] p-5'
 } as const;
@@ -16,6 +15,7 @@ const SIZE = {
 export function DialogRoot({ open, defaultOpen, onOpenChange, ...props }: ComponentProps<typeof BaseDialog.Root>) {
     // Followed rather than taken over, so a dialog that keeps its own state still does.
     const [seen, setSeen] = useState(defaultOpen ?? false);
+
     return (
         <DialogOpenContext value={open ?? seen}>
             <BaseDialog.Root
@@ -23,6 +23,7 @@ export function DialogRoot({ open, defaultOpen, onOpenChange, ...props }: Compon
                 defaultOpen={defaultOpen}
                 onOpenChange={(next, details) => {
                     onOpenChange?.(next, details);
+
                     if (!details.isCanceled) {
                         setSeen(next);
                     }
@@ -40,23 +41,19 @@ export const DialogClose = BaseDialog.Close;
 export type DialogPopupProps = ComponentProps<typeof BaseDialog.Popup> & {
     /* `sm` is the dialog of a question or a few fields. Without a size the popup is as wide as its `className` says. */
     size?: keyof typeof SIZE;
+
     /* Always over another dialog. A dialog that opens while another one is up stacks by itself. */
     nested?: boolean;
-    /* The dim behind the dialog. Off for a dialog that leaves what is under it as it is. */
+
     backdrop?: boolean;
-    /* Extra on the backdrop, such as the heavier dim a picture needs. */
     backdropClassName?: string;
-    /* Keeps the popup in the document while it is closed. */
     keepMounted?: boolean;
 };
 
-/*
- * The portal, the backdrop and the popup of a dialog in one part. A dialog that opens while another
- * one is up, such as one from the menu bar over a settings dialog, takes the nested steps and a
- * backdrop of its own, or the one underneath stays on top and keeps taking clicks.
- */
+/* The portal, the backdrop and the popup of a dialog in one part; `useDialogLayer` says whether it stacks. */
 export function DialogPopup({ size, nested = false, backdrop = true, backdropClassName, keepMounted, className, ...props }: DialogPopupProps) {
     const stacked = useDialogLayer(useContext(DialogOpenContext)) || nested;
+
     return (
         <BaseDialog.Portal keepMounted={keepMounted}>
             {backdrop && (
@@ -85,7 +82,7 @@ export type DialogDescriptionProps = ComponentProps<typeof BaseDialog.Descriptio
     size?: keyof typeof DESCRIPTION;
 };
 
-/* The sentence under the title, which is also what a screen reader reads as the dialog's description. It carries no margin. */
+/* What a screen reader reads as the dialog's description. It carries no margin. */
 export function DialogDescription({ size = 'sm', className, ...props }: DialogDescriptionProps) {
     return <BaseDialog.Description className={withClass(DESCRIPTION[size], className)} {...props} />;
 }
@@ -94,14 +91,14 @@ export type DialogTextProps = useRender.ComponentProps<'p'> & {
     size?: keyof typeof DESCRIPTION;
 };
 
-/* A further line in the style of the description that is not the dialog's description: a warning, a note under a choice. */
+/* Styled as the description without being the dialog's description. */
 export function DialogText({ size = 'sm', render, className, ref, ...props }: DialogTextProps) {
     return useRender({ render, ref, defaultTagName: 'p', props: { ...props, className: clsx(DESCRIPTION[size], className) } });
 }
 
 export type DialogFooterProps = useRender.ComponentProps<'div'>;
 
-/* The buttons at the foot of a dialog, the main action last and so on the right. */
+/* The main action goes last, and so on the right. */
 export function DialogFooter({ render, className, ref, ...props }: DialogFooterProps) {
     return useRender({
         render,

package/src/dialog-layer.ts

@@ -4,14 +4,14 @@ import { useLayoutEffect, useRef, useState } from 'react';
 const open = new Set<symbol>();
 
 /*
- * Whether a dialog opened while another app-level dialog was already up, such as one opened from the
- * menu bar over a settings dialog. Such a dialog takes the nested steps (`dialog-backdrop-nested`,
- * `dialog-popup-nested`, a forced backdrop), or the one underneath stays on top and keeps taking clicks.
+ * Whether a dialog opened over another app-level dialog. Such a dialog takes the nested steps
+ * (`dialog-backdrop-nested`, `dialog-popup-nested`, a forced backdrop), or the one underneath stays on top and keeps taking clicks.
  */
 export function useDialogLayer(isOpen: boolean): boolean {
     const id = useRef(Symbol('dialog'));
     // Decided in render at the moment the dialog opens, so its first frame is already on the right step.
     const [seen, setSeen] = useState({ open: false, stacked: false });
+
     if (seen.open !== isOpen) {
         setSeen({ open: isOpen, stacked: isOpen && open.size > 0 });
     }
@@ -20,8 +20,10 @@ export function useDialogLayer(isOpen: boolean): boolean {
         if (!isOpen) {
             return;
         }
+
         const self = id.current;
         open.add(self);
+
         return () => {
             open.delete(self);
         };

package/src/error-boundary.ts

@@ -1,40 +1,27 @@
-/*
- * The pure half of `ErrorBoundary`: when a failed subtree gets another try, and what a person copies
- * out of the message. Kept apart so it can be tested without a DOM.
- */
+/* The pure half of `ErrorBoundary`, kept apart so it can be tested without a DOM. */
 
 /* Anything the subtree draws from. A change in any of them means the data may be whole again. */
 export type ResetKeys = readonly unknown[];
 
-/*
- * Whether a boundary that holds an error should draw its children again. Only a boundary that
- * failed resets. Comparing keys while the children are fine would remount a terminal or an embedded
- * page every time the data under it changes.
- */
+/* Only a failed boundary resets: comparing keys while the children are fine would remount a terminal or an embedded page on every change. */
 export const shouldReset = (failed: boolean, previous: ResetKeys, next: ResetKeys): boolean => {
     if (!failed) {
         return false;
     }
+
     if (previous.length !== next.length) {
         return true;
     }
+
     return previous.some((key, i) => !Object.is(key, next[i]));
 };
 
 /* A thrown value is not always an Error, and the message has to say something either way. */
-export const errorMessageOf = (error: unknown): string => {
-    if (error instanceof Error) {
-        return error.message || error.name;
-    }
-    return typeof error === 'string' ? error : String(error);
-};
+export const errorMessageOf = (error: unknown): string => (error instanceof Error ? error.message || error.name : String(error));
 
 /* The text behind the copy button: what a bug report needs, the component stack included. */
 export const errorReport = (label: string, error: unknown, componentStack: string | null): string => {
     const stack = error instanceof Error && error.stack ? error.stack : errorMessageOf(error);
-    const parts = [label, stack];
-    if (componentStack) {
-        parts.push(`Component stack:${componentStack}`);
-    }
-    return parts.join('\n\n');
+
+    return [label, stack, ...(componentStack ? [`Component stack:${componentStack}`] : [])].join('\n\n');
 };

package/src/file-icon.ts

@@ -3,10 +3,8 @@ import { SETI_BY_FILE_EXTENSION, SETI_BY_FILE_NAME, SETI_BY_FILE_NAME_CONTAINS,
 
 const SPRITE_ELEMENT_ID = 'adecore-ui-file-icon-sprite';
 
-/* Hand this to the tree. The glyphs are Seti's (`seti-icons.ts`), which knows far more file types than
-   the tree's own sets. The tree colors only those, so every symbol carries its hue in its id and the
-   sprite brings the rules that color it. Everything drawn beside a tree calls `fileIconFor`, so a tab,
-   a picker row and a tree row never disagree about what a file is. */
+/* Seti knows far more file types than the tree's own sets. The tree colors only those, so every symbol
+   carries its hue in its id and the sprite brings the rules that color it. */
 export const FILE_TREE_ICONS: FileTreeIconConfig = {
     set: 'none',
     spriteSheet: SETI_SPRITE_SHEET,
@@ -21,15 +19,13 @@ let resolver: ReturnType<typeof createFileTreeIconResolver> | null = null;
 /* Built on the first icon rather than on import, so a bundle that never draws one never builds it. */
 const resolveIcon: ReturnType<typeof createFileTreeIconResolver>['resolveIcon'] = (...args) => {
     resolver ??= createFileTreeIconResolver(FILE_TREE_ICONS);
+
     return resolver.resolveIcon(...args);
 };
 
 /*
- * The id of the `<symbol>` the set gives a file, in the sprite `mountFileIconSprite` puts in the
- * document. Only the last segment of the path decides, first by exact name (`package.json`), then by
- * a part of the name (`Dockerfile.dev`), then by the longest extension that matches (`spec.ts` before
- * `ts`). Anything else falls back to the generic file icon, a directory included: the tree marks a
- * folder with its chevron, not a glyph.
+ * The id of a `<symbol>` in the sprite `mountFileIconSprite` puts in the document. A directory gets the
+ * generic file icon: the tree marks a folder with its chevron, not a glyph.
  */
 export const fileIconFor = (path: string): string => resolveIcon('file-tree-icon-file', path).name;
 
@@ -39,12 +35,15 @@ export const mountFileIconSprite = (): void => {
     if (document.getElementById(SPRITE_ELEMENT_ID) !== null) {
         return;
     }
+
     const holder = document.createElement('div');
     holder.innerHTML = SETI_SPRITE_SHEET;
     const sprite = holder.firstElementChild;
+
     if (sprite === null) {
         return;
     }
+
     sprite.id = SPRITE_ELEMENT_ID;
     (document.body ?? document.documentElement).append(sprite);
 };

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

@@ -21,10 +21,7 @@ export function directoryOfEmptyLine(path: string): string {
     return path.slice(0, -EMPTY_LINE_NAME.length);
 }
 
-/*
- * The lines to add and the ones to take away: an open directory whose label is not undefined and
- * that holds nothing besides its own line gets one, every other line the wrapper added goes.
- */
+/* An open, labeled directory that holds nothing besides its own line gets one; every other line the wrapper added goes. */
 export function emptyLineChanges(
     rows: readonly FileTreeVisibleRow[],
     labelOf: FileTreeEmptyLabel,
@@ -32,74 +29,93 @@ export function emptyLineChanges(
     added: Iterable<string>
 ): { add: string[]; remove: string[] } {
     const wanted = new Set<string>();
+
     rows.forEach((row, index) => {
         if (row.kind !== 'directory' || !row.isExpanded) {
             return;
         }
+
         const line = emptyLineOf(row.path);
+
         for (let next = index + 1; next < rows.length && rows[next]!.depth > row.depth; next++) {
             if (rows[next]!.path !== line) {
                 return;
             }
         }
+
         if (labelOf(row) !== undefined) {
             wanted.add(line);
         }
     });
+
     return {
         add: [...wanted].filter((line) => !has(line)),
         remove: [...added].filter((line) => !wanted.has(line) && has(line))
     };
 }
 
-/*
- * Where an arrow, Home or End goes instead when the row it would land on is a line: past it, or
- * nowhere (the focused path itself) where nothing lies past it. Null when no line is in the way.
- */
+/* Past the line the key would land on, or the focused path itself where nothing lies past it. Null when no line is in the way. */
 export function pastEmptyLine(model: FileTree, key: string): string | null {
     const index = model.getFocusedIndex();
     const focused = model.getFocusedPath();
+
     if (index < 0 || focused === null) {
         return null;
     }
+
     const count = model.getVisibleCount();
+
     const at = (position: number): FileTreeVisibleRow | null =>
         position >= 0 && position < count ? (model.getVisibleRows(position, position)[0] ?? null) : null;
+
     const lineAt = (position: number): boolean => {
         const row = at(position);
+
         return row !== null && isEmptyLine(row.path);
     };
+
     const pathAt = (position: number): string => {
         const row = at(position);
+
         return row === null ? focused : pathOfRow(row);
     };
+
     if ((key === 'ArrowDown' || key === 'ArrowRight') && lineAt(index + 1)) {
         return key === 'ArrowDown' ? pathAt(index + 2) : focused;
     }
+
     if (key === 'ArrowUp' && lineAt(index - 1)) {
         return pathAt(index - 2);
     }
+
     if (key === 'End' && lineAt(count - 1)) {
         return pathAt(count - 2);
     }
+
     return null;
 }
 
 /* Focus that still lands on a line, through a key with a modifier or the engine giving focus back to the line's element, goes on the way the last key went. */
 export function skipEmptyLine(model: FileTree, key: string): boolean {
     const path = model.getFocusedPath();
+
     if (path === null || !isEmptyLine(path)) {
         return false;
     }
+
     if (key === 'ArrowUp' || key === 'PageUp') {
         model.focusPreviousItem();
+
         return true;
     }
+
     if (key === 'ArrowDown' || key === 'PageDown' || key === 'End') {
         model.focusNextItem();
     }
+
     if (model.getFocusedPath() === path) {
         model.focusPath(directoryOfEmptyLine(path));
     }
+
     return true;
 }

package/src/file-tree/helpers.ts

@@ -11,6 +11,7 @@ export interface SortRow {
 
 export function directoryHandle(model: FileTree, path: string): FileTreeDirectoryHandle | null {
     const item = model.getItem(path);
+
     return item?.isDirectory() ? (item as FileTreeDirectoryHandle) : null;
 }
 
@@ -26,21 +27,26 @@ export function visibleRows(model: FileTree): FileTreeVisibleRow[] {
 export function visibleRowsAround(model: FileTree, start: number, count: number): FileTreeVisibleRow[] {
     const first = Math.max(0, start - 1);
     const last = Math.min(model.getVisibleCount() - 1, start + count);
+
     if (last < first) {
         return [];
     }
+
     return model.getVisibleRows(first, last).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();
         }
@@ -49,6 +55,7 @@ export function applyExpansion(model: FileTree, collapsed: ReadonlySet<string>,
 
 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();
@@ -58,10 +65,12 @@ export function resetExpandedPaths(model: FileTree, paths: readonly string[], ex
 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;
 }
 
@@ -85,7 +94,9 @@ export function selectOnly(model: FileTree, path: string | null): void {
             model.getItem(selected)?.deselect();
         }
     }
+
     const item = path === null ? null : model.getItem(path);
+
     if (item && !item.isSelected()) {
         item.select();
     }
@@ -93,13 +104,16 @@ export function selectOnly(model: FileTree, path: string | null): void {
 
 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);
 }
 
@@ -107,6 +121,7 @@ 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;
 }
 
@@ -115,10 +130,12 @@ export function ancestorDirsOf(treePath: string): string[] {
     segments.pop();
     const dirs: string[] = [];
     let prefix = '';
+
     for (const segment of segments) {
         prefix = `${prefix}${segment}/`;
         dirs.push(prefix);
     }
+
     return dirs;
 }
 
@@ -132,29 +149,37 @@ export function newlyExpanded(before: ReadonlySet<string>, after: ReadonlySet<st
 
 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;
         }
+
         return nameOrder(leftSegment, 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;
 }
@@ -172,6 +197,7 @@ function plainKey(rowPath: string): string | null {
 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];
     });
 }
@@ -181,11 +207,13 @@ export function mergeCollapsedPaths(current: string[], rows: readonly FileTreeVi
     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;
 }
@@ -196,18 +224,24 @@ export function expansionChanges(
     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;
 }