@primer/react-brand 0.75.0-rc.5af1749e → 0.75.0-rc.96de7cef

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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"}

package/esm/SubdomainNavBar/SubdomainNavBar.d.ts

@@ -3,16 +3,26 @@ import React, { PropsWithChildren } from 'react';
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes.css';
-export type SubdomainNavBarProps = {
+export type SubdomainNavBarMenuLabels = {
     /**
-     * Valid child elements are `SubdomainNavBar.Link`, `SubdomainNavBar.PrimaryAction`,
-     * `SubdomainNavBar.SecondaryAction` and `SubdomainNavBar.Search`
+     * Visible and accessible label for the closed narrow menu control.
      */
-    children?: React.ReactNode | React.ReactElement<SubdomainNavBarLinkProps> | React.ReactElement<SearchProps> | React.ReactElement<CTAActionProps>;
+    menuLabel: string;
     /**
-     * Forward a custom HTML class attribute
+     * Visible and accessible label for the open narrow menu control.
      */
-    className?: string;
+    closeLabel: string;
+    /**
+     * Visible and accessible label for the desktop overflow menu control.
+     */
+    overflowMenuLabel: string;
+};
+export type SubdomainNavBarProps = Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
+    /**
+     * Valid child elements are `SubdomainNavBar.Link`, `SubdomainNavBar.PrimaryAction`,
+     * `SubdomainNavBar.SecondaryAction` and `SubdomainNavBar.Search`
+     */
+    children?: React.ReactNode | React.ReactElement<SubdomainNavBarLinkProps> | React.ReactElement<SubdomainNavBarSearchProps> | React.ReactElement<CTAActionProps>;
     /**
      * Fixes the navigation bar to the top of the viewport. Defaults to `true`.
      */
@@ -22,7 +32,15 @@ export type SubdomainNavBarProps = {
      */
     fullWidth?: boolean;
     /**
-     * The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assisitive technologies.
+     * Optional React element rendered after the navigation links.
+     */
+    leadingComponent?: React.ReactElement;
+    /**
+     * Optional React element rendered after the actions.
+     */
+    trailingComponent?: React.ReactElement;
+    /**
+     * The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assistive technologies.
      */
     title: string;
     /**
@@ -37,41 +55,160 @@ export type SubdomainNavBarProps = {
      * When the menu is opened or closed on narrow viewports, this callback is called with the new open state.
      */
     onNarrowMenuToggle?: (isOpen: boolean) => void;
+    /**
+     * Customizable visible and accessible menu labels.
+     */
+    menuLabels?: Partial<SubdomainNavBarMenuLabels>;
+    /**
+     * ID of the element that receives focus when the skip-to-content link is activated.
+     * Defaults to the first rendered `main` element that is not hidden from assistive technologies.
+     */
+    skipToContentTargetId?: string;
+};
+export type SubdomainNavBarHandle = HTMLElement & {
+    openSearch: () => void;
+    closeSearch: () => void;
 };
-declare function Root({ children, className, fixed, fullWidth, logoHref, title, titleHref, onNarrowMenuToggle, ...rest }: SubdomainNavBarProps): import("react/jsx-runtime").JSX.Element;
 export type SubdomainNavBarLinkProps = {
     href: string;
     isExternal?: boolean;
-    'data-navitemid'?: string;
 } & React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
-declare function Link({ href, className, children, isExternal, ...rest }: PropsWithChildren<SubdomainNavBarLinkProps>): import("react/jsx-runtime").JSX.Element;
+declare function Link({ href, className, children, isExternal, 'aria-current': ariaCurrent, 'aria-hidden': ariaHidden, tabIndex, ...rest }: PropsWithChildren<SubdomainNavBarLinkProps>): import("react/jsx-runtime").JSX.Element;
 export type SubdomainNavBarSearchResultProps = {
     title: string;
     description: string;
     url: string;
     date: string;
     category?: string;
+    group?: string;
+    isExternal?: boolean;
+};
+export type SubdomainNavBarSearchResultGroupProps = {
+    title: string;
+    results: SubdomainNavBarSearchResultProps[];
 };
-type HandlerEvent = MouseEvent | TouchEvent | FocusEvent;
-type SearchProps = {
+export type SubdomainNavBarSearchResults = SubdomainNavBarSearchResultProps[] | SubdomainNavBarSearchResultGroupProps[];
+export type SubdomainNavBarSearchLabels = {
+    /**
+     * Accessible label for the search input. Defaults to "Search".
+     */
+    searchLabel: string;
+    /**
+     * Visible and accessible label for the close action. Defaults to "Close".
+     */
+    closeLabel: string;
+    /**
+     * Accessible label for an untitled search result group. Defaults to "Results".
+     */
+    resultsLabel: string;
+    /**
+     * Accessible label for grouped search results without a search term. Defaults to "Search results".
+     */
+    searchResultsLabel: string;
+    /**
+     * Formats the default search placeholder and dialog label using the navigation title.
+     */
+    formatSearchWithTitle: (title: string) => string;
+    /**
+     * Formats the accessible label for the responsive search trigger.
+     */
+    formatSearchTrigger: (placeholder: string) => string;
+    /**
+     * Formats the visible heading for ungrouped search results.
+     */
+    formatResultsHeading: (searchTerm: string) => string;
+    /**
+     * Formats the accessible label for grouped search results.
+     */
+    formatResultsLabel: (searchTerm: string) => string;
+    /**
+     * Formats the search result count announcement.
+     */
+    formatSuggestions: (count: number) => string;
+};
+export type SubdomainNavBarSearchProps = {
     onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    ref: React.RefObject<HTMLInputElement>;
     active?: boolean;
+    className?: string;
     title?: string;
-    handlerFn?: (event: HandlerEvent) => void;
-    autoComplete?: boolean;
-    searchResults?: SubdomainNavBarSearchResultProps[];
+    onSearchOpen?: () => void;
+    onSearchClose?: () => void;
+    /**
+     * Placeholder text shown in the search trigger and the opened search input.
+     */
+    placeholder?: string;
+    /**
+     * Optional keyboard shortcut hint shown in the search trigger. Pass an empty string to hide it.
+     */
+    shortcutLabel?: string;
+    /**
+     * Optional global keyboard shortcut that opens the search dialog. Omit or pass `false` to disable it.
+     * Supports single keys and modifier combinations, such as `/` or `Command+Option+k`.
+     */
+    keyboardShortcut?: string | false;
+    searchResults?: SubdomainNavBarSearchResults;
     searchTerm?: string;
+    /**
+     * Customizable visible and accessible search text. Unspecified labels use the English defaults.
+     */
+    labels?: Partial<SubdomainNavBarSearchLabels>;
 };
 type CTAActionProps = {
     href: string;
 } & React.HTMLAttributes<HTMLAnchorElement>;
 declare function PrimaryAction({ children, href, ...rest }: PropsWithChildren<CTAActionProps>): import("react/jsx-runtime").JSX.Element;
 declare function SecondaryAction({ children, href, ...rest }: PropsWithChildren<CTAActionProps>): import("react/jsx-runtime").JSX.Element;
-export declare const SubdomainNavBar: typeof Root & {
+export declare const SubdomainNavBar: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "title" | "children"> & {
+    /**
+     * Valid child elements are `SubdomainNavBar.Link`, `SubdomainNavBar.PrimaryAction`,
+     * `SubdomainNavBar.SecondaryAction` and `SubdomainNavBar.Search`
+     */
+    children?: React.ReactNode | React.ReactElement<SubdomainNavBarLinkProps> | React.ReactElement<SubdomainNavBarSearchProps> | React.ReactElement<CTAActionProps>;
+    /**
+     * Fixes the navigation bar to the top of the viewport. Defaults to `true`.
+     */
+    fixed?: boolean;
+    /**
+     * Fill the maximum width of the parent container. Defaults to `false`.
+     */
+    fullWidth?: boolean;
+    /**
+     * Optional React element rendered after the navigation links.
+     */
+    leadingComponent?: React.ReactElement;
+    /**
+     * Optional React element rendered after the actions.
+     */
+    trailingComponent?: React.ReactElement;
+    /**
+     * The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assistive technologies.
+     */
+    title: string;
+    /**
+     * The URL for the site. Typically used to link the titleText prop value to the site root.
+     */
+    titleHref?: string;
+    /**
+     * Optionally change the URL of the logo
+     */
+    logoHref?: string;
+    /**
+     * When the menu is opened or closed on narrow viewports, this callback is called with the new open state.
+     */
+    onNarrowMenuToggle?: (isOpen: boolean) => void;
+    /**
+     * Customizable visible and accessible menu labels.
+     */
+    menuLabels?: Partial<SubdomainNavBarMenuLabels>;
+    /**
+     * ID of the element that receives focus when the skip-to-content link is activated.
+     * Defaults to the first rendered `main` element that is not hidden from assistive technologies.
+     */
+    skipToContentTargetId?: string;
+} & React.RefAttributes<SubdomainNavBarHandle>> & {
     Link: typeof Link;
-    Search: React.ForwardRefExoticComponent<Omit<SearchProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Search: React.ForwardRefExoticComponent<SubdomainNavBarSearchProps & React.RefAttributes<HTMLInputElement>>;
     PrimaryAction: typeof PrimaryAction;
     SecondaryAction: typeof SecondaryAction;
     testIds: {

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

@@ -1 +1 @@
-{"version":3,"file":"SubdomainNavBar.d.ts","sourceRoot":"","sources":["../../src/SubdomainNavBar/SubdomainNavBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SubdomainNavBar.d.ts","sourceRoot":"","sources":["../../src/SubdomainNavBar/SubdomainNavBar.tsx"],"names":[],"mappings":"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"}