Deprecate MarkdownEditor, MarkdownViewer, InlineAutocomplete, and related code

.changeset/cold-pigs-shop.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Deprecate `MarkdownEditor`, `MarkdownViewer`, `InlineAutocomplete`, and related hooks

docs/content/drafts/InlineAutocomplete.mdx

@@ -1,13 +1,13 @@
 ---
 title: InlineAutocomplete
 componentId: inline_autocomplete
-status: Draft
+status: Deprecated
 description: Provides inline auto completion suggestions for an input or textarea.
-source: https://github.com/primer/react/tree/main/src/InlineAutocomplete
-storybook: '/react/storybook?path=/story/drafts-components-inlineautocomplete--default'
+source: https://github.com/primer/react/tree/main/src/drafts/InlineAutocomplete
+storybook: '/react/storybook?path=/story/deprecated-components-inlineautocomplete--default'
 ---
 
-import data from '../../../src/InlineAutocomplete/InlineAutocomplete.docs.json'
+import data from '../../../src/drafts/InlineAutocomplete/InlineAutocomplete.docs.json'
 
 ```js
 import {InlineAutocomplete} from '@primer/react/drafts'

docs/content/drafts/MarkdownEditor.mdx

@@ -1,7 +1,7 @@
 ---
 componentId: markdown_editor
 title: MarkdownEditor
-status: Draft
+status: Deprecated
 description: Full-featured Markdown input.
 storybook: '/react/storybook?path=/story/components-forms-markdowneditor--default'
 ---

docs/content/drafts/MarkdownViewer.mdx

@@ -1,7 +1,7 @@
 ---
 componentId: markdown_viewer
 title: MarkdownViewer
-status: Draft
+status: Deprecated
 description: Displays rendered Markdown and facilitates interaction.
 ---
 

e2e/components/InlineAutocomplete.test.ts

@@ -8,7 +8,7 @@ test.describe('InlineAutocomplete', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-inlineautocomplete--default',
+            id: 'deprecated-components-inlineautocomplete--default',
             globals: {
               colorScheme: theme,
             },
@@ -20,7 +20,7 @@ test.describe('InlineAutocomplete', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-inlineautocomplete--default',
+            id: 'deprecated-components-inlineautocomplete--default',
             globals: {
               colorScheme: theme,
             },
@@ -36,7 +36,7 @@ test.describe('InlineAutocomplete', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-inlineautocomplete--playground',
+            id: 'deprecated-components-inlineautocomplete--playground',
             globals: {
               colorScheme: theme,
             },
@@ -48,7 +48,7 @@ test.describe('InlineAutocomplete', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-inlineautocomplete--playground',
+            id: 'deprecated-components-inlineautocomplete--playground',
             globals: {
               colorScheme: theme,
             },
@@ -64,7 +64,7 @@ test.describe('InlineAutocomplete', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-inlineautocomplete-features--custom-rendering',
+            id: 'deprecated-components-inlineautocomplete-features--custom-rendering',
             globals: {
               colorScheme: theme,
             },
@@ -76,7 +76,7 @@ test.describe('InlineAutocomplete', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-inlineautocomplete-features--custom-rendering',
+            id: 'deprecated-components-inlineautocomplete-features--custom-rendering',
             globals: {
               colorScheme: theme,
             },
@@ -92,7 +92,7 @@ test.describe('InlineAutocomplete', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-inlineautocomplete-features--single-line',
+            id: 'deprecated-components-inlineautocomplete-features--single-line',
             globals: {
               colorScheme: theme,
             },
@@ -104,7 +104,7 @@ test.describe('InlineAutocomplete', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-inlineautocomplete-features--single-line',
+            id: 'deprecated-components-inlineautocomplete-features--single-line',
             globals: {
               colorScheme: theme,
             },

src/InlineAutocomplete/InlineAutocomplete.docs.json → src/drafts/InlineAutocomplete/InlineAutocomplete.docs.json

@@ -1,7 +1,7 @@
 {
   "id": "drafts_inline_autocomplete",
   "name": "InlineAutocomplete",
-  "status": "draft",
+  "status": "deprecated",
   "a11yReviewed": false,
   "stories": [],
   "props": [

src/InlineAutocomplete/InlineAutocomplete.features.stories.tsx → src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx

@@ -1,10 +1,10 @@
 import React, {useState} from 'react'
 import {Meta} from '@storybook/react'
-import {ActionList, Avatar, ActionListItemProps, Textarea, TextInput, FormControl} from '..'
+import {ActionList, Avatar, ActionListItemProps, Textarea, TextInput, FormControl} from '../..'
 import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions} from '.'
 
 export default {
-  title: 'Drafts/Components/InlineAutocomplete/Features',
+  title: 'Deprecated/Components/InlineAutocomplete/Features',
   component: InlineAutocomplete,
 } as Meta<typeof InlineAutocomplete>
 

src/InlineAutocomplete/InlineAutocomplete.stories.tsx → src/drafts/InlineAutocomplete/InlineAutocomplete.stories.tsx

@@ -1,11 +1,11 @@
 import React, {useState} from 'react'
 import {Meta} from '@storybook/react'
 
-import {BaseStyles, Box, Textarea, ThemeProvider, FormControl} from '..'
+import {BaseStyles, Box, Textarea, ThemeProvider, FormControl} from '../..'
 import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions} from '.'
 
 export default {
-  title: 'Drafts/Components/InlineAutocomplete',
+  title: 'Deprecated/Components/InlineAutocomplete',
   component: InlineAutocomplete,
   decorators: [
     Story => {

src/InlineAutocomplete/InlineAutocomplete.test.tsx → src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx

@@ -2,11 +2,11 @@ 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'
+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'
 

src/InlineAutocomplete/InlineAutocomplete.tsx → src/drafts/InlineAutocomplete/InlineAutocomplete.tsx

@@ -1,9 +1,9 @@
 import React, {cloneElement, useRef} from 'react'
-import Box from '../Box'
-import Portal from '../Portal'
-import {BetterSystemStyleObject} from '../sx'
-import {useSyntheticChange} from '../drafts/hooks/useSyntheticChange'
-import {getAbsoluteCharacterCoordinates} from '../drafts/utils/character-coordinates'
+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,
@@ -16,9 +16,9 @@ import {
 } from './types'
 import {augmentHandler, calculateSuggestionsQuery, getSuggestionValue, requireChildrenToBeInput} from './utils'
 
-import {useRefObjectAsForwardedRef} from '../hooks'
+import {useRefObjectAsForwardedRef} from '../../hooks'
 import AutocompleteSuggestions from './_AutocompleteSuggestions'
-import {useFormControlForwardedProps} from '../FormControl'
+import {useFormControlForwardedProps} from '../../FormControl'
 
 export type InlineAutocompleteProps = {
   /** Register the triggers that can cause suggestions to appear. */
@@ -101,6 +101,7 @@ const noop = () => {
 
 /**
  * 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,

src/InlineAutocomplete/_AutocompleteSuggestions.tsx → src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx

@@ -1,14 +1,14 @@
 import React, {useCallback, useRef, useState} from 'react'
-import Spinner from '../Spinner'
-import {ActionList, ActionListItemProps} from '../ActionList'
-import Box from '../Box'
-import {ComboboxCommitEvent, useCombobox} from '../drafts/hooks/useCombobox'
-import Overlay from '../Overlay'
+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 '../drafts/utils/character-coordinates'
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
+import {CharacterCoordinates} from '../utils/character-coordinates'
+import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
 
 type AutoCompleteSuggestionsProps = {
   suggestions: Suggestions | null

src/InlineAutocomplete/types.ts → src/drafts/InlineAutocomplete/types.ts

@@ -1,4 +1,4 @@
-import {ActionListItemProps} from '../ActionList'
+import {ActionListItemProps} from '../../ActionList'
 
 export type Trigger = {
   /** A single character that can cause the suggestion list to open. */

src/drafts/MarkdownEditor/MarkdownEditor.docs.json

@@ -1,7 +1,7 @@
 {
   "id": "drafts_markdown_editor",
   "name": "MarkdownEditor",
-  "status": "draft",
+  "status": "deprecated",
   "a11yReviewed": false,
   "stories": [],
   "props": [

src/drafts/MarkdownEditor/MarkdownEditor.features.stories.tsx

@@ -5,7 +5,7 @@ import Box from '../../Box'
 import MarkdownEditor, {Emoji, Mentionable, Reference, SavedReply} from '.'
 
 const meta: Meta = {
-  title: 'Drafts/Components/MarkdownEditor/Features',
+  title: 'Deprecated/Components/MarkdownEditor/Features',
   parameters: {
     controls: {
       include: [

src/drafts/MarkdownEditor/MarkdownEditor.stories.tsx

@@ -6,7 +6,7 @@ import MarkdownEditor, {Emoji, Mentionable, Reference, SavedReply} from '.'
 import ThemeProvider from '../../ThemeProvider'
 
 const meta: Meta = {
-  title: 'Drafts/Components/MarkdownEditor',
+  title: 'Deprecated/Components/MarkdownEditor',
   decorators: [
     Story => {
       return (

src/drafts/MarkdownEditor/MarkdownEditor.tsx

@@ -149,6 +149,7 @@ let editorsInPreviewMode: string[] = []
 
 /**
  * Markdown textarea with controls & keyboard shortcuts.
+ * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604)
  */
 const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
   (

src/drafts/MarkdownEditor/_MarkdownInput.tsx

@@ -1,7 +1,7 @@
 import {subscribe as subscribeToMarkdownPasting} from '@github/paste-markdown'
 import React, {forwardRef, useEffect, useMemo, useRef, useState} from 'react'
 import {useDynamicTextareaHeight} from '../hooks/useDynamicTextareaHeight'
-import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions} from '../../InlineAutocomplete'
+import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions} from '../InlineAutocomplete'
 import Textarea, {TextareaProps} from '../../Textarea'
 import {Emoji, useEmojiSuggestions} from './suggestions/_useEmojiSuggestions'
 import {Mentionable, useMentionSuggestions} from './suggestions/_useMentionSuggestions'

src/drafts/MarkdownEditor/index.ts

@@ -6,6 +6,7 @@ import {Label} from './Label'
 
 export type {MarkdownEditorHandle} from './MarkdownEditor'
 
+/** @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604) */
 const MarkdownEditor = Object.assign(_MarkdownEditor, {
   /** REQUIRED: An accessible label for the editor. */
   Label,

src/drafts/MarkdownEditor/suggestions/_useEmojiSuggestions.tsx

@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react'
 import {suggestionsCalculator, UseSuggestionsHook} from '.'
 import {ActionList} from '../../../ActionList'
-import {Suggestion, Trigger} from '../../../InlineAutocomplete'
+import {Suggestion, Trigger} from '../../InlineAutocomplete'
 
 type BaseEmoji = {
   /** Name (shortcode) of the emoji. Do not include the wrapping `:` symbols. */

src/drafts/MarkdownEditor/suggestions/_useMentionSuggestions.tsx

@@ -2,7 +2,7 @@ import {score} from 'fzy.js'
 import React, {useMemo} from 'react'
 import {suggestionsCalculator, UseSuggestionsHook} from '.'
 import {ActionList} from '../../../ActionList'
-import {Suggestion, Trigger} from '../../../InlineAutocomplete'
+import {Suggestion, Trigger} from '../../InlineAutocomplete'
 import Text from '../../../Text'
 
 /** Could be a user, team, or organization - anything that can be mentioned. */

src/drafts/MarkdownEditor/suggestions/_useReferenceSuggestions.tsx

@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react'
 import {suggestionsCalculator, UseSuggestionsHook} from '.'
 import {ActionList} from '../../../ActionList'
-import {Suggestion, Trigger} from '../../../InlineAutocomplete'
+import {Suggestion, Trigger} from '../../InlineAutocomplete'
 import Text from '../../../Text'
 import {score} from 'fzy.js'
 

src/drafts/MarkdownEditor/suggestions/index.ts

@@ -1,4 +1,4 @@
-import {Suggestion, Trigger} from '../../../InlineAutocomplete'
+import {Suggestion, Trigger} from '../../InlineAutocomplete'
 
 const MAX_SUGGESTIONS = 5
 

src/drafts/MarkdownViewer/MarkdownViewer.docs.json

@@ -1,7 +1,7 @@
 {
   "id": "drafts_markdown_viewer",
   "name": "MarkdownViewer",
-  "status": "draft",
+  "status": "deprecated",
   "a11yReviewed": false,
   "stories": [],
   "props": [

src/drafts/MarkdownViewer/MarkdownViewer.features.stories.tsx

@@ -8,7 +8,7 @@ import {useSafeAsyncCallback} from '../hooks/useSafeAsyncCallback'
 import MarkdownViewer from './MarkdownViewer'
 
 const meta: Meta = {
-  title: 'Drafts/Components/MarkdownViewer/Features',
+  title: 'Deprecated/Components/MarkdownViewer/Features',
   decorators: [
     Story => {
       return (

src/drafts/MarkdownViewer/MarkdownViewer.stories.tsx

@@ -8,7 +8,7 @@ import {useSafeAsyncCallback} from '../hooks/useSafeAsyncCallback'
 import MarkdownViewer from './MarkdownViewer'
 
 const meta: Meta = {
-  title: 'Drafts/Components/MarkdownViewer',
+  title: 'Deprecated/Components/MarkdownViewer',
   decorators: [
     Story => {
       return (

src/drafts/MarkdownViewer/MarkdownViewer.tsx

@@ -55,6 +55,7 @@ type NoninteractiveMarkdownViewerProps = CoreMarkdownViewerProps & {
 
 export type MarkdownViewerProps = NoninteractiveMarkdownViewerProps | InteractiveMarkdownViewerProps
 
+/** @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604) */
 const MarkdownViewer = ({
   dangerousRenderedHTML,
   loading = false,

src/drafts/hooks/useCombobox.ts

@@ -55,6 +55,8 @@ type UseComboboxSettings<T> = {
  * `useCombobox` will set nearly all necessary attributes by effect, but you **must** set
  * `role="option"` on list items in order for them to be 'seen' by the combobox. Style the
  * currently highlighted option with the `[aria-selected="true"]` selector.
+ *
+ * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604)
  */
 export const useCombobox = <T>({
   isOpen,

src/drafts/hooks/useDynamicTextareaHeight.ts

@@ -23,6 +23,8 @@ type UseDynamicTextareaHeightSettings = {
  *
  * NOTE: for the most accurate results, be sure that the `lineHeight` of the element is
  * explicitly set in CSS.
+ *
+ * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604)
  */
 export const useDynamicTextareaHeight = ({
   disabled,

src/drafts/hooks/useIgnoreKeyboardActionsWhileComposing.ts

@@ -18,6 +18,8 @@ import {CompositionEventHandler, KeyboardEventHandler, useCallback, useMemo, use
  * composing.
  *
  * @returns props which should be spread onto an `<input>` element
+ *
+ * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604)
  **/
 export const useIgnoreKeyboardActionsWhileComposing = (
   onKeyDown: KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>,

src/drafts/hooks/useSafeAsyncCallback.ts

@@ -22,6 +22,8 @@ export type CallbackCancelledResult = typeof callbackCancelledResult
  * This should typically be `false` but may be desirable in cases where user's changes would
  * not get saved unless the call is made, so the call can be made in the background after
  * unmount. If this is `true`, it's very important not to set state in this callback!
+ *
+ * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604)
  */
 export const useSafeAsyncCallback = <A extends unknown[], R>(
   fn: (...args: A) => R,

src/drafts/hooks/useSyntheticChange.ts

@@ -87,6 +87,8 @@ export type SyntheticChangeEmitter = (
  * Will first attempt to use the non-standard browser `execCommmand` API to simulate a typing
  * action. Failing this (ie, in test environments or certain browsers), the fallback handler
  * will be called with a fake constructed `ChangeEvent` that looks like a real event.
+ *
+ * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604)
  */
 export const useSyntheticChange = ({inputRef, fallbackEventHandler}: UseSyntheticChangeSettings) =>
   useCallback<SyntheticChangeEmitter>(