@codecademy/brand 4.0.0-alpha.af4a3e14fc.0 → 4.0.0-alpha.bec91dc078.0

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.js

@@ -13,4 +13,5 @@ const useAppHeaderSectionContext = () => {
 };
 
 //#endregion
-export { AppHeaderSectionContext, useAppHeaderSectionContext };
+export { AppHeaderSectionContext, useAppHeaderSectionContext };
+//# sourceMappingURL=AppHeaderSectionContext.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeaderSectionContext.js","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.tsx"],"sourcesContent":["import { noop } from 'lodash/fp';\nimport { createContext, useContext } from 'react';\n\nexport interface AppHeaderSectionContextType {\n  activePanel: number | null;\n  setActivePanel: (panel: number | null) => void;\n  tabIndex: number;\n  isCoachingEnabled?: boolean;\n}\n\nexport const AppHeaderSectionContext =\n  createContext<AppHeaderSectionContextType>({\n    activePanel: null,\n    setActivePanel: noop,\n    tabIndex: 0,\n    isCoachingEnabled: undefined,\n  });\n\nexport const useAppHeaderSectionContext = () => {\n  return useContext(AppHeaderSectionContext);\n};\n"],"mappings":";;;;AAUA,MAAa,0BACX,cAA2C;CACzC,aAAa;CACb,gBAAgB;CAChB,UAAU;CACV,mBAAmB;CACpB,CAAC;AAEJ,MAAa,mCAAmC;AAC9C,QAAO,WAAW,wBAAwB"}

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.js

@@ -80,4 +80,5 @@ const MobileBackButton = ({ handleClose, type }) => {
 };
 
 //#endregion
-export { MobileBackButton };
+export { MobileBackButton };
+//# sourceMappingURL=MobileBackButton.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileBackButton.js","names":["MobileBackButton: React.FC<MobileBackButtonProps>"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.tsx"],"sourcesContent":["import { Box, FlexBox, Text } from '@codecademy/gamut';\nimport { ArrowLeftIcon } from '@codecademy/gamut-icons';\nimport React from 'react';\n\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\nimport { NavIconButton, NavigationButton, SmallMenuButton } from './elements';\n\nexport type MobileBackButtonProps = {\n  handleClose: () => void;\n  type: 'catalog-dropdown' | 'resources-dropdown';\n};\n\nexport const MobileBackButton: React.FC<MobileBackButtonProps> = ({\n  handleClose,\n  type,\n}) => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n\n  const handleBackButtonClick = (\n    event: React.MouseEvent<HTMLButtonElement>\n  ) => {\n    globalHeaderItemClick(event, {\n      id: 'back',\n      text: 'Back',\n      type,\n    });\n    handleClose();\n  };\n\n  return (\n    <>\n      <Box display={{ _: 'none', sm: 'block' }}>\n        <NavigationButton isActive={false} onClick={handleBackButtonClick}>\n          <FlexBox gap={8} alignItems=\"center\">\n            <Box height={24} width={24}>\n              <ArrowLeftIcon size={24} />\n            </Box>\n            <Text>Back</Text>\n          </FlexBox>\n        </NavigationButton>\n      </Box>\n      <Box\n        display={{ _: 'none', xs: 'grid', sm: 'none' }}\n        ml={8}\n        gridColumn=\"1\"\n        gridRow=\"1\"\n      >\n        <NavIconButton\n          onClick={handleBackButtonClick}\n          icon={ArrowLeftIcon}\n          tip=\"Back to main navigation\"\n          tipProps={{\n            alignment: 'right-center',\n            narrow: false,\n            placement: 'floating',\n          }}\n          aria-label=\"Back to main navigation\"\n        />\n      </Box>\n      <Box display={{ _: 'flex', xs: 'none' }}>\n        <SmallMenuButton index={0} onClick={handleBackButtonClick}>\n          <FlexBox gap={8} alignItems=\"center\">\n            <Box height={24} width={24}>\n              <ArrowLeftIcon size={24} />\n            </Box>\n            <Text>Back</Text>\n          </FlexBox>\n        </SmallMenuButton>\n      </Box>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;AAYA,MAAaA,oBAAqD,EAChE,aACA,WACI;CACJ,MAAM,EAAE,0BAA0B,0BAA0B;CAE5D,MAAM,yBACJ,UACG;AACH,wBAAsB,OAAO;GAC3B,IAAI;GACJ,MAAM;GACN;GACD,CAAC;AACF,eAAa;;AAGf,QACE;EACE,oBAAC;GAAI,SAAS;IAAE,GAAG;IAAQ,IAAI;IAAS;aACtC,oBAAC;IAAiB,UAAU;IAAO,SAAS;cAC1C,qBAAC;KAAQ,KAAK;KAAG,YAAW;gBAC1B,oBAAC;MAAI,QAAQ;MAAI,OAAO;gBACtB,oBAAC,iBAAc,MAAM,KAAM;OACvB,EACN,oBAAC,kBAAK,SAAW;MACT;KACO;IACf;EACN,oBAAC;GACC,SAAS;IAAE,GAAG;IAAQ,IAAI;IAAQ,IAAI;IAAQ;GAC9C,IAAI;GACJ,YAAW;GACX,SAAQ;aAER,oBAAC;IACC,SAAS;IACT,MAAM;IACN,KAAI;IACJ,UAAU;KACR,WAAW;KACX,QAAQ;KACR,WAAW;KACZ;IACD,cAAW;KACX;IACE;EACN,oBAAC;GAAI,SAAS;IAAE,GAAG;IAAQ,IAAI;IAAQ;aACrC,oBAAC;IAAgB,OAAO;IAAG,SAAS;cAClC,qBAAC;KAAQ,KAAK;KAAG,YAAW;gBAC1B,oBAAC;MAAI,QAAQ;MAAI,OAAO;gBACtB,oBAAC,iBAAc,MAAM,KAAM;OACvB,EACN,oBAAC,kBAAK,SAAW;MACT;KACM;IACd;KACL"}

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.js

@@ -46,4 +46,5 @@ const MobileNavMenu = ({ handleClose, type, navSections }) => {
 };
 
 //#endregion
-export { MobileNavMenu };
+export { MobileNavMenu };
+//# sourceMappingURL=MobileNavMenu.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileNavMenu.js","names":["MobileNavMenu: React.FC<MobileNavMenuProps>"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.tsx"],"sourcesContent":["import { Box, FlexBox, Text } from '@codecademy/gamut';\nimport { ArrowChevronRightIcon } from '@codecademy/gamut-icons';\nimport { theme } from '@codecademy/gamut-styles';\nimport * as React from 'react';\n\nimport {\n  AppHeaderCatalogDropdownItem,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport { useAppHeaderSectionContext } from './AppHeaderSectionContext';\nimport { SmallMenuButton } from './elements';\nimport { MobileBackButton } from './MobileBackButton';\n\nexport type MobileNavMenuProps = {\n  handleClose: () => void;\n  type: 'catalog-dropdown' | 'resources-dropdown';\n  navSections: {\n    item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;\n    panel: React.ComponentType;\n  }[];\n};\n\nexport const MobileNavMenu: React.FC<MobileNavMenuProps> = ({\n  handleClose,\n  type,\n  navSections,\n}) => {\n  const { activePanel, setActivePanel } = useAppHeaderSectionContext();\n\n  const ActivePanel = navSections[activePanel ?? 0].panel;\n\n  return (\n    <FlexBox\n      display={{ _: 'flex', xs: 'none' }}\n      flexDirection=\"column\"\n      gap={8}\n      p={16}\n    >\n      {activePanel === null && (\n        <>\n          <MobileBackButton handleClose={handleClose} type={type} />\n          {navSections.map(({ item }, index) => {\n            return (\n              <SmallMenuButton\n                key={item.id}\n                index={index + 1}\n                onClick={() => setActivePanel(index)}\n              >\n                <FlexBox gap={8} alignItems=\"center\">\n                  {item.icon && (\n                    <Box height={24} width={24}>\n                      <item.icon size={24} />\n                    </Box>\n                  )}\n                  <Text>{item.text}</Text>\n                </FlexBox>\n                <FlexBox>\n                  <ArrowChevronRightIcon />\n                </FlexBox>\n              </SmallMenuButton>\n            );\n          })}\n        </>\n      )}\n\n      {activePanel !== null && ActivePanel && (\n        <Box background={theme.colors.background} borderRadius=\"lg\" p={16}>\n          <ActivePanel />\n        </Box>\n      )}\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;;;;;;AAsBA,MAAaA,iBAA+C,EAC1D,aACA,MACA,kBACI;CACJ,MAAM,EAAE,aAAa,mBAAmB,4BAA4B;CAEpE,MAAM,cAAc,YAAY,eAAe,GAAG;AAElD,QACE,qBAAC;EACC,SAAS;GAAE,GAAG;GAAQ,IAAI;GAAQ;EAClC,eAAc;EACd,KAAK;EACL,GAAG;aAEF,gBAAgB,QACf,4CACE,oBAAC;GAA8B;GAAmB;IAAQ,EACzD,YAAY,KAAK,EAAE,QAAQ,UAAU;AACpC,UACE,qBAAC;IAEC,OAAO,QAAQ;IACf,eAAe,eAAe,MAAM;eAEpC,qBAAC;KAAQ,KAAK;KAAG,YAAW;gBACzB,KAAK,QACJ,oBAAC;MAAI,QAAQ;MAAI,OAAO;gBACtB,oBAAC,KAAK,QAAK,MAAM,KAAM;OACnB,EAER,oBAAC,kBAAM,KAAK,OAAY;MAChB,EACV,oBAAC,qBACC,oBAAC,0BAAwB,GACjB;MAdL,KAAK,GAeM;IAEpB,IACD,EAGJ,gBAAgB,QAAQ,eACvB,oBAAC;GAAI,YAAY,MAAM,OAAO;GAAY,cAAa;GAAK,GAAG;aAC7D,oBAAC,gBAAc;IACX;GAEA"}

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.js

@@ -98,4 +98,5 @@ const NavTab = ({ item, onSelect, isActive, onKeyDown, index }) => {
 };
 
 //#endregion
-export { NavTab, NavTabList, NavTabPanel };
+export { NavTab, NavTabList, NavTabPanel };
+//# sourceMappingURL=NavTabs.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavTabs.js","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.tsx"],"sourcesContent":["import { Box, FlexBox } from '@codecademy/gamut';\nimport { ArrowChevronRightIcon } from '@codecademy/gamut-icons';\nimport React, { PropsWithChildren, useContext, useEffect, useRef } from 'react';\n\nimport {\n  AppHeaderCatalogDropdownItem,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport { AppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport {\n  NavIconButton,\n  NavIconButtonContainer,\n  NavigationButton,\n  OverflowText,\n  StyledNavTabPanel,\n} from './elements';\n\ninterface NavTabPanelProps extends PropsWithChildren {\n  isActiveTab: boolean;\n  index: number;\n  id: string;\n}\n\n// Tab content, only one should be visible at a time\nconst NavTabPanel = ({\n  children,\n  isActiveTab,\n  index,\n  id,\n}: NavTabPanelProps) => {\n  return (\n    <StyledNavTabPanel\n      isFirst={index === 0}\n      role=\"tabpanel\"\n      id={`${id}-panel`}\n      aria-labelledby={`${id}-tab`}\n      display={isActiveTab ? 'block' : 'none'}\n      gridColumn=\"2 / span 12\"\n      gridRow=\"1 / span 8\"\n      bg=\"background\"\n      px={32}\n      pt={16}\n      pb={24}\n    >\n      {children}\n    </StyledNavTabPanel>\n  );\n};\n\n// Holds all of the tab buttons\nconst NavTabList = React.forwardRef<\n  HTMLDivElement,\n  {\n    children: React.ReactNode;\n    type: string;\n  }\n>(({ children, type }, ref) => {\n  return (\n    <FlexBox\n      role=\"tablist\"\n      aria-label={`${type.replace('-dropdown', '')} navigation`}\n      aria-orientation=\"vertical\"\n      flexDirection=\"column\"\n      gap={8}\n      ref={ref}\n    >\n      {children}\n    </FlexBox>\n  );\n});\n\n// Tab button, lets you switch between tabs\n// at larger breakpoints we use a normal button, at smaller\n// breakpoints we use an IconButton.\nconst NavTab = ({\n  item,\n  onSelect,\n  isActive,\n  onKeyDown,\n  index,\n}: {\n  item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;\n  onSelect: (\n    id: string,\n    event?: React.MouseEvent,\n    item?: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem\n  ) => void;\n  isActive: boolean;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n  index: number;\n}) => {\n  const sharedButtonProps = {\n    role: 'tab',\n    'aria-selected': isActive,\n    'aria-controls': `${item.id}-panel`,\n    onClick: (event: React.MouseEvent) => onSelect(item.id, event, item),\n    onKeyDown,\n    tabIndex: isActive ? 0 : -1,\n    isActive,\n    id: `${item.id}-tab`,\n  } as const;\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { setFirstItemRef } = useContext(AppHeaderDropdownContext);\n\n  useEffect(() => {\n    if (index === 0 && buttonRef.current) {\n      setFirstItemRef?.(buttonRef.current);\n    }\n  }, [index, setFirstItemRef]);\n\n  return (\n    <>\n      <NavigationButton ref={buttonRef} {...sharedButtonProps}>\n        <FlexBox gap={8} alignItems=\"center\">\n          {item.icon && (\n            <Box height={24} width={24}>\n              <item.icon size={24} />\n            </Box>\n          )}\n          <OverflowText maxWidth={{ _: '110px', md: 'none' }}>\n            {item.text}\n          </OverflowText>\n        </FlexBox>\n\n        <FlexBox alignItems=\"center\">\n          {isActive && (\n            <Box display={{ _: 'none', sm: 'block' }} mt={4}>\n              <ArrowChevronRightIcon data-testid=\"chevron-right-icon\" />\n            </Box>\n          )}\n        </FlexBox>\n      </NavigationButton>\n      {item.icon && (\n        <NavIconButtonContainer\n          display={{ _: 'none', xs: 'grid', sm: 'none' }}\n          {...sharedButtonProps}\n        >\n          <NavIconButton\n            icon={item.icon}\n            tip={item.text}\n            tipProps={{\n              alignment: 'right-center',\n              narrow: false,\n              placement: 'floating',\n            }}\n            aria-label={item.text}\n          />\n        </NavIconButtonContainer>\n      )}\n    </>\n  );\n};\n\nexport { NavTabPanel, NavTabList, NavTab };\n"],"mappings":";;;;;;;;AAwBA,MAAM,eAAe,EACnB,UACA,aACA,OACA,SACsB;AACtB,QACE,oBAAC;EACC,SAAS,UAAU;EACnB,MAAK;EACL,IAAI,GAAG,GAAG;EACV,mBAAiB,GAAG,GAAG;EACvB,SAAS,cAAc,UAAU;EACjC,YAAW;EACX,SAAQ;EACR,IAAG;EACH,IAAI;EACJ,IAAI;EACJ,IAAI;EAEH;GACiB;;AAKxB,MAAM,aAAa,MAAM,YAMtB,EAAE,UAAU,QAAQ,QAAQ;AAC7B,QACE,oBAAC;EACC,MAAK;EACL,cAAY,GAAG,KAAK,QAAQ,aAAa,GAAG,CAAC;EAC7C,oBAAiB;EACjB,eAAc;EACd,KAAK;EACA;EAEJ;GACO;EAEZ;AAKF,MAAM,UAAU,EACd,MACA,UACA,UACA,WACA,YAWI;CACJ,MAAM,oBAAoB;EACxB,MAAM;EACN,iBAAiB;EACjB,iBAAiB,GAAG,KAAK,GAAG;EAC5B,UAAU,UAA4B,SAAS,KAAK,IAAI,OAAO,KAAK;EACpE;EACA,UAAU,WAAW,IAAI;EACzB;EACA,IAAI,GAAG,KAAK,GAAG;EAChB;CAED,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,EAAE,oBAAoB,WAAW,yBAAyB;AAEhE,iBAAgB;AACd,MAAI,UAAU,KAAK,UAAU,QAC3B,mBAAkB,UAAU,QAAQ;IAErC,CAAC,OAAO,gBAAgB,CAAC;AAE5B,QACE,4CACE,qBAAC;EAAiB,KAAK;EAAW,GAAI;aACpC,qBAAC;GAAQ,KAAK;GAAG,YAAW;cACzB,KAAK,QACJ,oBAAC;IAAI,QAAQ;IAAI,OAAO;cACtB,oBAAC,KAAK,QAAK,MAAM,KAAM;KACnB,EAER,oBAAC;IAAa,UAAU;KAAE,GAAG;KAAS,IAAI;KAAQ;cAC/C,KAAK;KACO;IACP,EAEV,oBAAC;GAAQ,YAAW;aACjB,YACC,oBAAC;IAAI,SAAS;KAAE,GAAG;KAAQ,IAAI;KAAS;IAAE,IAAI;cAC5C,oBAAC,yBAAsB,eAAY,uBAAuB;KACtD;IAEA;GACO,EAClB,KAAK,QACJ,oBAAC;EACC,SAAS;GAAE,GAAG;GAAQ,IAAI;GAAQ,IAAI;GAAQ;EAC9C,GAAI;YAEJ,oBAAC;GACC,MAAM,KAAK;GACX,KAAK,KAAK;GACV,UAAU;IACR,WAAW;IACX,QAAQ;IACR,WAAW;IACZ;GACD,cAAY,KAAK;IACjB;GACqB,IAE1B"}

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/PanelLayout.js

