non-form related components out of the component

apps/app/src/features/search/client/components/SearchForm.tsx

@@ -8,14 +8,13 @@ type Props = {
   searchKeyword: string,
   highlightedIndex: number | null,
   onChangeSearchText?: (text: string) => void,
-  onClickCloseModalButton?: () => void,
   onEnterKeyDownHandler?: () => void,
   getInputProps: GetInputProps,
 }
 
 export const SearchForm = (props: Props): JSX.Element => {
   const {
-    searchKeyword, highlightedIndex, onChangeSearchText, onClickCloseModalButton, onEnterKeyDownHandler, getInputProps,
+    searchKeyword, highlightedIndex, onChangeSearchText, onEnterKeyDownHandler, getInputProps,
   } = props;
 
   const inputRef = useRef<HTMLInputElement>(null);
@@ -26,10 +25,6 @@ export const SearchForm = (props: Props): JSX.Element => {
     }
   }, [onChangeSearchText]);
 
-  const clickCloseModalButtonHandler = useCallback(() => {
-    onClickCloseModalButton?.();
-  }, [onClickCloseModalButton]);
-
   const keyDownHandler = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
     const shouldExecuteEnterKeyDownHandler = e.key === 'Enter'
     && !e.nativeEvent.isComposing // see: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/isComposing
@@ -60,18 +55,6 @@ export const SearchForm = (props: Props): JSX.Element => {
   });
 
   return (
-    <div className="text-muted d-flex justify-content-center align-items-center">
-      <span className="material-symbols-outlined fs-4 me-3">search</span>
-
-      <input {...inputOptions} />
-
-      <button
-        type="button"
-        className="btn border-0 d-flex justify-content-center p-0"
-        onClick={clickCloseModalButtonHandler}
-      >
-        <span className="material-symbols-outlined fs-4 ms-3">close</span>
-      </button>
-    </div>
+    <input {...inputOptions} />
   );
 };

apps/app/src/features/search/client/components/SearchModal.tsx

@@ -57,14 +57,25 @@ const SearchModal = (): JSX.Element => {
             setHighlightedIndex,
           }) => (
             <div {...getRootProps({}, { suppressRefError: true })}>
-              <SearchForm
-                highlightedIndex={highlightedIndex}
-                searchKeyword={searchKeyword}
-                onChangeSearchText={changeSearchTextHandler}
-                onClickCloseModalButton={closeSearchModal}
-                onEnterKeyDownHandler={enterKeyDownHandlerWithoutSelectedItem}
-                getInputProps={getInputProps}
-              />
+
+              <div className="text-muted d-flex justify-content-center align-items-center">
+                <span className="material-symbols-outlined fs-4 me-3">search</span>
+                <SearchForm
+                  highlightedIndex={highlightedIndex}
+                  searchKeyword={searchKeyword}
+                  onChangeSearchText={changeSearchTextHandler}
+                  onEnterKeyDownHandler={enterKeyDownHandlerWithoutSelectedItem}
+                  getInputProps={getInputProps}
+                />
+
+                <button
+                  type="button"
+                  className="btn border-0 d-flex justify-content-center p-0"
+                  onClick={closeSearchModal}
+                >
+                  <span className="material-symbols-outlined fs-4 ms-3">close</span>
+                </button>
+              </div>
 
               {/* see: https://github.com/downshift-js/downshift/issues/582#issuecomment-423592531 */}
               <ul {...getMenuProps({ onMouseLeave: () => { setHighlightedIndex(-1) } })} className="list-unstyled">