@codecademy/brand 4.0.0 → 5.0.0-alpha.19accb830.0

package/dist/AppHeader/AppHeaderElements/AppHeaderLogo/index.cjs

@@ -0,0 +1,53 @@
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_index = require('../../../Logos/LogoCodecademy/index.cjs');
+const require_index$1 = require('../../../Logos/LogoCodecademyMini/index.cjs');
+const require_index$2 = require('../../../Logos/LogoCodecademyPro/index.cjs');
+const require_index$3 = require('../../../Logos/LogoFromSkillsoft/index.cjs');
+require('../../../Logos/index.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderLogo/index.tsx
+const getLogoComponent = (item, showMini) => {
+	if (item.checkMini && showMini) return require_index$1.LogoCodecademyMini;
+	if (item.enterprise) return require_index$3.LogoFromSkillsoft;
+	return item.pro ? require_index$2.LogoCodecademyPro : require_index.LogoCodecademy;
+};
+const AppHeaderLogo = ({ action, item }) => {
+	const [showMini, setShowMini] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (!item.checkMini) return;
+		const handleResize = () => {
+			const shouldShowMini = window.innerWidth < 480 || window.innerWidth <= 1285 && window.innerWidth >= 1200;
+			if (showMini !== shouldShowMini) setShowMini(shouldShowMini);
+		};
+		window.addEventListener("resize", handleResize);
+		handleResize();
+		return () => window.removeEventListener("resize", handleResize);
+	}, [item.checkMini, showMini]);
+	const LogoComponent = getLogoComponent(item, showMini);
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, item.removeAnchorLink ? /* @__PURE__ */ react.default.createElement(LogoComponent, {
+		color: "text",
+		"data-testid": item.dataTestId,
+		height: item.enterprise ? 36 : 27,
+		verticalAlign: "text-bottom",
+		role: "img",
+		...item.enterprise ? { "aria-label": "Codecademy from Skillsoft" } : {}
+	}) : /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Anchor, {
+		variant: "interface",
+		"data-testid": item.dataTestId,
+		py: 4,
+		onClick: (event) => action(event, item),
+		href: item.href,
+		tabIndex: 0
+	}, /* @__PURE__ */ react.default.createElement(LogoComponent, {
+		color: "currentColor",
+		height: item.enterprise ? 36 : 27,
+		verticalAlign: "text-bottom"
+	})));
+};
+
+//#endregion
+exports.AppHeaderLogo = AppHeaderLogo;
+//# sourceMappingURL=index.cjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderLogo/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Anchor","React","useEffect","useState","LogoCodecademy","LogoCodecademyMini","LogoCodecademyPro","LogoFromSkillsoft","getLogoComponent","item","showMini","checkMini","enterprise","pro","AppHeaderLogo","action","setShowMini","handleResize","showMiniWithSearch","window","innerWidth","shouldShowMini","addEventListener","removeEventListener","LogoComponent","removeAnchorLink","color","data-testid","dataTestId","height","verticalAlign","role","variant","py","onClick","event","href","tabIndex"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderLogo/index.tsx"],"sourcesContent":["import { Anchor } from '@codecademy/gamut';\nimport React, { MouseEvent, useEffect, useState } from 'react';\n\nimport {\n  LogoCodecademy,\n  LogoCodecademyMini,\n  LogoCodecademyPro,\n  LogoFromSkillsoft,\n} from '../../../Logos';\nimport { AppHeaderAction, AppHeaderLogoItem } from '../../shared';\n\nconst getLogoComponent = (item: AppHeaderLogoItem, showMini: boolean) => {\n  if (item.checkMini && showMini) return LogoCodecademyMini;\n  if (item.enterprise) return LogoFromSkillsoft;\n  return item.pro ? LogoCodecademyPro : LogoCodecademy;\n};\n\nexport type AppHeaderLogoProps = AppHeaderAction & {\n  item: AppHeaderLogoItem;\n};\n\nexport const AppHeaderLogo: React.FC<AppHeaderLogoProps> = ({\n  action,\n  item,\n}) => {\n  const [showMini, setShowMini] = useState(false);\n\n  useEffect(() => {\n    if (!item.checkMini) {\n      return;\n    }\n    const handleResize = () => {\n      const showMiniWithSearch = window.innerWidth < 480;\n      const shouldShowMini =\n        showMiniWithSearch ||\n        (window.innerWidth <= 1285 && window.innerWidth >= 1200);\n      // avoid unnecessary setState actions if val doesnt change\n      if (showMini !== shouldShowMini) {\n        setShowMini(shouldShowMini);\n      }\n    };\n    window.addEventListener('resize', handleResize);\n    handleResize();\n    // Remove event listener on cleanup\n    return () => window.removeEventListener('resize', handleResize);\n  }, [item.checkMini, showMini]);\n\n  const LogoComponent = getLogoComponent(item, showMini);\n\n  return (\n    <>\n      {item.removeAnchorLink ? (\n        <LogoComponent\n          color=\"text\"\n          data-testid={item.dataTestId}\n          height={item.enterprise ? 36 : 27}\n          verticalAlign=\"text-bottom\"\n          role=\"img\"\n          {...(item.enterprise\n            ? { 'aria-label': 'Codecademy from Skillsoft' }\n            : {})}\n        />\n      ) : (\n        <Anchor\n          variant=\"interface\"\n          data-testid={item.dataTestId}\n          py={4}\n          onClick={(event: MouseEvent<HTMLAnchorElement>) =>\n            action(event, item)\n          }\n          href={item.href}\n          tabIndex={0}\n        >\n          <LogoComponent\n            color=\"currentColor\"\n            height={item.enterprise ? 36 : 27}\n            verticalAlign=\"text-bottom\"\n          />\n        </Anchor>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAWA,MAAMQ,oBAAoBC,MAAyBC,aAAAA;AACjD,KAAID,KAAKE,aAAaD,SAAU,QAAOL;AACvC,KAAII,KAAKG,WAAY,QAAOL;AAC5B,QAAOE,KAAKI,MAAMP,oCAAoBF;;AAOxC,MAAaU,iBAA+C,EAC1DC,QACAN,WACD;CACC,MAAM,CAACC,UAAUM,mCAAwB,MAAA;AAEzCd,4BAAU;AACR,MAAI,CAACO,KAAKE,UACR;EAEF,MAAMM,qBAAe;GAEnB,MAAMI,iBADqBF,OAAOC,aAAa,OAG5CD,OAAOC,cAAc,QAAQD,OAAOC,cAAc;AAErD,OAAIV,aAAaW,eACfL,aAAYK,eAAAA;;AAGhBF,SAAOG,iBAAiB,UAAUL,aAAAA;AAClCA,gBAAAA;AAEA,eAAaE,OAAOI,oBAAoB,UAAUN,aAAAA;IACjD,CAACR,KAAKE,WAAWD,SAAS,CAAA;CAE7B,MAAMc,gBAAgBhB,iBAAiBC,MAAMC,SAAAA;AAE7C,QACE,8BAAA,cAAA,cAAA,UAAA,MACGD,KAAKgB,mBACJ,8BAAA,cAACD,eAAAA;EACCE,OAAM;EACNC,eAAalB,KAAKmB;EAClBC,QAAQpB,KAAKG,aAAa,KAAK;EAC/BkB,eAAc;EACdC,MAAK;EACJ,GAAItB,KAAKG,aACN,EAAE,cAAc,6BAA4B,GAC5C,EAAE;MAGR,8BAAA,cAACZ,0BAAAA;EACCgC,SAAQ;EACRL,eAAalB,KAAKmB;EAClBK,IAAI;EACJC,UAAUC,UACRpB,OAAOoB,OAAO1B,KAAAA;EAEhB2B,MAAM3B,KAAK2B;EACXC,UAAU;IAEV,8BAAA,cAACb,eAAAA;EACCE,OAAM;EACNG,QAAQpB,KAAKG,aAAa,KAAK;EAC/BkB,eAAc"}

