Merge branch 'main' into pageheader-sign-off-review-address

.changeset/few-weeks-serve.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Add `openInFocus` prop (default: true) to `AutocompleteInput`

.changeset/good-bugs-grab.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+SelectPanel2: Minor optimization for escape key event listener binding

.changeset/silent-apricots-fly.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update how gap is set in Stack to work in wide breakpoints

.changeset/slimy-pandas-turn.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Replaced space-small with base-size-6

.changeset/stupid-suns-cheat.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+FormControl: Adds new props to `FormControl.Label`, `requiredText` and `requiredIndicator`

.eslintrc.js

@@ -68,7 +68,11 @@ module.exports = {
     camelcase: [
       'error',
       {
-        allow: ['dark_dimmed'],
+        allow: [
+          'dark_dimmed',
+          // Allow feature flag names that start with `primer_react_`
+          '^primer_react_',
+        ],
       },
     ],
     'primer-react/no-deprecated-colors': ['warn', {checkAllStrings: true}],

.github/workflows/release_tracking.yml

@@ -3,6 +3,8 @@ name: Release Event Tracking
 
 on:
   pull_request:
+    branches:
+      - 'changeset-release/main'
     types:
       - closed
       - opened
@@ -14,6 +16,6 @@ on:
 jobs:
   release-tracking:
     name: Release Tracking
-    uses: primer/.github/.github/workflows/release_tracking.yml@create_release_tracking_workflow
+    uses: primer/.github/.github/workflows/release_tracking.yml@v2.1.0
     secrets:
       datadog_api_key: ${{ secrets.DATADOG_API_KEY }}

docs/content/drafts/PageHeader.mdx

@@ -316,15 +316,15 @@ import {PageHeader} from '@primer/react/drafts'
     noUnnecessaryDeps: true,
     adaptsToThemes: true,
     adaptsToScreenSizes: true,
-    fullTestCoverage: false,
-    usedInProduction: false,
-    usageExamplesDocumented: false,
-    hasStorybookStories: false,
-    designReviewed: false,
-    a11yReviewed: false,
+    fullTestCoverage: true,
+    usedInProduction: true,
+    usageExamplesDocumented: true,
+    hasStorybookStories: true,
+    designReviewed: true,
+    a11yReviewed: true,
     stableApi: false,
-    addressedApiFeedback: false,
-    hasDesignGuidelines: false,
+    addressedApiFeedback: true,
+    hasDesignGuidelines: true,
     hasFigmaComponent: false,
   }}
 />

docs/package.json

@@ -38,7 +38,7 @@
     "eslint": "8.56.0",
     "eslint-config-react-app": "7.0.1",
     "globby": "^11.0.4",
-    "minipass": "^2.9.0",
+    "minipass": "^7.1.1",
     "path-browserify": "^1.0.1",
     "webpack": "5.40.0"
   }

examples/app-router/package.json

@@ -9,7 +9,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@primer/react": "36.18.0",
+    "@primer/react": "36.19.0",
     "next": "^14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/codesandbox/package.json

@@ -20,7 +20,7 @@
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.2.1",
-    "@primer/react": "36.18.0",
+    "@primer/react": "36.19.0",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",

examples/nextjs/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@primer/octicons-react": "19.x",
-    "@primer/react": "36.18.0",
+    "@primer/react": "36.19.0",
     "next": "^14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/react/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @primer/react
 
