chore(release): v36.0.0

.changeset/blue-gorillas-lie.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': major
+---
+
+Update styled-components and related dependencies to v5.x
+
+<!-- Changed components: _none_ -->

.changeset/clever-wolves-move.md

@@ -0,0 +1,8 @@
+---
+'@primer/react': major
+---
+
+Remove components from deprecated
+- `BorderBox`, `ChoiceFieldset`, `Flex`, `Grid`, `Position`, `Dropdown`, `FormGroup`, `SelectMenu`, `InputField`, `Label`
+
+<!-- Changed components: _none_ -->

.changeset/early-timers-speak.md

@@ -0,0 +1,43 @@
+---
+'@primer/react': major
+---
+
+Remove components from draft bundle
+
+* Move UnderlineNav2 (draft) to the main bundle
+
+```diff 
+- import {UnderlineNav} from '@primer/react/drafts'
++ import {UnderlineNav} from '@primer/react'
+```
+
+....
+* Remove TreeView from drafts
+
+```diff
+- import {TreeView} from '@primer/react/drafts'
++ import {TreeView} from '@primer/react'
+```
+
+* Remove SegmentedControl from drafts
+
+```diff
+- import {SegmentedControl} from '@primer/react/drafts'
++ import {SegmentedControl} from '@primer/react'
+```
+
+* Remove NavList from drafts
+
+```diff
+- import {NavList} from '@primer/react/drafts'
++ import {NavList} from '@primer/react'
+```
+
+* Remove SplitPageLayout from drafts
+
+```diff
+- import {SplitPageLayout} from '@primer/react/drafts'
++ import {SplitPageLayout} from '@primer/react'
+```
+
+<!-- Changed components: UnderlineNav, TreeView, SegmentedControl, NavList, SplitPageLayout -->

.changeset/few-rocks-run.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixes type errors that appeared during v36 development. Likely caused by Button updates

.changeset/flat-onions-sort.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": major
+---
+
+- Changes `leadingIcon` and `trailingIcon` to `leadingVisual` and `trailingVisual`
+- Removes `Button.Counter` as a child component, replacing it with a `count` prop. This change allows us to use the `trailingVisual` slot for counters.
+- Removes the `outline` button variant as we wish to only support `invisible` buttons.

.changeset/great-spies-deliver.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove deprecated `extralarge` variant from `Token` and `TextInputWithToken` component

.changeset/kind-readers-grab.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": major
+---
+
+Remove StyledOcticon component. The component was renamed to `Octicon`. Update your imports by swapping `StyledOcticon` with `Octicon`
+
+<!-- Changed components: Octicon -->

.changeset/lemon-dancers-marry.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Deprecates FilterList and FilteredSearch components

.changeset/lovely-windows-juggle.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Makes @types/styled-components an optional peer dependency, not a dependency

.changeset/lucky-coins-guess.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Use createRoot instead of ReactDOM.render for React 18 compatibility.

.changeset/nasty-bottles-draw.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Update minimum version for react and react-dom to v18

.changeset/nine-news-walk.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': major
+---
+
+Remove `DropdownButton` and `DropdownMenu` from deprecated and update the usages across
+
+<!-- Changed components: SelectPanel, ActionList -->

.changeset/odd-socks-hunt.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+The Autocomplete component no longer uses the deprecated ActionList component. There have been minor API updates, but it's largely the same.

.changeset/old-coats-sniff.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Removes 'warning' option from form components' `validationStatus` props

.changeset/poor-wasps-stare.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+---
+
+Use IconButton instead of ButtonClose in v1 Dialog.
+
+<!-- Changed components: Dialog -->

.changeset/popular-rivers-warn.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove support for `activeClassName` for Breadcrumb, SubNav, TabNav, UnderlineNav

.changeset/shaggy-insects-march.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Ensure ActionList item has `border-radius` on hover with `full` variant

.changeset/weak-jokes-chew.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+FilteredActionList now uses new ActionList as a base, and SelectPanel reflects those changes.

.changeset/yellow-windows-accept.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Removes PageLayout.Pane position prop.

.github/workflows/consumer_test.yml

@@ -11,41 +11,33 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 18
           cache: npm
-
-      # `prepare` is a special case in `npm` and likes to run all the time, even
-      # with `--ignore-scripts` and even when using `npm link @primer/react
-      # --ignore-scripts`. This just removes it entirely for the duration of
-      # this workflow.
-      - name: Remove "prepare" script
-        run: npm pkg delete scripts.prepare
-
       - name: Install dependencies
         run: npm ci
-
       - name: Build
         run: npm run build
-
-      - name: Install only production dependencies
-        run: npm ci --production
-
-      - name: Link
-        run: npm link
-
-      - name: Link and test
-        id: link-and-test
+      # Output the artifact as a tarball in `consumer-test`. Write the
+      # information for this package in `consumer-test/pack.json` so we can read
+      # from it later to install the package
+      - name: Create a tarball for the package
+        run: npm pack --pack-destination consumer-test --json > consumer-test/pack.json
+      - name: Clean package directory
+        run: |
+          npm run clean
+          rm -rf node_modules
+      - name: Test
+        id: test
         working-directory: consumer-test
         run: |
+          # Read the filename for the tarball from `pack.json`
+          npm install $(jq -r '.[0].filename' pack.json)
           npm install
-          npm link @primer/react
           npm run check
-
       - name: Add annotation
-        if: failure() && steps.link-and-test.conclusion == 'failure'
+        if: failure() && steps.test.conclusion == 'failure'
         run: |
           echo "::error file=tsconfig.build.json::Test package could not build. See https://github.com/primer/react/blob/main/consumer-test"

consumer-test/App.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import {Box} from '@primer/react'
 
 export default function App() {

consumer-test/package.json

@@ -3,7 +3,13 @@
     "check": "tsc --noEmit"
   },
   "dependencies": {
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@types/styled-components": "^5.1.11",
     "@primer/react": "*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "styled-components": "^5.3.11",
     "typescript": "~4.7.2"
   }
 }

docs/components/ThemeReferenceTree.js

@@ -1,6 +1,5 @@
 import React, {useState} from 'react'
-import {Box, Text} from '@primer/react'
-import {TreeView} from '@primer/react/drafts'
+import {Box, Text, TreeView} from '@primer/react'
 
 export default function ThemeReferenceTree({themeData}) {
   return (