@adecore/ui 0.20.0 → 0.20.1

package/dist/Tooltip.d.ts

@@ -1,4 +1,5 @@
-import { type ReactElement, type ReactNode } from 'react';
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import { Tooltip as BaseTooltip } from '@base-ui-components/react/tooltip';
 import type { Shortcut } from './shortcut.ts';
 export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
 export declare function TooltipProvider({ children }: {
@@ -6,11 +7,14 @@ export declare function TooltipProvider({ children }: {
 }): import("react").JSX.Element;
 export interface TooltipProps {
     label: ReactNode;
+    open?: boolean;
+    onOpenChange?(open: boolean): void;
+    anchor?: ComponentProps<typeof BaseTooltip.Positioner>['anchor'];
     kbd?: Shortcut | string;
     side?: TooltipSide;
     sideOffset?: number;
     name?: boolean;
     disabled?: boolean;
-    children: ReactElement<Record<string, unknown>>;
+    children?: ReactElement<Record<string, unknown>>;
 }
-export declare function Tooltip({ label, kbd, side, sideOffset, name, disabled, children }: TooltipProps): import("react").JSX.Element;
+export declare function Tooltip({ label, open, onOpenChange, anchor, kbd, side, sideOffset, name, disabled, children }: TooltipProps): import("react").JSX.Element;

package/dist/Tooltip.js

@@ -8,7 +8,7 @@ export function TooltipProvider({ children }) {
     return (_jsx(BaseTooltip.Provider, { delay: 150, closeDelay: 0, children: children }));
 }
 /* A hint on hover and on keyboard focus. Every hint in an app is one of these, never a `title`. */
-export function Tooltip({ label, kbd, side = 'top', sideOffset = 6, name = false, disabled = false, children }) {
+export function Tooltip({ label, open, onOpenChange, anchor, kbd, side = 'top', sideOffset = 6, name = false, disabled = false, children }) {
     // Held Cmd (Ctrl off macOS) prints this shortcut under the trigger (`ShortcutHints`).
     const hintRef = useCallback((element) => {
         if (element === null || kbd === undefined || typeof kbd === 'string') {
@@ -16,6 +16,6 @@ export function Tooltip({ label, kbd, side = 'top', sideOffset = 6, name = false
         }
         return registerShortcutHint(element, kbd);
     }, [kbd]);
-    return (_jsxs(BaseTooltip.Root, { disabled: disabled, children: [_jsx(BaseTooltip.Trigger, { ref: hintRef, render: children, "aria-label": name && typeof label === 'string' ? label : undefined }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: side, sideOffset: sideOffset, className: "tooltip-positioner", children: _jsx(BaseTooltip.Popup, { className: "tooltip-popup", children: _jsxs(BaseTooltip.Viewport, { className: "max-w-72 px-[9px] py-[5px] text-pretty", children: [_jsx("span", { className: "wrap-anywhere", children: label }), kbd !== undefined &&
+    return (_jsxs(BaseTooltip.Root, { disabled: disabled, open: open, onOpenChange: onOpenChange, disableHoverablePopup: children === undefined, children: [children && _jsx(BaseTooltip.Trigger, { ref: hintRef, render: children, "aria-label": name && typeof label === 'string' ? label : undefined }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { anchor: anchor, side: side, sideOffset: sideOffset, className: "tooltip-positioner", children: _jsx(BaseTooltip.Popup, { role: "tooltip", className: "tooltip-popup", children: _jsxs(BaseTooltip.Viewport, { className: "max-w-72 px-[9px] py-[5px] text-pretty", children: [_jsx("span", { className: "wrap-anywhere", children: label }), kbd !== undefined &&
                                     (typeof kbd === 'string' ? (_jsx(Kbd, { variant: "inline", className: "ml-2", children: kbd })) : (_jsx(Kbd, { shortcut: kbd, variant: "inline", className: "ml-2" })))] }) }) }) })] }));
 }

package/dist/file-tree/use-slots.js

@@ -1,4 +1,5 @@
 import { useEffect, useId, useState } from 'react';
+import { flushSync } from 'react-dom';
 import { pathOfRow, visibleRows } from './helpers.js';
 import { FILE_TREE_CSS } from './style.js';
 // beta.6 owns button rows. Sibling slots keep real controls outside those buttons and in the app's stylesheet.
@@ -134,7 +135,8 @@ export function useFileTreeSlots(model, frame, label) {
                 .join('|');
             if (snapshot !== key) {
                 snapshot = key;
-                setSlots(next);
+                // Recycled rows must paint with their new portal contents in the same frame.
+                flushSync(() => setSlots(next));
             }
             position();
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { useCallback, type ReactElement, type ReactNode } from 'react';
+import { useCallback, type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { Tooltip as BaseTooltip } from '@base-ui-components/react/tooltip';
 import { Kbd } from './Kbd.tsx';
 import type { Shortcut } from './shortcut.ts';
@@ -17,6 +17,10 @@ export function TooltipProvider({ children }: { children: ReactNode }) {
 
 export interface TooltipProps {
     label: ReactNode;
+    open?: boolean;
+    onOpenChange?(open: boolean): void;
+    /* A virtual anchor positions a controlled hint over canvas content without adding an input target. */
+    anchor?: ComponentProps<typeof BaseTooltip.Positioner>['anchor'];
     /* A shortcut, or a short phrase about a key that is not one ("Shift skips the cache"). */
     kbd?: Shortcut | string;
     side?: TooltipSide;
@@ -27,11 +31,11 @@ export interface TooltipProps {
     /* Keeps the hint closed, for a trigger that only needs one some of the time. */
     disabled?: boolean;
     /* The trigger element. Its own children and handlers are kept; Base UI merges the tooltip props in. */
-    children: ReactElement<Record<string, unknown>>;
+    children?: ReactElement<Record<string, unknown>>;
 }
 
 /* A hint on hover and on keyboard focus. Every hint in an app is one of these, never a `title`. */
-export function Tooltip({ label, kbd, side = 'top', sideOffset = 6, name = false, disabled = false, children }: TooltipProps) {
+export function Tooltip({ label, open, onOpenChange, anchor, kbd, side = 'top', sideOffset = 6, name = false, disabled = false, children }: TooltipProps) {
     // Held Cmd (Ctrl off macOS) prints this shortcut under the trigger (`ShortcutHints`).
     const hintRef = useCallback(
         (element: HTMLElement | null) => {
@@ -44,11 +48,11 @@ export function Tooltip({ label, kbd, side = 'top', sideOffset = 6, name = false
     );
 
     return (
-        <BaseTooltip.Root disabled={disabled}>
-            <BaseTooltip.Trigger ref={hintRef} render={children} aria-label={name && typeof label === 'string' ? label : undefined} />
+        <BaseTooltip.Root disabled={disabled} open={open} onOpenChange={onOpenChange} disableHoverablePopup={children === undefined}>
+            {children && <BaseTooltip.Trigger ref={hintRef} render={children} aria-label={name && typeof label === 'string' ? label : undefined} />}
             <BaseTooltip.Portal>
-                <BaseTooltip.Positioner side={side} sideOffset={sideOffset} className="tooltip-positioner">
-                    <BaseTooltip.Popup className="tooltip-popup">
+                <BaseTooltip.Positioner anchor={anchor} side={side} sideOffset={sideOffset} className="tooltip-positioner">
+                    <BaseTooltip.Popup role="tooltip" className="tooltip-popup">
                         <BaseTooltip.Viewport className="max-w-72 px-[9px] py-[5px] text-pretty">
                             <span className="wrap-anywhere">{label}</span>
                             {/* The viewport wraps its children in a div of its own, so the 8px

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

@@ -1,4 +1,5 @@
 import { useEffect, useId, useState } from 'react';
+import { flushSync } from 'react-dom';
 import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
 import { pathOfRow, visibleRows } from './helpers.ts';
 import { FILE_TREE_CSS } from './style.ts';
@@ -153,7 +154,8 @@ export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, lab
                 .join('|');
             if (snapshot !== key) {
                 snapshot = key;
-                setSlots(next);
+                // Recycled rows must paint with their new portal contents in the same frame.
+                flushSync(() => setSlots(next));
             }
             position();
         };