@lumx/react 4.25.0 → 4.25.1-next.0

package/index.d.ts

@@ -1898,6 +1898,12 @@ interface ComboboxEventMap {
      * Used to control the loading message text in the live region (ComboboxState).
      */
     loadingAnnouncement: boolean;
+    /**
+     * Fired only when this option becomes the active descendant (true)
+     * or stops being the active descendant (false).
+     * Build the key with optionActiveEvent(optionId).
+     */
+    [event: OptionActiveEvent]: boolean;
 }
 /** Callbacks provided by the consumer (React/Vue) to react to combobox state changes. */
 interface ComboboxCallbacks {

package/index.js

@@ -6514,6 +6514,11 @@ function setupListbox(handle, signal, notify, options) {
   return focusNav;
 }
 
+const DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT = '80vh';
+const OPTION_ACTIVE_EVENT_PREFIX = 'optionActive:';
+const optionActiveEvent = optionId => `${OPTION_ACTIVE_EVENT_PREFIX}${optionId}`;
+const isOptionActiveEvent = event => event.startsWith(OPTION_ACTIVE_EVENT_PREFIX);
+
 /** Options for configuring the shared combobox behavior. */
 
 /**
@@ -6574,6 +6579,9 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     loadingAnnouncement: new Set()
   };
 
+  /** Per-option subscribers, keyed by optionActive:<id>. Sets are created on demand. */
+  const optionActiveSubscribers = new Map();
+
   /**
    * Last value dispatched for each event. Kept in sync so pull-based subscribers — React's
    * `useSyncExternalStore` via {@link ComboboxHandle.getSnapshot} — can read the current value
@@ -6585,8 +6593,15 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
 
   /** Notify all subscribers for a given event. */
   function notify(event, value) {
+    const previous = latestValues.activeDescendantChange ?? null;
     latestValues[event] = value;
     subscribers[event].forEach(cb => cb(value));
+
+    // Fan out to the 2 affected options only: first the previous one, then the new one.
+    if (event === 'activeDescendantChange' && previous !== value) {
+      if (previous) optionActiveSubscribers.get(optionActiveEvent(previous))?.forEach(cb => cb(false));
+      if (value) optionActiveSubscribers.get(optionActiveEvent(value))?.forEach(cb => cb(true));
+    }
   }
 
   /** Count visible (non-filtered) options. */
@@ -7003,7 +7018,20 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       };
     },
     subscribe(event, callback) {
-      subscribers[event].add(callback);
+      if (isOptionActiveEvent(event)) {
+        const optionCallback = callback;
+        const set = optionActiveSubscribers.get(event) ?? new Set();
+        optionActiveSubscribers.set(event, set);
+        set.add(optionCallback);
+        // Replay (same as open): Vue subscribes after mount and can miss the activation.
+        if (latestValues.activeDescendantChange === event.slice(OPTION_ACTIVE_EVENT_PREFIX.length)) optionCallback(true);
+        return () => {
+          set.delete(optionCallback);
+          if (!set.size) optionActiveSubscribers.delete(event);
+        };
+      }
+      const subs = subscribers[event];
+      subs.add(callback);
       // Replay current loading state to late subscribers so that framework wrappers
       // that subscribe after initial mount (e.g. async Vue watchers) don't miss the
       // initial events fired during mount.
@@ -7016,10 +7044,14 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
 
       // Cleanup function
       return () => {
-        subscribers[event].delete(callback);
+        subs.delete(callback);
       };
     },
     getSnapshot(event) {
+      if (isOptionActiveEvent(event)) {
+        // Derived value. No per-id value is stored.
+        return latestValues.activeDescendantChange === event.slice(OPTION_ACTIVE_EVENT_PREFIX.length);
+      }
       return latestValues[event];
     },
     destroy() {
@@ -7039,6 +7071,7 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       skeletonCount = 0;
       clearTimeout(loadingTimer);
       announcementSent = false;
+      optionActiveSubscribers.clear();
       // Clear all subscribers
       for (const set of Object.values(subscribers)) {
         set.clear();
@@ -9022,6 +9055,9 @@ const ComboboxOption = forwardRef((props, ref) => {
   const internalRef = useRef(null);
   const mergedRef = useMergeRefs(ref, internalRef);
   const [isFiltered, setIsFiltered] = useState(false);
+
+  // Force the tooltip open while the option is the active descendant (keyboard highlight).
+  const isActive = useComboboxEvent(optionActiveEvent(optionId), false);
   useEffect(() => {
     const element = internalRef.current;
     if (!element || !handle) return undefined;
@@ -9060,7 +9096,10 @@ const ComboboxOption = forwardRef((props, ref) => {
     handleClick: onClick,
     id: optionId,
     descriptionId,
-    tooltipProps
+    tooltipProps: tooltipProps && {
+      ...tooltipProps,
+      forceOpen: tooltipProps.forceOpen || isActive
+    }
   }, {
     Tooltip
   });
@@ -10251,8 +10290,6 @@ const ComboboxOptionSkeleton = props => {
 ComboboxOptionSkeleton.displayName = COMPONENT_NAME$1c;
 ComboboxOptionSkeleton.className = CLASSNAME$19;
 
-const DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT = '80vh';
-
 const COMPONENT_NAME$1b = 'ComboboxPopover';
 
 /**