@codecademy/brand 3.40.1-alpha.a095761d09.0 → 4.0.0-alpha.0ae245495b.0

package/dist/AppHeader/Search/SearchPane.cjs

@@ -0,0 +1,482 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_keyboardNav = require('../shared/keyboardNav.cjs');
+const require_index = require('./SearchTrackingProvider/index.cjs');
+const require_consts = require('./consts.cjs');
+const require_DefaultResults = require('./DefaultResults.cjs');
+const require_useUrlChangeDetection = require('./hooks/useUrlChangeDetection.cjs');
+const require_QuizAndHelpCenterLinks = require('./QuizAndHelpCenterLinks.cjs');
+const require_safelyRedirect = require('./safelyRedirect.cjs');
+const require_index$1 = require('./SearchWorker/index.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+let _emotion_react = require("@emotion/react");
+
+//#region src/AppHeader/Search/SearchPane.tsx
+const Form = _codecademy_gamut.Box.withComponent("form");
+const Input = _codecademy_gamut.Box.withComponent("input");
+const QueryContainer = (0, _emotion_styled.default)(_codecademy_gamut.ContentContainer)((0, _codecademy_gamut_styles.css)({
+	display: "flex",
+	width: "100%",
+	pt: 16,
+	pb: {
+		_: 0,
+		md: 24
+	},
+	px: { _: 24 }
+}));
+const SuggestionContainer = (0, _emotion_styled.default)(_codecademy_gamut.ContentContainer)((0, _codecademy_gamut_styles.css)({
+	pt: 16,
+	pb: {
+		_: 0,
+		md: 24
+	},
+	px: { _: 24 }
+}));
+const StyledInput = (0, _emotion_styled.default)(Input)((0, _codecademy_gamut_styles.css)({
+	outline: `none`,
+	"&::placeholder": { textColor: _codecademy_gamut_styles.theme.colors["text-secondary"] }
+}));
+const InlineResultLi = (0, _emotion_styled.default)(_codecademy_gamut.MenuItem)((0, _codecademy_gamut_styles.css)({
+	pl: 0,
+	py: 8,
+	fontSize: 16,
+	"&:focus-visible:after": { left: -4 }
+}));
+const InlineLoaderLi = _emotion_styled.default.li((0, _codecademy_gamut_styles.css)({
+	listStyleType: "none",
+	display: "flex",
+	gap: 12,
+	alignItems: "center"
+}));
+const SemiboldSearchIcon = (0, _emotion_styled.default)(_codecademy_gamut_icons.SearchIcon)`
+  overflow: visible !important;
+  circle,
+  path {
+    stroke-width: 2px;
+  }
+  rect {
+    transform: translate(-2px, -2px);
+    height: calc(100% + 4px);
+    width: calc(100% + 4px);
+  }
+`;
+const EllipsisBox = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
+  text-overflow: ellipsis;
+`;
+const HighlightedText = ({ suggestion: { title, segments } }) => {
+	const highlightColor = (0, _codecademy_gamut_styles.useCurrentMode)() === "dark" ? "hyper" : "yellow";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EllipsisBox, {
+		maxWidth: "calc(100vw - 128px)",
+		whiteSpace: "pre",
+		"aria-hidden": true,
+		overflow: "hidden",
+		children: segments.map((segment, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+			lineHeight: "title",
+			...segment.highlight ? {
+				bg: highlightColor,
+				fontWeight: "bold"
+			} : {},
+			children: segment.value
+		}, `${title}:${i.toString()}`))
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+		screenreader: true,
+		children: title
+	})] });
+};
+let loaderKey = 0;
+function rndLoader() {
+	const key = loaderKey++;
+	const loader = { shimmerRows: [] };
+	for (let i = 0; i < 5; i++) {
+		const row = {
+			key: `${key}:${i}`,
+			shimmers: []
+		};
+		const words = Math.ceil(Math.random() * 3);
+		for (let j = 0; j < words; j++) {
+			const width = 12 + Math.round(Math.random() * 96);
+			row.shimmers.push({
+				key: `${key}:${j}`,
+				width
+			});
+		}
+		loader.shimmerRows.push(row);
+	}
+	return loader;
+}
+const SearchPane = ({ onSearch, onTrackingClick, searchButtonRef, toggleSearch, onSearchAsYouType }) => {
+	const theme$1 = (0, _emotion_react.useTheme)();
+	const [value, setValue] = (0, react.useState)("");
+	const inputRef = (0, react.useRef)(null);
+	const [autoCompleteSuggestions, setAutoCompleteSuggestions] = (0, react.useState)([]);
+	const [searchAsYouTypeResults, setSearchAsYouTypeResults] = (0, react.useState)(null);
+	const [searchResultClicked, setSearchResultClicked] = (0, react.useState)(false);
+	const { setOnSearchAsYouTypeParams } = require_index.useSearchTrackingContext();
+	const searchAsYouTypeLoader = react.useMemo(() => searchAsYouTypeResults === null ? rndLoader() : null, [searchAsYouTypeResults]);
+	const valueTrimmed = value.trim();
+	const hasSearchEventAndResultsWithoutClick = onSearchAsYouType && searchAsYouTypeResults && !searchResultClicked;
+	const closeSearch = async () => {
+		if (hasSearchEventAndResultsWithoutClick && valueTrimmed.length > 0) {
+			const { query, searchId, resultsCount, queryLoadTime } = searchAsYouTypeResults;
+			onSearchAsYouType(query, searchId, resultsCount, queryLoadTime);
+		}
+		await toggleSearch();
+		setTimeout(() => {
+			if (searchButtonRef && searchButtonRef?.current) searchButtonRef.current?.focus();
+		}, 10);
+	};
+	const onKeyDown = require_keyboardNav.useOnEscHandler(closeSearch);
+	const onMouseDownOutside = ({ target }) => {
+		const handleOutsideClick = () => {
+			if (!document.querySelector("[data-testid=\"header-search-dropdown\"]")?.contains(target) && target !== searchButtonRef?.current) closeSearch();
+			target?.removeEventListener("mouseup", handleOutsideClick);
+		};
+		target?.addEventListener("mouseup", handleOutsideClick);
+	};
+	const navigateToSearch = (searchTerm, fromPrevSearch) => {
+		onSearch(searchTerm, fromPrevSearch);
+	};
+	const handleChange = (evt) => {
+		setValue(evt.target.value);
+		setSearchResultClicked(false);
+	};
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		if (hasSearchEventAndResultsWithoutClick) {
+			const { query, searchId, resultsCount, queryLoadTime } = searchAsYouTypeResults;
+			onSearchAsYouType(query, searchId, resultsCount, queryLoadTime);
+		}
+		navigateToSearch(value, searchAsYouTypeResults?.searchId);
+	};
+	const clearInput = () => {
+		if (hasSearchEventAndResultsWithoutClick && valueTrimmed.length > 0) {
+			const { query, searchId, resultsCount, queryLoadTime } = searchAsYouTypeResults;
+			onSearchAsYouType(query, searchId, resultsCount, queryLoadTime);
+		}
+		setValue("");
+		setAutoCompleteSuggestions([]);
+		setOnSearchAsYouTypeParams({
+			query: "",
+			searchId: "",
+			resultsCount: 0,
+			queryLoadTime: 0
+		});
+	};
+	require_useUrlChangeDetection.useUrlChangeDetection({ onUrlChange: () => {
+		if (hasSearchEventAndResultsWithoutClick && valueTrimmed.length > 0) {
+			const { query, searchId, resultsCount, queryLoadTime } = searchAsYouTypeResults;
+			onSearchAsYouType(query, searchId, resultsCount, queryLoadTime);
+		}
+		toggleSearch();
+	} });
+	(0, react.useEffect)(() => {
+		if (searchResultClicked || !onSearchAsYouType || !searchAsYouTypeResults || !valueTrimmed.length) return;
+	}, [
+		searchResultClicked,
+		searchAsYouTypeResults,
+		valueTrimmed,
+		onSearchAsYouType
+	]);
+	(0, react.useEffect)(() => {
+		inputRef.current?.focus();
+		require_index$1.searchWorker.init();
+	}, []);
+	(0, react.useEffect)(() => {
+		if (!valueTrimmed.length) {
+			setSearchAsYouTypeResults(null);
+			setAutoCompleteSuggestions([]);
+			setOnSearchAsYouTypeParams({
+				query: "",
+				searchId: "",
+				resultsCount: 0,
+				queryLoadTime: 0
+			});
+			return;
+		}
+		let cancel = false;
+		let clearAutocomplete = true;
+		let clearSearchAsYouType = true;
+		let searchEventNoResultDelay;
+		const loaderDelay = setTimeout(() => {
+			if (cancel) return;
+			if (clearAutocomplete) setAutoCompleteSuggestions([]);
+			if (clearSearchAsYouType) setSearchAsYouTypeResults(null);
+		}, 10);
+		require_index$1.searchWorker.autocomplete(valueTrimmed).then((suggestions) => {
+			clearAutocomplete = false;
+			if (cancel) return;
+			setAutoCompleteSuggestions(suggestions);
+		});
+		require_index$1.searchWorker.searchAsYouType(valueTrimmed).then((results) => {
+			clearSearchAsYouType = false;
+			if (cancel) return;
+			setSearchAsYouTypeResults(results);
+			setOnSearchAsYouTypeParams({
+				query: results.query,
+				searchId: results.searchId,
+				resultsCount: results.top.length,
+				queryLoadTime: results.queryLoadTime
+			});
+			if (onSearchAsYouType && results.top.length === 0 && !searchResultClicked) {
+				const { query, searchId, queryLoadTime } = results;
+				searchEventNoResultDelay = setTimeout(() => {
+					if (!cancel) onSearchAsYouType(query, searchId, 0, queryLoadTime);
+				}, 300);
+			}
+		});
+		return () => {
+			cancel = true;
+			clearTimeout(loaderDelay);
+			clearTimeout(searchEventNoResultDelay);
+		};
+	}, [
+		valueTrimmed,
+		onSearchAsYouType,
+		searchResultClicked,
+		setOnSearchAsYouTypeParams
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+		"aria-hidden": true,
+		bg: "shadow-secondary",
+		height: "100vh",
+		position: "fixed",
+		top: `calc(${theme$1.elements.headerHeight} + 6rem)`,
+		width: 1
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FocusTrap, {
+		onEscapeKey: closeSearch,
+		onClickOutside: onMouseDownOutside,
+		allowPageInteraction: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+			bg: "background",
+			borderColorBottom: "border-primary",
+			borderColorTop: "border-tertiary",
+			borderStyle: "solid",
+			borderWidth: "2px 0 1px",
+			"data-testid": "header-search-dropdown",
+			position: {
+				_: "fixed",
+				md: "absolute"
+			},
+			width: "100%",
+			maxHeight: {
+				_: "calc(100vh - 63px)",
+				md: "calc(100vh - 80px)"
+			},
+			overflow: "auto",
+			zIndex: 10,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+				border: "none",
+				width: "auto",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QueryContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+					alignItems: "baseline",
+					borderColor: "gray-600",
+					borderStyleBottom: "solid",
+					borderWidthBottom: "1px",
+					width: "100%",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.SearchIcon, {
+							height: {
+								_: 20,
+								md: 24
+							},
+							width: {
+								_: 20,
+								md: 24
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Form, {
+							action: "/search",
+							id: "search-form",
+							ml: 8,
+							onSubmit: handleSubmit,
+							width: "100%",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledInput, {
+								autoFocus: true,
+								background: "none",
+								border: "none",
+								color: "text",
+								fontSize: {
+									_: 20,
+									md: 26
+								},
+								fontWeight: "bold",
+								id: "header-search-bar",
+								name: "query",
+								onChange: handleChange,
+								onKeyDown: (e) => onKeyDown(e),
+								placeholder: require_consts.searchPlaceholder,
+								ref: inputRef,
+								type: "search",
+								value,
+								width: "100%",
+								autoComplete: "off"
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.IconButton, {
+							icon: _codecademy_gamut_icons.MiniDeleteIcon,
+							"aria-label": "Clear search",
+							tip: "Clear search",
+							tipProps: {
+								alignment: "bottom-center",
+								placement: "floating",
+								narrow: true,
+								zIndex: 2
+							},
+							onClick: clearInput,
+							size: "small"
+						})
+					]
+				}) })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SuggestionContainer, { children: [
+				valueTrimmed.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+						flexDirection: "column",
+						as: "ul",
+						listStyle: "none",
+						p: 0,
+						children: autoCompleteSuggestions.map((s, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InlineResultLi, {
+							tabIndex: 0,
+							onKeyDown: (evt) => {
+								if (evt.key === "Enter") {
+									setSearchResultClicked(true);
+									onTrackingClick("autocomplete_result", {
+										search_id: searchAsYouTypeResults?.searchId ?? "",
+										misc: JSON.stringify({ position: i })
+									});
+									navigateToSearch(s.title, searchAsYouTypeResults?.searchId);
+									closeSearch();
+								}
+							},
+							onClick: () => {
+								setSearchResultClicked(true);
+								onTrackingClick("autocomplete_result", {
+									search_id: searchAsYouTypeResults?.searchId ?? "",
+									misc: JSON.stringify({ position: i })
+								});
+								navigateToSearch(s.title, searchAsYouTypeResults?.searchId);
+								closeSearch();
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SemiboldSearchIcon, {
+								mb: 2,
+								size: 14,
+								strokeWidth: 8,
+								"aria-hidden": true,
+								mr: 12
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HighlightedText, { suggestion: s })]
+						}, s.title))
+					}),
+					(searchAsYouTypeResults === null || searchAsYouTypeResults.top.length > 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+						as: "h2",
+						fontSize: 20,
+						mb: 16,
+						mt: 24,
+						children: "Top results"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+						flexDirection: "column",
+						as: "ul",
+						listStyle: "none",
+						p: 0,
+						children: searchAsYouTypeResults === null ? searchAsYouTypeLoader?.shimmerRows.map((r) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InlineLoaderLi, { children: [r.shimmers.map((word) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Shimmer, {
+							height: 30,
+							py: 8,
+							width: word.width
+						}, word.key)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+							fontFamily: "accent",
+							textColor: "text-secondary",
+							fontSize: { _: 10 },
+							borderColor: "border-secondary",
+							border: 1,
+							borderRadius: "xl",
+							px: 16,
+							opacity: .1,
+							children: "\xA0"
+						})] }, r.key)) : searchAsYouTypeResults.top.map((s, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InlineResultLi, {
+							tabIndex: 0,
+							role: "link",
+							onKeyDown: (evt) => {
+								if (evt.key === "Enter") {
+									setSearchResultClicked(true);
+									onTrackingClick("search_as_you_type_result", {
+										search_id: searchAsYouTypeResults.searchId,
+										slug: s.slug,
+										...s.contentId ? { content_id: s.contentId } : {},
+										misc: JSON.stringify({ position: i })
+									});
+									closeSearch();
+									require_safelyRedirect.safelyRedirect(s.urlPath);
+								}
+							},
+							onClick: () => {
+								setSearchResultClicked(true);
+								onTrackingClick("search_as_you_type_result", {
+									search_id: searchAsYouTypeResults.searchId,
+									slug: s.slug,
+									...s.contentId ? { content_id: s.contentId } : {},
+									misc: JSON.stringify({ position: i })
+								});
+								closeSearch();
+								require_safelyRedirect.safelyRedirect(s.urlPath);
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HighlightedText, { suggestion: s }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Badge, {
+								size: "sm",
+								variant: "tertiary",
+								ml: 12,
+								children: s.type
+							})]
+						}, `${searchAsYouTypeResults.query}:${i.toString()}`))
+					})] }),
+					searchAsYouTypeResults?.top.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+						fontSize: {
+							_: 20,
+							sm: 26
+						},
+						mt: 0,
+						mb: 48,
+						children: [
+							`We couldn't find a match for `,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+								fontWeight: "bold",
+								children: `"${valueTrimmed}."`
+							}),
+							" Try another keyword, or see what our members are learning."
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Menu, {
+						border: "none",
+						variant: "popover",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DefaultResults.PopularContent, { onTrackingClick })
+					})] })
+				] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Menu, {
+					border: "none",
+					variant: "popover",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DefaultResults.PopularSearches, {
+						navigateToSearch,
+						onTrackingClick
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DefaultResults.PopularContent, { onTrackingClick })]
+				}),
+				!!searchAsYouTypeResults?.top.length && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.StrokeButton, {
+					my: 16,
+					onClick: () => {
+						onTrackingClick("view_all_results", { search_id: searchAsYouTypeResults.searchId });
+						navigateToSearch(value, searchAsYouTypeResults?.searchId);
+						closeSearch();
+					},
+					children: "View all results"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_QuizAndHelpCenterLinks.QuizAndHelpCenterLinks, {
+					onTrackingClick,
+					handleCloseDropdown: closeSearch
+				})
+			] })]
+		})
+	})] });
+};
+
+//#endregion
+exports.SearchPane = SearchPane;
+exports.SemiboldSearchIcon = SemiboldSearchIcon;