From 064fa67058fa16b76216c04da37c360ad304743b Mon Sep 17 00:00:00 2001 From: Rich Snapp Date: Wed, 16 Oct 2024 10:19:05 -0600 Subject: [PATCH 01/45] [material-ui][Autocomplete] Fix bug with child chip button events propagating to parent (#43982) --- .../src/Autocomplete/Autocomplete.js | 6 +- .../src/Autocomplete/Autocomplete.test.js | 76 +++++++++++-------- .../src/useAutocomplete/useAutocomplete.js | 2 - .../TextboxExpandsOnListboxOpen.js | 18 +++++ test/regressions/index.test.js | 14 ++++ 5 files changed, 80 insertions(+), 36 deletions(-) create mode 100644 test/regressions/fixtures/Autocomplete/TextboxExpandsOnListboxOpen.js diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index f165b797e12aa1..f249219d26da5e 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -738,7 +738,11 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { ref: setAnchorEl, className: classes.inputRoot, startAdornment, - onMouseDown: (event) => handleInputMouseDown(event), + onMouseDown: (event) => { + if (event.target === event.currentTarget) { + handleInputMouseDown(event); + } + }, ...((hasClearIcon || hasPopupIcon) && { endAdornment: ( diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js index 506e0decd989c5..97099aa953faee 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js @@ -442,39 +442,6 @@ describe('', () => { expect(getAllByRole('button', { hidden: false })).to.have.lengthOf(5); } }); - - // Test for https://github.com/mui/material-ui/issues/42432 - it('when the input box needs to expand downward, the listbox should remain open.', () => { - const options = [ - 'The Lord of the Rings: The Return of the King', - 'The Good, the Bad and the Ugly', - 'The Shawshank Redemption', - 'Star Wars: Episode V - The Empire Strikes Back', - ]; - const defaultValue = [ - 'The Lord of the Rings: The Return of the King', - 'The Good, the Bad and the Ugly', - 'The Shawshank Redemption', - ]; - - render( - } - sx={{ width: 500 }} - />, - ); - - const textbox = screen.getByRole('combobox'); - - fireEvent.mouseDown(textbox); - - const listbox = screen.getByRole('listbox'); - expect(listbox).toBeVisible(); - }); }); describe('prop: filterSelectedOptions', () => { @@ -892,6 +859,49 @@ describe('', () => { expect(handleSubmit.callCount).to.equal(4); }); + it('should not open the autocomplete popup when deleting chips', async () => { + const { queryByRole, queryByText, user } = render( + } + />, + ); + + expect(queryByRole('listbox')).to.equal(null); + + const chip = queryByText('one').parentElement; + expect(chip).not.to.equal(null); + + // Delete the chip + await user.click(chip.getElementsByClassName(chipClasses.deleteIcon)[0]); + + expect(queryByText('one')).to.equal(null); + expect(queryByRole('listbox')).to.equal(null); + }); + + it('should toggle the autocomplete popup when clicking the popup indicator', async () => { + const { queryByRole, getByRole, user } = render( + } + />, + ); + + expect(queryByRole('listbox')).to.equal(null); + + const popupIndicator = getByRole('button', { name: 'Open' }); + await user.click(popupIndicator); + + expect(queryByRole('listbox')).not.to.equal(null); + + await user.click(popupIndicator); + + expect(queryByRole('listbox')).to.equal(null); + }); + describe('prop: getOptionDisabled', () => { it('should prevent the disabled option to trigger actions but allow focus with disabledItemsFocusable', () => { const handleSubmit = spy(); diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.js b/packages/mui-material/src/useAutocomplete/useAutocomplete.js index 28b161a763a221..35789e85e2917c 100644 --- a/packages/mui-material/src/useAutocomplete/useAutocomplete.js +++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.js @@ -1020,7 +1020,6 @@ function useAutocomplete(props) { const handleInputMouseDown = (event) => { if (!disabledProp && (inputValue === '' || !open)) { handlePopupIndicator(event); - event.stopPropagation(); } }; @@ -1109,7 +1108,6 @@ function useAutocomplete(props) { tabIndex: -1, type: 'button', onClick: handlePopupIndicator, - onMouseDown: (event) => event.stopPropagation(), }), getTagProps: ({ index }) => ({ key: index, diff --git a/test/regressions/fixtures/Autocomplete/TextboxExpandsOnListboxOpen.js b/test/regressions/fixtures/Autocomplete/TextboxExpandsOnListboxOpen.js new file mode 100644 index 00000000000000..d5c43e69c0bc78 --- /dev/null +++ b/test/regressions/fixtures/Autocomplete/TextboxExpandsOnListboxOpen.js @@ -0,0 +1,18 @@ +import * as React from 'react'; +import TextField from '@mui/material/TextField'; +import Autocomplete from '@mui/material/Autocomplete'; + +export default function StandardAutocomplete() { + return ( +
+ } + sx={{ width: 300 }} + /> +
+ ); +} diff --git a/test/regressions/index.test.js b/test/regressions/index.test.js index 4eb8657c904c32..290b89661556b1 100644 --- a/test/regressions/index.test.js +++ b/test/regressions/index.test.js @@ -131,6 +131,20 @@ async function main() { await takeScreenshot({ testcase, route: '/regression-Rating/PreciseFocusVisibleRating3' }); }); }); + + describe('Autocomplete', () => { + it('should not close immediately when textbox expands', async () => { + const testcase = await renderFixture( + '/regression-Autocomplete/TextboxExpandsOnListboxOpen', + ); + await page.getByRole('combobox').click(); + await page.waitForTimeout(10); + await takeScreenshot({ + testcase, + route: '/regression-Autocomplete/TextboxExpandsOnListboxOpen2', + }); + }); + }); }); run(); From 4f0301d5217d0b36dc2f6bcbe09d65dece890e47 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 17 Oct 2024 10:58:31 +0200 Subject: [PATCH 02/45] =?UTF-8?q?[FormControlLabel][docs]=20Don't=20use=20?= =?UTF-8?q?unintuitive=20label=20position=20on=20chec=E2=80=A6=20(#44119)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../checkboxes/FormControlLabelPosition.js | 12 ------------ .../checkboxes/FormControlLabelPosition.tsx | 12 ------------ .../radio-buttons/FormControlLabelPlacement.js | 12 ------------ .../radio-buttons/FormControlLabelPlacement.tsx | 12 ------------ .../components/switches/FormControlLabelPosition.js | 12 ------------ .../components/switches/FormControlLabelPosition.tsx | 12 ------------ 6 files changed, 72 deletions(-) diff --git a/docs/data/material/components/checkboxes/FormControlLabelPosition.js b/docs/data/material/components/checkboxes/FormControlLabelPosition.js index d01816bba2e8d1..c9227af761abc1 100644 --- a/docs/data/material/components/checkboxes/FormControlLabelPosition.js +++ b/docs/data/material/components/checkboxes/FormControlLabelPosition.js @@ -10,18 +10,6 @@ export default function FormControlLabelPosition() { Label placement - } - label="Top" - labelPlacement="top" - /> - } - label="Start" - labelPlacement="start" - /> } diff --git a/docs/data/material/components/checkboxes/FormControlLabelPosition.tsx b/docs/data/material/components/checkboxes/FormControlLabelPosition.tsx index d01816bba2e8d1..c9227af761abc1 100644 --- a/docs/data/material/components/checkboxes/FormControlLabelPosition.tsx +++ b/docs/data/material/components/checkboxes/FormControlLabelPosition.tsx @@ -10,18 +10,6 @@ export default function FormControlLabelPosition() { Label placement - } - label="Top" - labelPlacement="top" - /> - } - label="Start" - labelPlacement="start" - /> } diff --git a/docs/data/material/components/radio-buttons/FormControlLabelPlacement.js b/docs/data/material/components/radio-buttons/FormControlLabelPlacement.js index 52a94b01ac50d8..a4d05c9f5b5af6 100644 --- a/docs/data/material/components/radio-buttons/FormControlLabelPlacement.js +++ b/docs/data/material/components/radio-buttons/FormControlLabelPlacement.js @@ -15,18 +15,6 @@ export default function FormControlLabelPlacement() { name="position" defaultValue="top" > - } - label="Top" - labelPlacement="top" - /> - } - label="Start" - labelPlacement="start" - /> } diff --git a/docs/data/material/components/radio-buttons/FormControlLabelPlacement.tsx b/docs/data/material/components/radio-buttons/FormControlLabelPlacement.tsx index 52a94b01ac50d8..a4d05c9f5b5af6 100644 --- a/docs/data/material/components/radio-buttons/FormControlLabelPlacement.tsx +++ b/docs/data/material/components/radio-buttons/FormControlLabelPlacement.tsx @@ -15,18 +15,6 @@ export default function FormControlLabelPlacement() { name="position" defaultValue="top" > - } - label="Top" - labelPlacement="top" - /> - } - label="Start" - labelPlacement="start" - /> } diff --git a/docs/data/material/components/switches/FormControlLabelPosition.js b/docs/data/material/components/switches/FormControlLabelPosition.js index 6eceb1be2555ae..d9b0354c097255 100644 --- a/docs/data/material/components/switches/FormControlLabelPosition.js +++ b/docs/data/material/components/switches/FormControlLabelPosition.js @@ -10,18 +10,6 @@ export default function FormControlLabelPosition() { Label placement - } - label="Top" - labelPlacement="top" - /> - } - label="Start" - labelPlacement="start" - /> } diff --git a/docs/data/material/components/switches/FormControlLabelPosition.tsx b/docs/data/material/components/switches/FormControlLabelPosition.tsx index 6eceb1be2555ae..d9b0354c097255 100644 --- a/docs/data/material/components/switches/FormControlLabelPosition.tsx +++ b/docs/data/material/components/switches/FormControlLabelPosition.tsx @@ -10,18 +10,6 @@ export default function FormControlLabelPosition() { Label placement - } - label="Top" - labelPlacement="top" - /> - } - label="Start" - labelPlacement="start" - /> } From 708dcecd9e70f8970c7d1851b935d50a5ac94e00 Mon Sep 17 00:00:00 2001 From: ChinoUkaegbu <77782533+ChinoUkaegbu@users.noreply.github.com> Date: Thu, 17 Oct 2024 10:06:09 +0100 Subject: [PATCH 03/45] [docs][TextField] Dynamically modify the eye password button aria-label (#44122) --- .../components/text-fields/InputAdornments.js | 12 +++++++++--- .../components/text-fields/InputAdornments.tsx | 12 +++++++++--- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/docs/data/material/components/text-fields/InputAdornments.js b/docs/data/material/components/text-fields/InputAdornments.js index 4176586ca9e943..6827769521ffae 100644 --- a/docs/data/material/components/text-fields/InputAdornments.js +++ b/docs/data/material/components/text-fields/InputAdornments.js @@ -57,7 +57,9 @@ export default function InputAdornments() { endAdornment={ Date: Thu, 17 Oct 2024 07:59:03 -0700 Subject: [PATCH 04/45] [docs][joy-ui] Update Overview copy to match Readme (#44136) --- docs/data/joy/getting-started/overview/overview.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/data/joy/getting-started/overview/overview.md b/docs/data/joy/getting-started/overview/overview.md index 59e1d0a92102b3..a1a7cb56a2402a 100644 --- a/docs/data/joy/getting-started/overview/overview.md +++ b/docs/data/joy/getting-started/overview/overview.md @@ -4,7 +4,7 @@ title: Overview # Joy UI - Overview -

