[Autocomplete] Rename values of the reason argument

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;
                 }

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;
                 }

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
   +<Autocomplete clearIcon={defaultClearIcon} />
   ```
 
+- 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:

docs/translations/api-docs/autocomplete/autocomplete.json

@@ -40,8 +40,8 @@
     "loadingText": "Text to display when in a loading state.<br>For localization purposes, you can use the provided <a href=\"/guides/localization/\">translations</a>.",
     "multiple": "If <code>true</code>, <code>value</code> must be an array and the menu will support multiple selections.",
     "noOptionsText": "Text to display when there are no options.<br>For localization purposes, you can use the provided <a href=\"/guides/localization/\">translations</a>.",
-    "onChange": "Callback fired when the value changes.<br><br><strong>Signature:</strong><br><code>function(event: object, value: T \\| T[], reason: string, details?: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>value:</em> The new value of the component.<br><em>reason:</em> One of &quot;create-option&quot;, &quot;select-option&quot;, &quot;remove-option&quot;, &quot;blur&quot; or &quot;clear&quot;.",
-    "onClose": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).<br><br><strong>Signature:</strong><br><code>function(event: object, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>reason:</em> Can be: <code>&quot;toggleInput&quot;</code>, <code>&quot;escape&quot;</code>, <code>&quot;select-option&quot;</code>, <code>&quot;remove-option&quot;</code>, <code>&quot;blur&quot;</code>.",
+    "onChange": "Callback fired when the value changes.<br><br><strong>Signature:</strong><br><code>function(event: object, value: T \\| T[], reason: string, details?: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>value:</em> The new value of the component.<br><em>reason:</em> One of &quot;createOption&quot;, &quot;selectOption&quot;, &quot;removeOption&quot;, &quot;blur&quot; or &quot;clear&quot;.",
+    "onClose": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).<br><br><strong>Signature:</strong><br><code>function(event: object, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>reason:</em> Can be: <code>&quot;toggleInput&quot;</code>, <code>&quot;escape&quot;</code>, <code>&quot;selectOption&quot;</code>, <code>&quot;removeOption&quot;</code>, <code>&quot;blur&quot;</code>.",
     "onHighlightChange": "Callback fired when the highlight option changes.<br><br><strong>Signature:</strong><br><code>function(event: object, option: T, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>option:</em> The highlighted option.<br><em>reason:</em> Can be: <code>&quot;keyboard&quot;</code>, <code>&quot;auto&quot;</code>, <code>&quot;mouse&quot;</code>.",
     "onInputChange": "Callback fired when the input value changes.<br><br><strong>Signature:</strong><br><code>function(event: object, value: string, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>value:</em> The new value of the text input.<br><em>reason:</em> Can be: <code>&quot;input&quot;</code> (user input), <code>&quot;reset&quot;</code> (programmatic change), <code>&quot;clear&quot;</code>.",
     "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).<br><br><strong>Signature:</strong><br><code>function(event: object) =&gt; void</code><br><em>event:</em> The event source of the callback.",

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,
   /**

packages/material-ui/src/Autocomplete/Autocomplete.test.js

@@ -1785,7 +1785,7 @@ describe('<Autocomplete />', () => {
 
       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('<Autocomplete />', () => {
 
       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('<Autocomplete />', () => {
 
       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] });
     });
 

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<T = string> {
@@ -282,8 +282,8 @@ export interface AutocompleteChangeDetails<T = string> {
 export type AutocompleteCloseReason =
   | 'toggleInput'
   | 'escape'
-  | 'select-option'
-  | 'remove-option'
+  | 'selectOption'
+  | 'removeOption'
   | 'blur';
 export type AutocompleteInputChangeReason = 'input' | 'reset' | 'clear';
 

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,15 +872,15 @@ 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;
   };
 
   const handleTagDelete = (index) => (event) => {
     const newValue = value.slice();
     newValue.splice(index, 1);
-    handleValue(event, newValue, 'remove-option', {
+    handleValue(event, newValue, 'removeOption', {
       option: value[index],
     });
   };