feat(component): add autoFocusConfirmButton for confirm-modal (#7801)

close #5813

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/LakojjjzZNf6ogjOVwKE/aff35b76-9f73-4d15-b2cb-c25b03e2e2c3.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/LakojjjzZNf6ogjOVwKE/aff35b76-9f73-4d15-b2cb-c25b03e2e2c3.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/aff35b76-9f73-4d15-b2cb-c25b03e2e2c3.mp4">CleanShot 2024-08-09 at 11.25.46.mp4</video>

packages/frontend/component/src/ui/button/button.tsx

@@ -7,6 +7,7 @@ import type {
 } from 'react';
 import { cloneElement, forwardRef, useCallback } from 'react';
 
+import { useAutoFocus } from '../../hooks';
 import { Loading } from '../loading';
 import { Tooltip, type TooltipProps } from '../tooltip';
 import * as styles from './button.css';
@@ -120,12 +121,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       tooltip,
       tooltipShortcut,
       tooltipOptions,
+      autoFocus,
       onClick,
 
       ...otherProps
     },
-    ref
+    upstreamRef
   ) => {
+    const ref = useAutoFocus<HTMLButtonElement>(autoFocus);
+
     const handleClick = useCallback(
       (e: MouseEvent<HTMLButtonElement>) => {
         if (loading || disabled) return;
@@ -134,11 +138,22 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       [disabled, loading, onClick]
     );
 
+    const buttonRef = (el: HTMLButtonElement | null) => {
+      ref.current = el;
+      if (upstreamRef) {
+        if (typeof upstreamRef === 'function') {
+          upstreamRef(el);
+        } else {
+          upstreamRef.current = el;
+        }
+      }
+    };
+
     return (
       <Tooltip content={tooltip} shortcut={tooltipShortcut} {...tooltipOptions}>
         <button
           {...otherProps}
-          ref={ref}
+          ref={buttonRef}
           className={clsx(styles.button, className)}
           data-loading={loading || undefined}
           data-block={block || undefined}