Joy UI is an open-source React component library that implements MUI's own design principles. It's comprehensive and can be used in production out of the box.

+

Joy UI is an open-source React component library that implements MUI's own design principles.

## Introduction @@ -12,9 +12,9 @@ Joy UI is an open-source React component library that follows a lightly opinion :::warning Joy UI is in beta and _development is currently on hold_. -Read [this blog post](/blog/2023-material-ui-v6-and-beyond/) to learn more. +When starting a new project from scratch, we recommend Material UI over Joy UI because we can guarantee ongoing support. -You're welcome to open new issues and PRs to help improve Joy UI, but please keep in mind that the maintainers are primarily focused on other projects and may not be able to respond in a timely manner. +Keep in mind that the maintainers are primarily focused on other projects and may not be able to respond in a timely manner to issues or pull requests related to Joy UI. ::: ## Why use Joy UI From 6679d01eed664b4949d495e2b0221b99a9fde966 Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Fri, 18 Oct 2024 10:51:00 +0200 Subject: [PATCH 05/45] [code-infra] Fix icon builder tests (#44143) --- package.json | 16 ++++++++-------- .../babel-plugin-minify-errors/package.json | 2 +- packages-internal/scripts/package.json | 2 +- packages/api-docs-builder-core/package.json | 2 +- packages/api-docs-builder/package.json | 2 +- packages/eslint-plugin-material-ui/package.json | 2 +- packages/mui-base/package.json | 2 +- packages/mui-codemod/package.json | 2 +- packages/mui-icons-material/builder.mjs | 2 +- .../expected/AccessAlarms.js | 3 ++- .../expected/AccessAlarmsTwoTone.js | 3 ++- .../expected/Accessibility.js | 3 ++- .../material-design-icons/expected/ElevenMp.js | 3 ++- .../material-design-icons/expected/FiveMp.js | 3 ++- .../expected/QueueMusicOutlined.js | 3 ++- .../expected/RecordVoiceOverTwoTone.js | 3 ++- .../material-design-icons/expected/SixtyFps.js | 3 ++- .../expected/StarRounded.js | 3 ++- .../material-design-icons/expected/ThirtyFps.js | 3 ++- .../expected/TimesOneMobiledata.js | 3 ++- .../expected/TwentyFourMp.js | 3 ++- packages/mui-icons-material/package.json | 2 +- packages/mui-joy/package.json | 2 +- packages/mui-lab/package.json | 2 +- packages/mui-material-nextjs/package.json | 2 +- packages/mui-material-pigment-css/package.json | 2 +- packages/mui-material/package.json | 2 +- packages/mui-private-theming/package.json | 2 +- packages/mui-styled-engine-sc/package.json | 2 +- packages/mui-styled-engine/package.json | 2 +- packages/mui-styles/package.json | 2 +- packages/mui-system/package.json | 2 +- packages/mui-utils/package.json | 2 +- 33 files changed, 52 insertions(+), 40 deletions(-) diff --git a/package.json b/package.json index 6251a3e2da2a96..dffcde3df7d88f 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "jsonlint": "node ./scripts/jsonlint.mjs", "eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0", "eslint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0", - "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables \"docs/**/*.{js,ts,tsx}\" --ignore-path .gitignore", + "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables \"docs/**/*.?(c|m)[jt]s?(x)\" --ignore-path .gitignore", "markdownlint": "markdownlint-cli2 \"**/*.md\"", "valelint": "git ls-files | grep -h \".md$\" | xargs vale --filter='.Level==\"error\"'", "prettier": "pretty-quick --ignore-path .eslintignore --branch master", @@ -87,16 +87,16 @@ "generate-codeowners": "node scripts/generateCodeowners.mjs", "canary:release": "tsx ./scripts/canaryRelease.mts", "nx_test_tc": "node test/cli.js", - "nx_test_coverage_ci": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'packages-internal/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", - "nx_test_coverage_html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=html mocha 'packages/**/*.test.{js,ts,tsx}' 'packages-internal/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", - "nx_test_coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'packages-internal/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", + "nx_test_coverage_ci": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.?(c|m)[jt]s?(x)' 'packages-internal/**/*.test.?(c|m)[jt]s?(x)' 'docs/**/*.test.?(c|m)[jt]s?(x)'", + "nx_test_coverage_html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=html mocha 'packages/**/*.test.?(c|m)[jt]s?(x)' 'packages-internal/**/*.test.?(c|m)[jt]s?(x)' 'docs/**/*.test.?(c|m)[jt]s?(x)'", + "nx_test_coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.?(c|m)[jt]s?(x)' 'packages-internal/**/*.test.?(c|m)[jt]s?(x)' 'docs/**/*.test.?(c|m)[jt]s?(x)'", "nx_test_e2e_build": "webpack --config test/e2e/webpack.config.js", - "nx_test_e2e_run": "mocha --config test/e2e/.mocharc.js 'test/e2e/**/*.test.{js,ts,tsx}'", + "nx_test_e2e_run": "mocha --config test/e2e/.mocharc.js 'test/e2e/**/*.test.?(c|m)[jt]s?(x)'", "nx_test_karma_profile": "cross-env NODE_ENV=test karma start test/karma.conf.profile.js", "nx_test_karma": "cross-env NODE_ENV=test karma start test/karma.conf.js", "nx_test_regressions_run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'", "nx_test_regressions_pigment_css_run": "mocha --config apps/pigment-css-vite-app/.mocharc.cjs --delay 'apps/pigment-css-vite-app/**/*.test.js'", - "nx_test_unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'packages-internal/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'" + "nx_test_unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.?(c|m)[jt]s?(x)' 'packages-internal/**/*.test.?(c|m)[jt]s?(x)' 'docs/**/*.test.?(c|m)[jt]s?(x)'" }, "dependencies": { "@googleapis/sheets": "^9.3.1", @@ -225,10 +225,10 @@ }, "nyc": { "include": [ - "packages/mui*/src/**/*.{js,ts,tsx}" + "packages/mui*/src/**/*.?(c|m)[jt]s?(x)" ], "exclude": [ - "**/*.test.{js,ts,tsx}", + "**/*.test.?(c|m)[jt]s?(x)", "**/*.test/*" ], "sourceMap": false, diff --git a/packages-internal/babel-plugin-minify-errors/package.json b/packages-internal/babel-plugin-minify-errors/package.json index 266da5629c3512..66dd6758c4b191 100644 --- a/packages-internal/babel-plugin-minify-errors/package.json +++ b/packages-internal/babel-plugin-minify-errors/package.json @@ -17,7 +17,7 @@ "url": "https://opencollective.com/mui-org" }, "scripts": { - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages-internal/babel-plugin-minify-errors/**/*.test.{js,ts,tsx}'" + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages-internal/babel-plugin-minify-errors/**/*.test.?(c|m)[jt]s?(x)'" }, "dependencies": { "@babel/helper-module-imports": "^7.25.7" diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json index 635ab44e2182ba..70185303e358f2 100644 --- a/packages-internal/scripts/package.json +++ b/packages-internal/scripts/package.json @@ -21,7 +21,7 @@ "build": "tsc --build tsconfig.json", "release:publish": "pnpm build && pnpm publish --tag latest", "release:publish:dry-run": "pnpm build && pnpm publish --tag latest --registry=\"http://localhost:4873/\"", - "test": "cd ../../ && cross-env NODE_ENV=test mocha --config packages-internal/scripts/typescript-to-proptypes/test/.mocharc.js 'packages-internal/scripts/typescript-to-proptypes/**/*.test.ts'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha --config packages-internal/scripts/typescript-to-proptypes/test/.mocharc.js 'packages-internal/scripts/typescript-to-proptypes/**/*.test.?(c|m)[jt]s?(x)'", "typescript": "tsc --build tsconfig.typecheck.json" }, "dependencies": { diff --git a/packages/api-docs-builder-core/package.json b/packages/api-docs-builder-core/package.json index 565c441b7f92da..efa01e9d607962 100644 --- a/packages/api-docs-builder-core/package.json +++ b/packages/api-docs-builder-core/package.json @@ -5,7 +5,7 @@ "private": "true", "main": "./index.ts", "scripts": { - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/api-docs-builder/**/*.test.{js,ts,tsx}'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/api-docs-builder/**/*.test.?(c|m)[jt]s?(x)'", "typescript": "tsc -p tsconfig.json" }, "dependencies": { diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json index 54a489f56c60be..fe097f1cb5ed8a 100644 --- a/packages/api-docs-builder/package.json +++ b/packages/api-docs-builder/package.json @@ -4,7 +4,7 @@ "private": "true", "main": "./index.ts", "scripts": { - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/api-docs-builder/**/*.test.{js,ts,tsx}'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/api-docs-builder/**/*.test.?(c|m)[jt]s?(x)'", "typescript": "tsc -p tsconfig.json" }, "dependencies": { diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json index 666c0e1773cc0a..258c5bf6d7c9dc 100644 --- a/packages/eslint-plugin-material-ui/package.json +++ b/packages/eslint-plugin-material-ui/package.json @@ -16,7 +16,7 @@ "eslint": "^8.47.0" }, "scripts": { - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/eslint-plugin-material-ui/**/*.test.js'" + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/eslint-plugin-material-ui/**/*.test.?(c|m)[jt]s?(x)'" }, "repository": { "type": "git", diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 0c8ebbaca68963..86e231ef8e638a 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -35,7 +35,7 @@ "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo", "release": "pnpm build && pnpm publish", - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-base/**/*.test.{js,ts,tsx}'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-base/**/*.test.?(c|m)[jt]s?(x)'", "typescript": "tsc -p tsconfig.json", "typescript:module-augmentation": "node scripts/testModuleAugmentation.js" }, diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json index ec688c03ccdb0b..f77d6494c514d2 100644 --- a/packages/mui-codemod/package.json +++ b/packages/mui-codemod/package.json @@ -13,7 +13,7 @@ "jscodeshift" ], "scripts": { - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-codemod/**/*.test.js'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-codemod/**/*.test.?(c|m)[jt]s?(x)'", "prebuild": "rimraf build", "build": "node ../../scripts/build.mjs node --out-dir ./build && cpy README.md build && cpy package.json build && cpy codemod.js build", "release": "pnpm build && pnpm publish" diff --git a/packages/mui-icons-material/builder.mjs b/packages/mui-icons-material/builder.mjs index 56b8e003e76248..6b867181e86693 100755 --- a/packages/mui-icons-material/builder.mjs +++ b/packages/mui-icons-material/builder.mjs @@ -245,7 +245,7 @@ export async function handler(options) { renameFilter = renameFilterModule.default; } if (typeof renameFilter !== 'function') { - throw Error('renameFilter must be a function'); + throw new Error('renameFilter must be a function'); } await fse.ensureDir(options.outputDir); diff --git a/packages/mui-icons-material/fixtures/material-design-icons/expected/AccessAlarms.js b/packages/mui-icons-material/fixtures/material-design-icons/expected/AccessAlarms.js index c84c6bdd2f9115..1229503f132bf2 100644 --- a/packages/mui-icons-material/fixtures/material-design-icons/expected/AccessAlarms.js +++ b/packages/mui-icons-material/fixtures/material-design-icons/expected/AccessAlarms.js @@ -1,5 +1,6 @@ +"use client"; import createSvgIcon from './utils/createSvgIcon'; export default createSvgIcon( - + , 'AccessAlarms'); diff --git a/packages/mui-icons-material/fixtures/material-design-icons/expected/AccessAlarmsTwoTone.js b/packages/mui-icons-material/fixtures/material-design-icons/expected/AccessAlarmsTwoTone.js index f67dcb665fb58e..4d2e6b40dbcb91 100644 --- a/packages/mui-icons-material/fixtures/material-design-icons/expected/AccessAlarmsTwoTone.js +++ b/packages/mui-icons-material/fixtures/material-design-icons/expected/AccessAlarmsTwoTone.js @@ -1,5 +1,6 @@ +"use client"; import createSvgIcon from './utils/createSvgIcon'; export default createSvgIcon( - [,,] + [,,] , 'AccessAlarmsTwoTone'); diff --git a/packages/mui-icons-material/fixtures/material-design-icons/expected/Accessibility.js b/packages/mui-icons-material/fixtures/material-design-icons/expected/Accessibility.js index 829835c74b3b03..aebbcd4be9a370 100644 --- a/packages/mui-icons-material/fixtures/material-design-icons/expected/Accessibility.js +++ b/packages/mui-icons-material/fixtures/material-design-icons/expected/Accessibility.js @@ -1,5 +1,6 @@ +"use client"; import createSvgIcon from './utils/createSvgIcon'; export default createSvgIcon( - + , 'Accessibility'); diff --git a/packages/mui-icons-material/fixtures/material-design-icons/expected/ElevenMp.js b/packages/mui-icons-material/fixtures/material-design-icons/expected/ElevenMp.js index 0571ae9e641392..2a92b68dbc5c06 100644 --- a/packages/mui-icons-material/fixtures/material-design-icons/expected/ElevenMp.js +++ b/packages/mui-icons-material/fixtures/material-design-icons/expected/ElevenMp.js @@ -1,5 +1,6 @@ +"use client"; import createSvgIcon from './utils/createSvgIcon'; export default createSvgIcon( - + , 'ElevenMp'); diff --git a/packages/mui-icons-material/fixtures/material-design-icons/expected/FiveMp.js b/packages/mui-icons-material/fixtures/material-design-icons/expected/FiveMp.js index ff78a83211f628..da9681acad2843 100644 --- a/packages/mui-icons-material/fixtures/material-design-icons/expected/FiveMp.js +++ b/packages/mui-icons-material/fixtures/material-design-icons/expected/FiveMp.js @@ -1,5 +1,6 @@ +"use client"; import createSvgIcon from './utils/createSvgIcon'; export default createSvgIcon( - + , 'FiveMp'); diff --git a/packages/mui-icons-material/fixtures/material-design-icons/expected/QueueMusicOutlined.js b/packages/mui-icons-material/fixtures/material-design-icons/expected/QueueMusicOutlined.js index efa2e958ef8d93..fb2f33a377ced2 100644 --- a/packages/mui-icons-material/fixtures/material-design-icons/expected/QueueMusicOutlined.js +++ b/packages/mui-icons-material/fixtures/material-design-icons/expected/QueueMusicOutlined.js @@ -1,5 +1,6 @@ +"use client"; import createSvgIcon from './utils/createSvgIcon'; export default createSvgIcon( - + , 'QueueMusicOutlined'); diff --git a/packages/mui-icons-material/fixtures/material-design-icons/expected/RecordVoiceOverTwoTone.js b/packages/mui-icons-material/fixtures/material-design-icons/expected/RecordVoiceOverTwoTone.js index 26496474e670b5..1e70ec66a213cd 100644 --- a/packages/mui-icons-material/fixtures/material-design-icons/expected/RecordVoiceOverTwoTone.js +++ b/packages/mui-icons-material/fixtures/material-design-icons/expected/RecordVoiceOverTwoTone.js @@ -1,5 +1,6 @@ +"use client"; import createSvgIcon from './utils/createSvgIcon'; export default createSvgIcon( - [,,] + [,,] , 'RecordVoiceOverTwoTone'); diff --git a/packages/mui-icons-material/fixtures/material-design-icons/expected/SixtyFps.js b/packages/mui-icons-material/fixtures/material-design-icons/expected/SixtyFps.js index c1fff3a3928f2e..9216addca48748 100644 --- a/packages/mui-icons-material/fixtures/material-design-icons/expected/SixtyFps.js +++ b/packages/mui-icons-material/fixtures/material-design-icons/expected/SixtyFps.js @@ -1,5 +1,6 @@ +"use client"; import createSvgIcon from './utils/createSvgIcon'; export default createSvgIcon( - + , 'SixtyFps'); diff --git a/packages/mui-icons-material/fixtures/material-design-icons/expected/StarRounded.js b/packages/mui-icons-material/fixtures/material-design-icons/expected/StarRounded.js index e3382cfacf67df..e51380b4f00ddc 100644 --- a/packages/mui-icons-material/fixtures/material-design-icons/expected/StarRounded.js +++ b/packages/mui-icons-material/fixtures/material-design-icons/expected/StarRounded.js @@ -1,5 +1,6 @@ +"use client"; import createSvgIcon from './utils/createSvgIcon'; export default createSvgIcon( - + , 'StarRounded'); diff --git a/packages/mui-icons-material/fixtures/material-design-icons/expected/ThirtyFps.js b/packages/mui-icons-material/fixtures/material-design-icons/expected/ThirtyFps.js index 219f411560c1fc..c2cb7901a9f28b 100644 --- a/packages/mui-icons-material/fixtures/material-design-icons/expected/ThirtyFps.js +++ b/packages/mui-icons-material/fixtures/material-design-icons/expected/ThirtyFps.js @@ -1,5 +1,6 @@ +"use client"; import createSvgIcon from './utils/createSvgIcon'; export default createSvgIcon( - + , 'ThirtyFps'); diff --git a/packages/mui-icons-material/fixtures/material-design-icons/expected/TimesOneMobiledata.js b/packages/mui-icons-material/fixtures/material-design-icons/expected/TimesOneMobiledata.js index 37e6edceb9a0f7..e7dfb4a67aff2c 100644 --- a/packages/mui-icons-material/fixtures/material-design-icons/expected/TimesOneMobiledata.js +++ b/packages/mui-icons-material/fixtures/material-design-icons/expected/TimesOneMobiledata.js @@ -1,5 +1,6 @@ +"use client"; import createSvgIcon from './utils/createSvgIcon'; export default createSvgIcon( - + , 'TimesOneMobiledata'); diff --git a/packages/mui-icons-material/fixtures/material-design-icons/expected/TwentyFourMp.js b/packages/mui-icons-material/fixtures/material-design-icons/expected/TwentyFourMp.js index 26e2aa522bebbf..e3c60559e17d44 100644 --- a/packages/mui-icons-material/fixtures/material-design-icons/expected/TwentyFourMp.js +++ b/packages/mui-icons-material/fixtures/material-design-icons/expected/TwentyFourMp.js @@ -1,5 +1,6 @@ +"use client"; import createSvgIcon from './utils/createSvgIcon'; export default createSvgIcon( - + , 'TwentyFourMp'); diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json index a4121a6abe8bef..cbd92790c6aa05 100644 --- a/packages/mui-icons-material/package.json +++ b/packages/mui-icons-material/package.json @@ -40,7 +40,7 @@ "release": "pnpm build && pnpm publish", "src:download": "node ./scripts/download.mjs", "src:icons": "cross-env UV_THREADPOOL_SIZE=64 node ./builder.mjs --output-dir src --svg-dir material-icons --renameFilter ./renameFilters/material-design-icons.mjs && pnpm build:lib:clean", - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-icons-material/**/*.test.{mjs,js,ts,tsx}'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-icons-material/**/*.test.?(c|m)[jt]s?(x)'", "test:built-typings": "tsc -p test/generated-types/tsconfig.json", "typescript": "tsc -p tsconfig.json" }, diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json index aa627d2063490d..9b233ab017068a 100644 --- a/packages/mui-joy/package.json +++ b/packages/mui-joy/package.json @@ -33,7 +33,7 @@ "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo", "release": "pnpm build && pnpm publish", - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-joy/**/*.test.{js,ts,tsx}'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-joy/**/*.test.?(c|m)[jt]s?(x)'", "typescript": "tsc -p tsconfig.json", "typescript:module-augmentation": "node scripts/testModuleAugmentation.js" }, diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json index 49a54513e91865..01aa8aa8998f6f 100644 --- a/packages/mui-lab/package.json +++ b/packages/mui-lab/package.json @@ -36,7 +36,7 @@ "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo", "release": "pnpm build && pnpm publish", - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-lab/**/*.test.{js,ts,tsx}'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-lab/**/*.test.?(c|m)[jt]s?(x)'", "typescript": "tsc -p tsconfig.json" }, "dependencies": { diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json index cac269b20362cf..1d267375354208 100644 --- a/packages/mui-material-nextjs/package.json +++ b/packages/mui-material-nextjs/package.json @@ -32,7 +32,7 @@ "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo", "release": "pnpm build && pnpm publish", - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-material-nextjs/**/*.test.{js,ts,tsx}'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-material-nextjs/**/*.test.?(c|m)[jt]s?(x)'", "typescript": "tsc -p tsconfig.json" }, "dependencies": { diff --git a/packages/mui-material-pigment-css/package.json b/packages/mui-material-pigment-css/package.json index abc51abb64bd96..199906ef9152a5 100644 --- a/packages/mui-material-pigment-css/package.json +++ b/packages/mui-material-pigment-css/package.json @@ -34,7 +34,7 @@ "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo", "release": "pnpm build && pnpm publish", - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-material/**/*.test.{js,ts,tsx}'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-material/**/*.test.?(c|m)[jt]s?(x)'", "typescript": "tsc -p tsconfig.json", "typescript:module-augmentation": "node scripts/testModuleAugmentation.js" }, diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index d9255cbeee46be..5281cca04fe47a 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -35,7 +35,7 @@ "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo", "release": "pnpm build && pnpm publish", - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-material/**/*.test.{js,ts,tsx}'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-material/**/*.test.?(c|m)[jt]s?(x)'", "typescript": "tsc -p tsconfig.json", "typescript:module-augmentation": "node scripts/testModuleAugmentation.js" }, diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json index 2553d1cbe05422..4dbeac187db4b1 100644 --- a/packages/mui-private-theming/package.json +++ b/packages/mui-private-theming/package.json @@ -33,7 +33,7 @@ "build:copy-files": "node ../../scripts/copyFiles.mjs", "prebuild": "rimraf build", "release": "pnpm build && pnpm publish", - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-private-theming/**/*.test.{js,ts,tsx}'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-private-theming/**/*.test.?(c|m)[jt]s?(x)'", "typescript": "tsc -p tsconfig.json" }, "dependencies": { diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json index 3708e6b4150638..3ac200fd057d63 100644 --- a/packages/mui-styled-engine-sc/package.json +++ b/packages/mui-styled-engine-sc/package.json @@ -33,7 +33,7 @@ "build:copy-files": "node ../../scripts/copyFiles.mjs", "prebuild": "rimraf build", "release": "pnpm build && pnpm publish", - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-styled-engine-sc/**/*.test.{js,ts,tsx}'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-styled-engine-sc/**/*.test.?(c|m)[jt]s?(x)'", "typescript": "tsc -p tsconfig.json" }, "dependencies": { diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json index 29b18a2532e4bd..877094858ebcc1 100644 --- a/packages/mui-styled-engine/package.json +++ b/packages/mui-styled-engine/package.json @@ -33,7 +33,7 @@ "build:copy-files": "node ../../scripts/copyFiles.mjs", "prebuild": "rimraf build", "release": "pnpm build && pnpm publish", - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-styled-engine/**/*.test.{js,ts,tsx}'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-styled-engine/**/*.test.?(c|m)[jt]s?(x)'", "typescript": "tsc -p tsconfig.json" }, "dependencies": { diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json index 9210eba1fc773c..8f400072e8b642 100644 --- a/packages/mui-styles/package.json +++ b/packages/mui-styles/package.json @@ -33,7 +33,7 @@ "build:copy-files": "node ../../scripts/copyFiles.mjs", "prebuild": "rimraf build", "release": "pnpm build && pnpm publish", - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-styles/**/*.test.{js,ts,tsx}'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-styles/**/*.test.?(c|m)[jt]s?(x)'", "typescript": "tsc -p tsconfig.json" }, "dependencies": { diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json index 599c920c8a50c2..2edf581348a93b 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -34,7 +34,7 @@ "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo", "release": "pnpm build && pnpm publish", - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-system/**/*.test.{js,ts,tsx}'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-system/**/*.test.?(c|m)[jt]s?(x)'", "typescript": "tsc -p tsconfig.json", "typescript:module-augmentation": "node scripts/testModuleAugmentation.js" }, diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json index 83a43a96cd6971..20b9711c228cc0 100644 --- a/packages/mui-utils/package.json +++ b/packages/mui-utils/package.json @@ -34,7 +34,7 @@ "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo", "release": "pnpm build && pnpm publish", - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-utils/**/*.test.{js,ts,tsx}'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-utils/**/*.test.?(c|m)[jt]s?(x)'", "typescript": "tsc -p tsconfig.json" }, "dependencies": { From a7b7d9c2ff6b675cb535f107bb0e148b85f6b9dc Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 21 Oct 2024 01:10:36 +0200 Subject: [PATCH 06/45] [docs] Update Figma link to fix 301 --- .../material-ui-for-figma/material-ui-for-figma.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index a3f1f948fcf60e..b3b1f46a050edc 100644 --- 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 @@ -109,7 +109,7 @@ With Anima, you can effortlessly transform your Figma designs into Material UI Anima intelligently matches your design components in Figma to the most relevant code API, ensuring that the code generated is clean, reusable, and production-ready. Anima supports both Figma and VS Code, so you can choose the workflow that suits you best. -- Use the [Anima Figma Plugin](https://www.figma.com/community/plugin/857346721138427857/anima-figma-to-code-react-html-vue-css-tailwind-devmode-inspect-react-html-vue-css) to convert your designs directly in Figma. +- Use the [Anima Figma Plugin](https://www.figma.com/community/plugin/857346721138427857/anima-figma-to-code-react-html-css-tailwind-mui-devmode-inspect-react-html-vue-css) to convert your designs directly in Figma. - Use the [Anima VS Code Extension (Frontier)](https://marketplace.visualstudio.com/items?itemName=AnimaApp.vscode-anima) to seamlessly generate and edit Material UI code in your development environment. Visit [Anima](https://www.animaapp.com/) for more details. From 91d0d916be8536ba5e706da918bddc98d2d791d7 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Mon, 21 Oct 2024 09:07:20 +0700 Subject: [PATCH 07/45] [docs] Add CodeSandbox/Stackblitz to the rest of the templates (#43708) --- .../getting-started/templates/blog/Blog.js | 69 +- .../getting-started/templates/blog/Blog.tsx | 69 +- .../getting-started/templates/blog/README.md | 2 +- .../templates/blog/TemplateFrame.js | 113 --- .../templates/blog/TemplateFrame.tsx | 115 --- .../templates/blog/components/AppAppBar.js | 37 +- .../templates/blog/components/AppAppBar.tsx | 37 +- .../templates/blog/components/Latest.js | 2 +- .../templates/blog/components/Latest.tsx | 2 +- .../templates/blog/components/MainContent.js | 4 +- .../templates/blog/components/MainContent.tsx | 4 +- .../blog/components/ToggleColorMode.js | 31 - .../blog/components/ToggleColorMode.tsx | 32 - .../blog/theme/customizations/dataDisplay.js | 233 ------ .../blog/theme/customizations/dataDisplay.tsx | 233 ------ .../blog/theme/customizations/feedback.js | 46 -- .../blog/theme/customizations/feedback.tsx | 46 -- .../blog/theme/customizations/index.js | 5 - .../blog/theme/customizations/index.ts | 5 - .../blog/theme/customizations/inputs.js | 444 ----------- .../blog/theme/customizations/inputs.tsx | 445 ----------- .../blog/theme/customizations/navigation.js | 278 ------- .../blog/theme/customizations/navigation.tsx | 279 ------- .../blog/theme/customizations/surfaces.js | 113 --- .../blog/theme/customizations/surfaces.ts | 113 --- .../templates/blog/theme/getBlogTheme.js | 21 - .../templates/blog/theme/getBlogTheme.tsx | 23 - .../templates/blog/theme/themePrimitives.js | 216 ------ .../templates/blog/theme/themePrimitives.ts | 235 ------ .../templates/checkout/Checkout.js | 405 +++++----- .../templates/checkout/Checkout.tsx | 404 +++++----- .../templates/checkout/README.md | 2 +- .../templates/checkout/TemplateFrame.js | 113 --- .../templates/checkout/TemplateFrame.tsx | 115 --- .../checkout/components/InfoMobile.js | 13 +- .../checkout/components/InfoMobile.tsx | 13 +- .../checkout/components/PaymentForm.js | 8 +- .../checkout/components/PaymentForm.tsx | 8 +- .../checkout/components/ToggleColorMode.js | 32 - .../checkout/components/ToggleColorMode.tsx | 34 - .../theme/customizations/dataDisplay.js | 233 ------ .../theme/customizations/dataDisplay.tsx | 233 ------ .../checkout/theme/customizations/feedback.js | 46 -- .../theme/customizations/feedback.tsx | 46 -- .../checkout/theme/customizations/index.js | 5 - .../checkout/theme/customizations/index.ts | 5 - .../checkout/theme/customizations/inputs.js | 444 ----------- .../checkout/theme/customizations/inputs.tsx | 445 ----------- .../theme/customizations/navigation.js | 278 ------- .../theme/customizations/navigation.tsx | 279 ------- .../checkout/theme/customizations/surfaces.js | 113 --- .../checkout/theme/customizations/surfaces.ts | 113 --- .../checkout/theme/getCheckoutTheme.js | 21 - .../checkout/theme/getCheckoutTheme.tsx | 23 - .../checkout/theme/themePrimitives.js | 216 ------ .../checkout/theme/themePrimitives.ts | 235 ------ .../templates/dashboard/README.md | 2 +- .../dashboard/components/AppNavbar.js | 10 +- .../dashboard/components/AppNavbar.tsx | 10 +- .../dashboard/components/MainGrid.js | 6 +- .../dashboard/components/MainGrid.tsx | 6 +- .../dashboard/components/SideMenuMobile.js | 1 + .../dashboard/components/SideMenuMobile.tsx | 1 + .../dashboard/components/ToggleColorMode.js | 30 - .../dashboard/components/ToggleColorMode.tsx | 31 - .../templates/marketing-page/MarketingPage.js | 81 +- .../marketing-page/MarketingPage.tsx | 81 +- .../templates/marketing-page/README.md | 2 +- .../templates/marketing-page/TemplateFrame.js | 113 --- .../marketing-page/TemplateFrame.tsx | 115 --- .../marketing-page/components/AppAppBar.js | 38 +- .../marketing-page/components/AppAppBar.tsx | 38 +- .../marketing-page/components/Features.js | 18 +- .../marketing-page/components/Features.tsx | 18 +- .../marketing-page/components/Hero.js | 10 +- .../marketing-page/components/Hero.tsx | 10 +- .../components/ToggleColorMode.js | 32 - .../components/ToggleColorMode.tsx | 33 - .../theme/customizations/dataDisplay.js | 233 ------ .../theme/customizations/dataDisplay.tsx | 233 ------ .../theme/customizations/feedback.js | 46 -- .../theme/customizations/feedback.tsx | 46 -- .../theme/customizations/index.js | 5 - .../theme/customizations/index.ts | 5 - .../theme/customizations/inputs.js | 444 ----------- .../theme/customizations/inputs.tsx | 445 ----------- .../theme/customizations/navigation.js | 278 ------- .../theme/customizations/navigation.tsx | 279 ------- .../theme/customizations/surfaces.js | 113 --- .../theme/customizations/surfaces.ts | 113 --- .../marketing-page/theme/getMPTheme.js | 21 - .../marketing-page/theme/getMPTheme.tsx | 23 - .../marketing-page/theme/themePrimitives.js | 216 ------ .../marketing-page/theme/themePrimitives.ts | 235 ------ .../shared-theme/ColorModeIconDropdown.js | 7 +- .../shared-theme/ColorModeIconDropdown.tsx | 9 +- .../templates/shared-theme/themePrimitives.js | 6 +- .../templates/shared-theme/themePrimitives.ts | 6 +- .../templates/sign-in-side/ForgotPassword.js | 1 + .../templates/sign-in-side/ForgotPassword.tsx | 1 + .../templates/sign-in-side/README.md | 2 +- .../templates/sign-in-side/SignInSide.js | 97 +-- .../templates/sign-in-side/SignInSide.tsx | 97 +-- .../templates/sign-in-side/TemplateFrame.js | 113 --- .../templates/sign-in-side/TemplateFrame.tsx | 115 --- .../templates/sign-in-side/ToggleColorMode.js | 32 - .../sign-in-side/ToggleColorMode.tsx | 34 - .../theme/customizations/dataDisplay.js | 233 ------ .../theme/customizations/dataDisplay.tsx | 233 ------ .../theme/customizations/feedback.js | 46 -- .../theme/customizations/feedback.tsx | 46 -- .../theme/customizations/index.js | 5 - .../theme/customizations/index.ts | 5 - .../theme/customizations/inputs.js | 444 ----------- .../theme/customizations/inputs.tsx | 445 ----------- .../theme/customizations/navigation.js | 278 ------- .../theme/customizations/navigation.tsx | 279 ------- .../theme/customizations/surfaces.js | 113 --- .../theme/customizations/surfaces.ts | 113 --- .../sign-in-side/theme/getSignInSideTheme.js | 21 - .../sign-in-side/theme/getSignInSideTheme.tsx | 23 - .../sign-in-side/theme/themePrimitives.js | 216 ------ .../sign-in-side/theme/themePrimitives.ts | 235 ------ .../templates/sign-in/ForgotPassword.js | 1 + .../templates/sign-in/ForgotPassword.tsx | 1 + .../templates/sign-in/README.md | 2 +- .../templates/sign-in/SignIn.js | 1 + .../templates/sign-in/SignIn.tsx | 1 + .../templates/sign-up/README.md | 2 +- .../templates/sign-up/SignUp.js | 280 +++---- .../templates/sign-up/SignUp.tsx | 285 +++---- .../templates/sign-up/TemplateFrame.js | 113 --- .../templates/sign-up/TemplateFrame.tsx | 115 --- .../templates/sign-up/ToggleColorMode.js | 32 - .../templates/sign-up/ToggleColorMode.tsx | 34 - .../templates/sign-up/getSignUpTheme.js | 703 ----------------- .../templates/sign-up/getSignUpTheme.tsx | 720 ------------------ .../theme/customizations/dataDisplay.js | 233 ------ .../theme/customizations/dataDisplay.tsx | 233 ------ .../sign-up/theme/customizations/feedback.js | 46 -- .../sign-up/theme/customizations/feedback.tsx | 46 -- .../sign-up/theme/customizations/index.js | 5 - .../sign-up/theme/customizations/index.ts | 5 - .../sign-up/theme/customizations/inputs.js | 444 ----------- .../sign-up/theme/customizations/inputs.tsx | 445 ----------- .../theme/customizations/navigation.js | 278 ------- .../theme/customizations/navigation.tsx | 279 ------- .../sign-up/theme/customizations/surfaces.js | 113 --- .../sign-up/theme/customizations/surfaces.ts | 113 --- .../templates/sign-up/theme/getSignUpTheme.js | 21 - .../sign-up/theme/getSignUpTheme.tsx | 23 - .../sign-up/theme/themePrimitives.js | 216 ------ .../sign-up/theme/themePrimitives.ts | 235 ------ docs/nextConfigDocsInfra.js | 2 + .../website/branding-theme-test.tsx | 3 +- .../getting-started/templates/blog.js | 5 +- .../getting-started/templates/checkout.js | 5 +- .../templates/marketing-page.js | 5 +- .../getting-started/templates/sign-in-side.js | 5 +- .../getting-started/templates/sign-up.js | 5 +- .../getting-started/templates/blog-dark.jpg | Bin 184611 -> 158952 bytes .../getting-started/templates/blog.jpg | Bin 183906 -> 157584 bytes .../templates/checkout-dark.jpg | Bin 53234 -> 50852 bytes .../getting-started/templates/checkout.jpg | Bin 53947 -> 51869 bytes .../templates/dashboard-dark.jpg | Bin 165633 -> 161320 bytes .../getting-started/templates/dashboard.jpg | Bin 166351 -> 162463 bytes .../templates/marketing-page-dark.jpg | Bin 115544 -> 115289 bytes .../templates/marketing-page.jpg | Bin 113015 -> 114042 bytes .../templates/sign-in-dark.jpg | Bin 36743 -> 36728 bytes .../templates/sign-in-side-dark.jpg | Bin 64992 -> 62903 bytes .../templates/sign-in-side.jpg | Bin 66223 -> 64582 bytes .../getting-started/templates/sign-in.jpg | Bin 36218 -> 36333 bytes .../templates/sign-up-dark.jpg | Bin 40487 -> 38381 bytes .../getting-started/templates/sign-up.jpg | Bin 40058 -> 38239 bytes docs/scripts/updateTemplatesTheme.ts | 55 -- docs/src/modules/components/TemplateFrame.js | 27 +- package.json | 1 - 177 files changed, 1070 insertions(+), 17878 deletions(-) delete mode 100644 docs/data/material/getting-started/templates/blog/TemplateFrame.js delete mode 100644 docs/data/material/getting-started/templates/blog/TemplateFrame.tsx delete mode 100644 docs/data/material/getting-started/templates/blog/components/ToggleColorMode.js delete mode 100644 docs/data/material/getting-started/templates/blog/components/ToggleColorMode.tsx delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/dataDisplay.js delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/dataDisplay.tsx delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/feedback.js delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/feedback.tsx delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/index.js delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/index.ts delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/inputs.js delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/inputs.tsx delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/navigation.js delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/navigation.tsx delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/surfaces.js delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/surfaces.ts delete mode 100644 docs/data/material/getting-started/templates/blog/theme/getBlogTheme.js delete mode 100644 docs/data/material/getting-started/templates/blog/theme/getBlogTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/blog/theme/themePrimitives.js delete mode 100644 docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts delete mode 100644 docs/data/material/getting-started/templates/checkout/TemplateFrame.js delete mode 100644 docs/data/material/getting-started/templates/checkout/TemplateFrame.tsx delete mode 100644 docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.js delete mode 100644 docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.tsx delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.js delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.tsx delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.js delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.tsx delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/index.js delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/index.ts delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.js delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.tsx delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.js delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.tsx delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.js delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.ts delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.js delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts delete mode 100644 docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js delete mode 100644 docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx delete mode 100644 docs/data/material/getting-started/templates/marketing-page/TemplateFrame.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/TemplateFrame.tsx delete mode 100644 docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.tsx delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.tsx delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.tsx delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.ts delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.tsx delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.tsx delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.ts delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.ts delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.ts delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts delete mode 100644 docs/data/material/getting-started/templates/sign-up/TemplateFrame.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/TemplateFrame.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/index.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/index.ts delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.ts delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts delete mode 100644 docs/scripts/updateTemplatesTheme.ts diff --git a/docs/data/material/getting-started/templates/blog/Blog.js b/docs/data/material/getting-started/templates/blog/Blog.js index a83c67b23ce951..ccfd8ecf8d7e83 100644 --- a/docs/data/material/getting-started/templates/blog/Blog.js +++ b/docs/data/material/getting-started/templates/blog/Blog.js @@ -1,65 +1,26 @@ import * as React from 'react'; import CssBaseline from '@mui/material/CssBaseline'; import Container from '@mui/material/Container'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; import AppAppBar from './components/AppAppBar'; import MainContent from './components/MainContent'; import Latest from './components/Latest'; import Footer from './components/Footer'; -import TemplateFrame from './TemplateFrame'; - -import getBlogTheme from './theme/getBlogTheme'; - -export default function Blog() { - const [mode, setMode] = React.useState('light'); - const [showCustomTheme, setShowCustomTheme] = React.useState(true); - const blogTheme = createTheme(getBlogTheme(mode)); - const defaultTheme = createTheme({ palette: { mode } }); - // This code only runs on the client side, to determine the system color preference - React.useEffect(() => { - // Check if there is a preferred mode in localStorage - const savedMode = localStorage.getItem('themeMode'); - if (savedMode) { - setMode(savedMode); - } else { - // If no preference is found, it uses system preference - const systemPrefersDark = window.matchMedia( - '(prefers-color-scheme: dark)', - ).matches; - setMode(systemPrefersDark ? 'dark' : 'light'); - } - }, []); - - const toggleColorMode = () => { - const newMode = mode === 'dark' ? 'light' : 'dark'; - setMode(newMode); - localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage - }; - - const toggleCustomTheme = () => { - setShowCustomTheme((prev) => !prev); - }; +import AppTheme from '../shared-theme/AppTheme'; +export default function Blog(props) { return ( - - - - - - - - -