chore: remove hover hacks

Author: HerringtonDarkholme

src/webview/SearchSidebar/SearchResultList/Actions.tsx

@@ -15,8 +15,6 @@ const styles = stylex.create({
     listStyle: 'none',
     display: 'flex',
     flexDirection: 'row',
-    // see https://github.com/facebook/stylex/issues/373
-    width: '0',
     overflow: 'hidden',
   },
   action: {
@@ -42,12 +40,10 @@ const styles = stylex.create({
 })
 
 interface ActionsProps {
-  className: string
   match: DisplayResult
 }
 
-export function MatchActions({ className: parent, match }: ActionsProps) {
-  const { className: local } = stylex.props(styles.list)
+export function MatchActions({ match }: ActionsProps) {
   const onClick = useCallback(() => {
     acceptChangeAndRefresh({
       filePath: match.file,
@@ -63,7 +59,7 @@ export function MatchActions({ className: parent, match }: ActionsProps) {
     dismissOneMatch(match)
   }, [match])
   return (
-    <ul className={`${local} ${parent}`} role="toolbar">
+    <ul {...stylex.props(styles.list)} role="toolbar">
       {/* VSCode supports shortcut Replace (⇧⌘1)*/}
       {match.replacement ? (
         <li {...stylex.props(styles.action)} onClick={onClick}>
@@ -79,17 +75,11 @@ export function MatchActions({ className: parent, match }: ActionsProps) {
 }
 
 interface FileActionsProps {
-  className: string
   filePath: string
   hasReplace: boolean
 }
 
-export function FileActions({
-  className: parent,
-  filePath,
-  hasReplace,
-}: FileActionsProps) {
-  const { className: local } = stylex.props(styles.list)
+export function FileActions({ filePath, hasReplace }: FileActionsProps) {
   const onClick = useCallback(
     (e: MouseEvent<HTMLLIElement>) => {
       e.stopPropagation()
@@ -105,7 +95,7 @@ export function FileActions({
     [filePath],
   )
   return (
-    <ul className={`${local} ${parent}`} role="toolbar">
+    <ul {...stylex.props(styles.list)} role="toolbar">
       {/* VSCode supports shortcut Replace (⇧⌘1)*/}
       {hasReplace && (
         <li {...stylex.props(styles.action)} onClick={onClick}>

src/webview/SearchSidebar/SearchResultList/MatchList.tsx

@@ -1,6 +1,7 @@
 import { CodeBlock } from './CodeBlock'
 import { MatchActions } from './Actions'
 import type { DisplayResult } from '../../../types'
+import { useHover } from 'react-use'
 
 import { memo } from 'react'
 import * as stylex from '@stylexjs/stylex'
@@ -13,14 +14,21 @@ const styles = stylex.create({
     ':hover': {
       background: 'var( --vscode-list-hoverBackground)',
     },
-    // a hack to avoid setHover state, see also Actions.tsx
-    // https://github.com/facebook/stylex/issues/373
-    ':hover > .actions': {
-      width: 'auto',
-    },
   },
 })
 
+function OneMatch({ match }: { match: DisplayResult }) {
+  const [hoverable] = useHover(hovered => {
+    return (
+      <li {...stylex.props(styles.codeItem)}>
+        <CodeBlock match={match} />
+        {hovered && <MatchActions match={match} />}
+      </li>
+    )
+  })
+  return hoverable
+}
+
 interface CodeBlockListProps {
   matches: DisplayResult[]
 }
@@ -30,15 +38,8 @@ export const MatchList = memo(({ matches }: CodeBlockListProps) => {
       {matches?.map(match => {
         const { file, range } = match
         const { byteOffset } = range
-        return (
-          <li
-            {...stylex.props(styles.codeItem)}
-            key={file + byteOffset.start + byteOffset.end}
-          >
-            <CodeBlock match={match} />
-            <MatchActions className="actions" match={match} />
-          </li>
-        )
+        const key = file + byteOffset.start + byteOffset.end
+        return <OneMatch key={key} match={match} />
       })}
     </>
   )

src/webview/SearchSidebar/SearchResultList/TreeHeader.tsx

@@ -22,9 +22,6 @@ const styles = stylex.create({
     ':hover': {
       background: 'var( --vscode-list-hoverBackground)',
     },
-    ':hover > .actions': {
-      width: 'auto',
-    },
   },
   scrolled: {
     boxShadow: 'var(--vscode-scrollbar-shadow) 0 0 6px',
@@ -70,11 +67,7 @@ export default function TreeHeader({
       </div>
       <FileLink filePath={filePath} />
       {hovered ? (
-        <FileActions
-          className="actions"
-          filePath={filePath}
-          hasReplace={hasReplace}
-        />
+        <FileActions filePath={filePath} hasReplace={hasReplace} />
       ) : (
         <VSCodeBadge {...stylex.props(styles.badge)}>
           {matches.length}