package/dist/AppHeader/AppHeaderElements/AppHeaderLogo/index.d.cts

@@ -0,0 +1,11 @@
+import { AppHeaderAction, AppHeaderLogoItem } from "../../shared/types.cjs";
+import React from "react";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderLogo/index.d.ts
+type AppHeaderLogoProps = AppHeaderAction & {
+  item: AppHeaderLogoItem;
+};
+declare const AppHeaderLogo: React.FC<AppHeaderLogoProps>;
+//#endregion
+export { AppHeaderLogo, AppHeaderLogoProps };
+//# sourceMappingURL=index.d.cts.map

package/dist/AppHeader/AppHeaderElements/AppHeaderLogo/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderLogo/index.tsx"],"mappings":";;;;KAiBY,kBAAA,GAAqB,eAAA;EAC/B,IAAA,EAAM,iBAAA;AAAA;AAAA,cAGK,aAAA,EAAe,KAAA,CAAM,EAAA,CAAG,kBAAA"}

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

@@ -1,6 +1,12 @@
-import React from 'react';
-import { AppHeaderAction, AppHeaderLogoItem } from '../../shared';
-export type AppHeaderLogoProps = AppHeaderAction & {
-    item: AppHeaderLogoItem;
+import { AppHeaderAction, AppHeaderLogoItem } from "../../shared/types.js";
+import "../../shared/index.js";
+import React from "react";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderLogo/index.d.ts
+type AppHeaderLogoProps = AppHeaderAction & {
+  item: AppHeaderLogoItem;
 };
-export declare const AppHeaderLogo: React.FC<AppHeaderLogoProps>;
+declare const AppHeaderLogo: React.FC<AppHeaderLogoProps>;
+//#endregion
+export { AppHeaderLogo, AppHeaderLogoProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/AppHeader/AppHeaderElements/AppHeaderLogo/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderLogo/index.tsx"],"mappings":";;;;;KAiBY,kBAAA,GAAqB,eAAA;EAC/B,IAAA,EAAM,iBAAA;AAAA;AAAA,cAGK,aAAA,EAAe,KAAA,CAAM,EAAA,CAAG,kBAAA"}

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

@@ -1,57 +1,51 @@
-import { Anchor } from '@codecademy/gamut';
-import React, { useEffect, useState } from 'react';
-import { LogoCodecademy, LogoCodecademyMini, LogoCodecademyPro, LogoFromSkillsoft } from '../../../Logos';
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { LogoCodecademy } from "../../../Logos/LogoCodecademy/index.js";
+import { LogoCodecademyMini } from "../../../Logos/LogoCodecademyMini/index.js";
+import { LogoCodecademyPro } from "../../../Logos/LogoCodecademyPro/index.js";
+import { LogoFromSkillsoft } from "../../../Logos/LogoFromSkillsoft/index.js";
+import "../../../Logos/index.js";
+import { Anchor } from "@codecademy/gamut";
+import React, { useEffect, useState } from "react";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderLogo/index.tsx
 const getLogoComponent = (item, showMini) => {
-  if (item.checkMini && showMini) return LogoCodecademyMini;
-  if (item.enterprise) return LogoFromSkillsoft;
-  return item.pro ? LogoCodecademyPro : LogoCodecademy;
+	if (item.checkMini && showMini) return LogoCodecademyMini;
+	if (item.enterprise) return LogoFromSkillsoft;
+	return item.pro ? LogoCodecademyPro : LogoCodecademy;
 };
-export const AppHeaderLogo = ({
-  action,
-  item
-}) => {
-  const [showMini, setShowMini] = useState(false);
-  useEffect(() => {
-    if (!item.checkMini) {
-      return;
-    }
-    const handleResize = () => {
-      const showMiniWithSearch = window.innerWidth < 480;
-      const shouldShowMini = showMiniWithSearch || window.innerWidth <= 1285 && window.innerWidth >= 1200;
-      // avoid unnecessary setState actions if val doesnt change
-      if (showMini !== shouldShowMini) {
-        setShowMini(shouldShowMini);
-      }
-    };
-    window.addEventListener('resize', handleResize);
-    handleResize();
-    // Remove event listener on cleanup
-    return () => window.removeEventListener('resize', handleResize);
-  }, [item.checkMini, showMini]);
-  const LogoComponent = getLogoComponent(item, showMini);
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: item.removeAnchorLink ? /*#__PURE__*/_jsx(LogoComponent, {
-      color: "text",
-      "data-testid": item.dataTestId,
-      height: item.enterprise ? 36 : 27,
-      verticalAlign: "text-bottom",
-      role: "img",
-      ...(item.enterprise ? {
-        'aria-label': 'Codecademy from Skillsoft'
-      } : {})
-    }) : /*#__PURE__*/_jsx(Anchor, {
-      variant: "interface",
-      "data-testid": item.dataTestId,
-      py: 4,
-      onClick: event => action(event, item),
-      href: item.href,
-      tabIndex: 0,
-      children: /*#__PURE__*/_jsx(LogoComponent, {
-        color: "currentColor",
-        height: item.enterprise ? 36 : 27,
-        verticalAlign: "text-bottom"
-      })
-    })
-  });
-};
+const AppHeaderLogo = ({ action, item }) => {
+	const [showMini, setShowMini] = useState(false);
+	useEffect(() => {
+		if (!item.checkMini) return;
+		const handleResize = () => {
+			const shouldShowMini = window.innerWidth < 480 || window.innerWidth <= 1285 && window.innerWidth >= 1200;
+			if (showMini !== shouldShowMini) setShowMini(shouldShowMini);
+		};
+		window.addEventListener("resize", handleResize);
+		handleResize();
+		return () => window.removeEventListener("resize", handleResize);
+	}, [item.checkMini, showMini]);
+	const LogoComponent = getLogoComponent(item, showMini);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, item.removeAnchorLink ? /* @__PURE__ */ React.createElement(LogoComponent, {
+		color: "text",
+		"data-testid": item.dataTestId,
+		height: item.enterprise ? 36 : 27,
+		verticalAlign: "text-bottom",
+		role: "img",
+		...item.enterprise ? { "aria-label": "Codecademy from Skillsoft" } : {}
+	}) : /* @__PURE__ */ React.createElement(Anchor, {
+		variant: "interface",
+		"data-testid": item.dataTestId,
+		py: 4,
+		onClick: (event) => action(event, item),
+		href: item.href,
+		tabIndex: 0
+	}, /* @__PURE__ */ React.createElement(LogoComponent, {
+		color: "currentColor",
+		height: item.enterprise ? 36 : 27,
+		verticalAlign: "text-bottom"
+	})));
+};
+
+//#endregion
+export { AppHeaderLogo };
+//# sourceMappingURL=index.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderLogo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Anchor","React","useEffect","useState","LogoCodecademy","LogoCodecademyMini","LogoCodecademyPro","LogoFromSkillsoft","getLogoComponent","item","showMini","checkMini","enterprise","pro","AppHeaderLogo","action","setShowMini","handleResize","showMiniWithSearch","window","innerWidth","shouldShowMini","addEventListener","removeEventListener","LogoComponent","removeAnchorLink","color","data-testid","dataTestId","height","verticalAlign","role","variant","py","onClick","event","href","tabIndex"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderLogo/index.tsx"],"sourcesContent":["import { Anchor } from '@codecademy/gamut';\nimport React, { MouseEvent, useEffect, useState } from 'react';\n\nimport {\n  LogoCodecademy,\n  LogoCodecademyMini,\n  LogoCodecademyPro,\n  LogoFromSkillsoft,\n} from '../../../Logos';\nimport { AppHeaderAction, AppHeaderLogoItem } from '../../shared';\n\nconst getLogoComponent = (item: AppHeaderLogoItem, showMini: boolean) => {\n  if (item.checkMini && showMini) return LogoCodecademyMini;\n  if (item.enterprise) return LogoFromSkillsoft;\n  return item.pro ? LogoCodecademyPro : LogoCodecademy;\n};\n\nexport type AppHeaderLogoProps = AppHeaderAction & {\n  item: AppHeaderLogoItem;\n};\n\nexport const AppHeaderLogo: React.FC<AppHeaderLogoProps> = ({\n  action,\n  item,\n}) => {\n  const [showMini, setShowMini] = useState(false);\n\n  useEffect(() => {\n    if (!item.checkMini) {\n      return;\n    }\n    const handleResize = () => {\n      const showMiniWithSearch = window.innerWidth < 480;\n      const shouldShowMini =\n        showMiniWithSearch ||\n        (window.innerWidth <= 1285 && window.innerWidth >= 1200);\n      // avoid unnecessary setState actions if val doesnt change\n      if (showMini !== shouldShowMini) {\n        setShowMini(shouldShowMini);\n      }\n    };\n    window.addEventListener('resize', handleResize);\n    handleResize();\n    // Remove event listener on cleanup\n    return () => window.removeEventListener('resize', handleResize);\n  }, [item.checkMini, showMini]);\n\n  const LogoComponent = getLogoComponent(item, showMini);\n\n  return (\n    <>\n      {item.removeAnchorLink ? (\n        <LogoComponent\n          color=\"text\"\n          data-testid={item.dataTestId}\n          height={item.enterprise ? 36 : 27}\n          verticalAlign=\"text-bottom\"\n          role=\"img\"\n          {...(item.enterprise\n            ? { 'aria-label': 'Codecademy from Skillsoft' }\n            : {})}\n        />\n      ) : (\n        <Anchor\n          variant=\"interface\"\n          data-testid={item.dataTestId}\n          py={4}\n          onClick={(event: MouseEvent<HTMLAnchorElement>) =>\n            action(event, item)\n          }\n          href={item.href}\n          tabIndex={0}\n        >\n          <LogoComponent\n            color=\"currentColor\"\n            height={item.enterprise ? 36 : 27}\n            verticalAlign=\"text-bottom\"\n          />\n        </Anchor>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,MAAMQ,oBAAoBC,MAAyBC,aAAAA;AACjD,KAAID,KAAKE,aAAaD,SAAU,QAAOL;AACvC,KAAII,KAAKG,WAAY,QAAOL;AAC5B,QAAOE,KAAKI,MAAMP,oBAAoBF;;AAOxC,MAAaU,iBAA+C,EAC1DC,QACAN,WACD;CACC,MAAM,CAACC,UAAUM,eAAeb,SAAS,MAAA;AAEzCD,iBAAU;AACR,MAAI,CAACO,KAAKE,UACR;EAEF,MAAMM,qBAAe;GAEnB,MAAMI,iBADqBF,OAAOC,aAAa,OAG5CD,OAAOC,cAAc,QAAQD,OAAOC,cAAc;AAErD,OAAIV,aAAaW,eACfL,aAAYK,eAAAA;;AAGhBF,SAAOG,iBAAiB,UAAUL,aAAAA;AAClCA,gBAAAA;AAEA,eAAaE,OAAOI,oBAAoB,UAAUN,aAAAA;IACjD,CAACR,KAAKE,WAAWD,SAAS,CAAA;CAE7B,MAAMc,gBAAgBhB,iBAAiBC,MAAMC,SAAAA;AAE7C,QACE,sBAAA,cAAA,MAAA,UAAA,MACGD,KAAKgB,mBACJ,sBAAA,cAACD,eAAAA;EACCE,OAAM;EACNC,eAAalB,KAAKmB;EAClBC,QAAQpB,KAAKG,aAAa,KAAK;EAC/BkB,eAAc;EACdC,MAAK;EACJ,GAAItB,KAAKG,aACN,EAAE,cAAc,6BAA4B,GAC5C,EAAE;MAGR,sBAAA,cAACZ,QAAAA;EACCgC,SAAQ;EACRL,eAAalB,KAAKmB;EAClBK,IAAI;EACJC,UAAUC,UACRpB,OAAOoB,OAAO1B,KAAAA;EAEhB2B,MAAM3B,KAAK2B;EACXC,UAAU;IAEV,sBAAA,cAACb,eAAAA;EACCE,OAAM;EACNG,QAAQpB,KAAKG,aAAa,KAAK;EAC/BkB,eAAc"}

