diff --git a/docs/pages/base/api/modal-unstyled.json b/docs/pages/base/api/modal-unstyled.json
index e35f1d27da241f..066ccf5847df56 100644
--- a/docs/pages/base/api/modal-unstyled.json
+++ b/docs/pages/base/api/modal-unstyled.json
@@ -38,7 +38,7 @@
"globalClasses": { "root": "MuiModal-root", "hidden": "MuiModal-hidden" },
"name": null
},
- "spread": false,
+ "spread": true,
"forwardsRefTo": "HTMLDivElement",
"filename": "/packages/mui-base/src/ModalUnstyled/ModalUnstyled.js",
"inheritance": null,
diff --git a/docs/pages/base/api/popper-unstyled.json b/docs/pages/base/api/popper-unstyled.json
index 0ee65d6280ab9e..c59aafe0473eca 100644
--- a/docs/pages/base/api/popper-unstyled.json
+++ b/docs/pages/base/api/popper-unstyled.json
@@ -48,7 +48,7 @@
},
"name": "PopperUnstyled",
"styles": { "classes": [], "globalClasses": {}, "name": null },
- "spread": false,
+ "spread": true,
"forwardsRefTo": "HTMLDivElement",
"filename": "/packages/mui-base/src/PopperUnstyled/PopperUnstyled.js",
"inheritance": null,
diff --git a/docs/pages/base/api/textarea-autosize.json b/docs/pages/base/api/textarea-autosize.json
index 7474dcf10c6244..73ac007fbcdf22 100644
--- a/docs/pages/base/api/textarea-autosize.json
+++ b/docs/pages/base/api/textarea-autosize.json
@@ -8,7 +8,7 @@
},
"name": "TextareaAutosize",
"styles": { "classes": [], "globalClasses": {}, "name": null },
- "spread": true,
+ "spread": false,
"forwardsRefTo": "HTMLTextAreaElement",
"filename": "/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js",
"inheritance": null,
diff --git a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.js b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.js
index aaacb78f92f96c..3fa8cfcac30022 100644
--- a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.js
+++ b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.js
@@ -55,7 +55,7 @@ const ModalUnstyled = React.forwardRef(function ModalUnstyled(props, ref) {
children,
classes: classesProp,
closeAfterTransition = false,
- component = 'div',
+ component,
container,
disableAutoFocus = false,
disableEnforceFocus = false,
@@ -235,7 +235,7 @@ const ModalUnstyled = React.forwardRef(function ModalUnstyled(props, ref) {
childProps.onExited = createChainedFunction(handleExited, children.props.onExited);
}
- const Root = slots.root || component;
+ const Root = component ?? slots.root ?? 'div';
const rootProps = useSlotProps({
elementType: Root,
externalSlotProps: slotProps.root,
diff --git a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.test.js b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.test.js
index 0d808c50f35031..43591c7dbbf0fe 100644
--- a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.test.js
+++ b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.test.js
@@ -21,7 +21,6 @@ describe('', () => {
,
() => ({
- classes,
inheritComponent: 'div',
render,
mount,
@@ -29,12 +28,9 @@ describe('', () => {
slots: {
root: {
expectedClassName: classes.root,
- testWithElement: null,
},
},
skip: [
- 'propsSpread',
- 'slotsProp',
'reactTestRenderer', // portal https://github.com/facebook/react/issues/11565
],
}),
diff --git a/packages/mui-base/src/PopperUnstyled/PopperUnstyled.test.js b/packages/mui-base/src/PopperUnstyled/PopperUnstyled.test.js
index f9f26f4d9d1d35..ee065fbedd6cd7 100644
--- a/packages/mui-base/src/PopperUnstyled/PopperUnstyled.test.js
+++ b/packages/mui-base/src/PopperUnstyled/PopperUnstyled.test.js
@@ -19,10 +19,6 @@ describe('', () => {
mount,
refInstanceof: window.HTMLDivElement,
skip: [
- 'themeDefaultProps',
- 'themeStyleOverrides',
- 'themeVariants',
- 'propsSpread',
// https://github.com/facebook/react/issues/11565
'reactTestRenderer',
],
diff --git a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.test.tsx b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.test.tsx
index 5a53b551a9099b..7515487a5ee9c8 100644
--- a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.test.tsx
+++ b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.test.tsx
@@ -34,7 +34,6 @@ describe('', () => {
expectedClassName: tabPanelUnstyledClasses.root,
},
},
-
skip: [
'reactTestRenderer', // Need to be wrapped with TabsContext
],
diff --git a/packages/mui-base/src/TabUnstyled/TabUnstyled.test.tsx b/packages/mui-base/src/TabUnstyled/TabUnstyled.test.tsx
index 9b05887804b123..74c8c497f8c192 100644
--- a/packages/mui-base/src/TabUnstyled/TabUnstyled.test.tsx
+++ b/packages/mui-base/src/TabUnstyled/TabUnstyled.test.tsx
@@ -34,7 +34,6 @@ describe('', () => {
expectedClassName: tabUnstyledClasses.root,
},
},
-
skip: [
'reactTestRenderer', // Need to be wrapped with TabsContext
],
diff --git a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.test.tsx b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.test.tsx
index 454a81a1ef5082..1467f7bdbcc85f 100644
--- a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.test.tsx
+++ b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.test.tsx
@@ -34,7 +34,6 @@ describe('', () => {
expectedClassName: tabsListUnstyledClasses.root,
},
},
-
skip: [
'reactTestRenderer', // Need to be wrapped with TabsContext
],
diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.js b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.js
index 4b493100f09a24..cd0756671df658 100644
--- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.js
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.js
@@ -2,8 +2,9 @@ import * as React from 'react';
import { expect } from 'chai';
import sinon, { spy, stub } from 'sinon';
import {
- describeConformance,
+ describeConformanceUnstyled,
act,
+ createMount,
createRenderer,
fireEvent,
strictModeDoubleLoggingSupressed,
@@ -12,17 +13,23 @@ import TextareaAutosize from '@mui/base/TextareaAutosize';
describe('', () => {
const { clock, render } = createRenderer();
+ const mount = createMount;
- describeConformance(, () => ({
+ describeConformanceUnstyled(, () => ({
+ render,
+ mount,
inheritComponent: 'textarea',
refInstanceof: window.HTMLTextAreaElement,
+ slots: {},
skip: [
- 'rootClass',
+ // doesn't have slots, so these tests are irrelevant:
'componentProp',
- 'componentsProp',
- 'themeDefaultProps',
- 'themeStyleOverrides',
- 'themeVariants',
+ 'mergeClassName',
+ 'ownerStatePropagation',
+ 'propsSpread',
+ 'refForwarding',
+ 'rootClass',
+ 'slotsProp',
],
}));
diff --git a/test/utils/describeConformanceUnstyled.tsx b/test/utils/describeConformanceUnstyled.tsx
index d545885d366994..2188f4e273a564 100644
--- a/test/utils/describeConformanceUnstyled.tsx
+++ b/test/utils/describeConformanceUnstyled.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { expect } from 'chai';
-import { MuiRenderResult, RenderOptions } from './createRenderer';
+import { MuiRenderResult, RenderOptions, screen } from './createRenderer';
import {
ConformanceOptions,
describeRef,
@@ -46,7 +46,6 @@ interface WithCustomProp {
interface WithOwnerState {
ownerState: Record;
- expectedOwnerState: Record;
}
function forEachSlot(
@@ -76,7 +75,7 @@ function testPropForwarding(
const CustomRoot = React.forwardRef(
({ fooBar, lang }: WithCustomProp, ref: React.ForwardedRef) => {
// @ts-ignore
- return ;
+ return ;
},
);
@@ -85,26 +84,25 @@ function testPropForwarding(
fooBar: randomStringValue(),
};
- const { container } = render(
- React.cloneElement(element, { slots: { root: CustomRoot }, ...otherProps }),
- );
+ render(React.cloneElement(element, { slots: { root: CustomRoot }, ...otherProps }));
- expect(container.firstChild).to.have.attribute('lang', otherProps.lang);
- expect(container.firstChild).to.have.attribute('data-foobar', otherProps.fooBar);
+ const customRoot = screen.getByTestId('custom-root');
+ expect(customRoot).to.have.attribute('lang', otherProps.lang);
+ expect(customRoot).to.have.attribute('data-foobar', otherProps.fooBar);
});
it('does forward standard props to the root element if an intrinsic element is provided', () => {
const otherProps = {
lang: 'fr',
'data-foobar': randomStringValue(),
+ 'data-testid': 'custom-root',
};
- const { container } = render(
- React.cloneElement(element, { slots: { root: Element }, ...otherProps }),
- );
+ render(React.cloneElement(element, { slots: { root: Element }, ...otherProps }));
- expect(container.firstChild).to.have.attribute('lang', otherProps.lang);
- expect(container.firstChild).to.have.attribute('data-foobar', otherProps['data-foobar']);
+ const customRoot = screen.getByTestId('custom-root');
+ expect(customRoot).to.have.attribute('lang', otherProps.lang);
+ expect(customRoot).to.have.attribute('data-foobar', otherProps['data-foobar']);
});
}
@@ -301,10 +299,11 @@ function testOwnerStatePropagation(
forEachSlot(slots, (slotName) => {
it(`sets the ownerState prop on the ${slotName} slot's component`, () => {
+ let componentOwnerState;
const TestComponent = React.forwardRef(
- ({ ownerState, expectedOwnerState }: WithOwnerState, ref: React.Ref) => {
- expect(ownerState).not.to.equal(undefined);
- expect(ownerState).to.deep.include(expectedOwnerState);
+ ({ ownerState }: WithOwnerState, ref: React.Ref) => {
+ componentOwnerState = ownerState;
+
// @ts-ignore
return ;
},
@@ -314,15 +313,13 @@ function testOwnerStatePropagation(
[slotName]: TestComponent,
};
- const slotProps = {
- [slotName]: {
- expectedOwnerState: {
- id: 'foo',
- },
- },
+ const expectedOwnerState = {
+ id: 'foo',
};
- render(React.cloneElement(element, { slots: slotOverrides, slotProps, id: 'foo' }));
+ render(React.cloneElement(element, { slots: slotOverrides, id: 'foo' }));
+ expect(componentOwnerState).not.to.equal(undefined);
+ expect(componentOwnerState).to.deep.include(expectedOwnerState);
});
});
}