chore(autoFocus): rename to autoPanOnNodeFocus

examples/react/src/examples/A11y/index.tsx

@@ -8,7 +8,6 @@ import {
   ReactFlowProvider,
   Node,
   Edge,
-  OnNodeDrag,
   AriaLabelConfig,
   Panel,
 } from '@xyflow/react';
@@ -73,12 +72,13 @@ const ariaLabelConfig: Partial<AriaLabelConfig> = {
 };
 
 const A11y = () => {
-  const [isFocusPannable, setEnablePanOnFocus] = useState(true);
+  const [autoPanOnNodeFocus, setAutoPanOnNodeFocus] = useState(true);
+
   return (
     <ReactFlow
       defaultNodes={initialNodes}
       defaultEdges={initialEdges}
-      enablePanOnFocus={isFocusPannable}
+      autoPanOnNodeFocus={autoPanOnNodeFocus}
       selectNodesOnDrag={false}
       elevateEdgesOnSelect
       elevateNodesOnSelect={false}
@@ -94,11 +94,11 @@ const A11y = () => {
             <input
               id="focusPannable"
               type="checkbox"
-              checked={isFocusPannable}
+              checked={autoPanOnNodeFocus}
-              onChange={(event) => setEnablePanOnFocus(event.target.checked)}
+              onChange={(event) => setAutoPanOnNodeFocus(event.target.checked)}
               className="xy-theme__checkbox"
             />
-            enablePanOnFocus
+            autoPanOnNodeFocus
           </label>
         </div>
       </Panel>

examples/svelte/src/routes/examples/a11y/+page.svelte

@@ -19,13 +19,19 @@
 		{ id: 'A-C', source: 'A', target: 'C' },
 		{ id: 'A-D', source: 'A', target: 'D' }
 	]);
-	let isFocusPannable = $state(true);
+	let autoPanOnNodeFocus = $state(true);
-	const ariaLabelConfig = $state(
+	const ariaLabelConfig = $state({
-		{
 		'node.a11yDescription.default': 'Svelte Custom Node Desc.',
 		'node.a11yDescription.keyboardDisabled': 'Svelte Custom Keyboard Desc.',
-		'node.a11yDescription.ariaLiveMessage': ({ direction, x, y }: { direction: string; x: number; y: number }) =>
+		'node.a11yDescription.ariaLiveMessage': ({
-			`Custom Moved selected node ${direction}. New position, x: ${x}, y: ${y}`,
+			direction,
+			x,
+			y
+		}: {
+			direction: string;
+			x: number;
+			y: number;
+		}) => `Custom Moved selected node ${direction}. New position, x: ${x}, y: ${y}`,
 		'edge.a11yDescription.default': 'Svelte Custom Edge Desc.',
 		'controls.ariaLabel': 'Svelte Custom Control Aria Label',
 		'controls.zoomIn.ariaLabel': 'Svelte Custom Zoom in',
@@ -33,30 +39,24 @@
 		// 'controls.fitView.ariaLabel': 'Svelte Custom Fit View',
 		'controls.interactive.ariaLabel': 'Svelte Custom Toggle Interactivity',
 		'minimap.ariaLabel': 'Svelte Custom Minimap'
-	}
+	});
-	);
 </script>
 
-<SvelteFlow
+<SvelteFlow bind:nodes bind:edges {autoPanOnNodeFocus} {ariaLabelConfig}>
-	bind:nodes
-	bind:edges
-	enablePanOnFocus={isFocusPannable}
-	ariaLabelConfig={ariaLabelConfig}
->
 	<Controls />
 	<Background />
 	<MiniMap />
-	  <Panel class="panel top-right">
+	<Panel class="panel top-right">
 		<div>
 			<label for="focusPannable">
 				Enable Pan on Focus
 				<input
 					id="focusPannable"
 					type="checkbox"
-					bind:checked={isFocusPannable}
+					bind:checked={autoPanOnNodeFocus}
 					class="svelte-flow__zoomonscroll"
 				/>
 			</label>
 		</div>
-  </Panel>
+	</Panel>
 </SvelteFlow>

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(
+  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, autoPanOnNodeFocus, onError } =
-    selector,
+    useStore(selector, shallow);
-    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;

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -202,7 +202,7 @@
   const onFocus = () => {
     if (
       store.disableKeyboardA11y ||
-      !store.enablePanOnFocus ||
+      !store.autoPanOnNodeFocus ||
       !nodeRef?.matches(':focus-visible')
     ) {
       return;

packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte

@@ -84,7 +84,7 @@
     elevateNodesOnSelect,
     elevateEdgesOnSelect,
     nodesDraggable,
-    enablePanOnFocus,
+    autoPanOnNodeFocus,
     nodesConnectable,
     elementsSelectable,
     nodesFocusable,

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

@@ -236,7 +236,7 @@ export type SvelteFlowProps<
      * When `true`, the viewport will pan when a node is focused.
      * @default false
      */
-    enablePanOnFocus?: boolean;
+    autoPanOnNodeFocus?: boolean;
     /**
      * Controls if all nodes should be connectable to each other
      * @default true

packages/svelte/src/lib/store/initial-store.svelte.ts

@@ -247,7 +247,6 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
     });
 
     nodesDraggable: boolean = $derived(signals.props.nodesDraggable ?? true);
-    enablePanOnFocus: boolean = $derived(signals.props.enablePanOnFocus ?? true);
     nodesConnectable: boolean = $derived(signals.props.nodesConnectable ?? true);
     elementsSelectable: boolean = $derived(signals.props.elementsSelectable ?? true);
     nodesFocusable: boolean = $derived(signals.props.nodesFocusable ?? true);
@@ -267,6 +266,7 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
     nodeDragThreshold: number = $derived(signals.props.nodeDragThreshold ?? 1);
     autoPanOnNodeDrag: boolean = $derived(signals.props.autoPanOnNodeDrag ?? true);
     autoPanOnConnect: boolean = $derived(signals.props.autoPanOnConnect ?? true);
+    autoPanOnNodeFocus: boolean = $derived(signals.props.autoPanOnNodeFocus ?? true);
 
     fitViewQueued: boolean = signals.props.fitView ?? false;
     fitViewOptions: FitViewOptions | undefined = signals.props.fitViewOptions;