diff --git a/.browserslistrc b/.browserslistrc index 6ab4c0c15806ec..6bf6f0e0e1e601 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -72,66 +72,6 @@ safari 15.4 samsung 23 samsung 22 -[legacy] -ie 11 -and_chr 122 -and_chr 121 -and_ff 123 -and_ff 122 -and_qq 14.9 -and_uc 15.5 -android 122 -android 121 -chrome 122 -chrome 121 -chrome 120 -chrome 119 -chrome 109 -edge 122 -edge 121 -firefox 123 -firefox 122 -firefox 115 -ios_saf 17.4 -ios_saf 17.3 -ios_saf 17.2 -ios_saf 17.1 -ios_saf 17.0 -ios_saf 16.6-16.7 -ios_saf 16.5 -ios_saf 16.4 -ios_saf 16.3 -ios_saf 16.2 -ios_saf 16.1 -ios_saf 16.0 -ios_saf 15.6-15.8 -ios_saf 15.5 -ios_saf 15.4 -kaios 3.0-3.1 -kaios 2.5 -op_mini all -op_mob 80 -opera 108 -opera 107 -opera 106 -safari 17.4 -safari 17.3 -safari 17.2 -safari 17.1 -safari 17.0 -safari 16.6 -safari 16.5 -safari 16.4 -safari 16.3 -safari 16.2 -safari 16.1 -safari 16.0 -safari 15.6 -safari 15.5 -safari 15.4 -samsung 23 -samsung 22 - # snapshot of `npx browserslist "maintained node versions"` # On update check all #stable-snapshot markers [node] diff --git a/.circleci/config.yml b/.circleci/config.yml index 5a36ecd48f0849..c892050bbb708f 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -244,7 +244,7 @@ jobs: name: Lint writing style command: | vale sync - pnpm run valelint + pnpm valelint test_static: <<: *default-job steps: @@ -380,7 +380,7 @@ jobs: <<: *default-job resource_class: 'medium+' docker: - - image: mcr.microsoft.com/playwright:v1.43.0-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -410,7 +410,7 @@ jobs: test_e2e: <<: *default-job docker: - - image: mcr.microsoft.com/playwright:v1.43.0-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -430,7 +430,7 @@ jobs: # NOTE: This workflow runs after successful docs deploy. See /test/e2e-website/README.md#ci <<: *default-job docker: - - image: mcr.microsoft.com/playwright:v1.43.0-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -445,7 +445,7 @@ jobs: test_profile: <<: *default-job docker: - - image: mcr.microsoft.com/playwright:v1.43.0-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -472,7 +472,7 @@ jobs: test_regressions: <<: *default-job docker: - - image: mcr.microsoft.com/playwright:v1.43.0-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -526,7 +526,7 @@ jobs: <<: *default-job working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack4/ docker: - - image: mcr.microsoft.com/playwright:v1.43.0-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -550,7 +550,7 @@ jobs: <<: *default-job working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack5/ docker: - - image: mcr.microsoft.com/playwright:v1.43.0-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -574,7 +574,7 @@ jobs: <<: *default-job working_directory: /tmp/material-ui/test/bundling/fixtures/create-react-app/ docker: - - image: mcr.microsoft.com/playwright:v1.43.0-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -598,7 +598,7 @@ jobs: <<: *default-job working_directory: /tmp/material-ui/test/bundling/fixtures/snowpack/ docker: - - image: mcr.microsoft.com/playwright:v1.43.0-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -622,7 +622,7 @@ jobs: <<: *default-job working_directory: /tmp/material-ui/test/bundling/fixtures/vite/ docker: - - image: mcr.microsoft.com/playwright:v1.43.0-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -646,7 +646,7 @@ jobs: <<: *default-job working_directory: /tmp/material-ui/test/bundling/fixtures/esbuild/ docker: - - image: mcr.microsoft.com/playwright:v1.43.0-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -674,7 +674,7 @@ jobs: <<: *default-job working_directory: /tmp/material-ui/test/bundling/fixtures/gatsby/ docker: - - image: mcr.microsoft.com/playwright:v1.43.0-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -775,7 +775,7 @@ jobs: test_benchmark: <<: *default-job docker: - - image: mcr.microsoft.com/playwright:v1.43.0-focal + - image: mcr.microsoft.com/playwright:v1.43.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: diff --git a/.eslintrc.js b/.eslintrc.js index a06ac35ae3f3ae..a75d1e007728ff 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -164,7 +164,7 @@ module.exports = { 'react/state-in-constructor': 'off', // stylistic opinion. For conditional assignment we want it outside, otherwise as static 'react/static-property-placement': 'off', - // noopener is enough, no IE 11 support + // noopener is enough // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md#rule-options 'react/jsx-no-target-blank': ['error', { allowReferrer: true }], diff --git a/apps/pigment-css-next-app/README.md b/apps/pigment-css-next-app/README.md index 981a5f388be63e..ed983b5fd8b560 100644 --- a/apps/pigment-css-next-app/README.md +++ b/apps/pigment-css-next-app/README.md @@ -4,7 +4,7 @@ This is a Pigment CSS and [Next.js](https://nextjs.org/) project bootstrapped w ## Getting started -First, build all the packages in the workspace atleast once. Run +First, build all the packages in the workspace at least once. Run ```bash pnpm build:zero diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json index 54e6c80e27a573..84ef8fd91759f2 100644 --- a/apps/pigment-css-next-app/package.json +++ b/apps/pigment-css-next-app/package.json @@ -29,7 +29,7 @@ "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "eslint": "^8.57.0", - "typescript": "^5.4.4" + "typescript": "^5.4.5" }, "nx": { "targets": { diff --git a/apps/pigment-css-vite-app/README.md b/apps/pigment-css-vite-app/README.md index ea37e4a3adb7de..a9491647bf3268 100644 --- a/apps/pigment-css-vite-app/README.md +++ b/apps/pigment-css-vite-app/README.md @@ -5,7 +5,7 @@ This project is not part of the workspace yet. ## How to run -You can either run `pnpm build` to build all packages, or else build the two most important ones: +You can either run `pnpm build` to build all packages or else build the two most important ones: 1. `@pigment-css/react` 2. `@pigment-css/vite-plugin` diff --git a/babel.config.js b/babel.config.js index 48ca2abea4ce50..ad22418643bf84 100644 --- a/babel.config.js +++ b/babel.config.js @@ -13,7 +13,7 @@ const productionPlugins = [ ]; module.exports = function getBabelConfig(api) { - const useESModules = api.env(['regressions', 'legacy', 'modern', 'stable', 'rollup']); + const useESModules = api.env(['regressions', 'modern', 'stable', 'rollup']); const defaultAlias = { '@mui/material': resolveAliasPath('./packages/mui-material/src'), @@ -153,12 +153,6 @@ module.exports = function getBabelConfig(api) { ], ], }, - legacy: { - plugins: [ - // IE11 support - '@babel/plugin-transform-object-assign', - ], - }, test: { sourceMaps: 'both', plugins: [ diff --git a/benchmark/package.json b/benchmark/package.json index 8434c75feb5ca0..8fc00ccfc2e138 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -24,7 +24,7 @@ "express": "^4.19.2", "fs-extra": "^11.2.0", "jss": "^10.10.0", - "playwright": "^1.43.0", + "playwright": "^1.43.1", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/docs/babel.config.js b/docs/babel.config.js index 57d4fab1b602af..1ccf95cfbb1b80 100644 --- a/docs/babel.config.js +++ b/docs/babel.config.js @@ -32,8 +32,6 @@ module.exports = { }, ], 'babel-plugin-optimize-clsx', - // for IE11 support - '@babel/plugin-transform-object-assign', ], ignore: [/@babel[\\|/]runtime/], // Fix a Windows issue. env: { diff --git a/docs/data/joy/components/table/TableSortAndSelection.js b/docs/data/joy/components/table/TableSortAndSelection.js index 2455a21333b4cf..c7649aa9609b6d 100644 --- a/docs/data/joy/components/table/TableSortAndSelection.js +++ b/docs/data/joy/components/table/TableSortAndSelection.js @@ -65,22 +65,6 @@ function getComparator(order, orderBy) { : (a, b) => -descendingComparator(a, b, orderBy); } -// Since 2020 all major browsers ensure sort stability with Array.prototype.sort(). -// stableSort() brings sort stability to non-modern browsers (notably IE11). If you -// only support modern browsers you can replace stableSort(exampleArray, exampleComparator) -// with exampleArray.slice().sort(exampleComparator) -function stableSort(array, comparator) { - const stabilizedThis = array.map((el, index) => [el, index]); - stabilizedThis.sort((a, b) => { - const order = comparator(a[0], b[0]); - if (order !== 0) { - return order; - } - return a[1] - b[1]; - }); - return stabilizedThis.map((el) => el[0]); -} - const headCells = [ { id: 'name', @@ -348,7 +332,8 @@ export default function TableSortAndSelection() { rowCount={rows.length} /> - {stableSort(rows, getComparator(order, orderBy)) + {[...rows] + .sort(getComparator(order, orderBy)) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .map((row, index) => { const isItemSelected = isSelected(row.name); diff --git a/docs/data/joy/components/table/TableSortAndSelection.tsx b/docs/data/joy/components/table/TableSortAndSelection.tsx index f063700890b412..06026b6cfa0758 100644 --- a/docs/data/joy/components/table/TableSortAndSelection.tsx +++ b/docs/data/joy/components/table/TableSortAndSelection.tsx @@ -94,22 +94,6 @@ function getComparator( : (a, b) => -descendingComparator(a, b, orderBy); } -// Since 2020 all major browsers ensure sort stability with Array.prototype.sort(). -// stableSort() brings sort stability to non-modern browsers (notably IE11). If you -// only support modern browsers you can replace stableSort(exampleArray, exampleComparator) -// with exampleArray.slice().sort(exampleComparator) -function stableSort(array: readonly T[], comparator: (a: T, b: T) => number) { - const stabilizedThis = array.map((el, index) => [el, index] as [T, number]); - stabilizedThis.sort((a, b) => { - const order = comparator(a[0], b[0]); - if (order !== 0) { - return order; - } - return a[1] - b[1]; - }); - return stabilizedThis.map((el) => el[0]); -} - interface HeadCell { disablePadding: boolean; id: keyof Data; @@ -390,7 +374,8 @@ export default function TableSortAndSelection() { rowCount={rows.length} /> - {stableSort(rows, getComparator(order, orderBy)) + {[...rows] + .sort(getComparator(order, orderBy)) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .map((row, index) => { const isItemSelected = isSelected(row.name); diff --git a/docs/data/joy/getting-started/templates/TemplateCollection.js b/docs/data/joy/getting-started/templates/TemplateCollection.js index 171ed4e5293c2c..28bad8f0d3e98f 100644 --- a/docs/data/joy/getting-started/templates/TemplateCollection.js +++ b/docs/data/joy/getting-started/templates/TemplateCollection.js @@ -88,7 +88,7 @@ const templates = [ author: authors.MUI, design: { name: 'Frames X', - link: 'https://framesxdesign.com/', + link: 'https://framesxdesign.com/product', }, }, ]; diff --git a/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx b/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx index d01260b9fcd5d2..06c900a8d05ae1 100644 --- a/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx +++ b/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx @@ -242,22 +242,6 @@ function getComparator( : (a, b) => -descendingComparator(a, b, orderBy); } -// Since 2020 all major browsers ensure sort stability with Array.prototype.sort(). -// stableSort() brings sort stability to non-modern browsers (notably IE11). If you -// only support modern browsers you can replace stableSort(exampleArray, exampleComparator) -// with exampleArray.slice().sort(exampleComparator) -function stableSort(array: readonly T[], comparator: (a: T, b: T) => number) { - const stabilizedThis = array.map((el, index) => [el, index] as [T, number]); - stabilizedThis.sort((a, b) => { - const order = comparator(a[0], b[0]); - if (order !== 0) { - return order; - } - return a[1] - b[1]; - }); - return stabilizedThis.map((el) => el[0]); -} - function RowMenu() { return ( @@ -451,7 +435,7 @@ export default function OrderTable() { - {stableSort(rows, getComparator(order, 'id')).map((row) => ( + {[...rows].sort(getComparator(order, 'id')).map((row) => ( } > - Upload file - + Upload files + console.log(event.target.files)} + multiple + /> ); } diff --git a/docs/data/material/components/buttons/InputFileUpload.tsx b/docs/data/material/components/buttons/InputFileUpload.tsx index d1cfcba03567ac..e939eba055432b 100644 --- a/docs/data/material/components/buttons/InputFileUpload.tsx +++ b/docs/data/material/components/buttons/InputFileUpload.tsx @@ -24,8 +24,12 @@ export default function InputFileUpload() { tabIndex={-1} startIcon={} > - Upload file - + Upload files + console.log(event.target.files)} + multiple + /> ); } diff --git a/docs/data/material/components/buttons/InputFileUpload.tsx.preview b/docs/data/material/components/buttons/InputFileUpload.tsx.preview index 69ab491553d7c8..c2dccf123cc789 100644 --- a/docs/data/material/components/buttons/InputFileUpload.tsx.preview +++ b/docs/data/material/components/buttons/InputFileUpload.tsx.preview @@ -5,6 +5,10 @@ tabIndex={-1} startIcon={} > - Upload file - + Upload files + console.log(event.target.files)} + multiple + /> \ No newline at end of file diff --git a/docs/data/material/components/icons/CreateSvgIcon.js b/docs/data/material/components/icons/CreateSvgIcon.js index ec540e8058cd14..ee8f3ae3156c51 100644 --- a/docs/data/material/components/icons/CreateSvgIcon.js +++ b/docs/data/material/components/icons/CreateSvgIcon.js @@ -8,7 +8,7 @@ const HomeIcon = createSvgIcon( ); const PlusIcon = createSvgIcon( - // credit: plus icon from https://heroicons.com/ + // credit: plus icon from https://heroicons.com - {/* credit: plus icon from https://heroicons.com/ */} + {/* credit: cog icon from https://heroicons.com */} - {/* credit: plus icon from https://heroicons.com/ */} + {/* credit: cog icon from https://heroicons.com */} - {/* credit: plus icon from https://heroicons.com/ */} + {/* credit: cog icon from https://heroicons.com */} -descendingComparator(a, b, orderBy); } -// Since 2020 all major browsers ensure sort stability with Array.prototype.sort(). -// stableSort() brings sort stability to non-modern browsers (notably IE11). If you -// only support modern browsers you can replace stableSort(exampleArray, exampleComparator) -// with exampleArray.slice().sort(exampleComparator) -function stableSort(array, comparator) { - const stabilizedThis = array.map((el, index) => [el, index]); - stabilizedThis.sort((a, b) => { - const order = comparator(a[0], b[0]); - if (order !== 0) { - return order; - } - return a[1] - b[1]; - }); - return stabilizedThis.map((el) => el[0]); -} - const headCells = [ { id: 'name', @@ -288,10 +272,9 @@ export default function EnhancedTable() { const visibleRows = React.useMemo( () => - stableSort(rows, getComparator(order, orderBy)).slice( - page * rowsPerPage, - page * rowsPerPage + rowsPerPage, - ), + [...rows] + .sort(getComparator(order, orderBy)) + .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage), [order, orderBy, page, rowsPerPage], ); diff --git a/docs/data/material/components/table/EnhancedTable.tsx b/docs/data/material/components/table/EnhancedTable.tsx index d1fd663dc821cc..23d1f23a1c19d2 100644 --- a/docs/data/material/components/table/EnhancedTable.tsx +++ b/docs/data/material/components/table/EnhancedTable.tsx @@ -88,22 +88,6 @@ function getComparator( : (a, b) => -descendingComparator(a, b, orderBy); } -// Since 2020 all major browsers ensure sort stability with Array.prototype.sort(). -// stableSort() brings sort stability to non-modern browsers (notably IE11). If you -// only support modern browsers you can replace stableSort(exampleArray, exampleComparator) -// with exampleArray.slice().sort(exampleComparator) -function stableSort(array: readonly T[], comparator: (a: T, b: T) => number) { - const stabilizedThis = array.map((el, index) => [el, index] as [T, number]); - stabilizedThis.sort((a, b) => { - const order = comparator(a[0], b[0]); - if (order !== 0) { - return order; - } - return a[1] - b[1]; - }); - return stabilizedThis.map((el) => el[0]); -} - interface HeadCell { disablePadding: boolean; id: keyof Data; @@ -320,10 +304,9 @@ export default function EnhancedTable() { const visibleRows = React.useMemo( () => - stableSort(rows, getComparator(order, orderBy)).slice( - page * rowsPerPage, - page * rowsPerPage + rowsPerPage, - ), + [...rows] + .sort(getComparator(order, orderBy)) + .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage), [order, orderBy, page, rowsPerPage], ); diff --git a/docs/data/material/design-resources/connect/connect.md b/docs/data/material/design-resources/connect/connect.md new file mode 100644 index 00000000000000..b441a460c6ee6d --- /dev/null +++ b/docs/data/material/design-resources/connect/connect.md @@ -0,0 +1,301 @@ +# Connect plugin + +

Connect is a Figma plugin that generates Material UI themes directly from design to code.