+## 36.19.0
+
+### Minor Changes
+
+- [#4546](https://github.com/primer/react/pull/4546) [`c81898c93664d224d7a18722cd1abcdcf2d1a510`](https://github.com/primer/react/commit/c81898c93664d224d7a18722cd1abcdcf2d1a510) Thanks [@ayy-bc](https://github.com/ayy-bc)! - TreeView: Add support for `TreeView.LeadingAction`
+
+- [#4574](https://github.com/primer/react/pull/4574) [`9c01a930b97218ea550cd7de3436941990b3b068`](https://github.com/primer/react/commit/9c01a930b97218ea550cd7de3436941990b3b068) Thanks [@pksjce](https://github.com/pksjce)! - ActionBar: Move to main directory. ActionBar can now be imported from `'@primer/react'`
+
+### Patch Changes
+
+- [#4593](https://github.com/primer/react/pull/4593) [`d4e234f52bf63e632d41fe947801d2c16da0b61f`](https://github.com/primer/react/commit/d4e234f52bf63e632d41fe947801d2c16da0b61f) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Update NavList to use the new ActionList.GroupHeading API and Add an "as" prop to specify the heading level as default h3. (No changes expected in the rendered HTML)
+
+- [#4591](https://github.com/primer/react/pull/4591) [`6cce7b749d8502fc851ad8a432a04acff21dec14`](https://github.com/primer/react/commit/6cce7b749d8502fc851ad8a432a04acff21dec14) Thanks [@joshblack](https://github.com/joshblack)! - Update the Stack component so that the `justify` prop correctly updates the layout of items
+
+- [#4572](https://github.com/primer/react/pull/4572) [`ac2502975057dc0330e19fdd2d446f43d77eed92`](https://github.com/primer/react/commit/ac2502975057dc0330e19fdd2d446f43d77eed92) Thanks [@iansan5653](https://github.com/iansan5653)! - TreeView: Always align expand/collapse chevron icon, leading visual, and trailing visual to top of item
+
+- [#4596](https://github.com/primer/react/pull/4596) [`4fa4fae099c425bab58c6f5c3c98b10bbca16012`](https://github.com/primer/react/commit/4fa4fae099c425bab58c6f5c3c98b10bbca16012) Thanks [@keithamus](https://github.com/keithamus)! - Update @github/tab-container-element to latest
+
 ## 36.18.0
 
 ### Minor Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react",
-  "version": "36.18.0",
+  "version": "36.19.0",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -89,7 +89,7 @@
     "@github/markdown-toolbar-element": "^2.1.0",
     "@github/paste-markdown": "^1.4.0",
     "@github/relative-time-element": "^4.1.2",
-    "@github/tab-container-element": "4.5.0",
+    "@github/tab-container-element": "^4.8.0",
     "@lit-labs/react": "1.2.1",
     "@oddbird/popover-polyfill": "^0.3.1",
     "@primer/behaviors": "^1.5.1",
@@ -202,7 +202,7 @@
     "react-dnd-html5-backend": "14.0.2",
     "react-dom": "18.2.0",
     "react-test-renderer": "18.2.0",
-    "recast": "0.23.6",
+    "recast": "0.23.7",
     "rimraf": "5.0.5",
     "rollup": "4.9.6",
     "rollup-plugin-postcss": "4.0.2",

packages/react/src/drafts/ActionBar/ActionBar.docs.json → packages/react/src/ActionBar/ActionBar.docs.json

@@ -1,10 +1,10 @@
 {
   "id": "actionbar",
   "name": "ActionBar",
-  "status": "draft",
-  "a11yReviewed": false,
+  "status": "alpha",
+  "a11yReviewed": true,
   "stories": [],
-  "importPath": "@primer/react/experimental",
+  "importPath": "@primer/react",
   "props": [
     {
       "name": "size",

packages/react/src/drafts/ActionBar/ActionBar.stories.tsx → packages/react/src/ActionBar/ActionBar.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type {Meta} from '@storybook/react'
 import ActionBar from '.'
-import Text from '../../Text'
+import Text from '../Text'
 import {
   PencilIcon,
   BoldIcon,
@@ -18,12 +18,12 @@ import {
   ReplyIcon,
   ThreeBarsIcon,
 } from '@primer/octicons-react'
-import {MarkdownInput} from '../MarkdownEditor/_MarkdownInput'
-import {ViewSwitch} from '../MarkdownEditor/_ViewSwitch'
-import type {MarkdownViewMode} from '../MarkdownEditor/_ViewSwitch'
-import {Box, Dialog, Button, Avatar, ActionMenu, IconButton, ActionList} from '../..'
-import {Divider} from '../../deprecated/ActionList/Divider'
-import mockData from '../SelectPanel2/mock-story-data'
+import {MarkdownInput} from '../drafts/MarkdownEditor/_MarkdownInput'
+import {ViewSwitch} from '../drafts/MarkdownEditor/_ViewSwitch'
+import type {MarkdownViewMode} from '../drafts/MarkdownEditor/_ViewSwitch'
+import {Box, Dialog, Button, Avatar, ActionMenu, IconButton, ActionList} from '../'
+import {Divider} from '../deprecated/ActionList/Divider'
+import mockData from '../drafts/SelectPanel2/mock-story-data'
 
 export default {
   title: 'Drafts/Components/ActionBar',

packages/react/src/drafts/ActionBar/ActionBar.test.tsx → packages/react/src/ActionBar/ActionBar.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {behavesAsComponent} from '../../utils/testing'
+import {behavesAsComponent} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
 

packages/react/src/drafts/ActionBar/ActionBar.tsx → packages/react/src/ActionBar/ActionBar.tsx

@@ -1,20 +1,20 @@
 import type {RefObject, MutableRefObject} from 'react'
 import React, {useState, useCallback, useRef, forwardRef} from 'react'
 import {KebabHorizontalIcon} from '@primer/octicons-react'
-import {ActionList} from '../../ActionList'
-import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
+import {ActionList} from '../ActionList'
+import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 import styled from 'styled-components'
-import sx from '../../sx'
-import {useOnEscapePress} from '../../hooks/useOnEscapePress'
-import type {ResizeObserverEntry} from '../../hooks/useResizeObserver'
-import {useResizeObserver} from '../../hooks/useResizeObserver'
-
-import {useOnOutsideClick} from '../../hooks/useOnOutsideClick'
-import type {IconButtonProps} from '../../Button'
-import {IconButton} from '../../Button'
-import Box from '../../Box'
-import {ActionMenu} from '../../ActionMenu'
-import {useFocusZone, FocusKeys} from '../../hooks/useFocusZone'
+import sx from '../sx'
+import {useOnEscapePress} from '../hooks/useOnEscapePress'
+import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
+import {useResizeObserver} from '../hooks/useResizeObserver'
+
+import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
+import type {IconButtonProps} from '../Button'
+import {IconButton} from '../Button'
+import Box from '../Box'
+import {ActionMenu} from '../ActionMenu'
+import {useFocusZone, FocusKeys} from '../hooks/useFocusZone'
 
 type ChildSize = {
   text: string

packages/react/src/drafts/ActionBar/index.ts → packages/react/src/ActionBar/index.ts

@@ -7,3 +7,4 @@ const ActionBar = Object.assign(Bar, {
 })
 
 export default ActionBar
+export {ActionBar}