From 7127fc025a490436e3b57a0cecdf947a271a631b Mon Sep 17 00:00:00 2001
From: Matei-Paul Trandafir <matei_trand@yahoo.com>
Date: Fri, 19 Apr 2024 00:58:46 +0300
Subject: [PATCH 1/2] feat: add option to set element class on hover

---
 src/event/behavior/index.ts      |  2 ++
 src/event/behavior/mouseenter.ts |  7 +++++++
 src/event/behavior/mouseleave.ts |  7 +++++++
 src/options.ts                   | 11 +++++++++++
 src/setup/setup.ts               |  1 +
 tests/setup/index.ts             |  2 +-
 6 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 src/event/behavior/mouseenter.ts
 create mode 100644 src/event/behavior/mouseleave.ts

diff --git a/src/event/behavior/index.ts b/src/event/behavior/index.ts
index 7abea8bc..9a773f70 100644
--- a/src/event/behavior/index.ts
+++ b/src/event/behavior/index.ts
@@ -1,4 +1,6 @@
 import './click'
+import './mouseenter'
+import './mouseleave'
 import './cut'
 import './keydown'
 import './keypress'
diff --git a/src/event/behavior/mouseenter.ts b/src/event/behavior/mouseenter.ts
new file mode 100644
index 00000000..0756aa0b
--- /dev/null
+++ b/src/event/behavior/mouseenter.ts
@@ -0,0 +1,7 @@
+import {behavior} from './registry'
+
+behavior.mouseenter = (_, target, instance) => {
+  const className = instance.config.hoverClass
+  if (className == null) return
+  target.classList.add(className)
+}
diff --git a/src/event/behavior/mouseleave.ts b/src/event/behavior/mouseleave.ts
new file mode 100644
index 00000000..38f2f6fc
--- /dev/null
+++ b/src/event/behavior/mouseleave.ts
@@ -0,0 +1,7 @@
+import {behavior} from './registry'
+
+behavior.mouseleave = (_, target, instance) => {
+  const className = instance.config.hoverClass
+  if (className == null) return
+  target.classList.remove(className)
+}
diff --git a/src/options.ts b/src/options.ts
index ad0ae94b..129fd418 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -108,6 +108,17 @@ export interface Options {
    */
   skipHover?: boolean
 
+  /**
+   * The `:hover` pseudo-class cannot be applied programmatically.
+   *
+   * Instead, you can choose a CSS class name to be applied to elements when they are hovered.
+   * This requires the CSS to be written/transformed such that hover styles
+   * are applied with this custom class.
+   *
+   * @default null
+   */
+  hoverClass?: string | null
+
   /**
    * Write selected data to Clipboard API when a `cut` or `copy` is triggered.
    *
diff --git a/src/setup/setup.ts b/src/setup/setup.ts
index f841e9f6..aeb22683 100644
--- a/src/setup/setup.ts
+++ b/src/setup/setup.ts
@@ -29,6 +29,7 @@ const defaultOptionsDirect: Required<Options> = {
   skipAutoClose: false,
   skipClick: false,
   skipHover: false,
+  hoverClass: null,
   writeToClipboard: false,
   advanceTimers: () => Promise.resolve(),
 }
diff --git a/tests/setup/index.ts b/tests/setup/index.ts
index 3cdb36fa..c42427d5 100644
--- a/tests/setup/index.ts
+++ b/tests/setup/index.ts
@@ -1,5 +1,5 @@
-import {getSpy} from './_mockApis'
 import {getConfig} from '@testing-library/dom'
+import {getSpy} from './_mockApis'
 import userEvent from '#src'
 import {type Instance, type UserEventApi} from '#src/setup/setup'
 import {render} from '#testHelpers'

From 83241b38be45edae989a388667c9b857aec16aa0 Mon Sep 17 00:00:00 2001
From: Matei Trandafir <catalin_trand2@yahoo.com>
Date: Thu, 17 Oct 2024 02:03:13 +0300
Subject: [PATCH 2/2] fix: focus event not emitted correctly on mousedown
 events

---
 src/system/pointer/mouse.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/system/pointer/mouse.ts b/src/system/pointer/mouse.ts
index 516a447e..81f0765a 100644
--- a/src/system/pointer/mouse.ts
+++ b/src/system/pointer/mouse.ts
@@ -115,8 +115,8 @@ export class Mouse {
     const disabled = isDisabled(target)
     const init = this.getEventInit('mousedown', keyDef.button)
     if (disabled || instance.dispatchUIEvent(target, 'mousedown', init)) {
-      this.startSelecting(instance, init.detail as number)
       focusElement(target)
+      this.startSelecting(instance, init.detail as number)
     }
     if (!disabled && getMouseEventButton(keyDef.button) === 2) {
       instance.dispatchUIEvent(