@adecore/ui 0.34.1 → 0.35.1

package/dist/RelativeTime.d.ts

@@ -2,8 +2,9 @@ import type { Ref } from 'react';
 import { type TooltipSide } from './Tooltip.tsx';
 export interface RelativeTimeProps {
     at: Date | number | null | undefined;
+    tooltip?: boolean;
     tooltipSide?: TooltipSide;
     className?: string;
     ref?: Ref<HTMLElement>;
 }
-export declare function RelativeTime({ at, tooltipSide, className, ref }: RelativeTimeProps): import("react").JSX.Element;
+export declare function RelativeTime({ at, tooltip, tooltipSide, className, ref }: RelativeTimeProps): import("react").JSX.Element;

package/dist/RelativeTime.js

@@ -8,6 +8,7 @@ const TICK_MS = 30_000;
 /* A moment as its age, `3m ago`, counting on while it is on screen, with the exact time on hover and on keyboard focus. */
 export function RelativeTime({
   at,
+  tooltip = true,
   tooltipSide,
   className,
   ref
@@ -24,6 +25,14 @@ export function RelativeTime({
       children: "-"
     });
   }
+  if (!tooltip) {
+    return /*#__PURE__*/_jsx("time", {
+      ref: ref,
+      dateTime: new Date(at).toISOString(),
+      className: clsx('whitespace-nowrap', className),
+      children: formatAge(at, now)
+    });
+  }
   return /*#__PURE__*/_jsx(Tooltip, {
     label: formatDayClockWithYear(at),
     side: tooltipSide,

package/dist/command-palette/parts.d.ts

@@ -13,7 +13,7 @@ type AutocompleteProps<ItemValue> = Omit<Autocomplete.Root.Props<ItemValue>, 'op
 };
 type DialogProps = Pick<ComponentProps<typeof DialogRoot>, 'open' | 'defaultOpen' | 'onOpenChange' | 'onOpenChangeComplete'>;
 export type CommandPaletteRootProps<ItemValue> = AutocompleteProps<ItemValue> & DialogProps;
-export declare function CommandPaletteRoot<ItemValue>({ open, defaultOpen, onOpenChange, onOpenChangeComplete, autoHighlight, keepHighlight, items, children, ...props }: CommandPaletteRootProps<ItemValue>): import("react").JSX.Element;
+export declare function CommandPaletteRoot<ItemValue>({ open, defaultOpen, onOpenChange, onOpenChangeComplete, autoHighlight, keepHighlight, value, onValueChange, items, children, ...props }: CommandPaletteRootProps<ItemValue>): import("react").JSX.Element;
 export type CommandPalettePopupProps = Omit<DialogPopupProps, 'size'> & {
     size?: keyof typeof SIZE;
 };
@@ -26,7 +26,7 @@ export type CommandPaletteInputProps = Omit<ComponentProps<typeof Autocomplete.I
     className?: string;
 };
 export declare function CommandPaletteInput({ leading, trailing, escapeHint, mono, className, ref, ...props }: CommandPaletteInputProps): import("react").JSX.Element;
-export declare function CommandPaletteList({ className, ...props }: ComponentProps<typeof Autocomplete.List>): import("react").JSX.Element;
+export declare function CommandPaletteList({ className, ref, ...props }: ComponentProps<typeof Autocomplete.List>): import("react").JSX.Element;
 export type CommandPaletteFooterProps = useRender.ComponentProps<'div'>;
 export declare function CommandPaletteFooter({ render, className, ref, ...props }: CommandPaletteFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export {};

package/dist/command-palette/parts.js

@@ -1,5 +1,5 @@
 import { c as _c } from "react/compiler-runtime";
-import { createContext, useContext, useRef } from 'react';
+import { createContext, useContext, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { Search } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -11,9 +11,9 @@ import { Icon } from "../Icon.js";
 import { Kbd } from "../Kbd.js";
 import { mergeRefs } from '../merge-refs.js';
 import { KEY_SHORTCUTS } from '../shortcut.js';
-/* The field, for the popup to put the focus in when it opens: a control before it would take it otherwise. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const InputRefContext = createContext(null);
+const PaletteRefsContext = createContext(null);
+const NO_ITEMS = [];
 /* A palette asks for a few words and shows rows of one line; a search whose rows are lines of source needs the wider one. */
 const SIZE = {
   md: 'w-[576px]',
@@ -25,16 +25,18 @@ const SIZE = {
  * first row is highlighted and stays so while the pointer leaves the list, which is what Enter runs.
  */
 export function CommandPaletteRoot(t0) {
-  const $ = _c(22);
+  const $ = _c(33);
   let children;
   let defaultOpen;
   let items;
   let onOpenChange;
   let onOpenChangeComplete;
+  let onValueChange;
   let open;
   let props;
   let t1;
   let t2;
+  let value;
   if ($[0] !== t0) {
     ({
       open,
@@ -43,6 +45,8 @@ export function CommandPaletteRoot(t0) {
       onOpenChangeComplete,
       autoHighlight: t1,
       keepHighlight: t2,
+      value,
+      onValueChange,
       items,
       children,
       ...props
@@ -53,31 +57,86 @@ export function CommandPaletteRoot(t0) {
     $[3] = items;
     $[4] = onOpenChange;
     $[5] = onOpenChangeComplete;
-    $[6] = open;
-    $[7] = props;
-    $[8] = t1;
-    $[9] = t2;
+    $[6] = onValueChange;
+    $[7] = open;
+    $[8] = props;
+    $[9] = t1;
+    $[10] = t2;
+    $[11] = value;
   } else {
     children = $[1];
     defaultOpen = $[2];
     items = $[3];
     onOpenChange = $[4];
     onOpenChangeComplete = $[5];
-    open = $[6];
-    props = $[7];
-    t1 = $[8];
-    t2 = $[9];
+    onValueChange = $[6];
+    open = $[7];
+    props = $[8];
+    t1 = $[9];
+    t2 = $[10];
+    value = $[11];
   }
   const autoHighlight = t1 === undefined ? "always" : t1;
   const keepHighlight = t2 === undefined ? true : t2;
   const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const [settledValue, setSettledValue] = useState(value);
+  const resetting = value !== undefined && value !== settledValue;
   let t3;
-  if ($[10] !== autoHighlight || $[11] !== children || $[12] !== items || $[13] !== keepHighlight || $[14] !== props) {
-    t3 = /*#__PURE__*/_jsx(InputRefContext, {
-      value: inputRef,
+  let t4;
+  if ($[12] !== resetting || $[13] !== value) {
+    t3 = () => {
+      if (!resetting) {
+        return;
+      }
+      if (listRef.current !== null) {
+        listRef.current.scrollTop = 0;
+      }
+      setSettledValue(value);
+    };
+    t4 = [resetting, value];
+    $[12] = resetting;
+    $[13] = value;
+    $[14] = t3;
+    $[15] = t4;
+  } else {
+    t3 = $[14];
+    t4 = $[15];
+  }
+  useLayoutEffect(t3, t4);
+  let t5;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = {
+      input: inputRef,
+      list: listRef
+    };
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  let t6;
+  if ($[17] !== onValueChange) {
+    t6 = (next, details) => {
+      if (details.reason === "input-change") {
+        setSettledValue(next);
+      }
+      onValueChange?.(next, details);
+    };
+    $[17] = onValueChange;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  const t7 = resetting ? NO_ITEMS : items;
+  let t8;
+  if ($[19] !== autoHighlight || $[20] !== children || $[21] !== keepHighlight || $[22] !== props || $[23] !== t6 || $[24] !== t7 || $[25] !== value) {
+    t8 = /*#__PURE__*/_jsx(PaletteRefsContext, {
+      value: t5,
       children: /*#__PURE__*/_jsx(Autocomplete.Root, {
         ...props,
-        items: items,
+        value: value,
+        onValueChange: t6,
+        items: t7,
         inline: true,
         open: true,
         autoHighlight: autoHighlight,
@@ -85,34 +144,36 @@ export function CommandPaletteRoot(t0) {
         children: children
       })
     });
-    $[10] = autoHighlight;
-    $[11] = children;
-    $[12] = items;
-    $[13] = keepHighlight;
-    $[14] = props;
-    $[15] = t3;
+    $[19] = autoHighlight;
+    $[20] = children;
+    $[21] = keepHighlight;
+    $[22] = props;
+    $[23] = t6;
+    $[24] = t7;
+    $[25] = value;
+    $[26] = t8;
   } else {
-    t3 = $[15];
+    t8 = $[26];
   }
-  let t4;
-  if ($[16] !== defaultOpen || $[17] !== onOpenChange || $[18] !== onOpenChangeComplete || $[19] !== open || $[20] !== t3) {
-    t4 = /*#__PURE__*/_jsx(DialogRoot, {
+  let t9;
+  if ($[27] !== defaultOpen || $[28] !== onOpenChange || $[29] !== onOpenChangeComplete || $[30] !== open || $[31] !== t8) {
+    t9 = /*#__PURE__*/_jsx(DialogRoot, {
       open: open,
       defaultOpen: defaultOpen,
       onOpenChange: onOpenChange,
       onOpenChangeComplete: onOpenChangeComplete,
-      children: t3
+      children: t8
     });
-    $[16] = defaultOpen;
-    $[17] = onOpenChange;
-    $[18] = onOpenChangeComplete;
-    $[19] = open;
-    $[20] = t3;
-    $[21] = t4;
+    $[27] = defaultOpen;
+    $[28] = onOpenChange;
+    $[29] = onOpenChangeComplete;
+    $[30] = open;
+    $[31] = t8;
+    $[32] = t9;
   } else {
-    t4 = $[21];
+    t9 = $[32];
   }
-  return t4;
+  return t9;
 }
 /*
  * The dialog's surface. It hangs from a fixed line near the top instead of the middle: the list
@@ -146,7 +207,7 @@ export function CommandPalettePopup(t0) {
   const {
     t
   } = useTranslation("ui");
-  const inputRef = useContext(InputRefContext);
+  const refs = useContext(PaletteRefsContext);
   let t2;
   if ($[5] !== t) {
     t2 = t("palette.label");
@@ -155,7 +216,7 @@ export function CommandPalettePopup(t0) {
   } else {
     t2 = $[6];
   }
-  const t3 = initialFocus ?? inputRef ?? undefined;
+  const t3 = initialFocus ?? refs?.input;
   let t4;
   if ($[7] !== className || $[8] !== size) {
     t4 = withClass(clsx("top-[18vh] flex flex-col [translate:-50%_0]", SIZE[size]), className);
@@ -222,7 +283,7 @@ export function CommandPaletteInput(t0) {
   }
   const escapeHint = t1 === undefined ? true : t1;
   const mono = t2 === undefined ? false : t2;
-  const inputRef = useContext(InputRefContext);
+  const refs = useContext(PaletteRefsContext);
   let t3;
   if ($[8] !== className) {
     t3 = clsx("relative flex shrink-0 items-center gap-2 border-b border-border px-3", className);
@@ -243,7 +304,7 @@ export function CommandPaletteInput(t0) {
   } else {
     t4 = $[11];
   }
-  const t5 = inputRef ?? undefined;
+  const t5 = refs?.input;
   let t6;
   if ($[12] !== ref || $[13] !== t5) {
     t6 = mergeRefs(ref, t5);
@@ -308,55 +369,72 @@ export function CommandPaletteInput(t0) {
 }
 /* The rows. It scrolls on its own, so the field and the footer stay put. */
 export function CommandPaletteList(t0) {
-  const $ = _c(11);
+  const $ = _c(16);
   let className;
   let props;
+  let ref;
   if ($[0] !== t0) {
     ({
       className,
+      ref,
       ...props
     } = t0);
     $[0] = t0;
     $[1] = className;
     $[2] = props;
+    $[3] = ref;
   } else {
     className = $[1];
     props = $[2];
+    ref = $[3];
   }
   const {
     t
   } = useTranslation("ui");
-  let t1;
-  if ($[3] !== t) {
-    t1 = t("palette.results");
-    $[3] = t;
-    $[4] = t1;
-  } else {
-    t1 = $[4];
-  }
+  const refs = useContext(PaletteRefsContext);
+  const t1 = refs?.list;
   let t2;
-  if ($[5] !== className) {
-    t2 = withClass("max-h-[50vh] min-h-0 overflow-y-auto overscroll-contain scroll-py-1.5 not-empty:p-1.5", className);
-    $[5] = className;
+  if ($[4] !== ref || $[5] !== t1) {
+    t2 = mergeRefs(ref, t1);
+    $[4] = ref;
+    $[5] = t1;
     $[6] = t2;
   } else {
     t2 = $[6];
   }
   let t3;
-  if ($[7] !== props || $[8] !== t1 || $[9] !== t2) {
-    t3 = /*#__PURE__*/_jsx(Autocomplete.List, {
-      "aria-label": t1,
-      className: t2,
+  if ($[7] !== t) {
+    t3 = t("palette.results");
+    $[7] = t;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== className) {
+    t4 = withClass("max-h-[50vh] min-h-0 overflow-y-auto overscroll-contain scroll-py-1.5 not-empty:p-1.5", className);
+    $[9] = className;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== props || $[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
+    t5 = /*#__PURE__*/_jsx(Autocomplete.List, {
+      ref: t2,
+      "aria-label": t3,
+      className: t4,
       ...props
     });
-    $[7] = props;
-    $[8] = t1;
-    $[9] = t2;
-    $[10] = t3;
+    $[11] = props;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
   } else {
-    t3 = $[10];
+    t5 = $[15];
   }
-  return t3;
+  return t5;
 }
 /* Under the list: the keys that work here, a count, an action that leaves the palette. */
 export function CommandPaletteFooter(t0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.34.1",
+  "version": "0.35.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/RelativeTime.tsx

@@ -10,13 +10,15 @@ const TICK_MS = 30_000;
 export interface RelativeTimeProps {
     /* `null`, `undefined` or an invalid date for a moment that is not known, drawn as a dash. */
     at: Date | number | null | undefined;
+    /* Off inside a row that is the focus target itself: no tab stop of its own, and the row shows the exact time. */
+    tooltip?: boolean;
     tooltipSide?: TooltipSide;
     className?: string;
     ref?: Ref<HTMLElement>;
 }
 
 /* A moment as its age, `3m ago`, counting on while it is on screen, with the exact time on hover and on keyboard focus. */
-export function RelativeTime({ at, tooltipSide, className, ref }: RelativeTimeProps) {
+export function RelativeTime({ at, tooltip = true, tooltipSide, className, ref }: RelativeTimeProps) {
     // The formatters read the locale from a module, not from an input, so a compiled render would keep its first words.
     'use no memo';
     useFormatLocale();
@@ -28,6 +30,13 @@ export function RelativeTime({ at, tooltipSide, className, ref }: RelativeTimePr
             </span>
         );
     }
+    if (!tooltip) {
+        return (
+            <time ref={ref as Ref<HTMLTimeElement>} dateTime={new Date(at).toISOString()} className={clsx('whitespace-nowrap', className)}>
+                {formatAge(at, now)}
+            </time>
+        );
+    }
     return (
         <Tooltip label={formatDayClockWithYear(at)} side={tooltipSide}>
             {/* Text is no tab stop of its own, and a hint that only the pointer can open is lost to the keyboard. */}

package/src/command-palette/parts.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useRef, type ComponentProps, type ReactNode, type RefObject } from 'react';
+import { createContext, useContext, useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode, type RefObject } from 'react';
 import clsx from 'clsx';
 import { Search } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -11,8 +11,16 @@ import { Kbd } from '../Kbd.tsx';
 import { mergeRefs } from '../merge-refs.ts';
 import { KEY_SHORTCUTS } from '../shortcut.ts';
 
-/* The field, for the popup to put the focus in when it opens: a control before it would take it otherwise. */
-const InputRefContext = createContext<RefObject<HTMLInputElement | null> | null>(null);
+interface PaletteRefs {
+    /* For the popup to put the focus in when it opens: a control before it would take it otherwise. */
+    input: RefObject<HTMLInputElement | null>;
+    /* For the root to scroll back to the top when the app sets the query. */
+    list: RefObject<HTMLDivElement | null>;
+}
+
+const PaletteRefsContext = createContext<PaletteRefs | null>(null);
+
+const NO_ITEMS: readonly never[] = [];
 
 /* A palette asks for a few words and shows rows of one line; a search whose rows are lines of source needs the wider one. */
 const SIZE = {
@@ -44,18 +52,48 @@ export function CommandPaletteRoot<ItemValue>({
     onOpenChangeComplete,
     autoHighlight = 'always',
     keepHighlight = true,
+    value,
+    onValueChange,
     items,
     children,
     ...props
 }: CommandPaletteRootProps<ItemValue>) {
     const inputRef = useRef<HTMLInputElement>(null);
+    const listRef = useRef<HTMLDivElement>(null);
+    /*
+     * Base UI moves the highlight to the first row for a typed query only. For a query the app sets,
+     * the list is empty for one commit that is never painted: Base UI drops the highlight then and
+     * puts it on the first row of what comes back.
+     */
+    const [settledValue, setSettledValue] = useState(value);
+    const resetting = value !== undefined && value !== settledValue;
+
+    useLayoutEffect(() => {
+        if (!resetting) {
+            return;
+        }
+        if (listRef.current !== null) {
+            listRef.current.scrollTop = 0;
+        }
+        // The rows may come back only after Base UI has seen the empty list in a commit of its own.
+        // oxlint-disable-next-line react/set-state-in-effect
+        setSettledValue(value);
+    }, [resetting, value]);
+
     return (
         <DialogRoot open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} onOpenChangeComplete={onOpenChangeComplete}>
-            <InputRefContext value={inputRef}>
+            <PaletteRefsContext value={{ input: inputRef, list: listRef }}>
                 {/* Its props take a flat list or groups; only its overloads split the two, which a generic caller cannot pick between. */}
                 <Autocomplete.Root<ItemValue>
                     {...props}
-                    items={items as readonly ItemValue[] | undefined}
+                    value={value}
+                    onValueChange={(next, details) => {
+                        if (details.reason === 'input-change') {
+                            setSettledValue(next);
+                        }
+                        onValueChange?.(next, details);
+                    }}
+                    items={(resetting ? NO_ITEMS : items) as readonly ItemValue[] | undefined}
                     inline
                     open
                     autoHighlight={autoHighlight}
@@ -63,7 +101,7 @@ export function CommandPaletteRoot<ItemValue>({
                 >
                     {children}
                 </Autocomplete.Root>
-            </InputRefContext>
+            </PaletteRefsContext>
         </DialogRoot>
     );
 }
@@ -78,11 +116,11 @@ export type CommandPalettePopupProps = Omit<DialogPopupProps, 'size'> & {
  */
 export function CommandPalettePopup({ size = 'md', initialFocus, className, ...props }: CommandPalettePopupProps) {
     const { t } = useTranslation('ui');
-    const inputRef = useContext(InputRefContext);
+    const refs = useContext(PaletteRefsContext);
     return (
         <DialogPopup
             aria-label={t('palette.label')}
-            initialFocus={initialFocus ?? inputRef ?? undefined}
+            initialFocus={initialFocus ?? refs?.input}
             className={withClass(clsx('top-[18vh] flex flex-col [translate:-50%_0]', SIZE[size]), className)}
             {...props}
         />
@@ -104,12 +142,12 @@ export type CommandPaletteInputProps = Omit<ComponentProps<typeof Autocomplete.I
 
 /* The field across the top. It keeps the keys while the arrows move the highlight; a control beside it should not take the focus on a click. */
 export function CommandPaletteInput({ leading, trailing, escapeHint = true, mono = false, className, ref, ...props }: CommandPaletteInputProps) {
-    const inputRef = useContext(InputRefContext);
+    const refs = useContext(PaletteRefsContext);
     return (
         <div className={clsx('relative flex shrink-0 items-center gap-2 border-b border-border px-3', className)}>
             {leading ?? <Icon icon={Search} size={14} className="shrink-0 text-text-faint" />}
             <Autocomplete.Input
-                ref={mergeRefs(ref, inputRef ?? undefined)}
+                ref={mergeRefs(ref, refs?.input)}
                 spellCheck={false}
                 className={clsx('h-11 min-w-0 flex-1 bg-transparent text-sm text-text outline-none placeholder:text-text-faint', mono && 'font-mono text-code')}
                 {...props}
@@ -121,10 +159,12 @@ export function CommandPaletteInput({ leading, trailing, escapeHint = true, mono
 }
 
 /* The rows. It scrolls on its own, so the field and the footer stay put. */
-export function CommandPaletteList({ className, ...props }: ComponentProps<typeof Autocomplete.List>) {
+export function CommandPaletteList({ className, ref, ...props }: ComponentProps<typeof Autocomplete.List>) {
     const { t } = useTranslation('ui');
+    const refs = useContext(PaletteRefsContext);
     return (
         <Autocomplete.List
+            ref={mergeRefs(ref, refs?.list)}
             aria-label={t('palette.results')}
             className={withClass('max-h-[50vh] min-h-0 overflow-y-auto overscroll-contain scroll-py-1.5 not-empty:p-1.5', className)}
             {...props}