Merge remote-tracking branch 'upstream/master' into box-typemap

mui · Jul 27, 2023 · 878f68a · 878f68a
2 parents 80af6e2 + bca4565
commit 878f68a
Show file tree

Hide file tree

Showing 144 changed files with 4,536 additions and 808 deletions.
diff --git a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js b/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js
@@ -26,7 +26,7 @@ const customTheme = (outerTheme) =>
               component="li"
               {...props}
             >
-              {ownerState.getOptionLabel?.(option)}
+              {ownerState.getOptionLabel(option)}
             </Box>
           ),
         },

diff --git a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx b/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx
@@ -26,7 +26,7 @@ const customTheme = (outerTheme: Theme) =>
               component="li"
               {...props}
             >
-              {ownerState.getOptionLabel?.(option)}
+              {ownerState.getOptionLabel(option)}
             </Box>
           ),
         },

diff --git a/docs/data/material/components/badges/BadgeMaterialYouPlayground.js b/docs/data/material/components/badges/BadgeMaterialYouPlayground.js
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import MaterialYouUsageDemo from 'docs/src/modules/components/MaterialYouUsageDemo';
+import Badge from '@mui/material-next/Badge';
+import MailIcon from '@mui/icons-material/Mail';
+
+export default function BadgeMaterialYouPlayground() {
+  return (
+    <MaterialYouUsageDemo
+      componentName="Badge"
+      data={[
+        {
+          propName: 'badgeContent',
+          defaultValue: 4,
+        },
+        {
+          propName: 'color',
+          knob: 'select',
+          options: [
+            'error',
+            'info',
+            'warning',
+            'success',
+            'primary',
+            'secondary',
+            'tertiary',
+          ],
+          defaultValue: 'error',
+        },
+        {
+          propName: 'size',
+          knob: 'select',
+          options: ['small', 'large'],
+          defaultValue: 'large',
+        },
+        {
+          propName: 'invisible',
+          knob: 'switch',
+          defaultValue: false,
+        },
+      ]}
+      renderDemo={({ vertical, ...rest }) => (
+        <Badge {...rest}>
+          <MailIcon color="action" />
+        </Badge>
+      )}
+    />
+  );
+}
diff --git a/docs/data/material/components/badges/badges.md b/docs/data/material/components/badges/badges.md
@@ -71,3 +71,16 @@ You can't rely on the content of the badge to be announced correctly.
 You should provide a full description, for instance, with `aria-label`:
 
 {{"demo": "AccessibleBadges.js"}}
