@adecore/ui 0.35.4 → 0.35.5

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, value, onValueChange, items, children, ...props }: CommandPaletteRootProps<ItemValue>): import("react").JSX.Element;
+export declare function CommandPaletteRoot<ItemValue>({ open, defaultOpen, onOpenChange, onOpenChangeComplete, autoHighlight, keepHighlight, highlightItemOnHover, 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, ref, ...props }: ComponentProps<typeof Autocomplete.List>): import("react").JSX.Element;
+export declare function CommandPaletteList({ className, ref, onFocus, ...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,6 @@
 import { c as _c } from "react/compiler-runtime";
 import { createContext, useContext, useLayoutEffect, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
 import clsx from 'clsx';
 import { Search } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -24,156 +25,91 @@ const SIZE = {
  * is Base UI's autocomplete, so the query, the items and their filter work as in a combobox. The
  * first row is highlighted and stays so while the pointer leaves the list, which is what Enter runs.
  */
-export function CommandPaletteRoot(t0) {
-  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,
-      defaultOpen,
-      onOpenChange,
-      onOpenChangeComplete,
-      autoHighlight: t1,
-      keepHighlight: t2,
-      value,
-      onValueChange,
-      items,
-      children,
-      ...props
-    } = t0);
-    $[0] = t0;
-    $[1] = children;
-    $[2] = defaultOpen;
-    $[3] = items;
-    $[4] = onOpenChange;
-    $[5] = onOpenChangeComplete;
-    $[6] = onValueChange;
-    $[7] = open;
-    $[8] = props;
-    $[9] = t1;
-    $[10] = t2;
-    $[11] = value;
-  } else {
-    children = $[1];
-    defaultOpen = $[2];
-    items = $[3];
-    onOpenChange = $[4];
-    onOpenChangeComplete = $[5];
-    onValueChange = $[6];
-    open = $[7];
-    props = $[8];
-    t1 = $[9];
-    t2 = $[10];
-    value = $[11];
-  }
-  const autoHighlight = t1 === undefined ? "always" : t1;
-  const keepHighlight = t2 === undefined ? true : t2;
+export function CommandPaletteRoot({
+  open,
+  defaultOpen,
+  onOpenChange,
+  onOpenChangeComplete,
+  autoHighlight = 'always',
+  keepHighlight = true,
+  highlightItemOnHover = true,
+  value,
+  onValueChange,
+  items,
+  children,
+  ...props
+}) {
   const inputRef = useRef(null);
   const listRef = useRef(null);
+  const [focusHighlight, setFocusHighlight] = useState(false);
+  /*
+   * 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;
-  let t3;
-  let t4;
-  if ($[12] !== resetting || $[13] !== value) {
-    t3 = () => {
-      if (!resetting) {
-        return;
+  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]);
+  const highlight = row => {
+    if (row.hasAttribute('data-highlighted')) {
+      return;
+    }
+    // Base UI has no imperative highlight action and disables highlighting on item focus.
+    // Enable pointer navigation just for this event when the app has disabled hover highlighting.
+    if (!highlightItemOnHover) {
+      flushSync(() => setFocusHighlight(true));
+    }
+    try {
+      row.dispatchEvent(new MouseEvent('mousemove', {
+        bubbles: true,
+        movementX: 1
+      }));
+    } finally {
+      if (!highlightItemOnHover) {
+        flushSync(() => setFocusHighlight(false));
       }
-      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,
+    }
+  };
+  return /*#__PURE__*/_jsx(DialogRoot, {
+    open: open,
+    defaultOpen: defaultOpen,
+    onOpenChange: onOpenChange,
+    onOpenChangeComplete: onOpenChangeComplete,
+    children: /*#__PURE__*/_jsx(PaletteRefsContext, {
+      value: {
+        input: inputRef,
+        list: listRef,
+        highlight
+      },
       children: /*#__PURE__*/_jsx(Autocomplete.Root, {
         ...props,
         value: value,
-        onValueChange: t6,
-        items: t7,
+        onValueChange: (next, details) => {
+          if (details.reason === 'input-change') {
+            setSettledValue(next);
+          }
+          onValueChange?.(next, details);
+        },
+        items: resetting ? NO_ITEMS : items,
         inline: true,
         open: true,
         autoHighlight: autoHighlight,
         keepHighlight: keepHighlight,
+        highlightItemOnHover: highlightItemOnHover || focusHighlight,
         children: children
       })
-    });
-    $[19] = autoHighlight;
-    $[20] = children;
-    $[21] = keepHighlight;
-    $[22] = props;
-    $[23] = t6;
-    $[24] = t7;
-    $[25] = value;
-    $[26] = t8;
-  } else {
-    t8 = $[26];
-  }
-  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: t8
-    });
-    $[27] = defaultOpen;
-    $[28] = onOpenChange;
-    $[29] = onOpenChangeComplete;
-    $[30] = open;
-    $[31] = t8;
-    $[32] = t9;
-  } else {
-    t9 = $[32];
-  }
-  return t9;
+    })
+  });
 }
 /*
  * The dialog's surface. It hangs from a fixed line near the top instead of the middle: the list
@@ -369,24 +305,28 @@ 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(16);
+  const $ = _c(21);
   let className;
+  let onFocus;
   let props;
   let ref;
   if ($[0] !== t0) {
     ({
       className,
       ref,
+      onFocus,
       ...props
     } = t0);
     $[0] = t0;
     $[1] = className;
-    $[2] = props;
-    $[3] = ref;
+    $[2] = onFocus;
+    $[3] = props;
+    $[4] = ref;
   } else {
     className = $[1];
-    props = $[2];
-    ref = $[3];
+    onFocus = $[2];
+    props = $[3];
+    ref = $[4];
   }
   const {
     t
@@ -394,47 +334,68 @@ export function CommandPaletteList(t0) {
   const refs = useContext(PaletteRefsContext);
   const t1 = refs?.list;
   let t2;
-  if ($[4] !== ref || $[5] !== t1) {
+  if ($[5] !== ref || $[6] !== t1) {
     t2 = mergeRefs(ref, t1);
-    $[4] = ref;
-    $[5] = t1;
-    $[6] = t2;
+    $[5] = ref;
+    $[6] = t1;
+    $[7] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[7];
   }
   let t3;
-  if ($[7] !== t) {
+  if ($[8] !== t) {
     t3 = t("palette.results");
-    $[7] = t;
-    $[8] = t3;
+    $[8] = t;
+    $[9] = t3;
   } else {
-    t3 = $[8];
+    t3 = $[9];
   }
   let t4;
-  if ($[9] !== className) {
+  if ($[10] !== 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;
+    $[10] = className;
+    $[11] = t4;
   } else {
-    t4 = $[10];
+    t4 = $[11];
   }
   let t5;
-  if ($[11] !== props || $[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
-    t5 = /*#__PURE__*/_jsx(Autocomplete.List, {
+  if ($[12] !== onFocus || $[13] !== refs) {
+    t5 = event => {
+      onFocus?.(event);
+      const row = event.target.closest("[role=\"option\"]");
+      if (row === null || !event.currentTarget.contains(row) || refs?.input.current == null) {
+        return;
+      }
+      refs.highlight(row);
+      refs.input.current.focus({
+        preventScroll: true
+      });
+    };
+    $[12] = onFocus;
+    $[13] = refs;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] !== props || $[16] !== t2 || $[17] !== t3 || $[18] !== t4 || $[19] !== t5) {
+    t6 = /*#__PURE__*/_jsx(Autocomplete.List, {
       ref: t2,
       "aria-label": t3,
       className: t4,
-      ...props
+      ...props,
+      onFocus: t5
     });
-    $[11] = props;
-    $[12] = t2;
-    $[13] = t3;
-    $[14] = t4;
-    $[15] = t5;
+    $[15] = props;
+    $[16] = t2;
+    $[17] = t3;
+    $[18] = t4;
+    $[19] = t5;
+    $[20] = t6;
   } else {
-    t5 = $[15];
+    t6 = $[20];
   }
-  return t5;
+  return t6;
 }
 /* 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.35.4",
+  "version": "0.35.5",
   "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/command-palette/parts.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext, useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode, type RefObject } from 'react';
+import { flushSync } from 'react-dom';
 import clsx from 'clsx';
 import { Search } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -16,6 +17,7 @@ interface PaletteRefs {
     input: RefObject<HTMLInputElement | null>;
     /* For the root to scroll back to the top when the app sets the query. */
     list: RefObject<HTMLDivElement | null>;