@@ -80,4 +80,5 @@ const PanelLayout = ({ heading, description, linkItem, children }) => {
 };
 
 //#endregion
-export { PanelLayout };
+export { PanelLayout };
+//# sourceMappingURL=PanelLayout.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/PanelLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelLayout.js","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/PanelLayout.tsx"],"sourcesContent":["import { Anchor, FlexBox, IconButton, Text } from '@codecademy/gamut';\nimport { ArrowLeftIcon, MiniArrowRightIcon } from '@codecademy/gamut-icons';\nimport { PropsWithChildren, ReactNode } from 'react';\n\nimport { AppHeaderLinkItem } from '../../..';\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\nimport { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport { useAppHeaderSectionContext } from './AppHeaderSectionContext';\n\ntype PanelLayoutProps = PropsWithChildren & {\n  heading: string;\n  description: ReactNode;\n  linkItem?: AppHeaderLinkItem;\n};\n\nexport const PanelLayout = ({\n  heading,\n  description,\n  linkItem,\n  children,\n}: PanelLayoutProps) => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { handleClose } = useAppHeaderDropdownContext();\n  const { setActivePanel, tabIndex } = useAppHeaderSectionContext();\n\n  return (\n    <FlexBox\n      flexDirection=\"column\"\n      gap={{ _: 8, xs: 8 }}\n      pr={{ _: 0, md: 16, lg: 0 }}\n    >\n      <FlexBox alignItems=\"center\" gap={{ _: 8, xs: 0 }}>\n        <IconButton\n          onClick={() => setActivePanel(null)}\n          icon={ArrowLeftIcon}\n          tip=\"Back to main navigation\"\n          tipProps={{\n            alignment: 'right-center',\n            narrow: false,\n            placement: 'floating',\n          }}\n          aria-label=\"Back to main navigation\"\n          display={{ _: 'flex', xs: 'none' }}\n        />\n        <Text as=\"h2\" variant=\"title-sm\">\n          {heading}\n        </Text>\n      </FlexBox>\n      <Text mb={16}>{description}</Text>\n      {children}\n      {linkItem && (\n        <FlexBox justifyContent=\"center\" mt={16}>\n          <Anchor\n            href={linkItem.href}\n            onClick={(event: React.MouseEvent) => {\n              globalHeaderItemClick(event, linkItem);\n              handleClose();\n            }}\n            tabIndex={tabIndex}\n            variant=\"standard\"\n          >\n            <FlexBox alignItems=\"center\" gap={8}>\n              {linkItem.text} <MiniArrowRightIcon />\n            </FlexBox>\n          </Anchor>\n        </FlexBox>\n      )}\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;;;;AAeA,MAAa,eAAe,EAC1B,SACA,aACA,UACA,eACsB;CACtB,MAAM,EAAE,0BAA0B,0BAA0B;CAC5D,MAAM,EAAE,gBAAgB,6BAA6B;CACrD,MAAM,EAAE,gBAAgB,aAAa,4BAA4B;AAEjE,QACE,qBAAC;EACC,eAAc;EACd,KAAK;GAAE,GAAG;GAAG,IAAI;GAAG;EACpB,IAAI;GAAE,GAAG;GAAG,IAAI;GAAI,IAAI;GAAG;;GAE3B,qBAAC;IAAQ,YAAW;IAAS,KAAK;KAAE,GAAG;KAAG,IAAI;KAAG;eAC/C,oBAAC;KACC,eAAe,eAAe,KAAK;KACnC,MAAM;KACN,KAAI;KACJ,UAAU;MACR,WAAW;MACX,QAAQ;MACR,WAAW;MACZ;KACD,cAAW;KACX,SAAS;MAAE,GAAG;MAAQ,IAAI;MAAQ;MAClC,EACF,oBAAC;KAAK,IAAG;KAAK,SAAQ;eACnB;MACI;KACC;GACV,oBAAC;IAAK,IAAI;cAAK;KAAmB;GACjC;GACA,YACC,oBAAC;IAAQ,gBAAe;IAAS,IAAI;cACnC,oBAAC;KACC,MAAM,SAAS;KACf,UAAU,UAA4B;AACpC,4BAAsB,OAAO,SAAS;AACtC,mBAAa;;KAEL;KACV,SAAQ;eAER,qBAAC;MAAQ,YAAW;MAAS,KAAK;;OAC/B,SAAS;OAAK;OAAC,oBAAC,uBAAqB;;OAC9B;MACH;KACD;;GAEJ"}

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/elements.js

@@ -165,4 +165,5 @@ const NavIconButton = styled(IconButton)`
 `;
 
 //#endregion
-export { GradientBackground, NavIconButton, NavIconButtonContainer, NavTabContainer, NavigationButton, OverflowText, ScrollableContent, SmallMenuButton, StyledNavTabPanel, StyledSection };
+export { GradientBackground, NavIconButton, NavIconButtonContainer, NavTabContainer, NavigationButton, OverflowText, ScrollableContent, SmallMenuButton, StyledNavTabPanel, StyledSection };
+//# sourceMappingURL=elements.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/elements.tsx"],"sourcesContent":["import { Box, GridBox, IconButton, Text } from '@codecademy/gamut';\nimport styled from '@emotion/styled';\n\nexport const StyledSection = styled(Box)<{ activePanelSelected: boolean }>`\n  width: 100%;\n  max-width: 100%;\n  border: 1px solid ${({ theme }) => theme.colors['border-tertiary']};\n  border-radius: 16px;\n  overflow: hidden;\n  background-color: ${({ activePanelSelected, theme }) =>\n    activePanelSelected ? theme.colors['gray-100'] : theme.colors.background};\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 480px) {\n    background-color: ${({ theme }) => theme.colors['gray-100']};\n  }\n\n  // at this breakpoint the menu becomes a dropdown\n  @media (min-width: 1200px) {\n    width: calc(100dvw - 11rem);\n    max-width: calc(1440px - 11rem);\n    max-height: 85vh;\n  }\n`;\n\nexport const ScrollableContent = styled(Box)`\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  border-radius: 16px;\n\n  /* Custom scrollbar styling to maintain border-radius */\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: transparent;\n    border-radius: 0 16px 16px 0;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ${({ theme }) => theme.colors['gray-300']};\n    border-radius: 4px;\n    border: 2px solid transparent;\n    background-clip: content-box;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background: ${({ theme }) => theme.colors['gray-300']};\n    background-clip: content-box;\n    opacity: 0.8;\n  }\n\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: ${({ theme }) => theme.colors['gray-300']} transparent;\n`;\n\nexport const NavTabContainer = styled(GridBox)`\n  grid-template-columns: 297px 32px 1fr;\n\n  @media (max-width: 767px) {\n    grid-template-columns: 64px 1fr 1fr;\n  }\n  @media (max-width: 479px) {\n    display: none;\n  }\n`;\n\nexport const GradientBackground = styled(Box)`\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0) 7.65%,\n    rgba(0, 0, 0, 0.15) 100%\n  );\n`;\n\nexport const SmallMenuButton = styled.button<{ index: number }>`\n  grid-column: 1;\n  grid-row: ${({ index }) => index + 1};\n  padding: 16px;\n  border: none;\n  border-radius: 8px;\n  background: none;\n  cursor: pointer;\n  color: ${({ theme }) => theme.colors.text};\n  width: 100%;\n  text-align: left;\n  height: 60px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  &:hover,\n  &:focus {\n    background-color: ${({ theme }) => theme.colors['navy-100']};\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nexport const OverflowText = styled(Text)`\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n`;\n\nexport const StyledNavTabPanel = styled(Box)<{\n  isFirst: boolean;\n}>`\n  border-radius: ${({ isFirst }) => (isFirst ? '0 8px 8px 8px' : '8px')};\n\n  @media (max-width: 1200px) {\n    border-radius: 8px;\n  }\n`;\n\nexport const NavigationButton = styled.button<{\n  isActive: boolean;\n}>`\n  grid-column: 1;\n  padding: 16px;\n  border: none;\n  border-radius: ${({ isActive }) => (isActive ? '8px 0 0 8px' : '8px')};\n  background: none;\n  cursor: pointer;\n  color: ${({ theme, isActive }) =>\n    isActive ? theme.colors.primary : theme.colors.text};\n  text-align: left;\n  width: ${({ isActive }) => (isActive ? '100%' : 'calc(100% - 8px)')};\n  height: 60px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background-color: ${({ isActive, theme }) =>\n    isActive ? theme.colors.background : theme.colors['gray-100']};\n  padding-right: ${({ isActive }) => (isActive ? '24px' : '16px')};\n\n  &:hover,\n  &:focus {\n    background-color: ${({ theme, isActive }) =>\n      isActive ? theme.colors.background : theme.colors['navy-100']};\n    color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: ${({ theme, isActive }) =>\n      isActive ? 'none' : `0 0 0 2px ${theme.colors.primary}`};\n  }\n\n  @media (max-width: 767px) {\n    display: none;\n  }\n`;\n\nexport const NavIconButtonContainer = styled(Box)<{\n  isActive: boolean;\n}>`\n  background-color: ${({ theme, isActive }) =>\n    isActive ? theme.colors.background : theme.colors['gray-100']};\n  border-radius: ${({ isActive }) => (isActive ? '8px 0 0 8px' : '8px')};\n\n  grid-column: 1;\n  padding: 8px;\n\n  &:focus {\n    border-color: ${({ theme }) => theme.colors.primary};\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 8px;\n  }\n`;\n\nexport const NavIconButton = styled(IconButton)`\n  &:hover,\n  &:focus svg {\n    &:hover,\n    &:focus {\n      color: ${({ theme }) => theme.colors.primary};\n      background-color: ${({ theme }) => theme.colors['navy-100']};\n    }\n  }\n`;\n"],"mappings":";;;;AAGA,MAAa,gBAAgB,OAAO,IAAI,AAAkC;;;uBAGnD,EAAE,YAAY,MAAM,OAAO,mBAAmB;;;uBAG9C,EAAE,qBAAqB,YAC1C,sBAAsB,MAAM,OAAO,cAAc,MAAM,OAAO,WAAW;;;;;yBAKpD,EAAE,YAAY,MAAM,OAAO,YAAY;;;;;;;;;;AAWhE,MAAa,oBAAoB,OAAO,IAAI;;;;;;;;;;;;;;;;;mBAiBzB,EAAE,YAAY,MAAM,OAAO,YAAY;;;;;;;mBAOvC,EAAE,YAAY,MAAM,OAAO,YAAY;;;;;;;sBAOpC,EAAE,YAAY,MAAM,OAAO,YAAY;;AAG7D,MAAa,kBAAkB,OAAO,QAAQ;;;;;;;;;;AAW9C,MAAa,qBAAqB,OAAO,IAAI;;;;;;;AAQ7C,MAAa,kBAAkB,OAAO,MAAyB;;eAEhD,EAAE,YAAY,QAAQ,EAAE;;;;;;YAM3B,EAAE,YAAY,MAAM,OAAO,KAAK;;;;;;;;;;yBAUnB,EAAE,YAAY,MAAM,OAAO,YAAY;cAClD,EAAE,YAAY,MAAM,OAAO,QAAQ;;;AAIjD,MAAa,eAAe,OAAO,KAAK;;;;;AAMxC,MAAa,oBAAoB,OAAO,IAAI,AAE1C;oBACkB,EAAE,cAAe,UAAU,kBAAkB,MAAO;;;;;;AAOxE,MAAa,mBAAmB,OAAO,MAErC;;;;oBAIkB,EAAE,eAAgB,WAAW,gBAAgB,MAAO;;;YAG5D,EAAE,OAAO,eACjB,WAAW,MAAM,OAAO,UAAU,MAAM,OAAO,KAAK;;YAE5C,EAAE,eAAgB,WAAW,SAAS,mBAAoB;;;;;uBAK/C,EAAE,UAAU,YAC/B,WAAW,MAAM,OAAO,aAAa,MAAM,OAAO,YAAY;oBAC9C,EAAE,eAAgB,WAAW,SAAS,OAAQ;;;;yBAIzC,EAAE,OAAO,eAC5B,WAAW,MAAM,OAAO,aAAa,MAAM,OAAO,YAAY;cACtD,EAAE,YAAY,MAAM,OAAO,QAAQ;;;;;mBAK9B,EAAE,OAAO,eACtB,WAAW,SAAS,aAAa,MAAM,OAAO,UAAU;;;;;;;AAQ9D,MAAa,yBAAyB,OAAO,IAAI,AAE/C;uBACqB,EAAE,OAAO,eAC5B,WAAW,MAAM,OAAO,aAAa,MAAM,OAAO,YAAY;oBAC9C,EAAE,eAAgB,WAAW,gBAAgB,MAAO;;;;;;qBAMnD,EAAE,YAAY,MAAM,OAAO,QAAQ;;;;;;AAOxD,MAAa,gBAAgB,OAAO,WAAW;;;;;gBAK/B,EAAE,YAAY,MAAM,OAAO,QAAQ;2BACxB,EAAE,YAAY,MAAM,OAAO,YAAY"}

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

