feat: set VNG along with DOM focus

src/components/FileExplorer/Node.tsx

@@ -19,6 +19,7 @@ function getIconType(node: TreeNode) {
 type Props = {
   node: TreeNode
   onClick(event: React.MouseEvent<HTMLElement, MouseEvent>, node: TreeNode): void
+  onFocus(event: React.FocusEvent<HTMLElement, Element>, node: TreeNode): void
   depth: number
   expanded: boolean
   focused: boolean
@@ -37,12 +38,14 @@ export function Node({
   renderLabelText,
   style,
   onClick,
+  onFocus,
 }: Props) {
   const { compactFileTree: compact } = useConfigs().value
   return (
     <a
       href={node.url}
       onClick={event => onClick(event, node)}
+      onFocus={event => onFocus(event, node)}
       className={cx(`node-item`, { focused, disabled: node.accessDenied, expanded, compact })}
       style={{ ...style, paddingLeft: `${10 + (compact ? 10 : 20) * depth}px` }}
       title={node.path}

src/components/FileExplorer/VirtualNode.tsx

@@ -6,7 +6,7 @@ import { NodeRendererContext } from '.'
 export const VirtualNode = React.memo(function VirtualNode({
   index,
   style,
-  data: { onNodeClick, renderLabelText, renderActions, visibleNodes },
+  data: { onNodeClick, onNodeFocus, renderLabelText, renderActions, visibleNodes },
 }: Override<ListChildComponentProps, { data: NodeRendererContext }>) {
   if (!visibleNodes) return null
 
@@ -23,6 +23,7 @@ export const VirtualNode = React.memo(function VirtualNode({
       loading={loading.has(node.path)}
       expanded={expandedNodes.has(node.path)}
       onClick={onNodeClick}
+      onFocus={onNodeFocus}
       renderLabelText={renderLabelText}
       renderActions={renderActions}
     />

src/components/FileExplorer/hooks/useNodeRenderContext.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { VisibleNodes } from 'utils/VisibleNodesGenerator'
 import { NodeRendererContext } from '../index'
+import { useHandleNodeFocus } from '../useHandleNodeFocus'
 import { useNodeRenderers } from './useNodeRenderers'
 import { useHandleNodeClick } from './useOnNodeClick'
 import { useRenderLabelText } from './useRenderLabelText'
@@ -8,6 +9,7 @@ import { useRenderLabelText } from './useRenderLabelText'
 export function useNodeRenderContext(
   visibleNodes: VisibleNodes | null,
   onNodeClick: ReturnType<typeof useHandleNodeClick>,
+  onNodeFocus: ReturnType<typeof useHandleNodeFocus>,
   renderActions: ReturnType<typeof useNodeRenderers>,
   renderLabelText: ReturnType<typeof useRenderLabelText>,
 ): NodeRendererContext | null {
@@ -16,9 +18,10 @@ export function useNodeRenderContext(
       visibleNodes && {
         visibleNodes,
         onNodeClick,
+        onNodeFocus,
         renderActions,
         renderLabelText,
       },
-    [visibleNodes, onNodeClick, renderActions, renderLabelText],
+    [visibleNodes, onNodeClick, onNodeFocus, renderActions, renderLabelText],
   )
 }

src/components/FileExplorer/index.tsx

@@ -26,10 +26,12 @@ import { useVisibleNodesGeneratorMethods } from './hooks/useOnVisibleNodesGenera
 import { useRenderLabelText } from './hooks/useRenderLabelText'
 import { useVisibleNodesGenerator } from './hooks/useSetupTree'
 import { ListView } from './ListView'
+import { useHandleNodeFocus } from './useHandleNodeFocus'
 import { useVisibleNodes } from './useVisibleNodes'
 
 export type NodeRendererContext = {
   onNodeClick: (event: React.MouseEvent<HTMLElement, MouseEvent>, node: TreeNode) => void
+  onNodeFocus: (event: React.FocusEvent<HTMLElement, Element>, node: TreeNode) => void
   renderLabelText: NodeRenderer
   renderActions: NodeRenderer | undefined
   visibleNodes: VisibleNodes
@@ -56,6 +58,7 @@ export function FileExplorer({ freeze, metaData }: Props) {
   )
   const { expandTo, goTo, focusNode } = methods
   const handleNodeClick = useHandleNodeClick(methods)
+  const handleNodeFocus = useHandleNodeFocus(methods)
   const handleKeyDown = useHandleKeyDown(visibleNodes, methods, searched)
   const handleFocusSearchBar = () => focusNode(null)
 
@@ -70,6 +73,7 @@ export function FileExplorer({ freeze, metaData }: Props) {
   const nodeRendererContext = useNodeRenderContext(
     visibleNodes,
     handleNodeClick,
+    handleNodeFocus,
     renderActions,
     renderLabelText,
   )

src/components/FileExplorer/useHandleNodeFocus.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react'
+import { VisibleNodesGeneratorMethods } from './hooks/useOnVisibleNodesGeneratorReady'
+
+export function useHandleNodeFocus({ focusNode }: VisibleNodesGeneratorMethods) {
+  return React.useCallback(
+    (event: React.FocusEvent<HTMLElement, Element>, node: TreeNode) => focusNode(node),
+    [focusNode],
+  )
+}