diff --git a/.changeset/cold-pigs-shop.md b/.changeset/cold-pigs-shop.md new file mode 100644 index 00000000000..793a2d90046 --- /dev/null +++ b/.changeset/cold-pigs-shop.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Deprecate `MarkdownEditor`, `MarkdownViewer`, `InlineAutocomplete`, and related hooks diff --git a/docs/content/drafts/InlineAutocomplete.mdx b/docs/content/drafts/InlineAutocomplete.mdx index 890d46ffefd..65b9ff3c541 100644 --- a/docs/content/drafts/InlineAutocomplete.mdx +++ b/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' diff --git a/docs/content/drafts/MarkdownEditor.mdx b/docs/content/drafts/MarkdownEditor.mdx index 2f126e19353..49bbad1d28c 100644 --- a/docs/content/drafts/MarkdownEditor.mdx +++ b/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' --- diff --git a/docs/content/drafts/MarkdownViewer.mdx b/docs/content/drafts/MarkdownViewer.mdx index 879de803192..718afd54d06 100644 --- a/docs/content/drafts/MarkdownViewer.mdx +++ b/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. --- diff --git a/e2e/components/InlineAutocomplete.test.ts b/e2e/components/InlineAutocomplete.test.ts index 84e4457990f..42090e57349 100644 --- a/e2e/components/InlineAutocomplete.test.ts +++ b/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, }, diff --git a/src/InlineAutocomplete/InlineAutocomplete.docs.json b/src/drafts/InlineAutocomplete/InlineAutocomplete.docs.json similarity index 99% rename from src/InlineAutocomplete/InlineAutocomplete.docs.json rename to src/drafts/InlineAutocomplete/InlineAutocomplete.docs.json index eaded29db28..5483ccb855b 100644 --- a/src/InlineAutocomplete/InlineAutocomplete.docs.json +++ b/src/drafts/InlineAutocomplete/InlineAutocomplete.docs.json @@ -1,7 +1,7 @@ { "id": "drafts_inline_autocomplete", "name": "InlineAutocomplete", - "status": "draft", + "status": "deprecated", "a11yReviewed": false, "stories": [], "props": [ diff --git a/src/InlineAutocomplete/InlineAutocomplete.features.stories.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx similarity index 98% rename from src/InlineAutocomplete/InlineAutocomplete.features.stories.tsx rename to src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx index 0037a811e53..4b5d30250b5 100644 --- a/src/InlineAutocomplete/InlineAutocomplete.features.stories.tsx +++ b/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 diff --git a/src/InlineAutocomplete/InlineAutocomplete.stories.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.stories.tsx similarity index 98% rename from src/InlineAutocomplete/InlineAutocomplete.stories.tsx rename to src/drafts/InlineAutocomplete/InlineAutocomplete.stories.tsx index d9762c3dd12..48e5efff765 100644 --- a/src/InlineAutocomplete/InlineAutocomplete.stories.tsx +++ b/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 => { diff --git a/src/InlineAutocomplete/InlineAutocomplete.test.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx similarity index 98% rename from src/InlineAutocomplete/InlineAutocomplete.test.tsx rename to src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx index fc836d5b6de..cfd7dff63ea 100644 --- a/src/InlineAutocomplete/InlineAutocomplete.test.tsx +++ b/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' diff --git a/src/InlineAutocomplete/InlineAutocomplete.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx similarity index 95% rename from src/InlineAutocomplete/InlineAutocomplete.tsx rename to src/drafts/InlineAutocomplete/InlineAutocomplete.tsx index 9f0c4f39fa0..1a7214b6570 100644 --- a/src/InlineAutocomplete/InlineAutocomplete.tsx +++ b/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, diff --git a/src/InlineAutocomplete/_AutocompleteSuggestions.tsx b/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx similarity index 92% rename from src/InlineAutocomplete/_AutocompleteSuggestions.tsx rename to src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx index 17be0fa857f..3d9bdfa51c6 100644 --- a/src/InlineAutocomplete/_AutocompleteSuggestions.tsx +++ b/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 diff --git a/src/InlineAutocomplete/index.ts b/src/drafts/InlineAutocomplete/index.ts similarity index 100% rename from src/InlineAutocomplete/index.ts rename to src/drafts/InlineAutocomplete/index.ts diff --git a/src/InlineAutocomplete/types.ts b/src/drafts/InlineAutocomplete/types.ts similarity index 97% rename from src/InlineAutocomplete/types.ts rename to src/drafts/InlineAutocomplete/types.ts index 25d326ce34c..2b7334d1c26 100644 --- a/src/InlineAutocomplete/types.ts +++ b/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. */ diff --git a/src/InlineAutocomplete/utils.ts b/src/drafts/InlineAutocomplete/utils.ts similarity index 100% rename from src/InlineAutocomplete/utils.ts rename to src/drafts/InlineAutocomplete/utils.ts diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.docs.json b/src/drafts/MarkdownEditor/MarkdownEditor.docs.json index 28bba794068..81402bf4cf4 100644 --- a/src/drafts/MarkdownEditor/MarkdownEditor.docs.json +++ b/src/drafts/MarkdownEditor/MarkdownEditor.docs.json @@ -1,7 +1,7 @@ { "id": "drafts_markdown_editor", "name": "MarkdownEditor", - "status": "draft", + "status": "deprecated", "a11yReviewed": false, "stories": [], "props": [ diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.features.stories.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.features.stories.tsx index 27d6413f938..a6e0362d50c 100644 --- a/src/drafts/MarkdownEditor/MarkdownEditor.features.stories.tsx +++ b/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: [ diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.stories.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.stories.tsx index 714a9736d80..5985dcb87af 100644 --- a/src/drafts/MarkdownEditor/MarkdownEditor.stories.tsx +++ b/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 ( diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.tsx index ad36ce2d674..c34bcfb12c7 100644 --- a/src/drafts/MarkdownEditor/MarkdownEditor.tsx +++ b/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( ( diff --git a/src/drafts/MarkdownEditor/_MarkdownInput.tsx b/src/drafts/MarkdownEditor/_MarkdownInput.tsx index 62136b5699a..0581ce56a37 100644 --- a/src/drafts/MarkdownEditor/_MarkdownInput.tsx +++ b/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' diff --git a/src/drafts/MarkdownEditor/index.ts b/src/drafts/MarkdownEditor/index.ts index b5010bea1b8..93066a269bc 100644 --- a/src/drafts/MarkdownEditor/index.ts +++ b/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, diff --git a/src/drafts/MarkdownEditor/suggestions/_useEmojiSuggestions.tsx b/src/drafts/MarkdownEditor/suggestions/_useEmojiSuggestions.tsx index df1d74bb5ce..7c40dd82230 100644 --- a/src/drafts/MarkdownEditor/suggestions/_useEmojiSuggestions.tsx +++ b/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. */ diff --git a/src/drafts/MarkdownEditor/suggestions/_useMentionSuggestions.tsx b/src/drafts/MarkdownEditor/suggestions/_useMentionSuggestions.tsx index 8a9379029e8..386b4e4165e 100644 --- a/src/drafts/MarkdownEditor/suggestions/_useMentionSuggestions.tsx +++ b/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. */ diff --git a/src/drafts/MarkdownEditor/suggestions/_useReferenceSuggestions.tsx b/src/drafts/MarkdownEditor/suggestions/_useReferenceSuggestions.tsx index 2de5acb8350..efd97c4f582 100644 --- a/src/drafts/MarkdownEditor/suggestions/_useReferenceSuggestions.tsx +++ b/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' diff --git a/src/drafts/MarkdownEditor/suggestions/index.ts b/src/drafts/MarkdownEditor/suggestions/index.ts index a3493c22d1f..a00939c8ffd 100644 --- a/src/drafts/MarkdownEditor/suggestions/index.ts +++ b/src/drafts/MarkdownEditor/suggestions/index.ts @@ -1,4 +1,4 @@ -import {Suggestion, Trigger} from '../../../InlineAutocomplete' +import {Suggestion, Trigger} from '../../InlineAutocomplete' const MAX_SUGGESTIONS = 5 diff --git a/src/drafts/MarkdownViewer/MarkdownViewer.docs.json b/src/drafts/MarkdownViewer/MarkdownViewer.docs.json index 23c0b8087c5..3a2185f1cb6 100644 --- a/src/drafts/MarkdownViewer/MarkdownViewer.docs.json +++ b/src/drafts/MarkdownViewer/MarkdownViewer.docs.json @@ -1,7 +1,7 @@ { "id": "drafts_markdown_viewer", "name": "MarkdownViewer", - "status": "draft", + "status": "deprecated", "a11yReviewed": false, "stories": [], "props": [ diff --git a/src/drafts/MarkdownViewer/MarkdownViewer.features.stories.tsx b/src/drafts/MarkdownViewer/MarkdownViewer.features.stories.tsx index 44727bd9512..c4a4be0f557 100644 --- a/src/drafts/MarkdownViewer/MarkdownViewer.features.stories.tsx +++ b/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 ( diff --git a/src/drafts/MarkdownViewer/MarkdownViewer.stories.tsx b/src/drafts/MarkdownViewer/MarkdownViewer.stories.tsx index 3120aa54eec..567c604a94f 100644 --- a/src/drafts/MarkdownViewer/MarkdownViewer.stories.tsx +++ b/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 ( diff --git a/src/drafts/MarkdownViewer/MarkdownViewer.tsx b/src/drafts/MarkdownViewer/MarkdownViewer.tsx index 33f5acc4d4d..092dd836e0a 100644 --- a/src/drafts/MarkdownViewer/MarkdownViewer.tsx +++ b/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, diff --git a/src/drafts/hooks/useCombobox.ts b/src/drafts/hooks/useCombobox.ts index 3bb10ba4ec2..153512902aa 100644 --- a/src/drafts/hooks/useCombobox.ts +++ b/src/drafts/hooks/useCombobox.ts @@ -55,6 +55,8 @@ type UseComboboxSettings = { * `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 = ({ isOpen, diff --git a/src/drafts/hooks/useDynamicTextareaHeight.ts b/src/drafts/hooks/useDynamicTextareaHeight.ts index f6ce3a55745..86eae56494c 100644 --- a/src/drafts/hooks/useDynamicTextareaHeight.ts +++ b/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, diff --git a/src/drafts/hooks/useIgnoreKeyboardActionsWhileComposing.ts b/src/drafts/hooks/useIgnoreKeyboardActionsWhileComposing.ts index 3164fdd5d90..bafff5527c7 100644 --- a/src/drafts/hooks/useIgnoreKeyboardActionsWhileComposing.ts +++ b/src/drafts/hooks/useIgnoreKeyboardActionsWhileComposing.ts @@ -18,6 +18,8 @@ import {CompositionEventHandler, KeyboardEventHandler, useCallback, useMemo, use * composing. * * @returns props which should be spread onto an `` element + * + * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604) **/ export const useIgnoreKeyboardActionsWhileComposing = ( onKeyDown: KeyboardEventHandler, diff --git a/src/drafts/hooks/useSafeAsyncCallback.ts b/src/drafts/hooks/useSafeAsyncCallback.ts index 78b741dd7c1..1a6c0aafc8a 100644 --- a/src/drafts/hooks/useSafeAsyncCallback.ts +++ b/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 = ( fn: (...args: A) => R, diff --git a/src/drafts/hooks/useSyntheticChange.ts b/src/drafts/hooks/useSyntheticChange.ts index e67c3617bf1..35e84145f14 100644 --- a/src/drafts/hooks/useSyntheticChange.ts +++ b/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( diff --git a/src/drafts/hooks/useUnifiedFileSelect.ts b/src/drafts/hooks/useUnifiedFileSelect.ts index fdee7c1d2a7..25396859065 100644 --- a/src/drafts/hooks/useUnifiedFileSelect.ts +++ b/src/drafts/hooks/useUnifiedFileSelect.ts @@ -111,6 +111,8 @@ const mimeTypeRegex = /([^/]+)\/([^;]);?(.*)/ * Provides event handlers for all types of file upload targets, unifying events into a * single `onSelect` event. Does not manage its own state as far as which files are * currently selected - this should be done in the parent component. + * + * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604) */ export function useUnifiedFileSelect(props: FileSelectProps): UnifiedFileSelectResult { const clickTargetProps = useClickFileSelect(props) @@ -131,6 +133,8 @@ export function useUnifiedFileSelect(props: FileSelectProps): UnifiedFileSelectR /** * Provides a click event handler for opening a file select dialog. Calls `onSelect` upon * completion. + * + * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604) */ export function useClickFileSelect(props: FileSelectProps): ClickTargetProps { const onSelectFiles = useOnSelectFiles(props) @@ -194,6 +198,8 @@ const isFileDragEvent = (event: React.DragEvent) => * @return Tuple of `[isDraggedOver, dropTargetProps]` where `isDraggedOver` is true if a valid item * is dragged over the drop target and `dropTargetProps` should be spread to the drop * target. + * + * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604) */ export function useDropFileSelect(props: FileSelectProps): [isDraggedOver: boolean, dropTargetProps: DropTargetProps] { const onSelectFiles = useOnSelectFiles(props) @@ -242,6 +248,8 @@ export function useDropFileSelect(props: FileSelectProps): [isDraggedOver: boole /** * Provides a paste event handler for pasting files. Props should be spread on an element * with `contenteditable` or a text input/textarea. + * + * @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604) */ export function usePasteFileSelect(props: FileSelectProps): PasteTargetProps { const onSelectFiles = useOnSelectFiles(props) diff --git a/src/drafts/index.ts b/src/drafts/index.ts index 3d5ea0149af..afe2a6082e3 100644 --- a/src/drafts/index.ts +++ b/src/drafts/index.ts @@ -27,14 +27,14 @@ export type { export * from '../Dialog/Dialog' -export {default as InlineAutocomplete} from '../InlineAutocomplete' +export {default as InlineAutocomplete} from './InlineAutocomplete' export type { InlineAutocompleteProps, ShowSuggestionsEvent, Suggestion, Suggestions, Trigger, -} from '../InlineAutocomplete' +} from './InlineAutocomplete' export {default as MarkdownViewer} from './MarkdownViewer' export type {MarkdownViewerProps, InteractiveMarkdownViewerProps} from './MarkdownViewer'