Merge branch 'next-major' of github.com:primer/react into mp/deprecat…

…e-legacy-label

.changeset/deprecate-actionlistv1-promote-actionlistv2.md

@@ -1,6 +1,7 @@
 ---
 '@primer/react': major
 ---
+<br />
 
 ### ActionList
 

.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md

@@ -2,6 +2,8 @@
 '@primer/react': major
 ---
 
+<br />
+
 ### ActionMenu
 
 ActionMenu has been rewritten with a composable API, design updates and accessibility fixes.

.changeset/deprecate-dropdownmenu.md

@@ -2,6 +2,8 @@
 '@primer/react': major
 ---
 
+<br />
+
 ### DropdownMenu
 
 DropdownMenu has been deprecated in favor of ActionMenu with ActionList

.changeset/odd-apes-guess.md

@@ -2,6 +2,10 @@
 "@primer/react": major
 ---
 
+<br />
+
+### PageLayout
+
 `PageLayout` is being graduated from the `drafts` bundle to the `main` bundle. 
 
 To upgrade, rewrite your imports accordingly:

.changeset/smooth-cameras-prove.md

@@ -2,6 +2,8 @@
 '@primer/react': major
 ---
 
+<br />
+
 ### SelectMenu
 
 ⚠️ `SelectMenu` has been deprecated. Please use `ActionMenu` instead.

.github/workflows/release.yml

@@ -4,12 +4,23 @@ on:
   push:
     branches:
       - main
-      - 'next/**'
+      - next-major
 
 jobs:
-  release:
-    name: Release
+  release-main:
+    if: github.ref_name == 'main'
+    name: Main
     uses: primer/.github/.github/workflows/release.yml@main
     secrets:
       gh_token: ${{ secrets.GPR_AUTH_TOKEN_SHARED }}
       npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
+
+  release-next-major:
+    if: github.ref_name == 'next-major'
+    name: Next major
+    uses: primer/.github/.github/workflows/release.yml@main
+    with:
+      title: Release tracking (next major)
+    secrets:
+      gh_token: ${{ secrets.GPR_AUTH_TOKEN_SHARED }}
+      npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}

.github/workflows/release_canary.yml

@@ -3,7 +3,8 @@ on:
   push:
     branches-ignore:
       - 'main'
-      - 'changeset-release/main'
+      - 'next-major'
+      - 'changeset-release/**'
 
 jobs:
   release-canary:

.github/workflows/release_candidate.yml

@@ -4,11 +4,23 @@ on:
   push:
     branches:
       - 'changeset-release/main'
+      - 'changeset-release/next-major'
 
 jobs:
   release-candidate:
-    name: Candidate
+    if: github.ref_name == 'changeset-release/main'
+    name: Candidate (@next)
     uses: primer/.github/.github/workflows/release_candidate.yml@main
     secrets:
       gh_token: ${{ secrets.GITHUB_TOKEN }}
       npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
+
+  release-candidate-next-major:
+    if: github.ref_name == 'changeset-release/next-major'
+    name: Candidate (@next-major)
+    uses: primer/.github/.github/workflows/release_candidate.yml@main
+    with:
+      tag: next-major
+    secrets:
+      gh_token: ${{ secrets.GITHUB_TOKEN }}
+      npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}

.storybook/preview.js