+ +## Introduction + +[Connect](https://www.figma.com/community/plugin/1336346114713490235/) is a Figma plugin that lets you generate a theme from the [Material UI for Figma Design Kit](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x/). + +:::warning +Connect works in combination with the [Material UI for Figma Design Kit v5.16.0](https://github.com/mui/mui-design-kits/releases) and later. +Other kits, such as the Joy UI Design Kit, are not supported yet. +::: + +Customizing the Material UI Switch component in Figma with the Connect plugin running. + +## Running the plugin + +If you don't have the [complete and latest version](/store/items/figma-react/) of the Material UI for Figma Design Kit installed, you can test the plugin by using the [Community version](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x/) instead. + +After installing and opening it in Figma, head over to the [Connect plugin page](https://www.figma.com/community/plugin/1336346114713490235/) on the Community tab and click on **Open in...** and select the Material UI for Figma Design Kit. + +Accessing Connect via the Resources menu in Figma. + +## Customizing design tokens + +Design tokens are defined in the Design Kit's [local variable collections](https://help.figma.com/hc/en-us/articles/15145852043927-Create-and-manage-variables) and include color palettes, breakpoints, shapes, and spacing tokens. +Typography and shadow-related tokens are found in the [local styles collection](https://help.figma.com/hc/en-us/articles/360039820134-Manage-and-share-styles#:~:text=Local%20styles%20are%20styles%20that,or%20from%20the%20style%20picker.). + +### Altering existing tokens + +The Material UI for Figma Design Kit comes fully loaded with design tokens that map out to the [default theme of the Material UI React library](/material-ui/customization/default-theme/). + +To customize existing tokens, open the [local variable modal](https://help.figma.com/hc/en-us/articles/15145852043927-Create-and-manage-variables) by clicking on the filter icon as shown below. +Tweak any of the variables available in the collections (such as palettes, breakpoints, shapes, and spacing) as you see fit. + +The Local variables menu in Figma, where all design tokens are stored and new ones can be added. + +Then open the Connect plugin and click on **Generate theme**. + +The Generate theme button in the Connect plugin UI. + +A theme containing the altered tokens is generated and displayed in the plugin's Theme tab. + +The generated theme displayed in the Connect plugin UI. + +You can also preview the generated theme and the customized tokens by navigating to the Storybook preview tab. + +The generated theme previewed in Storybook in the Connect plugin UI. + +### Adding new tokens + +You can extend the existing tokens set with your own either by adding new variables to the existing local variable collections, or by adding new elevation and typography styles to the local style collections. +After you've added your custom tokens, click on **Regenerate theme** to include these tokens in your theme. + +The Regenerate button in the Connect plugin UI. + +## Customizing components + +Connect can also generate theme styles for customized components, enabling you to completely change their look and feel and create your custom design system from within Figma. + +:::info +This feature is currently limited to the Button, Switch, and Typography components. +Support for more components is coming soon. +::: + +As an example, here's how to customize the checked state, medium size, and primary color of a Switch component to replicate the iOS design system: + +:::warning +The Design Kit's component layer hierarchy and layer names must remain unaltered for Connect to correctly extract custom component styles and generate the theme. +::: + +A specific variant of the Switch component selected in the Design Kit. + +Connect generates the following theme code for the customized Switch: + +```js +{ + components: { + MuiSwitch: { + styleOverrides: { + root: { + '&.MuiSwitch-sizeMedium:has(.MuiSwitch-colorPrimary)': { + '&:has(.Mui-checked):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible))': + { + width: '40px', + height: '21px', + padding: '0', + '& .MuiSwitch-switchBase': { + transform: 'translateX(19px) translateY(2px)', + padding: '0', + '& .MuiSwitch-thumb': { + width: '17px', + height: '17px', + background: '#FAFAFA', + }, + '& + .MuiSwitch-track': { + width: '38px', + height: '21px', + background: 'var(--mui-palette-success-light)', + opacity: '1', + }, + }, + }, + }, + }, + }, + }, + }, +} +``` + +The generated theme targets classes that correspond to the specific Switch configuration defined above, so styles are only applied when the props and state of the Material UI component match those of the customized Figma component. + +To customize other states, you need to apply the desired design changes to each variant in Figma by following these steps: + +1. Customize a single "base" variant—for example, a Switch component in the checked state, of medium size, and primary color. +2. Clone this variant and rename it to target the next variant you'd like to customize—for example, rename the cloned version of `Checked=True, Size=Medium, Color=Primary, State=Enabled` to `Checked=False, Size=Medium, Color=Primary, State=Enabled`. +3. Delete the old versions of the same variant. +4. Move the new version to the correct square in the variant grid. +5. Make the necessary style adjustments to the variant's child layers. + +Repeat this process for each variant you want to customize. +Here's an example of what this might look like: + +A fully customized Switch component in the Material UI Design Kit. + +You can run Connect to generate a new theme. +From here you can run Connect to generate a new theme—here's what would be generated from the example above: + +```js +{ + components: { + MuiSwitch: { + styleOverrides: { + root: { + "&.MuiSwitch-sizeMedium:has(.MuiSwitch-colorPrimary)": { + width: "40px", + height: "21px", + padding: "0", + "& .MuiSwitch-switchBase": { + padding: "0", + "& .MuiSwitch-thumb": { + width: "17px", + height: "17px", + background: "#FAFAFA", + }, + "& + .MuiSwitch-track": { + width: "38px", + height: "21px", + borderRadius: "100px", + opacity: "1", + }, + }, + "&:not(:has(.Mui-checked)):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible))": { + "& .MuiSwitch-switchBase": { + transform: "translateX(3px) translateY(2px)", + "& + .MuiSwitch-track": { + background: "#BDBDBD", + }, + }, + }, + "&:not(:has(.Mui-checked)):has(.Mui-disabled):not(:has(.Mui-focusVisible))": { + "& .MuiSwitch-switchBase": { + transform: "translateX(3px) translateY(2px)", + "& + .MuiSwitch-track": { + background: "rgba(229, 229, 229, 0.99)", + }, + }, + }, + "&:not(:has(.Mui-checked)):not(:has(.Mui-disabled)):has(.Mui-focusVisible)": { + "& .MuiSwitch-switchBase": { + transform: "translateX(3px) translateY(2px)", + "& + .MuiSwitch-track": { + border: "1px solid #000", + background: "#BDBDBD", + }, + }, + }, + "&:has(.Mui-checked):has(.Mui-disabled):not(:has(.Mui-focusVisible))": { + "& .MuiSwitch-switchBase": { + transform: "translateX(19px) translateY(2px)", + "& + .MuiSwitch-track": { + background: "rgba(187, 231, 188, 0.99)", + }, + }, + }, + "&:not(:has(.Mui-checked)):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible)):hover": { + "& .MuiSwitch-switchBase": { + transform: "translateX(3px) translateY(2px)", + "& + .MuiSwitch-track": { + background: "#616161", + }, + }, + }, + "&:has(.Mui-checked):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible))": { + "& .MuiSwitch-switchBase": { + transform: "translateX(19px) translateY(2px)", + "& + .MuiSwitch-track": { + background: "var(--mui-palette-success-light)", + }, + }, + }, + "&:has(.Mui-checked):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible)):hover": { + "& .MuiSwitch-switchBase": { + transform: "translateX(19px) translateY(2px)", + "& + .MuiSwitch-track": { + background: "var(--mui-palette-success-dark)", + }, + }, + }, + "&:has(.Mui-checked):not(:has(.Mui-disabled)):has(.Mui-focusVisible)": { + "& .MuiSwitch-switchBase": { + transform: "translateX(19px) translateY(2px)", + "& + .MuiSwitch-track": { + border: "1px solid #000", + background: "var(--mui-palette-success-light)", + }, + }, + }, + }, + }, + }, + }, + }, +} +``` + +:::info +The generated theme may contain the CSS `has()` selector, which is used to target specific child classes. +This selector is not used by other theme-related examples in the docs because it used to have limited browser support. +It is now [supported by all modern browsers](https://caniuse.com/css-has). +::: + +You can also check out the Storybook preview to test the Material UI version of your component. + +A fully customized Switch component in Storybook. + +## Using the generated theme + +:::warning +Themes generated by Connect must be used with Material UI's [`CssVarsProvider`](/material-ui/experimental-api/css-theme-variables/migration/)—the default [`ThemeProvider`](/material-ui/customization/theming/#theme-provider) is not supported. +::: + +Here's an example of how to add a Connect theme to your codebase: + +```tsx title="_app.tsx" +import { + experimental_extendTheme as extendTheme, + Experimental_CssVarsProvider as CssVarsProvider, +} from '@mui/material/styles'; + +export default function MyApp({ Component, pageProps }) { + const theme = extendTheme({ + shape: { + borderRadiusRound: 999, + }, + components: { + MuiSwitch: { + styleOverrides: { + root: { + '&.MuiSwitch-sizeMedium:has(.MuiSwitch-colorPrimary)': { + '&:has(.Mui-checked):not(:has(.Mui-disabled)):not(:has(.Mui-focusVisible))': + { + width: '40px', + height: '21px', + padding: '0', + '& .MuiSwitch-switchBase': { + transform: 'translateX(19px) translateY(2px)', + padding: '0', + '& .MuiSwitch-thumb': { + width: '17px', + height: '17px', + background: '#FAFAFA', + }, + '& + .MuiSwitch-track': { + width: '38px', + height: '21px', + background: 'var(--mui-palette-success-light)', + borderRadius: 'var(--mui-shape-borderRadiusRound)', + opacity: '1', + }, + }, + }, + }, + }, + }, + }, + }, + }); + + return ( + + + + ); +} +``` + +## Feedback and bug reports + +Use [the dedicated Connect feedback board](https://mui-connect.canny.io/feedback) to share feedback, report bugs, or drop feature requests. diff --git a/docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md b/docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md new file mode 100644 index 00000000000000..f3fb7295aa33d4 --- /dev/null +++ b/docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md @@ -0,0 +1,94 @@ +# Material UI for Figma + +

Enhance designer-developer collaboration between Material UI and Figma.

+ +## Getting started + +Material UI for Figma consists of representations of the library's React components in Figma so designers and developers can communicate and iterate more efficiently. +The kit includes: + +- components with the same design as Material UI +- additional components and features not covered by Material Design +- shared terminology from the React library for props, variables, design tokens, and other values + +### Community vs. full version + +The Material UI design kit is available in the [community (free) version](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x) and the [full (paid) version](https://mui.com/store/items/figma-react/). + +| | Community | Full version | +| :-------------------------------- | --------: | -----------: | +| Components without customizations | All | All | +| Components with customizations | 4 | All | +| Figma variables | - | ✅ | + +### Installing the full version + +Start by extracting the `.zip` archive which contains the `.fig` files. +Then you can either follow [Figma's import guide](https://help.figma.com/hc/en-us/articles/360041003114-Import-files-into-Figma) or [add it to your team library](https://help.figma.com/hc/en-us/articles/360041051154-Getting-Started-with-Team-Library). + +## Theme + +### Local variables + +The design kit uses Figma's local variables to create a collection of styles comparable to the theme structure of Material UI code. +Follow the steps in the video below to see all the variables available: + + + +### Customizing colors + +Use the variables panel to customize colors as shown in the video below: + + + +### Customizing typography + +Typography customization uses local styles rather than local variables. +The experience is similar to modifying colors, as shown in the video below: + + + +### Switching between light and dark modes + +The design kit uses Figma's local variables to let you toggle the variable mode between light and dark, as shown in the video below: + + + +## Components + +### Editing the main components + +You can use the [Similayer](https://www.figma.com/community/plugin/735733267883397781/Similayer) plugin to select multiple components at once that share some property. + + + +### Table component + +#### Adding new columns + +The video below shows how to add new columns by detaching cells from their row components, allowing you to freely move content around. + + + +#### Adding new columns in the main component + +The Table and Data Grid components come with a limited number of columns by default. +The video below shows how to add new columns by copying cells directly on the main component: + + + +## Code sync + +You can export theme tokens and component customizations to code using [the Connect plugin for Figma](/material-ui/design-resources/connect/). +Material UI for Figma has been built to be as close to the React components as possible, making it for a fluid integration with code. + +Learn more about the Material UI theme structure by visiting the [Theming](https://mui.com/material-ui/customization/theming/) and [Default theme viewer](https://mui.com/material-ui/customization/theming/) pages. + +## Using new design kit versions + +We generally don't release breaking changes in the updates—we add new content instead. +If you need to replace a single component that's been updated, there are a couple of options: + +1. Add the new version of the design kit as a library and use [the new Figma library swap feature](https://www.youtube.com/watch?v=GQ2jztKpxLk). The components must have the same names in both libraries. +2. Observe the new component and re-apply the changes to the existing projects. This is the recommended approach when you need to update multiple projects. +3. Copy and paste the new component into your existing project, give it a different temporary name, then re-link tokens to the new component. When using [Select Similar plugins](https://www.figma.com/community/plugin/792767780551514994/Select-Similar) this shouldn't take more than five minutes. Then you can remove the old component and update the new component name. 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 a99aeb2c28a711..97b939668f0230 100644 --- a/docs/data/material/getting-started/design-resources/design-resources.md +++ b/docs/data/material/getting-started/design-resources/design-resources.md @@ -2,12 +2,26 @@

Be more efficient designing and developing with the same library.

