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

package/docs/components/SubdomainNavBar/index.md

@@ -21,116 +21,245 @@ import {SubdomainNavBar} from '@primer/react-brand'
 ### Basic
 
 ```jsx
-<SubdomainNavBar title="Subdomain" fixed={false}>
-  <SubdomainNavBar.Link href="#">Collections</SubdomainNavBar.Link>
-  <SubdomainNavBar.Link href="#">Topics</SubdomainNavBar.Link>
-  <SubdomainNavBar.Link href="#">Social</SubdomainNavBar.Link>
-  <SubdomainNavBar.PrimaryAction href="#">Primary CTA</SubdomainNavBar.PrimaryAction>
-  <SubdomainNavBar.SecondaryAction href="#">Secondary CTA</SubdomainNavBar.SecondaryAction>
-</SubdomainNavBar>
+<div style={{width: '100%'}}>
+  <SubdomainNavBar title="Subdomain" fixed={false}>
+    <SubdomainNavBar.Link href="#">Collections</SubdomainNavBar.Link>
+    <SubdomainNavBar.Link href="#">Topics</SubdomainNavBar.Link>
+    <SubdomainNavBar.Link href="#">Social</SubdomainNavBar.Link>
+    <SubdomainNavBar.PrimaryAction href="#">Primary CTA</SubdomainNavBar.PrimaryAction>
+    <SubdomainNavBar.SecondaryAction href="#">Secondary CTA</SubdomainNavBar.SecondaryAction>
+  </SubdomainNavBar>
+</div>
 ```
 
 ### Search
 
