chore(a11y): pass labelConfig state through store updater

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

@@ -1,4 +1,4 @@
-import { MouseEvent, useMemo, useEffect } from 'react';
+import { MouseEvent } from 'react';
 import {
   ReactFlow,
   MiniMap,
@@ -9,8 +9,6 @@ import {
   Node,
   Edge,
   OnNodeDrag,
-  FitViewOptions,
-  useStore,
 } from '@xyflow/react';
 
 const onNodeDrag: OnNodeDrag = (_, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
@@ -46,22 +44,6 @@ const initialEdges: Edge[] = [
 ];
 
 const A11y = () => {
-  const labelConfig = useStore((state) => state.labelConfig);
-  const updateLabelConfig = useStore((state) => state.updateLabelConfig);
-
-  useEffect(() => {
-    console.log('Label Config:', labelConfig);
-  }, [labelConfig]);
-
-  useEffect(() => {
-    console.log('Updating labelConfig...');
-    updateLabelConfig({
-      'a11yDescription.node.default': 'Updated Node Desc.',
-      'a11yDescription.node.keyboardDisabled': 'Updated Keyboard Desc.',
-      'a11yDescription.edge.default': 'Updated Edge Desc.',
-    });
-  }, [updateLabelConfig]);
-
   return (
     <ReactFlow
       defaultNodes={initialNodes}

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

@@ -68,6 +68,7 @@ const reactFlowFieldsToTrack = [
   'debug',
   'autoPanSpeed',
   'paneClickDistance',
+  'labelConfig',
 ] as const;
 
 type ReactFlowFieldsToTrack = (typeof reactFlowFieldsToTrack)[number];

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

@@ -306,6 +306,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           onBeforeDelete={onBeforeDelete}
           paneClickDistance={paneClickDistance}
           debug={debug}
+          labelConfig={labelConfig}
         />
         <SelectionListener<NodeType, EdgeType> onSelectionChange={onSelectionChange} />
         {children}

packages/react/src/store/index.ts

@@ -371,11 +371,6 @@ const createStore = ({
       },
 
       reset: () => set({ ...getInitialState() }),
-      updateLabelConfig: (newLabelConfig: Partial<LabelConfig>) => {
-        set((state) => ({
-          labelConfig: { ...state.labelConfig, ...newLabelConfig },
-        }));
-      },
     };
   }, Object.is);
 

packages/react/src/types/store.ts

@@ -148,7 +148,7 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
 
   lib: string;
   debug: boolean;
-  labelConfig: Required<LabelConfig>;
+  labelConfig: LabelConfig;
 };
 
 export type ReactFlowActions<NodeType extends Node, EdgeType extends Edge> = {
@@ -172,7 +172,6 @@ export type ReactFlowActions<NodeType extends Node, EdgeType extends Edge> = {
   triggerEdgeChanges: (changes: EdgeChange<EdgeType>[]) => void;
   panBy: PanBy;
   setPaneClickDistance: (distance: number) => void;
-  updateLabelConfig: (newLabelConfig: Partial<LabelConfig>) => void;
 };
 
 export type ReactFlowState<NodeType extends Node = Node, EdgeType extends Edge = Edge> = ReactFlowStore<

packages/system/src/constants.ts

@@ -45,3 +45,5 @@ export const defaultLabelConfig = {
   'a11yDescription.edge.default':
     'Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.',
 };
+
+export type LabelConfig = Partial<typeof defaultLabelConfig>;

packages/system/src/types/general.ts

@@ -313,9 +313,3 @@ export type OnBeforeDeleteBase<NodeType extends NodeBase = NodeBase, EdgeType ex
   nodes: NodeType[];
   edges: EdgeType[];
 }) => Promise<boolean | { nodes: NodeType[]; edges: EdgeType[] }>;
-
-export type LabelConfig = {
-  'a11yDescription.node.default'?: string;
-  'a11yDescription.node.keyboardDisabled'?: string;
-  'a11yDescription.edge.default'?: string;
-};