Merge branch 'master' into ui-adjust-scrollbar-in-stickyheader-table-…

…component

.eslintrc.js

@@ -408,6 +408,21 @@ module.exports = /** @type {Config} */ ({
         'react/prop-types': 'off',
       },
     },
+    {
+      files: ['packages/*/src/*/*.?(c|m)[jt]s?(x)'],
+      excludedFiles: [
+        '*.spec.*',
+        '*.test.*',
+        // deprecated library
+        '**/mui-base/**/*',
+        '**/mui-joy/**/*',
+        // used internally, not used on app router yet
+        '**/mui-docs/**/*',
+      ],
+      rules: {
+        'material-ui/disallow-react-api-in-server-components': 'error',
+      },
+    },
     {
       files: ['packages/*/src/**/*.?(c|m)[jt]s?(x)'],
       excludedFiles: '*.spec.*',

CHANGELOG.md

@@ -1,5 +1,47 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.4.1
+
+<!-- generated comparing v6.4.0..master -->
+
+_Jan 21, 2025_
+
+A big thanks to the 9 contributors who made this release possible.
+
+### `@mui/[email protected]`
+
+- [ButtonBase] Export types used in ButtonBase props (#43530) @Janpot
+- [Dialog] Add slots and slotProps (#44792) @sai6855
+- [Drawer] Deprecate composed classes (#44870) @yash49
+- [IconButton] Set default loading to `null` (#45057) @siriwatknp
+- [ListItem] Add codemod for deprecated props (#45022) @sai6855
+- [Modal] Add migration guide and codemod for deprecated props (#45021) @sai6855
+- [TextField] Fix filled state to be synced with autofill (#44135) @DiegoAndai
+
+### `@mui/[email protected]`
+
+- Fix dark mode flicker using `useEnhancedEffect` (#44812) @siriwatknp
+
+### `@mui/[email protected]`
+
+- Do not deep merge React component (#45058) @siriwatknp
+
+### Docs
+
+- Fix typo (#45070) @Fullchee
+- Improve Toolpad templates section (#44914) @bharatkashyap
+- Fix expand / collapse icons orientation (#44989) @zanivan
+- Rename "Base UI" to "MUI Base" in all text (#45060) @mj12albert
+- Add @mui/base deprecation callout (#45030) @mj12albert
+- Update @mui/base deprecation message (#45064) @mj12albert
+
+### Core
+
+- [code-infra] Add "use client" directive to files with React APIs (#45036) @Janpot
+- [docs] 301 redirect `/base-ui` to `base-ui.com` (#45061) @mj12albert
+
+All contributors of this release in alphabetical order: @bharatkashyap, @DiegoAndai, @Fullchee, @Janpot, @mj12albert, @sai6855, @siriwatknp, @yash49, @zanivan
+
 ## 6.4.0
 
 <!-- generated comparing v6.3.1..master -->

docs/data/base/components/number-input/number-input.md

@@ -139,7 +139,7 @@ If you only define one or the other, the opposite end of the range will be open-
 
 ```
 
-The demo below shows a Number Input with a an accepted range of 1 to 99:
+The demo below shows a Number Input with an accepted range of 1 to 99:
 
 {{"demo": "QuantityInput.js", "defaultCodeOpen": false}}
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/monorepo",
-  "version": "6.4.0",
+  "version": "6.4.1",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",

packages/eslint-plugin-material-ui/src/index.js

@@ -8,4 +8,5 @@ module.exports.rules = {
   'no-empty-box': require('./rules/no-empty-box'),
   'no-styled-box': require('./rules/no-styled-box'),
   'straight-quotes': require('./rules/straight-quotes'),
+  'disallow-react-api-in-server-components': require('./rules/disallow-react-api-in-server-components'),
 };

packages/eslint-plugin-material-ui/src/rules/disallow-react-api-in-server-components.js

@@ -0,0 +1,51 @@
+module.exports = {
+  create(context) {
+    let hasUseClientDirective = false;
+    const apis = new Set([
+      'useState',
+      'useEffect',
+      'useLayoutEffect',
+      'useReducer',
+      'useTransition',
+      'createContext',
+    ]);
+    return {
+      Program(node) {
+        hasUseClientDirective = node.body.some(
+          (statement) =>
+            statement.type === 'ExpressionStatement' &&
+            statement.expression.type === 'Literal' &&
+            statement.expression.value === 'use client',
+        );
+      },
+      CallExpression(node) {
+        if (
+          !hasUseClientDirective &&
+          node.callee.type === 'MemberExpression' &&
+          node.callee.object.name === 'React' &&
+          apis.has(node.callee.property.name)
+        ) {
+          context.report({
+            node,
+            message: `Using 'React.${node.callee.property.name}' is forbidden if the file doesn't have a 'use client' directive.`,
+            fix(fixer) {
+              const sourceCode = context.getSourceCode();
+              if (
+                sourceCode.text.includes('"use server"') ||
+                sourceCode.text.includes("'use server'")
+              ) {
+                return null;
+              }
+
+              const firstToken = sourceCode.ast.body[0];
+              return fixer.insertTextBefore(firstToken, "'use client';\n");
+            },
+          });
+        }
+      },
+    };
+  },
+  meta: {
+    fixable: 'code',
+  },
+};

packages/mui-base/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/base",
-  "version": "5.0.0-beta.68",
+  "version": "5.0.0-beta.69",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Base is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.",

packages/mui-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "6.4.0",
+  "version": "6.4.1",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",

packages/mui-core-downloads-tracker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/core-downloads-tracker",
-  "version": "6.4.0",
+  "version": "6.4.1",
   "private": false,
   "author": "MUI Team",
   "description": "Internal package to track number of downloads of our design system libraries",

packages/mui-docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/docs",
-  "version": "6.4.0",
+  "version": "6.4.1",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",

packages/mui-icons-material/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/icons-material",
-  "version": "6.4.0",
+  "version": "6.4.1",
   "private": false,
   "author": "MUI Team",
   "description": "Material Design icons distributed as SVG React components.",

packages/mui-lab/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/lab",
-  "version": "6.0.0-beta.23",
+  "version": "6.0.0-beta.24",
   "private": false,
   "author": "MUI Team",
   "description": "Laboratory for new MUI modules.",

packages/mui-lab/src/Timeline/TimelineContext.ts

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

packages/mui-material-pigment-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material-pigment-css",
-  "version": "6.4.0",
+  "version": "6.4.1",
   "author": "MUI Team",
   "description": "A wrapper over Pigment CSS that provides the same styled and theming APIs as Material UI.",
   "main": "./src/index.ts",

packages/mui-material/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.4.0",
+  "version": "6.4.1",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",

packages/mui-material/src/ButtonGroup/ButtonGroupButtonContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 type ButtonPositionClassName = string;

packages/mui-material/src/ButtonGroup/ButtonGroupContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import type { ButtonGroupProps } from './ButtonGroup';
 

packages/mui-material/src/Dialog/DialogContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 interface DialogContextValue {

packages/mui-material/src/FormControl/FormControl.js

@@ -193,6 +193,14 @@ const FormControl = React.forwardRef(function FormControl(inProps, ref) {
     };
   }
 
+  const onFilled = React.useCallback(() => {
+    setFilled(true);
+  }, []);
+
+  const onEmpty = React.useCallback(() => {
+    setFilled(false);
+  }, []);
+
   const childContext = React.useMemo(() => {
     return {
       adornedStart,
@@ -208,15 +216,11 @@ const FormControl = React.forwardRef(function FormControl(inProps, ref) {
       onBlur: () => {
         setFocused(false);
       },
-      onEmpty: () => {
-        setFilled(false);
-      },
-      onFilled: () => {
-        setFilled(true);
-      },
       onFocus: () => {
         setFocused(true);
       },
+      onEmpty,
+      onFilled,
       registerEffect,
       required,
       variant,
@@ -231,6 +235,8 @@ const FormControl = React.forwardRef(function FormControl(inProps, ref) {
     fullWidth,
     hiddenLabel,
     registerEffect,
+    onEmpty,
+    onFilled,
     required,
     size,
     variant,

packages/mui-material/src/FormControl/FormControlContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import type { FormControlProps } from './FormControl';
 

packages/mui-material/src/Hidden/withWidth.js

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

packages/mui-material/src/RadioGroup/RadioGroupContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 export interface RadioGroupContextValue {

packages/mui-material/src/Step/StepContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 export interface StepContextType {

packages/mui-material/src/Stepper/StepperContext.ts

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 
 export interface StepperContextType {

packages/mui-material/src/Table/Tablelvl2Context.js

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

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

@@ -303,4 +303,28 @@ describe('<TextField />', () => {
       expect(getByRole('textbox')).to.have.attribute('data-testid', 'input-element');
     });
   });
+
+  describe('autofill', () => {
+    it('should be filled after auto fill event', () => {
+      function AutoFillComponentTest() {
+        const [value, setValue] = React.useState('');
+        return (
+          <TextField
+            value={value}
+            onChange={(event) => setValue(event.target.value)}
+            label="test"
+            variant="standard"
+            slotProps={{
+              htmlInput: { 'data-testid': 'htmlInput' },
+              inputLabel: { 'data-testid': 'label' },
+            }}
+          />
+        );
+      }
+
+      const { getByTestId } = render(<AutoFillComponentTest />);
+      fireEvent.animationStart(getByTestId('htmlInput'), { animationName: 'mui-auto-fill' });
+      expect(getByTestId('label').getAttribute('data-shrink')).to.equal('true');
+    });
+  });
 });