+
+## Experimental API
+
+### Material You version
+
+The default Badge component follows the Material Design 2 specs.
+For the Material Design 3 ([Material You](https://m3.material.io/)) version, you can use the new experimental `@mui/material-next` package:
+
+```js
+import Badge from '@mui/material-next/Badge';
+```
+
+{{"demo": "BadgeMaterialYouPlayground.js", "hideToolbar": true}}
diff --git a/docs/package.json b/docs/package.json
@@ -44,11 +44,12 @@
     "@mui/styles": "^5.14.1",
     "@mui/system": "^5.14.1",
     "@mui/types": "^7.2.4",
-    "@mui/x-data-grid": "6.10.0",
+    "@mui/x-data-grid": "6.10.1",
     "@mui/x-data-grid-generator": "6.10.0",
-    "@mui/x-data-grid-pro": "6.10.0",
-    "@mui/x-date-pickers": "6.10.0",
-    "@mui/x-date-pickers-pro": "6.10.0",
+    "@mui/x-data-grid-premium": "6.10.1",
+    "@mui/x-data-grid-pro": "6.10.1",
+    "@mui/x-date-pickers": "6.10.1",
+    "@mui/x-date-pickers-pro": "6.10.1",
     "@mui/x-license-pro": "6.10.0",
     "@react-spring/web": "^9.7.3",
     "@trendmicro/react-interpolate": "^0.5.5",

diff --git a/docs/pages/base-ui/api/use-autocomplete.json b/docs/pages/base-ui/api/use-autocomplete.json
@@ -1,7 +1,7 @@
 {
   "parameters": {
     "options": {
-      "type": { "name": "ReadonlyArray&lt;T&gt;", "description": "ReadonlyArray&lt;T&gt;" },
+      "type": { "name": "ReadonlyArray&lt;Value&gt;", "description": "ReadonlyArray&lt;Value&gt;" },
       "required": true
     },
     "autoComplete": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
@@ -28,8 +28,8 @@
     "componentName": { "type": { "name": "string", "description": "string" } },
     "defaultValue": {
       "type": {
-        "name": "AutocompleteValue&lt;T, Multiple, DisableClearable, FreeSolo&gt;",
-        "description": "AutocompleteValue&lt;T, Multiple, DisableClearable, FreeSolo&gt;"
+        "name": "AutocompleteValue&lt;Value, Multiple, DisableClearable, FreeSolo&gt;",
+        "description": "AutocompleteValue&lt;Value, Multiple, DisableClearable, FreeSolo&gt;"
       },
       "default": "props.multiple ? [] : null"
     },
@@ -52,8 +52,8 @@
     },
     "filterOptions": {
       "type": {
-        "name": "(options: T[], state: FilterOptionsState&lt;T&gt;) =&gt; T[]",
-        "description": "(options: T[], state: FilterOptionsState&lt;T&gt;) =&gt; T[]"
+        "name": "(options: Value[], state: FilterOptionsState&lt;Value&gt;) =&gt; Value[]",
+        "description": "(options: Value[], state: FilterOptionsState&lt;Value&gt;) =&gt; Value[]"
       },
       "default": "createFilterOptions()"
     },
@@ -63,17 +63,23 @@
     },
     "freeSolo": { "type": { "name": "FreeSolo", "description": "FreeSolo" }, "default": "false" },
     "getOptionDisabled": {
-      "type": { "name": "(option: T) =&gt; boolean", "description": "(option: T) =&gt; boolean" }
+      "type": {
+        "name": "(option: Value) =&gt; boolean",
+        "description": "(option: Value) =&gt; boolean"
+      }
     },
     "getOptionLabel": {
       "type": {
-        "name": "(option: T | AutocompleteFreeSoloValueMapping&lt;FreeSolo&gt;) =&gt; string",
-        "description": "(option: T | AutocompleteFreeSoloValueMapping&lt;FreeSolo&gt;) =&gt; string"
+        "name": "(option: Value | AutocompleteFreeSoloValueMapping&lt;FreeSolo&gt;) =&gt; string",
+        "description": "(option: Value | AutocompleteFreeSoloValueMapping&lt;FreeSolo&gt;) =&gt; string"
       },
       "default": "(option) => option.label ?? option"
     },
     "groupBy": {
-      "type": { "name": "(option: T) =&gt; string", "description": "(option: T) =&gt; string" }
+      "type": {
+        "name": "(option: Value) =&gt; string",
+        "description": "(option: Value) =&gt; string"
+      }
     },
     "handleHomeEndKeys": {
       "type": { "name": "boolean", "description": "boolean" },
@@ -87,15 +93,15 @@
     "inputValue": { "type": { "name": "string", "description": "string" } },
     "isOptionEqualToValue": {
       "type": {
-        "name": "(option: T, value: T) =&gt; boolean",
-        "description": "(option: T, value: T) =&gt; boolean"
+        "name": "(option: Value, value: Value) =&gt; boolean",
+        "description": "(option: Value, value: Value) =&gt; boolean"
       }
     },
     "multiple": { "type": { "name": "Multiple", "description": "Multiple" }, "default": "false" },
     "onChange": {
       "type": {
-        "name": "(event: React.SyntheticEvent, value: AutocompleteValue&lt;T, Multiple, DisableClearable, FreeSolo&gt;, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails&lt;T&gt;) =&gt; void",
-        "description": "(event: React.SyntheticEvent, value: AutocompleteValue&lt;T, Multiple, DisableClearable, FreeSolo&gt;, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails&lt;T&gt;) =&gt; void"
+        "name": "(event: React.SyntheticEvent, value: AutocompleteValue&lt;Value, Multiple, DisableClearable, FreeSolo&gt;, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails&lt;Value&gt;) =&gt; void",
+        "description": "(event: React.SyntheticEvent, value: AutocompleteValue&lt;Value, Multiple, DisableClearable, FreeSolo&gt;, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails&lt;Value&gt;) =&gt; void"
       }
     },
     "onClose": {
@@ -106,8 +112,8 @@
     },
     "onHighlightChange": {
       "type": {
-        "name": "(event: React.SyntheticEvent, option: T | null, reason: AutocompleteHighlightChangeReason) =&gt; void",
-        "description": "(event: React.SyntheticEvent, option: T | null, reason: AutocompleteHighlightChangeReason) =&gt; void"
+        "name": "(event: React.SyntheticEvent, option: Value | null, reason: AutocompleteHighlightChangeReason) =&gt; void",
+        "description": "(event: React.SyntheticEvent, option: Value | null, reason: AutocompleteHighlightChangeReason) =&gt; void"
       }
     },
     "onInputChange": {
@@ -141,8 +147,8 @@
     },
     "value": {
       "type": {
-        "name": "AutocompleteValue&lt;T, Multiple, DisableClearable, FreeSolo&gt;",
-        "description": "AutocompleteValue&lt;T, Multiple, DisableClearable, FreeSolo&gt;"
+        "name": "AutocompleteValue&lt;Value, Multiple, DisableClearable, FreeSolo&gt;",
+        "description": "AutocompleteValue&lt;Value, Multiple, DisableClearable, FreeSolo&gt;"
       }
     }
   },
@@ -185,8 +191,8 @@
     },
     "getOptionProps": {
       "type": {
-        "name": "(renderedOption: UseAutocompleteRenderedOption&lt;T&gt;) =&gt; React.HTMLAttributes&lt;HTMLLIElement&gt;",
-        "description": "(renderedOption: UseAutocompleteRenderedOption&lt;T&gt;) =&gt; React.HTMLAttributes&lt;HTMLLIElement&gt;"
+        "name": "(renderedOption: UseAutocompleteRenderedOption&lt;Value&gt;) =&gt; React.HTMLAttributes&lt;HTMLLIElement&gt;",
+        "description": "(renderedOption: UseAutocompleteRenderedOption&lt;Value&gt;) =&gt; React.HTMLAttributes&lt;HTMLLIElement&gt;"
       },
       "required": true
     },
@@ -210,8 +216,8 @@
     },
     "groupedOptions": {
       "type": {
-        "name": "T[] | Array&lt;AutocompleteGroupedOption&lt;T&gt;&gt;",
-        "description": "T[] | Array&lt;AutocompleteGroupedOption&lt;T&gt;&gt;"
+        "name": "Value[] | Array&lt;AutocompleteGroupedOption&lt;Value&gt;&gt;",
+        "description": "Value[] | Array&lt;AutocompleteGroupedOption&lt;Value&gt;&gt;"
       },
       "required": true
     },
