[docs][autocomplete] Fix console in unstyled demo (#46804)

Signed-off-by: Olivier Tassinari <oliviertassinari@users.noreply.github.com>
Co-authored-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>

Author: oliviertassinari

docs/data/material/components/autocomplete/CustomizedHook.js

@@ -64,7 +64,7 @@ const InputWrapper = styled('div')(({ theme }) => ({
   },
 }));
 
-function Tag(props) {
+function Item(props) {
   const { label, onDelete, ...other } = props;
   return (
     <div {...other}>
@@ -74,12 +74,12 @@ function Tag(props) {
   );
 }
 
-Tag.propTypes = {
+Item.propTypes = {
   label: PropTypes.string.isRequired,
   onDelete: PropTypes.func.isRequired,
 };
 
-const StyledTag = styled(Tag)(({ theme }) => ({
+const StyledItem = styled(Item)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   height: '24px',
@@ -163,24 +163,21 @@ const Listbox = styled('ul')(({ theme }) => ({
   },
 }));
 
-export default function CustomizedHook() {
+function CustomAutocomplete(props) {
   const {
     getRootProps,
     getInputLabelProps,
     getInputProps,
-    getTagProps,
+    getItemProps,
     getListboxProps,
     getOptionProps,
     groupedOptions,
     value,
     focused,
     setAnchorEl,
   } = useAutocomplete({
-    id: 'customized-hook-demo',
-    defaultValue: [top100Films[1]],
     multiple: true,
-    options: top100Films,
-    getOptionLabel: (option) => option.title,
+    ...props,
   });
 
   return (
@@ -189,8 +186,14 @@ export default function CustomizedHook() {
         <Label {...getInputLabelProps()}>Customized hook</Label>
         <InputWrapper ref={setAnchorEl} className={focused ? 'focused' : ''}>
           {value.map((option, index) => {
-            const { key, ...tagProps } = getTagProps({ index });
-            return <StyledTag key={key} {...tagProps} label={option.title} />;
+            const { key, ...itemProps } = getItemProps({ index });
+            return (
+              <StyledItem
+                key={key}
+                {...itemProps}
+                label={props.getOptionLabel(option)}
+              />
+            );
           })}
           <input {...getInputProps()} />
         </InputWrapper>
@@ -201,7 +204,7 @@ export default function CustomizedHook() {
             const { key, ...optionProps } = getOptionProps({ option, index });
             return (
               <li key={key} {...optionProps}>
-                <span>{option.title}</span>
+                <span>{props.getOptionLabel(option)}</span>
                 <CheckIcon fontSize="small" />
               </li>
             );
@@ -212,6 +215,31 @@ export default function CustomizedHook() {
   );
 }
 
+CustomAutocomplete.propTypes = {
+  /**
+   * Used to determine the string value for a given option.
+   * It's used to fill the input (and the list box options if `renderOption` is not provided).
+   *
+   * If used in free solo mode, it must accept both the type of the options and a string.
+   *
+   * @param {Value} option
+   * @returns {string}
+   * @default (option) => option.label ?? option
+   */
+  getOptionLabel: PropTypes.func,
+};
+
+export default function CustomizedHook() {
+  return (
+    <CustomAutocomplete
+      id="customized-hook-demo"
+      defaultValue={[top100Films[1]]}
+      options={top100Films}
+      getOptionLabel={(option) => option.title}
+    />
+  );
+}
+
 // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
 const top100Films = [
   { title: 'The Shawshank Redemption', year: 1994 },

docs/data/material/components/autocomplete/CustomizedHook.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import useAutocomplete, {
-  AutocompleteGetTagProps,
+  AutocompleteGetItemProps,
+  UseAutocompleteProps,
 } from '@mui/material/useAutocomplete';
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
@@ -65,11 +66,11 @@ const InputWrapper = styled('div')(({ theme }) => ({
   },
 }));
 
-interface TagProps extends ReturnType<AutocompleteGetTagProps> {
+interface ItemProps extends ReturnType<AutocompleteGetItemProps<true>> {
   label: string;
 }
 
-function Tag(props: TagProps) {
+function Item(props: ItemProps) {
   const { label, onDelete, ...other } = props;
   return (
     <div {...other}>
@@ -79,7 +80,7 @@ function Tag(props: TagProps) {
   );
 }
 
-const StyledTag = styled(Tag)<TagProps>(({ theme }) => ({
+const StyledItem = styled(Item)<ItemProps>(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   height: '24px',
@@ -163,34 +164,39 @@ const Listbox = styled('ul')(({ theme }) => ({
   },
 }));
 
-export default function CustomizedHook() {
+function CustomAutocomplete<Value>(
+  props: UseAutocompleteProps<Value, true, false, false>,
+) {
   const {
     getRootProps,
     getInputLabelProps,
     getInputProps,
-    getTagProps,
+    getItemProps,
     getListboxProps,
     getOptionProps,
     groupedOptions,
     value,
     focused,
     setAnchorEl,
   } = useAutocomplete({
-    id: 'customized-hook-demo',
-    defaultValue: [top100Films[1]],
     multiple: true,
-    options: top100Films,
-    getOptionLabel: (option) => option.title,
+    ...props,
   });
 
   return (
     <Root>
       <div {...getRootProps()}>
         <Label {...getInputLabelProps()}>Customized hook</Label>
         <InputWrapper ref={setAnchorEl} className={focused ? 'focused' : ''}>
-          {value.map((option: FilmOptionType, index: number) => {
-            const { key, ...tagProps } = getTagProps({ index });
-            return <StyledTag key={key} {...tagProps} label={option.title} />;
+          {value.map((option, index) => {
+            const { key, ...itemProps } = getItemProps({ index });
+            return (
+              <StyledItem
+                key={key}
+                {...itemProps}
+                label={props.getOptionLabel!(option)}
+              />
+            );
           })}
           <input {...getInputProps()} />
         </InputWrapper>
@@ -201,7 +207,7 @@ export default function CustomizedHook() {
             const { key, ...optionProps } = getOptionProps({ option, index });
             return (
               <li key={key} {...optionProps}>
-                <span>{option.title}</span>
+                <span>{props.getOptionLabel!(option)}</span>
                 <CheckIcon fontSize="small" />
               </li>
             );
@@ -212,6 +218,17 @@ export default function CustomizedHook() {
   );
 }
 
+export default function CustomizedHook() {
+  return (
+    <CustomAutocomplete<FilmOptionType>
+      id="customized-hook-demo"
+      defaultValue={[top100Films[1]]}
+      options={top100Films}
+      getOptionLabel={(option) => option.title}
+    />
+  );
+}
+
 interface FilmOptionType {
   title: string;
   year: number;

docs/data/material/components/autocomplete/CustomizedHook.tsx.preview

@@ -0,0 +1,6 @@
+<CustomAutocomplete<FilmOptionType>
+  id="customized-hook-demo"
+  defaultValue={[top100Films[1]]}
+  options={top100Films}
+  getOptionLabel={(option) => option.title}
+/>

docs/data/material/components/autocomplete/autocomplete.md

@@ -181,7 +181,7 @@ import useAutocomplete from '@mui/material/useAutocomplete';
 
 ### Customized hook
 
-{{"demo": "CustomizedHook.js"}}
+{{"demo": "CustomizedHook.js", "defaultCodeOpen": false}}
 
 Head to the [customization](#customization) section for an example with the `Autocomplete` component instead of the hook.