Merge branch 'main' into mp/styled-components-v5-upgrade

.changeset/tame-foxes-tan.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix `MarkdownEditor` file uploads inserting the URL into the wrong input when an overlay is open

.changeset/tidy-melons-type.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+---
+
+Prevents body scroll when Dialog (the newer Dialog) is open
+
+<!-- Changed components: Dialog -->

docs/content/Checkbox.mdx

@@ -2,7 +2,7 @@
 title: Checkbox
 description: Use checkboxes to toggle between checked and unchecked states in a list or as a standalone form field
 status: Alpha
-source: https://github.com/primer/react/blob/main/src/Checkbox.tsx
+source: https://github.com/primer/react/blob/main/src/Checkbox
 storybook: '/react/storybook?path=/story/components-forms-checkbox'
 componentId: checkbox
 ---

docs/content/CircleBadge.mdx

@@ -2,7 +2,7 @@
 componentId: circle_badge
 title: CircleBadge
 status: Alpha
-source: https://github.com/primer/react/blob/main/src/CircleBadge.tsx
+source: https://github.com/primer/react/blob/main/src/CircleBadge
 ---
 
 import data from '../../src/CircleBadge/CircleBadge.docs.json'

docs/content/CircleOcticon.mdx

@@ -2,6 +2,7 @@
 componentId: circle_octicon
 title: CircleOcticon
 status: Alpha
+source: https://github.com/primer/react/blob/main/src/CircleOcticon
 ---
 
 import data from '../../src/CircleOcticon/CircleOcticon.docs.json'

docs/content/Dialog.mdx

@@ -1,6 +1,7 @@
 ---
 title: Dialog
 status: Alpha
+source: https://github.com/primer/react/blob/main/src/Dialog
 ---
 
 import data from '../../src/Dialog.docs.json'

docs/content/FilterList.mdx

@@ -2,6 +2,7 @@
 componentId: filter_list
 title: FilterList
 status: Alpha
+source: https://github.com/primer/react/blob/main/src/FilterList
 ---
 
 import data from '../../src/FilterList/FilterList.docs.json'

docs/content/FilteredSearch.mdx

@@ -2,6 +2,7 @@
 componentId: filtered_search
 title: FilteredSearch
 status: Alpha
+source: https://github.com/primer/react/blob/main/src/FilteredSearch
 ---
 
 import data from '../../src/FilteredSearch/FilteredSearch.docs.json'

docs/content/Heading.mdx

@@ -1,7 +1,7 @@
 ---
 title: Heading
 description: Use Heading to structure your content and provide an accessible experience for users of assistive technologies.
-source: https://github.com/primer/react/blob/main/src/Heading.tsx
+source: https://github.com/primer/react/blob/main/src/Heading
 storybook: '/react/storybook?path=/story/components-heading--default'
 status: Alpha
 componentId: heading

docs/content/LabelGroup.mdx

@@ -1,7 +1,7 @@
 ---
 title: LabelGroup
 description: Use LabelGroup components to add commonly used margins and other layout constraints to groups of Labels
-source: https://github.com/primer/react/blob/main/src/LabelGroup.tsx
+source: https://github.com/primer/react/blob/main/src/LabelGroup
 status: Alpha
 componentId: label_group
 ---

docs/content/Overlay.mdx

@@ -3,7 +3,7 @@ title: Overlay
 description: Use Overlay to provide a flexible floating surface for displaying transient content such as menus, selection options, dialogs, and more.
 componentId: overlay
 status: Alpha
-source: https://github.com/primer/react/blob/main/src/Overlay.tsx
+source: https://github.com/primer/react/blob/main/src/Overlay
 storybook: '/react/storybook?path=/story/private-components-overlay--dropdown-overlay'
 ---
 

docs/content/Pagehead.md

@@ -2,7 +2,7 @@
 componentId: pagehead
 title: Pagehead
 description: Use Pagehead to provide a clear, separated page title.
-source: https://github.com/primer/react/blob/main/src/Pagehead.tsx
+source: https://github.com/primer/react/blob/main/src/Pagehead
 status: Alpha
 ---
 

