npm - @primer/react-brand - Versions diffs - 0.78.0-rc.bcc08c15 → 0.78.0-rc.c01d8371 - Mend

@primer/react-brand 0.78.0-rc.bcc08c15 → 0.78.0-rc.c01d8371

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (455) hide show

package/esm/SubNav/SubNav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubNav.js","names":[],"sources":["../../src/SubNav/SubNav.tsx"],"sourcesContent":["import React, {\n Children,\n createContext,\n forwardRef,\n isValidElement,\n memo,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type PropsWithChildren,\n type ReactNode,\n type RefObject,\n} from 'react'\nimport {Button, ButtonSizes, ButtonVariants, Text, TextProps, ThemeProvider, useWindowSize} from '..'\n\nimport {clsx} from 'clsx'\nimport {TriangleDownIcon, TriangleUpIcon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useFocusTrap} from '../hooks/useFocusTrap'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {useContainsFocus} from './useContainsFocus'\n\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './SubNav.module.css'\nimport {createPortal} from 'react-dom'\n\nconst testIds = {\n root: 'SubNav-root',\n get button() {\n return `${this.root}-button`\n },\n get overlay() {\n return `${this.root}-overlay`\n },\n get link() {\n return `${this.root}-link`\n },\n get heading() {\n return `${this.root}-heading`\n },\n get action() {\n return `${this.root}-action`\n },\n get subMenu() {\n return `${this.root}-sub-menu`\n },\n}\n\nexport const SubNavSubMenuVariants = ['dropdown', 'anchor'] as const\ntype SubMenuVariants = (typeof SubNavSubMenuVariants)[number]\n\ntype SubNavContextType = {\n portalRef: RefObject<HTMLDivElement \| null>\n}\n\nconst SubNavContext = createContext<SubNavContextType \| undefined>(undefined)\n\nexport const useSubNavContext = () => {\n const context = useContext(SubNavContext)\n if (!context) {\n throw new Error('useSubNavContext must be used within a SubNavProvider')\n }\n return context\n}\n\nfunction SubNavProvider({children}: {children: React.ReactNode}) {\n const anchoredNavOuterPortalRef = React.useRef<HTMLDivElement>(null)\n const anchoredNavPortalRef = React.useRef<HTMLDivElement>(null)\n\n const value = useMemo(\n () => ({\n portalRef: anchoredNavPortalRef,\n }),\n [],\n )\n\n useEffect(() => {\n const menuContainer = anchoredNavOuterPortalRef.current\n\n const observer = new IntersectionObserver(\n ([entry]) => {\n entry.target.classList.toggle(styles['SubNav__anchor-menu-outer-container--stuck'], entry.intersectionRatio < 1)\n },\n {threshold: [1]},\n )\n\n if (menuContainer) {\n observer.observe(menuContainer)\n }\n\n return () => {\n if (menuContainer) {\n observer.unobserve(menuContainer)\n }\n }\n }, [])\n\n return (\n <SubNavContext.Provider value={value}>\n {children}\n\n <div className={styles['SubNav__anchor-menu-outer-container']} ref={anchoredNavOuterPortalRef}>\n <div className={clsx(styles['SubNav__anchor-menu-container'])} ref={anchoredNavPortalRef} />\n </div>\n </SubNavContext.Provider>\n )\n}\n\nexport type SubNavProps = {\n /\n @deprecated The hasShadow prop is deprecated and will be removed in a future release.\n /\n hasShadow?: boolean\n /\n Allows the SubNav to be used at full width,\n * removing any internal padding and guttering.\n /\n fullWidth?: boolean\n 'data-testid'?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\nconst SubNavRoot = memo(\n forwardRef<HTMLDivElement, SubNavProps>(\n ({id, children, className, 'data-testid': testId, fullWidth, hasShadow}, ref) => {\n const rootRef = useProvidedRefOrCreate<HTMLDivElement>(ref as RefObject<HTMLDivElement>)\n const innerRootRef = React.useRef<HTMLDivElement>(null)\n const navRef = React.useRef<HTMLElement>(null)\n const overlayRef = React.useRef<HTMLUListElement>(null)\n const narrowButtonRef = useRef<HTMLButtonElement>(null)\n const [isOpenAtNarrow, setIsOpenAtNarrow] = useState(false)\n const idForLinkContainer = useId()\n const [hasAnchoredNav, setHasAnchoredNav] = useState(false)\n\n const {isLarge} = useWindowSize()\n\n useFocusTrap({containerRef: innerRootRef, disabled: !isOpenAtNarrow})\n\n const childrenArr = Children.toArray(children)\n\n const closeMenuCallback = useCallback(() => {\n if (isLarge) return\n setIsOpenAtNarrow(false)\n }, [isLarge])\n\n const handleMenuToggle = useCallback(() => {\n if (isLarge) return\n setIsOpenAtNarrow(prev => !prev)\n }, [isLarge])\n\n useOnClickOutside(innerRootRef, closeMenuCallback)\n useKeyboardEscape(closeMenuCallback)\n\n useEffect(() => {\n const navElement = navRef.current\n\n const updateAvailableHeight = () => {\n if (navElement) {\n const navTop = navElement.getBoundingClientRect().top\n navElement.style.setProperty('--subnav-available-height', `${window.innerHeight - navTop}px`)\n }\n }\n\n if (isOpenAtNarrow && !isLarge) {\n document.body.style.overflow = 'hidden'\n updateAvailableHeight()\n // eslint-disable-next-line github/prefer-observers\n window.addEventListener('resize', updateAvailableHeight)\n } else {\n document.body.style.overflow = 'auto'\n\n if (navElement) {\n navElement.style.removeProperty('--subnav-available-height')\n }\n }\n\n return () => {\n document.body.style.overflow = 'auto'\n window.removeEventListener('resize', updateAvailableHeight)\n\n if (navElement) {\n navElement.style.removeProperty('--subnav-available-height')\n }\n }\n }, [isOpenAtNarrow, isLarge])\n\n const activeLink = childrenArr.find(child => {\n return isValidElement<LinkBaseProps>(child) && Boolean(child.props['aria-current'])\n }) as React.ReactElement<LinkBaseProps> \| undefined\n\n useEffect(() => {\n // check if there is an anchored nav in the SubNav.SubMenu child\n const hasAnchorVariant = childrenArr.some(child => {\n if (isValidElement<LinkBaseProps>(child) && child.type === LinkBase) {\n const childNodes = Children.toArray(child.props.children)\n const maybeSubMenu = childNodes[1]\n if (\n isValidElement<SubMenuProps>(maybeSubMenu) &&\n maybeSubMenu.type === SubMenuBase &&\n maybeSubMenu.props.variant === 'anchor'\n ) {\n return true\n }\n }\n return false\n })\n setHasAnchoredNav(hasAnchorVariant)\n }, [childrenArr])\n\n const {\n heading: HeadingChild,\n subheading: SubHeadingChild,\n links: LinkChildren,\n action: ActionChild,\n } = childrenArr.reduce(\n (\n acc: {\n heading?: React.ReactElement<HeadingBaseProps>\n subheading?: React.ReactElement<SubHeadingBaseProps>\n links: React.ReactElement<LinkBaseProps>[]\n action?: React.ReactElement<SubNavActionProps>\n },\n child,\n ) => {\n if (isValidElement(child)) {\n if (child.type === HeadingBase) {\n acc.heading = child as React.ReactElement<HeadingBaseProps>\n } else if (child.type === SubHeadingBase) {\n acc.subheading = child as React.ReactElement<SubHeadingBaseProps>\n } else if (child.type === LinkBase) {\n const linkChild = child as React.ReactElement<LinkBaseProps>\n const childNodes = Children.toArray(linkChild.props.children)\n const [link, subMenu] = childNodes\n const isAnchorVariant =\n isValidElement<SubMenuProps>(subMenu) &&\n subMenu.type === SubMenuBase &&\n subMenu.props.variant === 'anchor'\n\n acc.links.push(\n React.cloneElement(linkChild, {\n ...(isAnchorVariant ? {children: [link]} : {}),\n onClick: linkChild.props['aria-current'] ? closeMenuCallback : linkChild.props.onClick,\n }),\n )\n } else if (child.type === ActionBase) {\n acc.action = child as React.ReactElement<SubNavActionProps>\n }\n }\n return acc\n },\n {heading: undefined, subheading: undefined, links: [], action: undefined},\n )\n\n const activeLinkChildren = activeLink ? Children.toArray(activeLink.props.children) : []\n const activeLinklabel = activeLinkChildren[0]\n\n // needed to prevent rendering of anchor subnav inside the narrow <button> element\n const maybeSubMenu = activeLinkChildren[1]\n const MaybeSubNav =\n isValidElement<SubMenuProps>(maybeSubMenu) &&\n maybeSubMenu.type === SubMenuBase &&\n maybeSubMenu.props.variant === 'anchor'\n ? maybeSubMenu\n : null\n\n const subHeadingIsActive =\n isValidElement<SubHeadingBaseProps>(SubHeadingChild) &&\n SubHeadingChild.type === SubHeadingBase &&\n Boolean(SubHeadingChild.props['aria-current'])\n const narrowButtonLabel = SubHeadingChild ? activeLinklabel : null\n\n const NarrowButton = useMemo(\n () => (\n <div\n className={clsx(styles['SubNav__overlay-toggle'], isOpenAtNarrow && styles['SubNav__overlay-toggle--open'])}\n >\n <span\n className={clsx(\n styles['SubNav__overlay-toggle-content'],\n !narrowButtonLabel && styles['SubNav__overlay-toggle-content--end'],\n )}\n >\n <button\n ref={narrowButtonRef}\n className={styles['SubNav__overlay-toggle-label']}\n data-testid={testIds.button}\n onClick={isOpenAtNarrow ? closeMenuCallback : handleMenuToggle}\n aria-expanded={isOpenAtNarrow ? 'true' : 'false'}\n aria-controls={idForLinkContainer}\n aria-label={activeLinklabel ? `Navigation menu. Current page: ${activeLinklabel}` : 'Navigation menu'}\n >\n {narrowButtonLabel && (\n <Text as=\"span\" size=\"100\">\n {narrowButtonLabel}\n </Text>\n )}\n {isOpenAtNarrow ? (\n <TriangleUpIcon className={styles['SubNav__overlay-toggle-icon']} size={13} />\n ) : (\n <TriangleDownIcon className={styles['SubNav__overlay-toggle-icon']} size={13} />\n )}\n </button>\n </span>\n </div>\n ),\n [activeLinklabel, closeMenuCallback, handleMenuToggle, idForLinkContainer, isOpenAtNarrow, narrowButtonLabel],\n )\n\n return (\n <div\n ref={rootRef}\n className={clsx(\n styles['SubNav__container'],\n SubHeadingChild && styles['SubNav--has-sub-heading'],\n SubHeadingChild && subHeadingIsActive && styles['SubNav--subHeadingActive'],\n hasAnchoredNav && styles['SubNav__container--with-anchor-nav'],\n )}\n >\n <SubNavProvider>\n <nav\n ref={navRef}\n id={id}\n className={clsx(\n styles.SubNav,\n isOpenAtNarrow && styles['SubNav--open'],\n hasShadow && styles['SubNav--has-shadow'],\n fullWidth && styles['SubNav--full-width'],\n className,\n )}\n data-testid={testId \|\| testIds.root}\n >\n <div ref={innerRootRef} className={styles['SubNav--header-container-outer']}>\n <div className={styles['SubNav__header-container']}>\n {HeadingChild && <div className={styles['SubNav__heading-container']}>{HeadingChild}</div>}\n\n {SubHeadingChild && (\n <div\n className={clsx(\n styles['SubNav__heading-container'],\n styles['SubNav__subheading-container'],\n subHeadingIsActive && styles['SubNav__subheading-container-active'],\n )}\n >\n {SubHeadingChild}\n </div>\n )}\n\n {!isLarge && (!SubHeadingChild \|\| subHeadingIsActive) && NarrowButton}\n\n {MaybeSubNav && MaybeSubNav}\n </div>\n {!isLarge && SubHeadingChild && !subHeadingIsActive && NarrowButton}\n {LinkChildren.length > 0 && (\n <ul\n ref={overlayRef}\n id={idForLinkContainer}\n className={clsx(\n styles['SubNav__links-overlay'],\n isOpenAtNarrow && styles['SubNav__links-overlay--open'],\n )}\n data-testid={testIds.overlay}\n >\n {LinkChildren}\n {ActionChild && <li className={styles['SubNav__action-container']}>{ActionChild}</li>}\n </ul>\n )}\n </div>\n </nav>\n </SubNavProvider>\n </div>\n )\n },\n ),\n)\n\ntype HeadingBaseProps = {\n href: string\n 'data-testid'?: string\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n BaseProps<HTMLAnchorElement>\n\nconst HeadingBase = ({href, children, className, 'data-testid': testID, ...props}: HeadingBaseProps) => {\n return (\n <a\n href={href}\n className={clsx(styles['SubNav__heading'], className)}\n data-testid={testIds.heading \|\| testID}\n {...props}\n >\n {children}\n </a>\n )\n}\n\ntype SubHeadingBaseProps = {\n href: string\n 'data-testid'?: string\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n BaseProps<HTMLAnchorElement>\n\nconst SubHeadingBase = ({href, children, className, 'data-testid': testID, ...props}: SubHeadingBaseProps) => {\n return (\n <a\n href={href}\n className={clsx(styles['SubNav__heading'], styles['SubNav__link'], styles['SubNav__subHeading'], className)}\n data-testid={testIds.heading \|\| testID}\n {...props}\n >\n {children}\n </a>\n )\n}\n\ntype LinkBaseProps = {\n href: string\n 'data-testid'?: string\n variant?: TextProps['variant']\n _subMenuVariant?: SubMenuVariants\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n BaseProps<HTMLAnchorElement>\n\nconst LinkBaseWithSubmenu = forwardRef<HTMLDivElement, LinkBaseProps>(\n (\n {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, className, _subMenuVariant, variant, ...props},\n forwardedRef,\n ) => {\n const submenuId = useId()\n const {isLarge} = useWindowSize()\n\n const [isExpanded, setIsExpanded] = useState(false)\n const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLDivElement>)\n const subMenuChildrenRef = useRef<HTMLDivElement>(null)\n\n useContainsFocus(ref, (containsFocus: boolean) => {\n if (!containsFocus) {\n setIsExpanded(false)\n }\n })\n\n const expand = useCallback(() => setIsExpanded(true), [])\n const collapse = useCallback(() => setIsExpanded(false), [])\n const toggleExpanded = useCallback(() => setIsExpanded(prev => !prev), [])\n const isAriaCurrent = Boolean(ariaCurrent) && ariaCurrent !== 'false'\n\n useKeyboardEscape(collapse)\n\n useEffect(() => {\n if (subMenuChildrenRef.current) {\n // Workaround to avoid React 18 / 19 type mismatches with the `inert` attribute.\n // This approach won't immediately apply the attribute in pure SSR contexts, only post-hydration\n // TODO: Move back to JSX when React 19 is fully adopted in Dotcom.\n // `inert` removes the collapsed submenu from tab order and the accessibility tree\n // without affecting visual appearance\n subMenuChildrenRef.current.toggleAttribute('inert', isLarge && !isExpanded)\n }\n }, [isLarge, isExpanded])\n\n const [label, SubMenuChildren] = children as ReactNode[]\n\n return (\n <div\n className={clsx(\n styles['SubNav__link--has-sub-menu'],\n isExpanded && styles['SubNav__link--expanded'],\n isAriaCurrent && styles['SubNav__link--has-active-sub-menu'],\n )}\n data-testid={testId \|\| testIds.subMenu}\n ref={ref}\n onMouseOver={expand}\n onMouseOut={collapse}\n /\n onFocus and onBlur need to be defined to keep the jsx-a11y/mouse-events-have-key-events\n * eslint rule happy. The focus/blur behaviour is handled by useContainsFocus\n /\n onFocus={() => null}\n onBlur={() => null}\n >\n <a\n href={href}\n className={clsx(styles['SubNav__link'], ariaCurrent && styles['SubNav__link--active'], className)}\n aria-current={ariaCurrent}\n {...props}\n >\n <Text as=\"span\" size=\"100\" weight=\"medium\" className={styles['SubNav__link-label']}>\n {label}\n </Text>\n </a>\n {isLarge && (\n <button\n className={styles['SubNav__sub-menu-toggle']}\n onClick={toggleExpanded}\n aria-expanded={isExpanded ? 'true' : 'false'}\n aria-controls={submenuId}\n aria-label={`${label?.toString().trim()} submenu`}\n >\n <TriangleDownIcon className={styles['SubNav__sub-menu-icon']} size={16} />\n </button>\n )}\n\n <div id={submenuId} className={styles['SubNav__sub-menu-children']} ref={subMenuChildrenRef}>\n {SubMenuChildren}\n </div>\n </div>\n )\n },\n)\n\nconst LinkBase = forwardRef<HTMLAnchorElement \| HTMLDivElement, LinkBaseProps>((props, ref) => {\n const [isInView, setIsInView] = useState(false)\n const childrenArr = Children.toArray(props.children)\n\n const hasSubMenu = childrenArr.some(child => {\n if (isValidElement(child)) {\n return child.type === SubMenuBase\n }\n })\n\n useEffect(() => {\n if (hasSubMenu) return\n const targetId = props.href.replace('#', '')\n const target = document.getElementById(targetId)\n if (!target) return\n\n const topOfWindow = '0px 0px -100%'\n const observerParams = {threshold: 0, root: null, rootMargin: topOfWindow}\n\n const handleIntersectionUpdate: IntersectionObserverCallback = ([entry]) => {\n setIsInView(entry.isIntersecting)\n }\n\n const observer = new IntersectionObserver(handleIntersectionUpdate, observerParams)\n observer.observe(target)\n return () => observer.disconnect()\n }, [hasSubMenu, props.href])\n\n if (hasSubMenu) {\n const isAnchorVariantSubMenu = childrenArr.some(child => {\n return isValidElement<SubMenuProps>(child) && child.type === SubMenuBase && child.props.variant === 'anchor'\n })\n\n return (\n <li>\n <LinkBaseWithSubmenu\n ref={ref as RefObject<HTMLDivElement>}\n {...props}\n _subMenuVariant={isAnchorVariantSubMenu ? 'anchor' : undefined}\n />\n </li>\n )\n }\n\n const {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, variant, className, ...rest} = props\n\n return (\n <li>\n <a\n href={href}\n className={clsx(\n styles['SubNav__link'],\n ariaCurrent && styles['SubNav__link--active'],\n isInView && styles['SubNav__link--is-in-view'],\n className,\n )}\n aria-current={ariaCurrent}\n data-testid={testId \|\| testIds.link}\n ref={ref as RefObject<HTMLAnchorElement>}\n {...rest}\n >\n <Text as=\"span\" size=\"100\" weight=\"medium\" className={styles['SubNav__link-label']}>\n {children}\n </Text>\n </a>\n </li>\n )\n})\n\ntype SubMenuProps = {\n variant?: SubMenuVariants\n} & React.HTMLAttributes<HTMLUListElement> &\n BaseProps<HTMLUListElement>\n\nfunction SubMenuBase({children, className, variant = 'dropdown', ...props}: SubMenuProps) {\n const context = React.useContext(SubNavContext)\n const navRef = useRef<HTMLElement>(null)\n\n const {isLarge} = useWindowSize()\n\n /\n Effect is needed to prevent the bubbling of onClick events to the overlay trigger.\n * Removing this effect will cause clicks on the anchor nav element to toggle the overlay.\n /\n useEffect(() => {\n const handleClick = (e: MouseEvent) => {\n if (navRef.current && !navRef.current.contains(e.target as Node)) {\n return\n }\n\n if (!(e.target instanceof HTMLAnchorElement)) {\n e.stopPropagation()\n }\n }\n\n if (variant === 'anchor') {\n document.addEventListener('click', handleClick, true) // Capture phase\n }\n\n return () => {\n document.removeEventListener('click', handleClick, true)\n }\n }, [variant])\n\n if (variant === 'anchor' && context?.portalRef.current) {\n return createPortal(\n <nav\n ref={navRef}\n className={clsx(styles['SubNav__sub-menu'], styles['SubNav__sub-menu--anchor'], className)}\n role=\"navigation\"\n aria-label=\"Sub navigation\"\n >\n <ul className={styles['SubNav__sub-menu-list']} {...props}>\n {React.Children.map(children, child => {\n if (isValidElement<LinkBaseProps>(child) && child.type === LinkBase) {\n return React.cloneElement(child, {\n onClick: e => {\n child.props.onClick?.(e)\n },\n })\n }\n return null\n })}\n </ul>\n </nav>,\n context.portalRef.current,\n )\n } else {\n const Tag = isLarge ? ThemeProvider : React.Fragment\n\n return (\n <Tag {...(isLarge ? {colorMode: 'light'} : {})}>\n <ul className={clsx(styles['SubNav__sub-menu'], styles[`SubNav__sub-menu--${variant}`], className)} {...props}>\n {children}\n </ul>\n </Tag>\n )\n }\n}\n\ntype SubNavActionProps = {\n /\n Required path or location for the action button to link to.\n /\n href: string\n /\n Optional sizes for the button.\n /\n size?: (typeof ButtonSizes)[number]\n /\n Optional sizes for the button.\n /\n variant?: (typeof ButtonVariants)[number]\n} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>\n\nfunction ActionBase({children, href, variant = 'primary', size = 'small', ...rest}: SubNavActionProps) {\n return (\n <Button\n className={styles['SubNav__action']}\n as=\"a\"\n href={href}\n variant={variant}\n data-testid={testIds.action}\n size={size}\n {...rest}\n >\n {children}\n </Button>\n )\n}\n\n/\n Use SubNav to display a secondary navigation beneath a primary header.\n * @see https://primer.style/brand/components/SubNav\n */\nexport const SubNav = Object.assign(SubNavRoot, {\n Heading: HeadingBase,\n SubHeading: SubHeadingBase,\n Link: LinkBase,\n Action: ActionBase,\n SubMenu: SubMenuBase,\n testIds,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"SubNav.js","names":[],"sources":["../../src/SubNav/SubNav.tsx"],"sourcesContent":["import React, {\n Children,\n createContext,\n forwardRef,\n isValidElement,\n memo,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type PropsWithChildren,\n type ReactNode,\n type RefObject,\n} from 'react'\nimport {Button, ButtonSizes, ButtonVariants, Text, TextProps, ThemeProvider, useWindowSize} from '..'\n\nimport {clsx} from 'clsx'\nimport {TriangleDownIcon, TriangleUpIcon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {useContainsFocus} from './useContainsFocus'\n\nimport {useAnchorMenu} from './useAnchorMenu'\nimport {useNarrowMenu} from './useNarrowMenu'\nimport {useWideMenu} from './useWideMenu'\n\nimport type {BaseProps} from '../component-helpers'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from './SubNav.module.css'\nimport {createPortal} from 'react-dom'\n\nconst testIds = {\n root: 'SubNav-root',\n get button() {\n return `${this.root}-button`\n },\n get overlay() {\n return `${this.root}-overlay`\n },\n get link() {\n return `${this.root}-link`\n },\n get heading() {\n return `${this.root}-heading`\n },\n get action() {\n return `${this.root}-action`\n },\n get subMenu() {\n return `${this.root}-sub-menu`\n },\n get overflowButton() {\n return `${this.root}-overflow-button`\n },\n get overflowMenu() {\n return `${this.root}-overflow-menu`\n },\n}\n\nexport const SubNavSubMenuVariants = ['dropdown', 'anchor'] as const\ntype SubMenuVariants = (typeof SubNavSubMenuVariants)[number]\n\ntype SubNavContextType = {\n portalRef: RefObject<HTMLDivElement \| null>\n}\n\nconst SubNavContext = createContext<SubNavContextType \| undefined>(undefined)\n\nexport const useSubNavContext = () => {\n const context = useContext(SubNavContext)\n if (!context) {\n throw new Error('useSubNavContext must be used within a SubNavProvider')\n }\n return context\n}\n\nfunction SubNavProvider({children}: PropsWithChildren) {\n const {anchorMenuRef, portalRef} = useAnchorMenu()\n\n const value = useMemo(\n () => ({\n portalRef,\n }),\n [portalRef],\n )\n\n return (\n <SubNavContext.Provider value={value}>\n {children}\n\n <div className={styles['SubNav__anchor-menu-outer-container']} ref={anchorMenuRef}>\n <div className={clsx(styles['SubNav__anchor-menu-container'])} ref={portalRef} />\n </div>\n </SubNavContext.Provider>\n )\n}\n\nexport type SubNavMenuLabels = {\n menuLabel: string\n closeLabel: string\n activeLabel: string\n closeActiveLabel: string\n overflowMenuLabel: string\n}\n\nconst defaultMenuLabels: SubNavMenuLabels = {\n menuLabel: 'Navigation menu',\n closeLabel: 'Close navigation menu',\n activeLabel: 'Navigation menu. Current page:',\n closeActiveLabel: 'Close navigation menu. Current page:',\n overflowMenuLabel: 'More',\n}\n\nexport type SubNavProps = {\n /\n @deprecated The hasShadow prop is deprecated and will be removed in a future release.\n /\n hasShadow?: boolean\n /\n Allows the SubNav to be used at full width,\n * removing any internal padding and guttering.\n /\n fullWidth?: boolean\n /\n Customizable accessible labels\n /\n menuLabels?: Partial<SubNavMenuLabels>\n 'data-testid'?: string\n} & PropsWithChildren<BaseProps<HTMLDivElement>>\n\n// Puts the menus, headings, and actions together.\nconst SubNavRoot = memo(\n forwardRef<HTMLDivElement, SubNavProps>(\n ({id, children, className, 'data-testid': testId, fullWidth, hasShadow, menuLabels}, ref) => {\n const rootRef = useProvidedRefOrCreate<HTMLDivElement>(ref as RefObject<HTMLDivElement>)\n const narrowButtonRef = useRef<HTMLButtonElement>(null)\n const idForLinkContainer = useId()\n const overflowMenuId = useId()\n const [hasAnchoredNav, setHasAnchoredNav] = useState(false)\n const resolvedMenuLabels = {...defaultMenuLabels, ...menuLabels}\n\n const {isLarge} = useWindowSize()\n const {navRef, narrowMenuRef, isNarrowMenuOpen, closeNarrowMenu, toggleNarrowMenu} = useNarrowMenu(isLarge)\n const childrenArr = Children.toArray(children)\n\n const activeLink = childrenArr.find(child => {\n return isValidElement<LinkBaseProps>(child) && Boolean(child.props['aria-current'])\n }) as React.ReactElement<LinkBaseProps> \| undefined\n\n // Checks whether any link comes with an anchor submenu.\n useEffect(() => {\n const hasAnchorVariant = childrenArr.some(child => {\n if (isValidElement<LinkBaseProps>(child) && child.type === LinkBase) {\n const childNodes = Children.toArray(child.props.children)\n const maybeSubMenu = childNodes[1]\n if (\n isValidElement<SubMenuProps>(maybeSubMenu) &&\n maybeSubMenu.type === SubMenuBase &&\n maybeSubMenu.props.variant === 'anchor'\n ) {\n return true\n }\n }\n return false\n })\n setHasAnchoredNav(hasAnchorVariant)\n }, [childrenArr])\n\n // Picks out the headings, links, and action for the layout.\n const {\n heading: HeadingChild,\n subheading: SubHeadingChild,\n links: LinkChildren,\n action: ActionChild,\n } = childrenArr.reduce(\n (\n acc: {\n heading?: React.ReactElement<HeadingBaseProps>\n subheading?: React.ReactElement<SubHeadingBaseProps>\n links: React.ReactElement<LinkBaseProps>[]\n action?: React.ReactElement<SubNavActionProps>\n },\n child,\n ) => {\n if (isValidElement(child)) {\n if (child.type === HeadingBase) {\n acc.heading = child as React.ReactElement<HeadingBaseProps>\n } else if (child.type === SubHeadingBase) {\n acc.subheading = child as React.ReactElement<SubHeadingBaseProps>\n } else if (child.type === LinkBase) {\n const linkChild = child as React.ReactElement<LinkBaseProps>\n const childNodes = Children.toArray(linkChild.props.children)\n const [link, subMenu] = childNodes\n const isAnchorVariant =\n isValidElement<SubMenuProps>(subMenu) &&\n subMenu.type === SubMenuBase &&\n subMenu.props.variant === 'anchor'\n\n acc.links.push(\n React.cloneElement(linkChild, {\n ...(isAnchorVariant ? {children: [link]} : {}),\n onClick: event => {\n linkChild.props.onClick?.(event)\n if (!event.defaultPrevented && linkChild.props['aria-current']) closeNarrowMenu()\n },\n }),\n )\n } else if (child.type === ActionBase) {\n acc.action = child as React.ReactElement<SubNavActionProps>\n }\n }\n return acc\n },\n {heading: undefined, subheading: undefined, links: [], action: undefined},\n )\n\n const {\n overlayRef,\n overflowRef,\n overflowButtonRef,\n overflowMenuRef,\n visibleLinkCount,\n hasOverflow,\n isOverflowMenuOpen,\n closeOverflowMenu,\n handleOverflowMenuBlur,\n } = useWideMenu(children, isLarge, LinkChildren.length)\n const activeLinkChildren = activeLink ? Children.toArray(activeLink.props.children) : []\n const activeLinklabel = activeLinkChildren[0]\n\n // needed to prevent rendering of anchor subnav inside the narrow <button> element\n const maybeSubMenu = activeLinkChildren[1]\n const MaybeSubNav =\n isValidElement<SubMenuProps>(maybeSubMenu) &&\n maybeSubMenu.type === SubMenuBase &&\n maybeSubMenu.props.variant === 'anchor'\n ? maybeSubMenu\n : null\n\n const subHeadingIsActive =\n isValidElement<SubHeadingBaseProps>(SubHeadingChild) &&\n SubHeadingChild.type === SubHeadingBase &&\n Boolean(SubHeadingChild.props['aria-current'])\n const narrowButtonLabel = SubHeadingChild ? activeLinklabel : null\n const hasActiveOverflow = LinkChildren.slice(visibleLinkCount).some(\n link => Boolean(link.props['aria-current']) && link.props['aria-current'] !== 'false',\n )\n\n const NarrowButton = useMemo(\n () => (\n <div\n className={clsx(\n styles['SubNav__overlay-toggle'],\n isNarrowMenuOpen && styles['SubNav__overlay-toggle--open'],\n )}\n >\n <span\n className={clsx(\n styles['SubNav__overlay-toggle-content'],\n !narrowButtonLabel && styles['SubNav__overlay-toggle-content--end'],\n )}\n >\n <button\n ref={narrowButtonRef}\n className={styles['SubNav__overlay-toggle-label']}\n data-testid={testIds.button}\n onClick={isNarrowMenuOpen ? closeNarrowMenu : toggleNarrowMenu}\n aria-expanded={isNarrowMenuOpen ? 'true' : 'false'}\n aria-controls={idForLinkContainer}\n aria-label={\n activeLinklabel\n ? `${\n isNarrowMenuOpen ? resolvedMenuLabels.closeActiveLabel : resolvedMenuLabels.activeLabel\n } ${activeLinklabel}`\n : isNarrowMenuOpen\n ? resolvedMenuLabels.closeLabel\n : resolvedMenuLabels.menuLabel\n }\n >\n {narrowButtonLabel && (\n <Text as=\"span\" size=\"100\">\n {narrowButtonLabel}\n </Text>\n )}\n {isNarrowMenuOpen ? (\n <TriangleUpIcon className={styles['SubNav__overlay-toggle-icon']} size={13} />\n ) : (\n <TriangleDownIcon className={styles['SubNav__overlay-toggle-icon']} size={13} />\n )}\n </button>\n </span>\n </div>\n ),\n [\n closeNarrowMenu,\n toggleNarrowMenu,\n idForLinkContainer,\n isNarrowMenuOpen,\n activeLinklabel,\n narrowButtonLabel,\n resolvedMenuLabels.closeLabel,\n resolvedMenuLabels.menuLabel,\n resolvedMenuLabels.activeLabel,\n resolvedMenuLabels.closeActiveLabel,\n ],\n )\n\n const measurementCopyProps = {\n id: undefined,\n ref: null,\n 'aria-activedescendant': undefined,\n 'aria-controls': undefined,\n 'aria-describedby': undefined,\n 'aria-details': undefined,\n 'aria-flowto': undefined,\n 'aria-labelledby': undefined,\n 'aria-owns': undefined,\n }\n\n // Keeps consumer identity on the real links, not their hidden measurement copies.\n const createMeasurementCopies = (nodes: ReactNode): ReactNode =>\n Children.map(nodes, child => {\n if (\n !isValidElement<PropsWithChildren<React.HTMLAttributes<HTMLElement>> & {ref?: React.Ref<HTMLElement>}>(\n child,\n )\n ) {\n return child\n }\n const childProps = child.type === React.Fragment ? {} : measurementCopyProps\n return React.cloneElement(child, {\n ...childProps,\n ...(child.props.children === undefined ? {} : {children: createMeasurementCopies(child.props.children)}),\n })\n })\n\n return (\n <div\n ref={rootRef}\n className={clsx(\n styles['SubNav__container'],\n SubHeadingChild && styles['SubNav--has-sub-heading'],\n SubHeadingChild && subHeadingIsActive && styles['SubNav--subHeadingActive'],\n hasAnchoredNav && styles['SubNav__container--with-anchor-nav'],\n )}\n >\n <SubNavProvider>\n <nav\n ref={navRef}\n id={id}\n className={clsx(\n styles.SubNav,\n isNarrowMenuOpen && styles['SubNav--open'],\n hasShadow && styles['SubNav--has-shadow'],\n fullWidth && styles['SubNav--full-width'],\n className,\n )}\n data-testid={testId \|\| testIds.root}\n >\n <div ref={narrowMenuRef} className={styles['SubNav--header-container-outer']}>\n <div className={styles['SubNav__header-container']}>\n {HeadingChild && <div className={styles['SubNav__heading-container']}>{HeadingChild}</div>}\n\n {SubHeadingChild && (\n <div\n className={clsx(\n styles['SubNav__heading-container'],\n styles['SubNav__subheading-container'],\n subHeadingIsActive && styles['SubNav__subheading-container-active'],\n )}\n >\n {SubHeadingChild}\n </div>\n )}\n\n {!isLarge && (!SubHeadingChild \|\| subHeadingIsActive) && NarrowButton}\n\n {MaybeSubNav && MaybeSubNav}\n </div>\n {!isLarge && SubHeadingChild && !subHeadingIsActive && NarrowButton}\n {LinkChildren.length > 0 && (\n <ul\n ref={overlayRef}\n id={idForLinkContainer}\n className={clsx(\n styles['SubNav__links-overlay'],\n isNarrowMenuOpen && styles['SubNav__links-overlay--open'],\n )}\n data-testid={testIds.overlay}\n >\n {LinkChildren.map((link, index) => {\n const isOverflowed = Boolean(isLarge) && index >= visibleLinkCount\n const hasSubMenu = Children.toArray(link.props.children).some(\n child => isValidElement(child) && child.type === SubMenuBase,\n )\n return React.cloneElement(link, {\n className: clsx(link.props.className, !hasSubMenu && styles['SubNav__link--in-overlay']),\n _isOverflowed: isOverflowed,\n ...(isOverflowed\n ? {\n ...measurementCopyProps,\n children: createMeasurementCopies(link.props.children),\n }\n : {}),\n })\n })}\n <li\n ref={overflowRef}\n className={clsx(\n styles['SubNav__overflow-container'],\n hasOverflow && styles['SubNav__overflow-container--visible'],\n )}\n aria-hidden={hasOverflow ? undefined : true}\n onBlur={handleOverflowMenuBlur}\n >\n <button\n ref={overflowButtonRef}\n type=\"button\"\n className={clsx(\n styles['SubNav__overflow-toggle'],\n hasActiveOverflow && styles['SubNav__overflow-toggle--active'],\n )}\n data-testid={testIds.overflowButton}\n aria-expanded={isOverflowMenuOpen}\n aria-controls={overflowMenuId}\n tabIndex={hasOverflow ? undefined : -1}\n >\n <Text as=\"span\" size=\"100\" className={styles['SubNav__link-label']}>\n {resolvedMenuLabels.overflowMenuLabel}\n </Text>\n {isOverflowMenuOpen ? <TriangleUpIcon /> : <TriangleDownIcon />}\n </button>\n <div\n ref={overflowMenuRef}\n id={overflowMenuId}\n popover=\"auto\"\n data-testid={testIds.overflowMenu}\n className={styles['SubNav__overflow-menu']}\n >\n <ul\n className={styles['SubNav__overflow-menu-list']}\n aria-label={resolvedMenuLabels.overflowMenuLabel}\n >\n {LinkChildren.slice(visibleLinkCount).map(link =>\n React.cloneElement(link, {\n _isOverflowed: false,\n _isOverflowMenu: true,\n _onOverflowLinkActivate: closeOverflowMenu,\n }),\n )}\n </ul>\n </div>\n </li>\n {ActionChild && <li className={styles['SubNav__action-container']}>{ActionChild}</li>}\n </ul>\n )}\n </div>\n </nav>\n </SubNavProvider>\n </div>\n )\n },\n ),\n)\n\ntype HeadingBaseProps = {\n href: string\n 'data-testid'?: string\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n BaseProps<HTMLAnchorElement>\n\nconst HeadingBase = ({href, children, className, 'data-testid': testID, ...props}: HeadingBaseProps) => {\n return (\n <a\n href={href}\n className={clsx(styles['SubNav__heading'], className)}\n data-testid={testIds.heading \|\| testID}\n {...props}\n >\n {children}\n </a>\n )\n}\n\ntype SubHeadingBaseProps = {\n href: string\n 'data-testid'?: string\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n BaseProps<HTMLAnchorElement>\n\nconst SubHeadingBase = ({href, children, className, 'data-testid': testID, ...props}: SubHeadingBaseProps) => {\n return (\n <a\n href={href}\n className={clsx(styles['SubNav__heading'], styles['SubNav__link'], styles['SubNav__subHeading'], className)}\n data-testid={testIds.heading \|\| testID}\n {...props}\n >\n {children}\n </a>\n )\n}\n\ntype LinkBaseProps = {\n href: string\n 'data-testid'?: string\n variant?: TextProps['variant']\n _subMenuVariant?: SubMenuVariants\n _isOverflowed?: boolean\n _isOverflowMenu?: boolean\n _onOverflowLinkActivate?: () => void\n} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> &\n BaseProps<HTMLAnchorElement>\n\n// Handles hover, focus, and toggling for links with submenus.\nconst LinkBaseWithSubmenu = forwardRef<HTMLDivElement, LinkBaseProps>(\n (\n {\n children,\n href,\n 'aria-current': ariaCurrent,\n 'data-testid': testId,\n className,\n _subMenuVariant,\n _isOverflowMenu = false,\n _onOverflowLinkActivate,\n variant,\n ...props\n },\n forwardedRef,\n ) => {\n const submenuId = useId()\n const {isLarge} = useWindowSize()\n\n const [isExpanded, setIsExpanded] = useState(false)\n const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLDivElement>)\n const subMenuChildrenRef = useRef<HTMLDivElement>(null)\n\n useContainsFocus(ref, (containsFocus: boolean) => {\n if (!containsFocus) {\n setIsExpanded(false)\n }\n })\n\n const expand = useCallback(() => setIsExpanded(true), [])\n const collapse = useCallback(() => setIsExpanded(false), [])\n const toggleExpanded = useCallback(() => setIsExpanded(prev => !prev), [])\n const isAriaCurrent = Boolean(ariaCurrent) && ariaCurrent !== 'false'\n\n useKeyboardEscape(collapse)\n\n // Keeps collapsed desktop submenus out of the tab order.\n useEffect(() => {\n if (subMenuChildrenRef.current) {\n // Workaround to avoid React 18 / 19 type mismatches with the `inert` attribute.\n // This approach won't immediately apply the attribute in pure SSR contexts, only post-hydration\n // TODO: Move back to JSX when React 19 is fully adopted in Dotcom.\n // `inert` removes the collapsed submenu from tab order and the accessibility tree\n // without affecting visual appearance\n subMenuChildrenRef.current.toggleAttribute('inert', Boolean(isLarge) && !_isOverflowMenu && !isExpanded)\n }\n }, [isLarge, _isOverflowMenu, isExpanded])\n\n const [label, subMenuChildren] = children as ReactNode[]\n const subMenuLabel =\n isValidElement<SubMenuProps>(subMenuChildren) && subMenuChildren.type === SubMenuBase\n ? subMenuChildren.props['aria-label']\n : undefined\n const subMenu =\n _isOverflowMenu && isValidElement<SubMenuProps>(subMenuChildren) && subMenuChildren.type === SubMenuBase\n ? React.cloneElement(subMenuChildren, {_isOverflowMenu, _onOverflowLinkActivate})\n : subMenuChildren\n\n return (\n <div\n className={clsx(\n styles['SubNav__link--has-sub-menu'],\n isExpanded && styles['SubNav__link--expanded'],\n isAriaCurrent && styles['SubNav__link--has-active-sub-menu'],\n )}\n data-testid={testId \|\| testIds.subMenu}\n ref={ref}\n onMouseOver={expand}\n onMouseOut={collapse}\n /\n onFocus and onBlur need to be defined to keep the jsx-a11y/mouse-events-have-key-events\n * eslint rule happy. The focus/blur behaviour is handled by useContainsFocus\n /\n onFocus={() => null}\n onBlur={() => null}\n >\n <a\n href={href}\n className={clsx(styles['SubNav__link'], ariaCurrent && styles['SubNav__link--active'], className)}\n aria-current={ariaCurrent}\n {...props}\n onClick={event => {\n props.onClick?.(event)\n if (!event.defaultPrevented) _onOverflowLinkActivate?.()\n }}\n >\n <Text as=\"span\" size=\"100\" weight=\"medium\" className={styles['SubNav__link-label']}>\n {label}\n </Text>\n </a>\n {isLarge && !_isOverflowMenu && (\n <button\n className={styles['SubNav__sub-menu-toggle']}\n onClick={toggleExpanded}\n aria-expanded={isExpanded ? 'true' : 'false'}\n aria-controls={submenuId}\n aria-label={subMenuLabel ?? `${label?.toString().trim()} submenu`}\n >\n <TriangleDownIcon className={styles['SubNav__sub-menu-icon']} size={16} />\n </button>\n )}\n\n <div id={submenuId} className={styles['SubNav__sub-menu-children']} ref={subMenuChildrenRef}>\n {subMenu}\n </div>\n </div>\n )\n },\n)\n\n// Renders a link and tracks its section for anchor navigation.\nconst LinkBase = forwardRef<HTMLAnchorElement \| HTMLDivElement, LinkBaseProps>((props, ref) => {\n const [isInView, setIsInView] = useState(false)\n const listItemRef = useRef<HTMLLIElement>(null)\n const {_isOverflowed, _isOverflowMenu = false, _onOverflowLinkActivate, ...linkProps} = props\n const childrenArr = Children.toArray(props.children)\n\n // Keeps links moved into overflow out of the row's tab order.\n useEffect(() => {\n listItemRef.current?.toggleAttribute('inert', Boolean(_isOverflowed))\n }, [_isOverflowed])\n\n const hasSubMenu = childrenArr.some(child => {\n if (isValidElement(child)) {\n return child.type === SubMenuBase\n }\n })\n\n // Marks an anchor link active when its section reaches the top.\n useEffect(() => {\n if (hasSubMenu) return\n const targetId = props.href.replace('#', '')\n const target = document.getElementById(targetId)\n if (!target) return\n\n const topOfWindow = '0px 0px -100%'\n const observerParams = {threshold: 0, root: null, rootMargin: topOfWindow}\n\n const handleIntersectionUpdate: IntersectionObserverCallback = ([entry]) => {\n setIsInView(entry.isIntersecting)\n }\n\n const observer = new IntersectionObserver(handleIntersectionUpdate, observerParams)\n observer.observe(target)\n return () => observer.disconnect()\n }, [hasSubMenu, props.href])\n\n if (hasSubMenu) {\n const isAnchorVariantSubMenu = childrenArr.some(child => {\n return isValidElement<SubMenuProps>(child) && child.type === SubMenuBase && child.props.variant === 'anchor'\n })\n\n return (\n <li\n ref={listItemRef}\n aria-hidden={_isOverflowed ? true : undefined}\n className={clsx(styles['SubNav__link-item'], _isOverflowed && styles['SubNav__link-item--overflowed'])}\n >\n <LinkBaseWithSubmenu\n ref={ref as RefObject<HTMLDivElement>}\n {...linkProps}\n _isOverflowMenu={_isOverflowMenu}\n _onOverflowLinkActivate={_onOverflowLinkActivate}\n _subMenuVariant={isAnchorVariantSubMenu ? 'anchor' : undefined}\n />\n </li>\n )\n }\n\n const {children, href, 'aria-current': ariaCurrent, 'data-testid': testId, variant, className, ...rest} = linkProps\n\n return (\n <li\n ref={listItemRef}\n aria-hidden={_isOverflowed ? true : undefined}\n className={clsx(styles['SubNav__link-item'], _isOverflowed && styles['SubNav__link-item--overflowed'])}\n >\n <a\n href={href}\n className={clsx(\n styles['SubNav__link'],\n ariaCurrent && styles['SubNav__link--active'],\n isInView && styles['SubNav__link--is-in-view'],\n className,\n )}\n aria-current={ariaCurrent}\n data-testid={testId \|\| testIds.link}\n ref={ref as RefObject<HTMLAnchorElement>}\n {...rest}\n onClick={event => {\n rest.onClick?.(event)\n if (!event.defaultPrevented) _onOverflowLinkActivate?.()\n }}\n >\n <Text as=\"span\" size=\"100\" weight=\"medium\" className={styles['SubNav__link-label']}>\n {children}\n </Text>\n </a>\n </li>\n )\n})\n\ntype SubMenuProps = {\n variant?: SubMenuVariants\n _isOverflowMenu?: boolean\n _onOverflowLinkActivate?: () => void\n} & React.HTMLAttributes<HTMLUListElement> &\n BaseProps<HTMLUListElement>\n\n// Puts anchor links in the shared portal and keeps dropdown links local.\nfunction SubMenuBase({\n children,\n className,\n 'aria-label': ariaLabel = 'Sub navigation',\n variant = 'dropdown',\n _isOverflowMenu = false,\n _onOverflowLinkActivate,\n ...props\n}: SubMenuProps) {\n const context = React.useContext(SubNavContext)\n const navRef = useRef<HTMLElement>(null)\n\n const {isLarge} = useWindowSize()\n\n /\n Effect is needed to prevent the bubbling of onClick events to the overlay trigger.\n * Removing this effect will cause clicks on the anchor nav element to toggle the overlay.\n /\n // Keeps clicks in the anchor menu from toggling the narrow menu.\n useEffect(() => {\n const handleClick = (e: MouseEvent) => {\n if (navRef.current && !navRef.current.contains(e.target as Node)) {\n return\n }\n\n if (!(e.target instanceof HTMLAnchorElement)) {\n e.stopPropagation()\n }\n }\n\n if (variant === 'anchor') {\n document.addEventListener('click', handleClick, true) // Capture phase\n }\n\n return () => {\n document.removeEventListener('click', handleClick, true)\n }\n }, [variant])\n\n if (variant === 'anchor' && context?.portalRef.current) {\n return createPortal(\n <nav\n ref={navRef}\n className={clsx(styles['SubNav__sub-menu'], styles['SubNav__sub-menu--anchor'], className)}\n role=\"navigation\"\n aria-label={ariaLabel}\n >\n <ul className={styles['SubNav__sub-menu-list']} {...props}>\n {React.Children.map(children, child => {\n if (isValidElement<LinkBaseProps>(child) && child.type === LinkBase) {\n return React.cloneElement(child, {\n ...(_isOverflowMenu ? {_isOverflowMenu, _onOverflowLinkActivate} : {}),\n onClick: e => {\n child.props.onClick?.(e)\n },\n })\n }\n return null\n })}\n </ul>\n </nav>,\n context.portalRef.current,\n )\n } else {\n const Tag = isLarge && !_isOverflowMenu ? ThemeProvider : React.Fragment\n\n return (\n <Tag {...(isLarge && !_isOverflowMenu ? {colorMode: 'light'} : {})}>\n <ul\n className={clsx(styles['SubNav__sub-menu'], styles[`SubNav__sub-menu--${variant}`], className)}\n aria-label={ariaLabel}\n {...props}\n >\n {_isOverflowMenu\n ? Children.map(children, child =>\n isValidElement<LinkBaseProps>(child) && child.type === LinkBase\n ? React.cloneElement(child, {_isOverflowMenu, _onOverflowLinkActivate})\n : child,\n )\n : children}\n </ul>\n </Tag>\n )\n }\n}\n\ntype SubNavActionProps = {\n /\n Required path or location for the action button to link to.\n /\n href: string\n /\n Optional sizes for the button.\n /\n size?: (typeof ButtonSizes)[number]\n /\n Optional sizes for the button.\n /\n variant?: (typeof ButtonVariants)[number]\n} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>\n\nfunction ActionBase({children, href, variant = 'primary', size = 'small', ...rest}: SubNavActionProps) {\n return (\n <Button\n className={styles['SubNav__action']}\n as=\"a\"\n href={href}\n variant={variant}\n data-testid={testIds.action}\n size={size}\n {...rest}\n >\n {children}\n </Button>\n )\n}\n\n/\n Use SubNav to display a secondary navigation beneath a primary header.\n * @see https://primer.style/brand/components/SubNav\n */\nexport const SubNav = Object.assign(SubNavRoot, {\n Heading: HeadingBase,\n SubHeading: SubHeadingBase,\n Link: LinkBase,\n Action: ActionBase,\n SubMenu: SubMenuBase,\n testIds,\n})\n"],"mappings":"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"}

package/esm/SubNav/SubNav.module-cyUt0N_h.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__SubNav-module__SubNav__container___e4u9B{z-index:2;border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);width:100%;position:absolute}.Primer_Brand__SubNav-module__SubNav__container--with-anchor-nav___jf8vj{display:inline;display:initial;position:relative}.Primer_Brand__SubNav-module__SubNav__container--with-anchor-nav___jf8vj .Primer_Brand__SubNav-module__SubNav___txUks{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__SubNav-module__SubNav___txUks{z-index:1;background-color:var(--brand-SubNav-bgColor);width:100%;display:flex}[data-color-mode=dark] .Primer_Brand__SubNav-module__SubNav___txUks{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.Primer_Brand__SubNav-module__SubNav__heading___d8v1r,.Primer_Brand__SubNav-module__SubNav__subHeading___cmfhs{font-size:calc(var(--base-size-16) - 1px);line-height:calc(var(--base-size-16) - 1px);font-weight:var(--brand-text-subhead-weight-medium);color:var(--brand-color-text-default);font-family:var(--brand-heading-fontFamily);-webkit-text-decoration:none;text-decoration:none;display:block}.Primer_Brand__SubNav-module__SubNav__heading___d8v1r:hover,.Primer_Brand__SubNav-module__SubNav__subHeading___cmfhs:hover,.Primer_Brand__SubNav-module__SubNav__link___rY_yE:hover .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{color:var(--brand-color-text-muted);-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__SubNav-module__SubNav--header-container-outer___TODOB{width:100%}.Primer_Brand__SubNav-module__SubNav__heading-container___09GuE{z-index:9998;min-height:60px;padding:var(--base-size-16);border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);align-items:center;display:flex;position:relative}.Primer_Brand__SubNav-module__SubNav__heading-container___09GuE+.Primer_Brand__SubNav-module__SubNav__heading-container___09GuE{padding-inline-start:var(--base-size-24)}.Primer_Brand__SubNav-module__SubNav--has-shadow___9iM59{box-shadow:var(--brand-SubNav-shadow);background-color:var(--brand-color-canvas-default)}.Primer_Brand__SubNav-module__SubNav--full-width___PoXey{padding-inline:0}.Primer_Brand__SubNav-module__SubNav__action-container___Od_kP{margin-left:auto}.Primer_Brand__SubNav-module__SubNav__sub-menu-icon___5Gkyb{display:none!important}.Primer_Brand__SubNav-module__SubNav__sub-menu-children___5gfUK{display:contents}.Primer_Brand__SubNav-module__SubNav__links-overlay___IL2F1{margin:0;padding:0;list-style:none}.Primer_Brand__SubNav-module__SubNav__links-overlay___IL2F1>span,.Primer_Brand__SubNav-module__SubNav__sub-menu-toggle___ys018,.Primer_Brand__SubNav-module__SubNav__overflow-container___uUl1G{display:none}.Primer_Brand__SubNav-module__SubNav__overflow-menu___A8m3D{z-index:10;width:max-content;min-width:var(--brand-SubNav-width-overflowMenuMin);max-width:calc(100vw - var(--brand-SubNav-width-overflowMenuInset));max-height:calc(100dvh - var(--brand-SubNav-height-overflowMenuInset));background-color:var(--brand-SubNav-overflowMenu-bgColor-rest);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);box-shadow:none;transform:translateY(calc(0px - var(--brand-SubNav-offset-overflowMenu)));animation:Primer_Brand__SubNav-module__fade-in___6VxHj var(--brand-animation-duration-faster) var(--brand-animation-easing-default);border-start-start-radius:0;border-start-end-radius:0;border-end-end-radius:var(--brand-borderRadius-medium);border-end-start-radius:var(--brand-borderRadius-medium);margin:0;padding:0;position:absolute;inset:auto;overflow:hidden auto}.Primer_Brand__SubNav-module__SubNav__overflow-menu___A8m3D::backdrop{background-color:#0000}.Primer_Brand__SubNav-module__SubNav__overflow-menu-list___Iz8_Z{grid-gap:var(--brand-borderWidth-thin);gap:var(--brand-borderWidth-thin);padding:var(--base-size-8);width:100%;margin:0;list-style:none;display:grid}.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f{z-index:91;position:sticky;top:-1px}.Primer_Brand__SubNav-module__SubNav__anchor-menu-container___mSc6_{opacity:0;transform:translateY(var(--brand-animation-variant-slideInDown-distance));transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), background-color var(--brand-animation-duration-default) var(--brand-animation-easing-default);background-color:#0000}.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f:focus-within .Primer_Brand__SubNav-module__SubNav__anchor-menu-container___mSc6_,.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container--stuck___KKSlj .Primer_Brand__SubNav-module__SubNav__anchor-menu-container___mSc6_{opacity:1;background-color:var(--brand-color-canvas-default);transform:translateY(0)}.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f{height:0;transition:height var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f:focus-within,.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container--stuck___KKSlj{height:auto}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI{opacity:0;transform:translateY(var(--brand-animation-variant-slideInDown-distance));transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), height var(--brand-animation-duration-default) var(--brand-animation-easing-default), transform var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f:focus-within .Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI,.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container--stuck___KKSlj .Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI{visibility:visible;opacity:1;transform:translateY(0)}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI{padding-block:var(--base-size-12);border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);display:flex}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI .Primer_Brand__SubNav-module__SubNav__sub-menu-list___3rKmh{gap:var(--base-size-20);margin:0;padding:0;list-style-type:none;display:inline-flex}.Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{font-weight:450}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{padding:var(--base-size-6) var(--base-size-12);border-radius:var(--brand-borderRadius-full);transition:background-color var(--brand-animation-duration-default) var(--brand-animation-easing-default), color var(--brand-animation-duration-default) var(--brand-animation-easing-default);background-color:#0000}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI .Primer_Brand__SubNav-module__SubNav__link--is-in-view___5HQNs .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{background-color:var(--brand-SubNav-color-link-bgColor)}.Primer_Brand__SubNav-module__SubNav__link___rY_yE:focus-visible .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG:after,.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI .Primer_Brand__SubNav-module__SubNav__link--is-in-view___5HQNs:focus-visible .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG:after{opacity:0}.Primer_Brand__SubNav-module__SubNav__link___rY_yE[aria-current]:not([aria-current=false]) *{color:var(--brand-SubNav-color-link-active);-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__SubNav-module__SubNav__link___rY_yE:hover .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{transition:color var(--brand-animation-duration-fast) var(--brand-animation-easing-default)}.Primer_Brand__SubNav-module__SubNav__link___rY_yE:hover .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG:after{border-color:var(--brand-color-text-default)}@media screen and (width<=63.24rem){.Primer_Brand__SubNav-module__SubNav___txUks{position:relative}.Primer_Brand__SubNav-module__SubNav___txUks:before{content:"";opacity:0;z-index:9997;position:absolute;inset:0}.Primer_Brand__SubNav-module__SubNav___txUks:after{content:"";z-index:-1;background-color:var(--base-color-scale-black-0);opacity:0;visibility:hidden;width:100%;height:100%;position:fixed;inset:0}.Primer_Brand__SubNav-module__SubNav--open___uMKHN:after{opacity:.3;visibility:visible;transition:visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default), opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__SubNav-module__SubNav__heading___d8v1r{font-size:var(--base-size-16);line-height:var(--base-size-24)}.Primer_Brand__SubNav-module__SubNav--open___uMKHN{display:block}.Primer_Brand__SubNav-module__SubNav--open___uMKHN .Primer_Brand__SubNav-module__SubNav--header-container-outer___TODOB{max-height:100dvh;max-height:var(--subnav-available-height,100dvh);flex-direction:column;display:flex;overflow:hidden}.Primer_Brand__SubNav-module__SubNav--open___uMKHN .Primer_Brand__SubNav-module__SubNav__header-container___seaW6{flex-shrink:0}.Primer_Brand__SubNav-module__SubNav--open___uMKHN+.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f{z-index:-1}.Primer_Brand__SubNav-module__SubNav--open___uMKHN:before{background-color:var(--brand-color-canvas-default);animation:Primer_Brand__SubNav-module__fade-in___6VxHj .3s var(--brand-animation-easing-glide) forwards}.Primer_Brand__SubNav-module__SubNav__heading-separator--main___6nQIi:not(.Primer_Brand__SubNav-module__SubNav__heading-separator--has-adjacent-label____My0U),.Primer_Brand__SubNav-module__SubNav__heading-separator--subheading-active___TGiD4,.Primer_Brand__SubNav-module__SubNav__subheading-container-active___NAyYL{display:none}.Primer_Brand__SubNav-module__SubNav__header-container___seaW6{white-space:pre;z-index:9998;width:100%;display:flex;position:relative}.Primer_Brand__SubNav-module__SubNav__heading-container___09GuE+.Primer_Brand__SubNav-module__SubNav__heading-container___09GuE{padding-inline-start:var(--base-size-16)}.Primer_Brand__SubNav-module__SubNav__heading-separator___LratU{z-index:9998;margin-inline-end:var(--base-size-16)}.Primer_Brand__SubNav-module__SubNav__links-overlay___IL2F1{z-index:9998;padding-inline:var(--base-size-8);flex-direction:column;flex:auto;justify-content:center;display:none;position:relative}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn{gap:var(--base-size-8);padding-block:var(--base-size-16);border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);flex-direction:column;justify-content:flex-start;min-height:0;display:flex;overflow-y:auto}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__link___rY_yE:hover .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{color:var(--brand-color-text-default)}.Primer_Brand__SubNav-module__SubNav__overlay-toggle___37Xw7{z-index:9999;width:100%;justify-content:flex-end;padding-inline-end:var(--base-size-16);display:flex;position:relative}.Primer_Brand__SubNav-module__SubNav--has-sub-heading___u6kR9:not(.Primer_Brand__SubNav-module__SubNav--subHeadingActive___C7_mM) .Primer_Brand__SubNav-module__SubNav__overlay-toggle___37Xw7{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block:var(--base-size-12);margin-block:0;display:block}.Primer_Brand__SubNav-module__SubNav__overlay-toggle-content___r7g9W{width:100%;padding-inline-start:var(--base-size-16)}.Primer_Brand__SubNav-module__SubNav__overlay-toggle-label___FRenU{background-color:var(--brand-SubNav-color-link-bgColor);border-radius:var(--brand-borderRadius-full);padding:var(--base-size-4) var(--base-size-12);gap:var(--base-size-6);cursor:pointer;font:inherit;border:none;align-items:center;display:flex}.Primer_Brand__SubNav-module__SubNav--full-width___PoXey .Primer_Brand__SubNav-module__SubNav__overlay-toggle___37Xw7{right:0}.Primer_Brand__SubNav-module__SubNav__link___rY_yE,.Primer_Brand__SubNav-module__SubNav__action-container___Od_kP{-webkit-text-decoration:none;text-decoration:none;display:none}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{position:relative}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__link___rY_yE[aria-current]:not([aria-current=false]) *{color:var(--brand-SubNav-color-link-active)}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__link___rY_yE{padding:var(--base-size-4) var(--base-size-12);margin-inline-start:var(--base-size-8)}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__link___rY_yE[aria-current]:not([aria-current=false]),.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__link___rY_yE:hover{background-color:var(--brand-SubNav-color-link-bgColor);border-radius:var(--brand-borderRadius-full);display:inline-flex}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__link___rY_yE{animation:Primer_Brand__SubNav-module__fade-in___6VxHj .3s var(--brand-animation-easing-glide) forwards;display:inline-flex}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__action-container___Od_kP{animation:Primer_Brand__SubNav-module__fade-in___6VxHj .3s var(--brand-animation-easing-glide) forwards;display:block}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p{padding-block:0}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__action-container___Od_kP,.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn .Primer_Brand__SubNav-module__SubNav__action___Yrrhg{width:100%}.Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd{gap:var(--base-size-8);flex-direction:column;margin:0;padding:0;padding-block-start:var(--base-size-8);padding-inline-start:var(--base-size-16);list-style:none;display:flex}.Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd .Primer_Brand__SubNav-module__SubNav__link___rY_yE{margin-inline-start:0}.Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU .Primer_Brand__SubNav-module__SubNav__link___rY_yE:hover .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{color:var(--brand-color-text-default)!important}.Primer_Brand__SubNav-module__SubNav__anchor-menu-container___mSc6_{z-index:99;width:100%;overflow:auto hidden}.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f{position:sticky;top:-1px}.Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f:after{content:"";width:var(--base-size-32);background:linear-gradient(to left, var(--brand-color-canvas-default), transparent);pointer-events:none;z-index:100;position:absolute;top:0;bottom:0;right:0}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI{padding-inline:var(--base-size-16);padding-block-start:var(--base-size-16);padding-block-end:var(--base-size-16)}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);letter-spacing:var(--brand-text-letterSpacing-100)}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI .Primer_Brand__SubNav-module__SubNav__sub-menu-list___3rKmh{padding-inline-end:var(--base-size-32)}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI .Primer_Brand__SubNav-module__SubNav__link___rY_yE{white-space:pre;top:var(--base-size-2);display:block;position:relative}}.Primer_Brand__SubNav-module__SubNav__overlay-toggle-icon___Fo5xs{fill:var(--brand-color-text-default)}.Primer_Brand__SubNav-module__SubNav__overlay-toggle-content___r7g9W{align-items:center;gap:var(--base-size-8);display:flex}.Primer_Brand__SubNav-module__SubNav__overlay-toggle-content--end___zLnlL{justify-content:flex-end}.Primer_Brand__SubNav-module__SubNav__link___rY_yE:focus-visible,.Primer_Brand__SubNav-module__SubNav__heading___d8v1r:focus-visible,.Primer_Brand__SubNav-module__SubNav__subHeading___cmfhs:focus-visible,.Primer_Brand__SubNav-module__SubNav__sub-menu-toggle___ys018:focus-visible,.Primer_Brand__SubNav-module__SubNav__overlay-toggle-label___FRenU:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__SubNav-module__SubNav__subHeading___cmfhs{white-space:nowrap;display:block;position:relative}.Primer_Brand__SubNav-module__SubNav__subHeading___cmfhs[aria-current]:not([aria-current=false]){background-color:var(--brand-SubNav-color-link-bgColor);border-radius:var(--brand-borderRadius-full);padding:var(--base-size-6) var(--base-size-12);border:none}@media screen and (width>=48rem){.Primer_Brand__SubNav-module__SubNav__heading-container___09GuE{padding-inline:var(--base-size-24)}.Primer_Brand__SubNav-module__SubNav__overlay-toggle-content___r7g9W{padding-inline-start:var(--base-size-24)}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn{padding:var(--base-size-24)}.Primer_Brand__SubNav-module__SubNav--full-width___PoXey{padding-inline:0}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI{padding-inline:var(--base-size-24)}}.Primer_Brand__SubNav-module__SubNav__heading-label___Bv69i{white-space:pre}@media screen and (width>=63.25rem){.Primer_Brand__SubNav-module__SubNav___txUks{z-index:92;padding-inline:var(--base-size-32);align-items:center;display:flex}.Primer_Brand__SubNav-module__SubNav__links-overlay--open___TxiWn{padding:0}.Primer_Brand__SubNav-module__SubNav___txUks:has(+.Primer_Brand__SubNav-module__SubNav__anchor-menu-container___mSc6_){padding-block-end:0}.Primer_Brand__SubNav-module__SubNav__heading-container___09GuE{padding-inline-start:0}.Primer_Brand__SubNav-module__SubNav--full-width___PoXey{padding-inline:0}.Primer_Brand__SubNav-module__SubNav__overlay-toggle___37Xw7{display:none}.Primer_Brand__SubNav-module__SubNav__container--with-anchor-nav___jf8vj .Primer_Brand__SubNav-module__SubNav__heading___d8v1r{padding-block-end:1px}.Primer_Brand__SubNav-module__SubNav__heading-separator___LratU{margin-inline-end:var(--base-size-20);display:inline-flex;top:0}.Primer_Brand__SubNav-module__SubNav__container--with-anchor-nav___jf8vj .Primer_Brand__SubNav-module__SubNav__heading-separator___LratU{top:-1px}.Primer_Brand__SubNav-module__SubNav--header-container-outer___TODOB{align-items:center;display:flex}.Primer_Brand__SubNav-module__SubNav__header-container___seaW6{flex-shrink:0;align-items:center;display:flex}.Primer_Brand__SubNav-module__SubNav__links-overlay___IL2F1{align-items:center;gap:var(--base-size-2);z-index:92;min-width:0;flex:1 1 0;align-self:stretch;padding-inline-start:var(--base-size-24);display:flex}.Primer_Brand__SubNav-module__SubNav__links-overlay___IL2F1>li{white-space:nowrap;flex:none}.Primer_Brand__SubNav-module__SubNav__link--in-overlay___TIjzJ{align-items:center;display:inline-flex}.Primer_Brand__SubNav-module__SubNav__link-item--overflowed___9aqws{visibility:hidden;pointer-events:none;width:max-content;position:absolute}.Primer_Brand__SubNav-module__SubNav__overflow-container___uUl1G{visibility:hidden;pointer-events:none;align-self:stretch;align-items:center;display:flex;position:absolute}.Primer_Brand__SubNav-module__SubNav__overflow-container--visible___WHs6j{visibility:visible;pointer-events:auto;position:relative}.Primer_Brand__SubNav-module__SubNav__overflow-toggle___cHyPu{align-items:center;gap:var(--base-size-4);padding:var(--base-size-4) var(--base-size-12);color:var(--brand-SubNav-color-link-rest);background:var(--brand-SubNav-overflowMenu-toggle-bgColor-rest);border-radius:var(--brand-borderRadius-full);font:inherit;cursor:pointer;border:0;display:inline-flex}.Primer_Brand__SubNav-module__SubNav__overflow-toggle___cHyPu:hover{background-color:var(--brand-SubNav-overflowMenu-toggle-bgColor-hover)}.Primer_Brand__SubNav-module__SubNav__overflow-toggle___cHyPu[aria-expanded=true],.Primer_Brand__SubNav-module__SubNav__overflow-toggle--active___n1AFR{background-color:var(--brand-SubNav-overflowMenu-toggle-bgColor-active)}.Primer_Brand__SubNav-module__SubNav__overflow-toggle___cHyPu .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{color:inherit}.Primer_Brand__SubNav-module__SubNav__overflow-toggle___cHyPu:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__SubNav-module__SubNav__link___rY_yE{transition:color .2s var(--brand-animation-easing-glide);padding:var(--base-size-4) var(--base-size-12);border-radius:var(--brand-borderRadius-full);position:relative;-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100)}.Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p{padding:var(--base-size-4) 0}.Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p:after{content:"";bottom:calc(var(--base-size-12) * -1);width:100%;height:var(--base-size-12);background:0 0;position:absolute;left:0}.Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd.Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU{background-clip:padding-box;background-color:var(--brand-color-canvas-default);border:var(--brand-color-border-muted) solid var(--brand-borderWidth-thin);border-radius:var(--brand-borderRadius-medium);padding:var(--base-size-8);z-index:9998;transition-timing-function:var(--brand-animation-easing-glide);transition-duration:var(--brand-animation-duration-fast);top:90%;left:0;left:var(--base-size-4);visibility:hidden;opacity:0;transform-origin:top;gap:var(--base-size-8);width:var(--brand-SubNav-width-subMenu);flex-direction:column;margin-block-start:var(--base-size-8);list-style:none;transition-property:opacity,transform;display:flex;position:absolute;transform:scale(.99)translateY(-.7em)translate(-8px)}.Primer_Brand__SubNav-module__SubNav__link--expanded___pUtmL .Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd.Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU{visibility:visible;opacity:1;transform:scale(1)translateY(0)translate(-8px)}.Primer_Brand__SubNav-module__SubNav__sub-menu-toggle___ys018{width:var(--base-size-24);height:var(--base-size-24);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0;margin-inline-end:calc(-1 * var(--base-size-8));padding:0;padding-inline-end:var(--base-size-8);display:inline-flex}.Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd .Primer_Brand__SubNav-module__SubNav__link___rY_yE{display:block}.Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG:after{opacity:1;transform:scale(0)}.Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p{align-items:center;gap:var(--base-size-4);cursor:pointer;display:inline-flex;position:relative}.Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p>.Primer_Brand__SubNav-module__SubNav__link___rY_yE{padding-inline-end:0}.Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{padding:var(--base-size-4) 0;position:relative}.Primer_Brand__SubNav-module__SubNav__link--has-active-sub-menu___GyXf4{background-color:var(--brand-SubNav-color-link-bgColor);border-radius:var(--brand-borderRadius-full);padding:0 var(--base-size-8) 0 0;gap:0}.Primer_Brand__SubNav-module__SubNav__link--has-active-sub-menu___GyXf4>.Primer_Brand__SubNav-module__SubNav__link___rY_yE{padding:var(--base-size-4) 0 var(--base-size-4) var(--base-size-12)}.Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd.Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU .Primer_Brand__SubNav-module__SubNav__link___rY_yE{padding:var(--base-size-12)}.Primer_Brand__SubNav-module__SubNav__links-overlay___IL2F1 .Primer_Brand__SubNav-module__SubNav__link___rY_yE[aria-current]:not([aria-current=false]){background-color:var(--brand-SubNav-color-link-bgColor);line-height:1.1em}@supports ((-moz-appearance:none)){.Primer_Brand__SubNav-module__SubNav__links-overlay___IL2F1 .Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p .Primer_Brand__SubNav-module__SubNav__link___rY_yE[aria-current]:not([aria-current=false]) .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{top:0}}.Primer_Brand__SubNav-module__SubNav__links-overlay___IL2F1 .Primer_Brand__SubNav-module__SubNav__link--has-active-sub-menu___GyXf4 .Primer_Brand__SubNav-module__SubNav__link___rY_yE[aria-current]:not([aria-current=false]){padding-inline-end:var(--base-size-4)}.Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd.Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU .Primer_Brand__SubNav-module__SubNav__link___rY_yE[aria-current]:not([aria-current=false]){border-radius:var(--brand-borderRadius-medium);padding:var(--base-size-4) var(--base-size-8) var(--base-size-4) var(--base-size-12);top:auto;top:initial;background-color:#0000}.Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd.Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU .Primer_Brand__SubNav-module__SubNav__link___rY_yE:hover{background-color:var(--brand-SubNav-color-link-bgColor);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__SubNav-module__SubNav__sub-menu-icon___5Gkyb{fill:var(--brand-color-text-muted);transition:transform var(--brand-animation-duration-fast);display:inline-block!important}.Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p:not(.Primer_Brand__SubNav-module__SubNav__link--has-active-sub-menu___GyXf4) .Primer_Brand__SubNav-module__SubNav__sub-menu-icon___5Gkyb{top:calc(-1 * var(--brand-borderWidth-thin));position:relative}.Primer_Brand__SubNav-module__SubNav__sub-menu--anchor___te9GI{padding-inline:var(--base-size-32)}.Primer_Brand__SubNav-module__SubNav__overflow-menu___A8m3D .Primer_Brand__SubNav-module__SubNav__link___rY_yE{width:100%;min-height:var(--brand-SubNav-height-overflowMenuItemMin);padding:var(--base-size-8) var(--base-size-12);color:var(--brand-SubNav-overflowMenu-fgColor-rest);white-space:normal;word-wrap:anywhere;border-radius:var(--brand-borderRadius-medium);background-color:var(--brand-SubNav-overflowMenu-bgColor-rest);display:block}.Primer_Brand__SubNav-module__SubNav__overflow-menu___A8m3D .Primer_Brand__SubNav-module__SubNav__link___rY_yE .Primer_Brand__SubNav-module__SubNav__link-label___NVLOG{color:inherit;font-weight:var(--base-text-weight-normal);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__SubNav-module__SubNav__overflow-menu___A8m3D .Primer_Brand__SubNav-module__SubNav__link___rY_yE:hover,.Primer_Brand__SubNav-module__SubNav__overflow-menu___A8m3D .Primer_Brand__SubNav-module__SubNav__link___rY_yE:focus,.Primer_Brand__SubNav-module__SubNav__overflow-menu___A8m3D .Primer_Brand__SubNav-module__SubNav__link___rY_yE:focus-visible,.Primer_Brand__SubNav-module__SubNav__overflow-menu___A8m3D .Primer_Brand__SubNav-module__SubNav__link___rY_yE[aria-current]:not([aria-current=false]){color:var(--brand-SubNav-overflowMenu-fgColor-hover);background-color:var(--brand-SubNav-overflowMenu-bgColor-hover)}.Primer_Brand__SubNav-module__SubNav__overflow-menu___A8m3D .Primer_Brand__SubNav-module__SubNav__link___rY_yE:focus-visible{box-shadow:inset 0 0 0 var(--brand-borderWidth-thick) var(--brand-color-focus);outline:none}.Primer_Brand__SubNav-module__SubNav__overflow-menu___A8m3D .Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p{background:0 0;padding:0;display:block}.Primer_Brand__SubNav-module__SubNav__overflow-menu___A8m3D .Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p:after{content:none}.Primer_Brand__SubNav-module__SubNav__overflow-menu___A8m3D .Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU{width:auto;background-color:var(--brand-SubNav-overflowMenu-bgColor-rest);visibility:visible;opacity:1;border:0;margin:0;padding:0;padding-inline-start:var(--base-size-16);position:static;transform:none}}@keyframes Primer_Brand__SubNav-module__fade-in___6VxHj{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.Primer_Brand__SubNav-module__SubNav___txUks,.Primer_Brand__SubNav-module__SubNav___txUks:before,.Primer_Brand__SubNav-module__SubNav___txUks:after,.Primer_Brand__SubNav-module__SubNav___txUks *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/SubNav/SubNav.module.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './SubNav.module-D-gLr0JO.css';//#region src/SubNav/SubNav.module.css
+import './SubNav.module-cyUt0N_h.css';//#region src/SubNav/SubNav.module.css
 var e = "Primer_Brand__SubNav-module__SubNav__container___e4u9B", t = "Primer_Brand__SubNav-module__SubNav___txUks", n = "Primer_Brand__SubNav-module__SubNav__heading___d8v1r", r = "Primer_Brand__SubNav-module__SubNav__subHeading___cmfhs", i = "Primer_Brand__SubNav-module__SubNav__link___rY_yE", a = "Primer_Brand__SubNav-module__SubNav__action___Yrrhg", o = {
 	SubNav__container: e,
 	"SubNav__container--with-anchor-nav": "Primer_Brand__SubNav-module__SubNav__container--with-anchor-nav___jf8vj",
@@ -16,6 +16,10 @@ var e = "Primer_Brand__SubNav-module__SubNav__container___e4u9B", t = "Primer_Br
 	"SubNav__sub-menu-children": "Primer_Brand__SubNav-module__SubNav__sub-menu-children___5gfUK",
 	"SubNav__links-overlay": "Primer_Brand__SubNav-module__SubNav__links-overlay___IL2F1",
 	"SubNav__sub-menu-toggle": "Primer_Brand__SubNav-module__SubNav__sub-menu-toggle___ys018",
+	"SubNav__overflow-container": "Primer_Brand__SubNav-module__SubNav__overflow-container___uUl1G",
+	"SubNav__overflow-menu": "Primer_Brand__SubNav-module__SubNav__overflow-menu___A8m3D",
+	"fade-in": "Primer_Brand__SubNav-module__fade-in___6VxHj",
+	"SubNav__overflow-menu-list": "Primer_Brand__SubNav-module__SubNav__overflow-menu-list___Iz8_Z",
 	"SubNav__anchor-menu-outer-container": "Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container___Mt06f",
 	"SubNav__anchor-menu-container": "Primer_Brand__SubNav-module__SubNav__anchor-menu-container___mSc6_",
 	"SubNav__anchor-menu-outer-container--stuck": "Primer_Brand__SubNav-module__SubNav__anchor-menu-outer-container--stuck___KKSlj",
@@ -24,7 +28,6 @@ var e = "Primer_Brand__SubNav-module__SubNav__container___e4u9B", t = "Primer_Br
 	"SubNav__link--is-in-view": "Primer_Brand__SubNav-module__SubNav__link--is-in-view___5HQNs",
 	"SubNav--open": "Primer_Brand__SubNav-module__SubNav--open___uMKHN",
 	"SubNav__header-container": "Primer_Brand__SubNav-module__SubNav__header-container___seaW6",
-	"fade-in": "Primer_Brand__SubNav-module__fade-in___6VxHj",
 	"SubNav__heading-separator--main": "Primer_Brand__SubNav-module__SubNav__heading-separator--main___6nQIi",
 	"SubNav__heading-separator--has-adjacent-label": "Primer_Brand__SubNav-module__SubNav__heading-separator--has-adjacent-label____My0U",
 	"SubNav__heading-separator--subheading-active": "Primer_Brand__SubNav-module__SubNav__heading-separator--subheading-active___TGiD4",
@@ -43,9 +46,13 @@ var e = "Primer_Brand__SubNav-module__SubNav__container___e4u9B", t = "Primer_Br
 	"SubNav__overlay-toggle-icon": "Primer_Brand__SubNav-module__SubNav__overlay-toggle-icon___Fo5xs",
 	"SubNav__overlay-toggle-content--end": "Primer_Brand__SubNav-module__SubNav__overlay-toggle-content--end___zLnlL",
 	"SubNav__heading-label": "Primer_Brand__SubNav-module__SubNav__heading-label___Bv69i",
+	"SubNav__link--in-overlay": "Primer_Brand__SubNav-module__SubNav__link--in-overlay___TIjzJ",
+	"SubNav__link-item--overflowed": "Primer_Brand__SubNav-module__SubNav__link-item--overflowed___9aqws",
+	"SubNav__overflow-container--visible": "Primer_Brand__SubNav-module__SubNav__overflow-container--visible___WHs6j",
+	"SubNav__overflow-toggle": "Primer_Brand__SubNav-module__SubNav__overflow-toggle___cHyPu",
+	"SubNav__overflow-toggle--active": "Primer_Brand__SubNav-module__SubNav__overflow-toggle--active___n1AFR",
 	"SubNav__link--expanded": "Primer_Brand__SubNav-module__SubNav__link--expanded___pUtmL",
-	"SubNav__link--has-active-sub-menu": "Primer_Brand__SubNav-module__SubNav__link--has-active-sub-menu___GyXf4",
-	"fade-in-down": "Primer_Brand__SubNav-module__fade-in-down___UKi30"
+	"SubNav__link--has-active-sub-menu": "Primer_Brand__SubNav-module__SubNav__link--has-active-sub-menu___GyXf4"
 };
 //#endregion
 export { t as SubNav, a as SubNav__action, e as SubNav__container, n as SubNav__heading, i as SubNav__link, r as SubNav__subHeading, o as default };

package/esm/SubNav/SubNav.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubNav.module.js","names":[],"sources":["../../src/SubNav/SubNav.module.css"],"sourcesContent":[".SubNav__container {\n position: absolute;\n width: 100%;\n z-index: 2;\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubNav__container--with-anchor-nav {\n display: unset;\n position: relative;\n}\n\n.SubNav__container--with-anchor-nav .SubNav {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubNav {\n width: 100%;\n display: flex;\n z-index: 1;\n background-color: var(--brand-SubNav-bgColor);\n}\n\n[data-color-mode='dark'] .SubNav {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.SubNav__heading,\n.SubNav__subHeading {\n display: block;\n font-size: calc(var(--base-size-16) - 1px); /* One-off override to match design /\n line-height: calc(var(--base-size-16) - 1px); / One-off override to match design /\n font-weight: var(--brand-text-subhead-weight-medium);\n color: var(--brand-color-text-default);\n font-family: var(--brand-heading-fontFamily);\n text-decoration: none;\n}\n\n.SubNav__heading:hover,\n.SubNav__subHeading:hover,\n.SubNav__link:hover .SubNav__link-label {\n color: var(--brand-color-text-muted);\n text-decoration: none !important; / dotcom override /\n}\n\n.SubNav--header-container-outer {\n width: 100%;\n}\n\n.SubNav__heading-container {\n min-height: 60px;\n position: relative;\n z-index: 9998;\n display: flex;\n align-items: center;\n padding: var(--base-size-16);\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubNav__heading-container + .SubNav__heading-container {\n padding-inline-start: var(--base-size-24);\n}\n\n.SubNav--has-shadow {\n box-shadow: var(--brand-SubNav-shadow);\n background-color: var(--brand-color-canvas-default);\n}\n\n.SubNav--full-width {\n padding-inline: 0;\n}\n\n.SubNav__action-container {\n margin-left: auto;\n}\n\n.SubNav__sub-menu-icon {\n display: none !important;\n}\n\n.SubNav__sub-menu-children {\n display: contents;\n}\n\n.SubNav__links-overlay {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.SubNav__links-overlay > span {\n display: none;\n}\n\n.SubNav__sub-menu-toggle {\n display: none;\n}\n\n/\n * Anchor Nav Submenu\n /\n\n.SubNav__anchor-menu-outer-container {\n position: sticky;\n top: -1px;\n z-index: 91; / must be higher than subdomain nav bar /\n}\n\n.SubNav__anchor-menu-container {\n opacity: 0;\n background-color: transparent;\n transform: translateY(var(--brand-animation-variant-slideInDown-distance));\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n background-color var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.SubNav__anchor-menu-outer-container:focus-within .SubNav__anchor-menu-container,\n.SubNav__anchor-menu-outer-container--stuck .SubNav__anchor-menu-container {\n transform: translateY(0);\n opacity: 1;\n background-color: var(--brand-color-canvas-default);\n}\n\n.SubNav__anchor-menu-outer-container {\n height: 0;\n transition: height var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.SubNav__anchor-menu-outer-container:focus-within,\n.SubNav__anchor-menu-outer-container--stuck {\n height: auto;\n}\n\n.SubNav__sub-menu--anchor {\n opacity: 0;\n transform: translateY(var(--brand-animation-variant-slideInDown-distance));\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n height var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.SubNav__anchor-menu-outer-container:focus-within .SubNav__sub-menu--anchor,\n.SubNav__anchor-menu-outer-container--stuck .SubNav__sub-menu--anchor {\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n}\n\n.SubNav__sub-menu--anchor {\n display: flex;\n padding-block: var(--base-size-12);\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubNav__sub-menu--anchor .SubNav__sub-menu-list {\n display: inline-flex;\n list-style-type: none;\n margin: 0;\n padding: 0;\n gap: var(--base-size-20);\n}\n\n.SubNav__link-label {\n font-weight: 450; / FIXME: unsupported in our font weight primitives /\n}\n\n.SubNav__sub-menu--anchor .SubNav__link-label {\n padding: var(--base-size-6) var(--base-size-12);\n background-color: transparent;\n border-radius: var(--brand-borderRadius-full);\n transition: background-color var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n color var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label {\n background-color: var(--brand-SubNav-color-link-bgColor);\n}\n\n.SubNav__link:focus-visible .SubNav__link-label::after,\n.SubNav__sub-menu--anchor .SubNav__link--is-in-view:focus-visible .SubNav__link-label::after {\n opacity: 0;\n}\n\n.SubNav__link[aria-current]:not([aria-current='false']) {\n color: var(--brand-SubNav-color-link-active);\n text-decoration: none !important; /* dotcom override /\n}\n\n.SubNav__link:hover .SubNav__link-label {\n transition: color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.SubNav__link:hover .SubNav__link-label::after {\n border-color: var(--brand-color-text-default);\n}\n\n/\n * Narrow breakpoint\n /\n\n@media screen and (max-width: 63.24rem) {\n .SubNav {\n position: relative;\n }\n\n .SubNav::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n opacity: 0;\n z-index: 9997;\n }\n\n .SubNav::after {\n content: '';\n z-index: -1;\n position: fixed;\n background-color: var(--base-color-scale-black-0);\n opacity: 0;\n visibility: hidden;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n }\n\n .SubNav--open::after {\n opacity: 0.3;\n visibility: visible;\n transition: visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n }\n\n .SubNav__heading {\n font-size: var(--base-size-16);\n line-height: var(--base-size-24);\n }\n\n .SubNav--open {\n display: block;\n }\n\n .SubNav--open .SubNav--header-container-outer {\n display: flex;\n flex-direction: column;\n max-height: var(--subnav-available-height, 100dvh);\n overflow: hidden;\n }\n\n .SubNav--open .SubNav__header-container {\n flex-shrink: 0;\n }\n\n .SubNav--open + .SubNav__anchor-menu-outer-container {\n z-index: -1;\n }\n\n .SubNav--open::before {\n background-color: var(--brand-color-canvas-default);\n animation: fade-in 0.3s var(--brand-animation-easing-glide) forwards;\n }\n\n .SubNav__heading-separator--main:not(.SubNav__heading-separator--has-adjacent-label),\n .SubNav__heading-separator--subheading-active,\n .SubNav__subheading-container-active {\n display: none;\n }\n\n .SubNav__header-container {\n display: flex;\n width: 100%;\n white-space: pre;\n position: relative;\n z-index: 9998;\n }\n\n .SubNav__heading-container + .SubNav__heading-container {\n padding-inline-start: var(--base-size-16);\n }\n\n .SubNav__heading-separator {\n margin-inline-end: var(--base-size-16);\n z-index: 9998;\n }\n\n .SubNav__links-overlay {\n position: relative;\n display: flex;\n flex: auto;\n flex-direction: column;\n justify-content: center;\n z-index: 9998;\n display: none;\n padding-inline: var(--base-size-8);\n }\n\n .SubNav__links-overlay--open {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n padding-block: var(--base-size-16);\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n justify-content: flex-start;\n overflow-y: auto;\n min-height: 0;\n }\n\n .SubNav__links-overlay--open .SubNav__link:hover .SubNav__link-label {\n color: var(--brand-color-text-default);\n }\n\n .SubNav__overlay-toggle {\n display: flex;\n position: relative;\n width: 100%;\n z-index: 9999;\n justify-content: flex-end;\n padding-inline-end: var(--base-size-16);\n }\n\n .SubNav--has-sub-heading:not(.SubNav--subHeadingActive) .SubNav__overlay-toggle {\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n display: block;\n padding-block: var(--base-size-12);\n margin-block: 0;\n }\n\n .SubNav__overlay-toggle-content {\n width: 100%;\n padding-inline-start: var(--base-size-16);\n }\n\n .SubNav__overlay-toggle-label {\n background-color: var(--brand-SubNav-color-link-bgColor);\n border: none;\n border-radius: var(--brand-borderRadius-full);\n padding: var(--base-size-4) var(--base-size-12);\n gap: var(--base-size-6);\n display: flex;\n align-items: center;\n cursor: pointer;\n font: inherit;\n }\n\n .SubNav--full-width .SubNav__overlay-toggle {\n right: 0;\n }\n\n .SubNav__link,\n .SubNav__action-container {\n display: none;\n text-decoration: none;\n }\n\n .SubNav__links-overlay--open .SubNav__link-label {\n position: relative;\n }\n\n .SubNav__links-overlay--open .SubNav__link[aria-current]:not([aria-current='false']) {\n color: var(--brand-SubNav-color-link-active);\n }\n\n .SubNav__links-overlay--open .SubNav__link {\n margin-inline-start: var(--base-size-8);\n padding: var(--base-size-4) var(--base-size-12);\n }\n\n .SubNav__links-overlay--open .SubNav__link[aria-current]:not([aria-current='false']) {\n display: inline-flex;\n background-color: var(--brand-SubNav-color-link-bgColor);\n border-radius: var(--brand-borderRadius-full);\n }\n\n .SubNav__links-overlay--open .SubNav__link:hover {\n display: inline-flex;\n background-color: var(--brand-SubNav-color-link-bgColor);\n border-radius: var(--brand-borderRadius-full);\n }\n\n .SubNav__links-overlay--open .SubNav__link {\n display: inline-flex;\n animation: fade-in 0.3s var(--brand-animation-easing-glide) forwards;\n }\n\n .SubNav__links-overlay--open .SubNav__action-container {\n display: block;\n animation: fade-in 0.3s var(--brand-animation-easing-glide) forwards;\n }\n\n .SubNav__links-overlay--open .SubNav__link--has-sub-menu {\n padding-block: 0;\n }\n\n .SubNav__links-overlay--open .SubNav__action-container {\n width: 100%;\n }\n\n .SubNav__links-overlay--open .SubNav__action {\n width: 100%;\n }\n\n .SubNav__sub-menu {\n list-style: none;\n padding: 0;\n margin: 0;\n padding-inline-start: var(--base-size-16);\n padding-block-start: var(--base-size-8);\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n }\n\n .SubNav__sub-menu .SubNav__link {\n margin-inline-start: 0;\n }\n\n .SubNav__sub-menu--dropdown .SubNav__link:hover .SubNav__link-label {\n color: var(--brand-color-text-default) !important;\n }\n\n .SubNav__anchor-menu-container {\n z-index: 99;\n overflow-x: auto;\n overflow-y: hidden;\n width: 100%;\n }\n\n .SubNav__anchor-menu-outer-container {\n position: sticky;\n top: -1px;\n }\n\n .SubNav__anchor-menu-outer-container::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n width: var(--base-size-32);\n background: linear-gradient(to left, var(--brand-color-canvas-default), transparent);\n pointer-events: none;\n z-index: 100;\n }\n\n .SubNav__sub-menu--anchor {\n padding-inline: var(--base-size-16);\n padding-block-end: var(--base-size-16);\n padding-block-start: var(--base-size-16);\n }\n\n .SubNav__sub-menu--anchor .SubNav__link-label {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: var(--brand-text-letterSpacing-100);\n }\n\n .SubNav__sub-menu--anchor .SubNav__sub-menu-list {\n padding-inline-end: var(--base-size-32);\n }\n\n .SubNav__sub-menu--anchor .SubNav__link {\n display: block;\n white-space: pre;\n position: relative;\n top: var(--base-size-2);\n }\n}\n\n.SubNav__overlay-toggle-icon {\n fill: var(--brand-color-text-default);\n}\n\n.SubNav__overlay-toggle-content {\n display: flex;\n align-items: center;\n gap: var(--base-size-8);\n}\n\n.SubNav__overlay-toggle-content--end {\n justify-content: flex-end;\n}\n\n.SubNav__link:focus-visible,\n.SubNav__heading:focus-visible,\n.SubNav__subHeading:focus-visible,\n.SubNav__sub-menu-toggle:focus-visible,\n.SubNav__overlay-toggle-label:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.SubNav__subHeading {\n display: block;\n position: relative;\n white-space: nowrap;\n}\n\n.SubNav__subHeading[aria-current]:not([aria-current='false']) {\n background-color: var(--brand-SubNav-color-link-bgColor);\n border: none;\n border-radius: var(--brand-borderRadius-full);\n padding: var(--base-size-6) var(--base-size-12);\n}\n\n@media screen and (min-width: 48rem) {\n .SubNav__heading-container {\n padding-inline: var(--base-size-24);\n }\n\n .SubNav__overlay-toggle-content {\n padding-inline-start: var(--base-size-24);\n }\n\n .SubNav__links-overlay--open {\n padding: var(--base-size-24);\n }\n\n .SubNav--full-width {\n padding-inline: 0;\n }\n\n .SubNav__sub-menu--anchor {\n padding-inline: var(--base-size-24);\n }\n}\n\n.SubNav__heading-label {\n white-space: pre;\n}\n\n/\n Wide breakpoint\n /\n\n@media screen and (min-width: 63.25rem) {\n .SubNav {\n align-items: center;\n display: flex;\n z-index: 92;\n padding-inline: var(--base-size-32);\n }\n\n .SubNav__links-overlay--open {\n padding: 0;\n }\n\n .SubNav:has(+ .SubNav__anchor-menu-container) {\n padding-block-end: 0;\n }\n\n .SubNav__heading-container {\n padding-inline-start: 0;\n }\n\n .SubNav--full-width {\n padding-inline: 0;\n }\n\n .SubNav__overlay-toggle {\n display: none;\n }\n\n .SubNav__container--with-anchor-nav .SubNav__heading {\n padding-block-end: 1px;\n }\n\n .SubNav__heading-separator {\n margin-inline-end: var(--base-size-20);\n display: inline-flex;\n top: 0;\n }\n\n .SubNav__container--with-anchor-nav .SubNav__heading-separator {\n top: -1px;\n }\n\n .SubNav--header-container-outer {\n display: flex;\n align-items: center;\n }\n\n .SubNav__header-container {\n display: flex;\n align-items: center;\n }\n\n .SubNav__links-overlay {\n align-items: center;\n display: flex;\n gap: var(--base-size-2);\n z-index: 92;\n flex-grow: 1;\n padding-inline-start: var(--base-size-24);\n }\n\n .SubNav__link {\n text-decoration: none !important; / dotcom override /\n transition: color 0.2s var(--brand-animation-easing-glide);\n position: relative;\n padding: var(--base-size-4) var(--base-size-12);\n border-radius: var(--brand-borderRadius-full);\n }\n\n .SubNav__link-label {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubNav__link--has-sub-menu {\n padding: var(--base-size-4) 0;\n }\n\n / To fix hover distance between link and dropdown /\n .SubNav__link--has-sub-menu::after {\n content: '';\n position: absolute;\n bottom: calc(var(--base-size-12) -1);\n left: 0;\n width: 100%;\n height: var(--base-size-12);\n background: transparent;\n }\n\n .SubNav__sub-menu.SubNav__sub-menu--dropdown {\n background-clip: padding-box;\n background-color: var(--brand-color-canvas-default);\n border: var(--brand-color-border-muted) solid var(--brand-borderWidth-thin);\n border-radius: var(--brand-borderRadius-medium);\n left: 0;\n list-style: none;\n margin-block-start: var(--base-size-8);\n padding: var(--base-size-8);\n position: absolute;\n top: 90%;\n z-index: 9998;\n transition-timing-function: var(--brand-animation-easing-glide);\n transition-duration: var(--brand-animation-duration-fast);\n transition-property: opacity, transform;\n left: var(--base-size-4);\n visibility: hidden;\n opacity: 0;\n transform: scale(0.99) translateY(-0.7em) translateX(-8px);\n transform-origin: top;\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n width: var(--brand-SubNav-width-subMenu);\n }\n\n .SubNav__link--expanded .SubNav__sub-menu.SubNav__sub-menu--dropdown {\n visibility: visible;\n opacity: 1;\n transform: scale(1) translateY(0) translateX(-8px);\n }\n\n .SubNav__sub-menu-toggle {\n width: var(--base-size-24);\n height: var(--base-size-24);\n border: none;\n padding: 0;\n margin: 0;\n padding-inline-end: var(--base-size-8);\n margin-inline-end: calc(-1 * var(--base-size-8));\n background: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n\n .SubNav__sub-menu .SubNav__link {\n display: block;\n }\n\n .SubNav__sub-menu--dropdown .SubNav__link-label::after {\n opacity: 1;\n transform: scale(0);\n }\n\n .SubNav__link--has-sub-menu {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-4);\n cursor: pointer;\n }\n\n .SubNav__link--has-sub-menu > .SubNav__link {\n padding-inline-end: 0;\n }\n\n .SubNav__sub-menu--dropdown .SubNav__link-label {\n position: relative;\n padding: var(--base-size-4) 0;\n }\n\n /* Show pill on submenu parent /\n .SubNav__link--has-active-sub-menu {\n background-color: var(--brand-SubNav-color-link-bgColor);\n border-radius: var(--brand-borderRadius-full);\n padding: 0 var(--base-size-8) 0 0;\n gap: 0;\n }\n\n .SubNav__link--has-active-sub-menu > .SubNav__link {\n padding: var(--base-size-4) 0 var(--base-size-4) var(--base-size-12);\n }\n\n .SubNav__sub-menu.SubNav__sub-menu--dropdown .SubNav__link {\n padding: var(--base-size-12);\n }\n\n / Active link pill styling /\n .SubNav__links-overlay .SubNav__link[aria-current]:not([aria-current='false']) {\n background-color: var(--brand-SubNav-color-link-bgColor);\n line-height: 1.1em;\n }\n\n / Firefox optical alignment fix /\n @supports (-moz-appearance: none) {\n .SubNav__links-overlay\n .SubNav__link--has-sub-menu\n .SubNav__link[aria-current]:not([aria-current='false'])\n .SubNav__link-label {\n top: 0;\n }\n }\n\n .SubNav__links-overlay .SubNav__link--has-active-sub-menu .SubNav__link[aria-current]:not([aria-current='false']) {\n padding-inline-end: var(--base-size-4);\n }\n\n .SubNav__sub-menu.SubNav__sub-menu--dropdown .SubNav__link[aria-current]:not([aria-current='false']) {\n background-color: transparent;\n border-radius: var(--brand-borderRadius-medium);\n padding: var(--base-size-4) var(--base-size-8) var(--base-size-4) var(--base-size-12);\n top: unset;\n }\n\n .SubNav__sub-menu.SubNav__sub-menu--dropdown .SubNav__link:hover {\n background-color: var(--brand-SubNav-color-link-bgColor);\n border-radius: var(--brand-borderRadius-medium);\n }\n\n .SubNav__sub-menu-icon {\n display: inline-block !important;\n fill: var(--brand-color-text-muted);\n transition: transform var(--brand-animation-duration-fast);\n }\n\n .SubNav__link--has-sub-menu:not(.SubNav__link--has-active-sub-menu) .SubNav__sub-menu-icon {\n position: relative;\n top: calc(-1 var(--brand-borderWidth-thin));\n }\n\n .SubNav__sub-menu--anchor {\n padding-inline: var(--base-size-32);\n }\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes fade-in-down {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .SubNav,\n .SubNav::before,\n .SubNav::after,\n .SubNav {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"SubNav.module.js","names":[],"sources":["../../src/SubNav/SubNav.module.css"],"sourcesContent":[".SubNav__container {\n position: absolute;\n width: 100%;\n z-index: 2;\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubNav__container--with-anchor-nav {\n display: unset;\n position: relative;\n}\n\n.SubNav__container--with-anchor-nav .SubNav {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubNav {\n width: 100%;\n display: flex;\n z-index: 1;\n background-color: var(--brand-SubNav-bgColor);\n}\n\n[data-color-mode='dark'] .SubNav {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.SubNav__heading,\n.SubNav__subHeading {\n display: block;\n font-size: calc(var(--base-size-16) - 1px); /* One-off override to match design /\n line-height: calc(var(--base-size-16) - 1px); / One-off override to match design /\n font-weight: var(--brand-text-subhead-weight-medium);\n color: var(--brand-color-text-default);\n font-family: var(--brand-heading-fontFamily);\n text-decoration: none;\n}\n\n.SubNav__heading:hover,\n.SubNav__subHeading:hover,\n.SubNav__link:hover .SubNav__link-label {\n color: var(--brand-color-text-muted);\n text-decoration: none !important; / dotcom override /\n}\n\n.SubNav--header-container-outer {\n width: 100%;\n}\n\n.SubNav__heading-container {\n min-height: 60px;\n position: relative;\n z-index: 9998;\n display: flex;\n align-items: center;\n padding: var(--base-size-16);\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubNav__heading-container + .SubNav__heading-container {\n padding-inline-start: var(--base-size-24);\n}\n\n.SubNav--has-shadow {\n box-shadow: var(--brand-SubNav-shadow);\n background-color: var(--brand-color-canvas-default);\n}\n\n.SubNav--full-width {\n padding-inline: 0;\n}\n\n.SubNav__action-container {\n margin-left: auto;\n}\n\n.SubNav__sub-menu-icon {\n display: none !important;\n}\n\n.SubNav__sub-menu-children {\n display: contents;\n}\n\n.SubNav__links-overlay {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.SubNav__links-overlay > span {\n display: none;\n}\n\n.SubNav__sub-menu-toggle {\n display: none;\n}\n\n.SubNav__overflow-container {\n display: none;\n}\n\n.SubNav__overflow-menu {\n position: absolute;\n inset: auto;\n margin: 0;\n padding: 0;\n z-index: 10;\n width: max-content;\n min-width: var(--brand-SubNav-width-overflowMenuMin);\n max-width: calc(100vw - var(--brand-SubNav-width-overflowMenuInset));\n max-height: calc(100dvh - var(--brand-SubNav-height-overflowMenuInset));\n overflow-x: hidden;\n overflow-y: auto;\n background-color: var(--brand-SubNav-overflowMenu-bgColor-rest);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n border-end-start-radius: var(--brand-borderRadius-medium);\n border-end-end-radius: var(--brand-borderRadius-medium);\n box-shadow: none;\n transform: translateY(calc(0px - var(--brand-SubNav-offset-overflowMenu)));\n animation: fade-in var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.SubNav__overflow-menu::backdrop {\n background-color: transparent;\n}\n\n.SubNav__overflow-menu-list {\n display: grid;\n gap: var(--brand-borderWidth-thin);\n list-style: none;\n margin: 0;\n padding: var(--base-size-8);\n width: 100%;\n}\n\n/\n * Anchor Nav Submenu\n /\n\n.SubNav__anchor-menu-outer-container {\n position: sticky;\n top: -1px;\n z-index: 91; / must be higher than subdomain nav bar /\n}\n\n.SubNav__anchor-menu-container {\n opacity: 0;\n background-color: transparent;\n transform: translateY(var(--brand-animation-variant-slideInDown-distance));\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n background-color var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.SubNav__anchor-menu-outer-container:focus-within .SubNav__anchor-menu-container,\n.SubNav__anchor-menu-outer-container--stuck .SubNav__anchor-menu-container {\n transform: translateY(0);\n opacity: 1;\n background-color: var(--brand-color-canvas-default);\n}\n\n.SubNav__anchor-menu-outer-container {\n height: 0;\n transition: height var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.SubNav__anchor-menu-outer-container:focus-within,\n.SubNav__anchor-menu-outer-container--stuck {\n height: auto;\n}\n\n.SubNav__sub-menu--anchor {\n opacity: 0;\n transform: translateY(var(--brand-animation-variant-slideInDown-distance));\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n height var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.SubNav__anchor-menu-outer-container:focus-within .SubNav__sub-menu--anchor,\n.SubNav__anchor-menu-outer-container--stuck .SubNav__sub-menu--anchor {\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n}\n\n.SubNav__sub-menu--anchor {\n display: flex;\n padding-block: var(--base-size-12);\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubNav__sub-menu--anchor .SubNav__sub-menu-list {\n display: inline-flex;\n list-style-type: none;\n margin: 0;\n padding: 0;\n gap: var(--base-size-20);\n}\n\n.SubNav__link-label {\n font-weight: 450; / FIXME: unsupported in our font weight primitives /\n}\n\n.SubNav__sub-menu--anchor .SubNav__link-label {\n padding: var(--base-size-6) var(--base-size-12);\n background-color: transparent;\n border-radius: var(--brand-borderRadius-full);\n transition: background-color var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n color var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label {\n background-color: var(--brand-SubNav-color-link-bgColor);\n}\n\n.SubNav__link:focus-visible .SubNav__link-label::after,\n.SubNav__sub-menu--anchor .SubNav__link--is-in-view:focus-visible .SubNav__link-label::after {\n opacity: 0;\n}\n\n.SubNav__link[aria-current]:not([aria-current='false']) {\n color: var(--brand-SubNav-color-link-active);\n text-decoration: none !important; /* dotcom override /\n}\n\n.SubNav__link:hover .SubNav__link-label {\n transition: color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.SubNav__link:hover .SubNav__link-label::after {\n border-color: var(--brand-color-text-default);\n}\n\n/\n * Narrow breakpoint\n /\n\n@media screen and (max-width: 63.24rem) {\n .SubNav {\n position: relative;\n }\n\n .SubNav::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n opacity: 0;\n z-index: 9997;\n }\n\n .SubNav::after {\n content: '';\n z-index: -1;\n position: fixed;\n background-color: var(--base-color-scale-black-0);\n opacity: 0;\n visibility: hidden;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n }\n\n .SubNav--open::after {\n opacity: 0.3;\n visibility: visible;\n transition: visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n }\n\n .SubNav__heading {\n font-size: var(--base-size-16);\n line-height: var(--base-size-24);\n }\n\n .SubNav--open {\n display: block;\n }\n\n .SubNav--open .SubNav--header-container-outer {\n display: flex;\n flex-direction: column;\n max-height: var(--subnav-available-height, 100dvh);\n overflow: hidden;\n }\n\n .SubNav--open .SubNav__header-container {\n flex-shrink: 0;\n }\n\n .SubNav--open + .SubNav__anchor-menu-outer-container {\n z-index: -1;\n }\n\n .SubNav--open::before {\n background-color: var(--brand-color-canvas-default);\n animation: fade-in 0.3s var(--brand-animation-easing-glide) forwards;\n }\n\n .SubNav__heading-separator--main:not(.SubNav__heading-separator--has-adjacent-label),\n .SubNav__heading-separator--subheading-active,\n .SubNav__subheading-container-active {\n display: none;\n }\n\n .SubNav__header-container {\n display: flex;\n width: 100%;\n white-space: pre;\n position: relative;\n z-index: 9998;\n }\n\n .SubNav__heading-container + .SubNav__heading-container {\n padding-inline-start: var(--base-size-16);\n }\n\n .SubNav__heading-separator {\n margin-inline-end: var(--base-size-16);\n z-index: 9998;\n }\n\n .SubNav__links-overlay {\n position: relative;\n display: flex;\n flex: auto;\n flex-direction: column;\n justify-content: center;\n z-index: 9998;\n display: none;\n padding-inline: var(--base-size-8);\n }\n\n .SubNav__links-overlay--open {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n padding-block: var(--base-size-16);\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n justify-content: flex-start;\n overflow-y: auto;\n min-height: 0;\n }\n\n .SubNav__links-overlay--open .SubNav__link:hover .SubNav__link-label {\n color: var(--brand-color-text-default);\n }\n\n .SubNav__overlay-toggle {\n display: flex;\n position: relative;\n width: 100%;\n z-index: 9999;\n justify-content: flex-end;\n padding-inline-end: var(--base-size-16);\n }\n\n .SubNav--has-sub-heading:not(.SubNav--subHeadingActive) .SubNav__overlay-toggle {\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n display: block;\n padding-block: var(--base-size-12);\n margin-block: 0;\n }\n\n .SubNav__overlay-toggle-content {\n width: 100%;\n padding-inline-start: var(--base-size-16);\n }\n\n .SubNav__overlay-toggle-label {\n background-color: var(--brand-SubNav-color-link-bgColor);\n border: none;\n border-radius: var(--brand-borderRadius-full);\n padding: var(--base-size-4) var(--base-size-12);\n gap: var(--base-size-6);\n display: flex;\n align-items: center;\n cursor: pointer;\n font: inherit;\n }\n\n .SubNav--full-width .SubNav__overlay-toggle {\n right: 0;\n }\n\n .SubNav__link,\n .SubNav__action-container {\n display: none;\n text-decoration: none;\n }\n\n .SubNav__links-overlay--open .SubNav__link-label {\n position: relative;\n }\n\n .SubNav__links-overlay--open .SubNav__link[aria-current]:not([aria-current='false']) {\n color: var(--brand-SubNav-color-link-active);\n }\n\n .SubNav__links-overlay--open .SubNav__link {\n margin-inline-start: var(--base-size-8);\n padding: var(--base-size-4) var(--base-size-12);\n }\n\n .SubNav__links-overlay--open .SubNav__link[aria-current]:not([aria-current='false']) {\n display: inline-flex;\n background-color: var(--brand-SubNav-color-link-bgColor);\n border-radius: var(--brand-borderRadius-full);\n }\n\n .SubNav__links-overlay--open .SubNav__link:hover {\n display: inline-flex;\n background-color: var(--brand-SubNav-color-link-bgColor);\n border-radius: var(--brand-borderRadius-full);\n }\n\n .SubNav__links-overlay--open .SubNav__link {\n display: inline-flex;\n animation: fade-in 0.3s var(--brand-animation-easing-glide) forwards;\n }\n\n .SubNav__links-overlay--open .SubNav__action-container {\n display: block;\n animation: fade-in 0.3s var(--brand-animation-easing-glide) forwards;\n }\n\n .SubNav__links-overlay--open .SubNav__link--has-sub-menu {\n padding-block: 0;\n }\n\n .SubNav__links-overlay--open .SubNav__action-container {\n width: 100%;\n }\n\n .SubNav__links-overlay--open .SubNav__action {\n width: 100%;\n }\n\n .SubNav__sub-menu {\n list-style: none;\n padding: 0;\n margin: 0;\n padding-inline-start: var(--base-size-16);\n padding-block-start: var(--base-size-8);\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n }\n\n .SubNav__sub-menu .SubNav__link {\n margin-inline-start: 0;\n }\n\n .SubNav__sub-menu--dropdown .SubNav__link:hover .SubNav__link-label {\n color: var(--brand-color-text-default) !important;\n }\n\n .SubNav__anchor-menu-container {\n z-index: 99;\n overflow-x: auto;\n overflow-y: hidden;\n width: 100%;\n }\n\n .SubNav__anchor-menu-outer-container {\n position: sticky;\n top: -1px;\n }\n\n .SubNav__anchor-menu-outer-container::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n width: var(--base-size-32);\n background: linear-gradient(to left, var(--brand-color-canvas-default), transparent);\n pointer-events: none;\n z-index: 100;\n }\n\n .SubNav__sub-menu--anchor {\n padding-inline: var(--base-size-16);\n padding-block-end: var(--base-size-16);\n padding-block-start: var(--base-size-16);\n }\n\n .SubNav__sub-menu--anchor .SubNav__link-label {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: var(--brand-text-letterSpacing-100);\n }\n\n .SubNav__sub-menu--anchor .SubNav__sub-menu-list {\n padding-inline-end: var(--base-size-32);\n }\n\n .SubNav__sub-menu--anchor .SubNav__link {\n display: block;\n white-space: pre;\n position: relative;\n top: var(--base-size-2);\n }\n}\n\n.SubNav__overlay-toggle-icon {\n fill: var(--brand-color-text-default);\n}\n\n.SubNav__overlay-toggle-content {\n display: flex;\n align-items: center;\n gap: var(--base-size-8);\n}\n\n.SubNav__overlay-toggle-content--end {\n justify-content: flex-end;\n}\n\n.SubNav__link:focus-visible,\n.SubNav__heading:focus-visible,\n.SubNav__subHeading:focus-visible,\n.SubNav__sub-menu-toggle:focus-visible,\n.SubNav__overlay-toggle-label:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.SubNav__subHeading {\n display: block;\n position: relative;\n white-space: nowrap;\n}\n\n.SubNav__subHeading[aria-current]:not([aria-current='false']) {\n background-color: var(--brand-SubNav-color-link-bgColor);\n border: none;\n border-radius: var(--brand-borderRadius-full);\n padding: var(--base-size-6) var(--base-size-12);\n}\n\n@media screen and (min-width: 48rem) {\n .SubNav__heading-container {\n padding-inline: var(--base-size-24);\n }\n\n .SubNav__overlay-toggle-content {\n padding-inline-start: var(--base-size-24);\n }\n\n .SubNav__links-overlay--open {\n padding: var(--base-size-24);\n }\n\n .SubNav--full-width {\n padding-inline: 0;\n }\n\n .SubNav__sub-menu--anchor {\n padding-inline: var(--base-size-24);\n }\n}\n\n.SubNav__heading-label {\n white-space: pre;\n}\n\n/\n Wide breakpoint\n /\n\n@media screen and (min-width: 63.25rem) {\n .SubNav {\n align-items: center;\n display: flex;\n z-index: 92;\n padding-inline: var(--base-size-32);\n }\n\n .SubNav__links-overlay--open {\n padding: 0;\n }\n\n .SubNav:has(+ .SubNav__anchor-menu-container) {\n padding-block-end: 0;\n }\n\n .SubNav__heading-container {\n padding-inline-start: 0;\n }\n\n .SubNav--full-width {\n padding-inline: 0;\n }\n\n .SubNav__overlay-toggle {\n display: none;\n }\n\n .SubNav__container--with-anchor-nav .SubNav__heading {\n padding-block-end: 1px;\n }\n\n .SubNav__heading-separator {\n margin-inline-end: var(--base-size-20);\n display: inline-flex;\n top: 0;\n }\n\n .SubNav__container--with-anchor-nav .SubNav__heading-separator {\n top: -1px;\n }\n\n .SubNav--header-container-outer {\n display: flex;\n align-items: center;\n }\n\n .SubNav__header-container {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .SubNav__links-overlay {\n align-items: center;\n display: flex;\n gap: var(--base-size-2);\n z-index: 92;\n flex: 1 1 0;\n min-width: 0;\n align-self: stretch;\n padding-inline-start: var(--base-size-24);\n }\n\n .SubNav__links-overlay > li {\n flex: 0 0 auto;\n white-space: nowrap;\n }\n\n .SubNav__link--in-overlay {\n display: inline-flex;\n align-items: center;\n }\n\n .SubNav__link-item--overflowed {\n position: absolute;\n width: max-content;\n visibility: hidden;\n pointer-events: none;\n }\n\n .SubNav__overflow-container {\n display: flex;\n align-items: center;\n align-self: stretch;\n position: absolute;\n visibility: hidden;\n pointer-events: none;\n }\n\n .SubNav__overflow-container--visible {\n position: relative;\n visibility: visible;\n pointer-events: auto;\n }\n\n .SubNav__overflow-toggle {\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-4);\n padding: var(--base-size-4) var(--base-size-12);\n color: var(--brand-SubNav-color-link-rest);\n background: var(--brand-SubNav-overflowMenu-toggle-bgColor-rest);\n border: 0;\n border-radius: var(--brand-borderRadius-full);\n font: inherit;\n cursor: pointer;\n }\n\n .SubNav__overflow-toggle:hover {\n background-color: var(--brand-SubNav-overflowMenu-toggle-bgColor-hover);\n }\n\n .SubNav__overflow-toggle[aria-expanded='true'],\n .SubNav__overflow-toggle--active {\n background-color: var(--brand-SubNav-overflowMenu-toggle-bgColor-active);\n }\n\n .SubNav__overflow-toggle .SubNav__link-label {\n color: inherit;\n }\n\n .SubNav__overflow-toggle:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n }\n\n .SubNav__link {\n text-decoration: none !important; / dotcom override /\n transition: color 0.2s var(--brand-animation-easing-glide);\n position: relative;\n padding: var(--base-size-4) var(--base-size-12);\n border-radius: var(--brand-borderRadius-full);\n }\n\n .SubNav__link-label {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubNav__link--has-sub-menu {\n padding: var(--base-size-4) 0;\n }\n\n / To fix hover distance between link and dropdown /\n .SubNav__link--has-sub-menu::after {\n content: '';\n position: absolute;\n bottom: calc(var(--base-size-12) -1);\n left: 0;\n width: 100%;\n height: var(--base-size-12);\n background: transparent;\n }\n\n .SubNav__sub-menu.SubNav__sub-menu--dropdown {\n background-clip: padding-box;\n background-color: var(--brand-color-canvas-default);\n border: var(--brand-color-border-muted) solid var(--brand-borderWidth-thin);\n border-radius: var(--brand-borderRadius-medium);\n left: 0;\n list-style: none;\n margin-block-start: var(--base-size-8);\n padding: var(--base-size-8);\n position: absolute;\n top: 90%;\n z-index: 9998;\n transition-timing-function: var(--brand-animation-easing-glide);\n transition-duration: var(--brand-animation-duration-fast);\n transition-property: opacity, transform;\n left: var(--base-size-4);\n visibility: hidden;\n opacity: 0;\n transform: scale(0.99) translateY(-0.7em) translateX(-8px);\n transform-origin: top;\n display: flex;\n flex-direction: column;\n gap: var(--base-size-8);\n width: var(--brand-SubNav-width-subMenu);\n }\n\n .SubNav__link--expanded .SubNav__sub-menu.SubNav__sub-menu--dropdown {\n visibility: visible;\n opacity: 1;\n transform: scale(1) translateY(0) translateX(-8px);\n }\n\n .SubNav__sub-menu-toggle {\n width: var(--base-size-24);\n height: var(--base-size-24);\n border: none;\n padding: 0;\n margin: 0;\n padding-inline-end: var(--base-size-8);\n margin-inline-end: calc(-1 * var(--base-size-8));\n background: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n\n .SubNav__sub-menu .SubNav__link {\n display: block;\n }\n\n .SubNav__sub-menu--dropdown .SubNav__link-label::after {\n opacity: 1;\n transform: scale(0);\n }\n\n .SubNav__link--has-sub-menu {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-4);\n cursor: pointer;\n }\n\n .SubNav__link--has-sub-menu > .SubNav__link {\n padding-inline-end: 0;\n }\n\n .SubNav__sub-menu--dropdown .SubNav__link-label {\n position: relative;\n padding: var(--base-size-4) 0;\n }\n\n /* Show pill on submenu parent /\n .SubNav__link--has-active-sub-menu {\n background-color: var(--brand-SubNav-color-link-bgColor);\n border-radius: var(--brand-borderRadius-full);\n padding: 0 var(--base-size-8) 0 0;\n gap: 0;\n }\n\n .SubNav__link--has-active-sub-menu > .SubNav__link {\n padding: var(--base-size-4) 0 var(--base-size-4) var(--base-size-12);\n }\n\n .SubNav__sub-menu.SubNav__sub-menu--dropdown .SubNav__link {\n padding: var(--base-size-12);\n }\n\n / Active link pill styling /\n .SubNav__links-overlay .SubNav__link[aria-current]:not([aria-current='false']) {\n background-color: var(--brand-SubNav-color-link-bgColor);\n line-height: 1.1em;\n }\n\n / Firefox optical alignment fix /\n @supports (-moz-appearance: none) {\n .SubNav__links-overlay\n .SubNav__link--has-sub-menu\n .SubNav__link[aria-current]:not([aria-current='false'])\n .SubNav__link-label {\n top: 0;\n }\n }\n\n .SubNav__links-overlay .SubNav__link--has-active-sub-menu .SubNav__link[aria-current]:not([aria-current='false']) {\n padding-inline-end: var(--base-size-4);\n }\n\n .SubNav__sub-menu.SubNav__sub-menu--dropdown .SubNav__link[aria-current]:not([aria-current='false']) {\n background-color: transparent;\n border-radius: var(--brand-borderRadius-medium);\n padding: var(--base-size-4) var(--base-size-8) var(--base-size-4) var(--base-size-12);\n top: unset;\n }\n\n .SubNav__sub-menu.SubNav__sub-menu--dropdown .SubNav__link:hover {\n background-color: var(--brand-SubNav-color-link-bgColor);\n border-radius: var(--brand-borderRadius-medium);\n }\n\n .SubNav__sub-menu-icon {\n display: inline-block !important;\n fill: var(--brand-color-text-muted);\n transition: transform var(--brand-animation-duration-fast);\n }\n\n .SubNav__link--has-sub-menu:not(.SubNav__link--has-active-sub-menu) .SubNav__sub-menu-icon {\n position: relative;\n top: calc(-1 var(--brand-borderWidth-thin));\n }\n\n .SubNav__sub-menu--anchor {\n padding-inline: var(--base-size-32);\n }\n\n .SubNav__overflow-menu .SubNav__link {\n display: block;\n width: 100%;\n min-height: var(--brand-SubNav-height-overflowMenuItemMin);\n padding: var(--base-size-8) var(--base-size-12);\n color: var(--brand-SubNav-overflowMenu-fgColor-rest);\n white-space: normal;\n overflow-wrap: anywhere;\n border-radius: var(--brand-borderRadius-medium);\n background-color: var(--brand-SubNav-overflowMenu-bgColor-rest);\n }\n\n .SubNav__overflow-menu .SubNav__link .SubNav__link-label {\n color: inherit;\n font-weight: var(--base-text-weight-normal);\n line-height: var(--brand-text-lineHeight-200);\n }\n\n .SubNav__overflow-menu .SubNav__link:hover,\n .SubNav__overflow-menu .SubNav__link:focus,\n .SubNav__overflow-menu .SubNav__link:focus-visible,\n .SubNav__overflow-menu .SubNav__link[aria-current]:not([aria-current='false']) {\n color: var(--brand-SubNav-overflowMenu-fgColor-hover);\n background-color: var(--brand-SubNav-overflowMenu-bgColor-hover);\n }\n\n .SubNav__overflow-menu .SubNav__link:focus-visible {\n box-shadow: inset 0 0 0 var(--brand-borderWidth-thick) var(--brand-color-focus);\n outline: none;\n }\n\n .SubNav__overflow-menu .SubNav__link--has-sub-menu {\n display: block;\n background: transparent;\n padding: 0;\n }\n\n .SubNav__overflow-menu .SubNav__link--has-sub-menu::after {\n content: none;\n }\n\n .SubNav__overflow-menu .SubNav__sub-menu--dropdown {\n position: static;\n width: auto;\n margin: 0;\n padding: 0;\n padding-inline-start: var(--base-size-16);\n border: 0;\n background-color: var(--brand-SubNav-overflowMenu-bgColor-rest);\n visibility: visible;\n opacity: 1;\n transform: none;\n }\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .SubNav,\n .SubNav::before,\n .SubNav::after,\n .SubNav {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}

package/esm/SubNav/useAnchorMenu.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export declare function useAnchorMenu(): {
+    anchorMenuRef: import("react").RefObject<HTMLDivElement | null>;
+    portalRef: import("react").RefObject<HTMLDivElement | null>;
+};
+//# sourceMappingURL=useAnchorMenu.d.ts.map

package/esm/SubNav/useAnchorMenu.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"useAnchorMenu.d.ts","sourceRoot":"","sources":["../../src/SubNav/useAnchorMenu.ts"],"names":[],"mappings":"AAIA,wBAAgB,aAAa;;;EAmC5B"}

package/esm/SubNav/useAnchorMenu.js ADDED Viewed

@@ -0,0 +1,23 @@
+import e from "./SubNav.module.js";
+import { useEffect as t, useRef as n } from "react";
+//#region src/SubNav/useAnchorMenu.ts
+function r() {
+	let r = n(null), i = n(null);
+	return t(() => {
+		let t = r.current, n = new IntersectionObserver((t) => {
+			if (t.length === 0) return;
+			let n = t[t.length - 1];
+			n.target.classList.toggle(e["SubNav__anchor-menu-outer-container--stuck"], n.boundingClientRect.top < 0 && n.intersectionRatio < 1);
+		}, { threshold: [1] });
+		return t && n.observe(t), () => {
+			t && n.unobserve(t);
+		};
+	}, []), {
+		anchorMenuRef: r,
+		portalRef: i
+	};
+}
+//#endregion
+export { r as useAnchorMenu };
+//# sourceMappingURL=useAnchorMenu.js.map

package/esm/SubNav/useAnchorMenu.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useAnchorMenu.js","names":[],"sources":["../../src/SubNav/useAnchorMenu.ts"],"sourcesContent":["import {useEffect, useRef} from 'react'\nimport styles from './SubNav.module.css'\n\n// Viewport-agnostic logic for the SubNavs anchor nav features\nexport function useAnchorMenu() {\n const anchorMenuRef = useRef<HTMLDivElement>(null)\n const portalRef = useRef<HTMLDivElement>(null)\n\n // Shows the anchor links once the row sticks to the top.\n useEffect(() => {\n const menuContainer = anchorMenuRef.current\n\n const observer = new IntersectionObserver(\n // Uses the latest entry so stale updates don't show the menu too early.\n entries => {\n if (entries.length === 0) return\n const entry = entries[entries.length - 1]\n\n entry.target.classList.toggle(\n styles['SubNav__anchor-menu-outer-container--stuck'],\n entry.boundingClientRect.top < 0 && entry.intersectionRatio < 1,\n )\n },\n {threshold: [1]},\n )\n\n if (menuContainer) {\n observer.observe(menuContainer)\n }\n\n // Stops watching this row when the nav goes away.\n return () => {\n if (menuContainer) {\n observer.unobserve(menuContainer)\n }\n }\n }, [])\n\n return {anchorMenuRef, portalRef}\n}\n"],"mappings":";;;AAIA,SAAgB,IAAgB;CAC9B,IAAM,IAAgB,EAAuB,IAAI,GAC3C,IAAY,EAAuB,IAAI;CAgC7C,OA7BA,QAAgB;EACd,IAAM,IAAgB,EAAc,SAE9B,IAAW,IAAI,sBAEnB,MAAW;GACT,IAAI,EAAQ,WAAW,GAAG;GAC1B,IAAM,IAAQ,EAAQ,EAAQ,SAAS;GAEvC,EAAM,OAAO,UAAU,OACrB,EAAO,+CACP,EAAM,mBAAmB,MAAM,KAAK,EAAM,oBAAoB,CAChE;EACF,GACA,EAAC,WAAW,CAAC,CAAC,EAAC,CACjB;EAOA,OALI,KACF,EAAS,QAAQ,CAAa,SAInB;GACX,AAAI,KACF,EAAS,UAAU,CAAa;EAEpC;CACF,GAAG,CAAC,CAAC,GAEE;EAAC;EAAe;CAAS;AAClC"}

package/esm/SubNav/useNarrowMenu.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export declare function useNarrowMenu(isLarge: boolean | undefined): {
+    navRef: import("react").RefObject<HTMLElement | null>;
+    narrowMenuRef: import("react").RefObject<HTMLDivElement | null>;
+    isNarrowMenuOpen: boolean;
+    closeNarrowMenu: () => void;
+    toggleNarrowMenu: () => void;
+};
+//# sourceMappingURL=useNarrowMenu.d.ts.map

package/esm/SubNav/useNarrowMenu.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"useNarrowMenu.d.ts","sourceRoot":"","sources":["../../src/SubNav/useNarrowMenu.ts"],"names":[],"mappings":"AAMA,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS;;;;;;EAyDzD"}

package/esm/SubNav/useNarrowMenu.js ADDED Viewed

@@ -0,0 +1,41 @@
+import { useOnClickOutside as e } from "../hooks/useOnClickOutside.js";
+import { useKeyboardEscape as t } from "../hooks/useKeyboardEscape.js";
+import { useFocusTrap as n } from "../hooks/useFocusTrap.js";
+import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+//#region src/SubNav/useNarrowMenu.ts
+function s(s) {
+	let c = a(null), l = a(null), [u, d] = o(!1), f = !s && u;
+	n({
+		containerRef: l,
+		disabled: !f
+	});
+	let p = r(() => {
+		s || d(!1);
+	}, [s]), m = r(() => {
+		s || d((e) => !e);
+	}, [s]);
+	return i(() => {
+		s && d(!1);
+	}, [s]), e(l, p), t(p), i(() => {
+		if (!f) return;
+		let e = c.current, t = document.body.style.overflow, n = () => {
+			if (e) {
+				let t = e.getBoundingClientRect().top;
+				e.style.setProperty("--subnav-available-height", `${window.innerHeight - t}px`);
+			}
+		};
+		return document.body.style.overflow = "hidden", n(), window.addEventListener("resize", n), () => {
+			document.body.style.overflow = t, window.removeEventListener("resize", n), e?.style.removeProperty("--subnav-available-height");
+		};
+	}, [f]), {
+		navRef: c,
+		narrowMenuRef: l,
+		isNarrowMenuOpen: f,
+		closeNarrowMenu: p,
+		toggleNarrowMenu: m
+	};
+}
+//#endregion
+export { s as useNarrowMenu };
+//# sourceMappingURL=useNarrowMenu.js.map

package/esm/SubNav/useNarrowMenu.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useNarrowMenu.js","names":[],"sources":["../../src/SubNav/useNarrowMenu.ts"],"sourcesContent":["import {useCallback, useEffect, useRef, useState} from 'react'\nimport {useFocusTrap} from '../hooks/useFocusTrap'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\n\n// Uses a more traditional burger+takeover menu for narrower viewports.\nexport function useNarrowMenu(isLarge: boolean | undefined) {\n const navRef = useRef<HTMLElement>(null)\n const narrowMenuRef = useRef<HTMLDivElement>(null)\n const [isOpen, setIsOpen] = useState(false)\n const isNarrowMenuOpen = !isLarge && isOpen\n\n // Keeps keyboard focus inside the menu while it's open.\n useFocusTrap({containerRef: narrowMenuRef, disabled: !isNarrowMenuOpen})\n\n // Closing the narrow menu shouldn't affect the wide one.\n const closeNarrowMenu = useCallback(() => {\n if (isLarge) return\n setIsOpen(false)\n }, [isLarge])\n\n // Only toggles this menu on narrow screens.\n const toggleNarrowMenu = useCallback(() => {\n if (isLarge) return\n setIsOpen(previous => !previous)\n }, [isLarge])\n\n // Closes the narrow menu when we switch to a wide viewport.\n useEffect(() => {\n if (isLarge) setIsOpen(false)\n }, [isLarge])\n\n useOnClickOutside(narrowMenuRef, closeNarrowMenu)\n useKeyboardEscape(closeNarrowMenu)\n\n // Locks page scrolling and gives the open menu the space it needs.\n useEffect(() => {\n if (!isNarrowMenuOpen) return\n const navElement = navRef.current\n const originalOverflow = document.body.style.overflow\n\n // Keeps the menu within the space below the nav.\n const updateAvailableHeight = () => {\n if (navElement) {\n const navTop = navElement.getBoundingClientRect().top\n navElement.style.setProperty('--subnav-available-height', `${window.innerHeight - navTop}px`)\n }\n }\n\n document.body.style.overflow = 'hidden'\n updateAvailableHeight()\n // eslint-disable-next-line github/prefer-observers\n window.addEventListener('resize', updateAvailableHeight)\n\n // Puts page scrolling back and removes the resize listener.\n return () => {\n document.body.style.overflow = originalOverflow\n window.removeEventListener('resize', updateAvailableHeight)\n navElement?.style.removeProperty('--subnav-available-height')\n }\n }, [isNarrowMenuOpen])\n\n return {navRef, narrowMenuRef, isNarrowMenuOpen, closeNarrowMenu, toggleNarrowMenu}\n}\n"],"mappings":";;;;;AAMA,SAAgB,EAAc,GAA8B;CAC1D,IAAM,IAAS,EAAoB,IAAI,GACjC,IAAgB,EAAuB,IAAI,GAC3C,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAmB,CAAC,KAAW;CAGrC,EAAa;EAAC,cAAc;EAAe,UAAU,CAAC;CAAgB,CAAC;CAGvE,IAAM,IAAkB,QAAkB;EACpC,KACJ,EAAU,EAAK;CACjB,GAAG,CAAC,CAAO,CAAC,GAGN,IAAmB,QAAkB;EACrC,KACJ,GAAU,MAAY,CAAC,CAAQ;CACjC,GAAG,CAAC,CAAO,CAAC;CAqCZ,OAlCA,QAAgB;EACd,AAAI,KAAS,EAAU,EAAK;CAC9B,GAAG,CAAC,CAAO,CAAC,GAEZ,EAAkB,GAAe,CAAe,GAChD,EAAkB,CAAe,GAGjC,QAAgB;EACd,IAAI,CAAC,GAAkB;EACvB,IAAM,IAAa,EAAO,SACpB,IAAmB,SAAS,KAAK,MAAM,UAGvC,UAA8B;GAClC,IAAI,GAAY;IACd,IAAM,IAAS,EAAW,sBAAsB,CAAC,CAAC;IAClD,EAAW,MAAM,YAAY,6BAA6B,GAAG,OAAO,cAAc,EAAO,GAAG;GAC9F;EACF;EAQA,OANA,SAAS,KAAK,MAAM,WAAW,UAC/B,EAAsB,GAEtB,OAAO,iBAAiB,UAAU,CAAqB,SAG1C;GAGX,AAFA,SAAS,KAAK,MAAM,WAAW,GAC/B,OAAO,oBAAoB,UAAU,CAAqB,GAC1D,GAAY,MAAM,eAAe,2BAA2B;EAC9D;CACF,GAAG,CAAC,CAAgB,CAAC,GAEd;EAAC;EAAQ;EAAe;EAAkB;EAAiB;CAAgB;AACpF"}

package/esm/SubNav/useWideMenu.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { type FocusEvent, type ReactNode } from 'react';
+export declare function useWideMenu(children: ReactNode, isLarge: boolean | undefined, linkCount: number): {
+    overlayRef: import("react").RefObject<HTMLUListElement | null>;
+    overflowRef: import("react").RefObject<HTMLLIElement | null>;
+    overflowButtonRef: import("react").RefObject<HTMLButtonElement | null>;
+    overflowMenuRef: import("react").RefObject<HTMLDivElement | null>;
+    visibleLinkCount: number;
+    hasOverflow: boolean;
+    isOverflowMenuOpen: boolean;
+    closeOverflowMenu: () => void;
+    handleOverflowMenuBlur: (event: FocusEvent<HTMLLIElement>) => void;
+};
+//# sourceMappingURL=useWideMenu.d.ts.map

package/esm/SubNav/useWideMenu.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"useWideMenu.d.ts","sourceRoot":"","sources":["../../src/SubNav/useWideMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,UAAU,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAO/F,wBAAgB,WAAW,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE,SAAS,EAAE,MAAM;;;;;;;;;oCA2DvD,UAAU,CAAC,aAAa,CAAC;EA8HjE"}