@codecademy/brand 4.0.0-alpha.fdfb3ba880.0 → 4.0.0

package/dist/AppHeader/AppHeaderElements/AppHeaderDropdown/index.js

@@ -1,94 +1,113 @@
-import { AnimatedSimpleDropdown } from "../../shared/elements.js";
-import { useAppHeaderContext } from "../AppHeaderProvider/index.js";
-import { AppHeaderMenuProvider } from "../AppHeaderMenuProvider/index.js";
-import { AppHeaderMenuNavButton } from "../AppHeaderNavButton/index.js";
-import { AppHeaderLinkSections } from "../AppHeaderLinkSections/index.js";
-import { Menu } from "@codecademy/gamut";
-import { ColorMode, css } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderDropdown/index.tsx
-const StyledLinkSection = styled(AppHeaderLinkSections)(css({
-	padding: `0.75rem 0`,
-	position: `absolute`
-}));
-const StyledDropdownMenu = styled(Menu)(css({
-	border: 1,
-	borderColor: "border-tertiary",
-	borderRadius: "lg"
-}));
-const AppHeaderDropdown = ({ action, item, spacing = "normal", standalone }) => {
-	const listRef = useRef(null);
-	const buttonRef = useRef(null);
-	const [isOpen, setIsOpen] = useState(false);
-	const { lastOpenedDropdown, setLastOpenedDropdown } = useAppHeaderContext();
-	const dropdownId = item?.text ?? item?.type;
-	const toggleIsOpen = () => setIsOpen((prev) => !prev);
-	const handleOnClick = (event) => {
-		toggleIsOpen();
-		if (!isOpen) {
-			if (action) action(event, item);
-			if (setLastOpenedDropdown) setLastOpenedDropdown(dropdownId);
-		}
-	};
-	const handleKeyboardClose = useCallback(() => {
-		setIsOpen(false);
-		buttonRef.current?.focus();
-	}, []);
-	useEffect(() => {
-		if (lastOpenedDropdown !== dropdownId && isOpen) setIsOpen(false);
-	}, [lastOpenedDropdown]);
-	useEffect(() => {
-		function handleClickOutside(event) {
-			const list = listRef?.current;
-			const button = buttonRef?.current;
-			if (isOpen && list && !list.contains(event.target) && button && !button.contains(event.target)) setIsOpen(false);
-		}
-		document.addEventListener("mousedown", handleClickOutside);
-		document.addEventListener("blur", handleClickOutside);
-		return () => {
-			document.removeEventListener("mousedown", handleClickOutside);
-			document.removeEventListener("blur", handleClickOutside);
-		};
-	}, [listRef, isOpen]);
-	const isProfileDropdown = item.type === "profile-dropdown";
-	const isGenericDropdown = ["dropdown", "resources-simple-dropdown"].includes(item.type);
-	return /* @__PURE__ */ jsxs(AppHeaderMenuProvider, {
-		handleClose: handleKeyboardClose,
-		children: [/* @__PURE__ */ jsx(AppHeaderMenuNavButton, {
-			buttonRef,
-			handleOnClick,
-			isOpen,
-			item
-		}), /* @__PURE__ */ jsx(AnimatedSimpleDropdown, {
-			isOpen,
-			style: {
-				right: isProfileDropdown ? "0.5rem" : "",
-				top: isGenericDropdown && standalone ? "2.75rem" : "3.5rem"
-			},
-			children: /* @__PURE__ */ jsx(ColorMode, {
-				mode: "light",
-				children: /* @__PURE__ */ jsx(StyledDropdownMenu, {
-					minWidth: "202px",
-					ref: listRef,
-					role: isProfileDropdown ? "menu" : void 0,
-					spacing,
-					variant: "popover",
-					width: "fit-content",
-					zIndex: 1,
-					py: spacing === "normal" ? 12 : 0,
-					children: /* @__PURE__ */ jsx(StyledLinkSection, {
-						action,
-						item,
-						isOpen
-					})
-				})
-			})
-		})]
-	});
-};
-
-//#endregion
-export { AppHeaderDropdown };
+import _styled from "@emotion/styled/base";
+import { Menu } from '@codecademy/gamut';
+import { ColorMode, css } from '@codecademy/gamut-styles';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import { AnimatedSimpleDropdown } from '../../shared';
+import { AppHeaderLinkSections } from '../AppHeaderLinkSections';
+import { AppHeaderMenuProvider } from '../AppHeaderMenuProvider';
+import { AppHeaderMenuNavButton } from '../AppHeaderNavButton';
+import { useAppHeaderContext } from '../AppHeaderProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledLinkSection = /*#__PURE__*/_styled(AppHeaderLinkSections, {
+  target: "efmcgmc1",
+  label: "StyledLinkSection"
+})(css({
+  padding: `0.75rem 0`,
+  position: `absolute`
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRHJvcGRvd24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCMEIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJEcm9wZG93bi9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBNZW51IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ29sb3JNb2RlLCBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtcbiAgQW5pbWF0ZWRTaW1wbGVEcm9wZG93bixcbiAgQXBwSGVhZGVyQWN0aW9uLFxuICBBcHBIZWFkZXJEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJMaW5rU2VjdGlvbnMgfSBmcm9tICcuLi9BcHBIZWFkZXJMaW5rU2VjdGlvbnMnO1xuaW1wb3J0IHsgQXBwSGVhZGVyTWVudVByb3ZpZGVyIH0gZnJvbSAnLi4vQXBwSGVhZGVyTWVudVByb3ZpZGVyJztcbmltcG9ydCB7IEFwcEhlYWRlck1lbnVOYXZCdXR0b24gfSBmcm9tICcuLi9BcHBIZWFkZXJOYXZCdXR0b24nO1xuaW1wb3J0IHsgdXNlQXBwSGVhZGVyQ29udGV4dCB9IGZyb20gJy4uL0FwcEhlYWRlclByb3ZpZGVyJztcblxuY29uc3QgU3R5bGVkTGlua1NlY3Rpb24gPSBzdHlsZWQoQXBwSGVhZGVyTGlua1NlY3Rpb25zKShcbiAgY3NzKHtcbiAgICBwYWRkaW5nOiBgMC43NXJlbSAwYCxcbiAgICBwb3NpdGlvbjogYGFic29sdXRlYCxcbiAgfSlcbik7XG5cbmNvbnN0IFN0eWxlZERyb3Bkb3duTWVudSA9IHN0eWxlZChNZW51KShcbiAgY3NzKHtcbiAgICBib3JkZXI6IDEsXG4gICAgYm9yZGVyQ29sb3I6ICdib3JkZXItdGVydGlhcnknLFxuICAgIGJvcmRlclJhZGl1czogJ2xnJyxcbiAgfSlcbik7XG5cbmV4cG9ydCB0eXBlIEFwcEhlYWRlckRyb3Bkb3duUHJvcHMgPSBBcHBIZWFkZXJBY3Rpb24gJlxuICBQaWNrPFJlYWN0LkNvbXBvbmVudFByb3BzPHR5cGVvZiBNZW51PiwgJ3NwYWNpbmcnPiAmIHtcbiAgICBpdGVtOiBBcHBIZWFkZXJEcm9wZG93bkl0ZW07XG4gICAgLyoqXG4gICAgICogSWYgdHJ1ZSwgdGhlIGRyb3Bkb3duIGlzIGJlaW5nIHJlbmRlcmVkIGFzIGEgc3RhbmRhbG9uZSBjb21wb25lbnQsIHJhdGhlciB0aGFuXG4gICAgICogcGFydCBvZiB0aGUgZ2xvYmFsIGhlYWRlci5cbiAgICAgKi9cbiAgICBzdGFuZGFsb25lPzogYm9vbGVhbjtcbiAgfTtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlckRyb3Bkb3duOiBSZWFjdC5GQzxBcHBIZWFkZXJEcm9wZG93blByb3BzPiA9ICh7XG4gIGFjdGlvbixcbiAgaXRlbSxcbiAgc3BhY2luZyA9ICdub3JtYWwnLFxuICBzdGFuZGFsb25lLFxufSkgPT4ge1xuICBjb25zdCBsaXN0UmVmID0gdXNlUmVmPEhUTUxVTGlzdEVsZW1lbnQ+KG51bGwpO1xuICBjb25zdCBidXR0b25SZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KG51bGwpO1xuXG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgbGFzdE9wZW5lZERyb3Bkb3duLCBzZXRMYXN0T3BlbmVkRHJvcGRvd24gfSA9IHVzZUFwcEhlYWRlckNvbnRleHQoKTtcblxuICBjb25zdCBkcm9wZG93bklkID0gaXRlbT8udGV4dCA/PyBpdGVtPy50eXBlO1xuXG4gIGNvbnN0IHRvZ2dsZUlzT3BlbiA9ICgpID0+IHNldElzT3BlbigocHJldikgPT4gIXByZXYpO1xuXG4gIGNvbnN0IGhhbmRsZU9uQ2xpY2sgPSAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICB0b2dnbGVJc09wZW4oKTtcbiAgICBpZiAoIWlzT3Blbikge1xuICAgICAgaWYgKGFjdGlvbikgYWN0aW9uKGV2ZW50LCBpdGVtKTtcbiAgICAgIGlmIChzZXRMYXN0T3BlbmVkRHJvcGRvd24pIHtcbiAgICAgICAgc2V0TGFzdE9wZW5lZERyb3Bkb3duKGRyb3Bkb3duSWQpO1xuICAgICAgfVxuICAgIH1cbiAgfTtcblxuICBjb25zdCBoYW5kbGVLZXlib2FyZENsb3NlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgYnV0dG9uUmVmLmN1cnJlbnQ/LmZvY3VzKCk7XG4gIH0sIFtdKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChsYXN0T3BlbmVkRHJvcGRvd24gIT09IGRyb3Bkb3duSWQgJiYgaXNPcGVuKSB7XG4gICAgICBzZXRJc09wZW4oZmFsc2UpO1xuICAgIH1cbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgcmVhY3QtaG9va3MvZXhoYXVzdGl2ZS1kZXBzXG4gIH0sIFtsYXN0T3BlbmVkRHJvcGRvd25dKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGZ1bmN0aW9uIGhhbmRsZUNsaWNrT3V0c2lkZShldmVudDogTW91c2VFdmVudCB8IEV2ZW50KSB7XG4gICAgICBjb25zdCBsaXN0ID0gbGlzdFJlZj8uY3VycmVudDtcbiAgICAgIGNvbnN0IGJ1dHRvbiA9IGJ1dHRvblJlZj8uY3VycmVudDtcbiAgICAgIGlmIChcbiAgICAgICAgaXNPcGVuICYmXG4gICAgICAgIGxpc3QgJiZcbiAgICAgICAgIWxpc3QuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpICYmXG4gICAgICAgIGJ1dHRvbiAmJlxuICAgICAgICAhYnV0dG9uLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKVxuICAgICAgKSB7XG4gICAgICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2JsdXInLCBoYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH07XG4gIH0sIFtsaXN0UmVmLCBpc09wZW5dKTtcblxuICBjb25zdCBpc1Byb2ZpbGVEcm9wZG93biA9IGl0ZW0udHlwZSA9PT0gJ3Byb2ZpbGUtZHJvcGRvd24nO1xuICBjb25zdCBpc0dlbmVyaWNEcm9wZG93biA9IFsnZHJvcGRvd24nLCAncmVzb3VyY2VzLXNpbXBsZS1kcm9wZG93biddLmluY2x1ZGVzKFxuICAgIGl0ZW0udHlwZVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEFwcEhlYWRlck1lbnVQcm92aWRlciBoYW5kbGVDbG9zZT17aGFuZGxlS2V5Ym9hcmRDbG9zZX0+XG4gICAgICA8QXBwSGVhZGVyTWVudU5hdkJ1dHRvblxuICAgICAgICBidXR0b25SZWY9e2J1dHRvblJlZn1cbiAgICAgICAgaGFuZGxlT25DbGljaz17aGFuZGxlT25DbGlja31cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIGl0ZW09e2l0ZW19XG4gICAgICAvPlxuICAgICAgPEFuaW1hdGVkU2ltcGxlRHJvcGRvd25cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBnYW11dC9uby1pbmxpbmUtc3R5bGVcbiAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICByaWdodDogaXNQcm9maWxlRHJvcGRvd24gPyAnMC41cmVtJyA6ICcnLFxuICAgICAgICAgIHRvcDogaXNHZW5lcmljRHJvcGRvd24gJiYgc3RhbmRhbG9uZSA/ICcyLjc1cmVtJyA6ICczLjVyZW0nLFxuICAgICAgICB9fVxuICAgICAgPlxuICAgICAgICA8Q29sb3JNb2RlIG1vZGU9XCJsaWdodFwiPlxuICAgICAgICAgIDxTdHlsZWREcm9wZG93bk1lbnVcbiAgICAgICAgICAgIG1pbldpZHRoPVwiMjAycHhcIlxuICAgICAgICAgICAgcmVmPXtsaXN0UmVmfVxuICAgICAgICAgICAgcm9sZT17aXNQcm9maWxlRHJvcGRvd24gPyAnbWVudScgOiB1bmRlZmluZWR9XG4gICAgICAgICAgICBzcGFjaW5nPXtzcGFjaW5nfVxuICAgICAgICAgICAgdmFyaWFudD1cInBvcG92ZXJcIlxuICAgICAgICAgICAgd2lkdGg9XCJmaXQtY29udGVudFwiXG4gICAgICAgICAgICB6SW5kZXg9ezF9XG4gICAgICAgICAgICBweT17c3BhY2luZyA9PT0gJ25vcm1hbCcgPyAxMiA6IDB9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPFN0eWxlZExpbmtTZWN0aW9uIGFjdGlvbj17YWN0aW9ufSBpdGVtPXtpdGVtfSBpc09wZW49e2lzT3Blbn0gLz5cbiAgICAgICAgICA8L1N0eWxlZERyb3Bkb3duTWVudT5cbiAgICAgICAgPC9Db2xvck1vZGU+XG4gICAgICA8L0FuaW1hdGVkU2ltcGxlRHJvcGRvd24+XG4gICAgPC9BcHBIZWFkZXJNZW51UHJvdmlkZXI+XG4gICk7XG59O1xuIl19 */");
+const StyledDropdownMenu = /*#__PURE__*/_styled(Menu, {
+  target: "efmcgmc0",
+  label: "StyledDropdownMenu"
+})(css({
+  border: 1,
+  borderColor: 'border-tertiary',
+  borderRadius: 'lg'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRHJvcGRvd24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVCMkIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJEcm9wZG93bi9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBNZW51IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ29sb3JNb2RlLCBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtcbiAgQW5pbWF0ZWRTaW1wbGVEcm9wZG93bixcbiAgQXBwSGVhZGVyQWN0aW9uLFxuICBBcHBIZWFkZXJEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJMaW5rU2VjdGlvbnMgfSBmcm9tICcuLi9BcHBIZWFkZXJMaW5rU2VjdGlvbnMnO1xuaW1wb3J0IHsgQXBwSGVhZGVyTWVudVByb3ZpZGVyIH0gZnJvbSAnLi4vQXBwSGVhZGVyTWVudVByb3ZpZGVyJztcbmltcG9ydCB7IEFwcEhlYWRlck1lbnVOYXZCdXR0b24gfSBmcm9tICcuLi9BcHBIZWFkZXJOYXZCdXR0b24nO1xuaW1wb3J0IHsgdXNlQXBwSGVhZGVyQ29udGV4dCB9IGZyb20gJy4uL0FwcEhlYWRlclByb3ZpZGVyJztcblxuY29uc3QgU3R5bGVkTGlua1NlY3Rpb24gPSBzdHlsZWQoQXBwSGVhZGVyTGlua1NlY3Rpb25zKShcbiAgY3NzKHtcbiAgICBwYWRkaW5nOiBgMC43NXJlbSAwYCxcbiAgICBwb3NpdGlvbjogYGFic29sdXRlYCxcbiAgfSlcbik7XG5cbmNvbnN0IFN0eWxlZERyb3Bkb3duTWVudSA9IHN0eWxlZChNZW51KShcbiAgY3NzKHtcbiAgICBib3JkZXI6IDEsXG4gICAgYm9yZGVyQ29sb3I6ICdib3JkZXItdGVydGlhcnknLFxuICAgIGJvcmRlclJhZGl1czogJ2xnJyxcbiAgfSlcbik7XG5cbmV4cG9ydCB0eXBlIEFwcEhlYWRlckRyb3Bkb3duUHJvcHMgPSBBcHBIZWFkZXJBY3Rpb24gJlxuICBQaWNrPFJlYWN0LkNvbXBvbmVudFByb3BzPHR5cGVvZiBNZW51PiwgJ3NwYWNpbmcnPiAmIHtcbiAgICBpdGVtOiBBcHBIZWFkZXJEcm9wZG93bkl0ZW07XG4gICAgLyoqXG4gICAgICogSWYgdHJ1ZSwgdGhlIGRyb3Bkb3duIGlzIGJlaW5nIHJlbmRlcmVkIGFzIGEgc3RhbmRhbG9uZSBjb21wb25lbnQsIHJhdGhlciB0aGFuXG4gICAgICogcGFydCBvZiB0aGUgZ2xvYmFsIGhlYWRlci5cbiAgICAgKi9cbiAgICBzdGFuZGFsb25lPzogYm9vbGVhbjtcbiAgfTtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlckRyb3Bkb3duOiBSZWFjdC5GQzxBcHBIZWFkZXJEcm9wZG93blByb3BzPiA9ICh7XG4gIGFjdGlvbixcbiAgaXRlbSxcbiAgc3BhY2luZyA9ICdub3JtYWwnLFxuICBzdGFuZGFsb25lLFxufSkgPT4ge1xuICBjb25zdCBsaXN0UmVmID0gdXNlUmVmPEhUTUxVTGlzdEVsZW1lbnQ+KG51bGwpO1xuICBjb25zdCBidXR0b25SZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KG51bGwpO1xuXG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgbGFzdE9wZW5lZERyb3Bkb3duLCBzZXRMYXN0T3BlbmVkRHJvcGRvd24gfSA9IHVzZUFwcEhlYWRlckNvbnRleHQoKTtcblxuICBjb25zdCBkcm9wZG93bklkID0gaXRlbT8udGV4dCA/PyBpdGVtPy50eXBlO1xuXG4gIGNvbnN0IHRvZ2dsZUlzT3BlbiA9ICgpID0+IHNldElzT3BlbigocHJldikgPT4gIXByZXYpO1xuXG4gIGNvbnN0IGhhbmRsZU9uQ2xpY2sgPSAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICB0b2dnbGVJc09wZW4oKTtcbiAgICBpZiAoIWlzT3Blbikge1xuICAgICAgaWYgKGFjdGlvbikgYWN0aW9uKGV2ZW50LCBpdGVtKTtcbiAgICAgIGlmIChzZXRMYXN0T3BlbmVkRHJvcGRvd24pIHtcbiAgICAgICAgc2V0TGFzdE9wZW5lZERyb3Bkb3duKGRyb3Bkb3duSWQpO1xuICAgICAgfVxuICAgIH1cbiAgfTtcblxuICBjb25zdCBoYW5kbGVLZXlib2FyZENsb3NlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgYnV0dG9uUmVmLmN1cnJlbnQ/LmZvY3VzKCk7XG4gIH0sIFtdKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChsYXN0T3BlbmVkRHJvcGRvd24gIT09IGRyb3Bkb3duSWQgJiYgaXNPcGVuKSB7XG4gICAgICBzZXRJc09wZW4oZmFsc2UpO1xuICAgIH1cbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgcmVhY3QtaG9va3MvZXhoYXVzdGl2ZS1kZXBzXG4gIH0sIFtsYXN0T3BlbmVkRHJvcGRvd25dKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGZ1bmN0aW9uIGhhbmRsZUNsaWNrT3V0c2lkZShldmVudDogTW91c2VFdmVudCB8IEV2ZW50KSB7XG4gICAgICBjb25zdCBsaXN0ID0gbGlzdFJlZj8uY3VycmVudDtcbiAgICAgIGNvbnN0IGJ1dHRvbiA9IGJ1dHRvblJlZj8uY3VycmVudDtcbiAgICAgIGlmIChcbiAgICAgICAgaXNPcGVuICYmXG4gICAgICAgIGxpc3QgJiZcbiAgICAgICAgIWxpc3QuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpICYmXG4gICAgICAgIGJ1dHRvbiAmJlxuICAgICAgICAhYnV0dG9uLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKVxuICAgICAgKSB7XG4gICAgICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2JsdXInLCBoYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH07XG4gIH0sIFtsaXN0UmVmLCBpc09wZW5dKTtcblxuICBjb25zdCBpc1Byb2ZpbGVEcm9wZG93biA9IGl0ZW0udHlwZSA9PT0gJ3Byb2ZpbGUtZHJvcGRvd24nO1xuICBjb25zdCBpc0dlbmVyaWNEcm9wZG93biA9IFsnZHJvcGRvd24nLCAncmVzb3VyY2VzLXNpbXBsZS1kcm9wZG93biddLmluY2x1ZGVzKFxuICAgIGl0ZW0udHlwZVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEFwcEhlYWRlck1lbnVQcm92aWRlciBoYW5kbGVDbG9zZT17aGFuZGxlS2V5Ym9hcmRDbG9zZX0+XG4gICAgICA8QXBwSGVhZGVyTWVudU5hdkJ1dHRvblxuICAgICAgICBidXR0b25SZWY9e2J1dHRvblJlZn1cbiAgICAgICAgaGFuZGxlT25DbGljaz17aGFuZGxlT25DbGlja31cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIGl0ZW09e2l0ZW19XG4gICAgICAvPlxuICAgICAgPEFuaW1hdGVkU2ltcGxlRHJvcGRvd25cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBnYW11dC9uby1pbmxpbmUtc3R5bGVcbiAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICByaWdodDogaXNQcm9maWxlRHJvcGRvd24gPyAnMC41cmVtJyA6ICcnLFxuICAgICAgICAgIHRvcDogaXNHZW5lcmljRHJvcGRvd24gJiYgc3RhbmRhbG9uZSA/ICcyLjc1cmVtJyA6ICczLjVyZW0nLFxuICAgICAgICB9fVxuICAgICAgPlxuICAgICAgICA8Q29sb3JNb2RlIG1vZGU9XCJsaWdodFwiPlxuICAgICAgICAgIDxTdHlsZWREcm9wZG93bk1lbnVcbiAgICAgICAgICAgIG1pbldpZHRoPVwiMjAycHhcIlxuICAgICAgICAgICAgcmVmPXtsaXN0UmVmfVxuICAgICAgICAgICAgcm9sZT17aXNQcm9maWxlRHJvcGRvd24gPyAnbWVudScgOiB1bmRlZmluZWR9XG4gICAgICAgICAgICBzcGFjaW5nPXtzcGFjaW5nfVxuICAgICAgICAgICAgdmFyaWFudD1cInBvcG92ZXJcIlxuICAgICAgICAgICAgd2lkdGg9XCJmaXQtY29udGVudFwiXG4gICAgICAgICAgICB6SW5kZXg9ezF9XG4gICAgICAgICAgICBweT17c3BhY2luZyA9PT0gJ25vcm1hbCcgPyAxMiA6IDB9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPFN0eWxlZExpbmtTZWN0aW9uIGFjdGlvbj17YWN0aW9ufSBpdGVtPXtpdGVtfSBpc09wZW49e2lzT3Blbn0gLz5cbiAgICAgICAgICA8L1N0eWxlZERyb3Bkb3duTWVudT5cbiAgICAgICAgPC9Db2xvck1vZGU+XG4gICAgICA8L0FuaW1hdGVkU2ltcGxlRHJvcGRvd24+XG4gICAgPC9BcHBIZWFkZXJNZW51UHJvdmlkZXI+XG4gICk7XG59O1xuIl19 */");
+export const AppHeaderDropdown = ({
+  action,
+  item,
+  spacing = 'normal',
+  standalone
+}) => {
+  const listRef = useRef(null);
+  const buttonRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    lastOpenedDropdown,
+    setLastOpenedDropdown
+  } = useAppHeaderContext();
+  const dropdownId = item?.text ?? item?.type;
+  const toggleIsOpen = () => setIsOpen(prev => !prev);
+  const handleOnClick = event => {
+    toggleIsOpen();
+    if (!isOpen) {
+      if (action) action(event, item);
+      if (setLastOpenedDropdown) {
+        setLastOpenedDropdown(dropdownId);
+      }
+    }
+  };
+  const handleKeyboardClose = useCallback(() => {
+    setIsOpen(false);
+    buttonRef.current?.focus();
+  }, []);
+  useEffect(() => {
+    if (lastOpenedDropdown !== dropdownId && isOpen) {
+      setIsOpen(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lastOpenedDropdown]);
+  useEffect(() => {
+    function handleClickOutside(event) {
+      const list = listRef?.current;
+      const button = buttonRef?.current;
+      if (isOpen && list && !list.contains(event.target) && button && !button.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('blur', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('blur', handleClickOutside);
+    };
+  }, [listRef, isOpen]);
+  const isProfileDropdown = item.type === 'profile-dropdown';
+  const isGenericDropdown = ['dropdown', 'resources-simple-dropdown'].includes(item.type);
+  return /*#__PURE__*/_jsxs(AppHeaderMenuProvider, {
+    handleClose: handleKeyboardClose,
+    children: [/*#__PURE__*/_jsx(AppHeaderMenuNavButton, {
+      buttonRef: buttonRef,
+      handleOnClick: handleOnClick,
+      isOpen: isOpen,
+      item: item
+    }), /*#__PURE__*/_jsx(AnimatedSimpleDropdown, {
+      isOpen: isOpen
+      // eslint-disable-next-line gamut/no-inline-style
+      ,
+      style: {
+        right: isProfileDropdown ? '0.5rem' : '',
+        top: isGenericDropdown && standalone ? '2.75rem' : '3.5rem'
+      },
+      children: /*#__PURE__*/_jsx(ColorMode, {
+        mode: "light",
+        children: /*#__PURE__*/_jsx(StyledDropdownMenu, {
+          minWidth: "202px",
+          ref: listRef,
+          role: isProfileDropdown ? 'menu' : undefined,
+          spacing: spacing,
+          variant: "popover",
+          width: "fit-content",
+          zIndex: 1,
+          py: spacing === 'normal' ? 12 : 0,
+          children: /*#__PURE__*/_jsx(StyledLinkSection, {
+            action: action,
+            item: item,
+            isOpen: isOpen
+          })
+        })
+      })
+    })]
+  });
+};

package/dist/AppHeader/AppHeaderElements/AppHeaderDropdownProvider/index.d.ts

@@ -0,0 +1,13 @@
+import React, { Dispatch, ReactNode, SetStateAction } from 'react';
+import { AnchorRefItemType } from '../../shared';
+export interface AppHeaderDropdownContextType {
+    firstItemRef?: AnchorRefItemType;
+    setFirstItemRef: Dispatch<SetStateAction<AnchorRefItemType>> | undefined;
+    handleClose: () => void;
+}
+export declare const AppHeaderDropdownContext: React.Context<AppHeaderDropdownContextType>;
+export declare const AppHeaderDropdownProvider: React.FC<{
+    children: ReactNode;
+    handleClose: () => void;
+}>;
+export declare const useAppHeaderDropdownContext: () => AppHeaderDropdownContextType;

package/dist/AppHeader/AppHeaderElements/AppHeaderDropdownProvider/index.js

@@ -1,31 +1,29 @@
-import { useOnEscHandler } from "../../shared/keyboardNav.js";
-import { Box } from "@codecademy/gamut";
-import React, { createContext, useContext, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-import noop from "lodash/fp/noop";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderDropdownProvider/index.tsx
-const AppHeaderDropdownContext = createContext({
-	firstItemRef: void 0,
-	setFirstItemRef: void 0,
-	handleClose: () => noop
+import { Box } from '@codecademy/gamut';
+import noop from 'lodash/fp/noop';
+import React, { createContext, useContext, useState } from 'react';
+import { useOnEscHandler } from '../../shared';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const AppHeaderDropdownContext = /*#__PURE__*/createContext({
+  firstItemRef: undefined,
+  setFirstItemRef: undefined,
+  handleClose: () => noop
 });
-const AppHeaderDropdownProvider = ({ children, handleClose }) => {
-	const [firstItemRef, setFirstItemRef] = useState(void 0);
-	const onKeyDown = useOnEscHandler(handleClose);
-	return /* @__PURE__ */ jsx(AppHeaderDropdownContext.Provider, {
-		value: {
-			firstItemRef,
-			setFirstItemRef,
-			handleClose
-		},
-		children: /* @__PURE__ */ jsx(Box, {
-			onKeyDown,
-			children
-		})
-	});
+export const AppHeaderDropdownProvider = ({
+  children,
+  handleClose
+}) => {
+  const [firstItemRef, setFirstItemRef] = useState(undefined);
+  const onKeyDown = useOnEscHandler(handleClose);
+  return /*#__PURE__*/_jsx(AppHeaderDropdownContext.Provider, {
+    value: {
+      firstItemRef,
+      setFirstItemRef,
+      handleClose
+    },
+    children: /*#__PURE__*/_jsx(Box, {
+      onKeyDown: onKeyDown,
+      children: children
+    })
+  });
 };
-const useAppHeaderDropdownContext = () => useContext(AppHeaderDropdownContext);
-
-//#endregion
-export { AppHeaderDropdownContext, AppHeaderDropdownProvider, useAppHeaderDropdownContext };
+export const useAppHeaderDropdownContext = () => useContext(AppHeaderDropdownContext);

package/dist/AppHeader/AppHeaderElements/AppHeaderFeatureCard/index.d.ts

@@ -0,0 +1,4 @@
+import { AppHeaderCardItem } from '../AppHeaderResourcesDropdown/consts';
+export declare const AppHeaderFeatureCard: ({ item }: {
+    item: AppHeaderCardItem;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/AppHeader/AppHeaderElements/AppHeaderFeatureCard/index.js

@@ -1,59 +1,56 @@
-import { Box, Card, FlexBox, Text } from "@codecademy/gamut";
-import { theme } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { GridDense } from "@codecademy/gamut-patterns";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderFeatureCard/index.tsx
-const StyledCard = styled(Card)`
-  &:hover {
-    color: ${({ theme: theme$1 }) => theme$1.colors.primary};
-    border-color: ${({ theme: theme$1 }) => theme$1.colors.primary};
-  }
-`;
-const AppHeaderFeatureCard = ({ item }) => {
-	return /* @__PURE__ */ jsxs(StyledCard, {
-		isInteractive: true,
-		px: 16,
-		py: 24,
-		borderRadius: "lg",
-		border: 1,
-		borderColor: "border-tertiary",
-		display: "flex",
-		alignItems: "flex-start",
-		flexDirection: "column",
-		height: "100%",
-		children: [
-			/* @__PURE__ */ jsxs(FlexBox, {
-				alignItems: "center",
-				gap: 8,
-				children: [/* @__PURE__ */ jsx(FlexBox, {
-					background: theme.colors["navy-200"],
-					borderRadius: "md",
-					p: 4,
-					height: 32,
-					width: 32,
-					alignItems: "center",
-					justifyContent: "center",
-					children: item.icon
-				}), /* @__PURE__ */ jsx(Text, {
-					variant: "p-large",
-					fontWeight: 700,
-					as: "h3",
-					children: item.linkItem.text
-				})]
-			}),
-			/* @__PURE__ */ jsx(Box, {
-				width: "100%",
-				children: /* @__PURE__ */ jsx(GridDense, { height: 4 })
-			}),
-			/* @__PURE__ */ jsx(Text, {
-				variant: "p-small",
-				children: item.description
-			})
-		]
-	});
-};
-
-//#endregion
-export { AppHeaderFeatureCard };
+import _styled from "@emotion/styled/base";
+import { Box, Card, FlexBox, Text } from '@codecademy/gamut';
+import { GridDense } from '@codecademy/gamut-patterns';
+import { theme } from '@codecademy/gamut-styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledCard = /*#__PURE__*/_styled(Card, {
+  target: "e1lwunvl0",
+  label: "StyledCard"
+})("&:hover{color:", ({
+  theme
+}) => theme.colors.primary, ";border-color:", ({
+  theme
+}) => theme.colors.primary, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRmVhdHVyZUNhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU8rQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckZlYXR1cmVDYXJkL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgQ2FyZCwgRmxleEJveCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IEdyaWREZW5zZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXBhdHRlcm5zJztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQXBwSGVhZGVyQ2FyZEl0ZW0gfSBmcm9tICcuLi9BcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bi9jb25zdHMnO1xuXG5jb25zdCBTdHlsZWRDYXJkID0gc3R5bGVkKENhcmQpYFxuICAmOmhvdmVyIHtcbiAgICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMucHJpbWFyeX07XG4gICAgYm9yZGVyLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5wcmltYXJ5fTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlckZlYXR1cmVDYXJkID0gKHsgaXRlbSB9OiB7IGl0ZW06IEFwcEhlYWRlckNhcmRJdGVtIH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQ2FyZFxuICAgICAgaXNJbnRlcmFjdGl2ZVxuICAgICAgcHg9ezE2fVxuICAgICAgcHk9ezI0fVxuICAgICAgYm9yZGVyUmFkaXVzPVwibGdcIlxuICAgICAgYm9yZGVyPXsxfVxuICAgICAgYm9yZGVyQ29sb3I9XCJib3JkZXItdGVydGlhcnlcIlxuICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgYWxpZ25JdGVtcz1cImZsZXgtc3RhcnRcIlxuICAgICAgZmxleERpcmVjdGlvbj1cImNvbHVtblwiXG4gICAgICBoZWlnaHQ9XCIxMDAlXCJcbiAgICA+XG4gICAgICA8RmxleEJveCBhbGlnbkl0ZW1zPVwiY2VudGVyXCIgZ2FwPXs4fT5cbiAgICAgICAgPEZsZXhCb3hcbiAgICAgICAgICBiYWNrZ3JvdW5kPXt0aGVtZS5jb2xvcnNbJ25hdnktMjAwJ119XG4gICAgICAgICAgYm9yZGVyUmFkaXVzPVwibWRcIlxuICAgICAgICAgIHA9ezR9XG4gICAgICAgICAgaGVpZ2h0PXszMn1cbiAgICAgICAgICB3aWR0aD17MzJ9XG4gICAgICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICAgICAganVzdGlmeUNvbnRlbnQ9XCJjZW50ZXJcIlxuICAgICAgICA+XG4gICAgICAgICAge2l0ZW0uaWNvbn1cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8VGV4dCB2YXJpYW50PVwicC1sYXJnZVwiIGZvbnRXZWlnaHQ9ezcwMH0gYXM9XCJoM1wiPlxuICAgICAgICAgIHtpdGVtLmxpbmtJdGVtLnRleHR9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgIDwvRmxleEJveD5cbiAgICAgIDxCb3ggd2lkdGg9XCIxMDAlXCI+XG4gICAgICAgIDxHcmlkRGVuc2UgaGVpZ2h0PXs0fSAvPlxuICAgICAgPC9Cb3g+XG4gICAgICA8VGV4dCB2YXJpYW50PVwicC1zbWFsbFwiPntpdGVtLmRlc2NyaXB0aW9ufTwvVGV4dD5cbiAgICA8L1N0eWxlZENhcmQ+XG4gICk7XG59O1xuIl19 */"));
+export const AppHeaderFeatureCard = ({
+  item
+}) => {
+  return /*#__PURE__*/_jsxs(StyledCard, {
+    isInteractive: true,
+    px: 16,
+    py: 24,
+    borderRadius: "lg",
+    border: 1,
+    borderColor: "border-tertiary",
+    display: "flex",
+    alignItems: "flex-start",
+    flexDirection: "column",
+    height: "100%",
+    children: [/*#__PURE__*/_jsxs(FlexBox, {
+      alignItems: "center",
+      gap: 8,
+      children: [/*#__PURE__*/_jsx(FlexBox, {
+        background: theme.colors['navy-200'],
+        borderRadius: "md",
+        p: 4,
+        height: 32,
+        width: 32,
+        alignItems: "center",
+        justifyContent: "center",
+        children: item.icon
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "p-large",
+        fontWeight: 700,
+        as: "h3",
+        children: item.linkItem.text
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      width: "100%",
+      children: /*#__PURE__*/_jsx(GridDense, {
+        height: 4
+      })
+    }), /*#__PURE__*/_jsx(Text, {
+      variant: "p-small",
+      children: item.description
+    })]
+  });
+};