react-test/docs/pages/joy-ui/api/autocomplete.json

{
  "props": {
    "options": { "type": { "name": "array" }, "required": true },
    "aria-describedby": { "type": { "name": "string" } },
    "aria-label": { "type": { "name": "string" } },
    "aria-labelledby": { "type": { "name": "string" } },
    "autoComplete": { "type": { "name": "bool" }, "default": "false" },
    "autoFocus": { "type": { "name": "bool" } },
    "autoHighlight": { "type": { "name": "bool" }, "default": "false" },
    "autoSelect": { "type": { "name": "bool" }, "default": "false" },
    "blurOnSelect": {
      "type": {
        "name": "union",
        "description": "'mouse'<br>&#124;&nbsp;'touch'<br>&#124;&nbsp;bool"
      },
      "default": "false"
    },
    "clearIcon": { "type": { "name": "node" }, "default": "<ClearIcon fontSize=\"md\" />" },
    "clearOnBlur": { "type": { "name": "bool" }, "default": "!props.freeSolo" },
    "clearOnEscape": { "type": { "name": "bool" }, "default": "false" },
    "clearText": { "type": { "name": "string" }, "default": "'Clear'" },
    "closeText": { "type": { "name": "string" }, "default": "'Close'" },
    "color": {
      "type": {
        "name": "enum",
        "description": "'danger'<br>&#124;&nbsp;'neutral'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'"
      },
      "default": "'neutral'",
      "additionalInfo": { "joy-color": true }
    },
    "defaultValue": {
      "type": { "name": "custom", "description": "any" },
      "default": "props.multiple ? [] : null"
    },
    "disableClearable": { "type": { "name": "bool" }, "default": "false" },
    "disableCloseOnSelect": { "type": { "name": "bool" }, "default": "false" },
    "disabled": { "type": { "name": "bool" }, "default": "false" },
    "disabledItemsFocusable": { "type": { "name": "bool" }, "default": "false" },
    "disableListWrap": { "type": { "name": "bool" }, "default": "false" },
    "endDecorator": { "type": { "name": "node" } },
    "error": { "type": { "name": "bool" }, "default": "false" },
    "filterOptions": {
      "type": { "name": "func" },
      "default": "createFilterOptions()",
      "signature": {
        "type": "function(options: Array<Value>, state: object) => Array<Value>",
        "describedArgs": ["options", "state"]
      }
    },
    "filterSelectedOptions": { "type": { "name": "bool" }, "default": "false" },
    "forcePopupIcon": {
      "type": { "name": "union", "description": "'auto'<br>&#124;&nbsp;bool" },
      "default": "'auto'"
    },
    "freeSolo": { "type": { "name": "bool" }, "default": "false" },
    "getLimitTagsText": {
      "type": { "name": "func" },
      "default": "(more: string | number) => `+${more}`",
      "signature": {
        "type": "function(more: string | number) => ReactNode",
        "describedArgs": ["more"]
      }
    },
    "getOptionDisabled": {
      "type": { "name": "func" },
      "signature": { "type": "function(option: Value) => boolean", "describedArgs": ["option"] }
    },
    "getOptionKey": {
      "type": { "name": "func" },
      "signature": {
        "type": "function(option: Value) => string | number",
        "describedArgs": ["option"]
      }
    },
    "getOptionLabel": {
      "type": { "name": "func" },
      "default": "(option) => option.label ?? option",
      "signature": { "type": "function(option: Value) => string", "describedArgs": [] }
    },
    "groupBy": {
      "type": { "name": "func" },
      "signature": { "type": "function(options: Value) => string", "describedArgs": ["options"] }
    },
    "handleHomeEndKeys": { "type": { "name": "bool" }, "default": "!props.freeSolo" },
    "id": { "type": { "name": "string" } },
    "includeInputInList": { "type": { "name": "bool" }, "default": "false" },
    "inputValue": { "type": { "name": "string" } },
    "isOptionEqualToValue": {
      "type": { "name": "func" },
      "signature": {
        "type": "function(option: Value, value: Value) => boolean",
        "describedArgs": ["option", "value"]
      }
    },
    "limitTags": { "type": { "name": "custom", "description": "integer" }, "default": "-1" },
    "loading": { "type": { "name": "bool" }, "default": "false" },
    "loadingText": { "type": { "name": "node" }, "default": "'Loading…'" },
    "multiple": { "type": { "name": "bool" }, "default": "false" },
    "name": { "type": { "name": "string" } },
    "noOptionsText": { "type": { "name": "node" }, "default": "'No options'" },
    "onChange": {
      "type": { "name": "func" },
      "signature": {
        "type": "function(event: React.SyntheticEvent, value: Value | Array<Value>, reason: string, details?: string) => void",
        "describedArgs": ["event", "value", "reason"]
      }
    },
    "onClose": {
      "type": { "name": "func" },
      "signature": {
        "type": "function(event: React.SyntheticEvent, reason: string) => void",
        "describedArgs": ["event", "reason"]
      }
    },
    "onHighlightChange": {
      "type": { "name": "func" },
      "signature": {
        "type": "function(event: React.SyntheticEvent, option: Value, reason: string) => void",
        "describedArgs": ["event", "option", "reason"]
      }
    },
    "onInputChange": {
      "type": { "name": "func" },
      "signature": {
        "type": "function(event: React.SyntheticEvent, value: string, reason: string) => void",
        "describedArgs": ["event", "value", "reason"]
      }
    },
    "onOpen": {
      "type": { "name": "func" },
      "signature": {
        "type": "function(event: React.SyntheticEvent) => void",
        "describedArgs": ["event"]
      }
    },
    "open": { "type": { "name": "bool" } },
    "openOnFocus": { "type": { "name": "bool" }, "default": "false" },
    "openText": { "type": { "name": "string" }, "default": "'Open'" },
    "placeholder": { "type": { "name": "string" } },
    "popupIcon": { "type": { "name": "node" }, "default": "<ArrowDropDownIcon />" },
    "readOnly": { "type": { "name": "bool" }, "default": "false" },
    "renderGroup": {
      "type": { "name": "func" },
      "signature": {
        "type": "function(params: AutocompleteRenderGroupParams) => ReactNode",
        "describedArgs": ["params"]
      }
    },
    "renderOption": {
      "type": { "name": "func" },
      "signature": {
        "type": "function(props: object, option: T, state: object) => ReactNode",
        "describedArgs": ["props", "option", "state"]
      }
    },
    "renderTags": {
      "type": { "name": "func" },
      "signature": {
        "type": "function(value: Array<T>, getTagProps: function, ownerState: object) => ReactNode",
        "describedArgs": ["value", "getTagProps", "ownerState"]
      }
    },
    "required": { "type": { "name": "bool" } },
    "selectOnFocus": { "type": { "name": "bool" }, "default": "!props.freeSolo" },
    "size": {
      "type": {
        "name": "union",
        "description": "'sm'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'lg'<br>&#124;&nbsp;string"
      },
      "default": "'md'",
      "additionalInfo": { "joy-size": true }
    },
    "slotProps": {
      "type": {
        "name": "shape",
        "description": "{ clearIndicator?: func<br>&#124;&nbsp;object, endDecorator?: func<br>&#124;&nbsp;object, input?: func<br>&#124;&nbsp;object, limitTag?: func<br>&#124;&nbsp;object, listbox?: func<br>&#124;&nbsp;object, loading?: func<br>&#124;&nbsp;object, noOptions?: func<br>&#124;&nbsp;object, option?: func<br>&#124;&nbsp;object, popupIndicator?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, startDecorator?: func<br>&#124;&nbsp;object, wrapper?: func<br>&#124;&nbsp;object }"
      },
      "default": "{}"
    },
    "slots": {
      "type": {
        "name": "shape",
        "description": "{ clearIndicator?: elementType, endDecorator?: elementType, input?: elementType, limitTag?: elementType, listbox?: elementType, loading?: elementType, noOptions?: elementType, option?: elementType, popupIndicator?: elementType, root?: elementType, startDecorator?: elementType, wrapper?: elementType }"
      },
      "default": "{}",
      "additionalInfo": { "slotsApi": true }
    },
    "startDecorator": { "type": { "name": "node" } },
    "sx": {
      "type": {
        "name": "union",
        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
      },
      "additionalInfo": { "sx": true }
    },
    "type": { "type": { "name": "string" } },
    "value": { "type": { "name": "custom", "description": "any" } },
    "variant": {
      "type": {
        "name": "enum",
        "description": "'outlined'<br>&#124;&nbsp;'plain'<br>&#124;&nbsp;'soft'<br>&#124;&nbsp;'solid'"
      },
      "default": "'outlined'",
      "additionalInfo": { "joy-variant": true }
    }
  },
  "name": "Autocomplete",
  "imports": [
    "import Autocomplete from '@mui/joy/Autocomplete';",
    "import { Autocomplete } from '@mui/joy';"
  ],
  "slots": [
    {
      "name": "root",
      "description": "The component that renders the root.",
      "default": "'div'",
      "class": "MuiAutocomplete-root"
    },
    {
      "name": "wrapper",
      "description": "The component that renders the wrapper.",
      "default": "'div'",
      "class": "MuiAutocomplete-wrapper"
    },
    {
      "name": "input",
      "description": "The component that renders the input.",
      "default": "'input'",
      "class": "MuiAutocomplete-input"
    },
    {
      "name": "startDecorator",
      "description": "The component that renders the start decorator.",
      "default": "'div'",
      "class": "MuiAutocomplete-startDecorator"
    },
    {
      "name": "endDecorator",
      "description": "The component that renders the end decorator.",
      "default": "'div'",
      "class": "MuiAutocomplete-endDecorator"
    },
    {
      "name": "clearIndicator",
      "description": "The component that renders the clear indicator.",
      "default": "'button'",
      "class": "MuiAutocomplete-clearIndicator"
    },
    {
      "name": "popupIndicator",
      "description": "The component that renders the popup indicator.",
      "default": "'button'",
      "class": "MuiAutocomplete-popupIndicator"
    },
    {
      "name": "listbox",
      "description": "The component that renders the listbox.",
      "default": "'ul'",
      "class": "MuiAutocomplete-listbox"
    },
    {
      "name": "option",
      "description": "The component that renders the option.",
      "default": "'li'",
      "class": "MuiAutocomplete-option"
    },
    {
      "name": "loading",
      "description": "The component that renders the loading.",
      "default": "'li'",
      "class": "MuiAutocomplete-loading"
    },
    {
      "name": "noOptions",
      "description": "The component that renders the no-options.",
      "default": "'li'",
      "class": "MuiAutocomplete-noOptions"
    },
    {
      "name": "limitTag",
      "description": "The component that renders the limit tag.",
      "default": "'div'",
      "class": "MuiAutocomplete-limitTag"
    }
  ],
  "classes": [
    {
      "key": "colorContext",
      "className": "MuiAutocomplete-colorContext",
      "description": "Class name applied to the root element when color inversion is triggered.",
      "isGlobal": false
    },
    {
      "key": "colorDanger",
      "className": "MuiAutocomplete-colorDanger",
      "description": "Class name applied to the root element if `color=\"danger\"`.",
      "isGlobal": false
    },
    {
      "key": "colorNeutral",
      "className": "MuiAutocomplete-colorNeutral",
      "description": "Class name applied to the root element if `color=\"neutral\"`.",
      "isGlobal": false
    },
    {
      "key": "colorPrimary",
      "className": "MuiAutocomplete-colorPrimary",
      "description": "Class name applied to the root element if `color=\"primary\"`.",
      "isGlobal": false
    },
    {
      "key": "colorSuccess",
      "className": "MuiAutocomplete-colorSuccess",
      "description": "Class name applied to the root element if `color=\"success\"`.",
      "isGlobal": false
    },
    {
      "key": "colorWarning",
      "className": "MuiAutocomplete-colorWarning",
      "description": "Class name applied to the root element if `color=\"warning\"`.",
      "isGlobal": false
    },
    {
      "key": "disabled",
      "className": "Mui-disabled",
      "description": "Class name applied to the root element if `disabled={true}`.",
      "isGlobal": true
    },
    {
      "key": "error",
      "className": "Mui-error",
      "description": "State class applied to the root element if `error={true}`.",
      "isGlobal": true
    },
    {
      "key": "focused",
      "className": "Mui-focused",
      "description": "Class name applied to the root element if the component is focused.",
      "isGlobal": true
    },
    {
      "key": "formControl",
      "className": "MuiAutocomplete-formControl",
      "description": "Class name applied to the root element if the component is a descendant of `FormControl`.",
      "isGlobal": false
    },
    {
      "key": "hasClearIcon",
      "className": "MuiAutocomplete-hasClearIcon",
      "description": "Class name applied when the clear icon is rendered.",
      "isGlobal": false
    },
    {
      "key": "hasPopupIcon",
      "className": "MuiAutocomplete-hasPopupIcon",
      "description": "Class name applied when the popup icon is rendered.",
      "isGlobal": false
    },
    {
      "key": "multiple",
      "className": "MuiAutocomplete-multiple",
      "description": "Class name applied to the wrapper element if `multiple={true}`.",
      "isGlobal": false
    },
    {
      "key": "popupIndicatorOpen",
      "className": "MuiAutocomplete-popupIndicatorOpen",
      "description": "Class name applied to the popup indicator if the popup is open.",
      "isGlobal": false
    },
    {
      "key": "sizeLg",
      "className": "MuiAutocomplete-sizeLg",
      "description": "Class name applied to the root element if `size=\"lg\"`.",
      "isGlobal": false
    },
    {
      "key": "sizeMd",
      "className": "MuiAutocomplete-sizeMd",
      "description": "Class name applied to the root element if `size=\"md\"`.",
      "isGlobal": false
    },
    {
      "key": "sizeSm",
      "className": "MuiAutocomplete-sizeSm",
      "description": "Class name applied to the root element if `size=\"sm\"`.",
      "isGlobal": false
    },
    {
      "key": "variantOutlined",
      "className": "MuiAutocomplete-variantOutlined",
      "description": "Class name applied to the root element if `variant=\"outlined\"`.",
      "isGlobal": false
    },
    {
      "key": "variantPlain",
      "className": "MuiAutocomplete-variantPlain",
      "description": "Class name applied to the root element if `variant=\"plain\"`.",
      "isGlobal": false
    },
    {
      "key": "variantSoft",
      "className": "MuiAutocomplete-variantSoft",
      "description": "Class name applied to the root element if `variant=\"soft\"`.",
      "isGlobal": false
    },
    {
      "key": "variantSolid",
      "className": "MuiAutocomplete-variantSolid",
      "description": "Class name applied to the root element if `variant=\"solid\"`.",
      "isGlobal": false
    }
  ],
  "spread": true,
  "themeDefaultProps": true,
  "muiName": "JoyAutocomplete",
  "forwardsRefTo": "HTMLDivElement",
  "filename": "/packages/mui-joy/src/Autocomplete/Autocomplete.tsx",
  "inheritance": null,
  "demos": "<ul><li><a href=\"/joy-ui/react-autocomplete/\">Autocomplete</a></li></ul>",
  "cssComponent": false
}