Skip to content

[internal] Update some host-reference entries #48225

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
silviuaavram merged 3 commits into from
Apr 17, 2026
Merged

[internal] Update some host-reference entries #48225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8fcfdc3
[internal] Update some host-reference entries
silviuaavram Apr 8, 2026
018fb9a
prettier
silviuaavram Apr 8, 2026
7a314cd
update test
silviuaavram Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/mui-material/src/styles/ThemeProviderWithVars.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -385,7 +385,7 @@ describe('[Material UI] ThemeProviderWithVars', () => {
expect(() => {
fireEvent.click(screen.getByText('Dark'));
}).toErrorDev([
'MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).\nTo toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.\nTo learn more, visit https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually',
'MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).\nTo toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.\nTo learn more, visit https://v7.mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually',
]);
});

Expand Down
3 changes: 2 additions & 1 deletion packages/mui-system/src/ThemeProvider/ThemeProvider.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,13 @@ export interface ThemeProviderProps<Theme = DefaultTheme> {
theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
}

// #host-reference
/**
* This component makes the `theme` available down the React tree.
* It should preferably be used at **the root of your component tree**.
* API:
*
* - [ThemeProvider API](https://mui.com/material-ui/customization/theming/#themeprovider)
* - [ThemeProvider API](https://v7.mui.com/material-ui/customization/theming/#themeprovider)
*/
export default function ThemeProvider<T = DefaultTheme>(
props: ThemeProviderProps<T>,
Expand Down
3 changes: 2 additions & 1 deletion packages/mui-system/src/cssVars/createCssVarsProvider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,11 +275,12 @@ export default function createCssVarsProvider(options) {
? setMode
: (newMode) => {
if (memoTheme.colorSchemeSelector === 'media') {
// #host-reference
console.error(
[
'MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).',
'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.',
'To learn more, visit https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually',
'To learn more, visit https://v7.mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually',
].join('\n'),
);
}
Expand Down
3 changes: 2 additions & 1 deletion packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,12 @@ function elementTypeAcceptingRef(
warningHint = 'Did you accidentally provide a React.Fragment instead?';
}

// #host-reference
Copy link

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The // #host-reference comment is not indented even though it sits inside elementTypeAcceptingRef. This breaks the file’s consistent indentation and may fail formatting/lint checks; indent it to match the surrounding block (same level as the if (warningHint !== undefined) that follows).

Suggested change
// #host-reference
// #host-reference

Copilot uses AI. Check for mistakes.
if (warningHint !== undefined) {
return new Error(
`Invalid ${location} \`${safePropName}\` supplied to \`${componentName}\`. ` +
`Expected an element type that can hold a ref. ${warningHint} ` +
'For more information see https://mui.com/r/caveat-with-refs-guide',
'For more information see https://v7.mui.com/r/caveat-with-refs-guide',
);
}

Expand Down
5 changes: 3 additions & 2 deletions scripts/buildColorTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import * as path from 'path';
import * as fs from 'node:fs/promises';
import * as colors from '@mui/material/colors';

// #host-reference
// use netlify deploy preview if you want to test changes
const HOST = 'https://mui.com/';
const HOST = 'https://v7.mui.com/';

function getColorHref(name, variant) {
return `static/colors-preview/${name}-${variant}-24x24.svg`;
Expand Down Expand Up @@ -61,7 +62,7 @@ function buildColorPreviews(name, variants) {
* The goal is to have a preview of the actual color and the color string in IntelliSense
* We create for each color an svg that is filled with that color and reference
* that svg in the corresponding JSDoc.
* Since we use https://mui.com as a reference changes are only visible
* Since we use https://v7.mui.com as a reference changes are only visible
* after release
*/
async function main() {
Expand Down
Loading