Various fixes

mui · Jul 31, 2023 · 9084aa8 · 9084aa8
1 parent 8a49ab9
commit 9084aa8
Show file tree

Hide file tree

Showing 21 changed files with 113 additions and 81 deletions.
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js
@@ -60,9 +60,9 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(props, r
             },
             input: {
               className: 'Autocomplete__input',
+              ...getInputProps(),
             },
           }}
-          {...getInputProps()}
         />
         {hasClearIcon && (
           <Button
@@ -273,7 +273,7 @@ function Styles() {
         box-sizing: border-box;
         padding: 6px;
         margin: 12px 0;
-        max-width: 320px;
+        width: 100%;
         border-radius: 12px;
         overflow: auto;
         outline: 0px;
@@ -321,6 +321,12 @@ function Styles() {
           color: ${isDarkMode ? cyan[100] : cyan[900]};
         }
       }
+
+      .Autocomplete__no-options {
+        list-style: none;
+        padding: 8px;
+        cursor: default;
+      }
       `}
     </style>
   );

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx
@@ -62,9 +62,9 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(
             },
             input: {
               className: 'Autocomplete__input',
+              ...getInputProps(),
             },
           }}
-          {...getInputProps()}
         />
         {hasClearIcon && (
           <Button
@@ -247,7 +247,7 @@ function Styles() {
         box-sizing: border-box;
         padding: 6px;
         margin: 12px 0;
-        max-width: 320px;
+        width: 100%;
         border-radius: 12px;
         overflow: auto;
         outline: 0px;
@@ -295,6 +295,12 @@ function Styles() {
           color: ${isDarkMode ? cyan[100] : cyan[900]};
         }
       }
+
+      .Autocomplete__no-options {
+        list-style: none;
+        padding: 8px;
+        cursor: default;
+      }
       `}
     </style>
   );

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js
@@ -31,6 +31,7 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(props, r
     focused,
     anchorEl,
     setAnchorEl,
+    groupedOptions,
   } = useAutocomplete({
     ...props,
     componentName: 'BaseAutocompleteIntroduction',
@@ -97,7 +98,7 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(props, r
             {...getListboxProps()}
             className="text-sm box-border p-1.5 my-3 mx-0 min-w-[320px] rounded-xl overflow-auto outline-0 max-h-[300px] z-[1] bg-white dark:bg-gray-800 border border-solid border-gray-200 dark:border-gray-900 text-gray-900 dark:text-gray-200 shadow-[0_4px_30px_transparent] shadow-gray-200 dark:shadow-gray-900"
           >
-            {options.map((option, index) => {
+            {groupedOptions.map((option, index) => {
               const optionProps = getOptionProps({ option, index });
 
               return (
@@ -110,7 +111,7 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(props, r
               );
             })}
 
-            {options.length === 0 && (
+            {groupedOptions.length === 0 && (
               <li className="list-none p-2 cursor-default">No results</li>
             )}
           </ul>

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx
@@ -33,6 +33,7 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(
     focused,
     anchorEl,
     setAnchorEl,
+    groupedOptions,
   } = useAutocomplete({
     ...props,
     componentName: 'BaseAutocompleteIntroduction',
@@ -98,7 +99,7 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(
             {...getListboxProps()}
             className="text-sm box-border p-1.5 my-3 mx-0 min-w-[320px] rounded-xl overflow-auto outline-0 max-h-[300px] z-[1] bg-white dark:bg-gray-800 border border-solid border-gray-200 dark:border-gray-900 text-gray-900 dark:text-gray-200 shadow-[0_4px_30px_transparent] shadow-gray-200 dark:shadow-gray-900"
           >
-            {(options as typeof top100Films).map((option, index) => {
+            {(groupedOptions as typeof top100Films).map((option, index) => {
               const optionProps = getOptionProps({ option, index });
 
               return (
@@ -111,7 +112,7 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(
               );
             })}
 
-            {options.length === 0 && (
+            {groupedOptions.length === 0 && (
               <li className="list-none p-2 cursor-default">No results</li>
             )}
           </ul>

diff --git a/docs/data/base/components/autocomplete/ControlledStates/css/index.js b/docs/data/base/components/autocomplete/ControlledStates/css/index.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import useAutocomplete from '@mui/base/useAutocomplete';
 import { useTheme } from '@mui/system';
+import clsx from 'clsx';
 
 const options = ['Firefox', 'Google Chrome', 'Microsoft Edge', 'Safari', 'Opera'];
 
@@ -14,6 +15,7 @@ export default function ControlledStates() {
     getListboxProps,
     getOptionProps,
     groupedOptions,
+    focused,
   } = useAutocomplete({
     id: 'controlled-state-demo',
     options,
@@ -32,7 +34,7 @@ export default function ControlledStates() {
         inputValue: <code>{inputValue ?? ' '}</code>
       </pre>
       <div className="ControlledStates">
-        <div {...getRootProps()} className="root">
+        <div {...getRootProps()} className={clsx('root', focused && 'focused')}>
           <input {...getInputProps()} className="input" />
         </div>
         {groupedOptions.length > 0 && (

diff --git a/docs/data/base/components/autocomplete/ControlledStates/css/index.tsx b/docs/data/base/components/autocomplete/ControlledStates/css/index.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import useAutocomplete from '@mui/base/useAutocomplete';
 import { useTheme } from '@mui/system';
+import clsx from 'clsx';
 
 const options = ['Firefox', 'Google Chrome', 'Microsoft Edge', 'Safari', 'Opera'];
 
@@ -14,6 +15,7 @@ export default function ControlledStates() {
     getListboxProps,
     getOptionProps,
     groupedOptions,
+    focused,
   } = useAutocomplete({
     id: 'controlled-state-demo',
     options,
@@ -32,7 +34,7 @@ export default function ControlledStates() {
         inputValue: <code>{inputValue ?? ' '}</code>
       </pre>
       <div className="ControlledStates">
-        <div {...getRootProps()} className="root">
+        <div {...getRootProps()} className={clsx('root', focused && 'focused')}>
           <input {...getInputProps()} className="input" />
         </div>
         {groupedOptions.length > 0 && (

diff --git a/docs/data/base/components/autocomplete/ControlledStates/system/index.js b/docs/data/base/components/autocomplete/ControlledStates/system/index.js
@@ -14,6 +14,7 @@ export default function ControlledStates() {
     getListboxProps,
     getOptionProps,
     groupedOptions,
+    focused,
   } = useAutocomplete({
     id: 'controlled-state-demo',
     options,
@@ -32,7 +33,7 @@ export default function ControlledStates() {
         inputValue: <code>{inputValue ?? ' '}</code>
       </Pre>
       <StyledAutocomplete>
-        <StyledInputRoot {...getRootProps()}>
+        <StyledInputRoot {...getRootProps()} className={focused ? 'focused' : ''}>
           <StyledInput {...getInputProps()} />
         </StyledInputRoot>
         {groupedOptions.length > 0 && (

diff --git a/docs/data/base/components/autocomplete/ControlledStates/system/index.tsx b/docs/data/base/components/autocomplete/ControlledStates/system/index.tsx
@@ -14,6 +14,7 @@ export default function ControlledStates() {
     getListboxProps,
     getOptionProps,
     groupedOptions,
+    focused,
   } = useAutocomplete({
     id: 'controlled-state-demo',
     options,
@@ -32,7 +33,7 @@ export default function ControlledStates() {
         inputValue: <code>{inputValue ?? ' '}</code>
       </Pre>
       <StyledAutocomplete>
-        <StyledInputRoot {...getRootProps()}>
+        <StyledInputRoot {...getRootProps()} className={focused ? 'focused' : ''}>
           <StyledInput {...getInputProps()} />
         </StyledInputRoot>
         {groupedOptions.length > 0 && (

diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/css/index.js b/docs/data/base/components/autocomplete/UseAutocomplete/css/index.js
@@ -30,7 +30,7 @@ export default function UseAutocomplete() {
           htmlFor="use-autocomplete-demo"
           className="label"
         >
-          Pick a movie:
+          Pick a movie
         </label>
         <div {...getRootProps()} className={clsx('root', focused && 'focused')}>
           <input {...getInputProps()} className="input" />
@@ -148,7 +148,7 @@ function Styles() {
         box-sizing: border-box;
         padding: 6px;
         margin: 12px 0;
-        max-width: 320px;
+        width: 320px;
         border-radius: 12px;
         overflow: auto;
         outline: 0px;

diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/css/index.tsx b/docs/data/base/components/autocomplete/UseAutocomplete/css/index.tsx
@@ -32,7 +32,7 @@ export default function UseAutocomplete() {
           htmlFor="use-autocomplete-demo"
           className="label"
         >
-          Pick a movie:
+          Pick a movie
         </label>
         <div {...getRootProps()} className={clsx('root', focused && 'focused')}>
           <input {...getInputProps()} className="input" />
@@ -150,7 +150,7 @@ function Styles() {
         box-sizing: border-box;
         padding: 6px;
         margin: 12px 0;
-        max-width: 320px;
+        width: 320px;
         border-radius: 12px;
         overflow: auto;
         outline: 0px;

diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/system/index.js b/docs/data/base/components/autocomplete/UseAutocomplete/system/index.js
@@ -23,7 +23,7 @@ export default function UseAutocomplete() {
 
   return (
     <div style={{ marginBottom: 24 }}>
-      <Label {...getInputLabelProps()}>Label</Label>
+      <StyledLabel {...getInputLabelProps()}>Pick a movie</StyledLabel>
       <StyledAutocompleteRoot
         {...getRootProps()}
         className={focused ? 'focused' : ''}
@@ -65,7 +65,7 @@ const grey = {
   900: '#24292f',
 };
 
-const Label = styled('label')`
+const StyledLabel = styled('label')`
   display: block;
   font-family: sans-serif;
   font-size: 14px;
@@ -126,7 +126,7 @@ const StyledListbox = styled('ul')(
   box-sizing: border-box;
   padding: 6px;
   margin: 12px 0;
-  max-width: 320px;
+  width: 320px;
   border-radius: 12px;
   overflow: auto;
   outline: 0px;

diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx b/docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx
@@ -25,7 +25,7 @@ export default function UseAutocomplete() {
 
   return (
     <div style={{ marginBottom: 24 }}>
-      <Label {...getInputLabelProps()}>Label</Label>
+      <StyledLabel {...getInputLabelProps()}>Pick a movie</StyledLabel>
       <StyledAutocompleteRoot
         {...getRootProps()}
         className={focused ? 'focused' : ''}
@@ -67,7 +67,7 @@ const grey = {
   900: '#24292f',
 };
 
-const Label = styled('label')`
+const StyledLabel = styled('label')`
   display: block;
   font-family: sans-serif;
   font-size: 14px;
@@ -128,7 +128,7 @@ const StyledListbox = styled('ul')(
   box-sizing: border-box;
   padding: 6px;
   margin: 12px 0;
-  max-width: 320px;
+  width: 320px;
   border-radius: 12px;
   overflow: auto;
   outline: 0px;

diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx.preview b/docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx.preview
@@ -1,4 +1,4 @@
-<Label {...getInputLabelProps()}>Label</Label>
+<StyledLabel {...getInputLabelProps()}>Pick a movie</StyledLabel>
 <StyledAutocompleteRoot
   {...getRootProps()}
   className={focused ? 'focused' : ''}

diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.js b/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.js
@@ -29,7 +29,7 @@ export default function UseAutocomplete() {
         htmlFor="use-autocomplete-demo"
         className="block text-sm font-medium mb-1"
       >
-        Pick a movie:
+        Pick a movie
       </label>
       <div className="relative w-80">
         <div

diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.tsx b/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function UseAutocomplete() {
         htmlFor="use-autocomplete-demo"
         className="block text-sm font-medium mb-1"
       >
-        Pick a movie:
+        Pick a movie
       </label>
       <div className="relative w-80">
         <div

diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper/css/index.js b/docs/data/base/components/autocomplete/UseAutocompletePopper/css/index.js
@@ -37,20 +37,20 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(props, r
             root: { className: 'UseAutocompletePopper__popper' },
           }}
         >
-          {groupedOptions.length > 0 ? (
-            <ul {...getListboxProps()} className="UseAutocompletePopper__listbox">
-              {groupedOptions.map((option, index) => (
+          <ul {...getListboxProps()} className="UseAutocompletePopper__listbox">
+            {groupedOptions.length > 0 ? (
+              groupedOptions.map((option, index) => (
                 <li
                   {...getOptionProps({ option, index })}
                   className="UseAutocompletePopper__option"
                 >
                   {option.label}
                 </li>
-              ))}
-            </ul>
-          ) : (
-            <li className="UseAutocompletePopper__no-options">No results</li>
-          )}
+              ))
+            ) : (
+              <li className="UseAutocompletePopper__no-options">No results</li>
+            )}
+          </ul>
         </Popper>
       )}
 
@@ -166,7 +166,7 @@ function Styles() {
         box-sizing: border-box;
         padding: 6px;
         margin: 12px 0;
-        max-width: 320px;
+        width: 100%;
         border-radius: 12px;
         overflow: auto;
         outline: 0px;
@@ -214,6 +214,12 @@ function Styles() {
           color: ${isDarkMode ? cyan[100] : cyan[900]};
         }
       }
+
+      .UseAutocompletePopper__no-options {
+        list-style: none;
+        padding: 8px;
+        cursor: default;
+      }
       `}
     </style>
   );