@codecademy/brand 3.26.0-alpha.fa0b72ae29.0 → 3.27.0-alpha.745751754b.0

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

@@ -1,53 +1,60 @@
 import { MenuSeparator } from '@codecademy/gamut';
 import * as React from 'react';
-import { useMemo } from 'react';
-import { AppHeaderDropdownLink, AppHeaderMenuItem } from '../AppHeaderDropdownLinks';
+import { useEffect, useRef } from 'react';
+import { useAppHeaderMenuContext } from '../AppHeaderMenuProvider';
+import { StyledAppHeaderLink } from './elements';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const LinkComponent = ({
   action,
-  isFirstElem,
-  isMenuItem,
   link,
-  onKeyDown,
-  showLineBreak = false,
-  tabIndex,
-  mobile
+  mobile,
+  isOpen,
+  role,
+  showLineBreak = false
 }) => {
-  const DropdownLink = useMemo(() => isMenuItem ? AppHeaderMenuItem : AppHeaderDropdownLink, [isMenuItem]);
+  const {
+    menuItems,
+    setMenuItems
+  } = useAppHeaderMenuContext();
+  const ref = useRef(null);
+  useEffect(() => {
+    if (setMenuItems && ref?.current) {
+      setMenuItems(menuItems.add(ref.current));
+    }
+    return () => menuItems.clear();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [showLineBreak && /*#__PURE__*/_jsx(MenuSeparator, {}), /*#__PURE__*/_jsx(DropdownLink, {
+    children: [showLineBreak && /*#__PURE__*/_jsx(MenuSeparator, {}), /*#__PURE__*/_jsx(StyledAppHeaderLink, {
+      ref: ref,
       action: action,
-      isFirstElem: !isMenuItem ? isFirstElem : undefined,
       item: link,
       mobile: mobile,
-      onKeyDown: onKeyDown,
-      role: isMenuItem ? 'menuitem' : undefined,
-      tabIndex: tabIndex
+      role: role,
+      tabIndex: isOpen || mobile ? 0 : -1,
+      isInDropdown: true
     })]
   });
 };
 export const AppHeaderLinkSections = ({
   action,
   item,
-  onKeyDown,
-  tabIndex,
+  isOpen,
   mobile
 }) => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: item.type === 'profile-dropdown' ? item.popover.map((linkSection, sectionIndex) => linkSection.map((link, linkIndex) => /*#__PURE__*/_jsx(LinkComponent, {
       action: action,
       link: link,
-      showLineBreak: sectionIndex !== 0 && linkIndex === 0,
-      tabIndex: tabIndex,
-      isMenuItem: true,
-      mobile: mobile
-    }, link.id))) : item.popover.map((link, linkIndex) => /*#__PURE__*/_jsx(LinkComponent, {
-      onKeyDown: onKeyDown,
+      mobile: mobile,
+      isOpen: isOpen,
+      role: "menuitem",
+      showLineBreak: sectionIndex !== 0 && linkIndex === 0
+    }, link.id))) : item.popover.map(link => /*#__PURE__*/_jsx(LinkComponent, {
       action: action,
       link: link,
-      tabIndex: tabIndex,
-      isFirstElem: linkIndex === 0,
-      mobile: mobile
+      mobile: mobile,
+      isOpen: isOpen
     }, link.id))
   });
 };

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

@@ -3,7 +3,10 @@ interface AppHeaderNavButtonProps {
     buttonRef: React.RefObject<HTMLButtonElement>;
     handleOnClick: (event: React.MouseEvent) => void;
     isOpen: boolean;
-    item: AppHeaderDropdownItem;
+    item?: AppHeaderDropdownItem;
+    text?: string;
+    onFocus?: () => void;
 }
-export declare const AppHeaderNavButton: React.FC<AppHeaderNavButtonProps>;
+export declare const AppHeaderMenuNavButton: React.FC<AppHeaderNavButtonProps>;
+export declare const AppHeaderDropdownNavButton: React.FC<AppHeaderNavButtonProps>;
 export {};

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

