diff --git a/docs/data/material/components/autocomplete/CustomizedHook.js b/docs/data/material/components/autocomplete/CustomizedHook.js index 0a2b7281e5f2c6..9098d456b6a53f 100644 --- a/docs/data/material/components/autocomplete/CustomizedHook.js +++ b/docs/data/material/components/autocomplete/CustomizedHook.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { useAutocomplete } from '@mui/base/useAutocomplete'; +import useAutocomplete from '@mui/material/useAutocomplete'; import CheckIcon from '@mui/icons-material/Check'; import CloseIcon from '@mui/icons-material/Close'; import { styled } from '@mui/material/styles'; diff --git a/docs/data/material/components/autocomplete/CustomizedHook.tsx b/docs/data/material/components/autocomplete/CustomizedHook.tsx index 8def3c10cff7e3..68d68ce2e194d0 100644 --- a/docs/data/material/components/autocomplete/CustomizedHook.tsx +++ b/docs/data/material/components/autocomplete/CustomizedHook.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; -import { useAutocomplete, AutocompleteGetTagProps } from '@mui/base/useAutocomplete'; +import useAutocomplete, { + AutocompleteGetTagProps, +} from '@mui/material/useAutocomplete'; import CheckIcon from '@mui/icons-material/Check'; import CloseIcon from '@mui/icons-material/Close'; import { styled } from '@mui/material/styles'; @@ -188,7 +190,7 @@ export default function CustomizedHook() { {groupedOptions.length > 0 ? ( - {(groupedOptions as typeof top100Films).map((option, index) => { + {groupedOptions.map((option, index) => { const { key, ...optionProps } = getOptionProps({ option, index }); return (
  • diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.js b/docs/data/material/components/autocomplete/UseAutocomplete.js index 8ea6bf3811d61e..5fb7b6741eb5c6 100644 --- a/docs/data/material/components/autocomplete/UseAutocomplete.js +++ b/docs/data/material/components/autocomplete/UseAutocomplete.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useAutocomplete } from '@mui/base/useAutocomplete'; +import useAutocomplete from '@mui/material/useAutocomplete'; import { styled } from '@mui/system'; const Label = styled('label')({ diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.tsx b/docs/data/material/components/autocomplete/UseAutocomplete.tsx index 2e30c245fcf5a4..5fb7b6741eb5c6 100644 --- a/docs/data/material/components/autocomplete/UseAutocomplete.tsx +++ b/docs/data/material/components/autocomplete/UseAutocomplete.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useAutocomplete } from '@mui/base/useAutocomplete'; +import useAutocomplete from '@mui/material/useAutocomplete'; import { styled } from '@mui/system'; const Label = styled('label')({ @@ -63,7 +63,7 @@ export default function UseAutocomplete() { {groupedOptions.length > 0 ? ( - {(groupedOptions as typeof top100Films).map((option, index) => { + {groupedOptions.map((option, index) => { const { key, ...optionProps } = getOptionProps({ option, index }); return (
  • diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview b/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview index 10f7a19d40e215..6bd1f59e445bfe 100644 --- a/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview +++ b/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview @@ -4,7 +4,7 @@ {groupedOptions.length > 0 ? ( - {(groupedOptions as typeof top100Films).map((option, index) => { + {groupedOptions.map((option, index) => { const { key, ...optionProps } = getOptionProps({ option, index }); return (
  • diff --git a/docs/pages/material-ui/api/autocomplete.json b/docs/pages/material-ui/api/autocomplete.json index b61f4c3c93fdaa..42eade3f023ede 100644 --- a/docs/pages/material-ui/api/autocomplete.json +++ b/docs/pages/material-ui/api/autocomplete.json @@ -83,7 +83,7 @@ }, "groupBy": { "type": { "name": "func" }, - "signature": { "type": "function(options: Value) => string", "describedArgs": ["options"] } + "signature": { "type": "function(option: Value) => string", "describedArgs": ["option"] } }, "handleHomeEndKeys": { "type": { "name": "bool" }, "default": "!props.freeSolo" }, "id": { "type": { "name": "string" } }, diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/docs/translations/api-docs/autocomplete/autocomplete.json index c0c042dd0da31b..2655bbc7d39a99 100644 --- a/docs/translations/api-docs/autocomplete/autocomplete.json +++ b/docs/translations/api-docs/autocomplete/autocomplete.json @@ -82,7 +82,7 @@ }, "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 renderGroup is not provided.", - "typeDescriptions": { "options": "The options to group." } + "typeDescriptions": { "option": "The Autocomplete option." } }, "handleHomeEndKeys": { "description": "If true, the component handles the "Home" and "End" keys when the popup is open. It should move focus to the first option and last option, respectively." diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index 4cbff62de4ac46..d144af535c10c2 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -994,7 +994,7 @@ Autocomplete.propTypes /* remove-proptypes */ = { * If provided, the options will be grouped under the returned string. * The groupBy value is also used as the text for group headings when `renderGroup` is not provided. * - * @param {Value} options The options to group. + * @param {Value} option The Autocomplete option. * @returns {string} */ groupBy: PropTypes.func, diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts b/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts index b74e6646430106..850bb0f82078a8 100644 --- a/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts +++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { PartiallyRequired } from '@mui/types'; export interface CreateFilterOptionsConfig { ignoreAccents?: boolean; @@ -178,7 +179,7 @@ export interface UseAutocompleteProps< * If provided, the options will be grouped under the returned string. * The groupBy value is also used as the text for group headings when `renderGroup` is not provided. * - * @param {Value} options The options to group. + * @param {Value} option The Autocomplete option. * @returns {string} */ groupBy?: (option: Value) => string; @@ -359,8 +360,19 @@ export function useAutocomplete< DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, >( - props: UseAutocompleteProps, -): UseAutocompleteReturnValue; + props: PartiallyRequired< + UseAutocompleteProps, + 'groupBy' + >, +): UseAutocompleteReturnValue; +export function useAutocomplete< + Value, + Multiple extends boolean | undefined = false, + DisableClearable extends boolean | undefined = false, + FreeSolo extends boolean | undefined = false, +>( + props: Omit, 'groupBy'>, +): UseAutocompleteReturnValue; export interface UseAutocompleteRenderedOption { option: Value; @@ -372,6 +384,7 @@ export interface UseAutocompleteReturnValue< Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, + HasGroupBy extends boolean = false, > { /** * Resolver for the root slot's props. @@ -460,9 +473,11 @@ export interface UseAutocompleteReturnValue< */ focusedTag: number; /** - * The options to render. It's either `Value[]` or `AutocompleteGroupedOption[]` if the groupBy prop is provided. + * The options to render. + * - If `groupBy` is provided, the options are grouped and represented as `AutocompleteGroupedOption[]`. + * - Otherwise, the options are represented as a flat array of `Value[]`. */ - groupedOptions: Value[] | Array>; + groupedOptions: HasGroupBy extends true ? AutocompleteGroupedOption[] : Value[]; } export default useAutocomplete; diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.spec.ts b/packages/mui-material/src/useAutocomplete/useAutocomplete.spec.ts index 2d65f0f4d5a9e6..096fd4328bcabc 100644 --- a/packages/mui-material/src/useAutocomplete/useAutocomplete.spec.ts +++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.spec.ts @@ -1,5 +1,9 @@ import { expectType } from '@mui/types'; -import { useAutocomplete, FilterOptionsState } from '@mui/material/useAutocomplete'; +import { + useAutocomplete, + FilterOptionsState, + AutocompleteGroupedOption, +} from '@mui/material/useAutocomplete'; interface Person { id: string; @@ -181,4 +185,17 @@ function Component() { }, freeSolo: true, }); + + const ungroupedAutocomplete = useAutocomplete({ options: persons }); + expectType( + ungroupedAutocomplete.groupedOptions, + ); + + const groupedAutocomplete = useAutocomplete({ + options: persons, + groupBy: ({ id }) => id, + }); + expectType[], typeof groupedAutocomplete.groupedOptions>( + groupedAutocomplete.groupedOptions, + ); }