code cleanliness

mongodb · Sep 18, 2023 · ae2c1dc · ae2c1dc
1 parent bb411bc
commit ae2c1dc
Showing 1 changed file with 72 additions and 61 deletions.
diff --git a/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.tsx b/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.tsx
@@ -26,69 +26,80 @@ const MAX_MENU_HEIGHT = 256;
 export const SearchResultsMenu = React.forwardRef<
   HTMLUListElement,
   SearchResultsMenuProps
->(({ children, open = false, refEl, ...rest }: SearchResultsMenuProps, ref) => {
-  const { theme } = useDarkMode();
-  const { state } = useSearchInputContext();
+>(
+  (
+    {
+      children,
+      open = false,
+      refEl,
+      usePortal,
+      portalClassName,
+      portalContainer,
+      scrollContainer,
+      ...rest
+    }: SearchResultsMenuProps,
+    ref,
+  ) => {
+    const { theme } = useDarkMode();
+    const { state } = useSearchInputContext();
 
-  // PortalControlProps
-  const { usePortal, portalClassName, portalContainer, scrollContainer } = rest;
+    const menuWidth = useMemo(
+      () => refEl.current?.clientWidth ?? 0,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [refEl, open],
+    );
 
-  const menuWidth = useMemo(
-    () => refEl.current?.clientWidth ?? 0,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [refEl, open],
-  );
+    /** The max height of the menu element */
+    const availableSpace = useAvailableSpace(refEl);
+    const maxHeightValue = !isUndefined(availableSpace)
+      ? `${Math.min(availableSpace, MAX_MENU_HEIGHT)}px`
+      : 'unset';
 
-  /** The max height of the menu element */
-  const availableSpace = useAvailableSpace(refEl);
-  const maxHeightValue = !isUndefined(availableSpace)
-    ? `${Math.min(availableSpace, MAX_MENU_HEIGHT)}px`
-    : 'unset';
-
-  return (
-    // @ts-ignore `portalClassName`, `portalContainer` and `scrollContainer` are only passed in when `usePortal` is true.
-    <Popover
-      data-testid="lg-search-input-popover"
-      spacing={spacing[2]}
-      active={open}
-      align="bottom"
-      justify="start"
-      className={cx(
-        searchResultsMenuStyles,
-        searchResultsMenuThemeStyles[theme],
-        css`
-          width: ${menuWidth}px;
-          min-width: ${menuWidth}px;
-        `,
-      )}
-      refEl={refEl}
-      usePortal={usePortal}
-      portalClassName={usePortal ? portalClassName : undefined}
-      portalContainer={usePortal ? portalContainer : null}
-      scrollContainer={usePortal ? scrollContainer : null}
-    >
-      {state === 'loading' ? (
-        <LoadingOption />
-      ) : (
-        <ul
-          role="listbox"
-          aria-live="polite"
-          aria-relevant="additions removals"
-          aria-expanded={open}
-          ref={ref}
-          className={cx(
-            searchResultsListStyles,
-            css`
-              max-height: ${maxHeightValue};
-            `,
-          )}
-          {...rest}
-        >
-          {React.Children.count(children) ? children : <EmptyOption />}
-        </ul>
-      )}
-    </Popover>
-  );
-});
+    return (
+      // @ts-ignore `portalClassName`, `portalContainer` and `scrollContainer` are only passed in when `usePortal` is true.
+      <Popover
+        data-testid="lg-search-input-popover"
+        spacing={spacing[2]}
+        active={open}
+        align="bottom"
+        justify="start"
+        className={cx(
+          searchResultsMenuStyles,
+          searchResultsMenuThemeStyles[theme],
+          css`
+            width: ${menuWidth}px;
+            min-width: ${menuWidth}px;
+          `,
+        )}
+        refEl={refEl}
+        usePortal={usePortal}
+        portalClassName={usePortal ? portalClassName : undefined}
+        portalContainer={usePortal ? portalContainer : null}
+        scrollContainer={usePortal ? scrollContainer : null}
+      >
+        {state === 'loading' ? (
+          <LoadingOption />
+        ) : (
+          <ul
+            role="listbox"
+            aria-live="polite"
+            aria-relevant="additions removals"
+            aria-expanded={open}
+            ref={ref}
+            className={cx(
+              searchResultsListStyles,
+              css`
+                max-height: ${maxHeightValue};
+              `,
+            )}
+            {...rest}
+          >
+            {React.Children.count(children) ? children : <EmptyOption />}
+          </ul>
+        )}
+      </Popover>
+    );
+  },
+);
 
 SearchResultsMenu.displayName = 'SearchResultsMenu';