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/hooks/focus-and-select.ts

@@ -0,0 +1,33 @@
+import { useLayoutEffect, useRef } from 'react';
+
+export const useAutoFocus = <T extends HTMLElement = HTMLElement>(
+  autoFocus?: boolean
+) => {
+  const ref = useRef<T | null>(null);
+
+  useLayoutEffect(() => {
+    if (ref.current && autoFocus) {
+      // to avoid clicking on something focusable(e.g MenuItem),
+      // then the input will not be focused
+      setTimeout(() => {
+        ref.current?.focus();
+      }, 0);
+    }
+  }, [autoFocus]);
+
+  return ref;
+};
+
+export const useAutoSelect = <T extends HTMLInputElement = HTMLInputElement>(
+  autoSelect?: boolean
+) => {
+  const ref = useAutoFocus<T>(autoSelect);
+
+  useLayoutEffect(() => {
+    if (ref.current && autoSelect) {
+      ref.current?.select();
+    }
+  }, [autoSelect, ref]);
+
+  return ref;
+};

packages/frontend/component/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useAutoFocus, useAutoSelect } from './focus-and-select';