chore(autoFocus): rename to autoPanOnNodeFocus

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

@@ -29,7 +29,7 @@ export function NodeWrapper<NodeType extends Node>({
   onContextMenu,
   onDoubleClick,
   nodesDraggable,
-  enablePanOnFocus,
+  autoPanOnNodeFocus,
   elementsSelectable,
   nodesConnectable,
   nodesFocusable,
@@ -162,7 +162,7 @@ export function NodeWrapper<NodeType extends Node>({
   };
 
   const onFocus = () => {
-    if (disableKeyboardA11y || !enablePanOnFocus || !nodeRef.current?.matches(':focus-visible')) {
+    if (disableKeyboardA11y || !autoPanOnNodeFocus || !nodeRef.current?.matches(':focus-visible')) {
       return;
     }
 

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

@@ -23,7 +23,7 @@ const reactFlowFieldsToTrack = [
   'onClickConnectStart',
   'onClickConnectEnd',
   'nodesDraggable',
-  'enablePanOnFocus',
+  'autoPanOnNodeFocus',
   'nodesConnectable',
   'nodesFocusable',
   'edgesFocusable',

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

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

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

@@ -77,7 +77,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
     onlyRenderVisibleElements = false,
     selectNodesOnDrag,
     nodesDraggable,
-    enablePanOnFocus,
+    autoPanOnNodeFocus,
     nodesConnectable,
     nodesFocusable,
     nodeOrigin = defaultNodeOrigin,
@@ -262,7 +262,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           onClickConnectStart={onClickConnectStart}
           onClickConnectEnd={onClickConnectEnd}
           nodesDraggable={nodesDraggable}
-          enablePanOnFocus={enablePanOnFocus}
+          autoPanOnNodeFocus={autoPanOnNodeFocus}
           nodesConnectable={nodesConnectable}
           nodesFocusable={nodesFocusable}
           edgesFocusable={edgesFocusable}

packages/react/src/store/initialState.ts

@@ -112,7 +112,6 @@ const getInitialState = ({
     snapToGrid: false,
 
     nodesDraggable: true,
-    enablePanOnFocus: false,
     nodesConnectable: true,
     nodesFocusable: true,
     edgesFocusable: true,
@@ -135,7 +134,9 @@ const getInitialState = ({
     ariaLiveMessage: '',
     autoPanOnConnect: true,
     autoPanOnNodeDrag: true,
+    autoPanOnNodeFocus: true,
     autoPanSpeed: 15,
+
     connectionRadius: 20,
     onError: devWarn,
     isValidConnection: undefined,

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

@@ -387,7 +387,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    * When `true`, the viewport will pan when a node is focused.
    * @default false
    */
-  enablePanOnFocus?: boolean;
+  autoPanOnNodeFocus?: boolean;
   /**
    * Controls whether all nodes should be connectable or not. Individual nodes can override this
    * setting by setting their `connectable` prop.

packages/react/src/types/nodes.ts

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

packages/react/src/types/store.ts

@@ -89,7 +89,7 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
   snapGrid: SnapGrid;
 
   nodesDraggable: boolean;
-  enablePanOnFocus: boolean;
+  autoPanOnNodeFocus: boolean;
   nodesConnectable: boolean;
   nodesFocusable: boolean;
   edgesFocusable: boolean;