@lumx/react 4.9.0-next.3 → 4.9.0-next.5

package/index.d.ts

@@ -4245,11 +4245,13 @@ interface UserBlockProps$1 extends HasClassName, HasTheme {
      * Called when the mouse enters the component.
      */
     handleMouseEnter?(): void;
+    mouseEnterProp?: string;
     /**
      * Mouse leave event handler.
      * Called when the mouse leaves the component.
      */
     handleMouseLeave?(): void;
+    mouseLeaveProp?: string;
     /**
      * Additional custom fields to display below the standard fields.
      * Only visible when size is not 'xs' or 's'.
@@ -4282,7 +4284,7 @@ interface UserBlockProps$1 extends HasClassName, HasTheme {
      */
     Avatar: (props: any) => any;
 }
-type UserBlockPropsToOverride = 'Avatar' | 'Text' | 'linkProps' | 'avatarProps';
+type UserBlockPropsToOverride = 'Avatar' | 'Text' | 'linkProps' | 'avatarProps' | 'mouseLeaveProp' | 'mouseEnterProp';
 
 /**
  * Defines the props of the component.

package/index.js

@@ -10889,6 +10889,26 @@ function createActiveItemState(callbacks, signal, initialItem) {
   };
 }
 
+/**
+ * Create a TreeWalker that iterates over elements matching a CSS selector
+ * within a container.
+ *
+ * Uses `NodeFilter.SHOW_ELEMENT` and accepts nodes that match the given
+ * selector, skipping everything else. The returned walker can be used with
+ * `nextNode()` / `previousNode()` for lazy, sequential DOM traversal.
+ *
+ * @param container The root element to walk within.
+ * @param selector CSS selector that items must match.
+ * @returns A TreeWalker scoped to the container and filtered by the selector.
+ */
+function createSelectorTreeWalker(container, selector) {
+  return document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode(node) {
+      return node.matches(selector) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+}
+
 /**
  * Create a focus navigation controller for a 1D list.
  *
@@ -10918,11 +10938,7 @@ function createListFocusNavigation(options, callbacks, signal) {
    */
   function createItemWalker(enabledOnly = true) {
     const selector = enabledOnly ? enabledItemSelector : itemSelector;
-    return document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
-      acceptNode(node) {
-        return node.matches(selector) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-      }
-    });
+    return createSelectorTreeWalker(container, selector);
   }
 
   /** Find the first enabled item in the container. */
@@ -16354,6 +16370,8 @@ const UserBlock$1 = props => {
     linkAs,
     ref,
     multipleActions,
+    mouseEnterProp = 'onMouseEnter',
+    mouseLeaveProp = 'onMouseLeave',
     name,
     nameProps,
     handleClick,
@@ -16391,17 +16409,24 @@ const UserBlock$1 = props => {
       children: field
     }, idx))
   });
+  const eventHandlers = {
+    ...(handleMouseEnter && {
+      [mouseEnterProp]: handleMouseEnter
+    }),
+    ...(handleMouseLeave && {
+      [mouseLeaveProp]: handleMouseLeave
+    })
+  };
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
+    ...eventHandlers,
     className: classnames(className, block({
       [`orientation-${orientation}`]: Boolean(orientation),
       [`size-${componentSize}`]: Boolean(componentSize),
       [`theme-${theme}`]: Boolean(theme),
       'is-clickable': isClickable
     })),
-    onMouseLeave: handleMouseLeave,
-    onMouseEnter: handleMouseEnter,
     children: [avatarProps && /*#__PURE__*/jsx(Avatar, {
       linkAs: linkAs,
       linkProps: linkProps,