-`SubdomainNavBar` offers an optional search form control. The form can operate in both `onSubmit` and `onChange` modes, with the latter facilitating inline results to appear.
+`SubdomainNavBar` offers an optional search form control that supports both `onSubmit` and `onChange`; use `onChange` to display inline results. The `placeholder` labels the input in the opened dialog and defaults to `Search {title}`, or `Search` when no navigation title is available.
+
+Keyboard shortcuts are disabled by default. Pass `keyboardShortcut`, such as `keyboardShortcut="/"`, to opt into a global shortcut that opens the search dialog. For programmatic control with `openSearch()` and `closeSearch()`, see the Imperative Search API Storybook example.
 
 ```jsx filename="noinline"
-const App = () => {
-  const inputRef = React.useRef(null)
-  const [searchResults, setSearchResults] = React.useState([])
+const groupedResults = [
+  {
+    title: 'Recommended',
+    results: [
+      {
+        title: 'Getting started with GitHub',
+        description: 'Create an account and learn the basics.',
+        url: '/en/get-started',
+        date: '2026-07-01',
+        category: 'Guide',
+      },
+    ],
+  },
+  {
+    title: 'API reference',
+    results: [
+      {
+        title: 'REST API documentation',
+        description: 'Integrate with GitHub using the REST API.',
+        url: 'https://docs.github.com/en/rest',
+        date: '2026-07-01',
+        category: 'Reference',
+        isExternal: true,
+      },
+    ],
+  },
+]
+
+const SearchNav = () => {
   const [searchTerm, setSearchTerm] = React.useState('')
 
-  const mockSearchData = [
-    {
-      title: 'How to transform your business in a digital world',
-      description:
-        'GitHub Enterprise empowers developers with tools they already know and love, accelerates high-quality software development and secure delivery, and enhances the speed and power of innovation.\n',
-      url: 'https://resources.github.com/devops/github-enterprise-ebook',
-      date: '2022-08-29T00:00+02:00',
-    },
-    {
-      title: 'The fundamentals of continuous deployment in DevOps',
-      description:
-        'What is continuous deployment?\nContinuous deployment (CD) is an automated software release practice where code changes are deployed to different stages as they pass predefined tests. The goal of CD is to facilitate faster releases by using automation to help remove the need for human intervention as much as possible during the deployment process.',
-      url: 'https://resources.github.com/devops/fundamentals/ci-cd/deployment',
-      date: '2022-05-23T12:00+00:00',
-    },
-  ]
-
-  const handleChange = () => {
-    if (!inputRef.current) return
-    if (inputRef.current.value.length === 0) {
-      setSearchResults(undefined)
-      return
-    }
-    if (inputRef.current.value.length > 2) {
-      setTimeout(() => setSearchResults(mockSearchData), 1000)
-      setSearchTerm(inputRef.current.value)
-      return
-    }
-  }
-
-  const handleSubmit = e => {
-    e.preventDefault()
-    if (!inputRef.current) return
-    if (!inputRef.current.value) {
-      alert(`Enter a value and try again.`)
-      return
-    }
-
-    alert(`Name: ${inputRef.current.value}`)
-  }
+  return (
+    <div style={{width: '100%'}}>
+      <SubdomainNavBar title="GitHub Docs" fixed={false} fullWidth>
+        <SubdomainNavBar.Link href="/en/get-started">Get started</SubdomainNavBar.Link>
+        <SubdomainNavBar.Search
+          placeholder="Search GitHub Docs"
+          keyboardShortcut="/"
+          searchTerm={searchTerm}
+          searchResults={searchTerm ? groupedResults : []}
+          onChange={event => setSearchTerm(event.currentTarget.value)}
+          onSubmit={event => {
+            event.preventDefault()
+          }}
+        />
+      </SubdomainNavBar>
+    </div>
+  )
+}
+
+render(<SearchNav />)
+```
+
+Search results can be a flat list or grouped by title. Do not mix both formats in the same array.
+
+### Localized search
+
+Use the `labels` prop to localize search text. Any labels you omit fall back to English.
+
+```jsx filename="noinline"
+const searchProps = {
+  searchLabel: 'Buscar',
+  closeLabel: 'Cerrar',
+  resultsLabel: 'Resultados',
+  searchResultsLabel: 'Resultados de búsqueda',
+  formatSearchWithTitle: title => `Buscar en ${title}`,
+  formatSearchTrigger: placeholder => `Abrir ${placeholder}`,
+  formatResultsHeading: searchTerm => `Resultados para «${searchTerm}»`,
+  formatResultsLabel: searchTerm => `Resultados para ${searchTerm}`,
+  formatSuggestions: count => `${count} sugerencia${count === 1 ? '' : 's'}.`,
+  placeholder: 'Buscar documentación',
+}
+
+const LocalizedSearch = () => {
+  const [searchTerm, setSearchTerm] = React.useState('')
 
   return (
-    <SubdomainNavBar title="Subdomain" fixed={false}>
-      <SubdomainNavBar.Link href="#collections">Collections</SubdomainNavBar.Link>
-      <SubdomainNavBar.Link href="#topics">Topics</SubdomainNavBar.Link>
-      <SubdomainNavBar.Search
-        ref={inputRef}
-        searchTerm={searchTerm}
-        onSubmit={handleSubmit}
-        onChange={handleChange}
-        searchResults={searchResults}
-      />
-    </SubdomainNavBar>
+    <div style={{width: '100%'}}>
+      <SubdomainNavBar title="Documentación" fixed={false}>
+        <SubdomainNavBar.Search
+          {...searchProps}
+          searchTerm={searchTerm}
+          onChange={event => setSearchTerm(event.currentTarget.value)}
+          onSubmit={event => event.preventDefault()}
+        />
+      </SubdomainNavBar>
+    </div>
   )
 }
 
-render(App)
+render(<LocalizedSearch />)
 ```
 
