@primer/react-brand 0.75.0-rc.a3f7dbd6 → 0.75.0

package/esm/SubNav/SubNav.js.map

@@ -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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"}
+{"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":";;;;;;;;;;;;;;;;;;;;AAuCA,IAAM,IAAU;CACd,MAAM;CACN,IAAI,SAAS;EACX,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,UAAU;EACZ,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,UAAU;EACZ,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,SAAS;EACX,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,UAAU;EACZ,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAEa,IAAwB,CAAC,YAAY,QAAQ,GAOpD,IAAgB,EAA6C,KAAA,CAAS,GAE/D,UAAyB;CACpC,IAAM,IAAU,EAAW,CAAa;CACxC,IAAI,CAAC,GACH,MAAU,MAAM,uDAAuD;CAEzE,OAAO;AACT;AAEA,SAAS,EAAe,EAAC,eAAwC;CAC/D,IAAM,IAA4B,EAAM,OAAuB,IAAI,GAC7D,IAAuB,EAAM,OAAuB,IAAI,GAExD,IAAQ,SACL,EACL,WAAW,EACb,IACA,CAAC,CACH;CAuBA,OArBA,QAAgB;EACd,IAAM,IAAgB,EAA0B,SAE1C,IAAW,IAAI,sBAClB,CAAC,OAAW;GACX,EAAM,OAAO,UAAU,OAAO,EAAO,+CAA+C,EAAM,oBAAoB,CAAC;EACjH,GACA,EAAC,WAAW,CAAC,CAAC,EAAC,CACjB;EAMA,OAJI,KACF,EAAS,QAAQ,CAAa,SAGnB;GACX,AAAI,KACF,EAAS,UAAU,CAAa;EAEpC;CACF,GAAG,CAAC,CAAC,GAGH,kBAAC,EAAc,UAAf;EAA+B;YAA/B,CACG,GAED,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAwC,KAAK;aAClE,kBAAC,OAAD;IAAK,WAAW,EAAK,EAAO,gCAAgC;IAAG,KAAK;GAAuB,CAAA;EACxF,CAAA,CACiB;;AAE5B;AAeA,IAAM,IAAa,EACjB,GACG,EAAC,OAAI,aAAU,cAAW,eAAe,GAAQ,cAAW,gBAAY,MAAQ;CAC/E,IAAM,IAAU,EAAuC,CAAgC,GACjF,IAAe,EAAM,OAAuB,IAAI,GAChD,IAAS,EAAM,OAAoB,IAAI,GACvC,IAAa,EAAM,OAAyB,IAAI,GAChD,IAAkB,EAA0B,IAAI,GAChD,CAAC,GAAgB,KAAqB,EAAS,EAAK,GACpD,IAAqB,EAAM,GAC3B,CAAC,IAAgB,MAAqB,EAAS,EAAK,GAEpD,EAAC,eAAW,EAAc;CAEhC,EAAa;EAAC,cAAc;EAAc,UAAU,CAAC;CAAc,CAAC;CAEpE,IAAM,IAAc,EAAS,QAAQ,CAAQ,GAEvC,IAAoB,QAAkB;EACtC,KACJ,EAAkB,EAAK;CACzB,GAAG,CAAC,CAAO,CAAC,GAEN,IAAmB,QAAkB;EACrC,KACJ,GAAkB,MAAQ,CAAC,CAAI;CACjC,GAAG,CAAC,CAAO,CAAC;CAKZ,AAHA,EAAkB,GAAc,CAAiB,GACjD,EAAkB,CAAiB,GAEnC,QAAgB;EACd,IAAM,IAAa,EAAO,SAEpB,UAA8B;GAClC,IAAI,GAAY;IACd,IAAM,IAAS,EAAW,sBAAsB,CAAC,CAAC;IAClD,EAAW,MAAM,YAAY,6BAA6B,GAAG,OAAO,cAAc,EAAO,GAAG;GAC9F;EACF;EAeA,OAbI,KAAkB,CAAC,KACrB,SAAS,KAAK,MAAM,WAAW,UAC/B,EAAsB,GAEtB,OAAO,iBAAiB,UAAU,CAAqB,MAEvD,SAAS,KAAK,MAAM,WAAW,QAE3B,KACF,EAAW,MAAM,eAAe,2BAA2B,UAIlD;GAIX,AAHA,SAAS,KAAK,MAAM,WAAW,QAC/B,OAAO,oBAAoB,UAAU,CAAqB,GAEtD,KACF,EAAW,MAAM,eAAe,2BAA2B;EAE/D;CACF,GAAG,CAAC,GAAgB,CAAO,CAAC;CAE5B,IAAM,IAAa,EAAY,MAAK,MAC3B,EAA8B,CAAK,KAAK,EAAQ,EAAM,MAAM,eACpE;CAED,QAAgB;EAEd,IAAM,IAAmB,EAAY,MAAK,MAAS;GACjD,IAAI,EAA8B,CAAK,KAAK,EAAM,SAAS,GAAU;IAEnE,IAAM,IADa,EAAS,QAAQ,EAAM,MAAM,QAC3B,CAAA,CAAW;IAChC,IACE,EAA6B,CAAY,KACzC,EAAa,SAAS,KACtB,EAAa,MAAM,YAAY,UAE/B,OAAO;GAEX;GACA,OAAO;EACT,CAAC;EACD,GAAkB,CAAgB;CACpC,GAAG,CAAC,CAAW,CAAC;CAEhB,IAAM,EACJ,SAAS,GACT,YAAY,GACZ,OAAO,IACP,QAAQ,OACN,EAAY,QAEZ,GAMA,MACG;EACH,IAAI,EAAe,CAAK,OAClB,EAAM,SAAS,GACjB,EAAI,UAAU;OACT,IAAI,EAAM,SAAS,GACxB,EAAI,aAAa;OACZ,IAAI,EAAM,SAAS,GAAU;GAClC,IAAM,IAAY,GAEZ,CAAC,GAAM,KADM,EAAS,QAAQ,EAAU,MAAM,QAC5B,GAClB,IACJ,EAA6B,CAAO,KACpC,EAAQ,SAAS,KACjB,EAAQ,MAAM,YAAY;GAE5B,EAAI,MAAM,KACR,EAAM,aAAa,GAAW;IAC5B,GAAI,IAAkB,EAAC,UAAU,CAAC,CAAI,EAAC,IAAI,CAAC;IAC5C,SAAS,EAAU,MAAM,kBAAkB,IAAoB,EAAU,MAAM;GACjF,CAAC,CACH;EACF,OAAO,AAAI,EAAM,SAAS,MACxB,EAAI,SAAS;EAGjB,OAAO;CACT,GACA;EAAC,SAAS,KAAA;EAAW,YAAY,KAAA;EAAW,OAAO,CAAC;EAAG,QAAQ,KAAA;CAAS,CAC1E,GAEM,KAAqB,IAAa,EAAS,QAAQ,EAAW,MAAM,QAAQ,IAAI,CAAC,GACjF,IAAkB,GAAmB,IAGrC,IAAe,GAAmB,IAClC,KACJ,EAA6B,CAAY,KACzC,EAAa,SAAS,KACtB,EAAa,MAAM,YAAY,WAC3B,IACA,MAEA,IACJ,EAAoC,CAAe,KACnD,EAAgB,SAAS,KACzB,EAAQ,EAAgB,MAAM,iBAC1B,IAAoB,IAAkB,IAAkB,MAExD,KAAe,QAEjB,kBAAC,OAAD;EACE,WAAW,EAAK,EAAO,2BAA2B,KAAkB,EAAO,+BAA+B;YAE1G,kBAAC,QAAD;GACE,WAAW,EACT,EAAO,mCACP,CAAC,KAAqB,EAAO,sCAC/B;aAEA,kBAAC,UAAD;IACE,KAAK;IACL,WAAW,EAAO;IAClB,eAAa,EAAQ;IACrB,SAAS,IAAiB,IAAoB;IAC9C,iBAAe,IAAiB,SAAS;IACzC,iBAAe;IACf,cAAY,IAAkB,kCAAkC,MAAoB;cAPtF,CASG,KACC,kBAAC,GAAD;KAAM,IAAG;KAAO,MAAK;eAClB;IACG,CAAA,GAGN,EADD,IACE,IAEA,GAFD;KAAgB,WAAW,EAAO;KAAgC,MAAM;IAAK,CAEE,CAE3E;;EACJ,CAAA;CACH,CAAA,GAEP;EAAC;EAAiB;EAAmB;EAAkB;EAAoB;EAAgB;CAAiB,CAC9G;CAEA,OACE,kBAAC,OAAD;EACE,KAAK;EACL,WAAW,EACT,EAAO,mBACP,KAAmB,EAAO,4BAC1B,KAAmB,KAAsB,EAAO,6BAChD,MAAkB,EAAO,qCAC3B;YAEA,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;GACE,KAAK;GACD;GACJ,WAAW,EACT,EAAO,QACP,KAAkB,EAAO,iBACzB,KAAa,EAAO,uBACpB,KAAa,EAAO,uBACpB,CACF;GACA,eAAa,KAAU,EAAQ;aAE/B,kBAAC,OAAD;IAAK,KAAK;IAAc,WAAW,EAAO;cAA1C;KACE,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB;OACG,KAAgB,kBAAC,OAAD;QAAK,WAAW,EAAO;kBAA+B;OAAkB,CAAA;OAExF,KACC,kBAAC,OAAD;QACE,WAAW,EACT,EAAO,8BACP,EAAO,iCACP,KAAsB,EAAO,sCAC/B;kBAEC;OACE,CAAA;OAGN,CAAC,MAAY,CAAC,KAAmB,MAAuB;OAExD,MAAe;MACb;;KACJ,CAAC,KAAW,KAAmB,CAAC,KAAsB;KACtD,GAAa,SAAS,KACrB,kBAAC,MAAD;MACE,KAAK;MACL,IAAI;MACJ,WAAW,EACT,EAAO,0BACP,KAAkB,EAAO,8BAC3B;MACA,eAAa,EAAQ;gBAPvB,CASG,IACA,MAAe,kBAAC,MAAD;OAAI,WAAW,EAAO;iBAA8B;MAAgB,CAAA,CAClF;;IAEH;;EACF,CAAA,EACS,CAAA;CACb,CAAA;AAET,CACF,CACF,GAQM,KAAe,EAAC,SAAM,aAAU,cAAW,eAAe,GAAQ,GAAG,QAEvE,kBAAC,KAAD;CACQ;CACN,WAAW,EAAK,EAAO,iBAAoB,CAAS;CACpD,eAAa,EAAQ,WAAW;CAChC,GAAI;CAEH;AACA,CAAA,GAUD,KAAkB,EAAC,SAAM,aAAU,cAAW,eAAe,GAAQ,GAAG,QAE1E,kBAAC,KAAD;CACQ;CACN,WAAW,EAAK,EAAO,iBAAoB,EAAO,cAAiB,EAAO,oBAAuB,CAAS;CAC1G,eAAa,EAAQ,WAAW;CAChC,GAAI;CAEH;AACA,CAAA,GAYD,IAAsB,GAExB,EAAC,aAAU,SAAM,gBAAgB,GAAa,eAAe,GAAQ,cAAW,oBAAiB,YAAS,GAAG,KAC7G,MACG;CACH,IAAM,IAAY,EAAM,GAClB,EAAC,eAAW,EAAc,GAE1B,CAAC,GAAY,KAAiB,EAAS,EAAK,GAC5C,IAAM,EAAuB,CAAyC,GACtE,IAAqB,EAAuB,IAAI;CAEtD,EAAiB,IAAM,MAA2B;EAChD,AAAK,KACH,EAAc,EAAK;CAEvB,CAAC;CAED,IAAM,IAAS,QAAkB,EAAc,EAAI,GAAG,CAAC,CAAC,GAClD,IAAW,QAAkB,EAAc,EAAK,GAAG,CAAC,CAAC,GACrD,IAAiB,QAAkB,GAAc,MAAQ,CAAC,CAAI,GAAG,CAAC,CAAC,GACnE,IAAgB,EAAQ,KAAgB,MAAgB;CAI9D,AAFA,EAAkB,CAAQ,GAE1B,QAAgB;EACd,AAAI,EAAmB,WAMrB,EAAmB,QAAQ,gBAAgB,SAAS,KAAW,CAAC,CAAU;CAE9E,GAAG,CAAC,GAAS,CAAU,CAAC;CAExB,IAAM,CAAC,GAAO,KAAmB;CAEjC,OACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,+BACP,KAAc,EAAO,2BACrB,KAAiB,EAAO,oCAC1B;EACA,eAAa,KAAU,EAAQ;EAC1B;EACL,aAAa;EACb,YAAY;EAKZ,eAAe;EACf,cAAc;YAfhB;GAiBE,kBAAC,KAAD;IACQ;IACN,WAAW,EAAK,EAAO,cAAiB,KAAe,EAAO,yBAAyB,CAAS;IAChG,gBAAc;IACd,GAAI;cAEJ,kBAAC,GAAD;KAAM,IAAG;KAAO,MAAK;KAAM,QAAO;KAAS,WAAW,EAAO;eAC1D;IACG,CAAA;GACL,CAAA;GACF,KACC,kBAAC,UAAD;IACE,WAAW,EAAO;IAClB,SAAS;IACT,iBAAe,IAAa,SAAS;IACrC,iBAAe;IACf,cAAY,GAAG,GAAO,SAAS,CAAC,CAAC,KAAK,EAAE;cAExC,kBAAC,GAAD;KAAkB,WAAW,EAAO;KAA0B,MAAM;IAAK,CAAA;GACnE,CAAA;GAGV,kBAAC,OAAD;IAAK,IAAI;IAAW,WAAW,EAAO;IAA8B,KAAK;cACtE;GACE,CAAA;EACF;;AAET,CACF,GAEM,IAAW,GAA+D,GAAO,MAAQ;CAC7F,IAAM,CAAC,GAAU,KAAe,EAAS,EAAK,GACxC,IAAc,EAAS,QAAQ,EAAM,QAAQ,GAE7C,IAAa,EAAY,MAAK,MAAS;EAC3C,IAAI,EAAe,CAAK,GACtB,OAAO,EAAM,SAAS;CAE1B,CAAC;CAoBD,IAlBA,QAAgB;EACd,IAAI,GAAY;EAChB,IAAM,IAAW,EAAM,KAAK,QAAQ,KAAK,EAAE,GACrC,IAAS,SAAS,eAAe,CAAQ;EAC/C,IAAI,CAAC,GAAQ;EASb,IAAM,IAAW,IAAI,sBAJ2C,CAAC,OAAW;GAC1E,EAAY,EAAM,cAAc;EAClC,GAEoE;GAN5C,WAAW;GAAG,MAAM;GAAM,YAAY;EAMM,CAAc;EAElF,OADA,EAAS,QAAQ,CAAM,SACV,EAAS,WAAW;CACnC,GAAG,CAAC,GAAY,EAAM,IAAI,CAAC,GAEvB,GAAY;EACd,IAAM,IAAyB,EAAY,MAAK,MACvC,EAA6B,CAAK,KAAK,EAAM,SAAS,KAAe,EAAM,MAAM,YAAY,QACrG;EAED,OACE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;GACO;GACL,GAAI;GACJ,iBAAiB,IAAyB,WAAW,KAAA;EACtD,CAAA,EACC,CAAA;CAER;CAEA,IAAM,EAAC,aAAU,SAAM,gBAAgB,GAAa,eAAe,GAAQ,YAAS,cAAW,GAAG,MAAQ;CAE1G,OACE,kBAAC,MAAD,EAAA,UACE,kBAAC,KAAD;EACQ;EACN,WAAW,EACT,EAAO,cACP,KAAe,EAAO,yBACtB,KAAY,EAAO,6BACnB,CACF;EACA,gBAAc;EACd,eAAa,KAAU,EAAQ;EAC1B;EACL,GAAI;YAEJ,kBAAC,GAAD;GAAM,IAAG;GAAO,MAAK;GAAM,QAAO;GAAS,WAAW,EAAO;GAC1D;EACG,CAAA;CACL,CAAA,EACD,CAAA;AAER,CAAC;AAOD,SAAS,EAAY,EAAC,aAAU,cAAW,aAAU,YAAY,GAAG,KAAsB;CACxF,IAAM,IAAU,EAAM,WAAW,CAAa,GACxC,IAAS,EAAoB,IAAI,GAEjC,EAAC,eAAW,EAAc;CAoD9B,OA9CF,QAAgB;EACd,IAAM,KAAe,MAAkB;GACjC,EAAO,WAAW,CAAC,EAAO,QAAQ,SAAS,EAAE,MAAc,KAIzD,EAAE,kBAAkB,qBACxB,EAAE,gBAAgB;EAEtB;EAMA,OAJI,MAAY,YACd,SAAS,iBAAiB,SAAS,GAAa,EAAI,SAGzC;GACX,SAAS,oBAAoB,SAAS,GAAa,EAAI;EACzD;CACF,GAAG,CAAC,CAAO,CAAC,GAER,MAAY,YAAY,GAAS,UAAU,UACtC,EACL,kBAAC,OAAD;EACE,KAAK;EACL,WAAW,EAAK,EAAO,qBAAqB,EAAO,6BAA6B,CAAS;EACzF,MAAK;EACL,cAAW;YAEX,kBAAC,MAAD;GAAI,WAAW,EAAO;GAA0B,GAAI;aACjD,EAAM,SAAS,IAAI,IAAU,MACxB,EAA8B,CAAK,KAAK,EAAM,SAAS,IAClD,EAAM,aAAa,GAAO,EAC/B,UAAS,MAAK;IACZ,EAAM,MAAM,UAAU,CAAC;GACzB,EACF,CAAC,IAEI,IACR;EACC,CAAA;CACD,CAAA,GACL,EAAQ,UAAU,OACpB,IAKE,kBAHU,IAAU,IAAgB,EAAM,UAG1C;EAAK,GAAK,IAAU,EAAC,WAAW,QAAO,IAAI,CAAC;YAC1C,kBAAC,MAAD;GAAI,WAAW,EAAK,EAAO,qBAAqB,EAAO,qBAAqB,MAAY,CAAS;GAAG,GAAI;GACrG;EACC,CAAA;CACD,CAAA;AAGX;AAiBA,SAAS,EAAW,EAAC,aAAU,SAAM,aAAU,WAAW,UAAO,SAAS,GAAG,KAA0B;CACrG,OACE,kBAAC,GAAD;EACE,WAAW,EAAO;EAClB,IAAG;EACG;EACG;EACT,eAAa,EAAQ;EACf;EACN,GAAI;EAEH;CACK,CAAA;AAEZ;AAMA,IAAa,IAAS,OAAO,OAAO,GAAY;CAC9C,SAAS;CACT,YAAY;CACZ,MAAM;CACN,QAAQ;CACR,SAAS;CACT;AACF,CAAC"}

