@adecore/ui 0.39.0 → 0.40.1

package/src/tabs/parts.tsx

@@ -5,7 +5,6 @@ import {
     useContext,
     useEffect,
     useLayoutEffect,
-    useMemo,
     useRef,
     useState,
     type ComponentProps,
@@ -41,7 +40,6 @@ const InMenuContext = createContext(false);
 const TAB =
     'relative flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap text-xs font-medium text-text-muted hover:text-text data-[active]:text-text data-[disabled]:opacity-50 after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 data-[active]:after:bg-text';
 
-/* The button that opens the tabs that do not fit reads as one more tab, at the very end of the strip. */
 const MORE = clsx(TAB, 'ml-auto data-[popup-open]:text-text');
 
 /* A tab as a key in a bar, for tabs that share a toolbar with buttons and must not read as the tabs of a pane under it. */
@@ -70,18 +68,21 @@ export function TabsRoot({ value, defaultValue = 0, onValueChange, ...props }: T
     const current = controlled ? value : own;
     // The latest handler without a new context for every render of a parent that writes it inline.
     const latest = useRef(onValueChange);
+
     useLayoutEffect(() => {
         latest.current = onValueChange;
     });
-    const selection = useMemo(() => {
-        const select = (next: TabsValue): void => {
-            if (!controlled) {
-                setOwn(next);
-            }
-            latest.current?.(next);
-        };
-        return { value: current, select };
-    }, [controlled, current]);
+
+    const select = (next: TabsValue): void => {
+        if (!controlled) {
+            setOwn(next);
+        }
+
+        latest.current?.(next);
+    };
+
+    const selection = { value: current, select };
+
     return (
         <SelectionContext value={selection}>
             <BaseTabs.Root value={current} onValueChange={(next) => selection.select(next)} {...props} />
@@ -92,14 +93,19 @@ export function TabsRoot({ value, defaultValue = 0, onValueChange, ...props }: T
 export type TabsListProps = Omit<ComponentProps<typeof BaseTabs.List>, 'className'> & {
     /* On the strip, which runs the width of the pane; padding here insets the tabs from its edges. */
     className?: string;
+
     /* Drawn before the tabs, such as what they are the views of. It keeps its own width, like `end`. */
     start?: ReactNode;
+
     /* Drawn after the tabs, such as a button that adds one. It keeps its own width: the tabs fit in what is left. */
     end?: ReactNode;
+
     /* Like `end`, but right beside the last tab instead of at the end of the strip, so it moves with the tabs. */
     after?: ReactNode;
+
     /* `line` underlines the picked tab over the strip's border; `pill` fills it, for tabs in a toolbar. */
     variant?: TabsVariant;
+
     /* What happens to tabs that do not fit: a "More" menu at the end of the strip, or a row that scrolls sideways. */
     overflow?: 'menu' | 'scroll';
 };
@@ -108,9 +114,8 @@ const sameIndices = (left: readonly number[] | null, right: readonly number[]):
     left !== null && left.length === right.length && left.every((index, at) => index === right[at]);
 
 /*
- * The tabs that fit, and a menu at the end of the strip with the ones that do not. Every tab is measured
- * in a row nobody sees, so the strip knows what fits before it draws. The tabs are the direct children,
- * since the menu repeats what a tab holds.
+ * Every tab is measured in a row nobody sees, so the strip knows what fits before it draws. The tabs
+ * are the direct children, since the menu repeats what a tab holds.
  */
 export function TabsList({ className, children, start, end, after, variant = 'line', overflow = 'menu', ...props }: TabsListProps) {
     const style = STYLES[variant];
@@ -123,43 +128,51 @@ export function TabsList({ className, children, start, end, after, variant = 'li
     const beside = useRef<HTMLDivElement>(null);
     const list = useRef<HTMLDivElement>(null);
     const scrolls = overflow === 'scroll';
-    // Which edges of a scrolling row still hide a tab, where it fades out.
     const [edges, setEdges] = useState({ start: false, end: false });
     // Null until the first measure, which runs before the first paint.
     const [shown, setShown] = useState<number[] | null>(null);
+
     const tabs = Children.toArray(children).filter(
         (child): child is ReactElement<ComponentProps<typeof TabsTab>> => isValidElement(child) && child.type === TabsTab
     );
+
     const kept = tabs.flatMap((tab, index) => (tab.props.value === value || tab.props.pinned === true ? [index] : []));
 
     useLayoutEffect(() => {
         const host = strip.current;
         const row = measure.current;
+
         if (scrolls || !host || !row) {
             return;
         }
+
         const fit = (): void => {
             const style = getComputedStyle(host);
             const gap = parseFloat(style.columnGap) || 0;
+
             const taken = [head.current, beside.current, tail.current].reduce(
                 (sum, part) => (part === null ? sum : sum + part.getBoundingClientRect().width + gap),
                 0
             );
+
             const room = host.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - taken;
             const cells = [...row.children].map((cell) => cell.getBoundingClientRect().width);
             const more = cells.pop() ?? 0;
             const next = shownTabs(cells, room, parseFloat(getComputedStyle(row).columnGap) || 0, more, kept);
             setShown((current) => (sameIndices(current, next) ? current : next));
         };
+
         fit();
         const observer = new ResizeObserver(fit);
         observer.observe(host);
         observer.observe(row);
+
         for (const part of [head.current, beside.current, tail.current]) {
             if (part !== null) {
                 observer.observe(part);
             }
         }
+
         return () => observer.disconnect();
     });
 
@@ -168,11 +181,14 @@ export function TabsList({ className, children, start, end, after, variant = 'li
     useEffect(() => {
         const row = list.current;
         const tab = row?.querySelector<HTMLElement>('[aria-selected="true"]');
+
         if (!scrolls || !row || !tab) {
             return;
         }
+
         const strip = row.getBoundingClientRect();
         const picked = tab.getBoundingClientRect();
+
         if (picked.left < strip.left) {
             row.scrollLeft -= strip.left - picked.left;
         } else if (picked.right > strip.right) {
@@ -182,21 +198,26 @@ export function TabsList({ className, children, start, end, after, variant = 'li
 
     useEffect(() => {
         const row = list.current;
+
         if (!scrolls || !row) {
             return;
         }
+
         const measure = (): void => {
             const start = row.scrollLeft > 0;
             const end = row.scrollLeft + row.clientWidth < row.scrollWidth - 1;
             setEdges((current) => (current.start === start && current.end === end ? current : { start, end }));
         };
+
         measure();
         row.addEventListener('scroll', measure, { passive: true });
         const observer = new ResizeObserver(measure);
         observer.observe(row);
+
         for (const tab of row.children) {
             observer.observe(tab);
         }
+
         return () => {
             row.removeEventListener('scroll', measure);
             observer.disconnect();
@@ -206,20 +227,25 @@ export function TabsList({ className, children, start, end, after, variant = 'li
     // A mouse wheel only turns vertically, and on a row that scrolls sideways that is the way it should turn.
     useEffect(() => {
         const row = list.current;
+
         if (!scrolls || !row) {
             return;
         }
+
         const onWheel = (event: WheelEvent): void => {
             if (!event.deltaX && event.deltaY) {
                 row.scrollLeft += event.deltaY;
             }
         };
+
         row.addEventListener('wheel', onWheel, { passive: true });
+
         return () => row.removeEventListener('wheel', onWheel);
     }, [scrolls]);
 
     const visible = shown === null ? tabs : shown.map((index) => tabs[index]!);
     const hidden = shown === null ? [] : tabs.filter((_, index) => !shown.includes(index));
+
     const more = (
         <>
             {t('tabs.more')}
@@ -289,6 +315,7 @@ type TabProps = ComponentProps<typeof BaseTabs.Tab>;
 export type TabsTabProps = TabProps & {
     /* Makes the tab closable: a close button in it, a middle click, and Delete or Backspace while the tab has focus. */
     onClose?(): void;
+
     /* Keeps the tab in the strip, never in the menu, and leaves it unclosable even with `onClose`. */
     pinned?: boolean;
 };
@@ -298,17 +325,9 @@ export function TabsTab({ className, onClose, pinned = false, children, ...props
     const { t } = useTranslation('ui');
     const tab = STYLES[useContext(VariantContext)].tab;
 
-    if (pinned) {
-        return (
-            <BaseTabs.Tab className={withClass(tab, className)} data-pinned="" {...props}>
-                {children}
-            </BaseTabs.Tab>
-        );
-    }
-
-    if (onClose === undefined) {
+    if (pinned || onClose === undefined) {
         return (
-            <BaseTabs.Tab className={withClass(tab, className)} {...props}>
+            <BaseTabs.Tab className={withClass(tab, className)} data-pinned={pinned ? '' : undefined} {...props}>
                 {children}
             </BaseTabs.Tab>
         );
@@ -318,6 +337,7 @@ export function TabsTab({ className, onClose, pinned = false, children, ...props
 
     const handleKeyDown = (e: Parameters<NonNullable<TabProps['onKeyDown']>>[0]): void => {
         onKeyDown?.(e);
+
         if (!e.defaultPrevented && e.target === e.currentTarget && (e.key === 'Delete' || e.key === 'Backspace')) {
             e.preventDefault();
             onClose();
@@ -327,6 +347,7 @@ export function TabsTab({ className, onClose, pinned = false, children, ...props
     // A middle press starts autoscroll on some platforms; the release is what closes.
     const handleMouseDown = (e: Parameters<NonNullable<TabProps['onAuxClick']>>[0]): void => {
         onMouseDown?.(e);
+
         if (e.button === 1) {
             e.preventDefault();
         }
@@ -334,6 +355,7 @@ export function TabsTab({ className, onClose, pinned = false, children, ...props
 
     const handleAuxClick = (e: Parameters<NonNullable<TabProps['onAuxClick']>>[0]): void => {
         onAuxClick?.(e);
+
         if (!e.defaultPrevented && e.button === 1) {
             e.preventDefault();
             onClose();
@@ -371,9 +393,10 @@ export type TabsCountProps = Omit<useRender.ComponentProps<'span'>, 'children'>
     value: number;
 };
 
-/* How much a tab holds, after its label. Nothing at zero: an empty view needs no number to say so. */
+/* Nothing at zero: an empty view needs no number to say so. */
 export function TabsCount({ value, render, className, ref, ...props }: TabsCountProps) {
     const inMenu = useContext(InMenuContext);
+
     const element = useRender({
         render,
         ref,
@@ -384,5 +407,6 @@ export function TabsCount({ value, render, className, ref, ...props }: TabsCount
             className: clsx('inline-flex shrink-0', inMenu && 'ml-auto', className)
         }
     });
+
     return value === 0 ? null : element;
 }

package/src/testing/dedupe.ts

@@ -3,11 +3,10 @@ import { dirname, join, sep } from 'node:path';
 import { Glob, plugin } from 'bun';
 
 /*
- * A preload for `bun test` in an app that links a checkout of this library: what `resolve.dedupe`
- * does for Vite. The checkout has node_modules of its own, and a second React, i18next or Base UI
- * breaks every hook, every word and every compound part. Bun has no dedupe and its resolve hook never
- * sees a package import, so every file of these packages in the checkout loads as a stand-in for the
- * same file in the app's copy. Does nothing once the library is installed from the registry.
+ * What `resolve.dedupe` does for Vite, for `bun test` in an app that links a checkout: a second React,
+ * i18next or Base UI breaks every hook, word and compound part. Bun has no dedupe and its resolve hook
+ * never sees a package import, so each file of these packages in the checkout loads as a stand-in for
+ * the app's copy.
  *
  * CodeMirror and Lezer reject an extension, a facet or a node prop made by another copy, and the chat
  * views take both from the app; shiki is in the list for the highlighter an app hands them.
@@ -34,6 +33,7 @@ interface Copy {
 
 const manifestOf = (folder: string): Manifest | null => {
     const path = join(folder, 'package.json');
+
     return existsSync(path) ? (JSON.parse(readFileSync(path, 'utf8')) as Manifest) : null;
 };
 
@@ -43,6 +43,7 @@ const dependsOnLibrary = (manifest: Manifest | null): boolean =>
 const membersOf = (root: string, manifest: Manifest | null): string[] => {
     const workspaces = manifest?.workspaces;
     const patterns = (Array.isArray(workspaces) ? workspaces : workspaces?.packages) ?? [];
+
     return patterns
         .flatMap((pattern) => [...new Glob(`${pattern}/package.json`).scanSync({ cwd: root, onlyFiles: true })])
         .map((path) => join(root, dirname(path)));
@@ -54,6 +55,7 @@ const membersOf = (root: string, manifest: Manifest | null): string[] => {
  */
 const appFolders = (): string[] => {
     const root = process.cwd();
+
     return [root, ...membersOf(root, manifestOf(root)).filter((folder) => dependsOnLibrary(manifestOf(folder)))];
 };
 
@@ -61,21 +63,25 @@ const appFolders = (): string[] => {
 const checkoutFolders = (): string[] => {
     for (let folder = dirname(library); dirname(folder) !== folder; folder = dirname(folder)) {
         const manifest = manifestOf(folder);
+
         if (manifest?.workspaces !== undefined) {
             const members = membersOf(folder, manifest);
+
             return members.includes(library) ? [folder, ...members] : [library];
         }
     }
+
     return [library];
 };
 
-/* The packages a name of the list stands for in a folder: itself, or every package of the scope for `@scope/*`. */
 const namesIn = (folder: string, pattern: string): string[] => {
     if (!pattern.endsWith('/*')) {
         return [pattern];
     }
+
     const scope = pattern.slice(0, -2);
     const path = join(folder, 'node_modules', scope);
+
     return existsSync(path)
         ? readdirSync(path)
               .filter((entry) => !entry.startsWith('.'))
@@ -83,13 +89,15 @@ const namesIn = (folder: string, pattern: string): string[] => {
         : [];
 };
 
-/* The copy of a package that `from` resolves to, walking up the node_modules folders as Node does. */
+/* Walks up the node_modules folders as Node does. */
 const copyFrom = (from: string, name: string): string | null => {
     for (let folder = from; ; folder = dirname(folder)) {
         const candidate = join(folder, 'node_modules', name);
+
         if (existsSync(candidate)) {
             return realpathSync(candidate);
         }
+
         if (dirname(folder) === folder) {
             return null;
         }
@@ -98,28 +106,38 @@ const copyFrom = (from: string, name: string): string | null => {
 
 const findCopies = (): Copy[] => {
     const checkout = checkoutFolders();
+
     const inside = (path: string): boolean => path === checkout[0] || path.startsWith(`${checkout[0]}${sep}`);
+
     // A run inside the checkout is the library's own; a node_modules above it belongs to no app.
     if (inside(realpathSync(process.cwd()))) {
         return [];
     }
+
     const folders = appFolders();
+
     const added = folders.flatMap((folder) => {
         const names = manifestOf(folder)?.adecore?.dedupe;
+
         return Array.isArray(names) ? names.filter((name): name is string => typeof name === 'string') : [];
     });
+
     const names = new Set([...SHARED, ...added].flatMap((pattern) => checkout.flatMap((folder) => namesIn(folder, pattern))));
+
     return [...names].flatMap((name) => {
         const ours = folders.map((folder) => copyFrom(folder, name)).find((copy): copy is string => copy !== null && !inside(copy));
+
         if (ours === undefined) {
             return [];
         }
+
         const theirs = new Set(
             checkout
                 .map((folder) => join(folder, 'node_modules', name))
                 .filter((path) => existsSync(path))
                 .map((path) => realpathSync(path))
         );
+
         return [...theirs].filter((real) => real !== ours).map((real) => ({ theirs: `${real}${sep}`, ours: `${ours}${sep}` }));
     });
 };
@@ -140,6 +158,7 @@ const standIn = (path: string): string => {
     const { exports, imports } = transpiler.scan(readFileSync(path, 'utf8'));
     const esm = exports.length > 0 || imports.some((entry) => entry.kind === 'import-statement');
     const target = JSON.stringify(path);
+
     return [`export * from ${target};`, ...(!esm || exports.includes('default') ? [`export { default } from ${target};`] : [])].join('\n');
 };
 
@@ -149,6 +168,7 @@ if (copies.length > 0) {
         setup(build) {
             build.onLoad({ filter: new RegExp(`^(${copies.map((copy) => escape(copy.theirs)).join('|')})`) }, (args) => {
                 const copy = copies.find((candidate) => args.path.startsWith(candidate.theirs))!;
+
                 return { contents: standIn(copy.ours + args.path.slice(copy.theirs.length)), loader: 'js' };
             });
         }

package/src/testing/fake-source.ts

@@ -9,6 +9,7 @@ export interface FakeFormatSource extends FormatSource {
 export const fakeFormatSource = (): FakeFormatSource => {
     let language = 'en';
     let region: string = FORMAT_LANGUAGE;
+
     return {
         language: () => language,
         region: () => region,

package/src/tint.ts

@@ -1,11 +1,9 @@
 import type { CSSProperties } from 'react';
 
 /*
- * The custom properties that let what stands on a colored ground follow its color: the hover of a
- * button and a separator. The theme's utilities read `--surface-hover` and `--border` themselves
- * (`@theme inline`), so a host sets this on the colored element and its buttons and separators
- * take it. `--border` is mixed from `--border-strong`, since a property that reads itself is no
- * value at all.
+ * The theme's utilities read `--surface-hover` and `--border` themselves (`@theme inline`), so
+ * buttons and separators under the element take its color. `--border` mixes from `--border-strong`,
+ * since a property that reads itself is no value at all.
  */
 export function tintStyle(color: string, ground = 'var(--surface-raised)'): CSSProperties {
     return {

package/src/toast-store.ts

@@ -4,7 +4,6 @@ import type { Shortcut } from './shortcut.ts';
 // How long a toast that went well stays up; a failure waits for the person instead.
 export const SUCCESS_MS = 4000;
 
-// How long a deletion can still be taken back.
 export const UNDO_MS = 8000;
 
 // `setTimeout` fires at once past this, so a longer lifetime, `Infinity` too, is a toast that stays.
@@ -16,35 +15,39 @@ export type ToastKind = 'progress' | 'success' | 'error' | 'deleted';
 export interface ToastAction {
     label: string;
     run(): void;
+
     /* The key that does the same, printed beside the label. The key itself is bound elsewhere. */
     shortcut?: Shortcut;
 }
 
-/* When a toast that goes by itself started counting and when it goes, as epoch milliseconds. */
+/* Epoch milliseconds. */
 export interface ToastDeadline {
     start: number;
     end: number;
 }
 
-/* How far into its lifetime a toast is at `now`, held inside that lifetime. */
 export const elapsedOf = (deadline: ToastDeadline, now: number): number => Math.min(Math.max(now - deadline.start, 0), deadline.end - deadline.start);
 
 /* An app that carries more on a toast extends this and hands its own type to `createToastStore`. */
 export interface Toast {
     id: string;
     title: string;
-    /* The line under the title, often the one that says why something stopped. */
     description?: string;
     kind: ToastKind;
     action?: ToastAction;
-    /* More than one thing to do about it, such as looking at what went wrong or trying again; drawn after `action`, in order. */
+
+    /* Drawn after `action`, in order. */
     actions?: ToastAction[];
+
     /* A success that waits to be dismissed, for news that lands while nobody is looking yet. */
     persist?: boolean;
+
     /* Milliseconds until the toast takes itself away, whatever its kind; over the kind's own lifetime and `persist`. Zero or less is ignored. */
     lifetime?: number;
-    /* Runs once the toast is gone, whether it ran out or was dismissed. */
+
+    /* Whether it ran out or was dismissed. */
     onClose?: () => void;
+
     /* Set by the store from the timer that takes the toast away, so what counts down on screen is that timer. */
     deadline?: ToastDeadline;
 }
@@ -55,18 +58,17 @@ export type ToastPatch<T extends Toast = Toast> = Partial<Omit<T, 'id' | 'deadli
 
 export interface ToastStore<T extends Toast = Toast> {
     toasts: T[];
+
     /* Puts one up, or moves the one with this id to what it says now; answers its id. */
     show(toast: ToastInput<T>): string;
+
     update(id: string, patch: ToastPatch<T>): void;
     dismiss(id: string): void;
 }
 
 export type ToastStoreHook<T extends Toast = Toast> = UseBoundStore<StoreApi<ToastStore<T>>>;
 
-/*
- * The one place an app says how something went that no surface on screen shows. A long action keeps
- * one id from progress to its outcome, so a person never watches two cards for one thing.
- */
+/* A long action keeps one id from progress to its outcome, so a person never watches two cards for one thing. */
 export const createToastStore = <T extends Toast = Toast>(): ToastStoreHook<T> => {
     const timers = new Map<string, ReturnType<typeof setTimeout>>();
     let counter = 0;
@@ -77,18 +79,17 @@ export const createToastStore = <T extends Toast = Toast>(): ToastStoreHook<T> =
             timers.delete(id);
         };
 
-        /*
-         * A toast that went well takes itself away, and so does the offer to undo; a failure and a running
-         * action stay, unless the toast names a lifetime of its own.
-         */
+        // A failure and a running action stay, unless the toast names a lifetime of its own.
         const schedule = (id: string, toast: Pick<Toast, 'kind' | 'persist' | 'lifetime'>): ToastDeadline | undefined => {
             stop(id);
             const { kind, persist } = toast;
             const own = toast.lifetime !== undefined && toast.lifetime > 0 ? toast.lifetime : undefined;
             const lifetime = own ?? (kind === 'deleted' ? UNDO_MS : kind === 'success' && persist !== true ? SUCCESS_MS : null);
+
             if (lifetime === null || lifetime > LONGEST_TIMER_MS) {
                 return undefined;
             }
+
             timers.set(
                 id,
                 setTimeout(() => {
@@ -96,7 +97,9 @@ export const createToastStore = <T extends Toast = Toast>(): ToastStoreHook<T> =
                     get().dismiss(id);
                 }, lifetime)
             );
+
             const start = Date.now();
+
             return { start, end: start + lifetime };
         };
 
@@ -108,13 +111,16 @@ export const createToastStore = <T extends Toast = Toast>(): ToastStoreHook<T> =
                 const next = { ...toast, id, deadline: schedule(id, toast) } as T;
                 const toasts = get().toasts;
                 set({ toasts: toasts.some((entry) => entry.id === id) ? toasts.map((entry) => (entry.id === id ? next : entry)) : [...toasts, next] });
+
                 return id;
             },
             update(id, patch) {
                 const current = get().toasts.find((entry) => entry.id === id);
+
                 if (current === undefined) {
                     return;
                 }
+
                 const merged: T = { ...current, ...patch };
                 const next: T = { ...merged, deadline: schedule(id, merged) };
                 set({ toasts: get().toasts.map((entry) => (entry.id === id ? next : entry)) });

package/src/tree/parts.tsx

@@ -25,10 +25,12 @@ export type TreeRootProps = useRender.ComponentProps<'div'> & {
 export function TreeRoot({ overflow = 'truncate', render, className, ref, children, ...props }: TreeRootProps) {
     const { attach, bar } = useTreeShift(TREE_ROWS);
     const scrolls = overflow === 'scroll';
+
     const rootRef = (node: HTMLDivElement | null) => {
         attach(scrolls ? node : null);
         mergeRefs<HTMLDivElement>(ref)(node);
     };
+
     return useRender({
         render,
         ref: rootRef,
@@ -115,6 +117,7 @@ export type TreeChevronProps = useRender.ComponentProps<'button'> & {
 
 export function TreeChevron({ expanded, onExpandedChange, render, className, ref, onClick, onDoubleClick, ...props }: TreeChevronProps) {
     const { t } = useTranslation('ui');
+
     return useRender({
         render,
         ref,
@@ -128,6 +131,7 @@ export function TreeChevron({ expanded, onExpandedChange, render, className, ref
             onClick: (event: MouseEvent<HTMLButtonElement>) => {
                 event.stopPropagation();
                 onClick?.(event);
+
                 if (!event.defaultPrevented) {
                     onExpandedChange?.(!expanded);
                 }
@@ -139,16 +143,19 @@ export function TreeChevron({ expanded, onExpandedChange, render, className, ref
 }
 
 export type TreeLabelProps = useRender.ComponentProps<'span'>;
+
 export function TreeLabel({ render, className, ref, ...props }: TreeLabelProps) {
     return useRender({ render, ref, defaultTagName: 'span', props: { ...props, className: clsx('adecore-tree-label', className) } });
 }
 
 export type TreeDecorationProps = useRender.ComponentProps<'span'>;
+
 export function TreeDecoration({ render, className, ref, ...props }: TreeDecorationProps) {
     return useRender({ render, ref, defaultTagName: 'span', props: { ...props, className: clsx('adecore-tree-decoration', className) } });
 }
 
 export type TreeControlProps = useRender.ComponentProps<'span'>;
+
 export function TreeControl({ render, className, ref, onClick, onDoubleClick, onKeyDown, onPointerDown, ...props }: TreeControlProps) {
     return useRender({
         render,
@@ -167,6 +174,7 @@ export function TreeControl({ render, className, ref, onClick, onDoubleClick, on
 }
 
 export type TreeCheckboxProps = CheckboxProps;
+
 export function TreeCheckbox(props: TreeCheckboxProps) {
     return (
         <TreeControl>

package/src/tree/shift.ts

@@ -27,15 +27,19 @@ 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;
 }
 
@@ -43,6 +47,8 @@ export function shiftThumb(shift: number, max: number, track: number, view: numb
     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 };
 }