-## Official kits +## Design kits -Pick your favorite design tool to enjoy and use the Material UI component inventory, including over 1,500 unique elements with their full range of states and variations. +Material UI component designs are available for Figma, Sketch, and Adobe XD, providing accurate representations using shared terminology for all states, variants, and permutations of each component. + +The design kits are composed of over 1,500 unique elements built to speed up the development process and ease communication for teams of designers and developers using the library. {{"component": "modules/components/MaterialUIDesignResources.js"}} +## Connect Figma plugin + +Connect is a Figma plugin to help bridge the gap between designers and developers using Material UI. + +It generates a theme file that you can add to your codebase with all the design tokens and component customizations from Figma. +You can quickly preview all of the changes through an embedded Storybook panel directly in the plugin interface. + +Connect is currently in beta and [available for free](https://www.figma.com/community/plugin/1336346114713490235/) in the Figma Community. +Head over to [the Connect page](/material-ui/design-resources/connect/) to learn more. + +Customizing the Material UI Switch component in Figma with the Connect plugin running. + ## Third-party resources ### UXPin diff --git a/docs/data/material/getting-started/templates/checkout/PaymentForm.js b/docs/data/material/getting-started/templates/checkout/PaymentForm.js index 3c8e573a1e3005..5c067d125c0d57 100644 --- a/docs/data/material/getting-started/templates/checkout/PaymentForm.js +++ b/docs/data/material/getting-started/templates/checkout/PaymentForm.js @@ -2,7 +2,7 @@ import * as React from 'react'; import Alert from '@mui/material/Alert'; import Box from '@mui/material/Box'; -import Card from '@mui/material/Card'; +import { Card as MuiCard } from '@mui/material'; import CardActionArea from '@mui/material/CardActionArea'; import CardContent from '@mui/material/CardContent'; import Checkbox from '@mui/material/Checkbox'; @@ -14,12 +14,63 @@ import RadioGroup from '@mui/material/RadioGroup'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; +import { styled } from '@mui/material/styles'; + import AccountBalanceRoundedIcon from '@mui/icons-material/AccountBalanceRounded'; import CreditCardRoundedIcon from '@mui/icons-material/CreditCardRounded'; import SimCardRoundedIcon from '@mui/icons-material/SimCardRounded'; import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; -import { styled } from '@mui/system'; +const Card = styled(MuiCard)(({ theme, selected }) => ({ + border: '1px solid', + borderColor: theme.palette.divider, + width: '100%', + '&:hover': { + background: + theme.palette.mode === 'light' + ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' + : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', + borderColor: theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', + boxShadow: + theme.palette.mode === 'light' + ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' + : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', + }, + [theme.breakpoints.up('md')]: { + flexGrow: 1, + maxWidth: `calc(50% - ${theme.spacing(1)})`, + }, + ...(selected && { + backgroundColor: theme.palette.action.selected, + borderColor: + theme.palette.mode === 'light' + ? theme.palette.primary.light + : theme.palette.primary.dark, + }), +})); + +const PaymentContainer = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + width: '100%', + height: 375, + padding: theme.spacing(3), + borderRadius: '20px', + border: '1px solid ', + borderColor: theme.palette.divider, + background: + theme.palette.mode === 'light' + ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.3) 25%, hsla(210, 100%, 90%, 0.3) 100%)' + : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', + boxShadow: '0px 4px 8px hsla(210, 0%, 0%, 0.05)', + [theme.breakpoints.up('xs')]: { + height: 300, + }, + [theme.breakpoints.up('sm')]: { + height: 350, + }, +})); const FormGrid = styled('div')(() => ({ display: 'flex', @@ -68,35 +119,12 @@ export default function PaymentForm() { value={paymentType} onChange={handlePaymentTypeChange} sx={{ - flexDirection: { sm: 'column', md: 'row' }, + display: 'flex', + flexDirection: { xs: 'column', sm: 'row' }, gap: 2, }} > - ({ - maxWidth: { sm: '100%', md: '50%' }, - flexGrow: 1, - border: '1px solid', - borderColor: 'divider', - '&:hover': { - background: - theme.palette.mode === 'light' - ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' - : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', - borderColor: - theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', - boxShadow: - theme.palette.mode === 'light' - ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' - : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', - }, - ...(paymentType === 'creditCard' && { - backgroundColor: 'action.selected', - borderColor: - theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', - }), - })} - > + setPaymentType('creditCard')} sx={{ @@ -122,31 +150,7 @@ export default function PaymentForm() { - ({ - maxWidth: { sm: '100%', md: '50%' }, - flexGrow: 1, - border: '1px solid', - borderColor: 'divider', - '&:hover': { - background: - theme.palette.mode === 'light' - ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' - : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', - borderColor: - theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', - boxShadow: - theme.palette.mode === 'light' - ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' - : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', - }, - ...(paymentType === 'bankTransfer' && { - backgroundColor: 'action.selected', - borderColor: - theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', - }), - })} - > + setPaymentType('bankTransfer')} sx={{ @@ -182,21 +186,7 @@ export default function PaymentForm() { gap: 2, }} > - + Credit card @@ -269,7 +259,7 @@ export default function PaymentForm() { /> - + } label="Remember credit card details for next time" diff --git a/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx b/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx index d6db3289ae9970..02d4e8d78919ea 100644 --- a/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx +++ b/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Alert from '@mui/material/Alert'; import Box from '@mui/material/Box'; -import Card from '@mui/material/Card'; +import { Card as MuiCard } from '@mui/material'; import CardActionArea from '@mui/material/CardActionArea'; import CardContent from '@mui/material/CardContent'; import Checkbox from '@mui/material/Checkbox'; @@ -14,12 +14,63 @@ import RadioGroup from '@mui/material/RadioGroup'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; +import { styled } from '@mui/material/styles'; + import AccountBalanceRoundedIcon from '@mui/icons-material/AccountBalanceRounded'; import CreditCardRoundedIcon from '@mui/icons-material/CreditCardRounded'; import SimCardRoundedIcon from '@mui/icons-material/SimCardRounded'; import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; -import { styled } from '@mui/system'; +const Card = styled(MuiCard)<{ selected?: boolean }>(({ theme, selected }) => ({ + border: '1px solid', + borderColor: theme.palette.divider, + width: '100%', + '&:hover': { + background: + theme.palette.mode === 'light' + ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' + : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', + borderColor: theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', + boxShadow: + theme.palette.mode === 'light' + ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' + : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', + }, + [theme.breakpoints.up('md')]: { + flexGrow: 1, + maxWidth: `calc(50% - ${theme.spacing(1)})`, + }, + ...(selected && { + backgroundColor: theme.palette.action.selected, + borderColor: + theme.palette.mode === 'light' + ? theme.palette.primary.light + : theme.palette.primary.dark, + }), +})); + +const PaymentContainer = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + width: '100%', + height: 375, + padding: theme.spacing(3), + borderRadius: '20px', + border: '1px solid ', + borderColor: theme.palette.divider, + background: + theme.palette.mode === 'light' + ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.3) 25%, hsla(210, 100%, 90%, 0.3) 100%)' + : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', + boxShadow: '0px 4px 8px hsla(210, 0%, 0%, 0.05)', + [theme.breakpoints.up('xs')]: { + height: 300, + }, + [theme.breakpoints.up('sm')]: { + height: 350, + }, +})); const FormGrid = styled('div')(() => ({ display: 'flex', @@ -70,35 +121,12 @@ export default function PaymentForm() { value={paymentType} onChange={handlePaymentTypeChange} sx={{ - flexDirection: { sm: 'column', md: 'row' }, + display: 'flex', + flexDirection: { xs: 'column', sm: 'row' }, gap: 2, }} > - ({ - maxWidth: { sm: '100%', md: '50%' }, - flexGrow: 1, - border: '1px solid', - borderColor: 'divider', - '&:hover': { - background: - theme.palette.mode === 'light' - ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' - : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', - borderColor: - theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', - boxShadow: - theme.palette.mode === 'light' - ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' - : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', - }, - ...(paymentType === 'creditCard' && { - backgroundColor: 'action.selected', - borderColor: - theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', - }), - })} - > + setPaymentType('creditCard')} sx={{ @@ -124,31 +152,7 @@ export default function PaymentForm() { - ({ - maxWidth: { sm: '100%', md: '50%' }, - flexGrow: 1, - border: '1px solid', - borderColor: 'divider', - '&:hover': { - background: - theme.palette.mode === 'light' - ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' - : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', - borderColor: - theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', - boxShadow: - theme.palette.mode === 'light' - ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' - : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ', - }, - ...(paymentType === 'bankTransfer' && { - backgroundColor: 'action.selected', - borderColor: - theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark', - }), - })} - > + setPaymentType('bankTransfer')} sx={{ @@ -184,21 +188,7 @@ export default function PaymentForm() { gap: 2, }} > - + Credit card @@ -271,7 +261,7 @@ export default function PaymentForm() { /> - + } label="Remember credit card details for next time" diff --git a/docs/data/material/getting-started/templates/landing-page/components/Features.js b/docs/data/material/getting-started/templates/landing-page/components/Features.js index 565084d9b210a9..34b8842a6a8539 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Features.js +++ b/docs/data/material/getting-started/templates/landing-page/components/Features.js @@ -2,12 +2,15 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; -import Chip from '@mui/material/Chip'; +import { Chip as MuiChip } from '@mui/material'; import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; import Link from '@mui/material/Link'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; + +import { styled } from '@mui/material/styles'; + import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded'; import EdgesensorHighRoundedIcon from '@mui/icons-material/EdgesensorHighRounded'; @@ -40,6 +43,21 @@ const items = [ }, ]; +const Chip = styled(MuiChip)(({ theme, selected }) => ({ + ...(selected && { + borderColor: + theme.palette.mode === 'light' + ? theme.palette.primary.light + : theme.palette.primary.dark, + background: + 'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))', + color: 'hsl(0, 0%, 100%)', + '& .MuiChip-label': { + color: 'hsl(0, 0%, 100%)', + }, + }), +})); + export default function Features() { const [selectedItemIndex, setSelectedItemIndex] = React.useState(0); @@ -73,20 +91,7 @@ export default function Features() { key={index} label={title} onClick={() => handleItemClick(index)} - sx={(theme) => ({ - ...(selectedItemIndex === index && { - borderColor: - theme.palette.mode === 'light' - ? 'primary.light' - : 'primary.dark', - background: - 'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))', - color: 'hsl(0, 0%, 100%)', - '& .MuiChip-label': { - color: 'hsl(0, 0%, 100%)', - }, - }), - })} + selected={selectedItemIndex === index} /> ))} diff --git a/docs/data/material/getting-started/templates/landing-page/components/Features.tsx b/docs/data/material/getting-started/templates/landing-page/components/Features.tsx index f02afaa5483979..1f198bafe9b841 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Features.tsx +++ b/docs/data/material/getting-started/templates/landing-page/components/Features.tsx @@ -2,12 +2,15 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; -import Chip from '@mui/material/Chip'; +import { Chip as MuiChip } from '@mui/material'; import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; import Link from '@mui/material/Link'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; + +import { styled } from '@mui/material/styles'; + import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded'; import EdgesensorHighRoundedIcon from '@mui/icons-material/EdgesensorHighRounded'; @@ -40,6 +43,25 @@ const items = [ }, ]; +interface ChipProps { + selected?: boolean; +} + +const Chip = styled(MuiChip)(({ theme, selected }) => ({ + ...(selected && { + borderColor: + theme.palette.mode === 'light' + ? theme.palette.primary.light + : theme.palette.primary.dark, + background: + 'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))', + color: 'hsl(0, 0%, 100%)', + '& .MuiChip-label': { + color: 'hsl(0, 0%, 100%)', + }, + }), +})); + export default function Features() { const [selectedItemIndex, setSelectedItemIndex] = React.useState(0); @@ -73,20 +95,7 @@ export default function Features() { key={index} label={title} onClick={() => handleItemClick(index)} - sx={(theme) => ({ - ...(selectedItemIndex === index && { - borderColor: - theme.palette.mode === 'light' - ? 'primary.light' - : 'primary.dark', - background: - 'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))', - color: 'hsl(0, 0%, 100%)', - '& .MuiChip-label': { - color: 'hsl(0, 0%, 100%)', - }, - }), - })} + selected={selectedItemIndex === index} /> ))} diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.js b/docs/data/material/getting-started/templates/landing-page/components/Hero.js index a8e9b21b0c2ef9..dadc3e27009461 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Hero.js +++ b/docs/data/material/getting-started/templates/landing-page/components/Hero.js @@ -9,6 +9,34 @@ import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; import { visuallyHidden } from '@mui/utils'; +import { styled } from '@mui/material/styles'; + +const StyledBox = styled('div')(({ theme }) => ({ + alignSelf: 'center', + width: '100%', + height: 400, + marginTop: theme.spacing(8), + borderRadius: theme.shape.borderRadius, + boxShadow: + theme.palette.mode === 'light' + ? '0 0 12px 8px hsla(220, 25%, 80%, 0.2)' + : '0 0 24px 12px hsla(210, 100%, 25%, 0.2)', + outline: '1px solid', + backgroundImage: `url(${ + theme.palette.mode === 'light' + ? '/static/images/templates/templates-images/hero-light.png' + : '/static/images/templates/templates-images/hero-dark.png' + })`, + backgroundSize: 'cover', + outlineColor: + theme.palette.mode === 'light' + ? 'hsla(220, 25%, 80%, 0.5)' + : 'hsla(210, 100%, 80%, 0.1)', + [theme.breakpoints.up('sm')]: { + marginTop: theme.spacing(10), + height: 700, + }, +})); export default function Hero() { return ( @@ -102,30 +130,7 @@ export default function Hero() { . - ({ - mt: { xs: 8, sm: 10 }, - alignSelf: 'center', - height: { xs: 200, sm: 700 }, - width: '100%', - backgroundImage: - theme.palette.mode === 'light' - ? 'url("/static/images/templates/templates-images/hero-light.png")' - : 'url("/static/images/templates/templates-images/hero-dark.png")', - backgroundSize: 'cover', - borderRadius: '12px', - outline: '1px solid', - outlineColor: - theme.palette.mode === 'light' - ? 'hsla(220, 25%, 80%, 0.5)' - : 'hsla(210, 100%, 80%, 0.1)', - boxShadow: - theme.palette.mode === 'light' - ? '0 0 12px 8px hsla(220, 25%, 80%, 0.2)' - : '0 0 24px 12px hsla(210, 100%, 25%, 0.2)', - })} - /> + ); diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx b/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx index a8e9b21b0c2ef9..dadc3e27009461 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx +++ b/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx @@ -9,6 +9,34 @@ import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; import { visuallyHidden } from '@mui/utils'; +import { styled } from '@mui/material/styles'; + +const StyledBox = styled('div')(({ theme }) => ({ + alignSelf: 'center', + width: '100%', + height: 400, + marginTop: theme.spacing(8), + borderRadius: theme.shape.borderRadius, + boxShadow: + theme.palette.mode === 'light' + ? '0 0 12px 8px hsla(220, 25%, 80%, 0.2)' + : '0 0 24px 12px hsla(210, 100%, 25%, 0.2)', + outline: '1px solid', + backgroundImage: `url(${ + theme.palette.mode === 'light' + ? '/static/images/templates/templates-images/hero-light.png' + : '/static/images/templates/templates-images/hero-dark.png' + })`, + backgroundSize: 'cover', + outlineColor: + theme.palette.mode === 'light' + ? 'hsla(220, 25%, 80%, 0.5)' + : 'hsla(210, 100%, 80%, 0.1)', + [theme.breakpoints.up('sm')]: { + marginTop: theme.spacing(10), + height: 700, + }, +})); export default function Hero() { return ( @@ -102,30 +130,7 @@ export default function Hero() { . - ({ - mt: { xs: 8, sm: 10 }, - alignSelf: 'center', - height: { xs: 200, sm: 700 }, - width: '100%', - backgroundImage: - theme.palette.mode === 'light' - ? 'url("/static/images/templates/templates-images/hero-light.png")' - : 'url("/static/images/templates/templates-images/hero-dark.png")', - backgroundSize: 'cover', - borderRadius: '12px', - outline: '1px solid', - outlineColor: - theme.palette.mode === 'light' - ? 'hsla(220, 25%, 80%, 0.5)' - : 'hsla(210, 100%, 80%, 0.1)', - boxShadow: - theme.palette.mode === 'light' - ? '0 0 12px 8px hsla(220, 25%, 80%, 0.2)' - : '0 0 24px 12px hsla(210, 100%, 25%, 0.2)', - })} - /> + ); diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js index 9c6c23678ee7b9..92d27a719c33fb 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Card from '@mui/material/Card'; +import { Card as MuiCard } from '@mui/material'; import Checkbox from '@mui/material/Checkbox'; import Divider from '@mui/material/Divider'; import FormLabel from '@mui/material/FormLabel'; @@ -11,9 +11,28 @@ import Link from '@mui/material/Link'; import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; +import { styled } from '@mui/material/styles'; + import ForgotPassword from './ForgotPassword'; import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; +const Card = styled(MuiCard)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + gap: theme.spacing(4), + width: '100%', + padding: theme.spacing(2), + boxShadow: + theme.palette.mode === 'light' + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + [theme.breakpoints.up('sm')]: { + padding: theme.spacing(4), + width: '450px', + }, +})); + export default function SignInCard() { const [emailError, setEmailError] = React.useState(false); const [emailErrorMessage, setEmailErrorMessage] = React.useState(''); @@ -66,20 +85,7 @@ export default function SignInCard() { }; return ( - ({ - display: 'flex', - flexDirection: 'column', - alignSelf: 'center', - width: { xs: '100%', sm: '450px' }, - p: { xs: 2, sm: 4 }, - gap: 2, - boxShadow: - theme.palette.mode === 'light' - ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' - : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', - })} - > + diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx index 8697dcc3e042df..139b35c8ad4ad7 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Card from '@mui/material/Card'; +import { Card as MuiCard } from '@mui/material'; import Checkbox from '@mui/material/Checkbox'; import Divider from '@mui/material/Divider'; import FormLabel from '@mui/material/FormLabel'; @@ -11,9 +11,28 @@ import Link from '@mui/material/Link'; import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; +import { styled } from '@mui/material/styles'; + import ForgotPassword from './ForgotPassword'; import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; +const Card = styled(MuiCard)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + gap: theme.spacing(4), + width: '100%', + padding: theme.spacing(2), + boxShadow: + theme.palette.mode === 'light' + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + [theme.breakpoints.up('sm')]: { + padding: theme.spacing(4), + width: '450px', + }, +})); + export default function SignInCard() { const [emailError, setEmailError] = React.useState(false); const [emailErrorMessage, setEmailErrorMessage] = React.useState(''); @@ -66,20 +85,7 @@ export default function SignInCard() { }; return ( - ({ - display: 'flex', - flexDirection: 'column', - alignSelf: 'center', - width: { xs: '100%', sm: '450px' }, - p: { xs: 2, sm: 4 }, - gap: 2, - boxShadow: - theme.palette.mode === 'light' - ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' - : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', - })} - > + diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.js b/docs/data/material/getting-started/templates/sign-in/SignIn.js index 8398bfef899d8f..ba53cf3e9ddf2a 100644 --- a/docs/data/material/getting-started/templates/sign-in/SignIn.js +++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js @@ -2,7 +2,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Card from '@mui/material/Card'; import Checkbox from '@mui/material/Checkbox'; import CssBaseline from '@mui/material/CssBaseline'; import FormControlLabel from '@mui/material/FormControlLabel'; @@ -15,8 +14,8 @@ import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; - -import { ThemeProvider, createTheme } from '@mui/material/styles'; +import { Card as MuiCard } from '@mui/material'; +import { ThemeProvider, createTheme, styled } from '@mui/material/styles'; import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; @@ -68,6 +67,37 @@ ToggleCustomTheme.propTypes = { toggleCustomTheme: PropTypes.func.isRequired, }; +const Card = styled(MuiCard)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + gap: theme.spacing(4), + width: '100%', + padding: theme.spacing(2), + boxShadow: + theme.palette.mode === 'light' + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + [theme.breakpoints.up('sm')]: { + padding: theme.spacing(4), + width: '450px', + }, +})); + +const SignInContainer = styled(Stack)(({ theme }) => ({ + height: 'auto', + padingBottom: theme.spacing(12), + backgroundImage: + theme.palette.mode === 'light' + ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' + : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', + backgroundRepeat: 'no-repeat', + [theme.breakpoints.up('sm')]: { + paddingBottom: 0, + height: '100dvh', + }, +})); + export default function SignIn() { const [mode, setMode] = React.useState('light'); const [showCustomTheme, setShowCustomTheme] = React.useState(true); @@ -134,20 +164,7 @@ export default function SignIn() { return ( - ({ - backgroundImage: - theme.palette.mode === 'light' - ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' - : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', - backgroundRepeat: 'no-repeat', - height: { xs: 'auto', sm: '100dvh' }, - pb: { xs: 12, sm: 0 }, - })} - component="main" - > + - ({ - display: 'flex', - flexDirection: 'column', - alignSelf: 'center', - width: { xs: '100%', sm: '450px' }, - p: { xs: 2, sm: 4 }, - gap: 4, - boxShadow: - theme.palette.mode === 'light' - ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' - : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', - })} - > + - + ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + gap: theme.spacing(4), + width: '100%', + padding: theme.spacing(2), + boxShadow: + theme.palette.mode === 'light' + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + [theme.breakpoints.up('sm')]: { + padding: theme.spacing(4), + width: '450px', + }, +})); + +const SignInContainer = styled(Stack)(({ theme }) => ({ + height: 'auto', + padingBottom: theme.spacing(12), + backgroundImage: + theme.palette.mode === 'light' + ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' + : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', + backgroundRepeat: 'no-repeat', + [theme.breakpoints.up('sm')]: { + paddingBottom: 0, + height: '100dvh', + }, +})); + export default function SignIn() { const [mode, setMode] = React.useState('light'); const [showCustomTheme, setShowCustomTheme] = React.useState(true); @@ -134,20 +164,7 @@ export default function SignIn() { return ( - ({ - backgroundImage: - theme.palette.mode === 'light' - ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' - : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', - backgroundRepeat: 'no-repeat', - height: { xs: 'auto', sm: '100dvh' }, - pb: { xs: 12, sm: 0 }, - })} - component="main" - > + - ({ - display: 'flex', - flexDirection: 'column', - alignSelf: 'center', - width: { xs: '100%', sm: '450px' }, - p: { xs: 2, sm: 4 }, - gap: 4, - boxShadow: - theme.palette.mode === 'light' - ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' - : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', - })} - > + - + ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + gap: theme.spacing(4), + width: '100%', + padding: theme.spacing(2), + boxShadow: + theme.palette.mode === 'light' + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + [theme.breakpoints.up('sm')]: { + padding: theme.spacing(4), + width: '450px', + }, +})); + +const SignUpContainer = styled(Stack)(({ theme }) => ({ + height: 'auto', + padingBottom: theme.spacing(12), + backgroundImage: + theme.palette.mode === 'light' + ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' + : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', + backgroundRepeat: 'no-repeat', + [theme.breakpoints.up('sm')]: { + paddingBottom: 0, + height: '100dvh', + }, +})); + export default function SignUp() { const [mode, setMode] = React.useState('light'); const [showCustomTheme, setShowCustomTheme] = React.useState(true); @@ -138,19 +168,7 @@ export default function SignUp() { return ( - ({ - backgroundRepeat: 'no-repeat', - backgroundImage: - theme.palette.mode === 'light' - ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' - : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', - pb: { xs: 12, sm: 0 }, - })} - > + - ({ - display: 'flex', - flexDirection: 'column', - alignSelf: 'center', - width: { xs: '100%', sm: '450px' }, - p: { xs: 2, sm: 4 }, - gap: 4, - boxShadow: - theme.palette.mode === 'light' - ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' - : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', - })} - > + - + ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + gap: theme.spacing(4), + width: '100%', + padding: theme.spacing(2), + boxShadow: + theme.palette.mode === 'light' + ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' + : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + [theme.breakpoints.up('sm')]: { + padding: theme.spacing(4), + width: '450px', + }, +})); + +const SignUpContainer = styled(Stack)(({ theme }) => ({ + height: 'auto', + padingBottom: theme.spacing(12), + backgroundImage: + theme.palette.mode === 'light' + ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' + : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', + backgroundRepeat: 'no-repeat', + [theme.breakpoints.up('sm')]: { + paddingBottom: 0, + height: '100dvh', + }, +})); + export default function SignUp() { const [mode, setMode] = React.useState('light'); const [showCustomTheme, setShowCustomTheme] = React.useState(true); @@ -138,19 +168,7 @@ export default function SignUp() { return ( - ({ - backgroundRepeat: 'no-repeat', - backgroundImage: - theme.palette.mode === 'light' - ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))' - : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', - pb: { xs: 12, sm: 0 }, - })} - > + - ({ - display: 'flex', - flexDirection: 'column', - alignSelf: 'center', - width: { xs: '100%', sm: '450px' }, - p: { xs: 2, sm: 4 }, - gap: 4, - boxShadow: - theme.palette.mode === 'light' - ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px' - : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', - })} - > + - + { diff --git a/docs/next.config.mjs b/docs/next.config.mjs index 825504dbeb620f..f439a7f5a26a72 100644 --- a/docs/next.config.mjs +++ b/docs/next.config.mjs @@ -256,7 +256,7 @@ export default withDocsInfra({ return map; }, - // Used to signal we run yarn build + // Used to signal we run pnpm build ...(process.env.NODE_ENV === 'production' ? { output: 'export', diff --git a/docs/package.json b/docs/package.json index 7d0914dcd8a336..f8ea8e340c9db7 100644 --- a/docs/package.json +++ b/docs/package.json @@ -20,7 +20,6 @@ }, "dependencies": { "@babel/core": "^7.24.4", - "@babel/plugin-transform-object-assign": "^7.24.1", "@babel/runtime": "^7.24.4", "@babel/runtime-corejs2": "^7.24.4", "@docsearch/react": "^3.6.0", @@ -45,10 +44,10 @@ "@mui/types": "workspace:^", "@mui/utils": "workspace:^", "@mui/x-charts": "6.19.8", - "@mui/x-data-grid": "7.1.1", - "@mui/x-data-grid-generator": "7.1.1", - "@mui/x-data-grid-premium": "7.1.1", - "@mui/x-data-grid-pro": "7.1.1", + "@mui/x-data-grid": "7.2.0", + "@mui/x-data-grid-generator": "7.2.0", + "@mui/x-data-grid-premium": "7.2.0", + "@mui/x-data-grid-pro": "7.2.0", "@mui/x-date-pickers": "6.19.9", "@mui/x-date-pickers-pro": "6.19.9", "@mui/x-license-pro": "6.10.2", @@ -80,7 +79,7 @@ "jss-rtl": "^0.3.0", "lodash": "^4.17.21", "lz-string": "^1.5.0", - "markdown-to-jsx": "^7.4.6", + "markdown-to-jsx": "^7.4.7", "material-ui-popup-state": "^5.1.0", "next": "^13.5.1", "notistack": "3.0.1", @@ -92,8 +91,8 @@ "react-dom": "^18.2.0", "react-draggable": "^4.4.6", "react-final-form": "^6.5.9", - "react-imask": "^7.5.0", - "react-intersection-observer": "^9.8.1", + "react-imask": "^7.6.0", + "react-intersection-observer": "^9.8.2", "react-is": "^18.2.0", "react-number-format": "^5.3.4", "react-router-dom": "^6.22.3", @@ -110,7 +109,7 @@ "stylis": "4.2.0", "stylis-plugin-rtl": "^2.1.1", "use-count-up": "^3.0.1", - "webpack-bundle-analyzer": "^4.10.1" + "webpack-bundle-analyzer": "^4.10.2" }, "devDependencies": { "@babel/plugin-transform-react-constant-elements": "^7.24.1", @@ -135,7 +134,7 @@ "cross-fetch": "^4.0.0", "gm": "^1.25.0", "marked": "^5.1.2", - "playwright": "^1.43.0", + "playwright": "^1.43.1", "prettier": "^3.2.5", "tailwindcss": "^3.4.3", "yargs": "^17.7.2" diff --git a/docs/pages/blog/2020-developer-survey-results.md b/docs/pages/blog/2020-developer-survey-results.md index 42f611ecce9484..fe4f383a04f160 100644 --- a/docs/pages/blog/2020-developer-survey-results.md +++ b/docs/pages/blog/2020-developer-survey-results.md @@ -315,5 +315,5 @@ We will run a similar survey next year to keep track of our progress. If you want to continue to influence our roadmap, please upvote 👍 the issues you are the most interested in on GitHub. -How to upvote on GitHub +How to upvote on GitHub

Help us prioritize by upvoting.