-## Accessibility
+### Localized menu controls
+
+Use `menuLabels` to localize the narrow menu control and desktop overflow menu. The narrow menu label changes when the menu opens, and any omitted value falls back to English.
+
+```jsx filename="noinline"
+const LocalizedMenu = () => (
+  <div style={{width: '100%'}}>
+    <SubdomainNavBar
+      title="Documentación"
+      fixed={false}
+      menuLabels={{
+        menuLabel: 'Menú',
+        closeLabel: 'Cerrar',
+        overflowMenuLabel: 'Más',
+      }}
+    >
+      <SubdomainNavBar.Link href="/es/get-started">Primeros pasos</SubdomainNavBar.Link>
+      <SubdomainNavBar.PrimaryAction href="/es/signup">Registrarse</SubdomainNavBar.PrimaryAction>
+    </SubdomainNavBar>
+  </div>
+)
 
-When the menu is open on narrow viewports, ensure that the rest of the document is hidden from screen readers. This can be achieved by adding `aria-hidden="true"` or `inert` to the main content area when the menu is open.
+render(<LocalizedMenu />)
+```
+
+## Accessibility
 
-Use the `onNarrowMenuToggle` prop to detect when the mobile menu is opened or closed.
+- Render `SubdomainNavBar` before other focusable page content so its skip-to-content link is the first keyboard-accessible control.
+- Provide a concise, meaningful `title`. It labels the navigation and communicates the subdomain to assistive technologies.
+- Set `skipToContentTargetId` to the ID of the page's active main content element. Activating the skip link moves focus to that element and clears the fixed navigation bar. When omitted, or if the explicit target is unavailable, the component targets the first rendered `main` that is not hidden from assistive technologies.
+- When the menu opens on narrow viewports, hide the rest of the document from screen readers with `inert` or `aria-hidden="true"`. Use `onNarrowMenuToggle` to track the menu state.
+- Localize the menu controls' visible and accessible labels with `menuLabels`.
+- Only opt into a `keyboardShortcut` that does not conflict with browser, operating system, or application shortcuts. Always provide another visible way to open search.
+- For search, localize its visible text, accessible labels, result headings, and live-region announcements. Supplying only some `labels` values produces a mix of localized text and English defaults.
 
 ## Component props
 
 ### SubdomainNavBar `Required`
 
