Merge remote-tracking branch 'upstream/master' into pnpm

.circleci/config.yml

@@ -676,7 +676,7 @@ jobs:
             DANGER_COMMAND: prepareBundleSizeReport
       - run:
           name: build @mui packages
-          command: pnpm lerna run --ignore @mui/icons-material --concurrency 8 --scope "@mui/*" build
+          command: pnpm lerna run --ignore @mui/icons-material --concurrency 6 --scope "@mui/*" build
       - run:
           name: create @mui/material canary distributable
           command: |

.gitignore

@@ -41,5 +41,4 @@ docs/public/static/blog/feed/*
 # vale downloaded config
 .github/styles/Google
 .github/styles/write-good
-
-.nx/cache
+.nx/cache

package.json

@@ -158,7 +158,7 @@
     "karma-mocha": "^2.0.1",
     "karma-sourcemap-loader": "^0.4.0",
     "karma-webpack": "^5.0.0",
-    "lerna": "8.0.1",
+    "lerna": "^8.0.1",
     "lodash": "^4.17.21",
     "markdownlint-cli2": "^0.11.0",
     "mocha": "^10.2.0",

packages/mui-lab/src/Alert/Alert.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import Alert from '@mui/material/Alert';
 

packages/mui-lab/src/AlertTitle/AlertTitle.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import AlertTitle from '@mui/material/AlertTitle';
 

packages/mui-lab/src/Autocomplete/Autocomplete.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
 

packages/mui-lab/src/AvatarGroup/AvatarGroup.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import AvatarGroup from '@mui/material/AvatarGroup';
 

packages/mui-lab/src/CalendarPicker/CalendarPicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/ClockPicker/ClockPicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/DatePicker/DatePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/DateTimePicker/DateTimePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/DesktopTimePicker/DesktopTimePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/LoadingButton/LoadingButton.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';

packages/mui-lab/src/LocalizationProvider/LocalizationProvider.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 let warnedOnce = false;

packages/mui-lab/src/Masonry/Masonry.js

@@ -1,3 +1,4 @@
+'use client';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import * as ReactDOM from 'react-dom';
 import { styled, useThemeProps } from '@mui/material/styles';

packages/mui-lab/src/MobileDatePicker/MobileDatePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/MobileTimePicker/MobileTimePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/MonthPicker/MonthPicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/Pagination/Pagination.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import Pagination from '@mui/material/Pagination';
 

packages/mui-lab/src/Pagination/usePagination.js

@@ -1 +1,2 @@
+'use client';
 export { default } from '@mui/material/usePagination';

packages/mui-lab/src/PaginationItem/PaginationItem.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PaginationItem from '@mui/material/PaginationItem';
 

packages/mui-lab/src/PickersDay/PickersDay.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/Rating/Rating.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import Rating from '@mui/material/Rating';
 

packages/mui-lab/src/Skeleton/Skeleton.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import Skeleton from '@mui/material/Skeleton';
 

packages/mui-lab/src/SpeedDial/SpeedDial.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import SpeedDial from '@mui/material/SpeedDial';
 

packages/mui-lab/src/SpeedDialAction/SpeedDialAction.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import SpeedDialAction from '@mui/material/SpeedDialAction';
 

packages/mui-lab/src/SpeedDialIcon/SpeedDialIcon.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import SpeedDialIcon from '@mui/material/SpeedDialIcon';
 

packages/mui-lab/src/StaticDatePicker/StaticDatePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/StaticTimePicker/StaticTimePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/TabContext/TabContext.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 

packages/mui-lab/src/TabList/TabList.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Tabs from '@mui/material/Tabs';

packages/mui-lab/src/TabPanel/TabPanel.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/mui-lab/src/TimePicker/TimePicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/Timeline/Timeline.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/mui-lab/src/TimelineConnector/TimelineConnector.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/mui-lab/src/TimelineContent/TimelineContent.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/mui-lab/src/TimelineDot/TimelineDot.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/mui-lab/src/TimelineItem/TimelineItem.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/mui-lab/src/TimelineSeparator/TimelineSeparator.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';

packages/mui-lab/src/ToggleButton/ToggleButton.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import ToggleButton from '@mui/material/ToggleButton';
 

packages/mui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 

packages/mui-lab/src/TreeItem/TreeItem.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 let warnedOnce = false;

packages/mui-lab/src/TreeView/TreeView.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/YearPicker/YearPicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 

packages/mui-lab/src/internal/svg-icons/ArrowDropDown.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { createSvgIcon } from '@mui/material/utils';
 

packages/mui-lab/src/internal/svg-icons/ArrowDropDown.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { createSvgIcon } from '@mui/material/utils';
 

packages/mui-lab/src/internal/svg-icons/ArrowLeft.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { createSvgIcon } from '@mui/material/utils';
 

packages/mui-lab/src/internal/svg-icons/ArrowRight.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { createSvgIcon } from '@mui/material/utils';
 

packages/mui-lab/src/internal/svg-icons/Calendar.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { createSvgIcon } from '@mui/material/utils';
 

packages/mui-lab/src/internal/svg-icons/Clock.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { createSvgIcon } from '@mui/material/utils';
 

packages/mui-lab/src/internal/svg-icons/DateRange.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { createSvgIcon } from '@mui/material/utils';
 

packages/mui-lab/src/internal/svg-icons/Pen.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { createSvgIcon } from '@mui/material/utils';
 

packages/mui-lab/src/internal/svg-icons/Time.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { createSvgIcon } from '@mui/material/utils';
 

packages/mui-material/package.json

@@ -58,7 +58,6 @@
   "devDependencies": {
     "@mui-internal/babel-macros": "workspace:^",
     "@mui-internal/test-utils": "workspace:^",
-    "@mui/icons-material": "workspace:^",
     "@mui/lab": "workspace:*",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-replace": "^5.0.5",

packages/mui-material/src/TabScrollButton/TabScrollButton.test.js

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from '@mui-internal/test-utils';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import TabScrollButton, { tabScrollButtonClasses as classes } from '@mui/material/TabScrollButton';
+import { createSvgIcon } from '@mui/material/utils';
+
+const ArrowBackIcon = createSvgIcon(<path d="M3 3h18v18H3z" />, 'ArrowBack');
+const ArrowForwardIcon = createSvgIcon(<path d="M3 3h18v18H3z" />, 'ArrowForward');
 
 describe('<TabScrollButton />', () => {
   const defaultProps = {

packages/mui-material/src/TablePagination/TablePagination.test.js

@@ -12,10 +12,18 @@ import { outlinedInputClasses } from '@mui/material/OutlinedInput';
 import { filledInputClasses } from '@mui/material/FilledInput';
 import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
 import { svgIconClasses } from '@mui/material/SvgIcon';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import KeyboardDoubleArrowLeftRoundedIcon from '@mui/icons-material/KeyboardDoubleArrowLeftRounded';
-import KeyboardDoubleArrowRightRoundedIcon from '@mui/icons-material/KeyboardDoubleArrowRightRounded';
+import { createSvgIcon } from '@mui/material/utils';
+
+const ArrowBackIcon = createSvgIcon(<path d="M3 3h18v18H3z" />, 'ArrowBack');
+const ArrowForwardIcon = createSvgIcon(<path d="M3 3h18v18H3z" />, 'ArrowForward');
+const KeyboardDoubleArrowLeftRoundedIcon = createSvgIcon(
+  <path d="M3 3h18v18H3z" />,
+  'KeyboardDoubleArrowLeftRounded',
+);
+const KeyboardDoubleArrowRightRoundedIcon = createSvgIcon(
+  <path d="M3 3h18v18H3z" />,
+  'KeyboardDoubleArrowRightRounded',
+);
 
 describe('<TablePagination />', () => {
   const noop = () => {};

packages/mui-material/src/TableSortLabel/TableSortLabel.test.js

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from '@mui-internal/test-utils';
-import SortIcon from '@mui/icons-material/Sort';
 import TableSortLabel, { tableSortLabelClasses as classes } from '@mui/material/TableSortLabel';
 import ButtonBase from '@mui/material/ButtonBase';
+import { createSvgIcon } from '@mui/material/utils';
+
+const SortIcon = createSvgIcon(<path d="M3 3h18v18H3z" />, 'Sort');
 
 describe('<TableSortLabel />', () => {
   const { render } = createRenderer();

packages/mui-material/src/Tabs/Tabs.test.js

@@ -10,14 +10,16 @@ import {
   strictModeDoubleLoggingSuppressed,
   waitFor,
 } from '@mui-internal/test-utils';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import Tab from '@mui/material/Tab';
 import Tabs, { tabsClasses as classes } from '@mui/material/Tabs';
 import { svgIconClasses } from '@mui/material/SvgIcon';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { createSvgIcon } from '@mui/material/utils';
 import capitalize from '../utils/capitalize';
 
+const ArrowBackIcon = createSvgIcon(<path d="M3 3h18v18H3z" />, 'ArrowBack');
+const ArrowForwardIcon = createSvgIcon(<path d="M3 3h18v18H3z" />, 'ArrowForward');
+
 function findScrollButton(container, direction) {
   return container.querySelector(`svg[data-testid="KeyboardArrow${capitalize(direction)}Icon"]`);
 }

packages/rsc-builder/buildRsc.ts

@@ -48,6 +48,10 @@ const PROJECTS: Project[] = [
     additionalPaths: ['custom'],
     additionalFiles: ['src/utils/createSvgIcon.js'],
   },
+  {
+    name: 'lab',
+    rootPath: path.join(process.cwd(), 'packages/mui-lab'),
+  },
 ];
 
 async function processFile(