@primer/doctocat-nextjs 0.7.1-rc.bf9f37a → 0.8.0-rc.abeed68

package/CHANGELOG.md

@@ -1,6 +1,21 @@
 # @primer/doctocat-nextjs
 
-## 0.7.1
+## 0.8.0
+
+### Minor Changes
+
+- [#73](https://github.com/primer/doctocat-nextjs/pull/73) [`a06099d`](https://github.com/primer/doctocat-nextjs/commit/a06099d65d36bdb361fc9a20b2b811990bb6d353) Thanks [@danielguillan](https://github.com/danielguillan)! - Add React 19 support
+
+  This update is backwards compatible with React 18. However, it upgrades `@primer/react` to v38, which includes breaking changes such as the removal of the `Box` component and `sx` prop. Projects using this theme may need to update their code accordingly.
+  - Updated React peer dependency to support React 19
+  - Updated @primer/react from v37.11.2 to v38.3.0
+  - Updated `@primer/react-brand` from v0.54.0 to v0.60.1
+  - Updated `framer-motion` from v12.4.0 to v12.23.24
+  - Updated `react-focus-on` from v3.9.4 to v3.10.0
+  - Migrated `Label` components to `Token` for React 19 compatibility
+  - Fixed type errors in `ReactCodeBlock` and `getRelatedPages` for stricter React 19 types
+  - Added explicit `as="button"` to `IconButton` and `as="input"` to `TextInput` components
+  - Updated Next.js and related packages from v15.5.2 to v15.5.7
 
 ### Patch Changes
 
@@ -11,7 +26,6 @@
 ### Minor Changes
 
 - [#65](https://github.com/primer/doctocat-nextjs/pull/65) [`dc680ec`](https://github.com/primer/doctocat-nextjs/commit/dc680ec51605bd7a40dedc71cd3bb107632035dd) Thanks [@rezrah](https://github.com/rezrah)! - Updated Next.js compatibility to v15.5.x, Nextra to v4, and fix React code block rendering
-
   - **Next.js v15.5.2**: Upgraded to latest stable version across all workspaces
   - **Nextra v4 compatibility**: Updated type definitions for `ReactNode` titles
   - **Fixed code block rendering**: Added client-side rendering for interactive code examples to handle React lazy components properly
@@ -69,7 +83,6 @@
   ```
 
 - [#48](https://github.com/primer/doctocat-nextjs/pull/48) [`ce73c24`](https://github.com/primer/doctocat-nextjs/commit/ce73c24b2e4e924667bf7446a504bd88d8f2ccf0) Thanks [@rezrah](https://github.com/rezrah)! - - Fix inline code font-size in markdown headings. Now inherits size used in the heading.
-
   - Increased spacing below React code blocks, which was previously too small.
 
 - [#50](https://github.com/primer/doctocat-nextjs/pull/50) [`5d67989`](https://github.com/primer/doctocat-nextjs/commit/5d679895408c1a58342419692db4234dfddefd80) Thanks [@rezrah](https://github.com/rezrah)! - Add `menu-position` frontmatter support for custom sidebar navigation ordering
@@ -87,7 +100,6 @@
 ### Patch Changes
 
 - [#41](https://github.com/primer/doctocat-nextjs/pull/41) [`e1ffb3a`](https://github.com/primer/doctocat-nextjs/commit/e1ffb3a630c51316a19e25869f731b4ef3660d2b) Thanks [@danielguillan](https://github.com/danielguillan)! - - Updated sidebar styles.
-
   - Added active header link as sidebar heading.
   - Made active header the root item of breadcrumbs, if available.
   - Made sidebar group headlines link to the index page.
@@ -111,7 +123,6 @@
 ### Minor Changes
 
 - [#30](https://github.com/primer/doctocat-nextjs/pull/30) [`cdcb65e`](https://github.com/primer/doctocat-nextjs/commit/cdcb65e087d647a6d61c87d9122f105dcda64e35) Thanks [@joshfarrant](https://github.com/joshfarrant)! - - Arbitrary links can now be added to the sidebar and header using the `Theme` component's `headerLinks` and `sidebarLinks` props.
-
   - Updated the header navigation to more closely visually align it with the existing Primer docs navigation.
   - Removed `_meta.global.ts` and instead directly pass header and sidebar links into the Doctocat `Theme` component.
 
@@ -141,7 +152,6 @@
 ### Patch Changes
 
 - [#34](https://github.com/primer/doctocat-nextjs/pull/34) [`ccf198c`](https://github.com/primer/doctocat-nextjs/commit/ccf198cca25b1f021c5ae78b8e2760c141a77dcc) Thanks [@rezrah](https://github.com/rezrah)! - Collection of UI bugfixes:
-
   - Sidebar offset added to prevent links being trapped under fixed header
   - Narrow viewport overflow bug fixed
   - Table of contents presentation fixed on narrow viewport, and has improved presentation on wider breakpoints.
@@ -190,7 +200,6 @@
 ### Minor Changes
 
 - [#20](https://github.com/primer/doctocat-nextjs/pull/20) [`be8bc6a`](https://github.com/primer/doctocat-nextjs/commit/be8bc6af733ba40bdd4393b876b2653017d7e846) Thanks [@rezrah](https://github.com/rezrah)! - Dropped support for Next.js Pages router in favor of App Router + Nextra v4
-
   - [Read the migration guide from `v0.1.0` to `v0.2.0`](https://github.com/primer/doctocat-nextjs/blob/main/migration-guides/v0.2.0-app-router.md)
 
 ## 0.1.0
@@ -200,7 +209,6 @@
 - [#18](https://github.com/primer/doctocat-nextjs/pull/18) [`bfe68b1`](https://github.com/primer/doctocat-nextjs/commit/bfe68b14e8e3b4383ea41dcbf47373df8a130567) Thanks [@rezrah](https://github.com/rezrah)! - Upgraded internal framework to [Nextra v3](https://the-guild.dev/blog/nextra-3).
 
   To migrate Doctocat to this release, follow these steps:
-
   1. Install the latest version `npm i @primer/doctocat-nextjs@0.1.0`
   2. Rename your `next.config.js` to be `next.config.mjs`. Add `type="module"` to your `package.json` and update the file contents to match the following:
 
@@ -276,7 +284,6 @@
 - [`6f21970`](https://github.com/primer/doctocat-nextjs/commit/6f21970c74f7635be89fc4cd20376d7fe5ca35e7) Thanks [@rezrah](https://github.com/rezrah)! - Switch hero image order with description and reduce `h2` block start margin
 
 - [#6](https://github.com/primer/doctocat-nextjs/pull/6) [`afd4e17`](https://github.com/primer/doctocat-nextjs/commit/afd4e1762f6294a14942d415c693319a874cd3fb) Thanks [@rezrah](https://github.com/rezrah)! - - Add MDX to HTML overrides mechanism and apply to headings and anchors
-
   - Added anchor links to headings to match current functionality on primer.style
 
 - [`b49f218`](https://github.com/primer/doctocat-nextjs/commit/b49f218e9bbc2de720476e21888956bee6081967) Thanks [@rezrah](https://github.com/rezrah)! - Removed sidebar links and added skip to main content a11y link

package/components/layout/article/AccessibilityLabel.module.css

@@ -1,10 +1,6 @@
 .reviewedLabel {
-  display: flex;
-  align-items: center;
-  gap: var(--base-size-8);
   background-color: var(--base-color-scale-purple-0);
-  border-color: transparent;
-  color: var(--brand-color-text-default);
+  color: var(--brand-color-text-default) !important;
   font-weight: var(--brand-text-weight-300);
 }
 

package/components/layout/article/AccessibilityLabel.tsx

@@ -1,5 +1,5 @@
 'use client'
-import {Label} from '@primer/react'
+import {Token} from '@primer/react'
 import {AccessibilityInsetIcon} from '@primer/octicons-react'
 import React from 'react'
 
@@ -11,9 +11,12 @@ type AccessibilityLabelProps = {
 
 export function AccessibilityLabel({short}: AccessibilityLabelProps) {
   return (
-    <Label size="large" className={styles.reviewedLabel}>
-      <AccessibilityInsetIcon className={styles.icon} />
-      {short ? 'Reviewed' : 'Reviewed for accessibility'}
-    </Label>
+    <Token
+      as="span"
+      size="large"
+      className={styles.reviewedLabel}
+      leadingVisual={() => <AccessibilityInsetIcon className={styles.icon} aria-hidden="true" />}
+      text={short ? 'Reviewed' : 'Reviewed for accessibility'}
+    />
   )
 }

package/components/layout/article/ReadinessLabel.module.css

@@ -1,10 +1,6 @@
 .label {
-  display: flex;
-  align-items: center;
-  gap: var(--base-size-8);
   background-color: var(--base-color-scale-green-0);
-  border-color: transparent;
-  color: var(--brand-color-text-default);
+  color: var(--brand-color-text-default) !important;
   font-weight: var(--brand-text-weight-300);
 }
 

package/components/layout/article/ReadinessLabel.tsx

@@ -1,15 +1,18 @@
 'use client'
 import React from 'react'
-import {Label} from '@primer/react'
+import {Token} from '@primer/react'
 import {CheckIcon} from '@primer/octicons-react'
 
 import styles from './ReadinessLabel.module.css'
 
 export function ReadinessLabel() {
   return (
-    <Label size="large" className={styles.label}>
-      <CheckIcon className={styles.icon} />
-      Ready to use
-    </Label>
+    <Token
+      as="span"
+      size="large"
+      className={styles.label}
+      leadingVisual={() => <CheckIcon className={styles.icon} aria-hidden="true" />}
+      text="Ready to use"
+    />
   )
 }

package/components/layout/code-block/ReactCodeBlock.tsx

@@ -205,13 +205,13 @@ export function ReactCodeBlock(props: ReactCodeBlockProps) {
  * Helper function to turn Nextra <code> children into plain text
  */
 function getCodeFromChildren(children: React.ReactNode) {
-  if (!React.isValidElement(children) || !children.props?.children) return ''
-
-  // Flattens the nested spans and combine their text content if it's a react child
   const extractText = (node: React.ReactNode): string => {
     if (typeof node === 'string') return node
     if (Array.isArray(node)) return node.map(extractText).join('')
-    if (React.isValidElement(node) && node.props?.children) return extractText(node.props.children)
+    if (React.isValidElement(node)) {
+      const element = node as React.ReactElement<{children?: React.ReactNode}>
+      return extractText(element.props.children)
+    }
     return ''
   }
 

package/components/layout/global-search/GlobalSearch.tsx

@@ -170,6 +170,7 @@ export const GlobalSearch = forwardRef<HTMLInputElement, GlobalSearchProps>(
         <FormControl>
           <FormControl.Label visuallyHidden>Search</FormControl.Label>
           <TextInput
+            as="input"
             contrast
             type="search"
             className={styles.GlobalSearch__searchInput}

package/components/layout/header/Header.tsx

@@ -109,7 +109,13 @@ export function Header({siteTitle, flatDocsDirectories, pageMap}: HeaderProps) {
                 <Text as="p" size="300" weight="semibold">
                   Search
                 </Text>
-                <IconButton icon={XIcon} variant="invisible" aria-label="Close search" onClick={closeSearch} />
+                <IconButton
+                  as="button"
+                  icon={XIcon}
+                  variant="invisible"
+                  aria-label="Close search"
+                  onClick={closeSearch}
+                />
               </Stack>
             </div>
           </FocusOn>
@@ -117,12 +123,14 @@ export function Header({siteTitle, flatDocsDirectories, pageMap}: HeaderProps) {
         <div>
           <Stack direction="horizontal" padding="none" gap={4}>
             <IconButton
+              as="button"
               icon={colorMode === 'light' ? SunIcon : MoonIcon}
               variant="invisible"
               aria-label={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
               onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}
             />
             <IconButton
+              as="button"
               ref={searchTriggerRef}
               className={styles.Header__searchButton}
               icon={SearchIcon}
@@ -132,6 +140,7 @@ export function Header({siteTitle, flatDocsDirectories, pageMap}: HeaderProps) {
             />
             <div className={styles.Header__navDrawerContainer}>
               <IconButton
+                as="button"
                 icon={ThreeBarsIcon}
                 variant="invisible"
                 aria-label="Menu"

package/components/layout/nav-drawer/NavDrawer.tsx

@@ -26,7 +26,7 @@ export function NavDrawer({isOpen, onDismiss, pageMap}: NavDrawerProps) {
               <Link as={NextLink} href="https://primer.style" className={styles.headerLink}>
                 Explore
               </Link>
-              <IconButton icon={XIcon} aria-label="Close" onClick={onDismiss} variant="invisible" />
+              <IconButton as="button" icon={XIcon} aria-label="Close" onClick={onDismiss} variant="invisible" />
             </div>
           </div>
           <div className={styles.navContainer}>{/* <PrimerNavItems items={primerNavItems} /> */}</div>

package/components/layout/related-content-links/getRelatedPages.tsx

@@ -66,8 +66,11 @@ function titleToString(title: React.ReactNode): string {
       if (typeof child === 'string' || typeof child === 'number') {
         return child.toString()
       }
-      if (React.isValidElement(child) && child.props.children) {
-        return titleToString(child.props.children)
+      if (React.isValidElement(child)) {
+        const element = child as React.ReactElement<{children?: React.ReactNode}>
+        if (element.props.children) {
+          return titleToString(element.props.children)
+        }
       }
       return ''
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.7.1-rc.bf9f37a",
+  "version": "0.8.0-rc.abeed68",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "type": "module",
@@ -25,16 +25,14 @@
     "react-dom": ">=18.0.0 <20.0.0"
   },
   "dependencies": {
-    "@next/mdx": "15.5.2",
+    "@next/mdx": "15.5.7",
     "@primer/octicons-react": "19.15.1",
-    "@primer/react": "^38.0.0",
+    "@primer/react": "^38.3.0",
     "@types/lodash.debounce": "^4.0.9",
-    "framer-motion": "12.4.0",
+    "framer-motion": "12.23.24",
     "lodash.debounce": "^4.0.8",
     "nextra": "4.4.0",
-    "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0",
-    "react-focus-on": "3.9.4",
+    "react-focus-on": "^3.10.0",
     "react-live": "^4.1.8"
   },
   "devDependencies": {
@@ -44,19 +42,15 @@
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20.19.0",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "clsx": "2.1.1",
     "jsdom": "^26.0.1",
-    "next": "15.5.2",
+    "next": "15.5.7",
     "styled-components": "5.3.11",
     "vitest": "^3.2.4"
-  },
-  "overrides": {
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1"
   }
 }