package/esm/SubNav/SubNav.module.js

@@ -1,10 +1,11 @@
-import './SubNav.module-D-gLr0JO.css';var e = {
-	SubNav__container: "Primer_Brand__SubNav-module__SubNav__container___e4u9B",
+import './SubNav.module-D-gLr0JO.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",
-	SubNav: "Primer_Brand__SubNav-module__SubNav___txUks",
-	SubNav__heading: "Primer_Brand__SubNav-module__SubNav__heading___d8v1r",
-	SubNav__subHeading: "Primer_Brand__SubNav-module__SubNav__subHeading___cmfhs",
-	SubNav__link: "Primer_Brand__SubNav-module__SubNav__link___rY_yE",
+	SubNav: t,
+	SubNav__heading: n,
+	SubNav__subHeading: r,
+	SubNav__link: i,
 	"SubNav__link-label": "Primer_Brand__SubNav-module__SubNav__link-label___NVLOG",
 	"SubNav--header-container-outer": "Primer_Brand__SubNav-module__SubNav--header-container-outer___TODOB",
 	"SubNav__heading-container": "Primer_Brand__SubNav-module__SubNav__heading-container___09GuE",
@@ -36,7 +37,7 @@ import './SubNav.module-D-gLr0JO.css';var e = {
 	"SubNav__overlay-toggle-content": "Primer_Brand__SubNav-module__SubNav__overlay-toggle-content___r7g9W",
 	"SubNav__overlay-toggle-label": "Primer_Brand__SubNav-module__SubNav__overlay-toggle-label___FRenU",
 	"SubNav__link--has-sub-menu": "Primer_Brand__SubNav-module__SubNav__link--has-sub-menu___Sy_3p",
-	SubNav__action: "Primer_Brand__SubNav-module__SubNav__action___Yrrhg",
+	SubNav__action: a,
 	"SubNav__sub-menu": "Primer_Brand__SubNav-module__SubNav__sub-menu___b8DSd",
 	"SubNav__sub-menu--dropdown": "Primer_Brand__SubNav-module__SubNav__sub-menu--dropdown___uiVDU",
 	"SubNav__overlay-toggle-icon": "Primer_Brand__SubNav-module__SubNav__overlay-toggle-icon___Fo5xs",
@@ -47,6 +48,6 @@ import './SubNav.module-D-gLr0JO.css';var e = {
 	"fade-in-down": "Primer_Brand__SubNav-module__fade-in-down___UKi30"
 };
 //#endregion
-export { e as default };
+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 };
 
 //# sourceMappingURL=SubNav.module.js.map

package/esm/SubNav/useContainsFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useContainsFocus.js","names":[],"sources":["../../src/SubNav/useContainsFocus.ts"],"sourcesContent":["import {useCallback, useEffect, useState, type RefObject} from 'react'\n\n/**\n * Determine if a child element of the provided ref is currently focussed.\n * @param containerRef The ref to the container element.\n * @param onFocusChange The callback to be called when the focus state changes.\n * @type T The type of the container element.\n * @returns The ref to be applied to the container element.\n */\nexport const useContainsFocus = <T extends HTMLElement>(\n  containerRef?: RefObject<T | null>,\n  onFocusChange?: (isFocussed: boolean) => void,\n) => {\n  const [isChildFocused, setIsChildFocused] = useState(false)\n\n  const updateState = useCallback(\n    (isFocused: boolean) => {\n      if (isFocused !== isChildFocused) {\n        setIsChildFocused(isFocused)\n        onFocusChange?.(isFocused)\n      }\n    },\n    [isChildFocused, onFocusChange],\n  )\n\n  useEffect(() => {\n    if (!containerRef) {\n      return\n    }\n\n    const handleFocusIn = () => {\n      updateState(true)\n    }\n\n    const handleFocusOut = (event: FocusEvent) => {\n      if (containerRef.current && !containerRef.current.contains(event.relatedTarget as Node)) {\n        updateState(false)\n      }\n    }\n\n    const container = containerRef.current\n\n    if (container) {\n      container.addEventListener('focusin', handleFocusIn, true)\n      container.addEventListener('focusout', handleFocusOut, true)\n\n      return () => {\n        container.removeEventListener('focusin', handleFocusIn, true)\n        container.removeEventListener('focusout', handleFocusOut, true)\n      }\n    }\n  }, [updateState, containerRef])\n}\n"],"mappings":";;AASA,IAAa,KACX,GACA,MACG;CACH,IAAM,CAAC,GAAgB,KAAqB,EAAS,GAAM,EAErD,IAAc,GACjB,MAAuB;AACtB,EAAI,MAAc,MAChB,EAAkB,EAAU,EAC5B,IAAgB,EAAU;IAG9B,CAAC,GAAgB,EAAc,CAChC;AAED,SAAgB;AACd,MAAI,CAAC,EACH;EAGF,IAAM,UAAsB;AAC1B,KAAY,GAAK;KAGb,KAAkB,MAAsB;AAC5C,GAAI,EAAa,WAAW,CAAC,EAAa,QAAQ,SAAS,EAAM,cAAsB,IACrF,EAAY,GAAM;KAIhB,IAAY,EAAa;AAE/B,MAAI,EAIF,QAHA,EAAU,iBAAiB,WAAW,GAAe,GAAK,EAC1D,EAAU,iBAAiB,YAAY,GAAgB,GAAK,QAE/C;AAEX,GADA,EAAU,oBAAoB,WAAW,GAAe,GAAK,EAC7D,EAAU,oBAAoB,YAAY,GAAgB,GAAK;;IAGlE,CAAC,GAAa,EAAa,CAAC"}
+{"version":3,"file":"useContainsFocus.js","names":[],"sources":["../../src/SubNav/useContainsFocus.ts"],"sourcesContent":["import {useCallback, useEffect, useState, type RefObject} from 'react'\n\n/**\n * Determine if a child element of the provided ref is currently focussed.\n * @param containerRef The ref to the container element.\n * @param onFocusChange The callback to be called when the focus state changes.\n * @type T The type of the container element.\n * @returns The ref to be applied to the container element.\n */\nexport const useContainsFocus = <T extends HTMLElement>(\n  containerRef?: RefObject<T | null>,\n  onFocusChange?: (isFocussed: boolean) => void,\n) => {\n  const [isChildFocused, setIsChildFocused] = useState(false)\n\n  const updateState = useCallback(\n    (isFocused: boolean) => {\n      if (isFocused !== isChildFocused) {\n        setIsChildFocused(isFocused)\n        onFocusChange?.(isFocused)\n      }\n    },\n    [isChildFocused, onFocusChange],\n  )\n\n  useEffect(() => {\n    if (!containerRef) {\n      return\n    }\n\n    const handleFocusIn = () => {\n      updateState(true)\n    }\n\n    const handleFocusOut = (event: FocusEvent) => {\n      if (containerRef.current && !containerRef.current.contains(event.relatedTarget as Node)) {\n        updateState(false)\n      }\n    }\n\n    const container = containerRef.current\n\n    if (container) {\n      container.addEventListener('focusin', handleFocusIn, true)\n      container.addEventListener('focusout', handleFocusOut, true)\n\n      return () => {\n        container.removeEventListener('focusin', handleFocusIn, true)\n        container.removeEventListener('focusout', handleFocusOut, true)\n      }\n    }\n  }, [updateState, containerRef])\n}\n"],"mappings":";;AASA,IAAa,KACX,GACA,MACG;CACH,IAAM,CAAC,GAAgB,KAAqB,EAAS,EAAK,GAEpD,IAAc,GACjB,MAAuB;EACtB,AAAI,MAAc,MAChB,EAAkB,CAAS,GAC3B,IAAgB,CAAS;CAE7B,GACA,CAAC,GAAgB,CAAa,CAChC;CAEA,QAAgB;EACd,IAAI,CAAC,GACH;EAGF,IAAM,UAAsB;GAC1B,EAAY,EAAI;EAClB,GAEM,KAAkB,MAAsB;GAC5C,AAAI,EAAa,WAAW,CAAC,EAAa,QAAQ,SAAS,EAAM,aAAqB,KACpF,EAAY,EAAK;EAErB,GAEM,IAAY,EAAa;EAE/B,IAAI,GAIF,OAHA,EAAU,iBAAiB,WAAW,GAAe,EAAI,GACzD,EAAU,iBAAiB,YAAY,GAAgB,EAAI,SAE9C;GAEX,AADA,EAAU,oBAAoB,WAAW,GAAe,EAAI,GAC5D,EAAU,oBAAoB,YAAY,GAAgB,EAAI;EAChE;CAEJ,GAAG,CAAC,GAAa,CAAY,CAAC;AAChC"}

package/esm/SubdomainNavBar/NavigationVisbilityObserver.d.ts

@@ -1,6 +1,8 @@
 import React, { PropsWithChildren } from 'react';
 import { BaseProps } from '../component-helpers';
-type NavigationVisibilityObserverProps = PropsWithChildren<BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>>;
+type NavigationVisibilityObserverProps = PropsWithChildren<BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement> & {
+    overflowMenuLabel: string;
+}>;
 export declare const NavigationVisbilityObserver: React.ForwardRefExoticComponent<Omit<NavigationVisibilityObserverProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
 export {};
 //# sourceMappingURL=NavigationVisbilityObserver.d.ts.map

package/esm/SubdomainNavBar/NavigationVisbilityObserver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationVisbilityObserver.d.ts","sourceRoot":"","sources":["../../src/SubdomainNavBar/NavigationVisbilityObserver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA4C,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAIzF,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAW9C,KAAK,iCAAiC,GAAG,iBAAiB,CACxD,SAAS,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CACrE,CAAA;AAED,eAAO,MAAM,2BAA2B,yHAkCvC,CAAA"}
+{"version":3,"file":"NavigationVisbilityObserver.d.ts","sourceRoot":"","sources":["../../src/SubdomainNavBar/NavigationVisbilityObserver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuD,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAIpG,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAa9C,KAAK,iCAAiC,GAAG,iBAAiB,CACxD,SAAS,CAAC,gBAAgB,CAAC,GACzB,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG;IACvC,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CACJ,CAAA;AAED,eAAO,MAAM,2BAA2B,yHAmIvC,CAAA"}

package/esm/SubdomainNavBar/NavigationVisbilityObserver.js

@@ -1,73 +1,126 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useProvidedRefOrCreate as t } from "../hooks/useRef.js";
-import { useOnClickOutside as n } from "../hooks/useOnClickOutside.js";
-import { useKeyboardEscape as r } from "../hooks/useKeyboardEscape.js";
-import { ChevronDownIcon as i } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
-import { useWindowSize as a } from "../hooks/useWindowSize.js";
-import { useVisibilityObserver as o } from "./useVisibilityObserver.js";
-import s from "./SubdomainNavBar.module.js";
-import c, { forwardRef as l, useCallback as u, useRef as d, useState as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useAnchoredPosition as n } from "../hooks/useAnchoredPosition.js";
+import { useOnClickOutside as r } from "../hooks/useOnClickOutside.js";
+import { useKeyboardEscape as i } from "../hooks/useKeyboardEscape.js";
+import { TriangleDownIcon as a } from "../node_modules/@primer/octicons-react/dist/icons/TriangleDownIcon.js";
+import { TriangleUpIcon as o } from "../node_modules/@primer/octicons-react/dist/icons/TriangleUpIcon.js";
+import { useWindowSize as s } from "../hooks/useWindowSize.js";
+import { useVisibilityObserver as c } from "./useVisibilityObserver.js";
+import l from "./SubdomainNavBar.module.js";
+import { SubdomainNavBarLinkContext as u } from "./SubdomainNavBarLinkContext.js";
+import d, { forwardRef as f, useCallback as p, useEffect as m, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/SubdomainNavBar/NavigationVisbilityObserver.tsx
-var h = l(({ children: n, className: r, ...i }, l) => {
-	let u = t(l), [d] = o(u, n), { isMedium: f } = a(), h = Object.values(d).includes(!1);
-	return /* @__PURE__ */ m("ul", {
-		className: e(s["SubdomainNavBar-primary-nav-list"], r),
-		ref: u,
-		...i,
-		children: [c.Children.map(n, (t) => {
-			if (c.isValidElement(t)) {
-				let n = t.props["data-navitemid"];
-				if (!n) return t;
-				let r = d[n];
-				return c.cloneElement(t, { className: e(t.props.className, f && r && s["SubdomainNavBar-primary-nav-list-item--visible"], f && r === !1 && s["SubdomainNavBar-primary-nav-list-item--invisible"]) });
-			}
-			return t;
-		}), h && /* @__PURE__ */ p(g, {
-			visibilityMap: d,
-			children: n
-		})]
-	});
-});
-function g({ children: t, className: a, visibilityMap: o }) {
-	let [l, h] = f(null), g = d(null);
-	n(g, () => y());
-	let _ = !!l, v = (e) => {
-		l ? y() : h(e.currentTarget);
-	}, y = u(() => {
-		h(null);
-	}, []);
-	return r(y), /* @__PURE__ */ m("li", {
-		className: e(s["SubdomainNavBar-primary-nav-list-item--overflow"], a),
-		ref: g,
-		children: [/* @__PURE__ */ m("button", {
-			"aria-expanded": _ ? "true" : "false",
-			"aria-controls": "more-navigation",
-			"aria-haspopup": "true",
-			onClick: v,
-			className: e(s["SubdomainNavBar-link"], s["SubdomainNavBar-more-link"]),
-			children: ["More", /* @__PURE__ */ p(i, {})]
-		}), /* @__PURE__ */ p("div", {
-			id: "more-navigation",
-			style: { display: _ ? "block" : "none" },
-			className: e(s["SubdomainNavBar-overflow-menu"]),
-			children: /* @__PURE__ */ p("ul", {
-				className: e(s["SubdomainNavBar-overflow-menu-list"]),
-				children: c.Children.map(t, (t) => {
-					if (c.isValidElement(t)) {
-						let n = t.props["data-navitemid"];
-						return !n || o[n] ? null : /* @__PURE__ */ p(c.Fragment, { children: c.cloneElement(t, {
-							onClick: y,
-							className: e(s["SubdomainNavBar-overflow-menu-item"], t.props.className)
-						}) });
+var y = f(({ children: a, className: o, overflowMenuLabel: f, ...y }, S) => {
+	let C = t(S), w = h(null), T = h(null), E = h(null), { isMedium: D } = s(), [O] = c(C, w, d.Children.toArray(a).map((e, t) => d.isValidElement(e) ? `${t}:${typeof e.props.children == "string" ? e.props.children : ""}` : `${t}:`).join("|"), !D), [k, A] = g(!1), j = Object.values(O).includes(!1), M = d.useId(), N = d.Children.toArray(a).findIndex((e, t) => d.isValidElement(e) ? O[t] === !1 : !1), P = N === -1 ? d.Children.count(a) * 2 : N * 2 - 1, F = d.Children.map(a, (t, n) => {
+		if (d.isValidElement(t)) {
+			let r = D && O[n] === !1;
+			return /* @__PURE__ */ _(u.Provider, {
+				value: { isOverflowed: r },
+				children: d.cloneElement(t, {
+					className: e(t.props.className, r && l["SubdomainNavBar-primary-nav-list-item--overflowed"]),
+					style: {
+						...t.props.style,
+						order: n * 2
 					}
-					return null;
 				})
-			})
+			});
+		}
+		return t;
+	}), I = p(() => {
+		A(!1);
+	}, []), L = () => {
+		A((e) => !e);
+	}, R = p(() => {
+		k && (I(), T.current?.focus());
+	}, [I, k]);
+	m(() => {
+		j || I();
+	}, [I, j]), r(w, I, E), i(R);
+	let { position: z } = n({
+		floatingElementRef: E,
+		anchorElementRef: T,
+		align: "end",
+		side: "outside-bottom"
+	}, [
+		k,
+		j,
+		P,
+		O
+	]);
+	return D ? /* @__PURE__ */ v("div", {
+		className: e(l["SubdomainNavBar-primary-nav-overflow"], j && l["SubdomainNavBar-primary-nav-overflow--has-overflow"], o),
+		children: [/* @__PURE__ */ v("ul", {
+			className: l["SubdomainNavBar-primary-nav-list"],
+			ref: C,
+			...y,
+			children: [F, /* @__PURE__ */ _(b, {
+				ariaControls: M,
+				buttonRef: T,
+				menuOpen: k,
+				onClick: L,
+				order: P,
+				overflowMenuLabel: f,
+				ref: w,
+				visible: j
+			})]
+		}), /* @__PURE__ */ _(x, {
+			id: M,
+			menuOpen: k,
+			onClose: I,
+			position: z,
+			ref: E,
+			visibilityMap: O,
+			children: a
 		})]
+	}) : /* @__PURE__ */ _("ul", {
+		className: e(l["SubdomainNavBar-primary-nav-list"], o),
+		ref: C,
+		...y,
+		children: a
+	});
+}), b = f(({ ariaControls: n, buttonRef: r, className: i, menuOpen: s, onClick: c, order: u, overflowMenuLabel: d, visible: f }, p) => {
+	let m = t(p);
+	return /* @__PURE__ */ _("li", {
+		"aria-hidden": !f || void 0,
+		className: e(l["SubdomainNavBar-primary-nav-list-item--overflow"], i),
+		ref: m,
+		style: { order: u },
+		children: /* @__PURE__ */ _("button", {
+			"aria-expanded": s ? "true" : "false",
+			"aria-controls": n,
+			onClick: c,
+			className: e(l["SubdomainNavBar-link"], l["SubdomainNavBar-more-link"]),
+			ref: r,
+			tabIndex: f ? void 0 : -1,
+			children: /* @__PURE__ */ v("span", {
+				className: l["SubdomainNavBar-link-content"],
+				children: [d, _(s ? o : a, {})]
+			})
+		})
 	});
-}
+}), x = f(({ children: t, className: n, id: r, menuOpen: i, onClose: a, position: o, visibilityMap: s }, c) => i ? /* @__PURE__ */ _("div", {
+	id: r,
+	ref: c,
+	style: {
+		top: `${o?.top ?? 0}px`,
+		left: `${o?.left ?? 0}px`,
+		visibility: o ? void 0 : "hidden"
+	},
+	className: e(l["SubdomainNavBar-overflow-menu"], n),
+	children: /* @__PURE__ */ _("ul", {
+		className: e(l["SubdomainNavBar-overflow-menu-list"]),
+		children: d.Children.map(t, (t, n) => d.isValidElement(t) && s[n] === !1 ? /* @__PURE__ */ _(u.Provider, {
+			value: {
+				isOverflowed: !1,
+				onLinkClick: a
+			},
+			children: d.cloneElement(t, { className: e(l["SubdomainNavBar-overflow-menu-item"], t.props.className) })
+		}) : null)
+	})
+}) : null);
 //#endregion
-export { h as NavigationVisbilityObserver };
+export { y as NavigationVisbilityObserver };
 
 //# sourceMappingURL=NavigationVisbilityObserver.js.map

package/esm/SubdomainNavBar/NavigationVisbilityObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationVisbilityObserver.js","names":[],"sources":["../../src/SubdomainNavBar/NavigationVisbilityObserver.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useRef, useState, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {ChevronDownIcon} from '@primer/octicons-react'\n\nimport {BaseProps} from '../component-helpers'\nimport {useVisibilityObserver} from './useVisibilityObserver'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport type {VisibilityMap} from './useVisibilityObserver'\nimport type {SubdomainNavBarLinkProps} from './SubdomainNavBar'\n\nimport styles from './SubdomainNavBar.module.css'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {useWindowSize} from '../hooks/useWindowSize'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\ntype NavigationVisibilityObserverProps = PropsWithChildren<\n  BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>\n>\n\nexport const NavigationVisbilityObserver = forwardRef<HTMLUListElement, NavigationVisibilityObserverProps>(\n  ({children, className, ...rest}, forwardedRef) => {\n    const navRef = useProvidedRefOrCreate<HTMLUListElement>(\n      forwardedRef as React.RefObject<HTMLUListElement> | React.RefCallback<HTMLUListElement> | null,\n    )\n    const [visibilityMap] = useVisibilityObserver(navRef, children)\n    const {isMedium} = useWindowSize()\n\n    const showOverflow = Object.values(visibilityMap).includes(false)\n\n    return (\n      <ul className={clsx(styles['SubdomainNavBar-primary-nav-list'], className)} ref={navRef} {...rest}>\n        {React.Children.map(children, child => {\n          if (React.isValidElement<SubdomainNavBarLinkProps>(child)) {\n            const visibilityKey = child.props['data-navitemid']\n            if (!visibilityKey) {\n              return child\n            }\n            const isVisible = visibilityMap[visibilityKey]\n            return React.cloneElement(child, {\n              className: clsx(\n                child.props.className,\n                isMedium && isVisible && styles['SubdomainNavBar-primary-nav-list-item--visible'],\n                isMedium && isVisible === false && styles['SubdomainNavBar-primary-nav-list-item--invisible'],\n              ),\n            })\n          }\n          return child\n        })}\n\n        {showOverflow && <AnchoredOverlay visibilityMap={visibilityMap}>{children}</AnchoredOverlay>}\n      </ul>\n    )\n  },\n)\n\ntype AnchoredOverlayProps = {\n  visibilityMap: VisibilityMap\n} & BaseProps<HTMLDivElement>\n\nfunction AnchoredOverlay({children, className, visibilityMap}: React.PropsWithChildren<AnchoredOverlayProps>) {\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)\n  const ref = useRef<HTMLLIElement | null>(null)\n\n  useOnClickOutside(ref, () => handleClose())\n\n  const open = Boolean(anchorEl)\n\n  const handleClick = event => {\n    if (anchorEl) {\n      handleClose()\n    } else {\n      setAnchorEl(event.currentTarget)\n    }\n  }\n\n  const handleClose = useCallback(() => {\n    setAnchorEl(null)\n  }, [])\n\n  useKeyboardEscape(handleClose)\n\n  return (\n    <li className={clsx(styles['SubdomainNavBar-primary-nav-list-item--overflow'], className)} ref={ref}>\n      <button\n        aria-expanded={open ? 'true' : 'false'}\n        aria-controls=\"more-navigation\"\n        aria-haspopup=\"true\"\n        onClick={handleClick}\n        className={clsx(styles['SubdomainNavBar-link'], styles['SubdomainNavBar-more-link'])}\n      >\n        More\n        <ChevronDownIcon />\n      </button>\n\n      <div\n        id=\"more-navigation\"\n        style={{display: open ? 'block' : 'none'}}\n        className={clsx(styles['SubdomainNavBar-overflow-menu'])}\n      >\n        <ul className={clsx(styles['SubdomainNavBar-overflow-menu-list'])}>\n          {React.Children.map(children, child => {\n            if (React.isValidElement<SubdomainNavBarLinkProps>(child)) {\n              const navItemChild = child.props['data-navitemid']\n              if (!navItemChild || visibilityMap[navItemChild]) {\n                return null\n              }\n\n              return (\n                <React.Fragment>\n                  {React.cloneElement(child, {\n                    onClick: handleClose,\n                    className: clsx(styles['SubdomainNavBar-overflow-menu-item'], child.props.className),\n                  })}\n                </React.Fragment>\n              )\n            }\n            return null\n          })}\n        </ul>\n      </div>\n    </li>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAmBA,IAAa,IAA8B,GACxC,EAAC,aAAU,cAAW,GAAG,KAAO,MAAiB;CAChD,IAAM,IAAS,EACb,EACD,EACK,CAAC,KAAiB,EAAsB,GAAQ,EAAS,EACzD,EAAC,gBAAY,GAAe,EAE5B,IAAe,OAAO,OAAO,EAAc,CAAC,SAAS,GAAM;AAEjE,QACE,kBAAC,MAAD;EAAI,WAAW,EAAK,EAAO,qCAAqC,EAAU;EAAE,KAAK;EAAQ,GAAI;YAA7F,CACG,EAAM,SAAS,IAAI,IAAU,MAAS;AACrC,OAAI,EAAM,eAAyC,EAAM,EAAE;IACzD,IAAM,IAAgB,EAAM,MAAM;AAClC,QAAI,CAAC,EACH,QAAO;IAET,IAAM,IAAY,EAAc;AAChC,WAAO,EAAM,aAAa,GAAO,EAC/B,WAAW,EACT,EAAM,MAAM,WACZ,KAAY,KAAa,EAAO,mDAChC,KAAY,MAAc,MAAS,EAAO,oDAC3C,EACF,CAAC;;AAEJ,UAAO;IACP,EAED,KAAgB,kBAAC,GAAD;GAAgC;GAAgB;GAA2B,CAAA,CACzF;;EAGV;AAMD,SAAS,EAAgB,EAAC,aAAU,cAAW,oBAA+D;CAC5G,IAAM,CAAC,GAAU,KAAe,EAAmC,KAAK,EAClE,IAAM,EAA6B,KAAK;AAE9C,GAAkB,SAAW,GAAa,CAAC;CAE3C,IAAM,IAAO,EAAQ,GAEf,KAAc,MAAS;AAC3B,EAAI,IACF,GAAa,GAEb,EAAY,EAAM,cAAc;IAI9B,IAAc,QAAkB;AACpC,IAAY,KAAK;IAChB,EAAE,CAAC;AAIN,QAFA,EAAkB,EAAY,EAG5B,kBAAC,MAAD;EAAI,WAAW,EAAK,EAAO,oDAAoD,EAAU;EAAO;YAAhG,CACE,kBAAC,UAAD;GACE,iBAAe,IAAO,SAAS;GAC/B,iBAAc;GACd,iBAAc;GACd,SAAS;GACT,WAAW,EAAK,EAAO,yBAAyB,EAAO,6BAA6B;aALtF,CAMC,QAEC,kBAAC,GAAD,EAAmB,CAAA,CACZ;MAET,kBAAC,OAAD;GACE,IAAG;GACH,OAAO,EAAC,SAAS,IAAO,UAAU,QAAO;GACzC,WAAW,EAAK,EAAO,iCAAiC;aAExD,kBAAC,MAAD;IAAI,WAAW,EAAK,EAAO,sCAAsC;cAC9D,EAAM,SAAS,IAAI,IAAU,MAAS;AACrC,SAAI,EAAM,eAAyC,EAAM,EAAE;MACzD,IAAM,IAAe,EAAM,MAAM;AAKjC,aAJI,CAAC,KAAgB,EAAc,KAC1B,OAIP,kBAAC,EAAM,UAAP,EAAA,UACG,EAAM,aAAa,GAAO;OACzB,SAAS;OACT,WAAW,EAAK,EAAO,uCAAuC,EAAM,MAAM,UAAU;OACrF,CAAC,EACa,CAAA;;AAGrB,YAAO;MACP;IACC,CAAA;GACD,CAAA,CACH"}
+{"version":3,"file":"NavigationVisbilityObserver.js","names":[],"sources":["../../src/SubdomainNavBar/NavigationVisbilityObserver.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useEffect, useRef, useState, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {TriangleDownIcon, TriangleUpIcon} from '@primer/octicons-react'\n\nimport {BaseProps} from '../component-helpers'\nimport {useVisibilityObserver} from './useVisibilityObserver'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport type {VisibilityMap} from './useVisibilityObserver'\nimport type {SubdomainNavBarLinkProps} from './SubdomainNavBar'\n\nimport styles from './SubdomainNavBar.module.css'\nimport {useAnchoredPosition} from '../hooks/useAnchoredPosition'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {useWindowSize} from '../hooks/useWindowSize'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {SubdomainNavBarLinkContext} from './SubdomainNavBarLinkContext'\n\ntype NavigationVisibilityObserverProps = PropsWithChildren<\n  BaseProps<HTMLUListElement> &\n    React.HTMLAttributes<HTMLUListElement> & {\n      overflowMenuLabel: string\n    }\n>\n\nexport const NavigationVisbilityObserver = forwardRef<HTMLUListElement, NavigationVisibilityObserverProps>(\n  ({children, className, overflowMenuLabel, ...rest}, forwardedRef) => {\n    const navRef = useProvidedRefOrCreate<HTMLUListElement>(\n      forwardedRef as React.RefObject<HTMLUListElement> | React.RefCallback<HTMLUListElement> | null,\n    )\n    const overflowRef = useRef<HTMLLIElement | null>(null)\n    const overflowButtonRef = useRef<HTMLButtonElement | null>(null)\n    const overflowMenuRef = useRef<HTMLDivElement | null>(null)\n    const {isMedium} = useWindowSize()\n    const measurementKey = React.Children.toArray(children)\n      .map((child, index) => {\n        if (React.isValidElement<SubdomainNavBarLinkProps>(child)) {\n          return `${index}:${typeof child.props.children === 'string' ? child.props.children : ''}`\n        }\n\n        return `${index}:`\n      })\n      .join('|')\n    const [visibilityMap] = useVisibilityObserver(navRef, overflowRef, measurementKey, !isMedium)\n    const [menuOpen, setMenuOpen] = useState(false)\n\n    const showOverflow = Object.values(visibilityMap).includes(false)\n    const overflowMenuId = React.useId()\n    const firstOverflowedItemIndex = React.Children.toArray(children).findIndex((child, index) => {\n      if (React.isValidElement<SubdomainNavBarLinkProps>(child)) {\n        return visibilityMap[index] === false\n      }\n\n      return false\n    })\n    const overflowOrder =\n      firstOverflowedItemIndex === -1 ? React.Children.count(children) * 2 : firstOverflowedItemIndex * 2 - 1\n\n    const navItems = React.Children.map(children, (child, index) => {\n      if (React.isValidElement<SubdomainNavBarLinkProps>(child)) {\n        const isOverflowed = isMedium && visibilityMap[index] === false\n        return (\n          <SubdomainNavBarLinkContext.Provider value={{isOverflowed}}>\n            {React.cloneElement(child, {\n              className: clsx(\n                child.props.className,\n                isOverflowed && styles['SubdomainNavBar-primary-nav-list-item--overflowed'],\n              ),\n              style: {\n                ...child.props.style,\n                order: index * 2,\n              },\n            })}\n          </SubdomainNavBarLinkContext.Provider>\n        )\n      }\n\n      return child\n    })\n\n    const handleClose = useCallback(() => {\n      setMenuOpen(false)\n    }, [])\n\n    const handleOverflowButtonClick = () => {\n      setMenuOpen(prevMenuOpen => !prevMenuOpen)\n    }\n\n    const handleEscape = useCallback(() => {\n      if (menuOpen) {\n        handleClose()\n        overflowButtonRef.current?.focus()\n      }\n    }, [handleClose, menuOpen])\n\n    useEffect(() => {\n      if (!showOverflow) {\n        handleClose()\n      }\n    }, [handleClose, showOverflow])\n\n    useOnClickOutside(overflowRef, handleClose, overflowMenuRef)\n    useKeyboardEscape(handleEscape)\n\n    const {position} = useAnchoredPosition(\n      {\n        floatingElementRef: overflowMenuRef,\n        anchorElementRef: overflowButtonRef,\n        align: 'end',\n        side: 'outside-bottom',\n      },\n      [menuOpen, showOverflow, overflowOrder, visibilityMap],\n    )\n\n    if (!isMedium) {\n      return (\n        <ul className={clsx(styles['SubdomainNavBar-primary-nav-list'], className)} ref={navRef} {...rest}>\n          {children}\n        </ul>\n      )\n    }\n\n    return (\n      <div\n        className={clsx(\n          styles['SubdomainNavBar-primary-nav-overflow'],\n          showOverflow && styles['SubdomainNavBar-primary-nav-overflow--has-overflow'],\n          className,\n        )}\n      >\n        <ul className={styles['SubdomainNavBar-primary-nav-list']} ref={navRef} {...rest}>\n          {navItems}\n          <OverflowButton\n            ariaControls={overflowMenuId}\n            buttonRef={overflowButtonRef}\n            menuOpen={menuOpen}\n            onClick={handleOverflowButtonClick}\n            order={overflowOrder}\n            overflowMenuLabel={overflowMenuLabel}\n            ref={overflowRef}\n            visible={showOverflow}\n          />\n        </ul>\n        <OverflowMenu\n          id={overflowMenuId}\n          menuOpen={menuOpen}\n          onClose={handleClose}\n          position={position}\n          ref={overflowMenuRef}\n          visibilityMap={visibilityMap}\n        >\n          {children}\n        </OverflowMenu>\n      </div>\n    )\n  },\n)\n\ntype OverflowButtonProps = {\n  ariaControls: string\n  buttonRef: React.RefObject<HTMLButtonElement | null>\n  menuOpen: boolean\n  onClick: () => void\n  order: number\n  overflowMenuLabel: string\n  visible: boolean\n} & BaseProps<HTMLLIElement>\n\nconst OverflowButton = forwardRef<HTMLLIElement, OverflowButtonProps>(\n  ({ariaControls, buttonRef, className, menuOpen, onClick, order, overflowMenuLabel, visible}, forwardedRef) => {\n    const ref = useProvidedRefOrCreate<HTMLLIElement>(\n      forwardedRef as React.RefObject<HTMLLIElement> | React.RefCallback<HTMLLIElement> | null,\n    )\n\n    return (\n      <li\n        aria-hidden={visible ? undefined : true}\n        className={clsx(styles['SubdomainNavBar-primary-nav-list-item--overflow'], className)}\n        ref={ref}\n        style={{order}}\n      >\n        <button\n          aria-expanded={menuOpen ? 'true' : 'false'}\n          aria-controls={ariaControls}\n          onClick={onClick}\n          className={clsx(styles['SubdomainNavBar-link'], styles['SubdomainNavBar-more-link'])}\n          ref={buttonRef}\n          tabIndex={visible ? undefined : -1}\n        >\n          <span className={styles['SubdomainNavBar-link-content']}>\n            {overflowMenuLabel}\n            {menuOpen ? <TriangleUpIcon /> : <TriangleDownIcon />}\n          </span>\n        </button>\n      </li>\n    )\n  },\n)\n\ntype OverflowMenuProps = {\n  id: string\n  menuOpen: boolean\n  onClose: () => void\n  position?: {top: number; left: number}\n  visibilityMap: VisibilityMap\n} & BaseProps<HTMLDivElement>\n\nconst OverflowMenu = forwardRef<HTMLDivElement, React.PropsWithChildren<OverflowMenuProps>>(\n  ({children, className, id, menuOpen, onClose, position, visibilityMap}, forwardedRef) => {\n    if (!menuOpen) {\n      return null\n    }\n\n    return (\n      <div\n        id={id}\n        ref={forwardedRef}\n        style={{\n          top: `${position?.top ?? 0}px`,\n          left: `${position?.left ?? 0}px`,\n          visibility: position ? undefined : 'hidden',\n        }}\n        className={clsx(styles['SubdomainNavBar-overflow-menu'], className)}\n      >\n        <ul className={clsx(styles['SubdomainNavBar-overflow-menu-list'])}>\n          {React.Children.map(children, (child, index) => {\n            if (React.isValidElement<SubdomainNavBarLinkProps>(child)) {\n              if (visibilityMap[index] !== false) {\n                return null\n              }\n\n              return (\n                <SubdomainNavBarLinkContext.Provider value={{isOverflowed: false, onLinkClick: onClose}}>\n                  {React.cloneElement(child, {\n                    className: clsx(styles['SubdomainNavBar-overflow-menu-item'], child.props.className),\n                  })}\n                </SubdomainNavBarLinkContext.Provider>\n              )\n            }\n            return null\n          })}\n        </ul>\n      </div>\n    )\n  },\n)\n"],"mappings":"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"}