@@ -116,7 +116,7 @@ const withThemeProvider = (Story, context) => {
 export const decorators = [withThemeProvider, withPerformance]
 
 addons.setConfig({
-  // Some stories may set up keyboard event handlers, which can can be interfered
+  // Some stories may set up keyboard event handlers, which can be interfered
   // with by these keyboard shortcuts.
   enableShortcuts: false
 })

CHANGELOG.md

@@ -83,7 +83,7 @@
 
 * [#1814](https://github.com/primer/react/pull/1814) [`384c3756`](https://github.com/primer/react/commit/384c375649da0718cc66b088e3ec5928afbeaded) Thanks [@pksjce](https://github.com/pksjce)! - Upgrade @primer/behaviors
 
-- [#1804](https://github.com/primer/react/pull/1804) [`aa09ed79`](https://github.com/primer/react/commit/aa09ed790ba9461a4516c546924a4673c0b21462) Thanks [@rezrah](https://github.com/rezrah)! - Fixes bug in PointerBox component where caret doesn't inherit correct styling. Backwards compataible with previous API.
+- [#1804](https://github.com/primer/react/pull/1804) [`aa09ed79`](https://github.com/primer/react/commit/aa09ed790ba9461a4516c546924a4673c0b21462) Thanks [@rezrah](https://github.com/rezrah)! - Fixes bug in PointerBox component where caret doesn't inherit correct styling. Backwards compatible with previous API.
 
 ## 34.2.0
 
@@ -277,7 +277,7 @@
 
 ### Patch Changes
 
-- [#1598](https://github.com/primer/react/pull/1598) [`3bb895f1`](https://github.com/primer/react/commit/3bb895f1a2cbd36d509f005524878d14218acb39) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Better semantics for accessibile ActionList.Group
+- [#1598](https://github.com/primer/react/pull/1598) [`3bb895f1`](https://github.com/primer/react/commit/3bb895f1a2cbd36d509f005524878d14218acb39) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Better semantics for accessible ActionList.Group
 
 * [#1601](https://github.com/primer/react/pull/1601) [`250e4b00`](https://github.com/primer/react/commit/250e4b00f4d996b6125d381bae2487b57156687c) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Use icon instead of input for multiple selection in ActionList
 
@@ -657,7 +657,7 @@
 
 - [`d20a5996`](https://github.com/primer/react/commit/d20a5996aafdbc6446f13aaa7a489394926f083a) [#1209](https://github.com/primer/react/pull/1209) Thanks [@dgreif](https://github.com/dgreif)! - Allow Overlay height and width to be set through AnchoredOverlay
   Allow ActionList Items to supply an `id` instead of `key`
-  Performance imporvements when ActionList is not given any groups
+  Performance improvements when ActionList is not given any groups
   Enable focus zone as soon as AnchoredOverlay opens
 
 * [`d29741ca`](https://github.com/primer/react/commit/d29741cab4bfa4249000e5b2479e99f5aeea3189) [#1196](https://github.com/primer/react/pull/1196) Thanks [@dgreif](https://github.com/dgreif)! - Allow custom `children` in `ActionItem`. `text` and `description` can still be provided as a shortcut, but `children` is now available if you need more control over the rending of the item, without sacrificing benefits from `Item` by using `renderItem`.

contributor-docs/adrs/adr-002-behavior-isolation.md

@@ -59,12 +59,12 @@ Building behaviors in React Hooks gives us the ability to provide things like st
 
 #### Other
 
-- The custom element and web component API progress slower than React due to changes needing to go through the whatwq standards process.
+- The custom element and web component API progress slower than React due to changes needing to go through the whatwg standards process.
 
 #### Risks of not switching to custom elements for behaviors
 
 - We spend extra time building behaviors in React that have already been built in our [custom elements library](https://github.github.io/web-systems-documentation/#custom-elements).
-  - There are currently 19 behaviors/components listed on the custom elements documentation site. Several of these we have already implemented in React in either Priemr React, Doctocat, or other React applications at GitHub which can be upstreamed (details-dialog, details-menu, clipboard-copy, text-expander, autocomplete, task-list via drag and drop hooks, tab-container, text-expander).
+  - There are currently 19 behaviors/components listed on the custom elements documentation site. Several of these we have already implemented in React in either Primer React, Doctocat, or other React applications at GitHub which can be upstreamed (details-dialog, details-menu, clipboard-copy, text-expander, autocomplete, task-list via drag and drop hooks, tab-container, text-expander).
 - We decide not to invest further in React at GitHub and have wasted time we could have spent building more custom elements.
   - This seems unlikely as there seems to be clear consensus that we will continue to build more and more highly interactive products.
 - The React library is abandoned and becomes obsolete.

docs/content/InputField.mdx

@@ -203,7 +203,7 @@ The container that handles the layout and passes the relevant IDs and ARIA attri
   />
   <PropsTableRow
     name="validationMap"
-    type="Record<string, 'error'|'sucess'>"
+    type="Record<string, 'error'|'success'>"
     description="A map of validation statuses and their associated validation keys. When one of the validation keys is passed to the `validationResult` prop, the associated validation message will be rendered in the correct style"
   />
   <PropsTableRow name="validationResult" type="string" description="The key of the validation message to show " />

docs/content/PageLayout.mdx

@@ -111,7 +111,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 
 ### PageLayout
 
-<!-- TODO: Resoponsive variants -->
+<!-- TODO: Responsive variants -->
 
 <PropsTable>
   <PropsTableRow

docs/content/deprecated/SelectMenu.md

@@ -124,7 +124,7 @@ Use the `align='right'` prop to align the modal to the right. Note that this onl
 
 ## SelectMenu.List
 
-Used to wrap the select menu list content. All menu items **must** be wrapped in a SelectMenu.List in order for the accessbility keyboard handling to function properly. If you are using the `SelectMenu.TabPanel` you do not need to provide a `SelectMenu.List` as that component renders a `SelectMenu.List` as a wrapper.
+Used to wrap the select menu list content. All menu items **must** be wrapped in a SelectMenu.List in order for the accessibility keyboard handling to function properly. If you are using the `SelectMenu.TabPanel` you do not need to provide a `SelectMenu.List` as that component renders a `SelectMenu.List` as a wrapper.
 
 ```jsx deprecated
 <SelectMenu.List>{/* all menu  list items are wrapped in the list*/}</SelectMenu.List>
@@ -188,7 +188,7 @@ SelectMenu.Filter components receive all the props that the [TextInput](/TextInp
 
 ## SelectMenu.Tabs
 
-Use `SelectMenu.Tabs` to wrap the the tab navigation and `SelectMenu.Tab` for each tab in the navigation.
+Use `SelectMenu.Tabs` to wrap the tab navigation and `SelectMenu.Tab` for each tab in the navigation.
 
 `SelectMenu.TabPanel` should wrap each corresponding panel for each of the tabs. The `tabName` prop for each `SelectMenu.TabPanel` must match the name provided in the `tabName` prop on `SelectMenu.Tab`.
 

docs/content/linting.md

@@ -32,4 +32,4 @@ description: Primer React offers an ESLint plugin to enforce best practices and
    }
    ```
 
-See the [eslint-plugin-primer-react](https://github.com/primer/eslint-plugin-primer-react) respository for a list of included lint rules.
+See the [eslint-plugin-primer-react](https://github.com/primer/eslint-plugin-primer-react) repository for a list of included lint rules.

docs/content/overriding-styles.mdx

@@ -55,7 +55,7 @@ Just like [values passed to system props](https://styled-system.com/responsive-s
 
 ## Nesting, pseudo-classes, and pseudo-elements
 
-The `sx` prop also allows for declaring styles based on media queries, psueudo-classes, and pseudo-elements. This example, though contrived, demonstrates the ability:
+The `sx` prop also allows for declaring styles based on media queries, pseudo-classes, and pseudo-elements. This example, though contrived, demonstrates the ability:
 
 ```jsx live
 <Box

docs/content/theming.md

@@ -33,7 +33,7 @@ import deepmerge from 'deepmerge'
 
 const customTheme = deepmerge(theme, {
   fonts: {
-    mono: 'Monolisa, monospace'
+    mono: 'MonoLisa, monospace'
   }
 })
 
@@ -100,7 +100,7 @@ See the [Styled System Reference Table](https://styled-system.com/table) for a c
 
 ### themeGet
 
-The `themeGet` function is a convienient way to reference theme values in styled-components template literals:
+The `themeGet` function is a convenient way to reference theme values in styled-components template literals:
 
 ```js
 import {themeGet} from '@primer/react'

docs/content/useOnOutsideClick.mdx

@@ -52,6 +52,6 @@ You can also pass an array of `ignoredRefs` to prevent calling the callback func
 
 | Name           | Type                              | Default | Description                                                                                                                     |
 | :------------- | :-------------------------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------------ |
-| onOutsideClick | `function`                        |         | Function to call when user clicks outside of the container. Usually this manages the state of the visibilitiy of the container. |
+| onOutsideClick | `function`                        |         | Function to call when user clicks outside of the container. Usually this manages the state of the visibility of the container. |
 | ignoredRefs    | `React.RefObject<HTMLElement> []` |         | Elements outside of the container to ignore clicks on.                                                                          |
 | containerRef   | `React.RefObject<HTMLElement>`    |         | Required. A ref for the containing element.                                                                                     |

docs/content/useOpenAndCloseFocus.mdx

@@ -4,7 +4,7 @@ title: useOpenAndCloseFocus
 
 `useOpenAndCloseFocus` is a utility Hook that manages focusing an element when a component is first mounted, and returns focus to an element on the page when that component unmounts.
 
-If no ref is passed to `inititalFocusRef` , the hook focuses the first focusable element inside of the container.
+If no ref is passed to `initialFocusRef` , the hook focuses the first focusable element inside of the container.
 
 
 ### Usage

docs/gatsby-node.js

@@ -41,7 +41,7 @@ exports.onCreateWebpackConfig = ({actions, plugins, loaders, getConfig}) => {
 exports.sourceNodes = ({actions, createNodeId, createContentDigest}) => {
   const {createNode} = actions
 
-  // Extract compontent metadata from source files
+  // Extract component metadata from source files
   const files = globby.sync(['../src/**/*.tsx'], {absolute: true})
   const data = docgen.parse(files, {
     savePropValueAsString: true,

src/ActionMenu.tsx

@@ -22,12 +22,12 @@ export type ActionMenuProps = {
   children: React.ReactElement[] | React.ReactElement
 
   /**
-   * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `onOpenChange`.
+   * If defined, will control the open/closed state of the overlay. Must be used in conjunction with `onOpenChange`.
    */
   open?: boolean
 
   /**
-   * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.
+   * If defined, will control the open/closed state of the overlay. Must be used in conjunction with `open`.
    */
   onOpenChange?: (s: boolean) => void
 } & Pick<AnchoredOverlayProps, 'anchorRef'>

src/Autocomplete/AutocompleteInput.tsx

@@ -132,7 +132,7 @@ const AutocompleteInput = React.forwardRef(
 
       // TODO: fix bug where this function prevents `onChange` from being triggered if the highlighted item text
       //       is the same as what I'm typing
-      //       e.g.: typing 'tw' highights 'two', but when I 'two', the text input change does not get triggered
+      //       e.g.: typing 'tw' highlights 'two', but when I 'two', the text input change does not get triggered
       if (highlightRemainingText && autocompleteSuggestion && (inputValue || isMenuDirectlyActivated)) {
         inputRef.current.value = autocompleteSuggestion
 
@@ -141,7 +141,7 @@ const AutocompleteInput = React.forwardRef(
         }
       }
 
-      // calling this useEffeect when `highlightRemainingText` changes breaks backspace functionality
+      // calling this useEffect when `highlightRemainingText` changes breaks backspace functionality
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [autocompleteSuggestion, inputValue, inputRef, isMenuDirectlyActivated])
 

src/Label.tsx

@@ -68,11 +68,11 @@ export const variants: Record<LabelColorOptions, BetterSystemStyleObject> = {
 const sizes: Record<LabelSizeKeys, BetterSystemStyleObject> = {
   small: {
     height: '20px',
-    padding: '0 7px' // hard-coded to align with Primer ViewCompnents and Primer CSS
+    padding: '0 7px' // hard-coded to align with Primer ViewComponents and Primer CSS
   },
   large: {
     height: '24px',
-    padding: '0 10px' // hard-coded to align with Primer ViewCompnents and Primer CSS
+    padding: '0 10px' // hard-coded to align with Primer ViewComponents and Primer CSS
   }
 }
 

src/PageLayout/PageLayout.tsx

@@ -308,7 +308,7 @@ const Pane: React.FC<PageLayoutPaneProps> = ({
         )
       }
     >
-      {/* Show a horiztonal divider when viewport is narrow. Otherwise, show a vertical divider. */}
+      {/* Show a horizontal divider when viewport is narrow. Otherwise, show a vertical divider. */}
       <HorizontalDivider
         variant="none"
         variantWhenNarrow={computedDividerWhenNarrow}

src/SelectMenu/SelectMenuItem.tsx

@@ -109,7 +109,7 @@ const SelectMenuItem = forwardRef<HTMLAnchorElement, SelectMenuItemInteralProps>
     const itemRef = forwardedRef ?? backupRef
 
     // close the menu when an item is clicked
-    // this can be overriden if the user provides a `onClick` prop and prevents default in it
+    // this can be overridden if the user provides a `onClick` prop and prevents default in it
     const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
       onClick && onClick(e)
 

src/TextInputWithTokens.tsx

@@ -135,7 +135,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
   const handleTokenRemove = (tokenId: string | number) => {
     onTokenRemove(tokenId)
 
-    // HACK: wait a tick for the the token node to be removed from the DOM
+    // HACK: wait a tick for the token node to be removed from the DOM
     setTimeout(() => {
       const nextElementToFocus = containerRef.current?.children[selectedTokenIndex || 0] as HTMLElement | undefined
 

src/ThemeProvider.tsx

@@ -51,7 +51,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
 
   const resolvedColorModePassthrough = React.useRef(
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore This custom variable does not exist on window because we set it outselves
+    // @ts-ignore This custom variable does not exist on window because we set it ourselves
     typeof window !== 'undefined' ? window.__PRIMER_RESOLVED_SERVER_COLOR_MODE : undefined
   )
 
@@ -68,7 +68,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
 
   // this effect will only run on client
   React.useEffect(
-    function updateColorModeAfterServerPassthorugh() {
+    function updateColorModeAfterServerPassthrough() {
       const resolvedColorModeOnClient = resolveColorMode(colorMode, systemColorMode)
 
       if (resolvedColorModePassthrough.current) {

src/__tests__/Autocomplete.test.tsx

@@ -311,7 +311,7 @@ describe('Autocomplete', () => {
       expect(getByDisplayValue('zero')).toBeDefined()
     })
 
-    it('clears the input value when when the user hits Escape', () => {
+    it('clears the input value when the user hits Escape', () => {
       const {container} = HTMLRender(<LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: []}} />)
       const inputNode = container.querySelector('#autocompleteInput')
 

src/__tests__/Link.test.tsx

@@ -37,11 +37,11 @@ describe('Link', () => {
     expect(render(<Link as="button" />)).toMatchSnapshot()
   })
 
-  it('respectes the "muted" prop', () => {
+  it('respects the "muted" prop', () => {
     expect(render(<Link muted />)).toMatchSnapshot()
   })
 
-  it('respectes the  "sx" prop when "muted" prop is also passed', () => {
+  it('respects the  "sx" prop when "muted" prop is also passed', () => {
     expect(render(<Link muted sx={{color: 'fg.onEmphasis'}} />)).toMatchSnapshot()
   })
 })

src/__tests__/ThemeProvider.test.tsx

@@ -3,7 +3,7 @@ import 'jest-styled-components'
 import React from 'react'
 import {Text, ThemeProvider, useColorSchemeVar, useTheme} from '..'
 
-// window.matchMedia() is not implmented by JSDOM so we have to create a mock:
+// window.matchMedia() is not implemented by JSDOM so we have to create a mock:
 // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
 Object.defineProperty(window, 'matchMedia', {
   writable: true,

src/__tests__/__snapshots__/Link.test.tsx.snap

@@ -103,7 +103,7 @@ exports[`Link renders consistently 1`] = `
 />
 `;
 
-exports[`Link respectes the  "sx" prop when "muted" prop is also passed 1`] = `
+exports[`Link respects the  "sx" prop when "muted" prop is also passed 1`] = `
 .c0 {
   color: #57606a;
   -webkit-text-decoration: none;
@@ -140,7 +140,7 @@ exports[`Link respectes the  "sx" prop when "muted" prop is also passed 1`] = `
 />
 `;
 
-exports[`Link respectes the "muted" prop 1`] = `
+exports[`Link respects the "muted" prop 1`] = `
 .c0 {
   color: #57606a;
   -webkit-text-decoration: none;