chore(autoFocus): rename to autoPanOnNodeFocus

2025-06-05 19:37:14 +02:00
parent c44f0c6156
commit 19cd285458
14 changed files with 41 additions and 42 deletions
--- a/examples/react/src/examples/A11y/index.tsx
+++ b/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}
-              onChange={(event) => setEnablePanOnFocus(event.target.checked)}
+              checked={autoPanOnNodeFocus}
+              onChange={(event) => setAutoPanOnNodeFocus(event.target.checked)}
              className="xy-theme__checkbox"
            />
-            enablePanOnFocus
+            autoPanOnNodeFocus
          </label>
        </div>
      </Panel>
--- a/examples/svelte/src/routes/examples/a11y/+page.svelte
+++ b/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);
-	const ariaLabelConfig = $state(
-		{
+	let autoPanOnNodeFocus = $state(true);
+	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 }) =>
-			`Custom Moved selected node ${direction}. New position, x: ${x}, y: ${y}`,
+		'node.a11yDescription.ariaLiveMessage': ({
+			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
-	bind:nodes
-	bind:edges
-	enablePanOnFocus={isFocusPannable}
-	ariaLabelConfig={ariaLabelConfig}
->
+<SvelteFlow bind:nodes bind:edges {autoPanOnNodeFocus} {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>
--- a/packages/react/src/components/NodeWrapper/index.tsx
+++ b/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;
    }

--- a/packages/react/src/components/StoreUpdater/index.tsx
+++ b/packages/react/src/components/StoreUpdater/index.tsx
@@ -23,7 +23,7 @@ const reactFlowFieldsToTrack = [
  'onClickConnectStart',
  'onClickConnectEnd',
  'nodesDraggable',
-  'enablePanOnFocus',
+  'autoPanOnNodeFocus',
  'nodesConnectable',
  'nodesFocusable',
  'edgesFocusable',
--- a/packages/react/src/container/NodeRenderer/index.tsx
+++ b/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}
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/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}
--- a/packages/react/src/store/initialState.ts
+++ b/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,
--- a/packages/react/src/types/component-props.ts
+++ b/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.
--- a/packages/react/src/types/nodes.ts
+++ b/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>;
--- a/packages/react/src/types/store.ts
+++ b/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;
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/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;
--- a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
@@ -84,7 +84,7 @@
    elevateNodesOnSelect,
    elevateEdgesOnSelect,
    nodesDraggable,
-    enablePanOnFocus,
+    autoPanOnNodeFocus,
    nodesConnectable,
    elementsSelectable,
    nodesFocusable,
@@ -105,7 +105,7 @@
  // Undo scroll events, preventing viewport from shifting when nodes outside of it are focused
  function wrapperOnScroll(e: UIEvent & { currentTarget: EventTarget & HTMLDivElement }) {
    e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'auto' });
-    
+
    // Forward the event to any existing onscroll handler if needed
    if (rest.onscroll) {
      rest.onscroll(e);
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/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
--- a/packages/svelte/src/lib/store/initial-store.svelte.ts
+++ b/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;