fix(dropdown): disabled option is hoverable

CHANGELOG.en-US.md

@@ -15,6 +15,7 @@
 - Fix `n-cascader`'s `filter` prop may not get correct `path`.
 - Fix `n-date-picker` menu's quarter text isn't same having `type="quarterrange"` and `type="quarter"`, closes [#3217](https://github.com/TuSimple/naive-ui/issues/3217).
 - Fix `n-notification`'s leave animation if content height overflows screen.
+- Fix `n-dropdown`'s disabled option has hover style.
 
 ### Feats
 

CHANGELOG.zh-CN.md

@@ -15,6 +15,7 @@
 - 修复 `n-cascader` 的 `filter` 属性接收到的 `path` 可能有误
 - 修复 `n-date-picker` 在 `type="quarterrange"` 和 `type="quarter"` 时菜单季度文案不一致，关闭 [#3217](https://github.com/TuSimple/naive-ui/issues/3217)
 - 修复 `n-notification` 在内容高度超过屏幕后的关闭动画
+- 修复 `n-dropdown` 禁用的选项有 hover 样式
 
 ### Feats
 

src/dropdown/src/DropdownOption.tsx

@@ -137,6 +137,7 @@ export default defineComponent({
     }
     function handleMouseEnter (): void {
       const { parentKey, tmNode } = props
+      if (tmNode.disabled) return
       if (!mergedShowRef.value) return
       lastToggledSubmenuKeyRef.value = parentKey
       keyboardKeyRef.value = null
@@ -144,11 +145,13 @@ export default defineComponent({
     }
     function handleMouseMove (): void {
       const { tmNode } = props
+      if (tmNode.disabled) return
       if (!mergedShowRef.value) return
       if (hoverKeyRef.value === tmNode.key) return
       handleMouseEnter()
     }
     function handleMouseLeave (e: MouseEvent): void {
+      if (props.tmNode.disabled) return
       if (!mergedShowRef.value) return
       const { relatedTarget } = e
       if (

src/dropdown/src/styles/index.cssr.ts

@@ -75,33 +75,35 @@ export default cB('dropdown-menu', `
         transition: background-color .3s var(--n-bezier);
         border-radius: var(--n-border-radius);
       `),
-      cM('pending', {
-        color: 'var(--n-option-text-color-hover)'
-      }, [
-        cE('prefix, suffix', {
+      cNotM('disabled', [
+        cM('pending', {
           color: 'var(--n-option-text-color-hover)'
-        }),
-        c('&::before', 'background-color: var(--n-option-color-hover);')
-      ]),
-      cM('active', {
-        color: 'var(--n-option-text-color-active)'
-      }, [
-        cE('prefix, suffix', {
+        }, [
+          cE('prefix, suffix', {
+            color: 'var(--n-option-text-color-hover)'
+          }),
+          c('&::before', 'background-color: var(--n-option-color-hover);')
+        ]),
+        cM('active', {
           color: 'var(--n-option-text-color-active)'
-        }),
-        c('&::before', 'background-color: var(--n-option-color-active);')
+        }, [
+          cE('prefix, suffix', {
+            color: 'var(--n-option-text-color-active)'
+          }),
+          c('&::before', 'background-color: var(--n-option-color-active);')
+        ]),
+        cM('child-active', {
+          color: 'var(--n-option-text-color-child-active)'
+        }, [
+          cE('prefix, suffix', {
+            color: 'var(--n-option-text-color-child-active)'
+          })
+        ])
       ]),
       cM('disabled', {
         cursor: 'not-allowed',
         opacity: 'var(--n-option-opacity-disabled)'
       }),
-      cM('child-active', {
-        color: 'var(--n-option-text-color-child-active)'
-      }, [
-        cE('prefix, suffix', {
-          color: 'var(--n-option-text-color-child-active)'
-        })
-      ]),
       cM('group', {
         fontSize: 'calc(var(--n-font-size) - 1px)',
         color: 'var(--n-group-header-text-color)'