-| Name                 | Type                                                                                                                                                 |        Default       | Description                                                                                                                            |
-| :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------: | :------------------------------------------------------------------------------------------------------------------------------------- |
-| `children`           | `'SubdomainNavBar.Link' \| 'SubdomainNavBar.Search' \| 'SubdomainNavBar.PrimaryAction' \| 'SubdomainNavBar.SecondaryAction' \| 'React.ReactElement'` |                      | Valid child nodes                                                                                                                      |
-| `className`          | `string`                                                                                                                                             |                      | Sets a custom class                                                                                                                    |
-| `id`                 | `string`                                                                                                                                             |                      | Sets a custom id                                                                                                                       |
-| `logoHref`           | `string`                                                                                                                                             | `https://github.com` | Optionally change the URL of the logo                                                                                                  |
-| `title`              | `string`                                                                                                                                             |                      | The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assisitive technologies. |
-| `titleHref`          | `string`                                                                                                                                             |          `/`         | The URL for the site. Typically used to link the title prop value to the site root.                                                    |
-| `ref`                | `React.RefObject`                                                                                                                                    |                      | Forward a Ref to the underlying DOM node                                                                                               |
-| `onNarrowMenuToggle` | `(isOpen: boolean) => void`                                                                                                                          |                      | When the mobile menu is opened or closed, this callback is called with the new open state.                                             |
+| Name                    | Type                                                                                                                                                 | Default              | Description                                                             |
+| :---------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------- | :---------------------------------------------------------------------- |
+| `children`              | `'SubdomainNavBar.Link' \| 'SubdomainNavBar.Search' \| 'SubdomainNavBar.PrimaryAction' \| 'SubdomainNavBar.SecondaryAction' \| 'React.ReactElement'` |                      | Valid child nodes                                                       |
+| `className`             | `string`                                                                                                                                             |                      | Sets a custom class on the root element                                 |
+| `id`                    | `string`                                                                                                                                             |                      | Sets a custom ID on the root element                                    |
+| `style`                 | `React.CSSProperties`                                                                                                                                |                      | Forwards custom inline styles to the root element                       |
+| `fixed`                 | `boolean`                                                                                                                                            | `true`               | Fixes the navigation bar to the top of the viewport                     |
+| `fullWidth`             | `boolean`                                                                                                                                            | `false`              | Allows the inner content to fill the available width                    |
+| `logoHref`              | `string`                                                                                                                                             | `https://github.com` | Changes the URL of the GitHub logo                                      |
+| `title`                 | `string`                                                                                                                                             |                      | Required subdomain name used visibly and by assistive technologies      |
+| `titleHref`             | `string`                                                                                                                                             | `/`                  | Links the title to the subdomain root                                   |
+| `menuLabels`            | `Partial<SubdomainNavBarMenuLabels>`                                                                                                                 | English labels       | Overrides the menu controls' visible and accessible labels              |
+| `skipToContentTargetId` | `string`                                                                                                                                             | First visible `main` | ID of the element focused by the skip-to-content link                   |
+| `ref`                   | `React.Ref<SubdomainNavBarHandle>`                                                                                                                   |                      | Ref to the root element with `openSearch()` and `closeSearch()` methods |
+| `onNarrowMenuToggle`    | `(isOpen: boolean) => void`                                                                                                                          |                      | Called with the new state when the narrow menu opens or closes          |
+
+`SubdomainNavBarProps`, `SubdomainNavBarHandle`, and `SubdomainNavBarMenuLabels` are exported from `@primer/react-brand`.
+
+### Menu labels
+
+| Field               | Type     | English default | Purpose                                                      |
+| :------------------ | :------- | :-------------- | :----------------------------------------------------------- |
+| `menuLabel`         | `string` | `Menu`          | Visible and accessible label while the narrow menu is closed |
+| `closeLabel`        | `string` | `Close`         | Visible and accessible label while the narrow menu is open   |
+| `overflowMenuLabel` | `string` | `More`          | Visible and accessible label for the desktop overflow menu   |
+
+### SubdomainNavBar.Search
+
+| Name               | Type                                             | Default          | Description                                                           |
+| :----------------- | :----------------------------------------------- | :--------------- | :-------------------------------------------------------------------- |
+| `onSubmit`         | `(event: FormEvent<HTMLFormElement>) => void`    |                  | Required search form submit handler                                   |
+| `onChange`         | `(event: ChangeEvent<HTMLInputElement>) => void` |                  | Required search input change handler                                  |
+| `placeholder`      | `string`                                         | `Search {title}` | Text shown in the input trigger and opened search input               |
+| `shortcutLabel`    | `string`                                         | Shortcut value   | Visible input-trigger hint; pass an empty string to hide it           |
+| `keyboardShortcut` | `string \| false`                                |                  | Optional global key or modifier combination that opens search         |
+| `labels`           | `Partial<SubdomainNavBarSearchLabels>`           | English labels   | Overrides visible and accessible search text and formatting functions |
+| `searchResults`    | `SubdomainNavBarSearchResults`                   |                  | Flat or explicitly grouped results                                    |
+| `searchTerm`       | `string`                                         |                  | Current query used in result headings and accessible labels           |
+| `className`        | `string`                                         |                  | Sets a custom class on the search trigger container                   |
+| `ref`              | `React.Ref<HTMLInputElement>`                    |                  | Ref to the input inside the opened search dialog                      |
+
+`SubdomainNavBarSearchProps` and `SubdomainNavBarSearchLabels` are exported from `@primer/react-brand`.
+
+### Search labels
+
+| Field                   | Type                              | English default               | Purpose                                                  |
+| :---------------------- | :-------------------------------- | :---------------------------- | :------------------------------------------------------- |
+| `searchLabel`           | `string`                          | `Search`                      | Accessible label for the search input                    |
+| `closeLabel`            | `string`                          | `Close`                       | Visible and accessible close action                      |
+| `resultsLabel`          | `string`                          | `Results`                     | Accessible label for an untitled result group            |
+| `searchResultsLabel`    | `string`                          | `Search results`              | Accessible label for grouped results without a query     |
+| `formatSearchWithTitle` | `(title: string) => string`       | `Search ${title}`             | Formats the default placeholder and dialog label         |
+| `formatSearchTrigger`   | `(placeholder: string) => string` | `${placeholder} search`       | Formats the responsive search trigger's accessible label |
+| `formatResultsHeading`  | `(searchTerm: string) => string`  | `Results for “${searchTerm}”` | Formats the visible heading for ungrouped results        |
+| `formatResultsLabel`    | `(searchTerm: string) => string`  | `Results for ${searchTerm}`   | Formats the accessible label for grouped results         |
+| `formatSuggestions`     | `(count: number) => string`       | `${count} suggestions.`       | Formats the polite live-region result-count announcement |
+
+### Search result types
+
+`SubdomainNavBarSearchResultProps`, `SubdomainNavBarSearchResultGroupProps`, and `SubdomainNavBarSearchResults` are exported from `@primer/react-brand`.
+
+#### `SubdomainNavBarSearchResultProps`
+
+| Field         | Type      | Required | Description                                                              |
+| :------------ | :-------- | :------: | :----------------------------------------------------------------------- |
+| `title`       | `string`  |    Yes   | Linked result title                                                      |
+| `description` | `string`  |    Yes   | Result summary                                                           |
+| `url`         | `string`  |    Yes   | Link destination                                                         |
+| `date`        | `string`  |    Yes   | Displayed date string; format it for the user's locale before passing it |
+| `category`    | `string`  |          | Optional metadata displayed after the date                               |
+| `group`       | `string`  |          | Groups flat results under a shared heading                               |
+| `isExternal`  | `boolean` |          | Shows an external-link indicator for grouped results                     |
+
+#### `SubdomainNavBarSearchResultGroupProps`
+
+| Field     | Type                                 | Required | Description                       |
+| :-------- | :----------------------------------- | :------: | :-------------------------------- |
+| `title`   | `string`                             |    Yes   | Visible and accessible group name |
+| `results` | `SubdomainNavBarSearchResultProps[]` |    Yes   | Results in the group              |
 
 ### SubdomainNavBar.Link `Required`
 
