fix: context menu selection outline

src/components/ContextMenu.tsx

@@ -15,6 +15,7 @@ export interface ContextMenuProps
   menuTargetElement?: RefObject<HTMLElement>
   guard?: (e: globalThis.MouseEvent) => boolean
   event?: 'contextmenu' | 'mouseup'
+  callback?: (event: globalThis.MouseEvent)=> void
 }
 
 const DefaultContextMenuItems = [
@@ -29,6 +30,7 @@ export function ContextMenu({
   className,
   guard,
   event = 'contextmenu',
+  callback,
   ...props
 }: ContextMenuProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
@@ -43,6 +45,9 @@ export function ContextMenu({
   })
   const handleContextMenu = useCallback(
     (e: globalThis.MouseEvent) => {
+      if (callback) {
+         callback(e)
+      }
       if (guard && !guard(e)) return
       e.preventDefault()
       // This stopPropagation is needed in case multiple nested items use a separate context menu each,

src/components/Explorer/FileExplorer.tsx

@@ -70,7 +70,7 @@ export const FileExplorer = ({
       {rowsToRender.map((row, index, original) => {
         const key = constructPath({
           parentPath: row.parentPath,
-          name: row.name
+          name: row.name,
         })
         const renderRow: FileExplorerRender = {
           ...row,
@@ -127,18 +127,18 @@ export const FileExplorerRowElement = ({
         row.rowClicked(row.domIndex)
       }}
       draggable="true"
-      onDragOver={(event)=>{
+      onDragOver={(event) => {
         if (!row.isOpen && row.isFolder) {
           // on drag over, open!
           row.rowOpen()
         }
         event.preventDefault()
       }}
-      onDragStart={((event)=>{
-        console.log(event.target.innerText,'onDragStart')
-      })}
-      onDrop={(event)=>{
-        console.log(event.target.innerText,'onDrop')
+      onDragStart={(event) => {
+        console.log(event.target.innerText, 'onDragStart')
+      }}
+      onDrop={(event) => {
+        console.log(event.target.innerText, 'onDrop')
       }}
     >
       <div style={{ width: '0.25rem' }}></div>
@@ -158,6 +158,7 @@ export const FileExplorerRowElement = ({
         onDelete={() => {}}
         onClone={() => {}}
         onOpenInNewWindow={() => {}}
+        callback={row.rowContextMenu}
       />
     </div>
   )
@@ -169,12 +170,14 @@ function FileExplorerRowContextMenu({
   onDelete,
   onClone,
   onOpenInNewWindow,
+  callback
 }: FileExplorerRowContextMenuProps) {
   const platform = usePlatform()
   const metaKey = platform === 'macos' ? '⌘' : 'Ctrl'
   return (
     <ContextMenu
       menuTargetElement={itemRef}
+      callback={callback}
       items={[
         <ContextMenuItem
           data-testid="context-menu-rename"

src/components/Explorer/ProjectExplorer.tsx

@@ -9,8 +9,10 @@ import {
   CONTAINER_IS_SELECTED,
   STARTING_INDEX_TO_SELECT,
 } from '@src/components/Explorer/utils'
-import type { FileExplorerEntry ,
-  FileExplorerRow} from '@src/components/Explorer/utils'
+import type {
+  FileExplorerEntry,
+  FileExplorerRow,
+} from '@src/components/Explorer/utils'
 import { FileExplorerHeaderActions } from '@src/components/Explorer/FileExplorerHeaderActions'
 import { useState, useRef, useEffect } from 'react'
 import { systemIOActor } from '@src/lib/singletons'
@@ -159,6 +161,9 @@ export const ProjectExplorer = ({
             newOpenedRows[key] = true
             setOpenedRows(newOpenedRows)
           },
+          rowContextMenu: () => {
+            // NO OP
+          },
           isFake: false,
           activeIndex: activeIndex,
         }
@@ -170,8 +175,18 @@ export const ProjectExplorer = ({
       return row.render
     })
 
+    // update the callback for rowContextMenu to be the index based on rendering
+    // Gotcha: you will see if you spam the context menu you will not be able to select a new one
+    // until closing
+    requestedRowsToRender.forEach((r, index)=>{
+      r.rowContextMenu = () => {
+        setActiveIndex(index)
+      }
+    })
+
     setRowsToRender(requestedRowsToRender)
     rowsToRenderRef.current = requestedRowsToRender
+    console.log(activeIndex)
   }, [project, openedRows, fakeRow, activeIndex])
 
   // Handle clicks and keyboard presses within the global DOM level

src/components/Explorer/utils.ts

@@ -23,7 +23,7 @@ export interface FileExplorerRow extends FileExplorerEntry {
    * they are placed in the DOM as if they are real but not from the source of truth
    */
   isFake: boolean
-  activeIndex: number,
+  activeIndex: number
   rowOpen: () => void
 }
 

src/main.ts

@@ -39,7 +39,11 @@ import {
   enableMenu,
 } from '@src/menu'
 import fs from 'fs'
-import { installExtension, REDUX_DEVTOOLS, REACT_DEVELOPER_TOOLS } from 'electron-devtools-installer';
+import {
+  installExtension,
+  REDUX_DEVTOOLS,
+  REACT_DEVELOPER_TOOLS,
+} from 'electron-devtools-installer'
 
 // If we're on Windows, pull the local system TLS CAs in
 require('win-ca')
@@ -83,9 +87,11 @@ console.log('Parsed CLI args', args)
 
 app.whenReady().then(() => {
   installExtension([REDUX_DEVTOOLS, REACT_DEVELOPER_TOOLS])
-    .then(([redux, react]) => console.log(`Added Extensions:  ${redux.name}, ${react.name}`))
-    .catch((err) => console.log('An error occurred: ', err));
-});
+    .then(([redux, react]) =>
+      console.log(`Added Extensions:  ${redux.name}, ${react.name}`)
+    )
+    .catch((err) => console.log('An error occurred: ', err))
+})
 
 /// Register our application to handle all "zoo-studio:" protocols.
 const singleInstanceLock = app.requestSingleInstanceLock()