docs/content/PointerBox.mdx

@@ -3,7 +3,7 @@ title: PointerBox
 description: A customisable, bordered Box with a caret pointer
 componentId: pointer_box
 status: Alpha
-source: https://github.com/primer/react/blob/main/src/PointerBox.tsx
+source: https://github.com/primer/react/blob/main/src/PointerBox
 ---
 
 import data from '../../src/PointerBox/PointerBox.docs.json'

docs/content/Popover.md

@@ -3,7 +3,7 @@ title: Popover
 description: Use Popovers to bring attention to specific user interface elements and suggest an action or to guide users through a new experience
 componentId: popover
 status: Alpha
-source: https://github.com/primer/react/blob/main/src/Popover.tsx
+source: https://github.com/primer/react/blob/main/src/Popover
 ---
 
 import data from '../../src/Popover/Popover.docs.json'

docs/content/ProgressBar.mdx

@@ -2,7 +2,7 @@
 title: ProgressBar
 componentId: progress_bar
 status: Alpha
-source: https://github.com/primer/react/blob/main/src/ProgressBar.tsx
+source: https://github.com/primer/react/blob/main/src/ProgressBar
 ---
 
 import data from '../../src/ProgressBar/ProgressBar.docs.json'

docs/content/Radio.mdx

@@ -3,7 +3,7 @@ componentId: radio
 title: Radio
 description: Use radios when a user needs to select one option from a list
 status: Alpha
-source: https://github.com/primer/react/blob/main/src/Radio.tsx
+source: https://github.com/primer/react/blob/main/src/Radio
 storybook: '/react/storybook?path=/story/components-forms-radiogroup'
 ---
 

docs/content/RelativeTime.mdx

@@ -2,7 +2,7 @@
 componentId: relative-time
 title: RelativeTime
 status: Alpha
-source: https://github.com/primer/react/blob/main/src/RelativeTime.tsx
+source: https://github.com/primer/react/blob/main/src/RelativeTime
 ---
 
 import data from '../../src/RelativeTime/RelativeTime.docs.json'

docs/content/SelectPanel.mdx

@@ -2,6 +2,7 @@
 componentId: select_panel
 title: SelectPanel
 status: Alpha
+source: https://github.com/primer/react/blob/main/src/SelectPanel
 ---
 
 import data from '../../src/SelectPanel/SelectPanel.docs.json'

docs/content/SubNav.mdx

@@ -2,6 +2,7 @@
 componentId: sub_nav
 title: SubNav
 status: Alpha
+source: https://github.com/primer/react/blob/main/src/SubNav
 ---
 
 import data from '../../src/SubNav/SubNav.docs.json'

docs/content/TabNav.mdx

@@ -2,6 +2,7 @@
 componentId: tab_nav
 title: TabNav
 status: Alpha
+source: https://github.com/primer/react/blob/main/src/TabNav
 ---
 
 import data from '../../src/TabNav/TabNav.docs.json'

docs/content/Text.mdx

@@ -3,6 +3,7 @@ componentId: text
 title: Text
 a11yReviewed: true
 status: Alpha
+source: https://github.com/primer/react/blob/main/src/Text
 ---
 
 import data from '../../src/Text/Text.docs.json'

docs/content/TextInput.mdx

@@ -2,7 +2,7 @@
 componentId: text_input
 title: TextInput
 status: Alpha
-source: https://github.com/primer/react/blob/main/src/TextInput.tsx
+source: https://github.com/primer/react/blob/main/src/TextInput
 storybook: '/react/storybook?path=/story/components-forms-textinput--default'
 ---
 

docs/content/TextInputWithTokens.mdx

@@ -3,7 +3,7 @@ componentId: text_input_with_tokens
 title: TextInputWithTokens
 status: Alpha
 description: Used to show multiple values in one field
-source: https://github.com/primer/react/tree/main/src/TextInputWithTokens.tsx
+source: https://github.com/primer/react/tree/main/src/TextInputWithTokens
 storybook: '/react/storybook?path=/story/components-forms-textinputwithtokens--default'
 ---
 

