Skip to content
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.

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

[material-ui][TextField][FormLabel][InputLabel][FormControl] Use exact children type to allow React children type augmentation #38872

Merged
merged 9 commits into from
Jan 4, 2024
Prev Previous commit
Next Next commit
keep PropTypes in sync with TS changes
nicegamer7 committed Sep 8, 2023
commit 2ee38183e343d5051b8a3c24af5981e69b2958c1
65 changes: 65 additions & 0 deletions packages/mui-material/scripts/testModuleAugmentation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
const childProcess = require('child_process');
const path = require('path');
const { chunk } = require('lodash');
const glob = require('fast-glob');
const { promisify } = require('util');

const exec = promisify(childProcess.exec);
const packageRoot = path.resolve(__dirname, '../');

async function test(tsconfigPath) {
try {
await exec(['yarn', 'tsc', '--project', tsconfigPath].join(' '), { cwd: packageRoot });
} catch (error) {
if (error.stdout !== undefined) {
// `exec` error
throw new Error(`exit code ${error.code}: ${error.stdout}`);
}
// Unknown error
throw error;
}
}

/**
* Tests various module augmentation scenarios.
* We can't run them with a single `tsc` run since these apply globally.
* Running them all would mean they're not isolated.
* Each test case represents a section in our docs.
*
* We're not using mocha since mocha is used for runtime tests.
* This script also allows us to test in parallel which we can't do with our mocha tests.
*/
async function main() {
const tsconfigPaths = await glob('test/typescript/moduleAugmentation/*.tsconfig.json', {
absolute: true,
cwd: packageRoot,
});
// Need to process in chunks or we might run out-of-memory
// approximate yarn lerna --concurrency 7
const tsconfigPathsChunks = chunk(tsconfigPaths, 7);

// eslint-disable-next-line no-restricted-syntax
for await (const tsconfigPathsChunk of tsconfigPathsChunks) {
await Promise.all(
tsconfigPathsChunk.map(async (tsconfigPath) => {
await test(tsconfigPath).then(
() => {
// eslint-disable-next-line no-console -- test runner feedback
console.log(`PASS ${path.relative(process.cwd(), tsconfigPath)}`);
},
(error) => {
// don't bail but log the error
console.error(`FAIL ${path.relative(process.cwd(), tsconfigPath)}\n ${error}`);
// and mark the test as failed
process.exitCode = 1;
},
);
}),
);
}
}

main().catch((error) => {
console.error(error);
process.exit(1);
});
7 changes: 5 additions & 2 deletions packages/mui-material/src/FormControl/FormControl.d.ts
Original file line number Diff line number Diff line change
@@ -8,8 +8,11 @@ import { FormControlClasses } from './formControlClasses';
export interface FormControlPropsSizeOverrides {}
export interface FormControlPropsColorOverrides {}

export interface FormControlOwnProps
extends Pick<React.HTMLAttributes<HTMLDivElement>, 'children'> {
export interface FormControlOwnProps {
/**
* The content of the component.
*/
children?: React.HTMLAttributes<HTMLDivElement>['children'];
/**
* Override or extend the styles applied to the component.
*/
6 changes: 5 additions & 1 deletion packages/mui-material/src/FormLabel/FormLabel.d.ts
Original file line number Diff line number Diff line change
@@ -12,7 +12,11 @@ export interface FormLabelPropsColorOverrides {}
*/
export type FormLabelBaseProps = React.LabelHTMLAttributes<HTMLLabelElement>;

export interface FormLabelOwnProps extends Pick<FormLabelBaseProps, 'children'> {
export interface FormLabelOwnProps {
/**
* The content of the component.
*/
children?: React.LabelHTMLAttributes<HTMLLabelElement>['children'];
/**
* Override or extend the styles applied to the component.
*/
2 changes: 1 addition & 1 deletion packages/mui-material/src/TextField/TextField.js
Original file line number Diff line number Diff line change
@@ -236,7 +236,7 @@ TextField.propTypes /* remove-proptypes */ = {
*/
autoFocus: PropTypes.bool,
/**
* @ignore
* The content of the component.
*/
children: PropTypes.node,
/**