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

{
  "componentDescription": "",
  "propDescriptions": {
    "autoComplete": {
      "description": "If <code>true</code>, the portion of the selected suggestion that the user hasn&#39;t typed, known as the completion string, appears inline after the input cursor in the textbox. The inline completion string is visually highlighted and has a selected state."
    },
    "autoHighlight": {
      "description": "If <code>true</code>, the first option is automatically highlighted."
    },
    "autoSelect": {
      "description": "If <code>true</code>, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input.<br>When using the <code>freeSolo</code> mode, the typed value will be the input value if the Autocomplete loses focus without highlighting an option."
    },
    "blurOnSelect": {
      "description": "<p>Control if the input should be blurred when an option is selected:</p>\n<ul>\n<li><code>false</code> the input is not blurred.</li>\n<li><code>true</code> the input is always blurred.</li>\n<li><code>touch</code> the input is blurred after a touch event.</li>\n<li><code>mouse</code> the input is blurred after a mouse event.</li>\n</ul>\n"
    },
    "ChipProps": {
      "description": "Props applied to the <a href=\"https://mui.com/material-ui/api/chip/\"><code>Chip</code></a> element."
    },
    "classes": { "description": "Override or extend the styles applied to the component." },
    "clearIcon": { "description": "The icon to display in place of the default clear icon." },
    "clearOnBlur": {
      "description": "If <code>true</code>, the input&#39;s text is cleared on blur if no value is selected.<br>Set it to <code>true</code> if you want to help the user enter a new value. Set it to <code>false</code> if you want to help the user resume their search."
    },
    "clearOnEscape": {
      "description": "If <code>true</code>, clear all values when the user presses escape and the popup is closed."
    },
    "clearText": {
      "description": "Override the default text for the <em>clear</em> icon button.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
    },
    "closeText": {
      "description": "Override the default text for the <em>close popup</em> icon button.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
    },
    "componentsProps": { "description": "The props used for each slot inside." },
    "defaultValue": {
      "description": "The default value. Use when the component is not controlled."
    },
    "disableClearable": { "description": "If <code>true</code>, the input can&#39;t be cleared." },
    "disableCloseOnSelect": {
      "description": "If <code>true</code>, the popup won&#39;t close when a value is selected."
    },
    "disabled": { "description": "If <code>true</code>, the component is disabled." },
    "disabledItemsFocusable": {
      "description": "If <code>true</code>, will allow focus on disabled items."
    },
    "disableListWrap": {
      "description": "If <code>true</code>, the list box in the popup will not wrap focus."
    },
    "disablePortal": {
      "description": "If <code>true</code>, the <code>Popper</code> content will be under the DOM hierarchy of the parent component."
    },
    "filterOptions": {
      "description": "A function that determines the filtered options to be rendered on search.",
      "typeDescriptions": {
        "options": { "name": "options", "description": "The options to render." },
        "state": { "name": "state", "description": "The state of the component." }
      }
    },
    "filterSelectedOptions": {
      "description": "If <code>true</code>, hide the selected options from the list box."
    },
    "forcePopupIcon": { "description": "Force the visibility display of the popup icon." },
    "freeSolo": {
      "description": "If <code>true</code>, the Autocomplete is free solo, meaning that the user input is not bound to provided options."
    },
    "fullWidth": {
      "description": "If <code>true</code>, the input will take up the full width of its container."
    },
    "getLimitTagsText": {
      "description": "The label to display when the tags are truncated (<code>limitTags</code>).",
      "typeDescriptions": {
        "more": { "name": "more", "description": "The number of truncated tags." }
      }
    },
    "getOptionDisabled": {
      "description": "Used to determine the disabled state for a given option.",
      "typeDescriptions": {
        "option": {
          "name": "option",
          "description": "The option to test.",
          "argType": "Value",
          "argTypeDescription": "The option shape. Will be the same shape as an item of the options."
        }
      }
    },
    "getOptionKey": {
      "description": "Used to determine the key for a given option. This can be useful when the labels of options are not unique (since labels are used as keys by default).",
      "typeDescriptions": {
        "option": { "name": "option", "description": "The option to get the key for." }
      }
    },
    "getOptionLabel": {
      "description": "Used to determine the string value for a given option. It&#39;s used to fill the input (and the list box options if <code>renderOption</code> is not provided).<br>If used in free solo mode, it must accept both the type of the options and a string."
    },
    "groupBy": {
      "description": "If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when <code>renderGroup</code> is not provided.",
      "typeDescriptions": {
        "option": { "name": "option", "description": "The Autocomplete option." }
      }
    },
    "handleHomeEndKeys": {
      "description": "If <code>true</code>, the component handles the &quot;Home&quot; and &quot;End&quot; keys when the popup is open. It should move focus to the first option and last option, respectively."
    },
    "id": {
      "description": "This prop is used to help implement the accessibility logic. If you don&#39;t provide an id it will fall back to a randomly generated one."
    },
    "includeInputInList": {
      "description": "If <code>true</code>, the highlight can move to the input."
    },
    "inputValue": { "description": "The input value." },
    "isOptionEqualToValue": {
      "description": "Used to determine if the option represents the given value. Uses strict equality by default. ⚠️ Both arguments need to be handled, an option can only match with one value.",
      "typeDescriptions": {
        "option": { "name": "option", "description": "The option to test." },
        "value": { "name": "value", "description": "The value to test against." }
      }
    },
    "limitTags": {
      "description": "The maximum number of tags that will be visible when not focused. Set <code>-1</code> to disable the limit."
    },
    "ListboxComponent": { "description": "The component used to render the listbox." },
    "ListboxProps": { "description": "Props applied to the Listbox element." },
    "loading": {
      "description": "If <code>true</code>, the component is in a loading state. This shows the <code>loadingText</code> in place of suggestions (only if there are no suggestions to show, for example <code>options</code> are empty)."
    },
    "loadingText": {
      "description": "Text to display when in a loading state.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
    },
    "multiple": {
      "description": "If <code>true</code>, <code>value</code> must be an array and the menu will support multiple selections."
    },
    "noOptionsText": {
      "description": "Text to display when there are no options.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
    },
    "onChange": {
      "description": "Callback fired when the value changes.",
      "typeDescriptions": {
        "event": { "name": "event", "description": "The event source of the callback." },
        "value": { "name": "value", "description": "The new value of the component." },
        "reason": {
          "name": "reason",
          "description": "One of &quot;createOption&quot;, &quot;selectOption&quot;, &quot;removeOption&quot;, &quot;blur&quot; or &quot;clear&quot;."
        }
      }
    },
    "onClose": {
      "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).",
      "typeDescriptions": {
        "event": { "name": "event", "description": "The event source of the callback." },
        "reason": {
          "name": "reason",
          "description": "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": {
      "description": "Callback fired when the highlight option changes.",
      "typeDescriptions": {
        "event": { "name": "event", "description": "The event source of the callback." },
        "option": { "name": "option", "description": "The highlighted option." },
        "reason": {
          "name": "reason",
          "description": "Can be: <code>&quot;keyboard&quot;</code>, <code>&quot;mouse&quot;</code>, <code>&quot;touch&quot;</code>."
        }
      }
    },
    "onInputChange": {
      "description": "Callback fired when the input value changes.",
      "typeDescriptions": {
        "event": { "name": "event", "description": "The event source of the callback." },
        "value": { "name": "value", "description": "The new value of the text input." },
        "reason": {
          "name": "reason",
          "description": "Can be: <code>&quot;input&quot;</code> (user input), <code>&quot;reset&quot;</code> (programmatic change), <code>&quot;clear&quot;</code>, <code>&quot;blur&quot;</code>, <code>&quot;selectOption&quot;</code>, <code>&quot;removeOption&quot;</code>"
        }
      }
    },
    "onOpen": {
      "description": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).",
      "typeDescriptions": {
        "event": { "name": "event", "description": "The event source of the callback." }
      }
    },
    "open": { "description": "If <code>true</code>, the component is shown." },
    "openOnFocus": { "description": "If <code>true</code>, the popup will open on input focus." },
    "openText": {
      "description": "Override the default text for the <em>open popup</em> icon button.<br>For localization purposes, you can use the provided <a href=\"https://mui.com/material-ui/guides/localization/\">translations</a>."
    },
    "options": { "description": "A list of options that will be shown in the Autocomplete." },
    "PaperComponent": { "description": "The component used to render the body of the popup." },
    "PopperComponent": { "description": "The component used to position the popup." },
    "popupIcon": { "description": "The icon to display in place of the default popup icon." },
    "readOnly": {
      "description": "If <code>true</code>, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted."
    },
    "renderGroup": {
      "description": "Render the group.",
      "typeDescriptions": { "params": { "name": "params", "description": "The group to render." } }
    },
    "renderInput": {
      "description": "Render the input.<br><strong>Note:</strong> The <code>renderInput</code> prop must return a <code>TextField</code> component or a compatible custom component that correctly forwards <code>InputProps.ref</code> and spreads <code>inputProps</code>. This ensures proper integration with the Autocomplete&#39;s internal logic (e.g., focus management and keyboard navigation).<br>Avoid using components like <code>DatePicker</code> or <code>Select</code> directly, as they may not forward the required props, leading to runtime errors or unexpected behavior."
    },
    "renderOption": {
      "description": "Render the option, use <code>getOptionLabel</code> by default.",
      "typeDescriptions": {
        "props": { "name": "props", "description": "The props to apply on the li element." },
        "option": { "name": "option", "description": "The option to render." },
        "state": { "name": "state", "description": "The state of each option." },
        "ownerState": {
          "name": "ownerState",
          "description": "The state of the Autocomplete component."
        }
      }
    },
    "renderTags": {
      "description": "Render the selected value when doing multiple selections.",
      "typeDescriptions": {
        "value": {
          "name": "value",
          "description": "The <code>value</code> provided to the component."
        },
        "getTagProps": { "name": "getTagProps", "description": "A tag props getter." },
        "ownerState": {
          "name": "ownerState",
          "description": "The state of the Autocomplete component."
        }
      }
    },
    "renderValue": {
      "description": "Renders the selected value(s) as rich content in the input for both single and multiple selections.",
      "typeDescriptions": {
        "value": {
          "name": "value",
          "description": "The <code>value</code> provided to the component."
        },
        "getItemProps": { "name": "getItemProps", "description": "The value item props." },
        "ownerState": {
          "name": "ownerState",
          "description": "The state of the Autocomplete component."
        }
      }
    },
    "selectOnFocus": {
      "description": "If <code>true</code>, the input&#39;s text is selected on focus. It helps the user clear the selected value."
    },
    "size": { "description": "The size of the component." },
    "slotProps": { "description": "The props used for each slot inside." },
    "slots": { "description": "The components used for each slot inside." },
    "sx": {
      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
    },
    "value": {
      "description": "The value of the autocomplete.<br>The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the <code>isOptionEqualToValue</code> prop."
    }
  },
  "classDescriptions": {
    "clearIndicator": {
      "description": "Styles applied to {{nodeName}}.",
      "nodeName": "the clear indicator"
    },
    "endAdornment": {
      "description": "Styles applied to {{nodeName}}.",
      "nodeName": "the endAdornment element"
    },
    "expanded": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "the listbox is displayed"
    },
    "focused": {
      "description": "State class applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "focused"
    },
    "focusVisible": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the option elements",
      "conditions": "they are keyboard focused"
    },
    "fullWidth": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>fullWidth={true}</code>"
    },
    "groupLabel": {
      "description": "Styles applied to {{nodeName}}.",
      "nodeName": "the group&#39;s label elements"
    },
    "groupUl": {
      "description": "Styles applied to {{nodeName}}.",
      "nodeName": "the group&#39;s ul elements"
    },
    "hasClearIcon": { "description": "Styles applied when the clear icon is rendered." },
    "hasPopupIcon": { "description": "Styles applied when the popup icon is rendered." },
    "input": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the input element" },
    "inputFocused": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the input element",
      "conditions": "the input is focused"
    },
    "inputRoot": {
      "description": "Styles applied to {{nodeName}}.",
      "nodeName": "the Input element"
    },
    "loading": {
      "description": "Styles applied to {{nodeName}}.",
      "nodeName": "the loading wrapper"
    },
    "noOptions": {
      "description": "Styles applied to {{nodeName}}.",
      "nodeName": "the no option wrapper"
    },
    "option": {
      "description": "Styles applied to {{nodeName}}.",
      "nodeName": "the option elements"
    },
    "popperDisablePortal": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the popper element",
      "conditions": "<code>disablePortal={true}</code>"
    },
    "popupIndicator": {
      "description": "Styles applied to {{nodeName}}.",
      "nodeName": "the popup indicator"
    },
    "popupIndicatorOpen": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the popup indicator",
      "conditions": "the popup is open"
    },
    "root": { "description": "Styles applied to the root element." },
    "tag": {
      "description": "Styles applied to {{nodeName}}, {{conditions}}.",
      "nodeName": "the tag elements",
      "conditions": "for example the chips"
    },
    "tagSizeMedium": {
      "description": "Styles applied to {{nodeName}}, {{conditions}}.",
      "nodeName": "the tag elements",
      "conditions": "for example the chips if <code>size=\"medium\"</code>"
    },
    "tagSizeSmall": {
      "description": "Styles applied to {{nodeName}}, {{conditions}}.",
      "nodeName": "the tag elements",
      "conditions": "for example the chips if <code>size=\"small\"</code>"
    }
  },
  "slotDescriptions": {
    "listbox": "The component used to render the listbox.",
    "paper": "The component used to render the body of the popup.",
    "popper": "The component used to position the popup."
  }
}