docs/content/Textarea.mdx

@@ -3,7 +3,7 @@ componentId: textarea
 title: Textarea
 description: Use Textarea for multi-line text input form fields
 status: Alpha
-source: https://github.com/primer/react/blob/main/src/Textarea.tsx
+source: https://github.com/primer/react/blob/main/src/Textarea
 storybook: '/react/storybook?path=/story/components-forms-textarea--textarea-story'
 ---
 

docs/content/Timeline.mdx

@@ -2,6 +2,7 @@
 componentId: timeline
 title: Timeline
 status: Alpha
+source: https://github.com/primer/react/blob/main/src/Timeline
 ---
 
 import data from '../../src/Timeline/Timeline.docs.json'

docs/content/ToggleSwitch.mdx

@@ -3,7 +3,7 @@ componentId: toggle_switch
 title: ToggleSwitch
 description: Toggles a setting on or off, and immediately saves the change
 status: Alpha
-source: https://github.com/primer/react/blob/main/src/ToggleSwitch.tsx
+source: https://github.com/primer/react/blob/main/src/ToggleSwitch
 storybook: '/react/storybook?path=/story/components-toggleswitch-examples--default'
 ---
 

docs/content/Tooltip.mdx

@@ -2,6 +2,7 @@
 componentId: tooltip
 title: Tooltip
 status: Alpha
+source: https://github.com/primer/react/blob/main/src/Tooltip.tsx
 ---
 
 import data from '../../src/Tooltip.docs.json'

docs/content/Truncate.mdx

@@ -2,6 +2,7 @@
 componentId: truncate
 title: Truncate
 status: Alpha
+source: https://github.com/primer/react/blob/main/src/Truncate
 ---
 
 import data from '../../src/Truncate/Truncate.docs.json'

docs/content/UnderlineNav.mdx

@@ -2,6 +2,7 @@
 componentId: underline_nav
 title: UnderlineNav
 status: Alpha
+source: https://github.com/primer/react/tree/main/src/UnderlineNav
 ---
 
 import data from '../../src/UnderlineNav/UnderlineNav.docs.json'

src/Dialog/Dialog.tsx

@@ -287,6 +287,22 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
     [onClose],
   )
 
+  React.useEffect(() => {
+    const bodyOverflowStyle = document.body.style.overflow || ''
+    // If the body is already set to overflow: hidden, it likely means
+    // that there is already a modal open. In that case, we should bail
+    // so we don't re-enable scroll after the second dialog is closed.
+    if (bodyOverflowStyle === 'hidden') {
+      return
+    }
+
+    document.body.style.overflow = 'hidden'
+
+    return () => {
+      document.body.style.overflow = bodyOverflowStyle
+    }
+  }, [])
+
   const header = (renderHeader ?? DefaultHeader)(defaultedProps)
   const body = (renderBody ?? DefaultBody)(defaultedProps)
   const footer = (renderFooter ?? DefaultFooter)(defaultedProps)

src/drafts/hooks/useSyntheticChange.ts

@@ -94,7 +94,7 @@ export const useSyntheticChange = ({inputRef, fallbackEventHandler}: UseSyntheti
       const input = inputRef.current
       if (!input) return
 
-      input.focus() // the input must be focused to execute execCommand
+      input.focus()
 
       const replaceRange = replaceRange_ ?? [
         input.selectionStart ?? input.value.length,
@@ -113,6 +113,10 @@ export const useSyntheticChange = ({inputRef, fallbackEventHandler}: UseSyntheti
       // but it's a deprecated API and there's no alternative. It also doesn't work in test environments
       let execCommandResult = false
       try {
+        // There is no guarantee the input is focused even after calling `focus()` on it. For example, the focus could
+        // be trapped by an overlay. In that case we must prevent the change from happening in some unexpected target.
+        if (document.activeElement !== input) throw new Error('Input must be focused to use execCommand')
+
         // expand selection to the whole range and replace it with the new value
         input.setSelectionRange(replaceRange[0], replaceRange[1])
         execCommandResult =