+    highlight(row: Element): void;
 }
 
 const PaletteRefsContext = createContext<PaletteRefs | null>(null);
@@ -52,6 +54,7 @@ export function CommandPaletteRoot<ItemValue>({
     onOpenChangeComplete,
     autoHighlight = 'always',
     keepHighlight = true,
+    highlightItemOnHover = true,
     value,
     onValueChange,
     items,
@@ -60,6 +63,7 @@ export function CommandPaletteRoot<ItemValue>({
 }: CommandPaletteRootProps<ItemValue>) {
     const inputRef = useRef<HTMLInputElement>(null);
     const listRef = useRef<HTMLDivElement>(null);
+    const [focusHighlight, setFocusHighlight] = useState(false);
     /*
      * 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
@@ -80,9 +84,27 @@ export function CommandPaletteRoot<ItemValue>({
         setSettledValue(value);
     }, [resetting, value]);
 
+    const highlight = (row: Element): void => {
+        if (row.hasAttribute('data-highlighted')) {
+            return;
+        }
+        // Base UI has no imperative highlight action and disables highlighting on item focus.
+        // Enable pointer navigation just for this event when the app has disabled hover highlighting.
+        if (!highlightItemOnHover) {
+            flushSync(() => setFocusHighlight(true));
+        }
+        try {
+            row.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, movementX: 1 }));
+        } finally {
+            if (!highlightItemOnHover) {
+                flushSync(() => setFocusHighlight(false));
+            }
+        }
+    };
+
     return (
         <DialogRoot open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} onOpenChangeComplete={onOpenChangeComplete}>
-            <PaletteRefsContext value={{ input: inputRef, list: listRef }}>
+            <PaletteRefsContext value={{ input: inputRef, list: listRef, highlight }}>
                 {/* 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}
@@ -98,6 +120,7 @@ export function CommandPaletteRoot<ItemValue>({
                     open
                     autoHighlight={autoHighlight}
                     keepHighlight={keepHighlight}
+                    highlightItemOnHover={highlightItemOnHover || focusHighlight}
                 >
                     {children}
                 </Autocomplete.Root>
@@ -159,7 +182,7 @@ 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, ref, ...props }: ComponentProps<typeof Autocomplete.List>) {
+export function CommandPaletteList({ className, ref, onFocus, ...props }: ComponentProps<typeof Autocomplete.List>) {
     const { t } = useTranslation('ui');
     const refs = useContext(PaletteRefsContext);
     return (
@@ -168,6 +191,15 @@ export function CommandPaletteList({ className, ref, ...props }: ComponentProps<
             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}
+            onFocus={(event) => {
+                onFocus?.(event);
+                const row = event.target.closest('[role="option"]');
+                if (row === null || !event.currentTarget.contains(row) || refs?.input.current == null) {
+                    return;
+                }
+                refs.highlight(row);
+                refs.input.current.focus({ preventScroll: true });
+            }}
         />
     );
 }