Rename hasAutoFocusControls to autoFocus

Author: pomber

packages/mdx/dev/content/slideshow-autofocus.mdx

@@ -2,7 +2,7 @@
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
 
-<CH.Slideshow preset="https://codesandbox.io/s/w5wfe" hasAutoFocusControls>
+<CH.Slideshow preset="https://codesandbox.io/s/w5wfe" autoFocus={true}>
 
 Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 

packages/mdx/src/mdx-client/slideshow.tsx

@@ -10,7 +10,7 @@ export function Slideshow({
   code,
   codeConfig,
   editorSteps,
-  hasAutoFocusControls,
+  autoFocus,
   hasPreviewSteps,
   presetConfig,
   style,
@@ -22,16 +22,16 @@ export function Slideshow({
   codeConfig: EditorProps["codeConfig"]
   editorSteps: EditorStep[]
   hasPreviewSteps?: boolean
-  hasAutoFocusControls?: boolean
+  autoFocus?: boolean
   presetConfig?: PresetConfig
   style?: React.CSSProperties
 }) {
-  const controlsRef = React.useRef(null);
+  const controlsRef = React.useRef(null)
 
   React.useEffect(() => {
-      // Only set focus on controls input if we have configured to do so
-      hasAutoFocusControls && controlsRef.current.focus();
-  }, []);
+    // Only set focus on controls input if we have configured to do so
+    autoFocus && controlsRef.current.focus()
+  }, [])
 
   const { stepsChildren, previewChildren } =
     extractPreviewSteps(children, hasPreviewSteps)
@@ -119,6 +119,7 @@ export function Slideshow({
                 step: editorSteps[+e.target.value],
               })
             }
+            autoFocus={autoFocus}
           />
           <button
             onClick={() =>