package/dist/AppHeader/AppHeaderElements/AppHeaderMenuProvider/index.cjs

@@ -0,0 +1,82 @@
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_keyboardNav = require('../../shared/keyboardNav.cjs');
+require('../../shared/index.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderMenuProvider/index.tsx
+const AppHeaderMenuContext = /* @__PURE__ */ (0, react.createContext)({
+	menuItems: /* @__PURE__ */ new Set(),
+	setMenuItems: void 0
+});
+const AppHeaderMenuProvider = ({ as, children, handleClose }) => {
+	const [menuItems, setMenuItems] = (0, react.useState)(() => /* @__PURE__ */ new Set());
+	const [index, setIndex] = (0, react.useState)(0);
+	const [shouldFocus, setShouldFocus] = (0, react.useState)(false);
+	const menuItemsArray = Array.from(menuItems);
+	const length = menuItems.size - 1;
+	const first = () => {
+		setShouldFocus(true);
+		setIndex(0);
+	};
+	const back = (shouldFocus) => {
+		setShouldFocus(shouldFocus);
+		if (shouldFocus && index === 0) setIndex(length);
+		else if (index !== 0) setIndex(index - 1);
+	};
+	const next = (shouldFocus) => {
+		setShouldFocus(shouldFocus);
+		if (index === length) setIndex(0);
+		else setIndex(index + 1);
+	};
+	const last = () => {
+		setShouldFocus(true);
+		setIndex(0);
+	};
+	const resetIndex = () => {
+		if (index !== 0) setIndex(0);
+	};
+	const closeDropdown = () => {
+		handleClose();
+		setShouldFocus(false);
+		setIndex(0);
+	};
+	const checkUnsetFocusHandler = (event) => {
+		if (event?.target === menuItemsArray[0] && index !== 0) setIndex(0);
+		if (event?.target === menuItemsArray[length] && index !== length) setIndex(length);
+	};
+	const keyDown = require_keyboardNav.useMenuKeyboardNavigation({
+		first,
+		back,
+		next,
+		last,
+		closeDropdown
+	});
+	(0, react.useEffect)(() => {
+		const itemToFocus = menuItemsArray[index];
+		if (itemToFocus && shouldFocus) {
+			itemToFocus.focus();
+			setShouldFocus(false);
+		}
+	}, [
+		menuItemsArray,
+		index,
+		shouldFocus
+	]);
+	return /* @__PURE__ */ react.default.createElement(AppHeaderMenuContext.Provider, { value: {
+		menuItems,
+		resetIndex,
+		setMenuItems
+	} }, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, {
+		as,
+		onKeyDown: keyDown,
+		onFocusCapture: (e) => checkUnsetFocusHandler(e)
+	}, children));
+};
+const useAppHeaderMenuContext = () => (0, react.useContext)(AppHeaderMenuContext);
+
+//#endregion
+exports.AppHeaderMenuProvider = AppHeaderMenuProvider;
+exports.useAppHeaderMenuContext = useAppHeaderMenuContext;
+//# sourceMappingURL=index.cjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderMenuProvider/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Box","React","createContext","useContext","useEffect","useState","useMenuKeyboardNavigation","AppHeaderMenuContext","menuItems","Set","setMenuItems","undefined","AppHeaderMenuProvider","as","children","handleClose","index","setIndex","shouldFocus","setShouldFocus","menuItemsArray","Array","from","length","size","first","back","next","last","resetIndex","closeDropdown","checkUnsetFocusHandler","event","target","keyDown","itemToFocus","focus","Provider","value","onKeyDown","onFocusCapture","e","useAppHeaderMenuContext"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderMenuProvider/index.tsx"],"sourcesContent":["import { Box } from '@codecademy/gamut';\nimport React, {\n  ComponentProps,\n  createContext,\n  Dispatch,\n  PropsWithChildren,\n  SetStateAction,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\n\nimport { AnchorRefItemType, useMenuKeyboardNavigation } from '../../shared';\n\nexport interface AppHeaderMenuContextType {\n  menuItems: Set<AnchorRefItemType>;\n  setMenuItems: Dispatch<SetStateAction<Set<AnchorRefItemType>>> | undefined;\n  resetIndex?: () => void;\n}\n\nexport const AppHeaderMenuContext = createContext<AppHeaderMenuContextType>({\n  menuItems: new Set(),\n  setMenuItems: undefined,\n});\n\nexport type AppHeaderMenuProviderProps = PropsWithChildren<{\n  handleClose: () => void;\n}> &\n  Pick<ComponentProps<typeof Box>, 'as'>;\n\nexport const AppHeaderMenuProvider: React.FC<AppHeaderMenuProviderProps> = ({\n  as,\n  children,\n  handleClose,\n}) => {\n  const [menuItems, setMenuItems] = useState<Set<AnchorRefItemType>>(\n    () => new Set()\n  );\n  const [index, setIndex] = useState<number>(0);\n  const [shouldFocus, setShouldFocus] = useState<boolean>(false);\n  const menuItemsArray = Array.from(menuItems);\n\n  const length = menuItems.size - 1;\n\n  const first = () => {\n    setShouldFocus(true);\n    setIndex(0);\n  };\n\n  const back = (shouldFocus: boolean) => {\n    setShouldFocus(shouldFocus);\n    if (shouldFocus && index === 0) {\n      // should only cycle for arrow keys, not shift tab\n      setIndex(length);\n    } else if (index !== 0) {\n      setIndex(index - 1);\n    }\n  };\n\n  const next = (shouldFocus: boolean) => {\n    setShouldFocus(shouldFocus);\n    if (index === length) {\n      setIndex(0);\n    } else {\n      setIndex(index + 1);\n    }\n  };\n\n  const last = () => {\n    setShouldFocus(true);\n    setIndex(0);\n  };\n\n  const resetIndex = () => {\n    if (index !== 0) setIndex(0);\n  };\n\n  const closeDropdown = () => {\n    handleClose();\n    setShouldFocus(false);\n    setIndex(0);\n  };\n\n  const checkUnsetFocusHandler = (\n    event: React.FocusEvent<unknown, Element>\n  ) => {\n    if (event?.target === menuItemsArray[0] && index !== 0) {\n      setIndex(0);\n    }\n    if (event?.target === menuItemsArray[length] && index !== length) {\n      setIndex(length);\n    }\n  };\n\n  const keyDown = useMenuKeyboardNavigation({\n    first,\n    back,\n    next,\n    last,\n    closeDropdown,\n  });\n\n  useEffect(() => {\n    const itemToFocus = menuItemsArray[index];\n    if (itemToFocus && shouldFocus) {\n      itemToFocus.focus();\n      setShouldFocus(false);\n    }\n  }, [menuItemsArray, index, shouldFocus]);\n\n  return (\n    <AppHeaderMenuContext.Provider\n      value={{ menuItems, resetIndex, setMenuItems }}\n    >\n      <Box\n        as={as}\n        onKeyDown={keyDown}\n        onFocusCapture={(e) => checkUnsetFocusHandler(e)}\n      >\n        {children}\n      </Box>\n    </AppHeaderMenuContext.Provider>\n  );\n};\n\nexport const useAppHeaderMenuContext = () => useContext(AppHeaderMenuContext);\n"],"mappings":";;;;;;;;AAoBA,MAAaO,uBAAuBL,yCAAwC;CAC1EM,2BAAW,IAAIC,KAAAA;CACfC,cAAcC;CAChB,CAAA;AAOA,MAAaC,yBAA+D,EAC1EC,IACAC,UACAC,kBACD;CACC,MAAM,CAACP,WAAWE,0DACV,IAAID,KAAAA,CAAAA;CAEZ,MAAM,CAACO,OAAOC,gCAA6B,EAAA;CAC3C,MAAM,CAACC,aAAaC,sCAAoC,MAAA;CACxD,MAAMC,iBAAiBC,MAAMC,KAAKd,UAAAA;CAElC,MAAMe,SAASf,UAAUgB,OAAO;CAEhC,MAAMC,cAAQ;AACZN,iBAAe,KAAA;AACfF,WAAS,EAAA;;CAGX,MAAMS,QAAQR,gBAAAA;AACZC,iBAAeD,YAAAA;AACf,MAAIA,eAAeF,UAAU,EAE3BC,UAASM,OAAAA;WACAP,UAAU,EACnBC,UAASD,QAAQ,EAAA;;CAIrB,MAAMW,QAAQT,gBAAAA;AACZC,iBAAeD,YAAAA;AACf,MAAIF,UAAUO,OACZN,UAAS,EAAA;MAETA,UAASD,QAAQ,EAAA;;CAIrB,MAAMY,aAAO;AACXT,iBAAe,KAAA;AACfF,WAAS,EAAA;;CAGX,MAAMY,mBAAa;AACjB,MAAIb,UAAU,EAAGC,UAAS,EAAA;;CAG5B,MAAMa,sBAAgB;AACpBf,eAAAA;AACAI,iBAAe,MAAA;AACfF,WAAS,EAAA;;CAGX,MAAMc,0BACJC,UAAAA;AAEA,MAAIA,OAAOC,WAAWb,eAAe,MAAMJ,UAAU,EACnDC,UAAS,EAAA;AAEX,MAAIe,OAAOC,WAAWb,eAAeG,WAAWP,UAAUO,OACxDN,UAASM,OAAAA;;CAIb,MAAMW,UAAU5B,8CAA0B;EACxCmB;EACAC;EACAC;EACAC;EACAE;EACF,CAAA;AAEA1B,4BAAU;EACR,MAAM+B,cAAcf,eAAeJ;AACnC,MAAImB,eAAejB,aAAa;AAC9BiB,eAAYC,OAAK;AACjBjB,kBAAe,MAAA;;IAEhB;EAACC;EAAgBJ;EAAOE;EAAY,CAAA;AAEvC,QACE,8BAAA,cAACX,qBAAqB8B,UAAQ,EAC5BC,OAAO;EAAE9B;EAAWqB;EAAYnB;EAAa,IAE7C,8BAAA,cAACV,uBAAAA;EACKa;EACJ0B,WAAWL;EACXM,iBAAiBC,MAAMV,uBAAuBU,EAAAA;IAE7C3B,SAAAA,CAAAA;;AAMT,MAAa4B,sDAA2CnC,qBAAAA"}

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

