Merge branch 'next' into fix-tab-styles

mui · Jun 8, 2024 · fe9a07c · fe9a07c
2 parents d038139 + 3ee5a4b
commit fe9a07c
Show file tree

Hide file tree

Showing 176 changed files with 13,635 additions and 10,214 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -12,6 +12,8 @@ const forbidCreateStylesMessage =
   '`createStyles` will lead to inlined, at-compile-time-resolved type-imports. ' +
   'See https://github.com/microsoft/TypeScript/issues/36097#issuecomment-578324386 for more information';
 
+const ENABLE_REACT_COMPILER_PLUGIN = false;
+
 module.exports = {
   root: true, // So parent files don't get applied
   env: {
@@ -35,6 +37,7 @@ module.exports = {
     'eslint-plugin-react-hooks',
     '@typescript-eslint/eslint-plugin',
     'eslint-plugin-filenames',
+    ...(ENABLE_REACT_COMPILER_PLUGIN ? ['eslint-plugin-react-compiler'] : []),
   ],
   settings: {
     'import/resolver': {
@@ -219,6 +222,7 @@ module.exports = {
 
     'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
     'lines-around-directive': 'off',
+    ...(ENABLE_REACT_COMPILER_PLUGIN ? { 'react-compiler/react-compiler': 'error' } : {}),
   },
   overrides: [
     {
@@ -471,6 +475,7 @@ module.exports = {
       rules: {
         'import/no-default-export': 'error',
         'import/prefer-default-export': 'off',
+        ...(ENABLE_REACT_COMPILER_PLUGIN ? { 'react-compiler/react-compiler': 'off' } : {}),
       },
     },
     {

diff --git a/docs/data/material/components/steppers/HorizontalNonLinearStepper.js b/docs/data/material/components/steppers/HorizontalNonLinearStepper.js
@@ -47,9 +47,10 @@ export default function HorizontalNonLinearStepper() {
   };
 
   const handleComplete = () => {
-    const newCompleted = completed;
-    newCompleted[activeStep] = true;
-    setCompleted(newCompleted);
+    setCompleted({
+      ...completed,
+      [activeStep]: true,
+    });
     handleNext();
   };
 

diff --git a/docs/data/material/components/steppers/HorizontalNonLinearStepper.tsx b/docs/data/material/components/steppers/HorizontalNonLinearStepper.tsx
@@ -49,9 +49,10 @@ export default function HorizontalNonLinearStepper() {
   };
 
   const handleComplete = () => {
-    const newCompleted = completed;
-    newCompleted[activeStep] = true;
-    setCompleted(newCompleted);
+    setCompleted({
+      ...completed,
+      [activeStep]: true,
+    });
     handleNext();
   };
 

diff --git a/docs/data/material/components/use-media-query/use-media-query.md b/docs/data/material/components/use-media-query/use-media-query.md
@@ -25,7 +25,7 @@ The media query string can be any valid CSS media query, for example [`'(prefers
 
 ⚠️ You can't use `'print'` per browsers limitation, for example [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=774398).
 
-## Using Material UI's breakpoint helpers
+## Using breakpoint helpers
 
 You can use Material UI's [breakpoint helpers](/material-ui/customization/breakpoints/) as follows:
 

diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
@@ -717,7 +717,7 @@ export default function DemoToolbar(props) {
 DemoToolbar.propTypes = {
   codeOpen: PropTypes.bool.isRequired,
   codeVariant: PropTypes.string.isRequired,
-  copyButtonOnClick: PropTypes.object.isRequired,
+  copyButtonOnClick: PropTypes.func.isRequired,
   copyIcon: PropTypes.object.isRequired,
   demo: PropTypes.object.isRequired,
   demoData: PropTypes.object.isRequired,

diff --git a/docs/src/modules/components/Head.tsx b/docs/src/modules/components/Head.tsx
@@ -5,7 +5,7 @@ import { LANGUAGES_SSR } from 'docs/config';
 import { useUserLanguage, useTranslate } from '@mui/docs/i18n';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 
-// #major-version-switch
+// #default-branch-switch
 const HOST = process.env.PULL_REQUEST_ID
   ? `https://deploy-preview-${process.env.PULL_REQUEST_ID}--${process.env.NETLIFY_SITE_NAME}.netlify.app`
   : 'https://mui.com';
@@ -44,21 +44,21 @@ export default function Head(props: HeadProps) {
       <meta name="twitter:card" content={largeCard ? 'summary_large_image' : 'summary'} />
       {/* https://x.com/MUI_hq */}
       <meta name="twitter:site" content="@MUI_hq" />
-      {/* #major-version-switch */}
+      {/* #default-branch-switch */}
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />
       <meta name="twitter:image" content={preview} />
       {/* Facebook */}
       <meta property="og:type" content={type} />
       <meta property="og:title" content={title} />
-      {/* #major-version-switch */}
+      {/* #default-branch-switch */}
       <meta property="og:url" content={`${HOST}${router.asPath}`} />
       <meta property="og:description" content={description} />
       <meta property="og:image" content={preview} />
       <meta property="og:ttl" content="604800" />
       {/* Algolia */}
       <meta name="docsearch:language" content={userLanguage} />
-      {/* #major-version-switch */}
+      {/* #default-branch-switch */}
       <meta name="docsearch:version" content="master" />
       {disableAlternateLocale
         ? null

diff --git a/package.json b/package.json
@@ -155,6 +155,7 @@
     "eslint-plugin-material-ui": "workspace:^",
     "eslint-plugin-mocha": "^10.4.3",
     "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
     "eslint-plugin-react-hooks": "^4.6.2",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
@@ -191,9 +192,9 @@
     "webpack-cli": "^5.1.4",
     "yargs": "^17.7.2"
   },
-  "packageManager": "pnpm@8.15.8",
+  "packageManager": "pnpm@9.2.0",
   "engines": {
-    "pnpm": "8.15.8"
+    "pnpm": "9.2.0"
   },
   "resolutions": {
     "@babel/core": "^7.24.6",

diff --git a/packages/api-docs-builder-core/baseUi/projectSettings.ts b/packages/api-docs-builder-core/baseUi/projectSettings.ts
@@ -43,4 +43,6 @@ export const projectSettings: ProjectSettings = {
   translationPagesDirectory: 'docs/translations/api-docs-base',
   generateClassName: generateUtilityClass,
   isGlobalClassName: isGlobalState,
+  // #default-branch-switch
+  baseApiUrl: 'https://next.mui.com',
 };
diff --git a/packages/api-docs-builder-core/materialUi/projectSettings.ts b/packages/api-docs-builder-core/materialUi/projectSettings.ts
@@ -33,4 +33,6 @@ export const projectSettings: ProjectSettings = {
   translationPagesDirectory: 'docs/translations/api-docs',
   generateClassName: generateUtilityClass,
   isGlobalClassName: isGlobalState,
+  // #default-branch-switch
+  baseApiUrl: 'https://next.mui.com',
 };
diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -150,8 +150,12 @@ export async function computeApiDescription(
  *  *
  *  * - [Icon API](https://mui.com/api/icon/)
  */
-async function annotateComponentDefinition(api: ReactApi, componentJsdoc: Annotation) {
-  const HOST = 'https://mui.com';
+async function annotateComponentDefinition(
+  api: ReactApi,
+  componentJsdoc: Annotation,
+  projectSettings: ProjectSettings,
+) {
+  const HOST = projectSettings.baseApiUrl ?? 'https://mui.com';
 
   const typesFilename = api.filename.replace(/\.js$/, '.d.ts');
   const fileName = path.parse(api.filename).name;
@@ -855,7 +859,7 @@ export default async function generateComponentApi(
         : !skipAnnotatingComponentDefinition
     ) {
       // Add comment about demo & api links (including inherited component) to the component file
-      await annotateComponentDefinition(reactApi, componentJsdoc);
+      await annotateComponentDefinition(reactApi, componentJsdoc, projectSettings);
     }
   }
 

diff --git a/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts
@@ -111,8 +111,12 @@ export interface ReactApi extends ReactDocgenApi {
  * *
  * * - [useButton API](https://mui.com/base-ui/api/use-button/)
  */
-async function annotateHookDefinition(api: ReactApi, hookJsdoc: Annotation) {
-  const HOST = 'https://mui.com';
+async function annotateHookDefinition(
+  api: ReactApi,
+  hookJsdoc: Annotation,
+  projectSettings: ProjectSettings,
+) {
+  const HOST = projectSettings.baseApiUrl ?? 'https://mui.com';
 
   const typesFilename = api.filename.replace(/\.js$/, '.d.ts');
   const fileName = path.parse(api.filename).name;
@@ -613,7 +617,7 @@ export default async function generateHookApi(
     await generateApiJson(apiPagesDirectory, reactApi);
 
     // Add comment about demo & api links to the component hook file
-    await annotateHookDefinition(reactApi, hookJsdoc);
+    await annotateHookDefinition(reactApi, hookJsdoc, projectSettings);
   }
 
   return reactApi;

diff --git a/packages/api-docs-builder/ProjectSettings.ts b/packages/api-docs-builder/ProjectSettings.ts
@@ -99,4 +99,8 @@ export interface ProjectSettings {
    * Determines if a given slot or state is a global state
    */
   isGlobalClassName: (slotOrState: string) => boolean;
+  /**
+   * Determines the base API URL for generated JSDocs
+   */
+  baseApiUrl?: string;
 }
diff --git a/packages/mui-base/src/FormControl/useFormControlContext.ts b/packages/mui-base/src/FormControl/useFormControlContext.ts
@@ -6,11 +6,11 @@ import { FormControlContext } from './FormControlContext';
  *
  * Demos:
  *
- * - [Form Control](https://mui.com/base-ui/react-form-control/#hook)
+ * - [Form Control](https://next.mui.com/base-ui/react-form-control/#hook)
  *
  * API:
  *
- * - [useFormControlContext API](https://mui.com/base-ui/react-form-control/hooks-api/#use-form-control-context)
+ * - [useFormControlContext API](https://next.mui.com/base-ui/react-form-control/hooks-api/#use-form-control-context)
  */
 export function useFormControlContext(): UseFormControlContextReturnValue | undefined {
   return React.useContext(FormControlContext);

diff --git a/packages/mui-base/src/unstable_useModal/useModal.ts b/packages/mui-base/src/unstable_useModal/useModal.ts
@@ -30,11 +30,11 @@ const defaultManager = new ModalManager();
  *
  * Demos:
  *
- * - [Modal](https://mui.com/base-ui/react-modal/#hook)
+ * - [Modal](https://next.mui.com/base-ui/react-modal/#hook)
  *
  * API:
  *
- * - [useModal API](https://mui.com/base-ui/react-modal/hooks-api/#use-modal)
+ * - [useModal API](https://next.mui.com/base-ui/react-modal/hooks-api/#use-modal)
  */
 export function useModal(parameters: UseModalParameters): UseModalReturnValue {
   const {

diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts
@@ -36,11 +36,11 @@ export function getInputValueAsString(v: string): string {
  *
  * Demos:
  *
- * - [Number Input](https://mui.com/base-ui/react-number-input/#hook)
+ * - [Number Input](https://next.mui.com/base-ui/react-number-input/#hook)
  *
  * API:
  *
- * - [useNumberInput API](https://mui.com/base-ui/react-number-input/hooks-api/#use-number-input)
+ * - [useNumberInput API](https://next.mui.com/base-ui/react-number-input/hooks-api/#use-number-input)
  */
 export function useNumberInput(parameters: UseNumberInputParameters): UseNumberInputReturnValue {
   const {

diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts b/packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts
@@ -341,11 +341,11 @@ export type AutocompleteGetTagProps = ({ index }: { index: number }) => {
  *
  * Demos:
  *
- * - [Autocomplete](https://mui.com/base-ui/react-autocomplete/#hook)
+ * - [Autocomplete](https://next.mui.com/base-ui/react-autocomplete/#hook)
  *
  * API:
  *
- * - [useAutocomplete API](https://mui.com/base-ui/react-autocomplete/hooks-api/#use-autocomplete)
+ * - [useAutocomplete API](https://next.mui.com/base-ui/react-autocomplete/hooks-api/#use-autocomplete)
  */
 export function useAutocomplete<
   Value,

diff --git a/packages/mui-base/src/useBadge/useBadge.ts b/packages/mui-base/src/useBadge/useBadge.ts
@@ -7,11 +7,11 @@ import { UseBadgeParameters, UseBadgeReturnValue } from './useBadge.types';
  *
  * Demos:
  *
- * - [Badge](https://mui.com/base-ui/react-badge/#hook)
+ * - [Badge](https://next.mui.com/base-ui/react-badge/#hook)
  *
  * API:
  *
- * - [useBadge API](https://mui.com/base-ui/react-badge/hooks-api/#use-badge)
+ * - [useBadge API](https://next.mui.com/base-ui/react-badge/hooks-api/#use-badge)
  */
 export function useBadge(parameters: UseBadgeParameters): UseBadgeReturnValue {
   const {

diff --git a/packages/mui-base/src/useButton/useButton.ts b/packages/mui-base/src/useButton/useButton.ts
@@ -17,11 +17,11 @@ import { MuiCancellableEvent } from '../utils/MuiCancellableEvent';
  *
  * Demos:
  *
- * - [Button](https://mui.com/base-ui/react-button/#hook)
+ * - [Button](https://next.mui.com/base-ui/react-button/#hook)
  *
  * API:
  *
- * - [useButton API](https://mui.com/base-ui/react-button/hooks-api/#use-button)
+ * - [useButton API](https://next.mui.com/base-ui/react-button/hooks-api/#use-button)
  */
 export function useButton(parameters: UseButtonParameters = {}): UseButtonReturnValue {
   const {

diff --git a/packages/mui-base/src/useDropdown/useDropdown.ts b/packages/mui-base/src/useDropdown/useDropdown.ts
@@ -10,11 +10,11 @@ import { dropdownReducer } from './dropdownReducer';
  *
  * Demos:
  *
- * - [Menu](https://mui.com/base-ui/react-menu/#hooks)
+ * - [Menu](https://next.mui.com/base-ui/react-menu/#hooks)
  *
  * API:
  *
- * - [useDropdown API](https://mui.com/base-ui/react-menu/hooks-api/#use-dropdown)
+ * - [useDropdown API](https://next.mui.com/base-ui/react-menu/hooks-api/#use-dropdown)
  */
 export function useDropdown(parameters: UseDropdownParameters = {}) {
   const { defaultOpen, onOpenChange, open: openProp, componentName = 'useDropdown' } = parameters;

diff --git a/packages/mui-base/src/useInput/useInput.ts b/packages/mui-base/src/useInput/useInput.ts
@@ -14,11 +14,11 @@ import {
  *
  * Demos:
  *
- * - [Input](https://mui.com/base-ui/react-input/#hook)
+ * - [Input](https://next.mui.com/base-ui/react-input/#hook)
  *
  * API:
  *
- * - [useInput API](https://mui.com/base-ui/react-input/hooks-api/#use-input)
+ * - [useInput API](https://next.mui.com/base-ui/react-input/hooks-api/#use-input)
  */
 export function useInput(parameters: UseInputParameters = {}): UseInputReturnValue {
   const {

diff --git a/packages/mui-base/src/useMenu/useMenu.ts b/packages/mui-base/src/useMenu/useMenu.ts
@@ -30,11 +30,11 @@ const FALLBACK_MENU_CONTEXT: DropdownContextValue = {
  *
  * Demos:
  *
- * - [Menu](https://mui.com/base-ui/react-menu/#hooks)
+ * - [Menu](https://next.mui.com/base-ui/react-menu/#hooks)
  *
  * API:
  *
- * - [useMenu API](https://mui.com/base-ui/react-menu/hooks-api/#use-menu)
+ * - [useMenu API](https://next.mui.com/base-ui/react-menu/hooks-api/#use-menu)
  */
 export function useMenu(parameters: UseMenuParameters = {}): UseMenuReturnValue {
   const {

diff --git a/packages/mui-base/src/useMenuButton/useMenuButton.ts b/packages/mui-base/src/useMenuButton/useMenuButton.ts
@@ -14,11 +14,11 @@ import { extractEventHandlers } from '../utils';
  *
  * Demos:
  *
- * - [Menu](https://mui.com/base-ui/react-menu/#hooks)
+ * - [Menu](https://next.mui.com/base-ui/react-menu/#hooks)
  *
  * API:
  *
- * - [useMenuButton API](https://mui.com/base-ui/react-menu/hooks-api/#use-menu-button)
+ * - [useMenuButton API](https://next.mui.com/base-ui/react-menu/hooks-api/#use-menu-button)
  */
 export function useMenuButton(parameters: UseMenuButtonParameters = {}): UseMenuButtonReturnValue {
   const { disabled = false, focusableWhenDisabled, rootRef: externalRef } = parameters;

diff --git a/packages/mui-base/src/useMenuItem/useMenuItem.ts b/packages/mui-base/src/useMenuItem/useMenuItem.ts
@@ -34,11 +34,11 @@ const FALLBACK_MENU_CONTEXT: DropdownContextValue = {
  *
  * Demos:
  *
- * - [Menu](https://mui.com/base-ui/react-menu/#hooks)
+ * - [Menu](https://next.mui.com/base-ui/react-menu/#hooks)
  *
  * API:
  *
- * - [useMenuItem API](https://mui.com/base-ui/react-menu/hooks-api/#use-menu-item)
+ * - [useMenuItem API](https://next.mui.com/base-ui/react-menu/hooks-api/#use-menu-item)
  */
 export function useMenuItem(params: UseMenuItemParameters): UseMenuItemReturnValue {
   const {

diff --git a/packages/mui-base/src/useMenuItem/useMenuItemContextStabilizer.ts b/packages/mui-base/src/useMenuItem/useMenuItemContextStabilizer.ts
@@ -8,11 +8,11 @@ import { ListContext, ListContextValue, ListItemState } from '../useList';
  *
  * Demos:
  *
- * - [Menu](https://mui.com/base-ui/react-menu/#hooks)
+ * - [Menu](https://next.mui.com/base-ui/react-menu/#hooks)
  *
  * API:
  *
- * - [useMenuItemContextStabilizer API](https://mui.com/base-ui/react-menu/hooks-api/#use-menu-item-context-stabilizer)
+ * - [useMenuItemContextStabilizer API](https://next.mui.com/base-ui/react-menu/hooks-api/#use-menu-item-context-stabilizer)
  *
  * @param id - The id of the MenuItem. If undefined, it will be generated with useId.
  * @returns The stable ListContext value and the id of the MenuItem.

diff --git a/packages/mui-base/src/useOption/useOption.ts b/packages/mui-base/src/useOption/useOption.ts
@@ -14,11 +14,11 @@ import { EventHandlers } from '../utils/types';
  *
  * Demos:
  *
- * - [Select](https://mui.com/base-ui/react-select/#hooks)
+ * - [Select](https://next.mui.com/base-ui/react-select/#hooks)
  *
  * API:
  *
- * - [useOption API](https://mui.com/base-ui/react-select/hooks-api/#use-option)
+ * - [useOption API](https://next.mui.com/base-ui/react-select/hooks-api/#use-option)
  */
 export function useOption<Value>(params: UseOptionParameters<Value>): UseOptionReturnValue {
   const { value, label, disabled, rootRef: optionRefParam, id: idParam } = params;

diff --git a/packages/mui-base/src/useOption/useOptionContextStabilizer.ts b/packages/mui-base/src/useOption/useOptionContextStabilizer.ts
@@ -7,11 +7,11 @@ import { ListContext, ListContextValue } from '../useList';
  *
  * Demos:
  *
- * - [Select](https://mui.com/base-ui/react-select/#hooks)
+ * - [Select](https://next.mui.com/base-ui/react-select/#hooks)
  *
  * API:
  *
- * - [useOptionContextStabilizer API](https://mui.com/base-ui/react-select/hooks-api/#use-option-context-stabilizer)
+ * - [useOptionContextStabilizer API](https://next.mui.com/base-ui/react-select/hooks-api/#use-option-context-stabilizer)
  *
  * @param value - The value of the Option.
  * @returns The stable ListContext value.