LG-3592: SearchResultsMenu popoverProps; footerSlot prop

.changeset/fuzzy-roses-heal.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/search-input': minor
+---
+
+SearchResultMenu now supports a footer slot prop for children rendered under the list of search results. Popover props are also now correctly passed to the Popover component.

package.json

@@ -55,7 +55,8 @@
   },
   "resolutions": {
     "caniuse-lite": "^1.0.30001135",
-    "@types/react-transition-group/@types/react": "^17.0.2"
+    "@types/react-transition-group/@types/react": "^17.0.2",
+    "@types/react": "18.2.21"
   },
   "workspaces": [
     "packages/*",

packages/search-input/src/SearchResultsMenu/SearchResultsMenu.tsx

@@ -26,60 +26,84 @@ const MAX_MENU_HEIGHT = 256;
 export const SearchResultsMenu = React.forwardRef<
   HTMLUListElement,
   SearchResultsMenuProps
->(({ children, open = false, refEl }: SearchResultsMenuProps, ref) => {
-  const { theme } = useDarkMode();
-  const { state } = useSearchInputContext();
+>(
+  (
+    {
+      children,
+      open = false,
+      refEl,
+      usePortal,
+      portalClassName,
+      portalContainer,
+      scrollContainer,
+      footerSlot,
+      ...rest
+    }: SearchResultsMenuProps,
+    ref,
+  ) => {
+    const { theme } = useDarkMode();
+    const { state } = useSearchInputContext();
 
-  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 (
-    <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}
-    >
-      {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};
-            `,
-          )}
-        >
-          {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>
+            {footerSlot}
+          </>
+        )}
+      </Popover>
+    );
+  },
+);
 
 SearchResultsMenu.displayName = 'SearchResultsMenu';

packages/search-input/src/SearchResultsMenu/SearchResultsMenu.types.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 import { PortalControlProps } from '@leafygreen-ui/popover';
@@ -7,4 +7,5 @@ export type SearchResultsMenuProps = HTMLElementProps<'ul', HTMLUListElement> &
   PortalControlProps & {
     refEl: React.RefObject<HTMLElement>;
     open?: boolean;
+    footerSlot?: ReactElement;
   };

yarn.lock

@@ -4223,7 +4223,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*":
+"@types/react@*", "@types/react@18.2.21", "@types/react@>=16", "@types/react@^18.0.0":
   version "18.2.21"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.21.tgz#774c37fd01b522d0b91aed04811b58e4e0514ed9"
   integrity sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==
@@ -4232,15 +4232,6 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@>=16", "@types/react@^18.0.0":
-  version "18.2.18"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.18.tgz#c8b233919eef1bdc294f6f34b37f9727ad677516"
-  integrity sha512-da4NTSeBv/P34xoZPhtcLkmZuJ+oYaCxHmyHzwaDQo9RQPBeXV+06gEk2FpqEcsX9XrnNLvRpVh6bdavDSjtiQ==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
 "@types/react@^17.0.2":
   version "17.0.62"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.62.tgz#2efe8ddf8533500ec44b1334dd1a97caa2f860e3"