+> = {
+ material: {
+ rootPath: path.join(process.cwd(), 'packages/mui-material'),
+ entryPointPath: 'src/index.d.ts',
+ },
+ lab: {
+ rootPath: path.join(process.cwd(), 'packages/mui-lab'),
+ entryPointPath: 'src/index.d.ts',
+ },
+ base: {
+ rootPath: path.join(process.cwd(), 'packages/mui-base'),
+ entryPointPath: 'src/index.d.ts',
+ },
+ joy: {
+ rootPath: path.join(process.cwd(), 'packages/mui-joy'),
+ entryPointPath: 'src/index.ts',
+ },
+ system: {
+ rootPath: path.join(process.cwd(), 'packages/mui-system'),
+ entryPointPath: 'src/index.d.ts',
+ },
+ 'material-next': {
+ rootPath: path.join(process.cwd(), 'packages/mui-material-next'),
+ entryPointPath: 'src/index.ts',
+ },
+ docs: {
+ rootPath: path.join(process.cwd(), 'docs'),
+ tsConfigPath: 'tsconfig.json',
+ },
+};
diff --git a/packages/api-docs-builder/utils/createTypeScriptProject.ts b/packages/api-docs-builder/utils/createTypeScriptProject.ts
index f6c19d309cdd54..6a0cc4b54ce209 100644
--- a/packages/api-docs-builder/utils/createTypeScriptProject.ts
+++ b/packages/api-docs-builder/utils/createTypeScriptProject.ts
@@ -10,7 +10,7 @@ export interface TypeScriptProject {
checker: ts.TypeChecker;
}
-interface CreateTypeScriptProjectOptions {
+export interface CreateTypeScriptProjectOptions {
name: string;
rootPath: string;
/**
@@ -21,9 +21,15 @@ interface CreateTypeScriptProjectOptions {
tsConfigPath?: string;
/**
* File used as root of the package.
+ * This property is used to gather the exports of the project.
* The path must be relative to the root path.
*/
- entryPointPath: string;
+ entryPointPath?: string;
+ /**
+ * Files to include in the project.
+ * By default, it will use the files defined in the tsconfig.
+ */
+ files?: string[];
}
export const createTypeScriptProject = (
@@ -33,11 +39,11 @@ export const createTypeScriptProject = (
name,
rootPath,
tsConfigPath: inputTsConfigPath = 'tsconfig.build.json',
- entryPointPath: inputEntryPointPath = 'src/index.ts',
+ entryPointPath: inputEntryPointPath,
+ files,
} = options;
const tsConfigPath = path.join(rootPath, inputTsConfigPath);
- const entryPointPath = path.join(rootPath, inputEntryPointPath);
const tsConfigFile = ts.readConfigFile(tsConfigPath, (filePath) =>
fs.readFileSync(filePath).toString(),
@@ -47,6 +53,13 @@ export const createTypeScriptProject = (
throw tsConfigFile.error;
}
+ // The build config does not parse the `.d.ts` files, but we sometimes need them to get the exports.
+ if (tsConfigFile.config.exclude) {
+ tsConfigFile.config.exclude = tsConfigFile.config.exclude.filter(
+ (pattern: string) => pattern !== 'src/**/*.d.ts',
+ );
+ }
+
const tsConfigFileContent = ts.parseJsonConfigFileContent(
tsConfigFile.config,
ts.sys,
@@ -58,18 +71,25 @@ export const createTypeScriptProject = (
}
const program = ts.createProgram({
- rootNames: [entryPointPath],
+ rootNames: files ?? tsConfigFileContent.fileNames,
options: tsConfigFileContent.options,
});
const checker = program.getTypeChecker();
- const sourceFile = program.getSourceFile(entryPointPath);
- const exports = Object.fromEntries(
- checker.getExportsOfModule(checker.getSymbolAtLocation(sourceFile!)!).map((symbol) => {
- return [symbol.name, symbol];
- }),
- );
+ let exports: TypeScriptProject['exports'];
+ if (inputEntryPointPath) {
+ const entryPointPath = path.join(rootPath, inputEntryPointPath);
+ const sourceFile = program.getSourceFile(entryPointPath);
+
+ exports = Object.fromEntries(
+ checker.getExportsOfModule(checker.getSymbolAtLocation(sourceFile!)!).map((symbol) => {
+ return [symbol.name, symbol];
+ }),
+ );
+ } else {
+ exports = {};
+ }
return {
name,
@@ -79,3 +99,28 @@ export const createTypeScriptProject = (
checker,
};
};
+
+export const createTypeScriptProjectBuilder = (
+ projectsConfig: Record>,
+) => {
+ const projects = new Map();
+
+ return (projectName: P, options: { files?: string[] } = {}) => {
+ const cachedProject = projects.get(projectName);
+ if (cachedProject != null) {
+ return cachedProject;
+ }
+
+ // eslint-disable-next-line no-console
+ console.log(`Building new TS project: ${projectName}`);
+
+ const project = createTypeScriptProject({
+ name: projectName,
+ ...projectsConfig[projectName],
+ ...options,
+ });
+
+ projects.set(projectName, project);
+ return project;
+ };
+};
diff --git a/packages/api-docs-builder/utils/getPropsFromComponentNode.ts b/packages/api-docs-builder/utils/getPropsFromComponentNode.ts
new file mode 100644
index 00000000000000..f2607c1ad32e71
--- /dev/null
+++ b/packages/api-docs-builder/utils/getPropsFromComponentNode.ts
@@ -0,0 +1,345 @@
+import * as ts from 'typescript';
+import { TypeScriptProject } from './createTypeScriptProject';
+
+export interface ParsedProp {
+ /**
+ * If `true`, some signatures do not contain this property.
+ * e.g: `id` in `{ id: number, value: string } | { value: string }`
+ */
+ onlyUsedInSomeSignatures: boolean;
+ signatures: { symbol: ts.Symbol; componentType: ts.Type }[];
+}
+
+export interface ParsedComponent {
+ name: string;
+ location: ts.Node;
+ type: ts.Type;
+ sourceFile: ts.SourceFile | undefined;
+ props: Record;
+}
+
+function isTypeJSXElementLike(type: ts.Type, project: TypeScriptProject): boolean {
+ if (type.isUnion()) {
+ return type.types.every(
+ // eslint-disable-next-line no-bitwise
+ (subType) => subType.flags & ts.TypeFlags.Null || isTypeJSXElementLike(subType, project),
+ );
+ }
+ if (type.symbol) {
+ const name = project.checker.getFullyQualifiedName(type.symbol);
+ return (
+ // Remove once global JSX namespace is no longer used by React
+ name === 'global.JSX.Element' || name === 'React.JSX.Element' || name === 'React.ReactElement'
+ );
+ }
+
+ return false;
+}
+
+function getJSXLikeReturnValueFromFunction(type: ts.Type, project: TypeScriptProject) {
+ return type
+ .getCallSignatures()
+ .filter((signature) => isTypeJSXElementLike(signature.getReturnType(), project));
+}
+
+function parsePropsType({
+ name,
+ type,
+ shouldInclude = () => true,
+ location,
+ sourceFile,
+}: {
+ name: string;
+ type: ts.Type;
+ location: ts.Node;
+ shouldInclude?: (data: { name: string; depth: number }) => boolean;
+ sourceFile: ts.SourceFile | undefined;
+}): ParsedComponent {
+ const parsedProps: Record = {};
+
+ type
+ .getProperties()
+ .filter((property) => shouldInclude({ name: property.getName(), depth: 1 }))
+ .forEach((property) => {
+ parsedProps[property.getName()] = {
+ signatures: [
+ {
+ symbol: property,
+ componentType: type,
+ },
+ ],
+ onlyUsedInSomeSignatures: false,
+ };
+ });
+
+ return {
+ name,
+ location,
+ type,
+ sourceFile,
+ props: parsedProps,
+ };
+}
+
+function parseFunctionComponent({
+ node,
+ shouldInclude,
+ project,
+}: {
+ node: ts.VariableDeclaration | ts.FunctionDeclaration;
+ shouldInclude?: (data: { name: string; depth: number }) => boolean;
+ project: TypeScriptProject;
+}): ParsedComponent | null {
+ if (!node.name) {
+ return null;
+ }
+
+ const symbol = project.checker.getSymbolAtLocation(node.name);
+ if (!symbol) {
+ return null;
+ }
+ const componentName = node.name.getText();
+
+ // Discriminate render functions to components
+ if (componentName[0].toUpperCase() !== componentName[0]) {
+ return null;
+ }
+
+ const signatures = getJSXLikeReturnValueFromFunction(
+ project.checker.getTypeOfSymbolAtLocation(symbol, symbol.valueDeclaration!),
+ project,
+ );
+ if (signatures.length === 0) {
+ return null;
+ }
+
+ const parsedComponents = signatures.map((signature) =>
+ parsePropsType({
+ shouldInclude,
+ name: componentName,
+ type: project.checker.getTypeOfSymbolAtLocation(
+ signature.parameters[0],
+ signature.parameters[0].valueDeclaration!,
+ ),
+ location: signature.parameters[0].valueDeclaration!,
+ sourceFile: node.getSourceFile(),
+ }),
+ );
+
+ const squashedProps: Record = {};
+ parsedComponents.forEach((parsedComponent) => {
+ Object.keys(parsedComponent.props).forEach((propName) => {
+ if (!squashedProps[propName]) {
+ squashedProps[propName] = parsedComponent.props[propName];
+ } else {
+ squashedProps[propName].signatures = [
+ ...squashedProps[propName].signatures,
+ ...parsedComponent.props[propName].signatures,
+ ];
+ }
+ });
+ });
+
+ const squashedParsedComponent: ParsedComponent = {
+ ...parsedComponents[0],
+ props: squashedProps,
+ };
+
+ Object.keys(squashedParsedComponent.props).forEach((propName) => {
+ squashedParsedComponent.props[propName].onlyUsedInSomeSignatures =
+ squashedParsedComponent.props[propName].signatures.length < signatures.length;
+ });
+
+ return squashedParsedComponent;
+}
+
+export interface GetPropsFromComponentDeclarationOptions {
+ project: TypeScriptProject;
+ node: ts.Node;
+ /**
+ * Called before a PropType is added to a component/object
+ * @returns true to include the prop, false to skip it
+ */
+ shouldInclude?: (data: { name: string; depth: number }) => boolean;
+ /**
+ * Control if const declarations should be checked
+ * @default false
+ * @example declare const Component: React.JSXElementConstructor;
+ */
+ checkDeclarations?: boolean;
+}
+
+function getPropsFromVariableDeclaration({
+ node,
+ project,
+ checkDeclarations,
+ shouldInclude,
+}: { node: ts.VariableDeclaration } & Pick<
+ GetPropsFromComponentDeclarationOptions,
+ 'project' | 'checkDeclarations' | 'shouldInclude'
+>) {
+ const type = project.checker.getTypeAtLocation(node.name);
+ if (!node.initializer) {
+ if (
+ checkDeclarations &&
+ type.aliasSymbol &&
+ type.aliasTypeArguments &&
+ project.checker.getFullyQualifiedName(type.aliasSymbol) === 'React.JSXElementConstructor'
+ ) {
+ const propsType = type.aliasTypeArguments[0];
+ if (propsType === undefined) {
+ throw new TypeError(
+ 'Unable to find symbol for `props`. This is a bug in typescript-to-proptypes.',
+ );
+ }
+ return parsePropsType({
+ name: node.name.getText(),
+ type: propsType,
+ location: node.name,
+ shouldInclude,
+ sourceFile: node.getSourceFile(),
+ });
+ }
+
+ if (checkDeclarations) {
+ return parseFunctionComponent({
+ node,
+ shouldInclude,
+ project,
+ });
+ }
+
+ return null;
+ }
+
+ if (
+ (ts.isArrowFunction(node.initializer) || ts.isFunctionExpression(node.initializer)) &&
+ node.initializer.parameters.length === 1
+ ) {
+ return parseFunctionComponent({
+ node,
+ shouldInclude,
+ project,
+ });
+ }
+ // x = React.memo((props:type) { return
})
+ // x = React.forwardRef((props:type) { return
})
+ if (ts.isCallExpression(node.initializer) && node.initializer.arguments.length > 0) {
+ const potentialComponent = node.initializer.arguments[0];
+ if (
+ (ts.isArrowFunction(potentialComponent) || ts.isFunctionExpression(potentialComponent)) &&
+ potentialComponent.parameters.length > 0 &&
+ getJSXLikeReturnValueFromFunction(
+ project.checker.getTypeAtLocation(potentialComponent),
+ project,
+ ).length > 0
+ ) {
+ const propsSymbol = project.checker.getSymbolAtLocation(
+ potentialComponent.parameters[0].name,
+ );
+ if (propsSymbol) {
+ return parsePropsType({
+ name: node.name.getText(),
+ type: project.checker.getTypeOfSymbolAtLocation(
+ propsSymbol,
+ propsSymbol.valueDeclaration!,
+ ),
+ location: propsSymbol.valueDeclaration!,
+ shouldInclude,
+ sourceFile: node.getSourceFile(),
+ });
+ }
+ }
+
+ return null;
+ }
+
+ // handle component factories: x = createComponent()
+ if (
+ checkDeclarations &&
+ node.initializer &&
+ getJSXLikeReturnValueFromFunction(type, project).length > 0
+ ) {
+ return parseFunctionComponent({
+ node,
+ shouldInclude,
+ project,
+ });
+ }
+
+ return null;
+}
+
+export function getPropsFromComponentNode({
+ node,
+ shouldInclude,
+ project,
+ checkDeclarations,
+}: GetPropsFromComponentDeclarationOptions): ParsedComponent | null {
+ let parsedComponent: ParsedComponent | null = null;
+
+ // function x(props: type) { return
}
+ if (
+ ts.isFunctionDeclaration(node) &&
+ node.name &&
+ node.parameters.length === 1 &&
+ getJSXLikeReturnValueFromFunction(project.checker.getTypeAtLocation(node.name), project)
+ .length > 0
+ ) {
+ parsedComponent = parseFunctionComponent({ node, shouldInclude, project });
+ } else if (ts.isVariableDeclaration(node)) {
+ parsedComponent = getPropsFromVariableDeclaration({
+ node,
+ project,
+ checkDeclarations,
+ shouldInclude,
+ });
+ } else if (ts.isVariableStatement(node)) {
+ // const x = ...
+ ts.forEachChild(node.declarationList, (variableNode) => {
+ if (parsedComponent != null) {
+ return;
+ }
+
+ // x = (props: type) => { return
}
+ // x = function(props: type) { return
}
+ // x = function y(props: type) { return
}
+ // x = react.memo((props:type) { return
})
+ if (ts.isVariableDeclaration(variableNode) && variableNode.name) {
+ parsedComponent = getPropsFromVariableDeclaration({
+ node: variableNode,
+ project,
+ checkDeclarations,
+ shouldInclude,
+ });
+ }
+
+ if (
+ ts.isClassDeclaration(variableNode) &&
+ variableNode.name &&
+ variableNode.heritageClauses &&
+ variableNode.heritageClauses.length === 1
+ ) {
+ const heritage = variableNode.heritageClauses[0];
+ if (heritage.types.length !== 1) {
+ return;
+ }
+
+ const arg = heritage.types[0];
+ if (!arg.typeArguments) {
+ return;
+ }
+
+ parsedComponent = parsePropsType({
+ shouldInclude,
+ name: variableNode.name.getText(),
+ location: arg.typeArguments[0],
+ type: project.checker.getTypeAtLocation(arg.typeArguments[0]),
+ sourceFile: node.getSourceFile(),
+ });
+ }
+ });
+ }
+
+ return parsedComponent;
+}
diff --git a/packages/api-docs-builder/utils/getPropsFromComponentSymbol.ts b/packages/api-docs-builder/utils/getPropsFromComponentSymbol.ts
deleted file mode 100644
index 42db486478166c..00000000000000
--- a/packages/api-docs-builder/utils/getPropsFromComponentSymbol.ts
+++ /dev/null
@@ -1,239 +0,0 @@
-import * as ts from 'typescript';
-import { TypeScriptProject } from './createTypeScriptProject';
-import resolveExportSpecifier from './resolveExportSpecifier';
-
-export interface ParsedProp {
- types: ts.Type[];
-}
-
-function isTypeJSXElementLike(type: ts.Type, project: TypeScriptProject): boolean {
- if (type.isUnion()) {
- return type.types.every(
- // eslint-disable-next-line no-bitwise
- (subType) => subType.flags & ts.TypeFlags.Null || isTypeJSXElementLike(subType, project),
- );
- }
- if (type.symbol) {
- const name = project.checker.getFullyQualifiedName(type.symbol);
- return (
- // Remove once global JSX namespace is no longer used by React
- name === 'global.JSX.Element' || name === 'React.JSX.Element' || name === 'React.ReactElement'
- );
- }
-
- return false;
-}
-
-function parsePropsSymbol({
- symbol,
- location,
- shouldInclude = () => true,
- project,
-}: {
- symbol: ts.Symbol | undefined;
- location: ts.Node;
- shouldInclude: (data: { name: string; depth: number }) => boolean;
- project: TypeScriptProject;
-}): Record {
- const type =
- symbol === undefined
- ? project.checker.getTypeAtLocation(location)
- : project.checker.getTypeOfSymbolAtLocation(symbol, location);
-
- const parsedProps: Record = {};
-
- type
- .getProperties()
- .filter((property) => shouldInclude({ name: property.getName(), depth: 1 }))
- .forEach((property) => {
- parsedProps[property.getName()] = {
- types: [project.checker.getTypeAtLocation(property.declarations?.[0]!)],
- };
- });
-
- return parsedProps;
-}
-
-function parseFunctionComponent({
- declaration,
- shouldInclude,
- project,
-}: {
- declaration: ts.VariableDeclaration | ts.FunctionDeclaration;
- shouldInclude: (data: { name: string; depth: number }) => boolean;
- project: TypeScriptProject;
-}) {
- if (!declaration.name) {
- return null;
- }
-
- const symbol = project.checker.getSymbolAtLocation(declaration.name);
- if (!symbol) {
- return null;
- }
- const componentName = declaration.name.getText();
-
- // Discriminate render functions to components
- if (componentName[0].toUpperCase() !== componentName[0]) {
- return null;
- }
-
- const type = project.checker.getTypeOfSymbolAtLocation(symbol, symbol.valueDeclaration!);
-
- // squash props
- // { variant: 'a', href: string } & { variant: 'b' }
- // to
- // { variant: 'a' | 'b', href?: string }
-
- const squashedProps: Record = {};
-
- type.getCallSignatures().forEach((signature) => {
- if (!isTypeJSXElementLike(signature.getReturnType(), project)) {
- return;
- }
-
- const signatureProps = parsePropsSymbol({
- symbol: signature.parameters[0],
- location: signature.parameters[0].valueDeclaration!,
- shouldInclude,
- project,
- });
-
- Object.keys(signatureProps).forEach((propName) => {
- if (!squashedProps[propName]) {
- squashedProps[propName] = signatureProps[propName];
- } else {
- squashedProps[propName] = {
- ...squashedProps[propName],
- types: [...squashedProps[propName].types, ...signatureProps[propName].types],
- };
- }
- });
- });
-
- return squashedProps;
-}
-
-interface GetPropsFromComponentDeclarationOptions {
- project: TypeScriptProject;
- symbol: ts.Symbol;
- /**
- * Called before a PropType is added to a component/object
- * @returns true to include the prop, false to skip it
- */
- shouldInclude: (data: { name: string; depth: number }) => boolean;
-}
-export default function getPropsFromComponentSymbol({
- symbol: inSymbol,
- shouldInclude,
- project,
-}: GetPropsFromComponentDeclarationOptions) {
- const localeSymbol = resolveExportSpecifier(inSymbol, project);
- const declaration = localeSymbol.valueDeclaration!;
-
- // function x(props: type) { return
}
- if (
- ts.isFunctionDeclaration(declaration) &&
- declaration.name &&
- declaration.parameters.length === 1 &&
- project.checker
- .getTypeAtLocation(declaration.name)
- .getCallSignatures()
- .some((signature) => isTypeJSXElementLike(signature.getReturnType(), project))
- ) {
- return parseFunctionComponent({ declaration, shouldInclude, project });
- }
-
- // x = (props: type) => { return
}
- // x = function(props: type) { return
}
- // x = function y(props: type) { return
}
- // x = react.memo((props:type) { return
})
- if (ts.isVariableDeclaration(declaration) && declaration.name) {
- const type = project.checker.getTypeAtLocation(declaration.name);
- if (!declaration.initializer) {
- if (
- type.aliasSymbol &&
- type.aliasTypeArguments &&
- project.checker.getFullyQualifiedName(type.aliasSymbol) === 'React.JSXElementConstructor'
- ) {
- const propsSymbol = type.aliasTypeArguments[0].getSymbol();
- if (propsSymbol === undefined) {
- throw new TypeError(
- 'Unable to find symbol for `props`. This is a bug in typescript-to-proptypes.',
- );
- }
- return parsePropsSymbol({
- symbol: propsSymbol,
- location: declaration.name,
- shouldInclude,
- project,
- });
- }
-
- return parseFunctionComponent({ declaration, shouldInclude, project });
- }
- if (
- (ts.isArrowFunction(declaration.initializer) ||
- ts.isFunctionExpression(declaration.initializer)) &&
- declaration.initializer.parameters.length === 1
- ) {
- return parseFunctionComponent({ declaration, shouldInclude, project });
- }
- // x = react.memo((props:type) { return
})
- if (
- ts.isCallExpression(declaration.initializer) &&
- declaration.initializer.arguments.length > 0
- ) {
- const arg = declaration.initializer.arguments[0];
- if ((ts.isArrowFunction(arg) || ts.isFunctionExpression(arg)) && arg.parameters.length > 0) {
- const symbol = project.checker.getSymbolAtLocation(arg.parameters[0].name);
- if (symbol) {
- return parsePropsSymbol({
- symbol,
- location: symbol.valueDeclaration!,
- shouldInclude,
- project,
- });
- }
- }
-
- return null;
- }
- // handle component factories: x = createComponent()
- if (
- type
- .getCallSignatures()
- .some((signature) => isTypeJSXElementLike(signature.getReturnType(), project))
- ) {
- return parseFunctionComponent({ declaration, shouldInclude, project });
- }
-
- return null;
- }
-
- if (
- ts.isClassDeclaration(declaration) &&
- declaration.name &&
- declaration.heritageClauses &&
- declaration.heritageClauses.length === 1
- ) {
- const heritage = declaration.heritageClauses[0];
- if (heritage.types.length !== 1) {
- return null;
- }
-
- const arg = heritage.types[0];
- if (!arg.typeArguments) {
- return null;
- }
-
- return parsePropsSymbol({
- symbol: undefined,
- location: arg.typeArguments[0],
- shouldInclude,
- project,
- });
- }
-
- return null;
-}
diff --git a/packages/api-docs-builder/utils/parseStyles.ts b/packages/api-docs-builder/utils/parseStyles.ts
index 188bd53c2e25bf..ccc155095d6208 100644
--- a/packages/api-docs-builder/utils/parseStyles.ts
+++ b/packages/api-docs-builder/utils/parseStyles.ts
@@ -1,7 +1,8 @@
import * as ts from 'typescript';
import { getSymbolDescription } from '../buildApiUtils';
import { TypeScriptProject } from './createTypeScriptProject';
-import getPropsFromComponentSymbol from './getPropsFromComponentSymbol';
+import { getPropsFromComponentNode } from './getPropsFromComponentNode';
+import resolveExportSpecifier from './resolveExportSpecifier';
export interface Classes {
classes: string[];
@@ -78,19 +79,24 @@ export default function parseStyles({
throw new Error(`No exported component for the componentName "${componentName}"`);
}
- const classesProp = getPropsFromComponentSymbol({
- symbol: exportedSymbol,
+ const localeSymbol = resolveExportSpecifier(exportedSymbol, project);
+ const declaration = localeSymbol.valueDeclaration!;
+
+ const classesProp = getPropsFromComponentNode({
+ node: declaration,
project,
shouldInclude: ({ name }) => name === 'classes',
- })?.classes;
+ checkDeclarations: true,
+ })?.props.classes;
if (classesProp == null) {
// We could not infer the type of the classes prop, so we try to extract them from the {ComponentName}Classes interface
return extractClasses(project, componentName);
}
const classes: Record = {};
- classesProp.types.forEach((propType) => {
- removeUndefinedFromType(propType)
+ classesProp.signatures.forEach((propType) => {
+ const type = project.checker.getTypeAtLocation(propType.symbol.declarations?.[0]!);
+ removeUndefinedFromType(type)
?.getProperties()
.forEach((property) => {
classes[property.escapedName.toString()] = getSymbolDescription(property, project);
diff --git a/packages/feedback/package.json b/packages/feedback/package.json
index 1a98b80fd46567..6f01ca4cd3e130 100644
--- a/packages/feedback/package.json
+++ b/packages/feedback/package.json
@@ -25,6 +25,6 @@
"claudia": "^5.14.1"
},
"optionalDependencies": {
- "aws-sdk": "^2.1445.0"
+ "aws-sdk": "^2.1450.0"
}
}
diff --git a/packages/mui-base/src/Popper/Popper.tsx b/packages/mui-base/src/Popper/Popper.tsx
index 7ae7898921b13a..b7a44861a4fcf6 100644
--- a/packages/mui-base/src/Popper/Popper.tsx
+++ b/packages/mui-base/src/Popper/Popper.tsx
@@ -96,7 +96,7 @@ const PopperTooltip = React.forwardRef(function PopperTooltip<
...other
} = props;
- const tooltipRef = React.useRef(null);
+ const tooltipRef = React.useRef(null);
const ownRef = useForkRef(tooltipRef, forwardedRef);
const popperRef = React.useRef(null);
diff --git a/packages/mui-base/src/Select/Select.tsx b/packages/mui-base/src/Select/Select.tsx
index 07f41eb6f9ea31..a74e8ba2fcf6d8 100644
--- a/packages/mui-base/src/Select/Select.tsx
+++ b/packages/mui-base/src/Select/Select.tsx
@@ -96,7 +96,7 @@ const Select = React.forwardRef(function Select<
renderValueProp ?? defaultRenderValue;
const [buttonDefined, setButtonDefined] = React.useState(false);
- const buttonRef = React.useRef(null);
+ const buttonRef = React.useRef(null);
const listboxRef = React.useRef(null);
const Button = slots.root ?? 'button';
diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts b/packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts
index a045d5e84ba799..8c9190c923bbd8 100644
--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts
@@ -28,7 +28,7 @@ export function createFilterOptions(
export type AutocompleteFreeSoloValueMapping = FreeSolo extends true ? string : never;
export type AutocompleteValue = Multiple extends true
- ? Array>
+ ? ReadonlyArray>
: DisableClearable extends true
? NonNullable>
: Value | null | AutocompleteFreeSoloValueMapping;
diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.spec.ts b/packages/mui-base/src/useAutocomplete/useAutocomplete.spec.ts
index 268648a8de8fe0..e356fee64feb4a 100644
--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.spec.ts
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.spec.ts
@@ -73,7 +73,7 @@ function Component() {
options: ['1', '2', '3'],
multiple: true,
onChange(event, value) {
- expectType(value);
+ expectType(value);
value;
},
});
@@ -83,7 +83,7 @@ function Component() {
options: ['1', '2', '3', 4, true],
multiple: true,
onChange(event, value) {
- expectType, typeof value>(value);
+ expectType, typeof value>(value);
},
});
@@ -92,7 +92,7 @@ function Component() {
options: persons,
multiple: true,
onChange(event, value) {
- expectType(value);
+ expectType(value);
value;
},
});
@@ -101,7 +101,7 @@ function Component() {
useAutocomplete({
options: persons,
multiple: true,
- onChange(event, value: Person[]) {},
+ onChange(event, value: readonly Person[]) {},
});
// options accepts const and value has correct type
@@ -112,6 +112,16 @@ function Component() {
},
});
+ // values accepts const and value has correct type
+ useAutocomplete({
+ options: ['1', '2', '3'] as const,
+ multiple: true,
+ value: ['1', '3'] as const,
+ onChange(event, value) {
+ expectType, typeof value>(value);
+ },
+ });
+
// Disable clearable
useAutocomplete({
@@ -159,7 +169,7 @@ function Component() {
options: persons,
multiple: true,
onChange(event, value) {
- expectType, typeof value>(value);
+ expectType, typeof value>(value);
},
freeSolo: true,
});
diff --git a/packages/mui-base/src/useMenu/useMenu.ts b/packages/mui-base/src/useMenu/useMenu.ts
index dbed403af6df12..11064c9b3830aa 100644
--- a/packages/mui-base/src/useMenu/useMenu.ts
+++ b/packages/mui-base/src/useMenu/useMenu.ts
@@ -38,7 +38,7 @@ const FALLBACK_MENU_CONTEXT: DropdownContextValue = {
export function useMenu(parameters: UseMenuParameters = {}): UseMenuReturnValue {
const { listboxRef: listboxRefProp, onItemsChange, id: idParam } = parameters;
- const rootRef = React.useRef(null);
+ const rootRef = React.useRef(null);
const handleRef = useForkRef(rootRef, listboxRefProp);
const listboxId = useId(idParam) ?? '';
diff --git a/packages/mui-base/src/useSelect/useSelect.ts b/packages/mui-base/src/useSelect/useSelect.ts
index 14ddc5db7966db..03fb06affc6a99 100644
--- a/packages/mui-base/src/useSelect/useSelect.ts
+++ b/packages/mui-base/src/useSelect/useSelect.ts
@@ -107,7 +107,7 @@ function useSelect(
const buttonRef = React.useRef(null);
const handleButtonRef = useForkRef(buttonRefProp, buttonRef);
- const listboxRef = React.useRef(null);
+ const listboxRef = React.useRef(null);
const listboxId = useId(listboxIdProp);
let defaultValue: OptionValue[] | undefined;
diff --git a/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-actual.js b/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-actual.js
index 88de3b245d668f..04b760ec9ff1a2 100644
--- a/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-actual.js
+++ b/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-actual.js
@@ -159,7 +159,7 @@ function DocSearchHit(props) {
function displayTag(pathname) {
// does not need to show product label for MUI X because they are grouped by the product name in the search
- // ie. Data Grid, Date Picker
+ // i.e. Data Grid, Date Picker
if (!pathname.match(/^\/(material-ui|joy-ui|base)\//)) {
return null;
}
diff --git a/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-expected.js b/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-expected.js
index 53909746bf8b63..4bb39853b13ef7 100644
--- a/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-expected.js
+++ b/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-expected.js
@@ -159,7 +159,7 @@ function DocSearchHit(props) {
function displayTag(pathname) {
// does not need to show product label for MUI X because they are grouped by the product name in the search
- // ie. Data Grid, Date Picker
+ // i.e. Data Grid, Date Picker
if (!pathname.match(/^\/(material-ui|joy-ui|base)\//)) {
return null;
}
diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx
index 4c34ea7161aea3..3d8649e709bc99 100644
--- a/packages/mui-joy/src/Button/Button.tsx
+++ b/packages/mui-joy/src/Button/Button.tsx
@@ -132,8 +132,8 @@ export const getButtonStyles = ({
paddingInline: '1.5rem',
}),
WebkitTapHighlightColor: 'transparent',
- borderRadius: `var(--Button-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, eg. Input
- margin: `var(--Button-margin)`, // to be controlled by other components, eg. Input
+ borderRadius: `var(--Button-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, e.g. Input
+ margin: `var(--Button-margin)`, // to be controlled by other components, e.g. Input
border: 'none',
backgroundColor: 'transparent',
cursor: 'pointer',
@@ -217,7 +217,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
const color = getColor(inProps.color, buttonGroup.color || colorProp);
const disabled = inProps.disabled ?? (buttonGroup.disabled || disabledProp || loading);
- const buttonRef = React.useRef(null);
+ const buttonRef = React.useRef(null);
const handleRef = useForkRef(buttonRef, ref);
const { focusVisible, setFocusVisible, getRootProps } = useButton({
diff --git a/packages/mui-joy/src/Chip/Chip.tsx b/packages/mui-joy/src/Chip/Chip.tsx
index 4ec4d5882133cc..f35a558d540138 100644
--- a/packages/mui-joy/src/Chip/Chip.tsx
+++ b/packages/mui-joy/src/Chip/Chip.tsx
@@ -184,7 +184,7 @@ const ChipStartDecorator = styled('span', {
'--IconButton-margin': '0 0 0 calc(var(--Chip-decoratorChildOffset) * -1)',
'--Icon-margin': '0 0 0 calc(var(--Chip-paddingInline) / -4)',
display: 'inherit',
- // set zIndex to 1 with order to stay on top of other controls, eg. Checkbox, Radio
+ // set zIndex to 1 with order to stay on top of other controls, e.g. Checkbox, Radio
order: 0,
zIndex: 1,
pointerEvents: 'none',
@@ -198,7 +198,7 @@ const ChipEndDecorator = styled('span', {
'--IconButton-margin': '0 calc(var(--Chip-decoratorChildOffset) * -1) 0 0',
'--Icon-margin': '0 calc(var(--Chip-paddingInline) / -4) 0 0',
display: 'inherit',
- // set zIndex to 1 with order to stay on top of other controls, eg. Checkbox, Radio
+ // set zIndex to 1 with order to stay on top of other controls, e.g. Checkbox, Radio
order: 2,
zIndex: 1,
pointerEvents: 'none',
@@ -248,7 +248,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
const resolvedActionProps =
typeof slotProps.action === 'function' ? slotProps.action(ownerState) : slotProps.action;
- const actionRef = React.useRef(null);
+ const actionRef = React.useRef(null);
const { focusVisible, getRootProps } = useButton({
...resolvedActionProps,
disabled,
@@ -313,7 +313,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
{clickable &&
{children}
diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
index 0eb1f0f189c433..72648ede7bb177 100644
--- a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
+++ b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
@@ -82,7 +82,7 @@ const ChipDelete = React.forwardRef(function ChipDelete(inProps, ref) {
const color = getColor(inProps.color, inheritedColor);
const disabled = disabledProp ?? chipContext.disabled;
- const buttonRef = React.useRef(null);
+ const buttonRef = React.useRef(null);
const handleRef = useForkRef(buttonRef, ref);
const { focusVisible, getRootProps } = useButton({
diff --git a/packages/mui-joy/src/FormHelperText/FormHelperText.tsx b/packages/mui-joy/src/FormHelperText/FormHelperText.tsx
index aa65cc813517a3..a58a9c7be802b3 100644
--- a/packages/mui-joy/src/FormHelperText/FormHelperText.tsx
+++ b/packages/mui-joy/src/FormHelperText/FormHelperText.tsx
@@ -58,7 +58,7 @@ const FormHelperText = React.forwardRef(function FormHelperText(inProps, ref) {
});
const { children, component, slots = {}, slotProps = {}, ...other } = props;
- const rootRef = React.useRef(null);
+ const rootRef = React.useRef(null);
const handleRef = useForkRef(rootRef, ref);
const formControl = React.useContext(FormControlContext);
const setHelperText = formControl?.setHelperText;
diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
index 02964cb2752023..fe092f39d82baf 100644
--- a/packages/mui-joy/src/IconButton/IconButton.tsx
+++ b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -76,8 +76,8 @@ export const StyledIconButton = styled('button')<{ ownerState: IconButtonOwnerSt
paddingBlock: 0,
fontFamily: theme.vars.fontFamily.body,
fontWeight: theme.vars.fontWeight.md,
- margin: `var(--IconButton-margin)`, // to be controlled by other components, eg. Input
- borderRadius: `var(--IconButton-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, eg. Input
+ margin: `var(--IconButton-margin)`, // to be controlled by other components, e.g. Input
+ borderRadius: `var(--IconButton-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, e.g. Input
border: 'none',
boxSizing: 'border-box',
backgroundColor: 'transparent',
@@ -147,7 +147,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
const color = getColor(inProps.color, buttonGroup.color || colorProp);
const disabled = inProps.disabled ?? (buttonGroup.disabled || disabledProp);
- const buttonRef = React.useRef(null);
+ const buttonRef = React.useRef(null);
const handleRef = useForkRef(buttonRef, ref);
const { focusVisible, setFocusVisible, getRootProps } = useButton({
diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
index 05c9753d8999aa..af9fa127fda8a0 100644
--- a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
+++ b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
@@ -16,6 +16,7 @@ import {
LinearProgressTypeMap,
} from './LinearProgressProps';
import useSlot from '../utils/useSlot';
+import { resolveSxValue } from '../styles/styleUtils';
// TODO: replace `left` with `inset-inline-start` in the future to work with writing-mode. https://caniuse.com/?search=inset-inline-start
// replace `width` with `inline-size`, not sure why inline-size does not work with animation in Safari.
@@ -37,7 +38,7 @@ const progressKeyframe = keyframes`
75% {
width: var(--LinearProgress-progressMaxWidth);
}
-
+
100% {
left: var(--_LinearProgress-progressInset);
width: var(--LinearProgress-progressMinWidth);
@@ -129,6 +130,16 @@ const LinearProgressRoot = styled('div', {
var(--LinearProgress-circulation, 2.5s ease-in-out 0s infinite normal none running);
}
`,
+ ({ ownerState, theme }) => {
+ const { borderRadius, height } = resolveSxValue({ theme, ownerState }, [
+ 'borderRadius',
+ 'height',
+ ]);
+ return {
+ ...(borderRadius !== undefined && { '--LinearProgress-radius': borderRadius }),
+ ...(height !== undefined && { '--LinearProgress-thickness': height }),
+ };
+ },
);
/**
diff --git a/packages/mui-joy/src/ListItem/ListItem.tsx b/packages/mui-joy/src/ListItem/ListItem.tsx
index 372def438710d2..8378666d75fdd5 100644
--- a/packages/mui-joy/src/ListItem/ListItem.tsx
+++ b/packages/mui-joy/src/ListItem/ListItem.tsx
@@ -64,7 +64,7 @@ export const StyledListItem = styled('li')<{ ownerState: ListItemOwnerState }>(
} as const),
// Base styles
{
- // Integration with control elements, eg. Checkbox, Radio.
+ // Integration with control elements, e.g. Checkbox, Radio.
'--unstable_actionRadius': 'calc(var(--ListItem-radius) - var(--variant-borderWidth, 0px))',
...(ownerState.startAction && {
'--unstable_startActionWidth': '2rem', // to add sufficient padding-left on ListItemButton
diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
index c4e390afeaf8f0..0463696dac13a6 100644
--- a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
+++ b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
@@ -154,7 +154,7 @@ const ListItemButton = React.forwardRef(function ListItemButton(inProps, ref) {
const { getColor } = useColorInversion(variant);
const color = getColor(inProps.color, colorProp);
- const buttonRef = React.useRef(null);
+ const buttonRef = React.useRef(null);
const handleRef = useForkRef(buttonRef, ref);
const { focusVisible, setFocusVisible, getRootProps } = useButton({
diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx
index 8870f2827c8813..d27104fec683f5 100644
--- a/packages/mui-joy/src/Select/Select.tsx
+++ b/packages/mui-joy/src/Select/Select.tsx
@@ -386,9 +386,9 @@ const Select = React.forwardRef(function Select(
const renderValue = renderValueProp ?? defaultRenderSingleValue;
const [anchorEl, setAnchorEl] = React.useState(null);
- const rootRef = React.useRef(null);
- const buttonRef = React.useRef(null);
- const listboxRef = React.useRef(null);
+ const rootRef = React.useRef(null);
+ const buttonRef = React.useRef(null);
+ const listboxRef = React.useRef(null);
const handleRef = useForkRef(ref, rootRef);
diff --git a/packages/mui-joy/src/styles/styleUtils.ts b/packages/mui-joy/src/styles/styleUtils.ts
index 8f6971f77608e4..e2ad445fe31f64 100644
--- a/packages/mui-joy/src/styles/styleUtils.ts
+++ b/packages/mui-joy/src/styles/styleUtils.ts
@@ -4,7 +4,7 @@ import { Theme, SxProps } from './types';
* internal utility
*
* Why? to read `sx` values and attach component's CSS variables
- * eg. , 'onFocus'> {
- /**
- * The content of the component.
- */
- children?: React.ReactNode;
- /**
- * Override or extend the styles applied to the component.
- */
- classes?: Partial;
- /**
- * The icon used to collapse the node.
- */
- collapseIcon?: React.ReactNode;
- /**
- * The component used for the content node.
- * @default TreeItemContent
- */
- ContentComponent?: React.JSXElementConstructor;
- /**
- * Props applied to ContentComponent
- */
- ContentProps?: React.HTMLAttributes;
- /**
- * If `true`, the node is disabled.
- * @default false
- */
- disabled?: boolean;
- /**
- * The icon displayed next to a end node.
- */
- endIcon?: React.ReactNode;
- /**
- * The icon used to expand the node.
- */
- expandIcon?: React.ReactNode;
- /**
- * The icon to display next to the tree node's label.
- */
- icon?: React.ReactNode;
- /**
- * This prop isn't supported.
- * Use the `onNodeFocus` callback on the tree if you need to monitor a node's focus.
- */
- onFocus?: null;
- /**
- * The tree node label.
- */
- label?: React.ReactNode;
- /**
- * The id of the node.
- */
- nodeId: string;
- /**
- * The component used for the transition.
- * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
- * @default Collapse
- */
- TransitionComponent?: React.JSXElementConstructor;
- /**
- * Props applied to the transition element.
- * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
- */
- TransitionProps?: TransitionProps;
- /**
- * The system prop that allows defining system overrides as well as additional CSS styles.
- */
- sx?: SxProps;
-}
-
-/**
- *
- * Demos:
- *
- * - [Tree View](https://mui.com/material-ui/react-tree-view/)
- *
- * API:
- *
- * - [TreeItem API](https://mui.com/material-ui/api/tree-item/)
- */
-export default function TreeItem(props: TreeItemProps): JSX.Element;
diff --git a/packages/mui-lab/src/TreeItem/TreeItem.js b/packages/mui-lab/src/TreeItem/TreeItem.js
deleted file mode 100644
index 9f8a819c9d6dc6..00000000000000
--- a/packages/mui-lab/src/TreeItem/TreeItem.js
+++ /dev/null
@@ -1,440 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import { elementTypeAcceptingRef } from '@mui/utils';
-import Collapse from '@mui/material/Collapse';
-import { alpha, styled, useThemeProps } from '@mui/material/styles';
-import { ownerDocument, useForkRef, unsupportedProp } from '@mui/material/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
-import TreeViewContext from '../TreeView/TreeViewContext';
-import { DescendantProvider, useDescendant } from '../TreeView/descendants';
-import TreeItemContent from './TreeItemContent';
-import treeItemClasses, { getTreeItemUtilityClass } from './treeItemClasses';
-
-const useUtilityClasses = (ownerState) => {
- const { classes } = ownerState;
-
- const slots = {
- root: ['root'],
- content: ['content'],
- expanded: ['expanded'],
- selected: ['selected'],
- focused: ['focused'],
- disabled: ['disabled'],
- iconContainer: ['iconContainer'],
- label: ['label'],
- group: ['group'],
- };
-
- return composeClasses(slots, getTreeItemUtilityClass, classes);
-};
-
-const TreeItemRoot = styled('li', {
- name: 'MuiTreeItem',
- slot: 'Root',
- overridesResolver: (props, styles) => styles.root,
-})({
- listStyle: 'none',
- margin: 0,
- padding: 0,
- outline: 0,
-});
-
-const StyledTreeItemContent = styled(TreeItemContent, {
- name: 'MuiTreeItem',
- slot: 'Content',
- overridesResolver: (props, styles) => {
- return [
- styles.content,
- styles.iconContainer && {
- [`& .${treeItemClasses.iconContainer}`]: styles.iconContainer,
- },
- styles.label && {
- [`& .${treeItemClasses.label}`]: styles.label,
- },
- ];
- },
-})(({ theme }) => ({
- padding: '0 8px',
- width: '100%',
- display: 'flex',
- alignItems: 'center',
- cursor: 'pointer',
- WebkitTapHighlightColor: 'transparent',
- '&:hover': {
- backgroundColor: (theme.vars || theme).palette.action.hover,
- // Reset on touch devices, it doesn't add specificity
- '@media (hover: none)': {
- backgroundColor: 'transparent',
- },
- },
- [`&.${treeItemClasses.disabled}`]: {
- opacity: (theme.vars || theme).palette.action.disabledOpacity,
- backgroundColor: 'transparent',
- },
- [`&.${treeItemClasses.focused}`]: {
- backgroundColor: (theme.vars || theme).palette.action.focus,
- },
- [`&.${treeItemClasses.selected}`]: {
- backgroundColor: theme.vars
- ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`
- : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
- '&:hover': {
- backgroundColor: theme.vars
- ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
- : alpha(
- theme.palette.primary.main,
- theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
- ),
- // Reset on touch devices, it doesn't add specificity
- '@media (hover: none)': {
- backgroundColor: theme.vars
- ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`
- : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
- },
- },
- [`&.${treeItemClasses.focused}`]: {
- backgroundColor: theme.vars
- ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
- : alpha(
- theme.palette.primary.main,
- theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
- ),
- },
- },
- [`& .${treeItemClasses.iconContainer}`]: {
- marginRight: 4,
- width: 15,
- display: 'flex',
- flexShrink: 0,
- justifyContent: 'center',
- '& svg': {
- fontSize: 18,
- },
- },
- [`& .${treeItemClasses.label}`]: {
- width: '100%',
- // fixes overflow - see https://github.com/mui/material-ui/issues/27372
- minWidth: 0,
- paddingLeft: 4,
- position: 'relative',
- ...theme.typography.body1,
- },
-}));
-
-const TreeItemGroup = styled(Collapse, {
- name: 'MuiTreeItem',
- slot: 'Group',
- overridesResolver: (props, styles) => styles.group,
-})({
- margin: 0,
- padding: 0,
- marginLeft: 17,
-});
-
-const TreeItem = React.forwardRef(function TreeItem(inProps, ref) {
- const props = useThemeProps({ props: inProps, name: 'MuiTreeItem' });
- const {
- children,
- className,
- collapseIcon,
- ContentComponent = TreeItemContent,
- ContentProps,
- endIcon,
- expandIcon,
- disabled: disabledProp,
- icon,
- id: idProp,
- label,
- nodeId,
- onClick,
- onMouseDown,
- TransitionComponent = Collapse,
- TransitionProps,
- ...other
- } = props;
-
- const {
- icons: contextIcons = {},
- focus,
- isExpanded,
- isFocused,
- isSelected,
- isDisabled,
- multiSelect,
- disabledItemsFocusable,
- mapFirstChar,
- unMapFirstChar,
- registerNode,
- unregisterNode,
- treeId,
- } = React.useContext(TreeViewContext);
-
- let id = null;
-
- if (idProp != null) {
- id = idProp;
- } else if (treeId && nodeId) {
- id = `${treeId}-${nodeId}`;
- }
-
- const [treeitemElement, setTreeitemElement] = React.useState(null);
- const contentRef = React.useRef(null);
- const handleRef = useForkRef(setTreeitemElement, ref);
-
- const descendant = React.useMemo(
- () => ({
- element: treeitemElement,
- id: nodeId,
- }),
- [nodeId, treeitemElement],
- );
-
- const { index, parentId } = useDescendant(descendant);
-
- const expandable = Boolean(Array.isArray(children) ? children.length : children);
- const expanded = isExpanded ? isExpanded(nodeId) : false;
- const focused = isFocused ? isFocused(nodeId) : false;
- const selected = isSelected ? isSelected(nodeId) : false;
- const disabled = isDisabled ? isDisabled(nodeId) : false;
-
- const ownerState = {
- ...props,
- expanded,
- focused,
- selected,
- disabled,
- };
-
- const classes = useUtilityClasses(ownerState);
-
- let displayIcon;
- let expansionIcon;
-
- if (expandable) {
- if (!expanded) {
- expansionIcon = expandIcon || contextIcons.defaultExpandIcon;
- } else {
- expansionIcon = collapseIcon || contextIcons.defaultCollapseIcon;
- }
- }
-
- if (expandable) {
- displayIcon = contextIcons.defaultParentIcon;
- } else {
- displayIcon = endIcon || contextIcons.defaultEndIcon;
- }
-
- React.useEffect(() => {
- // On the first render a node's index will be -1. We want to wait for the real index.
- if (registerNode && unregisterNode && index !== -1) {
- registerNode({
- id: nodeId,
- idAttribute: id,
- index,
- parentId,
- expandable,
- disabled: disabledProp,
- });
-
- return () => {
- unregisterNode(nodeId);
- };
- }
-
- return undefined;
- }, [registerNode, unregisterNode, parentId, index, nodeId, expandable, disabledProp, id]);
-
- React.useEffect(() => {
- if (mapFirstChar && unMapFirstChar && label) {
- mapFirstChar(nodeId, contentRef.current.textContent.substring(0, 1).toLowerCase());
-
- return () => {
- unMapFirstChar(nodeId);
- };
- }
- return undefined;
- }, [mapFirstChar, unMapFirstChar, nodeId, label]);
-
- let ariaSelected;
- if (multiSelect) {
- ariaSelected = selected;
- } else if (selected) {
- /* single-selection trees unset aria-selected on un-selected items.
- *
- * If the tree does not support multiple selection, aria-selected
- * is set to true for the selected node and it is not present on any other node in the tree.
- * Source: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
- */
- ariaSelected = true;
- }
-
- function handleFocus(event) {
- // DOM focus stays on the tree which manages focus with aria-activedescendant
- if (event.target === event.currentTarget) {
- let rootElement;
-
- if (typeof event.target.getRootNode === 'function') {
- rootElement = event.target.getRootNode();
- } else {
- rootElement = ownerDocument(event.target);
- }
-
- rootElement.getElementById(treeId).focus({ preventScroll: true });
- }
-
- const unfocusable = !disabledItemsFocusable && disabled;
- if (!focused && event.currentTarget === event.target && !unfocusable) {
- focus(event, nodeId);
- }
- }
-
- return (
-
-
-
- {children}
-
-
- )}
-
- );
-});
-
-TreeItem.propTypes /* remove-proptypes */ = {
- // ----------------------------- Warning --------------------------------
- // | These PropTypes are generated from the TypeScript type definitions |
- // | To update them edit the d.ts file and run "yarn proptypes" |
- // ----------------------------------------------------------------------
- /**
- * The content of the component.
- */
- children: PropTypes.node,
- /**
- * Override or extend the styles applied to the component.
- */
- classes: PropTypes.object,
- /**
- * @ignore
- */
- className: PropTypes.string,
- /**
- * The icon used to collapse the node.
- */
- collapseIcon: PropTypes.node,
- /**
- * The component used for the content node.
- * @default TreeItemContent
- */
- ContentComponent: elementTypeAcceptingRef,
- /**
- * Props applied to ContentComponent
- */
- ContentProps: PropTypes.object,
- /**
- * If `true`, the node is disabled.
- * @default false
- */
- disabled: PropTypes.bool,
- /**
- * The icon displayed next to a end node.
- */
- endIcon: PropTypes.node,
- /**
- * The icon used to expand the node.
- */
- expandIcon: PropTypes.node,
- /**
- * The icon to display next to the tree node's label.
- */
- icon: PropTypes.node,
- /**
- * @ignore
- */
- id: PropTypes.string,
- /**
- * The tree node label.
- */
- label: PropTypes.node,
- /**
- * The id of the node.
- */
- nodeId: PropTypes.string.isRequired,
- /**
- * @ignore
- */
- onClick: PropTypes.func,
- /**
- * This prop isn't supported.
- * Use the `onNodeFocus` callback on the tree if you need to monitor a node's focus.
- */
- onFocus: unsupportedProp,
- /**
- * @ignore
- */
- onMouseDown: PropTypes.func,
- /**
- * The system prop that allows defining system overrides as well as additional CSS styles.
- */
- sx: PropTypes.oneOfType([
- PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
- PropTypes.func,
- PropTypes.object,
- ]),
- /**
- * The component used for the transition.
- * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
- * @default Collapse
- */
- TransitionComponent: PropTypes.elementType,
- /**
- * Props applied to the transition element.
- * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
- */
- TransitionProps: PropTypes.object,
-};
-
-export default TreeItem;
diff --git a/packages/mui-lab/src/TreeItem/TreeItem.test.js b/packages/mui-lab/src/TreeItem/TreeItem.test.js
deleted file mode 100644
index cd0d01b7612c0f..00000000000000
--- a/packages/mui-lab/src/TreeItem/TreeItem.test.js
+++ /dev/null
@@ -1,2318 +0,0 @@
-import * as React from 'react';
-import { expect } from 'chai';
-import PropTypes from 'prop-types';
-import { spy } from 'sinon';
-import {
- describeConformance,
- act,
- createEvent,
- createRenderer,
- fireEvent,
- screen,
-} from 'test/utils';
-import TreeView from '@mui/lab/TreeView';
-import TreeItem, { treeItemClasses as classes } from '@mui/lab/TreeItem';
-
-describe('
- ,
- );
-
- fireEvent.click(getByText('test'));
-
- expect(handleClick.callCount).to.equal(1);
- });
-
- it('should display the right icons', () => {
- const defaultEndIcon =
;
- const defaultExpandIcon =
;
- const defaultCollapseIcon =
;
- const defaultParentIcon =
;
- const icon =
;
- const endIcon =
;
-
- const { getByTestId } = render(
-
-
-
-
-
- ,
- );
-
- const getIcon = (testId) => getByTestId(testId).querySelector(`.${classes.iconContainer} div`);
-
- expect(getIcon('1')).attribute('data-test').to.equal('defaultCollapseIcon');
- expect(getIcon('2')).attribute('data-test').to.equal('defaultEndIcon');
- expect(getIcon('3')).attribute('data-test').to.equal('defaultExpandIcon');
- expect(getIcon('5')).attribute('data-test').to.equal('icon');
- expect(getIcon('6')).attribute('data-test').to.equal('endIcon');
- });
-
- it('should allow conditional child', () => {
- function TestComponent() {
- const [hide, setState] = React.useState(false);
-
- return (
-
- setState(true)}>
- Hide
-
-
-
- {!hide &&
-
-
- );
- }
- const { getByTestId, queryByTestId } = render(
-
-
- {[]}
-
-
- ,
- );
-
- expect(getByTestId('2')).not.to.have.attribute('aria-expanded');
- });
-
- it('should not call onClick when children are clicked', () => {
- const handleClick = spy();
-
- const { getByText } = render(
-
-
-
- ,
- );
-
- fireEvent.click(getByText('two'));
-
- expect(handleClick.callCount).to.equal(0);
- });
-
- it('should be able to use a custom id', () => {
- const { getByRole } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByRole('tree')).to.have.attribute('aria-activedescendant', 'customId');
- });
-
- describe('Accessibility', () => {
- it('should have the role `treeitem`', () => {
- const { getByTestId } = render(
-
- ,
- );
-
- expect(getByTestId('test')).to.have.attribute('role', 'treeitem');
- });
-
- it('should add the role `group` to a component containing children', () => {
- const { getByRole, getByText } = render(
-
-
-
- ,
- );
-
- expect(getByRole('group')).to.contain(getByText('test2'));
- });
-
- describe('aria-expanded', () => {
- it('should have the attribute `aria-expanded=false` if collapsed', () => {
- const { getByTestId } = render(
-
-
-
- ,
- );
-
- expect(getByTestId('test')).to.have.attribute('aria-expanded', 'false');
- });
-
- it('should have the attribute `aria-expanded={true}` if expanded', () => {
- const { getByTestId } = render(
-
-
-
- ,
- );
-
- expect(getByTestId('test')).to.have.attribute('aria-expanded', 'true');
- });
-
- it('should not have the attribute `aria-expanded` if no children are present', () => {
- const { getByTestId } = render(
-
- ,
- );
-
- expect(getByTestId('test')).not.to.have.attribute('aria-expanded');
- });
- });
-
- describe('aria-disabled', () => {
- it('should not have the attribute `aria-disabled` if disabled is false', () => {
- const { getByTestId } = render(
-
- ,
- );
-
- expect(getByTestId('one')).not.to.have.attribute('aria-disabled');
- });
-
- it('should have the attribute `aria-disabled={true}` if disabled', () => {
- const { getByTestId } = render(
-
- ,
- );
-
- expect(getByTestId('one')).to.have.attribute('aria-disabled', 'true');
- });
- });
-
- describe('aria-selected', () => {
- describe('single-select', () => {
- it('should not have the attribute `aria-selected` if not selected', () => {
- const { getByTestId } = render(
-
- ,
- );
-
- expect(getByTestId('test')).not.to.have.attribute('aria-selected');
- });
-
- it('should have the attribute `aria-selected={true}` if selected', () => {
- const { getByTestId } = render(
-
- ,
- );
-
- expect(getByTestId('test')).to.have.attribute('aria-selected', 'true');
- });
- });
-
- describe('multi-select', () => {
- it('should have the attribute `aria-selected=false` if not selected', () => {
- const { getByTestId } = render(
-
- ,
- );
-
- expect(getByTestId('test')).to.have.attribute('aria-selected', 'false');
- });
-
- it('should have the attribute `aria-selected={true}` if selected', () => {
- const { getByTestId } = render(
-
- ,
- );
-
- expect(getByTestId('test')).to.have.attribute('aria-selected', 'true');
- });
-
- it('should have the attribute `aria-selected` if disableSelection is true', () => {
- const { getByTestId } = render(
-
- ,
- );
-
- expect(getByTestId('test')).to.have.attribute('aria-selected', 'false');
- });
- });
- });
-
- describe('when a tree receives focus', () => {
- it('should focus the first node if none of the nodes are selected before the tree receives focus', () => {
- const { getByRole, getByTestId, queryAllByRole } = render(
-
- ,
- );
-
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(0);
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).toHaveVirtualFocus();
- });
-
- it('should focus the selected node if a node is selected before the tree receives focus', () => {
- const { getByTestId, getByRole } = render(
-
- ,
- );
-
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
- });
-
- it('should work with programmatic focus', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).toHaveVirtualFocus();
-
- act(() => {
- getByTestId('two').focus();
- });
- expect(getByTestId('two')).toHaveVirtualFocus();
- });
-
- it('should work when focused node is removed', () => {
- let removeActiveItem;
- // a TreeItem which can remove from the tree by calling `removeActiveItem`
- function ControlledTreeItem(props) {
- const [mounted, setMounted] = React.useReducer(() => false, true);
- removeActiveItem = setMounted;
-
- if (!mounted) {
- return null;
- }
- return
-
-
- ,
- );
- const tree = getByRole('tree');
-
- act(() => {
- tree.focus();
- });
-
- expect(getByTestId('parent')).toHaveVirtualFocus();
-
- fireEvent.click(getByText('two'));
-
- expect(getByTestId('two')).toHaveVirtualFocus();
-
- // generic action that removes an item.
- // Could be promise based, or timeout, or another user interaction
- act(() => {
- removeActiveItem();
- });
-
- expect(getByTestId('parent')).toHaveVirtualFocus();
- });
-
- it('should focus on tree with scroll prevented', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
- const focus = spy(getByRole('tree'), 'focus');
-
- act(() => {
- getByTestId('one').focus();
- });
-
- expect(focus.calledOnceWithExactly({ preventScroll: true })).to.equals(true);
- });
- });
-
- describe('Navigation', () => {
- describe('right arrow interaction', () => {
- it('should open the node and not move the focus if focus is on a closed node', () => {
- const { getByRole, getByTestId } = render(
-
-
-
- ,
- );
-
- expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false');
-
- act(() => {
- getByRole('tree').focus();
- });
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowRight' });
-
- expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true');
- expect(getByTestId('one')).toHaveVirtualFocus();
- });
-
- it('should move focus to the first child if focus is on an open node', () => {
- const { getByTestId, getByRole } = render(
-
-
-
- ,
- );
-
- expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true');
-
- act(() => {
- getByRole('tree').focus();
- });
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowRight' });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
- });
-
- it('should do nothing if focus is on an end node', () => {
- const { getByRole, getByTestId, getByText } = render(
-
-
-
- ,
- );
-
- fireEvent.click(getByText('two'));
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowRight' });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
- });
- });
-
- describe('left arrow interaction', () => {
- it('should close the node if focus is on an open node', () => {
- render(
-
-
-
- ,
- );
- const [firstItem] = screen.getAllByRole('treeitem');
- const firstItemLabel = screen.getByText('one');
-
- fireEvent.click(firstItemLabel);
-
- expect(firstItem).to.have.attribute('aria-expanded', 'true');
-
- act(() => {
- screen.getByRole('tree').focus();
- });
- fireEvent.keyDown(screen.getByRole('tree'), { key: 'ArrowLeft' });
-
- expect(firstItem).to.have.attribute('aria-expanded', 'false');
- expect(screen.getByTestId('one')).toHaveVirtualFocus();
- });
-
- it("should move focus to the node's parent node if focus is on a child node that is an end node", () => {
- render(
-
-
-
- ,
- );
- const [firstItem] = screen.getAllByRole('treeitem');
- const secondItemLabel = screen.getByText('two');
-
- expect(firstItem).to.have.attribute('aria-expanded', 'true');
-
- fireEvent.click(secondItemLabel);
- act(() => {
- screen.getByRole('tree').focus();
- });
-
- expect(screen.getByTestId('two')).toHaveVirtualFocus();
- fireEvent.keyDown(screen.getByRole('tree'), { key: 'ArrowLeft' });
-
- expect(screen.getByTestId('one')).toHaveVirtualFocus();
- expect(firstItem).to.have.attribute('aria-expanded', 'true');
- });
-
- it("should move focus to the node's parent node if focus is on a child node that is closed", () => {
- render(
-
-
-
-
-
- ,
- );
-
- fireEvent.click(screen.getByText('one'));
-
- expect(screen.getByTestId('one')).to.have.attribute('aria-expanded', 'true');
-
- act(() => {
- screen.getByTestId('two').focus();
- });
-
- expect(screen.getByTestId('two')).toHaveVirtualFocus();
-
- fireEvent.keyDown(screen.getByRole('tree'), { key: 'ArrowLeft' });
-
- expect(screen.getByTestId('one')).toHaveVirtualFocus();
- expect(screen.getByTestId('one')).to.have.attribute('aria-expanded', 'true');
- });
-
- it('should do nothing if focus is on a root node that is closed', () => {
- const { getByRole, getByTestId } = render(
-
-
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false');
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowLeft' });
- expect(getByTestId('one')).toHaveVirtualFocus();
- });
-
- it('should do nothing if focus is on a root node that is an end node', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowLeft' });
-
- expect(getByTestId('one')).toHaveVirtualFocus();
- });
- });
-
- describe('down arrow interaction', () => {
- it('moves focus to a sibling node', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
- });
-
- it('moves focus to a child node', () => {
- const { getByRole, getByTestId } = render(
-
-
-
- ,
- );
-
- expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true');
-
- act(() => {
- getByRole('tree').focus();
- });
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
- });
-
- it('moves focus to a child node works with a dynamic tree', () => {
- function TestComponent() {
- const [hide, setState] = React.useState(false);
-
- return (
-
- setState((value) => !value)}
- >
- Toggle Hide
-
-
- {!hide && (
-
-
- )}
-
-
- );
- }
-
- const { getByRole, queryByTestId, getByTestId, getByText } = render(
-
-
- ,
- );
-
- expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true');
-
- fireEvent.click(getByText('two'));
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' });
-
- expect(getByTestId('three')).toHaveVirtualFocus();
- });
- });
-
- describe('up arrow interaction', () => {
- it('moves focus to a sibling node', () => {
- const { getByRole, getByTestId, getByText } = render(
-
- ,
- );
-
- fireEvent.click(getByText('two'));
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp' });
-
- expect(getByTestId('one')).toHaveVirtualFocus();
- });
-
- it('moves focus to a parent', () => {
- const { getByRole, getByTestId, getByText } = render(
-
-
-
- ,
- );
-
- expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true');
-
- fireEvent.click(getByText('two'));
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp' });
-
- expect(getByTestId('one')).toHaveVirtualFocus();
- });
-
- it("moves focus to a sibling's child", () => {
- const { getByRole, getByTestId, getByText } = render(
-
-
-
- ,
- );
-
- expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true');
-
- fireEvent.click(getByText('three'));
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('three')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp' });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
- });
- });
-
- describe('home key interaction', () => {
- it('moves focus to the first node in the tree', () => {
- const { getByRole, getByTestId, getByText } = render(
-
- ,
- );
-
- fireEvent.click(getByText('four'));
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('four')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 'Home' });
-
- expect(getByTestId('one')).toHaveVirtualFocus();
- });
- });
-
- describe('end key interaction', () => {
- it('moves focus to the last node in the tree without expanded items', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 'End' });
-
- expect(getByTestId('four')).toHaveVirtualFocus();
- });
-
- it('moves focus to the last node in the tree with expanded items', () => {
- const { getByRole, getByTestId } = render(
-
-
-
-
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 'End' });
-
- expect(getByTestId('six')).toHaveVirtualFocus();
- });
- });
-
- describe('type-ahead functionality', () => {
- it('moves focus to the next node with a name that starts with the typed character', () => {
- const { getByRole, getByTestId } = render(
-
- two} data-testid="two" />
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 't' });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 'f' });
-
- expect(getByTestId('four')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 'o' });
-
- expect(getByTestId('one')).toHaveVirtualFocus();
- });
-
- it('moves focus to the next node with the same starting character', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 't' });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 't' });
-
- expect(getByTestId('three')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 't' });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
- });
-
- it('should not move focus when pressing a modifier key + letter', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('apple')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 'v', ctrlKey: true });
-
- expect(getByTestId('apple')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 'v', metaKey: true });
-
- expect(getByTestId('apple')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 'v', shiftKey: true });
-
- expect(getByTestId('apple')).toHaveVirtualFocus();
- });
-
- it('should not throw when an item is removed', () => {
- function TestComponent() {
- const [hide, setState] = React.useState(false);
- return (
-
- setState(true)}>
- Hide
-
-
- {!hide &&
-
- );
- }
-
- const { getByRole, getByText, getByTestId } = render(
-
-
-
-
-
-
-
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false');
- expect(getByTestId('three')).to.have.attribute('aria-expanded', 'false');
- expect(getByTestId('five')).to.have.attribute('aria-expanded', 'false');
-
- fireEvent.keyDown(getByRole('tree'), { key: '*' });
-
- expect(toggleSpy.args[0][1]).to.have.length(3);
-
- expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true');
- expect(getByTestId('three')).to.have.attribute('aria-expanded', 'true');
- expect(getByTestId('five')).to.have.attribute('aria-expanded', 'true');
- expect(getByTestId('six')).to.have.attribute('aria-expanded', 'false');
- expect(getByTestId('eight')).not.to.have.attribute('aria-expanded');
- });
- });
- });
-
- describe('Expansion', () => {
- describe('enter key interaction', () => {
- it('expands a node with children', () => {
- const { getByRole, getByTestId } = render(
-
-
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false');
-
- fireEvent.keyDown(getByRole('tree'), { key: 'Enter' });
-
- expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true');
- });
-
- it('collapses a node with children', () => {
- const { getByRole, getByTestId, getByText } = render(
-
-
-
- ,
- );
-
- fireEvent.click(getByText('one'));
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true');
-
- fireEvent.keyDown(getByRole('tree'), { key: 'Enter' });
-
- expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false');
- });
- });
- });
-
- describe('Single Selection', () => {
- describe('keyboard', () => {
- it('should select a node when space is pressed', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).not.to.have.attribute('aria-selected');
-
- fireEvent.keyDown(getByRole('tree'), { key: ' ' });
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- });
-
- it('should not deselect a node when space is pressed on a selected node', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).toHaveVirtualFocus();
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
-
- fireEvent.keyDown(getByRole('tree'), { key: ' ' });
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- });
-
- it('should not select a node when space is pressed and disableSelection', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
- fireEvent.keyDown(getByRole('tree'), { key: ' ' });
-
- expect(getByTestId('one')).not.to.have.attribute('aria-selected');
- });
- });
-
- describe('mouse', () => {
- it('should select a node when click', () => {
- const { getByText, getByTestId } = render(
-
- ,
- );
-
- expect(getByTestId('one')).not.to.have.attribute('aria-selected');
- fireEvent.click(getByText('one'));
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- });
-
- it('should not deselect a node when clicking a selected node', () => {
- const { getByText, getByTestId } = render(
-
- ,
- );
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- fireEvent.click(getByText('one'));
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- });
-
- it('should not select a node when click and disableSelection', () => {
- const { getByText, getByTestId } = render(
-
- ,
- );
-
- fireEvent.click(getByText('one'));
- expect(getByTestId('one')).not.to.have.attribute('aria-selected');
- });
- });
- });
-
- describe('Multi Selection', () => {
- describe('deselection', () => {
- describe('mouse behavior when multiple nodes are selected', () => {
- specify('clicking a selected node holding ctrl should deselect the node', () => {
- const { getByText, getByTestId } = render(
-
- ,
- );
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- fireEvent.click(getByText('one'), { ctrlKey: true });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- });
-
- specify('clicking a selected node holding meta should deselect the node', () => {
- const { getByText, getByTestId } = render(
-
- ,
- );
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- fireEvent.click(getByText('one'), { metaKey: true });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- });
- });
-
- describe('mouse behavior when one node is selected', () => {
- it('clicking a selected node shout not deselect the node', () => {
- const { getByText, getByTestId } = render(
-
- ,
- );
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
- fireEvent.click(getByText('one'));
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
- });
- });
-
- it('should deselect the node when pressing space on a selected node', () => {
- const { getByTestId, getByRole } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).toHaveVirtualFocus();
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- fireEvent.keyDown(getByRole('tree'), { key: ' ' });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
- });
- });
-
- describe('range selection', () => {
- specify('keyboard arrow', () => {
- const { getByRole, getByTestId, getByText, queryAllByRole } = render(
-
- ,
- );
-
- fireEvent.click(getByText('three'));
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('three')).to.have.attribute('aria-selected', 'true');
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown', shiftKey: true });
-
- expect(getByTestId('four')).toHaveVirtualFocus();
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(2);
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown', shiftKey: true });
-
- expect(getByTestId('three')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('four')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('five')).to.have.attribute('aria-selected', 'true');
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(3);
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true });
-
- expect(getByTestId('four')).toHaveVirtualFocus();
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(2);
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true });
-
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(1);
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true });
-
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(2);
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true });
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('three')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('four')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('five')).to.have.attribute('aria-selected', 'false');
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(3);
- });
-
- specify('keyboard arrow does not select when selectionDisabled', () => {
- const { getByRole, getByTestId, queryAllByRole } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown', shiftKey: true });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(0);
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true });
-
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(0);
- });
-
- specify('keyboard arrow merge', () => {
- const { getByRole, getByTestId, getByText, queryAllByRole } = render(
-
- ,
- );
-
- fireEvent.click(getByText('three'));
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('three')).to.have.attribute('aria-selected', 'true');
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true });
- fireEvent.click(getByText('six'), { ctrlKey: true });
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true });
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true });
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true });
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowUp', shiftKey: true });
-
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(5);
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown', shiftKey: true });
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown', shiftKey: true });
-
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(3);
- });
-
- specify('keyboard space', () => {
- const { getByRole, getByTestId, getByText } = render(
-
-
-
-
-
- ,
- );
- const tree = getByRole('tree');
-
- fireEvent.click(getByText('five'));
- act(() => {
- tree.focus();
- });
- for (let i = 0; i < 5; i += 1) {
- fireEvent.keyDown(tree, { key: 'ArrowDown' });
- }
- fireEvent.keyDown(tree, { key: ' ', shiftKey: true });
-
- expect(getByTestId('five')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('six')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('seven')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('eight')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('nine')).to.have.attribute('aria-selected', 'true');
- for (let i = 0; i < 9; i += 1) {
- fireEvent.keyDown(tree, { key: 'ArrowUp' });
- }
- fireEvent.keyDown(tree, { key: ' ', shiftKey: true });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('three')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('four')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('five')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('six')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('seven')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('eight')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('nine')).to.have.attribute('aria-selected', 'false');
- });
-
- specify('keyboard home and end', () => {
- const { getByRole, getByTestId } = render(
-
-
-
-
-
- ,
- );
-
- act(() => {
- getByTestId('five').focus();
- });
-
- fireEvent.keyDown(getByRole('tree'), {
- key: 'End',
- shiftKey: true,
- ctrlKey: true,
- });
-
- expect(getByTestId('five')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('six')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('seven')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('eight')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('nine')).to.have.attribute('aria-selected', 'true');
-
- fireEvent.keyDown(getByRole('tree'), {
- key: 'Home',
- shiftKey: true,
- ctrlKey: true,
- });
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('three')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('four')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('five')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('six')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('seven')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('eight')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('nine')).to.have.attribute('aria-selected', 'false');
- });
-
- specify('keyboard home and end do not select when selectionDisabled', () => {
- const { getByRole, getByText, queryAllByRole } = render(
-
-
-
-
-
- ,
- );
-
- fireEvent.click(getByText('five'));
- fireEvent.click(getByText('five'));
- // Focus node five
- act(() => {
- getByRole('tree').focus();
- });
- fireEvent.keyDown(getByRole('tree'), {
- key: 'End',
- shiftKey: true,
- ctrlKey: true,
- });
-
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(0);
-
- fireEvent.keyDown(getByRole('tree'), {
- key: 'Home',
- shiftKey: true,
- ctrlKey: true,
- });
-
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(0);
- });
-
- specify('mouse', () => {
- const { getByTestId, getByText } = render(
-
-
-
-
-
- ,
- );
-
- fireEvent.click(getByText('five'));
- fireEvent.click(getByText('nine'), { shiftKey: true });
- expect(getByTestId('five')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('six')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('seven')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('eight')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('nine')).to.have.attribute('aria-selected', 'true');
- fireEvent.click(getByText('one'), { shiftKey: true });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('three')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('four')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('five')).to.have.attribute('aria-selected', 'true');
- });
-
- it('mouse behavior after deselection', () => {
- const { getByTestId, getByText } = render(
-
- ,
- );
-
- fireEvent.click(getByText('one'));
- fireEvent.click(getByText('two'), { ctrlKey: true });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- fireEvent.click(getByText('two'), { ctrlKey: true });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
-
- fireEvent.click(getByText('five'), { shiftKey: true });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('three')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('four')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('five')).to.have.attribute('aria-selected', 'true');
- fireEvent.click(getByText('one'), { shiftKey: true });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('three')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('four')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('five')).to.have.attribute('aria-selected', 'false');
- });
-
- specify('mouse does not range select when selectionDisabled', () => {
- const { getByText, queryAllByRole } = render(
-
-
-
-
-
- ,
- );
-
- fireEvent.click(getByText('five'));
- fireEvent.click(getByText('nine'), { shiftKey: true });
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(0);
- });
- });
-
- describe('multi selection', () => {
- specify('keyboard', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
-
- fireEvent.keyDown(getByRole('tree'), { key: ' ' });
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' });
- fireEvent.keyDown(getByRole('tree'), { key: ' ' });
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- });
-
- specify('keyboard holding ctrl', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
-
- fireEvent.keyDown(getByRole('tree'), { key: ' ' });
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' });
- fireEvent.keyDown(getByRole('tree'), { key: ' ', ctrlKey: true });
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- });
-
- specify('mouse', () => {
- const { getByText, getByTestId } = render(
-
- ,
- );
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
-
- fireEvent.click(getByText('one'));
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
-
- fireEvent.click(getByText('two'));
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- });
-
- specify('mouse using ctrl', () => {
- const { getByTestId, getByText } = render(
-
- ,
- );
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
- fireEvent.click(getByText('one'));
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
- fireEvent.click(getByText('two'), { ctrlKey: true });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- });
-
- specify('mouse using meta', () => {
- const { getByTestId, getByText } = render(
-
- ,
- );
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
- fireEvent.click(getByText('one'));
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
- fireEvent.click(getByText('two'), { metaKey: true });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- });
- });
-
- specify('ctrl + a selects all', () => {
- const { getByRole, queryAllByRole } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
- fireEvent.keyDown(getByRole('tree'), { key: 'a', ctrlKey: true });
-
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(5);
- });
-
- specify('ctrl + a does not select all when disableSelection', () => {
- const { getByRole, queryAllByRole } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
- fireEvent.keyDown(getByRole('tree'), { key: 'a', ctrlKey: true });
-
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(0);
- });
- });
- });
-
- describe('prop: disabled', () => {
- describe('selection', () => {
- describe('mouse', () => {
- it('should prevent selection by mouse', () => {
- const { getByText, getByTestId } = render(
-
- ,
- );
-
- fireEvent.click(getByText('one'));
- expect(getByTestId('one')).not.to.have.attribute('aria-selected');
- });
-
- it('should prevent node triggering start of range selection', () => {
- const { getByText, getByTestId } = render(
-
- ,
- );
-
- fireEvent.click(getByText('one'));
- fireEvent.click(getByText('four'), { shiftKey: true });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('three')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('four')).to.have.attribute('aria-selected', 'false');
- });
-
- it('should prevent node being selected as part of range selection', () => {
- const { getByText, getByTestId } = render(
-
- ,
- );
-
- fireEvent.click(getByText('one'));
- fireEvent.click(getByText('four'), { shiftKey: true });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('three')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('four')).to.have.attribute('aria-selected', 'true');
- });
-
- it('should prevent node triggering end of range selection', () => {
- const { getByText, getByTestId } = render(
-
- ,
- );
-
- fireEvent.click(getByText('one'));
- fireEvent.click(getByText('four'), { shiftKey: true });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('three')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('four')).to.have.attribute('aria-selected', 'false');
- });
- });
-
- describe('keyboard', () => {
- describe('`disabledItemsFocusable={true}`', () => {
- it('should prevent selection by keyboard', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByTestId('one').focus();
- });
- expect(getByTestId('one')).toHaveVirtualFocus();
- fireEvent.keyDown(getByRole('tree'), { key: ' ' });
- expect(getByTestId('one')).not.to.have.attribute('aria-selected');
- });
-
- it('should not prevent next node being range selected by keyboard', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByTestId('one').focus();
- });
- expect(getByTestId('one')).toHaveVirtualFocus();
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown', shiftKey: true });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).toHaveVirtualFocus();
- });
-
- it('should prevent range selection by keyboard + arrow down', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByTestId('one').focus();
- });
- expect(getByTestId('one')).toHaveVirtualFocus();
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown', shiftKey: true });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('two')).toHaveVirtualFocus();
- });
- });
-
- describe('`disabledItemsFocusable=false`', () => {
- it('should select the next non disabled node by keyboard + arrow down', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByTestId('one').focus();
- });
- expect(getByTestId('one')).toHaveVirtualFocus();
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown', shiftKey: true });
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('three')).toHaveVirtualFocus();
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('three')).to.have.attribute('aria-selected', 'true');
- });
- });
-
- it('should prevent range selection by keyboard + space', () => {
- const { getByRole, getByTestId, getByText } = render(
-
- ,
- );
- const tree = getByRole('tree');
-
- fireEvent.click(getByText('one'));
- act(() => {
- tree.focus();
- });
- for (let i = 0; i < 5; i += 1) {
- fireEvent.keyDown(tree, { key: 'ArrowDown' });
- }
- fireEvent.keyDown(tree, { key: ' ', shiftKey: true });
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('three')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('four')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('five')).to.have.attribute('aria-selected', 'true');
- });
-
- it('should prevent selection by ctrl + a', () => {
- const { getByRole, queryAllByRole } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- fireEvent.keyDown(getByRole('tree'), { key: 'a', ctrlKey: true });
- expect(queryAllByRole('treeitem', { selected: true })).to.have.length(4);
- });
-
- it('should prevent selection by keyboard end', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
- expect(getByTestId('one')).toHaveVirtualFocus();
- fireEvent.keyDown(getByRole('tree'), {
- key: 'End',
- shiftKey: true,
- ctrlKey: true,
- });
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('three')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('four')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('five')).to.have.attribute('aria-selected', 'true');
- });
-
- it('should prevent selection by keyboard home', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByTestId('five').focus();
- });
- expect(getByTestId('five')).toHaveVirtualFocus();
- fireEvent.keyDown(getByRole('tree'), {
- key: 'Home',
- shiftKey: true,
- ctrlKey: true,
- });
-
- expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('three')).to.have.attribute('aria-selected', 'false');
- expect(getByTestId('four')).to.have.attribute('aria-selected', 'true');
- expect(getByTestId('five')).to.have.attribute('aria-selected', 'true');
- });
- });
- });
-
- describe('focus', () => {
- describe('`disabledItemsFocusable={true}`', () => {
- it('should prevent focus by mouse', () => {
- const focusSpy = spy();
- const { getByText } = render(
-
- ,
- );
-
- fireEvent.click(getByText('two'));
- expect(focusSpy.callCount).to.equal(0);
- });
-
- it('should not prevent programmatic focus', () => {
- const { getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByTestId('one').focus();
- });
- expect(getByTestId('one')).toHaveVirtualFocus();
- });
-
- it('should not prevent focus by type-ahead', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
- expect(getByTestId('one')).toHaveVirtualFocus();
- fireEvent.keyDown(getByRole('tree'), { key: 't' });
- expect(getByTestId('two')).toHaveVirtualFocus();
- });
-
- it('should not prevent focus by arrow keys', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' });
- expect(getByTestId('two')).toHaveVirtualFocus();
- });
-
- it('should be focused on tree focus', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).toHaveVirtualFocus();
- });
- });
-
- describe('`disabledItemsFocusable=false`', () => {
- it('should prevent focus by mouse', () => {
- const focusSpy = spy();
- const { getByText } = render(
-
- ,
- );
-
- fireEvent.click(getByText('two'));
- expect(focusSpy.callCount).to.equal(0);
- });
-
- it('should prevent programmatic focus', () => {
- const { getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByTestId('one').focus();
- });
- expect(getByTestId('one')).not.toHaveVirtualFocus();
- });
-
- it('should prevent focus by type-ahead', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
- expect(getByTestId('one')).toHaveVirtualFocus();
- fireEvent.keyDown(getByRole('tree'), { key: 't' });
- expect(getByTestId('one')).toHaveVirtualFocus();
- });
-
- it('should be skipped on navigation with arrow keys', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' });
- expect(getByTestId('three')).toHaveVirtualFocus();
- });
-
- it('should not be focused on tree focus', () => {
- const { getByRole, getByTestId } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
- });
- });
- });
-
- describe('expansion', () => {
- describe('`disabledItemsFocusable={true}`', () => {
- it('should prevent expansion on enter', () => {
- const { getByRole, getByTestId } = render(
-
-
-
- ,
- );
-
- act(() => {
- getByTestId('two').focus();
- });
- expect(getByTestId('two')).toHaveVirtualFocus();
- expect(getByTestId('two')).to.have.attribute('aria-expanded', 'false');
- fireEvent.keyDown(getByRole('tree'), { key: 'Enter' });
- expect(getByTestId('two')).to.have.attribute('aria-expanded', 'false');
- });
-
- it('should prevent expansion on right arrow', () => {
- const { getByRole, getByTestId } = render(
-
-
-
- ,
- );
-
- act(() => {
- getByTestId('two').focus();
- });
- expect(getByTestId('two')).toHaveVirtualFocus();
- expect(getByTestId('two')).to.have.attribute('aria-expanded', 'false');
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowRight' });
- expect(getByTestId('two')).to.have.attribute('aria-expanded', 'false');
- });
-
- it('should prevent collapse on left arrow', () => {
- const { getByRole, getByTestId } = render(
-
-
-
- ,
- );
-
- act(() => {
- getByTestId('two').focus();
- });
- expect(getByTestId('two')).toHaveVirtualFocus();
- expect(getByTestId('two')).to.have.attribute('aria-expanded', 'true');
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowLeft' });
- expect(getByTestId('two')).to.have.attribute('aria-expanded', 'true');
- });
- });
-
- it('should prevent expansion on click', () => {
- const { getByText, getByTestId } = render(
-
-
-
- ,
- );
-
- fireEvent.click(getByText('one'));
- expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false');
- });
- });
-
- describe('event bindings', () => {
- it('should not prevent onClick being fired', () => {
- const handleClick = spy();
-
- const { getByText } = render(
-
- ,
- );
-
- fireEvent.click(getByText('test'));
-
- expect(handleClick.callCount).to.equal(1);
- });
- });
-
- it('should disable child items when parent item is disabled', () => {
- const { getByTestId } = render(
-
-
-
- ,
- );
-
- expect(getByTestId('one')).to.have.attribute('aria-disabled', 'true');
- expect(getByTestId('two')).to.have.attribute('aria-disabled', 'true');
- expect(getByTestId('three')).to.have.attribute('aria-disabled', 'true');
- });
- });
-
- describe('content customisation', () => {
- it('should allow a custom ContentComponent', () => {
- const mockContent = React.forwardRef((props, ref) => (
- MOCK CONTENT COMPONENT
- ));
- const { container } = render({props.customProp}
);
- const { container } = render(
-
-
-
-
- ,
- );
- const input = getByRole('textbox');
- const keydownEvent = createEvent.keyDown(input, {
- key: 'a',
- });
- keydownEvent.preventDefault = spy();
- fireEvent(input, keydownEvent);
- expect(keydownEvent.preventDefault.callCount).to.equal(0);
- });
-
- it('should not focus steal', () => {
- let setActiveItemMounted;
- // a TreeItem whose mounted state we can control with `setActiveItemMounted`
- function ControlledTreeItem(props) {
- const [mounted, setMounted] = React.useState(true);
- setActiveItemMounted = setMounted;
-
- if (!mounted) {
- return null;
- }
- return
- Some focusable element
-
-
- ,
- );
-
- fireEvent.click(getByText('two'));
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
-
- act(() => {
- getByRole('button').focus();
- });
-
- expect(getByRole('button')).toHaveFocus();
-
- act(() => {
- setActiveItemMounted(false);
- });
- act(() => {
- setActiveItemMounted(true);
- });
-
- expect(getByRole('button')).toHaveFocus();
- });
-});
diff --git a/packages/mui-lab/src/TreeItem/TreeItem.tsx b/packages/mui-lab/src/TreeItem/TreeItem.tsx
new file mode 100644
index 00000000000000..bc1473aa839931
--- /dev/null
+++ b/packages/mui-lab/src/TreeItem/TreeItem.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { TreeItem as XTreeItem, TreeItemProps } from '@mui/x-tree-view/TreeItem';
+
+let warnedOnce = false;
+
+const warn = () => {
+ if (!warnedOnce) {
+ console.warn(
+ [
+ 'MUI: The TreeItem component was moved from `@mui/lab` to `@mui/x-tree-view`.',
+ 'The component will no longer be exported from `@mui/lab` in the first release of October 2023.',
+ '',
+ "You should use `import { TreeItem } from '@mui/x-tree-view'`",
+ "or `import { TreeItem } from '@mui/x-tree-view/TreeItem'`",
+ '',
+ 'More information about this migration on our blog: https://mui.com/blog/lab-tree-view-to-mui-x/.',
+ ].join('\n'),
+ );
+
+ warnedOnce = true;
+ }
+};
+
+/**
+ * @ignore - do not document.
+ */
+const TreeItem = React.forwardRef(function DeprecatedTreeItem(
+ props: TreeItemProps,
+ ref: React.Ref,
+) {
+ warn();
+
+ return > {
- /**
- * className applied to the root element.
- */
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: {
- /** Styles applied to the root element. */
- root: string;
- /** State class applied to the content element when expanded. */
- expanded: string;
- /** State class applied to the content element when selected. */
- selected: string;
- /** State class applied to the content element when focused. */
- focused: string;
- /** State class applied to the element when disabled. */
- disabled: string;
- /** Styles applied to the tree node icon and collapse/expand icon. */
- iconContainer: string;
- /** Styles applied to the label element. */
- label: string;
- };
- /**
- * The tree node label.
- */
- label?: React.ReactNode;
- /**
- * The id of the node.
- */
- nodeId: string;
- /**
- * The icon to display next to the tree node's label.
- */
- icon?: React.ReactNode;
- /**
- * The icon to display next to the tree node's label. Either an expansion or collapse icon.
- */
- expansionIcon?: React.ReactNode;
- /**
- * The icon to display next to the tree node's label. Either a parent or end icon.
- */
- displayIcon?: React.ReactNode;
-}
-
-export type TreeItemContentClassKey = keyof NonNullable;
diff --git a/packages/mui-lab/src/TreeItem/TreeItemContent.js b/packages/mui-lab/src/TreeItem/TreeItemContent.js
deleted file mode 100644
index 12b558021908d2..00000000000000
--- a/packages/mui-lab/src/TreeItem/TreeItemContent.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import useTreeItem from './useTreeItem';
-
-/**
- * @ignore - internal component.
- */
-const TreeItemContent = React.forwardRef(function TreeItemContent(props, ref) {
- const {
- classes,
- className,
- displayIcon,
- expansionIcon,
- icon: iconProp,
- label,
- nodeId,
- onClick,
- onMouseDown,
- ...other
- } = props;
-
- const {
- disabled,
- expanded,
- selected,
- focused,
- handleExpansion,
- handleSelection,
- preventSelection,
- } = useTreeItem(nodeId);
-
- const icon = iconProp || expansionIcon || displayIcon;
-
- const handleMouseDown = (event) => {
- preventSelection(event);
-
- if (onMouseDown) {
- onMouseDown(event);
- }
- };
-
- const handleClick = (event) => {
- handleExpansion(event);
- handleSelection(event);
-
- if (onClick) {
- onClick(event);
- }
- };
-
- return (
- /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
-
- );
-});
-
-TreeItemContent.propTypes = {
- // ----------------------------- Warning --------------------------------
- // | These PropTypes are generated from the TypeScript type definitions |
- // | To update them edit the d.ts file and run "yarn proptypes" |
- // ----------------------------------------------------------------------
- /**
- * Override or extend the styles applied to the component.
- * See [CSS API](#css) below for more details.
- */
- classes: PropTypes.object,
- /**
- * className applied to the root element.
- */
- className: PropTypes.string,
- /**
- * The icon to display next to the tree node's label. Either a parent or end icon.
- */
- displayIcon: PropTypes.node,
- /**
- * The icon to display next to the tree node's label. Either an expansion or collapse icon.
- */
- expansionIcon: PropTypes.node,
- /**
- * The icon to display next to the tree node's label.
- */
- icon: PropTypes.node,
- /**
- * The tree node label.
- */
- label: PropTypes.node,
- /**
- * The id of the node.
- */
- nodeId: PropTypes.string.isRequired,
- /**
- * @ignore
- */
- onClick: PropTypes.func,
- /**
- * @ignore
- */
- onMouseDown: PropTypes.func,
-};
-
-export default TreeItemContent;
diff --git a/packages/mui-lab/src/TreeItem/index.d.ts b/packages/mui-lab/src/TreeItem/index.d.ts
deleted file mode 100644
index 99e17f1eb99aec..00000000000000
--- a/packages/mui-lab/src/TreeItem/index.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { default } from './TreeItem';
-export * from './TreeItem';
-export * from './TreeItemContent';
-export { default as useTreeItem } from './useTreeItem';
-
-export { default as treeItemClasses } from './treeItemClasses';
-export * from './treeItemClasses';
diff --git a/packages/mui-lab/src/TreeItem/index.js b/packages/mui-lab/src/TreeItem/index.js
deleted file mode 100644
index 6ed8fe956296d6..00000000000000
--- a/packages/mui-lab/src/TreeItem/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default } from './TreeItem';
-export { default as useTreeItem } from './useTreeItem';
-
-export { default as treeItemClasses } from './treeItemClasses';
-export * from './treeItemClasses';
diff --git a/packages/mui-lab/src/TreeItem/index.ts b/packages/mui-lab/src/TreeItem/index.ts
new file mode 100644
index 00000000000000..806aec49566307
--- /dev/null
+++ b/packages/mui-lab/src/TreeItem/index.ts
@@ -0,0 +1,8 @@
+export { default } from './TreeItem';
+export { getTreeItemUtilityClass, treeItemClasses, useTreeItem } from '@mui/x-tree-view/TreeItem';
+export type {
+ TreeItemProps,
+ TreeItemClasses,
+ TreeItemClassKey,
+ TreeItemContentProps,
+} from '@mui/x-tree-view/TreeItem';
diff --git a/packages/mui-lab/src/TreeItem/treeItemClasses.ts b/packages/mui-lab/src/TreeItem/treeItemClasses.ts
deleted file mode 100644
index 368a888384af45..00000000000000
--- a/packages/mui-lab/src/TreeItem/treeItemClasses.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import generateUtilityClass from '@mui/material/generateUtilityClass';
-import generateUtilityClasses from '@mui/material/generateUtilityClasses';
-
-export interface TreeItemClasses {
- /** Styles applied to the root element. */
- root: string;
- /** Styles applied to the transition component. */
- group: string;
- /** Styles applied to the content element. */
- content: string;
- /** State class applied to the content element when expanded. */
- expanded: string;
- /** State class applied to the content element when selected. */
- selected: string;
- /** State class applied to the content element when focused. */
- focused: string;
- /** State class applied to the element when disabled. */
- disabled: string;
- /** Styles applied to the tree node icon. */
- iconContainer: string;
- /** Styles applied to the label element. */
- label: string;
-}
-
-export type TreeItemClassKey = keyof TreeItemClasses;
-
-export function getTreeItemUtilityClass(slot: string): string {
- return generateUtilityClass('MuiTreeItem', slot);
-}
-
-const treeItemClasses: TreeItemClasses = generateUtilityClasses('MuiTreeItem', [
- 'root',
- 'group',
- 'content',
- 'expanded',
- 'selected',
- 'focused',
- 'disabled',
- 'iconContainer',
- 'label',
-]);
-
-export default treeItemClasses;
diff --git a/packages/mui-lab/src/TreeItem/useTreeItem.d.ts b/packages/mui-lab/src/TreeItem/useTreeItem.d.ts
deleted file mode 100644
index abec248fa67b02..00000000000000
--- a/packages/mui-lab/src/TreeItem/useTreeItem.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-export default function useTreeItem(nodeId: string): {
- disabled: boolean;
- expanded: boolean;
- selected: boolean;
- focused: boolean;
- handleExpansion: (event: React.SyntheticEvent) => void;
- handleSelection: (event: React.SyntheticEvent) => void;
- preventSelection: (event: React.SyntheticEvent) => void;
-};
diff --git a/packages/mui-lab/src/TreeItem/useTreeItem.js b/packages/mui-lab/src/TreeItem/useTreeItem.js
deleted file mode 100644
index 6fcbcd07febf4e..00000000000000
--- a/packages/mui-lab/src/TreeItem/useTreeItem.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as React from 'react';
-import TreeViewContext from '../TreeView/TreeViewContext';
-
-export default function useTreeItem(nodeId) {
- const {
- focus,
- isExpanded,
- isExpandable,
- isFocused,
- isDisabled,
- isSelected,
- multiSelect,
- selectNode,
- selectRange,
- toggleExpansion,
- } = React.useContext(TreeViewContext);
-
- const expandable = isExpandable ? isExpandable(nodeId) : false;
- const expanded = isExpanded ? isExpanded(nodeId) : false;
- const focused = isFocused ? isFocused(nodeId) : false;
- const disabled = isDisabled ? isDisabled(nodeId) : false;
- const selected = isSelected ? isSelected(nodeId) : false;
-
- const handleExpansion = (event) => {
- if (!disabled) {
- if (!focused) {
- focus(event, nodeId);
- }
-
- const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
-
- // If already expanded and trying to toggle selection don't close
- if (expandable && !(multiple && isExpanded(nodeId))) {
- toggleExpansion(event, nodeId);
- }
- }
- };
-
- const handleSelection = (event) => {
- if (!disabled) {
- if (!focused) {
- focus(event, nodeId);
- }
-
- const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
-
- if (multiple) {
- if (event.shiftKey) {
- selectRange(event, { end: nodeId });
- } else {
- selectNode(event, nodeId, true);
- }
- } else {
- selectNode(event, nodeId);
- }
- }
- };
-
- const preventSelection = (event) => {
- if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
- // Prevent text selection
- event.preventDefault();
- }
- };
-
- return {
- disabled,
- expanded,
- selected,
- focused,
- handleExpansion,
- handleSelection,
- preventSelection,
- };
-}
diff --git a/packages/mui-lab/src/TreeView/TreeView.d.ts b/packages/mui-lab/src/TreeView/TreeView.d.ts
deleted file mode 100644
index 2c7c39d8586b72..00000000000000
--- a/packages/mui-lab/src/TreeView/TreeView.d.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import * as React from 'react';
-import { InternalStandardProps as StandardProps } from '@mui/material';
-import { Theme } from '@mui/material/styles';
-import { SxProps } from '@mui/system';
-import { TreeViewClasses } from './treeViewClasses';
-
-export interface TreeViewPropsBase extends StandardProps> {
- /**
- * The content of the component.
- */
- children?: React.ReactNode;
- /**
- * Override or extend the styles applied to the component.
- */
- classes?: Partial;
- /**
- * The default icon used to collapse the node.
- */
- defaultCollapseIcon?: React.ReactNode;
- /**
- * The default icon displayed next to a end node. This is applied to all
- * tree nodes and can be overridden by the TreeItem `icon` prop.
- */
- defaultEndIcon?: React.ReactNode;
- /**
- * Expanded node ids. (Uncontrolled)
- * @default []
- */
- defaultExpanded?: string[];
- /**
- * The default icon used to expand the node.
- */
- defaultExpandIcon?: React.ReactNode;
- /**
- * The default icon displayed next to a parent node. This is applied to all
- * parent nodes and can be overridden by the TreeItem `icon` prop.
- */
- defaultParentIcon?: React.ReactNode;
- /**
- * If `true`, will allow focus on disabled items.
- * @default false
- */
- disabledItemsFocusable?: boolean;
- /**
- * If `true` selection is disabled.
- * @default false
- */
- disableSelection?: boolean;
- /**
- * Expanded node ids. (Controlled)
- */
- expanded?: string[];
- /**
- * This prop is used to help implement the accessibility logic.
- * If you don't provide this prop. It falls back to a randomly generated id.
- */
- id?: string;
- /**
- * Callback fired when tree items are focused.
- *
- * @param {React.SyntheticEvent} event The event source of the callback **Warning**: This is a generic event not a focus event.
- * @param {string} value of the focused node.
- */
- onNodeFocus?: (event: React.SyntheticEvent, nodeId: string) => void;
- /**
- * Callback fired when tree items are expanded/collapsed.
- *
- * @param {React.SyntheticEvent} event The event source of the callback.
- * @param {array} nodeIds The ids of the expanded nodes.
- */
- onNodeToggle?: (event: React.SyntheticEvent, nodeIds: string[]) => void;
- /**
- * The system prop that allows defining system overrides as well as additional CSS styles.
- */
- sx?: SxProps;
-}
-
-export interface MultiSelectTreeViewProps extends TreeViewPropsBase {
- /**
- * Selected node ids. (Uncontrolled)
- * When `multiSelect` is true this takes an array of strings; when false (default) a string.
- * @default []
- */
- defaultSelected?: string[];
- /**
- * Selected node ids. (Controlled)
- * When `multiSelect` is true this takes an array of strings; when false (default) a string.
- */
- selected?: string[];
- /**
- * If true `ctrl` and `shift` will trigger multiselect.
- * @default false
- */
- multiSelect?: true;
- /**
- * Callback fired when tree items are selected/unselected.
- *
- * @param {React.SyntheticEvent} event The event source of the callback
- * @param {string[] | string} nodeIds Ids of the selected nodes. When `multiSelect` is true
- * this is an array of strings; when false (default) a string.
- */
- onNodeSelect?: (event: React.SyntheticEvent, nodeIds: string[]) => void;
-}
-
-export interface SingleSelectTreeViewProps extends TreeViewPropsBase {
- /**
- * Selected node ids. (Uncontrolled)
- * When `multiSelect` is true this takes an array of strings; when false (default) a string.
- * @default []
- */
- defaultSelected?: string;
- /**
- * Selected node ids. (Controlled)
- * When `multiSelect` is true this takes an array of strings; when false (default) a string.
- */
- selected?: string;
- /**
- * If true `ctrl` and `shift` will trigger multiselect.
- * @default false
- */
- multiSelect?: false;
- /**
- * Callback fired when tree items are selected/unselected.
- *
- * @param {React.SyntheticEvent} event The event source of the callback
- * @param {string[] | string} nodeIds Ids of the selected nodes. When `multiSelect` is true
- * this is an array of strings; when false (default) a string.
- */
- onNodeSelect?: (event: React.SyntheticEvent, nodeIds: string) => void;
-}
-
-export type TreeViewProps = SingleSelectTreeViewProps | MultiSelectTreeViewProps;
-
-/**
- *
- * Demos:
- *
- * - [Tree View](https://mui.com/material-ui/react-tree-view/)
- *
- * API:
- *
- * - [TreeView API](https://mui.com/material-ui/api/tree-view/)
- */
-export default function TreeView(props: TreeViewProps): JSX.Element;
diff --git a/packages/mui-lab/src/TreeView/TreeView.js b/packages/mui-lab/src/TreeView/TreeView.js
deleted file mode 100644
index 37017852292bac..00000000000000
--- a/packages/mui-lab/src/TreeView/TreeView.js
+++ /dev/null
@@ -1,958 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import { styled, useTheme, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
-import {
- useControlled,
- useForkRef,
- ownerDocument,
- unstable_useId as useId,
-} from '@mui/material/utils';
-import TreeViewContext from './TreeViewContext';
-import { DescendantProvider } from './descendants';
-import { getTreeViewUtilityClass } from './treeViewClasses';
-
-const useUtilityClasses = (ownerState) => {
- const { classes } = ownerState;
-
- const slots = {
- root: ['root'],
- };
-
- return composeClasses(slots, getTreeViewUtilityClass, classes);
-};
-
-const TreeViewRoot = styled('ul', {
- name: 'MuiTreeView',
- slot: 'Root',
- overridesResolver: (props, styles) => styles.root,
-})({
- padding: 0,
- margin: 0,
- listStyle: 'none',
- outline: 0,
-});
-
-function isPrintableCharacter(string) {
- return string && string.length === 1 && string.match(/\S/);
-}
-
-function findNextFirstChar(firstChars, startIndex, char) {
- for (let i = startIndex; i < firstChars.length; i += 1) {
- if (char === firstChars[i]) {
- return i;
- }
- }
- return -1;
-}
-
-function noopSelection() {
- return false;
-}
-
-const defaultDefaultExpanded = [];
-const defaultDefaultSelected = [];
-
-const TreeView = React.forwardRef(function TreeView(inProps, ref) {
- const props = useThemeProps({ props: inProps, name: 'MuiTreeView' });
- const {
- children,
- className,
- defaultCollapseIcon,
- defaultEndIcon,
- defaultExpanded = defaultDefaultExpanded,
- defaultExpandIcon,
- defaultParentIcon,
- defaultSelected = defaultDefaultSelected,
- disabledItemsFocusable = false,
- disableSelection = false,
- expanded: expandedProp,
- id: idProp,
- multiSelect = false,
- onBlur,
- onFocus,
- onKeyDown,
- onNodeFocus,
- onNodeSelect,
- onNodeToggle,
- selected: selectedProp,
- ...other
- } = props;
-
- const theme = useTheme();
- const isRtl = theme.direction === 'rtl';
-
- const ownerState = {
- ...props,
- defaultExpanded,
- defaultSelected,
- disabledItemsFocusable,
- disableSelection,
- multiSelect,
- };
-
- const classes = useUtilityClasses(ownerState);
-
- const treeId = useId(idProp);
-
- const treeRef = React.useRef(null);
- const handleRef = useForkRef(treeRef, ref);
-
- const [focusedNodeId, setFocusedNodeId] = React.useState(null);
-
- const nodeMap = React.useRef({});
-
- const firstCharMap = React.useRef({});
-
- const [expanded, setExpandedState] = useControlled({
- controlled: expandedProp,
- default: defaultExpanded,
- name: 'TreeView',
- state: 'expanded',
- });
-
- const [selected, setSelectedState] = useControlled({
- controlled: selectedProp,
- default: defaultSelected,
- name: 'TreeView',
- state: 'selected',
- });
-
- /*
- * Status Helpers
- */
- const isExpanded = React.useCallback(
- (id) => (Array.isArray(expanded) ? expanded.indexOf(id) !== -1 : false),
- [expanded],
- );
-
- const isExpandable = React.useCallback(
- (id) => nodeMap.current[id] && nodeMap.current[id].expandable,
- [],
- );
-
- const isSelected = React.useCallback(
- (id) => (Array.isArray(selected) ? selected.indexOf(id) !== -1 : selected === id),
- [selected],
- );
-
- const isDisabled = React.useCallback((id) => {
- let node = nodeMap.current[id];
-
- // This can be called before the node has been added to the node map.
- if (!node) {
- return false;
- }
-
- if (node.disabled) {
- return true;
- }
-
- while (node.parentId != null) {
- node = nodeMap.current[node.parentId];
- if (node.disabled) {
- return true;
- }
- }
-
- return false;
- }, []);
-
- const isFocused = (id) => focusedNodeId === id;
-
- /*
- * Child Helpers
- */
-
- // Using Object.keys -> .map to mimic Object.values we should replace with Object.values() once we stop IE11 support.
- const getChildrenIds = (id) =>
- Object.keys(nodeMap.current)
- .map((key) => {
- return nodeMap.current[key];
- })
- .filter((node) => node.parentId === id)
- .sort((a, b) => a.index - b.index)
- .map((child) => child.id);
-
- const getNavigableChildrenIds = (id) => {
- let childrenIds = getChildrenIds(id);
-
- if (!disabledItemsFocusable) {
- childrenIds = childrenIds.filter((node) => !isDisabled(node));
- }
- return childrenIds;
- };
-
- /*
- * Node Helpers
- */
-
- const getNextNode = (id) => {
- // If expanded get first child
- if (isExpanded(id) && getNavigableChildrenIds(id).length > 0) {
- return getNavigableChildrenIds(id)[0];
- }
-
- let node = nodeMap.current[id];
- while (node != null) {
- // Try to get next sibling
- const siblings = getNavigableChildrenIds(node.parentId);
- const nextSibling = siblings[siblings.indexOf(node.id) + 1];
-
- if (nextSibling) {
- return nextSibling;
- }
-
- // If the sibling does not exist, go up a level to the parent and try again.
- node = nodeMap.current[node.parentId];
- }
-
- return null;
- };
-
- const getPreviousNode = (id) => {
- const node = nodeMap.current[id];
- const siblings = getNavigableChildrenIds(node.parentId);
- const nodeIndex = siblings.indexOf(id);
-
- if (nodeIndex === 0) {
- return node.parentId;
- }
-
- let currentNode = siblings[nodeIndex - 1];
- while (isExpanded(currentNode) && getNavigableChildrenIds(currentNode).length > 0) {
- currentNode = getNavigableChildrenIds(currentNode).pop();
- }
-
- return currentNode;
- };
-
- const getLastNode = () => {
- let lastNode = getNavigableChildrenIds(null).pop();
-
- while (isExpanded(lastNode)) {
- lastNode = getNavigableChildrenIds(lastNode).pop();
- }
- return lastNode;
- };
- const getFirstNode = () => getNavigableChildrenIds(null)[0];
- const getParent = (id) => nodeMap.current[id].parentId;
-
- /**
- * This is used to determine the start and end of a selection range so
- * we can get the nodes between the two border nodes.
- *
- * It finds the nodes' common ancestor using
- * a naive implementation of a lowest common ancestor algorithm
- * (https://en.wikipedia.org/wiki/Lowest_common_ancestor).
- * Then compares the ancestor's 2 children that are ancestors of nodeA and NodeB
- * so we can compare their indexes to work out which node comes first in a depth first search.
- * (https://en.wikipedia.org/wiki/Depth-first_search)
- *
- * Another way to put it is which node is shallower in a trémaux tree
- * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
- */
- const findOrderInTremauxTree = (nodeAId, nodeBId) => {
- if (nodeAId === nodeBId) {
- return [nodeAId, nodeBId];
- }
-
- const nodeA = nodeMap.current[nodeAId];
- const nodeB = nodeMap.current[nodeBId];
-
- if (nodeA.parentId === nodeB.id || nodeB.parentId === nodeA.id) {
- return nodeB.parentId === nodeA.id ? [nodeA.id, nodeB.id] : [nodeB.id, nodeA.id];
- }
-
- const aFamily = [nodeA.id];
- const bFamily = [nodeB.id];
-
- let aAncestor = nodeA.parentId;
- let bAncestor = nodeB.parentId;
-
- let aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
- let bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
-
- let continueA = true;
- let continueB = true;
-
- while (!bAncestorIsCommon && !aAncestorIsCommon) {
- if (continueA) {
- aFamily.push(aAncestor);
- aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
- continueA = aAncestor !== null;
- if (!aAncestorIsCommon && continueA) {
- aAncestor = nodeMap.current[aAncestor].parentId;
- }
- }
-
- if (continueB && !aAncestorIsCommon) {
- bFamily.push(bAncestor);
- bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
- continueB = bAncestor !== null;
- if (!bAncestorIsCommon && continueB) {
- bAncestor = nodeMap.current[bAncestor].parentId;
- }
- }
- }
-
- const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
- const ancestorFamily = getChildrenIds(commonAncestor);
-
- const aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];
- const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
-
- return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide)
- ? [nodeAId, nodeBId]
- : [nodeBId, nodeAId];
- };
-
- const getNodesInRange = (nodeA, nodeB) => {
- const [first, last] = findOrderInTremauxTree(nodeA, nodeB);
- const nodes = [first];
-
- let current = first;
-
- while (current !== last) {
- current = getNextNode(current);
- nodes.push(current);
- }
-
- return nodes;
- };
-
- /*
- * Focus Helpers
- */
-
- const focus = (event, id) => {
- if (id) {
- setFocusedNodeId(id);
-
- if (onNodeFocus) {
- onNodeFocus(event, id);
- }
- }
- };
-
- const focusNextNode = (event, id) => focus(event, getNextNode(id));
- const focusPreviousNode = (event, id) => focus(event, getPreviousNode(id));
- const focusFirstNode = (event) => focus(event, getFirstNode());
- const focusLastNode = (event) => focus(event, getLastNode());
-
- const focusByFirstCharacter = (event, id, char) => {
- let start;
- let index;
- const lowercaseChar = char.toLowerCase();
-
- const firstCharIds = [];
- const firstChars = [];
- // This really only works since the ids are strings
- Object.keys(firstCharMap.current).forEach((nodeId) => {
- const firstChar = firstCharMap.current[nodeId];
- const map = nodeMap.current[nodeId];
- const visible = map.parentId ? isExpanded(map.parentId) : true;
- const shouldBeSkipped = disabledItemsFocusable ? false : isDisabled(nodeId);
-
- if (visible && !shouldBeSkipped) {
- firstCharIds.push(nodeId);
- firstChars.push(firstChar);
- }
- });
-
- // Get start index for search based on position of currentItem
- start = firstCharIds.indexOf(id) + 1;
- if (start >= firstCharIds.length) {
- start = 0;
- }
-
- // Check remaining slots in the menu
- index = findNextFirstChar(firstChars, start, lowercaseChar);
-
- // If not found in remaining slots, check from beginning
- if (index === -1) {
- index = findNextFirstChar(firstChars, 0, lowercaseChar);
- }
-
- // If match was found...
- if (index > -1) {
- focus(event, firstCharIds[index]);
- }
- };
-
- /*
- * Expansion Helpers
- */
-
- const toggleExpansion = (event, value = focusedNodeId) => {
- let newExpanded;
-
- if (expanded.indexOf(value) !== -1) {
- newExpanded = expanded.filter((id) => id !== value);
- } else {
- newExpanded = [value].concat(expanded);
- }
-
- if (onNodeToggle) {
- onNodeToggle(event, newExpanded);
- }
-
- setExpandedState(newExpanded);
- };
-
- const expandAllSiblings = (event, id) => {
- const map = nodeMap.current[id];
- const siblings = getChildrenIds(map.parentId);
-
- const diff = siblings.filter((child) => isExpandable(child) && !isExpanded(child));
-
- const newExpanded = expanded.concat(diff);
-
- if (diff.length > 0) {
- setExpandedState(newExpanded);
-
- if (onNodeToggle) {
- onNodeToggle(event, newExpanded);
- }
- }
- };
-
- /*
- * Selection Helpers
- */
-
- const lastSelectedNode = React.useRef(null);
- const lastSelectionWasRange = React.useRef(false);
- const currentRangeSelection = React.useRef([]);
-
- const handleRangeArrowSelect = (event, nodes) => {
- let base = selected.slice();
- const { start, next, current } = nodes;
-
- if (!next || !current) {
- return;
- }
-
- if (currentRangeSelection.current.indexOf(current) === -1) {
- currentRangeSelection.current = [];
- }
-
- if (lastSelectionWasRange.current) {
- if (currentRangeSelection.current.indexOf(next) !== -1) {
- base = base.filter((id) => id === start || id !== current);
- currentRangeSelection.current = currentRangeSelection.current.filter(
- (id) => id === start || id !== current,
- );
- } else {
- base.push(next);
- currentRangeSelection.current.push(next);
- }
- } else {
- base.push(next);
- currentRangeSelection.current.push(current, next);
- }
-
- if (onNodeSelect) {
- onNodeSelect(event, base);
- }
-
- setSelectedState(base);
- };
-
- const handleRangeSelect = (event, nodes) => {
- let base = selected.slice();
- const { start, end } = nodes;
- // If last selection was a range selection ignore nodes that were selected.
- if (lastSelectionWasRange.current) {
- base = base.filter((id) => currentRangeSelection.current.indexOf(id) === -1);
- }
-
- let range = getNodesInRange(start, end);
- range = range.filter((node) => !isDisabled(node));
- currentRangeSelection.current = range;
- let newSelected = base.concat(range);
- newSelected = newSelected.filter((id, i) => newSelected.indexOf(id) === i);
-
- if (onNodeSelect) {
- onNodeSelect(event, newSelected);
- }
-
- setSelectedState(newSelected);
- };
-
- const handleMultipleSelect = (event, value) => {
- let newSelected;
- if (selected.indexOf(value) !== -1) {
- newSelected = selected.filter((id) => id !== value);
- } else {
- newSelected = [value].concat(selected);
- }
-
- if (onNodeSelect) {
- onNodeSelect(event, newSelected);
- }
-
- setSelectedState(newSelected);
- };
-
- const handleSingleSelect = (event, value) => {
- const newSelected = multiSelect ? [value] : value;
-
- if (onNodeSelect) {
- onNodeSelect(event, newSelected);
- }
-
- setSelectedState(newSelected);
- };
-
- const selectNode = (event, id, multiple = false) => {
- if (id) {
- if (multiple) {
- handleMultipleSelect(event, id);
- } else {
- handleSingleSelect(event, id);
- }
- lastSelectedNode.current = id;
- lastSelectionWasRange.current = false;
- currentRangeSelection.current = [];
-
- return true;
- }
- return false;
- };
-
- const selectRange = (event, nodes, stacked = false) => {
- const { start = lastSelectedNode.current, end, current } = nodes;
- if (stacked) {
- handleRangeArrowSelect(event, { start, next: end, current });
- } else if (start != null && end != null) {
- handleRangeSelect(event, { start, end });
- }
- lastSelectionWasRange.current = true;
- };
-
- const rangeSelectToFirst = (event, id) => {
- if (!lastSelectedNode.current) {
- lastSelectedNode.current = id;
- }
-
- const start = lastSelectionWasRange.current ? lastSelectedNode.current : id;
-
- selectRange(event, {
- start,
- end: getFirstNode(),
- });
- };
-
- const rangeSelectToLast = (event, id) => {
- if (!lastSelectedNode.current) {
- lastSelectedNode.current = id;
- }
-
- const start = lastSelectionWasRange.current ? lastSelectedNode.current : id;
-
- selectRange(event, {
- start,
- end: getLastNode(),
- });
- };
-
- const selectNextNode = (event, id) => {
- if (!isDisabled(getNextNode(id))) {
- selectRange(
- event,
- {
- end: getNextNode(id),
- current: id,
- },
- true,
- );
- }
- };
-
- const selectPreviousNode = (event, id) => {
- if (!isDisabled(getPreviousNode(id))) {
- selectRange(
- event,
- {
- end: getPreviousNode(id),
- current: id,
- },
- true,
- );
- }
- };
-
- const selectAllNodes = (event) => {
- selectRange(event, { start: getFirstNode(), end: getLastNode() });
- };
-
- /*
- * Mapping Helpers
- */
- const registerNode = React.useCallback((node) => {
- const { id, index, parentId, expandable, idAttribute, disabled } = node;
-
- nodeMap.current[id] = { id, index, parentId, expandable, idAttribute, disabled };
- }, []);
-
- const unregisterNode = React.useCallback((id) => {
- const newMap = { ...nodeMap.current };
- delete newMap[id];
- nodeMap.current = newMap;
-
- setFocusedNodeId((oldFocusedNodeId) => {
- if (
- oldFocusedNodeId === id &&
- treeRef.current === ownerDocument(treeRef.current).activeElement
- ) {
- return getChildrenIds(null)[0];
- }
- return oldFocusedNodeId;
- });
- }, []);
-
- const mapFirstChar = React.useCallback((id, firstChar) => {
- firstCharMap.current[id] = firstChar;
- }, []);
-
- const unMapFirstChar = React.useCallback((id) => {
- const newMap = { ...firstCharMap.current };
- delete newMap[id];
- firstCharMap.current = newMap;
- }, []);
-
- /**
- * Event handlers and Navigation
- */
-
- const handleNextArrow = (event) => {
- if (isExpandable(focusedNodeId)) {
- if (isExpanded(focusedNodeId)) {
- focusNextNode(event, focusedNodeId);
- } else if (!isDisabled(focusedNodeId)) {
- toggleExpansion(event);
- }
- }
- return true;
- };
-
- const handlePreviousArrow = (event) => {
- if (isExpanded(focusedNodeId) && !isDisabled(focusedNodeId)) {
- toggleExpansion(event, focusedNodeId);
- return true;
- }
-
- const parent = getParent(focusedNodeId);
- if (parent) {
- focus(event, parent);
- return true;
- }
- return false;
- };
-
- const handleKeyDown = (event) => {
- let flag = false;
- const key = event.key;
-
- // If the tree is empty there will be no focused node
- if (event.altKey || event.currentTarget !== event.target || !focusedNodeId) {
- return;
- }
-
- const ctrlPressed = event.ctrlKey || event.metaKey;
- switch (key) {
- case ' ':
- if (!disableSelection && !isDisabled(focusedNodeId)) {
- if (multiSelect && event.shiftKey) {
- selectRange(event, { end: focusedNodeId });
- flag = true;
- } else if (multiSelect) {
- flag = selectNode(event, focusedNodeId, true);
- } else {
- flag = selectNode(event, focusedNodeId);
- }
- }
- event.stopPropagation();
- break;
- case 'Enter':
- if (!isDisabled(focusedNodeId)) {
- if (isExpandable(focusedNodeId)) {
- toggleExpansion(event);
- flag = true;
- } else if (multiSelect) {
- flag = selectNode(event, focusedNodeId, true);
- } else {
- flag = selectNode(event, focusedNodeId);
- }
- }
- event.stopPropagation();
- break;
- case 'ArrowDown':
- if (multiSelect && event.shiftKey && !disableSelection) {
- selectNextNode(event, focusedNodeId);
- }
- focusNextNode(event, focusedNodeId);
- flag = true;
- break;
- case 'ArrowUp':
- if (multiSelect && event.shiftKey && !disableSelection) {
- selectPreviousNode(event, focusedNodeId);
- }
- focusPreviousNode(event, focusedNodeId);
- flag = true;
- break;
- case 'ArrowRight':
- if (isRtl) {
- flag = handlePreviousArrow(event);
- } else {
- flag = handleNextArrow(event);
- }
- break;
- case 'ArrowLeft':
- if (isRtl) {
- flag = handleNextArrow(event);
- } else {
- flag = handlePreviousArrow(event);
- }
- break;
- case 'Home':
- if (
- multiSelect &&
- ctrlPressed &&
- event.shiftKey &&
- !disableSelection &&
- !isDisabled(focusedNodeId)
- ) {
- rangeSelectToFirst(event, focusedNodeId);
- }
- focusFirstNode(event);
- flag = true;
- break;
- case 'End':
- if (
- multiSelect &&
- ctrlPressed &&
- event.shiftKey &&
- !disableSelection &&
- !isDisabled(focusedNodeId)
- ) {
- rangeSelectToLast(event, focusedNodeId);
- }
- focusLastNode(event);
- flag = true;
- break;
- default:
- if (key === '*') {
- expandAllSiblings(event, focusedNodeId);
- flag = true;
- } else if (multiSelect && ctrlPressed && key.toLowerCase() === 'a' && !disableSelection) {
- selectAllNodes(event);
- flag = true;
- } else if (!ctrlPressed && !event.shiftKey && isPrintableCharacter(key)) {
- focusByFirstCharacter(event, focusedNodeId, key);
- flag = true;
- }
- }
-
- if (flag) {
- event.preventDefault();
- event.stopPropagation();
- }
-
- if (onKeyDown) {
- onKeyDown(event);
- }
- };
-
- const handleFocus = (event) => {
- // if the event bubbled (which is React specific) we don't want to steal focus
- if (event.target === event.currentTarget) {
- const firstSelected = Array.isArray(selected) ? selected[0] : selected;
- focus(event, firstSelected || getNavigableChildrenIds(null)[0]);
- }
-
- if (onFocus) {
- onFocus(event);
- }
- };
-
- const handleBlur = (event) => {
- setFocusedNodeId(null);
-
- if (onBlur) {
- onBlur(event);
- }
- };
-
- const activeDescendant = nodeMap.current[focusedNodeId]
- ? nodeMap.current[focusedNodeId].idAttribute
- : null;
-
- return (
-
-
-
- {children}
-
-
-
- );
-});
-
-TreeView.propTypes /* remove-proptypes */ = {
- // ----------------------------- Warning --------------------------------
- // | These PropTypes are generated from the TypeScript type definitions |
- // | To update them edit the d.ts file and run "yarn proptypes" |
- // ----------------------------------------------------------------------
- /**
- * The content of the component.
- */
- children: PropTypes.node,
- /**
- * Override or extend the styles applied to the component.
- */
- classes: PropTypes.object,
- /**
- * @ignore
- */
- className: PropTypes.string,
- /**
- * The default icon used to collapse the node.
- */
- defaultCollapseIcon: PropTypes.node,
- /**
- * The default icon displayed next to a end node. This is applied to all
- * tree nodes and can be overridden by the TreeItem `icon` prop.
- */
- defaultEndIcon: PropTypes.node,
- /**
- * Expanded node ids. (Uncontrolled)
- * @default []
- */
- defaultExpanded: PropTypes.arrayOf(PropTypes.string),
- /**
- * The default icon used to expand the node.
- */
- defaultExpandIcon: PropTypes.node,
- /**
- * The default icon displayed next to a parent node. This is applied to all
- * parent nodes and can be overridden by the TreeItem `icon` prop.
- */
- defaultParentIcon: PropTypes.node,
- /**
- * Selected node ids. (Uncontrolled)
- * When `multiSelect` is true this takes an array of strings; when false (default) a string.
- * @default []
- */
- defaultSelected: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
- /**
- * If `true`, will allow focus on disabled items.
- * @default false
- */
- disabledItemsFocusable: PropTypes.bool,
- /**
- * If `true` selection is disabled.
- * @default false
- */
- disableSelection: PropTypes.bool,
- /**
- * Expanded node ids. (Controlled)
- */
- expanded: PropTypes.arrayOf(PropTypes.string),
- /**
- * This prop is used to help implement the accessibility logic.
- * If you don't provide this prop. It falls back to a randomly generated id.
- */
- id: PropTypes.string,
- /**
- * If true `ctrl` and `shift` will trigger multiselect.
- * @default false
- */
- multiSelect: PropTypes.bool,
- /**
- * @ignore
- */
- onBlur: PropTypes.func,
- /**
- * @ignore
- */
- onFocus: PropTypes.func,
- /**
- * @ignore
- */
- onKeyDown: PropTypes.func,
- /**
- * Callback fired when tree items are focused.
- *
- * @param {React.SyntheticEvent} event The event source of the callback **Warning**: This is a generic event not a focus event.
- * @param {string} value of the focused node.
- */
- onNodeFocus: PropTypes.func,
- /**
- * Callback fired when tree items are selected/unselected.
- *
- * @param {React.SyntheticEvent} event The event source of the callback
- * @param {string[] | string} nodeIds Ids of the selected nodes. When `multiSelect` is true
- * this is an array of strings; when false (default) a string.
- */
- onNodeSelect: PropTypes.func,
- /**
- * Callback fired when tree items are expanded/collapsed.
- *
- * @param {React.SyntheticEvent} event The event source of the callback.
- * @param {array} nodeIds The ids of the expanded nodes.
- */
- onNodeToggle: PropTypes.func,
- /**
- * Selected node ids. (Controlled)
- * When `multiSelect` is true this takes an array of strings; when false (default) a string.
- */
- selected: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
- /**
- * The system prop that allows defining system overrides as well as additional CSS styles.
- */
- sx: PropTypes.oneOfType([
- PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
- PropTypes.func,
- PropTypes.object,
- ]),
-};
-
-export default TreeView;
diff --git a/packages/mui-lab/src/TreeView/TreeView.test.js b/packages/mui-lab/src/TreeView/TreeView.test.js
deleted file mode 100644
index 7916cd7fad0735..00000000000000
--- a/packages/mui-lab/src/TreeView/TreeView.test.js
+++ /dev/null
@@ -1,463 +0,0 @@
-import * as React from 'react';
-import { expect } from 'chai';
-import { spy } from 'sinon';
-import {
- act,
- createRenderer,
- ErrorBoundary,
- fireEvent,
- screen,
- describeConformance,
-} from 'test/utils';
-import Portal from '@mui/material/Portal';
-import TreeView, { treeViewClasses as classes } from '@mui/lab/TreeView';
-import TreeItem from '@mui/lab/TreeItem';
-
-describe('
- ,
- );
-
- expect(() => {
- setProps({ expanded: undefined });
- }).toErrorDev(
- 'MUI: A component is changing the controlled expanded state of TreeView to be uncontrolled.',
- );
- });
-
- it('should warn when switching from controlled to uncontrolled of the selected prop', () => {
- const { setProps } = render(
-
- ,
- );
-
- expect(() => {
- setProps({ selected: undefined });
- }).toErrorDev(
- 'MUI: A component is changing the controlled selected state of TreeView to be uncontrolled.',
- );
- });
-
- it('should not crash when shift clicking a clean tree', () => {
- render(
-
- ,
- );
-
- fireEvent.click(screen.getByText('one'), { shiftKey: true });
- });
-
- it('should not crash when selecting multiple items in a deeply nested tree', () => {
- render(
-
-
-
-
-
- ,
- );
- fireEvent.click(screen.getByText('Item 1.1.1'));
- fireEvent.click(screen.getByText('Item 2'), { shiftKey: true });
-
- expect(screen.getByTestId('item-1.1.1')).to.have.attribute('aria-selected', 'true');
- expect(screen.getByTestId('item-2')).to.have.attribute('aria-selected', 'true');
- });
-
- it('should not crash on keydown on an empty tree', () => {
- render(
-
- Toggle
-
- {isVisible && (
-
-
-
-
- )}
-
- );
- }
- const errorRef = React.createRef();
- render(
-
- ,
- );
-
- expect(() => {
- act(() => {
- screen.getByRole('button').click();
- });
- }).not.toErrorDev();
- });
- });
-
- it('should call onKeyDown when a key is pressed', () => {
- const handleKeyDown = spy();
-
- const { getByRole } = render(
-
- ,
- );
- act(() => {
- getByRole('tree').focus();
- });
-
- fireEvent.keyDown(getByRole('tree'), { key: 'Enter' });
- fireEvent.keyDown(getByRole('tree'), { key: 'A' });
- fireEvent.keyDown(getByRole('tree'), { key: ']' });
-
- expect(handleKeyDown.callCount).to.equal(3);
- });
-
- it('should select node when Enter key is pressed ', () => {
- const handleKeyDown = spy();
-
- const { getByRole, getByTestId } = render(
-
- ,
- );
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(getByTestId('one')).not.to.have.attribute('aria-selected');
-
- fireEvent.keyDown(getByRole('tree'), { key: 'Enter' });
-
- expect(getByTestId('one')).to.have.attribute('aria-selected');
- });
-
- it('should call onFocus when tree is focused', () => {
- const handleFocus = spy();
- const { getByRole } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(handleFocus.callCount).to.equal(1);
- });
-
- it('should call onBlur when tree is blurred', () => {
- const handleBlur = spy();
- const { getByRole } = render(
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
- act(() => {
- getByRole('tree').blur();
- });
-
- expect(handleBlur.callCount).to.equal(1);
- });
-
- it('should be able to be controlled with the expanded prop', () => {
- function MyComponent() {
- const [expandedState, setExpandedState] = React.useState([]);
- const handleNodeToggle = (event, nodes) => {
- setExpandedState(nodes);
- };
- return (
-
-
-
-
- );
- }
-
- const { getByRole, getByTestId, getByText } = render(
-
- );
- }
-
- const { getByTestId, getByText } = render(
-
- );
- }
-
- const { getByTestId, getByText } = render( {
- setState(Math.random);
- }}
- id="tree"
- >
-
-
-
- );
- }
-
- const { getByRole, getByText, getByTestId } = render(
- setState(true)}>
- Hide
-
- {!hide &&
-
- );
- }
-
- const { getByText, queryByText } = render(
-
-
- ,
- );
-
- act(() => {
- getByRole('tree').focus();
- });
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' });
-
- expect(getByTestId('two')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' });
-
- expect(getByTestId('three')).toHaveVirtualFocus();
-
- fireEvent.keyDown(getByRole('tree'), { key: 'ArrowDown' });
-
- expect(getByTestId('four')).toHaveVirtualFocus();
- });
-
- describe('onNodeFocus', () => {
- it('should be called when node is focused', () => {
- const focusSpy = spy();
- const { getByRole } = render(
-
- ,
- );
-
- // First node receives focus when tree focused
- act(() => {
- getByRole('tree').focus();
- });
-
- expect(focusSpy.callCount).to.equal(1);
- expect(focusSpy.args[0][1]).to.equal('1');
- });
- });
-
- describe('onNodeToggle', () => {
- it('should be called when a parent node label is clicked', () => {
- const handleNodeToggle = spy();
-
- const { getByText } = render(
-
-
-
- ,
- );
-
- fireEvent.click(getByText('outer'));
-
- expect(handleNodeToggle.callCount).to.equal(1);
- expect(handleNodeToggle.args[0][1]).to.deep.equal(['1']);
- });
-
- it('should be called when a parent node icon is clicked', () => {
- const handleNodeToggle = spy();
-
- const { getByTestId } = render(
-
- ,
- );
-
- fireEvent.click(getByTestId('icon'));
-
- expect(handleNodeToggle.callCount).to.equal(1);
- expect(handleNodeToggle.args[0][1]).to.deep.equal(['1']);
- });
- });
-
- describe('Accessibility', () => {
- it('(TreeView) should have the role `tree`', () => {
- const { getByRole } = render(,
+) {
+ warn();
+
+ return {children} ;
-}
-
-DescendantProvider.propTypes = {
- children: PropTypes.node,
- id: PropTypes.string,
-};
diff --git a/packages/mui-lab/src/TreeView/index.d.ts b/packages/mui-lab/src/TreeView/index.d.ts
deleted file mode 100644
index ce9c3ee836af8f..00000000000000
--- a/packages/mui-lab/src/TreeView/index.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default } from './TreeView';
-export * from './TreeView';
-
-export { default as treeViewClasses } from './treeViewClasses';
-export * from './treeViewClasses';
diff --git a/packages/mui-lab/src/TreeView/index.js b/packages/mui-lab/src/TreeView/index.js
deleted file mode 100644
index 8d842839e9aec0..00000000000000
--- a/packages/mui-lab/src/TreeView/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default } from './TreeView';
-
-export { default as treeViewClasses } from './treeViewClasses';
-export * from './treeViewClasses';
diff --git a/packages/mui-lab/src/TreeView/index.ts b/packages/mui-lab/src/TreeView/index.ts
new file mode 100644
index 00000000000000..b711d11f019118
--- /dev/null
+++ b/packages/mui-lab/src/TreeView/index.ts
@@ -0,0 +1,10 @@
+export { default } from './TreeView';
+export { treeViewClasses, getTreeViewUtilityClass } from '@mui/x-tree-view/TreeView';
+export type {
+ TreeViewClassKey,
+ TreeViewClasses,
+ SingleSelectTreeViewProps,
+ MultiSelectTreeViewProps,
+ TreeViewPropsBase,
+ TreeViewProps,
+} from '@mui/x-tree-view/TreeView';
diff --git a/packages/mui-lab/src/TreeView/treeViewClasses.ts b/packages/mui-lab/src/TreeView/treeViewClasses.ts
deleted file mode 100644
index dfaee08490bd4f..00000000000000
--- a/packages/mui-lab/src/TreeView/treeViewClasses.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import generateUtilityClass from '@mui/material/generateUtilityClass';
-import generateUtilityClasses from '@mui/material/generateUtilityClasses';
-
-export interface TreeViewClasses {
- /** Styles applied to the root element. */
- root: string;
-}
-
-export type TreeViewClassKey = keyof TreeViewClasses;
-
-export function getTreeViewUtilityClass(slot: string): string {
- return generateUtilityClass('MuiTreeView', slot);
-}
-
-const treeViewClasses: TreeViewClasses = generateUtilityClasses('MuiTreeView', ['root']);
-
-export default treeViewClasses;
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx b/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx
index 7dfd90ef228b2a..f56a5db765b04e 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx
@@ -45,7 +45,7 @@ function MyAutocomplete<
{
- expectType(value);
+ expectType(value);
}}
renderInput={() => null}
multiple
diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.d.ts b/packages/mui-material/src/CircularProgress/CircularProgress.d.ts
index d48f65edde9e6c..5d73c7bdfd21ca 100644
--- a/packages/mui-material/src/CircularProgress/CircularProgress.d.ts
+++ b/packages/mui-material/src/CircularProgress/CircularProgress.d.ts
@@ -31,7 +31,7 @@ export interface CircularProgressProps
/**
* The size of the component.
* If using a number, the pixel unit is assumed.
- * If using a string, you need to provide the CSS unit, e.g '3rem'.
+ * If using a string, you need to provide the CSS unit, e.g. '3rem'.
* @default 40
*/
size?: number | string;
diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.js b/packages/mui-material/src/CircularProgress/CircularProgress.js
index e41d81b2207be9..8cd7cac96025b3 100644
--- a/packages/mui-material/src/CircularProgress/CircularProgress.js
+++ b/packages/mui-material/src/CircularProgress/CircularProgress.js
@@ -238,7 +238,7 @@ CircularProgress.propTypes /* remove-proptypes */ = {
/**
* The size of the component.
* If using a number, the pixel unit is assumed.
- * If using a string, you need to provide the CSS unit, e.g '3rem'.
+ * If using a string, you need to provide the CSS unit, e.g. '3rem'.
* @default 40
*/
size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
diff --git a/packages/mui-material/src/Hidden/Hidden.d.ts b/packages/mui-material/src/Hidden/Hidden.d.ts
index 95b026223b7086..b56e7e43b1c519 100644
--- a/packages/mui-material/src/Hidden/Hidden.d.ts
+++ b/packages/mui-material/src/Hidden/Hidden.d.ts
@@ -25,22 +25,22 @@ export interface HiddenProps {
*/
initialWidth?: Breakpoint;
/**
- * If `true`, screens this size and down are hidden.
+ * If `true`, component is hidden on screens below (but not including) this size.
* @default false
*/
lgDown?: boolean;
/**
- * If `true`, screens this size and up are hidden.
+ * If `true`, component is hidden on screens this size and above.
* @default false
*/
lgUp?: boolean;
/**
- * If `true`, screens this size and down are hidden.
+ * If `true`, component is hidden on screens below (but not including) this size.
* @default false
*/
mdDown?: boolean;
/**
- * If `true`, screens this size and up are hidden.
+ * If `true`, component is hidden on screens this size and above.
* @default false
*/
mdUp?: boolean;
@@ -49,32 +49,32 @@ export interface HiddenProps {
*/
only?: Breakpoint | Breakpoint[];
/**
- * If `true`, screens this size and down are hidden.
+ * If `true`, component is hidden on screens below (but not including) this size.
* @default false
*/
smDown?: boolean;
/**
- * If `true`, screens this size and up are hidden.
+ * If `true`, component is hidden on screens this size and above.
* @default false
*/
smUp?: boolean;
/**
- * If `true`, screens this size and down are hidden.
+ * If `true`, component is hidden on screens below (but not including) this size.
* @default false
*/
xlDown?: boolean;
/**
- * If `true`, screens this size and up are hidden.
+ * If `true`, component is hidden on screens this size and above.
* @default false
*/
xlUp?: boolean;
/**
- * If `true`, screens this size and down are hidden.
+ * If `true`, component is hidden on screens below (but not including) this size.
* @default false
*/
xsDown?: boolean;
/**
- * If `true`, screens this size and up are hidden.
+ * If `true`, component is hidden on screens this size and above.
* @default false
*/
xsUp?: boolean;
diff --git a/packages/mui-material/src/ImageListItem/ImageListItem.js b/packages/mui-material/src/ImageListItem/ImageListItem.js
index a4ded4368963f1..3b6345586d0a83 100644
--- a/packages/mui-material/src/ImageListItem/ImageListItem.js
+++ b/packages/mui-material/src/ImageListItem/ImageListItem.js
@@ -101,6 +101,7 @@ const ImageListItem = React.forwardRef(function ImageListItem(inProps, ref) {
gridColumnEnd: variant !== 'masonry' ? `span ${cols}` : undefined,
gridRowEnd: variant !== 'masonry' ? `span ${rows}` : undefined,
marginBottom: variant === 'masonry' ? gap : undefined,
+ breakInside: variant === 'masonry' ? 'avoid' : undefined,
...style,
}}
ownerState={ownerState}
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
index f8f3aeec75986b..524d5afba37809 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
@@ -646,7 +646,7 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = {
*
* @default false
*/
- allowSwipeInChildren: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+ allowSwipeInChildren: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
/**
* @ignore
*/
@@ -701,20 +701,20 @@ SwipeableDrawer.propTypes /* remove-proptypes */ = {
/**
* Callback fired when the component requests to be closed.
*
- * @param {object} event The event source of the callback.
+ * @param {React.SyntheticEvent<{}>} event The event source of the callback.
*/
onClose: PropTypes.func.isRequired,
/**
* Callback fired when the component requests to be opened.
*
- * @param {object} event The event source of the callback.
+ * @param {React.SyntheticEvent<{}>} event The event source of the callback.
*/
onOpen: PropTypes.func.isRequired,
/**
* If `true`, the component is shown.
* @default false
*/
- open: PropTypes.bool.isRequired,
+ open: PropTypes.bool,
/**
* @ignore
*/
diff --git a/packages/mui-system/src/Box/Box.test.js b/packages/mui-system/src/Box/Box.test.js
index 0e0ada802a59b0..0b1808815bd89e 100644
--- a/packages/mui-system/src/Box/Box.test.js
+++ b/packages/mui-system/src/Box/Box.test.js
@@ -2,7 +2,7 @@
import * as React from 'react';
import { expect } from 'chai';
import { createRenderer, describeConformance } from 'test/utils';
-import { Box } from '@mui/system';
+import { Box, createTheme, ThemeProvider } from '@mui/system';
describe('
+ ,
+ );
+
+ expect(container.firstChild).toHaveComputedStyle({
+ // 10rem x 16px = 160px
+ maxWidth: '160px',
+ });
+ });
+ });
});
diff --git a/packages/mui-system/src/sizing.js b/packages/mui-system/src/sizing.js
index 0454dfb1702845..096a5bf9f85256 100644
--- a/packages/mui-system/src/sizing.js
+++ b/packages/mui-system/src/sizing.js
@@ -16,8 +16,21 @@ export const maxWidth = (props) => {
const styleFromPropValue = (propValue) => {
const breakpoint =
props.theme?.breakpoints?.values?.[propValue] || breakpointsValues[propValue];
+
+ if (!breakpoint) {
+ return {
+ maxWidth: sizingTransform(propValue),
+ };
+ }
+
+ if (props.theme?.breakpoints?.unit !== 'px') {
+ return {
+ maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`,
+ };
+ }
+
return {
- maxWidth: breakpoint || sizingTransform(propValue),
+ maxWidth: breakpoint,
};
};
return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
diff --git a/packages/mui-system/src/sizing.test.js b/packages/mui-system/src/sizing.test.js
index 0b5d322043d2ad..fbab61d41fde36 100644
--- a/packages/mui-system/src/sizing.test.js
+++ b/packages/mui-system/src/sizing.test.js
@@ -1,4 +1,5 @@
import { expect } from 'chai';
+import { createTheme } from '@mui/system';
import sizing from './sizing';
describe('sizing', () => {
@@ -19,4 +20,26 @@ describe('sizing', () => {
maxWidth: 0,
});
});
+
+ describe('maxWidth', () => {
+ it('should work with custom units', () => {
+ const theme = createTheme({
+ breakpoints: {
+ unit: 'rem',
+ values: {
+ xs: 10,
+ },
+ },
+ });
+
+ const output = sizing({
+ maxWidth: 'xs',
+ theme,
+ });
+
+ expect(output).to.deep.equal({
+ maxWidth: '10rem',
+ });
+ });
+ });
});
diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
index 376cc2de5689b1..ba0d89c8fdb8f6 100644
--- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
+++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
@@ -20,11 +20,11 @@ describe('styleFunctionSx', () => {
breakpoints: {
keys: ['xs', 'sm', 'md', 'lg', 'xl'],
values: breakpointsValues,
+ unit: 'px',
up: (key) => {
return `@media (min-width:${breakpointsValues[key]}px)`;
},
},
- unit: 'px',
palette: {
primary: {
main: 'rgb(0, 0, 255)',
diff --git a/packages/typescript-to-proptypes/package.json b/packages/typescript-to-proptypes/package.json
index fabb40e798e7cf..55fdd1632b7f50 100644
--- a/packages/typescript-to-proptypes/package.json
+++ b/packages/typescript-to-proptypes/package.json
@@ -24,7 +24,7 @@
"@types/babel__core": "^7.20.1",
"@types/doctrine": "^0.0.6",
"@types/lodash": "^4.14.197",
- "@types/node": "^18.17.12",
+ "@types/node": "^18.17.14",
"@types/prettier": "^2.7.3",
"@types/react": "^18.2.21",
"@types/uuid": "^9.0.2",
diff --git a/packages/typescript-to-proptypes/src/types/props.ts b/packages/typescript-to-proptypes/src/createType.ts
similarity index 68%
rename from packages/typescript-to-proptypes/src/types/props.ts
rename to packages/typescript-to-proptypes/src/createType.ts
index b9a9e9465dc69c..4ca05ed12f4549 100644
--- a/packages/typescript-to-proptypes/src/types/props.ts
+++ b/packages/typescript-to-proptypes/src/createType.ts
@@ -1,29 +1,21 @@
import _ from 'lodash';
-
-export interface BasePropType {
- jsDoc: string | undefined;
- type: string;
-}
-
-export type PropType =
- | AnyType
- | ArrayType
- | BooleanType
- | DOMElementType
- | ElementType
- | FunctionType
- | InstanceOfType
- | InterfaceType
- | LiteralType
- | NumericType
- | ObjectType
- | StringType
- | UndefinedType
- | UnionType;
-
-export interface AnyType extends BasePropType {
- type: 'any';
-}
+import {
+ PropType,
+ ArrayType,
+ LiteralType,
+ BooleanType,
+ AnyType,
+ UnionType,
+ BasePropType,
+ ElementType,
+ DOMElementType,
+ InstanceOfType,
+ InterfaceType,
+ FunctionType,
+ StringType,
+ ObjectType,
+ NumericType,
+} from './models';
export function createAnyType(init: { jsDoc: string | undefined }): AnyType {
return {
@@ -32,11 +24,6 @@ export function createAnyType(init: { jsDoc: string | undefined }): AnyType {
};
}
-export interface ArrayType extends BasePropType {
- arrayType: PropType;
- type: 'array';
-}
-
export function createArrayType(init: {
arrayType: PropType;
jsDoc: string | undefined;
@@ -48,10 +35,6 @@ export function createArrayType(init: {
};
}
-export interface BooleanType extends BasePropType {
- type: 'boolean';
-}
-
export function createBooleanType(init: { jsDoc: string | undefined }): BooleanType {
return {
type: 'boolean',
@@ -59,11 +42,6 @@ export function createBooleanType(init: { jsDoc: string | undefined }): BooleanT
};
}
-export interface DOMElementType extends BasePropType {
- optional?: boolean;
- type: 'DOMElementNode';
-}
-
export function createDOMElementType(init: {
optional: boolean | undefined;
jsDoc: string | undefined;
@@ -75,11 +53,6 @@ export function createDOMElementType(init: {
};
}
-export interface ElementType extends BasePropType {
- elementType: 'element' | 'node' | 'elementType';
- type: 'ElementNode';
-}
-
export function createElementType(init: {
elementType: ElementType['elementType'];
jsDoc: string | undefined;
@@ -91,10 +64,6 @@ export function createElementType(init: {
};
}
-export interface FunctionType extends BasePropType {
- type: 'FunctionNode';
-}
-
export function createFunctionType(init: { jsDoc: string | undefined }): FunctionType {
return {
type: 'FunctionNode',
@@ -102,11 +71,6 @@ export function createFunctionType(init: { jsDoc: string | undefined }): Functio
};
}
-export interface InstanceOfType extends BasePropType {
- instance: string;
- type: 'InstanceOfNode';
-}
-
export function createInstanceOfType(init: {
jsDoc: string | undefined;
instance: string;
@@ -118,11 +82,6 @@ export function createInstanceOfType(init: {
};
}
-export interface InterfaceType extends BasePropType {
- type: 'InterfaceNode';
- types: ReadonlyArray<[string, PropType]>;
-}
-
export function createInterfaceType(init: {
jsDoc: string | undefined;
types: ReadonlyArray<[string, PropType]> | undefined;
@@ -134,11 +93,6 @@ export function createInterfaceType(init: {
};
}
-export interface LiteralType extends BasePropType {
- value: unknown;
- type: 'LiteralNode';
-}
-
export function createLiteralType(init: {
value: unknown;
jsDoc: string | undefined;
@@ -150,10 +104,6 @@ export function createLiteralType(init: {
};
}
-export interface NumericType extends BasePropType {
- type: 'NumericNode';
-}
-
export function createNumericType(init: { jsDoc: string | undefined }): NumericType {
return {
type: 'NumericNode',
@@ -161,10 +111,6 @@ export function createNumericType(init: { jsDoc: string | undefined }): NumericT
};
}
-export interface ObjectType extends BasePropType {
- type: 'ObjectNode';
-}
-
export function createObjectType(init: { jsDoc: string | undefined }): ObjectType {
return {
type: 'ObjectNode',
@@ -172,10 +118,6 @@ export function createObjectType(init: { jsDoc: string | undefined }): ObjectTyp
};
}
-export interface StringType extends BasePropType {
- type: 'StringNode';
-}
-
export function createStringType(init: { jsDoc: string | undefined }): StringType {
return {
type: 'StringNode',
@@ -194,11 +136,6 @@ export function createUndefinedType(init: { jsDoc: string | undefined }): Undefi
};
}
-export interface UnionType extends BasePropType {
- type: 'UnionNode';
- types: readonly PropType[];
-}
-
export function uniqueUnionTypes(node: UnionType): UnionType {
return {
type: node.type,
diff --git a/packages/typescript-to-proptypes/src/generator.ts b/packages/typescript-to-proptypes/src/generatePropTypes.ts
similarity index 86%
rename from packages/typescript-to-proptypes/src/generator.ts
rename to packages/typescript-to-proptypes/src/generatePropTypes.ts
index face64ba54344c..004fbb17ab1416 100644
--- a/packages/typescript-to-proptypes/src/generator.ts
+++ b/packages/typescript-to-proptypes/src/generatePropTypes.ts
@@ -1,7 +1,8 @@
import _ from 'lodash';
-import * as t from './types';
+import { PropTypeDefinition, PropTypesComponent, PropType, LiteralType } from './models';
+import { createDOMElementType, createBooleanType, uniqueUnionTypes } from './createType';
-export interface GenerateOptions {
+export interface GeneratePropTypesOptions {
/**
* If source itself written in typescript prop-types disable prop-types validation
* by injecting propTypes as
@@ -18,7 +19,7 @@ export interface GenerateOptions {
* Enable/disable the default sorting (ascending) or provide your own sort function
* @default true
*/
- sortProptypes?: boolean | ((a: t.PropTypeDefinition, b: t.PropTypeDefinition) => 0 | -1 | 1);
+ sortProptypes?: boolean | ((a: PropTypeDefinition, b: PropTypeDefinition) => 0 | -1 | 1);
/**
* The name used when importing prop-types
* @default 'PropTypes'
@@ -40,7 +41,7 @@ export interface GenerateOptions {
* @default Uses `generated` source
*/
reconcilePropTypes?(
- proptype: t.PropTypeDefinition,
+ proptype: PropTypeDefinition,
previous: string | undefined,
generated: string,
): string;
@@ -48,7 +49,7 @@ export interface GenerateOptions {
* Control which PropTypes are included in the final result
* @param proptype The current PropType about to be converted to text
*/
- shouldInclude?(proptype: t.PropTypeDefinition): boolean | undefined;
+ shouldInclude?(proptype: PropTypeDefinition): boolean | undefined;
/**
* A comment that will be added to the start of the PropTypes code block
* @example
@@ -62,18 +63,18 @@ export interface GenerateOptions {
* If `undefined` is returned the default `sortLiteralUnions` will be used.
*/
getSortLiteralUnions?: (
- component: t.Component,
- propType: t.PropTypeDefinition,
- ) => ((a: t.LiteralType, b: t.LiteralType) => number) | undefined;
+ component: PropTypesComponent,
+ propType: PropTypeDefinition,
+ ) => ((a: LiteralType, b: LiteralType) => number) | undefined;
/**
* By default literals in unions are sorted by:
* - numbers last, ascending
* - anything else by their stringified value using localeCompare
*/
- sortLiteralUnions?: (a: t.LiteralType, b: t.LiteralType) => number;
+ sortLiteralUnions?: (a: LiteralType, b: LiteralType) => number;
}
-function defaultSortLiteralUnions(a: t.LiteralType, b: t.LiteralType) {
+function defaultSortLiteralUnions(a: LiteralType, b: LiteralType) {
const { value: valueA } = a;
const { value: valueB } = b;
// numbers ascending
@@ -96,7 +97,10 @@ function defaultSortLiteralUnions(a: t.LiteralType, b: t.LiteralType) {
* @param component The component to convert to code
* @param options The options used to control the way the code gets generated
*/
-export function generate(component: t.Component, options: GenerateOptions = {}): string {
+export function generatePropTypes(
+ component: PropTypesComponent,
+ options: GeneratePropTypesOptions = {},
+): string {
const {
disablePropTypesTypeChecking = false,
ensureBabelPluginTransformReactRemovePropTypesIntegration = false,
@@ -104,13 +108,13 @@ export function generate(component: t.Component, options: GenerateOptions = {}):
includeJSDoc = true,
sortProptypes = true,
previousPropTypesSource = new Map(),
- reconcilePropTypes = (_prop: t.PropTypeDefinition, _previous: string, generated: string) =>
+ reconcilePropTypes = (_prop: PropTypeDefinition, _previous: string, generated: string) =>
generated,
shouldInclude,
getSortLiteralUnions = () => defaultSortLiteralUnions,
} = options;
- function jsDoc(documentedNode: t.PropTypeDefinition | t.LiteralType): string {
+ function jsDoc(documentedNode: PropTypeDefinition | LiteralType): string {
if (!includeJSDoc || !documentedNode.jsDoc) {
return '';
}
@@ -120,8 +124,8 @@ export function generate(component: t.Component, options: GenerateOptions = {}):
}
function generatePropType(
- propType: t.PropType,
- context: { component: t.Component; propTypeDefinition: t.PropTypeDefinition },
+ propType: PropType,
+ context: { component: PropTypesComponent; propTypeDefinition: PropTypeDefinition },
): string {
if (propType.type === 'InterfaceNode') {
return `${importedName}.shape({\n${propType.types
@@ -204,7 +208,7 @@ export function generate(component: t.Component, options: GenerateOptions = {}):
}
if (propType.type === 'UnionNode') {
- const uniqueTypes = t.uniqueUnionTypes(propType).types;
+ const uniqueTypes = uniqueUnionTypes(propType).types;
const isOptional = uniqueTypes.some(
(type) =>
type.type === 'UndefinedNode' || (type.type === 'LiteralNode' && type.value === 'null'),
@@ -217,14 +221,14 @@ export function generate(component: t.Component, options: GenerateOptions = {}):
if (uniqueTypes.length === 2 && uniqueTypes.some((type) => type.type === 'DOMElementNode')) {
return generatePropType(
- t.createDOMElementType({ jsDoc: undefined, optional: isOptional }),
+ createDOMElementType({ jsDoc: undefined, optional: isOptional }),
context,
);
}
let [literals, rest] = _.partition(
isOptional ? nonNullishUniqueTypes : uniqueTypes,
- (type): type is t.LiteralType => type.type === 'LiteralNode',
+ (type): type is LiteralType => type.type === 'LiteralNode',
);
const sortLiteralUnions =
@@ -232,7 +236,7 @@ export function generate(component: t.Component, options: GenerateOptions = {}):
defaultSortLiteralUnions;
literals = literals.sort(sortLiteralUnions);
- const nodeToStringName = (type: t.PropType): string => {
+ const nodeToStringName = (type: PropType): string => {
if (type.type === 'InstanceOfNode') {
return `${type.type}.${type.instance}`;
}
@@ -248,7 +252,7 @@ export function generate(component: t.Component, options: GenerateOptions = {}):
rest = rest.sort((a, b) => nodeToStringName(a).localeCompare(nodeToStringName(b)));
if (literals.find((x) => x.value === 'true') && literals.find((x) => x.value === 'false')) {
- rest.push(t.createBooleanType({ jsDoc: undefined }));
+ rest.push(createBooleanType({ jsDoc: undefined }));
literals = literals.filter((x) => x.value !== 'true' && x.value !== 'false');
}
@@ -278,8 +282,8 @@ export function generate(component: t.Component, options: GenerateOptions = {}):
}
function generatePropTypeDefinition(
- propTypeDefinition: t.PropTypeDefinition,
- context: { component: t.Component },
+ propTypeDefinition: PropTypeDefinition,
+ context: { component: PropTypesComponent },
): string {
let isRequired: boolean | undefined = true;
diff --git a/packages/typescript-to-proptypes/src/getPropTypesFromFile.ts b/packages/typescript-to-proptypes/src/getPropTypesFromFile.ts
new file mode 100644
index 00000000000000..0da13bc41aaac8
--- /dev/null
+++ b/packages/typescript-to-proptypes/src/getPropTypesFromFile.ts
@@ -0,0 +1,565 @@
+import ts from 'typescript';
+import * as doctrine from 'doctrine';
+import {
+ GetPropsFromComponentDeclarationOptions,
+ getPropsFromComponentNode,
+} from '@mui-internal/api-docs-builder/utils/getPropsFromComponentNode';
+import { TypeScriptProject } from '@mui-internal/api-docs-builder/utils/createTypeScriptProject';
+import {
+ createUnionType,
+ createUndefinedType,
+ createAnyType,
+ createElementType,
+ createDOMElementType,
+ createArrayType,
+ createFunctionType,
+ createInstanceOfType,
+ createLiteralType,
+ createInterfaceType,
+ createNumericType,
+ createObjectType,
+ createStringType,
+} from './createType';
+import { PropTypeDefinition, PropTypesComponent, PropType } from './models';
+
+function getSymbolFileNames(symbol: ts.Symbol): Set {
+ const declarations = symbol.getDeclarations() || [];
+
+ return new Set(declarations.map((declaration) => declaration.getSourceFile().fileName));
+}
+
+function getSymbolDocumentation({
+ symbol,
+ project,
+}: {
+ symbol: ts.Symbol | undefined;
+ project: TypeScriptProject;
+}): string | undefined {
+ if (symbol === undefined) {
+ return undefined;
+ }
+
+ const decl = symbol.getDeclarations();
+ if (decl) {
+ // @ts-ignore
+ const comments = ts.getJSDocCommentsAndTags(decl[0]) as readonly any[];
+ if (comments && comments.length === 1) {
+ const commentNode = comments[0];
+ if (ts.isJSDoc(commentNode)) {
+ return doctrine.unwrapComment(commentNode.getText()).trim();
+ }
+ }
+ }
+
+ const comment = ts.displayPartsToString(symbol.getDocumentationComment(project.checker));
+ return comment !== '' ? comment : undefined;
+}
+
+function checkType({
+ type,
+ location,
+ typeStack,
+ name,
+ project,
+}: {
+ type: ts.Type;
+ location: ts.Node;
+ typeStack: readonly number[];
+ name: string;
+ project: PropTypesProject;
+}): PropType {
+ // If the typeStack contains type.id we're dealing with an object that references itself.
+ // To prevent getting stuck in an infinite loop we just set it to an createObjectType
+ if (typeStack.includes((type as any).id)) {
+ return createObjectType({ jsDoc: undefined });
+ }
+
+ const typeNode = type as any;
+ const symbol = typeNode.aliasSymbol ? typeNode.aliasSymbol : typeNode.symbol;
+ const jsDoc = getSymbolDocumentation({ symbol, project });
+
+ {
+ const typeName = symbol ? project.checker.getFullyQualifiedName(symbol) : null;
+
+ switch (typeName) {
+ // Remove once global JSX namespace is no longer used by React
+ case 'global.JSX.Element':
+ case 'React.JSX.Element':
+ case 'React.ReactElement': {
+ return createElementType({ jsDoc, elementType: 'element' });
+ }
+ case 'React.ElementType': {
+ return createElementType({
+ jsDoc,
+ elementType: 'elementType',
+ });
+ }
+ case 'React.ReactNode': {
+ return createUnionType({
+ jsDoc,
+ types: [
+ createElementType({ elementType: 'node', jsDoc: undefined }),
+ createUndefinedType({ jsDoc: undefined }),
+ ],
+ });
+ }
+ case 'React.Component': {
+ return createInstanceOfType({ jsDoc, instance: typeName });
+ }
+ case 'Element':
+ case 'HTMLElement': {
+ return createDOMElementType({ jsDoc, optional: undefined });
+ }
+ case 'RegExp': {
+ return createInstanceOfType({ jsDoc, instance: 'RegExp' });
+ }
+ case 'Date': {
+ return createInstanceOfType({ jsDoc, instance: 'Date' });
+ }
+ default:
+ // continue with function execution
+ break;
+ }
+ }
+
+ if (project.checker.isArrayType(type)) {
+ // @ts-ignore
+ const arrayType: ts.Type = project.checker.getElementTypeOfArrayType(type);
+ return createArrayType({
+ arrayType: checkType({ type: arrayType, location, typeStack, name, project }),
+ jsDoc,
+ });
+ }
+
+ const isTupleType = project.checker.isTupleType(type);
+ if (isTupleType) {
+ return createArrayType({
+ arrayType: createUnionType({
+ jsDoc: undefined,
+ types: (type as any).typeArguments.map((x: ts.Type) =>
+ checkType({ type: x, location, typeStack, name, project }),
+ ),
+ }),
+ jsDoc,
+ });
+ }
+
+ if (type.isUnion()) {
+ const node = createUnionType({
+ jsDoc,
+ types: type.types.map((x) => checkType({ type: x, location, typeStack, name, project })),
+ });
+
+ return node.types.length === 1 ? node.types[0] : node;
+ }
+
+ if (type.flags & ts.TypeFlags.TypeParameter) {
+ const baseConstraintOfType = project.checker.getBaseConstraintOfType(type);
+
+ if (baseConstraintOfType) {
+ if (
+ baseConstraintOfType.flags & ts.TypeFlags.Object &&
+ baseConstraintOfType.symbol.members?.size === 0
+ ) {
+ return createAnyType({ jsDoc });
+ }
+
+ return checkType({ type: baseConstraintOfType!, location, typeStack, name, project });
+ }
+ }
+
+ if (type.flags & ts.TypeFlags.String) {
+ return createStringType({ jsDoc });
+ }
+
+ if (type.flags & ts.TypeFlags.Number) {
+ return createNumericType({ jsDoc });
+ }
+
+ if (type.flags & ts.TypeFlags.Undefined) {
+ return createUndefinedType({ jsDoc });
+ }
+
+ if (type.flags & ts.TypeFlags.Any || type.flags & ts.TypeFlags.Unknown) {
+ return createAnyType({ jsDoc });
+ }
+
+ if (type.flags & ts.TypeFlags.Literal) {
+ if (type.isLiteral()) {
+ return createLiteralType({
+ value: type.isStringLiteral() ? `"${type.value}"` : type.value,
+ jsDoc,
+ });
+ }
+ return createLiteralType({
+ jsDoc,
+ value: project.checker.typeToString(type),
+ });
+ }
+
+ if (type.flags & ts.TypeFlags.Null) {
+ return createLiteralType({ jsDoc, value: 'null' });
+ }
+
+ if (type.getCallSignatures().length) {
+ return createFunctionType({ jsDoc });
+ }
+
+ // () => new ClassInstance
+ if (type.getConstructSignatures().length) {
+ return createFunctionType({ jsDoc });
+ }
+
+ // Object-like type
+ {
+ const properties = type.getProperties();
+ if (properties.length) {
+ if (
+ project.shouldResolveObject({
+ name,
+ propertyCount: properties.length,
+ depth: typeStack.length,
+ })
+ ) {
+ const filtered = properties.filter((x) =>
+ project.shouldInclude({ name: x.getName(), depth: typeStack.length + 1 }),
+ );
+ if (filtered.length > 0) {
+ return createInterfaceType({
+ jsDoc,
+ types: filtered.map((x) => {
+ // eslint-disable-next-line @typescript-eslint/no-use-before-define -- TODO dependency cycle between checkSymbol and checkType
+ const definition = checkSymbol({
+ symbol: x,
+ location,
+ project,
+ typeStack: [...typeStack, (type as any).id],
+ });
+ definition.propType.jsDoc = definition.jsDoc;
+
+ return [definition.name, definition.propType];
+ }),
+ });
+ }
+ }
+
+ return createObjectType({ jsDoc });
+ }
+ }
+
+ // Object without properties or object keyword
+ if (
+ type.flags & ts.TypeFlags.Object ||
+ (type.flags & ts.TypeFlags.NonPrimitive && project.checker.typeToString(type) === 'object')
+ ) {
+ return createObjectType({ jsDoc });
+ }
+
+ console.warn(
+ `${project.reactComponentName}: Unable to handle node of type "ts.TypeFlags.${
+ ts.TypeFlags[type.flags]
+ }", using any`,
+ );
+ return createAnyType({ jsDoc });
+}
+
+function checkSymbol({
+ project,
+ symbol,
+ location,
+ typeStack,
+}: {
+ project: PropTypesProject;
+ symbol: ts.Symbol;
+ location: ts.Node;
+ typeStack: readonly number[];
+}): PropTypeDefinition {
+ const declarations = symbol.getDeclarations();
+ const declaration = declarations && declarations[0];
+ const symbolFilenames = getSymbolFileNames(symbol);
+ const jsDoc = getSymbolDocumentation({ symbol, project });
+
+ // TypeChecker keeps the name for
+ // { a: React.ElementType, b: React.ReactElement | boolean }
+ // but not
+ // { a?: React.ElementType, b: React.ReactElement }
+ // get around this by not using the TypeChecker
+ if (
+ declaration &&
+ ts.isPropertySignature(declaration) &&
+ declaration.type &&
+ ts.isTypeReferenceNode(declaration.type)
+ ) {
+ const name = declaration.type.typeName.getText();
+ if (
+ name === 'React.ElementType' ||
+ name === 'React.JSXElementConstructor' ||
+ name === 'React.ReactElement'
+ ) {
+ const elementNode = createElementType({
+ elementType: name === 'React.ReactElement' ? 'element' : 'elementType',
+ jsDoc,
+ });
+
+ return {
+ $$id: project.createPropTypeId(symbol),
+ name: symbol.getName(),
+ jsDoc,
+ filenames: symbolFilenames,
+ propType: declaration.questionToken
+ ? createUnionType({
+ jsDoc: elementNode.jsDoc,
+ types: [
+ createUndefinedType({ jsDoc: undefined }),
+ {
+ ...elementNode,
+ // jsDoc was hoisted to the union type
+ jsDoc: undefined,
+ },
+ ],
+ })
+ : elementNode,
+ };
+ }
+ }
+
+ const symbolType = declaration
+ ? // The proptypes aren't detailed enough that we need all the different combinations
+ // so we just pick the first and ignore the rest
+ project.checker.getTypeOfSymbolAtLocation(symbol, declaration)
+ : project.checker.getTypeOfSymbolAtLocation(symbol, location);
+
+ let type: ts.Type;
+ if (declaration === undefined) {
+ type = symbolType;
+ } else {
+ const declaredType = project.checker.getTypeAtLocation(declaration);
+ const baseConstraintOfType = project.checker.getBaseConstraintOfType(declaredType);
+
+ if (baseConstraintOfType === undefined || baseConstraintOfType === declaredType) {
+ type = symbolType;
+ }
+ // get `React.ElementType` from `C extends React.ElementType`
+ else if (baseConstraintOfType.aliasSymbol?.escapedName === 'ElementType') {
+ type = baseConstraintOfType;
+ } else {
+ type = symbolType;
+ }
+ }
+
+ if (!type) {
+ throw new Error('No types found');
+ }
+
+ // Typechecker only gives the type "any" if it's present in a union
+ // This means the type of "a" in {a?:any} isn't "any | undefined"
+ // So instead we check for the questionmark to detect optional types
+ let parsedType: PropType | undefined;
+ if (
+ (type.flags & ts.TypeFlags.Any || type.flags & ts.TypeFlags.Unknown) &&
+ declaration &&
+ ts.isPropertySignature(declaration)
+ ) {
+ parsedType =
+ symbol.flags & ts.SymbolFlags.Optional
+ ? createUnionType({
+ jsDoc,
+ types: [createUndefinedType({ jsDoc: undefined }), createAnyType({ jsDoc: undefined })],
+ })
+ : createAnyType({ jsDoc });
+ } else {
+ parsedType = checkType({ type, location, typeStack, name: symbol.getName(), project });
+ }
+
+ return {
+ $$id: project.createPropTypeId(type),
+ name: symbol.getName(),
+ jsDoc,
+ propType: parsedType,
+ filenames: symbolFilenames,
+ };
+}
+
+/**
+ * Squashes props from:
+ * { variant: 'a', href: string } & { variant: 'b' }
+ * Into:
+ * { variant: 'a' | 'b', href?: string }
+ */
+function squashPropTypeDefinitions({
+ propTypeDefinitions,
+ onlyUsedInSomeSignatures,
+}: {
+ propTypeDefinitions: PropTypeDefinition[];
+ onlyUsedInSomeSignatures: boolean;
+}): PropTypeDefinition {
+ const distinctDefinitions = new Map();
+ propTypeDefinitions.forEach((definition) => {
+ if (!distinctDefinitions.has(definition.$$id)) {
+ distinctDefinitions.set(definition.$$id, definition);
+ }
+ });
+
+ if (distinctDefinitions.size === 1 && !onlyUsedInSomeSignatures) {
+ return propTypeDefinitions[0];
+ }
+
+ const definitions = Array.from(distinctDefinitions.values());
+ const types = definitions.map((definition) => definition.propType);
+ if (onlyUsedInSomeSignatures) {
+ types.push(createUndefinedType({ jsDoc: undefined }));
+ }
+
+ return {
+ name: definitions[0].name,
+ jsDoc: definitions[0].jsDoc,
+ propType: createUnionType({
+ // TODO: jsDoc from squashing is dropped
+ jsDoc: undefined,
+ types,
+ }),
+ filenames: new Set(definitions.flatMap((definition) => Array.from(definition.filenames))),
+ $$id: definitions[0].$$id,
+ };
+}
+
+function generatePropTypesFromNode(
+ params: Omit & { project: PropTypesProject },
+): PropTypesComponent | null {
+ const parsedComponent = getPropsFromComponentNode(params);
+ if (parsedComponent == null) {
+ return null;
+ }
+
+ const propsFilename =
+ parsedComponent.sourceFile !== undefined ? parsedComponent.sourceFile.fileName : undefined;
+
+ const types = Object.values(parsedComponent.props).map((prop) => {
+ const propTypeDefinitions = prop.signatures.map(({ symbol, componentType }) =>
+ checkSymbol({
+ symbol,
+ project: params.project,
+ location: parsedComponent.location,
+ typeStack: [(componentType as any).id],
+ }),
+ );
+
+ return squashPropTypeDefinitions({
+ propTypeDefinitions,
+ onlyUsedInSomeSignatures: prop.onlyUsedInSomeSignatures,
+ });
+ });
+
+ return {
+ name: parsedComponent.name,
+ types,
+ propsFilename,
+ };
+}
+
+export function getPropTypesFromFile({
+ filePath,
+ project,
+ shouldInclude: inShouldInclude,
+ shouldResolveObject: inShouldResolveObject,
+ checkDeclarations,
+}: GetPropTypesFromFileOptions) {
+ const sourceFile = project.program.getSourceFile(filePath);
+ const reactComponentName = filePath.match(/.*\/([^/]+)/)?.[1];
+ const components: PropTypesComponent[] = [];
+ const sigilIds: Map = new Map();
+ /**
+ *
+ * @param sigil - Prefer ts.Type if available since these are re-used in the type checker. Symbols (especially those for literals) are oftentimes re-created on every usage.
+ */
+ function createPropTypeId(sigil: ts.Symbol | ts.Type) {
+ if (!sigilIds.has(sigil)) {
+ sigilIds.set(sigil, sigilIds.size);
+ }
+
+ return sigilIds.get(sigil)!;
+ }
+
+ const shouldResolveObject: PropTypesProject['shouldResolveObject'] = (data) => {
+ if (inShouldResolveObject) {
+ const result = inShouldResolveObject(data);
+ if (result !== undefined) {
+ return result;
+ }
+ }
+
+ return data.propertyCount <= 50 && data.depth <= 3;
+ };
+
+ const shouldInclude: PropTypesProject['shouldInclude'] = (data): boolean => {
+ // ref is a reserved prop name in React
+ // e.g. https://github.com/reactjs/rfcs/pull/107
+ // no need to add a prop-type
+ if (data.name === 'ref') {
+ return false;
+ }
+
+ if (inShouldInclude) {
+ const result = inShouldInclude(data);
+ if (result !== undefined) {
+ return result;
+ }
+ }
+
+ return true;
+ };
+
+ const propTypesProject: PropTypesProject = {
+ ...project,
+ reactComponentName,
+ shouldResolveObject,
+ shouldInclude,
+ createPropTypeId,
+ };
+
+ if (sourceFile) {
+ ts.forEachChild(sourceFile, (node) => {
+ const component = generatePropTypesFromNode({
+ project: propTypesProject,
+ node,
+ shouldInclude,
+ checkDeclarations,
+ });
+ if (component != null) {
+ components.push(component);
+ }
+ });
+ } else {
+ throw new Error(`Program doesn't contain file "${filePath}"`);
+ }
+
+ return components;
+}
+
+export interface GetPropTypesFromFileOptions
+ extends Pick<
+ GetPropsFromComponentDeclarationOptions,
+ 'shouldInclude' | 'project' | 'checkDeclarations'
+ > {
+ filePath: string;
+ /**
+ * Called before the shape of an object is resolved
+ * @returns true to resolve the shape of the object, false to just use a object, or undefined to
+ * use the default behavior
+ * @default propertyCount <= 50 && depth <= 3
+ */
+ shouldResolveObject?: (data: {
+ name: string;
+ propertyCount: number;
+ depth: number;
+ }) => boolean | undefined;
+}
+
+interface PropTypesProject extends TypeScriptProject {
+ reactComponentName: string | undefined;
+ shouldResolveObject: NonNullable;
+ shouldInclude: NonNullable;
+ createPropTypeId: (sigil: ts.Symbol | ts.Type) => number;
+}
+
+// project.checker.getTypeAtLocation(property.declarations?.[0]!)
diff --git a/packages/typescript-to-proptypes/src/index.ts b/packages/typescript-to-proptypes/src/index.ts
index 3b197871be418a..0431fe53ca7658 100644
--- a/packages/typescript-to-proptypes/src/index.ts
+++ b/packages/typescript-to-proptypes/src/index.ts
@@ -1,8 +1,6 @@
-import * as ts from 'typescript';
-
-export { default as loadConfig } from './loadConfig';
-export * from './generator';
-export * from './parser';
-export * from './injector';
-export * from './types';
-export { ts };
+export { getPropTypesFromFile } from './getPropTypesFromFile';
+export type { GetPropTypesFromFileOptions } from './getPropTypesFromFile';
+export { injectPropTypesInFile } from './injectPropTypesInFile';
+export type { InjectPropTypesInFileOptions } from './injectPropTypesInFile';
+export { generatePropTypes } from './generatePropTypes';
+export type { GeneratePropTypesOptions } from './generatePropTypes';
diff --git a/packages/typescript-to-proptypes/src/injector.ts b/packages/typescript-to-proptypes/src/injectPropTypesInFile.ts
similarity index 88%
rename from packages/typescript-to-proptypes/src/injector.ts
rename to packages/typescript-to-proptypes/src/injectPropTypesInFile.ts
index f4f29ba9b3bf67..20cb39d63058d9 100644
--- a/packages/typescript-to-proptypes/src/injector.ts
+++ b/packages/typescript-to-proptypes/src/injectPropTypesInFile.ts
@@ -1,12 +1,12 @@
import * as babel from '@babel/core';
import * as babelTypes from '@babel/types';
import { v4 as uuid } from 'uuid';
-import * as t from './types';
-import { generate, GenerateOptions } from './generator';
+import { generatePropTypes, GeneratePropTypesOptions } from './generatePropTypes';
+import { PropTypesComponent, PropTypeDefinition, LiteralType } from './models';
-export interface InjectOptions
+export interface InjectPropTypesInFileOptions
extends Pick<
- GenerateOptions,
+ GeneratePropTypesOptions,
| 'sortProptypes'
| 'includeJSDoc'
| 'comment'
@@ -15,7 +15,7 @@ export interface InjectOptions
| 'ensureBabelPluginTransformReactRemovePropTypesIntegration'
> {
/**
- * By default all unused props are omitted from the result.
+ * By default, all unused props are omitted from the result.
* Set this to true to include them instead.
*/
includeUnusedProps?: boolean;
@@ -26,14 +26,14 @@ export interface InjectOptions
* @default includeUnusedProps ? true : data.usedProps.includes(data.prop.name)
*/
shouldInclude?(data: {
- component: t.Component;
- prop: t.PropTypeDefinition;
+ component: PropTypesComponent;
+ prop: PropTypeDefinition;
usedProps: readonly string[];
}): boolean | undefined;
/**
* You can override the order of literals in unions based on the proptype.
*
- * By default literals in unions are sorted by:
+ * By default, literals in unions are sorted by:
* - numbers last, ascending
* - anything else by their stringified value using localeCompare
* Note: The order of the literals as they "appear" in the typings cannot be preserved.
@@ -41,9 +41,9 @@ export interface InjectOptions
* By always returning 0 from the sort function you keep the order the type checker dictates.
*/
getSortLiteralUnions?: (
- component: t.Component,
- propType: t.PropTypeDefinition,
- ) => ((a: t.LiteralType, b: t.LiteralType) => number) | undefined;
+ component: PropTypesComponent,
+ propType: PropTypeDefinition,
+ ) => ((a: LiteralType, b: LiteralType) => number) | undefined;
/**
* Options passed to babel.transformSync
*/
@@ -132,21 +132,27 @@ function flattenTsAsExpression(node: babel.types.Node | null | undefined) {
return node;
}
-function plugin(
- propTypes: t.Program,
- options: InjectOptions,
- mapOfPropTypes: Map,
-): babel.PluginObj {
+function createBabelPlugin({
+ components,
+ options,
+ mapOfPropTypes,
+}: {
+ components: PropTypesComponent[];
+ options: InjectPropTypesInFileOptions;
+ mapOfPropTypes: Map;
+}): babel.PluginObj {
const {
includeUnusedProps = false,
reconcilePropTypes = (
- _prop: t.PropTypeDefinition,
+ _prop: PropTypeDefinition,
_previous: string | undefined,
generated: string,
) => generated,
...otherOptions
} = options;
- const shouldInclude: Exclude = (data) => {
+ const shouldInclude: Exclude = (
+ data,
+ ) => {
// key is a reserved prop name in React
// e.g. https://github.com/reactjs/rfcs/pull/107
// no need to add a prop-type if we won't generate the docs for it.
@@ -173,12 +179,12 @@ function plugin(
function injectPropTypes(injectOptions: {
path: babel.NodePath;
usedProps: readonly string[];
- props: t.Component;
+ props: PropTypesComponent;
nodeName: string;
}) {
const { path, props, usedProps, nodeName } = injectOptions;
- const source = generate(props, {
+ const source = generatePropTypes(props, {
...otherOptions,
importedName: importName,
previousPropTypesSource,
@@ -319,7 +325,7 @@ function plugin(
if (!node.id) {
return;
}
- const props = propTypes.body.find((prop) => prop.name === node.id!.name);
+ const props = components.find((component) => component.name === node.id!.name);
if (!props) {
return;
}
@@ -353,7 +359,7 @@ function plugin(
}
const nodeName = node.id.name;
- const props = propTypes.body.find((prop) => prop.name === nodeName);
+ const props = components.find((component) => component.name === nodeName);
if (!props) {
return;
}
@@ -387,7 +393,7 @@ function plugin(
if (babelTypes.isArrowFunctionExpression(arg) || babelTypes.isFunctionExpression(arg)) {
getFromProp(arg.params[0]);
} else if ((nodeInit.callee as babel.types.Identifier)?.name?.match(/create[A-Z].*/)) {
- // Any components that are created by a factory function, eg. System Box | Container | Grid.
+ // Any components that are created by a factory function, e.g. System Box | Container | Grid.
getFromProp(node);
}
}
@@ -406,7 +412,7 @@ function plugin(
}
const nodeName = node.id.name;
- const props = propTypes.body.find((prop) => prop.name === nodeName);
+ const props = components.find((component) => component.name === nodeName);
if (!props) {
return;
}
@@ -428,20 +434,24 @@ function plugin(
/**
* Injects the PropTypes from `parse` into the provided JavaScript code
- * @param propTypes Result from `parse` to inject into the JavaScript code
+ * @param components Result from `generateFilePropTypes` to inject into the JavaScript code
* @param target The JavaScript code to add the PropTypes to
* @param options Options controlling the final result
*/
-export function inject(
- propTypes: t.Program,
- target: string,
- options: InjectOptions = {},
-): string | null {
- if (propTypes.body.length === 0) {
+export function injectPropTypesInFile({
+ components,
+ target,
+ options = {},
+}: {
+ components: PropTypesComponent[];
+ target: string;
+ options?: InjectPropTypesInFileOptions;
+}): string | null {
+ if (components.length === 0) {
return target;
}
- const propTypesToInject = new Map();
+ const mapOfPropTypes = new Map();
const { plugins: babelPlugins = [], ...babelOptions } = options.babelOptions || {};
const result = babel.transformSync(target, {
@@ -449,7 +459,7 @@ export function inject(
require.resolve('@babel/plugin-syntax-class-properties'),
require.resolve('@babel/plugin-syntax-jsx'),
[require.resolve('@babel/plugin-syntax-typescript'), { isTSX: true }],
- plugin(propTypes, options, propTypesToInject),
+ createBabelPlugin({ components, options, mapOfPropTypes }),
...(babelPlugins || []),
],
configFile: false,
@@ -458,14 +468,14 @@ export function inject(
...babelOptions,
});
- let code = result && result.code;
+ let code = result?.code;
if (!code) {
return null;
}
// Replace the placeholders with the generated prop-types
// Workaround for issues with comments getting removed and malformed
- propTypesToInject.forEach((value, key) => {
+ mapOfPropTypes.forEach((value, key) => {
code = code!.replace(key, `\n\n${value}\n\n`);
});
diff --git a/packages/typescript-to-proptypes/src/loadConfig.ts b/packages/typescript-to-proptypes/src/loadConfig.ts
deleted file mode 100644
index c034028519ac9e..00000000000000
--- a/packages/typescript-to-proptypes/src/loadConfig.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import * as ts from 'typescript';
-
-/**
- * Loads and parses a `tsconfig` file and returns a `ts.CompilerOptions` object
- * @param tsConfigPath The location for a `tsconfig.json` file
- */
-export default function loadConfig(tsConfigPath: string) {
- const { config, error } = ts.readConfigFile(tsConfigPath, (filePath) =>
- fs.readFileSync(filePath).toString(),
- );
-
- if (error) {
- throw error;
- }
-
- const { options, errors } = ts.parseJsonConfigFileContent(
- config,
- ts.sys,
- path.dirname(tsConfigPath),
- );
-
- if (errors.length > 0) {
- throw errors[0];
- }
-
- return options;
-}
diff --git a/packages/typescript-to-proptypes/src/models.ts b/packages/typescript-to-proptypes/src/models.ts
new file mode 100644
index 00000000000000..626461883336f1
--- /dev/null
+++ b/packages/typescript-to-proptypes/src/models.ts
@@ -0,0 +1,100 @@
+export interface PropTypeDefinition {
+ name: string;
+ jsDoc: string | undefined;
+ propType: PropType;
+ filenames: Set;
+ /**
+ * @internal
+ */
+ $$id: number;
+}
+
+export interface PropTypesComponent {
+ name: string;
+ propsFilename?: string;
+ types: PropTypeDefinition[];
+}
+
+export type PropType =
+ | AnyType
+ | ArrayType
+ | BooleanType
+ | DOMElementType
+ | ElementType
+ | FunctionType
+ | InstanceOfType
+ | InterfaceType
+ | LiteralType
+ | NumericType
+ | ObjectType
+ | StringType
+ | UndefinedType
+ | UnionType;
+
+export interface BasePropType {
+ jsDoc: string | undefined;
+ type: string;
+}
+
+export interface UndefinedType extends BasePropType {
+ type: 'UndefinedNode';
+}
+
+export interface AnyType extends BasePropType {
+ type: 'any';
+}
+
+export interface ArrayType extends BasePropType {
+ arrayType: PropType;
+ type: 'array';
+}
+
+export interface BooleanType extends BasePropType {
+ type: 'boolean';
+}
+
+export interface DOMElementType extends BasePropType {
+ optional?: boolean;
+ type: 'DOMElementNode';
+}
+
+export interface ElementType extends BasePropType {
+ elementType: 'element' | 'node' | 'elementType';
+ type: 'ElementNode';
+}
+
+export interface FunctionType extends BasePropType {
+ type: 'FunctionNode';
+}
+
+export interface InstanceOfType extends BasePropType {
+ instance: string;
+ type: 'InstanceOfNode';
+}
+
+export interface InterfaceType extends BasePropType {
+ type: 'InterfaceNode';
+ types: ReadonlyArray<[string, PropType]>;
+}
+
+export interface LiteralType extends BasePropType {
+ value: unknown;
+ type: 'LiteralNode';
+}
+
+export interface NumericType extends BasePropType {
+ type: 'NumericNode';
+}
+
+export interface ObjectType extends BasePropType {
+ type: 'ObjectNode';
+}
+
+export interface StringType extends BasePropType {
+ type: 'StringNode';
+}
+
+export interface UnionType extends BasePropType {
+ type: 'UnionNode';
+ types: readonly PropType[];
+}
diff --git a/packages/typescript-to-proptypes/src/parser.ts b/packages/typescript-to-proptypes/src/parser.ts
deleted file mode 100644
index 072adbc3434175..00000000000000
--- a/packages/typescript-to-proptypes/src/parser.ts
+++ /dev/null
@@ -1,755 +0,0 @@
-import * as doctrine from 'doctrine';
-import ts from 'typescript';
-import * as t from './types';
-
-/**
- * Options that specify how the parser should act
- */
-export interface ParserOptions {
- /**
- * Called before a PropType is added to a component/object
- * @returns true to include the PropType, false to skip it, or undefined to
- * use the default behavior
- * @default name !== 'ref'
- */
- shouldInclude: (data: { name: string; depth: number }) => boolean | undefined;
- /**
- * Called before the shape of an object is resolved
- * @returns true to resolve the shape of the object, false to just use a object, or undefined to
- * use the default behavior
- * @default propertyCount <= 50 && depth <= 3
- */
- shouldResolveObject: (data: {
- name: string;
- propertyCount: number;
- depth: number;
- }) => boolean | undefined;
- /**
- * Control if const declarations should be checked
- * @default false
- * @example declare const Component: React.JSXElementConstructor;
- */
- checkDeclarations?: boolean;
-}
-
-/**
- * A wrapper for `ts.createProgram`
- * @param files The files to later be parsed with `parseFromProgram`
- * @param options The options to pass to the compiler
- */
-export function createTSProgram(files: readonly string[], options: ts.CompilerOptions) {
- return ts.createProgram(files, options);
-}
-
-/**
- * Parses the specified file and returns the PropTypes as an AST
- * @param filePath The file to get the PropTypes from
- * @param program The program object returned by `createProgram`
- * @param parserOptions Options that specify how the parser should act
- */
-export function parseFromProgram(
- filePath: string,
- program: ts.Program,
- parserOptions: Partial = {},
-) {
- const { checkDeclarations = false } = parserOptions;
-
- const sigilIds: Map = new Map();
- /**
- *
- * @param sigil - Prefer ts.Type if available since these are re-used in the type checker. Symbols (especially those for literals) are oftentimes re-created on every usage.
- */
- function createPropTypeId(sigil: ts.Symbol | ts.Type) {
- if (!sigilIds.has(sigil)) {
- sigilIds.set(sigil, sigilIds.size);
- }
-
- return sigilIds.get(sigil)!;
- }
-
- const shouldInclude: ParserOptions['shouldInclude'] = (data) => {
- // ref is a reserved prop name in React
- // e.g. https://github.com/reactjs/rfcs/pull/107
- // no need to add a prop-type
- if (data.name === 'ref') {
- return false;
- }
-
- if (parserOptions.shouldInclude) {
- const result = parserOptions.shouldInclude(data);
- if (result !== undefined) {
- return result;
- }
- }
-
- return true;
- };
-
- const shouldResolveObject: ParserOptions['shouldResolveObject'] = (data) => {
- if (parserOptions.shouldResolveObject) {
- const result = parserOptions.shouldResolveObject(data);
- if (result !== undefined) {
- return result;
- }
- }
-
- return data.propertyCount <= 50 && data.depth <= 3;
- };
-
- const checker = program.getTypeChecker();
- const sourceFile = program.getSourceFile(filePath);
- const reactComponentName = filePath.match(/.*\/([^/]+)/)?.[1];
-
- const programNode = t.createProgram();
- const reactImports: string[] = [];
-
- function visitImports(node: ts.Node) {
- if (
- ts.isImportDeclaration(node) &&
- ts.isStringLiteral(node.moduleSpecifier) &&
- node.moduleSpecifier.text === 'react' &&
- node.importClause
- ) {
- const imports = ['Component', 'PureComponent', 'memo', 'forwardRef'];
-
- // import x from 'react'
- if (node.importClause.name) {
- const nameText = node.importClause.name.text;
- reactImports.push(...imports.map((x) => `${nameText}.${x}`));
- }
-
- // import {x, y as z} from 'react'
- const bindings = node.importClause.namedBindings;
- if (bindings) {
- if (ts.isNamedImports(bindings)) {
- bindings.elements.forEach((spec) => {
- const nameIdentifier = spec.propertyName || spec.name;
- const nameText = nameIdentifier.getText();
- if (imports.includes(nameText)) {
- reactImports.push(spec.name.getText());
- }
- });
- }
- // import * as x from 'react'
- else {
- const nameText = bindings.name.text;
- reactImports.push(...imports.map((x) => `${nameText}.${x}`));
- }
- }
- }
- }
-
- function isTypeJSXElementLike(type: ts.Type): boolean {
- if (type.isUnion()) {
- return type.types.every(
- (subType) => subType.flags & ts.TypeFlags.Null || isTypeJSXElementLike(subType),
- );
- }
- if (type.symbol) {
- const name = checker.getFullyQualifiedName(type.symbol);
- return (
- // Remove once global JSX namespace is no longer used by React
- name === 'global.JSX.Element' ||
- name === 'React.JSX.Element' ||
- name === 'React.ReactElement'
- );
- }
-
- return false;
- }
-
- function getDocumentation(symbol: ts.Symbol | undefined): string | undefined {
- if (symbol === undefined) {
- return undefined;
- }
-
- const decl = symbol.getDeclarations();
- if (decl) {
- // @ts-ignore
- const comments = ts.getJSDocCommentsAndTags(decl[0]) as readonly any[];
- if (comments && comments.length === 1) {
- const commentNode = comments[0];
- if (ts.isJSDoc(commentNode)) {
- return doctrine.unwrapComment(commentNode.getText()).trim();
- }
- }
- }
-
- const comment = ts.displayPartsToString(symbol.getDocumentationComment(checker));
- return comment !== '' ? comment : undefined;
- }
-
- function checkType(
- type: ts.Type,
- location: ts.Node,
- typeStack: readonly number[],
- name: string,
- ): t.PropType {
- // If the typeStack contains type.id we're dealing with an object that references itself.
- // To prevent getting stuck in an infinite loop we just set it to an createObjectType
- if (typeStack.includes((type as any).id)) {
- return t.createObjectType({ jsDoc: undefined });
- }
-
- {
- const typeNode = type as any;
-
- const symbol = typeNode.aliasSymbol ? typeNode.aliasSymbol : typeNode.symbol;
- const typeName = symbol ? checker.getFullyQualifiedName(symbol) : null;
- switch (typeName) {
- // Remove once global JSX namespace is no longer used by React
- case 'global.JSX.Element':
- case 'React.JSX.Element':
- case 'React.ReactElement': {
- return t.createElementType({ jsDoc: getDocumentation(symbol), elementType: 'element' });
- }
- case 'React.ElementType': {
- return t.createElementType({
- jsDoc: getDocumentation(symbol),
- elementType: 'elementType',
- });
- }
- case 'React.ReactNode': {
- return t.createUnionType({
- jsDoc: getDocumentation(symbol),
- types: [
- t.createElementType({ elementType: 'node', jsDoc: undefined }),
- t.createUndefinedType({ jsDoc: undefined }),
- ],
- });
- }
- case 'React.Component': {
- return t.createInstanceOfType({ jsDoc: getDocumentation(symbol), instance: typeName });
- }
- case 'Element':
- case 'HTMLElement': {
- return t.createDOMElementType({ jsDoc: getDocumentation(symbol), optional: undefined });
- }
- case 'RegExp': {
- return t.createInstanceOfType({ jsDoc: getDocumentation(symbol), instance: 'RegExp' });
- }
- case 'Date': {
- return t.createInstanceOfType({ jsDoc: getDocumentation(symbol), instance: 'Date' });
- }
- default:
- // continue with function execution
- break;
- }
- }
-
- if (checker.isArrayType(type)) {
- // @ts-ignore
- const arrayType: ts.Type = checker.getElementTypeOfArrayType(type);
- return t.createArrayType({
- arrayType: checkType(arrayType, location, typeStack, name),
- jsDoc: getDocumentation(type.symbol),
- });
- }
-
- const isTupleType = checker.isTupleType(type);
- if (isTupleType) {
- return t.createArrayType({
- arrayType: t.createUnionType({
- jsDoc: undefined,
- types: (type as any).typeArguments.map((x: ts.Type) =>
- checkType(x, location, typeStack, name),
- ),
- }),
- jsDoc: getDocumentation(type.symbol),
- });
- }
-
- if (type.isUnion()) {
- const node = t.createUnionType({
- jsDoc: getDocumentation(type.symbol),
- types: type.types.map((x) => checkType(x, location, typeStack, name)),
- });
-
- return node.types.length === 1 ? node.types[0] : node;
- }
-
- if (type.flags & ts.TypeFlags.TypeParameter) {
- const baseConstraintOfType = checker.getBaseConstraintOfType(type);
-
- if (baseConstraintOfType) {
- if (
- baseConstraintOfType.flags & ts.TypeFlags.Object &&
- baseConstraintOfType.symbol.members?.size === 0
- ) {
- return t.createAnyType({ jsDoc: getDocumentation(type.symbol) });
- }
-
- return checkType(baseConstraintOfType!, location, typeStack, name);
- }
- }
-
- if (type.flags & ts.TypeFlags.String) {
- return t.createStringType({ jsDoc: getDocumentation(type.symbol) });
- }
-
- if (type.flags & ts.TypeFlags.Number) {
- return t.createNumericType({ jsDoc: getDocumentation(type.symbol) });
- }
-
- if (type.flags & ts.TypeFlags.Undefined) {
- return t.createUndefinedType({ jsDoc: getDocumentation(type.symbol) });
- }
-
- if (type.flags & ts.TypeFlags.Any || type.flags & ts.TypeFlags.Unknown) {
- return t.createAnyType({ jsDoc: getDocumentation(type.symbol) });
- }
-
- if (type.flags & ts.TypeFlags.Literal) {
- if (type.isLiteral()) {
- return t.createLiteralType({
- value: type.isStringLiteral() ? `"${type.value}"` : type.value,
- jsDoc: getDocumentation(type.symbol),
- });
- }
- return t.createLiteralType({
- jsDoc: getDocumentation(type.symbol),
- value: checker.typeToString(type),
- });
- }
-
- if (type.flags & ts.TypeFlags.Null) {
- return t.createLiteralType({ jsDoc: getDocumentation(type.symbol), value: 'null' });
- }
-
- if (type.getCallSignatures().length) {
- return t.createFunctionType({ jsDoc: getDocumentation(type.symbol) });
- }
-
- // () => new ClassInstance
- if (type.getConstructSignatures().length) {
- return t.createFunctionType({ jsDoc: getDocumentation(type.symbol) });
- }
-
- // Object-like type
- {
- const jsDoc = getDocumentation(type.symbol);
- const properties = type.getProperties();
- if (properties.length) {
- if (
- shouldResolveObject({ name, propertyCount: properties.length, depth: typeStack.length })
- ) {
- const filtered = properties.filter((symbol) =>
- shouldInclude({ name: symbol.getName(), depth: typeStack.length + 1 }),
- );
- if (filtered.length > 0) {
- return t.createInterfaceType({
- jsDoc,
- types: filtered.map((x) => {
- // eslint-disable-next-line @typescript-eslint/no-use-before-define -- TODO dependency cycle between checkSymbol and checkType
- const definition = checkSymbol(x, location, [...typeStack, (type as any).id]);
- definition.propType.jsDoc = definition.jsDoc;
-
- return [definition.name, definition.propType];
- }),
- });
- }
- }
-
- return t.createObjectType({ jsDoc });
- }
- }
-
- // Object without properties or object keyword
- if (
- type.flags & ts.TypeFlags.Object ||
- (type.flags & ts.TypeFlags.NonPrimitive && checker.typeToString(type) === 'object')
- ) {
- return t.createObjectType({ jsDoc: getDocumentation(type.symbol) });
- }
-
- console.warn(
- `${reactComponentName}: Unable to handle node of type "ts.TypeFlags.${
- ts.TypeFlags[type.flags]
- }", using any`,
- );
- return t.createAnyType({ jsDoc: getDocumentation(type.symbol) });
- }
-
- function getSymbolFileNames(symbol: ts.Symbol): Set {
- const declarations = symbol.getDeclarations() || [];
-
- return new Set(declarations.map((declaration) => declaration.getSourceFile().fileName));
- }
-
- function checkSymbol(
- symbol: ts.Symbol,
- location: ts.Node,
- typeStack: readonly number[],
- ): t.PropTypeDefinition {
- const declarations = symbol.getDeclarations();
- const declaration = declarations && declarations[0];
-
- const symbolFilenames = getSymbolFileNames(symbol);
-
- // TypeChecker keeps the name for
- // { a: React.ElementType, b: React.ReactElement | boolean }
- // but not
- // { a?: React.ElementType, b: React.ReactElement }
- // get around this by not using the TypeChecker
- if (
- declaration &&
- ts.isPropertySignature(declaration) &&
- declaration.type &&
- ts.isTypeReferenceNode(declaration.type)
- ) {
- const name = declaration.type.typeName.getText();
- if (
- name === 'React.ElementType' ||
- name === 'React.JSXElementConstructor' ||
- name === 'React.ReactElement'
- ) {
- const elementNode = t.createElementType({
- elementType: name === 'React.ReactElement' ? 'element' : 'elementType',
- jsDoc: getDocumentation(symbol),
- });
-
- return t.createPropTypeDefinition(
- symbol.getName(),
- getDocumentation(symbol),
- declaration.questionToken
- ? t.createUnionType({
- jsDoc: elementNode.jsDoc,
- types: [
- t.createUndefinedType({ jsDoc: undefined }),
- {
- ...elementNode,
- // jsDoc was hoisted to the union type
- jsDoc: undefined,
- },
- ],
- })
- : elementNode,
- symbolFilenames,
- createPropTypeId(symbol),
- );
- }
- }
-
- const symbolType = declaration
- ? // The proptypes aren't detailed enough that we need all the different combinations
- // so we just pick the first and ignore the rest
- checker.getTypeOfSymbolAtLocation(symbol, declaration)
- : checker.getTypeOfSymbolAtLocation(symbol, location);
-
- let type: ts.Type;
- if (declaration === undefined) {
- type = symbolType;
- } else {
- const declaredType = checker.getTypeAtLocation(declaration);
- const baseConstraintOfType = checker.getBaseConstraintOfType(declaredType);
-
- if (baseConstraintOfType === undefined || baseConstraintOfType === declaredType) {
- type = symbolType;
- }
- // get `React.ElementType` from `C extends React.ElementType`
- else if (baseConstraintOfType.aliasSymbol?.escapedName === 'ElementType') {
- type = baseConstraintOfType;
- } else {
- type = symbolType;
- }
- }
-
- if (!type) {
- throw new Error('No types found');
- }
-
- // Typechecker only gives the type "any" if it's present in a union
- // This means the type of "a" in {a?:any} isn't "any | undefined"
- // So instead we check for the questionmark to detect optional types
- let parsedType: t.PropType | undefined;
- if (
- (type.flags & ts.TypeFlags.Any || type.flags & ts.TypeFlags.Unknown) &&
- declaration &&
- ts.isPropertySignature(declaration)
- ) {
- parsedType =
- symbol.flags & ts.SymbolFlags.Optional
- ? t.createUnionType({
- jsDoc: getDocumentation(symbol),
- types: [
- t.createUndefinedType({ jsDoc: undefined }),
- t.createAnyType({ jsDoc: undefined }),
- ],
- })
- : t.createAnyType({ jsDoc: getDocumentation(symbol) });
- } else {
- parsedType = checkType(type, location, typeStack, symbol.getName());
- }
-
- return t.createPropTypeDefinition(
- symbol.getName(),
- getDocumentation(symbol),
- parsedType,
- symbolFilenames,
- createPropTypeId(type),
- );
- }
-
- function parsePropsSymbol(
- name: string,
- symbol: ts.Symbol | undefined,
- location: ts.Node,
- propsSourceFile: ts.SourceFile | undefined,
- ) {
- const type =
- symbol === undefined
- ? checker.getTypeAtLocation(location)
- : checker.getTypeOfSymbolAtLocation(symbol, location);
- const properties = type
- .getProperties()
- .filter((property) => shouldInclude({ name: property.getName(), depth: 1 }));
- if (properties.length === 0) {
- return;
- }
-
- const propsFilename = propsSourceFile !== undefined ? propsSourceFile.fileName : undefined;
-
- programNode.body.push(
- t.createComponent(
- name,
- properties.map((property) => checkSymbol(property, location, [(type as any).id])),
- propsFilename,
- ),
- );
- }
-
- function parseFunctionComponent(node: ts.VariableDeclaration | ts.FunctionDeclaration) {
- if (!node.name) {
- return;
- }
-
- const symbol = checker.getSymbolAtLocation(node.name);
- if (!symbol) {
- return;
- }
- const componentName = node.name.getText();
-
- // Discriminate render functions to components
- if (componentName[0].toUpperCase() !== componentName[0]) {
- return;
- }
-
- const type = checker.getTypeOfSymbolAtLocation(symbol, symbol.valueDeclaration!);
- type.getCallSignatures().forEach((signature) => {
- if (!isTypeJSXElementLike(signature.getReturnType())) {
- return;
- }
-
- parsePropsSymbol(
- componentName,
- signature.parameters[0],
- signature.parameters[0].valueDeclaration!,
- node.getSourceFile(),
- );
- });
-
- // squash props
- // { variant: 'a', href: string } & { variant: 'b' }
- // to
- // { variant: 'a' | 'b', href?: string }
- const props: Record = {};
- const usedPropsPerSignature: Set[] = [];
- programNode.body = programNode.body.filter((componentNode) => {
- if (componentNode.name === componentName) {
- const usedProps: Set = new Set();
- // squash props
- componentNode.types.forEach((typeNode) => {
- usedProps.add(typeNode.name);
-
- let { [typeNode.name]: currentTypeNode } = props;
- if (currentTypeNode === undefined) {
- currentTypeNode = typeNode;
- } else if (currentTypeNode.$$id !== typeNode.$$id) {
- currentTypeNode = t.createPropTypeDefinition(
- currentTypeNode.name,
- currentTypeNode.jsDoc,
- t.createUnionType({
- // TODO: jsDoc from squashing is dropped
- jsDoc: undefined,
- types: [currentTypeNode.propType, typeNode.propType],
- }),
- new Set(Array.from(currentTypeNode.filenames).concat(Array.from(typeNode.filenames))),
- undefined,
- );
- }
-
- props[typeNode.name] = currentTypeNode;
- });
-
- usedPropsPerSignature.push(usedProps);
-
- // delete each signature, we'll add it later unionized
- return false;
- }
- return true;
- });
-
- programNode.body.push(
- t.createComponent(
- componentName,
- Object.entries(props).map(([name, propType]) => {
- const onlyUsedInSomeSignatures = usedPropsPerSignature.some(
- (usedProps) => !usedProps.has(name),
- );
- if (onlyUsedInSomeSignatures) {
- // mark as optional
- return {
- ...propType,
- propType: t.createUnionType({
- // TODO: jsDoc from signatures is dropped
- jsDoc: undefined,
- types: [propType.propType, t.createUndefinedType({ jsDoc: undefined })],
- }),
- };
- }
- return propType;
- }),
- node.getSourceFile().fileName,
- ),
- );
- }
-
- function visit(node: ts.Node) {
- // function x(props: type) { return
}
- if (
- ts.isFunctionDeclaration(node) &&
- node.name &&
- node.parameters.length === 1 &&
- checker
- .getTypeAtLocation(node.name)
- .getCallSignatures()
- .some((signature) => isTypeJSXElementLike(signature.getReturnType()))
- ) {
- parseFunctionComponent(node);
- }
- // const x = ...
- else if (ts.isVariableStatement(node)) {
- ts.forEachChild(node.declarationList, (variableNode) => {
- // x = (props: type) => { return
}
- // x = function(props: type) { return
}
- // x = function y(props: type) { return
}
- // x = react.memo((props:type) { return
})
-
- if (ts.isVariableDeclaration(variableNode) && variableNode.name) {
- const type = checker.getTypeAtLocation(variableNode.name);
- if (!variableNode.initializer) {
- if (
- checkDeclarations &&
- type.aliasSymbol &&
- type.aliasTypeArguments &&
- checker.getFullyQualifiedName(type.aliasSymbol) === 'React.JSXElementConstructor'
- ) {
- const propsSymbol = type.aliasTypeArguments[0].getSymbol();
- if (propsSymbol === undefined) {
- throw new TypeError(
- 'Unable to find symbol for `props`. This is a bug in typescript-to-proptypes.',
- );
- }
- parsePropsSymbol(
- variableNode.name.getText(),
- propsSymbol,
- variableNode.name,
- node.getSourceFile(),
- );
- } else if (checkDeclarations) {
- parseFunctionComponent(variableNode);
- }
- } else if (
- (ts.isArrowFunction(variableNode.initializer) ||
- ts.isFunctionExpression(variableNode.initializer)) &&
- variableNode.initializer.parameters.length === 1
- ) {
- parseFunctionComponent(variableNode);
- }
- // x = react.memo((props:type) { return
})
- else if (
- ts.isCallExpression(variableNode.initializer) &&
- variableNode.initializer.arguments.length > 0
- ) {
- const callString = variableNode.initializer.expression.getText();
- const arg = variableNode.initializer.arguments[0];
- if (
- reactImports.includes(callString) &&
- (ts.isArrowFunction(arg) || ts.isFunctionExpression(arg)) &&
- arg.parameters.length > 0
- ) {
- const symbol = checker.getSymbolAtLocation(arg.parameters[0].name);
- if (symbol) {
- parsePropsSymbol(
- variableNode.name.getText(),
- symbol,
- symbol.valueDeclaration!,
- node.getSourceFile(),
- );
- }
- }
- }
- // handle component factories: x = createComponent()
- if (checkDeclarations && variableNode.initializer) {
- if (
- type
- .getCallSignatures()
- .some((signature) => isTypeJSXElementLike(signature.getReturnType()))
- ) {
- parseFunctionComponent(variableNode);
- }
- }
- }
- });
- } else if (
- ts.isClassDeclaration(node) &&
- node.name &&
- node.heritageClauses &&
- node.heritageClauses.length === 1
- ) {
- const heritage = node.heritageClauses[0];
- if (heritage.types.length !== 1) {
- return;
- }
-
- const arg = heritage.types[0];
- if (!arg.typeArguments) {
- return;
- }
-
- if (reactImports.includes(arg.expression.getText())) {
- parsePropsSymbol(
- node.name.getText(),
- undefined,
- arg.typeArguments[0],
- node.getSourceFile(),
- );
- }
- }
- }
-
- if (sourceFile) {
- ts.forEachChild(sourceFile, visitImports);
- ts.forEachChild(sourceFile, visit);
- } else {
- throw new Error(`Program doesn't contain file "${filePath}"`);
- }
-
- return programNode;
-}
-
-/**
- * Creates a program, parses the specified file and returns the PropTypes as an AST, if you need to parse more than one file
- * use `createProgram` and `parseFromProgram` for better performance
- * @param filePath The file to parse
- * @param options The options from `loadConfig`
- * @param parserOptions Options that specify how the parser should act
- */
-export function parseFile(
- filePath: string,
- options: ts.CompilerOptions,
- parserOptions: Partial = {},
-) {
- const program = ts.createProgram([filePath], options);
- return parseFromProgram(filePath, program, parserOptions);
-}
diff --git a/packages/typescript-to-proptypes/src/types/component.ts b/packages/typescript-to-proptypes/src/types/component.ts
deleted file mode 100644
index 72040a8959cd98..00000000000000
--- a/packages/typescript-to-proptypes/src/types/component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { PropTypeDefinition } from './propTypeDefinition';
-
-export interface Component {
- name: string;
- propsFilename?: string;
- types: PropTypeDefinition[];
-}
-
-export function createComponent(
- name: string,
- types: PropTypeDefinition[],
- propsFilename: string | undefined,
-): Component {
- return {
- name,
- types,
- propsFilename,
- };
-}
diff --git a/packages/typescript-to-proptypes/src/types/index.ts b/packages/typescript-to-proptypes/src/types/index.ts
deleted file mode 100644
index 13cff5f8dd61aa..00000000000000
--- a/packages/typescript-to-proptypes/src/types/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './propTypeDefinition';
-export * from './program';
-export * from './component';
-
-export * from './props';
diff --git a/packages/typescript-to-proptypes/src/types/program.ts b/packages/typescript-to-proptypes/src/types/program.ts
deleted file mode 100644
index b9dedded2393e0..00000000000000
--- a/packages/typescript-to-proptypes/src/types/program.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from './component';
-
-export interface Program {
- body: Component[];
-}
-
-export function createProgram(body: Component[] = []): Program {
- return {
- body,
- };
-}
diff --git a/packages/typescript-to-proptypes/src/types/propTypeDefinition.ts b/packages/typescript-to-proptypes/src/types/propTypeDefinition.ts
deleted file mode 100644
index 15c5932b2bca38..00000000000000
--- a/packages/typescript-to-proptypes/src/types/propTypeDefinition.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { PropType } from './props';
-
-export interface PropTypeDefinition {
- name: string;
- jsDoc: string | undefined;
- propType: PropType;
- filenames: Set;
- /**
- * @internal
- */
- $$id: number | undefined;
-}
-
-export function createPropTypeDefinition(
- name: string,
- jsDoc: string | undefined,
- propType: PropType,
- filenames: Set,
- id: number | undefined,
-): PropTypeDefinition {
- return {
- name,
- jsDoc,
- propType,
- filenames,
- $$id: id,
- };
-}
diff --git a/packages/typescript-to-proptypes/test/types.d.ts b/packages/typescript-to-proptypes/test/types.d.ts
index 16200bbc2e8177..27694d0f5754bc 100644
--- a/packages/typescript-to-proptypes/test/types.d.ts
+++ b/packages/typescript-to-proptypes/test/types.d.ts
@@ -1,7 +1,11 @@
-import { ParserOptions, GenerateOptions, InjectOptions } from '../src';
+import {
+ InjectPropTypesInFileOptions,
+ GetPropTypesFromFileOptions,
+ GeneratePropTypesOptions,
+} from '../src';
export type TestOptions = {
- parser?: Partial;
- generator?: Partial;
- injector?: Partial;
+ parser?: GetPropTypesFromFileOptions;
+ generator?: GeneratePropTypesOptions;
+ injector?: InjectPropTypesInFileOptions;
};
diff --git a/packages/typescript-to-proptypes/test/typescript-to-proptypes.test.ts b/packages/typescript-to-proptypes/test/typescript-to-proptypes.test.ts
index c077086b6ab127..9a47db1af5d892 100644
--- a/packages/typescript-to-proptypes/test/typescript-to-proptypes.test.ts
+++ b/packages/typescript-to-proptypes/test/typescript-to-proptypes.test.ts
@@ -1,9 +1,16 @@
import path from 'path';
import fs from 'fs';
+import * as ts from 'typescript';
import { expect } from 'chai';
import glob from 'fast-glob';
import prettier from 'prettier';
-import * as ttp from '../src';
+import {
+ TypeScriptProject,
+ createTypeScriptProjectBuilder,
+} from '@mui-internal/api-docs-builder/utils/createTypeScriptProject';
+import { generatePropTypes } from '../src/generatePropTypes';
+import { injectPropTypesInFile } from '../src/injectPropTypesInFile';
+import { getPropTypesFromFile } from '../src/getPropTypesFromFile';
import { TestOptions } from './types';
const testCases = glob
@@ -23,26 +30,38 @@ const testCases = glob
});
describe('typescript-to-proptypes', () => {
- let cachedProgram: ttp.ts.Program;
- function getProgram() {
- return cachedProgram;
+ let cachedProject: TypeScriptProject;
+ function getProject() {
+ return cachedProject;
}
before(function beforeHook() {
// Creating a TS program might take a while.
this.timeout(20000);
+
+ const buildProject = createTypeScriptProjectBuilder({
+ test: {
+ rootPath: path.join(__dirname, '..'),
+ tsConfigPath: 'tsconfig.json',
+ },
+ });
+
+ cachedProject = buildProject('test', {
+ files: testCases.map((testCase) => testCase.inputPath),
+ });
+
// Create program for all files to speed up tests
- cachedProgram = ttp.createTSProgram(
- testCases.map((testCase) => testCase.inputPath),
- ttp.loadConfig(path.resolve(__dirname, '../tsconfig.json')),
- );
+ // cachedProject = ttp.createTSProgram(
+ // testCases.map((testCase) => testCase.inputPath),
+ // ttp.loadConfig(path.resolve(__dirname, '../tsconfig.json')),
+ // );
});
testCases.forEach((testCase) => {
const { name: testName, inputPath, inputJS, outputPath } = testCase;
it(testName, async () => {
- const program = getProgram();
+ const project = getProject();
let options: TestOptions = {};
try {
const optionsModule = await import(`./${testName}/options`);
@@ -51,7 +70,7 @@ describe('typescript-to-proptypes', () => {
// Assume "Cannot find module" which means "no options".
}
- const ast = ttp.parseFromProgram(inputPath, program, options.parser);
+ const components = getPropTypesFromFile({ filePath: inputPath, project, ...options.parser });
let inputSource = null;
if (inputPath.endsWith('.d.ts')) {
@@ -61,10 +80,10 @@ describe('typescript-to-proptypes', () => {
// ignore
}
} else {
- inputSource = ttp.ts.transpileModule(fs.readFileSync(inputPath, 'utf8'), {
+ inputSource = ts.transpileModule(fs.readFileSync(inputPath, 'utf8'), {
compilerOptions: {
- target: ttp.ts.ScriptTarget.ESNext,
- jsx: ttp.ts.JsxEmit.Preserve,
+ target: ts.ScriptTarget.ESNext,
+ jsx: ts.JsxEmit.Preserve,
},
}).outputText;
}
@@ -72,14 +91,18 @@ describe('typescript-to-proptypes', () => {
let result = '';
// For d.ts files we just generate the AST
if (!inputSource) {
- result = ast.body
+ result = components
.map((component) => {
- return ttp.generate(component, options.generator);
+ return generatePropTypes(component, options.generator);
})
.join('\n');
} else {
// For .tsx? files we transpile them and inject the proptypes
- const injected = ttp.inject(ast, inputSource, options.injector);
+ const injected = injectPropTypesInFile({
+ components,
+ target: inputSource,
+ options: options.injector,
+ });
if (!injected) {
throw new Error('Injection failed');
}
diff --git a/packages/zero-tag-processor/src/utils/sxObjectExtractor.ts b/packages/zero-tag-processor/src/utils/sxObjectExtractor.ts
index cb41022a13abda..48b7f1020897f8 100644
--- a/packages/zero-tag-processor/src/utils/sxObjectExtractor.ts
+++ b/packages/zero-tag-processor/src/utils/sxObjectExtractor.ts
@@ -128,7 +128,7 @@ export function sxObjectExtractor(nodePath: NodePath ({color: 'red'}). You can accept theme object in the params if required.",
+ "sx prop only supports arrow functions that directly return an object, e.g. () => ({color: 'red'}). You can accept theme object in the params if required.",
);
}
traverseObjectExpression(body, nodePath);
diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts
index 003be07d9d3be9..01c129d94cbe8d 100644
--- a/scripts/generateProptypes.ts
+++ b/scripts/generateProptypes.ts
@@ -5,12 +5,25 @@ import * as prettier from 'prettier';
import glob from 'fast-glob';
import * as _ from 'lodash';
import * as yargs from 'yargs';
-import * as ttp from 'typescript-to-proptypes';
+import * as ts from 'typescript';
import {
fixBabelGeneratorIssues,
fixLineEndings,
getUnstyledFilename,
} from '@mui-internal/docs-utilities';
+import {
+ getPropTypesFromFile,
+ injectPropTypesInFile,
+ InjectPropTypesInFileOptions,
+} from 'typescript-to-proptypes';
+import {
+ createTypeScriptProjectBuilder,
+ TypeScriptProject,
+} from '@mui-internal/api-docs-builder/utils/createTypeScriptProject';
+import {
+ CORE_TYPESCRIPT_PROJECTS,
+ CoreTypeScriptProjects,
+} from '@mui-internal/api-docs-builder/utils/coreTypeScriptProjects';
const useExternalPropsFromInputBase = [
'autoComplete',
@@ -120,20 +133,23 @@ const ignoreExternalDocumentation: Record = {
Zoom: transitionCallbacks,
};
-function sortBreakpointsLiteralByViewportAscending(a: ttp.LiteralType, b: ttp.LiteralType) {
+function sortBreakpointsLiteralByViewportAscending(a: ts.LiteralType, b: ts.LiteralType) {
// default breakpoints ordered by their size ascending
const breakpointOrder: readonly unknown[] = ['"xs"', '"sm"', '"md"', '"lg"', '"xl"'];
return breakpointOrder.indexOf(a.value) - breakpointOrder.indexOf(b.value);
}
-function sortSizeByScaleAscending(a: ttp.LiteralType, b: ttp.LiteralType) {
+function sortSizeByScaleAscending(a: ts.LiteralType, b: ts.LiteralType) {
const sizeOrder: readonly unknown[] = ['"small"', '"medium"', '"large"'];
return sizeOrder.indexOf(a.value) - sizeOrder.indexOf(b.value);
}
// Custom order of literal unions by component
-const getSortLiteralUnions: ttp.InjectOptions['getSortLiteralUnions'] = (component, propType) => {
+const getSortLiteralUnions: InjectPropTypesInFileOptions['getSortLiteralUnions'] = (
+ component,
+ propType,
+) => {
if (
component.name === 'Hidden' &&
(propType.name === 'initialWidth' || propType.name === 'only')
@@ -148,18 +164,18 @@ const getSortLiteralUnions: ttp.InjectOptions['getSortLiteralUnions'] = (compone
return undefined;
};
-const tsconfig = ttp.loadConfig(path.resolve(__dirname, '../tsconfig.json'));
-
const prettierConfig = prettier.resolveConfig.sync(process.cwd(), {
config: path.join(__dirname, '../prettier.config.js'),
});
async function generateProptypes(
- program: ttp.ts.Program,
+ project: TypeScriptProject,
sourceFile: string,
- tsFile: string = sourceFile,
+ tsFile: string,
): Promise {
- const proptypes = ttp.parseFromProgram(tsFile, program, {
+ const components = getPropTypesFromFile({
+ filePath: tsFile,
+ project,
shouldResolveObject: ({ name }) => {
if (
name.toLowerCase().endsWith('classes') ||
@@ -173,23 +189,23 @@ async function generateProptypes(
checkDeclarations: true,
});
- if (proptypes.body.length === 0) {
+ if (components.length === 0) {
return;
}
- // exclude internal slot components, eg. ButtonRoot
- proptypes.body = proptypes.body.filter((data) => {
- if (data.propsFilename?.endsWith('.tsx')) {
+ // exclude internal slot components, e.g. ButtonRoot
+ const cleanComponents = components.filter((component) => {
+ if (component.propsFilename?.endsWith('.tsx')) {
// only check for .tsx
- const match = data.propsFilename.match(/.*\/([A-Z][a-zA-Z]+)\.tsx/);
+ const match = component.propsFilename.match(/.*\/([A-Z][a-zA-Z]+)\.tsx/);
if (match) {
- return data.name === match[1];
+ return component.name === match[1];
}
}
return true;
});
- proptypes.body.forEach((component) => {
+ cleanComponents.forEach((component) => {
component.types.forEach((prop) => {
if (
!prop.jsDoc ||
@@ -202,9 +218,7 @@ async function generateProptypes(
});
const sourceContent = await fse.readFile(sourceFile, 'utf8');
-
const isTsFile = /(\.(ts|tsx))/.test(sourceFile);
-
// If the component inherits the props from some unstyled components
// we don't want to add those propTypes again in the Material UI/Joy UI propTypes
const unstyledFile = getUnstyledFilename(tsFile, true);
@@ -214,73 +228,77 @@ async function generateProptypes(
const propsFile = tsFile.replace(/(\.d\.ts|\.tsx|\.ts)/g, 'Props.ts');
const propsFileAlternative = tsFile.replace(/(\.d\.ts|\.tsx|\.ts)/g, '.types.ts');
const generatedForTypeScriptFile = sourceFile === tsFile;
- const result = ttp.inject(proptypes, sourceContent, {
- disablePropTypesTypeChecking: generatedForTypeScriptFile,
- babelOptions: {
- filename: sourceFile,
- },
- comment: [
- '----------------------------- Warning --------------------------------',
- '| These PropTypes are generated from the TypeScript type definitions |',
- isTsFile
- ? '| To update them edit TypeScript types and run "yarn proptypes" |'
- : '| To update them edit the d.ts file and run "yarn proptypes" |',
- '----------------------------------------------------------------------',
- ].join('\n'),
- ensureBabelPluginTransformReactRemovePropTypesIntegration: true,
- getSortLiteralUnions,
- reconcilePropTypes: (prop, previous, generated) => {
- const usedCustomValidator = previous !== undefined && !previous.startsWith('PropTypes');
- const ignoreGenerated =
- previous !== undefined &&
- previous.startsWith('PropTypes /* @typescript-to-proptypes-ignore */');
-
- if (
- ignoreGenerated &&
- // `ignoreGenerated` implies that `previous !== undefined`
- previous!
- .replace('PropTypes /* @typescript-to-proptypes-ignore */', 'PropTypes')
- .replace(/\s/g, '') === generated.replace(/\s/g, '')
- ) {
- throw new Error(
- `Unused \`@typescript-to-proptypes-ignore\` directive for prop '${prop.name}'.`,
- );
- }
+ const result = injectPropTypesInFile({
+ components,
+ target: sourceContent,
+ options: {
+ disablePropTypesTypeChecking: generatedForTypeScriptFile,
+ babelOptions: {
+ filename: sourceFile,
+ },
+ comment: [
+ '----------------------------- Warning --------------------------------',
+ '| These PropTypes are generated from the TypeScript type definitions |',
+ isTsFile
+ ? '| To update them edit TypeScript types and run "yarn proptypes" |'
+ : '| To update them edit the d.ts file and run "yarn proptypes" |',
+ '----------------------------------------------------------------------',
+ ].join('\n'),
+ ensureBabelPluginTransformReactRemovePropTypesIntegration: true,
+ getSortLiteralUnions,
+ reconcilePropTypes: (prop, previous, generated) => {
+ const usedCustomValidator = previous !== undefined && !previous.startsWith('PropTypes');
+ const ignoreGenerated =
+ previous !== undefined &&
+ previous.startsWith('PropTypes /* @typescript-to-proptypes-ignore */');
+
+ if (
+ ignoreGenerated &&
+ // `ignoreGenerated` implies that `previous !== undefined`
+ previous!
+ .replace('PropTypes /* @typescript-to-proptypes-ignore */', 'PropTypes')
+ .replace(/\s/g, '') === generated.replace(/\s/g, '')
+ ) {
+ throw new Error(
+ `Unused \`@typescript-to-proptypes-ignore\` directive for prop '${prop.name}'.`,
+ );
+ }
- if (usedCustomValidator || ignoreGenerated) {
- // `usedCustomValidator` and `ignoreGenerated` narrow `previous` to `string`
- return previous!;
- }
+ if (usedCustomValidator || ignoreGenerated) {
+ // `usedCustomValidator` and `ignoreGenerated` narrow `previous` to `string`
+ return previous!;
+ }
- return generated;
- },
- shouldInclude: ({ component, prop }) => {
- if (prop.name === 'children') {
- return true;
- }
- let shouldDocument;
- const { name: componentName } = component;
-
- prop.filenames.forEach((filename) => {
- const isExternal = filename !== tsFile;
- const implementedByUnstyledVariant =
- filename === unstyledFile || filename === unstyledPropsFile;
- const implementedBySelfPropsFile =
- filename === propsFile || filename === propsFileAlternative;
- if (!isExternal || implementedByUnstyledVariant || implementedBySelfPropsFile) {
+ return generated;
+ },
+ shouldInclude: ({ component, prop }) => {
+ if (prop.name === 'children') {
+ return true;
+ }
+ let shouldDocument;
+ const { name: componentName } = component;
+
+ prop.filenames.forEach((filename) => {
+ const isExternal = filename !== tsFile;
+ const implementedByUnstyledVariant =
+ filename === unstyledFile || filename === unstyledPropsFile;
+ const implementedBySelfPropsFile =
+ filename === propsFile || filename === propsFileAlternative;
+ if (!isExternal || implementedByUnstyledVariant || implementedBySelfPropsFile) {
+ shouldDocument = true;
+ }
+ });
+
+ if (
+ useExternalDocumentation[componentName] &&
+ (useExternalDocumentation[componentName] === '*' ||
+ useExternalDocumentation[componentName].includes(prop.name))
+ ) {
shouldDocument = true;
}
- });
- if (
- useExternalDocumentation[componentName] &&
- (useExternalDocumentation[componentName] === '*' ||
- useExternalDocumentation[componentName].includes(prop.name))
- ) {
- shouldDocument = true;
- }
-
- return shouldDocument;
+ return shouldDocument;
+ },
},
});
@@ -306,9 +324,10 @@ async function run(argv: HandlerArgv) {
console.log(`Only considering declaration files matching ${filePattern}`);
}
+ const buildProject = createTypeScriptProjectBuilder(CORE_TYPESCRIPT_PROJECTS);
+
// Matches files where the folder and file both start with uppercase letters
// Example: AppBar/AppBar.d.ts
-
const allFiles = await Promise.all(
[
path.resolve(__dirname, '../packages/mui-system/src'),
@@ -340,17 +359,16 @@ async function run(argv: HandlerArgv) {
return fileName === folderName;
})
- .filter((filePath) => {
- return filePattern.test(filePath);
- });
- // May not be able to understand all files due to mismatch in TS versions.
- // Check `program.getSyntacticDiagnostics()` if referenced files could not be compiled.
- const program = ttp.createTSProgram(files, tsconfig);
+ .filter((filePath) => filePattern.test(filePath));
const promises = files.map>(async (tsFile) => {
const sourceFile = tsFile.includes('.d.ts') ? tsFile.replace('.d.ts', '.js') : tsFile;
try {
- await generateProptypes(program, sourceFile, tsFile);
+ const projectName = tsFile.match(
+ /packages\/mui-([a-zA-Z-]+)\/src/,
+ )![1] as CoreTypeScriptProjects;
+ const project = buildProject(projectName);
+ await generateProptypes(project, sourceFile, tsFile);
} catch (error: any) {
error.message = `${tsFile}: ${error.message}`;
throw error;
diff --git a/test/README.md b/test/README.md
index 15e3e58a82e21e..7fd8d0c11e063c 100644
--- a/test/README.md
+++ b/test/README.md
@@ -248,7 +248,7 @@ Possible values for `version`:
- default: `stable` (minimum supported React version)
- a tag on npm e.g. `next`, `experimental` or `latest`
-- an older version e.g `^17.0.0`
+- an older version e.g. `^17.0.0`
#### CI
diff --git a/test/karma.conf.js b/test/karma.conf.js
index 9fa46fe93e3547..2f975fb47822bc 100644
--- a/test/karma.conf.js
+++ b/test/karma.conf.js
@@ -137,7 +137,7 @@ module.exports = function setKarmaConfig(config) {
{
test: /\.(js|mjs|jsx)$/,
include:
- /node_modules(\/|\\)(notistack|@mui(\/|\\)x-data-grid|@mui(\/|\\)x-data-grid-pro|@mui(\/|\\)x-license-pro|@mui(\/|\\)x-data-grid-generator|@mui(\/|\\)x-date-pickers-pro|@mui(\/|\\)x-date-pickers)/,
+ /node_modules(\/|\\)(notistack|@mui(\/|\\)x-data-grid|@mui(\/|\\)x-data-grid-pro|@mui(\/|\\)x-license-pro|@mui(\/|\\)x-data-grid-generator|@mui(\/|\\)x-date-pickers-pro|@mui(\/|\\)x-date-pickers|@mui(\/|\\)x-tree-view)/,
use: {
loader: 'babel-loader',
options: {
diff --git a/test/utils/initMatchers.ts b/test/utils/initMatchers.ts
index 4c4b0a3cacf080..845ff04244bd49 100644
--- a/test/utils/initMatchers.ts
+++ b/test/utils/initMatchers.ts
@@ -163,7 +163,7 @@ chai.use((chaiAPI, utils) => {
// `CSSStyleDeclaration` is not constructable
// https://stackoverflow.com/a/52732909/3406963
// this is not equivalent to the declaration from `getComputedStyle`
- // e.g `getComputedStyle` would return a readonly declaration
+ // e.g. `getComputedStyle` would return a readonly declaration
// let's hope this doesn't get passed around until it's no longer clear where it comes from
const declaration = document.createElement('span').style;
diff --git a/test/utils/setupBabel.js b/test/utils/setupBabel.js
index 175716b176ac01..d1280280793940 100644
--- a/test/utils/setupBabel.js
+++ b/test/utils/setupBabel.js
@@ -1,7 +1,7 @@
require('@babel/register')({
extensions: ['.js', '.ts', '.tsx'],
- // We have to apply `babel-plugin-module-resolve` to the files in `@mui/x-date-pickers`.
- // Otherwise we can't import `@mui/material` from `@mui/x-date-pickers` in `yarn test:unit`.
- // TODO: Remove once the lab do not export the pickers
- ignore: [/node_modules(\/|\\)(?!.*(@mui(\/|\\)x-date-pickers(\/|\\)([a-zA-Z/\\])+)\.js)/],
+ // We have to apply `babel-plugin-module-resolve` to the files in `@mui/x-tree-view`.
+ // Otherwise we can't import `@mui/material` from `@mui/x-tree-view` in `yarn test:unit`.
+ // TODO: Remove once the lab do not export the tree view
+ ignore: [/node_modules(\/|\\)(?!.*(@mui(\/|\\)x-tree-view(\/|\\)([a-zA-Z/\\])+)\.js)/],
});
diff --git a/yarn.lock b/yarn.lock
index 25cd7f54f3cb28..bc91c520a35bf8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2199,6 +2199,17 @@
"@babel/runtime" "^7.22.6"
"@mui/utils" "^5.13.7"
+"@mui/x-tree-view@https://pkg.csb.dev/mui/mui-x/commit/1f23b33d/@mui/x-tree-view":
+ version "6.0.0-alpha.0"
+ resolved "https://pkg.csb.dev/mui/mui-x/commit/1f23b33d/@mui/x-tree-view#93cbc61c818ed2d6c40554cdbada969f7dcbaab1"
+ dependencies:
+ "@babel/runtime" "^7.22.6"
+ "@mui/utils" "^5.13.7"
+ "@types/react-transition-group" "^4.4.6"
+ clsx "^1.2.1"
+ prop-types "^15.8.1"
+ react-transition-group "^4.4.5"
+
"@next/env@13.4.19":
version "13.4.19"
resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.19.tgz#46905b4e6f62da825b040343cbc233144e9578d3"
@@ -3614,10 +3625,10 @@
resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.1.tgz#2f4f65bb08bc368ac39c96da7b2f09140b26851b"
integrity sha512-/fvYntiO1GeICvqbQ3doGDIP97vWmvFt83GKguJ6prmQM2iXZfFcq6YE8KteFyRtX2/h5Hf91BYvPodJKFYv5Q==
-"@types/node@*", "@types/node@>=10.0.0", "@types/node@>=12", "@types/node@>=12.0.0", "@types/node@^14.0.1", "@types/node@^14.14.35", "@types/node@^18.17.12":
- version "18.17.12"
- resolved "https://registry.yarnpkg.com/@types/node/-/node-18.17.12.tgz#c6bd7413a13e6ad9cfb7e97dd5c4e904c1821e50"
- integrity sha512-d6xjC9fJ/nSnfDeU0AMDsaJyb1iHsqCSOdi84w4u+SlN/UgQdY5tRhpMzaFYsI4mnpvgTivEaQd0yOUhAtOnEQ==
+"@types/node@*", "@types/node@>=10.0.0", "@types/node@>=12", "@types/node@>=12.0.0", "@types/node@^14.0.1", "@types/node@^14.14.35", "@types/node@^18.17.14":
+ version "18.17.14"
+ resolved "https://registry.yarnpkg.com/@types/node/-/node-18.17.14.tgz#a621ad26e7eb076d6846dd3d39557ddf9d89f04b"
+ integrity sha512-ZE/5aB73CyGqgQULkLG87N9GnyGe5TcQjv34pwS8tfBs1IkCh0ASM69mydb2znqd6v0eX+9Ytvk6oQRqu8T1Vw==
"@types/normalize-package-data@^2.4.0", "@types/normalize-package-data@^2.4.1":
version "2.4.1"
@@ -4785,10 +4796,10 @@ available-typed-arrays@^1.0.5:
resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
-aws-sdk@^2.1009.0, aws-sdk@^2.1445.0:
- version "2.1445.0"
- resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.1445.0.tgz#02c4ab824b19b2716858fc5041a322e1951a68ea"
- integrity sha512-/IYUYE79khfguHsb28fQtXKR/avgkhCa6NNOh6W84xEyc89hLTvF30VlvaYaHFlIQeDmylO9kJfjSqGrEVDPIg==
+aws-sdk@^2.1009.0, aws-sdk@^2.1450.0:
+ version "2.1450.0"
+ resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.1450.0.tgz#d54a0bfc6d54391b3d39ff73c0398f435082c14c"
+ integrity sha512-EfZLImJ0XNuIdlx5McHX0rJbOiQHz+vEjnpGV08gXSzaq2cN3vSjE+L2Dju7KmaIh85FTYvLOf2REUuCLDpSRg==
dependencies:
buffer "4.9.2"
events "1.1.1"
@@ -5818,7 +5829,7 @@ clone@^1.0.2:
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
-clsx@^1.1.0, clsx@^1.1.1:
+clsx@^1.1.0, clsx@^1.1.1, clsx@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
@@ -11054,6 +11065,11 @@ lodash.includes@^4.3.0:
resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
integrity sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==
+lodash.invokemap@^4.6.0:
+ version "4.6.0"
+ resolved "https://registry.yarnpkg.com/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz#1748cda5d8b0ef8369c4eb3ec54c21feba1f2d62"
+ integrity sha512-CfkycNtMqgUlfjfdh2BhKO/ZXrP8ePOX5lEU/g0R3ItJcnuxWDwokMGKx1hWcfOikmyOVx6X9IwWnDGlgKl61w==
+
lodash.isboolean@^3.0.3:
version "3.0.3"
resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
@@ -11134,6 +11150,11 @@ lodash.omit@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
integrity sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==
+lodash.pullall@^4.2.0:
+ version "4.2.0"
+ resolved "https://registry.yarnpkg.com/lodash.pullall/-/lodash.pullall-4.2.0.tgz#9d98b8518b7c965b0fae4099bd9fb7df8bbf38ba"
+ integrity sha512-VhqxBKH0ZxPpLhiu68YD1KnHmbhQJQctcipvmFnqIBDYzcIHzf3Zpu0tpeOKtR4x76p9yohc506eGdOjTmyIBg==
+
lodash.snakecase@4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz#39d714a35357147837aefd64b5dcbb16becd8f8d"
@@ -11154,6 +11175,11 @@ lodash.uniq@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
+lodash.uniqby@^4.7.0:
+ version "4.7.0"
+ resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
+ integrity sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww==
+
lodash.upperfirst@4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/lodash.upperfirst/-/lodash.upperfirst-4.3.1.tgz#1365edf431480481ef0d1c68957a5ed99d49f7ce"
@@ -15014,14 +15040,14 @@ sinon@^15.2.0:
nise "^5.1.4"
supports-color "^7.2.0"
-sirv@^1.0.7:
- version "1.0.19"
- resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"
- integrity sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==
+sirv@^2.0.3:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/sirv/-/sirv-2.0.3.tgz#ca5868b87205a74bef62a469ed0296abceccd446"
+ integrity sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==
dependencies:
"@polka/url" "^1.0.0-next.20"
mrmime "^1.0.0"
- totalist "^1.0.0"
+ totalist "^3.0.0"
slash@3.0.0, slash@^3.0.0:
version "3.0.0"
@@ -16004,10 +16030,10 @@ toidentifier@1.0.1:
resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
-totalist@^1.0.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
- integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
+totalist@^3.0.0:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8"
+ integrity sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==
tough-cookie@^4.1.2:
version "4.1.2"
@@ -16541,6 +16567,18 @@ url@0.10.3:
punycode "1.3.2"
querystring "0.2.0"
+use-count-up@^3.0.1:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/use-count-up/-/use-count-up-3.0.1.tgz#315edf4e4be91ead94e6dd34444349d9b8c2c6c3"
+ integrity sha512-jlVsXJYje6jh+xwQaCEYrwHoB+nRyillNEmr21bhe9kw7tpRzyrSq9jQs9UOlo+8hCFkuOmjUihL3IjEK/piVg==
+ dependencies:
+ use-elapsed-time "3.0.2"
+
+use-elapsed-time@3.0.2:
+ version "3.0.2"
+ resolved "https://registry.yarnpkg.com/use-elapsed-time/-/use-elapsed-time-3.0.2.tgz#ef22bf520e60f9873fd102925a2d5cbc5d4faaf5"
+ integrity sha512-2EY9lJ5DWbAvT8wWiEp6Ztnl46DjXz2j78uhWbXaz/bg3OfpbgVucCAlcN8Bih6hTJfFTdVYX9L6ySMn5py/wQ==
+
use-sync-external-store@^1.0.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
@@ -16751,20 +16789,27 @@ webidl-conversions@^7.0.0:
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
-webpack-bundle-analyzer@^4.9.0:
- version "4.9.0"
- resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.9.0.tgz#fc093c4ab174fd3dcbd1c30b763f56d10141209d"
- integrity sha512-+bXGmO1LyiNx0i9enBu3H8mv42sj/BJWhZNFwjz92tVnBa9J3JMGo2an2IXlEleoDOPn/Hofl5hr/xCpObUDtw==
+webpack-bundle-analyzer@^4.9.1:
+ version "4.9.1"
+ resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.9.1.tgz#d00bbf3f17500c10985084f22f1a2bf45cb2f09d"
+ integrity sha512-jnd6EoYrf9yMxCyYDPj8eutJvtjQNp8PHmni/e/ulydHBWhT5J3menXt3HEkScsu9YqMAcG4CfFjs3rj5pVU1w==
dependencies:
"@discoveryjs/json-ext" "0.5.7"
acorn "^8.0.4"
acorn-walk "^8.0.0"
- chalk "^4.1.0"
commander "^7.2.0"
+ escape-string-regexp "^4.0.0"
gzip-size "^6.0.0"
- lodash "^4.17.20"
+ is-plain-object "^5.0.0"
+ lodash.debounce "^4.0.8"
+ lodash.escape "^4.0.1"
+ lodash.flatten "^4.4.0"
+ lodash.invokemap "^4.6.0"
+ lodash.pullall "^4.2.0"
+ lodash.uniqby "^4.7.0"
opener "^1.5.2"
- sirv "^1.0.7"
+ picocolors "^1.0.0"
+ sirv "^2.0.3"
ws "^7.3.1"
webpack-cli@^4.10.0: