refactor Search to avoid forwardRef

coder · aslilac · Mar 11, 2024 · Mar 7, 2024 · Mar 7, 2024 · Mar 7, 2024
commit a10086e62e78fe6bac33a6f10207671c1beb77e9
diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx
@@ -34,7 +34,7 @@ import {
   SearchEmpty,
   SearchInput,
   searchStyles,
-} from "components/Menu/Search";
+} from "components/Search/Search";
 import { useDebouncedFunction } from "hooks/debounce";
 import type { useFilterMenu } from "./menu";
 import type { BaseOption } from "./options";
@@ -612,7 +612,7 @@ function SearchMenu<TOption extends BaseOption>({
         <SearchInput
           autoFocus
           value={query}
-          ref={searchInputRef}
+          $$ref={searchInputRef}
           onChange={(e) => {
             onQueryChange(e.target.value);
           }}

diff --git a/site/src/components/Menu/Search.tsx b/site/src/components/Menu/Search.tsx
diff --git a/site/src/components/Search/Search.tsx b/site/src/components/Search/Search.tsx
@@ -0,0 +1,110 @@
+import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import SearchOutlined from "@mui/icons-material/SearchOutlined";
+// eslint-disable-next-line no-restricted-imports -- use it to have the component prop
+import Box, { type BoxProps } from "@mui/material/Box";
+import visuallyHidden from "@mui/utils/visuallyHidden";
+import {
+  type FC,
+  type HTMLAttributes,
+  type InputHTMLAttributes,
+  type Ref,
+} from "react";
+
+interface SearchProps extends BoxProps {
+  $$ref?: Ref<unknown>;
+}
+
+export const Search: FC<SearchProps> = ({ children, $$ref, ...boxProps }) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      ref={$$ref}
+      {...boxProps}
+      css={{
+        display: "flex",
+        alignItems: "center",
+        paddingLeft: 16,
+        height: 40,
+        borderBottom: `1px solid ${theme.palette.divider}`,
+      }}
+    >
+      <SearchOutlined
+        css={{
+          fontSize: 14,
+          color: theme.palette.text.secondary,
+        }}
+      />
+      {children}
+    </Box>
+  );
+};
+
+type SearchInputProps = InputHTMLAttributes<HTMLInputElement> & {
+  label?: string;
+  $$ref?: Ref<HTMLInputElement>;
+};
+
+export const SearchInput: FC<SearchInputProps> = ({
+  label,
+  $$ref,
+  ...inputProps
+}) => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <label css={{ ...visuallyHidden }} htmlFor={inputProps.id}>
+        {label}
+      </label>
+      <input
+        ref={$$ref}
+        tabIndex={-1}
+        type="text"
+        placeholder="Search..."
+        css={{
+          height: "100%",
+          border: 0,
+          background: "none",
+          flex: 1,
+          marginLeft: 16,
+          outline: 0,
+          "&::placeholder": {
+            color: theme.palette.text.secondary,
+          },
+        }}
+        {...inputProps}
+      />
+    </>
+  );
+};
+
+export const SearchEmpty: FC<HTMLAttributes<HTMLDivElement>> = ({
+  children = "Not found",
+  ...props
+}) => {
+  const theme = useTheme();
+
+  return (
+    <div
+      css={{
+        fontSize: 13,
+        color: theme.palette.text.secondary,
+        textAlign: "center",
+        paddingTop: 8,
+        paddingBottom: 8,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const searchStyles = {
+  content: {
+    width: 320,
+    padding: 0,
+    borderRadius: 4,
+  },
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
@@ -11,7 +11,7 @@ import {
 import type { Template } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { Loader } from "components/Loader/Loader";
-import { SearchEmpty, searchStyles } from "components/Menu/Search";
+import { SearchEmpty, searchStyles } from "components/Search/Search";
 import { OverflowY } from "components/OverflowY/OverflowY";
 import {
   Popover,

diff --git a/site/src/pages/WorkspacesPage/WorkspacesSearchBox.tsx b/site/src/pages/WorkspacesPage/WorkspacesSearchBox.tsx
@@ -5,41 +5,38 @@
  * reusable this is outside of workspace dropdowns.
  */
 import {
-  type ForwardedRef,
+  type FC,
   type KeyboardEvent,
   type InputHTMLAttributes,
-  forwardRef,
+  type Ref,
   useId,
 } from "react";
-import { Search, SearchInput } from "components/Menu/Search";
+import { Search, SearchInput } from "components/Search/Search";
 
 interface SearchBoxProps extends InputHTMLAttributes<HTMLInputElement> {
   label?: string;
   value: string;
   onKeyDown?: (event: KeyboardEvent) => void;
   onValueChange: (newValue: string) => void;
+  $$ref?: Ref<HTMLInputElement>;
 }
 
-export const SearchBox = forwardRef(function SearchBox(
-  props: SearchBoxProps,
-  ref?: ForwardedRef<HTMLInputElement>,
-) {
-  const {
-    onValueChange,
-    onKeyDown,
-    label = "Search",
-    placeholder = "Search...",
-    ...attrs
-  } = props;
-
+export const SearchBox: FC<SearchBoxProps> = ({
+  onValueChange,
+  onKeyDown,
+  label = "Search",
+  placeholder = "Search...",
+  $$ref,
+  ...attrs
+}) => {
   const hookId = useId();
   const inputId = `${hookId}-${SearchBox.name}-input`;
 
   return (
     <Search>
       <SearchInput
         label={label}
-        ref={ref}
+        $$ref={$$ref}
         id={inputId}
         autoFocus
         tabIndex={0}
@@ -50,4 +47,4 @@ export const SearchBox = forwardRef(function SearchBox(
       />
     </Search>
   );
-});
+};