diff --git a/docs/pages/blog/introducing-connect.js b/docs/pages/blog/introducing-connect.js new file mode 100644 index 00000000000000..100b8643fa753f --- /dev/null +++ b/docs/pages/blog/introducing-connect.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './introducing-connect.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/introducing-connect.md b/docs/pages/blog/introducing-connect.md new file mode 100644 index 00000000000000..7b87e783d34727 --- /dev/null +++ b/docs/pages/blog/introducing-connect.md @@ -0,0 +1,68 @@ +--- +title: 'Introducing Connect: a Figma plugin that exports Material UI code' +description: Connect is a Figma plugin that lets you generate a theme from the Material UI for Figma Design Kit. +date: 2024-04-16T00:00:00.000Z +authors: ['danilo-leal', 'DavidCnoops'] +tags: ['Connect', 'Material UI', 'Product'] +manualCard: true +--- + +Over the last few years we've seen designers increasingly seeking out ways to participate more directly and collaborate more effectively in the development process. +The [Material UI Design Kit for Figma](/store/items/figma-react/) was our first attempt to meet those needs by providing designers with one-to-one mockups of Material UI components for implementing custom design systems. +But it doesn't go far enough on its own to bridge the gap between design and code—the developer still need to write the designer's custom styles from scratch. + +That got us thinking: +What if designers could generate production-ready code directly from their design software to hand off to developers working with a Material UI codebase? + +That's why we created Connect, a Figma plugin for generating styles that can be copied and pasted straight into your Material UI app's theme. +We're happy to share that the beta version is [available now on Figma](https://www.figma.com/community/plugin/1336346114713490235/connect). 🚀 + +Connect is a Figma plugin that lets you generate a theme from the Material UI for Figma Design Kit. + +Let's take a look at some of its key features: + +## Theme customization + +Figma's local variables significantly matured the use of design tokens, making it possible to mirror Material UI more closely. +Connect relies on these local variables to generate code corresponding to each element and state. +(As such, it requires [v5.16.0 or later](https://github.com/mui/mui-design-kits/releases/tag/v5.16.0) of the Material UI Design Kit; earlier versions do not support local variables.) + + + +Visit the documentation to learn [how to insert the generated code into your theme file](/material-ui/design-resources/connect/#using-the-generated-theme). + +## Component customization + +You can fully customize a component's appearance across multiple states in the Design Kit and then generate the corresponding theme code. +This is one of the most exciting features because it enables designers to use the visual design tools they're already comfortable with to make changes to the code itself. + + + +:::warning +While in beta, not all components are supported yet. +We'll expand component coverage progressively in the coming months. +For now you can experiment with the Button, Switch, and Typography. +::: + +## Quick Storybook preview + +The Connect plugin also bakes in an embedded Storybook preview panel so that you can conveniently play around with your changes and see how they interact with other props and states available in the component API. + + + +## Try Connect now + +Get the beta version of Connect now, available for free in the [Figma Community](https://www.figma.com/community/plugin/1336346114713490235/connect)! + +There's still a lot to do, and we're looking forward to hearing from all of you [who requested this plugin years ago](https://github.com/mui/mui-design-kits/issues/10). + +- Check out further documentation for [the Connect plugin](/material-ui/design-resources/connect/) and [the Material UI Design Kit](/material-ui/design-resources/material-ui-for-figma/). +- If you've got any feedback, we'd love to [hear from you](https://mui-connect.canny.io/feedback). + +Happy designing! 👨‍🎨 diff --git a/docs/pages/blog/mui-core-v5.md b/docs/pages/blog/mui-core-v5.md index 688cf79b04aadd..868808c1e65088 100644 --- a/docs/pages/blog/mui-core-v5.md +++ b/docs/pages/blog/mui-core-v5.md @@ -477,7 +477,7 @@ Although each product has its unique vision and mission statements, they complem - Vision: Create the last UI component library developers will ever need. High quality, consistent, feature-rich, and covering the most frequent/challenging use-cases. - Mission: Make building rich, data-intensive, dynamic apps a breeze. -MUI Core has a positive cash flow thanks to its paid templates, design assets, ads on the documentation, and backers/sponsors (❤️). The [MIT](https://tldrlegal.com/license/mit-license) license model works great for it. +MUI Core has a positive cash flow thanks to its paid templates, design assets, ads on the documentation, and backers/sponsors (❤️). The [MIT](https://www.tldrlegal.com/license/mit-license) license model works great for it. However, none of these revenue sources would scale with the outcome and amount of work required for MUI X. It's why we are using an [open core license model](https://en.m.wikipedia.org/wiki/Open-core_model) for this new product. diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx index c1abb1f4579da4..8e2d58f4b98d27 100644 --- a/docs/pages/careers.tsx +++ b/docs/pages/careers.tsx @@ -467,7 +467,13 @@ export default function Careers() { href={routeUrl} noLinkStyle variant="outlined" - sx={{ p: 2, width: '100%', flexGrow: 1 }} + sx={{ + p: 2, + width: '100%', + flexGrow: 1, + display: 'flex', + flexDirection: 'column', + }} > {title} @@ -475,7 +481,12 @@ export default function Careers() { {description} - + Learn more{' '} ; +} diff --git a/docs/pages/material-ui/design-resources/material-ui-for-figma.js b/docs/pages/material-ui/design-resources/material-ui-for-figma.js new file mode 100644 index 00000000000000..a38c5cd4d88ddb --- /dev/null +++ b/docs/pages/material-ui/design-resources/material-ui-for-figma.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/material-ui/getting-started/design-resources.js b/docs/pages/material-ui/getting-started/design-resources.js index 4df5b129ae956d..8e1e24b65a2436 100644 --- a/docs/pages/material-ui/getting-started/design-resources.js +++ b/docs/pages/material-ui/getting-started/design-resources.js @@ -3,5 +3,5 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; import * as pageProps from 'docs/data/material/getting-started/design-resources/design-resources.md?muiMarkdown'; export default function Page() { - return ; + return ; } diff --git a/docs/public/static/blog/introducing-connect/card.png b/docs/public/static/blog/introducing-connect/card.png new file mode 100644 index 00000000000000..fd55e108ab5082 Binary files /dev/null and b/docs/public/static/blog/introducing-connect/card.png differ diff --git a/docs/public/static/blog/introducing-connect/custom-component.mp4 b/docs/public/static/blog/introducing-connect/custom-component.mp4 new file mode 100644 index 00000000000000..f8721ce26a815d Binary files /dev/null and b/docs/public/static/blog/introducing-connect/custom-component.mp4 differ diff --git a/docs/public/static/blog/introducing-connect/storybook.mp4 b/docs/public/static/blog/introducing-connect/storybook.mp4 new file mode 100644 index 00000000000000..c6ddd2e2e5b9f6 Binary files /dev/null and b/docs/public/static/blog/introducing-connect/storybook.mp4 differ diff --git a/docs/public/static/blog/introducing-connect/theme-customization.mp4 b/docs/public/static/blog/introducing-connect/theme-customization.mp4 new file mode 100644 index 00000000000000..b77be7df826b8a Binary files /dev/null and b/docs/public/static/blog/introducing-connect/theme-customization.mp4 differ diff --git a/docs/public/static/material-ui/design-resources/connect-access.png b/docs/public/static/material-ui/design-resources/connect-access.png new file mode 100644 index 00000000000000..c8f6ec4d6bef27 Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-access.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-code-editor.png b/docs/public/static/material-ui/design-resources/connect-code-editor.png new file mode 100644 index 00000000000000..7e45f3071adf9a Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-code-editor.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-component-variant.png b/docs/public/static/material-ui/design-resources/connect-component-variant.png new file mode 100644 index 00000000000000..dbf37d0afc2697 Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-component-variant.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-generate.png b/docs/public/static/material-ui/design-resources/connect-generate.png new file mode 100644 index 00000000000000..3740a185267a04 Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-generate.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-regenerate.png b/docs/public/static/material-ui/design-resources/connect-regenerate.png new file mode 100644 index 00000000000000..bd8a6ecfe6f676 Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-regenerate.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-storybook.png b/docs/public/static/material-ui/design-resources/connect-storybook.png new file mode 100644 index 00000000000000..c6c0751d407f49 Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-storybook.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-switch-component-customized-storybook.png b/docs/public/static/material-ui/design-resources/connect-switch-component-customized-storybook.png new file mode 100644 index 00000000000000..dc944a48b56f94 Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-switch-component-customized-storybook.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-switch-component-customized.png b/docs/public/static/material-ui/design-resources/connect-switch-component-customized.png new file mode 100644 index 00000000000000..565769a85fe770 Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-switch-component-customized.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-switch.png b/docs/public/static/material-ui/design-resources/connect-switch.png new file mode 100644 index 00000000000000..17c8d4af23f16f Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-switch.png differ diff --git a/docs/public/static/material-ui/design-resources/connect-variables.png b/docs/public/static/material-ui/design-resources/connect-variables.png new file mode 100644 index 00000000000000..ba5d96c4db307f Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect-variables.png differ diff --git a/docs/public/static/material-ui/design-resources/connect.png b/docs/public/static/material-ui/design-resources/connect.png new file mode 100644 index 00000000000000..1ea20e794f9000 Binary files /dev/null and b/docs/public/static/material-ui/design-resources/connect.png differ diff --git a/docs/src/MuiPage.ts b/docs/src/MuiPage.ts index 934782c099a824..36296ce8f71096 100644 --- a/docs/src/MuiPage.ts +++ b/docs/src/MuiPage.ts @@ -53,6 +53,10 @@ export interface MuiPage { * Indicates if the component/hook is not stable yet. */ unstable?: boolean; + /** + * Indicates the item is in beta release. + */ + beta?: boolean; } export interface OrderedMuiPage extends MuiPage { diff --git a/docs/src/components/showcase/FolderTable.tsx b/docs/src/components/showcase/FolderTable.tsx index bd1694b4c40633..05de2315028999 100644 --- a/docs/src/components/showcase/FolderTable.tsx +++ b/docs/src/components/showcase/FolderTable.tsx @@ -45,22 +45,6 @@ function getComparator( : (a, b) => -descendingComparator(a, b, orderBy); } -// Since 2020 all major browsers ensure sort stability with Array.prototype.sort(). -// stableSort() brings sort stability to non-modern browsers (notably IE11). If you -// only support modern browsers you can replace stableSort(exampleArray, exampleComparator) -// with exampleArray.slice().sort(exampleComparator) -function stableSort(array: readonly T[], comparator: (a: T, b: T) => number) { - const stabilizedThis = array.map((el, index) => [el, index] as [T, number]); - stabilizedThis.sort((a, b) => { - const order = comparator(a[0], b[0]); - if (order !== 0) { - return order; - } - return a[1] - b[1]; - }); - return stabilizedThis.map((el) => el[0]); -} - function formatSize(size: number) { const kb = size / 1000; if (kb < 1000) { @@ -138,7 +122,7 @@ export default function BasicTable() { - {stableSort(data, getComparator(order, orderBy)).map((row) => ( + {[...data].sort(getComparator(order, orderBy)).map((row) => ( diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index f56d19f285935b..0d0077b891a699 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -261,6 +261,7 @@ function reduceChildRoutes(context) { newFeature={page.newFeature} planned={page.planned} unstable={page.unstable} + beta={page.beta} plan={page.plan} icon={page.icon} subheader={subheader} @@ -294,6 +295,7 @@ function reduceChildRoutes(context) { newFeature={page.newFeature} planned={page.planned} unstable={page.unstable} + beta={page.beta} plan={page.plan} icon={page.icon} subheader={Boolean(page.subheader)} diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js index f4e9371c3489bb..e3ea4afdf9d3e4 100644 --- a/docs/src/modules/components/AppNavDrawerItem.js +++ b/docs/src/modules/components/AppNavDrawerItem.js @@ -242,6 +242,7 @@ DeadLink.propTypes = { export default function AppNavDrawerItem(props) { const { + beta, children, depth, href, @@ -319,6 +320,7 @@ export default function AppNavDrawerItem(props) { {newFeature && } {planned && } {unstable && } + {beta && } {expandable ? ( @@ -332,6 +334,7 @@ export default function AppNavDrawerItem(props) { } AppNavDrawerItem.propTypes = { + beta: PropTypes.bool, children: PropTypes.node, depth: PropTypes.number.isRequired, expandable: PropTypes.bool, diff --git a/docs/src/modules/components/HighlightedCodeWithTabs.tsx b/docs/src/modules/components/HighlightedCodeWithTabs.tsx index 7372011ff47f06..4c88e761ad8d6f 100644 --- a/docs/src/modules/components/HighlightedCodeWithTabs.tsx +++ b/docs/src/modules/components/HighlightedCodeWithTabs.tsx @@ -88,6 +88,8 @@ export default function HighlightedCodeWithTabs( const { tabs, storageKey } = props; const availableTabs = React.useMemo(() => tabs.map(({ tab }) => tab), [tabs]); const [activeTab, setActiveTab] = useLocalStorageState(storageKey ?? null, availableTabs[0]); + // During hydration, activeTab is null, default to first value. + const value = activeTab ?? availableTabs[0]; const [mounted, setMounted] = React.useState(false); @@ -101,7 +103,7 @@ export default function HighlightedCodeWithTabs( const ownerState = { mounted }; return ( - + {tabs.map(({ tab }) => ( diff --git a/docs/src/modules/components/MaterialShowcase.js b/docs/src/modules/components/MaterialShowcase.js index fe4db5bf344f9b..df36890c140347 100644 --- a/docs/src/modules/components/MaterialShowcase.js +++ b/docs/src/modules/components/MaterialShowcase.js @@ -438,18 +438,6 @@ const appList = [ }, ]; -function stableSort(array, cmp) { - const stabilizedThis = array.map((el, index) => [el, index]); - stabilizedThis.sort((a, b) => { - const order = cmp(a[0], b[0]); - if (order !== 0) { - return order; - } - return a[1] - b[1]; - }); - return stabilizedThis.map((el) => el[0]); -} - // Returns a function that sorts reverse numerically by value of `key` function sortFactory(key) { return function sortNumeric(a, b) { @@ -498,96 +486,100 @@ export default function Showcase() { - {stableSort( - appList.filter((item) => item[sortFunctionName] !== undefined), - sortFunction, - ).map((app) => ( - - {app.image ? ( - ({ - height: '100%', - display: 'flex', - flexDirection: 'column', - p: 2, - gap: 2, - borderRadius: 1, - backgroundColor: `${alpha(theme.palette.grey[50], 0.3)}`, - borderColor: 'divider', - ...theme.applyDarkStyles({ - backgroundColor: `${alpha(theme.palette.primaryDark[700], 0.2)}`, + {appList + .filter((item) => item[sortFunctionName] !== undefined) + .sort(sortFunction) + .map((app) => ( + + {app.image ? ( + ({ + height: '100%', + display: 'flex', + flexDirection: 'column', + p: 2, + gap: 2, + borderRadius: 1, + backgroundColor: `${alpha(theme.palette.grey[50], 0.3)}`, borderColor: 'divider', - }), - })} - > - - ({ - height: 'auto', - borderRadius: '6px', - bgcolor: 'currentColor', - border: '1px solid', + ...theme.applyDarkStyles({ + backgroundColor: `${alpha(theme.palette.primaryDark[700], 0.2)}`, borderColor: 'divider', - color: 'grey.100', - ...theme.applyDarkStyles({ - color: 'primaryDark.900', - }), - })} - /> - - - - {app.title} - {app.source ? ( - - - - ) : null} - - - {app.description} - - - - {app.dateAdded} - - - - ) : ( - - {t('visit')} - - )} - - ))} + }), + })} + > + + ({ + height: 'auto', + borderRadius: '6px', + bgcolor: 'currentColor', + border: '1px solid', + borderColor: 'divider', + color: 'grey.100', + ...theme.applyDarkStyles({ + color: 'primaryDark.900', + }), + })} + /> + + + + {app.title} + {app.source ? ( + + + + ) : null} + + + {app.description} + + + + {app.dateAdded} + + + + ) : ( + + {t('visit')} + + )} + + ))} ); diff --git a/docs/src/modules/components/MaterialUIDesignResources.js b/docs/src/modules/components/MaterialUIDesignResources.js index 51f5affd1be9c0..bd84a5b28c052a 100644 --- a/docs/src/modules/components/MaterialUIDesignResources.js +++ b/docs/src/modules/components/MaterialUIDesignResources.js @@ -49,7 +49,7 @@ export default function MaterialUIDesignResources() { {content.map(({ svg, title, link }) => ( - + ))} diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index d1bda48444166c..2613792305ae93 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -116,6 +116,11 @@ export const authors = { avatar: 'https://avatars.githubusercontent.com/u/16889233', github: 'DiegoAndai', }, + DavidCnoops: { + name: 'David Cnoops', + avatar: 'https://avatars.githubusercontent.com/u/28001064', + github: 'DavidCnoops', + }, }; const classes = { @@ -284,7 +289,7 @@ export default function TopLayoutBlog(props) { const { canonicalAsServer } = pathnameToLanguage(router.asPath); const card = headers.manualCard === 'true' - ? `https://mui.com/static/blog/${slug}/card.png` + ? `/static/blog/${slug}/card.png` : `/edge-functions/og-image/?title=${headers.cardTitle || finalTitle}&authors=${headers.authors .map((author) => { const { github, name } = authors[author]; diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 98890158834ba8..bafac961c28e71 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -281,6 +281,9 @@ "/material-ui/discover-more/backers": "Sponsors and Backers", "/material-ui/discover-more/vision": "Vision", "/material-ui/discover-more/changelog": "Changelog", + "/material-ui/design-resources": "Design resources", + "/material-ui/design-resources/material-ui-for-figma": "Material UI for Figma", + "/material-ui/design-resources/connect": "Connect plugin", "https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=sidenav": "Template store", "/joy-ui/getting-started-group": "Getting started", "/joy-ui/getting-started": "Overview", diff --git a/package.json b/package.json index ba58c416b28879..59cea49e5b3b83 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,6 @@ "@babel/plugin-proposal-object-rest-spread": "^7.20.7", "@babel/plugin-proposal-private-methods": "^7.18.6", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "@babel/plugin-transform-object-assign": "^7.24.1", "@babel/plugin-transform-react-constant-elements": "^7.24.1", "@babel/plugin-transform-runtime": "^7.24.3", "@babel/preset-env": "^7.24.4", @@ -114,10 +113,10 @@ "@mui/joy": "workspace:*", "@mui/material": "workspace:^", "@mui/utils": "workspace:^", - "@pigment-css/react": "workspace:^", - "@next/eslint-plugin-next": "^14.1.4", + "@next/eslint-plugin-next": "^14.2.1", "@octokit/rest": "^20.1.0", - "@playwright/test": "1.43.0", + "@pigment-css/react": "workspace:^", + "@playwright/test": "1.43.1", "@types/enzyme": "^3.10.18", "@types/fs-extra": "^11.0.4", "@types/lodash": "^4.17.0", @@ -153,7 +152,7 @@ "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-material-ui": "workspace:^", - "eslint-plugin-mocha": "^10.4.1", + "eslint-plugin-mocha": "^10.4.2", "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "fast-glob": "^3.3.2", @@ -169,7 +168,7 @@ "karma-webpack": "^5.0.0", "lerna": "^8.1.2", "lodash": "^4.17.21", - "markdownlint-cli2": "^0.12.1", + "markdownlint-cli2": "^0.13.0", "mocha": "^10.4.0", "nx": "^17.3.2", "nyc": "^15.1.0", @@ -187,13 +186,13 @@ "terser-webpack-plugin": "^5.3.10", "tsup": "^8.0.2", "tsx": "^4.7.2", - "typescript": "^5.4.4", + "typescript": "^5.4.5", "webpack": "^5.90.3", - "webpack-bundle-analyzer": "^4.10.1", + "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^5.1.4", "yargs": "^17.7.2" }, - "packageManager": "pnpm@8.15.6", + "packageManager": "pnpm@8.15.7", "resolutions": { "@babel/core": "^7.24.4", "@babel/code-frame": "^7.24.2", @@ -209,9 +208,9 @@ "@babel/preset-typescript": "^7.24.1", "@babel/runtime": "^7.24.4", "@babel/types": "^7.24.0", - "@definitelytyped/header-parser": "^0.2.8", + "@definitelytyped/header-parser": "^0.2.9", "@definitelytyped/typescript-versions": "^0.1.1", - "@definitelytyped/utils": "^0.1.5", + "@definitelytyped/utils": "^0.1.6", "@types/node": "^18.19.31", "@types/react": "18.2.55", "@types/react-dom": "18.2.19", @@ -227,5 +226,10 @@ ], "sourceMap": false, "instrument": false + }, + "pnpm": { + "patchedDependencies": { + "@wyw-in-js/transform@0.5.0": "patches/@wyw-in-js__transform@0.5.0.patch" + } } } diff --git a/packages-internal/docs-utils/package.json b/packages-internal/docs-utils/package.json index a0bf7c1cc79fdc..ad899d5b59ee0d 100644 --- a/packages-internal/docs-utils/package.json +++ b/packages-internal/docs-utils/package.json @@ -22,7 +22,7 @@ }, "dependencies": { "rimraf": "^5.0.5", - "typescript": "^5.4.4" + "typescript": "^5.4.5" }, "publishConfig": { "access": "public" diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json index d68d07740cbdec..76070d91afba5d 100644 --- a/packages-internal/scripts/package.json +++ b/packages-internal/scripts/package.json @@ -33,7 +33,7 @@ "@mui/internal-docs-utils": "workspace:^", "doctrine": "^3.0.0", "lodash": "^4.17.21", - "typescript": "^5.4.4", + "typescript": "^5.4.5", "uuid": "^9.0.1" }, "devDependencies": { diff --git a/packages/api-docs-builder-core/package.json b/packages/api-docs-builder-core/package.json index a111b120ec6679..1897564ff22376 100644 --- a/packages/api-docs-builder-core/package.json +++ b/packages/api-docs-builder-core/package.json @@ -21,6 +21,6 @@ "@types/sinon": "^10.0.20", "chai": "^4.4.1", "sinon": "^15.2.0", - "typescript": "^5.4.4" + "typescript": "^5.4.5" } } diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json index 835fefbb459dec..1a4bd930e38a08 100644 --- a/packages/api-docs-builder/package.json +++ b/packages/api-docs-builder/package.json @@ -22,7 +22,7 @@ "react-docgen": "^5.4.3", "recast": "^0.23.6", "remark": "^13.0.0", - "typescript": "^5.4.4", + "typescript": "^5.4.5", "unist-util-visit": "^2.0.3" }, "devDependencies": { diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json index 39cbd86a6a0709..94aea96c2d3ef3 100644 --- a/packages/eslint-plugin-material-ui/package.json +++ b/packages/eslint-plugin-material-ui/package.json @@ -8,7 +8,7 @@ "emoji-regex": "^10.3.0" }, "devDependencies": { - "@types/eslint": "^8.56.7", + "@types/eslint": "^8.56.9", "@typescript-eslint/parser": "^6.21.0", "eslint": "^8.57.0" }, diff --git a/packages/feedback/package.json b/packages/feedback/package.json index 0fdc0f95914824..c71ed699bab6bb 100644 --- a/packages/feedback/package.json +++ b/packages/feedback/package.json @@ -25,6 +25,6 @@ "claudia": "^5.14.1" }, "optionalDependencies": { - "aws-sdk": "^2.1589.0" + "aws-sdk": "^2.1599.0" } } diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 51006729c675fa..a103c186421a98 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -27,8 +27,7 @@ "url": "https://opencollective.com/mui-org" }, "scripts": { - "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files", - "build:legacy": "node ../../scripts/build.mjs legacy", + "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files", "build:modern": "node ../../scripts/build.mjs modern", "build:node": "node ../../scripts/build.mjs node", "build:stable": "node ../../scripts/build.mjs stable", @@ -53,7 +52,7 @@ "@mui-internal/test-utils": "workspace:^", "@mui/internal-babel-macros": "workspace:^", "@mui/types": "workspace:^", - "@testing-library/react": "^14.2.2", + "@testing-library/react": "^14.3.1", "@testing-library/user-event": "^14.5.2", "@types/chai": "^4.3.14", "@types/prop-types": "^15.7.12", diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.js index 344b2cce0efe0f..45caa7dd2123dc 100644 --- a/packages/mui-base/src/useAutocomplete/useAutocomplete.js +++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.js @@ -10,11 +10,8 @@ import { } from '@mui/utils'; // https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript -// Give up on IE11 support for this feature function stripDiacritics(string) { - return typeof string.normalize !== 'undefined' - ? string.normalize('NFD').replace(/[\u0300-\u036f]/g, '') - : string; + return string.normalize('NFD').replace(/[\u0300-\u036f]/g, ''); } export function createFilterOptions(config = {}) { @@ -56,17 +53,6 @@ export function createFilterOptions(config = {}) { }; } -// To replace with .findIndex() once we stop IE11 support. -function findIndex(array, comp) { - for (let i = 0; i < array.length; i += 1) { - if (comp(array[i])) { - return i; - } - } - - return -1; -} - const defaultFilterOptions = createFilterOptions(); // Number of options to jump in list box when `Page Up` and `Page Down` keys are used. @@ -498,7 +484,7 @@ export function useAutocomplete(props) { const previousHighlightedOption = previousProps.filteredOptions[highlightedIndexRef.current]; if (previousHighlightedOption) { - return findIndex(filteredOptions, (option) => { + return filteredOptions.findIndex((option) => { return getOptionLabel(option) === getOptionLabel(previousHighlightedOption); }); } @@ -539,12 +525,12 @@ export function useAutocomplete(props) { if ( multiple && currentOption && - findIndex(value, (val) => isOptionEqualToValue(currentOption, val)) !== -1 + value.findIndex((val) => isOptionEqualToValue(currentOption, val)) !== -1 ) { return; } - const itemIndex = findIndex(filteredOptions, (optionItem) => + const itemIndex = filteredOptions.findIndex((optionItem) => isOptionEqualToValue(optionItem, valueItem), ); if (itemIndex === -1) { @@ -685,7 +671,7 @@ export function useAutocomplete(props) { } } - const itemIndex = findIndex(newValue, (valueItem) => isOptionEqualToValue(option, valueItem)); + const itemIndex = newValue.findIndex((valueItem) => isOptionEqualToValue(option, valueItem)); if (itemIndex === -1) { newValue.push(option); diff --git a/packages/mui-base/src/useSnackbar/useSnackbar.ts b/packages/mui-base/src/useSnackbar/useSnackbar.ts index d2d73cf641af1f..4b9de6ad0754bb 100644 --- a/packages/mui-base/src/useSnackbar/useSnackbar.ts +++ b/packages/mui-base/src/useSnackbar/useSnackbar.ts @@ -44,8 +44,7 @@ export function useSnackbar(parameters: UseSnackbarParameters = {}): UseSnackbar */ function handleKeyDown(nativeEvent: KeyboardEvent) { if (!nativeEvent.defaultPrevented) { - // IE11, Edge (prior to using Blink?) use 'Esc' - if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') { + if (nativeEvent.key === 'Escape') { // not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar onClose?.(nativeEvent, 'escapeKeyDown'); } diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json index 54f3b4c83f9a47..e14f324d5f1f68 100644 --- a/packages/mui-docs/package.json +++ b/packages/mui-docs/package.json @@ -23,8 +23,7 @@ }, "homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-docs", "scripts": { - "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files", - "build:legacy": "node ../../scripts/build.mjs legacy", + "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files", "build:modern": "echo 'Skip modern build'", "build:node": "node ../../scripts/build.mjs node", "build:stable": "node ../../scripts/build.mjs stable", diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts index 7cda32366b9313..d6e428314aeeee 100644 --- a/packages/mui-docs/src/branding/brandingTheme.ts +++ b/packages/mui-docs/src/branding/brandingTheme.ts @@ -905,7 +905,7 @@ export function getThemedComponents(): ThemeOptions { ...(variant === 'outlined' && color === 'primary' && { borderColor: (theme.vars || theme).palette.primary[100], - backgroundColor: (theme.vars || theme).palette.primary[50], + backgroundColor: alpha(theme.palette.primary[100], 0.2), ...theme.applyDarkStyles({ color: (theme.vars || theme).palette.primary[300], borderColor: alpha(theme.palette.primary[500], 0.2), diff --git a/packages/mui-envinfo/package.json b/packages/mui-envinfo/package.json index b345ea78a6c5b6..bdaa1fd77cedd4 100644 --- a/packages/mui-envinfo/package.json +++ b/packages/mui-envinfo/package.json @@ -20,7 +20,7 @@ "build": "node scripts/build" }, "dependencies": { - "envinfo": "^7.11.1" + "envinfo": "^7.12.0" }, "devDependencies": { "@types/chai": "^4.3.14", diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json index b5e4c824365edd..400fd38cd3eac0 100644 --- a/packages/mui-icons-material/package.json +++ b/packages/mui-icons-material/package.json @@ -31,7 +31,6 @@ "build": "shx cp -r lib/ build/ && pnpm build:typings && pnpm build:copy-files", "build:lib": "pnpm build:node && pnpm build:stable", "build:lib:clean": "rimraf lib/ && pnpm build:lib", - "build:legacy": "echo 'Skip legacy build'", "build:modern": "echo 'Skip modern build'", "build:node": "node ../../scripts/build.mjs node --largeFiles --outDir lib", "build:stable": "node ../../scripts/build.mjs stable --largeFiles --outDir lib", diff --git a/packages/mui-joy/src/Avatar/Avatar.tsx b/packages/mui-joy/src/Avatar/Avatar.tsx index 7a355e56a0499a..5f8379b0b0915e 100644 --- a/packages/mui-joy/src/Avatar/Avatar.tsx +++ b/packages/mui-joy/src/Avatar/Avatar.tsx @@ -76,7 +76,7 @@ const AvatarImg = styled('img', { width: '100%', height: '100%', textAlign: 'center', - // Handle non-square image. The property isn't supported by IE11. + // Handle non-square image. objectFit: 'cover', // Hide alt text. color: 'transparent', diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx index 75f3d037825f8d..30638d94f6730a 100644 --- a/packages/mui-joy/src/Button/Button.tsx +++ b/packages/mui-joy/src/Button/Button.tsx @@ -139,6 +139,7 @@ export const getButtonStyles = ({ border: 'none', backgroundColor: 'transparent', cursor: 'pointer', + userSelect: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx index 531d3a8b288c1b..22c560f0ecf439 100644 --- a/packages/mui-joy/src/Tooltip/Tooltip.tsx +++ b/packages/mui-joy/src/Tooltip/Tooltip.tsx @@ -409,8 +409,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { } function handleKeyDown(nativeEvent: KeyboardEvent) { - // IE11, Edge (prior to using Bink?) use 'Esc' - if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') { + if (nativeEvent.key === 'Escape') { handleClose(nativeEvent); } } diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json index 4ba2dab61dbfaf..7ece96ab00c402 100644 --- a/packages/mui-lab/package.json +++ b/packages/mui-lab/package.json @@ -28,8 +28,7 @@ "url": "https://opencollective.com/mui-org" }, "scripts": { - "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files", - "build:legacy": "node ../../scripts/build.mjs legacy", + "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files", "build:modern": "node ../../scripts/build.mjs modern", "build:node": "node ../../scripts/build.mjs node", "build:stable": "node ../../scripts/build.mjs stable", diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json index 6f916e47fe5983..431d6d7ebcd00f 100644 --- a/packages/mui-material-nextjs/package.json +++ b/packages/mui-material-nextjs/package.json @@ -24,8 +24,7 @@ "url": "https://opencollective.com/mui-org" }, "scripts": { - "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files", - "build:legacy": "node ../../scripts/build.mjs legacy", + "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files", "build:modern": "node ../../scripts/build.mjs modern", "build:node": "node ../../scripts/build.mjs node", "build:stable": "node ../../scripts/build.mjs stable", diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index 29e2ce960aba0a..1ecf951109b362 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -27,8 +27,7 @@ "url": "https://opencollective.com/mui-org" }, "scripts": { - "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:umd && pnpm build:types && pnpm build:copy-files", - "build:legacy": "node ../../scripts/build.mjs legacy", + "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:umd && pnpm build:types && pnpm build:copy-files", "build:modern": "node ../../scripts/build.mjs modern", "build:node": "node ../../scripts/build.mjs node", "build:stable": "node ../../scripts/build.mjs stable", @@ -73,7 +72,7 @@ "fast-glob": "^3.3.2", "fs-extra": "^11.2.0", "lodash": "^4.17.21", - "playwright": "^1.43.0", + "playwright": "^1.43.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.22.3", diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js index ddc0befd8e9286..2d85cb28fb18e0 100644 --- a/packages/mui-material/src/AppBar/AppBar.js +++ b/packages/mui-material/src/AppBar/AppBar.js @@ -70,7 +70,6 @@ const AppBarRoot = styled(Paper, { { props: { position: 'sticky' }, style: { - // ⚠️ sticky is not supported by IE11. position: 'sticky', zIndex: (theme.vars || theme).zIndex.appBar, top: 0, diff --git a/packages/mui-material/src/Avatar/Avatar.js b/packages/mui-material/src/Avatar/Avatar.js index a4aea78bd739ca..051e9d0c7339fc 100644 --- a/packages/mui-material/src/Avatar/Avatar.js +++ b/packages/mui-material/src/Avatar/Avatar.js @@ -86,7 +86,7 @@ const AvatarImg = styled('img', { width: '100%', height: '100%', textAlign: 'center', - // Handle non-square image. The property isn't supported by IE11. + // Handle non-square image. objectFit: 'cover', // Hide alt text. color: 'transparent', diff --git a/packages/mui-material/src/CardMedia/CardMedia.js b/packages/mui-material/src/CardMedia/CardMedia.js index a721e873db1b42..94d3746941c149 100644 --- a/packages/mui-material/src/CardMedia/CardMedia.js +++ b/packages/mui-material/src/CardMedia/CardMedia.js @@ -43,7 +43,6 @@ const CardMediaRoot = styled('div', { { props: { isImageComponent: true }, style: { - // ⚠️ object-fit is not supported by IE11. objectFit: 'cover', }, }, diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js index 927c9b0f44e244..b88a9103d01389 100644 --- a/packages/mui-material/src/Dialog/Dialog.js +++ b/packages/mui-material/src/Dialog/Dialog.js @@ -182,6 +182,7 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) { fullWidth = false, maxWidth = 'sm', onBackdropClick, + onClick, onClose, open, PaperComponent = Paper, @@ -211,6 +212,10 @@ const Dialog = React.forwardRef(function Dialog(inProps, ref) { backdropClick.current = event.target === event.currentTarget; }; const handleBackdropClick = (event) => { + if (onClick) { + onClick(event); + } + // Ignore the events not coming from the "backdrop". if (!backdropClick.current) { return; @@ -360,6 +365,10 @@ Dialog.propTypes /* remove-proptypes */ = { * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events. */ onBackdropClick: PropTypes.func, + /** + * @ignore + */ + onClick: PropTypes.func, /** * Callback fired when the component requests to be closed. * diff --git a/packages/mui-material/src/Dialog/Dialog.test.js b/packages/mui-material/src/Dialog/Dialog.test.js index 7690dd907bf183..e17f7ac397d7de 100644 --- a/packages/mui-material/src/Dialog/Dialog.test.js +++ b/packages/mui-material/src/Dialog/Dialog.test.js @@ -187,6 +187,28 @@ describe('', () => { expect(onClose.callCount).to.equal(1); }); + it('calls onBackdropClick when onClick callback also exists', () => { + const onBackdropClick = spy(); + const onClick = spy(); + render( + { + if (reason === 'backdropClick') { + onBackdropClick(); + } + }} + open + > + foo + , + ); + + clickBackdrop(screen); + expect(onBackdropClick.callCount).to.equal(1); + expect(onClick.callCount).to.equal(1); + }); + it('should ignore the backdrop click if the event did not come from the backdrop', () => { const onBackdropClick = spy(); const { getByRole } = render( diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js index 05cea653d79888..dc71ddee0481ff 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.js +++ b/packages/mui-material/src/Tooltip/Tooltip.js @@ -473,8 +473,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { * @param {KeyboardEvent} nativeEvent */ function handleKeyDown(nativeEvent) { - // IE11, Edge (prior to using Bink?) use 'Esc' - if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') { + if (nativeEvent.key === 'Escape') { handleClose(nativeEvent); } } diff --git a/packages/mui-material/src/styles/createTransitions.js b/packages/mui-material/src/styles/createTransitions.js index a98b2c2357458e..9f92f9f2d8c4df 100644 --- a/packages/mui-material/src/styles/createTransitions.js +++ b/packages/mui-material/src/styles/createTransitions.js @@ -64,9 +64,7 @@ export default function createTransitions(inputTransitions) { if (process.env.NODE_ENV !== 'production') { const isString = (value) => typeof value === 'string'; - // IE11 support, replace with Number.isNaN - // eslint-disable-next-line no-restricted-globals - const isNumber = (value) => !isNaN(parseFloat(value)); + const isNumber = (value) => !Number.isNaN(parseFloat(value)); if (!isString(props) && !Array.isArray(props)) { console.error('MUI: Argument "props" must be a string or Array.'); } diff --git a/packages/mui-material/src/styles/createTransitions.test.js b/packages/mui-material/src/styles/createTransitions.test.js index 627186dd0b23e1..1c942fb5a01917 100644 --- a/packages/mui-material/src/styles/createTransitions.test.js +++ b/packages/mui-material/src/styles/createTransitions.test.js @@ -130,14 +130,11 @@ describe('createTransitions', () => { it('should return NaN when passed a negative number', () => { const zeroHeightDurationNegativeOne = getAutoHeightDuration(-1); - // eslint-disable-next-line no-restricted-globals - expect(isNaN(zeroHeightDurationNegativeOne)).to.equal(true); + expect(Number.isNaN(zeroHeightDurationNegativeOne)).to.equal(true); const zeroHeightDurationSmallNegative = getAutoHeightDuration(-0.000001); - // eslint-disable-next-line no-restricted-globals - expect(isNaN(zeroHeightDurationSmallNegative)).to.equal(true); + expect(Number.isNaN(zeroHeightDurationSmallNegative)).to.equal(true); const zeroHeightDurationBigNegative = getAutoHeightDuration(-100000); - // eslint-disable-next-line no-restricted-globals - expect(isNaN(zeroHeightDurationBigNegative)).to.equal(true); + expect(Number.isNaN(zeroHeightDurationBigNegative)).to.equal(true); }); it('should return values for pre-calculated positive examples', () => { diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json index 7bf488f86cb475..ca0d18f414dc61 100644 --- a/packages/mui-private-theming/package.json +++ b/packages/mui-private-theming/package.json @@ -26,8 +26,7 @@ "url": "https://opencollective.com/mui-org" }, "scripts": { - "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files", - "build:legacy": "node ../../scripts/build.mjs legacy", + "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files", "build:modern": "node ../../scripts/build.mjs modern", "build:node": "node ../../scripts/build.mjs node", "build:stable": "node ../../scripts/build.mjs stable", diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json index 5e850007c2b664..1bb4803094fda9 100644 --- a/packages/mui-styled-engine-sc/package.json +++ b/packages/mui-styled-engine-sc/package.json @@ -26,8 +26,7 @@ "url": "https://opencollective.com/mui-org" }, "scripts": { - "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files", - "build:legacy": "node ../../scripts/build.mjs legacy", + "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files", "build:modern": "node ../../scripts/build.mjs modern", "build:node": "node ../../scripts/build.mjs node", "build:stable": "node ../../scripts/build.mjs stable", diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json index 3f8e17d2c0f092..1a2011c08ee988 100644 --- a/packages/mui-styled-engine/package.json +++ b/packages/mui-styled-engine/package.json @@ -26,8 +26,7 @@ "url": "https://opencollective.com/mui-org" }, "scripts": { - "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files", - "build:legacy": "node ../../scripts/build.mjs legacy", + "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files", "build:modern": "node ../../scripts/build.mjs modern", "build:node": "node ../../scripts/build.mjs node", "build:stable": "node ../../scripts/build.mjs stable", diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json index 25fb2d11243519..536f10b7f061b5 100644 --- a/packages/mui-styles/package.json +++ b/packages/mui-styles/package.json @@ -26,8 +26,7 @@ "url": "https://opencollective.com/mui-org" }, "scripts": { - "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files", - "build:legacy": "node ../../scripts/build.mjs legacy", + "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files", "build:modern": "node ../../scripts/build.mjs modern", "build:node": "node ../../scripts/build.mjs node", "build:stable": "node ../../scripts/build.mjs stable", diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json index 7a6bb48a0104fe..27574e925f0c52 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -26,8 +26,7 @@ "url": "https://opencollective.com/mui-org" }, "scripts": { - "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files", - "build:legacy": "node ../../scripts/build.mjs legacy", + "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files", "build:modern": "node ../../scripts/build.mjs modern", "build:node": "node ../../scripts/build.mjs node", "build:stable": "node ../../scripts/build.mjs stable", diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json index 2675ce2917f370..0d9ab28df85b84 100644 --- a/packages/mui-utils/package.json +++ b/packages/mui-utils/package.json @@ -26,8 +26,7 @@ "url": "https://opencollective.com/mui-org" }, "scripts": { - "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files", - "build:legacy": "node ../../scripts/build.mjs legacy", + "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files", "build:modern": "node ../../scripts/build.mjs modern", "build:node": "node ../../scripts/build.mjs node", "build:stable": "node ../../scripts/build.mjs stable", diff --git a/packages/mui-utils/src/getDisplayName/getDisplayName.test.tsx b/packages/mui-utils/src/getDisplayName/getDisplayName.test.tsx index 4d30daac79c0fe..6d2aba0f362085 100644 --- a/packages/mui-utils/src/getDisplayName/getDisplayName.test.tsx +++ b/packages/mui-utils/src/getDisplayName/getDisplayName.test.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/prefer-stateless-function */ import * as React from 'react'; import { expect } from 'chai'; -import getDisplayName, { getFunctionName } from './getDisplayName'; +import getDisplayName from './getDisplayName'; describe('utils/getDisplayName.js', () => { describe('getDisplayName', () => { @@ -75,14 +75,4 @@ describe('utils/getDisplayName.js', () => { expect(getDisplayName(false)).to.equal(undefined); }); }); - - describe('getFunctionName', () => { - it('gets the name of a function', () => { - function SomeFunction() { - return
; - } - - expect(getFunctionName(SomeFunction)).to.equal('SomeFunction'); - }); - }); }); diff --git a/packages/mui-utils/src/getDisplayName/getDisplayName.ts b/packages/mui-utils/src/getDisplayName/getDisplayName.ts index 02164eed56390f..5290cabeea2e29 100644 --- a/packages/mui-utils/src/getDisplayName/getDisplayName.ts +++ b/packages/mui-utils/src/getDisplayName/getDisplayName.ts @@ -1,20 +1,11 @@ import * as React from 'react'; import { ForwardRef, Memo } from 'react-is'; -// Simplified polyfill for IE11 support -// https://github.com/JamesMGreene/Function.name/blob/58b314d4a983110c3682f1228f845d39ccca1817/Function.name.js#L3 -const fnNameMatchRegex = /^\s*function(?:\s|\s*\/\*.*\*\/\s*)+([^(\s/]*)\s*/; -export function getFunctionName(fn: Function): string { - const match = `${fn}`.match(fnNameMatchRegex); - const name = match && match[1]; - return name || ''; -} - function getFunctionComponentName( Component: React.FunctionComponent | React.ComponentClass, fallback = '', ) { - return Component.displayName || Component.name || getFunctionName(Component) || fallback; + return Component.displayName || Component.name || fallback; } function getWrappedName(outerType: any, innerType: any, wrapperName: string) { diff --git a/packages/mui-utils/src/getDisplayName/index.ts b/packages/mui-utils/src/getDisplayName/index.ts index 601cc5db1f7b67..64a7a4597931fb 100644 --- a/packages/mui-utils/src/getDisplayName/index.ts +++ b/packages/mui-utils/src/getDisplayName/index.ts @@ -1,2 +1 @@ export { default } from './getDisplayName'; -export * from './getDisplayName'; diff --git a/packages/mui-utils/src/integerPropType/integerPropType.js b/packages/mui-utils/src/integerPropType/integerPropType.js index 99105c3d03cd79..ca3afc0fab0583 100644 --- a/packages/mui-utils/src/integerPropType/integerPropType.js +++ b/packages/mui-utils/src/integerPropType/integerPropType.js @@ -24,18 +24,10 @@ export function getTypeByValue(value) { } } -// IE 11 support -function ponyfillIsInteger(x) { - // eslint-disable-next-line no-restricted-globals - return typeof x === 'number' && isFinite(x) && Math.floor(x) === x; -} - -const isInteger = Number.isInteger || ponyfillIsInteger; - function requiredInteger(props, propName, componentName, location) { const propValue = props[propName]; - if (propValue == null || !isInteger(propValue)) { + if (propValue == null || !Number.isInteger(propValue)) { const propType = getTypeByValue(propValue); return new RangeError( diff --git a/packages/pigment-css-react/README.md b/packages/pigment-css-react/README.md index a949e580fa803a..6a7190afcb4cac 100644 --- a/packages/pigment-css-react/README.md +++ b/packages/pigment-css-react/README.md @@ -308,7 +308,7 @@ const Button = styled('button')({ > 💡 This approach is recommended when the value of a prop is **unknown** ahead of time or possibly unlimited values, for example styling based on the user's input. -There are two ways to acheive this (both involve using a CSS variable): +There are two ways to achieve this (both involve using a CSS variable): 1. Declare a CSS variable directly in the styles and set its value using inline styles: @@ -541,7 +541,7 @@ module.exports = withPigment( ); ``` -The `extendTheme` utility goes through the theme and create a `vars` object which represents the tokens that refer to CSS variables. +The `extendTheme` utility goes through the theme and creates a `vars` object which represents the tokens that refer to CSS variables. ```jsx const theme = extendTheme({ @@ -565,7 +565,7 @@ extendTheme({ }); ``` -The generated CSS variables has the `pigment` prefix: +The generated CSS variables have the `pigment` prefix: ```css :root { diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json index 4def2c983b8f83..5bd16cd571c856 100644 --- a/packages/test-utils/package.json +++ b/packages/test-utils/package.json @@ -26,7 +26,7 @@ "@emotion/react": "^11.11.4", "@mnajdova/enzyme-adapter-react-18": "^0.2.0", "@testing-library/dom": "^9.3.4", - "@testing-library/react": "^14.2.2", + "@testing-library/react": "^14.3.1", "chai": "^4.4.1", "chai-dom": "^1.12.0", "dom-accessibility-api": "^0.6.3", @@ -36,7 +36,7 @@ "jsdom": "^24.0.0", "lodash": "^4.17.21", "mocha": "^10.4.0", - "playwright": "^1.43.0", + "playwright": "^1.43.1", "prop-types": "^15.8.1", "react-test-renderer": "^18.2.0", "sinon": "^15.2.0" @@ -51,7 +51,7 @@ "@types/react-dom": "^18.2.19", "@types/react-test-renderer": "^18.0.7", "@types/sinon": "^10.0.20", - "typescript": "^5.4.4" + "typescript": "^5.4.5" }, "peerDependencies": { "react": "^18.2.0", diff --git a/patches/@wyw-in-js__transform@0.5.0.patch b/patches/@wyw-in-js__transform@0.5.0.patch new file mode 100644 index 00000000000000..2c8676be1898aa --- /dev/null +++ b/patches/@wyw-in-js__transform@0.5.0.patch @@ -0,0 +1,44 @@ +diff --git a/esm/module.js b/esm/module.js +index 527070166142e7fda5ed14e1f3465052c82f2a2b..122061e0d481066a2b5fd0c7ab2a8b1d523b1ef1 100644 +--- a/esm/module.js ++++ b/esm/module.js +@@ -119,7 +119,7 @@ export class Module { + this.services = services; + this.moduleImpl = moduleImpl; + this.cache = services.cache; +- this.#entrypointRef = new WeakRef(entrypoint); ++ this.#entrypointRef = entrypoint; + this.idx = entrypoint.idx; + this.id = entrypoint.name; + this.filename = entrypoint.name; +@@ -143,7 +143,7 @@ export class Module { + this.debug('the whole exports was overridden with %O', value); + } + get entrypoint() { +- const entrypoint = this.#entrypointRef.deref(); ++ const entrypoint = this.#entrypointRef; + invariant(entrypoint, `Module ${this.idx} is disposed`); + return entrypoint; + } +diff --git a/lib/module.js b/lib/module.js +index d2f2644c2469ac7ad0dbd1b9f58099eda4084b80..b8bad9c43c35bef14c3f6a277f8c9974607b2a00 100644 +--- a/lib/module.js ++++ b/lib/module.js +@@ -127,7 +127,7 @@ class Module { + this.services = services; + this.moduleImpl = moduleImpl; + this.cache = services.cache; +- this.#entrypointRef = new WeakRef(entrypoint); ++ this.#entrypointRef = entrypoint; + this.idx = entrypoint.idx; + this.id = entrypoint.name; + this.filename = entrypoint.name; +@@ -151,7 +151,7 @@ class Module { + this.debug('the whole exports was overridden with %O', value); + } + get entrypoint() { +- const entrypoint = this.#entrypointRef.deref(); ++ const entrypoint = this.#entrypointRef; + (0, _tsInvariant.invariant)(entrypoint, `Module ${this.idx} is disposed`); + return entrypoint; + } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ed81cf2b286ad1..0a7e11acc5e854 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -19,14 +19,19 @@ overrides: '@babel/preset-typescript': ^7.24.1 '@babel/runtime': ^7.24.4 '@babel/types': ^7.24.0 - '@definitelytyped/header-parser': ^0.2.8 + '@definitelytyped/header-parser': ^0.2.9 '@definitelytyped/typescript-versions': ^0.1.1 - '@definitelytyped/utils': ^0.1.5 + '@definitelytyped/utils': ^0.1.6 '@types/node': ^18.19.31 '@types/react': 18.2.55 '@types/react-dom': 18.2.19 cross-fetch: ^4.0.0 +patchedDependencies: + '@wyw-in-js/transform@0.5.0': + hash: zicb4vap2prvslgwedcxhpcmvy + path: patches/@wyw-in-js__transform@0.5.0.patch + importers: .: @@ -71,9 +76,6 @@ importers: '@babel/plugin-proposal-private-property-in-object': specifier: ^7.21.11 version: 7.21.11(@babel/core@7.24.4) - '@babel/plugin-transform-object-assign': - specifier: ^7.24.1 - version: 7.24.1(@babel/core@7.24.4) '@babel/plugin-transform-react-constant-elements': specifier: ^7.24.1 version: 7.24.1(@babel/core@7.24.4) @@ -120,8 +122,8 @@ importers: specifier: workspace:^ version: link:packages/mui-utils/build '@next/eslint-plugin-next': - specifier: ^14.1.4 - version: 14.1.4 + specifier: ^14.2.1 + version: 14.2.1 '@octokit/rest': specifier: ^20.1.0 version: 20.1.0 @@ -129,8 +131,8 @@ importers: specifier: workspace:^ version: link:packages/pigment-css-react '@playwright/test': - specifier: 1.43.0 - version: 1.43.0 + specifier: 1.43.1 + version: 1.43.1 '@types/enzyme': specifier: ^3.10.18 version: 3.10.18 @@ -157,10 +159,10 @@ importers: version: 17.0.32 '@typescript-eslint/eslint-plugin': specifier: ^6.21.0 - version: 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.4) + version: 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.5) '@typescript-eslint/parser': specifier: ^6.21.0 - version: 6.21.0(eslint@8.57.0)(typescript@5.4.4) + version: 6.21.0(eslint@8.57.0)(typescript@5.4.5) babel-loader: specifier: ^9.1.3 version: 9.1.3(@babel/core@7.24.4)(webpack@5.90.3) @@ -237,8 +239,8 @@ importers: specifier: workspace:^ version: link:packages/eslint-plugin-material-ui eslint-plugin-mocha: - specifier: ^10.4.1 - version: 10.4.1(eslint@8.57.0) + specifier: ^10.4.2 + version: 10.4.2(eslint@8.57.0) eslint-plugin-react: specifier: ^7.34.1 version: 7.34.1(eslint@8.57.0) @@ -285,8 +287,8 @@ importers: specifier: ^4.17.21 version: 4.17.21 markdownlint-cli2: - specifier: ^0.12.1 - version: 0.12.1 + specifier: ^0.13.0 + version: 0.13.0 mocha: specifier: ^10.4.0 version: 10.4.0 @@ -334,22 +336,22 @@ importers: version: 5.3.10(esbuild@0.19.11)(webpack@5.90.3) tsup: specifier: ^8.0.2 - version: 8.0.2(postcss@8.4.38)(typescript@5.4.4) + version: 8.0.2(postcss@8.4.38)(typescript@5.4.5) tsx: specifier: ^4.7.2 version: 4.7.2 typescript: - specifier: ^5.4.4 - version: 5.4.4 + specifier: ^5.4.5 + version: 5.4.5 webpack: specifier: ^5.90.3 version: 5.90.3(esbuild@0.19.11)(webpack-cli@5.1.4) webpack-bundle-analyzer: - specifier: ^4.10.1 - version: 4.10.1 + specifier: ^4.10.2 + version: 4.10.2 webpack-cli: specifier: ^5.1.4 - version: 5.1.4(webpack-bundle-analyzer@4.10.1)(webpack@5.90.3) + version: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.90.3) yargs: specifier: ^17.7.2 version: 17.7.2 @@ -394,7 +396,7 @@ importers: version: link:../local-ui-lib next: specifier: latest - version: 14.1.4(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) + version: 14.2.1(@babel/core@7.24.4)(@playwright/test@1.43.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -418,8 +420,8 @@ importers: specifier: ^8.57.0 version: 8.57.0 typescript: - specifier: ^5.4.4 - version: 5.4.4 + specifier: ^5.4.5 + version: 5.4.5 apps/pigment-css-vite-app: dependencies: @@ -539,8 +541,8 @@ importers: specifier: ^10.10.0 version: 10.10.0 playwright: - specifier: ^1.43.0 - version: 1.43.0 + specifier: ^1.43.1 + version: 1.43.1 prop-types: specifier: ^15.8.1 version: 15.8.1 @@ -583,9 +585,6 @@ importers: '@babel/core': specifier: ^7.24.4 version: 7.24.4 - '@babel/plugin-transform-object-assign': - specifier: ^7.24.1 - version: 7.24.1(@babel/core@7.24.4) '@babel/runtime': specifier: ^7.24.4 version: 7.24.4 @@ -659,17 +658,17 @@ importers: specifier: 6.19.8 version: 6.19.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-data-grid': - specifier: 7.1.1 - version: 7.1.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.2.0 + version: 7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-data-grid-generator': - specifier: 7.1.1 - version: 7.1.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.2.0 + version: 7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-data-grid-premium': - specifier: 7.1.1 - version: 7.1.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.2.0 + version: 7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-data-grid-pro': - specifier: 7.1.1 - version: 7.1.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + specifier: 7.2.0 + version: 7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/x-date-pickers': specifier: 6.19.9 version: 6.19.9(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(date-fns-jalali@2.21.3-1)(date-fns@2.30.0)(react-dom@18.2.0)(react@18.2.0) @@ -764,8 +763,8 @@ importers: specifier: ^1.5.0 version: 1.5.0 markdown-to-jsx: - specifier: ^7.4.6 - version: 7.4.6(react@18.2.0) + specifier: ^7.4.7 + version: 7.4.7(react@18.2.0) material-ui-popup-state: specifier: ^5.1.0 version: 5.1.0(@mui/material@packages+mui-material+build)(react@18.2.0) @@ -800,11 +799,11 @@ importers: specifier: ^6.5.9 version: 6.5.9(final-form@4.20.10)(react@18.2.0) react-imask: - specifier: ^7.5.0 - version: 7.5.0(react@18.2.0) + specifier: ^7.6.0 + version: 7.6.0(react@18.2.0) react-intersection-observer: - specifier: ^9.8.1 - version: 9.8.1(react-dom@18.2.0)(react@18.2.0) + specifier: ^9.8.2 + version: 9.8.2(react-dom@18.2.0)(react@18.2.0) react-is: specifier: ^18.2.0 version: 18.2.0 @@ -854,8 +853,8 @@ importers: specifier: ^3.0.1 version: 3.0.1(react@18.2.0) webpack-bundle-analyzer: - specifier: ^4.10.1 - version: 4.10.1 + specifier: ^4.10.2 + version: 4.10.2 devDependencies: '@babel/plugin-transform-react-constant-elements': specifier: ^7.24.1 @@ -924,8 +923,8 @@ importers: specifier: ^5.1.2 version: 5.1.2 playwright: - specifier: ^1.43.0 - version: 1.43.0 + specifier: ^1.43.1 + version: 1.43.1 prettier: specifier: ^3.2.5 version: 3.2.5 @@ -942,8 +941,8 @@ importers: specifier: ^5.0.5 version: 5.0.5 typescript: - specifier: ^5.4.4 - version: 5.4.4 + specifier: ^5.4.5 + version: 5.4.5 packages-internal/scripts: dependencies: @@ -972,8 +971,8 @@ importers: specifier: ^4.17.21 version: 4.17.21 typescript: - specifier: ^5.4.4 - version: 5.4.4 + specifier: ^5.4.5 + version: 5.4.5 uuid: specifier: ^9.0.1 version: 9.0.1 @@ -1063,8 +1062,8 @@ importers: specifier: ^13.0.0 version: 13.0.0 typescript: - specifier: ^5.4.4 - version: 5.4.4 + specifier: ^5.4.5 + version: 5.4.5 unist-util-visit: specifier: ^2.0.3 version: 2.0.3 @@ -1137,8 +1136,8 @@ importers: specifier: ^15.2.0 version: 15.2.0 typescript: - specifier: ^5.4.4 - version: 5.4.4 + specifier: ^5.4.5 + version: 5.4.5 packages/eslint-plugin-material-ui: dependencies: @@ -1147,11 +1146,11 @@ importers: version: 10.3.0 devDependencies: '@types/eslint': - specifier: ^8.56.7 - version: 8.56.7 + specifier: ^8.56.9 + version: 8.56.9 '@typescript-eslint/parser': specifier: ^6.21.0 - version: 6.21.0(eslint@8.57.0)(typescript@5.4.4) + version: 6.21.0(eslint@8.57.0)(typescript@5.4.5) eslint: specifier: ^8.57.0 version: 8.57.0 @@ -1166,8 +1165,8 @@ importers: version: 9.0.1 optionalDependencies: aws-sdk: - specifier: ^2.1589.0 - version: 2.1589.0 + specifier: ^2.1599.0 + version: 2.1599.0 devDependencies: claudia: specifier: ^5.14.1 @@ -1263,8 +1262,8 @@ importers: specifier: workspace:^ version: link:../mui-babel-macros '@testing-library/react': - specifier: ^14.2.2 - version: 14.2.2(react-dom@18.2.0)(react@18.2.0) + specifier: ^14.3.1 + version: 14.3.1(react-dom@18.2.0)(react@18.2.0) '@testing-library/user-event': specifier: ^14.5.2 version: 14.5.2(@testing-library/dom@9.3.4) @@ -1391,8 +1390,8 @@ importers: packages/mui-envinfo: dependencies: envinfo: - specifier: ^7.11.1 - version: 7.11.1 + specifier: ^7.12.0 + version: 7.12.0 devDependencies: '@types/chai': specifier: ^4.3.14 @@ -1730,8 +1729,8 @@ importers: specifier: ^4.17.21 version: 4.17.21 playwright: - specifier: ^1.43.0 - version: 1.43.0 + specifier: ^1.43.1 + version: 1.43.1 react: specifier: ^18.2.0 version: 18.2.0 @@ -2195,7 +2194,7 @@ importers: version: 0.5.0 '@wyw-in-js/transform': specifier: ^0.5.0 - version: 0.5.0 + version: 0.5.0(patch_hash=zicb4vap2prvslgwedcxhpcmvy) clsx: specifier: ^2.1.0 version: 2.1.0 @@ -2274,7 +2273,7 @@ importers: version: 0.5.0 '@wyw-in-js/transform': specifier: ^0.5.0 - version: 0.5.0 + version: 0.5.0(patch_hash=zicb4vap2prvslgwedcxhpcmvy) babel-plugin-define-var: specifier: ^0.1.0 version: 0.1.0 @@ -2311,7 +2310,7 @@ importers: version: 0.5.0 '@wyw-in-js/transform': specifier: ^0.5.0 - version: 0.5.0 + version: 0.5.0(patch_hash=zicb4vap2prvslgwedcxhpcmvy) babel-plugin-define-var: specifier: ^0.1.0 version: 0.1.0 @@ -2372,8 +2371,8 @@ importers: specifier: ^9.3.4 version: 9.3.4 '@testing-library/react': - specifier: ^14.2.2 - version: 14.2.2(react-dom@18.2.0)(react@18.2.0) + specifier: ^14.3.1 + version: 14.3.1(react-dom@18.2.0)(react@18.2.0) chai: specifier: ^4.4.1 version: 4.4.1 @@ -2402,8 +2401,8 @@ importers: specifier: ^10.4.0 version: 10.4.0 playwright: - specifier: ^1.43.0 - version: 1.43.0 + specifier: ^1.43.1 + version: 1.43.1 prop-types: specifier: ^15.8.1 version: 15.8.1 @@ -2448,8 +2447,8 @@ importers: specifier: ^10.0.20 version: 10.0.20 typescript: - specifier: ^5.4.4 - version: 5.4.4 + specifier: ^5.4.5 + version: 5.4.5 packages/waterfall: {} @@ -2489,8 +2488,8 @@ importers: specifier: workspace:^ version: link:../packages/mui-utils/build '@playwright/test': - specifier: 1.43.0 - version: 1.43.0 + specifier: 1.43.1 + version: 1.43.1 '@testing-library/dom': specifier: ^9.3.4 version: 9.3.4 @@ -2525,8 +2524,8 @@ importers: specifier: ^4.17.21 version: 4.17.21 playwright: - specifier: ^1.43.0 - version: 1.43.0 + specifier: ^1.43.1 + version: 1.43.1 prop-types: specifier: ^15.8.1 version: 15.8.1 @@ -3715,15 +3714,6 @@ packages: '@babel/helper-plugin-utils': 7.24.0 '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.4) - /@babel/plugin-transform-object-assign@7.24.1(@babel/core@7.24.4): - resolution: {integrity: sha512-I1kctor9iKtupb7jv7FyjApHCuKLBKCblVAeHVK9PB6FW7GI0ac6RtobC3MwwJy8CZ1JxuhQmnbrsqI5G8hAIg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.24.4 - dependencies: - '@babel/core': 7.24.4 - '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-object-rest-spread@7.24.1(@babel/core@7.24.4): resolution: {integrity: sha512-XjD5f0YqOtebto4HGISLNfiNMTTs6tbkFf2TOqJlYKYmbo+mN9Dnpl4SRoofiziuOWMIyq3sZEUqLo3hLITFEA==} engines: {node: '>=6.9.0'} @@ -4175,8 +4165,8 @@ packages: regenerator-runtime: 0.14.0 dev: false - /@babel/runtime-corejs3@7.24.0: - resolution: {integrity: sha512-HxiRMOncx3ly6f3fcZ1GVKf+/EROcI9qwPgmij8Czqy6Okm/0T37T4y2ZIlLUuEUFjtM7NRsfdCO8Y3tAiJZew==} + /@babel/runtime-corejs3@7.24.4: + resolution: {integrity: sha512-VOQOexSilscN24VEY810G/PqtpFvx/z6UqDIjIWbDe2368HhDLkYN5TYwaEz/+eRCUkhJ2WaNLLmQAlxzfWj4w==} engines: {node: '>=6.9.0'} dependencies: core-js-pure: 3.32.1 @@ -5661,8 +5651,8 @@ packages: - '@types/react' dev: false - /@mui/x-data-grid-generator@7.1.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-PcjmlnkD7kCwu/VPsRjYvCs8mqRA50/slUoPnfaT63J7hwKuPg5xXrOpHCosGWd2B3/4WEoHd+f52h+hldwHzw==} + /@mui/x-data-grid-generator@7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-lBA60trUaidVk85ndfYN9rvha1rwDFp51PjosY1nb0Ravb1ShGpLrbTzYN+tSRZZdtN9fRuI3WAW3mA9kZh5Og==} engines: {node: '>=14.0.0'} peerDependencies: '@mui/icons-material': ^5.4.1 @@ -5673,7 +5663,7 @@ packages: '@mui/base': 5.0.0-beta.40(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/icons-material': link:packages/mui-icons-material/build '@mui/material': link:packages/mui-material/build - '@mui/x-data-grid-premium': 7.1.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-data-grid-premium': 7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) chance: 1.1.11 clsx: 2.1.0 lru-cache: 7.18.3 @@ -5685,8 +5675,8 @@ packages: - react-dom dev: false - /@mui/x-data-grid-premium@7.1.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-tHQbHGeoyVOGblFQ1I68q4rmNXej/slVlDD/XC/oDTsF2SeJK1R/LIegeuh5P73MVEVe0HeD+q6xhRizkLlg2g==} + /@mui/x-data-grid-premium@7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-VQuXD289RuSKs5bz4fwHg6WTo1Rmh2QFokCAU66+yJ5ZTpqljp371y9pfvn+OMdGx4C7EkNad73VUKfP/xo1xQ==} engines: {node: '>=14.0.0'} peerDependencies: '@mui/material': ^5.15.14 @@ -5697,9 +5687,9 @@ packages: '@mui/material': link:packages/mui-material/build '@mui/system': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.55)(react@18.2.0) '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) - '@mui/x-data-grid': 7.1.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) - '@mui/x-data-grid-pro': 7.1.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) - '@mui/x-license': 7.1.1(@types/react@18.2.55)(react@18.2.0) + '@mui/x-data-grid': 7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-data-grid-pro': 7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-license': 7.2.0(@types/react@18.2.55)(react@18.2.0) '@types/format-util': 1.0.4 clsx: 2.1.0 exceljs: 4.4.0 @@ -5713,8 +5703,8 @@ packages: - '@types/react' dev: false - /@mui/x-data-grid-pro@7.1.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-MurP9VpwyHy96gzO92HN8q8Z5GqkIAW2DGIa2465XwIoqzMMfAtGAanyiw93F9AwY+OKnnbYd576Q842rHxzwQ==} + /@mui/x-data-grid-pro@7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-QZG30g0OspTaD9oRfLDIJGROQwpalZUhI//DVpvTZW2ZvAJAkfR1t38MJzRMdnksPmCE6sdSWUFru8eSvNg1Cg==} engines: {node: '>=14.0.0'} peerDependencies: '@mui/material': ^5.15.14 @@ -5725,8 +5715,8 @@ packages: '@mui/material': link:packages/mui-material/build '@mui/system': 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.55)(react@18.2.0) '@mui/utils': 5.15.14(@types/react@18.2.55)(react@18.2.0) - '@mui/x-data-grid': 7.1.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) - '@mui/x-license': 7.1.1(@types/react@18.2.55)(react@18.2.0) + '@mui/x-data-grid': 7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) + '@mui/x-license': 7.2.0(@types/react@18.2.55)(react@18.2.0) '@types/format-util': 1.0.4 clsx: 2.1.0 prop-types: 15.8.1 @@ -5739,8 +5729,8 @@ packages: - '@types/react' dev: false - /@mui/x-data-grid@7.1.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-hNvz927lkAznFdy45QPE7mIZVyQhlqveHmTK9+SD0N1us4sSTij90uUJ/roTNDod0VA9f5GqWmNz+5h8ihpz6Q==} + /@mui/x-data-grid@7.2.0(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-WKmFo0eKhj3W7Fv8u5n2XP4UcdzuJ+mEYALiMUDAYsah/hPBH9mA1miXn9DjXF3i3dxgzrTjdJemTgTJxAQZKg==} engines: {node: '>=14.0.0'} peerDependencies: '@mui/material': ^5.15.14 @@ -5888,8 +5878,8 @@ packages: - '@types/react' dev: false - /@mui/x-license@7.1.1(@types/react@18.2.55)(react@18.2.0): - resolution: {integrity: sha512-MadABMJ7agqaHqmDTzH2BudEqtTDelm3kNDk+WXgkv+DBF3IBFInIeO2YgvqnzOQSBMKpyNF/FiNowRm7uXtqQ==} + /@mui/x-license@7.2.0(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-z9mqsfNPVFqjfxcPgz15o29Vb3FupSImwpMd5CFjZqNasJu3ptLpKxbIUnTtJMUicRdhsVfm3d93Z5XQkq1JuQ==} engines: {node: '>=14.0.0'} peerDependencies: react: ^17.0.0 || ^18.0.0 @@ -5952,12 +5942,12 @@ packages: /@next/env@13.5.1: resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==} - /@next/env@14.1.4: - resolution: {integrity: sha512-e7X7bbn3Z6DWnDi75UWn+REgAbLEqxI8Tq2pkFOFAMpWAWApz/YCUhtWMWn410h8Q2fYiYL7Yg5OlxMOCfFjJQ==} + /@next/env@14.2.1: + resolution: {integrity: sha512-qsHJle3GU3CmVx7pUoXcghX4sRN+vINkbLdH611T8ZlsP//grzqVW87BSUgOZeSAD4q7ZdZicdwNe/20U2janA==} dev: false - /@next/eslint-plugin-next@14.1.4: - resolution: {integrity: sha512-n4zYNLSyCo0Ln5b7qxqQeQ34OZKXwgbdcx6kmkQbywr+0k6M3Vinft0T72R6CDAcDrne2IAgSud4uWCzFgc5HA==} + /@next/eslint-plugin-next@14.2.1: + resolution: {integrity: sha512-Fp+mthEBjkn8r9qd6o4JgxKp0IDEzW0VYHD8ZC05xS5/lFNwHKuOdr2kVhWG7BQCO9L6eeepshM1Wbs2T+LgSg==} dependencies: glob: 10.3.10 dev: true @@ -5970,8 +5960,8 @@ packages: requiresBuild: true optional: true - /@next/swc-darwin-arm64@14.1.4: - resolution: {integrity: sha512-ubmUkbmW65nIAOmoxT1IROZdmmJMmdYvXIe8211send9ZYJu+SqxSnJM4TrPj9wmL6g9Atvj0S/2cFmMSS99jg==} + /@next/swc-darwin-arm64@14.2.1: + resolution: {integrity: sha512-kGjnjcIJehEcd3rT/3NAATJQndAEELk0J9GmGMXHSC75TMnvpOhONcjNHbjtcWE5HUQnIHy5JVkatrnYm1QhVw==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -5987,8 +5977,8 @@ packages: requiresBuild: true optional: true - /@next/swc-darwin-x64@14.1.4: - resolution: {integrity: sha512-b0Xo1ELj3u7IkZWAKcJPJEhBop117U78l70nfoQGo4xUSvv0PJSTaV4U9xQBLvZlnjsYkc8RwQN1HoH/oQmLlQ==} + /@next/swc-darwin-x64@14.2.1: + resolution: {integrity: sha512-dAdWndgdQi7BK2WSXrx4lae7mYcOYjbHJUhvOUnJjMNYrmYhxbbvJ2xElZpxNxdfA6zkqagIB9He2tQk+l16ew==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -6004,8 +5994,8 @@ packages: requiresBuild: true optional: true - /@next/swc-linux-arm64-gnu@14.1.4: - resolution: {integrity: sha512-457G0hcLrdYA/u1O2XkRMsDKId5VKe3uKPvrKVOyuARa6nXrdhJOOYU9hkKKyQTMru1B8qEP78IAhf/1XnVqKA==} + /@next/swc-linux-arm64-gnu@14.2.1: + resolution: {integrity: sha512-2ZctfnyFOGvTkoD6L+DtQtO3BfFz4CapoHnyLTXkOxbZkVRgg3TQBUjTD/xKrO1QWeydeo8AWfZRg8539qNKrg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -6021,8 +6011,8 @@ packages: requiresBuild: true optional: true - /@next/swc-linux-arm64-musl@14.1.4: - resolution: {integrity: sha512-l/kMG+z6MB+fKA9KdtyprkTQ1ihlJcBh66cf0HvqGP+rXBbOXX0dpJatjZbHeunvEHoBBS69GYQG5ry78JMy3g==} + /@next/swc-linux-arm64-musl@14.2.1: + resolution: {integrity: sha512-jazZXctiaanemy4r+TPIpFP36t1mMwWCKMsmrTRVChRqE6putyAxZA4PDujx0SnfvZHosjdkx9xIq9BzBB5tWg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -6038,8 +6028,8 @@ packages: requiresBuild: true optional: true - /@next/swc-linux-x64-gnu@14.1.4: - resolution: {integrity: sha512-BapIFZ3ZRnvQ1uWbmqEGJuPT9cgLwvKtxhK/L2t4QYO7l+/DxXuIGjvp1x8rvfa/x1FFSsipERZK70pewbtJtw==} + /@next/swc-linux-x64-gnu@14.2.1: + resolution: {integrity: sha512-VjCHWCjsAzQAAo8lkBOLEIkBZFdfW+Z18qcQ056kL4KpUYc8o59JhLDCBlhg+hINQRgzQ2UPGma2AURGOH0+Qg==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -6055,8 +6045,8 @@ packages: requiresBuild: true optional: true - /@next/swc-linux-x64-musl@14.1.4: - resolution: {integrity: sha512-mqVxTwk4XuBl49qn2A5UmzFImoL1iLm0KQQwtdRJRKl21ylQwwGCxJtIYo2rbfkZHoSKlh/YgztY0qH3wG1xIg==} + /@next/swc-linux-x64-musl@14.2.1: + resolution: {integrity: sha512-7HZKYKvAp4nAHiHIbY04finRqjeYvkITOGOurP1aLMexIFG/1+oCnqhGogBdc4lao/lkMW1c+AkwWSzSlLasqw==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -6072,8 +6062,8 @@ packages: requiresBuild: true optional: true - /@next/swc-win32-arm64-msvc@14.1.4: - resolution: {integrity: sha512-xzxF4ErcumXjO2Pvg/wVGrtr9QQJLk3IyQX1ddAC/fi6/5jZCZ9xpuL9Tzc4KPWMFq8GGWFVDMshZOdHGdkvag==} + /@next/swc-win32-arm64-msvc@14.2.1: + resolution: {integrity: sha512-YGHklaJ/Cj/F0Xd8jxgj2p8po4JTCi6H7Z3Yics3xJhm9CPIqtl8erlpK1CLv+HInDqEWfXilqatF8YsLxxA2Q==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -6089,8 +6079,8 @@ packages: requiresBuild: true optional: true - /@next/swc-win32-ia32-msvc@14.1.4: - resolution: {integrity: sha512-WZiz8OdbkpRw6/IU/lredZWKKZopUMhcI2F+XiMAcPja0uZYdMTZQRoQ0WZcvinn9xZAidimE7tN9W5v9Yyfyw==} + /@next/swc-win32-ia32-msvc@14.2.1: + resolution: {integrity: sha512-o+ISKOlvU/L43ZhtAAfCjwIfcwuZstiHVXq/BDsZwGqQE0h/81td95MPHliWCnFoikzWcYqh+hz54ZB2FIT8RA==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -6106,8 +6096,8 @@ packages: requiresBuild: true optional: true - /@next/swc-win32-x64-msvc@14.1.4: - resolution: {integrity: sha512-4Rto21sPfw555sZ/XNLqfxDUNeLhNYGO2dlPqsnuCg8N8a2a9u1ltqBOPQ4vj1Gf7eJC0W2hHG2eYUHuiXgY2w==} + /@next/swc-win32-x64-msvc@14.2.1: + resolution: {integrity: sha512-GmRoTiLcvCLifujlisknv4zu9/C4i9r0ktsA8E51EMqJL4bD4CpO7lDYr7SrUxCR0tS4RVcrqKmCak24T0ohaw==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -6700,13 +6690,12 @@ packages: requiresBuild: true optional: true - /@playwright/test@1.43.0: - resolution: {integrity: sha512-Ebw0+MCqoYflop7wVKj711ccbNlrwTBCtjY5rlbiY9kHL2bCYxq+qltK6uPsVBGGAOb033H2VO0YobcQVxoW7Q==} + /@playwright/test@1.43.1: + resolution: {integrity: sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==} engines: {node: '>=16'} hasBin: true dependencies: - playwright: 1.43.0 - dev: true + playwright: 1.43.1 /@polka/url@1.0.0-next.21: resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==} @@ -6755,7 +6744,7 @@ packages: chalk: 4.1.2 command-exists: 1.2.9 deepmerge: 4.3.1 - envinfo: 7.11.1 + envinfo: 7.12.0 execa: 5.1.1 hermes-profile-transformer: 0.0.6 node-stream-zip: 1.15.0 @@ -7425,11 +7414,6 @@ packages: engines: {node: '>=10'} dev: true - /@sindresorhus/merge-streams@1.0.0: - resolution: {integrity: sha512-rUV5WyJrJLoloD4NDN1V1+LDMDWOa4OTsT4yYJwQNpTU6FWxkxHpL7eu4w+DmiH8x/EAM1otkPE1+LaspIbplw==} - engines: {node: '>=18'} - dev: true - /@sindresorhus/merge-streams@2.2.1: resolution: {integrity: sha512-255V7MMIKw6aQ43Wbqp9HZ+VHn6acddERTLiiLnlcPLU9PdTq9Aijl12oklAgUEblLWye+vHLzmqBx6f2TGcZw==} engines: {node: '>=18'} @@ -7647,11 +7631,22 @@ packages: '@styled-system/css': 5.1.5 dev: false + /@swc/counter@0.1.3: + resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==} + dev: false + /@swc/helpers@0.5.2: resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==} dependencies: tslib: 2.6.2 + /@swc/helpers@0.5.5: + resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==} + dependencies: + '@swc/counter': 0.1.3 + tslib: 2.6.2 + dev: false + /@szmarczak/http-timer@4.0.6: resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==} engines: {node: '>=10'} @@ -7672,8 +7667,8 @@ packages: lz-string: 1.5.0 pretty-format: 27.5.1 - /@testing-library/react@14.2.2(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-SOUuM2ysCvjUWBXTNfQ/ztmnKDmqaiPV3SvoIuyxMUca45rbSWWAT/qB8CUs/JQ/ux/8JFs9DNdFQ3f6jH3crA==} + /@testing-library/react@14.3.1(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-H99XjUhWQw0lTgyMN05W3xQG1Nh4lq574D8keFf1dDoNTJgp66VbJozRaczoF+wsiaPJNt/TcnfpLGufGxSrZQ==} engines: {node: '>=14'} peerDependencies: react: ^18.0.0 @@ -7936,11 +7931,11 @@ packages: /@types/eslint-scope@3.7.4: resolution: {integrity: sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==} dependencies: - '@types/eslint': 8.56.7 + '@types/eslint': 8.56.9 '@types/estree': 1.0.5 - /@types/eslint@8.56.7: - resolution: {integrity: sha512-SjDvI/x3zsZnOkYZ3lCt9lOZWZLB2jIlNKz+LBgCtDurK0JZcwucxYHn1w2BJkD34dgX9Tjnak0txtq4WTggEA==} + /@types/eslint@8.56.9: + resolution: {integrity: sha512-W4W3KcqzjJ0sHg2vAq9vfml6OhsJ53TcUjUqfzzZf/EChUtwspszj/S0pzMxnfRcO55/iGq47dscXw71Fxc4Zg==} dependencies: '@types/estree': 1.0.5 '@types/json-schema': 7.0.12 @@ -8301,7 +8296,7 @@ packages: dependencies: '@types/yargs-parser': 21.0.3 - /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.4): + /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.5): resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -8313,10 +8308,10 @@ packages: optional: true dependencies: '@eslint-community/regexpp': 4.6.2 - '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.4) + '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5) '@typescript-eslint/scope-manager': 6.21.0 - '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.0)(typescript@5.4.4) - '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.4) + '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5) + '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5) '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.3.4(supports-color@8.1.1) eslint: 8.57.0 @@ -8324,13 +8319,13 @@ packages: ignore: 5.3.1 natural-compare: 1.4.0 semver: 7.6.0 - ts-api-utils: 1.0.1(typescript@5.4.4) - typescript: 5.4.4 + ts-api-utils: 1.0.1(typescript@5.4.5) + typescript: 5.4.5 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.4): + /@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5): resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -8342,11 +8337,11 @@ packages: dependencies: '@typescript-eslint/scope-manager': 6.21.0 '@typescript-eslint/types': 6.21.0 - '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.4) + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.5) '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.3.4(supports-color@8.1.1) eslint: 8.57.0 - typescript: 5.4.4 + typescript: 5.4.5 transitivePeerDependencies: - supports-color dev: true @@ -8359,7 +8354,7 @@ packages: '@typescript-eslint/visitor-keys': 6.21.0 dev: true - /@typescript-eslint/type-utils@6.21.0(eslint@8.57.0)(typescript@5.4.4): + /@typescript-eslint/type-utils@6.21.0(eslint@8.57.0)(typescript@5.4.5): resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -8369,12 +8364,12 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.4) - '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.4) + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.5) + '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5) debug: 4.3.4(supports-color@8.1.1) eslint: 8.57.0 - ts-api-utils: 1.0.1(typescript@5.4.4) - typescript: 5.4.4 + ts-api-utils: 1.0.1(typescript@5.4.5) + typescript: 5.4.5 transitivePeerDependencies: - supports-color dev: true @@ -8384,7 +8379,7 @@ packages: engines: {node: ^16.0.0 || >=18.0.0} dev: true - /@typescript-eslint/typescript-estree@6.21.0(typescript@5.4.4): + /@typescript-eslint/typescript-estree@6.21.0(typescript@5.4.5): resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -8400,13 +8395,13 @@ packages: is-glob: 4.0.3 minimatch: 9.0.3 semver: 7.6.0 - ts-api-utils: 1.0.1(typescript@5.4.4) - typescript: 5.4.4 + ts-api-utils: 1.0.1(typescript@5.4.5) + typescript: 5.4.5 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.4.4): + /@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.4.5): resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -8417,7 +8412,7 @@ packages: '@types/semver': 7.5.0 '@typescript-eslint/scope-manager': 6.21.0 '@typescript-eslint/types': 6.21.0 - '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.4) + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.5) eslint: 8.57.0 semver: 7.6.0 transitivePeerDependencies: @@ -8552,7 +8547,7 @@ packages: webpack-cli: 5.x.x dependencies: webpack: 5.90.3(esbuild@0.19.11)(webpack-cli@5.1.4) - webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.1)(webpack@5.90.3) + webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.90.3) /@webpack-cli/info@2.0.2(webpack-cli@5.1.4)(webpack@5.90.3): resolution: {integrity: sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==} @@ -8562,7 +8557,7 @@ packages: webpack-cli: 5.x.x dependencies: webpack: 5.90.3(esbuild@0.19.11)(webpack-cli@5.1.4) - webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.1)(webpack@5.90.3) + webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.90.3) /@webpack-cli/serve@2.0.5(webpack-cli@5.1.4)(webpack@5.90.3): resolution: {integrity: sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==} @@ -8576,7 +8571,7 @@ packages: optional: true dependencies: webpack: 5.90.3(esbuild@0.19.11)(webpack-cli@5.1.4) - webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.1)(webpack@5.90.3) + webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.90.3) /@wyw-in-js/processor-utils@0.5.0: resolution: {integrity: sha512-3sRwuDTMy2GmD+44bhCTcBasCrjBexzYRzhxkmMrX49cpVDmQOH+4O7kX5OMRbmzMXe6Z5MsnxIlDlm3bJlcww==} @@ -8599,7 +8594,7 @@ packages: - supports-color dev: false - /@wyw-in-js/transform@0.5.0: + /@wyw-in-js/transform@0.5.0(patch_hash=zicb4vap2prvslgwedcxhpcmvy): resolution: {integrity: sha512-tpa2/FsB30fdXB1E+9MmfxQYbRgLv/+VMKzpBKNraDH39zwnA2eGGAEho5gpqK40cEV7NH6zhVbaBcEnV0HQyw==} engines: {node: '>=16.0.0'} dependencies: @@ -8621,6 +8616,7 @@ packages: transitivePeerDependencies: - supports-color dev: false + patched: true /@xtuc/ieee754@1.2.0: resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==} @@ -9286,8 +9282,8 @@ packages: dependencies: possible-typed-array-names: 1.0.0 - /aws-sdk@2.1589.0: - resolution: {integrity: sha512-Tt3UHH6hoUEAjbCscqvfEAoq9VSTN5iSQO9XSisiiH/QJo8sf+iLCYmfJHM4tVkd92bQH61/xxj9t2Mazwc/WQ==} + /aws-sdk@2.1599.0: + resolution: {integrity: sha512-jPb1LAN+s1TLTK+VR3TTJLr//sb3AhhT60Bm9jxB5G/fVeeRczXtBtixNpQ00gksQdkstILYLc9S6MuKMsksxA==} engines: {node: '>= 10.0.0'} requiresBuild: true dependencies: @@ -10097,7 +10093,7 @@ packages: hasBin: true dependencies: archiver: 3.1.1 - aws-sdk: 2.1589.0 + aws-sdk: 2.1599.0 fs-extra: 6.0.1 glob: 7.2.3 gunzip-maybe: 1.4.2 @@ -11498,8 +11494,8 @@ packages: engines: {node: '>=6'} dev: true - /envinfo@7.11.1: - resolution: {integrity: sha512-8PiZgZNIB4q/Lw4AhOvAfB/ityHAd2bli3lESSWmWSzSsl5dKpy5N1d1Rfkd2teq/g9xN90lc6o98DOjMeYHpg==} + /envinfo@7.12.0: + resolution: {integrity: sha512-Iw9rQJBGpJRd3rwXm9ft/JiGoAZmLxxJZELYDQoPRZ4USVhkKtIcNBPw6U+/K2mBpaqM25JSV6Yl4Az9vO2wJg==} engines: {node: '>=4'} hasBin: true @@ -11818,8 +11814,8 @@ packages: eslint: ^7.32.0 || ^8.2.0 eslint-plugin-import: ^2.25.3 dependencies: - '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.4) - '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.4) + '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.4.5) + '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5) eslint: 8.57.0 eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.29.1)(eslint@8.57.0) eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0) @@ -11909,7 +11905,7 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.4) + '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5) debug: 3.2.7 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 @@ -11950,7 +11946,7 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.4) + '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5) array-includes: 3.1.7 array.prototype.findlastindex: 1.2.3 array.prototype.flat: 1.3.2 @@ -12000,8 +11996,8 @@ packages: semver: 6.3.1 dev: true - /eslint-plugin-mocha@10.4.1(eslint@8.57.0): - resolution: {integrity: sha512-G85ALUgKaLzuEuHhoW3HVRgPTmia6njQC3qCG6CEvA8/Ja9PDZnRZOuzekMki+HaViEQXINuYsmhp5WR5/4MfA==} + /eslint-plugin-mocha@10.4.2(eslint@8.57.0): + resolution: {integrity: sha512-cur4dVYnSEWTBwdqIBQFxa/9siAhesu0TX+lbJ4ClE9j0eNMNe6BSx3vkFFNz6tGoveyMyELFXa30f3fvuAVDg==} engines: {node: '>=14.0.0'} peerDependencies: eslint: '>=7.0.0' @@ -13117,18 +13113,6 @@ packages: slash: 4.0.0 dev: true - /globby@14.0.0: - resolution: {integrity: sha512-/1WM/LNHRAOH9lZta77uGbq0dAEQM+XjNesWwhlERDVenqothRbnzTrL3/LrIoEPPjeUHC3vrS6TwoyxeHs7MQ==} - engines: {node: '>=18'} - dependencies: - '@sindresorhus/merge-streams': 1.0.0 - fast-glob: 3.3.2 - ignore: 5.3.1 - path-type: 5.0.0 - slash: 5.1.0 - unicorn-magic: 0.1.0 - dev: true - /globby@14.0.1: resolution: {integrity: sha512-jOMLD2Z7MAhyG8aJpNOpmziMOP4rPLcc95oQPKXBazW82z+CEgPFBQvEpRUa1KeIMUJo4Wsm+q6uzO/Q/4BksQ==} engines: {node: '>=18'} @@ -13650,11 +13634,11 @@ packages: queue: 6.0.2 dev: false - /imask@7.5.0: - resolution: {integrity: sha512-eoTEnw67KAamB1zsiYtU35s0Fj1XYZ8mN2q3ZDGO4ot4FtPmBpw9S6kOTj0kaOILdsEA6ZhNtH2TAMXe/NChmQ==} + /imask@7.6.0: + resolution: {integrity: sha512-6EHsq1q7v5+M4Vas2MGrs2oRpxPRWPwPDiL0HmG1ikBI/0hOwvkxRhVRFQnWIlZcTG7R8iw0az5V+z868qnQ9A==} engines: {npm: '>=4.0.0'} dependencies: - '@babel/runtime-corejs3': 7.24.0 + '@babel/runtime-corejs3': 7.24.4 dev: false /immediate@3.0.6: @@ -14006,6 +13990,7 @@ packages: /is-plain-object@5.0.0: resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==} engines: {node: '>=0.10.0'} + dev: true /is-port-reachable@4.0.0: resolution: {integrity: sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==} @@ -14637,6 +14622,10 @@ packages: resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==} dev: true + /jsonc-parser@3.2.1: + resolution: {integrity: sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==} + dev: true + /jsonfile@4.0.0: resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==} optionalDependencies: @@ -15061,7 +15050,7 @@ packages: strong-log-transformer: 2.1.0 tar: 6.1.11 temp-dir: 1.0.0 - typescript: 5.4.4 + typescript: 5.4.5 upath: 2.0.1 uuid: 9.0.1 validate-npm-package-license: 3.0.4 @@ -15152,7 +15141,7 @@ packages: /linkify-it@5.0.0: resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==} dependencies: - uc.micro: 2.0.0 + uc.micro: 2.1.0 dev: true /listenercount@1.0.1: @@ -15557,8 +15546,8 @@ packages: resolution: {integrity: sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==} dev: true - /markdown-it@14.0.0: - resolution: {integrity: sha512-seFjF0FIcPt4P9U39Bq1JYblX0KZCjDLFFQPHpL5AzHpqPEKtosxmdq/LTVZnjfH7tjt9BxStm+wXcDBNuYmzw==} + /markdown-it@14.1.0: + resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==} hasBin: true dependencies: argparse: 2.0.1 @@ -15566,11 +15555,11 @@ packages: linkify-it: 5.0.0 mdurl: 2.0.0 punycode.js: 2.3.1 - uc.micro: 2.0.0 + uc.micro: 2.1.0 dev: true - /markdown-to-jsx@7.4.6(react@18.2.0): - resolution: {integrity: sha512-3cyNxI/PwotvYkjg6KmFaN1uyN/7NqETteD2DobBB8ro/FR9jsHIh4Fi7ywAz0s9QHRKCmGlOUggs5GxSWACKA==} + /markdown-to-jsx@7.4.7(react@18.2.0): + resolution: {integrity: sha512-0+ls1IQZdU6cwM1yu0ZjjiVWYtkbExSyUIFU2ZeDIFuZM1W42Mh4OlJ4nb4apX4H8smxDHRdFaoIVJGwfv5hkg==} engines: {node: '>= 10'} peerDependencies: react: '>= 0.14.0' @@ -15578,38 +15567,38 @@ packages: react: 18.2.0 dev: false - /markdownlint-cli2-formatter-default@0.0.4(markdownlint-cli2@0.12.1): + /markdownlint-cli2-formatter-default@0.0.4(markdownlint-cli2@0.13.0): resolution: {integrity: sha512-xm2rM0E+sWgjpPn1EesPXx5hIyrN2ddUnUwnbCsD/ONxYtw3PX6LydvdH6dciWAoFDpwzbHM1TO7uHfcMd6IYg==} peerDependencies: markdownlint-cli2: '>=0.0.4' dependencies: - markdownlint-cli2: 0.12.1 + markdownlint-cli2: 0.13.0 dev: true - /markdownlint-cli2@0.12.1: - resolution: {integrity: sha512-RcK+l5FjJEyrU3REhrThiEUXNK89dLYNJCYbvOUKypxqIGfkcgpz8g08EKqhrmUbYfYoLC5nEYQy53NhJSEtfQ==} + /markdownlint-cli2@0.13.0: + resolution: {integrity: sha512-Pg4nF7HlopU97ZXtrcVISWp3bdsuc5M0zXyLp2/sJv2zEMlInrau0ZKK482fQURzVezJzWBpNmu4u6vGAhij+g==} engines: {node: '>=18'} hasBin: true dependencies: - globby: 14.0.0 - jsonc-parser: 3.2.0 - markdownlint: 0.33.0 - markdownlint-cli2-formatter-default: 0.0.4(markdownlint-cli2@0.12.1) + globby: 14.0.1 + js-yaml: 4.1.0 + jsonc-parser: 3.2.1 + markdownlint: 0.34.0 + markdownlint-cli2-formatter-default: 0.0.4(markdownlint-cli2@0.13.0) micromatch: 4.0.5 - yaml: 2.3.4 dev: true - /markdownlint-micromark@0.1.8: - resolution: {integrity: sha512-1ouYkMRo9/6gou9gObuMDnvZM8jC/ly3QCFQyoSPCS2XV1ZClU0xpKbL1Ar3bWWRT1RnBZkWUEiNKrI2CwiBQA==} - engines: {node: '>=16'} + /markdownlint-micromark@0.1.9: + resolution: {integrity: sha512-5hVs/DzAFa8XqYosbEAEg6ok6MF2smDj89ztn9pKkCtdKHVdPQuGMH7frFfYL9mLkvfFe4pTyAMffLbjf3/EyA==} + engines: {node: '>=18'} dev: true - /markdownlint@0.33.0: - resolution: {integrity: sha512-4lbtT14A3m0LPX1WS/3d1m7Blg+ZwiLq36WvjQqFGsX3Gik99NV+VXp/PW3n+Q62xyPdbvGOCfjPqjW+/SKMig==} + /markdownlint@0.34.0: + resolution: {integrity: sha512-qwGyuyKwjkEMOJ10XN6OTKNOVYvOIi35RNvDLNxTof5s8UmyGHlCdpngRHoRGNvQVGuxO3BJ7uNSgdeX166WXw==} engines: {node: '>=18'} dependencies: - markdown-it: 14.0.0 - markdownlint-micromark: 0.1.8 + markdown-it: 14.1.0 + markdownlint-micromark: 0.1.9 dev: true /marked@5.1.2: @@ -16360,23 +16349,27 @@ packages: - '@babel/core' - babel-plugin-macros - /next@14.1.4(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-1WTaXeSrUwlz/XcnhGTY7+8eiaFvdet5z9u3V2jb+Ek1vFo0VhHKSAIJvDWfQpttWjnyw14kBeq28TPq7bTeEQ==} + /next@14.2.1(@babel/core@7.24.4)(@playwright/test@1.43.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-SF3TJnKdH43PMkCcErLPv+x/DY1YCklslk3ZmwaVoyUfDgHKexuKlf9sEfBQ69w+ue8jQ3msLb+hSj1T19hGag==} engines: {node: '>=18.17.0'} hasBin: true peerDependencies: '@opentelemetry/api': ^1.1.0 + '@playwright/test': ^1.41.2 react: ^18.2.0 react-dom: ^18.2.0 sass: ^1.3.0 peerDependenciesMeta: '@opentelemetry/api': optional: true + '@playwright/test': + optional: true sass: optional: true dependencies: - '@next/env': 14.1.4 - '@swc/helpers': 0.5.2 + '@next/env': 14.2.1 + '@playwright/test': 1.43.1 + '@swc/helpers': 0.5.5 busboy: 1.6.0 caniuse-lite: 1.0.30001599 graceful-fs: 4.2.11 @@ -16385,15 +16378,15 @@ packages: react-dom: 18.2.0(react@18.2.0) styled-jsx: 5.1.1(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react@18.2.0) optionalDependencies: - '@next/swc-darwin-arm64': 14.1.4 - '@next/swc-darwin-x64': 14.1.4 - '@next/swc-linux-arm64-gnu': 14.1.4 - '@next/swc-linux-arm64-musl': 14.1.4 - '@next/swc-linux-x64-gnu': 14.1.4 - '@next/swc-linux-x64-musl': 14.1.4 - '@next/swc-win32-arm64-msvc': 14.1.4 - '@next/swc-win32-ia32-msvc': 14.1.4 - '@next/swc-win32-x64-msvc': 14.1.4 + '@next/swc-darwin-arm64': 14.2.1 + '@next/swc-darwin-x64': 14.2.1 + '@next/swc-linux-arm64-gnu': 14.2.1 + '@next/swc-linux-arm64-musl': 14.2.1 + '@next/swc-linux-x64-gnu': 14.2.1 + '@next/swc-linux-x64-musl': 14.2.1 + '@next/swc-win32-arm64-msvc': 14.2.1 + '@next/swc-win32-ia32-msvc': 14.2.1 + '@next/swc-win32-x64-msvc': 14.2.1 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros @@ -17580,7 +17573,7 @@ packages: /pkg-types@1.0.3: resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==} dependencies: - jsonc-parser: 3.2.0 + jsonc-parser: 3.2.1 mlly: 1.6.1 pathe: 1.1.2 dev: true @@ -17595,17 +17588,17 @@ packages: resolution: {integrity: sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==} dev: false - /playwright-core@1.43.0: - resolution: {integrity: sha512-iWFjyBUH97+pUFiyTqSLd8cDMMOS0r2ZYz2qEsPjH8/bX++sbIJT35MSwKnp1r/OQBAqC5XO99xFbJ9XClhf4w==} + /playwright-core@1.43.1: + resolution: {integrity: sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==} engines: {node: '>=16'} hasBin: true - /playwright@1.43.0: - resolution: {integrity: sha512-SiOKHbVjTSf6wHuGCbqrEyzlm6qvXcv7mENP+OZon1I07brfZLGdfWV0l/efAzVx7TF3Z45ov1gPEkku9q25YQ==} + /playwright@1.43.1: + resolution: {integrity: sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==} engines: {node: '>=16'} hasBin: true dependencies: - playwright-core: 1.43.0 + playwright-core: 1.43.1 optionalDependencies: fsevents: 2.3.2 @@ -17754,7 +17747,7 @@ packages: postcss: ^8.4.21 dependencies: postcss: 8.4.38 - typescript: 5.4.4 + typescript: 5.4.5 dev: true /postcss-value-parser@4.2.0: @@ -18268,19 +18261,19 @@ packages: react: 18.2.0 dev: false - /react-imask@7.5.0(react@18.2.0): - resolution: {integrity: sha512-yWExhHphDmNaHvmOsYR+5QcludeBdYk6bXyo8kouIJFAub5sF+O0kLPVupg2yhd7EfTqjLswFZ/tqY1AhKnd9Q==} + /react-imask@7.6.0(react@18.2.0): + resolution: {integrity: sha512-SilPct67Xw4TN+dqn3SM4BVpy+FwNSeT0wblA/DXQ3El2KPBEWwrn4x3gQ39ZohFAphp7yG7w6gSKq5SeR/6Kg==} engines: {npm: '>=4.0.0'} peerDependencies: react: '>=0.14.0' dependencies: - imask: 7.5.0 + imask: 7.6.0 prop-types: 15.8.1 react: 18.2.0 dev: false - /react-intersection-observer@9.8.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-QzOFdROX8D8MH3wE3OVKH0f3mLjKTtEN1VX/rkNuECCff+aKky0pIjulDhr3Ewqj5el/L+MhBkM3ef0Tbt+qUQ==} + /react-intersection-observer@9.8.2(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-901naEiiZmse3p+AmtbQ3NL9xx+gQ8TXLiGDc+8GiE3JKJkNV3vP737aGuWTAXBA+1QqxPrDDE+fIEgYpGDlrQ==} peerDependencies: react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 @@ -20673,13 +20666,13 @@ packages: resolution: {integrity: sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==} dev: false - /ts-api-utils@1.0.1(typescript@5.4.4): + /ts-api-utils@1.0.1(typescript@5.4.5): resolution: {integrity: sha512-lC/RGlPmwdrIBFTX59wwNzqh7aR2otPNPR/5brHZm/XKFYKsfqxihXUe9pU3JI+3vGkl+vyCoNNnPhJn3aLK1A==} engines: {node: '>=16.13.0'} peerDependencies: typescript: '>=4.2.0' dependencies: - typescript: 5.4.4 + typescript: 5.4.5 dev: true /ts-interface-checker@0.1.13: @@ -20725,7 +20718,7 @@ packages: engines: {node: '>=0.6.x'} dev: false - /tsup@8.0.2(postcss@8.4.38)(typescript@5.4.4): + /tsup@8.0.2(postcss@8.4.38)(typescript@5.4.5): resolution: {integrity: sha512-NY8xtQXdH7hDUAZwcQdY/Vzlw9johQsaqf7iwZ6g1DOUlFYQ5/AtVAjTvihhEyeRlGo4dLRVHtrRaL35M1daqQ==} engines: {node: '>=18'} hasBin: true @@ -20759,7 +20752,7 @@ packages: source-map: 0.8.0-beta.0 sucrase: 3.34.0 tree-kill: 1.2.2 - typescript: 5.4.4 + typescript: 5.4.5 transitivePeerDependencies: - supports-color - ts-node @@ -20917,8 +20910,8 @@ packages: resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==} dev: true - /typescript@5.4.4: - resolution: {integrity: sha512-dGE2Vv8cpVvw28v8HCPqyb08EzbBURxDpuhJvTrusShUfGnhHBafDsLdS1EhhxyL6BJQE+2cT3dDPAv+MQ6oLw==} + /typescript@5.4.5: + resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==} engines: {node: '>=14.17'} hasBin: true @@ -20926,8 +20919,8 @@ packages: resolution: {integrity: sha512-s8ax/CeZdK9R/56Sui0WM6y9OFREJarMRHqLB2EwkovemBxNQ+Bqu8GAsUnVcXKgphb++ghr/B2BZx4mahujPw==} dev: true - /uc.micro@2.0.0: - resolution: {integrity: sha512-DffL94LsNOccVn4hyfRe5rdKa273swqeA5DJpMOeFmEn1wCDc7nAbbB0gXlgBCL7TNzeTv6G7XVWzan7iJtfig==} + /uc.micro@2.1.0: + resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==} dev: true /ufo@1.4.0: @@ -21356,8 +21349,8 @@ packages: engines: {node: '>=12'} dev: false - /webpack-bundle-analyzer@4.10.1: - resolution: {integrity: sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==} + /webpack-bundle-analyzer@4.10.2: + resolution: {integrity: sha512-vJptkMm9pk5si4Bv922ZbKLV8UTT4zib4FPgXMhgzUny0bfDDkLXAVQs3ly3fS4/TN9ROFtb0NFrm04UXFE/Vw==} engines: {node: '>= 10.13.0'} hasBin: true dependencies: @@ -21369,7 +21362,6 @@ packages: escape-string-regexp: 4.0.0 gzip-size: 6.0.0 html-escaper: 2.0.2 - is-plain-object: 5.0.0 opener: 1.5.2 picocolors: 1.0.0 sirv: 2.0.3 @@ -21378,7 +21370,7 @@ packages: - bufferutil - utf-8-validate - /webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.1)(webpack@5.90.3): + /webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.90.3): resolution: {integrity: sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==} engines: {node: '>=14.15.0'} hasBin: true @@ -21402,13 +21394,13 @@ packages: colorette: 2.0.20 commander: 10.0.1 cross-spawn: 7.0.3 - envinfo: 7.11.1 + envinfo: 7.12.0 fastest-levenshtein: 1.0.16 import-local: 3.1.0 interpret: 3.1.1 rechoir: 0.8.0 webpack: 5.90.3(esbuild@0.19.11)(webpack-cli@5.1.4) - webpack-bundle-analyzer: 4.10.1 + webpack-bundle-analyzer: 4.10.2 webpack-merge: 5.9.0 /webpack-merge@4.2.2: @@ -21465,7 +21457,7 @@ packages: tapable: 2.2.1 terser-webpack-plugin: 5.3.10(esbuild@0.19.11)(webpack@5.90.3) watchpack: 2.4.0 - webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.1)(webpack@5.90.3) + webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.90.3) webpack-sources: 3.2.3 transitivePeerDependencies: - '@swc/core' @@ -21811,11 +21803,6 @@ packages: resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==} engines: {node: '>= 6'} - /yaml@2.3.4: - resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==} - engines: {node: '>= 14'} - dev: true - /yaml@2.4.1: resolution: {integrity: sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==} engines: {node: '>= 14'} @@ -21959,7 +21946,7 @@ packages: '@mui/system': link:packages/mui-system/build '@wyw-in-js/processor-utils': 0.5.0 '@wyw-in-js/shared': 0.5.0 - '@wyw-in-js/transform': 0.5.0 + '@wyw-in-js/transform': 0.5.0(patch_hash=zicb4vap2prvslgwedcxhpcmvy) clsx: 2.1.0 cssesc: 3.0.0 csstype: 3.1.3 diff --git a/scripts/build.mjs b/scripts/build.mjs index 711bcf389ae274..3a9f594a72844e 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -8,8 +8,6 @@ import { getWorkspaceRoot } from './utils.mjs'; const exec = promisify(childProcess.exec); const validBundles = [ - // legacy build using ES6 modules - 'legacy', // modern build with a rolling target using ES6 modules 'modern', // build for node using commonJS modules @@ -65,7 +63,6 @@ async function run(argv) { node: topLevelPathImportsCanBePackages ? './node' : './', modern: './modern', stable: topLevelPathImportsCanBePackages ? './' : './esm', - legacy: './legacy', }[bundle], ); diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js index 6a63b053c7ae50..92c97758bc8792 100644 --- a/scripts/sizeSnapshot/webpack.config.js +++ b/scripts/sizeSnapshot/webpack.config.js @@ -136,10 +136,6 @@ async function getWebpackEntries() { // webpack: true, // path: path.join(path.relative(workspaceRoot, materialPackagePath), 'modern/index.js'), // }, - { - id: '@material-ui/core.legacy', - path: path.join(path.relative(workspaceRoot, materialPackagePath), 'legacy/index.js'), - }, { id: '@mui/joy', path: path.join(path.relative(workspaceRoot, joyPackagePath), 'index.js'), diff --git a/test/bundling/fixtures/create-react-app/package.json b/test/bundling/fixtures/create-react-app/package.json index f576760bfb700c..5021833943974f 100644 --- a/test/bundling/fixtures/create-react-app/package.json +++ b/test/bundling/fixtures/create-react-app/package.json @@ -25,7 +25,7 @@ "devDependencies": { "concurrently": "7.4.0", "cross-env": "7.0.3", - "playwright": "1.43.0", + "playwright": "1.43.1", "serve": "14.0.1" }, "browserslist": { diff --git a/test/bundling/fixtures/esbuild/package.json b/test/bundling/fixtures/esbuild/package.json index 78cb20425e6c5b..b81d38d72b3d52 100644 --- a/test/bundling/fixtures/esbuild/package.json +++ b/test/bundling/fixtures/esbuild/package.json @@ -25,7 +25,7 @@ }, "devDependencies": { "concurrently": "7.4.0", - "playwright": "1.43.0", + "playwright": "1.43.1", "serve": "14.0.1" } } diff --git a/test/bundling/fixtures/gatsby/package.json b/test/bundling/fixtures/gatsby/package.json index 26cfb6a4ad426c..b62769250c79ae 100644 --- a/test/bundling/fixtures/gatsby/package.json +++ b/test/bundling/fixtures/gatsby/package.json @@ -23,6 +23,6 @@ }, "devDependencies": { "concurrently": "7.4.0", - "playwright": "1.43.0" + "playwright": "1.43.1" } } diff --git a/test/bundling/fixtures/next-webpack4/package.json b/test/bundling/fixtures/next-webpack4/package.json index e1eed0558d467c..01ceda7fb899d4 100644 --- a/test/bundling/fixtures/next-webpack4/package.json +++ b/test/bundling/fixtures/next-webpack4/package.json @@ -23,6 +23,6 @@ }, "devDependencies": { "concurrently": "7.4.0", - "playwright": "1.43.0" + "playwright": "1.43.1" } } diff --git a/test/bundling/fixtures/next-webpack5/package.json b/test/bundling/fixtures/next-webpack5/package.json index 89418e1e310ef0..04dc0c0ba911ca 100644 --- a/test/bundling/fixtures/next-webpack5/package.json +++ b/test/bundling/fixtures/next-webpack5/package.json @@ -23,6 +23,6 @@ }, "devDependencies": { "concurrently": "7.4.0", - "playwright": "1.43.0" + "playwright": "1.43.1" } } diff --git a/test/bundling/fixtures/snowpack/package.json b/test/bundling/fixtures/snowpack/package.json index d1e54da1e01734..0b03041995afd7 100644 --- a/test/bundling/fixtures/snowpack/package.json +++ b/test/bundling/fixtures/snowpack/package.json @@ -24,7 +24,7 @@ }, "devDependencies": { "concurrently": "7.4.0", - "playwright": "1.43.0", + "playwright": "1.43.1", "serve": "14.0.1" } } diff --git a/test/bundling/fixtures/vite/package.json b/test/bundling/fixtures/vite/package.json index 948d209ed8c5ff..ad3134dab746fe 100644 --- a/test/bundling/fixtures/vite/package.json +++ b/test/bundling/fixtures/vite/package.json @@ -24,7 +24,7 @@ }, "devDependencies": { "concurrently": "7.4.0", - "playwright": "1.43.0", + "playwright": "1.43.1", "serve": "14.0.1" } } diff --git a/test/package.json b/test/package.json index fc2f3b067219b1..125fe85ee08654 100644 --- a/test/package.json +++ b/test/package.json @@ -17,7 +17,7 @@ "@mui/material": "workspace:^", "@mui/system": "workspace:^", "@mui/utils": "workspace:^", - "@playwright/test": "1.43.0", + "@playwright/test": "1.43.1", "@testing-library/dom": "^9.3.4", "@types/chai": "^4.3.14", "@types/react": "^18.2.55", @@ -29,7 +29,7 @@ "fs-extra": "^11.2.0", "html-webpack-plugin": "^5.6.0", "lodash": "^4.17.21", - "playwright": "^1.43.0", + "playwright": "^1.43.1", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0",