@@ -1,88 +1,79 @@
-import { Box } from '@codecademy/gamut';
-import React, { createContext, useContext, useEffect, useState } from 'react';
-import { useMenuKeyboardNavigation } from '../../shared';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const AppHeaderMenuContext = /*#__PURE__*/createContext({
-  menuItems: new Set(),
-  setMenuItems: undefined
+import { useMenuKeyboardNavigation } from "../../shared/keyboardNav.js";
+import "../../shared/index.js";
+import { Box } from "@codecademy/gamut";
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderMenuProvider/index.tsx
+const AppHeaderMenuContext = /* @__PURE__ */ createContext({
+	menuItems: /* @__PURE__ */ new Set(),
+	setMenuItems: void 0
 });
-export const AppHeaderMenuProvider = ({
-  as,
-  children,
-  handleClose
-}) => {
-  const [menuItems, setMenuItems] = useState(() => new Set());
-  const [index, setIndex] = useState(0);
-  const [shouldFocus, setShouldFocus] = useState(false);
-  const menuItemsArray = Array.from(menuItems);
-  const length = menuItems.size - 1;
-  const first = () => {
-    setShouldFocus(true);
-    setIndex(0);
-  };
-  const back = shouldFocus => {
-    setShouldFocus(shouldFocus);
-    if (shouldFocus && index === 0) {
-      // should only cycle for arrow keys, not shift tab
-      setIndex(length);
-    } else if (index !== 0) {
-      setIndex(index - 1);
-    }
-  };
-  const next = shouldFocus => {
-    setShouldFocus(shouldFocus);
-    if (index === length) {
-      setIndex(0);
-    } else {
-      setIndex(index + 1);
-    }
-  };
-  const last = () => {
-    setShouldFocus(true);
-    setIndex(0);
-  };
-  const resetIndex = () => {
-    if (index !== 0) setIndex(0);
-  };
-  const closeDropdown = () => {
-    handleClose();
-    setShouldFocus(false);
-    setIndex(0);
-  };
-  const checkUnsetFocusHandler = event => {
-    if (event?.target === menuItemsArray[0] && index !== 0) {
-      setIndex(0);
-    }
-    if (event?.target === menuItemsArray[length] && index !== length) {
-      setIndex(length);
-    }
-  };
-  const keyDown = useMenuKeyboardNavigation({
-    first,
-    back,
-    next,
-    last,
-    closeDropdown
-  });
-  useEffect(() => {
-    const itemToFocus = menuItemsArray[index];
-    if (itemToFocus && shouldFocus) {
-      itemToFocus.focus();
-      setShouldFocus(false);
-    }
-  }, [menuItemsArray, index, shouldFocus]);
-  return /*#__PURE__*/_jsx(AppHeaderMenuContext.Provider, {
-    value: {
-      menuItems,
-      resetIndex,
-      setMenuItems
-    },
-    children: /*#__PURE__*/_jsx(Box, {
-      as: as,
-      onKeyDown: keyDown,
-      onFocusCapture: e => checkUnsetFocusHandler(e),
-      children: children
-    })
-  });
+const AppHeaderMenuProvider = ({ as, children, handleClose }) => {
+	const [menuItems, setMenuItems] = useState(() => /* @__PURE__ */ new Set());
+	const [index, setIndex] = useState(0);
+	const [shouldFocus, setShouldFocus] = useState(false);
+	const menuItemsArray = Array.from(menuItems);
+	const length = menuItems.size - 1;
+	const first = () => {
+		setShouldFocus(true);
+		setIndex(0);
+	};
+	const back = (shouldFocus) => {
+		setShouldFocus(shouldFocus);
+		if (shouldFocus && index === 0) setIndex(length);
+		else if (index !== 0) setIndex(index - 1);
+	};
+	const next = (shouldFocus) => {
+		setShouldFocus(shouldFocus);
+		if (index === length) setIndex(0);
+		else setIndex(index + 1);
+	};
+	const last = () => {
+		setShouldFocus(true);
+		setIndex(0);
+	};
+	const resetIndex = () => {
+		if (index !== 0) setIndex(0);
+	};
+	const closeDropdown = () => {
+		handleClose();
+		setShouldFocus(false);
+		setIndex(0);
+	};
+	const checkUnsetFocusHandler = (event) => {
+		if (event?.target === menuItemsArray[0] && index !== 0) setIndex(0);
+		if (event?.target === menuItemsArray[length] && index !== length) setIndex(length);
+	};
+	const keyDown = useMenuKeyboardNavigation({
+		first,
+		back,
+		next,
+		last,
+		closeDropdown
+	});
+	useEffect(() => {
+		const itemToFocus = menuItemsArray[index];
+		if (itemToFocus && shouldFocus) {
+			itemToFocus.focus();
+			setShouldFocus(false);
+		}
+	}, [
+		menuItemsArray,
+		index,
+		shouldFocus
+	]);
+	return /* @__PURE__ */ React.createElement(AppHeaderMenuContext.Provider, { value: {
+		menuItems,
+		resetIndex,
+		setMenuItems
+	} }, /* @__PURE__ */ React.createElement(Box, {
+		as,
+		onKeyDown: keyDown,
+		onFocusCapture: (e) => checkUnsetFocusHandler(e)
+	}, children));
 };
-export const useAppHeaderMenuContext = () => useContext(AppHeaderMenuContext);
+const useAppHeaderMenuContext = () => useContext(AppHeaderMenuContext);
+
+//#endregion
+export { AppHeaderMenuProvider, useAppHeaderMenuContext };
+//# sourceMappingURL=index.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderMenuProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Box","React","createContext","useContext","useEffect","useState","useMenuKeyboardNavigation","AppHeaderMenuContext","menuItems","Set","setMenuItems","undefined","AppHeaderMenuProvider","as","children","handleClose","index","setIndex","shouldFocus","setShouldFocus","menuItemsArray","Array","from","length","size","first","back","next","last","resetIndex","closeDropdown","checkUnsetFocusHandler","event","target","keyDown","itemToFocus","focus","Provider","value","onKeyDown","onFocusCapture","e","useAppHeaderMenuContext"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderMenuProvider/index.tsx"],"sourcesContent":["import { Box } from '@codecademy/gamut';\nimport React, {\n  ComponentProps,\n  createContext,\n  Dispatch,\n  PropsWithChildren,\n  SetStateAction,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\n\nimport { AnchorRefItemType, useMenuKeyboardNavigation } from '../../shared';\n\nexport interface AppHeaderMenuContextType {\n  menuItems: Set<AnchorRefItemType>;\n  setMenuItems: Dispatch<SetStateAction<Set<AnchorRefItemType>>> | undefined;\n  resetIndex?: () => void;\n}\n\nexport const AppHeaderMenuContext = createContext<AppHeaderMenuContextType>({\n  menuItems: new Set(),\n  setMenuItems: undefined,\n});\n\nexport type AppHeaderMenuProviderProps = PropsWithChildren<{\n  handleClose: () => void;\n}> &\n  Pick<ComponentProps<typeof Box>, 'as'>;\n\nexport const AppHeaderMenuProvider: React.FC<AppHeaderMenuProviderProps> = ({\n  as,\n  children,\n  handleClose,\n}) => {\n  const [menuItems, setMenuItems] = useState<Set<AnchorRefItemType>>(\n    () => new Set()\n  );\n  const [index, setIndex] = useState<number>(0);\n  const [shouldFocus, setShouldFocus] = useState<boolean>(false);\n  const menuItemsArray = Array.from(menuItems);\n\n  const length = menuItems.size - 1;\n\n  const first = () => {\n    setShouldFocus(true);\n    setIndex(0);\n  };\n\n  const back = (shouldFocus: boolean) => {\n    setShouldFocus(shouldFocus);\n    if (shouldFocus && index === 0) {\n      // should only cycle for arrow keys, not shift tab\n      setIndex(length);\n    } else if (index !== 0) {\n      setIndex(index - 1);\n    }\n  };\n\n  const next = (shouldFocus: boolean) => {\n    setShouldFocus(shouldFocus);\n    if (index === length) {\n      setIndex(0);\n    } else {\n      setIndex(index + 1);\n    }\n  };\n\n  const last = () => {\n    setShouldFocus(true);\n    setIndex(0);\n  };\n\n  const resetIndex = () => {\n    if (index !== 0) setIndex(0);\n  };\n\n  const closeDropdown = () => {\n    handleClose();\n    setShouldFocus(false);\n    setIndex(0);\n  };\n\n  const checkUnsetFocusHandler = (\n    event: React.FocusEvent<unknown, Element>\n  ) => {\n    if (event?.target === menuItemsArray[0] && index !== 0) {\n      setIndex(0);\n    }\n    if (event?.target === menuItemsArray[length] && index !== length) {\n      setIndex(length);\n    }\n  };\n\n  const keyDown = useMenuKeyboardNavigation({\n    first,\n    back,\n    next,\n    last,\n    closeDropdown,\n  });\n\n  useEffect(() => {\n    const itemToFocus = menuItemsArray[index];\n    if (itemToFocus && shouldFocus) {\n      itemToFocus.focus();\n      setShouldFocus(false);\n    }\n  }, [menuItemsArray, index, shouldFocus]);\n\n  return (\n    <AppHeaderMenuContext.Provider\n      value={{ menuItems, resetIndex, setMenuItems }}\n    >\n      <Box\n        as={as}\n        onKeyDown={keyDown}\n        onFocusCapture={(e) => checkUnsetFocusHandler(e)}\n      >\n        {children}\n      </Box>\n    </AppHeaderMenuContext.Provider>\n  );\n};\n\nexport const useAppHeaderMenuContext = () => useContext(AppHeaderMenuContext);\n"],"mappings":";;;;;;AAoBA,MAAaO,uBAAuBL,8BAAwC;CAC1EM,2BAAW,IAAIC,KAAAA;CACfC,cAAcC;CAChB,CAAA;AAOA,MAAaC,yBAA+D,EAC1EC,IACAC,UACAC,kBACD;CACC,MAAM,CAACP,WAAWE,gBAAgBL,+BAC1B,IAAII,KAAAA,CAAAA;CAEZ,MAAM,CAACO,OAAOC,YAAYZ,SAAiB,EAAA;CAC3C,MAAM,CAACa,aAAaC,kBAAkBd,SAAkB,MAAA;CACxD,MAAMe,iBAAiBC,MAAMC,KAAKd,UAAAA;CAElC,MAAMe,SAASf,UAAUgB,OAAO;CAEhC,MAAMC,cAAQ;AACZN,iBAAe,KAAA;AACfF,WAAS,EAAA;;CAGX,MAAMS,QAAQR,gBAAAA;AACZC,iBAAeD,YAAAA;AACf,MAAIA,eAAeF,UAAU,EAE3BC,UAASM,OAAAA;WACAP,UAAU,EACnBC,UAASD,QAAQ,EAAA;;CAIrB,MAAMW,QAAQT,gBAAAA;AACZC,iBAAeD,YAAAA;AACf,MAAIF,UAAUO,OACZN,UAAS,EAAA;MAETA,UAASD,QAAQ,EAAA;;CAIrB,MAAMY,aAAO;AACXT,iBAAe,KAAA;AACfF,WAAS,EAAA;;CAGX,MAAMY,mBAAa;AACjB,MAAIb,UAAU,EAAGC,UAAS,EAAA;;CAG5B,MAAMa,sBAAgB;AACpBf,eAAAA;AACAI,iBAAe,MAAA;AACfF,WAAS,EAAA;;CAGX,MAAMc,0BACJC,UAAAA;AAEA,MAAIA,OAAOC,WAAWb,eAAe,MAAMJ,UAAU,EACnDC,UAAS,EAAA;AAEX,MAAIe,OAAOC,WAAWb,eAAeG,WAAWP,UAAUO,OACxDN,UAASM,OAAAA;;CAIb,MAAMW,UAAU5B,0BAA0B;EACxCmB;EACAC;EACAC;EACAC;EACAE;EACF,CAAA;AAEA1B,iBAAU;EACR,MAAM+B,cAAcf,eAAeJ;AACnC,MAAImB,eAAejB,aAAa;AAC9BiB,eAAYC,OAAK;AACjBjB,kBAAe,MAAA;;IAEhB;EAACC;EAAgBJ;EAAOE;EAAY,CAAA;AAEvC,QACE,sBAAA,cAACX,qBAAqB8B,UAAQ,EAC5BC,OAAO;EAAE9B;EAAWqB;EAAYnB;EAAa,IAE7C,sBAAA,cAACV,KAAAA;EACKa;EACJ0B,WAAWL;EACXM,iBAAiBC,MAAMV,uBAAuBU,EAAAA;IAE7C3B,SAAAA,CAAAA;;AAMT,MAAa4B,gCAAgCvC,WAAWI,qBAAAA"}

package/dist/AppHeader/AppHeaderElements/AppHeaderNavButton/index.cjs

@@ -0,0 +1,78 @@
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_elements = require('../../shared/elements.cjs');
+require('../../shared/index.cjs');
+const require_index$1 = require('../AppHeaderDropdownProvider/index.cjs');
+const require_index$2 = require('../../../Avatar/index.cjs');
+const require_index$3 = require('../AppHeaderMenuProvider/index.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderNavButton/index.tsx
+const AppHeaderNavButton = ({ buttonRef, handleOnClick, isOpen, item, text, onFocus }) => {
+	const sharedProps = {
+		"aria-expanded": isOpen,
+		"aria-haspopup": true,
+		onClick: handleOnClick,
+		ref: buttonRef
+	};
+	if (item?.type === "profile-dropdown") return /* @__PURE__ */ React.createElement(_codecademy_gamut.TextButton, {
+		"data-testid": "avatar-dropdown-button",
+		variant: "interface",
+		onFocus,
+		...sharedProps
+	}, /* @__PURE__ */ React.createElement(require_index$2.Avatar, {
+		alt: "User profile avatar",
+		disableDropshadow: true,
+		size: 40,
+		src: item.avatar
+	}));
+	if (item?.icon && "isIconOnly" in item) return /* @__PURE__ */ React.createElement(_codecademy_gamut.IconButton, {
+		icon: item.icon,
+		tip: item.text ?? "Dropdown",
+		tipProps: {
+			alignment: "bottom-center",
+			placement: "floating"
+		},
+		onFocus,
+		...sharedProps
+	});
+	return /* @__PURE__ */ React.createElement(require_elements.DropdownAnchor, {
+		title: item?.text ?? text,
+		variant: "interface",
+		onFocus,
+		...sharedProps
+	}, /* @__PURE__ */ React.createElement(require_elements.StyledText, {
+		fontWeight: isOpen ? "bold" : "normal",
+		textAlign: "center",
+		title: item?.text ?? text
+	}, item?.text ?? text), /* @__PURE__ */ React.createElement(require_elements.DropdownIcon, {
+		open: isOpen,
+		size: 12
+	}));
+};
+const AppHeaderMenuNavButton = ({ isOpen, ...props }) => {
+	const { menuItems, resetIndex } = require_index$3.useAppHeaderMenuContext();
+	(0, react.useEffect)(() => {
+		if (isOpen) menuItems.values().next().value?.focus();
+	}, [isOpen, menuItems]);
+	return /* @__PURE__ */ React.createElement(AppHeaderNavButton, {
+		isOpen,
+		onFocus: resetIndex,
+		...props
+	});
+};
+const AppHeaderDropdownNavButton = ({ isOpen, ...props }) => {
+	const { firstItemRef } = require_index$1.useAppHeaderDropdownContext();
+	(0, react.useEffect)(() => {
+		if (isOpen) firstItemRef?.focus();
+	}, [isOpen, firstItemRef]);
+	return /* @__PURE__ */ React.createElement(AppHeaderNavButton, {
+		isOpen,
+		...props
+	});
+};
+
+//#endregion
+exports.AppHeaderDropdownNavButton = AppHeaderDropdownNavButton;
+exports.AppHeaderMenuNavButton = AppHeaderMenuNavButton;
+//# sourceMappingURL=index.cjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderNavButton/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["IconButton","TextButton","useEffect","Avatar","DropdownAnchor","DropdownIcon","StyledText","useAppHeaderDropdownContext","useAppHeaderMenuContext","AppHeaderNavButton","buttonRef","handleOnClick","isOpen","item","text","onFocus","sharedProps","onClick","ref","type","data-testid","variant","alt","disableDropshadow","size","src","avatar","icon","tip","tipProps","alignment","placement","title","fontWeight","textAlign","open","AppHeaderMenuNavButton","props","menuItems","resetIndex","menuItemsArray","values","firstMenuItem","next","value","focus","AppHeaderDropdownNavButton","firstItemRef"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderNavButton/index.tsx"],"sourcesContent":["import { IconButton, TextButton } from '@codecademy/gamut';\nimport { useEffect } from 'react';\n\nimport { Avatar } from '../../../Avatar';\nimport {\n  AppHeaderDropdownItem,\n  DropdownAnchor,\n  DropdownIcon,\n  StyledText,\n} from '../../shared';\nimport { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport { useAppHeaderMenuContext } from '../AppHeaderMenuProvider';\n\ninterface AppHeaderNavButtonProps {\n  buttonRef: React.RefObject<HTMLButtonElement>;\n  handleOnClick: (event: React.MouseEvent) => void;\n  isOpen: boolean;\n  item?: AppHeaderDropdownItem;\n  text?: string;\n  onFocus?: () => void;\n}\n\nconst AppHeaderNavButton: React.FC<AppHeaderNavButtonProps> = ({\n  buttonRef,\n  handleOnClick,\n  isOpen,\n  item,\n  text,\n  onFocus,\n}) => {\n  const sharedProps = {\n    'aria-expanded': isOpen,\n    'aria-haspopup': true,\n    onClick: handleOnClick,\n    ref: buttonRef,\n  };\n\n  if (item?.type === 'profile-dropdown') {\n    return (\n      <TextButton\n        data-testid=\"avatar-dropdown-button\"\n        // this resets our programatic menu index to 0 in case someone clicks out of the dropdown\n        variant=\"interface\"\n        onFocus={onFocus}\n        {...sharedProps}\n      >\n        <Avatar\n          alt=\"User profile avatar\"\n          disableDropshadow\n          size={40}\n          src={item.avatar}\n        />\n      </TextButton>\n    );\n  }\n\n  if (item?.icon && 'isIconOnly' in item) {\n    return (\n      <IconButton\n        icon={item.icon}\n        tip={item.text ?? 'Dropdown'}\n        tipProps={{ alignment: 'bottom-center', placement: 'floating' }}\n        onFocus={onFocus}\n        {...sharedProps}\n      />\n    );\n  }\n\n  return (\n    <DropdownAnchor\n      title={item?.text ?? text}\n      variant=\"interface\"\n      onFocus={onFocus}\n      {...sharedProps}\n    >\n      <StyledText\n        fontWeight={isOpen ? 'bold' : 'normal'}\n        textAlign=\"center\"\n        title={item?.text ?? text}\n      >\n        {item?.text ?? text}\n      </StyledText>\n      <DropdownIcon open={isOpen} size={12} />\n    </DropdownAnchor>\n  );\n};\n\nexport const AppHeaderMenuNavButton: React.FC<AppHeaderNavButtonProps> = ({\n  isOpen,\n  ...props\n}) => {\n  const { menuItems, resetIndex } = useAppHeaderMenuContext();\n\n  useEffect(() => {\n    if (isOpen) {\n      const menuItemsArray = menuItems.values();\n      const firstMenuItem = menuItemsArray.next().value;\n      firstMenuItem?.focus();\n    }\n  }, [isOpen, menuItems]);\n\n  return <AppHeaderNavButton isOpen={isOpen} onFocus={resetIndex} {...props} />;\n};\n\nexport const AppHeaderDropdownNavButton: React.FC<AppHeaderNavButtonProps> = ({\n  isOpen,\n  ...props\n}) => {\n  const { firstItemRef } = useAppHeaderDropdownContext();\n\n  useEffect(() => {\n    if (isOpen) {\n      firstItemRef?.focus();\n    }\n  }, [isOpen, firstItemRef]);\n\n  return <AppHeaderNavButton isOpen={isOpen} {...props} />;\n};\n"],"mappings":";;;;;;;;;;AAsBA,MAAMS,sBAAyD,EAC7DC,WACAC,eACAC,QACAC,MACAC,MACAC,cACD;CACC,MAAMC,cAAc;EAClB,iBAAiBJ;EACjB,iBAAiB;EACjBK,SAASN;EACTO,KAAKR;EACP;AAEA,KAAIG,MAAMM,SAAS,mBACjB,QACE,sBAAA,cAAClB,8BAAAA;EACCmB,eAAY;EAEZC,SAAQ;EACCN;EACR,GAAGC;IAEJ,sBAAA,cAACb,wBAAAA;EACCmB,KAAI;EACJC,mBAAAA;EACAC,MAAM;EACNC,KAAKZ,KAAKa;;AAMlB,KAAIb,MAAMc,QAAQ,gBAAgBd,KAChC,QACE,sBAAA,cAACb,8BAAAA;EACC2B,MAAMd,KAAKc;EACXC,KAAKf,KAAKC,QAAQ;EAClBe,UAAU;GAAEC,WAAW;GAAiBC,WAAW;GAAW;EACrDhB;EACR,GAAGC;;AAKV,QACE,sBAAA,cAACZ,iCAAAA;EACC4B,OAAOnB,MAAMC,QAAQA;EACrBO,SAAQ;EACCN;EACR,GAAGC;IAEJ,sBAAA,cAACV,6BAAAA;EACC2B,YAAYrB,SAAS,SAAS;EAC9BsB,WAAU;EACVF,OAAOnB,MAAMC,QAAQA;IAEpBD,MAAMC,QAAQA,KAAAA,EAEjB,sBAAA,cAACT,+BAAAA;EAAa8B,MAAMvB;EAAQY,MAAM;;;AAKxC,MAAaY,0BAA6D,EACxExB,QACA,GAAGyB,YACJ;CACC,MAAM,EAAEC,WAAWC,eAAe/B,yCAAAA;AAElCN,4BAAU;AACR,MAAIU,OAGF8B,CAFuBJ,UAAUG,QAAM,CACFE,MAAI,CAAGC,OAC7BC,OAAAA;IAEhB,CAACjC,QAAQ0B,UAAU,CAAA;AAEtB,QAAO,sBAAA,cAAC7B,oBAAAA;EAA2BG;EAAQG,SAASwB;EAAa,GAAGF;;;AAGtE,MAAaS,8BAAiE,EAC5ElC,QACA,GAAGyB,YACJ;CACC,MAAM,EAAEU,iBAAiBxC,6CAAAA;AAEzBL,4BAAU;AACR,MAAIU,OACFmC,eAAcF,OAAAA;IAEf,CAACjC,QAAQmC,aAAa,CAAA;AAEzB,QAAO,sBAAA,cAACtC,oBAAAA;EAA2BG;EAAS,GAAGyB"}