+ {icon ?? 
}
+
+ {title}
+
+ );
+ return (
+
+
+ );
+ }
+ return {logo}
;
+};
+
+/**
+ * Generate the JSX for a set of nav items. This will map the items to menus,
+ * links or generated components.
+ * @param items The nav items to map to elements.
+ * @param closeMobileMenu A function to close the mobile menu.
+ * @param generateLink The optional function used to generate link components.
+ * @returns A list of navigation item elements.
+ */
+const generateItems = (
+ items: NavItem[],
+ closeMobileMenu: () => void,
+ generateLink?: GenerateLink | null
+) =>
+ items.map((item, i) =>
+ isMenu(item) ? (
+
+
+ {
+ // When the header has a search box and the user has opened the search
+ // form then this element is overlayed over the whole page.
+ hasSearch ? (
+
+ {generateLogo(logo, generateLink)}
+
+
+ -
+ {
+ // When the header has a search box then this button is used to
+ // toggle the search box at mobile size.
+ hasSearch ? (
+
- + + + ) : null + } +
- + + +
setSearchOpen(false)}
+ >
+ ) : null
+ }
+
-
- onChange(evt.target.value)}
- placeholder={placeholder}
- ref={input}
- type="search"
- defaultValue={externallyControlled ? undefined : value}
- value={externallyControlled ? value : undefined}
- {...props}
- />
- {value && (
+ return (
+
+ );
+ }
+);
SearchBox.displayName = "SearchBox";
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 89ce52213..a4db764dc 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,7 +1,9 @@
-export { useWindowFitment } from "./useWindowFitment";
+export { useClickOutside } from "./useClickOutside";
+export { useId } from "./useId";
export { useListener } from "./useListener";
+export { useOnEscapePressed } from "./useOnEscapePressed";
export { usePrevious } from "./usePrevious";
export { useThrottle } from "./useThrottle";
-export { useId } from "./useId";
export { usePagination } from "./usePagination";
+export { useWindowFitment } from "./useWindowFitment";
export type { WindowFitment } from "./useWindowFitment";
diff --git a/src/hooks/useClickOutside.test.tsx b/src/hooks/useClickOutside.test.tsx
new file mode 100644
index 000000000..9527212a9
--- /dev/null
+++ b/src/hooks/useClickOutside.test.tsx
@@ -0,0 +1,50 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React, { PropsWithChildren } from "react";
+import { useClickOutside } from "./useClickOutside";
+
+describe("useClickOutside", () => {
+ const TestComponent = ({
+ children,
+ onClickOutside,
+ }: PropsWithChildren<{
+ onClickOutside: () => void;
+ }>) => {
+ const [wrapperRef, id] = useClickOutside
+
+ onChange(evt.target.value)}
+ placeholder={placeholder}
+ ref={(input) => {
+ internalRef.current = input;
+ // Handle both function and object refs.
+ if (typeof forwardedRef === "function") {
+ forwardedRef(input);
+ } else if (forwardedRef) {
+ forwardedRef.current = input;
+ }
+ }}
+ type="search"
+ defaultValue={externallyControlled ? undefined : value}
+ value={externallyControlled ? value : undefined}
+ {...props}
+ />
+ {value && (
+
+ )}
- )}
-
-
- );
-};
+
+
+ );
+ };
+
+ it("handles clicks outside the target", () => {
+ const onClickOutside = jest.fn();
+ render(
+ Menu
+
+
+
+ {children}
+