diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.js b/docs/src/pages/components/autocomplete/GitHubLabel.js index a42bbaec4866af..a6545e01dc7932 100644 --- a/docs/src/pages/components/autocomplete/GitHubLabel.js +++ b/docs/src/pages/components/autocomplete/GitHubLabel.js @@ -185,7 +185,7 @@ export default function GitHubLabel() { if ( event.type === 'keydown' && event.key === 'Backspace' && - reason === 'remove-option' + reason === 'removeOption' ) { return; } diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.tsx b/docs/src/pages/components/autocomplete/GitHubLabel.tsx index ee0150656adfeb..59900422288add 100644 --- a/docs/src/pages/components/autocomplete/GitHubLabel.tsx +++ b/docs/src/pages/components/autocomplete/GitHubLabel.tsx @@ -190,7 +190,7 @@ export default function GitHubLabel() { if ( event.type === 'keydown' && (event as React.KeyboardEvent).key === 'Backspace' && - reason === 'remove-option' + reason === 'removeOption' ) { return; } diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index deb5cdaaf849bb..d996e285eb7529 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -405,6 +405,12 @@ As the core components use emotion as a styled engine, the props used by emotion + ``` +- The following values of the reason argument in `onChange` and `onClose` were renamed for consistency: + + 1. `create-option` to `createOption` + 2. `select-option` to `selectOption` + 3. `remove-option` to `removeOption` + ### Avatar - Rename `circle` to `circular` for consistency. The possible values should be adjectives, not nouns: diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/docs/translations/api-docs/autocomplete/autocomplete.json index e99c73796941ce..11842047c6bec6 100644 --- a/docs/translations/api-docs/autocomplete/autocomplete.json +++ b/docs/translations/api-docs/autocomplete/autocomplete.json @@ -40,8 +40,8 @@ "loadingText": "Text to display when in a loading state.
For localization purposes, you can use the provided translations.", "multiple": "If true, value must be an array and the menu will support multiple selections.", "noOptionsText": "Text to display when there are no options.
For localization purposes, you can use the provided translations.", - "onChange": "Callback fired when the value changes.

Signature:
function(event: object, value: T \\| T[], reason: string, details?: string) => void
event: The event source of the callback.
value: The new value of the component.
reason: One of "create-option", "select-option", "remove-option", "blur" or "clear".", - "onClose": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).

Signature:
function(event: object, reason: string) => void
event: The event source of the callback.
reason: Can be: "toggleInput", "escape", "select-option", "remove-option", "blur".", + "onChange": "Callback fired when the value changes.

Signature:
function(event: object, value: T \\| T[], reason: string, details?: string) => void
event: The event source of the callback.
value: The new value of the component.
reason: One of "createOption", "selectOption", "removeOption", "blur" or "clear".", + "onClose": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).

Signature:
function(event: object, reason: string) => void
event: The event source of the callback.
reason: Can be: "toggleInput", "escape", "selectOption", "removeOption", "blur".", "onHighlightChange": "Callback fired when the highlight option changes.

Signature:
function(event: object, option: T, reason: string) => void
event: The event source of the callback.
option: The highlighted option.
reason: Can be: "keyboard", "auto", "mouse".", "onInputChange": "Callback fired when the input value changes.

Signature:
function(event: object, value: string, reason: string) => void
event: The event source of the callback.
value: The new value of the text input.
reason: Can be: "input" (user input), "reset" (programmatic change), "clear".", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).

Signature:
function(event: object) => void
event: The event source of the callback.", diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.js b/packages/material-ui/src/Autocomplete/Autocomplete.js index 31bde4c434f58f..ffd3a2f4994c83 100644 --- a/packages/material-ui/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui/src/Autocomplete/Autocomplete.js @@ -935,7 +935,7 @@ Autocomplete.propTypes /* remove-proptypes */ = { * * @param {object} event The event source of the callback. * @param {T|T[]} value The new value of the component. - * @param {string} reason One of "create-option", "select-option", "remove-option", "blur" or "clear". + * @param {string} reason One of "createOption", "selectOption", "removeOption", "blur" or "clear". * @param {string} [details] */ onChange: PropTypes.func, @@ -944,7 +944,7 @@ Autocomplete.propTypes /* remove-proptypes */ = { * Use in controlled mode (see open). * * @param {object} event The event source of the callback. - * @param {string} reason Can be: `"toggleInput"`, `"escape"`, `"select-option"`, `"remove-option"`, `"blur"`. + * @param {string} reason Can be: `"toggleInput"`, `"escape"`, `"selectOption"`, `"removeOption"`, `"blur"`. */ onClose: PropTypes.func, /** diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.test.js b/packages/material-ui/src/Autocomplete/Autocomplete.test.js index 6aed4a0841ddb3..9ea295584c8926 100644 --- a/packages/material-ui/src/Autocomplete/Autocomplete.test.js +++ b/packages/material-ui/src/Autocomplete/Autocomplete.test.js @@ -1785,7 +1785,7 @@ describe('', () => { expect(handleChange.callCount).to.equal(1); expect(handleChange.args[0][1]).to.equal(options[2]); - expect(handleChange.args[0][2]).to.equal('create-option'); + expect(handleChange.args[0][2]).to.equal('createOption'); expect(handleChange.args[0][3]).to.deep.equal({ option: options[2] }); }); @@ -1807,7 +1807,7 @@ describe('', () => { expect(handleChange.callCount).to.equal(1); expect(handleChange.args[0][1]).to.equal(options[0]); - expect(handleChange.args[0][2]).to.equal('select-option'); + expect(handleChange.args[0][2]).to.equal('selectOption'); expect(handleChange.args[0][3]).to.deep.equal({ option: options[0] }); }); @@ -1829,7 +1829,7 @@ describe('', () => { expect(handleChange.callCount).to.equal(1); expect(handleChange.args[0][1]).to.deep.equal(options.slice(0, 2)); - expect(handleChange.args[0][2]).to.equal('remove-option'); + expect(handleChange.args[0][2]).to.equal('removeOption'); expect(handleChange.args[0][3]).to.deep.equal({ option: options[2] }); }); diff --git a/packages/material-ui/src/useAutocomplete/useAutocomplete.d.ts b/packages/material-ui/src/useAutocomplete/useAutocomplete.d.ts index b363af17d78bbb..83084ebc18e33d 100644 --- a/packages/material-ui/src/useAutocomplete/useAutocomplete.d.ts +++ b/packages/material-ui/src/useAutocomplete/useAutocomplete.d.ts @@ -182,7 +182,7 @@ export interface UseAutocompleteProps< * Use in controlled mode (see open). * * @param {object} event The event source of the callback. - * @param {string} reason Can be: `"toggleInput"`, `"escape"`, `"select-option"`, `"remove-option"`, `"blur"`. + * @param {string} reason Can be: `"toggleInput"`, `"escape"`, `"selectOption"`, `"removeOption"`, `"blur"`. */ onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void; /** @@ -257,7 +257,7 @@ export interface UseAutocompleteProps< * * @param {object} event The event source of the callback. * @param {T|T[]} value The new value of the component. - * @param {string} reason One of "create-option", "select-option", "remove-option", "blur" or "clear". + * @param {string} reason One of "createOption", "selectOption", "removeOption", "blur" or "clear". * @param {string} [details] */ onChange?: ( @@ -271,9 +271,9 @@ export interface UseAutocompleteProps< export type AutocompleteHighlightChangeReason = 'keyboard' | 'mouse' | 'auto'; export type AutocompleteChangeReason = - | 'create-option' - | 'select-option' - | 'remove-option' + | 'createOption' + | 'selectOption' + | 'removeOption' | 'clear' | 'blur'; export interface AutocompleteChangeDetails { @@ -282,8 +282,8 @@ export interface AutocompleteChangeDetails { export type AutocompleteCloseReason = | 'toggleInput' | 'escape' - | 'select-option' - | 'remove-option' + | 'selectOption' + | 'removeOption' | 'blur'; export type AutocompleteInputChangeReason = 'input' | 'reset' | 'clear'; diff --git a/packages/material-ui/src/useAutocomplete/useAutocomplete.js b/packages/material-ui/src/useAutocomplete/useAutocomplete.js index 01b3f265027e12..397bd055142394 100644 --- a/packages/material-ui/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui/src/useAutocomplete/useAutocomplete.js @@ -554,7 +554,7 @@ export default function useAutocomplete(props) { const isTouch = React.useRef(false); - const selectNewValue = (event, option, reasonProp = 'select-option', origin = 'options') => { + const selectNewValue = (event, option, reasonProp = 'selectOption', origin = 'options') => { let reason = reasonProp; let newValue = option; @@ -580,7 +580,7 @@ export default function useAutocomplete(props) { newValue.push(option); } else if (origin !== 'freeSolo') { newValue.splice(itemIndex, 1); - reason = 'remove-option'; + reason = 'removeOption'; } } @@ -757,7 +757,7 @@ export default function useAutocomplete(props) { return; } - selectNewValue(event, option, 'select-option'); + selectNewValue(event, option, 'selectOption'); // Move the selection to the end. if (autoComplete) { @@ -771,7 +771,7 @@ export default function useAutocomplete(props) { // Allow people to add new values before they submit the form. event.preventDefault(); } - selectNewValue(event, inputValue, 'create-option', 'freeSolo'); + selectNewValue(event, inputValue, 'createOption', 'freeSolo'); } break; case 'Escape': @@ -794,7 +794,7 @@ export default function useAutocomplete(props) { const index = focusedTag === -1 ? value.length - 1 : focusedTag; const newValue = value.slice(); newValue.splice(index, 1); - handleValue(event, newValue, 'remove-option', { + handleValue(event, newValue, 'removeOption', { option: value[index], }); } @@ -872,7 +872,7 @@ export default function useAutocomplete(props) { const handleOptionClick = (event) => { const index = Number(event.currentTarget.getAttribute('data-option-index')); - selectNewValue(event, filteredOptions[index], 'select-option'); + selectNewValue(event, filteredOptions[index], 'selectOption'); isTouch.current = false; }; @@ -880,7 +880,7 @@ export default function useAutocomplete(props) { const handleTagDelete = (index) => (event) => { const newValue = value.slice(); newValue.splice(index, 1); - handleValue(event, newValue, 'remove-option', { + handleValue(event, newValue, 'removeOption', { option: value[index], }); };