chore(autoPanOnNodeFocus): cleanup

packages/react/src/components/NodeWrapper/index.tsx

@@ -29,7 +29,6 @@ export function NodeWrapper<NodeType extends Node>({
   onContextMenu,
   onDoubleClick,
   nodesDraggable,
-  autoPanOnNodeFocus,
   elementsSelectable,
   nodesConnectable,
   nodesFocusable,
@@ -162,11 +161,16 @@ export function NodeWrapper<NodeType extends Node>({
   };
 
   const onFocus = () => {
-    if (disableKeyboardA11y || !autoPanOnNodeFocus || !nodeRef.current?.matches(':focus-visible')) {
+    if (disableKeyboardA11y || !nodeRef.current?.matches(':focus-visible')) {
+      return;
+    }
+
+    const { transform, width, height, autoPanOnNodeFocus, setCenter } = store.getState();
+
+    if (!autoPanOnNodeFocus) {
       return;
     }
 
-    const { transform, width, height, setCenter } = store.getState();
     const withinViewport =
       getNodesInside(new Map([[id, node]]), { x: 0, y: 0, width, height }, transform, true).length > 0;
 

packages/react/src/container/NodeRenderer/index.tsx

@@ -29,7 +29,6 @@ export type NodeRendererProps<NodeType extends Node> = Pick<
 
 const selector = (s: ReactFlowState) => ({
   nodesDraggable: s.nodesDraggable,
-  autoPanOnNodeFocus: s.autoPanOnNodeFocus,
   nodesConnectable: s.nodesConnectable,
   nodesFocusable: s.nodesFocusable,
   elementsSelectable: s.elementsSelectable,
@@ -37,8 +36,7 @@ const selector = (s: ReactFlowState) => ({
 });
 
 function NodeRendererComponent<NodeType extends Node>(props: NodeRendererProps<NodeType>) {
-  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, autoPanOnNodeFocus, onError } =
+  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector, shallow);
-    useStore(selector, shallow);
   const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements);
   const resizeObserver = useResizeObserver();
 
@@ -88,7 +86,6 @@ function NodeRendererComponent<NodeType extends Node>(props: NodeRendererProps<N
             disableKeyboardA11y={props.disableKeyboardA11y}
             resizeObserver={resizeObserver}
             nodesDraggable={nodesDraggable}
-            autoPanOnNodeFocus={autoPanOnNodeFocus}
             nodesConnectable={nodesConnectable}
             nodesFocusable={nodesFocusable}
             elementsSelectable={elementsSelectable}

packages/react/src/types/component-props.ts

@@ -385,7 +385,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
   nodesDraggable?: boolean;
   /**
    * When `true`, the viewport will pan when a node is focused.
-   * @default false
+   * @default true
    */
   autoPanOnNodeFocus?: boolean;
   /**

packages/react/src/types/nodes.ts

@@ -48,7 +48,6 @@ export type NodeWrapperProps<NodeType extends Node> = {
   nodesConnectable: boolean;
   elementsSelectable: boolean;
   nodesDraggable: boolean;
-  autoPanOnNodeFocus: boolean;
   nodesFocusable: boolean;
   onClick?: NodeMouseHandler<NodeType>;
   onDoubleClick?: NodeMouseHandler<NodeType>;

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -234,7 +234,7 @@ export type SvelteFlowProps<
     nodesDraggable?: boolean;
     /**
      * When `true`, the viewport will pan when a node is focused.
-     * @default false
+     * @default true
      */
     autoPanOnNodeFocus?: boolean;
     /**