@@ -224,8 +230,8 @@
     },
     "value": {
       "type": {
-        "name": "AutocompleteValue&lt;T, Multiple, DisableClearable, FreeSolo&gt;",
-        "description": "AutocompleteValue&lt;T, Multiple, DisableClearable, FreeSolo&gt;"
+        "name": "AutocompleteValue&lt;Value, Multiple, DisableClearable, FreeSolo&gt;",
+        "description": "AutocompleteValue&lt;Value, Multiple, DisableClearable, FreeSolo&gt;"
       },
       "required": true
     }

diff --git a/docs/pages/joy-ui/api/autocomplete.json b/docs/pages/joy-ui/api/autocomplete.json
@@ -28,7 +28,7 @@
       "type": { "name": "func" },
       "default": "createFilterOptions()",
       "signature": {
-        "type": "function(options: Array<T>, state: object) => Array<T>",
+        "type": "function(options: Array<Value>, state: object) => Array<Value>",
         "describedArgs": ["options", "state"]
       }
     },
@@ -47,23 +47,23 @@
     },
     "getOptionDisabled": {
       "type": { "name": "func" },
-      "signature": { "type": "function(option: T) => boolean", "describedArgs": ["option"] }
+      "signature": { "type": "function(option: Value) => boolean", "describedArgs": ["option"] }
     },
     "getOptionLabel": {
       "type": { "name": "func" },
       "default": "(option) => option.label ?? option",
-      "signature": { "type": "function(option: T) => string", "describedArgs": [] }
+      "signature": { "type": "function(option: Value) => string", "describedArgs": [] }
     },
     "groupBy": {
       "type": { "name": "func" },
-      "signature": { "type": "function(options: T) => string", "describedArgs": ["options"] }
+      "signature": { "type": "function(options: Value) => string", "describedArgs": ["options"] }
     },
     "id": { "type": { "name": "string" } },
     "inputValue": { "type": { "name": "string" } },
     "isOptionEqualToValue": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(option: T, value: T) => boolean",
+        "type": "function(option: Value, value: Value) => boolean",
         "describedArgs": ["option", "value"]
       }
     },
@@ -76,7 +76,7 @@
     "onChange": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(event: React.SyntheticEvent, value: T | Array<T>, reason: string, details?: string) => void",
+        "type": "function(event: React.SyntheticEvent, value: Value | Array<Value>, reason: string, details?: string) => void",
         "describedArgs": ["event", "value", "reason"]
       }
     },
@@ -90,7 +90,7 @@
     "onHighlightChange": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(event: React.SyntheticEvent, option: T, reason: string) => void",
+        "type": "function(event: React.SyntheticEvent, option: Value, reason: string) => void",
         "describedArgs": ["event", "option", "reason"]
       }
     },

diff --git a/docs/pages/material-ui/api/autocomplete.json b/docs/pages/material-ui/api/autocomplete.json
@@ -44,7 +44,7 @@
       "type": { "name": "func" },
       "default": "createFilterOptions()",
       "signature": {
-        "type": "function(options: Array<T>, state: object) => Array<T>",
+        "type": "function(options: Array<Value>, state: object) => Array<Value>",
         "describedArgs": ["options", "state"]
       }
     },