-`SubdomainNavBar.Link` are anchor links.
+`SubdomainNavBar.Link` renders an anchor link.
 
-| Name         | Type              | Default | Description                                               |
-| :----------- | :---------------- | :-----: | :-------------------------------------------------------- |
-| `children`   | `string`          |         | Label text                                                |
-| `className`  | `string`          |         | Applies a custom class                                    |
-| `href`       | `string`          |         | Destination path for the anchor element                   |
-| `id`         | `string`          |         | Sets a custom id                                          |
-| `ref`        | `React.RefObject` |         | Forward a Ref to the underlying DOM node                  |
-| `isExternal` | `boolean`         | `false` | When true, renders a external link icon after to the link |
+| Name         | Type              | Default | Description                                              |
+| :----------- | :---------------- | :-----: | :------------------------------------------------------- |
+| `children`   | `React.ReactNode` |         | Link content                                             |
+| `className`  | `string`          |         | Applies a custom class                                   |
+| `href`       | `string`          |         | Destination path for the anchor element                  |
+| `isExternal` | `boolean`         | `false` | Renders an external-link icon after the link when `true` |
 
-Additional props can be passed to the `<a>` element. [See MDN for a list of props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) accepted by the `<anchor>` element.
+Additional props are passed to the wrapping `<li>` element. [See MDN for accepted list item attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes).

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.75.0-rc.a3f7dbd6)
+# Primer Brand docs (v0.75.0-rc.c3abcc84)
 
-These docs are bundled with `@primer/react-brand@0.75.0-rc.a3f7dbd6` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.75.0-rc.c3abcc84` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

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,125 @@
 import 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, TriangleUpIcon as o } from "../node_modules/@primer/octicons-react/dist/index.esm.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 : !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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"}