diff --git a/.changeset/curly-jars-cough.md b/.changeset/curly-jars-cough.md
new file mode 100644
index 00000000000..2186ffc6dd1
--- /dev/null
+++ b/.changeset/curly-jars-cough.md
@@ -0,0 +1,14 @@
+---
+'@primer/react': major
+---
+
+Remove deprecated experimental `MarkdownEditor` and related experimental components/hooks:
+
+- `MarkdownViewer`
+- `InlineAutocomplete`
+- `useCombobox`
+- `useDynamicTextareaHeight`
+- `useIgnoreKeyboardActionsWhileComposing`
+- `useSafeAsyncCallback`
+- `useSyntheticChange`
+- `useUnifiedFileSelect`
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-colorblind-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-colorblind-linux.png
deleted file mode 100644
index dcdc5e9dc3a..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-colorblind-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-dimmed-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-dimmed-linux.png
deleted file mode 100644
index 7546fe6b08f..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-dimmed-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-high-contrast-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-high-contrast-linux.png
deleted file mode 100644
index 4bb20fc23e6..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-high-contrast-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-linux.png
deleted file mode 100644
index 96340a21121..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-tritanopia-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-tritanopia-linux.png
deleted file mode 100644
index dcdc5e9dc3a..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-dark-tritanopia-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-light-colorblind-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-light-colorblind-linux.png
deleted file mode 100644
index 5bd19582c5f..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-light-colorblind-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-light-high-contrast-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-light-high-contrast-linux.png
deleted file mode 100644
index 4837644f9fb..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-light-high-contrast-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-light-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-light-linux.png
deleted file mode 100644
index e3fbf9d6d4a..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-light-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-light-tritanopia-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-light-tritanopia-linux.png
deleted file mode 100644
index 5bd19582c5f..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Custom-Rendering-light-tritanopia-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-colorblind-linux.png
deleted file mode 100644
index adb4d282aba..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-colorblind-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-dimmed-linux.png
deleted file mode 100644
index 3f5ef570cff..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-dimmed-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-high-contrast-linux.png
deleted file mode 100644
index 6c3cd06a117..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-high-contrast-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-linux.png
deleted file mode 100644
index 147c402e42e..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-tritanopia-linux.png
deleted file mode 100644
index adb4d282aba..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-dark-tritanopia-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-light-colorblind-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-light-colorblind-linux.png
deleted file mode 100644
index b1360b8b542..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-light-colorblind-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-light-high-contrast-linux.png
deleted file mode 100644
index d5e7a9501d5..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-light-high-contrast-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-light-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-light-linux.png
deleted file mode 100644
index 13050e8c39f..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-light-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-light-tritanopia-linux.png
deleted file mode 100644
index b1360b8b542..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Default-light-tritanopia-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-colorblind-linux.png
deleted file mode 100644
index 312706d5963..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-colorblind-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-dimmed-linux.png
deleted file mode 100644
index ac09f3cd4a5..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-dimmed-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-high-contrast-linux.png
deleted file mode 100644
index f92076a9d09..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-high-contrast-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-linux.png
deleted file mode 100644
index 5ceeb886b80..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-tritanopia-linux.png
deleted file mode 100644
index 312706d5963..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-dark-tritanopia-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-light-colorblind-linux.png
deleted file mode 100644
index ace793851dd..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-light-colorblind-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-light-high-contrast-linux.png
deleted file mode 100644
index b4337dd57b9..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-light-high-contrast-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-light-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-light-linux.png
deleted file mode 100644
index 202c040fb5a..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-light-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-light-tritanopia-linux.png
deleted file mode 100644
index ace793851dd..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Playground-light-tritanopia-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-colorblind-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-colorblind-linux.png
deleted file mode 100644
index 59bd34bc307..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-colorblind-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-dimmed-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-dimmed-linux.png
deleted file mode 100644
index a17f2e85010..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-dimmed-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-high-contrast-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-high-contrast-linux.png
deleted file mode 100644
index 7a9afe1f35e..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-high-contrast-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-linux.png
deleted file mode 100644
index a92f8012ebd..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-tritanopia-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-tritanopia-linux.png
deleted file mode 100644
index 59bd34bc307..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-dark-tritanopia-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-light-colorblind-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-light-colorblind-linux.png
deleted file mode 100644
index 8d64938ab52..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-light-colorblind-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-light-high-contrast-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-light-high-contrast-linux.png
deleted file mode 100644
index 514b5db9ea2..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-light-high-contrast-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-light-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-light-linux.png
deleted file mode 100644
index bed9e26679c..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-light-linux.png and /dev/null differ
diff --git a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-light-tritanopia-linux.png b/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-light-tritanopia-linux.png
deleted file mode 100644
index 8d64938ab52..00000000000
Binary files a/.playwright/snapshots/components/InlineAutocomplete.test.ts-snapshots/InlineAutocomplete-Single-Line-light-tritanopia-linux.png and /dev/null differ
diff --git a/docs/content/drafts/InlineAutocomplete.mdx b/docs/content/drafts/InlineAutocomplete.mdx
deleted file mode 100644
index 65b9ff3c541..00000000000
--- a/docs/content/drafts/InlineAutocomplete.mdx
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: InlineAutocomplete
-componentId: inline_autocomplete
-status: Deprecated
-description: Provides inline auto completion suggestions for an input or textarea.
-source: https://github.com/primer/react/tree/main/src/drafts/InlineAutocomplete
-storybook: '/react/storybook?path=/story/deprecated-components-inlineautocomplete--default'
----
-
-import data from '../../../src/drafts/InlineAutocomplete/InlineAutocomplete.docs.json'
-
-```js
-import {InlineAutocomplete} from '@primer/react/drafts'
-```
-
-The `InlineAutocomplete` component extends an `Input` or `Textarea` component to provide inline suggestions, similar to those provided by a code editor.
-
-## Examples
-
-
-
-Input components **must always** be accompanied by a corresponding label to improve support for assistive
-technologies. Examples below are provided for conciseness and may not reflect accessibility best practices.
-
-`InlineAutocomplete` can be used with the [`FormControl`](/FormControl) component to render a corresponding label.
-
-
-
-### Multi-line input
-
-Try typing a `#` symbol to see suggestions. Use `Enter` or click to apply a suggestion.
-
-```javascript live noinline drafts
-const options = ['javascript', 'typescript', 'css', 'html', 'webassembly']
-
-const SimpleExample = () => {
- const [suggestions, setSuggestions] = React.useState([])
-
- return (
- setSuggestions(options.filter(tag => tag.includes(query)))}
- onHideSuggestions={() => setSuggestions([])}
- >
-
-
- )
-}
-
-render(SimpleExample)
-```
-
-### Single-line input
-
-```javascript live noinline drafts
-const options = ['javascript', 'typescript', 'css', 'html', 'webassembly']
-
-const SimpleExample = () => {
- const [suggestions, setSuggestions] = React.useState([])
-
- return (
- setSuggestions(options.filter(tag => tag.includes(query)))}
- onHideSuggestions={() => setSuggestions([])}
- >
-
-
- )
-}
-
-render(SimpleExample)
-```
-
-### Labelled
-
-```javascript live noinline drafts
-const options = ['javascript', 'typescript', 'css', 'html', 'webassembly']
-
-const SimpleExample = () => {
- const [suggestions, setSuggestions] = React.useState([])
-
- return (
-
- Example
- setSuggestions(options.filter(tag => tag.includes(query)))}
- onHideSuggestions={() => setSuggestions([])}
- >
-
-
-
- )
-}
-
-render(SimpleExample)
-```
-
-## Props
-
-
-
-## Status
-
-
diff --git a/docs/content/drafts/MarkdownEditor.mdx b/docs/content/drafts/MarkdownEditor.mdx
deleted file mode 100644
index 49bbad1d28c..00000000000
--- a/docs/content/drafts/MarkdownEditor.mdx
+++ /dev/null
@@ -1,157 +0,0 @@
----
-componentId: markdown_editor
-title: MarkdownEditor
-status: Deprecated
-description: Full-featured Markdown input.
-storybook: '/react/storybook?path=/story/components-forms-markdowneditor--default'
----
-
-import data from '../../../src/drafts/MarkdownEditor/MarkdownEditor.docs.json'
-
-```js
-import {MarkdownEditor} from '@primer/react/drafts'
-```
-
-`MarkdownEditor` is a full-featured editor for GitHub Flavored Markdown, with support for:
-
-- Formatting (keyboard shortcuts & toolbar buttons)
-- File uploads (drag & drop, paste, click to upload)
-- Inline suggestions (emojis, `@` mentions, and `#` references)
-- Saved replies
-- Markdown pasting (ie, paste URL onto selected text to create a link)
-- List editing (create a new list item on `Enter`)
-- Indenting selected text
-
-## Examples
-
-### Minimal Example
-
-A `Label` is always required for accessibility:
-
-```javascript live noinline drafts
-const renderMarkdown = async markdown => {
- // In production code, this would make a query to some external API endpoint to render
- return 'Rendered Markdown.'
-}
-
-const MinimalExample = () => {
- const [value, setValue] = React.useState('')
-
- return (
-
- Minimal Example
-
- )
-}
-
-render(MinimalExample)
-```
-
-### Suggestions, File Uploads, and Saved Replies
-
-```javascript live noinline drafts
-const renderMarkdown = async markdown => 'Rendered Markdown.'
-
-const uploadFile = async file => ({
- url: `https://example.com/${encodeURIComponent(file.name)}`,
- file,
-})
-
-const emojis = [
- {name: '+1', character: 'π'},
- {name: '-1', character: 'π'},
- {name: 'heart', character: 'β€οΈ'},
- {name: 'wave', character: 'π'},
- {name: 'raised_hands', character: 'π'},
- {name: 'pray', character: 'π'},
- {name: 'clap', character: 'π'},
- {name: 'ok_hand', character: 'π'},
- {name: 'point_up', character: 'βοΈ'},
- {name: 'point_down', character: 'π'},
- {name: 'point_left', character: 'π'},
- {name: 'point_right', character: 'π'},
- {name: 'raised_hand', character: 'β'},
- {name: 'thumbsup', character: 'π'},
- {name: 'thumbsdown', character: 'π'},
-]
-
-const references = [
- {id: '1', titleText: 'Add logging functionality', titleHtml: 'Add logging functionality'},
- {
- id: '2',
- titleText: 'Error: `Failed to install` when installing',
- titleHtml: 'Error: Failed to install when installing',
- },
- {id: '3', titleText: 'Add error-handling functionality', titleHtml: 'Add error-handling functionality'},
-]
-
-const mentionables = [
- {identifier: 'monalisa', description: 'Monalisa Octocat'},
- {identifier: 'github', description: 'GitHub'},
- {identifier: 'primer', description: 'Primer'},
-]
-
-const savedReplies = [
- {name: 'Duplicate', content: 'Duplicate of #'},
- {name: 'Welcome', content: 'Welcome to the project!\n\nPlease be sure to read the contributor guidelines.'},
- {name: 'Thanks', content: 'Thanks for your contribution!'},
-]
-
-const MinimalExample = () => {
- const [value, setValue] = React.useState('')
-
- return (
-
- Suggestions, File Uploads, and Saved Replies Example
-
- )
-}
-
-render(MinimalExample)
-```
-
-### Custom Buttons
-
-```javascript live noinline drafts
-const renderMarkdown = async markdown => 'Rendered Markdown.'
-
-const MinimalExample = () => {
- const [value, setValue] = React.useState('')
-
- return (
-
- Custom Buttons
-
-
-
-
-
-
-
-
- Custom Button
-
-
- Cancel
- Submit
-
-
-
- )
-}
-
-render(MinimalExample)
-```
-
-## Props
-
-
diff --git a/docs/content/drafts/MarkdownViewer.mdx b/docs/content/drafts/MarkdownViewer.mdx
deleted file mode 100644
index 718afd54d06..00000000000
--- a/docs/content/drafts/MarkdownViewer.mdx
+++ /dev/null
@@ -1,103 +0,0 @@
----
-componentId: markdown_viewer
-title: MarkdownViewer
-status: Deprecated
-description: Displays rendered Markdown and facilitates interaction.
----
-
-import data from '../../../src/drafts/MarkdownViewer/MarkdownViewer.docs.json'
-
-```js
-import {MarkdownViewer} from '@primer/react/drafts'
-```
-
-The `MarkdownViewer` displays rendered Markdown and handles interaction (link clicking and checkbox checking/unchecking) with that content.
-
-## Examples
-
-### Simple Example
-
-```javascript live noinline drafts
-const MarkdownViewerExample = () => {
- return (
- // eslint-disable-next-line github/unescaped-html-literal
- Lorem ipsum dolor sit amet.'}} />
- )
-}
-
-render(MarkdownViewerExample)
-```
-
-### Link-Handling Example
-
-```javascript live noinline drafts
-const MarkdownViewerExample = () => {
- return (
- Example link"}}
- onLinkClick={ev => console.log(ev)}
- />
- )
-}
-
-render(MarkdownViewerExample)
-```
-
-### Checkbox Interaction Example
-
-```javascript live noinline drafts
-const markdownSource = `
-text before list
-
-- [ ] item 1
-- [ ] item 2
-
-text after list`
-
-const renderedHtml = `
-text before list
-
-text after list
`
-
-const MarkdownViewerExample = () => {
- return (
- console.log(value) /* save the value to the server */}
- disabled={false}
- />
- )
-}
-
-render(MarkdownViewerExample)
-```
-
-## Props
-
-
-
-## Status
-
-
diff --git a/e2e/components/InlineAutocomplete.test.ts b/e2e/components/InlineAutocomplete.test.ts
deleted file mode 100644
index 42090e57349..00000000000
--- a/e2e/components/InlineAutocomplete.test.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
-
-test.describe('InlineAutocomplete', () => {
- test.describe('Default', () => {
- for (const theme of themes) {
- test.describe(theme, () => {
- test('default @vrt', async ({page}) => {
- await visit(page, {
- id: 'deprecated-components-inlineautocomplete--default',
- globals: {
- colorScheme: theme,
- },
- })
-
- // Default state
- expect(await page.screenshot()).toMatchSnapshot(`InlineAutocomplete.Default.${theme}.png`)
- })
-
- test('axe @aat', async ({page}) => {
- await visit(page, {
- id: 'deprecated-components-inlineautocomplete--default',
- globals: {
- colorScheme: theme,
- },
- })
- await expect(page).toHaveNoViolations()
- })
- })
- }
- })
-
- test.describe('Playground', () => {
- for (const theme of themes) {
- test.describe(theme, () => {
- test('default @vrt', async ({page}) => {
- await visit(page, {
- id: 'deprecated-components-inlineautocomplete--playground',
- globals: {
- colorScheme: theme,
- },
- })
-
- // Default state
- expect(await page.screenshot()).toMatchSnapshot(`InlineAutocomplete.Playground.${theme}.png`)
- })
-
- test('axe @aat', async ({page}) => {
- await visit(page, {
- id: 'deprecated-components-inlineautocomplete--playground',
- globals: {
- colorScheme: theme,
- },
- })
- await expect(page).toHaveNoViolations()
- })
- })
- }
- })
-
- test.describe('Custom Rendering', () => {
- for (const theme of themes) {
- test.describe(theme, () => {
- test('default @vrt', async ({page}) => {
- await visit(page, {
- id: 'deprecated-components-inlineautocomplete-features--custom-rendering',
- globals: {
- colorScheme: theme,
- },
- })
-
- // Default state
- expect(await page.screenshot()).toMatchSnapshot(`InlineAutocomplete.Custom Rendering.${theme}.png`)
- })
-
- test('axe @aat', async ({page}) => {
- await visit(page, {
- id: 'deprecated-components-inlineautocomplete-features--custom-rendering',
- globals: {
- colorScheme: theme,
- },
- })
- await expect(page).toHaveNoViolations()
- })
- })
- }
- })
-
- test.describe('Single Line', () => {
- for (const theme of themes) {
- test.describe(theme, () => {
- test('default @vrt', async ({page}) => {
- await visit(page, {
- id: 'deprecated-components-inlineautocomplete-features--single-line',
- globals: {
- colorScheme: theme,
- },
- })
-
- // Default state
- expect(await page.screenshot()).toMatchSnapshot(`InlineAutocomplete.Single Line.${theme}.png`)
- })
-
- test('axe @aat', async ({page}) => {
- await visit(page, {
- id: 'deprecated-components-inlineautocomplete-features--single-line',
- globals: {
- colorScheme: theme,
- },
- })
- await expect(page).toHaveNoViolations()
- })
- })
- }
- })
-})
diff --git a/jest.config.js b/jest.config.js
index b1419db9262..297fdf73543 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -26,8 +26,6 @@ module.exports = {
setupFiles: ['/src/utils/test-helpers.tsx'],
setupFilesAfterEnv: ['/src/utils/test-matchers.tsx', '/src/utils/test-deprecations.tsx'],
testMatch: ['/(src|codemods)/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)'],
- transformIgnorePatterns: [
- 'node_modules/(?!@github/combobox-nav|@koddsson/textarea-caret|@github/[a-z-]+-element|@lit-labs/react|@oddbird/popover-polyfill)',
- ],
+ transformIgnorePatterns: ['node_modules/(?!@github/[a-z-]+-element|@lit-labs/react|@oddbird/popover-polyfill)'],
watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
}
diff --git a/package-lock.json b/package-lock.json
index 92db1eef488..26f122553aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,6 @@
"version": "36.4.0",
"license": "MIT",
"dependencies": {
- "@github/combobox-nav": "^2.1.5",
- "@github/markdown-toolbar-element": "^2.1.0",
- "@github/paste-markdown": "^1.4.0",
"@github/relative-time-element": "^4.1.2",
"@lit-labs/react": "^1.1.1",
"@oddbird/popover-polyfill": "^0.3.1",
@@ -4163,7 +4160,8 @@
"node_modules/@github/combobox-nav": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/@github/combobox-nav/-/combobox-nav-2.1.7.tgz",
- "integrity": "sha512-Webx0W5iTpkk5Chy9dB/1BEUORQ0qrwui8HaaVBiy75W2VOJg96WTuKj1rXENAJ3XTMhdEF53bn0LYfvP0EKvg=="
+ "integrity": "sha512-Webx0W5iTpkk5Chy9dB/1BEUORQ0qrwui8HaaVBiy75W2VOJg96WTuKj1rXENAJ3XTMhdEF53bn0LYfvP0EKvg==",
+ "dev": true
},
"node_modules/@github/details-menu-element": {
"version": "1.0.13",
@@ -4183,11 +4181,6 @@
"integrity": "sha512-BJTt8ZE/arsbC9lQtTH8c1hZS0ZigiN+kzH54ffQ6MhHLT83h0OpSdS9NEVocPl2uuO6w3qxnEKTDzUGMQ5rdQ==",
"dev": true
},
- "node_modules/@github/markdown-toolbar-element": {
- "version": "2.2.1",
- "resolved": "https://registry.npmjs.org/@github/markdown-toolbar-element/-/markdown-toolbar-element-2.2.1.tgz",
- "integrity": "sha512-ap+ulyqzG3aVqwKsKjbDdYwM75TQXZpPtmIuPwm+54OTgcC96267oX3cEqd1wSqGsH7O5PonZ//fE9jH7Q4JkA=="
- },
"node_modules/@github/markdownlint-github": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/@github/markdownlint-github/-/markdownlint-github-0.6.0.tgz",
@@ -4203,11 +4196,6 @@
"integrity": "sha512-KtOPaB+FiKJ6jcKm9UKyaM5fPURHGf+xcp+b4Mzoi81hOc6M1sIGpMZMAVbNzfa2lW5+RPGKq888Px0j76OZ/A==",
"dev": true
},
- "node_modules/@github/paste-markdown": {
- "version": "1.5.0",
- "resolved": "https://registry.npmjs.org/@github/paste-markdown/-/paste-markdown-1.5.0.tgz",
- "integrity": "sha512-uV8zSXUVpcS2Oxc4K6FqJwkEGn1wwKPi4H7McKzI1z9HVdH3lg1cZfQcQcIrnHirYAZ63ewBnP46opwDwJQUyg=="
- },
"node_modules/@github/prettier-config": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/@github/prettier-config/-/prettier-config-0.0.6.tgz",
diff --git a/package.json b/package.json
index 3c4a10d6137..75dc692a973 100644
--- a/package.json
+++ b/package.json
@@ -94,9 +94,6 @@
"npm": ">=7"
},
"dependencies": {
- "@github/combobox-nav": "^2.1.5",
- "@github/markdown-toolbar-element": "^2.1.0",
- "@github/paste-markdown": "^1.4.0",
"@github/relative-time-element": "^4.1.2",
"@lit-labs/react": "^1.1.1",
"@oddbird/popover-polyfill": "^0.3.1",
diff --git a/rollup.config.js b/rollup.config.js
index 9e6bf971392..3833ffb1772 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -58,14 +58,7 @@ const input = new Set([
])
const extensions = ['.js', '.jsx', '.ts', '.tsx']
-const ESM_ONLY = new Set([
- '@github/combobox-nav',
- '@github/markdown-toolbar-element',
- '@github/paste-markdown',
- '@github/relative-time-element',
- '@lit-labs/react',
- '@oddbird/popover-polyfill',
-])
+const ESM_ONLY = new Set(['@github/relative-time-element', '@lit-labs/react', '@oddbird/popover-polyfill'])
const dependencies = [
...Object.keys(packageJson.peerDependencies ?? {}),
...Object.keys(packageJson.dependencies ?? {}),
diff --git a/src/__tests__/__snapshots__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap
index dbe19dcd203..596d5b282f0 100644
--- a/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -239,17 +239,13 @@ exports[`@primer/react/drafts should not update exports without a semver change
[
"Blankslate",
"type BlankslateProps",
- "callbackCancelledResult",
- "type CallbackCancelledResult",
"type ChildrenPropTypes",
"type CloseButtonProps",
"type Column",
- "type ComboboxCommitEvent",
"createColumnHelper",
"DataTable",
"type DataTableProps",
"default",
- "default",
"Dialog",
"type DialogButtonProps",
"type DialogHeaderProps",
@@ -257,20 +253,8 @@ exports[`@primer/react/drafts should not update exports without a semver change
"type DialogProps",
"type DialogType",
"type DialogWidth",
- "type Emoji",
- "type FileType",
- "type FileUploadResult",
"Hidden",
"type HiddenProps",
- "InlineAutocomplete",
- "type InlineAutocompleteProps",
- "type InteractiveMarkdownViewerProps",
- "MarkdownEditor",
- "type MarkdownEditorHandle",
- "type MarkdownEditorProps",
- "MarkdownViewer",
- "type MarkdownViewerProps",
- "type Mentionable",
"type NavigationProps",
"NavList",
"type NavListDividerProps",
@@ -283,14 +267,7 @@ exports[`@primer/react/drafts should not update exports without a semver change
"PageHeader",
"type PageHeaderProps",
"type ParentLinkProps",
- "type Reference",
- "type SavedReply",
"SelectPanel",
- "type ShowSuggestionsEvent",
- "type SlotConfig",
- "type Suggestion",
- "type Suggestions",
- "type SyntheticChangeEmitter",
"Table",
"type TableActionsProps",
"type TableBodyProps",
@@ -306,14 +283,7 @@ exports[`@primer/react/drafts should not update exports without a semver change
"Tooltip",
"TooltipContext",
"type TooltipProps",
- "type Trigger",
"type TriggerPropsType",
- "useCombobox",
- "useDynamicTextareaHeight",
- "useIgnoreKeyboardActionsWhileComposing",
- "useSafeAsyncCallback",
- "useSlots",
- "useSyntheticChange",
]
`;
@@ -321,17 +291,13 @@ exports[`@primer/react/experimental should not update exports without a semver c
[
"Blankslate",
"type BlankslateProps",
- "callbackCancelledResult",
- "type CallbackCancelledResult",
"type ChildrenPropTypes",
"type CloseButtonProps",
"type Column",
- "type ComboboxCommitEvent",
"createColumnHelper",
"DataTable",
"type DataTableProps",
"default",
- "default",
"Dialog",
"type DialogButtonProps",
"type DialogHeaderProps",
@@ -339,20 +305,8 @@ exports[`@primer/react/experimental should not update exports without a semver c
"type DialogProps",
"type DialogType",
"type DialogWidth",
- "type Emoji",
- "type FileType",
- "type FileUploadResult",
"Hidden",
"type HiddenProps",
- "InlineAutocomplete",
- "type InlineAutocompleteProps",
- "type InteractiveMarkdownViewerProps",
- "MarkdownEditor",
- "type MarkdownEditorHandle",
- "type MarkdownEditorProps",
- "MarkdownViewer",
- "type MarkdownViewerProps",
- "type Mentionable",
"type NavigationProps",
"NavList",
"type NavListDividerProps",
@@ -365,14 +319,7 @@ exports[`@primer/react/experimental should not update exports without a semver c
"PageHeader",
"type PageHeaderProps",
"type ParentLinkProps",
- "type Reference",
- "type SavedReply",
"SelectPanel",
- "type ShowSuggestionsEvent",
- "type SlotConfig",
- "type Suggestion",
- "type Suggestions",
- "type SyntheticChangeEmitter",
"Table",
"type TableActionsProps",
"type TableBodyProps",
@@ -388,13 +335,6 @@ exports[`@primer/react/experimental should not update exports without a semver c
"Tooltip",
"TooltipContext",
"type TooltipProps",
- "type Trigger",
"type TriggerPropsType",
- "useCombobox",
- "useDynamicTextareaHeight",
- "useIgnoreKeyboardActionsWhileComposing",
- "useSafeAsyncCallback",
- "useSlots",
- "useSyntheticChange",
]
`;
diff --git a/src/__tests__/hooks/_useListEditing.test.tsx b/src/__tests__/hooks/_useListEditing.test.tsx
deleted file mode 100644
index 32d02de6fed..00000000000
--- a/src/__tests__/hooks/_useListEditing.test.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import {parseListItem, listItemToString, ListItem} from '../../drafts/MarkdownEditor/_useListEditing'
-
-describe('parseListItem', () => {
- it('should return null for a line that is not a list item', () => {
- expect(parseListItem('This is a test line')).toBeNull()
- })
-
- it('should parse a line that is a numbered list item', () => {
- expect(parseListItem('1. This is a test line')).toEqual({
- leadingWhitespace: '',
- text: 'This is a test line',
- delimeter: 1,
- middleWhitespace: ' ',
- taskBox: null,
- })
- })
-
- it('should parse a line that is a numbered list item and multiple spaces within', () => {
- expect(parseListItem('1. This is a test line')).toEqual({
- leadingWhitespace: '',
- text: 'This is a test line',
- delimeter: 1,
- middleWhitespace: ' ',
- taskBox: null,
- })
- })
-
- it('should parse a line that is a bulleted list item', () => {
- expect(parseListItem('* This is a test line')).toEqual({
- leadingWhitespace: '',
- text: 'This is a test line',
- delimeter: '*',
- middleWhitespace: ' ',
- taskBox: null,
- })
- })
-
- it('should parse a line that is a task list item', () => {
- expect(parseListItem('- [x] This is a test line')).toEqual({
- leadingWhitespace: '',
- text: 'This is a test line',
- delimeter: '-',
- middleWhitespace: ' ',
- taskBox: '[x]',
- })
-
- // Up to 4 spaces are supported
- expect(parseListItem('- [x] This is a test line')).toEqual({
- leadingWhitespace: '',
- text: 'This is a test line',
- delimeter: '-',
- middleWhitespace: ' ',
- taskBox: '[x]',
- })
-
- // 5 spaces are not supported
- expect(parseListItem('- [x] This is a test line')).toEqual({
- leadingWhitespace: '',
- text: ' [x] This is a test line',
- delimeter: '-',
- middleWhitespace: ' ',
- taskBox: null,
- })
-
- // Tabs are supported
- expect(parseListItem('- [x] This is a test line')).toEqual({
- leadingWhitespace: '',
- text: 'This is a test line',
- delimeter: '-',
- middleWhitespace: ' ',
- taskBox: '[x]',
- })
- })
-})
-
-describe('listItemToString', () => {
- it('should convert a list item to a string', () => {
- const item = {
- leadingWhitespace: '',
- text: 'This is a test line',
- delimeter: 1,
- middleWhitespace: ' ',
- taskBox: null,
- }
- expect(listItemToString(item)).toBe('1. This is a test line')
- })
-
- it('should convert a task list item to a string', () => {
- const item = {
- leadingWhitespace: '',
- text: 'This is a test line',
- delimeter: '-',
- middleWhitespace: ' ',
- taskBox: '[x]',
- } as ListItem
- expect(listItemToString(item)).toBe('- [x] This is a test line')
- })
-})
diff --git a/src/__tests__/hooks/_useListInteraction.test.tsx b/src/__tests__/hooks/_useListInteraction.test.tsx
deleted file mode 100644
index 7bb9a697e17..00000000000
--- a/src/__tests__/hooks/_useListInteraction.test.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import {parseCodeFenceBegin, isCodeFenceEnd} from '../../drafts/MarkdownViewer/_useListInteraction'
-
-describe('parseCodeFenceBegin', () => {
- it('should return null for a line without a code fence', () => {
- expect(parseCodeFenceBegin('This is a test line without a code fence')).toBeNull()
- })
-
- it('should return the code fence for a line with a code fence', () => {
- expect(parseCodeFenceBegin('```This is a test line with a code fence')).toBe('```')
- })
-
- it('should return the code fence for a line with a code fence and leading spaces', () => {
- expect(parseCodeFenceBegin(' ~~~This is a test line with a code fence and leading spaces')).toBe('~~~')
- })
-
- it('should return null for a line with more than 3 leading spaces before the code fence', () => {
- expect(
- parseCodeFenceBegin(' ```This is a test line with more than 3 leading spaces before the code fence'),
- ).toBeNull()
- })
-})
-
-describe('isCodeFenceEnd', () => {
- it('should return true for a line that ends a code fence', () => {
- expect(isCodeFenceEnd('```', '```')).toBe(true)
- })
-
- it('should return false for a line that does not end a code fence', () => {
- expect(isCodeFenceEnd('This is a test line', '```')).toBe(false)
- })
-
- it('should return true for a line that ends a code fence with leading spaces', () => {
- expect(isCodeFenceEnd(' ~~~', '~~~')).toBe(true)
- })
-
- it('should return true for a line that ends a code fence with different new line characteres', () => {
- expect(isCodeFenceEnd('~~~', '~~~')).toBe(true)
- })
-
- it('should return false for a line with more than 3 leading spaces before the code fence end', () => {
- expect(isCodeFenceEnd(' ```', '```')).toBe(false)
- })
-})
diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.docs.json b/src/drafts/InlineAutocomplete/InlineAutocomplete.docs.json
deleted file mode 100644
index 5483ccb855b..00000000000
--- a/src/drafts/InlineAutocomplete/InlineAutocomplete.docs.json
+++ /dev/null
@@ -1,61 +0,0 @@
-{
- "id": "drafts_inline_autocomplete",
- "name": "InlineAutocomplete",
- "status": "deprecated",
- "a11yReviewed": false,
- "stories": [],
- "props": [
- {
- "name": "children",
- "type": "React.ReactNode",
- "defaultValue": "",
- "required": true,
- "description": "An `input` or `textarea` compatible component to extend. A compatible component is any component that forwards a ref and props to an underlying `input` or `textarea` element, including but not limited to `Input`, `TextArea`, `input`, `textarea`, `styled.input`, and `styled.textarea`. If the child is not compatible, a runtime `TypeError` will be thrown."
- },
- {
- "name": "triggers",
- "type": "Array",
- "defaultValue": "",
- "required": true,
- "description": "Register the triggers that can cause suggestions to appear."
- },
- {
- "name": "onSelectSuggestion",
- "type": "(event: SelectSuggestionsEvent) => void",
- "defaultValue": "",
- "description": "Called when a suggestion is selected. This should be used only for performing side effects, not for modifying\nthe inserted text. Do not call `setState` in this handler or the user's cursor\nposition / undo history could be lost."
- },
- {
- "name": "onShowSuggestions",
- "type": "(event: ShowSuggestionsEvent) => void",
- "defaultValue": "",
- "required": true,
- "description": "Called when a valid suggestion query is updated. This should be handled by setting the `suggestions` prop accordingly."
- },
- {
- "name": "onShowSuggestions",
- "type": "() => void",
- "defaultValue": "",
- "required": true,
- "description": "Called when suggestions should be hidden. Set `suggestions` to `null` or an empty array in this case."
- },
- {
- "name": "suggestions",
- "type": "Suggestion[] | null | 'loading'",
- "defaultValue": "",
- "required": true,
- "description": "The currently visible list of suggestions. If `loading`, a loading indicator will be shown. If `null` or empty, the list will be hidden. Suggestion sort will be preserved. Typically, this should not contain more than five or so suggestions."
- },
- {
- "name": "tabInsertsSuggestions",
- "type": "boolean",
- "defaultValue": "false",
- "description": "If `true`, suggestions will be applied with both `Tab` and `Enter`, instead of just `Enter`. This may be expected behavior for users used to IDEs, but use caution when hijacking browser tabbing capability."
- },
- {
- "name": "sx",
- "type": "SystemStyleObject"
- }
- ],
- "subcomponents": []
-}
\ No newline at end of file
diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx
deleted file mode 100644
index 4b5d30250b5..00000000000
--- a/src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import React, {useState} from 'react'
-import {Meta} from '@storybook/react'
-import {ActionList, Avatar, ActionListItemProps, Textarea, TextInput, FormControl} from '../..'
-import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions} from '.'
-
-export default {
- title: 'Deprecated/Components/InlineAutocomplete/Features',
- component: InlineAutocomplete,
-} as Meta
-
-interface User {
- login: string
- name: string
- avatar: string
- type: 'user' | 'organization'
-}
-
-const sampleUsers: User[] = [
- {login: 'monalisa', name: 'Monalisa Octocat', avatar: 'https://avatars.githubusercontent.com/github', type: 'user'},
- {login: 'primer', name: 'Primer', avatar: 'https://avatars.githubusercontent.com/primer', type: 'organization'},
- {login: 'github', name: 'GitHub', avatar: 'https://avatars.githubusercontent.com/github', type: 'organization'},
-]
-
-const filteredUsers = (query: string) =>
- sampleUsers.filter(
- user =>
- user.login.toLowerCase().includes(query.toLowerCase()) || user.name.toLowerCase().includes(query.toLowerCase()),
- )
-
-export const SingleLine = ({loading, tabInserts}: ArgProps) => {
- const [suggestions, setSuggestions] = useState(null)
-
- const onShowSuggestions = (event: ShowSuggestionsEvent) => {
- if (loading) {
- setSuggestions('loading')
- return
- }
-
- setSuggestions(filteredUsers(event.query).map(user => user.login))
- }
-
- return (
-
- Inline Autocomplete Demo
- Try typing '@' to show user suggestions.
- setSuggestions(null)}
- tabInsertsSuggestions={tabInserts}
- >
-
-
-
- )
-}
-
-export const OnSelectSuggestion = ({loading, tabInserts}: ArgProps) => {
- const [suggestions, setSuggestions] = useState(null)
-
- const onShowSuggestions = (event: ShowSuggestionsEvent) => {
- if (loading) {
- setSuggestions('loading')
- return
- }
-
- setSuggestions(filteredUsers(event.query).map(user => user.login))
- }
-
- return (
-
- Inline Autocomplete Demo
- Try typing '@' to show user suggestions.
- window.alert(`Selected ${suggestion}`)}
- suggestions={suggestions}
- onShowSuggestions={onShowSuggestions}
- onHideSuggestions={() => setSuggestions(null)}
- tabInsertsSuggestions={tabInserts}
- >
-
-
-
- )
-}
-
-const UserSuggestion = ({user, ...props}: {user: User} & ActionListItemProps) => (
-
-
-
-
- {user.name} {user.login}
-
-)
-
-type ArgProps = {
- loading: boolean
- tabInserts: boolean
-}
-
-export const CustomRendering = ({loading, tabInserts}: ArgProps) => {
- const [suggestions, setSuggestions] = useState(null)
-
- const onShowSuggestions = (event: ShowSuggestionsEvent) => {
- if (loading) {
- setSuggestions('loading')
- return
- }
-
- setSuggestions(
- filteredUsers(event.query).map(user => ({
- value: user.login,
- render: props => ,
- })),
- )
- }
-
- const onHideSuggestions = () => setSuggestions(null)
-
- return (
-
- Inline Autocomplete Demo
- Try typing '@' to show user suggestions.
-
-
-
-
- )
-}
-
-export const AbovePositioning = () => {
- const [suggestions, setSuggestions] = useState(null)
-
- const onShowSuggestions = (event: ShowSuggestionsEvent) => {
- setSuggestions(
- filteredUsers(event.query).map(user => ({
- value: user.login,
- render: props => ,
- })),
- )
- }
-
- const onHideSuggestions = () => setSuggestions(null)
-
- return (
-
- Inline Autocomplete Demo
- Try typing '@' to show user suggestions.
-
-
-
-
- )
-}
-
-export const AutoPositioning = () => {
- const [suggestions, setSuggestions] = useState(null)
-
- const onShowSuggestions = (event: ShowSuggestionsEvent) => {
- setSuggestions(
- filteredUsers(event.query).map(user => ({
- value: user.login,
- render: props => ,
- })),
- )
- }
-
- const onHideSuggestions = () => setSuggestions(null)
-
- return (
-
- Inline Autocomplete Demo
- Try typing '@' to show user suggestions.
-
-
-
-
- )
-}
diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.stories.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.stories.tsx
deleted file mode 100644
index 48e5efff765..00000000000
--- a/src/drafts/InlineAutocomplete/InlineAutocomplete.stories.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import React, {useState} from 'react'
-import {Meta} from '@storybook/react'
-
-import {BaseStyles, Box, Textarea, ThemeProvider, FormControl} from '../..'
-import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions} from '.'
-
-export default {
- title: 'Deprecated/Components/InlineAutocomplete',
- component: InlineAutocomplete,
- decorators: [
- Story => {
- return (
-
-
- {Story()}
-
-
- )
- },
- ],
- args: {
- loading: false,
- tabInserts: false,
- },
- argTypes: {
- loading: {
- name: 'Loading',
- control: {
- type: 'boolean',
- },
- },
- tabInserts: {
- name: '`Tab` Key Inserts Suggestions',
- control: {
- type: 'boolean',
- },
- },
- },
-} as Meta
-
-interface User {
- login: string
- name: string
- avatar: string
- type: 'user' | 'organization'
-}
-
-const sampleUsers: User[] = [
- {login: 'monalisa', name: 'Monalisa Octocat', avatar: 'https://avatars.githubusercontent.com/github', type: 'user'},
- {login: 'primer', name: 'Primer', avatar: 'https://avatars.githubusercontent.com/primer', type: 'organization'},
- {login: 'github', name: 'GitHub', avatar: 'https://avatars.githubusercontent.com/github', type: 'organization'},
-]
-
-const filteredUsers = (query: string) =>
- sampleUsers.filter(
- user =>
- user.login.toLowerCase().includes(query.toLowerCase()) || user.name.toLowerCase().includes(query.toLowerCase()),
- )
-
-export const Default = ({loading, tabInserts}: ArgProps) => {
- const [suggestions, setSuggestions] = useState(null)
-
- const onShowSuggestions = (event: ShowSuggestionsEvent) => {
- if (loading) {
- setSuggestions('loading')
- return
- }
-
- setSuggestions(filteredUsers(event.query).map(user => user.login))
- }
-
- return (
-
- Inline Autocomplete Demo
- Try typing '@' to show user suggestions.
- setSuggestions(null)}
- tabInsertsSuggestions={tabInserts}
- >
-
-
-
- )
-}
-
-type ArgProps = {
- loading: boolean
- tabInserts: boolean
-}
-
-export const Playground = ({loading, tabInserts}: ArgProps) => {
- const [suggestions, setSuggestions] = useState(null)
-
- const onShowSuggestions = (event: ShowSuggestionsEvent) => {
- if (loading) {
- setSuggestions('loading')
- return
- }
-
- setSuggestions(filteredUsers(event.query).map(user => user.login))
- }
- return (
-
- Inline Autocomplete Playground
- Try typing '@' to show user suggestions.
- setSuggestions(null)}
- tabInsertsSuggestions={tabInserts}
- >
-
-
-
- )
-}
diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx
deleted file mode 100644
index cfd7dff63ea..00000000000
--- a/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx
+++ /dev/null
@@ -1,471 +0,0 @@
-import React, {useState} from 'react'
-import {fireEvent, render, within} from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions, Trigger} from '.'
-import FormControl from '../../FormControl'
-import {ActionList} from '../../ActionList'
-import Textarea from '../../Textarea'
-import ThemeProvider from '../../ThemeProvider'
-import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
-
-const label = 'Inline Autocomplete'
-
-const users = ['monalisa', 'github', 'primer']
-
-const emojis = ['heart', 'smile', '+1']
-
-const issues = [
- ['1', 'add emoji feature'],
- ['2', 'fails to save'],
- ['3', 'updates too slowly'],
-] as const
-
-const triggers: Trigger[] = [
- {triggerChar: '@'},
- {triggerChar: ':', keepTriggerCharOnCommit: false},
- {triggerChar: '#', multiWord: true},
-]
-
-const UncontrolledInlineAutocomplete = ({
- loading = false,
- tabInsertsSuggestions,
-}: {
- loading?: boolean
- tabInsertsSuggestions?: boolean
-}) => {
- const [suggestions, setSuggestions] = useState([])
-
- const showUserSuggestions = (query: string) => {
- const matchingUsers = users.filter(user => user.includes(query))
- setSuggestions(matchingUsers)
- }
-
- const showEmojiSuggestions = (query: string) => {
- setSuggestions(
- emojis
- .filter(emoji => emoji.includes(query))
- .map(emoji => ({
- key: emoji,
- value: `:${emoji}:`,
- render: props => {emoji},
- })),
- )
- }
-
- const showIssueSuggestions = (query: string) => {
- if (loading) {
- setSuggestions('loading')
- return
- }
-
- setSuggestions(
- issues
- .filter(([_, title]) => title.includes(query))
- .map(([id, title]) => ({
- key: id,
- value: id,
- render: props => {title},
- })),
- )
- }
-
- const onShowSuggestions = (event: ShowSuggestionsEvent) => {
- switch (event.trigger.triggerChar) {
- case ':':
- showEmojiSuggestions(event.query)
- break
- case '@':
- showUserSuggestions(event.query)
- break
- case '#':
- showIssueSuggestions(event.query)
- break
- }
- }
-
- useIsomorphicLayoutEffect(() => {
- // combobox-nav attempts to filter out 'hidden' options by checking if the option has an
- // offsetHeight or width > 0. In JSDom, all elements have offsetHeight = offsetWidth = 0,
- // so we need to override at least one to make the class recognize that any options exist.
- for (const option of document.querySelectorAll('[role=option]'))
- Object.defineProperty(option, 'offsetHeight', {
- value: 1,
- writable: true,
- })
- })
-
- return (
-
-
- {label}
- setSuggestions([])}
- triggers={triggers}
- tabInsertsSuggestions={tabInsertsSuggestions}
- >
-
-
-
- {/* gives us another focuseable element to tab to */}
-
-
- )
-}
-
-describe('InlineAutocomplete', () => {
- it('forwards label ID to input', () => {
- const {queryByLabelText} = render()
-
- expect(queryByLabelText(label)).toBeInTheDocument()
- })
-
- it('does not show suggestions initially', () => {
- const {queryByRole, getByLabelText} = render()
-
- expect(queryByRole('listbox')).not.toBeInTheDocument()
- expect(getByLabelText(label)).not.toHaveAttribute('aria-expanded', 'true')
- })
-
- it('does not show suggestions when typing and not triggered', async () => {
- const user = userEvent.setup()
- const {queryByRole, getByLabelText} = render()
-
- await user.type(getByLabelText(label), 'hello world')
-
- expect(queryByRole('listbox')).not.toBeInTheDocument()
- })
-
- it('shows suggestions when triggered', async () => {
- const user = userEvent.setup()
- const {getByRole, getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'hello @')
-
- expect(getByRole('listbox')).toBeVisible()
- expect(input).toHaveAttribute('aria-expanded', 'true')
- })
-
- it('does not apply ARIA attributes when no suggestions are available', async () => {
- const user = userEvent.setup()
- const {getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'hello')
-
- expect(input).not.toHaveAttribute('role')
- expect(input).not.toHaveAttribute('aria-expanded')
- expect(input).not.toHaveAttribute('aria-controls')
- expect(input).not.toHaveAttribute('aria-autocomplete')
- expect(input).not.toHaveAttribute('aria-haspopup')
- expect(input).not.toHaveAttribute('aria-activedescendant')
- })
-
- it('updates ARIA attributes when list is opened', async () => {
- const user = userEvent.setup()
- const {getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'hello @')
-
- expect(input).toHaveAttribute('aria-expanded', 'true')
- expect(input).toHaveAttribute('role', 'combobox')
- expect(input).toHaveAttribute('aria-controls')
- expect(input).toHaveAttribute('aria-autocomplete', 'list')
- expect(input).toHaveAttribute('aria-haspopup', 'listbox')
-
- // initially no activedescendant to avoid interrupting typing
- expect(input).not.toHaveAttribute('aria-activedescendant')
- })
-
- it('updates suggestions upon typing more characters', async () => {
- const user = userEvent.setup()
- const {getByRole, getByLabelText} = render()
-
- const input1 = getByLabelText(label)
- await user.type(input1, 'hello @pr')
- const list = getByRole('listbox')
- expect(within(list).queryAllByRole('option')).toHaveLength(1)
- })
-
- it('hides suggestions on Escape', async () => {
- const user = userEvent.setup()
- const {queryByRole, getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'hello @')
- expect(queryByRole('listbox')).toBeVisible()
- await user.keyboard('{Escape}')
-
- expect(queryByRole('listbox')).not.toBeInTheDocument()
- })
-
- it('hides suggestions when no results match', async () => {
- const user = userEvent.setup()
- const {queryByRole, getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'hello @')
- expect(queryByRole('listbox')).toBeVisible()
- await user.keyboard('xyz')
-
- expect(queryByRole('listbox')).not.toBeInTheDocument()
- })
-
- it('hides suggestions when there is a space immediately after the trigger', async () => {
- const user = userEvent.setup()
- const {queryByRole, getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'see #')
- expect(queryByRole('listbox')).toBeVisible()
- await user.keyboard(' ')
-
- expect(queryByRole('listbox')).not.toBeInTheDocument()
- })
-
- it('hides suggestions when the input is clicked', async () => {
- const user = userEvent.setup()
- const {queryByRole, getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'hello @')
- expect(queryByRole('listbox')).toBeVisible()
- await user.click(input)
-
- expect(queryByRole('listbox')).not.toBeInTheDocument()
- })
-
- it('hides suggestions when the page is clicked', async () => {
- const user = userEvent.setup()
- const {queryByRole, getByLabelText, container} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'hello @')
- expect(queryByRole('listbox')).toBeVisible()
- await user.click(container)
-
- expect(queryByRole('listbox')).not.toBeInTheDocument()
- })
-
- it('hides suggestions when input is blurred', async () => {
- const user = userEvent.setup()
- const {queryByRole, getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'hello @')
- // eslint-disable-next-line github/no-blur
- fireEvent.blur(input)
-
- expect(queryByRole('listbox')).not.toBeInTheDocument()
- })
-
- it('hides suggestions when trigger character is deleted', async () => {
- const user = userEvent.setup()
- const {queryByRole, getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'hello @')
- expect(queryByRole('listbox')).toBeVisible()
- await user.keyboard('{Backspace}')
-
- expect(queryByRole('listbox')).not.toBeInTheDocument()
- })
-
- it.each(['{Enter}', ' '])('for single-word triggers: hides suggestions when "%s" pressed', async key => {
- const user = userEvent.setup()
- const {queryByRole, getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'hello @')
-
- expect(queryByRole('listbox')).toBeVisible()
- await user.keyboard(key)
- expect(queryByRole('listbox')).not.toBeInTheDocument()
- })
-
- it.each(['.', '{Enter}'])('for multi-word triggers: hides suggestions when "%s" pressed', async key => {
- const user = userEvent.setup()
- const {queryByRole, getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'see #')
-
- expect(queryByRole('listbox')).toBeVisible()
- await user.keyboard(key)
- expect(queryByRole('listbox')).not.toBeInTheDocument()
- })
-
- it('allows space in query for multi-word triggers', async () => {
- const user = userEvent.setup()
- const {getByRole, getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'see #fails to')
-
- expect(within(getByRole('listbox')).queryAllByRole('option')).toHaveLength(1)
- })
-
- it('applies the first suggestion on Enter key press', async () => {
- const user = userEvent.setup()
- const {getByLabelText, getByRole, queryByRole} = render()
-
- const input = getByLabelText(label)
- await user.type(input, `hello @`)
-
- const list = getByRole('listbox')
- expect(input).not.toHaveAttribute('aria-activedescendant')
- expect(within(list).queryAllByRole('option')[0]).toHaveAttribute('data-combobox-option-default')
-
- await user.keyboard('{Enter}')
-
- expect(input).toHaveValue('hello @monalisa ')
- expect(input).toHaveFocus()
- expect(queryByRole('listbox')).not.toBeInTheDocument()
- })
-
- it('does not apply using Tab when not enabled', async () => {
- const user = userEvent.setup()
- const {getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, `hello @`)
-
- await user.keyboard('{Tab}')
-
- expect(input).toHaveValue('hello @')
- expect(input).not.toHaveFocus()
- })
-
- it('applies using Tab when enabled', async () => {
- const user = userEvent.setup()
- const {getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, `hello @`)
-
- await user.keyboard('{Tab}')
-
- expect(input).toHaveValue('hello @monalisa ')
- })
-
- it('selects a suggestion with arrow keys', async () => {
- const user = userEvent.setup()
- const {getByLabelText, getByRole, queryByRole} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'hello @')
-
- await user.keyboard('{ArrowDown}')
- await user.keyboard('{ArrowDown}')
-
- expect(input).toHaveFocus()
- expect(input).toHaveAttribute('aria-activedescendant', 'github')
- expect(within(getByRole('listbox')).queryAllByRole('option')[1]).toHaveAttribute('aria-selected', 'true')
-
- await user.keyboard('{Enter}')
-
- expect(input).toHaveValue('hello @github ')
- expect(input).toHaveFocus()
- expect(queryByRole('listbox')).not.toBeInTheDocument()
- })
-
- it('applies a suggestion when clicked', async () => {
- const user = userEvent.setup()
- const {getByLabelText, getByRole, queryByRole} = render()
-
- const input = getByLabelText(label)
- await user.type(input, `hello @`)
-
- const option = within(getByRole('listbox')).queryAllByRole('option')[2]
- await user.click(option)
-
- expect(input).toHaveValue('hello @primer ')
- expect(input).toHaveFocus()
- expect(queryByRole('listbox')).not.toBeInTheDocument()
- })
-
- it('applies the value of the suggestion when different from the display text', async () => {
- const user = userEvent.setup()
- const {getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'please see #updates')
- await user.keyboard('{Enter}')
-
- expect(input).toHaveValue('please see #3 ')
- })
-
- it('deletes the trigger character when `keepTriggerCharOnCommit` is false', async () => {
- const user = userEvent.setup()
- const {getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'Hello! :sm')
- await user.keyboard('{Enter}')
-
- // if the trigger character was not deleted, the value would be "Hello! ::smile:"
- expect(input).toHaveValue('Hello! :smile: ')
- })
-
- it('shows a loading indicator and allows tabbing away when loading', async () => {
- const user = userEvent.setup()
- const {getByLabelText, getByRole, queryByText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'please see #')
-
- const list = getByRole('listbox')
- expect(within(list).queryAllByRole('option')).toHaveLength(0)
- expect(queryByText('Loading autocomplete suggestionsβ¦')).toBeInTheDocument()
-
- await user.tab()
-
- expect(input).not.toHaveFocus()
- })
-
- it('queries based on the last trigger character found', async () => {
- const user = userEvent.setup()
- const {getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'Hello! #test :')
- await user.keyboard('{Enter}')
-
- expect(input).toHaveValue('Hello! #test :heart: ')
- })
-
- it('reads out an accessible message when the suggestions become available and change', async () => {
- const user = userEvent.setup()
- const {queryByText, getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'hello @')
-
- const statusMessage = queryByText(
- '3 autocomplete suggestions available; "monalisa" is highlighted. Press Enter to insert.',
- )
- expect(statusMessage).toBeInTheDocument()
- expect(statusMessage).toHaveAttribute('aria-live', 'assertive')
-
- await user.keyboard('gith')
- expect(statusMessage).toHaveTextContent(
- '1 autocomplete suggestion available; "github" is highlighted. Press Enter to insert.',
- )
- })
-
- it('accessible message includes "Tab" when tab insertion is enabled', async () => {
- const user = userEvent.setup()
- const {queryByText, getByLabelText} = render()
-
- const input = getByLabelText(label)
- await user.type(input, 'hello @')
-
- const statusMessage = queryByText(
- '3 autocomplete suggestions available; "monalisa" is highlighted. Press Enter or Tab to insert.',
- )
- expect(statusMessage).toBeInTheDocument()
- })
-})
diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx
deleted file mode 100644
index 1a7214b6570..00000000000
--- a/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import React, {cloneElement, useRef} from 'react'
-import Box from '../../Box'
-import Portal from '../../Portal'
-import {BetterSystemStyleObject} from '../../sx'
-import {useSyntheticChange} from '../hooks/useSyntheticChange'
-import {getAbsoluteCharacterCoordinates} from '../utils/character-coordinates'
-
-import {
- SelectSuggestionsEvent,
- ShowSuggestionsEvent,
- Suggestions,
- SuggestionsPlacement,
- TextInputCompatibleChild,
- TextInputElement,
- Trigger,
-} from './types'
-import {augmentHandler, calculateSuggestionsQuery, getSuggestionValue, requireChildrenToBeInput} from './utils'
-
-import {useRefObjectAsForwardedRef} from '../../hooks'
-import AutocompleteSuggestions from './_AutocompleteSuggestions'
-import {useFormControlForwardedProps} from '../../FormControl'
-
-export type InlineAutocompleteProps = {
- /** Register the triggers that can cause suggestions to appear. */
- triggers: Array
- /**
- * Called when a valid suggestion query is updated. This should be handled by setting the
- * `suggestions` prop accordingly.
- */
- onShowSuggestions: (event: ShowSuggestionsEvent) => void
-
- /**
- * Called when a suggestion is selected.
- *
- * @note This should be used only for performing side effects, not for modifying
- * the inserted text. Do not call `setState` in this handler or the user's cursor
- * position / undo history could be lost.
- */
- onSelectSuggestion?: (event: SelectSuggestionsEvent) => void
-
- /** Called when suggestions should be hidden. Set `suggestions` to `null` in this case. */
- onHideSuggestions: () => void
- /**
- * The currently visible list of suggestions. If `loading`, a loading indicator will be
- * shown. If `null` or empty, the list will be hidden. Suggestion sort will be preserved.
- *
- * Typically, this should not contain more than five or so suggestions.
- */
- suggestions: Suggestions | null
- /**
- * If `true`, suggestions will be applied with both `Tab` and `Enter`, instead of just
- * `Enter`. This may be expected behavior for users used to IDEs, but use caution when
- * hijacking browser tabbing capability.
- * @default false
- */
- tabInsertsSuggestions?: boolean
- /**
- * The `AutocompleteTextarea` has a container for positioning the suggestions overlay.
- * This can break some layouts (ie, if the editor must expand with `flex: 1` to fill space)
- * so you can override container styles here. Usually this should not be necessary.
- * `position` may not be overriden.
- */
- sx?: Omit
- // Typing this as such makes it look like a compatible child internally, but it isn't actually
- // enforced externally so we have to resort to a runtime assertion.
- /**
- * An `input` or `textarea` compatible component to extend. A compatible component is any
- * component that forwards a ref and props to an underlying `input` or `textarea` element,
- * including but not limited to `Input`, `TextArea`, `input`, `textarea`, `styled.input`,
- * and `styled.textarea`. If the child is not compatible, a runtime `TypeError` will be
- * thrown.
- */
- children: TextInputCompatibleChild
- /**
- * Control which side of the insertion point the suggestions list appears on by default. This
- * should almost always be `"below"` because it typically provides a better user experience
- * (the most-relevant suggestions will appear closest to the text). However, if the input
- * is always near the bottom of the screen (ie, a chat composition form), it may be better to
- * display the suggestions above the input.
- *
- * In either case, if there is not enough room to display the suggestions in the default direction,
- * the suggestions will appear in the other direction.
- * @default "below"
- */
- suggestionsPlacement?: SuggestionsPlacement
-}
-
-const getSelectionStart = (element: TextInputElement) => {
- try {
- return element.selectionStart
- } catch (e: unknown) {
- // Safari throws an exception when trying to access selectionStart on date input element
- if (e instanceof TypeError) return null
- throw e
- }
-}
-
-const noop = () => {
- // don't do anything
-}
-
-/**
- * Shows suggestions to complete the current word/phrase the user is actively typing.
- * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604)
- */
-const InlineAutocomplete = ({
- triggers,
- suggestions,
- onShowSuggestions,
- onHideSuggestions,
- onSelectSuggestion,
- sx,
- children,
- tabInsertsSuggestions = false,
- suggestionsPlacement = 'below',
- ...externalInputProps
-}: InlineAutocompleteProps & React.ComponentProps<'textarea' | 'input'>) => {
- const inputProps = useFormControlForwardedProps(externalInputProps)
-
- const inputRef = useRef(null)
- useRefObjectAsForwardedRef(children.ref ?? noop, inputRef)
-
- const externalInput = requireChildrenToBeInput(children, inputRef)
-
- const emitSyntheticChange = useSyntheticChange({
- inputRef,
- fallbackEventHandler: externalInput.props.onChange ?? noop,
- })
-
- /** Stores the query that caused the current suggestion list to appear. */
- const showEventRef = useRef(null)
-
- const suggestionsVisible = suggestions !== null && suggestions.length > 0
-
- // The suggestions don't usually move while open, so it seems as though this could be
- // optimized by only re-rendering when suggestionsVisible changes. However, the user
- // could move the cursor to a different location using arrow keys and then type a
- // trigger, which would move the suggestions without closing/reopening them.
- const triggerCharCoords =
- inputRef.current && showEventRef.current && suggestionsVisible
- ? getAbsoluteCharacterCoordinates(
- inputRef.current,
- (getSelectionStart(inputRef.current) ?? 0) - showEventRef.current.query.length,
- )
- : {top: 0, left: 0, height: 0}
-
- // User can blur while suggestions are visible with shift+tab
- const onBlur: React.FocusEventHandler = () => {
- onHideSuggestions()
- }
-
- // Even though the overlay has an Escape listener, it only works when focus is inside
- // the overlay; in this case the textarea is focused
- const onKeyDown: React.KeyboardEventHandler = event => {
- if (suggestionsVisible && event.key === 'Escape') {
- onHideSuggestions()
- event.stopPropagation()
- }
- }
-
- const onChange: React.ChangeEventHandler = event => {
- const selectionStart = getSelectionStart(event.currentTarget)
- if (selectionStart === null) {
- onHideSuggestions()
- return
- }
-
- showEventRef.current = calculateSuggestionsQuery(triggers, event.currentTarget.value, selectionStart)
-
- if (showEventRef.current) {
- onShowSuggestions(showEventRef.current)
- } else {
- onHideSuggestions()
- }
- }
-
- const onCommit = (suggestion: string) => {
- if (!inputRef.current || !showEventRef.current) return
- const {query, trigger} = showEventRef.current
-
- onSelectSuggestion?.({suggestion, trigger, query})
-
- const currentCaretPosition = getSelectionStart(inputRef.current) ?? 0
- const deleteLength = query.length + trigger.triggerChar.length
- const startIndex = currentCaretPosition - deleteLength
-
- const keepTriggerChar = trigger.keepTriggerCharOnCommit ?? true
- const maybeTriggerChar = keepTriggerChar ? trigger.triggerChar : ''
- const replacement = `${maybeTriggerChar}${suggestion} `
-
- emitSyntheticChange(replacement, [startIndex, startIndex + deleteLength])
- onHideSuggestions()
- }
-
- const input = cloneElement(externalInput, {
- ...inputProps,
- onBlur: augmentHandler(externalInput.props.onBlur, onBlur),
- onKeyDown: augmentHandler(externalInput.props.onKeyDown, onKeyDown),
- onChange: augmentHandler(externalInput.props.onChange, onChange),
- ref: inputRef,
- })
-
- /**
- * Even though we apply all the aria attributes, screen readers don't fully support this
- * dynamic use case and so they don't have a native way to indicate to the user when
- * there are suggestions available. So we use some hidden text with aria-live to politely
- * indicate what's available and how to use it.
- *
- * This text should be consistent and the important info should be first, because users
- * will hear it as they type - if they have heard the message before they should be able
- * to recognize it and quickly apply the first suggestion without listening to the rest
- * of the message.
- *
- * When screen reader users navigate using arrow keys, the `aria-activedescendant` will
- * change and will be read out so we don't need to handle that interaction here.
- */
- const suggestionsDescription = !suggestionsVisible
- ? ''
- : suggestions === 'loading'
- ? 'Loading autocomplete suggestionsβ¦'
- : // It's important to include both Enter and Tab because we are telling the user that we are hijacking these keys:
- `${suggestions.length} autocomplete ${
- suggestions.length === 1 ? 'suggestion' : 'suggestions'
- } available; "${getSuggestionValue(suggestions[0])}" is highlighted. Press ${
- tabInsertsSuggestions ? 'Enter or Tab' : 'Enter'
- } to insert.`
-
- return (
- // Try to get as close as possible to making the container 'invisible' by making it shrink tight to child input
- *': {width: '100%'}, ...sx, position: 'relative'}}>
- {input}
-
-
-
- {/* This should NOT be linked to the input with aria-describedby or screen readers may not read the live updates.
- The assertive live attribute ensures the suggestions are read instead of the input label, which voiceover will try to re-read when the role changes. */}
-
- {suggestionsDescription}
-
-
-
- )
-}
-
-export default InlineAutocomplete
diff --git a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
deleted file mode 100644
index 3d9bdfa51c6..00000000000
--- a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import React, {useCallback, useRef, useState} from 'react'
-import Spinner from '../../Spinner'
-import {ActionList, ActionListItemProps} from '../../ActionList'
-import Box from '../../Box'
-import {ComboboxCommitEvent, useCombobox} from '../hooks/useCombobox'
-import Overlay from '../../Overlay'
-
-import {Suggestion, Suggestions, SuggestionsPlacement, TextInputElement} from './types'
-import {getSuggestionKey, getSuggestionValue} from './utils'
-import {CharacterCoordinates} from '../utils/character-coordinates'
-import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
-
-type AutoCompleteSuggestionsProps = {
- suggestions: Suggestions | null
- portalName?: string
- triggerCharCoords: CharacterCoordinates
- onClose: () => void
- onCommit: (suggestion: string) => void
- inputRef: React.RefObject
- visible: boolean
- tabInsertsSuggestions: boolean
- defaultPlacement: SuggestionsPlacement
-}
-
-const LoadingIndicator = () => (
-
-
-
-)
-
-const SuggestionListItem = ({suggestion}: {suggestion: Suggestion}) => {
- const value = getSuggestionValue(suggestion)
-
- const sharedProps: ActionListItemProps = {
- id: value,
- children: value,
- role: 'option',
- sx: {
- '&[aria-selected]': {
- backgroundColor: 'actionListItem.default.activeBg',
- },
- '&[data-combobox-option-default]:not([aria-selected])': {
- backgroundColor: 'actionListItem.default.selectedBg',
- },
- },
- }
-
- return typeof suggestion === 'string' ? : suggestion.render(sharedProps)
-}
-
-/**
- * Renders an overlayed list at the given relative coordinates. Handles keyboard navigation
- * and accessibility concerns.
- */
-const AutocompleteSuggestions = ({
- suggestions,
- portalName,
- triggerCharCoords,
- onClose,
- onCommit: externalOnCommit,
- inputRef,
- visible,
- tabInsertsSuggestions,
- defaultPlacement,
-}: AutoCompleteSuggestionsProps) => {
- const overlayRef = useRef(null)
-
- // It seems wierd to use state instead of a ref here, but because the list is inside an
- // AnchoredOverlay it is not always mounted - so we want to reinitialize the Combobox when it mounts
- const [list, setList] = useState(null)
-
- const onCommit = useCallback(
- ({option}: ComboboxCommitEvent) => {
- externalOnCommit(getSuggestionValue(option))
- },
- [externalOnCommit],
- )
-
- // Setup keyboard navigation
- useCombobox({
- // Even though the list is visible when loading, we don't want to do keyboard binding in that case
- isOpen: visible && suggestions !== 'loading',
- listElement: list,
- inputElement: inputRef.current,
- onCommit,
- options: Array.isArray(suggestions) ? suggestions : [],
- tabInsertsSuggestions,
- defaultFirstOption: true,
- })
-
- const [top, setTop] = useState(0)
- useIsomorphicLayoutEffect(
- function recalculateTop() {
- const overlayHeight = overlayRef.current?.offsetHeight ?? 0
-
- const belowOffset = triggerCharCoords.top + triggerCharCoords.height
- const wouldOverflowBelow = belowOffset + overlayHeight > window.innerHeight
-
- const aboveOffset = triggerCharCoords.top - overlayHeight
- const wouldOverflowAbove = aboveOffset < 0
-
- // Only override the default if it would overflow in the default direction and it would not overflow in the override direction
- const result = {
- below: wouldOverflowBelow && !wouldOverflowAbove ? aboveOffset : belowOffset,
- above: wouldOverflowAbove && !wouldOverflowBelow ? belowOffset : aboveOffset,
- }[defaultPlacement]
-
- // Sometimes the value can be NaN if layout is not available (ie, SSR or JSDOM)
- const resultNotNaN = Number.isNaN(result) ? 0 : result
-
- setTop(resultNotNaN)
- },
- // this is a cheap effect and we want it to run when pretty much anything that could affect position changes
- [triggerCharCoords.top, triggerCharCoords.height, suggestions, visible, defaultPlacement],
- )
-
- // Conditional rendering appears wrong at first - it means that we are reconstructing the
- // Combobox instance every time the suggestions appear. But this is what we want - otherwise
- // the textarea would always have the `combobox` role, which is incorrect (a textarea should
- // not technically ever be a combobox). We compromise by dynamically applying the combobox
- // role only when suggestions are available.
- return visible ? (
-
-
- {suggestions === 'loading' ? (
-
- ) : (
- suggestions?.map(suggestion => (
-
- ))
- )}
-
-
- ) : (
- <>
- )
-}
-AutocompleteSuggestions.displayName = 'SuggestionList'
-
-export default AutocompleteSuggestions
diff --git a/src/drafts/InlineAutocomplete/index.ts b/src/drafts/InlineAutocomplete/index.ts
deleted file mode 100644
index 0e9a439c64d..00000000000
--- a/src/drafts/InlineAutocomplete/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import InlineAutocomplete from './InlineAutocomplete'
-
-export type {InlineAutocompleteProps} from './InlineAutocomplete'
-export type {ShowSuggestionsEvent, Suggestion, Suggestions, Trigger} from './types'
-
-export default InlineAutocomplete
diff --git a/src/drafts/InlineAutocomplete/types.ts b/src/drafts/InlineAutocomplete/types.ts
deleted file mode 100644
index 2b7334d1c26..00000000000
--- a/src/drafts/InlineAutocomplete/types.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import {ActionListItemProps} from '../../ActionList'
-
-export type Trigger = {
- /** A single character that can cause the suggestion list to open. */
- triggerChar: string
- /**
- * Control whether the suggestion query can contain spaces. This should *not* be `true` if
- * `triggerChar` is a space.
- * @default false
- */
- multiWord?: boolean
- /**
- * Control whether the trigger character is retained when inserting a suggestion.
- * @default true
- */
- keepTriggerCharOnCommit?: boolean
-}
-
-export type SelectSuggestionsEvent = ShowSuggestionsEvent & {
- /** The suggestion that was selected. */
- suggestion: Suggestion
-}
-
-export type ShowSuggestionsEvent = {
- /** The trigger that caused this query. */
- trigger: Trigger
- /** The query string. */
- query: string
-}
-
-export type Suggestion =
- | string
- | {
- /**
- * The plain text value of the suggestion. This is the text that will be inserted when
- * the user applies the suggestion. If no `key` is provided, this value **must** be unique
- * across all currently visible suggestions.
- */
- value: string
- /**
- * Optional key. If not provided, the `value` will be used. Setting a `key` allows
- * for non-unique `value`s.
- */
- key?: string
- /** This must return an `ActionList.Item` instance. */
- render: (props: ActionListItemProps) => React.ReactElement
- }
-
-export type Suggestions = Array | 'loading'
-
-export type TextInputElement = HTMLInputElement | HTMLTextAreaElement
-
-export type TextInputCompatibleChild = React.ReactElement<
- JSX.IntrinsicElements['textarea'] | JSX.IntrinsicElements['input']
-> &
- React.RefAttributes
-
-export type SuggestionsPlacement = 'above' | 'below'
diff --git a/src/drafts/InlineAutocomplete/utils.ts b/src/drafts/InlineAutocomplete/utils.ts
deleted file mode 100644
index 44a88e5207a..00000000000
--- a/src/drafts/InlineAutocomplete/utils.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import {Children, EventHandler, SyntheticEvent} from 'react'
-
-import {ShowSuggestionsEvent, Suggestion, TextInputCompatibleChild, Trigger} from './types'
-
-const singleWordTriggerTerminators = new Set([' ', '\n'])
-const multiWordTriggerTerminators = new Set(['.', '\n'])
-
-const isWhitespace = (char: string) => /\s/.test(char)
-
-/**
- * Calculate whether or not suggestions should be shown based on the given state of the
- * input. If they should be shown, returns the show event.
- */
-export const calculateSuggestionsQuery = (
- triggers: Array,
- text: string,
- caretLocation: number,
-): ShowSuggestionsEvent | null => {
- // Build backwards from the caret location until the most recent trigger character or terminator
- for (
- let i = caretLocation - 1, query = '', potentialTriggers = triggers;
- i >= 0 && potentialTriggers.length > 0;
- i--
- ) {
- const character = text[i]
-
- if (singleWordTriggerTerminators.has(character)) potentialTriggers = potentialTriggers.filter(t => t.multiWord)
- if (multiWordTriggerTerminators.has(character)) potentialTriggers = potentialTriggers.filter(t => !t.multiWord)
-
- for (const trigger of potentialTriggers.filter(t => character === t.triggerChar)) {
- // Trigger chars must always be preceded by whitespace or be the first character in the input,
- // and even a multi-word query cannot start with whitespace
- if ((i === 0 || isWhitespace(text[i - 1])) && !isWhitespace(query[0])) return {trigger, query}
-
- potentialTriggers = potentialTriggers.filter(t => t !== trigger)
- }
-
- query = character + query
- }
-
- return null
-}
-
-export const getSuggestionValue = (suggestion: Suggestion): string =>
- typeof suggestion === 'string' ? suggestion : suggestion.value
-
-export const getSuggestionKey = (suggestion: Suggestion): string =>
- typeof suggestion === 'string' ? suggestion : suggestion.key ?? suggestion.value
-
-/**
- * Replace a section of a string.
- */
-export const replaceSlice = (
- original: string,
- [startInclusive, endExclusive]: [number, number],
- replacement: string,
-) => {
- const before = original.substring(0, startInclusive)
- const after = original.substring(endExclusive)
- return before + replacement + after
-}
-
-/**
- * Attempts to assert that the child element is of a supported type. This can't be enforced
- * by the type system so it has to be done as a runtime check. This isn't foolproof - a
- * component that forwards a ref to a correct element but does not forward event handlers
- * will not work. But it's the best we can reasonably do.
- */
-export function requireChildrenToBeInput(
- child: React.ReactElement,
- childRef: React.RefObject,
-): TextInputCompatibleChild {
- Children.only(child) // Assert that the child is lonely
- if (
- // There is no way to know what type the underlying child is until it mounts, so this
- // will always pass on first render before failing on the second render
- childRef.current &&
- !(childRef.current instanceof HTMLInputElement) &&
- !(childRef.current instanceof HTMLTextAreaElement)
- ) {
- throw new TypeError(
- `AutocompleteTextarea child must be a component that forwards a ref and props to an or