@@ -62,16 +62,16 @@
     },
     "getOptionDisabled": {
       "type": { "name": "func" },
-      "signature": { "type": "function(option: T) => boolean", "describedArgs": ["option"] }
+      "signature": { "type": "function(option: Value) => boolean", "describedArgs": ["option"] }
     },
     "getOptionLabel": {
       "type": { "name": "func" },
       "default": "(option) => option.label ?? option",
-      "signature": { "type": "function(option: T) => string", "describedArgs": [] }
+      "signature": { "type": "function(option: Value) => string", "describedArgs": [] }
     },
     "groupBy": {
       "type": { "name": "func" },
-      "signature": { "type": "function(options: T) => string", "describedArgs": ["options"] }
+      "signature": { "type": "function(options: Value) => string", "describedArgs": ["options"] }
     },
     "handleHomeEndKeys": { "type": { "name": "bool" }, "default": "!props.freeSolo" },
     "id": { "type": { "name": "string" } },
@@ -80,7 +80,7 @@
     "isOptionEqualToValue": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(option: T, value: T) => boolean",
+        "type": "function(option: Value, value: Value) => boolean",
         "describedArgs": ["option", "value"]
       }
     },
@@ -94,7 +94,7 @@
     "onChange": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(event: React.SyntheticEvent, value: T | Array<T>, reason: string, details?: string) => void",
+        "type": "function(event: React.SyntheticEvent, value: Value | Array<Value>, reason: string, details?: string) => void",
         "describedArgs": ["event", "value", "reason"]
       }
     },
@@ -108,7 +108,7 @@
     "onHighlightChange": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(event: React.SyntheticEvent, option: T, reason: string) => void",
+        "type": "function(event: React.SyntheticEvent, option: Value, reason: string) => void",
         "describedArgs": ["event", "option", "reason"]
       }
     },
@@ -143,14 +143,14 @@
     "renderOption": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(props: object, option: T, state: object, ownerState: object) => ReactNode",
+        "type": "function(props: object, option: Value, state: object, ownerState: object) => ReactNode",
         "describedArgs": ["props", "option", "state", "ownerState"]
       }
     },
     "renderTags": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(value: Array<T>, getTagProps: function, ownerState: object) => ReactNode",
+        "type": "function(value: Array<Value>, getTagProps: function, ownerState: object) => ReactNode",
         "describedArgs": ["value", "getTagProps", "ownerState"]
       }
     },

diff --git a/docs/pages/material-ui/api/select.json b/docs/pages/material-ui/api/select.json
@@ -22,7 +22,7 @@
     "onChange": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(event: SelectChangeEvent<T>, child?: object) => void",
+        "type": "function(event: SelectChangeEvent<Value>, child?: object) => void",
         "describedArgs": ["event", "child"]
       }
     },

diff --git a/docs/translations/api-docs/use-autocomplete/use-autocomplete.json b/docs/translations/api-docs/use-autocomplete/use-autocomplete.json
@@ -111,7 +111,7 @@
     "getRootProps": { "description": "Resolver for the root slot&#39;s props." },
     "getTagProps": { "description": "A tag props getter." },
     "groupedOptions": {
-      "description": "The options to render. It&#39;s either <code>T[]</code> or <code>AutocompleteGroupedOption&lt;T&gt;[]</code> if the groupBy prop is provided."
+      "description": "The options to render. It&#39;s either <code>Value[]</code> or <code>AutocompleteGroupedOption&lt;Value&gt;[]</code> if the groupBy prop is provided."
     },
     "id": { "description": "Id for the Autocomplete." },
     "inputValue": { "description": "The input value." },

diff --git a/packages/mui-base/src/Badge/Badge.types.ts b/packages/mui-base/src/Badge/Badge.types.ts
@@ -78,12 +78,14 @@ export interface BadgeTypeMap<
 /**
  * Utility to create component types that inherit props from Badge.
  */
-export interface ExtendBadgeTypeMap<M extends OverridableTypeMap> {
-  props: M['props'] & BadgeTypeMap['props'];
-  defaultComponent: M['defaultComponent'];
+export interface ExtendBadgeTypeMap<TypeMap extends OverridableTypeMap> {
+  props: TypeMap['props'] & BadgeTypeMap['props'];
+  defaultComponent: TypeMap['defaultComponent'];
 }
 
-export type ExtendBadge<M extends OverridableTypeMap> = OverridableComponent<ExtendBadgeTypeMap<M>>;
+export type ExtendBadge<TypeMap extends OverridableTypeMap> = OverridableComponent<
+  ExtendBadgeTypeMap<TypeMap>
+>;
 
 export type BadgeProps<
   RootComponentType extends React.ElementType = BadgeTypeMap['defaultComponent'],