@@ -115,4 +115,5 @@ const AppHeaderSection = forwardRef(({ isOpen = true, MarketingBanner, isMobile
 });
 
 //#endregion
-export { AppHeaderSection };
+export { AppHeaderSection };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/index.tsx"],"sourcesContent":["import { Box } from '@codecademy/gamut';\nimport { motion } from 'framer-motion';\nimport {\n  ComponentType,\n  FC,\n  forwardRef,\n  Key,\n  KeyboardEvent,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  useGlobalHeaderDynamicDataContext,\n  useGlobalHeaderItemClick,\n} from '../../../GlobalHeader/context';\nimport {\n  AppHeaderCatalogDropdownItem,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport { MarketingBannerProps } from '../AppHeaderCatalogDropdown/MarketingBanner';\nimport { AppHeaderSectionContext } from './AppHeaderSectionContext';\nimport { NavTabContainer, ScrollableContent, StyledSection } from './elements';\nimport { MobileBackButton } from './MobileBackButton';\nimport { MobileNavMenu } from './MobileNavMenu';\nimport { NavTab, NavTabList, NavTabPanel } from './NavTabs';\n\nexport type TabSectionConfig = {\n  item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;\n  panel: ComponentType;\n};\n\nexport type AppHeaderSectionProps = {\n  isOpen?: boolean;\n  keyDownEvents?: (event: KeyboardEvent) => void;\n  ref?: RefObject<HTMLDivElement>;\n  MarketingBanner?: FC<MarketingBannerProps>;\n  isMobile?: boolean;\n  handleClose: () => void;\n  type: 'catalog-dropdown' | 'resources-dropdown';\n  navSections: {\n    item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;\n    panel: ComponentType;\n  }[];\n  ariaLabel?: string;\n  defaultSelectedKey?: string;\n  popularSection?: boolean;\n  isCoachingEnabled?: boolean;\n};\n\nexport const AppHeaderSection = forwardRef<\n  HTMLDivElement,\n  AppHeaderSectionProps\n>(\n  (\n    {\n      isOpen = true,\n      MarketingBanner,\n      isMobile = false,\n      handleClose,\n      type,\n      defaultSelectedKey,\n      navSections,\n      isCoachingEnabled,\n    },\n    ref\n  ) => {\n    const firstTabId = navSections?.[0]?.item?.id;\n    const [activeTab, setActiveTab] = useState<Key>(\n      defaultSelectedKey || firstTabId\n    );\n    const [activePanel, setActivePanel] = useState<number | null>(null);\n    const tabListRef = useRef<HTMLDivElement>(null);\n\n    const { globalHeaderDynamicData } = useGlobalHeaderDynamicDataContext();\n    const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n\n    const banner = globalHeaderDynamicData?.catalogDropdown?.banner;\n    const showMarketingBanner = banner?.text && banner?.href && MarketingBanner;\n\n    const tabIndex = isOpen ? 0 : -1;\n    const activePanelSelected = activePanel !== null;\n\n    const onSelect = useCallback(\n      (\n        key: Key,\n        event?: React.MouseEvent,\n        item?: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem\n      ) => {\n        setActiveTab(key);\n        if (item && event) {\n          globalHeaderItemClick(event, item);\n        }\n      },\n      [setActiveTab, globalHeaderItemClick]\n    );\n\n    const onKeyDown = useCallback((event: React.KeyboardEvent) => {\n      if (!tabListRef.current) return;\n\n      // get list of tabs available\n      const tabs = Array.from(\n        tabListRef.current?.querySelectorAll('button[role=\"tab\"]') || []\n      );\n      // get the index of the active tab\n      const activeElement = tabs.indexOf(document.activeElement as HTMLElement);\n\n      if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {\n        // prevent scrollbar from moving when arrow keys are pressed on tabs\n        event.preventDefault();\n        const prevTab = tabs[activeElement - 1];\n        if (prevTab) {\n          (prevTab as HTMLElement).focus();\n        } else {\n          // focus the last tab\n          (tabs[tabs.length - 1] as HTMLElement).focus();\n        }\n      }\n      if (['ArrowDown', 'ArrowRight'].includes(event.key)) {\n        // prevent scrollbar from moving when arrow keys are pressed on tabs\n        event.preventDefault();\n        const nextTab = tabs[activeElement + 1];\n        if (nextTab) {\n          (nextTab as HTMLElement).focus();\n        } else {\n          // focus the first tab\n          (tabs[0] as HTMLElement).focus();\n        }\n      }\n    }, []);\n\n    useEffect(() => {\n      if (!isOpen) {\n        setActiveTab(firstTabId);\n      }\n    }, [isOpen, firstTabId]);\n\n    return (\n      <AppHeaderSectionContext.Provider\n        value={{ activePanel, setActivePanel, tabIndex, isCoachingEnabled }}\n      >\n        <StyledSection ref={ref} activePanelSelected={activePanelSelected}>\n          <ScrollableContent>\n            {showMarketingBanner && (\n              <Box\n                display={{\n                  _: activePanelSelected ? 'block' : 'none',\n                  xs: 'block',\n                }}\n              >\n                <MarketingBanner\n                  text={banner?.text}\n                  href={banner?.href}\n                  tabIndex={tabIndex}\n                />\n              </Box>\n            )}\n            <NavTabContainer p={8} rowGap={8}>\n              {isMobile && (\n                <MobileBackButton handleClose={handleClose} type={type} />\n              )}\n\n              <NavTabList type={type} ref={tabListRef}>\n                {navSections.map(({ item }, index) => (\n                  <NavTab\n                    key={item.id}\n                    item={item}\n                    onSelect={onSelect}\n                    isActive={activeTab === item.id}\n                    onKeyDown={onKeyDown}\n                    index={index}\n                  />\n                ))}\n              </NavTabList>\n              {navSections.map((section, index) => {\n                const {\n                  item: { id },\n                  panel: Panel,\n                } = section;\n\n                return (\n                  <NavTabPanel\n                    index={index}\n                    isActiveTab={activeTab === id}\n                    key={id}\n                    id={id}\n                  >\n                    {/*  display property ensures multiple elements arent seen at once */}\n                    <motion.div\n                      animate={{ opacity: activeTab === id ? 1 : 0 }}\n                      transition={{ duration: 0.4, ease: 'easeInOut' }}\n                    >\n                      <Panel />\n                    </motion.div>\n                  </NavTabPanel>\n                );\n              })}\n            </NavTabContainer>\n            {/* base nav */}\n            <MobileNavMenu\n              handleClose={handleClose}\n              type={type}\n              navSections={navSections}\n            />\n          </ScrollableContent>\n        </StyledSection>\n      </AppHeaderSectionContext.Provider>\n    );\n  }\n);\n"],"mappings":";;;;;;;;;;;;AAqDA,MAAa,mBAAmB,YAK5B,EACE,SAAS,MACT,iBACA,WAAW,OACX,aACA,MACA,oBACA,aACA,qBAEF,QACG;CACH,MAAM,aAAa,cAAc,IAAI,MAAM;CAC3C,MAAM,CAAC,WAAW,gBAAgB,SAChC,sBAAsB,WACvB;CACD,MAAM,CAAC,aAAa,kBAAkB,SAAwB,KAAK;CACnE,MAAM,aAAa,OAAuB,KAAK;CAE/C,MAAM,EAAE,4BAA4B,mCAAmC;CACvE,MAAM,EAAE,0BAA0B,0BAA0B;CAE5D,MAAM,SAAS,yBAAyB,iBAAiB;CACzD,MAAM,sBAAsB,QAAQ,QAAQ,QAAQ,QAAQ;CAE5D,MAAM,WAAW,SAAS,IAAI;CAC9B,MAAM,sBAAsB,gBAAgB;CAE5C,MAAM,WAAW,aAEb,KACA,OACA,SACG;AACH,eAAa,IAAI;AACjB,MAAI,QAAQ,MACV,uBAAsB,OAAO,KAAK;IAGtC,CAAC,cAAc,sBAAsB,CACtC;CAED,MAAM,YAAY,aAAa,UAA+B;AAC5D,MAAI,CAAC,WAAW,QAAS;EAGzB,MAAM,OAAO,MAAM,KACjB,WAAW,SAAS,iBAAiB,uBAAqB,IAAI,EAAE,CACjE;EAED,MAAM,gBAAgB,KAAK,QAAQ,SAAS,cAA6B;AAEzE,MAAI,CAAC,WAAW,YAAY,CAAC,SAAS,MAAM,IAAI,EAAE;AAEhD,SAAM,gBAAgB;GACtB,MAAM,UAAU,KAAK,gBAAgB;AACrC,OAAI,QACF,CAAC,QAAwB,OAAO;OAGhC,CAAC,KAAK,KAAK,SAAS,GAAmB,OAAO;;AAGlD,MAAI,CAAC,aAAa,aAAa,CAAC,SAAS,MAAM,IAAI,EAAE;AAEnD,SAAM,gBAAgB;GACtB,MAAM,UAAU,KAAK,gBAAgB;AACrC,OAAI,QACF,CAAC,QAAwB,OAAO;OAGhC,CAAC,KAAK,GAAmB,OAAO;;IAGnC,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,CAAC,OACH,cAAa,WAAW;IAEzB,CAAC,QAAQ,WAAW,CAAC;AAExB,QACE,oBAAC,wBAAwB;EACvB,OAAO;GAAE;GAAa;GAAgB;GAAU;GAAmB;YAEnE,oBAAC;GAAmB;GAA0B;aAC5C,qBAAC;IACE,uBACC,oBAAC;KACC,SAAS;MACP,GAAG,sBAAsB,UAAU;MACnC,IAAI;MACL;eAED,oBAAC;MACC,MAAM,QAAQ;MACd,MAAM,QAAQ;MACJ;OACV;MACE;IAER,qBAAC;KAAgB,GAAG;KAAG,QAAQ;;MAC5B,YACC,oBAAC;OAA8B;OAAmB;QAAQ;MAG5D,oBAAC;OAAiB;OAAM,KAAK;iBAC1B,YAAY,KAAK,EAAE,QAAQ,UAC1B,oBAAC;QAEO;QACI;QACV,UAAU,cAAc,KAAK;QAClB;QACJ;UALF,KAAK,GAMV,CACF;QACS;MACZ,YAAY,KAAK,SAAS,UAAU;OACnC,MAAM,EACJ,MAAM,EAAE,MACR,OAAO,UACL;AAEJ,cACE,oBAAC;QACQ;QACP,aAAa,cAAc;QAEvB;kBAGJ,oBAAC,OAAO;SACN,SAAS,EAAE,SAAS,cAAc,KAAK,IAAI,GAAG;SAC9C,YAAY;UAAE,UAAU;UAAK,MAAM;UAAa;mBAEhD,oBAAC,UAAQ;UACE;UATR,GAUO;QAEhB;;MACc;IAElB,oBAAC;KACc;KACP;KACO;MACb;OACgB;IACN;GACiB;EAGxC"}

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

@@ -50,4 +50,5 @@ const SkillTile = ({ item }) => {
 };
 
 //#endregion
-export { SkillTile };
+export { SkillTile };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["SkillTile: React.FC<SkillTileProps>"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSkillTile/index.tsx"],"sourcesContent":["import { Anchor, FlexBox, Text, TextProps } from '@codecademy/gamut';\nimport { css, theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\nimport { AppHeaderLinkItem } from '../../shared';\nimport { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport { useAppHeaderSectionContext } from '../AppHeaderSection/AppHeaderSectionContext';\n\ninterface SkillTileProps {\n  item: AppHeaderLinkItem;\n}\n\nconst SkillAnchor = styled(Anchor)(\n  css({\n    backgroundColor: theme.colors.background,\n    borderColor: theme.colors['border-tertiary'] as TextProps['color'],\n    borderRadius: 'lg',\n    border: 1,\n    '&:hover, &:focus': {\n      borderColor: theme.colors.primary as TextProps['color'],\n      background: theme.colors['navy-100'],\n    },\n    '&:active': {\n      borderColor: theme.colors.primary as TextProps['color'],\n      background: theme.colors['navy-200'],\n    },\n  })\n);\n\nexport const SkillTile: React.FC<SkillTileProps> = ({ item }) => {\n  const { href, text, icon: Icon } = item;\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { handleClose } = useAppHeaderDropdownContext();\n  const { tabIndex } = useAppHeaderSectionContext();\n\n  return (\n    <SkillAnchor\n      href={href}\n      onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        globalHeaderItemClick(event, item);\n        handleClose();\n      }}\n      variant=\"interface\"\n      width=\"100%\"\n      tabIndex={tabIndex}\n    >\n      <FlexBox py={8} px={16} height={48} alignItems=\"center\">\n        {Icon && <Icon size={24} />}\n        <Text variant=\"p-base\" pl={16}>\n          {text}\n        </Text>\n      </FlexBox>\n    </SkillAnchor>\n  );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAM,cAAc,OAAO,OAAO,CAChC,IAAI;CACF,iBAAiB,MAAM,OAAO;CAC9B,aAAa,MAAM,OAAO;CAC1B,cAAc;CACd,QAAQ;CACR,oBAAoB;EAClB,aAAa,MAAM,OAAO;EAC1B,YAAY,MAAM,OAAO;EAC1B;CACD,YAAY;EACV,aAAa,MAAM,OAAO;EAC1B,YAAY,MAAM,OAAO;EAC1B;CACF,CAAC,CACH;AAED,MAAaA,aAAuC,EAAE,WAAW;CAC/D,MAAM,EAAE,MAAM,MAAM,MAAM,SAAS;CACnC,MAAM,EAAE,0BAA0B,0BAA0B;CAC5D,MAAM,EAAE,gBAAgB,6BAA6B;CACrD,MAAM,EAAE,aAAa,4BAA4B;AAEjD,QACE,oBAAC;EACO;EACN,UAAU,UAA2D;AACnE,yBAAsB,OAAO,KAAK;AAClC,gBAAa;;EAEf,SAAQ;EACR,OAAM;EACI;YAEV,qBAAC;GAAQ,IAAI;GAAG,IAAI;GAAI,QAAQ;GAAI,YAAW;cAC5C,QAAQ,oBAAC,QAAK,MAAM,KAAM,EAC3B,oBAAC;IAAK,SAAQ;IAAS,IAAI;cACxB;KACI;IACC;GACE"}

package/dist/AppHeader/Search/DefaultResults.js

@@ -99,4 +99,5 @@ const PopularContent = ({ onTrackingClick }) => {
 };
 
 //#endregion
-export { PopularContent, PopularSearches };
+export { PopularContent, PopularSearches };
+//# sourceMappingURL=DefaultResults.js.map

package/dist/AppHeader/Search/DefaultResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultResults.js","names":["PopularSearches: React.FC<PopularSearchesProps>","PopularContent: React.FC<PopularContentProps>"],"sources":["../../../src/AppHeader/Search/DefaultResults.tsx"],"sourcesContent":["import { Badge, Box, FlexBox, MenuItem, Text } from '@codecademy/gamut';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { popularContent, popularSearchTerms } from './consts';\nimport { SemiboldSearchIcon } from './SearchPane';\n\nconst StyledMenuItem = styled(MenuItem)`\n  &:focus-visible:after {\n    left: -4px;\n  }\n  padding: 8px 0;\n`;\n\ninterface PopularSearchesProps {\n  navigateToSearch: (searchTerm: string) => void;\n  onTrackingClick: (\n    target: string,\n    extraTrackingProps?: Record<string, string>\n  ) => void;\n}\n\nexport const PopularSearches: React.FC<PopularSearchesProps> = ({\n  navigateToSearch,\n  onTrackingClick,\n}) => {\n  const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;\n\n  return (\n    <Box mb={24} as=\"li\">\n      <Text as=\"h2\" variant=\"title-xs\" mb={12}>\n        Popular searches\n      </Text>\n      <FlexBox as=\"ul\" listStyle=\"none\" p={0} flexDirection=\"column\">\n        {popularSearchTerms.map((term, i) => (\n          <StyledMenuItem\n            itemType=\"link\"\n            key={term}\n            id={term}\n            href={`/search?query=${encodeURIComponent(term)}`}\n            onClick={() => {\n              navigateToSearch(term);\n              onTrackingClick('popular_search_term', {\n                misc: JSON.stringify({\n                  value: term.toLowerCase(),\n                  index: i,\n                }),\n              });\n            }}\n            pl={0}\n          >\n            <SemiboldSearchIcon mb={2 as 0} size={14} strokeWidth={8} />\n            <Text variant={isMobile ? 'p-base' : 'p-large'} ml={12}>\n              {term}\n            </Text>\n          </StyledMenuItem>\n        ))}\n      </FlexBox>\n    </Box>\n  );\n};\n\ninterface PopularContentProps {\n  onTrackingClick: (\n    target: string,\n    extraTrackingProps?: Record<string, string>\n  ) => void;\n}\n\nexport const PopularContent: React.FC<PopularContentProps> = ({\n  onTrackingClick,\n}) => {\n  const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;\n\n  return (\n    <Box mb={24} as=\"li\">\n      <Text as=\"h2\" variant=\"title-xs\" mb={12}>\n        What our members are learning\n      </Text>\n      <FlexBox as=\"ul\" listStyle=\"none\" p={0} flexDirection=\"column\">\n        {popularContent.map((c, i) => (\n          <StyledMenuItem\n            itemType=\"link\"\n            key={c.title}\n            href={c.href}\n            pl={0}\n            onClick={() =>\n              onTrackingClick('popular_content', {\n                slug: c.slug,\n                ...(c.contentId ? { content_id: c.contentId } : {}),\n                misc: JSON.stringify({\n                  content_type: c.type.toLowerCase(),\n                  index: i,\n                  href: c.href,\n                }),\n              })\n            }\n          >\n            <FlexBox flexDirection=\"row\" alignItems=\"center\">\n              <Text variant={isMobile ? 'p-base' : 'p-large'} mr={12}>\n                {c.title}\n              </Text>\n              <Badge size=\"sm\" variant=\"tertiary\">\n                {c.type}\n              </Badge>\n            </FlexBox>\n          </StyledMenuItem>\n        ))}\n      </FlexBox>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,MAAM,iBAAiB,OAAO,SAAS;;;;;;AAevC,MAAaA,mBAAmD,EAC9D,kBACA,sBACI;CACJ,MAAM,WAAW,MAAM,YAAY,MAAM,MAAM,YAAY;AAE3D,QACE,qBAAC;EAAI,IAAI;EAAI,IAAG;aACd,oBAAC;GAAK,IAAG;GAAK,SAAQ;GAAW,IAAI;aAAI;IAElC,EACP,oBAAC;GAAQ,IAAG;GAAK,WAAU;GAAO,GAAG;GAAG,eAAc;aACnD,mBAAmB,KAAK,MAAM,MAC7B,qBAAC;IACC,UAAS;IAET,IAAI;IACJ,MAAM,iBAAiB,mBAAmB,KAAK;IAC/C,eAAe;AACb,sBAAiB,KAAK;AACtB,qBAAgB,uBAAuB,EACrC,MAAM,KAAK,UAAU;MACnB,OAAO,KAAK,aAAa;MACzB,OAAO;MACR,CAAC,EACH,CAAC;;IAEJ,IAAI;eAEJ,oBAAC;KAAmB,IAAI;KAAQ,MAAM;KAAI,aAAa;MAAK,EAC5D,oBAAC;KAAK,SAAS,WAAW,WAAW;KAAW,IAAI;eACjD;MACI;MAjBF,KAkBU,CACjB;IACM;GACN;;AAWV,MAAaC,kBAAiD,EAC5D,sBACI;CACJ,MAAM,WAAW,MAAM,YAAY,MAAM,MAAM,YAAY;AAE3D,QACE,qBAAC;EAAI,IAAI;EAAI,IAAG;aACd,oBAAC;GAAK,IAAG;GAAK,SAAQ;GAAW,IAAI;aAAI;IAElC,EACP,oBAAC;GAAQ,IAAG;GAAK,WAAU;GAAO,GAAG;GAAG,eAAc;aACnD,eAAe,KAAK,GAAG,MACtB,oBAAC;IACC,UAAS;IAET,MAAM,EAAE;IACR,IAAI;IACJ,eACE,gBAAgB,mBAAmB;KACjC,MAAM,EAAE;KACR,GAAI,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,GAAG,EAAE;KAClD,MAAM,KAAK,UAAU;MACnB,cAAc,EAAE,KAAK,aAAa;MAClC,OAAO;MACP,MAAM,EAAE;MACT,CAAC;KACH,CAAC;cAGJ,qBAAC;KAAQ,eAAc;KAAM,YAAW;gBACtC,oBAAC;MAAK,SAAS,WAAW,WAAW;MAAW,IAAI;gBACjD,EAAE;OACE,EACP,oBAAC;MAAM,MAAK;MAAK,SAAQ;gBACtB,EAAE;OACG;MACA;MAtBL,EAAE,MAuBQ,CACjB;IACM;GACN"}

package/dist/AppHeader/Search/QuizAndHelpCenterLinks.js

@@ -65,4 +65,5 @@ const QuizAndHelpCenterLinks = ({ onTrackingClick, handleCloseDropdown }) => {
 };
 
 //#endregion
-export { QuizAndHelpCenterLinks };
+export { QuizAndHelpCenterLinks };
+//# sourceMappingURL=QuizAndHelpCenterLinks.js.map

package/dist/AppHeader/Search/QuizAndHelpCenterLinks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuizAndHelpCenterLinks.js","names":["QuizAndHelpCenterLinks: React.FC<{\n  onTrackingClick: (target: string) => void;\n  handleCloseDropdown: () => void;\n}>"],"sources":["../../../src/AppHeader/Search/QuizAndHelpCenterLinks.tsx"],"sourcesContent":["import { Anchor, FlexBox, Text, TextButton } from '@codecademy/gamut';\nimport { MiniArrowRightIcon, SupportIcon } from '@codecademy/gamut-icons';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { useHeaderDisplayContext } from '../../GlobalHeader/context';\n\nexport const BoldSupportIcon = styled(SupportIcon)`\n  path {\n    stroke-width: 2.5;\n  }\n  circle {\n    stroke-width: 2.5;\n  }\n`;\n\nexport const QuizAndHelpCenterLinks: React.FC<{\n  onTrackingClick: (target: string) => void;\n  handleCloseDropdown: () => void;\n}> = ({ onTrackingClick, handleCloseDropdown }) => {\n  const { showOnboardingQuiz, showSortingQuiz } = useHeaderDisplayContext();\n\n  const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;\n\n  const quizLink = showOnboardingQuiz\n    ? '/welcome/find-a-course'\n    : '/explore/sorting-quiz';\n\n  const showQuiz = showOnboardingQuiz || showSortingQuiz;\n\n  return (\n    <FlexBox\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      borderTop={1}\n      borderColor=\"border-tertiary\"\n      py={8}\n    >\n      <FlexBox flexDirection={{ _: 'column', md: 'row' }}>\n        {showQuiz && (\n          <>\n            <Text fontSize={16} mr={10 as 0}>\n              Not sure where to begin?\n            </Text>\n            <Anchor\n              href={quizLink}\n              variant=\"standard\"\n              onClick={() => {\n                onTrackingClick(\n                  showOnboardingQuiz ? 'sorting_quiz' : 'onboarding_quiz'\n                );\n                handleCloseDropdown();\n              }}\n            >\n              <FlexBox alignItems=\"center\" gap={10 as 0} overflow=\"visible\">\n                <Text fontSize={{ _: 14, md: 16 }}>Take our quiz</Text>\n                <MiniArrowRightIcon size={12} />\n              </FlexBox>\n            </Anchor>\n          </>\n        )}\n      </FlexBox>\n      <TextButton\n        href=\"/help\"\n        onClick={() => onTrackingClick('help_center')}\n        size={isMobile ? 'small' : 'normal'}\n      >\n        <BoldSupportIcon mr={8} size={12} />\n        Help Center\n      </TextButton>\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,MAAa,kBAAkB,OAAO,YAAY;;;;;;;;AASlD,MAAaA,0BAGP,EAAE,iBAAiB,0BAA0B;CACjD,MAAM,EAAE,oBAAoB,oBAAoB,yBAAyB;CAEzE,MAAM,WAAW,MAAM,YAAY,MAAM,MAAM,YAAY;AAQ3D,QACE,qBAAC;EACC,gBAAe;EACf,YAAW;EACX,WAAW;EACX,aAAY;EACZ,IAAI;aAEJ,oBAAC;GAAQ,eAAe;IAAE,GAAG;IAAU,IAAI;IAAO;cAVrC,sBAAsB,oBAY/B,4CACE,oBAAC;IAAK,UAAU;IAAI,IAAI;cAAS;KAE1B,EACP,oBAAC;IACC,MArBK,qBACb,2BACA;IAoBQ,SAAQ;IACR,eAAe;AACb,qBACE,qBAAqB,iBAAiB,kBACvC;AACD,0BAAqB;;cAGvB,qBAAC;KAAQ,YAAW;KAAS,KAAK;KAAS,UAAS;gBAClD,oBAAC;MAAK,UAAU;OAAE,GAAG;OAAI,IAAI;OAAI;gBAAE;OAAoB,EACvD,oBAAC,sBAAmB,MAAM,KAAM;MACxB;KACH,IACR;IAEG,EACV,qBAAC;GACC,MAAK;GACL,eAAe,gBAAgB,cAAc;GAC7C,MAAM,WAAW,UAAU;cAE3B,oBAAC;IAAgB,IAAI;IAAG,MAAM;KAAM;IAEzB;GACL"}

package/dist/AppHeader/Search/SearchButton.js

@@ -46,4 +46,5 @@ const SearchButton = ({ isSearchVisible, searchButtonRef, setIsSearchVisible, to
 };
 
 //#endregion
-export { SearchButton };
+export { SearchButton };
+//# sourceMappingURL=SearchButton.js.map

package/dist/AppHeader/Search/SearchButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchButton.js","names":[],"sources":["../../../src/AppHeader/Search/SearchButton.tsx"],"sourcesContent":["import { IconButton } from '@codecademy/gamut';\nimport { SearchIcon } from '@codecademy/gamut-icons';\nimport { useEffect } from 'react';\n\nimport { useAppHeaderContext } from '../AppHeaderElements/AppHeaderProvider';\nimport { useSearchTrackingContext } from './SearchTrackingProvider';\nimport { SearchButtonProps } from './types';\n\nlet autocompleteCacheWarmed = false;\n\nfunction warmAutocompleteCache() {\n  if (typeof window !== 'undefined' && !autocompleteCacheWarmed) {\n    autocompleteCacheWarmed = true;\n    const { search } = window.location;\n    const apiUrl = `/api/portal/search/autocomplete-preload${search}`;\n    const headers = { 'Warm-Only': 'true' };\n    fetch(apiUrl, { headers });\n  }\n}\n\nexport const SearchButton = ({\n  isSearchVisible,\n  searchButtonRef,\n  setIsSearchVisible,\n  toggleSearch,\n  onSearchAsYouType,\n}: SearchButtonProps) => {\n  const { lastOpenedDropdown, setLastOpenedDropdown } = useAppHeaderContext();\n  const { onSearchAsYouTypeParams } = useSearchTrackingContext();\n\n  const expandedToggleSearch = () => {\n    // if the search pane is visible (about to be closed) and there are search params with a query,\n    // trigger the search event before toggling\n    if (\n      isSearchVisible &&\n      onSearchAsYouType &&\n      onSearchAsYouTypeParams &&\n      onSearchAsYouTypeParams.query\n    ) {\n      const { query, searchId, resultsCount, queryLoadTime } =\n        onSearchAsYouTypeParams;\n      onSearchAsYouType(query, searchId, resultsCount, queryLoadTime);\n    }\n\n    toggleSearch();\n\n    if (!isSearchVisible && setLastOpenedDropdown) {\n      setLastOpenedDropdown('search');\n    }\n  };\n\n  useEffect(() => {\n    if (lastOpenedDropdown !== 'search' && isSearchVisible) {\n      setIsSearchVisible(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [lastOpenedDropdown]);\n\n  return (\n    <IconButton\n      aria-expanded={isSearchVisible}\n      data-testid=\"header-search\"\n      icon={SearchIcon}\n      onClick={expandedToggleSearch}\n      onMouseOver={warmAutocompleteCache}\n      ref={searchButtonRef}\n      tip=\"Search\"\n      tipProps={{ alignment: 'bottom-center', placement: 'floating' }}\n      variant=\"interface\"\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAQA,IAAI,0BAA0B;AAE9B,SAAS,wBAAwB;AAC/B,KAAI,OAAO,WAAW,eAAe,CAAC,yBAAyB;AAC7D,4BAA0B;EAC1B,MAAM,EAAE,WAAW,OAAO;EAC1B,MAAM,SAAS,0CAA0C;AAEzD,QAAM,QAAQ,EAAE,SADA,EAAE,aAAa,QAAQ,EACd,CAAC;;;AAI9B,MAAa,gBAAgB,EAC3B,iBACA,iBACA,oBACA,cACA,wBACuB;CACvB,MAAM,EAAE,oBAAoB,0BAA0B,qBAAqB;CAC3E,MAAM,EAAE,4BAA4B,0BAA0B;CAE9D,MAAM,6BAA6B;AAGjC,MACE,mBACA,qBACA,2BACA,wBAAwB,OACxB;GACA,MAAM,EAAE,OAAO,UAAU,cAAc,kBACrC;AACF,qBAAkB,OAAO,UAAU,cAAc,cAAc;;AAGjE,gBAAc;AAEd,MAAI,CAAC,mBAAmB,sBACtB,uBAAsB,SAAS;;AAInC,iBAAgB;AACd,MAAI,uBAAuB,YAAY,gBACrC,oBAAmB,MAAM;IAG1B,CAAC,mBAAmB,CAAC;AAExB,QACE,oBAAC;EACC,iBAAe;EACf,eAAY;EACZ,MAAM;EACN,SAAS;EACT,aAAa;EACb,KAAK;EACL,KAAI;EACJ,UAAU;GAAE,WAAW;GAAiB,WAAW;GAAY;EAC/D,SAAQ;GACR"}

package/dist/AppHeader/Search/SearchPane.js

@@ -476,4 +476,5 @@ const SearchPane = ({ onSearch, onTrackingClick, searchButtonRef, toggleSearch,
 };
 
 //#endregion
-export { SearchPane, SemiboldSearchIcon };
+export { SearchPane, SemiboldSearchIcon };
+//# sourceMappingURL=SearchPane.js.map

package/dist/AppHeader/Search/SearchPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchPane.js","names":["Input","loader: SearchAsYouTypeLoader","SearchPane: React.FC<SearchPaneProps>","theme","React","handleChange: React.ChangeEventHandler<HTMLInputElement>","handleSubmit: React.FormEventHandler","searchEventNoResultDelay: NodeJS.Timeout"],"sources":["../../../src/AppHeader/Search/SearchPane.tsx"],"sourcesContent":["import {\n  Badge,\n  Box,\n  ContentContainer,\n  FlexBox,\n  FocusTrap,\n  IconButton,\n  Menu,\n  MenuItem,\n  Shimmer,\n  StrokeButton,\n  Text,\n} from '@codecademy/gamut';\nimport { MiniDeleteIcon, SearchIcon } from '@codecademy/gamut-icons';\nimport { css, theme, useCurrentMode } from '@codecademy/gamut-styles';\nimport { useTheme } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useOnEscHandler } from '../shared';\nimport { searchPlaceholder } from './consts';\nimport { PopularContent, PopularSearches } from './DefaultResults';\nimport { useUrlChangeDetection } from './hooks/useUrlChangeDetection';\nimport { QuizAndHelpCenterLinks } from './QuizAndHelpCenterLinks';\nimport { safelyRedirect } from './safelyRedirect';\nimport { useSearchTrackingContext } from './SearchTrackingProvider';\nimport { searchWorker } from './SearchWorker';\nimport type {\n  AutocompleteSuggestion,\n  SearchAsYouTypeResults,\n} from './SearchWorker/types';\nimport { SearchPaneProps } from './types';\n\nconst Form = Box.withComponent('form');\nconst Input = Box.withComponent('input');\n\nconst QueryContainer = styled(ContentContainer)(\n  css({\n    display: 'flex',\n    width: '100%',\n    pt: 16,\n    pb: { _: 0, md: 24 },\n    px: { _: 24 },\n  })\n);\n\nconst SuggestionContainer = styled(ContentContainer)(\n  css({\n    pt: 16,\n    pb: { _: 0, md: 24 },\n    px: { _: 24 },\n  })\n);\n\nconst StyledInput = styled(Input)(\n  css({\n    outline: `none`,\n    '&::placeholder': {\n      textColor: theme.colors['text-secondary'] as never,\n    },\n  })\n);\n\nconst InlineResultLi = styled(MenuItem)(\n  css({\n    pl: 0,\n    py: 8,\n    fontSize: 16,\n    '&:focus-visible:after': {\n      left: -4,\n    },\n  })\n);\n\nconst InlineLoaderLi = styled.li(\n  css({\n    listStyleType: 'none',\n    display: 'flex',\n    gap: 12,\n    alignItems: 'center',\n  })\n);\n\nexport const SemiboldSearchIcon = styled(SearchIcon)`\n  overflow: visible !important;\n  circle,\n  path {\n    stroke-width: 2px;\n  }\n  rect {\n    transform: translate(-2px, -2px);\n    height: calc(100% + 4px);\n    width: calc(100% + 4px);\n  }\n`;\n\nconst EllipsisBox = styled(Box)`\n  text-overflow: ellipsis;\n`;\n\nconst HighlightedText = ({\n  suggestion: { title, segments },\n}: {\n  suggestion: AutocompleteSuggestion;\n}) => {\n  const mode = useCurrentMode();\n  const highlightColor = mode === 'dark' ? 'hyper' : 'yellow';\n\n  return (\n    <FlexBox>\n      <EllipsisBox\n        maxWidth=\"calc(100vw - 128px)\"\n        whiteSpace=\"pre\"\n        aria-hidden\n        overflow=\"hidden\"\n      >\n        {segments.map((segment, i) => (\n          <Text\n            key={`${title}:${i.toString()}`}\n            lineHeight=\"title\"\n            {...(segment.highlight\n              ? { bg: highlightColor, fontWeight: 'bold' }\n              : {})}\n          >\n            {segment.value}\n          </Text>\n        ))}\n      </EllipsisBox>\n      <Text screenreader>{title}</Text>\n    </FlexBox>\n  );\n};\n\ntype SearchAsYouTypeLoader = {\n  shimmerRows: {\n    key: string;\n    shimmers: {\n      key: string;\n      width: number;\n    }[];\n  }[];\n};\n\nlet loaderKey = 0;\nfunction rndLoader() {\n  // eslint-disable-next-line no-plusplus\n  const key = loaderKey++;\n  const loader: SearchAsYouTypeLoader = { shimmerRows: [] };\n  for (let i = 0; i < 5; i++) {\n    const row = {\n      key: `${key}:${i}`,\n      shimmers: [] as { key: string; width: number }[],\n    };\n    const words = Math.ceil(Math.random() * 3);\n    for (let j = 0; j < words; j++) {\n      const width = 12 + Math.round(Math.random() * 96);\n      row.shimmers.push({\n        key: `${key}:${j}`,\n        width,\n      });\n    }\n    loader.shimmerRows.push(row);\n  }\n  return loader;\n}\n\nexport const SearchPane: React.FC<SearchPaneProps> = ({\n  onSearch,\n  onTrackingClick,\n  searchButtonRef,\n  toggleSearch,\n  onSearchAsYouType,\n}) => {\n  const theme = useTheme();\n  const [value, setValue] = useState('');\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [autoCompleteSuggestions, setAutoCompleteSuggestions] = useState<\n    AutocompleteSuggestion[]\n  >([]);\n  const [searchAsYouTypeResults, setSearchAsYouTypeResults] =\n    useState<SearchAsYouTypeResults | null>(null);\n\n  const [searchResultClicked, setSearchResultClicked] = useState(false);\n\n  const { setOnSearchAsYouTypeParams } = useSearchTrackingContext();\n\n  const searchAsYouTypeLoader = React.useMemo(\n    () => (searchAsYouTypeResults === null ? rndLoader() : null),\n    [searchAsYouTypeResults]\n  );\n\n  const valueTrimmed = value.trim();\n\n  const hasSearchEventAndResultsWithoutClick =\n    onSearchAsYouType && searchAsYouTypeResults && !searchResultClicked;\n\n  const closeSearch = async () => {\n    // track search event when user made a search and then closed search pane\n    if (hasSearchEventAndResultsWithoutClick && valueTrimmed.length > 0) {\n      const { query, searchId, resultsCount, queryLoadTime } =\n        searchAsYouTypeResults;\n      onSearchAsYouType(query, searchId, resultsCount, queryLoadTime);\n    }\n\n    await toggleSearch();\n    // adds a little delay between closing the search pane and focusing on the button\n    // to prevent the search pane from immediately opening again\n    setTimeout(() => {\n      if (searchButtonRef && searchButtonRef?.current) {\n        searchButtonRef.current?.focus();\n      }\n    }, 10);\n  };\n\n  const onKeyDown = useOnEscHandler(closeSearch);\n\n  const onMouseDownOutside = ({ target }: MouseEvent) => {\n    const handleOutsideClick = () => {\n      if (\n        !document\n          .querySelector('[data-testid=\"header-search-dropdown\"]')\n          ?.contains(target as HTMLElement) &&\n        target !== searchButtonRef?.current\n      ) {\n        closeSearch();\n      }\n\n      target?.removeEventListener('mouseup', handleOutsideClick);\n    };\n\n    target?.addEventListener('mouseup', handleOutsideClick);\n  };\n\n  const navigateToSearch = (searchTerm: string, fromPrevSearch?: string) => {\n    onSearch(searchTerm, fromPrevSearch);\n  };\n\n  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (evt) => {\n    setValue(evt.target.value);\n    // reset to false when the search query changes\n    setSearchResultClicked(false);\n  };\n\n  const handleSubmit: React.FormEventHandler = (event) => {\n    event.preventDefault();\n\n    // track search event when the user submits the form to capture complete query\n    if (hasSearchEventAndResultsWithoutClick) {\n      const { query, searchId, resultsCount, queryLoadTime } =\n        searchAsYouTypeResults;\n      onSearchAsYouType(query, searchId, resultsCount, queryLoadTime);\n    }\n\n    navigateToSearch(value, searchAsYouTypeResults?.searchId);\n  };\n\n  const clearInput = () => {\n    // track search event before user clears input\n    if (hasSearchEventAndResultsWithoutClick && valueTrimmed.length > 0) {\n      const { query, searchId, resultsCount, queryLoadTime } =\n        searchAsYouTypeResults;\n      onSearchAsYouType(query, searchId, resultsCount, queryLoadTime);\n    }\n\n    setValue('');\n    setAutoCompleteSuggestions([]);\n    // reset the context with empty values\n    setOnSearchAsYouTypeParams({\n      query: '',\n      searchId: '',\n      resultsCount: 0,\n      queryLoadTime: 0,\n    });\n  };\n\n  // when the current URL changes, we want to close the search pane if it's open\n  // and track search event if user made a search\n  useUrlChangeDetection({\n    onUrlChange: () => {\n      if (hasSearchEventAndResultsWithoutClick && valueTrimmed.length > 0) {\n        const { query, searchId, resultsCount, queryLoadTime } =\n          searchAsYouTypeResults;\n        onSearchAsYouType(query, searchId, resultsCount, queryLoadTime);\n      }\n\n      toggleSearch();\n    },\n  });\n\n  useEffect(() => {\n    // don't track if a result was clicked or if we don't have search results\n    if (\n      searchResultClicked ||\n      !onSearchAsYouType ||\n      !searchAsYouTypeResults ||\n      !valueTrimmed.length\n    )\n      // eslint-disable-next-line no-useless-return\n      return;\n  }, [\n    searchResultClicked,\n    searchAsYouTypeResults,\n    valueTrimmed,\n    onSearchAsYouType,\n  ]);\n\n  useEffect(() => {\n    inputRef.current?.focus();\n    searchWorker.init();\n  }, []);\n\n  useEffect(() => {\n    if (!valueTrimmed.length) {\n      setSearchAsYouTypeResults(null);\n      setAutoCompleteSuggestions([]);\n      setOnSearchAsYouTypeParams({\n        query: '',\n        searchId: '',\n        resultsCount: 0,\n        queryLoadTime: 0,\n      });\n      return;\n    }\n\n    let cancel = false;\n    let clearAutocomplete = true;\n    let clearSearchAsYouType = true;\n\n    let searchEventNoResultDelay: NodeJS.Timeout;\n\n    const loaderDelay = setTimeout(() => {\n      /*\n       * Wait 10 milliseconds to get a response for worker before showing loaders.\n       * This prevents flickering loaders on quick or cached results.\n       */\n      if (cancel) return;\n      if (clearAutocomplete) setAutoCompleteSuggestions([]);\n      if (clearSearchAsYouType) setSearchAsYouTypeResults(null);\n    }, 10);\n\n    searchWorker.autocomplete(valueTrimmed).then((suggestions) => {\n      clearAutocomplete = false;\n\n      if (cancel) return; // text has changed since this request was made\n\n      setAutoCompleteSuggestions(suggestions);\n    });\n\n    searchWorker.searchAsYouType(valueTrimmed).then((results) => {\n      clearSearchAsYouType = false;\n\n      if (cancel) return; // text has changed since this request was made\n\n      setSearchAsYouTypeResults(results);\n\n      setOnSearchAsYouTypeParams({\n        query: results.query,\n        searchId: results.searchId,\n        resultsCount: results.top.length,\n        queryLoadTime: results.queryLoadTime,\n      });\n\n      // track search event with a small delay when there are no results\n      if (\n        onSearchAsYouType &&\n        results.top.length === 0 &&\n        !searchResultClicked\n      ) {\n        const { query, searchId, queryLoadTime } = results;\n        searchEventNoResultDelay = setTimeout(() => {\n          if (!cancel) {\n            onSearchAsYouType(query, searchId, 0, queryLoadTime);\n          }\n        }, 300);\n      }\n    });\n\n    return () => {\n      cancel = true;\n      clearTimeout(loaderDelay);\n      clearTimeout(searchEventNoResultDelay);\n    };\n  }, [\n    valueTrimmed,\n    onSearchAsYouType,\n    searchResultClicked,\n    setOnSearchAsYouTypeParams,\n  ]);\n\n  return (\n    <>\n      <Box\n        aria-hidden\n        bg=\"shadow-secondary\"\n        height=\"100vh\"\n        position=\"fixed\"\n        // We add 6rem here in case there's some sort of branded banner above search\n        // The search area is much taller than 6rem so this is a safe amount of padding\n        top={`calc(${theme.elements.headerHeight} + 6rem)`}\n        width={1}\n      />\n      <FocusTrap\n        onEscapeKey={closeSearch}\n        onClickOutside={onMouseDownOutside}\n        allowPageInteraction\n      >\n        <Box\n          bg=\"background\"\n          borderColorBottom=\"border-primary\"\n          borderColorTop=\"border-tertiary\"\n          borderStyle=\"solid\"\n          borderWidth=\"2px 0 1px\"\n          data-testid=\"header-search-dropdown\"\n          position={{ _: 'fixed', md: 'absolute' }}\n          width=\"100%\"\n          maxHeight={{ _: 'calc(100vh - 63px)', md: 'calc(100vh - 80px)' }}\n          overflow=\"auto\"\n          zIndex={10} // ensure dropdown is above the page content\n        >\n          <Box border=\"none\" width=\"auto\">\n            <QueryContainer>\n              <FlexBox\n                alignItems=\"baseline\"\n                borderColor=\"gray-600\"\n                borderStyleBottom=\"solid\"\n                borderWidthBottom=\"1px\"\n                width=\"100%\"\n              >\n                <SearchIcon\n                  height={{ _: 20, md: 24 }}\n                  width={{ _: 20, md: 24 }}\n                />\n                <Form\n                  action=\"/search\"\n                  id=\"search-form\"\n                  ml={8}\n                  onSubmit={handleSubmit}\n                  width=\"100%\"\n                >\n                  <StyledInput\n                    autoFocus\n                    background=\"none\"\n                    border=\"none\"\n                    color=\"text\"\n                    fontSize={{ _: 20, md: 26 }}\n                    fontWeight=\"bold\"\n                    id=\"header-search-bar\"\n                    name=\"query\"\n                    onChange={handleChange}\n                    onKeyDown={(e) => onKeyDown(e)}\n                    placeholder={searchPlaceholder}\n                    ref={inputRef}\n                    type=\"search\"\n                    value={value}\n                    width=\"100%\"\n                    autoComplete=\"off\"\n                  />\n                </Form>\n                <IconButton\n                  icon={MiniDeleteIcon}\n                  aria-label=\"Clear search\"\n                  tip=\"Clear search\"\n                  tipProps={{\n                    alignment: 'bottom-center',\n                    placement: 'floating',\n                    narrow: true,\n                    zIndex: 2,\n                  }}\n                  onClick={clearInput}\n                  size=\"small\"\n                />\n              </FlexBox>\n            </QueryContainer>\n          </Box>\n          <SuggestionContainer>\n            {valueTrimmed.length > 0 ? (\n              <>\n                <FlexBox flexDirection=\"column\" as=\"ul\" listStyle=\"none\" p={0}>\n                  {autoCompleteSuggestions.map((s, i) => (\n                    <InlineResultLi\n                      key={s.title}\n                      tabIndex={0}\n                      onKeyDown={(evt) => {\n                        if (evt.key === 'Enter') {\n                          setSearchResultClicked(true);\n                          onTrackingClick('autocomplete_result', {\n                            search_id: searchAsYouTypeResults?.searchId ?? '',\n                            misc: JSON.stringify({\n                              position: i,\n                            }),\n                          });\n                          navigateToSearch(\n                            s.title,\n                            searchAsYouTypeResults?.searchId\n                          );\n                          closeSearch();\n                        }\n                      }}\n                      onClick={() => {\n                        setSearchResultClicked(true);\n                        onTrackingClick('autocomplete_result', {\n                          search_id: searchAsYouTypeResults?.searchId ?? '',\n                          misc: JSON.stringify({\n                            position: i,\n                          }),\n                        });\n                        navigateToSearch(\n                          s.title,\n                          searchAsYouTypeResults?.searchId\n                        );\n                        closeSearch();\n                      }}\n                    >\n                      <SemiboldSearchIcon\n                        mb={2 as 0}\n                        size={14}\n                        strokeWidth={8}\n                        aria-hidden\n                        mr={12}\n                      />\n                      <HighlightedText suggestion={s} />\n                    </InlineResultLi>\n                  ))}\n                </FlexBox>\n                {(searchAsYouTypeResults === null ||\n                  searchAsYouTypeResults.top.length > 0) && (\n                  <>\n                    <Text as=\"h2\" fontSize={20} mb={16} mt={24}>\n                      Top results\n                    </Text>\n                    <FlexBox\n                      flexDirection=\"column\"\n                      as=\"ul\"\n                      listStyle=\"none\"\n                      p={0}\n                    >\n                      {searchAsYouTypeResults === null\n                        ? searchAsYouTypeLoader?.shimmerRows.map((r) => (\n                            <InlineLoaderLi key={r.key}>\n                              {r.shimmers.map((word) => (\n                                <Shimmer\n                                  height={30}\n                                  py={8 as 0}\n                                  key={word.key}\n                                  width={word.width}\n                                />\n                              ))}\n                              <Box\n                                fontFamily=\"accent\"\n                                textColor=\"text-secondary\"\n                                fontSize={{ _: 10 as 16 }}\n                                borderColor=\"border-secondary\"\n                                border={1}\n                                borderRadius=\"xl\"\n                                px={16}\n                                opacity={0.1}\n                              >\n                                &nbsp;\n                              </Box>\n                            </InlineLoaderLi>\n                          ))\n                        : searchAsYouTypeResults.top.map((s, i) => (\n                            <InlineResultLi\n                              key={`${\n                                searchAsYouTypeResults.query\n                              }:${i.toString()}`}\n                              tabIndex={0}\n                              role=\"link\"\n                              onKeyDown={(evt) => {\n                                if (evt.key === 'Enter') {\n                                  setSearchResultClicked(true);\n                                  onTrackingClick('search_as_you_type_result', {\n                                    search_id: searchAsYouTypeResults.searchId,\n                                    slug: s.slug,\n                                    ...(s.contentId\n                                      ? { content_id: s.contentId }\n                                      : {}),\n                                    misc: JSON.stringify({\n                                      position: i,\n                                    }),\n                                  });\n                                  closeSearch();\n                                  safelyRedirect(s.urlPath);\n                                }\n                              }}\n                              onClick={() => {\n                                setSearchResultClicked(true);\n                                onTrackingClick('search_as_you_type_result', {\n                                  search_id: searchAsYouTypeResults.searchId,\n                                  slug: s.slug,\n                                  ...(s.contentId\n                                    ? { content_id: s.contentId }\n                                    : {}),\n                                  misc: JSON.stringify({\n                                    position: i,\n                                  }),\n                                });\n                                closeSearch();\n                                safelyRedirect(s.urlPath);\n                              }}\n                            >\n                              <HighlightedText suggestion={s} />\n                              <Badge size=\"sm\" variant=\"tertiary\" ml={12}>\n                                {s.type}\n                              </Badge>\n                            </InlineResultLi>\n                          ))}\n                    </FlexBox>\n                  </>\n                )}\n                {searchAsYouTypeResults?.top.length === 0 && (\n                  <>\n                    <Box fontSize={{ _: 20, sm: 26 }} mt={0} mb={48}>\n                      {`We couldn't find a match for `}\n                      <Text fontWeight=\"bold\">{`\"${valueTrimmed}.\"`}</Text>\n                      {\n                        ' Try another keyword, or see what our members are learning.'\n                      }\n                    </Box>\n                    <Menu border=\"none\" variant=\"popover\">\n                      <PopularContent onTrackingClick={onTrackingClick} />\n                    </Menu>\n                  </>\n                )}\n              </>\n            ) : (\n              <Menu border=\"none\" variant=\"popover\">\n                <PopularSearches\n                  navigateToSearch={navigateToSearch}\n                  onTrackingClick={onTrackingClick}\n                />\n                <PopularContent onTrackingClick={onTrackingClick} />\n              </Menu>\n            )}\n\n            {!!searchAsYouTypeResults?.top.length && (\n              <StrokeButton\n                my={16}\n                onClick={() => {\n                  onTrackingClick('view_all_results', {\n                    search_id: searchAsYouTypeResults.searchId,\n                  });\n                  navigateToSearch(value, searchAsYouTypeResults?.searchId);\n                  closeSearch();\n                }}\n              >\n                View all results\n              </StrokeButton>\n            )}\n            <QuizAndHelpCenterLinks\n              onTrackingClick={onTrackingClick}\n              handleCloseDropdown={closeSearch}\n            />\n          </SuggestionContainer>\n        </Box>\n      </FocusTrap>\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/AppHeader/Search/SearchTrackingProvider/index.js

@@ -25,4 +25,5 @@ const SearchTrackingProvider = ({ children }) => {
 const useSearchTrackingContext = () => useContext(SearchTrackingContext);
 
 //#endregion
-export { SearchTrackingProvider, useSearchTrackingContext };
+export { SearchTrackingProvider, useSearchTrackingContext };
+//# sourceMappingURL=index.js.map

package/dist/AppHeader/Search/SearchTrackingProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["SearchTrackingProvider: React.FC<{\n  children: ReactNode;\n}>"],"sources":["../../../../src/AppHeader/Search/SearchTrackingProvider/index.tsx"],"sourcesContent":["import noop from 'lodash/noop';\nimport React, { createContext, ReactNode, useContext, useState } from 'react';\n\ninterface OnSearchAsYouTypeParamsType {\n  query: string;\n  searchId: string;\n  resultsCount: number;\n  queryLoadTime: number;\n}\n\ninterface SearchTrackingContextType {\n  onSearchAsYouTypeParams: OnSearchAsYouTypeParamsType | null;\n  setOnSearchAsYouTypeParams: (\n    params: OnSearchAsYouTypeParamsType | null\n  ) => void;\n}\n\nexport const SearchTrackingContext = createContext<SearchTrackingContextType>({\n  onSearchAsYouTypeParams: null,\n  setOnSearchAsYouTypeParams: noop,\n});\n\nexport const SearchTrackingProvider: React.FC<{\n  children: ReactNode;\n}> = ({ children }) => {\n  const [onSearchAsYouTypeParams, setOnSearchAsYouTypeParams] =\n    useState<OnSearchAsYouTypeParamsType | null>({\n      query: '',\n      searchId: '',\n      resultsCount: 0,\n      queryLoadTime: 0,\n    });\n\n  return (\n    <SearchTrackingContext.Provider\n      value={{\n        onSearchAsYouTypeParams,\n        setOnSearchAsYouTypeParams,\n      }}\n    >\n      {children}\n    </SearchTrackingContext.Provider>\n  );\n};\n\nexport const useSearchTrackingContext = () => useContext(SearchTrackingContext);\n"],"mappings":";;;;;AAiBA,MAAa,wBAAwB,cAAyC;CAC5E,yBAAyB;CACzB,4BAA4B;CAC7B,CAAC;AAEF,MAAaA,0BAEP,EAAE,eAAe;CACrB,MAAM,CAAC,yBAAyB,8BAC9B,SAA6C;EAC3C,OAAO;EACP,UAAU;EACV,cAAc;EACd,eAAe;EAChB,CAAC;AAEJ,QACE,oBAAC,sBAAsB;EACrB,OAAO;GACL;GACA;GACD;EAEA;GAC8B;;AAIrC,MAAa,iCAAiC,WAAW,sBAAsB"}

package/dist/AppHeader/Search/SearchWorker/PromiseLookup.js

@@ -40,4 +40,5 @@ var PromiseLookup = class {
 };
 
 //#endregion
-export { PromiseLookup };
+export { PromiseLookup };
+//# sourceMappingURL=PromiseLookup.js.map

package/dist/AppHeader/Search/SearchWorker/PromiseLookup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromiseLookup.js","names":["args: {\n      onKeyInit: (namespace: keyof Types, key: string) => void;\n    }"],"sources":["../../../../src/AppHeader/Search/SearchWorker/PromiseLookup.ts"],"sourcesContent":["type Resolver<T> = (value: T) => void;\n\nclass SplitPromise<T> {\n  promise: Promise<T>;\n  resolver!: Resolver<T>;\n\n  constructor() {\n    this.promise = new Promise((r) => (this.resolver = r));\n  }\n}\n\nexport class PromiseLookup<Types> {\n  constructor(\n    private args: {\n      onKeyInit: (namespace: keyof Types, key: string) => void;\n    }\n  ) {}\n\n  namespaces = new Map<keyof Types, Map<string, SplitPromise<unknown>>>();\n\n  private getNamespace<N extends keyof Types>(namespace: N) {\n    let ns = this.namespaces.get(namespace);\n    if (!ns) {\n      ns = new Map();\n      this.namespaces.set(namespace, ns);\n    }\n    return ns as Map<string, SplitPromise<Types[N]>>;\n  }\n\n  private getSplitPromise<N extends keyof Types>(namespace: N, key: string) {\n    const ns = this.getNamespace(namespace);\n    let splitPromise = ns.get(key);\n    if (!splitPromise) {\n      splitPromise = new SplitPromise<Types[N]>();\n      ns.set(key, splitPromise);\n      this.args.onKeyInit(namespace, key);\n    }\n    return splitPromise;\n  }\n\n  get<N extends keyof Types>(namespace: N, key: string) {\n    return this.getSplitPromise(namespace, key).promise;\n  }\n\n  resolve<N extends keyof Types>(namespace: N, key: string, value: Types[N]) {\n    this.getSplitPromise(namespace, key).resolver(value);\n  }\n}\n"],"mappings":";;;AAEA,IAAM,eAAN,MAAsB;CAIpB,cAAc;wBAHd;wBACA;AAGE,OAAK,UAAU,IAAI,SAAS,MAAO,KAAK,WAAW,EAAG;;;AAI1D,IAAa,gBAAb,MAAkC;CAChC,YACE,AAAQA,MAGR;EAHQ;wBAKV,8BAAa,IAAI,KAAsD;;CAEvE,AAAQ,aAAoC,WAAc;EACxD,IAAI,KAAK,KAAK,WAAW,IAAI,UAAU;AACvC,MAAI,CAAC,IAAI;AACP,wBAAK,IAAI,KAAK;AACd,QAAK,WAAW,IAAI,WAAW,GAAG;;AAEpC,SAAO;;CAGT,AAAQ,gBAAuC,WAAc,KAAa;EACxE,MAAM,KAAK,KAAK,aAAa,UAAU;EACvC,IAAI,eAAe,GAAG,IAAI,IAAI;AAC9B,MAAI,CAAC,cAAc;AACjB,kBAAe,IAAI,cAAwB;AAC3C,MAAG,IAAI,KAAK,aAAa;AACzB,QAAK,KAAK,UAAU,WAAW,IAAI;;AAErC,SAAO;;CAGT,IAA2B,WAAc,KAAa;AACpD,SAAO,KAAK,gBAAgB,WAAW,IAAI,CAAC;;CAG9C,QAA+B,WAAc,KAAa,OAAiB;AACzE,OAAK,gBAAgB,WAAW,IAAI,CAAC,SAAS,MAAM"}

package/dist/AppHeader/Search/SearchWorker/index.d.ts

@@ -7,4 +7,5 @@ declare const searchWorker: {
   searchAsYouType(query: string): Promise<SearchAsYouTypeResults>;
 };
 //#endregion
-export { searchWorker };
+export { searchWorker };
+//# sourceMappingURL=index.d.ts.map

package/dist/AppHeader/Search/SearchWorker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/AppHeader/Search/SearchWorker/index.ts"],"sourcesContent":[],"mappings":";;;cAMa;;+BAWqB,QASjC,sBAAA;EApBY,eAoBZ,CAAA,KAAA,EAAA,MAAA,CAAA,EAJoC,OAIpC,CATiC,sBAAA,CASjC;CAAA"}

package/dist/AppHeader/Search/SearchWorker/index.js

@@ -21,4 +21,5 @@ const searchWorker = {
 };
 
 //#endregion
-export { searchWorker };
+export { searchWorker };
+//# sourceMappingURL=index.js.map

package/dist/AppHeader/Search/SearchWorker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["workerPromise: Promise<SearchWorker>"],"sources":["../../../../src/AppHeader/Search/SearchWorker/index.ts"],"sourcesContent":["import { SearchAction, SearchWorker } from './types';\n\nlet workerPromise: Promise<SearchWorker>;\n\nconst initErr = 'Search worker not initialized';\n\nexport const searchWorker = {\n  init() {\n    if (!workerPromise) {\n      workerPromise = (async () => {\n        // lazy load worker\n        const { createSearchWorker } = await import('./worker');\n        return createSearchWorker();\n      })();\n    }\n  },\n\n  async autocomplete(query: string) {\n    if (!workerPromise) throw new Error(initErr);\n    return (await workerPromise)(SearchAction.Autocomplete, query);\n  },\n\n  async searchAsYouType(query: string) {\n    if (!workerPromise) throw new Error(initErr);\n    return (await workerPromise)(SearchAction.SearchAsYouType, query);\n  },\n};\n"],"mappings":";;;AAEA,IAAIA;AAEJ,MAAM,UAAU;AAEhB,MAAa,eAAe;CAC1B,OAAO;AACL,MAAI,CAAC,cACH,kBAAiB,YAAY;GAE3B,MAAM,EAAE,uBAAuB,MAAM,OAAO;AAC5C,UAAO,oBAAoB;MACzB;;CAIR,MAAM,aAAa,OAAe;AAChC,MAAI,CAAC,cAAe,OAAM,IAAI,MAAM,QAAQ;AAC5C,UAAQ,MAAM,eAAe,aAAa,cAAc,MAAM;;CAGhE,MAAM,gBAAgB,OAAe;AACnC,MAAI,CAAC,cAAe,OAAM,IAAI,MAAM,QAAQ;AAC5C,UAAQ,MAAM,eAAe,aAAa,iBAAiB,MAAM;;CAEpE"}

package/dist/AppHeader/Search/SearchWorker/src.js

@@ -155,4 +155,5 @@ function worker() {
 }
 
 //#endregion
-export { serializeSearchWorkerSrc };
+export { serializeSearchWorkerSrc };
+//# sourceMappingURL=src.js.map

package/dist/AppHeader/Search/SearchWorker/src.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"src.js","names":["handlers: { [action: string]: (q: PreparsedQuery) => void }","topAutocompleteTitles: AutocompleteSuggestion[]","currentSegment: HighlightSegment | null","segments: HighlightSegment[]","cmc: ConsecutiveMatchingChars | null","charScores: number[]"],"sources":["../../../../src/AppHeader/Search/SearchWorker/src.ts"],"sourcesContent":["/*\n * A web worker to handle search-as-you-type and autocomplete\n *\n * This worker implements an algorithm for text matching that tests\n * a query string against a set of titles, and gives a score to\n * each character in a given title.\n *\n * e.g. matching query \"abcde\" to title \"ab cde\"\n * \"a\" and \"b\" each get a score of 2, because each is part of the match \"ab\"\n * \"c\", \"d\", and \"e\" each get a score of 3, because each is part of the match \"cde\"\n *\n * For autocomplete, a large list of titles is preloaded, and this\n * scoring algorithm is used both to find the top 5 matches, and to\n * determine which characters should be highlighted.\n * (These titles have certain phrases like \"Intro to\" removed so that they\n * better resemble something that a user would type.)\n *\n * For search-as-you-type, we rely on typesense to find matches,\n * but we still use this algorithm for character highlighting.\n */\n\nimport {\n  AutocompleteSuggestion,\n  HighlightSegment,\n  SearchAsYouTypeResults,\n} from './types';\n\nfunction getPortalOrigin() {\n  const { origin } = window.location;\n  const envs = ['tengu', 'tayra', 'staging', 'www'];\n\n  // for standard envs, use portal app in the same env\n  if (envs.some((s) => `https://${s}.codecademy.com` === origin)) return origin;\n\n  // for PR envs (e.g. pr-40229-monolith.dev-eks.codecademy.com)\n  if (origin.includes('.dev-eks.codecademy.com')) return origin;\n\n  // for local, use local portal-app, replace if origin port is monolith or le\n  if (origin.includes('localhost')) return origin.replace(/:\\d{4}/, ':3100');\n\n  // otherwise (e.g. in monolith pr env) use staging portal-app\n  return 'https://staging.codecademy.com';\n}\n\nexport function serializeSearchWorkerSrc() {\n  const BASE_URL = `${getPortalOrigin()}/api/portal/search`;\n  const fnAsStr = worker.toString().trim();\n\n  // in a prod build, webpack will handle removing comments\n\n  return fnAsStr\n    .slice(fnAsStr.indexOf('{') + 1, -1) // remove wrapping function, which may have been renamed by minification\n    .replaceAll('  ', '') // remove indentation\n    .replaceAll('{BASE_URL}', BASE_URL) // interpolate base url\n    .replaceAll('{SEARCH}', window.location.search); // interpolate search query\n}\n\n/*\n * This function contains the code that is serialized to run in the worker. It\n * can't reference anything outside of itself (except types). Data is passed to\n * the worker via onmessage and passed back to the main thread via postMessage.\n */\nfunction worker() {\n  type RawTitle = {\n    value: string;\n    popularity: number;\n  };\n  type PreparsedTitle = {\n    title: string;\n    lower: string;\n    words: Set<string>;\n    popularity: number;\n  };\n  type PreparsedQuery = {\n    query: string;\n    words: Set<string>;\n  };\n  type ScoredTitle = {\n    title: string;\n    charScores: number[];\n    score: number;\n  };\n  type ConsecutiveMatchingChars = { value: string };\n\n  const preloadTitlesPromise = fetch('{BASE_URL}/autocomplete-preload{SEARCH}')\n    .then((f) => f.json())\n    .then((rawTitles) => rawTitles.map(preparseTitle));\n\n  function preparseTitle({ value, popularity }: RawTitle): PreparsedTitle {\n    const lower = value.toLowerCase();\n    const words = getWordSet(lower);\n    return { title: value, lower, words, popularity };\n  }\n\n  function preparseQuery(query: string): PreparsedQuery {\n    const words = getWordSet(query);\n    return { query, words };\n  }\n\n  const wordSplitters = /[ :-]/g;\n\n  function getWordSet(str: string) {\n    const words = str\n      .split(wordSplitters)\n      .map((w) => w.trim())\n      .filter(Boolean);\n    return new Set(words);\n  }\n\n  const handlers: { [action: string]: (q: PreparsedQuery) => void } = {\n    autocomplete: autocompleteHandler,\n    'search-as-you-type': searchAsYouTypeHandler,\n  };\n\n  onmessage = ({ data }: MessageEvent<{ action: string; query: string }>) => {\n    const { query, action } = data;\n    const handler = handlers[action];\n    if (handler) {\n      handler(preparseQuery(query));\n    }\n  };\n\n  function getScoredTitle(q: PreparsedQuery, t: PreparsedTitle): ScoredTitle {\n    const charScores = getCharScores(q, t);\n    const score = getTotalScore(q, t, charScores);\n    return { title: t.title, charScores, score };\n  }\n\n  const maxResults = 5;\n\n  function autocompleteHandler(q: PreparsedQuery) {\n    preloadTitlesPromise.then((titles: PreparsedTitle[]) => {\n      const scoredTitles = titles.map((t: PreparsedTitle) =>\n        getScoredTitle(q, t)\n      );\n\n      const topAutocompleteTitles: AutocompleteSuggestion[] = scoredTitles\n        .filter((x: ScoredTitle) => x.score > 0)\n        .sort((a: ScoredTitle, b: ScoredTitle) => (a.score > b.score ? -1 : 1))\n        .slice(0, maxResults)\n        .map((t: ScoredTitle) => ({\n          title: t.title,\n          segments: getHighlightSegments(t.title, t.charScores),\n        }));\n\n      postMessage({\n        query: q.query,\n        result: topAutocompleteTitles,\n        action: 'autocomplete',\n      });\n    });\n  }\n\n  function searchAsYouTypeHandler(q: PreparsedQuery) {\n    fetch('{BASE_URL}/search-as-you-type{SEARCH}', {\n      body: JSON.stringify({ query: q.query, max: maxResults }),\n      method: 'POST',\n    })\n      .then((f) => f.json())\n      .then((searchAsYouTypeResults: SearchAsYouTypeResults) => {\n        for (let i = 0; i < searchAsYouTypeResults.top.length; i++) {\n          const entry = searchAsYouTypeResults.top[i];\n          const t = preparseTitle({ value: entry.title, popularity: 0 });\n          const charScores = getCharScores(q, t);\n          entry.segments = getHighlightSegments(entry.title, charScores);\n          entry.key = q.query + ':' + entry.title;\n        }\n        postMessage({\n          query: q.query,\n          result: searchAsYouTypeResults,\n          action: 'search-as-you-type',\n        });\n      });\n  }\n\n  /*\n   * For the search \"alge\", .04 is just low enough so that \"Linear algebra\"\n   * (which matches on 4 letters) comes in above \"Data structures and algorithms\"\n   * (which only matches on 3 letters, but has a high popularity score).\n   */\n  const popularityStrength = 0.04;\n\n  // Total used in sorting to find autocomplet top 5\n  // Bonus scores are includes in certain cases\n  function getTotalScore(\n    q: PreparsedQuery,\n    t: PreparsedTitle,\n    charScores: number[]\n  ) {\n    let fromChars = 0;\n    for (let i = 0; i < charScores.length; i++) {\n      fromChars += charScores[i];\n    }\n\n    const fromPopularity = (t.popularity || 0) * popularityStrength;\n\n    let bonus = 0;\n    // for each complete word present in both the title and query\n    q.words.forEach((qw) => {\n      if (t.words.has(qw)) {\n        bonus += 100;\n      }\n    });\n\n    // if the title starts with the query\n    if (t.lower.startsWith(q.query)) {\n      bonus += 200;\n    } else if (t.lower.startsWith(q.query.slice(0, 3))) {\n      // or at least the first 3 chars\n      bonus += 100;\n    }\n\n    // if the title is an exact match with the query\n    if (t.lower === q.query) {\n      bonus += 100;\n    }\n\n    // if there are some matching chars and the title is within 3 chars length of the query\n    if (fromChars > 1 && Math.abs(t.lower.length - q.query.length) <= 3) {\n      bonus += 100;\n    }\n\n    return fromChars + (fromChars > 1 ? fromPopularity : 0) + bonus;\n  }\n\n  // returns { value: string, highlight: boolean }[]\n  function getHighlightSegments(title: string, charScores: number[]) {\n    let currentSegment: HighlightSegment | null = null;\n    const segments: HighlightSegment[] = [];\n\n    const shouldHighlight = (i: number) => charScores[i] > 0;\n\n    const isDifferentFromPrev = (i: number) =>\n      shouldHighlight(i - 1) !== shouldHighlight(i);\n\n    for (let i = 0; i < title.length; i++) {\n      if (i === 0 || isDifferentFromPrev(i)) {\n        // If this char should be highlighted, but the prev one should not\n        // or vice versa, start a new segment.\n        currentSegment = { value: '', highlight: shouldHighlight(i) };\n        segments.push(currentSegment);\n      }\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      currentSegment!.value += title[i];\n    }\n    return segments;\n  }\n\n  // Used by autocomplete, both for finding top 5, and for highlighting\n  // Used by search-as-you-type, only for highlighting\n  // Returns number[], where each number is the match score for a char in the title\n  function getCharScores(q: PreparsedQuery, t: PreparsedTitle) {\n    /*\n     * Prefill the array for each char in the title.\n     * For each char, we keep an array of the consecutive matches the char is a part of.\n     */\n    const cmcsForTitleChars = Array(t.lower.length)\n      .fill(0)\n      .map(() => []) as ConsecutiveMatchingChars[][];\n\n    /*\n     * Overlay the query onto the title to see which chars match.\n     * Shift to align at different positions.\n     * e.g.\n     *   shift: 0\n     *   query: python3 learn\n     *   title: learn python 3\n     *   (no matches)\n     *\n     *   shift: 6\n     *   query:       python3 learn\n     *   title: learn python 3\n     *   (the word \"python\" matches)\n     *\n     *   shift: 7\n     *   query:        python3 learn\n     *   title: learn python 3\n     *   (\"3\" matches)\n     *\n     *   shift: -8\n     *   query: python3 learn\n     *   title:         learn python 3\n     *   (\"learn\" matches)\n     */\n    for (let shift = 1 - q.query.length; shift < t.lower.length; shift++) {\n      // for each shift position\n\n      let cmc: ConsecutiveMatchingChars | null = null;\n      const startOverlap = Math.max(shift, 0);\n      const endOverlap = Math.min(q.query.length + shift, t.lower.length);\n\n      // i is the index of a char in the title\n      for (let i = startOverlap; i < endOverlap; i++) {\n        // for each char position in the potentially overlapping area\n\n        // if char at this position matches (and isn't a space)\n        if (q.query[i - shift] === t.lower[i] && t.lower[i] !== ' ') {\n          if (!cmc) {\n            // start a new cmc if needed\n            cmc = { value: '' };\n          }\n\n          /*\n           * Append this char to the current cmc.\n           * We use an object with {value} so that we can modify by reference,\n           * since we want to modify the cmc, not only for this char, but also\n           * for any previous chars that this cmc was pushed to, since those\n           * chars are part of this same consecutive match.\n           */\n          cmc.value += q.query[i - shift];\n\n          // include this cmc for this char\n          cmcsForTitleChars[i].push(cmc);\n        } else if (cmc) {\n          // set to null so that the next match starts a new cmc\n          cmc = null;\n        }\n      }\n    }\n\n    const avgQueryWordLength = q.query.length / q.words.size;\n\n    // If avgQueryWordLength is 1-3, we want to the min match to be about that same size.\n    // If avgQueryWordLength is longer, we want min match to be longer...but not too long.\n    // e.g. For avgQueryWordLength of 9, min should be 5\n    // The misspelling \"regresion\" should still match \"regression\", but not \"encryption\",\n    // \"authentication\" or other words ending in \"ion\"\n    const minMatchLength = Math.ceil(avgQueryWordLength ** 0.65);\n\n    const charScores: number[] = [];\n    for (let i = 0; i < cmcsForTitleChars.length; i++) {\n      const cmcs = cmcsForTitleChars[i];\n      let score = 0;\n      for (let j = 0; j < cmcs.length; j++) {\n        const cmc = cmcs[j];\n        // if the string of consecutive matching chars meets the minMatchLength\n        // or if it's a standalone word in the query (e.g \"C\")\n        if (cmc.value.length >= minMatchLength || q.words.has(cmc.value)) {\n          score += cmc.value.length;\n        }\n      }\n      charScores.push(score);\n    }\n    return charScores;\n  }\n}\n"],"mappings":"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"}

package/dist/AppHeader/Search/SearchWorker/types.d.ts

@@ -27,4 +27,5 @@ interface SearchAsYouTypeResults extends SearchResults {
   })[];
 }
 //#endregion
-export { AutocompleteSuggestion, SearchAsYouTypeResults };
+export { AutocompleteSuggestion, SearchAsYouTypeResults };
+//# sourceMappingURL=types.d.ts.map

package/dist/AppHeader/Search/SearchWorker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../src/AppHeader/Search/SearchWorker/types.ts"],"sourcesContent":[],"mappings":";KAAY,gBAAA;EAAA,KAAA,EAAA,MAAA;EAKA,SAAA,EAAA,OAAA;AAGV,CAAA;AASQ,KAZE,sBAAA,GAYS;EAMJ,KAAA,EAAA,MAAA;EACT,QAAA,EAjBI,gBAiBJ,EAAA;CAEM;UAhBJ,aAAA,CAasC;EAAa,KAAA,EAAA,MAAA;;;;;UANnD,WAAA;;;;;UAMO,sBAAA,SAA+B;QACxC;;cAEM"}

package/dist/AppHeader/Search/SearchWorker/types.js

@@ -6,4 +6,5 @@ let SearchAction = /* @__PURE__ */ function(SearchAction$1) {
 }({});
 
 //#endregion
-export { SearchAction };
+export { SearchAction };
+//# sourceMappingURL=types.js.map

package/dist/AppHeader/Search/SearchWorker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/AppHeader/Search/SearchWorker/types.ts"],"sourcesContent":["export type HighlightSegment = {\n  value: string;\n  highlight: boolean;\n};\n\nexport type AutocompleteSuggestion = {\n  title: string;\n  segments: HighlightSegment[];\n};\n\ninterface SearchResults {\n  query: string;\n  queryLoadTime: number;\n  searchId: string;\n  resultsCount: number;\n}\n\ninterface BaseTopData {\n  type: string;\n  title: string;\n  slug: string;\n}\n\nexport interface SearchAsYouTypeResults extends SearchResults {\n  top: (BaseTopData & {\n    contentId?: string;\n    segments: HighlightSegment[];\n    urlPath: string;\n    key: string;\n  })[];\n}\n\nexport enum SearchAction {\n  Autocomplete = 'autocomplete',\n  SearchAsYouType = 'search-as-you-type',\n}\n\nexport type SearchResultTypes = {\n  [SearchAction.Autocomplete]: AutocompleteSuggestion[];\n  [SearchAction.SearchAsYouType]: SearchAsYouTypeResults;\n};\n\nexport type SearchWorker = <A extends SearchAction>(\n  action: A,\n  query: string\n) => Promise<SearchResultTypes[A]>;\n"],"mappings":";AAgCA,IAAY,wDAAL;AACL;AACA"}

package/dist/AppHeader/Search/SearchWorker/worker.js

@@ -23,4 +23,5 @@ function createSearchWorker() {
 }
 
 //#endregion
-export { createSearchWorker };
+export { createSearchWorker };
+//# sourceMappingURL=worker.js.map

package/dist/AppHeader/Search/SearchWorker/worker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"worker.js","names":[],"sources":["../../../../src/AppHeader/Search/SearchWorker/worker.ts"],"sourcesContent":["import { PromiseLookup } from './PromiseLookup';\nimport { serializeSearchWorkerSrc } from './src';\nimport type { SearchAction, SearchResultTypes, SearchWorker } from './types';\n\nconst mockWorker = () => ({ onmessage: () => null, postMessage: () => null });\n\nexport function createSearchWorker(): SearchWorker {\n  const src = serializeSearchWorkerSrc();\n  const blob = new Blob([src], { type: 'text/javascript' });\n  const dataUrl = URL.createObjectURL?.(blob);\n  const w = typeof Worker === 'undefined' ? mockWorker() : new Worker(dataUrl);\n\n  const results = new PromiseLookup<SearchResultTypes>({\n    onKeyInit: (action, query) => w.postMessage({ action, query }),\n  });\n\n  w.onmessage = ({ data }) => {\n    const { query, result, action } = data;\n    results.resolve(action, query, result);\n  };\n\n  return <A extends SearchAction>(action: A, query: string) =>\n    results.get<A>(action, query);\n}\n"],"mappings":";;;;AAIA,MAAM,oBAAoB;CAAE,iBAAiB;CAAM,mBAAmB;CAAM;AAE5E,SAAgB,qBAAmC;CACjD,MAAM,MAAM,0BAA0B;CACtC,MAAM,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE,EAAE,MAAM,mBAAmB,CAAC;CACzD,MAAM,UAAU,IAAI,kBAAkB,KAAK;CAC3C,MAAM,IAAI,OAAO,WAAW,cAAc,YAAY,GAAG,IAAI,OAAO,QAAQ;CAE5E,MAAM,UAAU,IAAI,cAAiC,EACnD,YAAY,QAAQ,UAAU,EAAE,YAAY;EAAE;EAAQ;EAAO,CAAC,EAC/D,CAAC;AAEF,GAAE,aAAa,EAAE,WAAW;EAC1B,MAAM,EAAE,OAAO,QAAQ,WAAW;AAClC,UAAQ,QAAQ,QAAQ,OAAO,OAAO;;AAGxC,SAAgC,QAAW,UACzC,QAAQ,IAAO,QAAQ,MAAM"}

package/dist/AppHeader/Search/consts.d.ts

@@ -23,4 +23,5 @@ declare const popularContent: ({
 })[];
 declare const ALLOWED_HOSTS: string[];
 //#endregion
-export { ALLOWED_HOSTS, ContentType, popularContent, popularSearchTerms, searchPlaceholder };
+export { ALLOWED_HOSTS, ContentType, popularContent, popularSearchTerms, searchPlaceholder };
+//# sourceMappingURL=consts.d.ts.map

package/dist/AppHeader/Search/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","names":[],"sources":["../../../src/AppHeader/Search/consts.ts"],"sourcesContent":[],"mappings":";cAAa,iBAAA;AAAA,cAEA,kBAFiB,EAAA,MAAA,EAAA;AAEjB,aASD,WAAA;EAAA,MAAA,GAAA,QAAW;EAQV,SAAA,GAAA,YAkCZ;EAEY,UAAA,GAAA,aAMZ;;;;cA1CY;;;QAkCZ;;;;;;QAAA;;;;cAEY"}

package/dist/AppHeader/Search/consts.js

@@ -60,4 +60,5 @@ const ALLOWED_HOSTS = [
 ];
 
 //#endregion
-export { ALLOWED_HOSTS, ContentType, popularContent, popularSearchTerms, searchPlaceholder };
+export { ALLOWED_HOSTS, ContentType, popularContent, popularSearchTerms, searchPlaceholder };
+//# sourceMappingURL=consts.js.map

package/dist/AppHeader/Search/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","names":[],"sources":["../../../src/AppHeader/Search/consts.ts"],"sourcesContent":["export const searchPlaceholder = 'What are you learning today?';\n\nexport const popularSearchTerms = [\n  'Artificial Intelligence',\n  'Data Science',\n  'Python',\n  'Web Development',\n  'HTML',\n  'Java',\n];\n\nexport enum ContentType {\n  COURSE = 'Course',\n  SKILLPATH = 'Skill Path',\n  CAREERPATH = 'Career Path',\n  ARTICLE = 'Article',\n  DOC = 'Doc',\n}\n\nexport const popularContent = [\n  {\n    title: 'Learn Python 3',\n    href: '/learn/learn-python-3',\n    type: ContentType.COURSE,\n    slug: 'learn-python-3',\n    contentId: '6c152bd262967f8c941c9707ed636bda',\n  },\n  {\n    title: 'Business Intelligence Data Analyst',\n    href: '/learn/paths/bi-data-analyst',\n    type: ContentType.CAREERPATH,\n    slug: 'bi-data-analyst',\n    contentId: 'd03c7391224540ef8f850f8807a2b72a',\n  },\n  {\n    title: 'Code Foundations',\n    href: '/learn/paths/code-foundations',\n    type: ContentType.SKILLPATH,\n    slug: 'code-foundations',\n    contentId: '5b55e668646caa552f8e4d1d',\n  },\n  {\n    title: 'What is Programming?',\n    href: '/article/what-is-programming',\n    type: ContentType.ARTICLE,\n    slug: 'what-is-programming',\n  },\n  {\n    title: 'HTML | Elements',\n    href: '/resources/docs/html',\n    type: ContentType.DOC,\n    slug: 'html/concepts/elements',\n  },\n];\n\nexport const ALLOWED_HOSTS = [\n  'skillsoft.com',\n  'percipio.com',\n  'localhost',\n  'codecademy.com',\n  'squads-dev.com',\n];\n"],"mappings":";AAAA,MAAa,oBAAoB;AAEjC,MAAa,qBAAqB;CAChC;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAY,sDAAL;AACL;AACA;AACA;AACA;AACA;;;AAGF,MAAa,iBAAiB;CAC5B;EACE,OAAO;EACP,MAAM;EACN,MAAM,YAAY;EAClB,MAAM;EACN,WAAW;EACZ;CACD;EACE,OAAO;EACP,MAAM;EACN,MAAM,YAAY;EAClB,MAAM;EACN,WAAW;EACZ;CACD;EACE,OAAO;EACP,MAAM;EACN,MAAM,YAAY;EAClB,MAAM;EACN,WAAW;EACZ;CACD;EACE,OAAO;EACP,MAAM;EACN,MAAM,YAAY;EAClB,MAAM;EACP;CACD;EACE,OAAO;EACP,MAAM;EACN,MAAM,YAAY;EAClB,MAAM;EACP;CACF;AAED,MAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACD"}

package/dist/AppHeader/Search/hooks/useUrlChangeDetection.js

@@ -13,4 +13,5 @@ const useUrlChangeDetection = ({ onUrlChange, getCurrentUrl = () => window.locat
 };
 
 //#endregion
-export { useUrlChangeDetection };
+export { useUrlChangeDetection };
+//# sourceMappingURL=useUrlChangeDetection.js.map

package/dist/AppHeader/Search/hooks/useUrlChangeDetection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUrlChangeDetection.js","names":[],"sources":["../../../../src/AppHeader/Search/hooks/useUrlChangeDetection.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport interface UrlChangeDetectionOptions {\n  onUrlChange: () => void;\n  getCurrentUrl?: () => string;\n}\n\nexport const useUrlChangeDetection = ({\n  onUrlChange,\n  getCurrentUrl = () => window.location?.href,\n}: UrlChangeDetectionOptions) => {\n  const currentUrl = getCurrentUrl();\n  const prevUrlRef = useRef(currentUrl);\n\n  useEffect(() => {\n    if (prevUrlRef.current !== currentUrl) {\n      onUrlChange();\n      prevUrlRef.current = currentUrl;\n    }\n  }, [currentUrl, onUrlChange]);\n};\n"],"mappings":";;;AAOA,MAAa,yBAAyB,EACpC,aACA,sBAAsB,OAAO,UAAU,WACR;CAC/B,MAAM,aAAa,eAAe;CAClC,MAAM,aAAa,OAAO,WAAW;AAErC,iBAAgB;AACd,MAAI,WAAW,YAAY,YAAY;AACrC,gBAAa;AACb,cAAW,UAAU;;IAEtB,CAAC,YAAY,YAAY,CAAC"}

package/dist/AppHeader/Search/safelyRedirect.js

@@ -36,4 +36,5 @@ function sanitizeURL(url) {
 }
 
 //#endregion
-export { safelyRedirect };
+export { safelyRedirect };
+//# sourceMappingURL=safelyRedirect.js.map

package/dist/AppHeader/Search/safelyRedirect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"safelyRedirect.js","names":[],"sources":["../../../src/AppHeader/Search/safelyRedirect.ts"],"sourcesContent":["/**\n * fork of @mono/util-url/src/safelyRedirect.ts, since\n * the build script doesn't resolve @mono dependencies\n */\n\nimport { ALLOWED_HOSTS } from './consts';\n\nexport function safelyRedirect(url: string) {\n  try {\n    const sanitizedURL = sanitizeURL(url);\n\n    if (isRelativeUrl(sanitizedURL) || hasAllowedHost(sanitizedURL)) {\n      window.location.assign(sanitizedURL);\n    } else {\n      throw new Error(`Invalid redirect url: ${sanitizedURL}`);\n    }\n  } catch (error) {}\n}\n\nfunction hasAllowedHost(url: string) {\n  const parsedUrl = new URL(url);\n  const { hostname } = parsedUrl;\n\n  return ALLOWED_HOSTS.some(\n    (host) =>\n      // Exact match or exact subdomain match (e.g. sub.codecademy.com)\n      hostname === host || hostname.endsWith(`.${host}`)\n  );\n}\n\n// when a url is relative, the URL constructor will throw a TypeError;\nfunction isRelativeUrl(url: string) {\n  try {\n    const parsedUrl = new URL(url);\n    return parsedUrl === undefined;\n  } catch (error) {\n    return true;\n  }\n}\n\n// supports already encoded urls by decoding and re-encoding.\n// params are handled separately to allow for the encoding of / characters\nfunction sanitizeURL(url: string) {\n  const [path, params] = url.split('?', 2);\n  const sanitizedPath = encodeURI(decodeURI(path));\n\n  if (!params) return sanitizedPath;\n\n  const urlParams = new URLSearchParams(params);\n  urlParams.forEach((value, key) => {\n    const decoded = decodeURIComponent(value);\n    urlParams.set(key, decoded);\n  });\n\n  return `${sanitizedPath}?${urlParams.toString()}`;\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,eAAe,KAAa;AAC1C,KAAI;EACF,MAAM,eAAe,YAAY,IAAI;AAErC,MAAI,cAAc,aAAa,IAAI,eAAe,aAAa,CAC7D,QAAO,SAAS,OAAO,aAAa;MAEpC,OAAM,IAAI,MAAM,yBAAyB,eAAe;UAEnD,OAAO;;AAGlB,SAAS,eAAe,KAAa;CAEnC,MAAM,EAAE,aADU,IAAI,IAAI,IAAI;AAG9B,QAAO,cAAc,MAClB,SAEC,aAAa,QAAQ,SAAS,SAAS,IAAI,OAAO,CACrD;;AAIH,SAAS,cAAc,KAAa;AAClC,KAAI;AAEF,SADkB,IAAI,IAAI,IAAI,KACT;UACd,OAAO;AACd,SAAO;;;AAMX,SAAS,YAAY,KAAa;CAChC,MAAM,CAAC,MAAM,UAAU,IAAI,MAAM,KAAK,EAAE;CACxC,MAAM,gBAAgB,UAAU,UAAU,KAAK,CAAC;AAEhD,KAAI,CAAC,OAAQ,QAAO;CAEpB,MAAM,YAAY,IAAI,gBAAgB,OAAO;AAC7C,WAAU,SAAS,OAAO,QAAQ;EAChC,MAAM,UAAU,mBAAmB,MAAM;AACzC,YAAU,IAAI,KAAK,QAAQ;GAC3B;AAEF,QAAO,GAAG,cAAc,GAAG,UAAU,UAAU"}

package/dist/AppHeader/Search/types.d.ts

@@ -13,4 +13,5 @@ interface AppHeaderSearch extends OnSearch, onTrackingClick {
   onEnable: () => void;
 }
 //#endregion
-export { AppHeaderSearch };
+export { AppHeaderSearch };
+//# sourceMappingURL=types.d.ts.map

package/dist/AppHeader/Search/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/AppHeader/Search/types.ts"],"sourcesContent":[],"mappings":";;;;UAGU,eAAA;yDAGe;AALwB;AAKlB,UAIrB,QAAA,CAAQ;EAeD,QAAA,EAAA,CAAA,KAAA,EAAgB,MAAA,EAAA,cAAkB,CAAA,EAAA,MAAA,EAAA,GAAA,IAAe;;;UAAjD,eAAA,SAAwB,UAAU"}

package/dist/AppHeader/Search/useHeaderSearch.js

@@ -35,4 +35,5 @@ const useHeaderSearch = ({ onEnable, onSearch, onTrackingClick, onSearchAsYouTyp
 };
 
 //#endregion
-export { useHeaderSearch };
+export { useHeaderSearch };
+//# sourceMappingURL=useHeaderSearch.js.map

package/dist/AppHeader/Search/useHeaderSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHeaderSearch.js","names":[],"sources":["../../../src/AppHeader/Search/useHeaderSearch.tsx"],"sourcesContent":["import { ButtonBaseElements } from '@codecademy/gamut';\nimport { useRef, useState } from 'react';\n\nimport { AnimatedHeaderZone } from '../shared';\nimport { SearchButton } from './SearchButton';\nimport { SearchPane } from './SearchPane';\nimport { AppHeaderSearch } from './types';\n\nexport const useHeaderSearch = ({\n  onEnable,\n  onSearch,\n  onTrackingClick,\n  onSearchAsYouType,\n}: AppHeaderSearch) => {\n  const [isSearchVisible, setIsSearchVisible] = useState(false);\n  const searchButtonRef = useRef<ButtonBaseElements>(null);\n\n  const toggleSearch = () => {\n    if (!isSearchVisible) {\n      onEnable();\n    }\n    setIsSearchVisible((oldIsSearchVisible) => !oldIsSearchVisible);\n  };\n\n  return [\n    {\n      id: 'search',\n      type: 'render-element',\n      renderElement: () => (\n        <SearchButton\n          isSearchVisible={isSearchVisible}\n          setIsSearchVisible={setIsSearchVisible}\n          toggleSearch={toggleSearch}\n          searchButtonRef={searchButtonRef}\n          onSearchAsYouType={onSearchAsYouType}\n        />\n      ),\n    },\n    <AnimatedHeaderZone visible={isSearchVisible} key=\"search-content\">\n      <SearchPane\n        onSearch={onSearch}\n        onTrackingClick={onTrackingClick}\n        toggleSearch={toggleSearch}\n        searchButtonRef={searchButtonRef}\n        onSearchAsYouType={onSearchAsYouType}\n      />\n    </AnimatedHeaderZone>,\n  ] as const;\n};\n"],"mappings":";;;;;;;AAQA,MAAa,mBAAmB,EAC9B,UACA,UACA,iBACA,wBACqB;CACrB,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,MAAM;CAC7D,MAAM,kBAAkB,OAA2B,KAAK;CAExD,MAAM,qBAAqB;AACzB,MAAI,CAAC,gBACH,WAAU;AAEZ,sBAAoB,uBAAuB,CAAC,mBAAmB;;AAGjE,QAAO,CACL;EACE,IAAI;EACJ,MAAM;EACN,qBACE,oBAAC;GACkB;GACG;GACN;GACG;GACE;IACnB;EAEL,EACD,oBAAC;EAAmB,SAAS;YAC3B,oBAAC;GACW;GACO;GACH;GACG;GACE;IACnB;IAP8C,iBAQ7B,CACtB"}

package/dist/AppHeader/index.d.ts

@@ -26,4 +26,5 @@ type AppHeaderProps = AppHeaderAction & {
 };
 declare const AppHeader: React$1.FC<AppHeaderProps>;
 //#endregion
-export { ALLOWED_HOSTS, AppHeader, AppHeaderProps, ContentType, popularContent, popularSearchTerms, searchPlaceholder };
+export { ALLOWED_HOSTS, AppHeader, AppHeaderProps, ContentType, popularContent, popularSearchTerms, searchPlaceholder };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/AppHeader/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;KA6BY,cAAA,GAAiB;SACpB;kBACS;;EAFN,MAAA,EAIF,eAJgB;EAAG;;;EAInB,uBAAA,CAAA,EAAA,OAAA;EAUsC;;;EAInC,YAkHZ,CAAA,EAAA,OAAA;;oBAtHmB,OAAA,CAAM,sBAAsB;;;cAInC,WAAW,OAAA,CAAM,GAAG"}

package/dist/AppHeader/index.js

@@ -87,4 +87,5 @@ const AppHeader = ({ action, hideRightButtonDefaults, items, notifications, redi
 };
 
 //#endregion
-export { ALLOWED_HOSTS, AppHeader, ContentType, popularContent, popularSearchTerms, searchPlaceholder };
+export { ALLOWED_HOSTS, AppHeader, ContentType, popularContent, popularSearchTerms, searchPlaceholder };
+//# sourceMappingURL=index.js.map