fix(CompositeBar): improve hover detection

Author: DarkGenius

src/components/CompositeBar/CompositeBar.scss

@@ -12,4 +12,9 @@ $block: '.#{variables.$ns}composite-bar';
     & &__root-menu-item[class] {
         background-color: transparent;
     }
+
+    &__list:hover > div > div:first-child {
+        transform: translateY(0);
+        outline: solid 2px var(--g-color-line-info);
+    }
 }

src/components/CompositeBar/CompositeBar.tsx

@@ -49,6 +49,17 @@ type CompositeBarViewProps = CompositeBarProps & {
     collapseItems?: MenuItem[];
 };
 
+function getTime() {
+    const now = new Date();
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+    const seconds = String(now.getSeconds()).padStart(2, '0');
+    const milliseconds = String(now.getMilliseconds()).padStart(3, '0');
+
+    const formattedTime = `${hours}:${minutes}:${seconds}.${milliseconds}`;
+    return formattedTime;
+}
+
 const CompositeBarView: FC<CompositeBarViewProps> = ({
     type,
     items,
@@ -68,6 +79,38 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
     } = useContext(MultipleTooltipContext);
     const {compact} = useAsideHeaderContext();
 
+    const handleTransitionRun = React.useCallback<(e: TransitionEvent) => void>(
+        (e) => {
+            if (e.target) {
+                const computedStyle = getComputedStyle(e.target as HTMLElement);
+                const isHovered = computedStyle.transform !== 'none';
+                console.log('isHovered=', isHovered, getTime());
+                if (!isHovered && multipleTooltip && multipleTooltipActive) {
+                    setMultipleTooltipContextValue({active: false});
+                }
+            }
+        },
+        [multipleTooltip, multipleTooltipActive],
+    );
+
+    React.useEffect(() => {
+        if (ref.current?.refContainer.current?.node) {
+            const listNode = ref.current.refContainer.current.node as HTMLElement;
+            // this hack allow to detect hover events on element like browser css engine
+            listNode.style.setProperty('transition', 'transform 0.001ms step-start');
+            listNode.style.setProperty('transition-behavior', 'allow-discrete');
+            listNode.addEventListener('transitionrun', handleTransitionRun);
+
+            return () => {
+                listNode.removeEventListener('transitionrun', handleTransitionRun);
+                listNode.style.removeProperty('transition-behavior');
+                listNode.style.removeProperty('transition');
+            };
+        }
+
+        return;
+    }, []);
+
     React.useEffect(() => {
         function handleBlurWindow() {
             if (multipleTooltip && multipleTooltipActive) {
@@ -93,7 +136,6 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
                     activeIndex !== lastClickedItemIndex &&
                     e.clientX <= ASIDE_HEADER_COMPACT_WIDTH
                 ) {
-                    console.log(`onTooltipMouseEnter: active=true`);
                     setMultipleTooltipContextValue?.({
                         active: true,
                     });
@@ -119,7 +161,6 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
         debounce(
             () => {
                 if (multipleTooltip && multipleTooltipActive && document.hasFocus()) {
-                    console.log(`onTooltipMouseLeave: active=false`);
                     setMultipleTooltipContextValue?.({
                         active: false,
                         lastClickedItemIndex: undefined,
@@ -139,7 +180,6 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
         (itemIndex: number) =>
             debounce(
                 () => {
-                    console.log(`onMouseEnterByIndex: itemIndex=${itemIndex}`);
                     if (multipleTooltip && document.hasFocus()) {
                         let multipleTooltipActiveValue = multipleTooltipActive;
                         if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {
@@ -149,10 +189,8 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
                             activeIndex === itemIndex &&
                             multipleTooltipActive === multipleTooltipActiveValue
                         ) {
-                            console.log('onMouseEnterByIndex: skip change');
                             return;
                         }
-                        console.log(`onMouseEnterByIndex: set active=${itemIndex}`);
                         setMultipleTooltipContextValue({
                             activeIndex: itemIndex,
                             active: multipleTooltipActiveValue,
@@ -183,7 +221,6 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
                         multipleTooltip &&
                         (activeIndex !== undefined || lastClickedItemIndex !== undefined)
                     ) {
-                        console.log('onMouseLeave: deactivate tooltip');
                         setMultipleTooltipContextValue({
                             activeIndex: undefined,
                             lastClickedItemIndex: undefined,
@@ -239,6 +276,7 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
                 onMouseLeave={onTooltipMouseLeave}
             >
                 <List<CompositeBarItem>
+                    className={b('list')}
                     ref={ref}
                     items={items}
                     selectedItemIndex={type === 'menu' ? getSelectedItemIndex(items) : undefined}
@@ -249,7 +287,6 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
                     filterable={false}
                     sortable={false}
                     renderItem={(item, _isItemActive, itemIndex) => {
-                        // console.log('renderItem: ', itemIndex);
                         const itemExtraProps = isMenuItem(item) ? {item} : item;
                         const enableTooltip = isMenuItem(item)
                             ? !multipleTooltip