From 2fd7d862cb6c1a60142d048b1e6bee92e2a1316f Mon Sep 17 00:00:00 2001 From: Punit Soni Date: Wed, 26 Apr 2023 20:18:11 +0530 Subject: [PATCH 01/70] [docs] smooth scrolling added for `back to top` (#37011) --- docs/src/modules/components/BackToTop.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/src/modules/components/BackToTop.tsx b/docs/src/modules/components/BackToTop.tsx index 41f07240bad8b1..4f4dc538e28e9e 100644 --- a/docs/src/modules/components/BackToTop.tsx +++ b/docs/src/modules/components/BackToTop.tsx @@ -26,7 +26,10 @@ export default function BackToTop() { }); const handleClick = () => { - window.scrollTo({ top: 0 }); + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); + const behavior = prefersReducedMotion.matches ? 'auto' : 'smooth'; + + window.scrollTo({ top: 0, behavior }); setOpen(false); }; From f4f31642d6a9c61a8afd0228bec14e314727d454 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20=C5=A0=C5=A5astn=C3=BD?= <60524926+jakub-stastny@users.noreply.github.com> Date: Wed, 26 Apr 2023 23:12:43 -0600 Subject: [PATCH 02/70] [docs] Add a note about minimal required version for theme merging to the guides (#36973) --- .../using-joy-ui-and-material-ui.md | 5 +++++ docs/data/material/guides/styled-engine/styled-engine.md | 6 +++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md b/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md index b781c0bf41ecb1..8811fb0cc4c0c6 100644 --- a/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md +++ b/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md @@ -18,6 +18,11 @@ Additionally, keep these in mind when using them together: - Both of them use [MUI System](/system/getting-started/overview/) as their style engine, which uses React context for theming. - Theme scoping must be done on one of the libraries. +## Prerequisite + +- Have `@mui/material` and `@mui/joy` installed in your project. +- The version of both libraries must be [v5.12.0](https://github.com/mui/material-ui/releases/tag/v5.12.0) or higher. + ## Set up the providers Render Material UI's `CssVarsProvider` inside Joy UI's provider and use `THEME_ID` to separate the themes from each other. diff --git a/docs/data/material/guides/styled-engine/styled-engine.md b/docs/data/material/guides/styled-engine/styled-engine.md index c44955958339d9..828d5dde04fdf2 100644 --- a/docs/data/material/guides/styled-engine/styled-engine.md +++ b/docs/data/material/guides/styled-engine/styled-engine.md @@ -120,7 +120,7 @@ This package-swap approach is identical to the replacement of React with [Preact Having more than one styling libraries could introduce unnecessary complexity to your project. You should have a very good reason to do this. ::: -Material UI can coexist with other libraries that depend on emotion or styled-components. To do that, render Material UI's `ThemeProvider` as an inner provider and use the `THEME_ID` to store the theme. +Material UI, starting from [v5.12.0](https://github.com/mui/material-ui/releases/tag/v5.12.0), can coexist with other libraries that depend on emotion or styled-components. To do that, render Material UI's `ThemeProvider` as an inner provider and use the `THEME_ID` to store the theme. ```js import { ThemeProvider, THEME_ID, createTheme } from '@mui/material/styles'; @@ -141,6 +141,10 @@ function App() { The theme of Material UI will be separated from the other library, so when you use APIs such as `styled`, `sx` prop, and `useTheme`, you will be able to access Material UI's theme like you normally would. +### Minimum version + +[Theme scoping](https://github.com/mui/material-ui/pull/36664) has been added to Material UI v5.12.0, so be sure you're running at that version or higher. + ### Using with [Theme UI](https://theme-ui.com/) Render Material UI's theme provider below Theme UI's provider and assign the material theme to the `THEME_ID` property. From 498f55b4fe27dd44af0bff4395db6da749d70188 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Thu, 27 Apr 2023 10:06:10 +0200 Subject: [PATCH 03/70] [FormControl][base] Do not use optional fields in useFormControlContext's return value (#37037) --- .../base/api/use-form-control-context.json | 19 +++--- .../src/FormControl/FormControl.types.ts | 60 ++++++++++++------- 2 files changed, 48 insertions(+), 31 deletions(-) diff --git a/docs/pages/base/api/use-form-control-context.json b/docs/pages/base/api/use-form-control-context.json index acbb34e0ef36bc..e34be0c419fbd8 100644 --- a/docs/pages/base/api/use-form-control-context.json +++ b/docs/pages/base/api/use-form-control-context.json @@ -1,26 +1,27 @@ { "parameters": {}, "returnValue": { + "disabled": { "type": { "name": "boolean", "description": "boolean" }, "required": true }, + "error": { "type": { "name": "boolean", "description": "boolean" }, "required": true }, "filled": { "type": { "name": "boolean", "description": "boolean" }, "required": true }, "focused": { "type": { "name": "boolean", "description": "boolean" }, "required": true }, "onBlur": { "type": { "name": "() => void", "description": "() => void" }, "required": true }, - "onFocus": { - "type": { "name": "() => void", "description": "() => void" }, - "required": true - }, - "disabled": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" }, - "error": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" }, "onChange": { "type": { "name": "React.ChangeEventHandler<NativeFormControlElement>", "description": "React.ChangeEventHandler<NativeFormControlElement>" - } + }, + "required": true + }, + "onFocus": { + "type": { "name": "() => void", "description": "() => void" }, + "required": true }, - "required": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" }, - "value": { "type": { "name": "unknown", "description": "unknown" } } + "required": { "type": { "name": "boolean", "description": "boolean" }, "required": true }, + "value": { "type": { "name": "unknown", "description": "unknown" }, "required": true } }, "name": "useFormControlContext", "filename": "/packages/mui-base/src/FormControl/useFormControlContext.ts", diff --git a/packages/mui-base/src/FormControl/FormControl.types.ts b/packages/mui-base/src/FormControl/FormControl.types.ts index faa33734da2979..48b566241e6bb4 100644 --- a/packages/mui-base/src/FormControl/FormControl.types.ts +++ b/packages/mui-base/src/FormControl/FormControl.types.ts @@ -86,28 +86,44 @@ export type FormControlOwnerState = Simplify< } >; -type ContextFromPropsKey = 'disabled' | 'error' | 'onChange' | 'required' | 'value'; - -export type FormControlState = Simplify< - Pick & { - /** - * If `true`, the form element has some value. - */ - filled: boolean; - /** - * If `true`, the form element is focused and not disabled. - */ - focused: boolean; - /** - * Callback fired when the form element has lost focus. - */ - onBlur: () => void; - /** - * Callback fired when the form element receives focus. - */ - onFocus: () => void; - } ->; +export type FormControlState = { + /** + * If `true`, the label, input and helper text should be displayed in a disabled state. + */ + disabled: boolean; + /** + * If `true`, the label is displayed in an error state. + */ + error: boolean; + /** + * If `true`, the form element has some value. + */ + filled: boolean; + /** + * If `true`, the form element is focused and not disabled. + */ + focused: boolean; + /** + * Callback fired when the form element has lost focus. + */ + onBlur: () => void; + /** + * Callback fired when the form element's value is modified. + */ + onChange: React.ChangeEventHandler; + /** + * Callback fired when the form element receives focus. + */ + onFocus: () => void; + /** + * If `true`, the label will indicate that the `input` is required. + */ + required: boolean; + /** + * The value of the form element. + */ + value: unknown; +}; export type FormControlRootSlotProps = { children: React.ReactNode | ((state: FormControlState) => React.ReactNode); From 2a71b43048114aabd8c8616af24cce899c30cdfb Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 27 Apr 2023 12:05:35 +0200 Subject: [PATCH 04/70] [docs] Fix anchor link in customization (#37004) Signed-off-by: Olivier Tassinari --- .../material/customization/how-to-customize/how-to-customize.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/customization/how-to-customize/how-to-customize.md b/docs/data/material/customization/how-to-customize/how-to-customize.md index 3894dcac502ff2..3c8ca0448b916a 100644 --- a/docs/data/material/customization/how-to-customize/how-to-customize.md +++ b/docs/data/material/customization/how-to-customize/how-to-customize.md @@ -25,7 +25,7 @@ It can be used with all Material UI components. {{"demo": "SxProp.js" }} -#### Overriding nested component styles +### Overriding nested component styles To customize a specific part of a component, you can use the class name provided by Material UI inside the `sx` prop. As an example, let's say you want to change the `Slider` component's thumb from a circle to a square. From 7d1e34eafbd489bc6461666928e7f41a652c67e9 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 28 Apr 2023 01:10:34 +0200 Subject: [PATCH 05/70] [docs] Handle a few docs-feedback (#36977) --- .../material/components/dialogs/dialogs.md | 8 +++++--- docs/data/material/components/grid2/grid2.md | 2 +- docs/data/material/components/menus/menus.md | 7 +++++-- .../components/pagination/pagination.md | 2 +- .../material/components/popover/popover.md | 8 +++++--- .../data/material/components/popper/popper.md | 8 +++++--- .../components/snackbars/snackbars.md | 2 +- .../related-projects/related-projects.md | 4 ++++ .../discover-more/showcase/Showcase.js | 8 +++++--- .../discover-more/showcase/appList.js | 14 ++------------ .../example-projects/example-projects.md | 18 ++++++------------ .../static/images/showcase/dropdesk.jpg | Bin 153752 -> 0 bytes .../static/images/showcase/openclassrooms.jpg | Bin 84116 -> 0 bytes .../static/images/showcase/openclassrooms.png | Bin 0 -> 636676 bytes .../static/images/showcase/quintoandar.jpg | Bin 0 -> 480946 bytes .../static/images/showcase/quintoandar.png | Bin 48906 -> 0 bytes 16 files changed, 40 insertions(+), 41 deletions(-) delete mode 100644 docs/public/static/images/showcase/dropdesk.jpg delete mode 100644 docs/public/static/images/showcase/openclassrooms.jpg create mode 100644 docs/public/static/images/showcase/openclassrooms.png create mode 100644 docs/public/static/images/showcase/quintoandar.jpg delete mode 100644 docs/public/static/images/showcase/quintoandar.png diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md index 22e3dced75deb6..917b29e0c0e383 100644 --- a/docs/data/material/components/dialogs/dialogs.md +++ b/docs/data/material/components/dialogs/dialogs.md @@ -137,12 +137,14 @@ Follow the [Modal limitations section](/material-ui/react-modal/#limitations). ## Complementary projects -### Material UI Confirm +For more advanced use cases you might be able to take advantage of: -![stars](https://img.shields.io/github/stars/jonatanklosko/material-ui-confirm) +### material-ui-confirm + +![stars](https://img.shields.io/github/stars/jonatanklosko/material-ui-confirm?style=social&label=Star) ![npm downloads](https://img.shields.io/npm/dm/material-ui-confirm.svg) -This package provides dialogs for confirming user actions without writing boilerplate code. +The package [`material-ui-confirm`](https://github.com/jonatanklosko/material-ui-confirm/) provides dialogs for confirming user actions without writing boilerplate code. ## Accessibility diff --git a/docs/data/material/components/grid2/grid2.md b/docs/data/material/components/grid2/grid2.md index e0f50bbf698a8e..aed3d9d46b5763 100644 --- a/docs/data/material/components/grid2/grid2.md +++ b/docs/data/material/components/grid2/grid2.md @@ -32,7 +32,7 @@ From now on, the `Grid` v1 and `Grid` v2 refer to the import as: ```js import Grid from '@mui/material/Grid'; // Grid version 1 -import Grid2 from '@mui/material/Unstable_Grid2'; // Grid version 2 +import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2 ``` ::: diff --git a/docs/data/material/components/menus/menus.md b/docs/data/material/components/menus/menus.md index 19dd0690113ad9..c7895c32a938a0 100644 --- a/docs/data/material/components/menus/menus.md +++ b/docs/data/material/components/menus/menus.md @@ -110,8 +110,11 @@ Here is an example of a context menu. (Right click to open.) For more advanced use cases you might be able to take advantage of: -### PopupState helper +### material-ui-popup-state -There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases. +![stars](https://img.shields.io/github/stars/jcoreio/material-ui-popup-state?style=social&label=Star) +![npm downloads](https://img.shields.io/npm/dm/material-ui-popup-state.svg) + +The package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases. {{"demo": "MenuPopupState.js"}} diff --git a/docs/data/material/components/pagination/pagination.md b/docs/data/material/components/pagination/pagination.md index 35cda40569f099..430e9dc520172f 100644 --- a/docs/data/material/components/pagination/pagination.md +++ b/docs/data/material/components/pagination/pagination.md @@ -41,7 +41,7 @@ It's possible to customize the control icons. ## Pagination ranges -You can specify how many digits to display either side of current page with the `siblingRange` prop, and adjacent to the start and end page number with the `boundaryRange` prop. +You can specify how many digits to display either side of current page with the `siblingCount` prop, and adjacent to the start and end page number with the `boundaryCount` prop. {{"demo": "PaginationRanges.js"}} diff --git a/docs/data/material/components/popover/popover.md b/docs/data/material/components/popover/popover.md index fdd898228a5d67..e3790c005680b9 100644 --- a/docs/data/material/components/popover/popover.md +++ b/docs/data/material/components/popover/popover.md @@ -40,9 +40,11 @@ This demo demonstrates how to use the `Popover` component and the mouseover even For more advanced use cases, you might be able to take advantage of: -### PopupState helper +### material-ui-popup-state -There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of popover -state for you in most cases. +![stars](https://img.shields.io/github/stars/jcoreio/material-ui-popup-state?style=social&label=Star) +![npm downloads](https://img.shields.io/npm/dm/material-ui-popup-state.svg) + +The package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of popover state for you in most cases. {{"demo": "PopoverPopupState.js"}} diff --git a/docs/data/material/components/popper/popper.md b/docs/data/material/components/popper/popper.md index 2a66c4a6ec3edf..71d60732f06ad7 100644 --- a/docs/data/material/components/popper/popper.md +++ b/docs/data/material/components/popper/popper.md @@ -68,9 +68,11 @@ Highlight part of the text to see the popper: For more advanced use cases you might be able to take advantage of: -### PopupState helper +### material-ui-popup-state -There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of popper -state for you in most cases. +![stars](https://img.shields.io/github/stars/jcoreio/material-ui-popup-state?style=social&label=Star) +![npm downloads](https://img.shields.io/npm/dm/material-ui-popup-state.svg) + +The package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of popper state for you in most cases. {{"demo": "PopperPopupState.js"}} diff --git a/docs/data/material/components/snackbars/snackbars.md b/docs/data/material/components/snackbars/snackbars.md index 233773dad3617b..6953739a60a0c7 100644 --- a/docs/data/material/components/snackbars/snackbars.md +++ b/docs/data/material/components/snackbars/snackbars.md @@ -94,7 +94,7 @@ For more advanced use cases you might be able to take advantage of: ### notistack -![stars](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Stars) +![stars](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Star) ![npm downloads](https://img.shields.io/npm/dm/notistack.svg) This example demonstrates how to use [notistack](https://github.com/iamhosseindhv/notistack). diff --git a/docs/data/material/discover-more/related-projects/related-projects.md b/docs/data/material/discover-more/related-projects/related-projects.md index c6c174adba8eb4..6d0d983590871d 100644 --- a/docs/data/material/discover-more/related-projects/related-projects.md +++ b/docs/data/material/discover-more/related-projects/related-projects.md @@ -56,3 +56,7 @@ Feel free to submit a pull request! ### Sparkline - [mui-plus](https://mui-plus.vercel.app/components/Sparkline): A sparkline is a tiny chart that can be used to indicate the trend of a value. + +## Admin frameworks + +- [React Admin](https://github.com/marmelab/react-admin): A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs. diff --git a/docs/data/material/discover-more/showcase/Showcase.js b/docs/data/material/discover-more/showcase/Showcase.js index eff6f7dca223c0..d4a6e0fdacbb8c 100644 --- a/docs/data/material/discover-more/showcase/Showcase.js +++ b/docs/data/material/discover-more/showcase/Showcase.js @@ -45,7 +45,7 @@ const sortFunctions = { }; export default function Showcase() { - const [sortFunctionName, setSortFunctionName] = React.useState('dateAdded'); + const [sortFunctionName, setSortFunctionName] = React.useState('similarWebVisits'); const sortFunction = sortFunctions[sortFunctionName]; const t = useTranslate(); @@ -54,7 +54,7 @@ export default function Showcase() { }; return ( - + Sort by \n We'll never share your email.\n\n```\n\n⚠️ Only one `Input` can be used within a FormControl because it create visual inconsistencies.\nFor instance, only one input can be focused at the same time, the state shouldn't be shared.", "propDescriptions": { "children": "The content of the component.", - "component": "The component used for the root node. Either a string to use a HTML element or a component.", "disabled": "If true, the label, input and helper text should be displayed in a disabled state.", "error": "If true, the label is displayed in an error state.", "onChange": "Callback fired when the form element's value is modified.", diff --git a/packages/mui-base/src/FormControl/FormControl.spec.tsx b/packages/mui-base/src/FormControl/FormControl.spec.tsx index 8ef3d66d1a8cc8..f13a167aa9ab2e 100644 --- a/packages/mui-base/src/FormControl/FormControl.spec.tsx +++ b/packages/mui-base/src/FormControl/FormControl.spec.tsx @@ -15,19 +15,39 @@ function FormControlTest() { {/* @ts-expect-error */} - + + slots={{ + root: 'a', + }} + href="#" + /> + + + slots={{ + root: CustomComponent, + }} + stringProp="test" + numberProp={0} + /> - {/* @ts-expect-error */} - + + slots={{ + root: CustomComponent, + }} + /> - + slots={{ + root: 'button', + }} onClick={(e: React.MouseEvent) => e.currentTarget.checkValidity()} /> - component="button" + slots={{ + root: 'button', + }} ref={(elem) => { expectType(elem); }} diff --git a/packages/mui-base/src/FormControl/FormControl.test.tsx b/packages/mui-base/src/FormControl/FormControl.test.tsx index 9e14724f157d3a..e5d7c991ae6b2b 100644 --- a/packages/mui-base/src/FormControl/FormControl.test.tsx +++ b/packages/mui-base/src/FormControl/FormControl.test.tsx @@ -20,6 +20,7 @@ describe('', () => { expectedClassName: formControlClasses.root, }, }, + skip: ['componentProp'], })); describe('initial state', () => { diff --git a/packages/mui-base/src/FormControl/FormControl.tsx b/packages/mui-base/src/FormControl/FormControl.tsx index f79f77647eaa2b..96463d1438f51d 100644 --- a/packages/mui-base/src/FormControl/FormControl.tsx +++ b/packages/mui-base/src/FormControl/FormControl.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { OverridableComponent } from '@mui/types'; import { unstable_useControlled as useControlled } from '@mui/utils'; +import { PolymorphicComponent } from '../utils/PolymorphicComponent'; import FormControlContext from './FormControlContext'; import { getFormControlUtilityClass } from './formControlClasses'; import { @@ -80,7 +80,6 @@ const FormControl = React.forwardRef(function FormControl< const { defaultValue, children, - component, disabled = false, error = false, onChange, @@ -145,7 +144,7 @@ const FormControl = React.forwardRef(function FormControl< return children; }; - const Root = component ?? slots.root ?? 'div'; + const Root = slots.root ?? 'div'; const rootProps: WithOptionalOwnerState = useSlotProps({ elementType: Root, externalSlotProps: slotProps.root, @@ -163,7 +162,7 @@ const FormControl = React.forwardRef(function FormControl< ); -}) as OverridableComponent; +}) as PolymorphicComponent; FormControl.propTypes /* remove-proptypes */ = { // ----------------------------- Warning -------------------------------- @@ -177,11 +176,6 @@ FormControl.propTypes /* remove-proptypes */ = { PropTypes.node, PropTypes.func, ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * @ignore */ diff --git a/packages/mui-base/src/FormControl/FormControl.types.ts b/packages/mui-base/src/FormControl/FormControl.types.ts index 48b566241e6bb4..bd76fbedc2a050 100644 --- a/packages/mui-base/src/FormControl/FormControl.types.ts +++ b/packages/mui-base/src/FormControl/FormControl.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { OverrideProps, Simplify } from '@mui/types'; -import { SlotComponentProps } from '../utils'; +import { Simplify } from '@mui/types'; +import { PolymorphicProps, SlotComponentProps } from '../utils'; export type NativeFormControlElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement; @@ -72,9 +72,7 @@ export interface FormControlTypeMap< export type FormControlProps< RootComponentType extends React.ElementType = FormControlTypeMap['defaultComponent'], -> = OverrideProps, RootComponentType> & { - component?: RootComponentType; -}; +> = PolymorphicProps, RootComponentType>; type NonOptionalOwnerState = 'disabled' | 'error' | 'required'; From cad1c7b581fecba4f285ef038b410acdfe4df600 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Fri, 28 Apr 2023 10:15:41 +0100 Subject: [PATCH 09/70] [MenuItem][base] Drop component prop (#37032) --- docs/pages/base/api/menu-item.json | 1 - .../api-docs-base/menu-item/menu-item.json | 1 - .../mui-base/src/MenuItem/MenuItem.spec.tsx | 34 +++++++++++++++---- .../mui-base/src/MenuItem/MenuItem.test.tsx | 1 + packages/mui-base/src/MenuItem/MenuItem.tsx | 12 ++----- .../mui-base/src/MenuItem/MenuItem.types.ts | 8 ++--- 6 files changed, 34 insertions(+), 23 deletions(-) diff --git a/docs/pages/base/api/menu-item.json b/docs/pages/base/api/menu-item.json index ab7b068a921cb3..7a56472ba90e64 100644 --- a/docs/pages/base/api/menu-item.json +++ b/docs/pages/base/api/menu-item.json @@ -1,6 +1,5 @@ { "props": { - "component": { "type": { "name": "elementType" } }, "label": { "type": { "name": "string" } }, "slotProps": { "type": { "name": "shape", "description": "{ root?: func
| object }" }, diff --git a/docs/translations/api-docs-base/menu-item/menu-item.json b/docs/translations/api-docs-base/menu-item/menu-item.json index 1d5601b2a7adfa..4582dbc3a635eb 100644 --- a/docs/translations/api-docs-base/menu-item/menu-item.json +++ b/docs/translations/api-docs-base/menu-item/menu-item.json @@ -1,7 +1,6 @@ { "componentDescription": "", "propDescriptions": { - "component": "The component used for the root node. Either a string to use a HTML element or a component.", "label": "A text representation of the menu item's content. Used for keyboard text navigation matching.", "slotProps": "The props used for each slot inside the MenuItem.", "slots": "The components used for each slot inside the MenuItem. Either a string to use a HTML element or a component. See Slots API below for more details." diff --git a/packages/mui-base/src/MenuItem/MenuItem.spec.tsx b/packages/mui-base/src/MenuItem/MenuItem.spec.tsx index 7b728eb48cee49..c9091143378303 100644 --- a/packages/mui-base/src/MenuItem/MenuItem.spec.tsx +++ b/packages/mui-base/src/MenuItem/MenuItem.spec.tsx @@ -13,19 +13,39 @@ const polymorphicComponentTest = () => { {/* @ts-expect-error */} - + + slots={{ + root: 'a', + }} + href="#" + /> - - {/* @ts-expect-error */} - + + slots={{ + root: CustomComponent, + }} + stringProp="test" + numberProp={0} + /> - + slots={{ + root: CustomComponent, + }} + /> + + + slots={{ + root: 'button', + }} onClick={(e: React.MouseEvent) => e.currentTarget.checkValidity()} /> - component="button" + slots={{ + root: 'button', + }} ref={(elem) => { expectType(elem); }} diff --git a/packages/mui-base/src/MenuItem/MenuItem.test.tsx b/packages/mui-base/src/MenuItem/MenuItem.test.tsx index 24d36cae81d292..706086041a6982 100644 --- a/packages/mui-base/src/MenuItem/MenuItem.test.tsx +++ b/packages/mui-base/src/MenuItem/MenuItem.test.tsx @@ -45,6 +45,7 @@ describe('', () => { }, }, skip: [ + 'componentProp', 'reactTestRenderer', // Need to be wrapped in MenuContext ], })); diff --git a/packages/mui-base/src/MenuItem/MenuItem.tsx b/packages/mui-base/src/MenuItem/MenuItem.tsx index 7786d99a7251cb..4b085b0e9477dc 100644 --- a/packages/mui-base/src/MenuItem/MenuItem.tsx +++ b/packages/mui-base/src/MenuItem/MenuItem.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { OverridableComponent } from '@mui/types'; +import { PolymorphicComponent } from '../utils/PolymorphicComponent'; import { MenuItemOwnerState, MenuItemProps, MenuItemTypeMap } from './MenuItem.types'; import { getMenuItemUtilityClass } from './menuItemClasses'; import useMenuItem from '../useMenuItem'; @@ -35,7 +35,6 @@ const MenuItem = React.forwardRef(function MenuItem{children}; -}) as OverridableComponent; +}) as PolymorphicComponent; MenuItem.propTypes /* remove-proptypes */ = { // ----------------------------- Warning -------------------------------- @@ -74,11 +73,6 @@ MenuItem.propTypes /* remove-proptypes */ = { * @ignore */ children: PropTypes.node, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * @ignore */ diff --git a/packages/mui-base/src/MenuItem/MenuItem.types.ts b/packages/mui-base/src/MenuItem/MenuItem.types.ts index 43f9454a7357aa..63b0b3fadfeaa2 100644 --- a/packages/mui-base/src/MenuItem/MenuItem.types.ts +++ b/packages/mui-base/src/MenuItem/MenuItem.types.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { OverrideProps, Simplify } from '@mui/types'; -import { SlotComponentProps } from '../utils'; +import { Simplify } from '@mui/types'; +import { PolymorphicProps, SlotComponentProps } from '../utils'; export interface MenuItemRootSlotPropsOverrides {} @@ -59,9 +59,7 @@ export interface MenuItemTypeMap< export type MenuItemProps< RootComponentType extends React.ElementType = MenuItemTypeMap['defaultComponent'], -> = OverrideProps, RootComponentType> & { - component?: RootComponentType; -}; +> = PolymorphicProps, RootComponentType>; export interface MenuItemState { disabled: boolean; From 05bce52ea1cd085034e638ad2e5b6e6c49039d18 Mon Sep 17 00:00:00 2001 From: Varun Mulay <35381801+varunmulay22@users.noreply.github.com> Date: Fri, 28 Apr 2023 15:17:27 +0530 Subject: [PATCH 10/70] [docs][base] Move styles to the bottom of demos code for `Snackbar` (#36719) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: MichaΕ‚ Dudak --- .../snackbar/TransitionComponentSnackbar.js | 152 +++++++++--------- .../snackbar/TransitionComponentSnackbar.tsx | 152 +++++++++--------- .../components/snackbar/UnstyledSnackbar.js | 54 +++---- .../components/snackbar/UnstyledSnackbar.tsx | 54 +++---- .../base/components/snackbar/UseSnackbar.js | 62 +++---- .../base/components/snackbar/UseSnackbar.tsx | 62 +++---- 6 files changed, 268 insertions(+), 268 deletions(-) diff --git a/docs/data/base/components/snackbar/TransitionComponentSnackbar.js b/docs/data/base/components/snackbar/TransitionComponentSnackbar.js index 13f40dd565c597..b9b207cbc92904 100644 --- a/docs/data/base/components/snackbar/TransitionComponentSnackbar.js +++ b/docs/data/base/components/snackbar/TransitionComponentSnackbar.js @@ -5,6 +5,82 @@ import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; import CloseIcon from '@mui/icons-material/Close'; import Snackbar from '@mui/base/Snackbar'; +export default function TransitionComponentSnackbar() { + const [open, setOpen] = React.useState(false); + const [exited, setExited] = React.useState(true); + const nodeRef = React.useRef(null); + + const handleClose = (_, reason) => { + if (reason === 'clickaway') { + return; + } + + setOpen(false); + }; + + const handleClick = () => { + setOpen(true); + }; + + const handleOnEnter = () => { + setExited(false); + }; + + const handleOnExited = () => { + setExited(true); + }; + + return ( + + + + + {(status) => ( + + +
+
Notifications sent
+
+ All your notifications were sent to the desired address. +
+
+ + + )} + + + + ); +} + const blue = { 50: '#F0F7FF', 100: '#DAECFF', @@ -85,79 +161,3 @@ const positioningStyles = { exited: 'translateX(500px)', unmounted: 'translateX(500px)', }; - -export default function TransitionComponentSnackbar() { - const [open, setOpen] = React.useState(false); - const [exited, setExited] = React.useState(true); - const nodeRef = React.useRef(null); - - const handleClose = (_, reason) => { - if (reason === 'clickaway') { - return; - } - - setOpen(false); - }; - - const handleClick = () => { - setOpen(true); - }; - - const handleOnEnter = () => { - setExited(false); - }; - - const handleOnExited = () => { - setExited(true); - }; - - return ( - - - - - {(status) => ( - - -
-
Notifications sent
-
- All your notifications were sent to the desired address. -
-
- - - )} - - - - ); -} diff --git a/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx b/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx index 465decef53d4d7..cfe9c78fa9c741 100644 --- a/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx +++ b/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx @@ -6,6 +6,82 @@ import CloseIcon from '@mui/icons-material/Close'; import Snackbar from '@mui/base/Snackbar'; import { SnackbarCloseReason } from '@mui/base/useSnackbar'; +export default function TransitionComponentSnackbar() { + const [open, setOpen] = React.useState(false); + const [exited, setExited] = React.useState(true); + const nodeRef = React.useRef(null); + + const handleClose = (_: any, reason: SnackbarCloseReason) => { + if (reason === 'clickaway') { + return; + } + + setOpen(false); + }; + + const handleClick = () => { + setOpen(true); + }; + + const handleOnEnter = () => { + setExited(false); + }; + + const handleOnExited = () => { + setExited(true); + }; + + return ( + + + + + {(status) => ( + + +
+
Notifications sent
+
+ All your notifications were sent to the desired address. +
+
+ + + )} + + + + ); +} + const blue = { 50: '#F0F7FF', 100: '#DAECFF', @@ -86,79 +162,3 @@ const positioningStyles = { exited: 'translateX(500px)', unmounted: 'translateX(500px)', }; - -export default function TransitionComponentSnackbar() { - const [open, setOpen] = React.useState(false); - const [exited, setExited] = React.useState(true); - const nodeRef = React.useRef(null); - - const handleClose = (_: any, reason: SnackbarCloseReason) => { - if (reason === 'clickaway') { - return; - } - - setOpen(false); - }; - - const handleClick = () => { - setOpen(true); - }; - - const handleOnEnter = () => { - setExited(false); - }; - - const handleOnExited = () => { - setExited(true); - }; - - return ( - - - - - {(status) => ( - - -
-
Notifications sent
-
- All your notifications were sent to the desired address. -
-
- - - )} - - - - ); -} diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar.js b/docs/data/base/components/snackbar/UnstyledSnackbar.js index 2052043a4b018b..4b112813214ab6 100644 --- a/docs/data/base/components/snackbar/UnstyledSnackbar.js +++ b/docs/data/base/components/snackbar/UnstyledSnackbar.js @@ -2,6 +2,33 @@ import * as React from 'react'; import { styled, keyframes, css } from '@mui/system'; import Snackbar from '@mui/base/Snackbar'; +export default function UnstyledSnackbar() { + const [open, setOpen] = React.useState(false); + + const handleClose = (_, reason) => { + if (reason === 'clickaway') { + return; + } + + setOpen(false); + }; + + const handleClick = () => { + setOpen(true); + }; + + return ( + + + + Hello World + + + ); +} + const blue = { 50: '#F0F7FF', 400: '#3399FF', @@ -48,30 +75,3 @@ const StyledSnackbar = styled(Snackbar)( transition: transform 0.2s ease-out; `, ); - -export default function UnstyledSnackbar() { - const [open, setOpen] = React.useState(false); - - const handleClose = (_, reason) => { - if (reason === 'clickaway') { - return; - } - - setOpen(false); - }; - - const handleClick = () => { - setOpen(true); - }; - - return ( - - - - Hello World - - - ); -} diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar.tsx b/docs/data/base/components/snackbar/UnstyledSnackbar.tsx index 8f2982d9196c2d..586d12aca1e10d 100644 --- a/docs/data/base/components/snackbar/UnstyledSnackbar.tsx +++ b/docs/data/base/components/snackbar/UnstyledSnackbar.tsx @@ -3,6 +3,33 @@ import { styled, keyframes, css } from '@mui/system'; import Snackbar from '@mui/base/Snackbar'; import { SnackbarCloseReason } from '@mui/base/useSnackbar'; +export default function UnstyledSnackbar() { + const [open, setOpen] = React.useState(false); + + const handleClose = (_: any, reason: SnackbarCloseReason) => { + if (reason === 'clickaway') { + return; + } + + setOpen(false); + }; + + const handleClick = () => { + setOpen(true); + }; + + return ( + + + + Hello World + + + ); +} + const blue = { 50: '#F0F7FF', 400: '#3399FF', @@ -49,30 +76,3 @@ const StyledSnackbar = styled(Snackbar)( transition: transform 0.2s ease-out; `, ); - -export default function UnstyledSnackbar() { - const [open, setOpen] = React.useState(false); - - const handleClose = (_: any, reason: SnackbarCloseReason) => { - if (reason === 'clickaway') { - return; - } - - setOpen(false); - }; - - const handleClick = () => { - setOpen(true); - }; - - return ( - - - - Hello World - - - ); -} diff --git a/docs/data/base/components/snackbar/UseSnackbar.js b/docs/data/base/components/snackbar/UseSnackbar.js index 7cf75624bf1a97..be4e29e88cee7e 100644 --- a/docs/data/base/components/snackbar/UseSnackbar.js +++ b/docs/data/base/components/snackbar/UseSnackbar.js @@ -3,6 +3,37 @@ import useSnackbar from '@mui/base/useSnackbar'; import ClickAwayListener from '@mui/base/ClickAwayListener'; import { css, keyframes, styled } from '@mui/system'; +export default function UseSnackbar() { + const [open, setOpen] = React.useState(false); + + const handleClose = () => { + setOpen(false); + }; + + const { getRootProps, onClickAway } = useSnackbar({ + onClose: handleClose, + open, + autoHideDuration: 5000, + }); + + const handleOpen = () => { + setOpen(true); + }; + + return ( + + + {open ? ( + + Hello World + + ) : null} + + ); +} + const blue = { 50: '#F0F7FF', 400: '#3399FF', @@ -49,34 +80,3 @@ const CustomSnackbar = styled('div')( transition: transform 0.2s ease-out; `, ); - -export default function UseSnackbar() { - const [open, setOpen] = React.useState(false); - - const handleClose = () => { - setOpen(false); - }; - - const { getRootProps, onClickAway } = useSnackbar({ - onClose: handleClose, - open, - autoHideDuration: 5000, - }); - - const handleOpen = () => { - setOpen(true); - }; - - return ( - - - {open ? ( - - Hello World - - ) : null} - - ); -} diff --git a/docs/data/base/components/snackbar/UseSnackbar.tsx b/docs/data/base/components/snackbar/UseSnackbar.tsx index 7cf75624bf1a97..be4e29e88cee7e 100644 --- a/docs/data/base/components/snackbar/UseSnackbar.tsx +++ b/docs/data/base/components/snackbar/UseSnackbar.tsx @@ -3,6 +3,37 @@ import useSnackbar from '@mui/base/useSnackbar'; import ClickAwayListener from '@mui/base/ClickAwayListener'; import { css, keyframes, styled } from '@mui/system'; +export default function UseSnackbar() { + const [open, setOpen] = React.useState(false); + + const handleClose = () => { + setOpen(false); + }; + + const { getRootProps, onClickAway } = useSnackbar({ + onClose: handleClose, + open, + autoHideDuration: 5000, + }); + + const handleOpen = () => { + setOpen(true); + }; + + return ( + + + {open ? ( + + Hello World + + ) : null} + + ); +} + const blue = { 50: '#F0F7FF', 400: '#3399FF', @@ -49,34 +80,3 @@ const CustomSnackbar = styled('div')( transition: transform 0.2s ease-out; `, ); - -export default function UseSnackbar() { - const [open, setOpen] = React.useState(false); - - const handleClose = () => { - setOpen(false); - }; - - const { getRootProps, onClickAway } = useSnackbar({ - onClose: handleClose, - open, - autoHideDuration: 5000, - }); - - const handleOpen = () => { - setOpen(true); - }; - - return ( - - - {open ? ( - - Hello World - - ) : null} - - ); -} From 02c5fccc825874a0e5b01df78dd4621c23eac5b6 Mon Sep 17 00:00:00 2001 From: Varun Mulay <35381801+varunmulay22@users.noreply.github.com> Date: Fri, 28 Apr 2023 15:17:51 +0530 Subject: [PATCH 11/70] [docs][base] Move styles to the bottom of demos code for `SliderUnstyled` (#36721) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: MichaΕ‚ Dudak --- .../base/components/slider/DiscreteSlider.js | 58 +++++++-------- .../base/components/slider/DiscreteSlider.tsx | 58 +++++++-------- .../components/slider/DiscreteSliderMarks.js | 72 +++++++++--------- .../components/slider/DiscreteSliderMarks.tsx | 72 +++++++++--------- .../components/slider/DiscreteSliderValues.js | 74 +++++++++---------- .../slider/DiscreteSliderValues.tsx | 74 +++++++++---------- .../components/slider/LabeledValuesSlider.js | 40 +++++----- .../components/slider/LabeledValuesSlider.tsx | 40 +++++----- .../base/components/slider/RangeSlider.js | 68 ++++++++--------- .../base/components/slider/RangeSlider.tsx | 68 ++++++++--------- .../base/components/slider/UnstyledSlider.js | 18 ++--- .../base/components/slider/UnstyledSlider.tsx | 18 ++--- .../slider/UnstyledSliderIntroduction.js | 18 ++--- .../slider/UnstyledSliderIntroduction.tsx | 18 ++--- 14 files changed, 348 insertions(+), 348 deletions(-) diff --git a/docs/data/base/components/slider/DiscreteSlider.js b/docs/data/base/components/slider/DiscreteSlider.js index 6bcc33c87e59c3..eeb6682d996ed2 100644 --- a/docs/data/base/components/slider/DiscreteSlider.js +++ b/docs/data/base/components/slider/DiscreteSlider.js @@ -3,6 +3,35 @@ import PropTypes from 'prop-types'; import { styled, alpha, Box } from '@mui/system'; import Slider, { sliderClasses } from '@mui/base/Slider'; +export default function DiscreteSlider() { + return ( + + + + ); +} + +function SliderValueLabel({ children }) { + return {children}; +} + +SliderValueLabel.propTypes = { + children: PropTypes.element.isRequired, +}; + +function valuetext(value) { + return `${value}Β°C`; +} + const blue = { 100: '#DAECFF', 200: '#99CCF3', @@ -122,32 +151,3 @@ const StyledSlider = styled(Slider)( } `, ); - -function SliderValueLabel({ children }) { - return {children}; -} - -SliderValueLabel.propTypes = { - children: PropTypes.element.isRequired, -}; - -function valuetext(value) { - return `${value}Β°C`; -} - -export default function DiscreteSlider() { - return ( - - - - ); -} diff --git a/docs/data/base/components/slider/DiscreteSlider.tsx b/docs/data/base/components/slider/DiscreteSlider.tsx index 9781af1cf199e4..a87ecad83cdcbb 100644 --- a/docs/data/base/components/slider/DiscreteSlider.tsx +++ b/docs/data/base/components/slider/DiscreteSlider.tsx @@ -2,6 +2,35 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; import Slider, { sliderClasses } from '@mui/base/Slider'; +export default function DiscreteSlider() { + return ( + + + + ); +} + +interface SliderValueLabelProps { + children: React.ReactElement; +} + +function SliderValueLabel({ children }: SliderValueLabelProps) { + return {children}; +} + +function valuetext(value: number) { + return `${value}Β°C`; +} + const blue = { 100: '#DAECFF', 200: '#99CCF3', @@ -121,32 +150,3 @@ const StyledSlider = styled(Slider)( } `, ); - -interface SliderValueLabelProps { - children: React.ReactElement; -} - -function SliderValueLabel({ children }: SliderValueLabelProps) { - return {children}; -} - -function valuetext(value: number) { - return `${value}Β°C`; -} - -export default function DiscreteSlider() { - return ( - - - - ); -} diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.js b/docs/data/base/components/slider/DiscreteSliderMarks.js index 3bffe39dda3b92..f6269edc1f29b6 100644 --- a/docs/data/base/components/slider/DiscreteSliderMarks.js +++ b/docs/data/base/components/slider/DiscreteSliderMarks.js @@ -2,6 +2,42 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; import Slider, { sliderClasses } from '@mui/base/Slider'; +export default function DiscreteSliderMarks() { + return ( + + + + ); +} + +const marks = [ + { + value: 0, + label: '0Β°C', + }, + { + value: 20, + label: '20Β°C', + }, + { + value: 37, + label: '37Β°C', + }, + { + value: 100, + label: '100Β°C', + }, +]; + +function valuetext(value) { + return `${value}Β°C`; +} + const blue = { 100: '#DAECFF', 200: '#99CCF3', @@ -119,39 +155,3 @@ const StyledSlider = styled(Slider)( } `, ); - -const marks = [ - { - value: 0, - label: '0Β°C', - }, - { - value: 20, - label: '20Β°C', - }, - { - value: 37, - label: '37Β°C', - }, - { - value: 100, - label: '100Β°C', - }, -]; - -function valuetext(value) { - return `${value}Β°C`; -} - -export default function DiscreteSliderMarks() { - return ( - - - - ); -} diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.tsx b/docs/data/base/components/slider/DiscreteSliderMarks.tsx index b796801ab68495..9894b01c8a6b5e 100644 --- a/docs/data/base/components/slider/DiscreteSliderMarks.tsx +++ b/docs/data/base/components/slider/DiscreteSliderMarks.tsx @@ -2,6 +2,42 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; import Slider, { sliderClasses } from '@mui/base/Slider'; +export default function DiscreteSliderMarks() { + return ( + + + + ); +} + +const marks = [ + { + value: 0, + label: '0Β°C', + }, + { + value: 20, + label: '20Β°C', + }, + { + value: 37, + label: '37Β°C', + }, + { + value: 100, + label: '100Β°C', + }, +]; + +function valuetext(value: number) { + return `${value}Β°C`; +} + const blue = { 100: '#DAECFF', 200: '#99CCF3', @@ -119,39 +155,3 @@ const StyledSlider = styled(Slider)( } `, ); - -const marks = [ - { - value: 0, - label: '0Β°C', - }, - { - value: 20, - label: '20Β°C', - }, - { - value: 37, - label: '37Β°C', - }, - { - value: 100, - label: '100Β°C', - }, -]; - -function valuetext(value: number) { - return `${value}Β°C`; -} - -export default function DiscreteSliderMarks() { - return ( - - - - ); -} diff --git a/docs/data/base/components/slider/DiscreteSliderValues.js b/docs/data/base/components/slider/DiscreteSliderValues.js index b3cf090d1988a3..6a50b81e293358 100644 --- a/docs/data/base/components/slider/DiscreteSliderValues.js +++ b/docs/data/base/components/slider/DiscreteSliderValues.js @@ -2,6 +2,43 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; import Slider, { sliderClasses } from '@mui/base/Slider'; +export default function DiscreteSliderValues() { + return ( + + + + ); +} + +const marks = [ + { + value: 0, + label: '0Β°C', + }, + { + value: 20, + label: '20Β°C', + }, + { + value: 37, + label: '37Β°C', + }, + { + value: 100, + label: '100Β°C', + }, +]; + +function valuetext(value) { + return `${value}Β°C`; +} + const blue = { 100: '#DAECFF', 200: '#99CCF3', @@ -119,40 +156,3 @@ const StyledSlider = styled(Slider)( } `, ); - -const marks = [ - { - value: 0, - label: '0Β°C', - }, - { - value: 20, - label: '20Β°C', - }, - { - value: 37, - label: '37Β°C', - }, - { - value: 100, - label: '100Β°C', - }, -]; - -function valuetext(value) { - return `${value}Β°C`; -} - -export default function DiscreteSliderValues() { - return ( - - - - ); -} diff --git a/docs/data/base/components/slider/DiscreteSliderValues.tsx b/docs/data/base/components/slider/DiscreteSliderValues.tsx index 3caefc5e6ec6ab..ce42cce62df3b6 100644 --- a/docs/data/base/components/slider/DiscreteSliderValues.tsx +++ b/docs/data/base/components/slider/DiscreteSliderValues.tsx @@ -2,6 +2,43 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; import Slider, { sliderClasses } from '@mui/base/Slider'; +export default function DiscreteSliderValues() { + return ( + + + + ); +} + +const marks = [ + { + value: 0, + label: '0Β°C', + }, + { + value: 20, + label: '20Β°C', + }, + { + value: 37, + label: '37Β°C', + }, + { + value: 100, + label: '100Β°C', + }, +]; + +function valuetext(value: number) { + return `${value}Β°C`; +} + const blue = { 100: '#DAECFF', 200: '#99CCF3', @@ -119,40 +156,3 @@ const StyledSlider = styled(Slider)( } `, ); - -const marks = [ - { - value: 0, - label: '0Β°C', - }, - { - value: 20, - label: '20Β°C', - }, - { - value: 37, - label: '37Β°C', - }, - { - value: 100, - label: '100Β°C', - }, -]; - -function valuetext(value: number) { - return `${value}Β°C`; -} - -export default function DiscreteSliderValues() { - return ( - - - - ); -} diff --git a/docs/data/base/components/slider/LabeledValuesSlider.js b/docs/data/base/components/slider/LabeledValuesSlider.js index d4d73e1f1fe6f0..af7613c47e6851 100644 --- a/docs/data/base/components/slider/LabeledValuesSlider.js +++ b/docs/data/base/components/slider/LabeledValuesSlider.js @@ -3,6 +3,26 @@ import PropTypes from 'prop-types'; import { styled, alpha, Box } from '@mui/system'; import Slider, { sliderClasses } from '@mui/base/Slider'; +export default function LabeledValuesSlider() { + return ( + + + + ); +} + +function SliderValueLabel({ children }) { + return ( + +
{children}
+ + ); +} + +SliderValueLabel.propTypes = { + children: PropTypes.element.isRequired, +}; + const blue = { 100: '#DAECFF', 200: '#99CCF3', @@ -113,23 +133,3 @@ const StyledSlider = styled(Slider)( } `, ); - -function SliderValueLabel({ children }) { - return ( - -
{children}
- - ); -} - -SliderValueLabel.propTypes = { - children: PropTypes.element.isRequired, -}; - -export default function LabeledValuesSlider() { - return ( - - - - ); -} diff --git a/docs/data/base/components/slider/LabeledValuesSlider.tsx b/docs/data/base/components/slider/LabeledValuesSlider.tsx index f34b5261304754..b86cc2e2769b45 100644 --- a/docs/data/base/components/slider/LabeledValuesSlider.tsx +++ b/docs/data/base/components/slider/LabeledValuesSlider.tsx @@ -2,6 +2,26 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; import Slider, { sliderClasses } from '@mui/base/Slider'; +export default function LabeledValuesSlider() { + return ( + + + + ); +} + +interface SliderValueLabelProps { + children: React.ReactElement; +} + +function SliderValueLabel({ children }: SliderValueLabelProps) { + return ( + +
{children}
+ + ); +} + const blue = { 100: '#DAECFF', 200: '#99CCF3', @@ -112,23 +132,3 @@ const StyledSlider = styled(Slider)( } `, ); - -interface SliderValueLabelProps { - children: React.ReactElement; -} - -function SliderValueLabel({ children }: SliderValueLabelProps) { - return ( - -
{children}
- - ); -} - -export default function LabeledValuesSlider() { - return ( - - - - ); -} diff --git a/docs/data/base/components/slider/RangeSlider.js b/docs/data/base/components/slider/RangeSlider.js index 8efb55e311ee4e..9210500dd2910f 100644 --- a/docs/data/base/components/slider/RangeSlider.js +++ b/docs/data/base/components/slider/RangeSlider.js @@ -2,6 +2,40 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; import Slider, { sliderClasses } from '@mui/base/Slider'; +export default function RangeSlider() { + const [value, setValue] = React.useState([20, 37]); + + const handleChange = (event, newValue) => { + setValue(newValue); + }; + + return ( + + {/* controlled: */} + 'Temperature range'} + getAriaValueText={valuetext} + min={0} + max={100} + /> + {/* uncontrolled: */} + 'Temperature range'} + getAriaValueText={valuetext} + min={0} + max={100} + /> + + ); +} + +function valuetext(value) { + return `${value}Β°C`; +} + const blue = { 100: '#DAECFF', 200: '#99CCF3', @@ -110,37 +144,3 @@ const StyledSlider = styled(Slider)( } `, ); - -function valuetext(value) { - return `${value}Β°C`; -} - -export default function RangeSlider() { - const [value, setValue] = React.useState([20, 37]); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - {/* controlled: */} - 'Temperature range'} - getAriaValueText={valuetext} - min={0} - max={100} - /> - {/* uncontrolled: */} - 'Temperature range'} - getAriaValueText={valuetext} - min={0} - max={100} - /> - - ); -} diff --git a/docs/data/base/components/slider/RangeSlider.tsx b/docs/data/base/components/slider/RangeSlider.tsx index 95f422643a972c..d93d67ca7f3b76 100644 --- a/docs/data/base/components/slider/RangeSlider.tsx +++ b/docs/data/base/components/slider/RangeSlider.tsx @@ -2,6 +2,40 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; import Slider, { sliderClasses } from '@mui/base/Slider'; +export default function RangeSlider() { + const [value, setValue] = React.useState([20, 37]); + + const handleChange = (event: Event, newValue: number | number[]) => { + setValue(newValue as number[]); + }; + + return ( + + {/* controlled: */} + 'Temperature range'} + getAriaValueText={valuetext} + min={0} + max={100} + /> + {/* uncontrolled: */} + 'Temperature range'} + getAriaValueText={valuetext} + min={0} + max={100} + /> + + ); +} + +function valuetext(value: number) { + return `${value}Β°C`; +} + const blue = { 100: '#DAECFF', 200: '#99CCF3', @@ -110,37 +144,3 @@ const StyledSlider = styled(Slider)( } `, ); - -function valuetext(value: number) { - return `${value}Β°C`; -} - -export default function RangeSlider() { - const [value, setValue] = React.useState([20, 37]); - - const handleChange = (event: Event, newValue: number | number[]) => { - setValue(newValue as number[]); - }; - - return ( - - {/* controlled: */} - 'Temperature range'} - getAriaValueText={valuetext} - min={0} - max={100} - /> - {/* uncontrolled: */} - 'Temperature range'} - getAriaValueText={valuetext} - min={0} - max={100} - /> - - ); -} diff --git a/docs/data/base/components/slider/UnstyledSlider.js b/docs/data/base/components/slider/UnstyledSlider.js index 6176202c89455a..55b5eea3ed73c7 100644 --- a/docs/data/base/components/slider/UnstyledSlider.js +++ b/docs/data/base/components/slider/UnstyledSlider.js @@ -2,6 +2,15 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; import Slider, { sliderClasses } from '@mui/base/Slider'; +export default function UnstyledSlider() { + return ( + + + + + ); +} + const blue = { 100: '#DAECFF', 200: '#99CCF3', @@ -95,12 +104,3 @@ const StyledSlider = styled(Slider)( } `, ); - -export default function UnstyledSlider() { - return ( - - - - - ); -} diff --git a/docs/data/base/components/slider/UnstyledSlider.tsx b/docs/data/base/components/slider/UnstyledSlider.tsx index 6176202c89455a..55b5eea3ed73c7 100644 --- a/docs/data/base/components/slider/UnstyledSlider.tsx +++ b/docs/data/base/components/slider/UnstyledSlider.tsx @@ -2,6 +2,15 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; import Slider, { sliderClasses } from '@mui/base/Slider'; +export default function UnstyledSlider() { + return ( + + + + + ); +} + const blue = { 100: '#DAECFF', 200: '#99CCF3', @@ -95,12 +104,3 @@ const StyledSlider = styled(Slider)( } `, ); - -export default function UnstyledSlider() { - return ( - - - - - ); -} diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction.js b/docs/data/base/components/slider/UnstyledSliderIntroduction.js index 2b502de28bd01a..b415218cb94e0f 100644 --- a/docs/data/base/components/slider/UnstyledSliderIntroduction.js +++ b/docs/data/base/components/slider/UnstyledSliderIntroduction.js @@ -2,6 +2,15 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; import Slider, { sliderClasses } from '@mui/base/Slider'; +export default function UnstyledSlider() { + return ( + + + + + ); +} + const blue = { 100: '#DAECFF', 200: '#99CCF3', @@ -95,12 +104,3 @@ const StyledSlider = styled(Slider)( } `, ); - -export default function UnstyledSlider() { - return ( - - - - - ); -} diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction.tsx index 2b502de28bd01a..b415218cb94e0f 100644 --- a/docs/data/base/components/slider/UnstyledSliderIntroduction.tsx +++ b/docs/data/base/components/slider/UnstyledSliderIntroduction.tsx @@ -2,6 +2,15 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; import Slider, { sliderClasses } from '@mui/base/Slider'; +export default function UnstyledSlider() { + return ( + + + + + ); +} + const blue = { 100: '#DAECFF', 200: '#99CCF3', @@ -95,12 +104,3 @@ const StyledSlider = styled(Slider)( } `, ); - -export default function UnstyledSlider() { - return ( - - - - - ); -} From 3d618c490990d36f69e0c3988ab68bb4359b026e Mon Sep 17 00:00:00 2001 From: Varun Mulay <35381801+varunmulay22@users.noreply.github.com> Date: Fri, 28 Apr 2023 15:19:25 +0530 Subject: [PATCH 12/70] [docs][base] Move styles to the bottom of demos code for `InputUnstyled` (#36724) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: MichaΕ‚ Dudak --- .../base/components/input/InputAdornments.js | 158 +++++++++--------- .../base/components/input/InputAdornments.tsx | 156 ++++++++--------- .../base/components/input/InputMultiline.js | 32 ++-- .../base/components/input/InputMultiline.tsx | 38 ++--- .../input/InputMultilineAutosize.js | 32 ++-- .../input/InputMultilineAutosize.tsx | 38 ++--- .../components/input/UnstyledInputBasic.js | 16 +- .../components/input/UnstyledInputBasic.tsx | 22 +-- .../input/UnstyledInputIntroduction.js | 16 +- .../input/UnstyledInputIntroduction.tsx | 22 +-- docs/data/base/components/input/UseInput.js | 38 ++--- docs/data/base/components/input/UseInput.tsx | 44 ++--- 12 files changed, 306 insertions(+), 306 deletions(-) diff --git a/docs/data/base/components/input/InputAdornments.js b/docs/data/base/components/input/InputAdornments.js index 694f34ba264a14..71e3963941b019 100644 --- a/docs/data/base/components/input/InputAdornments.js +++ b/docs/data/base/components/input/InputAdornments.js @@ -7,6 +7,85 @@ import Visibility from '@mui/icons-material/Visibility'; import VisibilityOff from '@mui/icons-material/VisibilityOff'; import { styled } from '@mui/system'; +const CustomInput = React.forwardRef(function CustomInput(props, ref) { + const { slots, ...other } = props; + return ( + + ); +}); + +CustomInput.propTypes = { + /** + * The components used for each slot inside the InputBase. + * Either a string to use a HTML element or a component. + * @default {} + */ + slots: PropTypes.shape({ + input: PropTypes.elementType, + root: PropTypes.elementType, + textarea: PropTypes.elementType, + }), +}; + +export default function InputAdornments() { + const [values, setValues] = React.useState({ + amount: '', + password: '', + weight: '', + weightRange: '', + showPassword: false, + }); + + const handleChange = (prop) => (event) => { + setValues({ ...values, [prop]: event.target.value }); + }; + + const handleClickShowPassword = () => { + setValues({ + ...values, + showPassword: !values.showPassword, + }); + }; + + const handleMouseDownPassword = (event) => { + event.preventDefault(); + }; + + return ( + * + *': { ml: 1 } }}> + kg} + /> + + + {values.showPassword ? : } + + + } + /> + + ); +} + const blue = { 100: '#DAECFF', 200: '#80BFFF', @@ -92,82 +171,3 @@ const InputAdornment = styled('div')` align-items: center; justify-content: center; `; - -const CustomInput = React.forwardRef(function CustomInput(props, ref) { - const { slots, ...other } = props; - return ( - - ); -}); - -CustomInput.propTypes = { - /** - * The components used for each slot inside the InputBase. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots: PropTypes.shape({ - input: PropTypes.elementType, - root: PropTypes.elementType, - textarea: PropTypes.elementType, - }), -}; - -export default function InputAdornments() { - const [values, setValues] = React.useState({ - amount: '', - password: '', - weight: '', - weightRange: '', - showPassword: false, - }); - - const handleChange = (prop) => (event) => { - setValues({ ...values, [prop]: event.target.value }); - }; - - const handleClickShowPassword = () => { - setValues({ - ...values, - showPassword: !values.showPassword, - }); - }; - - const handleMouseDownPassword = (event) => { - event.preventDefault(); - }; - - return ( - * + *': { ml: 1 } }}> - kg} - /> - - - {values.showPassword ? : } - - - } - /> - - ); -} diff --git a/docs/data/base/components/input/InputAdornments.tsx b/docs/data/base/components/input/InputAdornments.tsx index 481c15387445f3..808931cc4476d6 100644 --- a/docs/data/base/components/input/InputAdornments.tsx +++ b/docs/data/base/components/input/InputAdornments.tsx @@ -6,6 +6,84 @@ import Visibility from '@mui/icons-material/Visibility'; import VisibilityOff from '@mui/icons-material/VisibilityOff'; import { styled } from '@mui/system'; +const CustomInput = React.forwardRef(function CustomInput( + props: InputProps, + ref: React.ForwardedRef, +) { + const { slots, ...other } = props; + return ( + + ); +}); + +interface State { + amount: string; + password: string; + weight: string; + weightRange: string; + showPassword: boolean; +} + +export default function InputAdornments() { + const [values, setValues] = React.useState({ + amount: '', + password: '', + weight: '', + weightRange: '', + showPassword: false, + }); + + const handleChange = + (prop: keyof State) => (event: React.ChangeEvent) => { + setValues({ ...values, [prop]: event.target.value }); + }; + + const handleClickShowPassword = () => { + setValues({ + ...values, + showPassword: !values.showPassword, + }); + }; + + const handleMouseDownPassword = (event: React.MouseEvent) => { + event.preventDefault(); + }; + + return ( + * + *': { ml: 1 } }}> + kg} + /> + + + {values.showPassword ? : } + + + } + /> + + ); +} + const blue = { 100: '#DAECFF', 200: '#80BFFF', @@ -91,81 +169,3 @@ const InputAdornment = styled('div')` align-items: center; justify-content: center; `; - -const CustomInput = React.forwardRef(function CustomInput( - props: InputProps, - ref: React.ForwardedRef, -) { - const { slots, ...other } = props; - return ( - - ); -}); - -interface State { - amount: string; - password: string; - weight: string; - weightRange: string; - showPassword: boolean; -} - -export default function InputAdornments() { - const [values, setValues] = React.useState({ - amount: '', - password: '', - weight: '', - weightRange: '', - showPassword: false, - }); - - const handleChange = - (prop: keyof State) => (event: React.ChangeEvent) => { - setValues({ ...values, [prop]: event.target.value }); - }; - - const handleClickShowPassword = () => { - setValues({ - ...values, - showPassword: !values.showPassword, - }); - }; - - const handleMouseDownPassword = (event: React.MouseEvent) => { - event.preventDefault(); - }; - - return ( - * + *': { ml: 1 } }}> - kg} - /> - - - {values.showPassword ? : } - - - } - /> - - ); -} diff --git a/docs/data/base/components/input/InputMultiline.js b/docs/data/base/components/input/InputMultiline.js index d0ddeed1ed1f05..12af43e924dfe3 100644 --- a/docs/data/base/components/input/InputMultiline.js +++ b/docs/data/base/components/input/InputMultiline.js @@ -2,6 +2,22 @@ import * as React from 'react'; import Input from '@mui/base/Input'; import { styled } from '@mui/system'; +const CustomInput = React.forwardRef(function CustomInput(props, ref) { + return ( + + ); +}); + +export default function InputMultiline() { + return ( + + ); +} + const blue = { 100: '#DAECFF', 200: '#80BFFF', @@ -85,19 +101,3 @@ const StyledTextareaElement = styled('textarea', { } `, ); - -const CustomInput = React.forwardRef(function CustomInput(props, ref) { - return ( - - ); -}); - -export default function UnstyledInputBasic() { - return ( - - ); -} diff --git a/docs/data/base/components/input/InputMultiline.tsx b/docs/data/base/components/input/InputMultiline.tsx index bfd960e0514ac1..d3a8e784bb388e 100644 --- a/docs/data/base/components/input/InputMultiline.tsx +++ b/docs/data/base/components/input/InputMultiline.tsx @@ -2,6 +2,25 @@ import * as React from 'react'; import Input, { InputProps } from '@mui/base/Input'; import { styled } from '@mui/system'; +const CustomInput = React.forwardRef(function CustomInput( + props: InputProps, + ref: React.ForwardedRef, +) { + return ( + + ); +}); + +export default function InputMultiline() { + return ( + + ); +} + const blue = { 100: '#DAECFF', 200: '#80BFFF', @@ -85,22 +104,3 @@ const StyledTextareaElement = styled('textarea', { } `, ); - -const CustomInput = React.forwardRef(function CustomInput( - props: InputProps, - ref: React.ForwardedRef, -) { - return ( - - ); -}); - -export default function UnstyledInputBasic() { - return ( - - ); -} diff --git a/docs/data/base/components/input/InputMultilineAutosize.js b/docs/data/base/components/input/InputMultilineAutosize.js index 6f52efe5e6d270..475b1ee89d7c98 100644 --- a/docs/data/base/components/input/InputMultilineAutosize.js +++ b/docs/data/base/components/input/InputMultilineAutosize.js @@ -3,6 +3,22 @@ import Input from '@mui/base/Input'; import TextareaAutosize from '@mui/base/TextareaAutosize'; import { styled } from '@mui/system'; +const CustomInput = React.forwardRef(function CustomInput(props, ref) { + return ( + + ); +}); + +export default function InputMultilineAutosize() { + return ( + + ); +} + const blue = { 100: '#DAECFF', 200: '#80BFFF', @@ -83,19 +99,3 @@ const StyledTextareaElement = styled(TextareaAutosize)( } `, ); - -const CustomInput = React.forwardRef(function CustomInput(props, ref) { - return ( - - ); -}); - -export default function UnstyledInputBasic() { - return ( - - ); -} diff --git a/docs/data/base/components/input/InputMultilineAutosize.tsx b/docs/data/base/components/input/InputMultilineAutosize.tsx index f23e5e8f505f4a..a5639eaabf1996 100644 --- a/docs/data/base/components/input/InputMultilineAutosize.tsx +++ b/docs/data/base/components/input/InputMultilineAutosize.tsx @@ -3,6 +3,25 @@ import Input, { InputProps } from '@mui/base/Input'; import TextareaAutosize from '@mui/base/TextareaAutosize'; import { styled } from '@mui/system'; +const CustomInput = React.forwardRef(function CustomInput( + props: InputProps, + ref: React.ForwardedRef, +) { + return ( + + ); +}); + +export default function InputMultilineAutosize() { + return ( + + ); +} + const blue = { 100: '#DAECFF', 200: '#80BFFF', @@ -83,22 +102,3 @@ const StyledTextareaElement = styled(TextareaAutosize)( } `, ); - -const CustomInput = React.forwardRef(function CustomInput( - props: InputProps, - ref: React.ForwardedRef, -) { - return ( - - ); -}); - -export default function UnstyledInputBasic() { - return ( - - ); -} diff --git a/docs/data/base/components/input/UnstyledInputBasic.js b/docs/data/base/components/input/UnstyledInputBasic.js index 40e5e3b44560a7..bdcfaa32765aa2 100644 --- a/docs/data/base/components/input/UnstyledInputBasic.js +++ b/docs/data/base/components/input/UnstyledInputBasic.js @@ -2,6 +2,14 @@ import * as React from 'react'; import Input from '@mui/base/Input'; import { styled } from '@mui/system'; +const CustomInput = React.forwardRef(function CustomInput(props, ref) { + return ; +}); + +export default function UnstyledInputBasic() { + return ; +} + const blue = { 100: '#DAECFF', 200: '#80BFFF', @@ -52,11 +60,3 @@ const StyledInputElement = styled('input')( } `, ); - -const CustomInput = React.forwardRef(function CustomInput(props, ref) { - return ; -}); - -export default function UnstyledInputBasic() { - return ; -} diff --git a/docs/data/base/components/input/UnstyledInputBasic.tsx b/docs/data/base/components/input/UnstyledInputBasic.tsx index 375e4cc049d325..6855b5801e13ac 100644 --- a/docs/data/base/components/input/UnstyledInputBasic.tsx +++ b/docs/data/base/components/input/UnstyledInputBasic.tsx @@ -2,6 +2,17 @@ import * as React from 'react'; import Input, { InputProps } from '@mui/base/Input'; import { styled } from '@mui/system'; +const CustomInput = React.forwardRef(function CustomInput( + props: InputProps, + ref: React.ForwardedRef, +) { + return ; +}); + +export default function UnstyledInputBasic() { + return ; +} + const blue = { 100: '#DAECFF', 200: '#80BFFF', @@ -52,14 +63,3 @@ const StyledInputElement = styled('input')( } `, ); - -const CustomInput = React.forwardRef(function CustomInput( - props: InputProps, - ref: React.ForwardedRef, -) { - return ; -}); - -export default function UnstyledInputBasic() { - return ; -} diff --git a/docs/data/base/components/input/UnstyledInputIntroduction.js b/docs/data/base/components/input/UnstyledInputIntroduction.js index 72cb1d0add4eb2..a4ac1068eb6c67 100644 --- a/docs/data/base/components/input/UnstyledInputIntroduction.js +++ b/docs/data/base/components/input/UnstyledInputIntroduction.js @@ -2,6 +2,14 @@ import * as React from 'react'; import Input from '@mui/base/Input'; import { styled } from '@mui/system'; +const CustomInput = React.forwardRef(function CustomInput(props, ref) { + return ; +}); + +export default function UnstyledInputIntroduction() { + return ; +} + const blue = { 100: '#DAECFF', 200: '#b6daff', @@ -52,11 +60,3 @@ const StyledInputElement = styled('input')( } `, ); - -const CustomInput = React.forwardRef(function CustomInput(props, ref) { - return ; -}); - -export default function UnstyledInputIntroduction() { - return ; -} diff --git a/docs/data/base/components/input/UnstyledInputIntroduction.tsx b/docs/data/base/components/input/UnstyledInputIntroduction.tsx index a69ce7d4a30120..5faf387f0a3d09 100644 --- a/docs/data/base/components/input/UnstyledInputIntroduction.tsx +++ b/docs/data/base/components/input/UnstyledInputIntroduction.tsx @@ -2,6 +2,17 @@ import * as React from 'react'; import Input from '@mui/base/Input'; import { styled } from '@mui/system'; +const CustomInput = React.forwardRef(function CustomInput( + props: React.InputHTMLAttributes, + ref: React.ForwardedRef, +) { + return ; +}); + +export default function UnstyledInputIntroduction() { + return ; +} + const blue = { 100: '#DAECFF', 200: '#b6daff', @@ -52,14 +63,3 @@ const StyledInputElement = styled('input')( } `, ); - -const CustomInput = React.forwardRef(function CustomInput( - props: React.InputHTMLAttributes, - ref: React.ForwardedRef, -) { - return ; -}); - -export default function UnstyledInputIntroduction() { - return ; -} diff --git a/docs/data/base/components/input/UseInput.js b/docs/data/base/components/input/UseInput.js index 692fcd899be9c9..1fbc559f906243 100644 --- a/docs/data/base/components/input/UseInput.js +++ b/docs/data/base/components/input/UseInput.js @@ -3,6 +3,25 @@ import useInput from '@mui/base/useInput'; import { styled } from '@mui/system'; import { unstable_useForkRef as useForkRef } from '@mui/utils'; +const CustomInput = React.forwardRef(function CustomInput(props, ref) { + const { getRootProps, getInputProps } = useInput(props); + + const inputProps = getInputProps(); + + // Make sure that both the forwarded ref and the ref returned from the getInputProps are applied on the input element + inputProps.ref = useForkRef(inputProps.ref, ref); + + return ( +
+ +
+ ); +}); + +export default function UseInput() { + return ; +} + const blue = { 100: '#DAECFF', 200: '#80BFFF', @@ -53,22 +72,3 @@ const StyledInputElement = styled('input')( } `, ); - -const CustomInput = React.forwardRef(function CustomInput(props, ref) { - const { getRootProps, getInputProps } = useInput(props); - - const inputProps = getInputProps(); - - // Make sure that both the forwarded ref and the ref returned from the getInputProps are applied on the input element - inputProps.ref = useForkRef(inputProps.ref, ref); - - return ( -
- -
- ); -}); - -export default function UseInput() { - return ; -} diff --git a/docs/data/base/components/input/UseInput.tsx b/docs/data/base/components/input/UseInput.tsx index f65a8bf9898950..7159ce62bf5789 100644 --- a/docs/data/base/components/input/UseInput.tsx +++ b/docs/data/base/components/input/UseInput.tsx @@ -3,6 +3,28 @@ import useInput from '@mui/base/useInput'; import { styled } from '@mui/system'; import { unstable_useForkRef as useForkRef } from '@mui/utils'; +const CustomInput = React.forwardRef(function CustomInput( + props: React.InputHTMLAttributes, + ref: React.ForwardedRef, +) { + const { getRootProps, getInputProps } = useInput(props); + + const inputProps = getInputProps(); + + // Make sure that both the forwarded ref and the ref returned from the getInputProps are applied on the input element + inputProps.ref = useForkRef(inputProps.ref, ref); + + return ( +
+ +
+ ); +}); + +export default function UseInput() { + return ; +} + const blue = { 100: '#DAECFF', 200: '#80BFFF', @@ -53,25 +75,3 @@ const StyledInputElement = styled('input')( } `, ); - -const CustomInput = React.forwardRef(function CustomInput( - props: React.InputHTMLAttributes, - ref: React.ForwardedRef, -) { - const { getRootProps, getInputProps } = useInput(props); - - const inputProps = getInputProps(); - - // Make sure that both the forwarded ref and the ref returned from the getInputProps are applied on the input element - inputProps.ref = useForkRef(inputProps.ref, ref); - - return ( -
- -
- ); -}); - -export default function UseInput() { - return ; -} From a050aabee53f164f908dabdd5587fb46f0c905ae Mon Sep 17 00:00:00 2001 From: DavidBoyer11 <82344556+DavidBoyer11@users.noreply.github.com> Date: Fri, 28 Apr 2023 06:08:46 -0500 Subject: [PATCH 13/70] [ButtonGroup] Should not retain divider color when it is disabled and variant is `text` (#36967) Co-authored-by: FeCurtain Co-authored-by: ZeeshanTamboli --- .../src/ButtonGroup/ButtonGroup.js | 6 +++ .../ButtonGroup/DisabledButtonGroup.js | 45 +++++++++++++++++++ 2 files changed, 51 insertions(+) create mode 100644 test/regressions/fixtures/ButtonGroup/DisabledButtonGroup.js diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index 22b335c5c90205..dcb85716b68e47 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -114,6 +114,9 @@ const ButtonGroupRoot = styled('div', { : `1px solid ${ theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' }`, + [`&.${buttonGroupClasses.disabled}`]: { + borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + }, }), ...(ownerState.variant === 'text' && ownerState.orientation === 'vertical' && { @@ -122,6 +125,9 @@ const ButtonGroupRoot = styled('div', { : `1px solid ${ theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' }`, + [`&.${buttonGroupClasses.disabled}`]: { + borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + }, }), ...(ownerState.variant === 'text' && ownerState.color !== 'inherit' && { diff --git a/test/regressions/fixtures/ButtonGroup/DisabledButtonGroup.js b/test/regressions/fixtures/ButtonGroup/DisabledButtonGroup.js new file mode 100644 index 00000000000000..224d3ccdd2ce45 --- /dev/null +++ b/test/regressions/fixtures/ButtonGroup/DisabledButtonGroup.js @@ -0,0 +1,45 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; +import Box from '@mui/material/Box'; +import ButtonGroup from '@mui/material/ButtonGroup'; + +const buttons = [ + , + , + , +]; + +export default function DisabledButtonGroup() { + return ( + *': { + m: 1, + }, + }} + > + {/* variant="text" */} + + {buttons} + + {/* variant="text" */} + + {buttons} + + + ); +} From 48a016981064fccf9768f68decc6dafee34a849f Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 28 Apr 2023 16:40:10 +0530 Subject: [PATCH 14/70] Bump babel to ^7.21.4 (#36815) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: ZeeshanTamboli --- .../customization/palette/CustomColor.tsx | 2 +- docs/data/styles/basics/AdaptingHOC.tsx | 4 +- docs/package.json | 4 +- docs/scripts/formattedTSDemos.js | 1 + package.json | 16 +- packages/api-docs-builder/package.json | 2 +- packages/mui-codemod/package.json | 4 +- packages/mui-utils/package.json | 2 +- packages/typescript-to-proptypes/package.json | 6 +- yarn.lock | 482 +++++++++--------- 10 files changed, 264 insertions(+), 259 deletions(-) diff --git a/docs/data/material/customization/palette/CustomColor.tsx b/docs/data/material/customization/palette/CustomColor.tsx index 61447a28cf34c3..47a0c8bbff768b 100644 --- a/docs/data/material/customization/palette/CustomColor.tsx +++ b/docs/data/material/customization/palette/CustomColor.tsx @@ -22,7 +22,7 @@ declare module '@mui/material/styles' { } } -// Update the Button's color prop options +// @babel-ignore-comment-in-output Update the Button's color prop options declare module '@mui/material/Button' { interface ButtonPropsColorOverrides { neutral: true; diff --git a/docs/data/styles/basics/AdaptingHOC.tsx b/docs/data/styles/basics/AdaptingHOC.tsx index ac19f1c174af6b..9c8a039cdb28c5 100644 --- a/docs/data/styles/basics/AdaptingHOC.tsx +++ b/docs/data/styles/basics/AdaptingHOC.tsx @@ -24,8 +24,8 @@ const styles = { interface MyButtonRawProps { color: 'red' | 'blue'; } -// These are the props available inside MyButtonRaw -// They're different from MyButtonRawProps which are the props available for dynamic styling. +// @babel-ignore-comment-in-output These are the props available inside MyButtonRaw +// @babel-ignore-comment-in-output They're different from MyButtonRawProps which are the props available for dynamic styling. type MyButtonRawInnerProps = MyButtonRawProps & WithStyles; function MyButtonRaw( diff --git a/docs/package.json b/docs/package.json index 7c7ecfa7b018fa..f15cb40c898841 100644 --- a/docs/package.json +++ b/docs/package.json @@ -20,7 +20,7 @@ "link-check": "node ./scripts/reportBrokenLinks.js" }, "dependencies": { - "@babel/core": "^7.21.3", + "@babel/core": "^7.21.4", "@babel/plugin-transform-object-assign": "^7.18.6", "@babel/runtime-corejs2": "^7.21.0", "@docsearch/react": "^3.3.3", @@ -121,7 +121,7 @@ }, "devDependencies": { "@babel/plugin-transform-react-constant-elements": "^7.21.3", - "@babel/preset-typescript": "^7.21.0", + "@babel/preset-typescript": "^7.21.4", "@types/marked": "^4.0.8", "@types/recharts": "^2.0.0", "cross-fetch": "^3.1.5", diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js index cdce47d9fa36b1..17e2f55f913162 100644 --- a/docs/scripts/formattedTSDemos.js +++ b/docs/scripts/formattedTSDemos.js @@ -27,6 +27,7 @@ const babelConfig = { generatorOpts: { retainLines: true }, babelrc: false, configFile: false, + shouldPrintComment: (comment) => !comment.startsWith(' @babel-ignore-comment-in-output'), }; const workspaceRoot = path.join(__dirname, '../../'); diff --git a/package.json b/package.json index 8b0ae93b96a767..89d22281fe7be2 100644 --- a/package.json +++ b/package.json @@ -74,14 +74,14 @@ "devDependencies": { "@argos-ci/core": "^0.8.0", "@babel/cli": "^7.21.0", - "@babel/core": "^7.21.3", + "@babel/core": "^7.21.4", "@babel/node": "^7.20.7", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.20.7", "@babel/plugin-transform-object-assign": "^7.18.6", "@babel/plugin-transform-react-constant-elements": "^7.21.3", - "@babel/plugin-transform-runtime": "^7.21.0", - "@babel/preset-env": "^7.20.2", + "@babel/plugin-transform-runtime": "^7.21.4", + "@babel/preset-env": "^7.21.4", "@babel/preset-react": "^7.18.6", "@babel/register": "^7.21.0", "@emotion/react": "^11.10.6", @@ -208,18 +208,18 @@ "yarn-deduplicate": "^3.1.0" }, "resolutions": { - "**/@babel/core": "^7.21.3", - "**/@babel/code-frame": "^7.18.6", + "**/@babel/core": "^7.21.4", + "**/@babel/code-frame": "^7.21.4", "**/@babel/plugin-proposal-class-properties": "^7.18.6", "**/@babel/plugin-proposal-object-rest-spread": "^7.20.7", "**/@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", "**/@babel/plugin-proposal-numeric-separator": "^7.18.6", "**/@babel/plugin-proposal-optional-chaining": "^7.21.0", "**/@babel/plugin-transform-destructuring": "npm:@minh.nguyen/plugin-transform-destructuring@^7.5.2", - "**/@babel/plugin-transform-runtime": "^7.21.0", - "**/@babel/preset-env": "^7.20.2", + "**/@babel/plugin-transform-runtime": "^7.21.4", + "**/@babel/preset-env": "^7.21.4", "**/@babel/preset-react": "^7.18.6", - "**/@babel/preset-typescript": "^7.21.0", + "**/@babel/preset-typescript": "^7.21.4", "**/@babel/runtime": "^7.21.0", "**/@definitelytyped/header-parser": "^0.0.159", "**/@definitelytyped/typescript-versions": "^0.0.159", diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json index 9f7ffb08abf783..8b75c8e01e1ecd 100644 --- a/packages/api-docs-builder/package.json +++ b/packages/api-docs-builder/package.json @@ -7,7 +7,7 @@ "typescript": "tsc -p tsconfig.json" }, "dependencies": { - "@babel/core": "^7.21.3", + "@babel/core": "^7.21.4", "@mui-internal/docs-utilities": "^1.0.0", "@mui/markdown": "^5.0.0", "ast-types": "^0.14.2", diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json index 91e87c7722dc9e..ff5c10939b8309 100644 --- a/packages/mui-codemod/package.json +++ b/packages/mui-codemod/package.json @@ -30,9 +30,9 @@ "url": "https://opencollective.com/mui" }, "dependencies": { - "@babel/core": "^7.21.3", + "@babel/core": "^7.21.4", "@babel/runtime": "^7.21.0", - "@babel/traverse": "^7.21.3", + "@babel/traverse": "^7.21.4", "jscodeshift": "^0.13.1", "jscodeshift-add-imports": "^1.0.10", "yargs": "^17.7.1" diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json index d4e338d9b953f3..77d5132d685bd2 100644 --- a/packages/mui-utils/package.json +++ b/packages/mui-utils/package.json @@ -49,7 +49,7 @@ "react-is": "^18.2.0" }, "devDependencies": { - "@babel/helper-module-imports": "^7.18.6", + "@babel/helper-module-imports": "^7.21.4", "@types/babel-plugin-macros": "^3.1.0", "babel-plugin-macros": "^3.1.0", "babel-plugin-tester": "^11.0.4" diff --git a/packages/typescript-to-proptypes/package.json b/packages/typescript-to-proptypes/package.json index 207703a98befa3..7f601d307fe82d 100644 --- a/packages/typescript-to-proptypes/package.json +++ b/packages/typescript-to-proptypes/package.json @@ -33,10 +33,10 @@ "rimraf": "^3.0.2" }, "dependencies": { - "@babel/core": "^7.21.3", + "@babel/core": "^7.21.4", "@babel/plugin-syntax-class-properties": "^7.12.13", - "@babel/plugin-syntax-jsx": "^7.18.6", - "@babel/types": "^7.21.3", + "@babel/plugin-syntax-jsx": "^7.21.4", + "@babel/types": "^7.21.4", "doctrine": "^3.0.0", "lodash": "^4.17.21", "typescript": "^4.9.5", diff --git a/yarn.lock b/yarn.lock index 9234f432fc1a47..50bacc6a68d77f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -167,45 +167,45 @@ "@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents.3" chokidar "^3.4.0" -"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.18.6": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a" - integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q== +"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.21.4": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.21.4.tgz#d0fa9e4413aca81f2b23b9442797bda1826edb39" + integrity sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g== dependencies: "@babel/highlight" "^7.18.6" -"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.1", "@babel/compat-data@^7.20.5": - version "7.20.10" - resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.10.tgz#9d92fa81b87542fff50e848ed585b4212c1d34ec" - integrity sha512-sEnuDPpOJR/fcafHMjpcpGN5M2jbUGUHwmuWKM/YdPzeEDJg8bgmbcWQFUfE32MQjti1koACvoPVsDe8Uq+idg== +"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.21.4": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.4.tgz#457ffe647c480dff59c2be092fc3acf71195c87f" + integrity sha512-/DYyDpeCfaVinT40FPGdkkb+lYSKvsVuMjDAG7jPOWWiM1ibOaB9CXJAlc4d1QpP/U2q2P9jbrSlClKSErd55g== -"@babel/core@^7.12.3", "@babel/core@^7.13.16", "@babel/core@^7.17.9", "@babel/core@^7.21.3", "@babel/core@^7.7.5": - version "7.21.3" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.3.tgz#cf1c877284a469da5d1ce1d1e53665253fae712e" - integrity sha512-qIJONzoa/qiHghnm0l1n4i/6IIziDpzqc36FBs4pzMhDUraHqponwJLiAKm1hGLP3OSB/TVNz6rMwVGpwxxySw== +"@babel/core@^7.12.3", "@babel/core@^7.13.16", "@babel/core@^7.17.9", "@babel/core@^7.21.4", "@babel/core@^7.7.5": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.4.tgz#c6dc73242507b8e2a27fd13a9c1814f9fa34a659" + integrity sha512-qt/YV149Jman/6AfmlxJ04LMIu8bMoyl3RB91yTFrxQmgbrSvQMy7cI8Q62FHx1t8wJ8B5fu0UDoLwHAhUo1QA== dependencies: "@ampproject/remapping" "^2.2.0" - "@babel/code-frame" "^7.18.6" - "@babel/generator" "^7.21.3" - "@babel/helper-compilation-targets" "^7.20.7" + "@babel/code-frame" "^7.21.4" + "@babel/generator" "^7.21.4" + "@babel/helper-compilation-targets" "^7.21.4" "@babel/helper-module-transforms" "^7.21.2" "@babel/helpers" "^7.21.0" - "@babel/parser" "^7.21.3" + "@babel/parser" "^7.21.4" "@babel/template" "^7.20.7" - "@babel/traverse" "^7.21.3" - "@babel/types" "^7.21.3" + "@babel/traverse" "^7.21.4" + "@babel/types" "^7.21.4" convert-source-map "^1.7.0" debug "^4.1.0" gensync "^1.0.0-beta.2" json5 "^2.2.2" semver "^6.3.0" -"@babel/generator@^7.12.11", "@babel/generator@^7.21.3", "@babel/generator@^7.6.2": - version "7.21.3" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.3.tgz#232359d0874b392df04045d72ce2fd9bb5045fce" - integrity sha512-QS3iR1GYC/YGUnW7IdggFeN5c1poPUurnGttOV/bZgPGV+izC/D8HnD6DLwod0fsatNyVn1G3EVWMYIF0nHbeA== +"@babel/generator@^7.12.11", "@babel/generator@^7.21.4", "@babel/generator@^7.6.2": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.4.tgz#64a94b7448989f421f919d5239ef553b37bb26bc" + integrity sha512-NieM3pVIYW2SwGzKoqfPrQsf4xGs9M9AIG3ThppsSRmO+m7eQhmI6amajKMUeIO37wFfsvnvcxQFx6x6iqxDnA== dependencies: - "@babel/types" "^7.21.3" + "@babel/types" "^7.21.4" "@jridgewell/gen-mapping" "^0.3.2" "@jridgewell/trace-mapping" "^0.3.17" jsesc "^2.5.1" @@ -225,13 +225,13 @@ "@babel/helper-explode-assignable-expression" "^7.18.6" "@babel/types" "^7.18.9" -"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.0", "@babel/helper-compilation-targets@^7.20.7": - version "7.20.7" - resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz#a6cd33e93629f5eb473b021aac05df62c4cd09bb" - integrity sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ== +"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.21.4": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.4.tgz#770cd1ce0889097ceacb99418ee6934ef0572656" + integrity sha512-Fa0tTuOXZ1iL8IeDFUWCzjZcn+sJGd9RZdH9esYVjEejGmzf+FFYQpMi/kZUk2kPy/q1H3/GPw7np8qar/stfg== dependencies: - "@babel/compat-data" "^7.20.5" - "@babel/helper-validator-option" "^7.18.6" + "@babel/compat-data" "^7.21.4" + "@babel/helper-validator-option" "^7.21.0" browserslist "^4.21.3" lru-cache "^5.1.1" semver "^6.3.0" @@ -250,13 +250,13 @@ "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0" "@babel/helper-split-export-declaration" "^7.18.6" -"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.19.0": - version "7.19.0" - resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.19.0.tgz#7976aca61c0984202baca73d84e2337a5424a41b" - integrity sha512-htnV+mHX32DF81amCDrwIDr8nrp1PTm+3wfBN9/v8QJOLEioOCOG7qNyq0nHeFiWbT3Eb7gsPwEmV64UCQ1jzw== +"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.20.5": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.4.tgz#40411a8ab134258ad2cf3a3d987ec6aa0723cee5" + integrity sha512-M00OuhU+0GyZ5iBBN9czjugzWrEq2vDpf/zCYHxxf93ul/Q5rv+a5h+/+0WnI1AebHNVtl5bFV0qsJoH23DbfA== dependencies: "@babel/helper-annotate-as-pure" "^7.18.6" - regexpu-core "^5.1.0" + regexpu-core "^5.3.1" "@babel/helper-define-polyfill-provider@^0.3.3": version "0.3.3" @@ -304,14 +304,14 @@ dependencies: "@babel/types" "^7.21.0" -"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e" - integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA== +"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.21.4": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af" + integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg== dependencies: - "@babel/types" "^7.18.6" + "@babel/types" "^7.21.4" -"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.19.6", "@babel/helper-module-transforms@^7.21.2": +"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.20.11", "@babel/helper-module-transforms@^7.21.2": version "7.21.2" resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz#160caafa4978ac8c00ac66636cb0fa37b024e2d2" integrity sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ== @@ -337,7 +337,7 @@ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629" integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ== -"@babel/helper-remap-async-to-generator@^7.18.6", "@babel/helper-remap-async-to-generator@^7.18.9": +"@babel/helper-remap-async-to-generator@^7.18.9": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519" integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA== @@ -347,7 +347,7 @@ "@babel/helper-wrap-function" "^7.18.9" "@babel/types" "^7.18.9" -"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.19.1", "@babel/helper-replace-supers@^7.20.7": +"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.20.7": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz#243ecd2724d2071532b2c8ad2f0f9f083bcae331" integrity sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A== @@ -359,14 +359,14 @@ "@babel/traverse" "^7.20.7" "@babel/types" "^7.20.7" -"@babel/helper-simple-access@^7.19.4", "@babel/helper-simple-access@^7.20.2": +"@babel/helper-simple-access@^7.20.2": version "7.20.2" resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz#0ab452687fe0c2cfb1e2b9e0015de07fc2d62dd9" integrity sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA== dependencies: "@babel/types" "^7.20.2" -"@babel/helper-skip-transparent-expression-wrappers@^7.18.9", "@babel/helper-skip-transparent-expression-wrappers@^7.20.0": +"@babel/helper-skip-transparent-expression-wrappers@^7.20.0": version "7.20.0" resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684" integrity sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg== @@ -435,10 +435,10 @@ regenerator-runtime "^0.13.11" v8flags "^3.1.1" -"@babel/parser@^7.1.0", "@babel/parser@^7.13.16", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.21.3", "@babel/parser@^7.8.3": - version "7.21.3" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.3.tgz#1d285d67a19162ff9daa358d4cb41d50c06220b3" - integrity sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ== +"@babel/parser@^7.1.0", "@babel/parser@^7.13.16", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.21.4", "@babel/parser@^7.8.3": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.4.tgz#94003fdfc520bbe2875d4ae557b43ddb6d880f17" + integrity sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw== "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6": version "7.18.6" @@ -447,22 +447,22 @@ dependencies: "@babel/helper-plugin-utils" "^7.18.6" -"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.18.9": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.18.9.tgz#a11af19aa373d68d561f08e0a57242350ed0ec50" - integrity sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg== +"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.20.7": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz#d9c85589258539a22a901033853101a6198d4ef1" + integrity sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ== dependencies: - "@babel/helper-plugin-utils" "^7.18.9" - "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9" - "@babel/plugin-proposal-optional-chaining" "^7.18.9" + "@babel/helper-plugin-utils" "^7.20.2" + "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0" + "@babel/plugin-proposal-optional-chaining" "^7.20.7" -"@babel/plugin-proposal-async-generator-functions@^7.20.1": - version "7.20.1" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.1.tgz#352f02baa5d69f4e7529bdac39aaa02d41146af9" - integrity sha512-Gh5rchzSwE4kC+o/6T8waD0WHEQIsDmjltY8WnWRXHUdH8axZhuH86Ov9M72YhJfDrZseQwuuWaaIT/TmePp3g== +"@babel/plugin-proposal-async-generator-functions@^7.20.7": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz#bfb7276d2d573cb67ba379984a2334e262ba5326" + integrity sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA== dependencies: "@babel/helper-environment-visitor" "^7.18.9" - "@babel/helper-plugin-utils" "^7.19.0" + "@babel/helper-plugin-utils" "^7.20.2" "@babel/helper-remap-async-to-generator" "^7.18.9" "@babel/plugin-syntax-async-generators" "^7.8.4" @@ -474,13 +474,13 @@ "@babel/helper-create-class-features-plugin" "^7.18.6" "@babel/helper-plugin-utils" "^7.18.6" -"@babel/plugin-proposal-class-static-block@^7.18.6": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.6.tgz#8aa81d403ab72d3962fc06c26e222dacfc9b9020" - integrity sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw== +"@babel/plugin-proposal-class-static-block@^7.21.0": + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz#77bdd66fb7b605f3a61302d224bdfacf5547977d" + integrity sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw== dependencies: - "@babel/helper-create-class-features-plugin" "^7.18.6" - "@babel/helper-plugin-utils" "^7.18.6" + "@babel/helper-create-class-features-plugin" "^7.21.0" + "@babel/helper-plugin-utils" "^7.20.2" "@babel/plugin-syntax-class-static-block" "^7.14.5" "@babel/plugin-proposal-dynamic-import@^7.18.6": @@ -507,12 +507,12 @@ "@babel/helper-plugin-utils" "^7.18.6" "@babel/plugin-syntax-json-strings" "^7.8.3" -"@babel/plugin-proposal-logical-assignment-operators@^7.18.9": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.18.9.tgz#8148cbb350483bf6220af06fa6db3690e14b2e23" - integrity sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q== +"@babel/plugin-proposal-logical-assignment-operators@^7.20.7": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz#dfbcaa8f7b4d37b51e8bfb46d94a5aea2bb89d83" + integrity sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug== dependencies: - "@babel/helper-plugin-utils" "^7.18.9" + "@babel/helper-plugin-utils" "^7.20.2" "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4" "@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8", "@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6": @@ -531,7 +531,7 @@ "@babel/helper-plugin-utils" "^7.18.6" "@babel/plugin-syntax-numeric-separator" "^7.10.4" -"@babel/plugin-proposal-object-rest-spread@^7.20.2", "@babel/plugin-proposal-object-rest-spread@^7.20.7": +"@babel/plugin-proposal-object-rest-spread@^7.20.7": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a" integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg== @@ -550,7 +550,7 @@ "@babel/helper-plugin-utils" "^7.18.6" "@babel/plugin-syntax-optional-catch-binding" "^7.8.3" -"@babel/plugin-proposal-optional-chaining@^7.13.12", "@babel/plugin-proposal-optional-chaining@^7.18.9", "@babel/plugin-proposal-optional-chaining@^7.21.0": +"@babel/plugin-proposal-optional-chaining@^7.13.12", "@babel/plugin-proposal-optional-chaining@^7.20.7", "@babel/plugin-proposal-optional-chaining@^7.21.0": version "7.21.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea" integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA== @@ -567,14 +567,14 @@ "@babel/helper-create-class-features-plugin" "^7.18.6" "@babel/helper-plugin-utils" "^7.18.6" -"@babel/plugin-proposal-private-property-in-object@^7.18.6": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz#a64137b232f0aca3733a67eb1a144c192389c503" - integrity sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw== +"@babel/plugin-proposal-private-property-in-object@^7.21.0": + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz#19496bd9883dd83c23c7d7fc45dcd9ad02dfa1dc" + integrity sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw== dependencies: "@babel/helper-annotate-as-pure" "^7.18.6" - "@babel/helper-create-class-features-plugin" "^7.18.6" - "@babel/helper-plugin-utils" "^7.18.6" + "@babel/helper-create-class-features-plugin" "^7.21.0" + "@babel/helper-plugin-utils" "^7.20.2" "@babel/plugin-syntax-private-property-in-object" "^7.14.5" "@babel/plugin-proposal-unicode-property-regex@^7.18.6", "@babel/plugin-proposal-unicode-property-regex@^7.4.4": @@ -641,12 +641,12 @@ dependencies: "@babel/helper-plugin-utils" "^7.8.0" -"@babel/plugin-syntax-jsx@^7.18.6": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0" - integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q== +"@babel/plugin-syntax-jsx@^7.18.6", "@babel/plugin-syntax-jsx@^7.21.4": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.21.4.tgz#f264ed7bf40ffc9ec239edabc17a50c4f5b6fea2" + integrity sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ== dependencies: - "@babel/helper-plugin-utils" "^7.18.6" + "@babel/helper-plugin-utils" "^7.20.2" "@babel/plugin-syntax-logical-assignment-operators@^7.10.4": version "7.10.4" @@ -711,21 +711,21 @@ dependencies: "@babel/helper-plugin-utils" "^7.19.0" -"@babel/plugin-transform-arrow-functions@^7.18.6": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.18.6.tgz#19063fcf8771ec7b31d742339dac62433d0611fe" - integrity sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ== +"@babel/plugin-transform-arrow-functions@^7.20.7": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz#bea332b0e8b2dab3dafe55a163d8227531ab0551" + integrity sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ== dependencies: - "@babel/helper-plugin-utils" "^7.18.6" + "@babel/helper-plugin-utils" "^7.20.2" -"@babel/plugin-transform-async-to-generator@^7.18.6": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.18.6.tgz#ccda3d1ab9d5ced5265fdb13f1882d5476c71615" - integrity sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag== +"@babel/plugin-transform-async-to-generator@^7.20.7": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz#dfee18623c8cb31deb796aa3ca84dda9cea94354" + integrity sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q== dependencies: "@babel/helper-module-imports" "^7.18.6" - "@babel/helper-plugin-utils" "^7.18.6" - "@babel/helper-remap-async-to-generator" "^7.18.6" + "@babel/helper-plugin-utils" "^7.20.2" + "@babel/helper-remap-async-to-generator" "^7.18.9" "@babel/plugin-transform-block-scoped-functions@^7.18.6": version "7.18.6" @@ -734,36 +734,37 @@ dependencies: "@babel/helper-plugin-utils" "^7.18.6" -"@babel/plugin-transform-block-scoping@^7.20.2": - version "7.20.2" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.20.2.tgz#f59b1767e6385c663fd0bce655db6ca9c8b236ed" - integrity sha512-y5V15+04ry69OV2wULmwhEA6jwSWXO1TwAtIwiPXcvHcoOQUqpyMVd2bDsQJMW8AurjulIyUV8kDqtjSwHy1uQ== +"@babel/plugin-transform-block-scoping@^7.21.0": + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz#e737b91037e5186ee16b76e7ae093358a5634f02" + integrity sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ== dependencies: "@babel/helper-plugin-utils" "^7.20.2" -"@babel/plugin-transform-classes@^7.20.2": - version "7.20.2" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.20.2.tgz#c0033cf1916ccf78202d04be4281d161f6709bb2" - integrity sha512-9rbPp0lCVVoagvtEyQKSo5L8oo0nQS/iif+lwlAz29MccX2642vWDlSZK+2T2buxbopotId2ld7zZAzRfz9j1g== +"@babel/plugin-transform-classes@^7.21.0": + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz#f469d0b07a4c5a7dbb21afad9e27e57b47031665" + integrity sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ== dependencies: "@babel/helper-annotate-as-pure" "^7.18.6" - "@babel/helper-compilation-targets" "^7.20.0" + "@babel/helper-compilation-targets" "^7.20.7" "@babel/helper-environment-visitor" "^7.18.9" - "@babel/helper-function-name" "^7.19.0" + "@babel/helper-function-name" "^7.21.0" "@babel/helper-optimise-call-expression" "^7.18.6" "@babel/helper-plugin-utils" "^7.20.2" - "@babel/helper-replace-supers" "^7.19.1" + "@babel/helper-replace-supers" "^7.20.7" "@babel/helper-split-export-declaration" "^7.18.6" globals "^11.1.0" -"@babel/plugin-transform-computed-properties@^7.18.9": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.18.9.tgz#2357a8224d402dad623caf6259b611e56aec746e" - integrity sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw== +"@babel/plugin-transform-computed-properties@^7.20.7": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.20.7.tgz#704cc2fd155d1c996551db8276d55b9d46e4d0aa" + integrity sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ== dependencies: - "@babel/helper-plugin-utils" "^7.18.9" + "@babel/helper-plugin-utils" "^7.20.2" + "@babel/template" "^7.20.7" -"@babel/plugin-transform-destructuring@^7.20.2", "@babel/plugin-transform-destructuring@npm:@minh.nguyen/plugin-transform-destructuring@^7.5.2": +"@babel/plugin-transform-destructuring@^7.21.3", "@babel/plugin-transform-destructuring@npm:@minh.nguyen/plugin-transform-destructuring@^7.5.2": version "7.5.2" resolved "https://registry.yarnpkg.com/@minh.nguyen/plugin-transform-destructuring/-/plugin-transform-destructuring-7.5.2.tgz#49de3e25c373fadd11471a2fc99ec0ce07d92f19" integrity sha512-DIzWFKl5nzSk9Hj9ZsEXAvvgHiyuAsw52queJMuKqfZOk1BOr9u1i2h0tc6tPF3rQieubP+eX4DPLTKSMpbyMg== @@ -801,12 +802,12 @@ "@babel/helper-plugin-utils" "^7.19.0" "@babel/plugin-syntax-flow" "^7.18.6" -"@babel/plugin-transform-for-of@^7.18.8": - version "7.18.8" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.8.tgz#6ef8a50b244eb6a0bdbad0c7c61877e4e30097c1" - integrity sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ== +"@babel/plugin-transform-for-of@^7.21.0": + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.0.tgz#964108c9988de1a60b4be2354a7d7e245f36e86e" + integrity sha512-LlUYlydgDkKpIY7mcBWvyPPmMcOphEyYA27Ef4xpbh1IiDNLr0kZsos2nf92vz3IccvJI25QUwp86Eo5s6HmBQ== dependencies: - "@babel/helper-plugin-utils" "^7.18.6" + "@babel/helper-plugin-utils" "^7.20.2" "@babel/plugin-transform-function-name@^7.18.9": version "7.18.9" @@ -831,31 +832,31 @@ dependencies: "@babel/helper-plugin-utils" "^7.18.6" -"@babel/plugin-transform-modules-amd@^7.19.6": - version "7.19.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.19.6.tgz#aca391801ae55d19c4d8d2ebfeaa33df5f2a2cbd" - integrity sha512-uG3od2mXvAtIFQIh0xrpLH6r5fpSQN04gIVovl+ODLdUMANokxQLZnPBHcjmv3GxRjnqwLuHvppjjcelqUFZvg== +"@babel/plugin-transform-modules-amd@^7.20.11": + version "7.20.11" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz#3daccca8e4cc309f03c3a0c4b41dc4b26f55214a" + integrity sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g== dependencies: - "@babel/helper-module-transforms" "^7.19.6" - "@babel/helper-plugin-utils" "^7.19.0" + "@babel/helper-module-transforms" "^7.20.11" + "@babel/helper-plugin-utils" "^7.20.2" -"@babel/plugin-transform-modules-commonjs@^7.13.8", "@babel/plugin-transform-modules-commonjs@^7.19.6": - version "7.19.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.19.6.tgz#25b32feef24df8038fc1ec56038917eacb0b730c" - integrity sha512-8PIa1ym4XRTKuSsOUXqDG0YaOlEuTVvHMe5JCfgBMOtHvJKw/4NGovEGN33viISshG/rZNVrACiBmPQLvWN8xQ== +"@babel/plugin-transform-modules-commonjs@^7.13.8", "@babel/plugin-transform-modules-commonjs@^7.21.2": + version "7.21.2" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.2.tgz#6ff5070e71e3192ef2b7e39820a06fb78e3058e7" + integrity sha512-Cln+Yy04Gxua7iPdj6nOV96smLGjpElir5YwzF0LBPKoPlLDNJePNlrGGaybAJkd0zKRnOVXOgizSqPYMNYkzA== dependencies: - "@babel/helper-module-transforms" "^7.19.6" - "@babel/helper-plugin-utils" "^7.19.0" - "@babel/helper-simple-access" "^7.19.4" + "@babel/helper-module-transforms" "^7.21.2" + "@babel/helper-plugin-utils" "^7.20.2" + "@babel/helper-simple-access" "^7.20.2" -"@babel/plugin-transform-modules-systemjs@^7.19.6": - version "7.19.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.19.6.tgz#59e2a84064b5736a4471b1aa7b13d4431d327e0d" - integrity sha512-fqGLBepcc3kErfR9R3DnVpURmckXP7gj7bAlrTQyBxrigFqszZCkFkcoxzCp2v32XmwXLvbw+8Yq9/b+QqksjQ== +"@babel/plugin-transform-modules-systemjs@^7.20.11": + version "7.20.11" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz#467ec6bba6b6a50634eea61c9c232654d8a4696e" + integrity sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw== dependencies: "@babel/helper-hoist-variables" "^7.18.6" - "@babel/helper-module-transforms" "^7.19.6" - "@babel/helper-plugin-utils" "^7.19.0" + "@babel/helper-module-transforms" "^7.20.11" + "@babel/helper-plugin-utils" "^7.20.2" "@babel/helper-validator-identifier" "^7.19.1" "@babel/plugin-transform-modules-umd@^7.18.6": @@ -866,13 +867,13 @@ "@babel/helper-module-transforms" "^7.18.6" "@babel/helper-plugin-utils" "^7.18.6" -"@babel/plugin-transform-named-capturing-groups-regex@^7.19.1": - version "7.19.1" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.19.1.tgz#ec7455bab6cd8fb05c525a94876f435a48128888" - integrity sha512-oWk9l9WItWBQYS4FgXD4Uyy5kq898lvkXpXQxoJEY1RnvPk4R/Dvu2ebXU9q8lP+rlMwUQTFf2Ok6d78ODa0kw== +"@babel/plugin-transform-named-capturing-groups-regex@^7.20.5": + version "7.20.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz#626298dd62ea51d452c3be58b285d23195ba69a8" + integrity sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA== dependencies: - "@babel/helper-create-regexp-features-plugin" "^7.19.0" - "@babel/helper-plugin-utils" "^7.19.0" + "@babel/helper-create-regexp-features-plugin" "^7.20.5" + "@babel/helper-plugin-utils" "^7.20.2" "@babel/plugin-transform-new-target@^7.18.6": version "7.18.6" @@ -896,10 +897,10 @@ "@babel/helper-plugin-utils" "^7.18.6" "@babel/helper-replace-supers" "^7.18.6" -"@babel/plugin-transform-parameters@^7.20.1", "@babel/plugin-transform-parameters@^7.20.7": - version "7.20.7" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.20.7.tgz#0ee349e9d1bc96e78e3b37a7af423a4078a7083f" - integrity sha512-WiWBIkeHKVOSYPO0pWkxGPfKeWrCJyD3NJ53+Lrp/QMSZbsVPovrVl2aWZ19D/LTVnaDv5Ap7GJ/B2CTOZdrfA== +"@babel/plugin-transform-parameters@^7.20.7", "@babel/plugin-transform-parameters@^7.21.3": + version "7.21.3" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.21.3.tgz#18fc4e797cf6d6d972cb8c411dbe8a809fa157db" + integrity sha512-Wxc+TvppQG9xWFYatvCGPvZ6+SIUxQ2ZdiBP+PHYMIjnPXD+uThCshaz4NZOnODAtBjjcVQQ/3OKs9LW28purQ== dependencies: "@babel/helper-plugin-utils" "^7.20.2" @@ -950,13 +951,13 @@ "@babel/helper-annotate-as-pure" "^7.18.6" "@babel/helper-plugin-utils" "^7.18.6" -"@babel/plugin-transform-regenerator@^7.18.6": - version "7.18.6" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.18.6.tgz#585c66cb84d4b4bf72519a34cfce761b8676ca73" - integrity sha512-poqRI2+qiSdeldcz4wTSTXBRryoq3Gc70ye7m7UD5Ww0nE29IXqMl6r7Nd15WBgRd74vloEMlShtH6CKxVzfmQ== +"@babel/plugin-transform-regenerator@^7.20.5": + version "7.20.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.20.5.tgz#57cda588c7ffb7f4f8483cc83bdcea02a907f04d" + integrity sha512-kW/oO7HPBtntbsahzQ0qSE3tFvkFwnbozz3NWFhLGqH75vLEg+sCGngLlhVkePlCs3Jv0dBBHDzCHxNiFAQKCQ== dependencies: - "@babel/helper-plugin-utils" "^7.18.6" - regenerator-transform "^0.15.0" + "@babel/helper-plugin-utils" "^7.20.2" + regenerator-transform "^0.15.1" "@babel/plugin-transform-reserved-words@^7.18.6": version "7.18.6" @@ -965,12 +966,12 @@ dependencies: "@babel/helper-plugin-utils" "^7.18.6" -"@babel/plugin-transform-runtime@^7.21.0": - version "7.21.0" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.0.tgz#2a884f29556d0a68cd3d152dcc9e6c71dfb6eee8" - integrity sha512-ReY6pxwSzEU0b3r2/T/VhqMKg/AkceBT19X0UptA3/tYi5Pe2eXgEUH+NNMC5nok6c6XQz5tyVTUpuezRfSMSg== +"@babel/plugin-transform-runtime@^7.21.4": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.4.tgz#2e1da21ca597a7d01fc96b699b21d8d2023191aa" + integrity sha512-1J4dhrw1h1PqnNNpzwxQ2UBymJUF8KuPjAAnlLwZcGhHAIqUigFW7cdK6GHoB64ubY4qXQNYknoUeks4Wz7CUA== dependencies: - "@babel/helper-module-imports" "^7.18.6" + "@babel/helper-module-imports" "^7.21.4" "@babel/helper-plugin-utils" "^7.20.2" babel-plugin-polyfill-corejs2 "^0.3.3" babel-plugin-polyfill-corejs3 "^0.6.0" @@ -984,13 +985,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.18.6" -"@babel/plugin-transform-spread@^7.19.0": - version "7.19.0" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.19.0.tgz#dd60b4620c2fec806d60cfaae364ec2188d593b6" - integrity sha512-RsuMk7j6n+r752EtzyScnWkQyuJdli6LdO5Klv8Yx0OfPVTcQkIUfS8clx5e9yHXzlnhOZF3CbQ8C2uP5j074w== +"@babel/plugin-transform-spread@^7.20.7": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz#c2d83e0b99d3bf83e07b11995ee24bf7ca09401e" + integrity sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw== dependencies: - "@babel/helper-plugin-utils" "^7.19.0" - "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9" + "@babel/helper-plugin-utils" "^7.20.2" + "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0" "@babel/plugin-transform-sticky-regex@^7.18.6": version "7.18.6" @@ -1013,11 +1014,12 @@ dependencies: "@babel/helper-plugin-utils" "^7.18.9" -"@babel/plugin-transform-typescript@^7.21.0": - version "7.21.0" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.0.tgz#f0956a153679e3b377ae5b7f0143427151e4c848" - integrity sha512-xo///XTPp3mDzTtrqXoBlK9eiAYW3wv9JXglcn/u1bi60RW11dEUxIgA8cbnDhutS1zacjMRmAwxE0gMklLnZg== +"@babel/plugin-transform-typescript@^7.21.3": + version "7.21.3" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.3.tgz#316c5be579856ea890a57ebc5116c5d064658f2b" + integrity sha512-RQxPz6Iqt8T0uw/WsJNReuBpWpBqs/n7mNo18sKLoTbMp+UrEekhH+pKSVC7gWz+DNjo9gryfV8YzCiT45RgMw== dependencies: + "@babel/helper-annotate-as-pure" "^7.18.6" "@babel/helper-create-class-features-plugin" "^7.21.0" "@babel/helper-plugin-utils" "^7.20.2" "@babel/plugin-syntax-typescript" "^7.20.0" @@ -1037,31 +1039,31 @@ "@babel/helper-create-regexp-features-plugin" "^7.18.6" "@babel/helper-plugin-utils" "^7.18.6" -"@babel/preset-env@^7.20.2": - version "7.20.2" - resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.20.2.tgz#9b1642aa47bb9f43a86f9630011780dab7f86506" - integrity sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg== +"@babel/preset-env@^7.21.4": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.21.4.tgz#a952482e634a8dd8271a3fe5459a16eb10739c58" + integrity sha512-2W57zHs2yDLm6GD5ZpvNn71lZ0B/iypSdIeq25OurDKji6AdzV07qp4s3n1/x5BqtiGaTrPN3nerlSCaC5qNTw== dependencies: - "@babel/compat-data" "^7.20.1" - "@babel/helper-compilation-targets" "^7.20.0" + "@babel/compat-data" "^7.21.4" + "@babel/helper-compilation-targets" "^7.21.4" "@babel/helper-plugin-utils" "^7.20.2" - "@babel/helper-validator-option" "^7.18.6" + "@babel/helper-validator-option" "^7.21.0" "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6" - "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.18.9" - "@babel/plugin-proposal-async-generator-functions" "^7.20.1" + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.20.7" + "@babel/plugin-proposal-async-generator-functions" "^7.20.7" "@babel/plugin-proposal-class-properties" "^7.18.6" - "@babel/plugin-proposal-class-static-block" "^7.18.6" + "@babel/plugin-proposal-class-static-block" "^7.21.0" "@babel/plugin-proposal-dynamic-import" "^7.18.6" "@babel/plugin-proposal-export-namespace-from" "^7.18.9" "@babel/plugin-proposal-json-strings" "^7.18.6" - "@babel/plugin-proposal-logical-assignment-operators" "^7.18.9" + "@babel/plugin-proposal-logical-assignment-operators" "^7.20.7" "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6" "@babel/plugin-proposal-numeric-separator" "^7.18.6" - "@babel/plugin-proposal-object-rest-spread" "^7.20.2" + "@babel/plugin-proposal-object-rest-spread" "^7.20.7" "@babel/plugin-proposal-optional-catch-binding" "^7.18.6" - "@babel/plugin-proposal-optional-chaining" "^7.18.9" + "@babel/plugin-proposal-optional-chaining" "^7.21.0" "@babel/plugin-proposal-private-methods" "^7.18.6" - "@babel/plugin-proposal-private-property-in-object" "^7.18.6" + "@babel/plugin-proposal-private-property-in-object" "^7.21.0" "@babel/plugin-proposal-unicode-property-regex" "^7.18.6" "@babel/plugin-syntax-async-generators" "^7.8.4" "@babel/plugin-syntax-class-properties" "^7.12.13" @@ -1078,40 +1080,40 @@ "@babel/plugin-syntax-optional-chaining" "^7.8.3" "@babel/plugin-syntax-private-property-in-object" "^7.14.5" "@babel/plugin-syntax-top-level-await" "^7.14.5" - "@babel/plugin-transform-arrow-functions" "^7.18.6" - "@babel/plugin-transform-async-to-generator" "^7.18.6" + "@babel/plugin-transform-arrow-functions" "^7.20.7" + "@babel/plugin-transform-async-to-generator" "^7.20.7" "@babel/plugin-transform-block-scoped-functions" "^7.18.6" - "@babel/plugin-transform-block-scoping" "^7.20.2" - "@babel/plugin-transform-classes" "^7.20.2" - "@babel/plugin-transform-computed-properties" "^7.18.9" - "@babel/plugin-transform-destructuring" "^7.20.2" + "@babel/plugin-transform-block-scoping" "^7.21.0" + "@babel/plugin-transform-classes" "^7.21.0" + "@babel/plugin-transform-computed-properties" "^7.20.7" + "@babel/plugin-transform-destructuring" "^7.21.3" "@babel/plugin-transform-dotall-regex" "^7.18.6" "@babel/plugin-transform-duplicate-keys" "^7.18.9" "@babel/plugin-transform-exponentiation-operator" "^7.18.6" - "@babel/plugin-transform-for-of" "^7.18.8" + "@babel/plugin-transform-for-of" "^7.21.0" "@babel/plugin-transform-function-name" "^7.18.9" "@babel/plugin-transform-literals" "^7.18.9" "@babel/plugin-transform-member-expression-literals" "^7.18.6" - "@babel/plugin-transform-modules-amd" "^7.19.6" - "@babel/plugin-transform-modules-commonjs" "^7.19.6" - "@babel/plugin-transform-modules-systemjs" "^7.19.6" + "@babel/plugin-transform-modules-amd" "^7.20.11" + "@babel/plugin-transform-modules-commonjs" "^7.21.2" + "@babel/plugin-transform-modules-systemjs" "^7.20.11" "@babel/plugin-transform-modules-umd" "^7.18.6" - "@babel/plugin-transform-named-capturing-groups-regex" "^7.19.1" + "@babel/plugin-transform-named-capturing-groups-regex" "^7.20.5" "@babel/plugin-transform-new-target" "^7.18.6" "@babel/plugin-transform-object-super" "^7.18.6" - "@babel/plugin-transform-parameters" "^7.20.1" + "@babel/plugin-transform-parameters" "^7.21.3" "@babel/plugin-transform-property-literals" "^7.18.6" - "@babel/plugin-transform-regenerator" "^7.18.6" + "@babel/plugin-transform-regenerator" "^7.20.5" "@babel/plugin-transform-reserved-words" "^7.18.6" "@babel/plugin-transform-shorthand-properties" "^7.18.6" - "@babel/plugin-transform-spread" "^7.19.0" + "@babel/plugin-transform-spread" "^7.20.7" "@babel/plugin-transform-sticky-regex" "^7.18.6" "@babel/plugin-transform-template-literals" "^7.18.9" "@babel/plugin-transform-typeof-symbol" "^7.18.9" "@babel/plugin-transform-unicode-escapes" "^7.18.10" "@babel/plugin-transform-unicode-regex" "^7.18.6" "@babel/preset-modules" "^0.1.5" - "@babel/types" "^7.20.2" + "@babel/types" "^7.21.4" babel-plugin-polyfill-corejs2 "^0.3.3" babel-plugin-polyfill-corejs3 "^0.6.0" babel-plugin-polyfill-regenerator "^0.4.1" @@ -1150,14 +1152,16 @@ "@babel/plugin-transform-react-jsx-development" "^7.18.6" "@babel/plugin-transform-react-pure-annotations" "^7.18.6" -"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.21.0": - version "7.21.0" - resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.21.0.tgz#bcbbca513e8213691fe5d4b23d9251e01f00ebff" - integrity sha512-myc9mpoVA5m1rF8K8DgLEatOYFDpwC+RkMkjZ0Du6uI62YvDe8uxIEYVs/VCdSJ097nlALiU/yBC7//3nI+hNg== +"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.21.4": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.21.4.tgz#b913ac8e6aa8932e47c21b01b4368d8aa239a529" + integrity sha512-sMLNWY37TCdRH/bJ6ZeeOH1nPuanED7Ai9Y/vH31IPqalioJ6ZNFUWONsakhv4r4n+I6gm5lmoE0olkgib/j/A== dependencies: "@babel/helper-plugin-utils" "^7.20.2" "@babel/helper-validator-option" "^7.21.0" - "@babel/plugin-transform-typescript" "^7.21.0" + "@babel/plugin-syntax-jsx" "^7.21.4" + "@babel/plugin-transform-modules-commonjs" "^7.21.2" + "@babel/plugin-transform-typescript" "^7.21.3" "@babel/register@^7.13.16", "@babel/register@^7.18.9", "@babel/register@^7.21.0": version "7.21.0" @@ -1170,6 +1174,11 @@ pirates "^4.0.5" source-map-support "^0.5.16" +"@babel/regjsgen@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310" + integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== + "@babel/runtime-corejs2@^7.21.0": version "7.21.0" resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.21.0.tgz#79374a14846b38764077089707566066721bcc16" @@ -1194,26 +1203,26 @@ "@babel/parser" "^7.20.7" "@babel/types" "^7.20.7" -"@babel/traverse@^7.1.6", "@babel/traverse@^7.19.0", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.0", "@babel/traverse@^7.21.2", "@babel/traverse@^7.21.3", "@babel/traverse@^7.4.5", "@babel/traverse@^7.8.3": - version "7.21.3" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.3.tgz#4747c5e7903d224be71f90788b06798331896f67" - integrity sha512-XLyopNeaTancVitYZe2MlUEvgKb6YVVPXzofHgqHijCImG33b/uTurMS488ht/Hbsb2XK3U2BnSTxKVNGV3nGQ== +"@babel/traverse@^7.1.6", "@babel/traverse@^7.19.0", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.0", "@babel/traverse@^7.21.2", "@babel/traverse@^7.21.4", "@babel/traverse@^7.4.5", "@babel/traverse@^7.8.3": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.4.tgz#a836aca7b116634e97a6ed99976236b3282c9d36" + integrity sha512-eyKrRHKdyZxqDm+fV1iqL9UAHMoIg0nDaGqfIOd8rKH17m5snv7Gn4qgjBoFfLz9APvjFU/ICT00NVCv1Epp8Q== dependencies: - "@babel/code-frame" "^7.18.6" - "@babel/generator" "^7.21.3" + "@babel/code-frame" "^7.21.4" + "@babel/generator" "^7.21.4" "@babel/helper-environment-visitor" "^7.18.9" "@babel/helper-function-name" "^7.21.0" "@babel/helper-hoist-variables" "^7.18.6" "@babel/helper-split-export-declaration" "^7.18.6" - "@babel/parser" "^7.21.3" - "@babel/types" "^7.21.3" + "@babel/parser" "^7.21.4" + "@babel/types" "^7.21.4" debug "^4.1.0" globals "^11.1.0" -"@babel/types@^7.0.0", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.2.0", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.2", "@babel/types@^7.21.3", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.6.1": - version "7.21.3" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.3.tgz#4865a5357ce40f64e3400b0f3b737dc6d4f64d05" - integrity sha512-sBGdETxC+/M4o/zKC0sl6sjWv62WFR/uzxrJ6uYyMLZOUlPnwzw0tKgVHOXxaAd5l2g8pEDM5RZ495GPQI77kg== +"@babel/types@^7.0.0", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.2.0", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.2", "@babel/types@^7.21.4", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.6.1": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.4.tgz#2d5d6bb7908699b3b416409ffd3b5daa25b030d4" + integrity sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA== dependencies: "@babel/helper-string-parser" "^7.19.4" "@babel/helper-validator-identifier" "^7.19.1" @@ -14279,7 +14288,7 @@ reflect.ownkeys@^0.2.0: resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460" integrity sha512-qOLsBKHCpSOFKK1NUOCGC5VyeufB6lEsFe92AL2bhIJsacZS1qdoOZSbPk3MYKuT2cFlRDnulKXuuElIrMjGUg== -regenerate-unicode-properties@^10.0.1: +regenerate-unicode-properties@^10.1.0: version "10.1.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c" integrity sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ== @@ -14296,10 +14305,10 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.9: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg== -regenerator-transform@^0.15.0: - version "0.15.0" - resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537" - integrity sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg== +regenerator-transform@^0.15.1: + version "0.15.1" + resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56" + integrity sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg== dependencies: "@babel/runtime" "^7.8.4" @@ -14325,17 +14334,17 @@ regexpp@^3.2.0: resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2" integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg== -regexpu-core@^5.1.0: - version "5.1.0" - resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.1.0.tgz#2f8504c3fd0ebe11215783a41541e21c79942c6d" - integrity sha512-bb6hk+xWd2PEOkj5It46A16zFMs2mv86Iwpdu94la4S3sJ7C973h2dHpYKwIBGaWSO7cIRJ+UX0IeMaWcO4qwA== +regexpu-core@^5.3.1: + version "5.3.2" + resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b" + integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ== dependencies: + "@babel/regjsgen" "^0.8.0" regenerate "^1.4.2" - regenerate-unicode-properties "^10.0.1" - regjsgen "^0.6.0" - regjsparser "^0.8.2" + regenerate-unicode-properties "^10.1.0" + regjsparser "^0.9.1" unicode-match-property-ecmascript "^2.0.0" - unicode-match-property-value-ecmascript "^2.0.0" + unicode-match-property-value-ecmascript "^2.1.0" registry-auth-token@3.3.2: version "3.3.2" @@ -14352,15 +14361,10 @@ registry-url@3.1.0: dependencies: rc "^1.0.1" -regjsgen@^0.6.0: - version "0.6.0" - resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.6.0.tgz#83414c5354afd7d6627b16af5f10f41c4e71808d" - integrity sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA== - -regjsparser@^0.8.2: - version "0.8.4" - resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.8.4.tgz#8a14285ffcc5de78c5b95d62bbf413b6bc132d5f" - integrity sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA== +regjsparser@^0.9.1: + version "0.9.1" + resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709" + integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ== dependencies: jsesc "~0.5.0" @@ -16352,10 +16356,10 @@ unicode-match-property-ecmascript@^2.0.0: unicode-canonical-property-names-ecmascript "^2.0.0" unicode-property-aliases-ecmascript "^2.0.0" -unicode-match-property-value-ecmascript@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz#1a01aa57247c14c568b89775a54938788189a714" - integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw== +unicode-match-property-value-ecmascript@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0" + integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA== unicode-property-aliases-ecmascript@^2.0.0: version "2.1.0" From 988e0ad3d84a76e1ac68e25ef5d74feda20294e3 Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Fri, 28 Apr 2023 17:03:42 +0530 Subject: [PATCH 15/70] [TabPanel] drop component prop (#37054) --- docs/pages/base/api/tab-panel.json | 1 - .../api-docs-base/tab-panel/tab-panel.json | 1 - .../mui-base/src/TabPanel/TabPanel.spec.tsx | 17 +++++++++++------ .../mui-base/src/TabPanel/TabPanel.test.tsx | 1 + packages/mui-base/src/TabPanel/TabPanel.tsx | 14 ++++---------- .../mui-base/src/TabPanel/TabPanel.types.ts | 8 +++----- 6 files changed, 19 insertions(+), 23 deletions(-) diff --git a/docs/pages/base/api/tab-panel.json b/docs/pages/base/api/tab-panel.json index 7f6090d06aea7f..004d16c071c94d 100644 --- a/docs/pages/base/api/tab-panel.json +++ b/docs/pages/base/api/tab-panel.json @@ -1,7 +1,6 @@ { "props": { "children": { "type": { "name": "node" } }, - "component": { "type": { "name": "elementType" } }, "slotProps": { "type": { "name": "shape", "description": "{ root?: func
| object }" }, "default": "{}" diff --git a/docs/translations/api-docs-base/tab-panel/tab-panel.json b/docs/translations/api-docs-base/tab-panel/tab-panel.json index fa22ca26bbdc73..e3a53028925fc9 100644 --- a/docs/translations/api-docs-base/tab-panel/tab-panel.json +++ b/docs/translations/api-docs-base/tab-panel/tab-panel.json @@ -2,7 +2,6 @@ "componentDescription": "", "propDescriptions": { "children": "The content of the component.", - "component": "The component used for the root node. Either a string to use a HTML element or a component.", "slotProps": "The props used for each slot inside the TabPanel.", "slots": "The components used for each slot inside the TabPanel. Either a string to use a HTML element or a component. See Slots API below for more details.", "value": "The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected. If not provided, it will fall back to the index of the panel. It is recommended to explicitly provide it, as it's required for the tab panel to be rendered on the server." diff --git a/packages/mui-base/src/TabPanel/TabPanel.spec.tsx b/packages/mui-base/src/TabPanel/TabPanel.spec.tsx index c7f2161a45cb08..f8ef6814792220 100644 --- a/packages/mui-base/src/TabPanel/TabPanel.spec.tsx +++ b/packages/mui-base/src/TabPanel/TabPanel.spec.tsx @@ -20,21 +20,26 @@ const polymorphicComponentTest = () => { {/* @ts-expect-error */} - + value={1} slots={{ root: 'a' }} href="#" /> - + + value={1} + slots={{ root: CustomComponent }} + stringProp="test" + numberProp={0} + /> {/* @ts-expect-error */} - + value={1} slots={{ root: CustomComponent }} /> - value={1} - component="button" + slots={{ root: 'button' }} onClick={(e: React.MouseEvent) => e.currentTarget.checkValidity()} /> value={1} - component="button" + slots={{ root: 'button' }} ref={(elem) => { expectType(elem); }} diff --git a/packages/mui-base/src/TabPanel/TabPanel.test.tsx b/packages/mui-base/src/TabPanel/TabPanel.test.tsx index 2a6d8888a05501..49574e61e6a4f6 100644 --- a/packages/mui-base/src/TabPanel/TabPanel.test.tsx +++ b/packages/mui-base/src/TabPanel/TabPanel.test.tsx @@ -44,6 +44,7 @@ describe('', () => { }, skip: [ 'reactTestRenderer', // Need to be wrapped with TabsContext + 'componentProp', ], })); }); diff --git a/packages/mui-base/src/TabPanel/TabPanel.tsx b/packages/mui-base/src/TabPanel/TabPanel.tsx index 594081404bbf1f..d7a75b049f5498 100644 --- a/packages/mui-base/src/TabPanel/TabPanel.tsx +++ b/packages/mui-base/src/TabPanel/TabPanel.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { OverridableComponent } from '@mui/types'; -import { useSlotProps, WithOptionalOwnerState } from '../utils'; +import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils'; import composeClasses from '../composeClasses'; import { getTabPanelUtilityClass } from './tabPanelClasses'; import useTabPanel from '../useTabPanel/useTabPanel'; @@ -36,7 +35,7 @@ const TabPanel = React.forwardRef(function TabPanel, forwardedRef: React.ForwardedRef, ) { - const { children, component, value, slotProps = {}, slots = {}, ...other } = props; + const { children, value, slotProps = {}, slots = {}, ...other } = props; const { hidden, getRootProps } = useTabPanel(props); @@ -47,7 +46,7 @@ const TabPanel = React.forwardRef(function TabPanel = useSlotProps({ elementType: TabPanelRoot, getSlotProps: getRootProps, @@ -62,7 +61,7 @@ const TabPanel = React.forwardRef(function TabPanel{!hidden && children}; -}) as OverridableComponent; +}) as PolymorphicComponent; TabPanel.propTypes /* remove-proptypes */ = { // ----------------------------- Warning -------------------------------- @@ -73,11 +72,6 @@ TabPanel.propTypes /* remove-proptypes */ = { * The content of the component. */ children: PropTypes.node, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The props used for each slot inside the TabPanel. * @default {} diff --git a/packages/mui-base/src/TabPanel/TabPanel.types.ts b/packages/mui-base/src/TabPanel/TabPanel.types.ts index 6aeb60db779310..8cd15f1667107c 100644 --- a/packages/mui-base/src/TabPanel/TabPanel.types.ts +++ b/packages/mui-base/src/TabPanel/TabPanel.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { OverrideProps, Simplify } from '@mui/types'; +import { Simplify } from '@mui/types'; import { UseTabPanelRootSlotProps } from '../useTabPanel'; -import { SlotComponentProps } from '../utils'; +import { PolymorphicProps, SlotComponentProps } from '../utils'; export interface TabPanelRootSlotPropsOverrides {} @@ -50,9 +50,7 @@ export interface TabPanelTypeMap< export type TabPanelProps< RootComponentType extends React.ElementType = TabPanelTypeMap['defaultComponent'], -> = OverrideProps, RootComponentType> & { - component?: RootComponentType; -}; +> = PolymorphicProps, RootComponentType>; export type TabPanelOwnerState = Simplify< TabPanelOwnProps & { From 0476b666e4127f7de73371a16d85c6a072bc7383 Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Fri, 28 Apr 2023 17:04:41 +0530 Subject: [PATCH 16/70] [TabsList] Drop component prop (#37042) --- docs/pages/base/api/tabs-list.json | 1 - .../api-docs-base/tabs-list/tabs-list.json | 1 - packages/mui-base/src/TabsList/TabsList.spec.tsx | 16 ++++++++++------ packages/mui-base/src/TabsList/TabsList.test.tsx | 1 + packages/mui-base/src/TabsList/TabsList.tsx | 14 ++++---------- packages/mui-base/src/TabsList/TabsList.types.ts | 8 +++----- 6 files changed, 18 insertions(+), 23 deletions(-) diff --git a/docs/pages/base/api/tabs-list.json b/docs/pages/base/api/tabs-list.json index e888c35fb22d1b..44664ef547e1de 100644 --- a/docs/pages/base/api/tabs-list.json +++ b/docs/pages/base/api/tabs-list.json @@ -1,7 +1,6 @@ { "props": { "children": { "type": { "name": "node" } }, - "component": { "type": { "name": "elementType" } }, "slotProps": { "type": { "name": "shape", "description": "{ root?: func
| object }" }, "default": "{}" diff --git a/docs/translations/api-docs-base/tabs-list/tabs-list.json b/docs/translations/api-docs-base/tabs-list/tabs-list.json index 0067df3d304aa5..9d459303149ef5 100644 --- a/docs/translations/api-docs-base/tabs-list/tabs-list.json +++ b/docs/translations/api-docs-base/tabs-list/tabs-list.json @@ -2,7 +2,6 @@ "componentDescription": "", "propDescriptions": { "children": "The content of the component.", - "component": "The component used for the root node. Either a string to use a HTML element or a component.", "slotProps": "The props used for each slot inside the TabsList.", "slots": "The components used for each slot inside the TabsList. Either a string to use a HTML element or a component. See Slots API below for more details." }, diff --git a/packages/mui-base/src/TabsList/TabsList.spec.tsx b/packages/mui-base/src/TabsList/TabsList.spec.tsx index fed31f225b8814..665323c1571114 100644 --- a/packages/mui-base/src/TabsList/TabsList.spec.tsx +++ b/packages/mui-base/src/TabsList/TabsList.spec.tsx @@ -20,19 +20,23 @@ const polymorphicComponentTest = () => { {/* @ts-expect-error */} - + slots={{ root: 'a' }} href="#" /> - + + slots={{ root: CustomComponent }} + stringProp="test" + numberProp={0} + /> {/* @ts-expect-error */} - + slots={{ root: CustomComponent }} /> - + slots={{ root: 'button' }} onClick={(e: React.MouseEvent) => e.currentTarget.checkValidity()} /> - component="button" + slots={{ root: 'button' }} ref={(elem) => { expectType(elem); }} diff --git a/packages/mui-base/src/TabsList/TabsList.test.tsx b/packages/mui-base/src/TabsList/TabsList.test.tsx index d004e1b04601a3..858ac44140b579 100644 --- a/packages/mui-base/src/TabsList/TabsList.test.tsx +++ b/packages/mui-base/src/TabsList/TabsList.test.tsx @@ -52,6 +52,7 @@ describe('', () => { }, skip: [ 'reactTestRenderer', // Need to be wrapped with TabsContext + 'componentProp', ], })); }); diff --git a/packages/mui-base/src/TabsList/TabsList.tsx b/packages/mui-base/src/TabsList/TabsList.tsx index b49e0b7eb63d41..2fc5a8fed7f8b9 100644 --- a/packages/mui-base/src/TabsList/TabsList.tsx +++ b/packages/mui-base/src/TabsList/TabsList.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { OverridableComponent } from '@mui/types'; import composeClasses from '../composeClasses'; -import { useSlotProps, WithOptionalOwnerState } from '../utils'; +import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils'; import { getTabsListUtilityClass } from './tabsListClasses'; import { TabsListOwnerState, @@ -38,7 +37,7 @@ const TabsList = React.forwardRef(function TabsList, forwardedRef: React.ForwardedRef, ) { - const { children, component, slotProps = {}, slots = {}, ...other } = props; + const { children, slotProps = {}, slots = {}, ...other } = props; const { isRtl, orientation, getRootProps, contextValue } = useTabsList({ rootRef: forwardedRef, @@ -52,7 +51,7 @@ const TabsList = React.forwardRef(function TabsList = useSlotProps({ elementType: TabsListRoot, getSlotProps: getRootProps, @@ -67,7 +66,7 @@ const TabsList = React.forwardRef(function TabsList{children} ); -}) as OverridableComponent; +}) as PolymorphicComponent; TabsList.propTypes /* remove-proptypes */ = { // ----------------------------- Warning -------------------------------- @@ -78,11 +77,6 @@ TabsList.propTypes /* remove-proptypes */ = { * The content of the component. */ children: PropTypes.node, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The props used for each slot inside the TabsList. * @default {} diff --git a/packages/mui-base/src/TabsList/TabsList.types.ts b/packages/mui-base/src/TabsList/TabsList.types.ts index 8b1e4a4475b67b..f96d9695ee312e 100644 --- a/packages/mui-base/src/TabsList/TabsList.types.ts +++ b/packages/mui-base/src/TabsList/TabsList.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { OverrideProps, Simplify } from '@mui/types'; +import { Simplify } from '@mui/types'; import { UseTabsListRootSlotProps } from '../useTabsList'; -import { SlotComponentProps } from '../utils'; +import { PolymorphicProps, SlotComponentProps } from '../utils'; export interface TabsListRootSlotPropsOverrides {} @@ -44,9 +44,7 @@ export interface TabsListTypeMap< export type TabsListProps< RootComponentType extends React.ElementType = TabsListTypeMap['defaultComponent'], -> = OverrideProps, RootComponentType> & { - component?: RootComponentType; -}; +> = PolymorphicProps, RootComponentType>; export type TabsListOwnerState = Simplify< TabsListOwnProps & { From 1d6d7fbb283adce752562f7e2157bd2060b340fc Mon Sep 17 00:00:00 2001 From: Varun Mulay <35381801+varunmulay22@users.noreply.github.com> Date: Fri, 28 Apr 2023 17:08:05 +0530 Subject: [PATCH 17/70] [docs][base] Move styles to the bottom of demos code for `SelectUnstyled` (#36718) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: MichaΕ‚ Dudak --- .../select/UnstyledSelectControlled.js | 78 +++---- .../select/UnstyledSelectControlled.tsx | 52 ++--- .../select/UnstyledSelectCustomRenderValue.js | 92 ++++---- .../UnstyledSelectCustomRenderValue.tsx | 66 +++--- .../components/select/UnstyledSelectForm.js | 72 +++--- .../components/select/UnstyledSelectForm.tsx | 82 +++---- .../select/UnstyledSelectGrouping.js | 130 +++++------ .../select/UnstyledSelectGrouping.tsx | 84 +++---- .../select/UnstyledSelectIntroduction.js | 68 +++--- .../select/UnstyledSelectIntroduction.tsx | 48 ++-- .../select/UnstyledSelectMultiple.js | 72 +++--- .../select/UnstyledSelectMultiple.tsx | 52 ++--- .../select/UnstyledSelectObjectValues.js | 104 ++++----- .../select/UnstyledSelectObjectValues.tsx | 92 ++++---- .../UnstyledSelectObjectValues.tsx.preview | 2 +- .../select/UnstyledSelectObjectValuesForm.js | 212 +++++++++--------- .../select/UnstyledSelectObjectValuesForm.tsx | 200 ++++++++--------- .../select/UnstyledSelectRichOptions.js | 86 +++---- .../select/UnstyledSelectRichOptions.tsx | 66 +++--- .../components/select/UnstyledSelectSimple.js | 42 ++-- .../select/UnstyledSelectSimple.tsx | 52 ++--- docs/data/base/components/select/UseSelect.js | 8 +- .../data/base/components/select/UseSelect.tsx | 8 +- 23 files changed, 884 insertions(+), 884 deletions(-) diff --git a/docs/data/base/components/select/UnstyledSelectControlled.js b/docs/data/base/components/select/UnstyledSelectControlled.js index 6137eecebfea67..0879dc2a26a7a8 100644 --- a/docs/data/base/components/select/UnstyledSelectControlled.js +++ b/docs/data/base/components/select/UnstyledSelectControlled.js @@ -5,6 +5,45 @@ import Option, { optionClasses } from '@mui/base/Option'; import Popper from '@mui/base/Popper'; import { styled } from '@mui/system'; +export default function UnstyledSelectControlled() { + const [value, setValue] = React.useState(10); + return ( +
+ setValue(newValue)}> + Ten + Twenty + Thirty + + + Selected value: {value} +
+ ); +} + +function CustomSelect(props) { + const slots = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -} - -CustomSelect.propTypes = { - /** - * The components used for each slot inside the Select. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots: PropTypes.shape({ - listbox: PropTypes.elementType, - popper: PropTypes.func, - root: PropTypes.elementType, - }), -}; - -export default function UnstyledSelectsMultiple() { - const [value, setValue] = React.useState(10); - return ( -
- setValue(newValue)}> - Ten - Twenty - Thirty - - - Selected value: {value} -
- ); -} diff --git a/docs/data/base/components/select/UnstyledSelectControlled.tsx b/docs/data/base/components/select/UnstyledSelectControlled.tsx index 9644a6c7ee4442..0fdb4b27a164ec 100644 --- a/docs/data/base/components/select/UnstyledSelectControlled.tsx +++ b/docs/data/base/components/select/UnstyledSelectControlled.tsx @@ -4,6 +4,32 @@ import Option, { optionClasses } from '@mui/base/Option'; import Popper from '@mui/base/Popper'; import { styled } from '@mui/system'; +export default function UnstyledSelectControlled() { + const [value, setValue] = React.useState(10); + return ( +
+ setValue(newValue)}> + Ten + Twenty + Thirty + + + Selected value: {value} +
+ ); +} + +function CustomSelect(props: SelectProps) { + const slots: SelectProps['slots'] = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -} - -export default function UnstyledSelectsMultiple() { - const [value, setValue] = React.useState(10); - return ( -
- setValue(newValue)}> - Ten - Twenty - Thirty - - - Selected value: {value} -
- ); -} diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js index 249fdb472a9b1e..af5549776f0497 100644 --- a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js +++ b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js @@ -6,6 +6,52 @@ import Option, { optionClasses } from '@mui/base/Option'; import Popper from '@mui/base/Popper'; import { styled } from '@mui/system'; +export default function UnstyledSelectCustomRenderValue() { + return ( + + Ten + Twenty + Thirty + + ); +} + +function CustomSelect(props) { + const slots = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -} - -CustomSelect.propTypes = { - /** - * The components used for each slot inside the Select. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots: PropTypes.shape({ - listbox: PropTypes.elementType, - popper: PropTypes.func, - root: PropTypes.elementType, - }), -}; - -function renderValue(option) { - if (option == null) { - return Select an option...; - } - - return ( - - {option.label} ({option.value}) - - ); -} - -export default function UnstyledSelectCustomRenderValue() { - return ( - - Ten - Twenty - Thirty - - ); -} diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx index 94697207e8089a..c17f850637e4f4 100644 --- a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx +++ b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx @@ -5,6 +5,39 @@ import Option, { optionClasses } from '@mui/base/Option'; import Popper from '@mui/base/Popper'; import { styled } from '@mui/system'; +export default function UnstyledSelectCustomRenderValue() { + return ( + + Ten + Twenty + Thirty + + ); +} + +function CustomSelect(props: SelectProps) { + const slots: SelectProps['slots'] = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -} - -function renderValue(option: SelectOption | null) { - if (option == null) { - return Select an option...; - } - - return ( - - {option.label} ({option.value}) - - ); -} - -export default function UnstyledSelectCustomRenderValue() { - return ( - - Ten - Twenty - Thirty - - ); -} diff --git a/docs/data/base/components/select/UnstyledSelectForm.js b/docs/data/base/components/select/UnstyledSelectForm.js index 9be67272e7247a..81f9be6cf41122 100644 --- a/docs/data/base/components/select/UnstyledSelectForm.js +++ b/docs/data/base/components/select/UnstyledSelectForm.js @@ -4,6 +4,42 @@ import Option, { optionClasses } from '@mui/base/Option'; import Popper from '@mui/base/Popper'; import { styled, Box } from '@mui/system'; +export default function UnstyledSelectForm() { + return ( +
+ + + + Ten + Twenty + Thirty + + + + + + Ten + Twenty + Thirty + + +
+ ); +} + +const CustomSelect = React.forwardRef(function CustomSelect(props, ref) { + const slots = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -}); - -export default function UnstyledSelectForm() { - return ( -
- - - - Ten - Twenty - Thirty - - - - - - Ten - Twenty - Thirty - - -
- ); -} diff --git a/docs/data/base/components/select/UnstyledSelectForm.tsx b/docs/data/base/components/select/UnstyledSelectForm.tsx index da128a365cc322..0121d2c27d1aae 100644 --- a/docs/data/base/components/select/UnstyledSelectForm.tsx +++ b/docs/data/base/components/select/UnstyledSelectForm.tsx @@ -4,6 +4,47 @@ import Option, { optionClasses } from '@mui/base/Option'; import Popper from '@mui/base/Popper'; import { styled, Box } from '@mui/system'; +export default function UnstyledSelectForm() { + return ( +
+ + + + Ten + Twenty + Thirty + + + + + + Ten + Twenty + Thirty + + +
+ ); +} + +const CustomSelect = React.forwardRef(function CustomSelect< + TValue extends {}, + Multiple extends boolean, +>(props: SelectProps, ref: React.ForwardedRef) { + const slots: SelectProps['slots'] = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -}) as ( - props: SelectProps & React.RefAttributes, -) => JSX.Element; - -export default function UnstyledSelectForm() { - return ( -
- - - - Ten - Twenty - Thirty - - - - - - Ten - Twenty - Thirty - - -
- ); -} diff --git a/docs/data/base/components/select/UnstyledSelectGrouping.js b/docs/data/base/components/select/UnstyledSelectGrouping.js index bb261103595c14..18bac7600e5b5d 100644 --- a/docs/data/base/components/select/UnstyledSelectGrouping.js +++ b/docs/data/base/components/select/UnstyledSelectGrouping.js @@ -6,6 +6,71 @@ import OptionGroup from '@mui/base/OptionGroup'; import Popper from '@mui/base/Popper'; import { styled } from '@mui/system'; +export default function UnstyledSelectGrouping() { + return ( + + + Frodo + Sam + Merry + Pippin + + + Galadriel + Legolas + + + ); +} + +function CustomSelect(props) { + const slots = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -} - -CustomSelect.propTypes = { - /** - * The components used for each slot inside the Select. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots: PropTypes.shape({ - listbox: PropTypes.elementType, - popper: PropTypes.func, - root: PropTypes.elementType, - }), -}; - -const CustomOptionGroup = React.forwardRef(function CustomOptionGroup(props, ref) { - const slots = { - root: StyledGroupRoot, - label: StyledGroupHeader, - list: StyledGroupOptions, - ...props.slots, - }; - - return ; -}); - -CustomOptionGroup.propTypes = { - /** - * The components used for each slot inside the OptionGroup. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots: PropTypes.shape({ - label: PropTypes.elementType, - list: PropTypes.elementType, - root: PropTypes.elementType, - }), -}; - -export default function UnstyledSelectGrouping() { - return ( - - - Frodo - Sam - Merry - Pippin - - - Galadriel - Legolas - - - ); -} diff --git a/docs/data/base/components/select/UnstyledSelectGrouping.tsx b/docs/data/base/components/select/UnstyledSelectGrouping.tsx index 45ebc06a326499..9065cf8efc65d0 100644 --- a/docs/data/base/components/select/UnstyledSelectGrouping.tsx +++ b/docs/data/base/components/select/UnstyledSelectGrouping.tsx @@ -5,6 +5,48 @@ import OptionGroup, { OptionGroupProps } from '@mui/base/OptionGroup'; import Popper from '@mui/base/Popper'; import { styled } from '@mui/system'; +export default function UnstyledSelectGrouping() { + return ( + + + Frodo + Sam + Merry + Pippin + + + Galadriel + Legolas + + + ); +} + +function CustomSelect(props: SelectProps) { + const slots: SelectProps['slots'] = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -} - -const CustomOptionGroup = React.forwardRef(function CustomOptionGroup( - props: OptionGroupProps, - ref: React.ForwardedRef, -) { - const slots: OptionGroupProps['slots'] = { - root: StyledGroupRoot, - label: StyledGroupHeader, - list: StyledGroupOptions, - ...props.slots, - }; - - return ; -}); - -export default function UnstyledSelectGrouping() { - return ( - - - Frodo - Sam - Merry - Pippin - - - Galadriel - Legolas - - - ); -} diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction.js b/docs/data/base/components/select/UnstyledSelectIntroduction.js index 4f2407fbb4d26c..9ede0e7f9f10a9 100644 --- a/docs/data/base/components/select/UnstyledSelectIntroduction.js +++ b/docs/data/base/components/select/UnstyledSelectIntroduction.js @@ -6,6 +6,40 @@ import Popper from '@mui/base/Popper'; import { styled } from '@mui/system'; import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +export default function UnstyledSelectIntroduction() { + return ( + + Documentation + Components + Features + + ); +} + +const CustomSelect = React.forwardRef(function CustomSelect(props, ref) { + const slots = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -}); - -CustomSelect.propTypes = { - /** - * The components used for each slot inside the Select. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots: PropTypes.shape({ - listbox: PropTypes.elementType, - popper: PropTypes.func, - root: PropTypes.elementType, - }), -}; - -export default function UnstyledSelectIntroduction() { - return ( - - Documentation - Components - Features - - ); -} diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction.tsx b/docs/data/base/components/select/UnstyledSelectIntroduction.tsx index 91c62071c8f72d..cc1ad86ea481d6 100644 --- a/docs/data/base/components/select/UnstyledSelectIntroduction.tsx +++ b/docs/data/base/components/select/UnstyledSelectIntroduction.tsx @@ -9,6 +9,30 @@ import Popper from '@mui/base/Popper'; import { styled } from '@mui/system'; import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +export default function UnstyledSelectIntroduction() { + return ( + + Documentation + Components + Features + + ); +} + +const CustomSelect = React.forwardRef(function CustomSelect< + TValue extends {}, + Multiple extends boolean, +>(props: SelectProps, ref: React.ForwardedRef) { + const slots = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -}); - -export default function UnstyledSelectIntroduction() { - return ( - - Documentation - Components - Features - - ); -} diff --git a/docs/data/base/components/select/UnstyledSelectMultiple.js b/docs/data/base/components/select/UnstyledSelectMultiple.js index 75387fd0de1275..ab753117c9e316 100644 --- a/docs/data/base/components/select/UnstyledSelectMultiple.js +++ b/docs/data/base/components/select/UnstyledSelectMultiple.js @@ -5,6 +5,42 @@ import Option, { optionClasses } from '@mui/base/Option'; import Popper from '@mui/base/Popper'; import { styled } from '@mui/system'; +export default function UnstyledSelectsMultiple() { + return ( + + Ten + Twenty + Thirty + Forty + Fifty + + ); +} + +const CustomMultiSelect = React.forwardRef(function CustomMultiSelect(props, ref) { + const slots = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -}); - -CustomMultiSelect.propTypes = { - /** - * The components used for each slot inside the Select. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots: PropTypes.shape({ - listbox: PropTypes.elementType, - popper: PropTypes.func, - root: PropTypes.elementType, - }), -}; - -export default function UnstyledSelectsMultiple() { - return ( - - Ten - Twenty - Thirty - Forty - Fifty - - ); -} diff --git a/docs/data/base/components/select/UnstyledSelectMultiple.tsx b/docs/data/base/components/select/UnstyledSelectMultiple.tsx index 645ef62401a090..3a8c00737c036d 100644 --- a/docs/data/base/components/select/UnstyledSelectMultiple.tsx +++ b/docs/data/base/components/select/UnstyledSelectMultiple.tsx @@ -4,6 +4,32 @@ import Option, { optionClasses } from '@mui/base/Option'; import Popper from '@mui/base/Popper'; import { styled } from '@mui/system'; +export default function UnstyledSelectsMultiple() { + return ( + + Ten + Twenty + Thirty + Forty + Fifty + + ); +} + +const CustomMultiSelect = React.forwardRef(function CustomMultiSelect( + props: SelectProps, + ref: React.ForwardedRef, +) { + const slots: SelectProps['slots'] = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -}); - -export default function UnstyledSelectsMultiple() { - return ( - - Ten - Twenty - Thirty - Forty - Fifty - - ); -} diff --git a/docs/data/base/components/select/UnstyledSelectObjectValues.js b/docs/data/base/components/select/UnstyledSelectObjectValues.js index 0c0ed3b0e4da69..24ec39fb6425bf 100644 --- a/docs/data/base/components/select/UnstyledSelectObjectValues.js +++ b/docs/data/base/components/select/UnstyledSelectObjectValues.js @@ -5,6 +5,58 @@ import Option, { optionClasses } from '@mui/base/Option'; import Popper from '@mui/base/Popper'; import { styled } from '@mui/system'; +export default function UnstyledSelectObjectValues() { + const [character, setCharacter] = React.useState(characters[0]); + return ( +
+ setCharacter(newValue)} + > + {characters.map((c) => ( + + {c.name} + + ))} + + Selected character: + 
{JSON.stringify(character, null, 2)}
+
+ ); +} + +function CustomSelect(props) { + const slots = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -} - -CustomSelect.propTypes = { - /** - * The components used for each slot inside the Select. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots: PropTypes.shape({ - listbox: PropTypes.elementType, - popper: PropTypes.func, - root: PropTypes.elementType, - }), -}; - -const characters = [ - { name: 'Frodo', race: 'Hobbit' }, - { name: 'Sam', race: 'Hobbit' }, - { name: 'Merry', race: 'Hobbit' }, - { name: 'Gandalf', race: 'Maia' }, - { name: 'Gimli', race: 'Dwarf' }, -]; - -export default function UnstyledSelectObjectValues() { - const [character, setCharacter] = React.useState(characters[0]); - return ( -
- setCharacter(newValue)} - > - {characters.map((c) => ( - - {c.name} - - ))} - - Selected character: - 
{JSON.stringify(character, null, 2)}
-
- ); -} diff --git a/docs/data/base/components/select/UnstyledSelectObjectValues.tsx b/docs/data/base/components/select/UnstyledSelectObjectValues.tsx index 73f2927c87c889..1351930071ab3b 100644 --- a/docs/data/base/components/select/UnstyledSelectObjectValues.tsx +++ b/docs/data/base/components/select/UnstyledSelectObjectValues.tsx @@ -4,6 +4,52 @@ import Option, { optionClasses } from '@mui/base/Option'; import Popper from '@mui/base/Popper'; import { styled } from '@mui/system'; +export default function UnstyledSelectObjectValues() { + const [character, setCharacter] = React.useState(characters[0]); + return ( +
+ setCharacter(newValue)} + > + {characters.map((c) => ( + + {c.name} + + ))} + + Selected character: + 
{JSON.stringify(character, null, 2)}
+
+ ); +} + +function CustomSelect( + props: SelectProps, +) { + const slots: SelectProps['slots'] = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -} - -interface Character { - name: string; - race: string; -} - -const characters: Character[] = [ - { name: 'Frodo', race: 'Hobbit' }, - { name: 'Sam', race: 'Hobbit' }, - { name: 'Merry', race: 'Hobbit' }, - { name: 'Gandalf', race: 'Maia' }, - { name: 'Gimli', race: 'Dwarf' }, -]; - -export default function UnstyledSelectObjectValues() { - const [character, setCharacter] = React.useState(characters[0]); - return ( -
- setCharacter(newValue)} - > - {characters.map((c) => ( - - {c.name} - - ))} - - Selected character: - 
{JSON.stringify(character, null, 2)}
-
- ); -} diff --git a/docs/data/base/components/select/UnstyledSelectObjectValues.tsx.preview b/docs/data/base/components/select/UnstyledSelectObjectValues.tsx.preview index e0017db19d9b81..a961f3f0d5fb23 100644 --- a/docs/data/base/components/select/UnstyledSelectObjectValues.tsx.preview +++ b/docs/data/base/components/select/UnstyledSelectObjectValues.tsx.preview @@ -1,6 +1,6 @@ setCharacter(newValue)} + onChange={(event, newValue) => setCharacter(newValue)} > {characters.map((c) => ( diff --git a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js index b29e50e0fd0fe6..f014070c6e73a1 100644 --- a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js +++ b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js @@ -7,6 +7,112 @@ import Popper from '@mui/base/Popper'; import { styled } from '@mui/system'; import Box from '@mui/system/Box'; +export default function UnstyledSelectObjectValuesForm() { + const getSerializedValue = (option) => { + if (option?.value == null) { + return ''; + } + + return `${option.value.race}.${option.value.name}`; + }; + + const handleSubmit = (event) => { + event.preventDefault(); + const formData = new FormData(event.currentTarget); + alert(`character=${formData.get('character')}`); + }; + + return ( +
+
+ +
+ + + {characters.map((character) => ( + + {character.name} + + ))} + +
+ + +
+
+ +
+ + + {characters.map((character) => ( + + {character.name} + + ))} + +
+ + +
+
+ ); +} + +function CustomSelect(props) { + const slots = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -} - -CustomSelect.propTypes = { - /** - * The components used for each slot inside the Select. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots: PropTypes.shape({ - listbox: PropTypes.elementType, - popper: PropTypes.func, - root: PropTypes.elementType, - }), -}; - -const characters = [ - { name: 'Frodo', race: 'Hobbit' }, - { name: 'Sam', race: 'Hobbit' }, - { name: 'Merry', race: 'Hobbit' }, - { name: 'Gandalf', race: 'Maia' }, - { name: 'Gimli', race: 'Dwarf' }, -]; - -export default function UnstyledSelectObjectValuesForm() { - const getSerializedValue = (option) => { - if (option?.value == null) { - return ''; - } - - return `${option.value.race}.${option.value.name}`; - }; - - const handleSubmit = (event) => { - event.preventDefault(); - const formData = new FormData(event.currentTarget); - alert(`character=${formData.get('character')}`); - }; - - return ( -
-
- -
- - - {characters.map((character) => ( - - {character.name} - - ))} - -
- - -
-
- -
- - - {characters.map((character) => ( - - {character.name} - - ))} - -
- - -
-
- ); -} diff --git a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx index 02361ec06020ff..bffabf787c37f7 100644 --- a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx +++ b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx @@ -6,6 +6,106 @@ import Popper from '@mui/base/Popper'; import { styled } from '@mui/system'; import Box from '@mui/system/Box'; +export default function UnstyledSelectObjectValuesForm() { + const getSerializedValue = (option: SelectOption | null) => { + if (option?.value == null) { + return ''; + } + + return `${option.value.race}.${option.value.name}`; + }; + + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + const formData = new FormData(event.currentTarget); + alert(`character=${formData.get('character')}`); + }; + + return ( +
+
+ +
+ + + {characters.map((character) => ( + + {character.name} + + ))} + +
+ + +
+
+ +
+ + + {characters.map((character) => ( + + {character.name} + + ))} + +
+ + +
+
+ ); +} + +function CustomSelect( + props: SelectProps, +) { + const slots: SelectProps['slots'] = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -} - -interface Character { - name: string; - race: string; -} - -const characters: Character[] = [ - { name: 'Frodo', race: 'Hobbit' }, - { name: 'Sam', race: 'Hobbit' }, - { name: 'Merry', race: 'Hobbit' }, - { name: 'Gandalf', race: 'Maia' }, - { name: 'Gimli', race: 'Dwarf' }, -]; - -export default function UnstyledSelectObjectValuesForm() { - const getSerializedValue = (option: SelectOption | null) => { - if (option?.value == null) { - return ''; - } - - return `${option.value.race}.${option.value.name}`; - }; - - const handleSubmit = (event: React.FormEvent) => { - event.preventDefault(); - const formData = new FormData(event.currentTarget); - alert(`character=${formData.get('character')}`); - }; - - return ( -
-
- -
- - - {characters.map((character) => ( - - {character.name} - - ))} - -
- - -
-
- -
- - - {characters.map((character) => ( - - {character.name} - - ))} - -
- - -
-
- ); -} diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.js b/docs/data/base/components/select/UnstyledSelectRichOptions.js index 9edbb0cdb5dd65..e5f9e908814661 100644 --- a/docs/data/base/components/select/UnstyledSelectRichOptions.js +++ b/docs/data/base/components/select/UnstyledSelectRichOptions.js @@ -5,6 +5,49 @@ import Option, { optionClasses } from '@mui/base/Option'; import { styled } from '@mui/system'; import { Popper } from '@mui/base'; +export default function UnstyledSelectRichOptions() { + return ( + + {countries.map((c) => ( + + {`Flag + {c.label} ({c.code}) +{c.phone} + + ))} + + ); +} + +const CustomSelect = React.forwardRef(function CustomSelect(props, ref) { + const slots = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -}); - -CustomSelect.propTypes = { - /** - * The components used for each slot inside the Select. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots: PropTypes.shape({ - listbox: PropTypes.elementType, - popper: PropTypes.func, - root: PropTypes.elementType, - }), -}; - -export default function UnstyledSelectRichOptions() { - return ( - - {countries.map((c) => ( - - {`Flag - {c.label} ({c.code}) +{c.phone} - - ))} - - ); -} - const countries = [ { code: 'AD', label: 'Andorra', phone: '376' }, { diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx index d86ba333f614d0..eb4888eea5cef0 100644 --- a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx +++ b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx @@ -4,6 +4,39 @@ import Option, { optionClasses } from '@mui/base/Option'; import { styled } from '@mui/system'; import { Popper } from '@mui/base'; +export default function UnstyledSelectRichOptions() { + return ( + + {countries.map((c) => ( + + {`Flag + {c.label} ({c.code}) +{c.phone} + + ))} + + ); +} + +const CustomSelect = React.forwardRef(function CustomSelect( + props: SelectProps, + ref: React.ForwardedRef, +) { + const slots: SelectProps['slots'] = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -}); - -export default function UnstyledSelectRichOptions() { - return ( - - {countries.map((c) => ( - - {`Flag - {c.label} ({c.code}) +{c.phone} - - ))} - - ); -} - const countries = [ { code: 'AD', label: 'Andorra', phone: '376' }, { diff --git a/docs/data/base/components/select/UnstyledSelectSimple.js b/docs/data/base/components/select/UnstyledSelectSimple.js index f52f6fcaedc8e7..dadc162ce7c527 100644 --- a/docs/data/base/components/select/UnstyledSelectSimple.js +++ b/docs/data/base/components/select/UnstyledSelectSimple.js @@ -4,6 +4,27 @@ import Option, { optionClasses } from '@mui/base/Option'; import Popper from '@mui/base/Popper'; import { styled } from '@mui/system'; +const CustomSelect = React.forwardRef(function CustomSelect(props, ref) { + const slots = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -}); - -export default function UnstyledSelectSimple() { - return ( - - Ten - Twenty - Thirty - - ); -} diff --git a/docs/data/base/components/select/UnstyledSelectSimple.tsx b/docs/data/base/components/select/UnstyledSelectSimple.tsx index 627d6f5d8dfd65..ef9e24e5788f87 100644 --- a/docs/data/base/components/select/UnstyledSelectSimple.tsx +++ b/docs/data/base/components/select/UnstyledSelectSimple.tsx @@ -4,6 +4,32 @@ import Option, { optionClasses } from '@mui/base/Option'; import Popper from '@mui/base/Popper'; import { styled } from '@mui/system'; +const CustomSelect = React.forwardRef(function CustomSelect< + TValue extends {}, + Multiple extends boolean, +>(props: SelectProps, ref: React.ForwardedRef) { + const slots: SelectProps['slots'] = { + root: StyledButton, + listbox: StyledListbox, + popper: StyledPopper, + ...props.slots, + }; + + return ; -}) as ( - props: SelectProps & React.RefAttributes, -) => JSX.Element; - -export default function UnstyledSelectSimple() { - return ( - - Ten - Twenty - Thirty - - ); -} diff --git a/docs/data/base/components/select/UseSelect.js b/docs/data/base/components/select/UseSelect.js index 06dee98243853f..7ca7ddfa333764 100644 --- a/docs/data/base/components/select/UseSelect.js +++ b/docs/data/base/components/select/UseSelect.js @@ -6,6 +6,10 @@ import useOption from '@mui/base/useOption'; import { styled } from '@mui/system'; import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +export default function UseSelect() { + return ; +} + const blue = { 100: '#DAECFF', 200: '#99CCF3', @@ -241,7 +245,3 @@ const options = [ value: '#2196F3', }, ]; - -export default function UseSelect() { - return ; -} diff --git a/docs/data/base/components/select/UseSelect.tsx b/docs/data/base/components/select/UseSelect.tsx index d63b5ab70d13ee..9d872717f38b57 100644 --- a/docs/data/base/components/select/UseSelect.tsx +++ b/docs/data/base/components/select/UseSelect.tsx @@ -8,6 +8,10 @@ import useOption from '@mui/base/useOption'; import { styled } from '@mui/system'; import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +export default function UseSelect() { + return ; +} + const blue = { 100: '#DAECFF', 200: '#99CCF3', @@ -243,7 +247,3 @@ const options = [ value: '#2196F3', }, ]; - -export default function UseSelect() { - return ; -} From b9edd3daa6359ba84f23fdf4e62fea1a6940cb78 Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Fri, 28 Apr 2023 17:14:28 +0530 Subject: [PATCH 18/70] [TablePagination] Drop component prop (#37059) --- .../table-pagination/table-pagination.md | 39 +++++++------ docs/pages/base/api/table-pagination.json | 1 - .../table-pagination/table-pagination.json | 1 - .../TablePagination/TablePagination.spec.tsx | 57 +++++++++++++++++++ .../TablePagination/TablePagination.test.tsx | 1 + .../src/TablePagination/TablePagination.tsx | 21 ++----- .../TablePagination/TablePagination.types.ts | 7 +-- .../TablePaginationActions.spec.tsx | 15 +++-- .../TablePaginationActions.tsx | 8 +-- .../TablePaginationActions.types.ts | 7 +-- 10 files changed, 102 insertions(+), 55 deletions(-) diff --git a/docs/data/base/components/table-pagination/table-pagination.md b/docs/data/base/components/table-pagination/table-pagination.md index aa1e6c1f2db729..c86150f9761990 100644 --- a/docs/data/base/components/table-pagination/table-pagination.md +++ b/docs/data/base/components/table-pagination/table-pagination.md @@ -22,7 +22,7 @@ It controls two properties of its parent table: - number of rows per page Table Pagination renders its internal elements in a `` tag by default so it can be inserted into a table's ``. -You can use the `component` or `slots.root` prop to render a different root elementβ€”for example, if you need to place the pagination controls outside of the table. +You can use the `slots.root` prop to render a different root elementβ€”for example, if you need to place the pagination controls outside of the table. See the [Slot props section](#slot-props) for details. {{"demo": "UnstyledPaginationIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}} @@ -99,27 +99,17 @@ The Table Pagination component is composed of a root `` that houses up to te ``` -### Slot props +### Custom structure -:::info -The following props are available on all non-utility Base components. -See [Usage](/base/getting-started/usage/) for full details. -::: - -Use the `component` prop to override the root slot with a custom element: - -```jsx - -``` - -Use the `slots` prop to override any interior slots in addition to the root: +Use the `slots` prop to override the root or any other interior slot: ```jsx ``` -:::warning -If the root element is customized with both the `component` and `slots` props, then `component` will take precedence. +:::info +The `slots` prop is available on all non-utility Base components. +See [Overriding component structure](/base/guides/overriding-component-structure/) for full details. ::: Use the `slotProps` prop to pass custom props to internal slots. @@ -131,6 +121,23 @@ The following code snippet applies a CSS class called `my-spacer` to the spacer ## Customization +### Usage with TypeScript + +In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component: + +```tsx + + slots={{ root: CustomComponent }} + customProp +/> +``` + +The same applies for props specific to custom primitive elements: + +```tsx + slots={{ root: 'button' }} onClick={() => {}} /> +``` + ### Custom pagination options You can customize the options shown in the **Rows per page** select using the `rowsPerPageOptions` prop. diff --git a/docs/pages/base/api/table-pagination.json b/docs/pages/base/api/table-pagination.json index 7fde401a6533c1..1ef6b789fb9033 100644 --- a/docs/pages/base/api/table-pagination.json +++ b/docs/pages/base/api/table-pagination.json @@ -4,7 +4,6 @@ "onPageChange": { "type": { "name": "func" }, "required": true }, "page": { "type": { "name": "custom", "description": "integer" }, "required": true }, "rowsPerPage": { "type": { "name": "custom", "description": "integer" }, "required": true }, - "component": { "type": { "name": "elementType" } }, "getItemAriaLabel": { "type": { "name": "func" }, "default": "function defaultGetAriaLabel(type: ItemAriaLabelType) {\n return `Go to ${type} page`;\n}" diff --git a/docs/translations/api-docs-base/table-pagination/table-pagination.json b/docs/translations/api-docs-base/table-pagination/table-pagination.json index 106432ab9dccd0..2c1a32a8a168cf 100644 --- a/docs/translations/api-docs-base/table-pagination/table-pagination.json +++ b/docs/translations/api-docs-base/table-pagination/table-pagination.json @@ -1,7 +1,6 @@ { "componentDescription": "A pagination for tables.", "propDescriptions": { - "component": "The component used for the root node. Either a string to use a HTML element or a component.", "count": "The total number of rows.
To enable server side pagination for an unknown number of items, provide -1.", "getItemAriaLabel": "Accepts a function which returns a string value that provides a user-friendly name for the current page. This is important for screen reader users.
For localization purposes, you can use the provided translations.

Signature:
function(type: string) => string
type: The link or button type to format ('first' | 'last' | 'next' | 'previous').", "labelDisplayedRows": "Customize the displayed rows label. Invoked with a { from, to, count, page } object.
For localization purposes, you can use the provided translations.", diff --git a/packages/mui-base/src/TablePagination/TablePagination.spec.tsx b/packages/mui-base/src/TablePagination/TablePagination.spec.tsx index ade5b8553147f1..bdeca42318a677 100644 --- a/packages/mui-base/src/TablePagination/TablePagination.spec.tsx +++ b/packages/mui-base/src/TablePagination/TablePagination.spec.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import TablePagination from '@mui/base/TablePagination'; +import { expectType } from '@mui/types'; import { TablePaginationActionsSlotProps, TablePaginationDisplayedRowsSlotProps, @@ -75,3 +76,59 @@ const styledTablePagination = ( }} /> ); + +const polymorphicComponentTest = () => { + const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = + function CustomComponent() { + return
; + }; + + const requiredProps = { + count: 10, + getItemAriaLabel: () => '', + onPageChange: () => {}, + page: 0, + rowsPerPage: 10, + showFirstButton: true, + showLastButton: true, + }; + + return ( +
+ {/* @ts-expect-error */} + + + {...requiredProps} slots={{ root: 'a' }} href="#" /> + + + {...requiredProps} + slots={{ root: CustomComponent }} + stringProp="test" + numberProp={0} + /> + {/* @ts-expect-error */} + + {...requiredProps} + slots={{ root: CustomComponent }} + /> + + + {...requiredProps} + slots={{ root: 'button' }} + onClick={(e: React.MouseEvent) => e.currentTarget.checkValidity()} + /> + + + {...requiredProps} + slots={{ root: 'button' }} + ref={(elem) => { + expectType(elem); + }} + onMouseDown={(e) => { + expectType, typeof e>(e); + e.currentTarget.checkValidity(); + }} + /> +
+ ); +}; diff --git a/packages/mui-base/src/TablePagination/TablePagination.test.tsx b/packages/mui-base/src/TablePagination/TablePagination.test.tsx index 57576daa4ac470..bb8ace8ea2e644 100644 --- a/packages/mui-base/src/TablePagination/TablePagination.test.tsx +++ b/packages/mui-base/src/TablePagination/TablePagination.test.tsx @@ -62,6 +62,7 @@ describe('', () => { testWithElement: 'th', }, }, + skip: ['componentProp'], }), ); diff --git a/packages/mui-base/src/TablePagination/TablePagination.tsx b/packages/mui-base/src/TablePagination/TablePagination.tsx index a233ebb085f289..17d383e0db217f 100644 --- a/packages/mui-base/src/TablePagination/TablePagination.tsx +++ b/packages/mui-base/src/TablePagination/TablePagination.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { unstable_useId as useId, chainPropTypes, integerPropType } from '@mui/utils'; -import { OverridableComponent } from '@mui/types'; -import { useSlotProps, WithOptionalOwnerState } from '../utils'; +import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils'; import composeClasses from '../composeClasses'; import isHostComponent from '../utils/isHostComponent'; import TablePaginationActions from './TablePaginationActions'; @@ -63,7 +62,6 @@ const TablePagination = React.forwardRef(function TablePagination< RootComponentType extends React.ElementType, >(props: TablePaginationProps, forwardedRef: React.ForwardedRef) { const { - component, colSpan: colSpanProp, count, getItemAriaLabel = defaultGetAriaLabel, @@ -85,7 +83,8 @@ const TablePagination = React.forwardRef(function TablePagination< const classes = useUtilityClasses(); let colSpan; - if (!component || component === 'td' || !isHostComponent(component)) { + const Root = slots.root ?? 'td'; + if (Root === 'td' || !isHostComponent(Root)) { colSpan = colSpanProp || 1000; // col-span over everything } @@ -99,7 +98,6 @@ const TablePagination = React.forwardRef(function TablePagination< const selectId = useId(selectIdProp); const labelId = useId(labelIdProp); - const Root = component ?? slots.root ?? 'td'; const rootProps: WithOptionalOwnerState = useSlotProps({ elementType: Root, externalSlotProps: slotProps.root, @@ -237,26 +235,17 @@ const TablePagination = React.forwardRef(function TablePagination< ); -}) as OverridableComponent; +}) as PolymorphicComponent; TablePagination.propTypes /* remove-proptypes */ = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - /** - * @ignore - */ - children: PropTypes.node, /** * @ignore */ colSpan: PropTypes.number, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The total number of rows. * @@ -357,7 +346,7 @@ TablePagination.propTypes /* remove-proptypes */ = { * The props used for each slot inside the TablePagination. * @default {} */ - slotProps: PropTypes.shape({ + slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({ actions: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), displayedRows: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), menuItem: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), diff --git a/packages/mui-base/src/TablePagination/TablePagination.types.ts b/packages/mui-base/src/TablePagination/TablePagination.types.ts index 537c185a560bda..e44499a51d31b1 100644 --- a/packages/mui-base/src/TablePagination/TablePagination.types.ts +++ b/packages/mui-base/src/TablePagination/TablePagination.types.ts @@ -1,6 +1,5 @@ import * as React from 'react'; -import { OverrideProps } from '@mui/types'; -import { SlotComponentProps } from '../utils'; +import { PolymorphicProps, SlotComponentProps } from '../utils'; import TablePaginationActions from './TablePaginationActions'; import { ItemAriaLabelType } from './common.types'; @@ -205,9 +204,7 @@ export interface TablePaginationTypeMap< export type TablePaginationProps< RootComponentType extends React.ElementType = TablePaginationTypeMap['defaultComponent'], -> = OverrideProps, RootComponentType> & { - component?: RootComponentType; -}; +> = PolymorphicProps, RootComponentType>; export type TablePaginationOwnerState = TablePaginationOwnProps; diff --git a/packages/mui-base/src/TablePagination/TablePaginationActions.spec.tsx b/packages/mui-base/src/TablePagination/TablePaginationActions.spec.tsx index 7688239f1de868..275b0232b9052c 100644 --- a/packages/mui-base/src/TablePagination/TablePaginationActions.spec.tsx +++ b/packages/mui-base/src/TablePagination/TablePaginationActions.spec.tsx @@ -56,26 +56,29 @@ const polymorphicComponentTest = () => { {/* @ts-expect-error */} - + {...requiredProps} slots={{ root: 'a' }} href="#" /> - {...requiredProps} - component={CustomComponent} + slots={{ root: CustomComponent }} stringProp="test" numberProp={0} /> {/* @ts-expect-error */} - + + {...requiredProps} + slots={{ root: CustomComponent }} + /> ) => e.currentTarget.checkValidity()} /> {...requiredProps} - component="button" + slots={{ root: 'button' }} ref={(elem) => { expectType(elem); }} diff --git a/packages/mui-base/src/TablePagination/TablePaginationActions.tsx b/packages/mui-base/src/TablePagination/TablePaginationActions.tsx index de43160147baee..1795d541831f60 100644 --- a/packages/mui-base/src/TablePagination/TablePaginationActions.tsx +++ b/packages/mui-base/src/TablePagination/TablePaginationActions.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { OverridableComponent } from '@mui/types'; -import { useSlotProps, WithOptionalOwnerState } from '../utils'; +import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils'; import { TablePaginationActionsButtonSlotProps, TablePaginationActionsProps, @@ -36,7 +35,6 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions< forwardedRef: React.ForwardedRef, ) { const { - component, count, getItemAriaLabel = defaultGetAriaLabel, onPageChange, @@ -70,7 +68,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions< onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1)); }; - const Root = slots.root ?? component ?? 'div'; + const Root = slots.root ?? 'div'; const rootProps: WithOptionalOwnerState = useSlotProps({ elementType: Root, externalSlotProps: slotProps.root, @@ -160,6 +158,6 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions< )} ); -}) as OverridableComponent; +}) as PolymorphicComponent; export default TablePaginationActions; diff --git a/packages/mui-base/src/TablePagination/TablePaginationActions.types.ts b/packages/mui-base/src/TablePagination/TablePaginationActions.types.ts index 2297c8112bfbaf..1967ef0d788675 100644 --- a/packages/mui-base/src/TablePagination/TablePaginationActions.types.ts +++ b/packages/mui-base/src/TablePagination/TablePaginationActions.types.ts @@ -1,6 +1,5 @@ import * as React from 'react'; -import { OverrideProps } from '@mui/types'; -import { SlotComponentProps } from '../utils'; +import { PolymorphicProps, SlotComponentProps } from '../utils'; export interface TablePaginationActionsRootSlotPropsOverrides {} export interface TablePaginationActionsFirstButtonSlotPropsOverrides {} @@ -118,9 +117,7 @@ export interface TablePaginationActionsSlots { export type TablePaginationActionsProps< RootComponentType extends React.ElementType = TablePaginationActionsTypeMap['defaultComponent'], -> = OverrideProps, RootComponentType> & { - component?: RootComponentType; -}; +> = PolymorphicProps, RootComponentType>; export interface TablePaginationActionsTypeMap< AdditionalProps = {}, From c7be5142a886b988a11e1bdf9e714bfcecdc967a Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Fri, 28 Apr 2023 17:17:11 +0530 Subject: [PATCH 19/70] [Tabs][base] Drop component prop (#36770) --- docs/data/base/components/tabs/tabs.md | 30 ++++++++++++++----- docs/pages/base/api/tabs.json | 1 - .../translations/api-docs-base/tabs/tabs.json | 1 - packages/mui-base/src/Tabs/Tabs.spec.tsx | 18 ++++++----- packages/mui-base/src/Tabs/Tabs.test.tsx | 1 + packages/mui-base/src/Tabs/Tabs.tsx | 13 ++------ packages/mui-base/src/Tabs/Tabs.types.ts | 7 ++--- 7 files changed, 40 insertions(+), 31 deletions(-) diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md index b5c5a7037c4f52..d25f2658269a53 100644 --- a/docs/data/base/components/tabs/tabs.md +++ b/docs/data/base/components/tabs/tabs.md @@ -84,23 +84,37 @@ The Tab components are each composed of a root slot with no interior slots:
``` -### Slot props +### Custom structure -:::info -The following props are available on all non-utility Base components. -See [Usage](/base/getting-started/usage/) for full details. -::: - -Use the `component` prop to override the root slot with a custom element: +Use the `slots` prop to override the root or any other interior slot: ```jsx - + ``` If you provide a non-interactive element such as a ``, the Tab components will automatically add the necessary accessibility attributes. +:::info +The `slots` prop is available on all non-utility Base components. +See [Overriding component structure](/base/guides/overriding-component-structure/) for full details. +::: + ## Customization +### Usage with TypeScript + +In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component: + +```tsx + slots={{ root: CustomComponent }} customProp /> +``` + +The same applies for props specific to custom primitive elements: + +```tsx + slots={{ root: 'button' }} onClick={() => {}} /> +``` + ### Third-party routing library A common use case for tabs is to implement client-side navigation that doesn't require an HTTP round-trip to the server. diff --git a/docs/pages/base/api/tabs.json b/docs/pages/base/api/tabs.json index 7999fc0783bbd7..d615a62fc12d7a 100644 --- a/docs/pages/base/api/tabs.json +++ b/docs/pages/base/api/tabs.json @@ -1,7 +1,6 @@ { "props": { "children": { "type": { "name": "node" } }, - "component": { "type": { "name": "elementType" } }, "defaultValue": { "type": { "name": "union", "description": "number
| string" } }, "direction": { "type": { "name": "enum", "description": "'ltr'
| 'rtl'" }, diff --git a/docs/translations/api-docs-base/tabs/tabs.json b/docs/translations/api-docs-base/tabs/tabs.json index fe065328796929..37fa6685b070b8 100644 --- a/docs/translations/api-docs-base/tabs/tabs.json +++ b/docs/translations/api-docs-base/tabs/tabs.json @@ -2,7 +2,6 @@ "componentDescription": "", "propDescriptions": { "children": "The content of the component.", - "component": "The component used for the root node. Either a string to use a HTML element or a component.", "defaultValue": "The default value. Use when the component is not controlled.", "direction": "The direction of the text.", "onChange": "Callback invoked when new value is being set.", diff --git a/packages/mui-base/src/Tabs/Tabs.spec.tsx b/packages/mui-base/src/Tabs/Tabs.spec.tsx index 3d9a9bc5da5c10..432291b9003f16 100644 --- a/packages/mui-base/src/Tabs/Tabs.spec.tsx +++ b/packages/mui-base/src/Tabs/Tabs.spec.tsx @@ -20,19 +20,23 @@ const polymorphicComponentTest = () => { {/* @ts-expect-error */} - + slots={{ root: 'a' }} href="#" /> - - {/* @ts-expect-error */} - + + slots={{ root: CustomComponent }} + stringProp="test" + numberProp={0} + /> + {/* @ts-expect-error required props not specified */} + slots={{ root: CustomComponent }} /> - + slots={{ root: 'button' }} onClick={(e: React.MouseEvent) => e.currentTarget.checkValidity()} /> - component="button" + slots={{ root: 'button' }} ref={(elem) => { expectType(elem); }} diff --git a/packages/mui-base/src/Tabs/Tabs.test.tsx b/packages/mui-base/src/Tabs/Tabs.test.tsx index 105baae2f05825..42404704ff06d0 100644 --- a/packages/mui-base/src/Tabs/Tabs.test.tsx +++ b/packages/mui-base/src/Tabs/Tabs.test.tsx @@ -43,6 +43,7 @@ describe('', () => { expectedClassName: classes.root, }, }, + skip: ['componentProp'], })); it('can be named via `aria-label`', () => { diff --git a/packages/mui-base/src/Tabs/Tabs.tsx b/packages/mui-base/src/Tabs/Tabs.tsx index ac9ae86635c95f..2d5b809af6fd35 100644 --- a/packages/mui-base/src/Tabs/Tabs.tsx +++ b/packages/mui-base/src/Tabs/Tabs.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { OverridableComponent } from '@mui/types'; -import { useSlotProps, WithOptionalOwnerState } from '../utils'; +import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils'; import composeClasses from '../composeClasses'; import { getTabsUtilityClass } from './tabsClasses'; import { TabsOwnerState, TabsProps, TabsRootSlotProps, TabsTypeMap } from './Tabs.types'; @@ -39,7 +38,6 @@ const Tabs = React.forwardRef(function Tabs = useSlotProps({ elementType: TabsRoot, externalSlotProps: slotProps.root, @@ -74,7 +72,7 @@ const Tabs = React.forwardRef(function Tabs{children} ); -}) as OverridableComponent; +}) as PolymorphicComponent; Tabs.propTypes /* remove-proptypes */ = { // ----------------------------- Warning -------------------------------- @@ -85,11 +83,6 @@ Tabs.propTypes /* remove-proptypes */ = { * The content of the component. */ children: PropTypes.node, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The default value. Use when the component is not controlled. */ diff --git a/packages/mui-base/src/Tabs/Tabs.types.ts b/packages/mui-base/src/Tabs/Tabs.types.ts index 56cea3e0b3e7ec..10d552b3bff283 100644 --- a/packages/mui-base/src/Tabs/Tabs.types.ts +++ b/packages/mui-base/src/Tabs/Tabs.types.ts @@ -1,6 +1,7 @@ import * as React from 'react'; -import { OverrideProps, Simplify } from '@mui/types'; +import { Simplify } from '@mui/types'; import { SlotComponentProps } from '../utils'; +import { PolymorphicProps } from '../utils/PolymorphicComponent'; export interface TabsRootSlotPropsOverrides {} @@ -75,9 +76,7 @@ export interface TabsTypeMap< export type TabsProps< RootComponentType extends React.ElementType = TabsTypeMap['defaultComponent'], -> = OverrideProps, RootComponentType> & { - component?: RootComponentType; -}; +> = PolymorphicProps, RootComponentType>; export type TabsOwnerState = Simplify< TabsOwnProps & { From ed404b0fc597e08f524fdec038a28e7213d8e608 Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Fri, 28 Apr 2023 17:17:44 +0530 Subject: [PATCH 20/70] [Tab][base] Drop component prop (#36768) --- docs/pages/base/api/tab.json | 1 - docs/translations/api-docs-base/tab/tab.json | 1 - packages/mui-base/src/Tab/Tab.spec.tsx | 15 +++++++++----- packages/mui-base/src/Tab/Tab.test.tsx | 1 + packages/mui-base/src/Tab/Tab.tsx | 21 +++----------------- packages/mui-base/src/Tab/Tab.types.ts | 7 +++---- 6 files changed, 17 insertions(+), 29 deletions(-) diff --git a/docs/pages/base/api/tab.json b/docs/pages/base/api/tab.json index 0d2fe9214a1b32..8bff7bbd848cc0 100644 --- a/docs/pages/base/api/tab.json +++ b/docs/pages/base/api/tab.json @@ -6,7 +6,6 @@ "description": "func
| { current?: { focusVisible: func } }" } }, - "component": { "type": { "name": "elementType" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "onChange": { "type": { "name": "func" } }, "slotProps": { diff --git a/docs/translations/api-docs-base/tab/tab.json b/docs/translations/api-docs-base/tab/tab.json index a022f725a44992..6b1f4d81a06a29 100644 --- a/docs/translations/api-docs-base/tab/tab.json +++ b/docs/translations/api-docs-base/tab/tab.json @@ -2,7 +2,6 @@ "componentDescription": "", "propDescriptions": { "action": "A ref for imperative actions. It currently only supports focusVisible() action.", - "component": "The component used for the root node. Either a string to use a HTML element or a component.", "disabled": "If true, the component is disabled.", "onChange": "Callback invoked when new value is being set.", "slotProps": "The props used for each slot inside the Tab.", diff --git a/packages/mui-base/src/Tab/Tab.spec.tsx b/packages/mui-base/src/Tab/Tab.spec.tsx index 3c3c30f0a88da0..ace9ce29f195d9 100644 --- a/packages/mui-base/src/Tab/Tab.spec.tsx +++ b/packages/mui-base/src/Tab/Tab.spec.tsx @@ -20,21 +20,26 @@ const polymorphicComponentTest = () => { {/* @ts-expect-error */} - + - + + value={0} + slots={{ root: CustomComponent }} + stringProp="test" + numberProp={0} + /> {/* @ts-expect-error */} - + ) => e.currentTarget.checkValidity()} /> value={0} - component="button" + slots={{ root: 'button' }} ref={(elem) => { expectType(elem); }} diff --git a/packages/mui-base/src/Tab/Tab.test.tsx b/packages/mui-base/src/Tab/Tab.test.tsx index 0d1e128ab9a82f..47caae63b5e08c 100644 --- a/packages/mui-base/src/Tab/Tab.test.tsx +++ b/packages/mui-base/src/Tab/Tab.test.tsx @@ -65,6 +65,7 @@ describe('', () => { }, skip: [ 'reactTestRenderer', // Need to be wrapped with TabsContext + 'componentProp', ], })); }); diff --git a/packages/mui-base/src/Tab/Tab.tsx b/packages/mui-base/src/Tab/Tab.tsx index b1abb62b4dbd38..17220a3a42170f 100644 --- a/packages/mui-base/src/Tab/Tab.tsx +++ b/packages/mui-base/src/Tab/Tab.tsx @@ -1,12 +1,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { OverridableComponent } from '@mui/types'; import { unstable_useForkRef as useForkRef } from '@mui/utils'; import composeClasses from '../composeClasses'; import { getTabUtilityClass } from './tabClasses'; import { TabProps, TabTypeMap, TabRootSlotProps, TabOwnerState } from './Tab.types'; import useTab from '../useTab'; -import { useSlotProps, WithOptionalOwnerState } from '../utils'; +import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils'; import { useClassNamesOverride } from '../utils/ClassNameConfigurator'; const useUtilityClasses = (ownerState: TabOwnerState) => { @@ -40,7 +39,6 @@ const Tab = React.forwardRef(function Tab = useSlotProps({ elementType: TabRoot, getSlotProps: getRootProps, @@ -78,7 +76,7 @@ const Tab = React.forwardRef(function Tab{children}; -}) as OverridableComponent; +}) as PolymorphicComponent; Tab.propTypes /* remove-proptypes */ = { // ----------------------------- Warning -------------------------------- @@ -100,11 +98,6 @@ Tab.propTypes /* remove-proptypes */ = { * @ignore */ children: PropTypes.node, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * If `true`, the component is disabled. * @default false @@ -114,14 +107,6 @@ Tab.propTypes /* remove-proptypes */ = { * Callback invoked when new value is being set. */ onChange: PropTypes.func, - /** - * @ignore - */ - onClick: PropTypes.func, - /** - * @ignore - */ - onFocus: PropTypes.func, /** * The props used for each slot inside the Tab. * @default {} diff --git a/packages/mui-base/src/Tab/Tab.types.ts b/packages/mui-base/src/Tab/Tab.types.ts index 226e7ef6b0d898..0f35c00f3f1801 100644 --- a/packages/mui-base/src/Tab/Tab.types.ts +++ b/packages/mui-base/src/Tab/Tab.types.ts @@ -1,8 +1,9 @@ -import { OverrideProps, Simplify } from '@mui/types'; +import { Simplify } from '@mui/types'; import * as React from 'react'; import { ButtonOwnProps } from '../Button'; import { SlotComponentProps } from '../utils'; import { UseTabRootSlotProps } from '../useTab'; +import { PolymorphicProps } from '../utils/PolymorphicComponent'; export interface TabRootSlotPropsOverrides {} @@ -39,9 +40,7 @@ export interface TabSlots { } export type TabProps = - OverrideProps, RootComponentType> & { - component?: RootComponentType; - }; + PolymorphicProps, RootComponentType>; export interface TabTypeMap< AdditionalProps = {}, From 7e8b4f4a481c7071f559ea5d6a7bc05bf9a8c97c Mon Sep 17 00:00:00 2001 From: Varun Mulay <35381801+varunmulay22@users.noreply.github.com> Date: Fri, 28 Apr 2023 17:34:22 +0530 Subject: [PATCH 21/70] [docs][base] Move styles to the bottom of demos code for `SwitchUnstyled` (#36720) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: MichaΕ‚ Dudak --- .../switch/UnstyledSwitchIntroduction.js | 25 ++++----- .../switch/UnstyledSwitchIntroduction.tsx | 25 ++++----- .../components/switch/UnstyledSwitches.js | 25 ++++----- .../components/switch/UnstyledSwitches.tsx | 25 ++++----- .../components/switch/UseSwitchesBasic.js | 56 +++++++++---------- .../components/switch/UseSwitchesBasic.tsx | 56 +++++++++---------- .../components/switch/UseSwitchesCustom.js | 46 +++++++-------- .../components/switch/UseSwitchesCustom.tsx | 46 +++++++-------- 8 files changed, 150 insertions(+), 154 deletions(-) diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction.js index 0245c786d342ec..8e3688bea77832 100644 --- a/docs/data/base/components/switch/UnstyledSwitchIntroduction.js +++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction.js @@ -2,6 +2,18 @@ import * as React from 'react'; import { styled } from '@mui/system'; import Switch, { switchClasses } from '@mui/base/Switch'; +export default function UnstyledSwitches() { + const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } }; + + return ( +
+ + + + +
+ ); +} const blue = { 500: '#007FFF', }; @@ -81,16 +93,3 @@ const Root = styled('span')( } `, ); - -export default function UnstyledSwitches() { - const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } }; - - return ( -
- - - - -
- ); -} diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction.tsx index 0245c786d342ec..8e3688bea77832 100644 --- a/docs/data/base/components/switch/UnstyledSwitchIntroduction.tsx +++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction.tsx @@ -2,6 +2,18 @@ import * as React from 'react'; import { styled } from '@mui/system'; import Switch, { switchClasses } from '@mui/base/Switch'; +export default function UnstyledSwitches() { + const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } }; + + return ( +
+ + + + +
+ ); +} const blue = { 500: '#007FFF', }; @@ -81,16 +93,3 @@ const Root = styled('span')( } `, ); - -export default function UnstyledSwitches() { - const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } }; - - return ( -
- - - - -
- ); -} diff --git a/docs/data/base/components/switch/UnstyledSwitches.js b/docs/data/base/components/switch/UnstyledSwitches.js index 0245c786d342ec..8e3688bea77832 100644 --- a/docs/data/base/components/switch/UnstyledSwitches.js +++ b/docs/data/base/components/switch/UnstyledSwitches.js @@ -2,6 +2,18 @@ import * as React from 'react'; import { styled } from '@mui/system'; import Switch, { switchClasses } from '@mui/base/Switch'; +export default function UnstyledSwitches() { + const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } }; + + return ( +
+ + + + +
+ ); +} const blue = { 500: '#007FFF', }; @@ -81,16 +93,3 @@ const Root = styled('span')( } `, ); - -export default function UnstyledSwitches() { - const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } }; - - return ( -
- - - - -
- ); -} diff --git a/docs/data/base/components/switch/UnstyledSwitches.tsx b/docs/data/base/components/switch/UnstyledSwitches.tsx index 0245c786d342ec..8e3688bea77832 100644 --- a/docs/data/base/components/switch/UnstyledSwitches.tsx +++ b/docs/data/base/components/switch/UnstyledSwitches.tsx @@ -2,6 +2,18 @@ import * as React from 'react'; import { styled } from '@mui/system'; import Switch, { switchClasses } from '@mui/base/Switch'; +export default function UnstyledSwitches() { + const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } }; + + return ( +
+ + + + +
+ ); +} const blue = { 500: '#007FFF', }; @@ -81,16 +93,3 @@ const Root = styled('span')( } `, ); - -export default function UnstyledSwitches() { - const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } }; - - return ( -
- - - - -
- ); -} diff --git a/docs/data/base/components/switch/UseSwitchesBasic.js b/docs/data/base/components/switch/UseSwitchesBasic.js index 6d50155cc28566..5d1536a35b073b 100644 --- a/docs/data/base/components/switch/UseSwitchesBasic.js +++ b/docs/data/base/components/switch/UseSwitchesBasic.js @@ -3,6 +3,34 @@ import clsx from 'clsx'; import { styled } from '@mui/system'; import useSwitch from '@mui/base/useSwitch'; +export default function UseSwitchesBasic() { + return ( +
+ + + + +
+ ); +} + +function BasicSwitch(props) { + const { getInputProps, checked, disabled, focusVisible } = useSwitch(props); + + const stateClasses = { + 'Switch-checked': checked, + 'Switch-disabled': disabled, + 'Switch-focusVisible': focusVisible, + }; + + return ( + + + + + ); +} + const blue = { 500: '#007FFF', }; @@ -72,31 +100,3 @@ const BasicSwitchThumb = styled('span')` background-color: #fff; } `; - -function BasicSwitch(props) { - const { getInputProps, checked, disabled, focusVisible } = useSwitch(props); - - const stateClasses = { - 'Switch-checked': checked, - 'Switch-disabled': disabled, - 'Switch-focusVisible': focusVisible, - }; - - return ( - - - - - ); -} - -export default function UseSwitchesBasic() { - return ( -
- - - - -
- ); -} diff --git a/docs/data/base/components/switch/UseSwitchesBasic.tsx b/docs/data/base/components/switch/UseSwitchesBasic.tsx index b0f8b130aecdb1..b34431df6a9a8f 100644 --- a/docs/data/base/components/switch/UseSwitchesBasic.tsx +++ b/docs/data/base/components/switch/UseSwitchesBasic.tsx @@ -3,6 +3,34 @@ import clsx from 'clsx'; import { styled } from '@mui/system'; import useSwitch, { UseSwitchParameters } from '@mui/base/useSwitch'; +export default function UseSwitchesBasic() { + return ( +
+ + + + +
+ ); +} + +function BasicSwitch(props: UseSwitchParameters) { + const { getInputProps, checked, disabled, focusVisible } = useSwitch(props); + + const stateClasses = { + 'Switch-checked': checked, + 'Switch-disabled': disabled, + 'Switch-focusVisible': focusVisible, + }; + + return ( + + + + + ); +} + const blue = { 500: '#007FFF', }; @@ -72,31 +100,3 @@ const BasicSwitchThumb = styled('span')` background-color: #fff; } `; - -function BasicSwitch(props: UseSwitchParameters) { - const { getInputProps, checked, disabled, focusVisible } = useSwitch(props); - - const stateClasses = { - 'Switch-checked': checked, - 'Switch-disabled': disabled, - 'Switch-focusVisible': focusVisible, - }; - - return ( - - - - - ); -} - -export default function UseSwitchesBasic() { - return ( -
- - - - -
- ); -} diff --git a/docs/data/base/components/switch/UseSwitchesCustom.js b/docs/data/base/components/switch/UseSwitchesCustom.js index 0d496c1a252641..cf64ab332d5b9b 100644 --- a/docs/data/base/components/switch/UseSwitchesCustom.js +++ b/docs/data/base/components/switch/UseSwitchesCustom.js @@ -3,6 +3,29 @@ import clsx from 'clsx'; import { styled } from '@mui/system'; import useSwitch from '@mui/base/useSwitch'; +export default function UseSwitchesCustom() { + return ; +} + +function MUISwitch(props) { + const { getInputProps, checked, disabled, focusVisible } = useSwitch(props); + + const stateClasses = { + checked, + disabled, + focusVisible, + }; + + return ( + + + + + + + ); +} + const blue = { 700: '#0059B2', }; @@ -78,26 +101,3 @@ const SwitchTrack = styled('span')( display: block; `, ); - -function MUISwitch(props) { - const { getInputProps, checked, disabled, focusVisible } = useSwitch(props); - - const stateClasses = { - checked, - disabled, - focusVisible, - }; - - return ( - - - - - - - ); -} - -export default function UseSwitchesCustom() { - return ; -} diff --git a/docs/data/base/components/switch/UseSwitchesCustom.tsx b/docs/data/base/components/switch/UseSwitchesCustom.tsx index 15dccad3c8dedf..70690c85790874 100644 --- a/docs/data/base/components/switch/UseSwitchesCustom.tsx +++ b/docs/data/base/components/switch/UseSwitchesCustom.tsx @@ -3,6 +3,29 @@ import clsx from 'clsx'; import { styled } from '@mui/system'; import useSwitch, { UseSwitchParameters } from '@mui/base/useSwitch'; +export default function UseSwitchesCustom() { + return ; +} + +function MUISwitch(props: UseSwitchParameters) { + const { getInputProps, checked, disabled, focusVisible } = useSwitch(props); + + const stateClasses = { + checked, + disabled, + focusVisible, + }; + + return ( + + + + + + + ); +} + const blue = { 700: '#0059B2', }; @@ -78,26 +101,3 @@ const SwitchTrack = styled('span')( display: block; `, ); - -function MUISwitch(props: UseSwitchParameters) { - const { getInputProps, checked, disabled, focusVisible } = useSwitch(props); - - const stateClasses = { - checked, - disabled, - focusVisible, - }; - - return ( - - - - - - - ); -} - -export default function UseSwitchesCustom() { - return ; -} From 590c1b37100f3a990c650bc85fc9d7c3ae1e8707 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Fri, 28 Apr 2023 13:37:02 +0100 Subject: [PATCH 22/70] [Badge][base] Drop `component` prop (#37028) --- docs/data/base/components/badge/badge.md | 34 +++++++++-------- docs/data/base/components/button/button.md | 2 +- docs/pages/base/api/badge.json | 1 - .../api-docs-base/badge/badge.json | 1 - packages/mui-base/src/Badge/Badge.spec.tsx | 38 ++++++++++++++++--- packages/mui-base/src/Badge/Badge.test.tsx | 1 + packages/mui-base/src/Badge/Badge.tsx | 14 ++----- 7 files changed, 57 insertions(+), 34 deletions(-) diff --git a/docs/data/base/components/badge/badge.md b/docs/data/base/components/badge/badge.md index 35937ce0265851..ec65a62c88a7c8 100644 --- a/docs/data/base/components/badge/badge.md +++ b/docs/data/base/components/badge/badge.md @@ -59,27 +59,17 @@ The Badge component is composed of a root `` that houses the element that ``` -### Slot props +### Custom structure -:::info -The following props are available on all non-utility Base components. -See [Usage](/base/getting-started/usage/) for full details. -::: - -Use the `component` prop to override the root slot with a custom element: - -```jsx - -``` - -Use the `slots` prop to override any interior slots in addition to the root: +Use the `slots` prop to override the root or any other interior slot: ```jsx ``` -:::warning -If the root element is customized with both the `component` and `slots` props, then `component` will take precedence. +:::info +The `slots` prop is available on all non-utility Base components. +See [Overriding component structure](/base/guides/overriding-component-structure/) for full details. ::: Use the `slotProps` prop to pass custom props to internal slots. @@ -89,6 +79,20 @@ The following code snippet applies a CSS class called `my-badge` to the badge sl ``` +#### Usage with TypeScript + +In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component: + +```tsx + slots={{ root: CustomComponent }} customProp /> +``` + +The same applies for props specific to custom primitive elements: + +```tsx + slots={{ root: 'img' }} src="badge.png" /> +``` + ## Hook ```jsx diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md index f8247cbdff004a..72a5fc101e214a 100644 --- a/docs/data/base/components/button/button.md +++ b/docs/data/base/components/button/button.md @@ -80,7 +80,7 @@ Similarly, ` ``` -For non-MUI components, use the `component` prop. +For non-Material UI components, use the `component` prop. ```diff - diff --git a/docs/data/material/components/css-baseline/css-baseline.md b/docs/data/material/components/css-baseline/css-baseline.md index d0c0033f997444..b4583ada27f05d 100644 --- a/docs/data/material/components/css-baseline/css-baseline.md +++ b/docs/data/material/components/css-baseline/css-baseline.md @@ -30,7 +30,7 @@ export default function MyApp() { ## Scoping on children -However, you might be progressively migrating a website to MUI, using a global reset might not be an option. +However, you might be progressively migrating a website to Material UI, using a global reset might not be an option. It's possible to apply the baseline only to the children by using the `ScopedCssBaseline` component. ```jsx diff --git a/docs/data/material/components/icons/icons.md b/docs/data/material/components/icons/icons.md index bb8357c4329d33..7aabade29d51ab 100644 --- a/docs/data/material/components/icons/icons.md +++ b/docs/data/material/components/icons/icons.md @@ -8,9 +8,9 @@ materialDesign: https://m2.material.io/design/iconography/system-icons.html # Icons -

Guidance and suggestions for using icons with MUI.

+

Guidance and suggestions for using icons with Material UI.

-MUI provides icons support in three ways: +Material UI provides icon support in three ways: 1. Standardized [Material Icons](#material-svg-icons) exported as React components (SVG icons). 1. With the [SvgIcon](#svgicon) component, a React wrapper for custom SVG icons. @@ -36,7 +36,7 @@ Or **yarn**: yarn add @mui/icons-material ``` -These components use the MUI `SvgIcon` component to render the SVG path for each icon, and so have a peer-dependency on `@mui/material`. +These components use the Material UI `SvgIcon` component to render the SVG path for each icon, and so have a peer-dependency on `@mui/material`. If you aren't already using Material UI in your project, you can add it following the [installation guide](/material-ui/getting-started/installation/). @@ -94,7 +94,7 @@ If you need a custom SVG icon (not available in the [Material Icons](/material-u This component extends the native `` element: - It comes with built-in accessibility. -- SVG elements should be scaled for a 24x24px viewport so that the resulting icon can be used as is, or included as a child for other MUI components that use icons. +- SVG elements should be scaled for a 24x24px viewport so that the resulting icon can be used as is, or included as a child for other Material UI components that use icons. This can be customized with the `viewBox` attribute. To inherit the `viewBox` value from the original image, the `inheritViewBox` prop can be used. - By default, the component inherits the current color. Optionally, you can apply one of the theme colors using the `color` prop. diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md index dedd1f30feada4..308568eef4c876 100644 --- a/docs/data/material/components/text-fields/text-fields.md +++ b/docs/data/material/components/text-fields/text-fields.md @@ -306,9 +306,9 @@ In order for the text field to be accessible, **the input should be linked to th For more advanced use cases, you might be able to take advantage of: - [react-hook-form](https://react-hook-form.com/): React hook for form validation. -- [react-hook-form-mui](https://github.com/dohomi/react-hook-form-mui): MUI and react-hook-form combined. -- [formik-material-ui](https://github.com/stackworx/formik-mui): Bindings for using MUI with [formik](https://formik.org/). -- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui): Bindings for using MUI with [Redux Form](https://redux-form.com/). -- [mui-rff](https://github.com/lookfirst/mui-rff): Bindings for using MUI with [React Final Form](https://final-form.org/react). +- [react-hook-form-mui](https://github.com/dohomi/react-hook-form-mui): Material UI and react-hook-form combined. +- [formik-material-ui](https://github.com/stackworx/formik-mui): Bindings for using Material UI with [formik](https://formik.org/). +- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui): Bindings for using Material UI with [Redux Form](https://redux-form.com/). +- [mui-rff](https://github.com/lookfirst/mui-rff): Bindings for using Material UI with [React Final Form](https://final-form.org/react). - [@ui-schema/ds-material](https://www.npmjs.com/package/@ui-schema/ds-material) Bindings for using Material UI with [UI Schema](https://github.com/ui-schema/ui-schema). JSON Schema compatible. - [@data-driven-forms/mui-component-mapper](https://www.data-driven-forms.org/provided-mappers/mui-component-mapper): Bindings for using Material UI with [Data Driven Forms](https://github.com/data-driven-forms/react-forms). diff --git a/docs/data/material/components/tooltips/tooltips.md b/docs/data/material/components/tooltips/tooltips.md index cda713555bbf77..7467a4544c1d9a 100644 --- a/docs/data/material/components/tooltips/tooltips.md +++ b/docs/data/material/components/tooltips/tooltips.md @@ -129,7 +129,7 @@ In order to work with Safari, you need at least one display block or flex item b {{"demo": "DisabledTooltips.js"}} :::warning -If you're not wrapping a MUI component that inherits from `ButtonBase`, for instance, a native `

Transitions help to make a UI expressive and easy to use.

-MUI provides transitions that can be used to introduce some basic [motion](https://m2.material.io/design/motion/) to your applications. +Material UI provides transitions that can be used to introduce some basic [motion](https://m2.material.io/design/motion/) to your applications. {{"component": "modules/components/ComponentLinkHeader.js", "design": false}} @@ -66,7 +66,7 @@ This example also demonstrates how to delay the enter transition. ## Child requirement -- **Forward the style**: To better support server rendering, MUI provides a `style` prop to the children of some transition components (Fade, Grow, Zoom, Slide). +- **Forward the style**: To better support server rendering, Material UI provides a `style` prop to the children of some transition components (Fade, Grow, Zoom, Slide). The `style` prop must be applied to the DOM for the animation to work as expected. - **Forward the ref**: The transition components require the first child element to forward its ref to the DOM node. For more details about ref, check out [Caveat with refs](/material-ui/guides/composition/#caveat-with-refs) - **Single element**: The transition components require only one child element (`React.Fragment` is not allowed). @@ -101,7 +101,7 @@ As components are added or removed, the `in` prop is toggled automatically by `T ## TransitionComponent prop -Some MUI components use these transitions internally. These accept a `TransitionComponent` prop to customize the default transition. +Some Material UI components use these transitions internally. These accept a `TransitionComponent` prop to customize the default transition. You can use any of the above components or your own. It should respect the following conditions: diff --git a/docs/data/material/components/typography/typography.md b/docs/data/material/components/typography/typography.md index 5fd028b6a14aa1..a3a90672c11ef2 100644 --- a/docs/data/material/components/typography/typography.md +++ b/docs/data/material/components/typography/typography.md @@ -17,7 +17,7 @@ A [typographic scale](https://m2.material.io/design/typography/#type-scale) has ## General -The _Roboto_ font will **not** be automatically loaded by MUI. +The _Roboto_ font will **not** be automatically loaded by Material UI. You are responsible for loading any fonts used in your application. Roboto Font has a few easy ways to get started. For more advanced configuration, check out [the theme customization section](/material-ui/customization/typography/). @@ -57,7 +57,7 @@ import '@fontsource/roboto/700.css'; For more info check out [Fontsource](https://github.com/fontsource/fontsource). Fontsource can be configured to load specific subsets, weights and styles. -MUI default typography configuration only relies on 300, 400, 500, and 700 font weights. +Material UI default typography configuration only relies on 300, 400, 500, and 700 font weights. ## Component diff --git a/docs/data/material/components/use-media-query/use-media-query.md b/docs/data/material/components/use-media-query/use-media-query.md index d90bdafb2557e4..b624e1edced218 100644 --- a/docs/data/material/components/use-media-query/use-media-query.md +++ b/docs/data/material/components/use-media-query/use-media-query.md @@ -26,9 +26,9 @@ The media query string can be any valid CSS media query, e.g. [`'(prefers-color- ⚠️ You can't use `'print'` per browsers limitation, e.g. [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=774398). -## Using MUI's breakpoint helpers +## Using Material UI's breakpoint helpers -You can use MUI's [breakpoint helpers](/material-ui/customization/breakpoints/) as follows: +You can use Material UI's [breakpoint helpers](/material-ui/customization/breakpoints/) as follows: ```jsx import { useTheme } from '@mui/material/styles'; diff --git a/docs/data/material/customization/breakpoints/breakpoints.md b/docs/data/material/customization/breakpoints/breakpoints.md index 1f79ebf9e00741..69a829ff983ba9 100644 --- a/docs/data/material/customization/breakpoints/breakpoints.md +++ b/docs/data/material/customization/breakpoints/breakpoints.md @@ -3,7 +3,7 @@

API that enables the use of breakpoints in a wide variety of contexts.

For optimal user experience, Material Design interfaces need to be able to adapt their layout at various breakpoints. -MUI uses a **simplified** implementation of the original [specification](https://m2.material.io/design/layout/responsive-layout-grid.html#breakpoints). +Material UI uses a **simplified** implementation of the original [specification](https://m2.material.io/design/layout/responsive-layout-grid.html#breakpoints). The breakpoints are used internally in various components to make them responsive, but you can also take advantage of them diff --git a/docs/data/material/customization/color/color.md b/docs/data/material/customization/color/color.md index 02928b597e6892..4a56fcebc77af2 100644 --- a/docs/data/material/customization/color/color.md +++ b/docs/data/material/customization/color/color.md @@ -71,7 +71,7 @@ If you are using the default primary and / or secondary shades then by providing ### Tools by the community -- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the MUI component library. Includes basic site templates to show various components and how they are affected by the theme +- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the Material UI component library. Includes basic site templates to show various components and how they are affected by the theme - [Material palette generator](https://m2.material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input. ## 2014 Material Design color palettes @@ -80,7 +80,7 @@ These color palettes, originally created by Material Design in 2014, are compris ### Important Terms -- **Palette**: A palette is a collection of colors, i.e. hues and their shades. MUI provides all colors from the Material Design guidelines. +- **Palette**: A palette is a collection of colors, i.e. hues and their shades. Material UI provides all colors from the Material Design guidelines. [This color palette](#color-palette) has been designed with colors that work harmoniously with each other. - **Hue & Shade**: A single color within the palette is made up of a hue such as "red", and shade, such as "500". "red 50" is the lightest shade of red (_pink!_), while "red 900" is the darkest. diff --git a/docs/data/material/customization/density/density.md b/docs/data/material/customization/density/density.md index a9415dfd5f0b46..bf7bf09d29ed7d 100644 --- a/docs/data/material/customization/density/density.md +++ b/docs/data/material/customization/density/density.md @@ -1,6 +1,6 @@ # Density -

How to apply density to MUI components.

+

How to apply density to Material UI components.

## Applying density @@ -35,7 +35,7 @@ The following components have props applying higher density: ## Explore theme density This tool allows you to apply density via spacing and component props. You can browse -around and see how this applies to the overall feel of MUI components. +around and see how this applies to the overall feel of Material UI components. If you enable high density a custom theme is applied to the docs. This theme is only for demonstration purposes. You _should not_ apply this theme to your whole application diff --git a/docs/data/material/customization/spacing/spacing.md b/docs/data/material/customization/spacing/spacing.md index c3d02670b3a836..f1e743c66545d4 100644 --- a/docs/data/material/customization/spacing/spacing.md +++ b/docs/data/material/customization/spacing/spacing.md @@ -2,7 +2,7 @@

Use the theme.spacing() helper to create consistent spacing between the elements of your UI.

-MUI uses [a recommended 8px scaling factor](https://m2.material.io/design/layout/understanding-layout.html) by default. +Material UI uses [a recommended 8px scaling factor](https://m2.material.io/design/layout/understanding-layout.html) by default. ```js const theme = createTheme(); diff --git a/docs/data/material/customization/theming/theming.md b/docs/data/material/customization/theming/theming.md index 2b18db5e642c6e..e8fe3b719b720f 100644 --- a/docs/data/material/customization/theming/theming.md +++ b/docs/data/material/customization/theming/theming.md @@ -1,6 +1,6 @@ # Theming -

Customize MUI with your theme. You can change the colors, the typography and much more.

+

Customize Material UI with your theme. You can change the colors, the typography and much more.

The theme specifies the color of the components, darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc. @@ -11,14 +11,14 @@ To promote greater consistency between apps, light and dark theme types are avai ## Theme provider If you wish to customize the theme, you need to use the `ThemeProvider` component in order to inject a theme into your application. -However, this is optional; MUI components come with a default theme. +However, this is optional; Material UI components come with a default theme. `ThemeProvider` relies on the [context feature of React](https://react.dev/learn/passing-data-deeply-with-context) to pass the theme down to the components, so you need to make sure that `ThemeProvider` is a parent of the components you are trying to customize. You can learn more about this in [the API section](#themeprovider). ## Theme configuration variables -Changing the theme configuration variables is the most effective way to match MUI to your needs. +Changing the theme configuration variables is the most effective way to match Material UI to your needs. The following sections cover the most important theme variables: - [`.palette`](/material-ui/customization/palette/) @@ -33,7 +33,7 @@ You can check out the [default theme section](/material-ui/customization/default ### Custom variables -When using MUI's theme with [MUI System](/system/getting-started/overview/) or [any other styling solution](/material-ui/guides/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere. +When using Material UI's theme with [MUI System](/system/getting-started/overview/) or [any other styling solution](/material-ui/guides/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere. For instance: ```jsx @@ -80,7 +80,7 @@ declare module '@mui/material/styles' { The community has built great tools to build a theme: -- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the MUI component library. Includes basic site templates to show various components and how they are affected by the theme +- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the Material UI component library. Includes basic site templates to show various components and how they are affected by the theme - [Material palette generator](https://m2.material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input. ## Accessing the theme in a component diff --git a/docs/data/material/customization/transitions/transitions.md b/docs/data/material/customization/transitions/transitions.md index f38f426b4fdb96..cef7b16a40a259 100644 --- a/docs/data/material/customization/transitions/transitions.md +++ b/docs/data/material/customization/transitions/transitions.md @@ -1,6 +1,6 @@ # Transitions -

The theme key enables you to customize the durations and easings of the various transitions used across MUI components, and offers a utility for creating custom transitions.

+

The theme key enables you to customize the durations and easings of the various transitions used across Material UI components, and offers a utility for creating custom transitions.

## API @@ -87,4 +87,4 @@ const theme = createTheme({ ## References -Check out the [Transitions](/material-ui/transitions/) page to explore the transition components that are included with MUI. +Check out the [Transitions](/material-ui/transitions/) page to explore the transition components that are included with Material UI. diff --git a/docs/data/material/customization/typography/typography.md b/docs/data/material/customization/typography/typography.md index 239a007684fa66..7fac41e1b419d0 100644 --- a/docs/data/material/customization/typography/typography.md +++ b/docs/data/material/customization/typography/typography.md @@ -84,13 +84,13 @@ Note that if you want to add additional `@font-face` declarations, you need to u ## Font size -MUI uses `rem` units for the font size. +Material UI uses `rem` units for the font size. The browser `` element default font size is `16px`, but browsers have an option to change this value, so `rem` units allow us to accommodate the user's settings, resulting in a better accessibility support. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance. -To change the font-size of MUI you can provide a `fontSize` property. +To change the font-size of Material UI you can provide a `fontSize` property. The default value is `14px`. ```js @@ -163,13 +163,13 @@ Changing the font size can harm accessibility ♿️. Most browsers agree on the ::: The `theme.typography.htmlFontSize` property is provided for this use case, -which tells MUI what the font-size on the `` element is. +which tells Material UI what the font-size on the `` element is. This is used to adjust the `rem` value so the calculated font-size always match the specification. ```js const theme = createTheme({ typography: { - // Tell MUI what's the font-size on the html element is. + // Tell Material UI what the font-size on the html element is. htmlFontSize: 10, }, }); diff --git a/docs/data/material/customization/z-index/z-index.md b/docs/data/material/customization/z-index/z-index.md index ce2bf5b03a5a17..a93d8be6d9bd97 100644 --- a/docs/data/material/customization/z-index/z-index.md +++ b/docs/data/material/customization/z-index/z-index.md @@ -2,7 +2,7 @@

z-index is the CSS property that helps control layout by providing a third axis to arrange content.

-Several MUI components utilize `z-index`, employing a default z-index scale in MUI +Several Material UI components utilize `z-index`, employing a default z-index scale that has been designed to properly layer drawers, modals, snackbars, tooltips, and more. The `z-index` values start at an arbitrary number, high and specific enough to ideally avoid conflicts: diff --git a/docs/data/material/discover-more/backers/backers.md b/docs/data/material/discover-more/backers/backers.md index 4f101c5ffdd635..70ee6a2123125d 100644 --- a/docs/data/material/discover-more/backers/backers.md +++ b/docs/data/material/discover-more/backers/backers.md @@ -1,8 +1,8 @@ # Sponsors & Backers -

Support MUI core's development through crowdfunding.

+

Support the development of new open-source projects from MUI through crowdfunding.

-The core of MUI is a crowd-funded open-source project, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development. +The core of MUI is our crowd-funded open-source projects, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development. ## MUI's sponsors @@ -67,21 +67,21 @@ via [OpenCollective](https://opencollective.com/mui) ## FAQ -### Why is MUI a "crowd-funded open-source project"? +### Why is Material UI a "crowd-funded open-source project"? -The core of MUI is open-source to give users great freedom in how they use the software, and to enable the community to have influence over how the project progresses to make it appropriate for a wide range of use-cases. To make MUI a project that users can rely on for years to come, it needs to be well directed and financially sustainable. +Material UI (as well as Base UI and Joy UI) is open-source to give users great freedom in how they use the software, and to enable the community to have influence over how the project progresses to make it appropriate for a wide range of use-cases. To ensure that MUI's component libraries can stand the test of time for our users, they need to be well directed and financially sustainable. -The absolute best way to support MUI's ongoing development efforts is to become a sponsor. Crowd-sourced funding enables us to spend the most time directly working on improving MUI core, which you and other MUI users then benefit from. +The absolute best way to support MUI's ongoing development efforts is to become a sponsor. Crowd-sourced funding enables us to spend the most time directly working on improving MUI's products, which you and other MUI users then benefit from. ### How is sponsorship money spent? Sponsorship money is used to fund software development, testing, documentation, and releases of the MUI software suite. -### Is sponsorship required to use MUI? +### Is sponsorship required to use MUI's products? -Users are not legally required to give back to the MUI project, but it is in their interest to do so. +Users are not obligated to give back to MUI, but it is in their interest to do so. -By significantly reducing the amount of work needed to achieve business goals and reducing running costs, MUI results in huge time and money savings for users. We encourage organizations to contribute a portion of these savings back, enabling the project to advance more rapidly and result in even greater savings for your organization. +By significantly reducing the amount of work needed to achieve business goals and reducing running costs, MUI's libraries result in huge time and money savings for users. We encourage organizations to contribute a portion of these savings back, enabling the project to advance more rapidly and result in even greater savings for your organization. ### What's the difference between Patreon and OpenCollective? diff --git a/docs/data/material/discover-more/related-projects/related-projects.md b/docs/data/material/discover-more/related-projects/related-projects.md index 6d0d983590871d..95bd9a625d4f4d 100644 --- a/docs/data/material/discover-more/related-projects/related-projects.md +++ b/docs/data/material/discover-more/related-projects/related-projects.md @@ -2,7 +2,7 @@

A carefully curated list of third-party tools that expand or build on top of Material UI's component library.

-Developers from the MUI community have built some excellent supplemental tools for working with Material UIβ€”this page gathers the best that we've seen. +Developers from the community have built some excellent supplemental tools for working with Material UIβ€”this page gathers the best that we've seen. Do you have a project that you think should be featured here? We'd love to see it. diff --git a/docs/data/material/discover-more/roadmap/roadmap.md b/docs/data/material/discover-more/roadmap/roadmap.md index b1c4c13973dc5f..40e3b61e2f25b6 100644 --- a/docs/data/material/discover-more/roadmap/roadmap.md +++ b/docs/data/material/discover-more/roadmap/roadmap.md @@ -4,7 +4,7 @@ ## Methodology -MUI is community driven – issues that resonate most with the community get the most attention. +MUI is community-drivenβ€”issues that resonate most with the community get the most attention. Please **upvote** (πŸ‘) on GitHub the issues you are most interested in. Thank you for participating [in the developer survey](/blog/2021-developer-survey-results/). diff --git a/docs/data/material/discover-more/vision/vision.md b/docs/data/material/discover-more/vision/vision.md index 298787949ffed3..b3da70e7a9e255 100644 --- a/docs/data/material/discover-more/vision/vision.md +++ b/docs/data/material/discover-more/vision/vision.md @@ -2,13 +2,13 @@

Our vision is to provide an elegant React implementation of the Material Design guidelines that can be customized to fully match your brand.

-The Material Design guidelines are an incredible starting point, but they do not provide guidance on all aspects or needs of an application. In addition to the guidelines-specific implementation, we want MUI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines. +The Material Design guidelines are an incredible starting point, but they do not provide guidance on all aspects or needs of an application. In addition to the guidelines-specific implementation, we want Material UI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines. -Therefore, MUI will be not only be an implementation of the Material Design guidelines, but a general use UI library of components that are needed by many. This generalized use doesn't imply any other design methodology. It also means we will have components or combinations that are simply not addressed in the design guidelines. +Therefore, Material UI will be not only be an implementation of the Material Design guidelines, but a general use UI library of components that are needed by many. This generalized use doesn't imply any other design methodology. It also means we will have components or combinations that are simply not addressed in the design guidelines. -We will focus on providing all the low-level tools needed to build a rich user-interface with React. Once we implement the Material Design guidelines (which is a bar set quite high), you should be able to take advantage of it for your own business with any style customization needed. We want to see companies succeeding using MUI in a way that matches their brand, close to the material philosophy or not. We don't want them to feel that their UI simply looks like another Google product. +We will focus on providing all the low-level tools needed to build a rich user-interface with React. Once we implement the Material Design guidelines (which is a bar set quite high), you should be able to take advantage of it for your own business with any style customization needed. We want to see companies succeeding using Material UI in a way that matches their brand, close to the material philosophy or not. We don't want them to feel that their UI simply looks like another Google product. -From a developer's point of view, we want MUI to: +From a developer's point of view, we want Material UI to: - Deliver on fully encapsulated / composable React components. - Be themeable / customizable. diff --git a/docs/data/material/getting-started/design-resources/design-resources.md b/docs/data/material/getting-started/design-resources/design-resources.md index 526aa0ac573bad..76502276b5d48b 100644 --- a/docs/data/material/getting-started/design-resources/design-resources.md +++ b/docs/data/material/getting-started/design-resources/design-resources.md @@ -6,7 +6,7 @@ adobe-xd sketch -## MUI resources +## Material UI resources ### Figma diff --git a/docs/data/material/getting-started/example-projects/example-projects.md b/docs/data/material/getting-started/example-projects/example-projects.md index 8640b42f1350f0..3e72d8d8330362 100644 --- a/docs/data/material/getting-started/example-projects/example-projects.md +++ b/docs/data/material/getting-started/example-projects/example-projects.md @@ -73,7 +73,7 @@ If you want to start with a more complete and real-world example, you could take - [ScaffoldHub](https://scaffoldhub.io/?partner=1): - Build your complete application with this online tool - - Choose your framework and library (React & MUI!) + - Choose your framework and library (React with Material UI) - Choose your database (SQL, MongoDB or Firestore) - Model your database and application with the intuitive GUI - Generate your application, including a complete scaffolded backend @@ -81,5 +81,5 @@ If you want to start with a more complete and real-world example, you could take - [Divjoy](https://divjoy.com?via=material-ui): - - Create your MUI app in minutes. + - Create your Material UI app in minutes. - You'll get a nice template, authentication, database integration, subscription payments, and more. diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md index 5acc529300417f..6baf6bb437bb90 100644 --- a/docs/data/material/getting-started/faq/faq.md +++ b/docs/data/material/getting-started/faq/faq.md @@ -4,11 +4,11 @@ If you still can't find what you're looking for, you can refer to our [support page](/material-ui/getting-started/support/). -## MUI is awesome. How can I support the project? +## MUI is awesome. How can I support the company? There are many ways to support MUI: -- **Spread the word**. Evangelize MUI by [linking to mui.com](https://mui.com/) on your website, every backlink matters. +- **Spread the word**. Evangelize MUI's products by [linking to mui.com](https://mui.com/) on your websiteβ€”every backlink matters. Follow us on [Twitter](https://twitter.com/MUI_hq), like and retweet the important news. Or just talk about us with your friends. - **Give us feedback**. Tell us what we're doing well or where we can improve. Please upvote (πŸ‘) the issues that you are the most interested in seeing solved. - **Help new users**. You can answer questions on @@ -20,14 +20,14 @@ There are many ways to support MUI: - Help [translate](https://translate.mui.com) the documentation. - [Improve our documentation](https://github.com/mui/material-ui/tree/HEAD/docs), fix bugs, or add features by [submitting a pull request](https://github.com/mui/material-ui/pulls). - **Support us financially on [OpenCollective](https://opencollective.com/mui)**. - If you use MUI in a commercial project and would like to support its continued development by becoming a Sponsor, or in a side or hobby project and would like to become a Backer, you can do so through OpenCollective. + If you use Material UI in a commercial project and would like to support its continued development by becoming a Sponsor, or in a side or hobby project and would like to become a Backer, you can do so through OpenCollective. All funds donated are managed transparently, and Sponsors receive recognition in the README and on the MUI home page. ## Why do the fixed positioned elements move when a modal is opened? Scrolling is blocked as soon as a modal is opened. This prevents interacting with the background when the modal should be the only interactive content. However, removing the scrollbar can make your **fixed positioned elements** move. -In this situation, you can apply a global `.mui-fixed` class name to tell MUI to handle those elements. +In this situation, you can apply a global `.mui-fixed` class name to tell Material UI to handle those elements. ## How can I disable the ripple effect globally? @@ -52,7 +52,7 @@ const theme = createTheme({ ## How can I disable transitions globally? -MUI uses the same theme helper for creating all its transitions. +Material UI uses the same theme helper for creating all its transitions. Therefore you can disable all transitions by overriding the helper in your theme: ```js @@ -105,10 +105,10 @@ If you choose not to use it, you can still disable transitions and animations by No, it's not required. But if you are using the default styled engine (`@mui/styled-engine`) the Emotion dependency comes built in, so carries no additional bundle size overhead. -Perhaps, however, you're adding some MUI components to an app that already uses another styling solution, +Perhaps, however, you're adding some Material UI components to an app that already uses another styling solution, or are already familiar with a different API, and don't want to learn a new one? In that case, head over to the [Style library interoperability](/material-ui/guides/interoperability/) section, -where we show how simple it is to restyle MUI components with alternative style libraries. +where we show how simple it is to restyle Material UI components with alternative style libraries. ## When should I use inline-style vs. CSS? @@ -126,9 +126,9 @@ We detail the [integration with third-party routing libraries](/material-ui/guid ## How can I access the DOM element? -All MUI components that should render something in the DOM forward their +All Material UI components that should render something in the DOM forward their ref to the underlying DOM component. This means that you can get DOM elements -by reading the ref attached to MUI components: +by reading the ref attached to Material UI components: ```jsx // or a ref setter function @@ -139,7 +139,7 @@ const ref = React.createRef(); const element = ref.current; ``` -If you're not sure if the MUI component in question forwards its ref you +If you're not sure if the Material UI component in question forwards its ref you can check the API documentation under "Props" e.g. the [Button API](/material-ui/api/button/#props) includes @@ -249,13 +249,14 @@ Check out the [reference implementations](/material-ui/guides/server-rendering/# ## Why are the colors I am seeing different from what I see here? The documentation site is using a custom theme. Hence, the color palette is -different from the default theme that MUI ships. Please refer to [this +different from the default theme that Material UI ships. Please refer to [this page](/material-ui/customization/theming/) to learn about theme customization. ## Why does component X require a DOM node in a prop instead of a ref object? -Components like the [Portal](/base/react-portal/components-api/#portal) or [Popper](/material-ui/api/popper/#props) require a DOM node in the `container` or `anchorEl` prop respectively. -It seems convenient to simply pass a ref object in those props and let MUI access the current value. +Components like the [Portal](/base/api/portal/#props) or [Popper](/material-ui/api/popper/#props) require a DOM node in the `container` or `anchorEl` prop respectively. +It seems convenient to simply pass a ref object in those props and let Material UI access the current value. + This works in a simple scenario: ```jsx @@ -359,13 +360,13 @@ If you are getting the error: `TypeError: Cannot convert a Symbol value to a str ## [v4] Why aren't my components rendering correctly in production builds? The #1 reason this happens is likely due to class name conflicts once your code is in a production bundle. -For MUI to work, the `className` values of all components on a page must be generated by a single instance of the [class name generator](/system/styles/advanced/#class-names). +For Material UI to work, the `className` values of all components on a page must be generated by a single instance of the [class name generator](/system/styles/advanced/#class-names). To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** among them. You could end up accidentally using two class name generators in a variety of scenarios: -- You accidentally **bundle** two versions of MUI. You might have a dependency not correctly setting MUI as a peer dependency. +- You accidentally **bundle** two versions of Material UI. You might have a dependency not correctly setting Material UI as a peer dependency. - You are using `StylesProvider` for a **subset** of your React tree. - You are using a bundler and it is splitting code in a way that causes multiple class name generator instances to be created. @@ -373,7 +374,7 @@ You could end up accidentally using two class name generators in a variety of sc If you are using webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk). ::: -Overall, it's simple to recover from this problem by wrapping each MUI application with [`StylesProvider`](/system/styles/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared among them**. +Overall, it's simple to recover from this problem by wrapping each Material UI application with [`StylesProvider`](/system/styles/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared among them**. ### [v4] CSS works only on first load and goes missing @@ -438,11 +439,11 @@ This generator needs to behave identically on the server and on the client. For const html = ReactDOMServer.renderToString( ``` -- You need to verify that your client and server are running the **exactly the same version** of MUI. +- You need to verify that your client and server are running the **exactly the same version** of Material UI. It is possible that a mismatch of even minor versions can cause styling problems. To check version numbers, run `npm list @mui/material` in the environment where you build your application and also in your deployment environment. - You can also ensure the same version in different environments by specifying a specific MUI version in the dependencies of your package.json. + You can also ensure the same version in different environments by specifying a specific Material UI version in the dependencies of your package.json. _example of fix (package.json):_ diff --git a/docs/data/material/getting-started/support/support.md b/docs/data/material/getting-started/support/support.md index 9df3fc1773ad83..c32cd2e683d4a4 100644 --- a/docs/data/material/getting-started/support/support.md +++ b/docs/data/material/getting-started/support/support.md @@ -8,8 +8,8 @@ The community is your first stop for questions and advice about the framework. W ### Stack Overflow -For crowdsourced answers from expert MUI developers in our community. -Stack Overflow is also visited from time to time by the maintainers of MUI. +For crowdsourced answers from expert Material UI developers in our community. +Stack Overflow is also visited from time to time by the maintainers of Material UI. [Post a question](https://stackoverflow.com/questions/tagged/mui) @@ -43,9 +43,9 @@ Stay up to date with the development of the library by following the blog. ### Resources πŸ“– -New to MUI? It's easy to learn if you know where to start! +New to Material UI? It's easy to learn if you know where to start! -[Learn MUI](/material-ui/getting-started/learn/) +[Learn Material UI](/material-ui/getting-started/learn/) ### Twitter @@ -108,13 +108,13 @@ Request a demo ### Custom work πŸ›  -Tweak MUI to meet specific requirements. Give us a summary of your needs and we'll help you if we can. We might: +Tweak MUI's component libraries to meet specific requirements. Give us a summary of your needs and we'll help you if we can. We might: - Give you an estimate of time and price if the work is straightforward -- Suggest alternatives that might not require MUI +- Suggest alternatives that might not require MUI components - Decline the work due to timing or relevancy -Note that work must be MUI related. +Note that work must be MUI-related. We don't accept general React development work. Our contracting price is $200/hour or $1,500/day. diff --git a/docs/data/material/getting-started/supported-platforms/supported-platforms.md b/docs/data/material/getting-started/supported-platforms/supported-platforms.md index a3d99f9f81d098..6559c6fa26cc73 100644 --- a/docs/data/material/getting-started/supported-platforms/supported-platforms.md +++ b/docs/data/material/getting-started/supported-platforms/supported-platforms.md @@ -1,10 +1,10 @@ # Supported platforms -

Learn about the platforms, from modern to old, that are supported by MUI.

+

Learn about the platforms, from modern to old, that are supported by Material UI.

## Browser -MUI supports the latest, stable releases of all major browsers and platforms. +Material UI supports the latest, stable releases of all major browsers and platforms. You don't need to provide any JavaScript polyfill as it manages unsupported browser features internally and in isolation. @@ -17,13 +17,13 @@ You don't need to provide any JavaScript polyfill as it manages unsupported brow An extensive list can be found in our [.browserlistrc](https://github.com/mui/material-ui/blob/-/.browserslistrc#L12-L27) (check the `stable` entry). -Because Googlebot uses a web rendering service (WRS) to index the page content, it's critical that MUI supports it. +Because Googlebot uses a web rendering service (WRS) to index the page content, it's critical that Material UI supports it. [WRS regularly updates the rendering engine it uses](https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html). -You can expect MUI's components to render without major issues. +You can expect Material UI's components to render without major issues. ### IE 11 -MUI provides **partial** supports for IE 11. Be aware of the following: +Material UI provides **partial** supports for IE 11. Be aware of the following: - Some of the components have no support. For instance, the new components, the data grid, the date picker. - Some of the components have degraded support. For instance, the outlined input border radius is missing, the combobox doesn't remove diacritics, the circular progress animation is wobbling. @@ -39,7 +39,7 @@ v6 will completely remove the support of IE 11. -MUI supports [Node.js](https://github.com/nodejs/node) starting with version 12.0 for server-side rendering. +Material UI supports [Node.js](https://github.com/nodejs/node) starting with version 12.0 for server-side rendering. The objective is to support Node.js down to the [last version in maintenance mode](https://github.com/nodejs/Release#release-schedule). ### CSS prefixing @@ -57,10 +57,10 @@ It's a must-do for static pages, but it needs to be put in balance with not doin -MUI supports the most recent versions of React, starting with ^17.0.0 (the one with event delegation at the React root). +Material UI supports the most recent versions of React, starting with ^17.0.0 (the one with event delegation at the React root). Have a look at the older [versions](https://mui.com/versions/) for backward compatibility. ## TypeScript -MUI requires a minimum version of TypeScript 3.5. +Material UI requires a minimum version of TypeScript 3.5. This aims to match the policy of [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped), with the support of the versions of TypeScript that are less than two years old. diff --git a/docs/data/material/guides/api/api.md b/docs/data/material/guides/api/api.md index cb7914e6f0d182..281dc33320b6de 100644 --- a/docs/data/material/guides/api/api.md +++ b/docs/data/material/guides/api/api.md @@ -1,6 +1,6 @@ # API design approach -

We have learned a great deal regarding how MUI is used, and the v1 rewrite allowed us to completely rethink the component API.

+

We have learned a great deal regarding how Material UI is used, and the v1 rewrite allowed us to completely rethink the component API.

:::info API design is hard because you can make it seem simple but it's actually deceptively complex, or make it actually simple but seem complex. @@ -147,7 +147,7 @@ For example, let's take a button that has different types. Each option has its p bounds the number of props exposed, and can easily support new values in the future. -The MUI components use a combination of the two approaches according to the following rules: +The Material UI components use a combination of the two approaches according to the following rules: - A _boolean_ is used when **2** possible values are required. - An _enum_ is used when **> 2** possible values are required, or if there is the possibility that additional possible values may be required in the future. diff --git a/docs/data/material/guides/composition/composition.md b/docs/data/material/guides/composition/composition.md index f92790907ada18..5ab0d24b7c482b 100644 --- a/docs/data/material/guides/composition/composition.md +++ b/docs/data/material/guides/composition/composition.md @@ -1,10 +1,10 @@ # Composition -

MUI tries to make composition as easy as possible.

+

Material UI tries to make composition as easy as possible.

## Wrapping components -To provide maximum flexibility and performance, MUI needs a way to know the nature of the child elements a component receives. +To provide maximum flexibility and performance, Material UI needs a way to know the nature of the child elements a component receives. To solve this problem, we tag some of the components with a `muiName` static property when needed. You may, however, need to wrap a component in order to enhance it, which can conflict with the `muiName` solution. @@ -24,11 +24,11 @@ WrappedIcon.muiName = Icon.muiName; ## Component prop -MUI allows you to change the root element that will be rendered via a prop called `component`. +Material UI allows you to change the root element that will be rendered via a prop called `component`. ### How does it work? -The custom component will be rendered by MUI like this: +The custom component will be rendered by Material UI like this: ```js return React.createElement(props.component, props); @@ -186,14 +186,14 @@ Some of the components need access to the DOM node. This was previously possible by using `ReactDOM.findDOMNode`. This function is deprecated in favor of `ref` and ref forwarding. However, only the following component types can be given a `ref`: -- Any MUI component +- Any Material UI component - class components i.e. `React.Component` or `React.PureComponent` - DOM (or host) components e.g. `div` or `button` - [React.forwardRef components](https://react.dev/reference/react/forwardRef) - [React.lazy components](https://react.dev/reference/react/lazy) - [React.memo components](https://react.dev/reference/react/memo) -If you don't use one of the above types when using your components in conjunction with MUI, you might see a warning from +If you don't use one of the above types when using your components in conjunction with Material UI, you might see a warning from React in your console similar to: :::warning @@ -225,7 +225,7 @@ Only the two most common use cases are covered. For more information see [this s ; ``` -To find out if the MUI component you're using has this requirement, check +To find out if the Material UI component you're using has this requirement, check out the props API documentation for that component. If you need to forward refs the description will link to this section. diff --git a/docs/data/material/guides/content-security-policy/content-security-policy.md b/docs/data/material/guides/content-security-policy/content-security-policy.md index 7f1bb84b116d8b..5ebb7d26f6f938 100644 --- a/docs/data/material/guides/content-security-policy/content-security-policy.md +++ b/docs/data/material/guides/content-security-policy/content-security-policy.md @@ -20,7 +20,7 @@ You can read more about CSP on the [MDN Web Docs](https://developer.mozilla.org/ ### Server-Side Rendering (SSR) -To use CSP with MUI (and emotion), you need to use a nonce. +To use CSP with Material UI (and Emotion), you need to use a nonce. A nonce is a randomly generated string that is only used once, therefore you need to add server middleware to generate one on each request. A CSP nonce is a Base 64 encoded string. You can generate one like this: diff --git a/docs/data/material/guides/interoperability/interoperability.md b/docs/data/material/guides/interoperability/interoperability.md index f4a82d7e526277..e76baff4152704 100644 --- a/docs/data/material/guides/interoperability/interoperability.md +++ b/docs/data/material/guides/interoperability/interoperability.md @@ -1,6 +1,6 @@ # Style library interoperability -

While you can use the Emotion-based styling solution provided by MUI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).

+

While you can use the Emotion-based styling solution provided by Material UI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).

This guide aims to document the most popular alternatives, but you should find that the principles applied here can be adapted to other libraries. @@ -53,7 +53,7 @@ export default function PlainCssSlider() { ### CSS injection order ⚠️ -**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives MUI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in MUI: +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI: ```jsx import * as React from 'react'; @@ -62,13 +62,13 @@ import { StyledEngineProvider } from '@mui/material/styles'; export default function GlobalCssPriority() { return ( - {/* Your component tree. Now you can override MUI's styles. */} + {/* Your component tree. Now you can override Material UI's styles. */} ); } ``` -**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example: +**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from Material UI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example: ```jsx import * as React from 'react'; @@ -83,7 +83,7 @@ const cache = createCache({ export default function PlainCssPriority() { return ( - {/* Your component tree. Now you can override MUI's styles. */} + {/* Your component tree. Now you can override Material UI's styles. */} ); } @@ -95,7 +95,7 @@ export default function PlainCssPriority() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -In MUI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same. +In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same. The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself. @@ -176,7 +176,7 @@ export default function PlainCssSliderDeep2() { ## Global CSS Explicitly providing the class names to the component is too much effort? -[You can target the class names generated by MUI](/system/styles/advanced/). +[You can target the class names generated by Material UI](/system/styles/advanced/). [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/global-classnames-dho8k) @@ -206,7 +206,7 @@ export default function GlobalCssSlider() { ### CSS injection order ⚠️ -**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives MUI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in MUI: +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI: ```jsx import * as React from 'react'; @@ -215,13 +215,13 @@ import { StyledEngineProvider } from '@mui/material/styles'; export default function GlobalCssPriority() { return ( - {/* Your component tree. Now you can override MUI's styles. */} + {/* Your component tree. Now you can override Material UI's styles. */} ); } ``` -**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example: +**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from Material UI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example: ```jsx import * as React from 'react'; @@ -236,7 +236,7 @@ const cache = createCache({ export default function GlobalCssPriority() { return ( - {/* Your component tree. Now you can override MUI's styles. */} + {/* Your component tree. Now you can override Material UI's styles. */} ); } @@ -248,7 +248,7 @@ export default function GlobalCssPriority() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -In MUI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same. +In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same. The following example overrides the slider's `thumb` style in addition to the custom styles on the slider itself. @@ -328,7 +328,7 @@ export default function StyledComponents() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -In MUI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same. +In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same. The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself. @@ -367,18 +367,18 @@ export default function StyledComponentsDeep2() { ### Theme -By using the MUI theme provider, the theme will be available in the theme context +By using the Material UI theme provider, the theme will be available in the theme context of the styled engine too (Emotion or styled-components, depending on your configuration). :::warning If you are already using a custom theme with styled-components or Emotion, -it might not be compatible with MUI's theme specification. If it's not -compatible, you need to render MUI's ThemeProvider first. This will +it might not be compatible with Material UI's theme specification. If it's not +compatible, you need to render Material UI's ThemeProvider first. This will ensure the theme structures are isolated. This is ideal for the progressive adoption -of MUI's components in the codebase. +of Material UI's components in the codebase. ::: -You are encouraged to share the same theme object between MUI and the rest of your project. +You are encouraged to share the same theme object between Material UI and the rest of your project. ```jsx const CustomizedSlider = styled(Slider)( @@ -463,7 +463,7 @@ export default function CssModulesSlider() { ### CSS injection order ⚠️ -**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives MUI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in MUI: +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI: ```jsx import * as React from 'react'; @@ -472,13 +472,13 @@ import { StyledEngineProvider } from '@mui/material/styles'; export default function GlobalCssPriority() { return ( - {/* Your component tree. Now you can override MUI's styles. */} + {/* Your component tree. Now you can override Material UI's styles. */} ); } ``` -**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example: +**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from Material UI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example: ```jsx import * as React from 'react'; @@ -493,7 +493,7 @@ const cache = createCache({ export default function CssModulesPriority() { return ( - {/* Your component tree. Now you can override MUI's styles. */} + {/* Your component tree. Now you can override Material UI's styles. */} ); } @@ -505,8 +505,8 @@ export default function CssModulesPriority() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -In MUI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same. -It's important to keep in mind that CSS Modules adds an unique id to each class, and that id won't be present on the MUI provided children class. To escape from that, CSS Modules provides a functionality, the `:global` selector. +In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same. +It's important to keep in mind that CSS Modules adds an unique id to each class, and that id won't be present on the Material UI provided children class. To escape from that, CSS Modules provides a functionality, the `:global` selector. The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself. @@ -593,7 +593,7 @@ export default function CssModulesSliderDeep2() { ### The `css` prop -Emotion's **css()** method works seamlessly with MUI. +Emotion's **css()** method works seamlessly with Material UI. {{"demo": "EmotionCSS.js", "defaultCodeOpen": true}} @@ -612,11 +612,11 @@ It works exactly like styled components. You can [use the same guide](/material- ### Setup -If you are used to Tailwind CSS and want to use it together with the MUI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts) example project. +If you are used to Tailwind CSS and want to use it together with the Material UI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts) example project. If you use a different framework, or already have set up your project, follow these steps: 1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation. -2. Remove [Tailwind CSS's preflight](https://tailwindcss.com/docs/preflight) style so it can use the MUI's preflight instead ([CssBaseline](/material-ui/react-css-baseline/)). +2. Remove [Tailwind CSS's preflight](https://tailwindcss.com/docs/preflight) style so it can use the Material UI's preflight instead ([CssBaseline](/material-ui/react-css-baseline/)). **tailwind.config.js** @@ -647,11 +647,11 @@ If you use a different framework, or already have set up your project, follow th ``` Most of the CSS used by Material UI has as specificity of 1, hence this `important` property is unnecessary. -However, in a few edge cases, MUI uses nested CSS selectors that win over Tailwind CSS. +However, in a few edge cases, Material UI uses nested CSS selectors that win over Tailwind CSS. Use this step to help ensure that the [deeper elements](#deeper-elements-5) can always be customized using Tailwind's utility classes. More details on this option can be found here https://tailwindcss.com/docs/configuration#selector-strategy -4. Fix the CSS injection order. Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives MUI precedence over Tailwind CSS. To reduce the need for the `important` property, you need to change the CSS injection order. Here's a demo of how it can be done in MUI: +4. Fix the CSS injection order. Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over Tailwind CSS. To reduce the need for the `important` property, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI: ```jsx import * as React from 'react'; @@ -660,13 +660,13 @@ import { StyledEngineProvider } from '@mui/material/styles'; export default function GlobalCssPriority() { return ( - {/* Your component tree. Now you can override MUI's styles. */} + {/* Your component tree. Now you can override Material UI's styles. */} ); } ``` -**Note:** If you are using Emotion and have a custom cache in your app, it will override the one coming from MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example: +**Note:** If you are using Emotion and have a custom cache in your app, it will override the one coming from Material UI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example: ```jsx import * as React from 'react'; @@ -681,7 +681,7 @@ const cache = createCache({ export default function PlainCssPriority() { return ( - {/* Your component tree. Now you can override MUI's styles. */} + {/* Your component tree. Now you can override Material UI's styles. */} ); } @@ -721,7 +721,7 @@ root.render( ### Usage -Now it's all set up and you can start using Tailwind CSS on the MUI components! +Now it's all set up and you can start using Tailwind CSS on the Material UI components! {{"demo": "StyledComponents.js", "hideToolbar": true}} @@ -789,10 +789,10 @@ export default function SliderThumbOverrides() { ## ~~JSS~~ TSS -[JSS](https://cssinjs.org/) itself is no longer supported in MUI however, +[JSS](https://cssinjs.org/) itself is no longer supported in Material UI, however, if you like the hook-based API (`makeStyles` β†’ `useStyles`) that [`react-jss`](https://codesandbox.io/s/j3l06yyqpw) was offering you can opt for [`tss-react`](https://github.com/garronej/tss-react). -[TSS](https://docs.tss-react.dev) integrates well with MUI and provide a better +[TSS](https://docs.tss-react.dev) integrates well with Material UI and provide a better TypeScript support than JSS. :::info diff --git a/docs/data/material/guides/localization/localization.md b/docs/data/material/guides/localization/localization.md index c2bc202ab11e10..8e77ebb30a4d12 100644 --- a/docs/data/material/guides/localization/localization.md +++ b/docs/data/material/guides/localization/localization.md @@ -2,7 +2,7 @@

Localization (also referred to as "l10n") is the process of adapting a product or content to a specific locale or market.

-The default locale of MUI is English (United States). If you want to use other locales, follow the instructions below. +The default locale of Material UI is English (United States). If you want to use other locales, follow the instructions below. ## Locale text @@ -96,8 +96,8 @@ You can [find the source](https://github.com/mui/material-ui/blob/master/package To create your own translation, or to customize the English text, copy this file to your project, make any changes needed and import the locale from there. -Please do consider contributing new translations back to MUI by opening a pull request. -However, MUI aims to support the [100 most common](https://en.wikipedia.org/wiki/List_of_languages_by_number_of_native_speakers) [locales](https://www.ethnologue.com/guides/ethnologue200), we might not accept contributions for locales that are not frequently used, for instance `gl-ES` that has "only" 2.5 million native speakers. +Please do consider contributing new translations back to Material UI by opening a pull request. +However, Material UI aims to support the [100 most common](https://en.wikipedia.org/wiki/List_of_languages_by_number_of_native_speakers) [locales](https://www.ethnologue.com/guides/ethnologue200), we might not accept contributions for locales that are not frequently used, for instance `gl-ES` that has "only" 2.5 million native speakers. ## RTL Support diff --git a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md index d31ab7a13ebbf6..bdc3eda53d8b5e 100644 --- a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md +++ b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md @@ -4,25 +4,23 @@ ## Bundle size matters -MUI takes the bundle size very seriously. Size snapshots are taken +Material UI's maintainers take bundle size very seriously. Size snapshots are taken on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot/)). Combined with [dangerJS](https://danger.systems/js/) we can inspect -[detailed bundle size changes](https://github.com/mui/material-ui/pull/14638#issuecomment-466658459) on every pull request. +[detailed bundle size changes](https://github.com/mui/material-ui/pull/14638#issuecomment-466658459) on every Pull Request. ## When and how to use tree-shaking? -Tree-shaking of MUI's open source projects, e.g. Material UI works out of the box in modern frameworks. -MUI exposes its full API on the top-level `@mui` imports. -If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimized bundle size automatically in **production**: +Tree-shaking Material UI works out of the box in modern frameworks. +Material UI exposes its full API on the top-level `@mui` imports. +If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimized bundle size automatically: ```js import { Button, TextField } from '@mui/material'; ``` -:::warning -The following instructions are only needed if you need to optimize the load times in **development** (e.g. needed for icons) or if you are using an older bundler +⚠️ The following instructions are only needed if you want to optimize your development startup times or if you are using an older bundler that doesn't support tree-shaking. -::: ## Development environment @@ -187,10 +185,10 @@ Modify your `package.json` commands: ```diff "scripts": { - "start": "react-scripts start", -- "build": "react-scripts build", -- "test": "react-scripts test", + "start": "react-app-rewired start", +- "build": "react-scripts build", + "build": "react-app-rewired build", +- "test": "react-scripts test", + "test": "react-app-rewired test", "eject": "react-scripts eject" } @@ -212,19 +210,10 @@ It will perform the following diffs: ## Available bundles The package published on npm is **transpiled**, with [Babel](https://github.com/babel/babel), to take into account the [supported platforms](/material-ui/getting-started/supported-platforms/). -In addition, to the default bundle, you can opt-in: - -- **Modern bundle**. The modern bundle can be found under the [`/modern` folder](https://unpkg.com/@mui/material/modern/). - It targets the latest released versions of evergreen browsers (Chrome, Firefox, Safari, Edge). - This can be used to make separate bundles targeting different browsers. -- **Legacy bundle**. If you need to support IE 11 you cannot use the default or modern bundle without transpilation. - However, you can use the legacy bundle found under the [`/legacy` folder](https://unpkg.com/@mui/material/legacy/). - You don't need any additional polyfills. - -### How to use - -You can use these bundles at the bundler level with e.g [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias): +⚠️ Developers are **strongly discouraged** to import from any of the other bundles directly. +Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles. +Instead, use these bundles at the bundler level with e.g [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias): ```js { @@ -241,7 +230,14 @@ You can use these bundles at the bundler level with e.g [Webpack's `resolve.alia } ``` -:::error -Developers are **strongly discouraged** to import from these bundles directly in the code because a third-party dependency might import a different bundle. -So unless you can guarantee that all your dependencies use the same bundle, don't do it. -::: +### Modern bundle + +The modern bundle can be found under the [`/modern` folder](https://unpkg.com/@mui/material/modern/). +It targets the latest released versions of evergreen browsers (Chrome, Firefox, Safari, Edge). +This can be used to make separate bundles targeting different browsers. + +### Legacy bundle + +If you need to support IE 11 you cannot use the default or modern bundle without transpilation. +However, you can use the legacy bundle found under the [`/legacy` folder](https://unpkg.com/@mui/material/legacy/). +You don't need any additional polyfills. diff --git a/docs/data/material/guides/pickers-migration/pickers-migration.md b/docs/data/material/guides/pickers-migration/pickers-migration.md index 0456a60b48791c..803e54853c6572 100644 --- a/docs/data/material/guides/pickers-migration/pickers-migration.md +++ b/docs/data/material/guides/pickers-migration/pickers-migration.md @@ -87,7 +87,7 @@ function App() { ## Render input -We introduced a new **required** `renderInput` prop. This simplifies using non-MUI text field input components. +We introduced a new **required** `renderInput` prop. This simplifies using non-Material UI text field input components. ```jsx } /> diff --git a/docs/data/material/guides/right-to-left/right-to-left.md b/docs/data/material/guides/right-to-left/right-to-left.md index 1beb91ae137e68..020e7631286b35 100644 --- a/docs/data/material/guides/right-to-left/right-to-left.md +++ b/docs/data/material/guides/right-to-left/right-to-left.md @@ -1,6 +1,6 @@ # Right-to-left -

Right-to-left languages such as Arabic, Persian, or Hebrew are supported. To change the direction of MUI components you must follow the following steps.

+

Right-to-left languages such as Arabic, Persian, or Hebrew are supported. To change the direction of Material UI components you must follow the following steps.

## Steps @@ -59,7 +59,7 @@ In case you are using `jss` (up to v4) or with the legacy `@mui/styles` package, npm install jss-rtl ``` -Having installed the plugin in your project, MUI components still require it to be loaded by the style engine instance that you use. Find bellow guides on how you can load it. +Having installed the plugin in your project, Material UI components still require it to be loaded by the style engine instance that you use. Find bellow guides on how you can load it. ### 4. Load the rtl plugin diff --git a/docs/data/material/guides/routing/routing.md b/docs/data/material/guides/routing/routing.md index 18e5451c52fcfc..14386149bf2d9c 100644 --- a/docs/data/material/guides/routing/routing.md +++ b/docs/data/material/guides/routing/routing.md @@ -20,7 +20,7 @@ For instance, with a `Button` component: In real-life applications, using a native `` element is rarely enough. You can improve the user experience by using an enhanced Link component systematically. -The theme of MUI allows configuring this component once. +The Material UI theme lets you configure this component once. For instance, with react-router: ```tsx @@ -32,7 +32,7 @@ const LinkBehavior = React.forwardRef< Omit & { href: RouterLinkProps['to'] } >((props, ref) => { const { href, ...other } = props; - // Map href (MUI) -> to (react-router) + // Map href (Material UI) -> to (react-router) return ; }); diff --git a/docs/data/material/guides/server-rendering/server-rendering.md b/docs/data/material/guides/server-rendering/server-rendering.md index 5ed55cbc999652..27eaa8cafde72f 100644 --- a/docs/data/material/guides/server-rendering/server-rendering.md +++ b/docs/data/material/guides/server-rendering/server-rendering.md @@ -5,9 +5,9 @@ When the server receives the request, it renders the required component(s) into an HTML string, and then sends it as a response to the client. From that point on, the client takes over rendering duties. -## MUI on the server +## Material UI on the server -MUI was designed from the ground-up with the constraint of rendering on the server, but it's up to you to make sure it's correctly integrated. +Material UI was designed from the ground-up with the constraint of rendering on the server, but it's up to you to make sure it's correctly integrated. It's important to provide the page with the required CSS, otherwise the page will render with just the HTML then wait for the CSS to be injected by the client, causing it to flicker (FOUC). To inject the style down to the client, we need to: @@ -88,7 +88,7 @@ inside a [`CacheProvider`](https://emotion.sh/docs/cache-provider) and [`ThemePr The key step in server-side rendering is to render the initial HTML of the component **before** we send it to the client-side. To do this, we use [ReactDOMServer.renderToString()](https://react.dev/reference/react-dom/server/renderToString). -MUI is using Emotion as its default styled engine. +Material UI uses Emotion as its default styled engine. We need to extract the styles from the Emotion instance. For this, we need to share the same cache configuration for both the client and server: diff --git a/docs/data/material/guides/shadow-dom/shadow-dom.md b/docs/data/material/guides/shadow-dom/shadow-dom.md index 49ad539adb78d3..3cdd1658cf88ac 100644 --- a/docs/data/material/guides/shadow-dom/shadow-dom.md +++ b/docs/data/material/guides/shadow-dom/shadow-dom.md @@ -34,7 +34,7 @@ ReactDOM.createRoot(shadowRootElement).render( ### 2. Theme -MUI components like `Menu`, `Dialog`, `Popover` and others use [`Portal`](/material-ui/react-portal/) to render a new "subtree" in a container outside of current DOM hierarchy. +Material UI components like `Menu`, `Dialog`, `Popover` and others use [`Portal`](/material-ui/react-portal/) to render a new "subtree" in a container outside of current DOM hierarchy. By default, this container is `document.body`. But since the styles are applied only inside of the Shadow DOM, we need to render portals inside the Shadow DOM container as well: diff --git a/docs/data/material/guides/styled-engine/styled-engine.md b/docs/data/material/guides/styled-engine/styled-engine.md index 828d5dde04fdf2..3eb503dfb7f222 100644 --- a/docs/data/material/guides/styled-engine/styled-engine.md +++ b/docs/data/material/guides/styled-engine/styled-engine.md @@ -2,9 +2,9 @@

Configuring your preferred styling library.

-The default style library used for generating CSS styles for MUI components is [emotion](https://github.com/emotion-js/emotion). -All of the MUI components rely on the `styled()` API to inject CSS into the page. -This API is supported by multiple popular styling libraries, which makes it possible to switch between them in MUI. +The default style library used for generating CSS styles for Material UI components is [Emotion](https://github.com/emotion-js/emotion). +All of the Material UI components rely on the `styled()` API to inject CSS into the page. +This API is supported by multiple popular styling libraries, which makes it possible to switch between them in Material UI. ## How to switch to styled-components diff --git a/docs/data/material/guides/testing/testing.md b/docs/data/material/guides/testing/testing.md index 9dfa791361a1c5..a1f96498dabfde 100644 --- a/docs/data/material/guides/testing/testing.md +++ b/docs/data/material/guides/testing/testing.md @@ -4,18 +4,18 @@ ## Userspace -It's generally recommended to test your application without tying the tests too closely to MUI. -This is how MUI components are tested internally. +It's generally recommended to test your application without tying the tests too closely to Material UI. +This is how Material UI components are tested internally. A library that has a first-class API for this approach is [`@testing-library/react`](https://testing-library.com/docs/react-testing-library/intro/). -For example, when rendering a `TextField` your test should not need to query for the specific MUI instance of the `TextField` but rather for the `input`, or `[role="textbox"]`. +For example, when rendering a `TextField` your test should not need to query for the specific Material UI instance of the `TextField` but rather for the `input`, or `[role="textbox"]`. -By not relying on the React component tree you make your test more robust against internal changes in MUI or, if you need snapshot testing, adding additional wrapper components such as context providers. +By not relying on the React component tree you make your test more robust against internal changes in Material UI or, if you need snapshot testing, adding additional wrapper components such as context providers. We don't recommend snapshot testing though. ["Effective snapshot testing" by Kent C. Dodds](https://kentcdodds.com/blog/effective-snapshot-testing) goes into more details why snapshot testing might be misleading for React component tests. ## Internal -MUI has **a wide range** of tests so we can +MUI has **a wide range** of tests for Material UI so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://app.argos-ci.com/mui/material-ui/builds) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui/material-ui/blob/HEAD/test/README.md). diff --git a/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md b/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md index c4b45d32d43537..5e68818d72500f 100644 --- a/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md +++ b/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md @@ -1,6 +1,6 @@ # Understanding MUI packages -

An overview of the MUI packages and the relationships between them.

+

An overview of MUI's packages and the relationships between them.

## Overview diff --git a/docs/data/material/migration/migration-v4/v5-style-changes.md b/docs/data/material/migration/migration-v4/v5-style-changes.md index 1b095b604aa2b4..d35f398c6eb0c4 100644 --- a/docs/data/material/migration/migration-v4/v5-style-changes.md +++ b/docs/data/material/migration/migration-v4/v5-style-changes.md @@ -177,7 +177,7 @@ export default function GlobalCssPriority() { return ( {/* Inject Emotion before JSS */} - {/* Your component tree. Now you can override MUI's styles. */} + {/* Your component tree. Now you can override Material UI's styles. */} ); } diff --git a/docs/data/styles/advanced/advanced.md b/docs/data/styles/advanced/advanced.md index 8afd6fa80cd79c..65db91794e0b1d 100644 --- a/docs/data/styles/advanced/advanced.md +++ b/docs/data/styles/advanced/advanced.md @@ -2,7 +2,7 @@

This section covers more advanced usage of @mui/styles.

-> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI. +> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for Material UI. > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. > If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative. @@ -12,7 +12,7 @@ Add a `ThemeProvider` to the top level of your app to pass a theme down the React component tree. Then, you can access the theme object in style functions. -> This example creates a theme object for custom-built components. If you intend to use some of the MUI's components you need to provide a richer theme structure using the `createTheme()` method. Head to the [theming section](/material-ui/customization/theming/) to learn how to build your custom MUI theme. +> This example creates a theme object for custom-built components. If you intend to use some of Material UI's components you need to provide a richer theme structure using the `createTheme()` method. Head to the [theming section](/material-ui/customization/theming/) to learn how to build your custom Material UI theme. ```jsx import { ThemeProvider } from '@mui/styles'; @@ -175,7 +175,7 @@ function Parent() { JSS uses plugins to extend its core, allowing you to cherry-pick the features you need, and only pay the performance overhead for what you are using. -Not all the plugins are available in MUI by default. The following (which is a subset of +Not all the plugins are available in Material UI by default. The following (which is a subset of [jss-preset-default](https://cssinjs.org/jss-preset-default/)) are included: - [jss-plugin-rule-value-function](https://cssinjs.org/jss-plugin-rule-value-function/) @@ -243,7 +243,7 @@ import { StylesProvider } from '@mui/styles'; {/* Your component tree. - Styled components can override MUI's styles. */} + Styled components can override Material UI's styles. */} ; ``` @@ -453,7 +453,7 @@ const className = `${productionPrefix}${identifier}`; However, when the following conditions are met, the class names are **deterministic**: - Only one theme provider is used (**No theme nesting**) -- The style sheet has a name that starts with `Mui` (all MUI components). +- The style sheet has a name that starts with `Mui` (all Material UI components). - The `disableGlobal` option of the [class name generator](/system/styles/api/#creategenerateclassname-options-class-name-generator) is `false` (the default). ## Global CSS diff --git a/docs/data/styles/api/api.md b/docs/data/styles/api/api.md index 9621458ddc121d..7f02a0efcd0069 100644 --- a/docs/data/styles/api/api.md +++ b/docs/data/styles/api/api.md @@ -6,7 +6,7 @@ title: Styles API

The API reference of @mui/styles.

-> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI. +> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for Material UI. > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. > If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative. @@ -234,7 +234,7 @@ It should preferably be used at **the root of your component tree**. | children \* | node | | Your component tree. | | disableGeneration | bool | false | You can disable the generation of the styles with this option. It can be useful when traversing the React tree outside of the HTML rendering step on the server. Let's say you are using react-apollo to extract all the queries made by the interface server-side. You can significantly speed up the traversal with this prop. | | generateClassName | func | | JSS's class name generator. | -| injectFirst | bool | false | By default, the styles are injected last in the `` element of the page. As a result, they gain more specificity than any other style sheet. If you want to override MUI's styles, set this prop. | +| injectFirst | bool | false | By default, the styles are injected last in the `` element of the page. As a result, they gain more specificity than any other style sheet. If you want to override Material UI's styles, set this prop. | | jss | object | | JSS's instance. | ### Examples diff --git a/docs/data/styles/basics/basics.md b/docs/data/styles/basics/basics.md index a1abc4e394664d..081bd359a2ae26 100644 --- a/docs/data/styles/basics/basics.md +++ b/docs/data/styles/basics/basics.md @@ -1,24 +1,24 @@ # @mui/styles (LEGACY) -

The legacy styling solution of MUI.

+

The legacy styling solution for Material UI.

-> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI. +> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for Material UI. > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. > If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative. > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://react.dev/reference/react/StrictMode) or React 18. -MUI aims to provide a strong foundation for building dynamic UIs. -For the sake of simplicity, **we expose the styling solution used in MUI components** as the `@mui/styles` package. -You can use it, but you don't have to, since MUI is also [interoperable with](/material-ui/guides/interoperability/) all the other major styling solutions. +Material UI aims to provide a strong foundation for building dynamic UIs. +For the sake of simplicity, **we expose the styling solution used in Material UI components** as the `@mui/styles` package. +You can use it, but you don't have to, since Material UI is also [interoperable with](/material-ui/guides/interoperability/) all the other major styling solutions. -## Why use MUI's styling solution? +## Why use Material UI's styling solution? -In previous versions, MUI has used [Less](https://lesscss.org/), and then a custom inline-style solution to write the component styles, but these approaches proved to be limited. +In previous versions, Material UI has used [Less](https://lesscss.org/), and then a custom inline-style solution to write the component styles, but these approaches proved to be limited. [A _CSS-in-JS_ solution](https://github.com/oliviertassinari/a-journey-toward-better-style) overcomes many of those limitations, and **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). -MUI's styling solution is inspired by many other styling libraries such as [styled-components](https://styled-components.com/) and [Emotion](https://emotion.sh/). +Material UI's styling solution is inspired by many other styling libraries such as [styled-components](https://styled-components.com/) and [Emotion](https://emotion.sh/). - πŸ’… You can expect [the same advantages](https://styled-components.com/docs/basics#motivation) as styled-components. @@ -27,7 +27,7 @@ MUI's styling solution is inspired by many other styling libraries such as [styl - πŸš€ It's [blazing fast](https://github.com/mui/material-ui/tree/master/benchmark/server#material-uistyles). - 🧩 It's extensible via a [plugin](https://github.com/cssinjs/jss/blob/master/docs/plugins.md) API. - ⚑️ It uses [JSS](https://github.com/cssinjs/jss) at its core – a [high performance](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JavaScript to CSS compiler which works at runtime and server-side. -- πŸ“¦ Less than [15 KB gzipped](https://bundlephobia.com/package/@mui/styles); and no bundle size increase if used alongside MUI. +- πŸ“¦ Less than [15 KB gzipped](https://bundlephobia.com/package/@mui/styles); and no bundle size increase if used alongside Material UI. ## Installation @@ -218,7 +218,7 @@ const useStyles = makeStyles((theme) => ({ ## Using the theme context -Starting from v5, MUI no longer uses JSS as its default styling solution. If you still want to use the utilities exported by `@mui/styles` and they depend on the `theme`, you will need to provide the `theme` as part of the context. For this, you can use the `ThemeProvider` component available in `@mui/styles`, or, if you are already using `@mui/material`, you should use the one exported from `@mui/material/styles` so that the same `theme` is available for components from '@mui/material'. +Starting from v5, Material UI no longer uses JSS as its default styling solution. If you still want to use the utilities exported by `@mui/styles` and they depend on the `theme`, you will need to provide the `theme` as part of the context. For this, you can use the `ThemeProvider` component available in `@mui/styles`, or, if you are already using `@mui/material`, you should use the one exported from `@mui/material/styles` so that the same `theme` is available for components from '@mui/material'. ```jsx import { makeStyles } from '@mui/styles'; diff --git a/docs/data/system/components/box/box.md b/docs/data/system/components/box/box.md index d8b6cdcda96115..a8b903804e94f7 100644 --- a/docs/data/system/components/box/box.md +++ b/docs/data/system/components/box/box.md @@ -38,7 +38,7 @@ For instance, you can change the margin this way. However, sometimes you have to target the underlying DOM element. As an example, you may want to change the border of the Button. The Button component defines its own styles. CSS inheritance doesn't help. -To workaround the problem, you can use the [`sx`](/system/getting-started/the-sx-prop/) prop directly on the child if it is a MUI component. +To workaround the problem, you can use the [`sx`](/system/getting-started/the-sx-prop/) prop directly on the child if it is an MUI component. ```diff - diff --git a/docs/pages/blog/2019.md b/docs/pages/blog/2019.md index bf2eeafb974136..e12b38477e5234 100644 --- a/docs/pages/blog/2019.md +++ b/docs/pages/blog/2019.md @@ -101,5 +101,5 @@ Enterprise features will build on the open source version of the components. We are looking for a full-time Software Developer to join us! -If you want to help us onboard more full-time developers in the team, [here are a couple of ways](/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project). +If you want to help us onboard more full-time developers in the team, [here are a couple of ways](/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-company). Spreading the word to other developers that are looking for a great UI framework is also extremely helpful πŸ™Œ. From ec5bbc317d7e937047b0f82fec2bb1098ee08cea Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Sun, 30 Apr 2023 09:52:08 +0100 Subject: [PATCH 32/70] [Option][base] Drop component prop (#37052) --- docs/pages/base/api/option.json | 1 - .../api-docs-base/option/option.json | 1 - packages/mui-base/src/Option/Option.spec.tsx | 34 +++++++++++++++---- packages/mui-base/src/Option/Option.test.tsx | 1 + packages/mui-base/src/Option/Option.tsx | 18 ++-------- packages/mui-base/src/Option/Option.types.ts | 23 +++++-------- 6 files changed, 40 insertions(+), 38 deletions(-) diff --git a/docs/pages/base/api/option.json b/docs/pages/base/api/option.json index b88094c4f9055f..3c5bfc442c44e2 100644 --- a/docs/pages/base/api/option.json +++ b/docs/pages/base/api/option.json @@ -1,7 +1,6 @@ { "props": { "value": { "type": { "name": "any" }, "required": true }, - "component": { "type": { "name": "elementType" } }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "label": { "type": { "name": "string" } }, "slotProps": { diff --git a/docs/translations/api-docs-base/option/option.json b/docs/translations/api-docs-base/option/option.json index 9242960c42375e..934b7f4c1c0387 100644 --- a/docs/translations/api-docs-base/option/option.json +++ b/docs/translations/api-docs-base/option/option.json @@ -1,7 +1,6 @@ { "componentDescription": "An unstyled option to be used within a Select.", "propDescriptions": { - "component": "The component used for the root node. Either a string to use a HTML element or a component.", "disabled": "If true, the option will be disabled.", "label": "A text representation of the option's content. Used for keyboard text navigation matching.", "slotProps": "The props used for each slot inside the Option.", diff --git a/packages/mui-base/src/Option/Option.spec.tsx b/packages/mui-base/src/Option/Option.spec.tsx index c8e7aeaa33a537..ea49a8871a5782 100644 --- a/packages/mui-base/src/Option/Option.spec.tsx +++ b/packages/mui-base/src/Option/Option.spec.tsx @@ -24,21 +24,43 @@ const polymorphicComponentTest = () => { {/* @ts-expect-error */}