@@ -1,36 +1,103 @@
-import { AppHeaderDropdownNavButton } from './AppHeaderDropdownNavButton';
-import { AppHeaderMenuNavButton } from './AppHeaderMenuNavButton';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const AppHeaderNavButton = ({
+import { IconButton, TextButton } from '@codecademy/gamut';
+import { useEffect } from 'react';
+import { Avatar } from '../../../Avatar';
+import { DropdownAnchor, DropdownIcon, StyledText } from '../../shared';
+import { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
+import { useAppHeaderMenuContext } from '../AppHeaderMenuProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AppHeaderNavButton = ({
   buttonRef,
   handleOnClick,
   isOpen,
-  item
+  item,
+  text,
+  onFocus
 }) => {
-  const isProfileDropdown = item.type === 'profile-dropdown';
-  if (isProfileDropdown) {
-    return /*#__PURE__*/_jsx(AppHeaderMenuNavButton, {
-      buttonRef: buttonRef,
-      handleOnClick: handleOnClick,
-      isOpen: isOpen,
-      item: item
+  const sharedProps = {
+    'aria-expanded': isOpen,
+    'aria-haspopup': true,
+    onClick: handleOnClick,
+    ref: buttonRef
+  };
+  if (item?.type === 'profile-dropdown') {
+    return /*#__PURE__*/_jsx(TextButton, {
+      "data-testid": "avatar-dropdown-button"
+      // this resets our programatic menu index to 0 in case someone clicks out of the dropdown
+      ,
+      variant: "interface",
+      onFocus: onFocus,
+      ...sharedProps,
+      children: /*#__PURE__*/_jsx(Avatar, {
+        alt: "User profile avatar",
+        disableDropshadow: true,
+        size: 40,
+        src: item.avatar
+      })
     });
   }
-  if ('isIconOnly' in item && item?.icon) {
-    return /*#__PURE__*/_jsx(AppHeaderDropdownNavButton, {
-      buttonRef: buttonRef,
-      handleOnClick: handleOnClick,
-      isOpen: isOpen,
-      title: item.text,
+  if (item?.icon && 'isIconOnly' in item) {
+    return /*#__PURE__*/_jsx(IconButton, {
       icon: item.icon,
-      isIconOnly: item.isIconOnly
+      tip: item.text ?? 'Dropdown',
+      tipProps: {
+        alignment: 'bottom-center',
+        placement: 'floating'
+      },
+      onFocus: onFocus,
+      ...sharedProps
     });
   }
-  return /*#__PURE__*/_jsx(AppHeaderDropdownNavButton, {
-    buttonRef: buttonRef,
-    handleOnClick: handleOnClick,
+  return /*#__PURE__*/_jsxs(DropdownAnchor, {
+    title: item?.text ?? text,
+    variant: "interface",
+    onFocus: onFocus,
+    ...sharedProps,
+    children: [/*#__PURE__*/_jsx(StyledText, {
+      fontWeight: isOpen ? 'bold' : 'normal',
+      textAlign: "center",
+      title: item?.text ?? text,
+      children: item?.text ?? text
+    }), /*#__PURE__*/_jsx(DropdownIcon, {
+      open: isOpen,
+      size: 12
+    })]
+  });
+};
+export const AppHeaderMenuNavButton = ({
+  isOpen,
+  ...props
+}) => {
+  const {
+    menuItems,
+    resetIndex
+  } = useAppHeaderMenuContext();
+  useEffect(() => {
+    if (isOpen) {
+      const menuItemsArray = menuItems.values();
+      const firstMenuItem = menuItemsArray.next().value;
+      firstMenuItem?.focus();
+    }
+  }, [isOpen, menuItems]);
+  return /*#__PURE__*/_jsx(AppHeaderNavButton, {
+    isOpen: isOpen,
+    onFocus: resetIndex,
+    ...props
+  });
+};
+export const AppHeaderDropdownNavButton = ({
+  isOpen,
+  ...props
+}) => {
+  const {
+    firstItemRef
+  } = useAppHeaderDropdownContext();
+  useEffect(() => {
+    if (isOpen) {
+      firstItemRef?.focus();
+    }
+  }, [isOpen, firstItemRef]);
+  return /*#__PURE__*/_jsx(AppHeaderNavButton, {
     isOpen: isOpen,
-    title: item.text,
-    icon: item?.icon
+    ...props
   });
 };

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

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { DropdownPositions, useHeaderDisplayContext } from '../../../GlobalHeader/context';
 import { AnimatedMegaMenuDropdown } from '../../shared';
 import { AppHeaderDropdownProvider } from '../AppHeaderDropdownProvider';
-import { AppHeaderDropdownNavButton } from '../AppHeaderNavButton/AppHeaderDropdownNavButton';
+import { AppHeaderDropdownNavButton } from '../AppHeaderNavButton';
 import { useAppHeaderContext } from '../AppHeaderProvider';
 import { AppHeaderSection } from '../AppHeaderSection';
 import { RESOURCES_NAV_SECTIONS } from './consts';
@@ -15,7 +15,7 @@ const StyledAnimatedMegaMenuDropdown = /*#__PURE__*/_styled(AnimatedMegaMenuDrop
   shouldForwardProp: prop => prop !== 'narrowResourceDropdownPosition' && prop !== 'wideResourceDropdownPosition',
   target: "ekdg1bw0",
   label: "StyledAnimatedMegaMenuDropdown"
-})("left:", ({
+})("top:3.5rem;left:", ({
   narrowResourceDropdownPosition
 }) => {
   return narrowResourceDropdownPosition;
@@ -23,7 +23,7 @@ const StyledAnimatedMegaMenuDropdown = /*#__PURE__*/_styled(AnimatedMegaMenuDrop
   wideResourceDropdownPosition
 }) => {
   return wideResourceDropdownPosition;
-}, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDRSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbG9yTW9kZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge1xuICBEcm9wZG93blBvc2l0aW9ucyxcbiAgdXNlSGVhZGVyRGlzcGxheUNvbnRleHQsXG59IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcbmltcG9ydCB7XG4gIEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93bixcbiAgQXBwSGVhZGVyQWN0aW9uLFxuICBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIH0gZnJvbSAnLi4vQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlcic7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93bk5hdkJ1dHRvbiB9IGZyb20gJy4uL0FwcEhlYWRlck5hdkJ1dHRvbi9BcHBIZWFkZXJEcm9wZG93bk5hdkJ1dHRvbic7XG5pbXBvcnQgeyB1c2VBcHBIZWFkZXJDb250ZXh0IH0gZnJvbSAnLi4vQXBwSGVhZGVyUHJvdmlkZXInO1xuaW1wb3J0IHsgQXBwSGVhZGVyU2VjdGlvbiB9IGZyb20gJy4uL0FwcEhlYWRlclNlY3Rpb24nO1xuaW1wb3J0IHsgUkVTT1VSQ0VTX05BVl9TRUNUSU9OUyB9IGZyb20gJy4vY29uc3RzJztcblxuZXhwb3J0IHR5cGUgQXBwSGVhZGVyUmVzb3VyY2VEcm9wZG93blByb3BzID0gQXBwSGVhZGVyQWN0aW9uICYge1xuICBpdGVtOiBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW07XG59O1xuXG5jb25zdCBTdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24gPSBzdHlsZWQoQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duLCB7XG4gIC8vIHByZXZlbnQgdGhlIHByb3BzIGZyb20gYmVpbmcgcGFzc2VkIHRvIHRoZSBET00gZWxlbWVudCwgd2hpY2ggd291bGQgY2F1c2UgYSBSZWFjdCB3YXJuaW5nLlxuICBzaG91bGRGb3J3YXJkUHJvcDogKHByb3ApID0+XG4gICAgcHJvcCAhPT0gJ25hcnJvd1Jlc291cmNlRHJvcGRvd25Qb3NpdGlvbicgJiZcbiAgICBwcm9wICE9PSAnd2lkZVJlc291cmNlRHJvcGRvd25Qb3NpdGlvbicsXG59KTx7XG4gIG5hcnJvd1Jlc291cmNlRHJvcGRvd25Qb3NpdGlvbjogc3RyaW5nO1xuICB3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9uOiBzdHJpbmc7XG59PmBcbiAgbGVmdDogJHsoeyBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gfSkgPT4ge1xuICAgIHJldHVybiBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb247XG4gIH19O1xuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMjYxcHgpIHtcbiAgICBsZWZ0OiAkeyh7IHdpZGVSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gfSkgPT4ge1xuICAgICAgcmV0dXJuIHdpZGVSZXNvdXJjZURyb3Bkb3duUG9zaXRpb247XG4gICAgfX07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bjogUmVhY3QuRkM8XG4gIEFwcEhlYWRlclJlc291cmNlRHJvcGRvd25Qcm9wc1xuPiA9ICh7IGFjdGlvbiwgaXRlbSB9KSA9PiB7XG4gIGNvbnN0IHsgdGV4dCB9ID0gaXRlbTtcbiAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IGJ1dHRvblJlZiA9IHVzZVJlZjxIVE1MQnV0dG9uRWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGRyb3Bkb3duUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgbGFzdE9wZW5lZERyb3Bkb3duLCBzZXRMYXN0T3BlbmVkRHJvcGRvd24gfSA9IHVzZUFwcEhlYWRlckNvbnRleHQoKTtcbiAgY29uc3QgeyBoZWFkZXJUeXBlIH0gPSB1c2VIZWFkZXJEaXNwbGF5Q29udGV4dCgpO1xuICBjb25zdCB7IHJlc291cmNlRHJvcGRvd24gfSA9IERyb3Bkb3duUG9zaXRpb25zW2hlYWRlclR5cGVdO1xuICBjb25zdCBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gPSByZXNvdXJjZURyb3Bkb3duLm5hcnJvdztcbiAgY29uc3Qgd2lkZVJlc291cmNlRHJvcGRvd25Qb3NpdGlvbiA9IHJlc291cmNlRHJvcGRvd24ud2lkZTtcblxuICAvLyBBZGQgc2Nyb2xsYmFyIGZvciBzaG9ydCBzY3JlZW5zIGFmdGVyIHRyYW5zaXRpb24gKG90aGVyd2lzZSBzY3JvbGxiYXIgYXBwZWFycyBhbmQgZGlzc2FwZWFycyBmb3IgYWRlcXVhdGUgaGVpZ2h0cyBkdXJpbmcgdHJhbnNpdGlvbilcbiAgY29uc3QgW2FuaW1hdGlvbkNvbXBsZXRlU3R5bGVzLCBzZXRBbmltYXRpb25Db21wbGV0ZVN0eWxlc10gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgY29uc3QgYW5pbWF0aW9uRmluaXNoZWQgPSAoKSA9PiB7XG4gICAgc2V0QW5pbWF0aW9uQ29tcGxldGVTdHlsZXMoaXNPcGVuKTtcbiAgICBpZiAoaXNPcGVuICYmIGRyb3Bkb3duUmVmLmN1cnJlbnQpIHtcbiAgICAgIGRyb3Bkb3duUmVmLmN1cnJlbnQuc2Nyb2xsVG9wID0gMDtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgdG9nZ2xlSXNPcGVuID0gKCkgPT4gc2V0SXNPcGVuKChwcmV2KSA9PiAhcHJldik7XG5cbiAgY29uc3QgaGFuZGxlT25DbGljayA9IChldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT4ge1xuICAgIHRvZ2dsZUlzT3BlbigpO1xuICAgIGlmICghaXNPcGVuKSB7XG4gICAgICBhY3Rpb24oZXZlbnQsIGl0ZW0pO1xuICAgICAgaWYgKHNldExhc3RPcGVuZWREcm9wZG93bikge1xuICAgICAgICBzZXRMYXN0T3BlbmVkRHJvcGRvd24odGV4dCk7XG4gICAgICB9XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUNsb3NlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgYnV0dG9uUmVmPy5jdXJyZW50Py5mb2N1cygpO1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAobGFzdE9wZW5lZERyb3Bkb3duICE9PSB0ZXh0ICYmIGlzT3Blbikge1xuICAgICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICB9XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB9LCBbbGFzdE9wZW5lZERyb3Bkb3duXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBmdW5jdGlvbiBoYW5kbGVDbGlja091dHNpZGUoZXZlbnQ6IE1vdXNlRXZlbnQgfCBFdmVudCkge1xuICAgICAgY29uc3QgY29udGFpbmVyID0gY29udGFpbmVyUmVmPy5jdXJyZW50O1xuICAgICAgY29uc3QgYnV0dG9uID0gYnV0dG9uUmVmPy5jdXJyZW50O1xuICAgICAgaWYgKFxuICAgICAgICBpc09wZW4gJiZcbiAgICAgICAgY29udGFpbmVyICYmXG4gICAgICAgICFjb250YWluZXIuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpICYmXG4gICAgICAgIGJ1dHRvbiAmJlxuICAgICAgICAhYnV0dG9uLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKVxuICAgICAgKSB7XG4gICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2JsdXInLCBoYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH07XG4gIH0sIFtjb250YWluZXJSZWYsIGhhbmRsZUNsb3NlLCBpc09wZW5dKTtcblxuICByZXR1cm4gKFxuICAgIDxBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIGhhbmRsZUNsb3NlPXtoYW5kbGVDbG9zZX0+XG4gICAgICA8QXBwSGVhZGVyRHJvcGRvd25OYXZCdXR0b25cbiAgICAgICAgYnV0dG9uUmVmPXtidXR0b25SZWZ9XG4gICAgICAgIGhhbmRsZU9uQ2xpY2s9e2hhbmRsZU9uQ2xpY2t9XG4gICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICB0aXRsZT17dGV4dH1cbiAgICAgIC8+XG4gICAgICA8U3R5bGVkQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duXG4gICAgICAgIG5hcnJvd1Jlc291cmNlRHJvcGRvd25Qb3NpdGlvbj17bmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9ufVxuICAgICAgICB3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9uPXt3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9ufVxuICAgICAgICB0YWJJbmRleD17LTF9IC8vIHByZXZlbnQgZnJvbSBpbnRlcmZlcmluZyB3aXRoIEFwcEhlYWRlciBmb2N1cyBsb2dpY1xuICAgICAgICByZWY9e2Ryb3Bkb3duUmVmfVxuICAgICAgICBzdHlsZT17e1xuICAgICAgICAgIHRvcDogJzMuNXJlbScsXG4gICAgICAgICAgbWluV2lkdGg6ICc2NHJlbScsXG4gICAgICAgICAgb3ZlcmZsb3dZOiAnYXV0bycsXG4gICAgICAgICAgbWF4SGVpZ2h0OiBhbmltYXRpb25Db21wbGV0ZVN0eWxlcyA/ICc4NXZoJyA6IDAsXG4gICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAndHJhbnNwYXJlbnQnLFxuICAgICAgICB9fVxuICAgICAgICBpbml0aWFsPXt7IGJvcmRlcldpZHRoOiAwLCBoZWlnaHQ6IDAgfX1cbiAgICAgICAgYW5pbWF0ZT17e1xuICAgICAgICAgIGJvcmRlcldpZHRoOiAwLFxuICAgICAgICAgIGhlaWdodDogaXNPcGVuID8gJ2ZpdC1jb250ZW50JyA6IDAsXG4gICAgICAgIH19XG4gICAgICAgIHRyYW5zaXRpb249e3sgZHVyYXRpb246IDAuMTc1IH19XG4gICAgICAgIGFyaWEtaGlkZGVuPXshaXNPcGVufVxuICAgICAgICBkYXRhLXRlc3RpZD1cInJlc291cmNlcy1tZW51LWRyb3Bkb3duXCJcbiAgICAgICAgb25BbmltYXRpb25Db21wbGV0ZT17YW5pbWF0aW9uRmluaXNoZWR9XG4gICAgICA+XG4gICAgICAgIDxDb2xvck1vZGUgbW9kZT1cImxpZ2h0XCI+XG4gICAgICAgICAgPEFwcEhlYWRlclNlY3Rpb25cbiAgICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgICAgcmVmPXtjb250YWluZXJSZWZ9XG4gICAgICAgICAgICBuYXZTZWN0aW9ucz17UkVTT1VSQ0VTX05BVl9TRUNUSU9OU31cbiAgICAgICAgICAgIGhhbmRsZUNsb3NlPXsoKSA9PiBzZXRJc09wZW4oZmFsc2UpfVxuICAgICAgICAgICAgdHlwZT1cInJlc291cmNlcy1kcm9wZG93blwiXG4gICAgICAgICAgLz5cbiAgICAgICAgPC9Db2xvck1vZGU+XG4gICAgICA8L1N0eWxlZEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93bj5cbiAgICA8L0FwcEhlYWRlckRyb3Bkb3duUHJvdmlkZXI+XG4gICk7XG59O1xuIl19 */"));
+}, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDRSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbG9yTW9kZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge1xuICBEcm9wZG93blBvc2l0aW9ucyxcbiAgdXNlSGVhZGVyRGlzcGxheUNvbnRleHQsXG59IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcbmltcG9ydCB7XG4gIEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93bixcbiAgQXBwSGVhZGVyQWN0aW9uLFxuICBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIH0gZnJvbSAnLi4vQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlcic7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93bk5hdkJ1dHRvbiB9IGZyb20gJy4uL0FwcEhlYWRlck5hdkJ1dHRvbic7XG5pbXBvcnQgeyB1c2VBcHBIZWFkZXJDb250ZXh0IH0gZnJvbSAnLi4vQXBwSGVhZGVyUHJvdmlkZXInO1xuaW1wb3J0IHsgQXBwSGVhZGVyU2VjdGlvbiB9IGZyb20gJy4uL0FwcEhlYWRlclNlY3Rpb24nO1xuaW1wb3J0IHsgUkVTT1VSQ0VTX05BVl9TRUNUSU9OUyB9IGZyb20gJy4vY29uc3RzJztcblxuZXhwb3J0IHR5cGUgQXBwSGVhZGVyUmVzb3VyY2VEcm9wZG93blByb3BzID0gQXBwSGVhZGVyQWN0aW9uICYge1xuICBpdGVtOiBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW07XG59O1xuXG5jb25zdCBTdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24gPSBzdHlsZWQoQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duLCB7XG4gIC8vIHByZXZlbnQgdGhlIHByb3BzIGZyb20gYmVpbmcgcGFzc2VkIHRvIHRoZSBET00gZWxlbWVudCwgd2hpY2ggd291bGQgY2F1c2UgYSBSZWFjdCB3YXJuaW5nLlxuICBzaG91bGRGb3J3YXJkUHJvcDogKHByb3ApID0+XG4gICAgcHJvcCAhPT0gJ25hcnJvd1Jlc291cmNlRHJvcGRvd25Qb3NpdGlvbicgJiZcbiAgICBwcm9wICE9PSAnd2lkZVJlc291cmNlRHJvcGRvd25Qb3NpdGlvbicsXG59KTx7XG4gIG5hcnJvd1Jlc291cmNlRHJvcGRvd25Qb3NpdGlvbjogc3RyaW5nO1xuICB3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9uOiBzdHJpbmc7XG59PmBcbiAgdG9wOiAzLjVyZW07XG4gIGxlZnQ6ICR7KHsgbmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9uIH0pID0+IHtcbiAgICByZXR1cm4gbmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9uO1xuICB9fTtcblxuICBAbWVkaWEgKG1pbi13aWR0aDogMTI2MXB4KSB7XG4gICAgbGVmdDogJHsoeyB3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9uIH0pID0+IHtcbiAgICAgIHJldHVybiB3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9uO1xuICAgIH19O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd246IFJlYWN0LkZDPFxuICBBcHBIZWFkZXJSZXNvdXJjZURyb3Bkb3duUHJvcHNcbj4gPSAoeyBhY3Rpb24sIGl0ZW0gfSkgPT4ge1xuICBjb25zdCB7IHRleHQgfSA9IGl0ZW07XG4gIGNvbnN0IGNvbnRhaW5lclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudCB8IG51bGw+KG51bGwpO1xuICBjb25zdCBidXR0b25SZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KG51bGwpO1xuICBjb25zdCBkcm9wZG93blJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudCB8IG51bGw+KG51bGwpO1xuICBjb25zdCBbaXNPcGVuLCBzZXRJc09wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCB7IGxhc3RPcGVuZWREcm9wZG93biwgc2V0TGFzdE9wZW5lZERyb3Bkb3duIH0gPSB1c2VBcHBIZWFkZXJDb250ZXh0KCk7XG4gIGNvbnN0IHsgaGVhZGVyVHlwZSB9ID0gdXNlSGVhZGVyRGlzcGxheUNvbnRleHQoKTtcbiAgY29uc3QgeyByZXNvdXJjZURyb3Bkb3duIH0gPSBEcm9wZG93blBvc2l0aW9uc1toZWFkZXJUeXBlXTtcbiAgY29uc3QgbmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9uID0gcmVzb3VyY2VEcm9wZG93bi5uYXJyb3c7XG4gIGNvbnN0IHdpZGVSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gPSByZXNvdXJjZURyb3Bkb3duLndpZGU7XG5cbiAgY29uc3QgYW5pbWF0aW9uRmluaXNoZWQgPSAoKSA9PiB7XG4gICAgaWYgKGlzT3BlbiAmJiBkcm9wZG93blJlZi5jdXJyZW50KSB7XG4gICAgICBkcm9wZG93blJlZi5jdXJyZW50LnNjcm9sbFRvcCA9IDA7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IHRvZ2dsZUlzT3BlbiA9ICgpID0+IHNldElzT3BlbigocHJldikgPT4gIXByZXYpO1xuXG4gIGNvbnN0IGhhbmRsZU9uQ2xpY2sgPSAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICB0b2dnbGVJc09wZW4oKTtcbiAgICBpZiAoIWlzT3Blbikge1xuICAgICAgYWN0aW9uKGV2ZW50LCBpdGVtKTtcbiAgICAgIGlmIChzZXRMYXN0T3BlbmVkRHJvcGRvd24pIHtcbiAgICAgICAgc2V0TGFzdE9wZW5lZERyb3Bkb3duKHRleHQpO1xuICAgICAgfVxuICAgIH1cbiAgfTtcblxuICBjb25zdCBoYW5kbGVDbG9zZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBzZXRJc09wZW4oZmFsc2UpO1xuICAgIGJ1dHRvblJlZj8uY3VycmVudD8uZm9jdXMoKTtcbiAgfSwgW10pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGxhc3RPcGVuZWREcm9wZG93biAhPT0gdGV4dCAmJiBpc09wZW4pIHtcbiAgICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgfVxuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSByZWFjdC1ob29rcy9leGhhdXN0aXZlLWRlcHNcbiAgfSwgW2xhc3RPcGVuZWREcm9wZG93bl0pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgZnVuY3Rpb24gaGFuZGxlQ2xpY2tPdXRzaWRlKGV2ZW50OiBNb3VzZUV2ZW50IHwgRXZlbnQpIHtcbiAgICAgIGNvbnN0IGNvbnRhaW5lciA9IGNvbnRhaW5lclJlZj8uY3VycmVudDtcbiAgICAgIGNvbnN0IGJ1dHRvbiA9IGJ1dHRvblJlZj8uY3VycmVudDtcbiAgICAgIGlmIChcbiAgICAgICAgaXNPcGVuICYmXG4gICAgICAgIGNvbnRhaW5lciAmJlxuICAgICAgICAhY29udGFpbmVyLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKSAmJlxuICAgICAgICBidXR0b24gJiZcbiAgICAgICAgIWJ1dHRvbi5jb250YWlucyhldmVudC50YXJnZXQgYXMgTm9kZSlcbiAgICAgICkge1xuICAgICAgICBoYW5kbGVDbG9zZSgpO1xuICAgICAgfVxuICAgIH1cblxuICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ21vdXNlZG93bicsIGhhbmRsZUNsaWNrT3V0c2lkZSk7XG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignYmx1cicsIGhhbmRsZUNsaWNrT3V0c2lkZSk7XG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ21vdXNlZG93bicsIGhhbmRsZUNsaWNrT3V0c2lkZSk7XG4gICAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICB9O1xuICB9LCBbY29udGFpbmVyUmVmLCBoYW5kbGVDbG9zZSwgaXNPcGVuXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8QXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlciBoYW5kbGVDbG9zZT17aGFuZGxlQ2xvc2V9PlxuICAgICAgPEFwcEhlYWRlckRyb3Bkb3duTmF2QnV0dG9uXG4gICAgICAgIGJ1dHRvblJlZj17YnV0dG9uUmVmfVxuICAgICAgICBoYW5kbGVPbkNsaWNrPXtoYW5kbGVPbkNsaWNrfVxuICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgdGV4dD17dGV4dH1cbiAgICAgIC8+XG4gICAgICA8U3R5bGVkQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duXG4gICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb249e25hcnJvd1Jlc291cmNlRHJvcGRvd25Qb3NpdGlvbn1cbiAgICAgICAgd2lkZVJlc291cmNlRHJvcGRvd25Qb3NpdGlvbj17d2lkZVJlc291cmNlRHJvcGRvd25Qb3NpdGlvbn1cbiAgICAgICAgdGFiSW5kZXg9ey0xfSAvLyBwcmV2ZW50IGZyb20gaW50ZXJmZXJpbmcgd2l0aCBBcHBIZWFkZXIgZm9jdXMgbG9naWNcbiAgICAgICAgcmVmPXtkcm9wZG93blJlZn1cbiAgICAgICAgZGF0YS10ZXN0aWQ9XCJyZXNvdXJjZXMtbWVudS1kcm9wZG93blwiXG4gICAgICAgIG9uQW5pbWF0aW9uQ29tcGxldGU9e2FuaW1hdGlvbkZpbmlzaGVkfVxuICAgICAgPlxuICAgICAgICA8Q29sb3JNb2RlIG1vZGU9XCJsaWdodFwiPlxuICAgICAgICAgIDxBcHBIZWFkZXJTZWN0aW9uXG4gICAgICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgICAgIHJlZj17Y29udGFpbmVyUmVmfVxuICAgICAgICAgICAgbmF2U2VjdGlvbnM9e1JFU09VUkNFU19OQVZfU0VDVElPTlN9XG4gICAgICAgICAgICBoYW5kbGVDbG9zZT17KCkgPT4gc2V0SXNPcGVuKGZhbHNlKX1cbiAgICAgICAgICAgIHR5cGU9XCJyZXNvdXJjZXMtZHJvcGRvd25cIlxuICAgICAgICAgIC8+XG4gICAgICAgIDwvQ29sb3JNb2RlPlxuICAgICAgPC9TdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24+XG4gICAgPC9BcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyPlxuICApO1xufTtcbiJdfQ== */"));
 export const AppHeaderResourcesDropdown = ({
   action,
   item
@@ -47,11 +47,7 @@ export const AppHeaderResourcesDropdown = ({
   } = DropdownPositions[headerType];
   const narrowResourceDropdownPosition = resourceDropdown.narrow;
   const wideResourceDropdownPosition = resourceDropdown.wide;
-
-  // Add scrollbar for short screens after transition (otherwise scrollbar appears and dissapears for adequate heights during transition)
-  const [animationCompleteStyles, setAnimationCompleteStyles] = useState(false);
   const animationFinished = () => {
-    setAnimationCompleteStyles(isOpen);
     if (isOpen && dropdownRef.current) {
       dropdownRef.current.scrollTop = 0;
     }
@@ -97,32 +93,14 @@ export const AppHeaderResourcesDropdown = ({
       buttonRef: buttonRef,
       handleOnClick: handleOnClick,
       isOpen: isOpen,
-      title: text
+      text: text
     }), /*#__PURE__*/_jsx(StyledAnimatedMegaMenuDropdown, {
+      isOpen: isOpen,
       narrowResourceDropdownPosition: narrowResourceDropdownPosition,
       wideResourceDropdownPosition: wideResourceDropdownPosition,
       tabIndex: -1 // prevent from interfering with AppHeader focus logic
       ,
       ref: dropdownRef,
-      style: {
-        top: '3.5rem',
-        minWidth: '64rem',
-        overflowY: 'auto',
-        maxHeight: animationCompleteStyles ? '85vh' : 0,
-        backgroundColor: 'transparent'
-      },
-      initial: {
-        borderWidth: 0,
-        height: 0
-      },
-      animate: {
-        borderWidth: 0,
-        height: isOpen ? 'fit-content' : 0
-      },
-      transition: {
-        duration: 0.175
-      },
-      "aria-hidden": !isOpen,
       "data-testid": "resources-menu-dropdown",
       onAnimationComplete: animationFinished,
       children: /*#__PURE__*/_jsx(ColorMode, {

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/NavSection.d.ts

@@ -2,8 +2,8 @@ import { GamutIconProps } from '@codecademy/gamut-icons';
 import React, { PropsWithChildren } from 'react';
 import { AppHeaderCatalogDropdownItem, AppHeaderResourcesDropdownItem } from '../../shared';
 type NavSectionProps = PropsWithChildren & {
-    activeTab: number;
     item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;
+    isActiveTab: boolean;
     setActiveTab: (tab: number) => void;
     icon?: React.ComponentType<GamutIconProps>;
     text: string;
@@ -17,5 +17,5 @@ export declare const NavigationButton: import("@emotion/styled").StyledComponent
     isActive: boolean;
     index: number;
 }, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-declare const NavSection: ({ activeTab, setActiveTab, icon: Icon, text, index, children, item, tabIndex, }: NavSectionProps) => import("react/jsx-runtime").JSX.Element;
+declare const NavSection: ({ isActiveTab, setActiveTab, icon: Icon, text, index, children, item, tabIndex, }: NavSectionProps) => import("react/jsx-runtime").JSX.Element;
 export default NavSection;